# Claude Code Web Interface

## Status: In Progress

### Steps

- [x] **Step 0** — Plans page (meta: view this document in the browser)
- [x] **Step 1** — Install Claude Agent SDK (`@anthropic-ai/claude-agent-sdk`)
- [x] **Step 2** — WebSocket message protocol types (`src/servers/api/claude/types.ts`)
- [x] **Step 3** — WebSocket bridge server (`src/servers/api/claude/websocket.ts`)
- [x] **Step 4** — Wire WebSocket into `server.tsx` (JWT auth on upgrade)
- [x] **Step 5** — Frontend hook `useClaude` (WS connection, state, streaming)
- [x] **Step 6** — UI components (ChatPanel, MessageBubble, ToolActivity)
- [x] **Step 7** — Route `/claude` + navigation link in dashboard dropdown

---

## Architecture

```
Browser (officer-web)        Bun Server                Same Machine
┌──────────────┐   WebSocket  ┌───────────────────┐  Claude Agent SDK  ┌─────────────┐
│ /claude page │◄────────────►│ /api/claude/ws     │◄──────────────────►│ Claude Code  │
│              │              │                    │                    │              │
│ - Chat input │   JSON msgs  │ - JWT auth on      │  async generator   │ - File I/O   │
│ - Messages   │◄────────────►│   upgrade          │◄──────────────────►│ - Bash       │
│ - Tool calls │              │ - Bridge: SDK ↔ WS │                    │ - Search     │
│ - Streaming  │              │ - Session tracking  │                    │ - Web fetch  │
└──────────────┘              └───────────────────┘                    └─────────────┘
```

## Files Created/Modified

| Action | File | Purpose |
|--------|------|---------|
| New | `src/servers/api/claude/types.ts` | WebSocket message protocol types |
| New | `src/servers/api/claude/websocket.ts` | Bun WS handler + Claude SDK bridge |
| Edit | `src/server.tsx` | WS upgrade route + websocket config |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/types.ts` | Frontend message types |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/useClaude.ts` | WS hook |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/index.tsx` | Screen entry |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/ChatPanel.tsx` | Chat UI |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/MessageBubble.tsx` | Message renderer |
| New | `src/apps/officer-web/Screens/Dashboard/Claude/ToolActivity.tsx` | Tool call display |
| Edit | `src/apps/officer-web/App.tsx` | `/claude` route |
| Edit | `src/apps/officer-web/Screens/Dashboard/Layout.tsx` | Nav link |
| New | `src/servers/api/plans/plans.ts` | Plans API endpoint |
| New | `src/apps/officer-web/Screens/Dashboard/Plans/index.tsx` | Plans page |
| New | `plans/claude-web-interface.md` | This file |