ltcai 3.0.1 → 3.2.0

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

@@ -1,15 +1,14 @@
 /* ============================================================================
  * View: Files — connected sources & indexed documents.
- * Lists the documents the workspace has ingested, with a human-readable size
- * roll-up and per-file index state. Data comes from /local/list (live) and
- * degrades to clearly-badged sample files when the local agent isn't reachable.
+ * Lists the sources the workspace has indexed, with a human-readable status
+ * roll-up. Data comes from /workspace/indexing (live); when indexing is
+ * unavailable, the table renders an empty unavailable state.
  *
  * View contract (shared by all views):
  *   export async function render(ctx) -> single DOM node
  *   ctx = { h, icon, api, store, c, route, params, navigate, toast }
  * ========================================================================== */
 
-import * as fx from "../core/fixtures.js";
 import { timeAgo } from "../core/dom.js";
 
 /** Tabler glyph per file kind — keeps the table scannable. */
@@ -24,6 +23,7 @@ const iconForKind = (k) => KIND_ICON[k] || KIND_ICON.default;
 
 /** Bytes → compact human string (1.0 KB / 4.7 KB / 180 KB / 1.2 MB). */
 function humanSize(bytes) {
+  if (bytes === null || bytes === undefined || bytes === "") return "—";
   const n = Number(bytes);
   if (!Number.isFinite(n) || n < 0) return "—";
   if (n < 1024) return `${n} B`;
@@ -33,8 +33,20 @@ function humanSize(bytes) {
   return `${v.toFixed(v >= 100 || Number.isInteger(v) ? 0 : 1)} ${units[i]}`;
 }
 
-/** Live shape may be {files:[...]} or a bare array — normalize defensively. */
+/** Live shape is {sources:[...]}; legacy {files:[...]} payloads normalize too. */
 function normalize(data) {
+  if (data && Array.isArray(data.sources)) {
+    return data.sources.map((source) => ({
+      name: source.label || source.id || "local source",
+      kind: "default",
+      size: null,
+      path: source.root_path || source.id || "",
+      indexed: Number(source.success_count || 0) > 0,
+      updated: source.last_run_at || source.updated_at || null,
+      count: Number(source.success_count || 0),
+      status: source.status || (source.watch_active ? "watching" : "idle"),
+    }));
+  }
   const list = Array.isArray(data) ? data : (data && Array.isArray(data.files) ? data.files : null);
   if (!list) return null;
   return list.map((f) => ({
@@ -44,6 +56,8 @@ function normalize(data) {
     path: f.path || f.name || "",
     indexed: f.indexed === true,
     updated: f.updated || f.modified || f.mtime || null,
+    count: Number(f.count || 0),
+    status: f.status || null,
   }));
 }
 
@@ -99,16 +113,10 @@ async function hydrate(ctx, slots) {
   const { h, icon, api, c, toast } = ctx;
   const { statHost, srcSlot, tableHost } = slots;
 
-  // /local/list is permission-gated: it requires a `path` query param and, in
-  // the browser, returns a permission-request object rather than a bare file
-  // list. Probe it with the required param (avoids a 422) and only treat an
-  // actual listing as live — otherwise show clearly-badged sample documents.
-  const probe = await api.raw("/local/list?path=" + encodeURIComponent("."));
-  const liveFiles = probe.ok && probe.data && !probe.data.permission_required
-    ? normalize(probe.data)
-    : null;
-  const source = liveFiles ? "live" : "placeholder";
-  const files = liveFiles || normalize(fx.FILES) || [];
+  const probe = await api.get("/workspace/indexing", { sources: [], totals: {} });
+  const liveFiles = probe.ok && probe.data ? normalize(probe.data) : null;
+  const source = probe.source || (liveFiles ? "live" : "unavailable");
+  const files = liveFiles || [];
   srcSlot.replaceChildren(c.sourceBadge(source));
 
   // ── Stat roll-up ──────────────────────────────────────────────────────────
@@ -152,14 +160,12 @@ async function hydrate(ctx, slots) {
       render: (row) => h("span.lt3-mono.lt3-faint", row.path || "—"),
     },
     {
-      key: "size", label: "Size", width: "92px",
-      render: (row) => h("span.lt3-mono", humanSize(row.size)),
+      key: "count", label: "Indexed", width: "92px",
+      render: (row) => h("span.lt3-mono", row.count ? c.fmtNum(row.count) : humanSize(row.size)),
     },
     {
-      key: "indexed", label: "Indexed", width: "120px",
-      render: (row) => row.indexed
-        ? c.statePill("indexed")
-        : c.statePill("pending"),
+      key: "status", label: "Status", width: "120px",
+      render: (row) => c.statePill(row.indexed ? "indexed" : (row.status || "pending")),
     },
     {
       key: "updated", label: "Updated", width: "104px",

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

@@ -0,0 +1,119 @@
+/* ============================================================================
+ * View: Home — the workspace command center.
+ * Leads with the product identity (the retrieval lattice: Knowledge Graph +
+ * Vector Index + Hybrid Search) and routes into every primary area.
+ *
+ * View contract (shared by all views):
+ *   export async function render(ctx) -> single DOM node
+ *   ctx = { h, icon, api, store, c, route, params, navigate, toast }
+ * ========================================================================== */
+
+export async function render(ctx) {
+  const { h, icon, api, store, c, navigate } = ctx;
+  const ws = store.activeWorkspace();
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Local-first AI workspace",
+      title: `Welcome to ${ws.name}`,
+      sub: "Everything you index stays on this machine. Ask questions, explore the graph, and fuse structure with semantics — no data leaves your computer.",
+      actions: [
+        h("button.lt3-btn.lt3-btn--ghost", { on: { click: () => navigate("hybrid-search") } }, icon("arrows-join"), "Hybrid search"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: () => navigate("chat", { new: "1" }) } }, icon("message-plus"), "New chat"),
+      ],
+    }),
+    buildHero(ctx),
+    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 })),
+    ),
+    h("section",
+      c.sectionHead("Jump back in"),
+      buildQuickGrid(ctx),
+    ),
+    h("div.lt3-grid-2",
+      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 })) }),
+    ),
+  );
+
+  hydrate(ctx, root);
+  return root;
+}
+
+function buildHero({ h, icon, navigate }) {
+  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"),
+    ),
+  );
+}
+
+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: "models", icon: "cpu", title: "Models", desc: "Local MLX runtime." },
+];
+
+function buildQuickGrid({ h, icon, navigate }) {
+  return h("div.lt3-quickgrid",
+    QUICK.map((q) => h("button.lt3-quick", { style: { "text-align": "left" }, on: { click: () => navigate(q.key) } },
+      h("div.lt3-quick__icon", icon(q.icon)),
+      h("div.lt3-quick__title", q.title),
+      h("div.lt3-quick__desc", q.desc),
+    )),
+  );
+}
+
+async function hydrate(ctx, root) {
+  const { h, icon, api, store, c } = ctx;
+  const numFmt = c.fmtNum;
+
+  // Index status → pillars + sources + topbar chip.
+  const idx = store.get().indexStatus
+    ? { data: store.get().indexStatus, source: "live" }
+    : await api.indexStatus().then((r) => { store.setIndexStatus(r.data); return r; });
+
+  root.querySelector("#home-idx-src")?.replaceChildren(c.sourceBadge(idx.source));
+  root.querySelector("#home-pillars")?.replaceChildren(c.pillars(idx.data));
+
+  const sources = (idx.data && idx.data.sources) || [];
+  const srcHost = root.querySelector("#home-sources");
+  if (srcHost) {
+    srcHost.replaceChildren(
+      sources.length
+        ? h("div.lt3-stack-3", sources.map((s) => h("div.lt3-stack-2",
+            h("div.lt3-row", { style: { "justify-content": "space-between" } },
+              h("div.lt3-row-2", icon("database"), h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, s.label)),
+              c.statePill(s.state),
+            ),
+            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." }),
+    );
+  }
+
+  // Workspace counts.
+  const os = await api.workspaceOs();
+  const counts = (os.data && os.data.counts) || {};
+  const statHost = root.querySelector("#home-stats");
+  if (statHost) {
+    statHost.replaceChildren(
+      h("div.lt3-statrow",
+        c.stat({ label: "Memories", value: numFmt(counts.memories), icon: "brain" }),
+        c.stat({ label: "Traces", value: numFmt(counts.traces), icon: "route" }),
+        c.stat({ label: "Workflows", value: numFmt(counts.workflows), icon: "git-branch" }),
+        c.stat({ label: "Skills", value: numFmt(counts.skills), icon: "puzzle" }),
+      ),
+      h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.sourceBadge(os.source)),
+    );
+  }
+}

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"); }
+  }
+}

