ltcai 3.1.0 → 3.3.0

package/static/v3/js/views/agents.js

@@ -9,8 +9,10 @@ export async function render(ctx) {
   const { h, icon, c } = ctx;
 
   const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const registryHost = h("div", c.loading({ lines: 3, block: true }));
   const rosterHost = h("div", c.loading({ lines: 2, block: true }));
   const runsHost = h("div", c.loading({ lines: 4 }));
+  const registrySrc = h("span", c.sourceBadge("pending"));
   const rosterSrc = h("span", c.sourceBadge("pending"));
   const runsSrc = h("span", c.sourceBadge("pending"));
   const healthSlot = h("span", c.sourceBadge("pending"));
@@ -23,6 +25,10 @@ export async function render(ctx) {
       actions: [healthSlot],
     }),
     statHost,
+    h("section",
+      c.sectionHead("Agent Registry", registrySrc),
+      registryHost,
+    ),
     h("section",
       c.sectionHead("Agent roster", rosterSrc),
       rosterHost,
@@ -40,6 +46,7 @@ export async function render(ctx) {
   );
 
   hydrate(ctx, { statHost, rosterHost, runsHost, rosterSrc, runsSrc, healthSlot });
+  loadRegistry(ctx, { registryHost, registrySrc });
   return root;
 }
 
@@ -109,6 +116,83 @@ async function hydrate(ctx, hosts) {
   );
 }
 
+async function loadRegistry(ctx, hosts) {
+  const { h, c } = ctx;
+  const { registryHost, registrySrc } = hosts;
+  const [registryRes, capsRes] = await Promise.all([ctx.api.agentRegistry(), ctx.api.agentCapabilities()]);
+  const agents = normalizeRegistry(registryRes.data);
+  const caps = (capsRes.data && capsRes.data.capabilities) || {};
+  registrySrc.replaceChildren(c.sourceBadge(registryRes.source === "live" || capsRes.source === "live" ? "live" : "unavailable"));
+
+  const nameInput = h("input.lt3-input", { type: "text", placeholder: "Custom agent name", "aria-label": "Custom agent name" });
+  const capsInput = h("input.lt3-input", { type: "text", placeholder: "capability-a, capability-b", "aria-label": "Custom agent capabilities" });
+  const registerBtn = h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: register } }, c.icon("plus"), "Register");
+
+  const capList = Object.keys(caps).sort();
+  const body = h("div.lt3-stack-4",
+    h("div.lt3-grid-2",
+      h("div.lt3-field", h("label", "Name"), nameInput),
+      h("div.lt3-field", h("label", "Capabilities"), capsInput),
+    ),
+    h("div.lt3-row-2", registerBtn,
+      h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Custom agents persist in the local registry.")),
+    capList.length
+      ? h("div.lt3-cluster", capList.slice(0, 18).map((cap) => h("span.lt3-chip", c.icon("sparkles"), `${cap} (${caps[cap].length})`)))
+      : h("p.lt3-faint", { style: { margin: 0 } }, "Capabilities appear here when the registry is live."),
+    agents.length
+      ? h("div.lt3-grid-auto", agents.map((agent) => registryCard(ctx, agent)))
+      : c.emptyState({ icon: "robot-off", title: "Agent registry unavailable", body: "Start the local server to register and configure agents." }),
+  );
+  registryHost.replaceChildren(c.panel({ title: "Registry controls", sub: "Register, discover, and configure built-in or custom agents.", children: body }));
+
+  async function register() {
+    const name = nameInput.value.trim();
+    if (!name) { ctx.toast("Enter an agent name", "info"); return; }
+    const capabilities = capsInput.value.split(",").map((s) => s.trim()).filter(Boolean);
+    registerBtn.disabled = true;
+    const res = await ctx.api.registerAgent({ name, type: "custom", capabilities });
+    registerBtn.disabled = false;
+    if (res && res.ok) {
+      ctx.toast(`Registered ${name}`, "ok");
+      loadRegistry(ctx, hosts);
+    } else {
+      ctx.toast("Register unavailable", "err");
+    }
+  }
+}
+
+function registryCard(ctx, agent) {
+  const { h, c } = ctx;
+  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", agent.name),
+        h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, agent.id),
+      ),
+      c.pill(agent.source === "builtin" ? "built-in" : "custom", agent.source === "builtin" ? "info" : "warn"),
+    ),
+    h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)", margin: 0 } }, agent.description || "No description."),
+    h("div.lt3-cluster", [c.statePill(agent.enabled ? "ready" : "idle"), c.pill(agent.type), c.pill(`v${agent.version || "1.0.0"}`)]),
+    agent.capabilities.length ? h("div.lt3-cluster", agent.capabilities.slice(0, 8).map((cap) => h("span.lt3-chip", cap))) : null,
+    h("div.lt3-row-2",
+      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => toggleAgent(ctx, agent) } }, c.icon(agent.enabled ? "toggle-right" : "toggle-left"), agent.enabled ? "Disable" : "Enable"),
+      agent.removable ? h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => removeAgent(ctx, agent) } }, c.icon("trash"), "Remove") : null,
+    ),
+  ), { interactive: false });
+}
+
+async function toggleAgent(ctx, agent) {
+  const res = await ctx.api.updateAgent(agent.id, { config: agent.config || {}, enabled: !agent.enabled });
+  ctx.toast(res && res.ok ? `${agent.name}: ${agent.enabled ? "disabled" : "enabled"}` : "Agent update unavailable", res && res.ok ? "ok" : "err");
+  if (res && res.ok) ctx.navigate("agents");
+}
+
+async function removeAgent(ctx, agent) {
+  const res = await ctx.api.removeAgent(agent.id);
+  ctx.toast(res && res.ok ? `Removed ${agent.name}` : "Agent remove unavailable", res && res.ok ? "ok" : "err");
+  if (res && res.ok) ctx.navigate("agents");
+}
+
 /* ── Agent card ──────────────────────────────────────────────────────────── */
 function agentCard(ctx, agent, byId) {
   const { h, icon, c } = ctx;
@@ -158,6 +242,22 @@ function normalize(data) {
   }));
 }
 
