UI: add corner radius slider and appearance polish by BunsDev · Pull Request #49436 · openclaw/openclaw

BunsDev · 2026-03-18T04:02:00Z

Summary

Unify border radii across all three themes (Claw, Knot, Dash) by removing per-theme radius overrides, so every theme starts from the same baseline values.
Add a Roundness slider (0–100) to the Appearance settings, allowing users to adjust corner radius across the entire UI from sharp to fully rounded.
Polish focus styles, hover effects, accent color variables, and mobile layout for chat, config, and layout components.
Harden form-utils against prototype-pollution and add click-to-reveal for redacted env vars in config UI.

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Related: N/A

User-visible / Behavior Changes

New "Roundness" slider in Settings > Appearance lets users scale corner radii from fully sharp (0) to double the defaults (100), with 50 as the default matching the current look.
Dash theme no longer overrides corner radii to near-square values — all themes now share the same base radii, adjustable via the slider.

Security Impact (required)

New permissions/capabilities? No
Secrets/tokens handling changed? No
New/changed network calls? No
Command/tool execution surface changed? No
Data access scope changed? No

Repro + Verification

Environment

OS: macOS
Runtime/container: Node 22+, Bun
Model/provider: N/A (UI-only)
Integration/channel (if any): Control UI
Relevant config (redacted): N/A

Steps

Open Control UI → Settings → Appearance
Locate the "Roundness" slider below Theme Mode
Drag between 0 (sharp) and 100 (round) — preview swatches and full UI update live

Expected

Slider updates all --radius-* CSS custom properties in real time
Setting persists across page reloads
Default value (50) matches the current baseline look

Actual

Works as expected

Evidence

Failing test/log before + passing after
All 26 relevant UI tests pass after changes

Human Verification (required)

Verified scenarios: slider at 0/50/100, page reload persistence, all three themes
Edge cases checked: boundary values (0, 100), missing/invalid persisted value falls back to 50
What you did not verify: other browsers beyond Chrome/Safari

Review Conversations

I replied to or resolved every bot review conversation I addressed in this PR.
I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

Backward compatible? Yes
Config/env changes? No
Migration needed? No

Failure Recovery (if this breaks)

How to disable/revert this change quickly: revert the commit; the default (50) matches the original look
Files/config to restore: N/A — setting auto-defaults to 50 if missing
Known bad symptoms reviewers should watch for: square corners on Dash theme (intentionally removed per unification)

Risks and Mitigations

Risk: Dash theme users may notice their previously square corners are now rounded by default.
- Mitigation: They can set the slider to 0 for a sharp look, which is sharper than the old Dash defaults.

Made with Cursor

…accent colors and optimize spacing rules in layout files.

…djust focus states for chat components and layout elements.

…x-shadow effects for improved accessibility and visual consistency.

…n user settings, update CSS variables for new themes, and enhance security by preventing prototype pollution in form utilities.

…roundness, update CSS styles for sliders, and integrate border radius adjustments across components.

…to simplify configuration and enhance consistency across components.

…, adjust padding and grid structures, and implement bottom navigation for improved usability on smaller screens.

greptile-apps · 2026-03-18T04:05:08Z

Greptile Summary

This PR delivers three related improvements to the Control UI: (1) a new Roundness slider in Appearance settings that scales all --radius-* CSS custom properties live via applyBorderRadius, persisted in UiSettings; (2) a full theme redesign for Dash (warm amber/chocolate palette) and Knot (blue accent), with per-theme radius overrides removed so the slider controls all themes uniformly; and (3) a collection of polish changes — mobile responsive layouts, focus/hover style refinements, prototype-pollution hardening in form-utils, and click-to-reveal for redacted env vars.

Key points:

applyBorderRadius correctly guards against SSR and scales five --radius-* properties linearly; --radius-full (used for pills/circles) is intentionally left untouched.
Prototype-pollution hardening in setPathValue / removePathValue is solid and well-tested.
The "caps persisted session scopes to the most recent gateways" test in storage.node.test.ts was rewritten to use a single gateway URL for all 12 iterations, so it no longer validates the eviction/cap behavior it originally covered — this is a test coverage regression worth addressing.
setBorderRadius in app.ts calls applyBorderRadius twice per invocation (once directly, once via applySettingsInternal); harmless but redundant.
The light/dark Mode picker is removed from the Appearance settings section and is now accessible only via the topbar toggle — a deliberate UX simplification.

Confidence Score: 3/5

