[freeqaz]

Problem

UX plan C5. On a phone the Agents list is a 5-column table inside a sideways-scrolling .table-scroll: the "Latest deployment" column reserves 14 rem, so 390 px shows about 2.5 columns and the page otherwise does not scroll sideways. IDs broke after every character (agt_13a0 / 7eb7- / f515-) because the ID column shrank to its overflow-wrap: anywhere min-content. Revision IDs in "Current version" were accent-coloured, the same red as errors and the primary button (audit 2.2, 2.7; design language P6).

Change

• agents/list.mjs: cells 2-5 carry data-label with their column name; the Current version link gets agent-revision-link. The table parts get explicit table/rowgroup/row/columnheader/cell roles, because some browsers drop table semantics when a table part's CSS display changes. No copy changes.
• console.css, under 760 px: the table, its body and rows become stacked rows. Each row shows the Agent name and ID first, then each cell with its column name (td[data-label]::before). The header row is visually hidden but stays in the accessibility tree, so screen readers still get table, row and column header semantics; the visible labels carry empty alt text (content: attr(data-label) / "") so a cell is not announced with its column name twice. Between 521 and 760 px each name sits beside its value (subgrid, so the names line up). At 520 px and under each name sits above its value, so values keep the row's full width. IDs wrap at hyphens because the cell is a full-width block; overflow-wrap: anywhere is only the fallback.
• On a phone the ID gets --space-2 above it and the row's full width; the now-dead 760 px cell padding rule is removed.
• The deployment cell reserves its note line in both stacked layouts, so a landing read does not grow the row (finding 1488 at phone width).
• Revision IDs in Current version are mono text in the text colour with an underline, not accent. They stay links: the audit said they were not links, but on main they open that version, and dropping the link would remove a path.
• Desktop (above 760 px) is unchanged apart from the revision ID style. Only design tokens are used; the visually-hidden header uses the standard 1px clip idiom.

Verification

• New browser test in tests/browser/console-agents-list-return.test.mjs (already in checks-browser-2), "On a phone the Agents list stacks each row, fits the screen and still opens the Agent". It uses 12 Agents with 60-character names (half with a current version) at 390, 360, 600 and 1440, and asserts:
  • no horizontal overflow (scrollWidth <= clientWidth for the page and .table-scroll), and no cell outside the table;
  • every cell's column name is shown, beside its value at 600 and above it at 390/360; at 1440 the header row shows and cells carry no label;
  • ID line breaks fall only after - or _, and at 360 every ID does wrap (so the check is never vacuous);
  • a current version's revision ID is mono in the text colour;
  • row heights are identical while the deployment reads are held and after they land;
  • the table, its rows and its column headers keep their roles;
  • the row's name link still opens the Agent.
