@jiggai/kitchen 0.1.11 → 0.2.0

package/src/app/recipes/CreateCustomTeamModal.tsx

@@ -0,0 +1,375 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { CreateModalShell } from "./CreateModalShell";
+import { fetchJsonWithStatus } from "@/lib/fetch-json";
+import type { AgentListItem } from "@/lib/agents";
+
+type SelectedRole = { agentId: string; roleId: string; displayName: string };
+
+function defaultRoleIdFromAgentId(agentId: string) {
+  // Strip any existing team prefix if present; keep it sluggy.
+  const id = agentId.split("/").pop() || agentId;
+  const last = id.split("-").slice(-1)[0] || id;
+  return last.toLowerCase().replace(/[^a-z0-9_-]+/g, "-");
+}
+
+function normalizeTeamIdInput(v: string) {
+  // UX: when the user types spaces, turn them into dashes (live).
+  // Also keep it lowercase to match id rules.
+  return v.toLowerCase().replace(/\s+/g, "-");
+}
+
+function isValidId(id: string) {
+  return /^[a-z0-9][a-z0-9_-]{1,62}$/.test(id);
+}
+
+function isValidTeamId(id: string) {
+  // OpenClaw scaffold-team constraint.
+  return isValidId(id) && id.endsWith("-team");
+}
+
+export function CreateCustomTeamModal({
+  open,
+  teamId,
+  setTeamId,
+  busy,
+  error,
+  onClose,
+  onConfirm,
+  onRolesChange,
+}: {
+  open: boolean;
+  teamId: string;
+  setTeamId: (v: string) => void;
+  busy?: boolean;
+  error?: string | null;
+  onClose: () => void;
+  onConfirm: () => void;
+  onRolesChange: (roles: SelectedRole[]) => void;
+}) {
+  const [agents, setAgents] = useState<AgentListItem[]>([]);
+  const [agentsError, setAgentsError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<Record<string, SelectedRole>>({});
+
+  const [previewMd, setPreviewMd] = useState<string | null>(null);
+  const [previewPath, setPreviewPath] = useState<string | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const res = await fetchJsonWithStatus<{ agents?: AgentListItem[]; error?: string; message?: string }>(
+        "/api/agents",
+        { cache: "no-store" },
+      );
+      if (cancelled) return;
+      if (!res.ok) {
+        setAgentsError(res.error);
+        return;
+      }
+      const list = Array.isArray(res.data.agents) ? res.data.agents : [];
+      setAgents(list);
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const [availability, setAvailability] = useState<
+    | { state: "unknown" }
+    | { state: "checking" }
+    | { state: "available" }
+    | { state: "taken"; reason?: string }
+  >({ state: "unknown" });
+
+  const agentChoices = useMemo(() => {
+    return agents
+      .slice()
+      .sort((a, b) => String(a.id ?? "").localeCompare(String(b.id ?? "")))
+      .map((a) => ({
+        id: String(a.id ?? ""),
+        label: a.identityName ? `${a.identityName} (${a.id})` : String(a.id ?? ""),
+      }))
+      .filter((a) => a.id);
+  }, [agents]);
+
+  const roles = useMemo(() => Object.values(selected), [selected]);
+
+  const teamIdTrimmed = teamId.trim();
+  const teamIdError = useMemo(() => {
+    if (!open) return null;
+    if (!teamIdTrimmed) return "Team id is required.";
+    if (!isValidId(teamIdTrimmed)) {
+      return "Invalid team id. Use lowercase letters/numbers with - or _ (2-63 chars).";
+    }
+    if (!teamIdTrimmed.endsWith("-team")) {
+      return "Team id must end with -team.";
+    }
+    if (availability.state === "taken") {
+      return `Team id is already taken: ${teamIdTrimmed}`;
+    }
+    return null;
+  }, [open, teamIdTrimmed, availability.state]);
+
+  const roleErrors = useMemo(() => {
+    const errors = new Map<string, string>();
+    for (const r of roles) {
+      const roleId = String(r.roleId ?? "").trim();
+      if (!roleId) {
+        errors.set(r.agentId, "Role id is required.");
+        continue;
+      }
+      if (!isValidId(roleId)) {
+        errors.set(r.agentId, "Invalid role id (lowercase letters/numbers with - or _)." );
+      }
+    }
+    return errors;
+  }, [roles]);
+
+  const canConfirm =
+    !teamIdError &&
+    availability.state !== "checking" &&
+    availability.state !== "unknown" &&
+    roles.length > 0 &&
+    roleErrors.size === 0;
+
+  useEffect(() => {
+    if (!open) return;
+    onRolesChange(roles);
+  }, [open, roles, onRolesChange]);
+
+  // Team id availability check (debounced).
+  useEffect(() => {
+    if (!open) return;
+
+    let cancelled = false;
+    const t = setTimeout(async () => {
+      if (!teamIdTrimmed || !isValidTeamId(teamIdTrimmed)) {
+        setAvailability({ state: "unknown" });
+        return;
+      }
+
+      setAvailability({ state: "checking" });
+
+      const res = await fetchJsonWithStatus<{ ok?: boolean; available?: boolean; reason?: string; error?: string }>(
+        `/api/ids/check?kind=team&id=${encodeURIComponent(teamIdTrimmed)}`,
+        { cache: "no-store" },
+      );
+
+      if (cancelled) return;
+
+      if (!res.ok) {
+        setAvailability({ state: "unknown" });
+        return;
+      }
+
+      if (res.data.ok && res.data.available === true) {
+        setAvailability({ state: "available" });
+        return;
+      }
+
+      setAvailability({ state: "taken", reason: res.data.reason });
+    }, 250);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [open, teamIdTrimmed]);
+
+  // Best-effort preview (debounced).
+  useEffect(() => {
+    if (!open) return;
+    if (!canConfirm) return;
+
+    let cancelled = false;
+    const t = setTimeout(async () => {
+      const baseRecipeId = teamIdTrimmed.endsWith("-team") ? teamIdTrimmed.slice(0, -"-team".length) : teamIdTrimmed;
+
+      const res = await fetchJsonWithStatus<{
+        ok?: boolean;
+        error?: string;
+        md?: string;
+        filePath?: string;
+      }>("/api/recipes/custom-team", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          dryRun: true,
+          recipeId: baseRecipeId,
+          teamId: teamIdTrimmed,
+          roles: roles.map((r) => ({ roleId: r.roleId, displayName: r.displayName })),
+        }),
+      });
+
+      if (cancelled) return;
+
+      if (!res.ok) {
+        setPreviewError(res.error);
+        setPreviewMd(null);
+        setPreviewPath(null);
+        return;
+      }
+      if (!res.data.ok) {
+        setPreviewError(res.data.error || "Failed to generate preview");
+        setPreviewMd(null);
+        setPreviewPath(null);
+        return;
+      }
+
+      setPreviewError(null);
+      setPreviewMd(typeof res.data.md === "string" ? res.data.md : null);
+      setPreviewPath(typeof res.data.filePath === "string" ? res.data.filePath : null);
+    }, 250);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [open, canConfirm, teamIdTrimmed, roles]);
+
+  return (
+    <CreateModalShell
+      open={open}
+      title="Create custom team"
+      recipeId={"(new recipe)"}
+      recipeName={"Custom Team"}
+      error={error || agentsError}
+      busy={busy}
+      canConfirm={canConfirm}
+      onClose={onClose}
+      onConfirm={onConfirm}
+      confirmLabel="Create team"
+    >
+      <div className="mt-4">
+        <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team id</label>
+        <input
+          value={teamId}
+          onChange={(e) => setTeamId(normalizeTeamIdInput(e.target.value))}
+          placeholder="e.g. my-team"
+          className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
+          autoFocus
+        />
+        {teamIdError ? <div className="mt-2 text-xs text-red-300">{teamIdError}</div> : null}
+        {!teamIdError && teamIdTrimmed ? (
+          <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+            {availability.state === "checking" ? "Checking availability…" : null}
+            {availability.state === "available" ? "Available." : null}
+          </div>
+        ) : null}
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          This creates a new team recipe under <code>~/.openclaw/workspace/recipes</code> and scaffolds
+          <code className="ml-1">~/.openclaw/workspace-&lt;teamId&gt;</code>.
+        </div>
+      </div>
+
+      <div className="mt-6">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Select agents</div>
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          MVP: this creates new team roles that mirror the selected agents&apos; names. You can edit the
+          resulting team recipe later.
+        </div>
+
+        <div className="mt-3 max-h-[220px] overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 p-3">
+          {agentChoices.length === 0 ? (
+            <div className="text-sm text-[color:var(--ck-text-secondary)]">No installed agents found.</div>
+          ) : (
+            <div className="space-y-2">
+              {agentChoices.map((a) => {
+                const checked = !!selected[a.id];
+                return (
+                  <label key={a.id} className="flex items-start gap-2 text-sm text-[color:var(--ck-text-secondary)]">
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={(e) => {
+                        const next = { ...selected };
+                        if (e.target.checked) {
+                          next[a.id] = {
+                            agentId: a.id,
+                            roleId: defaultRoleIdFromAgentId(a.id),
+                            displayName: a.label,
+                          };
+                        } else {
+                          delete next[a.id];
+                        }
+                        setSelected(next);
+                      }}
+                    />
+                    <span className="min-w-0 break-words">{a.label}</span>
+                  </label>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {roles.length ? (
+        <div className="mt-6">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Role mapping</div>
+          <div className="mt-3 space-y-3">
+            {roles.map((r) => {
+              const roleErr = roleErrors.get(r.agentId);
+              return (
+                <div key={r.agentId} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 p-3">
+                  <div className="text-xs text-[color:var(--ck-text-tertiary)]">{r.agentId}</div>
+
+                  <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <div>
+                      <label className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Role id</label>
+                      <input
+                        value={r.roleId}
+                        onChange={(e) => {
+                          setSelected((prev) => ({
+                            ...prev,
+                            [r.agentId]: { ...prev[r.agentId], roleId: e.target.value },
+                          }));
+                        }}
+                        className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                      />
+                      {roleErr ? <div className="mt-1 text-xs text-red-300">{roleErr}</div> : null}
+                    </div>
+
+                    <div>
+                      <label className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Display name</label>
+                      <input
+                        value={r.displayName}
+                        onChange={(e) => {
+                          setSelected((prev) => ({
+                            ...prev,
+                            [r.agentId]: { ...prev[r.agentId], displayName: e.target.value },
+                          }));
+                        }}
+                        className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                      />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="mt-6">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Preview</div>
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          Generated recipe preview (best-effort). This is what will be written to
+          <code className="ml-1">~/.openclaw/workspace/recipes/&lt;teamId&gt;.md</code>.
+        </div>
+        {canConfirm && previewError ? <div className="mt-2 text-xs text-red-300">{previewError}</div> : null}
+        {canConfirm && previewPath ? (
+          <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+            Target path: <code>{previewPath}</code>
+          </div>
+        ) : null}
+        <pre className="mt-3 max-h-[260px] overflow-auto whitespace-pre-wrap rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-3 text-xs text-[color:var(--ck-text-secondary)]">
+          {canConfirm ? previewMd || "(Loading preview…)" : "(Select a valid team id and at least one agent to preview.)"}
+        </pre>
+      </div>
+    </CreateModalShell>
+  );
+}

package/src/app/recipes/CreateModalShell.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { ConfirmationModal } from "@/components/ConfirmationModal";
+
+export function CreateModalShell({
+  open,
+  title,
+  recipeId,
+  recipeName,
+  children,
+  error,
+  busy,
+  canConfirm,
+  onClose,
+  onConfirm,
+  confirmLabel,
+}: {
+  open: boolean;
+  title: string;
+  recipeId: string;
+  recipeName: string;
+  children: React.ReactNode;
+  error?: string | null;
+  busy?: boolean;
+  canConfirm: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  confirmLabel: string;
+}) {
+  return (
+    <ConfirmationModal
+      open={open}
+      onClose={onClose}
+      title={title}
+      error={error}
+      confirmLabel={confirmLabel}
+      confirmBusyLabel="Creating…"
+      confirmDisabled={!canConfirm}
+      busy={busy}
+      onConfirm={onConfirm}
+    >
+      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+        Create a new {title.toLowerCase().replace("create ", "")} from recipe{" "}
+        <code className="font-mono">{recipeId}</code>
+        {recipeName ? (
+          <>
+            {" "}(<span className="font-medium">{recipeName}</span>)
+          </>
+        ) : null}
+        .
+      </p>
+      {children}
+    </ConfirmationModal>
+  );
+}

package/src/app/recipes/CreateTeamModal.tsx

@@ -1,16 +1,8 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-
-function slugifyId(input: string) {
-  return String(input ?? "")
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/--+/g, "-");
-}
+import { useState } from "react";
+import { useSlugifiedId } from "@/lib/use-slugified-id";
+import { CreateModalShell } from "./CreateModalShell";
 
 export function CreateTeamModal({
   open,
@@ -40,103 +32,60 @@ export function CreateTeamModal({
   const [teamName, setTeamName] = useState("");
   const [idTouched, setIdTouched] = useState(false);
 
-  const derivedId = useMemo(() => slugifyId(teamName), [teamName]);
-  const effectiveId = idTouched ? teamId : derivedId;
-
-  // Keep parent state in sync so the confirm handler uses the effective id.
-  useEffect(() => {
-    if (!open) return;
-    if (!idTouched) setTeamId(derivedId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [derivedId, open, idTouched]);
-
-  // Reset modal-local state when opened.
-  useEffect(() => {
-    if (!open) return;
-    setIdTouched(false);
-    setTeamName("");
-    setTeamId("");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
-  if (!open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[200]">
-      <div className="fixed inset-0 bg-black/60" onClick={onClose} />
-      <div className="fixed inset-0 overflow-y-auto">
-        <div className="flex min-h-full items-center justify-center p-4">
-          <div className="w-full max-w-lg rounded-2xl border border-white/10 bg-[color:var(--ck-bg-glass-strong)] p-5 shadow-[var(--ck-shadow-2)]">
-            <div className="text-lg font-semibold text-[color:var(--ck-text-primary)]">Create team</div>
-            <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-              Create a new team from recipe <code className="font-mono">{recipeId}</code>
-              {recipeName ? (
-                <>
-                  {" "}(<span className="font-medium">{recipeName}</span>)
-                </>
-              ) : null}
-              .
-            </p>
+  const { effectiveId } = useSlugifiedId({
+    open,
+    name: teamName,
+    setName: setTeamName,
+    id: teamId,
+    setId: setTeamId,
+    idTouched,
+    setIdTouched,
+  });
 
-            <div className="mt-4">
-              <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team name</label>
-              <input
-                value={teamName}
-                onChange={(e) => setTeamName(e.target.value)}
-                placeholder="e.g. Crypto Team"
-                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
-                autoFocus
-              />
-            </div>
-
-            <div className="mt-4">
-              <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team id</label>
-              <input
-                value={effectiveId}
-                onChange={(e) => {
-                  setIdTouched(true);
-                  setTeamId(e.target.value);
-                }}
-                placeholder="e.g. my-team"
-                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
-              />
-              <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
-                This will scaffold ~/.openclaw/workspace-&lt;teamId&gt; and add the team to config.
-              </div>
-            </div>
-
-            <label className="mt-4 flex items-center gap-2 text-sm text-[color:var(--ck-text-secondary)]">
-              <input type="checkbox" checked={installCron} onChange={(e) => setInstallCron(e.target.checked)} />
-              Install cron jobs from this recipe
-            </label>
-
-            {error ? (
-              <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
-                {error}
-              </div>
-            ) : null}
+  return (
+    <CreateModalShell
+      open={open}
+      title="Create team"
+      recipeId={recipeId}
+      recipeName={recipeName}
+      error={error}
+      busy={busy}
+      canConfirm={!!effectiveId.trim()}
+      onClose={onClose}
+      onConfirm={onConfirm}
+      confirmLabel="Create team"
+    >
+      <div className="mt-4">
+        <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team name</label>
+        <input
+          value={teamName}
+          onChange={(e) => setTeamName(e.target.value)}
+          placeholder="e.g. Crypto Team"
+          className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
+          autoFocus
+        />
+      </div>
 
-            <div className="mt-6 flex items-center justify-end gap-2">
-              <button
-                type="button"
-                onClick={onClose}
-                className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                disabled={busy || !effectiveId.trim()}
-                onClick={onConfirm}
-                className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] hover:bg-[var(--ck-accent-red-hover)] disabled:opacity-50"
-              >
-                {busy ? "Creating…" : "Create team"}
-              </button>
-            </div>
-          </div>
+      <div className="mt-4">
+        <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Team id</label>
+        <input
+          value={effectiveId}
+          onChange={(e) => {
+            setIdTouched(true);
+            setTeamId(e.target.value);
+          }}
+          placeholder="e.g. my-team"
+          className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
+        />
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          This will scaffold ~/.openclaw/workspace-&lt;teamId&gt; and add the team to config.
         </div>
       </div>
-    </div>,
-    document.body,
+
+      <label className="mt-4 flex items-center gap-2 text-sm text-[color:var(--ck-text-secondary)]">
+        <input type="checkbox" checked={installCron} onChange={(e) => setInstallCron(e.target.checked)} />
+        Install cron jobs from this recipe
+      </label>
+    </CreateModalShell>
   );
 }

package/src/app/recipes/[id]/RecipeEditor/RecipeEditorCreateModal.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+type RecipeEditorCreateModalProps = {
+  open: boolean;
+  title: string;
+  recipeId: string;
+  children: ReactNode;
+  error?: string;
+  busy: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  confirmLabel: string;
+};
+
+export function RecipeEditorCreateModal({
+  open,
+  title,
+  recipeId,
+  children,
+  error,
+  busy,
+  onClose,
+  onConfirm,
+  confirmLabel,
+}: RecipeEditorCreateModalProps) {
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 p-4" role="dialog" aria-modal="true">
+      <div className="ck-glass w-full max-w-lg p-5">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="truncate text-lg font-semibold tracking-tight">{title}</div>
+            <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">From recipe: {recipeId}</div>
+          </div>
+          <button
+            type="button"
+            onClick={() => (!busy ? onClose() : undefined)}
+            className="rounded-[var(--ck-radius-sm)] px-2 py-1 text-sm text-[color:var(--ck-text-secondary)] hover:text-[color:var(--ck-text-primary)]"
+          >
+            Close
+          </button>
+        </div>
+        <div className="mt-4 space-y-3">
+          {children}
+          {error ? (
+            <div className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm">{error}</div>
+          ) : null}
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onClose}
+              className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] transition-colors hover:bg-white/10 disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onConfirm}
+              className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] transition-colors hover:bg-[var(--ck-accent-red-hover)] active:bg-[var(--ck-accent-red-active)] disabled:opacity-50"
+            >
+              {busy ? "Creating" : confirmLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}