Skip to content

improve(ui): bring back openclaw brand, remove desktop topbar + breadcrumbs#101017

Merged
shakkernerd merged 6 commits into
openclaw:mainfrom
vyctorbrzezowski:brzezowski/app-shell-header-controls
Jul 8, 2026
Merged

improve(ui): bring back openclaw brand, remove desktop topbar + breadcrumbs#101017
shakkernerd merged 6 commits into
openclaw:mainfrom
vyctorbrzezowski:brzezowski/app-shell-header-controls

Conversation

@vyctorbrzezowski

@vyctorbrzezowski vyctorbrzezowski commented Jul 6, 2026

Copy link
Copy Markdown
Member

brand is important 🤓

What Problem This Solves

The desktop chat topbar was carrying controls that did not need to live there. The breadcrumb was not useful, and Search plus the sidebar toggle fit better in the existing sidebar pattern.

This PR brings the OpenClaw brand back to the sidebar, places Search and the sidebar toggle next to it, adds Cmd+B to open and close the sidebar, and keeps the mobile topbar with centered OpenClaw branding plus a Search icon.

It also folds in the remaining sidebar polish from #100963 and #100918: compact sidebar timestamps, scoped visual session highlighting, a single-icon color-mode toggle, sidebar sorting popover placement, compact rail search, and collapsed-rail active-state cleanup.

Screenshots

Mobile topbar in this PR:

Mobile topbar in this PR

Desktop sidebar and chat shell in this PR:

Desktop sidebar and chat shell in this PR

Why This Change Was Made

This keeps desktop navigation controls in the sidebar, where the app already has a calm and consistent pattern for global navigation. The terminal action moves to the chat workspace rail, so it stays available without bringing back the desktop topbar.

Mobile keeps the topbar because that is still the right place for drawer navigation and Search on small screens. It now shows the OpenClaw brand in the center and relegates Search to an icon on the right.

User Impact

Desktop users get the brand back in the sidebar, fewer controls in the chat header area, and a keyboard shortcut for opening and closing the sidebar. Sidebar session rows keep the previous focus behavior for keyboard access, while the selected-session highlight is scoped to Chat. The color-mode control is a single footer icon that cycles modes on click.

Mobile users get a branded topbar with navigation on the left and Search on the right.

Evidence

  • git diff --check
  • node_modules/.bin/oxfmt --check ui/src/app/app-host.ts ui/src/components/app-sidebar.ts ui/src/components/app-topbar.ts ui/src/components/theme-mode-toggle.ts ui/src/components/terminal/terminal-panel.ts ui/src/pages/chat/chat-pane.ts ui/src/pages/chat/chat-state.ts ui/src/pages/chat/components/chat-session-workspace.ts ui/src/e2e/sidebar-customization.e2e.test.ts ui/src/styles/layout.css ui/src/styles/layout.mobile.css ui/src/i18n/locales/en.ts
  • node --import tsx scripts/control-ui-i18n.ts check
  • node_modules/.bin/vitest run ui/src/e2e/sidebar-customization.e2e.test.ts --config test/vitest/vitest.ui-e2e.config.ts
  • cd ui && ../node_modules/.bin/vite build

@vyctorbrzezowski
vyctorbrzezowski marked this pull request as ready for review July 6, 2026 16:46
@vyctorbrzezowski
vyctorbrzezowski force-pushed the brzezowski/app-shell-header-controls branch from 848bfbe to 772dfa7 Compare July 6, 2026 16:58
@vyctorbrzezowski

Copy link
Copy Markdown
Member Author

@clawsweeper review

@clawsweeper

clawsweeper Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.

@vyctorbrzezowski vyctorbrzezowski changed the title improve(ui): move shell controls into side rails improve(ui): bring back openclaw brand + move shell controls into side rails Jul 6, 2026
@vyctorbrzezowski vyctorbrzezowski changed the title improve(ui): bring back openclaw brand + move shell controls into side rails improve(ui): bring back openclaw brand + remove useless topbar and breadcrumbs Jul 6, 2026
@clawsweeper

clawsweeper Bot commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 8, 2026, 9:45 AM ET / 13:45 UTC.

Summary
The branch moves desktop shell controls into the sidebar and workspace rail, keeps a branded mobile topbar, updates theme/sidebar/terminal behavior, refreshes i18n output, and extends sidebar E2E coverage.

PR surface: Source +308, Tests +21. Total +329 across 54 files.

Reproducibility: not applicable. this is a user-visible Control UI layout improvement, and the relevant evidence is the after-state screenshots plus source inspection rather than a bug reproduction.

Review metrics: 1 noteworthy metric.

  • Visual proof inspected: 2 screenshots inspected. The screenshots directly cover the mobile topbar and desktop sidebar/chat shell states that this UI PR changes.

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

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

