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>

frontend/src/App.jsx

@@ -0,0 +1,98 @@
+import { useState, useRef, useEffect } from 'react';
+import { useClaudeSession } from './hooks/useClaudeSession';
+import { MessageList } from './components/MessageList';
+import { ChatInput } from './components/ChatInput';
+import { Sidebar } from './components/Sidebar';
+import { Header } from './components/Header';
+
+function App() {
+  const {
+    connected,
+    sessionActive,
+    messages,
+    currentProject,
+    isProcessing,
+    error,
+    startSession,
+    sendMessage,
+    stopSession,
+    clearMessages,
+    setError
+  } = useClaudeSession();
+
+  const [selectedProject, setSelectedProject] = useState('/projects/claude-web-ui');
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [resumeSession, setResumeSession] = useState(true);
+
+  const handleStartSession = () => {
+    startSession(selectedProject, resumeSession);
+  };
+
+  const handleSendMessage = (message) => {
+    if (message.trim()) {
+      sendMessage(message);
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-dark-950">
+      {/* Sidebar */}
+      <Sidebar
+        open={sidebarOpen}
+        onToggle={() => setSidebarOpen(!sidebarOpen)}
+        selectedProject={selectedProject}
+        onSelectProject={setSelectedProject}
+        sessionActive={sessionActive}
+        onStartSession={handleStartSession}
+        onStopSession={stopSession}
+        onClearMessages={clearMessages}
+        resumeSession={resumeSession}
+        onToggleResume={() => setResumeSession(!resumeSession)}
+      />
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        <Header
+          connected={connected}
+          sessionActive={sessionActive}
+          currentProject={currentProject}
+          isProcessing={isProcessing}
+          onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
+        />
+
+        {/* Error Banner */}
+        {error && (
+          <div className="bg-red-900/50 border-b border-red-800 px-4 py-2 flex justify-between items-center">
+            <span className="text-red-200 text-sm">{error}</span>
+            <button
+              onClick={() => setError(null)}
+              className="text-red-400 hover:text-red-300"
+            >
+              ×
+            </button>
+          </div>
+        )}
+
+        {/* Messages */}
+        <MessageList messages={messages} isProcessing={isProcessing} />
+
+        {/* Input */}
+        <ChatInput
+          onSend={handleSendMessage}
+          disabled={!sessionActive || isProcessing}
+          placeholder={
+            !connected
+              ? 'Connecting...'
+              : !sessionActive
+              ? 'Start a session to begin'
+              : isProcessing
+              ? 'Claude is thinking...'
+              : 'Type your message...'
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;