Skip to content

fix(ui): unify split-view controls in one toolbar row#102492

Merged
steipete merged 2 commits into
mainfrom
codex/control-ui-unified-split-toolbar
Jul 9, 2026
Merged

fix(ui): unify split-view controls in one toolbar row#102492
steipete merged 2 commits into
mainfrom
codex/control-ui-unified-split-toolbar

Conversation

@steipete

@steipete steipete commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Closes #102446

What Problem This Solves

Fixes an issue where split chat stacked pane controls below the global toolbar, leaving users with two bars and redundant breadcrumb hierarchy. The split-view action also lived inside the composer instead of at the page edge.

Why This Change Was Made

Split mode now replaces the breadcrumb content with one shared toolbar row containing every pane's session and pane actions. Classic mode moves the split entry action outside the composer to the bottom-right page corner; narrow layouts keep the existing single-visible-pane behavior.

User Impact

Split chat uses less vertical chrome and keeps both pane control groups aligned in one row. Users can enter split view from the expected bottom-right location, while keyboard focus, persisted session lists, drawer breakpoints, and standalone safe areas remain supported.

Evidence

Before After
Two stacked toolbar rows One shared row for both pane control groups
Before: breadcrumb row stacked above pane controls After: both pane controls unified into the global row

Bottom-right split entry, outside the composer:

Classic chat with split entry at the bottom-right

  • Existing Chrome mock UI: split open, pane activation, close/reopen, and refresh persistence verified visually.
  • Behavior contract: 5 passed, 0 failed, including both pane groups in one row and bottom-right classic entry.
  • Testbox tbx_01kx2q634fgpfnzdx03w24nssw: 11 focused unit tests and 42 focused UI E2E tests passed.
  • Testbox path-scoped pnpm check:changed: core, core tests, and docs lanes passed.
  • Testbox pnpm build: passed.
  • Fresh autoreview: clean after accepted responsive, safe-area, session-reactivity, and keyboard-focus findings were fixed.

@openclaw-barnacle openclaw-barnacle Bot added docs Improvements or additions to documentation app: web-ui App: web-ui size: L maintainer Maintainer-authored PR labels Jul 9, 2026
@clawsweeper

clawsweeper Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 9, 2026, 3:14 AM ET / 07:14 UTC.

Summary
The branch moves split chat pane session/action controls from per-pane headers into a shared global toolbar row, moves the classic split-view entry button to the page corner, and updates focused UI tests and docs.

PR surface: Source +27, Tests +162, Docs 0. Total +189 across 9 files.

Reproducibility: yes. Current-main source shows the old duplicated split-pane header and composer-owned split entry path, and the PR screenshots show the before/after visual behavior.

Review metrics: none identified.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #102446
Summary: This PR is the candidate implementation for the linked split-toolbar issue and no other canonical replacement PR was found.

Members:

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

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 remaining merge risk is product/UX ownership rather than a concrete code defect: the PR intentionally replaces breadcrumb content with split-pane controls while split mode is active, and the protected maintainer label means that direction should be accepted by a maintainer before landing.

Maintainer options:

  1. Decide the mitigation before merge
    Land this PR after maintainer acceptance of the toolbar direction and exact-head checks, keeping the page-level split toolbar as the canonical owner for split pane controls.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P2] The next action is maintainer review of the protected product/UX direction, not an automated repair; I found no narrow code defect for ClawSweeper to fix.

Maintainer decision needed

  • Question: Should Control UI accept this PR's split-mode toolbar direction, replacing breadcrumb content with split-pane controls while split view is active?
  • Rationale: The patch appears technically coherent and well-proven, but it changes a visible global shell ownership rule on a protected maintainer-labeled PR.
  • Likely owner: steipete — He owns the linked split-view product context and authored the merged split-view foundation this PR refines.
  • Options:
    • Accept toolbar unification (recommended): Merge the PR after normal exact-head CI because the implementation matches the linked issue and removes duplicated split-view chrome.
    • Narrow to split-entry relocation: Ask the author to keep pane headers for now and only move the classic split action out of the composer.
    • Keep current split chrome: Close or pause the PR if maintainers prefer breadcrumbs and per-pane headers to remain separate.

Security
Cleared: The diff is limited to Control UI source, styles, docs, and tests; it does not touch dependencies, workflows, secrets, package resolution, or other code-execution supply-chain surfaces.

Review details

Best possible solution:

Land this PR after maintainer acceptance of the toolbar direction and exact-head checks, keeping the page-level split toolbar as the canonical owner for split pane controls.

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

