@frankieai/react 0.2.8 → 0.2.9

package/dist/index.cjs

@@ -31,6 +31,7 @@ __export(index_exports, {
   CardHeader: () => CardHeader,
   CardTitle: () => CardTitle,
   ChatPanel: () => ChatPanel,
+  Choices: () => Choices,
   Composer: () => Composer,
   FRANKIE_CLOUD_URL: () => FRANKIE_CLOUD_URL,
   FrankieApiError: () => FrankieApiError,
@@ -51,6 +52,7 @@ __export(index_exports, {
   applyEvent: () => applyEvent,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
+  extractChoices: () => extractChoices,
   newAssistantMessage: () => newAssistantMessage,
   newUserMessage: () => newUserMessage,
   readEventStream: () => readEventStream,
@@ -463,6 +465,41 @@ function useFrankieChatState() {
       setMessages(next);
       const abort = new AbortController();
       abortRef.current = abort;
+      let bufferedText = "";
+      let pendingThinking = "";
+      let frame = null;
+      const raf = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(() => cb(performance.now()), 16);
+      const cancelRaf = typeof cancelAnimationFrame === "function" ? cancelAnimationFrame : clearTimeout;
+      const revealTick = () => {
+        frame = null;
+        let addText = "";
+        if (bufferedText) {
+          const step = Math.max(3, Math.ceil(bufferedText.length / 6));
+          addText = bufferedText.slice(0, step);
+          bufferedText = bufferedText.slice(step);
+        }
+        const addThinking = pendingThinking;
+        pendingThinking = "";
+        if (addText || addThinking) {
+          patchAssistant(assistantId, (message) => ({ ...message, text: message.text + addText, thinking: message.thinking + addThinking }));
+        }
+        if (bufferedText) scheduleReveal();
+      };
+      const scheduleReveal = () => {
+        if (frame === null) frame = raf(revealTick);
+      };
+      const flushDeltas = () => {
+        if (frame !== null) {
+          cancelRaf(frame);
+          frame = null;
+        }
+        if (!bufferedText && !pendingThinking) return;
+        const addText = bufferedText;
+        const addThinking = pendingThinking;
+        bufferedText = "";
+        pendingThinking = "";
+        patchAssistant(assistantId, (message) => ({ ...message, text: message.text + addText, thinking: message.thinking + addThinking }));
+      };
       try {
         let receivedText = false;
         let receivedToolActivity = false;
@@ -484,11 +521,23 @@ function useFrankieChatState() {
               return;
             }
             if (event.type === "ping" || event.type === "session") return;
-            if (event.type === "text_delta") receivedText = true;
+            if (event.type === "text_delta") {
+              receivedText = true;
+              bufferedText += event.text;
+              scheduleReveal();
+              return;
+            }
+            if (event.type === "thinking_delta") {
+              pendingThinking += event.text;
+              scheduleReveal();
+              return;
+            }
             if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
+            flushDeltas();
             patchAssistant(assistantId, (message) => applyEvent(message, event));
           }
         );
+        flushDeltas();
         if (!receivedText) {
           patchAssistant(assistantId, (message) => ({
             ...message,
@@ -497,6 +546,7 @@ function useFrankieChatState() {
           }));
         }
       } catch (caught) {
+        flushDeltas();
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
             ...message,
@@ -509,6 +559,7 @@ function useFrankieChatState() {
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
       } finally {
+        flushDeltas();
         patchAssistant(
           assistantId,
           (message) => message.status === "streaming" ? { ...message, status: "done" } : message
@@ -611,8 +662,45 @@ function useFrankieTheme() {
 }
 
 // src/components/chat/FrankieWidget.tsx
-var import_lucide_react6 = require("lucide-react");
-var import_react9 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_react10 = require("react");
+
+// src/lib/styles-ready.ts
+var import_react3 = require("react");
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react3.useEffect : import_react3.useLayoutEffect;
+var SENTINEL = "--frankie-styles-ready";
+function useStylesReady(ref, timeoutMs = 600) {
+  const [ready, setReady] = (0, import_react3.useState)(false);
+  useIsomorphicLayoutEffect(() => {
+    if (ready) return;
+    const node = ref.current;
+    if (!node || typeof window === "undefined" || typeof window.getComputedStyle !== "function") {
+      setReady(true);
+      return;
+    }
+    const applied = () => window.getComputedStyle(node).getPropertyValue(SENTINEL).trim() === "1";
+    if (applied()) {
+      setReady(true);
+      return;
+    }
+    const deadline = Date.now() + timeoutMs;
+    let frame = 0;
+    const poll = () => {
+      if (applied() || Date.now() >= deadline) {
+        setReady(true);
+        return;
+      }
+      frame = window.requestAnimationFrame(poll);
+    };
+    if (typeof window.requestAnimationFrame !== "function") {
+      setReady(true);
+      return;
+    }
+    frame = window.requestAnimationFrame(poll);
+    return () => window.cancelAnimationFrame(frame);
+  }, [ref, ready, timeoutMs]);
+  return ready;
+}
 
 // src/lib/theme.ts
 function themeToCssVars(theme) {
@@ -672,8 +760,8 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 }
 
 // src/components/chat/ChatPanel.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_react8 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_react9 = require("react");
 
 // src/components/ui/avatar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -723,9 +811,9 @@ function CardFooter({ className, ...props }) {
 }
 
 // src/components/ui/scroll-area.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react3.forwardRef)(
+var ScrollArea = (0, import_react4.forwardRef)(
   function ScrollArea2({ className, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: cn("frankie-scroll overflow-y-auto overscroll-contain", className), ...props });
   }
@@ -779,12 +867,12 @@ function AgentContext() {
 
 // src/components/chat/Composer.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/components/ui/textarea.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Textarea = (0, import_react4.forwardRef)(
+var Textarea = (0, import_react5.forwardRef)(
   function Textarea2({ className, ...props }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "textarea",
@@ -803,21 +891,28 @@ var Textarea = (0, import_react4.forwardRef)(
 // src/components/chat/Composer.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var MAX_ROWS_PX = 140;
-function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }) {
-  const [value, setValue] = (0, import_react5.useState)("");
-  const [files, setFiles] = (0, import_react5.useState)([]);
-  const [fileError, setFileError] = (0, import_react5.useState)(void 0);
-  const textareaRef = (0, import_react5.useRef)(null);
-  const fileInputRef = (0, import_react5.useRef)(null);
+function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker, focusHandleRef }) {
+  const [value, setValue] = (0, import_react6.useState)("");
+  const [files, setFiles] = (0, import_react6.useState)([]);
+  const [fileError, setFileError] = (0, import_react6.useState)(void 0);
+  const textareaRef = (0, import_react6.useRef)(null);
+  const fileInputRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (!focusHandleRef) return;
+    focusHandleRef.current = () => textareaRef.current?.focus();
+    return () => {
+      focusHandleRef.current = null;
+    };
+  }, [focusHandleRef]);
   const canAttach = Boolean(attachments?.enabled);
   const models = modelPicker?.models ?? [];
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const node = textareaRef.current;
     if (!node) return;
     node.style.height = "auto";
     node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
   }, [value]);
-  const addFiles = (0, import_react5.useCallback)(
+  const addFiles = (0, import_react6.useCallback)(
     async (list) => {
       if (!list || !attachments) return;
       setFileError(void 0);
@@ -850,7 +945,7 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
     [attachments, files.length]
   );
   const removeFile = (id) => setFiles((current) => current.filter((file) => file.id !== id));
-  const submit = (0, import_react5.useCallback)(() => {
+  const submit = (0, import_react6.useCallback)(() => {
     const text = value.trim();
     if (!text && files.length === 0 || busy || disabled) return;
     setValue("");
@@ -980,15 +1075,77 @@ function readAsBase64(file) {
 }
 
 // src/components/chat/MessageBubble.tsx
-var import_lucide_react4 = require("lucide-react");
-var import_react7 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_react8 = require("react");
 
-// src/components/chat/Markdown.tsx
-var import_react6 = require("react");
+// src/lib/choices.ts
+var CLOSED = /```frankie:choices[ \t]*\r?\n([\s\S]*?)```/;
+var OPEN = /```frankie:choices[ \t]*\r?\n?[\s\S]*$/;
+function extractChoices(text) {
+  const closed = CLOSED.exec(text);
+  if (closed) {
+    const options = parseOptionLines(closed[1] ?? "");
+    const body = (text.slice(0, closed.index) + text.slice(closed.index + closed[0].length)).replace(/\n{3,}/g, "\n\n").trimEnd();
+    return { body, options: options.length ? options : null };
+  }
+  const open = OPEN.exec(text);
+  if (open) return { body: text.slice(0, open.index).trimEnd(), options: null };
+  return { body: text, options: null };
+}
+function parseOptionLines(block) {
+  return block.split("\n").map((line) => line.trim().replace(/^([-*+]|\d+[.)])\s+/, "").trim()).filter(Boolean);
+}
+
+// src/components/chat/Choices.tsx
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function Markdown({ text, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn("frankie-prose", className), children: renderBlocks(text) });
+function Choices({
+  options,
+  onPick,
+  onSomethingElse,
+  disabled
+}) {
+  if (options.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "frankie-choices", role: "group", "aria-label": "Choose an option", children: [
+    options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "frankie-choice",
+        disabled,
+        onClick: () => onPick(option),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "frankie-choice-index", "aria-hidden": true, children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "frankie-choice-label", children: option }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ArrowRight, { className: "frankie-choice-go size-4", "aria-hidden": true })
+        ]
+      },
+      `${index}-${option}`
+    )),
+    onSomethingElse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "frankie-choice frankie-choice-other",
+        disabled,
+        onClick: onSomethingElse,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "frankie-choice-index", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PencilLine, { className: "size-3.5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "frankie-choice-label", children: "Something else\u2026" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "frankie-choice-hint", "aria-hidden": true, children: "Type your own" })
+        ]
+      }
+    ) : null
+  ] });
 }
+
+// src/components/chat/Markdown.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Markdown = (0, import_react7.memo)(function Markdown2({ text, className }) {
+  const blocks = (0, import_react7.useMemo)(() => renderBlocks(text), [text]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("frankie-prose", className), children: blocks });
+});
 function renderBlocks(text) {
   const lines = text.split("\n");
   const blocks = [];
@@ -997,13 +1154,13 @@ function renderBlocks(text) {
   let code = null;
   const flushParagraph = () => {
     if (paragraph.length === 0) return;
-    blocks.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: renderInline(paragraph.join(" ")) }, `p${blocks.length}`));
+    blocks.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: renderInline(paragraph.join(" ")) }, `p${blocks.length}`));
     paragraph = [];
   };
   const flushList = () => {
     if (!list) return;
-    const items = list.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { children: renderInline(item) }, index));
-    blocks.push(list.ordered ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ol", { children: items }, `l${blocks.length}`) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: items }, `l${blocks.length}`));
+    const items = list.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: renderInline(item) }, index));
+    blocks.push(list.ordered ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", { children: items }, `l${blocks.length}`) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: items }, `l${blocks.length}`));
     list = null;
   };
   for (const line of lines) {
@@ -1011,7 +1168,7 @@ function renderBlocks(text) {
     if (fence) {
       if (code) {
         blocks.push(
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
         );
         code = null;
       } else {
@@ -1042,11 +1199,13 @@ function renderBlocks(text) {
       flushList();
       continue;
     }
-    const heading = /^#{1,6}\s+(.*)$/.exec(line);
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
     if (heading) {
       flushParagraph();
       flushList();
-      blocks.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "font-semibold", children: renderInline(heading[1] ?? "") }, `h${blocks.length}`));
+      const level = (heading[1] ?? "#").length;
+      const Tag = level <= 1 ? "h3" : level === 2 ? "h4" : "h5";
+      blocks.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tag, { className: "frankie-h", children: renderInline(heading[2] ?? "") }, `h${blocks.length}`));
       continue;
     }
     flushList();
@@ -1054,7 +1213,7 @@ function renderBlocks(text) {
   }
   if (code) {
     blocks.push(
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
     );
   }
   flushParagraph();
@@ -1069,28 +1228,28 @@ function renderInline(text) {
     const token = match[0];
     const start = match.index;
     if (start > lastIndex) nodes.push(text.slice(lastIndex, start));
-    nodes.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react6.Fragment, { children: renderToken(token) }, start));
+    nodes.push(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react7.Fragment, { children: renderToken(token) }, start));
     lastIndex = start + token.length;
   }
   if (lastIndex < text.length) nodes.push(text.slice(lastIndex));
   return nodes;
 }
 function renderToken(token) {
-  if (token.startsWith("**")) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: token.slice(2, -2) });
-  if (token.startsWith("`")) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("code", { children: token.slice(1, -1) });
+  if (token.startsWith("**")) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: token.slice(2, -2) });
+  if (token.startsWith("`")) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: token.slice(1, -1) });
   const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(token);
   const href = link ? link[2] ?? "" : token;
   const label = link ? link[1] ?? "" : token;
   if (!/^(https?:\/\/|\/)/.test(href)) return token;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer nofollow", children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer nofollow", children: label });
 }
 
 // src/components/chat/ToolActivityList.tsx
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/components/ui/badge.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority2.cva)(
   "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.6875rem] font-medium",
   {
@@ -1110,44 +1269,44 @@ function Badge({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/chat/ToolActivityList.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ToolActivityList({ tools, renderTool }) {
   if (tools.length === 0) return null;
   const running = tools.some((tool) => tool.status === "running");
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("details", { className: "frankie-tool-activity mt-2", open: running, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("summary", { className: "inline-flex min-h-7 cursor-pointer list-none items-center gap-1.5 rounded-md px-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: running ? "Working" : "Activity" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-[11px]", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("details", { className: "frankie-tool-activity mt-2", open: running, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("summary", { className: "inline-flex min-h-7 cursor-pointer list-none items-center gap-1.5 rounded-md px-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground [&::-webkit-details-marker]:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: running ? "Working" : "Activity" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-[11px]", children: [
         "\xB7 ",
         tools.length,
         " tool call",
         tools.length === 1 ? "" : "s"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolActivityRow, { tool }) }, tool.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolActivityRow, { tool }) }, tool.id)) })
   ] });
 }
 function ToolActivityRow({ tool }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ToolIcon, { status: tool.status }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate", children: tool.label })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolIcon, { status: tool.status }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: tool.label })
   ] });
 }
 function ToolIcon({ status }) {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" });
     case "done":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Check, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "size-3", "aria-hidden": "true" });
     case "denied":
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ShieldAlert, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.ShieldAlert, { className: "size-3", "aria-hidden": "true" });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.X, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.X, { className: "size-3", "aria-hidden": "true" });
   }
 }
 function badgeVariant(status) {
@@ -1158,47 +1317,54 @@ function badgeVariant(status) {
 }
 
 // src/components/chat/MessageBubble.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function MessageBubble({
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MessageBubble = (0, import_react8.memo)(function MessageBubble2({
   message,
   assistantName,
   avatarUrl,
   showToolActivity,
-  renderTool
+  renderTool,
+  onChoose,
+  onRequestInput,
+  active,
+  busy
 }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "frankie-user-message flex flex-col items-end gap-1", children: [
-      message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "frankie-user-message flex flex-col items-end gap-1", children: [
+      message.attachments?.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "span",
         {
           className: "inline-flex max-w-[12rem] items-center gap-1 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Paperclip, { className: "size-3 shrink-0 opacity-70" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: file.name })
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Paperclip, { className: "size-3 shrink-0 opacity-70" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: file.name })
           ]
         },
         `${file.name}-${index}`
       )) }) : null,
