first

2026-02-16 19:34:35 +00:00
commit 9ab0940ca4
784 changed files with 41710 additions and 0 deletions
@@ -0,0 +1,49 @@
+# 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 |