fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar by steipete · Pull Request #104380 · openclaw/openclaw

steipete · 2026-07-11T10:01:31Z

What Problem This Solves

Resolves a problem where the Mac app's dashboard window shows the Control UI's floating sidebar-expand button as a bordered box floating directly under the traffic-light window controls whenever the navigation sidebar is collapsed. It crowds the window controls, uses web-style chrome (border, panel background) that clashes with the native titlebar, and sits in a different row than the native back/forward buttons introduced in #104328.

Why This Change Was Made

The dashboard window already hosts native back/forward controls in a leading titlebar accessory; the natural macOS home for a sidebar toggle is that same row (Safari ordering: sidebar toggle, then history controls). A web-rendered control cannot live in that row because the AppKit drag regions over the titlebar strip swallow its clicks, so the toggle becomes a native NSButton that bridges into the Control UI:

DashboardWindowController adds a borderless sidebar.leading button ahead of back/forward, gives the whole accessory group slightly wider insets/spacing, and dispatches openclaw:native-toggle-sidebar into the page.
The Control UI (app-host.ts) listens for that event and runs the existing toggleNavigationSurface() path (same as ⌘B).
The injected native-chrome script now also adds an openclaw-native-nav class; layout.css visually retires the floating web expand button under that class using a skip-link pattern (opacity: 0, revealed on :focus-visible) rather than display: none, so the collapse focus-restoration path in app-host.ts and keyboard/screen-reader access to an in-page expand control keep working.
Version skew stays graceful in both directions: older apps never add the class so the web fallback button keeps working, and older web bundles ignore the class and keep their own floating control (the native button's event is simply unhandled there).

User Impact

Mac app users get a native, always-available sidebar toggle next to the back/forward buttons — matching Safari/Notes conventions — instead of a bordered web button crowding the traffic lights. Collapsing and expanding the navigation sidebar now works from the titlebar in both directions. Keyboard and screen-reader users keep an in-page expand control. Browser users see no change.

Evidence

Offscreen render of the new titlebar (traffic lights → sidebar toggle → back/forward, borderless, evenly spaced): https://artifacts.openclaw.ai/pr-macos-titlebar-sidebar-20260711/titlebar-after.png
swift test --package-path apps/macos --filter DashboardWindowSmokeTests: 25/25 pass locally (macOS-only surface), including the extended dashboard titlebar hosts sidebar and history controls test asserting Safari ordering, borderless style, enabled state, a resolvable SF Symbol image, and a frame wide enough for all three controls, plus the chrome-script test asserting the new openclaw-native-nav capability class.
./scripts/lint-swift.sh macos and ./scripts/format-swift.sh macos: clean.
Testbox (Blacksmith via Crabbox, tbx_01kx88fctssqntsv9ggta8rk9x): pnpm check:changed plus pnpm test ui/src/app/app-host.test.ts — exit 0, 9/9 tests pass; CSS follow-up validated with a path-scoped pnpm check:changed -- ui/src/styles/layout.css on the same lease.
New web unit test: native toggle event flips navCollapsed both ways through the existing navigation-surface path.
Codex autoreview (gpt-5.6-sol, xhigh): initial run flagged the display: none focus-restoration regression; fixed via the skip-link pattern above and re-reviewed clean.

…the titlebar The Control UI's floating sidebar-expand button rendered as a bordered web control crowding the traffic lights in the dashboard window. The toggle now lives as a native borderless button in the leading titlebar accessory ahead of back/forward (Safari ordering) and bridges to the web UI via the openclaw:native-toggle-sidebar event; the injected chrome script advertises the capability with an openclaw-native-nav class so the web control retires itself visually while staying keyboard/screen-reader reachable.

…rol UI guide

clawsweeper · 2026-07-11T10:14:44Z

Codex review: needs maintainer review before merge. Reviewed July 11, 2026, 6:13 AM ET / 10:13 UTC.

Summary
This PR adds a native macOS titlebar sidebar toggle before back/forward, bridges it to the existing responsive Control UI navigation toggle, retains a focusable web fallback for accessibility and version skew, and updates tests and docs.

PR surface: Source +25, Tests +26, Docs 0, Other +35. Total +86 across 6 files.

Reproducibility: yes. Current source places the collapsed web expand control in the macOS titlebar-clearance area, and the supplied native render directly demonstrates the corrected placement beside the history controls.

Review metrics: none identified.

Merge readiness
Overall: 🦞 diamond lobster
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦞 diamond lobster
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Risk before merge

[P1] The PR carries the protected maintainer label, so repository policy requires explicit maintainer handling even though the patch, proof, and exact-head checks are clean.
[P1] GitHub returned mergeability as UNKNOWN during this review; the final landing action should wait for GitHub to resolve the current head as mergeable.

Maintainer options:

Decide the mitigation before merge
Accept the native titlebar placement as the macOS-specific chrome, retain the current single Control UI navigation-state path and accessible mixed-version fallback, and land only after the protected-label owner confirms the direction and GitHub reports the exact head mergeable.
Pause or close
Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

[P2] A human owner should confirm the protected titlebar direction and wait for GitHub mergeability; no code repair is currently indicated.

Maintainer decision needed

Question: Should the protected macOS/web UI change be accepted as the intended dashboard titlebar behavior and allowed to land once GitHub confirms the exact head is mergeable?
Rationale: Code, focused tests, exact-head checks, and native visual proof support the implementation, but the maintainer label explicitly reserves final acceptance for a human owner.
Likely owner: steipete — The strongest merged-history signal is the immediately preceding titlebar-navigation work on the same controller and accessory surface.
Options:
- Approve the native titlebar behavior (recommended): Keep the patch as written and land it after GitHub resolves the reviewed head as mergeable.
- Hold for alternate chrome direction: Pause the PR only if the product owner wants the sidebar action placed or exposed differently in the macOS dashboard.

Security
Cleared: The patch changes only native/UI code, tests, CSS, and docs and introduces no dependency, workflow, permission, secret, package-resolution, publishing, or downloaded-code concern.

Review details

Best possible solution:

Accept the native titlebar placement as the macOS-specific chrome, retain the current single Control UI navigation-state path and accessible mixed-version fallback, and land only after the protected-label owner confirms the direction and GitHub reports the exact head mergeable.

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

Yes. Current source places the collapsed web expand control in the macOS titlebar-clearance area, and the supplied native render directly demonstrates the corrected placement beside the history controls.

Is this the best way to solve the issue?

Yes. The patch uses the correct owner boundary—AppKit owns native titlebar chrome while the Control UI remains the sole navigation-state owner—and avoids a duplicate state or compatibility path.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against cbc84767bd7e.

Label changes

Label changes:

add P3: This is a focused macOS titlebar and navigation-chrome defect with limited platform-specific blast radius and a straightforward fallback.
add proof: sufficient: Contributor real behavior proof is sufficient. The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.
add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.
add rating: 🦞 diamond lobster: Overall readiness is 🦞 diamond lobster; proof is 🦞 diamond lobster and patch quality is 🦞 diamond lobster.
add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.

Label justifications:

P3: This is a focused macOS titlebar and navigation-chrome defect with limited platform-specific blast radius and a straightforward fallback.
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. Sufficient (screenshot): The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.
proof: sufficient: Contributor real behavior proof is sufficient. The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.
proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The inspected native render directly shows the corrected titlebar ordering and spacing, supplemented by reported macOS interaction tests and green exact-head native/UI checks.

Evidence reviewed

PR surface:

Source +25, Tests +26, Docs 0, Other +35. Total +86 across 6 files.

View PR surface stats

Area	Files	Added	Removed	Net
Source	2	25	0	+25
Tests	1	26	0	+26
Docs	1	1	1	0
Config	0	0	0	0
Generated	0	0	0	0
Other	2	46	11	+35
Total	6	98	12	+86

What I checked:

Native titlebar implementation: The macOS window controller adds a borderless sidebar.leading button to the existing leading titlebar accessory and dispatches a narrow openclaw:native-toggle-sidebar event into the embedded page. (apps/macos/Sources/OpenClaw/DashboardWindowController.swift:467, 15a316a115e9)
Canonical navigation owner: The new web event handler calls toggleNavigationSurface(), preserving the existing desktop-collapse, mobile-drawer, settings, transient-menu, persistence, and focus behavior rather than creating parallel state logic. (ui/src/app/app-host.ts:569, 15a316a115e9)
Accessible mixed-version fallback: The native capability class makes the duplicate web control visually transparent and non-clickable, but :focus-visible restores it; older app versions omit the class and retain the normal floating control. (ui/src/styles/layout.css:109, 15a316a115e9)
Focused regression coverage: Native tests assert symbol resolution, borderless styling, enabled state, Safari ordering, sufficient accessory width, and capability-class injection; the UI test exercises toggling in both directions through the navigation context. (apps/macos/Tests/OpenClawIPCTests/DashboardWindowSmokeTests.swift:465, 15a316a115e9)
Real visual proof: The linked 1800×440 AppKit render visibly shows traffic lights followed by the sidebar toggle and then back/forward controls, with borderless chrome and no overlap or floating web button. (15a316a115e9)
Exact-head validation: Live GitHub status reports successful macOS Swift, macOS Node, lint, production types, test types, docs, dependency, boundary, and QA smoke checks on the reviewed head. (15a316a115e9)

Likely related people:

steipete: Merged commit 518c582 added the native dashboard history controls and shortcuts on the same titlebar surface, making this the strongest routing signal for the intended macOS chrome. (role: introduced adjacent titlebar behavior; confidence: high; commits: 518c5823d80e; files: apps/macos/Sources/OpenClaw/DashboardWindowController.swift, apps/macos/Tests/OpenClawIPCTests/DashboardWindowSmokeTests.swift)
Vincent Koc: Current-main blame attributes the responsive navigation, drawer, and focus-restoration path reused by the new native event to Vincent Koc. (role: recent navigation-shell contributor; confidence: medium; commits: 50429157e3; files: ui/src/app/app-host.ts)

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

steipete · 2026-07-11T10:19:37Z

Merged via squash.

Prepared head SHA: 15a316a115e919c7a8a539f375ccead8f7701622
Landed commit: df16372af3e13a94ee9e6ada12a0afcf23b7cbfe

* origin/main: fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar (#104380)

…the titlebar (openclaw#104380) * fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar The Control UI's floating sidebar-expand button rendered as a bordered web control crowding the traffic lights in the dashboard window. The toggle now lives as a native borderless button in the leading titlebar accessory ahead of back/forward (Safari ordering) and bridges to the web UI via the openclaw:native-toggle-sidebar event; the injected chrome script advertises the capability with an openclaw-native-nav class so the web control retires itself visually while staying keyboard/screen-reader reachable. * docs: note the macOS app's native titlebar sidebar toggle in the Control UI guide

* origin/main: fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar (openclaw#104380)

openclaw-barnacle Bot added app: macos App: macos app: web-ui App: web-ui size: S maintainer Maintainer-authored PR labels Jul 11, 2026

docs: note the macOS app's native titlebar sidebar toggle in the Cont…

15a316a

…rol UI guide

openclaw-barnacle Bot added the docs Improvements or additions to documentation label Jul 11, 2026

steipete merged commit df16372 into main Jul 11, 2026
118 of 128 checks passed

steipete deleted the claude/mac-sidebar-button-layout-d5ec47 branch July 11, 2026 10:19

vincentkoc added a commit that referenced this pull request Jul 11, 2026

Merge remote-tracking branch 'origin/main'

5196d06

* origin/main: fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar (#104380)

github-actions Bot mentioned this pull request Jul 11, 2026

📡 Upstream Digest — 2026-07-11 10:56 UTC curtismercier/openclaw-mods#1260

Open

steipete mentioned this pull request Jul 11, 2026

fix(macos): dashboard titlebar buttons sit too close together #104572

Merged

github-actions Bot pushed a commit to Desicool/openclaw that referenced this pull request Jul 12, 2026

Merge remote-tracking branch 'origin/main'

63847d4

* origin/main: fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar (openclaw#104380)

clawsweeper Bot mentioned this pull request Jul 12, 2026

[Feature]: Mac app titlebar buttons should follow sidebar state (search + new session when collapsed) #105129

Closed

This was referenced Jul 13, 2026

Mac app: native titlebar buttons fight the web UI (inconsistent highlight state, z-index, duplicated toolbar layout) #105898

Closed

feat(ui): host the macOS dashboard titlebar buttons in the web UI #105902

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar#104380

fix(macos): host the dashboard sidebar toggle beside back/forward in the titlebar#104380
steipete merged 2 commits into
mainfrom
claude/mac-sidebar-button-layout-d5ec47

steipete commented Jul 11, 2026

Uh oh!

clawsweeper Bot commented Jul 11, 2026

Uh oh!

Uh oh!

steipete commented Jul 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

steipete commented Jul 11, 2026

What Problem This Solves

Why This Change Was Made

User Impact

Evidence

Uh oh!

clawsweeper Bot commented Jul 11, 2026

Uh oh!

Uh oh!

steipete commented Jul 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant