Skip to content

fix(control-ui): declutter Settings and make Simple/Advanced switch persistent - #100147

Merged
steipete merged 1 commit into
mainfrom
claude/charming-kilby-c23291
Jul 5, 2026
Merged

steipete merged 1 commit into
mainfrom
claude/charming-kilby-c23291

Conversation

@steipete

@steipete steipete commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Closes #100145

What Problem This Solves

Fixes an issue where the Control UI Settings page (/config) was cluttered and had a one-way trap into Advanced mode.

  • The Appearance card was squeezed into a narrow side column, so its four segmented controls (Theme, Mode, Roundness, Text size) wrapped onto multiple lines, the "Roundness" label was clipped by its control, and the "Import" theme option orphaned onto its own row.
  • The Context Profile card printed every preset's numbers twice (grid + a side "stat" panel) and showed a red "selected but not saved yet" pending banner even when nothing was staged, because the quick view was never given the saved config to diff against.
  • After clicking Advanced ›, the only way back to the simple view was a small "Quick Settings" text button buried at the top of the accordion section list — nothing where the user had just clicked. Users concluded they were stuck.

Why This Change Was Made

The redesign turns Quick Settings into a calmer dashboard and makes the simple/advanced choice a persistent, symmetric control:

  • Persistent Simple / Advanced switch in the page header (config-page.ts), replacing the one-way "Advanced ›" button and the buried in-accordion "Quick Settings" back link. A mirrored in-body toggle row shows only at the mobile breakpoint, where the page header is hidden — so mobile users are never stranded in Advanced mode.
  • Appearance card now spans the full row and lays its four controls out in an auto-fitting grid with equal-width segments, so nothing wraps or clips at any width.
  • Context Profile card drops the duplicate side panel for a single compact "current values" summary line, and only claims Pending when a change is actually staged (savedConfigObject is now passed so the diff is real).
  • General declutter: removed the redundant in-page "Quick Settings" heading (the page already has a "Settings" title), tightened card shadows/hover, and simplified the Personal card. Net ‑655 lines across the two largest files.

No config, protocol, or storage contract changes — this is presentation only within ui/src/pages/config and its stylesheet.

User Impact

  • Settings reads as one clean dashboard instead of competing panels; the Appearance controls no longer wrap or overlap.
  • Switching between Simple and Advanced is always one obvious click, in the same place, in both directions — on desktop and mobile.
  • The Context Profile card no longer cries "Pending" when nothing changed.

Evidence

Before / After — Quick Settings (desktop)

Before After
before after

Advanced view — the way back

Before (only a buried "Quick Settings" link) After (persistent Simple/Advanced switch, top-right)
before advanced after advanced

Mobile — the page header is hidden at ≤768px, so the switch is mirrored into an in-body row (verified in Advanced mode; the Simple button returns to the quick view):

after mobile advanced