+function normalizeRegistry(data) {
+  const list = Array.isArray(data) ? data : (data && Array.isArray(data.agents) ? data.agents : []);
+  return list.map((agent, i) => ({
+    id: agent.id || `agent:${i}`,
+    name: agent.name || agent.id || `Agent ${i + 1}`,
+    type: agent.type || "custom",
+    version: agent.version || "1.0.0",
+    description: agent.description || "",
+    capabilities: Array.isArray(agent.capabilities) ? agent.capabilities : [],
+    source: agent.source || "user",
+    enabled: agent.enabled !== false,
+    removable: !!agent.removable,
+    config: agent.config || {},
+  }));
+}
+
 const AVAILABLE_STATES = new Set(["available", "ready", "active", "ok", "idle"]);
 function isAvailable(state) {
   return AVAILABLE_STATES.has(String(state).toLowerCase());

package/static/v3/js/views/{chat.718144ce.js → chat.c48fd9e2.js}

@@ -52,7 +52,7 @@ export async function render(ctx) {
 
   const groundChip = (key, label, icn) => h("button.lt3-chip", {
     type: "button", dataset: { active: String(state.grounding[key]) }, "aria-pressed": String(state.grounding[key]),
-    title: `Toggle ${label} grounding`,
+    title: `Show the ${label} signal in the retrieval-context panel`,
     on: { click: (e) => { state.grounding[key] = !state.grounding[key]; const b = e.currentTarget; b.dataset.active = String(state.grounding[key]); b.setAttribute("aria-pressed", String(state.grounding[key])); } },
   }, icon(icn), label);
 

package/static/v3/js/views/chat.js

@@ -52,7 +52,7 @@ export async function render(ctx) {
 
   const groundChip = (key, label, icn) => h("button.lt3-chip", {
     type: "button", dataset: { active: String(state.grounding[key]) }, "aria-pressed": String(state.grounding[key]),
-    title: `Toggle ${label} grounding`,
+    title: `Show the ${label} signal in the retrieval-context panel`,
     on: { click: (e) => { state.grounding[key] = !state.grounding[key]; const b = e.currentTarget; b.dataset.active = String(state.grounding[key]); b.setAttribute("aria-pressed", String(state.grounding[key])); } },
   }, icon(icn), label);
 

package/static/v3/js/views/{files.4935197e.js → files.8464634a.js}

@@ -61,11 +61,15 @@ function normalize(data) {
   }));
 }
 
