@frankieai/react 0.1.1 → 0.1.4

package/dist/index.d.cts

@@ -30,6 +30,16 @@ interface FrankieClientOptions {
      * set false for an ephemeral chat that starts fresh every load.
      */
     persist?: boolean;
+    /** Override localStorage namespace for session and transcript. */
+    storageNamespace?: string;
+    /** Stable id for a server-backed conversation. */
+    conversationId?: string;
+}
+interface ChatConversation {
+    id: string;
+    title: string;
+    createdAt: number;
+    updatedAt: number;
 }
 declare class FrankieApiError extends Error {
     readonly status: number;
@@ -43,45 +53,39 @@ declare class FrankieClient {
     private session?;
     constructor(options: FrankieClientOptions);
     get sessionId(): string | undefined;
+    get conversationId(): string | undefined;
     /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
     get persist(): boolean;
-    /** localStorage namespace for this tenant, shared with the chat hook. */
+    /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
     get namespace(): string;
     private readStored;
     private writeStored;
     getConfig(signal?: AbortSignal): Promise<PublicWidgetConfig>;
-    /** Opens (or reuses) a chat session. */
     ensureSession(context?: PageContext): Promise<CreateSessionResponse>;
-    /** Forget the current session so the next send starts a fresh conversation. */
+    listConversations(): Promise<ChatConversation[]>;
+    resumeConversation(id?: string | undefined): Promise<{
+        messages: unknown[];
+        title: string;
+    } | undefined>;
+    syncConversation(messages: unknown[], title?: string): Promise<void>;
+    deleteConversation(id: string): Promise<void>;
+    private requireUserToken;
     resetSession(): void;
-    /**
-     * Sends a message and invokes `onEvent` for each server event as it arrives.
-     * Resolves when the turn ends.
-     */
     send(input: {
         message: string;
         context?: PageContext;
-        /** Model id chosen by the user, honoured only if the workspace allows it. */
         model?: string;
-        /** Files attached to this turn. */
         attachments?: ChatAttachment[];
         signal?: AbortSignal;
     }, onEvent: (event: FrankieServerEvent) => void): Promise<void>;
     private unwrap;
 }
-/** Parse the server's `data:`-only SSE stream into typed events. */
 declare function readEventStream(body: ReadableStream<Uint8Array>): AsyncGenerator<FrankieServerEvent>;
 
 interface FrankieProviderProps extends FrankieClientOptions {
     children: ReactNode;
-    /**
-     * Page context sent with every turn — current route, plan tier, whatever the
-     * agent should know. Treated as data by the server, never as instructions.
-     */
     context?: PageContext;
-    /** Overrides for the server-side theme, so a host can restyle without a redeploy. */
     theme?: WidgetTheme;
-    /** Skip the `/v1/config` fetch by supplying the config yourself. */
     config?: PublicWidgetConfig;
 }
 interface FrankieContextValue {
@@ -94,7 +98,6 @@ interface FrankieContextValue {
 }
 declare function FrankieProvider({ children, context, theme, config: providedConfig, ...clientOptions }: FrankieProviderProps): react.JSX.Element;
 declare function useFrankie(): FrankieContextValue;
-/** The theme actually in effect: provider override wins over server config. */
 declare function useFrankieTheme(): WidgetTheme | undefined;
 
 interface ToolActivity {
@@ -215,6 +218,16 @@ interface FrankieInlineProps extends ChatPanelProps {
  */
 declare function FrankieInline({ className, style, ...panelProps }: FrankieInlineProps): react.JSX.Element;
 
+/**
+ * A complete chat route in one component. This is the simplest way to add a
+ * dedicated /chat page to an app while keeping the existing floating widget.
+ */
+interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">, Pick<ChatPanelProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"> {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, ...providerProps }: FrankieChatPageProps): react.JSX.Element;
+
 interface ComposerAttachmentsConfig {
     enabled: boolean;
     /** Accepted MIME patterns, e.g. "image/*". */
@@ -344,4 +357,4 @@ declare function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark";
 /** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };
+export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };

package/dist/index.d.ts

@@ -30,6 +30,16 @@ interface FrankieClientOptions {
      * set false for an ephemeral chat that starts fresh every load.
      */
     persist?: boolean;
+    /** Override localStorage namespace for session and transcript. */
+    storageNamespace?: string;
+    /** Stable id for a server-backed conversation. */
+    conversationId?: string;
+}
+interface ChatConversation {
+    id: string;
+    title: string;
+    createdAt: number;
+    updatedAt: number;
 }
 declare class FrankieApiError extends Error {
     readonly status: number;
@@ -43,45 +53,39 @@ declare class FrankieClient {
     private session?;
     constructor(options: FrankieClientOptions);
     get sessionId(): string | undefined;
+    get conversationId(): string | undefined;
     /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
     get persist(): boolean;
-    /** localStorage namespace for this tenant, shared with the chat hook. */
+    /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
     get namespace(): string;
     private readStored;
     private writeStored;
     getConfig(signal?: AbortSignal): Promise<PublicWidgetConfig>;
-    /** Opens (or reuses) a chat session. */
     ensureSession(context?: PageContext): Promise<CreateSessionResponse>;
-    /** Forget the current session so the next send starts a fresh conversation. */
+    listConversations(): Promise<ChatConversation[]>;
+    resumeConversation(id?: string | undefined): Promise<{
+        messages: unknown[];
+        title: string;
+    } | undefined>;
+    syncConversation(messages: unknown[], title?: string): Promise<void>;
+    deleteConversation(id: string): Promise<void>;
+    private requireUserToken;
     resetSession(): void;
-    /**
-     * Sends a message and invokes `onEvent` for each server event as it arrives.
-     * Resolves when the turn ends.
-     */
     send(input: {
         message: string;
         context?: PageContext;
-        /** Model id chosen by the user, honoured only if the workspace allows it. */
         model?: string;
-        /** Files attached to this turn. */
         attachments?: ChatAttachment[];
         signal?: AbortSignal;
     }, onEvent: (event: FrankieServerEvent) => void): Promise<void>;
     private unwrap;
 }
-/** Parse the server's `data:`-only SSE stream into typed events. */
 declare function readEventStream(body: ReadableStream<Uint8Array>): AsyncGenerator<FrankieServerEvent>;
 
 interface FrankieProviderProps extends FrankieClientOptions {
     children: ReactNode;
-    /**
-     * Page context sent with every turn — current route, plan tier, whatever the
-     * agent should know. Treated as data by the server, never as instructions.
-     */
     context?: PageContext;
-    /** Overrides for the server-side theme, so a host can restyle without a redeploy. */
     theme?: WidgetTheme;
-    /** Skip the `/v1/config` fetch by supplying the config yourself. */
     config?: PublicWidgetConfig;
 }
 interface FrankieContextValue {
@@ -94,7 +98,6 @@ interface FrankieContextValue {
 }
 declare function FrankieProvider({ children, context, theme, config: providedConfig, ...clientOptions }: FrankieProviderProps): react.JSX.Element;
 declare function useFrankie(): FrankieContextValue;
-/** The theme actually in effect: provider override wins over server config. */
 declare function useFrankieTheme(): WidgetTheme | undefined;
 
 interface ToolActivity {
@@ -215,6 +218,16 @@ interface FrankieInlineProps extends ChatPanelProps {
  */
 declare function FrankieInline({ className, style, ...panelProps }: FrankieInlineProps): react.JSX.Element;
 
+/**
+ * A complete chat route in one component. This is the simplest way to add a
+ * dedicated /chat page to an app while keeping the existing floating widget.
+ */
+interface FrankieChatPageProps extends Omit<FrankieProviderProps, "children">, Pick<ChatPanelProps, "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"> {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function FrankieChatPage({ className, style, header, footer, emptyState, renderMessage, renderTool, placeholder, autoFocus, ...providerProps }: FrankieChatPageProps): react.JSX.Element;
+
 interface ComposerAttachmentsConfig {
     enabled: boolean;
     /** Accepted MIME patterns, e.g. "image/*". */
@@ -344,4 +357,4 @@ declare function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark";
 /** shadcn/ui's class helper: conditional classes with Tailwind conflict resolution. */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };
+export { type AssistantChatMessage, Avatar, Badge, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChatMessage, ChatPanel, type ChatPanelProps, Composer, FRANKIE_CLOUD_URL, FrankieApiError, FrankieChatPage, type FrankieChatPageProps, FrankieClient, type FrankieClientOptions, FrankieInline, type FrankieInlineProps, FrankieProvider, type FrankieProviderProps, FrankieWidget, type FrankieWidgetProps, Markdown, type MessageAttachment, MessageBubble, type PageContext, ScrollArea, type SendOptions, Separator, SuggestedPrompts, Textarea, type ToolActivity, ToolActivityList, ToolActivityRow, TypingDots, type UseFrankieChatResult, type UserChatMessage, applyEvent, buttonVariants, cn, newAssistantMessage, newUserMessage, readEventStream, resolveMode, themeToCssVars, useFrankie, useFrankieChat, useFrankieTheme };

package/dist/index.js

@@ -28,13 +28,16 @@ var FrankieClient = class {
   get sessionId() {
     return this.session?.sessionId;
   }
+  get conversationId() {
+    return this.options.conversationId;
+  }
   /** Whether this client persists across reloads (browser only, opt-out via `persist:false`). */
   get persist() {
     return this.options.persist !== false && typeof window !== "undefined";
   }
-  /** localStorage namespace for this tenant, shared with the chat hook. */
+  /** localStorage namespace for this tenant/conversation, shared with the chat hook. */
   get namespace() {
-    return `frankie.${this.options.publishableKey}`;
+    return this.options.storageNamespace ?? `frankie.${this.options.publishableKey}`;
   }
   readStored() {
     if (!this.persist) return void 0;
@@ -62,30 +65,80 @@ var FrankieClient = class {
     });
     return await this.unwrap(response);
   }
-  /** Opens (or reuses) a chat session. */
   async ensureSession(context) {
-    if (this.session && new Date(this.session.expiresAt).getTime() > Date.now() + 3e4) {
-      return this.session;
-    }
+    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) {
+      throw new FrankieApiError(
+        "Your signed-in Frankie session could not be verified. Refresh the page and sign in again.",
+        401,
+        "user_token_unavailable"
+      );
+    }
     const response = await this.doFetch(`${this.baseUrl}/v1/session`, {
       method: "POST",
       headers: { "content-type": "application/json", "x-frankie-key": this.options.publishableKey },
-      body: JSON.stringify({ ...userToken ? { userToken } : {}, ...context ? { context } : {} })
+      body: JSON.stringify({
+        ...userToken ? { userToken } : {},
+        ...context ? { context } : {},
+        ...this.options.conversationId ? { conversationId: this.options.conversationId } : {}
+      })
     });
     this.session = await this.unwrap(response);
     this.writeStored();
     return this.session;
   }
-  /** Forget the current session so the next send starts a fresh conversation. */
+  async listConversations() {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations`, {
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    const body = await this.unwrap(response);
+    return Array.isArray(body.conversations) ? body.conversations : [];
+  }
+  async resumeConversation(id = this.options.conversationId) {
+    if (!id) return void 0;
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}/resume`, {
+      method: "POST",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status === 404) return void 0;
+    const body = await this.unwrap(response);
+    this.session = body.session;
+    this.writeStored();
+    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
+  }
+  async syncConversation(messages, title) {
+    if (!this.session || !this.options.conversationId) return;
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(this.options.conversationId)}`, {
+      method: "PUT",
+      headers: {
+        "content-type": "application/json",
+        "x-frankie-key": this.options.publishableKey,
+        authorization: `Bearer ${this.session.sessionToken}`
+      },
+      body: JSON.stringify({ messages, ...title ? { title } : {} })
+    });
+    await this.unwrap(response);
+  }
+  async deleteConversation(id) {
+    const userToken = await this.requireUserToken();
+    const response = await this.doFetch(`${this.baseUrl}/v1/conversations/${encodeURIComponent(id)}`, {
+      method: "DELETE",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` }
+    });
+    if (response.status !== 404) await this.unwrap(response);
+  }
+  async requireUserToken() {
+    const token = await this.options.getUserToken?.();
+    if (!token) throw new FrankieApiError("Sign in to access your chat history.", 401, "unauthorized");
+    return token;
+  }
   resetSession() {
     this.session = void 0;
     this.writeStored();
   }
-  /**
-   * Sends a message and invokes `onEvent` for each server event as it arrives.
-   * Resolves when the turn ends.
-   */
   async send(input, onEvent) {
     const session = await this.ensureSession(input.context);
     const body = {
@@ -171,9 +224,8 @@ function FrankieProvider({
 }) {
   const client = useMemo(
     () => new FrankieClient(clientOptions),
-    // The client holds session state; rebuild it only when the endpoint changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [clientOptions.baseUrl, clientOptions.publishableKey]
+    [clientOptions.baseUrl, clientOptions.publishableKey, clientOptions.storageNamespace, clientOptions.conversationId]
   );
   const [config, setConfig] = useState(providedConfig);
   const [configError, setConfigError] = useState(void 0);
@@ -299,6 +351,7 @@ function useFrankieChat() {
   const [messages, setMessages] = useState2([]);
   const [busy, setBusy] = useState2(false);
   const [error, setError] = useState2(void 0);
+  const [restored, setRestored] = useState2(false);
   const abortRef = useRef(null);
   const mounted = useRef(true);
   useEffect2(() => {
@@ -310,22 +363,38 @@ function useFrankieChat() {
   }, []);
   const storageKey = `${client.namespace}.messages`;
   useEffect2(() => {
-    if (!client.persist) return;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      const stored = raw ? JSON.parse(raw) : [];
-      if (Array.isArray(stored) && stored.length) setMessages(stored);
-    } catch {
-    }
-  }, [storageKey]);
+    let active = true;
+    const restore = async () => {
+      if (client.persist) {
+        try {
+          const raw = window.localStorage.getItem(storageKey);
+          const stored = raw ? JSON.parse(raw) : [];
+          if (Array.isArray(stored) && stored.length && active) setMessages(stored);
+        } catch {
+        }
+      }
+      try {
+        const remote = await client.resumeConversation();
+        if (active && remote?.messages.length) setMessages(remote.messages);
+      } catch {
+      } finally {
+        if (active) setRestored(true);
+      }
+    };
+    void restore();
+    return () => {
+      active = false;
+    };
+  }, [client, storageKey]);
   useEffect2(() => {
-    if (!client.persist || busy) return;
+    if (!client.persist || !restored || busy) return;
     try {
       if (messages.length) window.localStorage.setItem(storageKey, JSON.stringify(messages));
       else window.localStorage.removeItem(storageKey);
     } catch {
     }
-  }, [messages, busy, client, storageKey]);
+    if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => void 0);
+  }, [messages, busy, client, storageKey, restored]);
   const patchAssistant = useCallback((id, update) => {
     setMessages(
       (current) => current.map(
@@ -354,6 +423,8 @@ function useFrankieChat() {
       const abort = new AbortController();
       abortRef.current = abort;
       try {
+        let receivedText = false;
+        let receivedToolActivity = false;
         await client.send(
           {
             message: outgoing,
@@ -364,9 +435,18 @@ function useFrankieChat() {
           },
           (event) => {
             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;
             patchAssistant(assistantId, (message) => applyEvent(message, event));
           }
         );
+        if (!receivedText) {
+          patchAssistant(assistantId, (message) => ({
+            ...message,
+            status: "done",
+            text: receivedToolActivity ? "Completed. Open Agent activity for the details." : "Frankie didn\u2019t return an answer. Please try again."
+          }));
+        }
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
@@ -375,7 +455,7 @@ function useFrankieChat() {
             text: message.text || "Stopped."
           }));
         } else {
-          const message = caught instanceof FrankieApiError ? caught.message : "Could not reach the assistant. Check your connection and try again.";
+          const message = caught instanceof FrankieApiError ? caught.message : caught instanceof Error && caught.message.startsWith("Frankie") ? caught.message : "Could not reach the assistant. Check your connection and try again.";
           if (mounted.current) setError(message);
           patchAssistant(assistantId, (current) => ({ ...current, status: "error", error: message }));
         }
@@ -399,6 +479,7 @@ function useFrankieChat() {
     setMessages([]);
     setError(void 0);
     setBusy(false);
+    setRestored(true);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -406,10 +487,16 @@ function useFrankieChat() {
   }, [client]);
   return { messages, busy, ...error ? { error } : {}, send, stop, reset };
 }
+function conversationTitle(messages) {
+  const first = messages.find((message) => message.role === "user" && message.text.trim());
+  if (!first) return void 0;
+  const title = first.text.trim().replace(/\s+/g, " ");
+  return title.length > 42 ? `${title.slice(0, 42)}\u2026` : title;
+}
 
 // src/components/chat/FrankieWidget.tsx
 import { MessageCircle, X as X4 } from "lucide-react";
-import { useEffect as useEffect5, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState6 } from "react";
 
 // src/lib/theme.ts
 function themeToCssVars(theme) {
@@ -470,7 +557,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 useState4 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 
 // src/components/ui/avatar.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -731,7 +818,8 @@ function readAsBase64(file) {
 }
 
 // src/components/chat/MessageBubble.tsx
-import { Paperclip as Paperclip2 } from "lucide-react";
+import { Check as Check2, Copy, Paperclip as Paperclip2 } from "lucide-react";
+import { useState as useState4 } from "react";
 
 // src/components/chat/Markdown.tsx
 import { Fragment as Fragment2 } from "react";
@@ -836,7 +924,7 @@ function renderToken(token) {
 }
 
 // src/components/chat/ToolActivityList.tsx
-import { Check, Loader2, ShieldAlert, X as X2 } from "lucide-react";
+import { Check, ChevronDown, Loader2, ShieldAlert, X as X2 } from "lucide-react";
 
 // src/components/ui/badge.tsx
 import { cva as cva2 } from "class-variance-authority";
@@ -867,7 +955,20 @@ function Badge({
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 function ToolActivityList({ tools, renderTool }) {
   if (tools.length === 0) return null;
-  return /* @__PURE__ */ jsx10("ul", { className: "mt-2 flex flex-col gap-1", children: tools.map((tool) => /* @__PURE__ */ jsx10("li", { children: renderTool ? renderTool(tool) : /* @__PURE__ */ jsx10(ToolActivityRow, { tool }) }, tool.id)) });
+  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: [
+        "\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)) })
+  ] });
 }
 function ToolActivityRow({ tool }) {
   return /* @__PURE__ */ jsxs2(Badge, { variant: badgeVariant(tool.status), title: tool.detail ?? tool.name, children: [
@@ -916,18 +1017,36 @@ function MessageBubble({
         },
         `${file.name}-${index}`
       )) }) : null,
-      message.text ? /* @__PURE__ */ jsx11("div", { className: "max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground", children: message.text }) : 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 })
+      ] }) : null
     ] });
   }
   const empty = message.text.length === 0 && message.tools.length === 0;
   return /* @__PURE__ */ jsxs3("div", { className: "flex gap-2", children: [
-    /* @__PURE__ */ jsx11(Avatar, { ...avatarUrl ? { src: avatarUrl } : {}, name: assistantName, className: "mt-0.5" }),
+    /* @__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
+    ] }),
     /* @__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
     ] })
   ] });
 }
+function MessageCopyButton({ text }) {
+  const [copied, setCopied] = useState4(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } 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" }) });
+}
 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",
@@ -981,7 +1100,7 @@ function ChatPanel({
   const scrollRef = useRef3(null);
   const features = config?.features;
   const pickerModels = features?.modelPicker.enabled ? features.modelPicker.models : [];
-  const [model, setModel] = useState4(void 0);
+  const [model, setModel] = useState5(void 0);
   useEffect4(() => {
     const node = scrollRef.current;
     if (!node) return;
@@ -1011,7 +1130,11 @@ function ChatPanel({
           /* @__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__ */ jsx13(CardContent, { children: /* @__PURE__ */ jsx13(ScrollArea, { ref: scrollRef, className: "flex h-full flex-col gap-4 p-4", "aria-live": "polite", children: configError ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: configError }) : loading ? /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground", children: "Loading\u2026" }) : messages.length === 0 ? emptyState ?? /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-4", children: [
+        /* @__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(
@@ -1062,7 +1185,7 @@ function FrankieWidget({
 }) {
   const { config } = useFrankie();
   const theme = useFrankieTheme();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState5(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState6(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = (next) => {
     if (controlledOpen === void 0) setUncontrolledOpen(next);
@@ -1120,10 +1243,45 @@ function FrankieInline({ className, style, ...panelProps }) {
   );
 }
 
-// src/components/ui/separator.tsx
+// src/components/chat/FrankieChatPage.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
+function FrankieChatPage({
+  className,
+  style,
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus,
+  ...providerProps
+}) {
+  return /* @__PURE__ */ jsx16(
+    "main",
+    {
+      className,
+      style: { height: "100dvh", minHeight: "100dvh", width: "100%", ...style },
+      children: /* @__PURE__ */ jsx16(FrankieProvider, { ...providerProps, children: /* @__PURE__ */ jsx16(
+        FrankieInline,
+        {
+          header,
+          footer,
+          emptyState,
+          renderMessage,
+          renderTool,
+          placeholder,
+          autoFocus
+        }
+      ) })
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Separator({ className }) {
-  return /* @__PURE__ */ jsx16("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
+  return /* @__PURE__ */ jsx17("div", { role: "separator", className: cn("h-px w-full bg-border", className) });
 }
 export {
   Avatar,
@@ -1139,6 +1297,7 @@ export {
   Composer,
   FRANKIE_CLOUD_URL,
   FrankieApiError,
+  FrankieChatPage,
   FrankieClient,
   FrankieInline,
   FrankieProvider,