@opengeni/react 7.4.0 → 7.5.0-canary.36927100590001

package/src/components/open-geni-links.tsx

@@ -153,3 +153,27 @@ export function sessionLinkResolver(input: {
     return null;
   };
 }
+
+/** An editable artifact or Site to open in a host-mounted viewer. */
+export type OpenGeniViewerTarget = Readonly<{
+  kind: "editable-artifact" | "site";
+  artifactId: string;
+  /** The link text the agent wrote, until the viewer loads the real title. */
+  title?: string | undefined;
+}>;
+
+/**
+ * "Open in host viewer": resolve agent links to editable artifacts and Sites
+ * in this workspace to `open(target)`, for example to mount
+ * `SessionArtifactViewer` beside the conversation. Other targets fall through.
+ */
+export function viewerLinkResolver(input: {
+  workspaceId: string;
+  open: (target: OpenGeniViewerTarget) => void;
+}): OpenGeniLinkResolver {
+  return (target) => {
+    if (target.kind !== "editable-artifact" && target.kind !== "site") return null;
+    if (target.workspaceId !== input.workspaceId) return null;
+    return { open: () => input.open({ kind: target.kind, artifactId: target.artifactId }) };
+  };
+}

package/src/components/sandbox-terminal.tsx

@@ -1,5 +1,12 @@
 import type { TerminalCapability } from "@opengeni/sdk";
-import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { cn } from "../lib/cn";
 import { type TerminalStreamStatus, useTerminalStream } from "../hooks/use-terminal-stream";
 import type { UseSandboxTerminalResult } from "../hooks/use-sandbox-terminal";
@@ -7,6 +14,7 @@ import { resolveTerminalFont, xtermThemeFromTokens } from "../lib/xterm-theme";
 import { sandboxAcceptsLiveIo } from "../lib/sandbox-liveness";
 import { terminalCanAcquirePty } from "../lib/terminal-capability";
 import { attachRenderer, type RendererLoaders, type RendererTier } from "../lib/xterm-renderer";