+/** Document types the backend accepts (latticeai/services/upload_service.py). */
+const UPLOAD_ACCEPT = ".pdf,.docx,.xlsx,.pptx,.txt,.md,.csv";
+
 export async function render(ctx) {
   const { h, icon, api, c, navigate, toast } = ctx;
 
-  // Folder connection/watch needs the desktop local-agent connector, which is
-  // not enabled in this build. Say so plainly rather than implying it's coming.
+  // Connecting/watching a *folder* needs the desktop local-agent connector,
+  // which is not enabled in this build. Say so plainly. Manual document upload
+  // below works without it.
   const unavailableToast = () =>
     toast("Connecting a folder requires the Lattice desktop local agent — not available in this build.", "warn");
 
@@ -73,6 +77,56 @@ export async function render(ctx) {
   const srcSlot = h("span", c.sourceBadge("pending"));
   const tableHost = h("div", c.loading({ lines: 4 }));
 
+  // ── Manual upload (works in this build; no desktop agent required) ─────────
+  let busy = false;
+  const fileInput = h("input", {
+    type: "file", multiple: true, accept: UPLOAD_ACCEPT,
+    style: { display: "none" }, "aria-hidden": "true",
+    on: { change: (e) => uploadFiles(e.target.files) },
+  });
+  const pickFiles = () => { if (!busy) fileInput.click(); };
+  const slots = { statHost, srcSlot, tableHost, pickFiles };
+
+  async function uploadFiles(fileList) {
+    const files = Array.from(fileList || []);
+    if (!files.length || busy) return;
+    busy = true;
+    let ok = 0;
+    for (const file of files) {
+      toast(`Uploading “${file.name}”…`, "info");
+      const res = await api.uploadDocument(file);
+      if (res.ok && res.data && !res.data.detail && !res.data.error) {
+        ok++;
+      } else {
+        const detail = (res.data && (res.data.detail || res.data.error)) || "the backend is unavailable";
+        toast(`Could not ingest “${file.name}” — ${detail}.`, "warn");
+      }
+    }
+    fileInput.value = "";
+    busy = false;
+    if (ok) {
+      toast(`Indexed ${ok} document${ok === 1 ? "" : "s"} into the knowledge graph — now searchable in Chat and Hybrid Search.`, "ok");
+    }
+    hydrate(ctx, slots);
+  }
+
+  const dropZone = h("div.lt3-drop", {
+    on: {
+      dragover: (e) => { e.preventDefault(); dropZone.classList.add("is-dragover"); },
+      dragleave: () => dropZone.classList.remove("is-dragover"),
+      drop: (e) => { e.preventDefault(); dropZone.classList.remove("is-dragover"); uploadFiles(e.dataTransfer && e.dataTransfer.files); },
+    },
+  },
+    fileInput,
+    h("div.lt3-pillar__icon", icon("cloud-upload")),
+    h("div",
+      h("div", { style: { "font-weight": "var(--lt3-weight-semi)" } }, "Drag documents here, or upload manually"),
+      h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-sm)", "margin-top": "var(--lt3-space-1)" } },
+        "Lattice parses each file, chunks it, embeds it, and links it into the knowledge graph. PDF · DOCX · XLSX · PPTX · TXT · MD · CSV, up to 10 MB each."),
+    ),
+    h("button.lt3-btn.lt3-btn--primary", { type: "button", on: { click: pickFiles } }, icon("upload"), "Upload files"),
+  );
+
   const root = h("div.lt3-stack-6",
     c.viewHeader({
       eyebrow: "Data",
@@ -80,19 +134,12 @@ export async function render(ctx) {
       sub: "Connected sources and the documents Lattice has indexed for retrieval. Everything stays on this machine.",
       actions: [
         h("button.lt3-btn.lt3-btn--ghost", { on: { click: () => navigate("knowledge-graph") } }, icon("chart-dots-3"), "View graph"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: pickFiles } }, icon("upload"), "Upload files"),
         h("button.lt3-btn.lt3-btn--ghost", { title: "Requires the desktop local agent (not in this build)", on: { click: unavailableToast } }, icon("folder-plus"), "Connect folder"),
       ],
     }),
     statHost,
