Skip to content

feat(ui): declutter the Control UI sidebar with customizable pinned nav and a More section#100296

Merged
steipete merged 5 commits into
mainfrom
claude/gallant-brahmagupta-ea93fb
Jul 5, 2026
Merged

feat(ui): declutter the Control UI sidebar with customizable pinned nav and a More section#100296
steipete merged 5 commits into
mainfrom
claude/gallant-brahmagupta-ea93fb

Conversation

@steipete

@steipete steipete commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Closes #100287

What Problem This Solves

The Control UI sidebar had become the busiest surface in the app: three always-expanded nav groups (Control, Agent, Settings) with 13 entries, the session list, a brand header with its own collapse button, and footer utilities all competing with the chat. There was no way to choose which destinations stay visible, so every page carried the full nav tree.

Why This Change Was Made

The sidebar is restructured around a small user-customizable pinned set, modeled on how the Codex desktop app keeps a few important sections on top and hides the rest behind "More". Sessions stay first (New session, Recent, All sessions), a pinned trio follows (default: Overview, Workboard, Agents), and every other destination lives in a collapsed More section. Right-clicking the nav — or the "Customize sidebar" entry under More — opens a menu with per-destination pin checkmarks and a reset action; the selection persists per browser in the existing Control UI settings store (sidebarPinnedRoutes, sidebarMoreExpanded), replacing the retired per-group collapse map. Settings moved to the sidebar footer next to Docs, and the sidebar collapse toggle moved out of the brand header into the topbar as a small icon button next to the terminal toggle (hidden at drawer breakpoints where the hamburger takes over).

User Impact

The default sidebar shows 3 nav items instead of 13, so the chat gets the visual focus. Users can pin exactly the destinations they use (right-click → check/uncheck, or More → Customize sidebar), collapse the sidebar from the topbar, and their choices survive reloads. Nothing is removed: every page stays reachable through More, Settings sits in the footer, and mobile drawer behavior is unchanged.

Evidence

Validated against the mocked-gateway Control UI in a source-blind browser run: default pins, More expansion, per-route unpinning, reset, Escape focus restoration, and pin/More/collapse persistence all passed with screenshots.

  • Blacksmith Testbox tbx_01kwsjx5adsezw46cp6dn4e5k9: pnpm check:changed, 152 focused unit tests, i18n consistency, and the UI test TypeScript project passed.
  • Same Testbox, final rebased patch: 152 focused unit tests and the new sidebar customization E2E passed; all 20 locale bundles reported zero fallbacks; UI test TypeScript project passed.
  • Fresh autoreview: no accepted or actionable findings.
  • New E2E: ui/src/e2e/sidebar-customization.e2e.test.ts covers customization, reset, and reload persistence.

@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui size: XL maintainer Maintainer-authored PR labels Jul 5, 2026
@steipete

steipete commented Jul 5, 2026

Copy link
Copy Markdown
Contributor Author

Before / after

Captured against the mocked-gateway e2e harness (same session fixture, dark mode, 1440×900).

Before (main) After (this PR)
before after
More expanded Right-click → Customize sidebar
more expanded customize menu

Validation

  • Remote Testbox (Blacksmith) run, exit 0: 152 unit tests across the 5 touched suites plus the sidebar session-management e2e (tbx_01kwryzx..., GitHub-hosted lease; full targeted rerun after an earlier path-filter miss).
  • node scripts/run-tsgo.mjs -p test/tsconfig/tsconfig.test.ui.json clean.
  • pnpm ui:i18n:sync + pnpm ui:i18n:check clean; oxfmt/oxlint clean on touched files.
  • Codex autoreview (gpt-5.5, branch vs origin/main): no accepted/actionable findings.

@clawsweeper

clawsweeper Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs changes before merge. Reviewed July 5, 2026, 4:52 PM ET / 20:52 UTC.

Summary
The PR replaces the fixed grouped Control UI sidebar with browser-local pinned routes, a More section, Settings in the footer, a topbar collapse control, docs/tests, generated i18n updates, and sidebar E2E coverage.

PR surface: Source +104, Tests +208, Docs +8. Total +320 across 62 files.

Reproducibility: yes. A high-confidence source path exists for the review finding: open the drawer at the tablet breakpoint, resize back to desktop, then press the desktop collapse button; navDrawerOpen still masks navCollapsed, so the visible sidebar remains expanded.

