@jiggai/kitchen 0.1.12 → 0.2.0

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

@@ -0,0 +1,1608 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { WorkflowFileV1 } from "@/lib/workflows/types";
+import { validateWorkflowFileV1 } from "@/lib/workflows/validate";
+
+type LoadState =
+  | { kind: "loading" }
+  | { kind: "error"; error: string }
+  | { kind: "ready"; jsonText: string };
+
+function draftKey(teamId: string, workflowId: string) {
+  return `ck-wf-draft:${teamId}:${workflowId}`;
+}
+
+export default function WorkflowsEditorClient({
+  teamId,
+  workflowId,
+  draft,
+}: {
+  teamId: string;
+  workflowId: string;
+  draft: boolean;
+}) {
+  const [view, setView] = useState<"canvas" | "json">("canvas");
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState<LoadState>({ kind: "loading" });
+  const [actionError, setActionError] = useState<string>("");
+  const importInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [toolsCollapsed, setToolsCollapsed] = useState(false);
+
+  // Canvas: selection, drag, node/edge creation.
+  const canvasRef = useRef<HTMLDivElement | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string>("");
+  const [dragging, setDragging] = useState<null | { nodeId: string; dx: number; dy: number; left: number; top: number }>(null);
+
+  const [activeTool, setActiveTool] = useState<
+    | { kind: "select" }
+    | { kind: "add-node"; nodeType: WorkflowFileV1["nodes"][number]["type"] }
+    | { kind: "connect" }
+  >({ kind: "select" });
+  const [connectFromNodeId, setConnectFromNodeId] = useState<string>("");
+
+  const [agents, setAgents] = useState<Array<{ id: string; identityName?: string }>>([]);
+  const [agentsError, setAgentsError] = useState<string>("");
+
+  // Inspector state (parity with modal)
+  const [workflowRuns, setWorkflowRuns] = useState<string[]>([]);
+  const [workflowRunsLoading, setWorkflowRunsLoading] = useState(false);
+  const [workflowRunsError, setWorkflowRunsError] = useState("");
+  const [selectedWorkflowRunId, setSelectedWorkflowRunId] = useState<string>("");
+
+  const [newNodeId, setNewNodeId] = useState("");
+  const [newNodeName, setNewNodeName] = useState("");
+  const [newNodeType, setNewNodeType] = useState<WorkflowFileV1["nodes"][number]["type"]>("llm");
+
+  const [newEdgeFrom, setNewEdgeFrom] = useState("");
+  const [newEdgeTo, setNewEdgeTo] = useState("");
+  const [newEdgeLabel, setNewEdgeLabel] = useState("");
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (draft) {
+          const stored = sessionStorage.getItem(draftKey(teamId, workflowId));
+          if (stored) {
+            setStatus({ kind: "ready", jsonText: stored });
+            return;
+          }
+
+          // New draft: initialize a clean workflow instead of trying to fetch an existing file.
+          const initial: WorkflowFileV1 = {
+            schema: "clawkitchen.workflow.v1",
+            id: workflowId,
+            name: "New workflow",
+            timezone: "UTC",
+            nodes: [
+              { id: "start", type: "start", name: "start", x: 80, y: 80, config: {} },
+              { id: "end", type: "end", name: "end", x: 520, y: 80, config: {} },
+            ],
+            edges: [{ id: "e1", from: "start", to: "end" }],
+          };
+          const text = JSON.stringify(initial, null, 2) + "\n";
+          setStatus({ kind: "ready", jsonText: text });
+          try {
+            sessionStorage.setItem(draftKey(teamId, workflowId), text);
+          } catch {
+            // ignore
+          }
+          return;
+        }
+
+        const res = await fetch(
+          `/api/teams/workflows?teamId=${encodeURIComponent(teamId)}&id=${encodeURIComponent(workflowId)}`,
+          { cache: "no-store" }
+        );
+        const json = (await res.json()) as { ok?: boolean; error?: string; workflow?: unknown };
+        if (!res.ok || !json.ok) throw new Error(json.error || "Failed to load workflow");
+        setStatus({ kind: "ready", jsonText: JSON.stringify(json.workflow, null, 2) + "\n" });
+      } catch (e: unknown) {
+        setStatus({ kind: "error", error: e instanceof Error ? e.message : String(e) });
+      }
+    })();
+  }, [teamId, workflowId, draft]);
+
+  useEffect(() => {
+    (async () => {
+      setAgentsError("");
+      try {
+        const res = await fetch("/api/agents", { cache: "no-store" });
+        const json = (await res.json()) as { agents?: Array<{ id?: unknown; identityName?: unknown }>; error?: string; message?: string };
+        if (!res.ok) throw new Error(json.error || json.message || "Failed to load agents");
+        const list = Array.isArray(json.agents) ? json.agents : [];
+        const filtered = list
+          .map((a) => ({ id: String(a.id ?? "").trim(), identityName: typeof a.identityName === "string" ? a.identityName : undefined }))
+          .filter((a) => a.id && a.id.startsWith(`${teamId}-`));
+        setAgents(filtered);
+      } catch (e: unknown) {
+        setAgentsError(e instanceof Error ? e.message : String(e));
+        setAgents([]);
+      }
+    })();
+  }, [teamId]);
+
+  const parsed = useMemo(() => {
+    if (status.kind !== "ready") return { wf: null as WorkflowFileV1 | null, err: "" };
+    try {
+      const wf = JSON.parse(status.jsonText) as WorkflowFileV1;
+      return { wf, err: "" };
+    } catch (e: unknown) {
+      return { wf: null, err: e instanceof Error ? e.message : String(e) };
+    }
+  }, [status]);
+
+  const validation = useMemo(() => {
+    if (!parsed.wf) return { errors: [], warnings: [] as string[] };
+    return validateWorkflowFileV1(parsed.wf);
+  }, [parsed.wf]);
+
+  function setWorkflow(next: WorkflowFileV1) {
+    const text = JSON.stringify(next, null, 2) + "\n";
+    setStatus({ kind: "ready", jsonText: text });
+    if (draft) {
+      try {
+        sessionStorage.setItem(draftKey(teamId, workflowId), text);
+      } catch {
+        // ignore
+      }
+    }
+  }
+
+  async function onSave() {
+    if (status.kind !== "ready") return;
+    if (!parsed.wf) return;
+    if (parsed.err) return;
+    if (validation.errors.length) return;
+
+    setSaving(true);
+    setActionError("");
+    try {
+      const res = await fetch("/api/teams/workflows", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ teamId, workflow: parsed.wf }),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || !json.ok) throw new Error(json.error || "Failed to save workflow");
+
+      // Clear draft cache once persisted.
+      try {
+        sessionStorage.removeItem(draftKey(teamId, workflowId));
+      } catch {
+        // ignore
+      }
+    } catch (e: unknown) {
+      setActionError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function onExport() {
+    if (!parsed.wf) return;
+    if (parsed.err) return;
+    if (validation.errors.length) return;
+
+    const filename = `${parsed.wf.id || workflowId}.workflow.json`;
+    const blob = new Blob([JSON.stringify(parsed.wf, null, 2) + "\n"], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  if (status.kind === "loading") return <div className="ck-glass w-full p-6">Loading…</div>;
+  if (status.kind === "error") return <div className="ck-glass w-full p-6">{status.error}</div>;
+
+  // (section collapse uses native <details> to keep this file simple)
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-1 flex-col">
+      <div className="flex flex-wrap items-center justify-between gap-3 px-3 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <a
+            href={`/teams/${encodeURIComponent(teamId)}?tab=workflows`}
+            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"
+          >
+            Back
+          </a>
+          <div className="min-w-0">
+            <div className="truncate text-base font-medium text-[color:var(--ck-text-primary)]">
+              {workflowId}.workflow.json
+            </div>
+            <div className="mt-0.5 text-sm text-[color:var(--ck-text-tertiary)]">Team: {teamId}</div>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="flex overflow-hidden rounded-[var(--ck-radius-sm)] border border-white/10">
+            <button
+              type="button"
+              onClick={() => setView("canvas")}
+              className={
+                view === "canvas"
+                  ? "bg-white/10 px-3 py-2 text-xs font-medium text-[color:var(--ck-text-primary)]"
+                  : "bg-transparent px-3 py-2 text-xs font-medium text-[color:var(--ck-text-secondary)] hover:bg-white/5"
+              }
+            >
+              Canvas
+            </button>
+            <button
+              type="button"
+              onClick={() => setView("json")}
+              className={
+                view === "json"
+                  ? "bg-white/10 px-3 py-2 text-xs font-medium text-[color:var(--ck-text-primary)]"
+                  : "bg-transparent px-3 py-2 text-xs font-medium text-[color:var(--ck-text-secondary)] hover:bg-white/5"
+              }
+            >
+              JSON
+            </button>
+          </div>
+
+          <input
+            ref={importInputRef}
+            type="file"
+            accept="application/json,.json"
+            className="hidden"
+            onChange={async (e) => {
+              const file = e.target.files?.[0];
+              // Reset the input so re-importing the same file still triggers onChange.
+              e.target.value = "";
+              if (!file) return;
+
+              setActionError("");
+              try {
+                const text = await file.text();
+                const next = JSON.parse(text) as WorkflowFileV1;
+                setStatus({ kind: "ready", jsonText: JSON.stringify(next, null, 2) + "\n" });
+                if (draft) {
+                  try {
+                    sessionStorage.setItem(draftKey(teamId, workflowId), JSON.stringify(next, null, 2) + "\n");
+                  } catch {
+                    // ignore
+                  }
+                }
+              } catch (err: unknown) {
+                setActionError(err instanceof Error ? err.message : String(err));
+              }
+            }}
+          />
+
+          <button
+            type="button"
+            disabled={saving}
+            onClick={() => importInputRef.current?.click()}
+            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)] hover:bg-white/10 disabled:opacity-50"
+          >
+            Import
+          </button>
+
+          <button
+            type="button"
+            disabled={!parsed.wf || Boolean(parsed.err) || validation.errors.length > 0}
+            onClick={onExport}
+            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)] hover:bg-white/10 disabled:opacity-50"
+          >
+            Export
+          </button>
+
+          <button
+            type="button"
+            disabled={saving || !parsed.wf || Boolean(parsed.err) || validation.errors.length > 0}
+            onClick={onSave}
+            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)] disabled:opacity-50"
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+
+          {/* Back button lives in the left header. */}
+        </div>
+      </div>
+
+      {parsed.err ? (
+        <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-yellow-400/30 bg-yellow-500/10 p-3 text-sm text-yellow-100">
+          JSON parse error: {parsed.err}
+        </div>
+      ) : null}
+      {!parsed.err && validation.errors.length ? (
+        <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">
+          <div className="font-medium">Workflow validation errors</div>
+          <ul className="mt-2 list-disc space-y-1 pl-5">
+            {validation.errors.map((e) => (
+              <li key={e}>{e}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {!parsed.err && !validation.errors.length && validation.warnings.length ? (
+        <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-yellow-400/30 bg-yellow-500/10 p-3 text-sm text-yellow-100">
+          <div className="font-medium">Workflow validation warnings</div>
+          <ul className="mt-2 list-disc space-y-1 pl-5">
+            {validation.warnings.map((w) => (
+              <li key={w}>{w}</li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {actionError ? (
+        <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">
+          {actionError}
+        </div>
+      ) : null}
+
+      <div className="flex min-h-0 flex-1 gap-0">
+        {view === "json" ? (
+          <textarea
+            value={status.jsonText}
+            onChange={(e) => {
+              const t = e.target.value;
+              setStatus({ kind: "ready", jsonText: t });
+              if (draft) {
+                try {
+                  sessionStorage.setItem(draftKey(teamId, workflowId), t);
+                } catch {
+                  // ignore
+                }
+              }
+            }}
+            className="h-full min-h-0 w-full flex-1 resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/20 p-3 font-mono text-xs text-[color:var(--ck-text-primary)]"
+          />
+        ) : (
+          <div
+            ref={canvasRef}
+            className="relative h-full min-h-0 w-full flex-1 overflow-auto bg-black/20"
+            onClick={(e) => {
+              if (activeTool.kind !== "add-node") return;
+              const wf = parsed.wf;
+              if (!wf) return;
+              const el = canvasRef.current;
+              if (!el) return;
+
+              // Only create when clicking on the canvas background (not a node).
+              const target = e.target as HTMLElement | null;
+              if (target && target.closest("[data-wf-node='1']")) return;
+
+              const rect = el.getBoundingClientRect();
+              const clickX = e.clientX - rect.left + el.scrollLeft;
+              const clickY = e.clientY - rect.top + el.scrollTop;
+
+              const base = activeTool.nodeType.replace(/[^a-z0-9_\-]/gi, "_");
+              const used = new Set(wf.nodes.map((n) => n.id));
+              let i = 1;
+              let id = `${base}_${i}`;
+              while (used.has(id)) {
+                i++;
+                id = `${base}_${i}`;
+              }
+
+              const x = Math.max(0, clickX - 90);
+              const y = Math.max(0, clickY - 24);
+
+              const nextNode: WorkflowFileV1["nodes"][number] = {
+                id,
+                type: activeTool.nodeType,
+                name: id,
+                x,
+                y,
+                config: {},
+              };
+
+              setWorkflow({ ...wf, nodes: [...wf.nodes, nextNode] });
+              setSelectedNodeId(id);
+              setActiveTool({ kind: "select" });
+            }}
+          >
+            <div className="relative h-[1200px] w-[2200px]">
+              {/* Tool palette / agent palette */}
+              <div
+                className={
+                  toolsCollapsed
+                    ? "sticky left-3 top-3 z-20 w-[44px] overflow-hidden rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/40 p-2 backdrop-blur"
+                    : "sticky left-3 top-3 z-20 w-[260px] rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/40 p-2 backdrop-blur"
+                }
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className={toolsCollapsed ? "hidden" : "text-[10px] font-medium uppercase tracking-wide text-[color:var(--ck-text-tertiary)]"}>Tools</div>
+                  <button
+                    type="button"
+                    onClick={() => setToolsCollapsed((v) => !v)}
+                    className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[10px] text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                    title={toolsCollapsed ? "Expand" : "Collapse"}
+                  >
+                    {toolsCollapsed ? ">" : "<"}
+                  </button>
+                </div>
+                {toolsCollapsed ? (
+                  <div className="mt-2 flex flex-col items-center gap-2">
+                    {(
+                      [
+                        {
+                          key: "select",
+                          label: "Select",
+                          active: activeTool.kind === "select",
+                          onClick: () => {
+                            setActiveTool({ kind: "select" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M5 4l7 16 2-7 7-2L5 4Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "connect",
+                          label: "Connect",
+                          active: activeTool.kind === "connect",
+                          onClick: () => {
+                            setActiveTool({ kind: "connect" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M10 13a5 5 0 0 1 0-7l1.2-1.2a5 5 0 0 1 7 7L17 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                              <path d="M14 11a5 5 0 0 1 0 7L12.8 19.2a5 5 0 1 1-7-7L7 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "llm",
+                          label: "LLM",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "llm",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "llm" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "tool",
+                          label: "Tool",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "tool",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "tool" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M14.5 7.5l2 2-8.5 8.5H6v-2l8.5-8.5Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+                              <path d="M12 6a4 4 0 0 0-5 5l3-3 2 2 3-3A4 4 0 0 0 12 6Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "condition",
+                          label: "If",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "condition",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "condition" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M7 4v7a3 3 0 0 0 3 3h7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                              <path d="M17 10l3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "delay",
+                          label: "Delay",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "delay",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "delay" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+                              <path d="M21 12a9 9 0 1 1-9-9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "approval",
+                          label: "Approval",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "human_approval",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "human_approval" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M20 6 9 17l-5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                        {
+                          key: "end",
+                          label: "End",
+                          active: activeTool.kind === "add-node" && activeTool.nodeType === "end",
+                          onClick: () => {
+                            setActiveTool({ kind: "add-node", nodeType: "end" });
+                            setConnectFromNodeId("");
+                          },
+                          icon: (
+                            <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                              <path d="M7 7h10v10H7V7Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
+                            </svg>
+                          ),
+                        },
+                      ] as const
+                    ).map((b) => (
+                      <button
+                        key={b.key}
+                        type="button"
+                        onClick={b.onClick}
+                        className={
+                          b.active
+                            ? "flex h-8 w-8 items-center justify-center rounded-[var(--ck-radius-sm)] bg-white/10 text-[color:var(--ck-text-primary)]"
+                            : "flex h-8 w-8 items-center justify-center rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                        }
+                        title={b.label}
+                        aria-label={b.label}
+                      >
+                        {b.icon}
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="mt-2 grid grid-cols-2 gap-2">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setActiveTool({ kind: "select" });
+                        setConnectFromNodeId("");
+                      }}
+                      className={
+                        activeTool.kind === "select"
+                          ? "rounded-[var(--ck-radius-sm)] bg-white/10 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                          : "rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                      }
+                    >
+                      Select
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setActiveTool({ kind: "connect" });
+                        setConnectFromNodeId("");
+                      }}
+                      className={
+                        activeTool.kind === "connect"
+                          ? "rounded-[var(--ck-radius-sm)] bg-white/10 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                          : "rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                      }
+                      title="Click a node, then click another node to create an edge"
+                    >
+                      Connect
+                    </button>
+
+                    {([
+                      { t: "llm", label: "LLM" },
+                      { t: "tool", label: "Tool" },
+                      { t: "condition", label: "If" },
+                      { t: "delay", label: "Delay" },
+                      { t: "human_approval", label: "Approve" },
+                      { t: "end", label: "End" },
+                    ] as Array<{ t: WorkflowFileV1["nodes"][number]["type"]; label: string }>).map((x) => (
+                      <button
+                        key={x.t}
+                        type="button"
+                        onClick={() => {
+                          setActiveTool({ kind: "add-node", nodeType: x.t });
+                          setConnectFromNodeId("");
+                        }}
+                        className={
+                          activeTool.kind === "add-node" && activeTool.nodeType === x.t
+                            ? "rounded-[var(--ck-radius-sm)] bg-white/10 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                            : "rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                        }
+                        title="Select tool, then click on the canvas to place"
+                      >
+                        + {x.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {!toolsCollapsed && activeTool.kind === "connect" && connectFromNodeId ? (
+                  <div className="mt-2 text-xs text-[color:var(--ck-text-secondary)]">Connecting from: <span className="font-mono">{connectFromNodeId}</span></div>
+                ) : null}
+                {!toolsCollapsed && activeTool.kind === "add-node" ? (
+                  <div className="mt-2 text-xs text-[color:var(--ck-text-secondary)]">Click on the canvas to place a <span className="font-mono">{activeTool.nodeType}</span> node.</div>
+                ) : null}
+
+                <div className="mt-3 border-t border-white/10 pt-3">
+                  <div className={toolsCollapsed ? "hidden" : "flex items-center justify-between gap-2"}>
+                    <div className="text-[10px] font-medium uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">Agents</div>
+                    <div className="text-[10px] text-[color:var(--ck-text-tertiary)]">drag → node</div>
+                  </div>
+
+                  {toolsCollapsed ? (
+                    <button
+                      type="button"
+                      onClick={() => setToolsCollapsed(false)}
+                      className="mt-2 flex h-8 w-8 items-center justify-center rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                      title="Expand to see agents"
+                      aria-label="Expand to see agents"
+                    >
+                      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" aria-hidden="true">
+                        <path d="M16 11a4 4 0 1 0-8 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                        <path d="M4 20a8 8 0 0 1 16 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+                      </svg>
+                    </button>
+                  ) : (
+                    <>
+                      {agentsError ? <div className="mt-1 text-[11px] text-red-200">{agentsError}</div> : null}
+                      <div className="mt-2 max-h-[140px] space-y-1 overflow-auto">
+                        {agents.length ? (
+                          agents.map((a) => (
+                            <div
+                              key={a.id}
+                              draggable
+                              onDragStart={(e) => {
+                                e.dataTransfer.setData("text/plain", a.id);
+                                e.dataTransfer.effectAllowed = "copy";
+                              }}
+                              className="cursor-grab rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                              title={a.id}
+                            >
+                              {a.identityName ? a.identityName : a.id.replace(`${teamId}-`, "")}
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-xs text-[color:var(--ck-text-tertiary)]">No team agents found.</div>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <svg className="absolute inset-0" width={2200} height={1200}>
+                {(parsed.wf?.edges ?? []).map((e) => {
+                  const wf = parsed.wf;
+                  if (!wf) return null;
+                  const a = wf.nodes.find((n) => n.id === e.from);
+                  const b = wf.nodes.find((n) => n.id === e.to);
+                  if (!a || !b) return null;
+                  const ax = (typeof a.x === "number" ? a.x : 80) + 90;
+                  const ay = (typeof a.y === "number" ? a.y : 80) + 24;
+                  const bx = (typeof b.x === "number" ? b.x : 80) + 90;
+                  const by = (typeof b.y === "number" ? b.y : 80) + 24;
+                  return <line key={e.id} x1={ax} y1={ay} x2={bx} y2={by} stroke="rgba(255,255,255,0.18)" strokeWidth={2} />;
+                })}
+              </svg>
+
+              {(parsed.wf?.nodes ?? []).map((n, idx) => {
+                const x = typeof n.x === "number" ? n.x : 80 + idx * 220;
+                const y = typeof n.y === "number" ? n.y : 80;
+                const selected = selectedNodeId === n.id;
+                return (
+                  <div
+                    key={n.id}
+                    role="button"
+                    tabIndex={0}
+                    data-wf-node="1"
+                    draggable={activeTool.kind === "select"}
+                    onDragStart={(e) => {
+                      // allow agent pills to be dropped; do not start a browser drag ghost for nodes.
+                      if (activeTool.kind !== "select") return;
+                      e.dataTransfer.setData("text/plain", "");
+                    }}
+                    onDragOver={(e) => {
+                      // Allow dropping agents.
+                      if (e.dataTransfer.types.includes("text/plain")) e.preventDefault();
+                    }}
+                    onDrop={(e) => {
+                      const wf = parsed.wf;
+                      if (!wf) return;
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const agentId = String(e.dataTransfer.getData("text/plain") || "").trim();
+                      if (!agentId) return;
+
+                      const nextNodes = wf.nodes.map((node) => {
+                        if (node.id !== n.id) return node;
+                        const cfg = node.config && typeof node.config === "object" && !Array.isArray(node.config) ? node.config : {};
+                        return { ...node, config: { ...cfg, agentId } };
+                      });
+                      setWorkflow({ ...wf, nodes: nextNodes });
+                      setSelectedNodeId(n.id);
+                    }}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      const wf = parsed.wf;
+                      if (activeTool.kind === "connect") {
+                        if (!wf) return;
+                        if (!connectFromNodeId) {
+                          setConnectFromNodeId(n.id);
+                          setSelectedNodeId(n.id);
+                          return;
+                        }
+                        const from = connectFromNodeId;
+                        const to = n.id;
+                        setConnectFromNodeId("");
+                        if (!from || !to || from === to) return;
+                        const exists = (wf.edges ?? []).some((e) => e.from === from && e.to === to);
+                        if (exists) return;
+                        const id = `e${Date.now()}`;
+                        const nextEdge: WorkflowFileV1["edges"][number] = { id, from, to };
+                        setWorkflow({ ...wf, edges: [...(wf.edges ?? []), nextEdge] });
+                        return;
+                      }
+
+                      setSelectedNodeId(n.id);
+                    }}
+                    onPointerDown={(e) => {
+                      if (activeTool.kind !== "select") return;
+                      if (e.button !== 0) return;
+                      const el = canvasRef.current;
+                      if (!el) return;
+                      const rect = el.getBoundingClientRect();
+                      setSelectedNodeId(n.id);
+                      try {
+                        e.currentTarget.setPointerCapture(e.pointerId);
+                      } catch {
+                        // ignore
+                      }
+                      e.preventDefault();
+                      setDragging({ nodeId: n.id, dx: e.clientX - rect.left - x, dy: e.clientY - rect.top - y, left: rect.left, top: rect.top });
+                    }}
+                    onPointerUp={(e) => {
+                      try {
+                        e.currentTarget.releasePointerCapture(e.pointerId);
+                      } catch {
+                        // ignore
+                      }
+                      setDragging(null);
+                    }}
+                    onPointerMove={(e) => {
+                      if (!dragging) return;
+                      if (dragging.nodeId !== n.id) return;
+                      const wf = parsed.wf;
+                      if (!wf) return;
+                      const el = canvasRef.current;
+                      if (!el) return;
+                      const nextX = e.clientX - dragging.left - dragging.dx;
+                      const nextY = e.clientY - dragging.top - dragging.dy;
+                      const nextNodes = wf.nodes.map((node) => (node.id === n.id ? { ...node, x: nextX, y: nextY } : node));
+                      const next: WorkflowFileV1 = { ...wf, nodes: nextNodes };
+                      setStatus({ kind: "ready", jsonText: JSON.stringify(next, null, 2) + "\n" });
+                    }}
+                    className={
+                      selected
+                        ? "absolute cursor-grab rounded-[var(--ck-radius-sm)] border border-white/25 bg-white/10 px-3 py-2 text-xs text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)]"
+                        : "absolute cursor-grab rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-xs text-[color:var(--ck-text-secondary)] hover:bg-white/10"
+                    }
+                    style={{ left: x, top: y, width: 180 }}
+                  >
+                    <div className="font-medium text-[color:var(--ck-text-primary)]">{n.name || n.id}</div>
+                    <div className="mt-0.5 text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">{n.type}</div>
+                    {(() => {
+                      const cfg = n.config && typeof n.config === "object" && !Array.isArray(n.config) ? (n.config as Record<string, unknown>) : null;
+                      const agentId = cfg ? String(cfg.agentId ?? "").trim() : "";
+                      if (!agentId) return null;
+                      const short = agentId.replace(`${teamId}-`, "");
+                      return <div className="mt-1 text-[10px] text-[color:var(--ck-text-secondary)]">Agent: {short}</div>;
+                    })()}
+                  </div>
+                );
+              })}
+
+              {/* Inline in-canvas node inspector (requirement #6) */}
+              {(() => {
+                const wf = parsed.wf;
+                if (!wf) return null;
+                if (!selectedNodeId) return null;
+                const node = wf.nodes.find((n) => n.id === selectedNodeId);
+                if (!node) return null;
+
+                const x = typeof node.x === "number" ? node.x : 80;
+                const y = typeof node.y === "number" ? node.y : 80;
+                const cfg = node.config && typeof node.config === "object" && !Array.isArray(node.config) ? (node.config as Record<string, unknown>) : {};
+                const agentId = String(cfg.agentId ?? "").trim();
+
+                return (
+                  <div
+                    className="absolute z-10 w-[320px] rounded-[var(--ck-radius-sm)] border border-white/15 bg-black/60 p-3 shadow-[var(--ck-shadow-1)] backdrop-blur"
+                    style={{ left: x + 200, top: y }}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-xs font-medium text-[color:var(--ck-text-primary)]">{node.name || node.id}</div>
+                      <button
+                        type="button"
+                        onClick={() => setSelectedNodeId("")}
+                        className="text-[10px] text-[color:var(--ck-text-tertiary)] hover:text-[color:var(--ck-text-primary)]"
+                      >
+                        Close
+                      </button>
+                    </div>
+
+                    <div className="mt-2 space-y-2">
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">name</div>
+                        <input
+                          value={String(node.name ?? "")}
+                          onChange={(e) => {
+                            const nextName = e.target.value;
+                            setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, name: nextName } : n)) });
+                          }}
+                          className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                          placeholder="Optional"
+                        />
+                      </label>
+
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">type</div>
+                        <select
+                          value={node.type}
+                          onChange={(e) => {
+                            const nextType = e.target.value as WorkflowFileV1["nodes"][number]["type"];
+                            setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, type: nextType } : n)) });
+                          }}
+                          className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                        >
+                          <option value="start">start</option>
+                          <option value="end">end</option>
+                          <option value="llm">llm</option>
+                          <option value="tool">tool</option>
+                          <option value="condition">condition</option>
+                          <option value="delay">delay</option>
+                          <option value="human_approval">human_approval</option>
+                        </select>
+                      </label>
+
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">agentId</div>
+                        <input
+                          value={agentId}
+                          onChange={(e) => {
+                            const nextAgentId = String(e.target.value || "").trim();
+                            const nextCfg = { ...cfg, ...(nextAgentId ? { agentId: nextAgentId } : {}) };
+                            if (!nextAgentId) delete (nextCfg as Record<string, unknown>).agentId;
+                            setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, config: nextCfg } : n)) });
+                          }}
+                          className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]"
+                          placeholder="(drag an agent onto the node or type)"
+                        />
+                      </label>
+
+                      {node.type === "human_approval" ? (
+                        <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 config</div>
+
+                          <div className="mt-2 space-y-2">
+                            <label className="block">
+                              <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">provider</div>
+                              <input
+                                value={String((cfg as Record<string, unknown>).provider ?? "")}
+                                onChange={(e) => {
+                                  const v = String(e.target.value || "").trim();
+                                  const nextCfg = { ...cfg, ...(v ? { provider: v } : {}) };
+                                  if (!v) delete (nextCfg as Record<string, unknown>).provider;
+                                  setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, config: nextCfg } : n)) });
+                                }}
+                                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="telegram"
+                              />
+                            </label>
+
+                            <label className="block">
+                              <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">target</div>
+                              <input
+                                value={String((cfg as Record<string, unknown>).target ?? "")}
+                                onChange={(e) => {
+                                  const v = String(e.target.value || "").trim();
+                                  const nextCfg = { ...cfg, ...(v ? { target: v } : {}) };
+                                  if (!v) delete (nextCfg as Record<string, unknown>).target;
+                                  setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, config: nextCfg } : n)) });
+                                }}
+                                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. Telegram chat id)"
+                              />
+                              <div className="mt-1 text-[10px] text-[color:var(--ck-text-tertiary)]">Overrides workflow-level default when set.</div>
+                            </label>
+
+                            <label className="block">
+                              <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">messageTemplate (optional)</div>
+                              <textarea
+                                value={String((cfg as Record<string, unknown>).messageTemplate ?? "")}
+                                onChange={(e) => {
+                                  const v = String(e.target.value || "");
+                                  const nextCfg = { ...cfg, ...(v.trim() ? { messageTemplate: v } : {}) };
+                                  if (!v.trim()) delete (nextCfg as Record<string, unknown>).messageTemplate;
+                                  setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, config: nextCfg } : n)) });
+                                }}
+                                className="mt-1 h-[70px] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2 font-mono text-[10px] text-[color:var(--ck-text-primary)]"
+                                placeholder="Approval needed for {{workflowName}} (run {{runId}})"
+                                spellCheck={false}
+                              />
+                              <div className="mt-1 text-[10px] text-[color:var(--ck-text-tertiary)]">
+                                Vars: {"{{workflowName}}"}, {"{{workflowId}}"}, {"{{runId}}"}, {"{{nodeId}}"}
+                              </div>
+                            </label>
+                          </div>
+                        </div>
+                      ) : null}
+
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">config (json)</div>
+                        <textarea
+                          value={JSON.stringify(cfg, null, 2)}
+                          onChange={(e) => {
+                            try {
+                              const nextCfg = JSON.parse(e.target.value) as Record<string, unknown>;
+                              if (!nextCfg || typeof nextCfg !== "object" || Array.isArray(nextCfg)) return;
+                              setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, config: nextCfg } : n)) });
+                            } catch {
+                              // ignore invalid JSON while typing
+                            }
+                          }}
+                          className="mt-1 h-[140px] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/30 p-2 font-mono text-[10px] text-[color:var(--ck-text-primary)]"
+                          spellCheck={false}
+                        />
+                        <div className="mt-1 text-[10px] text-[color:var(--ck-text-tertiary)]">(Edits apply when JSON is valid.)</div>
+                      </label>
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          </div>
+        )}
+
+        <div className="w-[380px] shrink-0 overflow-auto p-3 text-sm">
+          <div className="space-y-3">
+            {parsed.wf ? (
+            (() => {
+              const wf = parsed.wf;
+              const tz = String(wf.timezone ?? "").trim() || "UTC";
+              const triggers = wf.triggers ?? [];
+
+              const meta = wf.meta && typeof wf.meta === "object" && !Array.isArray(wf.meta) ? (wf.meta as Record<string, unknown>) : {};
+              const approvalProvider = String(meta.approvalProvider ?? "telegram").trim() || "telegram";
+              const approvalTarget = String(meta.approvalTarget ?? "").trim();
+
+              // Cron schedule suggestions.
+              // Note: dev-team automation defaults should avoid the 02:00–07:00 America/New_York blackout window.
+              // We keep presets in "safe" hours by default.
+              const presets = [
+                { label: "(no preset)", expr: "" },
+                { label: "Weekdays 09:00 local", expr: "0 9 * * 1-5" },
+                { label: "Mon/Wed/Fri 09:00 local", expr: "0 9 * * 1,3,5" },
+                { label: "Daily 08:00 local", expr: "0 8 * * *" },
+                { label: "Daily 12:00 local", expr: "0 12 * * *" },
+                { label: "Mon 09:30 local", expr: "30 9 * * 1" },
+              ];
+
+              return (
+                <div className="space-y-3">
+                  <details open className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15">
+                    <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Workflow</summary>
+                    <div className="px-3 pb-3">
+                      <label className="block">
+                        <div className="text-[11px] font-medium text-[color:var(--ck-text-tertiary)]">Timezone</div>
+                        <input
+                          value={tz}
+                          onChange={(e) => {
+                            const nextTz = String(e.target.value || "").trim() || "UTC";
+                            setWorkflow({ ...wf, timezone: nextTz });
+                          }}
+                          className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-2 py-1 text-sm text-[color:var(--ck-text-primary)]"
+                          placeholder="America/New_York"
+                        />
+                      </label>
+                    </div>
+                  </details>
+
+                  <details open className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15">
+                    <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Approval Channel</summary>
+                    <div className="px-3 pb-3 space-y-2">
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">provider</div>
+                        <input
+                          value={approvalProvider}
+                          onChange={(e) => {
+                            const nextProvider = String(e.target.value || "").trim() || "telegram";
+                            setWorkflow({ ...wf, meta: { ...meta, approvalProvider: nextProvider } });
+                          }}
+                          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="telegram"
+                        />
+                      </label>
+
+                      <label className="block">
+                        <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">target</div>
+                        <input
+                          value={approvalTarget}
+                          onChange={(e) => {
+                            const nextTarget = String(e.target.value || "").trim();
+                            setWorkflow({ ...wf, meta: { ...meta, approvalTarget: nextTarget } });
+                          }}
+                          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. Telegram chat id)"
+                        />
+                        <div className="mt-1 text-[10px] text-[color:var(--ck-text-tertiary)]">
+                          If set, runs that reach a human-approval node can send an approval packet via the gateway message tool.
+                        </div>
+                      </label>
+                    </div>
+                  </details>
+
+                  <details open className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15">
+                    <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Triggers</summary>
+                    <div className="px-3 pb-3">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">triggers</div>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const id = `t${Date.now()}`;
+                          setWorkflow({
+                            ...wf,
+                            triggers: [
+                              ...triggers,
+                              { kind: "cron", id, name: "New trigger", enabled: true, expr: "0 9 * * 1-5", tz },
+                            ],
+                          });
+                        }}
+                        className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10"
+                      >
+                        + Add
+                      </button>
+                    </div>
+
+                    <div className="mt-2 space-y-2">
+                      {triggers.length ? (
+                        triggers.map((t, i) => {
+                          const kind = (t as { kind?: unknown }).kind;
+                          const isCron = kind === "cron";
+                          const id = String((t as { id?: unknown }).id ?? "");
+                          const name = String((t as { name?: unknown }).name ?? "");
+                          const enabled = Boolean((t as { enabled?: unknown }).enabled);
+                          const expr = String((t as { expr?: unknown }).expr ?? "");
+                          const trigTz = String((t as { tz?: unknown }).tz ?? tz);
+                          const cronFields = expr.trim().split(/\s+/).filter(Boolean);
+                          const cronLooksValid = !expr.trim() || cronFields.length === 5;
+
+                          return (
+                            <div key={`${id}-${i}`} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2">
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="text-xs text-[color:var(--ck-text-primary)]">{name || id || `trigger-${i + 1}`}</div>
+                                <button
+                                  type="button"
+                                  onClick={() => setWorkflow({ ...wf, triggers: triggers.filter((_, idx) => idx !== i) })}
+                                  className="text-[10px] text-[color:var(--ck-text-tertiary)] hover:text-[color:var(--ck-text-primary)]"
+                                >
+                                  Remove
+                                </button>
+                              </div>
+
+                              {!isCron ? (
+                                <div className="mt-1 text-xs text-[color:var(--ck-text-secondary)]">Unsupported trigger kind: {String(kind)}</div>
+                              ) : null}
+
+                              <div className="mt-2 grid grid-cols-1 gap-2">
+                                <label className="flex items-center gap-2 text-xs text-[color:var(--ck-text-secondary)]">
+                                  <input
+                                    type="checkbox"
+                                    checked={enabled}
+                                    onChange={(e) => {
+                                      const nextEnabled = e.target.checked;
+                                      setWorkflow({
+                                        ...wf,
+                                        triggers: triggers.map((x, idx) => (idx === i && x.kind === "cron" ? { ...x, enabled: nextEnabled } : x)),
+                                      });
+                                    }}
+                                  />
+                                  Enabled
+                                </label>
+
+                                <label className="block">
+                                  <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">name</div>
+                                  <input
+                                    value={name}
+                                    onChange={(e) => {
+                                      const nextName = e.target.value;
+                                      setWorkflow({
+                                        ...wf,
+                                        triggers: triggers.map((x, idx) => (idx === i && x.kind === "cron" ? { ...x, name: nextName } : x)),
+                                      });
+                                    }}
+                                    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="Content cadence"
+                                  />
+                                </label>
+
+                                <label className="block">
+                                  <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">schedule (cron)</div>
+                                  <input
+                                    value={expr}
+                                    onChange={(e) => {
+                                      const nextExpr = e.target.value;
+                                      setWorkflow({
+                                        ...wf,
+                                        triggers: triggers.map((x, idx) => (idx === i && x.kind === "cron" ? { ...x, expr: nextExpr } : x)),
+                                      });
+                                    }}
+                                    className={
+                                      cronLooksValid
+                                        ? "mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-2 py-1 font-mono text-[11px] text-[color:var(--ck-text-primary)]"
+                                        : "mt-1 w-full rounded-[var(--ck-radius-sm)] border border-red-400/50 bg-black/25 px-2 py-1 font-mono text-[11px] text-[color:var(--ck-text-primary)]"
+                                    }
+                                    placeholder="0 9 * * 1,3,5"
+                                  />
+                                  {!cronLooksValid ? (
+                                    <div className="mt-1 text-[10px] text-red-200">
+                                      Cron should be 5 fields (min hour dom month dow). You entered {cronFields.length}.
+                                    </div>
+                                  ) : null}
+                                  <div className="mt-1 grid grid-cols-1 gap-1">
+                                    <select
+                                      value={presets.some((p) => p.expr === expr) ? expr : ""}
+                                      onChange={(e) => {
+                                        const nextExpr = e.target.value;
+                                        setWorkflow({
+                                          ...wf,
+                                          triggers: triggers.map((x, idx) => (idx === i && x.kind === "cron" ? { ...x, expr: nextExpr } : x)),
+                                        });
+                                      }}
+                                      className="w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-2 py-1 text-[11px] text-[color:var(--ck-text-secondary)]"
+                                    >
+                                      {presets.map((p) => (
+                                        <option key={p.label} value={p.expr}>
+                                          {p.label}
+                                        </option>
+                                      ))}
+                                    </select>
+                                    <div className="text-[10px] text-[color:var(--ck-text-tertiary)]">Presets set the cron; edit freely for advanced schedules.</div>
+                                  </div>
+                                </label>
+
+                                <label className="block">
+                                  <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">timezone override</div>
+                                  <input
+                                    value={trigTz}
+                                    onChange={(e) => {
+                                      const nextTz = String(e.target.value || "").trim() || tz;
+                                      setWorkflow({
+                                        ...wf,
+                                        triggers: triggers.map((x, idx) => (idx === i && x.kind === "cron" ? { ...x, tz: nextTz } : x)),
+                                      });
+                                    }}
+                                    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={tz}
+                                  />
+                                </label>
+                              </div>
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <div className="text-xs text-[color:var(--ck-text-secondary)]">No triggers yet.</div>
+                      )}
+                    </div>
+                    </div>
+                  </details>
+
+                  <details open className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15">
+                    <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Runs</summary>
+                    <div className="px-3 pb-3">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Runs (history)</div>
+                      <button
+                        type="button"
+                        disabled={saving}
+                        onClick={async () => {
+                          const wfId = String(wf.id ?? "").trim();
+                          if (!wfId) return;
+                          setWorkflowRunsError("");
+                          setWorkflowRunsLoading(true);
+                          try {
+                            const res = await fetch("/api/teams/workflow-runs", {
+                              method: "POST",
+                              headers: { "content-type": "application/json" },
+                              body: JSON.stringify({ teamId, workflowId: wfId, mode: "sample" }),
+                            });
+                            const json = await res.json();
+                            if (!res.ok || !json.ok) throw new Error(json.error || "Failed to create sample run");
+
+                            const listRes = await fetch(
+                              `/api/teams/workflow-runs?teamId=${encodeURIComponent(teamId)}&workflowId=${encodeURIComponent(wfId)}`,
+                              { cache: "no-store" }
+                            );
+                            const listJson = await listRes.json();
+                            if (!listRes.ok || !listJson.ok) throw new Error(listJson.error || "Failed to refresh runs");
+                            const files = Array.isArray(listJson.files) ? listJson.files : [];
+                            const list = files.map((f: unknown) => String(f ?? "").trim()).filter((f: string) => Boolean(f));
+                            setWorkflowRuns(list);
+                          } catch (e: unknown) {
+                            setWorkflowRunsError(e instanceof Error ? e.message : String(e));
+                          } finally {
+                            setWorkflowRunsLoading(false);
+                          }
+                        }}
+                        className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-50"
+                      >
+                        + Sample run
+                      </button>
+                    </div>
+
+                    {workflowRunsError ? (
+                      <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">
+                        {workflowRunsError}
+                      </div>
+                    ) : null}
+
+                    <div className="mt-2 space-y-1">
+                      {workflowRunsLoading ? (
+                        <div className="text-xs text-[color:var(--ck-text-secondary)]">Loading runs…</div>
+                      ) : workflowRuns.length ? (
+                        workflowRuns.slice(0, 8).map((f) => {
+                          const runId = String(f).replace(/\.run\.json$/i, "");
+                          const selected = selectedWorkflowRunId === runId;
+                          return (
+                            <button
+                              key={f}
+                              type="button"
+                              onClick={async () => {
+                                const wfId = String(wf.id ?? "").trim();
+                                if (!wfId) return;
+                                setSelectedWorkflowRunId(runId);
+                                setWorkflowRunsError("");
+                                try {
+                                  const res = await fetch(
+                                    `/api/teams/workflow-runs?teamId=${encodeURIComponent(teamId)}&workflowId=${encodeURIComponent(wfId)}&runId=${encodeURIComponent(runId)}`,
+                                    { cache: "no-store" }
+                                  );
+                                  const json = await res.json();
+                                  if (!res.ok || !json.ok) throw new Error(json.error || "Failed to load run");
+                                  // (run detail rendering not implemented yet; selecting stores runId only)
+                                } catch (e: unknown) {
+                                  setWorkflowRunsError(e instanceof Error ? e.message : String(e));
+                                }
+                              }}
+                              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"
+                              }
+                            >
+                              {runId}
+                            </button>
+                          );
+                        })
+                      ) : (
+                        <div className="text-xs text-[color:var(--ck-text-secondary)]">No runs yet.</div>
+                      )}
+                    </div>
+
+                    <details open className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/10">
+                      <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Nodes</summary>
+                      <div className="px-3 pb-3">
+
+                      <div className="mt-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2">
+                        <div className="grid grid-cols-1 gap-2">
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">id</div>
+                            <input
+                              value={newNodeId}
+                              onChange={(e) => setNewNodeId(e.target.value)}
+                              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. draft_assets"
+                            />
+                          </label>
+
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">name (optional)</div>
+                            <input
+                              value={newNodeName}
+                              onChange={(e) => setNewNodeName(e.target.value)}
+                              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="Human-friendly label"
+                            />
+                          </label>
+
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">type</div>
+                            <select
+                              value={newNodeType}
+                              onChange={(e) => setNewNodeType(e.target.value as WorkflowFileV1["nodes"][number]["type"])}
+                              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)]"
+                            >
+                              <option value="start">start</option>
+                              <option value="end">end</option>
+                              <option value="llm">llm</option>
+                              <option value="tool">tool</option>
+                              <option value="condition">condition</option>
+                              <option value="delay">delay</option>
+                              <option value="human_approval">human_approval</option>
+                            </select>
+                          </label>
+
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const rawId = String(newNodeId || "").trim();
+                              const id = rawId.replace(/[^a-z0-9_\-]/gi, "_");
+                              if (!id) return;
+                              if (wf.nodes.some((n) => n.id === id)) return;
+
+                              const maxX = wf.nodes.reduce((acc, n) => (typeof n.x === "number" ? Math.max(acc, n.x) : acc), 80);
+                              const nextNode = {
+                                id,
+                                type: newNodeType,
+                                name: String(newNodeName || "").trim() || id,
+                                x: maxX + 220,
+                                y: 80,
+                              } as WorkflowFileV1["nodes"][number];
+
+                              setWorkflow({ ...wf, nodes: [...wf.nodes, nextNode] });
+                              setSelectedNodeId(id);
+                              setNewNodeId("");
+                              setNewNodeName("");
+                            }}
+                            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"
+                          >
+                            + Add node
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mt-2 space-y-1">
+                        {wf.nodes.map((n) => {
+                          const selected = selectedNodeId === n.id;
+                          return (
+                            <button
+                              key={n.id}
+                              type="button"
+                              onClick={() => setSelectedNodeId(n.id)}
+                              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">{n.id}</span>
+                              <span className="ml-2 text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">{n.type}</span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    </details>
+
+                    <details open className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/10">
+                      <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Edges</summary>
+                      <div className="px-3 pb-3">
+
+                      <div className="mt-2 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2">
+                        <div className="grid grid-cols-1 gap-2">
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">from</div>
+                            <select
+                              value={newEdgeFrom}
+                              onChange={(e) => setNewEdgeFrom(e.target.value)}
+                              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)]"
+                            >
+                              <option value="">(select)</option>
+                              {wf.nodes.map((n) => (
+                                <option key={n.id} value={n.id}>
+                                  {n.id}
+                                </option>
+                              ))}
+                            </select>
+                          </label>
+
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">to</div>
+                            <select
+                              value={newEdgeTo}
+                              onChange={(e) => setNewEdgeTo(e.target.value)}
+                              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)]"
+                            >
+                              <option value="">(select)</option>
+                              {wf.nodes.map((n) => (
+                                <option key={n.id} value={n.id}>
+                                  {n.id}
+                                </option>
+                              ))}
+                            </select>
+                          </label>
+
+                          <label className="block">
+                            <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">label (optional)</div>
+                            <input
+                              value={newEdgeLabel}
+                              onChange={(e) => setNewEdgeLabel(e.target.value)}
+                              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. approve"
+                            />
+                          </label>
+
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const from = String(newEdgeFrom || "").trim();
+                              const to = String(newEdgeTo || "").trim();
+                              if (!from || !to) return;
+                              if (from === to) return;
+                              const id = `e${Date.now()}`;
+                              const nextEdge: WorkflowFileV1["edges"][number] = {
+                                id,
+                                from,
+                                to,
+                                ...(String(newEdgeLabel || "").trim() ? { label: String(newEdgeLabel).trim() } : {}),
+                              };
+                              setWorkflow({ ...wf, edges: [...(wf.edges ?? []), nextEdge] });
+                              setNewEdgeLabel("");
+                            }}
+                            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"
+                          >
+                            + Add edge
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="mt-2 space-y-2">
+                        {(wf.edges ?? []).length ? (
+                          (wf.edges ?? []).map((e) => (
+                            <div key={e.id} className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2">
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="text-[11px] text-[color:var(--ck-text-secondary)]">
+                                  <span className="font-mono">{e.from}</span> → <span className="font-mono">{e.to}</span>
+                                  {e.label ? <span className="ml-2 text-[10px] text-[color:var(--ck-text-tertiary)]">({e.label})</span> : null}
+                                </div>
+                                <button
+                                  type="button"
+                                  onClick={() => setWorkflow({ ...wf, edges: (wf.edges ?? []).filter((x) => x.id !== e.id) })}
+                                  className="text-[10px] text-[color:var(--ck-text-tertiary)] hover:text-[color:var(--ck-text-primary)]"
+                                >
+                                  Remove
+                                </button>
+                              </div>
+                            </div>
+                          ))
+                        ) : (
+                          <div className="text-xs text-[color:var(--ck-text-secondary)]">No edges yet.</div>
+                        )}
+                      </div>
+                    </div>
+                    </details>
+
+                    <details open className="mt-3 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/10">
+                      <summary className="cursor-pointer list-none px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)]">Node inspector</summary>
+                      <div className="px-3 pb-3">
+                        <div className="flex items-center justify-between gap-2">
+                        {selectedNodeId ? (
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const nodeId = selectedNodeId;
+                              const nextNodes = wf.nodes.filter((n) => n.id !== nodeId);
+                              const nextEdges = (wf.edges ?? []).filter((e) => e.from !== nodeId && e.to !== nodeId);
+                              setWorkflow({ ...wf, nodes: nextNodes, edges: nextEdges });
+                              setSelectedNodeId("");
+                            }}
+                            className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-[10px] font-medium text-red-100 hover:bg-white/10"
+                          >
+                            Delete node
+                          </button>
+                        ) : null}
+                      </div>
+
+                      {selectedNodeId ? (
+                        (() => {
+                          const node = wf.nodes.find((n) => n.id === selectedNodeId);
+                          if (!node) return <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">No node selected.</div>;
+
+                          return (
+                            <div className="mt-3 space-y-3">
+                              <div>
+                                <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">id</div>
+                                <div className="mt-1 rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs text-[color:var(--ck-text-primary)]">
+                                  {node.id}
+                                </div>
+                              </div>
+
+                              <label className="block">
+                                <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">name</div>
+                                <input
+                                  value={String(node.name ?? "")}
+                                  onChange={(e) => {
+                                    const nextName = e.target.value;
+                                    setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, name: nextName } : n)) });
+                                  }}
+                                  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="Optional"
+                                />
+                              </label>
+
+                              <label className="block">
+                                <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">type</div>
+                                <select
+                                  value={node.type}
+                                  onChange={(e) => {
+                                    const nextType = e.target.value as WorkflowFileV1["nodes"][number]["type"];
+                                    setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, type: nextType } : n)) });
+                                  }}
+                                  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)]"
+                                >
+                                  <option value="start">start</option>
+                                  <option value="end">end</option>
+                                  <option value="llm">llm</option>
+                                  <option value="tool">tool</option>
+                                  <option value="condition">condition</option>
+                                  <option value="delay">delay</option>
+                                  <option value="human_approval">human_approval</option>
+                                </select>
+                              </label>
+
+                              <div className="grid grid-cols-2 gap-2">
+                                <label className="block">
+                                  <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">x</div>
+                                  <input
+                                    type="number"
+                                    value={typeof node.x === "number" ? node.x : 0}
+                                    onChange={(e) => {
+                                      const nextX = Number(e.target.value);
+                                      setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, x: nextX } : n)) });
+                                    }}
+                                    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)]"
+                                  />
+                                </label>
+                                <label className="block">
+                                  <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">y</div>
+                                  <input
+                                    type="number"
+                                    value={typeof node.y === "number" ? node.y : 0}
+                                    onChange={(e) => {
+                                      const nextY = Number(e.target.value);
+                                      setWorkflow({ ...wf, nodes: wf.nodes.map((n) => (n.id === node.id ? { ...n, y: nextY } : n)) });
+                                    }}
+                                    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)]"
+                                  />
+                                </label>
+                              </div>
+
+                              <div>
+                                <div className="text-[10px] uppercase tracking-wide text-[color:var(--ck-text-tertiary)]">config</div>
+                                <pre className="mt-1 max-h-[200px] overflow-auto rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-2 text-[10px] text-[color:var(--ck-text-secondary)]">
+                                  {JSON.stringify(node.config ?? {}, null, 2)}
+                                </pre>
+                              </div>
+                            </div>
+                          );
+                        })()
+                      ) : (
+                        <div className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">Select a node.</div>
+                      )}
+                    </div>
+                    </details>
+                  </div>
+                  </details>
+                </div>
+              );
+            })()
+          ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}