[freeqaz]

Problem

Status badges and card surfaces had no shared pattern (UX plan C4; design-language section 3; audit 2.2):

• The version list's "Current version" label renders as "Currentversion": at 11 px and weight 650, the font's space is 2 px.
• Four status chips each have their own chrome: .badge, .credential-status.stored/.missing, .repository-access-summary(.is-error) and .version-current. They use ad hoc sizes (11, 12 px), paddings (3/8, 4/8, 6/10) and weights (600, 650).
• The Agents list's "Deleting" and "Saved configuration unreadable" badges are grey. So are the Agent header's.
• No card or section class: .resource and a dozen other components each restate surface, edge, radius and padding.

Change

• console.css: patterns built on the B1 tokens.
  • .badge: --text-sm medium, --radius-sm, --space-1/--space-2 padding. Tones by data-tone: neutral (default), success, warning, danger and the new info.
  • .card: surface, --color-border, --radius-lg, --space-6 padding (--space-4 at 520 px and below). Variants .card--muted (surface-2) and .card--danger (danger-subtle edge).
  • .section: h2 at --text-xl, an optional description at --prose-max, and --space-8 above.
• Adopted here:
  • Namespace and Backend rows are card resource. .resource keeps only its flex layout. Its older 20 px padding at 760 px is gone, so phones get the card's 16 px. The badges keep fix(console): Namespaces rows navigate and badges speak #2869's human labels and tones ("Ready", "Provisioning", "Deleting", "Failed"; Backend types neutral).
  • Version list: the current version shows a "Current" success badge on the version number's line, after a space ("v6 Current"). The badge does not make its row taller, and the button's accessible name is unchanged ("View version v6, current version").
  • Credentials, Slack token bindings: .badge success "Bound" and danger "Missing", replacing .credential-status.
  • Repository access summary: .badge info, or danger when invalid. .repository-access-summary keeps only its layout (wraps, never wider than the card).
  • "Deleting" (Agents list and Agent header) is warning, and "Saved configuration unreadable" is danger.
• Removed: the .credential-status*, .version-current and .repository-access-summary colour/size rules, and the plugin list's off-scale 0.75rem badge size.
  • The plugin list badges now use --text-sm. With the old size, rows had a fractional height under the token badge, and at 390 the scrolling list clipped a focus ring by 0.5 px. Console Browser 2's console-focus-ring caught it on 27d2b17c1.
• Storybook: new scripts/console-storybook/badge-and-card-workflow.md walks the existing stories: Namespaces, Backends, the Versions card, Credentials, Repository access and Plugins (phone). The Namespaces stories point to it.
• Not adopted yet: .section, .card--muted and .card--danger are defined here and adopted by later rows. D2 merges Stop and Delete into one .card--danger. The other .agent-card, .state-panel and similar components move one at a time.
• Copy kept: "Bound", not "Stored". The plan row suggests "Stored", but the badge reports a saved Secret reference. docs/guides/console/channels-and-credentials.md documents it as "Bound/Missing ... not whether Slack accepts the tokens". "Stored" would claim more than the console checks, so the existing words stay and only the chrome changes.

Verification

• New tests/browser/console-badges.test.mjs, mapped to checks-browser-2.json (run-tests.mjs audit: no issues). Every test fails on main:

  • Version badge, at 1440 and 390: the current version's button has the accessible name "View version v1, current version". Its badge is .badge "Current" with data-tone="success", is tinted, sits on the version number's line at least 4 px after it, and the rendered text starts with v1 Current.
  • Credentials: the Slack app token reads "Missing" (danger) and the bot token "Bound" (success), both as .badge. Each badge's text colour is checked against its tone's token.
  • Namespaces: rows are .card (14 px radius, 24 px padding, 1 px edge), and the "Ready" badge is success.

• console-badges.test.mjs ran 20/20 at 2 CPUs (taskset -c 8-9), before and after the review fixes. After the plugin badge fix, console-badges and console-focus-ring together ran 20/20. On the old head, console-focus-ring failed locally exactly as it did in CI.

