archgraph 0.1.0

package/packages/viewer/public/render.js

@@ -0,0 +1,366 @@
+// render.js — Graph rendering, comment pins, node repositioning
+
+import { layoutDag } from './layout.js';
+import { nodePositions, canvasTransform } from './canvas.js';
+import { showTooltip, moveTooltip, hideTooltip } from './tooltip.js';
+import { openCommentOverlay, getMostUrgentStatus } from './comments.js';
+
+export const collapsedGroups = new Set(); // group IDs
+export const groupRoots = new Map();       // groupId → rootNodeId
+
+let canvasGroup = null;
+let graphSvg = null;
+let viewRef = null;
+let currentTasks = [];
+let onSelectNode = null; // callback(nodeId)
+let selectedNodeId = null;
+
+export function initRender(svgEl, groupEl, { onSelect }) {
+  graphSvg = svgEl;
+  canvasGroup = groupEl;
+  onSelectNode = onSelect;
+}
+
+export function setRenderView(view) {
+  viewRef = view;
+  computeGroupRoots(view);
+}
+
+export function setSelectedNode(nodeId) {
+  selectedNodeId = nodeId;
+}
+
+export function setCurrentTasks(tasks) {
+  currentTasks = tasks;
+}
+
+function computeGroupRoots(view) {
+  groupRoots.clear();
+  for (const group of view.groups ?? []) {
+    // Find the node within the group that has the most incoming edges from outside the group
+    // Simplest heuristic: the endpoint node (kind === 'endpoint' or 'ui_route')
+    const memberSet = new Set(group.memberNodeIds);
+    let root = null;
+    for (const nodeId of group.memberNodeIds) {
+      const node = view.nodes.find((n) => n.id === nodeId);
+      if (node && (node.kind === 'endpoint' || node.kind === 'ui_route')) {
+        root = nodeId;
+        break;
+      }
+    }
+    // Fallback: node with no incoming edges from within the group
+    if (!root) {
+      const internalEdges = new Set(
+        view.edges.filter((e) => memberSet.has(e.from) && memberSet.has(e.to)).map((e) => e.to),
+      );
+      for (const nodeId of group.memberNodeIds) {
+        if (!internalEdges.has(nodeId)) {
+          root = nodeId;
+          break;
+        }
+      }
+    }
+    if (!root && group.memberNodeIds.length > 0) {
+      root = group.memberNodeIds[0];
+    }
+    if (root) groupRoots.set(group.id, root);
+  }
+}
+
+// Returns { nodes, edges } with collapse logic applied
+export function applyCollapse(nodes, edges) {
+  if (collapsedGroups.size === 0) return { nodes, edges };
+
+  const hiddenNodes = new Set();
+  for (const groupId of collapsedGroups) {
+    const group = viewRef?.groups?.find((g) => g.id === groupId);
+    if (!group) continue;
+    const root = groupRoots.get(groupId);
+    for (const memberId of group.memberNodeIds) {
+      if (memberId !== root) hiddenNodes.add(memberId);
+    }
+  }
+
+  const visibleNodes = nodes.filter((n) => !hiddenNodes.has(n.id));
+  const visibleIds = new Set(visibleNodes.map((n) => n.id));
+
+  // Remap edges: if an edge goes to a hidden node, redirect to the group root
+  const remappedEdges = [];
+  for (const edge of edges) {
+    const fromVisible = visibleIds.has(edge.from);
+    const toVisible = visibleIds.has(edge.to);
+    if (fromVisible && toVisible) {
+      remappedEdges.push(edge);
+    } else if (fromVisible && !toVisible) {
+      // Find which collapsed group contains edge.to
+      for (const groupId of collapsedGroups) {
+        const group = viewRef?.groups?.find((g) => g.id === groupId);
+        if (group?.memberNodeIds.includes(edge.to)) {
+          const root = groupRoots.get(groupId);
+          if (root && visibleIds.has(root) && edge.from !== root) {
+            remappedEdges.push({ ...edge, to: root });
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  return { nodes: visibleNodes, edges: remappedEdges };
+}
+
+export function renderGraph(nodes, edges) {
+  // Clear canvas group content (but keep defs)
+  const existingDefs = canvasGroup.querySelector('defs');
+  canvasGroup.innerHTML = '';
+
+  // Add defs with arrowhead marker
+  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+  defs.innerHTML = `
+    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#51627f" />
+    </marker>
+    <marker id="arrow-cond" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#b45309" />
+    </marker>
+  `;
+  canvasGroup.appendChild(defs);
+
+  if (!nodes.length) return;
+
+  // Layout: only compute positions for nodes not already in nodePositions
+  const newNodes = nodes.filter((n) => !nodePositions.has(n.id));
+  if (newNodes.length > 0) {
+    const layoutPoints = layoutDag(nodes, edges);
+    for (const [id, pos] of layoutPoints) {
+      if (!nodePositions.has(id)) {
+        nodePositions.set(id, pos);
+      }
+    }
+  }
+
+  // Render edges
+  for (const edge of edges) {
+    const from = nodePositions.get(edge.from);
+    const to = nodePositions.get(edge.to);
+    if (!from || !to) continue;
+
+    const cls = edgeClass(edge.kind);
+    const isCondition = cls === 'edge-condition';
+
+    // Draw curved path instead of straight line for nicer look
+    const x1 = from.x + 90;
+    const y1 = from.y;
+    const x2 = to.x - 90;
+    const y2 = to.y;
+    const mx = (x1 + x2) / 2;
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`);
+    path.setAttribute('class', `edge ${cls}`);
+    path.setAttribute('fill', 'none');
+    path.setAttribute('marker-end', isCondition ? 'url(#arrow-cond)' : 'url(#arrow)');
+    path.setAttribute('data-from', edge.from);
+    path.setAttribute('data-to', edge.to);
+    canvasGroup.appendChild(path);
+
+    if (edge.label) {
+      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      label.setAttribute('x', String(mx));
+      label.setAttribute('y', String((y1 + y2) / 2 - 6));
+      label.setAttribute('class', 'edge-label');
+      label.setAttribute('text-anchor', 'middle');
+      label.textContent = edge.label;
+      canvasGroup.appendChild(label);
+    }
+  }
+
+  // Render nodes
+  for (const node of nodes) {
+    const pos = nodePositions.get(node.id);
+    if (!pos) continue;
+
+    const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.setAttribute('class', `node ${nodeClass(node.kind)} ${selectedNodeId === node.id ? 'selected' : ''}`);
+    group.setAttribute('transform', `translate(${pos.x},${pos.y})`);
+    group.dataset.nodeId = node.id;
+
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', '-90');
+    rect.setAttribute('y', '-28');
+    rect.setAttribute('width', '180');
+    rect.setAttribute('height', '56');
+    rect.setAttribute('rx', '10');
+    group.appendChild(rect);
+
+    const kindLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    kindLabel.setAttribute('x', '-78');
+    kindLabel.setAttribute('y', '-8');
+    kindLabel.setAttribute('class', 'node-kind');
+    kindLabel.textContent = node.kind;
+    group.appendChild(kindLabel);
+
+    const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    label.setAttribute('x', '-78');
+    label.setAttribute('y', '14');
+    label.setAttribute('class', 'node-label');
+    label.textContent = node.label.length > 30 ? `${node.label.slice(0, 27)}…` : node.label;
+    group.appendChild(label);
+
+    // Collapse toggle for endpoint/agent groups
+    const ownsGroup = findNodeGroup(node.id);
+    if (ownsGroup && ownsGroup.memberNodeIds.length > 1) {
+      const toggle = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      toggle.setAttribute('class', 'collapse-toggle');
+      toggle.dataset.groupId = ownsGroup.id;
+
+      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      circle.setAttribute('cx', '74');
+      circle.setAttribute('cy', '-20');
+      circle.setAttribute('r', '9');
+      toggle.appendChild(circle);
+
+      const isCollapsed = collapsedGroups.has(ownsGroup.id);
+      const sign = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      sign.setAttribute('x', '74');
+      sign.setAttribute('y', '-16');
+      sign.setAttribute('text-anchor', 'middle');
+      sign.setAttribute('class', 'collapse-sign');
+      sign.textContent = isCollapsed ? '+' : '−';
+      toggle.appendChild(sign);
+
+      toggle.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const groupId = e.currentTarget.dataset.groupId;
+        if (collapsedGroups.has(groupId)) {
+          collapsedGroups.delete(groupId);
+        } else {
+          collapsedGroups.add(groupId);
+        }
+        if (window.__bgxRender) window.__bgxRender();
+      });
+
+      group.appendChild(toggle);
+    }
+
+    // Tooltip
+    group.addEventListener('pointerenter', (e) => {
+      showTooltip(e.clientX, e.clientY, node);
+    });
+    group.addEventListener('pointermove', (e) => {
+      moveTooltip(e.clientX, e.clientY);
+    });
+    group.addEventListener('pointerleave', () => {
+      hideTooltip();
+    });
+
+    canvasGroup.appendChild(group);
+  }
+
+  // Register repositionNodeAndEdges globally for canvas.js to call
+  window.__bgxRepositionNode = (nodeId) => repositionNodeAndEdges(nodeId);
+}
+
+export function renderCommentPins(tasks) {
+  // Remove old pins
+  for (const pin of canvasGroup.querySelectorAll('.comment-pin')) pin.remove();
+
+  // Group tasks by nodeId
+  const pinsByNode = new Map();
+  for (const task of tasks) {
+    const nid = task.target?.nodeId;
+    if (!nid) continue;
+    if (!pinsByNode.has(nid)) pinsByNode.set(nid, []);
+    pinsByNode.get(nid).push(task);
+  }
+
+  for (const [nodeId, nodeTasks] of pinsByNode) {
+    const pos = nodePositions.get(nodeId);
+    if (!pos) continue;
+
+    const pin = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    pin.setAttribute('class', 'comment-pin');
+    pin.dataset.nodeId = nodeId;
+    pin.setAttribute('transform', `translate(${pos.x + 90},${pos.y - 38})`);
+
+    const status = getMostUrgentStatus(nodeTasks);
+
+    const bubble = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    bubble.setAttribute('r', '12');
+    bubble.setAttribute('class', `comment-bubble status-${status}`);
+    pin.appendChild(bubble);
+
+    const countText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    countText.setAttribute('text-anchor', 'middle');
+    countText.setAttribute('dominant-baseline', 'central');
+    countText.setAttribute('class', 'comment-count');
+    countText.textContent = nodeTasks.length > 9 ? '9+' : String(nodeTasks.length);
+    pin.appendChild(countText);
+
+    pin.addEventListener('click', (e) => {
+      e.stopPropagation();
+      openCommentOverlay(nodeId, nodeTasks, pos, canvasTransform, graphSvg);
+    });
+
+    canvasGroup.appendChild(pin);
+  }
+}
+
+export function repositionNodeAndEdges(nodeId) {
+  const pos = nodePositions.get(nodeId);
+  if (!pos) return;
+
+  // Move node group
+  const nodeGroup = canvasGroup.querySelector(`g[data-node-id="${nodeId}"]`);
+  if (nodeGroup) {
+    nodeGroup.setAttribute('transform', `translate(${pos.x},${pos.y})`);
+  }
+
+  // Update connected edges (paths with data-from or data-to)
+  for (const pathEl of canvasGroup.querySelectorAll(`path[data-from="${nodeId}"], path[data-to="${nodeId}"]`)) {
+    const fromId = pathEl.getAttribute('data-from');
+    const toId = pathEl.getAttribute('data-to');
+    const from = nodePositions.get(fromId);
+    const to = nodePositions.get(toId);
+    if (!from || !to) continue;
+
+    const x1 = from.x + 90;
+    const y1 = from.y;
+    const x2 = to.x - 90;
+    const y2 = to.y;
+    const mx = (x1 + x2) / 2;
+    pathEl.setAttribute('d', `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`);
+  }
+
+  // Update comment pin position
+  const pin = canvasGroup.querySelector(`.comment-pin[data-node-id="${nodeId}"]`);
+  if (pin) {
+    pin.setAttribute('transform', `translate(${pos.x + 90},${pos.y - 38})`);
+  }
+}
+
+function findNodeGroup(nodeId) {
+  if (!viewRef) return null;
+  for (const group of viewRef.groups ?? []) {
+    const root = groupRoots.get(group.id);
+    if (root === nodeId) return group;
+  }
+  return null;
+}
+
+export function edgeClass(kind) {
+  if (kind.startsWith('condition_') || kind === 'evaluates_condition') return 'edge-condition';
+  if (kind === 'handles') return 'edge-handles';
+  if (kind === 'calls') return 'edge-calls';
+  if (kind === 'langgraph_edge') return 'edge-langgraph';
+  return 'edge-default';
+}
+
+export function nodeClass(kind) {
+  if (kind === 'endpoint' || kind === 'ui_route') return 'node-endpoint';
+  if (kind === 'condition') return 'node-condition';
+  if (kind === 'route_handler') return 'node-handler';
+  if (kind === 'agent' || kind === 'langgraph_node') return 'node-agent';
+  if (kind === 'mcp_tool') return 'node-mcp';
+  return 'node-default';
+}

package/packages/viewer/public/sidebar.js

@@ -0,0 +1,107 @@
+// sidebar.js — Code sidebar (slides in from right)
+
+let sidebarEl = null;
+let sidebarContent = null;
+let sidebarNodeTitle = null;
+let closeSidebarBtn = null;
+
+export let codeSidebarOpen = false;
+
+export function initSidebar() {
+  sidebarEl = document.getElementById('codeSidebar');
+  sidebarContent = document.getElementById('sidebarContent');
+  sidebarNodeTitle = document.getElementById('sidebarNodeTitle');
+  closeSidebarBtn = document.getElementById('closeSidebarBtn');
+
+  closeSidebarBtn.addEventListener('click', closeCodeSidebar);
+
+  document.addEventListener('keydown', (e) => {
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
+    if (e.key === 'Escape' && codeSidebarOpen) {
+      closeCodeSidebar();
+    }
+  });
+}
+
+export function openCodeSidebar(payload, descriptions) {
+  renderCodePayload(payload, descriptions);
+  sidebarEl.classList.add('sidebar--open');
+  sidebarEl.setAttribute('aria-hidden', 'false');
+  codeSidebarOpen = true;
+}
+
+export function closeCodeSidebar() {
+  sidebarEl.classList.remove('sidebar--open');
+  sidebarEl.setAttribute('aria-hidden', 'true');
+  codeSidebarOpen = false;
+}
+
+function renderCodePayload(payload, descriptions) {
+  sidebarNodeTitle.textContent = payload.node.label;
+
+  const description = lookupDescription(payload.node.id, descriptions);
+  const relatedHtml = (payload.related ?? [])
+    .map(
+      (entry) => `
+      <details>
+        <summary>${escHtml(entry.edge.kind)} → ${escHtml(entry.node.label)}</summary>
+        <pre>${highlightCode(escHtml(entry.snippet || '(no local source)'))}</pre>
+      </details>
+    `,
+    )
+    .join('');
+
+  sidebarContent.innerHTML = `
+    <div class="sidebar-file">${escHtml(payload.node.file || '(external)')}</div>
+    ${
+      description
+        ? `<div class="desc-card">
+            <h4>Description</h4>
+            <p><strong>KO:</strong> ${escHtml(description.sections?.ko?.purpose || '-')}</p>
+            <p><strong>EN:</strong> ${escHtml(description.sections?.en?.purpose || '-')}</p>
+          </div>`
+        : ''
+    }
+    <pre class="code-block">${highlightCode(escHtml(payload.snippet || '(no local source)'))}</pre>
+    <h4 class="related-title">Related (1-hop)</h4>
+    <div class="related-list">${relatedHtml || '<small>No related nodes.</small>'}</div>
+  `;
+}
+
+function lookupDescription(nodeId, descriptions) {
+  const entries = descriptions?.descriptions?.entries;
+  if (!Array.isArray(entries)) return null;
+  return entries.find((entry) => entry.id === nodeId || entry.id === `group:${nodeId}`) ?? null;
+}
+
+// Minimal regex-based syntax highlighter
+function highlightCode(escapedCode) {
+  // Input is already HTML-escaped. We apply span wrapping in order.
+  let code = escapedCode;
+
+  // Comments (must come first to prevent keyword matching inside them)
+  code = code.replace(/(\/\/[^\n]*)/g, '<span class="tok-comment">$1</span>');
+  code = code.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="tok-comment">$1</span>');
+
+  // Strings (simple heuristic — works for most cases)
+  code = code.replace(/(&#39;[^&#]*&#39;|&quot;[^&]*&quot;)/g, '<span class="tok-string">$1</span>');
+
+  // Keywords
+  const keywords =
+    /\b(const|let|var|function|return|if|else|for|while|async|await|class|export|import|from|of|in|new|this|null|undefined|true|false|try|catch|finally|throw|switch|case|break|default|typeof|instanceof|void|delete|static|extends|super)\b/g;
+  code = code.replace(keywords, '<span class="tok-keyword">$1</span>');
+
+  // Numbers
+  code = code.replace(/\b(\d+\.?\d*)\b/g, '<span class="tok-number">$1</span>');
+
+  return code;
+}
+
+function escHtml(value) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}