# Boba Chat - Technical Design Document (TDD)

## Architecture Overview
Boba Chat is a minimalist Single Page Application (SPA) built with Vite and Vanilla JavaScript. It emphasizes high-fidelity CSS for retro visual effects and utilizes a modular architecture for AI, UI, and Voice components.

## Tech Stack
- **Frontend**: Vite + Vanilla JavaScript.
- **AI Integration**: Google Generative AI SDK using `model.startChat()` for session history.
- **Voice UI**: Web Speech API (`SpeechRecognition` and `SpeechSynthesis`).
- **Audio**: Web Audio API for mechanical keyboard sound synthesis.
- **Styling**: Vanilla CSS with CRT tokens and `VT323` pixel font.

## Key Technical Decisions
- **Stable AI Routing**: Uses `gemini-2.0-flash-lite` for stability and high quota availability.
- **Persona Management**: System prompts isolated in `src/persona.js` to separate "brain" from "logic".
- **Responsive ASCII Scaling**: Uses CSS `clamp()` and `vw` units to ensure the typography-based face never wraps or clips.
- **Command Dispatcher**: Input parsing for slash commands (`/style`, `/draw`) for UI customization and ASCII art.
- **Unified Event Handling**: Consolidated UI events and initialization logic to prevent race conditions.
- **Synthesized Audio**: Web Audio API generates "clack" sounds on the fly, avoiding heavy audio asset loads.

## File Structure
- `src/persona.js`: System instruction branding.
- `src/face.js`: ASCII theme management and animation triggers.
- `src/voice.js`: Speech API wrappers.
- `src/audio.js`: Mechanical keyboard audio synthesis.
- `src/chat.js`: Central logic, API interaction, and command handling.
- `style.css`: CRT physics, VT323 typography, and responsive rules.

## Final Implementation Status
- ✅ Voice Interaction (STT/TTS).
- ✅ Face Style Selector.
- ✅ ASCII Art Generator (`/draw`).
- ✅ Mechanical Keyboard Audio Synthesis.
- ✅ Conversational Session Memory.
- ✅ Mobile-Responsive CRT Overlay.
- ✅ Gen-X / Tron Persona Integration.