• The test fails on main ("390: the table scrolls sideways"). Mutants that drop the label content, or the reserved deployment row under 520 px, fail it. Dropping only the clip-path of the hidden header survives, since the header is still 1px with overflow hidden.
• Pinned 20/20 at 2 CPUs (twice: before and after the review nits). Before the main merge: console-agents-list-return, console-agents, console-agents-2 (including the finding 1488 "does not move" test, shift 0 at 1280 and 390), console-retained-revalidation, console and console-refocus-focus passed (189/189). On the head merged with main (fix(console): first-run and not-ready Namespace guidance #2867, refactor(console): replace raw colour and shadow literals with tokens #2873): console-agents-list-return, console-agents, console-agents-2, console-namespace-not-ready and console-retained-revalidation passed (142/142).
• Internal review: approve with nits. Applied: explicit table roles, label alt text, ID spacing and width on a phone, dead padding rule removed, classList.add instead of assigning className, non-vacuous ID-wrap check, revision style check. Not applied (optional): hover on touch devices (pre-existing), larger tap targets for inline links.
• prettier and eslint clean on the touched files.

Before/after (Storybook preview frames, main 39dead534 vs this head; media commit 5aabfab1556fb332202d08f8343fc46ea987f12c, removed in the next commit):

Phone recording at 390 (webm): scroll the stacked list; a sideways scroll attempt moves nothing (list and page scrollLeft stay 0); tapping "Research assistant" opens that Agent

At 1440 the Populated story is sha256-identical before and after. In the failed-deployment story only the Current version revision ID changes (mono, text colour). At 600/390/360 main scrolls sideways (.table-scroll scrollWidth > clientWidth) and this PR does not.

Storybook stories: Pages/Agents › Populated, Pages/Agents › Latest Deployment Failed.

Open PRs (3-way merge, conflict files/hunks with origin/main vs with this head):

PR	with origin/main	with this PR	new hunks
#2876	0 files / 0 hunks (css 0, suite json 0)	0 files / 0 hunks (css 0, suite json 0)	none
#2599	19 files / 33 hunks (css 0, suite json 0)	19 files / 33 hunks (css 0, suite json 0)	none
#2596	0 files / 0 hunks (css 0, suite json 0)	0 files / 0 hunks (css 0, suite json 0)	none
#2524	3 files / 4 hunks (css 0, suite json 0)	3 files / 4 hunks (css 0, suite json 0)	none
#2445	4 files / 4 hunks (css 0, suite json 0)	4 files / 4 hunks (css 0, suite json 0)	none
#1619	8 files / 17 hunks (css 1, suite json 0)	8 files / 17 hunks (css 1, suite json 0)	none
#906	2 files / 4 hunks (css 0, suite json 0)	2 files / 4 hunks (css 0, suite json 0)	none

No new conflict hunk. #2524 already conflicts with main in list.mjs (it moves renderAgentList out); this change edits inside that same region and adds no hunk.

Risks

Low. CSS under 760 px plus data-label attributes. On phones the row layout changes (intended). At 761-1100 px the table and its sideways scroll are unchanged. Screen-reader table semantics depend on the browser keeping table roles for display: block/grid table parts. Chromium keeps them (asserted in the test). Older Safari versions are known to drop them; that is a known trade-off of this pattern.

[clawsweeper]

🦞👀
ClawSweeper picked this up.

Pull request received. I will update this pull request when review starts.

ClawSweeper review complete

ClawSweeper finished reviewing this revision. The review result is being finalized.

View the workflow run.

[clawsweeper]

Codex review: needs maintainer review before merge.

What this changes

The Agents list becomes labelled, stacked rows below 761 px, and current-version links receive a quieter monospace style.

Example: View Research assistant in the Agents list at 390 px.

• Before: The five-column table requires sideways scrolling to reach deployment details.
• After: Labelled fields stack within the viewport, including the failed deployment and its note.

Review scores

Measure	Result	What it means
Overall readiness	🦪 silver shellfish (2/6)	The focused patch and inspected screenshots support its value and correctness, but supplied evidence does not complete the mandatory UI proof gate.
Proof confidence	🦪 silver shellfish (2/6)	Real behavior proof is not required for maintainer- or bot-authored pull requests.
Patch quality	🐚 platinum hermit (4/6)	No actionable review findings were identified.

Product

Kind: Feature · Worth it: Yes · Fix scope: Complete
User problem: Phone users must scroll sideways to read Agent deployment details, while narrow columns fragment identifiers.
Reason: The maintainer-authored direction addresses a demonstrated usability problem with a focused presentation change and explicitly records its browser tradeoff.

Merge readiness

✅ Ready for maintainer review

Keep open: this maintainer-authored PR provides a useful mobile layout improvement that current main does not implement; no definite code defect was found.

Priority: P3
Reviewed head: 1a05ca8a820e94d9310868183a046b5cc4f92b5d

Before merge

None.

Findings

None.

Tests

• Missing end-to-end proof: The required mobile interaction recording is absent; the reported base-failure/head-pass browser comparison was not independently rerun.

Agent review details

How this fits together

The console list renderer receives authorized Agent summaries and asynchronous deployment reads, then produces navigable rows styled by the shared console stylesheet.

flowchart TB
  A[Authorized Agent summaries] --> C[Agents list renderer]
  B[Deployment reads] --> C
  C --> D[Table cells and navigation links]
  D --> E[Responsive console CSS]
  E --> F[Desktop table or stacked mobile rows]

Loading

Technical review

Best possible solution:

Retain the responsive presentation within the existing list renderer and stylesheet, preserving navigation and stable deployment-row heights.

Do we have a high-confidence way to reproduce the issue?

Current-main source explains the horizontal table overflow, and the supplied before images show it at phone widths; no target code or tests were run during this read-only review.

Is this the best way to solve the issue?

The change uses the existing renderer and responsive stylesheet, preserves revision links, and carries forward the deployment-height invariant without adding another rendering path.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning medium; reviewed against 39dead53499d.

Provenance checked

• Agent table structure and revision navigation keeps the original intent (835b1cc: feat: complete console Agent setup with credentials and workspace files #58 split the console into focused Agent workflows while retaining revision browsing.)
• Deployment-cell sizing keeps the original intent (d6f7f58: fix(console): steady Agents list and Agent page loads, focus Create Agent refusals, name Backends denials #2573 reserved width and clamped notes to prevent deployment reads from shifting rows.)
• Revision-link appearance changes intended behavior with a stated reason (5cc2a3d: The earlier styling aligned OCE with OpenClaw; this PR explains the narrower change to distinguish revision identifiers from accent and error styling while retaining links.)

Testing

Proof path: shipped entry point.

Security

None.

Evidence

What I checked:

• Introduced change: The pinned introduction changes only list presentation, responsive CSS, and an existing browser suite: production +97/-8 lines and tests +140 lines. (apps/controller/src/console/agents/list.mjs:407, 1a05ca8a820e)
• Current main still needs the presentation change: Current main retains the five-column table and 14rem deployment-width reservation; its intervening changes concern Namespace guidance and design tokens. (apps/controller/src/console/console.css:1371, 39dead53499d)
• Visual evidence inspected: Inspected all five linked before/after images: stacked fields fit at 360, 390, and 600 px, while desktop retains the table. The images exercise the production console in simulated Storybook scenarios at the media revision; the following commit removes only media. (apps/controller/src/console/console.css:1500, f722432f5ccb)
• Required UI evidence: AGENTS.md requires screenshots and a short interaction video as native GitHub attachments before merging UI changes; the complete PR body and discussion supply screenshot links but no recording. (AGENTS.md:451, 1a05ca8a820e)
• Preserved deployment-layout intent: fix(console): steady Agents list and Agent page loads, focus Create Agent refusals, name Backends denials #2573 introduced the fixed deployment width and one-line note to prevent landing reads from moving rows; this PR preserves that invariant through reserved mobile grid rows. (apps/controller/src/console/console.css:1545, 1a05ca8a820e)
• Recorded browser tradeoff: The collaborator-authored PR explicitly accepts older Safari potentially losing table semantics after table parts become block/grid; Chromium coverage is claimed, without claiming cross-browser accessibility proof. (apps/controller/src/console/console.css:1501, 1a05ca8a820e)

Review metrics

Metric	Value	Why it matters
Production and test growth	production +97/-8; tests +140/-0	The growth stays within existing owners; browser assertions cover distinct responsive-layout and navigation failures.

Labels

Label changes:

• add P3: This improves mobile readability and access to table fields without changing resource operations or deployment behavior.
• add rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🐚 platinum hermit.
• add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR.

Label justifications:

• P3: This improves mobile readability and access to table fields without changing resource operations or deployment behavior.
• rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🐚 platinum hermit.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR.

Rating scale

6/6 🦀 challenger crab · 5/6 🦞 diamond lobster · 4/6 🐚 platinum hermit · 3/6 🦐 gold shrimp · 2/6 🦪 silver shellfish · 1/6 🧂 unranked krab. Overall follows the weaker of proof and patch quality; ✨ marks media proof (a screenshot, video, or linked artifact) that directly shows the changed behavior.

Workflow

ClawSweeper edits this one comment on every review. Comment @clawsweeper re-review for a fresh review only. Repair and merge execution lanes are retired.

Reviewed October 18, 2026, 5:48 PM ET / 21:48 UTC.