ltcai 3.0.1 → 3.2.0

package/static/v3/js/core/api.js

@@ -2,21 +2,31 @@
  * Lattice AI v3 — Integration adapter
  *
  * Every adapter call hits the real endpoint first (including /api/index/status,
- * /api/graph, /api/search/hybrid, and /chat). If that
- * endpoint is missing/unavailable, it degrades to a clearly-labeled SAMPLE
- * payload from fixtures.js and reports `source: "placeholder"` so the UI can
- * badge it. No backend logic is implemented here — only transport + graceful
- * fallback, which keeps the v3 frontend resilient during local setup.
+ * /api/graph, /api/search/hybrid, and /chat). If that endpoint is
+ * missing/unavailable, it returns an unavailable source with empty data so the
+ * UI can render a clear unavailable state without inventing counters or health.
  *
  * Return shape (never throws): { ok, status, data, source, error }
  *   source: "live"        → returned by a real backend endpoint
- *           "placeholder" → fixture fallback (backend not yet available)
+ *           "unavailable" → endpoint missing/down; no fake payload
  * ========================================================================== */
 
 import { store } from "./store.js";
-import * as fx from "./fixtures.js";
 
 const TIMEOUT_MS = 8000;
+const EMPTY_INDEX_STATUS = { generated_at: null, pipelines: {}, sources: [] };
+const EMPTY_GRAPH_STATS = { nodes: {}, edges: {}, total_nodes: 0, total_edges: 0 };
+const EMPTY_WORKSPACE_OS = { counts: {}, models: {} };
+const EMPTY_SYSINFO = { cpu_pct: null, ram_pct: null, gpu_mem_pct: null, gpu_mem_gb: null };
+const EMPTY_ADMIN = {
+  summary: { total_users: null, active_users: null, admin_users: null, total_messages: null },
+  users: [],
+  audit: { recent_events: [] },
+  security: {},
+  roles: { roles: [] },
+  policies: { policies: [] },
+  vpc: {},
+};
 
 async function raw(path, { method = "GET", body, headers } = {}) {
   const ctrl = new AbortController();
@@ -46,28 +56,35 @@ async function raw(path, { method = "GET", body, headers } = {}) {
   }
 }
 
