@jiggai/kitchen 0.1.11 → 0.2.0

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

@@ -0,0 +1,216 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { expectedFilesForRole, templateKeyToFileName } from "./recipe-editor-utils";
+import type { AgentRecipeFrontmatter, TeamRecipeFrontmatter } from "./types";
+
+function RecipePanelCard({
+  title,
+  description,
+  buttonLabel,
+  onButtonClick,
+  error,
+  children,
+}: {
+  title: string;
+  description: ReactNode;
+  buttonLabel: string;
+  onButtonClick: () => void;
+  error?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="ck-glass-strong p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">{title}</div>
+          <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">{description}</div>
+        </div>
+        <button
+          type="button"
+          onClick={onButtonClick}
+          className="shrink-0 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)]"
+        >
+          {buttonLabel}
+        </button>
+      </div>
+      {error ? (
+        <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-xs text-[color:var(--ck-text-primary)]">
+          Frontmatter parse error: {error}
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+function TeamRecipeDetails({ fm, recipe }: { fm: TeamRecipeFrontmatter | null; recipe: { id: string } }) {
+  return (
+    <div className="mt-4 space-y-3">
+      <details className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3" open>
+        <summary className="cursor-pointer text-sm font-medium text-[color:var(--ck-text-primary)]">Recipe information</summary>
+        <div className="mt-2 space-y-1 text-xs text-[color:var(--ck-text-secondary)]">
+          <div><span className="text-[color:var(--ck-text-tertiary)]">Recipe id:</span> {fm?.id ?? recipe.id}</div>
+          <div><span className="text-[color:var(--ck-text-tertiary)]">Version:</span> {fm?.version ?? "(unknown)"}</div>
+          <div><span className="text-[color:var(--ck-text-tertiary)]">Team id:</span> {fm?.team?.teamId ?? "(not set)"}</div>
+          {fm?.description ? <div className="whitespace-pre-wrap">{fm.description}</div> : null}
+        </div>
+      </details>
+      <TeamAgentsDetails fm={fm} />
+      <TeamCronDetails fm={fm} />
+    </div>
+  );
+}
+
+function TeamAgentsDetails({ fm }: { fm: TeamRecipeFrontmatter | null }) {
+  return (
+    <details className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3">
+      <summary className="cursor-pointer text-sm font-medium text-[color:var(--ck-text-primary)]">
+        Agents ({fm?.agents?.length ?? 0})
+      </summary>
+      <div className="mt-2 space-y-2">
+        {(fm?.agents ?? []).map((a, idx) => (
+          <details key={`${a.role ?? "agent"}:${idx}`} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+            <summary className="cursor-pointer text-sm text-[color:var(--ck-text-primary)]">
+              <span className="font-medium">{a.name ?? a.role ?? "(unnamed)"}</span>
+              {a.role ? <span className="text-[color:var(--ck-text-tertiary)]"> — {a.role}</span> : null}
+            </summary>
+            <div className="mt-2 space-y-1 text-xs text-[color:var(--ck-text-secondary)]">
+              <div><span className="text-[color:var(--ck-text-tertiary)]">Role:</span> {a.role ?? "(none)"}</div>
+              <div><span className="text-[color:var(--ck-text-tertiary)]">Tools profile:</span> {a.tools?.profile ?? "(default)"}</div>
+              <div><span className="text-[color:var(--ck-text-tertiary)]">Allow:</span> {(a.tools?.allow ?? []).length ? (a.tools?.allow ?? []).join(", ") : "(none)"}</div>
+              <div><span className="text-[color:var(--ck-text-tertiary)]">Deny:</span> {(a.tools?.deny ?? []).length ? (a.tools?.deny ?? []).join(", ") : "(none)"}</div>
+              <div className="pt-1">
+                <span className="text-[color:var(--ck-text-tertiary)]">Expected files:</span>{" "}
+                {expectedFilesForRole(fm, a.role).length ? expectedFilesForRole(fm, a.role).join(", ") : "(not listed)"}
+              </div>
+            </div>
+          </details>
+        ))}
+        {(!fm?.agents || fm.agents.length === 0) ? (
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">(No agents listed in frontmatter)</div>
+        ) : null}
+      </div>
+    </details>
+  );
+}
+
+function TeamCronDetails({ fm }: { fm: TeamRecipeFrontmatter | null }) {
+  return (
+    <details className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3">
+      <summary className="cursor-pointer text-sm font-medium text-[color:var(--ck-text-primary)]">
+        Cron jobs ({fm?.cronJobs?.length ?? 0})
+      </summary>
+      <div className="mt-2 space-y-2">
+        {(fm?.cronJobs ?? []).map((c, idx) => (
+          <details key={`${c.id ?? "cron"}:${idx}`} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+            <summary className="cursor-pointer text-sm text-[color:var(--ck-text-primary)]">
+              <span className="font-medium">{c.name ?? c.id ?? "(unnamed)"}</span>
+              {c.schedule ? <span className="text-[color:var(--ck-text-tertiary)]"> — {c.schedule}</span> : null}
+            </summary>
+            <div className="mt-2 space-y-1 text-xs text-[color:var(--ck-text-secondary)]">
+              {c.agentId ? <div><span className="text-[color:var(--ck-text-tertiary)]">Agent:</span> {c.agentId}</div> : null}
+              {c.channel ? <div><span className="text-[color:var(--ck-text-tertiary)]">Channel:</span> {c.channel}</div> : null}
+              {typeof c.enabledByDefault === "boolean" ? (
+                <div><span className="text-[color:var(--ck-text-tertiary)]">Enabled by default:</span> {c.enabledByDefault ? "yes" : "no"}</div>
+              ) : null}
+              {c.message ? (
+                <div className="mt-2 whitespace-pre-wrap rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2 text-[11px] text-[color:var(--ck-text-primary)]">{c.message}</div>
+              ) : null}
+            </div>
+          </details>
+        ))}
+        {(!fm?.cronJobs || fm.cronJobs.length === 0) ? (
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">(No cron jobs listed in frontmatter)</div>
+        ) : null}
+      </div>
+    </details>
+  );
+}
+
+export function TeamRecipePanelContent({
+  recipe,
+  fm,
+  fmErr,
+  onOpenCreateTeam,
+}: {
+  recipe: { id: string };
+  fm: TeamRecipeFrontmatter | null;
+  fmErr?: string;
+  onOpenCreateTeam: () => void;
+}) {
+  return (
+    <RecipePanelCard
+      title="Team recipe"
+      description={
+        <>
+          Create a team from this recipe. Creating a Team runs <code>openclaw recipes scaffold-team</code> with{" "}
+          <code>--apply-config</code>.
+        </>
+      }
+      buttonLabel="Create Team"
+      onButtonClick={onOpenCreateTeam}
+      error={fmErr}
+    >
+      <TeamRecipeDetails fm={fm} recipe={recipe} />
+    </RecipePanelCard>
+  );
+}
+
+export function AgentRecipePanelContent({
+  recipe,
+  afm,
+  afmErr,
+  onOpenCreateAgent,
+}: {
+  recipe: { id: string };
+  afm: AgentRecipeFrontmatter | null;
+  afmErr?: string;
+  onOpenCreateAgent: () => void;
+}) {
+  return (
+    <RecipePanelCard
+      title="Agent recipe"
+      description={
+        <>
+          Create an agent from this recipe. Creating an Agent runs <code>openclaw recipes scaffold</code> with{" "}
+          <code>--apply-config</code>.
+        </>
+      }
+      buttonLabel="Create Agent"
+      onButtonClick={onOpenCreateAgent}
+      error={afmErr}
+    >
+      <div className="mt-4 space-y-3">
+        <details className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3" open>
+          <summary className="cursor-pointer text-sm font-medium text-[color:var(--ck-text-primary)]">Recipe information</summary>
+          <div className="mt-2 space-y-1 text-xs text-[color:var(--ck-text-secondary)]">
+            <div><span className="text-[color:var(--ck-text-tertiary)]">Recipe id:</span> {afm?.id ?? recipe.id}</div>
+            <div><span className="text-[color:var(--ck-text-tertiary)]">Version:</span> {afm?.version ?? "(unknown)"}</div>
+            {afm?.description ? <div className="whitespace-pre-wrap">{afm.description}</div> : null}
+          </div>
+        </details>
+        <details className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3">
+          <summary className="cursor-pointer text-sm font-medium text-[color:var(--ck-text-primary)]">
+            Files ({Object.keys(afm?.templates ?? {}).length})
+          </summary>
+          <div className="mt-2 space-y-1 text-xs text-[color:var(--ck-text-secondary)]">
+            {Object.keys(afm?.templates ?? {}).length ? (
+              <ul className="list-disc space-y-1 pl-5">
+                {Object.keys(afm?.templates ?? {}).map((k) => (
+                  <li key={k}>
+                    <span className="font-mono text-[11px]">{k}</span>
+                    <span className="text-[color:var(--ck-text-tertiary)]"> → </span>
+                    <span className="font-mono text-[11px]">{templateKeyToFileName(k)}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <div className="text-[color:var(--ck-text-tertiary)]">(No templates listed in frontmatter)</div>
+            )}
+          </div>
+        </details>
+      </div>
+    </RecipePanelCard>
+  );
+}

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

@@ -0,0 +1,271 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { errorMessage } from "@/lib/errors";
+import { fetchJson } from "@/lib/fetch-json";
+import { validateCreateId } from "@/lib/recipe-team-agents";
+import { fetchScaffold } from "@/lib/scaffold-client";
+import type { AgentRecipeFrontmatter, Recipe, TeamRecipeFrontmatter } from "./types";
+import { parseFrontmatter } from "./recipe-editor-utils";
+import { TeamRecipePanelContent, AgentRecipePanelContent } from "./RecipeEditorPanel";
+import { RecipeEditorCreateModal } from "./RecipeEditorCreateModal";
+
+type CreateModalKind = "team" | "agent" | null;
+
+export default function RecipeEditor({ recipeId }: { recipeId: string }) {
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [recipe, setRecipe] = useState<Recipe | null>(null);
+  const [content, setContent] = useState<string>("");
+  const [message, setMessage] = useState<string>("");
+
+  const [createModalKind, setCreateModalKind] = useState<CreateModalKind>(null);
+  const [createId, setCreateId] = useState("");
+  const [createName, setCreateName] = useState("");
+  const [cronInstallChoice, setCronInstallChoice] = useState<"yes" | "no">("no");
+  const [createBusy, setCreateBusy] = useState(false);
+  const [createError, setCreateError] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      setMessage("");
+      try {
+        const json = await fetchJson<{ recipe: Recipe }>(
+          `/api/recipes/${encodeURIComponent(recipeId)}`,
+          { cache: "no-store" }
+        );
+        const r = json.recipe;
+        setRecipe(r);
+        setContent(r.content);
+      } catch (e: unknown) {
+        setMessage(errorMessage(e));
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [recipeId]);
+
+  const canSave = useMemo(() => {
+    if (!recipe) return false;
+    return recipe.filePath !== null;
+  }, [recipe]);
+
+  const teamFrontmatter = useMemo(() => {
+    if (!recipe || recipe.kind !== "team") return { fm: null as TeamRecipeFrontmatter | null, error: undefined as string | undefined };
+    return parseFrontmatter(content);
+  }, [recipe, content]);
+
+  const agentFrontmatter = useMemo(() => {
+    if (!recipe || recipe.kind !== "agent") return { fm: null as AgentRecipeFrontmatter | null, error: undefined as string | undefined };
+    return parseFrontmatter(content);
+  }, [recipe, content]);
+
+  async function onSave() {
+    setSaving(true);
+    setMessage("");
+    try {
+      const json = await fetchJson<{ filePath: string }>(
+        `/api/recipes/${encodeURIComponent(recipeId)}`,
+        {
+          method: "PUT",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ content }),
+        }
+      );
+      setMessage(`Saved to ${json.filePath}`);
+    } catch (e: unknown) {
+      setMessage(errorMessage(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function openCreateTeam() {
+    setCreateError("");
+    setCreateId("");
+    setCronInstallChoice("no");
+    setCreateModalKind("team");
+  }
+
+  function openCreateAgent() {
+    setCreateError("");
+    setCreateId("");
+    setCreateName((agentFrontmatter.fm?.name || recipe?.name || "").trim());
+    setCreateModalKind("agent");
+  }
+
+  async function onSubmitCreate() {
+    if (!recipe || !createModalKind) return;
+    const kind = createModalKind;
+    const err = validateCreateId(recipe, createId, kind);
+    if (err) {
+      setCreateError(err);
+      return;
+    }
+
+    const id = createId.trim();
+    setCreateBusy(true);
+    setCreateError("");
+
+    try {
+      if (kind === "team") {
+        const { res, json } = await fetchScaffold({
+          kind: "team",
+          recipeId: recipe.id,
+          teamId: id,
+          cronInstallChoice,
+        });
+        if (!res.ok) throw new Error((json as { error?: string }).error || "Create Team failed");
+        setCreateModalKind(null);
+        router.push(`/teams/${encodeURIComponent(id)}`);
+      } else {
+        const { res, json } = await fetchScaffold({
+          kind: "agent",
+          recipeId: recipe.id,
+          agentId: id,
+          name: createName.trim() || undefined,
+        });
+        if (!res.ok) throw new Error((json as { error?: string }).error || "Create Agent failed");
+        setCreateModalKind(null);
+        router.push(`/agents/${encodeURIComponent(id)}`);
+      }
+      router.refresh();
+    } catch (e: unknown) {
+      setCreateError(errorMessage(e));
+    } finally {
+      setCreateBusy(false);
+    }
+  }
+
+  if (loading) return <div className="ck-glass mx-auto max-w-4xl p-6">Loading</div>;
+  if (!recipe) return <div className="ck-glass mx-auto max-w-4xl p-6">Not found.</div>;
+
+  const fm = recipe.kind === "team" ? teamFrontmatter.fm : null;
+  const fmErr = recipe.kind === "team" ? teamFrontmatter.error : undefined;
+
+  const afm = recipe.kind === "agent" ? agentFrontmatter.fm : null;
+  const afmErr = recipe.kind === "agent" ? agentFrontmatter.error : undefined;
+
+  return (
+    <div className="ck-glass mx-auto max-w-6xl p-6 sm:p-8">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
+        <div className="min-w-0">
+          <h1 className="truncate text-2xl font-semibold tracking-tight">{recipe.name}</h1>
+          <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">
+            {recipe.id} • {recipe.kind} • {recipe.source}
+          </div>
+          <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+            Path: {recipe.filePath ?? "(unknown / not writable)"}
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <button
+            disabled={!canSave || saving}
+            onClick={onSave}
+            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"
+          >
+            {saving ? "Saving" : "Save"}
+          </button>
+        </div>
+      </div>
+
+      {message ? (
+        <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-primary)]">
+          {message}
+        </div>
+      ) : null}
+
+      <div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div className="ck-glass-strong p-4">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Recipe markdown</div>
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            className="mt-2 h-[70vh] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3 font-mono text-xs text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)]"
+            spellCheck={false}
+          />
+        </div>
+
+        {recipe.kind === "team" ? (
+          <TeamRecipePanelContent recipe={recipe} fm={fm as TeamRecipeFrontmatter | null} fmErr={fmErr} onOpenCreateTeam={openCreateTeam} />
+        ) : (
+          <AgentRecipePanelContent recipe={recipe} afm={afm as AgentRecipeFrontmatter | null} afmErr={afmErr} onOpenCreateAgent={openCreateAgent} />
+        )}
+      </div>
+
+      <RecipeEditorCreateModal
+        open={createModalKind !== null}
+        title={createModalKind === "team" ? "Create Team" : "Create Agent"}
+        recipeId={recipe.id}
+        busy={createBusy}
+        error={createError || undefined}
+        onClose={() => setCreateModalKind(null)}
+        onConfirm={onSubmitCreate}
+        confirmLabel={createModalKind === "team" ? "Create Team" : "Create Agent"}
+      >
+        {createModalKind === "team" ? (
+          <>
+            <label className="block">
+              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Team id</div>
+              <input
+                value={createId}
+                onChange={(e) => setCreateId(e.target.value)}
+                placeholder="e.g. acme"
+                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                disabled={createBusy}
+              />
+            </label>
+            <label className="block">
+              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Install cron jobs</div>
+              <select
+                value={cronInstallChoice}
+                onChange={(e) => setCronInstallChoice(e.target.value as "yes" | "no")}
+                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                disabled={createBusy}
+              >
+                <option value="no">No (recommended)</option>
+                <option value="yes">Yes</option>
+              </select>
+              <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+                Kitchen scaffolds non-interactively; this controls the one-time cron install choice for this run.
+              </div>
+            </label>
+          </>
+        ) : (
+          <>
+            <label className="block">
+              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Agent id</div>
+              <input
+                value={createId}
+                onChange={(e) => setCreateId(e.target.value)}
+                placeholder="e.g. larry"
+                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                disabled={createBusy}
+              />
+            </label>
+            <label className="block">
+              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Name (optional)</div>
+              <input
+                value={createName}
+                onChange={(e) => setCreateName(e.target.value)}
+                placeholder="e.g. Larry"
+                className="mt-2 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+                disabled={createBusy}
+              />
+            </label>
+          </>
+        )}
+      </RecipeEditorCreateModal>
+
+      <p className="mt-6 text-xs text-[color:var(--ck-text-tertiary)]">
+        This page edits the recipe markdown and previews what will be created when you click{" "}
+        {recipe.kind === "team" ? "Create Team" : "Create Agent"}.
+      </p>
+    </div>
+  );
+}

package/src/app/recipes/[id]/RecipeEditor/recipe-editor-utils.ts

@@ -0,0 +1,46 @@
+import { parse as parseYaml } from "yaml";
+import { errorMessage } from "@/lib/errors";
+import type { AgentRecipeFrontmatter, TeamRecipeFrontmatter } from "./types";
+
+export function parseFrontmatter(raw: string): { fm: TeamRecipeFrontmatter | AgentRecipeFrontmatter | null; error?: string } {
+  const start = raw.indexOf("---\n");
+  if (start !== 0) return { fm: null };
+  const end = raw.indexOf("\n---\n", 4);
+  if (end === -1) return { fm: null };
+  const yamlText = raw.slice(4, end);
+
+  try {
+    const fm = parseYaml(yamlText) as TeamRecipeFrontmatter | AgentRecipeFrontmatter;
+    if (!fm || typeof fm !== "object") return { fm: null };
+    return { fm };
+  } catch (e) {
+    return { fm: null, error: errorMessage(e) };
+  }
+}
+
+export function templateKeyToFileName(key: string, stripRolePrefix?: boolean): string {
+  const suffix = stripRolePrefix ? key.split(".").slice(1).join(".") : key;
+  switch (suffix) {
+    case "soul":
+      return "SOUL.md";
+    case "agents":
+      return "AGENTS.md";
+    case "tools":
+      return "TOOLS.md";
+    case "identity":
+      return "IDENTITY.md";
+    case "install":
+      return "INSTALL.md";
+    case "status":
+      return "STATUS.md";
+    default:
+      return suffix ? `${suffix.toUpperCase()}` : key;
+  }
+}
+
+export function expectedFilesForRole(fm: TeamRecipeFrontmatter | null, role: string | undefined): string[] {
+  if (!fm || !role || !fm.templates) return [];
+  const keys = Object.keys(fm.templates).filter((k) => k.startsWith(`${role}.`));
+  const files = keys.map((k) => templateKeyToFileName(k, true));
+  return [...new Set(files)];
+}

package/src/app/recipes/[id]/RecipeEditor/types.ts

@@ -0,0 +1,52 @@
+export type Recipe = {
+  id: string;
+  name: string;
+  kind: "agent" | "team";
+  source: "builtin" | "workspace";
+  content: string;
+  filePath: string | null;
+};
+
+export type TeamRecipeFrontmatter = {
+  id?: string;
+  name?: string;
+  version?: string;
+  description?: string;
+  kind?: "team";
+  source?: string;
+  cronJobs?: Array<{
+    id?: string;
+    name?: string;
+    schedule?: string;
+    timezone?: string;
+    agentId?: string;
+    channel?: string;
+    to?: string;
+    description?: string;
+    message?: string;
+    enabledByDefault?: boolean;
+  }>;
+  agents?: Array<{
+    role?: string;
+    name?: string;
+    tools?: {
+      profile?: string;
+      allow?: string[];
+      deny?: string[];
+    };
+  }>;
+  team?: {
+    teamId?: string;
+  };
+  templates?: Record<string, string>;
+};
+
+export type AgentRecipeFrontmatter = {
+  id?: string;
+  name?: string;
+  version?: string;
+  description?: string;
+  kind?: "agent";
+  source?: string;
+  templates?: Record<string, string>;
+};

package/src/app/recipes/[id]/page.tsx

@@ -1,39 +1,25 @@
 import Link from "next/link";
 import { unstable_noStore as noStore } from "next/cache";
 
-import { runOpenClaw } from "@/lib/openclaw";
+import { listRecipes } from "@/lib/recipes";
 import RecipeEditor from "./RecipeEditor";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
-type RecipeListItem = {
-  id: string;
-  name: string;
-  kind: "agent" | "team";
-  source: "builtin" | "workspace";
-};
-
 async function getKind(id: string): Promise<"agent" | "team" | null> {
-  const res = await runOpenClaw(["recipes", "list"]);
-  if (!res.ok) return null;
-  try {
-    const items = JSON.parse(res.stdout) as RecipeListItem[];
-    return items.find((r) => r.id === id)?.kind ?? null;
-  } catch {
-    return null;
-  }
+  const recipes = await listRecipes();
+  return recipes.find((r) => r.id === id)?.kind ?? null;
 }
 
 export default async function RecipePage({ params }: { params: Promise<{ id: string }> }) {
   noStore();
 
   const { id } = await params;
-  const kind = await getKind(id);
+  await getKind(id); // Resolved for future redirect logic; kept for cache consistency
 
   // NOTE: We do NOT redirect team recipes to /teams/<id>.
   // /recipes/<id> is the recipe editor/preview surface; /teams/<id> is the installed team editor.
-  void kind;
 
   return (
     <main className="min-h-screen p-8">

package/src/app/recipes/page.tsx

@@ -43,7 +43,11 @@ async function getAgents(): Promise<{ agentIds: string[]; error: string | null }
   }
 }
 
-export default async function RecipesPage() {
+export default async function RecipesPage({
+  searchParams,
+}: {
+  searchParams?: Record<string, string | string[] | undefined>;
+}) {
   noStore();
 
   const [{ recipes, error }, { agentIds }] = await Promise.all([getRecipes(), getAgents()]);
@@ -57,7 +61,7 @@ export default async function RecipesPage() {
   const customAgentRecipes = workspace.filter((r) => r.kind === "agent");
 
   return (
-    <div className="ck-glass mx-auto max-w-4xl p-6 sm:p-8">
+    <div className="ck-glass w-full p-6 sm:p-8">
       <div className="flex items-baseline justify-between gap-4">
         <h1 className="text-2xl font-semibold tracking-tight">Recipes</h1>
         <Link
@@ -84,6 +88,9 @@ export default async function RecipesPage() {
         customTeamRecipes={customTeamRecipes}
         customAgentRecipes={customAgentRecipes}
         installedAgentIds={agentIds}
+        initialOpenCustomTeam={
+          String(searchParams?.createCustomTeam ?? "") === "1" || String(searchParams?.createCustomTeam ?? "") === "true"
+        }
       />
 
       <p className="mt-10 text-xs text-[color:var(--ck-text-tertiary)]">