Safe to merge with minor issues — the only meaningful concern is a test coverage regression that leaves gateway-session eviction logic untested.
The feature implementation is clean and well-structured. The prototype-pollution hardening, storage validation, and CSS variable approach are all solid. Score is held back by the storage.node.test.ts test regression where the "caps persisted session scopes" test no longer exercises multi-gateway eviction, leaving a coverage gap on a non-trivial storage invariant.
ui/src/ui/storage.node.test.ts — the gateway-session eviction test needs to be restored to actually test scoping across multiple distinct gateway URLs.

Comments Outside Diff (2)

ui/src/ui/storage.node.test.ts, line 1604-1640 (link)

"caps persisted session scopes" test no longer validates the cap

The test was rewritten to use the same gwUrl for all 12 save iterations, which means sessionsByGateway will only ever contain one entry (for that single URL, overwritten 12 times). The assertions were changed accordingly to only verify the final session value for that one gateway.

The original test specifically verified that when more than 10 unique gateway URLs accumulate in sessionsByGateway, the oldest entries are evicted — this invariant is no longer exercised. The cap logic in storage.ts remains in the codebase but is now untested.

Suggested fix: restore distinct gateway URLs across the loop iterations so that the eviction behavior can be verified, e.g.:

for (let i = 0; i < 12; i += 1) {
  saveSettings({
    gatewayUrl: `wss://gateway-${i}.example:8443/openclaw`,
    ...
  });
}
// then verify only the 10 most recent gateways are retained
const scopes = Object.keys(persisted.sessionsByGateway ?? {});
expect(scopes).toHaveLength(10);
expect(scopes).not.toContain("wss://gateway-0.example:8443/openclaw");
expect(scopes).toContain("wss://gateway-11.example:8443/openclaw");

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/ui/storage.node.test.ts
Line: 1604-1640

Comment:
**"caps persisted session scopes" test no longer validates the cap**

The test was rewritten to use the same `gwUrl` for all 12 save iterations, which means `sessionsByGateway` will only ever contain one entry (for that single URL, overwritten 12 times). The assertions were changed accordingly to only verify the final session value for that one gateway.

The original test specifically verified that when more than 10 unique gateway URLs accumulate in `sessionsByGateway`, the oldest entries are evicted — this invariant is no longer exercised. The cap logic in `storage.ts` remains in the codebase but is now untested.

Suggested fix: restore distinct gateway URLs across the loop iterations so that the eviction behavior can be verified, e.g.:

```ts
for (let i = 0; i < 12; i += 1) {
  saveSettings({
    gatewayUrl: `wss://gateway-${i}.example:8443/openclaw`,
    ...
  });
}
// then verify only the 10 most recent gateways are retained
const scopes = Object.keys(persisted.sessionsByGateway ?? {});
expect(scopes).toHaveLength(10);
expect(scopes).not.toContain("wss://gateway-0.example:8443/openclaw");
expect(scopes).toContain("wss://gateway-11.example:8443/openclaw");
```

How can I resolve this? If you propose a fix, please make it concise.

ui/src/ui/app.ts, line 1169-1176 (link)

Redundant applyBorderRadius call

applyBorderRadius(value) is called explicitly on line 1170, but then applySettingsInternal(...) is immediately called with the updated settings, and applySettings in app-settings.ts also calls applyBorderRadius(next.borderRadius). This results in two identical DOM property writes per user interaction.

The explicit call can be dropped since applySettingsInternal already handles it:

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/ui/app.ts
Line: 1169-1176

Comment:
**Redundant `applyBorderRadius` call**

`applyBorderRadius(value)` is called explicitly on line 1170, but then `applySettingsInternal(...)` is immediately called with the updated settings, and `applySettings` in `app-settings.ts` also calls `applyBorderRadius(next.borderRadius)`. This results in two identical DOM property writes per user interaction.

The explicit call can be dropped since `applySettingsInternal` already handles it:



How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: ui/src/ui/storage.node.test.ts
Line: 1604-1640

Comment:
**"caps persisted session scopes" test no longer validates the cap**

The test was rewritten to use the same `gwUrl` for all 12 save iterations, which means `sessionsByGateway` will only ever contain one entry (for that single URL, overwritten 12 times). The assertions were changed accordingly to only verify the final session value for that one gateway.

The original test specifically verified that when more than 10 unique gateway URLs accumulate in `sessionsByGateway`, the oldest entries are evicted — this invariant is no longer exercised. The cap logic in `storage.ts` remains in the codebase but is now untested.

Suggested fix: restore distinct gateway URLs across the loop iterations so that the eviction behavior can be verified, e.g.:

```ts
for (let i = 0; i < 12; i += 1) {
  saveSettings({
    gatewayUrl: `wss://gateway-${i}.example:8443/openclaw`,
    ...
  });
}
// then verify only the 10 most recent gateways are retained
const scopes = Object.keys(persisted.sessionsByGateway ?? {});
expect(scopes).toHaveLength(10);
expect(scopes).not.toContain("wss://gateway-0.example:8443/openclaw");
expect(scopes).toContain("wss://gateway-11.example:8443/openclaw");
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: ui/src/ui/app.ts
Line: 1169-1176

