From 563520b51d8342eafde401218ca6c3273804315f Mon Sep 17 00:00:00 2001
From: idevlab <idevlab@outlook.com>
Date: Wed, 16 Sep 2026 16:45:46 +0800
Subject: [PATCH 1/4] refactor(desktop): quiet the app shell chrome

---
 apps/desktop/src/App.tsx                      |  13 +--
 apps/desktop/src/projects/ProjectIcon.tsx     |   2 +-
 apps/desktop/src/session/Composer.tsx         |  33 +++---
 .../src/session/SessionHeaderActions.tsx      |   2 +-
 apps/desktop/src/sidebar/SessionRail.tsx      |   8 +-
 apps/desktop/src/styles.css                   |   9 --
 .../sessionHeaderActionsRendered.test.tsx     |   3 +-
 .../tests/sessionRailRendered.test.tsx        |  43 ++++++--
 .../desktop/tests/shellChromeContract.test.ts | 100 ++++++++++++++++++
 .../tests/windowChromeContract.test.ts        |   4 +-
 .../2026-09-16-quiet-shell-chrome/intent.md   |  59 +++++++++++
 .../2026-09-16-quiet-shell-chrome/plan.md     |  59 +++++++++++
 .../2026-09-16-quiet-shell-chrome/spec.md     |  65 ++++++++++++
 .../verification.md                           |  63 +++++++++++
 14 files changed, 408 insertions(+), 55 deletions(-)
 create mode 100644 apps/desktop/tests/shellChromeContract.test.ts
 create mode 100644 docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
 create mode 100644 docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
 create mode 100644 docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
 create mode 100644 docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md

diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index fb7cf25d..400e313e 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -312,7 +312,6 @@ import {
   planPluginManagerChange,
 } from "./plugins/lifecycle";
 import { usePluginSnapshot } from "./plugins/usePluginSnapshot";
-import { ProjectIcon } from "./projects/ProjectIcon";
 import { loadProviderRegistry } from "./providers/registry";
 import { RemoteModal } from "./remote/Remote";
 import { Composer } from "./session/Composer";
