@stigmer/react 0.0.39 → 0.0.41

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

package/src/api-key/useCreateApiKey.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ApiKeyInput } from "@stigmer/sdk";
+import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { useStigmer } from "../hooks";
+import { toError } from "../internal/toError";
+
+export interface UseCreateApiKeyReturn {
+  readonly create: (input: ApiKeyInput) => Promise<ApiKey>;
+  readonly isCreating: boolean;
+  readonly error: Error | null;
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `apiKey.create()` with loading and error
+ * state.
+ *
+ * Creates an API key resource. The caller provides an
+ * {@link ApiKeyInput} with `name`, `org`, and optionally `expiresAt`
+ * or `neverExpires`.
+ *
+ * **Critical**: The returned {@link ApiKey} is the *only* time the
+ * raw key value is available — it is returned in `spec.keyHash` of
+ * the create response. After creation the server stores only the
+ * hash; subsequent queries return an empty `keyHash` and only the
+ * `fingerprint` (last 6 characters) for display.
+ *
+ * Callers must capture the raw key from the resolved promise and
+ * present it to the user immediately (e.g. via
+ * {@link ApiKeyCreatedAlert}).
+ *
+ * @example
+ * ```tsx
+ * const { create, isCreating, error } = useCreateApiKey();
+ *
+ * const apiKey = await create({
+ *   name: "ci-deploy-key",
+ *   org: "acme",
+ *   neverExpires: true,
+ * });
+ * // apiKey.spec?.keyHash contains the raw key — show it once
+ * ```
+ */
+export function useCreateApiKey(): UseCreateApiKeyReturn {
+  const stigmer = useStigmer();
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const create = useCallback(
+    async (input: ApiKeyInput): Promise<ApiKey> => {
+      setIsCreating(true);
+      setError(null);
+
+      try {
+        return await stigmer.apiKey.create(input);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { create, isCreating, error, clearError };
+}

package/src/api-key/useDeleteApiKey.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { useCallback, 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 UseDeleteApiKeyReturn {
+  readonly deleteKey: (id: string) => Promise<ApiKey>;
+  readonly isDeleting: boolean;
+  readonly error: Error | null;
+  readonly clearError: () => void;
+}
+
+/**
+ * Behavior hook that wraps `apiKey.delete()` with loading and error
+ * state.
+ *
+ * Deletes an API key by its resource ID. Returns the deleted
+ * {@link ApiKey} on success so callers can confirm which key was
+ * removed. The deletion is permanent — the key can no longer be
+ * used for authentication.
+ *
+ * @example
+ * ```tsx
+ * const { deleteKey, isDeleting, error } = useDeleteApiKey();
+ *
+ * await deleteKey("key-id-abc123");
+ * refetch(); // refresh the list after deletion
+ * ```
+ */
+export function useDeleteApiKey(): UseDeleteApiKeyReturn {
+  const stigmer = useStigmer();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const deleteKey = useCallback(
+    async (id: string): Promise<ApiKey> => {
+      setIsDeleting(true);
+      setError(null);
+
+      try {
+        return await stigmer.apiKey.delete(id);
+      } catch (err) {
+        setError(toError(err));
+        throw err;
+      } finally {
+        setIsDeleting(false);
+      }
+    },
+    [stigmer],
+  );
+
+  return { deleteKey, isDeleting, error, clearError };
+}

package/src/composer/SessionComposer.tsx

@@ -400,6 +400,19 @@ export function SessionComposer({
     pool.availableKeys,
   );
 
+  // ---------------------------------------------------------------------------
+  // Pool-resolve notification — when POOL_RESOLVE transitions agentSetup to
+  // "ready" reactively (via the useEffect inside useAgentSetup), the
+  // imperative callbacks (handleAgentSelect, handleEnvSubmit) are not
+  // involved, so onAgentResolutionChange would never fire. This effect
+  // bridges that gap so the parent always knows the current resolution.
+  // ---------------------------------------------------------------------------
+
+  useEffect(() => {
+    if (agentSetup.state.status !== "ready") return;
+    onAgentResolutionChange?.(agentSetup.state.resolution);
+  }, [agentSetup.state, onAgentResolutionChange]);
+
   // ---------------------------------------------------------------------------
   // Attachments — file upload state machine
   // ---------------------------------------------------------------------------

package/src/index.ts

@@ -49,6 +49,8 @@ export {
   useSessionConversation,
   useAgentRefFromSession,
   groupSessionsByTime,
+  PENDING_SUBJECT,
+  resolvedSubject,
 } from "./session";
 export type {
   CreateSessionInput,
@@ -323,11 +325,29 @@ export type {
   CreateOrganizationFormProps,
 } from "./organization";
 
+// API Key — data hooks, behavior hooks, and styled components for API key lifecycle
+export {
+  useApiKeyList,
+  useCreateApiKey,
+  useDeleteApiKey,
+  ApiKeyListPanel,
+  CreateApiKeyForm,
+  ApiKeyCreatedAlert,
+} from "./api-key";
+export type {
+  UseApiKeyListReturn,
+  UseCreateApiKeyReturn,
+  UseDeleteApiKeyReturn,
+  ApiKeyListPanelProps,
+  CreateApiKeyFormProps,
+  ApiKeyCreatedAlertProps,
+} from "./api-key";
+
 // Error — structured error display with classification, retry, and contextual guidance
 export { ErrorMessage, SecretFlowErrorGuide, isSecretFlowError } from "./error";
 export type { ErrorMessageProps, SecretFlowErrorGuideProps } from "./error";
 
-// Library — cross-resource UI components, resource detection, apply flow, and browsing
+// Library — cross-resource UI components, resource detection, apply flow, browsing, and visibility management
 export {
   ScopeToggle,
   ResourceListView,
@@ -341,6 +361,8 @@ export {
   serializeAgentYaml,
   serializeMcpServerYaml,
   useApplyResource,
+  VisibilityToggle,
+  useUpdateVisibility,
 } from "./library";
 export type {
   ScopeToggleProps,
@@ -355,6 +377,9 @@ export type {
   UseApplyResourceReturn,
   ApplyResourceResult,
   PushSkillParams,
+  VisibilityToggleProps,
+  VisibilityResourceKind,
+  UseUpdateVisibilityReturn,
 } from "./library";
 
 // Agent Instance — data hooks, list hook, personal convenience hook, and behavior hook