Skip to content

feat: add Claude theme#2267

Open
HUQIANTAO wants to merge 5 commits into
Hmbown:mainfrom
HUQIANTAO:feat/claude-theme
Open

feat: add Claude theme#2267
HUQIANTAO wants to merge 5 commits into
Hmbown:mainfrom
HUQIANTAO:feat/claude-theme

Conversation

@HUQIANTAO
Copy link
Copy Markdown

@HUQIANTAO HUQIANTAO commented May 27, 2026

Summary

Adds a new Claude theme aligned with Claude Code's product surface colors. Selectable from the /theme picker as the 9th preset.

image

Palette

Built from the Claude.com / Claude Code dark product chrome:

Role Color Token
Surface BG #181715 surface-dark
Panel BG #252320 surface-dark-elevated
Elevated BG #1f1e1b surface-dark-soft
Primary accent #cc785c coral (Anthropic signature)
Secondary accent #5db8a6 accent-teal
Text body #faf9f5 on-dark (cream white)
Text muted #a09d96 on-dark-soft

Details

  • 36-field UiTheme populated with the Claude design token palette
  • Registered in theme_remap_active so cell-level color remap applies at render time
  • All 11 WCAG contrast QA tests pass (≥4.5:1 body, ≥3.0:1 muted)
  • ThemeId → ThemeId::Claude, canonical name "claude", displayed as Claude

Greptile Summary

