ltcai 2.2.7 → 3.1.0

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

@@ -0,0 +1,186 @@
+/* ============================================================================
+ * View: Files — connected sources & indexed documents.
+ * 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 { timeAgo } from "../core/dom.js";
+
+/** Tabler glyph per file kind — keeps the table scannable. */
+const KIND_ICON = {
+  markdown: "file-text",
+  config: "settings",
+  image: "photo",
+  data: "table",
+  default: "file",
+};
+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`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let v = n / 1024, i = 0;
+  while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
+  return `${v.toFixed(v >= 100 || Number.isInteger(v) ? 0 : 1)} ${units[i]}`;
+}
+
+/** 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) => ({
+    name: f.name || (f.path ? String(f.path).split("/").pop() : "untitled"),
+    kind: f.kind || "default",
+    size: Number(f.size) || 0,
+    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,
+  }));
+}
+
+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.
+  const unavailableToast = () =>
+    toast("Connecting a folder requires the Lattice desktop local agent — not available in this build.", "warn");
+
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const srcSlot = h("span", c.sourceBadge("pending"));
+  const tableHost = h("div", c.loading({ lines: 4 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Data",
+      title: "Files",
+      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--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"),
+    ),
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", width: "100%" } },
+        h("div",
+          h("div.lt3-eyebrow", "Index"),
+          h("h3.lt3-panel__title", "Indexed documents"),
+        ),
+        srcSlot,
+      ),
+      children: tableHost,
+    }),
+  );
+
+  hydrate(ctx, { statHost, srcSlot, tableHost });
+  return root;
+}
+
+async function hydrate(ctx, slots) {
+  const { h, icon, api, c, toast } = ctx;
+  const { statHost, srcSlot, tableHost } = slots;
+
+  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 ──────────────────────────────────────────────────────────
+  const indexedCount = files.filter((f) => f.indexed).length;
+  const sourceCount = new Set(
+    files.map((f) => (f.path.includes("/") ? f.path.split("/")[0] : "root")),
+  ).size;
+  const totalBytes = files.reduce((sum, f) => sum + (f.size || 0), 0);
+  statHost.replaceChildren(
+    c.stat({ label: "Total files", value: c.fmtNum(files.length), icon: "files" }),
+    c.stat({ label: "Indexed", value: c.fmtNum(indexedCount), icon: "circle-check" }),
+    c.stat({ label: "Sources", value: c.fmtNum(sourceCount), icon: "database" }),
+    c.stat({ label: "Total size", value: humanSize(totalBytes), icon: "weight" }),
+  );
+
+  // ── Empty state ─────────────────────────────────────────────────────────────
+  if (!files.length) {
+    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"),
+    }));
+    return;
+  }
+
+  // ── Table ───────────────────────────────────────────────────────────────────
+  const columns = [
+    {
+      key: "name", label: "Name",
+      render: (row) => h("div.lt3-row-2",
+        h("span.lt3-filerow__icon", icon(iconForKind(row.kind))),
+        h("span", { style: { "font-weight": "var(--lt3-weight-medium)" } }, row.name),
+      ),
+    },
+    {
+      key: "path", label: "Path", width: "30%",
+      render: (row) => h("span.lt3-mono.lt3-faint", row.path || "—"),
+    },
+    {
+      key: "count", label: "Indexed", width: "92px",
+      render: (row) => h("span.lt3-mono", row.count ? c.fmtNum(row.count) : humanSize(row.size)),
+    },
+    {
+      key: "status", label: "Status", width: "120px",
+      render: (row) => c.statePill(row.indexed ? "indexed" : (row.status || "pending")),
+    },
+    {
+      key: "updated", label: "Updated", width: "104px",
+      render: (row) => h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
+        row.updated ? timeAgo(row.updated) : "—"),
+    },
+    {
+      key: "_actions", label: "", width: "44px",
+      render: (row) => h("button.lt3-iconbtn.lt3-iconbtn--sm", {
+        "aria-label": `Actions for ${row.name}`,
+        title: "Requires the desktop local agent (not in this build)",
+        on: { click: () => toast(`Per-file actions require the Lattice desktop local agent — not available in this build.`, "warn") },
+      }, icon("dots-vertical")),
+    },
+  ];
+
+  tableHost.replaceChildren(c.table(columns, files));
+}

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/home.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/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)}`;
+}