project-graph-mcp 2.2.6 → 2.3.1

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/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,159 @@
+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) {
+    const nodes = data.nodes || (data.n ? Object.keys(data.n).map(id => ({ id, ...data.n[id] })) : []);
+    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;
+    }
+
+    const width = 300;
+    const height = 150;
+    
+    // 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 = '';
+    
+    // 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);
+    });
+    
+    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;
+  }
+
+  _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/components/follow-ribbon.js

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

package/web/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);