Skip to content

feat(ui): make the sidebar session-first and minimal#100386

Merged
steipete merged 11 commits into
mainfrom
claude/sidebar-bold-redesign
Jul 6, 2026
Merged

feat(ui): make the sidebar session-first and minimal#100386
steipete merged 11 commits into
mainfrom
claude/sidebar-bold-redesign

Conversation

@steipete

@steipete steipete commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Related: #100287

What Problem This Solves

The customizable sidebar from #100296 still carried chrome that competed with the conversation: a duplicate brand header, a boxed recent-session section, three default-pinned destinations, and a vertically labeled utility footer. Pinned sessions also shared the nine-row budget with ordinary recents, so common pin counts displaced recent sessions and larger pin sets could disappear.

Why This Change Was Made

This makes the sidebar session-first. It starts with New session, separates Pinned from Sessions, keeps every pin plus nine ordinary recent sessions, and leaves only Overview pinned by default. More and the customization menu keep every destination reachable. Settings, Docs, pairing, theme, and connection status move into one compact footer row; the redundant recent-session collapse preference and brand header are removed.

The original branch was rebuilt on current main, retaining the useful follow-up while dropping thousands of unrelated lines that had already landed or drifted in from main. Review also fixed pinned-only active-session duplication, reused the existing localized Sessions label, and removed stale generated localization and changelog churn.

User Impact

The default sidebar now presents New session, pinned sessions, recent sessions, All sessions, Overview, More, and a one-line utility footer. Custom route pins still persist and reset correctly; desktop rail mode and the tablet drawer remain operable. The focused change removes 120 more lines than it adds across 18 files.

Evidence

  • Blacksmith Testbox-through-Crabbox tbx_01kwtc46g34k4337c0menqft96: 29 focused unit/settings tests, 3 mocked-Gateway browser E2Es, UI typecheck, and the 20-locale consistency check passed.
  • The exact rebased branch passed pnpm check:changed across the core production, core tests, and docs lanes.
  • Source-blind browser validation passed desktop default/More/customization, reload persistence, reset, collapsed rail, and settled 900 px tablet drawer behavior; screenshots were reviewed locally.
  • Fresh Codex autoreview (gpt-5.5) of the exact rebased branch reported no accepted/actionable findings.
  • Regression coverage proves all pinned sessions remain visible while nine unpinned recent sessions retain an independent budget, including the pinned-only active-session case.

@openclaw-barnacle openclaw-barnacle Bot added docs Improvements or additions to documentation app: ios App: ios app: web-ui App: web-ui gateway Gateway runtime scripts Repository scripts labels Jul 5, 2026
@steipete

steipete commented Jul 5, 2026

Copy link
Copy Markdown
Contributor Author

Final landed proof for the rebuilt sidebar branch:

Behavior fixes in the landed tree:

  • Pinned sessions no longer consume the independent nine-session recent budget; every explicit pin survives.
  • A pinned-only active session no longer renders a duplicate Chat fallback.
  • The sidebar reuses the existing localized Sessions label instead of introducing an untranslated navigation surface.
  • Docs now match the Pinned/Sessions split, Overview-only default, recent-session budget, and compact footer.

Blacksmith Testbox-through-Crabbox tbx_01kwtd22f0ymfg6686rchtat4b (run 28760181299) passed the final focused proof:

  • pnpm test ui/src/app-navigation-groups.test.ts ui/src/lib/sessions/navigation.test.ts ui/src/app/settings.node.test.ts — 29 assertions.
  • OPENCLAW_CAPTURE_UI_PROOF=1 pnpm test:ui:e2e -- ui/src/e2e/session-management.e2e.test.ts ui/src/e2e/sidebar-customization.e2e.test.ts — 3 browser scenarios.
  • pnpm ui:i18n:check — 20 locales, zero fallbacks.
  • pnpm tsgo:test:ui — clean.

Source-blind Chromium validation passed desktop customization/persistence/reset/collapse plus settled tablet drawer behavior. Fresh autoreview of the combined production diff reported no accepted/actionable findings.

