project-graph-mcp 2.2.4 → 2.3.0

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

@@ -0,0 +1,32 @@
+import Symbiote from "@symbiotejs/symbiote";
+
+export class CodeWidget extends Symbiote {
+  init$ = {
+    '@source': '',
+    truncatedSource: '',
+    expanded: false,
+    hasMore: false
+  };
+
+  renderCallback() {
+    this.sub('@source', (src) => {
+      if (!src) return;
+      const lines = src.split('\n');
+      if (lines.length > 10) {
+        this.$.hasMore = true;
+        this.$.truncatedSource = lines.slice(0, 10).join('\n') + '\n...';
+      } else {
+        this.$.hasMore = false;
+        this.$.truncatedSource = src;
+      }
+    });
+  }
+}
+
+CodeWidget.template = `
+<div class="code-widget">
+  <pre class="code-block" ${{ textContent: 'truncatedSource' }}></pre>
+</div>
+`;
+
+CodeWidget.reg('pg-code-widget');

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

@@ -0,0 +1,97 @@
+import Symbiote from "@symbiotejs/symbiote";
+
+export class EventWidget extends Symbiote {
+  init$ = {
+    '@eventData': null,
+    isCall: true,
+    tool: '',
+    argsJSON: '',
+    timeStr: '',
+    duration: '',
+    success: true,
+    widgetHTML: '',
+  };
+
+  renderCallback() {
+    this.sub('@eventData', (evStr) => {
+      if (!evStr) return;
+      let ev;
+      try {
+        ev = JSON.parse(evStr);
+      } catch {
+        return;
+      }
+
+      this.$.isCall = ev.type === 'tool_call';
+      this.$.tool = ev.tool;
+      this.$.timeStr = this._formatTime(ev.ts);
+      
+      if (this.$.isCall) {
+        this.$.argsJSON = JSON.stringify(ev.args || {});
+      } else {
+        this.$.duration = `${ev.duration_ms}ms`;
+        this.$.success = ev.success !== false;
+      }
+
+      this._renderWidget(ev);
+    });
+  }
+
+  _renderWidget(ev) {
+    if (ev.type === 'tool_call') {
+      this.$.widgetHTML = ''; 
+      return;
+    }
+
+    const { tool, output, success } = ev;
+    if (!success || !output) {
+      this.$.widgetHTML = `<div class="error-msg">${this._esc(output || 'Error')}</div>`;
+      return;
+    }
+
+    let data;
+    try {
+      data = JSON.parse(output);
+    } catch {
+      data = output;
+    }
+
+    if (tool === 'default_api:view_file' || tool === 'default_api:replace_file_content' || tool === 'default_api:multi_replace_file_content' || tool === 'default_api:write_to_file') {
+       this.$.widgetHTML = `<pg-code-widget source='${this._esc(output)}'></pg-code-widget>`;
+    } else if (tool === 'default_api:mcp_project-graph_navigate' || tool === 'default_api:mcp_project-graph_get_skeleton') {
+       this.$.widgetHTML = `<pg-mini-graph data='${this._esc(JSON.stringify(data))}'></pg-mini-graph>`;
+    } else if (tool === 'default_api:list_dir' || tool === 'default_api:grep_search') {
+       this.$.widgetHTML = `<pg-list-widget data='${this._esc(output)}'></pg-list-widget>`;
+    } else {
+       this.$.widgetHTML = `<pre class="raw-output">${this._esc(output).substring(0, 500)}${output.length > 500 ? '...' : ''}</pre>`;
+    }
+  }
+
+  _esc(s) {
+    if (typeof s !== 'string') return '';
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+  }
+
+  _formatTime(ts) {
+    return ts ? new Date(ts).toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '';
+  }
+}
+
+EventWidget.template = `
+<div class="pg-mon-event" \${{ 'data-is-call': 'isCall' }}>
+  <div class="event-header">
+    <span class="pg-mon-arrow" \${{ textContent: 'isCall ? "→" : "←"' }}></span>
+    <span class="pg-mon-tool" \${{ textContent: 'tool' }}></span>
+    <span class="pg-mon-time" \${{ textContent: 'timeStr' }}></span>
+    <span class="pg-mon-duration" \${{ textContent: 'duration' }}></span>
+  </div>
+  <div class="event-body" \${{ hidden: '!isCall' }}>
+    <span class="pg-mon-args" \${{ textContent: 'argsJSON' }}></span>
+  </div>
+  <div class="event-body result-body" \${{ hidden: 'isCall' }}>
+    <div bind="innerHTML: widgetHTML"></div>
+  </div>
+</div>
+`;
+
+EventWidget.reg('pg-event-widget');

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

