@opengeni/react 5.0.5-canary.0 → 5.0.5-canary.1

package/src/connect-chooser.tsx

@@ -1,3 +1,4 @@
+import { ConnectionCatalog } from "./connection-catalog";
 import { useEffect, useState, type FormEvent } from "react";
 import type { ConnectController, ConnectProvider } from "@opengeni/connect";
 import { useConnect } from "./connect";
@@ -7,6 +8,7 @@ export type ConnectChooserProps = {
   /** Exact host return string; no completion parameters are added. */
   returnUrl: string;
   className?: string;
+  presentation?: "select" | "catalog";
 };
 
 /** Catalog readiness is supplied by the authenticated backend, never inferred
@@ -24,11 +26,17 @@ export function ConnectChooser(props: ConnectChooserProps) {
   return <ScopedChooser key={generation} {...props} />;
 }
 
-function ScopedChooser({ controller, returnUrl, className }: ConnectChooserProps) {
+function ScopedChooser({
+  controller,
+  returnUrl,
+  className,
+  presentation = "select",
+}: ConnectChooserProps) {
   const view = useConnect(controller);
   const [catalog, setCatalog] = useState<ConnectProvider[] | null>(null);
   const [failed, setFailed] = useState(false);
   const [load, setLoad] = useState(0);
+  const [query, setQuery] = useState("");
   const [providerId, setProviderId] = useState("");
   const [ownership, setOwnership] = useState("");
   useEffect(() => {
@@ -85,7 +93,52 @@ function ScopedChooser({ controller, returnUrl, className }: ConnectChooserProps
         <form onSubmit={submit}>
           <fieldset disabled={view.busy}>
             <legend>Provider and ownership</legend>
-            <label>
+            {presentation === "catalog" && !provider ? (
+              <>
+                <label>
+                  Search connections
+                  <input
+                    type="search"
+                    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]! : "");
+                          }
+                        },
+                      },
+                    ],
+                  }))}
+                />
+              </>
+            ) : null}
+            {presentation === "catalog" && provider ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setProviderId("");
+                  setOwnership("");
+                }}
+              >
+                Back to connections
+              </button>
+            ) : null}
+            <label hidden={presentation === "catalog"}>
               Provider
               <select
                 required
@@ -110,27 +163,34 @@ function ScopedChooser({ controller, returnUrl, className }: ConnectChooserProps
               </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"}
+              <>
+                <strong>{presentation === "catalog" ? provider.label : null}</strong>
+                <label>
+                  Ownership
+                  <select
+                    required
+                    value={ownership}
+                    onChange={(event) => setOwnership(event.target.value)}
+                  >
+                    <option value="" disabled>
+                      Choose ownership
                     </option>
-                  ))}
-                </select>
-              </label>
+                    {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}>
+            <button
+              hidden={presentation === "catalog" && !provider}
+              type="submit"
+              disabled={!canBegin}
+            >
               Start setup
             </button>
           </fieldset>

package/src/connect-panel.tsx

@@ -6,6 +6,7 @@ export type ConnectPanelProps = ConnectSetupProps & {
   returnUrl: string;
   title?: string;
   showAccounts?: boolean;
+  presentation?: "select" | "catalog";
 };
 
 /** Optional composition over the same unstyled surfaces. Import
@@ -15,13 +16,18 @@ export function ConnectPanel({
   returnUrl,
   title = "Connections",
   showAccounts = true,
+  presentation = "select",
   className,
   ...setup
 }: ConnectPanelProps) {
   return (
     <div className={["og-connect", className].filter(Boolean).join(" ")}>
       <h2>{title}</h2>
-      <ConnectChooser controller={setup.controller} returnUrl={returnUrl} />
+      <ConnectChooser
+        presentation={presentation}
+        controller={setup.controller}
+        returnUrl={returnUrl}
+      />
       <ConnectSetup {...setup} />
       {showAccounts && <ConnectAccounts controller={setup.controller} returnUrl={returnUrl} />}
     </div>

package/src/connect.ts

@@ -2,6 +2,13 @@
 // 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 {
+  SkillDiscovery,
+  type SkillDiscoveryProps,
+  type SkillDiscoveryClient,
+  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";
@@ -46,3 +53,17 @@ export function useConnect(controller: ConnectController) {
   );
   return useMemo(() => ({ ...snapshot, ...actions }), [snapshot, actions]);
 }
+
+export {
+  ConnectionCatalog,
+  ConnectionServiceRow,
+  ConnectionOptionRow,
+  type ConnectionCatalogProps,
+  type ConnectionCatalogService,
+  type ConnectionCatalogOption,
+} from "./connection-catalog";
+export { ConnectionInstalled, type ConnectionInstalledItem } from "./connection-installed";
+export { ConnectionTypePicker, type ConnectionType } from "./connection-type-picker";
+export { ConnectionLogo } from "./connection-logo";
+export { PluginDiscovery, type PluginDiscoveryProps } from "./plugin-discovery";
+export { PluginDetails } from "./plugin-details";

package/src/connection-catalog.tsx

@@ -0,0 +1,153 @@
+import type { ReactNode } from "react";
+
+/** Status comes from the host/controller, never inferred from a display label. */
+export type ConnectionCatalogOption = {
+  id: string;
+  name: string;
+  description?: string | undefined;
+  status: string;
+  connected: boolean;
+  onOpen: () => void;
+  action?: ReactNode;
+};
+export type ConnectionCatalogService = {
+  id: string;
+  name: string;
+  logo?: ReactNode;
+  options: ConnectionCatalogOption[];
+};
+export type ConnectionCatalogProps = {
+  services: ConnectionCatalogService[];
+  query?: string;
+  columns?: 1 | 2;
+  /** Group capabilities by service, or show every capability independently. */
+  grouped?: boolean;
+  className?: string;
+  emptyMessage?: string;
+};
+
+function ConnectionDetailsAction({
+  option,
+  name = option.name,
+}: {
+  option: ConnectionCatalogOption;
+  name?: string;
+}) {
+  return (
+    <button
+      type="button"
+      className="og-connection-details-action"
+      aria-label={`View ${name} details`}
+      onClick={option.onOpen}
+    >
+      <span aria-hidden>{option.connected ? "›" : "+"}</span>
+    </button>
+  );
+}
+
+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>
+      </button>
+      <span className="og-connection-option-action">
+        {option.action ?? <ConnectionDetailsAction option={option} />}
+      </span>
+    </div>
+  );
+}
+
+export function ConnectionServiceRow({ service }: { service: ConnectionCatalogService }) {
+  if (!service.options.length) return null;
+  const connected = service.options.filter((option) => option.connected).length;
+  const identity = (
+    <>
+      <span className="og-connection-catalog-logo">{service.logo}</span>
+      <span className="og-connection-catalog-copy">
+        <strong>{service.name}</strong>
+        <span>
+          {service.options.length === 1
+            ? service.options[0]?.description
+            : 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>
+    </>
+  );
+  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}
+      </button>
+      {service.options[0]?.action ?? (
+        <ConnectionDetailsAction option={service.options[0]!} name={service.name} />
+      )}
+    </div>
+  ) : (
+    <details className="og-connection-catalog-service">
+      <summary className="og-connection-catalog-row">
+        {identity}
+        <span aria-hidden className="og-connection-group-chevron">
+          ⌄
+        </span>
+      </summary>
+      <div className="og-connection-catalog-options">
+        {service.options.map((option) => (
+          <ConnectionOptionRow key={option.id} option={option} />
+        ))}
+      </div>
+    </details>
+  );
+}
+
+export function ConnectionCatalog({
+  services,
+  query = "",
+  columns = 1,
+  grouped = true,
+  className = "",
+  emptyMessage = "No connections match your search.",
+}: ConnectionCatalogProps) {
+  const search = query.trim().toLowerCase();
+  const entries = grouped
+    ? services
+    : services.flatMap((service) =>
+        service.options.map((option) => ({
+          ...service,
+          id: `${service.id}/${option.id}`,
+          name:
+            service.options.length > 1 && option.name !== service.name
+              ? `${service.name} · ${option.name}`
+              : service.name,
+          options: [option],
+        })),
+      );
+  const visible = entries.filter((service) =>
+    [service.name, ...service.options.flatMap((option) => [option.name, option.description ?? ""])]
+      .join(" ")
+      .toLowerCase()
+      .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>
+  );
+}