+import { sandboxTerminalPeers } from "../lib/workbench-peers";
 
 /**
  * A COMPLETE xterm `ITheme` (subset by intent, but every field xterm colors a
@@ -114,6 +122,19 @@ type XtermLike = {
   };
 };
 type FitAddonLike = { fit: () => void };
+type TerminalPeerBundle = {
+  Terminal: new (options: Record<string, unknown>) => XtermLike;
+  FitAddon: new () => FitAddonLike;
+  WebLinksAddon: new (handler: (event: MouseEvent, uri: string) => void) => unknown;
+  loadWebgl?:
+    | (() => Promise<{
+        WebglAddon: new () => {
+          dispose: () => void;
+          onContextLoss?: (callback: () => void) => void;
+        };
+      }>)
+    | undefined;
+};
 
 export type TerminalSurfaceState =
   | "loading"
@@ -237,6 +258,12 @@ export function SandboxTerminal({
   const wroteFirehoseRef = useRef(false);
   const bootActiveRef = useRef(false);
   const [ready, setReady] = useState(false);
+  const [loadError, setLoadError] = useState<Error | null>(null);
+  const peerRevision = useSyncExternalStore(
+    sandboxTerminalPeers.subscribe,
+    sandboxTerminalPeers.revision,
+    sandboxTerminalPeers.revision,
+  );
   const [inputReady, setInputReady] = useState(false);
   const [activated, setActivated] = useState(false);
 
@@ -353,12 +380,10 @@ export function SandboxTerminal({
 
     ensureXtermBaseCss();
 
+    setLoadError(null);
     void (async () => {
-      const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
-        import("@xterm/xterm"),
-        import("@xterm/addon-fit"),
-        import("@xterm/addon-web-links"),
-      ]);
+      const { Terminal, FitAddon, WebLinksAddon, loadWebgl } =
+        (await sandboxTerminalPeers.load()) as TerminalPeerBundle;
       if (disposed) return;
       await waitForSize(el);
       if (disposed) return;
@@ -397,13 +422,17 @@ export function SandboxTerminal({
       const failSet = forcedRendererFailures();
       const loaders: RendererLoaders = {
         webgl: async (onLoss) => {
+          if (disposed) throw new Error("Terminal was disposed");
           if (failSet.has("webgl")) throw new Error("forced webgl failure");
-          const { WebglAddon } = await import("@xterm/addon-webgl");
+          if (!loadWebgl) throw new Error("WebGL terminal renderer is not enabled");
+          const { WebglAddon } = await loadWebgl();
+          if (disposed) throw new Error("Terminal was disposed");
           const addon = new WebglAddon() as unknown as {
             dispose: () => void;
             onContextLoss?: (cb: () => void) => void;
           };
           addon.onContextLoss?.(() => {
+            if (disposed) return;
             try {
               addon.dispose();
             } catch {
@@ -416,6 +445,7 @@ export function SandboxTerminal({
         },
       };
       await attachRenderer("webgl", loaders, (tier) => {
+        if (disposed) return;
         rendererRef.current = tier;
         el.setAttribute("data-og-term-renderer", tier);
       });
@@ -448,7 +478,9 @@ export function SandboxTerminal({
         }
         setReady(true);
       });
-    })();
+    })().catch((cause: unknown) => {
+      if (!disposed) setLoadError(cause instanceof Error ? cause : new Error(String(cause)));
+    });
 
     return () => {
       disposed = true;
@@ -461,9 +493,9 @@ export function SandboxTerminal({
       bootActiveRef.current = false;
       setReady(false);
     };
-    // Mount ONCE — see the effects below for the runtime option syncs.
+    // Mount once per peer registration; runtime options sync without a remount.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [peerRevision]);
 
   // Sync stdin/cursor at runtime (NOT a remount) when interactivity flips, so the
   // projection→PTY handoff keeps the single Terminal instance + its scrollback.
@@ -621,7 +653,12 @@ export function SandboxTerminal({
         onPointerDownCapture={handleActivate}
         onFocusCapture={handleActivate}
       >
-        {!ready && (placeholder ?? <TerminalPlaceholder />)}
+        {!ready &&
+          (loadError ? (
+            <p role="alert">{loadError.message}</p>
+          ) : (
+            (placeholder ?? <TerminalPlaceholder />)
+          ))}
         {/* Kept `visibility:hidden` until the first successful fit so the first
             VISIBLE frame is already correctly sized (no 80×24 flash — E4). */}
         <div

package/src/components/session-chrome.tsx

