feat(console): dialog and drawer pattern by freeqaz · Pull Request #2879 · openclaw/openclaw-enterprise

freeqaz · 2026-10-18T21:59:27Z

Problem

The console has four dialog styles (UX audit 2.8, findings 1915 and 1926):

Stop and Delete: a 30 rem box with a pink edge and the small shadow.
Plugins: 72 rem with its own 12 px radius.
The Slack channel drawer: square, flush to the right edge and only as tall as its content.
The Create Secret dialog: reuses the drawer, so at 1440 it is a mid-height card stuck to the right edge.

The backdrop is defined in four places. On a phone there are three behaviours: the channel drawer becomes a bottom sheet, the plugin dialog a full card, and Stop/Delete a centred box. The Secret and Slack sheets are clamped to 341 px and pinned left by the browser's dialog:modal max-width (finding 1915), and the drawer's Close button becomes a full-width bar under the title.

Change

UX plan C6, following the Dialog row of the design language.

.dialog (console.css): --radius-lg, --color-border, --shadow-2, --space-6 padding, width: min(32rem, 100vw - 2 * --space-4), one ::backdrop (--color-overlay), and one --duration-base open animation (dialog-open; each variant sets only its starting offset). Reduced motion turns the animation off (the duration token is already 1 ms there; the rule sets animation: none).
- .dialog--wide: the plugin workspace, 72 x 52 rem.
- .dialog--drawer: Slack and the other channels. It floats at the right edge, full height, and slides in from the right.
- Sizes use % of the modal's viewport box, not 100vw, so a classic scrollbar gutter does not eat the side gap (finding 1520).
- At 760 px and below every dialog is a bottom sheet: full width (max-width: 100% lifts the browser clamp), as tall as its content up to the viewport less --space-8, rounded top corners, square bottom corners, --space-4 padding. The design language's P6 rule (dialogs become sheets under 760 px) sets the breakpoint, and the channel drawer already switched there.
.dialog-actions: Cancel first (left), the confirming action last (right). Used by Stop, Slack and Secret.
Adopted by Stop (stop.mjs), Delete (deletion.mjs), Plugins (plugin-fields.mjs, where that dialog is built), the channel drawer (channels/shared-ui.mjs) and Create Secret (secret-picker.mjs, now a centred .dialog instead of a drawer). The old class names stay on the elements because tests, stories and open PRs select them. Only their chrome rules are gone: the pink Stop/Delete edge, the plugin dialog's size/border/radius/shadow/backdrop, and .channel-dialog's size/margin/shadow/backdrop and phone sheet.
The drawer header keeps its title and Close on one row on a phone (channels.css).
The Secret dialog's .form-field and empty .error margins no longer add to the form's grid gap. That gap left about 60 px holes between Name and Value. The empty alert keeps its live region and only loses its margin.
Unchanged:
- Escape and backdrop rules: Stop and Delete still ignore the backdrop, and every pending guard is the same.
- Focus on open: Cancel in Stop and Delete, Search in Plugins, the first control in the drawer, Name in Secret.
- Focus return to the opener.
- Copy.

Follow-ups, left out for zero new conflict hunks:

deletion.mjs keeps the form-actions class instead of dialog-actions, because feat(console): stop and delete Agents from the Agents list #2524 changes the line directly above it. .dialog > .form-actions gives it the same layout until it can be renamed.
Finding 1915's other parts (ignore the backdrop when a value is typed; one dismiss control instead of Close + Cancel) change Escape/backdrop behaviour, which this row keeps as is.

Verification

