@datasynx/agentic-ai-cartography 2.8.0 → 2.9.0

package/dist/index.cjs

@@ -137,6 +137,7 @@ __export(src_exports, {
   createSqliteQueryBackend: () => createSqliteQueryBackend,
   currentOs: () => currentOs,
   cursorDeeplink: () => cursorDeeplink,
+  dashboardHtml: () => dashboardHtml,
   databasesScanner: () => databasesScanner,
   deepMerge: () => deepMerge,
   defaultAllowedHosts: () => defaultAllowedHosts,
@@ -6135,7 +6136,7 @@ async function resolveNlQuery(db, sessionId, search, raw, opts) {
 
 // src/mcp/server.ts
 var SERVER_NAME = "cartography";
-var SERVER_VERSION = "2.8.0";
+var SERVER_VERSION = "2.9.0";
 var SERVICE_TYPES = NODE_TYPE_GROUPS.web;
 var DATA_TYPES = NODE_TYPE_GROUPS.data;
 var lexicalSearch = async (db, sessionId, query, opts) => db.searchNodes(sessionId, query, { types: opts.types, limit: opts.limit }).map((node) => ({ node }));
@@ -8520,6 +8521,156 @@ function handleGraphqlGet() {
   return { status: 200, body: SDL };
 }
 
+// src/web/dashboard.ts
+var STYLE = `
+*{box-sizing:border-box;margin:0;padding:0}
+:root{--bg:#0f1419;--panel:#161b22;--line:#2d333b;--fg:#e6edf3;--dim:#8b949e;--accent:#3b82f6;--ok:#3fb950;--warn:#d29922;--crit:#f85149}
+body{font:13px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);height:100vh;display:flex;flex-direction:column;overflow:hidden}
+header{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
+header h1{font-size:15px;font-weight:600;letter-spacing:.3px}
+header .ver{color:var(--dim);font-size:11px}
+header .spacer{flex:1}
+header input{background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:5px 8px;font-size:12px;width:200px}
+header input:focus{outline:none;border-color:var(--accent)}
+header button{background:var(--accent);border:none;color:#fff;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer}
+main{flex:1;display:grid;grid-template-columns:300px 1fr 320px;overflow:hidden}
+.col{overflow:auto;padding:12px;border-right:1px solid var(--line)}
+.col:last-child{border-right:none;border-left:1px solid var(--line)}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
+.card h2{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-bottom:8px}
+.stat{display:flex;justify-content:space-between;padding:2px 0}
+.stat b{font-variant-numeric:tabular-nums}
+.bar{height:4px;border-radius:2px;background:var(--accent);margin-top:2px}
+#search{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:6px;padding:6px 8px;margin-bottom:8px}
+.node-item{padding:6px 8px;border-radius:6px;cursor:pointer;border:1px solid transparent}
+.node-item:hover{background:var(--panel)}
+.node-item.sel{background:var(--panel);border-color:var(--accent)}
+.node-item .t{color:var(--dim);font-size:11px}
+#center{position:relative;padding:0}
+#graph{display:block;width:100%;height:100%;background:radial-gradient(circle at 50% 40%,#11161d,#0d1117)}
+#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--dim);text-align:center;padding:20px}
+.kv{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
+.kv span:first-child{color:var(--dim)}
+.kv span:last-child{text-align:right;word-break:break-all}
+.chip{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:1px 8px;font-size:11px;margin:2px 2px 0 0}
+.sev-high,.sev-critical{color:var(--crit)} .sev-medium,.sev-warning{color:var(--warn)} .sev-low,.sev-info{color:var(--dim)}
+#toast{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:var(--crit);color:#fff;padding:8px 14px;border-radius:6px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}
+#toast.show{opacity:1}
+`;
+var SCRIPT = String.raw`
+const $=(s)=>document.querySelector(s), api=(p)=>{
+  const h={accept:'application/json'};
+  const t=sessionStorage.getItem('cartograph_token'); if(t) h.authorization='Bearer '+t;
+  const tn=sessionStorage.getItem('cartograph_tenant'); if(tn) h['x-cartograph-tenant']=tn;
+  return fetch(p,{headers:h}).then(async r=>{ if(!r.ok){ const e=new Error('http '+r.status); e.status=r.status; throw e; } return r.json(); });
+};
+function toast(m){ const t=$('#toast'); t.textContent=m; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),2600); }
+let NODES=[], SELECTED=null;
+
+async function boot(){
+  try{
+    const s=await api('/v1/summary'); renderSummary(s);
+    const n=await api('/v1/nodes?limit=1000'); NODES=n.nodes; renderList(NODES);
+  }catch(e){
+    if(e.status===401){ toast('Unauthorized — enter a bearer token and Reload.'); }
+    else if(e.status===404){ const em=$('#empty'); em.textContent='No discovery session yet. Run a scan, then Reload.'; em.style.display='flex'; }
+    else toast('Failed to load: '+e.message);
+  }
+}
+function renderSummary(s){
+  const max=Math.max(1,...Object.values(s.nodesByType));
+  const types=Object.entries(s.nodesByType).sort((a,b)=>b[1]-a[1]).slice(0,12)
+    .map(([k,v])=>'<div class="stat"><span>'+esc(k)+'</span><b>'+v+'</b></div><div class="bar" style="width:'+(v/max*100)+'%"></div>').join('');
+  const anom=(s.anomalies||[]).slice(0,12).map(a=>'<div class="stat"><span class="sev-'+a.severity+'">'+esc(a.kind)+'</span><span class="t">'+esc(a.nodeId)+'</span></div>').join('') || '<div class="t">none</div>';
+  $('#summary').innerHTML=
+    '<div class="card"><h2>Totals</h2><div class="stat"><span>Nodes</span><b>'+s.totals.nodes+'</b></div><div class="stat"><span>Edges</span><b>'+s.totals.edges+'</b></div>'+(s.contributors!=null?'<div class="stat"><span>Contributors</span><b>'+s.contributors+'</b></div>':'')+'</div>'+
+    '<div class="card"><h2>Nodes by type</h2>'+types+'</div>'+
+    '<div class="card"><h2>Anomalies</h2>'+anom+'</div>';
+}
+function renderList(nodes){
+  $('#list').innerHTML=nodes.map(n=>'<div class="node-item" data-id="'+esc(n.id)+'"><div>'+esc(n.name)+'</div><div class="t">'+esc(n.type)+'</div></div>').join('')||'<div class="t">no nodes</div>';
+  $('#list').querySelectorAll('.node-item').forEach(el=>el.onclick=()=>select(el.dataset.id));
+}
+function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); }
+
+async function select(id){
+  SELECTED=id;
+  $('#list').querySelectorAll('.node-item').forEach(el=>el.classList.toggle('sel',el.dataset.id===id));
+  const node=NODES.find(n=>n.id===id);
+  try{
+    const dep=await api('/v1/nodes/'+encodeURIComponent(id)+'/dependencies?direction=both&maxDepth=2');
+    renderDetail(node,dep); drawGraph(id,dep);
+  }catch(e){ toast('drill-down failed: '+e.message); }
+}
+function renderDetail(node,dep){
+  if(!node){ $('#detail').innerHTML='<div class="t">node not in current page</div>'; return; }
+  const fields=[['id',node.id],['type',node.type],['name',node.name],['confidence',node.confidence],['domain',node.domain],['owner',node.owner]]
+    .filter(([,v])=>v!=null).map(([k,v])=>'<div class="kv"><span>'+k+'</span><span>'+esc(v)+'</span></div>').join('');
+  const tags=(node.tags||[]).map(t=>'<span class="chip">'+esc(t)+'</span>').join('');
+  const edges=(dep.edges||[]).map(e=>'<div class="kv"><span>'+esc(e.relationship)+'</span><span>'+esc(e.sourceId===node.id?('→ '+e.targetId):('← '+e.sourceId))+'</span></div>').join('')||'<div class="t">no dependencies</div>';
+  $('#detail').innerHTML='<div class="card"><h2>Node</h2>'+fields+(tags?'<div style="margin-top:6px">'+tags+'</div>':'')+'</div><div class="card"><h2>Dependencies ('+(dep.nodes?dep.nodes.length:0)+')</h2>'+edges+'</div>';
+}
+
+const cv=()=>$('#graph'), ctx=()=>cv().getContext('2d');
+function drawGraph(rootId,dep){
+  $('#empty').style.display='none';
+  const c=cv(); const dpr=window.devicePixelRatio||1; const w=c.clientWidth,h=c.clientHeight;
+  c.width=w*dpr; c.height=h*dpr; const g=ctx(); g.setTransform(dpr,0,0,dpr,0,0); g.clearRect(0,0,w,h);
+  const nodes=dep.nodes||[]; const cx=w/2,cy=h/2;
+  // root at center; others on a circle, radius by depth.
+  const pos={}; pos[rootId]={x:cx,y:cy};
+  const others=nodes.filter(n=>n.id!==rootId);
+  others.forEach((n,i)=>{ const a=(i/Math.max(1,others.length))*Math.PI*2; const r=90+(n.depth||1)*70; pos[n.id]={x:cx+Math.cos(a)*r,y:cy+Math.sin(a)*r}; });
+  // edges
+  g.strokeStyle='#30363d'; g.lineWidth=1.2;
+  (dep.edges||[]).forEach(e=>{ const a=pos[e.sourceId],b=pos[e.targetId]; if(a&&b){ g.beginPath(); g.moveTo(a.x,a.y); g.lineTo(b.x,b.y); g.stroke(); } });
+  // nodes
+  const byId={}; nodes.forEach(n=>byId[n.id]=n);
+  Object.entries(pos).forEach(([id,p])=>{ const n=byId[id]; const root=id===rootId;
+    g.beginPath(); g.arc(p.x,p.y,root?13:8,0,Math.PI*2);
+    g.fillStyle=root?'#3b82f6':'#21262d'; g.fill(); g.lineWidth=root?2:1; g.strokeStyle=root?'#60a5fa':'#484f58'; g.stroke();
+    g.fillStyle='#c9d1d9'; g.font=(root?'600 12px':'11px')+' ui-sans-serif'; g.textAlign='center';
+    g.fillText((n&&n.name?n.name:id).slice(0,22),p.x,p.y-(root?20:14));
+  });
+}
+
+document.addEventListener('DOMContentLoaded',()=>{
+  const t=sessionStorage.getItem('cartograph_token'); if(t)$('#token').value=t;
+  const tn=sessionStorage.getItem('cartograph_tenant'); if(tn)$('#tenant').value=tn;
+  $('#reload').onclick=()=>{ sessionStorage.setItem('cartograph_token',$('#token').value.trim()); sessionStorage.setItem('cartograph_tenant',$('#tenant').value.trim()); boot(); };
+  $('#search').oninput=(e)=>{ const q=e.target.value.toLowerCase(); renderList(NODES.filter(n=>n.name.toLowerCase().includes(q)||n.id.toLowerCase().includes(q)||n.type.toLowerCase().includes(q))); };
+  boot();
+});
+`;
+function dashboardHtml(opts = {}) {
+  const version = opts.version ?? "";
+  return `<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Cartograph dashboard</title>
+<style>${STYLE}</style>
+</head><body>
+<header>
+  <h1>Cartograph</h1><span class="ver">${version ? `v${version}` : ""}</span>
+  <span class="spacer"></span>
+  <input id="tenant" placeholder="tenant (optional)" autocomplete="off">
+  <input id="token" type="password" placeholder="bearer token" autocomplete="off">
+  <button id="reload">Reload</button>
+</header>
+<main>
+  <div class="col"><div id="summary"></div></div>
+  <div class="col" id="center"><canvas id="graph"></canvas><div id="empty">Select a node to explore its dependencies.</div></div>
+  <div class="col">
+    <input id="search" placeholder="Search nodes\u2026" autocomplete="off">
+    <div id="list"></div>
+    <div id="detail"></div>
+  </div>
+</main>
+<div id="toast"></div>
+<script>${SCRIPT}</script>
+</body></html>`;
+}
+
 // src/api/server.ts
 var DEPENDENCIES_RE = /^\/v1\/nodes\/(.+)\/dependencies$/;
 var MAX_GRAPHQL_BYTES = 1024 * 1024;
@@ -8561,6 +8712,8 @@ async function runApi(opts) {
   });
   const restDeps = { backend: opts.backend, version: opts.version };
   const openApiDoc = buildOpenApiDocument({ version: opts.version });
+  const dashboardEnabled = opts.dashboard !== false;
+  const dashboardPage = dashboardEnabled ? dashboardHtml({ version: opts.version }) : "";
   const allowedOrigins = opts.allowedOrigins ?? [];
   assertSafeBind({ host: host2, port: requestedPort, ...opts.allowedHosts ? { allowedHosts: opts.allowedHosts } : {}, ...token ? { token } : {} });
   let allowedHosts = opts.allowedHosts ?? [];
@@ -8603,6 +8756,11 @@ async function runApi(opts) {
           finish(200);
           return;
         }
+        if (dashboardEnabled && (path === "/" || path === "/app") && req.method === "GET") {
+          res.writeHead(200, { "content-type": "text/html; charset=utf-8", ...cors }).end(dashboardPage);
+          finish(200);
+          return;
+        }
         if (path === "/v1/health") {
           if (req.method !== "GET") {
             send(res, 405, { error: "method not allowed" }, { allow: "GET", ...cors });
@@ -8767,6 +8925,7 @@ function parseApiArgs(argv) {
     const a = argv[i];
     if (a === "--http") continue;
     else if (a === "--no-graphql") opts.graphql = false;
+    else if (a === "--no-dashboard") opts.dashboard = false;
     else if (a === "--port") opts.port = Number(argv[++i]);
     else if (a === "--host") opts.host = argv[++i];
     else if (a === "--allowed-hosts") opts.allowedHosts = splitList(argv[++i]);
@@ -8802,12 +8961,14 @@ async function startApi(opts = {}) {
     ...opts.allowedOrigins ? { allowedOrigins: opts.allowedOrigins } : {},
     ...token ? { token } : {},
     ...opts.graphql === false ? { graphql: false } : {},
+    ...opts.dashboard === false ? { dashboard: false } : {},
     ...opts.tenant ? { tenant: { defaultTenant: normalizeTenant(opts.tenant) } } : {},
     log: log2
   });
   const graphqlNote = opts.graphql === false ? " [REST only]" : " + /graphql";
+  const dashNote = opts.dashboard === false ? "" : ` \xB7 dashboard http://${host2}:${port}/`;
   log2(
-    `Cartograph API (REST${graphqlNote}) on http://${host2}:${port}/v1${token ? " (auth: bearer token required)" : ""} (tenant: ${normalizeTenant(opts.tenant)})`
+    `Cartograph API (REST${graphqlNote}) on http://${host2}:${port}/v1${token ? " (auth: bearer token required)" : ""} (tenant: ${normalizeTenant(opts.tenant)})${dashNote}`
   );
   return server;
 }
@@ -12160,6 +12321,7 @@ function checkClaudePrerequisites() {
   createSqliteQueryBackend,
   currentOs,
   cursorDeeplink,
+  dashboardHtml,
   databasesScanner,
   deepMerge,
   defaultAllowedHosts,