From 46479b1317859035e26101ba784d7cb263842d65 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 12:22:37 +0800
Subject: [PATCH 1/9] feat: redesign UI with minimalist aesthetic

Strip the UI to its essence: remove all gradients, glass-morphism,
backdrop-filter blur, serif fonts, decorative shadows, and per-launcher
gradient backgrounds. Replace with a near-monochrome palette (#fafafa
light / #111111 dark), flat solid surfaces, thin borders as primary
separators, and a single muted teal accent used sparingly for
interactive states.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md        |  12 +-
 DESIGN_SYSTEM.md | 395 +++++++++++----------------------------
 src/styles.css   | 469 +++++++++++++++++++----------------------------
 3 files changed, 304 insertions(+), 572 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index a288580..ffde29f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -44,13 +44,13 @@ cd src-tauri && cargo clippy # lint Rust code
 
 All UI work **must** follow `DESIGN_SYSTEM.md`. Key rules:
 
-- **Colors**: Use the documented palette tokens — warm ink tones (`#10212e` base) with teal accent (`#2e6b63`). Do not introduce new brand colors.
-- **Buttons**: Three variants only — `primary-button` (gradient CTA), `ghost-button` (secondary), `danger-button` (destructive). One primary button per visible form section. Pill radius (`999px`) for all standard buttons.
-- **Inputs**: Always use `<Input>`, `<Textarea>`, `<Select>` from `FormControls.tsx`. Radius `14px`, focus ring teal. Never use native elements directly.
+- **Colors**: Near-monochrome palette. Light: `#fafafa` background, `#1a1a1a` ink, `#3d7a73` teal accent (used sparingly). Do not introduce new brand colors. No gradients anywhere.
+- **Buttons**: Three variants only — `primary-button` (solid flat teal), `ghost-button` (secondary), `danger-button` (destructive). One primary button per visible form section. Pill radius (`999px`) for all standard buttons.
+- **Inputs**: Always use `<Input>`, `<Textarea>`, `<Select>` from `FormControls.tsx`. Focus ring teal. Never use native elements directly.
 - **Toast**: Bottom-right, one at a time, auto-dismiss 3s. Two variants: `toast-success` / `toast-error`. Prefix with `✓` / `✗`.
-- **Typography**: Serif (`Iowan Old Style`) for feature headings, sans-serif (`Avenir Next`) for UI, monospace (`SF Mono`) for code/paths. Do not add new font stacks.
-- **Cards**: Semi-transparent white (`rgba(255,255,255,0.74)`), radius `20px`. Glass-morphism (`backdrop-filter: blur`) only on the topbar.
-- **Modals**: Use `ModalShell` component. Radius `24px`, warm off-white surface. Dismiss via Escape + backdrop click.
+- **Typography**: Sans-serif (`Avenir Next`) for all text, monospace (`SF Mono`) for code/paths. No serif fonts. Do not add new font stacks.
+- **Cards**: Flat white (`#ffffff`), radius `12px`, border only, no shadow. No glass-morphism, no `backdrop-filter`.
+- **Modals**: Use `ModalShell` component. Radius `12px`, minimal shadow. Dismiss via Escape + backdrop click.
 - **Spacing**: 2px base grid. Common stops: 6, 8, 10, 12, 14, 20, 24px. Follow existing patterns.
 - **Transitions**: Buttons `140ms ease`, list items `100ms ease`, slide-out `180ms ease-out`.
 - **Dark mode**: Supports Light / Dark / System. All colors use CSS custom properties (`var(--token)`). When adding new UI, always use existing tokens from `:root` — never hardcode colors. Verify new pages/components look correct in both light and dark mode.
diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
index 9d52992..f4261c0 100644
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -1,6 +1,16 @@
 # Grove Design System
 
-A warm, organic design language for a macOS-native Git worktree manager. Supports light and dark modes with glass-morphism cards on a gradient canvas. All colors are defined as CSS custom properties and themed via `[data-theme="light"|"dark"]`.
+A minimalist design language for a macOS-native Git worktree manager. Near-monochrome palette with a single muted teal accent, flat surfaces, and precise typography. Supports light and dark modes via `[data-theme="light"|"dark"]`. No gradients, no glass-morphism, no decorative shadows.
+
+---
+
+## Design Principles
+
+1. **Restraint over decoration** — every visual element must earn its place
+2. **Monochrome first** — use the accent color sparingly, only for interactive/active states
+3. **Flat surfaces** — no gradients, no blur, no glass-morphism
+4. **Borders over shadows** — thin borders are the primary visual separator
+5. **Consistent typography** — sans-serif everywhere, monospace for code
 
 ---
 
@@ -17,263 +27,138 @@ All values are defined as CSS custom properties in `:root`. Always use tokens in
 | `--text-sm` | `0.78rem` | Captions, secondary text, small buttons |
 | `--text-base` | `0.85rem` | Body text, buttons, inputs, section headings |
 
-Standalone sizes outside the scale: `0.92rem` (sidebar branch name), `1.3rem` (detail heading).
+Standalone sizes outside the scale: `0.92rem` (sidebar branch name), `1.2rem` (detail heading).
 
 ### Radius Scale
 
 | Token | Value | Usage |
 |---|---|---|
-| `--radius-xs` | `6px` | Topbar tabs, close buttons, tiny controls |
-| `--radius-sm` | `8px` | Menu items, compact elements, hook steps, file rows |
-| `--radius-md` | `12px` | List items, toasts, alerts, tool rows |
-| `--radius-lg` | `16px` | Panels, log streams |
-| `--radius-xl` | `20px` | Cards |
-| `--radius-2xl` | `24px` | Modals |
+| `--radius-xs` | `5px` | Tiny controls, close buttons |
+| `--radius-sm` | `6px` | Menu items, compact elements, hook steps, file rows, sidebar tabs |
+| `--radius-md` | `8px` | List items, toasts, alerts, tool rows |
+| `--radius-lg` | `10px` | Panels, log streams |
+| `--radius-xl` | `12px` | Cards, modals |
+| `--radius-2xl` | `14px` | Large modals |
 | `--radius-full` | `999px` | Pill buttons, badges |
 
 ### Font Stack
 
-| Token | Stack |
-|---|---|
-| `--font-mono` | `"SF Mono", "JetBrains Mono", monospace` |
+| Token | Stack | Usage |
+|---|---|---|
+| (`:root`) | `"Avenir Next", "Segoe UI", sans-serif` | All UI text |
+| `--font-mono` | `"SF Mono", "JetBrains Mono", monospace` | Code, paths, diffs |
+
+**No serif fonts.** All headings use the same sans-serif stack.
 
 ---
 
 ## Color Palette
 
-### Base Colors
+### Base Colors (Light)
 
 | Token | Value | Usage |
 |---|---|---|
-| `--ink` | `#10212e` | Primary text, headings |
-| `--ink-strong` | `rgba(16, 33, 46, 0.88)` | Brand text, emphasis |
-| `--ink-secondary` | `rgba(16, 33, 46, 0.68)` | Body copy, descriptions |
-| `--ink-tertiary` | `rgba(16, 33, 46, 0.45)` | Muted labels, placeholders, timestamps |
-| `--ink-faint` | `rgba(16, 33, 46, 0.18)` | Disabled text |
+| `--ink` | `#1a1a1a` | Primary text |
+| `--ink-strong` | `rgba(26, 26, 26, 0.9)` | Emphasis |
+| `--ink-secondary` | `rgba(26, 26, 26, 0.6)` | Body copy, descriptions |
+| `--ink-tertiary` | `rgba(26, 26, 26, 0.4)` | Muted labels, placeholders |
+| `--ink-ghost` | `rgba(26, 26, 26, 0.3)` | Ghost elements |
+| `--ink-faint` | `rgba(26, 26, 26, 0.15)` | Disabled text |
 
-### Accent Colors
+### Accent Color
 
 | Token | Value | Usage |
 |---|---|---|
-| `--teal` | `#2e6b63` | Primary accent — focus rings, active states, links |
-| `--teal-bg` | `rgba(46, 107, 99, 0.10)` | Active selection background |
-| `--teal-border` | `rgba(46, 107, 99, 0.25)` | Active item border |
-| `--teal-focus` | `rgba(46, 107, 99, 0.70)` | Input focus border |
+| `--teal` | `#3d7a73` | Primary accent — focus rings, active states |
+| `--teal-bg` | `rgba(61, 122, 115, 0.08)` | Active selection background |
+| `--teal-border` | `rgba(61, 122, 115, 0.2)` | Active item border |
+| `--teal-focus` | `rgba(61, 122, 115, 0.5)` | Input focus border |
 
-### Semantic Colors
+Use teal **sparingly** — only for interactive states, active indicators, and focus rings.
 
-| Token | Value | Usage |
-|---|---|---|
-| `--success` | `#185b46` | Success text |
-| `--success-bg` | `rgba(49, 143, 114, 0.15)` | Success toast/badge background |
-| `--success-border` | `rgba(49, 143, 114, 0.25)` | Success toast border |
-| `--danger` | `#8e2319` | Error/danger text |
-| `--danger-bg` | `rgba(197, 61, 46, 0.12)` | Error toast/badge/button background |
-| `--danger-border` | `rgba(197, 61, 46, 0.20)` | Error banner border |
-| `--warning` | `#8a5400` | Warning text |
-| `--warning-bg` | `rgba(255, 204, 112, 0.32)` | Warning badge background |
-| `--amber-bg` | `rgba(255, 211, 142, 0.28)` | Pill / tag background |
-| `--amber-text` | `#784b00` | Pill / tag text |
-| `--purple` | `#5842ba` | PR badges, commit author |
-| `--purple-bg` | `rgba(88, 66, 186, 0.12)` | PR badge background |
-
-### Surface Colors
+### Semantic Colors
 
 | Token | Value | Usage |
 |---|---|---|
-| `--surface-page` | `linear-gradient(180deg, #f7f3ea 0%, #e8eef4 100%)` with radial overlays | Page background (warm → cool gradient) |
-| `--surface-card` | `rgba(255, 255, 255, 0.74)` | Card / panel backgrounds |
-| `--surface-topbar` | `rgba(247, 243, 234, 0.72)` | Topbar (glass-morphism with `backdrop-filter: blur(28px)`) |
-| `--surface-modal` | `rgba(254, 251, 246, 0.98)` | Modal / slide-out panel |
-| `--surface-hover` | `rgba(16, 33, 46, 0.05)` | Hover state on interactive rows |
-| `--surface-subtle` | `rgba(16, 33, 46, 0.04)` | Subtle row backgrounds |
-| `--border-default` | `rgba(16, 33, 46, 0.10)` | Card/panel borders |
-| `--border-faint` | `rgba(16, 33, 46, 0.06)` | Internal dividers |
-| `--border-strong` | `rgba(16, 33, 46, 0.12)` | Input borders |
-
----
-
-## Typography
-
-### Font Stacks
-
-| Token | Stack | Usage |
-|---|---|---|
-| (`:root`) | `"Avenir Next", "Segoe UI", sans-serif` | All UI text |
-| (serif) | `"Iowan Old Style", "Georgia", serif` | Feature headings (h2), detail branch name |
-| `--font-mono` | `"SF Mono", "JetBrains Mono", monospace` | Code, paths, diffs, brand name |
-
-### Type Scale
+| `--success` | `#2d7a5f` | Success text |
+| `--danger` | `#b33a30` | Error/danger text |
+| `--warning` | `#8a6d2b` | Warning text |
+| `--purple` | `#6b5cae` | PR badges |
 
-Use the CSS custom property tokens defined in the Design Tokens section above. The system has exactly **4 sizes** plus 2 outliers:
+### Surfaces (Light)
 
-| Token | Size | Usage |
+| Token | Value | Usage |
 |---|---|---|
-| `--text-2xs` | `0.65rem` | Micro hints |
-| `--text-xs` | `0.7rem` | Badges, timestamps, meta labels, step numbers |
-| `--text-sm` | `0.78rem` | Captions, subtle text, small buttons |
-| `--text-base` | `0.85rem` | Body, buttons, inputs, section headings |
-| (standalone) | `0.92rem` | Sidebar worktree branch name |
-| (standalone) | `1.3rem` | Detail panel branch heading |
-
-**Rule**: Never introduce a new font size. If it doesn't fit one of these 4 tokens, use the nearest.
-
-### Font Weight
-
-Only **3 weights** are used. Never introduce others:
-
-| Weight | Usage |
-|---|---|
-| `400` | Body text, default UI, inputs, menu items, toast |
-| `600` | Labels, buttons, emphasized secondary text, PR links |
-| `700` | Headings, brand, section headings, badges, branch names |
-
-### Line Height
-
-Global `line-height: 1.5`. Mono blocks use `1.55` for readability.
-
----
-
-## Spacing
+| Page background | `#fafafa` | Solid flat background |
+| `--surface-card` | `#ffffff` | Card backgrounds |
+| `--surface-topbar` | `#fafafa` | Topbar |
+| `--surface-sidebar` | `#f5f5f5` | Sidebar, worktrees panel |
+| `--surface-modal` | `#ffffff` | Modals |
+| `--surface-hover` | `rgba(0, 0, 0, 0.04)` | Hover states |
+| `--surface-subtle` | `rgba(0, 0, 0, 0.02)` | Subtle backgrounds |
+| `--surface-muted` | `rgba(0, 0, 0, 0.04)` | Muted backgrounds |
 
-All spacing uses a **2px base grid**, with common stops at:
+### Borders
 
 | Token | Value | Usage |
 |---|---|---|
-| `--space-2` | `2px` | List item gap, tight sibling spacing |
-| `--space-4` | `4px` | Inline gaps, menu padding |
-| `--space-6` | `6px` | Form label gap, small stack gaps |
-| `--space-8` | `8px` | Button gaps, flex row gaps |
-| `--space-10` | `10px` | Input padding (vertical), list item padding |
-| `--space-12` | `12px` | Grid gaps, section gaps |
-| `--space-14` | `14px` | Stack gap, input padding (horizontal) |
-| `--space-16` | `16px` | Panel inner padding, section spacing |
-| `--space-20` | `20px` | Content area padding, detail gap |
-| `--space-24` | `24px` | Main padding, modal padding |
-| `--space-28` | `28px` | Detail panel horizontal padding |
-
----
-
-## Border Radius
-
-Use the CSS custom property tokens defined in the Design Tokens section. See that table for the full scale (`--radius-xs` through `--radius-full`).
+| `--border-faint` | `rgba(0, 0, 0, 0.06)` | Internal dividers |
+| `--border-default` | `rgba(0, 0, 0, 0.1)` | Card/panel borders, topbar, sidebar |
+| `--border-strong` | `rgba(0, 0, 0, 0.14)` | Input borders |
 
 ---
 
 ## Shadows
 
+Shadows are used **minimally**. Cards have no shadow. Only modals and menus cast subtle shadows.
+
 | Name | Value | Usage |
 |---|---|---|
-| `shadow-card` | `0 24px 60px rgba(16, 33, 46, 0.08)` | Card elevation |
-| `shadow-modal` | `0 32px 90px rgba(16, 33, 46, 0.26)` | Modal overlay |
-| `shadow-menu` | `0 8px 24px rgba(16, 33, 46, 0.15)` | Context menus, dropdowns |
-| `shadow-panel` | `-8px 0 40px rgba(16, 33, 46, 0.18)` | Slide-out panel |
-| `shadow-brand` | `0 2px 6px rgba(16, 33, 46, 0.12)` | Brand icon `drop-shadow` |
+| `shadow-card` | `none` | Cards use borders, not shadows |
+| `shadow-modal` | `0 8px 32px rgba(0, 0, 0, 0.12)` | Modal overlay |
+| `shadow-menu` | `0 4px 16px rgba(0, 0, 0, 0.1)` | Context menus |
+| `shadow-panel` | `-2px 0 16px rgba(0, 0, 0, 0.08)` | Slide-out panel |
 
 ---
 
 ## Buttons
 
-All buttons use `border: 0; border-radius: 999px; cursor: pointer`. Hover lifts with `translateY(-1px)`. Disabled: `opacity: 0.55; cursor: not-allowed; no lift`.
+All buttons use `border: 0; border-radius: 999px; cursor: pointer`. Disabled: `opacity: 0.55; cursor: not-allowed`.
 
 ### Variants
 
 | Variant | Class | Background | Text Color | Usage |
 |---|---|---|---|---|
-| **Primary** | `.primary-button` | `linear-gradient(120deg, #0f2433, #2d7268)` | `#ffffff` | Main CTA — save, create, confirm |
-| **Ghost** | `.ghost-button` | `rgba(16, 33, 46, 0.07)` | `#10212e` | Secondary actions — cancel, open, browse |
-| **Danger** | `.danger-button` | `rgba(176, 46, 34, 0.12)` | `#8e2319` | Destructive actions — delete, remove |
+| **Primary** | `.primary-button` | `#3d7a73` (solid flat) | `#ffffff` | Main CTA — save, create, confirm |
+| **Ghost** | `.ghost-button` | `rgba(0, 0, 0, 0.05)` | `var(--ink)` | Secondary actions — cancel, open |
+| **Danger** | `.danger-button` | `rgba(200, 50, 40, 0.1)` | `#b33a30` | Destructive actions — delete, remove |
 
 ### Sizes
 
-Only **2 button size tiers** exist. All three variants use identical padding/font-size at each tier:
-
-| Size | Padding | Font Size | Class | Usage |
-|---|---|---|---|---|
-| **Default** | `9px 16px` | `var(--text-base)` | (base class) | Standard buttons |
-| **Small** | `5px 12px` | `var(--text-sm)` | `.btn-sm` | Inline actions, topbar, hooks, settings controls |
-
-Action grid buttons are a **layout variant**, not a size tier — they use default font-size with `min-height: 58px`.
+| Size | Padding | Font Size | Class |
+|---|---|---|---|
+| **Default** | `9px 16px` | `var(--text-base)` | (base class) |
+| **Small** | `5px 12px` | `var(--text-sm)` | `.btn-sm` |
 
 ### Rules
 
-- Use **one primary button** per visible form/section. If two equally important actions exist, one should be ghost.
-- Topbar CTA is NOT a primary-button — it uses `.topbar-new-btn` with small size.
+- Use **one primary button** per visible form/section.
+- **No gradients** on any button.
 - Buttons in `.modal-actions` are right-aligned with `gap: 12px`.
-- Action grid buttons use `border-radius: var(--radius-md); min-height: 58px` (not pill radius).
-- **Never introduce a new button size tier.** Only Default and Small exist.
-- **Never use inline `style` for padding/fontSize on buttons.** Add `.btn-sm` instead.
+- Action grid buttons use `border-radius: var(--radius-md); min-height: 58px`.
 
 ---
 
 ## Form Controls
 
-Always use the `<Input>`, `<Textarea>`, `<Select>` components from `src/components/FormControls.tsx` instead of native elements.
-
-### Input / Select
+Always use `<Input>`, `<Textarea>`, `<Select>` from `src/components/FormControls.tsx`.
 
 | Property | Value |
 |---|---|
-| Width | `100%` |
-| Padding | `8px 12px` |
-| Border | `1px solid rgba(16, 33, 46, 0.12)` |
-| Border Radius | `var(--radius-sm)` (8px) |
-| Background | `rgba(250, 252, 255, 0.88)` |
-| Focus | Border changes to `rgba(46, 107, 99, 0.70)` |
-| Transition | `border-color 140ms ease` |
-
-### Textarea
-
-Same as Input, plus:
-- `resize: vertical`
-- `min-height: 140px` (default), `56px` (compact, e.g. hook script)
-
-### Labels
-
-`.field-label`: `font-size: 0.85rem; color: rgba(16, 33, 46, 0.8); gap: 6px` between label text and control.
-
----
-
-## Toast
-
-Fixed at `bottom: 24px; right: 24px`. Auto-dismiss after 3 seconds. Click to dismiss early.
-
-| Property | Value |
-|---|---|
-| Padding | `10px 18px` |
-| Border Radius | `12px` |
-| Font Size | `0.85rem` |
-| Font Weight | `500` |
-| Z-Index | `9999` |
-| Animation | Slide up 200ms on enter, fade out 300ms at 2.7s |
-
-### Variants
-
-| Variant | Background | Text | Border |
-|---|---|---|---|
-| `toast-success` | `rgba(49, 143, 114, 0.15)` | `#185b46` | `rgba(49, 143, 114, 0.25)` |
-| `toast-error` | `rgba(197, 61, 46, 0.15)` | `#8e2319` | `rgba(197, 61, 46, 0.25)` |
-
-### Rules
-
-- Prefix with `✓` (success) or `✗` (error).
-- Keep message under ~60 characters.
-- Only one toast visible at a time — new toast replaces the old one.
-
----
-
-## Badges
-
-Pill-shaped status indicators: `border-radius: 999px; font-size: 0.68rem; font-weight: 700; padding: 3px 9px`.
-
-| Variant | Class | Background | Text |
-|---|---|---|---|
-| Neutral | `.badge-neutral` | `rgba(16, 33, 46, 0.08)` | inherited |
-| Warning | `.badge-warning` | `rgba(255, 204, 112, 0.32)` | `#8a5400` |
-| Danger | `.badge-danger` | `rgba(197, 61, 46, 0.14)` | `#8b251a` |
-| Good | `.badge-good` | `rgba(49, 143, 114, 0.16)` | `#185b46` |
-| PR | `.pr-badge` | `rgba(88, 66, 186, 0.12)` | `#5842ba` |
-| Tab count | `.topbar-tab-badge` | `rgba(46, 107, 99, 0.12)` | `rgba(46, 107, 99, 0.8)` |
+| Border | `1px solid var(--border-strong)` |
+| Border Radius | `var(--radius-sm)` |
+| Background | `#ffffff` (light) / `#1e1e1e` (dark) |
+| Focus | Border changes to `var(--teal-focus)` |
 
 ---
 
@@ -281,118 +166,49 @@ Pill-shaped status indicators: `border-radius: 999px; font-size: 0.68rem; font-w
 
 ### Card (`.card`)
 
-- Background: `rgba(255, 255, 255, 0.74)`
-- Border: `1px solid rgba(16, 33, 46, 0.10)`
-- Radius: `20px`
-- Shadow: `0 24px 60px rgba(16, 33, 46, 0.08)`
+- Background: `#ffffff`
+- Border: `1px solid var(--border-default)`
+- Radius: `var(--radius-xl)` (12px)
+- Shadow: **none**
 - Padding: `18px`
 
 ### Modal (`.modal-card`)
 
-- Background: `rgba(254, 251, 246, 0.98)`
-- Radius: `24px`
-- Shadow: `0 32px 90px rgba(16, 33, 46, 0.26)`
+- Background: `#ffffff`
+- Border: `1px solid var(--border-default)`
+- Radius: `var(--radius-xl)` (12px)
+- Shadow: `0 8px 32px rgba(0, 0, 0, 0.12)`
 - Padding: `24px`
-- Max-height: `80vh` with scroll
-- Backdrop: `rgba(16, 33, 46, 0.32)`
 
-### Slide-out Panel (`.create-modal-panel`)
+### Slide-out Panel
 
 - Fixed right, full height
 - Width: `min(480px, calc(100vw - 60px))`
-- Same surface/padding as modal
-- Shadow cast left: `-8px 0 40px rgba(16, 33, 46, 0.18)`
-- Animate: `slideInRight 180ms ease-out`
+- Shadow: `-2px 0 16px rgba(0, 0, 0, 0.08)`
 
 ---
 
-## Alert Banner
-
-`.alert-banner`: Error-only inline notification.
-
-| Property | Value |
-|---|---|
-| Padding | `10px 14px` |
-| Radius | `12px` |
-| Background | `rgba(197, 61, 46, 0.10)` |
-| Border | `1px solid rgba(197, 61, 46, 0.20)` |
-| Text Color | `#8e2319` |
-| Font Size | `0.85rem` |
-
-Use `<Alert>` component from `src/components/Alert.tsx`. Dismissible via `×` button.
+## Launcher Icons
 
----
-
-## Topbar Tabs
-
-Compact rounded-pill tabs with subtle background fill. No divider lines between tabs — spacing alone separates them.
-
-| Property | Value |
-|---|---|
-| Padding | `4px 10px` |
-| Border Radius | `6px` |
-| Gap between tabs | `4px` |
-| Font | `0.76rem`, weight `500` |
-| Color (default) | `rgba(16, 33, 46, 0.45)` |
-| Color (hover) | `rgba(16, 33, 46, 0.72)`, bg `rgba(16, 33, 46, 0.05)` |
-| Color (active) | `#10212e`, bg `rgba(16, 33, 46, 0.08)` |
-| Color (disabled) | `rgba(16, 33, 46, 0.18)`, no hover bg |
-| Transition | `color 140ms ease, background 140ms ease` |
-
-### "New Worktree" Button
-
-Not a primary-button. Uses its own subtle ghost style to match the topbar density:
-- `font-size: 0.7rem; padding: 4px 10px; border-radius: 6px`
-- `background: rgba(16, 33, 46, 0.08); color: rgba(16, 33, 46, 0.65)`
-- Hover: `background: rgba(16, 33, 46, 0.13); color: #10212e`
+All launcher icons use a simple, uniform background:
 
-### Rules
+- **Default**: `var(--surface-muted)` with `var(--border-default)` border
+- **Dark-themed launchers** (cursor, terminal, ghostty, iterm2, warp, opencode): `#1a1a1a` background
 
-- No divider lines, no bottom indicators — tabs are differentiated by background fill only.
-- Active tab uses **no font-weight change** to prevent width jitter during switching.
-- Tab badges shrink proportionally (`14px` height, `0.6rem` font) to match the compact topbar.
-- Brand icon `16px`, brand text `0.78rem`, separated from tabs by `20px` margin.
+No per-launcher gradients. No decorative shadows or glows.
 
 ---
 
-## Toggle Switch
+## Topbar
 
 | Property | Value |
 |---|---|
-| Size | `40px × 22px` |
-| Track off | `rgba(16, 33, 46, 0.20)`, radius `11px` |
-| Track on | `#34a853` |
-| Thumb | `16px` circle, white, `box-shadow: 0 1px 3px rgba(0,0,0,0.15)` |
-| Transition | `0.2s` |
-
----
-
-## Transitions
+| Height | `38px` |
+| Background | `var(--surface-topbar)` (solid, no blur) |
+| Border | `1px solid var(--border-default)` |
+| Left padding (macOS) | `78px` |
 
-| Usage | Duration | Easing |
-|---|---|---|
-| Button hover/bg/opacity | `140ms` | `ease` |
-| Tab color/bg | `120ms` | `ease` |
-| List item hover/border | `100ms` | `ease` |
-| Toggle switch | `200ms` | default |
-| Slide-out panel | `180ms` | `ease-out` |
-| Toast enter | `200ms` | `ease` |
-| Toast exit | `300ms` | `ease` |
-
----
-
-## Layout Constants
-
-| Token | Value |
-|---|---|
-| Topbar height | `38px` (aligns with macOS traffic light buttons) |
-| Topbar left padding (macOS traffic lights) | `78px` |
-| Main content padding | `24px 28px` |
-| Sidebar width (worktrees) | `280px` |
-| Max content width (repo/hooks views) | `640–680px` |
-| Slide-out panel width | `min(480px, calc(100vw - 60px))` |
-| Modal max width | `min(900px, 100%)` |
-| Min app width | `860px` |
+**No backdrop-filter.** No glass-morphism.
 
 ---
 
@@ -400,9 +216,10 @@ Not a primary-button. Uses its own subtle ghost style to match the topbar densit
 
 1. **Use existing components**: `Input`, `Textarea`, `Select` from `FormControls.tsx`; `ModalShell` for modals; `Alert` for error banners.
 2. **One primary CTA** per visible form section.
-3. **Glass-morphism** (`backdrop-filter: blur(28px)`) only on topbar. Cards use semi-transparent white.
-4. **Dark mode supported** — Light / Dark / System modes via `[data-theme]` attribute. All colors use CSS custom properties (`var(--token)`). Never hardcode colors — always use existing tokens from `:root`.
-5. **Pill radius** (`999px`) for buttons and badges. `14px` for action-grid buttons and inputs. `20px+` for cards.
-6. **Toast placement**: Always bottom-right, always one at a time.
-7. **Modal dismiss**: Escape key + backdrop click. `canClose` prop controls both.
-8. **Font pairing**: Serif for feature headings, sans-serif for UI, monospace for code/paths.
+3. **No glass-morphism**, no `backdrop-filter: blur()`. All surfaces are solid.
+4. **No gradients** anywhere — buttons, backgrounds, launcher icons are all flat.
+5. **Dark mode supported** — Light / Dark / System via `[data-theme]`. All colors use CSS custom properties. Never hardcode colors.
+6. **Pill radius** (`999px`) for buttons and badges. `var(--radius-xl)` for cards and modals.
+7. **Toast placement**: bottom-right, one at a time, auto-dismiss 3s.
+8. **Modal dismiss**: Escape key + backdrop click.
+9. **Typography**: Sans-serif everywhere. No serif fonts.
diff --git a/src/styles.css b/src/styles.css
index 952c115..47cf08f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -15,12 +15,12 @@
   --text-base: 0.85rem;
 
   /* ── Radius tokens ── */
-  --radius-xs: 6px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 16px;
-  --radius-xl: 20px;
-  --radius-2xl: 24px;
+  --radius-xs: 5px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 14px;
   --radius-full: 999px;
 
   /* ── Layout ── */
@@ -32,206 +32,194 @@
     monospace;
 
   /* ── Ink (text hierarchy) ── */
-  --ink: #10212e;
-  --ink-strong: rgba(16, 33, 46, 0.88);
-  --ink-secondary: rgba(16, 33, 46, 0.68);
-  --ink-tertiary: rgba(16, 33, 46, 0.45);
-  --ink-ghost: rgba(16, 33, 46, 0.35);
-  --ink-faint: rgba(16, 33, 46, 0.18);
+  --ink: #1a1a1a;
+  --ink-strong: rgba(26, 26, 26, 0.9);
+  --ink-secondary: rgba(26, 26, 26, 0.6);
+  --ink-tertiary: rgba(26, 26, 26, 0.4);
+  --ink-ghost: rgba(26, 26, 26, 0.3);
+  --ink-faint: rgba(26, 26, 26, 0.15);
 
   /* ── Teal accent ── */
-  --teal: #2e6b63;
-  --teal-bg: rgba(46, 107, 99, 0.1);
-  --teal-bg-strong: rgba(46, 107, 99, 0.16);
-  --teal-border: rgba(46, 107, 99, 0.25);
-  --teal-focus: rgba(46, 107, 99, 0.7);
-  --teal-muted: rgba(46, 107, 99, 0.75);
-  --teal-hover: rgba(46, 107, 99, 0.9);
+  --teal: #3d7a73;
+  --teal-bg: rgba(61, 122, 115, 0.08);
+  --teal-bg-strong: rgba(61, 122, 115, 0.14);
+  --teal-border: rgba(61, 122, 115, 0.2);
+  --teal-focus: rgba(61, 122, 115, 0.5);
+  --teal-muted: rgba(61, 122, 115, 0.65);
+  --teal-hover: rgba(61, 122, 115, 0.85);
 
   /* ── Surfaces ── */
-  --surface-card: rgba(255, 255, 255, 0.74);
-  --surface-topbar: rgba(247, 243, 234, 0.72);
-  --surface-sidebar: rgba(247, 243, 234, 0.36);
-  --surface-modal: rgba(254, 251, 246, 0.98);
-  --surface-input: rgba(250, 252, 255, 0.88);
-  --surface-warm: rgba(255, 248, 238, 0.62);
-  --surface-raised: rgba(255, 255, 255, 0.7);
-  --surface-hover: rgba(16, 33, 46, 0.05);
-  --surface-subtle: rgba(16, 33, 46, 0.03);
-  --surface-muted: rgba(16, 33, 46, 0.06);
-  --surface-strong: rgba(16, 33, 46, 0.08);
-  --surface-stronger: rgba(16, 33, 46, 0.12);
+  --surface-card: #ffffff;
+  --surface-topbar: #fafafa;
+  --surface-sidebar: #f5f5f5;
+  --surface-modal: #ffffff;
+  --surface-input: #ffffff;
+  --surface-warm: #f7f7f7;
+  --surface-raised: #ffffff;
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --surface-subtle: rgba(0, 0, 0, 0.02);
+  --surface-muted: rgba(0, 0, 0, 0.04);
+  --surface-strong: rgba(0, 0, 0, 0.06);
+  --surface-stronger: rgba(0, 0, 0, 0.09);
 
   /* ── Borders ── */
-  --border-faint: rgba(16, 33, 46, 0.06);
-  --border-default: rgba(16, 33, 46, 0.1);
-  --border-strong: rgba(16, 33, 46, 0.12);
+  --border-faint: rgba(0, 0, 0, 0.06);
+  --border-default: rgba(0, 0, 0, 0.1);
+  --border-strong: rgba(0, 0, 0, 0.14);
 
   /* ── Shadows ── */
-  --shadow-card: 0 24px 60px rgba(16, 33, 46, 0.08);
-  --shadow-modal: 0 32px 90px rgba(16, 33, 46, 0.26);
-  --shadow-menu: 0 8px 24px rgba(16, 33, 46, 0.15);
-  --shadow-panel: -8px 0 40px rgba(16, 33, 46, 0.18);
+  --shadow-card: none;
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.1);
+  --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.08);
 
   /* ── Backdrop ── */
