ltcai 3.3.0 → 3.4.0

package/static/v3/js/views/home.js

@@ -11,6 +11,8 @@
 export async function render(ctx) {
   const { h, icon, api, store, c, navigate } = ctx;
   const ws = store.activeWorkspace();
+  const readinessHost = h("div.lt3-readiness", c.loading({ lines: 4 }));
+  const activityHost = h("div", c.loading({ lines: 3 }));
 
   const root = h("div.lt3-stack-6",
     c.viewHeader({
@@ -22,7 +24,7 @@ export async function render(ctx) {
         h("button.lt3-btn.lt3-btn--primary", { on: { click: () => navigate("chat", { new: "1" }) } }, icon("message-plus"), "New chat"),
       ],
     }),
-    buildHero(ctx),
+    buildHero(ctx, readinessHost),
     h("section",
       c.sectionHead("Retrieval lattice", h("span", { id: "home-idx-src" }, c.sourceBadge("pending"))),
       h("div", { id: "home-pillars" }, c.loading({ lines: 2, block: true })),
@@ -35,30 +37,49 @@ export async function render(ctx) {
       c.panel({ eyebrow: "Index", title: "Connected sources", children: h("div", { id: "home-sources" }, c.loading({ lines: 3 })) }),
       c.panel({ eyebrow: "Workspace", title: "At a glance", children: h("div", { id: "home-stats" }, c.loading({ lines: 3 })) }),
     ),
+    c.panel({
+      eyebrow: "Activity",
+      title: "Recent activity",
+      sub: "Shown only when the local backend provides trace history.",
+      children: activityHost,
+      className: "lt3-panel--activity",
+    }),
   );
 
-  hydrate(ctx, root);
+  hydrate(ctx, root, { readinessHost, activityHost });
   return root;
 }
 
-function buildHero({ h, icon, navigate }) {
+function buildHero({ h, icon, navigate }, readinessHost) {
   return h("div.lt3-hero",
-    h("div.lt3-eyebrow.lt3-hero__eyebrow", icon("sparkles"), "Knowledge Graph · Vector Index · Hybrid Search"),
-    h("h2.lt3-hero__title", "One workspace. Three ways to recall everything."),
-    h("p.lt3-hero__sub", "Lattice builds a knowledge graph and a vector field from your files, then fuses them so every answer is grounded in both structure and meaning."),
-    h("div.lt3-hero__actions",
-      h("button.lt3-btn.lt3-btn--primary.lt3-btn--lg", { on: { click: () => navigate("knowledge-graph") } }, icon("chart-dots-3"), "Explore the graph"),
-      h("button.lt3-btn.lt3-btn--ghost.lt3-btn--lg", { on: { click: () => navigate("files") } }, icon("folder-plus"), "Connect files"),
+    h("div",
+      h("div.lt3-eyebrow.lt3-hero__eyebrow", icon("sparkles"), "Knowledge Graph · Vector Index · Hybrid Search"),
+      h("h2.lt3-hero__title", "Local workspace status, without pretending."),
+      h("p.lt3-hero__sub", "Lattice shows what is ready, what is unavailable, and what needs a local runtime before Chat, Search, Knowledge, and Memory can work together."),
+      h("div.lt3-hero__actions",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--lg", { on: { click: () => navigate("chat", { new: "1" }) } }, icon("message-plus"), "Start chat"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--lg", { on: { click: () => navigate("files") } }, icon("upload"), "Upload files"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--lg", { on: { click: () => navigate("models") } }, icon("cpu"), "Check models"),
+      ),
+      h("div.lt3-mini-lattice", { style: { "margin-top": "var(--lt3-space-6)" } },
+        h("div.lt3-mini-lattice__node", h("b", "Knowledge"), h("span", "Entities and relations")),
+        h("div.lt3-mini-lattice__node", h("b", "Vectors"), h("span", "Local semantic recall")),
+        h("div.lt3-mini-lattice__node", h("b", "Hybrid"), h("span", "Fused answer grounding")),
+      ),
+    ),
+    h("aside.lt3-hero__aside",
+      h("div.lt3-eyebrow", "Readiness"),
+      readinessHost,
     ),
   );
 }
 
 const QUICK = [
-  { key: "knowledge-graph", icon: "chart-dots-3", title: "Knowledge Graph", desc: "Browse entities and relations." },
-  { key: "hybrid-search", icon: "arrows-join", title: "Hybrid Search", desc: "Fuse graph + vector recall." },
   { key: "chat", icon: "message-2", title: "Chat", desc: "Grounded conversation." },
   { key: "files", icon: "folders", title: "Files", desc: "Sources and indexing." },
-  { key: "pipeline", icon: "git-branch", title: "Pipeline", desc: "Ingest and embed flows." },
+  { key: "hybrid-search", icon: "arrows-join", title: "Search", desc: "Fuse graph + vector recall." },
+  { key: "knowledge-graph", icon: "chart-dots-3", title: "Knowledge", desc: "Browse entities and relations." },
+  { key: "memory", icon: "brain", title: "Memory", desc: "Inspect long-term recall." },
   { key: "models", icon: "cpu", title: "Models", desc: "Local MLX runtime." },
 ];
 
@@ -72,8 +93,9 @@ function buildQuickGrid({ h, icon, navigate }) {
   );
 }
 
-async function hydrate(ctx, root) {
+async function hydrate(ctx, root, hosts) {
   const { h, icon, api, store, c } = ctx;
+  const { readinessHost, activityHost } = hosts;
   const numFmt = c.fmtNum;
 
   // Index status → pillars + sources + topbar chip.
@@ -97,12 +119,19 @@ async function hydrate(ctx, root) {
             c.meter(s.progress ?? (s.state === "indexed" ? 1 : 0.5), s.state === "indexing" ? "warn" : "vector"),
             h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `${numFmt(s.files)} files`),
           )))
-        : c.emptyState({ icon: "database-off", title: "No sources connected", body: "Connect a folder to start indexing." }),
+        : c.emptyState({ icon: "database-off", title: "No sources connected", body: "Upload documents to start indexing. Folder watching requires the desktop local agent." }),
     );
   }
 
