Skip to content

feat: session-first sidebar, compact context ring, and warm light theme for the Control UI#99289

Merged
steipete merged 2 commits into
mainfrom
feat/control-ui-session-first-sidebar
Jul 3, 2026
Merged

feat: session-first sidebar, compact context ring, and warm light theme for the Control UI#99289
steipete merged 2 commits into
mainfrom
feat/control-ui-session-first-sidebar

Conversation

@steipete

@steipete steipete commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

Closes #99288

What Problem This Solves

Selecting and switching sessions — the most frequent operator action in the Control UI — was buried under a 14-tab page nav, a small dropdown select, and a 5-row recents list that stayed empty on a cold /chat load (sessions only loaded on other tabs). Session context usage occupied a full-width pill above the composer, the default light theme used a severe alarm-red accent on cool gray, and the composer chrome was heavier than it needed to be.

Why This Change Was Made

Rebuilds the sidebar around sessions (Codex/Claude-desktop style) and calms the rest of the chat surface: recents become the primary chat entry (10 rows, one-line, relative timestamps, active session always listed), the full session picker (search + pagination) moves behind a compact search button, sessions hydrate on cold chat boot, the context pill becomes a small ring dial in the composer toolbar, and the default light palette shifts to warm paper with an AA-audited terracotta accent (#bd4531, 4.9:1 on bg; text 10.4:1; muted 5.2:1). The chat nav group is dropped from the expanded sidebar since the session list is chat (the collapsed rail keeps its icon). Dead paths this replaces are deleted (sidebar dropdown select, sessionSwitcherOnly/compact picker variants, unused sidebar-search CSS): net −64 lines overall (−~500 non-generated source LOC; regenerated i18n bundles account for the rest).

Non-goals: dark palette (unchanged), mobile drawer controls, the Sessions tab, theme families (Knot/Dash untouched).

User Impact

  • Sidebar: + New session, RECENT list (10, one-line rows, live-run dot), session search button opening the full picker, All sessions →, tighter nav below. Recents populate immediately on a cold /chat load.
  • Composer: context usage is a small ring + percentage next to send (full detail in tooltip; compact button still appears at high pressure). Icon-only settings chip, filled circular send, softer accent focus ring.
  • Light mode: warm ivory surfaces, warm gray borders, terracotta accent; user bubbles are a soft peach instead of alert red. All recolors pass WCAG AA (audit comments in base.css).
  • Breadcrumb no longer repeats OpenClaw › OpenClaw when the agent is named OpenClaw; sidebar brand drops the CONTROL eyebrow.
  • Multi-agent installs keep an agent filter in the sidebar sessions section (hidden for single-agent installs), and sidebar selections (recents, search results, agent switch) always land in Chat. The provider quota pill ([Bug]: After 2026.6.6 no Codex usage\limit UI present in the Control UI Chat interface #93041) moves from the old sidebar session switcher to the sidebar footer so it stays visible on every tab, and auth status now hydrates once per connect so the pill also appears on direct non-chat loads.
  • The current session renders as a pinned row above recents, derived from the session key alone — it survives filtered, capped, or replaced session lists (archived/global/cron sessions included), uses the canonical alias contract, and a generic Chat row covers sentinel states. This replaces the removed Chat nav item as the guaranteed way back to the open chat.
  • Session lists hydrate on chat entry via a new backgroundHydrate load: it does not take the shared loading flag (New Session stays enabled), does not reconcile chat-run state (a stale snapshot racing a send cannot clear the live stream), preserves the selected session's row across capped/filtered pages within its agent scope, and is not fooled by the single-row result chat.startup seeds.

Evidence

Before/after screenshots (light + dark) below, captured with the repo's mocked-gateway E2E harness and synthetic fixture data; assets published via the Crabbox artifact store.

Before / after (light)

Before After
Control UI before, light mode Control UI after, light mode

Before / after (dark)

Before After
Control UI before, dark mode Control UI after, dark mode

Artifact manifest: https://artifacts.openclaw.ai/pr/openclaw-99289/artifact-manifest.json

  • pnpm tsgo:test:ui clean
  • Unit/browser: chat, run-controls, app-render, app-settings, controllers, navigation, gateway suites — 596 + 138 + 108 passed
  • Mocked-gateway E2E: chat-flow, picker pagination/search, quota pill ([Bug]: After 2026.6.6 no Codex usage\limit UI present in the Control UI Chat interface #93041) — 22 passed, including new coverage for the deferred-hydrate New Session guarantee and the pinned active row
  • pnpm ui:build clean; pnpm ui:i18n:check clean; touched files oxfmt --check clean
  • Codex autoreview (gpt-5.5), 15 iterative passes: 14 accepted findings fixed along the way (agent filter, chat-entry navigation, pinned-row invariants, alias-scope gating, background-hydrate races, mobile-drawer collapsed state, quota surface); final pass clean — "no accepted/actionable findings, patch is correct".

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

clawsweeper Bot commented Jul 3, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed July 3, 2026, 2:57 AM ET / 06:57 UTC.

Summary
The PR redesigns the Control UI chat sidebar around sessions, replaces the context-usage pill with a compact ring, warms the light theme, moves quota/auth status UI, updates docs/i18n, and adjusts UI tests.

PR surface: Source +291, Tests -357, Docs +2. Total -64 across 64 files.

Reproducibility: not applicable. this is a Control UI feature/UX PR rather than a broken-behavior report. The changed behavior is traceable in PR-head source and directly shown by before/after screenshots.

Review metrics: 2 noteworthy metrics.

  • Default UI surfaces changed: 1 light-theme default changed; 1 primary chat navigation pattern replaced. Both affect existing Control UI users immediately on upgrade and need maintainer product acceptance before merge.
  • Generated i18n fallback added: 1 English key propagated to 20 non-English locale bundles. The scoped UI guide treats those locale files as generated output, so the i18n sync and fallback are intentional review surfaces.

Stored data model
Persistent data-model change detected: serialized state: ui/src/ui/chat/session-controls.ts, serialized state: ui/src/ui/controllers/sessions.ts, unknown-data-model-change: ui/src/ui/chat/session-controls.ts, unknown-data-model-change: ui/src/ui/controllers/sessions.ts. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #99288
Summary: This PR is the active implementation candidate for the linked Control UI session-first sidebar, context-ring, and warm-theme feature issue; the older quota-pill regression is only an adjacent touched surface.

Members:

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

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:

  • Maintainer should decide whether the session-first sidebar and warm light palette should become the default Control UI experience.
  • Clear or rerun the current QA Smoke CI failure before landing.

Risk before merge

  • [P1] Merging changes the default Control UI light palette and primary chat/session navigation for existing users, so maintainer product acceptance is needed even without a blocking code finding.
  • [P1] Latest live status has QA Smoke CI failing on the PR head; it should be cleared or rerun before landing, though it is not a line-level finding on this UI diff.

Maintainer options:

  1. Accept the default UI shift
    A maintainer can land this after explicitly accepting the session-first navigation and warm light palette as default behavior for existing Control UI users.
  2. Narrow the default change
    If the default shift is too broad, keep the existing navigation or light palette as default and gate the new experience behind maintainer-approved product direction.
  3. Pause product direction
    If the linked feature issue is not accepted, pause or close the PR rather than merging a broad default Control UI redesign.

Next step before merge

  • [P2] Protected maintainer label and broad default Control UI product-direction changes require human review; no narrow automated repair remains.

Security
Cleared: The diff is limited to Control UI source/styles, docs, generated locale bundles, and tests; no workflow, dependency, lockfile, package execution, secret, or permission surface changed.

Review details

Best possible solution:

Let maintainers decide whether the session-first sidebar and warm light palette should become the default Control UI experience, then land only after the current CI failure is cleared.

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

Not applicable; this is a Control UI feature/UX PR rather than a broken-behavior report. The changed behavior is traceable in PR-head source and directly shown by before/after screenshots.

Is this the best way to solve the issue?

Mostly yes; the branch uses existing Control UI session APIs and keeps hydration/session-row invariants near the session/controller boundary. Final acceptance is a maintainer product decision because the PR changes defaults and primary navigation.

AGENTS.md: found and applied where relevant.

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

Label changes

Label justifications:

  • P2: This is a broad but bounded Control UI feature PR touching the primary session-switching workflow, without evidence of an urgent runtime outage.
  • merge-risk: 🚨 compatibility: The PR changes existing users' default light theme and primary chat/session navigation rather than adding only an opt-in path.
  • 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): Before/after screenshots from the artifact manifest directly show the changed sidebar, light theme, quota placement, and compact context ring after the patch.
  • proof: sufficient: Contributor real behavior proof is sufficient. Before/after screenshots from the artifact manifest directly show the changed sidebar, light theme, quota placement, and compact context ring after the patch.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Before/after screenshots from the artifact manifest directly show the changed sidebar, light theme, quota placement, and compact context ring after the patch.
Evidence reviewed

PR surface:

Source +291, Tests -357, Docs +2. Total -64 across 64 files.

View PR surface stats
Area Files Added Removed Net
Source 54 823 532 +291
Tests 8 151 508 -357
Docs 2 15 13 +2
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 64 989 1053 -64

What I checked:

  • Repository policy read: Root AGENTS.md and scoped UI/docs AGENTS.md were read fully; the protected-label, broad product-direction, generated i18n, and merge-risk guidance affected this review. (AGENTS.md:1, e878efe9508e)
  • Current main still has the old sidebar pattern: Current main renders a sidebar session select with the compact/sessionSwitcherOnly path and caps recent sessions to five rows, so the central sidebar change is not already implemented on main. (ui/src/ui/app-render.ts:531, e878efe9508e)
  • PR head implements session-first sidebar: PR head renders New Session, session search, an agent filter, a pinned active session or Chat fallback, capped recents, and an All Sessions link before the page navigation. (ui/src/ui/app-render.ts:629, 32c673429ccc)
  • PR head protects background session hydration: The new backgroundHydrate path skips the shared sessions-loading flag, avoids chat-run reconciliation from stale snapshots, and preserves the selected session row when the fetched page omits it. (ui/src/ui/controllers/sessions.ts:1076, 32c673429ccc)
  • PR head hydrates sessions on chat entry: The chat refresh path captures whether sessions were loaded before refreshChat and starts a background sessions.list load on startup or first chat entry. (ui/src/ui/app-settings.ts:505, 32c673429ccc)
  • PR head implements the context ring: The context notice now renders a compact SVG ring with percent text, a title/ARIA summary, and the existing compact action instead of the wide textual notice. (ui/src/ui/chat/context-notice.ts:112, 32c673429ccc)

Likely related people:

  • steipete: GitHub history shows recent Control UI session-control, startup metadata, and docs work by steipete on the central files this PR changes, beyond authorship of this branch. (role: recent area contributor and current implementation author; confidence: high; commits: 2b30951b8090, 4932391e8a78, 6b940ed3ca8f; files: ui/src/ui/chat/session-controls.ts, ui/src/ui/controllers/sessions.ts, docs/web/control-ui.md)
  • BunsDev: Recent history credits BunsDev with Control UI accessibility/theme work and the persistent context-usage feature that this PR changes into a ring. (role: adjacent UI theme and context-usage contributor; confidence: medium; commits: 0849cac106d1, 5a90179e8fdf, da773175f2eb; files: ui/src/styles/base.css, ui/src/ui/chat/context-notice.ts)
  • vincentkoc: Recent current-main history shows vincentkoc touching app-render, session-controls, context-notice formatting, and chat startup settings near this PR's decision surfaces. (role: recent adjacent UI/session contributor; confidence: medium; commits: 2b75806197ab, 29ec5b331c11, 45f935887769; files: ui/src/ui/app-render.ts, ui/src/ui/chat/session-controls.ts, ui/src/ui/chat/context-notice.ts)
  • Pick-cat: Recent history shows Pick-cat restored the provider usage quota pill in the sidebar session switcher, which this PR moves to the sidebar footer. (role: recent sidebar quota repair contributor; confidence: medium; commits: cf31689a03a7; files: ui/src/ui/chat/session-controls.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.

@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: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. P2 Normal backlog priority with limited blast radius. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. merge-risk: 🚨 compatibility 🚨 May break existing users, config, migrations, defaults, or upgrade paths. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. labels Jul 3, 2026
@steipete
steipete force-pushed the feat/control-ui-session-first-sidebar branch from d512327 to 32c6734 Compare July 3, 2026 06:39
@steipete
steipete merged commit bb72443 into main Jul 3, 2026
126 of 127 checks passed
@steipete
steipete deleted the feat/control-ui-session-first-sidebar branch July 3, 2026 07:32
@steipete

steipete commented Jul 3, 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: 📸 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.

Control UI: session-first sidebar, compact context ring, warmer light theme

1 participant