-      message.text ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex max-w-[85%] items-end gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "frankie-user-bubble rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageCopyButton, { text: message.text })
+      message.text ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex max-w-[85%] items-end gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "frankie-user-bubble rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageCopyButton, { text: message.text })
       ] }) : null
     ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "frankie-assistant-message flex gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
-      message.text ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageCopyButton, { text: message.text }) : null
+  const { body, options } = extractChoices(message.text);
+  const showChoices = Boolean(active && onChoose && options && message.status === "done");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "frankie-assistant-message flex gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
+      body ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MessageCopyButton, { text: body }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "frankie-assistant-content min-w-0 max-w-[85%]", children: [
-      message.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400", children: message.error }) : empty && message.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TypingDots, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Markdown, { text: message.text, className: "text-sm" }),
-      showToolActivity ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "frankie-assistant-content min-w-0 max-w-[85%]", children: [
+      message.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400", children: message.error }) : empty && message.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TypingDots, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Markdown, { text: body, className: "text-sm" }),
+      showChoices ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Choices, { options: options ?? [], onPick: onChoose, ...onRequestInput ? { onSomethingElse: onRequestInput } : {}, disabled: busy }) : null,
+      showToolActivity ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
     ] })
   ] });
-}
+});
 function MessageCopyButton({ text }) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const [copied, setCopied] = (0, import_react8.useState)(false);
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(text);
@@ -1207,12 +1373,12 @@ function MessageCopyButton({ text }) {
     } catch {
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", onClick: () => void copy(), className: "frankie-message-copy inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground transition hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-label": copied ? "Copied" : "Copy message", title: copied ? "Copied" : "Copy message", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Check, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Copy, { className: "size-3.5", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => void copy(), className: "frankie-message-copy inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground transition hover:border-border hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", "aria-label": copied ? "Copied" : "Copy message", title: copied ? "Copied" : "Copy message", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Check, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Copy, { className: "size-3.5", "aria-hidden": "true" }) });
 }
 function TypingDots() {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "frankie-thinking inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "frankie-thinking-label", children: "Thinking" }),
-    [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "frankie-thinking inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "frankie-thinking-label", children: "Thinking" }),
+    [0, 1, 2].map((index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         className: cn("size-1.5 animate-pulse rounded-full bg-muted-foreground"),
@@ -1224,14 +1390,14 @@ function TypingDots() {
 }
 
 // src/components/chat/SuggestedPrompts.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function SuggestedPrompts({
   prompts,
   onPick,
   disabled
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Button,
     {
       type: "button",
@@ -1246,7 +1412,7 @@ function SuggestedPrompts({
 }
 
 // src/components/chat/ChatPanel.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ChatPanel({
   className,
   header,
@@ -1262,12 +1428,14 @@ function ChatPanel({
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
   const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
-  const scrollRef = (0, import_react8.useRef)(null);
-  const atBottomRef = (0, import_react8.useRef)(true);
+  const scrollRef = (0, import_react9.useRef)(null);
+  const atBottomRef = (0, import_react9.useRef)(true);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
-  const [model, setModel] = (0, import_react8.useState)(void 0);
-  (0, import_react8.useEffect)(() => {
+  const [model, setModel] = (0, import_react9.useState)(void 0);
+  const composerFocus = (0, import_react9.useRef)(null);
+  const focusComposer = () => composerFocus.current?.();
+  (0, import_react9.useEffect)(() => {
     const node = scrollRef.current;
     if (!node) return;
     const onScroll = () => {
@@ -1276,14 +1444,14 @@ function ChatPanel({
     node.addEventListener("scroll", onScroll, { passive: true });
     return () => node.removeEventListener("scroll", onScroll);
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const node = scrollRef.current;
     if (!node || !atBottomRef.current) return;
     node.scrollTop = node.scrollHeight;
   }, [messages]);
   const name = config?.branding.name ?? "Assistant";
   const mode = resolveMode(theme?.mode);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     Card,
     {
       className: cn(
@@ -1296,44 +1464,49 @@ function ChatPanel({
       style: themeToCssVars(theme),
       "data-frankie-mode": mode,
       children: [
-        header === false ? null : header !== void 0 ? header : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardHeader, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Avatar, { ...config?.branding.avatarUrl ? { src: config.branding.avatarUrl } : {}, name }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardTitle, { children: name }),
-            config?.branding.tagline ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardDescription, { children: config.branding.tagline }) : null
+        header === false ? null : header !== void 0 ? header : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CardHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Avatar, { ...config?.branding.avatarUrl ? { src: config.branding.avatarUrl } : {}, name }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardTitle, { children: name }),
+            config?.branding.tagline ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardDescription, { children: config.branding.tagline }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.RotateCcw, {}) }),
-          onClose ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.X, {}) }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.RotateCcw, {}) }),
+          onClose ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.X, {}) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentContext, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CardContent, { className: "frankie-conversation-content", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollArea, { ref: scrollRef, className: "frankie-transcript flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "frankie-config-error", role: "alert", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: "Frankie couldn\u2019t start" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: configError }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
-        ] }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "frankie-message-list flex flex-col gap-4", children: messages.map(
-          (message) => renderMessage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: renderMessage(message) }, message.id) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentContext, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardContent, { className: "frankie-conversation-content", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ScrollArea, { ref: scrollRef, className: "frankie-transcript flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "frankie-config-error", role: "alert", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Frankie couldn\u2019t start" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: configError }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
+        ] }) : loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "frankie-message-list flex flex-col gap-4", children: messages.map(
+          (message, index) => renderMessage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: renderMessage(message) }, message.id) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             MessageBubble,
             {
               message,
               assistantName: name,
               ...config?.branding.avatarUrl ? { avatarUrl: config.branding.avatarUrl } : {},
               showToolActivity: config?.showToolActivity ?? true,
-              ...renderTool ? { renderTool } : {}
+              ...renderTool ? { renderTool } : {},
+              onChoose: send,
+              onRequestInput: focusComposer,
+              active: index === messages.length - 1,
+              busy
             },
             message.id
           )
         ) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CardFooter, { className: "frankie-composer-footer flex flex-col gap-2", children: [
-          error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CardFooter, { className: "frankie-composer-footer flex flex-col gap-2", children: [
+          error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Composer,
             {
               onSend: send,
               onStop: stop,
               busy,
+              focusHandleRef: composerFocus,
               disabled: loading || restoring || Boolean(configError),
               ...placeholder ? { placeholder } : {},
               ...autoFocus ? { autoFocus } : {},
@@ -1349,7 +1522,7 @@ function ChatPanel({
 }
 
 // src/components/chat/FrankieWidget.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function FrankieWidget({
   position = "bottom-right",
   offset = 24,
@@ -1362,13 +1535,15 @@ function FrankieWidget({
 }) {
   const { config } = useFrankie();
   const theme = useFrankieTheme();
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react9.useState)(defaultOpen);
+  const rootRef = (0, import_react10.useRef)(null);
+  const stylesReady = useStylesReady(rootRef);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react10.useState)(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = (next) => {
     if (controlledOpen === void 0) setUncontrolledOpen(next);
     onOpenChange?.(next);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") setOpen(false);
@@ -1379,15 +1554,17 @@ function FrankieWidget({
   const label = config?.branding.launcherLabel ?? "Need a hand?";
   const mode = resolveMode(theme?.mode);
   const side = position === "bottom-right" ? { right: offset } : { left: offset };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
+      ref: rootRef,
       className: cn("frankie-root frankie-widget", mode === "dark" && "dark"),
-      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none" },
+      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none", ...stylesReady ? null : { opacity: 0 } },
       "data-frankie-mode": mode,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
-        open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChatPanel, { ...panelProps, className: cn("frankie-widget-panel", panelProps.className), onClose: () => setOpen(false), autoFocus: true }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { pointerEvents: "auto" }, children: renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "data-frankie-styles": stylesReady ? "ready" : "pending",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
+        open ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChatPanel, { ...panelProps, className: cn("frankie-widget-panel", panelProps.className), onClose: () => setOpen(false), autoFocus: true }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { pointerEvents: "auto" }, children: renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           Button,
           {
             size: "icon",
@@ -1396,7 +1573,7 @@ function FrankieWidget({
             "aria-expanded": open,
             "aria-label": open ? "Close the assistant" : label,
             title: label,
-            children: open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react6.MessageCircle, { className: "size-5" })
+            children: open ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.X, { className: "size-5" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.MessageCircle, { className: "size-5" })
           }
         ) })
       ] })
@@ -1405,39 +1582,44 @@ function FrankieWidget({
 }
 
 // src/components/chat/FrankieInline.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function FrankieInline({ className, style, ...panelProps }) {
   const theme = useFrankieTheme();
   const mode = resolveMode(theme?.mode);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const rootRef = (0, import_react11.useRef)(null);
+  const stylesReady = useStylesReady(rootRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
+      ref: rootRef,
       className: cn("frankie-root frankie-inline", mode === "dark" && "dark", className),
-      style: { ...themeToCssVars(theme), display: "flex", height: "100%", width: "100%", ...style },
+      style: { ...themeToCssVars(theme), display: "flex", height: "100%", width: "100%", ...style, ...stylesReady ? null : { opacity: 0 } },
       "data-frankie-mode": mode,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChatPanel, { ...panelProps, fill: true })
+      "data-frankie-styles": stylesReady ? "ready" : "pending",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChatPanel, { ...panelProps, fill: true })
     }
   );
 }
 
 // src/components/chat/FrankieChatPage.tsx
-var import_react10 = require("react");
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function PageEmptyState() {
   const { config } = useFrankie();
   const { send, busy, restoring } = useFrankieChat();
   const name = config?.branding.name ?? "Frankie";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "frankie-page-kicker", children: "Your product assistant" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h1", { children: "How can I help?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "frankie-page-kicker", children: "Your product assistant" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { children: "How can I help?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "frankie-page-prompts", children: config?.suggestedPrompts?.slice(0, 3).map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", disabled: busy || restoring, onClick: () => void send(prompt), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: prompt }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("b", { "aria-hidden": true, children: "\u2197" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "frankie-page-prompts", children: config?.suggestedPrompts?.slice(0, 3).map((prompt) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", disabled: busy || restoring, onClick: () => void send(prompt), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: prompt }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("b", { "aria-hidden": true, children: "\u2197" })
     ] }, prompt)) })
   ] });
 }
