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/components/ChatInput.jsx

@@ -0,0 +1,81 @@
+import { useState, useRef, useEffect } from 'react';
+import { Send, Loader2 } from 'lucide-react';
+
+export function ChatInput({ onSend, disabled, placeholder }) {
+  const [message, setMessage] = useState('');
+  const textareaRef = useRef(null);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
+    }
+  }, [message]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim() && !disabled) {
+      onSend(message);
+      setMessage('');
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4 border-t border-dark-800 bg-dark-900">
+      <div className="flex gap-3 items-end max-w-4xl mx-auto">
+        <div className="flex-1 relative">
+          <textarea
+            ref={textareaRef}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            rows={1}
+            className={`
+              w-full bg-dark-800 border border-dark-700 rounded-xl
+              px-4 py-3 pr-12 text-dark-100 placeholder-dark-500
+              focus:outline-none focus:border-orange-500/50 focus:ring-1 focus:ring-orange-500/20
+              resize-none transition-colors
+              ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+            `}
+          />
+          <div className="absolute right-2 bottom-2 text-xs text-dark-600">
+            Shift+Enter for newline
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={disabled || !message.trim()}
+          className={`
+            p-3 rounded-xl transition-all
+            ${disabled || !message.trim()
+              ? 'bg-dark-800 text-dark-600 cursor-not-allowed'
+              : 'bg-orange-600 hover:bg-orange-500 text-white shadow-lg shadow-orange-600/20'
+            }
+          `}
+        >
+          {disabled ? (
+            <Loader2 className="w-5 h-5 animate-spin" />
+          ) : (
+            <Send className="w-5 h-5" />
+          )}
+        </button>
+      </div>
+
+      <div className="text-center mt-2 text-xs text-dark-600">
+        Messages are processed via Claude Code JSON streaming
+      </div>
+    </form>
+  );
+}