feat: Claude Web UI POC with streaming and tool visualization

Initial implementation of a web-based Claude Code interface with:

Backend (Node.js + Express + WebSocket):
- Claude CLI spawning with JSON stream mode
- Session management with resume support (--continue flag)
- Session history API endpoint
- Real-time WebSocket communication
- --include-partial-messages for live streaming

Frontend (React + Vite + Tailwind):
- Modern dark theme UI (Discord/Slack style)
- Live text streaming with content_block_delta handling
- Markdown rendering with react-markdown + remark-gfm
- Syntax highlighting with react-syntax-highlighter (One Dark)
- Collapsible high-tech tool cards with:
  - Tool-specific icons and colors
  - Compact summaries (Read, Glob, Bash, Edit, etc.)
  - Expandable JSON details
- Session history loading on resume
- Project directory selection
- Resume session toggle

Docker:
- Multi-container setup (backend + nginx frontend)
- Isolated Claude config directory
- Host network mode for backend

Built collaboratively by Neko (VPS Claude) and Web-UI Claude,
with Web-UI Claude implementing most frontend features while
running inside the interface itself (meta-programming!).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-14 17:32:52 +01:00
commit 52792268fa
23 changed files with 6004 additions and 0 deletions

43
docker-compose.yml Normal file
View File

@@ -0,0 +1,43 @@
services:
backend:
build:
context: ./backend
dockerfile: Dockerfile
container_name: claude-webui-backend
restart: unless-stopped
network_mode: host
volumes:
# Claude CLI binary (read-only from host)
- /home/sumdex/.local/share/claude:/home/node/.local/share/claude:ro
# Separate config for WebUI Claude (NOT Neko's config!)
- ./config/.claude:/home/node/.claude:rw
- ./config/.config/claude:/home/node/.config/claude:rw
# Project directories for Claude to work in
- /home/sumdex/projects:/projects:rw
- /home/sumdex/docker:/docker:rw
- /opt/stacks:/stacks:rw
environment:
- NODE_ENV=production
- HOST=100.105.142.13
- PORT=3001
- PATH=/home/node/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
frontend:
build:
context: ./frontend
dockerfile: Dockerfile
args:
- VITE_WS_URL=ws://100.105.142.13:3001
- VITE_API_URL=http://100.105.142.13:3001
container_name: claude-webui-frontend
restart: unless-stopped
ports:
- "100.105.142.13:3000:80"
depends_on:
- backend
networks:
- claude-webui
networks:
claude-webui:
name: claude-webui