project-graph-mcp 2.2.4 → 2.3.0

package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.css.js

@@ -0,0 +1,86 @@
+/**
+ * QuickToolbar styles
+ * @module symbiote-node/toolbar/QuickToolbar.css
+ */
+import { css } from '@symbiotejs/symbiote';
+
+export const styles = css`
+quick-toolbar {
+  position: absolute;
+  z-index: 150;
+  pointer-events: all;
+  transform-origin: center bottom;
+
+  &[hidden] {
+    display: none;
+  }
+
+  & .toolbar {
+    display: flex;
+    gap: 2px;
+    padding: 4px;
+    border-radius: 10px;
+    background: var(--sn-toolbar-bg, rgba(22, 33, 62, 0.92));
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--sn-toolbar-border, rgba(255, 255, 255, 0.1));
+    box-shadow: 0 8px 32px var(--sn-shadow-color, rgba(0, 0, 0, 0.45)), 0 0 0 1px var(--sn-shadow-color, rgba(0, 0, 0, 0.1));
+    transform: translateX(-50%);
+    animation: toolbar-in 0.2s ease-out;
+  }
+}
+
+@keyframes toolbar-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(6px) scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+.tb-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sn-toolbar-color, #c0c8d8);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, transform 0.12s;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:hover {
+    background: var(--sn-toolbar-hover, rgba(74, 158, 255, 0.2));
+    color: var(--sn-toolbar-active, #e2e8f0);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.tb-btn--danger:hover {
+  background: var(--sn-toolbar-danger, rgba(255, 107, 107, 0.25));
+  color: var(--sn-toolbar-danger-color, #ff6b6b);
+}
+
+.tb-btn--enter:hover {
+  background: color-mix(in srgb, var(--sn-cat-data, #a78bfa) 25%, transparent);
+  color: var(--sn-cat-data, #a78bfa);
+}
+
+.tb-icon {
+  font-size: 18px;
+  pointer-events: none;
+}
+`;

package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.js

@@ -0,0 +1,128 @@
+/**
+ * QuickToolbar — floating action bar above selected node
+ *
+ * Shows contextual SVG buttons when a single node is selected:
+ * Delete, Duplicate, Mute.
+ * Positioned above the node and follows zoom/pan transform.
+ *
+ * @module symbiote-node/toolbar/QuickToolbar
+ */
+
+import Symbiote from '@symbiotejs/symbiote';
+import { template } from './QuickToolbar.tpl.js';
+import { styles } from './QuickToolbar.css.js';
+
+/**
+ * @typedef {object} ToolbarAction
+ * @property {string} id - Action identifier
+ * @property {string} icon - Material Symbols icon name
+ * @property {string} label - Tooltip text
+ */
+
+/** @type {ToolbarAction[]} */
+const ACTIONS = [
+  { id: 'duplicate', icon: 'content_copy', label: 'Duplicate' },
+  { id: 'mute', icon: 'visibility_off', label: 'Mute' },
+  { id: 'delete', icon: 'delete', label: 'Delete' },
+];
+
+export class QuickToolbar extends Symbiote {
+
+  init$ = {
+    items: ACTIONS,
+    visible: false,
+    onBtnClick: (/** @type {Event} */ e) => {
+      const btn = e.target.closest('[data-action]');
+      if (!btn) return;
+      const action = btn.getAttribute('data-action');
+      if (this._onAction) this._onAction(action, this._nodeId);
+    },
+  };
+
+  /** @type {string|null} */
+  _nodeId = null;
+
+  /** @type {function|null} */
+  _onAction = null;
+
+  /** @type {number} Toolbar height + gap */
+  static OFFSET_Y = 48;
+
+  /** @type {{ zoom: number, panX: number, panY: number }} */
+  _transform = { zoom: 1, panX: 0, panY: 0 };
+
+  /**
+   * Show toolbar above a node
+   * @param {string} nodeId
+   * @param {HTMLElement} nodeEl - The graph-node element
+   */
+  show(nodeId, nodeEl) {
+    this._nodeId = nodeId;
+    this._nodeEl = nodeEl;
+    this.$.visible = true;
+
+    this.#positionAtNode(nodeEl);
+
+    // Update collapse icon based on current state
+    this.#updateIcons(nodeEl);
+
+    // Show/hide enter button for subgraph nodes
+    const enterBtn = this.querySelector('[data-action="enter"]');
+    if (enterBtn) {
+      enterBtn.hidden = nodeEl.getAttribute('node-type') !== 'subgraph';
+    }
+  }
+
+  /** Hide toolbar */
+  hide() {
+    this._nodeId = null;
+    this._nodeEl = null;
+    this.$.visible = false;
+  }
+
+  renderCallback() {
+    this.sub('visible', (val) => {
+      this.toggleAttribute('hidden', !val);
+    });
+  }
+
+  /**
+   * Update position to follow node movement
+   * @param {HTMLElement} nodeEl
+   */
+  updatePosition(nodeEl) {
+    if (!this._nodeId) return;
+    this.#positionAtNode(nodeEl);
+  }
+
+  /**
+   * Position toolbar centered above a node in world-space.
+   * Since toolbar is inside .content, it inherits zoom/pan transform.
+   * @param {HTMLElement} nodeEl
+   */
+  #positionAtNode(nodeEl) {
+    const w = nodeEl.offsetWidth || nodeEl._cachedW || 180;
+    const pos = nodeEl._position || { x: 0, y: 0 };
+
+    const x = pos.x + w / 2;
+    const y = pos.y - QuickToolbar.OFFSET_Y;
+
+    this.style.transform = `translate(${x}px, ${y}px)`;
+  }
+
+  /**
+   * Update toggle icons based on node state
+   * @param {HTMLElement} nodeEl
+   */
+  #updateIcons(nodeEl) {
+    const isMuted = nodeEl.hasAttribute('data-muted');
+
+    const muteBtn = this.querySelector('[data-action="mute"] .tb-icon');
+
+    if (muteBtn) muteBtn.textContent = isMuted ? 'visibility' : 'visibility_off';
+  }
+}
+
+QuickToolbar.template = template;
+QuickToolbar.rootStyles = styles;
+QuickToolbar.reg('quick-toolbar');

