ltcai 1.5.0 → 1.6.0

package/README.md

@@ -155,42 +155,56 @@ See [docs/architecture.md](docs/architecture.md) for request and data-flow detai
 </tr>
 </table>
 
-> Screenshots above are the live web UI. The diagrams below map the product
-> experience to the current v1.5.0 structure.
+> Every image in this section is a **real screenshot** of the running app
+> (Lattice AI v1.6.0), captured with a headless browser.
 
 ---
 
 ## Product Experience
 
-### Local model recommendation
+### Onboard in minutes
 
-Lattice AI detects your OS, CPU, GPU, RAM, and disk, then rates every local model
-**Recommended**, **Compatible**, or **Not Recommended** for your machine — grouped
-by family (Gemma, Qwen, Llama, Phi, DeepSeek, and more).
+A first run detects your OS, CPU, GPU, RAM, and disk, then recommends a local
+model and rates every option **Recommended**, **Compatible**, or **Not
+Recommended** for your machine — grouped by family (Gemma, Qwen, Llama, Phi,
+DeepSeek, and more), with estimated RAM and a clear next step.
 
 <div align="center">
-  <img src="docs/images/model-recommendation.png" alt="Tri-state local model recommendation grouped by family" width="100%"/>
+  <img src="docs/images/onboarding.png" alt="Onboarding hardware scan: OS, CPU, GPU, RAM, disk, runtime" width="49%"/>
+  <img src="docs/images/model-recommendation.png" alt="Local model recommendation with best-pick callout and per-family status" width="49%"/>
 </div>
 
 ### Workspaces & organization
 
-Switch instantly between a **Personal** workspace and shared **Organization**
-workspaces. Org data is scoped by `workspace_id`, and `owner / admin / member /
-viewer` roles map to a transparent permission matrix.
+A **Current Workspace** card shows exactly where you are; switch instantly
+between a **Personal** workspace and shared **Organization** workspaces. Org data
+is scoped by `workspace_id`, and `owner / admin / member / viewer` roles map to a
+transparent permission matrix with member management.
 
 <div align="center">
-  <img src="docs/images/workspace.png" alt="Personal and Organization workspace model" width="49%"/>
-  <img src="docs/images/organization.png" alt="Organization roles and permission matrix" width="49%"/>
+  <img src="docs/images/workspace.png" alt="Current Workspace summary card with scoped counts" width="100%"/>
+  <img src="docs/images/organization.png" alt="Organization workspace with members and roles" width="100%"/>
 </div>
 
-### Knowledge graph & skills
+### Knowledge graph explorer
 
-Your work becomes a typed knowledge graph (built automatically), and skills extend
-the workspace through an in-product marketplace.
+Your work becomes a typed knowledge graph automatically. The Entity Explorer
+surfaces the most important entities and, on selection, their inbound/outbound
+relationships, related entities, and a path back to you.
 
 <div align="center">
-  <img src="docs/images/graph.png" alt="Knowledge graph node and edge taxonomy" width="49%"/>
-  <img src="docs/images/skills.png" alt="Skill marketplace: recommended, popular, installed, updates" width="49%"/>
+  <img src="docs/images/graph.png" alt="Knowledge graph entity explorer with relationship detail" width="100%"/>
+</div>
+
+### Skills & editions
+
+Browse and install skills from an in-product marketplace; an honest editions
+panel shows that every Enterprise capability is an opt-in extension point,
+disabled in the open-source Community build.
+
+<div align="center">
+  <img src="docs/images/skills.png" alt="Skill marketplace tabs: recommended, popular, installed, updates" width="49%"/>
+  <img src="docs/images/enterprise.png" alt="Enterprise capability status panel — all disabled in Community" width="49%"/>
 </div>
 
 ---
@@ -333,22 +347,27 @@ Supported routes include OpenAI-compatible APIs, OpenRouter, Groq, Together, xAI
 
 ## Current release
 
