@burdenoff/website-sdk 2026.828.7 → 2026.829.1

package/dist/components/explore.mjs

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { createContext, useMemo, useState, useRef, useCallback, useEffect, useContext } from 'react';
-import { Sparkles, RotateCcw, History, Trash2, Mic, Square, ArrowUp, BookOpenText, Layers, Link2, TriangleAlert, ExternalLink } from 'lucide-react';
+import { Sparkles, RotateCcw, History, Trash2, Mic, Square, ArrowUp, BookOpenText, Layers, Link2, TriangleAlert, ChevronLeft, ChevronRight, ExternalLink } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import rehypeSanitize from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Helmet } from 'react-helmet-async';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -1497,21 +1497,37 @@ function getRecognitionCtor() {
   const w = window;
   return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
 }
+function isTouchDevice() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  try {
+    return window.matchMedia("(pointer: coarse)").matches;
+  } catch {
+    return false;
+  }
+}
 var MIC_DENIED_MESSAGE = "Microphone access was blocked. Allow it in your browser's site settings to dictate.";
+var MIC_UNAVAILABLE_MESSAGE = "Dictation isn't available in this browser. You can type instead.";
+var RELEASE_SETTLE_MS = 250;
+var RETRY_DELAY_MS = 350;
+var sleep = (ms) => new Promise((resolve) => {
+  setTimeout(resolve, ms);
+});
 async function ensureMicrophoneAccess() {
   const media = typeof navigator === "undefined" ? void 0 : navigator.mediaDevices;
-  if (!media?.getUserMedia) return { ok: true, confirmed: false };
+  if (!media?.getUserMedia)
+    return { ok: true, confirmed: false, primed: false };
   try {
     const status = await navigator.permissions?.query({
       name: "microphone"
     });
-    if (status?.state === "granted") return { ok: true, confirmed: true };
+    if (status?.state === "granted")
+      return { ok: true, confirmed: true, primed: false };
   } catch {
   }
   try {
     const stream = await media.getUserMedia({ audio: true });
     for (const track of stream.getTracks()) track.stop();
-    return { ok: true, confirmed: true };
+    return { ok: true, confirmed: true, primed: true };
   } catch (error) {
     const name = typeof error === "object" && error !== null && "name" in error ? String(error.name) : "";
     if (name === "NotAllowedError" || name === "SecurityError") {
@@ -1555,19 +1571,17 @@ function useSpeechInput({
   const recognitionRef = useRef(null);
   const startTokenRef = useRef(0);
   const micConfirmedRef = useRef(false);
-  const beginRecognitionRef = useRef(null);
-  const beginRecognition = useCallback(
-    (Ctor, token) => {
-      beginRecognitionRef.current?.(Ctor, token);
-    },
-    []
-  );
+  const wantsListeningRef = useRef(false);
+  const retriedRef = useRef(false);
   const finalRef = useRef(onFinalTranscript);
   const errorRef = useRef(onError);
   finalRef.current = onFinalTranscript;
   errorRef.current = onError;
+  const langRef = useRef(lang);
+  langRef.current = lang;
   const stop = useCallback(() => {
     startTokenRef.current += 1;
+    wantsListeningRef.current = false;
     setListening(false);
     setInterim("");
     const recognition = recognitionRef.current;
@@ -1576,83 +1590,111 @@ function useSpeechInput({
       recognition.stop();
     } catch {
     }
-    setListening(false);
-    setInterim("");
   }, []);
-  const start = useCallback(() => {
+  const openSession = useCallback((token) => {
     const Ctor = getRecognitionCtor();
-    if (!Ctor) return;
-    if (recognitionRef.current) stop();
-    setError(null);
-    setListening(true);
+    if (!Ctor || token !== startTokenRef.current) return;
+    const recognition = new Ctor();
+    recognition.lang = langRef.current ?? (typeof navigator === "undefined" ? "en-US" : navigator.language || "en-US");
+    recognition.continuous = !isTouchDevice();
+    recognition.interimResults = true;
+    recognition.maxAlternatives = 1;
+    recognition.onstart = () => {
+      if (token !== startTokenRef.current) return;
+      setError(null);
+      setListening(true);
+    };
+    recognition.onresult = (event) => {
+      if (token !== startTokenRef.current) return;
+      let settled = "";
+      let pending = "";
+      for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const result = event.results[i];
+        if (!result) continue;
+        const text = result[0]?.transcript ?? "";
+        if (result.isFinal) settled += text;
+        else pending += text;
+      }
+      setInterim(pending);
+      if (settled.trim() !== "") finalRef.current(settled);
+    };
+    recognition.onerror = (event) => {
+      if (token !== startTokenRef.current) return;
+      if ((event.error === "not-allowed" || event.error === "service-not-allowed") && micConfirmedRef.current && !retriedRef.current) {
+        retriedRef.current = true;
+        void sleep(RETRY_DELAY_MS).then(() => {
+          if (token !== startTokenRef.current || !wantsListeningRef.current)
+            return;
+          openSessionRef.current?.(token);
+        });
+        return;
+      }
+      const message = micConfirmedRef.current && (event.error === "not-allowed" || event.error === "service-not-allowed") ? MIC_UNAVAILABLE_MESSAGE : describeError(event.error);
+      wantsListeningRef.current = false;
+      setListening(false);
+      setInterim("");
+      if (message !== "") {
+        setError(message);
+        errorRef.current?.(message);
+      }
+    };
+    recognition.onend = () => {
+      if (token !== startTokenRef.current) return;
+      setInterim("");
+      if (wantsListeningRef.current && isTouchDevice()) {
+        void sleep(120).then(() => {
+          if (token !== startTokenRef.current || !wantsListeningRef.current)
+            return;
+          openSessionRef.current?.(token);
+        });
+        return;
+      }
+      setListening(false);
+    };
+    recognitionRef.current = recognition;
+    try {
+      recognition.start();
+    } catch {
+      wantsListeningRef.current = false;
+      setListening(false);
+    }
+  }, []);
+  const openSessionRef = useRef(null);
+  openSessionRef.current = openSession;
+  const start = useCallback(() => {
+    if (!getRecognitionCtor()) return;
     startTokenRef.current += 1;
     const token = startTokenRef.current;
-    void ensureMicrophoneAccess().then((access) => {
+    wantsListeningRef.current = true;
+    retriedRef.current = false;
+    micConfirmedRef.current = false;
+    setError(null);
+    setListening(true);
+    void ensureMicrophoneAccess().then(async (access) => {
       if (token !== startTokenRef.current) return;
-      micConfirmedRef.current = access.ok && access.confirmed;
       if (!access.ok) {
+        wantsListeningRef.current = false;
         setListening(false);
         setError(access.message);
         errorRef.current?.(access.message);
         return;
       }
-      beginRecognition(Ctor, token);
-    });
-  }, [beginRecognition, stop]);
-  const beginRecognitionImpl = useCallback(
-    (Ctor, token) => {
-      const recognition = new Ctor();
-      recognition.lang = lang ?? (typeof navigator === "undefined" ? "en-US" : navigator.language || "en-US");
-      recognition.continuous = true;
-      recognition.interimResults = true;
-      recognition.maxAlternatives = 1;
-      recognition.onstart = () => {
+      micConfirmedRef.current = access.confirmed;
+      if (access.primed) {
+        await sleep(RELEASE_SETTLE_MS);
         if (token !== startTokenRef.current) return;
-        setError(null);
-        setListening(true);
-      };
-      recognition.onresult = (event) => {
-        let settled = "";
-        let pending = "";
-        for (let i = event.resultIndex; i < event.results.length; i += 1) {
-          const result = event.results[i];
-          if (!result) continue;
-          const text = result[0]?.transcript ?? "";
-          if (result.isFinal) settled += text;
-          else pending += text;
-        }
-        setInterim(pending);
-        if (settled.trim() !== "") finalRef.current(settled);
-      };
-      recognition.onerror = (event) => {
-        const message = micConfirmedRef.current && (event.error === "not-allowed" || event.error === "service-not-allowed") ? "Dictation isn't available in this browser. You can type instead." : describeError(event.error);
-        setListening(false);
-        setInterim("");
-        if (message !== "") {
-          setError(message);
-          errorRef.current?.(message);
-        }
-      };
-      recognition.onend = () => {
-        setListening(false);
-        setInterim("");
-      };
-      recognitionRef.current = recognition;
-      try {
-        recognition.start();
-      } catch {
-        setListening(false);
       }
-    },
-    [lang]
-  );
-  beginRecognitionRef.current = beginRecognitionImpl;
+      openSessionRef.current?.(token);
+    });
+  }, []);
   const toggle = useCallback(() => {
     if (listening) stop();
     else start();
   }, [listening, start, stop]);
   useEffect(
     () => () => {
+      startTokenRef.current += 1;
+      wantsListeningRef.current = false;
       const recognition = recognitionRef.current;
       if (!recognition) return;
       recognition.onresult = null;
@@ -1836,6 +1878,50 @@ var EXPLORE_CSS = `
   border-radius: 9999px;
   background-clip: content-box;
 }
+
+/* The product strip scrolls inside itself; a visible scrollbar would read as a broken
+   layout rather than an affordance, and reserving its gutter shifts the chips. */
+.boff-explore-strip {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.boff-explore-strip::-webkit-scrollbar { display: none; }
+
+@keyframes boff-explore-fade-in {
+  from { opacity: 0; transform: translateY(2px); }
+  to   { opacity: 1; transform: none; }
+}
+.boff-explore-fade { animation: boff-explore-fade-in 220ms ease-out; }
+@media (prefers-reduced-motion: reduce) {
+  .boff-explore-fade { animation: none; }
+}
+
+/* Nothing inside an answer may widen the page. Model output carries long URLs, code and
+   tables \u2014 each of those overflows a phone by default, and one overflowing child makes the
+   WHOLE document horizontally scrollable, not just the bubble. */
+.boff-explore-body,
+.boff-explore-body p,
+.boff-explore-body li,
+.boff-explore-body a,
+.boff-explore-body h1,
+.boff-explore-body h2,
+.boff-explore-body h3 {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.boff-explore-body pre {
+  overflow-x: auto;
+  max-width: 100%;
+}
+.boff-explore-body table {
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.boff-explore-body img {
+  max-width: 100%;
+  height: auto;
+}
 `;
 function ExploreStyles() {
   return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: EXPLORE_CSS } });
@@ -1857,7 +1943,6 @@ var CAPABILITIES = [
     body: "Get the sources and next steps \u2014 pricing, docs, a demo \u2014 without hunting."
   }
 ];
-var PRODUCT_CHIP_PREVIEW = 12;
 var CTA_VARIANTS = {
   CONTACT: "default",
   WAITLIST: "default",
@@ -2058,7 +2143,7 @@ function AssistantBubble({
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
           body ? /* @__PURE__ */ jsxs("div", { className: "rounded-2xl rounded-tl-md border border-border bg-card px-4 py-3 shadow-sm", children: [
-            /* @__PURE__ */ jsx("div", { className: "boff-prose boff-prose-sm text-card-foreground", children: /* @__PURE__ */ jsx(Markdown, { children: body }) }),
+            /* @__PURE__ */ jsx("div", { className: "boff-prose boff-prose-sm boff-explore-body min-w-0 text-card-foreground", children: /* @__PURE__ */ jsx(Markdown, { children: body }) }),
             streaming ? /* @__PURE__ */ jsx("span", { className: "boff-explore-caret", "aria-hidden": "true" }) : null
           ] }) : null,
           streaming ? /* @__PURE__ */ jsx(ThinkingIndicator, { activity }) : null,
@@ -2120,6 +2205,200 @@ function ErrorBanner({
     }
   );
 }
+function PromptCarousel({
+  prompts,
+  onPrompt,
+  disabled
+}) {
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const count = prompts.length;
+  const current = prompts[index % count] ?? prompts[0] ?? "";
+  const go = useCallback(
+    (delta) => {
+      setIndex((i) => (i + delta + count) % count);
+    },
+    [count]
+  );
+  useEffect(() => {
+    if (paused || disabled || count < 2) return;
+    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const timer = setInterval(() => setIndex((i) => (i + 1) % count), 4500);
+    return () => clearInterval(timer);
+  }, [paused, disabled, count]);
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-w-0 items-center gap-1.5",
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => setPaused(false),
+      children: [
+        count > 1 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous suggestion",
+            onClick: () => go(-1),
+            className: "hidden h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:inline-flex",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "data-boff-explore": "chip",
+            "data-chip-kind": "prompt",
+            type: "button",
+            disabled,
+            onClick: () => onPrompt(current),
+            className: "boff-explore-fade group flex min-w-0 flex-1 items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-left text-sm text-card-foreground shadow-sm transition-colors hover:border-primary/50 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: [
+              /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: current }),
+              /* @__PURE__ */ jsx(ArrowUp, { className: "ml-auto h-3.5 w-3.5 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
+            ]
+          },
+          current
+        ),
+        count > 1 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next suggestion",
+            onClick: () => go(1),
+            className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ProductStrip({
+  products,
+  focusProduct,
+  onFocus
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const chipClass = (active) => cn(
+    "shrink-0 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+    active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "boff-explore-strip flex min-w-0 flex-1 gap-2",
+          expanded ? "flex-wrap" : "flex-nowrap overflow-x-auto"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-boff-explore": "chip",
+              "data-chip-kind": "product",
+              "data-product": "all",
+              type: "button",
+              "aria-pressed": focusProduct === null,
+              onClick: () => onFocus(null),
+              className: chipClass(focusProduct === null),
+              children: "All products"
+            }
+          ),
+          products.map((product) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              "data-boff-explore": "chip",
+              "data-chip-kind": "product",
+              "data-product": product.slug,
+              type: "button",
+              "aria-pressed": focusProduct === product.slug,
+              title: product.tagline ?? product.name,
+              onClick: () => onFocus(focusProduct === product.slug ? null : product.slug),
+              className: chipClass(focusProduct === product.slug),
+              children: product.name
+            },
+            product.slug
+          ))
+        ]
+      }
+    ),
+    products.length > 0 ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-boff-explore": "products-toggle",
+        onClick: () => setExpanded((v) => !v),
+        className: "shrink-0 whitespace-nowrap rounded-full px-2 py-1 text-xs font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        children: expanded ? "Show less" : `All ${products.length}`
+      }
+    ) : null
+  ] });
+}
+function DisclaimerDialog({
+  open,
+  onClose,
+  captchaOn
+}) {
+  const closeRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    closeRef.current?.focus();
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-boff-explore": "disclaimer-dialog",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "How this assistant works",
+      className: "fixed inset-0 z-50 flex items-end justify-center bg-foreground/40 p-4 backdrop-blur-sm sm:items-center",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "w-full max-w-md rounded-2xl border border-border bg-card p-5 shadow-xl",
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-card-foreground", children: "How this assistant works" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2 text-xs leading-relaxed text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("p", { children: "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources." }),
+                  /* @__PURE__ */ jsx("p", { children: "Conversations are saved in this browser so you can come back to them, and are also stored on our servers to help us improve these answers. Please don't share personal or confidential information." }),
+                  captchaOn ? /* @__PURE__ */ jsx("p", { children: "Protected by reCAPTCHA \u2014 the Google Privacy Policy and Terms of Service apply." }) : null
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ref: closeRef,
+                size: "sm",
+                variant: "secondary",
+                onClick: onClose,
+                children: "Got it"
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
 function WelcomeState({
   title,
   body,
@@ -2130,21 +2409,19 @@ function WelcomeState({
   onFocus,
   disabled
 }) {
-  const [showAllProducts, setShowAllProducts] = useState(false);
-  const visibleProducts = showAllProducts ? products : products.slice(0, PRODUCT_CHIP_PREVIEW);
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-4 py-10 sm:py-14", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-4 py-8 sm:py-12", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5" }),
         "AI answers, grounded in our documentation"
       ] }),
-      /* @__PURE__ */ jsx("h1", { className: "mt-5 text-balance text-3xl font-bold tracking-tight sm:text-4xl", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-3 max-w-2xl text-pretty text-base leading-relaxed text-muted-foreground sm:text-lg", children: body })
+      /* @__PURE__ */ jsx("h1", { className: "mt-4 text-balance break-words text-2xl font-bold tracking-tight sm:text-4xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-2.5 max-w-2xl text-pretty text-sm leading-relaxed text-muted-foreground sm:text-lg", children: body })
     ] }),