@@ -8420,16 +8419,6 @@ export default function App() {
                         >
                           {railExpandAction}
                           {/* Breadcrumb, reference-style: project / thread. */}
-                          <span className="session-header-project-icon flex shrink-0 items-center">
-                            {activeProjectRecord ? (
-                              <ProjectIcon
-                                project={activeProjectRecord}
-                                size={18}
-                              />
-                            ) : (
-                              <Folder className="text-muted-foreground size-3.5" />
-                            )}
-                          </span>
                           {activeProjectName != null &&
                             activeProjectName !== "" && (
                               <>
@@ -8475,7 +8464,7 @@ export default function App() {
 
                           <div className="electrobun-webkit-app-region-drag flex-1" />
 
-                          <div className="session-header-toolbar [&_svg]:text-muted-foreground flex min-w-0 shrink-0 items-center gap-4">
+                          <div className="session-header-toolbar [&_svg]:text-muted-foreground gap-inline flex min-w-0 shrink-0 items-center">
                             {/* Full-page mode hides the transcript, so the header carries the only sign that a turn
                   is in flight — and the way back to the answer without leaving the mode for good. */}
                             {docMode && hasConversationContent && (
diff --git a/apps/desktop/src/projects/ProjectIcon.tsx b/apps/desktop/src/projects/ProjectIcon.tsx
index de5523fa..3b41e0eb 100644
--- a/apps/desktop/src/projects/ProjectIcon.tsx
+++ b/apps/desktop/src/projects/ProjectIcon.tsx
@@ -61,7 +61,7 @@ export function ProjectIcon({
       data-project-icon
       aria-hidden="true"
       className={cn(
-        "rounded-control bg-foreground/[0.055] text-muted-foreground ring-foreground/10 flex shrink-0 items-center justify-center overflow-hidden ring-1",
+        "rounded-control text-muted-foreground flex shrink-0 items-center justify-center overflow-hidden",
         className
       )}
       style={{ width: size, height: size }}
diff --git a/apps/desktop/src/session/Composer.tsx b/apps/desktop/src/session/Composer.tsx
index 55f2ac25..9b1f2065 100644
--- a/apps/desktop/src/session/Composer.tsx
+++ b/apps/desktop/src/session/Composer.tsx
@@ -253,7 +253,7 @@ export function CheckoutBar({
               aria-expanded={open}
             >
               <Folder className="size-3.5 shrink-0" aria-hidden="true" />
-              <span className="text-body text-foreground/85 min-w-0 truncate">
+              <span className="text-body text-muted-foreground min-w-0 truncate">
                 {modeLabel}
               </span>
               <ChevronDown
@@ -366,7 +366,7 @@ export function CheckoutBar({
           size="compact"
           focusStyle="inset"
           onClick={checkout.onOpen}
-          className="bg-foreground/[0.04] px-module-inset text-callout text-foreground/80 ml-auto shrink-0 gap-1.5 font-mono"
+          className="bg-foreground/[0.04] px-module-inset text-callout text-muted-foreground ml-auto shrink-0 gap-1.5 font-mono"
           aria-label={t("checkout.openSourceControl", {
             branch: checkout.branch,
           })}
@@ -1695,6 +1695,20 @@ export function Composer({
 
       {pluginActions}
 
+      {/* Session configuration shares the control row with attach, voice and run: one strip, one
+          baseline. The chips row wraps inside its own measure when the composer is narrow. */}
+      <SessionControls
+        config={config}
+        models={models}
+        currentModel={currentModel}
+        defaultModel={defaultModel}
+        onModel={onModel}
+        configOptions={configOptions}
+        onConfigOption={onConfigOption}
+        modelChangeDisabled={running || loading}
+        showWorktreePicker={!checkout}
+      />
+
       <div className="flex-1" />
 
       {/* Document mode is the app's own feature — it deserves a control you can see, not just a
@@ -2022,7 +2036,7 @@ export function Composer({
           >
             <div
               className={cn(
-                "flex flex-col gap-1",
+                "flex min-w-0 items-center gap-0.5",
                 docMode
                   ? "rounded-composer bg-surface shadow-surface pointer-events-auto mx-auto w-full max-w-3xl p-2"
                   : // Keep every outer edge 8px from the controls. The 24px surface radius then
@@ -2030,18 +2044,7 @@ export function Composer({
                     "p-2"
               )}
             >
-              <SessionControls
-                config={config}
-                models={models}
-                currentModel={currentModel}
-                defaultModel={defaultModel}
-                onModel={onModel}
-                configOptions={configOptions}
-                onConfigOption={onConfigOption}
-                modelChangeDisabled={running || loading}
-                showWorktreePicker={!checkout}
-              />
-              <div className="flex items-center gap-0.5">{controls}</div>
+              {controls}
             </div>
           </div>
         </div>
diff --git a/apps/desktop/src/session/SessionHeaderActions.tsx b/apps/desktop/src/session/SessionHeaderActions.tsx
index 83639f30..8cf4ce99 100644
--- a/apps/desktop/src/session/SessionHeaderActions.tsx
+++ b/apps/desktop/src/session/SessionHeaderActions.tsx
@@ -120,7 +120,7 @@ export function SessionHeaderActions({
   );
   return (
     <div
-      className="session-header-actions flex shrink-0 items-center gap-2"
+      className="session-header-actions gap-inline flex shrink-0 items-center"
       role="group"
       aria-label={t("header.actions")}
     >
diff --git a/apps/desktop/src/sidebar/SessionRail.tsx b/apps/desktop/src/sidebar/SessionRail.tsx
index ef9f1d91..53f80feb 100644
--- a/apps/desktop/src/sidebar/SessionRail.tsx
+++ b/apps/desktop/src/sidebar/SessionRail.tsx
@@ -1019,7 +1019,7 @@ export function SessionRail({
         aria-label={t(
           isWorktree ? "rail.gitWorktreeHint" : "rail.gitCheckoutHint"
         )}
-        className="rounded-micro bg-fill-quiet text-fine text-foreground/55 flex shrink-0 items-center gap-0.5 px-1 leading-4"
+        className="text-fine text-foreground/55 flex shrink-0 items-center gap-0.5 leading-4"
       >
         <GitBranch className="size-2.5" aria-hidden="true" />
         {t(isWorktree ? "rail.gitWorktree" : "rail.gitCheckout")}
@@ -1032,7 +1032,7 @@ export function SessionRail({
           title={`#${pullRequest.number} · ${pullRequestLabel}`}
           aria-label={`#${pullRequest.number} · ${pullRequestLabel}`}
           className={cn(
-            "rounded-micro bg-fill-quiet text-fine flex shrink-0 items-center gap-0.5 px-1 leading-4",
+            "text-fine flex shrink-0 items-center gap-0.5 leading-4",
             pullRequestTone
           )}
         >
@@ -1043,7 +1043,7 @@ export function SessionRail({
           ) : (
             <GitPullRequest className="size-2.5" aria-hidden="true" />
           )}
-          #{pullRequest.number} {pullRequestLabel}
+          #{pullRequest.number}
         </span>
       ) : null;
     const provenanceInSummary = pullRequest === null;
@@ -1328,7 +1328,7 @@ export function SessionRail({
                   className={cn(
                     "session-rail-row group rounded-control hover:bg-fill-hover focus-within:bg-fill-hover active:bg-fill-pressed data-[popup-open]:bg-fill-hover relative cursor-default px-2 py-1.5 transition-[box-shadow,opacity] outline-none data-[sidebar-dragging=true]:opacity-45",
                     s.id === activeSession &&
-                      "bg-fill-selected hover:bg-fill-selected-hover focus-within:bg-fill-selected active:bg-fill-pressed before:absolute before:inset-y-3 before:left-0.5 before:w-0.5 before:rounded-full before:bg-current"
+                      "bg-fill-selected hover:bg-fill-selected-hover focus-within:bg-fill-selected active:bg-fill-pressed"
                   )}
                 >
                   <Button
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index c7332b40..06db3cb5 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -1793,10 +1793,6 @@ pre {
 }
 
 @container session-header (max-width: 36rem) {
-  .session-header-actions {
-    gap: var(--ds-space-surface-inset);
-  }
-
   .session-header-action-label {
     display: none;
   }
@@ -1814,7 +1810,6 @@ pre {
 }
 
 @container session-header (max-width: 28rem) {
-  .session-header-project-icon,
   .session-header-project-context,
   .session-header [data-plugin-ui-slot="session.header"] {
     display: none;
@@ -1823,10 +1818,6 @@ pre {
   .session-header-title {
     min-width: 3rem;
   }
-
-  .session-header-actions {
-    gap: 0.25rem;
-  }
 }
 
 @container dock (max-width: 640px) {
diff --git a/apps/desktop/tests/sessionHeaderActionsRendered.test.tsx b/apps/desktop/tests/sessionHeaderActionsRendered.test.tsx
index fe7bfed5..7dc4a2ae 100644
--- a/apps/desktop/tests/sessionHeaderActionsRendered.test.tsx
+++ b/apps/desktop/tests/sessionHeaderActionsRendered.test.tsx
@@ -111,7 +111,8 @@ describe("SessionHeaderActions", () => {
     activateDom();
     const { view } = renderActions();
     const group = view.container.querySelector(".session-header-actions");
-    expect(group?.classList.contains("gap-2")).toBe(true);
+    expect(group?.classList.contains("gap-inline")).toBe(true);
+    expect(group?.classList.contains("gap-2")).toBe(false);
     expect(group?.classList.contains("rounded-control")).toBe(false);
     expect(group?.classList.contains("p-0.5")).toBe(false);
 
diff --git a/apps/desktop/tests/sessionRailRendered.test.tsx b/apps/desktop/tests/sessionRailRendered.test.tsx
index 1a14feb1..72dc29fa 100644
--- a/apps/desktop/tests/sessionRailRendered.test.tsx
+++ b/apps/desktop/tests/sessionRailRendered.test.tsx
@@ -1158,18 +1158,41 @@ describe("SessionRail row layout", () => {
     ).toContain("Checkout");
 
     await waitFor(() => {
-      expect(
-        view.container.querySelector(
-          '[data-session-id="isolated"] [data-session-pull-request="merged"]'
-        )?.textContent
-      ).toContain("#84 Merged");
-      expect(
-        view.container.querySelector(
-          '[data-session-id="regular"] [data-session-pull-request="ci_failed"]'
-        )?.textContent
-      ).toContain("#83 CI failed");
+      const merged = view.container.querySelector(
+        '[data-session-id="isolated"] [data-session-pull-request="merged"]'
+      );
+      const failed = view.container.querySelector(
+        '[data-session-id="regular"] [data-session-pull-request="ci_failed"]'
+      );
+      // The state travels by colour and the shared tooltip/accessible name, not by visible words.
+      expect(merged?.textContent).toContain("#84");
+      expect(merged?.textContent).not.toContain("Merged");
+      expect(merged?.getAttribute("title")).toContain("Merged");
+      expect(merged?.getAttribute("aria-label")).toContain("Merged");
+      expect(failed?.textContent).toContain("#83");
+      expect(failed?.textContent).not.toContain("CI failed");
+      expect(failed?.getAttribute("title")).toContain("CI failed");
     });
 
+    // The provenance marks are inline meta, not pills: no fill and no pill padding, so their text
+    // edge matches the row title's edge on the shared content container.
+    for (const selector of [
+      '[data-session-id="isolated"] [data-session-checkout-kind="worktree"]',
+      '[data-session-id="regular"] [data-session-pull-request="ci_failed"]',
+    ]) {
+      const badge = view.container.querySelector(selector);
+      expect(badge?.classList.contains("bg-fill-quiet")).toBe(false);
+      expect(badge?.classList.contains("rounded-micro")).toBe(false);
+      expect(badge?.classList.contains("px-1")).toBe(false);
+    }
+    const row = view.container.querySelector('[data-session-id="regular"]');
+    const titleLine = row?.querySelector('[data-session-line="title"]');
+    const workspaceLine = row?.querySelector('[data-session-line="workspace"]');
+    expect(titleLine?.parentElement).toBe(workspaceLine?.parentElement);
+    expect(titleLine?.parentElement?.hasAttribute("data-session-content")).toBe(
+      true
+    );
+
     view.unmount();
   });
 
diff --git a/apps/desktop/tests/shellChromeContract.test.ts b/apps/desktop/tests/shellChromeContract.test.ts
new file mode 100644
index 00000000..940512a3
--- /dev/null
+++ b/apps/desktop/tests/shellChromeContract.test.ts
@@ -0,0 +1,100 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+
+const normalizeSource = (source: string) => source.replaceAll(/\r\n?/gu, "\n");
+const readSource = (relativePath: string) =>
+  normalizeSource(
+    readFileSync(new URL(relativePath, import.meta.url), "utf-8")
+  );
+
+const app = readSource("../src/App.tsx");
+const headerActions = readSource("../src/session/SessionHeaderActions.tsx");
+const styles = readSource("../src/styles.css");
+const projectIcon = readSource("../src/projects/ProjectIcon.tsx");
+const rail = readSource("../src/sidebar/SessionRail.tsx");
+const composer = readSource("../src/session/Composer.tsx");
+
+describe("shell chrome contract", () => {
+  test("normalizes source contracts across platform line endings", () => {
+    expect(normalizeSource("first\r\nsecond\rthird")).toBe(
+      "first\nsecond\nthird"
+    );
+  });
+
+  test("keeps one titlebar gap across controls and clusters", () => {
+    const toolbarClass = /className="(session-header-toolbar [^"]+)"/u.exec(
+      app
+    )?.[1];
+    expect(toolbarClass?.split(" ")).toContain("gap-inline");
+    expect(toolbarClass).not.toContain("gap-4");
+    const actionsClass = /className="(session-header-actions [^"]+)"/u.exec(
+      headerActions
+    )?.[1];
+    expect(actionsClass?.split(" ")).toContain("gap-inline");
+    expect(actionsClass).not.toContain("gap-2");
+    expect(styles).not.toMatch(/\.session-header-actions\s*{[^}]*gap:/s);
+  });
+
+  test("renders the project mark without a tile fill or ring", () => {
+    expect(projectIcon).not.toContain("bg-foreground/[0.055]");
+    expect(projectIcon).not.toContain("ring-1");
+    expect(projectIcon).toContain(
+      '"rounded-control text-muted-foreground flex shrink-0 items-center justify-center overflow-hidden"'
+    );
+  });
+
+  test("renders workspace badges unfilled on the row's content edge", () => {
+    const checkout = rail.slice(
+      rail.indexOf("const checkoutBadge"),
+      rail.indexOf("const pullRequestBadge")
+    );
+    const pullRequest = rail.slice(
+      rail.indexOf("const pullRequestBadge"),
+      rail.indexOf("const provenanceInSummary")
+    );
+    for (const badge of [checkout, pullRequest]) {
+      expect(badge).not.toContain("bg-fill-quiet");
+      expect(badge).not.toContain("rounded-micro");
+      expect(badge).not.toContain("px-1");
+    }
+    expect(checkout).toContain("text-fine text-foreground/55");
+    expect(pullRequest).toContain("text-fine flex shrink-0 items-center");
+    expect(rail).toContain(
+      'className="pointer-events-none relative z-10 pl-1.5"'
+    );
+  });
+
+  test("carries the pull-request state by colour, not by words", () => {
+    const badge = rail.slice(
+      rail.indexOf("const pullRequestBadge"),
+      rail.indexOf("const provenanceInSummary")
+    );
+    expect(badge).toContain("#{pullRequest.number}");
+    expect(badge).not.toContain("{pullRequestLabel}</span>");
+    expect(badge).toContain("pullRequestTone");
+    expect(badge).toContain(
+      "aria-label={`#${pullRequest.number} · ${pullRequestLabel}`}"
+    );
+  });
+
+  test("drops the leading project mark and the rail selection bar", () => {
+    expect(app).not.toContain("session-header-project-icon");
+    expect(app).not.toContain('from "./projects/ProjectIcon"');
+    expect(styles).not.toContain(".session-header-project-icon");
+    expect(rail).not.toContain("before:inset-y-3");
+    expect(rail).not.toContain("before:rounded-full");
+    expect(rail).toContain("bg-fill-selected hover:bg-fill-selected-hover");
+  });
+
+  test("keeps one composer control row with the session chips in it", () => {
+    const spacer = composer.indexOf('<div className="flex-1" />');
+    const chips = composer.indexOf("<SessionControls");
+    expect(chips).toBeGreaterThan(-1);
+    expect(chips).toBeLessThan(spacer);
+    expect(composer).toContain(
+      '"flex min-w-0 items-center gap-0.5",\n                docMode'
+    );
+    expect(composer).not.toContain('"flex flex-col gap-1"');
+    expect(composer.match(/<SessionControls/gu)).toHaveLength(1);
+  });
+});
diff --git a/apps/desktop/tests/windowChromeContract.test.ts b/apps/desktop/tests/windowChromeContract.test.ts
index 9bc02c62..2a878a29 100644
--- a/apps/desktop/tests/windowChromeContract.test.ts
+++ b/apps/desktop/tests/windowChromeContract.test.ts
@@ -204,10 +204,10 @@ describe("macOS window chrome contract", () => {
       '"session-header window-titlebar electrobun-webkit-app-region-drag flex min-w-0 shrink-0 items-center gap-2 pr-4"'
     );
     expect(appSource).toContain(
-      'className="session-header-toolbar [&_svg]:text-muted-foreground flex min-w-0 shrink-0 items-center gap-4"'
+      'className="session-header-toolbar [&_svg]:text-muted-foreground gap-inline flex min-w-0 shrink-0 items-center"'
     );
     expect(sessionHeaderActionsSource).toContain(
-      'className="session-header-actions flex shrink-0 items-center gap-2"'
+      'className="session-header-actions gap-inline flex shrink-0 items-center"'
     );
     expect(sessionHeaderActionsSource).toContain(
       "session-header-action-main bg-fill-rest text-foreground hover:bg-fill-hover hover:text-foreground"
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
new file mode 100644
index 00000000..4d3efdec
--- /dev/null
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
@@ -0,0 +1,59 @@
+---
+id: 2026-09-16-quiet-shell-chrome
+schema: 5
+stage: intent
+status: accepted
+owner: chenli
+created: 2026-09-16
+source: user
+risk: medium
+approved_by: chenli
+approved_at: 2026-09-16
+approval_source: "Direct request: a screenshot of the running dev build with five red annotations (统一间距 / 去掉背景 / 对齐问题 / 去掉背景 / composer config row), confirmed through the follow-up questions for the ambiguous marks."
+next_trigger: chenli reviews the verified work.
+---
+
+# Intent: Quiet the app shell chrome
+
+## Intent
+
+The user reviewed the running dev build and marked five chrome problems in one annotated screenshot,
+then confirmed the two ambiguous marks in a follow-up exchange:
+
+1. the titlebar's right action cluster mixes 16px, 8px and 17px gaps and mixes filled and unfilled
+   controls ("统一间距");
+2. the project mark in the titlebar carries a filled tile with a ring ("去掉背景");
+3. the session row's workspace badge line does not left-align with the row title ("对齐问题");
+4. the two workspace badges render as filled pills ("去掉背景");
+5. the composer's session-config chips occupy their own row above the `+ / voice / send` row, and
+   the user wants them moved onto that row.
+
+Measured before the change (renderer at 1728px, empty shell): `.session-header-toolbar` `gap: 16px`,
+the session action group `gap: 8px`, and a 17px gap before the trailing layout control;
+`ProjectIcon` renders `bg-foreground/[0.055]` plus `ring-1 ring-foreground/10`; the checkout and
+pull-request badges render `bg-fill-quiet` with `px-1` pill padding; the composer footer stacks
+`SessionControls` above the `controls` row.
+
+Outcome: one 4px gap across the titlebar toolbar (the documented rhythm for independent 28px
+controls), a plain project mark, unfilled workspace badges whose text starts at the title's edge, and
+a composer whose config chips share the single control row with `+ / voice / send`.
+
+Follow-up review in the same session added four more marks on the running build:
+
+6. the rail's pull-request badge should carry its state by colour instead of the words
+   ("用颜色表示合并状态，不要文字了"); the checkout badge and the numbers stay;
+7. the session header's leading project mark should go entirely ("去掉前面的icon");
+8. the selected rail row's left selection bar should go ("去掉这个组件前面的线"); the selected fill
+   remains as the selection state;
+9. the checkout bar's chips should use the quiet grey label ("改成输入框里面的按钮灰色字").
+
+Constraints: no control is added, removed, or demoted — this is spacing, plane, and structure only.
+Keep every aria-label, tooltip, popover, and keyboard path, the rail's drag/context-menu behaviour,
+and both composer shapes (compact and document). No token, theme, or color value changes.
+
+Non-goals: the action-budget reduction (demoting low-frequency actions into overflow), the status
+vocabulary convergence, and the global spacing-vocabulary cleanup stay in their own records.
+
+## Non-goals
+
+No behavior, data, copy, or navigation change; no new component; no change to which controls exist.
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
new file mode 100644
index 00000000..8e6111bd
--- /dev/null
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
@@ -0,0 +1,59 @@
+---
+id: 2026-09-16-quiet-shell-chrome
+schema: 5
+stage: plan
+status: accepted
+owner: chenli
+created: 2026-09-16
+based_on: spec.md
+scope: apps/desktop/src/App.tsx, apps/desktop/src/session/SessionHeaderActions.tsx, apps/desktop/src/session/Composer.tsx, apps/desktop/src/sidebar/SessionRail.tsx, apps/desktop/src/projects/ProjectIcon.tsx, apps/desktop/src/styles.css, apps/desktop/tests/shellChromeContract.test.ts, apps/desktop/tests/sessionRailRendered.test.tsx, apps/desktop/tests/sessionHeaderActionsRendered.test.tsx, apps/desktop/tests/windowChromeContract.test.ts, apps/desktop/tests/composerGeometryContract.test.ts, docs/sdlc/changes/2026-09-16-quiet-shell-chrome
+---
+
+# Plan: Quiet the app shell chrome
+
+## Plan
+
+1. `apps/desktop/src/App.tsx` — `.session-header-toolbar` `gap-4` → `gap-inline`. (AC-1)
+2. `apps/desktop/src/session/SessionHeaderActions.tsx` — the action group `gap-2` → `gap-inline`;
+   the overflow trigger keeps its `size-7` control so the group stays on one 28px baseline. (AC-1)
+3. `apps/desktop/src/styles.css` — remove the two `@container session-header` gap overrides so the
+   toolbar rhythm never widens with the window; keep the label-collapse rules. (AC-1)
+4. `apps/desktop/src/projects/ProjectIcon.tsx` — drop the tile fill and the ring. (AC-2)
+5. `apps/desktop/src/sidebar/SessionRail.tsx` — the checkout and pull-request badges drop
+   `bg-fill-quiet`, `rounded-micro`, and `px-1`. (AC-3)
+6. `apps/desktop/src/session/Composer.tsx` — move `<SessionControls>` into the `controls` fragment
+   before the flex spacer and collapse the footer to one `flex items-center` row. (AC-4)
+7. `apps/desktop/tests/shellChromeContract.test.ts` — new source contract for the four fixes.
+8. `apps/desktop/tests/sessionRailRendered.test.tsx` — extend the provenance case to assert the
+   badges carry no fill/pill classes and that the workspace line shares `data-session-content` with
+   the title line. (AC-3)
+9. `apps/desktop/tests/sessionHeaderActionsRendered.test.tsx` and
+   `apps/desktop/tests/composerGeometryContract.test.ts` — update only if their existing assertions
+   cover the changed classes.
+10. Review follow-ups, all inside the paths above plus `shellChromeContract`:
+    `apps/desktop/src/sidebar/SessionRail.tsx` carries the pull-request state by colour only and
+    drops the selected row's `before:` bar (AC-6, AC-8);
+    `apps/desktop/src/App.tsx` and `apps/desktop/src/styles.css` drop the header's leading project
+    mark and its narrow-window rule (AC-7); `apps/desktop/src/session/Composer.tsx` moves the
+    checkout and branch chip labels to the muted foreground (AC-9).
+
+Checks by risk and affected behavior:
+
+- Desktop: `bun run lint`, `bunx tsc --noEmit`, `bun test`, `bun run build:renderer` from
+  `apps/desktop`.
+- Rendered (AC-1, AC-2, AC-4, AC-5): the renderer runs from this worktree (`bun run dev:renderer`,
+  port 1420) and the agent's collaborative browser measures the toolbar gaps, the project-mark
+  styles, and the composer's control rows before and after. The rail's badge alignment is structural
+  (same container, no badge padding) and asserted through the rendered rail test because the
+  Core-less renderer has no session fixture for the rail; the running dev window the user opened
+  carries the same code and is left for their visual check.
+- Repository: `bun script/verify/sdlc.ts --worktree` and `bun script/verify/docs.ts` before handoff.
+
+Temporary resources: the task-owned renderer log at
+`/var/folders/nl/47s4vtc92m74_j8pmm7d0chh0000gn/T/opencode/renderer-1420.log`, the Vite dev server on
+port 1420, and the ignored `apps/desktop/dist/` output from the build check. The server is stopped and
+the log removed before handoff; screenshots are retained as Verification evidence. The user's running
+dev window (C2-dev, data dir `dev.codetwo.app.dev`) is theirs and is left running.
+
+Rollback: `git revert` of the single commit; every edit is a class, markup, or CSS change with no
+data, protocol, or persistence surface.
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
new file mode 100644
index 00000000..35a8f1e2
--- /dev/null
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
@@ -0,0 +1,65 @@
+---
+id: 2026-09-16-quiet-shell-chrome
+schema: 5
+stage: spec
+status: accepted
+owner: chenli
+created: 2026-09-16
+based_on: intent.md
+---
+
+# Spec: Quiet the app shell chrome
+
+## Design
+
+1. **One titlebar gap.** `.session-header-toolbar` drops `gap-4` (16px) and the session action group
+   drops `gap-2` (8px) for the semantic `gap-inline` (4px), matching `docs/design/system.md`
+   ("Independent 28px controls use a 4px gap"). The two `@container session-header` gap overrides
+   (`12px` below 36rem, `4px` below 28rem) are removed because they made narrow windows *wider* than
+   the base, which is where the uneven reading came from. Control heights, fills, and labels are
+   unchanged.
+2. **Plain project mark.** `ProjectIcon` drops the `bg-foreground/[0.055]` tile and the
+   `ring-1 ring-foreground/10` ring. The 12px `rounded-control` box stays so an uploaded icon image
+   still clips to the same shape; without one, the folder glyph renders on the app plane. All three
+   call sites (titlebar, worktree list, project picker) share the change.
+3. **Unfilled workspace badges.** The checkout and pull-request badges drop `bg-fill-quiet`,
+   `rounded-micro`, and the `px-1` pill padding, becoming inline icon+label meta in their existing
+   tone (`text-foreground/55`, `text-success`, `text-destructive`, `text-warning`,
+   `text-muted-foreground`). Because they are the only element on the workspace line that added a
+   left offset, this also puts their text edge on the row title's edge: both lines are children of
+   the same `data-session-content` container, which owns the row's single left inset.
+4. **One composer control row.** `SessionControls` moves from its own line in the footer into the
+   `controls` fragment before the flex spacer, so the compact composer renders one row:
+   `[+] [collaboration] [goal] [statusline] [chips] … [expand] [voice] [run]`. The footer keeps a
+   single `flex items-center` row; the session-options popover still opens beneath the chips, and the
+   document-mode floating bar keeps its surface and position.
+5. **Pull-request state by colour.** The rail badge keeps its state icon and `#number` and drops the
+   visible state word; the tone still separates merged (success), failing/conflicting (destructive),
+   running (warning) and the rest (muted), and the tooltip and `aria-label` keep the words for hover
+   and assistive technology.
+6. **No leading project mark.** The session header's breadcrumb loses the project icon span, its
+   `ProjectIcon`/`Folder` conditional and the now-unused imports; the project name and `/` separator
+   stay, and the narrow-window rule that hid the mark goes with it.
+7. **No rail selection bar.** The selected rail row keeps `bg-fill-selected` and drops the
+   `before:` vertical bar; nothing else changes and the row's other states are untouched.
+8. **Quiet checkout-bar labels.** The checkout chip and the branch chip switch their label colour
+   from `text-foreground/85` and `text-foreground/80` to the muted foreground.
+
+## Acceptance criteria
+
+- [x] AC-1: The titlebar toolbar renders one 4px gap across its controls and clusters; no 16px or 8px
+  toolbar gap and no widening container-query override remains.
+- [x] AC-2: The project mark renders with no tile fill and no ring at all three call sites.
+- [x] AC-3: The workspace badges render with no background or pill padding, and the workspace line
+  shares the row content container with the title line so their text edges agree.
+- [x] AC-4: The compact composer renders the chips in the same row as `+ / voice / run`; the footer
+  keeps one control row and the options popover still opens under the chips.
+- [x] AC-5: Desktop lint, type, tests, and the renderer build pass; rendered captures show the
+  titlebar gap, the plain project mark, the unfilled badges, and the single composer row.
+- [x] AC-6: The rail's pull-request badge renders the state icon and `#number` only, coloured by
+  state, with the state word still present in its `title` and `aria-label` and absent from the
+  visible text.
+- [x] AC-7: The session header renders the project name and `/` without a leading project mark, and
+  no `ProjectIcon`/`Folder` fallback remains in that header.
+- [x] AC-8: The selected rail row renders its selected fill with no leading bar.
+- [x] AC-9: The checkout chip and the branch chip render their labels in the muted foreground.
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
new file mode 100644
index 00000000..bae000c0
--- /dev/null
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
@@ -0,0 +1,63 @@
+---
+id: 2026-09-16-quiet-shell-chrome
+schema: 5
+stage: verification
+status: passed
+owner: chenli
+created: 2026-09-16
+based_on: plan.md
+revision: "8d1f32d7 (origin/main) with the quiet-shell-chrome change applied"
+verification_mode: owner
+verified_by: chenli
+verified_at: 2026-09-16
+release_target: none
+cleanup_status: complete
+---
+
+# Verification: Quiet the app shell chrome
+
+## Verification
+
+- AC-1: PASS — In the renderer (`bun run dev:renderer`, port 1420, 1728px) the toolbar computed `gap: 4px` with measured gaps `[4, 4]` across the environment, action and layout clusters, and the action group computed `gap: 4px` with measured `[4, 4]`; before the change the same points measured `16px`, `8px`, `8px` and a 17px trailing gap. `shellChromeContract` and the updated `windowChromeContract` assert the semantic gap and the absence of the container-query overrides.
+- AC-2: PASS — `ProjectIcon` no longer emits `bg-foreground/[0.055]` or `ring-1`, asserted by `shellChromeContract`; the capture cannot show it because the empty shell has no selected project, and the settings picker and worktree list share the same component.
+- AC-3: PASS — The checkout and pull-request badges render as `text-fine` inline meta with no `bg-fill-quiet`, `rounded-micro`, or `px-1`, and `sessionRailRendered` asserts that the title line and the workspace line share the same `data-session-content` parent, so removing the badge padding restores the title's text edge.
+- AC-4: PASS — The compact composer renders the chips in the single control row: the footer computed `flex min-w-0 items-center gap-0.5 p-2`, and the measured row holds `+` at x=488, the plugin and scene/model chips at x=518–883, then the expand, voice and send controls at x=1144–1240 on one line (the 32px send control centres 2px above the 28px icons).
+- AC-5: PASS — From `apps/desktop`: `bun run lint`, `bunx tsc --noEmit` (inside `build:renderer`), `bun test` (947 pass, 3 skip, 0 fail) and `bun run build:renderer`. Rendered captures `browser-artifacts/browser-screenshot-localhost-mu3u2676-4aa21431.png` and `browser-artifacts/browser-screenshot-localhost-mu3urkcu-a8e0e136.png` show the unified titlebar spacing and the single composer row.
+- AC-6: PASS — The rail badge renders only the state icon and `#{pullRequest.number}`, with `pullRequestTone` carrying the state colour; `sessionRailRendered` asserts `#84` is visible while `Merged`/`CI failed` appear only in `title` and `aria-label`, and `shellChromeContract` asserts the source keeps the tone and the accessible words.
+- AC-7: PASS — `shellChromeContract` asserts `App.tsx` no longer renders `session-header-project-icon`, no longer imports `ProjectIcon`, and `styles.css` no longer hides that mark; the rendered shell reports `headerHasProjectMark: false`.
+- AC-8: PASS — `shellChromeContract` asserts the selected rail row keeps `bg-fill-selected` and no longer emits `before:inset-y-3`/`before:rounded-full`; the rendered rail test still passes with the fill as the only selection state.
+- AC-9: PASS — In the renderer the checkout chip's label computed `oklch(0.49583 0.00272918 none)` (the muted foreground) instead of the former `text-foreground/85`, and `shellChromeContract` covers the source change for both chips.
+
+Verdict: verified.
+Residual risk: the rail rows, the project mark and the branch chip need session/project data that the
+Core-less renderer does not have, so their evidence is structural plus the rendered rail/header
+tests; the user's running dev window carries the same source for the visual check. The 4px toolbar
+rhythm is now flat across every window width, and the narrow-window label collapse is unchanged. The
+composer's chips can still wrap inside their own measure when the composer is narrow, by design. The
+shared `selectable` button variant keeps its own leading mark for navigation rows; only the rail
+session row lost it.
+
+## Cleanup
+
+Removed: the task-owned Vite dev server on port 1420 and its log at
+`/var/folders/nl/47s4vtc92m74_j8pmm7d0chh0000gn/T/opencode/renderer-1420.log`, plus the ignored
+`apps/desktop/dist/` renderer output from the build check.
+Retained: the after screenshot in `/Users/chenli/.t3/userdata/browser-artifacts/` as AC-5 evidence,
+and the user's running `C2-dev` window with its build output under `apps/desktop/build/` and the
+Rust `target/` tree.
+Retention owner: chenli.
+Cleanup trigger: remove the screenshot with the next browser-artifact cleanup after review; the dev
+window and its build output go when the user stops or restarts their instance.
+Processes: the task-owned Vite server on port 1420 was stopped and
+`lsof -nP -iTCP:1420 -sTCP:LISTEN` plus `pgrep -fl "vite --port 1420"` match nothing. The user's
+`C2-dev` app (launcher 26364, app 26365, core 26368 on data dir `dev.codetwo.app.dev`) and the
+installed `C2 Nightly` app were left untouched.
+Evidence: `git status --porcelain` lists only the intended source and test files plus the record
+bundle.
+
+## Review and release
+
+Approval: awaiting chenli's review of the verified work.
+Rollback: See plan.md.
+Release: No release requested; merge and external actions require their own authorization.
+Feedback: Link an Incident and regression Eval when a real failure occurs.

From 9735ef21dc71a6d9870f8e6650e0b7266078ce4a Mon Sep 17 00:00:00 2001
From: idevlab <idevlab@outlook.com>
Date: Wed, 16 Sep 2026 16:49:20 +0800
Subject: [PATCH 2/4] docs: link PR #238 and the hosted CI result from the
 verified record

---
 .../changes/2026-09-16-quiet-shell-chrome/verification.md   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
index bae000c0..03913be8 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
@@ -57,7 +57,11 @@ bundle.
 
 ## Review and release
 
-Approval: awaiting chenli's review of the verified work.
+Approval: implementation and PR delivery were requested directly by the user (the annotated review
+and the four follow-up marks); merge and release are not authorized.
 Rollback: See plan.md.
 Release: No release requested; merge and external actions require their own authorization.
+Review: [PR #238](https://github.com/IchenDEV/codeTwo/pull/238) carries this change on branch
+t3code/quiet-shell-chrome, based on main 833ecb8b; the hosted CI Validate job passed (run
+35075609711, job 104727185571, 2m44s).
 Feedback: Link an Incident and regression Eval when a real failure occurs.

From dd3aeffc42d6c25f33662ec22b90314adf32d1d7 Mon Sep 17 00:00:00 2001
From: idevlab <idevlab@outlook.com>
Date: Wed, 16 Sep 2026 18:25:03 +0800
Subject: [PATCH 3/4] fix(desktop): put every rail row on one content edge

---
 apps/desktop/src/sidebar/SessionRail.tsx      |  5 ++--
 .../tests/sessionRailRendered.test.tsx        | 25 ++++++++-----------
 .../desktop/tests/shellChromeContract.test.ts | 14 ++++++++++-
 .../2026-09-16-quiet-shell-chrome/intent.md   | 18 ++++++++++++-
 .../2026-09-16-quiet-shell-chrome/plan.md     |  4 +++
 .../2026-09-16-quiet-shell-chrome/spec.md     |  7 ++++++
 .../verification.md                           |  2 ++
 7 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/sidebar/SessionRail.tsx b/apps/desktop/src/sidebar/SessionRail.tsx
index 53f80feb..54b49ade 100644
--- a/apps/desktop/src/sidebar/SessionRail.tsx
+++ b/apps/desktop/src/sidebar/SessionRail.tsx
@@ -1351,7 +1351,7 @@ export function SessionRail({
                   />
                   <div
                     data-session-content
-                    className="pointer-events-none relative z-10 pl-1.5"
+                    className="pointer-events-none relative z-10"
                   >
                     {/* Title owns the row. Routine controls appear on demand. */}
                     <div
@@ -1756,6 +1756,7 @@ export function SessionRail({
                           ref={sourceRef}
                           type="button"
                           variant="ghost"
+                          size="row"
                           focusStyle="inset"
                         />
                       }
@@ -1763,7 +1764,7 @@ export function SessionRail({
                       title={t(open ? "rail.hideProject" : "rail.showProject", {
                         name: project.name,
                       })}
-                      className="rounded-control text-ui focus-visible:focus-ring-inset flex min-w-0 flex-1 items-center gap-2 px-2 leading-4 outline-none hover:bg-transparent dark:hover:bg-transparent"
+                      className="rounded-control text-body focus-visible:focus-ring-inset flex min-w-0 flex-1 items-center gap-2 leading-4 outline-none hover:bg-transparent dark:hover:bg-transparent"
                     >
                       <Folder className="size-4 shrink-0" aria-hidden="true" />
                       <span className="min-w-0 flex-1 truncate text-left">
diff --git a/apps/desktop/tests/sessionRailRendered.test.tsx b/apps/desktop/tests/sessionRailRendered.test.tsx
index 72dc29fa..1f38fa67 100644
--- a/apps/desktop/tests/sessionRailRendered.test.tsx
+++ b/apps/desktop/tests/sessionRailRendered.test.tsx
@@ -374,17 +374,15 @@ describe("SessionRail row layout", () => {
       '[data-session-id="meaningful"]'
     );
     expect(groupedRow?.className).not.toContain("ml-6");
-    expect(toggle?.className).toContain("px-2");
+    expect(toggle?.getAttribute("data-size")).toBe("row");
+    expect(toggle?.className).toContain("min-h-navigation-row");
+    expect(toggle?.className).toContain("px-module-inset");
     expect(groupedRow?.className).toContain("px-2");
+    // One content column: the project mark, the nav marks and the session text all sit on the
+    // rail's single 16px edge, so the session content adds no padding of its own.
     expect(
       groupedRow?.querySelector("[data-session-content]")?.className
-    ).toContain("pl-1.5");
-    expect(
-      groupedRow?.querySelector("[data-session-content]")?.className
-    ).not.toContain("pl-2");
-    expect(
-      groupedRow?.querySelector("[data-session-content]")?.className
-    ).not.toContain("pl-6");
+    ).not.toContain("pl-");
 
     click(toggle);
     await waitFor(() => {
@@ -1085,15 +1083,12 @@ describe("SessionRail row layout", () => {
     ).toBeTruthy();
     expect(row?.querySelectorAll("[data-session-line]")).toHaveLength(2);
     expect(row?.textContent).not.toContain("repo");
-    expect(row?.querySelector("[data-session-content]")?.className).toContain(
-      "pl-1.5"
-    );
-    expect(
-      row?.querySelector("[data-session-content]")?.className
-    ).not.toContain("pl-2");
     expect(
       row?.querySelector("[data-session-content]")?.className
-    ).not.toContain("pl-6");
+    ).not.toContain("pl-");
+    expect(row?.querySelector("[data-session-content]")?.className).toContain(
+      "z-10"
+    );
 
     view.unmount();
   });
diff --git a/apps/desktop/tests/shellChromeContract.test.ts b/apps/desktop/tests/shellChromeContract.test.ts
index 940512a3..20388b1e 100644
--- a/apps/desktop/tests/shellChromeContract.test.ts
+++ b/apps/desktop/tests/shellChromeContract.test.ts
@@ -59,9 +59,21 @@ describe("shell chrome contract", () => {
     }
     expect(checkout).toContain("text-fine text-foreground/55");
     expect(pullRequest).toContain("text-fine flex shrink-0 items-center");
+    expect(rail).toContain('className="pointer-events-none relative z-10"');
+  });
+
+  test("keeps one content edge across the rail's rows", () => {
+    // Every rail row's leading mark and text share the 16px column: the nav rows and the
+    // all-projects toggle reach it through the shared row size, the project header used to sit at
+    // 20 because an unsized Button fell back to the default control padding, and the session
+    // content added 6px on top of the row inset.
+    expect(rail).toContain('className="pointer-events-none relative z-10"');
+    expect(rail).not.toContain("pl-1.5");
+    expect(rail).toMatch(/variant="ghost"\s+size="row"\s+focusStyle="inset"/u);
     expect(rail).toContain(
-      'className="pointer-events-none relative z-10 pl-1.5"'
+      'className="rounded-control text-body focus-visible:focus-ring-inset flex min-w-0 flex-1 items-center gap-2 leading-4 outline-none hover:bg-transparent dark:hover:bg-transparent"'
     );
+    expect(rail).not.toContain("text-ui");
   });
 
   test("carries the pull-request state by colour, not by words", () => {
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
index 4d3efdec..bd3c71fd 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/intent.md
@@ -45,7 +45,23 @@ Follow-up review in the same session added four more marks on the running build:
 7. the session header's leading project mark should go entirely ("去掉前面的icon");
 8. the selected rail row's left selection bar should go ("去掉这个组件前面的线"); the selected fill
    remains as the selection state;
-9. the checkout bar's chips should use the quiet grey label ("改成输入框里面的按钮灰色字").
+9. the checkout bar's chips should use the quiet grey label ("改成输入框里面的按钮灰色字");
+10. the sidebar still reads as misaligned ("明显对齐还有问题"), and the user asked for the check to run
+    against the real app through the web server instead of a screenshot ("对齐的用webserver检查").
+
+Measured on the web server against a copy of the running dev data dir (rail 288px, 1728px viewport):
+
+| element | before | after |
+| --- | --- | --- |
+| feature nav rows (icon) | 16 | 16 |
+| "All projects" label | 16 | 16 |
+| project header (folder / name) | 20 / 44 | 16 / 40 |
+| session title, summary, badges | 22 | 16 |
+
+The project header's Button carried no `size`, so it fell back to the default control padding whose
+`has-[>svg]:px-3` (12px) beat the local `px-2`; the session content added `pl-1.5` (6px) on top of the
+row's own inset. Outcome: one 16px content edge for every rail mark and every row's text, with the
+labels of the two header rows sharing the 40px text column.
 
 Constraints: no control is added, removed, or demoted — this is spacing, plane, and structure only.
 Keep every aria-label, tooltip, popover, and keyboard path, the rail's drag/context-menu behaviour,
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
index 8e6111bd..dc95e74a 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/plan.md
@@ -37,6 +37,10 @@ scope: apps/desktop/src/App.tsx, apps/desktop/src/session/SessionHeaderActions.t
     mark and its narrow-window rule (AC-7); `apps/desktop/src/session/Composer.tsx` moves the
     checkout and branch chip labels to the muted foreground (AC-9).
 
+11. Review follow-up (AC-10): `apps/desktop/src/sidebar/SessionRail.tsx` gives the project trigger
+    the shared `row` size and drops the session content's extra left padding, with the two rail tests
+    updated to the one-edge contract. Verified through the web server (see the checks below).
+
 Checks by risk and affected behavior:
 
 - Desktop: `bun run lint`, `bunx tsc --noEmit`, `bun test`, `bun run build:renderer` from
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
index 35a8f1e2..4fe54599 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/spec.md
@@ -44,6 +44,11 @@ based_on: intent.md
    `before:` vertical bar; nothing else changes and the row's other states are untouched.
 8. **Quiet checkout-bar labels.** The checkout chip and the branch chip switch their label colour
    from `text-foreground/85` and `text-foreground/80` to the muted foreground.
+9. **One rail content edge.** Every rail row's leading mark and text sit on the same 16px column:
+   the project header's trigger takes the shared `row` size (its unsized Button had fallen back to
+   the default control padding, whose `has-[>svg]:px-3` beat the local `px-2`), and the session
+   content drops the extra `pl-1.5` so it inherits the row's own inset. Header labels keep their
+   40px text column, which the nav rows already use.
 
 ## Acceptance criteria
 
@@ -63,3 +68,5 @@ based_on: intent.md
   no `ProjectIcon`/`Folder` fallback remains in that header.
 - [x] AC-8: The selected rail row renders its selected fill with no leading bar.
 - [x] AC-9: The checkout chip and the branch chip render their labels in the muted foreground.
+- [x] AC-10: Every rail row's leading mark and text share one 16px content edge, and the header rows'
+  labels share the 40px column.
diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
index 03913be8..28b51b98 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
@@ -28,6 +28,8 @@ cleanup_status: complete
 - AC-8: PASS — `shellChromeContract` asserts the selected rail row keeps `bg-fill-selected` and no longer emits `before:inset-y-3`/`before:rounded-full`; the rendered rail test still passes with the fill as the only selection state.
 - AC-9: PASS — In the renderer the checkout chip's label computed `oklch(0.49583 0.00272918 none)` (the muted foreground) instead of the former `text-foreground/85`, and `shellChromeContract` covers the source change for both chips.
 
+- AC-10: PASS — Measured through the web server against a copy of the running dev data dir (rail 288px, 1728px viewport): feature nav icons and the "All projects" label already sat on 16; the project header's folder moved 20 → 16 and its name 44 → 40 (the trigger takes the shared `row` size, whose `px-module-inset` replaces the default padding's `has-[>svg]:px-3`), and the session title, summary and badges moved 22 → 16 (the content drops `pl-1.5`, inheriting the row's own inset). Capture `browser-artifacts/browser-screenshot-127-0-0-1-mu3vzusk-255a6c42.png`; `shellChromeContract` and the updated `sessionRailRendered` assertions hold the one-edge contract.
+
 Verdict: verified.
 Residual risk: the rail rows, the project mark and the branch chip need session/project data that the
 Core-less renderer does not have, so their evidence is structural plus the rendered rail/header

From 0908613d11818a74fdfe4bb9af61b2a39ab7781a Mon Sep 17 00:00:00 2001
From: idevlab <idevlab@outlook.com>
Date: Wed, 16 Sep 2026 18:29:48 +0800
Subject: [PATCH 4/4] docs: cite the rail-alignment CI run from the verified
 record

---
 .../sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
index 28b51b98..86b31311 100644
--- a/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
+++ b/docs/sdlc/changes/2026-09-16-quiet-shell-chrome/verification.md
@@ -65,5 +65,6 @@ Rollback: See plan.md.
 Release: No release requested; merge and external actions require their own authorization.
 Review: [PR #238](https://github.com/IchenDEV/codeTwo/pull/238) carries this change on branch
 t3code/quiet-shell-chrome, based on main 833ecb8b; the hosted CI Validate job passed (run
-35075609711, job 104727185571, 2m44s).
+35075609711, job 104727185571, 2m44s) and again on the rail-alignment follow-up (run 35084873013,
+job 104757219623, 3m12s).
 Feedback: Link an Incident and regression Eval when a real failure occurs.