feat(webui): build the macOS glass design system and app shell

[inureyes]

Parent / dependencies

Parent: #1834. Depends on #1835, #1836, #1842. Independent components may be prepared in parallel; final shell authentication wiring and acceptance occur after the shared client merges. Use its provider/hooks directly, not a static authentication placeholder or duplicated credential state.

Ownership

Own webui/src/design-system/, semantic token CSS, shared controls, layout/navigation, appearance preferences, English/Korean localization infrastructure and screenshot baselines. Pages use these primitives and cannot add one-off glass/spacing/color systems.

Required behavior

• Implement the epic's sidebar/toolbar/content/inspector hierarchy and Models/Chat/Activity/Settings navigation. Neutral content surfaces, restrained glass chrome, concentric rounded corners, capsule action groups, subtle separators and native system font stack; no fake OS window controls, dashboard clutter, bundled Apple proprietary assets or full-page blur.
• Publish exact semantic tokens for light/dark, glass/tinted/opaque/high-contrast variants, focus, selection, warning/error, spacing, type, radii, shadows and 120–180 ms motion. Semantic names replace page hex values. Glass intensity preference 0–100 (35 default) applies only to decorative chrome; contrast/reduced-transparency overrides it. System color/motion/contrast detection is progressive enhancement, with explicit settings when browsers cannot observe the OS preference.
• Shared Button/IconButton, Field, Select/Combobox, model StatusBadge, progress, table/list, EmptyState, ErrorBanner, Dialog/Sheet, Tooltip, tabs and inspector primitives include disabled/busy/focus/error behavior. Use a narrowly selected accessible primitive dependency if needed, with one canonical wrapper and retained license; do not hand-roll multiple focus traps.
• Responsive desktop and 390 px compact shell with off-canvas sidebar, stacked inspector and content widths; long/CJK names truncate with accessible full labels. Cmd/Ctrl+K opens command palette, Escape closes dismissible overlays without accidentally cancelling generation, keyboard shortcuts do not interfere with editable fields/IME.
• Browser appearance preferences alone may persist without history opt-in. User-facing strings use en/ko catalogs, typed keys and locale-aware number/unit formatting. Add reduced-motion and opaque no-backdrop-filter fallbacks; disable decorative animation when backgrounded.

Acceptance criteria

• Commit a component gallery and stable screenshots at 390/1024/1440 widths, light/dark, tinted/opaque, high contrast, long/CJK labels and 200% zoom. Record which macOS 27 reference informed each material/layout decision; browser CSS is not advertised as native AppKit.
• Automated accessibility checks plus keyboard dialog/combobox/navigation/focus restoration tests; manually verify Safari/VoiceOver semantics and readable contrast over worst-case backgrounds.
• No page-level horizontal overflow at 390 px, minimum 24×24 CSS px targets (prefer ≥32 for toolbar), visible non-color-only states, correct reduced motion and missing backdrop-filter behavior.
• Document tokens and component contracts for other implementers; screenshot approval happens before page-specific styling proceeds.