Skip to content

feat(ui): wire seamColor from bootstrap config to CSS custom properties (fixes #56068)#92949

Closed
liuhao1024 wants to merge 1 commit into
openclaw:mainfrom
liuhao1024:fix/ui-seamcolor-bootstrap-wiring
Closed

feat(ui): wire seamColor from bootstrap config to CSS custom properties (fixes #56068)#92949
liuhao1024 wants to merge 1 commit into
openclaw:mainfrom
liuhao1024:fix/ui-seamcolor-bootstrap-wiring

Conversation

@liuhao1024

@liuhao1024 liuhao1024 commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

Summary

Wire the ui.seamColor config setting from openclaw.json through the gateway bootstrap endpoint to the frontend CSS custom properties. Previously, the setting was validated and stored but never included in the /control-ui-config.json response, so the frontend had no way to read it.

Changes

  • src/gateway/control-ui-contract.ts: Add seamColor?: string to ControlUiBootstrapConfig type
  • src/gateway/control-ui.ts: Include seamColor: config?.ui?.seamColor in the bootstrap config JSON response
  • ui/src/ui/controllers/control-ui-bootstrap.ts: Read seamColor from bootstrap config and apply it as CSS custom properties (--accent, --accent-muted, --accent-subtle, --accent-glow, --accent-hover, --primary) via applySeamColor() helper

Real behavior proof

  • Behavior addressed: ui.seamColor config setting is ignored by the web UI frontend

  • Environment tested: macOS 26.4.1, Node.js v24, pnpm build

  • Steps run after the patch:

    1. pnpm build — full project build including UI bundle
    2. node scripts/run-vitest.mjs run src/gateway/control-ui.http.test.ts — gateway bootstrap endpoint tests
    3. node scripts/run-vitest.mjs run ui/src/ui/controllers/control-ui-bootstrap.test.ts — frontend bootstrap loader tests
    4. grep -n seamColor across all 3 changed files to verify wiring

  • Evidence after fix:

$ grep -n 'seamColor' src/gateway/control-ui-contract.ts src/gateway/control-ui.ts ui/src/ui/controllers/control-ui-bootstrap.ts
src/gateway/control-ui-contract.ts:23:  seamColor?: string;
src/gateway/control-ui.ts:982:      seamColor: config?.ui?.seamColor,
ui/src/ui/controllers/control-ui-bootstrap.ts:139:    if (typeof parsed.seamColor === "string" && parsed.seamColor) {
ui/src/ui/controllers/control-ui-bootstrap.ts:140:      applySeamColor(parsed.seamColor);

$ pnpm build
✓ built in 504ms
[build-all] ui:build done in 1.27s

$ node scripts/run-vitest.mjs run src/gateway/control-ui.http.test.ts
✓  gateway-core  (56 tests) 305ms
✓  gateway-server  (56 tests) 277ms
✓  gateway-client  (56 tests) 288ms
✓  gateway-methods  (56 tests) 272ms
Test Files  4 passed (4)
     Tests  224 passed (224)

$ node scripts/run-vitest.mjs run ui/src/ui/controllers/control-ui-bootstrap.test.ts
✓  ui  (10 tests) 4ms
Test Files  1 passed (1)
     Tests  10 passed (10)
  • Observed result after fix: seamColor now flows from openclaw.json → gateway bootstrap JSON → frontend CSS custom properties. The applySeamColor() function sets --accent, --accent-muted, --primary, --accent-subtle, --accent-glow, and --accent-hover on document.documentElement. All existing tests pass.
  • What was not tested: Live browser rendering with a custom seamColor value (requires running gateway + browser). The CSS color-mix() and oklch() functions are used for derived colors — browser compatibility for oklch(from ...) is wrapped in try/catch as a graceful fallback.

@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui gateway Gateway runtime size: XS proof: supplied External PR includes structured after-fix real behavior proof. labels Jun 14, 2026
@clawsweeper

clawsweeper Bot commented Jun 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Codex review: needs real behavior proof before merge. Reviewed June 14, 2026, 7:29 AM ET / 11:29 UTC.

Summary
The PR adds seamColor to the Control UI bootstrap JSON contract, sends config.ui.seamColor from the gateway, and applies it to several CSS custom properties in the browser loader.

PR surface: Source +28. Total +28 across 3 files.

Reproducibility: yes. at source level. Current main accepts ui.seamColor and exposes it through talk.config, while the Control UI bootstrap payload and browser loader omit it; I did not run a live browser repro in this read-only review.

Review metrics: 1 noteworthy metric.

  • Bootstrap contract fields: 1 added (seamColor). This extends the authenticated Control UI bootstrap payload, so maintainers should verify the browser semantics and tests for the new runtime field before merge.

Merge readiness
Overall: 🦪 silver shellfish
Proof: 🦪 silver shellfish
Patch quality: 🦐 gold shrimp
Result: blocked until real behavior proof from a real setup is added.

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

Rank-up moves:

  • Update the CSS variable mapping so ui.seamColor covers focus/ring tokens and clears overrides when the setting is removed.
  • [P1] Add focused gateway and loader tests for the seamColor payload, application, and absent-value reset path.
  • [P1] Add real browser evidence showing a custom color affecting visible controls and focus states, with private details redacted.

Proof guidance:

  • [P1] Needs real behavior proof before merge: The PR supplies build, targeted Vitest, and grep output, but no after-fix browser rendering or diagnostic proof for the visible Control UI color behavior. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.

Mantis proof suggestion
A short browser visual proof would materially help because the change is about visible Control UI colors and focus states. A maintainer can ask Mantis to capture proof by posting a new PR comment that starts with the OpenClaw Mantis account mention, followed by:

visual task: verify Control UI with ui.seamColor #00846F applies custom accent to buttons, navigation, and focus rings after gateway bootstrap.

Risk before merge

  • [P1] The visible browser behavior is unproven: the submitted proof is build/unit-test/grep output and explicitly excludes live browser rendering with a custom ui.seamColor.
  • [P1] The current patch would still leave focus/ring states on the old theme color and can leave stale inline color overrides after the config value is removed during a reconnect.

Maintainer options:

  1. Decide the mitigation before merge
    Keep the bootstrap wiring approach, but apply and clear the full Control UI accent/focus token set with focused regression tests and real browser proof.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P1] The PR needs author or maintainer changes plus contributor-visible browser proof; this should stay human-gated rather than queued for automated repair while real behavior proof is missing.

Security
Cleared: No concrete security or supply-chain regression found; the diff only carries an existing validated hex config value through authenticated bootstrap JSON into CSS custom properties.

Review findings

  • [P2] Apply seamColor to focus tokens — ui/src/ui/controllers/control-ui-bootstrap.ts:149
  • [P2] Reset seamColor overrides when config removes it — ui/src/ui/controllers/control-ui-bootstrap.ts:139-140
Review details

Best possible solution:

Keep the bootstrap wiring approach, but apply and clear the full Control UI accent/focus token set with focused regression tests and real browser proof.

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

Yes, at source level. Current main accepts ui.seamColor and exposes it through talk.config, while the Control UI bootstrap payload and browser loader omit it; I did not run a live browser repro in this read-only review.

Is this the best way to solve the issue?

No, not as submitted. The bootstrap path is the right layer, but the patch should cover focus/ring tokens and reset absent values instead of only setting a subset of accent variables.

Full review comments:

  • [P2] Apply seamColor to focus tokens — ui/src/ui/controllers/control-ui-bootstrap.ts:149
    The linked bug includes focus rings, but this helper only updates accent/primary tokens. base.css keeps --ring red and derives --focus-ring/--focus-glow from it, so focus-visible states remain on the default theme color after configuring ui.seamColor; update the ring/focus variables or reuse the existing theme token derivation.
    Confidence: 0.88
  • [P2] Reset seamColor overrides when config removes it — ui/src/ui/controllers/control-ui-bootstrap.ts:139-140
    The loader only writes inline variables when the new payload has a value. Because the same page re-runs bootstrap on reconnect, removing ui.seamColor from config leaves the prior inline custom properties on documentElement and the UI stays custom-colored until a full reload; clear the overridden variables when the field is absent or invalid.
    Confidence: 0.82

Overall correctness: patch is incorrect
Overall confidence: 0.86

AGENTS.md: found and applied where relevant.

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

Label changes

Label changes:

  • add P2: This is a bounded Control UI configuration fix, but the PR currently misses part of the reported visible behavior and needs browser proof before merge.
  • add rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🦐 gold shrimp.
  • add status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs real behavior proof before merge: The PR supplies build, targeted Vitest, and grep output, but no after-fix browser rendering or diagnostic proof for the visible Control UI color behavior. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.

Label justifications:

  • P2: This is a bounded Control UI configuration fix, but the PR currently misses part of the reported visible behavior and needs browser proof before merge.
  • rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🦐 gold shrimp.
  • status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs real behavior proof before merge: The PR supplies build, targeted Vitest, and grep output, but no after-fix browser rendering or diagnostic proof for the visible Control UI color behavior. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
Evidence reviewed

PR surface:

Source +28. Total +28 across 3 files.

View PR surface stats
Area Files Added Removed Net
Source 3 28 0 +28
Tests 0 0 0 0
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 3 28 0 +28

What I checked:

  • Root and scoped policy read: Read the full root AGENTS.md plus src/gateway, src/gateway/server-methods, and ui scoped AGENTS.md files; the config/bootstrap and UI review guidance applied to this PR. (AGENTS.md:1, 0716ebc1e55b)
  • Current main still has the bootstrap gap: On current origin/main, the bootstrap contract and payload include chatMessageMaxWidth but no seamColor, and the browser loader only parses chatMessageMaxWidth from the bootstrap payload. (ui/src/ui/controllers/control-ui-bootstrap.ts:135, 0716ebc1e55b)
  • Existing config contract accepts seamColor: The config schema accepts ui.seamColor as an optional hex color, so the PR is wiring an existing config field rather than adding a new config option. (src/config/zod-schema.ts:701, 0716ebc1e55b)
  • Sibling config path already exposes seamColor: talk.config already reads snapshot.config.ui?.seamColor and returns it in configPayload.ui, confirming the remaining issue is the Control UI bootstrap/browser path. (src/gateway/server-methods/talk.ts:581, 0716ebc1e55b)
  • Focus tokens are separate from accent tokens: Current UI CSS defines --ring, --focus, --focus-ring, and --focus-glow separately from --accent/--primary, so updating only accent/primary leaves focus states on the old color. (ui/src/styles/base.css:36, 0716ebc1e55b)
  • PR diff inspected: The PR adds one bootstrap field, one gateway payload field, and an applySeamColor helper that updates accent/primary custom properties but not ring/focus reset behavior. (ui/src/ui/controllers/control-ui-bootstrap.ts:139, 0cdfafd7f512)

Likely related people:

  • steipete: Introduced ui.seamColor and has recent gateway/Control UI documentation and runtime-helper history in the same area. (role: introduced behavior and recent adjacent contributor; confidence: high; commits: d2ac672f47cd, 15afc1d34c9c, 12a56d4d46dd; files: src/config/types.openclaw.ts, src/config/zod-schema.ts, docs/gateway/configuration-reference.md)
  • jacobtomlinson: Changed the exact Control UI bootstrap contract, gateway response, browser loader, and adjacent tests in the historical bootstrap payload refactor. (role: bootstrap payload contributor; confidence: high; commits: c5c10adc022f; files: src/gateway/control-ui-contract.ts, src/gateway/control-ui.ts, ui/src/ui/controllers/control-ui-bootstrap.ts)
  • BunsDev: Recent history on Control UI theme/focus and custom theme token behavior makes this person relevant to the incomplete CSS token mapping. (role: UI theme and focus-state contributor; confidence: medium; commits: 0849cac106d1, ead8be96fdd6, 5fce2f6b0fb1; files: ui/src/styles/base.css, ui/src/ui/custom-theme.ts, ui/src/ui/controllers/control-ui-bootstrap.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 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. labels Jun 14, 2026
@liuhao1024

liuhao1024 commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Closing to manage open PR capacity. The fix is still valid on current main — will resubmit when capacity allows.

@liuhao1024 liuhao1024 closed this Jun 14, 2026
This was referenced Jun 16, 2026
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

app: web-ui App: web-ui gateway Gateway runtime P2 Normal backlog priority with limited blast radius. proof: supplied External PR includes structured after-fix real behavior proof. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. size: XS status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@liuhao1024