@jiggai/kitchen 0.1.11 → 0.2.0

package/src/app/manifest.ts

@@ -0,0 +1,15 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Claw Kitchen",
+    short_name: "Claw Kitchen",
+    description: "Local-first UI for authoring ClawRecipes recipes and scaffolding agents/teams.",
+    start_url: "/",
+    display: "standalone",
+    icons: [
+      { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" },
+      { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" },
+    ],
+  };
+}

package/src/app/not-found.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-12">
+      <h1 className="text-xl font-semibold">Page not found</h1>
+      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">The page you requested does not exist.</p>
+    </div>
+  );
+}

package/src/app/page.tsx

@@ -1,25 +1,11 @@
-import { runOpenClaw } from "@/lib/openclaw";
 import { unstable_noStore as noStore } from "next/cache";
+import { type AgentListItem } from "@/lib/agents";
+import { runOpenClaw } from "@/lib/openclaw";
+import { listRecipes } from "@/lib/recipes";
 import HomeClient from "./HomeClient";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
-
-type AgentListItem = {
-  id: string;
-  identityName?: string;
-  workspace?: string;
-  model?: string;
-  isDefault?: boolean;
-};
-
-type RecipeListItem = {
-  id: string;
-  name: string;
-  kind: "agent" | "team";
-  source: "builtin" | "workspace";
-};
-
 async function getAgents(): Promise<AgentListItem[]> {
   const res = await runOpenClaw(["agents", "list", "--json"]);
   if (!res.ok) return [];
@@ -27,27 +13,14 @@ async function getAgents(): Promise<AgentListItem[]> {
 }
 
 async function getTeamsFromRecipes(): Promise<{ teamNames: Record<string, string> }> {
-  const res = await runOpenClaw(["recipes", "list"]);
-  if (!res.ok) return { teamNames: {} };
-
-  let items: RecipeListItem[] = [];
-  try {
-    items = JSON.parse(res.stdout) as RecipeListItem[];
-  } catch {
-    return { teamNames: {} };
-  }
-
+  const items = await listRecipes();
   const teamNames: Record<string, string> = {};
-
   for (const r of items) {
     if (r.kind !== "team") continue;
     const name = String(r.name ?? "").trim();
     if (!name) continue;
-
     teamNames[r.id] = name;
-
   }
-
   return { teamNames };
 }
 

package/src/app/recipes/CreateAgentModal.tsx

@@ -1,15 +1,20 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
+import { fetchJson } from "@/lib/fetch-json";
+import { useSlugifiedId } from "@/lib/use-slugified-id";
+import { CreateModalShell } from "./CreateModalShell";
+
+function getAvailabilityBorderClass(state: string): string {
+  if (state === "available") return "border-emerald-400/50";
+  if (state === "taken") return "border-red-400/60";
+  return "border-white/10";
+}
 
-function slugifyId(input: string) {
-  return String(input ?? "")
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .replace(/--+/g, "-");
+function getAvailabilityHint(state: string): string {
+  if (state === "taken") return "That id is already taken.";
+  if (state === "available") return "Id is available.";
+  return "This will scaffold ~/.openclaw/workspace/agents/<agentId> and add the agent to config.";
 }
 
 type Availability =
@@ -18,6 +23,18 @@ type Availability =
   | { state: "available" }
   | { state: "taken"; reason?: string };
 
+/** Sync availability from local arrays (no fetch). Returns null when API check needed. */
+function syncAvailability(
+  v: string,
+  existingRecipeIds: string[],
+  existingAgentIds: string[]
+): Availability | null {
+  if (!v) return { state: "empty" };
+  if (existingRecipeIds.includes(v)) return { state: "taken", reason: "recipe-id-collision" };
+  if (existingAgentIds.includes(v)) return { state: "taken", reason: "agent-exists" };
+  return null;
+}
+
 export function CreateAgentModal({
   open,
   recipeId,
@@ -48,164 +65,92 @@ export function CreateAgentModal({
   onConfirm: () => void;
 }) {
   const [idTouched, setIdTouched] = useState(false);
-  const [availability, setAvailability] = useState<Availability>({ state: "empty" });
-
-  const derivedId = useMemo(() => slugifyId(agentName), [agentName]);
-  const effectiveId = idTouched ? agentId : derivedId;
-
-  // Keep parent state in sync so the confirm handler uses the effective id.
-  useEffect(() => {
-    if (!open) return;
-    if (!idTouched) setAgentId(derivedId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [derivedId, open, idTouched]);
+  const [apiAvailability, setApiAvailability] = useState<Availability | null>(null);
+
+  const { effectiveId } = useSlugifiedId({
+    open,
+    name: agentName,
+    setName: setAgentName,
+    id: agentId,
+    setId: setAgentId,
+    idTouched,
+    setIdTouched,
+  });
+
+  const v = String(effectiveId ?? "").trim();
+  const syncAvail = useMemo(
+    () => (open ? syncAvailability(v, existingRecipeIds, existingAgentIds) : { state: "empty" as const }),
+    [open, v, existingRecipeIds, existingAgentIds]
+  );
 
-  // Reset modal-local state when opened.
-  useEffect(() => {
-    if (!open) return;
-    setIdTouched(false);
-    setAvailability({ state: "empty" });
-    setAgentName("");
-    setAgentId("");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  const availability: Availability = syncAvail ?? apiAvailability ?? { state: "available" };
 
-  // Check id availability.
-  // Fast path: local check (recipes list + agent list already in memory).
-  // Slow path: server check for any edge cases.
   useEffect(() => {
-    if (!open) return;
-    const v = String(effectiveId ?? "").trim();
-    if (!v) {
-      setAvailability({ state: "empty" });
-      return;
-    }
-
-    // Local rules (instant)
-    if (existingRecipeIds.includes(v)) {
-      setAvailability({ state: "taken", reason: "recipe-id-collision" });
-      return;
-    }
-    if (existingAgentIds.includes(v)) {
-      setAvailability({ state: "taken", reason: "agent-exists" });
-      return;
-    }
-
-    setAvailability({ state: "available" });
-
-    // Server confirm (debounced)
+    if (!open || syncAvail !== null) return;
     const t = setTimeout(() => {
       void (async () => {
-        setAvailability({ state: "checking" });
+        setApiAvailability({ state: "checking" });
         try {
-          const res = await fetch(`/api/ids/check?kind=agent&id=${encodeURIComponent(v)}`, { cache: "no-store" });
-          const json = (await res.json()) as { ok?: boolean; available?: boolean; reason?: string };
-          if (!res.ok || !json.ok) throw new Error(String((json as { error?: unknown }).error ?? "Failed to check id"));
-          if (json.available) setAvailability({ state: "available" });
-          else setAvailability({ state: "taken", reason: json.reason });
+          const json = await fetchJson<{ ok?: boolean; available?: boolean; reason?: string }>(
+            `/api/ids/check?kind=agent&id=${encodeURIComponent(v)}`,
+            { cache: "no-store" }
+          );
+          if (json.available) setApiAvailability({ state: "available" });
+          else setApiAvailability({ state: "taken", reason: json.reason });
         } catch {
-          setAvailability({ state: "available" });
+          setApiAvailability({ state: "available" });
         }
       })();
     }, 250);
-
     return () => clearTimeout(t);
-  }, [effectiveId, open, existingRecipeIds, existingAgentIds]);
-
-  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 agent</div>
-            <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
-              Create a new agent from recipe <code className="font-mono">{recipeId}</code>
-              {recipeName ? (
-                <>
-                  {" "}(<span className="font-medium">{recipeName}</span>)
-                </>
-              ) : null}
-              .
-            </p>
-
-            <div className="mt-4">
-              <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Agent name</label>
-              <input
-                value={agentName}
-                onChange={(e) => setAgentName(e.target.value)}
-                placeholder="e.g. Crypto Onchain"
-                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)]">Agent id</label>
-              <input
-                value={effectiveId}
-                onChange={(e) => {
-                  setIdTouched(true);
-                  setAgentId(e.target.value);
-                }}
-                placeholder="e.g. crypto-onchain"
-                className={
-                  "mt-2 w-full rounded-[var(--ck-radius-sm)] border bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)] " +
-                  (availability.state === "available"
-                    ? "border-emerald-400/50"
-                    : availability.state === "taken"
-                      ? "border-red-400/60"
-                      : "border-white/10")
-                }
-              />
-              <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
-                {availability.state === "taken"
-                  ? "That id is already taken."
-                  : availability.state === "available"
-                    ? "Id is available."
-                    : "This will scaffold ~/.openclaw/workspace/agents/<agentId> and add the agent to config."}
-              </div>
-            </div>
-
-            <div className="mt-4">
-              <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Name (optional)</label>
-              <input
-                value={agentName}
-                onChange={(e) => setAgentName(e.target.value)}
-                placeholder="e.g. My Agent"
-                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>
-
-            {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}
+  }, [open, syncAvail, v]);
+
+  return (
+    <CreateModalShell
+      open={open}
+      title="Create agent"
+      recipeId={recipeId}
+      recipeName={recipeName}
+      error={error}
+      busy={busy}
+      canConfirm={
+        !!effectiveId.trim() &&
+        availability.state !== "taken" &&
+        availability.state !== "checking"
+      }
+      onClose={onClose}
+      onConfirm={onConfirm}
+      confirmLabel="Create agent"
+    >
+      <div className="mt-4">
+        <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Agent name</label>
+        <input
+          value={agentName}
+          onChange={(e) => setAgentName(e.target.value)}
+          placeholder="e.g. Crypto Onchain"
+          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() || availability.state === "taken" || availability.state === "checking"}
-                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 agent"}
-              </button>
-            </div>
-          </div>
+      <div className="mt-4">
+        <label className="text-sm font-medium text-[color:var(--ck-text-primary)]">Agent id</label>
+        <input
+          value={effectiveId}
+          onChange={(e) => {
+            setIdTouched(true);
+            setAgentId(e.target.value);
+          }}
+          placeholder="e.g. crypto-onchain"
+          className={
+            "mt-2 w-full rounded-[var(--ck-radius-sm)] border bg-white/5 px-3 py-2 text-sm text-[color:var(--ck-text-primary)] placeholder:text-[color:var(--ck-text-tertiary)] " +
+            getAvailabilityBorderClass(availability.state)
+          }
+        />
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          {getAvailabilityHint(availability.state)}
         </div>
       </div>
-    </div>,
-    document.body,
+    </CreateModalShell>
   );
 }