archgraph 0.1.0

package/packages/viewer/public/comments.js

@@ -0,0 +1,193 @@
+// comments.js — Comment thread overlay + task CRUD
+
+let overlayEl = null;
+let commentThread = null;
+let commentOverlayTitle = null;
+let closeCommentOverlayBtn = null;
+let taskForm = null;
+let taskPromptInput = null;
+let executorInput = null;
+
+let currentOverlayNodeId = null;
+let onTasksReloaded = null; // callback to refresh pins
+
+export function initComments({ onReload }) {
+  overlayEl = document.getElementById('commentOverlay');
+  commentThread = document.getElementById('commentThread');
+  commentOverlayTitle = document.getElementById('commentOverlayTitle');
+  closeCommentOverlayBtn = document.getElementById('closeCommentOverlayBtn');
+  taskForm = document.getElementById('taskForm');
+  taskPromptInput = document.getElementById('taskPrompt');
+  executorInput = document.getElementById('taskExecutor');
+
+  onTasksReloaded = onReload;
+
+  closeCommentOverlayBtn.addEventListener('click', closeCommentOverlay);
+
+  document.addEventListener('keydown', (e) => {
+    if (['INPUT', 'TEXTAREA', 'SELECT'].includes(e.target.tagName)) return;
+    if (e.key === 'Escape') {
+      closeCommentOverlay();
+    }
+  });
+
+  taskForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!currentOverlayNodeId) return;
+
+    const userPrompt = taskPromptInput.value.trim();
+    if (!userPrompt) return;
+
+    try {
+      await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          nodeId: currentOverlayNodeId,
+          userPrompt,
+          executor: executorInput.value,
+        }),
+      });
+      taskPromptInput.value = '';
+      if (onTasksReloaded) await onTasksReloaded();
+    } catch (error) {
+      alert(`Failed to create task: ${String(error)}`);
+    }
+  });
+}
+
+export function openCommentOverlay(nodeId, tasks, worldPos, canvasTransform, graphSvg) {
+  currentOverlayNodeId = nodeId;
+  commentOverlayTitle.textContent = tasks.length
+    ? `${tasks.length} comment${tasks.length > 1 ? 's' : ''}`
+    : 'New comment';
+
+  renderTasks(tasks);
+
+  // Position overlay near the pin in screen coords
+  const rect = graphSvg.getBoundingClientRect();
+  const screenX = rect.left + (worldPos.x + 90) * canvasTransform.scale + canvasTransform.x;
+  const screenY = rect.top + (worldPos.y - 36) * canvasTransform.scale + canvasTransform.y;
+
+  const OW = 320;
+  const OH = 440;
+  let left = screenX + 16;
+  let top = screenY - OH / 2;
+
+  if (left + OW > window.innerWidth - 8) left = screenX - OW - 16;
+  top = Math.max(8, Math.min(top, window.innerHeight - OH - 8));
+
+  overlayEl.style.left = `${left}px`;
+  overlayEl.style.top = `${top}px`;
+  overlayEl.classList.add('overlay--open');
+  overlayEl.setAttribute('aria-hidden', 'false');
+}
+
+export function closeCommentOverlay() {
+  if (!overlayEl) return;
+  overlayEl.classList.remove('overlay--open');
+  overlayEl.setAttribute('aria-hidden', 'true');
+  currentOverlayNodeId = null;
+}
+
+export function isCommentOverlayOpen() {
+  return overlayEl?.classList.contains('overlay--open') ?? false;
+}
+
+export function renderTasksInOverlay(tasks) {
+  if (!commentThread) return;
+  renderTasks(tasks);
+}
+
+function renderTasks(tasks) {
+  const rows = tasks
+    .map(
+      (task) => `
+      <div class="task-card" data-task-id="${escHtml(task.id)}">
+        <div class="task-head">
+          <span class="task-id">${escHtml(task.id)}</span>
+          <span class="status status-${escHtml(task.status.toLowerCase())}">${escHtml(task.status)}</span>
+        </div>
+        <div class="task-meta">${escHtml(task.target?.symbol ?? task.target?.nodeId ?? '-')}</div>
+        <div class="task-prompt">${escHtml(task.userPrompt)}</div>
+        <div class="task-actions">
+          <button data-action="approve">Approve</button>
+          <button data-action="run">Run</button>
+          <button data-action="logs">Logs</button>
+          <button data-action="delete">Remove</button>
+        </div>
+      </div>
+    `,
+    )
+    .join('');
+
+  commentThread.innerHTML = rows || '<small class="no-tasks">No comments yet.</small>';
+
+  for (const button of commentThread.querySelectorAll('button[data-action]')) {
+    button.addEventListener('click', async (event) => {
+      const taskCard = event.target.closest('.task-card');
+      const taskId = taskCard?.dataset?.taskId;
+      if (!taskId) return;
+      const action = event.target.dataset.action;
+      await handleTaskAction(taskId, action);
+      if (onTasksReloaded) await onTasksReloaded();
+    });
+  }
+}
+
+async function handleTaskAction(taskId, action) {
+  try {
+    if (action === 'approve') {
+      await fetch(`/api/tasks/${encodeURIComponent(taskId)}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: 'Approved' }),
+      });
+    }
+
+    if (action === 'run') {
+      await fetch(`/api/tasks/${encodeURIComponent(taskId)}/run`, { method: 'POST' });
+    }
+
+    if (action === 'delete') {
+      await fetch(`/api/tasks/${encodeURIComponent(taskId)}`, { method: 'DELETE' });
+    }
+
+    if (action === 'logs') {
+      const response = await fetch(`/api/tasks/${encodeURIComponent(taskId)}/logs`);
+      const payload = await response.json();
+      const message = (payload.logs || [])
+        .slice(-5)
+        .map((log) => `${log.at} ${log.type}: ${(log.message || '').slice(0, 120)}`)
+        .join('\n');
+      alert(message || 'No logs');
+    }
+  } catch (error) {
+    alert(`Task action failed: ${String(error)}`);
+  }
+}
+
+// Status priority for pin coloring (higher index = more urgent)
+const STATUS_PRIORITY = ['done', 'approved', 'open', 'running', 'failed'];
+
+export function getMostUrgentStatus(tasks) {
+  let best = 'open';
+  let bestIdx = STATUS_PRIORITY.indexOf('open');
+  for (const task of tasks) {
+    const idx = STATUS_PRIORITY.indexOf(task.status.toLowerCase());
+    if (idx > bestIdx) {
+      best = task.status.toLowerCase();
+      bestIdx = idx;
+    }
+  }
+  return best;
+}
+
+function escHtml(value) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}

package/packages/viewer/public/index.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BGX Viewer</title>
+    <link rel="stylesheet" href="/styles.css" />
+  </head>
+  <body>
+
+    <!-- Layer 1: Full-screen canvas -->
+    <div id="canvasRoot">
+      <svg id="graphSvg" role="img" aria-label="Graph" xmlns="http://www.w3.org/2000/svg">
+        <g id="canvasGroup"></g>
+      </svg>
+    </div>
+
+    <!-- Layer 2: Floating toolbar (Figma-style top bar) -->
+    <div id="toolbar">
+      <span id="projectName" class="toolbar-title">BGX Viewer</span>
+
+      <div id="toolbarControls">
+        <label class="ctrl-label">
+          <span class="ctrl-name">Group</span>
+          <select id="groupBy">
+            <option value="endpoint">Endpoint</option>
+            <option value="agent">Agent</option>
+            <option value="purpose">Purpose</option>
+          </select>
+        </label>
+        <label class="ctrl-label">
+          <span class="ctrl-name">Filter</span>
+          <select id="groupItem">
+            <option value="">All</option>
+          </select>
+        </label>
+        <label class="ctrl-label ctrl-search">
+          <span class="ctrl-name">Search</span>
+          <input id="search" type="text" placeholder="node label or kind…" />
+        </label>
+      </div>
+
+      <div id="toolbarActions">
+        <button id="resetViewBtn" title="Reset canvas view (Space)" class="btn-ghost">&#8635; Reset</button>
+        <button id="themeToggleBtn" title="Toggle dark / light mode" class="btn-ghost">&#9681; Theme</button>
+        <span id="summaryBadge" class="summary-badge"></span>
+      </div>
+    </div>
+
+    <!-- Layer 3: Code sidebar (slides in from right) -->
+    <aside id="codeSidebar" class="sidebar" aria-hidden="true">
+      <div class="sidebar__header">
+        <div class="sidebar__title">
+          <span id="sidebarNodeTitle"></span>
+        </div>
+        <button id="closeSidebarBtn" class="btn-icon" title="Close sidebar (Esc)">&#x2715;</button>
+      </div>
+      <div id="sidebarContent" class="sidebar__body"></div>
+    </aside>
+
+    <!-- Layer 4: Comment thread overlay (floats near pin) -->
+    <div id="commentOverlay" class="overlay" aria-hidden="true">
+      <div class="overlay__header">
+        <strong id="commentOverlayTitle">Comments</strong>
+        <button id="closeCommentOverlayBtn" class="btn-icon" title="Close">&#x2715;</button>
+      </div>
+      <div id="commentThread" class="overlay__thread"></div>
+      <div class="overlay__form">
+        <form id="taskForm">
+          <div class="form-row">
+            <label class="ctrl-label">
+              <span class="ctrl-name">Executor</span>
+              <select id="taskExecutor">
+                <option value="claude">Claude</option>
+                <option value="codex">Codex</option>
+              </select>
+            </label>
+          </div>
+          <textarea id="taskPrompt" rows="3" placeholder="Describe a requested change or question…"></textarea>
+          <button type="submit" class="btn-primary">Add Comment</button>
+        </form>
+      </div>
+    </div>
+
+    <!-- Layer 5: Minimap -->
+    <div id="minimap">
+      <svg id="minimapSvg" xmlns="http://www.w3.org/2000/svg"></svg>
+    </div>
+
+    <!-- Layer 6: Node tooltip -->
+    <div id="nodeTooltip" class="tooltip" aria-hidden="true"></div>
+
+    <script src="/app.js" type="module"></script>
+  </body>
+</html>

package/packages/viewer/public/layout.js

@@ -0,0 +1,72 @@
+// layout.js — DAG layout algorithm (unchanged from original app.js)
+
+export function buildLayers(nodes, edges) {
+  const nodeIds = nodes.map((node) => node.id);
+  const inDegree = new Map(nodeIds.map((id) => [id, 0]));
+  const outgoing = new Map(nodeIds.map((id) => [id, []]));
+
+  for (const edge of edges) {
+    if (!inDegree.has(edge.to) || !outgoing.has(edge.from)) continue;
+    inDegree.set(edge.to, (inDegree.get(edge.to) ?? 0) + 1);
+    outgoing.get(edge.from).push(edge.to);
+  }
+
+  const queue = [];
+  for (const [id, count] of inDegree.entries()) {
+    if (count === 0) queue.push(id);
+  }
+  if (!queue.length) {
+    queue.push(nodeIds[0]);
+  }
+
+  const layer = new Map();
+  for (const id of queue) layer.set(id, 0);
+
+  while (queue.length) {
+    const id = queue.shift();
+    const base = layer.get(id) ?? 0;
+
+    for (const next of outgoing.get(id) ?? []) {
+      const candidate = base + 1;
+      if (!layer.has(next) || candidate > layer.get(next)) {
+        layer.set(next, candidate);
+      }
+      inDegree.set(next, (inDegree.get(next) ?? 1) - 1);
+      if ((inDegree.get(next) ?? 0) <= 0) {
+        queue.push(next);
+      }
+    }
+  }
+
+  for (const id of nodeIds) {
+    if (!layer.has(id)) layer.set(id, 0);
+  }
+
+  return layer;
+}
+
+export function layoutDag(nodes, edges) {
+  const layers = buildLayers(nodes, edges);
+  const grouped = new Map();
+
+  for (const node of nodes) {
+    const depth = layers.get(node.id) ?? 0;
+    if (!grouped.has(depth)) grouped.set(depth, []);
+    grouped.get(depth).push(node);
+  }
+
+  const points = new Map();
+  const sortedLayers = [...grouped.keys()].sort((a, b) => a - b);
+
+  for (const depth of sortedLayers) {
+    const items = grouped.get(depth).slice().sort((a, b) => a.label.localeCompare(b.label));
+    for (let index = 0; index < items.length; index += 1) {
+      points.set(items[index].id, {
+        x: 180 + depth * 280,
+        y: 100 + index * 130,
+      });
+    }
+  }
+
+  return points;
+}

package/packages/viewer/public/minimap.js

@@ -0,0 +1,92 @@
+// minimap.js — Overview minimap at bottom-right
+
+const MM_W = 180;
+const MM_H = 120;
+
+let minimapSvg = null;
+let minimapViewport = null;
+let viewRef = null; // reference to current view nodes
+
+// Cached world bounds for click-to-navigate
+let worldBounds = { minX: 0, minY: 0, mmScale: 1 };
+
+export function initMinimap(view) {
+  minimapSvg = document.getElementById('minimapSvg');
+  minimapViewport = document.getElementById('minimapViewport');
+  viewRef = view;
+
+  minimapSvg.addEventListener('click', onMinimapClick);
+}
+
+export function setMinimapView(view) {
+  viewRef = view;
+}
+
+export function updateMinimap(canvasTransform, nodePositions, graphSvg) {
+  if (!minimapSvg || !nodePositions.size) return;
+
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const pos of nodePositions.values()) {
+    minX = Math.min(minX, pos.x - 90);
+    minY = Math.min(minY, pos.y - 30);
+    maxX = Math.max(maxX, pos.x + 90);
+    maxY = Math.max(maxY, pos.y + 30);
+  }
+
+  const worldW = maxX - minX + 80;
+  const worldH = maxY - minY + 80;
+  const mmScaleX = MM_W / worldW;
+  const mmScaleY = MM_H / worldH;
+  const mmScale = Math.min(mmScaleX, mmScaleY);
+
+  worldBounds = { minX, minY, mmScale };
+
+  // Clear and re-render node dots
+  minimapSvg.innerHTML = '';
+
+  for (const [nodeId, pos] of nodePositions) {
+    const node = viewRef?.nodes?.find((n) => n.id === nodeId);
+    const dot = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    dot.setAttribute('x', String((pos.x - minX) * mmScale));
+    dot.setAttribute('y', String((pos.y - minY) * mmScale));
+    dot.setAttribute('width', '8');
+    dot.setAttribute('height', '5');
+    dot.setAttribute('rx', '1');
+    dot.setAttribute('class', `mm-node mm-${node?.kind ?? 'default'}`);
+    minimapSvg.appendChild(dot);
+  }
+
+  // Viewport rectangle
+  if (graphSvg) {
+    const rect = graphSvg.getBoundingClientRect();
+    const vpLeft   = (-canvasTransform.x / canvasTransform.scale - minX) * mmScale;
+    const vpTop    = (-canvasTransform.y / canvasTransform.scale - minY) * mmScale;
+    const vpRight  = vpLeft + (rect.width / canvasTransform.scale) * mmScale;
+    const vpBottom = vpTop  + (rect.height / canvasTransform.scale) * mmScale;
+
+    const vpEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    vpEl.setAttribute('x', String(Math.max(vpLeft, 0)));
+    vpEl.setAttribute('y', String(Math.max(vpTop, 0)));
+    vpEl.setAttribute('width', String(Math.max(0, Math.min(vpRight, MM_W) - Math.max(vpLeft, 0))));
+    vpEl.setAttribute('height', String(Math.max(0, Math.min(vpBottom, MM_H) - Math.max(vpTop, 0))));
+    vpEl.setAttribute('class', 'mm-viewport');
+    minimapSvg.appendChild(vpEl);
+  }
+}
+
+function onMinimapClick(e) {
+  const rect = minimapSvg.getBoundingClientRect();
+  const mmX = e.clientX - rect.left;
+  const mmY = e.clientY - rect.top;
+
+  const { minX, minY, mmScale } = worldBounds;
+  if (mmScale === 0) return;
+
+  const worldX = mmX / mmScale + minX;
+  const worldY = mmY / mmScale + minY;
+
+  // Import canvasTransform at runtime to avoid circular dep — use global reference
+  if (window.__bgxPanToWorld) {
+    window.__bgxPanToWorld(worldX, worldY);
+  }
+}