@runtypelabs/persona 3.21.3 → 3.23.0

package/src/ui.ts

@@ -33,6 +33,11 @@ import { resolveTokenValue } from "./utils/tokens";
 import { renderLucideIcon } from "./utils/icons";
 import { createElement, createElementInDocument } from "./utils/dom";
 import { morphMessages } from "./utils/morph";
+import {
+  navigateComposerHistory,
+  INITIAL_HISTORY_STATE,
+  type ComposerHistoryState
+} from "./utils/composer-history";
 import { computeMessageFingerprint, createMessageCache, getCachedWrapper, setCachedWrapper, pruneCache } from "./utils/message-fingerprint";
 import {
   createFollowStateController,
@@ -84,6 +89,7 @@ import { createApprovalBubble } from "./components/approval-bubble";
 import { createSuggestions } from "./components/suggestions";
 import { EventStreamBuffer } from "./utils/event-stream-buffer";
 import { EventStreamStore } from "./utils/event-stream-store";
+import { ThroughputTracker } from "./utils/throughput-tracker";
 import { createEventStreamView } from "./components/event-stream-view";
 import { createArtifactPane, type ArtifactPaneApi } from "./components/artifact-pane";
 import {
@@ -664,6 +670,8 @@ export const createAgentExperience = (
   let eventStreamStore = showEventStreamToggle ? new EventStreamStore(eventStreamDbName) : null;
   const eventStreamMaxEvents = config.features?.eventStream?.maxEvents ?? 2000;
   let eventStreamBuffer = showEventStreamToggle ? new EventStreamBuffer(eventStreamMaxEvents, eventStreamStore) : null;
+  // Passive output-throughput tracker, fed from the same SSE tap as the buffer.
+  let throughputTracker = showEventStreamToggle ? new ThroughputTracker() : null;
   let eventStreamView: ReturnType<typeof createEventStreamView> | null = null;
   let eventStreamVisible = false;
   let eventStreamRAF: number | null = null;
@@ -853,6 +861,8 @@ export const createAgentExperience = (
         onClose: () => toggleEventStreamOff(),
         config,
         plugins,
+        getThroughput: () =>
+          throughputTracker?.getMetric() ?? { status: "idle" },
       });
     }
     if (eventStreamView) {
@@ -1398,8 +1408,14 @@ export const createAgentExperience = (
       });
     }
 
-    // Resolve the approval
-    session.resolveApproval(approvalMessage.approval, decision);
+    // WebMCP gate approvals resolve a local Promise the bridge is parked on
+    // (no server round-trip); server-driven approvals call the API. The
+    // `toolType` marker set in `requestWebMcpApproval` discriminates the two.
+    if (approvalMessage.approval.toolType === "webmcp") {
+      session.resolveWebMcpApproval(messageId, decision);
+    } else {
+      session.resolveApproval(approvalMessage.approval, decision);
+    }
   });
 
   let artifactPaneApi: ArtifactPaneApi | null = null;
