@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/src/notification-text.ts

@@ -0,0 +1,81 @@
+/*
+ * The small text format of an agent's notification, shared by every surface
+ * that shows one (the web inbox, the native inbox): short paragraphs and "- "
+ * bullets, with **bold**, `code` and [links](https://…) inside a line.
+ * Anything else is shown as written. The phone's lock screen gets plain text
+ * from the server instead.
+ */
+
+export type NotificationSpan =
+  | { kind: "text"; text: string }
+  | { kind: "bold"; text: string }
+  | { kind: "code"; text: string }
+  | { kind: "link"; text: string; href: string };
+
+export type NotificationBlock =
+  | { kind: "paragraph"; spans: NotificationSpan[] }
+  | { kind: "bullets"; items: NotificationSpan[][] };
+
+const INLINE = /\*\*(.+?)\*\*|__(.+?)__|`([^`]+)`|\[([^\]]+)\]\((https:\/\/[^\s)]+)\)/gu;
+
+/** One line's spans. Only https links become links. */
+export function parseNotificationInline(line: string): NotificationSpan[] {
+  const spans: NotificationSpan[] = [];
+  let last = 0;
+  for (const match of line.matchAll(INLINE)) {
+    const index = match.index ?? 0;
+    if (index > last) spans.push({ kind: "text", text: line.slice(last, index) });
+    const [, bold, boldAlt, code, linkText, href] = match;
+    if (bold ?? boldAlt) spans.push({ kind: "bold", text: (bold ?? boldAlt)! });
+    else if (code) spans.push({ kind: "code", text: code });
+    else if (linkText && href) spans.push({ kind: "link", text: linkText, href });
+    last = index + match[0].length;
+  }
+  if (last < line.length) spans.push({ kind: "text", text: line.slice(last) });
+  return spans;
+}
+
+/** Paragraphs (blank-line separated; single line breaks kept) and bullet lists. */
+export function parseNotificationText(text: string): NotificationBlock[] {
+  const blocks: NotificationBlock[] = [];
+  let paragraph: string[] = [];
+  let bullets: NotificationSpan[][] = [];
+  const flushParagraph = () => {
+    if (paragraph.length === 0) return;
+    blocks.push({ kind: "paragraph", spans: parseNotificationInline(paragraph.join("\n")) });
+    paragraph = [];
+  };
+  const flushBullets = () => {
+    if (bullets.length === 0) return;
+    blocks.push({ kind: "bullets", items: bullets });
+    bullets = [];
+  };
+  for (const raw of text.replace(/\r\n?/gu, "\n").split("\n")) {
+    const line = raw.trimEnd();
+    const bullet = /^\s*[-*•]\s+(.*)$/u.exec(line);
+    if (bullet) {
+      flushParagraph();
+      bullets.push(parseNotificationInline(bullet[1]!));
+    } else if (line.trim() === "") {
+      flushParagraph();
+      flushBullets();
+    } else {
+      flushBullets();
+      paragraph.push(line.trim());
+    }
+  }
+  flushParagraph();
+  flushBullets();
+  return blocks;
+}
+
+/** The text as one plain line, for previews that clamp to a line or two. */
+export function notificationPlainText(text: string): string {
+  return parseNotificationText(text)
+    .map((block) =>
+      block.kind === "paragraph"
+        ? block.spans.map((span) => span.text).join("")
+        : block.items.map((spans) => `• ${spans.map((span) => span.text).join("")}`).join("\n"),
+    )
+    .join("\n");
+}

package/src/older-history.ts

@@ -8,6 +8,7 @@
  */
 export type OlderHistoryLoadReceipt = Promise<boolean> & {
   readonly committed: boolean;
+  readonly tailPreserved?: boolean;
 };
 
 /**
@@ -22,23 +23,29 @@ export type OlderHistoryLoader = () => unknown;
 
 type MutableOlderHistoryLoadReceipt = Promise<boolean> & {
   committed: boolean;
+  tailPreserved: boolean;
 };
 
 type OlderHistoryReceiptCapture = (receipt: OlderHistoryLoadReceipt) => void;
 
 let activeReceiptCapture: OlderHistoryReceiptCapture | undefined;
+let preserveTailForAutomaticLoad = false;
 
 /** Bind a receipt before a synchronous forwarding stack can publish state. */
 export function invokeOlderHistoryLoaderWithReceiptCapture(
   load: OlderHistoryLoader,
   capture: OlderHistoryReceiptCapture,
+  preserveTail = false,
 ): unknown {
   const previousCapture = activeReceiptCapture;
+  const previousPreserveTail = preserveTailForAutomaticLoad;
   activeReceiptCapture = capture;
+  preserveTailForAutomaticLoad = preserveTail;
   try {
     return load();
   } finally {
     activeReceiptCapture = previousCapture;
+    preserveTailForAutomaticLoad = previousPreserveTail;
   }
 }
 
@@ -47,7 +54,11 @@ export function invokeOlderHistoryLoaderWithReceiptCapture(
  * Call `markCommitted` immediately before publishing an accepted older window.
  */
 export function createOlderHistoryLoadReceipt(
-  load: (markCommitted: () => void) => boolean | Promise<boolean>,
+  load: (
+    markCommitted: () => void,
+    preserveTail: boolean,
+    markTailPreserved: () => void,
+  ) => boolean | Promise<boolean>,
 ): OlderHistoryLoadReceipt {
   let resolveResult!: (value: boolean | PromiseLike<boolean>) => void;
   let rejectResult!: (reason?: unknown) => void;
@@ -56,11 +67,18 @@ export function createOlderHistoryLoadReceipt(
     rejectResult = reject;
   }) as MutableOlderHistoryLoadReceipt;
   result.committed = false;
+  result.tailPreserved = false;
   activeReceiptCapture?.(result);
   try {
-    const loaded = load(() => {
-      result.committed = true;
-    });
+    const loaded = load(
+      () => {
+        result.committed = true;
+      },
+      preserveTailForAutomaticLoad,
+      () => {
+        result.tailPreserved = true;
+      },
+    );
     Promise.resolve(loaded).then(resolveResult, rejectResult);
   } catch (error) {
     rejectResult(error);

package/src/organization-model.ts

@@ -0,0 +1,118 @@
+// Pure organization and workspace selection rules shared by the web rail's
+// switcher and native renderers. The wire model has no account *name*, so a
+// display label is derived from the access grant — preferring the account
+// name, falling back to a short, stable id fragment. No DOM, no React.
+import type { AccessContext, AccountGrant, Workspace } from "@opengeni/sdk";
+
+export type OrgOption = {
+  accountId: string;
+  label: string;
+  /** Whether the subject has the owner/admin authority required by organization settings. */
+  canManage: boolean;
+};
+
+/** Organizations the subject administers (owner or admin), sorted by id. */
+export function organizationAdministrationAccountIds(accessContext: AccessContext): string[] {
+  return accessContext.accountGrants
+    .filter(
+      (grant) =>
+        grant.subjectId === accessContext.subjectId &&
+        (grant.role === "owner" || grant.role === "admin"),
+    )
+    .map((grant) => grant.accountId)
+    .sort();
+}
+
+/** A short, stable id fragment for an account that has no human name. */
+export function shortAccountId(accountId: string): string {
+  return accountId.length > 8 ? accountId.slice(0, 8) : accountId;
+}
+
+/** The organization's real name, or null when the API sent none. */
+export function orgName(accountId: string, grants: AccountGrant[]): string | null {
+  const grant = grants.find((candidate) => candidate.accountId === accountId);
+  const label =
+    grant?.metadata && typeof grant.metadata.accountName === "string"
+      ? grant.metadata.accountName
+      : undefined;
+  return label?.trim() || null;
+}
+
+/** Human label for an organization: the grant's subjectLabel, else a short id. */
+export function orgLabel(accountId: string, grants: AccountGrant[]): string {
+  return orgName(accountId, grants) ?? `Org ${shortAccountId(accountId)}`;
+}
+
+/**
+ * The organizations the subject belongs to, in a stable order (default org
+ * first, then by name). Derived from account grants, unioned with the accounts
+ * that own the accessible workspaces so an org always shows even without an
+ * explicit grant.
+ */
+export function organizationsForSubject(
+  context: AccessContext,
+  workspaces: Workspace[],
+): OrgOption[] {
+  const administeredIds = new Set(organizationAdministrationAccountIds(context));
+  const ids = new Set<string>();
+  for (const grant of context.accountGrants) {
+    ids.add(grant.accountId);
+  }
+  for (const workspace of workspaces) {
+    ids.add(workspace.accountId);
+  }
+  const options = [...ids].map((accountId) => ({
+    accountId,
+    label: orgLabel(accountId, context.accountGrants),
+    canManage: administeredIds.has(accountId),
+  }));
+  return options.sort((a, b) => {
+    if (a.accountId === context.defaultAccountId) {
+      return -1;
+    }
+    if (b.accountId === context.defaultAccountId) {
+      return 1;
+    }
+    return a.label.localeCompare(b.label) || a.accountId.localeCompare(b.accountId);
+  });
+}
+
+/** Workspaces that belong to a given organization, ordered by name. */
+export function workspacesInOrg(workspaces: Workspace[], accountId: string): Workspace[] {
+  return workspaces
+    .filter((workspace) => workspace.accountId === accountId)
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/** Organization settings remain anchored to an accessible workspace in that organization. */
+export function organizationSettingsWorkspaceId(
+  workspaces: Workspace[],
+  accountId: string,
+  activeWorkspaceId: string,
+): string | null {
+  const candidates = workspacesInOrg(workspaces, accountId);
+  return (
+    candidates.find((workspace) => workspace.id === activeWorkspaceId)?.id ??
+    candidates[0]?.id ??
+    null
+  );
+}
+
+/**
+ * Where switching to an organization lands: the workspace last used there
+ * while it is still open to the person, else its first shared workspace, else
+ * their Personal workspace there. Null when nothing in it is open to them.
+ */
+export function organizationLandingWorkspaceId(
+  workspaces: Workspace[],
+  accountId: string,
+  rememberedWorkspaceId?: string | null,
+): string | null {
+  const candidates = workspacesInOrg(workspaces, accountId);
+  return (
+    candidates.find((workspace) => workspace.id === rememberedWorkspaceId)?.id ??
+    candidates.find((workspace) => workspace.kind !== "personal")?.id ??
+    candidates[0]?.id ??
+    null
+  );
+}

package/src/plugin-details.tsx

@@ -0,0 +1,185 @@
+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",
+  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 = !contentsUnknown && installableCount > 0 && !exceedsInstallLimit;
+  const [expanded, setExpanded] = 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">
+        <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}
+        </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>
+  );
+}

package/src/plugin-discovery.tsx

@@ -0,0 +1,196 @@
+import { createDiscoveryCache } from "./discovery-cache";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import type { PluginDiscoveryItem, PluginDiscoveryPage } from "@opengeni/sdk";
+import { BoxesIcon } from "lucide-react";
+import { CapabilityCatalogRow } from "./capability-catalog-row";
+import { ConnectionLogo } from "./connection-logo";
+
+const discoveryCache = createDiscoveryCache<PluginDiscoveryPage>();
+const spacedName = (name: string) => name.replace(/-/g, " ");
+const EMPTY_INSTALLED_IDS: ReadonlySet<string> = new Set();
+
+export type PluginDiscoveryProps = {
+  client: {
+    discoverPlugins(
+      workspaceId: string,
+      options?: { query?: string; provider?: string; offset?: number },
+    ): Promise<PluginDiscoveryPage>;
+  };
+  workspaceId: string;
+  query: string;
+  /** Initially selected registry. Users can still switch registries or browse all. */
+  defaultProvider?: "" | "openai" | "anthropic";
+  /** Discovery identities already installed in the current workspace. */
+  installedIds?: ReadonlySet<string>;
+  resultLimit?: number;
+  onShowMore?: () => void;
+  onOpen: (item: PluginDiscoveryItem) => void;
+  /** Display name for a registry slug. Defaults to the slug with dashes as spaces. */
+  formatName?: (name: string) => string;
+  /** The row tile. Defaults to the plugin logo with a glyph fallback. */
+  renderIcon?: (item: PluginDiscoveryItem) => ReactNode;
+};
+export function PluginDiscovery(props: PluginDiscoveryProps) {
+  const [provider, setProvider] = useState(props.defaultProvider ?? "");
+  return (
+    <section
+      className={`og-plugin-discovery ${props.resultLimit ? "og-catalog-overview" : ""}`}
+      aria-label="Discover plugins"
+    >
+      <header>
+        <h3>{props.resultLimit ? "Plugins" : "Browse plugins"}</h3>
+        {!props.resultLimit ? (
+          <div className="og-plugin-filters" role="group" aria-label="Plugin registry">
+            {(
+              [
+                { value: "", label: "All" },
+                { value: "openai", label: "OpenAI plugin registry" },
+                { value: "anthropic", label: "Anthropic plugin registry" },
+              ] as const
+            ).map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                aria-pressed={provider === option.value}
+                onClick={() => setProvider(option.value)}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </header>
+      <Results
+        key={`${props.workspaceId}:${props.query}:${provider}`}
+        {...props}
+        provider={provider}
+      />
+    </section>
+  );
+}
+function Results({
+  client,
+  workspaceId,
+  query,
+  provider,
+  installedIds = EMPTY_INSTALLED_IDS,
+  onOpen,
+  resultLimit,
+  onShowMore,
+  formatName = spacedName,
+  renderIcon,
+}: PluginDiscoveryProps & { provider: string }) {
+  const initial = discoveryCache.peek(client, JSON.stringify([workspaceId, query, provider, 0]));
+  const [items, setItems] = useState<PluginDiscoveryItem[]>(initial?.items ?? []);
+  const [offset, setOffset] = useState(0);
+  const [next, setNext] = useState<number | null>(initial?.nextOffset ?? null);
+  const [total, setTotal] = useState(initial?.total ?? 0);
+  const [loading, setLoading] = useState(!initial);
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  const sentinel = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    let active = true;
+    const cacheKey = JSON.stringify([workspaceId, query, provider, offset]);
+    const cached = discoveryCache.peek(client, cacheKey);
+    setLoading(!cached);
+    setError(false);
+    const timer = setTimeout(
+      () => {
+        void discoveryCache
+          .read(client, cacheKey, () =>
+            client.discoverPlugins(workspaceId, { query, provider, offset }),
+          )
+          .then(
+            (page) => {
+              if (!active) return;
+              setItems((previous) => (offset ? [...previous, ...page.items] : page.items));
+              setTotal(page.total);
+              setNext(page.nextOffset);
+              setLoading(false);
+            },
+            () => {
+              if (active) {
+                setError(true);
+                setLoading(false);
+              }
+            },
+          );
+      },
+      cached || offset ? 0 : 200,
+    );
+    return () => {
+      active = false;
+      clearTimeout(timer);
+    };
+  }, [client, workspaceId, query, provider, offset, retry]);
+  useEffect(() => {
+    if (resultLimit || loading || error || next === null || !sentinel.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) setOffset(next);
+      },
+      { rootMargin: "200px" },
+    );
+    observer.observe(sentinel.current);
+    return () => observer.disconnect();
+  }, [loading, error, next, resultLimit]);
+  return (
+    <>
+      {!loading && !error ? (
+        <p role="status">
+          {total
+            ? "Bundles of skills and connections"
+            : query.trim()
+              ? `No matches for “${query.trim()}”.`
+              : "No plugins in this registry."}
+        </p>
+      ) : null}
+      <div className="og-plugin-discovery-grid">
+        {items.slice(0, resultLimit).map((item) => (
+          <CapabilityCatalogRow
+            key={item.id}
+            data-plugin-id={item.id}
+            name={formatName(item.displayName)}
+            description={item.description}
+            status={installedIds.has(item.id) ? "added" : "available"}
+            statusLabel={installedIds.has(item.id) ? "Installed" : "Available to install"}
+            onOpen={() => onOpen(item)}
+            icon={
+              renderIcon ? (
+                renderIcon(item)
+              ) : (
+                <ConnectionLogo
+                  src={item.logoUrl}
+                  name={item.displayName}
+                  fallback={<BoxesIcon aria-hidden="true" />}
+                />
+              )
+            }
+          />
+        ))}
+      </div>
+      {loading ? <p role="status">Loading plugins…</p> : null}
+      {error ? (
+        <p role="alert">
+          Couldn’t load plugins.{" "}
+          <button type="button" onClick={() => setRetry((value) => value + 1)}>
+            Retry
+          </button>
+        </p>
+      ) : null}
+      {resultLimit && !loading && !error && total > resultLimit ? (
+        <button className="og-catalog-more" type="button" onClick={onShowMore}>
+          View all plugins
+        </button>
+      ) : null}
+      <div ref={sentinel}>
+        {!resultLimit && next !== null && !loading && !error ? (
+          <button className="og-plugin-more" type="button" onClick={() => setOffset(next)}>
+            Show more plugins
+          </button>
+        ) : null}
+      </div>
+    </>
+  );
+}