New tests/browser/console-dialogs.test.mjs (mapped in checks-browser-2.json) opens Stop, Delete, Plugins, Slack and Create Secret at 1440 x 900 and at 390 x 844. It reads each dialog after its open animation has finished (getAnimations().finished, no timers) and checks:
- at 1440, all five have equal computed backdrop colour, box shadow, top radii and border; none is a sheet; each opens with dialog-open 0.2s; the drawer sits 16 px from the right, top and bottom edges, and the others are centred;
- at 390, each is a sheet: left 0, right edge at the fixed-position area's edge, bottom on the viewport bottom, rounded top and square bottom corners; Stop and Delete stay content-height;
- focus moves into the dialog on open, Escape closes it, and focus returns to the control that opened it;
- resizing an open dialog from 1440 to 390 does not restart its animation;
- under reducedMotion: reduce the animation is none.
On main (the 7 product files checked out from origin/main, same test): fails. The animation is none 0s and the chrome differs (Stop's pink border and --shadow-1 vs the others). The focus-return checks already pass on main: the rule existed, and this test now pins it for all five dialogs.
On this branch: pass. 20/20 at 2 CPUs (taskset -c 22,23).
Existing dialog tests, unedited: console-agent-channels, console-agent-detail, console-agent-detail-2, console-agent-plugin-approvers, console-agent-plugin-refusals, console-agents, console-agents-2, console-repository-dedicated, console-runtime-credentials = 192/192 pass. After the channels.css change I re-ran the channel and Secret files: 70/70.
tests/conformance/console-design-tokens.test.mjs: pass (every var() is defined). node scripts/ci/run-tests.mjs audit: no issues. prettier and eslint clean on touched files.
Automated review (ClawSweeper on cd5ce0c40):
- It asked for matching Storybook stories and workflow instructions: added in 7fe4fb5a3 (see Media).
- It asked for a walkthrough covering keyboard dismissal and reduced motion: added (see Media).
- It asked for the Console Browser 2 failure to be classified: a real regression, fixed below.
Internal review: approve with nits. Applied:
- one animation name, so a dialog open across a breakpoint change does not replay its slide;
- phone sheets start 32 px low with a fade instead of a full slide, which shrinks the window where a quick second tap lands on the backdrop;
- % instead of 100vw widths, so a classic scrollbar gutter no longer eats the side gap;
- Delete's form-actions gets the .dialog-actions layout through .dialog > .form-actions;
- the Secret spacing moved next to the pattern;
- the test now checks the drawer geometry and the exact animation.
CI on the first head (cd5ce0c40) failed Console Browser 2 in console-agent-presets.test.mjs:602: "Catalog pagination must be reachable without scrolling the whole dialog". That test resizes an open plugin dialog to 390 px. The breakpoint switched the animation name, which replayed the sheet slide, so Next page was still off screen. f0536a0d1 uses one animation name. That test and the new "no replay on resize" assertion pass.
After the fix and the merge of main (refactor(console): one focus ring and one disabled style #2876), every browser file of checks-browser and checks-browser-2 that touches the console passes locally: 579/579 in 24 files, then 112/112 for the dialog, focus-ring, presets, channels and detail-2 files after the merge. Main merged again for fix(console): repository access copy without a Repo Driver #2874 and fix(console): Create Agent harness outcome copy and workspace missing-file copy #2875 (no overlap with these files).
Open PRs: I ran a 3-way git merge-tree of this head and of origin/main against feat(console): tabs with tablist semantics #2878, feat(console): responsive table rows for the Agents list #2877, 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, feat(console): stop and delete Agents from the Agents list #2524, Add OCE policy simulation and tester for network and plugin actions #2445, feat(auth): sign people in to occ with a device code (rfc-0019) #1619 and feat: assign configured OpenClaw roles to Agent users #906. Every pair has the same conflicted files and hunk counts (0 for feat(console): tabs with tablist semantics #2878, feat(console): responsive table rows for the Agents list #2877, fix(console): keep a focused workspace caret on reread and quiet plugin live regions #2860 and feat(console): show the authorized native Gateway people roster #2596; the existing conflicts of feat: add per-agent sandbox network policies and denial review #2599, feat(console): stop and delete Agents from the Agents list #2524, Add OCE policy simulation and tester for network and plugin actions #2445, feat(auth): sign people in to occ with a device code (rfc-0019) #1619 and feat: assign configured OpenClaw roles to Agent users #906 are unchanged). This PR adds no new conflicted file and no new hunk.

Media

Before (main) on the left, this PR on the right. The 1440 pairs are scaled to half size. Committed in db45acae9 and deleted again before the squash. The screenshots come from the new browser test against the real console: tests/browser/console-dialogs.test.mjs with its artifact directory set. Storybook's existing stopConfirm and delete stories pick up the same classes.

Stop:
Delete:
Plugins:
Slack drawer:
Create Secret:

Walkthrough recordings, committed in 7c6697d24 and deleted again: Storybook fixtures with simulated data, built from this branch's console source with prepare-assets.mjs. Each one opens Stop, Delete, Plugins, the Slack drawer and Create Secret (nested over the drawer), then closes each with Escape. Focus returns to the opener every time (Stop Agent, Delete Agent, Configure plugins, Edit Slack).

1440 walkthrough
390 walkthrough (bottom sheets)
Reduced motion: prefers-reduced-motion: reduce, Stop and the Slack drawer appear without the animation (computed animation-name: none).

Storybook: new Components / Dialogs stories (Stop confirmation, Delete confirmation, Plugins (wide), Slack editor (drawer) and Create Secret, each also as a 390 px "(phone)" story) reuse the existing scenarios. New scripts/console-storybook/dialog-pattern-workflow.md walks the chrome, focus, Escape and backdrop rules, phone sheets and reduced motion. I did not run the full Storybook build: the worktree has no Storybook dependencies. I prepared the fixture assets with prepare-assets.mjs and drove frame.html for the recordings above.

Risks

Visible change:
- Stop and Delete lose the pink edge and get the larger dialog shadow.
- The channel drawer floats with rounded corners and spans the full height.
- Create Secret is a centred dialog instead of a right-side card.
- Between 521 and 760 px, Stop, Delete and Plugins are bottom sheets.
The open animation moves the box 8 px (24 px for the drawer, 32 px for phone sheets) and fades it in over 200 ms. Backdrop dismissal reads the dialog's moving rectangle on pointerdown and click, so a press and release both on the backdrop strip next to the arriving box during those 200 ms closes it, just as it would after it settles. Stop and Delete never close on a backdrop click.
CSS and class names only: no API, state or copy change.

One .dialog chrome (radius, border, shadow, backdrop, open motion) for the Stop, Delete, Plugins, Slack and Secret dialogs, with --wide and --drawer variants and a bottom sheet under 760px.

…urn focus Sheets hug their content (height fit-content, not auto, which stretched the Stop sheet to full height under the UA inset).

…ecret dialog spacing Close no longer becomes a full-width bar under the title at 760px and below, and the Secret dialog's fields no longer add page margins to the form gap.

clawsweeper · 2026-10-18T21:59:31Z

🦞👀
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.

…ot replay it Resizing an open plugin dialog into the phone breakpoint switched the animation name and replayed the sheet slide, so console-agent-presets found Next page off screen. Every variant now runs dialog-open with a per-variant starting offset; phone sheets start 32px low with a fade instead of a full slide. Widths use % of the modal's viewport box rather than 100vw, the Delete dialog's form-actions match dialog-actions, and the Secret dialog spacing moves next to the pattern. The test checks the drawer geometry, the exact animation, and no replay on resize.

clawsweeper · 2026-10-18T22:14:07Z

Codex review: needs changes before merge.

What this changes

This PR gives five console dialogs shared styling, opening animations, and bottom-sheet layouts on narrow screens.

Example: Open Create Secret at a 390 × 844 viewport.

Before: The reused channel drawer is constrained by the browser's modal width limit.
After: The dialog uses a full-width bottom sheet with rounded top corners.

Review scores

Measure	Result	What it means
Overall readiness	🧂 unranked krab (1/6)	The production change is focused and no P0–P2 defect was identified, but required visual proof does not demonstrate this change.
Proof confidence	🧂 unranked krab (1/6)	Real behavior proof is not required for maintainer- or bot-authored pull requests.
Patch quality	🐚 platinum hermit (4/6)	1 actionable review finding remain.

Product

Kind: Feature · Worth it: Yes · Fix scope: Complete
User problem: Dialog placement, appearance, and phone layouts vary across otherwise related console actions.
Reason: The shared pattern addresses visible inconsistency with limited production machinery, and the collaborator-authored PR establishes owner direction.

Merge readiness

⛔ Needs changes before merge - 2 items remain

Keep this PR open: it consolidates inconsistent console dialogs with maintainer-approved direction, but the required Storybook updates remain incomplete and the failed browser check needs diagnosis.

Priority: P3
Reviewed head: cd5ce0c409a6d002af2682e687423e0e09a8e201

Before merge

Update the matching Storybook scenarios and workflow instructions (P3) - This changes five dialogs into phone sheets and changes the desktop Secret placement, but no file under scripts/console-storybook changes. AGENTS.md explicitly requires matching stories, scenarios, and workflow instructions in the same UI change. Extend the existing dialog stories or their workflow instructions to cover desktop and phone layouts, focus/dismissal, and reduced motion so these changed states have a maintained visual review path.
Complete next step - Inspect the Console Browser 2 failure for the reviewed head and classify its cause; the available annotation is insufficient and the log download is blocked in this review environment.

Findings

[P3] Update the matching Storybook scenarios and workflow instructions — apps/controller/src/console/console.css:1525-1528

Tests

Missing end-to-end proof: Provide final-revision desktop and phone screenshots plus a short walkthrough of the five dialogs, including keyboard dismissal and reduced motion; the body reports a base-fail/head-pass comparison, but no reviewable runtime artifact demonstrates it.

Agent review details

How this fits together

The controller serves console JavaScript and styles; existing Agent, channel, and Secret controls construct native dialogs whose layout responds to viewport size and motion preferences.

flowchart TB
  User[Console user] --> Controls[Existing console controls]
  Controls --> Dialogs[Native modal dialogs]
  Styles[Shared dialog CSS] --> Dialogs
  Viewport[Viewport and motion preferences] --> Styles
  Dialogs --> Actions[Existing guarded actions]

Technical review

Best possible solution:

Retain the shared CSS owner and existing action guards, complete the Storybook coverage, and establish a clean browser-check result.

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

Current main has separate Stop/Delete, plugin, and channel dialog sizing and chrome; source inspection confirms the inconsistency, while the reported browser runs were not independently executed.

Is this the best way to solve the issue?

Consolidating presentation in the existing console stylesheet is a focused solution that preserves the existing lifecycle and security owners.

Full review comments:

[P3] Update the matching Storybook scenarios and workflow instructions — apps/controller/src/console/console.css:1525-1528
This changes five dialogs into phone sheets and changes the desktop Secret placement, but no file under scripts/console-storybook changes. AGENTS.md explicitly requires matching stories, scenarios, and workflow instructions in the same UI change. Extend the existing dialog stories or their workflow instructions to cover desktop and phone layouts, focus/dismissal, and reduced motion so these changed states have a maintained visual review path.
Confidence: 0.99

Overall correctness: patch is correct
Overall confidence: 0.86

AGENTS.md: found and applied where relevant.

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

Provenance checked

Stop/Delete and plugin dialog chrome changes intended behavior with a stated reason (feat(console): add Agent stop control and refine supported UI #309: Stop and deletion confirmations supported guarded lifecycle actions; subsequent styling aligned console presentation with OpenClaw.)
Channel drawer geometry and form padding changes intended behavior with a stated reason (3397e47: Channel editing introduced a right-aligned drawer with form-owned padding; local history and base blobs confirm that ownership.)
Secret picker dialog keeps the original intent (fix(console): use Secret pickers when creating new revisions #420: The shared Secret picker replaced manual references while preserving explicit bindings and grant handling; this PR changes its presentation without changing that workflow.)
Browser lane registration keeps the original intent (ci(tests): run Console Browser files concurrently #1399: Browser files run concurrently with explicit registration; the new file follows the existing lane structure.)

Testing

Proof path: in-process harness.

Security

None.

Evidence

What I checked:

Introduced change: The pinned diff consolidates dialog chrome and changes class names without changing API requests, authorization, cancellation guards, or persisted formats. (apps/controller/src/console/console.css:1466, cd5ce0c409a6)
Applicable repository policy: The complete root AGENTS.md requires matching Storybook stories, scenarios, and workflow instructions to change with console UI, plus screenshots and a short recording; no nested AGENTS.md files were found under the touched trees, and no maintainer-notes directory exists. (AGENTS.md, cd5ce0c409a6)
Browser coverage: The new browser case checks desktop chrome, phone geometry, focus return, Escape, and reduced motion; its plugin scenario mounts the real renderer directly rather than opening it through Agent creation. (tests/browser/console-dialogs.test.mjs:117, cd5ce0c409a6)
Discussion and visual evidence: The full PR body promises later media, and both discussion comments are bot status messages. All four prepared images were inspected: they show Agent-sharing screens rather than the changed dialogs; the manifest contains no video. (cd5ce0c409a6)
Unattributed browser failure: Console Browser 2 failed for the reviewed head in https://github.com/openclaw/openclaw-enterprise/actions/runs/39170240426/job/117801633489. Its annotation reports only exit code 1; downloading the job log was blocked at productionresultssa6.blob.core.windows.net, so causation remains unknown. (cd5ce0c409a6)
Prior styling intent: refactor(console): replace raw colour and shadow literals with tokens #2873 deliberately adopted the shared palette and shadow tokens; this PR preserves those tokens while unifying dialog ownership. (apps/controller/src/console/console.css:1474, 39dead53499d)

Likely related people:

Free Wortley: Raw commit fe9053a adds apps/controller/src/console/agents/stop.mjs:273 relative to its recorded parents. This identifies author metadata, not feature responsibility or a PR merger. (role: source-line author; confidence: high; commits: fe9053a1f604; files: apps/controller/src/console/agents/stop.mjs)
stevenlee-oai: Raw commit fbbc0e4 adds apps/controller/src/console/agents/plugin-fields.mjs:124 relative to its recorded parents. This identifies author metadata, not feature responsibility or a PR merger. (role: source-line author; confidence: high; commits: fbbc0e42aa89; files: apps/controller/src/console/agents/plugin-fields.mjs)

Review metrics

Metric	Value	Why it matters
Change distribution	Production +104/-52; browser coverage +210; CI registration +4	Most additions exercise layout and interaction; production changes consolidate existing presentation without adding a runtime abstraction.

Labels

Label changes:

add P3: This is console presentation and responsive-layout polish with unchanged resource operations.
add rating: 🧂 unranked krab: Overall readiness is 🧂 unranked krab; proof is 🧂 unranked krab and patch quality is 🐚 platinum hermit.
add status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action.

Label justifications:

P3: This is console presentation and responsive-layout polish with unchanged resource operations.
rating: 🧂 unranked krab: Overall readiness is 🧂 unranked krab; proof is 🧂 unranked krab and patch quality is 🐚 platinum hermit.
status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action.

Rank-up moves

Optional improvements that raise the rating; they are not merge blockers.

Attach desktop and phone screenshots and a short recording showing the final dialog layouts and interactions.

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, 6:12 PM ET / 22:12 UTC.

Components/Dialogs frames the Stop, Delete, Plugins, Slack drawer and Create Secret scenarios at desktop and phone width, and dialog-pattern-workflow.md walks the chrome, focus, dismissal, sheets and reduced motion.

freeqaz added 3 commits October 18, 2026 21:47

feat(console): dialog and drawer pattern

8b2a40a

One .dialog chrome (radius, border, shadow, backdrop, open motion) for the Stop, Delete, Plugins, Slack and Secret dialogs, with --wide and --drawer variants and a bottom sheet under 760px.

test(console): dialogs share chrome, become sheets on a phone and ret…

96aaf74

…urn focus Sheets hug their content (height fit-content, not auto, which stretched the Stop sheet to full height under the UA inset).

fix(console): keep the drawer header on one row on a phone; tighten S…

cd5ce0c

…ecret dialog spacing Close no longer becomes a full-width bar under the title at 760px and below, and the Secret dialog's fields no longer add page margins to the form gap.

freeqaz requested a review from a team as a code owner October 18, 2026 21:59

freeqaz had a problem deploying to integration-qa-pr October 18, 2026 21:59 — with GitHub Actions Error

freeqaz mentioned this pull request Oct 18, 2026

feat(console): tabs with tablist semantics #2878

Merged

freeqaz added 4 commits October 18, 2026 22:15

Merge remote-tracking branch 'origin/main' into ux-c6-dialog

ad47c16

docs(pr): add #2879 verification media

db45aca

docs(pr): drop #2879 verification media before the squash

181dd7d

Merge remote-tracking branch 'origin/main' into ux-c6-dialog

44bef33

freeqaz had a problem deploying to integration-qa-pr October 18, 2026 22:18 — with GitHub Actions Error

freeqaz added 4 commits October 18, 2026 22:25

docs(storybook): dialog pattern stories and review workflow

7fe4fb5

Components/Dialogs frames the Stop, Delete, Plugins, Slack drawer and Create Secret scenarios at desktop and phone width, and dialog-pattern-workflow.md walks the chrome, focus, dismissal, sheets and reduced motion.

docs(pr): add #2879 walkthrough recordings

7c6697d

docs(pr): drop #2879 recordings before the squash

f78b9a1

Merge remote-tracking branch 'origin/main' into ux-c6-dialog

522cf99

freeqaz had a problem deploying to integration-qa-pr October 18, 2026 22:26 — with GitHub Actions Error

Merge remote-tracking branch 'origin/main' into ux-c6-dialog

005c594

freeqaz temporarily deployed to integration-qa-pr October 18, 2026 22:39 — with GitHub Actions Inactive

freeqaz had a problem deploying to integration-qa-pr October 18, 2026 22:39 — with GitHub Actions Failure

freeqaz mentioned this pull request Oct 18, 2026

fix(console): JSON error positions for trailing text, BOM and astral characters #2882

Merged

freeqaz merged commit 7c6e869 into main Oct 18, 2026
43 of 44 checks passed

freeqaz deleted the ux-c6-dialog branch October 18, 2026 22:51

freeqaz mentioned this pull request Oct 18, 2026

fix(console): keep the Create draft after a failed Create and across a failed Namespace read #2886

Merged

freeqaz mentioned this pull request Oct 23, 2026

fix(console): give the Delete Agent dialog the shared dialog action row #3364

Merged

Navigation Menu

Repository navigation

feat(console): dialog and drawer pattern - #2879

feat(console): dialog and drawer pattern#2879
freeqaz merged 13 commits into
mainfrom
ux-c6-dialog

freeqaz commented Oct 18, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented Oct 18, 2026 •

edited

Loading

Uh oh!

clawsweeper Bot commented Oct 18, 2026

How this fits together

Technical review

Provenance checked

Testing

Security

Evidence

Review metrics

Labels

Rank-up moves

Rating scale

Workflow

Uh oh!

Uh oh!

This branch had an error being deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

freeqaz commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Change

Verification

Media

Risks

Uh oh!

clawsweeper Bot commented Oct 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ClawSweeper review complete

Uh oh!

clawsweeper Bot commented Oct 18, 2026

What this changes

Review scores

Product

Merge readiness

Before merge

Findings

Tests

How this fits together

Technical review

Provenance checked

Testing

Security

Evidence

Review metrics

Labels

Rank-up moves

Rating scale

Workflow

Uh oh!

Uh oh!

This branch had an error being deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

freeqaz commented Oct 18, 2026 •

edited

Loading

clawsweeper Bot commented Oct 18, 2026 •

edited

Loading