@@ -1445,22 +1627,22 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
   const { client, config } = useFrankie();
   const { busy, messages } = useFrankieChat();
   const theme = useFrankieTheme();
-  const [conversations, setConversations] = (0, import_react10.useState)([]);
-  const [historyError, setHistoryError] = (0, import_react10.useState)("");
-  const [historyLoading, setHistoryLoading] = (0, import_react10.useState)(false);
-  const [drawerOpen, setDrawerOpen] = (0, import_react10.useState)(false);
-  const [collapsed, setCollapsed] = (0, import_react10.useState)(() => {
+  const [conversations, setConversations] = (0, import_react12.useState)([]);
+  const [historyError, setHistoryError] = (0, import_react12.useState)("");
+  const [historyLoading, setHistoryLoading] = (0, import_react12.useState)(false);
+  const [drawerOpen, setDrawerOpen] = (0, import_react12.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react12.useState)(() => {
     try {
       return window.localStorage.getItem("frankie.history-collapsed") === "1";
     } catch {
       return false;
     }
   });
-  const [query, setQuery] = (0, import_react10.useState)("");
-  const dialog = (0, import_react10.useRef)(null);
-  const menu = (0, import_react10.useRef)(null);
-  const requestVersion = (0, import_react10.useRef)(0);
-  const refresh = (0, import_react10.useCallback)(async () => {
+  const [query, setQuery] = (0, import_react12.useState)("");
+  const dialog = (0, import_react12.useRef)(null);
+  const menu = (0, import_react12.useRef)(null);
+  const requestVersion = (0, import_react12.useRef)(0);
+  const refresh = (0, import_react12.useCallback)(async () => {
     if (!showHistory || !config || config.allowAnonymous) {
       setHistoryError("");
       return;
@@ -1481,19 +1663,19 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
       if (version === requestVersion.current) setHistoryLoading(false);
     }
   }, [client, showHistory, config?.allowAnonymous]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!busy) void refresh();
     return () => {
       requestVersion.current++;
     };
   }, [refresh, busy]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     try {
       window.localStorage.setItem("frankie.history-collapsed", collapsed ? "1" : "0");
     } catch {
     }
   }, [collapsed]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const node = dialog.current;
     if (drawerOpen) {
       node?.showModal?.();
@@ -1511,79 +1693,81 @@ function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...pa
       close();
     }
   };
-  const history = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "frankie-history-heading", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "Conversations" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "frankie-mobile-only", "aria-label": "Close conversations", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.X, { size: 18 }) })
+  const history = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "frankie-history-heading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: "Conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "frankie-mobile-only", "aria-label": "Close conversations", onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.X, { size: 18 }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", className: "frankie-new-chat", disabled: busy, onClick: () => {
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", className: "frankie-new-chat", disabled: busy, onClick: () => {
       onNew();
       close();
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Plus, { size: 17 }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { size: 17 }),
       "New chat"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "frankie-history-search", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Search conversations" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { type: "search", placeholder: "Search chats\u2026", value: query, onChange: (event) => setQuery(event.target.value) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "frankie-history-search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Search conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "search", placeholder: "Search chats\u2026", value: query, onChange: (event) => setQuery(event.target.value) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("nav", { className: "frankie-history-list", "aria-label": "Conversations", children: conversations.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())).map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", "aria-current": item.id === currentId ? "page" : void 0, disabled: busy, onClick: () => select(item.id), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: item.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("small", { children: new Date(item.updatedAt).toLocaleDateString() })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { className: "frankie-history-list", "aria-label": "Conversations", children: conversations.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())).map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", "aria-current": item.id === currentId ? "page" : void 0, disabled: busy, onClick: () => select(item.id), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("small", { children: new Date(item.updatedAt).toLocaleDateString() })
     ] }, item.id)) }),
