@runtypelabs/persona 4.5.0 → 4.6.1

package/src/ui.stream-animation-update.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { createAgentExperience } from "./ui";
+import {
+  registerStreamAnimationPlugin,
+  unregisterStreamAnimationPlugin,
+} from "./utils/stream-animation";
+import type { StreamAnimationPlugin } from "./types";
+
+// A plugin animation carries its own CSS (built-in animations live in
+// widget.css). Plugin styles are injected only via ensurePluginActive, which the
+// initial mount runs but controller.update() historically skipped — so switching
+// to a plugin animation live used to set the type without ever injecting the CSS.
+const TEST_PLUGIN: StreamAnimationPlugin = {
+  name: "test-reveal",
+  containerClass: "test-reveal-stream",
+  wrap: "char",
+  styles: ".test-reveal-stream .persona-stream-char { opacity: 0; }",
+};
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+const styleTag = (mount: HTMLElement) =>
+  mount.querySelector('style[data-persona-animation="test-reveal"]');
+
+describe("createAgentExperience: stream-animation plugin activation on update()", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (cb: (time: number) => void) => {
+      cb(0);
+      return 1;
+    });
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    window.scrollTo = vi.fn();
+    registerStreamAnimationPlugin(TEST_PLUGIN);
+  });
+
+  afterEach(() => {
+    unregisterStreamAnimationPlugin("test-reveal");
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+  });
+
+  it("injects a plugin animation's styles when switched in via update()", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "none" } },
+    });
+
+    // Nothing injected while the type is "none".
+    expect(styleTag(mount)).toBeNull();
+
+    controller.update({
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    // The plugin's <style> is now present, so the animation can actually render.
+    expect(styleTag(mount)).not.toBeNull();
+
+    controller.destroy();
+  });
+
+  it("activates the plugin at mount when configured up front", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    expect(styleTag(mount)).not.toBeNull();
+    controller.destroy();
+  });
+
+  it("does not duplicate the style tag when the same plugin is re-selected", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+      features: { streamAnimation: { type: "test-reveal" } },
+    });
+
+    controller.update({ features: { streamAnimation: { type: "none" } } });
+    controller.update({ features: { streamAnimation: { type: "test-reveal" } } });
+
+    expect(
+      mount.querySelectorAll('style[data-persona-animation="test-reveal"]'),
+    ).toHaveLength(1);
+
+    controller.destroy();
+  });
+});

package/src/ui.ts