-**1.5.0 — Unified Product Release.** Onboarding, model recommendation, and CI
-stabilization in one release:
-
-- **CI / VSIX recovery** — the stale `@azure/core-tracing` lockfile pin that
-  broke `npm ci` (ETARGET) is regenerated, so the VSIX build is green again
-- **Local model recommendation** — a hardware-aware engine
-  (`latticeai/services/model_recommendation.py`) classifies the model catalog as
-  Recommended / Compatible / Not Recommended, exposed at `/models/recommendations`
-- **Catalog extraction** — the static model catalog moved to
-  `latticeai/services/model_catalog.py`, simplifying `model_runtime.py`
-- **Enterprise PoC seam** — admin policy / audit-export / SIEM-stub / org-settings
-  surfaces consult the capability registry (Community keeps everything ungated)
-- **Documentation & visuals** — README rewritten as a product page with an
-  up-to-date architecture diagram and structural visuals
-- Python package, npm package, VS Code extension, FastAPI app, and `/health`
-  version metadata are aligned at `1.5.0`
+**1.6.0 — Product Experience Deepening.** A UX release: the screens in this README
+are now real captured UI.
+
+- **Knowledge Graph explorer** — entity cards, a relationship/related-entities/
+  shortest-path detail panel, recent activity, and a memory feed (additive UI on
+  existing endpoints)
+- **Workspace UX** — a "Current Workspace" summary card with quick-switch chips
+- **Model Recommendation 2.0** — machine summary, a best-pick callout with
+  estimated RAM and next step, per-family status, and a cloud caution
+- **Skill Marketplace** — Recommended / Popular / Installed / Updates tabs
+- **Enterprise capability panel** — an honest 12-capability matrix (Community: all
+  disabled, nothing gated)
+- **Real screenshots** — `docs/images/*` refreshed from the running app; API,
+  schemas, `server:app`, CLI, MCP, and the Knowledge Graph contract unchanged
+
+| Version | Theme |
+|---|---|
+| **1.6.0** | Product Experience Deepening (UX + real screenshots) |
+| 1.5.0 | Unified Product Release (CI/VSIX recovery, model recommendation, Enterprise PoC) |
+| 1.4.0 | Server App final decomposition |
+| 1.1.0–1.3.0 | Organization workspaces, modularization, route safety net |
 
 See the full [changelog](docs/CHANGELOG.md) and [RELEASE.md](RELEASE.md).
 

package/docs/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## [1.6.0] - 2026-06-01
+
+> Product Experience Deepening — user-facing UX (Knowledge Graph explorer,
+> workspace summary, model recommendation 2.0, skill marketplace tabs, Enterprise
+> capability panel) and a refresh of `docs/images/*` to **real captured UI**
+> screenshots. Not a refactor: API paths, request/response schemas, `server:app`,
+> CLI, MCP, and the Knowledge Graph contract are unchanged. The only code changes
+> are additive frontend (`static/`) and version metadata.
+
+### Added
+
+- **Knowledge Graph Explorer (Workspace OS)** — an Entity Explorer (importance-
+  ranked entity cards + search) with a detail panel showing inbound/outbound
+  relationships, related entities, and the shortest path back to you; plus a
+  Recent Activity feed and a Workspace Memory feed. Built entirely on the existing
+  `/knowledge-graph/graph` and `/workspace/relationships/*` endpoints (additive
+  UI, no new API, no schema change).
+- **Workspace summary & quick-switch** — a "Current Workspace" card (active
+  workspace, role, members, scoped counts) and one-click switch chips, preserving
+  `workspace_id` scoping and the owner/admin/member/viewer model.
+- **Model Recommendation 2.0** — the onboarding recommendation panel now shows a
+  machine summary (OS/RAM/GPU/engine), a "best for this PC" callout with the
+  reason, estimated RAM, and next step, per-family status, and a cloud caution.
+  Estimates are labelled and conservative.
+- **Skill Marketplace tabs** — Recommended / Popular / Installed / Updates tabs
+  with version, category, and source, plus install / enable / disable actions on
+  the existing skill lifecycle API.
+- **Enterprise capability panel** — a 12-capability status matrix in Workspace OS
+  (Community reports all disabled; nothing gates a Community feature).
+
+### Changed
+
+- **Real UI visuals** — `docs/images/{hero.gif,onboarding,model-recommendation,
+  workspace,graph,organization,skills,enterprise}` are now **real screenshots**
+  captured from the running app with Playwright + headless Chrome (the v1.5.0
+  set was structural diagrams). `architecture.png` remains a structural diagram.
+  README references the new real screenshots with no broken links.
+- Python package, npm package, VS Code extension, FastAPI app, and `/health`
+  version metadata aligned at `1.6.0`.
+
+### Validation
+
+- Unit tests pass; route-compatibility, startup/import, streaming, model-endpoint,
+  MCP/KG, and workspace/org permission tests preserved; `npm run check:python`
+  green; new UI verified rendering in a real browser via Playwright; VSIX build
+  verified. Test/build/packaging artifacts only — no package-store publish.
+
 ## [1.5.0] - 2026-06-01
 
 > Unified Product Release — CI/VSIX recovery, hardware-aware local model

