@jiggai/kitchen 0.1.11 → 0.2.0

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

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { unstable_noStore as noStore } from "next/cache";
+
+import { getTeamDisplayName } from "@/lib/recipes";
+import WorkflowsClient from "./workflows-client";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default async function WorkflowsPage({
+  params,
+}: {
+  params: Promise<{ teamId: string }>;
+}) {
+  noStore();
+
+  const { teamId } = await params;
+  const name = await getTeamDisplayName(teamId);
+
+  return (
+    <div className="space-y-4 p-6">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div>
+          <Link
+            href={`/teams/${encodeURIComponent(teamId)}`}
+            className="text-sm font-medium text-[color:var(--ck-text-secondary)] hover:underline"
+          >
+            ← {name || teamId}
+          </Link>
+          <h1 className="mt-2 text-2xl font-semibold tracking-tight">Workflows</h1>
+          <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
+            Create and edit workflow definitions for this team.
+          </p>
+        </div>
+      </div>
+
+      <WorkflowsClient teamId={teamId} />
+    </div>
+  );
+}

package/src/app/teams/[teamId]/workflows/workflows-client.tsx

@@ -0,0 +1,494 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { fetchJson } from "@/lib/fetch-json";
+import { errorMessage } from "@/lib/errors";
+
+type RunDetail = {
+  id: string;
+  status?: string;
+  startedAt?: string;
+  finishedAt?: string;
+  meta?: unknown;
+  memoryUsed?: unknown;
+  approval?: unknown;
+  raw?: Record<string, unknown>;
+};
+
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return Boolean(v) && typeof v === "object" && !Array.isArray(v);
+}
+
+export default function WorkflowsClient({ teamId }: { teamId: string }) {
+  const router = useRouter();
+  const [workflows, setWorkflows] = useState<Array<{ id: string; name?: string }>>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [error, setError] = useState<string>("");
+
+  const [expandedWorkflowId, setExpandedWorkflowId] = useState<string>("");
+  const [runsByWorkflow, setRunsByWorkflow] = useState<Record<string, string[]>>({});
+  const [runsLoading, setRunsLoading] = useState<Record<string, boolean>>({});
+  const [selectedRunId, setSelectedRunId] = useState<string>("");
+  const [selectedWorkflowId, setSelectedWorkflowId] = useState<string>("");
+  const [selectedRun, setSelectedRun] = useState<RunDetail | null>(null);
+  const [runError, setRunError] = useState<string>("");
+  const [approvalNote, setApprovalNote] = useState<string>("");
+  const [approvalBusy, setApprovalBusy] = useState<boolean>(false);
+
+  const load = useCallback(
+    async (opts?: { quiet?: boolean }) => {
+      const quiet = Boolean(opts?.quiet);
+      setError("");
+      if (!quiet) setLoading(true);
+      try {
+        const json = await fetchJson<{ ok?: boolean; files?: string[] }>(
+          `/api/teams/workflows?teamId=${encodeURIComponent(teamId)}`,
+          { cache: "no-store" }
+        );
+        if (!json.ok) throw new Error("Failed to load workflows");
+        const files = Array.isArray(json.files) ? json.files : [];
+        const ids = files
+          .map((f) => (f.endsWith(".workflow.json") ? f.slice(0, -".workflow.json".length) : null))
+          .filter((id): id is string => Boolean(id));
+        setWorkflows(ids.map((id) => ({ id, name: id })));
+      } catch (e: unknown) {
+        setError(errorMessage(e));
+      } finally {
+        if (!quiet) setLoading(false);
+      }
+    },
+    [teamId]
+  );
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  async function onRefresh() {
+    setRefreshing(true);
+    try {
+      await load({ quiet: true });
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  async function onDelete(id: string) {
+    if (!confirm(`Delete workflow “${id}”? This removes the .workflow.json file from the team workspace.`)) return;
+    setError("");
+    try {
+      const json = await fetchJson<{ ok?: boolean; error?: string }>(
+        `/api/teams/workflows?teamId=${encodeURIComponent(teamId)}&id=${encodeURIComponent(id)}`,
+        { method: "DELETE" }
+      );
+      if (!json.ok) throw new Error(json.error || "Failed to delete workflow");
+      await load({ quiet: true });
+      if (expandedWorkflowId === id) {
+        setExpandedWorkflowId("");
+        setSelectedRunId("");
+        setSelectedRun(null);
+      }
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    }
+  }
+
+  async function loadRunsForWorkflow(workflowId: string) {
+    setRunsLoading((s) => ({ ...s, [workflowId]: true }));
+    setRunError("");
+    try {
+      const json = await fetchJson<{ ok?: boolean; files?: string[]; error?: string }>(
+        `/api/teams/workflow-runs?teamId=${encodeURIComponent(teamId)}&workflowId=${encodeURIComponent(workflowId)}`,
+        { cache: "no-store" }
+      );
+      if (!json.ok) throw new Error(json.error || "Failed to load runs");
+      const files = Array.isArray(json.files) ? json.files : [];
+      const runIds = files
+        .map((f) => (typeof f === "string" && f.endsWith(".run.json") ? f.slice(0, -".run.json".length) : null))
+        .filter((x): x is string => Boolean(x));
+      setRunsByWorkflow((s) => ({ ...s, [workflowId]: runIds }));
+    } catch (e: unknown) {
+      setRunError(errorMessage(e));
+      setRunsByWorkflow((s) => ({ ...s, [workflowId]: [] }));
+    } finally {
+      setRunsLoading((s) => ({ ...s, [workflowId]: false }));
+    }
+  }
+
+  async function loadRunDetail(workflowId: string, runId: string) {
+    setSelectedWorkflowId(workflowId);
+    setSelectedRunId(runId);
+    setSelectedRun(null);
+    setRunError("");
+    setApprovalNote("");
+    try {
+      const json = await fetchJson<{ ok?: boolean; run?: unknown; error?: string }>(
+        `/api/teams/workflow-runs?teamId=${encodeURIComponent(teamId)}&workflowId=${encodeURIComponent(workflowId)}&runId=${encodeURIComponent(runId)}`,
+        { cache: "no-store" }
+      );
+      if (!json.ok) throw new Error(json.error || "Failed to load run");
+      const run = isRecord(json.run) ? json.run : null;
+      if (!run) throw new Error("Invalid run format");
+      setSelectedRun({
+        id: String(run.id ?? runId),
+        status: typeof run.status === "string" ? run.status : undefined,
+        startedAt: typeof run.startedAt === "string" ? run.startedAt : undefined,
+        finishedAt: typeof (run as Record<string, unknown>).finishedAt === "string" ? String((run as Record<string, unknown>).finishedAt) : undefined,
+        meta: (run as Record<string, unknown>).meta,
+        memoryUsed: (run as Record<string, unknown>).memoryUsed,
+        approval: (run as Record<string, unknown>).approval,
+        raw: run,
+      });
+    } catch (e: unknown) {
+      setRunError(errorMessage(e));
+      setSelectedRun(null);
+    }
+  }
+
+  async function onAddTemplate(templateId: string) {
+    if (!confirm(`Add workflow from template “${templateId}”?`)) return;
+    setError("");
+    try {
+      const json = await fetchJson<{ ok?: boolean; workflowId?: string; error?: string }>("/api/teams/workflow-templates", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ teamId, templateId }),
+      });
+      if (!json.ok) throw new Error(json.error || "Failed to apply template");
+      const workflowId = String(json.workflowId ?? "").trim();
+      if (!workflowId) throw new Error("Template applied but workflowId missing");
+      await load({ quiet: true });
+      router.push(`/teams/${encodeURIComponent(teamId)}/workflows/${encodeURIComponent(workflowId)}`);
+    } catch (e: unknown) {
+      setError(errorMessage(e));
+    }
+  }
+  const memoryUsedItems = useMemo(() => {
+    const run = selectedRun;
+    if (!run) return [] as Array<{ ts: string; author: string; type: string; content: string; source?: unknown }>;
+
+    const raw = run.memoryUsed ?? (isRecord(run.meta) ? (run.meta as Record<string, unknown>).memoryUsed : undefined);
+    if (!Array.isArray(raw)) return [];
+
+    return raw
+      .map((x) => (isRecord(x) ? x : null))
+      .filter(Boolean)
+      .map((o) => ({
+        ts: String((o as Record<string, unknown>).ts ?? "").trim(),
+        author: String((o as Record<string, unknown>).author ?? "").trim(),
+        type: String((o as Record<string, unknown>).type ?? "").trim(),
+        content: String((o as Record<string, unknown>).content ?? "").trim(),
+        source: (o as Record<string, unknown>).source,
+      }))
+      .filter((it) => it.ts && it.author && it.type && it.content);
+  }, [selectedRun]);
+
+  if (loading) {
+    return <div className="ck-glass p-4">Loading workflows…</div>;
+  }
+
+  return (
+    <div className="ck-glass p-6">
+      <div>
+        <h2 className="text-lg font-semibold">Workflows (file-first)</h2>
+        <p className="mt-1 text-sm text-[color:var(--ck-text-secondary)]">
+          Stored in <code>shared-context/workflows/&lt;id&gt;.workflow.json</code> inside the team workspace.
+        </p>
+
+        <div className="mt-3 flex flex-wrap items-center justify-start gap-2">
+          <button
+            type="button"
+            onClick={() => {
+              const id = `new-${Date.now()}`;
+              router.push(`/teams/${encodeURIComponent(teamId)}/workflows/${encodeURIComponent(id)}?draft=1`);
+            }}
+            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)]"
+          >
+            Add workflow
+          </button>
+
+
+          <button
+            type="button"
+            onClick={() => void onAddTemplate("marketing-cadence-v1")}
+            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"
+          >
+            Add Marketing Cadence template
+          </button>
+
+          <button
+            type="button"
+            onClick={onRefresh}
+            disabled={refreshing}
+            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 disabled:opacity-60"
+          >
+            {refreshing ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+      </div>
+
+      {error ? (
+        <div className="mt-4 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-4 text-sm text-red-100">
+          {error}
+        </div>
+      ) : null}
+
+      {workflows.length === 0 ? (
+        <p className="mt-4 text-sm text-[color:var(--ck-text-secondary)]">No workflows yet.</p>
+      ) : (
+        <ul className="mt-4 divide-y divide-white/10 overflow-hidden rounded-[var(--ck-radius-sm)] border border-white/10">
+          {workflows.map((w) => {
+            const expanded = expandedWorkflowId === w.id;
+            const runs = runsByWorkflow[w.id] ?? [];
+            const isLoadingRuns = Boolean(runsLoading[w.id]);
+
+            return (
+              <li key={w.id} className="bg-white/5">
+                <div className="flex items-center justify-between gap-3 px-4 py-3">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      const next = expanded ? "" : w.id;
+                      setExpandedWorkflowId(next);
+                      setSelectedRunId("");
+                      setSelectedRun(null);
+                      setRunError("");
+                      if (next) await loadRunsForWorkflow(next);
+                    }}
+                    className="min-w-0 flex-1 text-left"
+                  >
+                    <div className="truncate text-sm font-medium text-[color:var(--ck-text-primary)]">{w.name || w.id}</div>
+                    <div className="truncate text-xs text-[color:var(--ck-text-tertiary)]">{w.id}</div>
+                    <div className="mt-1 text-[10px] text-[color:var(--ck-text-tertiary)]">
+                      Click to {expanded ? "collapse" : "expand"} run details
+                    </div>
+                  </button>
+
+                  <div className="flex shrink-0 items-center gap-2">
+                    <Link
+                      href={`/teams/${encodeURIComponent(teamId)}/workflows/${encodeURIComponent(w.id)}`}
+                      className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10"
+                    >
+                      Edit
+                    </Link>
+                    <button
+                      type="button"
+                      onClick={() => void onDelete(w.id)}
+                      className="rounded-[var(--ck-radius-sm)] border border-[color:rgba(255,59,48,0.45)] bg-[color:rgba(255,59,48,0.08)] px-3 py-1.5 text-sm font-medium text-[color:var(--ck-accent-red)] transition-colors hover:bg-[color:rgba(255,59,48,0.12)]"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+
+                {expanded ? (
+                  <div className="border-t border-white/10 bg-black/20 px-4 py-3">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Runs</div>
+                      <button
+                        type="button"
+                        disabled={isLoadingRuns}
+                        onClick={() => void loadRunsForWorkflow(w.id)}
+                        className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[11px] font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-60"
+                      >
+                        {isLoadingRuns ? "Loading…" : "Refresh runs"}
+                      </button>
+                    </div>
+
+                    {runError ? (
+                      <div className="mt-2 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-2 text-xs text-red-100">{runError}</div>
+                    ) : null}
+
+                    <div className="mt-2 grid grid-cols-1 gap-3 lg:grid-cols-2">
+                      <div className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-2">
+                        {runs.length ? (
+                          <div className="space-y-1">
+                            {runs.slice(0, 8).map((runId) => {
+                              const selected = selectedRunId === runId;
+                              return (
+                                <button
+                                  key={runId}
+                                  type="button"
+                                  onClick={() => void loadRunDetail(w.id, runId)}
+                                  className={
+                                    selected
+                                      ? "w-full rounded-[var(--ck-radius-sm)] bg-white/10 px-2 py-1 text-left text-[11px] text-[color:var(--ck-text-primary)]"
+                                      : "w-full rounded-[var(--ck-radius-sm)] px-2 py-1 text-left text-[11px] text-[color:var(--ck-text-secondary)] hover:bg-white/5"
+                                  }
+                                >
+                                  <span className="font-mono">{runId}</span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        ) : (
+                          <div className="text-xs text-[color:var(--ck-text-tertiary)]">No runs yet.</div>
+                        )}
+                      </div>
+
+                      <div className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3">
+                        {selectedRun ? (
+                          <div className="space-y-3">
+                            <div>
+                              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Run detail</div>
+                              <div className="mt-1 text-[11px] text-[color:var(--ck-text-tertiary)]">
+                                <span className="font-mono">{selectedRun.id}</span>
+                                {selectedRun.status ? <span> • {selectedRun.status}</span> : null}
+                              </div>
+                            </div>
+
+                            <div className="border-t border-white/10 pt-3">
+                              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Approval</div>
+                              {(() => {
+                                const approval = selectedRun.approval;
+                                if (!isRecord(approval)) {
+                                  return <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">(No approval info recorded.)</div>;
+                                }
+
+                                const state = String(approval.state ?? "").trim();
+                                const requestedAt = typeof approval.requestedAt === "string" ? approval.requestedAt : "";
+                                const decidedAt = typeof approval.decidedAt === "string" ? approval.decidedAt : "";
+                                const decidedBy = typeof approval.decidedBy === "string" ? approval.decidedBy : "";
+                                const note = typeof approval.note === "string" ? approval.note : "";
+                                const outbound = isRecord(approval.outbound) ? approval.outbound : null;
+
+                                const canAct = state === "pending" || selectedRun.status === "waiting_for_approval";
+
+                                return (
+                                  <div className="mt-2 space-y-2">
+                                    <div className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2 text-[11px] text-[color:var(--ck-text-secondary)]">
+                                      <div>
+                                        <span className="font-mono">state</span>: <span className="font-mono text-[color:var(--ck-text-primary)]">{state || "(unknown)"}</span>
+                                      </div>
+                                      {requestedAt ? (
+                                        <div>
+                                          <span className="font-mono">requestedAt</span>: <span className="font-mono">{requestedAt}</span>
+                                        </div>
+                                      ) : null}
+                                      {decidedAt ? (
+                                        <div>
+                                          <span className="font-mono">decidedAt</span>: <span className="font-mono">{decidedAt}</span>
+                                        </div>
+                                      ) : null}
+                                      {decidedBy ? (
+                                        <div>
+                                          <span className="font-mono">decidedBy</span>: <span className="font-mono">{decidedBy}</span>
+                                        </div>
+                                      ) : null}
+                                      {note ? (
+                                        <div className="mt-1 whitespace-pre-wrap text-xs text-[color:var(--ck-text-primary)]">{note}</div>
+                                      ) : null}
+                                      {outbound ? (
+                                        <div className="mt-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-2 text-[10px]">
+                                          <div className="text-[color:var(--ck-text-tertiary)]">Outbound</div>
+                                          <pre className="mt-1 overflow-auto whitespace-pre-wrap">{JSON.stringify(outbound, null, 2)}</pre>
+                                        </div>
+                                      ) : null}
+                                    </div>
+
+                                    {canAct ? (
+                                      <div className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-2">
+                                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">approval note (optional)</div>
+                                        <textarea
+                                          value={approvalNote}
+                                          onChange={(e) => setApprovalNote(e.target.value)}
+                                          rows={3}
+                                          className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                                          placeholder="e.g. Ship it / please tweak hook"
+                                        />
+                                        <div className="mt-2 flex flex-wrap gap-2">
+                                          {([
+                                            { action: "approve", label: "Approve" },
+                                            { action: "request_changes", label: "Request changes" },
+                                            { action: "cancel", label: "Cancel" },
+                                          ] as const).map((btn) => (
+                                            <button
+                                              key={btn.action}
+                                              type="button"
+                                              disabled={approvalBusy}
+                                              onClick={async () => {
+                                                if (!selectedWorkflowId || !selectedRunId) return;
+                                                if (!confirm(`${btn.label} run ${selectedRunId}?`)) return;
+                                                setApprovalBusy(true);
+                                                setRunError("");
+                                                try {
+                                                  const res = await fetch("/api/teams/workflow-runs", {
+                                                    method: "POST",
+                                                    headers: { "content-type": "application/json" },
+                                                    body: JSON.stringify({
+                                                      teamId,
+                                                      workflowId: selectedWorkflowId,
+                                                      runId: selectedRunId,
+                                                      action: btn.action,
+                                                      note: approvalNote || undefined,
+                                                      decidedBy: "ClawKitchen UI",
+                                                    }),
+                                                  });
+                                                  const json = await res.json();
+                                                  if (!res.ok || !json.ok) throw new Error(json.error || "Failed to apply approval action");
+                                                  await loadRunDetail(selectedWorkflowId, selectedRunId);
+                                                } catch (e: unknown) {
+                                                  setRunError(errorMessage(e));
+                                                } finally {
+                                                  setApprovalBusy(false);
+                                                }
+                                              }}
+                                              className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[11px] font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-60"
+                                            >
+                                              {btn.label}
+                                            </button>
+                                          ))}
+                                        </div>
+                                      </div>
+                                    ) : null}
+                                  </div>
+                                );
+                              })()}
+                            </div>
+
+                            <div className="border-t border-white/10 pt-3">
+                              <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Memory used in this run</div>
+                              {memoryUsedItems.length ? (
+                                <div className="mt-2 space-y-2">
+                                  {memoryUsedItems.slice(0, 20).map((m, idx) => (
+                                    <div key={`${m.ts}-${idx}`} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2">
+                                      <div className="text-[10px] text-[color:var(--ck-text-tertiary)]">
+                                        <span className="font-mono">{m.ts}</span> • <span className="font-mono">{m.type}</span> • <span className="font-mono">{m.author}</span>
+                                      </div>
+                                      <div className="mt-1 whitespace-pre-wrap text-xs text-[color:var(--ck-text-primary)]">{m.content}</div>
+                                      {m.source !== undefined ? (
+                                        <pre className="mt-2 overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-2 text-[10px] text-[color:var(--ck-text-secondary)]">
+                                          {JSON.stringify(m.source, null, 2)}
+                                        </pre>
+                                      ) : null}
+                                    </div>
+                                  ))}
+                                </div>
+                              ) : (
+                                <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+                                  (None recorded yet.)
+                                  <div className="mt-1">Next step: have the workflow runner write an explicit <span className="font-mono">memoryUsed[]</span> list into the run file.</div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        ) : selectedRunId ? (
+                          <div className="text-xs text-[color:var(--ck-text-secondary)]">Loading run…</div>
+                        ) : (
+                          <div className="text-xs text-[color:var(--ck-text-tertiary)]">Select a run to see details.</div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}