FE-558: UI foundation: shadcn/ui + Tailwind 4 + AI Elements

[lunelson]

No description provided.

[linear]

FE-558 UI foundation: shadcn/ui + Tailwind 4 + AI Elements

UI Foundation Realignment

Infrastructure slice: set up shadcn/ui + Tailwind 4 + AI Elements on the client before slice 5 (observer agent). No server-side changes.

Work Items

1. Update ai + @ai-sdk/react to latest
2. Install Tailwind 4 (tailwindcss + @tailwindcss/vite)
3. Run shadcn init — theme vars, cn() utility, path alias
4. Install AI Elements: conversation, message, reasoning, tool, prompt-input, shimmer
5. Migrate InterviewWorkspace to AI Elements components
6. Migrate ProjectList + root layout to shadcn + Tailwind
7. npm run verify passes

Validates

• SPEC.md A17 (AI Elements copy-paste components can be restyled without forking)

Acceptance

• All existing tests pass
• Zero server changes
• Interview workspace renders with AI Elements message/reasoning/tool/prompt components
• Project list renders with shadcn Card/Button

[lunelson]

• FE-580: Collapse remaining shared transport and review-status type duplication #45
• FE-579: Greenfield/brownfield first-screen + exploration #44
• FE-545: Local-first storage; npx distribution #43
• FE-578: UI refinements; design adaptations & alignments #42
• FE-543: Expanded rich fixture scenarios + reviews + replannings #41
• FE-574: Knowledge workspace review surface + lifecycle API #39
• FE-573: Project dashboard workflow state #38
• FE-542: Criteria-review mode #37
• FE-568: Requirements-review mode #36
• FE-540: Design mode: commitment and exploration #35
• FE-572: Canonical knowledge model foundation + cutover seam #34
• FE-539: Explicit phase outcomes and scope closure #33
• FE-567: Phase-aware observer extraction #32
• FE-566: Generic knowledge layer schema and sidebar projection #28
• FE-564: Flexible turn-response model #27
• FE-559: Migrate: @anthropic-ai/claude-agent-sdk query() -> @anthropic-ai/sdk client.messages.stream() #25
• FE-538: Entity sidebar (read-only) #24
• FE-537: Observer agent + entity persistence #23
• FE-558: UI foundation: shadcn/ui + Tailwind 4 + AI Elements #22 👈 (View in Graphite)
• FE-557: Spike: observer extraction fidelity #21
• FE-556: Structured interview: client UI #20
• FE-555: Parts-based persistence + context builders #19
• FE-554: Structured interview: scope phase #17
• FE-553: Multi-project routing #16
• FE-541: Rich chat UI with tool calls and reasoning rendering #15
• FE-552: Drizzle ORM and core extraction #14
• FE-544: Turn tree schema and API #13
• FE-535: SQLite foundation and project persistence #11
• FE-534: Walking skeleton SDK to SSE to React #10
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[augmentcode]

🤖 Augment PR Summary

Summary: Establishes the client UI foundation using Tailwind CSS v4 + shadcn/ui, and introduces reusable “AI Elements” components for the chat experience.

Changes:

• Updated `ai` and `@ai-sdk/react` to current versions and aligned supporting UI dependencies.
• Enabled Tailwind v4 via the `@tailwindcss/vite` plugin and adopted the v4 CSS-first import flow in the client stylesheet.
• Added shadcn/ui project configuration (`components.json`) and a suite of shadcn-based UI primitives under `src/client/components/ui`.
• Added AI-oriented UI building blocks under `src/client/components/ai-elements` (conversation/message/prompt/tooling components).
• Introduced shared theme tokens (CSS variables / OKLCH) and Geist variable font setup in `src/client/index.css`.

Technical Notes: Tailwind theming is driven by CSS variables consumed through shadcn’s Tailwind layer, and the @ alias in Vite resolves to src/client for component imports.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.

[lunelson]

Merge activity

• Apr 2, 6:52 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 2, 6:59 PM UTC: Graphite rebased this pull request as part of a merge.
• Apr 2, 7:00 PM UTC: @lunelson merged this pull request with Graphite.