project-graph-mcp 1.3.0 → 2.0.0

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