project-graph-mcp 2.3.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-graph-mcp",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "type": "module",
   "description": "MCP server for AI agents — project graph, code quality analysis, visual web explorer. JS, TS, Python, Go.",
   "main": "src/network/server.js",
@@ -10,7 +10,6 @@
   "publishConfig": {
     "access": "public"
   },
-
   "scripts": {
     "start": "node src/network/server.js",
     "test": "node --test tests/*.test.js"
@@ -40,7 +39,6 @@
   "license": "MIT",
   "dependencies": {
     "@symbiotejs/symbiote": "^3.2.1",
-    "symbiote-node": "file:vendor/symbiote-node",
     "ws": "^8.20.0"
   },
   "engines": {

package/src/network/web-server.js

@@ -1,6 +1,6 @@
 // @ctx .context/src/network/web-server.ctx
 import e from"node:http";import t from"node:fs";import o from"node:path";import n from"node:crypto";import{fileURLToPath as a}from"node:url";import{createRequire as _createRequire}from"node:module";import{WebSocketServer as s}from"ws";import{createServer as i}from"../mcp/mcp-server.js";import c from"../core/event-bus.js";import{registerService as r}from"./local-gateway.js";import{compressFile as _cf}from"../compact/compress.js";import{expandFile as _ef}from"../compact/expand.js";import{setRoots as _setRoots}from"../core/workspace.js";
-const d=o.dirname(a(import.meta.url)),p=o.join(d,"..","..");const _rq=_createRequire(import.meta.url);let _pkgVersion="0.0.0";try{_pkgVersion=JSON.parse(t.readFileSync(o.join(p,"package.json"),"utf8")).version}catch{}function _rv(k){try{const r=_rq.resolve(k);const marker=o.sep+"node_modules"+o.sep+k.replace(/\//g,o.sep);const idx=r.lastIndexOf(marker);if(idx>=0)return r.substring(0,idx+marker.length);return o.dirname(r)}catch{return o.join(p,"node_modules",...k.split("/"))}}const m=o.join(p,"web"),h={"symbiote-node":_rv("symbiote-node"),symbiote:_rv("@symbiotejs/symbiote")},f={".html":"text/html",".js":"text/javascript",".mjs":"text/javascript",".css":"text/css",".json":"application/json",".svg":"image/svg+xml",".png":"image/png",".ico":"image/x-icon",".woff2":"font/woff2"};
+const d=o.dirname(a(import.meta.url)),p=o.join(d,"..","..");const _rq=_createRequire(import.meta.url);let _pkgVersion="0.0.0";try{_pkgVersion=JSON.parse(t.readFileSync(o.join(p,"package.json"),"utf8")).version}catch{}function _rv(k){try{const r=_rq.resolve(k);const marker=o.sep+"node_modules"+o.sep+k.replace(/\//g,o.sep);const idx=r.lastIndexOf(marker);if(idx>=0)return r.substring(0,idx+marker.length);return o.dirname(r)}catch{return o.join(p,"node_modules",...k.split("/"))}}const m=o.join(p,"web"),_symNodeVendor=o.join(p,"vendor","symbiote-node"),h={"symbiote-node":t.existsSync(_symNodeVendor)?_symNodeVendor:_rv("symbiote-node"),symbiote:_rv("@symbiotejs/symbiote")},f={".html":"text/html",".js":"text/javascript",".mjs":"text/javascript",".css":"text/css",".json":"application/json",".svg":"image/svg+xml",".png":"image/png",".ico":"image/x-icon",".woff2":"font/woff2"};
 function g(e,n){const a=o.normalize(e).replace(/^(\.\.[/\\])+/,""),s=a.match(/^[/\\]?vendor[/\\]([^/\\]+)[/\\]?(.*)/);let i,c;if(s&&h[s[1]]?(c=h[s[1]],i=o.join(c,s[2]||"index.js")):(c=m,i=o.join(m,"/"===a?"index.html":a)),!i.startsWith(c))return n.writeHead(403),void n.end("Forbidden");if(t.existsSync(i)&&t.statSync(i).isDirectory()&&(i=o.join(i,"index.html")),!t.existsSync(i))return n.writeHead(404),void n.end("Not Found");const r=o.extname(i),l=f[r]||"application/octet-stream",d=t.readFileSync(i);n.writeHead(200,{"Content-Type":l,"Cache-Control":"no-cache, no-store, must-revalidate"}),n.end(d)}
 function u(e){return n.createHash("sha1").update(e+"258EAFA5-E914-47DA-95CA-5AB5ADF35C70").digest("base64")}
 function y(e){const t=Buffer.from(e,"utf8"),o=t.length;let n;return o<126?(n=Buffer.alloc(2),n[0]=129,n[1]=o):o<65536?(n=Buffer.alloc(4),n[0]=129,n[1]=126,n.writeUInt16BE(o,2)):(n=Buffer.alloc(10),n[0]=129,n[1]=127,n.writeBigUInt64BE(BigInt(o),2)),Buffer.concat([n,t])}

package/vendor/symbiote-node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "symbiote-node",
-  "version": "0.3.0-alpha.0",
+  "version": "0.3.0-alpha.1",
   "type": "module",
   "description": "Visual Node Graph Editor + Execution Engine — extensible, themeable graph editor and runtime built on Symbiote.js",
   "main": "index.js",
@@ -56,4 +56,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
+}

package/web/app.js

@@ -1,5 +1,7 @@
 // @ctx .context/web/app.ctx
 import{Layout as e,LayoutTree as t,applyTheme as n,CARBON as o}from"symbiote-node";
+import{followController}from"./follow-controller.js";
+import"./components/follow-ribbon.js";
 import{state as a,subscribe as s,onEvent as i,call as r,connect as c}from"./state.js";
 import"./panels/file-tree.js";
 import"./panels/code-viewer.js";
@@ -16,9 +18,10 @@ export const baseUrl=new URL(".",import.meta.url).href;const l=baseUrl;
 export async function api(e,t={}){if(a.connected&&e.startsWith("/api/")){const n=await async function(e,t){const n={"/api/skeleton":{name:"get_skeleton",args:e=>({path:e.path})},"/api/file":{name:"compact",args:e=>({action:"compact_file",path:e.path,beautify:!0})},"/api/analysis":{name:"analyze",args:e=>({action:"full_analysis",path:e.path})},"/api/analysis-summary":{name:"analyze",args:e=>({action:"analysis_summary",path:e.path})},"/api/deps":{name:"navigate",args:e=>({action:"deps",symbol:e.symbol})},"/api/usages":{name:"navigate",args:e=>({action:"usages",symbol:e.symbol})},"/api/expand":{name:"navigate",args:e=>({action:"expand",symbol:e.symbol})},"/api/chain":{name:"navigate",args:e=>({action:"call_chain",from:e.from,to:e.to})}}[e];return n?r(n.name,n.args(t)):null}(e,t);if(null!==n)return n}const n=new URLSearchParams(t).toString(),o=e.replace(/^\//, ""),s=n?`${l}${o}?${n}`:`${l}${o}`,i=await fetch(s);if(!i.ok)throw new Error(`API error: ${i.status}`);return i.json()}
 export const events=new EventTarget;
 export function emit(e,t={}){events.dispatchEvent(new CustomEvent(e,{detail:t}))}
-const p={"file-tree":{title:"Files",icon:"folder",component:"pg-file-tree"},"code-viewer":{title:"Code",icon:"code",component:"pg-code-viewer"},"ctx-panel":{title:"Documentation",icon:"description",component:"pg-ctx-panel"},"dep-graph":{title:"Dependencies",icon:"account_tree",component:"pg-dep-graph"},health:{title:"Health",icon:"analytics",component:"pg-health-panel"},monitor:{title:"Live Monitor",icon:"monitor_heart",component:"pg-live-monitor"},settings:{title:"Settings",icon:"settings",component:"pg-settings-panel"}},m=[{id:"explorer",icon:"folder_open",label:"Explorer"},{id:"graph",icon:"developer_board",label:"Graph"},{id:"analysis",icon:"analytics",label:"Analysis"},{id:"monitor",icon:"monitor_heart",label:"Monitor"},{id:"settings",icon:"settings",label:"Settings"}],d={explorer:()=>t.createSplit("horizontal",t.createPanel("file-tree"),t.createSplit("horizontal",t.createPanel("code-viewer"),t.createPanel("ctx-panel"),.65),.2),graph:()=>t.createSplit("horizontal",t.createPanel("file-tree"),t.createPanel("dep-graph"),.18),analysis:()=>t.createPanel("health"),monitor:()=>t.createPanel("monitor"),settings:()=>t.createPanel("settings")};
+const p={"file-tree":{title:"Files",icon:"folder",component:"pg-file-tree"},"code-viewer":{title:"Code",icon:"code",component:"pg-code-viewer"},"ctx-panel":{title:"Documentation",icon:"description",component:"pg-ctx-panel"},"dep-graph":{title:"Dependencies",icon:"account_tree",component:"pg-dep-graph"},health:{title:"Health",icon:"analytics",component:"pg-health-panel"},monitor:{title:"Live Monitor",icon:"monitor_heart",component:"pg-live-monitor"},settings:{title:"Settings",icon:"settings",component:"pg-settings-panel"}},m=[{id:"explorer",icon:"folder_open",label:"Explorer"},{id:"graph",icon:"developer_board",label:"Graph"},{id:"follow",icon:"smart_toy",label:"Follow"},{id:"analysis",icon:"analytics",label:"Analysis"},{id:"monitor",icon:"monitor_heart",label:"Monitor"},{id:"settings",icon:"settings",label:"Settings"}],d={explorer:()=>t.createSplit("horizontal",t.createPanel("file-tree"),t.createSplit("horizontal",t.createPanel("code-viewer"),t.createPanel("ctx-panel"),.65),.2),graph:()=>t.createSplit("horizontal",t.createPanel("file-tree"),t.createPanel("dep-graph"),.18),follow:()=>t.createSplit("horizontal",t.createPanel("file-tree"),t.createSplit("vertical",t.createSplit("horizontal",t.createPanel("dep-graph"),t.createPanel("code-viewer"),.65),t.createPanel("monitor"),.72),.12),analysis:()=>t.createPanel("health"),monitor:()=>t.createPanel("monitor"),settings:()=>t.createPanel("settings")};
 async function u(){(function(){n(document.documentElement,o);const e=document.querySelector(".app-workspace"),t=document.createElement("layout-sidebar");e.prepend(t);const a=e.querySelector(".app-content"),s=document.createElement("panel-layout");s.setAttribute("storage-key","pg-explorer-layout"),s.setAttribute("min-panel-size","150"),s.id="main-layout",a.appendChild(s),requestAnimationFrame(()=>{for(const[e,t]of Object.entries(p))s.registerPanelType(e,t);let lastSection="";function e(){const e=location.hash.replace("#","")||"explorer",t=e.indexOf("?"),n=t>=0?e.substring(0,t):e,o=n.indexOf("/"),a=o>=0?n.substring(0,o):n,i=o>=0?n.substring(o+1):"";if(d[a]&&a!==lastSection){lastSection=a;s.setLayout(d[a]())}"explorer"===a&&i&&requestAnimationFrame(()=>{state.activeFile=i,emit("file-selected",{path:i,fromRoute:!0})})}t.setSections(m),window.addEventListener("hashchange",e),events.addEventListener("file-selected",e=>{if(e.detail.fromRoute)return;if(e.detail.source==="canvas")return;const t=e.detail.path;const _sec=(location.hash.replace("#","").split("?")[0].split("/")[0])||"explorer";if(t&&_sec==="explorer")history.replaceState(null,"",`#explorer/${t}`)}),localStorage.getItem("pg-explorer-layout")||s.setLayout(d.explorer()),location.hash&&"#"!==location.hash?e():location.hash="explorer"})})(),s("project",e=>{e&&(document.title=`${e.name} — Project Graph`,document.getElementById("project-name").textContent=e.name,document.documentElement.style.setProperty("--project-accent",e.color),g(e.agents))}),events.addEventListener("skeleton-loaded",e=>{const t=e.detail;if(!t)return;state.skeleton=t;const n=new Set;for(const e of Object.values(t.n||{}))e.f&&n.add(e.f);for(const e of Object.keys(t.X||{}))n.add(e);for(const[e,o]of Object.entries(t.f||{}))for(const t of o)n.add("./"===e?t:`${e}${t}`);for(const[e,o]of Object.entries(t.a||{}))for(const t of o)n.add("./"===e?t:`${e}${t}`);const o=document.getElementById("project-files");o&&(o.textContent=`${n.size} files`)}),s("skeleton",e=>{if(!e)return;state.skeleton=e;emit("skeleton-loaded",e)}),s("connected",e=>{const t=document.getElementById("status-indicator");t&&(t.className=e?"status connected":"status disconnected")}),i(e=>{if("agent_connect"===e.type||"agent_disconnect"===e.type)return g(e.agents),void emit("agent-event",e);state.monitorEvents.push(e),state.monitorEvents.length>500&&state.monitorEvents.shift(),emit("tool-event",e)}),c()}
 function g(e){let t=document.getElementById("agent-badge");if(!t){const e=document.querySelector(".app-topbar");if(!e)return;t=document.createElement("span"),t.id="agent-badge",t.className="agent-badge",e.appendChild(t)}t.textContent=e>0?`● ${e} agent${1!==e?"s":""}`:"",t.style.display=e>0?"":"none"}
 function f(){document.querySelector("pg-quick-open")||document.body.appendChild(document.createElement("pg-quick-open"))}
-function h(){const btn=document.getElementById("follow-btn");if(!btn)return;let active=false;btn.addEventListener("click",()=>{active=!active;if(active){btn.setAttribute("data-active","");btn.classList.add("active")}else{btn.removeAttribute("data-active");btn.classList.remove("active")}events.dispatchEvent(new CustomEvent("follow-mode-changed",{detail:{enabled:active}}))})}
-"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{u(),f(),h()}):(u(),f(),h());
+function h(){const btn=document.getElementById("follow-btn");if(!btn)return;let active=false;btn.addEventListener("click",()=>{active=!active;if(active){btn.setAttribute("data-active","");btn.classList.add("active");followController.enable();location.hash="follow"}else{btn.removeAttribute("data-active");btn.classList.remove("active");const prev=followController.getPreviousHash();followController.disable();if(prev&&prev!=="#follow")location.hash=prev.replace(/^#/,"")}events.dispatchEvent(new CustomEvent("follow-mode-changed",{detail:{enabled:active}}))});events.addEventListener("follow-state-changed",e=>{const en=e.detail?.enabled;if(en&&!active){active=true;btn.setAttribute("data-active","");btn.classList.add("active")}else if(!en&&active){active=false;btn.removeAttribute("data-active");btn.classList.remove("active")}});window.addEventListener("hashchange",()=>{const sec=(location.hash.replace("#","").split("?")[0].split("/")[0])||"explorer";if(sec==="follow"&&!active){active=true;btn.setAttribute("data-active","");btn.classList.add("active");followController.enable()}else if(sec!=="follow"&&active){active=false;btn.removeAttribute("data-active");btn.classList.remove("active");followController.disable()}})}
+function _initRibbon(){if(!document.querySelector("follow-ribbon"))document.body.appendChild(document.createElement("follow-ribbon"))}
+"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{u(),f(),followController.init(events,emit),h(),_initRibbon()}):(u(),f(),followController.init(events,emit),h(),_initRibbon());

package/web/components/canvas-graph.js

@@ -16,12 +16,18 @@ const HIT_RADIUS = 14;
 function getNodeRadius(node, conns, opts = {}) {
   const hubScale = 1 + Math.min(conns, 8) * 0.1;
   const aScale = opts.scale ?? (node.aScale || 1);
-  let r = DOT_RADIUS * hubScale * aScale;
+  let baseR = DOT_RADIUS * hubScale * aScale;
   if (node.isGroup) {
-    const childCount = node.children?.length || 1;
-    r *= 1.0 + Math.sqrt(Math.max(1, Math.min(childCount, 25))) * 0.5;
+    const childCount = Math.max(2, Math.min(12, node.children?.length || 3));
+    const innerR = baseR * Math.max(0.1, 0.18 - (childCount - 3) * 0.008);
+    const spacing = innerR * 2.5;
+    const orbitR = spacing / (2 * Math.sin(Math.PI / childCount));
+    // r = orbitR + innerR + ringW + padding
+    // ringW = r * 0.12
+    // r = (orbitR + innerR + 2) / 0.88
+    return (orbitR + innerR + 2) / 0.88;
   }
-  return r;
+  return baseR;
 }
 
 const NODE_TYPES = ['data', 'action', 'output', 'config', 'external', 'style', 'docs', 'asset'];
@@ -280,6 +286,17 @@ export class CanvasGraph extends Symbiote {
     this._wakeLoop();
   }
 
+  pulseNode(nodeId, durationMs = 1500) {
+    this._pulses = this._pulses || [];
+    this._pulses.push({
+      id: nodeId,
+      startTime: performance.now(),
+      duration: durationMs
+    });
+    this.needsDraw = true;
+    this._wakeLoop();
+  }
+
   flyToNode(nodeId, options = {}) {
     const node = this.graphDB?.nodes.get(nodeId);
     if (node && node.parentId) {
@@ -617,8 +634,8 @@ export class CanvasGraph extends Symbiote {
       nodeWidth: this.renderMode === 'dots' ? DOT_RADIUS * 2 : 160,
       nodeHeight: this.renderMode === 'dots' ? DOT_RADIUS * 2 : 40,
       mode: 'continuous',
-      activeGroupId: groupId,
-      boundaryRadius: groupId ? this.graphDB.nodes.get(groupId).w / 2 : null,
+      activeGroupId: this.currentGroupId,
+      boundaryRadius: this.currentGroupId ? this.graphDB.nodes.get(this.currentGroupId).w / 2 : null,
       attractors: null,
     };
     
@@ -1063,15 +1080,13 @@ export class CanvasGraph extends Symbiote {
             currentCtx.fillStyle = this.blendBg(tc[0], tc[1], tc[2], layerOpacity);
             currentCtx.fill();
             
+            let baseR = DOT_RADIUS * hubScale * (node.aScale || 1);
             const childCount = Math.max(2, Math.min(12, node.children?.length || 3));
-            const innerR = r * Math.max(0.1, 0.18 - (childCount - 3) * 0.008);
+            const innerR = baseR * Math.max(0.1, 0.18 - (childCount - 3) * 0.008);
             
             // Calculate perfect orbit radius to maintain consistent spacing between dots
             const spacing = innerR * 2.5; // Gap between dots
-            const idealOrbitR = spacing / (2 * Math.sin(Math.PI / childCount));
-            // Ensure they never spill out of the golden ring
-            const maxOrbitR = Math.max(0, r - ringW - innerR - 2);
-            const orbitR = Math.min(idealOrbitR, maxOrbitR);
+            const orbitR = spacing / (2 * Math.sin(Math.PI / childCount));
             const isHovered = this.hoverNode && this.hoverNode.id === node.id;
             node.aRotSpeed = node.aRotSpeed || 0;
             const targetRotSpeed = (isActive || isHovered) ? 0.025 : 0;
@@ -1130,6 +1145,29 @@ export class CanvasGraph extends Symbiote {
         mainCtx.setTransform(dpr * this.zoom, 0, 0, dpr * this.zoom, dpr * this.panX, dpr * this.panY);
       }
       drawDepth(0, mainCtx);
+      
+      if (this._pulses && this._pulses.length > 0) {
+        const now = performance.now();
+        this._pulses = this._pulses.filter(p => {
+          const elapsed = now - p.startTime;
+          if (elapsed > p.duration) return false;
+          const pos = this.getSmooth(p.id) || this.nodePositions.get(p.id);
+          if (!pos) return false;
+          const progress = elapsed / p.duration;
+          const pulsePhase = (progress * 3) % 1;
+          const r = 20 + (pulsePhase * 80);
+          const opacity = 1 - pulsePhase;
+          mainCtx.beginPath();
+          mainCtx.arc(pos.x, pos.y, r, 0, Math.PI * 2);
+          mainCtx.fillStyle = `rgba(76, 139, 245, ${opacity * 0.4})`;
+          mainCtx.fill();
+          mainCtx.lineWidth = 2;
+          mainCtx.strokeStyle = `rgba(76, 139, 245, ${opacity * 0.8})`;
+          mainCtx.stroke();
+          this.needsDraw = true;
+          return true;
+        });
+      }
     }
 
     const showMenu = this.activeNode && !this.dragNode && !this.deactivating;
@@ -1557,6 +1595,7 @@ export class CanvasGraph extends Symbiote {
     });
 
     this.canvas.addEventListener('pointerup', (e) => {
+      const draggedNode = this.dragNode;
       if (this.dragNode) {
         this.worker.postMessage({ type: 'unpin', id: this.dragNode.id });
         this.dragNode = null;

package/web/components/code-block.js

@@ -29,6 +29,6 @@ this.$.highlighted=hl;
 const e=o.split("\n").length,t=[];for(let o=1;o<=e;o++)t.push(o);this.$.lineNums=t.join("\n");
 }
 }),this.sub("isMarkdown",v=>{this.toggleAttribute("mode-markdown",v)}),this.sub("isImage",v=>{this.toggleAttribute("mode-image",v)})
-}setBasePath(p){this._basePath=p}}
+}setBasePath(p){this._basePath=p}scrollToLine(line){const pre=this.querySelector('.cb-pre');const scroll=this.querySelector('.cb-scroll');if(!pre||!scroll)return;const lineHeight=parseFloat(window.getComputedStyle(pre).lineHeight)||19.2;scroll.scrollTo({top:Math.max(0,(line-1)*lineHeight-scroll.clientHeight/2+lineHeight/2),behavior:'smooth'})}}
 CodeBlock.template='\n  <div class="cb-scroll">\n    <pre class="cb-gutter" bind="textContent: lineNums"></pre>\n    <pre class="cb-pre"><code bind="innerHTML: highlighted"></code></pre>\n    <div class="cb-md" bind="innerHTML: highlighted"></div>\n    <div class="cb-img-wrap"><img class="cb-img" bind="src: imageSrc"></div>\n  </div>\n';
 CodeBlock.rootStyles="\n  code-block {\n    display: block;\n    height: 100%;\n    overflow: hidden;\n  }\n  code-block .cb-scroll {\n    display: flex;\n    height: 100%;\n    overflow: auto;\n    align-items: stretch;\n  }\n  code-block .cb-gutter {\n    position: sticky;\n    left: 0;\n    z-index: 1;\n    margin: 0;\n    padding: 12px 8px 12px 12px;\n    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n    font-size: 12px;\n    line-height: 1.6;\n    text-align: right;\n    color: var(--sn-text-dim, hsl(30, 10%, 55%));\n    opacity: 0.45;\n    background: var(--sn-bg, hsl(37, 30%, 96%));\n    border-right: 1px solid var(--sn-node-border, hsl(35, 18%, 88%));\n    user-select: none;\n    white-space: pre;\n    min-width: 32px;\n    flex-shrink: 0;\n  }\n  code-block .cb-pre {\n    margin: 0;\n    padding: 12px;\n    flex: 1;\n    min-width: 0;\n    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n    font-size: 12px;\n    line-height: 1.6;\n    color: var(--sn-text, hsl(30, 15%, 18%));\n    tab-size: 2;\n    white-space: pre;\n    box-sizing: border-box;\n  }\n  /* Markdown container — hidden by default */\n  code-block .cb-md {\n    display: none;\n    padding: 20px 28px;\n    flex: 1;\n    min-width: 0;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    line-height: 1.7;\n    color: var(--sn-text, hsl(30, 15%, 18%));\n    font-family: var(--sn-font, 'Inter', -apple-system, sans-serif);\n    font-size: 14px;\n  }\n  /* Image container — hidden by default */\n  code-block .cb-img-wrap {\n    display: none;\n    flex: 1;\n    padding: 20px;\n    justify-content: center;\n    align-items: center;\n    background: repeating-conic-gradient(hsl(30, 10%, 88%) 0% 25%, hsl(30, 10%, 94%) 0% 50%) 0 0 / 16px 16px;\n  }\n  code-block .cb-img {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: 4px;\n    box-shadow: 0 2px 12px rgba(0,0,0,0.12);\n  }\n  /* In markdown mode: hide code, show md */\n  code-block[mode-markdown] .cb-gutter { display: none; }\n  code-block[mode-markdown] .cb-pre { display: none; }\n  code-block[mode-markdown] .cb-md { display: block; }\n  /* In image mode: hide code, show image */\n  code-block[mode-image] .cb-gutter { display: none; }\n  code-block[mode-image] .cb-pre { display: none; }\n  code-block[mode-image] .cb-img-wrap { display: flex; }\n\n  /* Markdown styles */\n  code-block .md-h { margin: 20px 0 8px; color: var(--sn-text, #222); font-weight: 700; }\n  code-block h1.md-h { font-size: 24px; border-bottom: 2px solid var(--sn-node-border, #ddd); padding-bottom: 8px; }\n  code-block h2.md-h { font-size: 20px; border-bottom: 1px solid var(--sn-node-border, #ddd); padding-bottom: 6px; }\n  code-block h3.md-h { font-size: 16px; }\n  code-block h4.md-h { font-size: 14px; }\n  code-block .md-p { margin: 8px 0; }\n  code-block .md-quote {\n    margin: 8px 0;\n    padding: 8px 16px;\n    border-left: 4px solid var(--sn-cat-server, hsl(210, 45%, 55%));\n    background: hsla(210, 40%, 55%, 0.08);\n    border-radius: 0 4px 4px 0;\n    font-style: italic;\n  }\n  code-block .md-list {\n    margin: 8px 0;\n    padding-left: 24px;\n  }\n  code-block .md-list li {\n    margin: 3px 0;\n  }\n  code-block .md-code-block {\n    margin: 12px 0;\n    padding: 12px 16px;\n    background: var(--sn-bg, hsl(37, 30%, 94%));\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 85%));\n    border-radius: 6px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 12px;\n    line-height: 1.6;\n    overflow-x: auto;\n    white-space: pre;\n  }\n  code-block .md-inline-code {\n    padding: 1px 5px;\n    background: hsla(30, 20%, 50%, 0.12);\n    border-radius: 3px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 0.9em;\n  }\n  code-block .md-link {\n    color: var(--sn-cat-server, hsl(210, 55%, 50%));\n    text-decoration: underline;\n    text-decoration-style: dotted;\n  }\n  code-block .md-link:hover { text-decoration-style: solid; }\n  code-block .md-img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 6px;\n    margin: 8px 0;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 85%));\n    box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n  }\n  code-block .md-hr {\n    border: none;\n    border-top: 1px solid var(--sn-node-border, hsl(35, 18%, 85%));\n    margin: 16px 0;\n  }\n  code-block .md-table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 12px 0;\n    font-size: 13px;\n  }\n  code-block .md-table th,\n  code-block .md-table td {\n    padding: 6px 12px;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 85%));\n    text-align: left;\n  }\n  code-block .md-table th {\n    background: hsla(30, 15%, 50%, 0.08);\n    font-weight: 600;\n  }\n  code-block .md-table tr:hover td {\n    background: hsla(30, 15%, 50%, 0.04);\n  }\n  /* Token colors */\n  code-block .t-kw   { color: rgb(254, 165, 176); }\n  code-block .t-str  { color: rgb(251, 182, 79); }\n  code-block .t-cm   { color: rgb(149, 149, 149); font-style: italic; }\n  code-block .t-fn   { color: rgb(180, 243, 255); }\n  code-block .t-num  { color: rgb(251, 182, 79); }\n  code-block .t-bi   { color: rgb(180, 243, 255); }\n  code-block .t-prop { color: rgb(238, 131, 252); }\n  code-block .t-lit  { color: rgb(254, 165, 176); }\n  /* JSDoc */\n  code-block .t-jd   { color: rgb(130, 155, 130); font-style: italic; }\n  code-block .t-jd-tag  { color: rgb(180, 220, 140); font-style: normal; font-weight: 500; }\n  code-block .t-jd-type { color: rgb(130, 210, 240); font-style: normal; }\n",CodeBlock.reg("code-block");

package/web/components/event-feed/MiniGraphWidget.js

@@ -20,36 +20,126 @@ export class MiniGraphWidget extends Symbiote {
   }
 
   _renderSVG(data) {
-    // Basic SVG renderer for mini graphs to avoid WebGL context explosion
-    // Extracts nodes and links if present in the data
     const nodes = data.nodes || (data.n ? Object.keys(data.n).map(id => ({ id, ...data.n[id] })) : []);
-    const links = data.links || [];
+    const rawLinks = data.links || data.e || [];
+    
+    // Some formats use {from, to}, some use {source, target}
+    const links = rawLinks.map(l => ({
+      from: l.from || l.source,
+      to: l.to || l.target
+    }));
 
     if (!nodes.length) {
       this.$.svgContent = '<text x="10" y="20" fill="var(--sn-text-dim)">No graph data</text>';
       return;
     }
 
-    // Simple circle layout for demonstration
     const width = 300;
     const height = 150;
-    const cx = width / 2;
-    const cy = height / 2;
-    const radius = 50;
+    
+    // Initial deterministic positions (circle)
+    nodes.forEach((n, i) => {
+      const angle = (i / nodes.length) * Math.PI * 2;
+      n.x = width / 2 + Math.cos(angle) * (Math.min(width, height) / 4);
+      n.y = height / 2 + Math.sin(angle) * (Math.min(width, height) / 4);
+      n.vx = 0; n.vy = 0;
+    });
+
+    const K = 0.05; // Spring
+    const L = 40;  // Ideal length
+    const REP = 300; // Repulsion
+    const DAMP = 0.8; 
 
+    // Run 100 iterations
+    for (let i = 0; i < 100; i++) {
+      for (let j = 0; j < nodes.length; j++) {
+        for (let k = j + 1; k < nodes.length; k++) {
+          const a = nodes[j], b = nodes[k];
+          let dx = a.x - b.x, dy = a.y - b.y;
+          let dist = Math.sqrt(dx*dx + dy*dy) || 0.1;
+          let f = REP / (dist * dist);
+          const fx = (dx / dist) * f;
+          const fy = (dy / dist) * f;
+          a.vx += fx; a.vy += fy;
+          b.vx -= fx; b.vy -= fy;
+        }
+      }
+      links.forEach(link => {
+        const a = nodes.find(n => n.id === link.from);
+        const b = nodes.find(n => n.id === link.to);
+        if (!a || !b) return;
+        let dx = b.x - a.x, dy = b.y - a.y;
+        let dist = Math.sqrt(dx*dx + dy*dy) || 0.1;
+        let f = (dist - L) * K;
+        const fx = (dx / dist) * f;
+        const fy = (dy / dist) * f;
+        a.vx += fx; a.vy += fy;
+        b.vx -= fx; b.vy -= fy;
+      });
+      nodes.forEach(n => {
+        n.vx += (width/2 - n.x) * 0.015;
+        n.vy += (height/2 - n.y) * 0.015;
+        n.vx *= DAMP; n.vy *= DAMP;
+        n.x += n.vx; n.y += n.vy;
+      });
+    }
+
+    // Now build SVG
     let svg = '';
     
-    // Draw links
-    // (Needs actual layout logic, this is a placeholder circle layout)
+    // Bounds and scaling to fit within 300x150
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    nodes.forEach(n => {
+      minX = Math.min(minX, n.x);
+      minY = Math.min(minY, n.y);
+      maxX = Math.max(maxX, n.x);
+      maxY = Math.max(maxY, n.y);
+    });
     
-    // Draw nodes
-    nodes.forEach((n, i) => {
-      const angle = (i / nodes.length) * Math.PI * 2;
-      const x = cx + Math.cos(angle) * radius;
-      const y = cy + Math.sin(angle) * radius;
-      svg += `<circle cx="${x}" cy="${y}" r="4" fill="var(--sn-node-selected, #4c8bf5)"></circle>`;
+    const pad = 20;
+    const gW = Math.max(1, maxX - minX);
+    const gH = Math.max(1, maxY - minY);
+    const scale = Math.min((width - pad*2) / gW, (height - pad*2) / gH, 1.2);
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const offX = width / 2 - cx * scale;
+    const offY = height / 2 - cy * scale;
+
+    // Draw Links
+    svg += '<g stroke="var(--sn-edge, #666)" stroke-width="1.5" opacity="0.5">';
+    links.forEach(link => {
+      const a = nodes.find(n => n.id === link.from);
+      const b = nodes.find(n => n.id === link.to);
+      if (!a || !b) return;
+      const x1 = a.x * scale + offX;
+      const y1 = a.y * scale + offY;
+      const x2 = b.x * scale + offX;
+      const y2 = b.y * scale + offY;
+      
+      // Curved paths
+      const dx = x2 - x1, dy = y2 - y1;
+      const cx1 = x1 + dx * 0.3 - dy * 0.1;
+      const cy1 = y1 + dy * 0.3 + dx * 0.1;
+      const cx2 = x1 + dx * 0.7 - dy * 0.1;
+      const cy2 = y1 + dy * 0.7 + dx * 0.1;
+      
+      svg += `<path d="M${x1},${y1} C${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}" fill="none" />`;
+    });
+    svg += '</g>';
+
+    // Draw Nodes
+    svg += '<g>';
+    nodes.forEach(n => {
+      const x = n.x * scale + offX;
+      const y = n.y * scale + offY;
+      const tc = n.type === 'action' ? '#ff968c' : 
+                 n.type === 'output' ? '#78d2aa' : 
+                 n.type === 'config' ? '#ffc878' : '#78b4ff';
+                 
+      svg += `<circle cx="${x}" cy="${y}" r="4" fill="${tc}"></circle>`;
       svg += `<text x="${x + 6}" y="${y + 3}" fill="var(--sn-text)" font-size="10">${this._esc(n.id || n.name || 'node')}</text>`;
     });
+    svg += '</g>';
 
     this.$.svgContent = svg;
   }

package/web/components/follow-ribbon.js

@@ -0,0 +1,134 @@
+// @ctx .context/web/components/follow-ribbon.ctx
+/**
+ * FollowRibbon — Floating status bar that shows current agent action.
+ * Appears at the bottom of the screen during Follow Mode.
+ * Auto-fades after 4 seconds of inactivity.
+ */
+import Symbiote from '@symbiotejs/symbiote';
+import { events } from '../app.js';
+
+export class FollowRibbon extends Symbiote {
+  init$ = {
+    statusText: '',
+    visible: false,
+  };
+
+  _fadeTimer = null;
+
+  initCallback() {
+    // Event subscriptions are in renderCallback (after template mount)
+  }
+
+  renderCallback() {
+    this.sub('visible', (v) => {
+      this.toggleAttribute('visible', v);
+    });
+
+    events.addEventListener('follow-status-changed', (e) => {
+      const text = e.detail?.text || '';
+      if (!text) {
+        this.$.visible = false;
+        return;
+      }
+      this.$.statusText = text;
+      this.$.visible = true;
+
+      // Auto-fade after 4 seconds
+      if (this._fadeTimer) clearTimeout(this._fadeTimer);
+      this._fadeTimer = setTimeout(() => {
+        this.$.visible = false;
+      }, 4000);
+    });
+
+    events.addEventListener('follow-state-changed', (e) => {
+      if (!e.detail?.enabled) {
+        this.$.visible = false;
+        this.$.statusText = '';
+        if (this._fadeTimer) {
+          clearTimeout(this._fadeTimer);
+          this._fadeTimer = null;
+        }
+      }
+    });
+  }
+}
+
+FollowRibbon.template = `
+<div class="fr-inner">
+  <span class="fr-icon">smart_toy</span>
+  <span class="fr-text" bind="textContent: statusText"></span>
+  <span class="fr-dots"></span>
+</div>
+`;
+
+FollowRibbon.rootStyles = `
+  follow-ribbon {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    z-index: 9999;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.4s ease, transform 0.4s ease;
+  }
+
+  follow-ribbon[visible] {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .fr-inner {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 20px;
+    border-radius: 24px;
+    background: rgba(20, 20, 25, 0.85);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(76, 139, 245, 0.25);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(76, 139, 245, 0.1);
+    font-family: 'Inter', -apple-system, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.9);
+    white-space: nowrap;
+    max-width: 500px;
+  }
+
+  .fr-icon {
+    font-family: 'Material Symbols Outlined';
+    font-size: 16px;
+    color: #4c8bf5;
+    animation: fr-pulse 2s ease-in-out infinite;
+  }
+
+  .fr-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fr-dots::after {
+    content: '...';
+    animation: fr-dots 1.5s steps(3) infinite;
+    display: inline-block;
+    width: 16px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.4);
+  }
+
+  @keyframes fr-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  @keyframes fr-dots {
+    0% { content: ''; }
+    33% { content: '.'; }
+    66% { content: '..'; }
+    100% { content: '...'; }
+  }
+`;
+
+FollowRibbon.reg('follow-ribbon');

package/web/follow-controller.js

@@ -0,0 +1,241 @@
+// @ctx .context/web/follow-controller.ctx
+/**
+ * FollowController — Central orchestrator for Follow Mode.
+ *
+ * Classifies incoming tool-events and dispatches debounced focus-change
+ * signals to subscribed panels (graph, code-viewer, monitor).
+ * Also manages the status ribbon text shown during active follow.
+ *
+ * NOTE: Does NOT import from app.js to avoid circular dependency.
+ * Call init(events, emit) before enable().
+ */
+
+/** Debounce delay for heavy visual updates (camera, code loading) */
+const HEAVY_DEBOUNCE = 800;
+
+class FollowController {
+  /** @type {boolean} */
+  enabled = false;
+  /** @type {{type: string, target: any, action?: string, meta?: object}|null} */
+  currentFocus = null;
+  /** @type {string} */
+  statusText = '';
+  /** @type {number|null} */
+  _debounceTimer = null;
+  /** @type {string|null} Previous hash before entering follow mode */
+  _previousHash = null;
+  /** @type {Function|null} */
+  _boundHandler = null;
+  /** @type {EventTarget|null} */
+  _events = null;
+  /** @type {Function|null} */
+  _emit = null;
+
+  /**
+   * Late-bind events bus and emit function (breaks circular import).
+   * Must be called once before enable().
+   * @param {EventTarget} events
+   * @param {Function} emit
+   */
+  init(events, emit) {
+    this._events = events;
+    this._emit = emit;
+  }
+
+  enable() {
+    if (this.enabled) return;
+    this.enabled = true;
+
+    // Save current location for restoring later
+    this._previousHash = location.hash;
+
+    // Bind tool-event listener
+    this._boundHandler = (e) => this._onToolEvent(e.detail);
+    this._events.addEventListener('tool-event', this._boundHandler);
+
+    this._emit('follow-state-changed', { enabled: true });
+  }
+
+  disable() {
+    if (!this.enabled) return;
+    this.enabled = false;
+
+    // Clean up
+    if (this._boundHandler) {
+      this._events.removeEventListener('tool-event', this._boundHandler);
+      this._boundHandler = null;
+    }
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+
+    this.currentFocus = null;
+    this._emitStatus('');
+
+    this._emit('follow-state-changed', { enabled: false });
+  }
+
+  /** @returns {string|null} */
+  getPreviousHash() {
+    return this._previousHash;
+  }
+
+  /**
+   * Main tool-event dispatcher. Classifies the event and routes to appropriate action.
+   * @param {object} event - Tool event from WebSocket
+   */
+  _onToolEvent(event) {
+    if (!this.enabled) return;
+
+    const toolName = event.tool || event.name || '';
+    const args = event.args || {};
+    const isCall = event.type === 'tool_call';
+    const isResult = event.type === 'tool_result';
+
+    // Extract short tool name (strip prefixes like 'default_api:', 'mcp_project-graph_')
+    const shortName = this._shortName(toolName);
+
+    // Status ribbon — update immediately on call
+    if (isCall) {
+      const statusText = this._buildStatusText(shortName, args);
+      if (statusText) this._emitStatus(statusText);
+    }
+
+    // Visual focus — classify and dispatch (debounced for heavy ops)
+    const action = this._classify(shortName, args, isCall, isResult, event);
+    if (action) {
+      if (action.immediate) {
+        this._emitFocusNow(action.focus);
+      } else {
+        this._emitFocusDebounced(action.focus, action.debounce || HEAVY_DEBOUNCE);
+      }
+    }
+  }
+
+  /**
+   * Classify tool event into a visual action.
+   * Only handles tools emitted by our MCP server (navigate, get_skeleton, etc.).
+   * IDE-local tools (view_file, grep_search) never arrive over WebSocket.
+   * @returns {{focus: object, debounce?: number, immediate?: boolean}|null}
+   */
+  _classify(tool, args, isCall, isResult, raw) {
+    if (!isCall) return null;
+
+    // === Graph navigation ===
+    if (tool === 'navigate') {
+      if (args.action === 'expand' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'focus' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'deps' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'deps' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'usages' && args.symbol) {
+        return { focus: { type: 'graph', target: args.symbol, action: 'deps' }, debounce: HEAVY_DEBOUNCE };
+      }
+      if (args.action === 'call_chain' && args.from && args.to) {
+        return { focus: { type: 'graph', target: { from: args.from, to: args.to }, action: 'chain' }, immediate: true };
+      }
+    }
+
+    // === Skeleton / Overview ===
+    if (tool === 'get_skeleton' || tool === 'get_ai_context') {
+      return { focus: { type: 'graph', action: 'fit' }, immediate: true };
+    }
+
+    // === Code compaction (compact_file action has a file path) ===
+    if (tool === 'compact' && args.path) {
+      return { focus: { type: 'file', target: args.path }, debounce: HEAVY_DEBOUNCE };
+    }
+
+    // === Analysis ===
+    if (tool === 'analyze') {
+      return { focus: { type: 'analysis' }, immediate: true };
+    }
+
+    return null;
+  }
+
+  /**
+   * Build human-readable status text for the ribbon.
+   * Only MCP-server tools arrive here (navigate, get_skeleton, compact, analyze, docs, etc.).
+   * @param {string} tool
+   * @param {object} args
+   * @returns {string}
+   */
+  _buildStatusText(tool, args) {
+    const file = args.path || '';
+    const short = file ? file.split('/').slice(-2).join('/') : '';
+
+    switch (tool) {
+      case 'navigate': {
+        if (args.action === 'expand') return `Expanding ${args.symbol}`;
+        if (args.action === 'deps') return `Tracing deps of ${args.symbol}`;
+        if (args.action === 'usages') return `Finding usages of ${args.symbol}`;
+        if (args.action === 'call_chain') return `Tracing ${args.from} → ${args.to}`;
+        if (args.action === 'sub_projects') return `Scanning sub-projects`;
+        return `Navigating graph`;
+      }
+      case 'get_skeleton': return `Scanning project structure`;
+      case 'get_ai_context': return `Loading AI context`;
+      case 'compact': return `Compacting ${short}`;
+      case 'analyze': return `Analyzing: ${args.action || ''}`;
+      case 'docs': return `Documentation: ${args.action || ''}`;
+      case 'jsdoc': return `JSDoc: ${args.action || ''}`;
+      case 'db': return `Database: ${args.action || ''}`;
+      case 'testing': return `Tests: ${args.action || ''}`;
+      case 'filters': return `Filters: ${args.action || ''}`;
+      default: return tool ? `Running ${tool}` : '';
+    }
+  }
+
+  /**
+   * Extract short tool name from full prefixed name.
+   * 'default_api:view_file' → 'view_file'
+   * 'mcp_project-graph_navigate' → 'navigate'
+   */
+  _shortName(full) {
+    // Strip 'default_api:' prefix
+    let name = full.replace(/^default_api:/, '');
+    // Strip 'mcp_project-graph_' prefix
+    name = name.replace(/^mcp_project-graph_/, '');
+    return name;
+  }
+
+  /**
+   * Emit focus change immediately (for urgent actions like call_chain).
+   */
+  _emitFocusNow(focus) {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+    this.currentFocus = focus;
+    this._emit('follow-focus-changed', focus);
+  }
+
+  /**
+   * Emit focus change with debounce (for rapid file reads, etc.).
+   */
+  _emitFocusDebounced(focus, delay) {
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+    }
+    this._debounceTimer = setTimeout(() => {
+      this._debounceTimer = null;
+      this.currentFocus = focus;
+      this._emit('follow-focus-changed', focus);
+    }, delay);
+  }
+
+  /**
+   * Emit status text for the ribbon.
+   */
+  _emitStatus(text) {
+    this.statusText = text;
+    this._emit('follow-status-changed', { text });
+  }
+}
+
+/** Singleton instance */
+export const followController = new FollowController();

package/web/panels/code-viewer.js

@@ -29,7 +29,7 @@ export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,vie
   // Toggle between source and the transformation
   this.$.viewMode=this.$.viewMode==="source"?"transformed":"source";
   this._showCurrentMode();
-}};_fileData=null;_isReadable=!1;_transformCache=null;_loadingTransform=!1;_currentPath=null;initCallback(){t.addEventListener("file-selected",e=>this._loadFile(e.detail.path));if(o.activeFile)requestAnimationFrame(()=>this._loadFile(o.activeFile))}renderCallback(){this.sub("hasFile",e=>{this.toggleAttribute("has-file",e)}),this.sub("viewMode",e=>{
+}};_fileData=null;_isReadable=!1;_transformCache=null;_loadingTransform=!1;_currentPath=null;initCallback(){t.addEventListener("file-selected",e=>this._loadFile(e.detail.path));t.addEventListener("follow-focus-changed",e=>{const d=e.detail;if(d.type==="file"&&d.target){this._loadFile(d.target);if(d.meta?.startLine){setTimeout(()=>{const c=this._getCodeBlock();if(c&&c.scrollToLine)c.scrollToLine(d.meta.startLine)},200)}}});if(o.activeFile)requestAnimationFrame(()=>this._loadFile(o.activeFile))}renderCallback(){this.sub("hasFile",e=>{this.toggleAttribute("has-file",e)}),this.sub("viewMode",e=>{
   const lang=_getLang(this._currentPath);
   this.toggleAttribute("mode-raw","source"!==e);
   if(lang==='md'){

package/web/panels/dep-graph.js

@@ -687,8 +687,6 @@ export class DepGraph extends Symbiote {
   _wasDragged = false;
   /** @type {Map<string, string>} */
   _fileMap = new Map();
-  /** @type {boolean} */
-  _autopilot = false;
   /** @type {HTMLElement|null} */
   _canvas = null;
   /** @type {object|null} Skeleton data for resolving pin names */
@@ -851,11 +849,6 @@ export class DepGraph extends Symbiote {
         this._restoreFlatFocus();
       }
     });
-    
-    // Follow mode: listen for global state (set from topbar)
-    events.addEventListener('follow-mode-changed', (e) => {
-      this._autopilot = e.detail.enabled;
-    });
 
     // Label Mode controls
     const labelBtns = this.querySelectorAll('.label-mode-btn');
@@ -983,17 +976,14 @@ export class DepGraph extends Symbiote {
     ro.observe(this);
     this._resizeObserver = ro;
 
-    // Bind and save global listener functions for clean up
     this._onSkeletonLoaded = (e) => {
       if (this._graphBuilt || this.style.display === 'none' || this.offsetWidth === 0) return;
       requestAnimationFrame(() => this._buildGraph(e.detail));
     };
     
-    this._onToolEvent = (e) => {
+    this._onFollowFocusChanged = (e) => {
       if (this.style.display === 'none' || this.offsetWidth === 0) return;
-      if (this._autopilot) {
-        this._handleAutopilot(e.detail);
-      }
+      this._handleFollowFocus(e.detail);
     };
     
     this._onFileSelected = (e) => {
@@ -1026,8 +1016,8 @@ export class DepGraph extends Symbiote {
       }).catch(() => {});
     }
 
-    // Autopilot: listen for agent tool events
-    events.addEventListener('tool-event', this._onToolEvent);
+    // Autopilot: listen for orchestrator events
+    events.addEventListener('follow-focus-changed', this._onFollowFocusChanged);
 
     // Update route within graph section
     // On node click → save file path (just focusing)
@@ -1165,7 +1155,7 @@ export class DepGraph extends Symbiote {
   disconnectedCallback() {
     super.disconnectedCallback?.();
     if (this._onSkeletonLoaded) events.removeEventListener('skeleton-loaded', this._onSkeletonLoaded);
-    if (this._onToolEvent) events.removeEventListener('tool-event', this._onToolEvent);
+    if (this._onFollowFocusChanged) events.removeEventListener('follow-focus-changed', this._onFollowFocusChanged);
     if (this._onFileSelected) events.removeEventListener('file-selected', this._onFileSelected);
     if (this._onHashChange) window.removeEventListener('hashchange', this._onHashChange);
     if (this._resizeObserver) {
@@ -2498,37 +2488,26 @@ export class DepGraph extends Symbiote {
   }
 
   /**
-   * Handle agent tool events for autopilot mode
-   * @param {object} event
+   * Handle orchestrated visual focus from FollowController
+   * @param {object} detail 
    */
-  _handleAutopilot(event) {
+  _handleFollowFocus({ type, target, action }) {
     if (!this._editor || !this._canvas) return;
-
-    const toolName = event.tool || event.name || '';
-    const args = event.args || {};
-
-    // tool:call events
-    if (event.phase === 'call' || event.type === 'tool:call') {
-      if (toolName === 'navigate' && args.action === 'expand' && args.symbol) {
-        this._focusSymbol(args.symbol);
-      } else if (toolName === 'navigate' && args.action === 'deps' && args.symbol) {
-        this._highlightDeps(args.symbol);
-      } else if (toolName === 'navigate' && args.action === 'call_chain') {
-        // Phase 4: animate call chain when agent traces a path
-        if (args.from && args.to) {
-          this._highlightCallChain(args.from, args.to);
-        }
-      } else if (toolName === 'navigate' && args.action === 'usages' && args.symbol) {
-        this._highlightDeps(args.symbol);
-      } else if (toolName === 'get_skeleton') {
+    if (type !== 'graph' && type !== 'file') return; // React to graph and file actions
+
+    if (type === 'graph') {
+      if (action === 'focus' && target) {
+        this._focusSymbol(target);
+      } else if (action === 'deps' && target) {
+        this._highlightDeps(target);
+      } else if (action === 'chain' && target.from && target.to) {
+        this._highlightCallChain(target.from, target.to);
+      } else if (action === 'fit') {
         this._canvas.fitView();
-      } else if (toolName === 'compact' && args.path) {
-        this._pulseFile(args.path);
-      } else if (toolName === 'view_file' && args.path) {
-        // Agent opened a file — focus it on the board
-        this._focusFile(args.path);
-        this._pulseFile(args.path);
       }
+    } else if (type === 'file' && target) {
+      this._focusFile(target);
+      this._pulseFile(target);
     }
   }
 

package/web/style.css

@@ -123,6 +123,12 @@ html, body {
   background: rgba(76, 139, 245, 0.15);
   color: #4c8bf5;
   border-color: rgba(76, 139, 245, 0.3);
+  animation: follow-btn-glow 2s ease-in-out infinite;
+}
+
+@keyframes follow-btn-glow {
+  0%, 100% { box-shadow: 0 0 4px rgba(76, 139, 245, 0.1); }
+  50% { box-shadow: 0 0 12px rgba(76, 139, 245, 0.4); }
 }
 
 /* Agent badge */