ltcai 3.2.0 → 3.4.0

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

@@ -1,8 +1,11 @@
 /* ============================================================================
- * 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: Files — uploaded documents, connected folders & folder watch.
+ * The headline table lists the documents Lattice has actually ingested
+ * (/knowledge-graph/documents, live) with a per-doc index-state pill. A manual
+ * upload drop zone ingests files on-device, and Connect Folder indexes a local
+ * directory (+ watches it for changes) over the on-device runtime. When a
+ * surface is unavailable its panel renders an honest empty/unavailable state —
+ * no counts or statuses are fabricated.
  *
  * View contract (shared by all views):
  *   export async function render(ctx) -> single DOM node
@@ -11,15 +14,15 @@
 
 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",
+/** Tabler glyph per uploaded-document extension. */
+const EXT_ICON = {
+  pdf: "file-type-pdf", docx: "file-type-docx", doc: "file-text",
+  xlsx: "file-spreadsheet", xls: "file-spreadsheet", csv: "table",
+  pptx: "presentation", ppt: "presentation",
+  md: "file-text", txt: "file-text", json: "file-code",
+  png: "photo", jpg: "photo", jpeg: "photo", gif: "photo",
 };
-const iconForKind = (k) => KIND_ICON[k] || KIND_ICON.default;
+const iconForExt = (ext) => EXT_ICON[String(ext || "").replace(/^\./, "").toLowerCase()] || "file";
 
 /** Bytes → compact human string (1.0 KB / 4.7 KB / 180 KB / 1.2 MB). */
 function humanSize(bytes) {
@@ -33,45 +36,95 @@ function humanSize(bytes) {
   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,
-  }));
-}
+/** 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.
-  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 foldersSrc = h("span", c.sourceBadge("pending"));
+  const foldersHost = h("div", c.loading({ lines: 3 }));
+
+  // ── 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, foldersSrc, foldersHost, pickFiles, connectFolder };
+
+  // ── Connect Folder — index a local directory on-device and watch it ────────
+  // Available now via the on-device runtime (one call does
+  // request → self-approve → index + watch). No desktop agent required.
+  async function connectFolder() {
+    if (busy) return;
+    const path = window.prompt("Connect a local folder to index (absolute path)", "~/Documents");
+    if (!path || !String(path).trim()) return;
+    const target = String(path).trim();
+    busy = true;
+    toast(`Connecting “${target}” — indexing on-device…`, "info");
+    const res = await api.connectFolder(target, { watch: true });
+    busy = false;
+    if (res.ok) {
+      toast(`Connected and indexing ${target} — now watched for changes.`, "ok");
+      hydrate(ctx, slots);
+    } else {
+      toast(res.error || "Could not connect the folder.", "warn");
+    }
+  }
+
+  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("div.lt3-drop__meta",
+      c.pill("Manual upload available", "ok", { dot: true }),
+      c.pill("Connect a local folder — indexed & watched on-device", "info", { dot: true }),
+      c.pill("Search + Chat ready after indexing", "info", { dot: true }),
+    ),
+    h("div.lt3-row-2",
+      h("button.lt3-btn.lt3-btn--primary", { type: "button", on: { click: pickFiles } }, icon("upload"), "Upload files"),
+      h("button.lt3-btn.lt3-btn--ghost", { type: "button", on: { click: connectFolder } }, icon("folder-plus"), "Connect folder"),
+    ),
+  );
 
   const root = h("div.lt3-stack-6",
     c.viewHeader({
@@ -80,107 +133,233 @@ 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--ghost", { title: "Requires the desktop local agent (not in this build)", on: { click: unavailableToast } }, icon("folder-plus"), "Connect folder"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: pickFiles } }, icon("upload"), "Upload files"),
+        h("button.lt3-btn.lt3-btn--ghost", { title: "Index a local folder on-device and watch it for changes", on: { click: connectFolder } }, 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",
           h("div.lt3-eyebrow", "Index"),
-          h("h3.lt3-panel__title", "Indexed documents"),
+          h("h3.lt3-panel__title", "Uploaded documents"),
+          h("p.lt3-panel__sub", "Every file Lattice has parsed, chunked, embedded and linked into the knowledge graph."),
         ),
         srcSlot,
       ),
       children: tableHost,
     }),
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", width: "100%" } },
+        h("div",
+          h("div.lt3-eyebrow", "Local sources"),
+          h("h3.lt3-panel__title", "Connected folders & folder watch"),
+          h("p.lt3-panel__sub", "Local directories Lattice indexes on-device and re-indexes when their files change."),
+        ),
+        foldersSrc,
+      ),
+      children: foldersHost,
+    }),
   );
 
-  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, foldersSrc, foldersHost, pickFiles } = slots;
+
+  // Fetch the documents (headline table) and connected local sources in parallel.
+  const [docsRes, sourcesRes] = await Promise.all([
+    ctx.api.documents(200),
+    ctx.api.localSources(),
+  ]);
 
-  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 || [];
+  hydrateDocuments(ctx, { statHost, srcSlot, tableHost, pickFiles }, docsRes);
+  hydrateFolders(ctx, { foldersSrc, foldersHost, slots }, sourcesRes);
+}
+
+/** Headline "Uploaded documents" table + stat roll-up. Data: api.documents(). */
+function hydrateDocuments(ctx, { statHost, srcSlot, tableHost, pickFiles }, docsRes) {
+  const { h, icon, c, toast } = ctx;
+  const docs = Array.isArray(docsRes.data) ? docsRes.data : [];
+  const source = docsRes.source || (docsRes.ok ? "live" : "unavailable");
   srcSlot.replaceChildren(c.sourceBadge(source));
 
-  // ── Stat roll-up ──────────────────────────────────────────────────────────
-  const indexedCount = files.filter((f) => f.indexed).length;
+  // ── Stat roll-up (driven by the real documents list) ──────────────────────
+  const indexedCount = docs.filter((d) => d.indexed === true || d.ingest_state === "indexed").length;
   const sourceCount = new Set(
-    files.map((f) => (f.path.includes("/") ? f.path.split("/")[0] : "root")),
+    docs.map((d) => (d.uploader ? `u:${d.uploader}` : `e:${String(d.ext || "").toLowerCase()}`)),
   ).size;
-  const totalBytes = files.reduce((sum, f) => sum + (f.size || 0), 0);
+  const totalBytes = docs.reduce((sum, d) => sum + (Number(d.bytes) || 0), 0);
   statHost.replaceChildren(
-    c.stat({ label: "Total files", value: c.fmtNum(files.length), icon: "files" }),
+    c.stat({ label: "Total files", value: c.fmtNum(docs.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) {
+  // ── Empty / unavailable state ─────────────────────────────────────────────
+  if (!docs.length) {
+    if (!docsRes.ok) {
+      tableHost.replaceChildren(c.errorState(
+        docsRes.error || "The document index is unavailable. Start the backend with the knowledge graph enabled.",
+      ));
+      return;
+    }
     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;
   }
 
-  // ── Table ───────────────────────────────────────────────────────────────────
+  // ── Table ─────────────────────────────────────────────────────────────────
   const columns = [
     {
-      key: "name", label: "Name",
+      key: "filename", 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),
+        h("span.lt3-filerow__icon", icon(iconForExt(row.ext))),
+        h("span", { style: { "font-weight": "var(--lt3-weight-medium)" } }, row.filename || "untitled"),
       ),
     },
     {
-      key: "path", label: "Path", width: "30%",
-      render: (row) => h("span.lt3-mono.lt3-faint", row.path || "—"),
+      key: "uploader", label: "Uploaded by", width: "26%",
+      render: (row) => h("span.lt3-mono.lt3-faint", row.uploader || "—"),
+    },
+    {
+      key: "chars", label: "Size", width: "100px",
+      render: (row) => h("span.lt3-mono",
+        Number(row.chars) > 0 ? `${c.fmtNum(row.chars)} chars` : humanSize(row.bytes)),
     },
     {
-      key: "count", label: "Indexed", width: "92px",
-      render: (row) => h("span.lt3-mono", row.count ? c.fmtNum(row.count) : humanSize(row.size)),
+      key: "chunks", label: "Chunks", width: "84px",
+      render: (row) => h("span.lt3-mono", Number(row.chunks) > 0 ? c.fmtNum(row.chunks) : "—"),
     },
     {
-      key: "status", label: "Status", width: "120px",
-      render: (row) => c.statePill(row.indexed ? "indexed" : (row.status || "pending")),
+      key: "ingest_state", label: "Index", width: "120px",
+      // "indexed" → green, "ingested" → warn (via components STATE_VARIANT).
+      render: (row) => c.statePill(row.ingest_state || (row.indexed ? "indexed" : "ingested")),
     },
     {
-      key: "updated", label: "Updated", width: "104px",
+      key: "updated_at", label: "Updated", width: "104px",
       render: (row) => h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
-        row.updated ? timeAgo(row.updated) : "—"),
+        (row.updated_at || row.created_at) ? timeAgo(row.updated_at || row.created_at) : "—"),
     },
     {
       key: "_actions", label: "", width: "44px",
+      // Per-file management is limited — say so honestly rather than implying delete/re-index.
       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") },
+        "aria-label": `Document info for ${row.filename || "file"}`,
+        title: "Per-document management isn't available yet",
+        on: { click: () => toast("Per-document management (delete / re-index) isn't available yet — re-upload to refresh a file.", "info") },
       }, icon("dots-vertical")),
     },
   ];
 
