@jiggai/kitchen 0.3.1 → 0.3.3

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

@@ -1,201 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { errorMessage } from "@/lib/errors";
-import { fetchJson } from "@/lib/fetch-json";
-import { type GoalFrontmatter } from "@/lib/goals-client";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-
-async function fetchGoals(): Promise<{ goals: GoalFrontmatter[]; error: string | null }> {
-  try {
-    const data = await fetchJson<{ goals?: GoalFrontmatter[] }>("/api/goals", { cache: "no-store" });
-    return { goals: data.goals ?? [], error: null };
-  } catch (e: unknown) {
-    return { goals: [], error: errorMessage(e) };
-  }
-}
-
-function Badge({ children }: { children: React.ReactNode }) {
-  return (
-    <span className="rounded-full bg-[color:var(--ck-bg-glass)] px-2 py-0.5 text-xs text-[color:var(--ck-text-secondary)]">
-      {children}
-    </span>
-  );
-}
-
-export default function GoalsClient() {
-  const [goals, setGoals] = useState<GoalFrontmatter[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const searchParams = useSearchParams();
-  const teamFilter = (searchParams.get("team") ?? "").trim();
-
-  const [filterStatus, setFilterStatus] = useState<string>("all");
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const { goals: g, error: err } = await fetchGoals();
-        if (cancelled) return;
-        setError(err);
-        setGoals(err ? [] : g);
-      } catch (e: unknown) {
-        if (cancelled) return;
-        setError(errorMessage(e));
-        setGoals([]);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  async function reload() {
-    setGoals(null);
-    setError(null);
-    try {
-      const { goals: g, error: err } = await fetchGoals();
-      setError(err);
-      setGoals(err ? [] : g);
-    } catch (e: unknown) {
-      setError(errorMessage(e));
-      setGoals([]);
-    }
-  }
-
-  const filtered = useMemo(() => {
-    let list = goals ?? [];
-    if (teamFilter) list = list.filter((g) => Array.isArray(g.teams) && g.teams.includes(teamFilter));
-    if (filterStatus === "all") return list;
-    return list.filter((g) => g.status === filterStatus);
-  }, [goals, filterStatus, teamFilter]);
-
-  const counts = useMemo(() => {
-    const list = goals ?? [];
-    const c = { all: list.length, active: 0, planned: 0, done: 0 };
-    for (const g of list) {
-      if (g.status === "active") c.active += 1;
-      else if (g.status === "done") c.done += 1;
-      else c.planned += 1;
-    }
-    return c;
-  }, [goals]);
-
-  function renderGoal(g: GoalFrontmatter) {
-    return (
-      <Link
-        key={g.id}
-        href={`/goals/${encodeURIComponent(g.id)}`}
-        className="block ck-glass p-5 transition hover:bg-[color:var(--ck-bg-glass)]"
-      >
-        <div className="flex flex-wrap items-start justify-between gap-3">
-          <div className="min-w-0">
-            <div className="truncate text-base font-semibold text-[color:var(--ck-text-primary)]">{g.title}</div>
-            <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
-              <span className="font-mono">{g.id}</span>
-              {g.updatedAt ? ` • updated ${new Date(g.updatedAt).toLocaleString()}` : ""}
-            </div>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge>{g.status}</Badge>
-            {g.teams?.slice(0, 3).map((t) => (
-              <Badge key={t}>{t}</Badge>
-            ))}
-            {g.tags?.slice(0, 3).map((t) => (
-              <Badge key={t}>#{t}</Badge>
-            ))}
-          </div>
-        </div>
-      </Link>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Goals</h1>
-          <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
-            Stored in <code className="font-mono">~/.openclaw/workspace/notes/goals/</code>
-            {teamFilter ? (
-              <>
-                {" "}• filtered by team <code className="font-mono">{teamFilter}</code>
-              </>
-            ) : null}
-          </p>
-        </div>
-        <Link
-          href="/goals/new"
-          className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white"
-        >
-          Create goal
-        </Link>
-      </div>
-
-      <div className="ck-glass p-4">
-        <div className="flex flex-wrap items-center gap-3">
-          <label className="text-sm text-[color:var(--ck-text-secondary)]">Status</label>
-          <select
-            className="rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-transparent px-2 py-1 text-sm"
-            value={filterStatus}
-            onChange={(e) => setFilterStatus(e.target.value)}
-          >
-            <option value="all">All ({counts.all})</option>
-            <option value="active">Active ({counts.active})</option>
-            <option value="planned">Planned ({counts.planned})</option>
-            <option value="done">Done ({counts.done})</option>
-          </select>
-
-          <button
-            className="ml-auto text-sm font-medium hover:underline"
-            onClick={() => void reload()}
-          >
-            Refresh
-          </button>
-        </div>
-      </div>
-
-      {error ? (
-        <div className="ck-glass p-4 text-sm text-red-300">{error}</div>
-      ) : null}
-
-      {goals == null && (
-        <div className="ck-glass p-6 text-sm text-[color:var(--ck-text-secondary)]">Loading…</div>
-      )}
-      {goals != null && filtered.length === 0 && (
-        <div className="ck-glass p-6">
-          <div className="text-sm text-[color:var(--ck-text-secondary)]">No goals yet.</div>
-          <div className="mt-3">
-            <Link href="/goals/new" className="text-sm font-medium hover:underline">
-              Create your first goal →
-            </Link>
-          </div>
-        </div>
-      )}
-      {goals != null && filtered.length > 0 && filterStatus !== "all" && (
-        <div className="space-y-3">{filtered.map(renderGoal)}</div>
-      )}
-      {goals != null && filtered.length > 0 && filterStatus === "all" && (
-        <div className="space-y-8">
-          {(["active", "planned", "done"] as const).map((status) => {
-            const section = filtered.filter((g) => g.status === status);
-            if (!section.length) return null;
-            return (
-              <section key={status}>
-                <div className="mb-2 flex items-end justify-between">
-                  <h2 className="text-sm font-semibold tracking-wide text-[color:var(--ck-text-secondary)] uppercase">
-                    {status} ({section.length})
-                  </h2>
-                </div>
-                <div className="space-y-3">{section.map(renderGoal)}</div>
-              </section>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/app/goals/new/page.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { GoalFormCard, GoalFormFields } from "@/components/GoalFormFields";
-import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import { slugifyId } from "@/lib/slugify";
-import { errorMessage } from "@/lib/errors";
-import { fetchJson } from "@/lib/fetch-json";
-import { useGoalFormState } from "@/lib/goals-client";
-
-export default function NewGoalPage() {
-  const router = useRouter();
-
-  const [id, setId] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-
-  const defaultBody =
-    "## Workflow\n<!-- goal-workflow -->\n- Use **Promote to inbox** to send this goal to the development-team inbox for scoping.\n- When promoted, set goal status to **active**.\n- Track implementation work via tickets (add links/IDs under a **Tickets** section in this goal).\n- When development is complete (all associated tickets marked done), set goal status to **done**.\n\n## Tickets\n- (add ticket links/ids)\n";
-  const { formState, tags, teams } = useGoalFormState({ body: defaultBody });
-  const { title } = formState;
-
-  const suggestedId = useMemo(() => {
-    const s = slugifyId(title, 64);
-    return s.length >= 2 ? s : "";
-  }, [title]);
-
-  async function create() {
-    setSaving(true);
-    setError(null);
-    const finalId = id.trim();
-    try {
-      await fetchJson("/api/goals", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({
-          id: finalId,
-          title: formState.title,
-          status: formState.status,
-          tags,
-          teams,
-          body: formState.body,
-        }),
-      });
-      router.push(`/goals/${encodeURIComponent(finalId)}`);
-    } catch (e: unknown) {
-      setError(errorMessage(e));
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <div className="space-y-4">
-      <Link href="/goals" className="text-sm font-medium hover:underline">
-        ← Back
-      </Link>
-
-      <GoalFormCard
-        error={error}
-        actions={
-          <button
-            onClick={() => void create()}
-            disabled={saving}
-            className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white disabled:opacity-50"
-          >
-            {saving ? "Creating…" : "Create"}
-          </button>
-        }
-      >
-        <h1 className="text-xl font-semibold tracking-tight">Create goal</h1>
-        <GoalFormFields
-          formState={formState}
-          idField={{ id, setId, suggestedId: suggestedId || undefined }}
-          bodyHeight="h-[260px]"
-        />
-      </GoalFormCard>
-    </div>
-  );
-}

package/src/app/goals/page.tsx

@@ -1,10 +0,0 @@
-import { Suspense } from "react";
-import GoalsClient from "./goals-client";
-
-export default function GoalsPage() {
-  return (
-    <Suspense fallback={<div className="ck-glass p-6 text-sm text-[color:var(--ck-text-secondary)]">Loading goals…</div>}>
-      <GoalsClient />
-    </Suspense>
-  );
-}

package/src/app/layout.tsx

@@ -1,53 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { AppShell } from "@/components/AppShell";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Claw Kitchen",
-  description: "Local-first UI for authoring ClawRecipes recipes and scaffolding agents/teams.",
-  icons: {
-    icon: [
-      { url: "/favicon.ico", sizes: "any" },
-      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-    ],
-    apple: "/apple-touch-icon.png",
-  },
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        {/* Prevent theme flash: set data-theme before first paint */}
-        <script
-          dangerouslySetInnerHTML={{
-            __html:
-              "(function(){try{var t=localStorage.getItem('ck-theme');var theme=(t==='light')?'light':'dark';document.documentElement.dataset.theme=theme;}catch(e){document.documentElement.dataset.theme='dark';}})();",
-          }}
-        />
-      </head>
-      <body
-        suppressHydrationWarning
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        <AppShell>{children}</AppShell>
-      </body>
-    </html>
-  );
-}

package/src/app/manifest.ts

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

@@ -1,8 +0,0 @@
-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,33 +0,0 @@
-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;
-async function getAgents(): Promise<AgentListItem[]> {
-  const res = await runOpenClaw(["agents", "list", "--json"]);
-  if (!res.ok) return [];
-  return JSON.parse(res.stdout) as AgentListItem[];
-}
-
-async function getTeamsFromRecipes(): Promise<{ teamNames: Record<string, string> }> {
-  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 };
-}
-
-export default async function Home() {
-  // Home should always reflect the current OpenClaw state (teams/agents can change outside Next).
-  noStore();
-
-  const [agents, { teamNames }] = await Promise.all([getAgents(), getTeamsFromRecipes()]);
-  return <HomeClient agents={agents} teamNames={teamNames} />;
-}

package/src/app/recipes/CreateAgentModal.tsx

@@ -1,156 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-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 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 =
-  | { state: "empty" }
-  | { state: "checking" }
-  | { 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,
-  recipeName,
-  agentId,
-  setAgentId,
-  agentName,
-  setAgentName,
-  existingRecipeIds,
-  existingAgentIds,
-  busy,
-  error,
-  onClose,
-  onConfirm,
-}: {
-  open: boolean;
-  recipeId: string;
-  recipeName: string;
-  agentId: string;
-  setAgentId: (v: string) => void;
-  agentName: string;
-  setAgentName: (v: string) => void;
-  existingRecipeIds: string[];
-  existingAgentIds: string[];
-  busy?: boolean;
-  error?: string | null;
-  onClose: () => void;
-  onConfirm: () => void;
-}) {
-  const [idTouched, setIdTouched] = useState(false);
-  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]
-  );
-
-  const availability: Availability = syncAvail ?? apiAvailability ?? { state: "available" };
-
-  useEffect(() => {
-    if (!open || syncAvail !== null) return;
-    const t = setTimeout(() => {
-      void (async () => {
-        setApiAvailability({ state: "checking" });
-        try {
-          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 {
-          setApiAvailability({ state: "available" });
-        }
-      })();
-    }, 250);
-    return () => clearTimeout(t);
-  }, [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-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>
-    </CreateModalShell>
-  );
-}