+  const [os, models, memory, traces] = await Promise.all([
+    api.workspaceOs(),
+    api.models(),
+    api.memoryManager(),
+    api.get("/workspace/traces", { traces: [] }),
+  ]);
+  renderReadiness({ h, icon, c, readinessHost, idx, models, os, memory });
+
   // Workspace counts.
-  const os = await api.workspaceOs();
   const counts = (os.data && os.data.counts) || {};
   const statHost = root.querySelector("#home-stats");
   if (statHost) {
@@ -116,4 +145,56 @@ async function hydrate(ctx, root) {
       h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.sourceBadge(os.source)),
     );
   }
+
+  renderActivity({ h, icon, c, activityHost, traces });
+}
+
+function renderReadiness({ h, icon, c, readinessHost, idx, models, os, memory }) {
+  const pipes = (idx.data && idx.data.pipelines) || {};
+  const vectorReady = String(pipes.vector_index?.state || "").toLowerCase() === "ready";
+  const graphReady = String(pipes.knowledge_graph?.state || "").toLowerCase() === "ready";
+  const modelName = models.data && models.data.current;
+  const counts = (os.data && os.data.counts) || {};
+  const memSources = (memory.data && memory.data.sources) || [];
+  readinessHost.replaceChildren(
+    readinessRow({ h, icon, c, ic: "server", title: "Backend", meta: idx.source === "live" ? "Live local API" : "Local API unavailable", state: idx.source === "live" ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "cpu", title: "Model", meta: modelName ? shortModel(modelName) : "No model loaded", state: modelName ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "database", title: "Retrieval", meta: graphReady && vectorReady ? "Graph and vector ready" : "Index needs data or rebuild", state: graphReady && vectorReady ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "brain", title: "Memory", meta: memSources.length ? `${c.fmtNum(counts.memories)} memories across ${memSources.length} tiers` : "Memory backend unavailable or empty", state: memSources.length ? "ready" : "idle" }),
+  );
+}
+
+function readinessRow({ h, icon, c, ic, title, meta, state }) {
+  return h("div.lt3-readiness__row",
+    h("div.lt3-readiness__icon", icon(ic)),
+    h("div", h("div.lt3-readiness__title", title), h("div.lt3-readiness__meta", meta)),
+    c.statePill(state),
+  );
+}
+
+function renderActivity({ h, icon, c, activityHost, traces }) {
+  const rows = (traces.data && Array.isArray(traces.data.traces)) ? traces.data.traces : [];
+  if (!rows.length) {
+    activityHost.replaceChildren(c.emptyState({
+      icon: "history-off",
+      title: "No recent activity available",
+      body: traces.source === "live" ? "The backend returned no trace history yet." : "Start the backend to show recent local workspace activity.",
+    }));
+    return;
+  }
+  activityHost.replaceChildren(h("div.lt3-list", rows.slice(0, 6).map((tr) =>
+    h("div.lt3-list__item",
+      h("span.lt3-avatar", { style: { width: "28px", height: "28px" } }, icon("route")),
+      h("div.lt3-list__body",
+        h("div.lt3-list__title", tr.question || tr.event_type || "Workspace event"),
+        h("div.lt3-list__meta", [tr.confidence != null ? `${Math.round(Number(tr.confidence) * 100)}% confidence` : null, tr.created_at || tr.timestamp || null].filter(Boolean).join(" · ")),
+      ),
+      c.sourceBadge(traces.source),
+    ))));
+}
+
+function shortModel(id) {
+  const s = String(id || "");
+  const tail = s.includes("/") ? s.split("/").pop() : s;
+  return tail.length > 28 ? tail.slice(0, 27) + "…" : tail;
 }

