ltcai 1.6.0 → 2.0.0

package/static/scripts/platform.js

@@ -0,0 +1,64 @@
+// Lattice AI v2.0 — shared helpers for the Agentic Workspace Platform pages.
+export const NAV = [
+  { href: "/workspace", label: "Dashboard" },
+  { href: "/plugins/sdk", label: "Plugins" },
+  { href: "/workflows", label: "Workflows" },
+  { href: "/agents", label: "Agents" },
+  { href: "/activity", label: "Activity" },
+  { href: "/chat", label: "Chat" },
+];
+
+export function mountHeader(active) {
+  const links = NAV.map(
+    (n) => `<a href="${n.href}" class="${n.href === active ? "active" : ""}">${n.label}</a>`
+  ).join("");
+  document.body.insertAdjacentHTML(
+    "afterbegin",
+    `<header class="app"><div class="brand">Lattice AI<small>v2.0 Platform</small></div><nav>${links}</nav></header>`
+  );
+}
+
+export async function api(path, opts = {}) {
+  const res = await fetch(path, {
+    headers: { "Content-Type": "application/json" },
+    credentials: "same-origin",
+    ...opts,
+  });
+  if (res.status === 401) {
+    location.href = "/account";
+    throw new Error("unauthorized");
+  }
+  const text = await res.text();
+  let body;
+  try { body = text ? JSON.parse(text) : {}; } catch { body = { raw: text }; }
+  if (!res.ok) {
+    const detail = body && body.detail ? (typeof body.detail === "string" ? body.detail : JSON.stringify(body.detail)) : res.statusText;
+    throw new Error(detail);
+  }
+  return body;
+}
+
+export function el(html) {
+  const t = document.createElement("template");
+  t.innerHTML = html.trim();
+  return t.content.firstElementChild;
+}
+
+export function escapeHtml(s) {
+  return String(s == null ? "" : s).replace(/[&<>"']/g, (c) =>
+    ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c])
+  );
+}
+
+export function toast(msg) {
+  const node = el(`<div class="toast">${escapeHtml(msg)}</div>`);
+  document.body.appendChild(node);
+  setTimeout(() => node.remove(), 4000);
+}
+
+export function badge(status) {
+  const cls = { ok: "ok", ready: "ok", valid: "ok", retried_ok: "ok",
+    partial: "warn", retry: "warn", skipped: "warn", available: "warn",
+    failed: "err", error: "err", blocked: "err" }[status] || "";
+  return `<span class="badge ${cls}">${escapeHtml(status || "?")}</span>`;
+}

package/static/scripts/workspace.js

@@ -8,6 +8,7 @@ const state = {
   managingWorkspace: null,
   skillsPayload: null,
   skillTab: "recommended",
+  skillProgress: {},
   entities: [],
   activeEntity: null,
 };
