ltcai 3.1.0 → 3.2.0

package/static/v3/js/views/memory.js

@@ -0,0 +1,146 @@
+/* ============================================================================
+ * View: Memory — the long-term memory platform + Memory Manager.
+ * Reads /api/memory/manager (usage / sources / health / size / type) and offers
+ * recall, inspect, prune, compact, rebuild, and clear. Every number comes from a
+ * real store; tiers with no backing report unavailable.
+ * ========================================================================== */
+
+const TIER_ICON = {
+  workspace: "building-warehouse", project: "folders", agent: "robot",
+  conversation: "messages", graph: "chart-dots-3", vector: "grid-dots",
+};
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+
+  const srcBadge = h("span", c.sourceBadge("pending"));
+  const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
+  const sourcesHost = h("div", c.loading({ lines: 3, block: true }));
+  const recallHost = h("div");
+  const inspectHost = h("div", h("p.lt3-faint", { style: { margin: 0 } }, "Pick a tier to inspect its contents."));
+
+  const recallInput = h("input.lt3-input", { type: "text", placeholder: "Recall across every memory tier…", "aria-label": "Recall memory" });
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Retrieval",
+      title: "Memory",
+      sub: "Long-term memory unified across workspace, project, agent, conversation, graph, and vector tiers — recall, inspect, and maintain it without leaving /app.",
+      actions: [srcBadge],
+    }),
+    statHost,
+    c.panel({
+      title: "Recall", sub: "Unified retrieval across the memory tiers.",
+      children: h("div.lt3-stack-3",
+        h("div.lt3-row-2",
+          recallInput,
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: doRecall } }, c.icon("search"), "Recall"),
+        ),
+        recallHost,
+      ),
+    }),
+    h("section",
+      c.sectionHead("Memory sources", h("div.lt3-row-2",
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => act("compact") } }, c.icon("arrows-minimize"), "Compact"),
+        h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => act("rebuild") } }, c.icon("refresh"), "Rebuild vectors"),
+      )),
+      sourcesHost,
+    ),
+    c.panel({ title: "Inspect tier", children: h("div.lt3-stack-3", tierTabs(ctx, inspectHost), inspectHost) }),
+  );
+
+  hydrate();
+  return root;
+
+  async function hydrate() {
+    const res = await ctx.api.memoryManager();
+    const data = res.data || {};
+    const sources = Array.isArray(data.sources) ? data.sources : [];
+    srcBadge.replaceChildren(c.sourceBadge(res.source));
+
+    if (!sources.length) {
+      statHost.replaceChildren(c.stat({ label: "Memory", value: "—", icon: "brain" }));
+      sourcesHost.replaceChildren(c.emptyState({ icon: "database-off", title: "Memory unavailable", body: "Start the backend to read the memory platform." }));
+      return;
+    }
+    const usage = data.usage || {};
+    statHost.replaceChildren(
+      c.stat({ label: "Total items", value: c.fmtNum(usage.total_items), icon: "stack-2" }),
+      c.stat({ label: "On disk", value: fmtBytes(usage.total_bytes), icon: "database" }),
+      c.stat({ label: "Tiers", value: c.fmtNum((data.tiers || []).length), icon: "layers" }),
+      c.stat({ label: "Health", value: data.health || "—", icon: "heartbeat" }),
+    );
+    sourcesHost.replaceChildren(c.table(
+      [
+        { key: "label", label: "Source", render: (r) => h("div.lt3-row-2", c.icon(TIER_ICON[r.type] || "circle"), h("b", r.label)) },
+        { key: "type", label: "Type", width: "1%", render: (r) => c.pill(r.type) },
+        { key: "count", label: "Items", width: "1%", render: (r) => h("span", { style: { "font-variant-numeric": "tabular-nums" } }, r.count == null ? "—" : c.fmtNum(r.count)) },
+        { key: "size", label: "Size", width: "1%", render: (r) => h("span.lt3-faint", r.size_bytes ? fmtBytes(r.size_bytes) : "—") },
+        { key: "health", label: "Health", width: "1%", render: (r) => c.statePill(r.health === "ok" ? "ready" : r.health === "unavailable" ? "failed" : "idle") },
+        { key: "detail", label: "Detail", render: (r) => h("span.lt3-muted", r.detail || "") },
+      ],
+      sources,
+    ));
+  }
+
+  async function doRecall() {
+    const q = recallInput.value.trim();
+    recallHost.replaceChildren(c.loading({ lines: 2 }));
+    const res = await ctx.api.memoryRecall(q, 25);
+    const items = (res.data && res.data.results) || [];
+    if (!res.ok) { recallHost.replaceChildren(c.banner("Recall is unavailable — start the backend.", "warn")); return; }
+    if (!items.length) { recallHost.replaceChildren(c.emptyState({ icon: "search-off", title: "No matches", body: "Nothing recalled for that query yet." })); return; }
+    recallHost.replaceChildren(h("div.lt3-stack-2", items.map((it) => c.card(
+      h("div.lt3-stack-2",
+        h("div.lt3-row", { style: { "justify-content": "space-between" } }, h("b", it.title || "memory"), c.pill(it.source, it.source === "graph" ? "info" : "")),
+        h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, it.snippet || ""),
+      ), { flat: true },
+    ))));
+  }
+
+  async function act(kind) {
+    const fn = kind === "compact" ? ctx.api.memoryCompact() : ctx.api.memoryRebuild("vector");
+    const res = await fn;
+    if (res && (res.ok || res.data)) {
+      const d = res.data || res;
+      const msg = kind === "compact" ? `Compacted ${d.compacted ?? 0} duplicate memories` : `Rebuild: ${d.status || "ok"}`;
+      ctx.toast(msg, d.status === "error" || d.status === "unavailable" ? "err" : "ok");
+    } else {
+      ctx.toast(`${kind} unavailable`, "err");
+    }
+    hydrate();
+  }
+
+  function tierTabs(ctx2, host) {
+    const tiers = ["workspace", "project", "agent", "conversation", "graph", "vector"];
+    let active = null;
+    return c.segmented(tiers.map((t) => ({ key: t, label: t })), active, async (key) => {
+      host.replaceChildren(c.loading({ lines: 2 }));
+      const res = await ctx2.api.memoryInspect(key, 50);
+      const d = res.data || {};
+      if (key === "graph") { host.replaceChildren(jsonBlock(ctx2, d.stats || {}, d.available)); return; }
+      if (key === "vector") { host.replaceChildren(jsonBlock(ctx2, d.index || {}, d.available)); return; }
+      const items = d.items || [];
+      if (!items.length) { host.replaceChildren(c.emptyState({ icon: "inbox", title: `No ${key} memory`, body: "This tier has no items yet." })); return; }
+      host.replaceChildren(h("div.lt3-stack-2", items.slice(0, 50).map((m) => c.card(
+        h("div.lt3-stack-2",
+          h("div.lt3-row-2", m.kind ? c.pill(m.kind) : null, h("b", { style: { "font-size": "var(--lt3-text-sm)" } }, m.title || m.id || "item")),
+          h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, m.content || (m.messages != null ? `${m.messages} messages` : "")),
+        ), { flat: true },
+      ))));
+    });
+  }
+
+  function jsonBlock(ctx2, obj, available) {
+    if (!available) return c.emptyState({ icon: "database-off", title: "Unavailable", body: "This tier is disabled or empty." });
+    return h("pre", { style: { margin: 0, "white-space": "pre-wrap", "font-family": "var(--lt3-font-mono)", "font-size": "var(--lt3-text-xs)", color: "var(--muted)" } }, JSON.stringify(obj, null, 2));
+  }
+}
+
+function fmtBytes(n) {
+  const v = Number(n) || 0;
+  if (v <= 0) return "—";
+  if (v >= 1 << 20) return (v / (1 << 20)).toFixed(1) + " MB";
+  if (v >= 1 << 10) return (v / (1 << 10)).toFixed(1) + " KB";
+  return v + " B";
+}

