@opengeni/react 4.0.2 → 5.0.2-canary.0

package/src/device-authorization.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+import { copyTextToClipboard } from "./clipboard";
+
+export type DeviceAuthorizationProps = {
+  userCode: string;
+  verificationUri: string;
+  providerLabel?: string;
+  description?: string;
+  className?: string;
+  codeAttributes?: Record<`data-${string}`, string>;
+  loadClipboard?: () => Promise<{ copyTextToClipboard(text: string): Promise<boolean> }>;
+  onCopyResult?: (copied: boolean) => void;
+};
+
+/** Optional presentation for the existing model-account device APIs. It neither
+ * owns provider state nor assumes that opening a verification page completed it. */
+export function DeviceAuthorization(props: DeviceAuthorizationProps) {
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+  const generation = useRef(0);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    generation.current++;
+    setCopied(false);
+    setCopyError(false);
+    return () => {
+      // This is a live async-operation counter, not a captured DOM ref.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      generation.current++;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [props.userCode]);
+  async function copy() {
+    const revision = ++generation.current;
+    if (timer.current) clearTimeout(timer.current);
+    setCopied(false);
+    setCopyError(false);
+    try {
+      const clipboard = props.loadClipboard ? await props.loadClipboard() : { copyTextToClipboard };
+      if (revision !== generation.current) return;
+      const success = await clipboard.copyTextToClipboard(props.userCode);
+      if (revision !== generation.current) return;
+      setCopied(success);
+      setCopyError(!success);
+      props.onCopyResult?.(success);
+      if (success)
+        timer.current = setTimeout(() => {
+          if (revision === generation.current) setCopied(false);
+        }, 1600);
+    } catch {
+      if (revision !== generation.current) return;
+      setCopyError(true);
+      props.onCopyResult?.(false);
+    }
+  }
+  let href: string | undefined;
+  try {
+    const url = new URL(props.verificationUri);
+    if (["https:", "http:"].includes(url.protocol) && !url.username && !url.password)
+      href = props.verificationUri;
+  } catch {
+    /* A malformed provider URL must never become an executable link. */
+  }
+  return (
+    <section className={`og-connect ${props.className ?? ""}`} aria-label="Device authorization">
+      <p>{props.description ?? `Enter this code at ${props.providerLabel ?? "the provider"}.`}</p>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.5rem", alignItems: "center" }}>
+        <code {...props.codeAttributes} style={{ overflowWrap: "anywhere" }}>
+          {props.userCode}
+        </code>
+        <button
+          type="button"
+          aria-label={copied ? "Code copied" : "Copy code"}
+          onClick={() => void copy()}
+        >
+          {copied ? "Copied" : "Copy code"}
+        </button>
+        {href ? (
+          <a href={href} target="_blank" rel="noopener noreferrer">
+            Open {props.providerLabel ?? "auth page"}
+          </a>
+        ) : (
+          <span role="alert">Authorization address unavailable.</span>
+        )}
+      </div>
+      {copyError ? <p role="alert">Couldn't copy the code. Copy it manually instead.</p> : null}
+      <p role="status">Waiting for authorization…</p>
+    </section>
+  );
+}

package/src/hooks/use-workspace-capture.ts

@@ -194,8 +194,9 @@ export function useWorkspaceCapture(
           return;
         }
         setDegradedReason(null);
-        // Resolve the changed-file count immediately from the response's stats — the
-        // default-tab signal must not wait on a >2MB manifest-URL hop.
+        // Expose metadata while a large signed manifest downloads. Consumers
+        // must distinguish this pending count from a resolved capture; zero
+        // working-tree files can still have committed-only branch changes.
         setFileCount(res.stats.fileCount);
         // Exactly one of manifest / manifestUrl is non-null (M2 contract). The inline
         // manifest is the <200ms common case; a >2MB manifest is a signed URL hop.

package/src/identity-link-accounts.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from "react";
+import type { ExternalIdentityLink, ExternalIdentityLinkPage } from "@opengeni/sdk";
+
+export type IdentityLinkAccountsClient = {
+  listIdentityLinks(workspaceId: string, cursor?: string): Promise<ExternalIdentityLinkPage>;
+  revokeIdentityLink(
+    workspaceId: string,
+    linkId: string,
+    expectedRevision: number,
+  ): Promise<ExternalIdentityLink>;
+};
+
+/** Participant-scoped inventory. Revocation never deletes native work or merges
+ * identities. The caller remounts this component when the signed-in user changes. */
+export function IdentityLinkAccounts({
+  client,
+  workspaceId,
+}: {
+  client: IdentityLinkAccountsClient;
+  workspaceId: string;
+}) {
+  const [links, setLinks] = useState<ExternalIdentityLink[]>([]);
+  const [cursor, setCursor] = useState<string | null>(null);
+  const [busy, setBusy] = useState(true);
+  const [error, setError] = useState(false);
+  const [revision, setRevision] = useState(0);
+  const generation = useRef(0);
+  const inFlight = useRef(false);
+  useEffect(() => {
+    const current = ++generation.current;
+    inFlight.current = true;
+    setLinks([]);
+    setCursor(null);
+    setBusy(true);
+    setError(false);
+    void client
+      .listIdentityLinks(workspaceId)
+      .then(
+        (page) => {
+          if (current !== generation.current) return;
+          setLinks(page.links);
+          setCursor(page.nextCursor);
+        },
+        () => {
+          if (current === generation.current) setError(true);
+        },
+      )
+      .finally(() => {
+        if (current === generation.current) {
+          inFlight.current = false;
+          setBusy(false);
+        }
+      });
+    return () => {
+      // Invalidate live async work, rather than cleaning up a captured DOM node.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      generation.current++;
+    };
+  }, [client, workspaceId, revision]);
+
+  async function act(link?: ExternalIdentityLink) {
+    if (inFlight.current || (!link && !cursor)) return;
+    const current = generation.current;
+    inFlight.current = true;
+    setBusy(true);
+    setError(false);
+    try {
+      if (link) {
+        const updated = await client.revokeIdentityLink(workspaceId, link.id, link.revision);
+        if (current === generation.current)
+          setLinks((values) =>
+            values.map((value) => (value.id === updated.id ? { ...value, ...updated } : value)),
+          );
+      } else {
+        const page = await client.listIdentityLinks(workspaceId, cursor!);
+        if (current === generation.current) {
+          setLinks((values) => [
+            ...new Map([...values, ...page.links].map((value) => [value.id, value])).values(),
+          ]);
+          setCursor(page.nextCursor);
+        }
+      }
+    } catch {
+      if (current === generation.current) setError(true);
+    } finally {
+      if (current === generation.current) {
+        inFlight.current = false;
+        setBusy(false);
+      }
+    }
+  }
+  return (
+    <section
+      className="og-connect og-identity-link"
+      aria-label="Linked product access"
+      aria-busy={busy}
+    >
+      <h2>Linked product access</h2>
+      <p>
+        Manage products allowed to act as your account in this organization. Revoking a link stops
+        future linked access; it does not delete your work or undo an operation already started.
+      </p>
+      {error && (
+        <div role="alert">
+          Could not update account links. Reload to see current access.
+          <button type="button" disabled={busy} onClick={() => setRevision((value) => value + 1)}>
+            Reload links
+          </button>
+        </div>
+      )}
+      {busy && <p role="status">Loading account links…</p>}
+      {!busy && !error && links.length === 0 && (
+        <p>No products have linked access to this account.</p>
+      )}
+      <ul>
+        {links.map((link) => (
+          <li key={link.id}>
+            <p>
+              {link.externalIdentity?.source || "Product identity"}{" "}
+              <code>{link.externalIdentity?.externalId ?? link.externalIdentityId}</code>
+            </p>
+            <p>
+              Status: {link.status}.{" "}
+              {link.expiresAt
+                ? `Expires ${new Date(link.expiresAt).toLocaleString()}.`
+                : "No automatic expiry."}
+            </p>
+            <p>{link.permissions.join(", ")}</p>
+            {(link.status === "active" || link.status === "pending") && (
+              <button type="button" disabled={busy} onClick={() => void act(link)}>
+                Revoke access
+              </button>
+            )}
+          </li>
+        ))}
+      </ul>
+      {cursor && (
+        <button type="button" disabled={busy} onClick={() => void act()}>
+          Load more links
+        </button>
+      )}
+    </section>
+  );
+}

package/src/identity-link-consent.tsx

@@ -0,0 +1,192 @@
+import { useEffect, useRef, useState } from "react";
+import type {
+  ExternalIdentityLink,
+  ConfirmExternalIdentityLinkRequest,
+  ExternalIdentityLinkPreview,
+} from "@opengeni/sdk";
+
+export type IdentityLinkClient = {
+  previewIdentityLink(
+    workspaceId: string,
+    linkId: string,
+    challenge: string,
+  ): Promise<ExternalIdentityLinkPreview>;
+  confirmIdentityLink(
+    workspaceId: string,
+    linkId: string,
+    input: ConfirmExternalIdentityLinkRequest,
+  ): Promise<ExternalIdentityLink>;
+  revokeIdentityLink(
+    workspaceId: string,
+    linkId: string,
+    expectedRevision: number,
+  ): Promise<ExternalIdentityLink>;
+};
+export type IdentityLinkConsentProps = {
+  client: IdentityLinkClient;
+  workspaceId: string;
+  linkId: string;
+  challenge: string;
+  /** Host label is explanatory, never proof of the requesting application. */
+  className?: string;
+  onComplete?: (link: ExternalIdentityLink) => void;
+};
+
+/** Optional native-login consent. Ordinary Connect does not use this surface.
+ * Permission choices only narrow the server's request; no automatic approval. */
+export function IdentityLinkConsent({
+  client,
+  workspaceId,
+  linkId,
+  challenge,
+  className,
+  onComplete,
+}: IdentityLinkConsentProps) {
+  const [link, setLink] = useState<ExternalIdentityLink | null>(null);
+  const [preview, setPreview] = useState<ExternalIdentityLinkPreview | null>(null);
+  const [selected, setSelected] = useState<ExternalIdentityLink["permissions"]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(false);
+  const [retry, setRetry] = useState(0);
+  const generation = useRef(0);
+  useEffect(() => {
+    const current = ++generation.current;
+    setLink(null);
+    setPreview(null);
+    setSelected([]);
+    setBusy(true);
+    setError(false);
+    void client
+      .previewIdentityLink(workspaceId, linkId, challenge)
+      .then(
+        (result) => {
+          if (generation.current !== current) return;
+          setPreview(result);
+          setLink(result.link);
+          setSelected(result.link.permissions);
+        },
+        () => {
+          if (generation.current === current) setError(true);
+        },
+      )
+      .finally(() => {
+        if (generation.current === current) setBusy(false);
+      });
+    return () => {
+      // Invalidate live async work, rather than cleaning up a captured DOM node.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      generation.current++;
+    };
+  }, [client, workspaceId, linkId, challenge, retry]);
+  async function mutate(revoke: boolean) {
+    if (!link || busy) return;
+    const current = generation.current;
+    setBusy(true);
+    setError(false);
+    try {
+      const result = revoke
+        ? await client.revokeIdentityLink(workspaceId, linkId, link.revision)
+        : await client.confirmIdentityLink(workspaceId, linkId, {
+            challenge,
+            expectedRevision: link.revision,
+            permissions: selected,
+          });
+      if (generation.current !== current) return;
+      setLink(result);
+      onComplete?.(result);
+    } catch {
+      if (generation.current === current) setError(true);
+    } finally {
+      if (generation.current === current) setBusy(false);
+    }
+  }
+  return (
+    <section
+      className={["og-connect og-identity-link", className].filter(Boolean).join(" ")}
+      aria-label="Link your account"
+      aria-busy={busy}
+    >
+      <h2>Link your OpenGeni account</h2>
+      <p>
+        Only continue if you started this request in a product you trust. Linking lets that product
+        act as your account with the permissions you select. It does not merge accounts or move
+        existing work.
+      </p>
+      {preview && (
+        <dl>
+          <dt>Organization</dt>
+          <dd>{preview.organizationId}</dd>
+          <dt>Product user</dt>
+          <dd>
+            {preview.externalIdentity.externalId} ({preview.externalIdentity.source})
+          </dd>
+          <dt>Your OpenGeni identity</dt>
+          <dd>{preview.nativeSubjectId}</dd>
+        </dl>
+      )}
+      {error && (
+        <div role="alert">
+          This request could not be completed. It may have expired, changed, or require you to sign
+          in to the right organization.
+          {!link && (
+            <button type="button" disabled={busy} onClick={() => setRetry((value) => value + 1)}>
+              Try again
+            </button>
+          )}
+        </div>
+      )}
+      {!link && busy && <p role="status">Loading the account-link request…</p>}
+      {link?.status === "pending" && (
+        <>
+          <p>
+            {link.expiresAt
+              ? `Access ends ${new Date(link.expiresAt).toLocaleString()}.`
+              : "Access lasts until you or the product revoke this link."}{" "}
+            Your current permissions still apply.
+          </p>
+          <fieldset disabled={busy}>
+            <legend>Allow these permissions</legend>
+            {link.permissions.map((permission) => (
+              <label key={permission}>
+                <input
+                  type="checkbox"
+                  checked={selected.includes(permission)}
+                  onChange={(event) =>
+                    setSelected((values) =>
+                      event.target.checked
+                        ? [...values, permission]
+                        : values.filter((value) => value !== permission),
+                    )
+                  }
+                />
+                <span>{permission.replaceAll(":", " · ")}</span>
+              </label>
+            ))}
+          </fieldset>
+          <button
+            type="button"
+            disabled={busy || selected.length === 0}
+            onClick={() => void mutate(false)}
+          >
+            {busy ? "Saving…" : "Allow selected access"}
+          </button>
+          <p>You can close this page without granting access.</p>
+        </>
+      )}
+      {link?.status === "active" && (
+        <>
+          <p role="status">Account linked. Return to your product to continue.</p>
+          <button type="button" disabled={busy} onClick={() => void mutate(true)}>
+            Revoke this link
+          </button>
+        </>
+      )}
+      {link?.status === "revoked" && (
+        <p role="status">Link revoked. Your OpenGeni account and existing work are unchanged.</p>
+      )}
+      {link?.status === "expired" && (
+        <p role="status">This request has expired. Start a new request from your product.</p>
+      )}
+    </section>
+  );
+}

package/src/session-ui.ts

@@ -8,6 +8,8 @@ export type {
   HumanInputFormProps,
 } from "./components/human-input-form";
 export { HumanInputSurface } from "./components/human-input-surface";
+export { ApprovalSurface } from "./components/approval-surface";
+export type { ApprovalSurfaceProps, ApprovalSurfaceMessages } from "./components/approval-surface";
 export type { HumanInputSurfaceProps } from "./components/human-input-surface";
 export { MessageTimeline, TimelineRow } from "./components/message-timeline";
 export type { MessageTimelineProps } from "./components/message-timeline";