package/static/v3/js/views/hooks.13845954.js

@@ -0,0 +1,215 @@
+/* ============================================================================
+ * View: Hooks — the lifecycle hooks registry.
+ * Reads /api/hooks (built-in + user hooks across pre_run/post_run/pre_tool/
+ * post_tool/agent/pipeline/workflow), toggles enabled state, reorders, and
+ * registers custom hooks. Built-in hooks are platform-managed and labelled.
+ * ========================================================================== */
+
+const KIND_LABEL = {
+  pre_run: "Pre-run", post_run: "Post-run", pre_tool: "Pre-tool", post_tool: "Post-tool",
+  agent: "Agent", pipeline: "Pipeline", workflow: "Workflow",
+};
+
+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 }));
+
+  // Recent executions — proves hooks fire end-to-end (v3.4.0).
+  const runsSrc = h("span", c.sourceBadge("pending"));
+  const runsHost = h("div", c.loading({ lines: 3, block: true }));
+
+  const nameInput = h("input.lt3-input", { type: "text", placeholder: "Hook name" });
+  const kindSelect = h("select.lt3-select", Object.keys(KIND_LABEL).map((k) => h("option", { value: k }, KIND_LABEL[k])));
+  const descInput = h("input.lt3-input", { type: "text", placeholder: "What it does (optional)" });
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Hooks",
+      sub: "Lifecycle extension points across runs, tools, agents, pipelines, and workflows — visible, ordered, and individually toggleable.",
+      actions: [src],
+    }),
+    statHost,
+    c.panel({
+      title: "Register a hook", sub: "Custom hooks are listed, ordered, and inspectable.",
+      children: h("div.lt3-stack-3",
+        h("div.lt3-grid-2", h("div.lt3-field", h("label", "Name"), nameInput), h("div.lt3-field", h("label", "Kind"), kindSelect)),
+        h("div.lt3-field", h("label", "Description"), descInput),
+        h("div.lt3-row-2", h("button.lt3-btn.lt3-btn--primary", { on: { click: register } }, c.icon("plus"), "Register hook")),
+      ),
+    }),
+    groupsHost,
+    c.panel({
+      title: "Recent executions",
+      sub: "What actually ran. Blocked pre-hooks and advisory built-ins are surfaced honestly — no fabricated success.",
+      actions: [
+        runsSrc,
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: loadRuns } }, c.icon("refresh"), "Refresh"),
+      ],
+      children: runsHost,
+    }),
+  );
+
+  load();
+  loadRuns();
+  return root;
+
+  async function load() {
+    const res = await ctx.api.hooks();
+    src.replaceChildren(c.sourceBadge(res.source));
+    const hooks = (res.data && res.data.hooks) || [];
+    if (!hooks.length) {
+      statHost.replaceChildren(c.stat({ label: "Hooks", value: "—", icon: "webhook" }));
+      groupsHost.replaceChildren(c.emptyState({ icon: "webhook-off", title: "Hooks unavailable", body: "Start the backend to read the hooks registry." }));
+      return;
+    }
+    const en = hooks.filter((x) => x.enabled).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Hooks", value: c.fmtNum(hooks.length), icon: "webhook" }),
+      c.stat({ label: "Enabled", value: c.fmtNum(en), icon: "circle-check" }),
+      c.stat({ label: "Kinds", value: c.fmtNum((res.data.kinds || []).length), icon: "layers" }),
+    );
+    const byKind = {};
+    for (const hk of hooks) (byKind[hk.kind] = byKind[hk.kind] || []).push(hk);
+    groupsHost.replaceChildren(h("div.lt3-stack-6", Object.keys(byKind).map((kind) =>
+      h("section", c.sectionHead(
+          KIND_LABEL[kind] || kind,
+          c.pill(String(byKind[kind].length)),
+          h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => runKind(kind) } }, c.icon("player-play"), `Run ${KIND_LABEL[kind] || kind}`),
+        ),
+        h("div.lt3-stack-2", byKind[kind].map((hk) => hookRow(ctx, hk)))))));
+  }
+
+  function hookRow(ctx2, hk) {
+    return c.card(h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "center", gap: "var(--lt3-space-3)" } },
+      h("div", { style: { "min-width": 0 } },
+        h("div.lt3-row-2", h("b", hk.name), c.pill(hk.source === "builtin" ? "built-in" : "custom", hk.source === "builtin" ? "info" : ""), hk.managed === "platform" ? c.pill("managed", "") : null),
+        h("p.lt3-muted", { style: { margin: "2px 0 0", "font-size": "var(--lt3-text-sm)" } }, hk.description || ""),
+        hk.binding ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, hk.binding) : null,
+      ),
+      h("div.lt3-row-2", { style: { "flex-shrink": 0 } },
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `#${hk.order}`),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => runHook(hk) } }, c.icon("player-play"), "Run"),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => toggle(ctx2, hk) } }, c.icon(hk.enabled ? "toggle-right" : "toggle-left"), hk.enabled ? "On" : "Off"),
+        hk.removable ? h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => remove(ctx2, hk) } }, c.icon("trash")) : null,
+      ),
+    ), { flat: true });
+  }
+
+  async function toggle(ctx2, hk) {
+    const res = hk.enabled ? await ctx2.api.hookDisable(hk.id) : await ctx2.api.hookEnable(hk.id, true);
+    ctx2.toast(res && res.ok ? `${hk.name}: ${hk.enabled ? "disabled" : "enabled"}` : "Action unavailable", res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function remove(ctx2, hk) {
+    const res = await ctx2.api.hookRemove(hk.id);
+    ctx2.toast(res && res.ok ? `Removed ${hk.name}` : "Remove unavailable", res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function register() {
+    const name = nameInput.value.trim();
+    if (!name) { ctx.toast("Enter a hook name", "info"); return; }
+    const res = await ctx.api.hookRegister({ name, kind: kindSelect.value, description: descInput.value.trim() });
+    if (res && res.ok) { ctx.toast(`Registered ${name}`, "ok"); nameInput.value = ""; descInput.value = ""; load(); }
+    else { ctx.toast("Register unavailable", "err"); }
+  }
+
+  /* ── Dispatch ─────────────────────────────────────────────────────────────
+   * Fire hooks for real and surface the honest outcome. status === "ok" is a
+   * clean run; "blocked"/"skipped"/"advisory" are warnings (advisory built-ins
+   * never claim success); "error" is a failure. The run log refreshes after. */
+
+  // Map a hook status to a toast variant — advisory/blocked are never "ok".
+  function statusVariant(status) {
+    if (status === "ok") return "ok";
+    if (status === "error") return "err";
+    return "warn"; // blocked | skipped | advisory | anything unexpected
+  }
+
+  async function runHook(hk) {
+    const res = await ctx.api.hookRun({ hook_id: hk.id, event: "manual" });
+    if (!res || !res.ok || !res.data) {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || (res && res.error) || "dispatch unavailable";
+      ctx.toast(`Run failed: ${detail}`, "err");
+      loadRuns();
+      return;
+    }
+    const d = res.data;
+    const status = d.status || "unknown";
+    ctx.toast(`Ran ${hk.name}: ${status}${d.detail ? " — " + d.detail : ""}`, statusVariant(status));
+    loadRuns();
+  }
+
+  async function runKind(kind) {
+    const res = await ctx.api.hookRun({ kind, event: "manual" });
+    if (!res || !res.ok || !res.data) {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || (res && res.error) || "dispatch unavailable";
+      ctx.toast(`Run ${KIND_LABEL[kind] || kind} failed: ${detail}`, "err");
+      loadRuns();
+      return;
+    }
+    const d = res.data;
+    const ran = d.ran == null ? 0 : d.ran;
+    const label = KIND_LABEL[kind] || kind;
+    const variant = d.blocked ? "warn" : (ran > 0 ? "ok" : "info");
+    ctx.toast(`${ran} ${label} hook(s) ran${d.blocked ? " — blocked: " + (d.block_reason || "policy") : ""}`, variant);
+    loadRuns();
+  }
+
+  /* ── Recent executions log ─────────────────────────────────────────────── */
+
+  async function loadRuns() {
+    runsHost.replaceChildren(c.loading({ lines: 3, block: true }));
+    const res = await ctx.api.hookRuns(50);
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = (res.data && res.data.runs) || [];
+    if (!res.ok && res.source === "unavailable") {
+      runsHost.replaceChildren(c.emptyState({
+        icon: "webhook-off",
+        title: "Run log unavailable",
+        body: "Start the backend to read recent hook executions.",
+      }));
+      return;
+    }
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({
+        icon: "history-off",
+        title: "No hook executions yet",
+        body: "Run a hook, or trigger an agent run / workflow / upload to see lifecycle hooks fire here.",
+      }));
+      return;
+    }
+    runsHost.replaceChildren(h("div.lt3-stack-2", runs.map((r) => runRow(r))));
+  }
+
+  function runRow(r) {
+    const status = r.status || "unknown";
+    const detail = r.detail || r.output || "";
+    return c.card(h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", gap: "var(--lt3-space-3)" } },
+      h("div", { style: { "min-width": 0 } },
+        h("div.lt3-row-2",
+          h("b", r.name || r.hook_id || "hook"),
+          c.pill(KIND_LABEL[r.kind] || r.kind || "—", "info"),
+          c.statePill(status),
+        ),
+        (r.target_event || r.target_kind) ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)", "margin-top": "2px" } },
+          `event: ${r.target_event || r.target_kind || "—"}`) : null,
+        detail ? h("p.lt3-faint", {
+          style: { margin: "4px 0 0", "font-size": "var(--lt3-text-xs)", "font-family": "var(--lt3-font-mono)", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis", "max-width": "100%" },
+          title: detail,
+        }, truncate(detail, 160)) : null,
+      ),
+      h("div", { style: { "flex-shrink": 0, "text-align": "right" } },
+        h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, r.duration_ms == null ? "—" : `${r.duration_ms}ms`),
+        r.started_at ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "margin-top": "2px" } }, r.started_at) : null,
+      ),
+    ), { flat: true });
+  }
+
+  function truncate(s, n) {
+    s = String(s);
+    return s.length > n ? s.slice(0, n - 1) + "…" : s;
+  }
+}

