@stigmer/react 3.0.7 → 3.0.8-dev.20260612062921

package/src/iam-policy/OrgMembersPanel.tsx

@@ -22,6 +22,7 @@ import { useRevokeOrgAccess } from "./useRevokeOrgAccess";
 import { useCreateIamPolicy } from "./useCreateIamPolicy";
 import { useDeleteIamPolicy } from "./useDeleteIamPolicy";
 import { RoleSelector } from "./RoleSelector";
+import { ProviderBadge } from "./ProviderBadge";
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -233,6 +234,7 @@ function MemberRow({
               You
             </span>
           )}
+          <ProviderBadge principal={principal} />
         </div>
         {email && email !== name && (
           <span className="block truncate text-xs text-muted-foreground">

package/src/iam-policy/PeopleWithAccess.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import type { PrincipalAccess } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { useShareFlow, type ShareFlowResource } from "./useShareFlow";
+import { GrantAccessForm } from "./GrantAccessForm";
+import { PermissionGate } from "./PermissionGate";
+
+/** Props for {@link PeopleWithAccess}. */
+export interface PeopleWithAccessProps {
+  /** The resource whose access list is shown. */
+  readonly resource: ShareFlowResource;
+  /** Resource kind string for the API ref (e.g. "agent", "session"). */
+  readonly resourceKindString: string;
+  /** ApiResourceKind enum value for grantable-role lookup. */
+  readonly resourceKind: ApiResourceKind;
+  /**
+   * Organization the resource belongs to (`metadata.org`). Drives the
+   * org-member typeahead in the grant form.
+   */
+  readonly orgId: string;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The "people with access" body shared by {@link SharePanel} and the unified
+ * Manage access dialog: the list of principals with their roles, plus the
+ * inline grant form.
+ *
+ * Reading the access list requires `can_view_access`; this component assumes
+ * the caller has already gated rendering on it (e.g. via `PermissionGate` or
+ * a parent trigger). Mutations are gated here, in proportion to the action:
+ * the grant form and per-row revoke buttons render only behind
+ * `can_grant_access`, so a viewer sees *who* has access without being offered
+ * controls the server would reject. The backend remains the enforcer.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ */
+export function PeopleWithAccess({
+  resource,
+  resourceKindString,
+  resourceKind,
+  orgId,
+  className,
+}: PeopleWithAccessProps) {
+  const {
+    accessList,
+    isLoading,
+    fetchError,
+    revokeAccess,
+    isRevoking,
+    revokeError,
+    refetch,
+    hasGrantableRoles,
+  } = useShareFlow(resource);
+
+  const [showGrantForm, setShowGrantForm] = useState(false);
+
+  const existingPrincipalIds = accessList
+    .map((entry) => entry.principal?.id)
+    .filter((id): id is string => Boolean(id));
+
+  const grantGate = { kind: resourceKindString, id: resource.id };
+
+  return (
+    <div className={cn("flex flex-col gap-4", className)}>
+      {/* Access list */}
+      <div className="space-y-1">
+        <p className="text-xs text-muted-foreground">
+          {isLoading
+            ? "Loading access list..."
+            : `${accessList.length} ${accessList.length === 1 ? "person" : "people"} with access`}
+        </p>
+
+        {fetchError && (
+          <p className="text-destructive text-[0.65rem]" role="alert">
+            {getUserMessage(fetchError)}
+          </p>
+        )}
+
+        {!isLoading && accessList.length > 0 && (
+          <ul className="space-y-1 mt-2" aria-label="People with access">
+            {accessList.map((entry) => (
+              <AccessEntry
+                key={entry.principal?.id ?? "unknown"}
+                entry={entry}
+                grantGate={grantGate}
+                onRevoke={revokeAccess}
+                isRevoking={isRevoking}
+              />
+            ))}
+          </ul>
+        )}
+
+        {revokeError && (
+          <p className="text-destructive text-[0.65rem]" role="alert">
+            {getUserMessage(revokeError)}
+          </p>
+        )}
+      </div>
+
+      {/* Grant form — only for users who can grant access. */}
+      {hasGrantableRoles && (
+        <PermissionGate resource={grantGate} relation="can_grant_access">
+          <div className="border-t border-border pt-3">
+            {showGrantForm ? (
+              <GrantAccessForm
+                resourceKind={resourceKind}
+                resourceKindString={resourceKindString}
+                resourceId={resource.id}
+                orgId={orgId}
+                excludePrincipalIds={existingPrincipalIds}
+                onGranted={() => {
+                  setShowGrantForm(false);
+                  refetch();
+                }}
+                onCancel={() => setShowGrantForm(false)}
+              />
+            ) : (
+              <button
+                type="button"
+                onClick={() => setShowGrantForm(true)}
+                className={cn(
+                  "w-full rounded-md px-3 py-1.5 text-xs font-medium text-center",
+                  "border border-dashed border-border",
+                  "text-muted-foreground hover:text-foreground hover:border-foreground/30",
+                  "hover:bg-accent-hover transition-colors",
+                )}
+              >
+                + Add people
+              </button>
+            )}
+          </div>
+        </PermissionGate>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal subcomponents
+// ---------------------------------------------------------------------------
+
+function AccessEntry({
+  entry,
+  grantGate,
+  onRevoke,
+  isRevoking,
+}: {
+  readonly entry: PrincipalAccess;
+  readonly grantGate: { readonly kind: string; readonly id: string };
+  readonly onRevoke: (principalId: string, role: string) => Promise<void>;
+  readonly isRevoking: boolean;
+}) {
+  const principal = entry.principal;
+  const roles = entry.roles;
+
+  const displayName = principal?.name || principal?.email || principal?.id || "Unknown";
+  const primaryRole = roles[0]?.role;
+
+  const handleRevoke = useCallback(async () => {
+    if (!principal?.id || !primaryRole?.code) return;
+    await onRevoke(principal.id, primaryRole.code);
+  }, [principal?.id, primaryRole?.code, onRevoke]);
+
+  return (
+    <li className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-accent-hover group">
+      <div className="flex items-center gap-2 min-w-0">
+        <div
+          className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[0.6rem] font-medium text-muted-foreground shrink-0"
+          aria-hidden="true"
+        >
+          {(principal?.name?.[0] ?? principal?.email?.[0] ?? "?").toUpperCase()}
+        </div>
+        <div className="min-w-0">
+          <p className="text-xs text-foreground truncate">{displayName}</p>
+          {principal?.email && principal.name && (
+            <p className="text-[0.6rem] text-muted-foreground truncate">
+              {principal.email}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1.5 shrink-0">
+        <span className="text-[0.6rem] text-muted-foreground capitalize">
+          {primaryRole?.name ?? primaryRole?.code ?? "—"}
+        </span>
+        <PermissionGate resource={grantGate} relation="can_grant_access">
+          <button
+            type="button"
+            onClick={handleRevoke}
+            disabled={isRevoking}
+            aria-label={`Remove ${displayName}'s access`}
+            className={cn(
+              "rounded p-0.5 text-muted-foreground opacity-0 group-hover:opacity-100",
+              "hover:text-destructive hover:bg-destructive/10",
+              "disabled:pointer-events-none disabled:opacity-50",
+              "transition-opacity",
+            )}
+          >
+            <RemoveIcon />
+          </button>
+        </PermissionGate>
+      </div>
+    </li>
+  );
+}
+
+function RemoveIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}

package/src/iam-policy/PrincipalPicker.tsx

@@ -0,0 +1,347 @@
+"use client";
+
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import type { ApiResourceRefView } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { useResourceAccess } from "./useResourceAccess";
+import { ProviderBadge, providerLabel } from "./ProviderBadge";
+
+/** A principal selected through {@link PrincipalPicker}. */
+export interface SelectedPrincipal {
+  /** identity_account ID (`ida_...`). */
+  readonly id: string;
+  /** Display name (falls back to email, then ID). */
+  readonly name: string;
+  /** Email address, if known. */
+  readonly email: string;
+  /** Full view for richer rendering (avatar, provider). */
+  readonly view: ApiResourceRefView;
+}
+
+/** Props for {@link PrincipalPicker}. */
+export interface PrincipalPickerProps {
+  /** Organization whose members are selectable. */
+  readonly orgId: string;
+  /** Currently selected principal, or `null`. Controlled. */
+  readonly value: SelectedPrincipal | null;
+  /** Fired when the selection changes. */
+  readonly onChange: (principal: SelectedPrincipal | null) => void;
+  /** Principal IDs to hide/disable because they already have access. */
+  readonly excludePrincipalIds?: readonly string[];
+  /** Disable the control. */
+  readonly disabled?: boolean;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Accessible combobox for picking an organization member to share with.
+ *
+ * Replaces raw account-ID entry: users type a name or email and choose a
+ * person from the org's member list. Because email is not unique across
+ * identity sources, each candidate shows a {@link ProviderBadge} so accounts
+ * that share an email (e.g. a direct account and a federated one) can be told
+ * apart. The resolved `identity_account` ID is carried internally — the user
+ * never sees it.
+ *
+ * Members who already have access are shown disabled, so the same person is
+ * not granted twice.
+ *
+ * Search is over the org member list the caller can already see
+ * (`listResourceAccessByPrincipal` on the organization), so it introduces no
+ * new account-enumeration surface.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ */
+export function PrincipalPicker({
+  orgId,
+  value,
+  onChange,
+  excludePrincipalIds,
+  disabled = false,
+  className,
+}: PrincipalPickerProps) {
+  const listboxId = useId();
+  const { members, isLoading, error } = useResourceAccess(
+    orgId ? { kind: "organization", id: orgId } : null,
+  );
+
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const excluded = useMemo(
+    () => new Set(excludePrincipalIds ?? []),
+    [excludePrincipalIds],
+  );
+
+  // Org members that are identity accounts, deduped by ID. The org list groups
+  // by principal, so each ID appears once already; the dedupe guards against
+  // inherited-role duplicates.
+  const candidates = useMemo(() => {
+    const byId = new Map<string, ApiResourceRefView>();
+    for (const entry of members) {
+      const p = entry.principal;
+      if (!p || p.kind !== "identity_account" || !p.id) continue;
+      if (!byId.has(p.id)) byId.set(p.id, p);
+    }
+    return [...byId.values()];
+  }, [members]);
+
+  // Emails that appear on more than one candidate — these are the rows where
+  // the provider badge is doing real disambiguation work.
+  const duplicatedEmails = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const c of candidates) {
+      const email = c.email?.toLowerCase();
+      if (email) counts.set(email, (counts.get(email) ?? 0) + 1);
+    }
+    return new Set(
+      [...counts.entries()].filter(([, n]) => n > 1).map(([email]) => email),
+    );
+  }, [candidates]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return candidates;
+    return candidates.filter((c) => {
+      const name = (c.name ?? "").toLowerCase();
+      const email = (c.email ?? "").toLowerCase();
+      return name.includes(q) || email.includes(q);
+    });
+  }, [candidates, query]);
+
+  const commitSelection = useCallback(
+    (view: ApiResourceRefView) => {
+      if (excluded.has(view.id)) return;
+      onChange({
+        id: view.id,
+        name: view.name || view.email || view.id,
+        email: view.email,
+        view,
+      });
+      setQuery("");
+      setOpen(false);
+    },
+    [excluded, onChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const choice = filtered[activeIndex];
+        if (choice && !excluded.has(choice.id)) commitSelection(choice);
+      } else if (e.key === "Escape") {
+        setOpen(false);
+      }
+    },
+    [filtered, activeIndex, excluded, commitSelection],
+  );
+
+  // Selected state: show a chip with a clear affordance instead of the input.
+  if (value) {
+    return (
+      <div className={cn("space-y-1", className)}>
+        <span className="block text-xs font-medium text-foreground">Person</span>
+        <div className="flex items-center justify-between gap-2 rounded-md border border-input bg-background px-2.5 py-1.5">
+          <div className="flex min-w-0 items-center gap-2">
+            <div
+              className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.6rem] font-medium text-muted-foreground"
+              aria-hidden="true"
+            >
+              {(value.name[0] ?? "?").toUpperCase()}
+            </div>
+            <div className="min-w-0">
+              <div className="flex items-center gap-1.5">
+                <span className="truncate text-xs text-foreground">{value.name}</span>
+                <ProviderBadge principal={value.view} />
+              </div>
+              {value.email && value.email !== value.name && (
+                <span className="block truncate text-[0.6rem] text-muted-foreground">
+                  {value.email}
+                </span>
+              )}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={() => onChange(null)}
+            disabled={disabled}
+            aria-label="Clear selected person"
+            className={cn(
+              "shrink-0 rounded p-0.5 text-muted-foreground",
+              "hover:text-foreground hover:bg-accent-hover",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            <ClearIcon />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <label
+        htmlFor={`${listboxId}-input`}
+        className="block text-xs font-medium text-foreground"
+      >
+        Person
+      </label>
+      <div className="relative">
+        <input
+          id={`${listboxId}-input`}
+          ref={inputRef}
+          type="text"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          autoComplete="off"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+            setActiveIndex(0);
+          }}
+          onFocus={() => setOpen(true)}
+          onBlur={() => {
+            // Delay so option mousedown can register before close.
+            window.setTimeout(() => setOpen(false), 120);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Search by name or email"
+          disabled={disabled || isLoading}
+          autoFocus
+          className={cn(
+            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
+            "placeholder:text-muted-foreground",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+          )}
+        />
+
+        {open && (
+          <ul
+            id={listboxId}
+            role="listbox"
+            aria-label="Organization members"
+            className={cn(
+              "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-border bg-popover py-1 shadow-md",
+            )}
+          >
+            {isLoading && (
+              <li className="px-2.5 py-2 text-xs text-muted-foreground">
+                Loading members…
+              </li>
+            )}
+
+            {!isLoading && error && (
+              <li className="px-2.5 py-2 text-[0.65rem] text-destructive" role="alert">
+                {getUserMessage(error)}
+              </li>
+            )}
+
+            {!isLoading && !error && filtered.length === 0 && (
+              <li className="px-2.5 py-2 text-xs text-muted-foreground">
+                {query.trim()
+                  ? "No members match your search."
+                  : "No members to share with."}
+              </li>
+            )}
+
+            {!isLoading &&
+              !error &&
+              filtered.map((c, index) => {
+                const isExcluded = excluded.has(c.id);
+                const isActive = index === activeIndex;
+                const name = c.name || c.email || c.id;
+                // Show the provider badge when it disambiguates: an external
+                // identity source, or a shared email across candidates.
+                const showBadge =
+                  !!providerLabel(c) &&
+                  (c.identityOrigin?.providerDisplayName !== "Stigmer" ||
+                    (!!c.email && duplicatedEmails.has(c.email.toLowerCase())));
+                return (
+                  <li
+                    key={c.id}
+                    role="option"
+                    aria-selected={isActive}
+                    aria-disabled={isExcluded}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    onMouseDown={(e) => {
+                      // Prevent input blur before selection commits.
+                      e.preventDefault();
+                      if (!isExcluded) commitSelection(c);
+                    }}
+                    className={cn(
+                      "flex items-center justify-between gap-2 px-2.5 py-1.5",
+                      isExcluded
+                        ? "cursor-not-allowed opacity-50"
+                        : "cursor-pointer",
+                      isActive && !isExcluded && "bg-accent-hover",
+                    )}
+                  >
+                    <div className="flex min-w-0 items-center gap-2">
+                      <div
+                        className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-[0.6rem] font-medium text-muted-foreground"
+                        aria-hidden="true"
+                      >
+                        {(name[0] ?? "?").toUpperCase()}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-1.5">
+                          <span className="truncate text-xs text-foreground">
+                            {name}
+                          </span>
+                          {showBadge && <ProviderBadge principal={c} />}
+                        </div>
+                        {c.email && c.email !== name && (
+                          <span className="block truncate text-[0.6rem] text-muted-foreground">
+                            {c.email}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    {isExcluded && (
+                      <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+                        Has access
+                      </span>
+                    )}
+                  </li>
+                );
+              })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ClearIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+  );
+}

package/src/iam-policy/ProviderBadge.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import type { ApiResourceRefView } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
+import { cn } from "@stigmer/theme";
+
+/**
+ * The human-readable identity-source label for a principal, or `""` when none
+ * is known.
+ *
+ * Email is not an identity key in Stigmer — a person can have a direct account
+ * and federated accounts that share one email. This label (e.g. "Stigmer" for
+ * direct sign-ups, or an IdentityProvider's display name for federated ones)
+ * is what lets the UI tell those accounts apart.
+ */
+export function providerLabel(principal: ApiResourceRefView | undefined): string {
+  return principal?.identityOrigin?.providerDisplayName ?? "";
+}
+
+/** Props for {@link ProviderBadge}. */
+export interface ProviderBadgeProps {
+  /** The principal whose identity source to display. */
+  readonly principal: ApiResourceRefView | undefined;
+  /** Additional CSS class names. */
+  readonly className?: string;
+}
+
+/**
+ * A subtle pill naming the identity source an account belongs to.
+ *
+ * Renders nothing when no provider label is available (e.g. legacy accounts
+ * with unspecified provisioning mode), so it never adds empty chrome.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ */
+export function ProviderBadge({ principal, className }: ProviderBadgeProps) {
+  const label = providerLabel(principal);
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
+        "bg-muted-subtle text-muted-foreground",
+        className,
+      )}
+      title={`Identity provider: ${label}`}
+    >
+      {label}
+    </span>
+  );
+}