platform/plans/claude-web-interface.md

Claude Code Web Interface

Status: In Progress

Steps

• Step 0 — Plans page (meta: view this document in the browser)
• Step 1 — Install Claude Agent SDK (@anthropic-ai/claude-agent-sdk)
• Step 2 — WebSocket message protocol types (src/servers/api/claude/types.ts)
• Step 3 — WebSocket bridge server (src/servers/api/claude/websocket.ts)
• Step 4 — Wire WebSocket into server.tsx (JWT auth on upgrade)
• Step 5 — Frontend hook useClaude (WS connection, state, streaming)
• Step 6 — UI components (ChatPanel, MessageBubble, ToolActivity)
• 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