package/static/v3/js/views/hooks.js

@@ -16,6 +16,10 @@ export async function render(ctx) {
   const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
   const groupsHost = h("div", c.loading({ lines: 4, block: true }));
 
+  // Recent executions — proves hooks fire end-to-end (v3.4.0).
+  const runsSrc = h("span", c.sourceBadge("pending"));
+  const runsHost = h("div", c.loading({ lines: 3, block: true }));
+
   const nameInput = h("input.lt3-input", { type: "text", placeholder: "Hook name" });
   const kindSelect = h("select.lt3-select", Object.keys(KIND_LABEL).map((k) => h("option", { value: k }, KIND_LABEL[k])));
   const descInput = h("input.lt3-input", { type: "text", placeholder: "What it does (optional)" });
@@ -37,9 +41,19 @@ export async function render(ctx) {
       ),
     }),
     groupsHost,
+    c.panel({
+      title: "Recent executions",
+      sub: "What actually ran. Blocked pre-hooks and advisory built-ins are surfaced honestly — no fabricated success.",
+      actions: [
+        runsSrc,
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: loadRuns } }, c.icon("refresh"), "Refresh"),
+      ],
+      children: runsHost,
+    }),
   );
 
   load();
+  loadRuns();
   return root;
 
   async function load() {
@@ -60,7 +74,11 @@ export async function render(ctx) {
     const byKind = {};
     for (const hk of hooks) (byKind[hk.kind] = byKind[hk.kind] || []).push(hk);
     groupsHost.replaceChildren(h("div.lt3-stack-6", Object.keys(byKind).map((kind) =>
-      h("section", c.sectionHead(KIND_LABEL[kind] || kind, c.pill(String(byKind[kind].length))),
+      h("section", c.sectionHead(
+          KIND_LABEL[kind] || kind,
+          c.pill(String(byKind[kind].length)),
+          h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => runKind(kind) } }, c.icon("player-play"), `Run ${KIND_LABEL[kind] || kind}`),
+        ),
         h("div.lt3-stack-2", byKind[kind].map((hk) => hookRow(ctx, hk)))))));
   }
 