package/static/v3/js/views/planning.9ac3e313.js

@@ -0,0 +1,153 @@
+/* ============================================================================
+ * View: Planning — autonomous goal-based planning (goal → plan → execute →
+ * review → replan). Drives the real AgentRuntime (/agents/api/run) and renders
+ * the generated plan, execution, review, and replanning (retry) decisions, with
+ * inspect / replay over recent runs. Synchronous runs are terminal — surfaced
+ * honestly rather than faking a pause/stop.
+ * ========================================================================== */
+
+const FLOW = ["Goal", "Plan", "Execute", "Review", "Replan"];
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+
+  const goalInput = h("textarea.lt3-textarea", { rows: "2", placeholder: "Describe a goal — the planner decomposes it, the executor runs it, the reviewer approves or requests a replan.", "aria-label": "Goal" });
+  const runBtn = h("button.lt3-btn.lt3-btn--primary", { on: { click: runGoal } }, c.icon("player-play"), "Generate plan & run");
+  const resultHost = h("div");
+  const runsHost = h("div", c.loading({ lines: 3 }));
+  const runsSrc = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Compute",
+      title: "Autonomous Planning",
+      sub: "Set a goal; the multi-agent runtime plans, executes, reviews, and replans on failure. Every plan, decision, and retry is inspectable and replayable.",
+    }),
+    flowLegend(ctx),
+    c.panel({
+      title: "New plan", sub: "Runs locally through planner → executor → reviewer with bounded retries.",
+      children: h("div.lt3-stack-3", goalInput, h("div.lt3-row-2", runBtn,
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Safeguards: bounded retries, redacted context, replayable timeline."))),
+    }),
+    resultHost,
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div", h("div.lt3-eyebrow", "History"), h("h3.lt3-panel__title", "Recent plans & runs")), runsSrc),
+      children: runsHost,
+    }),
+  );
+
+  loadRuns();
+  return root;
+
+  function flowLegend(ctx2) {
+    return h("div.lt3-cluster", { style: { gap: "var(--lt3-space-2)" } }, FLOW.map((step, i) =>
+      h("div.lt3-row-2", { style: { gap: "var(--lt3-space-2)" } },
+        c.pill(step, i === FLOW.length - 1 ? "warn" : "info"),
+        i < FLOW.length - 1 ? c.icon("arrow-right") : null,
+      )));
+  }
+
+  async function runGoal() {
+    const goal = goalInput.value.trim();
+    if (!goal) { ctx.toast("Enter a goal first", "info"); return; }
+    runBtn.disabled = true;
+    resultHost.replaceChildren(c.panel({ title: "Planning…", children: c.loading({ lines: 4, block: true }) }));
+    const res = await ctx.api.runAgent(goal, ["planner", "executor", "reviewer"]);
+    runBtn.disabled = false;
+    if (!res || !res.ok || !res.data) {
+      resultHost.replaceChildren(c.banner("Planning is unavailable — start the local server and load a model.", "warn"));
+      return;
+    }
+    resultHost.replaceChildren(renderResult(ctx, res.data.result || res.data));
+    loadRuns();
+  }
+
+  async function loadRuns() {
+    const res = await ctx.api.agentRuntime();
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = (res.data && res.data.runs) || [];
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({ icon: "history-off", title: "No plans yet", body: "Generated plans and their runs will appear here." }));
+      return;
+    }
+    runsHost.replaceChildren(c.table(
+      [
+        { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(mapStatus(r.status)) },
+        { key: "goal", label: "Goal / output", render: (r) => h("span.lt3-muted", trunc(r.output || r.input || r.agent_id, 90)) },
+        { key: "retries", label: "Retries", width: "1%", render: (r) => h("span.lt3-faint", String(r.retries ?? (r.retry_history ? r.retry_history.length : 0))) },
+        { key: "act", label: "", width: "1%", render: (r) => h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => replay(r) } }, c.icon("player-track-next"), "Replay") },
+      ],
+      runs.slice(0, 20),
+    ));
+  }
+
+  async function replay(run) {
+    const id = run.id || run.run_id;
+    if (!id) { ctx.toast("Run id unavailable", "info"); return; }
+    const res = await ctx.api.agentRunReplay(id);
+    if (res && res.ok && res.data) {
+      resultHost.replaceChildren(c.panel({ title: `Replay · ${id}`, children: timeline(ctx, (res.data.replay && res.data.replay.timeline) || res.data.replay || []) }));
+      resultHost.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else {
+      ctx.toast("Replay unavailable", "err");
+    }
+  }
+}
+
+function renderResult(ctx, result) {
+  const { h, c } = ctx;
+  const plan = result.plan || [];
+  const review = result.review || {};
+  const retries = result.retry_history || [];
+  const ok = (review.outcome || "").toLowerCase() === "approve" || (review.verdict || "").toLowerCase() === "pass";
+  return c.panel({
+    head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+      h("div", h("div.lt3-eyebrow", "Result"), h("h3.lt3-panel__title", "Plan & execution")),
+      c.statePill(ok ? "ready" : "warn")),
+    children: h("div.lt3-stack-3",
+      h("div",
+        h("div.lt3-eyebrow", c.icon("list-check"), "Plan"),
+        plan.length
+          ? h("ol", { style: { margin: "var(--lt3-space-2) 0 0", "padding-left": "1.2em" } }, plan.map((s) =>
+              h("li", { style: { "margin-bottom": "4px" } }, h("span", s.description || s.name || `Step`), " ", c.statePill(s.status || "planned"))))
+          : h("p.lt3-faint", { style: { margin: 0 } }, "No plan steps."),
+      ),
+      h("div",
+        h("div.lt3-eyebrow", c.icon("checkup-list"), "Review"),
+        h("p.lt3-muted", { style: { margin: "var(--lt3-space-2) 0 0" } }, review.reason || "—"),
+      ),
+      retries.length
+        ? h("div",
+            h("div.lt3-eyebrow", c.icon("refresh-alert"), `Replanning (${retries.length})`),
+            h("div.lt3-stack-2", retries.map((r) => c.card(h("div",
+              h("b", `Retry #${r.retry}`), h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, r.reason || "")), { flat: true }))),
+          )
+        : null,
+      result.timeline ? h("details", h("summary.lt3-faint", { style: { cursor: "pointer" } }, "Timeline"), timeline(ctx, result.timeline)) : null,
+    ),
+  });
+}
+
+function timeline(ctx, events) {
+  const { h, c } = ctx;
+  const list = Array.isArray(events) ? events : [];
+  if (!list.length) return h("p.lt3-faint", { style: { margin: 0 } }, "No timeline events.");
+  return h("div.lt3-stack-2", { style: { "margin-top": "var(--lt3-space-2)" } }, list.slice(0, 60).map((e) =>
+    h("div.lt3-row-2", { style: { "font-size": "var(--lt3-text-xs)" } },
+      c.pill(e.event || "event", "", { dot: true }),
+      h("span.lt3-faint", e.role || e.from || ""),
+      e.to ? c.icon("arrow-right") : null,
+      e.to ? h("span.lt3-faint", e.to) : null,
+    )));
+}
+
+function mapStatus(s) {
+  const v = String(s || "").toLowerCase();
+  if (v === "ok" || v === "retried_ok") return "ready";
+  if (v === "failed" || v === "rejected") return "failed";
+  if (v === "running" || v === "in_progress") return "active";
+  return v || "idle";
+}
+
+function trunc(s, n) { s = String(s || ""); return s.length > n ? s.slice(0, n) + "…" : s; }

