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

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>
   );
 }

package/src/connect-setup.tsx

@@ -38,9 +38,11 @@ export type ConnectSetupProps = {
   /** 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,7 +57,13 @@ export function ConnectSetup(props: ConnectSetupProps) {
   return <ScopedSetup key={generation} {...props} />;
 }
 
-function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }: ConnectSetupProps) {
+function ScopedSetup({
+  controller,
+  onAuthorize,
+  onBrowseResources,
+  className,
+  authorizeLabel = "Authorize connection",
+}: ConnectSetupProps) {
   const view = useConnect(controller);
   const [localError, setLocalError] = useState(false);
   const invoke = (operation: () => unknown | Promise<unknown>) => {
@@ -69,7 +77,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>
     );
@@ -115,9 +126,24 @@ 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}
+    >
+      <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">
@@ -129,10 +155,15 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
       {!terminal && (
         <form key={`${attempt.id}:${attempt.revision}`} onSubmit={submit} autoComplete="off">
           <fieldset disabled={view.busy}>
-            <legend>Connection details</legend>
+            {["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
@@ -218,6 +249,7 @@ 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"}
@@ -226,9 +258,10 @@ function ScopedSetup({ controller, onAuthorize, onBrowseResources, className }:
             {action.type === "authorize" && (
               <button
                 type="button"
+                className="og-connect-setup-primary"
                 onClick={() => invoke(() => onAuthorize(structuredClone(attempt)))}
               >
-                Authorize connection
+                {authorizeLabel}
               </button>
             )}
             {action.type === "wait" && (
@@ -246,12 +279,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

@@ -2,6 +2,12 @@
 // 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 {
+  CapabilityCatalogRow,
+  CapabilityCatalogIndicator,
+  type CapabilityCatalogRowProps,
+  type CapabilityCatalogStatus,
+} from "./capability-catalog-row";
 export {
   SkillDiscovery,
   type SkillDiscoveryProps,

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-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,13 +1,15 @@
-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,
 }: {
   src: string | null;
   name: string;
   size?: number;
+  fallback?: ReactNode;
 }) {
   const [failedSrc, setFailedSrc] = useState<string | null>(null);
   return (
@@ -15,14 +17,16 @@ export function ConnectionLogo({
       {src && src !== failedSrc ? (
         <img src={src} alt="" loading="lazy" decoding="async" onError={() => setFailedSrc(src)} />
       ) : (
-        <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/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;
+    },
+  };
+}

package/src/hooks/use-session-events.ts

@@ -140,6 +140,7 @@ export function useSessionEvents(
   const [eventWindow, setEventWindow] = useState<BrowserSessionEventWindow>(EMPTY_EVENT_WINDOW);
   const [connectionState, setConnectionState] = useState<SessionEventsConnectionState>("idle");
   const [error, setError] = useState<Error | null>(null);
+  const [newerError, setNewerError] = useState<Error | null>(null);
   const [hasOlder, setHasOlder] = useState(false);
   const [hasNewer, setHasNewer] = useState(false);
   const [sessionStatusProjection, setSessionStatusProjection] = useState<SessionStatus | null>(
@@ -186,6 +187,7 @@ export function useSessionEvents(
   // Navigation belongs to the session/client lifetime, not the transport.
   useEffect(() => {
     navigationGenerationRef.current += 1;
+    setNewerError(null);
     loadingOlderRef.current = false;
     loadingNewerRef.current = false;
     loadingOldestRef.current = false;
@@ -691,6 +693,7 @@ export function useSessionEvents(
       initialWindowLoadedRef.current = true;
       viewModeRef.current = "history";
       loadingOldestRef.current = false;
+      setNewerError(null);
       startTransition(() => {
         if (status !== undefined) {
           setSessionStatusProjection(status);
@@ -736,6 +739,7 @@ export function useSessionEvents(
         return false;
       }
       if (window.events.length === 0) {
+        setNewerError(null);
         hasNewerRef.current = false;
         setHasNewer(false);
         // Caught up with durable history — resume the live tip stream.
@@ -788,6 +792,7 @@ export function useSessionEvents(
         resumeLive = true;
       }
       loadingNewerRef.current = false;
+      setNewerError(null);
       startTransition(() => {
         if (status !== undefined) {
           setSessionStatusProjection(status);
@@ -803,6 +808,16 @@ export function useSessionEvents(
       });
       published = true;
       return newer;
+    } catch (reason) {
+      // A settled request from an old navigation lifetime is not a failure of
+      // the current session. Preserve current loading/error state as well.
+      if (navigationGenerationRef.current !== generation) {
+        return false;
+      }
+      setNewerError(reason instanceof Error ? reason : new Error(String(reason)));
+      // Keep authorization and integrity failures actionable for callers;
+      // timeline-owned invocations attach their own explicit recovery UI.
+      throw reason;
     } finally {
       if (!published && navigationGenerationRef.current === generation) {
         loadingNewerRef.current = false;
@@ -817,6 +832,7 @@ export function useSessionEvents(
     }
     loadingLatestRef.current = true;
     setLoadingLatest(true);
+    setNewerError(null);
     let published = false;
     try {
       streamAbortRef.current?.abort();
@@ -851,7 +867,13 @@ export function useSessionEvents(
 
   const identityMatches = stateStreamKey === streamKey;
   const visibleEvents = identityMatches ? eventWindow.events : EMPTY_EVENTS;
-  const timeline = useMemo(() => buildTimeline(visibleEvents), [visibleEvents]);
+  const timeline = useMemo(
+    () =>
+      buildTimeline(visibleEvents, {
+        partialStart: hasOlder || eventWindow.truncated || after > 0,
+      }),
+    [visibleEvents, hasOlder, eventWindow.truncated, after],
+  );
 
   return {
     events: visibleEvents,
@@ -873,7 +895,7 @@ export function useSessionEvents(
     loadOldest,
     loadingLatest: !identityMatches ? false : loadingLatest,
     jumpToLatest,
-    error: identityMatches ? error : null,
+    error: identityMatches ? (newerError ?? error) : null,
   };
 }
 

package/src/model-policy.ts

@@ -274,9 +274,11 @@ export function findPickerRow<TCatalog extends ClientModel>(
 
 export function groupPickerRowsByBillingClass(
   rows: PickerModelRow[],
+  options?: { codexOnly?: boolean },
 ): Array<{ billingClass: PickerBillingClass; label: string; rows: PickerModelRow[] }>;
 export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
+  options?: { codexOnly?: boolean },
 ): Array<{
   billingClass: PickerBillingClass;
   label: string;
@@ -284,6 +286,7 @@ export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
 }>;
 export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
   rows: PickerModelRow<TCatalog>[],
+  options?: { codexOnly?: boolean },
 ): Array<{
   billingClass: PickerBillingClass;
   label: string;
@@ -307,5 +310,23 @@ export function groupPickerRowsByBillingClass<TCatalog extends ClientModel>(
       rows: [row],
     });
   }
+  const codexIndex = groups.findIndex((group) => group.billingClass === "codex_subscription");
+  const codex = groups[codexIndex];
+  const selectableOpenGeni = groups
+    .find((group) => group.billingClass === "opengeni_credits")
+    ?.rows.filter((row) => row.selectable);
+  // Presentation only: never change the catalog/default model ordering or selection.
+  const onlyFreeOpenGeni =
+    selectableOpenGeni !== undefined &&
+    selectableOpenGeni.length > 0 &&
+    selectableOpenGeni.every((row) => row.catalog.cost === "free");
+  if (
+    codex &&
+    codex.rows.some((row) => row.selectable) &&
+    (options?.codexOnly || onlyFreeOpenGeni)
+  ) {
+    groups.splice(codexIndex, 1);
+    groups.unshift(codex);
+  }
   return groups;
 }

package/src/plugin-details.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { pluginMcpUnavailableReason, type PluginDiscoveryItem } from "@opengeni/sdk";
+import { BoxesIcon } from "lucide-react";
 import { Markdown } from "./components/markdown";
+import { ConnectionLogo } from "./connection-logo";
 
 const componentLabels: Record<string, string> = {
   skills: "Skills",
@@ -38,9 +40,8 @@ export function PluginDetails({
   const installableCount =
     (item.skills?.length ?? 0) + (item.mcpServers?.filter(supported).length ?? 0);
   const exceedsInstallLimit = installableCount > 64;
-  const installable = installableCount > 0 && !exceedsInstallLimit;
+  const installable = !contentsUnknown && installableCount > 0 && !exceedsInstallLimit;
   const [expanded, setExpanded] = useState(false);
-  const [logoFailed, setLogoFailed] = useState(false);
   const description = item.longDescription || item.description;
   const lengthy = description.length > 700;
   const registryLabel =
@@ -52,9 +53,11 @@ export function PluginDetails({
   return (
     <article className="og-plugin-details">
       <header className="og-plugin-details-header">
-        {item.logoUrl && !logoFailed ? (
-          <img src={item.logoUrl} alt="" onError={() => setLogoFailed(true)} />
-        ) : null}
+        <ConnectionLogo
+          src={item.logoUrl}
+          name={item.displayName}
+          fallback={<BoxesIcon aria-hidden="true" />}
+        />
         <div>
           <h2>{item.displayName.replace(/-/g, " ")}</h2>
           {item.author?.name ? <p>By {item.author.name}</p> : null}