@netnodeag/kraftwerk 0.2.0 → 0.3.0

package/inspector/app/workflows/[slug]/workflow-view.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { WorkflowDetail, AgentInfo, StepInfo } from "@/lib/workflows";
+import type { RunListItem } from "@/lib/runs";
+import { usePoll, fmtDuration, fmtCost, fmtWhen, Lamp } from "../../shared";
+
+export function WorkflowView({ slug }: { slug: string }) {
+  const wf = usePoll<WorkflowDetail>(`/api/workflows/${slug}`, false);
+  const runsData = usePoll<{ runs: RunListItem[] }>("/api/runs", false);
+
+  if (!wf) return <div className="empty">loading…</div>;
+  if (wf.error) {
+    return (
+      <>
+        <Crumbs slug={wf.slug} />
+        <div className="empty">
+          <span className="status-word failed">broken workflow</span>
+          <pre style={{ marginTop: 12, textAlign: "left" }}>{wf.error}</pre>
+        </div>
+      </>
+    );
+  }
+
+  const agentIdx = new Map(wf.agents.map((a, i) => [a.id, i % 4]));
+  const runs = (runsData?.runs ?? []).filter((r) => r.workflow === wf.name).slice(0, 8);
+
+  return (
+    <>
+      <Crumbs slug={wf.slug} />
+
+      <div className="detail-head">
+        <h1>{wf.name ?? wf.slug}</h1>
+        <span className="rid mono">{wf.dir}</span>
+      </div>
+      {wf.description && <p className="detail-req">{wf.description}</p>}
+
+      <div className="statgrid">
+        <div className="stat">
+          <div className="microlabel">agents</div>
+          <div className="v num">{wf.agents.length}</div>
+        </div>
+        <div className="stat">
+          <div className="microlabel">steps</div>
+          <div className="v num">
+            {wf.steps.length}{" "}
+            <span style={{ color: "var(--muted)", fontWeight: 400 }}>
+              ({wf.steps.filter((s) => s.kind === "agent").length} agent ·{" "}
+              {wf.steps.filter((s) => s.kind === "script").length} script)
+            </span>
+          </div>
+        </div>
+        {wf.workspace && (
+          <div className="stat" style={{ maxWidth: 420 }}>
+            <div className="microlabel">workspace</div>
+            <div className="wf-workspace mono">{wf.workspace}</div>
+          </div>
+        )}
+      </div>
+
+      <RunPanel slug={wf.slug} lastRequest={runs[0]?.request} />
+
+      <section className="panel" style={{ marginBottom: 18 }}>
+        <div className="panel-head">
+          <span className="microlabel">agents</span>
+        </div>
+        <div className="agent-grid">
+          {wf.agents.map((a) => (
+            <AgentCard key={a.id} a={a} idx={agentIdx.get(a.id) ?? 0} />
+          ))}
+          {wf.agents.length === 0 && <div className="viewer-note">no agents — script-only workflow</div>}
+        </div>
+      </section>
+
+      <div className="columns">
+        <section className="panel">
+          <div className="panel-head">
+            <span className="microlabel">pipeline</span>
+          </div>
+          <div className="pipeline">
+            {wf.steps.map((s, i) => (
+              <StepNode key={s.name} s={s} i={i} idx={s.agent ? agentIdx.get(s.agent) ?? 0 : null} />
+            ))}
+          </div>
+        </section>
+
+        <div style={{ display: "grid", gap: 18 }}>
+          <section className="panel">
+            <div className="panel-head">
+              <span className="microlabel">
+                folder <span className="num">({wf.files.length} files)</span>
+              </span>
+            </div>
+            <div className="file-list">
+              {wf.files.map((f) => (
+                <div key={f} className="file-row" style={{ cursor: "default" }}>
+                  <span className="fname">{f}</span>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className="panel">
+            <div className="panel-head">
+              <span className="microlabel">
+                recent runs <span className="num">({runs.length})</span>
+              </span>
+            </div>
+            <div className="file-list">
+              {runs.map((r) => (
+                <a key={r.id} href={`/runs/${r.id}`} className="file-row">
+                  <Lamp status={r.status} />
+                  <span className="fname">{r.id.replace(/^run-/, "")}</span>
+                  <span className="fsize num">
+                    {fmtDuration(r.durationMs)} · {fmtCost(r.costUsd)} · {fmtWhen(r.startedAt)}
+                  </span>
+                </a>
+              ))}
+              {runs.length === 0 && <div className="viewer-note">no runs of this workflow yet</div>}
+            </div>
+          </section>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function RunPanel({ slug, lastRequest }: { slug: string; lastRequest?: string }) {
+  const router = useRouter();
+  const [request, setRequest] = useState("");
+  const [sandbox, setSandbox] = useState(true);
+  const [ssh, setSsh] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const docker = usePoll<{ available: boolean; image: boolean }>(
+    `/api/workflows/${encodeURIComponent(slug)}/run`,
+    false
+  );
+
+  useEffect(() => {
+    if (!request && lastRequest) setRequest(lastRequest);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastRequest]);
+
+  const sandboxReady = docker?.available && docker?.image;
+  const sandboxHint = !docker
+    ? ""
+    : !docker.available
+      ? "Docker not running — sandbox unavailable"
+      : !docker.image
+        ? "image missing — run `kraftwerk runner build`"
+        : "isolated container per run";
+
+  async function launch() {
+    if (!request.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/workflows/${encodeURIComponent(slug)}/run`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ request: request.trim(), sandbox, ssh }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
+      router.push(`/runs/${data.runId}`);
+    } catch (err) {
+      setError((err as Error).message);
+      setBusy(false);
+    }
+  }
+
+  return (
+    <section className="panel run-panel" style={{ marginBottom: 18 }}>
+      <div className="panel-head">
+        <span className="microlabel">trigger run</span>
+      </div>
+      <div className="run-form">
+        <input
+          type="text"
+          value={request}
+          placeholder="request — topic, URL, host …"
+          onChange={(e) => setRequest(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && launch()}
+        />
+        <button className="run-btn" onClick={launch} disabled={busy || !request.trim() || (sandbox && !sandboxReady)}>
+          {busy ? "starting…" : sandbox ? "▶ run in sandbox" : "▶ run locally"}
+        </button>
+      </div>
+      <div className="run-opts">
+        <label>
+          <input type="checkbox" checked={sandbox} onChange={(e) => setSandbox(e.target.checked)} />
+          docker sandbox {sandboxHint && <span className="opt-hint">— {sandboxHint}</span>}
+        </label>
+        <label>
+          <input type="checkbox" checked={ssh} onChange={(e) => setSsh(e.target.checked)} disabled={!sandbox} />
+          forward SSH agent
+        </label>
+      </div>
+      {error && <div className="gate-fail-msg">{error}</div>}
+    </section>
+  );
+}
+
+function Crumbs({ slug }: { slug: string }) {
+  return (
+    <nav className="crumbs">
+      <a href="/workflows">workflows</a>
+      <span className="sep">/</span>
+      <span className="mono">{slug}</span>
+    </nav>
+  );
+}
+
+function AgentCard({ a, idx }: { a: AgentInfo; idx: number }) {
+  return (
+    <div className={`agent-card aid-${idx}`}>
+      <div className="agent-head">
+        <span className="agent-dot" />
+        <b>{a.name ?? a.id}</b>
+        <code className="agent-id">[{a.id}]</code>
+        <span className="spacer" />
+        <span className="chip">
+          {a.model ?? "default"}
+          {a.effort ? ` · ${a.effort}` : ""}
+        </span>
+      </div>
+      {a.tools.length > 0 && (
+        <div className="agent-tools">
+          {a.tools.map((t) => (
+            <span key={t} className="tool-chip">{t}</span>
+          ))}
+        </div>
+      )}
+      {a.persona && <p className="agent-persona">{a.persona}</p>}
+    </div>
+  );
+}
+
+function StepNode({ s, i, idx }: { s: StepInfo; i: number; idx: number | null }) {
+  const body = s.kind === "script" ? s.script : s.prompt;
+  return (
+    <div className="step-node">
+      <div className={`step-index num ${idx != null ? `aid-${idx}` : "is-script"}`}>{i + 1}</div>
+      <div className="step-body">
+        <div className="phase-top">
+          <span className="phase-name">{s.name}</span>
+          {s.kind === "agent" ? (
+            <span className={`chip agent-chip aid-${idx ?? 0}`}>agent · {s.agent}</span>
+          ) : (
+            <span className="chip">script{s.sourceRef ? ` · ${s.sourceRef}` : ""}</span>
+          )}
+        </div>
+        {body && (
+          <details className="step-source">
+            <summary>{s.kind === "agent" ? "prompt" : "script"}</summary>
+            <pre>{body}</pre>
+          </details>
+        )}
+        {s.gates.length > 0 && (
+          <div className="gate-line">
+            {s.gates.map((g) => (
+              <span key={g} className="gate neutral">⛨ {g}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/inspector/app/workflows/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { WorkflowSummary } from "@/lib/workflows";
+import { usePoll } from "../shared";
+
+export default function WorkflowIndex() {
+  const data = usePoll<{ root?: string; workflows: WorkflowSummary[] }>("/api/workflows", false);
+  const wfs = data?.workflows ?? [];
+
+  return (
+    <>
+      <div className="page-head">
+        <h1>Workflows</h1>
+        <span className="count num">{wfs.length} discovered</span>
+        {data?.root && <span className="count mono">{data.root}</span>}
+      </div>
+
+      {data && wfs.length === 0 && (
+        <div className="empty">
+          No workflows found — expected <code>src/workflows/</code> or <code>workflows/</code>{" "}
+          next to the output folder.
+        </div>
+      )}
+
+      <div className="wf-grid">
+        {wfs.map((w) => (
+          <a key={w.slug} href={`/workflows/${w.slug}`} className="wf-card">
+            <div className="wf-card-head">
+              <span className="wf-name">{w.name ?? w.slug}</span>
+              {w.error && <span className="status-word failed">broken</span>}
+            </div>
+            <p className="wf-desc">{w.error ?? w.description ?? ""}</p>
+            <div className="wf-meta num">
+              <span>{w.agents} agents</span>
+              <span>·</span>
+              <span>{w.steps} steps</span>
+            </div>
+          </a>
+        ))}
+      </div>
+    </>
+  );
+}

package/inspector/lib/runner.ts

@@ -0,0 +1,78 @@
+import { spawn, spawnSync } from "node:child_process";
+import { mkdirSync, openSync, closeSync, existsSync } from "node:fs";
+import path from "node:path";
+import { PROJECT_ROOT } from "./workflows";
+
+/**
+ * Workflow trigger for the web UI. The inspector stays decoupled from the
+ * framework runtime: it shells out to `npx kraftwerk run` in the consumer
+ * project, detached, with a pre-chosen --run-id so the browser can jump to
+ * /runs/<id> immediately and watch the (already polling) live timeline.
+ *
+ * Sandbox mode adds --sandbox: one Docker container per run, workflow
+ * mounted read-only, run dir bind-mounted back into output/ (see
+ * kraftwerk/src/runner/docker.ts).
+ */
+
+function stamp(d = new Date()): string {
+  const p = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}-${p(d.getSeconds())}`;
+}
+
+export function dockerStatus(): { available: boolean; image: boolean } {
+  const daemon = spawnSync("docker", ["version", "--format", "ok"], {
+    stdio: "ignore",
+    timeout: 8000,
+  });
+  if (daemon.status !== 0) return { available: false, image: false };
+  const image = spawnSync("docker", ["image", "inspect", "kraftwerk-runner"], {
+    stdio: "ignore",
+    timeout: 8000,
+  });
+  return { available: true, image: image.status === 0 };
+}
+
+export function triggerRun(opts: {
+  workflowName: string;
+  request: string;
+  sandbox: boolean;
+  ssh: boolean;
+}): { runId: string } {
+  if (opts.sandbox) {
+    const docker = dockerStatus();
+    if (!docker.available) throw new Error("Docker daemon not reachable — start Docker first.");
+    if (!docker.image) throw new Error('Image "kraftwerk-runner" missing — run `kraftwerk runner build`.');
+  }
+
+  const runId = `run-${stamp()}`;
+  const runDir = path.join(PROJECT_ROOT, "output", runId);
+  mkdirSync(runDir, { recursive: true });
+  const log = openSync(path.join(runDir, "trigger.log"), "a");
+
+  const args = ["kraftwerk", "run", "--yes", "--run-id", runId];
+  if (opts.sandbox) args.push("--sandbox");
+  if (opts.ssh) args.push("--ssh");
+  args.push(opts.workflowName, opts.request);
+
+  const child = spawn("npx", args, {
+    cwd: PROJECT_ROOT,
+    detached: true,
+    stdio: ["ignore", log, log],
+    env: { ...process.env, FORCE_COLOR: "0" },
+  });
+  child.unref();
+  closeSync(log);
+  return { runId };
+}
+
+export function stopRun(runId: string): boolean {
+  // Sandboxed runs run in container kw-<runId>; docker stop ends them.
+  if (!/^run-[0-9-]+$/.test(runId)) return false;
+  return (
+    spawnSync("docker", ["stop", `kw-${runId}`], { stdio: "ignore", timeout: 30_000 }).status === 0
+  );
+}
+
+export function hasRunnerMeta(runId: string): boolean {
+  return existsSync(path.join(PROJECT_ROOT, "output", runId, "runner.json"));
+}