@stigmer/react 0.0.89 → 0.0.91

package/src/platform-client/PlatformClientListPanel.tsx

@@ -0,0 +1,413 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import type { PlatformClient } from "@stigmer/protos/ai/stigmer/iam/platformclient/v1/api_pb";
+import { usePlatformClientList } from "./usePlatformClientList";
+import { useDeletePlatformClient } from "./useDeletePlatformClient";
+
+/** Props for {@link PlatformClientListPanel}. */
+export interface PlatformClientListPanelProps {
+  /** Organization slug whose platform clients should be listed. */
+  readonly org: string;
+  /** Fired when the user wants to edit a platform client. */
+  readonly onEdit?: (pc: PlatformClient) => void;
+  /** Expose the refetch function so parents can trigger a list refresh. */
+  readonly onRefetchRef?: (refetch: () => void) => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Displays a list of {@link PlatformClient} resources for an
+ * organization with inline delete confirmation.
+ *
+ * Each row shows the client name, `client_id` (monospace), secret
+ * fingerprint, expiry status, and creation date. A delete button
+ * triggers an inline confirmation flow.
+ *
+ * Platform clients are admin-level resources with small cardinality
+ * (typically 1–5 per org), so the list is rendered without pagination.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <PlatformClientListPanel org="acme" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PlatformClientListPanel
+ *   org="acme"
+ *   onEdit={(pc) => setFlow({ phase: "editing", platformClient: pc })}
+ *   onRefetchRef={(refetch) => { listRefetchRef.current = refetch; }}
+ * />
+ * ```
+ */
+export function PlatformClientListPanel({
+  org,
+  onEdit,
+  onRefetchRef,
+  className,
+}: PlatformClientListPanelProps) {
+  const { platformClients, isLoading, error, refetch } =
+    usePlatformClientList(org);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+
+  if (onRefetchRef) {
+    onRefetchRef(refetch);
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn("space-y-2", className)}
+        aria-busy="true"
+        aria-label="Loading platform clients"
+      >
+        {Array.from({ length: 2 }, (_, i) => (
+          <div
+            key={i}
+            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <p className={cn("text-destructive text-xs", className)} role="alert">
+        {getUserMessage(error)}
+      </p>
+    );
+  }
+
+  if (platformClients.length === 0) {
+    return (
+      <p
+        className={cn(
+          "text-muted-foreground py-4 text-center text-xs",
+          className,
+        )}
+      >
+        No platform clients configured.
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={cn("space-y-2", className)}
+      role="list"
+      aria-label="Platform clients"
+    >
+      {platformClients.map((pc) => {
+        const id = pc.metadata?.id ?? "";
+        return (
+          <PlatformClientRow
+            key={id}
+            platformClient={pc}
+            isConfirming={confirmingId === id}
+            onEdit={onEdit ? () => onEdit(pc) : undefined}
+            onConfirmDelete={() => setConfirmingId(id)}
+            onCancelDelete={() => setConfirmingId(null)}
+            onDeleted={() => {
+              setConfirmingId(null);
+              refetch();
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PlatformClientRow (internal)
+// ---------------------------------------------------------------------------
+
+function PlatformClientRow({
+  platformClient,
+  isConfirming,
+  onEdit,
+  onConfirmDelete,
+  onCancelDelete,
+  onDeleted,
+}: {
+  platformClient: PlatformClient;
+  isConfirming: boolean;
+  onEdit?: () => void;
+  onConfirmDelete: () => void;
+  onCancelDelete: () => void;
+  onDeleted: () => void;
+}) {
+  const { deletePlatformClient, isDeleting, error } =
+    useDeletePlatformClient();
+
+  const id = platformClient.metadata?.id ?? "";
+  const spec = platformClient.spec;
+  const name = platformClient.metadata?.name ?? "Unnamed client";
+  const clientId = spec?.clientId ?? "";
+  const fingerprint = spec?.secretFingerprint ?? "";
+  const createdAt =
+    platformClient.status?.audit?.specAudit?.createdAt;
+
+  const handleDelete = useCallback(async () => {
+    try {
+      await deletePlatformClient({ resourceId: id });
+      onDeleted();
+    } catch {
+      // error state is surfaced via the hook
+    }
+  }, [id, deletePlatformClient, onDeleted]);
+
+  if (isConfirming) {
+    return (
+      <div
+        role="listitem"
+        className="flex items-center justify-between rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5"
+      >
+        <div className="min-w-0 flex-1">
+          <p className="text-xs text-foreground">
+            Delete <span className="font-medium">{name}</span>?
+            {clientId && (
+              <span className="ml-1 text-muted-foreground">
+                This will invalidate client ID{" "}
+                <code className="font-mono">{clientId}</code>.
+              </span>
+            )}
+          </p>
+          {error && (
+            <p className="mt-0.5 text-[0.65rem] text-destructive">
+              {getUserMessage(error)}
+            </p>
+          )}
+        </div>
+
+        <div className="flex shrink-0 items-center gap-1.5">
+          <button
+            type="button"
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
+              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            {isDeleting && <SpinnerIcon />}
+            Delete
+          </button>
+          <button
+            type="button"
+            onClick={onCancelDelete}
+            disabled={isDeleting}
+            className={cn(
+              "rounded-md px-2.5 py-1 text-xs",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      role="listitem"
+      className="flex items-center gap-3 rounded-lg border border-border/60 px-3 py-2.5 hover:border-border transition-colors"
+    >
+      <KeyIcon />
+
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-foreground">
+          {name}
+        </span>
+        {clientId && (
+          <span className="block truncate text-xs text-muted-foreground font-mono">
+            {clientId}
+          </span>
+        )}
+      </div>
+
+      <div className="hidden sm:flex shrink-0 items-center gap-3 text-xs text-muted-foreground">
+        {fingerprint && (
+          <span
+            className="font-mono"
+            title={`Secret fingerprint: ${fingerprint}`}
+          >
+            ••••{fingerprint.slice(-4)}
+          </span>
+        )}
+        <ExpiryBadge spec={spec} />
+        {spec?.autoProvisionAccounts && (
+          <span className="inline-flex items-center rounded-full border border-primary/30 bg-primary-subtle px-2 py-0.5 text-[0.65rem] font-medium text-primary">
+            JIT
+          </span>
+        )}
+        {createdAt && (
+          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
+            {formatShortDate(timestampDate(createdAt))}
+          </span>
+        )}
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1">
+        {onEdit && (
+          <button
+            type="button"
+            onClick={onEdit}
+            aria-label={`Edit ${name}`}
+            className={cn(
+              "shrink-0 rounded p-1",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "transition-colors",
+            )}
+          >
+            <PencilIcon />
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={onConfirmDelete}
+          aria-label={`Delete ${name}`}
+          className={cn(
+            "shrink-0 rounded p-1",
+            "text-muted-foreground hover:text-destructive hover:bg-destructive/10",
+            "transition-colors",
+          )}
+        >
+          <TrashIcon />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ExpiryBadge (internal)
+// ---------------------------------------------------------------------------
+
+function ExpiryBadge({ spec }: { spec: PlatformClient["spec"] }) {
+  if (spec?.neverExpires) {
+    return (
+      <span className="text-[0.65rem] text-muted-foreground">No expiry</span>
+    );
+  }
+  if (spec?.expiresAt) {
+    const date = timestampDate(spec.expiresAt);
+    const isExpired = date < new Date();
+    return (
+      <span
+        className={cn(
+          "text-[0.65rem]",
+          isExpired ? "text-destructive font-medium" : "text-muted-foreground",
+        )}
+        title={`Expires ${date.toISOString()}`}
+      >
+        {isExpired ? "Expired" : `Exp ${formatShortDate(date)}`}
+      </span>
+    );
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+function formatShortDate(date: Date): string {
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function KeyIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className="shrink-0 text-muted-foreground"
+    >
+      <circle cx="10.5" cy="5.5" r="3" />
+      <path d="M8.5 7.5L3 13l-.5-2.5L5 10l1-1-1-1 3.5.5z" />
+    </svg>
+  );
+}
+
+function PencilIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M11 2.5l2.5 2.5L5 13.5H2.5V11L11 2.5z" />
+    </svg>
+  );
+}
+
+function TrashIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2.5 4h11M5.5 4V2.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V4" />
+      <path d="M12.5 4v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V4" />
+      <line x1="6.5" y1="7" x2="6.5" y2="11" />
+      <line x1="9.5" y1="7" x2="9.5" y2="11" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      className="animate-spin"
+      aria-hidden="true"
+    >
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/platform-client/PlatformClientSecretAlert.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link PlatformClientSecretAlert}. */
+export interface PlatformClientSecretAlertProps {
+  /** The `client_id` to display alongside the secret for pairing context. */
+  readonly clientId: string;
+  /** The raw client secret value to display. Shown exactly once. */
+  readonly clientSecret: string;
+  /** Whether this alert follows a creation or a secret rotation. */
+  readonly context: "created" | "rotated";
+  /** Fired when the user dismisses the alert. */
+  readonly onDismiss: () => void;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+const COPIED_FEEDBACK_MS = 2000;
+
+/**
+ * One-time reveal component displayed after a platform client is
+ * created or its secret is rotated.
+ *
+ * Shows both the `client_id` (read-only, for context) and the raw
+ * `client_secret` with a **Copy** button. The secret is only
+ * available once — the server never returns it again — so this
+ * component prominently warns the user to copy it immediately.
+ *
+ * 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
+ * <PlatformClientSecretAlert
+ *   clientId="stgm_pc_abc123"
+ *   clientSecret="stgm_secret_xyz..."
+ *   context="created"
+ *   onDismiss={() => setFlow({ phase: "idle" })}
+ * />
+ * ```
+ */
+export function PlatformClientSecretAlert({
+  clientId,
+  clientSecret,
+  context,
+  onDismiss,
+  className,
+}: PlatformClientSecretAlertProps) {
+  const [copiedField, setCopiedField] = useState<
+    "id" | "secret" | null
+  >(null);
+
+  const handleCopy = useCallback(
+    async (value: string, field: "id" | "secret") => {
+      try {
+        await navigator.clipboard.writeText(value);
+        setCopiedField(field);
+        setTimeout(() => setCopiedField(null), COPIED_FEEDBACK_MS);
+      } catch {
+        const el = document.getElementById(
+          field === "secret"
+            ? "stgm-pc-secret-reveal"
+            : "stgm-pc-client-id-reveal",
+        );
+        if (el) {
+          const selection = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(el);
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }
+      }
+    },
+    [],
+  );
+
+  const title =
+    context === "created"
+      ? "Platform client created"
+      : "Client secret rotated";
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        "rounded-lg border border-primary/30 bg-primary-subtle p-4",
+        className,
+      )}
+    >
+      <div className="mb-3 flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground">{title}</p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Copy the client secret now. It will not be shown again.
+          </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="space-y-2">
+        <CopyableField
+          id="stgm-pc-client-id-reveal"
+          label="Client ID"
+          value={clientId}
+          copied={copiedField === "id"}
+          onCopy={() => handleCopy(clientId, "id")}
+        />
+        <CopyableField
+          id="stgm-pc-secret-reveal"
+          label="Client secret"
+          value={clientSecret}
+          copied={copiedField === "secret"}
+          onCopy={() => handleCopy(clientSecret, "secret")}
+        />
+      </div>
+
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {copiedField === "id" && "Client ID copied to clipboard"}
+        {copiedField === "secret" && "Client secret copied to clipboard"}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CopyableField (internal)
+// ---------------------------------------------------------------------------
+
+function CopyableField({
+  id,
+  label,
+  value,
+  copied,
+  onCopy,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  copied: boolean;
+  onCopy: () => void;
+}) {
+  return (
+    <div>
+      <span className="text-[0.65rem] font-medium text-muted-foreground">
+        {label}
+      </span>
+      <div className="mt-0.5 flex items-center gap-2">
+        <code
+          id={id}
+          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",
+          )}
+        >
+          {value}
+        </code>
+        <button
+          type="button"
+          onClick={onCopy}
+          aria-label={`Copy ${label}`}
+          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>
+  );
+}

