@jiggai/kitchen 0.3.1 → 0.3.3

package/src/app/recipes/CreateCustomTeamModal.tsx

@@ -1,375 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-"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,91 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useSlugifiedId } from "@/lib/use-slugified-id";
-import { CreateModalShell } from "./CreateModalShell";
-
-export function CreateTeamModal({
-  open,
-  recipeId,
-  recipeName,
-  teamId,
-  setTeamId,
-  installCron,
-  setInstallCron,
-  busy,
-  error,
-  onClose,
-  onConfirm,
-}: {
-  open: boolean;
-  recipeId: string;
-  recipeName: string;
-  teamId: string;
-  setTeamId: (v: string) => void;
-  installCron: boolean;
-  setInstallCron: (v: boolean) => void;
-  busy?: boolean;
-  error?: string | null;
-  onClose: () => void;
-  onConfirm: () => void;
-}) {
-  const [teamName, setTeamName] = useState("");
-  const [idTouched, setIdTouched] = useState(false);
-
-  const { effectiveId } = useSlugifiedId({
-    open,
-    name: teamName,
-    setName: setTeamName,
-    id: teamId,
-    setId: setTeamId,
-    idTouched,
-    setIdTouched,
-  });
-
-  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-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>
-    </CreateModalShell>
-  );
-}

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

@@ -1,72 +0,0 @@
-"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>
-  );
-}