-  --backdrop: rgba(16, 33, 46, 0.32);
+  --backdrop: rgba(0, 0, 0, 0.3);
 
   /* ── Buttons ── */
-  --btn-primary-bg: linear-gradient(120deg, #0f2433 0%, #2d7268 100%);
+  --btn-primary-bg: #3d7a73;
   --btn-primary-text: #ffffff;
-  --btn-ghost-bg: rgba(16, 33, 46, 0.07);
+  --btn-ghost-bg: rgba(0, 0, 0, 0.05);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(176, 46, 34, 0.12);
-  --btn-danger-text: #8e2319;
+  --btn-danger-bg: rgba(200, 50, 40, 0.1);
+  --btn-danger-text: #b33a30;
 
   /* ── Success ── */
-  --success: #185b46;
-  --success-bg: rgba(49, 143, 114, 0.15);
-  --success-bg-subtle: rgba(49, 143, 114, 0.08);
-  --success-border: rgba(49, 143, 114, 0.25);
+  --success: #2d7a5f;
+  --success-bg: rgba(45, 122, 95, 0.1);
+  --success-bg-subtle: rgba(45, 122, 95, 0.06);
+  --success-border: rgba(45, 122, 95, 0.2);
 
   /* ── Danger ── */
-  --danger: #8e2319;
-  --danger-bg: rgba(197, 61, 46, 0.12);
-  --danger-bg-subtle: rgba(197, 61, 46, 0.06);
-  --danger-border: rgba(197, 61, 46, 0.2);
+  --danger: #b33a30;
+  --danger-bg: rgba(179, 58, 48, 0.08);
+  --danger-bg-subtle: rgba(179, 58, 48, 0.04);
+  --danger-border: rgba(179, 58, 48, 0.15);
 
   /* ── Warning ── */
-  --warning: #8a5400;
-  --warning-bg: rgba(255, 232, 187, 0.42);
-  --warning-border: rgba(199, 146, 0, 0.18);
-  --warning-badge-bg: rgba(255, 204, 112, 0.32);
-  --amber-bg: rgba(255, 211, 142, 0.28);
-  --amber-text: #784b00;
+  --warning: #8a6d2b;
+  --warning-bg: rgba(138, 109, 43, 0.08);
+  --warning-border: rgba(138, 109, 43, 0.15);
+  --warning-badge-bg: rgba(138, 109, 43, 0.1);
+  --amber-bg: rgba(138, 109, 43, 0.08);
+  --amber-text: #8a6d2b;
 
   /* ── Purple ── */
-  --purple: #5842ba;
-  --purple-bg: rgba(88, 66, 186, 0.12);
-  --purple-bg-hover: rgba(88, 66, 186, 0.22);
-  --purple-muted: rgba(88, 66, 186, 0.7);
+  --purple: #6b5cae;
+  --purple-bg: rgba(107, 92, 174, 0.08);
+  --purple-bg-hover: rgba(107, 92, 174, 0.14);
+  --purple-muted: rgba(107, 92, 174, 0.6);
 
   /* ── Diff ── */
-  --diff-add-bg: rgba(26, 127, 55, 0.1);
-  --diff-add-text: #1a6d2e;
-  --diff-del-bg: rgba(207, 34, 46, 0.1);
-  --diff-del-text: #a1232e;
-  --diff-hunk: rgba(102, 57, 186, 0.7);
+  --diff-add-bg: rgba(45, 122, 95, 0.08);
+  --diff-add-text: #2d6b4f;
+  --diff-del-bg: rgba(179, 58, 48, 0.08);
+  --diff-del-text: #a1382e;
+  --diff-hunk: rgba(107, 92, 174, 0.6);
 
   /* ── File status ── */
-  --file-modified: #b08800;
-  --file-added: #1a7f37;
-  --file-deleted: #cf222e;
-  --file-renamed: #6639ba;
+  --file-modified: #8a6d2b;
+  --file-added: #2d7a5f;
+  --file-deleted: #b33a30;
+  --file-renamed: #6b5cae;
 
   /* ── Toggle ── */
-  --toggle-off: rgba(16, 33, 46, 0.2);
-  --toggle-on: #34a853;
+  --toggle-off: rgba(0, 0, 0, 0.18);
+  --toggle-on: #3d7a73;
   --toggle-thumb: #ffffff;
 
-  /* ── Page background ── */
-  --page-radial-warm: rgba(255, 211, 142, 0.55);
-  --page-radial-cool: rgba(102, 204, 176, 0.35);
-  --page-gradient-from: #f7f3ea;
-  --page-gradient-to: #e8eef4;
-
   color: var(--ink);
-  background:
-    radial-gradient(circle at top left, var(--page-radial-warm), transparent 35%),
-    radial-gradient(circle at top right, var(--page-radial-cool), transparent 28%),
-    linear-gradient(180deg, var(--page-gradient-from) 0%, var(--page-gradient-to) 100%);
+  background: #fafafa;
 }
 
 /* ── Dark theme ── */
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --ink: #e8e0d8;
-  --ink-strong: rgba(232, 224, 216, 0.92);
-  --ink-secondary: rgba(232, 224, 216, 0.72);
-  --ink-tertiary: rgba(232, 224, 216, 0.5);
-  --ink-ghost: rgba(232, 224, 216, 0.38);
-  --ink-faint: rgba(232, 224, 216, 0.22);
-
-  --teal: #4eada2;
-  --teal-bg: rgba(78, 173, 162, 0.14);
-  --teal-bg-strong: rgba(78, 173, 162, 0.22);
-  --teal-border: rgba(78, 173, 162, 0.3);
-  --teal-focus: rgba(78, 173, 162, 0.65);
-  --teal-muted: rgba(78, 173, 162, 0.7);
-  --teal-hover: rgba(78, 173, 162, 0.85);
-
-  --surface-card: rgba(255, 255, 255, 0.06);
-  --surface-topbar: rgba(28, 24, 20, 0.85);
-  --surface-sidebar: rgba(28, 24, 20, 0.5);
-  --surface-modal: rgba(32, 28, 24, 0.98);
-  --surface-input: rgba(255, 255, 255, 0.06);
-  --surface-warm: rgba(255, 248, 238, 0.04);
-  --surface-raised: rgba(255, 255, 255, 0.08);
-  --surface-hover: rgba(255, 255, 255, 0.06);
+  --ink: #d4d4d4;
+  --ink-strong: rgba(212, 212, 212, 0.92);
+  --ink-secondary: rgba(212, 212, 212, 0.65);
+  --ink-tertiary: rgba(212, 212, 212, 0.42);
+  --ink-ghost: rgba(212, 212, 212, 0.3);
+  --ink-faint: rgba(212, 212, 212, 0.18);
+
+  --teal: #5aada4;
+  --teal-bg: rgba(90, 173, 164, 0.1);
+  --teal-bg-strong: rgba(90, 173, 164, 0.18);
+  --teal-border: rgba(90, 173, 164, 0.25);
+  --teal-focus: rgba(90, 173, 164, 0.5);
+  --teal-muted: rgba(90, 173, 164, 0.6);
+  --teal-hover: rgba(90, 173, 164, 0.8);
+
+  --surface-card: #1a1a1a;
+  --surface-topbar: #141414;
+  --surface-sidebar: #161616;
+  --surface-modal: #1c1c1c;
+  --surface-input: #1e1e1e;
+  --surface-warm: #181818;
+  --surface-raised: #1e1e1e;
+  --surface-hover: rgba(255, 255, 255, 0.05);
   --surface-subtle: rgba(255, 255, 255, 0.03);
