ltcai 3.0.1 → 3.2.0

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

@@ -0,0 +1,237 @@
+/* ============================================================================
+ * View: Knowledge Graph — entity/relation explorer.
+ * Renders the graph as an SVG mesh against /api/graph with a live inspector.
+ * Missing graph data renders an empty unavailable state.
+ * ========================================================================== */
+
+import { escapeHtml } from "../core/dom.a2773eb0.js";
+
+const TYPE_COLOR = {
+  Topic: "var(--lt3-pillar-graph)",
+  Concept: "var(--lt3-pillar-vector)",
+  Method: "var(--lt3-pillar-hybrid)",
+  Model: "var(--accent-3)",
+  File: "var(--faint)",
+  Decision: "var(--accent-3)",
+  Task: "var(--accent-2)",
+  Person: "var(--accent-pink)",
+  default: "var(--accent)",
+};
+const colorFor = (t) => TYPE_COLOR[t] || TYPE_COLOR.default;
+
+export async function render(ctx) {
+  const { h, icon, api, store, c } = ctx;
+
+  const state = { selected: null, query: "", data: { nodes: [], edges: [] }, source: "pending" };
+
+  const canvasHost = h("div", c.loading({ lines: 0, block: true }));
+  const inspectorHost = h("div", c.loading({ lines: 4 }));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const srcSlot = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Retrieval · structure",
+      title: "Knowledge Graph",
+      sub: "Entities and the relations the workspace extracted between them. Click a node to trace its neighborhood.",
+      actions: [
+        srcSlot,
+        h("button.lt3-btn.lt3-btn--ghost", { on: { click: () => load() } }, icon("refresh"), "Rebuild view"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: () => ctx.navigate("hybrid-search") } }, icon("arrows-join"), "Search graph"),
+      ],
+    }),
+    statHost,
+    h("div.lt3-split",
+      h("div.lt3-stack-3",
+        c.card(canvasHost, { attrs: { style: "padding:0;overflow:hidden" } }),
+        buildLegend(ctx),
+      ),
+      h("aside.lt3-panel",
+        h("div.lt3-panel__head", h("div", h("div.lt3-eyebrow", "Inspector"), h("h3.lt3-panel__title", "Entities"))),
+        h("div.lt3-search", { style: { "margin-bottom": "var(--lt3-space-4)" } },
+          icon("search"),
+          h("input", { type: "text", placeholder: "Filter entities…", "aria-label": "Filter entities",
+            on: { input: (e) => { state.query = e.target.value.toLowerCase(); renderInspector(); } } }),
+        ),
+        inspectorHost,
+      ),
+    ),
+  );
+
+  async function load() {
+    canvasHost.replaceChildren(c.loading({ lines: 0, block: true }));
+    const [g, stats] = await Promise.all([api.graph(), api.graphStats()]);
+    state.data = normalize(g.data);
+    state.source = g.source;
+    srcSlot.replaceChildren(c.sourceBadge(g.source));
+    renderStats(stats.data, g.data);
+    renderCanvas();
+    renderInspector();
+  }
+
+  function renderStats(stats, graphData) {
+    const nodes = state.data.nodes.length;
+    const edges = state.data.edges.length;
+    const types = stats && stats.nodes ? Object.keys(stats.nodes).length : new Set(state.data.nodes.map((n) => n.type)).size;
+    const density = nodes > 1 ? (edges / (nodes * (nodes - 1) / 2)) : 0;
+    statHost.replaceChildren(
+      c.stat({ label: "Entities", value: c.fmtNum(nodes), icon: "circles" }),
+      c.stat({ label: "Relations", value: c.fmtNum(edges), icon: "vector-triangle" }),
+      c.stat({ label: "Entity types", value: types, icon: "category" }),
+      c.stat({ label: "Density", value: density.toFixed(2), icon: "chart-dots" }),
+    );
+  }
+
+  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 },
+      }),
+    );
+  }
+
+  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();
+    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;
+    const list = state.data.nodes
+      .filter((n) => !q || (n.label || "").toLowerCase().includes(q) || (n.type || "").toLowerCase().includes(q))
+      .sort((a, b) => (b.weight || 0) - (a.weight || 0));
+    inspectorHost.replaceChildren(
+      list.length
+        ? h("div.lt3-stack-2", list.slice(0, 60).map((n) => entityRow(n)))
+        : c.emptyState({ icon: "search-off", title: "No matches", body: "Try a different entity name." }),
+    );
+  }
+
+  function entityRow(n) {
+    return h("button.lt3-entity", { on: { click: () => { state.selected = n.id; renderCanvas(); renderInspector(); } } },
+      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),
+        h("div.lt3-entity__meta", `${n.type || "Entity"} · weight ${(n.weight || 0).toFixed(2)}`),
+      ),
+    );
+  }
+
+  function detailView() {
+    const n = state.data.nodes.find((x) => x.id === state.selected);
+    if (!n) { state.selected = null; return c.emptyState({ title: "Not found" }); }
+    const rels = state.data.edges
+      .filter((e) => e.from === n.id || e.to === n.id)
+      .map((e) => {
+        const otherId = e.from === n.id ? e.to : e.from;
+        const other = state.data.nodes.find((x) => x.id === otherId);
+        return { type: e.type, dir: e.from === n.id ? "→" : "←", other };
+      })
+      .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("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"),
+        ),
+        h("div", { style: { "font-size": "var(--lt3-text-lg)", "font-weight": 700 } }, n.label),
+        n.summary && h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)", "margin-top": "var(--lt3-space-2)" } }, n.summary),
+      ),
+      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-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),
+                h("div.lt3-entity__meta", r.type),
+              ),
+            )))
+          : c.emptyState({ icon: "unlink", title: "No relations", body: "This entity is currently isolated." }),
+      ),
+    );
+  }
+
+  load();
+  return root;
+}
+
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+function normalize(data) {
+  const nodes = (data.nodes || []).map((n) => ({
+    id: n.id,
+    label: n.label || n.title || n.id,
+    type: n.type || "Entity",
+    weight: n.weight ?? n.importance_norm ?? (n.metadata && n.metadata.graph_metrics && n.metadata.graph_metrics.importance_norm) ?? 0.5,
+    summary: n.summary || "",
+    x: n.x, y: n.y,
+  }));
+  const ids = new Set(nodes.map((n) => n.id));
+  const edges = (data.edges || []).filter((e) => ids.has(e.from) && ids.has(e.to))
+    .map((e) => ({ from: e.from, to: e.to, type: e.type || "related", weight: e.weight || 1 }));
+  return { nodes, edges };
+}
+
+function layout(nodes) {
+  const W = 1000, H = 600, cx = W / 2, cy = H / 2;
+  const golden = Math.PI * (3 - Math.sqrt(5));
+  const hasCoords = nodes.length && nodes.every((n) => typeof n.x === "number" && typeof n.y === "number");
+  if (hasCoords) {
+    return nodes.map((n) => ({ ...n, px: Math.round(60 + n.x * (W - 120)), py: Math.round(50 + n.y * (H - 100)) }));
+  }
+  // Sunflower (Vogel) spread — even spacing, highest-weight entity centered.
+  const order = nodes.map((n, i) => ({ n, i })).sort((a, b) => (b.n.weight || 0) - (a.n.weight || 0));
+  const maxR = Math.min(W, H) * 0.42;
+  const placed = {};
+  order.forEach((o, rank) => {
+    const radius = rank === 0 ? 0 : maxR * Math.sqrt(rank / Math.max(1, nodes.length - 1));
+    const angle = rank * golden;
+    placed[o.i] = {
+      px: Math.round(cx + Math.cos(angle) * radius),
+      py: Math.round(cy + Math.sin(angle) * radius * 0.66),
+    };
+  });
+  return nodes.map((n, i) => ({ ...n, ...placed[i] }));
+}
+
+function truncate(s, n) { s = String(s || ""); return s.length > n ? s.slice(0, n - 1) + "…" : s; }
+
+function iconForType(t) {
+  return ({ Topic: "bulb", Concept: "atom", Method: "function", Model: "cpu", File: "file", Decision: "gavel", Task: "checkbox", Person: "user" })[t] || "point";
+}
+
+function buildLegend({ h }) {
+  const types = ["Topic", "Concept", "Method", "Model", "File"];
+  return h("div.lt3-graph-legend",
+    types.map((t) => h("span", h("i", { style: { background: colorFor(t) } }), t)),
+  );
+}

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