-    /* @__PURE__ */ jsx("ul", { className: "mt-9 grid gap-3 sm:grid-cols-3", children: CAPABILITIES.map(({ icon: Icon, title: capTitle, body: capBody }) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("ul", { className: "mt-7 grid gap-2.5 sm:grid-cols-3", children: CAPABILITIES.map(({ icon: Icon, title: capTitle, body: capBody }) => /* @__PURE__ */ jsxs(
       "li",
       {
-        className: "rounded-xl border border-border bg-card p-4 text-left",
+        className: "rounded-xl border border-border/70 bg-card/60 p-3.5 text-left transition-colors hover:border-border",
         children: [
           /* @__PURE__ */ jsx("span", { className: "mb-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-card-foreground", children: capTitle }),
@@ -2153,72 +2430,27 @@ function WelcomeState({
       },
       capTitle
     )) }),
-    prompts.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-9", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Try asking" }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ jsxs(
-        "button",
+    prompts.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Try asking" }),
+      /* @__PURE__ */ jsx(
+        PromptCarousel,
         {
-          "data-boff-explore": "chip",
-          "data-chip-kind": "prompt",
-          type: "button",
-          disabled,
-          onClick: () => onPrompt(prompt),
-          className: "group inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-left text-sm text-card-foreground transition-colors hover:border-primary/40 hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: prompt }),
-            /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
-          ]
-        },
-        prompt
-      )) })
+          prompts,
+          onPrompt,
+          disabled
+        }
+      )
     ] }) : null,