-  tableHost.replaceChildren(c.table(columns, files));
+  tableHost.replaceChildren(c.table(columns, docs));
+}
+
+/** Connected local folders + folder-watch state. Data: api.localSources(). */
+function hydrateFolders(ctx, { foldersSrc, foldersHost, slots }, res) {
+  const { h, icon, c, toast } = ctx;
+  const data = res.data || {};
+  const sources = Array.isArray(data.sources) ? data.sources : [];
+  const watch = data.watch || {};
+  const source = res.source || (res.ok ? "live" : "unavailable");
+  foldersSrc.replaceChildren(c.sourceBadge(source));
+
+  const kids = [];
+
+  // Honest note when filesystem watching can't run (watchdog dependency missing).
+  if (watch.available === false) {
+    kids.push(c.banner(
+      watch.error
+        ? `Folder watch is off: ${watch.error}`
+        : "Folder watch needs the watchdog dependency — connected folders index once but won't re-index automatically until it's installed.",
+      "warn",
+      "alert-triangle",
+    ));
+  }
+
+  if (!sources.length) {
+    if (!res.ok) {
+      kids.push(c.errorState("Local sources are unavailable — the on-device runtime isn't reachable."));
+    } else {
+      kids.push(c.emptyState({
+        icon: "folder-plus",
+        title: "No folders connected",
+        body: "Connect a local folder — Lattice indexes it on-device and watches it for changes.",
+        action: h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm",
+          { on: { click: () => (slots.connectFolder ? slots.connectFolder() : null) } },
+          icon("folder-plus"), "Connect folder"),
+      }));
+    }
+    foldersHost.replaceChildren(...kids);
+    return;
+  }
+
+  // ── Connected-folders table ───────────────────────────────────────────────
+  async function stopWatching(id) {
+    toast("Stopping folder watch…", "info");
+    const stop = await ctx.api.localWatchStop(id);
+    if (stop.ok && stop.data && !stop.data.detail && !stop.data.error) {
+      toast("Stopped watching that folder.", "ok");
+    } else {
+      const detail = (stop.data && (stop.data.detail || stop.data.error)) || "the runtime is unavailable";
+      toast(`Could not stop watching — ${detail}.`, "warn");
+    }
+    hydrate(ctx, slots);
+  }
+
+  const columns = [
+    {
+      key: "label", label: "Folder",
+      render: (row) => h("div",
+        h("div.lt3-row-2",
+          h("span.lt3-filerow__icon", icon("folder")),
+          h("span", { style: { "font-weight": "var(--lt3-weight-medium)" } }, row.label || "Local folder"),
+        ),
+        h("div.lt3-mono.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)", "margin-top": "var(--lt3-space-1)" } },
+          row.root_path || row.id || "—"),
+      ),
+    },
+    {
+      key: "success_count", label: "Indexed", width: "92px",
+      render: (row) => h("span.lt3-mono", c.fmtNum(Number(row.success_count) || 0)),
+    },
+    {
+      key: "watch_active", label: "Watch", width: "120px",
+      render: (row) => c.statePill(row.watch_active ? "watching" : "idle"),
+    },
+    {
+      key: "watch_status", label: "Last activity", width: "150px",
+      render: (row) => {
+        const ws = row.watch_status || {};
+        if (ws.last_error) {
+          return h("span", { style: { color: "var(--danger)", "font-size": "var(--lt3-text-xs)" } }, ws.last_error);
+        }
+        const at = ws.last_event_at || ws.last_indexed_at;
+        const label = ws.last_event_at ? "event" : (ws.last_indexed_at ? "indexed" : "");
+        return h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
+          at ? `${timeAgo(at)}${label ? ` · ${label}` : ""}` : "—");
+      },
+    },
+    {
+      key: "_stop", label: "", width: "120px",
+      render: (row) => row.watch_active
+        ? h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", {
+            on: { click: () => stopWatching(row.id) },
+          }, icon("player-stop"), "Stop watching")
+        : h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Not watching"),
+    },
+  ];
+
+  kids.push(c.table(columns, sources));
+  foldersHost.replaceChildren(...kids);
 }

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