@@ -73,6 +91,7 @@ export async function render(ctx) {
       ),
       h("div.lt3-row-2", { style: { "flex-shrink": 0 } },
         h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `#${hk.order}`),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => runHook(hk) } }, c.icon("player-play"), "Run"),
         h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => toggle(ctx2, hk) } }, c.icon(hk.enabled ? "toggle-right" : "toggle-left"), hk.enabled ? "On" : "Off"),
         hk.removable ? h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => remove(ctx2, hk) } }, c.icon("trash")) : null,
       ),
@@ -96,4 +115,101 @@ export async function render(ctx) {
     if (res && res.ok) { ctx.toast(`Registered ${name}`, "ok"); nameInput.value = ""; descInput.value = ""; load(); }
     else { ctx.toast("Register unavailable", "err"); }
   }
+
+  /* ── Dispatch ─────────────────────────────────────────────────────────────
+   * Fire hooks for real and surface the honest outcome. status === "ok" is a
+   * clean run; "blocked"/"skipped"/"advisory" are warnings (advisory built-ins
+   * never claim success); "error" is a failure. The run log refreshes after. */
+
+  // Map a hook status to a toast variant — advisory/blocked are never "ok".
+  function statusVariant(status) {
+    if (status === "ok") return "ok";
+    if (status === "error") return "err";
+    return "warn"; // blocked | skipped | advisory | anything unexpected
+  }
+
+  async function runHook(hk) {
+    const res = await ctx.api.hookRun({ hook_id: hk.id, event: "manual" });
+    if (!res || !res.ok || !res.data) {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || (res && res.error) || "dispatch unavailable";
+      ctx.toast(`Run failed: ${detail}`, "err");
+      loadRuns();
+      return;
+    }
+    const d = res.data;
+    const status = d.status || "unknown";
+    ctx.toast(`Ran ${hk.name}: ${status}${d.detail ? " — " + d.detail : ""}`, statusVariant(status));
+    loadRuns();
+  }
+
+  async function runKind(kind) {
+    const res = await ctx.api.hookRun({ kind, event: "manual" });
+    if (!res || !res.ok || !res.data) {
+      const detail = (res && res.data && (res.data.detail || res.data.error)) || (res && res.error) || "dispatch unavailable";
+      ctx.toast(`Run ${KIND_LABEL[kind] || kind} failed: ${detail}`, "err");
+      loadRuns();
+      return;
+    }
+    const d = res.data;
+    const ran = d.ran == null ? 0 : d.ran;
+    const label = KIND_LABEL[kind] || kind;
+    const variant = d.blocked ? "warn" : (ran > 0 ? "ok" : "info");
+    ctx.toast(`${ran} ${label} hook(s) ran${d.blocked ? " — blocked: " + (d.block_reason || "policy") : ""}`, variant);
+    loadRuns();
+  }
+
+  /* ── Recent executions log ─────────────────────────────────────────────── */
+
+  async function loadRuns() {
+    runsHost.replaceChildren(c.loading({ lines: 3, block: true }));
+    const res = await ctx.api.hookRuns(50);
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = (res.data && res.data.runs) || [];
+    if (!res.ok && res.source === "unavailable") {
+      runsHost.replaceChildren(c.emptyState({
+        icon: "webhook-off",
+        title: "Run log unavailable",
+        body: "Start the backend to read recent hook executions.",
+      }));
+      return;
+    }
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({
+        icon: "history-off",
+        title: "No hook executions yet",
+        body: "Run a hook, or trigger an agent run / workflow / upload to see lifecycle hooks fire here.",
+      }));
+      return;
+    }
+    runsHost.replaceChildren(h("div.lt3-stack-2", runs.map((r) => runRow(r))));
+  }
+
+  function runRow(r) {
+    const status = r.status || "unknown";
+    const detail = r.detail || r.output || "";
+    return c.card(h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", gap: "var(--lt3-space-3)" } },
+      h("div", { style: { "min-width": 0 } },
+        h("div.lt3-row-2",
+          h("b", r.name || r.hook_id || "hook"),
+          c.pill(KIND_LABEL[r.kind] || r.kind || "—", "info"),
+          c.statePill(status),
+        ),
+        (r.target_event || r.target_kind) ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)", "margin-top": "2px" } },
+          `event: ${r.target_event || r.target_kind || "—"}`) : null,
+        detail ? h("p.lt3-faint", {
+          style: { margin: "4px 0 0", "font-size": "var(--lt3-text-xs)", "font-family": "var(--lt3-font-mono)", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis", "max-width": "100%" },
+          title: detail,
+        }, truncate(detail, 160)) : null,
+      ),
+      h("div", { style: { "flex-shrink": 0, "text-align": "right" } },
+        h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, r.duration_ms == null ? "—" : `${r.duration_ms}ms`),
+        r.started_at ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "margin-top": "2px" } }, r.started_at) : null,
+      ),
+    ), { flat: true });
+  }
+
+  function truncate(s, n) {
+    s = String(s);
+    return s.length > n ? s.slice(0, n - 1) + "…" : s;
+  }
 }