package/src/platform-client/index.ts

@@ -0,0 +1,49 @@
+export {
+  usePlatformClientList,
+  type UsePlatformClientListReturn,
+} from "./usePlatformClientList";
+
+export {
+  usePlatformClient,
+  type UsePlatformClientReturn,
+} from "./usePlatformClient";
+
+export {
+  useCreatePlatformClient,
+  type UseCreatePlatformClientReturn,
+} from "./useCreatePlatformClient";
+
+export {
+  useUpdatePlatformClient,
+  type UseUpdatePlatformClientReturn,
+} from "./useUpdatePlatformClient";
+
+export {
+  useDeletePlatformClient,
+  type UseDeletePlatformClientReturn,
+} from "./useDeletePlatformClient";
+
+export {
+  useRotatePlatformClientSecret,
+  type UseRotatePlatformClientSecretReturn,
+} from "./useRotatePlatformClientSecret";
+
+export {
+  PlatformClientListPanel,
+  type PlatformClientListPanelProps,
+} from "./PlatformClientListPanel";
+
+export {
+  CreatePlatformClientForm,
+  type CreatePlatformClientFormProps,
+} from "./CreatePlatformClientForm";
+
+export {
+  PlatformClientDetailPanel,
+  type PlatformClientDetailPanelProps,
+} from "./PlatformClientDetailPanel";
+
+export {
+  PlatformClientSecretAlert,
+  type PlatformClientSecretAlertProps,
+} from "./PlatformClientSecretAlert";