feat: Phase 2 웹 UI — Dashboard + Chat 페이지

- hub-web: Vite + React + Tailwind + React Router
- Dashboard: 백엔드 상태 카드, GPU 모니터, 모델 테이블 (15초 자동 갱신)
- Chat: 모델 선택 드롭다운 + SSE 스트리밍 + Markdown 렌더링
- Login: 비밀번호 인증 (httpOnly 쿠키)
- Docker: nginx 기반 정적 서빙 + Caddy 연동
- Caddyfile: flush_interval -1 (SSE 버퍼링 방지)
- proxy_ollama: embed usage 더미값 0→1 (SDK 호환)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hub-web/src/App.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, NavLink } from 'react-router-dom';
+import { AuthCtx } from './lib/auth';
+import { getMe, logout } from './lib/api';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import Chat from './pages/Chat';
+
+export default function App() {
+  const [role, setRole] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    getMe().then(me => {
+      setRole(me?.role ?? null);
+      setLoading(false);
+    });
+  }, []);
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-screen text-[hsl(var(--muted-foreground))]">Loading...</div>;
+  }
+
+  if (!role) {
+    return (
+      <AuthCtx.Provider value={{ role, setRole }}>
+        <Login />
+      </AuthCtx.Provider>
+    );
+  }
+
+  return (
+    <AuthCtx.Provider value={{ role, setRole }}>
+      <BrowserRouter>
+        <div className="min-h-screen flex flex-col dark">
+          <nav className="border-b border-[hsl(var(--border))] px-6 py-3 flex items-center gap-6">
+            <span className="font-semibold text-lg">AI Gateway</span>
+            <NavLink to="/" className={({ isActive }) => isActive ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'}>Dashboard</NavLink>
+            <NavLink to="/chat" className={({ isActive }) => isActive ? 'text-[hsl(var(--foreground))]' : 'text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'}>Chat</NavLink>
+            <div className="ml-auto flex items-center gap-3">
+              <span className="text-sm text-[hsl(var(--muted-foreground))]">{role}</span>
+              <button
+                onClick={async () => { await logout(); setRole(null); }}
+                className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+              >
+                Logout
+              </button>
+            </div>
+          </nav>
+          <main className="flex-1">
+            <Routes>
+              <Route path="/" element={<Dashboard />} />
+              <Route path="/chat" element={<Chat />} />
+              <Route path="*" element={<Navigate to="/" />} />
+            </Routes>
+          </main>
+        </div>
+      </BrowserRouter>
+    </AuthCtx.Provider>
+  );
+}

hub-web/src/index.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --border: 240 5.9% 90%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --destructive: 0 84.2% 60.2%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --border: 240 3.7% 15.9%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --destructive: 0 62.8% 30.6%;
+  --ring: 240 4.9% 83.9%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  margin: 0;
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: system-ui, -apple-system, sans-serif;
+}

hub-web/src/lib/api.ts

@@ -0,0 +1,112 @@
+const BASE = '';
+
+export async function login(password: string): Promise<{ role: string; token: string }> {
+  const res = await fetch(`${BASE}/auth/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ password }),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => null);
+    throw new Error(err?.error?.message || 'Login failed');
+  }
+  return res.json();
+}
+
+export async function getMe(): Promise<{ role: string } | null> {
+  const res = await fetch(`${BASE}/auth/me`, { credentials: 'include' });
+  if (!res.ok) return null;
+  return res.json();
+}
+
+export async function logout(): Promise<void> {
+  await fetch(`${BASE}/auth/logout`, { method: 'POST', credentials: 'include' });
+}
+
+export interface Model {
+  id: string;
+  owned_by: string;
+  capabilities: string[];
+  backend_id: string;
+  backend_status: string;
+}
+
+export async function getModels(): Promise<Model[]> {
+  const res = await fetch(`${BASE}/v1/models`, { credentials: 'include' });
+  if (!res.ok) return [];
+  const data = await res.json();
+  return data.data || [];
+}
+
+export interface BackendHealth {
+  id: string;
+  type: string;
+  status: string;
+  models: string[];
+  latency_ms: number;
+}
+
+export interface GpuInfo {
+  utilization: number;
+  temperature: number;
+  vram_used: number;
+  vram_total: number;
+  power_draw: number;
+  name: string;
+}
+
+export async function getHealth(): Promise<{ backends: BackendHealth[]; gpu: GpuInfo | null }> {
+  const res = await fetch(`${BASE}/health`);
+  if (!res.ok) return { backends: [], gpu: null };
+  return res.json();
+}
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+}
+
+export async function* streamChat(
+  model: string,
+  messages: ChatMessage[],
+): AsyncGenerator<string, void> {
+  const res = await fetch(`${BASE}/v1/chat/completions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ model, messages, stream: true }),
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => null);
+    throw new Error(err?.error?.message || `Chat failed: ${res.status}`);
+  }
+
+  const reader = res.body?.getReader();
+  if (!reader) throw new Error('No response body');
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    buffer += decoder.decode(value, { stream: true });
+    const lines = buffer.split('\n');
+    buffer = lines.pop() || '';
+
+    for (const line of lines) {
+      if (!line.startsWith('data: ')) continue;
+      const data = line.slice(6).trim();
+      if (data === '[DONE]') return;
+      try {
+        const parsed = JSON.parse(data);
+        const content = parsed.choices?.[0]?.delta?.content;
+        if (content) yield content;
+      } catch {
+        // skip malformed chunks
+      }
+    }
+  }
+}

