@jiggai/kitchen 0.1.8 → 0.1.10-canary.0

package/src/app/api/teams/workflows/route.ts

@@ -0,0 +1,88 @@
+import { NextResponse } from "next/server";
+import { deleteWorkflow, listWorkflows, readWorkflow, writeWorkflow } from "@/lib/workflows/storage";
+import type { WorkflowFileV1 } from "@/lib/workflows/types";
+
+function errMessage(err: unknown) {
+  return err instanceof Error ? err.message : String(err);
+}
+
+function isWorkflowFileV1(v: unknown): v is WorkflowFileV1 {
+  if (!v || typeof v !== "object") return false;
+  const o = v as Record<string, unknown>;
+  if (typeof o.id !== "string" || !o.id.trim()) return false;
+  if (typeof o.name !== "string" || !o.name.trim()) return false;
+  if (!Array.isArray(o.nodes)) return false;
+  if (!Array.isArray(o.edges)) return false;
+  return true;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const teamId = String(searchParams.get("teamId") ?? "").trim();
+  const id = String(searchParams.get("id") ?? "").trim();
+
+  if (!teamId) return NextResponse.json({ ok: false, error: "teamId is required" }, { status: 400 });
+
+  try {
+    if (id) {
+      const r = await readWorkflow(teamId, id);
+      // avoid duplicate `ok` keys (TS error)
+      const { ok, ...rest } = r;
+      void ok;
+      return NextResponse.json({ ok: true, ...rest });
+    }
+
+    const r = await listWorkflows(teamId);
+    const { ok, ...rest } = r;
+    void ok;
+    return NextResponse.json({ ok: true, ...rest });
+  } catch (err: unknown) {
+    return NextResponse.json({ ok: false, error: errMessage(err) }, { status: 500 });
+  }
+}
+
+export async function POST(req: Request) {
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ ok: false, error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const o = body && typeof body === "object" ? (body as Record<string, unknown>) : {};
+
+  const teamId = String(o.teamId ?? "").trim();
+  const workflowRaw = o.workflow;
+
+  if (!teamId) return NextResponse.json({ ok: false, error: "teamId is required" }, { status: 400 });
+  if (!isWorkflowFileV1(workflowRaw)) {
+    return NextResponse.json({ ok: false, error: "workflow is required (must include id, name, nodes[], edges[])" }, { status: 400 });
+  }
+
+  try {
+    const r = await writeWorkflow(teamId, workflowRaw);
+    const { ok, ...rest } = r;
+    void ok;
+    return NextResponse.json({ ok: true, ...rest });
+  } catch (err: unknown) {
+    return NextResponse.json({ ok: false, error: errMessage(err) }, { status: 500 });
+  }
+}
+
+export async function DELETE(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const teamId = String(searchParams.get("teamId") ?? "").trim();
+  const id = String(searchParams.get("id") ?? "").trim();
+
+  if (!teamId) return NextResponse.json({ ok: false, error: "teamId is required" }, { status: 400 });
+  if (!id) return NextResponse.json({ ok: false, error: "id is required" }, { status: 400 });
+
+  try {
+    const r = await deleteWorkflow(teamId, id);
+    const { ok, ...rest } = r;
+    void ok;
+    return NextResponse.json({ ok: true, ...rest });
+  } catch (err: unknown) {
+    return NextResponse.json({ ok: false, error: errMessage(err) }, { status: 500 });
+  }
+}