-    h("div.lt3-drop",
-      h("div.lt3-pillar__icon", icon("cloud-upload")),
-      h("div",
-        h("div", { style: { "font-weight": "var(--lt3-weight-semi)" } }, "Drag files or connect a folder"),
-        h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-sm)", "margin-top": "var(--lt3-space-1)" } },
-          "Lattice watches the source, chunks it, embeds it, and links it into the knowledge graph."),
-      ),
-      h("button.lt3-btn.lt3-btn--ghost", { title: "Requires the desktop local agent (not in this build)", on: { click: unavailableToast } }, icon("folder-plus"), "Choose folder"),
-    ),
+    dropZone,
     c.panel({
       head: h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", width: "100%" } },
         h("div",
@@ -105,13 +152,13 @@ export async function render(ctx) {
     }),
   );
 
-  hydrate(ctx, { statHost, srcSlot, tableHost });
+  hydrate(ctx, slots);
   return root;
 }
 
 async function hydrate(ctx, slots) {
   const { h, icon, api, c, toast } = ctx;
-  const { statHost, srcSlot, tableHost } = slots;
+  const { statHost, srcSlot, tableHost, pickFiles } = slots;
 
   const probe = await api.get("/workspace/indexing", { sources: [], totals: {} });
   const liveFiles = probe.ok && probe.data ? normalize(probe.data) : null;
@@ -137,11 +184,10 @@ async function hydrate(ctx, slots) {
     tableHost.replaceChildren(c.emptyState({
       icon: "folder-off",
       title: "No documents indexed yet",
-      body: "Connect a folder and Lattice will index it for hybrid retrieval.",
-      action: h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm",
-        { title: "Requires the desktop local agent (not in this build)",
-          on: { click: () => toast("Connecting a folder requires the Lattice desktop local agent — not available in this build.", "warn") } },
-        icon("folder-plus"), "Connect folder"),
+      body: "Upload a document and Lattice will parse, embed, and link it into the knowledge graph for hybrid retrieval.",
+      action: h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm",
+        { on: { click: () => (pickFiles ? pickFiles() : null) } },
+        icon("upload"), "Upload files"),
     }));
     return;
   }

package/static/v3/js/views/files.js

@@ -61,11 +61,15 @@ function normalize(data) {
   }));
 }
 
+/** Document types the backend accepts (latticeai/services/upload_service.py). */
+const UPLOAD_ACCEPT = ".pdf,.docx,.xlsx,.pptx,.txt,.md,.csv";
+
 export async function render(ctx) {
   const { h, icon, api, c, navigate, toast } = ctx;
 
-  // Folder connection/watch needs the desktop local-agent connector, which is
-  // not enabled in this build. Say so plainly rather than implying it's coming.
+  // Connecting/watching a *folder* needs the desktop local-agent connector,
+  // which is not enabled in this build. Say so plainly. Manual document upload
+  // below works without it.
   const unavailableToast = () =>
     toast("Connecting a folder requires the Lattice desktop local agent — not available in this build.", "warn");
 
@@ -73,6 +77,56 @@ export async function render(ctx) {
   const srcSlot = h("span", c.sourceBadge("pending"));
   const tableHost = h("div", c.loading({ lines: 4 }));
 
+  // ── Manual upload (works in this build; no desktop agent required) ─────────
+  let busy = false;
+  const fileInput = h("input", {
+    type: "file", multiple: true, accept: UPLOAD_ACCEPT,
+    style: { display: "none" }, "aria-hidden": "true",
+    on: { change: (e) => uploadFiles(e.target.files) },
+  });
+  const pickFiles = () => { if (!busy) fileInput.click(); };
+  const slots = { statHost, srcSlot, tableHost, pickFiles };
+
+  async function uploadFiles(fileList) {
+    const files = Array.from(fileList || []);
+    if (!files.length || busy) return;
+    busy = true;
+    let ok = 0;
+    for (const file of files) {
+      toast(`Uploading “${file.name}”…`, "info");
+      const res = await api.uploadDocument(file);
+      if (res.ok && res.data && !res.data.detail && !res.data.error) {
+        ok++;
+      } else {
+        const detail = (res.data && (res.data.detail || res.data.error)) || "the backend is unavailable";
+        toast(`Could not ingest “${file.name}” — ${detail}.`, "warn");
+      }
+    }
+    fileInput.value = "";
+    busy = false;
+    if (ok) {
+      toast(`Indexed ${ok} document${ok === 1 ? "" : "s"} into the knowledge graph — now searchable in Chat and Hybrid Search.`, "ok");
+    }
+    hydrate(ctx, slots);
+  }
+
+  const dropZone = h("div.lt3-drop", {
+    on: {
+      dragover: (e) => { e.preventDefault(); dropZone.classList.add("is-dragover"); },
+      dragleave: () => dropZone.classList.remove("is-dragover"),
+      drop: (e) => { e.preventDefault(); dropZone.classList.remove("is-dragover"); uploadFiles(e.dataTransfer && e.dataTransfer.files); },
+    },
+  },
+    fileInput,
+    h("div.lt3-pillar__icon", icon("cloud-upload")),
+    h("div",
+      h("div", { style: { "font-weight": "var(--lt3-weight-semi)" } }, "Drag documents here, or upload manually"),
+      h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-sm)", "margin-top": "var(--lt3-space-1)" } },
+        "Lattice parses each file, chunks it, embeds it, and links it into the knowledge graph. PDF · DOCX · XLSX · PPTX · TXT · MD · CSV, up to 10 MB each."),
+    ),
+    h("button.lt3-btn.lt3-btn--primary", { type: "button", on: { click: pickFiles } }, icon("upload"), "Upload files"),
+  );
+
   const root = h("div.lt3-stack-6",
     c.viewHeader({
       eyebrow: "Data",
@@ -80,19 +134,12 @@ export async function render(ctx) {
       sub: "Connected sources and the documents Lattice has indexed for retrieval. Everything stays on this machine.",
       actions: [
         h("button.lt3-btn.lt3-btn--ghost", { on: { click: () => navigate("knowledge-graph") } }, icon("chart-dots-3"), "View graph"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: pickFiles } }, icon("upload"), "Upload files"),
         h("button.lt3-btn.lt3-btn--ghost", { title: "Requires the desktop local agent (not in this build)", on: { click: unavailableToast } }, icon("folder-plus"), "Connect folder"),
       ],
     }),
     statHost,
