@frankieai/react 0.1.5 → 0.2.0

package/src/components/chat/ChatPanel.tsx

@@ -49,7 +49,7 @@ export function ChatPanel({
 }: ChatPanelProps) {
   const { config, configError, loading } = useFrankie();
   const theme = useFrankieTheme();
-  const { messages, busy, error, send, stop, reset } = useFrankieChat();
+  const { messages, busy, restoring, loadedSkills, error, send, stop, reset } = useFrankieChat();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const features = config?.features;
@@ -137,13 +137,14 @@ export function ChatPanel({
       </CardContent>
 
       <CardFooter className="flex flex-col gap-2">
+        {loadedSkills !== null ? <details className="frankie-loaded-skills"><summary role="status">{loadedSkills.length ? `${loadedSkills.length} ${loadedSkills.length === 1 ? "skill" : "skills"} loaded` : "No skills loaded for this turn"}</summary>{loadedSkills.length ? <ul>{loadedSkills.map(skill => <li key={skill.id}>{skill.name}<small>v{skill.revision}</small></li>)}</ul> : <p>Your assistant can still answer using its available tools.</p>}</details> : null}
         {error ? <p className="w-full text-xs text-red-600 dark:text-red-400">{error}</p> : null}
         <div className="w-full">
           <Composer
             onSend={send}
             onStop={stop}
             busy={busy}
-            disabled={Boolean(configError)}
+            disabled={loading || restoring || Boolean(configError)}
             {...(placeholder ? { placeholder } : {})}
             {...(autoFocus ? { autoFocus } : {})}
             {...(features?.attachments.enabled ? { attachments: features.attachments } : {})}

package/src/components/chat/FrankieChatPage.tsx

@@ -1,121 +1,93 @@
 "use client";
 
-import type { CSSProperties } from "react";
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { History, Menu, Plus, Settings, X } from "lucide-react";
 import type { FrankieProviderProps } from "../../hooks/FrankieProvider.jsx";
-import { FrankieProvider, useFrankie } from "../../hooks/FrankieProvider.jsx";
+import { FrankieProvider, useFrankie, useFrankieTheme } from "../../hooks/FrankieProvider.jsx";
 import { useFrankieChat } from "../../hooks/useFrankieChat.js";
+import { themeToCssVars, resolveMode } from "../../lib/theme.js";
+import type { ChatConversation } from "../../lib/client.js";
 import { FrankieInline } from "./FrankieInline.js";
 import type { ChatPanelProps } from "./ChatPanel.js";
 
-export interface FrankieChatPageProps
-  extends Omit<FrankieProviderProps, "children">,
-    Pick<
-      ChatPanelProps,
-      "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"
-    > {
+export interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">,
+  Pick<ChatPanelProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"> {
   className?: string;
   style?: CSSProperties;
+  /** Include the built-in conversation sidebar. Defaults to true. */
+  showHistory?: boolean;
+  /** Optional host navigation, e.g. a Back to dashboard link. */
+  navigation?: React.ReactNode;
 }
 
 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 (
-    <section className="frankie-page-empty" aria-label="Start a conversation">
-      <span className="frankie-page-avatar" aria-hidden>{name.trim().slice(0, 1).toUpperCase()}</span>
-      <div>
-        <p className="frankie-page-kicker">{name} assistant</p>
-        <h1>What would you like to do?</h1>
-        <p>{config?.greeting ?? "Ask a question or choose a task to get started."}</p>
-      </div>
-      {prompts.length ? (
-        <div className="frankie-page-prompts">
-          {prompts.map((prompt, index) => (
-            <button key={prompt} type="button" disabled={busy} onClick={() => send(prompt)}>
-              <span>{String(index + 1).padStart(2, "0")}</span>
-              <strong>{prompt}</strong>
-              <b aria-hidden>↗</b>
-            </button>
-          ))}
-        </div>
-      ) : null}
-    </section>
-  );
+  return <section className="frankie-page-empty" aria-label="Start a conversation">
+    <span className="frankie-page-avatar" aria-hidden>{name.trim().slice(0, 1).toUpperCase()}</span>
+    <div><p className="frankie-page-kicker">Your product assistant</p><h1>How can I help?</h1><p>{config?.greeting ?? "Ask a question or choose a task to get started."}</p></div>
+    <div className="frankie-page-prompts">{config?.suggestedPrompts?.slice(0, 3).map(prompt => <button key={prompt} type="button" disabled={busy || restoring} onClick={() => void send(prompt)}><strong>{prompt}</strong><b aria-hidden>↗</b></button>)}</div>
+  </section>;
 }
 
-function PageChrome({
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-}: Pick<FrankieChatPageProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus">) {
-  const { config } = useFrankie();
-  const { reset } = useFrankieChat();
+function PageChrome({ showHistory, navigation, currentId, onSelect, onNew, ...panel }: Pick<FrankieChatPageProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus" | "navigation"> & { showHistory: boolean; currentId: string; onSelect: (id: string) => void; onNew: () => void }) {
+  const { client, config } = useFrankie();
+  const { busy } = useFrankieChat();
+  const theme = useFrankieTheme();
+  const [conversations, setConversations] = useState<ChatConversation[]>([]);
+  const [historyError, setHistoryError] = useState("");
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const dialog = useRef<HTMLDialogElement>(null);
+  const menu = useRef<HTMLButtonElement>(null);
+  const requestVersion = useRef(0);
   const name = config?.branding.name ?? "Frankie";
-
-  return (
-    <>
-      <header className="frankie-page-header">
-        <div>
-          <span className="frankie-page-status" aria-hidden />
-          <strong>{name}</strong>
-        </div>
-        <button type="button" onClick={reset} aria-label="Start a new conversation">New chat</button>
-      </header>
-      <div className="frankie-page-canvas">
-        <FrankieInline
-          header={header ?? false}
-          footer={footer}
-          emptyState={emptyState ?? <PageEmptyState />}
-          renderMessage={renderMessage}
-          renderTool={renderTool}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-        />
-      </div>
-    </>
-  );
+  const refresh = useCallback(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’t load. Check your sign-in and try again."); }
+    finally { if (version === requestVersion.current) setHistoryLoading(false); }
+  }, [client, showHistory, config?.allowAnonymous]);
+  useEffect(() => { if (!busy) void refresh(); return () => { requestVersion.current++; }; }, [refresh, busy]);
+  useEffect(() => {
+    const node = dialog.current;
+    if (drawerOpen) { node?.showModal?.(); }
+    else { node?.close?.(); }
+  }, [drawerOpen]);
+  const close = () => { setDrawerOpen(false); menu.current?.focus(); };
+  const select = (id: string) => { if (!busy) { onSelect(id); close(); } };
+  const history = <>
+    <div className="frankie-history-heading"><strong>Conversations</strong><button type="button" className="frankie-mobile-only" aria-label="Close conversations" onClick={close}><X size={18} /></button></div>
+    <button type="button" className="frankie-new-chat" disabled={busy} onClick={() => { onNew(); close(); }}><Plus size={17} />New chat</button>
+    <label className="frankie-history-search"><span>Search conversations</span><input type="search" placeholder="Search chats…" value={query} onChange={event => setQuery(event.target.value)} /></label>
+    <nav className="frankie-history-list" aria-label="Conversations">{conversations.filter(item => item.title.toLowerCase().includes(query.toLowerCase())).map(item => <button type="button" key={item.id} aria-current={item.id === currentId ? "page" : undefined} disabled={busy} onClick={() => select(item.id)}><span>{item.title}</span><small>{new Date(item.updatedAt).toLocaleDateString()}</small></button>)}</nav>
+    {historyLoading ? <p role="status">Loading history…</p> : historyError ? <p role="status">{historyError}<button type="button" onClick={() => void refresh()}>Try again</button></p> : !conversations.length ? <p>{config?.allowAnonymous ? "Sign in to sync conversations across devices." : "Your conversations will appear here."}</p> : null}
+    {navigation ? <div className="frankie-host-navigation">{navigation}</div> : null}
+  </>;
+  return <div className={"frankie-page-shell" + (resolveMode(theme?.mode) === "dark" ? " dark" : "")} style={themeToCssVars(theme)}>
+    {showHistory ? <aside className="frankie-history-desktop">{history}</aside> : null}
+    <div className="frankie-page-main">
+      <header className="frankie-page-header"><div>{showHistory ? <button type="button" className="frankie-mobile-only" ref={menu} aria-label="Open conversations" aria-haspopup="dialog" aria-expanded={drawerOpen} onClick={() => setDrawerOpen(true)}><Menu size={20} /></button> : null}<strong>{name}</strong><span className="frankie-header-caption">Product assistant</span></div><div>
+        <button type="button" disabled={busy} onClick={onNew} aria-label="Start a new conversation"><Plus size={16} /><span>New chat</span></button>
+        <details className="frankie-chat-settings"><summary aria-label="Chat settings"><Settings size={19} /></summary><div><strong>Chat settings</strong><p>History syncs automatically for signed-in users.</p><button type="button" onClick={() => void refresh()} disabled={historyLoading || !showHistory}><History size={16} />Refresh history</button><small>Skills are checked at the start of each message.</small></div></details>
+      </div></header>
+      <div className="frankie-page-canvas"><FrankieInline {...panel} header={panel.header ?? false} emptyState={panel.emptyState ?? <PageEmptyState />} /></div>
+    </div>
+    {showHistory ? <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(); }}><aside>{history}</aside></dialog> : null}
+  </div>;
 }
 
