@frankieai/react 0.2.17 → 0.2.19

package/src/hooks/useFrankieChat.ts

@@ -69,6 +69,34 @@ export function useFrankieChatState(): UseFrankieChatResult {
 
   const storageKey = `${client.namespace}.messages`;
 
+  // A reply the server is still writing after this browser lost the stream (a
+  // closed tab, a phone that backgrounded the page): show it as working and
+  // check back until it lands, then show the server's finished copy.
+  const followingRef = useRef(false);
+  const followRunningTurn = useCallback(async () => {
+    if (followingRef.current || !client.canResume) return;
+    followingRef.current = true;
+    setBusy(true);
+    try {
+      const deadline = Date.now() + 3 * 60_000;
+      while (mounted.current && Date.now() < deadline) {
+        await new Promise((resolve) => setTimeout(resolve, 2500));
+        const remote = await client.resumeConversation().catch(() => undefined);
+        if (!remote || remote.busy) continue;
+        if (remote.messages.length) {
+          const finished = remote.messages as ChatMessage[];
+          messagesRef.current = finished;
+          if (mounted.current) setMessages(finished);
+        }
+        if (mounted.current) setError(undefined);
+        return;
+      }
+    } finally {
+      followingRef.current = false;
+      if (mounted.current) setBusy(false);
+    }
+  }, [client]);
+
   // 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.
@@ -90,10 +118,11 @@ export function useFrankieChatState(): UseFrankieChatResult {
       try {
         const remote = await client.resumeConversation();
         if (active && remote?.messages.length) {
-          const restoredMessages = remote.messages as ChatMessage[];
+          const restoredMessages = remote.busy ? stillWorking(remote.messages as ChatMessage[]) : (remote.messages as ChatMessage[]);
           messagesRef.current = restoredMessages;
           setMessages(restoredMessages);
         }
+        if (active && remote?.busy) void followRunningTurn();
       } catch (caught) {
         if (active) {
           const message =
@@ -110,7 +139,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
     };
     void restore();
     return () => { active = false; };
-  }, [client, storageKey]);
+  }, [client, storageKey, followRunningTurn]);
 
   // 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
@@ -205,6 +234,7 @@ export function useFrankieChatState(): UseFrankieChatResult {
         patchAssistant(assistantId, (message) => ({ ...message, text: message.text + addText, thinking: message.thinking + addThinking }));
       };
 
+      let lostStream = false;
       try {
         let receivedText = false;
         let receivedToolActivity = false;
@@ -254,6 +284,10 @@ export function useFrankieChatState(): UseFrankieChatResult {
             status: "done",
             text: message.text || "Stopped.",
           }));
+        } else if (!(caught instanceof FrankieApiError) && client.canResume) {
+          // The connection dropped, not the turn: the server keeps going and
+          // saves the reply. Keep this message working and pick it up below.
+          lostStream = true;
         } else {
           const message =
             caught instanceof FrankieApiError
@@ -268,10 +302,13 @@ export function useFrankieChatState(): UseFrankieChatResult {
         // Ensure no frame is left pending and every buffered token is committed
         // before the turn settles and the transcript is persisted.
         flushDeltas();
-        // A turn that ended without a `turn_end` event still has to settle.
-        patchAssistant(assistantId, (message) =>
-          message.status === "streaming" ? { ...message, status: "done" } : message,
-        );
+        // A turn that ended without a `turn_end` event still has to settle,
+        // unless the server is still writing it (followed below).
+        if (!lostStream) {
+          patchAssistant(assistantId, (message) =>
+            message.status === "streaming" ? { ...message, status: "done" } : message,
+          );
+        }
         // Persist before send() resolves. This closes the previous gap where a
         // route change or tab close could leave a server conversation with no
         // rendered messages even though the agent transcript existed.
@@ -281,12 +318,19 @@ export function useFrankieChatState(): UseFrankieChatResult {
         }
         if (mounted.current) setBusy(false);
         abortRef.current = null;
+        if (lostStream) void followRunningTurn();
       }
     },