Proof boundary: browser E2E uses the deterministic mocked Gateway; no live provider or credential behavior changed.

@openclaw-barnacle openclaw-barnacle Bot added size: XL maintainer Maintainer-authored PR labels Jul 5, 2026
@clawsweeper

clawsweeper Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 5, 2026, 9:05 PM ET / 01:05 UTC.

Summary
The PR makes the Control UI sidebar session-first by splitting pinned and recent sessions, retaining all pins plus nine unpinned recents, reducing default pinned routes to Overview, removing the brand header and recent-session collapse preference, compacting footer utilities, and updating tests/docs.

PR surface: Source -160, Tests +40, Docs 0. Total -120 across 18 files.

Reproducibility: not applicable. this is a UI feature PR rather than a standalone bug report. The relevant behavior is covered by source inspection plus the added mocked-Gateway browser E2E cases.

Review metrics: 1 noteworthy metric.

  • Sidebar preference/default surfaces: 1 removed preference, 1 default pinned-route set changed. The diff removes recentSessionsCollapsed and changes fresh sidebar defaults, which are user-facing browser-local preference behaviors reviewers should notice before merge.

Stored data model
Persistent data-model change detected: migration/backfill/repair: ui/src/e2e/session-management.e2e.test.ts, serialized state: ui/src/e2e/session-management.e2e.test.ts, serialized state: ui/src/lib/sessions/navigation.test.ts, unknown-data-model-change: ui/src/e2e/session-management.e2e.test.ts. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: canonical
Canonical: #100386
Summary: This PR is the current open follow-up for the session-first/minimal sidebar work; the linked issue was closed by the merged broader sidebar PR, and no safer open replacement was found.

Members:

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

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🐚 platinum hermit
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] Wait for QA Smoke CI or any remaining required exact-head check to finish before landing.

Risk before merge

  • [P1] Merging intentionally drops the browser-local recent-session collapse preference and changes the fresh default pinned-route set, so maintainers should accept that sidebar preference/default change explicitly.
  • [P1] QA Smoke CI was still pending at inspection; exact-head merge should wait for the remaining relevant check to finish.

Maintainer options:

  1. Accept the sidebar preference reset (recommended)
    Maintainers can intentionally accept the removed recent-session collapse preference and Overview-only default after the remaining exact-head check finishes.
  2. Preserve the old preference until release
    If the preference is considered user-visible contract, keep a migration or compatibility path instead of dropping it in this PR.
  3. Pause for UX direction
    If the default pinned set is not settled, hold the PR and decide the sidebar information architecture first.

Next step before merge

  • No automated repair is needed; the remaining action is maintainer review/acceptance of the compatibility-sensitive UI default/preference change and final exact-head validation.

Maintainer decision needed

  • Question: Should maintainers land this session-first sidebar follow-up after the remaining exact-head check finishes, accepting the removed recent-session collapse preference and Overview-only default pin?
  • Rationale: The patch is a user-facing Control UI product/default change with a protected maintainer label, so automation should not decide the final UX/default acceptance.
  • Likely owner: steipete — The same person owns the predecessor sidebar redesign history and the current follow-up branch.
  • Options:
    • Land after final check (recommended): Accept the intended sidebar preference/default change and land once QA Smoke CI or any required exact-head gate finishes cleanly.
    • Ask for more proof: Request uploaded visual proof or a linked artifact if maintainers want inspectable screenshots before landing the UI layout change.
    • Narrow the UX change: Keep the branch open for product adjustment if maintainers want different default pins or retention of the recent-session collapse preference.

Security
Cleared: The diff is limited to Control UI source, docs, tests, CSS, and i18n baseline metadata; it does not change dependencies, workflows, permissions, secrets, or package execution surfaces.

Review details

Best possible solution:

Land the current branch after maintainer acceptance of the sidebar default/preference change and completion of exact-head checks, with release-note context kept in the PR body rather than CHANGELOG.md.

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

Not applicable; this is a UI feature PR rather than a standalone bug report. The relevant behavior is covered by source inspection plus the added mocked-Gateway browser E2E cases.