package/latticeai/__init__.py

@@ -1,3 +1,3 @@
 """Lattice AI - modular server package."""
 
-__version__ = "1.5.0"
+__version__ = "1.6.0"

package/latticeai/core/workspace_os.py

@@ -18,7 +18,7 @@ from pathlib import Path
 from typing import Any, Callable, Dict, Iterable, List, Optional
 
 
-WORKSPACE_OS_VERSION = "1.5.0"
+WORKSPACE_OS_VERSION = "1.6.0"
 
 # Workspace types separate single-user Personal workspaces from shared
 # Organization workspaces. Both keep the same local-first JSON store; the type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ltcai",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Lattice AI Workspace OS for local-first graph, memory, agent, workflow, and skill operations",
   "homepage": "https://github.com/TaeSooPark-PTS/LatticeAI#readme",
   "repository": {

package/static/scripts/chat.js

@@ -1033,6 +1033,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 const data = await res.json();
                 if (!res.ok) return;
                 const rec = (data && data.recommendations) || {};
+                const profile = (data && data.profile) || {};
                 const families = rec.families || [];
                 if (!families.length) return;
                 const counts = rec.counts || {};
@@ -1043,25 +1044,45 @@ const chatViewport = document.getElementById('chat-viewport');
                         not_recommended: ['권장 안 함', '#9ca3af'],
                     };
                     const [label, color] = map[status] || ['', '#9ca3af'];
-                    return `<span style="display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;color:#fff;background:${color}">${label}</span>`;
+                    return `<span style="display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;background:${color}">${label}</span>`;
                 };
+                const ram = (m) => (m.required_ram_gb != null) ? `~${m.required_ram_gb}GB RAM (est.)` : '';
+                const nextStep = (engine) => engine === 'ollama'
+                    ? 'Next: ollama pull'
+                    : engine === 'local_mlx' ? 'Next: download & load' : 'Next: connect engine';
+
+                // Top pick callout
+                const top = rec.top_pick;
+                const topHtml = top ? `
+                    <div style="border:1px solid #16a34a;background:#f0fdf4;border-radius:10px;padding:10px 12px;margin:8px 0">
+                        <div style="font-weight:700">⭐ Best for this PC — ${escapeHtml(top.name || top.id)} ${badge('recommended')}</div>
+                        <div style="font-size:12px;opacity:0.8;margin-top:3px">${escapeHtml(top.reason || '')}</div>
+                        <div style="font-size:12px;margin-top:4px">${escapeHtml(top.size || '')} · ${escapeHtml(ram(top))} · ${escapeHtml(nextStep(rec.engine))}</div>
+                    </div>` : '';
+
                 const rows = families.map((fam) => {
                     const best = fam.best;
                     const items = (fam.models || []).map((m) => `
-                        <div style="display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:12px;opacity:${m.status === 'not_recommended' ? 0.55 : 1}">
+                        <div style="display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:12px;opacity:${m.status === 'not_recommended' ? 0.55 : 1}">
                             <span>${escapeHtml(m.name || m.id)}</span>
-                            <span>${escapeHtml(m.size || '')} ${badge(m.status)}</span>
+                            <span style="white-space:nowrap">${escapeHtml(m.size || '')} · ${escapeHtml(ram(m))} ${badge(m.status)}</span>
                         </div>`).join('');
                     return `
                         <details style="margin:6px 0;border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:8px 10px">
-                            <summary style="cursor:pointer;font-weight:600">${escapeHtml(fam.family)} ${best ? badge(best.status) : ''}</summary>
+                            <summary style="cursor:pointer;font-weight:600">${escapeHtml(fam.family)} ${best ? badge(best.status) : ''}${best ? ` <span style="font-weight:400;opacity:0.7">${escapeHtml(best.name || '')}</span>` : ''}</summary>
                             <div style="margin-top:6px">${items}</div>
                         </details>`;
                 }).join('');