-    h("div.lt3-drop",
-      h("div.lt3-pillar__icon", icon("cloud-upload")),
-      h("div",
-        h("div", { style: { "font-weight": "var(--lt3-weight-semi)" } }, "Drag files or connect a folder"),
-        h("p.lt3-faint", { style: { "font-size": "var(--lt3-text-sm)", "margin-top": "var(--lt3-space-1)" } },
-          "Lattice watches the source, chunks it, embeds it, and links it into the knowledge graph."),
-      ),
-      h("button.lt3-btn.lt3-btn--ghost", { title: "Requires the desktop local agent (not in this build)", on: { click: unavailableToast } }, icon("folder-plus"), "Choose folder"),
-    ),
+    dropZone,
     c.panel({
       head: h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", width: "100%" } },
         h("div",
@@ -105,13 +152,13 @@ export async function render(ctx) {
     }),
   );
 
-  hydrate(ctx, { statHost, srcSlot, tableHost });
+  hydrate(ctx, slots);
   return root;
 }
 
 async function hydrate(ctx, slots) {
   const { h, icon, api, c, toast } = ctx;
-  const { statHost, srcSlot, tableHost } = slots;
+  const { statHost, srcSlot, tableHost, pickFiles } = slots;
 
   const probe = await api.get("/workspace/indexing", { sources: [], totals: {} });
   const liveFiles = probe.ok && probe.data ? normalize(probe.data) : null;
@@ -137,11 +184,10 @@ async function hydrate(ctx, slots) {
     tableHost.replaceChildren(c.emptyState({
       icon: "folder-off",
       title: "No documents indexed yet",
-      body: "Connect a folder and Lattice will index it for hybrid retrieval.",
-      action: h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm",
-        { title: "Requires the desktop local agent (not in this build)",
-          on: { click: () => toast("Connecting a folder requires the Lattice desktop local agent — not available in this build.", "warn") } },
-        icon("folder-plus"), "Connect folder"),
+      body: "Upload a document and Lattice will parse, embed, and link it into the knowledge graph for hybrid retrieval.",
+      action: h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm",
+        { on: { click: () => (pickFiles ? pickFiles() : null) } },
+        icon("upload"), "Upload files"),
     }));
     return;
   }

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

@@ -0,0 +1,99 @@
+/* ============================================================================
+ * 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 }));
+
+  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,
+  );
+
+  load();
+  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("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: () => 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"); }
+  }
+}

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

@@ -0,0 +1,99 @@
+/* ============================================================================
+ * 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 }));
+
+  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,
+  );
+
+  load();
+  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("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: () => 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"); }
+  }
+}