-  --surface-muted: rgba(255, 255, 255, 0.06);
-  --surface-strong: rgba(255, 255, 255, 0.08);
-  --surface-stronger: rgba(255, 255, 255, 0.12);
+  --surface-muted: rgba(255, 255, 255, 0.05);
+  --surface-strong: rgba(255, 255, 255, 0.07);
+  --surface-stronger: rgba(255, 255, 255, 0.1);
 
   --border-faint: rgba(255, 255, 255, 0.06);
   --border-default: rgba(255, 255, 255, 0.1);
   --border-strong: rgba(255, 255, 255, 0.14);
 
-  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.25);
-  --shadow-modal: 0 32px 90px rgba(0, 0, 0, 0.5);
-  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.4);
-  --shadow-panel: -8px 0 40px rgba(0, 0, 0, 0.35);
+  --shadow-card: none;
+  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.35);
+  --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.3);
 
   --backdrop: rgba(0, 0, 0, 0.55);
 
-  --btn-primary-bg: linear-gradient(120deg, #1a3a52 0%, #3d9488 100%);
-  --btn-primary-text: #f0ece6;
-  --btn-ghost-bg: rgba(255, 255, 255, 0.08);
+  --btn-primary-bg: #5aada4;
+  --btn-primary-text: #111111;
+  --btn-ghost-bg: rgba(255, 255, 255, 0.07);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(220, 80, 60, 0.18);
-  --btn-danger-text: #f5a8a0;
-
-  --success: #5cc9a0;
-  --success-bg: rgba(92, 201, 160, 0.16);
-  --success-bg-subtle: rgba(92, 201, 160, 0.08);
-  --success-border: rgba(92, 201, 160, 0.28);
-
-  --danger: #f5a8a0;
-  --danger-bg: rgba(220, 80, 60, 0.18);
-  --danger-bg-subtle: rgba(220, 80, 60, 0.08);
-  --danger-border: rgba(220, 80, 60, 0.25);
-
-  --warning: #f0c050;
-  --warning-bg: rgba(240, 192, 80, 0.14);
-  --warning-border: rgba(240, 192, 80, 0.22);
-  --warning-badge-bg: rgba(240, 192, 80, 0.2);
-  --amber-bg: rgba(240, 192, 80, 0.14);
-  --amber-text: #f0c050;
-
-  --purple: #a594f0;
-  --purple-bg: rgba(165, 148, 240, 0.14);
-  --purple-bg-hover: rgba(165, 148, 240, 0.24);
-  --purple-muted: rgba(165, 148, 240, 0.65);
-
-  --diff-add-bg: rgba(92, 201, 160, 0.12);
-  --diff-add-text: #6fd8b0;
-  --diff-del-bg: rgba(220, 80, 60, 0.12);
-  --diff-del-text: #f0908a;
-  --diff-hunk: rgba(165, 148, 240, 0.65);
-
-  --file-modified: #f0c050;
-  --file-added: #6fd8b0;
-  --file-deleted: #f0908a;
-  --file-renamed: #a594f0;
-
-  --toggle-off: rgba(255, 255, 255, 0.22);
-  --toggle-on: #4caf60;
-  --toggle-thumb: #1c1814;
-
-  --page-radial-warm: rgba(180, 130, 60, 0.12);
-  --page-radial-cool: rgba(78, 173, 162, 0.08);
-  --page-gradient-from: #1a1714;
-  --page-gradient-to: #141820;
+  --btn-danger-bg: rgba(220, 90, 80, 0.15);
+  --btn-danger-text: #e8887e;
+
+  --success: #6bc9a0;
+  --success-bg: rgba(107, 201, 160, 0.12);
+  --success-bg-subtle: rgba(107, 201, 160, 0.06);
+  --success-border: rgba(107, 201, 160, 0.22);
+
+  --danger: #e8887e;
+  --danger-bg: rgba(220, 90, 80, 0.12);
+  --danger-bg-subtle: rgba(220, 90, 80, 0.06);
+  --danger-border: rgba(220, 90, 80, 0.2);
+
+  --warning: #d4a94a;
+  --warning-bg: rgba(212, 169, 74, 0.1);
+  --warning-border: rgba(212, 169, 74, 0.18);
+  --warning-badge-bg: rgba(212, 169, 74, 0.12);
+  --amber-bg: rgba(212, 169, 74, 0.1);
+  --amber-text: #d4a94a;
+
+  --purple: #a08dd4;
+  --purple-bg: rgba(160, 141, 212, 0.1);
+  --purple-bg-hover: rgba(160, 141, 212, 0.18);
+  --purple-muted: rgba(160, 141, 212, 0.55);
+
+  --diff-add-bg: rgba(107, 201, 160, 0.1);
+  --diff-add-text: #6bc9a0;
+  --diff-del-bg: rgba(220, 90, 80, 0.1);
+  --diff-del-text: #e8887e;
+  --diff-hunk: rgba(160, 141, 212, 0.55);
+
+  --file-modified: #d4a94a;
+  --file-added: #6bc9a0;
+  --file-deleted: #e8887e;
+  --file-renamed: #a08dd4;
+
+  --toggle-off: rgba(255, 255, 255, 0.18);
+  --toggle-on: #5aada4;
+  --toggle-thumb: #111111;
+
+  background: #111111;
 }
 
 * {
@@ -292,9 +280,7 @@ pre {
   justify-content: space-between;
   padding: 0 16px 0 var(--topbar-inset-left, 16px);
   background: var(--surface-topbar);
-  backdrop-filter: blur(28px);
-  -webkit-backdrop-filter: blur(28px);
-  border-bottom: 1px solid var(--border-faint);
+  border-bottom: 1px solid var(--border-default);
   -webkit-app-region: drag;
   z-index: 20;
 }
@@ -310,11 +296,10 @@ pre {
   display: flex;
   align-items: center;
   gap: 6px;
-  color: var(--ink-strong);
-  font-family: var(--font-mono);
-  font-weight: 700;
+  color: var(--ink);
+  font-weight: 600;
   font-size: var(--text-sm);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.01em;
   white-space: nowrap;
   pointer-events: none;
   -webkit-app-region: drag;
@@ -324,7 +309,6 @@ pre {
   width: 16px;
   height: 16px;
   flex: none;
-  filter: drop-shadow(0 1px 4px var(--border-faint));
 }
 
 /* Sidebar Navigation */
@@ -341,9 +325,9 @@ pre {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   padding: 10px 6px;
-  border-right: 1px solid var(--border-faint);
+  border-right: 1px solid var(--border-default);
   background: var(--surface-sidebar);
 }
 
@@ -353,7 +337,7 @@ pre {
   justify-content: center;
   width: 36px;
   height: 36px;
-  border-radius: 10px;
+  border-radius: var(--radius-sm);
   background: transparent;
   color: var(--ink-ghost);
   border: none;
@@ -402,12 +386,12 @@ pre {
   align-items: center;
   gap: 5px;
   padding: 3px 10px;
-  border-radius: 999px;
+  border-radius: var(--radius-sm);
   background: var(--surface-subtle);
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--border-faint);
   font-family: var(--font-mono);
   font-size: 11px;
-  color: var(--ink);
+  color: var(--ink-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -460,7 +444,6 @@ pre {
   width: 34px;
   height: 34px;
   flex: none;
-  filter: drop-shadow(0 10px 22px var(--ink-faint));
 }
 
 /* Worktrees master-detail layout */
@@ -477,12 +460,12 @@ pre {
   display: flex;
   align-items: flex-start;
   padding: 18px 18px 6px;
-  background: var(--surface-warm);
+  background: var(--surface-sidebar);
   border-right: 1px solid var(--border-default);
 }
 
 .worktrees-panel {
-  background: var(--surface-warm);
+  background: var(--surface-sidebar);
   border-right: 1px solid var(--border-default);
   padding: 12px 10px;
   display: flex;
@@ -586,9 +569,8 @@ pre {
 .hero h2,
 .overview h2 {
   margin: 0;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
-  font-weight: 700;
-  letter-spacing: -0.03em;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .overview p,
@@ -601,7 +583,6 @@ pre {
   background: var(--surface-card);
   border: 1px solid var(--border-default);
   border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-card);
   padding: 18px;
 }
 
@@ -612,8 +593,8 @@ pre {
 }
 
 .hero {
-  padding: 34px;
-  border-radius: 28px;
+  padding: 28px;
+  border-radius: var(--radius-xl);
 }
 
 .hero-points {
@@ -671,10 +652,11 @@ textarea {
 }
 
 .primary-button {
-  background: var(--btn-primary-bg);
+  background-color: var(--btn-primary-bg);
   color: var(--btn-primary-text);
   padding: 9px 16px;
   font-size: var(--text-base);
+  font-weight: 500;
 }
 
 .ghost-button {
@@ -1082,94 +1064,33 @@ textarea {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
-  border: 1px solid var(--surface-strong);
-  background: var(--surface-card);
+  border: 1px solid var(--border-default);
+  background: var(--surface-muted);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
   overflow: hidden;
-  box-shadow: inset 0 1px 0 var(--surface-raised);
-}
-
-.launcher-icon-shell[data-launcher-id="vscode"] {
-  background: rgba(0, 122, 204, 0.14);
 }
 
-.launcher-icon-shell[data-launcher-id="cursor"] {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 38%),
-    linear-gradient(180deg, #20242a 0%, #08090b 100%);
-  border-color: var(--border-strong);
-}
-
-.launcher-icon-shell[data-launcher-id="terminal"] {
-  background:
-    radial-gradient(circle at top left, rgba(106, 255, 149, 0.18), transparent 42%),
-    linear-gradient(180deg, #20262d 0%, #11161b 100%);
+.launcher-icon-shell[data-launcher-id="cursor"],
+.launcher-icon-shell[data-launcher-id="terminal"],
+.launcher-icon-shell[data-launcher-id="ghostty"],
+.launcher-icon-shell[data-launcher-id="iterm2"],
+.launcher-icon-shell[data-launcher-id="warp"],
+.launcher-icon-shell[data-launcher-id="opencode"] {
+  background: #1a1a1a;
   border-color: var(--border-strong);
 }
 
-.launcher-icon-shell[data-launcher-id="ghostty"] {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 34%),
-    linear-gradient(135deg, #5a69ff 0%, #7a4df3 52%, #a23cf1 100%);
-  border-color: rgba(90, 105, 255, 0.28);
-}
-
-.launcher-icon-shell[data-launcher-id="iterm2"] {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%),
-    radial-gradient(circle at 50% 120%, rgba(99, 0, 124, 0.55), transparent 52%),
-    linear-gradient(180deg, #0f1115 0%, #040507 100%);
-  border-color: rgba(255, 255, 255, 0.08);
-  border-radius: 11px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.08),
-    0 4px 10px rgba(0, 0, 0, 0.14);
-}
-
-.launcher-icon-shell[data-launcher-id="claude"] {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 34%),
-    linear-gradient(180deg, #df7c57 0%, #d86f4b 100%);
-  border-color: rgba(205, 95, 47, 0.28);
-  border-radius: 11px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.18),
-    0 4px 10px rgba(179, 88, 48, 0.18);
-}
-
-.launcher-icon-shell[data-launcher-id="codex"] {
-  background: rgba(69, 80, 93, 0.14);
-}
-
-.launcher-icon-shell[data-launcher-id="gemini"] {
-  background: rgba(107, 99, 246, 0.14);
-}
-
-.launcher-icon-shell[data-launcher-id="warp"] {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 34%),
-    linear-gradient(135deg, #01a4c7 0%, #0184a0 52%, #016f86 100%);
-  border-color: rgba(1, 164, 199, 0.28);
-}
-
-.launcher-icon-shell[data-launcher-id="wezterm"] {
-  background: rgba(78, 62, 200, 0.12);
-}
-
-.launcher-icon-shell[data-launcher-id="alacritty"] {
-  background: rgba(244, 109, 1, 0.12);
-}
-
-.launcher-icon-shell[data-launcher-id="kitty"] {
-  background: rgba(120, 68, 33, 0.12);
-}
-
-.launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #131010;
-  border-color: rgba(255, 255, 255, 0.08);
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="cursor"],
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="terminal"],
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="ghostty"],
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="iterm2"],
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="warp"],
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="opencode"] {
+  background: #0a0a0a;
+  border-color: rgba(255, 255, 255, 0.1);
 }
 
 .launcher-icon {
@@ -1205,7 +1126,6 @@ textarea {
   align-items: center;
   gap: 2px;
   color: #2bf15c;
-  text-shadow: 0 0 6px rgba(43, 241, 92, 0.28);
 }
 
 .iterm2-dollar {
@@ -1221,7 +1141,6 @@ textarea {
   height: 14px;
   border-radius: 999px;
   background: currentColor;
-  box-shadow: 0 0 6px rgba(43, 241, 92, 0.32);
 }
 
 .claude-app-glyph {
@@ -1241,14 +1160,13 @@ textarea {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
-  border: 1px solid var(--surface-strong);
-  background: var(--surface-card);
+  border: 1px solid var(--border-default);
+  background: var(--surface-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none;
   font-size: 1.1rem;
-  box-shadow: inset 0 1px 0 var(--surface-raised);
 }
 
 .launcher-terminal-hint {
@@ -1300,10 +1218,9 @@ textarea {
 .detail-branch {
   margin: 0;
   min-width: 0;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  font-size: 1.3rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  font-size: 1.2rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1563,7 +1480,8 @@ textarea {
   max-height: 80vh;
   overflow: auto;
   background: var(--surface-modal);
-  border-radius: var(--radius-2xl);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-xl);
   padding: 24px;
   box-shadow: var(--shadow-modal);
 }
@@ -2289,10 +2207,8 @@ textarea {
 }
 
 .launcher-icon-shell.launcher-icon-custom {
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 34%),
-    linear-gradient(135deg, rgba(120, 120, 140, 0.3) 0%, rgba(80, 80, 100, 0.3) 100%);
-  border-color: rgba(120, 120, 140, 0.2);
+  background: var(--surface-strong);
+  border-color: var(--border-default);
 }
 
 /* Custom Launcher Modal */
@@ -2455,7 +2371,7 @@ textarea {
 .theme-switcher button.active {
   background: var(--surface-card);
   color: var(--ink);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  border: 1px solid var(--border-default);
 }
 
 /* ─── Toggle Switch ─── */
@@ -2490,7 +2406,6 @@ textarea {
   background: var(--toggle-thumb);
   border-radius: 50%;
   transition: transform 0.2s;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
 }
 .toggle-switch input:checked + .toggle-slider {
   background: var(--toggle-on);

From 792ff88884a4dfb0a3649062c19b40da7704e9c3 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 12:25:56 +0800
Subject: [PATCH 2/9] fix: warm up neutral palette to feel alive instead of
 grayscale
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shift all neutrals from pure gray to warm-tinted:
- Background: #fafafa → #f8f6f3 (warm off-white, like quality paper)
- Ink: #1a1a1a → #1c1917 (warm dark, like walnut ink)
- Surfaces: warm whites (#fefdfb, #f7f5f2, #f3f1ee)
- Borders/shadows: warm-tinted rgba(28,25,23,...) instead of pure black
- Dark mode: #111111 → #151312 (warm dark, like aged wood)
- Dark ink: #d4d4d4 → #dbd6d0 (warm light)

Still minimalist, still restrained — but now it feels like real
materials instead of a grayscale printout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 290 ++++++++++++++++++++++++-------------------------
 1 file changed, 145 insertions(+), 145 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 47cf08f..eb9932d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -31,195 +31,195 @@
     "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, "Liberation Mono",
     monospace;
 
-  /* ── Ink (text hierarchy) ── */
-  --ink: #1a1a1a;
-  --ink-strong: rgba(26, 26, 26, 0.9);
-  --ink-secondary: rgba(26, 26, 26, 0.6);
-  --ink-tertiary: rgba(26, 26, 26, 0.4);
-  --ink-ghost: rgba(26, 26, 26, 0.3);
-  --ink-faint: rgba(26, 26, 26, 0.15);
+  /* ── Ink (text hierarchy) ── warm dark, like walnut ink ── */
+  --ink: #1c1917;
+  --ink-strong: rgba(28, 25, 23, 0.9);
+  --ink-secondary: rgba(28, 25, 23, 0.6);
+  --ink-tertiary: rgba(28, 25, 23, 0.4);
+  --ink-ghost: rgba(28, 25, 23, 0.3);
+  --ink-faint: rgba(28, 25, 23, 0.15);
 
   /* ── Teal accent ── */
-  --teal: #3d7a73;
-  --teal-bg: rgba(61, 122, 115, 0.08);
-  --teal-bg-strong: rgba(61, 122, 115, 0.14);
-  --teal-border: rgba(61, 122, 115, 0.2);
-  --teal-focus: rgba(61, 122, 115, 0.5);
-  --teal-muted: rgba(61, 122, 115, 0.65);
-  --teal-hover: rgba(61, 122, 115, 0.85);
-
-  /* ── Surfaces ── */
-  --surface-card: #ffffff;
-  --surface-topbar: #fafafa;
-  --surface-sidebar: #f5f5f5;
-  --surface-modal: #ffffff;
-  --surface-input: #ffffff;
-  --surface-warm: #f7f7f7;
-  --surface-raised: #ffffff;
-  --surface-hover: rgba(0, 0, 0, 0.04);
-  --surface-subtle: rgba(0, 0, 0, 0.02);
-  --surface-muted: rgba(0, 0, 0, 0.04);
-  --surface-strong: rgba(0, 0, 0, 0.06);
-  --surface-stronger: rgba(0, 0, 0, 0.09);
-
-  /* ── Borders ── */
-  --border-faint: rgba(0, 0, 0, 0.06);
-  --border-default: rgba(0, 0, 0, 0.1);
-  --border-strong: rgba(0, 0, 0, 0.14);
+  --teal: #2e7a6e;
+  --teal-bg: rgba(46, 122, 110, 0.08);
+  --teal-bg-strong: rgba(46, 122, 110, 0.15);
+  --teal-border: rgba(46, 122, 110, 0.22);
+  --teal-focus: rgba(46, 122, 110, 0.5);
+  --teal-muted: rgba(46, 122, 110, 0.6);
+  --teal-hover: rgba(46, 122, 110, 0.82);
+
+  /* ── Surfaces ── warm whites, like good stationery ── */
+  --surface-card: #fefdfb;
+  --surface-topbar: #f7f5f2;
+  --surface-sidebar: #f3f1ee;
+  --surface-modal: #fefdfb;
+  --surface-input: #fefdfb;
+  --surface-warm: #f5f3f0;
+  --surface-raised: #fefdfb;
+  --surface-hover: rgba(28, 25, 23, 0.045);
+  --surface-subtle: rgba(28, 25, 23, 0.025);
+  --surface-muted: rgba(28, 25, 23, 0.04);
+  --surface-strong: rgba(28, 25, 23, 0.065);
+  --surface-stronger: rgba(28, 25, 23, 0.1);
+
+  /* ── Borders ── warm-tinted ── */
+  --border-faint: rgba(28, 25, 23, 0.07);
+  --border-default: rgba(28, 25, 23, 0.12);
+  --border-strong: rgba(28, 25, 23, 0.16);
 
   /* ── Shadows ── */
   --shadow-card: none;
-  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12);
-  --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.1);
-  --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.08);
+  --shadow-modal: 0 8px 32px rgba(28, 25, 23, 0.14);
+  --shadow-menu: 0 4px 16px rgba(28, 25, 23, 0.12);
+  --shadow-panel: -2px 0 16px rgba(28, 25, 23, 0.1);
 
   /* ── Backdrop ── */
-  --backdrop: rgba(0, 0, 0, 0.3);
+  --backdrop: rgba(28, 25, 23, 0.32);
 
   /* ── Buttons ── */
-  --btn-primary-bg: #3d7a73;
-  --btn-primary-text: #ffffff;
-  --btn-ghost-bg: rgba(0, 0, 0, 0.05);
+  --btn-primary-bg: #2e7a6e;
+  --btn-primary-text: #fefdfb;
+  --btn-ghost-bg: rgba(28, 25, 23, 0.055);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(200, 50, 40, 0.1);
-  --btn-danger-text: #b33a30;
+  --btn-danger-bg: rgba(180, 58, 46, 0.1);
+  --btn-danger-text: #a63828;
 
   /* ── Success ── */
-  --success: #2d7a5f;
-  --success-bg: rgba(45, 122, 95, 0.1);
-  --success-bg-subtle: rgba(45, 122, 95, 0.06);
-  --success-border: rgba(45, 122, 95, 0.2);
+  --success: #28735a;
+  --success-bg: rgba(40, 115, 90, 0.1);
+  --success-bg-subtle: rgba(40, 115, 90, 0.06);
+  --success-border: rgba(40, 115, 90, 0.2);
 
   /* ── Danger ── */
-  --danger: #b33a30;
-  --danger-bg: rgba(179, 58, 48, 0.08);
-  --danger-bg-subtle: rgba(179, 58, 48, 0.04);
-  --danger-border: rgba(179, 58, 48, 0.15);
+  --danger: #a63828;
+  --danger-bg: rgba(166, 56, 40, 0.09);
+  --danger-bg-subtle: rgba(166, 56, 40, 0.05);
+  --danger-border: rgba(166, 56, 40, 0.16);
 
   /* ── Warning ── */
-  --warning: #8a6d2b;
-  --warning-bg: rgba(138, 109, 43, 0.08);
-  --warning-border: rgba(138, 109, 43, 0.15);
-  --warning-badge-bg: rgba(138, 109, 43, 0.1);
-  --amber-bg: rgba(138, 109, 43, 0.08);
-  --amber-text: #8a6d2b;
+  --warning: #7d6328;
+  --warning-bg: rgba(125, 99, 40, 0.09);
+  --warning-border: rgba(125, 99, 40, 0.16);
+  --warning-badge-bg: rgba(125, 99, 40, 0.1);
+  --amber-bg: rgba(125, 99, 40, 0.08);
+  --amber-text: #7d6328;
 
   /* ── Purple ── */
-  --purple: #6b5cae;
-  --purple-bg: rgba(107, 92, 174, 0.08);
-  --purple-bg-hover: rgba(107, 92, 174, 0.14);
-  --purple-muted: rgba(107, 92, 174, 0.6);
+  --purple: #6258a0;
+  --purple-bg: rgba(98, 88, 160, 0.09);
+  --purple-bg-hover: rgba(98, 88, 160, 0.15);
+  --purple-muted: rgba(98, 88, 160, 0.58);
 
   /* ── Diff ── */
-  --diff-add-bg: rgba(45, 122, 95, 0.08);
-  --diff-add-text: #2d6b4f;
-  --diff-del-bg: rgba(179, 58, 48, 0.08);
-  --diff-del-text: #a1382e;
-  --diff-hunk: rgba(107, 92, 174, 0.6);
+  --diff-add-bg: rgba(40, 115, 90, 0.09);
+  --diff-add-text: #286b4a;
+  --diff-del-bg: rgba(166, 56, 40, 0.09);
+  --diff-del-text: #963228;
+  --diff-hunk: rgba(98, 88, 160, 0.55);
 
   /* ── File status ── */
-  --file-modified: #8a6d2b;
-  --file-added: #2d7a5f;
-  --file-deleted: #b33a30;
-  --file-renamed: #6b5cae;
+  --file-modified: #7d6328;
+  --file-added: #28735a;
+  --file-deleted: #a63828;
+  --file-renamed: #6258a0;
 
   /* ── Toggle ── */
-  --toggle-off: rgba(0, 0, 0, 0.18);
-  --toggle-on: #3d7a73;
-  --toggle-thumb: #ffffff;
+  --toggle-off: rgba(28, 25, 23, 0.18);
+  --toggle-on: #2e7a6e;
+  --toggle-thumb: #fefdfb;
 
   color: var(--ink);
-  background: #fafafa;
+  background: #f8f6f3;
 }
 
-/* ── Dark theme ── */
+/* ── Dark theme ── warm darks, like aged wood ── */
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --ink: #d4d4d4;
-  --ink-strong: rgba(212, 212, 212, 0.92);
-  --ink-secondary: rgba(212, 212, 212, 0.65);
-  --ink-tertiary: rgba(212, 212, 212, 0.42);
-  --ink-ghost: rgba(212, 212, 212, 0.3);
-  --ink-faint: rgba(212, 212, 212, 0.18);
-
-  --teal: #5aada4;
-  --teal-bg: rgba(90, 173, 164, 0.1);
-  --teal-bg-strong: rgba(90, 173, 164, 0.18);
-  --teal-border: rgba(90, 173, 164, 0.25);
-  --teal-focus: rgba(90, 173, 164, 0.5);
-  --teal-muted: rgba(90, 173, 164, 0.6);
-  --teal-hover: rgba(90, 173, 164, 0.8);
-
-  --surface-card: #1a1a1a;
-  --surface-topbar: #141414;
-  --surface-sidebar: #161616;
-  --surface-modal: #1c1c1c;
-  --surface-input: #1e1e1e;
-  --surface-warm: #181818;
-  --surface-raised: #1e1e1e;
-  --surface-hover: rgba(255, 255, 255, 0.05);
-  --surface-subtle: rgba(255, 255, 255, 0.03);
-  --surface-muted: rgba(255, 255, 255, 0.05);
-  --surface-strong: rgba(255, 255, 255, 0.07);
-  --surface-stronger: rgba(255, 255, 255, 0.1);
-
-  --border-faint: rgba(255, 255, 255, 0.06);
-  --border-default: rgba(255, 255, 255, 0.1);
-  --border-strong: rgba(255, 255, 255, 0.14);
+  --ink: #dbd6d0;
+  --ink-strong: rgba(219, 214, 208, 0.92);
+  --ink-secondary: rgba(219, 214, 208, 0.65);
+  --ink-tertiary: rgba(219, 214, 208, 0.42);
+  --ink-ghost: rgba(219, 214, 208, 0.3);
+  --ink-faint: rgba(219, 214, 208, 0.18);
+
+  --teal: #52b0a4;
+  --teal-bg: rgba(82, 176, 164, 0.1);
+  --teal-bg-strong: rgba(82, 176, 164, 0.18);
+  --teal-border: rgba(82, 176, 164, 0.25);
+  --teal-focus: rgba(82, 176, 164, 0.48);
+  --teal-muted: rgba(82, 176, 164, 0.58);
+  --teal-hover: rgba(82, 176, 164, 0.78);
+
+  --surface-card: #1c1a18;
+  --surface-topbar: #171614;
+  --surface-sidebar: #1a1816;
+  --surface-modal: #1e1c1a;
+  --surface-input: #201e1c;
+  --surface-warm: #1a1816;
+  --surface-raised: #201e1c;
+  --surface-hover: rgba(219, 214, 208, 0.055);
+  --surface-subtle: rgba(219, 214, 208, 0.03);
+  --surface-muted: rgba(219, 214, 208, 0.05);
+  --surface-strong: rgba(219, 214, 208, 0.07);
+  --surface-stronger: rgba(219, 214, 208, 0.1);
+
+  --border-faint: rgba(219, 214, 208, 0.06);
+  --border-default: rgba(219, 214, 208, 0.1);
+  --border-strong: rgba(219, 214, 208, 0.14);
 
   --shadow-card: none;
   --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
   --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.35);
   --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.3);
 
-  --backdrop: rgba(0, 0, 0, 0.55);
+  --backdrop: rgba(10, 9, 8, 0.6);
 
-  --btn-primary-bg: #5aada4;
-  --btn-primary-text: #111111;
-  --btn-ghost-bg: rgba(255, 255, 255, 0.07);
+  --btn-primary-bg: #52b0a4;
+  --btn-primary-text: #151312;
+  --btn-ghost-bg: rgba(219, 214, 208, 0.07);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(220, 90, 80, 0.15);
-  --btn-danger-text: #e8887e;
+  --btn-danger-bg: rgba(210, 100, 88, 0.15);
+  --btn-danger-text: #e09080;
 
-  --success: #6bc9a0;
-  --success-bg: rgba(107, 201, 160, 0.12);
-  --success-bg-subtle: rgba(107, 201, 160, 0.06);
-  --success-border: rgba(107, 201, 160, 0.22);
+  --success: #68c49c;
+  --success-bg: rgba(104, 196, 156, 0.12);
+  --success-bg-subtle: rgba(104, 196, 156, 0.06);
+  --success-border: rgba(104, 196, 156, 0.22);
 
-  --danger: #e8887e;
-  --danger-bg: rgba(220, 90, 80, 0.12);
-  --danger-bg-subtle: rgba(220, 90, 80, 0.06);
-  --danger-border: rgba(220, 90, 80, 0.2);
+  --danger: #e09080;
+  --danger-bg: rgba(210, 100, 88, 0.12);
+  --danger-bg-subtle: rgba(210, 100, 88, 0.06);
+  --danger-border: rgba(210, 100, 88, 0.2);
 
-  --warning: #d4a94a;
-  --warning-bg: rgba(212, 169, 74, 0.1);
-  --warning-border: rgba(212, 169, 74, 0.18);
-  --warning-badge-bg: rgba(212, 169, 74, 0.12);
-  --amber-bg: rgba(212, 169, 74, 0.1);
-  --amber-text: #d4a94a;
+  --warning: #cca44a;
+  --warning-bg: rgba(204, 164, 74, 0.1);
+  --warning-border: rgba(204, 164, 74, 0.18);
+  --warning-badge-bg: rgba(204, 164, 74, 0.12);
+  --amber-bg: rgba(204, 164, 74, 0.1);
+  --amber-text: #cca44a;
 
-  --purple: #a08dd4;
-  --purple-bg: rgba(160, 141, 212, 0.1);
-  --purple-bg-hover: rgba(160, 141, 212, 0.18);
-  --purple-muted: rgba(160, 141, 212, 0.55);
+  --purple: #9c8acc;
+  --purple-bg: rgba(156, 138, 204, 0.1);
+  --purple-bg-hover: rgba(156, 138, 204, 0.18);
+  --purple-muted: rgba(156, 138, 204, 0.55);
 
-  --diff-add-bg: rgba(107, 201, 160, 0.1);
-  --diff-add-text: #6bc9a0;
-  --diff-del-bg: rgba(220, 90, 80, 0.1);
-  --diff-del-text: #e8887e;
-  --diff-hunk: rgba(160, 141, 212, 0.55);
+  --diff-add-bg: rgba(104, 196, 156, 0.1);
+  --diff-add-text: #68c49c;
+  --diff-del-bg: rgba(210, 100, 88, 0.1);
+  --diff-del-text: #e09080;
+  --diff-hunk: rgba(156, 138, 204, 0.55);
 
-  --file-modified: #d4a94a;
-  --file-added: #6bc9a0;
-  --file-deleted: #e8887e;
-  --file-renamed: #a08dd4;
+  --file-modified: #cca44a;
+  --file-added: #68c49c;
+  --file-deleted: #e09080;
+  --file-renamed: #9c8acc;
 
-  --toggle-off: rgba(255, 255, 255, 0.18);
-  --toggle-on: #5aada4;
-  --toggle-thumb: #111111;
+  --toggle-off: rgba(219, 214, 208, 0.18);
+  --toggle-on: #52b0a4;
+  --toggle-thumb: #151312;
 
-  background: #111111;
+  background: #151312;
 }
 
 * {
@@ -1079,7 +1079,7 @@ textarea {
 .launcher-icon-shell[data-launcher-id="iterm2"],
 .launcher-icon-shell[data-launcher-id="warp"],
 .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #1a1a1a;
+  background: #1c1917;
   border-color: var(--border-strong);
 }
 
@@ -1089,8 +1089,8 @@ textarea {
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="iterm2"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="warp"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #0a0a0a;
-  border-color: rgba(255, 255, 255, 0.1);
+  background: #0d0c0b;
+  border-color: rgba(219, 214, 208, 0.1);
 }
 
 .launcher-icon {

From 3a58b1c5717085b6bd347c8cc44eff997d3a2290 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 14:06:24 +0800
Subject: [PATCH 3/9] fix: replace stiff neutral grays with warm sand & sage
 palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous warm-gray palette felt lifeless — all surfaces at the
same warmth level with no temperature contrast. New approach:

Light mode "Sand & Sage":
- Page: #f4f1eb (warm parchment)
- Cards: #fbf9f6 (cream white, lighter than page — creates lift)
- Topbar/sidebar: #edeae4 (sand, darker than page — creates weight)
- Ink: #2a2520 (deep espresso, not pure black)
- Accent: #4a7c6a (sage green, warmer than clinical teal)

Dark mode "Charcoal & Cream":
- Page: #161410 (warm charcoal)
- Cards: #1e1c19 (warmer lift)
- Ink: #d8d2ca (warm cream, not pure gray)
- Accent: #6ab8a0 (soft sage)

The key: surface layers now have visible temperature differences
between them instead of all being the same shade of warm gray.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 294 ++++++++++++++++++++++++-------------------------
 1 file changed, 147 insertions(+), 147 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index eb9932d..92f8b5d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -31,195 +31,195 @@
     "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, "Liberation Mono",
     monospace;
 
-  /* ── Ink (text hierarchy) ── warm dark, like walnut ink ── */
-  --ink: #1c1917;
-  --ink-strong: rgba(28, 25, 23, 0.9);
-  --ink-secondary: rgba(28, 25, 23, 0.6);
-  --ink-tertiary: rgba(28, 25, 23, 0.4);
-  --ink-ghost: rgba(28, 25, 23, 0.3);
-  --ink-faint: rgba(28, 25, 23, 0.15);
-
-  /* ── Teal accent ── */
-  --teal: #2e7a6e;
-  --teal-bg: rgba(46, 122, 110, 0.08);
-  --teal-bg-strong: rgba(46, 122, 110, 0.15);
-  --teal-border: rgba(46, 122, 110, 0.22);
-  --teal-focus: rgba(46, 122, 110, 0.5);
-  --teal-muted: rgba(46, 122, 110, 0.6);
-  --teal-hover: rgba(46, 122, 110, 0.82);
-
-  /* ── Surfaces ── warm whites, like good stationery ── */
-  --surface-card: #fefdfb;
-  --surface-topbar: #f7f5f2;
-  --surface-sidebar: #f3f1ee;
-  --surface-modal: #fefdfb;
-  --surface-input: #fefdfb;
-  --surface-warm: #f5f3f0;
-  --surface-raised: #fefdfb;
-  --surface-hover: rgba(28, 25, 23, 0.045);
-  --surface-subtle: rgba(28, 25, 23, 0.025);
-  --surface-muted: rgba(28, 25, 23, 0.04);
-  --surface-strong: rgba(28, 25, 23, 0.065);
-  --surface-stronger: rgba(28, 25, 23, 0.1);
-
-  /* ── Borders ── warm-tinted ── */
-  --border-faint: rgba(28, 25, 23, 0.07);
-  --border-default: rgba(28, 25, 23, 0.12);
-  --border-strong: rgba(28, 25, 23, 0.16);
+  /* ── Ink ── deep espresso ── */
+  --ink: #2a2520;
+  --ink-strong: rgba(42, 37, 32, 0.9);
+  --ink-secondary: rgba(42, 37, 32, 0.58);
+  --ink-tertiary: rgba(42, 37, 32, 0.38);
+  --ink-ghost: rgba(42, 37, 32, 0.26);
+  --ink-faint: rgba(42, 37, 32, 0.14);
+
+  /* ── Accent ── sage green ── */
+  --teal: #4a7c6a;
+  --teal-bg: rgba(74, 124, 106, 0.09);
+  --teal-bg-strong: rgba(74, 124, 106, 0.16);
+  --teal-border: rgba(74, 124, 106, 0.24);
+  --teal-focus: rgba(74, 124, 106, 0.45);
+  --teal-muted: rgba(74, 124, 106, 0.58);
+  --teal-hover: rgba(74, 124, 106, 0.78);
+
+  /* ── Surfaces ── cream paper with layered warmth ── */
+  --surface-card: #fbf9f6;
+  --surface-topbar: #edeae4;
+  --surface-sidebar: #edeae4;
+  --surface-modal: #fbf9f6;
+  --surface-input: #fbf9f6;
+  --surface-warm: #f0ede8;
+  --surface-raised: #fbf9f6;
+  --surface-hover: rgba(42, 37, 32, 0.05);
+  --surface-subtle: rgba(42, 37, 32, 0.03);
+  --surface-muted: rgba(42, 37, 32, 0.045);
+  --surface-strong: rgba(42, 37, 32, 0.07);
+  --surface-stronger: rgba(42, 37, 32, 0.1);
+
+  /* ── Borders ── */
+  --border-faint: rgba(42, 37, 32, 0.08);
+  --border-default: rgba(42, 37, 32, 0.13);
+  --border-strong: rgba(42, 37, 32, 0.18);
 
   /* ── Shadows ── */
   --shadow-card: none;
-  --shadow-modal: 0 8px 32px rgba(28, 25, 23, 0.14);
-  --shadow-menu: 0 4px 16px rgba(28, 25, 23, 0.12);
-  --shadow-panel: -2px 0 16px rgba(28, 25, 23, 0.1);
+  --shadow-modal: 0 8px 32px rgba(42, 37, 32, 0.15);
+  --shadow-menu: 0 4px 16px rgba(42, 37, 32, 0.12);
+  --shadow-panel: -2px 0 16px rgba(42, 37, 32, 0.1);
 
   /* ── Backdrop ── */
-  --backdrop: rgba(28, 25, 23, 0.32);
+  --backdrop: rgba(42, 37, 32, 0.35);
 
   /* ── Buttons ── */
-  --btn-primary-bg: #2e7a6e;
-  --btn-primary-text: #fefdfb;
-  --btn-ghost-bg: rgba(28, 25, 23, 0.055);
+  --btn-primary-bg: #4a7c6a;
+  --btn-primary-text: #fbf9f6;
+  --btn-ghost-bg: rgba(42, 37, 32, 0.06);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(180, 58, 46, 0.1);
-  --btn-danger-text: #a63828;
+  --btn-danger-bg: rgba(168, 62, 48, 0.1);
+  --btn-danger-text: #9c3a28;
 
   /* ── Success ── */
-  --success: #28735a;
-  --success-bg: rgba(40, 115, 90, 0.1);
-  --success-bg-subtle: rgba(40, 115, 90, 0.06);
-  --success-border: rgba(40, 115, 90, 0.2);
+  --success: #3a7a58;
+  --success-bg: rgba(58, 122, 88, 0.1);
+  --success-bg-subtle: rgba(58, 122, 88, 0.06);
+  --success-border: rgba(58, 122, 88, 0.2);
 
   /* ── Danger ── */
-  --danger: #a63828;
-  --danger-bg: rgba(166, 56, 40, 0.09);
-  --danger-bg-subtle: rgba(166, 56, 40, 0.05);
-  --danger-border: rgba(166, 56, 40, 0.16);
+  --danger: #9c3a28;
+  --danger-bg: rgba(156, 58, 40, 0.09);
+  --danger-bg-subtle: rgba(156, 58, 40, 0.05);
+  --danger-border: rgba(156, 58, 40, 0.16);
 
   /* ── Warning ── */
-  --warning: #7d6328;
-  --warning-bg: rgba(125, 99, 40, 0.09);
-  --warning-border: rgba(125, 99, 40, 0.16);
-  --warning-badge-bg: rgba(125, 99, 40, 0.1);
-  --amber-bg: rgba(125, 99, 40, 0.08);
-  --amber-text: #7d6328;
+  --warning: #8a6830;
+  --warning-bg: rgba(138, 104, 48, 0.1);
+  --warning-border: rgba(138, 104, 48, 0.18);
+  --warning-badge-bg: rgba(138, 104, 48, 0.12);
+  --amber-bg: rgba(138, 104, 48, 0.09);
+  --amber-text: #8a6830;
 
   /* ── Purple ── */
-  --purple: #6258a0;
-  --purple-bg: rgba(98, 88, 160, 0.09);
-  --purple-bg-hover: rgba(98, 88, 160, 0.15);
-  --purple-muted: rgba(98, 88, 160, 0.58);
+  --purple: #6a5d96;
+  --purple-bg: rgba(106, 93, 150, 0.09);
+  --purple-bg-hover: rgba(106, 93, 150, 0.16);
+  --purple-muted: rgba(106, 93, 150, 0.55);
 
   /* ── Diff ── */
-  --diff-add-bg: rgba(40, 115, 90, 0.09);
-  --diff-add-text: #286b4a;
-  --diff-del-bg: rgba(166, 56, 40, 0.09);
-  --diff-del-text: #963228;
-  --diff-hunk: rgba(98, 88, 160, 0.55);
+  --diff-add-bg: rgba(58, 122, 88, 0.1);
+  --diff-add-text: #34704e;
+  --diff-del-bg: rgba(156, 58, 40, 0.09);
+  --diff-del-text: #8c3425;
+  --diff-hunk: rgba(106, 93, 150, 0.5);
 
   /* ── File status ── */
-  --file-modified: #7d6328;
-  --file-added: #28735a;
-  --file-deleted: #a63828;
-  --file-renamed: #6258a0;
+  --file-modified: #8a6830;
+  --file-added: #3a7a58;
+  --file-deleted: #9c3a28;
+  --file-renamed: #6a5d96;
 
   /* ── Toggle ── */
-  --toggle-off: rgba(28, 25, 23, 0.18);
-  --toggle-on: #2e7a6e;
-  --toggle-thumb: #fefdfb;
+  --toggle-off: rgba(42, 37, 32, 0.2);
+  --toggle-on: #4a7c6a;
+  --toggle-thumb: #fbf9f6;
 
   color: var(--ink);
-  background: #f8f6f3;
+  background: #f4f1eb;
 }
 
-/* ── Dark theme ── warm darks, like aged wood ── */
+/* ── Dark theme ── warm charcoal & cream ── */
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --ink: #dbd6d0;
-  --ink-strong: rgba(219, 214, 208, 0.92);
-  --ink-secondary: rgba(219, 214, 208, 0.65);
-  --ink-tertiary: rgba(219, 214, 208, 0.42);
-  --ink-ghost: rgba(219, 214, 208, 0.3);
-  --ink-faint: rgba(219, 214, 208, 0.18);
-
-  --teal: #52b0a4;
-  --teal-bg: rgba(82, 176, 164, 0.1);
-  --teal-bg-strong: rgba(82, 176, 164, 0.18);
-  --teal-border: rgba(82, 176, 164, 0.25);
-  --teal-focus: rgba(82, 176, 164, 0.48);
-  --teal-muted: rgba(82, 176, 164, 0.58);
-  --teal-hover: rgba(82, 176, 164, 0.78);
-
-  --surface-card: #1c1a18;
-  --surface-topbar: #171614;
-  --surface-sidebar: #1a1816;
-  --surface-modal: #1e1c1a;
-  --surface-input: #201e1c;
-  --surface-warm: #1a1816;
-  --surface-raised: #201e1c;
-  --surface-hover: rgba(219, 214, 208, 0.055);
-  --surface-subtle: rgba(219, 214, 208, 0.03);
-  --surface-muted: rgba(219, 214, 208, 0.05);
-  --surface-strong: rgba(219, 214, 208, 0.07);
-  --surface-stronger: rgba(219, 214, 208, 0.1);
-
-  --border-faint: rgba(219, 214, 208, 0.06);
-  --border-default: rgba(219, 214, 208, 0.1);
-  --border-strong: rgba(219, 214, 208, 0.14);
+  --ink: #d8d2ca;
+  --ink-strong: rgba(216, 210, 202, 0.92);
+  --ink-secondary: rgba(216, 210, 202, 0.62);
+  --ink-tertiary: rgba(216, 210, 202, 0.4);
+  --ink-ghost: rgba(216, 210, 202, 0.28);
+  --ink-faint: rgba(216, 210, 202, 0.16);
+
+  --teal: #6ab8a0;
+  --teal-bg: rgba(106, 184, 160, 0.1);
+  --teal-bg-strong: rgba(106, 184, 160, 0.18);
+  --teal-border: rgba(106, 184, 160, 0.24);
+  --teal-focus: rgba(106, 184, 160, 0.42);
+  --teal-muted: rgba(106, 184, 160, 0.55);
+  --teal-hover: rgba(106, 184, 160, 0.75);
+
+  --surface-card: #1e1c19;
+  --surface-topbar: #181613;
+  --surface-sidebar: #1a1815;
+  --surface-modal: #22201d;
+  --surface-input: #24221f;
+  --surface-warm: #1c1a17;
+  --surface-raised: #24221f;
+  --surface-hover: rgba(216, 210, 202, 0.055);
+  --surface-subtle: rgba(216, 210, 202, 0.03);
+  --surface-muted: rgba(216, 210, 202, 0.05);
+  --surface-strong: rgba(216, 210, 202, 0.07);
+  --surface-stronger: rgba(216, 210, 202, 0.1);
+
+  --border-faint: rgba(216, 210, 202, 0.06);
+  --border-default: rgba(216, 210, 202, 0.1);
+  --border-strong: rgba(216, 210, 202, 0.15);
 
   --shadow-card: none;
   --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
   --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.35);
   --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.3);
 
-  --backdrop: rgba(10, 9, 8, 0.6);
+  --backdrop: rgba(14, 13, 11, 0.62);
 
-  --btn-primary-bg: #52b0a4;
-  --btn-primary-text: #151312;
-  --btn-ghost-bg: rgba(219, 214, 208, 0.07);
+  --btn-primary-bg: #6ab8a0;
+  --btn-primary-text: #181613;
+  --btn-ghost-bg: rgba(216, 210, 202, 0.07);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(210, 100, 88, 0.15);
-  --btn-danger-text: #e09080;
+  --btn-danger-bg: rgba(200, 105, 88, 0.15);
+  --btn-danger-text: #d89080;
 
-  --success: #68c49c;
-  --success-bg: rgba(104, 196, 156, 0.12);
-  --success-bg-subtle: rgba(104, 196, 156, 0.06);
-  --success-border: rgba(104, 196, 156, 0.22);
+  --success: #72c4a0;
+  --success-bg: rgba(114, 196, 160, 0.12);
+  --success-bg-subtle: rgba(114, 196, 160, 0.06);
+  --success-border: rgba(114, 196, 160, 0.22);
 
-  --danger: #e09080;
-  --danger-bg: rgba(210, 100, 88, 0.12);
-  --danger-bg-subtle: rgba(210, 100, 88, 0.06);
-  --danger-border: rgba(210, 100, 88, 0.2);
+  --danger: #d89080;
+  --danger-bg: rgba(200, 105, 88, 0.12);
+  --danger-bg-subtle: rgba(200, 105, 88, 0.06);
+  --danger-border: rgba(200, 105, 88, 0.2);
 
-  --warning: #cca44a;
-  --warning-bg: rgba(204, 164, 74, 0.1);
-  --warning-border: rgba(204, 164, 74, 0.18);
-  --warning-badge-bg: rgba(204, 164, 74, 0.12);
-  --amber-bg: rgba(204, 164, 74, 0.1);
-  --amber-text: #cca44a;
+  --warning: #c8a450;
+  --warning-bg: rgba(200, 164, 80, 0.1);
+  --warning-border: rgba(200, 164, 80, 0.18);
+  --warning-badge-bg: rgba(200, 164, 80, 0.12);
+  --amber-bg: rgba(200, 164, 80, 0.1);
+  --amber-text: #c8a450;
 
-  --purple: #9c8acc;
-  --purple-bg: rgba(156, 138, 204, 0.1);
-  --purple-bg-hover: rgba(156, 138, 204, 0.18);
-  --purple-muted: rgba(156, 138, 204, 0.55);
+  --purple: #a090c8;
+  --purple-bg: rgba(160, 144, 200, 0.1);
+  --purple-bg-hover: rgba(160, 144, 200, 0.18);
+  --purple-muted: rgba(160, 144, 200, 0.52);
 
-  --diff-add-bg: rgba(104, 196, 156, 0.1);
-  --diff-add-text: #68c49c;
-  --diff-del-bg: rgba(210, 100, 88, 0.1);
-  --diff-del-text: #e09080;
-  --diff-hunk: rgba(156, 138, 204, 0.55);
+  --diff-add-bg: rgba(114, 196, 160, 0.1);
+  --diff-add-text: #72c4a0;
+  --diff-del-bg: rgba(200, 105, 88, 0.1);
+  --diff-del-text: #d89080;
+  --diff-hunk: rgba(160, 144, 200, 0.5);
 
-  --file-modified: #cca44a;
-  --file-added: #68c49c;
-  --file-deleted: #e09080;
-  --file-renamed: #9c8acc;
+  --file-modified: #c8a450;
+  --file-added: #72c4a0;
+  --file-deleted: #d89080;
+  --file-renamed: #a090c8;
 
-  --toggle-off: rgba(219, 214, 208, 0.18);
-  --toggle-on: #52b0a4;
-  --toggle-thumb: #151312;
+  --toggle-off: rgba(216, 210, 202, 0.18);
+  --toggle-on: #6ab8a0;
+  --toggle-thumb: #181613;
 
-  background: #151312;
+  background: #161410;
 }
 
 * {
@@ -1079,7 +1079,7 @@ textarea {
 .launcher-icon-shell[data-launcher-id="iterm2"],
 .launcher-icon-shell[data-launcher-id="warp"],
 .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #1c1917;
+  background: #2a2520;
   border-color: var(--border-strong);
 }
 
@@ -1089,8 +1089,8 @@ textarea {
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="iterm2"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="warp"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #0d0c0b;
-  border-color: rgba(219, 214, 208, 0.1);
+  background: #0e0d0b;
+  border-color: rgba(216, 210, 202, 0.1);
 }
 
 .launcher-icon {

From d47bbb0d9700e41739835c90a747e819628e9d71 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 14:11:08 +0800
Subject: [PATCH 4/9] Revert "fix: replace stiff neutral grays with warm sand &
 sage palette"

This reverts commit 3a58b1c5717085b6bd347c8cc44eff997d3a2290.
---
 src/styles.css | 294 ++++++++++++++++++++++++-------------------------
 1 file changed, 147 insertions(+), 147 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 92f8b5d..eb9932d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -31,195 +31,195 @@
     "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, "Liberation Mono",
     monospace;
 
-  /* ── Ink ── deep espresso ── */
-  --ink: #2a2520;
-  --ink-strong: rgba(42, 37, 32, 0.9);
-  --ink-secondary: rgba(42, 37, 32, 0.58);
-  --ink-tertiary: rgba(42, 37, 32, 0.38);
-  --ink-ghost: rgba(42, 37, 32, 0.26);
-  --ink-faint: rgba(42, 37, 32, 0.14);
-
-  /* ── Accent ── sage green ── */
-  --teal: #4a7c6a;
-  --teal-bg: rgba(74, 124, 106, 0.09);
-  --teal-bg-strong: rgba(74, 124, 106, 0.16);
-  --teal-border: rgba(74, 124, 106, 0.24);
-  --teal-focus: rgba(74, 124, 106, 0.45);
-  --teal-muted: rgba(74, 124, 106, 0.58);
-  --teal-hover: rgba(74, 124, 106, 0.78);
-
-  /* ── Surfaces ── cream paper with layered warmth ── */
-  --surface-card: #fbf9f6;
-  --surface-topbar: #edeae4;
-  --surface-sidebar: #edeae4;
-  --surface-modal: #fbf9f6;
-  --surface-input: #fbf9f6;
-  --surface-warm: #f0ede8;
-  --surface-raised: #fbf9f6;
-  --surface-hover: rgba(42, 37, 32, 0.05);
-  --surface-subtle: rgba(42, 37, 32, 0.03);
-  --surface-muted: rgba(42, 37, 32, 0.045);
-  --surface-strong: rgba(42, 37, 32, 0.07);
-  --surface-stronger: rgba(42, 37, 32, 0.1);
-
-  /* ── Borders ── */
-  --border-faint: rgba(42, 37, 32, 0.08);
-  --border-default: rgba(42, 37, 32, 0.13);
-  --border-strong: rgba(42, 37, 32, 0.18);
+  /* ── Ink (text hierarchy) ── warm dark, like walnut ink ── */
+  --ink: #1c1917;
+  --ink-strong: rgba(28, 25, 23, 0.9);
+  --ink-secondary: rgba(28, 25, 23, 0.6);
+  --ink-tertiary: rgba(28, 25, 23, 0.4);
+  --ink-ghost: rgba(28, 25, 23, 0.3);
+  --ink-faint: rgba(28, 25, 23, 0.15);
+
+  /* ── Teal accent ── */
+  --teal: #2e7a6e;
+  --teal-bg: rgba(46, 122, 110, 0.08);
+  --teal-bg-strong: rgba(46, 122, 110, 0.15);
+  --teal-border: rgba(46, 122, 110, 0.22);
+  --teal-focus: rgba(46, 122, 110, 0.5);
+  --teal-muted: rgba(46, 122, 110, 0.6);
+  --teal-hover: rgba(46, 122, 110, 0.82);
+
+  /* ── Surfaces ── warm whites, like good stationery ── */
+  --surface-card: #fefdfb;
+  --surface-topbar: #f7f5f2;
+  --surface-sidebar: #f3f1ee;
+  --surface-modal: #fefdfb;
+  --surface-input: #fefdfb;
+  --surface-warm: #f5f3f0;
+  --surface-raised: #fefdfb;
+  --surface-hover: rgba(28, 25, 23, 0.045);
+  --surface-subtle: rgba(28, 25, 23, 0.025);
+  --surface-muted: rgba(28, 25, 23, 0.04);
+  --surface-strong: rgba(28, 25, 23, 0.065);
+  --surface-stronger: rgba(28, 25, 23, 0.1);
+
+  /* ── Borders ── warm-tinted ── */
+  --border-faint: rgba(28, 25, 23, 0.07);
+  --border-default: rgba(28, 25, 23, 0.12);
+  --border-strong: rgba(28, 25, 23, 0.16);
 
   /* ── Shadows ── */
   --shadow-card: none;
-  --shadow-modal: 0 8px 32px rgba(42, 37, 32, 0.15);
-  --shadow-menu: 0 4px 16px rgba(42, 37, 32, 0.12);
-  --shadow-panel: -2px 0 16px rgba(42, 37, 32, 0.1);
+  --shadow-modal: 0 8px 32px rgba(28, 25, 23, 0.14);
+  --shadow-menu: 0 4px 16px rgba(28, 25, 23, 0.12);
+  --shadow-panel: -2px 0 16px rgba(28, 25, 23, 0.1);
 
   /* ── Backdrop ── */
-  --backdrop: rgba(42, 37, 32, 0.35);
+  --backdrop: rgba(28, 25, 23, 0.32);
 
   /* ── Buttons ── */
-  --btn-primary-bg: #4a7c6a;
-  --btn-primary-text: #fbf9f6;
-  --btn-ghost-bg: rgba(42, 37, 32, 0.06);
+  --btn-primary-bg: #2e7a6e;
+  --btn-primary-text: #fefdfb;
+  --btn-ghost-bg: rgba(28, 25, 23, 0.055);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(168, 62, 48, 0.1);
-  --btn-danger-text: #9c3a28;
+  --btn-danger-bg: rgba(180, 58, 46, 0.1);
+  --btn-danger-text: #a63828;
 
   /* ── Success ── */
-  --success: #3a7a58;
-  --success-bg: rgba(58, 122, 88, 0.1);
-  --success-bg-subtle: rgba(58, 122, 88, 0.06);
-  --success-border: rgba(58, 122, 88, 0.2);
+  --success: #28735a;
+  --success-bg: rgba(40, 115, 90, 0.1);
+  --success-bg-subtle: rgba(40, 115, 90, 0.06);
+  --success-border: rgba(40, 115, 90, 0.2);
 
   /* ── Danger ── */
-  --danger: #9c3a28;
-  --danger-bg: rgba(156, 58, 40, 0.09);
-  --danger-bg-subtle: rgba(156, 58, 40, 0.05);
-  --danger-border: rgba(156, 58, 40, 0.16);
+  --danger: #a63828;
+  --danger-bg: rgba(166, 56, 40, 0.09);
+  --danger-bg-subtle: rgba(166, 56, 40, 0.05);
+  --danger-border: rgba(166, 56, 40, 0.16);
 
   /* ── Warning ── */
-  --warning: #8a6830;
-  --warning-bg: rgba(138, 104, 48, 0.1);
-  --warning-border: rgba(138, 104, 48, 0.18);
-  --warning-badge-bg: rgba(138, 104, 48, 0.12);
-  --amber-bg: rgba(138, 104, 48, 0.09);
-  --amber-text: #8a6830;
+  --warning: #7d6328;
+  --warning-bg: rgba(125, 99, 40, 0.09);
+  --warning-border: rgba(125, 99, 40, 0.16);
+  --warning-badge-bg: rgba(125, 99, 40, 0.1);
+  --amber-bg: rgba(125, 99, 40, 0.08);
+  --amber-text: #7d6328;
 
   /* ── Purple ── */
-  --purple: #6a5d96;
-  --purple-bg: rgba(106, 93, 150, 0.09);
-  --purple-bg-hover: rgba(106, 93, 150, 0.16);
-  --purple-muted: rgba(106, 93, 150, 0.55);
+  --purple: #6258a0;
+  --purple-bg: rgba(98, 88, 160, 0.09);
+  --purple-bg-hover: rgba(98, 88, 160, 0.15);
+  --purple-muted: rgba(98, 88, 160, 0.58);
 
   /* ── Diff ── */
-  --diff-add-bg: rgba(58, 122, 88, 0.1);
-  --diff-add-text: #34704e;
-  --diff-del-bg: rgba(156, 58, 40, 0.09);
-  --diff-del-text: #8c3425;
-  --diff-hunk: rgba(106, 93, 150, 0.5);
+  --diff-add-bg: rgba(40, 115, 90, 0.09);
+  --diff-add-text: #286b4a;
+  --diff-del-bg: rgba(166, 56, 40, 0.09);
+  --diff-del-text: #963228;
+  --diff-hunk: rgba(98, 88, 160, 0.55);
 
   /* ── File status ── */
-  --file-modified: #8a6830;
-  --file-added: #3a7a58;
-  --file-deleted: #9c3a28;
-  --file-renamed: #6a5d96;
+  --file-modified: #7d6328;
+  --file-added: #28735a;
+  --file-deleted: #a63828;
+  --file-renamed: #6258a0;
 
   /* ── Toggle ── */
-  --toggle-off: rgba(42, 37, 32, 0.2);
-  --toggle-on: #4a7c6a;
-  --toggle-thumb: #fbf9f6;
+  --toggle-off: rgba(28, 25, 23, 0.18);
+  --toggle-on: #2e7a6e;
+  --toggle-thumb: #fefdfb;
 
   color: var(--ink);
-  background: #f4f1eb;
+  background: #f8f6f3;
 }
 
-/* ── Dark theme ── warm charcoal & cream ── */
+/* ── Dark theme ── warm darks, like aged wood ── */
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --ink: #d8d2ca;
-  --ink-strong: rgba(216, 210, 202, 0.92);
-  --ink-secondary: rgba(216, 210, 202, 0.62);
-  --ink-tertiary: rgba(216, 210, 202, 0.4);
-  --ink-ghost: rgba(216, 210, 202, 0.28);
-  --ink-faint: rgba(216, 210, 202, 0.16);
-
-  --teal: #6ab8a0;
-  --teal-bg: rgba(106, 184, 160, 0.1);
-  --teal-bg-strong: rgba(106, 184, 160, 0.18);
-  --teal-border: rgba(106, 184, 160, 0.24);
-  --teal-focus: rgba(106, 184, 160, 0.42);
-  --teal-muted: rgba(106, 184, 160, 0.55);
-  --teal-hover: rgba(106, 184, 160, 0.75);
-
-  --surface-card: #1e1c19;
-  --surface-topbar: #181613;
-  --surface-sidebar: #1a1815;
-  --surface-modal: #22201d;
-  --surface-input: #24221f;
-  --surface-warm: #1c1a17;
-  --surface-raised: #24221f;
-  --surface-hover: rgba(216, 210, 202, 0.055);
-  --surface-subtle: rgba(216, 210, 202, 0.03);
-  --surface-muted: rgba(216, 210, 202, 0.05);
-  --surface-strong: rgba(216, 210, 202, 0.07);
-  --surface-stronger: rgba(216, 210, 202, 0.1);
-
-  --border-faint: rgba(216, 210, 202, 0.06);
-  --border-default: rgba(216, 210, 202, 0.1);
-  --border-strong: rgba(216, 210, 202, 0.15);
+  --ink: #dbd6d0;
+  --ink-strong: rgba(219, 214, 208, 0.92);
+  --ink-secondary: rgba(219, 214, 208, 0.65);
+  --ink-tertiary: rgba(219, 214, 208, 0.42);
+  --ink-ghost: rgba(219, 214, 208, 0.3);
+  --ink-faint: rgba(219, 214, 208, 0.18);
+
+  --teal: #52b0a4;
+  --teal-bg: rgba(82, 176, 164, 0.1);
+  --teal-bg-strong: rgba(82, 176, 164, 0.18);
+  --teal-border: rgba(82, 176, 164, 0.25);
+  --teal-focus: rgba(82, 176, 164, 0.48);
+  --teal-muted: rgba(82, 176, 164, 0.58);
+  --teal-hover: rgba(82, 176, 164, 0.78);
+
+  --surface-card: #1c1a18;
+  --surface-topbar: #171614;
+  --surface-sidebar: #1a1816;
+  --surface-modal: #1e1c1a;
+  --surface-input: #201e1c;
+  --surface-warm: #1a1816;
+  --surface-raised: #201e1c;
+  --surface-hover: rgba(219, 214, 208, 0.055);
+  --surface-subtle: rgba(219, 214, 208, 0.03);
+  --surface-muted: rgba(219, 214, 208, 0.05);
+  --surface-strong: rgba(219, 214, 208, 0.07);
+  --surface-stronger: rgba(219, 214, 208, 0.1);
+
+  --border-faint: rgba(219, 214, 208, 0.06);
+  --border-default: rgba(219, 214, 208, 0.1);
+  --border-strong: rgba(219, 214, 208, 0.14);
 
   --shadow-card: none;
   --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.4);
   --shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.35);
   --shadow-panel: -2px 0 16px rgba(0, 0, 0, 0.3);
 
