@porkytheblack/garage-dashboard 0.1.0

package/components/fleet/onboarding-launch.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import { Sparkles } from "lucide-react";
+import { LaunchComposer } from "./launch";
+import { VerifiedLine } from "./onboarding-shared";
+import type { WorkspaceDto, ProfileDto } from "@/lib/types";
+
+const EXAMPLES = [
+  "Explore this workspace and summarize what's here.",
+  "Find the project's entry point and explain how it boots.",
+  "List the dependencies and flag anything outdated.",
+];
+
+/** Step 3 — a brief success beat, then the real launch composer with primers. */
+export function PutToWork({ model, workspaces, profiles }: { model: string; workspaces: WorkspaceDto[]; profiles: ProfileDto[] }) {
+  const [prompt, setPrompt] = React.useState("");
+
+  return (
+    <div className="animate-slide-up space-y-5">
+      <div className="mx-auto max-w-md">
+        <VerifiedLine>
+          <span className="font-mono">{model}</span> is ready
+        </VerifiedLine>
+      </div>
+
+      <div className="mx-auto max-w-2xl">
+        <LaunchComposer key={prompt} workspaces={workspaces} profiles={profiles} initialPrompt={prompt} />
+      </div>
+
+      <div className="mx-auto flex max-w-2xl flex-wrap justify-center gap-2">
+        {EXAMPLES.map((e) => (
+          <button
+            key={e}
+            type="button"
+            onClick={() => setPrompt(e)}
+            className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface-2/40 px-3 py-1.5 text-[12px] text-muted-foreground transition-colors hover:border-border-strong hover:text-foreground"
+          >
+            <Sparkles className="size-3 text-brand/70" />
+            {e}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/fleet/onboarding-model.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import { ArrowLeft, Check, Cpu } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { verifyProvider, type VerifyOutcome } from "@/lib/verify-provider";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ErrorState, Spinner } from "@/components/shared";
+import { StepCard, ShimmerLine, VerifiedLine } from "./onboarding-shared";
+
+/** Step 2 — verify the saved key, then pick a model from the live list it returns. */
+export function PickModel({ providerId, catalog, onBack, onPicked }: { providerId: string; catalog: string[]; onBack: () => void; onPicked: (model: string) => void }) {
+  const [outcome, setOutcome] = React.useState<VerifyOutcome | null>(null);
+  const [model, setModel] = React.useState("");
+  const [manual, setManual] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+
+  React.useEffect(() => {
+    let live = true;
+    setOutcome(null);
+    verifyProvider(providerId).then((o) => live && setOutcome(o));
+    return () => {
+      live = false;
+    };
+  }, [providerId]);
+
+  const models = outcome?.ok ? outcome.models : [];
+  const escapeHatch = manual || (outcome && !outcome.ok);
+
+  const pick = async (chosen: string) => {
+    if (!chosen.trim() || busy) return;
+    setBusy(true);
+    try {
+      await api("/models/profiles", { method: "POST", body: { providerId, model: chosen.trim(), activate: true } });
+      onPicked(chosen.trim());
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save the model");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <StepCard title="Pick a model" subtitle="We verified the key against the provider — choose the model your agent should run on.">
+      {!outcome && <ShimmerLine label="Checking the key against the provider…" />}
+
+      {outcome?.ok && (
+        <>
+          <VerifiedLine>Key verified — {models.length} {models.length === 1 ? "model" : "models"} available</VerifiedLine>
+          <div className="max-h-64 space-y-1 overflow-y-auto rounded-lg border border-border bg-surface-2/30 p-1.5">
+            {models.length === 0 && <p className="px-2 py-3 text-[12.5px] text-muted-foreground">No models reported. Type one below.</p>}
+            {models.map((m) => (
+              <button
+                key={m}
+                type="button"
+                onClick={() => setModel(m)}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left font-mono text-[12.5px] transition-colors",
+                  model === m ? "bg-brand/15 text-foreground" : "text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+                )}
+              >
+                <Check className={cn("size-3.5 shrink-0 text-brand transition-opacity", model === m ? "opacity-100" : "opacity-0")} />
+                <span className="truncate">{m}</span>
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+
+      {outcome && !outcome.ok && (
+        <ErrorState message={outcome.reason === "network" ? `${outcome.message} You can go back and fix the base URL.` : outcome.message} />
+      )}
+
+      {escapeHatch && (
+        <div className="space-y-1.5">
+          <span className="text-[13px] font-medium text-foreground">Model id</span>
+          <Input value={model} onChange={(e) => setModel(e.target.value)} placeholder="e.g. gpt-4o" className="font-mono text-[12.5px]" />
+          {catalog.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 pt-0.5">
+              {catalog.slice(0, 6).map((m) => (
+                <button key={m} type="button" onClick={() => setModel(m)} className="rounded-md border border-border bg-surface-2/40 px-2 py-1 font-mono text-[11px] text-muted-foreground transition-colors hover:border-border-strong hover:text-foreground">
+                  {m}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between pt-1">
+        <Button variant="ghost" size="sm" onClick={onBack} disabled={busy}>
+          <ArrowLeft /> Back
+        </Button>
+        <div className="flex items-center gap-2">
+          {outcome?.ok && !manual && (
+            <button type="button" onClick={() => setManual(true)} className="text-[12px] text-faint transition-colors hover:text-muted-foreground">
+              Continue anyway
+            </button>
+          )}
+          <Button onClick={() => pick(model)} disabled={!model.trim() || busy}>
+            {busy ? <Spinner /> : <Cpu />} Use model
+          </Button>
+        </div>
+      </div>
+    </StepCard>
+  );
+}

package/components/fleet/onboarding-provider.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+import { Check, Eye, EyeOff, Plug, SlidersHorizontal } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/shared";
+import { StepCard } from "./onboarding-shared";
+import type { Catalog, CatalogProvider } from "@/lib/types";
+
+const CUSTOM = "__custom__";
+const slug = (s: string) => s.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+
+/** Step 1 — connect a known provider, or wire a custom OpenAI-compatible endpoint. */
+export function ConnectProvider({ catalog, onConnected }: { catalog: Catalog | null; onConnected: (id: string, models: string[]) => void }) {
+  const known = catalog?.providers ?? [];
+  const [choice, setChoice] = React.useState("");
+  const [customName, setCustomName] = React.useState("");
+  const [baseURL, setBaseURL] = React.useState("");
+  const [apiKey, setApiKey] = React.useState("");
+  const [reveal, setReveal] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+
+  const isCustom = choice === CUSTOM;
+  const meta = known.find((p) => p.id === choice);
+  const needsKey = isCustom ? true : meta?.needs_api_key ?? true;
+  const id = isCustom ? `custom-${slug(customName)}` : choice;
+  const ready = isCustom ? Boolean(slug(customName) && baseURL.trim()) : Boolean(choice);
+
+  const connect = async () => {
+    if (!ready || busy) return;
+    setBusy(true);
+    try {
+      await api("/models/providers", {
+        method: "POST",
+        body: { id, type: isCustom ? "custom" : "known", apiKey: apiKey.trim() || undefined, baseURL: baseURL.trim() || undefined },
+      });
+      onConnected(id, meta?.default_models ?? []);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Could not save the provider");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <StepCard title="Connect a provider" subtitle="Choose where your agent's model runs. The key is stored server-side and never returned to the browser.">
+      <div className="grid gap-2 sm:grid-cols-2">
+        {known.map((p) => (
+          <ProviderRow key={p.id} p={p} selected={choice === p.id} onSelect={() => setChoice(p.id)} />
+        ))}
+        <CustomRow selected={isCustom} onSelect={() => setChoice(CUSTOM)} />
+      </div>
+
+      {isCustom && (
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Field label="Name">
+            <Input value={customName} onChange={(e) => setCustomName(e.target.value)} placeholder="my-proxy" />
+          </Field>
+          <Field label="Base URL" hint="OpenAI-compatible · ends in /v1">
+            <Input value={baseURL} onChange={(e) => setBaseURL(e.target.value)} placeholder="https://…/v1" />
+          </Field>
+        </div>
+      )}
+
+      {choice && needsKey && (
+        <Field label="API key">
+          <div className="relative">
+            <Input type={reveal ? "text" : "password"} value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="sk-…" className="pr-9 font-mono text-[12.5px]" />
+            <button type="button" onClick={() => setReveal((r) => !r)} className="absolute inset-y-0 right-0 grid w-9 place-items-center text-faint transition-colors hover:text-foreground" aria-label={reveal ? "Hide key" : "Show key"}>
+              {reveal ? <EyeOff className="size-3.5" /> : <Eye className="size-3.5" />}
+            </button>
+          </div>
+        </Field>
+      )}
+
+      <div className="flex justify-end pt-1">
+        <Button onClick={connect} disabled={!ready || busy}>
+          {busy ? <Spinner /> : <Plug />} Continue
+        </Button>
+      </div>
+    </StepCard>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <span className="text-[13px] font-medium text-foreground">{label}</span>
+      {children}
+      {hint && <p className="text-[11.5px] text-faint">{hint}</p>}
+    </div>
+  );
+}
+
+function ProviderRow({ p, selected, onSelect }: { p: CatalogProvider; selected: boolean; onSelect: () => void }) {
+  return (
+    <PickRow selected={selected} onSelect={onSelect}>
+      <div className="min-w-0">
+        <div className="truncate text-[13px] font-medium text-foreground">{p.label}</div>
+        <div className="truncate text-[11.5px] text-faint">{p.description}</div>
+      </div>
+    </PickRow>
+  );
+}
+
+function CustomRow({ selected, onSelect }: { selected: boolean; onSelect: () => void }) {
+  return (
+    <PickRow selected={selected} onSelect={onSelect}>
+      <SlidersHorizontal className="size-4 shrink-0 text-faint" />
+      <div className="min-w-0">
+        <div className="text-[13px] font-medium text-foreground">Custom endpoint</div>
+        <div className="text-[11.5px] text-faint">Any OpenAI-compatible API</div>
+      </div>
+    </PickRow>
+  );
+}
+
+function PickRow({ selected, onSelect, children }: { selected: boolean; onSelect: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "flex items-center gap-2.5 rounded-lg border px-3 py-2.5 text-left transition-colors",
+        selected ? "border-brand/50 bg-brand/[0.07]" : "border-border bg-surface-2/30 hover:border-border-strong hover:bg-surface-2",
+      )}
+    >
+      <span className={cn("grid size-4 shrink-0 place-items-center rounded-full border transition-colors", selected ? "border-brand bg-brand text-brand-foreground" : "border-border-strong")}>
+        {selected && <Check className="size-2.5" />}
+      </span>
+      {children}
+    </button>
+  );
+}

package/components/fleet/onboarding-shared.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const STEPS = ["Connect a provider", "Pick a model", "Put the agent to work"] as const;
+
+/** Quiet 1 · 2 · 3 rail: done steps get a check, the current step the brand accent. */
+export function StepRail({ step }: { step: number }) {
+  return (
+    <ol className="mb-9 flex items-center justify-center gap-2.5" aria-label={`Step ${step + 1} of ${STEPS.length}`}>
+      {STEPS.map((label, i) => {
+        const done = i < step;
+        const active = i === step;
+        return (
+          <li key={label} className="flex items-center gap-2.5">
+            <span
+              className={cn(
+                "grid size-5 place-items-center rounded-full border text-[11px] font-semibold tabular-nums transition-colors",
+                done && "border-brand/40 bg-brand/15 text-brand",
+                active && "border-brand bg-brand text-brand-foreground shadow-sheen",
+                !done && !active && "border-border bg-surface-2 text-faint",
+              )}
+            >
+              {done ? <Check className="size-3" /> : i + 1}
+            </span>
+            <span className={cn("hidden text-[12px] font-medium sm:block", active ? "text-foreground" : "text-faint")}>{label}</span>
+            {i < STEPS.length - 1 && <span className="h-px w-5 bg-border sm:w-7" />}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+/** The framed body each step lives in: title, subtitle, then its controls. */
+export function StepCard({ title, subtitle, children }: { title: string; subtitle: string; children: React.ReactNode }) {
+  return (
+    <div className="surface animate-slide-up p-6 md:p-7">
+      <h2 className="text-[16px] font-semibold tracking-tight text-foreground">{title}</h2>
+      <p className="mt-1 text-[13px] leading-relaxed text-muted-foreground">{subtitle}</p>
+      <div className="mt-6 space-y-4">{children}</div>
+    </div>
+  );
+}
+
+/** A shimmering line of placeholder copy, e.g. while a key is being checked. */
+export function ShimmerLine({ label }: { label: string }) {
+  return (
+    <div className="flex items-center gap-2.5 rounded-lg border border-border bg-surface-2/40 px-3.5 py-3">
+      <div className="skeleton size-3.5 rounded-full" />
+      <span className="text-[12.5px] text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+/** A success line in the success tone — used after key verification + at handoff. */
+export function VerifiedLine({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-success/25 bg-success/[0.07] px-3.5 py-2.5 text-[12.5px] font-medium text-success">
+      <Check className="size-3.5 shrink-0" />
+      {children}
+    </div>
+  );
+}

package/components/fleet/onboarding.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { useQuery } from "@/lib/hooks";
+import { StepRail } from "./onboarding-shared";
+import { ConnectProvider } from "./onboarding-provider";
+import { PickModel } from "./onboarding-model";
+import { PutToWork } from "./onboarding-launch";
+import type { Catalog, WorkspaceDto, ProfileDto } from "@/lib/types";
+
+interface Picked {
+  providerId: string;
+  models: string[];
+  model: string;
+}
+
+/**
+ * First-run setup: connect a provider → verify + pick a model → put the agent
+ * to work. Shown in place of the hero while the namespace has no usable model.
+ * Calling `onDone` once a profile is active reveals the normal Fleet.
+ */
+export function OnboardingFlow({ workspaces, profiles, onDone, onSkip }: { workspaces: WorkspaceDto[]; profiles: ProfileDto[]; onDone: () => void; onSkip: () => void }) {
+  const catalog = useQuery<Catalog>("/models/catalog");
+  const [step, setStep] = React.useState(0);
+  const [picked, setPicked] = React.useState<Picked>({ providerId: "", models: [], model: "" });
+
+  return (
+    <section className="mx-auto w-full max-w-xl animate-slide-up">
+      <div className="mb-7 text-center">
+        <h1 className="text-display">Set up your first model</h1>
+        <p className="mx-auto mt-2.5 max-w-md text-[13.5px] leading-relaxed text-muted-foreground">
+          Three quick steps and Glorp can start working in a sandboxed workspace.
+        </p>
+      </div>
+
+      <StepRail step={step} />
+
+      {step === 0 && (
+        <ConnectProvider
+          catalog={catalog.data}
+          onConnected={(providerId, models) => {
+            setPicked({ providerId, models, model: "" });
+            setStep(1);
+          }}
+        />
+      )}
+
+      {step === 1 && (
+        <PickModel
+          providerId={picked.providerId}
+          catalog={picked.models}
+          onBack={() => setStep(0)}
+          onPicked={(model) => {
+            setPicked((p) => ({ ...p, model }));
+            setStep(2);
+          }}
+        />
+      )}
+
+      {step === 2 && <PutToWork model={picked.model} workspaces={workspaces} profiles={profiles} />}
+
+      <div className="mt-7 text-center">
+        {step === 2 ? (
+          <button type="button" onClick={onDone} className="text-[12px] text-faint transition-colors hover:text-muted-foreground">
+            Go to the Fleet →
+          </button>
+        ) : (
+          <button type="button" onClick={onSkip} className="text-[12px] text-faint transition-colors hover:text-muted-foreground">
+            Skip — I&apos;ll configure later
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}

package/components/primitives.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+
+type Tone = "neutral" | "brand" | "success" | "warning" | "destructive";
+
+const TONE: Record<Tone, { value: string; icon: string }> = {
+  neutral: { value: "text-foreground", icon: "text-faint" },
+  brand: { value: "text-foreground", icon: "text-brand" },
+  success: { value: "text-foreground", icon: "text-success" },
+  warning: { value: "text-foreground", icon: "text-warning" },
+  destructive: { value: "text-foreground", icon: "text-destructive" },
+};
+
+/** A single metric tile: quiet label, prominent tabular value, optional icon. */
+export function Metric({
+  label,
+  value,
+  icon: Icon,
+  tone = "neutral",
+  hint,
+  className,
+}: {
+  label: string;
+  value: React.ReactNode;
+  icon?: LucideIcon;
+  tone?: Tone;
+  hint?: string;
+  className?: string;
+}) {
+  const t = TONE[tone];
+  return (
+    <div className={cn("surface flex flex-col gap-1 p-4", className)}>
+      <div className="flex items-center justify-between">
+        <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/80">{label}</span>
+        {Icon && <Icon className={cn("size-3.5", t.icon)} />}
+      </div>
+      <div className={cn("tnum text-[26px] font-semibold leading-none tracking-tight", t.value)}>{value}</div>
+      {hint && <span className="text-[11.5px] text-faint">{hint}</span>}
+    </div>
+  );
+}
+
+/** Eyebrow + title row that opens a section, with an optional trailing action. */
+export function SectionHeading({
+  eyebrow,
+  title,
+  action,
+  className,
+}: {
+  eyebrow?: string;
+  title: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("mb-3 flex items-end justify-between gap-3", className)}>
+      <div className="min-w-0">
+        {eyebrow && <div className="mb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">{eyebrow}</div>}
+        <h2 className="text-[15px] font-semibold tracking-tight text-foreground">{title}</h2>
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}

package/components/provisioning/provision-dialog.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Copy, FolderGit2, Rocket, Terminal, type LucideIcon } from "lucide-react";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { useQuery } from "@/lib/hooks";
+import { stepSummary } from "@/lib/template";
+import { Loading, Spinner } from "@/components/shared";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import type { TemplateSummaryDto, TemplateParamDto, TemplateFull, TemplateStep, SessionDto } from "@/lib/types";
+
+const STEP_ICON: Record<TemplateStep["type"], LucideIcon> = { "git-clone": FolderGit2, shell: Terminal, copy: Copy };
+
+/** Seed the form with each declared param's default (blank when none). */
+function defaultsFor(params: TemplateParamDto[]): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const p of params) out[p.name] = p.default ?? "";
+  return out;
+}
+
+/** One declared-param input: required marking, default prefilled, secret → password. */
+function ParamField({ param, value, onChange }: { param: TemplateParamDto; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="space-y-1.5">
+      <Label className="flex items-center gap-1.5 font-mono">
+        {param.name}
+        {param.required && <span className="text-destructive" aria-hidden>*</span>}
+        {param.secret && <span className="rounded bg-surface-2 px-1 py-0.5 text-[10px] font-normal text-faint">secret</span>}
+      </Label>
+      {param.description && <p className="text-[12px] text-muted-foreground">{param.description}</p>}
+      <Input
+        type={param.secret ? "password" : "text"}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={param.default ? `default: ${param.default}` : `value for ${param.name}`}
+      />
+    </div>
+  );
+}
+
+export function ProvisionDialog({ template, onClose }: { template: TemplateSummaryDto | null; onClose: () => void }) {
+  const router = useRouter();
+  const { data, loading } = useQuery<{ template: TemplateFull }>(template ? `/templates/${template.name}` : null, [template?.name]);
+  const [params, setParams] = React.useState<Record<string, string>>({});
+  const [busy, setBusy] = React.useState(false);
+
+  const decls = template?.params ?? [];
+  const steps = data?.template.steps ?? [];
+
+  // Reset to the template's declared defaults whenever the open template changes.
+  React.useEffect(() => {
+    setParams(defaultsFor(template?.params ?? []));
+  }, [template?.name]);
+
+  // Required params with no value block provisioning; optional ones never do.
+  const incomplete = decls.some((p) => p.required && !(params[p.name] ?? "").trim());
+
+  const provision = async () => {
+    if (!template) return;
+    setBusy(true);
+    try {
+      // Drop blank optional values so the server applies the template's defaults.
+      const filled = Object.fromEntries(Object.entries(params).filter(([, v]) => v.trim() !== ""));
+      const s = await api<SessionDto>("/sessions", { method: "POST", body: { template: template.name, params: filled } });
+      toast.success("Provisioning session created");
+      router.push(`/sessions/${s.id}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Provision failed");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={!!template} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Provision “{template?.name}”</DialogTitle>
+          <DialogDescription>This template prepares a fresh workspace, then it’s handed to a new session.</DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <Loading />
+        ) : (
+          <div className="space-y-5">
+            {steps.length > 0 && (
+              <div className="space-y-2">
+                <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">Steps</p>
+                <ol className="overflow-hidden rounded-lg border border-border bg-surface-2/40 divide-y divide-border/60">
+                  {steps.map((step, i) => {
+                    const Icon = STEP_ICON[step.type];
+                    return (
+                      <li key={i} className="flex items-start gap-2.5 px-3 py-2">
+                        <span className="tnum mt-0.5 w-4 shrink-0 text-center text-[12px] text-faint">{i + 1}</span>
+                        <Icon className="mt-0.5 size-3.5 shrink-0 text-faint" />
+                        <span className="min-w-0 break-words font-mono text-[12.5px] text-foreground/85">{stepSummary(step)}</span>
+                      </li>
+                    );
+                  })}
+                </ol>
+              </div>
+            )}
+
+            {decls.length > 0 && (
+              <div className="space-y-4 border-t border-border pt-4">
+                <p className="text-[12px] text-muted-foreground">Fill in this template’s parameters:</p>
+                {decls.map((p) => (
+                  <ParamField key={p.name} param={p} value={params[p.name] ?? ""} onChange={(v) => setParams((cur) => ({ ...cur, [p.name]: v }))} />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>
+            Cancel
+          </Button>
+          <Button onClick={provision} disabled={busy || loading || incomplete}>
+            {busy ? <Spinner /> : <Rocket />} Provision
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}