Upload 8 files

static/chat-engine.jsx

@@ -89,7 +89,7 @@ async function generateReply({ userInput, history, backend }) {
       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: "docker" };
+      return { text, fact: data.fact || fact, source: "BlenderBot" };
     } catch (err) {
       console.warn("Fetch: docker backend failed, using local fallback.", err);
     }

static/debug-panel.jsx

@@ -68,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 Good Boi something.
+        No turns yet. Ask Fetch something.
       </div>
     );
   }

static/variant-editorial.jsx

@@ -1,7 +1,7 @@
 // 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. H1 + intro stay sticky; only the conversation scrolls.
+// dog cue.
 
 const editorialPalettes = {
   cream: { bg: "#f8f5ef", paper: "#ffffff", ink: "#1a1714", secondary: "#4a4540", muted: "#8b857a", rule: "#e6e0d4", accent: "#8a4b2a" },
@@ -59,84 +59,76 @@ function EditorialVariant({ backend, density, accent, fontPair, bubble }) {
     }}>
       <header style={{
         display: "flex", alignItems: "center", justifyContent: "space-between",
-        padding: "14px 32px",
+        padding: "18px 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 Good Boi · a dog-loving BlenderBot</span>
+          <span>Fetch · a dog-loving BlenderBot</span>
         </div>
-        <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 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>
       </header>
 
-      {/* Sticky intro — stays visible as conversation scrolls */}
-      <div style={{
+      <div ref={scrollRef} style={{
+        flex: 1, overflowY: "auto",
         display: "flex", justifyContent: "center",
-        flexShrink: 0,
-        padding: "20px 0 0",
-        background: palette.bg,
-        borderBottom: `1px solid ${palette.rule}`,
       }}>
-        <div style={{ width: "min(620px, 88%)", paddingBottom: 20 }}>
+        <div style={{
+          width: "min(620px, 88%)",
+          padding: "24px 0 40px",
+        }}>
           <h1 style={{
             fontFamily: fontPair.display, fontWeight: 400,
             fontSize: "clamp(44px, 6vw, 68px)",
             lineHeight: 1.02, letterSpacing: -0.5,
-            margin: "0 0 12px",
+            margin: "16px 0 12px",
           }}>
-            This is <em style={{ fontStyle: "italic" }}>Fetch Good Boi</em>.
+            This is <em style={{ fontStyle: "italic" }}>Fetch</em>.
           </h1>
           <p style={{
             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.
-            Four-turn context window · A small keyword lookup layer · A handful of fallbacks
+            And it's a <em style={{ fontStyle: "italic" }}>Good Boi</em>. Four-turn memory · Keyword lookup layer · Powered by BlenderBot-400M-distill
           </p>
           <p style={{
-            fontFamily: fontPair.body, fontSize: 13, lineHeight: 1.5,
-            color: palette.muted, maxWidth: 520,
-            margin: 0, fontStyle: "italic",
+            fontFamily: fontPair.body, fontSize: 14, lineHeight: 1.55,
+            color: palette.secondary, maxWidth: 520, letterSpacing: "0.02em",
+            margin: "0 0 28px",
           }}>
             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 style={{
+            borderTop: `1px solid ${palette.rule}`,
+            paddingTop: 8,
+          }}>
+            {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>
       </div>
 
@@ -145,7 +137,6 @@ function EditorialVariant({ backend, density, accent, fontPair, bubble }) {
         background: palette.paper,
         padding: "16px 0 22px",
         display: "flex", justifyContent: "center",
-        flexShrink: 0,
       }}>
         <form onSubmit={submit} style={{
           width: "min(620px, 88%)",
@@ -166,7 +157,7 @@ function EditorialVariant({ backend, density, accent, fontPair, bubble }) {
             <input
               value={input}
               onChange={e => setInput(e.target.value)}
-              placeholder="Ask Fetch Good Boi a question"
+              placeholder="Ask Fetch something"
               autoFocus
               disabled={pending}
               style={{
@@ -243,7 +234,7 @@ function EditorialTurn({ msg, palette, fontPair, fontSize, gap, isFirst, radii }
 
 function EditorialSuggestions({ suggestions, onPick, palette, fontPair, pending }) {
   return (
-    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+    <div style={{ display: "flex", gap: 8, flexWrap: "nowrap", overflow: "hidden" }}>
       {suggestions.map((s, i) => (
         <button
           key={s}
@@ -251,10 +242,12 @@ function EditorialSuggestions({ suggestions, onPick, palette, fontPair, pending
           onClick={() => onPick(s)}
           disabled={pending}
           style={{
+            flex: "1 1 0", minWidth: 0,
+            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
             border: `1px solid ${palette.rule}`,
             background: "transparent", color: palette.ink,
             fontFamily: fontPair.body, fontSize: 13,
-            padding: "7px 14px", borderRadius: 999,
+            padding: "7px 12px", borderRadius: 999,
             cursor: pending ? "default" : "pointer",
             opacity: pending ? 0.5 : 1,
             animation: `fetch-fadein .4s ease ${i * 60}ms both`,
@@ -265,21 +258,10 @@ function EditorialSuggestions({ suggestions, onPick, palette, fontPair, pending
   );
 }
 
-function editBtn(p) {
+function editLink(p) {
   return {
-    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",
+    background: "transparent", border: "none", padding: "4px 0",
+    color: p.muted, fontSize: 13, cursor: "pointer", fontFamily: "inherit",
   };
 }