project-graph-mcp 1.5.0 → 2.1.0

package/web/panels/file-tree.js

@@ -0,0 +1,188 @@
+/*
+--- file-tree.js ---
+class FileTree extends e
+  .initCallback()
+  ._toggleDir(dir)
+  ._saveExpandedState()
+  ._updateDirDOM(dir)
+  ._collapseAll()
+  ._highlightFile(e)
+  ._renderTree(e)
+  ._getFileIcon(e)
+  ._applyFilter()
+*/
+import e from "@symbiotejs/symbiote";
+
+import { api as t, state as n, events as s, emit as i } from "../app.js";
+
+export class FileTree extends e {
+    init$={
+        treeHTML: '<div class="pg-placeholder">Loading files...</div>',
+        filterText: "",
+        onFilterInput: e => {
+            this.$.filterText = e.target.value.toLowerCase(), this._applyFilter();
+        },
+        onCollapseAll: () => {
+            this._collapseAll();
+        }
+    };
+    initCallback() {
+        this._expandedDirs = new Set;
+        try {
+            const saved = localStorage.getItem("pg-tree-expanded");
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                Array.isArray(parsed) && (this._expandedDirs = new Set(parsed));
+            }
+        } catch (e) {}
+        s.addEventListener("skeleton-loaded", e => {
+            this._renderTree(e.detail), n.activeFile && requestAnimationFrame(() => this._highlightFile(n.activeFile));
+        }), n.skeleton && this._renderTree(n.skeleton), s.addEventListener("file-selected", e => {
+            e.detail.fromRoute && requestAnimationFrame(() => this._highlightFile(e.detail.path));
+        }), this.addEventListener("click", e => {
+            const fileEl = e.target.closest(".pg-tree-file");
+            if (fileEl) return this.querySelectorAll(".pg-tree-file.active").forEach(el => el.classList.remove("active")), 
+            fileEl.classList.add("active"), n.activeFile = fileEl.dataset.file, void i("file-selected", {
+                path: fileEl.dataset.file
+            });
+            const dirEl = e.target.closest(".pg-tree-dir");
+            if (dirEl) {
+                const dir = dirEl.dataset.dir;
+                null != dir && this._toggleDir(dir);
+            }
+        });
+    }
+    _toggleDir(dir) {
+        this._expandedDirs.has(dir) ? this._expandedDirs.delete(dir) : this._expandedDirs.add(dir), 
+        this._saveExpandedState(), this._updateDirDOM(dir);
+    }
+    _saveExpandedState() {
+        localStorage.setItem("pg-tree-expanded", JSON.stringify(Array.from(this._expandedDirs)));
+    }
+    _updateDirDOM(dir) {
+        const dirEl = this.querySelector(`.pg-tree-dir[data-dir="${CSS.escape(dir)}"]`), childrenEl = this.querySelector(`.pg-tree-children[data-dir="${CSS.escape(dir)}"]`);
+        if (dirEl && childrenEl) {
+            const isExpanded = this._expandedDirs.has(dir), icon = dirEl.querySelector(".pg-chevron");
+            icon && (icon.textContent = isExpanded ? "expand_more" : "chevron_right"), isExpanded ? childrenEl.removeAttribute("hidden") : childrenEl.setAttribute("hidden", "");
+        }
+    }
+    _collapseAll() {
+        this._expandedDirs.clear(), this._saveExpandedState(), this.querySelectorAll(".pg-tree-dir").forEach(dirEl => {
+            this._updateDirDOM(dirEl.dataset.dir);
+        });
+    }
+    _highlightFile(e) {
+        const fileEl = this.querySelector(`.pg-tree-file[data-file="${CSS.escape(e)}"]`);
+        if (fileEl) {
+            this.querySelectorAll(".pg-tree-file.active").forEach(el => el.classList.remove("active")), 
+            fileEl.classList.add("active");
+            // Expand all ancestor dirs
+            const parts = e.split("/");
+            parts.pop(); // remove filename
+            let changed = !1;
+            for (let i = 1; i <= parts.length; i++) {
+                const dir = parts.slice(0, i).join("/");
+                this._expandedDirs.has(dir) || (this._expandedDirs.add(dir), this._updateDirDOM(dir), changed = !0);
+            }
+            changed && this._saveExpandedState();
+            fileEl.scrollIntoView({ block: "center", behavior: "smooth" });
+        }
+    }
+    _renderTree(e) {
+        if (!e) return void (this.$.treeHTML = '<div class="pg-placeholder">No files found</div>');
+        const t = new Map, n = e.n || {};
+        for (const val of Object.values(n)) if (val.f) {
+            const item = t.get(val.f) || { exports: 0, classes: 0 };
+            item.classes++, t.set(val.f, item);
+        }
+        const s = e.X || {};
+        for (const [key, val] of Object.entries(s)) {
+            const item = t.get(key) || { exports: 0, classes: 0 };
+            item.exports = val.length, t.set(key, item);
+        }
+        const i = e.f || {};
+        for (const [key, val] of Object.entries(i)) for (const s of val) {
+            const p = "./" === key ? s : `${key}${s}`;
+            t.has(p) || t.set(p, { exports: 0, classes: 0 });
+        }
+        const o = e.a || {};
+        for (const [key, val] of Object.entries(o)) for (const s of val) {
+            const p = "./" === key ? s : `${key}${s}`;
+            t.has(p) || t.set(p, { exports: 0, classes: 0, nonSource: !0 });
+        }
+        if (0 === t.size) return void (this.$.treeHTML = '<div class="pg-placeholder">No files found</div>');
+        // Build nested tree structure
+        const root = { children: {}, files: [] };
+        for (const [filePath, meta] of t) {
+            const parts = filePath.split("/");
+            const fileName = parts.pop();
+            let node = root;
+            for (const part of parts) {
+                node.children[part] || (node.children[part] = { children: {}, files: [] });
+                node = node.children[part];
+            }
+            node.files.push({ f: filePath, name: fileName, ...meta });
+        }
+        // Render recursively
+        const renderNode = (node, dirPath, depth) => {
+            const l = [];
+            // Sort: dirs first, then files
+            const dirs = Object.keys(node.children).sort();
+            const files = node.files.sort((a, b) => a.name.localeCompare(b.name));
+            const pad = depth * 16;
+            for (const dirName of dirs) {
+                const childPath = dirPath ? `${dirPath}/${dirName}` : dirName;
+                const isExpanded = this._expandedDirs && this._expandedDirs.has(childPath);
+                const chevron = isExpanded ? "expand_more" : "chevron_right";
+                const hiddenAttr = isExpanded ? "" : " hidden";
+                l.push(`<div class="pg-tree-dir" data-dir="${childPath}" style="padding-left:${pad + 6}px"><span class="material-symbols-outlined pg-chevron" style="font-size:16px">${chevron}</span> <span class="material-symbols-outlined" style="font-size:16px">folder</span> ${dirName}</div>`);
+                l.push(`<div class="pg-tree-children" data-dir="${childPath}"${hiddenAttr}>`);
+                l.push(renderNode(node.children[dirName], childPath, depth + 1));
+                l.push("</div>");
+            }
+            for (const file of files) {
+                const icon = FileTree._getFileIcon(file.name), badges = [];
+                file.exports > 0 && badges.push(`${file.exports}f`);
+                file.classes > 0 && badges.push(`${file.classes}c`);
+                const badgeHtml = badges.length > 0 ? `<span class="pg-badge">${badges.join(" ")}</span>` : "";
+                const nonSourceClass = file.nonSource ? " pg-non-source" : "";
+                l.push(`<div class="pg-tree-file${nonSourceClass}" data-file="${file.f}" style="padding-left:${pad + 24}px"><span class="material-symbols-outlined" style="font-size:14px">${icon}</span> ${file.name}${badgeHtml}</div>`);
+            }
+            return l.join("");
+        };
+        this.$.treeHTML = renderNode(root, "", 0);
+    }
+    static _getFileIcon(e) {
+        return e.endsWith(".html") ? "html" : e.endsWith(".css") || e.endsWith(".css.js") ? "css" : e.endsWith(".tpl.js") ? "web" : e.endsWith(".json") ? "data_object" : e.endsWith(".md") ? "description" : e.endsWith(".svg") || e.endsWith(".png") || e.endsWith(".jpg") ? "image" : e.endsWith(".woff2") || e.endsWith(".ttf") ? "font_download" : "insert_drive_file";
+    }
+    _applyFilter() {
+        const e = this.$.filterText;
+        let changed = !1;
+        this.querySelectorAll(".pg-tree-file").forEach(t => {
+            const match = !e || t.dataset.file.toLowerCase().includes(e);
+            if (t.hidden = !match, e && match) {
+                // Expand all ancestor dirs
+                const parts = t.dataset.file.split("/");
+                parts.pop();
+                for (let i = 1; i <= parts.length; i++) {
+                    const dir = parts.slice(0, i).join("/");
+                    this._expandedDirs.has(dir) || (this._expandedDirs.add(dir), changed = !0, this._updateDirDOM(dir));
+                }
+            }
+        }), changed && this._saveExpandedState(), e ? this.querySelectorAll(".pg-tree-dir").forEach(dirEl => {
+            const dir = dirEl.dataset.dir;
+            const childrenEl = this.querySelector(`.pg-tree-children[data-dir="${CSS.escape(dir)}"]`);
+            if (!childrenEl) return;
+            let hasVisible = !1;
+            childrenEl.querySelectorAll(".pg-tree-file").forEach(f => { f.hidden || (hasVisible = !0); });
+            childrenEl.querySelectorAll(".pg-tree-children").forEach(c => { c.querySelector(".pg-tree-file:not([hidden])") && (hasVisible = !0); });
+            dirEl.hidden = !hasVisible;
+        }) : this.querySelectorAll(".pg-tree-dir").forEach(dirEl => {
+            dirEl.hidden = !1;
+        });
+    }
+}
+
+FileTree.template = '\n  <div class="pg-panel-toolbar">\n    <input type="search" placeholder="Filter files..." bind="oninput: onFilterInput">\n    <button class="pg-collapse-all" bind="onclick: onCollapseAll" title="Collapse All Folders">\n      <span class="material-symbols-outlined" style="font-size:14px">unfold_less</span>\n    </button>\n  </div>\n  <div class="pg-tree-content" bind="innerHTML: treeHTML"></div>\n', 
+FileTree.rootStyles = "\n  pg-file-tree {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n    font-size: 12px;\n    font-family: var(--sn-font, Georgia, serif);\n  }\n  pg-file-tree .pg-panel-toolbar {\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    display: flex;\n    gap: 6px;\n  }\n  pg-file-tree .pg-panel-toolbar input {\n    flex: 1;\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-family: inherit;\n    outline: none;\n    min-width: 0;\n  }\n  pg-file-tree .pg-panel-toolbar input:focus {\n    border-color: var(--sn-node-selected, hsl(210, 55%, 42%));\n  }\n  pg-file-tree .pg-collapse-all {\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n    border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n    transition: all 100ms ease;\n  }\n  pg-file-tree .pg-collapse-all:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n  }\n  pg-file-tree .pg-tree-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n  }\n  pg-file-tree .pg-tree-dir {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 6px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    font-weight: 600;\n    font-size: 11px;\n    cursor: pointer;\n    user-select: none;\n  }\n  pg-file-tree .pg-tree-dir:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    border-radius: 4px;\n  }\n  pg-file-tree .pg-tree-dir .pg-chevron {\n    transition: transform 150ms ease;\n  }\n  pg-file-tree .pg-tree-children[hidden] {\n    display: none;\n  }\n  pg-file-tree .pg-tree-file {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 6px 3px 24px;\n    cursor: pointer;\n    border-radius: 4px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    transition: all 100ms ease;\n  }\n  pg-file-tree .pg-tree-file:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n  }\n  pg-file-tree .pg-tree-file.active {\n    background: hsla(210, 45%, 45%, 0.12);\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n  }\n  pg-file-tree .pg-tree-file[hidden] {\n    display: none;\n  }\n  pg-file-tree .pg-tree-file.pg-non-source {\n    opacity: 0.6;\n  }\n  pg-file-tree .pg-badge {\n    margin-left: auto;\n    font-size: 10px;\n    padding: 0 5px;\n    border-radius: 8px;\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n  }\n", 
+FileTree.reg("pg-file-tree");