@@ -0,0 +1,200 @@
+/* ============================================================================
+ * 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 readinessHost = h("div.lt3-readiness", c.loading({ lines: 4 }));
+  const activityHost = h("div", c.loading({ lines: 3 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      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, readinessHost),
+    h("section",
+      c.sectionHead("Retrieval lattice", h("span", { id: "home-idx-src" }, c.sourceBadge("pending"))),
+      h("div", { id: "home-pillars" }, c.loading({ lines: 2, block: true })),
+    ),
+    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 })) }),
+    ),
+    c.panel({
+      eyebrow: "Activity",
+      title: "Recent activity",
+      sub: "Shown only when the local backend provides trace history.",
+      children: activityHost,
+      className: "lt3-panel--activity",
+    }),
+  );
+
+  hydrate(ctx, root, { readinessHost, activityHost });
+  return root;
+}
+
+function buildHero({ h, icon, navigate }, readinessHost) {
+  return h("div.lt3-hero",
+    h("div",
+      h("div.lt3-eyebrow.lt3-hero__eyebrow", icon("sparkles"), "Knowledge Graph · Vector Index · Hybrid Search"),
+      h("h2.lt3-hero__title", "Local workspace status, without pretending."),
+      h("p.lt3-hero__sub", "Lattice shows what is ready, what is unavailable, and what needs a local runtime before Chat, Search, Knowledge, and Memory can work together."),
+      h("div.lt3-hero__actions",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--lg", { on: { click: () => navigate("chat", { new: "1" }) } }, icon("message-plus"), "Start chat"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--lg", { on: { click: () => navigate("files") } }, icon("upload"), "Upload files"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--lg", { on: { click: () => navigate("models") } }, icon("cpu"), "Check models"),
+      ),
+      h("div.lt3-mini-lattice", { style: { "margin-top": "var(--lt3-space-6)" } },
+        h("div.lt3-mini-lattice__node", h("b", "Knowledge"), h("span", "Entities and relations")),
+        h("div.lt3-mini-lattice__node", h("b", "Vectors"), h("span", "Local semantic recall")),
+        h("div.lt3-mini-lattice__node", h("b", "Hybrid"), h("span", "Fused answer grounding")),
+      ),
+    ),
+    h("aside.lt3-hero__aside",
+      h("div.lt3-eyebrow", "Readiness"),
+      readinessHost,
+    ),
+  );
+}
+
+const QUICK = [
+  { key: "chat", icon: "message-2", title: "Chat", desc: "Grounded conversation." },
+  { key: "files", icon: "folders", title: "Files", desc: "Sources and indexing." },
+  { key: "hybrid-search", icon: "arrows-join", title: "Search", desc: "Fuse graph + vector recall." },
+  { key: "knowledge-graph", icon: "chart-dots-3", title: "Knowledge", desc: "Browse entities and relations." },
+  { key: "memory", icon: "brain", title: "Memory", desc: "Inspect long-term recall." },
+  { key: "models", icon: "cpu", title: "Models", desc: "Local MLX runtime." },
+];
+
+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, hosts) {
+  const { h, icon, api, store, c } = ctx;
+  const { readinessHost, activityHost } = hosts;
+  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: "Upload documents to start indexing. Folder watching requires the desktop local agent." }),
+    );
+  }
+
+  const [os, models, memory, traces] = await Promise.all([
+    api.workspaceOs(),
+    api.models(),
+    api.memoryManager(),
+    api.get("/workspace/traces", { traces: [] }),
+  ]);
+  renderReadiness({ h, icon, c, readinessHost, idx, models, os, memory });
+
+  // Workspace counts.
+  const 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)),
+    );
+  }
+
+  renderActivity({ h, icon, c, activityHost, traces });
+}
+
+function renderReadiness({ h, icon, c, readinessHost, idx, models, os, memory }) {
+  const pipes = (idx.data && idx.data.pipelines) || {};
+  const vectorReady = String(pipes.vector_index?.state || "").toLowerCase() === "ready";
+  const graphReady = String(pipes.knowledge_graph?.state || "").toLowerCase() === "ready";
+  const modelName = models.data && models.data.current;
+  const counts = (os.data && os.data.counts) || {};
+  const memSources = (memory.data && memory.data.sources) || [];
+  readinessHost.replaceChildren(
+    readinessRow({ h, icon, c, ic: "server", title: "Backend", meta: idx.source === "live" ? "Live local API" : "Local API unavailable", state: idx.source === "live" ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "cpu", title: "Model", meta: modelName ? shortModel(modelName) : "No model loaded", state: modelName ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "database", title: "Retrieval", meta: graphReady && vectorReady ? "Graph and vector ready" : "Index needs data or rebuild", state: graphReady && vectorReady ? "ready" : "pending" }),
+    readinessRow({ h, icon, c, ic: "brain", title: "Memory", meta: memSources.length ? `${c.fmtNum(counts.memories)} memories across ${memSources.length} tiers` : "Memory backend unavailable or empty", state: memSources.length ? "ready" : "idle" }),
+  );
+}
+
+function readinessRow({ h, icon, c, ic, title, meta, state }) {
+  return h("div.lt3-readiness__row",
+    h("div.lt3-readiness__icon", icon(ic)),
+    h("div", h("div.lt3-readiness__title", title), h("div.lt3-readiness__meta", meta)),
+    c.statePill(state),
+  );
+}
+
+function renderActivity({ h, icon, c, activityHost, traces }) {
+  const rows = (traces.data && Array.isArray(traces.data.traces)) ? traces.data.traces : [];
+  if (!rows.length) {
+    activityHost.replaceChildren(c.emptyState({
+      icon: "history-off",
+      title: "No recent activity available",
+      body: traces.source === "live" ? "The backend returned no trace history yet." : "Start the backend to show recent local workspace activity.",
+    }));
+    return;
+  }
+  activityHost.replaceChildren(h("div.lt3-list", rows.slice(0, 6).map((tr) =>
+    h("div.lt3-list__item",
+      h("span.lt3-avatar", { style: { width: "28px", height: "28px" } }, icon("route")),
+      h("div.lt3-list__body",
+        h("div.lt3-list__title", tr.question || tr.event_type || "Workspace event"),
+        h("div.lt3-list__meta", [tr.confidence != null ? `${Math.round(Number(tr.confidence) * 100)}% confidence` : null, tr.created_at || tr.timestamp || null].filter(Boolean).join(" · ")),
+      ),
+      c.sourceBadge(traces.source),
+    ))));
+}
+
+function shortModel(id) {
+  const s = String(id || "");
+  const tail = s.includes("/") ? s.split("/").pop() : s;
+  return tail.length > 28 ? tail.slice(0, 27) + "…" : tail;
+}