feat(ui): adopt Shadcn AI Elements in the deferred workspace

AGENTS.md

@@ -149,6 +149,11 @@ Repository-wide constraints:
 - Keep platform behavior behind Effect services and Layers. The browser,
   Tauri host, and macOS Swift code are adapters to shared application
   capabilities, not alternate homes for product workflows or interface state.
+- Every user-triggered native operation, including window chrome such as
+  dragging or resizing, must enter through a named Effect capability and its
+  provided runtime. React components and page scripts must not import or call
+  `@tauri-apps/api/*` directly; only the named platform Layer may adapt that
+  API. Tests provide that capability through a test Layer.
 - Test observable behavior through exported contracts, HTTP requests, and the
   rendered interface. Do not assert that source files contain selected text.
 - Treat documentation as guidance, not proof that a boundary or lifecycle is

ARCHITECTURE.md

@@ -67,7 +67,12 @@ model responses. The static view-only route fetches neither the Preact renderer
 nor Effect. Compiler, package, shell, Worker, and Wasm implementations are
 separate dynamic boundaries after workspace activation. Astro production uses
 Preact compatibility for the protected components; the direct Vite SPA remains
-a React fallback.
+a React fallback. UI primitives follow the official Shadcn v4 composition
+model with its Radix primitives and the official AI Elements registry. Radix
+and Tailwind are workspace implementation details behind the Astro island
+boundary; they do not
+own workflows, persistence, or the static view-only route, and each added
+primitive must preserve the browser budgets.
 
 ## Effect application kernel
 

DESIGN.md

@@ -10,8 +10,8 @@ colors:
   muted: "oklch(0.690 0.012 340)"
   quiet: "oklch(0.500 0.012 340)"
   line: "oklch(0.300 0.010 340)"
-  flect-rose: "oklch(0.630 0.180 340)"
-  flect-rose-hover: "oklch(0.690 0.170 340)"
+  primary: "oklch(0.922 0 0)"
+  primary-hover: "oklch(0.870 0 0)"
   ready: "oklch(0.780 0.120 158)"
   danger: "oklch(0.660 0.170 27)"
 typography:
@@ -53,7 +53,7 @@ components:
     rounded: "{rounded.pill}"
     size: "40px"
   button-primary-hover:
-    backgroundColor: "{colors.flect-rose-hover}"
+    backgroundColor: "{colors.primary-hover}"
     textColor: "{colors.void}"
     rounded: "{rounded.pill}"
     size: "40px"
@@ -72,9 +72,9 @@ components:
 
 Flect feels like working at a black anodized drafting desk after everything
 unnecessary has been cleared away. The interface recedes so the person's intent
-and the surface being shaped remain central. One restrained rose signal carries
-identity; it appears as a precise indication of agency, never as ambient
-decoration.
+and the surface being shaped remain central. A neutral hierarchy carries the
+interface; state is communicated with contrast, type, icons, and copy rather
+than a decorative product accent.
 
 The system is familiar enough to trust immediately and exact enough to feel
 first-party. It rejects widget-dashboard density, chatbot sidecars,
@@ -83,12 +83,28 @@ affordances, short labels, and restrained state motion.
 
 **Key Characteristics:**
 
-- Near-black neutral architecture with one precise rose signal.
+- Shadcn's neutral light and dark defaults, with no product accent color yet.
 - System typography tuned for calm density and high legibility.
 - Tonal layering before shadows; boundaries appear only when useful.
 - One centered agent composer that expands naturally into a conversation rail.
 - Protected recovery controls that remain quiet but always reachable.
 
+### Component implementation
+
+Flect vendors the official Shadcn v4 component source. The protected workspace
+uses Shadcn's Radix primitives and the official AI Elements registry for the
+conversation, messages, composer, reasoning, and tool activity. The initial
+visual baseline is Shadcn's neutral default; product-specific styling is a
+later, deliberate layer instead of a parallel component system.
+
+Tailwind v4 compiles only the vendored workspace component sources. It does not
+enter the static Astro activation shell, does not replace the Effect workflow
+kernel, and does not authorize large registry-wide installs. Add primitives one
+at a time, keep them behind the island or feature boundary that needs them, and
+measure both the initial protected workspace and the on-demand chunk. A native
+host control still wins whenever a WebView primitive fails the platform-native
+quality contract.
+
 ## 2. Platform-native quality contract
 
 Flect must feel like first-party software on every platform it claims to
@@ -174,15 +190,15 @@ keyboard behavior, or a design that only works at the demo viewport.
 
 ## 3. Colors
 
-The palette is monochrome at rest and reveals color only when state or agency
-needs to be communicated.
+The palette is neutral by default. Color appears only for semantic success,
+warning, or failure states.
 
 ### Primary
 
-- **Flect Rose** (`oklch(0.630 0.180 340)`): focus, active agent state,
-  selected controls, and the rare brand signal.
-- **Flect Rose Hover** (`oklch(0.690 0.170 340)`): interactive emphasis when a
-  primary action needs more presence.
+- **Primary** (`oklch(0.922 0 0)` dark, `oklch(0.205 0 0)` light): actions,
+  focus, and selected controls using Shadcn's neutral defaults.
+- **Primary Hover**: a neighboring neutral tone that preserves contrast without
+  introducing a product accent.
 
 ### Secondary
 
@@ -207,8 +223,8 @@ needs to be communicated.
 
 ### Named Rules
 
-**The One Signal Rule.** Flect Rose occupies less than ten percent of a screen.
-Its rarity makes agency unmistakable.
+**The Semantic Color Rule.** Non-neutral color must communicate a named state
+and must never be the only carrier of meaning.
 
 ## 4. Typography
 
