@frankieai/react 0.1.0 → 0.1.4

package/src/components/chat/Composer.tsx

@@ -1,24 +1,53 @@
 "use client";
 
-import { ArrowUp, Square } from "lucide-react";
+import { ArrowUp, Paperclip, Square, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from "react";
+import type { ChatAttachment } from "@frankieai/core";
 import { Button } from "../ui/button.js";
 import { Textarea } from "../ui/textarea.js";
 
+export interface ComposerAttachmentsConfig {
+  enabled: boolean;
+  /** Accepted MIME patterns, e.g. "image/*". */
+  accept: string[];
+  maxCount: number;
+  maxMb: number;
+}
+
+export interface ComposerModelPicker {
+  models: { id: string; label: string }[];
+  value?: string;
+  onChange: (id: string) => void;
+}
+
 export interface ComposerProps {
-  onSend: (text: string) => void;
+  onSend: (text: string, opts?: { attachments?: ChatAttachment[]; model?: string }) => void;
   onStop: () => void;
   busy: boolean;
   placeholder?: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  /** Enables the attach button when provided and `enabled`. */
+  attachments?: ComposerAttachmentsConfig;
+  /** Enables a model dropdown when provided with at least one model. */
+  modelPicker?: ComposerModelPicker;
+}
+
+interface PickedFile extends ChatAttachment {
+  id: string;
 }
 
 const MAX_ROWS_PX = 140;
 
-export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus }: ComposerProps) {
+export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocus, attachments, modelPicker }: ComposerProps) {
   const [value, setValue] = useState("");
+  const [files, setFiles] = useState<PickedFile[]>([]);
+  const [fileError, setFileError] = useState<string | undefined>(undefined);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const canAttach = Boolean(attachments?.enabled);
+  const models = modelPicker?.models ?? [];
 
   // Grow with the content up to a cap, then scroll.
   useEffect(() => {
@@ -28,12 +57,54 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
     node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
   }, [value]);
 
+  const addFiles = useCallback(
+    async (list: FileList | null) => {
+      if (!list || !attachments) return;
+      setFileError(undefined);
+      const room = attachments.maxCount - files.length;
+      const chosen = Array.from(list).slice(0, Math.max(0, room));
+      if (Array.from(list).length > room) setFileError(`You can attach up to ${attachments.maxCount} file(s).`);
+
+      const next: PickedFile[] = [];
+      for (const file of chosen) {
+        if (!mimeAccepted(file.type || "application/octet-stream", attachments.accept)) {
+          setFileError(`Files of type ${file.type || "unknown"} aren't allowed.`);
+          continue;
+        }
+        if (file.size > attachments.maxMb * 1024 * 1024) {
+          setFileError(`Each file must be under ${attachments.maxMb} MB.`);
+          continue;
+        }
+        try {
+          next.push({
+            id: `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 7)}`,
+            name: file.name,
+            mimeType: file.type || "application/octet-stream",
+            data: await readAsBase64(file),
+          });
+        } catch {
+          setFileError("Couldn't read that file.");
+        }
+      }
+      if (next.length) setFiles((current) => [...current, ...next]);
+    },
+    [attachments, files.length],
+  );
+
+  const removeFile = (id: string) => setFiles((current) => current.filter((file) => file.id !== id));
+
   const submit = useCallback(() => {
     const text = value.trim();
-    if (!text || busy || disabled) return;
+    if ((!text && files.length === 0) || busy || disabled) return;
     setValue("");
-    onSend(text);
-  }, [busy, disabled, onSend, value]);
+    const attached = files.map(({ name, mimeType, data }) => ({ name, mimeType, data }));
+    setFiles([]);
+    setFileError(undefined);
+    onSend(text, {
+      ...(attached.length ? { attachments: attached } : {}),
+      ...(modelPicker?.value ? { model: modelPicker.value } : {}),
+    });
+  }, [busy, disabled, files, modelPicker?.value, onSend, value]);
 
   const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === "Enter" && !event.shiftKey) {
@@ -42,34 +113,126 @@ export function Composer({ onSend, onStop, busy, placeholder, disabled, autoFocu
     }
   };
 
+  const nothingToSend = value.trim().length === 0 && files.length === 0;
+
   return (
     <form
-      className="flex items-end gap-2"
+      className="flex flex-col gap-2"
       onSubmit={(event) => {
         event.preventDefault();
         submit();
       }}
     >
-      <Textarea
-        ref={textareaRef}
-        rows={1}
-        value={value}
-        disabled={disabled}
-        autoFocus={autoFocus}
-        onChange={(event) => setValue(event.target.value)}
-        onKeyDown={onKeyDown}
-        placeholder={placeholder ?? "Ask anything…"}
-        aria-label="Message"
-      />
-      {busy ? (
-        <Button type="button" size="icon" variant="outline" onClick={onStop} aria-label="Stop">
-          <Square />
-        </Button>
-      ) : (
-        <Button type="submit" size="icon" disabled={disabled || value.trim().length === 0} aria-label="Send">
-          <ArrowUp />
-        </Button>
-      )}
+      {files.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {files.map((file) => (
+            <span
+              key={file.id}
+              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"
+            >
+              <Paperclip className="size-3 shrink-0 opacity-70" />
+              <span className="truncate">{file.name}</span>
+              <button
+                type="button"
+                onClick={() => removeFile(file.id)}
+                aria-label={`Remove ${file.name}`}
+                className="frankie-focus shrink-0 opacity-60 hover:opacity-100"
+              >
+                <X className="size-3" />
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      {fileError ? <p className="text-xs text-red-600 dark:text-red-400">{fileError}</p> : null}
+
+      <div className="flex items-end gap-2">
+        {canAttach ? (
+          <>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              hidden
+              accept={attachments?.accept.join(",")}
+              onChange={(event) => {
+                void addFiles(event.target.files);
+                event.target.value = "";
+              }}
+            />
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              disabled={disabled || files.length >= (attachments?.maxCount ?? 0)}
+              onClick={() => fileInputRef.current?.click()}
+              aria-label="Attach files"
+              title="Attach files"
+            >
+              <Paperclip />
+            </Button>
+          </>
+        ) : null}
+
+        <Textarea
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          onChange={(event) => setValue(event.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={placeholder ?? "Ask anything…"}
+          aria-label="Message"
+        />
+
+        {models.length > 0 ? (
+          <select
+            value={modelPicker?.value ?? models[0]?.id}
+            onChange={(event) => modelPicker?.onChange(event.target.value)}
+            disabled={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"
+          >
+            {models.map((model) => (
+              <option key={model.id} value={model.id}>
+                {model.label}
+              </option>
+            ))}
+          </select>
+        ) : null}
+
+        {busy ? (
+          <Button type="button" size="icon" variant="outline" onClick={onStop} aria-label="Stop">
+            <Square />
+          </Button>
+        ) : (
+          <Button type="submit" size="icon" disabled={disabled || nothingToSend} aria-label="Send">
+            <ArrowUp />
+          </Button>
+        )}
+      </div>
     </form>
   );
 }
+
+function mimeAccepted(mimeType: string, accept: string[]): boolean {
+  return accept.some((pattern) =>
+    pattern.endsWith("/*") ? mimeType.startsWith(pattern.slice(0, -1)) : pattern === mimeType,
+  );
+}
+
+/** Read a File to a base64 string (no data-URL prefix), for the wire protocol. */
+function readAsBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result);
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}

package/src/components/chat/FrankieChatPage.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import type { FrankieProviderProps } from "../../hooks/FrankieProvider.jsx";
+import { FrankieProvider } from "../../hooks/FrankieProvider.jsx";
+import { FrankieInline } from "./FrankieInline.js";
+import type { ChatPanelProps } from "./ChatPanel.js";
+
+/**
+ * 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.
+ */
+export interface FrankieChatPageProps
+  extends Omit<FrankieProviderProps, "children">,
+    Pick<
+      ChatPanelProps,
+      "header" | "footer" | "emptyState" | "renderMessage" | "renderTool" | "placeholder" | "autoFocus"
+    > {
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function FrankieChatPage({
+  className,
+  style,
+  header,
+  footer,
+  emptyState,
+  renderMessage,
+  renderTool,
+  placeholder,
+  autoFocus,
+  ...providerProps
+}: FrankieChatPageProps) {
+  return (
+    <main
+      className={className}
+      style={{ height: "100dvh", minHeight: "100dvh", width: "100%", ...style }}
+    >
+      <FrankieProvider {...providerProps}>
+        <FrankieInline
+          header={header}
+          footer={footer}
+          emptyState={emptyState}
+          renderMessage={renderMessage}
+          renderTool={renderTool}
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+        />
+      </FrankieProvider>
+    </main>
+  );
+}

package/src/components/chat/MessageBubble.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { Check, Copy, Paperclip } from "lucide-react";
+import "./message-actions.css";
+import { useState, type ReactNode } from "react";
 import { cn } from "../../lib/utils.js";
 import type { ChatMessage, ToolActivity } from "../../lib/messages.js";
 import { Avatar } from "../ui/avatar.js";
@@ -24,10 +26,26 @@ export function MessageBubble({
 }: MessageBubbleProps) {
   if (message.role === "user") {
     return (
-      <div className="flex justify-end">
-        <div className="max-w-[85%] rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">
-          {message.text}
-        </div>
+      <div className="flex flex-col items-end gap-1">
+        {message.attachments?.length ? (
+          <div className="flex max-w-[85%] flex-wrap justify-end gap-1">
+            {message.attachments.map((file, index) => (
+              <span
+                key={`${file.name}-${index}`}
+                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"
+              >
+                <Paperclip className="size-3 shrink-0 opacity-70" />
+                <span className="truncate">{file.name}</span>
+              </span>
+            ))}
+          </div>
+        ) : null}
+        {message.text ? (
+          <div className="flex max-w-[85%] items-end gap-1">
+            <div className="rounded-[var(--frankie-radius)] bg-primary px-3 py-2 text-sm text-primary-foreground">{message.text}</div>
+            <MessageCopyButton text={message.text} />
+          </div>
+        ) : null}
       </div>
     );
   }
@@ -36,7 +54,10 @@ export function MessageBubble({
 
   return (
     <div className="flex gap-2">
-      <Avatar {...(avatarUrl ? { src: avatarUrl } : {})} name={assistantName} className="mt-0.5" />
+      <div className="frankie-assistant-actions mt-0.5 flex shrink-0 flex-col items-center gap-1">
+        <Avatar {...(avatarUrl ? { src: avatarUrl } : {})} name={assistantName} />
+        {message.text ? <MessageCopyButton text={message.text} /> : null}
+      </div>
       <div className="min-w-0 max-w-[85%]">
         {message.status === "error" ? (
           <p className="rounded-[var(--frankie-radius)] bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-400">
@@ -55,6 +76,18 @@ export function MessageBubble({
   );
 }
 
+function MessageCopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch { /* Clipboard access can be disabled by an embedding host. */ }
+  };
+  return <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"}>{copied ? <Check className="size-3.5" aria-hidden="true" /> : <Copy className="size-3.5" aria-hidden="true" />}</button>;
+}
+
 export function TypingDots() {
   return (
     <span className="inline-flex items-center gap-1 py-2" role="status" aria-label="Thinking">

package/src/components/chat/ToolActivityList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Check, Loader2, ShieldAlert, X } from "lucide-react";
+import { Check, ChevronDown, Loader2, ShieldAlert, X } from "lucide-react";
 import { Badge } from "../ui/badge.js";
 import type { ToolActivity } from "../../lib/messages.js";
 
@@ -13,12 +13,16 @@ export interface ToolActivityListProps {
 /** The "what the assistant is doing" strip under a streaming answer. */
 export function ToolActivityList({ tools, renderTool }: ToolActivityListProps) {
   if (tools.length === 0) return null;
+  const running = tools.some((tool) => tool.status === "running");
   return (
-    <ul className="mt-2 flex flex-col gap-1">
-      {tools.map((tool) => (
-        <li key={tool.id}>{renderTool ? renderTool(tool) : <ToolActivityRow tool={tool} />}</li>
-      ))}
-    </ul>
+    <details className="frankie-tool-activity mt-2" open={running}>
+      <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">
+        <ChevronDown className="frankie-tool-chevron size-3.5 transition-transform" aria-hidden="true" />
+        <span>{running ? "Working" : "Activity"}</span>
+        <span className="text-[11px]">· {tools.length} tool call{tools.length === 1 ? "" : "s"}</span>
+      </summary>
+      <ul className="mt-1 flex flex-col gap-1 border-l border-border pl-2">{tools.map((tool) => <li key={tool.id}>{renderTool ? renderTool(tool) : <ToolActivityRow tool={tool} />}</li>)}</ul>
+    </details>
   );
 }
 

package/src/components/chat/message-actions.css

@@ -0,0 +1,13 @@
+.frankie-root .frankie-message-copy { opacity: .72; }
+.frankie-root .frankie-message-copy:hover { opacity: 1; }
+.frankie-root .frankie-tool-activity[open] .frankie-tool-chevron { transform: rotate(180deg); }
+
+.frankie-root .frankie-assistant-actions .frankie-message-copy {
+  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
+  border: 0; background: transparent; opacity: .46;
+}
+.frankie-root .frankie-assistant-actions .frankie-message-copy:hover,
+.frankie-root .frankie-assistant-actions .frankie-message-copy:focus-visible { opacity: 1; }
+.frankie-root .frankie-tool-activity { max-width: 100%; }
+.frankie-root .frankie-tool-activity[open] > summary { color: var(--frankie-foreground); }
+.frankie-root .frankie-tool-activity li .frankie-badge { max-width: 100%; }

package/src/hooks/FrankieProvider.tsx

@@ -6,14 +6,8 @@ import { FrankieClient, type FrankieClientOptions, type PageContext } from "../l
 
 export 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;
 }
 
@@ -37,9 +31,8 @@ export function FrankieProvider({
 }: FrankieProviderProps) {
   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<PublicWidgetConfig | undefined>(providedConfig);
@@ -87,7 +80,6 @@ export function useFrankie(): FrankieContextValue {
   return value;
 }
 
-/** The theme actually in effect: provider override wins over server config. */
 export function useFrankieTheme(): WidgetTheme | undefined {
   const { config, theme } = useFrankie();
   return useMemo(() => ({ ...config?.theme, ...theme }), [config?.theme, theme]);

package/src/hooks/useFrankieChat.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import type { ChatAttachment } from "@frankieai/core";
 import { FrankieApiError } from "../lib/client.js";
 import {
   applyEvent,
@@ -11,13 +12,19 @@ import {
 } from "../lib/messages.js";
 import { useFrankie } from "./FrankieProvider.jsx";
 
+/** Extra inputs a turn can carry: attached files and a chosen model. */
+export interface SendOptions {
+  attachments?: ChatAttachment[];
+  model?: string;
+}
+
 export interface UseFrankieChatResult {
   messages: ChatMessage[];
   /** True from the moment a message is sent until the turn ends. */
   busy: boolean;
   /** Set when the turn failed outright (network, auth, rate limit). */
   error?: string;
-  send: (text: string) => Promise<void>;
+  send: (text: string, opts?: SendOptions) => Promise<void>;
   /** Abort the in-flight turn. The partial answer stays in the transcript. */
   stop: () => void;
   /** Clear the transcript and start a brand-new server session. */
@@ -32,6 +39,7 @@ export function useFrankieChat(): UseFrankieChatResult {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
+  const [restored, setRestored] = useState(false);
   const abortRef = useRef<AbortController | null>(null);
   const mounted = useRef(true);
 
@@ -45,30 +53,47 @@ export function useFrankieChat(): UseFrankieChatResult {
 
   const storageKey = `${client.namespace}.messages`;
 
-  // Restore the transcript on mount, so a page reload keeps the conversation.
-  // The client resumes the matching server session, so context is kept too.
+  // Restore local storage immediately, then hydrate the authoritative server
+  // transcript. The server path makes the same signed-in user's chats available
+  // on another browser or device.
   useEffect(() => {
-    if (!client.persist) return;
-    try {
-      const raw = window.localStorage.getItem(storageKey);
-      const stored = raw ? (JSON.parse(raw) as ChatMessage[]) : [];
-      if (Array.isArray(stored) && stored.length) setMessages(stored);
-    } catch {
-      /* storage unavailable; start empty */
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [storageKey]);
+    let active = true;
+    const restore = async () => {
+      if (client.persist) {
+        try {
+          const raw = window.localStorage.getItem(storageKey);
+          const stored = raw ? (JSON.parse(raw) as ChatMessage[]) : [];
+          if (Array.isArray(stored) && stored.length && active) setMessages(stored);
+        } catch {
+          /* storage unavailable; server history can still restore */
+        }
+      }
+      try {
+        const remote = await client.resumeConversation();
+        if (active && remote?.messages.length) setMessages(remote.messages as ChatMessage[]);
+      } catch {
+        /* A new conversation does not exist remotely until its first message. */
+      } finally {
+        if (active) setRestored(true);
+      }
+    };
+    void restore();
+    return () => { active = false; };
+  }, [client, storageKey]);
 
   // Persist once a turn settles — never mid-stream — so the saved copy is clean.
+  // Wait until the initial restore has completed so an empty initial state never
+  // deletes an existing transcript.
   useEffect(() => {
-    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 {
       /* ignore */
     }
-  }, [messages, busy, client, storageKey]);
+    if (messages.length) void client.syncConversation(messages, conversationTitle(messages)).catch(() => undefined);
+  }, [messages, busy, client, storageKey, restored]);
 
   const patchAssistant = useCallback((id: string, update: (m: AssistantChatMessage) => AssistantChatMessage) => {
     setMessages((current) =>
@@ -79,16 +104,23 @@ export function useFrankieChat(): UseFrankieChatResult {
   }, []);
 
   const send = useCallback(
-    async (text: string) => {
+    async (text: string, opts?: SendOptions) => {
       const trimmed = text.trim();
-      if (!trimmed || busy) return;
+      const attachments = opts?.attachments ?? [];
+      if ((!trimmed && attachments.length === 0) || busy) 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);
       setBusy(true);
       setMessages((current) => [
         ...current,
-        newUserMessage(nextId("u"), trimmed),
+        newUserMessage(
+          nextId("u"),
+          trimmed,
+          attachments.map((file) => ({ name: file.name, mimeType: file.mimeType })),
+        ),
         newAssistantMessage(assistantId),
       ]);
 
@@ -96,10 +128,35 @@ export function useFrankieChat(): UseFrankieChatResult {
       abortRef.current = abort;
 
       try {
-        await client.send({ message: trimmed, ...(context ? { context } : {}), signal: abort.signal }, (event) => {
-          if (event.type === "ping" || event.type === "session") return;
-          patchAssistant(assistantId, (message) => applyEvent(message, event));
-        });
+        let receivedText = false;
+        let receivedToolActivity = false;
+        await client.send(
+          {
+            message: outgoing,
+            ...(context ? { context } : {}),
+            ...(opts?.model ? { model: opts.model } : {}),
+            ...(attachments.length ? { attachments } : {}),
+            signal: abort.signal,
+          },
+          (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));
+          },
+        );
+        // A terminated stream with no text previously looked like Frankie did
+        // nothing. Preserve visible tool activity, but never leave an empty
+        // assistant bubble for the user to interpret.
+        if (!receivedText) {
+          patchAssistant(assistantId, (message) => ({
+            ...message,
+            status: "done",
+            text: receivedToolActivity
+              ? "Completed. Open Agent activity for the details."
+              : "Frankie didn’t return an answer. Please try again.",
+          }));
+        }
       } catch (caught) {
         if (abort.signal.aborted) {
           patchAssistant(assistantId, (message) => ({
@@ -111,7 +168,9 @@ export function useFrankieChat(): UseFrankieChatResult {
           const message =
             caught instanceof FrankieApiError
               ? caught.message
-              : "Could not reach the assistant. Check your connection and try again.";
+              : 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 }));
         }
@@ -137,6 +196,7 @@ export function useFrankieChat(): UseFrankieChatResult {
     setMessages([]);
     setError(undefined);
     setBusy(false);
+    setRestored(true);
     try {
       if (client.persist) window.localStorage.removeItem(`${client.namespace}.messages`);
     } catch {
@@ -146,3 +206,11 @@ export function useFrankieChat(): UseFrankieChatResult {
 
   return { messages, busy, ...(error ? { error } : {}), send, stop, reset };
 }
+
+
+function conversationTitle(messages: ChatMessage[]): string | undefined {
+  const first = messages.find((message) => message.role === "user" && message.text.trim());
+  if (!first) return undefined;
+  const title = first.text.trim().replace(/\s+/g, " ");
+  return title.length > 42 ? `${title.slice(0, 42)}…` : title;
+}