-    products.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Focus on a product" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-boff-explore": "chip",
-            "data-chip-kind": "product",
-            "data-product": "all",
-            type: "button",
-            "aria-pressed": focusProduct === null,
-            onClick: () => onFocus(null),
-            className: cn(
-              "rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              focusProduct === null ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-            ),
-            children: "All products"
-          }
-        ),
-        visibleProducts.map((product) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            "data-boff-explore": "chip",
-            "data-chip-kind": "product",
-            "data-product": product.slug,
-            type: "button",
-            "aria-pressed": focusProduct === product.slug,
-            title: product.tagline ?? product.name,
-            onClick: () => onFocus(focusProduct === product.slug ? null : product.slug),
-            className: cn(
-              "rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              focusProduct === product.slug ? "border-primary bg-primary text-primary-foreground" : "border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-            ),
-            children: product.name
-          },
-          product.slug
-        )),
-        products.length > PRODUCT_CHIP_PREVIEW ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setShowAllProducts((v) => !v),
-            className: "rounded-full px-3 py-1 text-xs font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            children: showAllProducts ? "Show fewer" : `Show all ${products.length}`
-          }
-        ) : null
-      ] })
+    products.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Focus on a product" }),
+      /* @__PURE__ */ jsx(
+        ProductStrip,
+        {
+          products,
+          focusProduct,
+          onFocus
+        }
+      )
     ] }) : null
   ] });
 }