@@ -4497,6 +4513,7 @@ export const createAgentExperience = (
   if (eventStreamBuffer || config.onSSEEvent) {
     session.setSSEEventCallback((type: string, payload: unknown) => {
       config.onSSEEvent?.(type, payload);
+      throughputTracker?.processEvent(type, payload);
       eventStreamBuffer?.push({
         id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
         type,
@@ -4552,6 +4569,10 @@ export const createAgentExperience = (
     // intact so the user can edit and resend without retyping.
     if (session.isStreaming()) {
       session.cancel();
+      // Cancelling emits no terminal/error SSE frame, so reset the throughput
+      // tracker (as clear-chat does) to avoid a stale `running` row lingering.
+      throughputTracker?.reset();
+      eventStreamView?.update();
       return;
     }
 
@@ -4577,6 +4598,7 @@ export const createAgentExperience = (
 
     textarea.value = "";
     textarea.style.height = "auto"; // Reset height after clearing
+    resetHistoryNavigation();
 
     // Send message with optional content parts
     session.sendMessage(value, { contentParts });
@@ -4587,13 +4609,113 @@ export const createAgentExperience = (
     }
   };
 
-  const handleInputEnter = (event: KeyboardEvent) => {
+  // --- Composer message-history navigation (Up/Down arrows) ---
+  // Lets users recall and edit previously sent messages, shell/Slack style.
+  // The pure state machine lives in utils/composer-history.ts; here we feed it
+  // caret info and apply the value it returns. Text-only recall — attachments
+  // on past messages are not restored.
+  const historyNavigationEnabled = () =>
+    config.features?.composerHistory !== false;
+
+  let composerHistoryState: ComposerHistoryState = { ...INITIAL_HISTORY_STATE };
+  // Guards the reset-on-edit listener so our own programmatic value sets (which
+  // dispatch an `input` event for auto-resize) don't exit navigation mode.
+  let suppressHistoryReset = false;
+
+  const resetHistoryNavigation = () => {
+    composerHistoryState = { ...INITIAL_HISTORY_STATE };
+  };
+
+  const getUserMessageHistory = (): string[] =>
+    session
+      .getMessages()
+      .filter((message) => message.role === "user")
+      .map((message) => message.content ?? "")
+      .filter((text) => text.length > 0);
+
+  const applyHistoryValue = (value: string) => {
+    if (!textarea) return;
+    suppressHistoryReset = true;
+    textarea.value = value;
+    // Trigger the auto-resize handler (it listens on `input`).
+    textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    suppressHistoryReset = false;
+    // Caret to end for natural editing / appending.
+    const end = textarea.value.length;
+    textarea.setSelectionRange(end, end);
+  };
+
+  const handleComposerInput = () => {
+    // A real edit leaves history-navigation mode.
+    if (suppressHistoryReset) return;
+    resetHistoryNavigation();
+  };
+
+  const handleComposerKeydown = (event: KeyboardEvent) => {
+    if (!textarea) return;
+
+    // Up/Down: walk through previously sent user messages.
+    if (
+      historyNavigationEnabled() &&
+      (event.key === "ArrowUp" || event.key === "ArrowDown") &&
+      !event.shiftKey &&
+      !event.metaKey &&
+      !event.ctrlKey &&
+      !event.altKey &&
+      !event.isComposing
+    ) {
+      const atStart =
+        textarea.selectionStart === 0 && textarea.selectionEnd === 0;
+      const result = navigateComposerHistory({
+        direction: event.key === "ArrowUp" ? "up" : "down",
+        history: getUserMessageHistory(),
+        currentValue: textarea.value,
+        atStart,
+        state: composerHistoryState
+      });
+      composerHistoryState = result.state;
+      if (result.handled) {
+        event.preventDefault();
+        if (result.value !== undefined) {
+          applyHistoryValue(result.value);
+        }
+        return;
+      }
+      // Not handled — fall through to default cursor movement.
+    }
+
+    // Enter: send, unless a response is streaming. While streaming, Enter is
+    // inert (never a stop trigger) — the visible Stop button / Esc stop it.
     if (event.key === "Enter" && !event.shiftKey) {
+      if (session.isStreaming()) {
+        event.preventDefault();
+        return;
+      }
+      resetHistoryNavigation();
       event.preventDefault();
       sendButton.click();
     }
   };
 
+  // Esc-to-stop: while a response streams, Escape within this widget aborts it.
+  // Capture phase + registered at init so it runs before the composer-bar Esc
+  // collapse listener (attached later on open); stopImmediatePropagation keeps
+  // a stream-stop from also collapsing the panel. Scoped via composedPath so a
+  // page-wide Escape elsewhere doesn't hijack.
+  const handleEscStop = (event: KeyboardEvent) => {
+    if (event.key !== "Escape" || event.isComposing) return;
+    if (!session.isStreaming()) return;
+    if (!event.composedPath().includes(container)) return;
+    session.cancel();
+    // Cancelling emits no terminal/error SSE frame — reset throughput so the
+    // Events row doesn't keep showing a live rate from the stopped stream.
+    throughputTracker?.reset();
+    eventStreamView?.update();
+    resetHistoryNavigation();
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+
   const handleInputPaste = async (event: ClipboardEvent) => {
     if (config.attachments?.enabled !== true || !attachmentManager) return;
 
@@ -5454,8 +5576,9 @@ export const createAgentExperience = (
       persistentMetadata = {};
       actionManager.syncFromMetadata();
 
-      // Clear event stream buffer and store
+      // Clear event stream buffer and store, and reset throughput tracking
       eventStreamBuffer?.clear();
+      throughputTracker?.reset();
       eventStreamView?.update();
     });
   };
@@ -5465,9 +5588,13 @@ export const createAgentExperience = (
   if (composerForm) {
     composerForm.addEventListener("submit", handleSubmit);
   }
-  textarea?.addEventListener("keydown", handleInputEnter);
+  textarea?.addEventListener("keydown", handleComposerKeydown);
+  textarea?.addEventListener("input", handleComposerInput);
   textarea?.addEventListener("paste", handleInputPaste);
 
+  const escStopDoc = mount.ownerDocument ?? document;
+  escStopDoc.addEventListener("keydown", handleEscStop, true);
+
   const ATTACHMENT_DROP_ACTIVE_CLASS = "persona-attachment-drop-active";
   let attachmentFileDragDepth = 0;
 
@@ -5544,8 +5671,10 @@ export const createAgentExperience = (
     if (composerForm) {
       composerForm.removeEventListener("submit", handleSubmit);
     }
-    textarea?.removeEventListener("keydown", handleInputEnter);
+    textarea?.removeEventListener("keydown", handleComposerKeydown);
+    textarea?.removeEventListener("input", handleComposerInput);
     textarea?.removeEventListener("paste", handleInputPaste);
+    escStopDoc.removeEventListener("keydown", handleEscStop, true);
   });
 
   destroyCallbacks.push(() => {
@@ -5618,10 +5747,12 @@ export const createAgentExperience = (
         if (!eventStreamBuffer) {
           eventStreamStore = new EventStreamStore(eventStreamDbName);
           eventStreamBuffer = new EventStreamBuffer(eventStreamMaxEvents, eventStreamStore);
+          throughputTracker = throughputTracker ?? new ThroughputTracker();
           eventStreamStore.open().then(() => eventStreamBuffer?.restore()).catch(() => {});
-          // Register the SSE event callback (host tap + buffer)
+          // Register the SSE event callback (host tap + buffer + throughput)
           session.setSSEEventCallback((type: string, payload: unknown) => {
             config.onSSEEvent?.(type, payload);
+            throughputTracker?.processEvent(type, payload);
             eventStreamBuffer!.push({
               id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
               type,
@@ -5670,6 +5801,8 @@ export const createAgentExperience = (
         eventStreamStore?.destroy();
         eventStreamBuffer = null;
         eventStreamStore = null;
+        throughputTracker?.reset();
+        throughputTracker = null;
       }
 
       if (config.launcher?.enabled === false && launcherButtonInstance) {
@@ -6910,8 +7043,9 @@ export const createAgentExperience = (
       persistentMetadata = {};
       actionManager.syncFromMetadata();
 
-      // Clear event stream buffer and store
+      // Clear event stream buffer and store, and reset throughput tracking
       eventStreamBuffer?.clear();
+      throughputTracker?.reset();
       eventStreamView?.update();
     },
     setMessage(message: string): boolean {
@@ -7065,6 +7199,7 @@ export const createAgentExperience = (
     /** Push a raw event into the event stream buffer (for testing/debugging) */
     __pushEventStreamEvent(event: { type: string; payload: unknown }): void {
       if (eventStreamBuffer) {
+        throughputTracker?.processEvent(event.type, event.payload);
         eventStreamBuffer.push({
           id: `evt-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
           type: event.type,
@@ -7131,6 +7266,14 @@ export const createAgentExperience = (
       if (!approvalMessage?.approval) {
         throw new Error(`Approval not found: ${approvalId}`);
       }
+      // Mirror the in-panel click handler: WebMCP gate bubbles resolve a local
+      // Promise the bridge is parked on (no server round-trip and they carry an
+      // empty executionId/agentId), so they must NOT hit the server approval
+      // API. Route by the `toolType` marker set in `requestWebMcpApproval`.
+      if (approvalMessage.approval.toolType === "webmcp") {
+        session.resolveWebMcpApproval(approvalMessage.id, decision);
+        return;
+      }
       return session.resolveApproval(approvalMessage.approval, decision);
     },
     getMessages() {

package/src/utils/composer-history.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from "vitest";
+import {
+  navigateComposerHistory,
+  INITIAL_HISTORY_STATE,
+  type ComposerHistoryState
+} from "./composer-history";
+
+const history = ["first", "second", "third"]; // oldest -> newest
+
+const up = (
+  state: ComposerHistoryState,
+  overrides: Partial<Parameters<typeof navigateComposerHistory>[0]> = {}
+) =>
+  navigateComposerHistory({
+    direction: "up",
+    history,
+    currentValue: "",
+    atStart: true,
+    state,
+    ...overrides
+  });
+
+const down = (
+  state: ComposerHistoryState,
+  overrides: Partial<Parameters<typeof navigateComposerHistory>[0]> = {}
+) =>
+  navigateComposerHistory({
+    direction: "down",
+    history,
+    currentValue: "",
+    atStart: true,
+    state,
+    ...overrides
+  });
+
+describe("navigateComposerHistory", () => {
+  it("Up from a fresh composer recalls the newest message and saves the draft", () => {
+    const result = up(
+      { ...INITIAL_HISTORY_STATE },
+      { currentValue: "my draft" }
+    );
+    expect(result.handled).toBe(true);
+    expect(result.value).toBe("third");
+    expect(result.state).toEqual({ index: 2, draft: "my draft" });
+  });
+
+  it("repeated Up steps toward older messages", () => {
+    let state = up({ ...INITIAL_HISTORY_STATE }).state;
+    expect(state.index).toBe(2);
+
+    const second = up(state);
+    expect(second.value).toBe("second");
+    state = second.state;
+
+    const third = up(state);
+    expect(third.value).toBe("first");
+    state = third.state;
+    expect(state.index).toBe(0);
+  });
+
+  it("Up at the oldest entry is consumed but does not change the value", () => {
+    const state: ComposerHistoryState = { index: 0, draft: "" };
+    const result = up(state);
+    expect(result.handled).toBe(true);
+    expect(result.value).toBeUndefined();
+    expect(result.state.index).toBe(0);
+  });
+
+  it("does not hijack Up when not navigating and the caret is not at the start", () => {
+    const result = up({ ...INITIAL_HISTORY_STATE }, { atStart: false });
+    expect(result.handled).toBe(false);
+    expect(result.value).toBeUndefined();
+  });
+
+  it("continues navigating Up even when the caret is not at the start", () => {
+    // Already in history mode (caret sits at end after a recall).
+    const state: ComposerHistoryState = { index: 2, draft: "draft" };
+    const result = up(state, { atStart: false });
+    expect(result.handled).toBe(true);
+    expect(result.value).toBe("second");
+  });
+
+  it("Down steps toward newer messages while navigating", () => {
+    const state: ComposerHistoryState = { index: 0, draft: "draft" };
+    const result = down(state);
+    expect(result.handled).toBe(true);
+    expect(result.value).toBe("second");
+    expect(result.state.index).toBe(1);
+  });
+
+  it("Down past the newest entry restores the saved draft and exits", () => {
+    const state: ComposerHistoryState = { index: 2, draft: "saved draft" };
+    const result = down(state);
+    expect(result.handled).toBe(true);
+    expect(result.value).toBe("saved draft");
+    expect(result.state).toEqual(INITIAL_HISTORY_STATE);
+  });
+
+  it("Down does nothing when not navigating history", () => {
+    const result = down({ ...INITIAL_HISTORY_STATE });
+    expect(result.handled).toBe(false);
+    expect(result.value).toBeUndefined();
+  });
+
+  it("does nothing when there is no history", () => {
+    const result = navigateComposerHistory({
+      direction: "up",
+      history: [],
+      currentValue: "",
+      atStart: true,
+      state: { ...INITIAL_HISTORY_STATE }
+    });
+    expect(result.handled).toBe(false);
+  });
+
+  it("round-trips: Up then Down returns to the original draft", () => {
+    const draft = "in progress";
+    let state = { ...INITIAL_HISTORY_STATE };
+
+    const u1 = up(state, { currentValue: draft });
+    state = u1.state;
+    expect(u1.value).toBe("third");
+
+    const d1 = down(state); // back past newest -> restore draft
+    expect(d1.value).toBe(draft);
+    expect(d1.state).toEqual(INITIAL_HISTORY_STATE);
+  });
+});

package/src/utils/composer-history.ts

@@ -0,0 +1,113 @@
+/**
+ * Pure state machine for composer message-history navigation (Up/Down arrows).
+ *
+ * Mirrors the shell / Slack convention: pressing Up recalls previously sent
+ * user messages for re-entry or editing; Down walks back toward the present
+ * and restores the in-progress draft once you page past the newest entry.
+ *
+ * Kept free of DOM access so it can be unit-tested in the Node test env. The
+ * UI layer (`ui.ts`) supplies caret information and applies the returned value
+ * to the textarea.
+ */
+
+export interface ComposerHistoryState {
+  /** Index into the history list, or -1 when not navigating. */
+  index: number;
+  /** The user's in-progress text, saved when navigation begins. */
+  draft: string;
+}
+
+export const INITIAL_HISTORY_STATE: ComposerHistoryState = {
+  index: -1,
+  draft: ""
+};
+
+export interface ComposerHistoryInput {
+  direction: "up" | "down";
+  /** Previously sent user-message texts, oldest first. */
+  history: string[];
+  /** Current textarea value (saved as the draft when navigation begins). */
+  currentValue: string;
+  /** True when the caret sits at the very start of the textarea. */
+  atStart: boolean;
+  state: ComposerHistoryState;
+}
+
+export interface ComposerHistoryResult {
+  /** Whether the key was consumed (caller should preventDefault). */
+  handled: boolean;
+  /** New textarea value to apply — only present when it should change. */
+  value?: string;
+  /** Next navigation state. */
+  state: ComposerHistoryState;
+}
+
+/**
+ * Compute the next navigation state for an Up/Down key press.
+ *
+ * - **Up** enters history only from the top boundary (`atStart`), then keeps
+ *   stepping toward older messages on each subsequent press while navigating.
+ * - **Down** only acts while already navigating, stepping toward newer messages
+ *   and finally restoring the saved draft once it walks past the newest entry.
+ */
+export function navigateComposerHistory(
+  input: ComposerHistoryInput
+): ComposerHistoryResult {
+  const { direction, history, currentValue, atStart, state } = input;
+  const inHistory = state.index !== -1;
+
+  if (history.length === 0) {
+    return { handled: false, state };
+  }
+
+  if (direction === "up") {
+    // Only hijack Up from the top boundary so normal multi-line cursor
+    // movement keeps working until the user is actually cycling history.
+    if (!inHistory && !atStart) {
+      return { handled: false, state };
+    }
+
+    if (!inHistory) {
+      // First step: stash the draft and jump to the newest entry.
+      const index = history.length - 1;
+      return {
+        handled: true,
+        value: history[index],
+        state: { index, draft: currentValue }
+      };
+    }
+
+    if (state.index > 0) {
+      const index = state.index - 1;
+      return {
+        handled: true,
+        value: history[index],
+        state: { index, draft: state.draft }
+      };
+    }
+
+    // Already at the oldest entry — consume the key but don't change.
+    return { handled: true, state };
+  }
+
+  // direction === "down": only meaningful while navigating history.
+  if (!inHistory) {
+    return { handled: false, state };
+  }
+
+  if (state.index < history.length - 1) {
+    const index = state.index + 1;
+    return {
+      handled: true,
+      value: history[index],
+      state: { index, draft: state.draft }
+    };
+  }
+
+  // Stepped past the newest entry — restore the saved draft and exit.
+  return {
+    handled: true,
+    value: state.draft,
+    state: { ...INITIAL_HISTORY_STATE }
+  };
+}

package/src/utils/message-fingerprint.test.ts

@@ -125,6 +125,26 @@ describe("computeMessageFingerprint", () => {
     expect(fp1).not.toBe(fp2);
   });
 
+  it("changes when reasoning content grows while chunk count stays at 1 (ordered streaming path)", () => {
+    // The sequenced/production path collapses reasoning to a single accumulated
+    // chunk (client.ts: `reasoning.chunks = [ordered]`), so chunks.length is
+    // permanently 1 while the text grows. A length-only fingerprint would freeze
+    // the reasoning bubble mid-stream; hashing the last chunk's length + tail
+    // keeps the cache invalidating on every delta.
+    const fp1 = computeMessageFingerprint(
+      makeMessage({ variant: "reasoning", reasoning: { chunks: ["I am thinking about"], status: "streaming" } }),
+      0
+    );
+    const fp2 = computeMessageFingerprint(
+      makeMessage({
+        variant: "reasoning",
+        reasoning: { chunks: ["I am thinking about the user's question"], status: "streaming" },
+      }),
+      0
+    );
+    expect(fp1).not.toBe(fp2);
+  });
+
   it("changes when contentParts length changes", () => {
     const fp1 = computeMessageFingerprint(makeMessage({ contentParts: [] }), 0);
     const fp2 = computeMessageFingerprint(makeMessage({ contentParts: [{ type: "text", text: "hi" }] }), 0);

package/src/utils/message-fingerprint.ts

@@ -63,6 +63,8 @@ export function computeMessageFingerprint(
         ? JSON.stringify(message.toolCall.args).length
         : 0,
     message.reasoning?.chunks?.length ?? 0,
+    message.reasoning?.chunks?.[message.reasoning.chunks.length - 1]?.length ?? 0,
+    message.reasoning?.chunks?.[message.reasoning.chunks.length - 1]?.slice(-32) ?? "",
     message.contentParts?.length ?? 0,
     message.stopReason ?? "",
     configVersion,