@stigmer/react 0.0.36 → 0.0.40

package/src/api-key/ApiKeyListPanel.tsx

@@ -0,0 +1,359 @@
+"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 { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useApiKeyList } from "./useApiKeyList";
+import { useDeleteApiKey } from "./useDeleteApiKey";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ApiKeyListPanelProps {
+  /** Re-expose refetch so parents can trigger a list refresh. */
+  readonly onRefetchRef?: (refetch: () => void) => void;
+  readonly className?: string;
+}
+
+/**
+ * Displays a list of {@link ApiKey} resources for the authenticated
+ * identity with inline delete confirmation.
+ *
+ * Each key is rendered as a row showing name, fingerprint, creation
+ * date, expiry, and last-used time. A delete button triggers an
+ * inline confirmation — the row transforms to show confirm/cancel
+ * actions.
+ *
+ * API keys are identity-scoped: the server returns all keys belonging
+ * to the authenticated user, regardless of organization.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <ApiKeyListPanel />
+ *
+ * <ApiKeyListPanel
+ *   onRefetchRef={(refetch) => { listRefetchRef.current = refetch; }}
+ * />
+ * ```
+ */
+export function ApiKeyListPanel({
+  onRefetchRef,
+  className,
+}: ApiKeyListPanelProps) {
+  const { apiKeys, isLoading, error, refetch } = useApiKeyList();
+  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 API keys"
+      >
+        {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 (apiKeys.length === 0) {
+    return (
+      <p
+        className={cn(
+          "text-muted-foreground py-4 text-center text-xs",
+          className,
+        )}
+      >
+        No API keys yet.
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={cn("space-y-2", className)}
+      role="list"
+      aria-label="API keys"
+    >
+      {apiKeys.map((key) => {
+        const id = key.metadata?.id ?? "";
+        return (
+          <ApiKeyRow
+            key={id}
+            apiKey={key}
+            isConfirming={confirmingId === id}
+            onConfirmDelete={() => setConfirmingId(id)}
+            onCancelDelete={() => setConfirmingId(null)}
+            onDeleted={() => {
+              setConfirmingId(null);
+              refetch();
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ApiKeyRow (internal)
+// ---------------------------------------------------------------------------
+
+function ApiKeyRow({
+  apiKey,
+  isConfirming,
+  onConfirmDelete,
+  onCancelDelete,
+  onDeleted,
+}: {
+  apiKey: ApiKey;
+  isConfirming: boolean;
+  onConfirmDelete: () => void;
+  onCancelDelete: () => void;
+  onDeleted: () => void;
+}) {
+  const { deleteKey, isDeleting, error } = useDeleteApiKey();
+
+  const id = apiKey.metadata?.id ?? "";
+  const name = apiKey.metadata?.name || apiKey.metadata?.slug || "Unnamed key";
+  const fingerprint = apiKey.spec?.fingerprint;
+  const neverExpires = apiKey.spec?.neverExpires;
+  const expiresAt = apiKey.spec?.expiresAt;
+  const lastUsedAt = apiKey.status?.lastUsedAt;
+  const createdAt = apiKey.status?.audit?.specAudit?.createdAt;
+
+  const handleDelete = useCallback(async () => {
+    try {
+      await deleteKey(id);
+      onDeleted();
+    } catch {
+      // error state is surfaced via the hook
+    }
+  }, [id, deleteKey, 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>?
+            {fingerprint && (
+              <span className="text-muted-foreground">
+                {" "}
+                (…{fingerprint})
+              </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"
+    >
+      {/* Key icon */}
+      <KeyIcon />
+
+      {/* Name + fingerprint */}
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-sm font-medium text-foreground">
+          {name}
+        </span>
+        {fingerprint && (
+          <span className="block text-xs text-muted-foreground font-mono">
+            …{fingerprint}
+          </span>
+        )}
+      </div>
+
+      {/* Metadata columns */}
+      <div className="hidden sm:flex shrink-0 items-center gap-4 text-xs text-muted-foreground">
+        {createdAt && (
+          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
+            {formatShortDate(timestampDate(createdAt))}
+          </span>
+        )}
+        <span>
+          {neverExpires
+            ? "No expiry"
+            : expiresAt
+              ? `Expires ${formatShortDate(timestampDate(expiresAt))}`
+              : "No expiry"}
+        </span>
+        <span>
+          {lastUsedAt ? formatRelativeTime(timestampDate(lastUsedAt)) : "Never used"}
+        </span>
+      </div>
+
+      {/* Delete 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>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+function formatShortDate(date: Date): string {
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function formatRelativeTime(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+
+  if (diffMs < 0) return "Just now";
+
+  const seconds = Math.floor(diffMs / 1000);
+  if (seconds < 60) return "Just now";
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+
+  return formatShortDate(date);
+}
+
+// ---------------------------------------------------------------------------
+// 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="5.5" cy="10.5" r="3" />
+      <path d="M8 8l5.5-5.5M11 5l2-2M10.5 2.5l2 2" />
+    </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/api-key/CreateApiKeyForm.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useCallback, useState, type FormEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { getUserMessage } from "@stigmer/sdk";
+import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useCreateApiKey } from "./useCreateApiKey";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface CreateApiKeyFormProps {
+  /** Organization slug used as the `org` field when creating the key. */
+  readonly org: string;
+  /**
+   * Fired with the newly created API key after successful creation.
+   * The `spec.keyHash` field of the returned key contains the raw
+   * key value — available only at this moment.
+   */
+  readonly onCreated?: (apiKey: ApiKey) => void;
+  /** Fired when the user cancels creation. */
+  readonly onCancel?: () => void;
+  readonly className?: string;
+}
+
+type ExpiryOption = "30" | "60" | "90" | "never";
+
+/**
+ * Compact form for creating a new API key.
+ *
+ * Collects a **name** (required) and an **expiry** choice (30 / 60 /
+ * 90 days or never), then creates the key via {@link useCreateApiKey}.
+ * On success it fires `onCreated` with the full {@link ApiKey}
+ * response, which includes the raw key in `spec.keyHash`.
+ *
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <CreateApiKeyForm
+ *   org="acme"
+ *   onCreated={(key) => setRevealedKey(key)}
+ *   onCancel={() => setShowForm(false)}
+ * />
+ * ```
+ */
+export function CreateApiKeyForm({
+  org,
+  onCreated,
+  onCancel,
+  className,
+}: CreateApiKeyFormProps) {
+  const { create, isCreating, error, clearError } = useCreateApiKey();
+
+  const [name, setName] = useState("");
+  const [expiry, setExpiry] = useState<ExpiryOption>("never");
+
+  const trimmedName = name.trim();
+  const canSubmit = trimmedName !== "" && !isCreating;
+
+  const handleSubmit = useCallback(
+    async (e: FormEvent) => {
+      e.preventDefault();
+      if (!canSubmit) return;
+
+      clearError();
+      try {
+        const apiKey = await create({
+          name: trimmedName,
+          org,
+          ...(expiry === "never"
+            ? { neverExpires: true }
+            : { expiresAt: daysFromNow(Number(expiry)) }),
+        });
+        onCreated?.(apiKey);
+      } catch {
+        // error state is managed by useCreateApiKey
+      }
+    },
+    [canSubmit, trimmedName, org, expiry, create, clearError, onCreated],
+  );
+
+  return (
+    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
+      <div className="space-y-3">
+        {/* Name */}
+        <div className="space-y-1">
+          <label
+            htmlFor="stgm-new-apikey-name"
+            className="text-xs font-medium text-foreground"
+          >
+            Name
+          </label>
+          <input
+            id="stgm-new-apikey-name"
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="e.g. ci-deploy-key"
+            disabled={isCreating}
+            autoFocus
+            required
+            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",
+            )}
+          />
+        </div>
+
+        {/* Expiry */}
+        <fieldset className="space-y-1.5">
+          <legend className="text-xs font-medium text-foreground">
+            Expiration
+          </legend>
+          <div className="flex flex-wrap gap-2">
+            {EXPIRY_OPTIONS.map(({ value, label }) => (
+              <ExpiryRadio
+                key={value}
+                value={value}
+                label={label}
+                checked={expiry === value}
+                disabled={isCreating}
+                onChange={setExpiry}
+              />
+            ))}
+          </div>
+        </fieldset>
+      </div>
+
+      {error && (
+        <p className="text-destructive text-[0.65rem]" role="alert">
+          {getUserMessage(error)}
+        </p>
+      )}
+
+      <div className="flex items-center gap-2">
+        <button
+          type="submit"
+          disabled={!canSubmit}
+          className={cn(
+            "inline-flex 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",
+            "disabled:pointer-events-none disabled:opacity-40",
+          )}
+        >
+          {isCreating && <SpinnerIcon />}
+          Create API key
+        </button>
+
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={isCreating}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs",
+              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            Cancel
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Expiry helpers
+// ---------------------------------------------------------------------------
+
+const EXPIRY_OPTIONS: { value: ExpiryOption; label: string }[] = [
+  { value: "30", label: "30 days" },
+  { value: "60", label: "60 days" },
+  { value: "90", label: "90 days" },
+  { value: "never", label: "Never" },
+];
+
+function daysFromNow(days: number): Date {
+  const date = new Date();
+  date.setDate(date.getDate() + days);
+  return date;
+}
+
+// ---------------------------------------------------------------------------
+// ExpiryRadio (internal)
+// ---------------------------------------------------------------------------
+
+function ExpiryRadio({
+  value,
+  label,
+  checked,
+  disabled,
+  onChange,
+}: {
+  value: ExpiryOption;
+  label: string;
+  checked: boolean;
+  disabled: boolean;
+  onChange: (v: ExpiryOption) => void;
+}) {
+  return (
+    <label
+      className={cn(
+        "inline-flex cursor-pointer items-center rounded-md border px-2.5 py-1 text-xs transition-colors",
+        checked
+          ? "border-primary bg-primary-subtle text-primary font-medium"
+          : "border-input bg-background text-muted-foreground hover:border-border hover:text-foreground",
+        disabled && "pointer-events-none opacity-50",
+      )}
+    >
+      <input
+        type="radio"
+        name="stgm-apikey-expiry"
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        onChange={() => onChange(value)}
+        className="sr-only"
+      />
+      {label}
+    </label>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+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/api-key/index.ts

@@ -0,0 +1,12 @@
+export { useApiKeyList } from "./useApiKeyList";
+export type { UseApiKeyListReturn } from "./useApiKeyList";
+export { useCreateApiKey } from "./useCreateApiKey";
+export type { UseCreateApiKeyReturn } from "./useCreateApiKey";
+export { useDeleteApiKey } from "./useDeleteApiKey";
+export type { UseDeleteApiKeyReturn } from "./useDeleteApiKey";
+export { ApiKeyListPanel } from "./ApiKeyListPanel";
+export type { ApiKeyListPanelProps } from "./ApiKeyListPanel";
+export { CreateApiKeyForm } from "./CreateApiKeyForm";
+export type { CreateApiKeyFormProps } from "./CreateApiKeyForm";
+export { ApiKeyCreatedAlert } from "./ApiKeyCreatedAlert";
+export type { ApiKeyCreatedAlertProps } from "./ApiKeyCreatedAlert";

package/src/api-key/useApiKeyList.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+export interface UseApiKeyListReturn {
+  readonly apiKeys: readonly ApiKey[];
+  readonly isLoading: boolean;
+  readonly error: Error | null;
+  readonly refetch: () => void;
+}
+
+/**
+ * Data hook that fetches all {@link ApiKey} entries for the
+ * authenticated identity.
+ *
+ * API keys are identity-scoped — the server returns every key owned
+ * by the identity in the auth header, regardless of organization.
+ * Call `refetch()` to re-query after mutations (create / delete).
+ *
+ * The raw key value is never returned by `findAll` — only the
+ * `fingerprint` (last 6 characters) is available for display.
+ *
+ * @example
+ * ```tsx
+ * const { apiKeys, isLoading, error, refetch } = useApiKeyList();
+ *
+ * if (isLoading) return <Spinner />;
+ * apiKeys.map((k) => k.metadata?.name);
+ * ```
+ */
+export function useApiKeyList(): UseApiKeyListReturn {
+  const stigmer = useStigmer();
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+
+  useEffect(() => {
+    const cancelled = { current: false };
+
+    setIsLoading(true);
+    setError(null);
+
+    stigmer.apiKey.findAll().then(
+      (result) => {
+        if (cancelled.current) return;
+        setApiKeys([...result.entries]);
+        setIsLoading(false);
+      },
+      (err) => {
+        if (cancelled.current) return;
+        setError(toError(err));
+        setIsLoading(false);
+      },
+    );
+
+    return () => {
+      cancelled.current = true;
+    };
+  }, [stigmer, fetchKey]);
+
+  return { apiKeys, isLoading, error, refetch };
+}