From 8f7d3f9cfc2ecfa8b93ada83b26ed33a9bfa2801 Mon Sep 17 00:00:00 2001
From: Leo Li <cheerleaderleo@outlook.com>
Date: Sat, 31 Oct 2026 10:07:20 +0000
Subject: [PATCH 1/5] Running tray: Stop inside its line, one chevron column,
 the header time after its counts

The open tray hung each line's Stop below and right of the line, outside its box
and off its centre, and the header's chevron and the lines' sat in two columns.
The folded header floated its elapsed time in a column of its own far from the
counts, behind a chat bubble.

- Each line: time, state, Stop's track, then the chevron, last at the row's end.
  Stop lies over its track, one row tall from the line's top (its controls' row
  when narrow), centred, with its own absolute offsets reset.
- The header: a running mark (the shared spinner while work runs), the counts,
  the elapsed time as quiet meta one gap after them, and the chevron in the same
  trailing column as every line's and View all's. One row at every width.
- Gallery agent-pane.subagent-tray-head with three header arms
  (trayHead.experiment.ts: spinner, still glyph, no mark); spinner is the default.
- test/subagent-tray-trailing.test.ts measures Stop inside its row and centred
  and every chevron on one x, at 760 and 300px, light and dark.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/agent-session/acpmux/bottomStack.css  |   9 +-
 .../acpmux/subagents/AgentLine.tsx            |  15 +-
 .../acpmux/subagents/SubagentTray.tsx         |  27 ++-
 .../subagents/SubagentTrayHead.gallery.ts     |  93 ++++++++++
 .../acpmux/subagents/subagents.css            |  70 ++++++--
 .../acpmux/subagents/trayHead.experiment.ts   |  28 +++
 webviews/src/experiments/registry.ts          |   2 +
 webviews/test/subagent-tray-columns.test.ts   |  36 ++--
 webviews/test/subagent-tray-layout.test.ts    |   6 +-
 webviews/test/subagent-tray-trailing.test.ts  | 168 ++++++++++++++++++
 10 files changed, 398 insertions(+), 56 deletions(-)
 create mode 100644 webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
 create mode 100644 webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
 create mode 100644 webviews/test/subagent-tray-trailing.test.ts

diff --git a/webviews/src/agent-session/acpmux/bottomStack.css b/webviews/src/agent-session/acpmux/bottomStack.css
index 0be800fe9bcc..18cc7f446251 100644
--- a/webviews/src/agent-session/acpmux/bottomStack.css
+++ b/webviews/src/agent-session/acpmux/bottomStack.css
@@ -171,10 +171,6 @@
      stupid-ass fucking padding"). */
   min-height: var(--ui-row-height, var(--ds-control-row, 28px));
 }
-.acpmux-dock > .acpmux-running-tray[data-narrow] {
-  --acpmux-tray-header-lines: 2;
-  min-height: calc(2 * var(--ui-row-height, var(--ds-control-row, 28px)));
-}
 @media (min-height: 360px) {
   /* Not while the fold plays (conversation/fold.ts clips it with an inline overflow then): the fold's
    own height carries the tray, so open and close never jump by the reservation. */
@@ -182,8 +178,9 @@
     > .acpmux-running-tray:has(
       > .acpmux-running-tray__fold:not([style*="overflow"]) > .acpmux-running-tray__finished
     ) {
-    /* View all needs one row in addition to the header's one or two lines. */
-    min-height: calc((var(--acpmux-tray-header-lines, 1) + 1) * var(--ui-row-height, var(--ds-control-row, 28px)) + var(--ds-space-1) / 2 + 2 * var(--cmux-hairline));
+    /* View all needs one row in addition to the header's one, narrow too: the header's time follows
+       its counts on its one line (subagents.css), so it never takes a second. */
+    min-height: calc(2 * var(--ui-row-height, var(--ds-control-row, 28px)) + var(--ds-space-1) / 2 + 2 * var(--cmux-hairline));
   }
 }
 /* A pane too short for both pinned rows and the composer (a webview under 360px) keeps the composer
diff --git a/webviews/src/agent-session/acpmux/subagents/AgentLine.tsx b/webviews/src/agent-session/acpmux/subagents/AgentLine.tsx
index 0619ad38b273..bebe636eaf39 100644
--- a/webviews/src/agent-session/acpmux/subagents/AgentLine.tsx
+++ b/webviews/src/agent-session/acpmux/subagents/AgentLine.tsx
@@ -156,12 +156,17 @@ export function AgentLine({
           <span className="acpmux-agent-line__status">
             {/* Running turns to Waiting or Done with a tick, never a jump (trayMotion.tsx). */}
             <Tick className="acpmux-summary-meta acpmux-summary-agent__state" text={state} />
-            {chevron && onOpen && (
-              <span className="acpmux-agent-line__chevron" aria-hidden="true">
-                <Icon name="disclosure.collapsed" size={ROW_ICON} row />
-              </span>
-            )}
           </span>
