feat: wire AI chat page and update card

frontend/src/data/sample.js

@@ -127,8 +127,8 @@ export function fallbackServices() {
       category: "ai",
       summary: "LLM chat (public beta)",
       link: "/ai",
-      host: "bstein.dev/ai",
-      status: "beta",
+      host: "chat.ai.bstein.dev",
+      status: "live",
     },
       {
         name: "AI Image",

frontend/src/views/AiView.vue

@@ -5,8 +5,8 @@
         <p class="eyebrow">Atlas AI</p>
         <h1>Chat</h1>
         <p class="lede">
-          Lightweight LLM running on titan-24 (RTX 3080, 8GB). Anyone can chat without auth. Responses are single-turn per
-          send; the client sends the on-page history with every request.
+          Lightweight LLM running on titan-24 (RTX 3080, 8GB). Anyone can chat without auth. The client streams responses and
+          shows round-trip latency for each turn.
         </p>
         <div class="pill mono pill-live">Online</div>
       </div>
@@ -21,7 +21,7 @@
         </div>
         <div class="fact">
           <span class="label mono">Endpoint</span>
-          <span class="value mono">/api/ai/chat</span>
+          <span class="value mono">{{ apiHost }}</span>
         </div>
       </div>
     </section>
@@ -29,10 +29,11 @@
     <section class="card chat-card">
       <div class="chat-window" ref="chatWindow">
         <div v-for="(msg, idx) in messages" :key="idx" :class="['chat-row', msg.role]">
-          <div class="bubble">
+          <div class="bubble" :class="{ streaming: msg.streaming }">
             <div class="role mono">{{ msg.role === 'assistant' ? 'ai' : 'you' }}</div>
             <p>{{ msg.content }}</p>
-            <div v-if="msg.latency_ms" class="meta mono">{{ msg.latency_ms }} ms</div>
+            <div v-if="msg.streaming" class="meta mono typing">streaming…</div>
+            <div v-else-if="msg.latency_ms" class="meta mono">{{ msg.latency_ms }} ms</div>
           </div>
         </div>
         <div v-if="error" class="chat-row error">
@@ -72,6 +73,10 @@
 <script setup>
 import { onUpdated, ref } from "vue";
 
+const API_URL = (import.meta.env.VITE_AI_ENDPOINT || "/api/ai/chat").trim();
+const apiHost = new URL(API_URL, window.location.href).host + new URL(API_URL, window.location.href).pathname;
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
 const messages = ref([
   {
     role: "assistant",
@@ -96,30 +101,67 @@ async function sendMessage() {
   error.value = "";
   const userEntry = { role: "user", content: text };
   messages.value.push(userEntry);
+  const assistantEntry = { role: "assistant", content: "", streaming: true };
+  messages.value.push(assistantEntry);
   sending.value = true;
 
   try {
-    const history = messages.value.map((m) => ({ role: m.role, content: m.content }));
-    const resp = await fetch("/api/ai/chat", {
+    const history = messages.value.filter((m) => !m.streaming).map((m) => ({ role: m.role, content: m.content }));
+    const start = performance.now();
+    const resp = await fetch(API_URL, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ message: text, history }),
     });
-    const data = await resp.json();
-    if (!resp.ok || data.error) {
-      throw new Error(data.error || "Request failed");
+    const contentType = resp.headers.get("content-type") || "";
+
+    if (!resp.ok) {
+      const data = await resp.json().catch(() => ({}));
+      throw new Error(data.error || resp.statusText || "Request failed");
+    }
+
+    // Prefer streaming if the server sends a stream; otherwise fall back to JSON body.
+    if (resp.body && !contentType.includes("application/json")) {
+      const reader = resp.body.getReader();
+      const decoder = new TextDecoder();
+      let firstChunk = true;
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value, { stream: true });
+        assistantEntry.content += chunk;
+        if (firstChunk) {
+          assistantEntry.latency_ms = Math.round(performance.now() - start);
+          firstChunk = false;
+        }
+      }
+      assistantEntry.latency_ms = assistantEntry.latency_ms || Math.round(performance.now() - start);
+      assistantEntry.streaming = false;
+    } else {
+      const data = await resp.json();
+      const textReply = data.reply || "(empty response)";
+      assistantEntry.latency_ms = data.latency_ms ?? Math.round(performance.now() - start);
+      await typeReveal(assistantEntry, textReply);
     }
-    messages.value.push({
-      role: "assistant",
-      content: data.reply || "(empty response)",
-      latency_ms: data.latency_ms,
-    });
   } catch (err) {
     error.value = err.message || "Unexpected error";
+    assistantEntry.content = assistantEntry.content || "(no response)";
+    assistantEntry.streaming = false;
   } finally {
     sending.value = false;
   }
 }
+
+async function typeReveal(entry, text) {
+  entry.content = "";
+  entry.streaming = true;
+  const chunks = text.match(/.{1,14}/g) || [text];
+  for (const chunk of chunks) {
+    entry.content += chunk;
+    await sleep(15);
+  }
+  entry.streaming = false;
+}
 </script>
 
 <style scoped>
@@ -195,6 +237,10 @@ async function sendMessage() {
   border: 1px solid var(--card-border);
   background: rgba(255, 255, 255, 0.04);
 }
+.bubble.streaming {
+  border-color: rgba(0, 229, 197, 0.4);
+  box-shadow: var(--glow-soft);
+}
 
 .chat-row.assistant .bubble {
   background: rgba(80, 163, 255, 0.08);
@@ -220,6 +266,9 @@ async function sendMessage() {
   font-size: 12px;
   margin-top: 6px;
 }
+.meta.typing {
+  color: var(--accent-cyan);
+}
 
 .chat-form {
   margin-top: 12px;