-    [busy, client, context, patchAssistant, restored],
+    [busy, client, context, patchAssistant, restored, followRunningTurn],
   );
 
-  const stop = useCallback(() => abortRef.current?.abort(), []);
+  // Closing the stream no longer stops a turn (a closed tab keeps its reply),
+  // so Stop tells the server first, then closes it.
+  const stop = useCallback(() => {
+    if (!abortRef.current) return;
+    void client.stopTurn();
+    abortRef.current.abort();
+  }, [client]);
 
   const reset = useCallback(() => {
     abortRef.current?.abort();
@@ -315,3 +359,10 @@ function conversationTitle(messages: ChatMessage[]): string | undefined {
   const title = first.text.trim().replace(/\s+/g, " ");
   return title.length > 42 ? `${title.slice(0, 42)}…` : title;
 }
+
+/** Show the last reply as still being written: reopen a broken one, or add an empty one. */
+function stillWorking(messages: ChatMessage[]): ChatMessage[] {
+  const last = messages[messages.length - 1];
+  if (last?.role === "assistant") return [...messages.slice(0, -1), { ...last, status: "streaming", error: undefined }];
+  return [...messages, { id: "pending_" + Date.now(), role: "assistant", text: "", thinking: "", tools: [], status: "streaming", createdAt: Date.now() }];
+}

package/src/index.ts

@@ -33,7 +33,7 @@ export { applyEvent, newAssistantMessage, newUserMessage } from "./lib/messages.
 export type { AssistantChatMessage, ChatMessage, MessageAttachment, ToolActivity, UserChatMessage } from "./lib/messages.js";
 export { extractChoices } from "./lib/choices.js";
 export type { ExtractedChoices } from "./lib/choices.js";
-export { resolveMode, themeToCssVars } from "./lib/theme.js";
+export { resolveMode, themeToCssVars, useResolvedMode } from "./lib/theme.js";
 export { cn } from "./lib/utils.js";
 
 export type { PublicWidgetConfig, WidgetTheme, FrankieServerEvent } from "@frankieai/core";

package/src/lib/bottom-bars.ts

@@ -0,0 +1,43 @@
+/**
+ * How far a fixed or sticky bar along the bottom of the viewport (a mobile tab
+ * bar, a cookie banner, a sticky "Buy" bar) rises over the widget's corner, in
+ * pixels. The launcher sits above it instead of hiding beneath it.
+ *
+ * It samples the corner where the launcher sits, ignoring the widget itself,
+ * and counts only elements anchored to the bottom edge and shorter than 40% of
+ * the viewport, so a full-height sidebar or a modal never pushes it away.
+ */
+export function bottomObstruction(root: Element | null, position: "bottom-right" | "bottom-left", offset: number): number {
+  if (typeof document === "undefined" || typeof window === "undefined" || typeof document.elementsFromPoint !== "function") return 0;
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  if (!width || !height) return 0;
+  const xs = position === "bottom-right" ? [width - offset - 24, width - 8] : [offset + 24, 8];
+  const ys = [height - offset - 24, height - 4];
+  let lift = 0;
+  const seen = new Set<Element>();
+  for (const x of xs) for (const y of ys) {
+    for (const hit of document.elementsFromPoint(x, y)) {
+      if (root?.contains(hit)) continue;
+      const bar = anchoredAncestor(hit);
+      if (!bar || seen.has(bar)) continue;
+      seen.add(bar);
+      const rect = bar.getBoundingClientRect();
+      const anchoredToBottom = rect.bottom >= height - 4;
+      const short = rect.height > 0 && rect.height < height * 0.4;
+      if (anchoredToBottom && short) lift = Math.max(lift, height - rect.top);
+    }
+  }
+  return Math.round(lift);
+}
+
+/** The nearest fixed or sticky element at or above `element` (a few levels up at most). */
+function anchoredAncestor(element: Element): Element | null {
+  let node: Element | null = element;
+  for (let depth = 0; node && depth < 8 && node !== document.body && node !== document.documentElement; depth += 1) {
+    const position = getComputedStyle(node).position;
+    if (position === "fixed" || position === "sticky") return node;
+    node = node.parentElement;
+  }
+  return null;
+}

package/src/lib/client.ts

@@ -207,7 +207,25 @@ export class FrankieClient {
     return Array.isArray(body.conversations) ? body.conversations : [];
   }
 
-  async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string } | undefined> {
+  /** Whether a conversation can be reloaded from the server (a signed-in user and a conversation id). */
+  get canResume(): boolean {
+    return Boolean(this.options.conversationId && this.options.getUserToken);
+  }
+
+  /**
+   * Ask the server to stop the running turn. Closing the stream no longer
+   * stops it (a closed tab shouldn't lose the reply), so Stop says so
+   * explicitly. Best effort: the stream is closed right after either way.
+   */
+  async stopTurn(): Promise<void> {
+    if (!this.session) return;
+    await this.doFetch(`${this.baseUrl}/v1/chat/stop`, {
+      method: "POST",
+      headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${this.session.sessionToken}` },
+    }).catch(() => undefined);
+  }
+
+  async resumeConversation(id = this.options.conversationId): Promise<{ messages: unknown[]; title: string; busy: boolean } | 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`, {
@@ -215,11 +233,11 @@ export class FrankieClient {
       headers: { "x-frankie-key": this.options.publishableKey, authorization: `Bearer ${userToken}` },
     });
     if (response.status === 404) return undefined;
-    const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string };
+    const body = (await this.unwrap(response)) as { session: CreateSessionResponse; messages?: unknown[]; title?: string; busy?: boolean };
     this.session = body.session;
     this.sessionUserKey = sessionIdentity(userToken);
     this.writeStored();
-    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat" };
+    return { messages: Array.isArray(body.messages) ? body.messages : [], title: body.title ?? "New chat", busy: body.busy === true };
   }
 
   async syncConversation(messages: unknown[], title?: string): Promise<void> {

package/src/lib/theme.ts

@@ -1,5 +1,5 @@
 import type { WidgetTheme } from "@frankieai/core";
-import type { CSSProperties } from "react";
+import { useSyncExternalStore, type CSSProperties } from "react";
 
 /**
  * Map a theme to the CSS custom properties the widget's styles read.
@@ -28,3 +28,24 @@ export function resolveMode(mode: WidgetTheme["mode"]): "light" | "dark" {
   if (typeof window === "undefined" || !window.matchMedia) return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
+
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribeToScheme(onChange: () => void): () => void {
+  const media = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(DARK_QUERY) : undefined;
+  media?.addEventListener?.("change", onChange);
+  return () => media?.removeEventListener?.("change", onChange);
+}
+const prefersDark = () => typeof window !== "undefined" && Boolean(window.matchMedia?.(DARK_QUERY).matches);
+
+/**
+ * `resolveMode` as a hook. Server-rendered pages can't know the visitor's
+ * scheme, and a hydrated attribute that differs from the server's is never
+ * patched, so a plain `resolveMode` call could leave "system" stuck on light.
+ * This renders light on the server and during hydration, then the visitor's
+ * scheme, and follows it when they switch.
+ */
+export function useResolvedMode(mode: WidgetTheme["mode"]): "light" | "dark" {
+  const dark = useSyncExternalStore(subscribeToScheme, prefersDark, () => false);
+  if (mode === "light" || mode === "dark") return mode;
+  return dark ? "dark" : "light";
+}

package/src/lib/viewport-fill.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState, type RefObject } from "react";
+import { bottomObstruction } from "./bottom-bars.js";
+
+/**
+ * The height that fills the viewport from where `ref` starts down to the
+ * bottom edge, less any fixed bar along the bottom (a mobile tab bar). A
+ * full-page chat inside a host layout with no sized parent otherwise stops at
+ * its minimum height and leaves a gap above the host's navigation.
+ * Re-measured on resize and, throttled, as the page changes.
+ */
+export function useViewportFill(ref: RefObject<HTMLElement | null>, enabled: boolean): number {
+  const [fill, setFill] = useState(0);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") { setFill(0); return; }
+    let timer = 0;
+    let last = 0;
+    const measure = () => {
+      timer = 0;
+      last = Date.now();
+      const node = ref.current;
+      if (!node) return;
+      const top = node.getBoundingClientRect().top + window.scrollY;
+      const lift = bottomObstruction(node, "bottom-right", 0);
+      setFill(Math.max(0, Math.round(window.innerHeight - top - lift)));
+    };
+    const schedule = () => {
+      if (timer) return;
+      timer = window.setTimeout(() => requestAnimationFrame(measure), Math.max(0, 300 - (Date.now() - last)));
+    };
+    measure();
+    window.addEventListener("resize", schedule);
+    const observer = typeof MutationObserver === "function"
+      ? new MutationObserver((records) => { if (records.some((record) => !ref.current?.contains(record.target))) schedule(); })
+      : undefined;
+    observer?.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style"] });
+    return () => { window.clearTimeout(timer); window.removeEventListener("resize", schedule); observer?.disconnect(); };
+  }, [ref, enabled]);
+  return fill;
+}

package/src/styles/frankie.css

@@ -66,7 +66,7 @@
   .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-mobile-only { display:none!important; }.frankie-widget-panel { max-height:calc(100dvh - 100px - var(--frankie-lift, 0px)); }
   .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); } }