package/src/app/cron-jobs/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function CronJobsPage() {
   return (
-    <div className="ck-glass mx-auto max-w-5xl 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">Cron Jobs (recipe-installed)</h1>
         <div className="flex gap-3">

package/src/app/global-error.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect } from "react";
+
+// NOTE: Next.js renders this when the root layout (or anything above the segment
+// error boundary) throws. Keep it dependency-light: no AppShell / no router hooks.
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Global error:", error);
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-[color:var(--ck-bg)] text-[color:var(--ck-text-primary)]">
+        <div className="mx-auto max-w-2xl px-6 py-16">
+          <h1 className="text-xl font-semibold">Something went wrong</h1>
+          <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+            An unexpected error occurred.
+          </p>
+
+          <pre className="mt-6 overflow-auto rounded-md border border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass)] p-4 text-xs text-[color:var(--ck-text-secondary)]">
+            {String(error?.stack || error)}
+          </pre>
+
+          {error?.digest ? (
+            <p className="mt-3 text-xs text-[color:var(--ck-text-secondary)]">
+              Digest: {error.digest}
+            </p>
+          ) : null}
+
+          <div className="mt-6 flex gap-3">
+            <button
+              type="button"
+              onClick={() => reset()}
+              className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-4 py-2 text-sm font-medium text-white"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}

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/recipes/page.tsx

@@ -57,7 +57,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

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/teams/[teamId]/OrchestratorPanel.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+type OrchestratorState =
+  | {
+      ok: true;
+      teamId: string;
+      present: false;
+      reason?: string;
+    }
+  | {
+      ok: true;
+      teamId: string;
+      present: true;
+      agent: { id: string; identityName?: string; workspace: string };
+      tmuxSessions: Array<{ name: string; attached: boolean; windows?: number; created?: string }>;
+      worktrees: Array<{ path: string; branch?: string; sha?: string }>;
+      activeTasksSummary: null | { path: string; taskCount?: number; rawType?: string };
+      settingsPaths: string[];
+    }
+  | {
+      ok: false;
+      error: string;
+    };
+
+export function OrchestratorPanel({ teamId }: { teamId: string }) {
+  const [loading, setLoading] = useState(true);
+  const [state, setState] = useState<OrchestratorState | null>(null);
+  const [lastLoadedAt, setLastLoadedAt] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/teams/orchestrator?teamId=${encodeURIComponent(teamId)}`, { cache: "no-store" });
+      const json = (await res.json()) as OrchestratorState;
+      setState(json);
+      setLastLoadedAt(new Date().toISOString());
+    } catch (e: unknown) {
+      setState({ ok: false, error: e instanceof Error ? e.message : String(e) });
+      setLastLoadedAt(new Date().toISOString());
+    } finally {
+      setLoading(false);
+    }
+  }, [teamId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (loading) {
+    return <div className="mt-6 ck-glass-strong p-4">Loading orchestrator state…</div>;
+  }
+
+  if (!state) {
+    return <div className="mt-6 ck-glass-strong p-4">No orchestrator state available.</div>;
+  }
+
+  if (!state.ok) {
+    return (
+      <div className="mt-6 ck-glass-strong p-4">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
+        <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
+          {state.error}
+        </div>
+      </div>
+    );
+  }
+
+  if (!state.present) {
+    return (
+      <div className="mt-6 ck-glass-strong p-4">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
+        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+          No swarm/orchestrator detected for this team.
+        </p>
+        <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 text-sm text-[color:var(--ck-text-secondary)]">
+          <div className="text-xs font-medium text-[color:var(--ck-text-tertiary)]">Detection</div>
+          <div className="mt-1 font-mono text-xs">{state.reason || "(no reason provided)"}</div>
+        </div>
+        <p className="mt-3 text-sm text-[color:var(--ck-text-secondary)]">
+          Once an orchestrator agent is installed (e.g. <code>&lt;teamId&gt;-swarm-orchestrator</code>), this tab will show:
+          tmux sessions, git worktrees/branches, and active task state.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-6 ck-glass-strong p-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Orchestrator</div>
+          <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">
+            Agent: <span className="font-mono">{state.agent.id}</span>
+            {state.agent.identityName ? ` (${state.agent.identityName})` : ""}
+          </div>
+          <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">
+            Workspace: <span className="font-mono">{state.agent.workspace}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">
+            {lastLoadedAt ? (
+              <span>
+                Last updated: <span className="font-mono">{lastLoadedAt}</span>
+              </span>
+            ) : null}
+          </div>
+          <button
+            type="button"
+            onClick={() => void load()}
+            disabled={loading}
+            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)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-white/10 active:bg-white/15 disabled:opacity-50"
+          >
+            {loading ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-5 grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <section className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">tmux sessions</div>
+          {state.tmuxSessions.length ? (
+            <ul className="mt-2 space-y-2">
+              {state.tmuxSessions.map((s) => (
+                <li key={s.name} className="text-sm text-[color:var(--ck-text-secondary)]">
+                  <span className="font-mono">{s.name}</span>
+                  <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">
+                    attached={String(s.attached)}
+                    {typeof s.windows === "number" ? ` windows=${s.windows}` : ""}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No sessions detected (or tmux not running).</div>
+          )}
+        </section>
+
+        <section className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">git worktrees</div>
+          {state.worktrees.length ? (
+            <ul className="mt-2 space-y-2">
+              {state.worktrees.map((w) => (
+                <li key={w.path} className="text-sm text-[color:var(--ck-text-secondary)]">
+                  <div className="font-mono text-xs">{w.path}</div>
+                  <div className="text-xs text-[color:var(--ck-text-tertiary)]">
+                    {w.branch ? w.branch : "(no branch)"}
+                    {w.sha ? ` @ ${w.sha.slice(0, 7)}` : ""}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No worktrees detected.</div>
+          )}
+        </section>
+      </div>
+
+      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Active tasks</div>
+        {state.activeTasksSummary ? (
+          <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+            <div className="font-mono text-xs">{state.activeTasksSummary.path}</div>
+            <div className="mt-1 text-xs text-[color:var(--ck-text-tertiary)]">
+              {typeof state.activeTasksSummary.taskCount === "number" ? `tasks=${state.activeTasksSummary.taskCount}` : "tasks=?"}
+              {state.activeTasksSummary.rawType ? ` type=${state.activeTasksSummary.rawType}` : ""}
+            </div>
+          </div>
+        ) : (
+          <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No active-tasks.json found.</div>
+        )}
+      </section>
+
+      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">CLI quick actions</div>
+        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+          The orchestrator is designed to be driven from the CLI (and usually tmux). Common commands:
+        </p>
+        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+          <li>
+            <span className="font-mono text-xs">tmux ls</span>
+            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(list sessions)</span>
+          </li>
+          <li>
+            <span className="font-mono text-xs">tmux attach -t &lt;session&gt;</span>
+            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(jump into a running swarm)</span>
+          </li>
+          <li>
+            <span className="font-mono text-xs">git -C {state.agent.workspace} worktree list</span>
+            <span className="ml-2 text-xs text-[color:var(--ck-text-tertiary)]">(inspect worktrees)</span>
+          </li>
+        </ul>
+        <p className="mt-3 text-xs text-[color:var(--ck-text-tertiary)]">
+          Note: ClawKitchen is read-only here; it surfaces status and pointers, but does not run or attach to tmux.
+        </p>
+      </section>
+
+      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Human approval gate (recommended)</div>
+        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+          For workflows that publish, deploy, or send outbound messages, keep a <strong>human approval step</strong>.
+        </p>
+        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+          <li>Generate a proposed change/post as a draft.</li>
+          <li>Send the draft to a bound messaging channel (e.g. Telegram) for approval.</li>
+          <li>Only execute the final action after explicit approve/deny.</li>
+        </ul>
+      </section>
+
+      <section className="mt-4 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+        <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Where to change settings</div>
+        <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+          These are the common knobs for a swarm/orchestrator scaffold (read-only references):
+        </p>
+        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+          {state.settingsPaths.map((p) => (
+            <li key={p} className="font-mono text-xs">
+              {p}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}

package/src/app/teams/[teamId]/page.tsx

@@ -25,47 +25,43 @@ async function getTeamDisplayName(teamId: string) {
   }
 }
 
-export default async function TeamPage({ params }: { params: Promise<{ teamId: string }> }) {
+export default async function TeamPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ teamId: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}) {
   // Team pages depend on live OpenClaw state; never serve cached HTML.
   noStore();
 
   const { teamId } = await params;
+  const sp = (await searchParams) ?? {};
+  const tabRaw = sp.tab;
+  const tab = Array.isArray(tabRaw) ? tabRaw[0] : tabRaw;
   const name = await getTeamDisplayName(teamId);
 
   return (
-    <main className="min-h-screen p-8">
-      <div className="mx-auto mb-4 flex max-w-6xl items-start justify-between gap-4">
-        <div className="flex flex-col gap-1">
-          <Link
-            href="/"
-            className="text-sm font-medium text-[color:var(--ck-text-secondary)] transition-colors hover:text-[color:var(--ck-text-primary)]"
-          >
-            ← Home
-          </Link>
+    <div className="flex flex-col gap-4 p-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <div className="text-xl font-semibold tracking-tight text-[color:var(--ck-text-primary)]">
+            {name || teamId}
+          </div>
+          <div className="text-xs text-[color:var(--ck-text-tertiary)]">{teamId}</div>
+        </div>
+
+        <div className="flex items-center gap-3">
           <Link
-            href="/recipes"
-            className="text-sm font-medium text-[color:var(--ck-text-secondary)] transition-colors hover:text-[color:var(--ck-text-primary)]"
+            href={`/goals?team=${encodeURIComponent(teamId)}`}
+            className="text-sm font-medium text-[color:var(--ck-text-secondary)] hover:underline"
           >
-            ← Recipes
+            View goals →
           </Link>
         </div>
-
-        <div className="text-right">
-          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">{name || teamId}</div>
-          <div className="text-xs text-[color:var(--ck-text-tertiary)]">{teamId}</div>
-        </div>
-      </div>
-
-      <div className="mx-auto mb-4 flex max-w-6xl items-center justify-end">
-        <Link
-          href={`/goals?team=${encodeURIComponent(teamId)}`}
-          className="text-sm font-medium text-[color:var(--ck-text-secondary)] hover:underline"
-        >
-          View goals for this team →
-        </Link>
       </div>
 
-      <TeamEditor teamId={teamId} />
-    </main>
+      <TeamEditor teamId={teamId} initialTab={typeof tab === "string" ? tab : undefined} />
+    </div>
   );
 }