style(ui): continue ui clarity pass across theme, config, and usage by BunsDev · Pull Request #53272 · openclaw/openclaw

BunsDev · 2026-03-24T01:23:39Z

Summary

Continue the ui/clarity pass with a stronger Knot theme, cleaner button primitives, and tighter text contrast. Simplifies several chat/usage/config UI surfaces to reduce visual noise and improve consistency. Improves config navigation and section discoverability with new icons, categories, and a better top-bar layout.

What changed

Theme + visual clarity

Refined the Knot theme to a black-and-red palette (crimson accent on true black) for both dark and light modes, with full WCAG 2.1 AA contrast audit documented in the token comments
Tightened --muted-strong color token for better readability and hierarchy
Added clearer accent/focus treatment across the OpenKnot theme family
Reduced visual clutter in chat and usage layouts by trimming extra radii, borders, and heavy panel chrome

Reusable button + interaction polish

Extracted shared button variants (btn--icon, btn--ghost, btn--xs) into components.css, replacing ~60 lines of duplicate one-off button styles scattered across chat/usage CSS
Updated chat and usage controls to use the shared btn--* classes (e.g. btn-ghost → btn--ghost, btn-sm → btn--sm)
Improved active/hover states so icon actions feel more consistent across dark and light themes
Added proper light-mode overrides for ghost and icon buttons

Config UI improvements

Added icons and metadata for Diagnostics, CLI, Secrets, ACP, and MCP config sections
Reorganized config categories so those sections appear under the correct sidebar groups (System → Diagnostics/CLI/Secrets, Infrastructure → ACP/MCP)
Moved the Form/Raw mode toggle into the primary actions area (left side with save/reset) instead of isolating it on the far right
Made config top tabs stay on one line with horizontal scrolling instead of wrapping awkwardly on narrow viewports
Removed the config-top-tabs__right container entirely (cleaner DOM)

Roundness control redesign

Replaced the continuous roundness slider with 5 discrete stops (None / Slight / Default / Round / Full) using labeled swatch buttons
Added snapBorderRadius() so persisted free-form values gracefully snap to the nearest stop on load
Removed ~80 lines of slider-specific CSS (::-webkit-slider-thumb, ::-moz-range-thumb, etc.)

Usage page cleanup

Removed ~50 lines of one-off button styles (.usage-pin-btn, .usage-export-button, .toggle-btn, .session-copy-btn, .context-expand-btn, .session-close-btn) that are now covered by the shared btn--* system
Added aria-label attributes to filter selects, search input, and chip-remove buttons for improved accessibility

Misc

Added flex-wrap: wrap + min-width: 0 to agent tools/skills card rows so they don't overflow on narrow viewports
Updated Knot theme description from "Blue contrast" to "Black & red"

Validation

pnpm test:ui — 511/511 tests pass
pnpm ui:build — builds clean (583 KB main bundle, no warnings)
No logic changes — purely CSS, theme tokens, HTML class renames, and config section metadata

aisle-research-bot · 2026-03-24T01:23:47Z

🔒 Aisle Security Analysis

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

#	Severity	Title
1	🔵 Low	Sensitive config values exposed in config change diff panel (no redaction)

1. 🔵 Sensitive config values exposed in config change diff panel (no redaction)

Property	Value
Severity	Low
CWE	CWE-200
Location	`ui/src/ui/views/config.ts:556-558`

Description

The config UI’s diff panel (shown in Form mode when there are pending changes) renders before/after values using renderDiffValue(), which currently does not apply any sensitive-field redaction.

As a result, if a user edits any secret-like config value (e.g. *.token, *.password, *.secret, *.apiKey, etc.), the diff panel will display the secret in cleartext (only truncated), even though other parts of the UI implement sensitive detection/redaction (e.g. countSensitiveConfigValues, REDACTED_PLACEHOLDER).

This risk becomes more likely as new sections such as secrets, acp, and mcp are surfaced in the UI navigation/categories.

Vulnerable code:

function renderDiffValue(path: string, value: unknown, _uiHints: ConfigUiHints): string {
  return truncateValue(value);
}

Data flow:

Input: user-provided config values (including secrets) in props.formValue / form edits
Detection exists but unused here: isSensitiveConfigPath() / hintForPath(...).sensitive
Sink: diff panel HTML rendering of ${renderDiffValue(change.path, change.to, props.uiHints)}

Recommendation

Apply the existing sensitive detection to diff rendering and substitute a placeholder unless the user explicitly reveals that path.

Example fix:

import { isSensitiveConfigPath, hintForPath, REDACTED_PLACEHOLDER } from "./config-form.shared";

function renderDiffValue(path: string, value: unknown, uiHints: ConfigUiHints): string {
  const hint = uiHints ? uiHints[path] : undefined; // or derive via hintForPath using a parsed path array
  const sensitive = (hint?.sensitive ?? false) || isSensitiveConfigPath(path);
  if (sensitive && value != null && String(value).trim() !== "") {
    return REDACTED_PLACEHOLDER;
  }
  return truncateValue(value);
}

Optionally, support per-field reveal (similar to the raw editor and env peek) so users can consciously display secrets when needed.

Analyzed PR: #53272 at commit 9512348

_{Last updated on: 2026-03-24T02:00:23Z}

greptile-apps · 2026-03-24T01:29:18Z

Greptile Summary

This PR continues a UI clarity pass across theme tokens, button primitives, and configuration/usage surfaces. It refines the Knot theme to a black-and-red palette, consolidates one-off button styles into reusable btn--xs, btn--icon, and btn--ghost variants, and adds icons/metadata for new config sections (Diagnostics, CLI, Secrets, ACP, MCP).