@@ -425,6 +425,22 @@
     font-size: .85rem;
   }
 
+  /* The floating widget is short: a smaller welcome and the starters as
+     wrapping pills (icon + title; the description moves to a tooltip) keep
+     every suggestion visible without scrolling. */
+  .frankie-widget-panel .frankie-page-empty { padding: 1rem .25rem; gap: 1rem; }
+  .frankie-widget-panel .frankie-page-welcome h1 { font-size: 1.25rem; }
+  .frankie-widget-panel .frankie-page-welcome p { margin-top: .35rem; font-size: .88rem; line-height: 1.45; }
+  .frankie-widget-panel .frankie-page-suggest { gap: .55rem; }
+  .frankie-widget-panel .frankie-page-suggest-label { font-size: .66rem; }
+  .frankie-widget-panel .frankie-page-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
+  .frankie-widget-panel .frankie-page-prompts button { min-height: 34px; max-width: 100%; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .45rem; border-radius: 999px; }
+  .frankie-widget-panel .frankie-prompt-icon { width: 22px; height: 22px; border-radius: 999px; }
+  .frankie-widget-panel .frankie-prompt-icon svg { width: 13px; height: 13px; }
+  .frankie-widget-panel .frankie-prompt-text strong { font-size: .82rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .frankie-widget-panel .frankie-prompt-text small { display: none; }
+  .frankie-widget-panel .frankie-page-suggest-hint { display: none; }
+
   @media (max-width: 640px) {
     .frankie-page-header { min-height: 52px; flex-basis: 52px; padding: 0 12px; }
     .frankie-page-canvas .frankie-scroll { padding: 1.25rem .75rem .5rem; }
@@ -575,11 +591,14 @@
   height:12px; border-radius:6px;
   background:linear-gradient(90deg,
     color-mix(in srgb, var(--frankie-muted-foreground) 11%, transparent) 25%,
-    color-mix(in srgb, var(--frankie-muted-foreground) 26%, transparent) 37%,
+    color-mix(in srgb, var(--frankie-muted-foreground) 19%, transparent) 37%,
     color-mix(in srgb, var(--frankie-muted-foreground) 11%, transparent) 63%);
   background-size:400% 100%;
-  animation:frankie-shimmer 1.4s ease infinite;
+  animation:frankie-shimmer 2.2s ease-in-out infinite;
 }
+/* Fades in after a beat, so a fast first word never flashes a skeleton. */
+.frankie-root .frankie-skeleton.is-delayed { animation:frankie-skeleton-in .25s ease .35s both; }
+@keyframes frankie-skeleton-in { from { opacity:0; } to { opacity:1; } }
 @keyframes frankie-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
 @keyframes frankie-skeleton-pulse { 0%,100% { opacity:.45; } 50% { opacity:.85; } }
 @media (prefers-reduced-motion: reduce) {

package/src/theme-ready.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FrankieProvider } from "./hooks/FrankieProvider.js";
+import { FrankieWidget } from "./components/chat/FrankieWidget.js";
+import { __resetFrankieStylesForTests } from "./lib/ensure-frankie-styles.js";
+
+/** Answer the stylesheet sentinel as a browser with our CSS loaded would. */
+function stylesLoaded() {
+  const real = window.getComputedStyle.bind(window);
+  vi.spyOn(window, "getComputedStyle").mockImplementation((el: Element, pseudo?: string | null) => {
+    const style = real(el, pseudo ?? undefined);
+    return { ...style, getPropertyValue: (property: string) => (property === "--frankie-styles-ready" ? "1" : style.getPropertyValue(property)) } as CSSStyleDeclaration;
+  });
+}
+
+afterEach(() => { vi.restoreAllMocks(); __resetFrankieStylesForTests(); });
+
+describe("first paint", () => {
+  it("keeps the widget invisible until its theme is known, so OS dark mode never flashes first", async () => {
+    stylesLoaded();
+    // The visitor's OS prefers dark; the workspace says light.
+    vi.spyOn(window, "matchMedia").mockImplementation((query: string) => ({ matches: query.includes("dark"), media: query, addEventListener() {}, removeEventListener() {} }) as unknown as MediaQueryList);
+    let answer: (response: Response) => void = () => {};
+    const fetchImpl = vi.fn(() => new Promise<Response>((resolve) => { answer = resolve; }));
+    const { container } = render(<FrankieProvider publishableKey="pk_test" baseUrl="https://frankie.test" fetchImpl={fetchImpl as unknown as typeof fetch}><FrankieWidget /></FrankieProvider>);
+    const root = container.querySelector(".frankie-widget") as HTMLElement;
+    await waitFor(() => expect(root.dataset.frankieStyles).toBe("ready"));
+    expect(root.style.opacity).toBe("0");
+
+    await act(async () => {
+      answer(new Response(JSON.stringify({ tenantId: "acme", branding: { name: "Acme" }, theme: { mode: "light" }, auth: { mode: "anonymous" } }), { status: 200, headers: { "content-type": "application/json" } }));
+    });
+    await waitFor(() => expect(root.style.opacity).toBe(""));
+    expect(root.dataset.frankieMode).toBe("light");
+  });
+});

package/src/turn-follow.test.tsx

@@ -0,0 +1,111 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { PublicWidgetConfig } from "@frankieai/core";
+import { FrankieProvider } from "./hooks/FrankieProvider.jsx";
+import { useFrankieChat } from "./hooks/useFrankieChat.js";
+
+const config: PublicWidgetConfig = {
+  tenantId: "acme",
+  branding: { name: "Acme Guide", tagline: "Setup help", launcherLabel: "Need a hand?" },
+  greeting: "Hi!",
+  suggestedPrompts: [],
+  theme: { mode: "light" },
+  allowAnonymous: false,
+  showToolActivity: true,
+  features: {
+    attachments: { enabled: false, accept: ["image/*"], maxMb: 10, maxCount: 4 },
+    modelPicker: { enabled: false, models: [] },
+  },
+};
+
+const session = { sessionId: "s", sessionToken: "fixture", expiresAt: new Date(Date.now() + 600_000).toISOString(), user: { id: "one", anonymous: false } };
+const token = async () => "h.eyJzdWIiOiJvbmUifQ.s";
+const user = { id: "u1", role: "user", text: "Find the backrooms", createdAt: 1 };
+const done = { id: "a1", role: "assistant", text: "Here they are.", thinking: "", tools: [], status: "done", createdAt: 2 };
+
+/** Prints the chat state so tests can read it. */
+function Probe() {
+  const chat = useFrankieChat();
+  const last = chat.messages[chat.messages.length - 1];
+  return (
+    <>
+      <output data-testid="state">{`${chat.busy ? "busy" : "idle"}|${last ? `${last.role}:${last.role === "assistant" ? last.status : ""}:${last.text}` : "empty"}`}</output>
+      <button disabled={chat.restoring} onClick={() => void chat.send("hello")}>Send</button>
+      <button onClick={() => chat.stop()}>Stop</button>
+    </>
+  );
+}
+
+const state = () => screen.getByTestId("state").textContent;
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+describe("a reply the server is still writing", () => {
+  it("shows as working after a reload and lands when the server finishes", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    let resumes = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      if (!String(url).endsWith("/resume")) return Response.json({ ok: true });
+      resumes += 1;
+      // First visit: the tab was closed mid-reply and the turn is still running.
+      return resumes === 1
+        ? Response.json({ session, messages: [user], title: "Backrooms", busy: true })
+        : Response.json({ session, messages: [user, done], title: "Backrooms", busy: false });
+    });
+    render(<FrankieProvider publishableKey="pk_follow" config={config} conversationId="conv-1" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect(state()).toBe("busy|assistant:streaming:"));
+    await vi.advanceTimersByTimeAsync(3000);
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Here they are."));
+    expect(resumes).toBe(2);
+  });
+
+  it("keeps a reply working when only the connection drops, then picks it up", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    let resumes = 0;
+    const fetchImpl = vi.fn(async (url: string | URL | Request) => {
+      const href = String(url);
+      if (href.endsWith("/resume")) {
+        resumes += 1;
+        return resumes === 1
+          ? Response.json({ session, messages: [], title: "New chat", busy: false })
+          : Response.json({ session, messages: [{ ...user, text: "hello" }, done], title: "hello", busy: false });
+      }
+      if (href.endsWith("/v1/chat")) throw new TypeError("network error");
+      return Response.json({ ok: true });
+    });
+    render(<FrankieProvider publishableKey="pk_drop" config={config} conversationId="conv-2" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "Send" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(state()).toBe("busy|assistant:streaming:"));
+    await vi.advanceTimersByTimeAsync(3000);
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Here they are."));
+  });
+
+  it("tells the server to stop when the visitor presses Stop", async () => {
+    const calls: string[] = [];
+    const fetchImpl = vi.fn(async (url: string | URL | Request, init?: RequestInit) => {
+      const href = String(url);
+      calls.push(`${init?.method ?? "GET"} ${new URL(href).pathname}`);
+      if (href.endsWith("/resume")) return Response.json({ session, messages: [], title: "New chat", busy: false });
+      if (href.endsWith("/v1/chat")) {
+        // A stream that stays open until the request is aborted.
+        return new Response(new ReadableStream({
+          start(controller) {
+            init?.signal?.addEventListener("abort", () => controller.error(new DOMException("aborted", "AbortError")));
+          },
+        }));
+      }
+      return Response.json({ ok: true });
+    });
+    render(<FrankieProvider publishableKey="pk_stop" config={config} conversationId="conv-3" fetchImpl={fetchImpl} persist={false} getUserToken={token}><Probe /></FrankieProvider>);
+    await waitFor(() => expect((screen.getByRole("button", { name: "Send" }) as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(screen.getByRole("button", { name: "Send" }));
+    await waitFor(() => expect(calls).toContain("POST /v1/chat"));
+    fireEvent.click(screen.getByRole("button", { name: "Stop" }));
+    await waitFor(() => expect(calls).toContain("POST /v1/chat/stop"));
+    await waitFor(() => expect(state()).toBe("idle|assistant:done:Stopped."));
+  });
+});