Rank-up moves:

  • [P2] Let the remaining exact-head CI lanes finish before merge.

Risk before merge

  • [P1] Final acceptance is a product/UX direction choice rather than a code defect, and several exact-head CI lanes were still pending when checked.

Maintainer options:

  1. Decide the mitigation before merge
    Land this UI direction after assignee or UX maintainer acceptance and green exact-head CI; if the direction is contested, split the accepted sidebar polish from the disputed topbar/navigation changes.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P2] The remaining action is maintainer UX/product acceptance and exact-head CI completion, not an automated code repair.

Maintainer decision needed

  • Question: Should this PR's Control UI navigation direction be accepted for the desktop sidebar, mobile topbar, and workspace-rail terminal placement once exact-head CI finishes?
  • Rationale: The code path looks coherent, but the change intentionally reshapes global navigation and keyboard behavior, which is a maintainer UX/product choice rather than an automated cleanup decision.
  • Likely owner: shakkernerd — They are assigned on the live PR and authored the latest corrective commits on the branch.
  • Options:
    • Accept after checks (recommended): Proceed with this shell direction once the remaining exact-head CI lanes are green and any assignee review is satisfied.
    • Narrow the PR: Keep the sidebar polish and ask the author to split or revise any contested topbar, breadcrumb, or terminal-placement behavior.
    • Rework direction: Pause the PR if maintainers want the desktop topbar or breadcrumb model preserved as a product requirement.

Security
Cleared: No concrete security or supply-chain concern found; the diff stays in Control UI source, styles, generated i18n, and E2E coverage without dependency, workflow, credential, or package-resolution changes.

Review details

Best possible solution:

Land this UI direction after assignee or UX maintainer acceptance and green exact-head CI; if the direction is contested, split the accepted sidebar polish from the disputed topbar/navigation changes.

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

Not applicable; this is a user-visible Control UI layout improvement, and the relevant evidence is the after-state screenshots plus source inspection rather than a bug reproduction.

Is this the best way to solve the issue?

Yes, conditionally; moving navigation controls into the existing sidebar and workspace rail is a coherent implementation shape, but final acceptance depends on maintainer UX direction.

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

  • add proof: sufficient: Contributor real behavior proof is sufficient. The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.
  • add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.
  • add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.

Label justifications:

  • P3: This is low-risk Control UI navigation polish with screenshots and focused E2E coverage, not a crash, data-loss, security, or broken-channel workflow report.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body includes mobile and desktop screenshots that were inspected and directly show the changed UI after the fix.
Evidence reviewed

PR surface:

Source +308, Tests +21. Total +329 across 54 files.

View PR surface stats
Area Files Added Removed Net
Source 53 767 459 +308
Tests 1 28 7 +21
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 54 795 466 +329

What I checked:

  • Repository policy read: Root AGENTS.md and ui/AGENTS.md were read fully; the UI guide treats locale bundles as generated output and the root policy requires deep PR review plus protected maintainer handling. (AGENTS.md:1, 64015e71dd5a)
  • PR state: Live PR view shows head b0495ee, author association MEMBER, label maintainer, assignee shakkernerd, and mergeable but blocked status. (b0495eee0477)
  • Shell wiring: The shell passes command palette, drawer/collapse, route, sidebar, and terminal panel state through the existing Control UI shell boundary without adding config or protocol surface. (ui/src/app/app-host.ts:774, b0495eee0477)
  • Sidebar behavior: The sidebar now renders the brand row, search action, collapse action, scoped recent-session visual state, and compact docs tooltip in the owner component. (ui/src/components/app-sidebar.ts:290, b0495eee0477)
  • Terminal availability: The current head computes terminal availability with config, connection, admin access, and an advertised terminal.open method check before exposing the workspace-rail terminal action. (ui/src/pages/chat/chat-pane.ts:573, b0495eee0477)
  • Theme follow-up: The latest head preserves single-button theme cycling through system, light, and dark, addressing the prior theme-mode review path. (ui/src/components/theme-mode-toggle.ts:25, b0495eee0477)

