50 lines
3.0 KiB
Markdown
50 lines
3.0 KiB
Markdown
# 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 |
|