Dark mode is properly dark. The dark theme now sits on a near-black #090909 app
background with a coherent surface ramp (surface #161616, elevated #202020); the shadcn
--sd-* bridge channels were updated to match, so every primitive follows.
No more white focus outline on the Settings modal & menus. Portalled Radix content
(Dialog / DropdownMenu / Select / ContextMenu / Sheet) now sets focus:outline-none, removing
the browser's default focus ring that rendered white under color-scheme: dark. The Settings
modal additionally skips auto-focusing its first nav tab on open (onOpenAutoFocus prevented),
since Chrome painted that button's white :focus-visible outline as a stray ring around the
modal; the nav tabs now carry a themed focus-visible:ring for keyboard users.
Token-usage meter no longer flashes blank. While /api/ai/usage loads, the meter shows a
shaped Skeleton (new components/ui/skeleton.tsx) that mirrors its final layout.
Tips & shortcuts popover no longer has empty-state onboarding annotations bleeding through
it — the canvas controls cluster now stacks above the onboarding overlay.
Clip AI model switcher shows a "Loading model…" chip while credentials resolve (was a blank
slot), and no longer offers models you can't run: on the shared host key it lists only the funded
base model (paid presets would 402); with your own key it lists that provider's presets.
Changed
Design-system migration, Phase 2 (chrome), auth surfaces: the sign-in form (EmailOtpForm)
now uses shadcn Input + Button (Google/outline, Send/Verify/primary); AuthButton's sign-in
pill and sign-out use Button; ThemeToggle is a Button icon. Bespoke bits (the avatar chip,
the anchored sign-in popover tied to the sign-in-prompt context) are unchanged.
AI chat redesigned on the shadcn message look. Assistant replies now sit in a left-aligned
bg-muted bubble (briefing badge + Thoughts ride above it, token/action meta inside); the user's
turns are a right-aligned bg-primary bubble in primary-foreground. Both chat surfaces (the
compact popover and the full-screen agent view) share the treatment. The send buttons (the
labelled "Send ⌘↵" and the round ↑) move to shadcn primary tokens with a clean muted disabled
state. The agent-run walkthrough (meta lines + live board mini-view) keeps its distinct style.
Design-system migration, Phase 4 (Phosphor → Lucide): replaced @phosphor-icons/react with
Lucide across the whole app and removed the dependency. 108 distinct icons over 39 files
swapped via a collision-aware codemod (curated name map — GearSix→Settings, MagnifyingGlass→
Search, Trash→Trash2, CircleNotch→LoaderCircle, ArrowSquareOut→ExternalLink, …;
every Phosphor weight prop dropped; only aliasing where a Lucide name would collide with
next/link/next/image). Lucide ships no brand marks, so the ~9 *Logo glyphs now come from the
new local components/BrandIcons.tsx (official simple-icons art via icones.js.org, offline).
Bespoke canvas artwork (ToolIcons, ShapeGlyph) untouched. tsc + pnpm build green.
Design-system migration, Phase 5 (settings surfaces): swept the remaining inline style={{…}}
in SettingsModal, AIModelsSection, and ConnectorsSection over to Tailwind utility classes
(helpers Heading/Row/GroupLabel/AccentPicker/DangerZone, and the AIModelsSection /
ConnectorsSection presentational shells). Only genuinely data-driven styles (dynamic swatch/bar/
icon colors, per-item active borders) stay inline; app CSS vars with no shadcn bridge token use
arbitrary values (text-[var(--text-2)]) so the look is byte-identical. Typecheck + build green.
Design-system migration, Phase 3c–3d (Settings on shadcn primitives): the Plans tab is
now Card + Badge + Button; Privacy uses a Button link. The Clip AI model editor
(AIModelsSection) runs on Input/Label/Select/Switch/ToggleGroup with Button
actions, and Connectors connect/disconnect/export/expander controls + the "Soon" badge are
now Button/Badge. Leaf-level swaps only — all controlled state and APIs are unchanged (the
react-hook-form rewrite was deliberately deferred as higher-risk). Typecheck + build green. See
docs/SHADCN_MIGRATION.md.