Validation (local, worktree checkout against a scratch gateway):

  • node scripts/run-vitest.mjs ui/src/pages/config/quick.test.ts ui/src/pages/config/presets.test.ts → 19 passed
  • node scripts/run-vitest.mjs ui/src/pages/config/view.browser.test.ts → 27 passed
  • node scripts/run-tsgo.mjs -p tsconfig.core.json → clean (covers ui/**)
  • oxfmt --check on all touched files → clean
  • Codex autoreview (autoreview --mode local) → clean after the mobile-visibility fix (it caught the original header-only toggle stranding mobile users; addressed by the mirrored in-body row).
  • Before/after screenshots captured with Playwright against the live dev Control UI.

…ersistent

Quick Settings read as competing panels and the Appearance card wrapped/clipped
its segmented controls in a narrow side column. Switching to Advanced also had
no visible way back — the only return was a "Quick Settings" link buried in the
accordion nav.

- Replace the one-way "Advanced" button and buried accordion back link with a
  persistent Simple/Advanced switch in the page header, mirrored into an in-body
  row at the mobile breakpoint where the header is hidden.
- Give Appearance a full-width auto-fit grid so Theme/Mode/Roundness/Text size
  never wrap or clip.
- Drop the duplicate Context Profile side panel for a compact summary line, and
  only show "Pending" when a change is actually staged (pass savedConfigObject).
- Remove the redundant in-page "Quick Settings" heading and unused preset copy.

Closes #100145
@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui size: L 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 4, 2026, 10:49 PM ET / 02:49 UTC.

Summary
The branch moves the Settings Simple/Advanced switch into ConfigPage, declutters Quick Settings layout and presets, passes saved config into profile diffing, and updates focused UI tests/styles.

PR surface: Source -348, Tests -6. Total -354 across 6 files.

Reproducibility: Do we have a high-confidence way to reproduce the issue? Yes, at source level: current main still has the quick-only Advanced button, the buried accordion return link, the narrow Appearance side stack, and the missing saved-config comparison path described by the linked issue.

Review metrics: none identified.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #100145
Summary: This PR is the focused candidate fix for the linked Settings page clutter and Advanced return-path issue.

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:

  • none.

Next step before merge

  • [P2] The remaining action is maintainer review/landing for a protected-label PR; ClawSweeper should not queue an automated repair for this clean patch.

Security
Cleared: The diff is limited to Control UI TypeScript, CSS, and tests with no dependency, workflow, secret, package, or executable supply-chain surface changed.

Review details

Best possible solution:

Have maintainers review and land this PR as the linked Settings UX fix after protected-label handling; no separate automated repair is needed.

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

Do we have a high-confidence way to reproduce the issue? Yes, at source level: current main still has the quick-only Advanced button, the buried accordion return link, the narrow Appearance side stack, and the missing saved-config comparison path described by the linked issue.

Is this the best way to solve the issue?

Is this the best way to solve the issue? Yes; moving the mode switch to ConfigPage covers both quick and advanced views, while passing savedConfigObject fixes the false Pending state without config, protocol, or storage changes.

AGENTS.md: found and applied where relevant.

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

Label changes

Label justifications:

  • P2: This is a normal-priority Control UI bugfix with limited blast radius and no security, data-loss, or core-runtime outage signal.
  • 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 provides after-fix desktop and mobile screenshots from a live dev Control UI plus focused validation commands, and the inspected screenshots directly show the changed UI behavior.
  • proof: sufficient: Contributor real behavior proof is sufficient. The PR body provides after-fix desktop and mobile screenshots from a live dev Control UI plus focused validation commands, and the inspected screenshots directly show the changed UI behavior.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The PR body provides after-fix desktop and mobile screenshots from a live dev Control UI plus focused validation commands, and the inspected screenshots directly show the changed UI behavior.
Evidence reviewed

PR surface:

Source -348, Tests -6. Total -354 across 6 files.

View PR surface stats
Area Files Added Removed Net
Source 5 233 581 -348
Tests 1 4 10 -6
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 6 237 591 -354

What I checked:

Likely related people:

  • steipete: Current main blame for the moved config-page/quick-settings files points to recent Control UI work by this author, and this PR is their focused fix for the linked issue. (role: recent area contributor and current proposer; confidence: high; commits: 619fee1b4ff1, 84ec0c27bf75, 83ec1bb8d26c; files: ui/src/pages/config/config-page.ts, ui/src/pages/config/quick.ts, ui/src/styles/config-quick.css)
  • BunsDev: Merged history shows the settings/quick-settings overhaul and subsequent quick-settings layout polish were authored by this contributor, including the side-stack layout this PR replaces. (role: original settings UX contributor; confidence: high; commits: 2cfb660a9bb8, 5e8cb77e7917, 3156d94bcab0; files: ui/src/pages/config/quick.ts, ui/src/styles/config-quick.css)
  • shakkernerd: The recent Control UI architecture refactor moved the Settings page into the current route-owned files this PR changes. (role: recent architecture contributor; confidence: medium; commits: 65e12328aa20; files: ui/src/pages/config/config-page.ts, ui/src/pages/config/quick.ts, ui/src/styles/config-quick.css)
  • jeffjhunter: Recent merged work added Browser enabled and Tool profile Quick Settings controls that share the stacked segmented-control styling touched by this PR. (role: adjacent quick-settings contributor; confidence: medium; commits: 3247b091d6ff; files: ui/src/pages/config/quick.ts, ui/src/styles/config-quick.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 (1 earlier review cycle)
  • reviewed 2026-07-05T02:36:48.337Z sha 83ec1bb :: needs maintainer review before merge. :: none

@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. P2 Normal backlog priority with limited blast radius. labels Jul 5, 2026
@steipete
steipete merged commit 9b60e14 into main Jul 5, 2026
130 of 136 checks passed
@steipete
steipete deleted the claude/charming-kilby-c23291 branch July 5, 2026 06:20
github-actions Bot pushed a commit to Desicool/openclaw that referenced this pull request Jul 5, 2026
…ersistent (openclaw#100147)

Quick Settings read as competing panels and the Appearance card wrapped/clipped its segmented controls in a narrow side column. Switching to Advanced also had no visible way back — the only return was a "Quick Settings" link buried in the accordion nav.

- Replace the one-way "Advanced" button and buried accordion back link with a persistent Simple/Advanced switch in the page header, mirrored into an in-body row at the mobile breakpoint where the header is hidden.
- Give Appearance a full-width auto-fit grid so Theme/Mode/Roundness/Text size never wrap or clip.
- Drop the duplicate Context Profile side panel for a compact summary line, and only show "Pending" when a change is actually staged (pass savedConfigObject).
- Remove the redundant in-page "Quick Settings" heading and unused preset copy.

Presentation-only within ui/src/pages/config; net -354 non-test LOC. Closes openclaw#100145.
ObliviateRickLin added a commit to ObliviateRickLin/openclaw that referenced this pull request Jul 11, 2026
…, rebased on refactored view)

Rebased onto the current Settings view after the openclaw#100147 declutter + Control UI
architecture refactor moved the toolbar. Routes the Settings toolbar chrome through
`t("settings.*")` in `ui/src/pages/config/view.ts`: Form/Raw mode toggle + tooltips,
unsaved-changes/no-changes badge, raw-mode-disabled notice, Open/Clear, Apply/Applying,
Update/Updating, and the search input placeholder/aria labels (Save uses the existing
`common.save`/`common.saving`). Adds the `settings` block to `en.ts` and regenerates
locale bundles + `.i18n` metadata via `pnpm ui:i18n:sync`.

zh-CN and zh-TW resolve to native translations from the translation memory
(表单/原始/清除/应用/更新/搜索设置…); remaining locales fall back to English pending the
provider-backed translation pass, per the documented i18n pipeline. `ui:i18n:check`
clean, `ui:build` passes.
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 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: 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.

fix(control-ui): Settings page is cluttered and Advanced mode has no visible way back

1 participant