@opengeni/react 1.0.1 → 1.0.2-canary.37202341988001

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

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+
+export type ConnectionInstalledItem = {
+  id: string;
+  name: string;
+  status: string;
+  showStatus?: boolean;
+  icon?: ReactNode;
+  needsAttention?: boolean;
+  disabled?: 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}
+            disabled={item.disabled}
+            title={item.status}
+            aria-label={`${item.name} · ${item.status}`}
+          >
+            {item.icon}
+            <span>{item.name}</span>
+            {item.showStatus ? (
+              <span className="og-connection-installed-status">{item.status}</span>
+            ) : null}
+            {item.needsAttention ? <span aria-label="Needs attention">!</span> : null}
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/connection-logo.tsx

@@ -0,0 +1,37 @@
+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" />
+      ) : (
+        (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/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/conversation-timeline.ts

@@ -0,0 +1,92 @@
+import type { ComposerState } from "./hooks/use-composer";
+import type { UseTurnQueueResult } from "./hooks/use-turn-queue";
+import type { TimelineItem, UserMessageItem } from "./timeline/types";
+
+/** Keep pending prompts in the queue, not duplicated in the conversation. */
+export function conversationTimeline(
+  items: TimelineItem[],
+  queue: Pick<UseTurnQueueResult, "queue" | "snapshot" | "acceptedSteers">,
+  composer: Pick<
+    ComposerState,
+    | "optimisticMessages"
+    | "retryOptimisticMessage"
+    | "restoreOptimisticMessage"
+    | "removeOptimisticMessage"
+  >,
+): TimelineItem[] {
+  const queued = new Set(
+    queue.queue
+      .filter((turn) => turn.metadata.delivery !== "steer")
+      .map((turn) => turn.triggerEventId),
+  );
+  const pending = composer.optimisticMessages ?? [];
+  const pendingQueue = new Set(
+    pending
+      .filter(
+        (message) =>
+          message.destination === "queue" &&
+          !(
+            message.turnId &&
+            message.appliedQueueVersion != null &&
+            queue.snapshot &&
+            queue.snapshot.version >= message.appliedQueueVersion &&
+            !queue.queue.some((turn) => turn.id === message.turnId)
+          ),
+      )
+      .map((message) => `user-message:${message.clientEventId}`),
+  );
+  const visible = items.filter(
+    (item) =>
+      item.kind !== "user-message" ||
+      (!queued.has(item.id) && !pendingQueue.has(item.reconciliationKey ?? "")),
+  );
+  const keys = new Set(
+    visible.flatMap((item) => (item.kind === "user-message" ? [item.reconciliationKey] : [])),
+  );
+  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),
+    )
+    .map((message) => ({
+      kind: "user-message",
+      id: `optimistic:${message.clientEventId}`,
+      reconciliationKey: `user-message:${message.clientEventId}`,
+      text: message.text,
+      annotations: message.annotations.map((annotation, ordinal) => ({ ...annotation, ordinal })),
+      resources: message.resources,
+      tools: [],
+      occurredAt: message.occurredAt,
+      delivery: {
+        state: message.state,
+        ...(message.error ? { error: message.error } : {}),
+        ...(message.state === "failed"
+          ? {
+              ...(message.retryable !== false && composer.retryOptimisticMessage
+                ? { onRetry: () => composer.retryOptimisticMessage?.(message.clientEventId) }
+                : {}),
+              ...(message.retryable === false && composer.restoreOptimisticMessage
+                ? { onEdit: () => composer.restoreOptimisticMessage?.(message.clientEventId) }
+                : {}),
+              onRemove: () => composer.removeOptimisticMessage?.(message.clientEventId),
+            }
+          : {}),
+      },
+    }));
+  const ids = new Set(visible.map((item) => item.id));
+  const steers: UserMessageItem[] = (queue.acceptedSteers ?? [])
+    .filter((steer) => !ids.has(steer.triggerEventId))
+    .map((steer) => ({
+      kind: "user-message",
+      id: steer.triggerEventId,
+      text: steer.text,
+      annotations: steer.annotations,
+      resources: steer.resources,
+      tools: steer.tools,
+      occurredAt: steer.occurredAt,
+      delivery: { state: steer.state },
+    }));
+  return [...visible, ...optimistic, ...steers];
+}

package/src/desktop.ts

@@ -0,0 +1,24 @@
+import type { DesktopRfbFactory, DesktopRfbLike } from "@opengeni/sdk";
+import { registerDesktopViewer } from "./lib/workbench-peers";
+
+export { DesktopViewer } from "./components/desktop-viewer";
+export type { DesktopViewerProps } from "./components/desktop-viewer";
+export { useDesktopStream } from "./hooks/use-desktop-stream";
+export type { UseDesktopStreamOptions, UseDesktopStreamResult } from "./hooks/use-desktop-stream";
+export { registerDesktopViewer } from "./lib/workbench-peers";
+
+async function loadDesktop(): Promise<DesktopRfbFactory> {
+  const mod = (await import("@novnc/novnc")) as unknown as {
+    default: new (
+      target: HTMLElement,
+      url: string,
+      options: Parameters<DesktopRfbFactory>[2],
+    ) => DesktopRfbLike;
+  };
+  return (target, url, options) => new mod.default(target, url, options);
+}
+
+/** Opt in once on a VNC route; relay-frame viewers need no noVNC peer. */
+export function enableDesktopViewer(): void {
+  registerDesktopViewer(loadDesktop);
+}