Comment:
**Redundant `applyBorderRadius` call**

`applyBorderRadius(value)` is called explicitly on line 1170, but then `applySettingsInternal(...)` is immediately called with the updated settings, and `applySettings` in `app-settings.ts` also calls `applyBorderRadius(next.borderRadius)`. This results in two identical DOM property writes per user interaction.

The explicit call can be dropped since `applySettingsInternal` already handles it:

```suggestion
  setBorderRadius(value: number) {
    applySettingsInternal(this as unknown as Parameters<typeof applySettingsInternal>[0], {
      ...this.settings,
      borderRadius: value,
    });
    this.requestUpdate();
  }
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: "Merge branch 'main' ..."}

BunsDev · 2026-03-18T04:06:27Z

Landed via temp rebase onto main.

Gate: pnpm check + UI vitest run --project unit-node (161 tests passed)
Land commit: a5c207cdd8
Merge commit: df72ca1ece

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3e04853efd

ℹ️ 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".

chatgpt-codex-connector · 2026-03-18T04:07:31Z

+          var keys = Object.keys(localStorage);
+          var raw;
+          for (var i = 0; i < keys.length; i++) {
+            if (keys[i].indexOf("openclaw.control.settings.v1") === 0) {
+              raw = localStorage.getItem(keys[i]);
+              if (raw) break;


Load the current gateway’s settings for prepaint theme

The new prepaint script selects the first openclaw.control.settings.v1* entry from localStorage, which is not guaranteed to be the active gateway’s scoped key. When users have settings saved for multiple gateways, this can apply the wrong theme/mode on initial paint (before app hydration), causing visible flash/inconsistent appearance until loadSettings() corrects it. The lookup should resolve the current gateway scope and read that specific key first, matching runtime settings resolution.

Useful? React with 👍 / 👎.

aisle-research-bot · 2026-03-18T04:24:19Z

🔒 Aisle Security Analysis

We found 2 potential security issue(s) in this PR:

#	Severity	Title
1	🟡 Medium	Prototype pollution via config map key rename bypasses FORBIDDEN_KEYS path checks
2	🔵 Low	Unbounded localStorage/sessionStorage key growth from user-controlled gatewayUrl (client-side storage exhaustion DoS)

1. 🟡 Prototype pollution via config map key rename bypasses FORBIDDEN_KEYS path checks

Property	Value
Severity	Medium
CWE	CWE-1321
Location	`ui/src/ui/views/config-form.node.ts:1229-1241`

Description

The config form UI allows renaming keys for additionalProperties (“Custom entries”). The new key is taken from user input and used in a direct property assignment:

Input: nextKey from <input> value (.value.trim()) in renderMapField.
Sink: next[nextKey] = next[key].
If nextKey is "__proto__", the assignment invokes the __proto__ magic setter and mutates the prototype of next (rather than creating a normal own property).
This bypasses the new FORBIDDEN_KEYS protection in setPathValue/removePathValue because the forbidden key is not in the patch path; it is in the constructed object value being passed to onPatch(path, next).
The resulting polluted object is stored in config form state; in browsers cloneConfigObject() will typically use structuredClone, which preserves object prototypes, making the mutated prototype persist across later UI operations.

Vulnerable code:

const nextKey = (e.target as HTMLInputElement).value.trim();
...
const next = { ...value };
...
next[nextKey] = next[key];
delete next[key];
onPatch(path, next);

Impact:

A malicious key rename to __proto__ can replace the prototype of the affected config sub-object, causing inherited properties to appear via prototype chain lookups (e.g. "prop" in obj, obj.prop), potentially breaking logic or enabling follow-on exploitation in code that uses in / prototype chain reads.
This is a classic prototype pollution gadget in the UI layer even though setPathValue/removePathValue now block forbidden segments in paths.

Recommendation

Block forbidden keys at the point they are accepted and avoid the __proto__ setter behavior when creating/updating objects with attacker-controlled keys.

Suggested fix (minimal):

Reject __proto__, constructor, prototype for nextKey.
Prefer Object.hasOwn() over in to avoid prototype-chain surprises.
Use Object.defineProperty (or a null-prototype object) to create a data property safely.

Example:

const FORBIDDEN_KEYS = new Set(["__proto__", "prototype", "constructor"]);
...
const nextKey = (e.target as HTMLInputElement).value.trim();
if (!nextKey || nextKey === key) return;
if (FORBIDDEN_KEYS.has(nextKey)) return;

const next: Record<string, unknown> = { ...value };
if (Object.hasOwn(next, nextKey)) return;

Object.defineProperty(next, nextKey, {
  value: next[key],
  enumerable: true,
  writable: true,
  configurable: true,
});
delete next[key];
onPatch(path, next);

For stronger hardening, consider using Object.create(null) for maps representing additionalProperties values so they have no magic prototype keys at all.

2. 🔵 Unbounded localStorage/sessionStorage key growth from user-controlled gatewayUrl (client-side storage exhaustion DoS)

Property	Value
Severity	Low
CWE	CWE-400
Location	`ui/src/ui/storage.ts:85-102`

Description

The UI now persists settings under a gateway-scoped key derived from gatewayUrl (e.g., openclaw.control.settings.v1:${normalizeGatewayTokenScope(gatewayUrl)}). Because gatewayUrl is user-controlled and normalizeGatewayTokenScope() falls back to the raw trimmed input for invalid URLs, this enables unbounded creation of unique storage keys.

Impact:

A user (or script running in the origin) can cause a large number of distinct keys to be written (e.g., by repeatedly editing/typing different gateway URLs), eventually exceeding browser storage quota.
localStorage.setItem(...) is not wrapped in a try/catch in persistSettings(), so a QuotaExceededError can propagate and break settings updates / UI behavior.
Additionally, persistSessionToken() stores the token in sessionStorage under similarly derived keys, creating the same unbounded growth risk within the session.

Key code paths:

Input: gatewayUrl (user-configurable via UI and URL flows)
Key derivation: settingsKeyForGateway(next.gatewayUrl) and normalizeGatewayTokenScope(next.gatewayUrl)
Sink: storage.setItem(scopedKey, serialized) and sessionStorage.setItem(tokenSessionKeyForGateway(gatewayUrl), token)

Vulnerable code excerpt:

const scope = normalizeGatewayTokenScope(next.gatewayUrl);
const scopedKey = settingsKeyForGateway(next.gatewayUrl);
...
const serialized = JSON.stringify(persisted);
storage?.setItem(scopedKey, serialized);
storage?.setItem(LEGACY_SETTINGS_KEY, serialized);

Recommendation

Mitigate storage-exhaustion and key-injection risks by making persisted key space bounded and robust:

Use a bounded, fixed-length key derived from the normalized gateway URL (e.g., a SHA-256 hash) rather than embedding the raw URL into the storage key.
Cap and clean up old scoped settings keys (LRU eviction) so the number of persisted gateway entries cannot grow without bound.
Debounce or defer persistence of gatewayUrl while the user is typing (persist only on blur/submit/confirm).
Wrap storage writes in try/catch and gracefully handle quota errors.

Example approach (hash + bounded index):

const SETTINGS_KEY_PREFIX = "openclaw.control.settings.v1:";

async function gatewayScopeKey(gatewayUrl: string) {
  const normalized = normalizeGatewayTokenScope(gatewayUrl).slice(0, 2048); // also cap input
  const bytes = new TextEncoder().encode(normalized);
  const digest = await crypto.subtle.digest("SHA-256", bytes);
  const hex = [...new Uint8Array(digest)].map(b => b.toString(16).padStart(2,"0")).join("");
  return `${SETTINGS_KEY_PREFIX}${hex}`;
}

function safeSet(storage: Storage, key: string, value: string) {
  try {
    storage.setItem(key, value);
  } catch (e) {
    // handle QuotaExceededError: evict old keys and retry, or disable persistence
  }
}

Analyzed PR: #49436 at commit a5c207c

_{Last updated on: 2026-03-18T05:02:10Z}

* Refactor CSS styles: replace hardcoded colors with CSS variables for accent colors and optimize spacing rules in layout files. * Update CSS styles: streamline selectors, enhance hover effects, and adjust focus states for chat components and layout elements. * Enhance focus styles for chat components: update border colors and box-shadow effects for improved accessibility and visual consistency. * Implement theme management in UI: add dynamic theme switching based on user settings, update CSS variables for new themes, and enhance security by preventing prototype pollution in form utilities. * Implement border radius customization in UI: add settings for corner roundness, update CSS styles for sliders, and integrate border radius adjustments across components. * Remove border radius property from UI settings and related functions to simplify configuration and enhance consistency across components. * Enhance responsive design in UI: add media queries for mobile layouts, adjust padding and grid structures, and implement bottom navigation for improved usability on smaller screens. * UI: add corner radius slider to Appearance settings

Corner radius is owned by themes; drop the browser-local multiplier that scaled all --radius-* variables (added in #49436). Stale borderRadius localStorage keys are ignored and dropped on next settings write.

Corner radius is owned by themes; drop the browser-local multiplier that scaled all --radius-* variables (added in openclaw#49436). Stale borderRadius localStorage keys are ignored and dropped on next settings write.

openclaw-barnacle Bot added app: web-ui App: web-ui size: XL maintainer Maintainer-authored PR labels Mar 18, 2026

BunsDev self-assigned this Mar 18, 2026

BunsDev added 8 commits March 17, 2026 23:03

Refactor CSS styles: replace hardcoded colors with CSS variables for …

0b7f0ea

…accent colors and optimize spacing rules in layout files.

Update CSS styles: streamline selectors, enhance hover effects, and a…

aaff9c4

…djust focus states for chat components and layout elements.

Enhance focus styles for chat components: update border colors and bo…

3ad0c9b

…x-shadow effects for improved accessibility and visual consistency.

Implement theme management in UI: add dynamic theme switching based o…

aae41a6

…n user settings, update CSS variables for new themes, and enhance security by preventing prototype pollution in form utilities.

Implement border radius customization in UI: add settings for corner …

7fe4a32

…roundness, update CSS styles for sliders, and integrate border radius adjustments across components.

Remove border radius property from UI settings and related functions …

2aea0f0

…to simplify configuration and enhance consistency across components.

Enhance responsive design in UI: add media queries for mobile layouts…

f5075a2

…, adjust padding and grid structures, and implement bottom navigation for improved usability on smaller screens.

UI: add corner radius slider to Appearance settings

a5c207c

BunsDev force-pushed the ui/touch-ups branch from e9dc0ab to a5c207c Compare March 18, 2026 04:05

BunsDev merged commit df72ca1 into main Mar 18, 2026
8 checks passed

BunsDev deleted the ui/touch-ups branch March 18, 2026 04:06

BunsDev restored the ui/touch-ups branch March 18, 2026 04:06

chatgpt-codex-connector Bot reviewed Mar 18, 2026

View reviewed changes

github-actions Bot mentioned this pull request Mar 18, 2026

📡 Upstream Digest — 2026-03-18 04:16 UTC curtismercier/openclaw-mods#294

Open

steipete mentioned this pull request Jul 9, 2026

improve(ui): remove the Roundness appearance setting #102641

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

UI: add corner radius slider and appearance polish#49436

UI: add corner radius slider and appearance polish#49436
BunsDev merged 8 commits into
mainfrom
ui/touch-ups

BunsDev commented Mar 18, 2026

Uh oh!

greptile-apps Bot commented Mar 18, 2026 •

edited

Loading

Comments Outside Diff (2)

Uh oh!

Uh oh!

BunsDev commented Mar 18, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Mar 18, 2026

Uh oh!

aisle-research-bot Bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

BunsDev commented Mar 18, 2026

Summary

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

User-visible / Behavior Changes

Security Impact (required)

Repro + Verification

Environment

Steps

Expected

Actual

Evidence

Human Verification (required)

Review Conversations

Compatibility / Migration

Failure Recovery (if this breaks)

Risks and Mitigations

Uh oh!

greptile-apps Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 3/5

Comments Outside Diff (2)

Uh oh!

Uh oh!

BunsDev commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

aisle-research-bot Bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔒 Aisle Security Analysis

1. 🟡 Prototype pollution via config map key rename bypasses FORBIDDEN_KEYS path checks

Description

Recommendation

2. 🔵 Unbounded localStorage/sessionStorage key growth from user-controlled gatewayUrl (client-side storage exhaustion DoS)

Description

Recommendation

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

greptile-apps Bot commented Mar 18, 2026 •

edited

Loading

BunsDev commented Mar 18, 2026 •

edited

Loading

aisle-research-bot Bot commented Mar 18, 2026 •

edited

Loading