Is this the best way to solve the issue?

Yes, with maintainer acceptance of the product/default change. The implementation centralizes the pinned-session cap in resolveSessionNavigation, keeps the sidebar render path simple, and updates docs/tests for the intended session-first layout.

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

  • add merge-risk: 🚨 compatibility: The PR intentionally changes browser-local sidebar defaults and removes an existing sidebar preference surface.
  • add proof: sufficient: Contributor real behavior proof is sufficient. The PR body/comment provide after-fix Testbox-through-Crabbox validation, mocked-Gateway browser E2E coverage, and source-blind Chromium sidebar validation, and GitHub's Real behavior proof check passed.
  • add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🐚 platinum hermit and patch quality is 🐚 platinum hermit.
  • add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (live_output): The PR body/comment provide after-fix Testbox-through-Crabbox validation, mocked-Gateway browser E2E coverage, and source-blind Chromium sidebar validation, and GitHub's Real behavior proof check passed.

Label justifications:

  • P2: This is a normal user-facing Control UI improvement with limited blast radius.
  • merge-risk: 🚨 compatibility: The PR intentionally changes browser-local sidebar defaults and removes an existing sidebar preference surface.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🐚 platinum hermit and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (live_output): The PR body/comment provide after-fix Testbox-through-Crabbox validation, mocked-Gateway browser E2E coverage, and source-blind Chromium sidebar validation, and GitHub's Real behavior proof check passed.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR body/comment provide after-fix Testbox-through-Crabbox validation, mocked-Gateway browser E2E coverage, and source-blind Chromium sidebar validation, and GitHub's Real behavior proof check passed.
Evidence reviewed

PR surface:

Source -160, Tests +40, Docs 0. Total -120 across 18 files.

View PR surface stats
Area Files Added Removed Net
Source 11 204 364 -160
Tests 6 126 86 +40
Docs 1 2 2 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 18 332 452 -120

What I checked:

  • Repository policy read: Root, UI, and docs AGENTS.md files were read; the review applied the config/default compatibility, docs/changelog, and UI i18n guidance. (AGENTS.md:1, 5a31666a06e5)
  • PR head sidebar behavior: The PR head groups pinned sessions above Sessions, uses all visible rows to suppress the generic Chat fallback when a pinned row already exists, and keeps Settings/Docs/pairing/theme in a compact footer. (ui/src/components/app-sidebar.ts:666, 447fb4041ee9)
  • Pinned-session cap logic: resolveSessionNavigation now sorts pinned rows first and caps only unpinned recent rows, preserving every pinned session. (ui/src/lib/sessions/navigation.ts:216, 447fb4041ee9)
  • Preference/default surface change: The PR removes the browser-local recentSessionsCollapsed setting and persists only sidebarPinnedRoutes/sidebarMoreExpanded, while fresh defaults now pin only Overview. (ui/src/app/settings.ts:91, 447fb4041ee9)
  • Regression coverage: E2E coverage checks default pins, no brand header, Settings footer navigation, persisted customization/reset/collapse, tablet drawer layout, pinned session grouping, and the pinned-only active-session case. (ui/src/e2e/sidebar-customization.e2e.test.ts:70, 447fb4041ee9)
  • Docs aligned: The docs page describes the new Pinned/Sessions split, independent nine-session recent budget, Overview-only default pin, and compact footer. Public docs: docs/web/control-ui.md. (docs/web/control-ui.md:116, 447fb4041ee9)