@@ -70,6 +71,56 @@ function renderMetrics(os) {
   `).join("");
 }
 
+function latestTimestamp(...groups) {
+  const values = groups.flat().filter(Boolean).map((value) => {
+    const stamp = new Date(value);
+    return Number.isNaN(stamp.getTime()) ? null : stamp;
+  }).filter(Boolean);
+  if (!values.length) return "";
+  return new Date(Math.max(...values.map((stamp) => stamp.getTime()))).toISOString().slice(0, 19).replace("T", " ");
+}
+
+function renderWorkspaceHealth({ os, indexing, skills, timeline }) {
+  const counts = os?.counts || {};
+  const graph = os?.graph || {};
+  const nodes = Object.values(graph.nodes || {}).reduce((sum, value) => sum + Number(value || 0), 0);
+  const edges = Object.values(graph.edges || {}).reduce((sum, value) => sum + Number(value || 0), 0);
+  const sources = indexing?.sources || [];
+  const indexedFiles = sources.reduce((sum, source) => {
+    const fileStatus = source.file_status || {};
+    return sum + Number(fileStatus.indexed ?? source.success_count ?? 0);
+  }, 0);
+  const sourceTimes = sources.flatMap((source) => [source.last_run_at, source.last_scanned_at, source.updated_at]);
+  const eventTimes = (timeline?.events || []).slice(0, 10).map((event) => event.timestamp);
+  const currentModel = os?.models?.current_model || os?.models?.local_model || os?.models?.public_model || "not loaded";
+  const status = nodes || indexedFiles || counts.memories || counts.agent_runs ? "ready" : "empty";
+  const statusEl = $("workspace-health-status");
+  if (statusEl) {
+    statusEl.textContent = status;
+    statusEl.className = `status-pill ${status === "ready" ? "status-complete" : "status-running"}`;
+  }
+  const items = [
+    ["Indexed Files", indexedFiles, "ti-files", sources.length ? `${sources.length} source(s)` : "No indexed sources"],
+    ["Graph Nodes", nodes, "ti-chart-dots-3", `${edges.toLocaleString()} relationship(s)`],
+    ["Graph Relationships", edges, "ti-git-branch", "Knowledge links"],
+    ["Installed Skills", skills?.total_installed ?? counts.skills ?? 0, "ti-puzzle", `${skills?.total_available ?? 0} available`],
+    ["Memory Entries", counts.memories || 0, "ti-book-2", "Workspace memory"],
+    ["Agent Runs", counts.agent_runs || 0, "ti-route-alt-left", `${counts.workflows || 0} workflow(s)`],
+    ["Current Model", currentModel, "ti-cpu", `${(os?.models?.loaded_models || []).length} loaded`],
+    ["Last Sync Time", latestTimestamp(os?.updated_at, sourceTimes, eventTimes) || "not synced", "ti-clock", `v${os?.version || "unknown"}`],
+  ];
+  const grid = $("workspace-health-grid");
+  if (!grid) return;
+  grid.innerHTML = items.map(([label, value, icon, meta]) => `
+    <div class="health-card">
+      <i class="ti ${icon}"></i>
+      <span>${escapeHtml(label)}</span>
+      <strong>${escapeHtml(value)}</strong>
+      <em>${escapeHtml(meta)}</em>
+    </div>
+  `).join("");
+}
+
 function renderOnboarding(payload) {
   const steps = payload.steps || [];
   $("onboarding-steps").innerHTML = steps.map((step) => {
@@ -205,6 +256,10 @@ function skillName(skill) {
   return skill.skill || skill.name || "skill";
 }
 
+function skillProgress(name) {
+  return state.skillProgress[name] || null;
+}
+
 // Compute the four marketplace tabs from the registry payload (machine-global
 // registry + locally-installed state). "Updates" = installed skills whose
 // registry version differs from the installed version.
@@ -222,17 +277,28 @@ function computeSkillTabs(payload) {
     const hay = `${skillName(s)} ${s.category || ""} ${s.description || ""}`.toLowerCase();
     return RECOMMENDED_SKILL_HINTS.some((h) => hay.includes(h));
   });
-  return { installed, popular: notInstalled, recommended, updates };
+  const popular = notInstalled.slice().sort((a, b) => Number(b.downloads || b.popularity || 0) - Number(a.downloads || a.popularity || 0));
+  return { installed, popular, recommended: recommended.length ? recommended : popular.slice(0, 8), updates };
 }
 
 function renderSkillRow(skill, { installed }) {
   const name = skillName(skill);
   const enabled = skill.enabled !== false;
   const version = skill.version || (installed ? "local" : "registry");
-  const source = skill.plugin || skill.source || (installed ? "installed" : "marketplace");
+  const source = skill.plugin || skill.source || skill.source_url || (installed ? "installed" : "marketplace");
+  const validation = skill.validation_status || (installed ? "ready" : "not installed");
+  const installStatus = skill.install_status || (installed ? "ready" : "available");
+  const progress = skillProgress(name);
   const actions = installed
-    ? `<button class="small-action" data-skill-action="${enabled ? "disable" : "enable"}" data-skill="${escapeHtml(name)}"><i class="ti ti-${enabled ? "toggle-left" : "toggle-right"}"></i>${enabled ? "Disable" : "Enable"}</button>`
-    : `<button class="small-action" data-skill-action="install" data-skill="${escapeHtml(name)}"><i class="ti ti-download"></i>Install</button>`;
+    ? `<button class="small-action" data-skill-action="${enabled ? "disable" : "enable"}" data-skill="${escapeHtml(name)}"><i class="ti ti-${enabled ? "toggle-left" : "toggle-right"}"></i>${enabled ? "Disable" : "Enable"}</button>
+       <button class="small-action" data-skill-action="update" data-skill="${escapeHtml(name)}"><i class="ti ti-refresh"></i>Update</button>`
+    : `<button class="small-action" data-skill-action="install" data-skill="${escapeHtml(name)}" ${progress ? "disabled" : ""}><i class="ti ti-download"></i>Install</button>`;
+  const progressHtml = progress ? `
+    <div class="skill-progress" aria-label="Install progress">
+      <div class="skill-progress-head"><span>${escapeHtml(progress.phase)}</span><span>${escapeHtml(progress.percent)}%</span></div>
+      <div class="skill-progress-track"><span style="width:${Math.max(0, Math.min(100, progress.percent))}%"></span></div>
+    </div>
+  ` : "";
   return `
     <div class="list-item">
       <div class="list-title">
@@ -244,7 +310,10 @@ function renderSkillRow(skill, { installed }) {
         <span class="tag">v${escapeHtml(version)}</span>
         ${skill.category ? `<span class="tag">${escapeHtml(skill.category)}</span>` : ""}
         <span class="tag">${escapeHtml(source)}</span>
+        <span class="tag">install: ${escapeHtml(installStatus)}</span>
+        <span class="tag">validation: ${escapeHtml(validation)}</span>
       </div>
+      ${progressHtml}
       <div class="item-actions">${actions}</div>
     </div>`;
 }
@@ -561,6 +630,7 @@ async function refreshAll() {
   ]);
   state.os = os;
   renderMetrics(os);
+  renderWorkspaceHealth({ os, indexing, skills, timeline });
   if (os.workspace_registry) renderWorkspaceRegistry(os.workspace_registry, os.edition);
   renderOnboarding(onboarding);
   renderTraces(traces);
@@ -645,6 +715,38 @@ async function configureComputerMemory(enabled) {
   await refreshAll();
 }
 
+function setSkillProgress(name, phase, percent) {
+  state.skillProgress[name] = { phase, percent };
+  renderSkills();
+}
+
+function clearSkillProgress(name) {
+  delete state.skillProgress[name];
+  renderSkills();
+}
+
+async function runSkillAction(action, skill) {
+  if (action === "install" || action === "update") {
+    setSkillProgress(skill, "Download", 24);
+    await new Promise((resolve) => setTimeout(resolve, 180));
+    setSkillProgress(skill, "Validate", 68);
+  }
+  try {
+    await api(`/workspace/skills/${action}`, {
+      method: "POST",
+      body: JSON.stringify({ skill }),
+    });
+    if (action === "install" || action === "update") {
+      setSkillProgress(skill, "Ready", 100);
+      await new Promise((resolve) => setTimeout(resolve, 260));
+    }
+    toast(`Skill ${action}`);
+    await refreshAll();
+  } finally {
+    clearSkillProgress(skill);
+  }
+}
+
 document.addEventListener("click", async (event) => {
   const entityBtn = event.target.closest("[data-entity]");
   if (entityBtn) {
@@ -689,12 +791,7 @@ document.addEventListener("click", async (event) => {
 
   const skillBtn = event.target.closest("[data-skill-action]");
   if (skillBtn) {
-    await api(`/workspace/skills/${skillBtn.dataset.skillAction}`, {
-      method: "POST",
-      body: JSON.stringify({ skill: skillBtn.dataset.skill }),
-    });
-    toast(`Skill ${skillBtn.dataset.skillAction}`);
-    await refreshAll();
+    await runSkillAction(skillBtn.dataset.skillAction, skillBtn.dataset.skill);
     return;
   }
 

package/static/workflows.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Workflow Designer — Lattice AI</title>
+  <link rel="stylesheet" href="/static/platform.css" />
+</head>
+<body>
+  <main>
+    <h1>Workflow Designer</h1>
+    <p class="sub">Compose triggers, tools, skills, plugins, agents, conditions, and outputs into runnable workflows.</p>
+
+    <div class="row">
+      <button id="newBtn">+ New from template</button>
+      <button class="ghost" id="validateBtn">Validate</button>
+      <button class="ghost" id="saveBtn">Save</button>
+      <div class="spacer"></div>
+    </div>
+
+    <div class="section">
+      <label>Workflow name</label>
+      <input id="wfName" value="My workflow" />
+      <label>Nodes (JSON) — trigger → … → output</label>
+      <textarea id="wfNodes" spellcheck="false" style="min-height:240px"></textarea>
+      <pre id="validateOut" style="display:none"></pre>
+    </div>
+
+    <div class="section">
+      <h3>Saved workflows</h3>
+      <div id="list" class="grid"><div class="empty">Loading…</div></div>
+    </div>
+
+    <div class="section">
+      <h3>Run history</h3>
+      <div id="runs"><div class="empty">No runs yet.</div></div>
+    </div>
+  </main>
+
+  <script type="module">
+    import { mountHeader, api, escapeHtml, badge, toast } from "/static/scripts/platform.js";
+    mountHeader("/workflows");
+
+    const TEMPLATE = [
+      { id: "trigger", type: "trigger", name: "Manual start", config: { trigger: "manual" }, next: "review" },
+      { id: "review", type: "agent", name: "Multi-agent review", config: { goal: "Review the latest workspace changes", roles: ["planner", "executor", "reviewer"] }, next: "decide" },
+      { id: "decide", type: "condition", name: "Passed?", config: { left: "last_output", op: "truthy" }, branches: { true: "done", false: "done" } },
+      { id: "done", type: "output", name: "Output", config: {}, next: null },
+    ];
+
+    function loadTemplate() {
+      document.getElementById("wfName").value = "My workflow";
+      document.getElementById("wfNodes").value = JSON.stringify(TEMPLATE, null, 2);
+    }
+
+    function readNodes() { return JSON.parse(document.getElementById("wfNodes").value); }
+
+    document.getElementById("newBtn").addEventListener("click", loadTemplate);
+
+    document.getElementById("validateBtn").addEventListener("click", async () => {
+      const out = document.getElementById("validateOut");
+      out.style.display = "block";
+      try {
+        const res = await api("/workflows/api/validate", { method: "POST", body: JSON.stringify({ name: document.getElementById("wfName").value, nodes: readNodes() }) });
+        out.textContent = res.ok ? "✓ Valid workflow" : "Errors:\n" + res.errors.join("\n");
+      } catch (err) { out.textContent = "Error: " + err.message; }
+    });
+
+    document.getElementById("saveBtn").addEventListener("click", async () => {
+      try {
+        await api("/workflows/api/definitions", { method: "POST", body: JSON.stringify({ name: document.getElementById("wfName").value, nodes: readNodes() }) });
+        toast("Workflow saved"); await loadList();
+      } catch (err) { toast(err.message); }
+    });
+
+    async function loadList() {
+      const data = await api("/workflows/api/definitions");
+      const list = document.getElementById("list");
+      const items = data.workflows || [];
+      if (!items.length) { list.innerHTML = `<div class="empty">No workflows yet.</div>`; return; }
+      list.innerHTML = items.map((w) => `
+        <div class="card">
+          <h3>${escapeHtml(w.name)}</h3>
+          <div class="meta">${(w.nodes||w.steps||[]).length} node(s) · ${escapeHtml(w.updated_at||w.created_at||"")}</div>
+          <div class="row" style="margin-top:12px">
+            <button data-run="${w.id}">Run</button>
+            <a class="btn ghost" href="/workflows/api/export/${w.id}" target="_blank">Export</a>
+          </div>
+        </div>`).join("");
+    }
+
+    document.getElementById("list").addEventListener("click", async (e) => {
+      const btn = e.target.closest("button[data-run]");
+      if (!btn) return;
+      btn.disabled = true;
+      try {
+        const res = await api(`/workflows/api/definitions/${btn.dataset.run}/run`, { method: "POST", body: JSON.stringify({ inputs: {} }) });
+        toast(`Run ${res.result.status} · ${res.result.step_count} steps`);
+        await loadRuns();
+      } catch (err) { toast(err.message); } finally { btn.disabled = false; }
+    });
+
+    async function loadRuns() {
+      const data = await api("/workflows/api/runs");
+      const runs = data.runs || [];
+      const box = document.getElementById("runs");
+      if (!runs.length) { box.innerHTML = `<div class="empty">No runs yet.</div>`; return; }
+      box.innerHTML = runs.map((r) => `
+        <div class="card" style="margin-bottom:10px">
+          <div class="row"><h3>${escapeHtml(r.name)}</h3><div class="spacer"></div>${badge(r.status)}</div>
+          <div class="meta">${escapeHtml(r.created_at)} · ${ (r.timeline||[]).length } steps</div>
+          <pre>${escapeHtml(JSON.stringify(r.timeline, null, 2))}</pre>
+        </div>`).join("");
+    }
+
+    loadTemplate();
+    loadList().catch((e) => toast(e.message));
+    loadRuns().catch(() => {});
+  </script>
+</body>
+</html>

package/static/workspace.css

@@ -611,3 +611,76 @@ textarea {
 .capability-card.off i { color: var(--muted); }
 .capability-card.on i { color: var(--green); }
 .capability-card .cap-name { flex: 1; font-weight: 700; font-size: 13px; color: var(--ink); }
+
+/* Workspace health dashboard + skill install lifecycle (v1.7.0) */
+.health-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+.health-card {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fbfcfe;
+  padding: 14px;
+  display: grid;
+  gap: 7px;
+}
+.health-card i {
+  color: var(--blue);
+  font-size: 20px;
+}
+.health-card span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+.health-card strong {
+  color: var(--ink);
+  font-size: 22px;
+  line-height: 1.1;
+  overflow-wrap: anywhere;
+}
+.health-card em {
+  color: var(--muted);
+  font-size: 12px;
+  font-style: normal;
+}
+.skill-progress {
+  display: grid;
+  gap: 6px;
+}
+.skill-progress-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 800;
+}
+.skill-progress-track {
+  height: 7px;
+  border-radius: 999px;
+  background: #e5eaf2;
+  overflow: hidden;
+}
+.skill-progress-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--blue), var(--green));
+}
+
+@media (max-width: 1100px) {
+  .health-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 760px) {
+  .health-grid {
+    grid-template-columns: 1fr;
+  }
+}

package/static/workspace.html

@@ -8,7 +8,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
-  <link rel="stylesheet" href="/static/workspace.css?v=1.6.0">
+  <link rel="stylesheet" href="/static/workspace.css?v=2.0.0">
 </head>
 <body>
   <div class="workspace-shell">
@@ -19,6 +19,7 @@
       </a>
       <nav>
         <a class="active" href="#overview"><i class="ti ti-layout-dashboard"></i><span>Overview</span></a>
+        <a href="#health"><i class="ti ti-heartbeat"></i><span>Health</span></a>
         <a href="#graph"><i class="ti ti-chart-dots-3"></i><span>Graph</span></a>
         <a href="#graph-explorer"><i class="ti ti-affiliate"></i><span>Explorer</span></a>
         <a href="#snapshots"><i class="ti ti-stack-2"></i><span>Snapshots</span></a>
@@ -30,6 +31,10 @@
         <a href="#enterprise"><i class="ti ti-building-skyscraper"></i><span>Editions</span></a>
       </nav>
       <div class="rail-links">
+        <a href="/plugins/sdk"><i class="ti ti-plug"></i><span>Plugins</span></a>
+        <a href="/workflows"><i class="ti ti-sitemap"></i><span>Designer</span></a>
+        <a href="/agents"><i class="ti ti-robot"></i><span>Agents</span></a>
+        <a href="/activity"><i class="ti ti-broadcast"></i><span>Activity</span></a>
         <a href="/chat"><i class="ti ti-message-circle"></i><span>Chat</span></a>
         <a href="/graph"><i class="ti ti-network"></i><span>Graph Canvas</span></a>
         <a href="/admin"><i class="ti ti-shield-lock"></i><span>Admin</span></a>
@@ -56,6 +61,17 @@
 
       <section class="metric-grid" id="metric-grid"></section>
 
+      <section class="workspace-band" id="health">
+        <div class="section-head">
+          <div>
+            <div class="eyebrow">Workspace Health</div>
+            <h2>Operational Snapshot</h2>
+          </div>
+          <span class="status-pill status-complete" id="workspace-health-status">checking</span>
+        </div>
+        <div class="health-grid" id="workspace-health-grid"></div>
+      </section>
+
       <section class="workspace-band" id="workspace-summary-band">
         <div class="section-head">
           <div>
@@ -314,6 +330,6 @@
   </div>
 
   <div class="toast" id="toast"></div>
-  <script src="/static/scripts/workspace.js?v=1.6.0"></script>
+  <script src="/static/scripts/workspace.js?v=1.7.0"></script>
 </body>
 </html>