package/web/panels/health-panel.js

@@ -0,0 +1,3 @@
+import e from"@symbiotejs/symbiote";import{api as t,state as n,events as s}from"../app.js";
+export class HealthPanel extends e{init$={contentHTML:'<div class="pg-placeholder">Loading health analysis...</div>',loaded:!1};initCallback(){s.addEventListener("skeleton-loaded",()=>this._loadHealth()),setTimeout(()=>this._loadHealth(),500)}async _loadHealth(){if(!this.$.loaded){this.$.contentHTML='<div class="pg-placeholder pg-pulse">Analyzing project health...</div>';try{const e=await t("/api/analysis-summary");this.$.loaded=!0;
+const s=e.healthScore??e.score??"?",a=s>=80?"good":s>=50?"warning":"critical",i=e.grade||(s>=80?"healthy":s>=50?"needs work":"critical"),l=n.skeleton?.s||{},o=l.files||Object.keys(n.skeleton?.X||{}).length||"—",r=l.functions||0,c=l.classes||0,p=Object.values(n.skeleton?.X||{}).reduce((e,t)=>e+t.length,0);this.$.contentHTML=`\n        <div class="pg-health-grid">\n          <div class="pg-health-card pg-health-score-card">\n            <div class="pg-health-score ${a}">${s}</div>\n            <div class="pg-health-score-label">Health Score · ${i}</div>\n          </div>\n          <div class="pg-health-card">\n            <div class="pg-health-card-title">\n              <span class="material-symbols-outlined" style="font-size:16px">code</span>\n              Code\n            </div>\n            ${this._metric("Source files",o)}\n            ${this._metric("Functions",r)}\n            ${this._metric("Classes",c)}\n            ${this._metric("Exports",p)}\n          </div>\n          <div class="pg-health-card">\n            <div class="pg-health-card-title">\n              <span class="material-symbols-outlined" style="font-size:16px">bug_report</span>\n              Issues\n            </div>\n            ${this._metric("Complexity",e.complexity||0,e.complexity>200)}\n            ${this._metric("JSDoc issues",e.jsdocIssues||0,e.jsdocIssues>10)}\n            ${this._metric("Undocumented",e.undocumented||0,e.undocumented>5)}\n          </div>\n          <div class="pg-health-card">\n            <div class="pg-health-card-title">\n              <span class="material-symbols-outlined" style="font-size:16px">speed</span>\n              Cache Performance\n            </div>\n            ${this._metric("Cache hits",e.cache?.hits??"—")}\n            ${this._metric("Cache misses",e.cache?.misses??"—")}\n            ${this._metric("Hit rate",e.cache?Math.round(e.cache.hits/(e.cache.hits+e.cache.misses)*100)+"%":"—")}\n          </div>\n        </div>\n        ${e.note?`<div class="pg-health-note"><span class="material-symbols-outlined" style="font-size:14px">info</span> ${e.note}</div>`:""}\n      `}catch(e){this.$.contentHTML=`<div class="pg-placeholder" style="color:var(--sn-danger-color)">Error: ${e.message}</div>`}}}_metric(e,t,n=!1){return`<div class="pg-metric${n?" pg-metric-warn":""}"><span>${e}</span><span class="pg-metric-val">${t}</span></div>`}}HealthPanel.template='<div bind="innerHTML: contentHTML"></div>',HealthPanel.rootStyles="\n  pg-health-panel { display:block; height:100%; overflow-y:auto; padding:16px; font-family:var(--sn-font, Georgia, serif); }\n  .pg-health-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; align-content:start; }\n  .pg-health-card {\n    background: var(--sn-node-bg);\n    border: 1px solid var(--sn-node-border);\n    border-radius: 8px;\n    padding: 14px;\n  }\n  .pg-health-score-card { text-align:center; grid-column:1/-1; padding:20px; }\n  .pg-health-score { font-size:56px; font-weight:800; font-family:monospace; }\n  .pg-health-score.good { color: var(--sn-success-color, hsl(150, 55%, 38%)); }\n  .pg-health-score.warning { color: var(--sn-warning-color, hsl(38, 55%, 42%)); }\n  .pg-health-score.critical { color: var(--sn-danger-color, hsl(4, 55%, 48%)); }\n  .pg-health-score-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--sn-text-dim); margin-top:4px; }\n  .pg-health-card-title {\n    display: flex; align-items: center; gap: 6px;\n    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;\n    color:var(--sn-text-dim); margin-bottom:8px;\n  }\n  .pg-metric { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--sn-node-hover); font-size:12px; color:var(--sn-text); }\n  .pg-metric:last-child { border:none; }\n  .pg-metric-val { font-weight:600; font-family:monospace; }\n  .pg-metric-warn .pg-metric-val { color:var(--sn-warning-color); }\n  .pg-health-note {\n    display: flex; align-items: center; gap: 6px;\n    margin-top: 12px; padding: 10px 12px;\n    font-size: 11px; color: var(--sn-text-dim);\n    background: var(--sn-node-bg);\n    border: 1px solid var(--sn-node-border);\n    border-radius: 6px;\n  }\n  .pg-placeholder { color:var(--sn-text-dim); text-align:center; padding:40px; font-style:italic; font-size:13px; }\n  .pg-pulse { animation:pulse 1.5s ease infinite; }\n  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }\n",HealthPanel.reg("pg-health-panel");