package/src/connection-installed.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+
+export type ConnectionInstalledItem = {
+  id: string;
+  name: string;
+  status: string;
+  icon?: ReactNode;
+  needsAttention?: boolean;
+  onOpen: () => void;
+};
+
+/** Compact account/service shortcuts. The host supplies authoritative status. */
+export function ConnectionInstalled({
+  items,
+  title = "Connected",
+  className = "",
+}: {
+  items: ConnectionInstalledItem[];
+  title?: string;
+  className?: string;
+}) {
+  if (!items.length) return null;
+  return (
+    <section aria-label={title} className={`og-connection-installed ${className}`}>
+      <h2>
+        {title} <span>{items.length}</span>
+      </h2>
+      <div>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            onClick={item.onOpen}
+            title={item.status}
+            aria-label={`${item.name} · ${item.status}`}
+          >
+            {item.icon}
+            <span>{item.name}</span>
+            {item.needsAttention ? <span aria-label="Needs attention">!</span> : null}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/connection-logo.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+/** Brand identifier; failed/missing assets use a stable text fallback. */
+export function ConnectionLogo({
+  src,
+  name,
+  size = 40,
+}: {
+  src: string | null;
+  name: string;
+  size?: number;
+}) {
+  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)} />
+      ) : (
+        <span>
+          {name
+            .split(/\s+/)
+            .map((part) => part[0])
+            .join("")
+            .slice(0, 2)
+            .toUpperCase()}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/connection-type-picker.tsx

@@ -0,0 +1,36 @@
+import { useId } from "react";
+export type ConnectionType = "mcp" | "openapi" | "graphql";
+export function ConnectionTypePicker({
+  value,
+  onChange,
+  disabled = false,
+}: {
+  value: ConnectionType;
+  onChange: (value: ConnectionType) => void;
+  disabled?: boolean;
+}) {
+  const name = useId();
+  return (
+    <fieldset className="og-connection-type-picker" disabled={disabled}>
+      <legend>Connection type</legend>
+      {(
+        [
+          ["mcp", "MCP server"],
+          ["openapi", "OpenAPI"],
+          ["graphql", "GraphQL"],
+        ] as const
+      ).map(([type, label]) => (
+        <label key={type} data-selected={value === type}>
+          <input
+            type="radio"
+            name={name}
+            value={type}
+            checked={value === type}
+            onChange={() => onChange(type)}
+          />
+          {label}
+        </label>
+      ))}
+    </fieldset>
+  );
+}

package/src/hooks/use-codex-accounts.ts

@@ -16,6 +16,7 @@ import {
 /** Events that change which Codex account a session runs on (or just ran). */
 export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean {
   return [
+    "codex.credential.selected",
     "codex.account.switched",
     "codex.account.selection.changed",
     "codex.capacity.waiting",

package/src/plugin-details.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { pluginMcpUnavailableReason, type PluginDiscoveryItem } from "@opengeni/sdk";
+import { Markdown } from "./components/markdown";
+
+const componentLabels: Record<string, string> = {
+  skills: "Skills",
+  mcp: "MCP connections",
+  apps: "Hosted apps",
+  hooks: "Hooks",
+  agents: "Agents",
+  commands: "Commands",
+  lsp: "Language servers",
+};
+
+const EMPTY_CONNECTIONS: Record<string, boolean> = {};
+
+/** Embeddable plugin overview. Hosts own the dialog and installation actions. */
+export function PluginDetails({
+  item,
+  onInstall,
+  busy = false,
+  installed = false,
+  error,
+  connections = EMPTY_CONNECTIONS,
+  onConnect,
+}: {
+  item: PluginDiscoveryItem;
+  onInstall?: () => void;
+  busy?: boolean;
+  installed?: boolean;
+  error?: string | null;
+  connections?: Record<string, boolean>;
+  onConnect?: (server: { name: string; endpoint: string | null }) => void;
+}) {
+  const supported = (server: NonNullable<PluginDiscoveryItem["mcpServers"]>[number]) =>
+    pluginMcpUnavailableReason(server) === null;
+  const contentsUnknown = item.skills == null || item.mcpServers == null;
+  const installableCount =
+    (item.skills?.length ?? 0) + (item.mcpServers?.filter(supported).length ?? 0);
+  const exceedsInstallLimit = installableCount > 64;
+  const installable = 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 =
+    item.provider === "openai"
+      ? "OpenAI plugin registry"
+      : item.provider === "anthropic"
+        ? "Anthropic plugin registry"
+        : "Custom source";
+  return (
+    <article className="og-plugin-details">
+      <header className="og-plugin-details-header">
+        {item.logoUrl && !logoFailed ? (
+          <img src={item.logoUrl} alt="" onError={() => setLogoFailed(true)} />
+        ) : null}
+        <div>
+          <h2>{item.displayName.replace(/-/g, " ")}</h2>
+          {item.author?.name ? <p>By {item.author.name}</p> : null}
+        </div>
+      </header>
+      <div className="og-plugin-details-meta">
+        <span>{registryLabel}</span>
+        {item.category ? <span>{item.category}</span> : null}
+        {item.version ? <span>v{item.version}</span> : null}
+      </div>
+      <section className="og-plugin-details-members">
+        <h3>
+          Skills <span>{item.skills?.length ?? "—"}</span>
+        </h3>
+        {item.skills?.length ? (
+          <ul>
+            {item.skills.map((skill) => (
+              <li key={skill.sourceUrl}>
+                <a href={skill.sourceUrl} target="_blank" rel="noopener noreferrer">
+                  <strong>{skill.name}</strong>
+                  <span aria-hidden="true">↗</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p>
+            {item.skills
+              ? "No bundled skills."
+              : "Contents haven’t been indexed for this repository."}
+          </p>
+        )}
+        <h3>
+          MCP servers <span>{item.mcpServers?.length ?? "—"}</span>
+        </h3>
+        {item.mcpServers?.length ? (
+          <ul>
+            {item.mcpServers.map((server) => {
+              const connected = Boolean(server.endpoint && connections[server.endpoint]);
+              // Existing connections remain manageable regardless of the source manifest's setup requirements.
+              const unavailableReason = connected ? null : pluginMcpUnavailableReason(server);
+              return (
+                <li
+                  key={server.name}
+                  className={unavailableReason ? "og-plugin-member-disabled" : undefined}
+                >
+                  <div className="og-plugin-server-heading">
+                    <strong>{server.name}</strong>
+                    {!unavailableReason && onConnect ? (
+                      <button type="button" disabled={busy} onClick={() => onConnect(server)}>
+                        {connected ? "Manage" : "Connect"}
+                      </button>
+                    ) : null}
+                  </div>
+                  <small>
+                    {connected ? "Connected · " : ""}
+                    {unavailableReason ?? server.endpoint}
+                  </small>
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <p>
+            {item.mcpServers ? "No bundled MCP servers." : "Server details haven’t been indexed."}
+          </p>
+        )}
+        {item.components?.some((component) => !["skills", "mcp"].includes(component)) ? (
+          <div className="og-plugin-details-other">
+            Not installed here:{" "}
+            {item.components
+              .filter((component) => !["skills", "mcp"].includes(component))
+              .map((component) => componentLabels[component] ?? component)
+              .join(", ")}
+          </div>
+        ) : null}
+      </section>
+      <section className="og-plugin-details-overview" aria-label="Overview">
+        <div className={lengthy && !expanded ? "og-plugin-details-excerpt" : undefined}>
+          <Markdown>{description}</Markdown>
+        </div>
+        {lengthy ? (
+          <button
+            type="button"
+            className="og-plugin-details-more"
+            aria-expanded={expanded}
+            onClick={() => setExpanded((value) => !value)}
+          >
+            {expanded ? "Show less" : "Read more"}
+          </button>
+        ) : null}
+      </section>
+      <footer>
+        {item.sourceUrl ? (
+          <a href={item.sourceUrl} target="_blank" rel="noopener noreferrer">
+            View repository <span aria-hidden="true">↗</span>
+          </a>
+        ) : null}
+        {onInstall ? (
+          <button
+            className="og-plugin-install"
+            type="button"
+            disabled={!installable || busy || installed}
+            onClick={onInstall}
+          >
+            {installed ? "Installed" : busy ? "Installing…" : "Install plugin"}
+          </button>
+        ) : null}
+        {error ? <p role="alert">{error}</p> : null}
+        {exceedsInstallLimit ? (
+          <p>This plugin exceeds the current 64-component installation limit.</p>
+        ) : contentsUnknown ? (
+          <p>
+            Plugin contents are unavailable. Installation is disabled until the repository can be
+            inspected.
+          </p>
+        ) : !installable ? (
+          <p>No installable skills or remote MCP servers.</p>
+        ) : (
+          <p>Installs skills and adds connection references. Connect each server separately.</p>
+        )}
+      </footer>
+    </article>
+  );
+}