-/**
- * A complete, polished chat route matching Frankie's own conversation canvas.
- * The shell, header, empty state and composer are all scoped under
- * `.frankie-root`, so host application styles remain untouched.
- */
-export function FrankieChatPage({
-  className,
-  style,
-  header,
-  footer,
-  emptyState,
-  renderMessage,
-  renderTool,
-  placeholder,
-  autoFocus,
-  ...providerProps
-}: FrankieChatPageProps) {
-  return (
-    <main
-      className={["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" ")}
-      style={{ height: "100dvh", minHeight: "100dvh", width: "100%", ...style }}
-    >
-      <FrankieProvider {...providerProps}>
-        <PageChrome
-          header={header}
-          footer={footer}
-          emptyState={emptyState}
-          renderMessage={renderMessage}
-          renderTool={renderTool}
-          placeholder={placeholder}
-          autoFocus={autoFocus}
-        />
-      </FrankieProvider>
-    </main>
-  );
+/** Reusable product chat with one shared conversation state and scoped styling. */
+export function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, showHistory = true, navigation, ...provider }: FrankieChatPageProps) {
+  const [id, setId] = useState(() => provider.conversationId ?? crypto.randomUUID());
+  const onNew = () => setId(crypto.randomUUID());
+  return <div className={["frankie-root", "frankie-chat-page", className].filter(Boolean).join(" ")} style={{ height: "100%", minHeight: "min(36rem, 100dvh)", width: "100%", ...style }}>
+    <FrankieProvider {...provider} conversationId={id} storageNamespace={(provider.storageNamespace ?? "frankie." + provider.publishableKey) + "." + id}>
+      <PageChrome showHistory={showHistory} navigation={navigation} currentId={id} onSelect={setId} onNew={onNew} header={header} footer={footer} emptyState={emptyState} renderMessage={renderMessage} renderTool={renderTool} placeholder={placeholder} autoFocus={autoFocus} />
+    </FrankieProvider>
+  </div>;
 }

package/src/components/chat/FrankieWidget.tsx

@@ -13,6 +13,8 @@ export interface FrankieWidgetProps extends ChatPanelProps {
   /** Distance from the viewport edges, in pixels. */
   offset?: number;
   defaultOpen?: boolean;
+  /** Host overlays should sit above the assistant. Override for your layer system. */
+  zIndex?: number;
   /** Controlled mode: pass both to drive open state from the host app. */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -30,6 +32,7 @@ export function FrankieWidget({
   position = "bottom-right",
   offset = 24,
   defaultOpen = false,
+  zIndex = 20,
   open: controlledOpen,
   onOpenChange,
   renderLauncher,
@@ -63,11 +66,12 @@ export function FrankieWidget({
   return (
     <div
       className={cn("frankie-root frankie-widget", mode === "dark" && "dark")}
-      style={{ ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex: 2147483000 }}
+      style={{ ...themeToCssVars(theme), position: "fixed", bottom: offset, ...side, zIndex, pointerEvents: "none" }}
       data-frankie-mode={mode}
     >
       <div className={cn("flex flex-col gap-3", position === "bottom-left" ? "items-start" : "items-end")}>
-        {open ? <ChatPanel {...panelProps} onClose={() => setOpen(false)} autoFocus /> : null}
+        {open ? <div style={{ pointerEvents: "auto", maxHeight: "calc(100dvh - 100px)", overflow: "hidden" }}><ChatPanel {...panelProps} className={cn("frankie-widget-panel", panelProps.className)} onClose={() => setOpen(false)} autoFocus /></div> : null}
+        <div style={{ pointerEvents: "auto" }}>
         {renderLauncher ? (
           renderLauncher({ open, toggle: () => setOpen(!open), label })
         ) : (
@@ -81,7 +85,7 @@ export function FrankieWidget({
           >
             {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
           </Button>
-        )}
+        )}</div>
       </div>
     </div>
   );

package/src/hooks/FrankieProvider.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import type { PublicWidgetConfig, WidgetTheme } from "@frankieai/core";
 import { FrankieClient, type FrankieClientOptions, type PageContext } from "../lib/client.js";
+import { FrankieChatContext, useFrankieChatState } from "./useFrankieChat.js";
 
 export interface FrankieProviderProps extends FrankieClientOptions {
   children: ReactNode;
@@ -29,10 +30,12 @@ export function FrankieProvider({
   config: providedConfig,
   ...clientOptions
 }: FrankieProviderProps) {
+  const tokenCallback = useRef(clientOptions.getUserToken);
+  tokenCallback.current = clientOptions.getUserToken;
   const client = useMemo(
-    () => new FrankieClient(clientOptions),
+    () => 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.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId, clientOptions.persist, clientOptions.fetchImpl, Boolean(clientOptions.getUserToken)],
   );
 
   const [config, setConfig] = useState<PublicWidgetConfig | undefined>(providedConfig);
@@ -71,7 +74,12 @@ export function FrankieProvider({
     [client, config, configError, loading, context, theme],
   );
 
-  return <FrankieContext.Provider value={value}>{children}</FrankieContext.Provider>;
+  return <FrankieContext.Provider value={value}><ConversationState key={client.namespace + ":" + (client.conversationId ?? "")}>{children}</ConversationState></FrankieContext.Provider>;
+}
+
+function ConversationState({ children }: { children: ReactNode }) {
+  const chat = useFrankieChatState();
+  return <FrankieChatContext.Provider value={chat}>{children}</FrankieChatContext.Provider>;
 }
 
 export function useFrankie(): FrankieContextValue {

package/src/hooks/useFrankieChat.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { ChatAttachment } from "@frankieai/core";
+import { createContext, useContext, useCallback, useEffect, useRef, useState } from "react";
+import type { ChatAttachment, LoadedSkill } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -19,6 +19,8 @@ export interface SendOptions {
 }
 
 export interface UseFrankieChatResult {
+  loadedSkills: LoadedSkill[] | null;
+  restoring: boolean;
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
   busy: boolean;
@@ -34,12 +36,20 @@ export interface UseFrankieChatResult {
 let counter = 0;
 const nextId = (prefix: string) => `${prefix}_${Date.now().toString(36)}_${(counter += 1)}`;
 
+export const FrankieChatContext = createContext<UseFrankieChatResult | null>(null);
 export function useFrankieChat(): UseFrankieChatResult {
+  const value = useContext(FrankieChatContext);
+  if (!value) throw new Error("useFrankieChat requires FrankieProvider.");
+  return value;
+}
+
+export function useFrankieChatState(): UseFrankieChatResult {
   const { client, context } = useFrankie();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
   const [restored, setRestored] = useState(false);
+  const [loadedSkills, setLoadedSkills] = useState<LoadedSkill[] | null>(null);
   const abortRef = useRef<AbortController | null>(null);
   const mounted = useRef(true);
   // State updates can be batched while a stream is arriving. Keep the latest
@@ -82,7 +92,7 @@ export function useFrankieChat(): UseFrankieChatResult {
           setMessages(restoredMessages);
         }
       } catch {
-        /* A new conversation does not exist remotely until its first message. */
+        if (active) setError("Could not restore this conversation. Check your sign-in and connection, then try opening it again.");
       } finally {
         if (active) setRestored(true);
       }
@@ -117,12 +127,13 @@ export function useFrankieChat(): UseFrankieChatResult {
     async (text: string, opts?: SendOptions) => {
       const trimmed = text.trim();
       const attachments = opts?.attachments ?? [];
-      if ((!trimmed && attachments.length === 0) || busy) return;
+      if ((!trimmed && attachments.length === 0) || abortRef.current || !restored) return;
       // The server needs a message; an attachment-only turn gets a stand-in.
       const outgoing = trimmed || "Please take a look at the attached file(s).";
 
       const assistantId = nextId("a");
       setError(undefined);
+      setLoadedSkills(null);
       setBusy(true);
       const next = [
         ...messagesRef.current,
@@ -151,6 +162,7 @@ export function useFrankieChat(): UseFrankieChatResult {
             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;
@@ -202,7 +214,7 @@ export function useFrankieChat(): UseFrankieChatResult {
         abortRef.current = null;
       }
     },
-    [busy, client, context, patchAssistant],
+    [busy, client, context, patchAssistant, restored],
   );
 
   const stop = useCallback(() => abortRef.current?.abort(), []);
@@ -215,6 +227,7 @@ export function useFrankieChat(): UseFrankieChatResult {
     setError(undefined);
     setBusy(false);
     setRestored(true);
+    setLoadedSkills(null);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -222,7 +235,7 @@ export function useFrankieChat(): UseFrankieChatResult {
     }
   }, [client]);
 
-  return { messages, busy, ...(error ? { error } : {}), send, stop, reset };
+  return { messages, busy, loadedSkills, restoring: !restored, ...(error ? { error } : {}), send, stop, reset };
 }
 
 

package/src/lib/client.ts

@@ -21,15 +21,15 @@ export interface FrankieClientOptions {
   publishableKey: string;
   /**
    * Fetches a short-lived JWT for the signed-in user from the host's own
-   * backend. Called once per session, and again when a session expires.
+   * backend. Called before each turn; return undefined after sign-out.
    * Omit only for tenants that allow anonymous chat.
    */
   getUserToken?: () => Promise<string | undefined> | string | undefined;
   fetchImpl?: typeof fetch;
   /**
    * Remember the session (and, in the hook, the transcript) in localStorage so a
-   * page reload resumes the same conversation. On by default in the browser;
-   * set false for an ephemeral chat that starts fresh every load.
+   * page reload resumes the same anonymous conversation. Authenticated chat
+   * never writes tokens or transcripts to localStorage; it uses server history.
    */
   persist?: boolean;
   /** Override localStorage namespace for session and transcript. */
@@ -59,11 +59,15 @@ export class FrankieClient {
   private readonly baseUrl: string;
   private readonly doFetch: typeof fetch;
   private session?: CreateSessionResponse;
+  private sessionUserToken?: string;
 
   constructor(private readonly options: FrankieClientOptions) {
     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 { /* storage may be unavailable */ }
+    }
   }
 
   get sessionId(): string | undefined {
@@ -76,7 +80,9 @@ export class FrankieClient {
 
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist(): boolean {
-    return this.options.persist !== false && typeof window !== "undefined";
+    // Authenticated history comes from the identity-checked server. Do not leave
+    // a previous user's bearer token or transcript in shared browser storage.
+    return !this.options.getUserToken && this.options.persist !== false && typeof window !== "undefined";
   }
 
   /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
@@ -115,15 +121,17 @@ export class FrankieClient {
   }
 
   async ensureSession(context?: PageContext): Promise<CreateSessionResponse> {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 30_000) 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() + 30_000) 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 },
@@ -134,6 +142,7 @@ export class FrankieClient {
       }),
     });
     this.session = (await this.unwrap(response)) as CreateSessionResponse;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return this.session;
   }
@@ -148,7 +157,7 @@ export class FrankieClient {
   }
 
   async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string } | undefined> {
-    if (!id) return undefined;
+    if (!id || !this.options.getUserToken) return undefined;
     const userToken = await this.requireUserToken();
     const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
       method: "POST",
@@ -157,6 +166,7 @@ export class FrankieClient {
     if (response.status === 404) return undefined;
     const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string };
     this.session = body.session;
+    this.sessionUserToken = userToken;
     this.writeStored();
     return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
   }

package/src/styles/frankie.css

@@ -45,6 +45,27 @@
 }
 
 @layer components {
+  .frankie-page-shell { display:flex; flex:1; min-height:0; height:100%; background:var(--frankie-background); color:var(--frankie-foreground); }
+  .frankie-page-main { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
+  .frankie-history-desktop { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:16px; padding:20px 14px; border-right:1px solid var(--frankie-border); background:var(--frankie-secondary); overflow:auto; }
+  .frankie-history-heading { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
+  .frankie-new-chat { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--frankie-border); border-radius:10px; background:var(--frankie-background); min-height:44px; font-weight:600; cursor:pointer; }
+  .frankie-history-search > span { display:block; font-size:12px; color:var(--frankie-muted-foreground); margin-bottom:6px; }
+  .frankie-history-search input { width:100%; min-height:40px; padding:8px 10px; border:1px solid var(--frankie-border); border-radius:8px; background:var(--frankie-background); }
+  .frankie-history-list { display:flex; flex-direction:column; gap:4px; flex:1; }
+  .frankie-history-list button { display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid transparent; border-radius:8px; padding:10px; min-height:54px; background:transparent; text-align:left; cursor:pointer; }
+  .frankie-history-list button span { width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
+  .frankie-history-list small { font-size:11px; color:var(--frankie-muted-foreground); }.frankie-history-list button:hover,.frankie-history-list button[aria-current] { background:var(--frankie-background); border-color:var(--frankie-border); }
+  .frankie-history-desktop > p,.frankie-history-dialog p { font-size:13px; color:var(--frankie-muted-foreground); }
+  .frankie-header-caption { color:var(--frankie-muted-foreground); font-size:12px; }.frankie-page-header button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:40px; cursor:pointer; }
+  .frankie-chat-settings { position:relative; }.frankie-chat-settings summary { list-style:none; display:grid; place-items:center; width:40px; height:40px; cursor:pointer; border-radius:8px; }.frankie-chat-settings summary::-webkit-details-marker { display:none; }
+  .frankie-chat-settings > div { position:absolute; top:46px; right:0; z-index:5; width:min(280px,80vw); display:grid; gap:12px; padding:16px; border:1px solid var(--frankie-border); border-radius:12px; background:var(--frankie-background); box-shadow:0 10px 30px #0002; font-size:13px; }.frankie-chat-settings p { margin:0; color:var(--frankie-muted-foreground); }
+  .frankie-loaded-skills { width:100%; max-width:760px; font-size:12px; color:var(--frankie-muted-foreground); }.frankie-loaded-skills summary { cursor:pointer; padding:6px 0; }.frankie-loaded-skills ul { list-style:none; padding:4px 0; margin:0; }.frankie-loaded-skills li { display:flex; gap:8px; padding:4px 0; }.frankie-loaded-skills small { opacity:.7; }
+  .frankie-history-dialog { padding:0; border:0; margin:0; max-height:none; height:100dvh; max-width:none; width:min(320px,86vw); background:var(--frankie-secondary); color:var(--frankie-foreground); }.frankie-history-dialog::backdrop { background:#0008; }.frankie-history-dialog > aside { display:flex; flex-direction:column; gap:16px; height:100%; padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); overflow:auto; }
+  .frankie-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px); }
+  .frankie-root button:focus-visible,.frankie-root summary:focus-visible,.frankie-root input:focus-visible { outline:2px solid var(--frankie-primary); outline-offset:3px; }
+  .frankie-root button:disabled { opacity:.5; cursor:not-allowed; }
+  @media(max-width:760px) { .frankie-history-desktop { display:none; }.frankie-mobile-only { display:inline-flex!important; }.frankie-header-caption { display:none; }.frankie-page-header { padding:6px 10px; }.frankie-history-heading button { border:0; background:transparent; min-width:44px; min-height:44px; align-items:center; justify-content:center; }.frankie-page-prompts { gap:8px; }.frankie-widget-panel { width:calc(100vw - 32px); } }
   .frankie-root {
     --frankie-background: #ffffff;
     --frankie-foreground: #0a0a0a;
@@ -294,7 +315,7 @@
   .frankie-page-prompts button {
     display: grid;
     min-height: 60px;
-    grid-template-columns: 2rem minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     gap: .65rem;
     padding: .75rem .9rem;

package/src/widget.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { FrankieServerEvent, PublicWidgetConfig } from "@frankieai/core";
 import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
@@ -7,6 +7,7 @@ import { Markdown } from "./components/chat/Markdown.js";
 import { FrankieClient, readEventStream } from "./lib/client.js";
 import { applyEvent, newAssistantMessage } from "./lib/messages.js";
 import { themeToCssVars } from "./lib/theme.js";
+import { useFrankieChat } from "./hooks/useFrankieChat.js";
 
 const config: PublicWidgetConfig = {
   tenantId: "acme",
@@ -97,6 +98,24 @@ describe("readEventStream", () => {
 });
 
 describe("FrankieClient", () => {
+  it("does not request signed-in history for an anonymous conversation", async () => {
+    const fetchImpl = vi.fn();
+    const client = new FrankieClient({ publishableKey: "pk_anonymous_fixture", conversationId: "new", fetchImpl, persist: false });
+    expect(await client.resumeConversation()).toBeUndefined();
+    expect(fetchImpl).not.toHaveBeenCalled();
+  });
+  it("keeps authenticated tokens out of storage and rejects a cached session after sign-out", async () => {
+    let token: string | undefined = "fixture-user-token";
+    const fetchImpl = vi.fn(async () => Response.json({ sessionId: "one", sessionToken: "fixture-bearer", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } }));
+    const client = new FrankieClient({ publishableKey: "pk_auth_fixture", getUserToken: () => token, fetchImpl });
+    await client.ensureSession();
+    expect(client.persist).toBe(false);
+    expect(window.localStorage.getItem("frankie.pk_auth_fixture.session")).toBeNull();
+    token = undefined;
+    await expect(client.ensureSession()).rejects.toThrow("sign in again");
+    expect(client.sessionId).toBeUndefined();
+    expect(fetchImpl).toHaveBeenCalledTimes(1);
+  });
   // The client persists its session to localStorage; isolate tests that reuse
   // the same publishable-key namespace.
   beforeEach(() => {
@@ -192,6 +211,21 @@ describe("themeToCssVars", () => {
 });
 
 describe("ChatPanel", () => {
+  it("shares prompt controls, transcript and loaded skills across provider consumers", async () => {
+    cleanup();
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => String(url).endsWith("/v1/session") ? Response.json({ sessionId: "shared", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: true } }) : new Response(sseStream([{ type: "skills_loaded", skills: [{ id: "review", name: "Review items", revision: 2 }] }, { type: "text_delta", text: "Shared response" }, { type: "turn_end", stopReason: "end_turn" }])));
+    function Prompt() { const chat = useFrankieChat(); return <button disabled={chat.restoring} onClick={() => void chat.send("Shared prompt")}>External prompt</button>; }
+    render(<FrankieProvider publishableKey="pk_shared_fixture" config={config} fetchImpl={fetchImpl} persist={false}><Prompt /><ChatPanel /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "External prompt" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "External prompt" }));
+    expect(await screen.findByText("Shared response")).toBeTruthy();
+    expect(screen.getByText("1 skill loaded")).toBeTruthy();
+    expect(fetchImpl.mock.calls.filter(([url]) => String(url).endsWith("/v1/chat"))).toHaveLength(1);
+    fireEvent.click(screen.getByRole("button", { name: "Start a new conversation" }));
+    await waitFor(() => expect(screen.queryByText("Shared response")).toBeNull());
+    expect(screen.queryByText("1 skill loaded")).toBeNull();
+    cleanup();
+  });
   it("shows the greeting and suggested prompts before the first message", async () => {
     render(
       <FrankieProvider baseUrl="https://agent.acme.com" publishableKey="pk_1" config={config}>