@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

package/src/connect-chooser.tsx

@@ -1,7 +1,9 @@
+import { connectionServicePresentation } from "./connection-service-presentation";
 import { ConnectionCatalog } from "./connection-catalog";
+import { ConnectionLogo } from "./connection-logo";
 import { useEffect, useState, type FormEvent } from "react";
-import type { ConnectController, ConnectProvider } from "@opengeni/connect";
-import { useConnect } from "./connect";
+import type { ConnectAccount, ConnectController, ConnectProvider } from "@opengeni/connect";
+import { useConnect } from "./hooks/use-connect";
 
 export type ConnectChooserProps = {
   controller: ConnectController;
@@ -9,6 +11,12 @@ export type ConnectChooserProps = {
   returnUrl: string;
   className?: string;
   presentation?: "select" | "catalog";
+  /** Compact mechanism picker when service discovery is already shown by the host. */
+  customOnly?: boolean;
+  providerOnly?: boolean;
+  compact?: boolean;
+  /** Select a service from the unified discovery list. */
+  initialProviderId?: string;
 };
 
 /** Catalog readiness is supplied by the authenticated backend, never inferred
@@ -31,34 +39,76 @@ function ScopedChooser({
   returnUrl,
   className,
   presentation = "select",
+  customOnly = false,
+  providerOnly = false,
+  compact = false,
+  initialProviderId = "",
 }: ConnectChooserProps) {
   const view = useConnect(controller);
   const [catalog, setCatalog] = useState<ConnectProvider[] | null>(null);
+  const [accounts, setAccounts] = useState<ConnectAccount[]>([]);
   const [failed, setFailed] = useState(false);
   const [load, setLoad] = useState(0);
   const [query, setQuery] = useState("");
-  const [providerId, setProviderId] = useState("");
+  const [providerId, setProviderId] = useState(initialProviderId);
   const [ownership, setOwnership] = useState("");
   useEffect(() => {
     const abort = new AbortController();
     setCatalog(null);
+    setAccounts([]);
     setFailed(false);
-    setProviderId("");
+    setProviderId(initialProviderId);
     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 });
+        return Promise.all([
+          controller.transport.catalog(controller.workspaceId, { signal: abort.signal }),
+          presentation === "catalog"
+            ? controller.transport.accounts(controller.workspaceId, { signal: abort.signal })
+            : Promise.resolve([] as ConnectAccount[]),
+        ]);
       })
-      .then((providers) => {
-        if (!abort.signal.aborted) setCatalog(structuredClone(providers));
+      .then(([providers, inventory]) => {
+        if (!abort.signal.aborted) {
+          setCatalog(
+            structuredClone(
+              providers.filter(
+                (entry) =>
+                  entry.readiness === "available" &&
+                  entry.ownership.length > 0 &&
+                  (!providerOnly ||
+                    (entry.family !== "mcp" &&
+                      !entry.setup.some((kind) =>
+                        ["installation", "openapi", "graphql"].includes(kind),
+                      ))) &&
+                  (!customOnly ||
+                    entry.family === "mcp" ||
+                    entry.setup.some((kind) =>
+                      ["installation", "openapi", "graphql"].includes(kind),
+                    )),
+              ),
+            ),
+          );
+          setAccounts(structuredClone(inventory));
+          const initial = providers.find((entry) => entry.id === initialProviderId);
+          if (initial)
+            setOwnership(
+              initial.ownership.includes("personal") &&
+                ["google", "microsoft"].includes(initial.family)
+                ? "personal"
+                : initial.ownership.includes("workspace")
+                  ? "workspace"
+                  : (initial.ownership[0] ?? ""),
+            );
+        }
       })
       .catch(() => {
         if (!abort.signal.aborted) setFailed(true);
       });
     return () => abort.abort();
-  }, [controller, load]);
+  }, [controller, load, presentation, customOnly, providerOnly, initialProviderId]);
   const provider = catalog?.find((entry) => entry.id === providerId);
   const canBegin =
     provider?.readiness === "available" &&
@@ -76,6 +126,9 @@ function ScopedChooser({
       setFailed(true);
     }
   };
+  // Optional adapters must not add a temporary section that disappears once
+  // readiness arrives. The primary discovery surface already owns loading.
+  if (compact && (!catalog || catalog.length === 0) && !failed) return null;
   return (
     <section
       className={className}
@@ -92,42 +145,117 @@ function ScopedChooser({
       {Boolean(catalog?.length) && (
         <form onSubmit={submit}>
           <fieldset disabled={view.busy}>
-            <legend>Provider and ownership</legend>
+            <legend hidden={customOnly || compact}>
+              {presentation === "catalog" ? "Add a connection" : "Provider and ownership"}
+            </legend>
             {presentation === "catalog" && !provider ? (
               <>
-                <label>
+                <label hidden={customOnly || compact}>
                   Search connections
                   <input
                     type="search"
+                    placeholder="Find a service…"
                     value={query}
                     onChange={(event) => setQuery(event.target.value)}
                   />
                 </label>
-                <ConnectionCatalog
-                  query={query}
-                  services={catalog!.map((entry) => ({
-                    id: entry.id,
-                    name: entry.label,
-                    options: [
-                      {
-                        id: entry.id,
-                        name: entry.label,
-                        description: entry.reason,
-                        status: entry.readiness.replaceAll("_", " "),
-                        connected: false,
-                        onOpen: () => {
-                          if (!view.busy) {
-                            setProviderId(entry.id);
-                            setOwnership(entry.ownership.length === 1 ? entry.ownership[0]! : "");
-                          }
-                        },
-                      },
-                    ],
-                  }))}
-                />
+                {[
+                  {
+                    name: "Services",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        entry.family !== "mcp" &&
+                        !entry.setup.some((kind) =>
+                          ["installation", "openapi", "graphql"].includes(kind),
+                        ),
+                    ),
+                    secondary: false,
+                  },
+                  {
+                    name: "Custom connections",
+                    entries: catalog!.filter(
+                      (entry) =>
+                        entry.readiness === "available" &&
+                        (entry.family === "mcp" ||
+                          entry.setup.some((kind) =>
+                            ["installation", "openapi", "graphql"].includes(kind),
+                          )),
+                    ),
+                    secondary: true,
+                  },
+                ].map((group) => {
+                  const entries = group.entries.filter((entry) =>
+                    entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                  );
+                  if (!entries.length) return null;
+                  const rows = (
+                    <ConnectionCatalog
+                      services={entries.map((entry) => {
+                        const connected = accounts.some(
+                          (account) =>
+                            account.providerId === entry.id && account.status === "connected",
+                        );
+                        return {
+                          id: entry.id,
+                          name: entry.label,
+                          logo: (
+                            <ConnectionLogo
+                              src={connectionServicePresentation(entry).logo}
+                              name={entry.label}
+                            />
+                          ),
+                          options: [
+                            {
+                              id: entry.id,
+                              name: entry.label,
+                              status: connected
+                                ? "Connected"
+                                : entry.readiness === "available"
+                                  ? "Connect"
+                                  : "Unavailable",
+                              state: connected
+                                ? "added"
+                                : entry.readiness === "available"
+                                  ? "available"
+                                  : "unavailable",
+                              connected,
+                              onOpen: () => {
+                                if (!view.busy) {
+                                  setProviderId(entry.id);
+                                  setOwnership(
+                                    entry.ownership.length === 1 ? entry.ownership[0]! : "",
+                                  );
+                                }
+                              },
+                            },
+                          ],
+                        };
+                      })}
+                    />
+                  );
+                  return group.secondary && !customOnly ? (
+                    <details
+                      className="og-connect-secondary"
+                      key={group.name}
+                      open={query.trim() ? true : undefined}
+                    >
+                      <summary>
+                        {group.name}
+                        <span>{entries.length}</span>
+                      </summary>
+                      {rows}
+                    </details>
+                  ) : (
+                    <div key={group.name}>{rows}</div>
+                  );
+                })}
+                {!catalog!.some((entry) =>
+                  entry.label.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim()),
+                ) && <p role="status">No services match your search.</p>}
               </>
             ) : null}
-            {presentation === "catalog" && provider ? (
+            {presentation === "catalog" && provider && !initialProviderId ? (
               <button
                 type="button"
                 onClick={() => {
@@ -165,8 +293,14 @@ function ScopedChooser({
             {provider && (
               <>
                 <strong>{presentation === "catalog" ? provider.label : null}</strong>
+                {provider.readiness !== "available" && (
+                  <p role="status">
+                    {provider.reason ??
+                      "This service is not available in this environment. Contact your administrator to enable it."}
+                  </p>
+                )}
                 <label>
-                  Ownership
+                  Who can use this connection?
                   <select
                     required
                     value={ownership}
@@ -177,9 +311,7 @@ function ScopedChooser({
                     </option>
                     {provider.ownership.map((choice) => (
                       <option key={choice} value={choice}>
-                        {choice === "personal"
-                          ? "Personal — owned by you"
-                          : "Workspace — shared connection"}
+                        {choice === "personal" ? "Only me" : "Everyone in this workspace"}
                       </option>
                     ))}
                   </select>
@@ -191,12 +323,12 @@ function ScopedChooser({
               type="submit"
               disabled={!canBegin}
             >
-              Start setup
+              Continue
             </button>
           </fieldset>
         </form>
       )}
-      <button type="button" disabled={view.busy} onClick={() => setLoad(load + 1)}>
+      <button hidden={!failed} type="button" disabled={view.busy} onClick={() => setLoad(load + 1)}>
         Reload providers
       </button>
     </section>

package/src/connect-panel.tsx

@@ -1,12 +1,23 @@
 import { ConnectAccounts } from "./connect-accounts";
 import { ConnectChooser } from "./connect-chooser";
 import { ConnectSetup, type ConnectSetupProps } from "./connect-setup";
+import { useConnect } from "./hooks/use-connect";
+import type { OpenGeniClient } from "@opengeni/sdk";
+import { useState } from "react";
+import { connectionServicePresentation } from "./connection-service-presentation";
+import { ConnectionDiscovery } from "./connection-discovery";
 
 export type ConnectPanelProps = ConnectSetupProps & {
   returnUrl: string;
-  title?: string;
+  /** Null omits the heading when the host already supplies one. */
+  title?: string | null;
   showAccounts?: boolean;
+  /** Presentation only; the host backend owns acquisition admission. */
+  showCustomConnections?: boolean;
+  /** Include ready, non-custom adapters from the host's Connect catalogue. */
+  showProviderConnections?: boolean;
   presentation?: "select" | "catalog";
+  client?: OpenGeniClient | undefined;
 };
 
 /** Optional composition over the same unstyled surfaces. Import
@@ -16,20 +27,73 @@ export function ConnectPanel({
   returnUrl,
   title = "Connections",
   showAccounts = true,
+  showCustomConnections = true,
+  showProviderConnections = false,
   presentation = "select",
   className,
+  client,
   ...setup
 }: ConnectPanelProps) {
+  const { attempt } = useConnect(setup.controller);
+  const [inventoryRevision, setInventoryRevision] = useState(0);
+  // 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);
+  const serviceName = attempt
+    ? connectionServicePresentation({ id: attempt.providerId, label: "" }).name
+    : "";
   return (
     <div className={["og-connect", className].filter(Boolean).join(" ")}>
-      <h2>{title}</h2>
-      <ConnectChooser
-        presentation={presentation}
-        controller={setup.controller}
-        returnUrl={returnUrl}
-      />
-      <ConnectSetup {...setup} />
-      {showAccounts && <ConnectAccounts controller={setup.controller} returnUrl={returnUrl} />}
+      {title !== null && <h2>{title}</h2>}
+      {showAccounts && !activeSetup && (
+        <ConnectAccounts
+          key={inventoryRevision}
+          controller={setup.controller}
+          returnUrl={returnUrl}
+          client={client}
+          onDisconnected={() => setInventoryRevision((value) => value + 1)}
+        />
+      )}
+      {!activeSetup &&
+        (client && presentation === "catalog" ? (
+          <>
+            <ConnectionDiscovery
+              key={inventoryRevision}
+              controller={showProviderConnections ? setup.controller : undefined}
+              client={client}
+              workspaceId={setup.controller.workspaceId}
+              returnUrl={returnUrl}
+              onConfigured={() => setInventoryRevision((value) => value + 1)}
+            />
+            {showCustomConnections && (
+              <details className="og-connect-secondary">
+                <summary>Custom connection</summary>
+                <ConnectChooser
+                  customOnly
+                  presentation={presentation}
+                  controller={setup.controller}
+                  returnUrl={returnUrl}
+                />
+              </details>
+            )}
+          </>
+        ) : (
+          <ConnectChooser
+            presentation={presentation}
+            controller={setup.controller}
+            returnUrl={returnUrl}
+          />
+        ))}
+      {activeSetup && (
+        <ConnectSetup
+          {...setup}
+          authorizeLabel={
+            setup.authorizeLabel ??
+            (serviceName ? `Continue to ${serviceName}` : "Authorize connection")
+          }
+        />
+      )}
     </div>
   );
 }

package/src/connect-setup.tsx

@@ -1,6 +1,6 @@
 import { useState, type FormEvent } from "react";
 import type { ConnectAttempt, ConnectController } from "@opengeni/connect";
-import { useConnect } from "./connect";
+import { useConnect } from "./hooks/use-connect";
 
 const setupStatus: Record<ConnectAttempt["state"], string> = {
   ready: "Ready to connect",
@@ -9,9 +9,9 @@ const setupStatus: Record<ConnectAttempt["state"], string> = {
   provider_wait: "Waiting for authorization",
   account_selection: "Choose an account",
   resource_selection: "Choose resources",
-  preview: "Review available operations",
-  installing: "Installing selected operations…",
-  connected_but_incomplete: "Account connected — finish setup",
+  preview: "Choose tools",
+  installing: "Adding selected tools…",
+  connected_but_incomplete: "Choose which tools to add",
   complete: "Connection ready",
   cancelled: "Setup cancelled",
   expired: "Setup expired",
@@ -35,12 +35,16 @@ export type ConnectSetupProps = {
   controller: ConnectController;
   /** Called synchronously in the click handler so a host can open a popup. */
   onAuthorize: (attempt: ConnectAttempt) => void | Promise<unknown>;
