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:
37
frontend/Dockerfile
Normal file
37
frontend/Dockerfile
Normal file
@@ -0,0 +1,37 @@
|
||||
# Build stage
|
||||
FROM node:20-slim AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Build args for environment variables
|
||||
ARG VITE_WS_URL
|
||||
ARG VITE_API_URL
|
||||
|
||||
# Set as environment variables for build
|
||||
ENV VITE_WS_URL=$VITE_WS_URL
|
||||
ENV VITE_API_URL=$VITE_API_URL
|
||||
|
||||
# Copy package files
|
||||
COPY package*.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm install
|
||||
|
||||
# Copy source
|
||||
COPY . .
|
||||
|
||||
# Build the app
|
||||
RUN npm run build
|
||||
|
||||
# Production stage
|
||||
FROM nginx:alpine
|
||||
|
||||
# Copy built files
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
|
||||
# Copy nginx config
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
Reference in New Issue
Block a user