Likely related people:

  • shakkernerd: Assigned on the live PR and authored the latest branch fixes for topbar/breadcrumb restoration, sidebar alignment, terminal availability, and theme cycling. (role: recent follow-up owner; confidence: high; commits: 090c974da538, e68fc28a56d1, a2e8822dd2a7; files: ui/src/components/app-topbar.ts, ui/src/components/app-sidebar.ts, ui/src/pages/chat/chat-pane.ts)
  • vyctorbrzezowski: Authored the initial branch commit and the closed related sidebar polish PRs that this PR says it folds in. (role: original proposer and related UI polish author; confidence: medium; commits: 2817aa80b161, 4187fe4e2ba0, 26ac7310197f; files: ui/src/components/app-sidebar.ts, ui/src/components/app-topbar.ts, ui/src/styles/layout.css)
  • vincentkoc: The available current-main blame/log history for the touched Control UI shell files points to commit c96c60d; deeper attribution is limited by the shallow checkout. (role: current-main area contributor in shallow history; confidence: low; commits: c96c60d22d01; files: ui/src/components/app-topbar.ts, ui/src/styles/layout.css, ui/src/components/app-sidebar.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.
Review history (5 earlier review cycles)
  • reviewed 2026-07-06T17:47:17.951Z sha 772dfa7 :: found issues before merge. :: [P2] Remove boolean literal comparisons
  • reviewed 2026-07-07T08:48:59.231Z sha 772dfa7 :: found issues before merge. :: [P2] Remove boolean literal comparisons
  • reviewed 2026-07-07T09:30:09.112Z sha 772dfa7 :: found issues before merge. :: [P2] Remove boolean literal comparisons
  • reviewed 2026-07-08T06:35:05.972Z sha 3461f7d :: found issues before merge. :: [P2] Coerce advertised terminal support to boolean | [P2] Return a fallback theme mode | [P3] Remove the stale AgentsListResult import
  • reviewed 2026-07-08T06:43:57.493Z sha 3461f7d :: found issues before merge. :: [P2] Coerce terminal availability to boolean | [P2] Return a fallback theme mode | [P3] Remove the stale AgentsListResult import

@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. P3 Low-priority cleanup, docs, polish, ergonomics, or speculative work. labels Jul 6, 2026
@openclaw-barnacle openclaw-barnacle Bot added the maintainer Maintainer-authored PR label Jul 7, 2026
@clawsweeper clawsweeper Bot added the merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. label Jul 7, 2026
@vyctorbrzezowski
vyctorbrzezowski marked this pull request as draft July 7, 2026 09:10
@vyctorbrzezowski
vyctorbrzezowski force-pushed the brzezowski/app-shell-header-controls branch from 772dfa7 to 3461f7d Compare July 8, 2026 06:26
@vyctorbrzezowski
vyctorbrzezowski marked this pull request as ready for review July 8, 2026 06:26
@vyctorbrzezowski vyctorbrzezowski changed the title improve(ui): bring back openclaw brand + remove useless topbar and breadcrumbs improve(ui): bring back openclaw brand, remove desktop topbar + breadcrumbs Jul 8, 2026
@clawsweeper clawsweeper Bot added rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. labels Jul 8, 2026
@shakkernerd shakkernerd self-assigned this Jul 8, 2026
shakkernerd added a commit to vyctorbrzezowski/openclaw that referenced this pull request Jul 8, 2026
@shakkernerd
shakkernerd force-pushed the brzezowski/app-shell-header-controls branch from 3461f7d to 5460d99 Compare July 8, 2026 13:25
shakkernerd added a commit to vyctorbrzezowski/openclaw that referenced this pull request Jul 8, 2026
@shakkernerd
shakkernerd force-pushed the brzezowski/app-shell-header-controls branch from 713ac5d to 4649409 Compare July 8, 2026 13:30
shakkernerd added a commit to vyctorbrzezowski/openclaw that referenced this pull request Jul 8, 2026
@shakkernerd
shakkernerd force-pushed the brzezowski/app-shell-header-controls branch from 4649409 to b0495ee Compare July 8, 2026 13:36
@clawsweeper clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 8, 2026
@shakkernerd
shakkernerd force-pushed the brzezowski/app-shell-header-controls branch from b0495ee to 769baa3 Compare July 8, 2026 13:51
@shakkernerd
shakkernerd merged commit fc05a81 into openclaw:main Jul 8, 2026
20 checks passed
@shakkernerd

Copy link
Copy Markdown
Member

Merged using rebase.

Changes after review:

  • restored the Control UI topbar and breadcrumbs while retaining the OpenClaw sidebar branding
  • aligned the compact sidebar search and collapse controls
  • normalized terminal capability booleans and preserved theme-mode cycling
  • restored the existing translated docs tooltip contract, removing all recorded English fallbacks

Verification:

  • pnpm ui:i18n:sync
  • pnpm ui:i18n:check
  • git diff --check origin/main...HEAD
  • focused Control UI sidebar E2E passed before landing
  • implementation autoreview passed
  • exact-head GitHub production types and lint passed before the final i18n-only correction
  • AWS Crabbox cbx_cff1a11dfdbd / run run_e55063e612e8 verified the sanitized fresh-PR bootstrap and production types; the broader run was stopped when validation was narrowed to the CI failure

Landed as 8295a12a837de1dfbafe4075878e393937eb35e2..fc05a8103b721334070e2ba791e5c8b43b406107.

Thanks @vyctorbrzezowski!

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 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: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. size: XL 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.

2 participants