Likely related people:

  • steipete: Authored and merged the predecessor sidebar declutter PR, authored the current follow-up, and current available blame for the central sidebar/navigation/settings paths points to Peter Steinberger. (role: recent area contributor; confidence: high; commits: 51771c3a1485, 93a1df6b5dac, 8c19dbfb627c; files: ui/src/components/app-sidebar.ts, ui/src/lib/sessions/navigation.ts, ui/src/app-navigation.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 (6 earlier review cycles)
  • reviewed 2026-07-05T17:43:00.102Z sha 1de14e8 :: needs real behavior proof before merge. :: none
  • reviewed 2026-07-05T22:04:13.359Z sha 445b5ae :: needs changes before merge. :: [P2] Hide the Chat fallback when pins already cover chats
  • reviewed 2026-07-05T22:45:59.490Z sha ed42813 :: found issues before merge. :: [P2] Hide the Chat fallback when pins already cover chats | [P3] Remove the release-owned changelog entry
  • reviewed 2026-07-05T23:11:34.404Z sha ac75c4c :: found issues before merge. :: [P3] Drop the release-owned changelog edit
  • reviewed 2026-07-05T23:45:56.512Z sha 99b3ab2 :: found issues before merge. :: [P3] Drop the release-owned changelog edit
  • reviewed 2026-07-06T00:13:11.502Z sha 44d2e1d :: found issues before merge. :: [P3] Drop the release-owned changelog edit

@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: 1de14e875f

ℹ️ 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 on lines +149 to +151
target: message.channel_id
? { channelId: message.channel_id }
: { conversationId: message.direct_conversation_id },

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 Post ClickClack activity rows into the source thread

When agentActivity is enabled for a ClickClack account and the inbound message is a thread reply (message.parent_message_id is set), the final response is still delivered with threadId: message.thread_root_id, but the activity publisher is targeted only with the channel id here. createActivityMessage then posts to /api/channels/{channelId}/messages, so streamed commentary/tool rows escape the thread as new top-level channel messages while the final answer stays in-thread. Please carry the thread root into the activity client and post activity rows as thread replies for threaded turns.

Useful? React with 👍 / 👎.

@clawsweeper clawsweeper Bot added proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. 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. 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 self-assigned this Jul 5, 2026
@steipete
steipete force-pushed the claude/sidebar-bold-redesign branch from 1de14e8 to 445b5ae Compare July 5, 2026 21:56
@openclaw-barnacle openclaw-barnacle Bot removed docs Improvements or additions to documentation app: ios App: ios gateway Gateway runtime scripts Repository scripts 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: 445b5ae666

ℹ️ 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/components/app-sidebar.ts Outdated
Comment on lines +723 to +724
${chatRows.length === 0
? this.renderChatFallback()

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 Avoid rendering Chat fallback when pins already cover chats

When every visible session is pinned (for example the current/only chat is pinned), chatRows is empty while pinnedRows already contains the real session. This branch then renders the generic Chat fallback as an additional active row under Chats, so the sidebar shows two active chat entries and a non-session link that can drop the session-specific URL. Gate the fallback on there being no active/pinned session, not just no unpinned rows.

Useful? React with 👍 / 👎.

@clawsweeper clawsweeper Bot added 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. and removed 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. labels Jul 5, 2026
@openclaw-barnacle openclaw-barnacle Bot added docs Improvements or additions to documentation channel: discord Channel integration: discord labels Jul 5, 2026
@clawsweeper clawsweeper Bot added the rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. label Jul 6, 2026
@openclaw-barnacle openclaw-barnacle Bot added the channel: telegram Channel integration: telegram label Jul 6, 2026
@steipete steipete changed the title feat(ui): Codex-style minimal sidebar — pinned/chats groups, icon footer, no brand header feat(ui): make the sidebar session-first and minimal Jul 6, 2026
@steipete
steipete force-pushed the claude/sidebar-bold-redesign branch from 6b59f92 to 447fb40 Compare July 6, 2026 00:54
@openclaw-barnacle openclaw-barnacle Bot removed channel: discord Channel integration: discord channel: imessage Channel integration: imessage channel: slack Channel integration: slack channel: telegram Channel integration: telegram app: android App: android app: ios App: ios app: macos App: macos gateway Gateway runtime labels Jul 6, 2026
@steipete

steipete commented Jul 6, 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 merge-risk: 🚨 compatibility 🚨 May break existing users, config, migrations, defaults, or upgrade paths. P2 Normal backlog priority with limited blast radius. proof: sufficient ClawSweeper judged the real behavior proof convincing. rating: 🐚 platinum hermit Good normal PR readiness with ordinary 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.

1 participant