package/vendor/symbiote-node/toolbar/QuickToolbar/QuickToolbar.tpl.js

@@ -0,0 +1,29 @@
+/**
+ * QuickToolbar template
+ * @module symbiote-node/toolbar/QuickToolbar.tpl
+ */
+import { html } from '@symbiotejs/symbiote';
+
+export const template = html`
+<div class="toolbar" ${{ onclick: 'onBtnClick' }}>
+  <button class="tb-btn tb-btn--enter" data-action="enter" title="Enter Subgraph" hidden>
+    <span class="material-symbols-outlined tb-icon">login</span>
+  </button>
+  <button class="tb-btn" data-action="explore" title="Explore connections">
+    <span class="material-symbols-outlined tb-icon">hub</span>
+  </button>
+  <button class="tb-btn" data-action="view-code" title="View Code">
+    <span class="material-symbols-outlined tb-icon">code</span>
+  </button>
+  <button class="tb-btn" data-action="duplicate" title="Duplicate">
+    <span class="material-symbols-outlined tb-icon">content_copy</span>
+  </button>
+
+  <button class="tb-btn" data-action="mute" title="Mute">
+    <span class="material-symbols-outlined tb-icon">visibility_off</span>
+  </button>
+  <button class="tb-btn tb-btn--danger" data-action="delete" title="Delete">
+    <span class="material-symbols-outlined tb-icon">delete</span>
+  </button>
+</div>
+`;

package/web/app.js

@@ -1,6 +1,5 @@
 // @ctx .context/web/app.ctx
-import{Layout as e,LayoutTree as t,applyTheme as n}from"symbiote-node";
-import{CARBON as o}from"./vendor/symbiote-node/themes/carbon.js";
+import{Layout as e,LayoutTree as t,applyTheme as n,CARBON as o}from"symbiote-node";
 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";
@@ -10,14 +9,16 @@ import"./panels/health-panel.js";
 import"./panels/live-monitor.js";
 import"./panels/SettingsPanel/SettingsPanel.js";
 import"./components/quick-open.js";
+import"./components/canvas-graph.js";
 export const state={skeleton:null,activeFile:null,ws:null,monitorEvents:[]};
 export{formatStats}from"./stats-format.js";
 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:"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),analysis:()=>t.createSplit("horizontal",t.createPanel("health"),t.createPanel("dep-graph"),.5),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);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):"";d[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;const t=e.detail.path;t&&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()}
+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")};
+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"))}
-"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>{u(),f()}):(u(),f());
+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());