@frankieai/react 0.1.5 → 0.2.1

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/hooks/FrankieProvider.tsx
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/lib/client.ts
 var FRANKIE_CLOUD_URL = "https://frankie-data-gq5o5syq2q-uc.a.run.app";
@@ -20,11 +20,18 @@ var FrankieClient = class {
     this.baseUrl = (options.baseUrl ?? FRANKIE_CLOUD_URL).replace(/\/+$/, "");
     this.doFetch = options.fetchImpl ?? globalThis.fetch.bind(globalThis);
     this.session = this.readStored();
+    if (options.getUserToken && typeof window !== "undefined") {
+      try {
+        for (const suffix of ["session", "messages"]) window.localStorage.removeItem(`${this.namespace}.${suffix}`);
+      } catch {
+      }
+    }
   }
   options;
   baseUrl;
   doFetch;
   session;
+  sessionUserToken;
   get sessionId() {
     return this.session?.sessionId;
   }
@@ -33,7 +40,7 @@ var FrankieClient = class {
   }
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist() {
-    return this.options.persist !== false && typeof window !== "undefined";
+    return !this.options.getUserToken && this.options.persist !== false && typeof window !== "undefined";
   }
   /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
   get namespace() {
@@ -66,15 +73,17 @@ var FrankieClient = class {
     return await this.unwrap(response);
   }
   async ensureSession(context) {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) return this.session;
     const userToken = await this.options.getUserToken?.();
     if (this.options.getUserToken && !userToken) {
+      this.resetSession();
       throw new FrankieApiError(
         "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
         401,
         "user_token_unavailable"
       );
     }
+    if (userToken !== this.sessionUserToken) this.resetSession();
+    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) return this.session;
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
@@ -85,6 +94,7 @@ var FrankieClient = class {
       })
     });
     this.session = await this.unwrap(response);
+    this.sessionUserToken = userToken;
     this.writeStored();
     return this.session;
   }
@@ -97,7 +107,7 @@ var FrankieClient = class {
     return Array.isArray(body.conversations) ? body.conversations : [];
   }
   async resumeConversation(id = this.options.conversationId) {
-    if (!id) return void 0;
+    if (!id || !this.options.getUserToken) return void 0;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
       method: "POST",
@@ -106,6 +116,7 @@ var FrankieClient = class {
     if (response.status === 404) return void 0;
     const body = await this.unwrap(response);
     this.session = body.session;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
   }
@@ -212,64 +223,8 @@ function parseFrame(frame) {
   }
 }
 