• These related files ran once, 184/184 passed: console.test.mjs (fix(console): Namespaces rows navigate and badges speak #2869's Namespace badge test, unchanged), console-focus-ring, console-agent-repositories, console-agent-saves, console-agent-detail and console-agents. No existing getByText test needed a change, because no label changed except the version badge's.

• Prettier and eslint are clean on the touched files.

• ClawSweeper (on 27d2b17c1): both items are done. The media is out of the diff, and the Storybook workflow has been added.

• Internal review: approve. Its low items are applied: the badge no longer grows the current version's row, the phone card padding now takes effect, and the tests check tone colours and use classList. Two items are left for later rows:

  • D2: .card--danger uses the design-language "danger-subtle edge", which is fainter than --color-border. D2, which first uses it, should give it a visible edge.
  • Info tone: the repository summary's "awaiting verification" state shares the info tone with settled states.

• Media: Storybook stories namespaces, deploymentFailed (Versions card), credentialsSlackPartial (Slack token bindings) and createRepositoriesSelected (Repository access), before and after, at 1440 and 390. For "before", the same stories were served main's console.css, shell.mjs, detail.mjs, list.mjs, credentials.mjs and repositories.mjs. Media commit 27d2b17c1. The media was removed in 1e28208aa, so it is not in the landing diff. These are simulated UI fixtures: they show rendering, not backend state.

  Current-head walkthrough: Watch the nine-second recording · 390 px Namespaces view.
  Recorded in sandboxed Chromium from this head’s successful hosted Storybook build, with no external browser requests or credentials. The fixture shows Ready/Provisioning, the Current badge and keyboard focus, Bound/Missing token references, repository access summaries, and 16 px card padding at a 390 px viewport. The before/after images below are the earlier captures already identified above; all media are native attachments outside the landing diff.

  view	width	before (main)	after
  Namespaces	1440
  Namespaces	390
  Versions card	1440
  Versions card	390
  Credentials, Slack tokens	1440
  Credentials, Slack tokens	390
  Repository access	1440
  Repository access	390

• Open PRs: I ran a 3-way git merge-tree against every open PR touching the console (feat(console): stop and delete Agents from the Agents list #2524, feat: assign configured OpenClaw roles to Agent users #906, fix(console): Agents list wraps long names on wide screens; phone sheets stay above the keyboard #2893, test(console): kill surviving mutants in the harness lock, JSON scan and recovery card #2892, fix(console): keep a focused workspace caret on reread and quiet plugin live regions #2860, feat: add per-agent sandbox network policies and denial review #2599, feat(console): show the authorized native Gateway people roster #2596, Add OCE policy simulation and tester for network and plugin actions #2445, Draft implementation: managed outbound HTTPS for dedicated Gateways #2518, fix(console): distinguish stale runtime status from loss of access #2505, fix(console): keep followed logs steady and report the first output #2502, fix(console): let the create preflight carry any configuration both creates accept #2833, fix: preserve native plugin permissions across Harness selection and admission #2258, fix(console): grant Agent access to accepted Configuration Secrets #2255, Support custom Installation profiles and readable Preset starters #2253, feat(auth): sign people in to occ with a device code (rfc-0019) #1619, docs(specs): propose rfc-0019 for repository options without a repository driver #878, feat: add Agent workload tags #115). Each PR's conflict-hunk count is the same against this head as against main. This branch adds no new conflict hunk, and no call site had to be skipped.

• origin/main is merged in: fix(console): Create Agent shows its own busy state #2898, then test(console): kill surviving mutants in the harness lock, JSON scan and recovery card #2892 at 8cb625992. On the merged trees, console-button-hierarchy, console-badges and console-focus-ring pass.

Risks

Low. The changes are CSS and class names, plus one label: "Current version" becomes "Current". The badge padding drops from 6/10 px to 4/8 px and the weight becomes medium, so existing neutral badges (plugin list, channel cards) are a little more compact. The before/after media show the four affected views.

[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

This PR standardizes console cards and status badges across resource lists and Agent views.

Example: Inspect current Agent version v6 at a 390 px viewport.

• Before: The separate label appears as “Currentversion” and makes the version row taller.
• After: A green “Current” badge follows v6 on the same line, while the accessible name retains “current version”.

Review scores

Measure	Result	What it means
Overall readiness	🦞 diamond lobster (5/6)	Focused, owner-directed presentation work with visible before/after evidence, meaningful browser coverage, resolved prior findings, and no new defect.
Proof confidence	🦞 diamond lobster (5/6) ✨ media proof bonus	Sufficient (screenshot): Production console modules rendered in Storybook Chromium screenshots demonstrate Namespace cards, the corrected Current badge, Bound/Missing chips, and wrapping repository summaries; target-native browser checks pass on the reviewed head. The supplied recording remains attached, but local playback could not be inspected because ffprobe is missing and Chromium aborts during crashpad initialization; this reviewer limitation creates no contributor action.
Patch quality	🦞 diamond lobster (5/6)	No actionable review findings were identified.

Product

Kind: Refactor · Worth it: Yes · Fix scope: Complete
User problem: Inconsistent status chips and cramped version text make console state harder to scan.
Reason: The maintainer-authored direction provides a focused visual improvement through existing console owners without changing platform contracts.

Merge readiness

✅ Ready for maintainer review

This PR is ready for maintainer triage at 8cb6259: earlier findings remain resolved, main’s recovery-link contrast fix is preserved, and no new actionable defect was found.

Priority: P3
Reviewed head: 8cb625992a9094a6b4e5e865c0a6d14e3cf4d51e

Before merge

None.

Findings

None.

Agent review details

How this fits together

The controller-hosted console renders authorized resource and Agent data into browser views; shared CSS controls their cards, badges, spacing, and status colors.

flowchart LR
  A[Authorized API responses] --> B[Console views]
  B --> C[Resource and Agent markup]
  D[Shared CSS tokens and patterns] --> C
  C --> E[Browser display]

Loading

Technical review

Best possible solution:

Land the shared presentation patterns with the existing status semantics, accessible names, and focused browser coverage preserved.

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

Main’s separate version-current element and compact typography explain the reported label problem, corroborated by the supplied before screenshot; no target code was run during review.

Is this the best way to solve the issue?

Consolidating existing presentation in the shared stylesheet removes duplicate badge rules while retaining binding semantics and version accessibility.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning medium; reviewed against 4aa829646893.

Provenance checked

• Shared cards and badges changes intended behavior with a stated reason (3474bb7: Resource surfaces and neutral badges supported the initial read-only console; later styling aligned the console with OpenClaw.)
• Current version indicator keeps the original intent (7c3ecbf: Distinguish the current admitted version while browsing deployment history; the patch preserves that distinction and its accessible name.)
• Credential and repository status semantics keeps the original intent (835b1cc: Expose credential setup state without claiming runtime authentication; the patch retains Bound/Missing and changes only presentation.)
• Namespace status tones and navigation keeps the original intent (598a0a0: Use readable status labels and keyboard-accessible Namespace navigation; both remain intact.)

Testing

Proof path: shipped entry point.

Security

None.

Evidence

What I checked:

• Pinned introduction: The introduced diff contains presentation changes, four browser cases, CI registration, and Storybook instructions; committed PR media is absent. (8cb625992a90)
• Merge composition: The reviewed head and synthetic merge 565f072 have identical tree aa3c8dbff173b83ed2b749fe3316a9772af4bfea; the recovery action retains main’s stronger border. (apps/controller/src/console/console.css:1147, 8cb625992a90)
• Current-head validation: GitHub reports Console Browser, Console Browser 2, and CI Required successful for the reviewed head in https://github.com/openclaw/openclaw-enterprise/actions/runs/39194285788. (tests/browser/console-badges.test.mjs:46, 8cb625992a90)
• Visual evidence: Inspected prepared Namespace screenshots and native phone attachments for version before/after, credentials, and repository summaries; they show the changed production UI rendering against explicitly simulated Storybook data. (scripts/console-storybook/public/frame.mjs:55, 8cb625992a90)
• Discussion and prior fixes: The current diff resolves the earlier committed-media and missing-workflow findings; freeqaz-openai’s source approval and merge-composition discussion are recorded at feat(console): card, section and badge patterns #2899 (comment). (scripts/console-storybook/badge-and-card-workflow.md:1, 8cb625992a90)
• Inspection limits: Some historical blobs were unavailable locally; GitHub’s comparison supplied the previous-head stylesheet change. Video preparation failed with “ffprobe failed: spawnSync ffprobe ENOENT”; Chromium fallback aborted with “chrome_crashpad_handler: --database is required”. Scratch writes were also rejected as read-only. These are reviewer infrastructure limits, not contributor defects. (8cb625992a90)

Likely related people:

• Free Wortley: Raw commit 4aa8296 adds apps/controller/src/console/console.css:1111 relative to its recorded parents. This identifies author metadata, not feature responsibility or a PR merger. (role: source-line author; confidence: high; commits: 4aa829646893; files: apps/controller/src/console/console.css)
• kevinlin-openai: Raw commit 5cc2a3d adds apps/controller/src/console/console.css:392 relative to its recorded parents. This identifies author metadata, not feature responsibility or a PR merger. (role: source-line author; confidence: high; commits: 5cc2a3d69c22; files: apps/controller/src/console/console.css)
• stevenlee-oai: Raw commit 7c3ecbf adds apps/controller/src/console/agents/detail.mjs:704 relative to its recorded parents. This identifies author metadata, not feature responsibility or a PR merger. (role: source-line author; confidence: high; commits: 7c3ecbfce4fa; files: apps/controller/src/console/agents/detail.mjs)

Labels

Label changes:

• add rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
• remove rating: 🐚 platinum hermit: Current PR rating is rating: 🦞 diamond lobster, so this older rating label is no longer current.

Label justifications:

• P3: This is a bounded console presentation improvement with no API, authorization, persistence, or lifecycle change.
• rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR.
• proof: sufficient: Contributor real behavior proof is sufficient.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence.

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.

History

Review history (2 earlier review cycles)

• reviewed 2026-10-19T02:54:59.699Z sha 27d2b17 :: needs changes before merge. :: [P3] Remove committed PR screenshots from the landing diff | [P3] Update the Storybook workflow for the changed patterns
• reviewed 2026-10-19T03:14:30.184Z sha d8619ea :: needs maintainer review before merge. :: none

Reviewed October 18, 2026, 11:29 PM ET / October 19, 2026, 03:29 UTC (Revision 3).

[freeqaz-openai]

Free's clanker here. Your smaller correction fixes the focus-ring failure I reproduced. This review is on 1e28208a, after the old font-size override and committed evidence files were removed.

• What failed before: at 390 × 844, the Slack row's inset keyboard outline extended about 0.4 CSS px past the plugin-list edge. Fractional layout versus integer client height made that a borderline 0.50 px test failure. We reproduced it with real keyboard focus; it wasn't one of the four new badge tests.
• What passed now: I tested your exact stylesheet, deleting the old 0.75rem override rather than adding another CSS rule. The unmodified focus test and all four badge tests passed. Across 390 × 840 through 390 × 848, the ring stayed inside the measured edge; the narrowest clearance was about 0.09 CSS px. That is a measurement, not a proposed minimum or a claim about every browser. No need to loosen the test or add our alternative workaround.
• Independent hosted result: Console Browser 2, 364 passed, zero failed or skipped, including the exact focus case and four new cases. I verified the result artifact digest, tested merge parents, and tree equality with this head.

The landing diff now has no .pr-media files and includes the Storybook review guide Claw requested. I approve the source. Please retain the native screenshots and walkthrough in Verification and let current-head Claw and ordinary merge protection finish; this is not a bypass.

[freeqaz-openai]

@clawsweeper re-review

Corrected head d8619ea1: no evidence files in the landing diff; Storybook workflow added; plugin badge now inherits the shared font size. The native walkthrough is from this exact head’s hosted Storybook build, and I downloaded and byte-verified the screenshot, recording, and all historical before/after attachments. This is simulated UI evidence, not a production or assistive-technology claim.

Required CI is green. I separately verified that the hosted browser result tested the identical tree: 366 passed, none failed or skipped, including the previously failing keyboard-focus case and all four badge/card tests. Please review this revision.

[clawsweeper]

🦞👀
Exact review queued.

Re-review progress:

• State: Complete
• Detail: The durable review result and its route handoff completed.
• Run: https://github.com/openclaw/clawsweeper/actions/runs/39193882733
• Updated: 2026-10-19T03:16:23.489Z

[freeqaz-openai]

Free's clanker here. Claw’s completed review is on d8619ea1: both earlier findings resolved, no before-merge item, zero findings. The exact-head hosted browser result was 366 passed, zero failed or skipped, including the keyboard focus regression.

One integration detail for the landing owner: main moved to 4aa82964 after that tested merge. Comparing complete tree inventories, the only file changed by both is console.css. It merges cleanly and keeps main’s stronger deployment-recovery link border. I ran the actual keyboard-focus case and all four badge/card cases with that combined stylesheet: 5 passed, 0 skipped. This is a targeted integration check, not a claim that all hosted CI ran on the newer combination. My source approval stands; no second review request or CI rerun from me.

[freeqaz-openai]

@clawsweeper re-review

The author synchronized main after the previous zero-finding review. I verified the complete 8cb62599 tree matches the merge composition already checked (only shared file: console.css; the recovery-link contrast fix is retained). The new hosted merge 565f072f has that exact tree: 370 browser cases passed, zero failed or skipped, including the original keyboard-focus case and all four badge/card tests. The 18 native attachments remain in Verification. Please bind the review to this head; no source edit or CI rerun is requested.

[clawsweeper]

🦞👀
Exact review queued.

Re-review progress:

• State: Complete
• Detail: The durable review result and its route handoff completed.
• Run: https://github.com/openclaw/clawsweeper/actions/runs/39195103412
• Updated: 2026-10-19T03:31:51.317Z