[Feat] Design system premium token layer — glass, glow, ambient, typography, motion presets

[samzong]

Summary

Add the complete premium visual token layer that all subsequent UI worktrees depend on. Defines glass surfaces, 3-layer glow system, tool colors, ambient orbs, gradient tokens, display typography (Instrument Serif), extended motion presets, and CI enforcement rules — all with dark + light theme coverage and reduced-motion / @supports fallbacks.

Type of change

• [Feat] new feature
• [UI] UI or UX change

Why is this needed?

The parallel UI upgrade worktrees (ui--primitives-glass, ui--leftnav-premium, ui--chat-components, etc.) all need a shared token vocabulary. Without this foundation, each worktree would invent its own glass/glow/ambient values, leading to inconsistency and merge conflicts. This PR establishes the single source of truth.

What changed?

• theme.css: Glass tokens (8), layered shadow tokens (5), 3-layer glow tokens (12 across 4 color variants), tool color tokens (6), ambient/gradient tokens (6), glass utility classes (.glass, .glass-heavy, .glass-card, .glass-command), .noise::after pseudo-element, glow utilities (.glow-3, .glow-focus, .glow-selected, .glow-running), @supports fallback for non-backdrop-filter browsers, 7 keyframes (ambient-drift-1/2/3, stream-pulse, bar-bounce, tool-scan, glow-pulse). All tokens have both dark and light theme definitions.
• typography.css: @fontsource/instrument-serif import, --font-family-display token, .type-display-serif and .type-display-serif-sm utility classes.
• design-tokens.ts: ambient/dramatic durations, dramatic/gentle eases, gentle/bouncy/panelSettle springs, 7 motion presets (staggerContainer, crossfade, dialogEnter, cardHover, messageEnter, heroOverlay, heroPanel), commandPaletteMotion preset, safeMotion() utility with test-safe matchMedia guard.
• App.tsx: Left sidebar uses glass-heavy noise, right panel uses glass noise, root div applies --bg-ambient, AmbientShell mounted as first child, resize handles upgraded to invisible → accent line on hover.
• button.tsx: focus-visible:ring replaced with glow-focus, default variant upgraded to accent-gradient-vibrant.
• New files: AmbientShell.tsx (3 CSS-animated gradient orbs, respects prefers-reduced-motion), ActivityBars.tsx (5-bar CSS-only streaming indicator), claw-logo-minimal.svg (16×16 brand mark).
• check-ui-contract.mjs: Added glass-bypass rule (flags raw backdrop-filter/backdrop-blur outside .glass*), raw-glow rule (flags raw glow box-shadows outside .glow-*), CommandPalette usage rule, exclusions for components/ui/ and MarkdownContent.tsx.
• knip.json: @fontsource/instrument-serif in ignoreDependencies, design-tokens.ts as entry point, ActivityBars.tsx in global ignore.

Architecture impact

• Owning layer: renderer
• Cross-layer impact: none
• Invariants touched from docs/architecture-invariants.md: none
• Why those invariants remain protected: all changes are CSS tokens, utility classes, and motion presets — zero IPC, store, or session semantics changes

Linked issues

N/A — foundation layer for parallel UI worktrees

Validation

• pnpm lint
• pnpm test
• pnpm check:ui-contract
• pnpm check (all 9 sub-checks pass: lint, architecture, ui-contract, renderer-copy, i18n, dead-code, format, typecheck, test)

pnpm check — all 9 gates pass, 148 desktop tests + 59 pwa tests + 6 shared tests

Screenshots or recordings

Token definitions only — visual validation deferred to downstream component worktrees that consume these tokens. Glass surfaces, glow-focus, and ambient orbs are applied to the app shell and can be verified with pnpm dev.

New CI rules glass-bypass and raw-glow enforce that all glass/glow effects go through semantic utility classes. @supports not (backdrop-filter) fallback provides solid backgrounds when backdrop-filter is unavailable.

Release note

• No user-facing change. Release note is NONE.

NONE

Checklist

• The PR title uses at least one approved prefix: [Feat]
• The summary explains both what changed and why
• Validation reflects the commands actually run for this PR
• Architecture impact is described and references any touched invariants
• Cross-layer changes are explicitly justified
• The release note block is accurate

[github-actions]

Hi @samzong,
Thanks for your pull request!
If the PR is ready, use the /auto-cc command to assign Reviewer to Review.
We will review it shortly.

Details

Instructions for interacting with me using comments are available here.
If you have questions or suggestions related to my behavior, please file an issue against the gh-ci-bot repository.

[samzong]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2c04daeb44

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".