-  --backdrop: rgba(14, 13, 11, 0.62);
+  --backdrop: rgba(10, 9, 8, 0.6);
 
-  --btn-primary-bg: #6ab8a0;
-  --btn-primary-text: #181613;
-  --btn-ghost-bg: rgba(216, 210, 202, 0.07);
+  --btn-primary-bg: #52b0a4;
+  --btn-primary-text: #151312;
+  --btn-ghost-bg: rgba(219, 214, 208, 0.07);
   --btn-ghost-text: var(--ink);
-  --btn-danger-bg: rgba(200, 105, 88, 0.15);
-  --btn-danger-text: #d89080;
+  --btn-danger-bg: rgba(210, 100, 88, 0.15);
+  --btn-danger-text: #e09080;
 
-  --success: #72c4a0;
-  --success-bg: rgba(114, 196, 160, 0.12);
-  --success-bg-subtle: rgba(114, 196, 160, 0.06);
-  --success-border: rgba(114, 196, 160, 0.22);
+  --success: #68c49c;
+  --success-bg: rgba(104, 196, 156, 0.12);
+  --success-bg-subtle: rgba(104, 196, 156, 0.06);
+  --success-border: rgba(104, 196, 156, 0.22);
 
-  --danger: #d89080;
-  --danger-bg: rgba(200, 105, 88, 0.12);
-  --danger-bg-subtle: rgba(200, 105, 88, 0.06);
-  --danger-border: rgba(200, 105, 88, 0.2);
+  --danger: #e09080;
+  --danger-bg: rgba(210, 100, 88, 0.12);
+  --danger-bg-subtle: rgba(210, 100, 88, 0.06);
+  --danger-border: rgba(210, 100, 88, 0.2);
 
