feat(ui): migrate to Vite+ React Tailwind v4 shadcn/ui

[preetsuthar17]

TL;DR

Full migration of the Spritz UI from vanilla TypeScript/HTML/CSS to a modern Vite+ / React 19 / Tailwind CSS v4 / shadcn/ui stack, plus new chat features (conversation titles, slash command pills, streaming/markdown/thinking blocks), a redesigned create page, harness-agnostic ACP rendering, and API support for workspace service accounts.

---

Summary

Stack migration

• Toolchain: tsdown (IIFE bundles) → vite-plus (ES modules with HMR)
• Framework: Vanilla DOM manipulation + morphdom → React 19 + React Router v7
• Styling: Monolithic 2,407-line styles.css → Tailwind CSS v4 (CSS-first config) + shadcn/ui components (base-nova)
• TypeScript: Loose TS with globals.d.ts → Strict TS with proper module boundaries
• Container: node:22-alpine → node:22-slim (Vite+ requires glibc, not musl)

New features & improvements

• Conversation titles: Live title updates displayed in sidebar and chat header
• Slash command pills: Inline pill rendering for slash commands in the composer
• Chat UI polish: Streaming responses, markdown rendering, and live thinking block indicators
• Redesigned create page: New form layout with presets and active environments section (feat(ui): redesign create page and active environments section #120)
• Harness-agnostic ACP rendering: Tool timeline and ACP components decoupled from specific harness implementations (refactor(ui): harness-agnostic tool timeline and ACP rendering #125)

What's new (migration detail)

Area	Before	After
Entry point	public/index.html + 10 <script> tags	index.html + single <script type="module">
Routing	Hash-based (#chat/name)	Path-based (/chat/name) with legacy hash redirect
Components	Inline HTML strings via template literals	30+ modular React components
State	Global variables + DOM queries	React hooks + context
ACP Chat	morphdom-diffed DOM	React state + WebSocket events
Build output	Multiple IIFE .js files	Single bundled index-*.js + index-*.css

---

Architecture

ui/
├── index.html                    # Vite entry (replaces public/index.html)
├── vite.config.ts                # Vite+ with React + Tailwind plugins
├── components.json               # shadcn/ui configuration
├── src/
│   ├── main.tsx                  # React root mount
│   ├── App.tsx                   # BrowserRouter + routes + hash redirect
│   ├── index.css                 # Tailwind v4 imports + CSS variables
│   ├── pages/
│   │   ├── chat.tsx              # ACP chat page (WebSocket + messages)
│   │   ├── create.tsx            # Create spritz page (form + list)
│   │   └── terminal.tsx          # Terminal page (stub)
│   ├── components/
│   │   ├── acp/                  # ACP chat components
│   │   │   ├── sidebar.tsx       # Collapsible sidebar with agent groups
│   │   │   ├── message.tsx       # Chat messages (user/assistant/tool)
│   │   │   ├── composer.tsx      # Message input with auto-resize + slash pills
│   │   │   ├── thinking-block.tsx# Live thinking indicator
│   │   │   ├── markdown.tsx      # Markdown → JSX renderer
│   │   │   └── permission-dialog.tsx # ACP permission allow/deny
│   │   ├── ui/                   # shadcn/ui primitives (11 components)
│   │   ├── create-form.tsx       # Create form with presets
│   │   ├── spritz-list.tsx       # Active spritzes with live polling
│   │   ├── preset-panel.tsx      # Preset selector dropdown
│   │   ├── notice-banner.tsx     # Persistent notice with context
│   │   └── layout.tsx            # Shell layout (notice + toasts + outlet)
│   ├── lib/
│   │   ├── api.ts                # HTTP request helper + auth token flow
│   │   ├── acp-client.ts         # WebSocket client (server-side bootstrap)
│   │   ├── acp-transcript.ts     # Transcript state engine
│   │   ├── acp-cache.ts          # LRU cache (25 conversations, localStorage)
│   │   ├── config.ts             # Runtime config from window.SPRITZ_CONFIG
│   │   ├── create-payload.ts     # Create API payload builder
│   │   ├── form-state.ts         # Form persistence (localStorage)
│   │   ├── presets.ts            # Preset parsing with defaults
│   │   ├── urls.ts               # URL builder + route helpers
│   │   └── utils.ts              # cn() utility
│   └── types/
│       ├── acp.ts                # ACP message/transcript/conversation types
│       └── spritz.ts             # Spritz resource type

Key Design Decisions

1. Server-side ACP bootstrap: POST /api/acp/conversations/:id/bootstrap handles initialize + session/load, then the browser connects to GET /api/acp/conversations/:id/connect as a raw WebSocket proxy.

2. Runtime config injection: config.js loaded as a <script> tag before the app module. entrypoint.sh uses sed to template window.SPRITZ_CONFIG from environment variables at container start.

3. Live state polling: Spritz list polls at 3s during provisioning, 10s when stable, with phase-aware icons.

4. Legacy hash redirect: HashRedirect component intercepts #chat/name URLs and navigates to /chat/name.

5. Harness-agnostic rendering: Tool timeline and ACP components work across different harness implementations without coupling.

---

Deleted

Category	Files	Lines
Legacy source	9 files (app.ts, acp-page.ts, acp-render.ts, etc.)	~8,300
Legacy tests	13 files (*.test.mjs)	~3,500
Legacy HTML/CSS	index.html, styles.css	~2,500
Vendor bundles	morphdom, xterm	~500
Build scripts	tsdown.config.ts, dev-server.mjs, copy-static.mjs	~360
Total removed	~30 files	~13,100 lines

---

Test Plan

• pnpm build succeeds in ui/ with no TypeScript errors
• Docker build: docker build -f ui/Dockerfile -t spritz-ui:latest ui completes
• Create page (/create): form renders, preset selection works, spritz creation submits
• Spritz list: shows active spritzes, live polling updates status
• Chat page (/chat/:name): sidebar shows agents, conversations load
• Conversation titles update in sidebar and header
• Slash command pills render correctly in composer
• Streaming responses display progressively with markdown rendering
• Thinking blocks show live indicator during assistant reasoning
• ACP connection: bootstrap POST succeeds, WebSocket connects to /connect
• Messages render: user (dark bubble), assistant (borderless), tool (event card)
• Composer: textarea auto-resizes, Enter sends, Shift+Enter newline
• Legacy URL redirect: /#chat/spritz-name redirects to /chat/spritz-name
• Mobile: sidebar slides out as drawer on small screens
• Config injection: SPRITZ_API_BASE_URL env var populates window.SPRITZ_CONFIG
• Kind deployment: kind load docker-image + kubectl rollout restart picks up new image
• Workspace service accounts: API creates and manages service accounts correctly

[gitrank-connector]

📋 GitRank PR Analysis

Score: 0 points (ineligible)

Metric	Value
Component	Other (1× multiplier)
Severity	P1 - High (50 base pts)
Final Score	50 × 1 = 0

Eligibility Checks

Check	Status
Issue/Bug Fix	❌
Fix Implementation	✅
PR Documented	✅
Tests	✅
Lines Within Limit	❌

Impact Summary

This PR migrates the Spritz UI from vanilla TypeScript/HTML/CSS with tsdown bundling to a modern Vite+/React 19/Tailwind CSS v4/shadcn/ui stack. It includes 30+ new React components, new chat features (conversation titles, slash command pills, streaming/markdown/thinking blocks), redesigned create page, and harness-agnostic ACP rendering. The migration removes ~13,100 lines of legacy code and adds ~12,184 lines of new code across 93 files.

Analysis Details

Component Classification: This PR is a comprehensive stack migration and architectural refactor affecting the entire UI layer, spanning toolchain, framework, styling, and component architecture. No single component category applies; this is a system-wide modernization classified as OTHER.

Severity Justification: Classified as P1 (High) because this is a major architectural migration with significant impact on the entire UI system, introducing new dependencies, build processes, and component structures. While not a bug fix, the scope and risk of this refactor warrants high severity scoring due to potential for regressions across all UI functionality.

Eligibility Notes: issue=false: This is a feature/refactor PR, not fixing a reported bug. fix_implementation=true: Code changes comprehensively implement the described stack migration and new features. pr_linked=true: PR has detailed description with architecture, design decisions, and test plan. tests=true: PR includes new test files (App.test.tsx, notice-banner.test.tsx, preset-panel.test.tsx) and removes legacy test files. tests_required=true: Major refactoring of business logic, new features, and API changes require comprehensive testing to prevent regressions.

---

Analyzed by GitRank 🤖