@@ -826,6 +826,7 @@ export function SessionChrome({
         onRefresh={queue.refresh}
         onClearMutationError={queue.clearMutationError}
         onRetryOptimistic={composer?.retryOptimisticMessage}
+        onRestoreOptimistic={composer?.restoreOptimisticMessage}
         onRemoveOptimistic={composer?.removeOptimisticMessage}
         readOnly={!canMutateQueue}
         mutationFor={queue.mutationFor}
@@ -1333,6 +1334,7 @@ function QueuePanel({
   onRefresh,
   onClearMutationError,
   onRetryOptimistic,
+  onRestoreOptimistic,
   onRemoveOptimistic,
   readOnly,
   mutationFor,
@@ -1351,6 +1353,7 @@ function QueuePanel({
   onRefresh: () => Promise<void>;
   onClearMutationError: () => void;
   onRetryOptimistic?: ((clientEventId: string) => void) | undefined;
+  onRestoreOptimistic?: ((clientEventId: string) => void) | undefined;
   onRemoveOptimistic?: ((clientEventId: string) => void) | undefined;
   readOnly: boolean;
   mutationFor: UseTurnQueueResult["mutationFor"];
@@ -1536,17 +1539,24 @@ function QueuePanel({
             <span className="shrink-0 font-og-mono text-[10px] leading-4 text-og-fg-subtle">
               {turns.length + index + 1}
             </span>
-            <CompactQueueItemContent text={message.text} annotations={message.annotations} />
+            <div className="min-w-0 flex-1">
+              <CompactQueueItemContent text={message.text} annotations={message.annotations} />
+              {message.state === "failed" && message.error ? (
+                <p className="break-words text-og-xs">{message.error}</p>
+              ) : null}
+            </div>
             <span className="sr-only">
               {message.state === "failed"
-                ? "Not confirmed"
+                ? message.outcomeUnknown
+                  ? "Not confirmed"
+                  : "Message not sent"
                 : message.state === "sending"
                   ? "Placing in queue"
                   : "Queued"}
             </span>
             {message.state === "failed" ? (
               <div className="flex shrink-0 items-center gap-1 text-[10px]">
-                {onRetryOptimistic ? (
+                {message.retryable !== false && onRetryOptimistic ? (
                   <button
                     type="button"
                     className="rounded-og-sm px-1.5 py-1 font-medium hover:bg-og-surface-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11"
@@ -1555,6 +1565,15 @@ function QueuePanel({
                     Retry
                   </button>
                 ) : null}
+                {message.retryable === false && onRestoreOptimistic ? (
+                  <button
+                    type="button"
+                    className="rounded-og-sm px-1.5 py-1 font-medium hover:bg-og-surface-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11"
+                    onClick={() => onRestoreOptimistic(message.clientEventId)}
+                  >
+                    Edit message
+                  </button>
+                ) : null}
                 {onRemoveOptimistic ? (
                   <button
                     type="button"

package/src/components/session-conversation.tsx

@@ -1,5 +1,15 @@
-import type { SendMessageInput } from "@opengeni/sdk";
-import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import { SESSION_SCOPE_HEADER, type SendMessageInput } from "@opengeni/sdk";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+} from "react";
+import type { SiteSnapshotClient } from "./artifacts/chat-interactive-block";
 import { useOpenGeni, type ClientOverride } from "../session-context";
 import { useWorkspaceModelCatalog } from "../hooks/use-available-models";
 import { ModelPolicyPicker } from "./model-policy-picker";
@@ -20,7 +30,9 @@ import {
   chainLinkResolvers,
   sessionLinkResolver,
   useOpenGeniLinkResolver,
+  viewerLinkResolver,
   type OpenGeniLinkResolver,
+  type OpenGeniViewerTarget,
 } from "./open-geni-links";
 import type { UserMessageDisclosureLabels } from "./user-message-body";
 import { conversationTimeline } from "../conversation-timeline";
@@ -37,8 +49,27 @@ export type SessionConversationProps = ClientOverride & {
    * editable artifacts and Sites stay unavailable until the host resolves them.
    */
   resolveLink?: OpenGeniLinkResolver | undefined;
+  /**
+   * Open agent links to editable artifacts and Sites in a host viewer, for
+   * example `SessionArtifactViewer` mounted beside the conversation. Asked
+   * after `resolveLink`.
+   */
+  onOpenArtifact?: ((target: OpenGeniViewerTarget) => void) | undefined;
+  /**
+   * Inline previews for assistant `opengeni-site` / `opengeni-html` fences.
+   * Defaults to the OpenGeni preview (Site reads need the proxy's
+   * `artifacts` option); `false` shows the fence as code.
+   */
+  renderInteractiveBlock?: MessageTimelineProps["renderInteractiveBlock"] | false;
   /** Product-specific tool-call renderers; defaults to the built-in registry. */
   toolRegistry?: MessageTimelineProps["toolRegistry"];
+  /**
+   * Replace the "usage limit reached" row for an `allowance_exhausted`
+   * refusal, for example to link your own plan or admin page.
+   */
+  renderAllowanceExhausted?: MessageTimelineProps["renderAllowanceExhausted"];
+  /** Replace the words of the default "usage limit reached" row. */
+  allowanceExhaustedLabels?: MessageTimelineProps["allowanceExhaustedLabels"];
   /**
    * File attachments in the composer. Defaults to true; the attach control
    * appears only when the deployment's client config enables file uploads.
@@ -72,7 +103,11 @@ function Conversation({
   sessionId,
   renderMessageText,
   resolveLink,
+  onOpenArtifact,
+  renderInteractiveBlock,
   toolRegistry,
+  renderAllowanceExhausted,
+  allowanceExhaustedLabels,
   attachments: attachmentsRequested = true,
   modelPicker,
   userMessageDisclosureLabels,
@@ -85,8 +120,6 @@ function Conversation({
 }: SessionConversationProps) {
   const scope = { client, workspaceId };
   const context = useOpenGeni(scope);
-  const scopeRef = useRef(context);
-  scopeRef.current = context;
   const config = useClientConfigFlags(context.client);
   const showModelPicker = modelPicker ?? config.modelSelection;
   const catalog = useWorkspaceModelCatalog({
@@ -98,10 +131,6 @@ function Conversation({
   const options = { ...scope, events: feed.events };
   const detail = useSession(sessionId, options);
   const queue = useTurnQueue(sessionId, options);
-  const [queueFocusTarget, setQueueFocusTarget] = useState<{
-    turnId: string;
-    requestId: number;
-  }>();
   const human = useHumanInputRequests(sessionId, options);
   const control = useSessionControl(sessionId, scope);
   const approvals = useMemo(() => projectPendingApprovals(feed.events), [feed.events]);
@@ -109,6 +138,7 @@ function Conversation({
   const uploadsEnabled = attachmentsRequested && config.uploads;
   const status = feed.sessionStatus ?? detail.session?.status;
   const terminal = status === "cancelled";
+  const importedArchive = detail.session?.importedArchive?.readOnly === true;
   const releaseSentFiles = (input: SendMessageInput) =>
     files.removeReadyFiles(
       (input.resources ?? []).flatMap((resource) =>
@@ -129,6 +159,11 @@ function Conversation({
       : {}),
   });
   const region = useRef<HTMLDivElement>(null);
+  const defaultInteractiveBlock = useDefaultInteractiveBlock(
+    context.client,
+    context.workspaceId,
+    sessionId,
+  );
   const inheritedLinks = useOpenGeniLinkResolver();
   const defaultLinks = useMemo(
     () =>
@@ -140,9 +175,22 @@ function Conversation({
       }),
     [context.client, context.workspaceId, sessionId, config.sandboxFiles],
   );
+  const onOpenArtifactRef = useRef(onOpenArtifact);
+  onOpenArtifactRef.current = onOpenArtifact;
+  const opensArtifacts = onOpenArtifact !== undefined;
+  const viewerLinks = useMemo(
+    () =>
+      opensArtifacts
+        ? viewerLinkResolver({
+            workspaceId: context.workspaceId,
+            open: (target) => onOpenArtifactRef.current?.(target),
+          })
+        : null,
+    [context.workspaceId, opensArtifacts],
+  );
   const links = useMemo(
-    () => chainLinkResolvers(resolveLink, inheritedLinks, defaultLinks) ?? undefined,
-    [resolveLink, inheritedLinks, defaultLinks],
+    () => chainLinkResolvers(resolveLink, viewerLinks, inheritedLinks, defaultLinks) ?? undefined,
+    [resolveLink, viewerLinks, inheritedLinks, defaultLinks],
   );
   const error = detail.error ?? feed.error ?? human.error;
   return (
@@ -159,7 +207,14 @@ function Conversation({
       <MessageTimeline
         renderMessageText={renderMessageText}
         resolveLink={links}
+        renderInteractiveBlock={
+          renderInteractiveBlock === false
+            ? undefined
+            : (renderInteractiveBlock ?? defaultInteractiveBlock)
+        }
         userMessageDisclosureLabels={userMessageDisclosureLabels}
+        renderAllowanceExhausted={renderAllowanceExhausted}
+        allowanceExhaustedLabels={allowanceExhaustedLabels}
         className="min-h-0 flex-1"
         {...(toolRegistry ? { toolRegistry } : {})}
         events={feed.events}
@@ -177,104 +232,142 @@ function Conversation({
         }}
         loadingOldest={feed.loadingOldest}
         onJumpToLatest={feed.jumpToLatest}
-        onJumpToLatestQuestion={() =>
-          feed.jumpToLatestQuestion({
-            onQueuedQuestion: async (turn, navigation) => {
-              await queue.refresh();
-              if (
-                !navigation.isCurrent() ||
-                scopeRef.current.client !== context.client ||
-                scopeRef.current.workspaceId !== context.workspaceId
-              )
-                return;
-              setQueueFocusTarget((previous) => ({
-                turnId: turn.id,
-                requestId: (previous?.requestId ?? 0) + 1,
-              }));
-            },
-          })
-        }
-        onAnnotate={composer.addAnnotation}
+        onAnnotate={importedArchive ? undefined : composer.addAnnotation}
       />
-      <div className="min-h-0 max-h-[40%] shrink-0 overflow-y-auto" data-og-conversation-inputs="">
-        {approvals.length > 0 && !terminal ? (
-          <ApprovalSurface
-            className="mx-auto max-w-3xl"
-            approvals={approvals}
-            onApprove={async (approval) => {
-              await control.approve(approval.id);
-            }}
-            onReject={async (approval) => {
-              await control.reject(approval.id);
-            }}
-            responding={control.responding}
-            error={control.error}
-          />
-        ) : null}
-        <HumanInputSurface
-          loadSkillReview={loadSkillReview}
-          requests={human.requests}
-          onSubmit={async (id, response) => {
-            await human.respond(id, response);
-          }}
-          respondingRequestId={human.respondingRequestId}
-          error={human.mutationError?.message}
-          autoFocus={false}
-        />
-        {terminal ? (
-          <SessionChrome
-            queue={queue}
-            queueFocusTarget={queueFocusTarget}
-            sessionStatus={status}
-            readOnly
-          />
-        ) : (
-          <SessionChrome
-            queue={queue}
-            queueFocusTarget={queueFocusTarget}
-            composer={composer}
-            sessionStatus={status}
-            onComposerFocus={() =>
-              region.current?.querySelector<HTMLTextAreaElement>("textarea")?.focus()
-            }
-          />
-        )}
-      </div>
-      <div className="shrink-0" data-og-conversation-composer="">
-        <ChatComposer
-          {...composerProps}
-          composer={composer}
-          attachments={uploadsEnabled ? files : undefined}
-          disabled={terminal || composerProps?.disabled}
-          controlsStart={
-            composerProps?.controlsStart ??
-            (showModelPicker && composer.policy && (
-              <ModelPolicyPicker
-                rows={catalog.rows}
-                model={composer.policy.model}
-                effort={composer.policy.reasoningEffort}
-                latencyMode={composer.policy.latencyMode}
-                loading={catalog.loading}
-                error={catalog.error?.message}
-                disabled={terminal}
-                sessionKey={sessionId}
-                onModelChange={(model) => composer.setModel?.(model)}
-                onEffortChange={(effort) => composer.setReasoningEffort?.(effort)}
-                onLatencyModeChange={(mode) => composer.setLatencyMode?.(mode)}
+      {importedArchive ? (
+        <p className="shrink-0 px-4 py-2 text-center text-sm text-og-muted" role="status">
+          Archived conversation · Read only
+        </p>
+      ) : (
+        <>
+          <div
+            className="min-h-0 max-h-[40%] shrink-0 overflow-y-auto"
+            data-og-conversation-inputs=""
+          >
+            {approvals.length > 0 && !terminal ? (
+              <ApprovalSurface
+                className="mx-auto max-w-3xl"
+                approvals={approvals}
+                onApprove={async (approval) => {
+                  await control.approve(approval.id);
+                }}
+                onReject={async (approval) => {
+                  await control.reject(approval.id);
+                }}
+                responding={control.responding}
+                error={control.error}
+              />
+            ) : null}
+            <HumanInputSurface
+              loadSkillReview={loadSkillReview}
+              requests={human.requests}
+              onSubmit={async (id, response) => {
+                await human.respond(id, response);
+              }}
+              respondingRequestId={human.respondingRequestId}
+              error={human.mutationError?.message}
+              autoFocus={false}
+            />
+            {terminal ? (
+              <SessionChrome queue={queue} sessionStatus={status} readOnly />
+            ) : (
+              <SessionChrome
+                queue={queue}
+                composer={composer}
+                sessionStatus={status}
+                onComposerFocus={() =>
+                  region.current?.querySelector<HTMLTextAreaElement>("textarea")?.focus()
+                }
               />
-            ))
-          }
-          responsiveBasis={composerProps?.responsiveBasis ?? "container"}
-          effectiveControl={
-            composer.effectiveControl ?? queue.effectiveControl ?? detail.session?.effectiveControl
-          }
-          queuedAheadCount={queue.queue.length}
-        />
-      </div>
+            )}
+          </div>
+          <div className="shrink-0" data-og-conversation-composer="">
+            <ChatComposer
+              {...composerProps}
+              composer={composer}
+              attachments={uploadsEnabled ? files : undefined}
+              disabled={terminal || composerProps?.disabled}
+              controlsStart={
+                composerProps?.controlsStart ??
+                (showModelPicker && composer.policy && (
+                  <ModelPolicyPicker
+                    rows={catalog.rows}
+                    model={composer.policy.model}
+                    effort={composer.policy.reasoningEffort}
+                    latencyMode={composer.policy.latencyMode}
+                    loading={catalog.loading}
+                    error={catalog.error?.message}
+                    disabled={terminal}
+                    sessionKey={sessionId}
+                    onModelChange={(model) => composer.setModel?.(model)}
+                    onEffortChange={(effort) => composer.setReasoningEffort?.(effort)}
+                    onLatencyModeChange={(mode) => composer.setLatencyMode?.(mode)}
+                  />
+                ))
+              }
+              responsiveBasis={composerProps?.responsiveBasis ?? "container"}
+              effectiveControl={
+                composer.effectiveControl ??
+                queue.effectiveControl ??
+                detail.session?.effectiveControl
+              }
+              queuedAheadCount={queue.queue.length}
+            />
+          </div>
+        </>
+      )}
     </div>
   );
 }
 
+const LazyChatInteractiveBlock = lazy(() =>
+  import("./artifacts/chat-interactive-block").then((module) => ({
+    default: module.ChatInteractiveBlock,
+  })),
+);
+
+type ScopableClient = SiteSnapshotClient & {
+  withHeaders?: (headers: Readonly<Record<string, string>>) => SiteSnapshotClient;
+};
+
+/** Inline Site/HTML preview reading through this conversation's session scope. */
+function useDefaultInteractiveBlock(
+  client: unknown,
+  workspaceId: string,
+  sessionId: string,
+): NonNullable<MessageTimelineProps["renderInteractiveBlock"]> {
+  // Scope lazily: only a rendered preview reads, and some clients (a Site's
+  // own client) cannot add headers.
+  const scoped = useMemo((): SiteSnapshotClient => {
+    let resolved: SiteSnapshotClient | null = null;
+    const get = () => {
+      const candidate = client as ScopableClient;
+      resolved ??=
+        typeof candidate.withHeaders === "function"
+          ? candidate.withHeaders({ [SESSION_SCOPE_HEADER]: sessionId })
+          : candidate;
+      return resolved;
+    };
+    return {
+      getWorkspaceArtifact: (...args) => get().getWorkspaceArtifact(...args),
+      getWorkspaceArtifactHtml: (...args) => get().getWorkspaceArtifactHtml(...args),
+      getWorkspaceArtifactContent: (...args) => {
+        const target = get();
+        if (!target.getWorkspaceArtifactContent) throw new Error("Site version unavailable");
+        return target.getWorkspaceArtifactContent(...args);
+      },
+    };
+  }, [client, sessionId]);
+  return useCallback(
+    (block) => (
+      <Suspense fallback={<span role="status">Loading preview…</span>}>
+        <LazyChatInteractiveBlock workspaceId={workspaceId} client={scoped} {...block} />
+      </Suspense>
+    ),
+    [scoped, workspaceId],
+  );
+}
+
 /** Deployment/proxy flags from the client config: uploads, and whether model choice is open. */
 function useClientConfigFlags(client: {
   getClientConfig: () => Promise<{

package/src/components/timeline-annotation-selection.tsx

@@ -163,6 +163,7 @@ export function TimelineAnnotationSelection({
 }) {
   const [candidate, setCandidate] = useState<SelectionCandidate | null>(null);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const initialSelectionObservedRef = useRef(false);
   const pointerOriginRef = useRef<"unset" | "inside" | "outside">("unset");
   const portalStyle = usePortalTokenStyle(rootRef.current);
 
@@ -175,6 +176,12 @@ export function TimelineAnnotationSelection({
     const update = (keyboard: boolean) => {
       setCandidate(buildCandidate(root, sources, keyboard));
     };
+    // A user may finish selecting text before this lazy component arrives.
+    // Reconcile once; later prop changes must not revive dismissed selections.
+    if (!initialSelectionObservedRef.current) {
+      initialSelectionObservedRef.current = true;
+      update(false);
+    }
     const onRootPointerUp = (event: PointerEvent) => {
       if (event.target instanceof Node && buttonRef.current?.contains(event.target)) return;
       // Tests may fire only pointerup on the source. A real click that started