@runtypelabs/persona 4.30.0 → 4.32.0

package/src/ui.ts

@@ -11,9 +11,8 @@ import { isBrowserLocalApproval } from "./utils/restored-browser-state";
 import { applyStatusIndicatorState, placeStatusIndicator } from "./utils/status-indicator";
 import type { DictationSession } from "./dictation-session";
 import { usesSessionVoice, usesSessionVoiceForConfig } from "./utils/voice-support";
-import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
+import { escapeHtml, createMarkdownProcessorFromConfig, preprocessStreamingMarkdown } from "./postprocessors";
 import { resolveSanitizer } from "./utils/sanitize";
-import { stabilizeStreamingTables } from "./utils/streaming-table";
 import { wrapScrollableTables, refreshTableScrollFades } from "./utils/table-scroll-fade";
 import { getMarkdownParsersSync } from "./markdown-parsers-loader";
 import { loadClientStream } from "./client-stream-loader";
@@ -67,6 +66,7 @@ import {
   AgentWidgetContextMentionRef,
   AgentWidgetStoredDraft,
   AgentWidgetOpenConversationOptions,
+  AgentWidgetRevealToolCallOptions,
   AgentWidgetSuggestion,
   AgentWidgetSuggestionSource,
   AgentWidgetWelcomeIcon,
@@ -368,6 +368,8 @@ const VOICE_STATE_RESTORE_WINDOW = 30 * 1000;
 const VOICE_RESUME_NOTICE = "Tap the mic to resume your voice call";
 // Split desktop boundary; must match widget.css artifact media queries (min-width:641px).
 const ARTIFACT_SPLIT_DESKTOP_MIN = 641;
+// Covers the default 160ms V5 disclosure transition.
+const REVEAL_SETTLE_MS = 200;
 
 /** Marks the status region while a composer lock reason owns it. */
 const COMPOSER_REASON_ATTR = "data-persona-composer-reason";
@@ -663,6 +665,12 @@ type Controller = {
    * (launcher mode) or textarea is unavailable.
    */
   focusInput: () => boolean;
+  /**
+   * Bring a tool call into view: opens any collapsed group holding it, expands its details
+   * (unless `expand: false`), scrolls it to the center of the transcript and briefly marks it
+   * with `data-persona-revealed`. Returns false when no rendered tool bubble has that id.
+   */
+  revealToolCall: (toolCallId: string, options?: AgentWidgetRevealToolCallOptions) => boolean;
   /**
    * Programmatically resolve a pending approval.
    * @param approvalId - The approval ID to resolve
@@ -817,7 +825,8 @@ export const buildPostprocessor = (
     // displayed entities literally (I'll -> '). Only run the sanitizer when
     // it can actually parse HTML; escapeHtml output is already inert. Checked per
     // render (not once at setup): the chunk lands later and the self-heal re-renders.
-    const parsersReady = getMarkdownParsersSync() !== null;
+    const parsers = getMarkdownParsersSync();
+    const parsersReady = parsers !== null;
     let html: string;
     if (cfg?.postprocessMessage) {
       const out = cfg.postprocessMessage({
@@ -829,10 +838,9 @@ export const buildPostprocessor = (
       // sanitizer's degraded fallback. Honors `sanitize: false` (pass-through) as before.
       html = sanitize ? sanitize(out) : out;
     } else if (markdownProcessor) {
-      // While streaming, normalize tables-in-progress so they render as a real
-      // <table> from the first row with a stable column count (Telegram-style
-      // space reservation). The final, non-streaming render is left untouched.
-      const source = context.streaming ? stabilizeStreamingTables(nextText) : nextText;
+      // Stabilize incomplete Markdown only for display during streaming. The
+      // final render and the stored response always use the original text.
+      const source = preprocessStreamingMarkdown(nextText, context.streaming);
       // Already escapeHtml(text) (single, safe) while parsers are not loaded.
       const out = markdownProcessor(source);
       html = sanitize && parsersReady ? sanitize(out) : out;
@@ -1226,6 +1234,10 @@ export const createAgentExperience = (
     getSessionMetadata,
     updateSessionMetadata,
     emit: eventBus.emit,
+    captureResubmitGuard: () => {
+      const generation = restartGeneration;
+      return () => canRestart(generation);
+    },
     documentRef: typeof document !== "undefined" ? document : null
   });
   actionManager.syncFromMetadata();
@@ -1250,10 +1262,31 @@ export const createAgentExperience = (
   // Track pending resubmit state for injection-triggered resubmit
   // When a handler returns resubmit: true, we wait for injectAssistantMessage()
   // to be called before triggering the actual resubmit (to avoid race conditions)
+  // Cached restoration reuses this controller, so work queued by the old page
+  // lifecycle must remain stale even after pageshow makes the page active again.
+  let restartGeneration = 0;
+  let destroyed = false;
+  const canRestart = (generation: number) =>
+    !destroyed && !pageHiding && generation === restartGeneration;
+  const invalidatePendingRestarts = () => {
+    restartGeneration++;
+    pendingResubmit = false;
+    if (pendingResubmitTimeout !== null) clearTimeout(pendingResubmitTimeout);
+    pendingResubmitTimeout = null;
+  };
+  const scheduleResubmit = () => {
+    const generation = restartGeneration;
+    if (!canRestart(generation)) return;
+    setTimeout(() => {
+      if (canRestart(generation) && !session.isStreaming()) session.continueConversation();
+    }, 100);
+  };
+
   let pendingResubmit = false;
   let pendingResubmitTimeout: ReturnType<typeof setTimeout> | null = null;
 
   const handleResubmitRequested = () => {
+    if (!canRestart(restartGeneration)) return;
     pendingResubmit = true;
     // Clear any existing timeout
     if (pendingResubmitTimeout) {
@@ -2836,8 +2869,10 @@ export const createAgentExperience = (
 
     // Check if the click/keypress is on an expand header button
     const headerButton = target.closest('button[data-expand-header="true"]') as HTMLElement;
-    if (!headerButton) return;
+    if (headerButton) toggleBubbleHeader(headerButton);
+  };
 
+  const toggleBubbleHeader = (headerButton: HTMLElement) => {
     // Find the parent bubble element
     const bubble = headerButton.closest('.persona-reasoning-bubble, .persona-tool-bubble, .persona-approval-bubble') as HTMLElement;
     if (!bubble) return;
@@ -2850,6 +2885,12 @@ export const createAgentExperience = (
     // DOM grows so the resize observer cannot pull the opened details away.
     markReaderEngaged();
     pauseAutoScroll();
+    const anchor = anchorState;
+    if (anchor) cancelSmoothScroll();
+    const finishDisclosure = anchor && activityUi?.holdScroll(
+      bubble, body, anchor, measureContentHeight, setAnchorSpacerHeight,
+      BOTTOM_THRESHOLD, () => anchorState === anchor
+    );
     const bubbleType = headerButton.getAttribute('data-bubble-type');
     if (bubble.classList.contains("persona-activity-row")) {
       activityLifecycle?.manual(messageId);
@@ -2876,6 +2917,7 @@ export const createAgentExperience = (
       approvalDetailsExpansionState.set(messageId, !expanded);
       approvalUi.updateApprovalDetailsUI(messageId, bubble, config, approvalDetailsExpansionState);
     }
+    finishDisclosure?.();
     // Invalidate cached wrapper so next render rebuilds with current expansion state
     messageCache.delete(messageId);
   };
@@ -2926,6 +2968,24 @@ export const createAgentExperience = (
   // This handles clicks even after idiomorph morphs the DOM and strips inline listeners
   const messageVoteState = new Map<string, "upvote" | "downvote">();
 
+  // Reveal state belongs to the message, not its current DOM node: streaming
+  // renders can morph or replace the bubble before the highlight expires.
+  const revealedToolCalls = new Map<string, number>();
+  let revealCenterTimer: number | undefined;
+  let revealScrollGeneration = 0;
+  const refreshRevealedToolCalls = () => {
+    messagesWrapper.querySelectorAll<HTMLElement>(".persona-tool-bubble[data-tool-call-id]").forEach((bubble) => {
+      bubble.toggleAttribute("data-persona-revealed", revealedToolCalls.has(bubble.dataset.messageId!));
+    });
+  };
+  const clearRevealedToolCalls = () => {
+    window.clearTimeout(revealCenterTimer);
+    revealCenterTimer = undefined;
+    revealedToolCalls.forEach((timer) => window.clearTimeout(timer));
+    revealedToolCalls.clear();
+    refreshRevealedToolCalls();
+  };
+
   // Read-aloud (text-to-speech) button state. The ReadAloudController in the
   // session is the source of truth; these mirror its last-known state so the
   // button visuals can be re-applied after every render/morph (which would
@@ -4026,7 +4086,11 @@ export const createAgentExperience = (
     body.style.cssText = '';
     // A plugin-owned footer is the plugin's DOM: its inline state (the home
     // screen's `display: none` placeholder) is not ours to reset.
-    if (!composerIsPluginOwned) footer.style.cssText = '';
+    if (!composerIsPluginOwned) {
+      footer.style.cssText = '';
+      // The reset also wipes the hidden state that layout.showFooter set.
+      if (config.layout?.showFooter === false) footer.style.display = 'none';
+    }
 
     // Preserve the event-stream takeover across a layout-mode change. The
     // cssText reset above wiped the `display: none` that toggleEventStreamOn
@@ -4378,6 +4442,7 @@ export const createAgentExperience = (
         border-top: none !important;
         padding: 8px 16px 12px 16px !important;
         ${chatFlush ? 'background: transparent !important;' : ''}
+        ${config.layout?.showFooter === false ? 'display: none !important;' : ''}
       `;
     }
 
@@ -5032,6 +5097,7 @@ export const createAgentExperience = (
     initialSpacerHeight: number;
     contentHeightAtAnchor: number;
     spacerHeight: number;
+    pending: number;
   } | null = null;
   let anchorRAF: number | null = null;
   // Seeded send-detection so restored history doesn't read as a fresh send.
@@ -5068,6 +5134,9 @@ export const createAgentExperience = (
   // look at the scroll event.
   let readerEngagedThisTurn = false;
   const markReaderEngaged = () => {
+    // Reader input invalidates only reveal scrolling, including its settle pass.
+    // The animation checks this generation before its next scroll write.
+    revealScrollGeneration++;
     readerEngagedThisTurn = true;
     revealTranscriptScrollbar();
   };
@@ -5166,11 +5235,14 @@ export const createAgentExperience = (
     const timestamp = Number(rawVoiceState.timestamp ?? 0);
     voiceState.manuallyDeactivated = Boolean(rawVoiceState.manuallyDeactivated);
     if (wasActive && Date.now() - timestamp < VOICE_STATE_RESTORE_WINDOW) {
+      const generation = restartGeneration;
       setTimeout(() => {
+        if (!canRestart(generation)) return;
         if (!voiceState.active) {
           voiceState.manuallyDeactivated = false;
           if (usesSessionVoice(config.voiceRecognition?.provider)) {
             session.toggleVoice().then(() => {
+              if (!canRestart(generation)) return;
               voiceState.active = isSessionVoiceLive();
               emitVoiceState("restore");
               if (voiceState.active) {
@@ -5192,10 +5264,10 @@ export const createAgentExperience = (
     }
   };
   // Re-stamp a live call as the page unloads: the restore window counts from
-  // the navigation, not from when the (possibly long) call was started. A
-  // back/forward-cache hide (`persisted`) isn't an unload: the page lives on.
-  const handleVoicePageHide = (event: PageTransitionEvent) => {
-    pageHiding = !event.persisted;
+  // the navigation, not from when the (possibly long) call was started. Protect
+  // that record from the trailing disconnect statuses, including cached hides.
+  const handleVoicePageHide = () => {
+    pageHiding = true;
     if (voiceState.active) persistVoiceMetadata();
   };
   if (typeof window !== "undefined") {
@@ -5681,7 +5753,7 @@ export const createAgentExperience = (
   // arrow pointing at nothing. Trim to what the reader's current position
   // actually needs plus the anti-bounce slack (shrink-only, like the drain).
   const trimAnchorSpacerToRest = () => {
-    if (!anchorState || anchorState.spacerHeight <= 0) return;
+    if (!anchorState || anchorState.spacerHeight <= 0 || anchorState.pending) return;
     const contentHeight = measureContentHeight(anchorState.spacerHeight);
     const required = Math.max(
       0,
@@ -5761,6 +5833,7 @@ export const createAgentExperience = (
       });
 
       anchorState = {
+        pending: 0,
         initialSpacerHeight: spacerHeight,
         contentHeightAtAnchor: contentHeight,
         spacerHeight
@@ -5804,6 +5877,7 @@ export const createAgentExperience = (
       slack: BOTTOM_THRESHOLD
     });
     anchorState = {
+      pending: 0,
       initialSpacerHeight: spacerHeight,
       contentHeightAtAnchor: contentHeight,
       spacerHeight
@@ -5830,7 +5904,7 @@ export const createAgentExperience = (
       scheduleAutoScroll(!isStreaming);
       return;
     }
-    if (anchorState && anchorState.initialSpacerHeight > 0) {
+    if (anchorState && anchorState.initialSpacerHeight > 0 && !anchorState.pending) {
       const currentContentHeight = body.scrollHeight - anchorState.spacerHeight;
       const next = computeShrunkSpacerHeight({
         initialSpacerHeight: anchorState.initialSpacerHeight,
@@ -7158,6 +7232,15 @@ export const createAgentExperience = (
     if (messages.length > 0) warmClientStream();
     renderMessagesWithPluginsImpl(container, messages, transform);
     refreshReadAloudButtons();
+    if (revealedToolCalls.size > 0) {
+      for (const [id, timer] of revealedToolCalls) {
+        if (!messages.some((message) => message.id === id)) {
+          window.clearTimeout(timer);
+          revealedToolCalls.delete(id);
+        }
+      }
+      refreshRevealedToolCalls();
+    }
   };
 
   /**
@@ -9132,7 +9215,7 @@ export const createAgentExperience = (
     currentTurnAnchored = reading.anchored;
     anchoredMessageId = reading.anchoredId;
     readerEngagedThisTurn = reading.readerEngaged;
-    anchorState = reading.anchor ? { ...reading.anchor } : null;
+    anchorState = reading.anchor ? { ...reading.anchor, pending: 0 } : null;
     setAnchorSpacerHeight(reading.anchor?.spacerHeight ?? 0);
     if (reading.following) autoFollow.resume(); else autoFollow.pause();
     newMessagesSincePause = reading.unread;
@@ -9625,6 +9708,7 @@ export const createAgentExperience = (
   // otherwise dispatch the same text/command twice. It also covers an async
   // `onBeforeSend` (the `preparing` phase).
   let submitInFlight = false;
+  let submitEpoch = 0;
   /** Aborts the in-flight preparation on destroy or a superseding stop. */
   let submissionAbort: AbortController | null = null;
 
@@ -10035,10 +10119,11 @@ export const createAgentExperience = (
     }
     if (submitInFlight) return;
     submitInFlight = true;
+    const epoch = ++submitEpoch;
     try {
       await performSubmit({ resolveInlineCommand: true, ...submitOptions });
     } finally {
-      submitInFlight = false;
+      if (epoch === submitEpoch) submitInFlight = false;
     }
   };
 
@@ -10065,8 +10150,9 @@ export const createAgentExperience = (
   ): void => {
     if (submitInFlight) return;
     submitInFlight = true;
+    const epoch = ++submitEpoch;
     const finish = () => {
-      submitInFlight = false;
+      if (epoch === submitEpoch) submitInFlight = false;
     };
     try {
       const result = performSubmit({ ...options, overrideText: text });
@@ -10508,7 +10594,7 @@ export const createAgentExperience = (
 
     voiceState.active = false;
     emitVoiceState(source);
-    persistVoiceMetadata();
+    if (!pageHiding) persistVoiceMetadata();
     syncComposerCompact();
 
     if (micButton) {
@@ -10698,9 +10784,10 @@ export const createAgentExperience = (
   const pendingSubmissionUnsub = eventBus.on("assistant:complete", () => {
     const pending = composerStore.getState().pendingSubmission;
     const generation = composerConversationGeneration;
+    const restart = restartGeneration;
     if (!pending) return;
     setTimeout(() => {
-      if (session.isStreaming() || generation !== composerConversationGeneration || composerStore.getState().pendingSubmission !== pending) return;
+      if (!canRestart(restart) || session.isStreaming() || generation !== composerConversationGeneration || composerStore.getState().pendingSubmission !== pending) return;
       sendPendingSubmission();
     }, 0);
   });
@@ -10713,11 +10800,13 @@ export const createAgentExperience = (
       return;
     }
     const generation = composerConversationGeneration;
+    const restart = restartGeneration;
     setTimeout(() => {
-      if (generation !== composerConversationGeneration) return;
+      if (!canRestart(restart) || generation !== composerConversationGeneration) return;
       if (!voiceState.active && !voiceState.manuallyDeactivated) {
         if (usesSessionVoice(config.voiceRecognition?.provider)) {
           session.toggleVoice().then(() => {
+            if (!canRestart(restart) || generation !== composerConversationGeneration) return;
             voiceState.active = session.isVoiceActive();
             emitVoiceState("auto");
             if (session.isVoiceActive()) applyRuntypeMicRecordingStyles();
@@ -10730,17 +10819,50 @@ export const createAgentExperience = (
   });
   destroyCallbacks.push(autoResumeUnsub);
 
+  // A cached document retains its DOM and controller, but must release live
+  // transports and capture before it freezes. A fresh navigation still uses
+  // the existing teardown/voice-metadata path above.
+  let cachedPage = false;
+  const suspendCachedPage = (event: PageTransitionEvent) => {
+    if (!event.persisted || cachedPage) return;
+    cachedPage = true;
+    pageHiding = true;
+    invalidatePendingRestarts();
+    composerConversationGeneration++;
+    submitEpoch++;
+    submitInFlight = false;
+    submissionAbort?.abort();
+    submissionAbort = null;
+    composerStore.setPreparing(false);
+    dismissDictation();
+    stopVoiceRecognition("system");
+    session.cancel();
+    session.stopSpeaking();
+    session.cleanupVoice();
+    throughputTracker?.reset();
+    eventStreamView?.update();
+  };
+  const restoreCachedPage = (event: PageTransitionEvent) => {
+    if (!event.persisted || !cachedPage) return;
+    cachedPage = false;
+    pageHiding = false;
+    // Rebuild the provider lazily so the same controls can start a new call.
+    // Neither stopped replies nor calls restart automatically on Back.
+    if (config.voiceRecognition?.enabled === true && usesSessionVoiceForConfig(config)) session.setupVoice();
+  };
+  window.addEventListener("pagehide", suspendCachedPage);
+  window.addEventListener("pageshow", restoreCachedPage);
+  destroyCallbacks.push(() => {
+    window.removeEventListener("pagehide", suspendCachedPage);
+    window.removeEventListener("pageshow", restoreCachedPage);
+  });
+
   // Handle action:resubmit event - automatically trigger another model call
   // when an action handler needs the model to continue processing (e.g., analyzing search results)
   const resubmitUnsub = eventBus.on("action:resubmit", () => {
     // Short delay to allow UI to update with any injected messages
     // Handlers should call context.triggerResubmit() AFTER their async work completes
-    setTimeout(() => {
-      if (session && !session.isStreaming()) {
-        // Continue conversation without adding a visible user message
-        session.continueConversation();
-      }
-    }, 100);
+    scheduleResubmit();
   });
   destroyCallbacks.push(resubmitUnsub);
 
@@ -11361,6 +11483,8 @@ export const createAgentExperience = (
 
       view.replaceComposer(nextFooter);
       footer = view.composer.footer;
+      // A rebuilt footer starts visible; keep honoring layout.showFooter.
+      if (config.layout?.showFooter === false) footer.style.display = "none";
       // A plugin composer owns its own send affordance, so the built-in
       // send/stop swap has nothing to drive.
       const isDefaultFooter =
@@ -12234,6 +12358,10 @@ export const createAgentExperience = (
         getSessionMetadata,
         updateSessionMetadata,
         emit: eventBus.emit,
+        captureResubmitGuard: () => {
+          const generation = restartGeneration;
+          return () => canRestart(generation);
+        },
         documentRef: typeof document !== "undefined" ? document : null
       });
 
@@ -12691,6 +12819,7 @@ export const createAgentExperience = (
       disposeApprovalRenders();
       artifactsPaneUserHidden = false;
       activityLifecycle?.clear();
+      clearRevealedToolCalls();
       toolExpansionState.clear();
       reasoningExpansionState.clear();
       approvalDetailsExpansionState.clear();
@@ -12883,11 +13012,7 @@ export const createAgentExperience = (
           pendingResubmitTimeout = null;
         }
         // Short delay to ensure message is in context
-        setTimeout(() => {
-          if (session && !session.isStreaming()) {
-            session.continueConversation();
-          }
-        }, 100);
+        scheduleResubmit();
       }
 
       return result;
@@ -13098,6 +13223,68 @@ export const createAgentExperience = (
       textarea.focus();
       return true;
     },
+    revealToolCall(toolCallId: string, options: AgentWidgetRevealToolCallOptions = {}): boolean {
+      const bubble = Array.from(body.querySelectorAll<HTMLElement>(".persona-tool-bubble[data-tool-call-id]"))
+        .find((el) => el.dataset.toolCallId === toolCallId);
+      if (!bubble) return false;
+      const ownHeader = (owner: HTMLElement) =>
+        Array.from(owner.querySelectorAll<HTMLElement>('button[data-expand-header="true"]'))
+          .find((header) => header.closest(".persona-tool-bubble") === owner);
+      const openHeader = (header: HTMLElement | undefined) => {
+        if (header?.getAttribute("aria-expanded") === "false") toggleBubbleHeader(header);
+      };
+      const groups: HTMLElement[] = [];
+      for (let group = bubble.parentElement?.closest<HTMLElement>(".persona-tool-bubble"); group;
+        group = group.parentElement?.closest<HTMLElement>(".persona-tool-bubble")) groups.unshift(group);
+      groups.forEach((group) => openHeader(ownHeader(group)));
+      const header = ownHeader(bubble);
+      if (options.expand !== false) openHeader(header);
+
+      markReaderEngaged();
+      // A prior jump owns a separate animation whose completion resumes follow.
+      latestScroll.cancel();
+      pauseAutoScroll();
+      const revealGeneration = revealScrollGeneration;
+      const anchor = header ?? bubble;
+      const shouldContinue = () => !destroyed && revealGeneration === revealScrollGeneration && body.contains(anchor);
+      const reduceMotion = typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const targetTop = () => {
+        const raw = offsetTopWithinBody(anchor) - (body.clientHeight - anchor.offsetHeight) / 2;
+        return Math.max(0, Math.min(raw, getScrollBottomOffset(body)));
+      };
+      const center = () => {
+        if (!shouldContinue()) return;
+        // Use the same programmatic-scroll tracking as automatic following so
+        // centering near the bottom cannot be mistaken for reader intent.
+        if (reduceMotion) {
+          cancelSmoothScroll();
+          isAutoScrolling = true;
+          body.scrollTop = targetTop();
+          lastScrollTop = body.scrollTop;
+          isAutoScrolling = false;
+        } else animateScrollTo(body, targetTop, REVEAL_SETTLE_MS, shouldContinue);
+      };
+      window.clearTimeout(revealCenterTimer);
+      center();
+      // Disclosure height transitions move the row after the first pass; center again once they settle.
+      revealCenterTimer = window.setTimeout(() => {
+        revealCenterTimer = undefined;
+        center();
+      }, REVEAL_SETTLE_MS);
+
+      const highlightMs = options.highlightMs ?? 2000;
+      if (highlightMs > 0) {
+        const messageId = bubble.dataset.messageId!;
+        window.clearTimeout(revealedToolCalls.get(messageId));
+        revealedToolCalls.set(messageId, window.setTimeout(() => {
+          revealedToolCalls.delete(messageId);
+          refreshRevealedToolCalls();
+        }, highlightMs));
+        bubble.setAttribute("data-persona-revealed", "");
+      }
+      return true;
+    },
     async resolveApproval(
       approvalId: string,
       decision: 'approved' | 'denied',
@@ -13224,6 +13411,8 @@ export const createAgentExperience = (
       return session.submitNPSFeedback(rating, comment);
     },
     destroy() {
+      destroyed = true;
+      invalidatePendingRestarts();
       renderReadiness.destroy();
       slots.destroy();
       mount.removeEventListener("click", routeLinkClick);
@@ -13240,6 +13429,7 @@ export const createAgentExperience = (
       }
       activityLifecycle?.destroy();
       loadingLabelLifecycle?.destroy();
+      clearRevealedToolCalls();
       toolExpansionState.clear();
       reasoningExpansionState.clear();
       approvalDetailsExpansionState.clear();

package/src/utils/actions.ts

@@ -28,6 +28,7 @@ type ActionManagerOptions = {
     payload: AgentWidgetControllerEventMap[K]
   ) => void;
   documentRef: Document | null;
+  captureResubmitGuard?: () => () => boolean;
 };
 
 const stripCodeFence = (value: string) => {
@@ -195,7 +196,9 @@ export const createActionManager = (options: ActionManagerOptions) => {
       try {
         // Create triggerResubmit function that emits the resubmit event
         // Handlers should call this AFTER async work completes (not return resubmit: true)
+        const canResubmit = options.captureResubmitGuard?.();
         const triggerResubmit = () => {
+          if (canResubmit && !canResubmit()) return;
           options.emit("action:resubmit", eventPayload);
         };
 

package/src/utils/streaming-markdown.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import { stabilizeStreamingMarkdown as stabilize } from "./streaming-markdown";
+import { createMarkdownProcessor } from "../postprocessors";
+
+const markdown = createMarkdownProcessor();
+
+describe("streaming Markdown display", () => {
+  it.each(["**bold**", "*italic*", "_italic_", "__bold__", "***both***", "**bold *italic***", "*italic **bold***", "`a*b`", "``a`b``"])("renders every nonempty content prefix of %s without raw delimiters", (source) => {
+    for (let length = 1; length <= source.length; length++) {
+      const html = markdown(stabilize(`Start ${source.slice(0, length)}`));
+      const text = html.replace(/<[^>]*>/g, "");
+      if (!source.includes("`")) expect(text).not.toMatch(/[*_]/);
+    }
+    expect(markdown(stabilize(source))).toBe(markdown(source));
+  });
+
+  it("stabilizes every character boundary across multiple completed and new spans", () => {
+    const source = "Watch **bold**, *italic*, and `inline code`. Try **nested *emphasis*** and _more_ with __bold__ afterward.";
+    for (let length = 1; length <= source.length; length++) {
+      const html = markdown(stabilize(source.slice(0, length)));
+      expect(html.replace(/<[^>]*>/g, "")).not.toMatch(/[*_`]/);
+    }
+    expect(markdown(stabilize(source))).toBe(markdown(source));
+  });
+
+  it.each([
+    "* list item", "_ literal _", "foo_bar_baz", "2 * 3", "2*3", "foo*bar", "<https://example.com/a_b>", '<span data-label="**hello">text</span>', "***", "*", "\\*literal", "\\`literal", "\\[literal", "[ordinary] prose",
+    "[x](https://example.com/it's)", "[x](https://example.com/a_(b))", '[x](https://example.com "a title")', "![x](image.png)",
+    "```md\n**literal\n| a | b |\n| -\n```", "> ```\n*literal\n> ```", "- ```\n**literal\n  ```", "    **literal"
+  ])("preserves completed or ambiguous input %j", (source) => {
+    expect(stabilize(source)).toBe(source);
+  });
+
+  it("shows incomplete link labels as text and only activates complete destinations", () => {
+    const source = "[read more](https://example.com/a_(b))";
+    for (let length = 1; length < source.length; length++) {
+      const html = markdown(stabilize(source.slice(0, length)));
+      expect(html).not.toContain("<a ");
+      expect(html.replace(/<[^>]*>/g, "")).not.toMatch(/[[\]()]/);
+    }
+    expect(markdown(stabilize(source))).toContain('<a href="https://example.com/a_(b)">read more</a>');
+  });
+
+  it.each([
+    "Use `[` here", "Use `]` here", "Use ``[`]`` here", "Use ``]`[`` here",
+    "Use `]``[` here", "Use \\[ and \\] here",
+  ])("keeps code brackets inert while streaming link label %s", (label) => {
+    const source = `[${label}](https://example.com)`;
+    for (let length = 1; length < source.length; length++) {
+      const html = markdown(stabilize(source.slice(0, length)));
+      expect(html).not.toContain("<a ");
+      expect(html).not.toContain("https:");
+    }
+    expect(stabilize(source)).toBe(source);
+    expect(markdown(stabilize(source))).toBe(markdown(source));
+    expect(markdown(stabilize(source))).toContain('<a href="https://example.com">');
+    const image = `![${label}](image.png)`;
+    for (let length = 2; length < image.length; length++) {
+      const display = stabilize(image.slice(0, length));
+      expect(markdown(display)).not.toContain("<img ");
+      if (length >= label.length + 2) expect(display).toBe("");
+    }
+    expect(stabilize(image)).toBe(image);
+  });
+
+  it.each(["Use ` here", "Use `` here", "Use `` unmatched ` here", "Use ``[nested] ` here", "Use ` [nested] `` here"])("treats unmatched code runs as literal link label text: %s", (label) => {
+    const source = `[${label}](https://example.com)`;
+    expect(stabilize(source)).toBe(source);
+    expect(markdown(stabilize(source))).toBe(markdown(source));
+    expect(markdown(stabilize(source))).toContain('<a href="https://example.com">');
+    expect(stabilize(`[${label}](https://example`)).not.toContain("https:");
+  });
+
+  it("holds incomplete images, including escaped brackets and nested URL parentheses", () => {
+    const source = "![an \\] image](https://example.com/a_(b).png)";
+    for (let length = 2; length < source.length; length++) {
+      expect(stabilize(`Before ${source.slice(0, length)}`)).toBe("Before ");
+    }
+    expect(stabilize(source)).toBe(source);
+    expect(stabilize("Before ![image](url\\")).toBe("Before ");
+    expect(stabilize("Before [link](url\\")).toBe("Before link");
+  });
+
+  it("stabilizes formatting inside unfinished link labels", () => {
+    expect(markdown(stabilize("[**hello"))).toContain("<strong>hello</strong>");
+    expect(markdown(stabilize("[**hello**](https://example"))).toContain("<strong>hello</strong>");
+  });
+
+  it("keeps inline code contents and escapes inert", () => {
+    expect(markdown(stabilize("Here `**[x](url)"))).toContain("<code>**[x](url)</code>");
+    expect(stabilize("\\\\**bold")).toBe("\\\\**bold**");
+    expect(markdown(stabilize("**hello\\"))).toContain("<strong>hello\\</strong>");
+  });
+
+  it("preserves whitespace outside a temporarily completed emphasis span", () => {
+    expect(stabilize("**hello ")).toBe("**hello** ");
+    expect(stabilize("**hello\n\nNext")).toBe("**hello**\n\nNext");
+  });
+
+  it("continues table completion outside code fences", () => {
+    expect(markdown(stabilize("| A | B |\n| -"))).toContain("<table>");
+  });
+});