ltcai 3.1.0 → 3.2.0

package/static/v3/js/core/{routes.f935dd50.js → routes.07ad6696.js}

@@ -14,6 +14,7 @@ export const GROUPS = [
   { id: "retrieval", label: "Retrieval" },
   { id: "data", label: "Data" },
   { id: "compute", label: "Compute" },
+  { id: "platform", label: "Platform" },
   { id: "system", label: "System" },
   { id: "admin", label: "Administration", adminOnly: true },
 ];
@@ -30,6 +31,7 @@ export const ROUTES = [
   // Retrieval (the product identity)
   { key: "knowledge-graph", label: "Knowledge Graph", icon: "chart-dots-3", group: "retrieval", minMode: "basic", view: "knowledge-graph", title: "Knowledge Graph", desc: "Entities and relations extracted from your workspace." },
   { key: "hybrid-search", label: "Hybrid Search", icon: "arrows-join", group: "retrieval", minMode: "basic", view: "hybrid-search", title: "Hybrid Search", desc: "Graph structure fused with vector similarity." },
+  { key: "memory", label: "Memory", icon: "brain", group: "retrieval", minMode: "basic", view: "memory", title: "Memory", desc: "Long-term workspace, project, agent, and conversation memory." },
 
   // Data
   { key: "files", label: "Files", icon: "folders", group: "data", minMode: "basic", view: "files", title: "Files", desc: "Connected sources and indexed documents." },
@@ -37,9 +39,18 @@ export const ROUTES = [
 
   // Compute
   { key: "agents", label: "Agents", icon: "robot", group: "compute", minMode: "advanced", view: "agents", title: "Agents", desc: "Multi-agent roles, runs, and handoffs." },
+  { key: "workflows", label: "Workflows", icon: "sitemap", group: "compute", minMode: "advanced", view: "workflows", title: "Workflow Agents", desc: "Trigger → agent chain → tools → memory → result." },
+  { key: "planning", label: "Planning", icon: "target-arrow", group: "compute", minMode: "advanced", view: "planning", title: "Autonomous Planning", desc: "Goal → plan → execute → review → replan." },
   { key: "models", label: "Models", icon: "cpu", group: "compute", minMode: "basic", view: "models", title: "Models", desc: "Local MLX models and embeddings." },
   { key: "my-computer", label: "My Computer", icon: "device-desktop-analytics", group: "compute", minMode: "advanced", view: "my-computer", title: "My Computer", desc: "Local hardware, memory, and runtime." },
 
+  // Platform (the agent ecosystem)
+  { key: "marketplace", label: "Marketplace", icon: "building-store", group: "platform", minMode: "advanced", view: "marketplace", title: "Marketplace", desc: "Agent templates, agents, plugins, and skills." },
+  { key: "skills", label: "Skills", icon: "puzzle", group: "platform", minMode: "advanced", view: "skills", title: "Skills", desc: "Install, enable, and manage skills." },
+  { key: "hooks", label: "Hooks", icon: "webhook", group: "platform", minMode: "advanced", view: "hooks", title: "Hooks", desc: "Lifecycle hooks across runs, tools, and workflows." },
+  { key: "tools", label: "Tools", icon: "tools", group: "platform", minMode: "advanced", view: "tools", title: "Tool Registry", desc: "Local, workspace, and MCP tools with governance." },
+  { key: "mcp", label: "MCP", icon: "plug-connected", group: "platform", minMode: "advanced", view: "mcp", title: "MCP Manager", desc: "Connected MCP servers, available tools, and health." },
+
   // System
   { key: "settings", label: "Settings", icon: "settings", group: "system", minMode: "basic", view: "settings", title: "Settings", desc: "Appearance, workspace, and integrations." },
 

package/static/v3/js/core/routes.js

@@ -14,6 +14,7 @@ export const GROUPS = [
   { id: "retrieval", label: "Retrieval" },
   { id: "data", label: "Data" },
   { id: "compute", label: "Compute" },
+  { id: "platform", label: "Platform" },
   { id: "system", label: "System" },
   { id: "admin", label: "Administration", adminOnly: true },
 ];
@@ -30,6 +31,7 @@ export const ROUTES = [
   // Retrieval (the product identity)
   { key: "knowledge-graph", label: "Knowledge Graph", icon: "chart-dots-3", group: "retrieval", minMode: "basic", view: "knowledge-graph", title: "Knowledge Graph", desc: "Entities and relations extracted from your workspace." },
   { key: "hybrid-search", label: "Hybrid Search", icon: "arrows-join", group: "retrieval", minMode: "basic", view: "hybrid-search", title: "Hybrid Search", desc: "Graph structure fused with vector similarity." },
+  { key: "memory", label: "Memory", icon: "brain", group: "retrieval", minMode: "basic", view: "memory", title: "Memory", desc: "Long-term workspace, project, agent, and conversation memory." },
 
   // Data
   { key: "files", label: "Files", icon: "folders", group: "data", minMode: "basic", view: "files", title: "Files", desc: "Connected sources and indexed documents." },
@@ -37,9 +39,18 @@ export const ROUTES = [
 
   // Compute
   { key: "agents", label: "Agents", icon: "robot", group: "compute", minMode: "advanced", view: "agents", title: "Agents", desc: "Multi-agent roles, runs, and handoffs." },
+  { key: "workflows", label: "Workflows", icon: "sitemap", group: "compute", minMode: "advanced", view: "workflows", title: "Workflow Agents", desc: "Trigger → agent chain → tools → memory → result." },
+  { key: "planning", label: "Planning", icon: "target-arrow", group: "compute", minMode: "advanced", view: "planning", title: "Autonomous Planning", desc: "Goal → plan → execute → review → replan." },
   { key: "models", label: "Models", icon: "cpu", group: "compute", minMode: "basic", view: "models", title: "Models", desc: "Local MLX models and embeddings." },
   { key: "my-computer", label: "My Computer", icon: "device-desktop-analytics", group: "compute", minMode: "advanced", view: "my-computer", title: "My Computer", desc: "Local hardware, memory, and runtime." },
 
+  // Platform (the agent ecosystem)
+  { key: "marketplace", label: "Marketplace", icon: "building-store", group: "platform", minMode: "advanced", view: "marketplace", title: "Marketplace", desc: "Agent templates, agents, plugins, and skills." },
+  { key: "skills", label: "Skills", icon: "puzzle", group: "platform", minMode: "advanced", view: "skills", title: "Skills", desc: "Install, enable, and manage skills." },
+  { key: "hooks", label: "Hooks", icon: "webhook", group: "platform", minMode: "advanced", view: "hooks", title: "Hooks", desc: "Lifecycle hooks across runs, tools, and workflows." },
+  { key: "tools", label: "Tools", icon: "tools", group: "platform", minMode: "advanced", view: "tools", title: "Tool Registry", desc: "Local, workspace, and MCP tools with governance." },
+  { key: "mcp", label: "MCP", icon: "plug-connected", group: "platform", minMode: "advanced", view: "mcp", title: "MCP Manager", desc: "Connected MCP servers, available tools, and health." },
+
   // System
   { key: "settings", label: "Settings", icon: "settings", group: "system", minMode: "basic", view: "settings", title: "Settings", desc: "Appearance, workspace, and integrations." },
 

package/static/v3/js/core/{shell.1b6199d6.js → shell.ea0b9ae5.js}

@@ -7,10 +7,10 @@
 
 import { h, icon, $, $$ } from "./dom.a2773eb0.js";
 import { store } from "./store.34ebd5e6.js";
-import { api } from "./api.22a41d42.js";
+import { api } from "./api.603b978f.js";
 import * as c from "./components.4c83e0a9.js";
 import { createRouter } from "./router.584570f2.js";
-import { GROUPS, ROUTES, ROUTE_BY_KEY, MODE_RANK, visibleRoutes, loadView } from "./routes.f935dd50.js";
+import { GROUPS, ROUTES, ROUTE_BY_KEY, MODE_RANK, visibleRoutes, loadView } from "./routes.07ad6696.js";
 
 const MODES = [
   { key: "basic", label: "Basic", icon: "circle" },

package/static/v3/js/views/{agents.14e48bdd.js → agents.c373d48c.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/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/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"); }
+  }
+}