hub-web/src/lib/auth.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export interface AuthContext {
+  role: string | null;
+  setRole: (role: string | null) => void;
+}
+
+export const AuthCtx = createContext<AuthContext>({ role: null, setRole: () => {} });
+
+export function useAuth() {
+  return useContext(AuthCtx);
+}

hub-web/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

hub-web/src/pages/Chat.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect, useRef } from 'react';
+import ReactMarkdown from 'react-markdown';
+import type { Model, ChatMessage } from '../lib/api';
+import { getModels, streamChat } from '../lib/api';
+
+export default function Chat() {
+  const [models, setModels] = useState<Model[]>([]);
+  const [selectedModel, setSelectedModel] = useState('');
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [streaming, setStreaming] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    getModels().then(mdls => {
+      const chatModels = mdls.filter(m => m.capabilities.includes('chat'));
+      setModels(chatModels);
+      if (chatModels.length > 0 && !selectedModel) {
+        setSelectedModel(chatModels[0].id);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSend = async () => {
+    if (!input.trim() || !selectedModel || streaming) return;
+
+    const userMsg: ChatMessage = { role: 'user', content: input.trim() };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setInput('');
+    setStreaming(true);
+
+    const assistantMsg: ChatMessage = { role: 'assistant', content: '' };
+    setMessages([...newMessages, assistantMsg]);
+
+    try {
+      for await (const chunk of streamChat(selectedModel, newMessages)) {
+        assistantMsg.content += chunk;
+        setMessages(prev => [...prev.slice(0, -1), { ...assistantMsg }]);
+      }
+    } catch (err) {
+      assistantMsg.content += `\n\n[Error: ${err instanceof Error ? err.message : 'Unknown error'}]`;
+      setMessages(prev => [...prev.slice(0, -1), { ...assistantMsg }]);
+    } finally {
+      setStreaming(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-[calc(100vh-57px)]">
+      {/* Header */}
+      <div className="border-b border-[hsl(var(--border))] px-6 py-3 flex items-center gap-4">
+        <select
+          value={selectedModel}
+          onChange={e => setSelectedModel(e.target.value)}
+          className="px-3 py-1.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-sm"
+        >
+          {models.map(m => (
+            <option key={m.id} value={m.id}>{m.id} ({m.owned_by})</option>
+          ))}
+        </select>
+        <button
+          onClick={() => setMessages([])}
+          className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+        >
+          Clear
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+        {messages.length === 0 && (
+          <div className="flex items-center justify-center h-full text-[hsl(var(--muted-foreground))]">
+            Send a message to start
+          </div>
+        )}
+        {messages.map((msg, i) => (
+          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[80%] rounded-lg px-4 py-2 ${
+              msg.role === 'user'
+                ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]'
+                : 'bg-[hsl(var(--muted))]'
+            }`}>
+              {msg.role === 'assistant' ? (
+                <div className="prose prose-sm prose-invert max-w-none">
+                  <ReactMarkdown>{msg.content || '...'}</ReactMarkdown>
+                </div>
+              ) : (
+                <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+              )}
+            </div>
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-[hsl(var(--border))] px-6 py-4">
+        <div className="flex gap-3">
+          <textarea
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a message... (Enter to send, Shift+Enter for newline)"
+            rows={1}
+            className="flex-1 px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))] resize-none focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]"
+          />
+          <button
+            onClick={handleSend}
+            disabled={streaming || !input.trim()}
+            className="px-4 py-2 rounded-md bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:opacity-90 disabled:opacity-50"
+          >
+            {streaming ? '...' : 'Send'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

hub-web/src/pages/Dashboard.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import type { BackendHealth, GpuInfo, Model } from '../lib/api';
+import { getHealth, getModels } from '../lib/api';
+
+export default function Dashboard() {
+  const [backends, setBackends] = useState<BackendHealth[]>([]);
+  const [gpu, setGpu] = useState<GpuInfo | null>(null);
+  const [models, setModels] = useState<Model[]>([]);
+
+  const refresh = async () => {
+    const [health, mdls] = await Promise.all([getHealth(), getModels()]);
+    setBackends(health.backends);
+    setGpu(health.gpu);
+    setModels(mdls);
+  };
+
+  useEffect(() => {
+    refresh();
+    const id = setInterval(refresh, 15000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Backends</h2>
+        <button onClick={refresh} className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">Refresh</button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {backends.map(b => (
+          <div key={b.id} className="rounded-lg border border-[hsl(var(--border))] p-4 space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="font-medium">{b.id}</span>
+              <span className={`text-xs px-2 py-0.5 rounded-full ${b.status === 'healthy' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
+                {b.status}
+              </span>
+            </div>
+            <div className="text-sm text-[hsl(var(--muted-foreground))]">{b.type}</div>
+            <div className="text-sm">{b.models.join(', ')}</div>
+            {b.latency_ms > 0 && <div className="text-xs text-[hsl(var(--muted-foreground))]">{b.latency_ms}ms</div>}
+          </div>
+        ))}
+      </div>
+
+      {gpu && (
+        <>
+          <h2 className="text-xl font-semibold">GPU</h2>
+          <div className="rounded-lg border border-[hsl(var(--border))] p-4 grid grid-cols-2 md:grid-cols-4 gap-4">
+            <Stat label="Utilization" value={`${gpu.utilization}%`} />
+            <Stat label="Temperature" value={`${gpu.temperature}C`} />
+            <Stat label="VRAM" value={`${gpu.vram_used}/${gpu.vram_total} MB`} />
+            <Stat label="Power" value={`${gpu.power_draw}W`} />
+          </div>
+        </>
+      )}
+
+      <h2 className="text-xl font-semibold">Models</h2>
+      <div className="rounded-lg border border-[hsl(var(--border))] overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-[hsl(var(--muted))]">
+            <tr>
+              <th className="text-left px-4 py-2">Model</th>
+              <th className="text-left px-4 py-2">Backend</th>
+              <th className="text-left px-4 py-2">Capabilities</th>
+              <th className="text-left px-4 py-2">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {models.map(m => (
+              <tr key={`${m.backend_id}-${m.id}`} className="border-t border-[hsl(var(--border))]">
+                <td className="px-4 py-2 font-mono">{m.id}</td>
+                <td className="px-4 py-2">{m.owned_by}</td>
+                <td className="px-4 py-2">{m.capabilities.join(', ')}</td>
+                <td className="px-4 py-2">
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${m.backend_status === 'healthy' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'}`}>
+                    {m.backend_status}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-xs text-[hsl(var(--muted-foreground))]">{label}</div>
+      <div className="text-lg font-semibold">{value}</div>
+    </div>
+  );
+}

hub-web/src/pages/Login.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { login } from '../lib/api';
+import { useAuth } from '../lib/auth';
+
+export default function Login() {
+  const { setRole } = useAuth();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+    try {
+      const { role } = await login(password);
+      setRole(role);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Login failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="dark flex items-center justify-center min-h-screen bg-[hsl(var(--background))]">
+      <form onSubmit={handleSubmit} className="w-80 space-y-4">
+        <h1 className="text-2xl font-semibold text-center text-[hsl(var(--foreground))]">AI Gateway</h1>
+        <input
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          placeholder="Password"
+          autoFocus
+          className="w-full px-3 py-2 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]"
+        />
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full px-3 py-2 rounded-md bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:opacity-90 disabled:opacity-50"
+        >
+          {loading ? 'Logging in...' : 'Login'}
+        </button>
+        {error && <p className="text-sm text-[hsl(var(--destructive))] text-center">{error}</p>}
+      </form>
+    </div>
+  );
+}