+
+                const engineLabel = rec.engine === 'local_mlx' ? 'MLX (Apple Silicon)' : rec.engine;
+                const machine = `${profile.os || ''} · RAM ${rec.ram_gb || '?'}GB · ${rec.apple_silicon ? 'Apple Silicon' : (profile.gpu && profile.gpu.vendor) || 'CPU'} · engine ${engineLabel}`;
                 container.innerHTML = `
-                    <h3 style="margin:14px 0 4px">이 PC에서 실행 가능한 로컬 모델</h3>
-                    <p style="font-size:12px;opacity:0.7;margin:0 0 8px">RAM ${escapeHtml(String(rec.ram_gb || '?'))}GB 기준 · 추천 ${counts.recommended || 0} · 실행 가능 ${counts.compatible || 0} · 권장 안 함 ${counts.not_recommended || 0}</p>
-                    ${rows}`;
+                    <h3 style="margin:14px 0 4px">이 PC에 맞는 로컬 모델</h3>
+                    <p style="font-size:12px;opacity:0.7;margin:0 0 4px">${escapeHtml(machine)}</p>
+                    <p style="font-size:12px;opacity:0.7;margin:0 0 6px">${badge('recommended')} ${counts.recommended || 0} · ${badge('compatible')} ${counts.compatible || 0} · ${badge('not_recommended')} ${counts.not_recommended || 0} · estimates are conservative, verify before loading</p>
+                    ${topHtml}
+                    ${rows}
+                    <p style="font-size:12px;opacity:0.65;margin:8px 0 0">로컬 모델이 부족하면 클라우드 모델(OpenAI·OpenRouter·Groq 등, API 키 필요)을 선택할 수 있습니다.</p>`;
             } catch (e) {
                 /* best-effort enhancement; never break onboarding */
             }

package/static/scripts/workspace.js

@@ -6,8 +6,15 @@ const state = {
   activeWorkspace: null,
   registry: null,
   managingWorkspace: null,
+  skillsPayload: null,
+  skillTab: "recommended",
+  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);
 }
@@ -194,30 +201,74 @@ 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";
+}
+
+// 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));
+  });
+  return { installed, popular: notInstalled, recommended, 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 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>`;
+  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>
-      </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>
+        <span class="tag">v${escapeHtml(version)}</span>
+        ${skill.category ? `<span class="tag">${escapeHtml(skill.category)}</span>` : ""}
+        <span class="tag">${escapeHtml(source)}</span>
       </div>
