Upload 8 files

static/chat-engine.jsx

@@ -1,8 +1,8 @@
-// chat-engine.jsx — Fetch chat logic.
-// Response pipeline: intent matching → keyword lookup → fallbacks / gradio model.
+// chat-engine.jsx — Fetch Good Boi chat logic.
+// Response pipeline: keyword lookup → docker model / fallbacks.
 // Backends:
 //   "local"  — keyword lookup + fallback only (works offline, no server)
-//   "gradio" — POST /api/chat to the FastAPI backend serving BlenderBot
+//   "docker" — POST /api/chat to the FastAPI backend serving BlenderBot
 
 const KNOWLEDGE_BASE = [
   ["domesticate",  "Dogs have been domesticated for at least 15,000 years, making them the oldest domesticated animal."],
@@ -35,37 +35,6 @@ const FALLBACKS = [
   "I'm not sure about that, but dogs are great!",
 ];
 
-const INTENTS = [
-  {
-    label: "greeting",
-    patterns: [/\b(hi|hello|hey)\b/i, /good (morning|afternoon|evening)/i],
-    response: "Hi! I'm Fetch Pup. Ask me something about dogs, or try the suggestions below.",
-  },
-  {
-    label: "small talk",
-    patterns: [/how are you/i, /how('s| is) it going/i, /what'?s up/i],
-    response: "Tail's wagging, thanks for asking! Got a dog question for me?",
-  },
-  {
-    label: "capability",
-    patterns: [/what can you do/i, /what do you (know|do)/i, /\bhelp\b/i],
-    response: "I know a bunch of dog facts. Ask a question or try the suggestions — I'll do my best.",
-  },
-  {
-    label: "identity",
-    patterns: [/who are you/i, /what are you/i],
-    response: "I'm Fetch Pup — a dog-loving chatbot backed by BlenderBot-400M-distill. I also know my keyword facts!",
-  },
-];
-
-function matchIntent(query) {
-  const q = query || "";
-  for (const intent of INTENTS) {
-    if (intent.patterns.some(p => p.test(q))) return intent;
-  }
-  return null;
-}
-
 const SUGGESTIONS = [
   "Tell me about border collies",
   "How good is a dog's sense of smell?",
@@ -101,7 +70,7 @@ function pickFallback() {
   return FALLBACKS[Math.floor(Math.random() * FALLBACKS.length)];
 }
 
-async function callGradioBackend({ userInput, history }) {
+async function callDockerBackend({ userInput, history }) {
   const trimmed = history.slice(-4).map(m => ({ role: m.role, content: m.content }));
   const res = await fetch("api/chat", {
     method: "POST",
@@ -113,19 +82,16 @@ async function callGradioBackend({ userInput, history }) {
 }
 
 async function generateReply({ userInput, history, backend }) {
-  const intent = matchIntent(userInput);
-  if (intent) return { text: intent.response, fact: null, source: "intent", label: intent.label };
-
   const fact = retrieveFact(userInput);
 
-  if (backend === "gradio") {
+  if (backend === "docker") {
     try {
-      const data = await callGradioBackend({ userInput, history });
+      const data = await callDockerBackend({ userInput, history });
       const text = (data.reply || "").trim();
       if (!text) return { text: pickFallback(), fact, source: "fallback" };
-      return { text, fact: data.fact || fact, source: "gradio" };
+      return { text, fact: data.fact || fact, source: "docker" };
     } catch (err) {
-      console.warn("Fetch: gradio backend failed, using local fallback.", err);
+      console.warn("Fetch: docker backend failed, using local fallback.", err);
     }
   }
 
@@ -162,7 +128,7 @@ function useFetchChat({ backend = "local" } = {}) {
       console.error("Fetch: generateReply failed.", err);
       result = { text: "Something went wrong. Please try again.", fact: null, source: "error" };
     }
-    const { text, fact, source, label } = result;
+    const { text, fact, source } = result;
     const ms = Math.round(performance.now() - t0);
 
     setMessages(prev => prev.map(m =>
@@ -171,7 +137,7 @@ function useFetchChat({ backend = "local" } = {}) {
         : m
     ));
     setDebug(prev => [
-      { t: Date.now(), user: userInput, reply: text, fact, source, label, ms, backend },
+      { t: Date.now(), user: userInput, reply: text, fact, source, ms, backend },
       ...prev,
     ].slice(0, 20));
     setPending(false);
@@ -213,5 +179,4 @@ Object.assign(window, {
   retrieveFact,
   FETCH_KNOWLEDGE_BASE: KNOWLEDGE_BASE,
   FETCH_SUGGESTIONS: SUGGESTIONS,
-  FETCH_INTENTS: INTENTS,
 });

static/debug-panel.jsx

@@ -1,6 +1,6 @@
 // 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.
+// Surfaces: recent turns, source tracking, backend, latency, and the
+// full keyword-lookup table.
 
 function DebugPanel({ debug, onClose, palette, font }) {
   const [tab, setTab] = React.useState("turns");
@@ -25,7 +25,7 @@ function DebugPanel({ debug, onClose, palette, font }) {
         <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
           <span style={{ color: palette.accent }}>●</span>
           <span style={{ letterSpacing: 0.8, textTransform: "uppercase", fontSize: 11 }}>
-            fetch / debug
+            fetch good boi / debug
           </span>
         </div>
         <button onClick={onClose} aria-label="Close debug panel" style={{
@@ -41,7 +41,6 @@ function DebugPanel({ debug, onClose, palette, font }) {
       }}>
         {[
           { id: "turns",    label: "turns" },
-          { id: "intents",  label: "intents" },
           { id: "keywords", label: "keywords" },
           { id: "about",    label: "about" },
         ].map(t => (
@@ -58,7 +57,6 @@ function DebugPanel({ debug, onClose, palette, font }) {
 
       <div style={{ flex: 1, overflowY: "auto", padding: 12 }}>
         {tab === "turns"    && <DebugLog debug={debug} palette={palette} />}
-        {tab === "intents"  && <DebugIntents palette={palette} />}
         {tab === "keywords" && <DebugKB palette={palette} />}
         {tab === "about"    && <DebugAbout palette={palette} />}
       </div>
@@ -70,7 +68,7 @@ function DebugLog({ debug, palette }) {
   if (debug.length === 0) {
     return (
       <div style={{ color: palette.dim, fontStyle: "italic", padding: "8px 4px" }}>
-        No turns yet. Ask Fetch something.
+        No turns yet. Ask Fetch Good Boi something.
       </div>
     );
   }
@@ -82,7 +80,7 @@ function DebugLog({ debug, palette }) {
           borderRadius: 6,
           padding: 8,
         }}>
-          <div style={{ color: palette.dim, fontSize: 11, display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
+          <div style={{ color: palette.dim, fontSize: 12, display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
             <span>{new Date(d.t).toLocaleTimeString()}</span>
             <span>{d.backend} · {d.ms}ms</span>
           </div>
@@ -94,16 +92,14 @@ function DebugLog({ debug, palette }) {
             <span style={{ color: palette.accent }}>reply&gt; </span>
             {d.reply}
           </div>
-          <div style={{ color: palette.dim, fontSize: 11 }}>
+          <div style={{ color: palette.dim, fontSize: 12 }}>
             {"source: "}
             <span style={{
               color: d.source === "error" ? "#ff6b6b"
                    : d.source === "fallback" ? palette.dim
                    : palette.accent,
             }}>
-              {d.source === "fact"   ? `fact · ${d.fact?.keyword}`
-             : d.source === "intent" ? `intent · ${d.label}`
-             : d.source || "unknown"}
+              {d.source === "fact" ? `fact · ${d.fact?.keyword}` : d.source || "unknown"}
             </span>
           </div>
         </div>
@@ -132,32 +128,12 @@ function DebugKB({ palette }) {
   );
 }
 
-function DebugIntents({ palette }) {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <div style={{ color: palette.dim, marginBottom: 4 }}>
-        {FETCH_INTENTS.length} intents · first match wins
-      </div>
-      {FETCH_INTENTS.map(intent => (
-        <div key={intent.label} style={{
-          border: `1px solid ${palette.muted}`,
-          borderRadius: 6,
-          padding: 8,
-        }}>
-          <div style={{ color: palette.accent, marginBottom: 3 }}>{intent.label}</div>
-          <div style={{ color: palette.fg, lineHeight: 1.4 }}>{intent.response}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
 function DebugAbout({ palette }) {
   return (
     <div style={{ lineHeight: 1.6, color: palette.fg, display: "flex", flexDirection: "column", gap: 10 }}>
-      <div>Fetch Pup is a dog-loving chatbot backed by BlenderBot-400M-distill running on CPU.</div>
-      <div>Responses go through an intent matcher first, then a keyword lookup table — if neither matches, the query is sent to the model. Fallbacks cover anything the model returns too short or empty. If the backend fails, the browser falls back to keyword lookup automatically.</div>
-      <div style={{ color: "#e8a87c" }}>First reply may be slow — BlenderBot cold-starts on HuggingFace Spaces. Subsequent replies are faster.</div>
+      <div>Fetch Good Boi is a dog-loving chatbot backed by BlenderBot-400M-distill running on CPU.</div>
+      <div>Responses use a keyword lookup layer — if a fact matches the query, it's prepended to the prompt. BlenderBot then generates a reply within a four-turn context window. Fallbacks cover anything the model returns too short or empty. If the backend fails, the browser falls back to keyword lookup automatically.</div>
+      <div style={{ color: "#e8a87c" }}>Fetch Good Boi runs on CPU, so responses may take a few seconds.</div>
       <div style={{ color: palette.dim }}>Designed with Claude Design · Built with Claude Code</div>
     </div>
   );

static/index.html

@@ -39,7 +39,7 @@
 <script type="text/babel" src="variant-editorial.jsx"></script>
 
 <script type="text/babel" data-presets="react">
-// Gradio build: editorial variant + BlenderBot backend via /api/chat.
+// Docker build: editorial variant + BlenderBot backend via /api/chat.
 // If the backend fails (cold start, timeout) the chat engine falls back
 // to the local keyword lookup automatically.
 const FONT_PAIR = {
@@ -51,8 +51,7 @@ const FONT_PAIR = {
 function FetchApp() {
   return (
     <EditorialVariant
-      backend="gradio"
-      personality="subtle"
+      backend="docker"
       density="comfortable"
       accent="bone"
       fontPair={FONT_PAIR}

static/variant-editorial.jsx

@@ -1,16 +1,16 @@
-// variant-editorial.jsx — Fetch as an editorial reading experience.
+// variant-editorial.jsx — Fetch Good Boi as an editorial reading experience.
 // Centered narrow column, big Instrument Serif title, messages read as
 // paragraphs with slim rules between turns. Single paw glyph as the one
-// dog cue.
+// dog cue. H1 + intro stay sticky; only the conversation scrolls.
 
 const editorialPalettes = {
-  cream:  { bg: "#f8f5ef", paper: "#ffffff", ink: "#1a1714", muted: "#8b857a", rule: "#e6e0d4", accent: "#8a4b2a" },
-  sand:   { bg: "#ece7dc", paper: "#f8f5ef", ink: "#1a1714", muted: "#8b857a", rule: "#d8cfbc", accent: "#4a3a1a" },
-  bone:   { bg: "#eeeae3", paper: "#ffffff", ink: "#1a1714", muted: "#8b857a", rule: "#dcd4c4", accent: "#2a5c4a" },
+  cream: { bg: "#f8f5ef", paper: "#ffffff", ink: "#1a1714", secondary: "#4a4540", muted: "#8b857a", rule: "#e6e0d4", accent: "#8a4b2a" },
+  sand:  { bg: "#ece7dc", paper: "#f8f5ef", ink: "#1a1714", secondary: "#4a4540", muted: "#8b857a", rule: "#d8cfbc", accent: "#4a3a1a" },
+  bone:  { bg: "#eeeae3", paper: "#ffffff", ink: "#1a1714", secondary: "#4a4540", muted: "#8b857a", rule: "#dcd4c4", accent: "#2a5c4a" },
 };
 
-function EditorialVariant({ backend, personality, density, accent, fontPair, bubble }) {
-  const { messages, pending, debug, send, reset } = useFetchChat({ backend, personality });
+function EditorialVariant({ backend, density, accent, fontPair, bubble }) {
+  const { messages, pending, debug, send, reset } = useFetchChat({ backend });
   const suggestions = useRotatingSuggestions({ visible: 3 });
   const [input, setInput] = React.useState("");
   const [showDebug, setShowDebug] = React.useState(false);
@@ -59,71 +59,84 @@ function EditorialVariant({ backend, personality, density, accent, fontPair, bub
     }}>
       <header style={{
         display: "flex", alignItems: "center", justifyContent: "space-between",
-        padding: "18px 32px",
+        padding: "14px 32px",
         color: palette.muted, fontSize: 12, letterSpacing: 1.2, textTransform: "uppercase",
+        flexShrink: 0,
       }}>
         <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
           <PawGlyph size={14} color={palette.accent} />
-          <span>fetch pup · a dog-loving chatbot</span>
+          <span>Fetch Good Boi · a dog-loving BlenderBot</span>
         </div>
-        <div style={{ display: "flex", gap: 18, textTransform: "none", letterSpacing: 0 }}>
-          <button onClick={reset} style={editLink(palette)}>Clear</button>
-          <button onClick={() => setShowDebug(s => !s)} style={editLink(palette)}>Debug</button>
+        <div style={{ display: "flex", gap: 8, textTransform: "none", letterSpacing: 0 }}>
+          <button onClick={reset} style={editBtn(palette)} aria-label="Clear conversation">Clear</button>
+          <button onClick={() => setShowDebug(s => !s)} style={editBtn(palette)} aria-label="Toggle debug panel">Debug</button>
         </div>
       </header>
 
-      <div ref={scrollRef} style={{
-        flex: 1, overflowY: "auto",
+      {/* Sticky intro — stays visible as conversation scrolls */}
+      <div style={{
         display: "flex", justifyContent: "center",
+        flexShrink: 0,
+        padding: "20px 0 0",
+        background: palette.bg,
+        borderBottom: `1px solid ${palette.rule}`,
       }}>
-        <div style={{
-          width: "min(620px, 88%)",
-          padding: "24px 0 40px",
-        }}>
+        <div style={{ width: "min(620px, 88%)", paddingBottom: 20 }}>
           <h1 style={{
             fontFamily: fontPair.display, fontWeight: 400,
             fontSize: "clamp(44px, 6vw, 68px)",
             lineHeight: 1.02, letterSpacing: -0.5,
-            margin: "16px 0 12px",
+            margin: "0 0 12px",
           }}>
-            This is <em style={{ fontStyle: "italic" }}>Fetch</em>.
+            This is <em style={{ fontStyle: "italic" }}>Fetch Good Boi</em>.
           </h1>
           <p style={{
-            fontFamily: fontPair.body, fontSize: 14.5, lineHeight: 1.6,
-            color: palette.muted, maxWidth: 520,
-            margin: "0 0 28px",
+            fontFamily: fontPair.body, fontSize: 14.5, lineHeight: 1.65,
+            color: palette.secondary, maxWidth: 520, letterSpacing: "0.015em",
+            margin: "0 0 8px",
           }}>
             A friendly chatbot with a soft spot for dogs, powered by BlenderBot-400M-distill.
-            Intent matching, four-turn memory, a keyword lookup, a handful of fallbacks.
-            First reply may be slow — the model cold-starts on CPU.
+            Four-turn context window · A small keyword lookup layer · A handful of fallbacks
           </p>
-
-          <div style={{
-            borderTop: `1px solid ${palette.rule}`,
-            paddingTop: 8,
+          <p style={{
+            fontFamily: fontPair.body, fontSize: 13, lineHeight: 1.5,
+            color: palette.muted, maxWidth: 520,
+            margin: 0, fontStyle: "italic",
           }}>
-            {messages.filter(m => !m.pending).map((m, i) => (
-              <EditorialTurn
-                key={m.id}
-                msg={m}
-                palette={palette}
-                fontPair={fontPair}
-                fontSize={fontSize}
-                gap={gap}
-                isFirst={i === 0}
-                radii={radii}
-              />
-            ))}
-            {pending && (
-              <div style={{
-                color: palette.muted, fontStyle: "italic",
-                padding: `${gap / 2}px 0`, fontFamily: fontPair.display,
-                fontSize: fontSize + 1,
-              }}>
-                Fetching an answer<EllipsisAnim />
-              </div>
-            )}
-          </div>
+            Fetch Good Boi runs on CPU, so responses may take a few seconds.
+          </p>
+        </div>
+      </div>
+
+      <div ref={scrollRef} style={{
+        flex: 1, overflowY: "auto",
+        display: "flex", justifyContent: "center",
+      }}>
+        <div style={{
+          width: "min(620px, 88%)",
+          padding: "16px 0 40px",
+        }}>
+          {messages.filter(m => !m.pending).map((m, i) => (
+            <EditorialTurn
+              key={m.id}
+              msg={m}
+              palette={palette}
+              fontPair={fontPair}
+              fontSize={fontSize}
+              gap={gap}
+              isFirst={i === 0}
+              radii={radii}
+            />
+          ))}
+          {pending && (
+            <div style={{
+              color: palette.muted, fontStyle: "italic",
+              padding: `${gap / 2}px 0`, fontFamily: fontPair.display,
+              fontSize: fontSize + 1,
+            }}>
+              Fetching an answer<EllipsisAnim />
+            </div>
+          )}
         </div>
       </div>
 
@@ -132,6 +145,7 @@ function EditorialVariant({ backend, personality, density, accent, fontPair, bub
         background: palette.paper,
         padding: "16px 0 22px",
         display: "flex", justifyContent: "center",
+        flexShrink: 0,
       }}>
         <form onSubmit={submit} style={{
           width: "min(620px, 88%)",
@@ -152,21 +166,22 @@ function EditorialVariant({ backend, personality, density, accent, fontPair, bub
             <input
               value={input}
               onChange={e => setInput(e.target.value)}
-              placeholder="Ask Fetch a question"
+              placeholder="Ask Fetch Good Boi a question"
               autoFocus
               disabled={pending}
               style={{
                 flex: 1, background: "transparent", border: "none", outline: "none",
-                color: palette.ink, fontFamily: fontPair.display,
-                fontSize: 22, fontStyle: "italic",
+                color: palette.ink, fontFamily: fontPair.body,
+                fontSize: 20,
               }}
             />
             <button type="submit" disabled={pending || !input.trim()} style={{
               background: palette.ink, color: palette.paper,
-              border: "none", padding: "8px 18px",
+              border: "none", padding: "10px 20px",
               borderRadius: 999, cursor: pending || !input.trim() ? "default" : "pointer",
-              fontFamily: fontPair.body, fontSize: 13, letterSpacing: 0.5,
+              fontFamily: fontPair.body, fontSize: 14, letterSpacing: 0.5,
               opacity: pending || !input.trim() ? 0.4 : 1,
+              minHeight: 40,
             }}>Ask →</button>
           </div>
         </form>
@@ -219,7 +234,6 @@ function EditorialTurn({ msg, palette, fontPair, fontSize, gap, isFirst, radii }
         fontSize: isUser ? fontSize : fontSize + 3,
         lineHeight: 1.5,
         color: palette.ink,
-        fontStyle: isUser ? "normal" : "normal",
       }}>
         {msg.pending ? <span style={{ color: palette.muted }}>…</span> : msg.content}
       </div>
@@ -239,8 +253,8 @@ function EditorialSuggestions({ suggestions, onPick, palette, fontPair, pending
           style={{
             border: `1px solid ${palette.rule}`,
             background: "transparent", color: palette.ink,
-            fontFamily: fontPair.body, fontSize: 12,
-            padding: "5px 12px", borderRadius: 999,
+            fontFamily: fontPair.body, fontSize: 13,
+            padding: "7px 14px", borderRadius: 999,
             cursor: pending ? "default" : "pointer",
             opacity: pending ? 0.5 : 1,
             animation: `fetch-fadein .4s ease ${i * 60}ms both`,
@@ -251,15 +265,25 @@ function EditorialSuggestions({ suggestions, onPick, palette, fontPair, pending
   );
 }
 
-function editLink(p) {
+function editBtn(p) {
   return {
-    background: "transparent", border: "none", padding: 0,
-    color: p.muted, fontSize: 12, cursor: "pointer", fontFamily: "inherit",
+    background: "transparent",
+    border: `1px solid ${p.muted}`,
+    padding: "6px 10px",
+    minHeight: 32,
+    color: p.secondary,
+    fontSize: 12,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    borderRadius: 4,
+    letterSpacing: 0.8,
+    textTransform: "uppercase",
+    display: "inline-flex",
+    alignItems: "center",
   };
 }
 
 function PawGlyph({ size = 14, color = "#8a4b2a" }) {
-  // Simple paw mark — 4 toes + pad. Kept small + unambiguous.
   return (
     <svg width={size} height={size} viewBox="0 0 20 20" fill={color} aria-hidden="true">
       <circle cx="5" cy="6" r="2"/>