project-graph-mcp 2.3.0 → 2.3.2

package/vendor/symbiote-node/engine/packs/video-pack.js

@@ -0,0 +1,323 @@
+/**
+ * video-pack.js - Video domain pack for agi-graph
+ *
+ * Registers video-specific node types and socket types.
+ * Extracted from symbiote-video/src/graph/NodeTypes.js + NodeProcessors.js.
+ *
+ * @module agi-graph/packs/video-pack
+ */
+
+import { registerPack } from '../index.js';
+
+/**
+ * Video-domain socket types
+ */
+const socketTypes = {
+  image: { color: '#C79650', label: 'Image', compatible: ['image'] },
+  audio: { color: '#C1990E', label: 'Audio', compatible: ['audio'] },
+  timeline: { color: '#5090C7', label: 'Timeline', compatible: ['timeline'] },
+  skeleton: { color: '#90C750', label: 'Skeleton', compatible: ['skeleton'] },
+  effect: { color: '#C750C7', label: 'Effect', compatible: ['effect'] },
+};
+
+/**
+ * Video node type definitions
+ */
+const nodes = [
+  // ─── Source ─────────────────────────────────────────────────────────
+  {
+    type: 'source/audio',
+    category: 'source',
+    icon: 'music_note',
+    driver: {
+      description: 'Audio source file',
+      capabilities: ['source', 'audio'],
+      inputs: [],
+      outputs: [
+        { name: 'audio', type: 'audio' },
+        { name: 'duration', type: 'float' },
+      ],
+      params: {
+        src: { type: 'string', required: true, description: 'Audio file path or URL' },
+        volume: { type: 'float', default: 1.0, min: 0, max: 2 },
+      },
+    },
+    process: (_inputs, params) => ({
+      audio: { src: params.src, volume: params.volume },
+      duration: params.duration || 0,
+    }),
+  },
+  {
+    type: 'source/webp-sequence',
+    category: 'source',
+    icon: 'movie',
+    driver: {
+      description: 'WebP image sequence as video frames',
+      capabilities: ['source', 'video'],
+      inputs: [],
+      outputs: [
+        { name: 'frames', type: 'image' },
+        { name: 'frameCount', type: 'int' },
+      ],
+      params: {
+        directory: { type: 'string', required: true },
+        pattern: { type: 'string', default: '*.webp' },
+        fps: { type: 'int', default: 30, min: 1, max: 120 },
+      },
+    },
+    process: (_inputs, params) => ({
+      frames: { directory: params.directory, pattern: params.pattern, fps: params.fps },
+      frameCount: params.frameCount || 0,
+    }),
+  },
+  {
+    type: 'source/image',
+    category: 'source',
+    icon: 'image',
+    driver: {
+      description: 'Static image source',
+      capabilities: ['source', 'image'],
+      inputs: [],
+      outputs: [{ name: 'image', type: 'image' }],
+      params: {
+        src: { type: 'string', required: true },
+        fit: { type: 'string', default: 'cover', enum: ['cover', 'contain', 'fill', 'none'] },
+      },
+    },
+    process: (_inputs, params) => ({
+      image: { src: params.src, fit: params.fit },
+    }),
+  },
+  {
+    type: 'source/text',
+    category: 'source',
+    icon: 'text_fields',
+    driver: {
+      description: 'Text source for overlays and subtitles',
+      capabilities: ['source', 'text'],
+      inputs: [],
+      outputs: [{ name: 'text', type: 'string' }],
+      params: {
+        content: { type: 'string', default: '' },
+        style: { type: 'string', default: 'default' },
+      },
+    },
+    process: (_inputs, params) => ({
+      text: { content: params.content, style: params.style },
+    }),
+  },
+
+  // ─── Analysis ──────────────────────────────────────────────────────
+  {
+    type: 'analysis/beat-analyzer',
+    category: 'analysis',
+    icon: 'graphic_eq',
+    driver: {
+      description: 'Analyzes audio for beats, energy, and generates effect skeleton',
+      capabilities: ['analysis', 'audio', 'ai'],
+      inputs: [{ name: 'audio', type: 'audio', required: true }],
+      outputs: [
+        { name: 'skeleton', type: 'skeleton' },
+        { name: 'beats', type: 'float' },
+        { name: 'energy', type: 'float' },
+      ],
+      params: {
+        energyPerSecond: { type: 'int', default: 10, min: 1, max: 100 },
+        strongThreshold: { type: 'float', default: 1.3, min: 0.5, max: 3 },
+      },
+    },
+    process: (inputs, params) => ({
+      skeleton: {
+        intensityZones: [],
+        fadeZones: [],
+        dropPoints: [],
+        beatMarkers: [],
+        transitionAnchors: [],
+      },
+      beats: [],
+      energy: [],
+    }),
+  },
+  {
+    type: 'analysis/ai-director',
+    category: 'analysis',
+    icon: 'smart_toy',
+    driver: {
+      description: 'AI-driven timeline composition from skeleton and prompt',
+      capabilities: ['analysis', 'ai', 'llm'],
+      inputs: [
+        { name: 'skeleton', type: 'skeleton', required: true },
+        { name: 'prompt', type: 'string' },
+      ],
+      outputs: [{ name: 'timeline', type: 'timeline' }],
+      params: {
+        model: { type: 'string', default: 'auto' },
+        temperature: { type: 'float', default: 0.7, min: 0, max: 2 },
+      },
+      constraints: { requiresSecret: 'OPENAI_API_KEY' },
+    },
+  },
+
+  // ─── Processing ────────────────────────────────────────────────────
+  {
+    type: 'processing/physics-vfx',
+    category: 'processing',
+    icon: 'bolt',
+    driver: {
+      description: 'Physics-based visual effects synced to beats',
+      capabilities: ['effects', 'animation'],
+      inputs: [
+        { name: 'input', type: 'any' },
+        { name: 'beats', type: 'float' },
+      ],
+      outputs: [{ name: 'output', type: 'effect' }],
+      params: {
+        preset: { type: 'string', default: 'bounceIn', enum: ['bounceIn', 'dropImpact', 'glitch', 'shake', 'zoom', 'rubberBand', 'pulse'] },
+        beatSync: { type: 'boolean', default: true },
+        intensity: { type: 'float', default: 1.0, min: 0, max: 3 },
+      },
+    },
+  },
+  {
+    type: 'processing/color-correction',
+    category: 'processing',
+    icon: 'palette',
+    driver: {
+      description: 'Color grading and correction filters',
+      capabilities: ['effects', 'color'],
+      inputs: [{ name: 'input', type: 'image', required: true }],
+      outputs: [{ name: 'output', type: 'image' }],
+      params: {
+        brightness: { type: 'float', default: 0, min: -100, max: 100 },
+        contrast: { type: 'float', default: 0, min: -100, max: 100 },
+        saturation: { type: 'float', default: 0, min: -100, max: 100 },
+        hueRotate: { type: 'float', default: 0, min: 0, max: 360 },
+      },
+    },
+  },
+  {
+    type: 'processing/transition',
+    category: 'processing',
+    icon: 'shuffle',
+    driver: {
+      description: 'Transition effect between two sources',
+      capabilities: ['effects', 'transition'],
+      inputs: [
+        { name: 'from', type: 'image', required: true },
+        { name: 'to', type: 'image', required: true },
+      ],
+      outputs: [{ name: 'output', type: 'image' }],
+      params: {
+        type: { type: 'string', default: 'fade', enum: ['fade', 'slide', 'wipe', 'zoom', 'dissolve'] },
+        duration: { type: 'int', default: 30, min: 1 },
+        direction: { type: 'string', default: 'left', enum: ['left', 'right', 'up', 'down'] },
+      },
+    },
+  },
+
+  // ─── Composition ───────────────────────────────────────────────────
+  {
+    type: 'composition/layout',
+    category: 'composition',
+    icon: 'grid_view',
+    driver: {
+      description: 'Positions content in the viewport',
+      capabilities: ['composition', 'layout'],
+      inputs: [{ name: 'content', type: 'any', required: true }],
+      outputs: [{ name: 'output', type: 'image' }],
+      params: {
+        anchor: { type: 'string', default: 'center' },
+        x: { type: 'string', default: '50%' },
+        y: { type: 'string', default: '50%' },
+        width: { type: 'string', default: '100%' },
+        height: { type: 'string', default: '100%' },
+        rotation: { type: 'float', default: 0 },
+      },
+    },
+  },
+  {
+    type: 'composition/blend',
+    category: 'composition',
+    icon: 'theaters',
+    driver: {
+      description: 'Blends/composites two image layers',
+      capabilities: ['composition', 'blend'],
+      inputs: [
+        { name: 'base', type: 'image', required: true },
+        { name: 'overlay', type: 'image', required: true },
+      ],
+      outputs: [{ name: 'output', type: 'image' }],
+      params: {
+        mode: { type: 'string', default: 'normal', enum: ['normal', 'multiply', 'screen', 'overlay', 'add'] },
+        opacity: { type: 'float', default: 1.0, min: 0, max: 1 },
+      },
+    },
+  },
+  {
+    type: 'composition/timeline',
+    category: 'composition',
+    icon: 'timer',
+    driver: {
+      description: 'Assembles layers into a timeline for rendering',
+      capabilities: ['composition', 'timeline'],
+      inputs: [
+        { name: 'layers', type: 'any', required: true },
+        { name: 'dynamics', type: 'skeleton' },
+      ],
+      outputs: [{ name: 'timeline', type: 'timeline' }],
+      params: {
+        fps: { type: 'int', default: 30, min: 1, max: 120 },
+        duration: { type: 'string', default: 'auto' },
+      },
+    },
+  },
+
+  // ─── Output ────────────────────────────────────────────────────────
+  {
+    type: 'output/viewport',
+    category: 'output',
+    icon: 'desktop_windows',
+    driver: {
+      description: 'Preview viewport for real-time monitoring',
+      capabilities: ['output', 'preview'],
+      inputs: [{ name: 'timeline', type: 'timeline', required: true }],
+      outputs: [],
+      params: {
+        width: { type: 'int', default: 1080, min: 1 },
+        height: { type: 'int', default: 1920, min: 1 },
+        background: { type: 'string', default: '#000000' },
+      },
+    },
+  },
+  {
+    type: 'output/render',
+    category: 'output',
+    icon: 'videocam',
+    driver: {
+      description: 'Renders timeline to video file',
+      capabilities: ['output', 'render'],
+      inputs: [{ name: 'timeline', type: 'timeline', required: true }],
+      outputs: [],
+      params: {
+        format: { type: 'string', default: 'mp4', enum: ['mp4', 'webm', 'mov'] },
+        codec: { type: 'string', default: 'h264', enum: ['h264', 'h265', 'vp9', 'av1'] },
+        quality: { type: 'string', default: 'high', enum: ['low', 'medium', 'high', 'lossless'] },
+        preset: { type: 'string', default: 'vertical', enum: ['vertical', 'horizontal', 'square'] },
+      },
+    },
+  },
+];
+
+/**
+ * Register the video pack
+ */
+export function registerVideoPack() {
+  registerPack({
+    name: 'video',
+    socketTypes,
+    nodes,
+  });
+}
+
+// Auto-register when imported
+registerVideoPack();

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;
   }