@@ -1,8 +1,7 @@
 /* ============================================================================
  * View: Knowledge Graph — entity/relation explorer.
- * Renders the graph as an SVG mesh (integration-ready against /api/graph) with
- * a live inspector. Falls back to clearly-badged sample data when the backend
- * graph endpoint isn't available yet.
+ * Renders the graph as an SVG mesh against /api/graph with a live inspector.
+ * Missing graph data renders an empty unavailable state.
  * ========================================================================== */
 
 import { escapeHtml } from "../core/dom.js";

package/static/v3/js/views/marketplace.ab0583d4.js

@@ -0,0 +1,141 @@
+/* ============================================================================
+ * View: Marketplace — agent templates, plugins, and skills.
+ * Templates come from /marketplace/templates (offline local catalog incl. the
+ * five named agent templates). Install / Clone / Export use the real backend.
+ * Plugins and skills marketplace read live directories; unavailable is shown
+ * honestly with no fabricated catalog.
+ * ========================================================================== */
+
+const KIND_VARIANT = { agent: "info", workflow: "warn", plugin: "" };
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const body = h("div", c.loading({ lines: 4, block: true }));
+  let tab = "templates";
+
+  const tabsEl = c.tabs(
+    [{ key: "templates", label: "Templates" }, { key: "plugins", label: "Plugins" }, { key: "skills", label: "Skills" }],
+    tab, (k) => { tab = k; paint(); },
+  );
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Marketplace",
+      sub: "Reusable agent templates, plugins, and skills — install, clone, customize, export, and import, all from /app.",
+    }),
+    tabsEl,
+    body,
+  );
+
+  paint();
+  return root;
+
+  function paint() {
+    [...tabsEl.querySelectorAll(".lt3-tab")].forEach((b, i) => { b.dataset.active = String(["templates", "plugins", "skills"][i] === tab); });
+    body.replaceChildren(c.loading({ lines: 3, block: true }));
+    if (tab === "templates") return paintTemplates();
+    if (tab === "plugins") return paintPlugins();
+    return paintSkills();
+  }
+
+  async function paintTemplates() {
+    const res = await ctx.api.templates();
+    const list = (res.data && res.data.templates) || [];
+    if (!list.length) {
+      body.replaceChildren(stateRow(ctx, res.source), c.emptyState({ icon: "package-off", title: "Catalog unavailable", body: "Start the backend to load the template catalog." }));
+      return;
+    }
+    const byKind = {};
+    for (const t of list) (byKind[t.kind] = byKind[t.kind] || []).push(t);
+    const sections = Object.keys(byKind).map((kind) =>
+      h("section",
+        c.sectionHead(`${cap(kind)} templates`, c.pill(String(byKind[kind].length))),
+        h("div.lt3-grid-auto", byKind[kind].map((t) => templateCard(ctx, t))),
+      ));
+    body.replaceChildren(h("div.lt3-stack-6", stateRow(ctx, res.source), ...sections));
+  }
+
+  function templateCard(ctx2, t) {
+    const def = t.definition || {};
+    const caps = def.capabilities || def.roles || [];
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div", h("b", t.name), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, t.id)),
+        c.pill(t.kind, KIND_VARIANT[t.kind] || ""),
+      ),
+      h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, t.description || ""),
+      caps.length ? h("div.lt3-cluster", caps.slice(0, 6).map((x) => h("span.lt3-chip", x))) : null,
+      h("div.lt3-row-2",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => install(ctx2, t) } }, c.icon("download"), "Install"),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => clone(ctx2, t) } }, c.icon("copy"), "Clone"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => exportT(ctx2, t) } }, c.icon("file-export"), "Export"),
+      ),
+      h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `v${t.version || "1.0.0"} · ${(t.metadata && t.metadata.category) || "general"}`),
+    ), { interactive: false });
+  }
+
+  async function install(ctx2, t) {
+    const res = await ctx2.api.installTemplate(t);
+    ctx2.toast(res && res.ok ? `Installed ${t.name}` : "Install unavailable", res && res.ok ? "ok" : "err");
+  }
+  async function clone(ctx2, t) {
+    const res = await ctx2.api.cloneTemplate(t.kind, t.id, `${t.name} (Copy)`);
+    ctx2.toast(res && res.ok ? `Cloned to ${res.data.template.id}` : "Clone unavailable", res && res.ok ? "ok" : "err");
+  }
+  async function exportT(ctx2, t) {
+    const res = await ctx2.api.exportTemplate(t.kind, t.id);
+    if (res && res.ok && res.data) {
+      try {
+        const blob = new Blob([JSON.stringify(res.data, null, 2)], { type: "application/json" });
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob); a.download = `${t.id}.template.json`; a.click();
+        URL.revokeObjectURL(a.href);
+        ctx2.toast("Exported template", "ok");
+      } catch { ctx2.toast("Export failed", "err"); }
+    } else { ctx2.toast("Export unavailable", "err"); }
+  }
+
+  async function paintPlugins() {
+    const [reg, dir] = await Promise.all([ctx.api.pluginsRegistry(), ctx.api.pluginsDirectory()]);
+    const installed = (reg.data && reg.data.plugins) || [];
+    const directory = (dir.data && dir.data.plugins) || [];
+    if (!installed.length && !directory.length) {
+      body.replaceChildren(stateRow(ctx, reg.source), c.emptyState({ icon: "plug-off", title: "No plugins", body: "Plugin registry and directory are unavailable." }));
+      return;
+    }
+    body.replaceChildren(h("div.lt3-stack-6",
+      stateRow(ctx, reg.source),
+      h("section", c.sectionHead("Installed plugins", c.pill(String(installed.length))),
+        installed.length ? h("div.lt3-grid-auto", installed.map((p) => simpleCard(ctx, p.name || p.id, p.description, p.version, "ok"))) : hint(ctx, "No plugins installed.")),
+      h("section", c.sectionHead("Directory", c.pill(String(directory.length))),
+        directory.length ? h("div.lt3-grid-auto", directory.slice(0, 30).map((p) => simpleCard(ctx, p.name, p.description, p.version, null, p.author))) : hint(ctx, "Directory unavailable.")),
+    ));
+  }
+
+  async function paintSkills() {
+    const res = await ctx.api.skillsMarketplace();
+    const skills = (res.data && res.data.skills) || [];
+    body.replaceChildren(h("div.lt3-stack-3",
+      stateRow(ctx, res.source),
+      h("p.lt3-faint", { style: { margin: 0 } }, "Manage installed skills in the Skills view; this is the discovery catalog."),
+      skills.length
+        ? h("div.lt3-grid-auto", skills.slice(0, 40).map((s) => simpleCard(ctx, s.skill || s.name, s.description, s.version, s.installed ? "ok" : null, s.author)))
+        : c.emptyState({ icon: "puzzle-off", title: "Skills catalog unavailable", body: "The skills marketplace did not respond." }),
+    ));
+  }
+}
+
+function stateRow(ctx, source) {
+  return ctx.h("div.lt3-row-2", { style: { "justify-content": "flex-end" } }, ctx.c.sourceBadge(source));
+}
+function simpleCard(ctx, name, desc, version, state, author) {
+  const { h, c } = ctx;
+  return c.card(h("div.lt3-stack-2",
+    h("div.lt3-row", { style: { "justify-content": "space-between" } }, h("b", name || "Untitled"), state ? c.statePill(state === "ok" ? "ready" : state) : null),
+    h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, desc || ""),
+    h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, [version ? `v${version}` : null, author ? `by ${author}` : null].filter(Boolean).join(" · ")),
+  ), { flat: true });
+}
+function hint(ctx, text) { return ctx.h("p.lt3-faint", { style: { margin: 0 } }, text); }
+function cap(s) { return String(s || "").charAt(0).toUpperCase() + String(s || "").slice(1); }