@@ -294,6 +294,11 @@ type Controller = {
   clearChat: () => void;
   setMessage: (message: string) => boolean;
   submitMessage: (message?: string) => boolean;
+  /**
+   * Manually retry a dropped durable stream (e.g. from a "Reconnect" button).
+   * No-op unless a resumable durable turn dropped and `reconnectStream` is set.
+   */
+  reconnect: () => void;
   startVoiceRecognition: () => boolean;
   stopVoiceRecognition: () => boolean;
   /**
@@ -775,6 +780,8 @@ export const createAgentExperience = (
     if (status === "connecting") return statusConfig.connectingText ?? statusCopy.connecting;
     if (status === "connected") return statusConfig.connectedText ?? statusCopy.connected;
     if (status === "error") return statusConfig.errorText ?? statusCopy.error;
+    if (status === "paused") return statusConfig.pausedText ?? statusCopy.paused;
+    if (status === "resuming") return statusConfig.resumingText ?? statusCopy.resuming;
     return statusCopy[status];
   };
 
@@ -5243,6 +5250,8 @@ export const createAgentExperience = (
         if (s === "connecting") return currentStatusConfig.connectingText ?? statusCopy.connecting;
         if (s === "connected") return currentStatusConfig.connectedText ?? statusCopy.connected;
         if (s === "error") return currentStatusConfig.errorText ?? statusCopy.error;
+        if (s === "paused") return currentStatusConfig.pausedText ?? statusCopy.paused;
+        if (s === "resuming") return currentStatusConfig.resumingText ?? statusCopy.resuming;
         return statusCopy[s];
       };
       applyStatusToElement(statusText, getCurrentStatusText(status), currentStatusConfig, status);
@@ -5310,11 +5319,31 @@ export const createAgentExperience = (
       lastArtifactsState = state;
       syncArtifactPane();
       persistState();
+    },
+    onReconnect(event) {
+      // Map the durable-reconnect lifecycle to public controller events.
+      const { executionId, lastEventId } = event.handle;
+      if (event.phase === "paused") {
+        eventBus.emit("stream:paused", { executionId, after: lastEventId });
+      } else if (event.phase === "resuming") {
+        eventBus.emit("stream:resuming", {
+          executionId,
+          after: lastEventId,
+          attempt: event.attempt ?? 1,
+        });
+      } else {
+        eventBus.emit("stream:resumed", { executionId, after: lastEventId });
+      }
     }
   });
 
   sessionRef.current = session;
 
+  // On teardown, cancel any in-flight turn/reconnect so a pending durable
+  // reconnect's backoff timer and focus/online listeners don't outlive the
+  // widget (cancel() → teardownReconnect()).
+  destroyCallbacks.push(() => session.cancel());
+
   // Mirror read-aloud playback state into the action buttons, and surface it as
   // a controller event (parallel to message:copy / message:feedback).
   let lastReadAloudId: string | null = null;
@@ -5380,6 +5409,17 @@ export const createAgentExperience = (
     });
   }
 
+  // Durable-session reconnect boot path: once history is in place,
+  // if the host passed a non-terminal resume handle (+ a reconnect transport),
+  // immediately re-enter `resuming` and replay everything past the cursor into
+  // the restored conversation. Fires AFTER hydration so the trailing partial
+  // assistant bubble exists for the replay to append to.
+  const maybeBootResume = () => {
+    if (config.resume && typeof config.reconnectStream === "function") {
+      session.resumeFromHandle(config.resume);
+    }
+  };
+
   if (pendingStoredState) {
     pendingStoredState
       .then((state) => {
@@ -5410,7 +5450,10 @@ export const createAgentExperience = (
           // eslint-disable-next-line no-console
           console.error("[AgentWidget] Failed to hydrate stored state:", error);
         }
-      });
+      })
+      .finally(() => maybeBootResume());
+  } else {
+    maybeBootResume();
   }
 
   // Centralized so both the default composer (`handleSubmit`) and the plugin
@@ -6683,6 +6726,7 @@ export const createAgentExperience = (
       const previousShowToolCalls = config.features?.showToolCalls;
       const previousToolCallDisplay = config.features?.toolCallDisplay;
       const previousReasoningDisplay = config.features?.reasoningDisplay;
+      const previousStreamAnimationType = config.features?.streamAnimation?.type;
       config = { ...config, ...nextConfig };
       // applyFullHeightStyles resets mount.style.cssText, so call it before applyThemeVariables
       applyFullHeightStyles();
@@ -6932,6 +6976,29 @@ export const createAgentExperience = (
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);
       }
 
+      // Re-activate the stream-animation plugin when the type changes via
+      // update(). Built-in animations (typewriter, word-fade, letter-rise,
+      // pop-bubble) carry their CSS in widget.css, so swapping the type is
+      // enough. Plugin animations (wipe, glyph-cycle, and custom plugins
+      // registered via registerStreamAnimationPlugin) inject their styles and
+      // run onAttach only through ensurePluginActive, which the initial mount
+      // calls but update() otherwise skips. Without this, switching to a plugin
+      // animation live sets the type but never injects the CSS, so it silently
+      // does nothing. ensurePluginActive is idempotent (styles inject once per
+      // root), so re-selecting a previously-activated plugin is a no-op.
+      const nextStreamAnimationType = config.features?.streamAnimation?.type;
+      if (
+        nextStreamAnimationType !== previousStreamAnimationType &&
+        nextStreamAnimationType &&
+        nextStreamAnimationType !== "none"
+      ) {
+        const streamAnimationPlugin = resolveStreamAnimationPlugin(
+          nextStreamAnimationType,
+          config.features?.streamAnimation?.plugins
+        );
+        if (streamAnimationPlugin) ensurePluginActive(streamAnimationPlugin, mount);
+      }
+
       // Update panel icon sizes
       const launcher = config.launcher ?? {};
       const headerIconHidden = launcher.headerIconHidden ?? false;
@@ -7954,6 +8021,9 @@ export const createAgentExperience = (
       if (!isPanelToggleable()) return;
       setOpenState(!open, "api");
     },
+    reconnect() {
+      session.reconnectNow();
+    },
     clearChat() {
       // Clear messages in session (this will trigger onMessagesChanged which re-renders)
       artifactsPaneUserHidden = false;

package/src/utils/constants.ts

@@ -4,7 +4,9 @@ export const statusCopy: Record<AgentWidgetSessionStatus, string> = {
   idle: "Online",
   connecting: "Connecting…",
   connected: "Streaming…",
-  error: "Offline"
+  error: "Offline",
+  paused: "Connection lost…",
+  resuming: "Reconnecting…"
 };
 
 /**

package/src/utils/morph.test.ts

@@ -83,4 +83,51 @@ describe("morphMessages", () => {
       expect(container.querySelector("span")!.textContent).toBe("New text");
     });
   });
+
+  describe("data-tool-elapsed (live duration counter)", () => {
+    it("preserves the live span's timer-owned text while the same tool is active", () => {
+      // The 100ms global timer wrote "0.3s"; a re-render arrives carrying the
+      // render-time value "<0.1s". Morphing it in would make the boundary
+      // flicker, so the still-live span (same startedAt) must be left alone.
+      const container = makeContainer(
+        '<span data-tool-elapsed="1000">0.3s</span>'
+      );
+      const oldSpan = container.querySelector("span")!;
+
+      morphMessages(
+        container,
+        makeNewContent('<span data-tool-elapsed="1000">&lt;0.1s</span>')
+      );
+
+      expect(container.querySelector("span")).toBe(oldSpan);
+      expect(container.querySelector("span")!.textContent).toBe("0.3s");
+    });
+
+    it("allows morph to the final static duration once the tool completes", () => {
+      const container = makeContainer(
+        '<span data-tool-elapsed="1000">0.7s</span>'
+      );
+
+      morphMessages(container, makeNewContent("<span>0.8s</span>"));
+
+      const span = container.querySelector("span")!;
+      expect(span.textContent).toBe("0.8s");
+      expect(span.hasAttribute("data-tool-elapsed")).toBe(false);
+    });
+
+    it("allows morph when the slot is reused by a different tool (startedAt changed)", () => {
+      const container = makeContainer(
+        '<span data-tool-elapsed="1000">0.5s</span>'
+      );
+
+      morphMessages(
+        container,
+        makeNewContent('<span data-tool-elapsed="2000">&lt;0.1s</span>')
+      );
+
+      const span = container.querySelector("span")!;
+      expect(span.getAttribute("data-tool-elapsed")).toBe("2000");
+      expect(span.textContent).toBe("<0.1s");
+    });
+  });
 });

package/src/utils/morph.ts

@@ -37,6 +37,24 @@ export const morphMessages = (
           if (oldNode.hasAttribute("data-preserve-runtime")) {
             return false;
           }
+          // The live tool-elapsed span's text is owned by the 100ms global
+          // timer in ui.ts (it rewrites `now - startedAt` on a fixed cadence).
+          // Re-morphing it to the render-time value fights that timer, so while
+          // a tool stays active across frequent re-renders the "<0.1s" boundary
+          // flickers. Preserve it while the SAME tool is still live (matching
+          // `data-tool-elapsed`, i.e. startedAt); allow the morph once the tool
+          // completes (new node drops the marker → final static duration) or the
+          // slot is reused by another tool (marker value changed).
+          if (oldNode.hasAttribute("data-tool-elapsed")) {
+            const sameLiveTool =
+              newNode instanceof HTMLElement &&
+              newNode.getAttribute("data-tool-elapsed") ===
+                oldNode.getAttribute("data-tool-elapsed");
+            if (sameLiveTool) {
+              return false;
+            }
+            return;
+          }
           if (oldNode.hasAttribute("data-preserve-animation")) {
             // Allow morph when the new node drops the attribute (e.g. tool completed)
             if (newNode instanceof HTMLElement && !newNode.hasAttribute("data-preserve-animation")) {