@opengeni/react 6.0.0-canary.1 → 6.1.0-canary.1

package/dist/{model-policy-picker-menu-3R336DP2.js → model-policy-picker-menu-RVOQ4ZZG.js}

@@ -1,13 +1,13 @@
 import {
   ModelPolicyPickerMenu,
   ModelPolicyPickerPopover
-} from "./chunk-UMECRJRV.js";
-import "./chunk-R4KRSFGA.js";
+} from "./chunk-HJ5VJ4JB.js";
+import "./chunk-IP4BUBKH.js";
 import "./chunk-VZTQ73XT.js";
-import "./chunk-VRBL3F5E.js";
+import "./chunk-5GAL23FF.js";
 import "./chunk-22KP6LR5.js";
 export {
   ModelPolicyPickerMenu,
   ModelPolicyPickerPopover
 };
-//# sourceMappingURL=model-policy-picker-menu-3R336DP2.js.map
+//# sourceMappingURL=model-policy-picker-menu-RVOQ4ZZG.js.map

package/dist/model-policy.d.ts

@@ -33,12 +33,16 @@ export declare function projectPickerRows(models: WorkspaceModelCatalogModel[]):
 export declare function projectClientModelRows(models: ClientModel[]): PickerModelRow<ClientModel>[];
 export declare function sortPickerRows<TCatalog extends ClientModel>(rows: PickerModelRow<TCatalog>[]): PickerModelRow<TCatalog>[];
 export declare function findPickerRow<TCatalog extends ClientModel>(rows: PickerModelRow<TCatalog>[], modelId: string): PickerModelRow<TCatalog> | null;