@@ -2274,6 +2506,7 @@ function ExplorePage({
     }
   });
   speechStopRef.current = speech.stop;
+  const [disclaimerOpen, setDisclaimerOpen] = useState(false);
   const scrollRef = useRef(null);
   const latestAssistantRef = useRef(null);
   const alignedForRef = useRef(null);
@@ -2366,7 +2599,7 @@ function ExplorePage({
       "data-boff-explore": "page",
       "data-phase": phase,
       className: cn(
-        "flex w-full flex-col bg-background text-foreground",
+        "flex w-full min-w-0 flex-col overflow-x-hidden bg-background text-foreground",
         heightMode === "auto" && "min-h-[70vh]",
         className
       ),
@@ -2508,7 +2741,7 @@ function ExplorePage({
             role: "log",
             "aria-live": "polite",
             "aria-label": "Explore conversation",
-            className: "boff-explore-scroll min-h-0 flex-1 overflow-y-auto",
+            className: "boff-explore-scroll min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden",
             children: showWelcome ? /* @__PURE__ */ jsx(
               WelcomeState,
               {
@@ -2521,7 +2754,7 @@ function ExplorePage({
                 onFocus: setFocusProduct,
                 disabled: !canSend || busy
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl space-y-6 px-4 py-6", children: messages.map(
+            ) : /* @__PURE__ */ jsx("div", { className: "mx-auto w-full min-w-0 max-w-3xl space-y-6 px-4 py-6", children: messages.map(
               (message) => message.role === "USER" ? /* @__PURE__ */ jsx(UserBubble, { message }, message.id) : /* @__PURE__ */ jsx(
                 AssistantBubble,
                 {
@@ -2535,7 +2768,15 @@ function ExplorePage({
             ) })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-background px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
+          DisclaimerDialog,
+          {
+            open: disclaimerOpen,
+            onClose: () => setDisclaimerOpen(false),
+            captchaOn
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-border bg-background/85 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur-md", children: /* @__PURE__ */ jsxs(
           "form",
           {
             "data-boff-explore": "composer",
@@ -2550,7 +2791,7 @@ function ExplorePage({
                 "div",
                 {
                   className: cn(
-                    "flex items-end gap-2 rounded-2xl border bg-card p-2 shadow-sm transition-colors",
+                    "flex min-w-0 items-end gap-2 rounded-2xl border bg-card p-2 shadow-sm transition-all",
                     overLimit ? "border-destructive/60" : "border-border focus-within:border-primary/40 focus-within:ring-1 focus-within:ring-ring"
                   ),
                   children: [
@@ -2571,7 +2812,7 @@ function ExplorePage({
                         },
                         "aria-label": "Ask a question",
                         placeholder: composerDisabled ? phase === "limited" ? "Message limit reached \u2014 please try again later" : "Explore is unavailable right now" : focusedProductName ? `Ask about ${focusedProductName}\u2026` : "Ask anything about our products\u2026",
-                        className: "max-h-[200px] min-h-[44px] flex-1 resize-none border-0 bg-transparent px-2 py-2.5 text-sm shadow-none focus-visible:ring-0 md:text-sm"
+                        className: "max-h-[200px] min-h-[44px] w-full min-w-0 flex-1 resize-none border-0 bg-transparent px-2 py-2.5 text-sm shadow-none focus-visible:ring-0 md:text-sm"
                       }
                     ),
                     speech.supported ? /* @__PURE__ */ jsx(
@@ -2662,48 +2903,19 @@ function ExplorePage({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs(
-                "p",
-                {
-                  "data-boff-explore": "disclaimer",
-                  className: "mt-2 text-xs leading-relaxed text-muted-foreground",
-                  children: [
-                    "Answers are generated from our public documentation and can be imperfect \u2014 check anything important against the linked sources.",
-                    " ",
-                    "Conversations are saved in this browser so you can come back to them, and are also stored on our servers to help us improve these answers. Please don't share personal or confidential information.",
-                    captchaOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      " ",
-                      "This site is protected by reCAPTCHA; the Google",
-                      " ",
-                      /* @__PURE__ */ jsx(
-                        "a",
-                        {
-                          href: "https://policies.google.com/privacy",
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "underline underline-offset-2 hover:text-foreground",
-                          children: "Privacy Policy"
-                        }
-                      ),
-                      " ",
-                      "and",
-                      " ",
-                      /* @__PURE__ */ jsx(
-                        "a",
-                        {
-                          href: "https://policies.google.com/terms",
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "underline underline-offset-2 hover:text-foreground",
-                          children: "Terms of Service"
-                        }
-                      ),
-                      " ",
-                      "apply."
-                    ] }) : null
-                  ]
-                }
-              )
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: "Grounded in our docs \u2014 check anything important." }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-boff-explore": "disclaimer",
+                    onClick: () => setDisclaimerOpen(true),
+                    className: "shrink-0 underline underline-offset-2 transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                    children: "Disclaimer"
+                  }
+                )
+              ] })
             ]
           }
         ) })