@jiggai/kitchen 0.1.11 → 0.2.0

package/src/app/recipes/recipes-client.tsx

@@ -4,10 +4,15 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { ScaffoldOverlay, type ScaffoldOverlayStep } from "@/components/ScaffoldOverlay";
+import { fetchJsonWithStatus } from "@/lib/fetch-json";
+import { pollUntil } from "@/lib/poll";
+import { fetchScaffold } from "@/lib/scaffold-client";
 import { useToast } from "@/components/ToastProvider";
 import { CreateTeamModal } from "./CreateTeamModal";
+import { CreateCustomTeamModal } from "./CreateCustomTeamModal";
 import { CreateAgentModal } from "./CreateAgentModal";
-import { DeleteRecipeModal } from "./DeleteRecipeModal";
+import { DeleteRecipeModal } from "@/components/delete-modals";
+import { errorMessage } from "@/lib/errors";
 
 type Recipe = {
   id: string;
@@ -16,6 +21,12 @@ type Recipe = {
   source: "builtin" | "workspace";
 };
 
+function getEditLabel(isInstalledAgent: boolean, source: string): string {
+  if (isInstalledAgent) return "Edit agent";
+  if (source === "builtin") return "View recipe";
+  return "Edit recipe";
+}
+
 function RecipesSection({
   title,
   items,
@@ -44,11 +55,7 @@ function RecipesSection({
             const editHref = isInstalledAgent
               ? `/agents/${encodeURIComponent(r.id)}`
               : `/recipes/${encodeURIComponent(r.id)}`;
-            const editLabel = isInstalledAgent
-              ? "Edit agent"
-              : r.source === "builtin"
-                ? "View recipe"
-                : "Edit recipe";
+            const editLabel = getEditLabel(isInstalledAgent, r.source);
 
             return (
               <div
@@ -116,11 +123,13 @@ export default function RecipesClient({
   customTeamRecipes,
   customAgentRecipes,
   installedAgentIds,
+  initialOpenCustomTeam = false,
 }: {
   builtin: Recipe[];
   customTeamRecipes: Recipe[];
   customAgentRecipes: Recipe[];
   installedAgentIds: string[];
+  initialOpenCustomTeam?: boolean;
 }) {
   const toast = useToast();
 
@@ -147,6 +156,14 @@ export default function RecipesClient({
   const [createAgentBusy, setCreateAgentBusy] = useState(false);
   const [createAgentError, setCreateAgentError] = useState<string | null>(null);
 
+  const [createCustomTeamOpen, setCreateCustomTeamOpen] = useState(initialOpenCustomTeam);
+  const [createCustomTeamId, setCreateCustomTeamId] = useState<string>("");
+  const [createCustomTeamBusy, setCreateCustomTeamBusy] = useState(false);
+  const [createCustomTeamError, setCreateCustomTeamError] = useState<string | null>(null);
+  const [customTeamRoles, setCustomTeamRoles] = useState<Array<{ agentId: string; roleId: string; displayName: string }>>(
+    [],
+  );
+
   const onDelete = (id: string) => {
     setDeleteId(id);
     setModalError(null);
@@ -169,29 +186,38 @@ export default function RecipesClient({
     setCreateAgentOpen(true);
   };
 
+  const onCreateCustomTeam = () => {
+    setCreateCustomTeamId("");
+    setCustomTeamRoles([]);
+    setCreateCustomTeamError(null);
+    setCreateCustomTeamOpen(true);
+  };
+
   async function confirmDelete() {
     setBusy(true);
     setModalError(null);
     try {
-      const res = await fetch("/api/recipes/delete", {
+      const result = await fetchJsonWithStatus<{ ok?: boolean; error?: string }>("/api/recipes/delete", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ id: deleteId }),
       });
-      const json = await res.json();
-      if (!res.ok || !json.ok) {
-        const msg = String(json.error || "Delete failed");
-        if (res.status === 409) {
-          setModalError(msg);
+      if (!result.ok) {
+        if (result.status === 409) {
+          setModalError(result.error);
           return;
         }
-        throw new Error(msg);
+        throw new Error(result.error);
+      }
+      if (!result.data.ok) {
+        setModalError(result.data.error ?? "Delete failed");
+        return;
       }
       toast.push({ kind: "success", message: `Deleted recipe: ${deleteId}` });
       setDeleteOpen(false);
       window.location.reload();
     } catch (e: unknown) {
-      toast.push({ kind: "error", message: e instanceof Error ? e.message : String(e) });
+      toast.push({ kind: "error", message: errorMessage(e) });
     } finally {
       setBusy(false);
     }
@@ -199,109 +225,130 @@ export default function RecipesClient({
 
   async function waitForKitchenHealthy(opts?: { timeoutMs?: number }) {
     const timeoutMs = opts?.timeoutMs ?? 30_000;
-    const started = Date.now();
-
-    while (Date.now() - started < timeoutMs) {
-      try {
-        const res = await fetch("/healthz", { cache: "no-store" });
-        if (res.ok) return true;
-      } catch {
-        // ignore
-      }
-      await new Promise((r) => setTimeout(r, 500));
-    }
-
-    return false;
+    const result = await pollUntil<boolean>(
+      async () => {
+        try {
+          const res = await fetch("/healthz", { cache: "no-store" });
+          return res.ok ? true : null;
+        } catch {
+          return null;
+        }
+      },
+      { timeoutMs }
+    );
+    return result ?? false;
   }
 
   async function waitForTeamPageReady(teamId: string, opts?: { timeoutMs?: number }) {
     const timeoutMs = opts?.timeoutMs ?? 30_000;
-    const started = Date.now();
-
-    while (Date.now() - started < timeoutMs) {
-      try {
-        const [recipesRes, metaRes] = await Promise.all([
-          fetch("/api/recipes", { cache: "no-store" }),
-          fetch(`/api/teams/meta?teamId=${encodeURIComponent(teamId)}`, { cache: "no-store" }),
-        ]);
-
-        const recipesJson = (await recipesRes.json()) as { recipes?: Array<{ id?: unknown; kind?: unknown }> };
-        const list = Array.isArray(recipesJson.recipes) ? recipesJson.recipes : [];
-        const hasRecipe = list.some((r) => String(r.id ?? "") === teamId && String(r.kind ?? "") === "team");
-
-        const metaJson = (await metaRes.json()) as { ok?: boolean; missing?: boolean };
-        const hasMeta = Boolean(metaRes.ok && metaJson.ok && !metaJson.missing);
+    const result = await pollUntil<boolean>(
+      async () => {
+        try {
+          const [recipesRes, metaRes] = await Promise.all([
+            fetch("/api/recipes", { cache: "no-store" }),
+            fetch(`/api/teams/meta?teamId=${encodeURIComponent(teamId)}`, { cache: "no-store" }),
+          ]);
 
-        if (hasRecipe && hasMeta) return true;
-      } catch {
-        // ignore
-      }
+          const recipesJson = (await recipesRes.json()) as { recipes?: Array<{ id?: unknown; kind?: unknown }> };
+          const list = Array.isArray(recipesJson.recipes) ? recipesJson.recipes : [];
+          const hasRecipe = list.some((r) => String(r.id ?? "") === teamId && String(r.kind ?? "") === "team");
 
-      await new Promise((r) => setTimeout(r, 500));
-    }
+          const metaJson = (await metaRes.json()) as { ok?: boolean; missing?: boolean };
+          const hasMeta = Boolean(metaRes.ok && metaJson.ok && !metaJson.missing);
 
-    return false;
+          return hasRecipe && hasMeta ? true : null;
+        } catch {
+          return null;
+        }
+      },
+      { timeoutMs }
+    );
+    return result ?? false;
   }
 
-  async function confirmCreateTeam() {
-    const recipe = createRecipe;
-    if (!recipe) return;
-
-    const t = createTeamId.trim();
-    if (!t) {
-      setCreateError("Team id is required.");
-      return;
-    }
-    if (t === recipe.id) {
-      setCreateError(`Team id cannot be the same as the recipe id (${recipe.id}). Choose a new team id.`);
-      return;
-    }
+  async function attachTeamMeta(teamId: string, recipeId: string, recipeName: string) {
+    const res = await fetchJsonWithStatus<{ ok?: boolean; error?: string }>("/api/teams/meta", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ teamId, recipeId, recipeName }),
+    });
+    if (!res.ok) throw new Error(res.error);
+    if (!res.data.ok) throw new Error(res.data.error || "Failed to attach team meta");
+  }
 
-    setCreateBusy(true);
-    setCreateError(null);
+  function validateTeamIdForCreate(recipe: { id: string } | null, teamId: string): string | null {
+    if (!recipe) return null;
+    const t = teamId.trim();
+    if (!t) return "Team id is required.";
+    if (!t.endsWith("-team")) return "Team id must end with -team.";
+    if (t === recipe.id) return `Team id cannot be the same as the recipe id (${recipe.id}). Choose a new team id.`;
+    return null;
+  }
 
-    // Hide the modal immediately so the overlay is the only visible UI during scaffold.
-    setCreateOpen(false);
+  async function scaffoldWithOverlay(opts: {
+    kind: "team" | "agent";
+    recipeId: string;
+    teamId?: string;
+    agentId?: string;
+    name?: string;
+    cronInstallChoice?: "yes" | "no";
+    setBusy: (v: boolean) => void;
+    setError: (v: string | null) => void;
+    setModalOpen: (v: boolean) => void;
+    setOverlayOpen: (v: boolean) => void;
+    setOverlayStep: React.Dispatch<React.SetStateAction<ScaffoldOverlayStep>>;
+    successMessage: string;
+    navigateTo: string;
+    waitBeforeNavigate?: () => Promise<unknown>;
+  }) {
+    const {
+      kind,
+      recipeId,
+      teamId,
+      agentId,
+      name,
+      cronInstallChoice,
+      setBusy,
+      setError,
+      setModalOpen,
+      setOverlayOpen,
+      setOverlayStep,
+      successMessage,
+      navigateTo,
+      waitBeforeNavigate,
+    } = opts;
 
+    setBusy(true);
+    setError(null);
+    setModalOpen(false);
     setOverlayOpen(true);
     setOverlayStep(1);
 
     let serveTimer: ReturnType<typeof setTimeout> | null = null;
 
     try {
-      const res = await fetch("/api/scaffold", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          kind: "team",
-          recipeId: recipe.id,
-          teamId: t,
-          applyConfig: true,
-          overwrite: false,
-          cronInstallChoice: installCron ? "yes" : "no",
-        }),
-      });
-      const json = await res.json();
-      if (!res.ok || !json.ok) throw new Error(String(json.error || "Create team failed"));
+      const body =
+        kind === "team"
+          ? { kind: "team" as const, recipeId, teamId: teamId!, cronInstallChoice }
+          : { kind: "agent" as const, recipeId, agentId: agentId!, name };
+      const { res, json } = await fetchScaffold(body);
+      if (!res.ok || !(json as { ok?: boolean }).ok)
+        throw new Error(
+          String((json as { error?: string }).error || (kind === "team" ? "Create team failed" : "Create agent failed"))
+        );
 
       setOverlayStep(2);
 
-      // If scaffolding takes a while, switch copy to "Serving..." so users know we're in the
-      // apply/restart phase even if the CLI didn't print the restart hint yet.
       serveTimer = setTimeout(() => {
         setOverlayStep((prev) => (prev < 3 ? 3 : prev));
       }, 20_000);
 
-      const stderr = typeof json.stderr === "string" ? json.stderr : "";
+      const stderr = typeof (json as { stderr?: unknown }).stderr === "string" ? (json as { stderr: string }).stderr : "";
 
-      // Some CLI failures currently still surface as { ok: true, stderr: "...Error: ..." }.
-      // Treat those as hard failures so we don't navigate into a broken team page.
       if (/Failed to start CLI:/i.test(stderr) || /\bError: /i.test(stderr)) {
         throw new Error(stderr.trim() || "Scaffold failed");
       }
 
-      // If scaffolding changed config, the gateway may need a restart. During restart, new pages
-      // will throw transient errors (RSC/markdown fetches/etc.), so keep the overlay up.
       if (/Restart required:/i.test(stderr)) {
         setOverlayStep(3);
         try {
@@ -312,31 +359,55 @@ export default function RecipesClient({
         await waitForKitchenHealthy({ timeoutMs: 60_000 });
       }
 
-      // Also wait until the new team's recipe+provenance exist before navigating.
-      // This avoids the destination page throwing "raw markdown" load errors.
-      await waitForTeamPageReady(t, { timeoutMs: 60_000 });
+      if (waitBeforeNavigate) {
+        await waitBeforeNavigate();
+      }
 
       if (serveTimer) clearTimeout(serveTimer);
 
-      toast.push({ kind: "success", message: `Created team: ${t}` });
-      setCreateOpen(false);
+      toast.push({ kind: "success", message: successMessage });
+      setModalOpen(false);
 
-      // Navigate only after restart/readiness to avoid the ugly error+reload UX.
-      router.push(`/teams/${encodeURIComponent(t)}`);
+      router.push(navigateTo);
 
-      // Give the next page a beat to mount before removing the overlay.
       setTimeout(() => setOverlayOpen(false), 500);
     } catch (e: unknown) {
       if (serveTimer) clearTimeout(serveTimer);
       setOverlayOpen(false);
-      const msg = e instanceof Error ? e.message : String(e);
-      setCreateError(msg);
+      const msg = errorMessage(e);
+      setError(msg);
       toast.push({ kind: "error", message: msg });
     } finally {
-      setCreateBusy(false);
+      setBusy(false);
     }
   }
 
+  async function confirmCreateTeam() {
+    const recipe = createRecipe;
+    const err = validateTeamIdForCreate(recipe, createTeamId);
+    if (err) {
+      setCreateError(err);
+      return;
+    }
+    if (!recipe) return;
+
+    const t = createTeamId.trim();
+    await scaffoldWithOverlay({
+      kind: "team",
+      recipeId: recipe.id,
+      teamId: t,
+      cronInstallChoice: installCron ? "yes" : "no",
+      setBusy: setCreateBusy,
+      setError: setCreateError,
+      setModalOpen: setCreateOpen,
+      setOverlayOpen,
+      setOverlayStep,
+      successMessage: `Created team: ${t}`,
+      navigateTo: `/teams/${encodeURIComponent(t)}`,
+      waitBeforeNavigate: () => waitForTeamPageReady(t, { timeoutMs: 60_000 }),
+    });
+  }
+
   async function confirmCreateAgent() {
     const recipe = createAgentRecipe;
     if (!recipe) return;
@@ -351,69 +422,86 @@ export default function RecipesClient({
       return;
     }
 
-    setCreateAgentBusy(true);
-    setCreateAgentError(null);
+    await scaffoldWithOverlay({
+      kind: "agent",
+      recipeId: recipe.id,
+      agentId: a,
+      name: createAgentName.trim() || undefined,
+      setBusy: setCreateAgentBusy,
+      setError: setCreateAgentError,
+      setModalOpen: setCreateAgentOpen,
+      setOverlayOpen,
+      setOverlayStep,
+      successMessage: `Created agent: ${a}`,
+      navigateTo: `/agents/${encodeURIComponent(a)}`,
+    });
+  }
 
-    setCreateAgentOpen(false);
+  async function confirmCreateCustomTeam() {
+    const teamId = createCustomTeamId.trim();
+    if (!teamId) {
+      setCreateCustomTeamError("Team id is required.");
+      return;
+    }
+    const recipeId = teamId.endsWith("-team") ? teamId.slice(0, -"-team".length) : teamId;
+    if (!recipeId) {
+      setCreateCustomTeamError("Team id is invalid.");
+      return;
+    }
+    if (customTeamRoles.length < 1) {
+      setCreateCustomTeamError("Select at least one agent.");
+      return;
+    }
 
-    setOverlayOpen(true);
-    setOverlayStep(1);
-
-    let serveTimer: ReturnType<typeof setTimeout> | null = null;
+    setCreateCustomTeamError(null);
 
     try {
-      const res = await fetch("/api/scaffold", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          kind: "agent",
-          recipeId: recipe.id,
-          agentId: a,
-          name: createAgentName.trim() || undefined,
-          applyConfig: true,
-          overwrite: false,
-        }),
-      });
-      const json = await res.json();
-      if (!res.ok || !json.ok) throw new Error(String(json.error || "Create agent failed"));
-
-      setOverlayStep(2);
-
-      serveTimer = setTimeout(() => {
-        setOverlayStep((prev) => (prev < 3 ? 3 : prev));
-      }, 20_000);
-
-      const stderr = typeof json.stderr === "string" ? json.stderr : "";
-
-      if (/Failed to start CLI:/i.test(stderr) || /\bError: /i.test(stderr)) {
-        throw new Error(stderr.trim() || "Scaffold failed");
+      setCreateCustomTeamBusy(true);
+      const createRes = await fetchJsonWithStatus<{ ok?: boolean; error?: string; recipeId?: string }>(
+        "/api/recipes/custom-team",
+        {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            recipeId,
+            teamId,
+            roles: customTeamRoles.map((r) => ({ roleId: r.roleId, displayName: r.displayName })),
+          }),
+        },
+      );
+      setCreateCustomTeamBusy(false);
+
+      if (!createRes.ok) {
+        throw new Error(createRes.error);
       }
-
-      if (/Restart required:/i.test(stderr)) {
-        setOverlayStep(3);
-        try {
-          await fetch("/api/gateway/restart", { method: "POST" });
-        } catch {
-          // best-effort
-        }
-        await waitForKitchenHealthy({ timeoutMs: 60_000 });
+      if (!createRes.data.ok) {
+        throw new Error(createRes.data.error || "Failed to create custom team recipe");
       }
 
-      if (serveTimer) clearTimeout(serveTimer);
-
-      toast.push({ kind: "success", message: `Created agent: ${a}` });
-      setCreateAgentOpen(false);
-
-      router.push(`/agents/${encodeURIComponent(a)}`);
-      setTimeout(() => setOverlayOpen(false), 500);
+      await scaffoldWithOverlay({
+        kind: "team",
+        recipeId,
+        teamId,
+        cronInstallChoice: "no",
+        setBusy: setCreateCustomTeamBusy,
+        setError: setCreateCustomTeamError,
+        setModalOpen: setCreateCustomTeamOpen,
+        setOverlayOpen,
+        setOverlayStep,
+        successMessage: `Created team: ${teamId}`,
+        navigateTo: `/teams/${encodeURIComponent(teamId)}`,
+        waitBeforeNavigate: async () => {
+          // Some scaffold paths may not persist team.json (meta) immediately.
+          // Ensure it exists so the team editor loads reliably.
+          await attachTeamMeta(teamId, recipeId, "Custom Team");
+          await waitForTeamPageReady(teamId, { timeoutMs: 60_000 });
+        },
+      });
     } catch (e: unknown) {
-      if (serveTimer) clearTimeout(serveTimer);
-      setOverlayOpen(false);
-      const msg = e instanceof Error ? e.message : String(e);
-      setCreateAgentError(msg);
+      setCreateCustomTeamBusy(false);
+      const msg = errorMessage(e);
+      setCreateCustomTeamError(msg);
       toast.push({ kind: "error", message: msg });
-    } finally {
-      setCreateAgentBusy(false);
     }
   }
 
@@ -428,10 +516,21 @@ export default function RecipesClient({
       />
       <div className="mt-8 space-y-10">
         <section>
-          <h2 className="text-xl font-semibold tracking-tight text-[color:var(--ck-text-primary)]">Custom recipes</h2>
-          <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
-            Workspace recipes (editable) — stored under <code className="font-mono">~/.openclaw/workspace/recipes/</code>.
-          </p>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h2 className="text-xl font-semibold tracking-tight text-[color:var(--ck-text-primary)]">Custom recipes</h2>
+              <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
+                Workspace recipes (editable) — stored under <code className="font-mono">~/.openclaw/workspace/recipes/</code>.
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={onCreateCustomTeam}
+              className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-white/10 active:bg-white/15"
+            >
+              Create custom team
+            </button>
+          </div>
 
           <div className="mt-4 space-y-8">
             <RecipesSection
@@ -476,6 +575,17 @@ export default function RecipesClient({
         onConfirm={confirmDelete}
       />
 
+      <CreateCustomTeamModal
+        open={createCustomTeamOpen}
+        teamId={createCustomTeamId}
+        setTeamId={setCreateCustomTeamId}
+        busy={createCustomTeamBusy}
+        error={createCustomTeamError}
+        onRolesChange={setCustomTeamRoles}
+        onClose={() => setCreateCustomTeamOpen(false)}
+        onConfirm={confirmCreateCustomTeam}
+      />
+
       <CreateTeamModal
         open={createOpen}
         recipeId={createRecipe?.id ?? ""}

package/src/app/settings/page.tsx

@@ -2,7 +2,7 @@ import SettingsClient from "./settings-client";
 
 export default function SettingsPage() {
   return (
-    <div className="ck-glass mx-auto max-w-3xl p-6 sm:p-8">
+    <div className="ck-glass w-full p-6 sm:p-8">
       <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
       <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
         Configuration that affects scaffold behavior and automation.

package/src/app/settings/settings-client.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
 
 type Mode = "off" | "prompt" | "on";
 
@@ -15,15 +17,16 @@ export default function SettingsClient() {
       setLoading(true);
       setMsg("");
       try {
-        const res = await fetch("/api/settings/cron-installation", { cache: "no-store" });
-        const text = await res.text();
-        const json = text ? (JSON.parse(text) as { ok?: boolean; value?: string; error?: string }) : {};
-        if (!res.ok) throw new Error(json.error || "Failed to load config");
+        const json = await fetchJson<{ ok?: boolean; value?: string; error?: string }>(
+          "/api/settings/cron-installation",
+          { cache: "no-store" }
+        );
+        if (!json.ok) throw new Error(json.error || "Failed to load config");
         const v = String(json.value || "").trim();
         if (v === "off" || v === "prompt" || v === "on") setMode(v);
         else setMode("prompt");
       } catch (e: unknown) {
-        setMsg(e instanceof Error ? e.message : String(e));
+        setMsg(errorMessage(e));
       } finally {
         setLoading(false);
       }
@@ -34,18 +37,16 @@ export default function SettingsClient() {
     setSaving(true);
     setMsg("");
     try {
-      const res = await fetch("/api/settings/cron-installation", {
+      const json = await fetchJson<{ ok?: boolean; error?: string }>("/api/settings/cron-installation", {
         method: "PUT",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ value: next }),
       });
-      const text = await res.text();
-      const json = text ? (JSON.parse(text) as { ok?: boolean; error?: string }) : {};
-      if (!res.ok) throw new Error(json.error || "Save failed");
+      if (!json.ok) throw new Error(json.error || "Save failed");
       setMode(next);
       setMsg("Saved.");
     } catch (e: unknown) {
-      setMsg(e instanceof Error ? e.message : String(e));
+      setMsg(errorMessage(e));
     } finally {
       setSaving(false);
     }