Repository navigation
Harnesses and Settings: rows of one list share one text column - #28906
Merged
Merged
Conversation
…l edge A Chromium layout check over the Harnesses page and every Settings page (gallery agent-pane.harnesses and pages.settings): a harness's status line starts on its name's column and is never a card, every row's mark, text and action share one column each, Custom harness… sits on the rows' text column, and each Settings card's rows share one text column and one trailing control edge with controls centred on their labels. Red at base: the status line shares its class with the Session status card's root, so it draws as a padded card 18 px right of the name. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
The Harnesses page's status line ("Ready", "Signed out") used the class
.acpmux-harness-status, which is also the Session status card's root
(harnessStatus.css: 12 px padding, 18 px side margins, a fill and an edge).
Both sheets load in the agent pane, so every status drew as a card 18 px
right of its name and as wide as its text: rows read as misaligned. The
page's line is now .acpmux-harness-detail, so it starts on the name's
column. Custom harness… starts its text on the rows' text column (row
inset 6 + mark 18 + gap 10) instead of the mark's.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
… body on its title's column Extends the column check: in every Settings row with a leading mark (an account's or a machine's), the label starts one row gap after the mark, and an account's buttons and linked accounts start on its title's column. Writes card stills for Accounts, Machines and Spaces with FAST_CHECKS_OUT. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
…s buttons under its title A row-main lays out with space-between and the refined look caps a label at 60% of the card, so in a row with a mark and a label but no control (Accounts providers, Machines, Spaces) the leftover width split around the label: a provider's or machine's name started 40 to 90 px past its mark, and an active space (one more child, the dot) started its title 122 px right of its neighbours'. The label now takes the leftover itself (margin-right: auto), which changes nothing where a control already had margin-left: auto. An account's buttons sat 40 px in (the base look's mark plus gap) while the refined look's gap is 24, and the cmux Account row, which has no mark, indented them too. The body now starts at the mark's width plus the row's gap (one --row-main-gap now sets both), and at the row's edge without a mark. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
teamleaderleo
force-pushed
the
lane/ux-settings-align
branch
from
October 31, 2026 04:42
905efb8 to
6023cd0
Compare
teamleaderleo
temporarily deployed
to
ci-routing-agent
October 31, 2026 04:57 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
The Custom harness… button laid its lines out at their own width (align-items: flex-start), so its one-line detail ran past the page's right edge and was cut by the window instead of ending in an ellipsis. Its lines now take the button's width (stretch, min-width 0) and truncate like every row's status. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-63b9964940c20354b639
teamleaderleo
temporarily deployed
to
ci-routing-agent
October 31, 2026 05:17 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
teamleaderleo
temporarily deployed
to
ci-routing-agent
October 31, 2026 05:31 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
teamleaderleo
marked this pull request as ready for review
October 31, 2026 05:44
Contributor
|
cmux status (one comment, edited in place; each line is updated by the job that owns it) Review App of this head (app.zip, kept 1 day)
Gallery before/after for
States
Pick other states with a Shipped in:
|
Collaborator
Author
|
Review (the owner lane's independent review, at its land request): SHIP at 29ef829 Recorded by lane-gh-broker from this PR's owner lane, which asked to land this exact head after its independent review. next-autoland lands it once every red is the base's; a BLOCK at this head, a HOLD line or a hold label still stops it. |
Collaborator
Author
|
Visual verdict (drain-ship, landing lane): SHIP at 29ef829. Viewed the Harnesses hover stills (before light, after light and dark) and the Accounts and Machines cards: each harness row is now icon, name with status beneath, action on the right, in one text column, instead of a name over a grey status box; Accounts' buttons align with the card text; Machines' text sits closer to its avatar. Follow-up nit only: Machines rows still leave a wide gap between the avatar and the name. |
teamleaderleo
added a commit
that referenced
this pull request
Oct 31, 2026
feat-cmux-next's e1c9807 (Harnesses and Settings: rows of one list share one text column) changed the Harnesses page's status class and its row variables after grid/tokens-and-check last merged feat-cmux-next. Its Harnesses files only, as landed, so the grid fix below applies to the page as it is on feat-cmux-next and merges with it cleanly. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0
teamleaderleo
added a commit
that referenced
this pull request
Oct 31, 2026
Rows follow section 3: the mark in a 20 box 8 in from the row, name and status 8 after it, the action ending 8 in (row inset 6 -> 8, gap 10 -> 8, mark 18 -> 20, from the grid tokens). Controls are 28: the close button (26 -> 28, radius 7 -> 6) and the row actions (26 -> 28, padding 0 10 -> 0 12). The page's side inset rounds down to the 4 grid with a 16 minimum (was 18 and unrounded). Custom harness… keeps #28906's text column, which moves with the rows (34 -> 36), ends 8 in like them, and drops its 1 px line gap (the rows have none). The design-token baseline shrinks by the four literals this removes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0
teamleaderleo
added a commit
that referenced
this pull request
Nov 1, 2026
…hecks) (#29451) * Add shared layout grid tokens and validate their CSS and Swift copies Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * test(webviews): measure gallery grid lines from runtime tokens Add warning-level surface scenes, baseline/cap-height text measurements, named optical offsets, and recoverable per-line JSON evidence. Missing mounts and unknown selector coverage fail. Browser measurements and full checks are delegated to the parent fleet run; scoped lint, formatting, browser lane discovery, gallery IDs, and TypeScript syntax checked locally. Agent-Session: https://cmux.com/deeplink/agent?id=aid-b562541d72b66523f655 * Add transcript rhythm tokens and role-based grid measurement selectors Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Keep selector fallback valid when the marked surface is the target itself Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * test(webviews): align grid scenes with shared surface roles Use stable surface IDs across variants and ink-only role hints with selector fallbacks. Add existing plus, mode, project and tray scenes plus a 31-row expanded subagent fixture. Retain transcript action coverage and leave toolgroup/rhythm implementation to its owner. Scoped lint/format and gallery entry discovery passed; browser measurement remains delegated to parent fleet integration. Agent-Session: https://cmux.com/deeplink/agent?id=aid-b562541d72b66523f655 * Identify repeated grid scenes by their measured root Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Add shared transcript between-turn gap token Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Run layout grid validation in NEXT checks and scale the base unit Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Run layout grid drift check in the webviews warning branch Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Keep sidebar trailing marks fixed across densities Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Add canonical composer foot gap token and measure against it Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Measure visible placeholder ink and emit each grid scene baseline Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * test(webviews): correct card grid fixture selectors Read card fixture JSX: command permission body is its scope line; inline summary omits popover fold and close controls; glance inspector sections have distinct body labels and only Context/Connectors supply header icons. Scope absence diagnostics by fixture/section without changing coverageFailure assertions. Scoped format/lint, gallery discovery, and diff checks passed. Browser validation remains with parent fleet run. Agent-Session: https://cmux.com/deeplink/agent?id=aid-b562541d72b66523f655 * Set composer foot gap token to four points Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * Restore layout grid check script Agent-Session: https://cmux.com/deeplink/agent?id=aid-2bd8d22f53cb987a8eea * carry #28906's Harnesses part onto the grid stack feat-cmux-next's e1c9807 (Harnesses and Settings: rows of one list share one text column) changed the Harnesses page's status class and its row variables after grid/tokens-and-check last merged feat-cmux-next. Its Harnesses files only, as landed, so the grid fix below applies to the page as it is on feat-cmux-next and merges with it cleanly. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0 * test(grid): Harnesses page rows and controls on the grid (fail level) Section 3 rows in a pane: the mark's 20 box 8 in from the row, name and status 8 after it, the action ending 8 in, 28 controls, Custom harness… on the rows' text column and ending 8 in, and the page's side inset on the 4 grid with a 16 minimum. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0 * fix(harnesses): put the Harnesses page on the 4 pt grid Rows follow section 3: the mark in a 20 box 8 in from the row, name and status 8 after it, the action ending 8 in (row inset 6 -> 8, gap 10 -> 8, mark 18 -> 20, from the grid tokens). Controls are 28: the close button (26 -> 28, radius 7 -> 6) and the row actions (26 -> 28, padding 0 10 -> 0 12). The page's side inset rounds down to the 4 grid with a 16 minimum (was 18 and unrounded). Custom harness… keeps #28906's text column, which moves with the rows (34 -> 36), ends 8 in like them, and drops its 1 px line gap (the rows have none). The design-token baseline shrinks by the four literals this removes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0 * test(grid): measure the Codex Harnesses row in hover, not this-mac this-mac's gallery play signs Codex in (base's newer Harnesses gallery), which removes the row's action before the grid check reads it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Agent-Session: https://cmux.com/deeplink/agent?id=aid-ac5053f7854c8635a4d0 --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com> Co-authored-by: cmux-bot[bot] <348531757+cmux-bot[bot]@users.noreply.github.com>
This branch was previously deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Leo's words: "I feel like you guys could be doing more audits of the app"; "why is this all misaligned"; "the alignment i feel like we might as well".
Spec: leo-workspace
design/settings.md, new section "Columns" (teamleaderleo/leo-workspace#1844). It appliesdesign/grid.mdrule 2 to Settings and to the agent pane's Harnesses page.What was broken, and the fix
Harnesses: each status was drawn as a card. The page's status line ("Ready", "Signed out") used the class
.acpmux-harness-status. That class is also the root of the Session status card (harnessStatus.css: 12 px padding, 18 px side margins, a fill and an edge), and both sheets load in the agent pane. So every status rendered as a pill. Its text started about 36 px right of the harness name, the pill's width changed from row to row, and the row grew to 74 px. The page's line is now.acpmux-harness-detail: a line of text under the name, starting on the name's column. The gallery stage now loads both sheets, as the app does, so the collision shows up there too.Harnesses: Custom harness… sat off the text column. Its text started on the mark column (6) instead of the rows' text column (34), and its detail ran past the window's right edge. It now starts on the text column and truncates with an ellipsis.
Settings > Accounts, Machines, Spaces: labels drifted away from their marks. In a row with a mark and a label but no control,
space-betweensplit the leftover width around the label (the refined look caps it at 60%). Measured at 1000 px:The label now takes the leftover itself (
margin-right: auto). Rows whose control already hadmargin-left: autodon't change.Settings > Accounts: buttons sat at a fixed 40 px inset. That inset is the base look's mark plus gap, but the refined gap is 24, so a provider's buttons started 66 px left of its title. The cmux Account row has no mark, yet its buttons were still 40 px in. One
--row-main-gapnow sets both the gap and the body inset: the body starts at mark + gap, or at the row's edge when there's no mark.No control, option, row or default changes. Nothing is removed.
Evidence
Gallery stills: Chromium, 2x, synthetic data. All come from one cmux-ci job at this head (run 41172034881). Before is the merge base
ad93bb8767dwith this PR's four source files checked out from it; after is this head.Viewed after image: Harnesses shows seven 40 px rows. Each name has its status directly under it on the same column, the marks share one center line, the actions share one right edge, and Custom harness… starts on the text column with its detail ending in an ellipsis. In Accounts, Codex's name sits one gap after its logo, and its buttons and linked account start under the name; the cmux Account's buttons start under its title. In Machines and Spaces, every name starts one gap after its initial, and "Default" (the active space) lines up with "Work". Checked in light and dark.
Test
webviews/test/settings-columns-browser.test.ts(new; Chromium; galleryagent-pane.harnessesand everypages.settingscategory). It checks:Command:
cd webviews && bun test test/settings-columns-browser.test.ts(cmux-ci, run 41172034881)ad93bb8767dsource: red. All 4 Harnesses tests fail, plus 8 Settings breaks (Spaces 122.2 px text spread, Codex label +61.9, Codex body -65.9, cmux Account body +40.0, machines +44.8, and others).harnesses-page.test.tsx,harnesses-hover.test.ts,settings/layout.test.ts,settings/accounts.test.tsx,settings-cohesive-look.test.ts: 43 pass, 0 fail.Observed / Not run
scripts/web-lint.sh, and the design-token ratchet. The baseline shrinks: harnesses.css loses four off-scale literals. web-lint's one red isvp fmt --checkon 9 Settings menu files this PR doesn't touch, and it fails the same way on base.Overlap
HarnessesScreen.tsxand its gallery/test files. This PR's merge tree with each is clean, and none of them adds a new.acpmux-harness-statususe. A test that queries the old class name would need.acpmux-harness-detail.Changelog
Fixed: Harnesses and Settings rows line up. Each harness's status is a line under its name, and account, machine and space names sit next to their icons.
Risk: normal. CSS and one class name in webviews; no behaviour, protocol or native change.
Agent session: agent session
🤖 Generated with Claude Code