Build the Darth Vader voice assistant, from an empty folder to a working app

Plan a personal voice assistant with an animated Darth Vader style helmet avatar at the center of a dashboard. I talk, it answers out loud, and later it will act on my calendar and mail through MCP connectors.

Stack: Vite, React, TypeScript and Tailwind for the web app. Node, Fastify and ws for the server. SQLite for storage. npm workspaces with apps/web, apps/server and packages/protocol.

Providers: Claude for replies, Deepgram for streaming speech to text, ElevenLabs for streaming text to speech. Put each behind an interface in apps/server/src/providers so any one can be swapped, and add mock providers so the app runs with no keys.

Write the plan to a markdown file with phases, a latency budget, the WebSocket protocol, the data model and the risks. Then write CLAUDE.md with the layout and the rules: keys live in .env and are never printed or committed, and theme assets stay in one swappable folder. Do not write app code yet.

Propose three visual directions for the dashboard as standalone HTML previews. I want a dark command bridge feel: near-black surfaces, hairline structure, monospace labels, one red accent, and the avatar as the only element that glows.

After I pick one, write DESIGN.md with binding tokens for type, color, spacing, radius, shadow, motion and icons, plus a banned list. From then on, no value outside DESIGN.md goes into the app.

Implement phase 1 of the plan. Build the design tokens and UI primitives from DESIGN.md, then the layout: session sidebar, center stage, bottom dock and transcript panel. Add the SQLite schema and migrations, session create, rename, delete and search, the WebSocket gateway, and the shared protocol package.

Wire streaming text chat with Claude through the provider interface, with prompt caching and refusal handling. The system prompt is a frozen string written for speech: short plain sentences, no markdown, numbers and dates in spoken form.

Done means a typed conversation persists, reloads and resumes. Add tests and run them.

Implement phase 2 of the plan. Capture the microphone in an AudioWorklet and send 16 kHz PCM frames over the WebSocket. Forward them to Deepgram and show interim transcripts as live captions. On end of turn, send the final transcript to Claude.

Buffer Claude's stream in a sentence chunker and send each complete sentence to ElevenLabs so speech starts before the full reply exists. Play the returned audio through a PCM player worklet, then through the Vader effect chain: pitch shift down, low-shelf boost, low-pass, short comb filter, compressor. Add a synthesized breathing loop that ducks under speech.

Add a microphone picker, a Stop button bound to Esc, and a script that checks each provider with one small real request.

Implement phase 3 of the plan. Build the helmet as original procedural geometry in React Three Fiber, with a red key light and bloom inside the avatar canvas only. Drive it from a small state machine with four states: idle, listening, thinking and speaking. Ease between states so nothing snaps.

The mouth grille glow and the ring around the avatar follow the audio level from the analyser. Respect prefers-reduced-motion. Fall back to a 2D helmet when WebGL is unavailable.

Run typecheck and the full test suite, then run the provider check. Open the app in a browser, send one typed message, and take screenshots of the empty, thinking, speaking and finished states at desktop width and at 390 pixels wide. Report what you verified, what you could not verify, and any failures with their output.