fix(tray): align status and controls with the composer

release-notes/next/highlights/running-tray-alignment.md

@@ -0,0 +1,4 @@
+title: Aligned controls in the running tray
+category: fixed
+
+The running tray above the composer keeps durations, status labels and controls aligned across running and finished work. It starts folded and remembers each chat's choice.

webviews/src/agent-session/acpmux/App.tsx

@@ -8193,6 +8193,7 @@ function AcpmuxPane() {
         <SubagentClockContext.Provider value={snapshot.clockOffsetMs ?? 0}>
           <SubagentTray
             key={shownSessionId}
+            chat={shownSessionId}
             items={trayList}
             finished={trayFinished}
             working={snapshot.isWorking}

webviews/src/agent-session/acpmux/backgroundTasks/BackgroundTasksPanel.gallery.ts

@@ -182,10 +182,14 @@ export default agentPaneEntry({
   },
   variants: {
     closed: {
-      note: "Before it opens: the tray above the composer lists the running agents; the chat's ⋯ menu has Background tasks.",
+      note: "Before it opens: the tray above the composer, opened from its folded header, lists the running agents; the chat's ⋯ menu has Background tasks.",
       snapshot: snapshot(false),
       play: async (ctx) => {
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray"));
+        // A headed tray starts folded (cmux#28875): open it, as the person does.
+        if (ctx.document.querySelector('.acpmux-running-tray__head[aria-expanded="false"]'))
+          await ctx.click({ selector: ".acpmux-running-tray__head" });
+        await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__list .acpmux-agent-line"));
       },
     },
     docked: {

webviews/src/agent-session/acpmux/bottomStack.css

@@ -57,8 +57,10 @@
 }
 /* The tray of running subagents and background commands (subagents/SubagentTray.tsx), aligned
    with the composer card; in a short pane it gives up its height like the parts below. */
+/* Match the composer's 8px outset below 298px of content width (#28587). */
 .acpmux-dock > .acpmux-running-tray {
-  margin: 0 var(--cv-inset-end, var(--cv-inset)) 0 var(--cv-inset);
+  --acpmux-tray-outset: clamp(0px, calc((297.5px - (100% - var(--cv-inset) - var(--cv-inset-end, var(--cv-inset)))) * 1000), 8px);
+  margin: 0 calc(var(--cv-inset-end, var(--cv-inset)) - var(--acpmux-tray-outset)) 0 calc(var(--cv-inset) - var(--acpmux-tray-outset));
 }
 .acpmux-dock > .acpmux-composer {
   display: flex;

webviews/src/agent-session/acpmux/composerLocation.css

@@ -453,7 +453,7 @@
 }
 /* The trailing cluster takes the row's free space on its leading side, in either direction. */
 .acpmux-composer-bar .acpmux-composer-actions {
-  gap: 4px;
+  gap: var(--acpmux-composer-action-gap);
   margin-left: 0;
   margin-inline-start: auto;
 }
@@ -1338,7 +1338,9 @@
    whole pane (pane-has-restyle.browser.test.ts). */
 /* The control tokens live on the composer's root, so the rows outside the box (the strip over it,
    the quiet row under it) stand on the same column. New Tab derives its inset (newtab/screen.css). */
+.acpmux-dock,
 :is(.acpmux-composer, .nt-composer) {
+  --acpmux-composer-action-gap: 4px;
   --acpmux-composer-control: 28px;
   --acpmux-composer-inset: calc(8px * var(--cmux-interface-scale, 1));
   --acpmux-composer-lead-gap: calc(8px * var(--cmux-interface-scale, 1));

webviews/src/agent-session/acpmux/subagents/AgentLine.tsx

@@ -19,8 +19,8 @@
 // subtitles are bad"): one leading glyph (the spinner while it works, else its own icon or its
 // harness's mark), never a second kind glyph beside it; the title; one muted trailing meta (what it
 // spent, a state worth reading, its time); the chevron. No agent-type subtitle on the line (the
-// tooltip and the hover card keep it), and no "Done" or "Running" word: the glyph says those
-// (`quiet`), and the word stays for screen readers. design/chat-transcript.md "Subagent row anatomy".
+// tooltip and the hover card keep it). The tray reserves a status-word track beside the time,
+// including Running and Done, so every state keeps the same control geometry.
 import type { CSSProperties, ReactNode } from "react";
 import { AgentMark, knownMark } from "../../shared/AgentMark";
 import { Tooltip } from "../../../ui/Tooltip";
@@ -166,21 +166,21 @@ export function AgentLine({
         )}
         <span className="acpmux-summary-agent__name">{name}</span>
         {detail && detail !== name && <span className="acpmux-summary-agent__kind">{detail}</span>}
+        {progress && trayColumns && progressAt === "meta" && (
+          <span className="acpmux-agent-line__stats">{progress}</span>
+        )}
         {progress && !(trayColumns && progressAt === "meta") && (
           <span className="acpmux-agent-line__progress">{progress}</span>
         )}
       </span>
       {trayColumns ? (
         <>
-          {/* One muted trailing meta: what it spent and a state worth a word, then its time. */}
-          {((progress && progressAt === "meta") || !quiet) && (
-            <span className="acpmux-summary-meta acpmux-agent-line__meta">
-              {progress && progressAt === "meta" && <span className="acpmux-agent-line__stats">{progress}</span>}
-              {/* Running turns to Waiting or Failed with a tick, never a jump (trayMotion.tsx). */}
-              {!quiet && <Tick className="acpmux-summary-agent__state" text={state} />}
-            </span>
-          )}
-          {quiet && <span className="acpmux-agent-line__sr">{state}</span>}
+          {/* The tray reserves a visible status track for every row. Keeping the word in the same
+              track for quiet (Running/Done/Cancelled) rows prevents a missing state from pulling
+              the duration toward the title or moving the Stop and chevron columns. */}
+          <span className="acpmux-summary-meta acpmux-agent-line__meta" data-tray-status>
+            <Tick className="acpmux-summary-agent__state" text={state} />
+          </span>
           <span className="acpmux-summary-meta acpmux-agent-line__time" aria-hidden={time === undefined}>
             {time}
           </span>

webviews/src/agent-session/acpmux/subagents/AgentsPill.tsx

@@ -24,7 +24,9 @@ export function nestAgents(agents: readonly Subagent[]): { agent: Subagent; dept
   const under = new Map<string | null, Subagent[]>();
   for (const agent of agents) {
     const parent = agent.parent !== null && ids.has(agent.parent) ? agent.parent : null;
-    under.set(parent, [...(under.get(parent) ?? []), agent]);
+    const siblings = under.get(parent);
+    if (siblings) siblings.push(agent);
+    else under.set(parent, [agent]);
   }
   const rows: { agent: Subagent; depth: number }[] = [];
   const placed = new Set<string>();

webviews/src/agent-session/acpmux/subagents/SubagentTray.gallery.ts

@@ -250,8 +250,19 @@ const panelScript = [
   { name: "open all and scroll to the end", run: scrollPanel },
 ];
 
-/** Waits for the tray's live `count` lines, and checks no group card is left in the transcript. */
+/** A headed tray starts folded to its header (cmux#28875): open it, as the person clicks it. */
+const openTray = async (ctx: PlayContext) => {
+  await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray"));
+  const head = ctx.document.querySelector<HTMLElement>(".acpmux-running-tray__head");
+  if (!head || head.getAttribute("aria-expanded") === "true") return;
+  await ctx.click({ selector: ".acpmux-running-tray__head" });
+  await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__list"));
+};
+
+/** Opens the tray, waits for its live `count` lines, and checks no group card is left in the
+ *  transcript. */
 const trayLines = (count: number) => async (ctx: PlayContext) => {
+  await openTray(ctx);
   await ctx.waitFor(
     () =>
       ctx.document.querySelectorAll(".acpmux-running-tray li:not([data-finished]) .acpmux-agent-line").length === count,
@@ -285,6 +296,27 @@ export default agentPaneEntry({
   // The panel's looks (trayPanel.experiment.ts), on the two- and 118-agent panels.
   experiment: { definition: trayPanelLook, script: panelScript },
   variants: {
+    geometry: {
+      note: "Geometry fixture: running, completed and cancelled rows share the trailing tracks above a running empty composer.",
+      play: async (ctx) => {
+        await openTray(ctx);
+      },
+      snapshot: chat(
+        [
+          user("Keep the three task states visible", 4),
+          group(
+            [
+              agent("Running check", 2.1, "running", { action: "Run the check" }),
+              agent("Done check", 3.8, "completed", { ran: 1.2 }),
+              agent("Cancelled check", 3.8, "cancelled", { ran: 1.4 }),
+            ],
+            2.1,
+          ),
+          assistant("The checks are visible above the composer.", 1),
+        ],
+        { isWorking: true },
+      ),
+    },
     "grid-31": {
       note: "Grid fixture: 31 rows (29 ended and two running), expanded with the header and footer visible.",
       snapshot: panel(29),
@@ -297,6 +329,7 @@ export default agentPaneEntry({
       note: "Leo's panel with two chats running and three ended (2026-10-25: \"this section, the whatever background tasks ... it's kind of wack\"): the header pinned on top, running first, then the latest that ended; no line carries a subtitle, so none shows a raw shell line.",
       play: async (ctx) => {
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__head"));
+        await openTray(ctx);
         headInView(ctx);
         // No line carries a subtitle, so none shows a raw shell line (subagents/AgentLine.tsx).
         const tray = ctx.document.querySelector<HTMLElement>(".acpmux-running-tray")!;
@@ -309,6 +342,7 @@ export default agentPaneEntry({
     "panel-one-running": {
       note: "One of the two chats ended: the header and its collapse stay while ended lines show (it used to unmount once fewer than two ran).",
       play: async (ctx) => {
+        await openTray(ctx);
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray .acpmux-agent-line"));
         headInView(ctx);
       },
@@ -331,6 +365,7 @@ export default agentPaneEntry({
         { isWorking: true },
       ),
       play: async (ctx) => {
+        await openTray(ctx);
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__finished"));
         const shell = ctx.document.querySelector<HTMLElement>(".acpmux-shell")!;
         shell.style.width = "300px";
@@ -389,9 +424,6 @@ export default agentPaneEntry({
     "duration-columns": {
       note: "Duration-column stress fixture: running work spans 9s, 2h 20m and 12h 59m 59s so every time stays on one line in the shared trailing track.",
       play: async (ctx) => {
-        await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__head"));
-        if (ctx.document.querySelector(".acpmux-running-tray__head")?.getAttribute("aria-expanded") !== "true")
-          await ctx.click({ selector: ".acpmux-running-tray__head" });
         await trayLines(6)(ctx);
       },
       snapshot: chat(
@@ -444,7 +476,7 @@ export default agentPaneEntry({
       snapshot: chat([user("Run the red/green tests in the background", 59), testRun], { isWorking: true }),
     },
     "several-running": {
-      note: "Two subagents and a background command: a header with the counts and the time since the first started, a line each (up to three show open). The ended task remains a compact status card.",
+      note: "Two subagents and a background command: a header with the counts and the time since the first started, a line each once its header is opened (it starts folded to the header). The ended task remains a compact status card.",
       play: trayLines(3),
       snapshot: chat(
         [
@@ -497,6 +529,7 @@ export default agentPaneEntry({
     "between-turns": {
       note: "After the turn: a background subagent and two chats the agent started still run. The tray says so above the composer; the transcript ends with the turn's footer.",
       play: async (ctx) => {
+        await openTray(ctx);
         await ctx.waitFor(() => ctx.document.querySelectorAll(".acpmux-running-tray .acpmux-agent-line").length === 3);
         if (ctx.document.querySelector(".cv-bgwork")) throw new Error("no Running in background row in the transcript");
       },
@@ -575,6 +608,7 @@ export default agentPaneEntry({
     "codex-lineage": {
       note: 'A Codex chat\'s subagents as its records say (Leo 2026-10-22: "why is it like... staggered? were they created by another subagent?"): the chat itself started both, so they sit side by side. A child that reports its parent thread never makes the chat a subagent of its own, nested under that child.',
       play: async (ctx) => {
+        await openTray(ctx);
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray .acpmux-agent-line"));
         const names = [...ctx.document.querySelectorAll(".acpmux-running-tray .acpmux-summary-agent__name")];
         if (names.some((name) => /^[0-9a-f]{8}-/.test(name.textContent ?? "")))
@@ -594,7 +628,7 @@ export default agentPaneEntry({
       play: async (ctx) => {
         await ctx.waitFor(() => ctx.document.querySelector(".acpmux-running-tray__head"));
         if (ctx.find({ selector: ".acpmux-running-tray__head" }).getAttribute("aria-expanded") !== "false")
-          throw new Error("more than three running lines start folded");
+          throw new Error("a headed tray starts folded");
       },
       snapshot: chat(
         [