Chappie Frontend

---
name: chappie-frontend
description: CHAPPiE's React frontend. Use when modifying UI pages, components, Tailwind styling, or the chat streaming experience.
---

# CHAPPiE Frontend Development

## Stack
- **Framework**: React 18 + TypeScript
- **Build**: Vite
- **Styling**: Tailwind CSS (utility classes only, no CSS files)
- **Routing**: React Router (page-based)
- **Data**: TanStack React Query (`useQuery`, `useMutation`)
- **API**: Fetch-based SSE streaming client

## Pages (`frontend/src/pages/`)

| Page | File | Key Features |
|---|---|---|
| Chat | `chat-page.tsx` | Token streaming, message queue, thinking animation, CoT/Answer boxes |
| Settings | `settings-page.tsx` | All 40+ settings, emotion sliders, neural mapping, auto-save |
| Memories | `memories-page.tsx` | LTM search, STM buffer, session history, cleanup/wipe |
| Life | `life-page.tsx` | Homeostasis, needs, world model (refetchInterval: 3s) |
| Growth | `growth-page.tsx` | Planning, forecast, social arcs (refetchInterval: 3s) |
| Training | `training-page.tsx` | Daemon control, logs, config (refetchInterval: 5s) |
| Debug | `debug-page.tsx` | Metadata, debug entries (refetchInterval: 2s) |

## Key Patterns

### Streaming Flow
1. User sends message → `processMessage()` → SSE stream via `api.sendMessageStream()`
2. Tokens arrive as `event: token` events with `token_type: "answer"|"reasoning"`
3. First answer token → transition from "thinking" to "streaming"
4. `turn_finished` → final message with metadata (formatted_cot, formatted_answer)

### Auto-Scroll
- `autoScrollRef` tracks user position
- Scroll event listener updates it (threshold: 60px from bottom)
- New message → `autoScrollRef.current = true`
- Reasoning truncation: 3000 chars in stream, 4000 chars in final box

### Two-Box UI (CoT + Answer)
- CoT: pine-border box above answer, shows `formatted_cot` from metadata
- Answer: main message bubble, shows `formatted_answer` (preferred) or raw content
- Uses `whitespace-pre-line` for formatted text with line breaks

## Styling Conventions
- No separate CSS files — all Tailwind utilities inline
- `rounded-none` (square corners) everywhere
- Colors: `ember` (primary), `pine` (success), `night` (bg), `ink` (darkest), `mist` (text)
- `shadow-glass` for card-like elements
- `text-[10px] uppercase tracking-widest` for labels
- Missing module: `../lib/format` → `parseEmotionalText()` in `frontend/src/lib/format.ts`