ltcai 3.6.0 → 4.0.1

package/static/v3/js/views/{knowledge-graph.a96040a5.js → knowledge-graph.4d09c537.js}

@@ -8,6 +8,8 @@
  * ========================================================================== */
 
 import { escapeHtml } from "../core/dom.a2773eb0.js";
+import { createGraphCanvas } from "./graph-canvas.17c15d65.js";
+import { t } from "../core/i18n.880e1fec.js";
 
 const TYPE_COLOR = {
   Topic: "var(--lt3-pillar-graph)",
@@ -144,47 +146,42 @@ function buildExplore(ctx) {
     );
   }
 
+  // Live force-directed canvas (zoom / pan / drag / physics) — replaces the
+  // static SVG spiral. The renderer only draws the data it is given.
+  let graphCanvas = null;
+
+  function ensureGraphCanvas() {
+    if (graphCanvas) return graphCanvas;
+    graphCanvas = createGraphCanvas({
+      colorFor,
+      onSelect: (id) => {
+        state.selected = id;
+        renderInspector();
+      },
+    });
+    return graphCanvas;
+  }
+
   function renderCanvas() {
     const { nodes, edges } = state.data;
-    if (!nodes.length) { canvasHost.replaceChildren(c.emptyState({ icon: "chart-dots-3", title: "No entities yet", body: "Index a source to populate the graph." })); return; }
-    const laidOut = layout(nodes);
-    const pos = Object.fromEntries(laidOut.map((n) => [n.id, n]));
-    const W = 1000, H = 600;
-    const edgeSvg = edges.map((e) => {
-      const a = pos[e.from], b = pos[e.to];
-      if (!a || !b) return "";
-      return `<line class="lt3-gedge" x1="${a.px}" y1="${a.py}" x2="${b.px}" y2="${b.py}" stroke-width="${1 + (e.weight || 1) * 0.6}"></line>`;
-    }).join("");
-    const nodeSvg = laidOut.map((n) => {
-      const r = 10 + (n.weight || 0.5) * 16;
-      const sel = state.selected === n.id;
-      return `<g class="lt3-gnode" data-id="${escapeHtml(n.id)}" opacity="${state.selected && !sel && !isNeighbor(n.id) ? 0.35 : 1}">
-        <circle cx="${n.px}" cy="${n.py}" r="${sel ? r + 3 : r}" fill="${colorFor(n.type)}" stroke-width="${sel ? 3 : 2}"></circle>
-        <text x="${n.px}" y="${n.py + r + 13}" text-anchor="middle">${escapeHtml(truncate(n.label, 18))}</text>
-      </g>`;
-    }).join("");
-    canvasHost.replaceChildren(
-      h("div.lt3-graph-canvas", {
-        html: `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Knowledge graph">${edgeSvg}${nodeSvg}</svg>`,
-        on: { click: onCanvasClick },
-      }),
-    );
+    if (!nodes.length) {
+      if (graphCanvas) { graphCanvas.destroy(); graphCanvas = null; }
+      canvasHost.replaceChildren(c.emptyState({ icon: "chart-dots-3", title: "No entities yet", body: "Index a source to populate the graph." }));
+      return;
+    }
+    const gc = ensureGraphCanvas();
+    gc.setData({ nodes, edges });
+    gc.setSelected(state.selected);
+    if (!gc.el.isConnected || gc.el.parentElement !== canvasHost.querySelector(".lt3-graph-canvas")) {
+      canvasHost.replaceChildren(h("div.lt3-graph-canvas", gc.el));
+    }
   }
 