Yes. Current-main source shows the old duplicated split-pane header and composer-owned split entry path, and the PR screenshots show the before/after visual behavior.

Is this the best way to solve the issue?

Yes, subject to maintainer UX acceptance. Moving split controls to ChatPage keeps the split-layout owner responsible for pane actions and avoids duplicating toolbar chrome inside each pane.

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

  • add P3: This is a focused Control UI ergonomics and polish PR with no evidence of blocked setup, auth, message delivery, or runtime availability.
  • add proof: sufficient: Contributor real behavior proof is sufficient. The PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.
  • add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.
  • 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 PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.

Label justifications:

  • P3: This is a focused Control UI ergonomics and polish PR with no evidence of blocked setup, auth, message delivery, or runtime availability.
  • 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 PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body provides before/after and bottom-right-entry screenshots that directly show the changed UI, and those linked images were inspected.
Evidence reviewed

PR surface:

Source +27, Tests +162, Docs 0. Total +189 across 9 files.

View PR surface stats
Area Files Added Removed Net
Source 5 168 141 +27
Tests 3 186 24 +162
Docs 1 3 3 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 9 357 168 +189

What I checked:

  • PR head centralizes split controls in ChatPage: At the PR head, ChatPage renders a new split toolbar from the current layout panes, including session selects, split-down/split-right actions, close controls, and active-pane focus handling. (ui/src/pages/chat/chat-page.ts:401, 247156e7ad1a)
  • PR head moves the split entry out of composer controls: The single-pane Open split view button is rendered by ChatPage as a page-level action, while ChatControls no longer owns that prop or button. (ui/src/pages/chat/chat-page.ts:582, 247156e7ad1a)
  • PR head removes pane-owned split chrome: ChatPane now renders the chat view without the old pane header, leaving split toolbar ownership in the page-level split layout host. (ui/src/pages/chat/chat-pane.ts:1084, 247156e7ad1a)
  • Current main baseline still has the old split-pane header: Current main still renders per-pane split headers with a session select and pane actions when pane chrome is enabled, matching the linked issue's duplicated-chrome baseline. (ui/src/pages/chat/chat-pane.ts:864, 363cf0461f25)
  • Current main baseline still has composer-owned split entry: Current main's ChatControlsProps still includes onOpenSplitView and renders the Open split view button inside chat controls. (ui/src/pages/chat/components/chat-controls.ts:56, 363cf0461f25)
  • Focused E2E contract covers the toolbar behavior: The PR adds a mocked Gateway E2E that opens split view, verifies two toolbar pane groups, confirms dashboard breadcrumbs are hidden, checks safe-area positioning, and checks active-pane focus synchronization. (ui/src/e2e/chat-flow.e2e.test.ts:226, 247156e7ad1a)

Likely related people:

  • steipete: He authored and merged the multi-pane split-view foundation and drag/drop follow-up that this PR refines, in addition to opening the linked product issue. (role: split-view feature owner and product-context owner; confidence: high; commits: aa1929ccb0e3, 6a5726b80885; files: ui/src/pages/chat/chat-page.ts, ui/src/pages/chat/chat-pane.ts, ui/src/pages/chat/split-layout.ts)
  • vyctorbrzezowski: They authored the related Control UI topbar/sidebar PR whose shell and breadcrumb surfaces are the toolbar area this PR reuses. (role: adjacent shell UI proposer; confidence: medium; commits: 2817aa80b161, 090c974da538, e68fc28a56d1; files: ui/src/components/app-topbar.ts, ui/src/app/app-host.ts, ui/src/styles/layout.css)
  • shakkernerd: GitHub PR metadata shows they merged the related Control UI shell PR, so they are a useful routing candidate for topbar ownership review. (role: adjacent shell PR merger; confidence: medium; commits: 2817aa80b161, 090c974da538, e68fc28a56d1; files: ui/src/components/app-topbar.ts, ui/src/styles/layout.css, ui/src/styles/layout.mobile.css)
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.

@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦞 diamond lobster Very strong PR readiness with only minor maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. labels Jul 9, 2026
@steipete
steipete merged commit ea4e005 into main Jul 9, 2026
111 of 119 checks passed
@steipete
steipete deleted the codex/control-ui-unified-split-toolbar branch July 9, 2026 07:17
@steipete

steipete commented Jul 9, 2026

Copy link
Copy Markdown
Contributor Author

Merged via squash.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app: web-ui App: web-ui docs Improvements or additions to documentation maintainer Maintainer-authored PR P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦞 diamond lobster Very strong PR readiness with only minor maintainer review expected. size: L status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Unify split-view controls into one toolbar row

1 participant