This PR adds a Claude theme to the TUI palette (warm navy + coral, aligned with Claude Code's product surface colors) and also ships a new turn-stall watchdog that auto-recovers the UI after a 300-second "in_progress" turn with no completion signal.

  • CLAUDE_UI_THEME populates all 36 UiTheme fields, is registered in SELECTABLE_THEMES and theme_remap_active, and passes the existing WCAG contrast test suite.
  • Branch 3 in reconcile_turn_liveness adds TURN_STALL_WATCHDOG_TIMEOUT (300 s) to surface an error toast and reset loading state when a turn stalls without a completion event and no sub-agents are running.
  • The theme_picker wrap-around test and a new turn_liveness_recovers_stalled_in_progress_turn unit test cover both additions.

Confidence Score: 5/5

Safe to merge — the theme addition is purely additive and the stall watchdog only changes UI state when a turn has been visibly stuck for 5 minutes.

The Claude theme follows every existing convention exactly, and Branch 3 is well-tested and narrowly scoped: it only fires when the UI is loading, status is "in_progress", no agents are running, and 300 s have elapsed — making accidental triggers essentially impossible in normal operation.

The inline comment for Branch 3 in crates/tui/src/tui/ui.rs claims the watchdog handles stuck sub-agents, but the !has_running_agents guard prevents it from doing so — worth clarifying before the next reader is misled.

Important Files Changed

Filename Overview
crates/tui/src/palette.rs Adds CLAUDE_UI_THEME constant and ThemeId::Claude variant; all 36 UiTheme fields populated, registered in SELECTABLE_THEMES and theme_remap_active — consistent with every other custom theme.
crates/tui/src/tui/ui.rs Adds TURN_STALL_WATCHDOG_TIMEOUT (300 s) and Branch 3 in reconcile_turn_liveness to recover UI from stalled in_progress turns; docstring and inline comment claim stuck sub-agents are covered but !has_running_agents guard prevents that.
crates/tui/src/tui/ui/tests.rs Adds turn_liveness_recovers_stalled_in_progress_turn test and updates turn_liveness_leaves_active_turn_running to use turn_started_at; both test the correct branch boundaries.
crates/tui/src/theme_qa_audit.rs Imports CLAUDE_UI_THEME and adds it to the ALL_THEMES slice so the existing WCAG contrast tests cover the new theme.
crates/tui/src/tui/theme_picker.rs Updates arrow-wrap test to expect ThemeId::Claude as the last theme when pressing Up from System; correct after Claude is appended to SELECTABLE_THEMES.
Cargo.toml Workspace version bumped from 0.8.46 to 0.8.47; Cargo.lock updated to match.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[reconcile_turn_liveness called on poll tick] --> B{is_loading?}
    B -- No --> Z[return false]
    B -- Yes --> C{runtime_turn_status == None\nAND dispatch_started_at > 30s}
    C -- Yes --> D[Branch 1: Dispatch timeout\nClear is_loading + toast Error]
    C -- No --> E{status == completed/interrupted/failed\nAND !has_running_agents}
    E -- Yes --> F[Branch 2: Stale busy state\nClear is_loading + toast Warning]
    E -- No --> G{status == in_progress\nAND !has_running_agents\nAND turn_started_at > 300s}
    G -- Yes --> H[Branch 3 NEW: Stall watchdog\nClear is_loading + runtime_turn_status + toast Error]
    G -- No --> Z
    D --> Y[return true]
    F --> Y
    H --> Y
Loading

Comments Outside Diff (1)

  1. crates/tui/src/theme_qa_audit.rs, line 1 (link)

    P2 The module docstring references v0.8.45 but the workspace has been at v0.8.47 since this PR's version bump. This will accumulate misleading drift each release if not kept in sync.

    Fix in Codex Fix in Claude Code Fix in Cursor

Fix All in Codex Fix All in Claude Code Fix All in Cursor

Reviews (3): Last reviewed commit: "fix(theme): address review feedback on C..." | Re-trigger Greptile

Add a new theme aligned with Claude Code's product surface colors:
deep navy surfaces (#181715), cream-tinted text (#faf9f5),
coral accent (#cc785c), and teal secondary (#5db8a6).
Includes cell-level remap pipeline registration and full
WCAG contrast QA compliance.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new "Claude" UI theme to the TUI, featuring a dark navy background with warm coral and teal accents. It also updates the Cargo workspace package version to 0.8.47. A review comment points out that accent_action in the new theme should be set to a distinct amber color to align with the project's theme guidelines and other community themes.

Comment thread crates/tui/src/palette.rs Outdated
// Coral primary (signature Anthropic accent), teal secondary
accent_primary: Color::Rgb(0xcc, 0x78, 0x5c), // coral
accent_secondary: Color::Rgb(0x5d, 0xb8, 0xa6), // accent-teal
accent_action: Color::Rgb(0xcc, 0x78, 0x5c), // coral
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

In CLAUDE_UI_THEME, accent_action is currently set to the same coral color (#cc785c) as accent_primary.\n\nAccording to the design guidelines documented in crates/tui/src/theme_qa_audit.rs (line 77):\n> Every theme must have distinct accent colors.\n\nAdditionally, in all other community themes in this codebase (Catppuccin Mocha, Tokyo Night, Dracula, Gruvbox Dark), accent_action is mapped to the same warm/orange/amber color as mode_plan to provide a distinct, warm accent for interactive actions.\n\nTo maintain visual hierarchy, design consistency, and adhere to the project's theme guidelines, we should use the amber color (#e8a55a) already defined for mode_plan as the accent_action color.

Suggested change
accent_action: Color::Rgb(0xcc, 0x78, 0x5c), // coral
accent_action: Color::Rgb(0xe8, 0xa5, 0x5a), // amber

Hu Qiantao added 2 commits May 27, 2026 17:55
Replace the basic web-chat MVP with a full-featured single-file web frontend:
- 3-column layout: icon sidebar, thread list, chat area + right panel
- Thread management: create, search, switch, fork, archive, rename, export
- Streaming chat with SSE: messages, tool calls, reasoning, status updates
- Approval flow: allow once, allow session, deny
- Right panels: Tasks, Agents, MCP & Skills, Automations, Usage, Context Inspector, Settings
- Command palette (Ctrl+K) with fuzzy search
- Keyboard shortcuts: Ctrl+N, Ctrl+1-6, Escape
- Mode switching: Agent/Plan/YOLO
- Editable thread titles (double-click)
- Auto-scroll with manual override
- Claude dark theme (warm navy & coral)
- Markdown rendering with code blocks and copy button
- File attachment support
- Zero external dependencies (single HTML file)
Remove the single-file web frontend and revert runtime_api.rs changes.
@Hmbown
Copy link
Copy Markdown
Owner

Hmbown commented May 27, 2026

Independent review:

Palette fidelity: Coral #CC785C is close to Anthropic's brand clay #DA7756 (RGB delta ~15) — recognizable but slightly muted. Reasonable choice.

WCAG contrast on surface_bg #181715 (verified):

  • text_body 17.0 / text_muted 6.6 / coral 5.5 / teal 7.6 — all pass AA
  • text_hint 4.18, text_dim 2.77 (below AA 4.5), error_fg #C64545 3.70 (below AA 4.5 for body text — only OK as accent/large)

Convention break (confirms gemini): accent_primary and accent_action are both #CC785C coral. Every other community theme (Catppuccin peach #FAB387, Tokyo orange #FF9E64, Dracula #FFB86C, Gruvbox #FE8019) uses a distinct warm orange for accent_action. Suggest amber #E8A55A (already used here for mode_plan, contrast 8.5) to keep action-buttons visually distinct from primary surfaces.

Wiring: Clean — ThemeId enum, name/label/description, SELECTABLE_THEMES, normalize_theme_name, theme_remap_active all touched. Builds; 33 palette_audit tests pass.

v0.8.48 (#2256) compatibility: clean merge (Cargo.toml bump to 0.8.47 will be superseded by 2256's 0.8.48) / sibling-PR conflict: all three (#2270 Solarized, #2276 transparent, #2129 Matrix) conflict on palette.rs — same ThemeId enum + match arms + SELECTABLE_THEMES list. Last-merged wins; others need rebase.

reconcile_turn_liveness() had a blind spot: when TurnStarted arrived
(setting runtime_turn_status to "in_progress") but TurnComplete never
came (sub-agent hang, engine panic, lost event), neither existing
watchdog branch fired. is_loading stayed true permanently, queuing
all subsequent messages.

Add Branch 3 with a 5-minute timeout (matched to stream idle timeout)
that checks turn_started_at for staleness when the turn is stuck in
"in_progress" with no running sub-agents.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Comment thread crates/tui/src/runtime_api.rs Outdated
@Hmbown
Copy link
Copy Markdown
Owner

Hmbown commented May 27, 2026

Theme cluster coordination — this PR is one of 4 in flight that all add to palette.rs::SELECTABLE_THEMES:

All 4 hard-conflict at the SELECTABLE_THEMES slice and normalize_theme_name arms. Plan: first-merged wins as-is; the other three each get a small rebase. Your palette carries forward unchanged.

Cross-pinging the cluster: @AiurArtanis @HUQIANTAO @Hmbown @malsony — same coordination note on each PR.

- Fix text_dim contrast: #615E58 → #72706A (2.77 → 3.62, passes WCAG AA)
- Fix error_fg/error_border contrast: #C64545 → #E06060 (3.70 → 5.13, passes AA)
- Use amber #E8A55A for accent_action (distinct from accent_primary coral)
- Fix theme_picker test expecting GruvboxDark as last theme
- Remove broken include_str!("../../../web-chat/index.html") reference
  left by incomplete web-chat revert

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants