@stigmer/react 0.0.71 → 0.0.73

package/src/identity-provider/useOidcDiscovery.ts

@@ -0,0 +1,124 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+/**
+ * Subset of an OIDC Discovery document relevant for identity provider
+ * creation.
+ */
+export interface OidcDiscoveryResult {
+  readonly issuer: string;
+  readonly jwksUri: string;
+  readonly userinfoEndpoint?: string;
+}
+
+/** Return value of {@link useOidcDiscovery}. */
+export interface UseOidcDiscoveryReturn {
+  /**
+   * Fetch the OIDC Discovery document for the given issuer URL.
+   *
+   * Resolves with the parsed result on success, or `null` when the
+   * fetch fails (CORS, network, invalid document). Error details are
+   * available via the `error` property.
+   */
+  readonly discover: (issuerUrl: string) => Promise<OidcDiscoveryResult | null>;
+  /** `true` while a discovery fetch is in flight. */
+  readonly isDiscovering: boolean;
+  /** Error from the last failed discovery, or `null` when healthy. */
+  readonly error: Error | null;
+}
+
+/**
+ * Behavior hook that fetches an OIDC Discovery document from the
+ * browser.
+ *
+ * Used by the "Custom OIDC" path in the identity provider creation
+ * wizard. The hook exposes an imperative `discover()` function
+ * (rather than an effect-based pattern) because discovery is
+ * triggered by user action ("Continue"), not by render.
+ *
+ * CORS may block the fetch for some providers. When this happens
+ * the hook returns `null` from `discover()` and populates `error`
+ * so the wizard can fall back to manual configuration.
+ */
+export function useOidcDiscovery(): UseOidcDiscoveryReturn {
+  const [isDiscovering, setIsDiscovering] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const discover = useCallback(
+    async (issuerUrl: string): Promise<OidcDiscoveryResult | null> => {
+      setIsDiscovering(true);
+      setError(null);
+
+      try {
+        const result = await fetchOidcDiscovery(issuerUrl);
+        return result;
+      } catch (err) {
+        const wrapped =
+          err instanceof Error ? err : new Error(String(err));
+        setError(wrapped);
+        return null;
+      } finally {
+        setIsDiscovering(false);
+      }
+    },
+    [],
+  );
+
+  return { discover, isDiscovering, error };
+}
+
+// ---------------------------------------------------------------------------
+// Internal fetch
+// ---------------------------------------------------------------------------
+
+async function fetchOidcDiscovery(
+  issuerUrl: string,
+): Promise<OidcDiscoveryResult> {
+  const normalized = issuerUrl.replace(/\/+$/, "");
+  const url = `${normalized}/.well-known/openid-configuration`;
+
+  let response: Response;
+  try {
+    response = await fetch(url, { mode: "cors" });
+  } catch {
+    throw new Error(
+      "Could not reach the issuer's discovery endpoint. " +
+        "The provider may not allow browser requests (CORS). " +
+        "You can enter the configuration manually instead.",
+    );
+  }
+
+  if (!response.ok) {
+    throw new Error(
+      `Discovery endpoint returned HTTP ${response.status}. ` +
+        "Verify the issuer URL is correct.",
+    );
+  }
+
+  let data: Record<string, unknown>;
+  try {
+    data = (await response.json()) as Record<string, unknown>;
+  } catch {
+    throw new Error(
+      "Discovery endpoint returned invalid JSON. " +
+        "Verify the issuer URL points to a valid OIDC provider.",
+    );
+  }
+
+  if (typeof data.issuer !== "string" || typeof data.jwks_uri !== "string") {
+    throw new Error(
+      "Discovery document is missing required fields (issuer, jwks_uri). " +
+        "This may not be a compliant OpenID Connect provider.",
+    );
+  }
+
+  return {
+    issuer: data.issuer,
+    jwksUri: data.jwks_uri,
+    userinfoEndpoint:
+      typeof data.userinfo_endpoint === "string"
+        ? data.userinfo_endpoint
+        : undefined,
+  };
+}

package/src/identity-provider/useSsoProvider.ts

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { create } from "@bufbuild/protobuf";
+import { OrganizationSsoLookupSchema, type SsoProviderInfo } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/io_pb";
+import { isNotFound } from "@stigmer/sdk";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useSsoProvider}. */
+export interface UseSsoProviderReturn {
+  /** SSO provider info for the organization, or `null` if not configured, loading, or on error. */
+  readonly ssoProvider: SsoProviderInfo | null;
+  /** `true` while the lookup is in flight. */
+  readonly isLoading: boolean;
+  /** Error from the last failed request, or `null` when healthy. `null` when the org simply has no SSO configured (NOT_FOUND is treated as absent, not an error). */
+  readonly error: Error | null;
+}
+
+/**
+ * Data hook that looks up the SSO identity provider for an organization.
+ *
+ * Returns the minimal OIDC configuration needed to render an SSO login
+ * button and initiate the Authorization Code flow: display name, OIDC
+ * client ID, and issuer URL.
+ *
+ * This is the only identity-provider hook that works **unauthenticated**
+ * — the backend skips authorization because it is called by the login
+ * page before the user has signed in.
+ *
+ * When the organization has no SSO provider configured, `ssoProvider`
+ * is `null` and `error` remains `null` — absence is not an error.
+ *
+ * Pass `null` to skip the lookup (stable no-op).
+ *
+ * @example
+ * ```tsx
+ * function LoginPage({ org }: { org: string }) {
+ *   const { ssoProvider, isLoading } = useSsoProvider(org);
+ *
+ *   if (isLoading) return <Skeleton />;
+ *
+ *   return (
+ *     <div>
+ *       <EmailPasswordForm />
+ *       {ssoProvider && (
+ *         <SsoLoginButton
+ *           label={`Sign in with ${ssoProvider.displayName}`}
+ *           clientId={ssoProvider.oidcClientId}
+ *           issuer={ssoProvider.issuer}
+ *         />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSsoProvider(org: string | null): UseSsoProviderReturn {
+  const stigmer = useStigmer();
+  const [ssoProvider, setSsoProvider] = useState<SsoProviderInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!org) {
+      setSsoProvider(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+
+    const cancelled = { current: false };
+    setIsLoading(true);
+    setError(null);
+
+    stigmer.identityProvider.getSsoProvider(create(OrganizationSsoLookupSchema, { org })).then(
+      (result) => {
+        if (cancelled.current) return;
+        setSsoProvider(result);
+        setIsLoading(false);
+      },
+      (err) => {
+        if (cancelled.current) return;
+        if (isNotFound(err)) {
+          setSsoProvider(null);
+        } else {
+          setError(toError(err));
+        }
+        setIsLoading(false);
+      },
+    );
+
+    return () => {
+      cancelled.current = true;
+    };
+  }, [org, stigmer]);
+
+  return { ssoProvider, isLoading, error };
+}

package/src/identity-provider/useUpdateIdentityProvider.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { IdentityProviderInput } from "@stigmer/sdk";
+import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useUpdateIdentityProvider}. */
+export interface UseUpdateIdentityProviderReturn {
+  /** Submit an {@link IdentityProviderInput} to update an existing identity provider. Resolves with the updated resource. */
+  readonly update: (input: IdentityProviderInput) => Promise<IdentityProvider>;
+  /** `true` while the update request is in flight. */
+  readonly isUpdating: boolean;
+  /** Error from the last failed update, or `null` when healthy. */
+  readonly error: Error | null;
+  /** Reset `error` to `null`. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Mutation hook that wraps `identityProvider.update()` with loading
+ * and error state.
+ *
+ * Updates an existing identity provider. The input must include the
+ * `slug` field to identify the target resource, along with the updated
+ * spec fields.
+ *
+ * @example
+ * ```tsx
+ * const { update, isUpdating, error } = useUpdateIdentityProvider();
+ *
+ * await update({
+ *   name: "Acme Corp SSO",
+ *   slug: "acme-sso",
+ *   org: "acme",
+ *   displayName: "Acme Corp SSO",
+ *   isSsoProvider: true,
+ *   oidcClientId: "abc123",
+ * });
+ * refetch(); // refresh detail view
+ * ```
+ */
+export function useUpdateIdentityProvider(): UseUpdateIdentityProviderReturn {
+  const stigmer = useStigmer();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const update = useCallback(
+    async (input: IdentityProviderInput): Promise<IdentityProvider> => {
+      setIsUpdating(true);
+      setError(null);
+
+      try {
+        return await stigmer.identityProvider.update(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsUpdating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { update, isUpdating, error, clearError };
+}

package/src/index.ts

@@ -61,6 +61,7 @@ export {
   resolvedSubject,
 } from "./session";
 export type {
+  SharedSessionFields,
   CreateSessionInput,
   CreateSessionResult,
   UseCreateSessionReturn,
@@ -149,6 +150,8 @@ export type {
   ToolCallGroupProps,
   ToolCallDetailProps,
   McpToolDetailProps,
+  McpArgsViewProps,
+  McpMetadataRowProps,
   ToolArgsViewProps,
   ToolCallItemProps,
   SubAgentSectionProps,
@@ -243,6 +246,7 @@ export type {
   McpServerConfigPanelProps,
   McpServerCredentialsProps,
   McpServerDetailViewProps,
+  CapabilityTab,
   McpToolSelectorProps,
   UseDiscoverCapabilitiesReturn,
   UseMcpServerCredentialsReturn,
@@ -369,14 +373,51 @@ export type {
   UseSessionEnvPoolReturn,
 } from "./environment";
 
-// Organization — behavior hook and styled form for organization creation
+// IAM Policy — data hooks, behavior hooks, headless hook, and styled components for access management
 export {
+  useGrantableRoles,
+  useRoleSelector,
+  useResourceAccess,
+  usePrincipalsCount,
+  useWhoAmI,
+  useCreateIamPolicy,
+  useDeleteIamPolicy,
+  useRevokeOrgAccess,
+  RoleSelector,
+  GrantAccessForm,
+  OrgMembersPanel,
+} from "./iam-policy";
+export type {
+  UseGrantableRolesReturn,
+  RoleOption,
+  UseRoleSelectorReturn,
+  ResourceAccessRef,
+  UseResourceAccessOptions,
+  UseResourceAccessReturn,
+  UsePrincipalsCountReturn,
+  UseWhoAmIReturn,
+  UseCreateIamPolicyReturn,
+  UseDeleteIamPolicyReturn,
+  UseRevokeOrgAccessReturn,
+  RoleSelectorProps,
+  GrantAccessFormProps,
+  OrgMembersPanelProps,
+} from "./iam-policy";
+
+// Organization — data hook, behavior hooks, styled form for creation, and profile panel
+export {
+  useOrganization,
   useCreateOrganization,
+  useUpdateOrganization,
   CreateOrganizationForm,
+  OrgProfilePanel,
 } from "./organization";
 export type {
+  UseOrganizationReturn,
   UseCreateOrganizationReturn,
+  UseUpdateOrganizationReturn,
   CreateOrganizationFormProps,
+  OrgProfilePanelProps,
 } from "./organization";
 
 // API Key — data hooks, behavior hooks, and styled components for API key lifecycle
@@ -397,6 +438,63 @@ export type {
   ApiKeyCreatedAlertProps,
 } from "./api-key";
 
+// Identity Provider — data hooks, mutation hooks, styled components, presets, and guided wizard for IdP management and SSO discovery
+export {
+  useIdentityProviderList,
+  useIdentityProvider,
+  useSsoProvider,
+  useCreateIdentityProvider,
+  useUpdateIdentityProvider,
+  useDeleteIdentityProvider,
+  IdentityProviderListPanel,
+  CreateIdentityProviderForm,
+  PROVIDER_PRESETS,
+  getPreset,
+  ProviderPicker,
+  IdentityProviderWizard,
+  IdentityProviderDetailPanel,
+  SsoLoginPrompt,
+} from "./identity-provider";
+export type {
+  UseIdentityProviderListReturn,
+  UseIdentityProviderReturn,
+  UseSsoProviderReturn,
+  UseCreateIdentityProviderReturn,
+  UseUpdateIdentityProviderReturn,
+  UseDeleteIdentityProviderReturn,
+  IdentityProviderListPanelProps,
+  CreateIdentityProviderFormProps,
+  ProviderPreset,
+  ProviderVariable,
+  ProviderConfig,
+  ProviderPickerProps,
+  IdentityProviderWizardProps,
+  IdentityProviderDetailPanelProps,
+  SsoLoginPromptProps,
+} from "./identity-provider";
+
+// Invitation — data hooks, behavior hooks, and feature components for org invite links
+export {
+  useOrgInvitations,
+  useCreateInvitation,
+  useRevokeInvitation,
+  useInvitationPreview,
+  useRedeemInvitation,
+  InvitationCreatedAlert,
+  InvitationManager,
+  InvitationRedemption,
+} from "./invitation";
+export type {
+  UseOrgInvitationsReturn,
+  UseCreateInvitationReturn,
+  UseRevokeInvitationReturn,
+  UseInvitationPreviewReturn,
+  UseRedeemInvitationReturn,
+  InvitationCreatedAlertProps,
+  InvitationManagerProps,
+  InvitationRedemptionProps,
+} from "./invitation";
+
 // Error — structured error display with classification, retry, and contextual guidance
 export { ErrorMessage, SecretFlowErrorGuide, isSecretFlowError } from "./error";
 export type { ErrorMessageProps, SecretFlowErrorGuideProps } from "./error";
@@ -436,6 +534,28 @@ export type {
   UseUpdateVisibilityReturn,
 } from "./library";
 
+// Search — shared search/list/count infrastructure re-exported for public API surface
+export type {
+  UseResourceSearchOptions,
+  UseResourceSearchReturn,
+} from "./search";
+
+// Usage — org-level usage report hook, dashboard panel, and date-range utilities
+export {
+  useOrgUsageReport,
+  OrgUsagePanel,
+  DATE_RANGE_PRESETS,
+  dateRangeFromPreset,
+  formatDateRange,
+  presetLabel,
+} from "./usage";
+export type {
+  UseOrgUsageReportReturn,
+  OrgUsagePanelProps,
+  DateRange,
+  DateRangePreset,
+} from "./usage";
+
 // Agent Instance — data hooks, list hook, personal convenience hook, and behavior hook
 export {
   useAgentInstance,

package/src/internal/CloudFeatureNotice.tsx

@@ -21,6 +21,18 @@ export interface CloudFeatureNoticeProps {
  *
  * All visual properties flow through `--stgm-*` design tokens.
  * No Console-specific dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * const available = useResourceAvailable(ApiResourceKind.api_key);
+ * if (!available) {
+ *   return (
+ *     <CloudFeatureNotice>
+ *       API keys require Stigmer Cloud. Run with <code>--cloud</code> to enable.
+ *     </CloudFeatureNotice>
+ *   );
+ * }
+ * ```
  */
 export function CloudFeatureNotice({
   children,

package/src/invitation/InvitationCreatedAlert.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/** Props for {@link InvitationCreatedAlert}. */
+export interface InvitationCreatedAlertProps {
+  /** The full invite URL to display and copy. */
+  readonly inviteUrl: string;
+  /** Human-readable label describing the invitation's purpose. */
+  readonly label: string;
+  /** Fired when the user dismisses the alert. */
+  readonly onDismiss: () => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * One-time banner displayed after a new invitation link is created.
+ *
+ * Shows the invite URL in a monospace read-only field with a **Copy**
+ * button. While invite URLs are always retrievable from the invitation
+ * list, surfacing the URL immediately after creation provides the
+ * critical "copy and share" moment that admins expect.
+ *
+ * This is a standalone alert component, not a modal — the parent
+ * decides how to present and position it.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <InvitationCreatedAlert
+ *   inviteUrl="https://app.stigmer.ai/invite/abc123..."
+ *   label="Engineering team invite"
+ *   onDismiss={() => setCreatedUrl(null)}
+ * />
+ * ```
+ */
+export function InvitationCreatedAlert({
+  inviteUrl,
+  label,
+  onDismiss,
+  className,
+}: InvitationCreatedAlertProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(inviteUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      const el = document.getElementById("stgm-invite-url-reveal");
+      if (el) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [inviteUrl]);
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "rounded-lg border border-primary/30 bg-primary-subtle p-4",
+        className,
+      )}
+    >
+      <div className="mb-2 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground">
+            Invite link created: {label}
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Share this link to invite people to your organization.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label="Dismiss"
+          className={cn(
+            "shrink-0 rounded p-1",
+            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "transition-colors",
+          )}
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <code
+          id="stgm-invite-url-reveal"
+          className={cn(
+            "min-w-0 flex-1 select-all truncate rounded-md",
+            "border border-input bg-background px-2.5 py-1.5",
+            "font-mono text-xs text-foreground",
+          )}
+        >
+          {inviteUrl}
+        </code>
+
+        <button
+          type="button"
+          onClick={handleCopy}
+          className={cn(
+            "inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
+            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "transition-colors",
+          )}
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function CopyIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="5" y="5" width="9" height="9" rx="1.5" />
+      <path d="M5 11H3.5A1.5 1.5 0 0 1 2 9.5V3.5A1.5 1.5 0 0 1 3.5 2h6A1.5 1.5 0 0 1 11 3.5V5" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M3 8.5l3.5 3.5L13 5" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}