@opengeni/react 6.1.0 → 7.0.0

package/src/connection-assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.ico" {
+  const source: string;
+  export default source;
+}

package/src/connection-catalog.tsx

@@ -1,4 +1,9 @@
 import type { ReactNode } from "react";
+import {
+  CapabilityCatalogIndicator,
+  CapabilityCatalogRow,
+  type CapabilityCatalogStatus,
+} from "./capability-catalog-row";
 
 /** Status comes from the host/controller, never inferred from a display label. */
 export type ConnectionCatalogOption = {
@@ -7,6 +12,8 @@ export type ConnectionCatalogOption = {
   description?: string | undefined;
   status: string;
   connected: boolean;
+  /** Explicit health/availability. Omit to retain visible legacy status text. */
+  state?: CapabilityCatalogStatus;
   onOpen: () => void;
   action?: ReactNode;
 };
@@ -20,31 +27,25 @@ export type ConnectionCatalogProps = {
   services: ConnectionCatalogService[];
   query?: string;
   columns?: 1 | 2;
+  resultLimit?: number;
+  onShowMore?: () => void;
   /** Group capabilities by service, or show every capability independently. */
   grouped?: boolean;
   className?: string;
   emptyMessage?: string;
 };
 
-function ConnectionDetailsIndicator() {
-  return (
-    <span aria-hidden className="og-connection-group-chevron">
-      ›
-    </span>
-  );
-}
-
 export function ConnectionOptionRow({ option }: { option: ConnectionCatalogOption }) {
   return (
     <div className="og-connection-catalog-action-row og-connection-option">
-      <button type="button" className="og-connection-catalog-row" onClick={option.onOpen}>
-        <span className="og-connection-catalog-copy">
-          <strong>{option.name}</strong>
-          <span>{option.description}</span>
-        </span>
-        <span className="og-connection-catalog-status">{option.status}</span>
-        {!option.action ? <ConnectionDetailsIndicator /> : null}
-      </button>
+      <CapabilityCatalogRow
+        name={option.name}
+        description={option.description}
+        status={option.state ?? (option.connected ? "added" : "available")}
+        statusLabel={option.status}
+        showStatusLabel={option.state === undefined}
+        onOpen={option.onOpen}
+      />
       {option.action ? <span className="og-connection-option-action">{option.action}</span> : null}
     </div>
   );
@@ -53,10 +54,20 @@ export function ConnectionOptionRow({ option }: { option: ConnectionCatalogOptio
 export function ConnectionServiceRow({ service }: { service: ConnectionCatalogService }) {
   if (!service.options.length) return null;
   const connected = service.options.filter((option) => option.connected).length;
+  const attention = service.options.find(
+    (option) => option.state === "attention" || option.state === "unavailable",
+  );
+  const groupState =
+    attention?.state ??
+    (service.options.some((option) => option.state === "loading")
+      ? "loading"
+      : connected === service.options.length
+        ? "added"
+        : "available");
   const identity = (
     <>
-      <span className="og-connection-catalog-logo">{service.logo}</span>
-      <span className="og-connection-catalog-copy">
+      <span className="og-capability-catalog-icon">{service.logo}</span>
+      <span className="og-capability-catalog-copy">
         <strong>{service.name}</strong>
         <span>
           {service.options.length === 1
@@ -64,28 +75,28 @@ export function ConnectionServiceRow({ service }: { service: ConnectionCatalogSe
             : service.options.map((option) => option.name).join(" · ")}
         </span>
       </span>
-      <span className="og-connection-catalog-status">
-        {service.options.length === 1
-          ? service.options[0]?.status
-          : `${connected} of ${service.options.length} connected`}
-      </span>
+      <CapabilityCatalogIndicator
+        status={groupState}
+        label={attention?.status ?? `${connected} of ${service.options.length} added`}
+      />
     </>
   );
   return service.options.length === 1 ? (
     <div className="og-connection-catalog-action-row">
-      <button
-        type="button"
-        className="og-connection-catalog-row"
-        onClick={service.options[0]!.onOpen}
-      >
-        {identity}
-        {!service.options[0]?.action ? <ConnectionDetailsIndicator /> : null}
-      </button>
+      <CapabilityCatalogRow
+        name={service.name}
+        description={service.options[0]!.description}
+        icon={service.logo}
+        status={service.options[0]!.state ?? (connected ? "added" : "available")}
+        statusLabel={service.options[0]!.status}
+        showStatusLabel={service.options[0]!.state === undefined}
+        onOpen={service.options[0]!.onOpen}
+      />
       {service.options[0]?.action}
     </div>
   ) : (
     <details className="og-connection-catalog-service">
-      <summary className="og-connection-catalog-row">
+      <summary className="og-capability-catalog-row">
         {identity}
         <span aria-hidden className="og-connection-group-chevron">
           ⌄
@@ -105,6 +116,8 @@ export function ConnectionCatalog({
   query = "",
   columns = 1,
   grouped = true,
+  resultLimit,
+  onShowMore,
   className = "",
   emptyMessage = "No connections match your search.",
 }: ConnectionCatalogProps) {
@@ -129,12 +142,21 @@ export function ConnectionCatalog({
       .includes(search),
   );
   return (
-    <div className={`og-connection-catalog ${className}`} data-columns={columns}>
-      {visible.length ? (
-        visible.map((service) => <ConnectionServiceRow key={service.id} service={service} />)
-      ) : (
-        <p role="status">{emptyMessage}</p>
-      )}
-    </div>
+    <>
+      <div className={`og-connection-catalog ${className}`} data-columns={columns}>
+        {visible.length ? (
+          visible
+            .slice(0, resultLimit)
+            .map((service) => <ConnectionServiceRow key={service.id} service={service} />)
+        ) : (
+          <p role="status">{emptyMessage}</p>
+        )}
+      </div>
+      {resultLimit && visible.length > resultLimit ? (
+        <button className="og-catalog-more" type="button" onClick={onShowMore}>
+          View all connections
+        </button>
+      ) : null}
+    </>
   );
 }

package/src/connection-discovery.tsx

@@ -0,0 +1,235 @@
+import type { ConnectAccount, ConnectController, ConnectProvider } from "@opengeni/connect";
+import { ConnectChooser } from "./connect-chooser";
+import {
+  capabilityConnectProviderId,
+  connectionServicePresentation,
+  isServiceConnectProvider,
+} from "./connection-service-presentation";
+import type { CapabilityCatalogItem, ConnectionMetadata, OpenGeniClient } from "@opengeni/sdk";
+import { useEffect, useRef, useState } from "react";
+import { CapabilityCatalogRow } from "./capability-catalog-row";
+import { ConnectionLogo } from "./connection-logo";
+import { ConnectionSkeleton } from "./connection-skeleton";
+import { ConnectionServiceLogo } from "./connection-service-logo";
+import { McpConnectionCard } from "./components/session-mcp-capability-card";
+import { mcpConnectionDiscoveryState } from "./mcp-connection-status";
+
+export type ConnectionDiscoveryProps = {
+  client: OpenGeniClient;
+  controller?: ConnectController | undefined;
+  workspaceId: string;
+  returnUrl: string;
+  onConfigured?: (() => void | Promise<void>) | undefined;
+};
+
+/** Service discovery over the native catalogue. No host-owned OAuth state or
+ * assumed account selection: details resolve current authority before acting. */
+export function ConnectionDiscovery(props: ConnectionDiscoveryProps) {
+  const [scope, setScope] = useState({ client: props.client, controller: props.controller });
+  const [generation, setGeneration] = useState(0);
+  if (scope.client !== props.client || scope.controller !== props.controller) {
+    setScope({ client: props.client, controller: props.controller });
+    setGeneration(generation + 1);
+  }
+  return <ScopedDiscovery key={`${generation}:${props.workspaceId}`} {...props} />;
+}
+
+function ScopedDiscovery({
+  client,
+  controller,
+  workspaceId,
+  returnUrl,
+  onConfigured,
+}: ConnectionDiscoveryProps) {
+  const [providers, setProviders] = useState<ConnectProvider[] | null>(null);
+  const [accounts, setAccounts] = useState<ConnectAccount[]>([]);
+  const [selectedProvider, setSelectedProvider] = useState<ConnectProvider | null>(null);
+  const [providerFailed, setProviderFailed] = useState(false);
+  const [items, setItems] = useState<CapabilityCatalogItem[] | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [connections, setConnections] = useState<ConnectionMetadata[]>([]);
+  const [reload, setReload] = useState(0);
+  const [query, setQuery] = useState("");
+  const [limit, setLimit] = useState(12);
+  const [selected, setSelected] = useState<CapabilityCatalogItem | null>(null);
+  const opener = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    const abort = new AbortController();
+    // Capture each read independently: even a synchronously throwing transport
+    // is captured by Promise.all, and cannot strand another read's rejection.
+    const read = async <T,>(operation: () => Promise<T>): Promise<T> => {
+      abort.signal.throwIfAborted();
+      return operation();
+    };
+    setFailed(false);
+    setSelectedProvider(null);
+    setProviders(null);
+    setItems(null);
+    setProviderFailed(false);
+    if (controller)
+      void Promise.all([
+        read(() => controller.transport.catalog(workspaceId, { signal: abort.signal })),
+        read(() => controller.transport.accounts(workspaceId, { signal: abort.signal })),
+      ])
+        .then(([catalog, inventory]) => {
+          if (!abort.signal.aborted) {
+            setProviders(catalog.filter(isServiceConnectProvider));
+            setAccounts(inventory);
+          }
+        })
+        .catch(() => {
+          if (!abort.signal.aborted) setProviderFailed(true);
+        });
+    void Promise.all([
+      read(() => client.listCapabilities(workspaceId)),
+      read(() => client.listConnections(workspaceId)),
+    ])
+      .then(([catalog, inventory]) => {
+        if (!abort.signal.aborted) {
+          setConnections(inventory);
+          setItems(
+            catalog.items.filter(
+              (item) =>
+                item.kind === "mcp" &&
+                item.authKind === "oauth2" &&
+                Boolean(item.mcpUrl ?? item.endpointUrl),
+            ),
+          );
+        }
+      })
+      .catch(() => {
+        if (!abort.signal.aborted) setFailed(true);
+      });
+    return () => {
+      abort.abort();
+    };
+  }, [client, controller, workspaceId, reload]);
+  const matches =
+    items?.filter((item) =>
+      `${item.name} ${item.description ?? ""} ${item.providerDomain ?? ""}`
+        .toLocaleLowerCase()
+        .includes(query.trim().toLocaleLowerCase()),
+    ) ?? [];
+  const providerMatches = (providers ?? []).filter(
+    (provider) =>
+      !items?.some((item) => capabilityConnectProviderId(item) === provider.id) &&
+      provider.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()),
+  );
+  const loading = (!items && !failed) || Boolean(controller && !providers && !providerFailed);
+  if (selectedProvider && controller)
+    return (
+      <section aria-label={`Connect ${selectedProvider.label}`}>
+        <button type="button" onClick={() => setSelectedProvider(null)}>
+          Back to connections
+        </button>
+        <ConnectionLogo
+          name={selectedProvider.label}
+          src={connectionServicePresentation(selectedProvider).logo}
+        />
+        <ConnectChooser
+          controller={controller}
+          returnUrl={returnUrl}
+          presentation="catalog"
+          providerOnly
+          initialProviderId={selectedProvider.id}
+        />
+      </section>
+    );
+  return (
+    <section className="og-connection-discovery" aria-label="Find a connection">
+      <h3>Add a connection</h3>
+      <label>
+        <span className="og-capability-catalog-sr-only">Search services</span>
+        <input
+          type="search"
+          placeholder="Search services…"
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setLimit(12);
+          }}
+        />
+      </label>
+      {(providerFailed || failed) && (
+        <p role="alert">
+          Some services could not be loaded.{" "}
+          <button type="button" onClick={() => setReload((value) => value + 1)}>
+            Retry
+          </button>
+        </p>
+      )}
+      <div className="og-connection-discovery-results">
+        {providerMatches.map((provider) => {
+          const connected = accounts.some(
+            (account) => account.providerId === provider.id && account.status === "connected",
+          );
+          return (
+            <CapabilityCatalogRow
+              key={provider.id}
+              name={provider.label}
+              icon={
+                <ConnectionLogo
+                  name={provider.label}
+                  src={connectionServicePresentation(provider).logo}
+                />
+              }
+              status={connected ? "added" : "available"}
+              statusLabel={connected ? "Connected" : "Connect"}
+              showStatusLabel
+              onOpen={() => setSelectedProvider(provider)}
+            />
+          );
+        })}
+        {matches.slice(0, limit).map((item) => {
+          const state = mcpConnectionDiscoveryState(item, connections);
+          return (
+            <CapabilityCatalogRow
+              key={item.id}
+              name={item.name}
+              description={item.description ?? undefined}
+              icon={<ConnectionServiceLogo client={client} item={item} name={item.name} />}
+              status={state.status}
+              statusLabel={state.label}
+              showStatusLabel
+              onOpen={() => {
+                opener.current =
+                  document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                setSelected(item);
+              }}
+            />
+          );
+        })}
+
+        {loading && <ConnectionSkeleton rows={3} label="Loading services" />}
+        {!loading && !failed && !providerFailed && !matches.length && !providerMatches.length && (
+          <p role="status">No services match your search.</p>
+        )}
+        {matches.length > limit && (
+          <button type="button" onClick={() => setLimit((value) => value + 12)}>
+            Show more services
+          </button>
+        )}
+      </div>
+      {selected ? (
+        <McpConnectionCard
+          client={client}
+          workspaceId={workspaceId}
+          capabilityId={selected.id}
+          name={selected.name}
+          returnUrl={returnUrl}
+          dialogOnly
+          onClose={() => {
+            setSelected(null);
+            queueMicrotask(() => {
+              if (opener.current?.isConnected) opener.current.focus();
+            });
+          }}
+          onConfigured={async () => {
+            setReload((value) => value + 1);
+            await onConfigured?.();
+          }}
+        />
+      ) : null}
+    </section>
+  );
+}

package/src/connection-installed.tsx

@@ -6,6 +6,7 @@ export type ConnectionInstalledItem = {
   status: string;
   icon?: ReactNode;
   needsAttention?: boolean;
+  disabled?: boolean;
   onOpen: () => void;
 };
 
@@ -31,6 +32,7 @@ export function ConnectionInstalled({
             key={item.id}
             type="button"
             onClick={item.onOpen}
+            disabled={item.disabled}
             title={item.status}
             aria-label={`${item.name} · ${item.status}`}
           >

package/src/connection-logo.tsx

@@ -1,28 +1,36 @@
-import { useState } from "react";
-/** Brand identifier; failed/missing assets use a stable text fallback. */
+import { useState, type ReactNode } from "react";
+/** Brand identifier; failed/missing assets use the supplied fallback or stable initials. */
 export function ConnectionLogo({
   src,
   name,
   size = 40,
+  fallback,
+  loading = false,
 }: {
   src: string | null;
   name: string;
   size?: number;
+  fallback?: ReactNode;
+  loading?: boolean;
 }) {
   const [failedSrc, setFailedSrc] = useState<string | null>(null);
   return (
     <span className="og-connection-logo" aria-hidden="true" style={{ width: size, height: size }}>
       {src && src !== failedSrc ? (
         <img src={src} alt="" loading="lazy" decoding="async" onError={() => setFailedSrc(src)} />
+      ) : loading ? (
+        <span className="og-connection-skeleton-mark" />
       ) : (
-        <span>
-          {name
-            .split(/\s+/)
-            .map((part) => part[0])
-            .join("")
-            .slice(0, 2)
-            .toUpperCase()}
-        </span>
+        (fallback ?? (
+          <span>
+            {name
+              .split(/\s+/)
+              .map((part) => part[0])
+              .join("")
+              .slice(0, 2)
+              .toUpperCase()}
+          </span>
+        ))
       )}
     </span>
   );

package/src/connection-service-logo.tsx

@@ -0,0 +1,55 @@
+import type { CapabilityCatalogItem, OpenGeniClient } from "@opengeni/sdk";
+import { useEffect, useState } from "react";
+import { ConnectionLogo } from "./connection-logo";
+import { capabilityLogoFallback } from "./capability-logo-fallback";
+
+/** The same passive logo loading path for discovery and connected accounts. */
+export function ConnectionServiceLogo({
+  client,
+  item,
+  name,
+  fallback = null,
+}: {
+  client?: OpenGeniClient | undefined;
+  item?: CapabilityCatalogItem | undefined;
+  name: string;
+  fallback?: string | null;
+}) {
+  const path = item?.logoAssetPath;
+  const [image, setImage] = useState<{
+    client: OpenGeniClient;
+    path: string;
+    url: string | null;
+  } | null>(null);
+  useEffect(() => {
+    if (!client || !path?.startsWith("catalog-assets/")) return;
+    const abort = new AbortController();
+    let url: string | null = null;
+    void client
+      .downloadCatalogAsset(path, { signal: abort.signal })
+      .then((blob) => {
+        if (!abort.signal.aborted && blob.type.startsWith("image/") && blob.size <= 2_000_000)
+          url = URL.createObjectURL(blob);
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (!abort.signal.aborted) setImage({ client, path, url });
+      });
+    return () => {
+      abort.abort();
+      if (url) URL.revokeObjectURL(url);
+    };
+  }, [client, path]);
+  const current = image && image.client === client && image.path === path ? image : null;
+  const loading = Boolean(client && path?.startsWith("catalog-assets/") && !current);
+  return (
+    <ConnectionLogo
+      name={name}
+      loading={loading}
+      src={
+        current?.url ??
+        (loading ? null : ((item ? capabilityLogoFallback(item) : null) ?? fallback))
+      }
+    />
+  );
+}

package/src/connection-service-presentation.ts

@@ -0,0 +1,46 @@
+import type { ConnectAccount, ConnectProvider } from "@opengeni/connect";
+import type { CapabilityCatalogItem } from "@opengeni/sdk";
+import gmailLogo from "./assets/gmail.ico";
+import outlookLogo from "./assets/outlook.ico";
+
+/** Passive service identity only. Never selects an account or grants tool access. */
+const services: Record<string, { name: string; logo: string; mcpUrl?: string }> = {
+  gmail: { name: "Gmail", logo: gmailLogo, mcpUrl: "https://gmailmcp.googleapis.com/mcp/v1" },
+  "microsoft-outlook-mail": { name: "Outlook Mail", logo: outlookLogo },
+  "microsoft-outlook-calendar": { name: "Outlook Calendar", logo: outlookLogo },
+  "microsoft-outlook-contacts": { name: "Outlook Contacts", logo: outlookLogo },
+};
+
+export function connectionServicePresentation(provider: Pick<ConnectProvider, "id" | "label">) {
+  return (
+    (Object.hasOwn(services, provider.id) ? services[provider.id] : undefined) ?? {
+      name: provider.label,
+      logo: null,
+    }
+  );
+}
+
+export function capabilityConnectProviderId(
+  item: Partial<Pick<CapabilityCatalogItem, "mcpUrl">>,
+): string | undefined {
+  return Object.entries(services).find(
+    ([, service]) => service.mcpUrl && service.mcpUrl === item.mcpUrl,
+  )?.[0];
+}
+
+export function accountServiceCapability(account: ConnectAccount, items: CapabilityCatalogItem[]) {
+  const exact = items.filter((item) => item.connectionRef?.connectionId === account.id);
+  if (exact.length === 1) return exact[0];
+  // Presentation may use the service definition even when a personal credential
+  // has no workspace installation reference. The account id remains unchanged.
+  return items.find((item) => capabilityConnectProviderId(item) === account.providerId);
+}
+
+export function isServiceConnectProvider(provider: ConnectProvider): boolean {
+  return (
+    provider.readiness === "available" &&
+    provider.ownership.length > 0 &&
+    provider.family !== "mcp" &&
+    !provider.setup.some((kind) => ["installation", "openapi", "graphql"].includes(kind))
+  );
+}

package/src/connection-skeleton.tsx

@@ -0,0 +1,16 @@
+/** Reserve the same row geometry as the loaded connection list. */
+export function ConnectionSkeleton({ rows = 1, label }: { rows?: number; label: string }) {
+  return (
+    <div role="status" aria-label={label} className="og-connection-skeleton">
+      {Array.from({ length: rows }, (_, index) => (
+        <div className="og-connection-skeleton-row" aria-hidden="true" key={index}>
+          <span className="og-connection-skeleton-mark" />
+          <span className="og-connection-skeleton-copy">
+            <span />
+            <span />
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/conversation-timeline.ts

@@ -43,6 +43,7 @@ export function conversationTimeline(
   const optimistic: UserMessageItem[] = pending
     .filter(
       (message) =>
+        (message.destination === "chat" || message.state === "failed") &&
         !keys.has(`user-message:${message.clientEventId}`) &&
         !queue.queue.some((turn) => turn.id === message.turnId),
     )

package/src/discovery-cache.ts

@@ -0,0 +1,42 @@
+/** Short-lived presentation data only. Never cache installation or authorization state. */
+export function createDiscoveryCache<T>(ttlMs = 60_000, capacity = 64) {
+  const clients = new WeakMap<
+    object,
+    Map<string, { expires: number; value: T | undefined; pending: Promise<T> }>
+  >();
+  return {
+    peek(client: object, key: string): T | undefined {
+      const entry = clients.get(client)?.get(key);
+      return entry && entry.expires > Date.now() ? entry.value : undefined;
+    },
+    read(client: object, key: string, fetch: () => Promise<T>): Promise<T> {
+      let entries = clients.get(client);
+      if (!entries) {
+        entries = new Map();
+        clients.set(client, entries);
+      }
+      const existing = entries.get(key);
+      if (existing && existing.expires > Date.now()) return existing.pending;
+      entries.delete(key);
+      while (entries.size >= capacity) entries.delete(entries.keys().next().value!);
+      const entry = {
+        expires: Date.now() + ttlMs,
+        value: undefined as T | undefined,
+        pending: Promise.resolve().then(fetch),
+      };
+      entries.set(key, entry);
+      entry.pending = entry.pending.then(
+        (value) => {
+          entry.value = value;
+          entry.expires = Date.now() + ttlMs;
+          return value;
+        },
+        (error) => {
+          if (entries.get(key) === entry) entries.delete(key);
+          throw error;
+        },
+      );
+      return entry.pending;
+    },
+  };
+}