Review metrics: 1 noteworthy metric.

  • Browser-local navigation preferences: 2 added, 1 retired. The PR adds sidebarPinnedRoutes and sidebarMoreExpanded while retiring navGroupsCollapsed, so upgrade behavior for existing browser profiles needs explicit review.

Stored data model
Persistent data-model change detected: serialized state: ui/src/app-navigation-groups.test.ts. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #100287
Summary: This PR is the candidate implementation for the canonical pinned-nav sidebar feature request; two open sidebar PRs overlap but do not supersede this current head.

Members:

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

Merge readiness
Overall: 🦐 gold shrimp
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🦐 gold shrimp
Result: needs maintainer review before merge.

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

Rank-up moves:

  • Clear stale drawer state when returning from tablet drawer to desktop collapse and cover that path in the sidebar E2E.
  • Remove this PR's direct CHANGELOG.md entry and keep release-note context in the PR body or squash message.

Risk before merge

Maintainer options:

  1. Fix blockers, then accept the local preference reset (recommended)
    Clear stale drawer state, remove the release-owned changelog entry, and have maintainers explicitly accept that old group-collapse preferences are retired by the redesign.
  2. Preserve old preference intent
    Add a narrow migration or compatibility behavior only if maintainers do not want existing group-collapse preferences reset by the new pinned-route model.
  3. Pause for sidebar sequencing
    Hold or close this PR if maintainers choose the narrower Settings-footer fix or the bolder follow-up redesign instead.
Copy recommended automerge instruction
@clawsweeper automerge

Special instructions:
Clear stale drawer state before the desktop sidebar toggle writes navCollapsed, remove this PR's CHANGELOG.md entry, and add or adjust focused Control UI E2E coverage for resizing from tablet drawer back to desktop collapse.

Next step before merge

  • [P2] A focused repair can address the remaining code and changelog blockers without choosing the final sidebar product direction.

Maintainer decision needed

  • Question: Should maintainers accept this pinned-nav and More-section sidebar direction, including the browser-local preference reset, once the concrete code blockers are fixed?
  • Rationale: The implementation is a user-facing navigation redesign that changes default Control UI chrome and persisted browser-local preferences; automation can repair the code blockers but cannot choose the product direction.
  • Likely owner: steipete — He is the recent Control UI sidebar contributor, assignee, and author of the linked sidebar direction work.
  • Options:

Security
Cleared: The diff changes Control UI navigation, docs, generated i18n, and tests; it does not add dependencies, workflows, credentials handling, install scripts, or other supply-chain-sensitive behavior.

Review findings

  • [P2] Clear stale drawer state before desktop collapse — ui/src/app/app-host.ts:652-655
  • [P3] Remove the direct changelog entry — CHANGELOG.md:13
Review details

Best possible solution:

Merge this direction only after clearing the stale drawer state, removing the direct changelog edit, and explicitly accepting the new browser-local pinned-nav preference model.

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

Yes. A high-confidence source path exists for the review finding: open the drawer at the tablet breakpoint, resize back to desktop, then press the desktop collapse button; navDrawerOpen still masks navCollapsed, so the visible sidebar remains expanded.

Is this the best way to solve the issue?

No, not yet. The sidebar design is coherent, but the best merge path needs a stale-drawer-state fix, the changelog entry removed, and maintainer acceptance of the browser-local preference change.

Full review comments:

  • [P2] Clear stale drawer state before desktop collapse — ui/src/app/app-host.ts:652-655
    This prior blocker is still present. If the drawer is open at the tablet breakpoint and the window widens back to desktop, navDrawerOpen remains true, so this handler writes navCollapsed: true but the rendered navCollapsed stays false because it is masked by !navDrawerOpen. Close/reset the drawer state before toggling the desktop collapse preference, or add equivalent breakpoint handling.
    Confidence: 0.89
  • [P3] Remove the direct changelog entry — CHANGELOG.md:13
    This prior finding is still present. CHANGELOG.md is release-owned in this repo, and this normal feature PR already carries release-note context in the PR body, so keeping a hand-written Unreleased entry will create duplicate or stale release notes.
    Confidence: 0.97

Overall correctness: patch is incorrect
Overall confidence: 0.88

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

  • add merge-risk: 🚨 compatibility: The PR changes persisted browser-local sidebar preferences and intentionally retires the previous group-collapse setting.
  • add proof: sufficient: Contributor real behavior proof is sufficient. The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.
  • add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.
  • add rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦞 diamond lobster and patch quality is 🦐 gold shrimp.
  • add status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action. Sufficient (screenshot): The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.

