@runtypelabs/persona 3.21.2 → 3.22.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,
@@ -1398,8 +1403,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;
@@ -4577,6 +4588,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 +4599,109 @@ 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();
+    resetHistoryNavigation();
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+
   const handleInputPaste = async (event: ClipboardEvent) => {
     if (config.attachments?.enabled !== true || !attachmentManager) return;
 
@@ -5465,9 +5573,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 +5656,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(() => {
@@ -7131,6 +7245,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,