Upload 5 files

README.md

@@ -1,12 +1,50 @@
 ---
-title: Fetch Pup Demo
-emoji: 📉
-colorFrom: red
-colorTo: purple
+title: This is Fetch
+emoji: 🐕
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
-license: mit
-short_description: Dog-loving BlenderBot. Zero-backend static showcase
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# This is Fetch
+
+A friendly chatbot with a soft spot for dogs.
+
+This is the **terminal** design variant, deployed as a HuggingFace Static
+Space. It runs entirely in the browser — no GPU, no Python, no backend.
+
+## How it works
+
+Fetch answers using the same logic as the original Python reference:
+
+- A small **keyword lookup** table (dogs, breeds, care, trivia, reactions).
+  If the user's question contains a known keyword, the matching fact is
+  returned verbatim.
+- Three **fallback replies** cover the "I don't know" case.
+- **Four-turn context** is kept in memory for the session.
+
+The generative path (BlenderBot-400M-distill in the original, or an
+LLM-backed helper in the Claude preview) is intentionally disabled in this
+static build. Static Spaces don't run Python or serve models, so the
+deterministic keyword-lookup path is the honest option here.
+
+If you want the generative version, deploy the original `app.py` to a
+Gradio Space instead (`sdk: gradio`, CPU hardware is fine).
+
+## Files
+
+- `index.html` — app shell, loads React + Babel, mounts the terminal variant
+- `chat-engine.jsx` — keyword lookup, fallbacks, suggestion rotator, chat hook
+- `variant-terminal.jsx` — the terminal CLI-style UI
+- `debug-panel.jsx` — optional ⌘D devtools panel (exchange log, keyword table)
+
+## Keyboard
+
+- **⌘K / Ctrl+K** — clear the conversation
+- **⌘D / Ctrl+D** — toggle the devtools panel
+
+## Credits
+
+Design and frontend: a set of explorations for *This is Fetch*.
+Reference model: [facebook/blenderbot-400M-distill](https://huggingface.co/facebook/blenderbot-400M-distill).

chat-engine.jsx

@@ -0,0 +1,174 @@
+// chat-engine.jsx — shared chat logic for all Fetch variants.
+// Mirrors the Python reference: 4-turn context, keyword lookup, fallbacks.
+// Two backends: "claude" (window.claude.complete) and "local" (keyword
+// lookup + fallback only — the path HuggingFace Static Spaces will take).
+
+const KNOWLEDGE_BASE = [
+  ["domesticate", "Dogs have been domesticated for at least 15,000 years, making them the oldest domesticated animal."],
+  ["skills",      "Dogs can understand up to 250 words and gestures, and can count up to 5."],
+  ["border collie","Border Collies are considered the most intelligent dog breed, capable of learning a new command in under 5 seconds."],
+  ["greyhound",   "Greyhounds can reach speeds of up to 45 mph, yet are famously calm and lazy indoors."],
+  ["exercise",    "Dogs need mental stimulation as much as physical exercise. A bored dog is often a destructive dog."],
+  ["dental",      "Regular dental care is one of the most overlooked aspects of dog health. Most dogs show signs of dental disease by age 3."],
+  ["bark",        "The Basenji is the only dog breed that doesn't bark... it yodels."],
+  ["smell",       "Dogs have a sense of smell estimated to be 10,000 to 100,000 times more acute than humans."],
+  ["dream",       "Dogs dream just like humans do. Research suggests they replay their day while sleeping, and smaller breeds tend to dream more frequently than larger ones."],
+  ["woof",        "Did someone say woof? You speak my language."],
+  ["good boi",    "That would be me, obviously."],
+  ["walk",        "Did anybody say walk? I'm in."],
+];
+
+const FALLBACKS = [
+  "I don't know, but I'd bet a dog would!",
+  "Good question! I need more dog facts for that one.",
+  "I'm not sure about that, but dogs are great!",
+];
+
+const SUGGESTIONS = [
+  "Tell me about border collies",
+  "How good is a dog's sense of smell?",
+  "Do dogs dream?",
+  "Why is dental care important?",
+  "What's the fastest dog?",
+  "How long have dogs been domesticated?",
+  "Do all dogs bark?",
+  "Is my dog bored?",
+];
+
+const INITIAL_GREETING = "Hi there! Ask me something simple, ideally about dogs.";
+
+function retrieveFact(query) {
+  const q = (query || "").toLowerCase();
+  for (const [keyword, fact] of KNOWLEDGE_BASE) {
+    if (q.includes(keyword)) return { keyword, fact };
+  }
+  return null;
+}
+
+function pickFallback() {
+  return FALLBACKS[Math.floor(Math.random() * FALLBACKS.length)];
+}
+
+// Build a BlenderBot-style prompt so the "claude" backend produces responses
+// in the same voice the Python reference targeted.
+function buildPrompt(history, userInput, fact, personality) {
+  const lastFour = history.slice(-4);
+  const lines = lastFour.map(m => `${m.role === "user" ? "User" : "Bot"}: ${m.content}`);
+  if (fact) lines.unshift(fact.fact);
+  lines.push(`User: ${userInput}`);
+  const toneByLevel = {
+    subtle:  "Keep the dog references light; answer the question plainly.",
+    medium:  "Be warm and playful, with a clear dog-lover streak.",
+    loud:    "Go full dog mode: enthusiastic, tail-wagging, lots of 'woof' energy.",
+  };
+  const tone = toneByLevel[personality] || toneByLevel.subtle;
+  return (
+    "You are Fetch, a friendly dog-loving chatbot. "
+    + "Answer in 1–2 short sentences. "
+    + tone + " "
+    + "If a fact is provided above the conversation, weave it naturally into your reply.\n\n"
+    + lines.join("\n")
+    + "\nBot:"
+  );
+}
+
+async function generateReply({ userInput, history, backend, personality }) {
+  const fact = retrieveFact(userInput);
+
+  if (backend === "claude" && typeof window !== "undefined" && window.claude?.complete) {
+    try {
+      const prompt = buildPrompt(history, userInput, fact, personality);
+      const raw = await window.claude.complete(prompt);
+      const text = (raw || "").trim().replace(/^Bot:\s*/i, "").split("\nUser:")[0].trim();
+      if (!text || text.split(/\s+/).length <= 2) {
+        return { text: pickFallback(), fact };
+      }
+      return { text, fact };
+    } catch (err) {
+      console.warn("Fetch: claude backend failed, falling back.", err);
+      // fall through to local path
+    }
+  }
+
+  // Local / offline / HF-static path: keyword fact wins, else fallback.
+  if (fact) return { text: fact.fact, fact };
+  return { text: pickFallback(), fact };
+}
+
+// Hook: owns conversation state + send/clear + rotating suggestions.
+function useFetchChat({ backend = "claude", personality = "subtle" } = {}) {
+  const [messages, setMessages] = React.useState(() => [
+    { id: "m0", role: "assistant", content: INITIAL_GREETING, ts: Date.now() },
+  ]);
+  const [pending, setPending] = React.useState(false);
+  const [debug, setDebug] = React.useState([]);
+  const seq = React.useRef(1);
+
+  const nextId = () => `m${seq.current++}`;
+
+  const send = React.useCallback(async (rawInput) => {
+    const userInput = (rawInput || "").trim();
+    if (!userInput || pending) return;
+
+    const userMsg = { id: nextId(), role: "user", content: userInput, ts: Date.now() };
+    const placeholderId = nextId();
+    const placeholder = { id: placeholderId, role: "assistant", content: "…", pending: true, ts: Date.now() };
+
+    // Snapshot history BEFORE adding the new user message — that's what the
+    // prompt builder should see as prior context.
+    let priorHistory = [];
+    setMessages(prev => { priorHistory = prev; return [...prev, userMsg, placeholder]; });
+    setPending(true);
+
+    const t0 = performance.now();
+    const { text, fact } = await generateReply({
+      userInput,
+      history: priorHistory,
+      backend,
+      personality,
+    });
+    const ms = Math.round(performance.now() - t0);
+
+    setMessages(prev => prev.map(m =>
+      m.id === placeholderId
+        ? { ...m, content: text, pending: false, fact, ts: Date.now() }
+        : m
+    ));
+    setDebug(prev => [
+      { t: Date.now(), user: userInput, reply: text, fact, ms, backend },
+      ...prev,
+    ].slice(0, 20));
+    setPending(false);
+  }, [backend, personality, pending]);
+
+  const reset = React.useCallback(() => {
+    seq.current = 1;
+    setMessages([{ id: "m0", role: "assistant", content: INITIAL_GREETING, ts: Date.now() }]);
+    setDebug([]);
+  }, []);
+
+  return { messages, pending, debug, send, reset };
+}
+
+// Rotating suggestion carousel — 3 chips visible, rotates on interval.
+function useRotatingSuggestions({ visible = 3, intervalMs = 4200 } = {}) {
+  const [offset, setOffset] = React.useState(0);
+  React.useEffect(() => {
+    const id = setInterval(() => setOffset(o => (o + 1) % SUGGESTIONS.length), intervalMs);
+    return () => clearInterval(id);
+  }, [intervalMs]);
+  const current = React.useMemo(() => {
+    const out = [];
+    for (let i = 0; i < visible; i++) out.push(SUGGESTIONS[(offset + i) % SUGGESTIONS.length]);
+    return out;
+  }, [offset, visible]);
+  return current;
+}
+
+Object.assign(window, {
+  useFetchChat,
+  useRotatingSuggestions,
+  retrieveFact,
+  FETCH_KNOWLEDGE_BASE: KNOWLEDGE_BASE,
+  FETCH_SUGGESTIONS: SUGGESTIONS,
+});

debug-panel.jsx

@@ -0,0 +1,143 @@
+// debug-panel.jsx — floating developer panel shared across all variants.
+// Surfaces: recent exchanges, fact-match status, backend, latency, and the
+// full keyword-lookup table from the Python reference.
+
+function DebugPanel({ debug, onClose, palette, font }) {
+  const [tab, setTab] = React.useState("log");
+  return (
+    <div style={{
+      position: "absolute", right: 16, bottom: 16, top: 16,
+      width: 380, maxWidth: "44vw",
+      background: palette.bg, color: palette.fg,
+      border: `1px solid ${palette.muted}`,
+      borderRadius: 10,
+      fontFamily: font, fontSize: 11,
+      display: "flex", flexDirection: "column",
+      boxShadow: "0 10px 30px rgba(0,0,0,.35)",
+      zIndex: 50,
+      overflow: "hidden",
+    }}>
+      <div style={{
+        padding: "8px 12px",
+        borderBottom: `1px solid ${palette.muted}`,
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+      }}>
+        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+          <span style={{ color: palette.accent }}>●</span>
+          <span style={{ letterSpacing: 0.8, textTransform: "uppercase", fontSize: 10 }}>
+            Fetch / devtools
+          </span>
+        </div>
+        <button onClick={onClose} aria-label="Close debug panel" style={{
+          background: "transparent", border: "none", color: palette.dim,
+          cursor: "pointer", fontSize: 14, padding: "0 4px",
+        }}>×</button>
+      </div>
+
+      <div style={{
+        display: "flex", gap: 2,
+        padding: "6px 10px 0",
+        borderBottom: `1px solid ${palette.muted}`,
+      }}>
+        {[
+          { id: "log", label: "Exchanges" },
+          { id: "kb", label: "Keyword table" },
+          { id: "about", label: "About" },
+        ].map(t => (
+          <button key={t.id} onClick={() => setTab(t.id)} style={{
+            background: "transparent",
+            color: tab === t.id ? palette.fg : palette.dim,
+            borderBottom: tab === t.id ? `2px solid ${palette.accent}` : "2px solid transparent",
+            border: "none", borderRadius: 0,
+            padding: "6px 8px",
+            fontFamily: "inherit", fontSize: 11, cursor: "pointer",
+          }}>{t.label}</button>
+        ))}
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: 12 }}>
+        {tab === "log" && <DebugLog debug={debug} palette={palette} />}
+        {tab === "kb" && <DebugKB palette={palette} />}
+        {tab === "about" && <DebugAbout palette={palette} />}
+      </div>
+    </div>
+  );
+}
+
+function DebugLog({ debug, palette }) {
+  if (debug.length === 0) {
+    return (
+      <div style={{ color: palette.dim, fontStyle: "italic", padding: "8px 4px" }}>
+        No exchanges yet. Ask Fetch something.
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      {debug.map((d, i) => (
+        <div key={i} style={{
+          border: `1px solid ${palette.muted}`,
+          borderRadius: 6,
+          padding: 8,
+        }}>
+          <div style={{ color: palette.dim, fontSize: 10, display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
+            <span>{new Date(d.t).toLocaleTimeString()}</span>
+            <span>{d.backend} · {d.ms}ms</span>
+          </div>
+          <div style={{ marginBottom: 4 }}>
+            <span style={{ color: palette.dim }}>user&gt; </span>
+            {d.user}
+          </div>
+          <div style={{ marginBottom: 4 }}>
+            <span style={{ color: palette.accent }}>reply&gt; </span>
+            {d.reply}
+          </div>
+          <div style={{ color: palette.dim, fontSize: 10 }}>
+            fact: {d.fact ? <span style={{ color: palette.accent }}>matched "{d.fact.keyword}"</span> : "none"}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DebugKB({ palette }) {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <div style={{ color: palette.dim, marginBottom: 4 }}>
+        {FETCH_KNOWLEDGE_BASE.length} keywords · first match wins
+      </div>
+      {FETCH_KNOWLEDGE_BASE.map(([k, v]) => (
+        <div key={k} style={{
+          border: `1px solid ${palette.muted}`,
+          borderRadius: 6,
+          padding: 8,
+        }}>
+          <div style={{ color: palette.accent, marginBottom: 3 }}>{k}</div>
+          <div style={{ color: palette.fg, lineHeight: 1.4 }}>{v}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DebugAbout({ palette }) {
+  return (
+    <div style={{ lineHeight: 1.6, color: palette.fg }}>
+      <div style={{ color: palette.dim, marginBottom: 8 }}>Fetch — a friendly dog-loving chatbot.</div>
+      <ul style={{ margin: 0, paddingLeft: 16, display: "flex", flexDirection: "column", gap: 4 }}>
+        <li>Reference model: BlenderBot-400M-distill</li>
+        <li>Context window: last 4 turns</li>
+        <li>Keyword lookup: first match prepended to the prompt</li>
+        <li>Fallbacks: 3 canned replies when generation is empty</li>
+        <li>Preview backend: window.claude.complete (Haiku 4.5)</li>
+        <li>HF Static Space fallback: keyword lookup + fallbacks only</li>
+      </ul>
+      <div style={{ marginTop: 10, color: palette.dim, fontSize: 10 }}>
+        Shortcuts: ⌘K clear · ⌘D toggle this panel
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { DebugPanel });

index.html

@@ -1,19 +1,65 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>This is Fetch</title>
+<meta name="description" content="A friendly chatbot with a soft spot for dogs." />
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+<style>
+  html, body { margin: 0; padding: 0; background: #0a0f0a; color: #c8f7c5; height: 100%; }
+  body { font-family: "JetBrains Mono", ui-monospace, monospace; overflow: hidden; }
+  #root { position: fixed; inset: 0; }
+
+  @keyframes fetch-fadein {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fetch-blink {
+    0%, 49% { opacity: 0.8; }
+    50%, 100% { opacity: 0; }
+  }
+  .fetch-blink  { animation: fetch-blink 1s steps(2) infinite; }
+</style>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+
+<div id="root"></div>
+
+<script type="text/babel" src="chat-engine.jsx"></script>
+<script type="text/babel" src="debug-panel.jsx"></script>
+<script type="text/babel" src="variant-terminal.jsx"></script>
+
+<script type="text/babel" data-presets="react">
+// HF Static Space build: terminal variant only, local backend (keyword
+// lookup + fallbacks — no network calls). The "claude" backend is
+// unavailable outside the preview host, so this build pins backend="local".
+const FONT_PAIR = {
+  mono: '"JetBrains Mono", ui-monospace, monospace',
+};
+
+function FetchApp() {
+  return (
+    <TerminalVariant
+      backend="local"
+      personality="subtle"
+      density="comfortable"
+      accent="green"
+      fontPair={FONT_PAIR}
+    />
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<FetchApp />);
+</script>
+
+</body>
 </html>

variant-terminal.jsx

@@ -0,0 +1,248 @@
+// variant-terminal.jsx — Fetch as a retro CLI dog.
+// Full-bleed terminal: `fetch>` prompt, you$ / dog# prefixes, facts shown as
+// dimmed `// fact:` comment lines. Suggestions rotate as tips at bottom.
+
+const termPalettes = {
+  green:  { bg: "#0a0f0a", fg: "#c8f7c5", dim: "#6b8a6b", accent: "#7dfc82", muted: "#3a4a3a" },
+  amber:  { bg: "#120d05", fg: "#f3d488", dim: "#8a7548", accent: "#ffbf47", muted: "#4a3a1a" },
+  mono:   { bg: "#0b0b0c", fg: "#e6e6e6", dim: "#7a7a7a", accent: "#ffffff", muted: "#3a3a3a" },
+};
+
+function TerminalVariant({ backend, personality, density, accent, fontPair, bubble }) {
+  // bubble shape doesn't apply here; density affects line-height.
+  const { messages, pending, debug, send, reset } = useFetchChat({ backend, personality });
+  const suggestions = useRotatingSuggestions({ visible: 3 });
+  const [input, setInput] = React.useState("");
+  const [showDebug, setShowDebug] = React.useState(false);
+  const scrollRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+
+  const palette = termPalettes[accent] || termPalettes.green;
+
+  const lineHeight = density === "compact" ? 1.35 : density === "cozy" ? 1.75 : 1.55;
+  const pad = density === "compact" ? 16 : density === "cozy" ? 32 : 24;
+
+  React.useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages.length, pending]);
+
+  React.useEffect(() => {
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "d") {
+        e.preventDefault();
+        setShowDebug(s => !s);
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        reset();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [reset]);
+
+  const submit = (e) => {
+    e?.preventDefault();
+    const v = input.trim();
+    if (!v || pending) return;
+    setInput("");
+    send(v);
+  };
+
+  const quickSend = (text) => {
+    if (pending) return;
+    send(text);
+  };
+
+  return (
+    <div style={{
+      position: "absolute", inset: 0,
+      background: palette.bg, color: palette.fg,
+      fontFamily: fontPair.mono,
+      fontSize: 14, lineHeight,
+      display: "flex", flexDirection: "column",
+      overflow: "hidden",
+    }}>
+      <header style={{
+        display: "flex", alignItems: "center", justifyContent: "space-between",
+        padding: `10px ${pad}px`,
+        borderBottom: `1px solid ${palette.muted}`,
+        color: palette.dim, fontSize: 12,
+      }}>
+        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+          <span style={{ color: palette.accent }}>◉</span>
+          <span>fetch — blenderbot-400M-distill — 4-turn context</span>
+        </div>
+        <div style={{ display: "flex", gap: 16 }}>
+          <button onClick={reset} style={termBtn(palette)}>clear ⌘K</button>
+          <button onClick={() => setShowDebug(s => !s)} style={termBtn(palette)}>
+            debug ⌘D
+          </button>
+        </div>
+      </header>
+
+      <div ref={scrollRef} style={{
+        flex: 1, overflowY: "auto",
+        padding: `${pad}px ${pad * 1.5}px`,
+        scrollbarWidth: "thin", scrollbarColor: `${palette.muted} transparent`,
+      }}>
+        <pre style={{
+          margin: 0, fontFamily: "inherit", color: palette.dim,
+          whiteSpace: "pre-wrap", marginBottom: 16,
+        }}>
+{`// this is fetch — a friendly dog-loving chatbot
+// type a question and hit enter. try "tell me about border collies".
+// shortcuts: ⌘K clear · ⌘D debug
+`}
+        </pre>
+
+        {messages.filter(m => !m.pending).map((m) => (
+          <TerminalLine
+            key={m.id}
+            msg={m}
+            palette={palette}
+          />
+        ))}
+        {pending && <BlinkingCursor palette={palette} label="fetching an answer" />}
+      </div>
+
+      <form onSubmit={submit} style={{
+        padding: `${pad - 4}px ${pad * 1.5}px ${pad}px`,
+        borderTop: `1px solid ${palette.muted}`,
+        display: "flex", flexDirection: "column", gap: 10,
+      }}>
+        <SuggestionsRow
+          suggestions={suggestions}
+          onPick={quickSend}
+          palette={palette}
+          pending={pending}
+        />
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <span style={{ color: palette.accent, userSelect: "none" }}>fetch&gt;</span>
+          <input
+            ref={inputRef}
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            placeholder={pending ? "…waiting on dog" : "ask something"}
+            autoFocus
+            disabled={pending}
+            style={{
+              flex: 1, background: "transparent", border: "none", outline: "none",
+              color: palette.fg, fontFamily: "inherit", fontSize: 14, caretColor: palette.accent,
+            }}
+          />
+          <button type="submit" disabled={pending || !input.trim()} style={{
+            ...termBtn(palette),
+            color: palette.accent, borderColor: palette.accent,
+            opacity: pending || !input.trim() ? 0.4 : 1,
+          }}>↵ send</button>
+        </div>
+      </form>
+
+      {showDebug && (
+        <DebugPanel
+          debug={debug}
+          onClose={() => setShowDebug(false)}
+          palette={{ bg: palette.bg, fg: palette.fg, dim: palette.dim, accent: palette.accent, muted: palette.muted }}
+          font={fontPair.mono}
+        />
+      )}
+    </div>
+  );
+}
+
+function termBtn(p) {
+  return {
+    background: "transparent",
+    color: p.dim,
+    border: `1px solid ${p.muted}`,
+    padding: "3px 8px",
+    borderRadius: 4,
+    fontFamily: "inherit",
+    fontSize: 11,
+    cursor: "pointer",
+    letterSpacing: 0.3,
+  };
+}
+
+function TerminalLine({ msg, palette }) {
+  const isUser = msg.role === "user";
+  const prefix = isUser ? "you$" : "dog#";
+  const color = isUser ? palette.fg : palette.accent;
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    const id = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  return (
+    <div style={{
+      marginBottom: 10,
+      opacity: mounted ? 1 : 0,
+      transform: mounted ? "translateY(0)" : "translateY(4px)",
+      transition: "opacity .18s ease, transform .18s ease",
+    }}>
+      {!isUser && msg.fact && !msg.pending && (
+        <div style={{ color: palette.dim, fontStyle: "italic", marginBottom: 2 }}>
+          {`// fact matched: "${msg.fact.keyword}"`}
+        </div>
+      )}
+      <div>
+        <span style={{ color: palette.dim, userSelect: "none" }}>{prefix} </span>
+        <span style={{ color, whiteSpace: "pre-wrap" }}>
+          {msg.pending ? <DotDotDot palette={palette} /> : msg.content}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function DotDotDot({ palette }) {
+  const [n, setN] = React.useState(1);
+  React.useEffect(() => {
+    const id = setInterval(() => setN(x => (x % 3) + 1), 380);
+    return () => clearInterval(id);
+  }, []);
+  return <span style={{ color: palette.dim }}>{".".repeat(n)}</span>;
+}
+
+function BlinkingCursor({ palette, label }) {
+  return (
+    <div style={{ color: palette.dim, fontStyle: "italic", marginTop: 4 }}>
+      {label}
+      <span className="fetch-blink" style={{
+        display: "inline-block", width: 8, height: 14, marginLeft: 6,
+        verticalAlign: "middle", background: palette.accent, opacity: 0.7,
+      }}/>
+    </div>
+  );
+}
+
+function SuggestionsRow({ suggestions, onPick, palette, pending }) {
+  return (
+    <div style={{
+      display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center",
+      color: palette.dim, fontSize: 11,
+    }}>
+      <span style={{ opacity: 0.7 }}>try:</span>
+      {suggestions.map((s, i) => (
+        <button
+          key={s}
+          type="button"
+          disabled={pending}
+          onClick={() => onPick(s)}
+          style={{
+            ...termBtn(palette),
+            padding: "2px 8px",
+            fontSize: 11,
+            cursor: pending ? "default" : "pointer",
+            opacity: pending ? 0.5 : 1,
+            animation: `fetch-fadein .4s ease ${i * 60}ms both`,
+          }}
+        >{s}</button>
+      ))}
+    </div>
+  );
+}
+
+Object.assign(window, { TerminalVariant });