archgraph 0.1.0

package/packages/viewer/public/theme.js

@@ -0,0 +1,19 @@
+// theme.js — Dark / light mode toggle
+
+const STORAGE_KEY = 'bgx-theme';
+
+export function initTheme() {
+  const saved = localStorage.getItem(STORAGE_KEY) ?? 'light';
+  document.documentElement.setAttribute('data-theme', saved);
+}
+
+export function toggleTheme() {
+  const current = document.documentElement.getAttribute('data-theme');
+  const next = current === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', next);
+  localStorage.setItem(STORAGE_KEY, next);
+}
+
+export function isDark() {
+  return document.documentElement.getAttribute('data-theme') === 'dark';
+}

package/packages/viewer/public/tooltip.js

@@ -0,0 +1,44 @@
+// tooltip.js — Node hover tooltip
+
+let tooltipEl = null;
+
+export function initTooltip() {
+  tooltipEl = document.getElementById('nodeTooltip');
+}
+
+export function showTooltip(clientX, clientY, node) {
+  if (!tooltipEl) return;
+  tooltipEl.innerHTML = `
+    <strong>${escHtml(node.label)}</strong>
+    <div class="tooltip-kind">${escHtml(node.kind)}</div>
+    ${node.file ? `<div class="tooltip-file">${escHtml(node.file)}</div>` : ''}
+  `;
+  tooltipEl.classList.add('tooltip--visible');
+  moveTooltip(clientX, clientY);
+}
+
+export function moveTooltip(clientX, clientY) {
+  if (!tooltipEl) return;
+  const TW = tooltipEl.offsetWidth || 200;
+  const TH = tooltipEl.offsetHeight || 60;
+  let left = clientX + 14;
+  let top = clientY - 10;
+  if (left + TW > window.innerWidth - 8) left = clientX - TW - 8;
+  if (top + TH > window.innerHeight - 8) top = clientY - TH - 8;
+  tooltipEl.style.left = `${left}px`;
+  tooltipEl.style.top = `${top}px`;
+}
+
+export function hideTooltip() {
+  if (!tooltipEl) return;
+  tooltipEl.classList.remove('tooltip--visible');
+}
+
+function escHtml(value) {
+  return String(value)
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}

package/packages/viewer/src/index.js