+          {/* Stop's track (the stop slot, outside this button, lies over it), then the chevron's,
+              last at the line's end: the column the header's and View all's chevrons end in. */}
+          <span className="acpmux-agent-line__stop-track" aria-hidden="true" />
+          {chevron && onOpen ? (
+            <span className="acpmux-agent-line__chevron" aria-hidden="true">
+              <Icon name="disclosure.collapsed" size={ROW_ICON} row />
+            </span>
+          ) : (
+            <span className="acpmux-agent-line__chevron-track" aria-hidden="true" />
+          )}
         </>
       ) : (
         <>
diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx b/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
index 117d39866785..0a8c99d7b938 100644
--- a/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
@@ -10,8 +10,9 @@
 // stop button. An agent another one spawned sits right under it.
 //
 // One item is its line alone. Several get a header first, as the Codex and Claude desktop apps
-// head their running agents: "2 subagents running · 1 command", the time since the first started
-// and a chevron; between turns it says "Running in background · 2 subagents · 1 command". The
+// head their running agents: the shared spinner while anything under it runs, "2 subagents running ·
+// 1 command", the time since the first started as quiet meta right after the counts (never a column
+// of its own far from them), and the chevron in the trailing column every line's chevron ends in; between turns it says "Running in background · 2 subagents · 1 command". The
 // header counts exactly the lines under it: what runs or waits on the person. The chat's subagents
 // and the chats its agent started are all "subagents" (Leo 2026-10-21: "SHOULDN'T THIS SAY
 // SUBAGENTS?"). What ended stays as compact status cards after them, never counted. A command is
@@ -50,6 +51,7 @@ import { experimentArm } from "../../../experiments/experiment";
 import { foldMotion, useFold } from "../conversation/fold";
 import { entranceAllowed } from "../../shared/pageReveal";
 import { formatDuration } from "../conversation/turns";
+import { Spinner } from "../conversation/icons";
 import { usePaneLanguage, useT } from "../i18n";
 import { Icon } from "../icons/Icon";
 import { rowIconSize } from "../icons/iconSize";
@@ -65,6 +67,7 @@ import { itemStart, type TrayItem } from "./runningTray";
 import { doingDetail, toolDetail } from "./trayDetail";
 import { trayPanelLook } from "./trayPanel.experiment";
 import { trayMotionLook } from "./trayMotion.experiment";
+import { trayHeadLook } from "./trayHead.experiment";
 import { Tick, useTrayMotion } from "./trayMotion";
 import type { StartedSession } from "../started/startedSessions";
 import type { SubagentTrayPlacement } from "./subagentTrayPlacement";
@@ -137,6 +140,7 @@ export const SubagentTray = memo(function SubagentTray({
   // Read once per tray: the arm is the gallery's override or a dogfood key, never a per-tick read.
   const [look] = useState(() => experimentArm(trayPanelLook));
   const [motion] = useState(() => experimentArm(trayMotionLook));
+  const [head] = useState(() => experimentArm(trayHeadLook));
   // Only the bottom stack's tray leaves on a snapshot: one placed in the transcript moves with it.
   const motionRef = useTrayMotion(shown, enters, placement === "tray");
   const setTrayRef = useCallback(
@@ -303,6 +307,7 @@ export const SubagentTray = memo(function SubagentTray({
       data-look={look}
       data-motion={motion}
       data-narrow={narrow || undefined}
+      data-head={head}
     >
       {headed && (
         <button
@@ -312,17 +317,24 @@ export const SubagentTray = memo(function SubagentTray({
           aria-controls={open ? listId : undefined}
           onClick={() => setOpened(!open)}
         >
-          <span className="acpmux-lineage__icon" data-state={runs ? "running" : "done"}>
-            <Icon name="agent.session" size={14} />
-          </span>
+          {head !== "bare" && (
+            <span className="acpmux-lineage__icon" data-state={runs ? "running" : "done"}>
+              {head === "spinner" && runs ? (
+                <Spinner size={ROW_ICON} loading />
+              ) : (
+                <Icon name={HEAD_ICON} size={ROW_ICON} row />
+              )}
+            </span>
+          )}
           <Tick className="acpmux-summary-text acpmux-running-tray__title" text={title} />
+          {/* Quiet meta right after the counts, never a column of its own far from them. */}
           <span className="acpmux-summary-meta acpmux-running-tray__time" aria-hidden={starts.length === 0}>
             {starts.length > 0 ? formatDuration(Math.max(0, now - Math.min(...starts))) : undefined}
           </span>
+          {/* The one trailing column every line's chevron and View all's end in. */}
           <span className="acpmux-running-tray__status">
             <Icon name={open ? "disclosure.expanded" : "disclosure.collapsed"} size={ROW_ICON} row />
           </span>
-          <span className="acpmux-running-tray__stop-slot" aria-hidden="true" />
         </button>
       )}
       {fold.present && (
@@ -457,6 +469,9 @@ export const SubagentTray = memo(function SubagentTray({
 /// A subagent's mark before its name, in place of the word: a branch off this chat, never the
 /// chat bubble a session's own icon is (Leo, 2026-10-28: "Shouldn't the subagent icon be different?").
 const SUBAGENT_ICON = "agent.fork";
+/// The header's still mark for background work (trayHead.experiment.ts): a running ring, never the
+/// chat bubble, which reads as a message.
+const HEAD_ICON = "app.sample.runningagents";
 const NO_ITEMS: readonly TrayItem[] = [];
 const NO_ARRIVALS: ReadonlySet<string> = new Set();
 /// The most lines that rise in from one update; a bigger burst is simply there.
diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
new file mode 100644
index 000000000000..dd51205894e2
--- /dev/null
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
@@ -0,0 +1,93 @@
+// l10n-allow-file: gallery fixtures (prompts, subagent names, commands), not shipped UI.
+// The running tray's header and trailing column (SubagentTray.tsx, AgentLine.tsx). The collapsed
+// header said "Running in background · N subagents · M commands" behind a chat bubble, with the
+// elapsed time floating in a column of its own far from the words, and the open tray's Stop buttons
+// hung below and right of their lines, off their centre, with the chevrons in two columns. Here the
+// header's mark is work that runs (three arms, trayHead.experiment.ts; view Compare arms), its time
+// follows the counts as quiet meta, every Stop sits in its line on the line's centre, and the
+// header's, every line's and View all's chevrons end on one x.
+import { agentPaneEntry } from "../../../gallery/format";
+import { activity, assistant, chat, row, summary, tool, user } from "../../../gallery/fixtures/acpmux";
+import { minutesAgo } from "../../../gallery/clock";
+import type { PlayContext } from "../../../gallery/play";
+import { SUBAGENTS, type Subagent } from "./subagentFold";
+import { trayHeadLook } from "./trayHead.experiment";
+
+const running = (name: string, minutes: number, action: string): Subagent => ({
+  id: `agent-${name.toLowerCase().replaceAll(" ", "-")}`,
+  parent: null,
+  name,
+  task: name,
+  kind: "general-purpose",
+  action,
+  state: "running",
+  background: true,
+  startedAt: minutesAgo(minutes),
+});
+
+const command = (line: string, description: string, minutes: number) =>
+  tool(line, "execute", "completed", {
+    inputSummary: JSON.stringify({ command: line, description, run_in_background: true }),
+    startedAt: minutesAgo(minutes),
+  });
+
+/** Between turns: three background subagents and two background commands still run. */
+const betweenTurns = chat([
+  user("Fan the review out and keep the checks running while I look", 163),
+  row(SUBAGENTS, 163, {
+    subagents: [
+      running("Review the tray", 163.3, "Read SubagentTray.tsx"),
+      running("Review the fold", 120, "Grep useFold"),
+      running("Audit the stack", 45, "Read bottomStack.css"),
+    ],
+  }),
+  activity(
+    [
+      command("cd ~/Projects/app && bun run dev", "Run the dev server", 150),
+      command("cd ~/Projects/app/webviews && bun test --watch", "Watch the tests", 30),
+    ],
+    150,
+  ),
+  assistant("The reviewers and the checks keep running in the background.", 2),
+  summary(2, { status: "completed", durationMs: 9_800_000, toolCount: 3 }),
+]);
+
+const head = (ctx: PlayContext) => ctx.document.querySelector<HTMLElement>(".acpmux-running-tray__head");
+
+const open = async (ctx: PlayContext) => {
+  await ctx.waitFor(() => head(ctx));
+  if (head(ctx)!.getAttribute("aria-expanded") !== "true") await ctx.click({ selector: ".acpmux-running-tray__head" });
+  await ctx.waitFor(() => ctx.document.querySelectorAll(".acpmux-running-tray__list .acpmux-agent-line").length >= 3);
+};
+
+export default agentPaneEntry({
+  id: "agent-pane.subagent-tray-head",
+  title: "Running tray header and trailing column",
+  area: "Agent pane",
+  height: 420,
+  anchors: [{ selector: ".acpmux-header" }, { selector: ".acpmux-composer" }],
+  covers: [
+    "agent-session/acpmux/subagents/SubagentTray.tsx",
+    "agent-session/acpmux/subagents/AgentLine.tsx",
+    "agent-session/acpmux/subagents/trayHead.experiment.ts",
+  ],
+  experiment: {
+    definition: trayHeadLook,
+    script: [
+      { name: "the folded header", run: async (ctx) => void (await ctx.waitFor(() => head(ctx))) },
+      { name: "open the tray", run: open },
+    ],
+  },
+  variants: {
+    folded: {
+      note: "Between turns, folded: the header's mark, its counts, the elapsed time right after them as quiet meta, and the chevron in the lines' trailing column.",
+      play: async (ctx) => void (await ctx.waitFor(() => head(ctx))),
+      snapshot: betweenTurns,
+    },
+    open: {
+      note: "Open: every Stop sits inside its line on the line's centre, before the chevron; the header's and every line's chevrons end on one x.",
+      play: open,
+      snapshot: betweenTurns,
+    },
+  },
+});
diff --git a/webviews/src/agent-session/acpmux/subagents/subagents.css b/webviews/src/agent-session/acpmux/subagents/subagents.css
index 24d74f02296d..aa0ae3d15c48 100644
--- a/webviews/src/agent-session/acpmux/subagents/subagents.css
+++ b/webviews/src/agent-session/acpmux/subagents/subagents.css
@@ -431,8 +431,10 @@ button.cv-subagent > :last-child {
   container-type: inline-size;
   container-name: running-tray;
   --acpmux-tray-time-width: calc(80px * var(--cmux-interface-scale, 1));
-  --acpmux-tray-status-width: 96px;
+  --acpmux-tray-status-width: 74px;
   --acpmux-tray-stop-width: 24px;
+  /* The one trailing column every chevron ends in: the header's, each line's and View all's. */
+  --acpmux-tray-chevron-width: 14px;
   box-sizing: border-box;
   padding: 0;
   overflow: hidden;
@@ -493,7 +495,6 @@ button.cv-subagent > :last-child {
 .acpmux-running-tray__head {
   height: var(--ui-row-height, 28px);
 }
-.acpmux-running-tray__time,
 .acpmux-running-tray .acpmux-agent-line__time {
   box-sizing: border-box;
   flex: 0 0 var(--acpmux-tray-time-width);
@@ -502,7 +503,6 @@ button.cv-subagent > :last-child {
   text-align: right;
   white-space: nowrap;
 }
-.acpmux-running-tray__status,
 .acpmux-running-tray .acpmux-agent-line__status {
   box-sizing: border-box;
   flex: 0 0 var(--acpmux-tray-status-width);
@@ -520,28 +520,59 @@ button.cv-subagent > :last-child {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.acpmux-running-tray__stop-slot {
+/* The header (Leo's collapsed strip, 2026-10-31: the time floated in a column of its own far from
+   the words it belongs to): the counts take only their width, the elapsed time follows them as quiet
+   meta one gap later, and the chevron ends the row in the trailing column the lines' chevrons and
+   View all's end in. A long title truncates; the time never does. */
+.acpmux-running-tray__head > .acpmux-running-tray__title {
+  flex: 0 1 auto;
+}
+.acpmux-running-tray__time {
+  flex: 1 0 auto;
+  text-align: left;
+  white-space: nowrap;
+}
+.acpmux-running-tray__time:empty {
+  margin-left: -8px;
+}
+.acpmux-running-tray__status,
+.acpmux-running-tray .acpmux-agent-line__chevron,
+.acpmux-running-tray .acpmux-agent-line__chevron-track {
   box-sizing: border-box;
-  flex: 0 0 var(--acpmux-tray-stop-width);
-  min-width: var(--acpmux-tray-stop-width);
+  flex: 0 0 var(--acpmux-tray-chevron-width);
+  width: var(--acpmux-tray-chevron-width);
+  margin: 0;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
 }
+/* A line's trailing tracks, in order: its time, its state, Stop's track (empty where it has no Stop,
+   so nothing moves), then the chevron's. */
+.acpmux-running-tray .acpmux-agent-line__stop-track {
+  flex: 0 0 var(--acpmux-tray-stop-width);
+}
+/* Stop is a button of its own, so it lies outside the line's button, over the line's Stop track: in
+   the row's box, on its centre line (Leo's open tray, 2026-10-31: each Stop hung below and right of
+   its line). It is one row tall from the line's top, so a line with a second line of progress keeps
+   it beside its state, never between the two. */
 .acpmux-running-tray .acpmux-agent-line__stop-slot {
   box-sizing: border-box;
   position: absolute;
   top: 0;
-  right: 8px;
-  bottom: 0;
+  right: calc(8px + var(--acpmux-tray-chevron-width) + 8px);
+  height: var(--ui-row-height, 28px);
   width: var(--acpmux-tray-stop-width);
   min-width: var(--acpmux-tray-stop-width);
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   pointer-events: none;
 }
 .acpmux-running-tray .acpmux-agent-line__stop-slot > button {
+  position: static;
+  top: auto;
+  right: auto;
+  margin: 0;
   pointer-events: auto;
 }
 /* Under the header's divider the first line keeps the tray's 2px gap, as the last keeps its rim's. */
@@ -587,9 +618,8 @@ button.cv-subagent > :last-child {
   padding-block: 4px;
 }
 .acpmux-running-tray .acpmux-agent-line > .acpmux-agent-line__button {
-  /* Reserve the final track while keeping the stop control outside the button. */
+  /* A nested line's indent; its trailing tracks (Stop's, then the chevron's) are its own children. */
   padding-left: calc(8px + var(--acpmux-tray-indent, 0px));
-  padding-right: calc(8px + var(--acpmux-tray-stop-width) + 8px);
 }
 .acpmux-agent-line > .acpmux-agent-line__stop-slot > .cv-subagent__stop {
   position: static;
@@ -603,11 +633,12 @@ button.cv-subagent > :last-child {
    same two-line layout: title above, intact duration and status beside Stop below. Query the
    tray itself so split panes and gallery frames follow the same rule. */
 @container running-tray (max-width: 400px) {
-  .acpmux-running-tray__head,
   .acpmux-running-tray .acpmux-agent-line > .acpmux-agent-line__button {
     position: relative;
     display: grid;
-    grid-template-columns: var(--acpmux-tray-time-width) minmax(0, 1fr) var(--acpmux-tray-stop-width);
+    grid-template-columns:
+      var(--acpmux-tray-time-width) minmax(0, 1fr) var(--acpmux-tray-stop-width)
+      var(--acpmux-tray-chevron-width);
     grid-template-rows: var(--ui-row-height, 28px) var(--ui-row-height, 28px);
     column-gap: 4px;
     row-gap: 0;
@@ -620,38 +651,39 @@ button.cv-subagent > :last-child {
     height: auto;
     align-items: center;
   }
-  .acpmux-running-tray__head > .acpmux-lineage__icon,
   .acpmux-running-tray .acpmux-agent-line__button > .acpmux-lineage__icon {
     position: absolute;
     top: 7px;
     left: calc(8px + var(--acpmux-tray-indent, 0px));
   }
-  .acpmux-running-tray__head > .acpmux-summary-text,
   .acpmux-running-tray .acpmux-agent-line__button > .acpmux-summary-text {
     grid-column: 1 / -1;
     grid-row: 1;
     margin-left: calc(22px + var(--acpmux-tray-indent, 0px));
   }
-  .acpmux-running-tray__time,
   .acpmux-running-tray .acpmux-agent-line__time {
     grid-column: 1;
     grid-row: 2;
   }
-  .acpmux-running-tray__status,
   .acpmux-running-tray .acpmux-agent-line__status {
     grid-column: 2;
     grid-row: 2;
     min-width: 0;
     gap: 4px;
   }
-  .acpmux-running-tray__stop-slot {
+  .acpmux-running-tray .acpmux-agent-line__stop-track {
     grid-column: 3;
     grid-row: 2;
   }
+  .acpmux-running-tray :is(.acpmux-agent-line__chevron, .acpmux-agent-line__chevron-track) {
+    grid-column: 4;
+    grid-row: 2;
+  }
+  /* The narrow line's controls are its second row: Stop sits on it, over its track. */
   .acpmux-running-tray .acpmux-agent-line__stop-slot {
     top: auto;
     bottom: 0;
-    height: var(--ui-row-height, 28px);
+    right: calc(8px + var(--acpmux-tray-chevron-width) + 4px);
   }
 }
 /* Quiet at rest. The line is the tray's main control, so its wash covers the whole line
diff --git a/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
new file mode 100644
index 000000000000..9aed81928b78
--- /dev/null
+++ b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
@@ -0,0 +1,28 @@
+// l10n-allow-file: experiment descriptions are gallery (developer tool) text, never shown in the pane.
+import { defineExperiment } from "../../../experiments/experiment";
+
+/// The running tray's header mark (SubagentTray.tsx). The chat bubble it drew read as a message, not
+/// as work that runs in the background. Every arm keeps the counts, the elapsed time as quiet meta
+/// right after them, and the chevron in the one trailing column the lines share. Compare them in the
+/// gallery's `agent-pane.subagent-tray-head`.
+export const trayHeadLook = defineExperiment({
+  id: "subagent-tray-head",
+  title: "Running tray header",
+  description:
+    "The header's mark: the shared spinner while anything under it runs, a static running-work glyph, or no mark at all.",
+  arms: {
+    spinner: {
+      label: "Spinner",
+      description: "The shared spinner while work runs (a still glyph once nothing does); time after the counts.",
+    },
+    glyph: {
+      label: "Running glyph",
+      description: "A still running-work glyph in the accent; time after the counts.",
+    },
+    bare: {
+      label: "No mark",
+      description: "No icon: the counts start at the row inset; time after the counts.",
+    },
+  },
+  defaultArm: "spinner",
+});
diff --git a/webviews/src/experiments/registry.ts b/webviews/src/experiments/registry.ts
index 52552b0e2548..d84e967aeb51 100644
--- a/webviews/src/experiments/registry.ts
+++ b/webviews/src/experiments/registry.ts
@@ -20,6 +20,7 @@ import { chromiumGlassUnderlay } from "../ui/glass/chromiumUnderlay.experiment";
 import { questionPreviewLayout } from "../agent-session/acpmux/question/previewLayout.experiment";
 import { trayPanelLook } from "../agent-session/acpmux/subagents/trayPanel.experiment";
 import { trayMotionLook } from "../agent-session/acpmux/subagents/trayMotion.experiment";
+import { trayHeadLook } from "../agent-session/acpmux/subagents/trayHead.experiment";
 import type { Experiment } from "./experiment";
 
 export const EXPERIMENTS: readonly Experiment[] = [
@@ -43,6 +44,7 @@ export const EXPERIMENTS: readonly Experiment[] = [
   toolErrorLook,
   trayPanelLook,
   trayMotionLook,
+  trayHeadLook,
 ];
 
 export function experimentById(id: string): Experiment | undefined {
diff --git a/webviews/test/subagent-tray-columns.test.ts b/webviews/test/subagent-tray-columns.test.ts
index 3a3d0f6c6662..219ab2ac33d8 100644
--- a/webviews/test/subagent-tray-columns.test.ts
+++ b/webviews/test/subagent-tray-columns.test.ts
@@ -151,7 +151,8 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
             };
             return { trayTop: box.top, trayBottom: box.bottom, head: bounds(head), more: bounds(more) };
           });
-          expect(pinned.head.height).toBeCloseTo(56 * interfaceScale, 1);
+          // One row at every width: the header's time follows its counts, never a second line.
+          expect(pinned.head.height).toBeCloseTo(28 * interfaceScale, 1);
           expect(pinned.more.height).toBeCloseTo(28 * interfaceScale, 1);
           for (const row of [pinned.head, pinned.more]) {
             expect(row.top).toBeGreaterThanOrEqual(pinned.trayTop - 0.5);
@@ -282,8 +283,8 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
               ? rect(".acpmux-running-tray__finished > svg", tray)
               : undefined,
             head: {
+              title: rect(".acpmux-running-tray__title", head),
               time: rect(".acpmux-running-tray__time", head),
-              status: rect(".acpmux-running-tray__status", head),
               chevron: rect(".acpmux-running-tray__status > svg", head),
             },
           };
@@ -293,9 +294,9 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
         expect(rest.every((row) => row.status.left === first!.status.left)).toBe(true);
         expect(rest.every((row) => row.time.right === first!.time.right)).toBe(true);
         expect(rest.every((row) => row.stop.left === first!.stop.left)).toBe(true);
-        expect(columns.head.time.right).toBe(first!.time.right);
-        expect(columns.head.status.left).toBe(first!.status.left);
-        expect(columns.head.status.right).toBe(first!.status.right);
+        // The header's time is quiet meta right after its counts (one 8px gap), never a column of
+        // its own far from them.
+        expect(Math.abs(columns.head.time.left - columns.head.title.right - 8)).toBeLessThanOrEqual(1);
         // One trailing track (Leo, 2026-10-29: "There's this right indent for no reason."): the
         // header's, every line's and View all's chevrons end on one x.
         expect(rest.every((row) => row.chevron.right === first!.chevron.right)).toBe(true);
@@ -363,9 +364,9 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
                 const time = head.querySelector<HTMLElement>(".acpmux-running-tray__time");
                 if (!time) throw new Error("missing header time");
                 return {
+                  title: rect(".acpmux-running-tray__title", head),
                   time: { ...rect(".acpmux-running-tray__time", head), ...textRect(time) },
-                  status: rect(".acpmux-running-tray__status", head),
-                  stop: rect(".acpmux-running-tray__stop-slot", head),
+                  chevron: rect(".acpmux-running-tray__status > svg", head),
                 };
               })(),
             };
@@ -376,16 +377,17 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
         expect(initialRest.every((row) => row.status.left === initialFirst!.status.left)).toBe(true);
         expect(initialRest.every((row) => row.time.right === initialFirst!.time.right)).toBe(true);
         expect(initialRest.every((row) => row.stop.left === initialFirst!.stop.left)).toBe(true);
-        expect(initial.head.time.right).toBe(initialFirst!.time.right);
-        expect(initial.head.status.left).toBe(initialFirst!.status.left);
-        expect(initial.head.status.right).toBe(initialFirst!.status.right);
-        expect(initial.head.stop.left).toBe(initialFirst!.stop.left);
+        expect(initial.head.time.left).toBeGreaterThanOrEqual(initial.head.title.right - 0.5);
+        expect(initial.head.time.left - initial.head.title.right).toBeLessThanOrEqual(8.5);
+        expect(initial.rows.every((row) => !row.chevron || row.chevron.right === initial.head.chevron.right)).toBe(true);
         expect(initial.rows.some((row) => row.hasStop)).toBe(true);
         expect(initial.rows.some((row) => !row.hasStop)).toBe(true);
         expect(initial.rows.every((row) => row.summary.width >= 60)).toBe(true);
         expect(initial.rows.every((row) => row.summary.right <= row.time.left + 0.5)).toBe(true);
         expect(initial.rows.every((row) => row.status.left >= row.time.right - 0.5)).toBe(true);
-        expect(initial.rows.every((row) => !row.chevron || row.chevron.right <= row.status.right + 0.5)).toBe(true);
+        // Stop's track, then the chevron's, after the state.
+        expect(initial.rows.every((row) => row.stop.left >= row.status.right - 0.5)).toBe(true);
+        expect(initial.rows.every((row) => !row.chevron || row.chevron.left >= row.stop.right - 0.5)).toBe(true);
         expect(initial.rows.every((row) => !row.chevron || row.chevron.right <= initial.tray.right + 0.5)).toBe(true);
         expect(initial.rows.every((row) => row.time.lineCount <= 1)).toBe(true);
         expect(
@@ -457,15 +459,15 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
             narrow.rows.every((row) => row.time.lineCount === 0 || row.time.textRight! <= row.time.boxRight + 0.5),
           ).toBe(true);
           expect(narrow.rows.every((row) => row.time.scrollWidth <= row.time.clientWidth + 1)).toBe(true);
-          expect(narrow.rows.every((row) => !row.chevron || row.chevron.right <= row.status.right + 0.5)).toBe(true);
+          expect(narrow.rows.every((row) => row.stop.left >= row.status.right - 0.5)).toBe(true);
+          expect(narrow.rows.every((row) => !row.chevron || row.chevron.left >= row.stop.right - 0.5)).toBe(true);
           expect(narrow.rows.every((row) => !row.chevron || row.chevron.right <= narrow.tray.right + 0.5)).toBe(true);
           expect(narrow.rows.every((row) => row.stop.right <= narrow.tray.right + 0.5)).toBe(true);
           expect(narrow.rows.every((row) => row.status.right <= narrow.tray.right + 0.5)).toBe(true);
           expect(narrow.rows.every((row) => row.status.left >= row.time.right - 0.5)).toBe(true);
-          expect(narrow.head.time.right).toBe(narrowFirst!.time.right);
-          expect(narrow.head.status.left).toBe(narrowFirst!.status.left);
-          expect(narrow.head.status.right).toBe(narrowFirst!.status.right);
-          expect(narrow.head.stop.left).toBe(narrowFirst!.stop.left);
+          expect(narrow.head.time.left).toBeGreaterThanOrEqual(narrow.head.title.right - 0.5);
+          expect(narrow.head.time.right).toBeLessThanOrEqual(narrow.head.chevron.left + 0.5);
+          expect(narrow.rows.every((row) => !row.chevron || row.chevron.right === narrow.head.chevron.right)).toBe(true);
           await page.waitForFunction(
             (previous) =>
               [...document.querySelectorAll<HTMLElement>(".acpmux-agent-line__time")].some(
diff --git a/webviews/test/subagent-tray-layout.test.ts b/webviews/test/subagent-tray-layout.test.ts
index 5d11de112c31..7ba7fc2950ea 100644
--- a/webviews/test/subagent-tray-layout.test.ts
+++ b/webviews/test/subagent-tray-layout.test.ts
@@ -25,7 +25,7 @@ test("the bottom-stack tray's floor is its one row, not the stack's taller row",
     [...rule.matchAll(/min-height:\s*([^;]+);/g)].map((match) => match[1]!.trim()),
   );
   expect(floors.at(-1)).toBe("var(--ui-row-height, var(--ds-control-row, 28px))");
-  expect(bottomStack).toMatch(
-    /\.acpmux-dock\s*>\s*\.acpmux-running-tray\[data-narrow\][^{]*\{[^}]*min-height:\s*calc\(2\s*\*\s*var\(--ui-row-height,/s,
-  );
+  // The header is one row at every width (its time follows its counts), so a narrow tray keeps the
+  // same one-row floor: no strip of glass under a folded header.
+  expect(bottomStack).not.toMatch(/\.acpmux-dock\s*>\s*\.acpmux-running-tray\[data-narrow\]/);
 });
diff --git a/webviews/test/subagent-tray-trailing.test.ts b/webviews/test/subagent-tray-trailing.test.ts
new file mode 100644
index 000000000000..9183f41f18cc
--- /dev/null
+++ b/webviews/test/subagent-tray-trailing.test.ts
@@ -0,0 +1,168 @@
+// l10n-allow-file: gallery fixture names and tray labels are test data.
+// The running tray's trailing column in real Chromium (Playwright; CI fails the file when it cannot
+// launch, requireBrowserLane). Leo's open tray (2026-10-31) hung each line's Stop below and right of
+// the line, outside its box and off its centre, and put the header's chevron and the lines' in two
+// columns; his folded header floated its elapsed time far from its counts. Here: every Stop is inside
+// its line and on the line's centre (on its controls' row when the line is narrow), every chevron
+// (the header's, each line's, View all's) ends on one x, and the header's time follows its counts.
+import { afterAll, beforeAll, expect, setDefaultTimeout, test } from "bun:test";
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { chromium, type Browser, type Page } from "playwright";
+import { galleryFrame, warmGalleryFrame } from "./support/galleryFrame";
+import { requireBrowserLane } from "./support/requireBrowserLane";
+
+await requireBrowserLane("subagent-tray-trailing.test.ts", async () => {
+  setDefaultTimeout(180_000);
+  const { createServer } = await import("vite");
+  let server: Awaited<ReturnType<typeof createServer>>;
+  let browser: Browser;
+  const entry = "agent-pane.subagent-tray-head";
+
+  beforeAll(async () => {
+    server = await createServer({
+      root: path.resolve(import.meta.dir, ".."),
+      configFile: path.resolve(import.meta.dir, "../vite.config.gallery-dev.ts"),
+      server: { port: 0, host: "127.0.0.1", strictPort: false },
+      logLevel: "error",
+    });
+    await server.listen();
+    browser = await chromium.launch({ headless: true });
+    await warmGalleryFrame(server, entry, { browser, params: { variant: "open" } });
+  });
+
+  afterAll(async () => {
+    await browser?.close();
+    await server?.close();
+  });
+
+  const settle = (page: Page) =>
+    page.evaluate(() => {
+      for (const animation of document.getAnimations()) {
+        if (Number.isFinite(animation.effect?.getComputedTiming().endTime as number)) animation.finish();
+      }
+    });
+
+  const measure = (page: Page) =>
+    page.evaluate(() => {
+      const box = (node: Element | null) => {
+        if (!node) return null;
+        const rect = node.getBoundingClientRect();
+        return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom };
+      };
+      const tray = document.querySelector<HTMLElement>(".acpmux-running-tray")!;
+      const head = tray.querySelector<HTMLElement>(".acpmux-running-tray__head")!;
+      return {
+        tray: box(tray)!,
+        head: {
+          row: box(head)!,
+          title: box(head.querySelector(".acpmux-running-tray__title"))!,
+          time: box(head.querySelector(".acpmux-running-tray__time"))!,
+          chevron: box(head.querySelector(".acpmux-running-tray__status > svg"))!,
+        },
+        more: box(tray.querySelector(".acpmux-running-tray__finished > svg")),
+        lines: [...tray.querySelectorAll<HTMLElement>(".acpmux-running-tray__list .acpmux-agent-line")].map((line) => ({
+          row: box(line)!,
+          state: box(line.querySelector(".acpmux-summary-agent__state"))!,
+          track: box(line.querySelector(".acpmux-agent-line__stop-track"))!,
+          stop: box(line.querySelector(".acpmux-agent-line__stop-slot > button")),
+          chevron: box(line.querySelector(".acpmux-agent-line__chevron > svg")),
+          stopHit: (() => {
+            const stop = line.querySelector(".acpmux-agent-line__stop-slot > button");
+            if (!stop) return null;
+            const rect = stop.getBoundingClientRect();
+            return stop.contains(document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2));
+          })(),
+        })),
+      };
+    });
+
+  const middle = (box: { top: number; bottom: number }) => (box.top + box.bottom) / 2;
+
+  for (const width of [760, 300]) {
+    for (const theme of ["Apple System Colors", "Apple System Colors Light"]) {
+      test(`Stop sits inside its line on its centre, and every chevron shares one x at ${width}px (${theme})`, async () => {
+        const port = (server.httpServer!.address() as { port: number }).port;
+        const page = await browser.newPage({
+          viewport: { width, height: 420 },
+          deviceScaleFactor: 2,
+          reducedMotion: "reduce",
+        });
+        try {
+          await page.goto(`http://127.0.0.1:${port}${galleryFrame(entry, { variant: "open", theme })}`);
+          await page.waitForFunction(() => document.documentElement.dataset.galleryReady === "1");
+          await page.locator(".acpmux-running-tray__list .acpmux-agent-line").first().waitFor();
+          await settle(page);
+          const geometry = await measure(page);
+          const stopped = geometry.lines.filter((line) => line.stop);
+          expect(geometry.lines.length).toBeGreaterThanOrEqual(3);
+          expect(stopped.length).toBeGreaterThanOrEqual(1);
+          for (const line of stopped) {
+            const stop = line.stop!;
+            // Inside the line's box.
+            expect(stop.top).toBeGreaterThanOrEqual(line.row.top - 0.5);
+            expect(stop.bottom).toBeLessThanOrEqual(line.row.bottom + 0.5);
+            expect(stop.left).toBeGreaterThanOrEqual(line.row.left - 0.5);
+            expect(stop.right).toBeLessThanOrEqual(line.row.right + 0.5);
+            // On the centre line of its row of controls: the line's own when it is one row, its second
+            // row (where its state sits) when the line is narrow.
+            expect(Math.abs(middle(stop) - middle(line.state))).toBeLessThanOrEqual(1);
+            if (width > 400) expect(Math.abs(middle(stop) - middle(line.row))).toBeLessThanOrEqual(1);
+            // In its own track, between the state and the chevron.
+            expect(Math.abs((stop.left + stop.right) / 2 - (line.track.left + line.track.right) / 2)).toBeLessThanOrEqual(1);
+            expect(stop.left).toBeGreaterThanOrEqual(line.state.right - 0.5);
+            if (line.chevron) expect(line.chevron.left).toBeGreaterThanOrEqual(stop.right - 0.5);
+            expect(line.stopHit).toBe(true);
+          }
+          // Stop's track holds its x on every line, with a Stop or without.
+          expect(new Set(geometry.lines.map((line) => line.track.left)).size).toBe(1);
+          // One chevron column: the header's, every line's and View all's end on one x.
+          const chevrons = [
+            geometry.head.chevron.right,
+            ...geometry.lines.flatMap((line) => (line.chevron ? [line.chevron.right] : [])),
+            ...(geometry.more ? [geometry.more.right] : []),
+          ];
+          expect(chevrons.length).toBeGreaterThanOrEqual(2);
+          for (const right of chevrons) expect(Math.abs(right - geometry.head.chevron.right)).toBeLessThanOrEqual(0.5);
+          expect(geometry.head.chevron.right).toBeLessThanOrEqual(geometry.tray.right + 0.5);
+          // The header is one row; its time follows its counts one 8px gap later.
+          expect(geometry.head.row.bottom - geometry.head.row.top).toBeLessThanOrEqual(28.5);
+          expect(geometry.head.time.left - geometry.head.title.right).toBeGreaterThanOrEqual(7.5);
+          expect(geometry.head.time.left - geometry.head.title.right).toBeLessThanOrEqual(8.5);
+          expect(Math.abs(middle(geometry.head.time) - middle(geometry.head.title))).toBeLessThanOrEqual(1);
+          if (process.env.CMUX_TRAY_CAPTURE_DIR) {
+            await mkdir(process.env.CMUX_TRAY_CAPTURE_DIR, { recursive: true });
+            const tone = theme.endsWith("Light") ? "light" : "dark";
+            const clip = await page.evaluate(() => {
+              const tray = document.querySelector(".acpmux-running-tray")!.getBoundingClientRect();
+              const composer = document.querySelector(".acpmux-composer")!.getBoundingClientRect();
+              const top = Math.max(0, tray.top - 12);
+              return { x: 0, y: top, width: innerWidth, height: Math.min(innerHeight, composer.bottom + 12) - top };
+            });
+            await page.screenshot({
+              path: path.join(process.env.CMUX_TRAY_CAPTURE_DIR, `tray-open-${width}-${tone}.png`),
+              clip,
+            });
+            await page.click(".acpmux-running-tray__head");
+            await page.waitForFunction(
+              () => document.querySelector(".acpmux-running-tray__head")?.getAttribute("aria-expanded") === "false",
+            );
+            await settle(page);
+            const folded = await page.evaluate(() => {
+              const tray = document.querySelector(".acpmux-running-tray")!.getBoundingClientRect();
+              const composer = document.querySelector(".acpmux-composer")!.getBoundingClientRect();
+              const top = Math.max(0, tray.top - 12);
+              return { x: 0, y: top, width: innerWidth, height: Math.min(innerHeight, composer.bottom + 12) - top };
+            });
+            await page.screenshot({
+              path: path.join(process.env.CMUX_TRAY_CAPTURE_DIR, `tray-folded-${width}-${tone}.png`),
+              clip: folded,
+            });
+          }
+        } finally {
+          await page.close();
+        }
+      });
+    }
+  }
+});

From 5913b199bd4b3b22926a993b36c83b4f5163137f Mon Sep 17 00:00:00 2001
From: Leo Li <cheerleaderleo@outlook.com>
Date: Sat, 31 Oct 2026 10:36:19 +0000
Subject: [PATCH 2/5] test(tray): hit-test each Stop scrolled into the list's
 view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 webviews/test/subagent-tray-trailing.test.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/webviews/test/subagent-tray-trailing.test.ts b/webviews/test/subagent-tray-trailing.test.ts
index 9183f41f18cc..cfb8bfd93c68 100644
--- a/webviews/test/subagent-tray-trailing.test.ts
+++ b/webviews/test/subagent-tray-trailing.test.ts
@@ -67,12 +67,6 @@ await requireBrowserLane("subagent-tray-trailing.test.ts", async () => {
           track: box(line.querySelector(".acpmux-agent-line__stop-track"))!,
           stop: box(line.querySelector(".acpmux-agent-line__stop-slot > button")),
           chevron: box(line.querySelector(".acpmux-agent-line__chevron > svg")),
-          stopHit: (() => {
-            const stop = line.querySelector(".acpmux-agent-line__stop-slot > button");
-            if (!stop) return null;
-            const rect = stop.getBoundingClientRect();
-            return stop.contains(document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2));
-          })(),
         })),
       };
     });
@@ -112,8 +106,20 @@ await requireBrowserLane("subagent-tray-trailing.test.ts", async () => {
             expect(Math.abs((stop.left + stop.right) / 2 - (line.track.left + line.track.right) / 2)).toBeLessThanOrEqual(1);
             expect(stop.left).toBeGreaterThanOrEqual(line.state.right - 0.5);
             if (line.chevron) expect(line.chevron.left).toBeGreaterThanOrEqual(stop.right - 0.5);
-            expect(line.stopHit).toBe(true);
           }
+          // Each Stop, scrolled into the list's view, is the thing under the pointer at its centre.
+          const hits = await page.evaluate(() =>
+            [...document.querySelectorAll<HTMLElement>(".acpmux-running-tray .acpmux-agent-line__stop-slot > button")].map(
+              (stop) => {
+                stop.scrollIntoView({ block: "nearest" });
+                const rect = stop.getBoundingClientRect();
+                return stop.contains(document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2));
+              },
+            ),
+          );
+          expect(hits.length).toBe(stopped.length);
+          expect(hits.every(Boolean)).toBe(true);
+          await page.evaluate(() => document.querySelector(".acpmux-running-tray__list")?.scrollTo(0, 0));
           // Stop's track holds its x on every line, with a Stop or without.
           expect(new Set(geometry.lines.map((line) => line.track.left)).size).toBe(1);
           // One chevron column: the header's, every line's and View all's end on one x.

From 8beeccca5c99f34b3f97d00afb084e3f802d8a90 Mon Sep 17 00:00:00 2001
From: Leo Li <cheerleaderleo@outlook.com>
Date: Sat, 31 Oct 2026 13:33:10 +0000
Subject: [PATCH 3/5] Running tray header: a fixed running glyph, never the
 spinner

#27103 took the spinner off the header on Leo's word ("I NEVER SAID TO
PUT THE SPINNER HERE"); the spinner stays on each working line. The header
now draws a still running-work glyph by default. The gallery arms are glyph
(default), bare, and the chat bubble it drew before, for comparison. The tray
unit test checks the glyph, and that the bubble is gone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../acpmux/subagents/SubagentTray.tsx         | 21 ++++++++---------
 .../subagents/SubagentTrayHead.gallery.ts     |  2 +-
 .../acpmux/subagents/trayHead.experiment.ts   | 23 ++++++++++---------
 webviews/test/subagent-tray.test.tsx          |  4 +++-
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx b/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
index 0a8c99d7b938..3848fd0873ef 100644
--- a/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTray.tsx
@@ -10,9 +10,11 @@
 // stop button. An agent another one spawned sits right under it.
 //
 // One item is its line alone. Several get a header first, as the Codex and Claude desktop apps
-// head their running agents: the shared spinner while anything under it runs, "2 subagents running ·
-// 1 command", the time since the first started as quiet meta right after the counts (never a column
-// of its own far from them), and the chevron in the trailing column every line's chevron ends in; between turns it says "Running in background · 2 subagents · 1 command". The
+// head their running agents: a still running-work mark (never the spinner, which stays on each
+// working line, #27103), "2 subagents running · 1 command", the time since the first started as
+// quiet meta right after the counts (never a column of its own far from them), and the chevron in
+// the trailing column every line's chevron ends in; between turns it says "Running in background ·
+// 2 subagents · 1 command". The
 // header counts exactly the lines under it: what runs or waits on the person. The chat's subagents
 // and the chats its agent started are all "subagents" (Leo 2026-10-21: "SHOULDN'T THIS SAY
 // SUBAGENTS?"). What ended stays as compact status cards after them, never counted. A command is
@@ -51,7 +53,6 @@ import { experimentArm } from "../../../experiments/experiment";
 import { foldMotion, useFold } from "../conversation/fold";
 import { entranceAllowed } from "../../shared/pageReveal";
 import { formatDuration } from "../conversation/turns";
-import { Spinner } from "../conversation/icons";
 import { usePaneLanguage, useT } from "../i18n";
 import { Icon } from "../icons/Icon";
 import { rowIconSize } from "../icons/iconSize";
@@ -280,7 +281,7 @@ export const SubagentTray = memo(function SubagentTray({
       </li>
     )),
   ];
-  // The header's spinner is a running line's: it turns while anything under it runs.
+  // The header's mark is in the accent while anything under it runs.
   const runs = running > 0 || commands > 0;
   // View all sits under the list, outside its scroller, so it never scrolls away either.
   const more = finished.length > TRAY_OPEN_MAX && (
@@ -319,11 +320,7 @@ export const SubagentTray = memo(function SubagentTray({
         >
           {head !== "bare" && (
             <span className="acpmux-lineage__icon" data-state={runs ? "running" : "done"}>
-              {head === "spinner" && runs ? (
-                <Spinner size={ROW_ICON} loading />
-              ) : (
-                <Icon name={HEAD_ICON} size={ROW_ICON} row />
-              )}
+              <Icon name={head === "session" ? "agent.session" : HEAD_ICON} size={ROW_ICON} row />
             </span>
           )}
           <Tick className="acpmux-summary-text acpmux-running-tray__title" text={title} />
@@ -469,8 +466,8 @@ export const SubagentTray = memo(function SubagentTray({
 /// A subagent's mark before its name, in place of the word: a branch off this chat, never the
 /// chat bubble a session's own icon is (Leo, 2026-10-28: "Shouldn't the subagent icon be different?").
 const SUBAGENT_ICON = "agent.fork";
-/// The header's still mark for background work (trayHead.experiment.ts): a running ring, never the
-/// chat bubble, which reads as a message.
+/// The header's fixed mark for background work (trayHead.experiment.ts): a running ring, never the
+/// chat bubble, which reads as a message, and never the spinner, which each working line keeps.
 const HEAD_ICON = "app.sample.runningagents";
 const NO_ITEMS: readonly TrayItem[] = [];
 const NO_ARRIVALS: ReadonlySet<string> = new Set();
diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
index dd51205894e2..153c5d2c8f85 100644
--- a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
@@ -3,7 +3,7 @@
 // header said "Running in background · N subagents · M commands" behind a chat bubble, with the
 // elapsed time floating in a column of its own far from the words, and the open tray's Stop buttons
 // hung below and right of their lines, off their centre, with the chevrons in two columns. Here the
-// header's mark is work that runs (three arms, trayHead.experiment.ts; view Compare arms), its time
+// header's fixed mark is work that runs (three arms, trayHead.experiment.ts; view Compare arms), its time
 // follows the counts as quiet meta, every Stop sits in its line on the line's centre, and the
 // header's, every line's and View all's chevrons end on one x.
 import { agentPaneEntry } from "../../../gallery/format";
diff --git a/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
index 9aed81928b78..a06d656958b2 100644
--- a/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
+++ b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
@@ -1,28 +1,29 @@
 // l10n-allow-file: experiment descriptions are gallery (developer tool) text, never shown in the pane.
 import { defineExperiment } from "../../../experiments/experiment";
 
-/// The running tray's header mark (SubagentTray.tsx). The chat bubble it drew read as a message, not
-/// as work that runs in the background. Every arm keeps the counts, the elapsed time as quiet meta
-/// right after them, and the chevron in the one trailing column the lines share. Compare them in the
-/// gallery's `agent-pane.subagent-tray-head`.
+/// The running tray's header mark (SubagentTray.tsx). It is a fixed icon, never the spinner: the
+/// spinner stays on each working line (#27103; Leo: "I NEVER SAID TO PUT THE SPINNER HERE"). The chat
+/// bubble it drew read as a message, not as work that runs in the background. Every arm keeps the
+/// counts, the elapsed time as quiet meta right after them, and the chevron in the one trailing column
+/// the lines share. Compare them in the gallery's `agent-pane.subagent-tray-head`.
 export const trayHeadLook = defineExperiment({
   id: "subagent-tray-head",
   title: "Running tray header",
   description:
-    "The header's mark: the shared spinner while anything under it runs, a static running-work glyph, or no mark at all.",
+    "The header's fixed mark: a running-work glyph, no mark at all, or the chat bubble it used to draw.",
   arms: {
-    spinner: {
-      label: "Spinner",
-      description: "The shared spinner while work runs (a still glyph once nothing does); time after the counts.",
-    },
     glyph: {
       label: "Running glyph",
-      description: "A still running-work glyph in the accent; time after the counts.",
+      description: "A still running-work ring in the accent; time after the counts.",
     },
     bare: {
       label: "No mark",
       description: "No icon: the counts start at the row inset; time after the counts.",
     },
+    session: {
+      label: "Chat bubble",
+      description: "The chat bubble it drew before (agent.session), for comparison; time after the counts.",
+    },
   },
-  defaultArm: "spinner",
+  defaultArm: "glyph",
 });
diff --git a/webviews/test/subagent-tray.test.tsx b/webviews/test/subagent-tray.test.tsx
index 876bcc11a541..197d38bc4e4b 100644
--- a/webviews/test/subagent-tray.test.tsx
+++ b/webviews/test/subagent-tray.test.tsx
@@ -365,7 +365,9 @@ describe("the tray", () => {
     try {
       const head = shown.root.querySelector<HTMLButtonElement>(".acpmux-running-tray__head")!;
       expect(head.getAttribute("aria-expanded")).toBe("true");
-      expect(head.querySelector('svg[data-icon="agent.session"]')).not.toBeNull();
+      // A fixed running-work mark, never the spinner (#27103) and never the chat bubble.
+      expect(head.querySelector('svg[data-icon="app.sample.runningagents"]')).not.toBeNull();
+      expect(head.querySelector('svg[data-icon="agent.session"]')).toBeNull();
       expect(head.querySelector('[role="progressbar"]')).toBeNull();
       expect(head.querySelector(".acpmux-running-tray__title")?.textContent).toBe("2 subagents running · 1 command");
       expect(shown.root.querySelectorAll(".acpmux-agent-line").length).toBe(3);

From d19f67437aaa55ba9a67fbf59fcdb9ac1ebb49ec Mon Sep 17 00:00:00 2001
From: Leo Li <cheerleaderleo@outlook.com>
Date: Sat, 31 Oct 2026 17:01:33 +0000
Subject: [PATCH 4/5] gallery: await the tray header in a block, not
 void(await)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../acpmux/subagents/SubagentTrayHead.gallery.ts          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
index 153c5d2c8f85..9434b4414459 100644
--- a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
@@ -74,14 +74,18 @@ export default agentPaneEntry({
   experiment: {
     definition: trayHeadLook,
     script: [
-      { name: "the folded header", run: async (ctx) => void (await ctx.waitFor(() => head(ctx))) },
+      { name: "the folded header", run: async (ctx) => {
+        await ctx.waitFor(() => head(ctx));
+      } },
       { name: "open the tray", run: open },
     ],
   },
   variants: {
     folded: {
       note: "Between turns, folded: the header's mark, its counts, the elapsed time right after them as quiet meta, and the chevron in the lines' trailing column.",
-      play: async (ctx) => void (await ctx.waitFor(() => head(ctx))),
+      play: async (ctx) => {
+        await ctx.waitFor(() => head(ctx));
+      },
       snapshot: betweenTurns,
     },
     open: {

From 3b4af0298cf7e38bde02470a8c34e88aea708fdf Mon Sep 17 00:00:00 2001
From: Leo Li <cheerleaderleo@outlook.com>
Date: Sat, 31 Oct 2026 17:38:46 +0000
Subject: [PATCH 5/5] Format the tray header files (vp fmt)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../subagents/SubagentTrayHead.gallery.ts      |  9 ++++++---
 .../acpmux/subagents/trayHead.experiment.ts    |  3 +--
 webviews/test/subagent-tray-columns.test.ts    |  8 ++++++--
 webviews/test/subagent-tray-trailing.test.ts   | 18 ++++++++++--------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
index 9434b4414459..f52d39891a30 100644
--- a/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
+++ b/webviews/src/agent-session/acpmux/subagents/SubagentTrayHead.gallery.ts
@@ -74,9 +74,12 @@ export default agentPaneEntry({
   experiment: {
     definition: trayHeadLook,
     script: [
-      { name: "the folded header", run: async (ctx) => {
-        await ctx.waitFor(() => head(ctx));
-      } },
+      {
+        name: "the folded header",
+        run: async (ctx) => {
+          await ctx.waitFor(() => head(ctx));
+        },
+      },
       { name: "open the tray", run: open },
     ],
   },
diff --git a/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
index a06d656958b2..61f9be2b4211 100644
--- a/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
+++ b/webviews/src/agent-session/acpmux/subagents/trayHead.experiment.ts
@@ -9,8 +9,7 @@ import { defineExperiment } from "../../../experiments/experiment";
 export const trayHeadLook = defineExperiment({
   id: "subagent-tray-head",
   title: "Running tray header",
-  description:
-    "The header's fixed mark: a running-work glyph, no mark at all, or the chat bubble it used to draw.",
+  description: "The header's fixed mark: a running-work glyph, no mark at all, or the chat bubble it used to draw.",
   arms: {
     glyph: {
       label: "Running glyph",
diff --git a/webviews/test/subagent-tray-columns.test.ts b/webviews/test/subagent-tray-columns.test.ts
index 219ab2ac33d8..3a7c1736882a 100644
--- a/webviews/test/subagent-tray-columns.test.ts
+++ b/webviews/test/subagent-tray-columns.test.ts
@@ -379,7 +379,9 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
         expect(initialRest.every((row) => row.stop.left === initialFirst!.stop.left)).toBe(true);
         expect(initial.head.time.left).toBeGreaterThanOrEqual(initial.head.title.right - 0.5);
         expect(initial.head.time.left - initial.head.title.right).toBeLessThanOrEqual(8.5);
-        expect(initial.rows.every((row) => !row.chevron || row.chevron.right === initial.head.chevron.right)).toBe(true);
+        expect(initial.rows.every((row) => !row.chevron || row.chevron.right === initial.head.chevron.right)).toBe(
+          true,
+        );
         expect(initial.rows.some((row) => row.hasStop)).toBe(true);
         expect(initial.rows.some((row) => !row.hasStop)).toBe(true);
         expect(initial.rows.every((row) => row.summary.width >= 60)).toBe(true);
@@ -467,7 +469,9 @@ await requireBrowserLane("subagent-tray-columns.test.ts", async () => {
           expect(narrow.rows.every((row) => row.status.left >= row.time.right - 0.5)).toBe(true);
           expect(narrow.head.time.left).toBeGreaterThanOrEqual(narrow.head.title.right - 0.5);
           expect(narrow.head.time.right).toBeLessThanOrEqual(narrow.head.chevron.left + 0.5);
-          expect(narrow.rows.every((row) => !row.chevron || row.chevron.right === narrow.head.chevron.right)).toBe(true);
+          expect(narrow.rows.every((row) => !row.chevron || row.chevron.right === narrow.head.chevron.right)).toBe(
+            true,
+          );
           await page.waitForFunction(
             (previous) =>
               [...document.querySelectorAll<HTMLElement>(".acpmux-agent-line__time")].some(
diff --git a/webviews/test/subagent-tray-trailing.test.ts b/webviews/test/subagent-tray-trailing.test.ts
index cfb8bfd93c68..d6bdcfe01c99 100644
--- a/webviews/test/subagent-tray-trailing.test.ts
+++ b/webviews/test/subagent-tray-trailing.test.ts
@@ -103,19 +103,21 @@ await requireBrowserLane("subagent-tray-trailing.test.ts", async () => {
             expect(Math.abs(middle(stop) - middle(line.state))).toBeLessThanOrEqual(1);
             if (width > 400) expect(Math.abs(middle(stop) - middle(line.row))).toBeLessThanOrEqual(1);
             // In its own track, between the state and the chevron.
-            expect(Math.abs((stop.left + stop.right) / 2 - (line.track.left + line.track.right) / 2)).toBeLessThanOrEqual(1);
+            expect(
+              Math.abs((stop.left + stop.right) / 2 - (line.track.left + line.track.right) / 2),
+            ).toBeLessThanOrEqual(1);
             expect(stop.left).toBeGreaterThanOrEqual(line.state.right - 0.5);
             if (line.chevron) expect(line.chevron.left).toBeGreaterThanOrEqual(stop.right - 0.5);
           }
           // Each Stop, scrolled into the list's view, is the thing under the pointer at its centre.
           const hits = await page.evaluate(() =>
-            [...document.querySelectorAll<HTMLElement>(".acpmux-running-tray .acpmux-agent-line__stop-slot > button")].map(
-              (stop) => {
-                stop.scrollIntoView({ block: "nearest" });
-                const rect = stop.getBoundingClientRect();
-                return stop.contains(document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2));
-              },
-            ),
+            [
+              ...document.querySelectorAll<HTMLElement>(".acpmux-running-tray .acpmux-agent-line__stop-slot > button"),
+            ].map((stop) => {
+              stop.scrollIntoView({ block: "nearest" });
+              const rect = stop.getBoundingClientRect();
+              return stop.contains(document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2));
+            }),
           );
           expect(hits.length).toBe(stopped.length);
           expect(hits.every(Boolean)).toBe(true);