@opengeni/react 7.1.0 → 7.1.2-canary.36079201993001

package/src/components/markdown.tsx

@@ -53,6 +53,7 @@ const InteractiveContext = createContext<{
   streaming?: boolean | undefined;
   render?: (block: MarkdownInteractiveBlock) => ReactNode;
   renderImage?: (image: { src: string; alt: string }) => ReactNode;
+  suppressImages?: boolean;
 }>({ source: "" });
 
 export type MarkdownProps = {
@@ -61,6 +62,8 @@ export type MarkdownProps = {
   /** Reveals a bounded source excerpt; closing Find retains it until explicit restore. */
   searchTarget?: TimelineSearchTarget | null | undefined;
   renderImage?: ((image: { src: string; alt: string }) => ReactNode) | undefined;
+  /** Show alt text without loading image URLs (e.g. in search previews). */
+  suppressImages?: boolean | undefined;
   /** Host opt-in for assistant-authored interactive fences. */
   renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
   children: string;
@@ -399,7 +402,9 @@ export function retainedImageId(src: string): string | null {
   );
 }
 function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
-  const { renderImage } = useContext(InteractiveContext);
+  const { renderImage, suppressImages } = useContext(InteractiveContext);
+  if (suppressImages)
+    return <span data-og-image-placeholder="">{alt || "Image"} (preview unavailable)</span>;
   if (!src) return <span>{alt ?? "Image unavailable"}</span>;
   if (retainedImageId(src))
     return renderImage ? (
@@ -592,6 +597,7 @@ function MarkdownImpl({
   onSandboxFile,
   renderInteractiveBlock,
   renderImage,
+  suppressImages,
 }: MarkdownProps) {
   // Tip-ink engine for THIS body: created on the first streaming render, kept
   // through a short linger after the stream ends (so the last age window can
@@ -692,8 +698,9 @@ function MarkdownImpl({
       streaming,
       ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
       ...(renderImage ? { renderImage } : {}),
+      ...(suppressImages ? { suppressImages } : {}),
     }),
-    [children, streaming, renderInteractiveBlock, renderImage],
+    [children, streaming, renderInteractiveBlock, renderImage, suppressImages],
   );
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so

package/src/components/sandbox-workspace.tsx

@@ -843,6 +843,7 @@ export function useSandboxWorkspaceTabs(
               // start BrowserViewer—the lazy panel is still unmounted until the
               // user/agent first visits it.
               enabled={workspaceVisible}
+              active={resolvedActiveTab === WORKBENCH_TAB_BROWSER}
               onNotify={onNotify}
               initialBrowserSessionId={initialBrowserSessionId}
               onBrowserSessionIdChange={onBrowserSessionIdChange}

package/src/components/session-capability-frame.tsx

@@ -12,7 +12,11 @@ export type SessionCapabilityFrameProps = {
   skill: boolean;
   expanded: boolean;
   complete: boolean;
+  /** Completion copy must reflect the provider's actual scope of access. */
+  completeLabel?: string;
   actionLabel: string;
+  /** Direct navigation actions should not announce a dialog on the card. */
+  opensDialog?: boolean;
   note: string;
   onOpen(): void;
   onClose(): void;
@@ -48,7 +52,9 @@ export function SessionCapabilityFrame({
   skill,
   expanded,
   complete,
+  completeLabel,
   actionLabel,
+  opensDialog = true,
   note,
   onOpen,
   onClose,
@@ -90,7 +96,8 @@ export function SessionCapabilityFrame({
         </div>
         {complete ? (
           <p role="status" className="og-session-capability-copy">
-            {skill ? "Installed · Workspace" : "Connected · Available in this conversation"}
+            {completeLabel ??
+              (skill ? "Installed · Workspace" : "Connected · Available in this conversation")}
           </p>
         ) : (
           <>
@@ -104,8 +111,9 @@ export function SessionCapabilityFrame({
                 ref={buttonRef}
                 type="button"
                 onClick={onOpen}
-                aria-haspopup="dialog"
-                aria-expanded={expanded}
+                disabled={busy}
+                aria-haspopup={opensDialog ? "dialog" : undefined}
+                aria-expanded={opensDialog ? expanded : undefined}
               >
                 {actionLabel}
               </button>

package/src/components/session-mcp-capability-card.tsx

@@ -1,5 +1,6 @@
 import {
   authorizeConnectAttempt,
+  ConnectPopupClosedError,
   ConnectController,
   createBrowserConnectNavigation,
   reserveBrowserConnectNavigation,
@@ -77,25 +78,32 @@ function ScopedCard({
   const [complete, setComplete] = useState(false);
   const [connected, setConnected] = useState(false);
   const [waiting, setWaiting] = useState(false);
+  const [reconciling, setReconciling] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [retryFresh, setRetryFresh] = useState(false);
   const [ownership, setOwnership] = useState<ConnectOwnership>("workspace");
   const lifetime = useRef<AbortController | null>(null);
-  const operation = useRef(false);
+  const authorization = useRef<AbortController | null>(null);
+  const operation = useRef<AbortController | null>(null);
+  const reservedPopup = useRef<(() => void) | null>(null);
   const startKey = useRef(crypto.randomUUID());
   const advanceKey = useRef(crypto.randomUUID());
+  const startInput = useRef<string | null>(null);
   const storageKey = sessionId
     ? `opengeni:session-connect:${workspaceId}:${sessionId}:${capabilityId}`
     : `opengeni:workspace-connect:${workspaceId}:${capabilityId}`;
   const current = () => !!lifetime.current && !lifetime.current.signal.aborted;
 
-  async function load() {
+  async function load(active: () => boolean = current) {
     const invocation = lifetime.current;
     const [catalog, session] = await Promise.all([
       client.listCapabilities(workspaceId),
       sessionId ? client.getSession(workspaceId, sessionId) : Promise.resolve(null),
     ]);
-    if (!invocation || invocation.signal.aborted || lifetime.current !== invocation) return null;
+    if (!invocation || invocation.signal.aborted || lifetime.current !== invocation || !active())
+      return null;
     const resolved = catalog.items.find((entry) => entry.id === capabilityId);
     if (!resolved || resolved.kind !== "mcp" || resolved.authKind !== "oauth2")
       throw new Error(
@@ -112,11 +120,11 @@ function ScopedCard({
         resolved.connectionRef.subjectScope === "subject"
           ? await client.listOwnConnectionAccounts(workspaceId)
           : await client.listConnections(workspaceId);
-      if (invocation.signal.aborted || lifetime.current !== invocation) return null;
+      if (invocation.signal.aborted || lifetime.current !== invocation || !active()) return null;
       const matches = matchingActiveMcpConnections(resolved, connections);
       accountReady = matches.length === 1;
     }
-    if (invocation.signal.aborted || lifetime.current !== invocation) return null;
+    if (invocation.signal.aborted || lifetime.current !== invocation || !active()) return null;
     const selected =
       session?.toolPolicy.mode === "workspace_default"
         ? session.effectiveToolPolicy?.selectedIds
@@ -185,23 +193,32 @@ function ScopedCard({
     };
   }, [client, item?.logoAssetPath]);
 
-  async function run(action: () => Promise<void>) {
+  async function run(action: (active: () => boolean) => Promise<void>) {
     if (operation.current || !current()) return;
-    operation.current = true;
+    const pending = new AbortController();
+    operation.current = pending;
+    const active = () => current() && operation.current === pending && !pending.signal.aborted;
     setBusy(true);
     setError(null);
+    setNotice(null);
+    setRetryFresh(false);
     try {
-      await action();
+      await action(active);
     } catch (failure) {
-      if (current())
-        setError(
-          failure instanceof Error
-            ? failure.message
-            : "Connection setup could not finish. Try again.",
-        );
+      if (active()) {
+        if (failure instanceof ConnectPopupClosedError) setNotice(failure.message);
+        else
+          setError(
+            failure instanceof Error
+              ? failure.message
+              : "Connection setup could not finish. Try again.",
+          );
+      }
     } finally {
-      operation.current = false;
-      if (current()) setBusy(false);
+      if (operation.current === pending) {
+        operation.current = null;
+        if (current()) setBusy(false);
+      }
     }
   }
 
@@ -215,15 +232,15 @@ function ScopedCard({
     }
   }
 
-  async function reconcile(attempt: ConnectAttempt) {
-    if (!current()) return;
+  async function reconcile(attempt: ConnectAttempt, active: () => boolean = current) {
+    if (!active()) return;
     if (attempt.state !== "complete" || !attempt.account || !attempt.credentialsCommitted) return;
-    const resolved = await load();
-    if (!resolved || !current()) return;
+    const resolved = await load(active);
+    if (!resolved || !active()) return;
     const connection = (await client.listConnections(workspaceId)).find(
       (entry) => entry.id === attempt.account!.id,
     );
-    if (!current()) return;
+    if (!active()) return;
     if (
       !connection ||
       connection.status !== "active" ||
@@ -255,11 +272,12 @@ function ScopedCard({
               connectionId: connection.id,
             },
     });
-    if (!current()) return;
-    const enabled = await load();
-    if (enabled && current()) {
-      await finishConnection(enabled);
+    if (!active()) return;
+    const enabled = await load(active);
+    if (enabled && active()) {
+      await finishConnection(enabled, active);
     }
+    if (!active()) return;
     try {
       sessionStorage.removeItem(storageKey);
     } catch {
@@ -269,14 +287,14 @@ function ScopedCard({
 
   async function open() {
     setExpanded(true);
-    await run(async () => {
-      await load();
-      if (!current()) return;
-      await recoverSavedAttempt();
+    await run(async (active) => {
+      await load(active);
+      if (!active()) return;
+      await recoverSavedAttempt(active);
     });
   }
 
-  async function recoverSavedAttempt() {
+  async function recoverSavedAttempt(active: () => boolean = current) {
     let saved: string | null = null;
     try {
       saved = sessionStorage.getItem(storageKey);
@@ -285,20 +303,31 @@ function ScopedCard({
     }
     if (saved) {
       const attempt = await controller.recover(saved);
-      await reconcile(attempt);
+      if (!active()) return;
+      if (["failed", "expired", "cancelled"].includes(attempt.state)) setRetryFresh(true);
+      if (attempt.state === "complete") setReconciling(true);
+      try {
+        await reconcile(attempt, active);
+      } finally {
+        if (active()) setReconciling(false);
+      }
     }
   }
 
-  async function begin() {
-    await run(async () => {
-      if (view.attempt && ["failed", "expired", "cancelled"].includes(view.attempt.state)) {
+  async function begin(fresh = false) {
+    await run(async (active) => {
+      if (
+        fresh ||
+        (view.attempt && ["failed", "expired", "cancelled"].includes(view.attempt.state))
+      ) {
         startKey.current = crypto.randomUUID();
         advanceKey.current = crypto.randomUUID();
       }
       const reserved = reserveBrowserConnectNavigation(window);
+      reservedPopup.current = reserved.close;
       try {
-        const resolved = await load();
-        if (!resolved || !current()) return;
+        const resolved = await load(active);
+        if (!resolved || !active()) return;
         if (
           resolved.connectionRef &&
           ownership !==
@@ -322,13 +351,22 @@ function ScopedCard({
               entry.kind === "oauth2" &&
               entry.metadata.mcpUrl === mcpUrl,
           );
-          if (!current()) return;
+          if (!active()) return;
           if (connections.length > 1)
             throw new Error(
               "More than one personal account matches. Choose the account in connection settings before reconnecting.",
             );
           reconnectAccountId = connections[0]?.id;
         }
+        // A closed request can still have reached the server. Keep its key for
+        // an exact replay, but never reuse it when ownership or another input
+        // changes while the user reopens setup.
+        const input = JSON.stringify({ ownership, returnUrl, reconnectAccountId, mcpUrl });
+        if (startInput.current !== null && startInput.current !== input) {
+          startKey.current = crypto.randomUUID();
+          advanceKey.current = crypto.randomUUID();
+        }
+        startInput.current = input;
         let attempt = await controller.begin({
           providerId: "mcp-oauth",
           ownership,
@@ -336,49 +374,79 @@ function ScopedCard({
           idempotencyKey: startKey.current,
           ...(reconnectAccountId ? { reconnectAccountId } : {}),
         });
-        if (!current()) return;
+        if (!active()) return;
         remember(attempt.id);
         if (attempt.state === "credential_input")
           attempt = await controller.advance(
             { type: "credentials", values: { mcpUrl } },
             advanceKey.current,
           );
+        if (!active()) return;
         if (attempt.nextAction.type === "authorize")
-          await performAuthorization(attempt, reserved.navigation);
-        else await reconcile(attempt);
+          await performAuthorization(attempt, reserved.navigation, active);
+        else await reconcile(attempt, active);
       } finally {
+        if (reservedPopup.current === reserved.close) reservedPopup.current = null;
         reserved.close();
       }
     });
   }
 
-  async function performAuthorization(attempt: ConnectAttempt, navigation: ConnectNavigation) {
+  async function performAuthorization(
+    attempt: ConnectAttempt,
+    navigation: ConnectNavigation,
+    active: () => boolean,
+  ) {
+    if (!active()) return;
+    const pending = new AbortController();
+    authorization.current = pending;
+    const abortOnUnmount = () => pending.abort(lifetime.current?.signal.reason);
+    lifetime.current!.signal.addEventListener("abort", abortOnUnmount, { once: true });
     setWaiting(true);
     try {
       const result = await authorizeConnectAttempt(controller.transport, attempt, navigation, {
         mode: "popup",
-        signal: lifetime.current!.signal,
+        signal: pending.signal,
       });
-      if (!current() || !result) return;
-      await controller.refresh();
-      await reconcile(result);
-      if (result.state !== "complete")
+      if (!active() || !result) return;
+      setWaiting(false);
+      setReconciling(true);
+      await reconcile(result, active);
+      if (!active()) return;
+      if (result.state === "cancelled") {
+        setNotice("Sign-in was cancelled. You can try connecting again.");
+        setRetryFresh(true);
+        return;
+      }
+      if (result.state !== "complete") {
+        if (["failed", "expired"].includes(result.state)) setRetryFresh(true);
         throw new Error("Sign-in did not finish. You can try connecting again.");
+      }
     } finally {
-      if (current()) setWaiting(false);
+      lifetime.current?.signal.removeEventListener("abort", abortOnUnmount);
+      if (authorization.current === pending) authorization.current = null;
+      if (active()) {
+        setReconciling(false);
+        setWaiting(false);
+      }
     }
   }
 
   function authorize(attempt: ConnectAttempt) {
     // run invokes action synchronously, retaining the browser click gesture.
-    return run(() => performAuthorization(attempt, createBrowserConnectNavigation(window)));
+    return run((active) =>
+      performAuthorization(attempt, createBrowserConnectNavigation(window), active),
+    );
   }
 
-  async function finishConnection(capability: CapabilityCatalogItem) {
+  async function finishConnection(
+    capability: CapabilityCatalogItem,
+    active: () => boolean = current,
+  ) {
     if (!sessionId) {
       // Connection management does not select session tools.
       await onConfigured?.();
-      if (!current()) return;
+      if (!active()) return;
       setComplete(true);
       setExpanded(false);
       onClose?.();
@@ -388,31 +456,47 @@ function ScopedCard({
       const selected = (await client.listConnections(workspaceId)).find(
         (entry) => entry.id === capability.connectionRef?.connectionId,
       );
-      if (!current()) return;
+      if (!active()) return;
       if (!selected || selected.status !== "active")
         throw new Error("This account needs reconnection before it can be used here.");
     }
     if (capability.connectionRef?.subjectScope === "subject") {
       const accounts = await client.listOwnConnectionAccounts(workspaceId);
-      if (!current()) return;
+      if (!active()) return;
       if (matchingActiveMcpConnections(capability, accounts).length === 0)
         throw new Error("Your account needs reconnection before it can be used here.");
     }
-    if (!current()) return;
-    await attachSessionCapability(client, workspaceId, sessionId, capability, current);
-    if (!current()) return;
+    if (!active()) return;
+    await attachSessionCapability(client, workspaceId, sessionId, capability, active);
+    if (!active()) return;
     await onConfigured?.();
-    if (!current()) return;
+    if (!active()) return;
     setComplete(true);
     setExpanded(false);
   }
 
   async function useHere() {
-    await run(async () => {
-      if (item) await finishConnection(item);
+    await run(async (active) => {
+      if (item) await finishConnection(item, active);
     });
   }
 
+  function close() {
+    const pending = operation.current;
+    if (pending) {
+      operation.current = null;
+      pending.abort(new ConnectPopupClosedError());
+      authorization.current?.abort(new ConnectPopupClosedError());
+      authorization.current = null;
+      reservedPopup.current?.();
+      setBusy(false);
+      setWaiting(false);
+      setReconciling(false);
+    }
+    setExpanded(false);
+    onClose?.();
+  }
+
   return (
     <SessionCapabilityFrame
       name={item?.name ?? name}
@@ -436,15 +520,16 @@ function ScopedCard({
           : "Review access before signing in. You'll return here after authorization."
       }
       onOpen={() => void open()}
-      onClose={() => {
-        setExpanded(false);
-        onClose?.();
-      }}
-      busy={busy || view.busy}
+      onClose={close}
       dialogOnly={dialogOnly}
     >
       <div className="og-session-capability-setup">
         {error ? <p role="alert">{error}</p> : null}
+        {notice ? (
+          <p role="status" className="og-session-capability-notice">
+            {notice}
+          </p>
+        ) : null}
         {!item ? (
           <>
             <p role="status">
@@ -458,11 +543,24 @@ function ScopedCard({
           <>
             <p>{item.description || rationale}</p>
             {busy ? (
-              <p role="status" className="og-session-capability-progress">
-                {waiting
-                  ? `Finish signing in with ${item.name} in the opened window. This will close automatically when you’re connected.`
-                  : "Preparing your connection…"}
-              </p>
+              <>
+                <p role="status" className="og-session-capability-progress">
+                  {waiting
+                    ? `Finish signing in with ${item.name} in the opened window. This will close automatically when you’re connected.`
+                    : reconciling
+                      ? "Finishing your connection…"
+                      : "Preparing your connection…"}
+                </p>
+                {waiting ? (
+                  <button
+                    type="button"
+                    className="og-session-capability-stop"
+                    onClick={() => authorization.current?.abort(new ConnectPopupClosedError())}
+                  >
+                    Stop waiting
+                  </button>
+                ) : null}
+              </>
             ) : !connected ? (
               <>
                 {!item.connectionRef ? (
@@ -498,11 +596,17 @@ function ScopedCard({
                 <button
                   className="og-session-capability-primary"
                   onClick={() => {
-                    if (view.attempt?.nextAction.type === "authorize") void authorize(view.attempt);
+                    if (notice || retryFresh) void begin(true);
+                    else if (
+                      view.attempt?.nextAction.type === "authorize" &&
+                      view.attempt.ownership === ownership
+                    )
+                      void authorize(view.attempt);
                     else void begin();
                   }}
                 >
-                  {error && view.attempt?.nextAction.type === "authorize"
+                  {retryFresh ||
+                  ((error || notice) && view.attempt?.nextAction.type === "authorize")
                     ? "Try signing in again"
                     : `Continue to ${item.name}`}
                 </button>

package/src/hooks/use-browser-frame-stream.ts

@@ -19,6 +19,7 @@ import {
   STREAM_KIND_BROWSER,
   STREAM_ROLE_CLIENT,
 } from "../lib/relay-wire";
+import { usePageLiveActivity } from "./internal";
 
 export type BrowserFrameConnectionState =
   | "idle"
@@ -73,7 +74,8 @@ export function useBrowserFrameStream(
   options: UseBrowserFrameStreamOptions,
 ): UseBrowserFrameStreamResult {
   const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const enabled = (options.enabled ?? true) && pageLive;
   const [nonce, setNonce] = useState(0);
   const [result, setResult] = useState<Omit<UseBrowserFrameStreamResult, "reconnect">>({
     state: "idle",