-    historyLoading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { role: "status", children: "Loading history\u2026" }) : historyError ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { role: "status", children: [
+    historyLoading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { role: "status", children: "Loading history\u2026" }) : historyError ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { role: "status", children: [
       historyError,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", onClick: () => void refresh(), children: "Try again" })
-    ] }) : !conversations.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here." }) : null,
-    navigation ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "frankie-host-navigation", children: navigation }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", onClick: () => void refresh(), children: "Try again" })
+    ] }) : !conversations.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here." }) : null,
+    navigation ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "frankie-host-navigation", children: navigation }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : ""), style: themeToCssVars(theme), children: [
-    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("aside", { className: "frankie-history-desktop" + (collapsed ? " frankie-history-collapsed" : ""), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "frankie-history-toggle", "aria-label": collapsed ? "Expand conversations" : "Collapse conversations", "aria-expanded": !collapsed, onClick: () => setCollapsed((value) => !value), children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ChevronsRight, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ChevronsLeft, { size: 16 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : ""), style: themeToCssVars(theme), children: [
+    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("aside", { className: "frankie-history-desktop" + (collapsed ? " frankie-history-collapsed" : ""), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "frankie-history-toggle", "aria-label": collapsed ? "Expand conversations" : "Collapse conversations", "aria-expanded": !collapsed, onClick: () => setCollapsed((value) => !value), children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronsRight, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronsLeft, { size: 16 }) }),
       collapsed ? null : history
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "frankie-page-main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("header", { className: "frankie-page-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-          showHistory ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "frankie-mobile-only", ref: menu, "aria-label": "Open conversations", "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Menu, { size: 20 }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { className: "frankie-thread-title", children: conversations.find((item) => item.id === currentId)?.title ?? messages.find((message) => message.role === "user")?.text ?? "New chat" })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "frankie-page-main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "frankie-page-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+          showHistory ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "frankie-mobile-only", ref: menu, "aria-label": "Open conversations", "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Menu, { size: 20 }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { className: "frankie-thread-title", children: conversations.find((item) => item.id === currentId)?.title ?? messages.find((message) => message.role === "user")?.text ?? "New chat" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", disabled: busy, onClick: onNew, "aria-label": "Start a new conversation", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Plus, { size: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "New chat" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", disabled: busy, onClick: onNew, "aria-label": "Start a new conversation", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Plus, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "New chat" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("details", { className: "frankie-chat-settings", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("summary", { "aria-label": "Chat settings", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Settings, { size: 19 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "Chat settings" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: "History syncs automatically for signed-in users." }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", onClick: () => void refresh(), disabled: historyLoading || !showHistory, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.History, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("details", { className: "frankie-chat-settings", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("summary", { "aria-label": "Chat settings", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Settings, { size: 19 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: "Chat settings" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: "History syncs automatically for signed-in users." }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", onClick: () => void refresh(), disabled: historyLoading || !showHistory, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.History, { size: 16 }),
                 "Refresh history"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("small", { children: "Skills are checked at the start of each message." })
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("small", { children: "Skills are checked at the start of each message." })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FrankieInline, { ...panel, header: panel.header ?? false, emptyState: panel.emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PageEmptyState, {}) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FrankieInline, { ...panel, header: panel.header ?? false, emptyState: panel.emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PageEmptyState, {}) }) })
     ] }),