-// src/hooks/FrankieProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var FrankieContext = createContext(null);
-function FrankieProvider({
-  children,
-  context,
-  theme,
-  config: providedConfig,
-  ...clientOptions
-}) {
-  const client = useMemo(
-    () => new FrankieClient(clientOptions),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId]
-  );
-  const [config, setConfig] = useState(providedConfig);
-  const [configError, setConfigError] = useState(void 0);
-  const [loading, setLoading] = useState(!providedConfig);
-  useEffect(() => {
-    if (providedConfig) return;
-    const abort = new AbortController();
-    setLoading(true);
-    client.getConfig(abort.signal).then((next) => {
-      setConfig(next);
-      setConfigError(void 0);
-    }).catch((error) => {
-      if (abort.signal.aborted) return;
-      setConfigError(error instanceof Error ? error.message : "Could not load the assistant.");
-    }).finally(() => {
-      if (!abort.signal.aborted) setLoading(false);
-    });
-    return () => abort.abort();
-  }, [client, providedConfig]);
-  const value = useMemo(
-    () => ({
-      client,
-      ...config ? { config } : {},
-      ...configError ? { configError } : {},
-      loading,
-      ...context ? { context } : {},
-      ...theme ? { theme } : {}
-    }),
-    [client, config, configError, loading, context, theme]
-  );
-  return /* @__PURE__ */ jsx(FrankieContext.Provider, { value, children });
-}
-function useFrankie() {
-  const value = useContext(FrankieContext);
-  if (!value) throw new Error("Frankie components must be rendered inside <FrankieProvider>.");
-  return value;
-}
-function useFrankieTheme() {
-  const { config, theme } = useFrankie();
-  return useMemo(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);
-}
-
 // src/hooks/useFrankieChat.ts
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react";
 
 // src/lib/messages.ts
 function applyEvent(message, event) {
@@ -346,16 +301,23 @@ function newUserMessage(id, text, attachments) {
 // src/hooks/useFrankieChat.ts
 var counter = 0;
 var nextId = (prefix) => `${prefix}_${Date.now().toString(36)}_${counter += 1}`;
+var FrankieChatContext = createContext(null);
 function useFrankieChat() {
+  const value = useContext(FrankieChatContext);
+  if (!value) throw new Error("useFrankieChat requires FrankieProvider.");
+  return value;
+}
+function useFrankieChatState() {
   const { client, context } = useFrankie();
-  const [messages, setMessages] = useState2([]);
-  const [busy, setBusy] = useState2(false);
-  const [error, setError] = useState2(void 0);
-  const [restored, setRestored] = useState2(false);
+  const [messages, setMessages] = useState([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(void 0);
+  const [restored, setRestored] = useState(false);
+  const [loadedSkills, setLoadedSkills] = useState(null);
   const abortRef = useRef(null);
   const mounted = useRef(true);
   const messagesRef = useRef([]);
-  useEffect2(() => {
+  useEffect(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -363,7 +325,7 @@ function useFrankieChat() {
     };
   }, []);
   const storageKey = `${client.namespace}.messages`;
-  useEffect2(() => {
+  useEffect(() => {
     let active = true;
     const restore = async () => {
       if (client.persist) {
@@ -385,6 +347,7 @@ function useFrankieChat() {
           setMessages(restoredMessages);
         }
       } catch {
+        if (active) setError("Could not restore this conversation. Check your sign-in and connection, then try opening it again.");
       } finally {
         if (active) setRestored(true);
       }
@@ -394,7 +357,7 @@ function useFrankieChat() {
       active = false;
     };
   }, [client, storageKey]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!client.persist || !restored || busy) return;
     try {
       if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
@@ -414,10 +377,11 @@ function useFrankieChat() {
     async (text, opts) => {
       const trimmed = text.trim();
       const attachments = opts?.attachments ?? [];
-      if (!trimmed && attachments.length === 0 || busy) return;
+      if (!trimmed && attachments.length === 0 || abortRef.current || !restored) return;
       const outgoing = trimmed || "Please take a look at the attached file(s).";
       const assistantId = nextId("a");
       setError(void 0);
+      setLoadedSkills(null);
       setBusy(true);
       const next = [
         ...messagesRef.current,
@@ -444,6 +408,10 @@ function useFrankieChat() {
             signal: abort.signal
           },
           (event) => {
+            if (event.type === "skills_loaded") {
+              setLoadedSkills(event.skills);
+              return;
+            }
             if (event.type === "ping" || event.type === "session") return;
             if (event.type === "text_delta") receivedText = true;
             if (event.type === "tool_start" || event.type === "tool_end") receivedToolActivity = true;
@@ -482,7 +450,7 @@ function useFrankieChat() {
         abortRef.current = null;
       }
     },
-    [busy, client, context, patchAssistant]
+    [busy, client, context, patchAssistant, restored]
   );
   const stop = useCallback(() => abortRef.current?.abort(), []);
   const reset = useCallback(() => {
@@ -493,12 +461,13 @@ function useFrankieChat() {
     setError(void 0);
     setBusy(false);
     setRestored(true);
+    setLoadedSkills(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
     }
   }, [client]);
-  return { messages, busy, ...error ? { error } : {}, send, stop, reset };
+  return { messages, busy, loadedSkills, restoring: !restored, ...error ? { error } : {}, send, stop, reset };
 }
 function conversationTitle(messages) {
   const first = messages.find((message) => message.role === "user" && message.text.trim());
@@ -507,6 +476,68 @@ function conversationTitle(messages) {
   return title.length > 42 ? `${title.slice(0, 42)}\u2026` : title;
 }
 
+// src/hooks/FrankieProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var FrankieContext = createContext2(null);
+function FrankieProvider({
+  children,
+  context,
+  theme,
+  config: providedConfig,
+  ...clientOptions
+}) {
+  const tokenCallback = useRef2(clientOptions.getUserToken);
+  tokenCallback.current = clientOptions.getUserToken;
+  const client = useMemo(
+    () => new FrankieClient({ ...clientOptions, ...clientOptions.getUserToken ? { getUserToken: () => tokenCallback.current?.() } : {} }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId, clientOptions.persist, clientOptions.fetchImpl, Boolean(clientOptions.getUserToken)]
+  );
+  const [config, setConfig] = useState2(providedConfig);
+  const [configError, setConfigError] = useState2(void 0);
+  const [loading, setLoading] = useState2(!providedConfig);
+  useEffect2(() => {
+    if (providedConfig) return;
+    const abort = new AbortController();
+    setLoading(true);
+    client.getConfig(abort.signal).then((next) => {
+      setConfig(next);
+      setConfigError(void 0);
+    }).catch((error) => {
+      if (abort.signal.aborted) return;
+      setConfigError(error instanceof Error ? error.message : "Could not load the assistant.");
+    }).finally(() => {
+      if (!abort.signal.aborted) setLoading(false);
+    });
+    return () => abort.abort();
+  }, [client, providedConfig]);
+  const value = useMemo(
+    () => ({
+      client,
+      ...config ? { config } : {},
+      ...configError ? { configError } : {},
+      loading,
+      ...context ? { context } : {},
+      ...theme ? { theme } : {}
+    }),
+    [client, config, configError, loading, context, theme]
+  );
+  return /* @__PURE__ */ jsx(FrankieContext.Provider, { value, children: /* @__PURE__ */ jsx(ConversationState, { children }, client.namespace + ":" + (client.conversationId ?? "")) });
+}
+function ConversationState({ children }) {
+  const chat = useFrankieChatState();
+  return /* @__PURE__ */ jsx(FrankieChatContext.Provider, { value: chat, children });
+}
+function useFrankie() {
+  const value = useContext2(FrankieContext);
+  if (!value) throw new Error("Frankie components must be rendered inside <FrankieProvider>.");
+  return value;
+}
+function useFrankieTheme() {
+  const { config, theme } = useFrankie();
+  return useMemo(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);
+}
+
 // src/components/chat/FrankieWidget.tsx
 import { MessageCircle, X as X4 } from "lucide-react";
 import { useEffect as useEffect5, useState as useState6 } from "react";
@@ -570,7 +601,7 @@ function Button({ className, variant, size, asChild = false, ...props }) {
 
 // src/components/chat/ChatPanel.tsx
 import { RotateCcw, X as X3 } from "lucide-react";
-import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
 
 // src/components/ui/avatar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -628,16 +659,51 @@ var ScrollArea = forwardRef(
   }
 );
 
+// src/components/chat/AgentContext.tsx
+import { ArrowUpRight, Sparkles } from "lucide-react";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function AgentContext() {
+  const { loading, configError } = useFrankie();
+  const { loadedSkills, busy, restoring, error } = useFrankieChat();
+  const status = configError || error ? "Unavailable" : loading || restoring ? "Connecting" : busy && loadedSkills === null ? "Checking" : loadedSkills?.length ? "Active" : loadedSkills ? "Tools only" : "Ready";
+  return /* @__PURE__ */ jsxs("div", { className: "frankie-agent-context-wrap", children: [
+    /* @__PURE__ */ jsxs("details", { className: "frankie-agent-context", children: [
+      /* @__PURE__ */ jsxs("summary", { "aria-label": "Agent context", children: [
+        /* @__PURE__ */ jsx6(Sparkles, { size: 17, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx6("span", { children: "Agent context" }),
+        /* @__PURE__ */ jsx6("span", { className: "frankie-context-count", children: loadedSkills === null ? "Not checked" : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"}` }),
+        /* @__PURE__ */ jsxs("span", { className: "frankie-context-status", "data-active": status === "Active", children: [
+          /* @__PURE__ */ jsx6("i", { "aria-hidden": "true" }),
+          status
+        ] }),
+        /* @__PURE__ */ jsx6(ArrowUpRight, { size: 15, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "frankie-context-detail", children: [
+        /* @__PURE__ */ jsx6("strong", { children: loadedSkills === null ? "Skills are checked when you send a message" : loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn" }),
+        loadedSkills?.length ? /* @__PURE__ */ jsx6("ul", { children: loadedSkills.map((skill) => /* @__PURE__ */ jsxs("li", { children: [
+          /* @__PURE__ */ jsx6("span", { children: skill.name }),
+          /* @__PURE__ */ jsxs("small", { children: [
+            "v",
+            skill.revision
+          ] })
+        ] }, skill.id)) }) : /* @__PURE__ */ jsx6("p", { children: "Frankie can use the tools approved for this workspace. Drafts and skills without available tools are not loaded." }),
+        /* @__PURE__ */ jsx6("p", { children: "Published skills and updates are checked on every message. Only approved, available tools can run." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("span", { className: "frankie-sr-only", role: "status", children: loadedSkills === null ? status : `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded. ${status}.` })
+  ] });
+}
+
 // src/components/chat/Composer.tsx
-import { ArrowUp, Paperclip, Square, X } from "lucide-react";
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/ui/textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Textarea = forwardRef2(
   function Textarea2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "textarea",
       {
         ref,
@@ -652,14 +718,14 @@ var Textarea = forwardRef2(
 );
 
 // src/components/chat/Composer.tsx
-import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 var MAX_ROWS_PX = 140;
 function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }) {
   const [value, setValue] = useState3("");
   const [files, setFiles] = useState3([]);
   const [fileError, setFileError] = useState3(void 0);
-  const textareaRef = useRef2(null);
-  const fileInputRef = useRef2(null);
+  const textareaRef = useRef3(null);
+  const fileInputRef = useRef3(null);
   const canAttach = Boolean(attachments?.enabled);
   const models = modelPicker?.models ?? [];
   useEffect3(() => {
@@ -714,46 +780,46 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
     });
   }, [busy, disabled, files, modelPicker?.value, onSend, value]);
   const onKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
       event.preventDefault();
       submit();
     }
   };
   const nothingToSend = value.trim().length === 0 && files.length === 0;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "form",
     {
-      className: "flex flex-col gap-2",
+      className: "frankie-composer flex flex-col gap-2",
       onSubmit: (event) => {
         event.preventDefault();
         submit();
       },
       children: [
-        files.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2", children: files.map((file) => /* @__PURE__ */ jsxs(
+        files.length > 0 ? /* @__PURE__ */ jsx8("div", { className: "flex flex-wrap gap-2", children: files.map((file) => /* @__PURE__ */ jsxs2(
           "span",
           {
             className: "inline-flex max-w-[14rem] items-center gap-1.5 rounded-[var(--frankie-radius)] border border-border bg-muted px-2 py-1 text-xs",
             children: [
-              /* @__PURE__ */ jsx7(Paperclip, { className: "size-3 shrink-0 opacity-70" }),
-              /* @__PURE__ */ jsx7("span", { className: "truncate", children: file.name }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(Paperclip, { className: "size-3 shrink-0 opacity-70" }),
+              /* @__PURE__ */ jsx8("span", { className: "truncate", children: file.name }),
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
                   onClick: () => removeFile(file.id),
                   "aria-label": `Remove ${file.name}`,
                   className: "frankie-focus shrink-0 opacity-60 hover:opacity-100",
-                  children: /* @__PURE__ */ jsx7(X, { className: "size-3" })
+                  children: /* @__PURE__ */ jsx8(X, { className: "size-3" })
                 }
               )
             ]
           },
           file.id
         )) }) : null,
-        fileError ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-red-600 dark:text-red-400", children: fileError }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
-          canAttach ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx7(
+        fileError ? /* @__PURE__ */ jsx8("p", { className: "text-xs text-red-600 dark:text-red-400", children: fileError }) : null,
+        /* @__PURE__ */ jsxs2("div", { className: "frankie-composer-controls flex items-end gap-2", children: [
+          canAttach ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx8(
               "input",
               {
                 ref: fileInputRef,
@@ -767,7 +833,7 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
                 }
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               Button,
               {
                 type: "button",
@@ -777,11 +843,11 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
                 onClick: () => fileInputRef.current?.click(),
                 "aria-label": "Attach files",
                 title: "Attach files",
-                children: /* @__PURE__ */ jsx7(Paperclip, {})
+                children: /* @__PURE__ */ jsx8(Plus, {})
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             Textarea,
             {
               ref: textareaRef,
@@ -795,7 +861,7 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
               "aria-label": "Message"
             }
           ),
-          models.length > 0 ? /* @__PURE__ */ jsx7(
+          models.length > 0 ? /* @__PURE__ */ jsx8(
             "select",
             {
               value: modelPicker?.value ?? models[0]?.id,
@@ -803,10 +869,10 @@ function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, atta
               disabled,
               "aria-label": "Model",
               className: "frankie-focus h-9 max-w-[8rem] rounded-[var(--frankie-radius)] border border-border bg-background px-2 text-sm",
-              children: models.map((model) => /* @__PURE__ */ jsx7("option", { value: model.id, children: model.label }, model.id))
+              children: models.map((model) => /* @__PURE__ */ jsx8("option", { value: model.id, children: model.label }, model.id))
             }
           ) : null,
-          busy ? /* @__PURE__ */ jsx7(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ jsx7(Square, {}) }) : /* @__PURE__ */ jsx7(Button, { type: "submit", size: "icon", disabled: disabled || nothingToSend, "aria-label": "Send", children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
+          busy ? /* @__PURE__ */ jsx8(Button, { type: "button", size: "icon", variant: "outline", onClick: onStop, "aria-label": "Stop", children: /* @__PURE__ */ jsx8(Square, {}) }) : /* @__PURE__ */ jsx8(Button, { type: "submit", size: "icon", disabled: disabled || nothingToSend, "aria-label": "Send", children: /* @__PURE__ */ jsx8(ArrowUp, {}) })
         ] })
       ]
     }
@@ -836,9 +902,9 @@ import { useState as useState4 } from "react";
 
 // src/components/chat/Markdown.tsx
 import { Fragment as Fragment2 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Markdown({ text, className }) {
-  return /* @__PURE__ */ jsx8("div", { className: cn("frankie-prose", className), children: renderBlocks(text) });
+  return /* @__PURE__ */ jsx9("div", { className: cn("frankie-prose", className), children: renderBlocks(text) });
 }
 function renderBlocks(text) {
   const lines = text.split("\n");
@@ -848,13 +914,13 @@ function renderBlocks(text) {
   let code = null;
   const flushParagraph = () => {
     if (paragraph.length === 0) return;
-    blocks.push(/* @__PURE__ */ jsx8("p", { children: renderInline(paragraph.join(" ")) }, `p${blocks.length}`));
+    blocks.push(/* @__PURE__ */ jsx9("p", { children: renderInline(paragraph.join(" ")) }, `p${blocks.length}`));
     paragraph = [];
   };
   const flushList = () => {
     if (!list) return;
-    const items = list.items.map((item, index) => /* @__PURE__ */ jsx8("li", { children: renderInline(item) }, index));
-    blocks.push(list.ordered ? /* @__PURE__ */ jsx8("ol", { children: items }, `l${blocks.length}`) : /* @__PURE__ */ jsx8("ul", { children: items }, `l${blocks.length}`));
+    const items = list.items.map((item, index) => /* @__PURE__ */ jsx9("li", { children: renderInline(item) }, index));
+    blocks.push(list.ordered ? /* @__PURE__ */ jsx9("ol", { children: items }, `l${blocks.length}`) : /* @__PURE__ */ jsx9("ul", { children: items }, `l${blocks.length}`));
     list = null;
   };
   for (const line of lines) {
@@ -862,7 +928,7 @@ function renderBlocks(text) {
     if (fence) {
       if (code) {
         blocks.push(
-          /* @__PURE__ */ jsx8("pre", { children: /* @__PURE__ */ jsx8("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+          /* @__PURE__ */ jsx9("pre", { children: /* @__PURE__ */ jsx9("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
         );
         code = null;
       } else {
@@ -897,7 +963,7 @@ function renderBlocks(text) {
     if (heading) {
       flushParagraph();
       flushList();
-      blocks.push(/* @__PURE__ */ jsx8("p", { className: "font-semibold", children: renderInline(heading[1] ?? "") }, `h${blocks.length}`));
+      blocks.push(/* @__PURE__ */ jsx9("p", { className: "font-semibold", children: renderInline(heading[1] ?? "") }, `h${blocks.length}`));
       continue;
     }
     flushList();
@@ -905,7 +971,7 @@ function renderBlocks(text) {
   }
   if (code) {
     blocks.push(
-      /* @__PURE__ */ jsx8("pre", { children: /* @__PURE__ */ jsx8("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
+      /* @__PURE__ */ jsx9("pre", { children: /* @__PURE__ */ jsx9("code", { children: code.lines.join("\n") }) }, `c${blocks.length}`)
     );
   }
   flushParagraph();
@@ -920,20 +986,20 @@ function renderInline(text) {
     const token = match[0];
     const start = match.index;
     if (start > lastIndex) nodes.push(text.slice(lastIndex, start));
-    nodes.push(/* @__PURE__ */ jsx8(Fragment2, { children: renderToken(token) }, start));
+    nodes.push(/* @__PURE__ */ jsx9(Fragment2, { 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__ */ jsx8("strong", { children: token.slice(2, -2) });
-  if (token.startsWith("`")) return /* @__PURE__ */ jsx8("code", { children: token.slice(1, -1) });
+  if (token.startsWith("**")) return /* @__PURE__ */ jsx9("strong", { children: token.slice(2, -2) });
+  if (token.startsWith("`")) return /* @__PURE__ */ jsx9("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__ */ jsx8("a", { href, target: "_blank", rel: "noopener noreferrer nofollow", children: label });
+  return /* @__PURE__ */ jsx9("a", { href, target: "_blank", rel: "noopener noreferrer nofollow", children: label });
 }
 
 // src/components/chat/ToolActivityList.tsx
@@ -941,7 +1007,7 @@ import { Check, ChevronDown, Loader2, ShieldAlert, X as X2 } from "lucide-react"
 
 // src/components/ui/badge.tsx
 import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var badgeVariants = cva2(
   "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[0.6875rem] font-medium",
   {
@@ -961,44 +1027,44 @@ function Badge({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9("span", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx10("span", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/components/chat/ToolActivityList.tsx
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 function ToolActivityList({ tools, renderTool }) {
   if (tools.length === 0) return null;
   const running = tools.some((tool) => tool.status === "running");
-  return /* @__PURE__ */ jsxs2("details", { className: "frankie-tool-activity mt-2", open: running, children: [
-    /* @__PURE__ */ jsxs2("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__ */ jsx10(ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx10("span", { children: running ? "Working" : "Activity" }),
-      /* @__PURE__ */ jsxs2("span", { className: "text-[11px]", children: [
+  return /* @__PURE__ */ jsxs3("details", { className: "frankie-tool-activity mt-2", open: running, children: [
+    /* @__PURE__ */ jsxs3("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__ */ jsx11(ChevronDown, { className: "frankie-tool-chevron size-3.5 transition-transform", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx11("span", { children: running ? "Working" : "Activity" }),
+      /* @__PURE__ */ jsxs3("span", { className: "text-[11px]", children: [
         "\xB7 ",
         tools.length,
         " tool call",
         tools.length === 1 ? "" : "s"
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ jsx10("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ jsx10(ToolActivityRow, { tool }) }, tool.id)) })
+    /* @__PURE__ */ jsx11("ul", { className: "mt-1 flex flex-col gap-1 border-l border-border pl-2", children: tools.map((tool) => /* @__PURE__ */ jsx11("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ jsx11(ToolActivityRow, { tool }) }, tool.id)) })
   ] });
 }
 function ToolActivityRow({ tool }) {
-  return /* @__PURE__ */ jsxs2(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
-    /* @__PURE__ */ jsx10(ToolIcon, { status: tool.status }),
-    /* @__PURE__ */ jsx10("span", { className: "truncate", children: tool.label })
+  return /* @__PURE__ */ jsxs3(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
+    /* @__PURE__ */ jsx11(ToolIcon, { status: tool.status }),
+    /* @__PURE__ */ jsx11("span", { className: "truncate", children: tool.label })
   ] });
 }
 function ToolIcon({ status }) {
   switch (status) {
     case "running":
-      return /* @__PURE__ */ jsx10(Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" });
+      return /* @__PURE__ */ jsx11(Loader2, { className: "size-3 animate-spin", "aria-hidden": "true" });
     case "done":
-      return /* @__PURE__ */ jsx10(Check, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ jsx11(Check, { className: "size-3", "aria-hidden": "true" });
     case "denied":
-      return /* @__PURE__ */ jsx10(ShieldAlert, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ jsx11(ShieldAlert, { className: "size-3", "aria-hidden": "true" });
     default:
-      return /* @__PURE__ */ jsx10(X2, { className: "size-3", "aria-hidden": "true" });
+      return /* @__PURE__ */ jsx11(X2, { className: "size-3", "aria-hidden": "true" });
   }
 }
 function badgeVariant(status) {
@@ -1009,7 +1075,7 @@ function badgeVariant(status) {
 }
 
 // src/components/chat/MessageBubble.tsx
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function MessageBubble({
   message,
   assistantName,
@@ -1018,33 +1084,33 @@ function MessageBubble({
   renderTool
 }) {
   if (message.role === "user") {
-    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-end gap-1", children: [
-      message.attachments?.length ? /* @__PURE__ */ jsx11("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4("div", { className: "frankie-user-message flex flex-col items-end gap-1", children: [
+      message.attachments?.length ? /* @__PURE__ */ jsx12("div", { className: "flex max-w-[85%] flex-wrap justify-end gap-1", children: message.attachments.map((file, index) => /* @__PURE__ */ jsxs4(
         "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__ */ jsx11(Paperclip2, { className: "size-3 shrink-0 opacity-70" }),
-            /* @__PURE__ */ jsx11("span", { className: "truncate", children: file.name })
+            /* @__PURE__ */ jsx12(Paperclip2, { className: "size-3 shrink-0 opacity-70" }),
+            /* @__PURE__ */ jsx12("span", { className: "truncate", children: file.name })
           ]
         },
         `${file.name}-${index}`
       )) }) : null,
-      message.text ? /* @__PURE__ */ jsxs3("div", { className: "flex max-w-[85%] items-end gap-1", children: [
-        /* @__PURE__ */ jsx11("div", { className: "rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
-        /* @__PURE__ */ jsx11(MessageCopyButton, { text: message.text })
+      message.text ? /* @__PURE__ */ jsxs4("div", { className: "flex max-w-[85%] items-end gap-1", children: [
+        /* @__PURE__ */ jsx12("div", { className: "frankie-user-bubble rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }),
+        /* @__PURE__ */ jsx12(MessageCopyButton, { text: message.text })
       ] }) : null
     ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
-  return /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx11(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
-      message.text ? /* @__PURE__ */ jsx11(MessageCopyButton, { text: message.text }) : null
+  return /* @__PURE__ */ jsxs4("div", { className: "frankie-assistant-message flex gap-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1", children: [
+      /* @__PURE__ */ jsx12(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName }),
+      message.text ? /* @__PURE__ */ jsx12(MessageCopyButton, { text: message.text }) : null
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 max-w-[85%]", children: [
-      message.status === "error" ? /* @__PURE__ */ jsx11("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__ */ jsx11(TypingDots, {}) : /* @__PURE__ */ jsx11(Markdown, { text: message.text, className: "text-sm" }),
-      showToolActivity ? /* @__PURE__ */ jsx11(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
+    /* @__PURE__ */ jsxs4("div", { className: "frankie-assistant-content min-w-0 max-w-[85%]", children: [
+      message.status === "error" ? /* @__PURE__ */ jsx12("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__ */ jsx12(TypingDots, {}) : /* @__PURE__ */ jsx12(Markdown, { text: message.text, className: "text-sm" }),
+      showToolActivity ? /* @__PURE__ */ jsx12(ToolActivityList, { tools: message.tools, ...renderTool ? { renderTool } : {} }) : null
     ] })
   ] });
 }
@@ -1058,28 +1124,31 @@ function MessageCopyButton({ text }) {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsx11("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__ */ jsx11(Check2, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx11(Copy, { className: "size-3.5", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsx12("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__ */ jsx12(Check2, { className: "size-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx12(Copy, { className: "size-3.5", "aria-hidden": "true" }) });
 }
 function TypingDots() {
-  return /* @__PURE__ */ jsx11("span", { className: "inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [0, 1, 2].map((index) => /* @__PURE__ */ jsx11(
-    "span",
-    {
-      className: cn("size-1.5 animate-pulse rounded-full bg-muted-foreground"),
-      style: { animationDelay: `${index * 150}ms` }
-    },
-    index
-  )) });
+  return /* @__PURE__ */ jsxs4("span", { className: "frankie-thinking inline-flex items-center gap-1 py-2", role: "status", "aria-label": "Thinking", children: [
+    /* @__PURE__ */ jsx12("span", { className: "frankie-thinking-label", children: "Thinking" }),
+    [0, 1, 2].map((index) => /* @__PURE__ */ jsx12(
+      "span",
+      {
+        className: cn("size-1.5 animate-pulse rounded-full bg-muted-foreground"),
+        style: { animationDelay: `${index * 150}ms` }
+      },
+      index
+    ))
+  ] });
 }
 
 // src/components/chat/SuggestedPrompts.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function SuggestedPrompts({
   prompts,
   onPick,
   disabled
 }) {
   if (prompts.length === 0) return null;
-  return /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-2", children: prompts.map((prompt) => /* @__PURE__ */ jsx13(
     Button,
     {
       type: "button",
@@ -1094,7 +1163,7 @@ function SuggestedPrompts({
 }
 
 // src/components/chat/ChatPanel.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChatPanel({
   className,
   header,
@@ -1109,8 +1178,8 @@ function ChatPanel({
 }) {
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
-  const { messages, busy, error, send, stop, reset } = useFrankieChat();
-  const scrollRef = useRef3(null);
+  const { messages, busy, restoring, error, send, stop, reset } = useFrankieChat();
+  const scrollRef = useRef4(null);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
   const [model, setModel] = useState5(void 0);
@@ -1122,11 +1191,12 @@ function ChatPanel({
   }, [messages]);
   const name = config?.branding.name ?? "Assistant";
   const mode = resolveMode(theme?.mode);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     Card,
     {
       className: cn(
-        "frankie-root",
+        "frankie-root frankie-chat-panel",
+        fill && "frankie-chat-panel-fill",
         fill ? "h-full w-full rounded-none border-0 shadow-none" : "h-[32rem] w-[22rem] max-w-[calc(100vw-2rem)]",
         mode === "dark" && "dark",
         className
@@ -1134,24 +1204,25 @@ function ChatPanel({
       style: themeToCssVars(theme),
       "data-frankie-mode": mode,
       children: [
-        header === false ? null : header !== void 0 ? header : /* @__PURE__ */ jsxs4(CardHeader, { children: [
-          /* @__PURE__ */ jsx13(Avatar, { ...config?.branding.avatarUrl ? { src: config.branding.avatarUrl } : {}, name }),
-          /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx13(CardTitle, { children: name }),
-            config?.branding.tagline ? /* @__PURE__ */ jsx13(CardDescription, { children: config.branding.tagline }) : null
+        header === false ? null : header !== void 0 ? header : /* @__PURE__ */ jsxs5(CardHeader, { children: [
+          /* @__PURE__ */ jsx14(Avatar, { ...config?.branding.avatarUrl ? { src: config.branding.avatarUrl } : {}, name }),
+          /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx14(CardTitle, { children: name }),
+            config?.branding.tagline ? /* @__PURE__ */ jsx14(CardDescription, { children: config.branding.tagline }) : null
           ] }),
-          /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ jsx13(RotateCcw, {}) }),
-          onClose ? /* @__PURE__ */ jsx13(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx13(X3, {}) }) : null
+          /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", onClick: reset, "aria-label": "Start a new conversation", title: "New conversation", children: /* @__PURE__ */ jsx14(RotateCcw, {}) }),
+          onClose ? /* @__PURE__ */ jsx14(Button, { size: "icon", variant: "ghost", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx14(X3, {}) }) : null
         ] }),
-        /* @__PURE__ */ jsx13(CardContent, { children: /* @__PURE__ */ jsx13(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsxs4("div", { className: "frankie-config-error", role: "alert", children: [
-          /* @__PURE__ */ jsx13("strong", { children: "Frankie couldn\u2019t start" }),
-          /* @__PURE__ */ jsx13("p", { children: configError }),
-          /* @__PURE__ */ jsx13("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
-        ] }) : loading ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
-          /* @__PURE__ */ jsx13(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
-        ] }) : /* @__PURE__ */ jsx13("div", { className: "flex flex-col gap-4", children: messages.map(
-          (message) => renderMessage ? /* @__PURE__ */ jsx13("div", { children: renderMessage(message) }, message.id) : /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(AgentContext, {}),
+        /* @__PURE__ */ jsx14(CardContent, { className: "frankie-conversation-content", children: /* @__PURE__ */ jsx14(ScrollArea, { ref: scrollRef, className: "frankie-transcript flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsxs5("div", { className: "frankie-config-error", role: "alert", children: [
+          /* @__PURE__ */ jsx14("strong", { children: "Frankie couldn\u2019t start" }),
+          /* @__PURE__ */ jsx14("p", { children: configError }),
+          /* @__PURE__ */ jsx14("p", { children: "Refresh this page after checking the workspace\u2019s allowed origin and sign-in settings." })
+        ] }) : loading ? /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: "Starting Frankie\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: config?.greeting }),
+          /* @__PURE__ */ jsx14(SuggestedPrompts, { prompts: config?.suggestedPrompts ?? [], onPick: send, disabled: busy })
+        ] }) : /* @__PURE__ */ jsx14("div", { className: "frankie-message-list flex flex-col gap-4", children: messages.map(
+          (message) => renderMessage ? /* @__PURE__ */ jsx14("div", { children: renderMessage(message) }, message.id) : /* @__PURE__ */ jsx14(
             MessageBubble,
             {
               message,
@@ -1163,15 +1234,15 @@ function ChatPanel({
             message.id
           )
         ) }) }) }),
-        /* @__PURE__ */ jsxs4(CardFooter, { className: "flex flex-col gap-2", children: [
-          error ? /* @__PURE__ */ jsx13("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
-          /* @__PURE__ */ jsx13("div", { className: "w-full", children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs5(CardFooter, { className: "frankie-composer-footer flex flex-col gap-2", children: [
+          error ? /* @__PURE__ */ jsx14("p", { className: "w-full text-xs text-red-600 dark:text-red-400", children: error }) : null,
+          /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(
             Composer,
             {
               onSend: send,
               onStop: stop,
               busy,
-              disabled: Boolean(configError),
+              disabled: loading || restoring || Boolean(configError),
               ...placeholder ? { placeholder } : {},
               ...autoFocus ? { autoFocus } : {},
               ...features?.attachments.enabled ? { attachments: features.attachments } : {},
@@ -1186,11 +1257,12 @@ function ChatPanel({
 }
 
 // src/components/chat/FrankieWidget.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 function FrankieWidget({
   position = "bottom-right",
   offset = 24,
   defaultOpen = false,
+  zIndex = 20,
   open: controlledOpen,
   onOpenChange,
   renderLauncher,
@@ -1215,15 +1287,15 @@ 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__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       className: cn("frankie-root frankie-widget", mode === "dark" && "dark"),
-      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex: 2147483e3 },
+      style: { ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none" },
       "data-frankie-mode": mode,
-      children: /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
-        open ? /* @__PURE__ */ jsx14(ChatPanel, { ...panelProps, onClose: () => setOpen(false), autoFocus: true }) : null,
-        renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end"), children: [
+        open ? /* @__PURE__ */ jsx15("div", { style: { pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }, children: /* @__PURE__ */ jsx15(ChatPanel, { ...panelProps, className: cn("frankie-widget-panel", panelProps.className), onClose: () => setOpen(false), autoFocus: true }) }) : null,
+        /* @__PURE__ */ jsx15("div", { style: { pointerEvents: "auto" }, children: renderLauncher ? renderLauncher({ open, toggle: () => setOpen(!open), label }) : /* @__PURE__ */ jsx15(
           Button,
           {
             size: "icon",
@@ -1232,125 +1304,174 @@ function FrankieWidget({
             "aria-expanded": open,
             "aria-label": open ? "Close the assistant" : label,
             title: label,
-            children: open ? /* @__PURE__ */ jsx14(X4, { className: "size-5" }) : /* @__PURE__ */ jsx14(MessageCircle, { className: "size-5" })
+            children: open ? /* @__PURE__ */ jsx15(X4, { className: "size-5" }) : /* @__PURE__ */ jsx15(MessageCircle, { className: "size-5" })
           }
-        )
+        ) })
       ] })
     }
   );
 }
 
 // src/components/chat/FrankieInline.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function FrankieInline({ className, style, ...panelProps }) {
   const theme = useFrankieTheme();
   const mode = resolveMode(theme?.mode);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn("frankie-root frankie-inline", mode === "dark" && "dark", className),
       style: { ...themeToCssVars(theme), display: "flex", height: "100%", width: "100%", ...style },
       "data-frankie-mode": mode,
-      children: /* @__PURE__ */ jsx15(ChatPanel, { ...panelProps, fill: true })
+      children: /* @__PURE__ */ jsx16(ChatPanel, { ...panelProps, fill: true })
     }
   );
 }
 
 // src/components/chat/FrankieChatPage.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
+import { History, Menu, Plus as Plus2, Settings, X as X5 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 function PageEmptyState() {
   const { config } = useFrankie();
-  const { send, busy } = useFrankieChat();
+  const { send, busy, restoring } = useFrankieChat();
   const name = config?.branding.name ?? "Frankie";
-  const prompts = config?.suggestedPrompts?.slice(0, 3) ?? [];
-  return /* @__PURE__ */ jsxs6("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
-    /* @__PURE__ */ jsx16("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
-    /* @__PURE__ */ jsxs6("div", { children: [
-      /* @__PURE__ */ jsxs6("p", { className: "frankie-page-kicker", children: [
-        name,
-        " assistant"
-      ] }),
-      /* @__PURE__ */ jsx16("h1", { children: "What would you like to do?" }),
-      /* @__PURE__ */ jsx16("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
+  return /* @__PURE__ */ jsxs7("section", { className: "frankie-page-empty", "aria-label": "Start a conversation", children: [
+    /* @__PURE__ */ jsx17("span", { className: "frankie-page-avatar", "aria-hidden": true, children: name.trim().slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx17("p", { className: "frankie-page-kicker", children: "Your product assistant" }),
+      /* @__PURE__ */ jsx17("h1", { children: "How can I help?" }),
+      /* @__PURE__ */ jsx17("p", { children: config?.greeting ?? "Ask a question or choose a task to get started." })
     ] }),
-    prompts.length ? /* @__PURE__ */ jsx16("div", { className: "frankie-page-prompts", children: prompts.map((prompt, index) => /* @__PURE__ */ jsxs6("button", { type: "button", disabled: busy, onClick: () => send(prompt), children: [
-      /* @__PURE__ */ jsx16("span", { children: String(index + 1).padStart(2, "0") }),
-      /* @__PURE__ */ jsx16("strong", { children: prompt }),
-      /* @__PURE__ */ jsx16("b", { "aria-hidden": true, children: "\u2197" })
-    ] }, prompt)) }) : null
+    /* @__PURE__ */ jsx17("div", { className: "frankie-page-prompts", children: config?.suggestedPrompts?.slice(0, 3).map((prompt) => /* @__PURE__ */ jsxs7("button", { type: "button", disabled: busy || restoring, onClick: () => void send(prompt), children: [
+      /* @__PURE__ */ jsx17("strong", { children: prompt }),
+      /* @__PURE__ */ jsx17("b", { "aria-hidden": true, children: "\u2197" })
+    ] }, prompt)) })
   ] });
 }
-function PageChrome({
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus
-}) {
-  const { config } = useFrankie();
-  const { reset } = useFrankieChat();
-  const name = config?.branding.name ?? "Frankie";
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsxs6("header", { className: "frankie-page-header", children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx16("span", { className: "frankie-page-status", "aria-hidden": true }),
-        /* @__PURE__ */ jsx16("strong", { children: name })
+function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...panel }) {
+  const { client, config } = useFrankie();
+  const { busy, messages } = useFrankieChat();
+  const theme = useFrankieTheme();
+  const [conversations, setConversations] = useState7([]);
+  const [historyError, setHistoryError] = useState7("");
+  const [historyLoading, setHistoryLoading] = useState7(false);
+  const [drawerOpen, setDrawerOpen] = useState7(false);
+  const [query, setQuery] = useState7("");
+  const dialog = useRef5(null);
+  const menu = useRef5(null);
+  const requestVersion = useRef5(0);
+  const refresh = useCallback3(async () => {
+    if (!showHistory || !config || config.allowAnonymous) {
+      setHistoryError("");
+      return;
+    }
+    const version = ++requestVersion.current;
+    setHistoryLoading(true);
+    setHistoryError("");
+    try {
+      const items = await client.listConversations();
+      if (version === requestVersion.current) setConversations(items);
+    } catch {
+      if (version === requestVersion.current) setHistoryError("History couldn\u2019t load. Check your sign-in and try again.");
+    } finally {
+      if (version === requestVersion.current) setHistoryLoading(false);
+    }
+  }, [client, showHistory, config?.allowAnonymous]);
+  useEffect6(() => {
+    if (!busy) void refresh();
+    return () => {
+      requestVersion.current++;
+    };
+  }, [refresh, busy]);
+  useEffect6(() => {
+    const node = dialog.current;
+    if (drawerOpen) {
+      node?.showModal?.();
+    } else {
+      node?.close?.();
+    }
+  }, [drawerOpen]);
+  const close = () => {
+    setDrawerOpen(false);
+    menu.current?.focus();
+  };
+  const select = (id) => {
+    if (!busy) {
+      onSelect(id);
+      close();
+    }
+  };
+  const history = /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsxs7("div", { className: "frankie-history-heading", children: [
+      /* @__PURE__ */ jsx17("strong", { children: "Conversations" }),
+      /* @__PURE__ */ jsx17("button", { type: "button", className: "frankie-mobile-only", "aria-label": "Close conversations", onClick: close, children: /* @__PURE__ */ jsx17(X5, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ jsxs7("button", { type: "button", className: "frankie-new-chat", disabled: busy, onClick: () => {
+      onNew();
+      close();
+    }, children: [
+      /* @__PURE__ */ jsx17(Plus2, { size: 17 }),
+      "New chat"
+    ] }),
+    /* @__PURE__ */ jsxs7("label", { className: "frankie-history-search", children: [
+      /* @__PURE__ */ jsx17("span", { children: "Search conversations" }),
+      /* @__PURE__ */ jsx17("input", { type: "search", placeholder: "Search chats\u2026", value: query, onChange: (event) => setQuery(event.target.value) })
+    ] }),
+    /* @__PURE__ */ jsx17("nav", { className: "frankie-history-list", "aria-label": "Conversations", children: conversations.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())).map((item) => /* @__PURE__ */ jsxs7("button", { type: "button", "aria-current": item.id === currentId ? "page" : void 0, disabled: busy, onClick: () => select(item.id), children: [
+      /* @__PURE__ */ jsx17("span", { children: item.title }),
+      /* @__PURE__ */ jsx17("small", { children: new Date(item.updatedAt).toLocaleDateString() })
+    ] }, item.id)) }),
+    historyLoading ? /* @__PURE__ */ jsx17("p", { role: "status", children: "Loading history\u2026" }) : historyError ? /* @__PURE__ */ jsxs7("p", { role: "status", children: [
+      historyError,
+      /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void refresh(), children: "Try again" })
+    ] }) : !conversations.length ? /* @__PURE__ */ jsx17("p", { children: config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here." }) : null,
+    navigation ? /* @__PURE__ */ jsx17("div", { className: "frankie-host-navigation", children: navigation }) : null
+  ] });
+  return /* @__PURE__ */ jsxs7("div", { className: "frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : ""), style: themeToCssVars(theme), children: [
+    showHistory ? /* @__PURE__ */ jsx17("aside", { className: "frankie-history-desktop", children: history }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "frankie-page-main", children: [
+      /* @__PURE__ */ jsxs7("header", { className: "frankie-page-header", children: [
+        /* @__PURE__ */ jsxs7("div", { children: [
+          showHistory ? /* @__PURE__ */ jsx17("button", { type: "button", className: "frankie-mobile-only", ref: menu, "aria-label": "Open conversations", "aria-haspopup": "dialog", "aria-expanded": drawerOpen, onClick: () => setDrawerOpen(true), children: /* @__PURE__ */ jsx17(Menu, { size: 20 }) }) : null,
+          /* @__PURE__ */ jsx17("strong", { className: "frankie-thread-title", children: conversations.find((item) => item.id === currentId)?.title ?? messages.find((message) => message.role === "user")?.text ?? "New chat" })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsxs7("button", { type: "button", disabled: busy, onClick: onNew, "aria-label": "Start a new conversation", children: [
+            /* @__PURE__ */ jsx17(Plus2, { size: 16 }),
+            /* @__PURE__ */ jsx17("span", { children: "New chat" })
+          ] }),
+          /* @__PURE__ */ jsxs7("details", { className: "frankie-chat-settings", children: [
+            /* @__PURE__ */ jsx17("summary", { "aria-label": "Chat settings", children: /* @__PURE__ */ jsx17(Settings, { size: 19 }) }),
+            /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx17("strong", { children: "Chat settings" }),
+              /* @__PURE__ */ jsx17("p", { children: "History syncs automatically for signed-in users." }),
+              /* @__PURE__ */ jsxs7("button", { type: "button", onClick: () => void refresh(), disabled: historyLoading || !showHistory, children: [
+                /* @__PURE__ */ jsx17(History, { size: 16 }),
+                "Refresh history"
+              ] }),
+              /* @__PURE__ */ jsx17("small", { children: "Skills are checked at the start of each message." })
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx16("button", { type: "button", onClick: reset, "aria-label": "Start a new conversation", children: "New chat" })
+      /* @__PURE__ */ jsx17("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ jsx17(FrankieInline, { ...panel, header: panel.header ?? false, emptyState: panel.emptyState ?? /* @__PURE__ */ jsx17(PageEmptyState, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "frankie-page-canvas", children: /* @__PURE__ */ jsx16(
-      FrankieInline,
-      {
-        header: header ?? false,
-        footer,
-        emptyState: emptyState ?? /* @__PURE__ */ jsx16(PageEmptyState, {}),
-        renderMessage,
-        renderTool,
-        placeholder,
-        autoFocus
-      }
-    ) })
+    showHistory ? /* @__PURE__ */ jsx17("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__ */ jsx17("aside", { children: history }) }) : null
   ] });
 }
-function FrankieChatPage({
-  className,
-  style,
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-  ...providerProps
-}) {
-  return /* @__PURE__ */ jsx16(
-    "main",
-    {
-      className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "),
-      style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
-      children: /* @__PURE__ */ jsx16(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ jsx16(
-        PageChrome,
-        {
-          header,
-          footer,
-          emptyState,
-          renderMessage,
-          renderTool,
-          placeholder,
-          autoFocus
-        }
-      ) })
-    }
-  );
+function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory = true, navigation, ...provider }) {
+  const [id, setId] = useState7(() => provider.conversationId ?? crypto.randomUUID());
+  const onNew = () => setId(crypto.randomUUID());
+  return /* @__PURE__ */ jsx17("div", { className: ["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" "), style: { height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style }, children: /* @__PURE__ */ jsx17(FrankieProvider, { ...provider, conversationId: id, storageNamespace: (provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id, children: /* @__PURE__ */ jsx17(PageChrome, { showHistory, navigation, currentId: id, onSelect: setId, onNew, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus }) }) });
 }
 
 // src/components/ui/separator.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Separator({ className }) {
-  return /* @__PURE__ */ jsx17("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+  return /* @__PURE__ */ jsx18("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
 }
 export {
   Avatar,