memorix 1.0.4 → 1.0.6

package/dist/dashboard/static/app.js

@@ -173,6 +173,18 @@ const i18n = {
     identityUnavailable: 'Identity Unavailable',
     identityUnavailableDesc: 'Could not load project identity data',
 
+    // System Health
+    systemHealth: 'System Health',
+    searchMode: 'Search Mode',
+    embeddingProvider: 'Embedding Provider',
+    backfillPending: 'Backfill Pending',
+    vectorsMissing: 'vectors missing',
+    noBackfillNeeded: 'All vectors indexed',
+    providerReady: 'Ready',
+    providerUnavailable: 'Unavailable',
+    providerDisabled: 'Disabled (BM25 only)',
+    degradedHint: 'Search is degraded — no vector similarity',
+
     // Nav tooltips
     navDashboard: 'Dashboard',
     navGitMemory: 'Git Memory',
@@ -349,6 +361,18 @@ const i18n = {
     identityUnavailable: '身份信息不可用',
     identityUnavailableDesc: '无法加载项目身份数据',
 
+    // System Health
+    systemHealth: '系统健康',
+    searchMode: '搜索模式',
+    embeddingProvider: '向量提供者',
+    backfillPending: '回填待处理',
+    vectorsMissing: '条向量缺失',
+    noBackfillNeeded: '所有向量已索引',
+    providerReady: '就绪',
+    providerUnavailable: '不可用',
+    providerDisabled: '已禁用 (仅 BM25)',
+    degradedHint: '搜索已降级 — 无向量相似性',
+
     // Nav tooltips
     navDashboard: '仪表盘',
     navGitMemory: 'Git 记忆',
@@ -522,7 +546,8 @@ async function initProjectSwitcher() {
     }
 
     // Determine active project
-    let active = allProjects.find(p => p.isCurrent);
+    // Strategy: prefer URL param > isCurrent (if it has real data) > first project with most observations
+    let active = null;
     if (urlProject) {
       const urlMatch = allProjects.find(p => p.id === urlProject);
       if (urlMatch) {
@@ -532,7 +557,26 @@ async function initProjectSwitcher() {
         loadPage(currentPage);
       }
     }
-    if (!active) active = allProjects[0];
+    if (!active) {
+      const current = allProjects.find(p => p.isCurrent);
+      // Only use isCurrent if it's a real project with data (not __unresolved__ / system dir with 0 obs)
+      if (current && current.count > 0 && current.id !== '__unresolved__') {
+        active = current;
+        selectedProject = current.id;
+      } else {
+        // Auto-select the first project with the most observations (list is pre-sorted by count desc)
+        const firstReal = allProjects.find(p => p.count > 0 && p.id !== '__unresolved__');
+        if (firstReal) {
+          active = firstReal;
+          selectedProject = firstReal.id;
+        } else {
+          active = current || allProjects[0];
+          selectedProject = active?.id || '';
+        }
+      }
+      Object.keys(loaded).forEach(k => delete loaded[k]);
+      loadPage(currentPage);
+    }
 
     updateTrigger(active);
     renderProjectList(allProjects, active);
@@ -596,7 +640,7 @@ async function initProjectSwitcher() {
         const project = allProjects.find(p => p.id === id);
         if (!project) return;
 
-        selectedProject = project.isCurrent ? '' : project.id;
+        selectedProject = project.id;
         updateTrigger(project);
         switcher.classList.remove('open');
 
@@ -703,6 +747,41 @@ async function loadDashboard() {
       </div>
     </div>
 
+    <!-- System Health -->
+    <div class="overview-row">
+      <div class="panel" style="flex:1;">
+        <div class="panel-header"><span class="panel-title">${t('systemHealth')}</span></div>
+        <div class="panel-body">
+          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;">
+            <div>
+              <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">${t('embeddingProvider')}</div>
+              <div style="font-size:14px;font-weight:600;color:${stats.embedding?.enabled ? 'var(--accent-green)' : stats.embedding?.provider ? 'var(--accent-amber)' : 'var(--text-muted)'};">
+                ${stats.embedding?.enabled ? t('providerReady') : stats.embedding?.provider ? t('providerUnavailable') : t('providerDisabled')}
+              </div>
+              ${stats.embedding?.provider ? `<div style="font-size:11px;color:var(--text-secondary);margin-top:2px;">${stats.embedding.provider} (${stats.embedding.dimensions}d)</div>` : ''}
+            </div>
+            <div>
+              <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">${t('backfillPending')}</div>
+              <div style="font-size:14px;font-weight:600;color:${(stats.vectorStatus?.missing || 0) > 0 ? 'var(--accent-amber)' : 'var(--accent-green)'};">
+                ${(stats.vectorStatus?.missing || 0) > 0 ? stats.vectorStatus.missing + ' ' + t('vectorsMissing') : t('noBackfillNeeded')}
+              </div>
+            </div>
+            <div>
+              <div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">${t('searchMode')}</div>
+              <div style="font-size:14px;font-weight:600;color:${
+                (stats.searchMode || '').includes('hybrid') ? 'var(--accent-blue)'
+                : (stats.searchMode || '').includes('vector') ? 'var(--accent-purple)'
+                : (stats.searchMode || '').includes('rerank') ? 'var(--accent-green)'
+                : 'var(--accent-amber)'};">
+                ${stats.searchMode || (stats.embedding?.enabled ? 'hybrid' : 'fulltext')}
+              </div>
+              ${stats.embeddingProviderState === 'temporarily_unavailable' ? `<div style="font-size:11px;color:var(--accent-amber);margin-top:2px;">${t('degradedHint')}</div>` : ''}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- Source Breakdown -->
     <div class="overview-row">
       <div class="panel" style="flex:1;">
@@ -833,9 +912,12 @@ function renderPieChart(canvasId, entries, icons) {
 }
 
 // ============================================================
-// Knowledge Graph Page
+// Memory Topology Explorer — Cytoscape.js + Dagre
+// Focused topology default, not full graph dump
 // ============================================================
 
+let _graphState = null;
+
 async function loadGraph() {
   const container = document.getElementById('page-graph');
   container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
@@ -848,70 +930,52 @@ async function loadGraph() {
 
   container.innerHTML = `
     <div class="page-header">
-      <h1 class="page-title">${t('knowledgeGraph')}</h1>
-      <p class="page-subtitle">${graph.entities.length} ${t('entities').toLowerCase()}, ${graph.relations.length} ${t('relations').toLowerCase()}</p>
+      <h1 class="page-title">Memory Topology</h1>
+      <p class="page-subtitle">${graph.entities.length} entities · ${graph.relations.length} relations</p>
     </div>
     <div class="graph-layout">
+      <div class="graph-filter-panel" id="graph-filter-panel"></div>
       <div id="graph-container">
-        <canvas id="graph-canvas"></canvas>
-        <div class="graph-tooltip" id="graph-tooltip">
-          <div class="graph-tooltip-name"></div>
-          <div class="graph-tooltip-type"></div>
-        </div>
-        <div class="graph-panel" id="graph-panel">
-          <div class="graph-panel-tabs">
-            <button class="gp-tab active" data-gptab="stats">STATS</button>
-            <button class="gp-tab" data-gptab="legend">LEGEND</button>
-            <button class="gp-tab" data-gptab="filter">FILTER</button>
-            <button class="gp-tab" data-gptab="search">SEARCH</button>
+        <div id="cytoscape-mount"></div>
+        <div class="graph-status-bar">
+          <span class="graph-status-item" id="gs-nodes"></span>
+          <span class="graph-status-item" id="gs-edges"></span>
+          <span class="graph-status-item" id="gs-layout"></span>
+          <span class="graph-status-item" id="gs-scope"></span>
+          <div class="graph-zoom-controls">
+            <button class="graph-zoom-btn" id="gz-out">\u2212</button>
+            <button class="graph-zoom-btn" id="gz-fit">\u2B21</button>
+            <button class="graph-zoom-btn" id="gz-in">+</button>
           </div>
-          <div class="gp-content" id="gp-content"></div>
         </div>
-        <div class="graph-detail-drawer" id="graph-detail-drawer"></div>
+      </div>
+      <div class="graph-table-container" id="graph-table-container" style="display:none;"></div>
+      <div class="graph-inspector" id="graph-inspector">
+        <div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>Select a node to inspect</div>
       </div>
     </div>
+    <div id="graph-isolated-panel" style="display:none;"></div>
   `;
 
   renderGraph(graph);
 }
 
 // ============================================================
-// Canvas-based Force-Directed Graph — InfraNodus Style
-// Solid glowing nodes, colored gradient edges, labels on nodes
+// Cytoscape.js + Dagre — Focused Topology Renderer
+// Default: 1-hop neighborhood of top entity, dagre LR layout
 // ============================================================
 
 function renderGraph(graph) {
-  const canvas = document.getElementById('graph-canvas');
-  const ctx = canvas.getContext('2d');
-  const container = document.getElementById('graph-container');
-
-  const rect = container.getBoundingClientRect();
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = rect.width * dpr;
-  canvas.height = rect.height * dpr;
-  canvas.style.width = rect.width + 'px';
-  canvas.style.height = rect.height + 'px';
-  ctx.scale(dpr, dpr);
-
-  const W = rect.width;
-  const H = rect.height;
-
-  // --- Cosmic starfield background ---
-  const stars = [];
-  for (let i = 0; i < 180; i++) {
-    stars.push({
-      x: Math.random() * W,
-      y: Math.random() * H,
-      r: Math.random() * 1.2 + 0.2,
-      a: Math.random() * 0.5 + 0.05,
-      twinkle: Math.random() * Math.PI * 2,
-    });
+  // Register dagre layout if not already registered
+  if (typeof cytoscape !== 'undefined' && typeof cytoscapeDagre !== 'undefined' && !cytoscape._dagreRegistered) {
+    cytoscapeDagre(cytoscape);
+    cytoscape._dagreRegistered = true;
   }
 
-  // --- InfraNodus-inspired vibrant palette ---
+  // --- Muted enterprise palette ---
   const palette = [
-    '#69F0AE', '#FFAB40', '#D0BCFF', '#80D8FF',
-    '#FFD54F', '#FFB8D1', '#82B1FF', '#FF8A80',
+    '#7C9CBF', '#8FB996', '#C4956A', '#A893C2',
+    '#6BA3A0', '#B8A44C', '#C27878', '#7B8EB8',
   ];
   const typeColors = {};
   let colorIdx = 0;
@@ -920,707 +984,724 @@ function renderGraph(graph) {
     return typeColors[type];
   }
 
-  // Detect if one type dominates — if so, use name-hash for color variety
   const typeCounts = {};
   graph.entities.forEach(e => { typeCounts[e.entityType] = (typeCounts[e.entityType] || 0) + 1; });
-  const maxTypeCount = Math.max(...Object.values(typeCounts));
-  const useNameHash = maxTypeCount > graph.entities.length * 0.6;
-
-  function hashColor(name) {
-    let h = 0;
-    for (let i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0;
-    return palette[((h % palette.length) + palette.length) % palette.length];
-  }
-
-  // --- Build nodes & edges ---
-  const nodes = graph.entities.map((e) => {
-    const obsCount = e.observations.length;
-    return {
-      id: e.name, type: e.entityType, observations: e.observations,
-      x: (Math.random() - 0.5) * W * 0.5,
-      y: (Math.random() - 0.5) * H * 0.5,
-      vx: 0, vy: 0,
-      baseRadius: Math.max(5, Math.min(4 + Math.sqrt(obsCount) * 3, 20)),
-      radius: 0,
-      color: useNameHash ? hashColor(e.name) : getTypeColor(e.entityType),
-      degree: 0,
-    };
-  });
-  const nodeMap = {};
-  nodes.forEach(n => nodeMap[n.id] = n);
-
-  const edges = graph.relations
-    .filter(r => nodeMap[r.from] && nodeMap[r.to])
-    .map(r => {
-      nodeMap[r.from].degree++;
-      nodeMap[r.to].degree++;
-      return { source: nodeMap[r.from], target: nodeMap[r.to], type: r.relationType };
-    });
-
-  // Ensure typeColors populated for legend
-  Object.keys(typeCounts).forEach(t => getTypeColor(t));
-
-  // Node sizing: smaller circles (labels are the visual identity in InfraNodus)
-  const maxDegree = Math.max(1, ...nodes.map(n => n.degree));
-  nodes.forEach(n => {
-    const degreeBoost = (n.degree / maxDegree) * 12;
-    n.radius = Math.min(n.baseRadius * 0.7 + degreeBoost, 24);
-  });
+  Object.keys(typeCounts).forEach(t2 => getTypeColor(t2));
 
-  // --- Camera (zoom & pan) ---
-  let cam = { x: 0, y: 0, zoom: 1 };
-  function worldToScreen(wx, wy) {
-    return { x: (wx - cam.x) * cam.zoom + W / 2, y: (wy - cam.y) * cam.zoom + H / 2 };
-  }
-  function screenToWorld(sx, sy) {
-    return { x: (sx - W / 2) / cam.zoom + cam.x, y: (sy - H / 2) / cam.zoom + cam.y };
-  }
+  function isLight() { return document.documentElement.getAttribute('data-theme') === 'light'; }
 
-  // --- Physics (cluster-based layout — separate galaxies per type) ---
-  const REPULSION = 4000;
-  const ATTRACTION = 0.008;
-  const DAMPING = 0.82;
-  const IDEAL_DIST = 80;
-  const CLUSTER_PULL = 0.012;       // Pull nodes toward their cluster center
-  const INTER_CLUSTER_REPEL = 8000; // Repel cluster centers apart
-
-  let hoveredNode = null;
-  let selectedNode = null;
-  let dragNode = null;
-  let panStart = null;
-  let simTick = 0;
-  let isSettled = false;
-  let stableMode = nodes.length > 15; // Auto-stable for larger graphs
-  const SETTLE_THRESHOLD = 0.15;
-  let settleCountdown = 0; // frames below threshold before declaring settled
-
-  // Group nodes by color → separate galaxies
-  const colorGroups = {};
-  nodes.forEach(n => { (colorGroups[n.color] = colorGroups[n.color] || []).push(n); });
-  const groupKeys = Object.keys(colorGroups);
-
-  // Assign cluster centers with asymmetric organic placement
-  const clusterCenters = {};
-  const baseR = Math.min(W, H) * 0.28;
-  groupKeys.forEach((color, gi) => {
-    // Irregular angle spacing + random orbit distance
-    const baseAngle = (gi / groupKeys.length) * Math.PI * 2;
-    const angleJitter = (Math.random() - 0.5) * (Math.PI * 0.4);
-    const angle = baseAngle + angleJitter;
-    const r = baseR * (0.5 + Math.random() * 0.7);
-    clusterCenters[color] = {
-      x: Math.cos(angle) * r + (Math.random() - 0.5) * baseR * 0.3,
-      y: Math.sin(angle) * r + (Math.random() - 0.5) * baseR * 0.3,
-    };
+  // --- Build data structures ---
+  const entityMap = {};
+  graph.entities.forEach(e => {
+    entityMap[e.name] = e;
   });
 
-  // Initial placement near cluster centers
-  groupKeys.forEach((color) => {
-    const cc = clusterCenters[color];
-    const spread = 40 + colorGroups[color].length * 5;
-    colorGroups[color].forEach(n => {
-      n.x = cc.x + (Math.random() - 0.5) * spread;
-      n.y = cc.y + (Math.random() - 0.5) * spread;
-    });
+  // Compute degree for each entity
+  const degreeMap = {};
+  graph.entities.forEach(e => { degreeMap[e.name] = 0; });
+  graph.relations.forEach(r => {
+    if (degreeMap[r.from] !== undefined) degreeMap[r.from]++;
+    if (degreeMap[r.to] !== undefined) degreeMap[r.to]++;
   });
 
-  function simulate() {
-    simTick++;
-
-    // --- Inter-cluster repulsion (push cluster centers apart) ---
-    for (let i = 0; i < groupKeys.length; i++) {
-      for (let j = i + 1; j < groupKeys.length; j++) {
-        const ca = clusterCenters[groupKeys[i]], cb = clusterCenters[groupKeys[j]];
-        let dx = cb.x - ca.x, dy = cb.y - ca.y;
-        let dist = Math.sqrt(dx * dx + dy * dy) || 1;
-        let force = INTER_CLUSTER_REPEL / (dist * dist);
-        ca.x -= (dx / dist) * force * 0.01;
-        ca.y -= (dy / dist) * force * 0.01;
-        cb.x += (dx / dist) * force * 0.01;
-        cb.y += (dy / dist) * force * 0.01;
+  // Find top entity by degree (for default focus)
+  const topEntity = graph.entities.reduce((best, e) =>
+    (degreeMap[e.name] || 0) > (degreeMap[best.name] || 0) ? e : best,
+    graph.entities[0]
+  );
+
+  // --- Computed stats ---
+  const isolatedCount = graph.entities.filter(e => (degreeMap[e.name] || 0) === 0).length;
+  const connectedCount = graph.entities.length - isolatedCount;
+  const isSparse = isolatedCount > connectedCount;
+
+  // --- State ---
+  let activeTypes = new Set(Object.keys(typeCounts));
+  let currentView = 'topology'; // 'topology' | 'table'
+  let currentLayout = 'dagre-lr'; // 'dagre-lr' | 'dagre-tb'
+  let focusEntity = topEntity.name;
+  let depth = 1;
+  let scope = 'connected'; // 'connected' | 'neighborhood' | 'full'
+  let selectedNodeId = null;
+  let cy = null; // Cytoscape instance
+
+  // --- Subgraph extraction (BFS n-hop neighborhood) ---
+  function getNeighborhood(centerName, maxDepth) {
+    const visited = new Set();
+    const edgeSet = new Set();
+    const queue = [{ name: centerName, d: 0 }];
+    visited.add(centerName);
+
+    while (queue.length > 0) {
+      const { name, d } = queue.shift();
+      if (d >= maxDepth) continue;
+      for (const r of graph.relations) {
+        if (r.from === name && entityMap[r.to] && !visited.has(r.to)) {
+          visited.add(r.to);
+          edgeSet.add(r);
+          queue.push({ name: r.to, d: d + 1 });
+        } else if (r.from === name && entityMap[r.to]) {
+          edgeSet.add(r);
+        }
+        if (r.to === name && entityMap[r.from] && !visited.has(r.from)) {
+          visited.add(r.from);
+          edgeSet.add(r);
+          queue.push({ name: r.from, d: d + 1 });
+        } else if (r.to === name && entityMap[r.from]) {
+          edgeSet.add(r);
+        }
       }
     }
+    return {
+      nodeNames: visited,
+      edges: [...edgeSet].filter(r => visited.has(r.from) && visited.has(r.to)),
+    };
+  }
 
-    // --- Warmup factor (ramp all forces gradually to prevent explosive start) ---
-    const warmup = Math.min(1, simTick / 100);
-
-    // --- Node-to-node repulsion (also ramped) ---
-    const curRepulsion = REPULSION * (0.1 + 0.9 * warmup);
-    for (let i = 0; i < nodes.length; i++) {
-      for (let j = i + 1; j < nodes.length; j++) {
-        const a = nodes[i], b = nodes[j];
-        let dx = b.x - a.x, dy = b.y - a.y;
-        let dist = Math.sqrt(dx * dx + dy * dy) || 1;
-        let force = curRepulsion / (dist * dist);
-        // Same-color nodes repel less (stay in galaxy)
-        if (a.color === b.color) force *= 0.4;
-        let fx = (dx / dist) * force, fy = (dy / dist) * force;
-        a.vx -= fx; a.vy -= fy;
-        b.vx += fx; b.vy += fy;
-      }
+  // --- Build Cytoscape elements from current state ---
+  function buildElements() {
+    let nodeNames, visibleEdges;
+
+    if (scope === 'full') {
+      // Full graph canvas: only connected nodes (isolated go to inventory panel below)
+      nodeNames = new Set(
+        graph.entities.filter(e => activeTypes.has(e.entityType) && (degreeMap[e.name] || 0) > 0).map(e => e.name)
+      );
+      visibleEdges = graph.relations.filter(r => nodeNames.has(r.from) && nodeNames.has(r.to));
+    } else if (scope === 'neighborhood') {
+      // Focused neighborhood: BFS from focusEntity
+      const sub = getNeighborhood(focusEntity, depth);
+      nodeNames = new Set([...sub.nodeNames].filter(n => activeTypes.has(entityMap[n]?.entityType)));
+      if (entityMap[focusEntity]) nodeNames.add(focusEntity);
+      visibleEdges = sub.edges.filter(r => nodeNames.has(r.from) && nodeNames.has(r.to));
+    } else {
+      // DEFAULT: 'connected' — only nodes with degree > 0 (no isolated nodes)
+      nodeNames = new Set(
+        graph.entities
+          .filter(e => activeTypes.has(e.entityType) && (degreeMap[e.name] || 0) > 0)
+          .map(e => e.name)
+      );
+      visibleEdges = graph.relations.filter(r => nodeNames.has(r.from) && nodeNames.has(r.to));
     }
 
-    // --- Edge attraction (also ramped) ---
-    const curAttraction = ATTRACTION * warmup;
-    for (const edge of edges) {
-      let dx = edge.target.x - edge.source.x, dy = edge.target.y - edge.source.y;
-      let dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      let force = (dist - IDEAL_DIST) * curAttraction;
-      let fx = (dx / dist) * force, fy = (dy / dist) * force;
-      edge.source.vx += fx; edge.source.vy += fy;
-      edge.target.vx -= fx; edge.target.vy -= fy;
-    }
+    // Top centrality: only top 3 show labels by default (not 10)
+    const visibleDegrees = {};
+    nodeNames.forEach(n => { visibleDegrees[n] = 0; });
+    visibleEdges.forEach(r => {
+      if (visibleDegrees[r.from] !== undefined) visibleDegrees[r.from]++;
+      if (visibleDegrees[r.to] !== undefined) visibleDegrees[r.to]++;
+    });
+    const topCentrality = new Set(
+      [...nodeNames].sort((a, b) => (visibleDegrees[b] || 0) - (visibleDegrees[a] || 0)).slice(0, 3)
+    );
 
-    // --- Cluster gravity (pull each node toward its galaxy center) ---
-    for (const node of nodes) {
-      const cc = clusterCenters[node.color];
-      if (!cc) continue;
-      node.vx += (cc.x - node.x) * CLUSTER_PULL;
-      node.vy += (cc.y - node.y) * CLUSTER_PULL;
-    }
+    const nodes = [...nodeNames].map(name => {
+      const e = entityMap[name];
+      const deg = visibleDegrees[name] || 0;
+      const isFocus = scope === 'neighborhood' && name === focusEntity;
+      const isTop = topCentrality.has(name);
+      // Labels: only top 3 centrality nodes show labels by default
+      const showLabel = isFocus || isTop;
+      return {
+        data: {
+          id: name,
+          label: showLabel ? (name.length > 24 ? name.slice(0, 22) + '\u2026' : name) : '',
+          fullLabel: name,
+          type: e.entityType,
+          obsCount: e.observations.length,
+          degree: deg,
+          color: getTypeColor(e.entityType),
+          isFocus: isFocus,
+          nodeSize: Math.max(16, Math.min(12 + Math.sqrt(deg) * 6, 40)),
+        },
+      };
+    });
 
-    // --- Gentle jitter only during warmup, then pure physics ---
-    const jitter = simTick < 60 ? 0.06 * (1 - simTick / 60) : 0;
-    const maxV = simTick < 40 ? 1.2 : 3.0; // Strict speed limit during early frames
-    let totalMovement = 0;
-    for (const node of nodes) {
-      if (node === dragNode) continue;
-      node.vx *= DAMPING; node.vy *= DAMPING;
-      if (jitter > 0) {
-        node.vx += (Math.random() - 0.5) * jitter;
-        node.vy += (Math.random() - 0.5) * jitter;
-      }
-      // Clamp velocity
-      const speed = Math.sqrt(node.vx * node.vx + node.vy * node.vy);
-      if (speed > maxV) { node.vx *= maxV / speed; node.vy *= maxV / speed; }
-      node.x += node.vx; node.y += node.vy;
-      totalMovement += Math.abs(node.vx) + Math.abs(node.vy);
-    }
+    const edges = visibleEdges.map((r, i) => ({
+      data: {
+        id: 'e' + i + '_' + r.from + '_' + r.to,
+        source: r.from,
+        target: r.to,
+        relationType: r.relationType,
+      },
+    }));
 
-    // Settle detection — stop physics when stable
-    if (stableMode && simTick > 120) {
-      const avgMovement = totalMovement / Math.max(1, nodes.length);
-      if (avgMovement < SETTLE_THRESHOLD) {
-        settleCountdown++;
-        if (settleCountdown > 30) isSettled = true;
-      } else {
-        settleCountdown = 0;
-      }
-    }
-    return totalMovement;
+    return { nodes, edges, visibleCount: nodeNames.size, edgeCount: visibleEdges.length };
   }
 
-  function isLight() { return document.documentElement.getAttribute('data-theme') === 'light'; }
-
-  function hexRGBA(hex, alpha) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
+  // --- Cytoscape style ---
+  function getCyStyle() {
+    const light = isLight();
+    return [
+      {
+        selector: 'node',
+        style: {
+          'width': 'data(nodeSize)',
+          'height': 'data(nodeSize)',
+          'background-color': 'data(color)',
+          'background-opacity': 0.85,
+          'border-width': 1,
+          'border-color': light ? 'rgba(0,0,0,0.12)' : 'rgba(255,255,255,0.12)',
+          'label': 'data(label)',
+          'font-size': 10,
+          'font-family': 'Inter, system-ui, sans-serif',
+          'font-weight': 400,
+          'color': light ? '#1C1B1F' : '#E6E1E5',
+          'text-valign': 'bottom',
+          'text-halign': 'center',
+          'text-margin-y': 4,
+          'text-max-width': 120,
+          'text-wrap': 'ellipsis',
+          'text-background-color': light ? '#F7F2FA' : '#0F0F17',
+          'text-background-opacity': 0.7,
+          'text-background-padding': '2px',
+          'text-background-shape': 'roundrectangle',
+          'min-zoomed-font-size': 8,
+        },
+      },
+      {
+        selector: 'node[?isFocus]',
+        style: {
+          'border-width': 3,
+          'border-color': light ? '#6750A4' : '#D0BCFF',
+          'font-weight': 600,
+          'font-size': 12,
+        },
+      },
+      {
+        selector: 'node:selected',
+        style: {
+          'border-width': 3,
+          'border-color': light ? '#6750A4' : '#D0BCFF',
+          'border-style': 'dashed',
+          'font-weight': 600,
+          'label': 'data(fullLabel)',
+        },
+      },
+      {
+        selector: 'node.hover',
+        style: {
+          'border-width': 2,
+          'border-color': light ? '#6750A4' : '#D0BCFF',
+          'label': 'data(fullLabel)',
+          'font-weight': 500,
+          'z-index': 999,
+        },
+      },
+      {
+        selector: 'edge',
+        style: {
+          'width': 1,
+          'line-color': light ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)',
+          'target-arrow-color': light ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)',
+          'target-arrow-shape': 'triangle',
+          'arrow-scale': 0.7,
+          'curve-style': 'bezier',
+          'label': '',
+        },
+      },
+      {
+        selector: 'edge:selected, edge.hover',
+        style: {
+          'width': 2,
+          'line-color': light ? 'rgba(103,80,164,0.5)' : 'rgba(208,188,255,0.4)',
+          'target-arrow-color': light ? 'rgba(103,80,164,0.6)' : 'rgba(208,188,255,0.5)',
+          'label': 'data(relationType)',
+          'font-size': 9,
+          'font-family': 'JetBrains Mono, monospace',
+          'color': light ? '#6750A4' : '#D0BCFF',
+          'text-background-color': light ? '#F7F2FA' : '#0F0F17',
+          'text-background-opacity': 0.8,
+          'text-background-padding': '2px',
+          'text-background-shape': 'roundrectangle',
+          'text-rotation': 'autorotate',
+        },
+      },
+      {
+        selector: '.dimmed',
+        style: {
+          'opacity': 0.15,
+        },
+      },
+    ];
   }
 
-  // --- Draw (InfraNodus style) ---
-  // Canvas always renders dark cosmic background, independent of page theme
-  function draw() {
-    ctx.clearRect(0, 0, W, H);
-
-    // --- Cosmic background (always dark) ---
-    const bgGrad = ctx.createRadialGradient(W * 0.5, H * 1.2, 0, W * 0.5, H * 0.5, H * 1.1);
-    bgGrad.addColorStop(0, '#1a1040');
-    bgGrad.addColorStop(0.4, '#0e0e1e');
-    bgGrad.addColorStop(1, '#06060C');
-    ctx.fillStyle = bgGrad;
-    ctx.fillRect(0, 0, W, H);
-
-    // Stars with subtle twinkle
-    const t0 = Date.now() * 0.001;
-    for (const star of stars) {
-      const flicker = 0.6 + 0.4 * Math.sin(t0 * 0.8 + star.twinkle);
-      ctx.beginPath();
-      ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
-      ctx.fillStyle = `rgba(220,210,255,${star.a * flicker})`;
-      ctx.fill();
+  // --- Layout config ---
+  function getLayoutConfig() {
+    if (currentLayout === 'dagre-tb') {
+      return { name: 'dagre', rankDir: 'TB', nodeSep: 40, rankSep: 60, edgeSep: 20, padding: 30 };
     }
+    // Default: dagre LR
+    return { name: 'dagre', rankDir: 'LR', nodeSep: 40, rankSep: 80, edgeSep: 20, padding: 30 };
+  }
 
-    // Subtle nebula glow
-    const neb = ctx.createRadialGradient(W * 0.3, H * 0.7, 0, W * 0.3, H * 0.7, W * 0.35);
-    neb.addColorStop(0, 'rgba(100, 60, 180, 0.04)');
-    neb.addColorStop(1, 'rgba(100, 60, 180, 0)');
-    ctx.fillStyle = neb;
-    ctx.fillRect(0, 0, W, H);
-
-    // --- Edges: ALL colored with gradient (InfraNodus signature) ---
-    for (const edge of edges) {
-      const isActive = (hoveredNode && (edge.source === hoveredNode || edge.target === hoveredNode))
-        || (selectedNode && (edge.source === selectedNode || edge.target === selectedNode));
-      const s = worldToScreen(edge.source.x, edge.source.y);
-      const t2 = worldToScreen(edge.target.x, edge.target.y);
-      const mx = (s.x + t2.x) / 2, my = (s.y + t2.y) / 2;
-      const dx = t2.x - s.x, dy = t2.y - s.y;
-      const edgeLen = Math.sqrt(dx * dx + dy * dy);
-      const ox = -dy * 0.05, oy = dx * 0.05;
-
-      if (edge.source._dimmed || edge.target._dimmed) { ctx.globalAlpha = 0.03; }
-
-      // --- Edge glow (chain-like, zditor style) ---
-      if (edgeLen > 2) {
-        // Outer glow layer
-        ctx.beginPath();
-        ctx.moveTo(s.x, s.y);
-        ctx.quadraticCurveTo(mx + ox, my + oy, t2.x, t2.y);
-        const glowGrad = ctx.createLinearGradient(s.x, s.y, t2.x, t2.y);
-        glowGrad.addColorStop(0, hexRGBA(edge.source.color, isActive ? 0.25 : 0.12));
-        glowGrad.addColorStop(1, hexRGBA(edge.target.color, isActive ? 0.25 : 0.12));
-        ctx.strokeStyle = glowGrad;
-        ctx.lineWidth = isActive ? 12 * cam.zoom : 6 * cam.zoom;
-        ctx.stroke();
-      }
+  // --- Initialize / rebuild Cytoscape ---
+  function initCytoscape() {
+    const { nodes, edges, visibleCount, edgeCount } = buildElements();
+
+    if (cy) cy.destroy();
+
+    const light = isLight();
+    const mountEl = document.getElementById('cytoscape-mount');
+    if (!mountEl) return;
+
+    cy = cytoscape({
+      container: mountEl,
+      elements: [...nodes, ...edges],
+      style: getCyStyle(),
+      layout: getLayoutConfig(),
+      wheelSensitivity: 0.3,
+      minZoom: 0.1,
+      maxZoom: 4,
+      boxSelectionEnabled: false,
+    });
 
-      ctx.beginPath();
-      ctx.moveTo(s.x, s.y);
-      ctx.quadraticCurveTo(mx + ox, my + oy, t2.x, t2.y);
+    // --- Event handlers ---
+    cy.on('tap', 'node', function (evt) {
+      const node = evt.target;
+      selectedNodeId = node.id();
+      showInspector(node.id());
+    });
 
-      // Fix: avoid degenerate gradient when endpoints overlap
-      let edgeStyle;
-      if (edgeLen < 2) {
-        edgeStyle = hexRGBA(edge.source.color, isActive ? 1.0 : 0.7);
-      } else {
-        const grad = ctx.createLinearGradient(s.x, s.y, t2.x, t2.y);
-        if (isActive) {
-          grad.addColorStop(0, hexRGBA(edge.source.color, 1.0));
-          grad.addColorStop(1, hexRGBA(edge.target.color, 1.0));
-        } else {
-          grad.addColorStop(0, hexRGBA(edge.source.color, 0.7));
-          grad.addColorStop(1, hexRGBA(edge.target.color, 0.7));
-        }
-        edgeStyle = grad;
-      }
-      ctx.strokeStyle = edgeStyle;
-      ctx.lineWidth = isActive ? 3.0 * cam.zoom : Math.max(1.5, 2.0 * cam.zoom);
-      ctx.stroke();
-
-      // Active edge: label
-      if (isActive) {
-        ctx.font = `500 ${Math.max(9, 10 * cam.zoom)}px Inter, sans-serif`;
-        ctx.fillStyle = 'rgba(255,255,255,0.6)';
-        ctx.textAlign = 'center';
-        ctx.fillText(edge.type, mx + ox, my + oy - 6 * cam.zoom);
+    cy.on('tap', function (evt) {
+      if (evt.target === cy) {
+        selectedNodeId = null;
+        showInspector(null);
       }
-      ctx.globalAlpha = 1;
-    }
+    });
 
-    // --- Breathing time variable ---
-    const breathT = Date.now() * 0.001;
-
-    // --- Nodes: solid with breathing glow (zditor-style) ---
-    for (const node of nodes) {
-      const active = node === hoveredNode || node === selectedNode;
-      const p = worldToScreen(node.x, node.y);
-      const r = node.radius * cam.zoom;
-
-      if (p.x + r * 5 < 0 || p.x - r * 5 > W || p.y + r * 5 < 0 || p.y - r * 5 > H) continue;
-      if (node._dimmed) { ctx.globalAlpha = 0.06; }
-
-      // --- Breathing outer glow (pulsing nebula effect) ---
-      const breathPhase = Math.sin(breathT * 1.2 + node.x * 0.01 + node.y * 0.01);
-      const breathScale = 0.85 + 0.15 * breathPhase;
-      const glowAlpha = active ? 0.4 : 0.18 * breathScale;
-      const glowR = r * (active ? 4.0 : 3.0) * breathScale;
-      const glow = ctx.createRadialGradient(p.x, p.y, r * 0.2, p.x, p.y, glowR);
-      glow.addColorStop(0, hexRGBA(node.color, glowAlpha));
-      glow.addColorStop(0.5, hexRGBA(node.color, glowAlpha * 0.3));
-      glow.addColorStop(1, hexRGBA(node.color, 0));
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, glowR, 0, Math.PI * 2);
-      ctx.fillStyle = glow;
-      ctx.fill();
-
-      // --- Solid filled node ---
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
-      ctx.fillStyle = node.color;
-      ctx.fill();
-
-      // Specular highlight
-      if (r > 3) {
-        const spec = ctx.createRadialGradient(
-          p.x - r * 0.3, p.y - r * 0.3, 0,
-          p.x, p.y, r * 0.9
-        );
-        spec.addColorStop(0, 'rgba(255,255,255,0.35)');
-        spec.addColorStop(0.4, 'rgba(255,255,255,0.08)');
-        spec.addColorStop(1, 'rgba(255,255,255,0)');
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
-        ctx.fillStyle = spec;
-        ctx.fill();
-      }
+    let hoverNode = null;
+    cy.on('mouseover', 'node', function (evt) {
+      const node = evt.target;
+      hoverNode = node;
+      node.addClass('hover');
+      // Show label on hover for all connected edges
+      node.connectedEdges().addClass('hover');
+    });
+    cy.on('mouseout', 'node', function (evt) {
+      const node = evt.target;
+      if (hoverNode === node) hoverNode = null;
+      node.removeClass('hover');
+      node.connectedEdges().removeClass('hover');
+    });
 
-      // --- Labels: BELOW the node, only on hover/select (zditor-style) ---
-      const showLabel = active || cam.zoom > 1.8;
+    // Double-click to refocus
+    cy.on('dbltap', 'node', function (evt) {
+      focusEntity = evt.target.id();
+      scope = 'neighborhood';
+      rebuildGraph();
+    });
 
-      if (showLabel) {
-        const baseFontSize = active ? 14 : 10;
-        const fontSize = Math.max(8, baseFontSize * cam.zoom);
-        ctx.font = `${active ? '600' : '500'} ${fontSize}px Inter, sans-serif`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'top';
+    updateStatusBar(visibleCount, edgeCount);
+  }
 
-        const labelText = node.id.length > 20 && !active ? node.id.slice(0, 18) + '\u2026' : node.id;
-        const labelY = p.y + r + 5 * cam.zoom;
+  function rebuildGraph() {
+    initCytoscape();
+    renderFilterPanel();
+    renderIsolatedPanel();
+  }
 
-        // Always white text (canvas bg is always dark)
-        ctx.fillStyle = '#FFFFFF';
-        ctx.fillText(labelText, p.x, labelY);
-        ctx.textBaseline = 'alphabetic';
-      }
+  // --- Isolated Entities Inventory (not in graph canvas) ---
+  function renderIsolatedPanel() {
+    const panel = document.getElementById('graph-isolated-panel');
+    if (!panel) return;
 
-      ctx.globalAlpha = 1;
+    // Only show when scope is connected or full (not neighborhood)
+    if (scope === 'neighborhood') {
+      panel.style.display = 'none';
+      return;
     }
 
-    // --- Zoom indicator ---
-    const zoomPct = Math.round(cam.zoom * 100);
-    if (zoomPct !== 100) {
-      ctx.font = '500 11px Inter, sans-serif';
-      ctx.fillStyle = 'rgba(255,255,255,0.25)';
-      ctx.textAlign = 'left';
-      ctx.textBaseline = 'alphabetic';
-      ctx.fillText(`${zoomPct}%`, 12, H - 12);
+    const isolated = graph.entities.filter(e =>
+      activeTypes.has(e.entityType) && (degreeMap[e.name] || 0) === 0
+    );
+
+    if (isolated.length === 0) {
+      panel.style.display = 'none';
+      return;
     }
 
-    // Continuous loop handles redraw — no manual trigger needed
-  }
+    // Group by entityType
+    const groups = {};
+    isolated.forEach(e => {
+      (groups[e.entityType] = groups[e.entityType] || []).push(e);
+    });
 
-  // --- Graph Panel (zditor-style tabs: Stats / Legend / Filter / Search) ---
-  const typeCount = {};
-  nodes.forEach(n => { typeCount[n.type] = (typeCount[n.type] || 0) + 1; });
-  Object.keys(typeCounts).forEach(t2 => getTypeColor(t2));
+    const groupEntries = Object.entries(groups).sort((a, b) => b[1].length - a[1].length);
 
-  let activeFilterType = null;
-
-  function renderPanelTab(tab) {
-    const content = document.getElementById('gp-content');
-    if (!content) return;
-
-    if (tab === 'stats') {
-      const maxDeg = Math.max(1, ...nodes.map(n => n.degree));
-      const topNodes = [...nodes].sort((a, b) => b.degree - a.degree).slice(0, 5);
-      content.innerHTML = `
-        <div class="gp-stat-row"><span class="gp-stat-label">Nodes</span><span class="gp-stat-value">${nodes.length}</span></div>
-        <div class="gp-stat-row"><span class="gp-stat-label">Edges</span><span class="gp-stat-value">${edges.length}</span></div>
-        <div class="gp-stat-row"><span class="gp-stat-label">Types</span><span class="gp-stat-value">${Object.keys(typeCount).length}</span></div>
-        <div class="gp-stat-row"><span class="gp-stat-label">Density</span><span class="gp-stat-value">${nodes.length > 1 ? (2 * edges.length / (nodes.length * (nodes.length - 1))).toFixed(3) : '0'}</span></div>
-        <div style="margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.04);">
-          <div style="font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;">Top Nodes</div>
-          ${topNodes.map(n => `
-            <div class="gp-legend-item" data-node-id="${escapeHtml(n.id)}">
-              <div class="gp-legend-dot" style="background:${n.color};box-shadow:0 0 6px ${n.color}60;"></div>
-              <span class="gp-legend-name">${escapeHtml(n.id)}</span>
-              <span class="gp-legend-count">${n.degree}</span>
-            </div>
-          `).join('')}
-        </div>
-        <div class="gp-zoom-controls">
-          <button class="gp-zoom-btn" id="gp-zoom-out">\u2212</button>
-          <button class="gp-zoom-btn" id="gp-zoom-reset">\u27F3</button>
-          <button class="gp-zoom-btn" id="gp-zoom-in">+</button>
-        </div>
-      `;
-    } else if (tab === 'legend') {
-      content.innerHTML = Object.entries(typeCount)
-        .sort((a, b) => b[1] - a[1])
-        .map(([type, count]) => `
-          <div class="gp-legend-item" data-legend-type="${escapeHtml(type)}">
-            <div class="gp-legend-dot" style="background:${typeColors[type] || '#666'};box-shadow:0 0 8px ${typeColors[type] || '#666'}40;"></div>
-            <span class="gp-legend-name">${escapeHtml(type)}</span>
-            <span class="gp-legend-count">${count}</span>
-          </div>
-        `).join('') + `
-        <div class="gp-zoom-controls">
-          <button class="gp-zoom-btn" id="gp-zoom-out">\u2212</button>
-          <button class="gp-zoom-btn" id="gp-zoom-reset">\u27F3</button>
-          <button class="gp-zoom-btn" id="gp-zoom-in">+</button>
-        </div>
-      `;
-    } else if (tab === 'filter') {
-      content.innerHTML = `
-        <div class="gp-legend-item${!activeFilterType ? ' active' : ''}" data-filter-type="" style="${!activeFilterType ? 'background:rgba(208,188,255,0.08)' : ''}">
-          <span class="gp-legend-name" style="font-weight:500;">Show All</span>
-          <span class="gp-legend-count">${nodes.length}</span>
+    panel.style.display = 'block';
+    panel.innerHTML = `
+      <div class="panel" style="margin-top:16px;">
+        <div class="panel-header">
+          <span class="panel-title">Isolated Entities</span>
+          <span style="font-size:11px;color:var(--text-muted);">${isolated.length} entities with no relations \u2014 shown separately for readability</span>
         </div>
-        ${Object.entries(typeCount).sort((a,b) => b[1] - a[1]).map(([type, count]) => `
-          <div class="gp-legend-item${activeFilterType === type ? ' active' : ''}" data-filter-type="${escapeHtml(type)}" style="${activeFilterType === type ? 'background:rgba(208,188,255,0.08)' : ''}">
-            <div class="gp-legend-dot" style="background:${typeColors[type] || '#666'};"></div>
-            <span class="gp-legend-name">${escapeHtml(type)}</span>
-            <span class="gp-legend-count">${count}</span>
-          </div>
-        `).join('')}
-      `;
-    } else if (tab === 'search') {
-      content.innerHTML = `
-        <input type="text" class="gp-search" id="gp-search-input" placeholder="Start typing to search nodes" autocomplete="off" />
-        <div id="gp-search-results" style="margin-top:10px;"></div>
-      `;
-      const input = document.getElementById('gp-search-input');
-      if (input) {
-        input.focus();
-        input.addEventListener('input', () => {
-          const q = input.value.toLowerCase();
-          const results = document.getElementById('gp-search-results');
-          if (!q) { results.innerHTML = ''; return; }
-          const matches = nodes.filter(n => n.id.toLowerCase().includes(q) || n.type.toLowerCase().includes(q)).slice(0, 12);
-          results.innerHTML = matches.length === 0
-            ? '<div style="font-size:12px;color:var(--text-muted);padding:8px 0;">No matches</div>'
-            : matches.map(n => `
-              <div class="gp-legend-item" data-node-id="${escapeHtml(n.id)}">
-                <div class="gp-legend-dot" style="background:${n.color};box-shadow:0 0 6px ${n.color}60;"></div>
-                <span class="gp-legend-name">${escapeHtml(n.id)}</span>
-                <span class="gp-legend-count">${n.type}</span>
+        <div class="panel-body" style="padding:12px 16px;">
+          ${groupEntries.map(([type, entities]) => {
+            const color = getTypeColor(type);
+            const collapsed = entities.length > 8;
+            const shown = collapsed ? entities.slice(0, 8) : entities;
+            return `
+              <div style="margin-bottom:12px;">
+                <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
+                  <span style="width:8px;height:8px;border-radius:50%;background:${color};flex-shrink:0;"></span>
+                  <span style="font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;">${escapeHtml(type)}</span>
+                  <span style="font-size:10px;color:var(--text-muted);font-family:var(--font-mono);">${entities.length}</span>
+                </div>
+                <div style="display:flex;flex-wrap:wrap;gap:4px;">
+                  ${shown.map(e => `
+                    <span class="iso-entity-tag" data-iso-entity="${escapeHtml(e.name)}" style="display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:11px;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;transition:all 150ms;">
+                      ${escapeHtml(e.name.length > 28 ? e.name.slice(0, 26) + '\u2026' : e.name)}
+                      ${e.observations.length > 0 ? '<span style="font-size:9px;color:var(--text-muted);">' + e.observations.length + '</span>' : ''}
+                    </span>
+                  `).join('')}
+                  ${collapsed ? '<span style="font-size:11px;color:var(--text-muted);padding:3px 8px;">+' + (entities.length - 8) + ' more</span>' : ''}
+                </div>
               </div>
-            `).join('');
-          bindNodeClicks();
-        });
-      }
-    }
-
-    // Bind event handlers
-    bindNodeClicks();
-    bindLegendHovers();
-    bindFilterClicks();
-    bindZoomControls();
-  }
+            `;
+          }).join('')}
+        </div>
+      </div>
+    `;
 
-  function bindNodeClicks() {
-    document.querySelectorAll('[data-node-id]').forEach(el => {
+    // Bind clicks: inspect isolated entity
+    panel.querySelectorAll('[data-iso-entity]').forEach(el => {
       el.addEventListener('click', () => {
-        const node = nodes.find(n => n.id === el.dataset.nodeId);
-        if (node) {
-          selectedNode = node;
-          cam.x = node.x;
-          cam.y = node.y;
-          cam.zoom = Math.max(cam.zoom, 1);
-          showDetail(node);
-          draw();
+        const name = el.dataset.isoEntity;
+        if (entityMap[name]) {
+          selectedNodeId = name;
+          showInspector(name);
         }
       });
     });
   }
 
-  function bindLegendHovers() {
-    document.querySelectorAll('[data-legend-type]').forEach(el => {
-      el.addEventListener('mouseenter', () => {
-        const type = el.dataset.legendType;
-        nodes.forEach(n => { n._dimmed = n.type !== type; });
-        draw();
-      });
-      el.addEventListener('mouseleave', () => {
-        nodes.forEach(n => { n._dimmed = false; });
-        draw();
-      });
-    });
-  }
+  // --- Inspector ---
+  function showInspector(nodeId) {
+    const inspector = document.getElementById('graph-inspector');
+    if (!inspector) return;
+    if (!nodeId || !entityMap[nodeId]) {
+      inspector.innerHTML = '<div class="gi-empty"><div class="gi-empty-icon">\u2B21</div>Select a node to inspect</div>';
+      return;
+    }
+    const entity = entityMap[nodeId];
+    const related = graph.relations.filter(r => r.from === nodeId || r.to === nodeId);
+    const deg = degreeMap[nodeId] || 0;
+    const color = getTypeColor(entity.entityType);
+
+    const obsHtml = entity.observations.length > 0
+      ? entity.observations.map(o => `<div class="gi-obs-item">${escapeHtml(o)}</div>`).join('')
+      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">No observations</div>';
+    const relHtml = related.length > 0
+      ? related.map(r => {
+        const dir = r.from === nodeId;
+        const other = dir ? r.to : r.from;
+        return `<div class="gi-rel-item">
+          <span class="gi-rel-arrow">${dir ? '\u2192' : '\u2190'}</span>
+          <span class="gi-rel-type">${escapeHtml(r.relationType)}</span>
+          <span class="gi-rel-target" data-inspector-nav="${escapeHtml(other)}">${escapeHtml(other)}</span>
+        </div>`;
+      }).join('')
+      : '<div style="font-size:12px;color:var(--text-muted);font-style:italic;">No relations</div>';
 
-  function bindFilterClicks() {
-    document.querySelectorAll('[data-filter-type]').forEach(el => {
+    inspector.innerHTML = `
+      <div class="gi-header">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
+          <span style="width:10px;height:10px;border-radius:50%;background:${color};flex-shrink:0;"></span>
+          <div class="gi-name">${escapeHtml(nodeId)}</div>
+        </div>
+        <div class="gi-type">${escapeHtml(entity.entityType)}</div>
+      </div>
+      <div class="gi-stats">
+        <div class="gi-stat"><div class="gi-stat-value">${deg}</div><div class="gi-stat-label">Connections</div></div>
+        <div class="gi-stat"><div class="gi-stat-value">${entity.observations.length}</div><div class="gi-stat-label">Evidence</div></div>
+      </div>
+      <div class="gi-section">
+        <div class="gi-section-title">Observations <span class="gi-section-count">${entity.observations.length}</span></div>
+        ${obsHtml}
+      </div>
+      <div class="gi-section">
+        <div class="gi-section-title">Relations <span class="gi-section-count">${related.length}</span></div>
+        ${relHtml}
+      </div>
+    `;
+
+    // Navigation: click relation target to focus
+    inspector.querySelectorAll('[data-inspector-nav]').forEach(el => {
       el.addEventListener('click', () => {
-        const type = el.dataset.filterType || null;
-        activeFilterType = type;
-        nodes.forEach(n => { n._dimmed = type ? n.type !== type : false; });
-        draw();
-        renderPanelTab('filter');
+        const targetId = el.dataset.inspectorNav;
+        if (entityMap[targetId]) {
+          selectedNodeId = targetId;
+          // If target is visible in current graph, select it
+          if (cy && cy.$id(targetId).length > 0) {
+            cy.$(':selected').unselect();
+            cy.$id(targetId).select();
+            cy.animate({ center: { eles: cy.$id(targetId) }, duration: 300 });
+          } else {
+            // Switch focus to target
+            focusEntity = targetId;
+            scope = 'neighborhood';
+            rebuildGraph();
+          }
+          showInspector(targetId);
+        }
       });
     });
   }
 
-  function bindZoomControls() {
-    const zi = document.getElementById('gp-zoom-in');
-    const zo = document.getElementById('gp-zoom-out');
-    const zr = document.getElementById('gp-zoom-reset');
-    if (zi) zi.onclick = () => { cam.zoom = Math.min(cam.zoom * 1.3, 4); draw(); };
-    if (zo) zo.onclick = () => { cam.zoom = Math.max(cam.zoom / 1.3, 0.2); draw(); };
-    if (zr) zr.onclick = () => { cam = { x: 0, y: 0, zoom: 1 }; draw(); };
-  }
+  // --- Filter panel ---
+  function renderFilterPanel() {
+    const panel = document.getElementById('graph-filter-panel');
+    if (!panel) return;
 
-  // Tab switching
-  document.querySelectorAll('.gp-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-      document.querySelectorAll('.gp-tab').forEach(t2 => t2.classList.remove('active'));
-      tab.classList.add('active');
-      renderPanelTab(tab.dataset.gptab);
-    });
-  });
+    const searchHtml = `
+      <div class="gfp-section">
+        <div class="gfp-label">Search</div>
+        <input type="text" class="gfp-search" id="gfp-search" placeholder="Find entity..." autocomplete="off" />
+      </div>
+    `;
 
-  renderPanelTab('stats');
+    const scopeHtml = `
+      <div class="gfp-section">
+        <div class="gfp-label">Scope</div>
+        <div class="gfp-radio-group">
+          <button class="gfp-radio${scope === 'connected' ? ' active' : ''}" data-scope="connected">
+            <span class="gfp-radio-dot"></span> Connected
+          </button>
+          <button class="gfp-radio${scope === 'neighborhood' ? ' active' : ''}" data-scope="neighborhood">
+            <span class="gfp-radio-dot"></span> Neighborhood
+          </button>
+          <button class="gfp-radio${scope === 'full' ? ' active' : ''}" data-scope="full">
+            <span class="gfp-radio-dot"></span> Full Graph
+          </button>
+        </div>
+        ${isSparse ? `<div style="font-size:10px;color:var(--accent-amber);margin-top:6px;line-height:1.4;">\u26A0 Sparse graph: ${isolatedCount} of ${graph.entities.length} entities have no relations. Isolated entities shown in inventory below.</div>` : ''}
+      </div>
+    `;
 
-  function showDetail(node) {
-    const drawer = document.getElementById('graph-detail-drawer');
-    if (!drawer) return;
-    if (!node) {
-      drawer.classList.remove('open');
-      return;
-    }
-    const related = edges.filter(e => e.source === node || e.target === node);
-    const obsHtml = node.observations.length > 0
-      ? node.observations.map(o => `<div class="graph-obs-item">${escapeHtml(o)}</div>`).join('')
-      : `<div class="graph-detail-muted">${t('noObservations') || 'No observations'}</div>`;
-    const relHtml = related.length > 0
-      ? related.map(e => {
-        const dir = e.source === node;
-        const other = dir ? e.target : e.source;
-        return `<div class="graph-rel-item"><span class="graph-rel-arrow">${dir ? '\u2192' : '\u2190'}</span> <span class="graph-rel-type">${escapeHtml(e.type)}</span> <strong>${escapeHtml(other.id)}</strong></div>`;
-      }).join('')
-      : `<div class="graph-detail-muted">${t('noRelations') || 'No relations'}</div>`;
-
-    drawer.innerHTML = `
-      <div class="graph-detail-header">
-        <div class="graph-detail-dot" style="background:${node.color};box-shadow:0 0 12px ${hexRGBA(node.color, 0.5)}"></div>
-        <div style="flex:1;">
-          <div class="graph-detail-name">${escapeHtml(node.id)}</div>
-          <div class="graph-detail-type">${escapeHtml(node.type)}</div>
+    const depthHtml = `
+      <div class="gfp-section" id="gfp-depth-section"${scope !== 'neighborhood' ? ' style="display:none"' : ''}>
+        <div class="gfp-label">Depth</div>
+        <div class="gfp-depth-row">
+          <button class="gfp-depth-btn${depth === 1 ? ' active' : ''}" data-depth="1">1</button>
+          <button class="gfp-depth-btn${depth === 2 ? ' active' : ''}" data-depth="2">2</button>
+          <button class="gfp-depth-btn${depth === 3 ? ' active' : ''}" data-depth="3">3</button>
         </div>
-        <button onclick="document.getElementById('graph-detail-drawer').classList.remove('open')" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;padding:4px 8px;">\u2715</button>
       </div>
-      <div style="display:flex;gap:0;">
-        <div class="graph-detail-section" style="flex:1;border-right:1px solid rgba(255,255,255,0.04);">
-          <h3>${t('observations')} <span class="graph-detail-count">${node.observations.length}</span></h3>
-          ${obsHtml}
+    `;
+
+    const viewHtml = `
+      <div class="gfp-section">
+        <div class="gfp-label">View</div>
+        <div class="gfp-radio-group">
+          <button class="gfp-radio${currentView === 'topology' ? ' active' : ''}" data-view="topology">
+            <span class="gfp-radio-dot"></span> Topology
+          </button>
+          <button class="gfp-radio${currentView === 'table' ? ' active' : ''}" data-view="table">
+            <span class="gfp-radio-dot"></span> Table
+          </button>
         </div>
-        <div class="graph-detail-section" style="flex:1;">
-          <h3>${t('relations')} <span class="graph-detail-count">${related.length}</span></h3>
-          ${relHtml}
+      </div>
+    `;
+
+    const layoutHtml = `
+      <div class="gfp-section" id="gfp-layout-section"${currentView === 'table' ? ' style="display:none"' : ''}>
+        <div class="gfp-label">Layout</div>
+        <div class="gfp-radio-group">
+          <button class="gfp-radio${currentLayout === 'dagre-lr' ? ' active' : ''}" data-layout="dagre-lr">
+            <span class="gfp-radio-dot"></span> Left \u2192 Right
+          </button>
+          <button class="gfp-radio${currentLayout === 'dagre-tb' ? ' active' : ''}" data-layout="dagre-tb">
+            <span class="gfp-radio-dot"></span> Top \u2192 Bottom
+          </button>
         </div>
       </div>
     `;
-    drawer.classList.add('open');
-  }
 
-  // --- Animation loop — stops physics when settled, breathing is visual-only ---
-  let animFrame = null;
-  function tick() {
-    if (!isSettled) {
-      simulate();
-    }
-    draw();
-    animFrame = requestAnimationFrame(tick);
-  }
+    const typeEntries = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]);
+    const filterHtml = `
+      <div class="gfp-section">
+        <div class="gfp-label">Entity Type</div>
+        <div class="gfp-radio-group">
+          ${typeEntries.map(([type, count]) => `
+            <button class="gfp-check${activeTypes.has(type) ? ' active' : ''}" data-type-filter="${escapeHtml(type)}">
+              <span class="gfp-check-box">\u2713</span>
+              <span class="gfp-type-dot" style="background:${typeColors[type]}"></span>
+              ${escapeHtml(type)}
+              <span class="gfp-check-count">${count}</span>
+            </button>
+          `).join('')}
+        </div>
+      </div>
+    `;
 
-  function wakeUp() {
-    isSettled = false;
-    settleCountdown = 0;
-    nodes.forEach(n => {
-      n.vx += (Math.random() - 0.5) * 0.5;
-      n.vy += (Math.random() - 0.5) * 0.5;
+    panel.innerHTML = searchHtml + scopeHtml + depthHtml + viewHtml + layoutHtml + filterHtml;
+
+    // Bind scope
+    panel.querySelectorAll('[data-scope]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        scope = btn.dataset.scope;
+        rebuildGraph();
+      });
     });
-  }
 
-  // --- Mouse interaction ---
-  function getMouseWorld(e) {
-    const r = canvas.getBoundingClientRect();
-    return screenToWorld(e.clientX - r.left, e.clientY - r.top);
-  }
+    // Bind depth
+    panel.querySelectorAll('[data-depth]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        depth = parseInt(btn.dataset.depth);
+        rebuildGraph();
+      });
+    });
 
-  canvas.addEventListener('mousemove', (e) => {
-    const r = canvas.getBoundingClientRect();
-    const sx = e.clientX - r.left, sy = e.clientY - r.top;
+    // Bind view
+    panel.querySelectorAll('[data-view]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        currentView = btn.dataset.view;
+        switchView();
+        renderFilterPanel();
+      });
+    });
 
-    // Panning
-    if (panStart) {
-      cam.x -= (e.movementX) / cam.zoom;
-      cam.y -= (e.movementY) / cam.zoom;
-      draw();
-      return;
-    }
+    // Bind layout
+    panel.querySelectorAll('[data-layout]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        currentLayout = btn.dataset.layout;
+        if (cy) {
+          cy.layout(getLayoutConfig()).run();
+        }
+        renderFilterPanel();
+      });
+    });
 
-    // Dragging node
-    if (dragNode) {
-      const w = screenToWorld(sx, sy);
-      dragNode.x = w.x; dragNode.y = w.y;
-      dragNode.vx = 0; dragNode.vy = 0;
-      draw();
-      return;
-    }
+    // Bind type filters
+    panel.querySelectorAll('[data-type-filter]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const type = btn.dataset.typeFilter;
+        if (activeTypes.has(type)) activeTypes.delete(type);
+        else activeTypes.add(type);
+        rebuildGraph();
+      });
+    });
 
-    // Hit test
-    const w = screenToWorld(sx, sy);
-    let found = null;
-    for (const node of nodes) {
-      const dx = w.x - node.x, dy = w.y - node.y;
-      if (dx * dx + dy * dy < (node.radius + 4) * (node.radius + 4)) { found = node; break; }
-    }
-    if (found !== hoveredNode) {
-      hoveredNode = found;
-      canvas.style.cursor = found ? 'pointer' : 'grab';
-      if (found) {
-        const tt = document.getElementById('graph-tooltip');
-        tt.querySelector('.graph-tooltip-name').textContent = found.id;
-        tt.querySelector('.graph-tooltip-type').textContent = `${found.type} · ${found.observations.length} ${t('observation_s')}`;
-        tt.style.left = (sx + 16) + 'px';
-        tt.style.top = (sy - 20) + 'px';
-        tt.classList.add('visible');
-      } else {
-        document.getElementById('graph-tooltip').classList.remove('visible');
-      }
-      draw();
+    // Bind search — focus on entity and navigate
+    const searchInput = document.getElementById('gfp-search');
+    if (searchInput) {
+      searchInput.addEventListener('input', () => {
+        const q = searchInput.value.toLowerCase();
+        if (!q || !cy) {
+          if (cy) cy.elements().removeClass('dimmed');
+          return;
+        }
+        cy.nodes().forEach(n => {
+          const match = n.data('fullLabel').toLowerCase().includes(q) || n.data('type').toLowerCase().includes(q);
+          if (match) { n.removeClass('dimmed'); } else { n.addClass('dimmed'); }
+        });
+        cy.edges().forEach(e => {
+          if (e.source().hasClass('dimmed') && e.target().hasClass('dimmed')) e.addClass('dimmed');
+          else e.removeClass('dimmed');
+        });
+      });
+
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          const q = searchInput.value.toLowerCase();
+          const match = graph.entities.find(ent => ent.name.toLowerCase().includes(q));
+          if (match) {
+            focusEntity = match.name;
+            scope = 'neighborhood';
+            rebuildGraph();
+          }
+        }
+      });
     }
-  });
+  }
 
-  canvas.addEventListener('mousedown', (e) => {
-    if (hoveredNode) {
-      dragNode = hoveredNode;
-      canvas.style.cursor = 'grabbing';
+  function switchView() {
+    const graphContainer = document.getElementById('graph-container');
+    const tableContainer = document.getElementById('graph-table-container');
+    if (currentView === 'table') {
+      graphContainer.style.display = 'none';
+      tableContainer.style.display = 'flex';
+      renderTable();
     } else {
-      panStart = { x: e.clientX, y: e.clientY };
-      canvas.style.cursor = 'grabbing';
+      graphContainer.style.display = '';
+      tableContainer.style.display = 'none';
     }
-  });
-
-  canvas.addEventListener('mouseup', () => {
-    if (dragNode) { dragNode = null; canvas.style.cursor = hoveredNode ? 'pointer' : 'grab'; wakeUp(); }
-    if (panStart) { panStart = null; canvas.style.cursor = hoveredNode ? 'pointer' : 'grab'; }
-  });
+  }
 
-  canvas.addEventListener('click', (e) => {
-    if (hoveredNode) {
-      selectedNode = hoveredNode;
-      showDetail(selectedNode);
-      wakeUp();
+  // --- Table view ---
+  function renderTable() {
+    const tc = document.getElementById('graph-table-container');
+    if (!tc) return;
+    let entities;
+    if (scope === 'full') {
+      entities = graph.entities.filter(e => activeTypes.has(e.entityType) && (degreeMap[e.name] || 0) > 0);
+    } else if (scope === 'neighborhood') {
+      const sub = getNeighborhood(focusEntity, depth);
+      entities = [...sub.nodeNames].filter(n => activeTypes.has(entityMap[n]?.entityType)).map(n => entityMap[n]).filter(Boolean);
     } else {
-      // Click on empty space: deselect and close drawer
-      selectedNode = null;
-      showDetail(null);
-      draw();
+      // connected: only degree > 0
+      entities = graph.entities.filter(e => activeTypes.has(e.entityType) && (degreeMap[e.name] || 0) > 0);
     }
-  });
+    const sorted = entities.sort((a, b) => (degreeMap[b.name] || 0) - (degreeMap[a.name] || 0));
+    tc.innerHTML = `
+      <table class="graph-table">
+        <thead>
+          <tr>
+            <th>Entity</th>
+            <th>Type</th>
+            <th>Connections</th>
+            <th>Observations</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${sorted.map(e => `
+            <tr data-table-node="${escapeHtml(e.name)}">
+              <td class="entity-name"><span class="entity-type-dot" style="background:${getTypeColor(e.entityType)}"></span>${escapeHtml(e.name)}</td>
+              <td>${escapeHtml(e.entityType)}</td>
+              <td>${degreeMap[e.name] || 0}</td>
+              <td>${e.observations.length}</td>
+            </tr>
+          `).join('')}
+        </tbody>
+      </table>
+    `;
+    tc.querySelectorAll('[data-table-node]').forEach(row => {
+      row.addEventListener('click', () => {
+        selectedNodeId = row.dataset.tableNode;
+        showInspector(selectedNodeId);
+      });
+    });
+  }
 
-  canvas.addEventListener('mouseleave', () => {
-    hoveredNode = null; dragNode = null; panStart = null;
-    document.getElementById('graph-tooltip').classList.remove('visible');
-    draw();
-  });
+  // --- Status bar ---
+  function updateStatusBar(nodeCount, edgeCount) {
+    const gsNodes = document.getElementById('gs-nodes');
+    const gsEdges = document.getElementById('gs-edges');
+    const gsLayout = document.getElementById('gs-layout');
+    const gsScope = document.getElementById('gs-scope');
+    if (gsNodes) gsNodes.textContent = `${nodeCount || 0} nodes`;
+    if (gsEdges) gsEdges.textContent = `${edgeCount || 0} edges`;
+    if (gsLayout) gsLayout.textContent = currentLayout === 'dagre-tb' ? 'TB' : 'LR';
+    if (gsScope) gsScope.textContent = scope === 'full' ? 'full' : scope === 'neighborhood' ? `${depth}-hop` : 'connected';
+    if (isolatedCount > 0 && scope !== 'neighborhood') {
+      if (gsScope) gsScope.textContent += ` · ${isolatedCount} isolated below`;
+    }
+  }
 
-  // Zoom with mouse wheel
-  canvas.addEventListener('wheel', (e) => {
-    e.preventDefault();
-    const factor = e.deltaY > 0 ? 0.9 : 1.1;
-    const newZoom = Math.max(0.15, Math.min(cam.zoom * factor, 5));
-    // Zoom toward mouse position
-    const r = canvas.getBoundingClientRect();
-    const mx = e.clientX - r.left, my = e.clientY - r.top;
-    const wx = (mx - W / 2) / cam.zoom + cam.x;
-    const wy = (my - H / 2) / cam.zoom + cam.y;
-    cam.zoom = newZoom;
-    cam.x = wx - (mx - W / 2) / cam.zoom;
-    cam.y = wy - (my - H / 2) / cam.zoom;
-    draw();
-  }, { passive: false });
-
-  // Start with a slight zoom-out for large graphs
-  if (nodes.length > 60) cam.zoom = 0.55;
-  else if (nodes.length > 30) cam.zoom = 0.7;
-
-  canvas.style.cursor = 'grab';
-  tick();
-  // Continuous loop — no timeout needed
+  // --- Zoom controls ---
+  const gzIn = document.getElementById('gz-in');
+  const gzOut = document.getElementById('gz-out');
+  const gzFit = document.getElementById('gz-fit');
+  if (gzIn) gzIn.onclick = () => { if (cy) cy.zoom(cy.zoom() * 1.3); };
+  if (gzOut) gzOut.onclick = () => { if (cy) cy.zoom(cy.zoom() / 1.3); };
+  if (gzFit) gzFit.onclick = () => { if (cy) cy.fit(undefined, 30); };
+
+  // --- Initialize ---
+  _graphState = { graph, entityMap, degreeMap, typeColors, showInspector };
+  initCytoscape();
+  renderFilterPanel();
+  renderIsolatedPanel();
 }
 
 // ============================================================
@@ -2461,13 +2542,15 @@ function teamLockTTL(expiresAt) {
   return min + 'm left';
 }
 
+let teamScope = 'project'; // 'project' | 'global'
+
 async function loadTeam() {
   const container = document.getElementById('page-team');
   if (!container.innerHTML || container.innerHTML.includes('spinner')) {
     container.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
   }
 
-  const data = await api('team');
+  const data = await api('team?scope=' + teamScope);
   if (!data || data.unavailable) {
     container.innerHTML = `
       <div class="page-header">
@@ -2502,6 +2585,11 @@ async function loadTeam() {
   const tasksByStatus = { pending: 0, in_progress: 0, completed: 0, failed: 0 };
   data.tasks.forEach(tk => { tasksByStatus[tk.status] = (tasksByStatus[tk.status] || 0) + 1; });
 
+  const scopeLabel = teamScope === 'global' ? 'Global Team' : 'Project Team';
+  const scopeDesc = teamScope === 'global'
+    ? 'All agents across projects (runtime + persisted)'
+    : 'Agents active in current control-plane session';
+
   let html = `
     <div class="team-header">
       <div class="team-header-left">
@@ -2509,11 +2597,15 @@ async function loadTeam() {
           <span class="iconify" data-icon="lucide:users"></span>
         </div>
         <div>
-          <h1 class="page-title">${t('teamTitle')}</h1>
-          <p class="page-subtitle">${t('teamSubtitle')}${data.sessions != null ? ' &middot; ' + data.sessions + ' session(s)' : ''}</p>
+          <h1 class="page-title">${scopeLabel}</h1>
+          <p class="page-subtitle">${scopeDesc}${data.sessions != null ? ' &middot; ' + data.sessions + ' session(s)' : ''}</p>
         </div>
       </div>
       <div class="team-header-right">
+        <div style="display:flex;gap:2px;margin-right:12px;">
+          <button class="filter-btn${teamScope === 'project' ? ' active' : ''}" onclick="teamScope='project';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">Project</button>
+          <button class="filter-btn${teamScope === 'global' ? ' active' : ''}" onclick="teamScope='global';delete loaded['team'];loadTeam();" style="padding:6px 14px;font-size:12px;">Global</button>
+        </div>
         <span class="team-refresh-time" id="team-refresh-indicator"></span>
         <button class="team-refresh-btn" onclick="loadTeam()">
           <span class="iconify" data-icon="lucide:refresh-cw" style="font-size:14px;"></span>
@@ -2555,12 +2647,12 @@ async function loadTeam() {
         </div>
         <div class="panel-body team-scrollable">
           ${data.agents.length === 0
-            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:user-x"></span></span><span class="team-empty-text">No agents registered</span></div>'
+            ? '<div class="team-empty"><span class="team-empty-icon"><span class="iconify" data-icon="lucide:user-x"></span></span><span class="team-empty-text">No agents in ' + (teamScope === 'project' ? 'this session' : 'any scope') + '</span>' + (teamScope === 'project' && data._meta && data._meta.persistedAgents > 0 ? '<div style="font-size:11px;color:var(--accent-amber);margin-top:6px;">' + data._meta.persistedAgents + ' persisted agent(s) available in <a href="#" onclick="teamScope=\'global\';delete loaded[\'team\'];loadTeam();return false;" style="color:var(--accent-purple);text-decoration:underline;">Global view</a></div>' : '') + '</div>'
             : data.agents.map(a => `
               <div class="team-agent-row${a.status !== 'active' ? ' inactive' : ''}">
                 <div class="team-agent-status ${a.status === 'active' ? 'active' : 'offline'}"></div>
                 <div class="team-agent-info">
-                  <div class="team-agent-name">${escapeHtml(a.name)}</div>
+                  <div class="team-agent-name">${escapeHtml(a.name)} <span style="font-size:9px;padding:1px 5px;border-radius:4px;font-weight:500;margin-left:4px;${a.source === 'persisted' ? 'background:rgba(255,171,64,0.12);color:var(--accent-amber);' : 'background:rgba(105,240,174,0.12);color:var(--accent-green);'}">${a.source === 'persisted' ? 'file' : 'live'}</span></div>
                   <div class="team-agent-meta">
                     <span>${a.role ? escapeHtml(a.role) : 'no role'}</span>
                     ${a.capabilities && a.capabilities.length ? a.capabilities.map(c => '<span class="team-cap-tag">' + escapeHtml(c) + '</span>').join('') : ''}