@jmanuelcorral/openteam 0.1.41 → 0.1.42

package/dist/cli.js

@@ -33,6 +33,50 @@ function eventSessionID(event) {
   }
   return str(props.sessionID) ?? str(asRecord(props.part)?.sessionID) ?? str(asRecord(props.info)?.sessionID);
 }
+function partToFrame(part) {
+  if (part.type === "text") {
+    const text = str(part.text);
+    return text === undefined ? undefined : { kind: "text", text };
+  }
+  if (part.type === "tool") {
+    const tool = str(part.tool) ?? "tool";
+    const status = str(asRecord(part.state)?.status) ?? "run";
+    return { kind: "tool", text: `⚙ ${tool} · ${status}` };
+  }
+  return;
+}
+function messagesToFrames(raw, sessionID) {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  const frames = [];
+  for (const entry of raw) {
+    const record = asRecord(entry);
+    if (record === undefined) {
+      continue;
+    }
+    const info = asRecord(record.info);
+    const entrySession = str(info?.sessionID) ?? str(record.sessionID);
+    if (entrySession !== undefined && entrySession !== sessionID) {
+      continue;
+    }
+    const parts = record.parts;
+    if (!Array.isArray(parts)) {
+      continue;
+    }
+    for (const rawPart of parts) {
+      const part = asRecord(rawPart);
+      if (part === undefined) {
+        continue;
+      }
+      const frame = partToFrame(part);
+      if (frame !== undefined) {
+        frames.push(frame);
+      }
+    }
+  }
+  return frames;
+}
 function eventToSessionFrame(event, sessionID) {
   if (eventSessionID(event) !== sessionID) {
     return;
@@ -41,19 +85,7 @@ function eventToSessionFrame(event, sessionID) {
   switch (event.type) {
     case "message.part.updated": {
       const part = asRecord(props.part);
-      if (part === undefined) {
-        return;
-      }
-      if (part.type === "text") {
-        const text = str(part.text);
-        return text === undefined ? undefined : { kind: "text", text };
-      }
-      if (part.type === "tool") {
-        const tool = str(part.tool) ?? "tool";
-        const status = str(asRecord(part.state)?.status) ?? "run";
-        return { kind: "tool", text: `⚙ ${tool} · ${status}` };
-      }
-      return;
+      return part === undefined ? undefined : partToFrame(part);
     }
     case "session.idle":
       return { kind: "status", text: "● sesión lista" };
@@ -163,6 +195,16 @@ function createConsoleClient(deps) {
     async respondPermission(sessionID, permissionID, response) {
       await post(`/session/${encodeURIComponent(sessionID)}/permissions/${encodeURIComponent(permissionID)}`, { response });
     },
+    async listMessages(sessionID) {
+      const res = await doFetch(`${base}/session/${encodeURIComponent(sessionID)}/message`, { headers: { accept: "application/json", ...authHeaders } });
+      let raw;
+      try {
+        raw = await res.json();
+      } catch {
+        return [];
+      }
+      return messagesToFrames(raw, sessionID);
+    },
     async streamFrames(sessionID, onFrame, signal) {
       const res = await doFetch(`${base}/global/event`, {
         headers: { accept: "text/event-stream", ...authHeaders },
@@ -631,7 +673,10 @@ var BaselineModeSchema = z3.enum(["auto", "pinned"]);
 var GraphModeSchema = z3.enum(["off", "shadow", "active"]);
 var GraphConfigSchema = z3.object({
   mode: GraphModeSchema.default("off"),
-  killSwitch: z3.boolean().default(false)
+  killSwitch: z3.boolean().default(false),
+  worktrees: z3.object({
+    enabled: z3.boolean().default(false)
+  }).default({ enabled: false })
 });
 var ConsoleHostSchema = z3.enum(["127.0.0.1", "localhost"]);
 var ConsoleConfigSchema = z3.object({
@@ -645,7 +690,10 @@ var ConsoleConfigSchema = z3.object({
   terminal: z3.object({
     enabled: z3.boolean().default(true),
     pty: z3.boolean().optional()
-  }).default({ enabled: true })
+  }).default({ enabled: true }),
+  graphView: z3.object({
+    enabled: z3.boolean().default(false)
+  }).optional()
 }).default({
   host: "127.0.0.1",
   port: 4599,
@@ -1299,6 +1347,51 @@ code{font-family:ui-monospace,Consolas,monospace;background:#0b0d11;padding:1px
 .pty form.ptyinput button,.pty .pty-start{background:var(--frontier);color:#1a1200;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font:inherit;font-weight:600;margin-top:8px}
 .pty .pty-start:disabled{opacity:.5;cursor:default}
 `;
+var GRAPH_STYLE = `
+.graph-wrap{overflow:auto;background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:8px}
+svg.graph{display:block}
+.gedge{stroke:#3a4250;stroke-width:1.5;marker-end:url(#garrow)}
+.gnode rect{fill:var(--panel);stroke:var(--line);stroke-width:1.5;rx:8}
+.gnode .gname{fill:var(--fg);font:600 12px ui-monospace,Consolas,monospace}
+.gnode .grole{fill:var(--muted);font-size:11px}
+.gnode .gstate{font-size:10px;text-transform:uppercase;letter-spacing:.05em}
+.gnode.state-pending rect{stroke:#6e7681}
+.gnode.state-pending .gstate{fill:#6e7681}
+.gnode.state-ready rect{stroke:var(--local)}
+.gnode.state-ready .gstate{fill:var(--local)}
+.gnode.state-active rect{stroke:var(--frontier)}
+.gnode.state-active .gstate{fill:var(--frontier)}
+.gnode.state-succeeded rect{stroke:var(--good)}
+.gnode.state-succeeded .gstate{fill:var(--good)}
+.gnode.state-failed rect{stroke:#f85149}
+.gnode.state-failed .gstate{fill:#f85149}
+.gnode.state-cancelled rect{stroke:#484f58}
+.gnode.state-cancelled .gstate{fill:#484f58}
+.gbadge{font-size:10px;font-family:ui-monospace,Consolas,monospace}
+.gbadge.badge-retry{fill:var(--frontier)}
+.gbadge.badge-error{fill:#f85149}
+.gbadge.badge-cancelled{fill:#484f58}
+.gbadge.badge-verdict.verdict-approved{fill:var(--good)}
+.gbadge.badge-verdict.verdict-rejected{fill:#f85149}
+.gbadge.badge-verdict.verdict-inconclusive{fill:var(--frontier)}
+.gbadge.badge-lineage{fill:var(--local)}
+.gbadge.badge-artifact{fill:var(--muted)}
+.gnode[data-session]{cursor:pointer}
+.gnode[data-session]:hover rect{stroke-width:2.5}
+.graph-health{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
+.gchip{font-size:11px;padding:2px 10px;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
+.gchip.on{font-weight:600}
+.gchip.gh-recovery.on,.gchip.gh-unknown.on{color:var(--frontier);border-color:var(--frontier)}
+.gchip.gh-conflict.on,.gchip.gh-kill.on{color:#f85149;border-color:#f85149}
+.graph-drill{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
+.graph-drill h3{font-size:13px;margin:0 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
+.graph-drill .drilllog{background:#0b0d11;border:1px solid var(--line);border-radius:8px;padding:10px;max-height:280px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:pre-wrap}
+.graph-drill .drilllog .tl{padding:1px 0}
+.graph-drill .drilllog .tl.tool{color:var(--frontier)}
+.graph-drill .drilllog .tl.status{color:var(--muted)}
+.graph-drill .drilllog .tl.permission{color:var(--frontier);font-weight:600}
+.graph-drill .drilllog .tl.error{color:#f85149}
+`;
 var CONSOLE_CLIENT_JS = `
 (function(){
   var authTok='';
@@ -1424,6 +1517,47 @@ var CONSOLE_CLIENT_JS = `
 ');startBtn.disabled=false}
     }
   }
+  function wireGraphDrill(){
+    var root=document.documentElement;
+    if(root.getAttribute('data-drilldown')!=='1'){return}
+    var token=root.getAttribute('data-token');
+    if(!token){return}
+    var drill=document.querySelector('.graph-drill');
+    if(!drill){return}
+    var gview=drill.closest('.view');
+    if(!gview){return}
+    var log=drill.querySelector('.drilllog');
+    var title=drill.querySelector('.drill-title');
+    if(!log){return}
+    var es=null;
+    function append(cls,text){
+      var line=document.createElement('div');
+      line.className='tl '+cls;line.textContent=text;
+      log.appendChild(line);log.scrollTop=log.scrollHeight;
+    }
+    function open(id){
+      if(es){try{es.close()}catch(_){}}
+      log.textContent='';drill.hidden=false;
+      if(title){title.textContent='Conversación · '+id}
+      var tk='token='+encodeURIComponent(token);
+      var base='/console/session/'+encodeURIComponent(id);
+      fetch(base+'/messages?'+tk).then(function(r){return r.ok?r.json():Promise.reject(r.status)})
+        .then(function(d){(d&&d.frames||[]).forEach(function(f){append(f.kind,f.text)})})
+        .catch(function(s){append('error','✖ no se pudo cargar la conversación ('+s+')')});
+      if('EventSource' in window){
+        try{
+          es=new EventSource(base+'/stream?'+tk);
+          es.addEventListener('frame',function(e){try{var f=JSON.parse(e.data);append(f.kind,f.text)}catch(_){}}); 
+          es.onerror=function(){/* reconecta solo */};
+        }catch(_){/* ignore */}
+      }
+    }
+    gview.addEventListener('click',function(e){
+      var t=e.target;
+      while(t&&t!==gview&&!(t.getAttribute&&t.getAttribute('data-session'))){t=t.parentNode}
+      if(t&&t.getAttribute&&t.getAttribute('data-session')){open(t.getAttribute('data-session'))}
+    });
+  }
   var bar=document.getElementById('tabbar');
   if(bar){
     bar.addEventListener('click',function(e){
@@ -1435,6 +1569,7 @@ var CONSOLE_CLIENT_JS = `
   var saved='all';
   try{saved=sessionStorage.getItem('openteam.tab')||'all'}catch(e){}
   if(!selectTab(saved)){selectTab('all')}
+  wireGraphDrill();
 })();
 `;
 
@@ -1684,14 +1819,15 @@ var STATUS_LABELS = {
 function statusBadge(status) {
   return `<span class="badge status-${status}">${STATUS_LABELS[status]}</span>`;
 }
-function tabBar(sessions) {
+function tabBar(sessions, graphEnabled) {
   const allTab = '<button type="button" class="tab" data-tab="all">Todas</button>';
+  const graphTab = graphEnabled ? '<button type="button" class="tab" data-tab="graph">Grafo</button>' : "";
   const tabs = sessions.map((tab) => {
     const id = escapeHtml(tab.sessionID);
     const short = escapeHtml(shortSessionID(tab.sessionID));
     return `<button type="button" class="tab" data-tab="${id}"><span class="dot status-${tab.status}"></span>${short}</button>`;
   }).join("");
-  return `<nav class="tabs" id="tabbar">${allTab}${tabs}</nav>`;
+  return `<nav class="tabs" id="tabbar">${allTab}${graphTab}${tabs}</nav>`;
 }
 function shortSessionID(sessionID) {
   return sessionID.length <= 12 ? sessionID : `${sessionID.slice(0, 12)}…`;
@@ -1753,10 +1889,182 @@ function sessionView(tab, terminalEnabled, ptyEnabled) {
   ].join("");
   return `<div class="view" data-view="${escapeHtml(tab.sessionID)}" hidden>${body}</div>`;
 }
+var GRAPH_COL_W = 220;
+var GRAPH_ROW_H = 96;
+var GRAPH_NODE_W = 180;
+var GRAPH_NODE_H = 64;
+var GRAPH_PAD = 20;
+function computeLayers(projection) {
+  const layer = new Map;
+  for (const node of projection.nodes) {
+    layer.set(node.nodeID, 0);
+  }
+  for (let pass = 0;pass < projection.nodes.length; pass += 1) {
+    let changed = false;
+    for (const edge of projection.edges) {
+      const from = layer.get(edge.from);
+      const to = layer.get(edge.to);
+      if (from === undefined || to === undefined) {
+        continue;
+      }
+      if (from + 1 > to) {
+        layer.set(edge.to, from + 1);
+        changed = true;
+      }
+    }
+    if (!changed) {
+      break;
+    }
+  }
+  return layer;
+}
+function layoutNodes(projection) {
+  const layers = computeLayers(projection);
+  const byLayer = [];
+  for (const node of projection.nodes) {
+    const l = layers.get(node.nodeID) ?? 0;
+    let bucket = byLayer[l];
+    if (bucket === undefined) {
+      bucket = [];
+      byLayer[l] = bucket;
+    }
+    bucket.push(node.nodeID);
+  }
+  const pos = new Map;
+  let maxLayer = 0;
+  let maxRows = 0;
+  byLayer.forEach((ids, l) => {
+    if (l > maxLayer) {
+      maxLayer = l;
+    }
+    if (ids.length > maxRows) {
+      maxRows = ids.length;
+    }
+    ids.forEach((id, row) => {
+      pos.set(id, {
+        x: GRAPH_PAD + l * GRAPH_COL_W,
+        y: GRAPH_PAD + row * GRAPH_ROW_H
+      });
+    });
+  });
+  const width = GRAPH_PAD * 2 + maxLayer * GRAPH_COL_W + GRAPH_NODE_W;
+  const height = GRAPH_PAD * 2 + Math.max(0, maxRows - 1) * GRAPH_ROW_H + GRAPH_NODE_H;
+  return { pos, width, height };
+}
+function nodeBadges(node) {
+  const badges = [];
+  if (node.attempts > 1) {
+    badges.push({ cls: "badge-retry", text: `⟳${node.attempts}` });
+  }
+  if (node.lastErrorClass !== undefined) {
+    badges.push({
+      cls: `badge-error err-${node.lastErrorClass}`,
+      text: `⚠${node.lastErrorClass}`
+    });
+  }
+  if (node.state === "cancelled") {
+    badges.push({ cls: "badge-cancelled", text: "⊘" });
+  }
+  if (node.review !== undefined) {
+    const symbol = node.review.verdict === "approved" ? "✓" : node.review.verdict === "rejected" ? "✗" : "?";
+    badges.push({
+      cls: `badge-verdict verdict-${node.review.verdict}`,
+      text: node.review.reassigned ? `${symbol}↔` : symbol
+    });
+  }
+  if (node.revisionOf !== undefined) {
+    badges.push({
+      cls: "badge-lineage",
+      text: `↺${escapeHtml(node.revisionOf)}`
+    });
+  }
+  if (node.artifact !== undefined) {
+    badges.push({ cls: "badge-artifact", text: "⧉" });
+  }
+  return badges;
+}
+function nodeSvg(node, at) {
+  const badges = nodeBadges(node).map((badge, index) => `<text class="gbadge ${badge.cls}" x="${10 + index * 34}" y="58">${badge.text}</text>`).join("");
+  const sessionAttr = node.sessionRef === undefined ? "" : ` data-session="${escapeHtml(node.sessionRef)}"`;
+  return [
+    `<g class="gnode state-${node.state}" data-node="${escapeHtml(node.nodeID)}" data-state="${node.state}" data-attempts="${node.attempts}"${sessionAttr} transform="translate(${at.x},${at.y})">`,
+    `<rect width="${GRAPH_NODE_W}" height="${GRAPH_NODE_H}"></rect>`,
+    `<text class="gname" x="10" y="20">${escapeHtml(node.nodeID)}</text>`,
+    `<text class="grole" x="10" y="36">${escapeHtml(node.role)}</text>`,
+    `<text class="gstate" x="10" y="50">${node.state}</text>`,
+    badges,
+    "</g>"
+  ].join("");
+}
+function edgeSvg(pos, from, to) {
+  const a = pos.get(from);
+  const b = pos.get(to);
+  if (a === undefined || b === undefined) {
+    return "";
+  }
+  const x1 = a.x + GRAPH_NODE_W;
+  const y1 = a.y + GRAPH_NODE_H / 2;
+  const x2 = b.x;
+  const y2 = b.y + GRAPH_NODE_H / 2;
+  return `<line class="gedge" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" data-from="${escapeHtml(from)}" data-to="${escapeHtml(to)}"></line>`;
+}
+function renderGraphView(projection) {
+  if (projection === null) {
+    return '<p class="muted">Sin run de grafo activo.</p>';
+  }
+  if (projection.nodes.length === 0) {
+    return '<p class="muted">El run no tiene nodos.</p>';
+  }
+  const { pos, width, height } = layoutNodes(projection);
+  const edges = projection.edges.map((edge) => edgeSvg(pos, edge.from, edge.to)).join("");
+  const nodes = projection.nodes.map((node) => {
+    const at = pos.get(node.nodeID);
+    return at === undefined ? "" : nodeSvg(node, at);
+  }).join("");
+  return [
+    `<div class="graph-wrap"><svg class="graph" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-label="Grafo de agentes">`,
+    '<defs><marker id="garrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L8 4 L0 8 z" fill="#3a4250"></path></marker></defs>',
+    edges,
+    nodes,
+    "</svg></div>"
+  ].join("");
+}
+function healthBanner(health) {
+  const chip = (cls, on, label) => `<span class="gchip ${cls} ${on ? "on" : "off"}">${label}</span>`;
+  return [
+    '<div class="graph-health" role="status">',
+    chip("gh-recovery", health.recoveryRequired, health.recoveryRequired ? "recuperación requerida" : "sin recuperación"),
+    chip("gh-unknown", health.unknownEffects > 0, `efectos desconocidos: ${health.unknownEffects}`),
+    chip("gh-conflict", health.conflicts > 0, `conflictos lease/worktree: ${health.conflicts}`),
+    chip("gh-kill", health.killSwitch, health.killSwitch ? "kill switch activo" : "kill switch inactivo"),
+    "</div>"
+  ].join("");
+}
+function drillPanel() {
+  return [
+    '<aside class="graph-drill" hidden>',
+    '<h3 class="drill-title">Conversación</h3>',
+    '<div class="drilllog" aria-live="polite"></div>',
+    "</aside>"
+  ].join("");
+}
+function graphViewPanel(projection, drilldownEnabled) {
+  return [
+    '<div class="view" data-view="graph" hidden>',
+    '<section class="panel" id="panel-graph">',
+    "<h2>Grafo de agentes</h2>",
+    projection === null ? "" : healthBanner(projection.health),
+    renderGraphView(projection),
+    drilldownEnabled ? drillPanel() : "",
+    "</section>",
+    "</div>"
+  ].join("");
+}
 function renderConsoleHtml(state, options = {}) {
   const refreshMs = options.refreshMs ?? 2000;
   const terminalEnabled = options.terminalEnabled === true;
   const ptyEnabled = options.ptyEnabled === true;
+  const graphEnabled = options.graphView !== undefined;
   const allBody = [
     summaryPanel(state.cost),
     totalsPanel(state.totals),
@@ -1770,10 +2078,12 @@ function renderConsoleHtml(state, options = {}) {
     activityPanel(state.activity)
   ].join("");
   const allView = `<div class="view" data-view="all">${allBody}</div>`;
+  const graphDrilldown = graphEnabled && options.drilldownEnabled === true;
+  const graphView = graphEnabled ? graphViewPanel(options.graphView?.projection ?? null, graphDrilldown) : "";
   const sessionViews = state.sessionsDetail.map((tab) => sessionView(tab, terminalEnabled, ptyEnabled)).join("");
-  const body = allView + sessionViews;
+  const body = allView + graphView + sessionViews;
   const session = state.session.id === undefined ? "" : ` · sesión ${escapeHtml(state.session.id)}`;
-  const tokenAttr = terminalEnabled && options.consoleToken !== undefined ? ` data-token="${escapeHtml(options.consoleToken)}" data-terminal="1"${ptyEnabled ? ' data-pty="1"' : ""}` : "";
+  const tokenAttr = (terminalEnabled || graphDrilldown) && options.consoleToken !== undefined ? ` data-token="${escapeHtml(options.consoleToken)}"${terminalEnabled ? ' data-terminal="1"' : ""}${ptyEnabled ? ' data-pty="1"' : ""}${graphDrilldown ? ' data-drilldown="1"' : ""}` : "";
   return [
     "<!doctype html>",
     `<html lang="es" data-generated="${escapeHtml(state.generatedAt)}" data-refresh="${refreshMs}"${tokenAttr}>`,
@@ -1781,14 +2091,14 @@ function renderConsoleHtml(state, options = {}) {
     '<meta charset="utf-8">',
     '<meta name="viewport" content="width=device-width,initial-scale=1">',
     "<title>openteam console</title>",
-    `<style>${CONSOLE_STYLE}</style>`,
+    `<style>${CONSOLE_STYLE}${graphEnabled ? GRAPH_STYLE : ""}</style>`,
     "</head>",
     "<body>",
     "<header>",
     "<h1>openteam console</h1>",
     `<span class="meta">actualizado ${escapeHtml(state.generatedAt)}${session}</span>`,
     "</header>",
-    tabBar(state.sessionsDetail),
+    tabBar(state.sessionsDetail, graphEnabled),
     `<main>${body}</main>`,
     `<script>${CONSOLE_CLIENT_JS}</script>`,
     "</body>",
@@ -2120,7 +2430,7 @@ async function readJsonBody(request, limit) {
   });
 }
 function parseConsolePath(path) {
-  const match = /^\/console\/session\/([^/]+)\/(stream|input|permission|pty)$/.exec(path);
+  const match = /^\/console\/session\/([^/]+)\/(stream|input|permission|pty|messages)$/.exec(path);
   if (match === null) {
     return;
   }
@@ -2150,6 +2460,15 @@ data: {}
     response.end();
   }
 }
+async function handleMessages(_request, response, sessionID, deps) {
+  const endpoint = await deps.resolveEndpoint(sessionID);
+  if (endpoint === undefined) {
+    response.writeHead(404, JSON_HEADERS).end(JSON.stringify({ error: "no endpoint" }));
+    return;
+  }
+  const frames = await deps.createClient(endpoint).listMessages(sessionID);
+  response.writeHead(200, JSON_HEADERS).end(JSON.stringify({ frames }));
+}
 async function handleInput(request, response, sessionID, deps) {
   const endpoint = await deps.resolveEndpoint(sessionID);
   if (endpoint === undefined) {
@@ -2217,7 +2536,9 @@ async function handleConsoleRoute(request, response, url, deps) {
     response.writeHead(404, JSON_HEADERS).end(JSON.stringify({ error: "not found" }));
     return true;
   }
-  if (!deps.terminalEnabled) {
+  const readOnlyAction = route.action === "stream" || route.action === "messages";
+  const channelEnabled = deps.terminalEnabled || readOnlyAction && deps.drilldownEnabled === true;
+  if (!channelEnabled) {
     response.writeHead(403, JSON_HEADERS).end(JSON.stringify({ error: "terminal disabled" }));
     return true;
   }
@@ -2229,6 +2550,10 @@ async function handleConsoleRoute(request, response, url, deps) {
     await handleStream(request, response, route.sessionID, deps);
     return true;
   }
+  if (route.action === "messages" && request.method === "GET") {
+    await handleMessages(request, response, route.sessionID, deps);
+    return true;
+  }
   if (route.action === "input" && request.method === "POST") {
     await handleInput(request, response, route.sessionID, deps);
     return true;
@@ -2245,10 +2570,15 @@ async function handleConsoleRoute(request, response, url, deps) {
   return true;
 }
 
-// src/web/storageRoute.ts
+// src/web/graphRoute.ts
 var JSON_HEADERS2 = { "content-type": "application/json" };
-var READ_OPS = new Set(["read", "exists", "list", "isDirectory", "stat"]);
-var WRITE_OPS = new Set(["write", "append", "mkdir", "delete"]);
+var GRAPH_SSE_EVENT = "graph";
+function graphSseMessage(json) {
+  return `event: ${GRAPH_SSE_EVENT}
+data: ${json}
+
+`;
+}
 function bearerFromHeader2(request) {
   const header = request.headers.authorization;
   if (typeof header !== "string" || !header.startsWith("Bearer ")) {
@@ -2261,6 +2591,39 @@ function authorized2(request, query, token) {
   const provided = tokenFromQuery(query) ?? bearerFromHeader2(request);
   return provided !== undefined && safeEqualToken(provided, token);
 }
+async function handleGraphRoute(request, response, url, deps) {
+  if (url.pathname !== "/api/graph") {
+    return false;
+  }
+  if (request.method !== "GET") {
+    response.writeHead(405, JSON_HEADERS2).end(JSON.stringify({ error: "method not allowed" }));
+    return true;
+  }
+  if (deps.remoteToken !== undefined && !authorized2(request, url.searchParams, deps.remoteToken)) {
+    response.writeHead(401, JSON_HEADERS2).end(JSON.stringify({ error: "unauthorized" }));
+    return true;
+  }
+  const view = await deps.readView();
+  response.writeHead(200, JSON_HEADERS2).end(JSON.stringify(view));
+  return true;
+}
+
+// src/web/storageRoute.ts
+var JSON_HEADERS3 = { "content-type": "application/json" };
+var READ_OPS = new Set(["read", "exists", "list", "isDirectory", "stat"]);
+var WRITE_OPS = new Set(["write", "append", "mkdir", "delete"]);
+function bearerFromHeader3(request) {
+  const header = request.headers.authorization;
+  if (typeof header !== "string" || !header.startsWith("Bearer ")) {
+    return;
+  }
+  const value = header.slice("Bearer ".length).trim();
+  return value.length === 0 ? undefined : value;
+}
+function authorized3(request, query, token) {
+  const provided = tokenFromQuery(query) ?? bearerFromHeader3(request);
+  return provided !== undefined && safeEqualToken(provided, token);
+}
 function pathAllowed(path, allowPrefixes) {
   if (allowPrefixes === undefined) {
     return true;
@@ -2300,7 +2663,7 @@ async function readJsonBody2(request, limit) {
   });
 }
 function sendJson(response, status, body) {
-  response.writeHead(status, JSON_HEADERS2).end(JSON.stringify(body));
+  response.writeHead(status, JSON_HEADERS3).end(JSON.stringify(body));
 }
 async function handleRead(response, op, path, storage) {
   if (op === "read") {
@@ -2374,7 +2737,7 @@ async function handleStorageRoute(request, response, url, deps) {
     sendJson(response, 404, { error: "not found" });
     return true;
   }
-  if (!authorized2(request, url.searchParams, deps.token)) {
+  if (!authorized3(request, url.searchParams, deps.token)) {
     sendJson(response, 401, { error: "unauthorized" });
     return true;
   }
@@ -2415,12 +2778,12 @@ var SSE_HEADERS2 = {
   "cache-control": "no-cache",
   connection: "keep-alive"
 };
-var JSON_HEADERS3 = { "content-type": "application/json" };
+var JSON_HEADERS4 = { "content-type": "application/json" };
 var HTML_HEADERS = { "content-type": "text/html; charset=utf-8" };
 function isAddressInUse(error) {
   return typeof error === "object" && error !== null && "code" in error && error.code === "EADDRINUSE";
 }
-function bearerFromHeader3(request) {
+function bearerFromHeader4(request) {
   const header = request.headers.authorization;
   if (typeof header !== "string" || !header.startsWith("Bearer ")) {
     return;
@@ -2429,16 +2792,19 @@ function bearerFromHeader3(request) {
   return value.length === 0 ? undefined : value;
 }
 function readAuthorized(request, url, token) {
-  const provided = tokenFromQuery(url.searchParams) ?? bearerFromHeader3(request);
+  const provided = tokenFromQuery(url.searchParams) ?? bearerFromHeader4(request);
   return provided !== undefined && safeEqualToken(provided, token);
 }
 async function renderState(deps) {
+  const graphView = deps.graphApi === undefined ? undefined : { projection: await deps.graphApi.readView() };
   return renderConsoleHtml(buildConsoleState(await deps.readSnapshot()), {
     refreshMs: deps.config.refreshMs,
+    ...graphView !== undefined ? { graphView } : {},
     ...deps.console !== undefined ? {
       consoleToken: deps.console.token,
       terminalEnabled: deps.console.terminalEnabled,
-      ...deps.console.ptyEnabled !== undefined ? { ptyEnabled: deps.console.ptyEnabled } : {}
+      ...deps.console.ptyEnabled !== undefined ? { ptyEnabled: deps.console.ptyEnabled } : {},
+      ...deps.console.drilldownEnabled !== undefined ? { drilldownEnabled: deps.console.drilldownEnabled } : {}
     } : {}
   });
 }
@@ -2484,13 +2850,21 @@ async function createConsoleServer(deps) {
     resolveEndpoint,
     createClient: deps.console.createClient,
     ...deps.console.ptyEnabled !== undefined ? { ptyEnabled: deps.console.ptyEnabled } : {},
+    ...deps.console.drilldownEnabled !== undefined ? { drilldownEnabled: deps.console.drilldownEnabled } : {},
     ...deps.console.createPtyClient !== undefined ? { createPtyClient: deps.console.createPtyClient } : {}
   };
+  const graphDeps = deps.graphApi === undefined ? undefined : {
+    readView: deps.graphApi.readView,
+    ...deps.storageApi?.token !== undefined ? { remoteToken: deps.storageApi.token } : {}
+  };
   const handle = async (request, response) => {
     const url2 = new URL(request.url ?? "/", "http://localhost");
     if (consoleDeps !== undefined && await handleConsoleRoute(request, response, url2, consoleDeps)) {
       return;
     }
+    if (graphDeps !== undefined && await handleGraphRoute(request, response, url2, graphDeps)) {
+      return;
+    }
     if (deps.storageApi !== undefined && await handleStorageRoute(request, response, url2, deps.storageApi)) {
       return;
     }
@@ -2501,7 +2875,7 @@ async function createConsoleServer(deps) {
     const path = url2.pathname;
     const remoteToken = deps.storageApi?.token;
     if (remoteToken !== undefined && (path === "/" || path === "/index.html" || path === "/api/state" || path === "/events") && !readAuthorized(request, url2, remoteToken)) {
-      response.writeHead(401, JSON_HEADERS3).end(JSON.stringify({ error: "unauthorized" }));
+      response.writeHead(401, JSON_HEADERS4).end(JSON.stringify({ error: "unauthorized" }));
       return;
     }
     if (path === "/" || path === "/index.html") {
@@ -2509,11 +2883,11 @@ async function createConsoleServer(deps) {
       return;
     }
     if (path === "/api/state") {
-      response.writeHead(200, JSON_HEADERS3).end(await stateJson(deps));
+      response.writeHead(200, JSON_HEADERS4).end(await stateJson(deps));
       return;
     }
     if (path === "/healthz") {
-      response.writeHead(200, JSON_HEADERS3).end(JSON.stringify({ ok: true }));
+      response.writeHead(200, JSON_HEADERS4).end(JSON.stringify({ ok: true }));
       return;
     }
     if (path === "/favicon.ico") {
@@ -2523,6 +2897,9 @@ async function createConsoleServer(deps) {
     if (path === "/events") {
       response.writeHead(200, SSE_HEADERS2);
       response.write(sseMessage(await stateJson(deps)));
+      if (deps.graphApi !== undefined) {
+        response.write(graphSseMessage(JSON.stringify(await deps.graphApi.readView())));
+      }
       clients.add(response);
       request.on("close", () => {
         clients.delete(response);
@@ -2563,8 +2940,12 @@ async function createConsoleServer(deps) {
       return;
     }
     const message = sseMessage(await stateJson(deps));
+    const graphMessage = deps.graphApi !== undefined ? graphSseMessage(JSON.stringify(await deps.graphApi.readView())) : undefined;
     for (const response of clients) {
       response.write(message);
+      if (graphMessage !== undefined) {
+        response.write(graphMessage);
+      }
     }
   };
   const close = () => {
@@ -2895,12 +3276,14 @@ async function createConsoleRuntime(deps) {
     ...deps.session !== undefined ? { session: deps.session } : {}
   });
   const createServer = deps.serve ?? createConsoleServer;
+  const graphApi = deps.config.graphView?.enabled === true && deps.graphView !== undefined ? { readView: deps.graphView.readView } : undefined;
   const server = await createServer({
     readSnapshot,
     config: deps.config,
     ...deps.log !== undefined ? { log: deps.log } : {},
     ...deps.console !== undefined ? { console: deps.console } : {},
-    ...deps.storageApi !== undefined ? { storageApi: deps.storageApi } : {}
+    ...deps.storageApi !== undefined ? { storageApi: deps.storageApi } : {},
+    ...graphApi !== undefined ? { graphApi } : {}
   });
   const watchFn = deps.watch ?? ((path, listener) => fsWatch(path, { persistent: false }, listener));
   const watcher = watchSources([deps.sessionsDir, decisionsPath, backlogPath, deps.agentDir], () => {