ltcai 3.1.0 → 3.2.0

package/static/v3/js/views/skills.js

@@ -0,0 +1,109 @@
+/* ============================================================================
+ * View: Skills — the skills registry (install / enable / disable / remove).
+ * Reads the live workspace skill registry (/workspace/skills) and toggles real
+ * state. The discovery catalog lives in Marketplace; this is management.
+ * ========================================================================== */
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const src = h("span", c.sourceBadge("pending"));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const listHost = h("div", c.loading({ lines: 4, block: true }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Skills",
+      sub: "Install, enable, disable, and remove skills. Installed skills are shared machine-global capabilities the agent can use.",
+      actions: [src],
+    }),
+    statHost,
+    h("section", c.sectionHead("Installed & available skills"), listHost),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const res = await ctx.api.skills();
+    src.replaceChildren(c.sourceBadge(res.source));
+    const skills = normalize(res.data);
+    if (!skills.length) {
+      statHost.replaceChildren(c.stat({ label: "Skills", value: "—", icon: "puzzle" }));
+      listHost.replaceChildren(c.emptyState({ icon: "puzzle-off", title: "Skills registry unavailable", body: res.source === "live" ? "No skills are registered yet — install one from the Marketplace." : "Start the backend to read the skills registry." }));
+      return;
+    }
+    const enabled = skills.filter((s) => s.enabled).length;
+    const installed = skills.filter((s) => s.installed).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Skills", value: c.fmtNum(skills.length), icon: "puzzle" }),
+      c.stat({ label: "Enabled", value: c.fmtNum(enabled), icon: "circle-check" }),
+      c.stat({ label: "Installed", value: c.fmtNum(installed), icon: "download" }),
+    );
+    listHost.replaceChildren(h("div.lt3-grid-auto", skills.map((s) => skillCard(ctx, s))));
+  }
+
+  function skillCard(ctx2, s) {
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div", h("b", s.name), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, [s.source, s.version ? `v${s.version}` : null, s.category].filter(Boolean).join(" · "))),
+        c.statePill(s.enabled ? "ready" : s.installed ? "idle" : "available"),
+      ),
+      s.description ? h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, s.description) : null,
+      h("div.lt3-row-2",
+        s.installed
+          ? h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => toggle(ctx2, s) } }, c.icon(s.enabled ? "player-pause" : "player-play"), s.enabled ? "Disable" : "Enable")
+          : h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => install(ctx2, s) } }, c.icon("download"), "Install"),
+        s.installed ? h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => uninstall(ctx2, s) } }, c.icon("trash"), "Remove") : null,
+      ),
+    ), { interactive: false });
+  }
+
+  async function toggle(ctx2, s) {
+    const res = s.enabled ? await ctx2.api.skillDisable(s.name) : await ctx2.api.skillEnable(s.name);
+    ctx2.toast(res && res.ok ? `${s.enabled ? "Disabled" : "Enabled"} ${s.name}` : "Action unavailable", res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function install(ctx2, s) {
+    const res = await ctx2.api.skillInstall(s.name, s.plugin);
+    ctx2.toast(res && res.ok ? `Installed ${s.name}` : (res && res.status === 403 ? "Admin required" : "Install unavailable"), res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function uninstall(ctx2, s) {
+    const res = await ctx2.api.skillUninstall(s.name);
+    ctx2.toast(res && res.ok ? `Removed ${s.name}` : (res && res.status === 403 ? "Admin required" : "Remove unavailable"), res && res.ok ? "ok" : "err");
+    load();
+  }
+}
+
+function normalize(data) {
+  if (!data) return [];
+  const raw = [];
+  if (Array.isArray(data.skills)) raw.push(...data.skills);
+  if (Array.isArray(data.installed)) raw.push(...data.installed);
+  if (Array.isArray(data.available)) raw.push(...data.available);
+  if (Array.isArray(data.registry)) raw.push(...data.registry);
+  else if (data.registry && typeof data.registry === "object") {
+    raw.push(...Object.entries(data.registry).map(([name, value]) => ({ name, ...(value || {}) })));
+  }
+  if (Array.isArray(data)) raw.push(...data);
+
+  const byName = new Map();
+  for (const item of raw) {
+    const name = item && (item.name || item.skill || item.id);
+    if (!name) continue;
+    const prior = byName.get(name) || {};
+    byName.set(name, { ...prior, ...item, name });
+  }
+
+  return [...byName.values()].map((s) => ({
+    name: s.name || s.skill || s.id || "skill",
+    description: s.description || "",
+    version: s.version || "",
+    source: s.source || "",
+    category: s.category || "",
+    plugin: s.plugin || "",
+    enabled: s.enabled != null ? !!s.enabled : !!s.installed,
+    installed: s.installed != null ? !!s.installed : true,
+  }));
+}

package/static/v3/js/views/tools.e4f11276.js

@@ -0,0 +1,108 @@
+/* ============================================================================
+ * View: Tools — the unified tool registry (local / workspace / MCP).
+ * Reads /mcp/tools (descriptions + governance) and /tools/permissions for risk
+ * and approval. Tools are grouped by risk with governance pills; MCP servers
+ * surface alongside. Unavailable is explicit.
+ * ========================================================================== */
+
+const RISK_ORDER = ["high", "medium", "low"];
+const RISK_VARIANT = { high: "err", medium: "warn", low: "ok" };
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const src = h("span", c.sourceBadge("pending"));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const groupsHost = h("div", c.loading({ lines: 4, block: true }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Tool Registry",
+      sub: "Every tool the agent can call — local, workspace, and MCP — with its governance policy: risk, approval, sandbox, and network access.",
+      actions: [src],
+    }),
+    statHost,
+    h("section", c.sectionHead("Registered tools"), groupsHost),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const [mcp, perms] = await Promise.all([ctx.api.mcpTools(), ctx.api.toolPermissions()]);
+    src.replaceChildren(c.sourceBadge(mcp.source === "live" || perms.source === "live" ? "live" : "unavailable"));
+    const permMap = {};
+    for (const p of normalizePerms(perms.data)) permMap[p.tool] = p;
+    const tools = mergeTools(mcp.data, permMap);
+
+    if (!tools.length) {
+      statHost.replaceChildren(c.stat({ label: "Tools", value: "—", icon: "tools" }));
+      groupsHost.replaceChildren(c.emptyState({ icon: "tool", title: "Tool registry unavailable", body: "Start the backend to read the tool registry." }));
+      return;
+    }
+    const mcpServers = (mcp.data && mcp.data.installed_mcps) || [];
+    const approval = tools.filter((t) => t.requires_approval).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Tools", value: c.fmtNum(tools.length), icon: "tools" }),
+      c.stat({ label: "Need approval", value: c.fmtNum(approval), icon: "lock" }),
+      c.stat({ label: "MCP servers", value: c.fmtNum(mcpServers.length), icon: "plug-connected" }),
+    );
+
+    const byRisk = {};
+    for (const t of tools) (byRisk[t.risk] = byRisk[t.risk] || []).push(t);
+    const sections = RISK_ORDER.filter((r) => byRisk[r]).map((risk) =>
+      h("section",
+        c.sectionHead(h("span.lt3-row-2", c.pill(`${risk} risk`, RISK_VARIANT[risk]), c.pill(String(byRisk[risk].length))), null),
+        c.table(
+          [
+            { key: "name", label: "Tool", render: (t) => h("div", h("b", { style: { "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-sm)" } }, t.name), t.description ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, t.description) : null) },
+            { key: "approval", label: "Approval", width: "1%", render: (t) => c.statePill(t.requires_approval ? "pending" : "ready") },
+            { key: "sandbox", label: "Sandbox", width: "1%", render: (t) => t.sandbox ? c.pill(t.sandbox) : h("span.lt3-faint", "—") },
+            { key: "net", label: "Network", width: "1%", render: (t) => t.network ? c.pill("network", "warn") : h("span.lt3-faint", "—") },
+          ],
+          byRisk[risk],
+        ),
+      ));
+    groupsHost.replaceChildren(h("div.lt3-stack-6", ...sections));
+  }
+}
+
+function normalizePerms(data) {
+  if (!data) return [];
+  if (Array.isArray(data.permissions)) return data.permissions;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+
+function mergeTools(mcpData, permMap) {
+  const out = [];
+  const seen = new Set();
+  const list = (mcpData && mcpData.tools) || [];
+  for (const t of list) {
+    const gov = t.governance || {};
+    const perm = permMap[t.name] || {};
+    out.push({
+      name: t.name,
+      description: t.description || "",
+      risk: (perm.risk || riskFromGov(gov) || "medium"),
+      requires_approval: perm.requires_approval != null ? perm.requires_approval : !gov.auto_approve,
+      sandbox: gov.sandbox || "",
+      network: gov.network != null ? gov.network : perm.network,
+    });
+    seen.add(t.name);
+  }
+  // Tools present only in the permission list (no MCP description).
+  for (const name of Object.keys(permMap)) {
+    if (seen.has(name)) continue;
+    const p = permMap[name];
+    out.push({ name, description: "", risk: p.risk || "medium", requires_approval: !!p.requires_approval, sandbox: "", network: !!p.network });
+  }
+  return out;
+}
+
+function riskFromGov(gov) {
+  if (gov.risk === "exec" || gov.risk === "destructive") return "high";
+  if (gov.risk === "write") return "medium";
+  if (gov.risk === "read") return "low";
+  return null;
+}

package/static/v3/js/views/tools.js

@@ -0,0 +1,108 @@
+/* ============================================================================
+ * View: Tools — the unified tool registry (local / workspace / MCP).
+ * Reads /mcp/tools (descriptions + governance) and /tools/permissions for risk
+ * and approval. Tools are grouped by risk with governance pills; MCP servers
+ * surface alongside. Unavailable is explicit.
+ * ========================================================================== */
+
+const RISK_ORDER = ["high", "medium", "low"];
+const RISK_VARIANT = { high: "err", medium: "warn", low: "ok" };
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const src = h("span", c.sourceBadge("pending"));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const groupsHost = h("div", c.loading({ lines: 4, block: true }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Tool Registry",
+      sub: "Every tool the agent can call — local, workspace, and MCP — with its governance policy: risk, approval, sandbox, and network access.",
+      actions: [src],
+    }),
+    statHost,
+    h("section", c.sectionHead("Registered tools"), groupsHost),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const [mcp, perms] = await Promise.all([ctx.api.mcpTools(), ctx.api.toolPermissions()]);
+    src.replaceChildren(c.sourceBadge(mcp.source === "live" || perms.source === "live" ? "live" : "unavailable"));
+    const permMap = {};
+    for (const p of normalizePerms(perms.data)) permMap[p.tool] = p;
+    const tools = mergeTools(mcp.data, permMap);
+
+    if (!tools.length) {
+      statHost.replaceChildren(c.stat({ label: "Tools", value: "—", icon: "tools" }));
+      groupsHost.replaceChildren(c.emptyState({ icon: "tool", title: "Tool registry unavailable", body: "Start the backend to read the tool registry." }));
+      return;
+    }
+    const mcpServers = (mcp.data && mcp.data.installed_mcps) || [];
+    const approval = tools.filter((t) => t.requires_approval).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Tools", value: c.fmtNum(tools.length), icon: "tools" }),
+      c.stat({ label: "Need approval", value: c.fmtNum(approval), icon: "lock" }),
+      c.stat({ label: "MCP servers", value: c.fmtNum(mcpServers.length), icon: "plug-connected" }),
+    );
+
+    const byRisk = {};
+    for (const t of tools) (byRisk[t.risk] = byRisk[t.risk] || []).push(t);
+    const sections = RISK_ORDER.filter((r) => byRisk[r]).map((risk) =>
+      h("section",
+        c.sectionHead(h("span.lt3-row-2", c.pill(`${risk} risk`, RISK_VARIANT[risk]), c.pill(String(byRisk[risk].length))), null),
+        c.table(
+          [
+            { key: "name", label: "Tool", render: (t) => h("div", h("b", { style: { "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-sm)" } }, t.name), t.description ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, t.description) : null) },
+            { key: "approval", label: "Approval", width: "1%", render: (t) => c.statePill(t.requires_approval ? "pending" : "ready") },
+            { key: "sandbox", label: "Sandbox", width: "1%", render: (t) => t.sandbox ? c.pill(t.sandbox) : h("span.lt3-faint", "—") },
+            { key: "net", label: "Network", width: "1%", render: (t) => t.network ? c.pill("network", "warn") : h("span.lt3-faint", "—") },
+          ],
+          byRisk[risk],
+        ),
+      ));
+    groupsHost.replaceChildren(h("div.lt3-stack-6", ...sections));
+  }
+}
+
+function normalizePerms(data) {
+  if (!data) return [];
+  if (Array.isArray(data.permissions)) return data.permissions;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+
+function mergeTools(mcpData, permMap) {
+  const out = [];
+  const seen = new Set();
+  const list = (mcpData && mcpData.tools) || [];
+  for (const t of list) {
+    const gov = t.governance || {};
+    const perm = permMap[t.name] || {};
+    out.push({
+      name: t.name,
+      description: t.description || "",
+      risk: (perm.risk || riskFromGov(gov) || "medium"),
+      requires_approval: perm.requires_approval != null ? perm.requires_approval : !gov.auto_approve,
+      sandbox: gov.sandbox || "",
+      network: gov.network != null ? gov.network : perm.network,
+    });
+    seen.add(t.name);
+  }
+  // Tools present only in the permission list (no MCP description).
+  for (const name of Object.keys(permMap)) {
+    if (seen.has(name)) continue;
+    const p = permMap[name];
+    out.push({ name, description: "", risk: p.risk || "medium", requires_approval: !!p.requires_approval, sandbox: "", network: !!p.network });
+  }
+  return out;
+}
+
+function riskFromGov(gov) {
+  if (gov.risk === "exec" || gov.risk === "destructive") return "high";
+  if (gov.risk === "write") return "medium";
+  if (gov.risk === "read") return "low";
+  return null;
+}

package/static/v3/js/views/workflows.26c57290.js

@@ -0,0 +1,128 @@
+/* ============================================================================
+ * View: Workflows — workflow-driven agent execution.
+ * Trigger → agent chain → tools → memory → result. Reads workflow definitions
+ * and runs from the real workflow designer backend; runs a definition and shows
+ * the run ledger with replay. Unavailable state is explicit.
+ * ========================================================================== */
+
+const STAGES = ["Trigger", "Agent chain", "Tools", "Memory", "Result"];
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const defsHost = h("div", c.loading({ lines: 3, block: true }));
+  const runsHost = h("div", c.loading({ lines: 3 }));
+  const defsSrc = h("span", c.sourceBadge("pending"));
+  const runsSrc = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Compute",
+      title: "Workflow Agents",
+      sub: "Repeatable automation: a trigger fires an agent chain that calls tools, reads and writes memory, and produces a result.",
+    }),
+    stageLegend(ctx),
+    h("section", c.sectionHead("Workflow definitions", defsSrc), defsHost),
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div", h("div.lt3-eyebrow", "Activity"), h("h3.lt3-panel__title", "Recent runs")), runsSrc),
+      children: runsHost,
+    }),
+  );
+
+  loadDefs();
+  loadRuns();
+  return root;
+
+  function stageLegend(ctx2) {
+    return h("div.lt3-cluster", { style: { gap: "var(--lt3-space-2)" } }, STAGES.map((s, i) =>
+      h("div.lt3-row-2", { style: { gap: "var(--lt3-space-2)" } }, c.pill(s, i === STAGES.length - 1 ? "warn" : "info"), i < STAGES.length - 1 ? c.icon("arrow-right") : null)));
+  }
+
+  async function loadDefs() {
+    const res = await ctx.api.workflowDefinitions();
+    defsSrc.replaceChildren(c.sourceBadge(res.source));
+    const defs = normalizeDefs(res.data);
+    if (!defs.length) {
+      defsHost.replaceChildren(c.emptyState({ icon: "sitemap", title: "No workflows yet", body: res.source === "live" ? "Create a workflow definition to automate an agent chain." : "Start the backend to load workflows." }));
+      return;
+    }
+    defsHost.replaceChildren(h("div.lt3-grid-auto", defs.map((w) => defCard(ctx, w))));
+  }
+
+  function defCard(ctx2, w) {
+    const nodes = w.nodes || (w.definition && w.definition.nodes) || [];
+    const triggers = nodes.filter((n) => n.type === "trigger").length || 1;
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div", h("b", w.name || w.id), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, w.id || "")),
+        c.pill(`${nodes.length || 0} nodes`),
+      ),
+      w.description ? h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, w.description) : null,
+      h("div.lt3-cluster", (nodes.slice(0, 6)).map((n) => h("span.lt3-chip", c.icon(nodeIcon(n.type)), n.name || n.type))),
+      h("div.lt3-row-2",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => runDef(ctx2, w) } }, c.icon("player-play"), "Run"),
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `${triggers} trigger${triggers === 1 ? "" : "s"}`),
+      ),
+    ), { interactive: false });
+  }
+
+  async function runDef(ctx2, w) {
+    const res = await ctx2.api.runWorkflow(w.id, {});
+    ctx2.toast(res && res.ok ? `Ran ${w.name || w.id}` : "Run unavailable", res && res.ok ? "ok" : "err");
+    loadRuns();
+  }
+
+  async function loadRuns() {
+    const res = await ctx.api.workflowRuns();
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = normalizeRuns(res.data);
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({ icon: "history-off", title: "No runs yet", body: "Workflow runs will appear here once a workflow executes." }));
+      return;
+    }
+    runsHost.replaceChildren(c.table(
+      [
+        { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(mapStatus(r.status)) },
+        { key: "name", label: "Workflow", render: (r) => h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, r.workflow_name || r.workflow_id || r.id) },
+        { key: "when", label: "When", width: "1%", render: (r) => h("span.lt3-faint", { style: { "white-space": "nowrap", "font-size": "var(--lt3-text-2xs)" } }, fmtTime(r.created_at || r.started_at)) },
+        { key: "act", label: "", width: "1%", render: (r) => h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => replay(ctx, r) } }, c.icon("player-track-next"), "Replay") },
+      ],
+      runs.slice(0, 20),
+    ));
+  }
+
+  async function replay(ctx2, r) {
+    const id = r.id || r.run_id;
+    const res = await ctx2.api.workflowReplay(id);
+    ctx2.toast(res && res.ok ? `Replay ready for ${id}` : "Replay unavailable", res && res.ok ? "ok" : "err");
+  }
+}
+
+function normalizeDefs(data) {
+  if (!data) return [];
+  if (Array.isArray(data.workflows)) return data.workflows;
+  if (Array.isArray(data.definitions)) return data.definitions;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+function normalizeRuns(data) {
+  if (!data) return [];
+  if (Array.isArray(data.runs)) return data.runs;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+function nodeIcon(type) {
+  return { trigger: "bolt", agent: "robot", plugin: "puzzle", tool: "tool", output: "flag", memory: "brain" }[type] || "point";
+}
+function mapStatus(s) {
+  const v = String(s || "").toLowerCase();
+  if (v === "ok" || v === "completed" || v === "success") return "ready";
+  if (v === "failed" || v === "error") return "failed";
+  if (v === "running") return "active";
+  return v || "idle";
+}
+function fmtTime(ts) {
+  if (!ts) return "—";
+  try { const d = new Date(ts); return Number.isNaN(d.getTime()) ? String(ts) : d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }
+  catch { return String(ts); }
+}

package/static/v3/js/views/workflows.js

@@ -0,0 +1,128 @@
+/* ============================================================================
+ * View: Workflows — workflow-driven agent execution.
+ * Trigger → agent chain → tools → memory → result. Reads workflow definitions
+ * and runs from the real workflow designer backend; runs a definition and shows
+ * the run ledger with replay. Unavailable state is explicit.
+ * ========================================================================== */
+
+const STAGES = ["Trigger", "Agent chain", "Tools", "Memory", "Result"];
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const defsHost = h("div", c.loading({ lines: 3, block: true }));
+  const runsHost = h("div", c.loading({ lines: 3 }));
+  const defsSrc = h("span", c.sourceBadge("pending"));
+  const runsSrc = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Compute",
+      title: "Workflow Agents",
+      sub: "Repeatable automation: a trigger fires an agent chain that calls tools, reads and writes memory, and produces a result.",
+    }),
+    stageLegend(ctx),
+    h("section", c.sectionHead("Workflow definitions", defsSrc), defsHost),
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div", h("div.lt3-eyebrow", "Activity"), h("h3.lt3-panel__title", "Recent runs")), runsSrc),
+      children: runsHost,
+    }),
+  );
+
+  loadDefs();
+  loadRuns();
+  return root;
+
+  function stageLegend(ctx2) {
+    return h("div.lt3-cluster", { style: { gap: "var(--lt3-space-2)" } }, STAGES.map((s, i) =>
+      h("div.lt3-row-2", { style: { gap: "var(--lt3-space-2)" } }, c.pill(s, i === STAGES.length - 1 ? "warn" : "info"), i < STAGES.length - 1 ? c.icon("arrow-right") : null)));
+  }
+
+  async function loadDefs() {
+    const res = await ctx.api.workflowDefinitions();
+    defsSrc.replaceChildren(c.sourceBadge(res.source));
+    const defs = normalizeDefs(res.data);
+    if (!defs.length) {
+      defsHost.replaceChildren(c.emptyState({ icon: "sitemap", title: "No workflows yet", body: res.source === "live" ? "Create a workflow definition to automate an agent chain." : "Start the backend to load workflows." }));
+      return;
+    }
+    defsHost.replaceChildren(h("div.lt3-grid-auto", defs.map((w) => defCard(ctx, w))));
+  }
+
+  function defCard(ctx2, w) {
+    const nodes = w.nodes || (w.definition && w.definition.nodes) || [];
+    const triggers = nodes.filter((n) => n.type === "trigger").length || 1;
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div", h("b", w.name || w.id), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, w.id || "")),
+        c.pill(`${nodes.length || 0} nodes`),
+      ),
+      w.description ? h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, w.description) : null,
+      h("div.lt3-cluster", (nodes.slice(0, 6)).map((n) => h("span.lt3-chip", c.icon(nodeIcon(n.type)), n.name || n.type))),
+      h("div.lt3-row-2",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => runDef(ctx2, w) } }, c.icon("player-play"), "Run"),
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `${triggers} trigger${triggers === 1 ? "" : "s"}`),
+      ),
+    ), { interactive: false });
+  }
+
+  async function runDef(ctx2, w) {
+    const res = await ctx2.api.runWorkflow(w.id, {});
+    ctx2.toast(res && res.ok ? `Ran ${w.name || w.id}` : "Run unavailable", res && res.ok ? "ok" : "err");
+    loadRuns();
+  }
+
+  async function loadRuns() {
+    const res = await ctx.api.workflowRuns();
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = normalizeRuns(res.data);
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({ icon: "history-off", title: "No runs yet", body: "Workflow runs will appear here once a workflow executes." }));
+      return;
+    }
+    runsHost.replaceChildren(c.table(
+      [
+        { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(mapStatus(r.status)) },
+        { key: "name", label: "Workflow", render: (r) => h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, r.workflow_name || r.workflow_id || r.id) },
+        { key: "when", label: "When", width: "1%", render: (r) => h("span.lt3-faint", { style: { "white-space": "nowrap", "font-size": "var(--lt3-text-2xs)" } }, fmtTime(r.created_at || r.started_at)) },
+        { key: "act", label: "", width: "1%", render: (r) => h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => replay(ctx, r) } }, c.icon("player-track-next"), "Replay") },
+      ],
+      runs.slice(0, 20),
+    ));
+  }
+
+  async function replay(ctx2, r) {
+    const id = r.id || r.run_id;
+    const res = await ctx2.api.workflowReplay(id);
+    ctx2.toast(res && res.ok ? `Replay ready for ${id}` : "Replay unavailable", res && res.ok ? "ok" : "err");
+  }
+}
+
+function normalizeDefs(data) {
+  if (!data) return [];
+  if (Array.isArray(data.workflows)) return data.workflows;
+  if (Array.isArray(data.definitions)) return data.definitions;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+function normalizeRuns(data) {
+  if (!data) return [];
+  if (Array.isArray(data.runs)) return data.runs;
+  if (Array.isArray(data)) return data;
+  return [];
+}
+function nodeIcon(type) {
+  return { trigger: "bolt", agent: "robot", plugin: "puzzle", tool: "tool", output: "flag", memory: "brain" }[type] || "point";
+}
+function mapStatus(s) {
+  const v = String(s || "").toLowerCase();
+  if (v === "ok" || v === "completed" || v === "success") return "ready";
+  if (v === "failed" || v === "error") return "failed";
+  if (v === "running") return "active";
+  return v || "idle";
+}
+function fmtTime(ts) {
+  if (!ts) return "—";
+  try { const d = new Date(ts); return Number.isNaN(d.getTime()) ? String(ts) : d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }
+  catch { return String(ts); }
+}