@stigmer/react 0.0.39 → 0.0.41

package/src/agent/useAgentSetup.ts

@@ -2,8 +2,9 @@
 
 import { useCallback, useEffect, useReducer } from "react";
 import { create } from "@bufbuild/protobuf";
-import type { EnvVarInput, ResourceRef } from "@stigmer/sdk";
+import type { EnvVarInput, ResourceRef, Stigmer } from "@stigmer/sdk";
 import { ListAgentInstancesRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/io_pb";
+import type { AgentInstance } from "@stigmer/protos/ai/stigmer/agentic/agentinstance/v1/api_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
 import { useStigmer } from "../hooks";
 import { toError } from "../internal/toError";
@@ -22,6 +23,42 @@ import {
 const PERSONAL_LABEL = "stigmer.ai/personal";
 const FOR_AGENT_LABEL = "stigmer.ai/for-agent";
 
+/**
+ * Re-checks for an existing personal instance immediately before
+ * creating one. Narrows the race window when multiple clients
+ * (tabs, double-clicks) attempt to create simultaneously.
+ */
+async function findOrCreatePersonalInstance(
+  stigmer: Stigmer,
+  params: {
+    org: string;
+    agentId: string;
+    agentSlug: string;
+    agentLabel: string;
+    environmentRef: ResourceRef;
+  },
+): Promise<AgentInstance> {
+  const { org, agentId, agentSlug, agentLabel, environmentRef } = params;
+
+  const recheck = await stigmer.agentInstance.list(
+    create(ListAgentInstancesRequestSchema, {
+      org,
+      labels: {
+        [PERSONAL_LABEL]: "true",
+        [FOR_AGENT_LABEL]: agentLabel,
+      },
+    }),
+  );
+
+  if (recheck.items.length > 0) {
+    return recheck.items[0];
+  }
+
+  return stigmer.agentInstance.create(
+    buildPersonalInstanceInput({ org, agentId, agentSlug, environmentRef }),
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Public types (re-exported from agentSetupReducer for convenience)
 // ---------------------------------------------------------------------------
@@ -226,10 +263,11 @@ export function useAgentSetup(
         const existingKeys = new Set(
           Object.keys(personalEnv.environment?.spec?.data ?? {}),
         );
+        const personalOnlyMissing = diffEnvSpec(envSpecData, existingKeys);
         const missingVariables = diffEnvSpec(envSpecData, existingKeys, poolKeys);
 
-        if (missingVariables.length === 0) {
-          // All variables present — create personal instance.
+        if (personalOnlyMissing.length === 0) {
+          // Personal env covers all keys — create personal instance.
           const env = await personalEnv.getOrCreate();
           const envRef: ResourceRef = {
             org,
@@ -237,14 +275,13 @@ export function useAgentSetup(
             kind: ApiResourceKind.environment,
           };
 
-          const instance = await stigmer.agentInstance.create(
-            buildPersonalInstanceInput({
-              org,
-              agentId: agent.metadata!.id,
-              agentSlug: ref.slug,
-              environmentRef: envRef,
-            }),
-          );
+          const instance = await findOrCreatePersonalInstance(stigmer, {
+            org,
+            agentId: agent.metadata!.id,
+            agentSlug: ref.slug,
+            agentLabel,
+            environmentRef: envRef,
+          });
 
           const resolution: AgentResolution = {
             mode: "saved",
@@ -259,6 +296,19 @@ export function useAgentSetup(
           return { status: "ready", agentRef: ref, agentName, resolution };
         }
 
+        if (missingVariables.length === 0) {
+          // Pool covers remaining keys — use default instance, pool
+          // values flow via sessionVariables.toRuntimeEnv() at submit.
+          const resolution: AgentResolution = { mode: "direct" };
+          dispatch({
+            type: "RESOLVE_READY",
+            agentRef: ref,
+            agentName,
+            resolution,
+          });
+          return { status: "ready", agentRef: ref, agentName, resolution };
+        }
+
         // Missing variables — transition to needsEnvVars.
         dispatch({
           type: "RESOLVE_NEEDS_ENV",
@@ -352,14 +402,14 @@ export function useAgentSetup(
           kind: ApiResourceKind.environment,
         };
 
-        const instance = await stigmer.agentInstance.create(
-          buildPersonalInstanceInput({
-            org,
-            agentId,
-            agentSlug: agentRef.slug,
-            environmentRef: envRef,
-          }),
-        );
+        const agentLabel = `${agentRef.org}/${agentRef.slug}`;
+        const instance = await findOrCreatePersonalInstance(stigmer, {
+          org,
+          agentId,
+          agentSlug: agentRef.slug,
+          agentLabel,
+          environmentRef: envRef,
+        });
 
         const resolution: AgentResolution = {
           mode: "saved",

package/src/api-key/ApiKeyCreatedAlert.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ApiKeyCreatedAlertProps {
+  /** The raw API key value to display. Shown exactly once. */
+  readonly rawKey: string;
+  /** Human-readable name of the key for context. */
+  readonly keyName: string;
+  /** Fired when the user dismisses the alert. */
+  readonly onDismiss: () => void;
+  readonly className?: string;
+}
+
+/**
+ * One-time reveal component displayed after a new API key is created.
+ *
+ * Shows the raw key value in a monospace read-only field with a
+ * **Copy** button. The key is only available at creation time — 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
+ * <ApiKeyCreatedAlert
+ *   rawKey="stgm_live_abc123..."
+ *   keyName="ci-deploy-key"
+ *   onDismiss={() => setRevealedKey(null)}
+ * />
+ * ```
+ */
+export function ApiKeyCreatedAlert({
+  rawKey,
+  keyName,
+  onDismiss,
+  className,
+}: ApiKeyCreatedAlertProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(rawKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback: select the text so the user can manually copy
+      const el = document.getElementById("stgm-api-key-reveal");
+      if (el) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, [rawKey]);
+
+  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">
+            API key created: {keyName}
+          </p>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Copy this key 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="flex items-center gap-2">
+        <code
+          id="stgm-api-key-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",
+          )}
+        >
+          {rawKey}
+        </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>
+  );
+}

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>
+  );
+}