-export declare function groupPickerRowsByBillingClass(rows: PickerModelRow[]): Array<{
+export declare function groupPickerRowsByBillingClass(rows: PickerModelRow[], options?: {
+    codexOnly?: boolean;
+}): Array<{
     billingClass: PickerBillingClass;
     label: string;
     rows: PickerModelRow[];
 }>;
-export declare function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(rows: PickerModelRow<TCatalog>[]): Array<{
+export declare function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(rows: PickerModelRow<TCatalog>[], options?: {
+    codexOnly?: boolean;
+}): Array<{
     billingClass: PickerBillingClass;
     label: string;
     rows: PickerModelRow<TCatalog>[];

package/dist/model-policy.js

@@ -16,7 +16,7 @@ import {
   projectPickerRows,
   runnableLatencyModesForModel,
   sortPickerRows
-} from "./chunk-VRBL3F5E.js";
+} from "./chunk-5GAL23FF.js";
 export {
   advancedSourceSummary,
   availabilityReasonLabel,

package/dist/plugin-discovery.d.ts

@@ -9,6 +9,10 @@ export type PluginDiscoveryProps = {
     };
     workspaceId: string;
     query: string;
+    /** Discovery identities already installed in the current workspace. */
+    installedIds?: ReadonlySet<string>;
+    resultLimit?: number;
+    onShowMore?: () => void;
     onOpen: (item: PluginDiscoveryItem) => void;
 };
 export declare function PluginDiscovery(props: PluginDiscoveryProps): import("react").JSX.Element;

package/dist/realtime.js

@@ -3,7 +3,7 @@ import {
   PickerAnimatedPage,
   PickerBackHeader,
   PickerNavRow
-} from "./chunk-R4KRSFGA.js";
+} from "./chunk-IP4BUBKH.js";
 import {
   usePortalTokenSource,
   usePortalTokenStyle
@@ -11,7 +11,7 @@ import {
 import {
   useEmbeddedRealtimeSession
 } from "./chunk-NEXLLTP4.js";
-import "./chunk-VRBL3F5E.js";
+import "./chunk-5GAL23FF.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";

package/dist/session-ui.js

@@ -18,27 +18,27 @@ import {
   setStartupDetails,
   useStartupDetails,
   userMessageLikelyNeedsDisclosure
-} from "./chunk-CC7AVRIJ.js";
+} from "./chunk-KZ4QDBGM.js";
 import "./chunk-YBM6CQRU.js";
 import "./chunk-5M6VTFJ5.js";
 import "./chunk-ZYRGEKWS.js";
 import "./chunk-NOSYBS2D.js";
 import "./chunk-PAJU5KKL.js";
-import "./chunk-IHQII5WO.js";
+import "./chunk-G5JFM6ZE.js";
 import "./chunk-JVYQRRC4.js";
-import "./chunk-45XEUVTK.js";
+import "./chunk-UWVY3OXF.js";
 import "./chunk-HQV2I5HV.js";
 import "./chunk-WYWRYUNQ.js";
-import "./chunk-R4KRSFGA.js";
+import "./chunk-IP4BUBKH.js";
 import "./chunk-VZTQ73XT.js";
 import {
   createOlderHistoryLoadReceipt
-} from "./chunk-PZ27MCZP.js";
+} from "./chunk-L5VJYZIW.js";
 import "./chunk-NYESIADM.js";
 import "./chunk-PLYRL5ER.js";
 import "./chunk-KZ73RL76.js";
 import "./chunk-NEXLLTP4.js";
-import "./chunk-VRBL3F5E.js";
+import "./chunk-5GAL23FF.js";
 import "./chunk-22KP6LR5.js";
 export {
   ApprovalSurface,

package/dist/session.js

@@ -28,7 +28,7 @@ import {
   useSession,
   useSessionEvents,
   useTurnQueue
-} from "./chunk-PZ27MCZP.js";
+} from "./chunk-L5VJYZIW.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,

package/dist/skill-discovery.d.ts

@@ -1,3 +1,4 @@
+import { type CapabilityCatalogStatus } from "./capability-catalog-row.js";
 export type SkillDiscoveryItem = {
     id: string;
     name: string;
@@ -23,6 +24,16 @@ export type SkillDiscoveryProps = {
     query: string;
     onImport: (url: string) => void;
     canManage: boolean;
+    localSkills?: readonly {
+        id: string;
+        name: string;
+        description?: string;
+        status?: CapabilityCatalogStatus;
+        statusLabel?: string;
+        onOpen: () => void;
+    }[];
+    resultLimit?: number;
+    onShowMore?: () => void;
     onSearch?: (() => void) | undefined;
 };
 /** Host-owned query and import flow; browse presentation is reusable independently. */

package/dist/timeline/projection.d.ts

@@ -1,7 +1,9 @@
 import { type SessionEvent, type SessionStatus } from "@opengeni/sdk";
 import type { TimelineGroup, TimelineItem } from "./types.js";
 export { toolDisplayName, mcpToolLeaf, toolMatchesLeaf } from "./tool-display-name.js";
-export declare function buildTimeline(events: SessionEvent[]): TimelineItem[];
+export declare function buildTimeline(events: SessionEvent[], options?: {
+    partialStart?: boolean;
+}): TimelineItem[];
 /**
  * Codex subscription web search can return private citation handles without
  * the URL annotation table that would make them resolvable. Keep the canonical

package/dist/timeline/turn-summary.d.ts

@@ -65,8 +65,8 @@ export type TurnSummaryProps = {
     items: ActivityItem[];
     /**
      * The settled verdict — or absent for a completed CLUSTER of a still-running
-     * turn, which folds neutrally: no verdict glyph (the turn has none yet), a
-     * quiet pulse dot in its place so alignment and the running feel both hold.
+     * turn, which folds neutrally. Only unfinished activity inside this summary
+     * animates; the parent turn may still be composing a response elsewhere.
      */
     outcome?: TurnOutcome | undefined;
     /** A short failure reason shown inline on a failed chip (never hidden). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "6.0.0-canary.1",
+  "version": "6.1.0-canary.1",
   "description": "React hooks and styled components for OpenGeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -133,8 +133,8 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "^0.2.0-canary.10",
-    "@opengeni/sdk": "^6.0.0-canary.1",
+    "@opengeni/connect": "^0.2.0-canary.12",
+    "@opengeni/sdk": "^6.1.0-canary.1",
     "clsx": "^2.1.1",
     "dequal": "2.0.3",
     "lucide-react": "^1.8.0",

package/src/capability-catalog-row.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { AlertTriangleIcon, CheckIcon, Loader2Icon, PlusIcon } from "lucide-react";
+
+export type CapabilityCatalogStatus =
+  | "available"
+  | "added"
+  | "attention"
+  | "unavailable"
+  | "loading";
+
+export type CapabilityCatalogRowProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "children" | "onClick" | "name"
+> & {
+  name: string;
+  description?: string | undefined;
+  icon?: ReactNode;
+  status?: CapabilityCatalogStatus;
+  statusLabel?: string | undefined;
+  /** Preserve opaque host status text when adopting this row without typed health. */
+  showStatusLabel?: boolean;
+  onOpen: () => void;
+};
+
+const labels: Record<CapabilityCatalogStatus, string> = {
+  available: "Available to add",
+  added: "Added",
+  attention: "Needs attention",
+  unavailable: "Unavailable",
+  loading: "Working",
+};
+
+/** A display-only state. The entire catalog row is the action, never this glyph. */
+export function CapabilityCatalogIndicator({
+  status = "available",
+  label,
+  showLabel = false,
+}: {
+  status?: CapabilityCatalogStatus;
+  label?: string | undefined;
+  showLabel?: boolean;
+}) {
+  const Icon =
+    status === "added"
+      ? CheckIcon
+      : status === "attention" || status === "unavailable"
+        ? AlertTriangleIcon
+        : status === "loading"
+          ? Loader2Icon
+          : PlusIcon;
+  return (
+    <span className="og-capability-catalog-indicator" data-status={status}>
+      <Icon aria-hidden="true" />
+      <span
+        className={
+          showLabel || status === "attention" || status === "unavailable"
+            ? "og-capability-catalog-notice"
+            : "og-capability-catalog-sr-only"
+        }
+      >
+        {label ?? labels[status]}
+      </span>
+    </span>
+  );
+}
+
+/** Shared by connections, skills, and plugins: one row, one focus target, one action. */
+export function CapabilityCatalogRow({
+  name,
+  description,
+  icon,
+  status = "available",
+  statusLabel,
+  showStatusLabel = false,
+  onOpen,
+  className = "",
+  ...props
+}: CapabilityCatalogRowProps) {
+  return (
+    <button
+      {...props}
+      type="button"
+      className={`og-capability-catalog-row ${className}`}
+      onClick={onOpen}
+    >
+      {icon ? <span className="og-capability-catalog-icon">{icon}</span> : null}
+      <span className="og-capability-catalog-copy">
+        <strong>{name}</strong>
+        {description ? <span>{description}</span> : null}
+      </span>
+      <CapabilityCatalogIndicator status={status} label={statusLabel} showLabel={showStatusLabel} />
+    </button>
+  );
+}

package/src/components/markdown.tsx

@@ -19,6 +19,7 @@ import ReactMarkdown, {
   type UrlTransform,
 } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { LoaderCircleIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import { tableElementToTsv } from "../lib/clipboard";
 import { prefersReducedMotion } from "../lib/motion";
@@ -46,6 +47,7 @@ import { TooltipProvider } from "./tooltip";
 export type MarkdownInteractiveBlock = { kind: "html" | "site"; content: string };
 const InteractiveContext = createContext<{
   source: string;
+  streaming?: boolean | undefined;
   render?: (block: MarkdownInteractiveBlock) => ReactNode;
   renderImage?: (image: { src: string; alt: string }) => ReactNode;
 }>({ source: "" });
@@ -406,7 +408,7 @@ function fenceLanguage(children: ReactNode): string | null {
 }
 
 function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"> & ExtraProps) {
-  const { source, render } = useContext(InteractiveContext);
+  const { source, render, streaming } = useContext(InteractiveContext);
   const language = fenceLanguage(children);
   if (render && (language === "opengeni-html" || language === "opengeni-site")) {
     const start = node?.position?.start.offset;
@@ -428,7 +430,33 @@ function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"
       closing &&
       closing.length >= opening[1]!.length &&
       [...closing].every((c) => c === opening[1]![0]);
-    if (!complete) return <p role="status">Preparing preview…</p>;
+    if (!complete) {
+      return (
+        <div
+          role="status"
+          aria-live="polite"
+          aria-busy={streaming === true}
+          className="my-3 flex min-h-32 items-center gap-3 rounded-og-md bg-og-surface-1/70 px-4 py-5"
+        >
+          {streaming ? (
+            <LoaderCircleIcon
+              aria-hidden
+              className="size-5 shrink-0 text-og-fg-muted motion-safe:animate-spin"
+            />
+          ) : null}
+          <div>
+            <div className="text-og-sm font-medium text-og-fg">
+              {streaming ? "Preparing preview…" : "Preview incomplete"}
+            </div>
+            <div className="mt-1 text-og-sm text-og-fg-muted">
+              {streaming
+                ? "Generating the interactive content. It will appear here when ready."
+                : "Generation stopped before the preview was ready."}
+            </div>
+          </div>
+        </div>
+      );
+    }
     return (
       <>
         {render({
@@ -622,10 +650,11 @@ function MarkdownImpl({
   const interactiveContext = useMemo(
     () => ({
       source: children,
+      streaming,
       ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
       ...(renderImage ? { renderImage } : {}),
     }),
-    [children, renderInteractiveBlock, renderImage],
+    [children, streaming, renderInteractiveBlock, renderImage],
   );
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so

package/src/components/message-timeline.tsx

@@ -229,8 +229,8 @@ export type MessageTimelineProps = {
   hasNewer?: boolean | undefined;
   /** A newer history page is being fetched. */
   loadingNewer?: boolean | undefined;
-  /** Page forward through history without loading the whole gap to the tip. */
-  onLoadNewer?: (() => void) | undefined;
+  /** Page forward through history. Return the request promise to enable inline error/retry. */
+  onLoadNewer?: (() => unknown) | undefined;
   /**
    * Reload the live tip window. When omitted, Jump to latest only re-pins and
    * scrolls the in-memory window.
@@ -461,6 +461,67 @@ export function MessageTimeline({
   // can acquire a different first-delta id when older text arrives).
   const sourceItems = events ?? items;
   const olderBoundaryKey = sourceItems?.[0]?.id;
+  const newerBoundaryKey = `${events?.[0]?.sessionId ?? ""}:${olderBoundaryKey ?? ""}`;
+  const newerScopeRef = useRef(newerBoundaryKey);
+  newerScopeRef.current = newerBoundaryKey;
+  const newerAttemptRef = useRef<{ pending: boolean } | null>(null);
+  const newerRetryButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [newerRetryPending, setNewerRetryPending] = useState(false);
+  const [newerFailure, setNewerFailure] = useState<{ key: string; message: string } | null>(null);
+  useEffect(() => {
+    newerScopeRef.current = newerBoundaryKey;
+    newerAttemptRef.current = null;
+    setNewerFailure(null);
+    setNewerRetryPending(false);
+    return () => {
+      newerScopeRef.current = "";
+      newerAttemptRef.current = null;
+    };
+  }, [newerBoundaryKey]);
+  const requestNewer = useCallback(
+    (explicitRetry = false) => {
+      if (
+        newerScopeRef.current !== newerBoundaryKey ||
+        !onLoadNewer ||
+        loadingNewer ||
+        (newerAttemptRef.current && (!explicitRetry || newerAttemptRef.current.pending))
+      ) {
+        return;
+      }
+      const attempt = { pending: true };
+      newerAttemptRef.current = attempt;
+      if (explicitRetry) setNewerRetryPending(true);
+      const isCurrent = () =>
+        newerAttemptRef.current === attempt && newerScopeRef.current === newerBoundaryKey;
+      // Both synchronous host errors and rejected promises belong to this
+      // boundary. Retain the failed attempt so observers cannot hot-retry it.
+      void Promise.resolve()
+        .then(() => (isCurrent() ? onLoadNewer() : undefined))
+        .then(
+          () => {
+            if (!isCurrent()) return;
+            newerAttemptRef.current = null;
+            // The successful page removes the recovery control. Return focus
+            // to the reading surface without moving the reader's viewport.
+            if (document.activeElement === newerRetryButtonRef.current) {
+              scrollRef.current?.focus({ preventScroll: true });
+            }
+            setNewerFailure(null);
+            setNewerRetryPending(false);
+          },
+          (reason: unknown) => {
+            if (!isCurrent()) return;
+            attempt.pending = false;
+            setNewerRetryPending(false);
+            setNewerFailure({
+              key: newerBoundaryKey,
+              message: reason instanceof Error ? reason.message : String(reason),
+            });
+          },
+        );
+    },
+    [onLoadNewer, loadingNewer, newerBoundaryKey],
+  );
   const previousSourceIdsRef = useRef(new Set<string>());
   const previousSourceBoundaryRef = useRef<string | undefined>(undefined);
   const readingAnchorRef = useRef<TimelineAnchor | null>(null);
@@ -1586,14 +1647,14 @@ export function MessageTimeline({
         // An underfilled history window has both sentinels visible. Advancing
         // it automatically would undo an explicit older-page navigation.
         if (maxScrollOf(root) > 1 && entries.some((entry) => entry.isIntersecting)) {
-          onLoadNewer();
+          requestNewer();
         }
       },
       { root, rootMargin: "0px 0px 1200px 0px" },
     );
     observer.observe(target);
     return () => observer.disconnect();
-  }, [hasNewer, loadingNewer, onLoadNewer, firstGroupKey]);
+  }, [hasNewer, loadingNewer, onLoadNewer, requestNewer, firstGroupKey]);
 
   // Late layout that React commits cannot see (images decoding, fonts, code
   // blocks) grows content without a commit. While pinned, soft-follow the tip;
@@ -2061,6 +2122,29 @@ export function MessageTimeline({
                           {groups.length > 0 && trailingState ? (
                             <div data-og-timeline-trailing-state="">{trailingState}</div>
                           ) : null}
+                          {hasNewer && newerFailure?.key === newerBoundaryKey ? (
+                            <div
+                              data-og-newer-error=""
+                              className="flex flex-col items-center gap-2 px-4 py-3 text-center text-og-menu text-og-fg-muted"
+                            >
+                              <p role="status" className="max-w-prose [overflow-wrap:anywhere]">
+                                Couldn’t load later activity. {newerFailure.message}
+                              </p>
+                              <button
+                                ref={newerRetryButtonRef}
+                                type="button"
+                                data-og-retry-newer=""
+                                className="min-h-11 rounded-og-md border border-og-border px-3 py-2 text-og-fg hover:bg-og-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-og-accent"
+                                aria-disabled={loadingNewer || newerRetryPending}
+                                aria-busy={newerRetryPending}
+                                onClick={() => requestNewer(true)}
+                              >
+                                {newerRetryPending
+                                  ? "Retrying later activity…"
+                                  : "Retry later activity"}
+                              </button>
+                            </div>
+                          ) : null}
                           {hasNewer ? (
                             <div
                               ref={bottomSentinelRef}

package/src/components/model-picker.tsx

@@ -59,7 +59,14 @@ function providerGroups(models: ClientModel[], codexOnly: boolean) {
       optionDisabled: codexOnly && !isCodexClientModel(model),
     });
   }
-  return [...byProvider.values()];
+  const groups = [...byProvider.values()];
+  if (codexOnly) {
+    const codexIndex = groups.findIndex((group) =>
+      group.models.some((model) => !model.optionDisabled && isCodexClientModel(model)),
+    );
+    if (codexIndex > 0) groups.unshift(...groups.splice(codexIndex, 1));
+  }
+  return groups;
 }
 
 export function ModelPicker({
@@ -78,8 +85,9 @@ export function ModelPicker({
     [rows, codexOnly],
   );
   const billingGroups = useMemo(
-    () => (effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows) : []),
-    [effectiveRows],
+    () =>
+      effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows, { codexOnly }) : [],
+    [effectiveRows, codexOnly],
   );
   const providerGroupList = useMemo(() => providerGroups(models, codexOnly), [models, codexOnly]);
   const useBillingGroups = Boolean(effectiveRows.length);

package/src/components/model-policy-picker-menu.tsx

@@ -34,7 +34,10 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
       `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${payerSummaryForModel(row.catalog)}`.toLowerCase();
     return words.every((word) => text.includes(word));
   });
-  const groups = groupPickerRowsByBillingClass(filtered);
+  const matchingIds = new Set(filtered.map((row) => row.id));
+  const groups = groupPickerRowsByBillingClass(rows, { codexOnly: props.codexOnly === true })
+    .map((group) => ({ ...group, rows: group.rows.filter((row) => matchingIds.has(row.id)) }))
+    .filter((group) => group.rows.length > 0);
   const choose = (row: ClientPickerModelRow) => {
     if (!row.selectable || props.disabled) return;
     if (row.id !== props.model) props.onModelChange(row.id);
@@ -139,8 +142,12 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
         ) : (
           <>
             {groups.map((group) => (
-              <section key={group.billingClass} aria-label={group.label} className="py-1">
-                <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-medium text-og-fg-subtle">
+              <section
+                key={group.billingClass}
+                aria-label={group.label}
+                className="py-2.5 first:pt-1 [&+section]:border-t [&+section]:border-og-border"
+              >
+                <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-semibold text-og-fg">
                   <BillingClassMark billingClass={group.billingClass} aria-label="" />
                   {group.label}
                 </div>

package/src/components/session-conversation.tsx

@@ -84,9 +84,7 @@ function Conversation({
         onLoadOlder={feed.loadOlder}
         hasNewer={feed.hasNewer}
         loadingNewer={feed.loadingNewer}
-        onLoadNewer={() => {
-          void feed.loadNewer();
-        }}
+        onLoadNewer={feed.loadNewer}
         onJumpToStart={async () => {
           await feed.loadOldest();
         }}

package/src/components/session-status.tsx

@@ -12,10 +12,10 @@ export type SessionStatusMeta = {
 
 export const SESSION_STATUS_META: Record<SessionStatusValue, SessionStatusMeta> = {
   queued: {
-    label: "Starting",
+    label: "Queued",
     dotClassName: "bg-og-status-queued",
     badgeClassName: "text-og-fg-muted border-og-border bg-og-status-queued/10",
-    pulse: true,
+    pulse: false,
   },
   running: {
     label: "Running",

package/src/connect-panel.tsx

@@ -1,10 +1,12 @@
 import { ConnectAccounts } from "./connect-accounts";
 import { ConnectChooser } from "./connect-chooser";
 import { ConnectSetup, type ConnectSetupProps } from "./connect-setup";
+import { useConnect } from "./connect";
 
 export type ConnectPanelProps = ConnectSetupProps & {
   returnUrl: string;
-  title?: string;
+  /** Null omits the heading when the host already supplies one. */
+  title?: string | null;
   showAccounts?: boolean;
   presentation?: "select" | "catalog";
 };
@@ -20,16 +22,25 @@ export function ConnectPanel({
   className,
   ...setup
 }: ConnectPanelProps) {
+  const { attempt } = useConnect(setup.controller);
+  // Unknown/failed outcomes still need reconciliation or cancellation, not a
+  // competing new acquisition. Unmounting observers never cancels controller work.
+  const activeSetup =
+    attempt !== null && !["complete", "cancelled", "expired"].includes(attempt.state);
   return (
     <div className={["og-connect", className].filter(Boolean).join(" ")}>
-      <h2>{title}</h2>
-      <ConnectChooser
-        presentation={presentation}
-        controller={setup.controller}
-        returnUrl={returnUrl}
-      />
+      {title !== null && <h2>{title}</h2>}
+      {!activeSetup && (
+        <ConnectChooser
+          presentation={presentation}
+          controller={setup.controller}
+          returnUrl={returnUrl}
+        />
+      )}
       <ConnectSetup {...setup} />
-      {showAccounts && <ConnectAccounts controller={setup.controller} returnUrl={returnUrl} />}
+      {showAccounts && !activeSetup && (
+        <ConnectAccounts controller={setup.controller} returnUrl={returnUrl} />
+      )}
     </div>
   );
 }