@burdenoff/website-sdk 2026.828.7 → 2026.829.2

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';
@@ -463,6 +463,7 @@ var EXPLORE_MESSAGE_FIELDS = (
     description
     product
     imageUrl
+    index
   }
   ctas {
     kind
@@ -470,6 +471,8 @@ var EXPLORE_MESSAGE_FIELDS = (
     url
     product
   }
+  followUps
+  answered
   errorCode
   createdAt
   completedAt
@@ -535,6 +538,16 @@ var SEND_EXPLORE_MESSAGE_MUTATION = (
   }
 `
 );
+var RECORD_EXPLORE_CLICK_MUTATION = (
+  /* GraphQL */
+  `
+  mutation RecordExploreClick($input: RecordExploreClickInput!) {
+    recordExploreClick(input: $input) {
+      recorded
+    }
+  }
+`
+);
 
 // src/data/products.ts
 var ECOSYSTEM_PRODUCTS = [
@@ -1467,6 +1480,20 @@ function useExploreChat(options = {}) {
     return null;
   }, [messages]);
   const canSend = (phase === "ready" || phase === "error") && catalog.enabled && turnCount < catalog.limits.maxTurnsPerConversation;
+  const recordClick = useCallback(
+    (messageId, kind, url) => {
+      const token = conversationTokenRef.current;
+      if (!token) return;
+      try {
+        void client.mutate(RECORD_EXPLORE_CLICK_MUTATION, {
+          input: { conversationToken: token, messageId, kind, url }
+        }).catch(() => {
+        });
+      } catch {
+      }
+    },
+    [client]
+  );
   return {
     phase,
     catalog,
@@ -1484,7 +1511,8 @@ function useExploreChat(options = {}) {
     history: archive,
     openConversation,
     deleteConversation,
-    clearHistory
+    clearHistory,
+    recordClick
   };
 }
 var optimisticCounter = 0;
@@ -1497,21 +1525,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 +1599,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 +1618,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 +1906,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 +1971,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",
@@ -1896,7 +2009,10 @@ function logoUrlOf(url) {
     return null;
   }
 }
-function ReferenceCard({ reference }) {
+function ReferenceCard({
+  reference,
+  onFollow
+}) {
   const [imageFailed, setImageFailed] = useState(false);
   const [logoFailed, setLogoFailed] = useState(false);
   const host = hostnameOf(reference.url);
@@ -1918,9 +2034,11 @@ function ReferenceCard({ reference }) {
     "a",
     {
       "data-boff-explore": "reference",
+      "data-index": reference.index ?? void 0,
       href: reference.url,
       target: "_blank",
       rel: "noopener noreferrer",
+      onClick: () => onFollow?.(reference.url),
       className: "group flex flex-row items-center gap-3 overflow-hidden rounded-xl border border-border bg-card p-2 transition-colors hover:border-primary/40 hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:flex-col sm:items-stretch sm:gap-0 sm:p-0",
       children: [
         /* @__PURE__ */ jsx("div", { className: "relative h-11 w-11 shrink-0 overflow-hidden rounded-lg bg-muted sm:hidden", children: logoImg }),
@@ -1944,7 +2062,10 @@ function ReferenceCard({ reference }) {
           }
         ) }) : letterPlate }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 sm:gap-1.5 sm:p-3", children: [
-          /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm font-semibold leading-snug text-card-foreground", children: reference.title || host || reference.url }),
+          /* @__PURE__ */ jsxs("p", { className: "line-clamp-2 text-sm font-semibold leading-snug text-card-foreground", children: [
+            reference.index ? /* @__PURE__ */ jsx("span", { className: "mr-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-bold text-primary", children: reference.index }) : null,
+            reference.title || host || reference.url
+          ] }),
           reference.description ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-relaxed text-muted-foreground max-sm:hidden", children: reference.description }) : null,
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:mt-auto sm:pt-2", children: [
             reference.product ? /* @__PURE__ */ jsx("span", { className: "rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground max-sm:hidden", children: reference.product }) : null,
@@ -1960,7 +2081,8 @@ function ReferenceCard({ reference }) {
 }
 function CtaButton({
   cta,
-  onNavigate
+  onNavigate,
+  onFollow
 }) {
   const variant = CTA_VARIANTS[cta.kind] ?? "outline";
   const internal = isInternalPath(cta.url);
@@ -1973,7 +2095,10 @@ function CtaButton({
         type: "button",
         size: "sm",
         variant,
-        onClick: () => onNavigate(cta.url),
+        onClick: () => {
+          onFollow?.(cta.url);
+          onNavigate(cta.url);
+        },
         children: cta.label
       }
     );
@@ -1984,6 +2109,7 @@ function CtaButton({
       "data-boff-explore": "cta",
       "data-kind": cta.kind,
       href: cta.url,
+      onClick: () => onFollow?.(cta.url),
       ...internal ? {} : { target: "_blank", rel: "noopener noreferrer" },
       children: [
         cta.label,
@@ -2035,7 +2161,9 @@ function AssistantBubble({
   message,
   activity,
   onNavigate,
-  anchorRef
+  anchorRef,
+  onFollow,
+  onFollowUp
 }) {
   const streaming = message.status === "PENDING" || message.status === "RUNNING";
   const body = message.content || message.partialContent || "";
@@ -2057,24 +2185,77 @@ function AssistantBubble({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
+          message.status === "COMPLETED" && message.answered === false ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-boff-explore": "no-answer",
+              className: "flex items-start gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs leading-relaxed text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "I couldn't find this in our documentation, so the answer below is not grounded in a source. Try rephrasing, or",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "/contact",
+                      className: "underline underline-offset-2 hover:text-primary",
+                      onClick: (event) => {
+                        if (!onNavigate) return;
+                        event.preventDefault();
+                        onNavigate("/contact");
+                      },
+                      children: "ask a human"
+                    }
+                  ),
+                  "."
+                ] })
+              ]
+            }
+          ) : null,
           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,
           failed && !body ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl rounded-tl-md border border-border bg-muted px-4 py-3 text-sm text-muted-foreground", children: "That answer didn't come through. Try asking again." }) : null,
           message.references.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Sources" }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: message.references.map((reference) => /* @__PURE__ */ jsx(ReferenceCard, { reference }, reference.url)) })
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: message.references.map((reference) => /* @__PURE__ */ jsx(
+              ReferenceCard,
+              {
+                reference,
+                onFollow: (url) => onFollow?.("REFERENCE", url)
+              },
+              reference.url
+            )) })
           ] }) : null,
           message.ctas.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pt-0.5", children: message.ctas.map((cta) => /* @__PURE__ */ jsx(
             CtaButton,
             {
               cta,
-              onNavigate
+              onNavigate,
+              onFollow: (url) => onFollow?.("CTA", url)
             },
             `${cta.kind}-${cta.url}`
-          )) }) : null
+          )) }) : null,
+          message.status === "COMPLETED" && (message.followUps?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-0.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Next you could ask" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (message.followUps ?? []).map((question) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-boff-explore": "follow-up",
+                type: "button",
+                onClick: () => onFollowUp?.(question),
+                className: "group inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-left text-xs text-card-foreground transition-colors hover:border-primary/40 hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: question }),
+                  /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3 shrink-0 rotate-45 text-muted-foreground transition-colors group-hover:text-primary" })
+                ]
+              },
+              question
+            )) })
+          ] }) : null
         ] })
       ]
     }
@@ -2120,6 +2301,256 @@ 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",
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": "Example questions",
+      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,
+            "aria-label": `Ask: ${current}`,
+            "aria-live": paused ? "polite" : "off",
+            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",
+      role: "group",
+      "aria-label": "Focus the assistant on one product",
+      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",
+            "aria-expanded": expanded,
+            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 panelRef = useRef(null);
+  const closeRef = useRef(null);
+  const titleId = "boff-explore-disclaimer-title";
+  useEffect(() => {
+    if (!open) return;
+    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusable = () => Array.from(
+      panelRef.current?.querySelectorAll(
+        'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+      ) ?? []
+    );
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const items = focusable();
+      if (items.length === 0) return;
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (event.shiftKey && (active === first || !panelRef.current?.contains(active))) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    closeRef.current?.focus();
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      opener?.focus();
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-boff-explore": "disclaimer-dialog",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      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",
+        {
+          ref: panelRef,
+          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",
+                {
+                  "aria-hidden": "true",
+                  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",
+                  {
+                    id: titleId,
+                    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 +2561,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 +2582,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
   ] });
 }
@@ -2255,7 +2639,8 @@ function ExplorePage({
     history,
     openConversation,
     deleteConversation,
-    clearHistory
+    clearHistory,
+    recordClick
   } = useExploreChat({ productSlug, pageUrl, onSend, examplePrompts });
   const [draft, setDraft] = useState("");
   const textareaRef = useRef(null);
@@ -2274,6 +2659,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 +2752,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 +2894,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,21 +2907,31 @@ 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,
                 {
                   message,
                   activity,
                   onNavigate,
-                  anchorRef: message.id === latestAssistantId ? latestAssistantRef : void 0
+                  anchorRef: message.id === latestAssistantId ? latestAssistantRef : void 0,
+                  onFollow: (kind, url) => recordClick(message.id, kind, url),
+                  onFollowUp: sendPrompt
                 },
                 message.id
               )
             ) })
           }
         ),
-        /* @__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 +2946,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 +2967,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 +3058,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"
+                  }
+                )
+              ] })
             ]
           }
         ) })