ltcai 3.3.0 → 3.4.0

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

@@ -27,6 +27,10 @@ export async function render(ctx) {
     model: "", modelSource: "pending",
     lastQuery: "", lastTrace: null,
     graphCache: null,
+    // VLM image input (per-message). state.image holds raw base64 with NO
+    // "data:image/...;base64," prefix (what /chat expects); state.imagePreview
+    // keeps the full data URL for the <img> thumbnail.
+    image: null, imagePreview: null, visionEnabled: false,
   };
 
   /* ── element hosts ───────────────────────────────────────────────────── */
@@ -46,9 +50,29 @@ export async function render(ctx) {
     on: {
       input: autogrow,
       keydown: (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } },
+      paste: onPaste,
     },
   });
-  const sendBtn = h("button.lt3-btn.lt3-btn--primary", { "aria-label": "Send", on: { click: send } }, icon("arrow-up"));
+  const sendBtn = h("button.lt3-btn.lt3-btn--primary", { "aria-label": "Send", on: { click: () => state.streaming ? stopStreaming() : send() } }, icon("arrow-up"));
+
+  /* ── VLM image input (upload · drop · paste) ─────────────────────────── */
+  // Vision-capability badge — reflects whether the loaded model can read
+  // images. Honest by default ("Vision Disabled") until /models confirms.
+  const visionPill = h("span", {
+    title: "Load a vision-capable model to interpret images",
+  }, c.pill("Vision Disabled", "warn", { dot: true }));
+  // Hidden native picker, triggered by the "Attach image" button.
+  const fileInput = h("input", {
+    type: "file", accept: "image/*", style: { display: "none" },
+    "aria-hidden": "true", tabindex: "-1",
+    on: { change: (e) => { const f = e.target.files && e.target.files[0]; if (f) loadImageFile(f); e.target.value = ""; } },
+  });
+  const attachBtn = h("button.lt3-chip", {
+    type: "button", title: "Attach an image for a vision-capable model to read",
+    "aria-label": "Attach image", on: { click: () => fileInput.click() },
+  }, icon("photo"), "Image");
+  // Preview host, populated above the textarea inside .lt3-composer__inner.
+  const imagePreviewHost = h("div", { style: { display: "none" } });
 
   const groundChip = (key, label, icn) => h("button.lt3-chip", {
     type: "button", dataset: { active: String(state.grounding[key]) }, "aria-pressed": String(state.grounding[key]),
@@ -87,10 +111,16 @@ export async function render(ctx) {
       thread,
       h("div.lt3-composer",
         h("div.lt3-composer__inner",
-          h("div.lt3-composer__box", textarea, sendBtn),
+          imagePreviewHost,
+          h("div.lt3-composer__box", {
+            on: { dragover: onDragOver, dragleave: onDragLeave, drop: onDrop },
+          }, textarea, sendBtn),
           h("div.lt3-composer__tools",
             groundChip("graph", "Knowledge Graph", "chart-dots-3"),
             groundChip("vector", "Vector", "grid-dots"),
+            attachBtn,
+            visionPill,
+            fileInput,
             h("span.lt3-spacer"),
             h("span.lt3-kbd", "↵"),
           ),
@@ -152,6 +182,7 @@ export async function render(ctx) {
   async function selectConversation(id) {
     if (state.streaming) stopStreaming();
     closePanes();
+    clearImage();
     state.activeId = id;
     const conv = state.conversations.find((x) => x.id === id);
     state.title = conv ? conv.title : "Conversation";
@@ -174,6 +205,7 @@ export async function render(ctx) {
   function startNew(userInitiated) {
     if (state.streaming) stopStreaming();
     closePanes();
+    clearImage();
     state.activeId = null;
     state.title = "New chat";
     state.messages = [];
@@ -218,7 +250,13 @@ export async function render(ctx) {
   function messageNode(m) {
     const isUser = m.role === "user";
     const body = h("div.lt3-msg__body",
-      h("div.lt3-msg__bubble", m.content),
+      h("div.lt3-msg__bubble",
+        m.image && h("img", {
+          src: m.image, alt: "Attached image",
+          style: { display: "block", "max-height": "220px", "max-width": "100%", "border-radius": "var(--lt3-radius-2, 8px)", border: "1px solid var(--border)", "margin-bottom": m.content ? "var(--lt3-space-2)" : "0" },
+        }),
+        m.content,
+      ),
       m.role === "ai" && m.source && h("div.lt3-row-2", c.sourceBadge(m.source)),
     );
     return h(`div.lt3-msg.lt3-msg--${isUser ? "user" : "ai"}`,
@@ -234,18 +272,122 @@ export async function render(ctx) {
     textarea.style.height = Math.min(200, textarea.scrollHeight) + "px";
   }
 
+  /* ── image: read · preview · clear ───────────────────────────────────── */
+  // Read an image File as a data URL, then split off the raw base64 payload
+  // (/chat wants the bytes without the "data:...;base64," prefix).
+  function loadImageFile(file) {
+    if (!file || !/^image\//.test(file.type || "")) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataUrl = String(reader.result || "");
+      const comma = dataUrl.indexOf(",");
+      if (comma < 0) return;
+      state.imagePreview = dataUrl;
+      state.image = dataUrl.slice(comma + 1);   // strip the data: prefix
+      renderImagePreview();
+    };
+    reader.onerror = () => toast("Couldn't read that image", "err");
+    reader.readAsDataURL(file);
+  }
+
+  function clearImage() {
+    state.image = null;
+    state.imagePreview = null;
+    renderImagePreview();
+  }
+
+  function renderImagePreview() {
+    if (!state.imagePreview) {
+      imagePreviewHost.replaceChildren();
+      imagePreviewHost.style.display = "none";
+      return;
+    }
+    imagePreviewHost.style.display = "flex";
+    imagePreviewHost.style.setProperty("align-items", "center");
+    imagePreviewHost.style.setProperty("gap", "var(--lt3-space-2)");
+    imagePreviewHost.style.setProperty("margin-bottom", "var(--lt3-space-2)");
+    imagePreviewHost.replaceChildren(
+      h("div", { style: { position: "relative", display: "inline-flex" } },
+        h("img", {
+          src: state.imagePreview, alt: "Attached image preview",
+          style: { height: "64px", "border-radius": "var(--lt3-radius-2, 8px)", border: "1px solid var(--border)" },
+        }),
+        h("button.lt3-iconbtn.lt3-iconbtn--sm", {
+          type: "button", "aria-label": "Remove image",
+          title: "Remove image",
+          style: {
+            position: "absolute", top: "-8px", right: "-8px",
+            background: "var(--surface-2)", border: "1px solid var(--border)",
+            "border-radius": "var(--lt3-radius-pill, 999px)",
+          },
+          on: { click: clearImage },
+        }, icon("x")),
+      ),
+      h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } },
+        state.visionEnabled ? "Image attached" : "Image attached · load a vision-capable model to interpret it"),
+    );
+  }
+
+  /* ── drag & drop ─────────────────────────────────────────────────────── */
+  function hasImageDrag(e) {
+    const dt = e.dataTransfer;
+    return !!dt && Array.from(dt.types || []).includes("Files");
+  }
+  function onDragOver(e) {
+    if (!hasImageDrag(e)) return;
+    e.preventDefault();
+    e.currentTarget.style.setProperty("outline", "2px dashed var(--accent)");
+    e.currentTarget.style.setProperty("outline-offset", "2px");
+  }
+  function onDragLeave(e) {
+    e.currentTarget.style.removeProperty("outline");
+    e.currentTarget.style.removeProperty("outline-offset");
+  }
+  function onDrop(e) {
+    e.currentTarget.style.removeProperty("outline");
+    e.currentTarget.style.removeProperty("outline-offset");
+    const dt = e.dataTransfer;
+    if (!dt || !dt.files || !dt.files.length) return;
+    const file = Array.from(dt.files).find((f) => /^image\//.test(f.type || ""));
+    if (!file) return;
+    e.preventDefault();
+    loadImageFile(file);
+  }
+
+  /* ── paste ───────────────────────────────────────────────────────────── */
+  function onPaste(e) {
+    const items = e.clipboardData && e.clipboardData.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.kind === "file" && /^image\//.test(item.type || "")) {
+        const file = item.getAsFile();
+        if (file) { e.preventDefault(); loadImageFile(file); }
+        return;
+      }
+    }
+  }
+
   /* ── send + stream ───────────────────────────────────────────────────── */
   async function send() {
     const text = textarea.value.trim();
-    if (!text || state.streaming) return;
+    // An image alone is a valid message — only bail when there's nothing at all.
+    if ((!text && !state.image) || state.streaming) return;
     textarea.value = ""; autogrow();
 
+    // Snapshot the image for this message, then clear the composer (per-message).
+    const imageData = state.image || null;
+    const imagePreview = state.imagePreview || null;
+    clearImage();
+
     if (!state.messages.length) threadInner.replaceChildren();
-    const userMsg = { role: "user", content: text };
+    const userMsg = { role: "user", content: text, image: imagePreview };
     state.messages.push(userMsg);
     threadInner.append(messageNode(userMsg));
     state.lastQuery = text;
-    if (!state.activeId) { state.title = text.slice(0, 48); titleEl.textContent = state.title; }
+    if (!state.activeId) {
+      const seed = text || "Image";
+      state.title = seed.slice(0, 48); titleEl.textContent = state.title;
+    }
 
     // streaming AI bubble
     const bubble = h("div.lt3-msg__bubble");
@@ -264,7 +406,7 @@ export async function render(ctx) {
     let started = false;
 
     const result = await api.streamChat(
-      { message: text, conversation_id: state.activeId, grounding: state.grounding },
+      { message: text, conversation_id: state.activeId, grounding: state.grounding, image_data: imageData || undefined },
       {
         signal: state.abort.signal,
         onChunk: (_delta, full) => {
@@ -326,11 +468,9 @@ export async function render(ctx) {
     if (on) {
       sendBtn.replaceChildren(icon("player-stop"));
       sendBtn.setAttribute("aria-label", "Stop");
-      sendBtn.onclick = stopStreaming;
     } else {
       sendBtn.replaceChildren(icon("arrow-up"));
       sendBtn.setAttribute("aria-label", "Send");
-      sendBtn.onclick = send;
     }
   }
 
@@ -413,6 +553,18 @@ export async function render(ctx) {
     state.modelSource = res.source;
     modelPill.replaceChildren(c.pill(state.model ? shortModel(state.model) : "No model", state.model ? "info" : "warn", { dot: true }));
     barSrc.replaceChildren(c.sourceBadge(res.source));
+
+    // Vision capability — driven by the real /models.vision contract; stays
+    // honestly "Disabled" when the field is absent or the call is unavailable.
+    state.visionEnabled = !!(res.data && res.data.vision && res.data.vision.enabled);
+    visionPill.title = state.visionEnabled
+      ? "The loaded model can interpret attached images"
+      : "Load a vision-capable model to interpret images";
+    visionPill.replaceChildren(
+      c.pill(state.visionEnabled ? "Vision Enabled" : "Vision Disabled", state.visionEnabled ? "ok" : "warn", { dot: true }),
+    );
+    // Keep any open preview's helper text in sync with capability.
+    if (state.imagePreview) renderImagePreview();
   }
 
   function loadInitial() {

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

@@ -0,0 +1,365 @@
+/* ============================================================================
+ * 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
+ *   ctx = { h, icon, api, store, c, route, params, navigate, toast }
+ * ========================================================================== */
+
+import { timeAgo } from "../core/dom.a2773eb0.js";
+
+/** 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 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) {
+  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]}`;
+}
+
+/** 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;
+
+  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({
+      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--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,
+    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", "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, slots);
+  return root;
+}
+
+async function hydrate(ctx, 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(),
+  ]);
+
+  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 (driven by the real documents list) ──────────────────────
+  const indexedCount = docs.filter((d) => d.indexed === true || d.ingest_state === "indexed").length;
+  const sourceCount = new Set(
+    docs.map((d) => (d.uploader ? `u:${d.uploader}` : `e:${String(d.ext || "").toLowerCase()}`)),
+  ).size;
+  const totalBytes = docs.reduce((sum, d) => sum + (Number(d.bytes) || 0), 0);
+  statHost.replaceChildren(
+    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 / 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: "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 ─────────────────────────────────────────────────────────────────
+  const columns = [
+    {
+      key: "filename", label: "Name",
+      render: (row) => h("div.lt3-row-2",
+        h("span.lt3-filerow__icon", icon(iconForExt(row.ext))),
+        h("span", { style: { "font-weight": "var(--lt3-weight-medium)" } }, row.filename || "untitled"),
+      ),
+    },
+    {
+      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: "chunks", label: "Chunks", width: "84px",
+      render: (row) => h("span.lt3-mono", Number(row.chunks) > 0 ? c.fmtNum(row.chunks) : "—"),
+    },
+    {
+      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_at", label: "Updated", width: "104px",
+      render: (row) => h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } },
+        (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": `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, 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);
+}