package/static/v3/js/views/marketplace.js

@@ -0,0 +1,141 @@
+/* ============================================================================
+ * View: Marketplace — agent templates, plugins, and skills.
+ * Templates come from /marketplace/templates (offline local catalog incl. the
+ * five named agent templates). Install / Clone / Export use the real backend.
+ * Plugins and skills marketplace read live directories; unavailable is shown
+ * honestly with no fabricated catalog.
+ * ========================================================================== */
+
+const KIND_VARIANT = { agent: "info", workflow: "warn", plugin: "" };
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const body = h("div", c.loading({ lines: 4, block: true }));
+  let tab = "templates";
+
+  const tabsEl = c.tabs(
+    [{ key: "templates", label: "Templates" }, { key: "plugins", label: "Plugins" }, { key: "skills", label: "Skills" }],
+    tab, (k) => { tab = k; paint(); },
+  );
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Marketplace",
+      sub: "Reusable agent templates, plugins, and skills — install, clone, customize, export, and import, all from /app.",
+    }),
+    tabsEl,
+    body,
+  );
+
+  paint();
+  return root;
+
+  function paint() {
+    [...tabsEl.querySelectorAll(".lt3-tab")].forEach((b, i) => { b.dataset.active = String(["templates", "plugins", "skills"][i] === tab); });
+    body.replaceChildren(c.loading({ lines: 3, block: true }));
+    if (tab === "templates") return paintTemplates();
+    if (tab === "plugins") return paintPlugins();
+    return paintSkills();
+  }
+
+  async function paintTemplates() {
+    const res = await ctx.api.templates();
+    const list = (res.data && res.data.templates) || [];
+    if (!list.length) {
+      body.replaceChildren(stateRow(ctx, res.source), c.emptyState({ icon: "package-off", title: "Catalog unavailable", body: "Start the backend to load the template catalog." }));
+      return;
+    }
+    const byKind = {};
+    for (const t of list) (byKind[t.kind] = byKind[t.kind] || []).push(t);
+    const sections = Object.keys(byKind).map((kind) =>
+      h("section",
+        c.sectionHead(`${cap(kind)} templates`, c.pill(String(byKind[kind].length))),
+        h("div.lt3-grid-auto", byKind[kind].map((t) => templateCard(ctx, t))),
+      ));
+    body.replaceChildren(h("div.lt3-stack-6", stateRow(ctx, res.source), ...sections));
+  }
+
+  function templateCard(ctx2, t) {
+    const def = t.definition || {};
+    const caps = def.capabilities || def.roles || [];
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div", h("b", t.name), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)" } }, t.id)),
+        c.pill(t.kind, KIND_VARIANT[t.kind] || ""),
+      ),
+      h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, t.description || ""),
+      caps.length ? h("div.lt3-cluster", caps.slice(0, 6).map((x) => h("span.lt3-chip", x))) : null,
+      h("div.lt3-row-2",
+        h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => install(ctx2, t) } }, c.icon("download"), "Install"),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => clone(ctx2, t) } }, c.icon("copy"), "Clone"),
+        h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => exportT(ctx2, t) } }, c.icon("file-export"), "Export"),
+      ),
+      h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `v${t.version || "1.0.0"} · ${(t.metadata && t.metadata.category) || "general"}`),
+    ), { interactive: false });
+  }
+
+  async function install(ctx2, t) {
+    const res = await ctx2.api.installTemplate(t);
+    ctx2.toast(res && res.ok ? `Installed ${t.name}` : "Install unavailable", res && res.ok ? "ok" : "err");
+  }
+  async function clone(ctx2, t) {
+    const res = await ctx2.api.cloneTemplate(t.kind, t.id, `${t.name} (Copy)`);
+    ctx2.toast(res && res.ok ? `Cloned to ${res.data.template.id}` : "Clone unavailable", res && res.ok ? "ok" : "err");
+  }
+  async function exportT(ctx2, t) {
+    const res = await ctx2.api.exportTemplate(t.kind, t.id);
+    if (res && res.ok && res.data) {
+      try {
+        const blob = new Blob([JSON.stringify(res.data, null, 2)], { type: "application/json" });
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob); a.download = `${t.id}.template.json`; a.click();
+        URL.revokeObjectURL(a.href);
+        ctx2.toast("Exported template", "ok");
+      } catch { ctx2.toast("Export failed", "err"); }
+    } else { ctx2.toast("Export unavailable", "err"); }
+  }
+
+  async function paintPlugins() {
+    const [reg, dir] = await Promise.all([ctx.api.pluginsRegistry(), ctx.api.pluginsDirectory()]);
+    const installed = (reg.data && reg.data.plugins) || [];
+    const directory = (dir.data && dir.data.plugins) || [];
+    if (!installed.length && !directory.length) {
+      body.replaceChildren(stateRow(ctx, reg.source), c.emptyState({ icon: "plug-off", title: "No plugins", body: "Plugin registry and directory are unavailable." }));
+      return;
+    }
+    body.replaceChildren(h("div.lt3-stack-6",
+      stateRow(ctx, reg.source),
+      h("section", c.sectionHead("Installed plugins", c.pill(String(installed.length))),
+        installed.length ? h("div.lt3-grid-auto", installed.map((p) => simpleCard(ctx, p.name || p.id, p.description, p.version, "ok"))) : hint(ctx, "No plugins installed.")),
+      h("section", c.sectionHead("Directory", c.pill(String(directory.length))),
+        directory.length ? h("div.lt3-grid-auto", directory.slice(0, 30).map((p) => simpleCard(ctx, p.name, p.description, p.version, null, p.author))) : hint(ctx, "Directory unavailable.")),
+    ));
+  }
+
+  async function paintSkills() {
+    const res = await ctx.api.skillsMarketplace();
+    const skills = (res.data && res.data.skills) || [];
+    body.replaceChildren(h("div.lt3-stack-3",
+      stateRow(ctx, res.source),
+      h("p.lt3-faint", { style: { margin: 0 } }, "Manage installed skills in the Skills view; this is the discovery catalog."),
+      skills.length
+        ? h("div.lt3-grid-auto", skills.slice(0, 40).map((s) => simpleCard(ctx, s.skill || s.name, s.description, s.version, s.installed ? "ok" : null, s.author)))
+        : c.emptyState({ icon: "puzzle-off", title: "Skills catalog unavailable", body: "The skills marketplace did not respond." }),
+    ));
+  }
+}
+
+function stateRow(ctx, source) {
+  return ctx.h("div.lt3-row-2", { style: { "justify-content": "flex-end" } }, ctx.c.sourceBadge(source));
+}
+function simpleCard(ctx, name, desc, version, state, author) {
+  const { h, c } = ctx;
+  return c.card(h("div.lt3-stack-2",
+    h("div.lt3-row", { style: { "justify-content": "space-between" } }, h("b", name || "Untitled"), state ? c.statePill(state === "ok" ? "ready" : state) : null),
+    h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, desc || ""),
+    h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, [version ? `v${version}` : null, author ? `by ${author}` : null].filter(Boolean).join(" · ")),
+  ), { flat: true });
+}
+function hint(ctx, text) { return ctx.h("p.lt3-faint", { style: { margin: 0 } }, text); }
+function cap(s) { return String(s || "").charAt(0).toUpperCase() + String(s || "").slice(1); }