Label justifications:

  • P2: This is a broad Control UI UX change with a concrete responsive navigation blocker, but it is not data loss, security, or a broken core runtime.
  • merge-risk: 🚨 compatibility: The PR changes persisted browser-local sidebar preferences and intentionally retires the previous group-collapse setting.
  • rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦞 diamond lobster and patch quality is 🦐 gold shrimp.
  • status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action. Sufficient (screenshot): The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR includes after-fix mocked-gateway screenshots showing the default pinned sidebar, More expansion, and customize menu, plus reported Testbox/browser E2E validation; the remaining resize bug needs a code fix, not more contributor proof.
Evidence reviewed

PR surface:

Source +104, Tests +208, Docs +8. Total +320 across 62 files.

View PR surface stats
Area Files Added Removed Net
Source 53 576 472 +104
Tests 6 272 64 +208
Docs 3 8 0 +8
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 62 856 536 +320

Acceptance criteria:

  • [P1] pnpm test ui/src/e2e/sidebar-customization.e2e.test.ts.
  • [P1] pnpm test ui/src/app-navigation.test.ts ui/src/app-navigation-groups.test.ts ui/src/app/settings.node.test.ts.
  • [P1] node scripts/run-tsgo.mjs -p test/tsconfig/tsconfig.test.ui.json.
  • [P1] git diff --check.

What I checked:

  • Repository policy read: Root AGENTS.md was read fully, and the scoped UI and docs guides were read; release-owned changelog guidance, generated i18n guidance, and read-beyond-diff review policy affected this review. (AGENTS.md:29, 77575d74f68c)
  • Current main still has grouped sidebar navigation: Current main still defines fixed chat/control/agent/settings sidebar sections, so main does not already implement the pinned-nav and More-section request. (ui/src/app-navigation.ts:17, 77575d74f68c)
  • PR head masks desktop collapse while drawer state is stale: The PR derives rendered navCollapsed as persisted navCollapsed AND not navDrawerOpen, then the topbar toggle only writes navCollapsed; if navDrawerOpen remains true after resizing from drawer to desktop, the desktop collapse button cannot visibly collapse the sidebar. (ui/src/app/app-host.ts:620, 13038887c03e)
  • Responsive CSS makes the stale drawer state reachable: At the drawer breakpoint the topbar drawer control is shown and the desktop sidebar toggle is hidden, so opening the drawer at tablet width can leave navDrawerOpen set when the viewport later returns to desktop. (ui/src/styles/layout.mobile.css:92, 13038887c03e)
  • E2E covers drawer opening but not resize-back collapse: The new E2E covers persisted desktop collapse and opening an expanded drawer at 900px, but it stops before resizing back to desktop and pressing the collapse control. (ui/src/e2e/sidebar-customization.e2e.test.ts:120, 13038887c03e)
  • Manual changelog entry remains: The PR head still adds a normal feature entry to CHANGELOG.md even though repository policy says CHANGELOG.md is release-owned and normal PRs should put release-note context in the PR body or commit message. (CHANGELOG.md:13, 13038887c03e)