package/static/v3/js/views/planning.js

@@ -0,0 +1,153 @@
+/* ============================================================================
+ * View: Planning — autonomous goal-based planning (goal → plan → execute →
+ * review → replan). Drives the real AgentRuntime (/agents/api/run) and renders
+ * the generated plan, execution, review, and replanning (retry) decisions, with
+ * inspect / replay over recent runs. Synchronous runs are terminal — surfaced
+ * honestly rather than faking a pause/stop.
+ * ========================================================================== */
+
+const FLOW = ["Goal", "Plan", "Execute", "Review", "Replan"];
+
+export async function render(ctx) {
+  const { h, c } = ctx;
+
+  const goalInput = h("textarea.lt3-textarea", { rows: "2", placeholder: "Describe a goal — the planner decomposes it, the executor runs it, the reviewer approves or requests a replan.", "aria-label": "Goal" });
+  const runBtn = h("button.lt3-btn.lt3-btn--primary", { on: { click: runGoal } }, c.icon("player-play"), "Generate plan & run");
+  const resultHost = h("div");
+  const runsHost = h("div", c.loading({ lines: 3 }));
+  const runsSrc = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Compute",
+      title: "Autonomous Planning",
+      sub: "Set a goal; the multi-agent runtime plans, executes, reviews, and replans on failure. Every plan, decision, and retry is inspectable and replayable.",
+    }),
+    flowLegend(ctx),
+    c.panel({
+      title: "New plan", sub: "Runs locally through planner → executor → reviewer with bounded retries.",
+      children: h("div.lt3-stack-3", goalInput, h("div.lt3-row-2", runBtn,
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "Safeguards: bounded retries, redacted context, replayable timeline."))),
+    }),
+    resultHost,
+    c.panel({
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div", h("div.lt3-eyebrow", "History"), h("h3.lt3-panel__title", "Recent plans & runs")), runsSrc),
+      children: runsHost,
+    }),
+  );
+
+  loadRuns();
+  return root;
+
+  function flowLegend(ctx2) {
+    return h("div.lt3-cluster", { style: { gap: "var(--lt3-space-2)" } }, FLOW.map((step, i) =>
+      h("div.lt3-row-2", { style: { gap: "var(--lt3-space-2)" } },
+        c.pill(step, i === FLOW.length - 1 ? "warn" : "info"),
+        i < FLOW.length - 1 ? c.icon("arrow-right") : null,
+      )));
+  }
+
+  async function runGoal() {
+    const goal = goalInput.value.trim();
+    if (!goal) { ctx.toast("Enter a goal first", "info"); return; }
+    runBtn.disabled = true;
+    resultHost.replaceChildren(c.panel({ title: "Planning…", children: c.loading({ lines: 4, block: true }) }));
+    const res = await ctx.api.runAgent(goal, ["planner", "executor", "reviewer"]);
+    runBtn.disabled = false;
+    if (!res || !res.ok || !res.data) {
+      resultHost.replaceChildren(c.banner("Planning is unavailable — start the local server and load a model.", "warn"));
+      return;
+    }
+    resultHost.replaceChildren(renderResult(ctx, res.data.result || res.data));
+    loadRuns();
+  }
+
+  async function loadRuns() {
+    const res = await ctx.api.agentRuntime();
+    runsSrc.replaceChildren(c.sourceBadge(res.source));
+    const runs = (res.data && res.data.runs) || [];
+    if (!runs.length) {
+      runsHost.replaceChildren(c.emptyState({ icon: "history-off", title: "No plans yet", body: "Generated plans and their runs will appear here." }));
+      return;
+    }
+    runsHost.replaceChildren(c.table(
+      [
+        { key: "status", label: "Status", width: "1%", render: (r) => c.statePill(mapStatus(r.status)) },
+        { key: "goal", label: "Goal / output", render: (r) => h("span.lt3-muted", trunc(r.output || r.input || r.agent_id, 90)) },
+        { key: "retries", label: "Retries", width: "1%", render: (r) => h("span.lt3-faint", String(r.retries ?? (r.retry_history ? r.retry_history.length : 0))) },
+        { key: "act", label: "", width: "1%", render: (r) => h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => replay(r) } }, c.icon("player-track-next"), "Replay") },
+      ],
+      runs.slice(0, 20),
+    ));
+  }
+
+  async function replay(run) {
+    const id = run.id || run.run_id;
+    if (!id) { ctx.toast("Run id unavailable", "info"); return; }
+    const res = await ctx.api.agentRunReplay(id);
+    if (res && res.ok && res.data) {
+      resultHost.replaceChildren(c.panel({ title: `Replay · ${id}`, children: timeline(ctx, (res.data.replay && res.data.replay.timeline) || res.data.replay || []) }));
+      resultHost.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else {
+      ctx.toast("Replay unavailable", "err");
+    }
+  }
+}
+
+function renderResult(ctx, result) {
+  const { h, c } = ctx;
+  const plan = result.plan || [];
+  const review = result.review || {};
+  const retries = result.retry_history || [];
+  const ok = (review.outcome || "").toLowerCase() === "approve" || (review.verdict || "").toLowerCase() === "pass";
+  return c.panel({
+    head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+      h("div", h("div.lt3-eyebrow", "Result"), h("h3.lt3-panel__title", "Plan & execution")),
+      c.statePill(ok ? "ready" : "warn")),
+    children: h("div.lt3-stack-3",
+      h("div",
+        h("div.lt3-eyebrow", c.icon("list-check"), "Plan"),
+        plan.length
+          ? h("ol", { style: { margin: "var(--lt3-space-2) 0 0", "padding-left": "1.2em" } }, plan.map((s) =>
+              h("li", { style: { "margin-bottom": "4px" } }, h("span", s.description || s.name || `Step`), " ", c.statePill(s.status || "planned"))))
+          : h("p.lt3-faint", { style: { margin: 0 } }, "No plan steps."),
+      ),
+      h("div",
+        h("div.lt3-eyebrow", c.icon("checkup-list"), "Review"),
+        h("p.lt3-muted", { style: { margin: "var(--lt3-space-2) 0 0" } }, review.reason || "—"),
+      ),
+      retries.length
+        ? h("div",
+            h("div.lt3-eyebrow", c.icon("refresh-alert"), `Replanning (${retries.length})`),
+            h("div.lt3-stack-2", retries.map((r) => c.card(h("div",
+              h("b", `Retry #${r.retry}`), h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, r.reason || "")), { flat: true }))),
+          )
+        : null,
+      result.timeline ? h("details", h("summary.lt3-faint", { style: { cursor: "pointer" } }, "Timeline"), timeline(ctx, result.timeline)) : null,
+    ),
+  });
+}
+
+function timeline(ctx, events) {
+  const { h, c } = ctx;
+  const list = Array.isArray(events) ? events : [];
+  if (!list.length) return h("p.lt3-faint", { style: { margin: 0 } }, "No timeline events.");
+  return h("div.lt3-stack-2", { style: { "margin-top": "var(--lt3-space-2)" } }, list.slice(0, 60).map((e) =>
+    h("div.lt3-row-2", { style: { "font-size": "var(--lt3-text-xs)" } },
+      c.pill(e.event || "event", "", { dot: true }),
+      h("span.lt3-faint", e.role || e.from || ""),
+      e.to ? c.icon("arrow-right") : null,
+      e.to ? h("span.lt3-faint", e.to) : null,
+    )));
+}
+
+function mapStatus(s) {
+  const v = String(s || "").toLowerCase();
+  if (v === "ok" || v === "retried_ok") return "ready";
+  if (v === "failed" || v === "rejected") return "failed";
+  if (v === "running" || v === "in_progress") return "active";
+  return v || "idle";
+}
+
+function trunc(s, n) { s = String(s || ""); return s.length > n ? s.slice(0, n) + "…" : s; }