package/static/v3/js/views/mcp.99b5c6a7.js

@@ -0,0 +1,114 @@
+/* ============================================================================
+ * View: MCP Manager — connected MCP servers, available tools, health.
+ * Reads /mcp/tools, /mcp/installed, /mcp/claude-code-servers, /mcp/custom and
+ * lets the user inspect connected servers and recommend new ones. Unavailable
+ * state is explicit; nothing is invented.
+ * ========================================================================== */
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+  const src = h("span", c.sourceBadge("pending"));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const serversHost = h("div", c.loading({ lines: 3, block: true }));
+  const recHost = h("div");
+  const recInput = h("input.lt3-input", { type: "text", placeholder: "Describe what you need (e.g. “web search”, “github”)…", "aria-label": "Recommend MCP" });
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "MCP Manager",
+      sub: "Model Context Protocol servers: what is connected, the tools they expose, their permissions, and their health — managed from /app.",
+      actions: [src],
+    }),
+    statHost,
+    c.panel({
+      title: "Recommend a server", sub: "Find MCP servers that match a capability.",
+      children: h("div.lt3-stack-3",
+        h("div.lt3-row-2", recInput, h("button.lt3-btn.lt3-btn--primary", { on: { click: recommend } }, c.icon("search"), "Recommend")),
+        recHost),
+    }),
+    h("section", c.sectionHead("Connected servers"), serversHost),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const [tools, claude, custom] = await Promise.all([ctx.api.mcpTools(), ctx.api.mcpClaudeServers(), ctx.api.mcpCustom()]);
+    src.replaceChildren(c.sourceBadge(tools.source));
+    const installed = (tools.data && tools.data.installed_mcps) || [];
+    const claudeServers = (claude.data && claude.data.servers) || [];
+    const customServers = (custom.data && custom.data.custom) || [];
+    const toolList = (tools.data && tools.data.tools) || [];
+    const servers = mergeServers(installed, claudeServers, customServers);
+
+    if (!servers.length && !toolList.length) {
+      statHost.replaceChildren(c.stat({ label: "MCP", value: "—", icon: "plug-connected" }));
+      serversHost.replaceChildren(c.emptyState({ icon: "plug-off", title: "MCP unavailable", body: "Start the backend to read MCP servers and tools." }));
+      return;
+    }
+    const connected = servers.filter((s) => s.installed).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Servers", value: c.fmtNum(servers.length), icon: "server" }),
+      c.stat({ label: "Connected", value: c.fmtNum(connected), icon: "plug-connected" }),
+      c.stat({ label: "Local tools", value: c.fmtNum(toolList.length), icon: "tools" }),
+    );
+    if (!servers.length) {
+      serversHost.replaceChildren(c.emptyState({ icon: "plug", title: "No MCP servers", body: "No MCP servers are registered yet. Use Recommend to find some." }));
+      return;
+    }
+    serversHost.replaceChildren(h("div.lt3-grid-auto", servers.map((s) => serverCard(ctx, s))));
+  }
+
+  function serverCard(ctx2, s) {
+    return c.card(h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div.lt3-row-2",
+          h("span.lt3-avatar", { style: { width: "34px", height: "34px", "border-radius": "var(--lt3-radius-md)" } }, s.icon && s.icon.length <= 2 ? s.icon : c.icon("plug")),
+          h("div", h("b", s.name), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, s.category || s.source || "")),
+        ),
+        c.statePill(s.installed ? "ready" : "available"),
+      ),
+      s.description ? h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, s.description) : null,
+      s.package ? h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)", "font-family": "var(--lt3-font-mono)", "word-break": "break-all" } }, s.package) : null,
+      Array.isArray(s.env_vars) && s.env_vars.length ? h("div.lt3-cluster", s.env_vars.slice(0, 4).map((e) => h("span.lt3-chip", c.icon("key"), e.name || e))) : null,
+    ), { interactive: false });
+  }
+
+  async function recommend() {
+    const q = recInput.value.trim();
+    if (!q) { ctx.toast("Describe what you need", "info"); return; }
+    recHost.replaceChildren(c.loading({ lines: 2 }));
+    const res = await ctx.api.mcpRecommend(q, 6);
+    const recs = (res && res.data && (res.data.recommendations || res.data)) || [];
+    if (!res || !res.ok || !Array.isArray(recs) || !recs.length) {
+      recHost.replaceChildren(c.banner("No recommendations available — the MCP registry may be offline.", "info"));
+      return;
+    }
+    recHost.replaceChildren(h("div.lt3-stack-2", recs.slice(0, 6).map((r) => c.card(
+      h("div.lt3-row", { style: { "justify-content": "space-between" } },
+        h("div", h("b", r.name || r.id), h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, r.description || "")),
+        r.category ? c.pill(r.category) : null),
+      { flat: true }))));
+  }
+}
+
+function mergeServers(installed, claude, custom) {
+  const out = [];
+  const seen = new Set();
+  const push = (s, source) => {
+    const id = s.id || s.name;
+    if (!id || seen.has(id)) return;
+    seen.add(id);
+    out.push({
+      id, name: s.name || id, description: s.description || "", category: s.category || source,
+      package: s.package || "", icon: s.icon || "", source: s.source || source,
+      installed: s.installed != null ? !!s.installed : source === "claude-code",
+      env_vars: s.env_vars || [],
+    });
+  };
+  (installed || []).forEach((s) => push(s, "registry"));
+  (claude || []).forEach((s) => push(s, "claude-code"));
+  (custom || []).forEach((s) => push(s, "custom"));
+  return out;
+}