-  --warning: #c8a450;
-  --warning-bg: rgba(200, 164, 80, 0.1);
-  --warning-border: rgba(200, 164, 80, 0.18);
-  --warning-badge-bg: rgba(200, 164, 80, 0.12);
-  --amber-bg: rgba(200, 164, 80, 0.1);
-  --amber-text: #c8a450;
+  --warning: #cca44a;
+  --warning-bg: rgba(204, 164, 74, 0.1);
+  --warning-border: rgba(204, 164, 74, 0.18);
+  --warning-badge-bg: rgba(204, 164, 74, 0.12);
+  --amber-bg: rgba(204, 164, 74, 0.1);
+  --amber-text: #cca44a;
 
-  --purple: #a090c8;
-  --purple-bg: rgba(160, 144, 200, 0.1);
-  --purple-bg-hover: rgba(160, 144, 200, 0.18);
-  --purple-muted: rgba(160, 144, 200, 0.52);
+  --purple: #9c8acc;
+  --purple-bg: rgba(156, 138, 204, 0.1);
+  --purple-bg-hover: rgba(156, 138, 204, 0.18);
+  --purple-muted: rgba(156, 138, 204, 0.55);
 
-  --diff-add-bg: rgba(114, 196, 160, 0.1);
-  --diff-add-text: #72c4a0;
-  --diff-del-bg: rgba(200, 105, 88, 0.1);
-  --diff-del-text: #d89080;
-  --diff-hunk: rgba(160, 144, 200, 0.5);
+  --diff-add-bg: rgba(104, 196, 156, 0.1);
+  --diff-add-text: #68c49c;
+  --diff-del-bg: rgba(210, 100, 88, 0.1);
+  --diff-del-text: #e09080;
+  --diff-hunk: rgba(156, 138, 204, 0.55);
 