package/static/v3/js/views/hybrid-search.b22b97e0.js

@@ -0,0 +1,195 @@
+/* ============================================================================
+ * View: Hybrid Search — the fused-retrieval surface (headline capability).
+ * Runs api.hybridSearch(query, {weights}) and shows, per result, how keyword,
+ * local vector and graph signals combine into the fused score. Missing
+ * endpoints render an unavailable state.
+ * ========================================================================== */
+
+const MODES = [
+  { key: "hybrid", label: "Hybrid" },
+  { key: "vector", label: "Vector" },
+  { key: "graph", label: "Graph" },
+  { key: "keyword", label: "Keyword" },
+];
+
+const MODE_WEIGHTS = {
+  hybrid: { keyword: 0.35, vector: 0.40, graph: 0.25 },
+  vector: { keyword: 0, vector: 1, graph: 0 },
+  graph: { keyword: 0, vector: 0, graph: 1 },
+  keyword: { keyword: 1, vector: 0, graph: 0 },
+};
+
+const EXAMPLES = ["retrieval design", "vector index config", "rank fusion", "graph adjacency"];
+
+const SIGNALS = [
+  { key: "vector", label: "Vector", variant: "vector", icon: "grid-dots", desc: "Local vector similarity from the configured embedding index." },
+  { key: "keyword", label: "Keyword", variant: "", icon: "abc", desc: "Lexical overlap — exact terms and phrases." },
+  { key: "graph", label: "Graph", variant: "graph", icon: "chart-dots-3", desc: "Structural proximity in the knowledge graph." },
+];
+
+export async function render(ctx) {
+  const { h, icon, api, store, c } = ctx;
+
+  const state = { query: "", mode: "hybrid", source: "pending" };
+
+  let activeWeights = MODE_WEIGHTS.hybrid;
+  api.indexStatus().then((r) => { if (r.data) store.setIndexStatus(r.data); });
+
+  const input = h("input", {
+    type: "text", placeholder: "Search your workspace…", "aria-label": "Search query",
+    on: { keydown: (e) => { if (e.key === "Enter") run(input.value); } },
+  });
+  const weightPill = h("span", c.pill(weightLabel(activeWeights), "info"));
+  const srcSlot = h("span", c.sourceBadge("pending"));
+  const resultsHost = h("div.lt3-stack-6", introBlock());
+
+  const seg = h("div.lt3-fusion", { role: "tablist", "aria-label": "Fusion mode" },
+    MODES.map((m) => h("button", {
+      type: "button", role: "tab",
+      dataset: { active: String(m.key === state.mode) },
+      "aria-selected": String(m.key === state.mode),
+      on: { click: () => { state.mode = m.key; syncSeg(); if (state.query) run(state.query); } },
+    }, m.label)),
+  );
+  function syncSeg() {
+    seg.querySelectorAll("button").forEach((b, i) => {
+      const on = MODES[i].key === state.mode;
+      b.dataset.active = String(on); b.setAttribute("aria-selected", String(on));
+    });
+  }
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Retrieval · fusion",
+      title: "Hybrid Search",
+      sub: "Fuse keyword recall, local vector similarity, and knowledge-graph structure. Each result shows the contributing signals behind its rank.",
+      actions: [srcSlot],
+    }),
+    h("section.lt3-search-hero",
+      h("div.lt3-row-2", { style: { "align-items": "stretch" } },
+        h("div.lt3-search", { style: { flex: "1", height: "46px" } }, icon("search"), input),
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--lg", { on: { click: () => run(input.value) } }, icon("arrows-join"), "Search"),
+      ),
+      h("div.lt3-row", { style: { "justify-content": "space-between", "flex-wrap": "wrap", gap: "var(--lt3-space-3)" } },
+        seg,
+        h("div.lt3-row-2", h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, "Weights"), weightPill),
+      ),
+      h("div.lt3-cluster",
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, "Try"),
+        EXAMPLES.map((q) => h("button.lt3-chip", { type: "button", on: { click: () => run(q) } }, icon("search"), q)),
+      ),
+    ),
+    resultsHost,
+  );
+
+  /* ── search flow ───────────────────────────────────────────────────────── */
+  async function run(rawQuery) {
+    const q = String(rawQuery || "").trim();
+    if (!q) { input.focus(); return; }
+    state.query = q;
+    if (input.value !== q) input.value = q;
+    resultsHost.replaceChildren(
+      c.sectionHead(`Results for “${q}”`, srcSlot.cloneNode(true)),
+      c.loading({ lines: 4 }),
+    );
+    activeWeights = MODE_WEIGHTS[state.mode] || MODE_WEIGHTS.hybrid;
+    weightPill.replaceChildren(c.pill(weightLabel(activeWeights), "info"));
+    const res = await api.hybridSearch(q, { weights: activeWeights });
+    if (res.weights) {
+      activeWeights = res.weights;
+      weightPill.replaceChildren(c.pill(weightLabel(activeWeights), "info"));
+    }
+    state.source = res.source;
+    srcSlot.replaceChildren(c.sourceBadge(res.source));
+    renderResults(res);
+  }
+
+  function renderResults(res) {
+    if (!res.ok) {
+      resultsHost.replaceChildren(c.errorState(res.error || "Search failed", () => run(state.query)));
+      return;
+    }
+    const rows = Array.isArray(res.data) ? res.data : [];
+    if (!rows.length) {
+      resultsHost.replaceChildren(
+        c.sectionHead(`No results for “${state.query}”`, c.sourceBadge(res.source)),
+        c.emptyState({ icon: "search-off", title: "Nothing matched", body: "Try broader terms, or switch the fusion mode above." }),
+      );
+      return;
+    }
+    resultsHost.replaceChildren(
+      c.sectionHead(
+        `${rows.length} ${rows.length === 1 ? "result" : "results"}`,
+        c.pill(MODES.find((m) => m.key === state.mode).label, "info"),
+        c.sourceBadge(res.source),
+      ),
+      h("div.lt3-stack-3", rows.map((r) => resultCard(r))),
+    );
+  }
+
+  function resultCard(r) {
+    const score = typeof r.score === "number" ? r.score : (0.5 * (r.vector || 0) + 0.2 * (r.lexical || 0) + 0.3 * (r.graph || 0));
+    return h("article.lt3-result",
+      h("div.lt3-result__top",
+        h("div.lt3-result__title", { style: { flex: "1", "min-width": "0" } }, String(r.title || "Untitled")),
+        c.pill(`${(score).toFixed(2)} score`, "info", { dot: true }),
+      ),
+      h("div.lt3-faint.lt3-mono", { style: { "font-size": "var(--lt3-text-2xs)" } }, String(r.path || "")),
+      r.snippet && h("p.lt3-result__snippet", String(r.snippet)),
+      h("div.lt3-result__scores",
+        scoreBlock("Vector", r.vector, "vector"),
+        scoreBlock("Keyword", r.lexical, ""),
+        scoreBlock("Graph", r.graph, "graph"),
+      ),
+    );
+  }
+
+  function scoreBlock(label, value, variant) {
+    const v = Number(value) || 0;
+    return h("div.lt3-score",
+      h("div.lt3-score__row", h("span", label), h("b", v.toFixed(2))),
+      c.meter(v, variant),
+    );
+  }
+
+  /* ── pre-search intro ──────────────────────────────────────────────────── */
+  function introBlock() {
+    return h("div.lt3-stack-6",
+      c.emptyState({
+        icon: "arrows-join",
+        title: "Search across structure and vector signals",
+        body: "Enter a query above. Results show keyword, local vector, and graph scores before fusion.",
+      }),
+      h("section",
+        c.sectionHead("How fusion scores a match"),
+        h("div.lt3-grid-3",
+          SIGNALS.map((s) => signalCard(s)),
+        ),
+      ),
+    );
+  }
+
+  function signalCard(s) {
+    const tint = s.variant === "vector" ? "var(--lt3-pillar-vector)"
+      : s.variant === "graph" ? "var(--lt3-pillar-graph)"
+      : "var(--accent-3)";
+    return c.card(
+      h("div.lt3-stack-3",
+        h("div.lt3-row-2",
+          h("span.lt3-result__title", { style: { display: "grid", "place-items": "center", width: "32px", height: "32px", "border-radius": "var(--lt3-radius-sm)", background: `color-mix(in srgb, ${tint} 16%, transparent)`, color: tint } }, icon(s.icon)),
+          h("b", s.label),
+        ),
+        h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } }, s.desc),
+        c.meter(s.key === "graph" ? 0.85 : s.key === "vector" ? 0.7 : 0.55, s.variant),
+      ),
+      { flat: true },
+    );
+  }
+
+  return root;
+}
+
+function weightLabel(weights) {
+  const w = { ...MODE_WEIGHTS.hybrid, ...(weights || {}) };
+  return `K ${Number(w.keyword || 0).toFixed(2)} · V ${Number(w.vector || 0).toFixed(2)} · G ${Number(w.graph || 0).toFixed(2)}`;
+}

package/static/v3/js/views/hybrid-search.js

@@ -2,7 +2,7 @@
  * View: Hybrid Search — the fused-retrieval surface (headline capability).
  * Runs api.hybridSearch(query, {weights}) and shows, per result, how keyword,
  * local vector and graph signals combine into the fused score. Missing
- * endpoints degrade to clearly-badged sample data.
+ * endpoints render an unavailable state.
  * ========================================================================== */
 
 const MODES = [