-/** Try the live endpoint; on any non-2xx/transport failure, use the fixture. */
-async function withFallback(path, opts, fixture) {
+function unavailableData(shape) {
+  const value = typeof shape === "function" ? shape() : shape;
+  if (Array.isArray(value)) return [];
+  if (value && typeof value === "object") return {};
+  return null;
+}
+
+/** Try the live endpoint; on any non-2xx/transport failure, return empty data. */
+async function withFallback(path, opts, shape) {
   const res = await raw(path, opts);
   if (res.ok && res.data && !res.data.raw) {
     return { ...res, source: "live" };
   }
-  return { ok: true, status: res.status, data: typeof fixture === "function" ? fixture() : fixture, source: "placeholder", error: res.error };
+  return { ok: false, status: res.status, data: unavailableData(shape), source: "unavailable", error: res.error };
 }
 
 export const api = {
   raw,
 
-  /** Generic GET with fixture fallback. */
-  async get(path, fixture = null) {
-    return withFallback(path, {}, fixture);
+  /** Generic GET with unavailable fallback. */
+  async get(path, shape = null) {
+    return withFallback(path, {}, shape);
   },
 
   /* ── Documented future surfaces ─────────────────────────────────────── */
 
   /** GET /api/index/status — KG + Vector + Hybrid pipeline state. */
   indexStatus() {
-    return withFallback("/api/index/status", {}, fx.INDEX_STATUS);
+    return withFallback("/api/index/status", {}, EMPTY_INDEX_STATUS);
   },
 
   /** POST /api/index/rebuild — rebuild the derived vector index (real run). */
@@ -76,7 +93,7 @@ export const api = {
   },
 
   /** GET /api/graph — knowledge graph (nodes + edges). Falls back through the
-   *  current /knowledge-graph/graph route before the fixture. */
+   *  current /knowledge-graph/graph route before reporting unavailable. */
   async graph(params = {}) {
     const qs = new URLSearchParams(params).toString();
     const primary = await raw(`/api/graph${qs ? "?" + qs : ""}`);
@@ -87,11 +104,11 @@ export const api = {
     if (legacy.ok && legacy.data && Array.isArray(legacy.data.nodes)) {
       return { ...legacy, source: "live" };
     }
-    return { ok: true, status: 200, data: fx.GRAPH, source: "placeholder" };
+    return { ok: false, status: primary.status || legacy.status || 0, data: { nodes: [], edges: [] }, source: "unavailable", error: primary.error || legacy.error };
   },
 
   graphStats() {
-    return withFallback("/knowledge-graph/stats", {}, fx.GRAPH_STATS);
+    return withFallback("/knowledge-graph/stats", {}, EMPTY_GRAPH_STATS);
   },
 
   /** POST /api/search/hybrid — fused KG + vector retrieval.
@@ -123,11 +140,11 @@ export const api = {
       });
       return { ok: true, status: res.status, data: items, source: "live", weights: res.data.weights || null };
     }
-    return { ok: true, status: res.status, data: fx.hybridResults(query), source: "placeholder", error: res.error };
+    return { ok: false, status: res.status, data: [], source: "unavailable", error: res.error };
   },
 
   /* ── Existing surfaces (used where helpful, all fallback-safe) ──────── */
-  workspaceOs() { return withFallback("/workspace/os", {}, fx.WORKSPACE_OS); },
+  workspaceOs() { return withFallback("/workspace/os", {}, EMPTY_WORKSPACE_OS); },
   async models() {
     const res = await raw("/models");
     if (res.ok && res.data && !res.data.raw) {
@@ -149,17 +166,23 @@ export const api = {
         data: { ...data, catalog: Array.isArray(data.catalog) ? data.catalog : [...recommended, ...loadedOnly] },
       };
     }
-    return { ok: true, status: res.status, data: fx.MODELS, source: "placeholder", error: res.error };
+    return { ok: false, status: res.status, data: { current: null, catalog: [] }, source: "unavailable", error: res.error };
+  },
+  loadModel(modelId, engine) {
+    return raw("/models/load", { method: "POST", body: { model_id: modelId, engine: engine || null } });
   },
-  sysinfo() { return withFallback("/local/sysinfo", {}, fx.SYSINFO); },
+  unloadModel(modelId) {
+    return raw(`/models/unload/${encodeURIComponent(modelId)}`, { method: "DELETE" });
+  },
+  sysinfo() { return withFallback("/local/sysinfo", {}, EMPTY_SYSINFO); },
 
-  adminSummary() { return withFallback("/admin/summary", {}, fx.ADMIN.summary); },
-  adminUsers() { return withFallback("/admin/users", {}, fx.ADMIN.users); },
-  adminAudit() { return withFallback("/admin/audit", {}, { recent_events: fx.ADMIN.audit }); },
-  adminSecurity() { return withFallback("/admin/security/overview", {}, fx.ADMIN.security); },
-  adminRoles() { return withFallback("/admin/roles", {}, { roles: fx.ADMIN.roles }); },
-  adminPolicies() { return withFallback("/admin/policies", {}, { policies: fx.ADMIN.policies }); },
-  vpcStatus() { return withFallback("/vpc/status", {}, fx.ADMIN.vpc); },
+  adminSummary() { return withFallback("/admin/summary", {}, EMPTY_ADMIN.summary); },
+  adminUsers() { return withFallback("/admin/users", {}, EMPTY_ADMIN.users); },
+  adminAudit() { return withFallback("/admin/audit", {}, EMPTY_ADMIN.audit); },
+  adminSecurity() { return withFallback("/admin/security/overview", {}, EMPTY_ADMIN.security); },
+  adminRoles() { return withFallback("/admin/roles", {}, EMPTY_ADMIN.roles); },
+  adminPolicies() { return withFallback("/admin/policies", {}, EMPTY_ADMIN.policies); },
+  vpcStatus() { return withFallback("/vpc/status", {}, EMPTY_ADMIN.vpc); },
 
   /* ── Embeddings (real backend: /api/embeddings/*) ───────────────────── */
   /** GET /api/embeddings/status — active provider, grade, dimensions, last index. */
@@ -170,10 +193,10 @@ export const api = {
     }
     // No backend → report unavailable honestly (never fabricate a provider).
     return {
-      ok: true, status: res.status, source: "placeholder",
-      data: { provider: "hash", active_provider: "hash", model: "lattice-local-hash-v1",
-        model_id: "lattice-local-hash-v1:384", dimensions: 384, grade: "fallback",
-        state: "fallback", fell_back: false, health: { status: "unknown", detail: "backend unavailable" },
+      ok: false, status: res.status, source: "unavailable",
+      data: { provider: null, active_provider: null, model: null,
+        model_id: null, dimensions: null, grade: "unavailable",
+        state: "unavailable", fell_back: false, health: { status: "unavailable", detail: "backend unavailable" },
         last_indexed_at: null },
     };
   },
@@ -186,12 +209,12 @@ export const api = {
     if (res.ok && res.data && res.data.runtime && Array.isArray(res.data.agents)) {
       return { ok: true, status: res.status, data: res.data, source: "live" };
     }
-    // Fallback: clearly-badged sample roster, no fabricated run ledger.
+    // Fallback: unavailable roster, no fabricated run ledger.
     return {
-      ok: true, status: res.status, source: "placeholder",
+      ok: false, status: res.status, source: "unavailable",
       data: { runtime: { ready: false, total_runs: 0, active_runs: 0 },
         health: { status: "unknown", checks: {} }, roles: [],
-        agents: fx.AGENTS.map((a) => ({ ...a, last_status: null, last_at: null })), runs: [] },
+        agents: [], runs: [] },
     };
   },
   /** POST /agents/api/run — execute the multi-agent pipeline for a goal. */
@@ -215,7 +238,7 @@ export const api = {
       : res.ok && res.data && Array.isArray(res.data.conversations) ? res.data.conversations
       : null;
     if (list) return { ok: true, status: res.status, data: list, source: "live" };
-    return { ok: true, status: res.status, data: fx.CHAT.conversations, source: "placeholder" };
+    return { ok: false, status: res.status, data: [], source: "unavailable" };
   },
 
   /** GET /history/conversations/{id} — messages for one conversation. */
@@ -224,8 +247,7 @@ export const api = {
     if (res.ok && res.data && Array.isArray(res.data.messages)) {
       return { ok: true, status: res.status, data: res.data.messages, source: "live" };
     }
-    const sample = (fx.CHAT.conversations.find((c) => c.id === id) || {}).messages || [];
-    return { ok: true, status: res.status, data: sample, source: "placeholder" };
+    return { ok: false, status: res.status, data: [], source: "unavailable" };
   },
 
   deleteConversation(id) {
@@ -236,8 +258,8 @@ export const api = {
    * POST /chat — streams the assistant reply over SSE.
    * Parses `data: {chunk, model, trace}` events (terminator `[DONE]`), calling
    * onChunk(delta, fullText) and onTrace(trace). If the endpoint is missing or
-   * not an event-stream, degrades to a clearly-labeled SAMPLE stream (no real
-   * generation is invented). Resolves { source, text, trace, model, aborted }.
+ * not an event-stream, reports that chat is unavailable (no generated answer is
+ * invented). Resolves { source, text, trace, model, aborted }.
    */
   async streamChat(body, { onChunk, onTrace, signal } = {}) {
     const ws = store.get().workspaceId;
@@ -299,29 +321,88 @@ export const api = {
     }
     return { source: "live", text, trace, model };
   },
+
+  /* ── v3.2 platform surfaces (all fallback-safe; never fabricate) ─────── */
+
+  // Agent Registry (Part 2)
+  agentRegistry(type) { return withFallback(`/agents/api/registry${type ? "?type=" + encodeURIComponent(type) : ""}`, {}, { agents: [], counts: {}, types: [] }); },
+  agentCapabilities() { return withFallback("/agents/api/registry/capabilities", {}, { capabilities: {} }); },
+  registerAgent(body) { return raw("/agents/api/registry", { method: "POST", body }); },
+  updateAgent(id, body) { return raw(`/agents/api/registry/${encodeURIComponent(id)}`, { method: "PATCH", body }); },
+  removeAgent(id) { return raw(`/agents/api/registry/${encodeURIComponent(id)}`, { method: "DELETE" }); },
+  agentRunDetail(runId) { return raw(`/agents/api/runs/${encodeURIComponent(runId)}`); },
+  agentRunReplay(runId) { return raw(`/agents/api/runs/${encodeURIComponent(runId)}/replay`); },
+  stopAgentRun(runId) { return raw(`/agents/api/runs/${encodeURIComponent(runId)}/stop`, { method: "POST" }); },
+
+  // Marketplace + Templates (Parts 3, 4)
+  templates(kind) { return withFallback(`/marketplace/templates${kind ? "?kind=" + encodeURIComponent(kind) : ""}`, {}, { templates: [], kinds: [] }); },
+  templateRegistry() { return withFallback("/marketplace/templates/registry", {}, { registry: [] }); },
+  exportTemplate(kind, id) { return raw(`/marketplace/templates/${encodeURIComponent(kind)}/${encodeURIComponent(id)}/export`); },
+  importTemplate(data) { return raw("/marketplace/templates/import", { method: "POST", body: { data } }); },
+  installTemplate(data) { return raw("/marketplace/templates/install", { method: "POST", body: { data } }); },
+  cloneTemplate(kind, id, name) { return raw(`/marketplace/templates/${encodeURIComponent(kind)}/${encodeURIComponent(id)}/clone`, { method: "POST", body: { name } }); },
+  pluginsRegistry() { return withFallback("/plugins/registry", {}, { plugins: [] }); },
+  pluginsDirectory() { return withFallback("/plugins/directory", {}, { plugins: [], categories: [] }); },
+
+  // Workflow Agents (Part 5)
+  workflowDefinitions() { return withFallback("/workflows/api/definitions", {}, { workflows: [] }); },
+  createWorkflow(body) { return raw("/workflows/api/definitions", { method: "POST", body }); },
+  runWorkflow(id, body = {}) { return raw(`/workflows/api/definitions/${encodeURIComponent(id)}/run`, { method: "POST", body }); },
+  workflowRuns() { return withFallback("/workflows/api/runs", {}, { runs: [] }); },
+  workflowReplay(runId) { return raw(`/workflows/api/runs/${encodeURIComponent(runId)}/replay`); },
+
+  // Long-Term Memory + Memory Manager (Parts 7, 8)
+  memoryManager() { return withFallback("/api/memory/manager", {}, { sources: [], tiers: [], usage: {} }); },
+  memoryTiers() { return withFallback("/api/memory/tiers", {}, { tiers: [], workspace_kinds: [] }); },
+  memoryInspect(source, limit = 50) { return withFallback(`/api/memory/inspect?source=${encodeURIComponent(source)}&limit=${limit}`, {}, { items: [] }); },
+  memoryRecall(query, limit = 20) { return raw("/api/memory/recall", { method: "POST", body: { query, limit } }); },
+  memoryPrune(body) { return raw("/api/memory/prune", { method: "POST", body }); },
+  memoryCompact() { return raw("/api/memory/compact", { method: "POST", body: {} }); },
+  memoryRebuild(target = "vector") { return raw("/api/memory/rebuild", { method: "POST", body: { target } }); },
+  memoryClear(scope, confirm = true) { return raw("/api/memory/clear", { method: "POST", body: { scope, confirm } }); },
+  workspaceMemories(kind) { return withFallback(`/workspace/memories${kind ? "?kind=" + encodeURIComponent(kind) : ""}`, {}, { memories: [] }); },
+
+  // Skills Registry (Part 9)
+  skills() { return withFallback("/workspace/skills", {}, { skills: [] }); },
+  skillEnable(skill) { return raw("/workspace/skills/enable", { method: "POST", body: { skill } }); },
+  skillDisable(skill) { return raw("/workspace/skills/disable", { method: "POST", body: { skill } }); },
+  skillInstall(skill, plugin) { return raw("/workspace/skills/install", { method: "POST", body: { skill, plugin: plugin || "" } }); },
+  skillUninstall(skill) { return raw("/workspace/skills/uninstall", { method: "POST", body: { skill } }); },
+  skillsMarketplace() { return withFallback("/skills/marketplace", {}, { skills: [], categories: [] }); },
+
+  // Hooks Registry (Part 10)
+  hooks(kind) { return withFallback(`/api/hooks${kind ? "?kind=" + encodeURIComponent(kind) : ""}`, {}, { hooks: [], kinds: [], counts: {} }); },
+  hookEnable(hook_id, enabled = true) { return raw("/api/hooks/enable", { method: "POST", body: { hook_id, enabled } }); },
+  hookDisable(hook_id) { return raw("/api/hooks/disable", { method: "POST", body: { hook_id, enabled: false } }); },
+  hookReorder(kind, ordered_ids) { return raw("/api/hooks/reorder", { method: "POST", body: { kind, ordered_ids } }); },
+  hookRegister(body) { return raw("/api/hooks/register", { method: "POST", body }); },
+  hookRemove(hook_id) { return raw(`/api/hooks/${encodeURIComponent(hook_id)}`, { method: "DELETE" }); },
+
+  // Tool Registry + MCP (Parts 11, 12)
+  toolPermissions() { return withFallback("/tools/permissions", {}, { permissions: [] }); },
+  mcpTools() { return withFallback("/mcp/tools", {}, { tools: [], installed_mcps: [] }); },
+  mcpInstalled() { return withFallback("/mcp/installed", {}, { installed: [] }); },
+  mcpClaudeServers() { return withFallback("/mcp/claude-code-servers", {}, { servers: [] }); },
+  mcpCustom() { return withFallback("/mcp/custom", {}, { custom: [] }); },
+  mcpRecommend(query, limit = 6) { return raw("/mcp/recommend", { method: "POST", body: { query, limit } }); },
 };
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
-/** Transparent SAMPLE stream — used only when no chat backend is available. */
+/** Transparent unavailable stream — used only when no chat backend is available. */
 async function simulateChat(body, { onChunk, onTrace, signal } = {}) {
   const q = (body && body.message) || "your question";
   const reply =
-    `This is a sample response. Connect a local model and the v3 retrieval backend ` +
-    `(/api/search/hybrid, /api/graph) to ground answers to “${q}” in your workspace. ` +
-    `The context panel shows the knowledge-graph entities, vector matches, and indexed ` +
-    `files that would be used to answer — this preview does not run a model.`;
+    `Chat is unavailable because the Lattice backend or active model is not reachable. ` +
+    `Start the server, load a model, and rebuild retrieval before sending “${q}”.`;
   let text = "";
   for (const word of reply.split(" ")) {
-    if (signal && signal.aborted) return { source: "placeholder", text, aborted: true };
+    if (signal && signal.aborted) return { source: "unavailable", text, aborted: true };
     const delta = (text ? " " : "") + word;
     text += delta;
     onChunk && onChunk(delta, text);
     await sleep(16);
   }
-  const trace = fx.sampleTrace(q);
-  onTrace && onTrace(trace);
-  return { source: "placeholder", text, trace };
+  onTrace && onTrace(null);
+  return { source: "unavailable", text, trace: null };
 }
-
-export { fx };

package/static/v3/js/core/components.4c83e0a9.js

@@ -0,0 +1,222 @@
+/* ============================================================================
+ * Lattice AI v3 — Component factories
+ * Build the shared vocabulary (cards, panels, stats, tables, states, the
+ * retrieval-lattice pillars …) on top of dom.js + the component CSS. Views
+ * compose these to stay visually consistent.
+ * ========================================================================== */
+
+import { h, icon, fmtNum } from "./dom.a2773eb0.js";
+
+/* ── View + section headers ─────────────────────────────────────────────── */
+export function viewHeader({ eyebrow, title, sub, actions } = {}) {
+  return h("header.lt3-vhead",
+    h("div",
+      eyebrow && h("div.lt3-eyebrow", eyebrow),
+      h("h1.lt3-vhead__title", title),
+      sub && h("p.lt3-vhead__sub", sub),
+    ),
+    actions && actions.length && h("div.lt3-vhead__actions", actions),
+  );
+}
+
+export function sectionHead(title, ...actions) {
+  return h("div.lt3-section__head",
+    h("h2.lt3-section__title", title),
+    actions.length && h("div.lt3-row-2", actions),
+  );
+}
+
+/* ── Panel / card ───────────────────────────────────────────────────────── */
+export function panel({ title, sub, actions, head, children, eyebrow, className } = {}) {
+  return h(`section.lt3-panel${className ? "." + className : ""}`,
+    (title || head || actions) && h("div.lt3-panel__head",
+      head || h("div",
+        eyebrow && h("div.lt3-eyebrow", eyebrow),
+        title && h("h3.lt3-panel__title", title),
+        sub && h("p.lt3-panel__sub", sub),
+      ),
+      actions && h("div.lt3-row-2", actions),
+    ),
+    children,
+  );
+}
+
+export function card(children, opts = {}) {
+  const cls = ["lt3-card"];
+  if (opts.interactive) cls.push("lt3-card--interactive");
+  if (opts.flat) cls.push("lt3-card--flat");
+  if (opts.ghost) cls.push("lt3-card--ghost");
+  return h(`div.${cls.join(".")}`, opts.attrs || {}, children);
+}
+
+/* ── Stat tile ──────────────────────────────────────────────────────────── */
+export function stat({ label, value, icon: ic, delta, deltaDir }) {
+  return h("div.lt3-stat",
+    h("div.lt3-stat__label", ic && icon(ic), label),
+    h("div.lt3-stat__value", value == null ? "—" : value),
+    delta && h(`div.lt3-stat__delta${deltaDir ? ".lt3-stat__delta--" + deltaDir : ""}`, delta),
+  );
+}
+
+/* ── Pills / badges ─────────────────────────────────────────────────────── */
+export function pill(text, variant = "", { dot } = {}) {
+  const cls = ["lt3-pill"];
+  if (variant) cls.push("lt3-pill--" + variant);
+  if (dot) cls.push("lt3-pill--dot");
+  return h(`span.${cls.join(".")}`, text);
+}
+
+const STATE_VARIANT = {
+  ready: "ok", active: "ok", indexed: "ok", loaded: "ok", ok: "ok", available: "info",
+  idle: "", standby: "", pending: "warn", indexing: "warn", building: "warn",
+  failed: "err", error: "err", disabled: "err", not_configured: "",
+};
+export function statePill(state) {
+  return pill(String(state || "unknown"), STATE_VARIANT[String(state).toLowerCase()] ?? "", { dot: true });
+}
+
+/** Provenance badge — makes live vs unavailable data explicit. */
+export function sourceBadge(source) {
+  if (source === "live") return h("span.lt3-source.lt3-source--live", icon("circle-filled"), "Live");
+  if (source === "unavailable") return h("span.lt3-source.lt3-source--unavailable", icon("alert-circle"), "Unavailable");
+  return h("span.lt3-source.lt3-source--pending", "—");
+}
+
+/* ── States ─────────────────────────────────────────────────────────────── */
+export function emptyState({ icon: ic = "inbox", title, body, action } = {}) {
+  return h("div.lt3-empty",
+    h("div.lt3-empty__icon", icon(ic)),
+    title && h("div.lt3-empty__title", title),
+    body && h("div.lt3-empty__body", body),
+    action,
+  );
+}
+
+export function loading({ lines = 3, block = false } = {}) {
+  const kids = [];
+  if (block) kids.push(h("div.lt3-skel.lt3-skel--block"));
+  for (let i = 0; i < lines; i++) {
+    kids.push(h("div.lt3-skel.lt3-skel--line", { style: { width: 100 - i * 14 + "%" } }));
+  }
+  return h("div", { "aria-busy": "true", "aria-label": "Loading" }, kids);
+}
+
+export function errorState(message, onRetry) {
+  return h("div.lt3-banner.lt3-banner--err",
+    icon("alert-triangle"),
+    h("div", h("div", { style: { fontWeight: 600 } }, "Couldn't load"), h("div.lt3-faint", message || "Request failed")),
+    onRetry && h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { style: { "margin-left": "auto" }, on: { click: onRetry } }, icon("refresh"), "Retry"),
+  );
+}
+
+export function banner(text, variant = "info", ic = "info-circle") {
+  return h(`div.lt3-banner.lt3-banner--${variant}`, icon(ic), h("div", text));
+}
+
+/* ── Table ──────────────────────────────────────────────────────────────── */
+export function table(columns, rows, { empty } = {}) {
+  if (!rows || !rows.length) {
+    return empty || emptyState({ title: "Nothing here yet", body: "Data will appear once connected." });
+  }
+  return h("div.lt3-table--clip", { style: { overflow: "auto" } },
+    h("table.lt3-table",
+      h("thead", h("tr", columns.map((c) => h("th", { style: c.width ? { width: c.width } : {} }, c.label)))),
+      h("tbody", rows.map((row) => h("tr", columns.map((c) => h("td", c.render ? c.render(row) : row[c.key]))))),
+    ),
+  );
+}
+
+/* ── Tabs / segmented ───────────────────────────────────────────────────── */
+export function tabs(items, active, onChange) {
+  return h("div.lt3-tabs", { role: "tablist" },
+    items.map((it) => h("button.lt3-tab", {
+      role: "tab", type: "button",
+      dataset: { active: String(it.key === active) },
+      "aria-selected": String(it.key === active),
+      on: { click: () => onChange(it.key) },
+    }, it.label)),
+  );
+}
+
+export function segmented(items, active, onChange) {
+  return h("div.lt3-seg", { role: "tablist" },
+    items.map((it) => h("button", {
+      type: "button", role: "tab",
+      dataset: { active: String(it.key === active) },
+      "aria-selected": String(it.key === active),
+      on: { click: () => onChange(it.key) },
+    }, it.label)),
+  );
+}
+
+/* ── Meter ──────────────────────────────────────────────────────────────── */
+export function meter(value, variant = "") {
+  const pct = Math.max(0, Math.min(1, Number(value) || 0)) * 100;
+  return h("div.lt3-meter",
+    h(`div.lt3-meter__fill${variant ? ".lt3-meter__fill--" + variant : ""}`, { style: { width: pct + "%" } }),
+  );
+}
+
+/* ── Retrieval lattice (signature) ──────────────────────────────────────── */
+const PILLAR_DEFS = [
+  { key: "knowledge_graph", kind: "graph", name: "Knowledge Graph", desc: "Entities & relations", icon: "chart-dots-3", unit: "entities", read: (p) => p?.entities },
+  { key: "vector_index", kind: "vector", name: "Vector Index", desc: "Local embedding vectors", icon: "grid-dots", unit: "vectors", read: (p) => p?.vectors },
+  { key: "hybrid", kind: "hybrid", name: "Hybrid Search", desc: "Fused graph + vector", icon: "arrows-join", unit: "fusion", read: (p) => p?.strategy },
+];
+
+export function pillars(indexStatus) {
+  const pipes = indexStatus?.pipelines || {};
+  if (!Object.keys(pipes).length) {
+    return emptyState({
+      icon: "database-off",
+      title: "Retrieval status unavailable",
+      body: "Start the backend with Knowledge Graph enabled to see live index state.",
+    });
+  }
+  return h("div.lt3-pillars",
+    PILLAR_DEFS.map((def) => {
+      const p = pipes[def.key] || {};
+      const raw = def.read(p);
+      const num = typeof raw === "number" ? fmtNum(raw) : (raw || "ready");
+      return h(`article.lt3-pillar.lt3-pillar--${def.kind}`,
+        h("div.lt3-pillar__icon", icon(def.icon)),
+        h("div.lt3-row", { style: { "justify-content": "space-between" } },
+          h("div",
+            h("div.lt3-pillar__name", def.name),
+            h("div.lt3-pillar__desc", def.desc),
+          ),
+          statePill(p.state || "ready"),
+        ),
+        h("div.lt3-pillar__stat",
+          h("span.lt3-pillar__num", num),
+          h("span.lt3-pillar__unit", def.unit),
+        ),
+      );
+    }),
+  );
+}
+
+/** Compact 3-dot index chip for the topbar. */
+export function indexChip(indexStatus) {
+  const pipes = indexStatus?.pipelines || {};
+  const dot = (kind, key) => h("span.lt3-idxchip__dot", {
+    dataset: { kind, on: String((pipes[key]?.state || "ready") === "ready") },
+    title: `${kind}: ${pipes[key]?.state || "—"}`,
+  });
+  return h("div.lt3-idxchip", { title: "Retrieval index status" },
+    h("span.lt3-idxchip__dots", dot("graph", "knowledge_graph"), dot("vector", "vector_index"), dot("hybrid", "hybrid")),
+    h("span", "Index"),
+  );
+}
+
+/* ── Toast ──────────────────────────────────────────────────────────────── */
+export function toast(message, variant = "info") {
+  let host = document.querySelector(".lt3-toasts");
+  if (!host) { host = h("div.lt3-toasts"); document.body.append(host); }
+  const ic = variant === "ok" ? "circle-check" : variant === "err" ? "alert-circle" : "info-circle";
+  const node = h(`div.lt3-toast.lt3-toast--${variant}`, icon(ic), h("div", message));
+  host.append(node);
+  setTimeout(() => { node.style.opacity = "0"; node.style.transition = "opacity .3s"; setTimeout(() => node.remove(), 300); }, 3200);
+}
+
+export { icon, fmtNum };

package/static/v3/js/core/components.js

@@ -75,10 +75,10 @@ export function statePill(state) {
   return pill(String(state || "unknown"), STATE_VARIANT[String(state).toLowerCase()] ?? "", { dot: true });
 }
 
-/** Provenance badge — makes placeholder vs live data explicit. */
+/** Provenance badge — makes live vs unavailable data explicit. */
 export function sourceBadge(source) {
   if (source === "live") return h("span.lt3-source.lt3-source--live", icon("circle-filled"), "Live");
-  if (source === "placeholder") return h("span.lt3-source.lt3-source--placeholder", icon("flask"), "Sample data");
+  if (source === "unavailable") return h("span.lt3-source.lt3-source--unavailable", icon("alert-circle"), "Unavailable");
   return h("span.lt3-source.lt3-source--pending", "—");
 }
 
@@ -166,6 +166,13 @@ const PILLAR_DEFS = [
 
 export function pillars(indexStatus) {
   const pipes = indexStatus?.pipelines || {};
+  if (!Object.keys(pipes).length) {
+    return emptyState({
+      icon: "database-off",
+      title: "Retrieval status unavailable",
+      body: "Start the backend with Knowledge Graph enabled to see live index state.",
+    });
+  }
   return h("div.lt3-pillars",
     PILLAR_DEFS.map((def) => {
       const p = pipes[def.key] || {};