package/web/panels/live-monitor.js

@@ -0,0 +1,3 @@
+import n from"@symbiotejs/symbiote";import{events as o}from"../app.js";
+export class LiveMonitor extends n{init$={eventsHTML:'<div class="pg-placeholder">Waiting for tool calls...</div>',eventCount:"0"};_events=[];initCallback(){o.addEventListener("tool-event",n=>this._addEvent(n.detail))}_addEvent(n){this._events.unshift(n),this._events.length>200&&this._events.pop(),this.$.eventCount=String(this._events.length);
+const o=this._events.slice(0,100).map(n=>{if("tool_call"===n.type){const o=JSON.stringify(n.args||{}).slice(0,80);return`<div class="pg-mon-event pg-mon-call">\n          <span class="pg-mon-arrow">→</span>\n          <span class="pg-mon-tool">${n.tool}</span>\n          <span class="pg-mon-args">${this._esc(o)}</span>\n          <span class="pg-mon-time">${this._formatTime(n.ts)}</span>\n        </div>`}return`<div class="pg-mon-event pg-mon-result ${n.success?"pg-mon-ok":"pg-mon-err"}">\n          <span class="pg-mon-arrow">←</span>\n          <span class="pg-mon-tool">${n.tool}</span>\n          <span class="pg-mon-duration">${n.duration_ms}ms</span>\n          <span class="pg-mon-time">${this._formatTime(n.ts)}</span>\n        </div>`}).join("");this.$.eventsHTML=o||'<div class="pg-placeholder">Waiting for tool calls...</div>'}_esc(n){return n.replace(/</g,"&lt;").replace(/>/g,"&gt;")}_formatTime(n){return n?new Date(n).toLocaleTimeString("en",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"}):""}}LiveMonitor.template='\n  <div class="pg-mon-header">\n    <span>Events: </span><span bind="textContent: eventCount"></span>\n  </div>\n  <div class="pg-mon-body" bind="innerHTML: eventsHTML"></div>\n',LiveMonitor.rootStyles="\n  pg-live-monitor { display:flex; flex-direction:column; height:100%; overflow:hidden; font-size:12px; font-family:var(--sn-font, Georgia, serif); }\n  .pg-mon-header { padding:6px 12px; border-bottom:1px solid var(--sn-node-border); background:var(--sn-node-header-bg); font-size:11px; color:var(--sn-text-dim); }\n  .pg-mon-body { flex:1; overflow-y:auto; padding:4px; }\n  .pg-mon-event {\n    display:flex; align-items:center; gap:8px;\n    padding:4px 8px; border-radius:4px; font-family:monospace; font-size:11px;\n    animation: slideIn 0.15s ease;\n  }\n  .pg-mon-event:hover { background:var(--sn-node-hover); }\n  .pg-mon-arrow { font-weight:bold; width:14px; }\n  .pg-mon-call .pg-mon-arrow { color: var(--sn-cat-server, hsl(210, 45%, 45%)); }\n  .pg-mon-ok .pg-mon-arrow { color: var(--sn-success-color, hsl(150, 55%, 38%)); }\n  .pg-mon-err .pg-mon-arrow { color: var(--sn-danger-color, hsl(4, 55%, 48%)); }\n  .pg-mon-tool { color:var(--sn-text); font-weight:600; min-width:100px; }\n  .pg-mon-args { color:var(--sn-text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n  .pg-mon-duration { color: hsl(250, 35%, 50%); min-width:50px; text-align:right; }\n  .pg-mon-time { color:var(--sn-text-dim); font-size:10px; min-width:60px; text-align:right; }\n  .pg-placeholder { color:var(--sn-text-dim); text-align:center; padding:30px; font-style:italic; }\n  @keyframes slideIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }\n",LiveMonitor.reg("pg-live-monitor");

package/web/state.js

@@ -0,0 +1,17 @@
+// @ctx .context/web/state.ctx
+const e=new URL(".",import.meta.url).href;
+export const state={project:null,skeleton:null,events:[],connected:!1};
+const t=new Map;
+export function subscribe(e,n){return t.has(e)||t.set(e,new Set),t.get(e).add(n),()=>t.get(e)?.delete(n)}const n=new Set;
+export function onEvent(e){return n.add(e),()=>n.delete(e)}
+function o(e,n){t.get(e)?.forEach(t=>t(n,e));
+const r=e.indexOf(".");if(r>0){const n=e.slice(0,r);t.get(n)?.forEach(e=>e(state[n],n))}t.get("*")?.forEach(t=>t(n,e))}let r=1;
+const c=new Map;
+export function call(e,t={}){return new Promise((n,a)=>{if(!s||s.readyState!==WebSocket.OPEN)return void a(new Error("WebSocket not connected"));
+const d=r++;c.set(d,{resolve:n,reject:a}),s.send(JSON.stringify({jsonrpc:"2.0",id:d,method:"tool",params:{name:e,args:t}})),setTimeout(()=>{c.has(d)&&(c.delete(d),a(new Error(`Tool call timeout: ${e}`)))},3e4)})}let s=null,a=null;function l(e){Object.assign(state,e),state.connected=!0,o("*",state);for(const t of Object.keys(e))o(t,e[t])}
+function i(e,t){const n=e.split(".");
+let r=state;for(let e=0;e<n.length-1;e++)r[n[e]]||(r[n[e]]={}),r=r[n[e]];r[n[n.length-1]]=t,o(e,t)}
+function u(e){let t;try{t=JSON.parse(e)}catch{return}if(t.id&&(void 0!==t.result||t.error)){const e=c.get(t.id);return void(e&&(c.delete(t.id),t.error?e.reject(new Error(t.error.message||"Tool error")):e.resolve(t.result)))}"snapshot"!==t.method?"patch"!==t.method?"event"!==t.method?t.type&&n.forEach(e=>e(t)):n.forEach(e=>e(t.params)):i(t.params.path,t.params.value):l(t.params.state)}
+export function connect(){if(s)return;
+const t=e.replace(/^http/,"ws");s=new WebSocket(`${t}ws/monitor`),s.onopen=()=>{state.connected=!0,o("connected",!0),a&&(clearTimeout(a),a=null)},s.onmessage=e=>u(e.data),s.onclose=()=>{state.connected=!1,s=null,o("connected",!1);for(const[e,{reject:t}]of c)t(new Error("WebSocket disconnected"));c.clear(),a=setTimeout(connect,3e3)},s.onerror=()=>{}}
+export function disconnect(){a&&(clearTimeout(a),a=null),s&&(s.close(),s=null)}

package/web/style.css

@@ -0,0 +1,157 @@
+/* Project Graph Web UI — Carbon Theme Styles */
+
+/* 
+ * Design tokens come from symbiote-node CARBON theme via applyTheme().
+ * Layout tokens (--bg-*, --text-*) are bridged from --sn-* tokens automatically.
+ * Layout structure mirrors admin-panel: topbar + sidebar + content.
+ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  background: var(--sn-bg, #1a1a1a);
+  color: var(--sn-text, #f0f0f0);
+  font-family: var(--sn-font, 'Inter', -apple-system, sans-serif);
+  font-size: 13px;
+  line-height: 1.5;
+  overflow: hidden;
+}
+
+/* === App shell — full viewport flex column === */
+.app-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* === Topbar === */
+.app-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 40px;
+  background: var(--sn-node-bg, #222222);
+  border-bottom: 1px solid var(--sn-node-border, rgba(255, 255, 255, 0.1));
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--sn-text, #f0f0f0);
+  letter-spacing: 0.5px;
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+
+
+.project-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--project-accent, var(--sn-text, #f0f0f0));
+}
+
+.project-files {
+  font-size: 11px;
+  color: var(--sn-text-dim, #999999);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.compression-stats {
+  font-size: 10px;
+  font-weight: 500;
+  color: #64b5f6;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(100, 181, 246, 0.1);
+  border: 1px solid rgba(100, 181, 246, 0.15);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.topbar-sep {
+  color: var(--sn-text-dim, #555);
+  font-size: 14px;
+}
+
+/* Agent badge */
+.agent-badge {
+  font-size: 11px;
+  font-weight: 500;
+  color: #4caf50;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(76, 175, 80, 0.1);
+  border: 1px solid rgba(76, 175, 80, 0.2);
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 4px rgba(76, 175, 80, 0.1); }
+  50% { box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); }
+}
+
+/* Status indicator */
+.status {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sn-text-dim, #999);
+}
+
+.status.connected {
+  background: #4caf50;
+  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
+}
+
+.status.disconnected {
+  background: #f44336;
+}
+
+/* === Workspace: sidebar + content area === */
+.app-workspace {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+}
+
+.app-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.app-content > panel-layout {
+  width: 100%;
+  height: 100%;
+}
+
+/* === Scrollbar — carbon grey === */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}