-    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("dialog", { ref: dialog, className: "frankie-history-dialog frankie-root", "aria-label": "Chat conversations", style: themeToCssVars(theme), onCancel: close, onClick: (event) => {
+    showHistory ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dialog", { ref: dialog, className: "frankie-history-dialog frankie-root", "aria-label": "Chat conversations", style: themeToCssVars(theme), onCancel: close, onClick: (event) => {
       if (event.target === event.currentTarget) close();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("aside", { children: history }) }) : null
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("aside", { children: history }) }) : null
   ] });
 }
 function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory = true, navigation, ...provider }) {
-  const [id, setId] = (0, import_react10.useState)(() => provider.conversationId ?? crypto.randomUUID());
+  const [id, setId] = (0, import_react12.useState)(() => provider.conversationId ?? crypto.randomUUID());
   const onNew = () => setId(crypto.randomUUID());
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "), style: { height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FrankieProvider, { ...provider, conversationId: id, storageNamespace: (provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PageChrome, { showHistory, navigation, currentId: id, onSelect: setId, onNew, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus }) }) });
+  const pageRef = (0, import_react12.useRef)(null);
+  const stylesReady = useStylesReady(pageRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: pageRef, className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "), style: { height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style, ...stylesReady ? null : { opacity: 0 } }, "data-frankie-styles": stylesReady ? "ready" : "pending", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FrankieProvider, { ...provider, conversationId: id, storageNamespace: (provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PageChrome, { showHistory, navigation, currentId: id, onSelect: setId, onNew, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus }) }) });
 }
 
 // src/components/ui/separator.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Separator({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1597,6 +1781,7 @@ function Separator({ className }) {
   CardHeader,
   CardTitle,
   ChatPanel,
+  Choices,
   Composer,
   FRANKIE_CLOUD_URL,
   FrankieApiError,
@@ -1617,6 +1802,7 @@ function Separator({ className }) {
   applyEvent,
   buttonVariants,
   cn,
+  extractChoices,
   newAssistantMessage,
   newUserMessage,
   readEventStream,