@@ -0,0 +1,57 @@
+import Symbiote from "@symbiotejs/symbiote";
+
+export class ListWidget extends Symbiote {
+  init$ = {
+    '@data': '',
+    listHTML: ''
+  };
+
+  renderCallback() {
+    this.sub('@data', (dataStr) => {
+      if (!dataStr) return;
+      
+      let items = [];
+      try {
+        const parsed = JSON.parse(dataStr);
+        if (Array.isArray(parsed)) items = parsed;
+        else if (typeof parsed === 'object') items = Object.entries(parsed).map(([k, v]) => `${k}: ${v}`);
+      } catch {
+        // If not JSON, split by lines
+        items = dataStr.split('\n').filter(Boolean);
+      }
+
+      if (items.length === 0) {
+        this.$.listHTML = '<div class="pg-placeholder">Empty list</div>';
+        return;
+      }
+
+      // Truncate to 50 items
+      const hasMore = items.length > 50;
+      const displayItems = items.slice(0, 50);
+
+      let html = '<ul class="list-widget-ul">';
+      displayItems.forEach(item => {
+        let text = typeof item === 'string' ? item : JSON.stringify(item);
+        html += `<li>${this._esc(text)}</li>`;
+      });
+      html += '</ul>';
+
+      if (hasMore) {
+        html += `<div class="list-widget-more">...and ${items.length - 50} more items</div>`;
+      }
+
+      this.$.listHTML = html;
+    });
+  }
+
+  _esc(s) {
+    if (typeof s !== 'string') return '';
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+  }
+}
+
+ListWidget.template = `
+<div class="list-widget" bind="innerHTML: listHTML"></div>
+`;
+
+ListWidget.reg('pg-list-widget');

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

@@ -0,0 +1,69 @@
+import Symbiote from "@symbiotejs/symbiote";
+
+export class MiniGraphWidget extends Symbiote {
+  init$ = {
+    '@data': '',
+    svgContent: ''
+  };
+
+  renderCallback() {
+    this.sub('@data', (dataStr) => {
+      if (!dataStr) return;
+      let data;
+      try {
+        data = JSON.parse(dataStr);
+      } catch {
+        return;
+      }
+      this._renderSVG(data);
+    });
+  }
+
+  _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 || [];
+
+    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;
+
+    let svg = '';
+    
+    // Draw links
+    // (Needs actual layout logic, this is a placeholder circle layout)
+    
+    // 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>`;
+      svg += `<text x="${x + 6}" y="${y + 3}" fill="var(--sn-text)" font-size="10">${this._esc(n.id || n.name || 'node')}</text>`;
+    });
+
+    this.$.svgContent = svg;
+  }
+
+  _esc(s) {
+    if (typeof s !== 'string') return '';
+    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+  }
+}
+
+MiniGraphWidget.template = `
+<div class="mini-graph-widget">
+  <svg width="100%" height="150" viewBox="0 0 300 150" bind="innerHTML: svgContent"></svg>
+</div>
+`;
+
+MiniGraphWidget.reg('pg-mini-graph');

package/web/dashboard.js

@@ -1,5 +1,5 @@
 // @ctx .context/web/dashboard.ctx