@@ -260,17 +276,18 @@ to communicate focus, movement, or temporary hierarchy.
 ### Buttons
 
 - **Shape:** circular for icon-only controls; 8px for labeled controls.
-- **Primary:** Ink fill with Void content, reversing to Flect Rose when active.
-- **Hover / Focus:** 180ms tonal transition and a visible 2px Flect Rose focus
+- **Primary:** Ink fill with Void content, using the neighboring neutral when
+  active.
+- **Hover / Focus:** 180ms tonal transition and a visible 2px primary focus
   ring with offset.
 - **Ghost:** transparent at rest, Raised Surface on hover, never a faint outline
   box.
 
 ### Chips
 
 - **Style:** tonal Surface or Raised Surface background with Ink or Muted text.
-- **State:** selected chips use a low-chroma rose tint plus an explicit icon or
-  label change.
+- **State:** selected chips use neutral contrast plus an explicit icon or label
+  change.
 
 ### Cards / Containers
 
@@ -285,8 +302,8 @@ to communicate focus, movement, or temporary hierarchy.
 
 - **Style:** a 16px prompt surface without a resting outline. The text area and
   its action rail read as one instrument.
-- **Focus:** Flect Rose appears as a precise inner seam; Prompt Lift signals the
-  active surface.
+- **Focus:** Primary contrast appears as a precise inner seam; Prompt Lift
+  signals the active surface.
 - **Error / Disabled:** errors use Failure Red plus direct recovery copy;
   disabled controls retain readable text and expose their reason.
 
@@ -356,19 +373,36 @@ existing Surface, Raised Surface, Line, Ink, and Muted tokens; code is
 `0.875rem` mono and table content is `0.8125rem`. Their own viewports own
 horizontal overflow, while copy, wrap, and expand actions stay dense on
 desktop and reach `44px` at compact widths. Details remain native disclosures,
-links use Flect Rose only as an interaction cue, and footnotes remain subdued.
+links use underline and neutral contrast as interaction cues, and footnotes
+remain subdued.
 The complete rendering and trust contract lives in
 [`docs/superpowers/specs/2026-07-31-flect-chat-markdown-design.md`](docs/superpowers/specs/2026-07-31-flect-chat-markdown-design.md).
 
 ### Activity, Follow, and Diagnostics
 
 Tool use is a compact instrument in the conversation timeline, not a generic assistant
-sentence and not a developer-console dump. A card always names the tool and
-shows queued, running, completed, or failed state. Duration stays visible;
+sentence and not a developer-console dump. An expanded row names the action
+and shows queued, running, completed, or failed state. Duration stays visible;
 bounded commands, output, exit status, preview links, validation paths, and
 operation identifiers live in a native disclosure. Ready Mint and Failure Red
 support the label but never carry meaning alone.
 
+Completed work is collapsed by default into one quiet turn-level disclosure
+such as “Worked for 1.4 s.” The final assistant message remains visible. A
+running turn uses the same line-level treatment, and individual commands appear
+as borderless rows only after disclosure; command output uses a subtle inset
+rule rather than nested cards. Failed work that ends the turn opens for
+attention. Raw tool names, repeated completion badges, and one duration column
+per command must not dominate the ordinary conversation.
+
+Every submitted request, its tool activity, and its final response share one
+typed turn identity. Once a newer turn begins, the older request and work fold
+behind one quiet `Asked …` line while that turn's final assistant response
+remains visible. Expanding the line restores the complete request and work in
+place. Historical user prompts must not remain as a stack of dominant cards,
+and legacy records without turn identity remain readable rather than being
+guessed into the wrong turn.
+
 Conversation follow respects the reader. Content follows while the viewport is
 within 48px of its bottom. Once the person scrolls away, streaming and tool
 updates preserve that position and surface a quiet, keyboard-operable **Jump
@@ -386,7 +420,7 @@ ordinary product surface into infrastructure chrome.
 ### Do:
 
 - **Do** keep the person's work and current prompt visually central.
-- **Do** reserve Flect Rose for focus, selection, and active shaping.
+- **Do** use neutral contrast for focus, selection, and active shaping.
 - **Do** use known platform affordances with visible keyboard focus.
 - **Do** use host-native surfaces when the WebView cannot meet the platform
   contract.

README.md

@@ -76,6 +76,12 @@ until that stylesheet has loaded and the island is ready. Compiler, package,
 shell, Worker, and Wasm substrates remain on demand until a typed operation
 needs them. Production Astro uses Preact's React compatibility renderer for the
 existing workspace components; the direct Vite SPA remains a React fallback.
+Official Shadcn v4 components, its Radix primitives, and the official AI
+Elements conversation, message, composer, reasoning, and tool components
+compile inside that deferred workspace stylesheet/chunk only.
+The product intentionally starts from Shadcn's neutral defaults; Flect-specific
+styling comes later, without forking interaction behavior. The static Astro
+route carries none of the component runtime.
 The measured production gates and exact budgets are documented below.
 
 Flect remains under active development. The published v0.2.0 macOS preview is

biome.json

@@ -22,6 +22,11 @@
     "enabled": true,
     "indentStyle": "space"
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "linter": {
     "enabled": true,
     "rules": {
@@ -34,5 +39,18 @@
         "organizeImports": "on"
       }
     }
-  }
+  },
+  "overrides": [
+    {
+      "includes": ["src/components/ui/**"],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "useKeyWithClickEvents": "off",
+            "useSemanticElements": "off"
+          }
+        }
+      }
+    }
+  ]
 }