Theme: openknot (dark) and openknot-light tokens fully rewritten to a crimson-red palette with inline WCAG contrast rationale; a --focus override is present in the dark variant but not the light variant (minor, does not affect the focus ring visuals since --focus-ring resolves via var(--ring)).
Button consolidation: btn--icon, btn--ghost, and btn--xs moved to components.css; all usage of the old btn-ghost / btn-sm (single-hyphen) class names has been updated consistently across templates and CSS.
Config UI: Form/Raw mode toggle relocated from .config-top-tabs__right (removed) into .config-actions__left; tabs scroller switched to horizontal overflow instead of wrapping.
Minor style issue: The sidebar labels for the new shorthand sections use title-case ("Cli", "Acp", "Mcp") while their SECTION_META counterparts in config-form.render.ts already use the conventional all-caps forms — a one-line fix per entry.

Confidence Score: 5/5

This PR is safe to merge; changes are purely visual/stylistic with no logic, data, or security implications.
All changes are CSS and UI template updates. The button-naming refactor is complete and consistent across every template file. The only non-trivial finding is a label casing inconsistency ("Cli"/"Acp"/"Mcp" vs "CLI"/"ACP"/"MCP") which is cosmetic and does not affect functionality. No regressions in interactivity, accessibility (WCAG audit is documented inline), or data handling are introduced.
ui/src/ui/views/config.ts — sidebar label casing for the three new shorthand sections

Comments Outside Diff (1)

ui/src/ui/views/config.ts, line 904-914 (link)

Inconsistent acronym casing in sidebar labels

The new sidebar entries for the abbreviations (cli, acp, mcp) are labelled with title-case ("Cli", "Acp", "Mcp") while the corresponding SECTION_META entries in config-form.render.ts use all-caps labels. This causes a visual inconsistency between the sidebar and the form view. Consider updating the labels to use uppercase for these abbreviations to match the metadata definitions.

Prompt To Fix With AI

This is a comment left during a code review.
Path: ui/src/ui/views/config.ts
Line: 904-914

Comment:
**Inconsistent acronym casing in sidebar labels**

The new sidebar entries for the abbreviations (cli, acp, mcp) are labelled with title-case (`"Cli"`, `"Acp"`, `"Mcp"`) while the corresponding `SECTION_META` entries in `config-form.render.ts` use all-caps labels. This causes a visual inconsistency between the sidebar and the form view. Consider updating the labels to use uppercase for these abbreviations to match the metadata definitions.

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/views/config.ts
Line: 904-914

Comment:
**Inconsistent acronym casing in sidebar labels**

The new sidebar entries for the abbreviations (cli, acp, mcp) are labelled with title-case (`"Cli"`, `"Acp"`, `"Mcp"`) while the corresponding `SECTION_META` entries in `config-form.render.ts` use all-caps labels. This causes a visual inconsistency between the sidebar and the form view. Consider updating the labels to use uppercase for these abbreviations to match the metadata definitions.

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

_{Reviews (1): Last reviewed commit: "style: refactor roundness settings UI an..." | Re-trigger Greptile}

…istency

… UI clarity

…aria-labels

…radius settings for improved UI consistency

…accessibility features

@BunsDev

…53272) thanks @BunsDev Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com> Co-authored-by: Nova <nova@openknot.ai>

BunsDev · 2026-03-24T01:46:49Z

Squash-merged to main as 21ac4b9 ✨

Signed squash commit with changelog entry
All gates passed (format, typecheck, lint, UI tests 511/511, UI build clean)
Co-authored-by: @BunsDev + Nova

BunsDev · 2026-03-24T01:48:58Z

Security finding from Aisle (sensitive data exposure in config diff panel) addressed in follow-up commit 9dd0530:

renderDiffValue() now checks isSensitiveConfigPath() and displays [redacted - click reveal to view] instead of raw values for token/password/secret/apiKey paths
Uses the same redaction helpers already used by the config form view
UI build clean, 511/511 tests pass

@BunsDev

- Added new DashScope endpoints for China and global Qwen API keys in ModelStudio/Qwen. - Consolidated button primitives and refined Knot theme in UI/clarity, improving accessibility. - Enhanced Control UI with a restyled markdown preview dialog and integrated markdown rendering. - Added one-click install recipes for bundled skills in Skills/install metadata. - Updated CLI/skills to provide clearer API key setup guidance. - Improved Control UI/agents with expandable file rows and comprehensive markdown styles. - Replaced horizontal navigation with a collapsible tree sidebar in macOS app/config. - Updated package manager to pnpm@10.32.1 and added new dependencies for markdown preview. - Various CSS improvements for better styling and accessibility across the UI. Closes #43878, #53272, #53307. Thanks @BunsDev.

@BunsDev

…ncies - Added standard DashScope endpoints for China and global Qwen API keys in ModelStudio/Qwen. - Consolidated button primitives and refined Knot theme in UI/clarity, improving accessibility. - Enhanced Control UI with a restyled markdown preview dialog and integrated markdown rendering. - Added one-click install recipes for bundled skills in Skills/install metadata. - Updated CLI/skills to provide clearer API key setup guidance. - Improved Control UI/agents with expandable file rows and comprehensive markdown styles. - Replaced horizontal navigation with a collapsible tree sidebar in macOS app/config. - Updated package manager to pnpm@10.32.1 and added new dependencies for markdown preview. - Various CSS improvements for better styling and accessibility across the UI. Closes #43878, #53272, #53307. Thanks @BunsDev.

@BunsDev