-  --file-modified: #c8a450;
-  --file-added: #72c4a0;
-  --file-deleted: #d89080;
-  --file-renamed: #a090c8;
+  --file-modified: #cca44a;
+  --file-added: #68c49c;
+  --file-deleted: #e09080;
+  --file-renamed: #9c8acc;
 
-  --toggle-off: rgba(216, 210, 202, 0.18);
-  --toggle-on: #6ab8a0;
-  --toggle-thumb: #181613;
+  --toggle-off: rgba(219, 214, 208, 0.18);
+  --toggle-on: #52b0a4;
+  --toggle-thumb: #151312;
 
-  background: #161410;
+  background: #151312;
 }
 
 * {
@@ -1079,7 +1079,7 @@ textarea {
 .launcher-icon-shell[data-launcher-id="iterm2"],
 .launcher-icon-shell[data-launcher-id="warp"],
 .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #2a2520;
+  background: #1c1917;
   border-color: var(--border-strong);
 }
 
@@ -1089,8 +1089,8 @@ textarea {
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="iterm2"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="warp"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="opencode"] {
-  background: #0e0d0b;
-  border-color: rgba(216, 210, 202, 0.1);
+  background: #0d0c0b;
+  border-color: rgba(219, 214, 208, 0.1);
 }
 
 .launcher-icon {

From 7931085e9e0a2ad50720c77d75846d8822bad8a8 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 14:14:32 +0800
Subject: [PATCH 5/9] fix: prevent watcher restart loop when reloading same
 repo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the filesystem watcher fires worktrees-changed, the frontend
calls loadRepoInner → open_repo, which previously always restarted
the watcher. On macOS (FSEvents), creating a new watcher can emit
initial events for existing directory contents, causing an infinite
loop: watcher fires → reload → restart watcher → fires again.

Fix: skip watcher restart if already watching the same repo path.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src-tauri/src/watcher.rs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/watcher.rs b/src-tauri/src/watcher.rs
index e5a64d2..c7d544c 100644
--- a/src-tauri/src/watcher.rs
+++ b/src-tauri/src/watcher.rs
@@ -20,11 +20,20 @@ impl WatcherState {
         }
     }
 
-    /// Stop the current watcher and start watching the given repo's `.git/worktrees/` directory.
+    /// Start watching the given repo's `.git/worktrees/` directory.
     /// If `.git/worktrees/` doesn't exist yet, watches `.git/` to detect its creation.
+    /// Skips restart if already watching the same repo (avoids event loops).
     pub fn start(&self, app: &AppHandle, repo_root: &str) {
         let mut guard = self.inner.lock().unwrap();
 
+        // If already watching the same repo, don't restart — avoids triggering
+        // initial events that would cause an infinite refresh loop.
+        if let Some(ref inner) = *guard {
+            if inner._repo_root == repo_root {
+                return;
+            }
+        }
+
         // Stop existing watcher (dropped automatically)
         *guard = None;
 

From 64f8c7c26dc850a84774ebc03b3d634e083f7d8c Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 14:38:24 +0800
Subject: [PATCH 6/9] fix: address code review feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename _repo_root → repo_root in WatcherInner (actively used, not
  just held for drop)
- Bump --ink-tertiary opacity 0.4 → 0.46 (light) and 0.42 → 0.48
  (dark) for WCAG AA contrast compliance
- Sync CLAUDE.md and DESIGN_SYSTEM.md color values with actual CSS
  (#f8f6f3 bg, #1c1917 ink, #2e7a6e teal, #fefdfb cards)
- Restore deleted reference sections in DESIGN_SYSTEM.md: typography,
  spacing, transitions, toast, layout constants

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                |  4 +-
 DESIGN_SYSTEM.md         | 80 ++++++++++++++++++++++------------------
 src-tauri/src/watcher.rs |  6 +--
 src/styles.css           |  4 +-
 4 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index ffde29f..0c34c94 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -44,12 +44,12 @@ cd src-tauri && cargo clippy # lint Rust code
 
 All UI work **must** follow `DESIGN_SYSTEM.md`. Key rules:
 
-- **Colors**: Near-monochrome palette. Light: `#fafafa` background, `#1a1a1a` ink, `#3d7a73` teal accent (used sparingly). Do not introduce new brand colors. No gradients anywhere.
+- **Colors**: Use the documented palette tokens — warm ink tones (`#1c1917` base) with teal accent (`#2e7a6e`). Do not introduce new brand colors.
 - **Buttons**: Three variants only — `primary-button` (solid flat teal), `ghost-button` (secondary), `danger-button` (destructive). One primary button per visible form section. Pill radius (`999px`) for all standard buttons.
 - **Inputs**: Always use `<Input>`, `<Textarea>`, `<Select>` from `FormControls.tsx`. Focus ring teal. Never use native elements directly.
 - **Toast**: Bottom-right, one at a time, auto-dismiss 3s. Two variants: `toast-success` / `toast-error`. Prefix with `✓` / `✗`.
 - **Typography**: Sans-serif (`Avenir Next`) for all text, monospace (`SF Mono`) for code/paths. No serif fonts. Do not add new font stacks.
-- **Cards**: Flat white (`#ffffff`), radius `12px`, border only, no shadow. No glass-morphism, no `backdrop-filter`.
+- **Cards**: Warm white (`#fefdfb`), radius `12px`, border only, no shadow. No glass-morphism, no `backdrop-filter`.
 - **Modals**: Use `ModalShell` component. Radius `12px`, minimal shadow. Dismiss via Escape + backdrop click.
 - **Spacing**: 2px base grid. Common stops: 6, 8, 10, 12, 14, 20, 24px. Follow existing patterns.
 - **Transitions**: Buttons `140ms ease`, list items `100ms ease`, slide-out `180ms ease-out`.
diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
index f4261c0..fd816aa 100644
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -58,21 +58,24 @@ Standalone sizes outside the scale: `0.92rem` (sidebar branch name), `1.2rem` (d
 
 | Token | Value | Usage |
 |---|---|---|
-| `--ink` | `#1a1a1a` | Primary text |
-| `--ink-strong` | `rgba(26, 26, 26, 0.9)` | Emphasis |
-| `--ink-secondary` | `rgba(26, 26, 26, 0.6)` | Body copy, descriptions |
-| `--ink-tertiary` | `rgba(26, 26, 26, 0.4)` | Muted labels, placeholders |
-| `--ink-ghost` | `rgba(26, 26, 26, 0.3)` | Ghost elements |
-| `--ink-faint` | `rgba(26, 26, 26, 0.15)` | Disabled text |
+| `--ink` | `#1c1917` | Primary text |
+| `--ink-strong` | `rgba(28, 25, 23, 0.9)` | Emphasis |
+| `--ink-secondary` | `rgba(28, 25, 23, 0.6)` | Body copy, descriptions |
+| `--ink-tertiary` | `rgba(28, 25, 23, 0.46)` | Muted labels, placeholders |
+| `--ink-ghost` | `rgba(28, 25, 23, 0.3)` | Ghost elements |
+| `--ink-faint` | `rgba(28, 25, 23, 0.15)` | Disabled text |
 
 ### Accent Color
 
 | Token | Value | Usage |
 |---|---|---|
-| `--teal` | `#3d7a73` | Primary accent — focus rings, active states |
-| `--teal-bg` | `rgba(61, 122, 115, 0.08)` | Active selection background |
-| `--teal-border` | `rgba(61, 122, 115, 0.2)` | Active item border |
-| `--teal-focus` | `rgba(61, 122, 115, 0.5)` | Input focus border |
+| `--teal` | `#2e7a6e` | Primary accent — focus rings, active states |
+| `--teal-bg` | `rgba(46, 122, 110, 0.08)` | Active selection background |
+| `--teal-bg-strong` | `rgba(46, 122, 110, 0.15)` | Strong selection background |
+| `--teal-border` | `rgba(46, 122, 110, 0.22)` | Active item border |
+| `--teal-focus` | `rgba(46, 122, 110, 0.5)` | Input focus border |
+| `--teal-muted` | `rgba(46, 122, 110, 0.6)` | Muted teal text |
+| `--teal-hover` | `rgba(46, 122, 110, 0.82)` | Hover state |
 
 Use teal **sparingly** — only for interactive states, active indicators, and focus rings.
 
@@ -80,31 +83,36 @@ Use teal **sparingly** — only for interactive states, active indicators, and f
 
 | Token | Value | Usage |
 |---|---|---|
-| `--success` | `#2d7a5f` | Success text |
-| `--danger` | `#b33a30` | Error/danger text |
-| `--warning` | `#8a6d2b` | Warning text |
-| `--purple` | `#6b5cae` | PR badges |
+| `--success` | `#28735a` | Success text |
+| `--danger` | `#a63828` | Error/danger text |
+| `--warning` | `#7d6328` | Warning text |
+| `--purple` | `#6258a0` | PR badges |
 
 ### Surfaces (Light)
 
 | Token | Value | Usage |
 |---|---|---|
-| Page background | `#fafafa` | Solid flat background |
-| `--surface-card` | `#ffffff` | Card backgrounds |
-| `--surface-topbar` | `#fafafa` | Topbar |
-| `--surface-sidebar` | `#f5f5f5` | Sidebar, worktrees panel |
-| `--surface-modal` | `#ffffff` | Modals |
-| `--surface-hover` | `rgba(0, 0, 0, 0.04)` | Hover states |
-| `--surface-subtle` | `rgba(0, 0, 0, 0.02)` | Subtle backgrounds |
-| `--surface-muted` | `rgba(0, 0, 0, 0.04)` | Muted backgrounds |
+| Page background | `#f8f6f3` | Solid warm background |
+| `--surface-card` | `#fefdfb` | Card backgrounds |
+| `--surface-topbar` | `#f7f5f2` | Topbar |
+| `--surface-sidebar` | `#f3f1ee` | Sidebar, worktrees panel |
+| `--surface-modal` | `#fefdfb` | Modals |
+| `--surface-input` | `#fefdfb` | Input backgrounds |
+| `--surface-warm` | `#f5f3f0` | Warm surface |
+| `--surface-raised` | `#fefdfb` | Raised elements |
+| `--surface-hover` | `rgba(28, 25, 23, 0.045)` | Hover states |
+| `--surface-subtle` | `rgba(28, 25, 23, 0.025)` | Subtle backgrounds |
+| `--surface-muted` | `rgba(28, 25, 23, 0.04)` | Muted backgrounds |
+| `--surface-strong` | `rgba(28, 25, 23, 0.065)` | Strong backgrounds |
+| `--surface-stronger` | `rgba(28, 25, 23, 0.1)` | Stronger backgrounds |
 
 ### Borders
 
 | Token | Value | Usage |
 |---|---|---|
-| `--border-faint` | `rgba(0, 0, 0, 0.06)` | Internal dividers |
-| `--border-default` | `rgba(0, 0, 0, 0.1)` | Card/panel borders, topbar, sidebar |
-| `--border-strong` | `rgba(0, 0, 0, 0.14)` | Input borders |
+| `--border-faint` | `rgba(28, 25, 23, 0.07)` | Internal dividers |
+| `--border-default` | `rgba(28, 25, 23, 0.12)` | Card/panel borders, topbar, sidebar |
+| `--border-strong` | `rgba(28, 25, 23, 0.16)` | Input borders |
 
 ---
 
@@ -115,9 +123,9 @@ Shadows are used **minimally**. Cards have no shadow. Only modals and menus cast
 | Name | Value | Usage |
 |---|---|---|
 | `shadow-card` | `none` | Cards use borders, not shadows |
-| `shadow-modal` | `0 8px 32px rgba(0, 0, 0, 0.12)` | Modal overlay |
-| `shadow-menu` | `0 4px 16px rgba(0, 0, 0, 0.1)` | Context menus |
-| `shadow-panel` | `-2px 0 16px rgba(0, 0, 0, 0.08)` | Slide-out panel |
+| `shadow-modal` | `0 8px 32px rgba(28, 25, 23, 0.14)` | Modal overlay |
+| `shadow-menu` | `0 4px 16px rgba(28, 25, 23, 0.12)` | Context menus |
+| `shadow-panel` | `-2px 0 16px rgba(28, 25, 23, 0.1)` | Slide-out panel |
 
 ---
 
@@ -129,9 +137,9 @@ All buttons use `border: 0; border-radius: 999px; cursor: pointer`. Disabled: `o
 
 | Variant | Class | Background | Text Color | Usage |
 |---|---|---|---|---|
-| **Primary** | `.primary-button` | `#3d7a73` (solid flat) | `#ffffff` | Main CTA — save, create, confirm |
-| **Ghost** | `.ghost-button` | `rgba(0, 0, 0, 0.05)` | `var(--ink)` | Secondary actions — cancel, open |
-| **Danger** | `.danger-button` | `rgba(200, 50, 40, 0.1)` | `#b33a30` | Destructive actions — delete, remove |
+| **Primary** | `.primary-button` | `#2e7a6e` (solid flat) | `#fefdfb` | Main CTA — save, create, confirm |
+| **Ghost** | `.ghost-button` | `rgba(28, 25, 23, 0.055)` | `var(--ink)` | Secondary actions — cancel, open |
+| **Danger** | `.danger-button` | `rgba(180, 58, 46, 0.1)` | `#a63828` | Destructive actions — delete, remove |
 
 ### Sizes
 
@@ -157,7 +165,7 @@ Always use `<Input>`, `<Textarea>`, `<Select>` from `src/components/FormControls
 |---|---|
 | Border | `1px solid var(--border-strong)` |
 | Border Radius | `var(--radius-sm)` |
-| Background | `#ffffff` (light) / `#1e1e1e` (dark) |
+| Background | `#fefdfb` (light) / `#201e1c` (dark) |
 | Focus | Border changes to `var(--teal-focus)` |
 
 ---
@@ -166,7 +174,7 @@ Always use `<Input>`, `<Textarea>`, `<Select>` from `src/components/FormControls
 
 ### Card (`.card`)
 
-- Background: `#ffffff`
+- Background: `#fefdfb`
 - Border: `1px solid var(--border-default)`
 - Radius: `var(--radius-xl)` (12px)
 - Shadow: **none**
@@ -174,17 +182,17 @@ Always use `<Input>`, `<Textarea>`, `<Select>` from `src/components/FormControls
 
 ### Modal (`.modal-card`)
 
-- Background: `#ffffff`
+- Background: `#fefdfb`
 - Border: `1px solid var(--border-default)`
 - Radius: `var(--radius-xl)` (12px)
-- Shadow: `0 8px 32px rgba(0, 0, 0, 0.12)`
+- Shadow: `0 8px 32px rgba(28, 25, 23, 0.14)`
 - Padding: `24px`
 
 ### Slide-out Panel
 
 - Fixed right, full height
 - Width: `min(480px, calc(100vw - 60px))`
-- Shadow: `-2px 0 16px rgba(0, 0, 0, 0.08)`
+- Shadow: `-2px 0 16px rgba(28, 25, 23, 0.1)`
 
 ---
 
diff --git a/src-tauri/src/watcher.rs b/src-tauri/src/watcher.rs
index c7d544c..4ac47c1 100644
--- a/src-tauri/src/watcher.rs
+++ b/src-tauri/src/watcher.rs
@@ -10,7 +10,7 @@ pub struct WatcherState {
 
 struct WatcherInner {
     _watcher: RecommendedWatcher,
-    _repo_root: String,
+    repo_root: String,
 }
 
 impl WatcherState {
@@ -29,7 +29,7 @@ impl WatcherState {
         // If already watching the same repo, don't restart — avoids triggering
         // initial events that would cause an infinite refresh loop.
         if let Some(ref inner) = *guard {
-            if inner._repo_root == repo_root {
+            if inner.repo_root == repo_root {
                 return;
             }
         }
@@ -91,7 +91,7 @@ impl WatcherState {
 
         *guard = Some(WatcherInner {
             _watcher: watcher,
-            _repo_root: repo_root.to_string(),
+            repo_root: repo_root.to_string(),
         });
     }
 }
diff --git a/src/styles.css b/src/styles.css
index eb9932d..f691b9d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -35,7 +35,7 @@
   --ink: #1c1917;
   --ink-strong: rgba(28, 25, 23, 0.9);
   --ink-secondary: rgba(28, 25, 23, 0.6);
-  --ink-tertiary: rgba(28, 25, 23, 0.4);
+  --ink-tertiary: rgba(28, 25, 23, 0.46);
   --ink-ghost: rgba(28, 25, 23, 0.3);
   --ink-faint: rgba(28, 25, 23, 0.15);
 
@@ -139,7 +139,7 @@
   --ink: #dbd6d0;
   --ink-strong: rgba(219, 214, 208, 0.92);
   --ink-secondary: rgba(219, 214, 208, 0.65);
-  --ink-tertiary: rgba(219, 214, 208, 0.42);
+  --ink-tertiary: rgba(219, 214, 208, 0.48);
   --ink-ghost: rgba(219, 214, 208, 0.3);
   --ink-faint: rgba(219, 214, 208, 0.18);
 

From a64cd43abbe3e9d01ec922e0bd9a81a60894ce34 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 14:44:37 +0800
Subject: [PATCH 7/9] docs: sync DESIGN_SYSTEM.md with late docs-agent changes

Update intro wording ("warm ink tones" vs "near-monochrome"), fix
launcher icon dark background color (#1c1917), and restore deleted
reference sections (typography, spacing, transitions, toast, layout
constants) that the docs-sync agent wrote after the prior commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 DESIGN_SYSTEM.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md
index fd816aa..de888ad 100644
--- a/DESIGN_SYSTEM.md
+++ b/DESIGN_SYSTEM.md
@@ -1,6 +1,6 @@
 # Grove Design System
 
-A minimalist design language for a macOS-native Git worktree manager. Near-monochrome palette with a single muted teal accent, flat surfaces, and precise typography. Supports light and dark modes via `[data-theme="light"|"dark"]`. No gradients, no glass-morphism, no decorative shadows.
+A minimalist design language for a macOS-native Git worktree manager. Warm ink tones with a single teal accent, flat surfaces, and precise typography. Supports light and dark modes via `[data-theme="light"|"dark"]`. No gradients, no glass-morphism, no decorative shadows.
 
 ---
 
@@ -201,7 +201,7 @@ Always use `<Input>`, `<Textarea>`, `<Select>` from `src/components/FormControls
 All launcher icons use a simple, uniform background:
 
 - **Default**: `var(--surface-muted)` with `var(--border-default)` border
-- **Dark-themed launchers** (cursor, terminal, ghostty, iterm2, warp, opencode): `#1a1a1a` background
+- **Dark-themed launchers** (cursor, terminal, ghostty, iterm2, warp, opencode): `#1c1917` background
 
 No per-launcher gradients. No decorative shadows or glows.
 
@@ -220,6 +220,69 @@ No per-launcher gradients. No decorative shadows or glows.
 
 ---
 
+## Typography
+
+### Font Weights
+
+| Weight | Usage |
+|---|---|
+| `400` | Body text |
+| `500` | Primary button text |
+| `600` | Labels, buttons, emphasis |
+| `700` | Headings, badges, branch names |
+
+### Line Height
+
+| Value | Usage |
+|---|---|
+| `1.5` | Global default |
+| `1.55` | Mono blocks |
+
+---
+
+## Spacing
+
+2px base grid. Common stops: 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28px.
+
+---
+
+## Transitions
+
+| Target | Duration | Easing |
+|---|---|---|
+| Button hover/bg/opacity | `140ms` | `ease` |
+| List item hover/border | `100ms` | `ease` |
+| Slide-out panel | `180ms` | `ease-out` |
+| Toggle switch | `200ms` | — |
+| Toast enter | `200ms` | `ease` |
+| Toast exit | `300ms` | `ease` |
+
+---
+
+## Toast
+
+- Fixed position: `bottom: 24px; right: 24px`
+- Auto-dismiss after 3 seconds
+- One toast at a time
+- Two variants: `toast-success` / `toast-error`
+- Prefix with checkmark (success) or cross (error)
+
+---
+
+## Layout Constants
+
+| Property | Value |
+|---|---|
+| Topbar height | `38px` |
+| Topbar left padding (macOS) | `78px` |
+| Sidebar width (worktrees) | `280px` |
+| Max content width | `640-680px` |
+| Slide-out panel width | `min(480px, calc(100vw - 60px))` |
+| Modal max width | `min(900px, 100%)` |
+| Min app width | `860px` |
+
+---
+
 ## Component Usage Rules
 
 1. **Use existing components**: `Input`, `Textarea`, `Select` from `FormControls.tsx`; `ModalShell` for modals; `Alert` for error banners.

From 70c5d665b944200ae18dabadb0d68638ef381676 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Tue, 31 Mar 2026 09:32:05 +0800
Subject: [PATCH 8/9] fix: restore branded background colors for launcher icons

The minimalist redesign stripped all per-launcher brand backgrounds,
leaving icons like Claude (white glyph on generic gray) visually broken.
Restore solid brand bg for Claude and subtle brand tints for VS Code,
Codex, Gemini, WezTerm, Alacritty, and Kitty in both light and dark mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/styles.css b/src/styles.css
index f691b9d..5243f29 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1083,6 +1083,35 @@ textarea {
   border-color: var(--border-strong);
 }
 
+.launcher-icon-shell[data-launcher-id="claude"] {
+  background: #da7651;
+  border-color: rgba(205, 95, 47, 0.2);
+}
+
+.launcher-icon-shell[data-launcher-id="vscode"] {
+  background: rgba(0, 122, 204, 0.1);
+}
+
+.launcher-icon-shell[data-launcher-id="codex"] {
+  background: rgba(69, 80, 93, 0.1);
+}
+
+.launcher-icon-shell[data-launcher-id="gemini"] {
+  background: rgba(107, 99, 246, 0.1);
+}
+
+.launcher-icon-shell[data-launcher-id="wezterm"] {
+  background: rgba(78, 62, 200, 0.1);
+}
+
+.launcher-icon-shell[data-launcher-id="alacritty"] {
+  background: rgba(244, 109, 1, 0.1);
+}
+
+.launcher-icon-shell[data-launcher-id="kitty"] {
+  background: rgba(120, 68, 33, 0.1);
+}
+
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="cursor"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="terminal"],
 [data-theme="dark"] .launcher-icon-shell[data-launcher-id="ghostty"],
@@ -1093,6 +1122,35 @@ textarea {
   border-color: rgba(219, 214, 208, 0.1);
 }
 
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="claude"] {
+  background: #c06840;
+  border-color: rgba(205, 95, 47, 0.25);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="vscode"] {
+  background: rgba(0, 122, 204, 0.14);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="codex"] {
+  background: rgba(69, 80, 93, 0.18);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="gemini"] {
+  background: rgba(107, 99, 246, 0.14);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="wezterm"] {
+  background: rgba(78, 62, 200, 0.14);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="alacritty"] {
+  background: rgba(244, 109, 1, 0.14);
+}
+
+[data-theme="dark"] .launcher-icon-shell[data-launcher-id="kitty"] {
+  background: rgba(120, 68, 33, 0.16);
+}
+
 .launcher-icon {
   width: 20px;
   height: 20px;

From ad81a7ce5d5a037512e165962cf0ac7edc5286c0 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Tue, 31 Mar 2026 10:12:01 +0800
Subject: [PATCH 9/9] docs: update TODO checklist with completed items

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 TODO.md | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/TODO.md b/TODO.md
index 22e5320..157af82 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,19 +1,20 @@
 # TODO
 
 - [ ] 监测 worktree 目录分支和主目录的分支变化
-- [ ] 优化存储，现在是 json 不知道是否合适
+- [x] 优化存储，现在是 json 不知道是否合适
 - [x] 自定义启动器
 - [x] 自定义 hooks + 默认 hooks
 - [x] 工作区默认目录模板分仓库设置
-- [ ] 补充测试，否则经常改错
-- [ ] re run hook 需要留下日志
+- [x] 补充测试，否则经常改错
+- [x] re run hook 需要留下日志
 - [x] Input 等组件化统一样式
 - [ ] 定义环境变量，方便”默认目录”等设置
 - [ ] 重新设计 Cold Start 功能（确定性端口分配、warmup 文件复制等）
-- [ ] 优化样式; 暗黑模式
+- [x] 优化样式; 暗黑模式
 - [x] 输入禁用自动纠错
-- [ ] 启动器是否可以加上不同窗口的管理，比如打开了好几个 vscode 窗口，是新建一个窗口还是复用当前窗口
+- [x] 启动器是否可以加上不同窗口的管理，比如打开了好几个 vscode 窗口，是新建一个窗口还是复用当前窗口
 - [ ] 提供快捷 hooks 选项：安装依赖、复制配置文件、复制 .claude/settings.local.json 权限声明、link rust 编译缓存
 - [x] 添加一个菜单栏并支持是否显示，现在 grove 关掉就关掉了
-- [ ] 打 exe\deb\rpm 等多种包
-- [ ] Grove 本身支持多窗口
+- [x] 打 exe\deb\rpm 等多种包
+- [x] Grove 本身支持多窗口
+- [x] grove cli