Likely related people:

  • steipete: Recent merged Control UI sidebar and plugin-tab work touches app-sidebar, app-navigation, and layout surfaces; he is also the assignee and author of the linked sidebar direction issue and overlapping sidebar PRs. (role: recent area contributor and likely follow-up owner; confidence: high; commits: c730d8f1f1bb, 89ef6632dea0; files: ui/src/components/app-sidebar.ts, ui/src/app-navigation.ts, ui/src/styles/layout.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.
Review history (11 earlier review cycles; latest 8 shown)
  • reviewed 2026-07-05T16:48:46.424Z sha 15594d0 :: needs real behavior proof before merge. :: [P2] Translate the sidebar customization labels
  • reviewed 2026-07-05T16:59:17.348Z sha 15594d0 :: needs real behavior proof before merge. :: [P2] Translate the sidebar customization labels
  • reviewed 2026-07-05T17:29:22.572Z sha 358d0eb :: needs changes before merge. :: [P3] Remove the direct changelog entry
  • reviewed 2026-07-05T17:40:20.699Z sha 78b607f :: needs changes before merge. :: [P3] Remove the direct changelog entry
  • reviewed 2026-07-05T18:10:45.319Z sha fe1e461 :: found issues before merge. :: [P3] Remove the direct changelog entry
  • reviewed 2026-07-05T19:59:06.233Z sha f5f5df9 :: found issues before merge. :: [P3] Remove the direct changelog entry
  • reviewed 2026-07-05T20:07:22.081Z sha 371f07e :: found issues before merge. :: [P3] Remove the direct changelog entry
  • reviewed 2026-07-05T20:13:17.905Z sha 371f07e :: found issues before merge. :: [P2] Clear stale drawer state before desktop collapse | [P3] Remove the direct changelog entry

@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. P2 Normal backlog priority with limited blast radius. merge-risk: 🚨 compatibility 🚨 May break existing users, config, migrations, defaults, or upgrade paths. labels Jul 5, 2026
@steipete
steipete force-pushed the claude/gallant-brahmagupta-ea93fb branch from 4dfdac2 to 3c02314 Compare July 5, 2026 16:09

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3c0231491e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread ui/src/i18n/locales/de.ts Outdated
@openclaw-barnacle openclaw-barnacle Bot added docs Improvements or additions to documentation app: ios App: ios gateway Gateway runtime scripts Repository scripts size: XL and removed size: L labels Jul 5, 2026
@steipete steipete self-assigned this Jul 5, 2026

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

const message = await client.createDirectMessage(dm.id, params.text);

P2 Badge Propagate provenance on DM replies

When an opted-in ClickClack account handles a direct message, handleClickClackInbound passes provenance: turnProvenance into sendClickClackText, and the docs promise the final reply carries author_model/author_thinking; however this DM branch still calls createDirectMessage with only the body, so DM final replies lose the new attribution metadata while channel and thread replies keep it. Please extend the direct-message client path to accept and serialize the same provenance fields.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@clawsweeper clawsweeper Bot added rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. merge-risk: 🚨 automation 🚨 May affect CI, automerge, proof capture, label sync, or maintainer automation. and removed proof: sufficient ClawSweeper judged the real behavior proof convincing. 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. labels Jul 5, 2026
@clawsweeper clawsweeper Bot added the merge-risk: 🚨 compatibility 🚨 May break existing users, config, migrations, defaults, or upgrade paths. label Jul 5, 2026
@steipete
steipete force-pushed the claude/gallant-brahmagupta-ea93fb branch from fe1e461 to f5f5df9 Compare July 5, 2026 19:48
@openclaw-barnacle openclaw-barnacle Bot added channel: matrix Channel integration: matrix channel: whatsapp-web Channel integration: whatsapp-web labels Jul 5, 2026
@steipete
steipete force-pushed the claude/gallant-brahmagupta-ea93fb branch from 69452f4 to 371f07e Compare July 5, 2026 20:02
@openclaw-barnacle openclaw-barnacle Bot removed channel: matrix Channel integration: matrix channel: whatsapp-web Channel integration: whatsapp-web labels Jul 5, 2026

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 371f07e527

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread ui/src/app/app-host.ts
Comment on lines +652 to +655
.onToggleSidebar=${() =>
context.navigation.update({
navCollapsed: !navCollapsed,
})}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Clear stale drawer state before desktop collapse

When the drawer is open at the ≤1100px breakpoint and the window is resized back to desktop, CSS hides the hamburger/backdrop but navDrawerOpen remains true. This topbar handler then only writes navCollapsed: !navCollapsed; because navCollapsed is derived as this.navCollapsed && !navDrawerOpen, the visible desktop collapse button keeps rendering as expanded and cannot collapse the sidebar until the user happens to press Escape or navigate. Close/reset the drawer state before toggling the desktop collapse preference.

Useful? React with 👍 / 👎.

@clawsweeper clawsweeper Bot added 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. and removed 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. labels Jul 5, 2026
@openclaw-barnacle openclaw-barnacle Bot added app: android App: android scripts Repository scripts docker Docker and sandbox tooling extensions: openai labels Jul 5, 2026
@steipete
steipete force-pushed the claude/gallant-brahmagupta-ea93fb branch from ede7f55 to c3eeb10 Compare July 5, 2026 20:23
@openclaw-barnacle openclaw-barnacle Bot removed app: android App: android scripts Repository scripts labels Jul 5, 2026
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 merge-risk: 🚨 compatibility 🚨 May break existing users, config, migrations, defaults, or upgrade paths. P2 Normal backlog priority with limited blast radius. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. size: XL status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Control UI: declutter sidebar with customizable pinned nav and More section

1 participant