-    </div>
-  `).join("") : `<div class="list-item"><div class="meta-line">No skills found.</div></div>`;
+      <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 +378,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"),
@@ -354,6 +572,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() {
@@ -423,6 +646,19 @@ async function configureComputerMemory(enabled) {
 }
 
 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", {
@@ -521,6 +757,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,70 @@ 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); }

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.1.0">
+  <link rel="stylesheet" href="/static/workspace.css?v=1.6.0">
 </head>
 <body>
   <div class="workspace-shell">
@@ -20,12 +20,14 @@
       <nav>
         <a class="active" href="#overview"><i class="ti ti-layout-dashboard"></i><span>Overview</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>
         <a href="#memory"><i class="ti ti-book-2"></i><span>Memory</span></a>
         <a href="#agents"><i class="ti ti-route-alt-left"></i><span>Agents</span></a>
         <a href="#workflows"><i class="ti ti-git-branch"></i><span>Workflow</span></a>
         <a href="#skills"><i class="ti ti-puzzle"></i><span>Skills</span></a>
         <a href="#timeline"><i class="ti ti-timeline-event"></i><span>Timeline</span></a>
+        <a href="#enterprise"><i class="ti ti-building-skyscraper"></i><span>Editions</span></a>
       </nav>
       <div class="rail-links">
         <a href="/chat"><i class="ti ti-message-circle"></i><span>Chat</span></a>
@@ -54,6 +56,18 @@
 
       <section class="metric-grid" id="metric-grid"></section>
 
+      <section class="workspace-band" id="workspace-summary-band">
+        <div class="section-head">
+          <div>
+            <div class="eyebrow">You are here</div>
+            <h2>Current Workspace</h2>
+          </div>
+          <span class="status-pill" id="summary-scope-pill">personal</span>
+        </div>
+        <div id="workspace-summary" class="summary-card"></div>
+        <div id="workspace-quickswitch" class="quickswitch-row"></div>
+      </section>
+
       <section class="workspace-band" id="organization">
         <div class="section-head">
           <div>
@@ -120,6 +134,55 @@
         </div>
       </section>
 
+      <section class="workspace-grid two-col" id="graph-explorer">
+        <div class="workspace-panel">
+          <div class="section-head">
+            <div>
+              <div class="eyebrow">Knowledge Graph</div>
+              <h2>Entity Explorer</h2>
+            </div>
+            <button class="icon-action" id="reload-entities" title="Reload entities"><i class="ti ti-refresh"></i></button>
+          </div>
+          <div class="inline-form">
+            <input id="entity-search" placeholder="Search entities (concept, person, file…)">
+          </div>
+          <div id="entity-list" class="list-stack"></div>
+        </div>
+        <div class="workspace-panel">
+          <div class="section-head">
+            <div>
+              <div class="eyebrow">Relationships</div>
+              <h2 id="entity-detail-title">Select an entity</h2>
+            </div>
+          </div>
+          <div id="entity-detail" class="list-stack">
+            <div class="list-item"><div class="meta-line">Pick an entity on the left to see its relationships, related entities, and a path back to you.</div></div>
+          </div>
+        </div>
+      </section>
+
+      <section class="workspace-grid two-col" id="activity">
+        <div class="workspace-panel">
+          <div class="section-head">
+            <div>
+              <div class="eyebrow">Workspace</div>
+              <h2>Recent Activity</h2>
+            </div>
+            <button class="icon-action" id="reload-activity" title="Reload activity"><i class="ti ti-refresh"></i></button>
+          </div>
+          <div id="activity-list" class="list-stack"></div>
+        </div>
+        <div class="workspace-panel">
+          <div class="section-head">
+            <div>
+              <div class="eyebrow">Memory</div>
+              <h2>Workspace Memory Feed</h2>
+            </div>
+          </div>
+          <div id="memory-feed" class="list-stack"></div>
+        </div>
+      </section>
+
       <section class="workspace-grid two-col" id="snapshots">
         <div class="workspace-panel">
           <div class="section-head">
@@ -217,6 +280,12 @@
             </div>
             <button class="icon-action" id="reload-skills" title="Reload skills"><i class="ti ti-refresh"></i></button>
           </div>
+          <div class="tab-bar" id="skill-tabs">
+            <button class="tab active" data-skill-tab="recommended">Recommended</button>
+            <button class="tab" data-skill-tab="popular">Popular</button>
+            <button class="tab" data-skill-tab="installed">Installed</button>
+            <button class="tab" data-skill-tab="updates">Updates <span class="tab-count" id="skill-updates-count"></span></button>
+          </div>
           <div id="skill-list" class="list-stack"></div>
         </div>
         <div class="workspace-panel" id="timeline">
@@ -229,10 +298,22 @@
           <div id="timeline-list" class="timeline-list"></div>
         </div>
       </section>
+
+      <section class="workspace-band" id="enterprise">
+        <div class="section-head">
+          <div>
+            <div class="eyebrow">Editions</div>
+            <h2>Enterprise Capabilities</h2>
+          </div>
+          <span class="status-pill" id="enterprise-edition-pill">community</span>
+        </div>
+        <p class="meta-line" id="enterprise-note"></p>
+        <div id="capability-grid" class="capability-grid"></div>
+      </section>
     </main>
   </div>
 
   <div class="toast" id="toast"></div>
-  <script src="/static/scripts/workspace.js?v=1.1.0"></script>
+  <script src="/static/scripts/workspace.js?v=1.6.0"></script>
 </body>
 </html>