package/static/v3/js/views/skills.c6c2f965.js

@@ -0,0 +1,109 @@
+/* ============================================================================
+ * View: Skills — the skills registry (install / enable / disable / remove).
+ * Reads the live workspace skill registry (/workspace/skills) and toggles real
+ * state. The discovery catalog lives in Marketplace; this is management.
+ * ========================================================================== */
+
+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 listHost = h("div", c.loading({ lines: 4, block: true }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Platform",
+      title: "Skills",
+      sub: "Install, enable, disable, and remove skills. Installed skills are shared machine-global capabilities the agent can use.",
+      actions: [src],
+    }),
+    statHost,
+    h("section", c.sectionHead("Installed & available skills"), listHost),
+  );
+
+  load();
+  return root;
+
+  async function load() {
+    const res = await ctx.api.skills();
+    src.replaceChildren(c.sourceBadge(res.source));
+    const skills = normalize(res.data);
+    if (!skills.length) {
+      statHost.replaceChildren(c.stat({ label: "Skills", value: "—", icon: "puzzle" }));
+      listHost.replaceChildren(c.emptyState({ icon: "puzzle-off", title: "Skills registry unavailable", body: res.source === "live" ? "No skills are registered yet — install one from the Marketplace." : "Start the backend to read the skills registry." }));
+      return;
+    }
+    const enabled = skills.filter((s) => s.enabled).length;
+    const installed = skills.filter((s) => s.installed).length;
+    statHost.replaceChildren(
+      c.stat({ label: "Skills", value: c.fmtNum(skills.length), icon: "puzzle" }),
+      c.stat({ label: "Enabled", value: c.fmtNum(enabled), icon: "circle-check" }),
+      c.stat({ label: "Installed", value: c.fmtNum(installed), icon: "download" }),
+    );
+    listHost.replaceChildren(h("div.lt3-grid-auto", skills.map((s) => skillCard(ctx, s))));
+  }
+
+  function skillCard(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", h("b", s.name), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, [s.source, s.version ? `v${s.version}` : null, s.category].filter(Boolean).join(" · "))),
+        c.statePill(s.enabled ? "ready" : s.installed ? "idle" : "available"),
+      ),
+      s.description ? h("p.lt3-muted", { style: { margin: 0, "font-size": "var(--lt3-text-sm)" } }, s.description) : null,
+      h("div.lt3-row-2",
+        s.installed
+          ? h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { on: { click: () => toggle(ctx2, s) } }, c.icon(s.enabled ? "player-pause" : "player-play"), s.enabled ? "Disable" : "Enable")
+          : h("button.lt3-btn.lt3-btn--primary.lt3-btn--sm", { on: { click: () => install(ctx2, s) } }, c.icon("download"), "Install"),
+        s.installed ? h("button.lt3-btn.lt3-btn--ghost.lt3-btn--sm", { on: { click: () => uninstall(ctx2, s) } }, c.icon("trash"), "Remove") : null,
+      ),
+    ), { interactive: false });
+  }
+
+  async function toggle(ctx2, s) {
+    const res = s.enabled ? await ctx2.api.skillDisable(s.name) : await ctx2.api.skillEnable(s.name);
+    ctx2.toast(res && res.ok ? `${s.enabled ? "Disabled" : "Enabled"} ${s.name}` : "Action unavailable", res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function install(ctx2, s) {
+    const res = await ctx2.api.skillInstall(s.name, s.plugin);
+    ctx2.toast(res && res.ok ? `Installed ${s.name}` : (res && res.status === 403 ? "Admin required" : "Install unavailable"), res && res.ok ? "ok" : "err");
+    load();
+  }
+  async function uninstall(ctx2, s) {
+    const res = await ctx2.api.skillUninstall(s.name);
+    ctx2.toast(res && res.ok ? `Removed ${s.name}` : (res && res.status === 403 ? "Admin required" : "Remove unavailable"), res && res.ok ? "ok" : "err");
+    load();
+  }
+}
+
+function normalize(data) {
+  if (!data) return [];
+  const raw = [];
+  if (Array.isArray(data.skills)) raw.push(...data.skills);
+  if (Array.isArray(data.installed)) raw.push(...data.installed);
+  if (Array.isArray(data.available)) raw.push(...data.available);
+  if (Array.isArray(data.registry)) raw.push(...data.registry);
+  else if (data.registry && typeof data.registry === "object") {
+    raw.push(...Object.entries(data.registry).map(([name, value]) => ({ name, ...(value || {}) })));
+  }
+  if (Array.isArray(data)) raw.push(...data);
+
+  const byName = new Map();
+  for (const item of raw) {
+    const name = item && (item.name || item.skill || item.id);
+    if (!name) continue;
+    const prior = byName.get(name) || {};
+    byName.set(name, { ...prior, ...item, name });
+  }
+
+  return [...byName.values()].map((s) => ({
+    name: s.name || s.skill || s.id || "skill",
+    description: s.description || "",
+    version: s.version || "",
+    source: s.source || "",
+    category: s.category || "",
+    plugin: s.plugin || "",
+    enabled: s.enabled != null ? !!s.enabled : !!s.installed,
+    installed: s.installed != null ? !!s.installed : true,
+  }));
+}