fix(agent-pane): keep running tray durations on one line

TE
6d ago
+662-15

The running tray showed long durations stacked in one cell, which made rows taller and shifted status, chevrons and Stop controls. Leo called the strip “oh god this is really bad ui” and the open tray alignment “i guess the alignment overall hasn't finished for these yet :(”.

The tray now uses a shared trailing duration track sized for 12h 59m 59s (80px at 100%, scaled with the interface text), with tabular numerals, nowrap and clipping. The existing shared status, chevron and Stop tracks remain aligned; the collapsed header retains one elapsed time for the longest-running item, so it does not stack per-row timers. The gallery adds 9s, 59s, 31m19s, 2h19m59s and 12h59m59s cases, plus a command Stop and an untimed waiting row. The surface rules are documented in design/running-tray.md.

Leo's private references show 2h 19m above 59s, 2h 20m above 9s, and Stop controls at different x positions. Those references stay private; public before/after gallery stills below use synthetic fixtures.

At tray widths of 400px or less, rows place the title above the duration and trailing controls (56px minimum at default interface scale). Existing multiline workflow progress expands the title section; the controls retain one scaled row below it, including a bottom-anchored Stop slot. Nested indentation affects the title and icon while the trailing columns stay aligned. The collapsed header shows the longest-running item's elapsed time because that is how long the outstanding work has been running. No new timer is introduced. One ResizeObserver watches the tray width to reserve both header lines in a short dock, plus one row when View all is pinned; it disconnects on unmount and updates React state only when the narrow-width boundary changes.

Validation at 6d70a58fca6c3cb5c29f33feddc28215c2c90018:

  • Linux Chromium run 41125255462: 12 tests pass, 416 assertions, no failures. The snapshot tree d3f913f36727ae6160a7cce7feca3b2d0f3d458c equals this head's tree. Tests measure real durations and live ticks at 760px, 300px, 240px and 200px, plus a 300×400 short dock at 100% and 125% in both themes. The short-dock clock is fixed to keep 12h 59m 59s present through every measurement and capture; the other tests verify real timer changes.
  • Four workflow-progress cases at 300px assert every rendered progress line stays inside its title section and above time, status and Stop at 100% and 125% in both themes. Short-dock assertions cover text bounds and scroll width, pinned header/View all bounds and hit testing, and Stop reachability when the list has room.
  • Workflow overlap red proof: restoring the previous fixed narrow rows fails all four progress cases on measured overlap (27px at 100%, 20px at 125%). The corrected head passes the same assertions.
  • Regression red proof: restoring the old two-row expanded floor fails all four short-dock cases; restoring the fixed 80px track fails both 125% cases.
  • Fast gates pass, including web lint. The design-token baseline removes the obsolete allowance for the replaced tray-height formula; it adds no allowances.
  • The surface and canonical grid spec updates are #1731 and #1736.

Risk: narrow trays use two uniformly sized lines per row to preserve title space and control access. Existing motion, glass, colours, spinner, row content, and composer remain intact.

Changelog

Fixed: Long running tray durations stay on one line with aligned trailing controls.

Gallery: agent-pane.subagent-tray/workflow-progress, agent-pane.subagent-tray/short-dock, agent-pane.subagent-tray/duration-columns, agent-pane.subagent-tray/several-running, agent-pane.subagent-tray/command-and-subagent

Short dock and interface scaling

Final synthetic short-dock captures at 6d70a58fca6c3cb5c29f33feddc28215c2c90018 from Linux Chromium run 41125255462, captured at 2× resolution. The test fixes the gallery clock so the longest duration is present in every image.

100% after, dark | light:

after 1 dark after 1 light

125% after, dark | light:

after 1.25 dark after 1.25 light

Viewed after image: yes
Visual verdict: SHIP — the full 12h 59m 59s and View all 4 remain visible at 100% and 125% in both themes. Trailing columns stay aligned; workflow progress wraps above the control row without overlapping duration, status or Stop at both scales and themes. Narrow trays retain the two-line header and scroll their list.

Before / after

Gallery stills at head 1456647a631aa348ce50ec907d9875f615ef121a (Linux Chromium, gallery advisory run 41097410663, synthetic fixtures only), 420px wide so the narrow tray layout applies. Base is 62e7f04c16ba2ada59a5baaa29cc788065fdbfa3. duration-columns is a new fixture, so it has no before still. The final short-dock captures below additionally cover the constrained dock and interface scaling.

Several running (before, dark | after, dark):

before several-running dark after several-running dark

Several running (before, light | after, light):

before several-running light after several-running light

Workflow progress at 300px, current head, 2× Linux Chromium captures:

100%, dark | light:

workflow progress 1 dark workflow progress 1 light

125%, dark | light:

workflow progress 1.25 dark workflow progress 1.25 light

Duration stress fixture, 9s to 12h 59m 59s (after only, dark | light):

after tray duration-columns dark after tray duration-columns light

Collapsed header with 12h 59m 59s (after only, dark | light):

after background-activity duration-columns dark after background-activity duration-columns light


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Fixes the running tray so long durations (12h 59m 59s) stay on one line instead of wrapping, which previously stretched row heights and pushed status, chevrons, and Stop controls out of alignment.

  • Replaces the 52px duration track with an 80px one that scales with the interface scale, using nowrap, clipping, and tabular numerals.
  • Scales tray header, row, list cap, and bottom-stack heights with --ui-row-height, and derives the footer gap from the --ds-space-1 token; the bottom-stack floor no longer carries an obsolete taller allowance.
  • Below 400px surface width, every row stacks the title above duration, status, and Stop, preserving trailing control alignment; workflow progress wraps above the controls without sharing their track.
  • Uses a ResizeObserver on the tray so split panes and gallery frames follow the same narrow-width rule; it disconnects on unmount and updates state only when the width boundary changes.
  • Adds gallery fixtures and tests covering 9s to 12h 59m 59s, nested agents, commands, an untimed row, a constrained dock, live timer ticks at interface scales 1 and 1.25, and reachability of the header, View all, and Stop in narrow panes.

Agent session: https://cmux.com/deeplink/agent?id=aid-ade2ba78ec7f44fc9b0c