@@ -0,0 +1,590 @@
+import { spawn } from 'node:child_process';
+import { createServer } from 'node:http';
+import { mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { dirname, isAbsolute, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const TASK_STATUSES = new Set(['Open', 'Approved', 'Running', 'Done', 'Failed']);
+
+function resolvePublicRoot() {
+  const thisFile = fileURLToPath(import.meta.url);
+  const thisDir = dirname(thisFile);
+  return join(thisDir, '..', 'public');
+}
+
+function nowIso() {
+  return new Date().toISOString();
+}
+
+function slug(value) {
+  return String(value)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 36);
+}
+
+function makeApiError(status, code, message) {
+  const error = new Error(message);
+  error.status = status;
+  error.code = code;
+  return error;
+}
+
+function toBool(value) {
+  if (typeof value === 'boolean') return value;
+  if (typeof value !== 'string') return false;
+  return value === '1' || value.toLowerCase() === 'true';
+}
+
+function normalizeLoc(loc) {
+  if (!loc || typeof loc !== 'object') return null;
+  if (!Number.isInteger(loc.startLine) || !Number.isInteger(loc.endLine)) return null;
+  return {
+    startLine: loc.startLine,
+    startCol: Number.isInteger(loc.startCol) ? loc.startCol : 1,
+    endLine: loc.endLine,
+    endCol: Number.isInteger(loc.endCol) ? loc.endCol : 1,
+  };
+}
+
+function lineRangeText(target) {
+  const file = target.file ?? 'unknown-file';
+  const loc = normalizeLoc(target.loc);
+  if (!loc) return file;
+  return `${file}:${loc.startLine}-${loc.endLine}`;
+}
+
+function formatTaskPrompt(task) {
+  const target = task.target ?? {};
+  const symbol = target.symbol ?? target.nodeId ?? 'unknown-symbol';
+  const location = lineRangeText(target);
+  return `@${location} > ${symbol} + {${task.userPrompt}}`;
+}
+
+function getSnippet(text, loc, radius = 5) {
+  const lines = text.split('\n');
+  const normalized = normalizeLoc(loc);
+
+  const start = normalized ? Math.max(normalized.startLine - radius, 1) : 1;
+  const end = normalized ? Math.min(normalized.endLine + radius, lines.length) : Math.min(lines.length, 120);
+
+  const snippet = [];
+  for (let i = start; i <= end; i += 1) {
+    const raw = lines[i - 1] ?? '';
+    snippet.push(`${String(i).padStart(4, ' ')} | ${raw}`);
+  }
+
+  return {
+    startLine: start,
+    endLine: end,
+    text: snippet.join('\n'),
+  };
+}
+
+async function pathExists(path) {
+  try {
+    await readFile(path, 'utf8');
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function runProcess(command, args, cwd) {
+  return new Promise((resolveResult) => {
+    const child = spawn(command, args, { cwd, stdio: ['ignore', 'pipe', 'pipe'] });
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout.on('data', (chunk) => {
+      stdout += chunk;
+    });
+    child.stderr.on('data', (chunk) => {
+      stderr += chunk;
+    });
+
+    child.on('error', (error) => {
+      resolveResult({ ok: false, exitCode: -1, stdout, stderr: `${stderr}${error.message}` });
+    });
+
+    child.on('close', (code) => {
+      resolveResult({ ok: code === 0, exitCode: code ?? -1, stdout, stderr });
+    });
+  });
+}
+
+async function readJson(path, fallback = null) {
+  try {
+    const text = await readFile(path, 'utf8');
+    return JSON.parse(text);
+  } catch {
+    return fallback;
+  }
+}
+
+async function writeJsonAtomic(path, payload) {
+  await mkdir(dirname(path), { recursive: true });
+  const tempPath = `${path}.tmp-${Date.now()}`;
+  await writeFile(tempPath, `${JSON.stringify(payload, null, 2)}\n`, 'utf8');
+  await rename(tempPath, path);
+}
+
+export async function createViewerService(options) {
+  const graph = options.graph;
+  const view = options.view ?? { spec: { version: '1' }, nodes: graph.nodes, edges: graph.edges, groups: graph.groups };
+  const repoRoot = resolve(options.repoRoot ?? graph?.project?.rootPath ?? process.cwd());
+  const tasksFile = options.tasksFile ?? join(repoRoot, '.bgx', 'comment-tasks.json');
+  const executorConfigPath = options.executorConfigPath ?? join(repoRoot, '.bgx', 'executors.json');
+  const descriptionsPath = options.descriptionsPath ?? null;
+
+  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+  const edges = graph.edges ?? [];
+
+  async function loadTasksStore() {
+    const initial = {
+      version: '1',
+      tasks: [],
+    };
+    const existing = await readJson(tasksFile, initial);
+    if (!existing || typeof existing !== 'object' || !Array.isArray(existing.tasks)) {
+      return initial;
+    }
+    return existing;
+  }
+
+  async function saveTasksStore(store) {
+    await writeJsonAtomic(tasksFile, store);
+  }
+
+  function getTaskById(store, taskId) {
+    return store.tasks.find((task) => task.id === taskId) ?? null;
+  }
+
+  function nextTaskId(store) {
+    let max = 0;
+    for (const task of store.tasks) {
+      const match = /^task-(\d+)$/.exec(task.id ?? '');
+      if (!match) continue;
+      const n = Number(match[1]);
+      if (Number.isFinite(n) && n > max) max = n;
+    }
+    return `task-${String(max + 1).padStart(6, '0')}`;
+  }
+
+  function resolveNodeFilePath(node) {
+    if (!node?.file) return null;
+    return isAbsolute(node.file) ? node.file : resolve(repoRoot, node.file);
+  }
+
+  async function getNodeCode(nodeId) {
+    const node = nodeById.get(nodeId);
+    if (!node) {
+      throw makeApiError(404, 'NODE_NOT_FOUND', `Node not found: ${nodeId}`);
+    }
+
+    const absolutePath = resolveNodeFilePath(node);
+    let snippet = '';
+    if (absolutePath && (await pathExists(absolutePath))) {
+      const text = await readFile(absolutePath, 'utf8');
+      snippet = getSnippet(text, node.meta?.loc).text;
+    }
+
+    const relatedEdgeEntries = edges.filter((edge) => edge.from === nodeId || edge.to === nodeId).slice(0, 24);
+    const related = [];
+    for (const edge of relatedEdgeEntries) {
+      const relatedNodeId = edge.from === nodeId ? edge.to : edge.from;
+      const relatedNode = nodeById.get(relatedNodeId);
+      if (!relatedNode) continue;
+
+      const relatedFilePath = resolveNodeFilePath(relatedNode);
+      let relatedSnippet = '';
+      if (relatedFilePath && (await pathExists(relatedFilePath))) {
+        const text = await readFile(relatedFilePath, 'utf8');
+        relatedSnippet = getSnippet(text, relatedNode.meta?.loc, 3).text;
+      }
+
+      related.push({
+        edge,
+        node: relatedNode,
+        snippet: relatedSnippet,
+      });
+    }
+
+    return {
+      node,
+      filePath: node.file ?? null,
+      snippet,
+      related,
+    };
+  }
+
+  async function listTasks({ status, nodeId, includeDeleted } = {}) {
+    const store = await loadTasksStore();
+    let tasks = [...store.tasks];
+
+    if (!toBool(includeDeleted)) {
+      tasks = tasks.filter((task) => !task.deleted);
+    }
+
+    if (status) {
+      const statuses = new Set(String(status).split(',').map((value) => value.trim()).filter(Boolean));
+      tasks = tasks.filter((task) => statuses.has(task.status));
+    }
+
+    if (nodeId) {
+      tasks = tasks.filter((task) => task.target?.nodeId === nodeId);
+    }
+
+    tasks.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+    return { tasks };
+  }
+
+  async function createTask(input) {
+    const nodeId = input?.nodeId;
+    const userPrompt = (input?.userPrompt ?? '').trim();
+    const executor = input?.executor ?? 'codex';
+
+    if (!nodeId || !nodeById.has(nodeId)) {
+      throw makeApiError(400, 'INVALID_NODE', 'nodeId is required and must exist in graph');
+    }
+    if (!userPrompt) {
+      throw makeApiError(400, 'INVALID_PROMPT', 'userPrompt is required');
+    }
+    if (!['codex', 'claude'].includes(executor)) {
+      throw makeApiError(400, 'INVALID_EXECUTOR', 'executor must be codex or claude');
+    }
+
+    const node = nodeById.get(nodeId);
+    const target = {
+      nodeId,
+      file: node.file ?? null,
+      symbol: node.symbol ?? node.label ?? nodeId,
+      loc: normalizeLoc(node.meta?.loc),
+    };
+
+    const store = await loadTasksStore();
+    const createdAt = nowIso();
+
+    const task = {
+      id: nextTaskId(store),
+      createdAt,
+      updatedAt: createdAt,
+      deleted: false,
+      status: 'Open',
+      executor,
+      target,
+      userPrompt,
+      formattedPrompt: '',
+      branch: null,
+      commit: null,
+      logs: [],
+      error: null,
+    };
+
+    task.formattedPrompt = formatTaskPrompt(task);
+
+    store.tasks.push(task);
+    await saveTasksStore(store);
+    return task;
+  }
+
+  async function updateTask(taskId, input) {
+    const store = await loadTasksStore();
+    const task = getTaskById(store, taskId);
+    if (!task) {
+      throw makeApiError(404, 'TASK_NOT_FOUND', `Task not found: ${taskId}`);
+    }
+
+    if (typeof input?.status === 'string') {
+      if (!TASK_STATUSES.has(input.status)) {
+        throw makeApiError(400, 'INVALID_STATUS', `Unsupported status: ${input.status}`);
+      }
+      task.status = input.status;
+    }
+
+    if (typeof input?.executor === 'string') {
+      if (!['codex', 'claude'].includes(input.executor)) {
+        throw makeApiError(400, 'INVALID_EXECUTOR', 'executor must be codex or claude');
+      }
+      task.executor = input.executor;
+    }
+
+    if (typeof input?.userPrompt === 'string') {
+      task.userPrompt = input.userPrompt.trim();
+      if (!task.userPrompt) {
+        throw makeApiError(400, 'INVALID_PROMPT', 'userPrompt cannot be empty');
+      }
+    }
+
+    task.formattedPrompt = formatTaskPrompt(task);
+    task.updatedAt = nowIso();
+    await saveTasksStore(store);
+    return task;
+  }
+
+  async function deleteTask(taskId) {
+    const store = await loadTasksStore();
+    const task = getTaskById(store, taskId);
+    if (!task) {
+      throw makeApiError(404, 'TASK_NOT_FOUND', `Task not found: ${taskId}`);
+    }
+
+    task.deleted = true;
+    task.updatedAt = nowIso();
+    await saveTasksStore(store);
+    return task;
+  }
+
+  async function getTaskLogs(taskId) {
+    const store = await loadTasksStore();
+    const task = getTaskById(store, taskId);
+    if (!task) {
+      throw makeApiError(404, 'TASK_NOT_FOUND', `Task not found: ${taskId}`);
+    }
+    return { logs: task.logs ?? [] };
+  }
+
+  async function isGitRepo() {
+    const result = await runProcess('git', ['rev-parse', '--is-inside-work-tree'], repoRoot);
+    return result.ok && String(result.stdout).trim() === 'true';
+  }
+
+  async function runTask(taskId) {
+    const store = await loadTasksStore();
+    const task = getTaskById(store, taskId);
+    if (!task) {
+      throw makeApiError(404, 'TASK_NOT_FOUND', `Task not found: ${taskId}`);
+    }
+    if (task.status !== 'Approved') {
+      throw makeApiError(409, 'TASK_NOT_APPROVED', 'Task must be approved before execution');
+    }
+
+    task.status = 'Running';
+    task.error = null;
+    task.updatedAt = nowIso();
+    task.logs = task.logs ?? [];
+    task.logs.push({ at: nowIso(), type: 'status', message: 'Execution started' });
+    await saveTasksStore(store);
+
+    const config = await readJson(executorConfigPath, null);
+    const executorDef = config?.[task.executor];
+
+    if (!executorDef?.cmd || !Array.isArray(executorDef.args)) {
+      task.status = 'Failed';
+      task.error = `Executor not configured: ${task.executor}`;
+      task.updatedAt = nowIso();
+      task.logs.push({ at: nowIso(), type: 'error', message: task.error });
+      await saveTasksStore(store);
+      return task;
+    }
+
+    const prompt = task.formattedPrompt || formatTaskPrompt(task);
+    const args = executorDef.args.map((value) => String(value).replaceAll('{PROMPT}', prompt));
+
+    let gitEnabled = false;
+    if (await isGitRepo()) {
+      gitEnabled = true;
+      const branch = `codex/comment-${task.id}-${slug(task.target?.symbol ?? task.id) || 'task'}`;
+      task.branch = branch;
+      const checkout = await runProcess('git', ['checkout', '-B', branch], repoRoot);
+      task.logs.push({ at: nowIso(), type: 'git', message: `checkout -B ${branch}`, stdout: checkout.stdout, stderr: checkout.stderr });
+      if (!checkout.ok) {
+        gitEnabled = false;
+      }
+    }
+
+    const execution = await runProcess(executorDef.cmd, args, repoRoot);
+    task.logs.push({
+      at: nowIso(),
+      type: 'executor',
+      message: `${executorDef.cmd} ${args.join(' ')}`,
+      exitCode: execution.exitCode,
+      stdout: execution.stdout,
+      stderr: execution.stderr,
+    });
+
+    if (gitEnabled) {
+      const status = await runProcess('git', ['status', '--porcelain'], repoRoot);
+      const hasChanges = Boolean(status.stdout.trim());
+      if (hasChanges) {
+        const add = await runProcess('git', ['add', '-A'], repoRoot);
+        task.logs.push({ at: nowIso(), type: 'git', message: 'git add -A', stdout: add.stdout, stderr: add.stderr });
+
+        const commit = await runProcess('git', ['commit', '-m', `feat(comment-task): apply ${task.id}`], repoRoot);
+        task.logs.push({
+          at: nowIso(),
+          type: 'git',
+          message: `git commit for ${task.id}`,
+          stdout: commit.stdout,
+          stderr: commit.stderr,
+        });
+
+        if (commit.ok) {
+          const sha = await runProcess('git', ['rev-parse', 'HEAD'], repoRoot);
+          if (sha.ok) {
+            task.commit = sha.stdout.trim();
+          }
+        }
+      }
+    }
+
+    if (execution.ok) {
+      task.status = 'Done';
+    } else {
+      task.status = 'Failed';
+      task.error = execution.stderr || `Executor exited with ${execution.exitCode}`;
+    }
+    task.updatedAt = nowIso();
+    await saveTasksStore(store);
+    return task;
+  }
+
+  async function getDescriptions() {
+    if (!descriptionsPath) return { descriptions: null };
+    const descriptions = await readJson(descriptionsPath, null);
+    return { descriptions };
+  }
+
+  return {
+    graph,
+    view,
+    repoRoot,
+    listTasks,
+    createTask,
+    updateTask,
+    deleteTask,
+    runTask,
+    getTaskLogs,
+    getNodeCode,
+    getDescriptions,
+  };
+}
+
+async function serveStatic(pathname) {
+  const publicRoot = resolvePublicRoot();
+  const target = pathname === '/' ? 'index.html' : pathname.slice(1);
+  const filePath = join(publicRoot, target);
+  const body = await readFile(filePath, 'utf8');
+  const type = pathname.endsWith('.css')
+    ? 'text/css; charset=utf-8'
+    : pathname.endsWith('.js')
+      ? 'text/javascript; charset=utf-8'
+      : 'text/html; charset=utf-8';
+  return { body, type };
+}
+
+function sendJson(res, status, payload) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8' });
+  res.end(JSON.stringify(payload));
+}
+
+function parseBody(req) {
+  return new Promise((resolveBody, rejectBody) => {
+    const chunks = [];
+    req.on('data', (chunk) => chunks.push(chunk));
+    req.on('end', () => {
+      if (!chunks.length) {
+        resolveBody({});
+        return;
+      }
+      try {
+        const parsed = JSON.parse(Buffer.concat(chunks).toString('utf8'));
+        resolveBody(parsed);
+      } catch {
+        rejectBody(makeApiError(400, 'INVALID_JSON', 'Request body must be valid JSON'));
+      }
+    });
+    req.on('error', rejectBody);
+  });
+}
+
+export async function startViewerServer(options) {
+  const port = options.port ?? 4310;
+  const service = await createViewerService(options);
+
+  const server = createServer(async (req, res) => {
+    try {
+      const url = new URL(req.url ?? '/', 'http://127.0.0.1');
+
+      if (url.pathname === '/api/graph') {
+        sendJson(res, 200, service.graph);
+        return;
+      }
+      if (url.pathname === '/api/view') {
+        sendJson(res, 200, service.view);
+        return;
+      }
+      if (url.pathname === '/api/descriptions') {
+        sendJson(res, 200, await service.getDescriptions());
+        return;
+      }
+
+      if (url.pathname.startsWith('/api/node/') && url.pathname.endsWith('/code') && req.method === 'GET') {
+        const nodeId = decodeURIComponent(url.pathname.slice('/api/node/'.length, -'/code'.length));
+        sendJson(res, 200, await service.getNodeCode(nodeId));
+        return;
+      }
+
+      if (url.pathname === '/api/tasks') {
+        if (req.method === 'GET') {
+          sendJson(
+            res,
+            200,
+            await service.listTasks({
+              status: url.searchParams.get('status') ?? undefined,
+              nodeId: url.searchParams.get('nodeId') ?? undefined,
+              includeDeleted: url.searchParams.get('includeDeleted') ?? undefined,
+            }),
+          );
+          return;
+        }
+
+        if (req.method === 'POST') {
+          const body = await parseBody(req);
+          sendJson(res, 201, await service.createTask(body));
+          return;
+        }
+      }
+
+      if (url.pathname.startsWith('/api/tasks/')) {
+        const remainder = url.pathname.slice('/api/tasks/'.length);
+        if (remainder.endsWith('/run') && req.method === 'POST') {
+          const taskId = decodeURIComponent(remainder.slice(0, -'/run'.length));
+          sendJson(res, 200, await service.runTask(taskId));
+          return;
+        }
+        if (remainder.endsWith('/logs') && req.method === 'GET') {
+          const taskId = decodeURIComponent(remainder.slice(0, -'/logs'.length));
+          sendJson(res, 200, await service.getTaskLogs(taskId));
+          return;
+        }
+
+        const taskId = decodeURIComponent(remainder);
+        if (req.method === 'PATCH') {
+          const body = await parseBody(req);
+          sendJson(res, 200, await service.updateTask(taskId, body));
+          return;
+        }
+        if (req.method === 'DELETE') {
+          sendJson(res, 200, await service.deleteTask(taskId));
+          return;
+        }
+      }
+
+      const asset = await serveStatic(url.pathname);
+      res.writeHead(200, { 'Content-Type': asset.type });
+      res.end(asset.body);
+    } catch (error) {
+      if (error?.status) {
+        sendJson(res, error.status, { error: error.message, code: error.code ?? 'UNKNOWN' });
+        return;
+      }
+      sendJson(res, 500, { error: String(error), code: 'INTERNAL_ERROR' });
+    }
+  });
+
+  await new Promise((resolveReady) => server.listen(port, '127.0.0.1', resolveReady));
+  console.log(`Viewer running at http://localhost:${server.address().port}`);
+  return server;
+}