-import{Layout as e,LayoutTree as t,applyTheme as o}from"symbiote-node";import{CARBON as r}from"./vendor/symbiote-node/themes/carbon.js";import"./panels/ProjectList/ProjectList.js";import"./panels/ActionBoard/ActionBoard.js";import"./panels/SettingsPanel/SettingsPanel.js";import{state as a,events as n,emit as s}from"./dashboard-state.js";async function c(){const e=await fetch("/api/gateway-info");if(!e.ok){const t=await e.text();throw console.error("[dashboard] fetchGatewayInfo failed:",e.status,t),new Error(`Gateway info failed: ${e.status}`)}return e.json()}
+import{Layout as e,LayoutTree as t,applyTheme as o,CARBON as r}from"symbiote-node";import"./panels/ProjectList/ProjectList.js";import"./panels/ActionBoard/ActionBoard.js";import"./panels/SettingsPanel/SettingsPanel.js";import{state as a,events as n,emit as s}from"./dashboard-state.js";async function c(){const e=await fetch("/api/gateway-info");if(!e.ok){const t=await e.text();throw console.error("[dashboard] fetchGatewayInfo failed:",e.status,t),new Error(`Gateway info failed: ${e.status}`)}return e.json()}
 function p(e){if(!e.length)return void console.warn("[dashboard] No projects to connect WebSockets for");
 const t="https:"===location.protocol?"wss://":"ws://",o=location.host;for(const r of e)i(r,t,o)}
 function i(e,t,o,_att=0){const r=`${t}${o}${e.prefix}/ws/monitor`,n=new WebSocket(r);n.onopen=()=>{_att=0;console.log("[dashboard] WS connected:",e.projectName)},n.onmessage=t=>{let o;try{o=JSON.parse(t.data)}catch{return}if("snapshot"===o.method&&o.params?.state){const t=o.params.state,r=a.projects.find(t=>t.prefix===e.prefix);return void(r&&t.project&&(Object.assign(r,{projectName:t.project.name,projectPath:t.project.path,color:t.project.color,agents:t.project.agents,pid:t.project.pid,connected:!0}),s("projects-updated",a.projects)))}if("patch"===o.method&&o.params){const t=a.projects.find(t=>t.prefix===e.prefix);return void(t&&"project.agents"===o.params.path&&(t.agents=o.params.value,s("projects-updated",a.projects)))}if("event"===o.method&&o.params){const t=o.params;return t._projectPrefix=e.prefix,t._projectName=e.projectName,a.events.push(t),a.events.length>1e3&&a.events.shift(),void s("global-tool-event",t)}o.type&&(o._projectPrefix=e.prefix,o._projectName=e.projectName,a.events.push(o),a.events.length>1e3&&a.events.shift(),s("global-tool-event",o))},n.onerror=()=>{console.error("[dashboard] WS error:",e.projectName)},n.onclose=r=>{console.warn("[dashboard] WS closed:",e.projectName,r.code);

package/web/index.html

@@ -22,6 +22,10 @@
 <span id="compression-stats" class="compression-stats" style="display:none"></span>
 </div>
 <div class="topbar-right">
+<button id="follow-btn" class="follow-btn" title="Follow mode: UI follows agent actions">
+<span class="material-symbols-outlined">smart_toy</span>
+FOLLOW
+</button>
 <span id="agent-badge" class="agent-badge" style="display:none"></span>
 <span id="status-indicator" class="status connected"></span>
 </div>

package/web/panels/ActionBoard/ActionBoard.js

@@ -1,5 +1,5 @@
 // @ctx .context/web/panels/ActionBoard/ActionBoard.ctx
 import t from"@symbiotejs/symbiote";import{state as e,events as o}from"../../dashboard-state.js";import s from"./ActionBoard.css.js";import n from"./ActionBoard.tpl.js";
 import"../EventItem/EventItem.js";
-export class ActionBoard extends t{init$={eventsItems:[]};initCallback(){console.log("[ActionBoard] initCallback, existing events:",e.events.length),o.addEventListener("global-tool-event",t=>{const o=[...e.events].reverse();console.log("[ActionBoard] global-tool-event received, total:",o.length,"latest:",t.detail?.type,t.detail?.tool),this.$.eventsItems=o}),this.$.eventsItems=[...e.events].reverse()}}
+export class ActionBoard extends t{init$={eventsItems:[]};initCallback(){o.addEventListener("global-tool-event",t=>{const o=[...e.events].reverse();this.$.eventsItems=o}),this.$.eventsItems=[...e.events].reverse()}}
 ActionBoard.template=n,ActionBoard.rootStyles=s,ActionBoard.reg("pg-action-board");

package/web/panels/SettingsPanel/SettingsPanel.tpl.js

@@ -1,2 +1,2 @@
 // @ctx .context/web/panels/SettingsPanel/SettingsPanel.tpl.ctx
-export default'\n<div class="pg-stg-title">Backend</div>\n<div class="pg-stg-card" ref="backendCard"></div>\n\n<div class="pg-stg-title">Active Instances</div>\n<div ref="instanceList"></div>\n\n<div class="pg-stg-title">Server Lifecycle</div>\n<div class="pg-stg-card" ref="lifecycleCard">\n  <div class="pg-stg-metric"><span>Auto-shutdown</span><span class="pg-stg-val" ref="shutdownTimer">—</span></div>\n  <div class="pg-stg-metric"><span>Uptime</span><span class="pg-stg-val" ref="uptimeVal">—</span></div>\n</div>\n\n<div class="pg-stg-title">Actions</div>\n<div style="display:flex;gap:8px">\n<button class="pg-stg-btn" ref="refreshBtn">↻ Refresh</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="restartBtn">⟳ Restart</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="stopBtn">⏹ Stop</button>\n</div>\n<div ref="restartStatus" style="margin-top:8px;font-size:11px;color:var(--sn-text-dim)"></div>\n';
+export default'\n<div class="pg-stg-title">Actions</div>\n<div style="display:flex;gap:8px;margin-bottom:16px">\n<button class="pg-stg-btn" ref="refreshBtn">↻ Refresh</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="restartBtn">⟳ Restart</button>\n<button class="pg-stg-btn pg-stg-btn-danger" ref="stopBtn">⏹ Stop</button>\n</div>\n<div ref="restartStatus" style="margin-bottom:16px;font-size:11px;color:var(--sn-text-dim)"></div>\n\n<div class="pg-stg-title">Backend</div>\n<div class="pg-stg-card" ref="backendCard"></div>\n\n<div class="pg-stg-title">Active Instances</div>\n<div ref="instanceList"></div>\n\n<div class="pg-stg-title">Server Lifecycle</div>\n<div class="pg-stg-card" ref="lifecycleCard">\n  <div class="pg-stg-metric"><span>Auto-shutdown</span><span class="pg-stg-val" ref="shutdownTimer">—</span></div>\n  <div class="pg-stg-metric"><span>Uptime</span><span class="pg-stg-val" ref="uptimeVal">—</span></div>\n</div>\n';

package/web/panels/code-viewer.js

@@ -16,7 +16,10 @@ function _getLang(path){if(!path)return'js';const i=path.lastIndexOf('.');if(i<0
 //   Toggle button label: "EXPAND" — beautifies via Terser + injects JSDoc from .ctx.
 //   _isReadable = false (compression saves <15% — already compact)
 
-export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,viewMode:"source",modeLabel:"source",statsText:"",showToggle:!1,toggleLabel:"",onToggleMode:()=>{
+export class CodeViewer extends e{init$={filename:"Select a file",hasFile:!1,viewMode:"source",modeLabel:"source",statsText:"",showToggle:!1,toggleLabel:"",onShowInGraph:()=>{
+  if(!this._currentPath)return;
+  window.location.hash = `#graph?focus=${encodeURIComponent(this._currentPath)}`;
+},onToggleMode:()=>{
   const lang=_getLang(this._currentPath);
   if(lang==='md'){
     this.$.viewMode=this.$.viewMode==="rendered"?"raw":"rendered";
@@ -26,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))}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));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'){
@@ -50,28 +53,36 @@ if(lang==='md'){
 e.$.lang=lang;
 if("transformed"===this.$.viewMode){
   // Show cached transform if available
-  if(this._transformCache){e.$.code=this._transformCache;return}
+  if(this._transformCache){
+    e.$.code=this._transformCache;
+    if(this._transformStatsText) this.$.statsText=this._transformStatsText;
+    return;
+  }
   if(this._loadingTransform)return;
   this._loadingTransform=!0;
   e.$.code=this._isReadable?"// Compressing...":"// Expanding...";
   try{
-    if(this._isReadable){
-      // MODE A: readable source → compress
-      const t=await n("/api/compact-file",{path:this._currentPath});
-      this._transformCache=t?.code||"// Compression unavailable";
-    }else{
-      // MODE B: compact source → expand (beautify + inject JSDoc from .ctx)
-      const t=await n("/api/expand-file",{path:this._currentPath});
-      this._transformCache=t?.code||"// Expand unavailable";
-    }
+      if(this._isReadable){
+        // MODE A: readable source → compress
+        const t=await n("/api/compact-file",{path:this._currentPath});
+        this._transformCache=t?.code||"// Compression unavailable";
+        this._transformStatsText=t?`Compressed: ${(t.compressed/1000).toFixed(1)}K chars (${t.savings})`:"";
+      }else{
+        // MODE B: compact source → expand (beautify + inject JSDoc from .ctx)
+        const t=await n("/api/expand-file",{path:this._currentPath});
+        this._transformCache=t?.code||"// Expand unavailable";
+        this._transformStatsText=t?`Expanded: ${(t.decompiled/1000).toFixed(1)}K chars | JSDocs injected: ${t.injected||0}`:"";
+      }
+      if(this._transformStatsText)this.$.statsText=this._transformStatsText;
     e.$.code=this._transformCache;
   }catch{e.$.code=this._isReadable?"// Compression failed":"// Expand failed"}
   finally{this._loadingTransform=!1}
   return;
 }
 // Source mode — raw file as-is
+this.$.statsText=this._baseStatsText;
 e.$.code=this._fileData.raw;
-}async _loadFile(e){this.$.filename=e,this.$.hasFile=!1,this._fileData=null,this.$.statsText="",this._transformCache=null,this._currentPath=e;
+}async _loadFile(e){this.$.filename=e,this.$.hasFile=!1,this._fileData=null,this.$.statsText="",this._baseStatsText="",this._transformStatsText="",this._transformCache=null,this._currentPath=e;
 const lang=_getLang(e);
 if(lang==='image'){
   const i=this._getCodeBlock();
@@ -97,7 +108,10 @@ let s=_raw?.content||o;
 // If no .ctx, source is readable → COMPACT available
 const hasCtx=!!(t.ctxTok&&t.ctxTok>0);
 this._isReadable=!hasCtx;
-this._fileData={compact:o,raw:s,codeTok:t.codeTok||0,ctxTok:t.ctxTok||0,totalTok:t.totalTok||0,expanded:t.expanded||0,savings:t.savings||"0%"},t.codeTok&&t.expanded&&(this.$.statsText=formatStats(t));const i=this._getCodeBlock();
+this._fileData={compact:o,raw:s,codeTok:t.codeTok||0,ctxTok:t.ctxTok||0,totalTok:t.totalTok||0,expanded:t.expanded||0,savings:t.savings||"0%"};
+this._baseStatsText=t.codeTok&&t.expanded?formatStats(t):"";
+this.$.statsText=this._baseStatsText;
+const i=this._getCodeBlock();
 if(lang==='md'){
   this.$.viewMode="rendered";
   this.$.modeLabel="rendered";
@@ -114,4 +128,25 @@ if(lang==='md'){
   this.$.toggleLabel=this._isReadable?"compact":"expand";
   i&&(i.$.code=s);
 }
-this.$.hasFile=!0}catch(e){const n=this._getCodeBlock();n&&(n.$.lang='plain',n.$.code=`// Error: ${e.message}`),this.$.showToggle=!1,this.$.hasFile=!0}}}CodeViewer.template='\n  <div class="pg-code-header">\n    <span class="pg-code-filename" bind="textContent: filename"></span>\n    <div class="pg-code-controls">\n      <span class="pg-code-stats" bind="textContent: statsText"></span>\n      <button class="pg-mode-toggle" bind="onclick: onToggleMode; hidden: !showToggle" title="Toggle view mode">\n        <span class="material-symbols-outlined" style="font-size:14px">compress</span>\n        <span class="pg-mode-label" bind="textContent: modeLabel"></span>\n      </button>\n    </div>\n  </div>\n  <code-block></code-block>\n',CodeViewer.rootStyles="\n  pg-code-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n  pg-code-viewer:not([has-file]) code-block {\n    display: none;\n  }\n  .pg-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 11px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    border-bottom: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    background: var(--sn-node-header-bg, hsl(37, 25%, 93%));\n    gap: 8px;\n  }\n  .pg-code-filename {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n  }\n  .pg-code-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n  .pg-code-stats {\n    font-size: 10px;\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    white-space: nowrap;\n  }\n  .pg-mode-toggle {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    padding: 2px 8px;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    border-radius: 4px;\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    font-family: inherit;\n    font-size: 10px;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: all 120ms ease;\n  }\n  .pg-mode-toggle:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n  }\n  pg-code-viewer[mode-raw] .pg-mode-toggle {\n    background: hsla(210, 45%, 45%, 0.12);\n    border-color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n  }\n  .pg-mode-toggle[hidden] {\n    display: none;\n  }\n  code-block {\n    flex: 1;\n    min-height: 0;\n  }\n",CodeViewer.reg("pg-code-viewer");
+this.$.hasFile=!0}catch(e){const n=this._getCodeBlock();n&&(n.$.lang='plain',n.$.code=`// Error: ${e.message}`),this.$.showToggle=!1,this.$.hasFile=!0}}}
+
+CodeViewer.template=`
+  <div class="pg-code-header">
+    <span class="pg-code-filename" bind="textContent: filename"></span>
+    <div class="pg-code-controls">
+      <span class="pg-code-stats" bind="textContent: statsText"></span>
+      <button class="pg-mode-toggle" bind="onclick: onShowInGraph" title="Show in Graph">
+        <span class="material-symbols-outlined" style="font-size:14px">account_tree</span>
+        <span class="pg-mode-label">graph</span>
+      </button>
+      <button class="pg-mode-toggle" bind="onclick: onToggleMode; hidden: !showToggle" title="Toggle view mode">
+        <span class="material-symbols-outlined" style="font-size:14px">compress</span>
+        <span class="pg-mode-label" bind="textContent: modeLabel"></span>
+      </button>
+    </div>
+  </div>
+  <code-block></code-block>
+`;
+
+CodeViewer.rootStyles="\n  pg-code-viewer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n  pg-code-viewer:not([has-file]) code-block {\n    display: none;\n  }\n  .pg-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 6px 12px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 11px;\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    border-bottom: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    background: var(--sn-node-header-bg, hsl(37, 25%, 93%));\n    gap: 8px;\n  }\n  .pg-code-filename {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    min-width: 0;\n  }\n  .pg-code-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n  .pg-code-stats {\n    font-size: 10px;\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    white-space: nowrap;\n  }\n  .pg-mode-toggle {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    padding: 2px 8px;\n    border: 1px solid var(--sn-node-border, hsl(35, 18%, 80%));\n    border-radius: 4px;\n    background: var(--sn-bg, hsl(37, 30%, 91%));\n    color: var(--sn-text-dim, hsl(30, 10%, 45%));\n    font-family: inherit;\n    font-size: 10px;\n    cursor: pointer;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: all 120ms ease;\n  }\n  .pg-mode-toggle:hover {\n    background: var(--sn-node-hover, hsl(36, 22%, 88%));\n    color: var(--sn-text, hsl(30, 15%, 18%));\n  }\n  pg-code-viewer[mode-raw] .pg-mode-toggle {\n    background: hsla(210, 45%, 45%, 0.12);\n    border-color: var(--sn-cat-server, hsl(210, 45%, 45%));\n    color: var(--sn-cat-server, hsl(210, 45%, 45%));\n  }\n  .pg-mode-toggle[hidden] {\n    display: none;\n  }\n  code-block {\n    flex: 1;\n    min-height: 0;\n  }\n";
+CodeViewer.reg("pg-code-viewer");