ltcai 1.5.0 → 1.7.0

package/static/scripts/workspace.js

@@ -6,8 +6,16 @@ const state = {
   activeWorkspace: null,
   registry: null,
   managingWorkspace: null,
+  skillsPayload: null,
+  skillTab: "recommended",
+  skillProgress: {},
+  entities: [],
+  activeEntity: null,
 };
 
+// Skills that match common workspace needs are surfaced under "Recommended".
+const RECOMMENDED_SKILL_HINTS = ["code", "review", "doc", "test", "security", "research", "changelog", "refactor", "debug"];
+
 function $(id) {
   return document.getElementById(id);
 }
@@ -63,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) => {
@@ -194,30 +252,92 @@ function renderWorkflows(payload) {
   `).join("") : `<div class="list-item"><div class="meta-line">No workflows.</div></div>`;
 }
 
-function renderSkills(payload) {
+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.
+function computeSkillTabs(payload) {
   const installed = payload.installed || [];
-  const available = (payload.available || []).filter((skill) => !installed.some((item) => item.name === (skill.skill || skill.name))).slice(0, 8);
-  const rows = [
-    ...installed.map((skill) => ({ ...skill, marketplace: false })),
-    ...available.map((skill) => ({ name: skill.skill || skill.name, description: skill.description, version: skill.version || "remote", enabled: skill.enabled, marketplace: true })),
-  ];
-  $("skill-list").innerHTML = rows.length ? rows.map((skill) => `
+  const available = payload.available || [];
+  const installedNames = new Set(installed.map(skillName));
+  const notInstalled = available.filter((s) => !installedNames.has(skillName(s)));
+  const availByName = new Map(available.map((s) => [skillName(s), s]));
+  const updates = installed.filter((s) => {
+    const remote = availByName.get(skillName(s));
+    return remote && remote.version && s.version && remote.version !== s.version;
+  });
+  const recommended = notInstalled.filter((s) => {
+    const hay = `${skillName(s)} ${s.category || ""} ${s.description || ""}`.toLowerCase();
+    return RECOMMENDED_SKILL_HINTS.some((h) => hay.includes(h));
+  });
+  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 || 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="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">
-        <span>${escapeHtml(skill.name)}</span>
-        <span class="status-pill ${skill.enabled === false ? "status-failed" : "status-complete"}">${skill.enabled === false ? "disabled" : "enabled"}</span>
+        <span>${escapeHtml(name)}</span>
+        <span class="status-pill ${installed ? (enabled ? "status-complete" : "status-failed") : ""}">${installed ? (enabled ? "enabled" : "disabled") : "available"}</span>
       </div>
-      <div class="meta-line">${escapeHtml(skill.description || "")}</div>
+      <div class="meta-line">${escapeHtml(skill.description || "No description")}</div>
       <div class="tag-row">
-        <span class="tag">${escapeHtml(skill.version || "local")}</span>
-        <span class="tag">${skill.marketplace ? "marketplace" : "installed"}</span>
+        <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>
-      <div class="item-actions">
-        <button class="small-action" data-skill-action="enable" data-skill="${escapeHtml(skill.name)}"><i class="ti ti-toggle-right"></i>Enable</button>
-        <button class="small-action" data-skill-action="disable" data-skill="${escapeHtml(skill.name)}"><i class="ti ti-toggle-left"></i>Disable</button>
-      </div>
-    </div>
-  `).join("") : `<div class="list-item"><div class="meta-line">No skills found.</div></div>`;
+      ${progressHtml}
+      <div class="item-actions">${actions}</div>
+    </div>`;
+}
+
+function renderSkills(payload) {
+  if (payload) state.skillsPayload = payload;
+  const data = state.skillsPayload || { installed: [], available: [] };
+  const tabs = computeSkillTabs(data);
+  const updatesCount = $("skill-updates-count");
+  if (updatesCount) updatesCount.textContent = tabs.updates.length ? String(tabs.updates.length) : "";
+  document.querySelectorAll("[data-skill-tab]").forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.skillTab === state.skillTab);
+  });
+  const tab = state.skillTab;
+  const rows = (tab === "installed" || tab === "updates")
+    ? (tabs[tab] || []).map((s) => renderSkillRow(s, { installed: true }))
+    : (tabs[tab] || []).slice(0, 24).map((s) => renderSkillRow(s, { installed: false }));
+  const empty = {
+    recommended: "No recommended skills right now.",
+    popular: "Marketplace is empty.",
+    installed: "No skills installed yet.",
+    updates: "All installed skills are up to date.",
+  }[tab];
+  $("skill-list").innerHTML = rows.length ? rows.join("") : `<div class="list-item"><div class="meta-line">${escapeHtml(empty)}</div></div>`;
 }
 
 function renderTimeline(payload) {
@@ -327,6 +447,173 @@ async function addMember(workspaceId) {
   await refreshAll();
 }
 
+// ── Workspace summary (Phase 3) ──────────────────────────────────────────────
+function renderWorkspaceSummary(os) {
+  const reg = os?.workspace_registry || {};
+  const workspaces = reg.workspaces || [];
+  const activeId = state.activeWorkspace || reg.active_workspace;
+  const active = workspaces.find((w) => w.workspace_id === activeId) || workspaces[0] || { name: "Personal Workspace", type: "personal", your_role: "owner", member_count: 1 };
+  const counts = os?.counts || {};
+  const scopePill = $("summary-scope-pill");
+  if (scopePill) scopePill.textContent = active.type || "personal";
+  const summary = $("workspace-summary");
+  if (summary) {
+    const stats = [["Snapshots", counts.snapshots], ["Memories", counts.memories], ["Agent runs", counts.agent_runs], ["Workflows", counts.workflows], ["Traces", counts.traces], ["Timeline", counts.timeline]];
+    summary.innerHTML = `
+      <div class="summary-main">
+        <div class="summary-icon"><i class="ti ${active.type === "organization" ? "ti-building-community" : "ti-user"}"></i></div>
+        <div class="summary-id">
+          <div class="summary-name">${escapeHtml(active.name || "Personal Workspace")}</div>
+          <div class="meta-line">${escapeHtml(active.type || "personal")} workspace · your role <strong>${escapeHtml(active.your_role || "owner")}</strong> · ${escapeHtml(active.member_count ?? 1)} member(s)</div>
+        </div>
+      </div>
+      <div class="summary-stats">
+        ${stats.map(([l, v]) => `<div class="summary-stat"><strong>${escapeHtml(v || 0)}</strong><span>${escapeHtml(l)}</span></div>`).join("")}
+      </div>`;
+  }
+  const quick = $("workspace-quickswitch");
+  if (quick) {
+    quick.innerHTML = workspaces.map((w) => `
+      <button class="switch-chip ${w.workspace_id === activeId ? "active" : ""}" data-ws-action="activate" data-ws="${escapeHtml(w.workspace_id)}">
+        <i class="ti ${w.type === "organization" ? "ti-building-community" : "ti-user"}"></i>
+        <span>${escapeHtml(w.name)}</span>${w.workspace_id === activeId ? ' <i class="ti ti-check"></i>' : ""}
+      </button>`).join("");
+  }
+}
+
+// ── Knowledge Graph explorer (Phase 2) ───────────────────────────────────────
+const ENTITY_ICONS = { Person: "ti-user", Concept: "ti-bulb", Document: "ti-file-text", File: "ti-file", Code: "ti-code", Chat: "ti-message", Conversation: "ti-messages", Message: "ti-message-dots", Task: "ti-checklist", Decision: "ti-gavel", Error: "ti-alert-triangle", Model: "ti-cpu", Tool: "ti-tool", Project: "ti-folders", Feature: "ti-star", AIResponse: "ti-robot", Chunk: "ti-file-stack" };
+function entityIcon(type) { return ENTITY_ICONS[type] || "ti-point"; }
+function prettyId(id) { return String(id || "").split(":").slice(1).join(":") || String(id || ""); }
+
+async function loadGraphExplorer() {
+  try {
+    const data = await api("/knowledge-graph/graph?limit=150");
+    const nodes = (data.nodes || []).slice();
+    nodes.sort((a, b) => (b.importance ?? b.metadata?.graph_metrics?.importance_raw ?? 0) - (a.importance ?? a.metadata?.graph_metrics?.importance_raw ?? 0));
+    state.entities = nodes;
+    renderEntities();
+  } catch (e) {
+    const el = $("entity-list");
+    if (el) el.innerHTML = `<div class="list-item"><div class="meta-line">Knowledge graph unavailable: ${escapeHtml(e.message)}</div></div>`;
+  }
+}
+
+function renderEntities() {
+  const el = $("entity-list");
+  if (!el) return;
+  const q = ($("entity-search")?.value || "").toLowerCase().trim();
+  const filtered = q ? state.entities.filter((n) => `${n.title || ""} ${n.type || ""} ${n.id || ""}`.toLowerCase().includes(q)) : state.entities;
+  const list = filtered.slice(0, 40);
+  el.innerHTML = list.length ? list.map((n) => {
+    const m = n.metadata?.graph_metrics || {};
+    const imp = Math.round((n.importance_norm ?? m.importance_norm ?? 0) * 100);
+    return `
+    <button class="list-item entity-card ${n.id === state.activeEntity ? "selected" : ""}" data-entity="${escapeHtml(n.id)}">
+      <div class="list-title"><span><i class="ti ${entityIcon(n.type)}"></i> ${escapeHtml(n.title || prettyId(n.id))}</span><span class="status-pill">${escapeHtml(n.type || "node")}</span></div>
+      ${n.summary ? `<div class="meta-line">${escapeHtml(String(n.summary).slice(0, 110))}</div>` : ""}
+      <div class="tag-row"><span class="tag">${escapeHtml(m.degree ?? 0)} links</span><span class="tag">importance ${imp}%</span></div>
+      <div class="importance-bar"><span style="width:${imp}%"></span></div>
+    </button>`;
+  }).join("") : `<div class="list-item"><div class="meta-line">No matching entities.</div></div>`;
+}
+
+async function selectEntity(id) {
+  state.activeEntity = id;
+  renderEntities();
+  const detail = $("entity-detail");
+  const title = $("entity-detail-title");
+  if (title) title.textContent = "Loading…";
+  try {
+    const d = await api(`/workspace/relationships/${encodeURIComponent(id)}`);
+    const node = d.node || {};
+    const related = d.related_entities || [];
+    const relMap = new Map(related.map((r) => [r.id, r]));
+    const labelFor = (nodeId) => { const r = relMap.get(nodeId); return r ? (r.title || prettyId(nodeId)) : prettyId(nodeId); };
+    const edgeRow = (e, dir) => {
+      const other = dir === "out" ? e.to : e.from;
+      return `<div class="rel-row"><span class="rel-dir">${dir === "out" ? "→" : "←"}</span><span class="tag">${escapeHtml(e.type || "related")}</span><span class="rel-node">${escapeHtml(labelFor(other))}</span></div>`;
+    };
+    const inbound = (d.inbound || []).slice(0, 8);
+    const outbound = (d.outbound || []).slice(0, 8);
+    const path = Array.isArray(d.shortest_path) ? d.shortest_path : [];
+    if (title) title.textContent = node.title || prettyId(id);
+    detail.innerHTML = `
+      <div class="list-item">
+        <div class="list-title"><span><i class="ti ${entityIcon(node.type)}"></i> ${escapeHtml(node.title || prettyId(id))}</span><span class="status-pill">${escapeHtml(node.type || "node")}</span></div>
+        ${node.summary ? `<div class="meta-line">${escapeHtml(node.summary)}</div>` : ""}
+        <div class="tag-row"><span class="tag">importance ${Math.round((node.importance_norm || 0) * 100)}%</span><span class="tag">${inbound.length + outbound.length} relationships</span></div>
+      </div>
+      <div class="list-item"><div class="list-title"><span>Outbound</span><span class="status-pill">${outbound.length}</span></div>${outbound.map((e) => edgeRow(e, "out")).join("") || '<div class="meta-line">None</div>'}</div>
+      <div class="list-item"><div class="list-title"><span>Inbound</span><span class="status-pill">${inbound.length}</span></div>${inbound.map((e) => edgeRow(e, "in")).join("") || '<div class="meta-line">None</div>'}</div>
+      ${related.length ? `<div class="list-item"><div class="list-title"><span>Related entities</span><span class="status-pill">${related.length}</span></div><div class="tag-row">${related.slice(0, 10).map((r) => `<span class="tag"><i class="ti ${entityIcon(r.type)}"></i> ${escapeHtml(r.title || prettyId(r.id))}</span>`).join("")}</div></div>` : ""}
+      ${path.length ? `<div class="list-item"><div class="list-title"><span>Path to you</span><span class="status-pill">${path.length} hops</span></div><div class="meta-line">${path.map((p) => escapeHtml(typeof p === "string" ? prettyId(p) : (p.title || prettyId(p.id)))).join(" → ")}</div></div>` : ""}
+      <div class="item-actions"><a class="small-action" href="/graph?node=${encodeURIComponent(id)}"><i class="ti ti-network"></i>Open in Graph Canvas</a></div>`;
+  } catch (e) {
+    if (title) title.textContent = "Relationships";
+    detail.innerHTML = `<div class="list-item"><div class="meta-line">No relationships available: ${escapeHtml(e.message)}</div></div>`;
+  }
+}
+
+// ── Recent activity feed (Phase 2), built from already-fetched data ───────────
+function renderActivity({ traces, snapshots, memories, workflows, timeline }) {
+  const items = [];
+  (traces.traces || []).forEach((t) => items.push({ ts: t.created_at, icon: "ti-search", label: `Answer trace: ${t.question || "query"}`, tag: "graph rag" }));
+  (snapshots.snapshots || []).forEach((s) => items.push({ ts: s.created_at, icon: "ti-stack-2", label: `Snapshot: ${s.name}`, tag: "snapshot" }));
+  (memories.memories || []).forEach((m) => items.push({ ts: m.updated_at, icon: "ti-book-2", label: `Memory: ${(m.content || m.kind || "").slice(0, 60)}`, tag: m.kind || "memory" }));
+  (workflows.workflows || []).forEach((w) => items.push({ ts: w.created_at, icon: "ti-git-branch", label: `Workflow: ${w.name}`, tag: "workflow" }));
+  (timeline.events || []).forEach((e) => items.push({ ts: e.timestamp, icon: "ti-timeline-event", label: e.event_type || "event", tag: e.area || "workspace" }));
+  items.sort((a, b) => String(b.ts || "").localeCompare(String(a.ts || "")));
+  const el = $("activity-list");
+  if (!el) return;
+  el.innerHTML = items.length ? items.slice(0, 18).map((it) => `
+    <div class="list-item activity-item">
+      <div class="list-title"><span><i class="ti ${it.icon}"></i> ${escapeHtml(it.label)}</span><span class="status-pill">${escapeHtml(it.tag)}</span></div>
+      <div class="meta-line">${escapeHtml(it.ts || "")}</div>
+    </div>`).join("") : `<div class="list-item"><div class="meta-line">No recent activity yet — index a folder or ask a question to get started.</div></div>`;
+}
+
+function renderMemoryFeed(payload) {
+  const memories = payload.memories || [];
+  const el = $("memory-feed");
+  if (!el) return;
+  el.innerHTML = memories.length ? memories.slice(0, 8).map((m) => `
+    <div class="list-item">
+      <div class="list-title"><span><i class="ti ti-book-2"></i> ${escapeHtml(m.kind || "memory")}</span><span class="status-pill">${escapeHtml(m.updated_at || "")}</span></div>
+      <div class="meta-line">${escapeHtml(String(m.content || "").slice(0, 140))}</div>
+    </div>`).join("") : `<div class="list-item"><div class="meta-line">No workspace memory yet.</div></div>`;
+}
+
+// ── Enterprise capability panel (Phase 6) ─────────────────────────────────────
+const CAPABILITY_LABELS = {
+  sso_advanced: "Advanced SSO", idp_provisioning: "IdP Provisioning", scim: "SCIM",
+  rbac_abac_advanced: "Advanced RBAC/ABAC", tenant_isolation: "Tenant Isolation",
+  compliance_retention: "Compliance Retention", siem_export: "SIEM Export",
+  private_vpc: "Private VPC", air_gapped_deployment: "Air-gapped Deploy",
+  dlp_policy: "DLP Policy", ediscovery: "eDiscovery", admin_policy_packs: "Admin Policy Packs",
+};
+function renderEnterprise(edition) {
+  edition = edition || {};
+  const caps = edition.capabilities || {};
+  const editionName = edition.edition || "community";
+  const pill = $("enterprise-edition-pill");
+  if (pill) { pill.textContent = editionName; pill.className = `status-pill ${edition.is_enterprise ? "status-complete" : ""}`; }
+  const note = $("enterprise-note");
+  if (note) note.textContent = edition.community_notice || "Community edition: every Enterprise capability below is an extension point and is disabled. Nothing here gates a Community feature.";
+  const grid = $("capability-grid");
+  if (!grid) return;
+  const keys = Object.keys(caps).length ? Object.keys(caps) : Object.keys(CAPABILITY_LABELS);
+  grid.innerHTML = keys.map((k) => {
+    const on = Boolean(caps[k]);
+    return `
+    <div class="capability-card ${on ? "on" : "off"}">
+      <i class="ti ${on ? "ti-circle-check" : "ti-lock"}"></i>
+      <span class="cap-name">${escapeHtml(CAPABILITY_LABELS[k] || k)}</span>
+      <span class="status-pill ${on ? "status-complete" : "status-failed"}">${on ? "enabled" : "disabled"}</span>
+    </div>`;
+  }).join("");
+}
+
 async function refreshAll() {
   const [os, onboarding, traces, indexing, snapshots, memories, computerMemory, agents, workflows, skills, timeline] = await Promise.all([
     api("/workspace/os"),
@@ -343,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);
@@ -354,6 +642,11 @@ async function refreshAll() {
   renderWorkflows(workflows);
   renderSkills(skills);
   renderTimeline(timeline);
+  renderWorkspaceSummary(os);
+  renderEnterprise(os.edition);
+  renderActivity({ traces, snapshots, memories, workflows, timeline });
+  renderMemoryFeed(memories);
+  loadGraphExplorer();
 }
 
 async function createSnapshot() {
@@ -422,7 +715,52 @@ 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) {
+    selectEntity(entityBtn.dataset.entity).catch((err) => toast(err.message));
+    return;
+  }
+
+  const skillTab = event.target.closest("[data-skill-tab]");
+  if (skillTab) {
+    state.skillTab = skillTab.dataset.skillTab;
+    renderSkills();
+    return;
+  }
+
   const step = event.target.closest("[data-step]");
   if (step) {
     await api("/workspace/onboarding/step", {
@@ -453,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;
   }
 
@@ -521,6 +854,12 @@ document.addEventListener("DOMContentLoaded", () => {
   }));
   $("create-demo-workflow").addEventListener("click", () => createDemoWorkflow().catch((err) => toast(err.message)));
   $("reload-skills").addEventListener("click", () => refreshAll().catch((err) => toast(err.message)));
+  const entitySearch = $("entity-search");
+  if (entitySearch) entitySearch.addEventListener("input", () => renderEntities());
+  const reloadEntities = $("reload-entities");
+  if (reloadEntities) reloadEntities.addEventListener("click", () => loadGraphExplorer().catch((err) => toast(err.message)));
+  const reloadActivity = $("reload-activity");
+  if (reloadActivity) reloadActivity.addEventListener("click", () => refreshAll().catch((err) => toast(err.message)));
   $("workspace-select").addEventListener("change", (event) => activateWorkspace(event.target.value).catch((err) => toast(err.message)));
   $("create-org").addEventListener("click", () => createOrg().catch((err) => toast(err.message)));
   $("new-org-btn").addEventListener("click", () => $("org-name").focus());

package/static/workspace.css

@@ -544,3 +544,143 @@ textarea {
 #org-create-form {
   margin-bottom: 12px;
 }
+
+/* ── Product Experience Deepening (v1.6.0) ──────────────────────────────── */
+
+/* Workspace summary */
+.summary-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+}
+.summary-main { display: flex; align-items: center; gap: 14px; }
+.summary-icon {
+  width: 48px; height: 48px; border-radius: 12px;
+  display: grid; place-items: center;
+  background: #eef2ff; color: var(--blue); font-size: 24px;
+}
+.summary-name { font-weight: 800; font-size: 18px; color: var(--ink); }
+.summary-stats { display: flex; flex-wrap: wrap; gap: 18px; }
+.summary-stat { display: grid; text-align: center; }
+.summary-stat strong { font-size: 20px; color: var(--ink); }
+.summary-stat span { font-size: 11px; color: var(--muted); font-weight: 700; }
+.quickswitch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
+.switch-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  border: 1px solid var(--line); background: #fbfcfe; color: var(--ink);
+  border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer;
+}
+.switch-chip.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); }
+
+/* Entity explorer */
+.entity-card { text-align: left; cursor: pointer; width: 100%; font: inherit; }
+.entity-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
+.importance-bar { height: 4px; border-radius: 999px; background: #edf2f7; overflow: hidden; }
+.importance-bar span { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #7c3aed); }
+.rel-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
+.rel-dir { color: var(--muted); font-weight: 800; width: 16px; }
+.rel-node { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.activity-item .list-title span { font-weight: 700; }
+
+/* Skill marketplace tabs */
+.tab-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.tab {
+  border: 1px solid var(--line); background: #fbfcfe; color: var(--muted);
+  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
+}
+.tab.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); }
+.tab-count {
+  display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
+  border-radius: 999px; background: var(--red); color: #fff; font-size: 11px;
+}
+.tab-count:empty { display: none; }
+
+/* Enterprise capability grid */
+.capability-grid {
+  display: grid; gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  margin-top: 12px;
+}
+.capability-card {
+  display: flex; align-items: center; gap: 10px;
+  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fbfcfe;
+}
+.capability-card i { font-size: 18px; }
+.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;
+  }
+}