+  /** Called synchronously on Continue; hosts can reserve a popup before advancing. */
+  onSelectAccount?: (accountId: string) => void | Promise<unknown>;
   /** Host pagination must retain selections across pages and submit the final set. */
   onBrowseResources?: (attempt: ConnectAttempt) => void | Promise<unknown>;
   className?: string;
+  /** Provider-specific label supplied by the embedding host. */
+  authorizeLabel?: string | undefined;
 };
 
-/** Unstyled setup surface. No provider secrets enter React state. Host owns
+/** Controller-backed setup surface, styled by opt-in connect.css. No provider secrets enter React state. Host owns
  * chooser, controller lifetime, navigation and recovery after full redirect. */
 export function ConnectSetup(props: ConnectSetupProps) {
   // Attempt IDs/revisions are not a substitute for actor scope. A host can
@@ -55,9 +59,17 @@ export function ConnectSetup(props: ConnectSetupProps) {
   return <ScopedSetup key={generation} {...props} />;
 }
 
-function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }: ConnectSetupProps) {
+function ScopedSetup({
+  controller,
+  onAuthorize,
+  onBrowseResources,
+  onSelectAccount,
+  className,
+  authorizeLabel = "Authorize connection",
+}: ConnectSetupProps) {
   const view = useConnect(controller);
   const [localError, setLocalError] = useState(false);
+  const [navigating, setNavigating] = useState(false);
   const invoke = (operation: () => unknown | Promise<unknown>) => {
     setLocalError(false);
     try {
@@ -69,7 +81,10 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
   const attempt = view.attempt;
   if (!attempt)
     return (
-      <section className={className} aria-label="Connection setup">
+      <section
+        className={["og-connect-setup", className].filter(Boolean).join(" ")}
+        aria-label="Connection setup"
+      >
         <p role="status">Choose a connection to begin.</p>
       </section>
     );
@@ -80,7 +95,7 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
     event.preventDefault();
     const form = event.currentTarget;
     const data = new FormData(form);
-    if (view.busy) return;
+    if (view.busy || navigating) return;
     const key = crypto.randomUUID();
     if (action.type === "credentials") {
       const values = Object.fromEntries(
@@ -94,7 +109,15 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
       if (
         action.accounts.some((account) => account.id === accountId && account.status !== "disabled")
       )
-        invoke(() => view.advance({ type: "account", accountId }, key));
+        invoke(async () => {
+          if (!onSelectAccount) return view.advance({ type: "account", accountId }, key);
+          setNavigating(true);
+          try {
+            await onSelectAccount(accountId);
+          } finally {
+            setNavigating(false);
+          }
+        });
     } else if (action.type === "select_resources") {
       if (action.cursor) return;
       const resourceIds = data.getAll("resource").map(String);
@@ -115,27 +138,47 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
     }
   };
   return (
-    <section className={className} aria-label="Connection setup" aria-busy={view.busy}>
-      <p>Ownership: {attempt.ownership === "personal" ? "Personal" : "Workspace"}</p>
-      <p role="status">{setupStatus[attempt.state]}</p>
+    <section
+      className={["og-connect-setup", className].filter(Boolean).join(" ")}
+      aria-label="Connection setup"
+      aria-busy={view.busy || navigating}
+    >
+      <div className="og-connect-setup-summary">
+        <p className="og-connect-setup-scope">
+          {attempt.ownership === "personal" ? "Personal connection" : "Workspace connection"}
+        </p>
+        <p role="status" className="og-connect-setup-status">
+          {setupStatus[attempt.state]}
+        </p>
+        <p className="og-connect-setup-description">
+          {attempt.ownership === "personal"
+            ? "Only your work can use this connection."
+            : "Work in this workspace can use this connection."}
+        </p>
+      </div>
       {attempt.account && <p>Account: {attempt.account.label}</p>}
       {(localError || view.error || attempt.error) && (
         <p role="alert">
           {attempt.error?.code === "source_changed"
-            ? "The integration source changed. Review the new operations before installing."
+            ? "The integration source changed. Review the updated tools before adding them."
             : "Connection setup could not continue. Refresh its status before trying again."}
         </p>
       )}
       {!terminal && (
         <form key={`${attempt.id}:${attempt.revision}`} onSubmit={submit} autoComplete="off">
-          <fieldset disabled={view.busy}>
-            <legend>Connection details</legend>
+          <fieldset disabled={view.busy || navigating}>
+            {["credentials", "select_account", "select_resources", "preview"].includes(
+              action.type,
+            ) ? (
+              <legend>Connection details</legend>
+            ) : null}
             {attempt.state === "connected_but_incomplete" && action.type === "none" && (
               <button
                 type="button"
+                className="og-connect-setup-primary"
                 onClick={() => invoke(() => view.advance({ type: "retry" }, crypto.randomUUID()))}
               >
-                Review integration operations
+                Choose tools
               </button>
             )}
             {action.type === "credentials" &&
@@ -204,7 +247,7 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
             )}
             {action.type === "preview" && (
               <>
-                <p>Select the operations to install.</p>
+                <p>Choose the tools agents can use with this account.</p>
                 {action.operations.map((operation) => (
                   <label key={operation.id}>
                     <input type="checkbox" name="operation" value={operation.id} />
@@ -218,17 +261,19 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
             ) && (
               <button
                 type="submit"
+                className="og-connect-setup-primary"
                 disabled={action.type === "select_resources" && Boolean(action.cursor)}
               >
-                {action.type === "preview" ? "Install selected operations" : "Continue"}
+                {action.type === "preview" ? "Add selected tools" : "Continue"}
               </button>
             )}
             {action.type === "authorize" && (
               <button
                 type="button"
+                className="og-connect-setup-primary"
                 onClick={() => invoke(() => onAuthorize(structuredClone(attempt)))}
               >
-                Authorize connection
+                {navigating ? "Waiting for authorization…" : authorizeLabel}
               </button>
             )}
             {action.type === "wait" && (
@@ -246,12 +291,14 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
                 )}
               </>
             )}
-            <button type="button" onClick={() => invoke(() => view.refresh())}>
-              Check status
-            </button>
-            <button type="button" onClick={() => invoke(() => view.cancel(crypto.randomUUID()))}>
-              Cancel setup
-            </button>
+            <div className="og-connect-setup-secondary">
+              <button type="button" onClick={() => invoke(() => view.refresh())}>
+                Check status
+              </button>
+              <button type="button" onClick={() => invoke(() => view.cancel(crypto.randomUUID()))}>
+                Cancel setup
+              </button>
+            </div>
           </fieldset>
         </form>
       )}

package/src/connect.ts

@@ -1,7 +1,13 @@
 // Optional, unstyled React adapter over the shared headless controller.
 // The host owns controller lifetime; unmounting one observer does not cancel an
 // attempt another observer is displaying or a durable backend operation.
-import { useMemo, useSyncExternalStore } from "react";
+export { useConnect } from "./hooks/use-connect";
+export {
+  CapabilityCatalogRow,
+  CapabilityCatalogIndicator,
+  type CapabilityCatalogRowProps,
+  type CapabilityCatalogStatus,
+} from "./capability-catalog-row";
 export {
   SkillDiscovery,
   type SkillDiscoveryProps,
@@ -9,11 +15,15 @@ export {
   type SkillDiscoveryItem,
   type SkillDiscoveryPage,
 } from "./skill-discovery";
-import type { ConnectController } from "@opengeni/connect";
 export { ConnectSetup, type ConnectSetupProps } from "./connect-setup";
 export { ConnectChooser, type ConnectChooserProps } from "./connect-chooser";
 export { ConnectAccounts, type ConnectAccountsProps } from "./connect-accounts";
 export { ConnectPanel, type ConnectPanelProps } from "./connect-panel";
+export { ConnectionDiscovery, type ConnectionDiscoveryProps } from "./connection-discovery";
+export {
+  McpConnectionCard,
+  type McpConnectionCardProps,
+} from "./components/session-mcp-capability-card";
 export { DeviceAuthorization, type DeviceAuthorizationProps } from "./device-authorization";
 export {
   IdentityLinkConsent,
@@ -34,26 +44,6 @@ export type {
   ConnectTransport,
 } from "@opengeni/connect";
 
-export function useConnect(controller: ConnectController) {
-  const snapshot = useSyncExternalStore(
-    controller.subscribe,
-    controller.getSnapshot,
-    controller.getSnapshot,
-  );
-  const actions = useMemo(
-    () => ({
-      begin: controller.begin.bind(controller),
-      recover: controller.recover.bind(controller),
-      refresh: controller.refresh.bind(controller),
-      waitForAction: controller.waitForAction.bind(controller),
-      advance: controller.advance.bind(controller),
-      cancel: controller.cancel.bind(controller),
-    }),
-    [controller],
-  );
-  return useMemo(() => ({ ...snapshot, ...actions }), [snapshot, actions]);
-}
-
 export {
   ConnectionCatalog,
   ConnectionServiceRow,
@@ -65,5 +55,6 @@ export {
 export { ConnectionInstalled, type ConnectionInstalledItem } from "./connection-installed";
 export { ConnectionTypePicker, type ConnectionType } from "./connection-type-picker";
 export { ConnectionLogo } from "./connection-logo";
+export { capabilityLogoFallback } from "./capability-logo-fallback";
 export { PluginDiscovery, type PluginDiscoveryProps } from "./plugin-discovery";
 export { PluginDetails } from "./plugin-details";