@stigmer/react 0.4.8 → 0.5.1

package/src/provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import type { Stigmer, DeploymentMode } from "@stigmer/sdk";
 import { cn, resolvePresetClass } from "@stigmer/theme";
 import type { ThemePresetId } from "@stigmer/theme";
@@ -151,15 +151,23 @@ export function StigmerProvider({
   );
 }
 
+const RETRY_DELAYS_MS = [1_000, 2_000, 4_000];
+const TOKEN_POLL_INTERVAL_MS = 500;
+const TOKEN_POLL_MAX_MS = 10_000;
+
 /**
- * Fetches the model registry from the authenticated API on mount and
- * caches the result for the lifetime of the provider.
+ * Fetches the model registry from the authenticated API and caches
+ * the result for the lifetime of the provider.
  *
- * Uses the client's `baseUrl` and `getAuthCredential()` so the fetch
- * is authenticated with the same token the SDK uses for all other calls.
+ * Handles the auth race condition where `StigmerProvider` mounts before
+ * PKCE authentication is established (e.g. desktop release builds with
+ * a fresh localStorage). When the initial token is `null`, polls for
+ * a valid token before giving up. Retries on transient failures with
+ * exponential backoff. Exposes `refetch` for manual retry from the UI.
  */
 function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
-  const [state, setState] = useState<ModelRegistryState>({
+  const [version, setVersion] = useState(0);
+  const [state, setState] = useState<Omit<ModelRegistryState, "refetch">>({
     models: [],
     isLoading: true,
     error: null,
@@ -168,31 +176,74 @@ function useModelRegistryFetch(client: Stigmer): ModelRegistryState {
   const clientRef = useRef(client);
   clientRef.current = client;
 
-  useEffect(() => {
-    let cancelled = false;
+  const fetchAttemptRef = useRef(0);
 
+  const doFetch = useCallback(async (signal: AbortSignal) => {
     const c = clientRef.current;
-    c.getAuthCredential()
-      .then((token) => fetchModelRegistry(c.baseUrl, token, c.fetch))
-      .then((models) => {
-        if (!cancelled) {
+    let token = await c.getAuthCredential();
+
+    if (!token) {
+      const start = Date.now();
+      while (!token && Date.now() - start < TOKEN_POLL_MAX_MS) {
+        if (signal.aborted) return;
+        await new Promise((r) => setTimeout(r, TOKEN_POLL_INTERVAL_MS));
+        if (signal.aborted) return;
+        token = await c.getAuthCredential();
+      }
+    }
+
+    return fetchModelRegistry(c.baseUrl, token, c.fetch);
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    fetchAttemptRef.current = 0;
+
+    const attempt = async () => {
+      if (signal.aborted) return;
+
+      setState((prev) => (prev.isLoading ? prev : { ...prev, isLoading: true }));
+
+      try {
+        const models = await doFetch(signal);
+        if (!signal.aborted && models) {
           setState({ models, isLoading: false, error: null });
+          fetchAttemptRef.current = 0;
         }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
+      } catch (err: unknown) {
+        if (signal.aborted) return;
+
+        const retryIdx = fetchAttemptRef.current;
+        fetchAttemptRef.current = retryIdx + 1;
+
+        if (retryIdx < RETRY_DELAYS_MS.length) {
+          setTimeout(() => { if (!signal.aborted) attempt(); }, RETRY_DELAYS_MS[retryIdx]);
+        } else {
           setState({
             models: [],
             isLoading: false,
             error: err instanceof Error ? err : new Error(String(err)),
           });
         }
-      });
+      }
+    };
+
+    attempt();
+
+    return () => { controller.abort(); };
+  }, [doFetch, version]);
 
-    return () => { cancelled = true; };
+  const refetch = useCallback(() => {
+    setState((prev) => {
+      if (prev.isLoading) return prev;
+      return { ...prev, isLoading: true, error: null };
+    });
+    setVersion((v) => v + 1);
   }, []);
 
-  return state;
+  return { ...state, refetch };
 }
 
 /**

package/src/resource-creation/CreationPicker.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { ResourceTemplate } from "./templates/types";
+import { TemplateGallery } from "./TemplateGallery";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * The creation path the user selected on the picker screen.
+ *
+ * - `"scratch"` — start the wizard with empty fields
+ * - `"template"` — start the wizard with template-provided data
+ * - `"import"` — open the import dialog (handled by the consumer)
+ */
+export type CreationPath =
+  | { readonly kind: "scratch" }
+  | { readonly kind: "template"; readonly data: Partial<unknown> }
+  | { readonly kind: "import" };
+
+/** Props for {@link CreationPicker}. */
+export interface CreationPickerProps<TData> {
+  /** Label for the resource type (e.g. "agent", "MCP server"). Used in headings. */
+  readonly resourceLabel: string;
+  /** Available templates for the gallery view. */
+  readonly templates: readonly ResourceTemplate<TData>[];
+  /** Called when the user selects a creation path. */
+  readonly onSelect: (path: CreationPath) => void;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Internal state
+// ---------------------------------------------------------------------------
+
+type PickerView = "options" | "gallery";
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * "Step 0" landing screen for resource creation flows.
+ *
+ * Presents three creation entry points as large option cards:
+ * 1. **Start from scratch** — blank wizard
+ * 2. **Browse templates** — opens the template gallery inline
+ * 3. **Import from file** — triggers the import dialog
+ *
+ * When the user clicks "Browse templates", the picker transitions
+ * to show the `TemplateGallery` inline with a back button. Selecting
+ * a template emits `onSelect({ kind: "template", data })`.
+ *
+ * This component is SDK-first with zero Console dependencies. The
+ * consumer (e.g. `AgentNewPage`) handles routing, the import dialog,
+ * and mounting the wizard.
+ *
+ * @typeParam TData - The wizard data shape (e.g. `AgentWizardData`).
+ *
+ * @example
+ * ```tsx
+ * <CreationPicker
+ *   resourceLabel="agent"
+ *   templates={AGENT_TEMPLATES}
+ *   onSelect={(path) => {
+ *     if (path.kind === "scratch") startWizard();
+ *     if (path.kind === "template") startWizard(path.data);
+ *     if (path.kind === "import") openImportDialog();
+ *   }}
+ * />
+ * ```
+ */
+export function CreationPicker<TData>({
+  resourceLabel,
+  templates,
+  onSelect,
+  className,
+}: CreationPickerProps<TData>) {
+  const [view, setView] = useState<PickerView>("options");
+
+  const handleTemplateSelect = useCallback(
+    (template: ResourceTemplate<TData>) => {
+      onSelect({ kind: "template", data: template.data });
+    },
+    [onSelect],
+  );
+
+  const handleBackToOptions = useCallback(() => {
+    setView("options");
+  }, []);
+
+  if (view === "gallery") {
+    return (
+      <div className={cn("flex flex-col gap-4", className)}>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleBackToOptions}
+            aria-label="Back to creation options"
+            className={cn(
+              "inline-flex items-center justify-center rounded-md p-1.5",
+              "text-muted-foreground transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            <BackArrowIcon />
+          </button>
+          <h2 className="text-base font-semibold text-foreground">
+            Choose a template
+          </h2>
+        </div>
+        <TemplateGallery
+          templates={templates}
+          onSelect={handleTemplateSelect}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-6", className)}>
+      <div>
+        <h2 className="text-lg font-semibold text-foreground">
+          Create a new {resourceLabel}
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Choose how you'd like to get started.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        {/* Start from scratch */}
+        <OptionCard
+          title="Start from scratch"
+          description={`Create a blank ${resourceLabel} and configure it step by step.`}
+          icon={<BlankPageIcon />}
+          onClick={() => onSelect({ kind: "scratch" })}
+        />
+
+        {/* Browse templates */}
+        {templates.length > 0 && (
+          <OptionCard
+            title="Browse templates"
+            description={`Start with a pre-built ${resourceLabel} configuration.`}
+            icon={<GridIcon />}
+            onClick={() => setView("gallery")}
+            badge={`${templates.length} available`}
+          />
+        )}
+
+        {/* Import from file */}
+        <OptionCard
+          title="Import from file"
+          description="Upload a YAML or JSON configuration file."
+          icon={<UploadIcon />}
+          onClick={() => onSelect({ kind: "import" })}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Internal components
+// ---------------------------------------------------------------------------
+
+function OptionCard({
+  title,
+  description,
+  icon,
+  onClick,
+  badge,
+}: {
+  readonly title: string;
+  readonly description: string;
+  readonly icon: React.ReactNode;
+  readonly onClick: () => void;
+  readonly badge?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group flex flex-col items-center gap-3 rounded-lg border border-border bg-card p-6 text-center",
+        "transition-colors hover:border-primary hover:bg-accent",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      )}
+    >
+      <span className="text-muted-foreground transition-colors group-hover:text-foreground">
+        {icon}
+      </span>
+      <div className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-foreground">{title}</span>
+        <span className="text-xs text-muted-foreground">{description}</span>
+      </div>
+      {badge && (
+        <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+          {badge}
+        </span>
+      )}
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons (inline SVGs — no external dependency)
+// ---------------------------------------------------------------------------
+
+function BlankPageIcon() {
+  return (
+    <svg
+      className="size-8"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+function GridIcon() {
+  return (
+    <svg
+      className="size-8"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect width="7" height="7" x="3" y="3" rx="1" />
+      <rect width="7" height="7" x="14" y="3" rx="1" />
+      <rect width="7" height="7" x="14" y="14" rx="1" />
+      <rect width="7" height="7" x="3" y="14" rx="1" />
+    </svg>
+  );
+}
+
+function UploadIcon() {
+  return (
+    <svg
+      className="size-8"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" x2="12" y1="3" y2="15" />
+    </svg>
+  );
+}
+
+function BackArrowIcon() {
+  return (
+    <svg
+      className="size-4"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m12 19-7-7 7-7" />
+      <path d="M19 12H5" />
+    </svg>
+  );
+}

package/src/resource-creation/StepIndicator.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { cn } from "@stigmer/theme";
+
+/** Props for {@link StepIndicator}. */
+export interface StepIndicatorProps {
+  /** Step definitions to render (only `id` and `label` are used for rendering). */
+  readonly steps: readonly { readonly id: string; readonly label: string }[];
+  /** Zero-based index of the currently active step. */
+  readonly currentStepIndex: number;
+  /** Called when a completed step is clicked (backward navigation). */
+  readonly onStepClick?: (index: number) => void;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Vertical step progress indicator for multi-step wizards.
+ *
+ * Renders each step as a numbered circle with label. Steps are
+ * color-coded by state: completed (filled), active (ring), pending
+ * (muted). Completed steps are clickable for backward navigation.
+ *
+ * Responsive: collapses to a compact horizontal layout on narrow
+ * viewports via CSS container queries.
+ *
+ * Uses `--stgm-*` tokens exclusively. Zero Console dependencies.
+ */
+export function StepIndicator({
+  steps,
+  currentStepIndex,
+  onStepClick,
+  className,
+}: StepIndicatorProps) {
+  return (
+    <nav
+      aria-label="Wizard progress"
+      className={cn("flex flex-col gap-1", className)}
+    >
+      <ol className="flex flex-col gap-1" role="list">
+        {steps.map((step, index) => {
+          const state = getStepState(index, currentStepIndex);
+          const isClickable = state === "completed" && onStepClick != null;
+
+          const content = (
+            <div className="flex items-center gap-3">
+              <StepCircle index={index} state={state} />
+              <span
+                className={cn(
+                  "text-sm font-medium transition-colors",
+                  state === "active" && "text-foreground",
+                  state === "completed" && "text-foreground",
+                  state === "pending" && "text-muted-foreground",
+                )}
+              >
+                {step.label}
+              </span>
+            </div>
+          );
+
+          return (
+            <li key={step.id}>
+              {isClickable ? (
+                <button
+                  type="button"
+                  onClick={() => onStepClick(index)}
+                  className={cn(
+                    "w-full rounded-md px-2 py-2 text-left transition-colors",
+                    "hover:bg-accent-hover",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                  )}
+                  aria-label={`Go back to step ${index + 1}: ${step.label}`}
+                  aria-current={undefined}
+                >
+                  {content}
+                </button>
+              ) : (
+                <div
+                  className="px-2 py-2"
+                  aria-current={state === "active" ? "step" : undefined}
+                >
+                  {content}
+                </div>
+              )}
+              {index < steps.length - 1 && (
+                <div
+                  className="ml-[18px] h-4 w-px bg-border"
+                  aria-hidden="true"
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step circle — the numbered indicator
+// ---------------------------------------------------------------------------
+
+type StepState = "completed" | "active" | "pending";
+
+function getStepState(index: number, currentIndex: number): StepState {
+  if (index < currentIndex) return "completed";
+  if (index === currentIndex) return "active";
+  return "pending";
+}
+
+function StepCircle({
+  index,
+  state,
+}: {
+  readonly index: number;
+  readonly state: StepState;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-colors",
+        state === "completed" && "bg-primary text-primary-foreground",
+        state === "active" && "border-2 border-primary text-primary",
+        state === "pending" && "border border-border text-muted-foreground",
+      )}
+      aria-hidden="true"
+    >
+      {state === "completed" ? (
+        <CheckIcon className="size-3.5" />
+      ) : (
+        <span>{index + 1}</span>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function CheckIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m3 8.5 3.5 3.5 6.5-8" />
+    </svg>
+  );
+}