@opengeni/react 4.0.2 → 5.0.4-canary.0

package/src/components/message-timeline.tsx

@@ -157,6 +157,8 @@ export type MessageTimelineProps = {
    * a Reconnect button without a handler to run it.
    */
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
   /**
    * Decide which durable authentication notices this timeline presents.
    * Defaults to showing every notice. Embedded hosts can suppress notices for
@@ -407,6 +409,7 @@ export function MessageTimeline({
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  renderAuthNeeded,
   shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
@@ -910,6 +913,7 @@ export function MessageTimeline({
         onOpenSession,
         onMemoryClick,
         onReconnect,
+        renderAuthNeeded,
         resolveProviderLogo,
         toolRegistry,
         loadRetainedScreenshot,
@@ -925,6 +929,7 @@ export function MessageTimeline({
       onMemoryClick,
       onOpenSession,
       onReconnect,
+      renderAuthNeeded,
       renderMessageActions,
       renderMessageText,
       resolveProviderLogo,
@@ -2309,6 +2314,7 @@ type TimelineGroupBehaviorProps = {
   onOpenSession: MessageTimelineProps["onOpenSession"];
   onMemoryClick: MessageTimelineProps["onMemoryClick"];
   onReconnect: MessageTimelineProps["onReconnect"];
+  renderAuthNeeded: MessageTimelineProps["renderAuthNeeded"];
   resolveProviderLogo: MessageTimelineProps["resolveProviderLogo"];
   toolRegistry: ToolRegistry;
   loadRetainedScreenshot: MessageTimelineProps["loadRetainedScreenshot"];
@@ -2373,6 +2379,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  renderAuthNeeded,
   resolveProviderLogo,
   toolRegistry,
   loadRetainedScreenshot,
@@ -2393,6 +2400,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onOpenSession?: ((sessionId: string) => void) | undefined;
   onMemoryClick?: ((memoryId: string) => void) | undefined;
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   toolRegistry: ToolRegistry;
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
@@ -2550,6 +2559,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession,
               onMemoryClick,
               onReconnect,
+              renderAuthNeeded,
               resolveProviderLogo,
               toolRegistry,
               loadRetainedScreenshot,
@@ -2565,6 +2575,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               onReconnect={onReconnect}
+              renderAuthNeeded={renderAuthNeeded}
               resolveProviderLogo={resolveProviderLogo}
               toolRegistry={toolRegistry}
               loadRetainedScreenshot={loadRetainedScreenshot}
@@ -2610,6 +2621,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
           renderMessageActions={renderMessageActions}
           renderMessageText={renderMessageText}
           onReconnect={onReconnect}
+          renderAuthNeeded={renderAuthNeeded}
           resolveProviderLogo={resolveProviderLogo}
           onOpenSession={onOpenSession}
           loadVideoArtifactPlayback={loadVideoArtifactPlayback}
@@ -2862,6 +2874,7 @@ export function TimelineRow({
   renderMessageActions,
   renderMessageText,
   onReconnect,
+  renderAuthNeeded,
   resolveProviderLogo,
   onOpenSession,
   loadVideoArtifactPlayback,
@@ -2872,6 +2885,8 @@ export function TimelineRow({
     | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
     | undefined;
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /** Host-owned inline connection setup. Return undefined to use the default recovery card. */
+  renderAuthNeeded?: ((item: AuthNeededItem) => ReactNode | undefined) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
   loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
@@ -2915,11 +2930,13 @@ export function TimelineRow({
       return <CompactionRow item={item} />;
     case "auth-needed":
       return (
-        <AuthNeededRow
-          item={item}
-          onReconnect={onReconnect}
-          resolveProviderLogo={resolveProviderLogo}
-        />
+        renderAuthNeeded?.(item) ?? (
+          <AuthNeededRow
+            item={item}
+            onReconnect={onReconnect}
+            resolveProviderLogo={resolveProviderLogo}
+          />
+        )
       );
     default:
       return null;

package/src/components/sandbox-workspace.tsx

@@ -699,7 +699,8 @@ export function useSandboxWorkspaceTabs(
     (captureState.fileCount ?? 0) > 0 ||
     (captureState.capture?.repos.some((repo) => (repo.branchDiff?.length ?? 0) > 0) ?? false);
   const captureUnavailable =
-    (captureState.fileCount === 0 && !captureHasChanges) || captureState.error !== null;
+    !captureState.loading &&
+    ((captureState.fileCount === 0 && !captureHasChanges) || captureState.error !== null);
   if (defaultTabRef.current.value === null) {
     if (initialTab && (!isWorkbenchSurface(initialTab) || surfaceSet.has(initialTab))) {
       defaultTabRef.current.value = initialTab;
@@ -711,7 +712,13 @@ export function useSandboxWorkspaceTabs(
       );
     } else if (captureUnavailable && initialWorkspaceTab(events) === WORKBENCH_TAB_CHANGES) {
       defaultTabRef.current.value = sourceDrivenDefaultTab(true, changesEnabled, filesEnabled);
-    } else if (captureState.fileCount !== null || captureState.error !== null) {
+    } else if (
+      !captureState.loading &&
+      (captureState.fileCount !== null || captureState.error !== null)
+    ) {
+      // Metadata may arrive before a signed manifest. While that manifest is
+      // loading, neither a positive count nor zero (committed-only changes)
+      // proves an unavailable capture, so leave the default unresolved.
       // No durable review surface exists. Files owns the explicit live-workspace
       // gate; a user can open Changes deliberately if they need a fresh Git read.
       defaultTabRef.current.value = sourceDrivenDefaultTab(false, changesEnabled, filesEnabled);

package/src/connect-accounts.tsx

@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from "react";
+import type { ConnectAccount, ConnectController } from "@opengeni/connect";
+import { useConnect } from "./connect";
+
+export type ConnectAccountsProps = {
+  controller: ConnectController;
+  className?: string;
+  /** Enables explicit account-bound reconnect. Host supplies the exact destination. */
+  returnUrl?: string;
+};
+
+/** Local credential revocation only. Unknown or changed versions must be
+ * refreshed; this component never retries a destructive operation implicitly. */
+export function ConnectAccounts(props: ConnectAccountsProps) {
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedAccounts key={generation} {...props} />;
+}
+
+function ScopedAccounts({ controller, className, returnUrl }: ConnectAccountsProps) {
+  const view = useConnect(controller);
+  const [accounts, setAccounts] = useState<ConnectAccount[] | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(false);
+  const [reload, setReload] = useState(0);
+  const mutation = useRef<AbortController | null>(null);
+  useEffect(() => () => mutation.current?.abort(), []);
+  useEffect(() => {
+    const abort = new AbortController();
+    setAccounts(null);
+    setSelected(null);
+    setError(false);
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return controller.transport.accounts(controller.workspaceId, { signal: abort.signal });
+      })
+      .then((result) => {
+        if (!abort.signal.aborted) setAccounts(structuredClone(result));
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setError(true);
+      });
+    return () => abort.abort();
+  }, [controller, reload]);
+
+  const disconnect = async (account: ConnectAccount) => {
+    const expectedVersion = account.version;
+    if (
+      mutation.current ||
+      view.busy ||
+      expectedVersion === undefined ||
+      !Number.isSafeInteger(expectedVersion) ||
+      expectedVersion < 1
+    )
+      return;
+    const abort = new AbortController();
+    mutation.current = abort;
+    setBusy(true);
+    setError(false);
+    try {
+      await controller.transport.disconnect(controller.workspaceId, account.id, {
+        expectedVersion,
+        signal: abort.signal,
+      });
+      if (!abort.signal.aborted) setReload((value) => value + 1);
+    } catch {
+      if (!abort.signal.aborted) {
+        // Outcome may be unknown. Drop the inventory so a second click cannot
+        // replay against the stale selection; let the host reload live state.
+        setAccounts(null);
+        setError(true);
+      }
+    } finally {
+      if (!abort.signal.aborted) {
+        mutation.current = null;
+        setBusy(false);
+        setSelected(null);
+      }
+    }
+  };
+  const reconnect = async (account: ConnectAccount) => {
+    if (!returnUrl || mutation.current || view.busy) return;
+    setError(false);
+    try {
+      await controller.begin({
+        providerId: account.providerId,
+        ownership: account.ownership,
+        reconnectAccountId: account.id,
+        returnUrl,
+        idempotencyKey: crypto.randomUUID(),
+      });
+    } catch {
+      setError(true);
+    }
+  };
+
+  return (
+    <section
+      className={className}
+      aria-label="Connected accounts"
+      aria-busy={busy || view.busy || (!accounts && !error)}
+    >
+      {error && (
+        <p role="alert">Account state could not be confirmed. Reload before trying again.</p>
+      )}
+      {!accounts && !error && <p role="status">Loading accounts…</p>}
+      {accounts?.length === 0 && <p role="status">No connected accounts.</p>}
+      {accounts && accounts.length > 0 && (
+        <ul>
+          {accounts.map((account) => (
+            <li key={`${account.providerId}:${account.id}`}>
+              <span>
+                {account.label} — {account.providerId} — {account.ownership} —{" "}
+                {account.status.replaceAll("_", " ")}
+              </span>
+              {returnUrl && (
+                <button
+                  type="button"
+                  disabled={busy || view.busy || account.status === "disabled"}
+                  onClick={() => void reconnect(account)}
+                >
+                  Reconnect {account.label}
+                </button>
+              )}
+              {selected === `${account.providerId}:${account.id}` ? (
+                <div role="group" aria-label={`Disconnect ${account.label}`}>
+                  <p>
+                    This removes local OpenGeni access. It does not revoke consent at the provider.
+                  </p>
+                  <button
+                    type="button"
+                    disabled={busy || view.busy}
+                    onClick={() => void disconnect(account)}
+                  >
+                    Confirm disconnect
+                  </button>
+                  <button type="button" disabled={busy} onClick={() => setSelected(null)}>
+                    Keep account
+                  </button>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  disabled={
+                    busy ||
+                    view.busy ||
+                    account.status === "disabled" ||
+                    !Number.isSafeInteger(account.version) ||
+                    account.version! < 1
+                  }
+                  onClick={() => setSelected(`${account.providerId}:${account.id}`)}
+                >
+                  Disconnect {account.label}
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      <button type="button" disabled={busy} onClick={() => setReload((value) => value + 1)}>
+        Reload accounts
+      </button>
+    </section>
+  );
+}

package/src/connect-chooser.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useState, type FormEvent } from "react";
+import type { ConnectController, ConnectProvider } from "@opengeni/connect";
+import { useConnect } from "./connect";
+
+export type ConnectChooserProps = {
+  controller: ConnectController;
+  /** Exact host return string; no completion parameters are added. */
+  returnUrl: string;
+  className?: string;
+};
+
+/** Catalog readiness is supplied by the authenticated backend, never inferred
+ * from the existence of a provider definition. Host replaces the controller on
+ * actor/workspace change. This form does not open OAuth windows itself. */
+export function ConnectChooser(props: ConnectChooserProps) {
+  // Remount scope-local selections synchronously when the controller changes,
+  // before effects can expose a previous actor's inventory for one frame.
+  const [scope, setScope] = useState(props.controller);
+  const [generation, setGeneration] = useState(0);
+  if (scope !== props.controller) {
+    setScope(props.controller);
+    setGeneration(generation + 1);
+  }
+  return <ScopedChooser key={generation} {...props} />;
+}
+
+function ScopedChooser({ controller, returnUrl, className }: ConnectChooserProps) {
+  const view = useConnect(controller);
+  const [catalog, setCatalog] = useState<ConnectProvider[] | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [load, setLoad] = useState(0);
+  const [providerId, setProviderId] = useState("");
+  const [ownership, setOwnership] = useState("");
+  useEffect(() => {
+    const abort = new AbortController();
+    setCatalog(null);
+    setFailed(false);
+    setProviderId("");
+    setOwnership("");
+    // Promise boundary also handles a synchronously throwing injected transport.
+    void Promise.resolve()
+      .then(() => {
+        abort.signal.throwIfAborted();
+        return controller.transport.catalog(controller.workspaceId, { signal: abort.signal });
+      })
+      .then((providers) => {
+        if (!abort.signal.aborted) setCatalog(structuredClone(providers));
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setFailed(true);
+      });
+    return () => abort.abort();
+  }, [controller, load]);
+  const provider = catalog?.find((entry) => entry.id === providerId);
+  const canBegin =
+    provider?.readiness === "available" &&
+    (ownership === "personal" || ownership === "workspace") &&
+    provider.ownership.includes(ownership);
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (!canBegin || view.busy || (ownership !== "personal" && ownership !== "workspace")) return;
+    setFailed(false);
+    try {
+      void controller
+        .begin({ providerId, ownership, returnUrl, idempotencyKey: crypto.randomUUID() })
+        .catch(() => setFailed(true));
+    } catch {
+      setFailed(true);
+    }
+  };
+  return (
+    <section
+      className={className}
+      aria-label="Choose a connection"
+      aria-busy={view.busy || (!catalog && !failed)}
+    >
+      {failed && (
+        <p role="alert">
+          Connections could not be loaded or started. Check setup status before retrying.
+        </p>
+      )}
+      {!catalog && !failed && <p role="status">Loading connections…</p>}
+      {catalog?.length === 0 && <p role="status">No connections are available.</p>}
+      {Boolean(catalog?.length) && (
+        <form onSubmit={submit}>
+          <fieldset disabled={view.busy}>
+            <legend>Provider and ownership</legend>
+            <label>
+              Provider
+              <select
+                required
+                value={providerId}
+                onChange={(event) => {
+                  setProviderId(event.target.value);
+                  setOwnership("");
+                }}
+              >
+                <option value="" disabled>
+                  Choose a provider
+                </option>
+                {catalog!.map((entry) => (
+                  <option
+                    key={entry.id}
+                    value={entry.id}
+                    disabled={entry.readiness !== "available" || entry.ownership.length === 0}
+                  >
+                    {entry.label} — {entry.id} ({entry.readiness.replaceAll("_", " ")})
+                  </option>
+                ))}
+              </select>
+            </label>
+            {provider && (
+              <label>
+                Ownership
+                <select
+                  required
+                  value={ownership}
+                  onChange={(event) => setOwnership(event.target.value)}
+                >
+                  <option value="" disabled>
+                    Choose ownership
+                  </option>
+                  {provider.ownership.map((choice) => (
+                    <option key={choice} value={choice}>
+                      {choice === "personal"
+                        ? "Personal — owned by you"
+                        : "Workspace — shared connection"}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            )}
+            <button type="submit" disabled={!canBegin}>
+              Start setup
+            </button>
+          </fieldset>
+        </form>
+      )}
+      <button type="button" disabled={view.busy} onClick={() => setLoad(load + 1)}>
+        Reload providers
+      </button>
+    </section>
+  );
+}

package/src/connect-panel.tsx

@@ -0,0 +1,29 @@
+import { ConnectAccounts } from "./connect-accounts";
+import { ConnectChooser } from "./connect-chooser";
+import { ConnectSetup, type ConnectSetupProps } from "./connect-setup";
+
+export type ConnectPanelProps = ConnectSetupProps & {
+  returnUrl: string;
+  title?: string;
+  showAccounts?: boolean;
+};
+
+/** Optional composition over the same unstyled surfaces. Import
+ * @opengeni/react/connect.css for styling; the host retains navigation,
+ * transport, actor admission, and controller lifetime. */
+export function ConnectPanel({
+  returnUrl,
+  title = "Connections",
+  showAccounts = true,
+  className,
+  ...setup
+}: ConnectPanelProps) {
+  return (
+    <div className={["og-connect", className].filter(Boolean).join(" ")}>
+      <h2>{title}</h2>
+      <ConnectChooser controller={setup.controller} returnUrl={returnUrl} />
+      <ConnectSetup {...setup} />
+      {showAccounts && <ConnectAccounts controller={setup.controller} returnUrl={returnUrl} />}
+    </div>
+  );
+}