-  function onCanvasClick(e) {
-    const g = e.target.closest(".lt3-gnode");
-    if (!g) return;
-    state.selected = g.dataset.id === state.selected ? null : g.dataset.id;
-    renderCanvas();
+  function syncSelection() {
+    if (graphCanvas) graphCanvas.setSelected(state.selected);
     renderInspector();
   }
 
-  function isNeighbor(id) {
-    if (!state.selected) return false;
-    return state.data.edges.some((e) =>
-      (e.from === state.selected && e.to === id) || (e.to === state.selected && e.from === id));
-  }
-
   function renderInspector() {
     if (state.selected) { inspectorHost.replaceChildren(detailView()); return; }
     const q = state.query;
@@ -199,7 +196,7 @@ function buildExplore(ctx) {
   }
 
   function entityRow(n) {
-    return h("button.lt3-entity", { on: { click: () => { state.selected = n.id; renderCanvas(); renderInspector(); } } },
+    return h("button.lt3-entity", { on: { click: () => { state.selected = n.id; syncSelection(); } } },
       h("div.lt3-entity__type", { style: { background: `color-mix(in srgb, ${colorFor(n.type)} 18%, transparent)`, color: colorFor(n.type) } }, icon(iconForType(n.type))),
       h("div.lt3-entity__body",
         h("div.lt3-entity__name", n.label),
@@ -220,7 +217,7 @@ function buildExplore(ctx) {
       })
       .filter((r) => r.other);
     return h("div.lt3-stack-4",
-      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => { state.selected = null; renderCanvas(); renderInspector(); } } }, icon("arrow-left"), "All entities"),
+      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => { state.selected = null; syncSelection(); } } }, icon("arrow-left"), "All entities"),
       h("div.lt3-card.lt3-card--flat",
         h("div.lt3-row-2", { style: { "margin-bottom": "var(--lt3-space-2)" } },
           h("span.lt3-pill", { style: { color: colorFor(n.type) } }, n.type || "Entity"),
@@ -231,7 +228,7 @@ function buildExplore(ctx) {
       h("div",
         h("div.lt3-eyebrow", { style: { "margin-bottom": "var(--lt3-space-2)" } }, `Relations (${rels.length})`),
         rels.length
-          ? h("div.lt3-stack-2", rels.map((r) => h("button.lt3-entity", { on: { click: () => { state.selected = r.other.id; renderCanvas(); renderInspector(); } } },
+          ? h("div.lt3-stack-2", rels.map((r) => h("button.lt3-entity", { on: { click: () => { state.selected = r.other.id; syncSelection(); } } },
               h("div.lt3-entity__type", { style: { background: "var(--surface-3)" } }, h("span.lt3-mono", { style: { "font-size": "var(--lt3-text-sm)" } }, r.dir)),
               h("div.lt3-entity__body",
                 h("div.lt3-entity__name", r.other.label),
@@ -251,21 +248,25 @@ function buildExplore(ctx) {
 async function renderStatus(ctx, host) {
   const { h, icon, api, c } = ctx;
   host.replaceChildren(c.loading({ lines: 3 }));
-  const [port, gs, idx] = await Promise.all([api.kgPortability(), api.graphStats(), api.indexStatus()]);
+  const [port, gs, idx, coverage] = await Promise.all([api.kgPortability(), api.graphStats(), api.indexStatus(), api.kgProvenanceCoverage()]);
   const p = port.data || {};
   const prov = p.provenance || {};
+  const cov = coverage.data || {};
   const nodes = sumCounts((gs.data && gs.data.nodes) || {});
   const edges = sumCounts((gs.data && gs.data.edges) || {});
   const pipelines = (idx.data && idx.data.pipelines) || {};
+  const ratio = Number(cov.coverage_ratio ?? cov.ratio ?? 0);
+  const covered = Number(cov.nodes_with_provenance ?? cov.covered_nodes ?? 0);
 
   host.replaceChildren(
-    h("div.lt3-row-2", c.sourceBadge(port.source), h("span.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } },
+    h("div.lt3-row-2", c.sourceBadge(port.source === "live" || coverage.source === "live" ? "live" : port.source), h("span.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } },
       p.graph_schema_version != null ? `Schema v${p.graph_schema_version} · embed dim ${p.embed_dim ?? "—"}` : "Knowledge Graph status")),
     h("div.lt3-statrow",
       c.stat({ label: "Entities", value: c.fmtNum(nodes), icon: "circles" }),
       c.stat({ label: "Relations", value: c.fmtNum(edges), icon: "vector-triangle" }),
       c.stat({ label: "Ingested items", value: c.fmtNum(prov.total || 0), icon: "package-import" }),
       c.stat({ label: "Embedded (RAG-ready)", value: c.fmtNum(prov.embedded || 0), icon: "vector" }),
+      c.stat({ label: t("kg.provenanceCoverage"), value: `${Math.round(ratio * 100)}%`, icon: "shield-check", delta: `${covered}/${cov.total_nodes ?? nodes}` }),
     ),
     c.card(
       h("div.lt3-stack-3",
@@ -275,6 +276,14 @@ async function renderStatus(ctx, host) {
         pipelineRow(ctx, "Hybrid retrieval", pipelines.hybrid),
       ),
     ),
+    c.card(h("div.lt3-stack-3",
+      h("div.lt3-eyebrow", t("kg.provenanceCoverage")),
+      h("dl.lt3-keyval",
+        h("dt", t("kg.coveredNodes")), h("dd", `${covered}/${cov.total_nodes ?? nodes}`),
+        h("dt", t("kg.sourceTypes")), h("dd", compactCounts(cov.provenance_by_source_type || cov.by_source_type || {})),
+        h("dt", t("kg.uncoveredTypes")), h("dd", compactCounts(cov.uncovered_by_type || {})),
+      ),
+    )),
     prov.last_ingested_at
       ? h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } }, `Last ingestion: ${fmtWhen(prov.last_ingested_at)} · ${prov.duplicates || 0} duplicate(s) linked, not re-stored.`)
       : c.emptyState({ icon: "package-import", title: "Nothing ingested yet", body: "Add files or capture a page to populate the graph." }),
@@ -331,18 +340,18 @@ function buildCapture(ctx) {
 
   async function run() {
     const url = (input.value || "").trim();
-    if (!url) { result.replaceChildren(c.banner({ tone: "warn", text: "Enter a URL first." })); return; }
+    if (!url) { result.replaceChildren(c.banner("Enter a URL first.", "warn", "alert-triangle")); return; }
     result.replaceChildren(c.loading({ lines: 1 }));
     const res = await api.browserReadUrl(url);
     const d = res.data || {};
     if (res.ok && d.status === "ok") {
-      result.replaceChildren(c.banner({ tone: "ok", text: `Added to your Knowledge Graph${d.duplicate ? " (already present — linked)" : ""}. ${d.chunk_count || 0} chunk(s) indexed.` }));
+      result.replaceChildren(c.banner(`Added to your Knowledge Graph${d.duplicate ? " (already present — linked)" : ""}. ${d.chunk_count || 0} chunk(s) indexed.`, "ok", "circle-check"));
       ctx.toast && ctx.toast("Page added to Knowledge Graph");
     } else if (d.status === "empty") {
-      result.replaceChildren(c.banner({ tone: "warn", text: "No readable text was found on that page." }));
+      result.replaceChildren(c.banner("No readable text was found on that page.", "warn", "alert-triangle"));
     } else {
       const detail = d.detail || (res.status === 422 ? "The page is blocked or login-required." : "Could not read that URL.");
-      result.replaceChildren(c.banner({ tone: "err", text: detail }));
+      result.replaceChildren(c.banner(detail, "err", "alert-triangle"));
     }
   }
 
@@ -370,7 +379,9 @@ async function renderPortability(ctx, host) {
   const port = await api.kgPortability();
   const status = h("div");
 
-  function note(tone, text) { status.replaceChildren(c.banner({ tone, text })); }
+  function note(tone, text) {
+    status.replaceChildren(c.banner(text, tone, tone === "err" ? "alert-triangle" : tone === "ok" ? "circle-check" : "info-circle"));
+  }
 
   async function doExport() {
     note("info", "Exporting…");
@@ -443,6 +454,11 @@ function sumCounts(obj) {
   return Object.values(obj || {}).reduce((a, b) => a + (Number(b) || 0), 0);
 }
 
+function compactCounts(obj) {
+  const entries = Object.entries(obj || {});
+  return entries.length ? entries.map(([k, v]) => `${k}: ${v}`).join(" · ") : "—";
+}
+
 function prettySource(k) {
   return ({ web_url: "Web URL", browser_tab: "Browser tab", file: "Files", local_file: "Local files",
     note: "Notes", text: "Text", markdown: "Markdown", code: "Code", upload: "Uploads" })[k] || k;

package/static/v3/js/views/knowledge-graph.js

@@ -8,6 +8,8 @@
  * ========================================================================== */
 
 import { escapeHtml } from "../core/dom.js";
+import { createGraphCanvas } from "./graph-canvas.js";
+import { t } from "../core/i18n.js";
 
 const TYPE_COLOR = {
   Topic: "var(--lt3-pillar-graph)",
@@ -144,47 +146,42 @@ function buildExplore(ctx) {
     );
   }
 
+  // Live force-directed canvas (zoom / pan / drag / physics) — replaces the
+  // static SVG spiral. The renderer only draws the data it is given.
+  let graphCanvas = null;
+
+  function ensureGraphCanvas() {
+    if (graphCanvas) return graphCanvas;
+    graphCanvas = createGraphCanvas({
+      colorFor,
+      onSelect: (id) => {
+        state.selected = id;
+        renderInspector();
+      },
+    });
+    return graphCanvas;
+  }
+
   function renderCanvas() {
     const { nodes, edges } = state.data;
-    if (!nodes.length) { canvasHost.replaceChildren(c.emptyState({ icon: "chart-dots-3", title: "No entities yet", body: "Index a source to populate the graph." })); return; }
-    const laidOut = layout(nodes);
-    const pos = Object.fromEntries(laidOut.map((n) => [n.id, n]));
-    const W = 1000, H = 600;
-    const edgeSvg = edges.map((e) => {
-      const a = pos[e.from], b = pos[e.to];
-      if (!a || !b) return "";
-      return `<line class="lt3-gedge" x1="${a.px}" y1="${a.py}" x2="${b.px}" y2="${b.py}" stroke-width="${1 + (e.weight || 1) * 0.6}"></line>`;
-    }).join("");
-    const nodeSvg = laidOut.map((n) => {
-      const r = 10 + (n.weight || 0.5) * 16;
-      const sel = state.selected === n.id;
-      return `<g class="lt3-gnode" data-id="${escapeHtml(n.id)}" opacity="${state.selected && !sel && !isNeighbor(n.id) ? 0.35 : 1}">
-        <circle cx="${n.px}" cy="${n.py}" r="${sel ? r + 3 : r}" fill="${colorFor(n.type)}" stroke-width="${sel ? 3 : 2}"></circle>
-        <text x="${n.px}" y="${n.py + r + 13}" text-anchor="middle">${escapeHtml(truncate(n.label, 18))}</text>
-      </g>`;
-    }).join("");
-    canvasHost.replaceChildren(
-      h("div.lt3-graph-canvas", {
-        html: `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Knowledge graph">${edgeSvg}${nodeSvg}</svg>`,
-        on: { click: onCanvasClick },
-      }),
-    );
+    if (!nodes.length) {
+      if (graphCanvas) { graphCanvas.destroy(); graphCanvas = null; }
+      canvasHost.replaceChildren(c.emptyState({ icon: "chart-dots-3", title: "No entities yet", body: "Index a source to populate the graph." }));
+      return;
+    }
+    const gc = ensureGraphCanvas();
+    gc.setData({ nodes, edges });
+    gc.setSelected(state.selected);
+    if (!gc.el.isConnected || gc.el.parentElement !== canvasHost.querySelector(".lt3-graph-canvas")) {
+      canvasHost.replaceChildren(h("div.lt3-graph-canvas", gc.el));
+    }
   }
 
-  function onCanvasClick(e) {
-    const g = e.target.closest(".lt3-gnode");
-    if (!g) return;
-    state.selected = g.dataset.id === state.selected ? null : g.dataset.id;
-    renderCanvas();
+  function syncSelection() {
+    if (graphCanvas) graphCanvas.setSelected(state.selected);
     renderInspector();
   }
 
-  function isNeighbor(id) {
-    if (!state.selected) return false;
-    return state.data.edges.some((e) =>
-      (e.from === state.selected && e.to === id) || (e.to === state.selected && e.from === id));
-  }
-
   function renderInspector() {
     if (state.selected) { inspectorHost.replaceChildren(detailView()); return; }
     const q = state.query;
@@ -199,7 +196,7 @@ function buildExplore(ctx) {
   }
 
   function entityRow(n) {
-    return h("button.lt3-entity", { on: { click: () => { state.selected = n.id; renderCanvas(); renderInspector(); } } },
+    return h("button.lt3-entity", { on: { click: () => { state.selected = n.id; syncSelection(); } } },
       h("div.lt3-entity__type", { style: { background: `color-mix(in srgb, ${colorFor(n.type)} 18%, transparent)`, color: colorFor(n.type) } }, icon(iconForType(n.type))),
       h("div.lt3-entity__body",
         h("div.lt3-entity__name", n.label),
@@ -220,7 +217,7 @@ function buildExplore(ctx) {
       })
       .filter((r) => r.other);
     return h("div.lt3-stack-4",
-      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => { state.selected = null; renderCanvas(); renderInspector(); } } }, icon("arrow-left"), "All entities"),
+      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => { state.selected = null; syncSelection(); } } }, icon("arrow-left"), "All entities"),
       h("div.lt3-card.lt3-card--flat",
         h("div.lt3-row-2", { style: { "margin-bottom": "var(--lt3-space-2)" } },
           h("span.lt3-pill", { style: { color: colorFor(n.type) } }, n.type || "Entity"),
@@ -231,7 +228,7 @@ function buildExplore(ctx) {
       h("div",
         h("div.lt3-eyebrow", { style: { "margin-bottom": "var(--lt3-space-2)" } }, `Relations (${rels.length})`),
         rels.length
-          ? h("div.lt3-stack-2", rels.map((r) => h("button.lt3-entity", { on: { click: () => { state.selected = r.other.id; renderCanvas(); renderInspector(); } } },
+          ? h("div.lt3-stack-2", rels.map((r) => h("button.lt3-entity", { on: { click: () => { state.selected = r.other.id; syncSelection(); } } },
               h("div.lt3-entity__type", { style: { background: "var(--surface-3)" } }, h("span.lt3-mono", { style: { "font-size": "var(--lt3-text-sm)" } }, r.dir)),
               h("div.lt3-entity__body",
                 h("div.lt3-entity__name", r.other.label),
@@ -251,21 +248,25 @@ function buildExplore(ctx) {
 async function renderStatus(ctx, host) {
   const { h, icon, api, c } = ctx;
   host.replaceChildren(c.loading({ lines: 3 }));
-  const [port, gs, idx] = await Promise.all([api.kgPortability(), api.graphStats(), api.indexStatus()]);
+  const [port, gs, idx, coverage] = await Promise.all([api.kgPortability(), api.graphStats(), api.indexStatus(), api.kgProvenanceCoverage()]);
   const p = port.data || {};
   const prov = p.provenance || {};
+  const cov = coverage.data || {};
   const nodes = sumCounts((gs.data && gs.data.nodes) || {});
   const edges = sumCounts((gs.data && gs.data.edges) || {});
   const pipelines = (idx.data && idx.data.pipelines) || {};
+  const ratio = Number(cov.coverage_ratio ?? cov.ratio ?? 0);
+  const covered = Number(cov.nodes_with_provenance ?? cov.covered_nodes ?? 0);
 
   host.replaceChildren(
-    h("div.lt3-row-2", c.sourceBadge(port.source), h("span.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } },
+    h("div.lt3-row-2", c.sourceBadge(port.source === "live" || coverage.source === "live" ? "live" : port.source), h("span.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } },
       p.graph_schema_version != null ? `Schema v${p.graph_schema_version} · embed dim ${p.embed_dim ?? "—"}` : "Knowledge Graph status")),
     h("div.lt3-statrow",
       c.stat({ label: "Entities", value: c.fmtNum(nodes), icon: "circles" }),
       c.stat({ label: "Relations", value: c.fmtNum(edges), icon: "vector-triangle" }),
       c.stat({ label: "Ingested items", value: c.fmtNum(prov.total || 0), icon: "package-import" }),
       c.stat({ label: "Embedded (RAG-ready)", value: c.fmtNum(prov.embedded || 0), icon: "vector" }),
+      c.stat({ label: t("kg.provenanceCoverage"), value: `${Math.round(ratio * 100)}%`, icon: "shield-check", delta: `${covered}/${cov.total_nodes ?? nodes}` }),
     ),
     c.card(
       h("div.lt3-stack-3",
@@ -275,6 +276,14 @@ async function renderStatus(ctx, host) {
         pipelineRow(ctx, "Hybrid retrieval", pipelines.hybrid),
       ),
     ),
+    c.card(h("div.lt3-stack-3",
+      h("div.lt3-eyebrow", t("kg.provenanceCoverage")),
+      h("dl.lt3-keyval",
+        h("dt", t("kg.coveredNodes")), h("dd", `${covered}/${cov.total_nodes ?? nodes}`),
+        h("dt", t("kg.sourceTypes")), h("dd", compactCounts(cov.provenance_by_source_type || cov.by_source_type || {})),
+        h("dt", t("kg.uncoveredTypes")), h("dd", compactCounts(cov.uncovered_by_type || {})),
+      ),
+    )),
     prov.last_ingested_at
       ? h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)" } }, `Last ingestion: ${fmtWhen(prov.last_ingested_at)} · ${prov.duplicates || 0} duplicate(s) linked, not re-stored.`)
       : c.emptyState({ icon: "package-import", title: "Nothing ingested yet", body: "Add files or capture a page to populate the graph." }),
@@ -331,18 +340,18 @@ function buildCapture(ctx) {
 
   async function run() {
     const url = (input.value || "").trim();
-    if (!url) { result.replaceChildren(c.banner({ tone: "warn", text: "Enter a URL first." })); return; }
+    if (!url) { result.replaceChildren(c.banner("Enter a URL first.", "warn", "alert-triangle")); return; }
     result.replaceChildren(c.loading({ lines: 1 }));
     const res = await api.browserReadUrl(url);
     const d = res.data || {};
     if (res.ok && d.status === "ok") {
-      result.replaceChildren(c.banner({ tone: "ok", text: `Added to your Knowledge Graph${d.duplicate ? " (already present — linked)" : ""}. ${d.chunk_count || 0} chunk(s) indexed.` }));
+      result.replaceChildren(c.banner(`Added to your Knowledge Graph${d.duplicate ? " (already present — linked)" : ""}. ${d.chunk_count || 0} chunk(s) indexed.`, "ok", "circle-check"));
       ctx.toast && ctx.toast("Page added to Knowledge Graph");
     } else if (d.status === "empty") {
-      result.replaceChildren(c.banner({ tone: "warn", text: "No readable text was found on that page." }));
+      result.replaceChildren(c.banner("No readable text was found on that page.", "warn", "alert-triangle"));
     } else {
       const detail = d.detail || (res.status === 422 ? "The page is blocked or login-required." : "Could not read that URL.");
-      result.replaceChildren(c.banner({ tone: "err", text: detail }));
+      result.replaceChildren(c.banner(detail, "err", "alert-triangle"));
     }
   }
 
@@ -370,7 +379,9 @@ async function renderPortability(ctx, host) {
   const port = await api.kgPortability();
   const status = h("div");
 
-  function note(tone, text) { status.replaceChildren(c.banner({ tone, text })); }
+  function note(tone, text) {
+    status.replaceChildren(c.banner(text, tone, tone === "err" ? "alert-triangle" : tone === "ok" ? "circle-check" : "info-circle"));
+  }
 
   async function doExport() {
     note("info", "Exporting…");
@@ -443,6 +454,11 @@ function sumCounts(obj) {
   return Object.values(obj || {}).reduce((a, b) => a + (Number(b) || 0), 0);
 }
 
+function compactCounts(obj) {
+  const entries = Object.entries(obj || {});
+  return entries.length ? entries.map(([k, v]) => `${k}: ${v}`).join(" · ") : "—";
+}
+
 function prettySource(k) {
   return ({ web_url: "Web URL", browser_tab: "Browser tab", file: "Files", local_file: "Local files",
     note: "Notes", text: "Text", markdown: "Markdown", code: "Code", upload: "Uploads" })[k] || k;

package/static/v3/js/views/network.52a4f181.js

@@ -0,0 +1,97 @@
+import { t } from "../core/i18n.880e1fec.js";
+
+export async function render(ctx) {
+  const { h, icon, api, c, toast, store } = ctx;
+  const host = h("div.lt3-stack-6", c.loading({ lines: 5, block: true }));
+
+  async function load() {
+    const [identity, peers] = await Promise.all([api.networkIdentity(), api.networkPeers()]);
+    host.replaceChildren(
+      c.viewHeader({
+        eyebrow: t("network.eyebrow"),
+        title: t("network.title"),
+        sub: t("network.sub"),
+        actions: [c.sourceBadge(identity.source === "live" || peers.source === "live" ? "live" : "unavailable")],
+      }),
+      identityPanel(identity),
+      pairPanel(),
+      peersPanel(peers),
+    );
+  }
+
+  function identityPanel(res) {
+    const d = res.data || {};
+    return c.panel({
+      title: t("network.identity"),
+      actions: [c.sourceBadge(res.source)],
+      children: h("dl.lt3-keyval",
+        h("dt", "device_id"), h("dd", h("span.lt3-mono", d.device_id || d.id || "—")),
+        h("dt", "fingerprint"), h("dd", h("span.lt3-mono", d.fingerprint || d.public_key_fingerprint || "—")),
+        h("dt", t("network.publicKey")), h("dd", h("pre.lt3-code", truncate(d.public_key || "—", 420))),
+      ),
+    });
+  }
+
+  function pairPanel() {
+    const name = h("input.lt3-input", { type: "text", placeholder: t("network.peerName"), "aria-label": t("network.peerName") });
+    const base = h("input.lt3-input", { type: "url", placeholder: t("network.baseUrl"), "aria-label": t("network.baseUrl") });
+    const key = h("textarea.lt3-textarea", { rows: 3, placeholder: t("network.publicKey"), "aria-label": t("network.publicKey") });
+    return c.panel({
+      title: t("network.pair"),
+      children: h("div.lt3-stack-4",
+        h("div.lt3-grid-2", field(ctx, t("network.peerName"), name), field(ctx, t("network.baseUrl"), base)),
+        field(ctx, t("network.publicKey"), key),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: async () => {
+          const res = await api.pairPeer({ name: name.value.trim(), base_url: base.value.trim(), public_key: key.value.trim() });
+          toast(resultText(res, t("network.paired")), res.ok ? "ok" : "err");
+          if (res.ok) load();
+        } } }, icon("link"), t("network.pair")),
+      ),
+    });
+  }
+
+  function peersPanel(res) {
+    const rows = Array.isArray(res.data?.peers) ? res.data.peers : [];
+    return c.panel({
+      title: t("network.peers"),
+      actions: [c.sourceBadge(res.source)],
+      children: rows.length ? c.table([
+        { key: "name", label: t("common.name"), render: (p) => h("div", h("b", p.name || p.peer_id || p.id), h("div.lt3-faint", { style: { "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-2xs)" } }, p.peer_id || p.id || "")) },
+        { key: "base", label: t("network.baseUrl"), render: (p) => p.base_url || "—" },
+        { key: "fp", label: "fingerprint", render: (p) => h("span.lt3-mono", p.fingerprint || p.public_key_fingerprint || "—") },
+        { key: "act", label: "", width: "1%", render: (p) => h("div.lt3-row-2",
+          h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => pushPeer(p.peer_id || p.id) } }, icon("send"), t("network.push")),
+          h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => unpairPeer(p.peer_id || p.id) } }, icon("unlink"), t("network.unpair")),
+        ) },
+      ], rows) : c.emptyState({ icon: "network-off", title: t("network.peers"), body: t("common.none") }),
+    });
+  }
+
+  async function pushPeer(peerId) {
+    const res = await api.pushPeer(peerId, store.get().workspaceId);
+    toast(resultText(res, t("network.pushed")), res.ok ? "ok" : "err");
+  }
+  async function unpairPeer(peerId) {
+    const res = await api.unpairPeer(peerId);
+    toast(resultText(res, t("network.unpaired")), res.ok ? "ok" : "err");
+    if (res.ok) load();
+  }
+
+  await load();
+  return host;
+}
+
+function field({ h }, label, control) {
+  return h("div.lt3-field", h("label.lt3-label", label), control);
+}
+
+function truncate(value, n) {
+  const s = String(value || "");
+  return s.length > n ? `${s.slice(0, n)}…` : s;
+}
+
+function resultText(res, okText) {
+  if (res && res.ok) return okText;
+  const data = (res && res.data) || {};
+  return String(data.detail || data.error || res?.error || t("common.unavailable"));
+}

package/static/v3/js/views/network.js

@@ -0,0 +1,97 @@
+import { t } from "../core/i18n.js";
+
+export async function render(ctx) {
+  const { h, icon, api, c, toast, store } = ctx;
+  const host = h("div.lt3-stack-6", c.loading({ lines: 5, block: true }));
+
+  async function load() {
+    const [identity, peers] = await Promise.all([api.networkIdentity(), api.networkPeers()]);
+    host.replaceChildren(
+      c.viewHeader({
+        eyebrow: t("network.eyebrow"),
+        title: t("network.title"),
+        sub: t("network.sub"),
+        actions: [c.sourceBadge(identity.source === "live" || peers.source === "live" ? "live" : "unavailable")],
+      }),
+      identityPanel(identity),
+      pairPanel(),
+      peersPanel(peers),
+    );
+  }
+
+  function identityPanel(res) {
+    const d = res.data || {};
+    return c.panel({
+      title: t("network.identity"),
+      actions: [c.sourceBadge(res.source)],
+      children: h("dl.lt3-keyval",
+        h("dt", "device_id"), h("dd", h("span.lt3-mono", d.device_id || d.id || "—")),
+        h("dt", "fingerprint"), h("dd", h("span.lt3-mono", d.fingerprint || d.public_key_fingerprint || "—")),
+        h("dt", t("network.publicKey")), h("dd", h("pre.lt3-code", truncate(d.public_key || "—", 420))),
+      ),
+    });
+  }
+
+  function pairPanel() {
+    const name = h("input.lt3-input", { type: "text", placeholder: t("network.peerName"), "aria-label": t("network.peerName") });
+    const base = h("input.lt3-input", { type: "url", placeholder: t("network.baseUrl"), "aria-label": t("network.baseUrl") });
+    const key = h("textarea.lt3-textarea", { rows: 3, placeholder: t("network.publicKey"), "aria-label": t("network.publicKey") });
+    return c.panel({
+      title: t("network.pair"),
+      children: h("div.lt3-stack-4",
+        h("div.lt3-grid-2", field(ctx, t("network.peerName"), name), field(ctx, t("network.baseUrl"), base)),
+        field(ctx, t("network.publicKey"), key),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: async () => {
+          const res = await api.pairPeer({ name: name.value.trim(), base_url: base.value.trim(), public_key: key.value.trim() });
+          toast(resultText(res, t("network.paired")), res.ok ? "ok" : "err");
+          if (res.ok) load();
+        } } }, icon("link"), t("network.pair")),
+      ),
+    });
+  }
+
+  function peersPanel(res) {
+    const rows = Array.isArray(res.data?.peers) ? res.data.peers : [];
+    return c.panel({
+      title: t("network.peers"),
+      actions: [c.sourceBadge(res.source)],
+      children: rows.length ? c.table([
+        { key: "name", label: t("common.name"), render: (p) => h("div", h("b", p.name || p.peer_id || p.id), h("div.lt3-faint", { style: { "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-2xs)" } }, p.peer_id || p.id || "")) },
+        { key: "base", label: t("network.baseUrl"), render: (p) => p.base_url || "—" },
+        { key: "fp", label: "fingerprint", render: (p) => h("span.lt3-mono", p.fingerprint || p.public_key_fingerprint || "—") },
+        { key: "act", label: "", width: "1%", render: (p) => h("div.lt3-row-2",
+          h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => pushPeer(p.peer_id || p.id) } }, icon("send"), t("network.push")),
+          h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => unpairPeer(p.peer_id || p.id) } }, icon("unlink"), t("network.unpair")),
+        ) },
+      ], rows) : c.emptyState({ icon: "network-off", title: t("network.peers"), body: t("common.none") }),
+    });
+  }
+
+  async function pushPeer(peerId) {
+    const res = await api.pushPeer(peerId, store.get().workspaceId);
+    toast(resultText(res, t("network.pushed")), res.ok ? "ok" : "err");
+  }
+  async function unpairPeer(peerId) {
+    const res = await api.unpairPeer(peerId);
+    toast(resultText(res, t("network.unpaired")), res.ok ? "ok" : "err");
+    if (res.ok) load();
+  }
+
+  await load();
+  return host;
+}
+
+function field({ h }, label, control) {
+  return h("div.lt3-field", h("label.lt3-label", label), control);
+}
+
+function truncate(value, n) {
+  const s = String(value || "");
+  return s.length > n ? `${s.slice(0, n)}…` : s;
+}
+
+function resultText(res, okText) {
+  if (res && res.ok) return okText;
+  const data = (res && res.data) || {};
+  return String(data.detail || data.error || res?.error || t("common.unavailable"));
+}