declare-cc 1.0.7 → 1.0.8

package/dist/public/app.js

@@ -1,8 +1,8 @@
 /**
- * Declare DAG Visualizer — app.js
+ * Declare — app.js
  *
- * Fetches /api/graph and /api/status, renders a layered DAG with SVG edges,
- * supports node click for full details in a side panel, and live-updates via SSE when .planning/ changes.
+ * Fetches /api/graph and /api/status, renders a drill browser with detail panels,
+ * and live-updates via SSE when .planning/ changes.
  *
  * Zero external dependencies. Vanilla JS, no build step.
  */
@@ -25,9 +25,6 @@ let statusData = null;
 /** @type {string | null} */
 let selectedNodeId = null;
 
-/** @type {string | null} Focus node ID — the declaration or milestone being focused */
-let focusNodeId = null;
-
 /** @type {Set<string>} Tracks which action IDs are currently executing */
 let runningActions = new Set();
 
@@ -66,10 +63,8 @@ const drillNavState = {
   actions:      { focusIndex: 0, scrollTop: 0 },
 };
 
-/** @type {'dag'|'columns'|'execution'} Current view mode, persisted in localStorage */
-let viewMode = localStorage.getItem('declare-view-mode') || 'columns';
-// Execution mode is only valid during active play; fall back to columns on reload
-if (viewMode === 'execution') viewMode = 'columns';
+/** @type {'columns'|'execution'} Current view mode */
+let viewMode = 'columns';
 
 /** @type {boolean} Whether the declaration input form is visible */
 let declFormVisible = false;
@@ -186,17 +181,12 @@ if ($projectName) {
   });
 }
 
-const $nodesDecls    = document.getElementById('nodes-declarations');
-const $nodesMiles    = document.getElementById('nodes-milestones');
-const $nodesActs     = document.getElementById('nodes-actions');
-const $edgesSvg      = document.getElementById('edges-svg');
-
 const $sidePanel     = document.getElementById('side-panel');
 const $panelBody     = document.getElementById('panel-body');
 const $panelEmpty    = document.getElementById('panel-empty');
 
-const $colBrowser    = document.getElementById('column-browser');
 const $readinessBanner = document.getElementById('readiness-banner');
+const $colBrowser    = document.getElementById('column-browser');
 const $colDeclList   = document.getElementById('col-decl-list');
 const $colMileList   = document.getElementById('col-mile-list');
 const $colActList    = document.getElementById('col-act-list');
@@ -215,9 +205,6 @@ const $drillPrompt     = document.getElementById('drill-prompt');
   if (drillBody && actFeed) drillBody.appendChild(actFeed);
 })();
 
-const $viewToggle    = document.getElementById('view-toggle');
-const $viewToggleLabel = document.getElementById('view-toggle-label');
-const $canvasWrap    = document.getElementById('canvas-wrap');
 const $execView      = document.getElementById('execution-view');
 const $execOutputHeader = document.getElementById('exec-output-header');
 const $execOutputLog    = document.getElementById('exec-output-log');
@@ -378,7 +365,6 @@ async function loadData() {
 
     hideOverlay();
     renderStatusBar();
-    renderGraph();
     parseDrillHash(); // Restore drill state from URL hash on load
     renderDrillView();
     updateLastUpdated();
@@ -548,164 +534,6 @@ function deriveDeclarationStatus(declaration, enrichedMilestones) {
   return 'PENDING';
 }
 
-/**
- * Build a node DOM element.
- * @param {object} item
- * @param {'declaration'|'milestone'|'action'} type
- * @param {{ displayStatus?: string, doneCount?: number, totalCount?: number }} [derived]
- * @returns {HTMLElement}
- */
-function buildNodeEl(item, type, derived = {}) {
-  const displayStatus = derived.displayStatus || item.status || 'PENDING';
-  const el = document.createElement('div');
-  el.className = `node node-${type} status-${statusClass(displayStatus)}`;
-  el.dataset.nodeId   = item.id;
-  el.dataset.nodeType = type;
-
-  // Wholeness left-border indicator
-  const wh = item.wholeness;
-  if (wh === 'whole' || wh === 'partial' || wh === 'broken') {
-    el.classList.add(`wholeness-${wh}`);
-  }
-
-  const title = item.title || item.statement || item.id;
-
-  // Progress bar for milestones with actions
-  let progressHtml = '';
-  if (type === 'milestone' && derived.totalCount > 0) {
-    const pct = Math.round((derived.doneCount / derived.totalCount) * 100);
-    const countLabel = `${derived.doneCount}/${derived.totalCount}`;
-    progressHtml = `
-      <div class="node-progress" title="${countLabel} actions done">
-        <div class="node-progress-fill" style="width:${pct}%"></div>
-      </div>`;
-  }
-
-  // Badge label — show progress count for executing milestones
-  let badgeLabel = displayStatus;
-  if (type === 'milestone' && displayStatus === 'EXECUTING' && derived.totalCount > 0) {
-    badgeLabel = `${derived.doneCount}/${derived.totalCount} DONE`;
-  }
-
-  // Integrity indicator — small colored dot next to status badge
-  // Skip for "broken" when node has no children (treat as pending/not-yet-computable)
-  let integrityDotHtml = '';
-  if (wh === 'whole' || wh === 'partial') {
-    integrityDotHtml = `<span class="integrity-dot integrity-${wh}" title="Integrity: ${wh}"></span>`;
-  } else if (wh === 'broken') {
-    // Only show broken dot if this node actually has children (not just "nothing to compute")
-    if (type === 'action') {
-      integrityDotHtml = `<span class="integrity-dot integrity-broken" title="Integrity: broken"></span>`;
-    } else if (type === 'milestone' && derived.totalCount > 0) {
-      integrityDotHtml = `<span class="integrity-dot integrity-broken" title="Integrity: broken"></span>`;
-    } else if (type === 'declaration') {
-      // Declarations: check if they have child milestones
-      const hasChildren = graphData && (graphData.milestones || []).some(m => (m.realizes || []).includes(item.id));
-      if (hasChildren) {
-        integrityDotHtml = `<span class="integrity-dot integrity-broken" title="Integrity: broken"></span>`;
-      }
-    }
-    // If none of the above matched, no dot shown (pending/not-computable)
-  }
-
-  // Classification icon for milestones (robot for agent, person for human)
-  let classIconHtml = '';
-  if (type === 'milestone' && item.classification) {
-    const isHuman = item.classification === 'human';
-    const icon = isHuman ? '\u{1F464}' : '\u{1F916}';
-    const label = isHuman ? 'Human' : 'Agent';
-    classIconHtml = `<span class="class-icon" title="${label}">${icon}</span>`;
-  }
-
-  // Dependency indicator for milestones
-  let depIndicatorHtml = '';
-  if (type === 'milestone' && item.dependsOn && item.dependsOn.length > 0) {
-    depIndicatorHtml = `<span class="dep-indicator" title="Blocked by: ${item.dependsOn.join(', ')}">&#8592; ${item.dependsOn.length}</span>`;
-  }
-
-  // Readiness badge for milestones
-  let readinessBadgeHtml = '';
-  if (type === 'milestone' && item.readiness) {
-    const rs = item.readiness.state;
-    if (rs === 'ready') {
-      readinessBadgeHtml = '<span class="readiness-badge readiness-ready">READY</span>';
-    } else if (rs === 'blocked') {
-      const blockers = (item.readiness.blockedBy || []).join(', ');
-      readinessBadgeHtml = `<span class="readiness-badge readiness-blocked" title="Blocked by: ${blockers}">BLOCKED</span>`;
-    } else if (rs === 'no-actions') {
-      readinessBadgeHtml = '<span class="readiness-badge readiness-no-actions">NO ACTIONS</span>';
-    }
-    // done state: no badge needed (status already shows DONE)
-  }
-
-  el.innerHTML = `
-    <div class="node-id">${classIconHtml}${item.id}${depIndicatorHtml}</div>
-    <div class="node-title">${truncate(title, 55)}</div>
-    <span class="status-badge">${badgeLabel}</span>${readinessBadgeHtml}${integrityDotHtml}${reviewBadgeHtml(item.id, item.reviewState)}
-    ${progressHtml}
-  `;
-
-  el.addEventListener('click', () => selectNode(item.id, type));
-  return el;
-}
-
-// ─── Graph renderer ───────────────────────────────────────────────────────────
-
-function renderGraph() {
-  if (!graphData) return;
-
-  const { declarations, milestones, actions } = graphData;
-
-  // ── Compute derived statuses from action data (always reflects reality) ──────
-  // Milestones
-  const enrichedMilestones = (milestones || []).map(m => ({
-    ...m,
-    ...deriveMilestoneStatus(m, actions || []),
-  }));
-
-  // Declarations
-  const enrichedDeclarations = (declarations || []).map(d => ({
-    ...d,
-    displayStatus: deriveDeclarationStatus(d, enrichedMilestones),
-  }));
-
-  // Clear containers
-  $nodesDecls.innerHTML = '';
-  $nodesMiles.innerHTML = '';
-  $nodesActs.innerHTML  = '';
-
-  // Render
-  enrichedDeclarations.forEach(d => {
-    $nodesDecls.appendChild(buildNodeEl(d, 'declaration', { displayStatus: d.displayStatus }));
-  });
-
-  // Sort milestones: ready first, then no-actions, then blocked, then done
-  const readinessOrder = { ready: 0, 'no-actions': 1, blocked: 2, done: 3 };
-  const sortedMilestones = [...enrichedMilestones].sort((a, b) => {
-    const aState = (a.readiness && a.readiness.state) || 'blocked';
-    const bState = (b.readiness && b.readiness.state) || 'blocked';
-    return (readinessOrder[aState] ?? 2) - (readinessOrder[bState] ?? 2);
-  });
-
-  sortedMilestones.forEach(m => {
-    $nodesMiles.appendChild(buildNodeEl(m, 'milestone', {
-      displayStatus: m.displayStatus,
-      doneCount:     m.doneCount,
-      totalCount:    m.totalCount,
-    }));
-  });
-
-  (actions || []).forEach(a => {
-    $nodesActs.appendChild(buildNodeEl(a, 'action'));
-  });
-
-  // Draw edges after layout settles
-  requestAnimationFrame(() => drawEdges());
-
-  // Mark running actions with pulsing indicator
-  updateRunningIndicators();
-}
-
 // ─── Declaration input form ───────────────────────────────────────────────────
 
 /**
@@ -864,7 +692,7 @@ function renderColumnBrowser() {
 
   const { declarations, milestones, actions } = graphData;
 
-  // Compute enriched milestones and declarations (same logic as renderGraph)
+  // Compute enriched milestones and declarations
   const enrichedMilestones = (milestones || []).map(m => ({
     ...m,
     ...deriveMilestoneStatus(m, actions || []),
@@ -3363,147 +3191,6 @@ document.addEventListener('click', async (e) => {
   }
 });
 
-// ─── Edge drawing ─────────────────────────────────────────────────────────────
-
-/**
- * Get the center-bottom point of a DOM element relative to #canvas-container.
- * @param {Element} el
- * @returns {{ x: number, y: number }}
- */
-function getBottomCenter(el) {
-  const containerRect = document.getElementById('canvas-container').getBoundingClientRect();
-  const scrollLeft = document.getElementById('canvas-wrap').scrollLeft;
-  const scrollTop  = document.getElementById('canvas-wrap').scrollTop;
-  const r = el.getBoundingClientRect();
-  return {
-    x: r.left - containerRect.left + scrollLeft + r.width / 2,
-    y: r.top  - containerRect.top  + scrollTop  + r.height,
-  };
-}
-
-/**
- * Get the center-top point of a DOM element relative to #canvas-container.
- * @param {Element} el
- * @returns {{ x: number, y: number }}
- */
-function getTopCenter(el) {
-  const containerRect = document.getElementById('canvas-container').getBoundingClientRect();
-  const scrollLeft = document.getElementById('canvas-wrap').scrollLeft;
-  const scrollTop  = document.getElementById('canvas-wrap').scrollTop;
-  const r = el.getBoundingClientRect();
-  return {
-    x: r.left - containerRect.left + scrollLeft + r.width / 2,
-    y: r.top  - containerRect.top  + scrollTop,
-  };
-}
-
-/**
- * Draw a cubic bezier SVG path from (x1,y1) to (x2,y2).
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @returns {string}
- */
-function curvePath(x1, y1, x2, y2) {
-  const cy = (y1 + y2) / 2;
-  return `M ${x1} ${y1} C ${x1} ${cy}, ${x2} ${cy}, ${x2} ${y2}`;
-}
-
-/**
- * Build an SVG path element for an edge.
- * @param {string} d
- * @param {boolean} highlight
- * @returns {SVGPathElement}
- */
-function makePath(d, highlight) {
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', d);
-  path.setAttribute('class', highlight ? 'edge highlight' : 'edge');
-  return path;
-}
-
-function drawEdges() {
-  if (!graphData) return;
-
-  const { milestones, actions } = graphData;
-  const container = document.getElementById('canvas-container');
-
-  // Resize SVG to container dimensions
-  $edgesSvg.setAttribute('width',  String(container.scrollWidth));
-  $edgesSvg.setAttribute('height', String(container.scrollHeight));
-  $edgesSvg.innerHTML = '';
-
-  const fragment = document.createDocumentFragment();
-
-  // Milestone → Declaration edges (realizes)
-  (milestones || []).forEach(m => {
-    const mEl = document.querySelector(`[data-node-id="${m.id}"]`);
-    if (!mEl) return;
-    const mTop = getTopCenter(mEl);
-
-    (m.realizes || []).forEach(dId => {
-      const dEl = document.querySelector(`[data-node-id="${dId}"]`);
-      if (!dEl) return;
-      const dBot = getBottomCenter(dEl);
-      const isHighlighted = selectedNodeId === m.id || selectedNodeId === dId;
-      fragment.appendChild(makePath(curvePath(dBot.x, dBot.y, mTop.x, mTop.y), isHighlighted));
-    });
-  });
-
-  // Action → Milestone edges (causes)
-  (actions || []).forEach(a => {
-    const aEl = document.querySelector(`[data-node-id="${a.id}"]`);
-    if (!aEl) return;
-    const aTop = getTopCenter(aEl);
-
-    (a.causes || []).forEach(mId => {
-      const mEl = document.querySelector(`[data-node-id="${mId}"]`);
-      if (!mEl) return;
-      const mBot = getBottomCenter(mEl);
-      const isHighlighted = selectedNodeId === a.id || selectedNodeId === mId;
-      fragment.appendChild(makePath(curvePath(mBot.x, mBot.y, aTop.x, aTop.y), isHighlighted));
-    });
-  });
-
-  // Milestone → Milestone dependency edges (dashed, horizontal)
-  (milestones || []).forEach(m => {
-    const deps = m.dependsOn || [];
-    if (deps.length === 0) return;
-    const mEl = document.querySelector(`[data-node-id="${m.id}"]`);
-    if (!mEl) return;
-
-    deps.forEach(depId => {
-      const depEl = document.querySelector(`[data-node-id="${depId}"]`);
-      if (!depEl) return;
-
-      // Draw from right side of dependency to left side of dependent
-      const containerRect = document.getElementById('canvas-container').getBoundingClientRect();
-      const scrollLeft = document.getElementById('canvas-wrap').scrollLeft;
-      const scrollTop  = document.getElementById('canvas-wrap').scrollTop;
-
-      const depRect = depEl.getBoundingClientRect();
-      const mRect = mEl.getBoundingClientRect();
-
-      const x1 = depRect.right - containerRect.left + scrollLeft;
-      const y1 = depRect.top - containerRect.top + scrollTop + depRect.height / 2;
-      const x2 = mRect.left - containerRect.left + scrollLeft;
-      const y2 = mRect.top - containerRect.top + scrollTop + mRect.height / 2;
-
-      const cx = (x1 + x2) / 2;
-      const d = `M ${x1} ${y1} C ${cx} ${y1}, ${cx} ${y2}, ${x2} ${y2}`;
-      const isHighlighted = selectedNodeId === m.id || selectedNodeId === depId;
-
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('d', d);
-      path.setAttribute('class', isHighlighted ? 'edge dep-edge highlight' : 'edge dep-edge');
-      fragment.appendChild(path);
-    });
-  });
-
-  $edgesSvg.appendChild(fragment);
-}
-
 // ─── Annotation panel ─────────────────────────────────────────────────────────
 
 /**
@@ -4147,7 +3834,6 @@ function selectNode(nodeId, type) {
   if (selectedNodeId === nodeId) {
     // Toggle off
     selectedNodeId = null;
-    exitFocusMode();
     if ($panelEmpty) $panelEmpty.style.display = '';
     return;
   }
@@ -4158,16 +3844,6 @@ function selectNode(nodeId, type) {
   const el = document.querySelector(`[data-node-id="${nodeId}"]`);
   if (el) el.classList.add('selected');
 
-  // If clicking a node already visible in the current focused subtree, skip re-animation
-  const alreadyInFocus = focusNodeId && getFocusSubtree(
-    focusNodeId,
-    document.querySelector(`[data-node-id="${focusNodeId}"]`)?.dataset.nodeType || 'declaration'
-  ).has(nodeId);
-
-  if (!alreadyInFocus) {
-    enterFocusMode(nodeId, type);
-  }
-
   // Populate panel
   let item = null;
   if (graphData) {
@@ -4182,13 +3858,11 @@ function selectNode(nodeId, type) {
   renderPanelChain(item, type);
   renderAnnotationPanel(nodeId, type);
 
-  // In columns mode, auto-scroll to review controls for review-mode flow
-  if (viewMode === 'columns') {
-    setTimeout(() => {
-      const reviewEl = document.getElementById('review-actions');
-      if (reviewEl) reviewEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }, 100);
-  }
+  // Auto-scroll to review controls for review-mode flow
+  setTimeout(() => {
+    const reviewEl = document.getElementById('review-actions');
+    if (reviewEl) reviewEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, 100);
 }
 
 /**
@@ -6531,367 +6205,6 @@ async function cancelActionDerivation() {
   if (btn) { btn.disabled = false; btn.textContent = 'Plan Actions'; }
 }
 
-const $focusHint = document.getElementById('focus-hint');
-const FOCUS_DUR = 380;
-
-/**
- * Compute the set of node IDs that belong to a focused subtree.
- * - declaration: itself + all its milestones + all their actions
- * - milestone:   itself + its declarations + its actions
- * - action:      itself + its parent milestone + that milestone's declaration + all sibling actions
- * @param {string} nodeId
- * @param {string} type
- * @returns {Set<string>}
- */
-function getFocusSubtree(nodeId, type) {
-  if (!graphData) return new Set();
-  const { milestones, actions } = graphData;
-  const visible = new Set();
-
-  if (type === 'declaration') {
-    visible.add(nodeId);
-    milestones.filter(m => (m.realizes || []).includes(nodeId)).forEach(m => {
-      visible.add(m.id);
-      actions.filter(a => (a.causes || []).includes(m.id)).forEach(a => visible.add(a.id));
-    });
-  } else if (type === 'milestone') {
-    visible.add(nodeId);
-    const m = milestones.find(x => x.id === nodeId);
-    if (m) {
-      (m.realizes || []).forEach(dId => visible.add(dId));
-      actions.filter(a => (a.causes || []).includes(nodeId)).forEach(a => visible.add(a.id));
-    }
-  } else if (type === 'action') {
-    visible.add(nodeId);
-    const a = actions.find(x => x.id === nodeId);
-    if (a) {
-      (a.causes || []).forEach(mId => {
-        visible.add(mId);
-        const m = milestones.find(x => x.id === mId);
-        if (m) {
-          // parent declarations
-          (m.realizes || []).forEach(dId => visible.add(dId));
-          // sibling actions (all actions that cause the same milestone)
-          actions.filter(sa => (sa.causes || []).includes(mId)).forEach(sa => visible.add(sa.id));
-        }
-      });
-    }
-  }
-
-  return visible;
-}
-
-/** Clear all focus-mode inline styles from a node element. */
-function clearNodeFocusStyles(el) {
-  el.style.cssText = ''; // wipe all inline styles at once
-  el.classList.remove('focus-exiting', 'focus-active');
-  el.dataset.focusDir = '';
-}
-
-/** @type {Array<{el: HTMLElement, rect: DOMRect, dirLeft: boolean}>} */
-let exitedNodes = [];
-/** @type {ReturnType<typeof setTimeout> | null} Shared cleanup timer — covers both enter and exit cleanups so each cancels the other */
-let focusCleanupTimer = null;
-
-/**
- * Snapshot getBoundingClientRect for a set of node IDs.
- * @param {Set<string>} ids
- * @returns {Map<string, DOMRect>}
- */
-function snapshotRects(ids) {
-  const map = new Map();
-  ids.forEach(id => {
-    const el = document.querySelector(`[data-node-id="${id}"]`);
-    if (el) map.set(id, el.getBoundingClientRect());
-  });
-  return map;
-}
-
-/**
- * Enter focus mode using FLIP:
- * 1. Snapshot subtree node positions (FIRST)
- * 2. Remove exiting nodes from flow + overlay them fixed at their original positions
- * 3. Flex re-centers remaining nodes instantly
- * 4. Snapshot new subtree positions (LAST)
- * 5. INVERT: push subtree nodes back to original positions via transform (no transition)
- * 6. PLAY: animate subtree to new center + animate fixed-overlay exits to slide out
- */
-function enterFocusMode(nodeId, type) {
-  if (!graphData) return;
-  // Always cancel any pending cleanup (enter or exit) before starting a new animation
-  if (focusCleanupTimer) { clearTimeout(focusCleanupTimer); focusCleanupTimer = null; }
-  if (focusNodeId) {
-    // Restore everything cleanly before re-entering
-    exitedNodes.forEach(({ el }) => {
-      el.style.cssText = '';
-      el.classList.remove('focus-exiting', 'focus-active');
-    });
-    document.querySelectorAll('.node.focus-active').forEach(el => el.classList.remove('focus-active'));
-    exitedNodes = [];
-  }
-
-  focusNodeId = nodeId;
-  const subtree = getFocusSubtree(nodeId, type);
-
-  // Determine focus center X for directional exits
-  const focusEl = document.querySelector(`[data-node-id="${nodeId}"]`);
-  if (!focusEl) return;
-  const focusCenterX = focusEl.getBoundingClientRect().left + focusEl.getBoundingClientRect().width / 2;
-
-  // Classify all nodes
-  const subtreeEls = new Map(); // id → el
-  exitedNodes = [];
-  document.querySelectorAll('.node').forEach(el => {
-    const id = el.dataset.nodeId;
-    if (!id) return;
-    el.style.cssText = '';
-    el.classList.remove('focus-exiting', 'focus-active');
-    if (subtree.has(id)) {
-      el.classList.add('focus-active');
-      subtreeEls.set(id, el);
-    } else {
-      const rect = el.getBoundingClientRect();
-      exitedNodes.push({ el, rect, dirLeft: (rect.left + rect.width / 2) < focusCenterX });
-    }
-  });
-
-  // FIRST: snapshot subtree positions before layout change
-  const firstRects = snapshotRects(subtree);
-
-  // Remove exiting nodes from flow (instantly invisible — opacity handled separately)
-  // Pin them fixed at their current viewport positions for the slide-out overlay
-  exitedNodes.forEach(({ el, rect, dirLeft }) => {
-    el.dataset.focusDir = dirLeft ? 'left' : 'right';
-    el.classList.add('focus-exiting');
-    el.style.position = 'fixed';
-    el.style.left = rect.left + 'px';
-    el.style.top = rect.top + 'px';
-    el.style.width = rect.width + 'px';
-    el.style.height = rect.height + 'px';
-    el.style.margin = '0';
-    el.style.zIndex = '15';
-    el.style.pointerEvents = 'none';
-    el.style.opacity = '1';
-    el.style.transform = 'none';
-  });
-
-  // Force reflow: flex now sees only subtree nodes → re-centers them
-  void document.body.offsetWidth;
-
-  // LAST: snapshot new positions
-  const lastRects = snapshotRects(subtree);
-
-  // INVERT: push subtree nodes to appear at their old positions (no transition)
-  subtreeEls.forEach((el, id) => {
-    const first = firstRects.get(id);
-    const last = lastRects.get(id);
-    if (!first || !last) return;
-    const dx = first.left - last.left;
-    const dy = first.top - last.top;
-    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-      el.style.transition = 'none';
-      el.style.transform = `translate(${dx}px, ${dy}px)`;
-    }
-  });
-
-  // Force reflow so invert transforms are painted before we play
-  void document.body.offsetWidth;
-
-  const dur = FOCUS_DUR + 'ms';
-  const easeIn = 'cubic-bezier(0,0,0.2,1)';
-  const easeOut = 'cubic-bezier(0.4,0,1,1)';
-
-  // PLAY: animate subtree nodes to their new centered positions
-  subtreeEls.forEach(el => {
-    el.style.transition = `transform ${dur} ${easeIn}`;
-    el.style.transform = '';
-  });
-
-  // Clear edges immediately (no transition lag) — redraw only after animation settles
-  $edgesSvg.innerHTML = '';
-  $edgesSvg.style.opacity = '0';
-
-  // PLAY: slide + fade exiting nodes out from their fixed positions
-  requestAnimationFrame(() => {
-    exitedNodes.forEach(({ el, dirLeft }) => {
-      el.style.transition = `opacity ${Math.round(FOCUS_DUR * 0.7)}ms ease, transform ${dur} ${easeOut}`;
-      el.style.opacity = '0';
-      el.style.transform = `translateX(${dirLeft ? -130 : 130}%)`;
-    });
-  });
-
-  // After animation: clean up + redraw edges at final positions, then fade back in
-  // Stored in focusCleanupTimer so exitFocusMode can cancel it if user exits early
-  focusCleanupTimer = setTimeout(() => {
-    focusCleanupTimer = null;
-    exitedNodes.forEach(({ el }) => {
-      el.style.cssText = '';
-      el.style.display = 'none';
-      el.classList.remove('focus-exiting');
-    });
-    subtreeEls.forEach(el => { el.style.transition = ''; el.style.transform = ''; });
-    drawEdgesForSubtree(subtree);
-    $edgesSvg.style.opacity = '1';
-  }, FOCUS_DUR + 50);
-
-  $focusHint.classList.add('visible');
-}
-
-/**
- * Exit focus mode — proper reverse FLIP:
- * 1. Snapshot current visual positions of subtree nodes (may be centered)
- * 2. Restore ALL nodes to normal flow (clear all inline styles)
- * 3. Force layout → nodes at natural positions
- * 4. Snapshot natural positions (LAST)
- * 5. INVERT: push subtree nodes back to where they were + push returned nodes off-screen
- * 6. Force reflow
- * 7. PLAY: animate everything to natural (transform:'')
- */
-function exitFocusMode() {
-  if (!focusNodeId) return;
-  const prevSubtree = getFocusSubtree(
-    focusNodeId,
-    document.querySelector(`[data-node-id="${focusNodeId}"]`)?.dataset.nodeType || 'declaration'
-  );
-  focusNodeId = null;
-  if (focusCleanupTimer) { clearTimeout(focusCleanupTimer); focusCleanupTimer = null; }
-
-  const dur = FOCUS_DUR + 'ms';
-  const easeIn = 'cubic-bezier(0,0,0.2,1)';
-
-  // FIRST: snapshot current visual positions of subtree nodes (before any style changes)
-  const firstRects = snapshotRects(prevSubtree);
-
-  // Capture dirLeft for each exited node, then clear all inline styles on every node
-  const capturedExits = exitedNodes.map(({ el, dirLeft }) => ({ el, dirLeft }));
-  exitedNodes = [];
-
-  document.querySelectorAll('.node').forEach(el => {
-    el.style.cssText = '';
-    el.classList.remove('focus-exiting', 'focus-active');
-  });
-
-  // Force layout: all nodes now at their natural flex positions
-  void document.body.offsetWidth;
-
-  // LAST: snapshot natural positions of subtree nodes
-  const lastRects = snapshotRects(prevSubtree);
-
-  // Build subtree element map
-  const subtreeEls = new Map();
-  prevSubtree.forEach(id => {
-    const el = document.querySelector(`[data-node-id="${id}"]`);
-    if (el) subtreeEls.set(id, el);
-  });
-
-  // INVERT subtree: push nodes back to where they appeared (centered)
-  subtreeEls.forEach((el, id) => {
-    const first = firstRects.get(id);
-    const last  = lastRects.get(id);
-    if (!first || !last) return;
-    const dx = first.left - last.left;
-    const dy = first.top  - last.top;
-    if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
-      el.style.transition = 'none';
-      el.style.transform  = `translate(${dx}px, ${dy}px)`;
-    }
-  });
-
-  // INVERT returned nodes: push off-screen so they slide in
-  capturedExits.forEach(({ el, dirLeft }) => {
-    el.style.transition = 'none';
-    el.style.opacity    = '0';
-    el.style.transform  = `translateX(${dirLeft ? -130 : 130}%)`;
-  });
-
-  // Force reflow to paint inverted state before PLAY
-  void document.body.offsetWidth;
-
-  // Clear edges immediately
-  $edgesSvg.innerHTML = '';
-  $edgesSvg.style.opacity = '0';
-
-  // PLAY: animate all nodes to natural positions (transform:'')
-  requestAnimationFrame(() => {
-    subtreeEls.forEach(el => {
-      el.style.transition = `transform ${dur} ${easeIn}`;
-      el.style.transform  = '';
-    });
-    capturedExits.forEach(({ el }) => {
-      el.style.transition = `opacity ${Math.round(FOCUS_DUR * 0.8)}ms ease ${Math.round(FOCUS_DUR * 0.1)}ms, transform ${dur} ${easeIn}`;
-      el.style.opacity    = '1';
-      el.style.transform  = '';
-    });
-  });
-
-  // Cleanup: remove inline styles, redraw edges at settled positions
-  focusCleanupTimer = setTimeout(() => {
-    document.querySelectorAll('.node').forEach(el => {
-      el.style.transition = '';
-      el.style.transform  = '';
-      el.style.opacity    = '';
-    });
-    void document.body.offsetWidth;
-    requestAnimationFrame(() => {
-      drawEdges();
-      $edgesSvg.style.opacity = '1';
-    });
-    focusCleanupTimer = null;
-  }, FOCUS_DUR + 80);
-
-  $focusHint.classList.remove('visible');
-}
-
-/**
- * Draw edges but dim those outside the given subtree.
- * @param {Set<string>} subtree
- */
-function drawEdgesForSubtree(subtree) {
-  if (!graphData) return;
-  const { milestones, actions } = graphData;
-  const container = document.getElementById('canvas-container');
-
-  $edgesSvg.setAttribute('width',  String(container.scrollWidth));
-  $edgesSvg.setAttribute('height', String(container.scrollHeight));
-  $edgesSvg.innerHTML = '';
-
-  const fragment = document.createDocumentFragment();
-
-  (milestones || []).forEach(m => {
-    const mEl = document.querySelector(`[data-node-id="${m.id}"]`);
-    if (!mEl) return;
-    const mTop = getTopCenter(mEl);
-
-    (m.realizes || []).forEach(dId => {
-      const dEl = document.querySelector(`[data-node-id="${dId}"]`);
-      if (!dEl) return;
-      const dBot = getBottomCenter(dEl);
-      const inSubtree = subtree.has(m.id) && subtree.has(dId);
-      const path = makePath(curvePath(dBot.x, dBot.y, mTop.x, mTop.y), inSubtree);
-      if (!inSubtree) path.classList.add('focus-dim');
-      fragment.appendChild(path);
-    });
-  });
-
-  (actions || []).forEach(a => {
-    const aEl = document.querySelector(`[data-node-id="${a.id}"]`);
-    if (!aEl) return;
-    const aTop = getTopCenter(aEl);
-
-    (a.causes || []).forEach(mId => {
-      const mEl = document.querySelector(`[data-node-id="${mId}"]`);
-      if (!mEl) return;
-      const mBot = getBottomCenter(mEl);
-      const inSubtree = subtree.has(a.id) && subtree.has(mId);
-      const path = makePath(curvePath(mBot.x, mBot.y, aTop.x, aTop.y), inSubtree);
-      if (!inSubtree) path.classList.add('focus-dim');
-      fragment.appendChild(path);
-    });
-  });
-
-  $edgesSvg.appendChild(fragment);
-}
-
 // ─── Execution pipeline view ──────────────────────────────────────────────────
 
 /**
@@ -7281,8 +6594,8 @@ function canEnterExecution() {
 }
 
 /**
- * Switch between DAG, column browser, and execution views.
- * @param {'dag'|'columns'|'execution'} mode
+ * Switch between column browser and execution views.
+ * @param {'columns'|'execution'} mode
  */
 function switchView(mode) {
   if (mode === 'execution' && !canEnterExecution()) {
@@ -7290,35 +6603,20 @@ function switchView(mode) {
     return;
   }
   viewMode = mode;
-  localStorage.setItem('declare-view-mode', mode);
 
   // Hide all views first
-  $canvasWrap.style.display = 'none';
   if ($drillBrowser) $drillBrowser.classList.remove('active');
   if ($readinessBanner) $readinessBanner.classList.remove('active');
   if ($execView) $execView.classList.remove('active');
   document.body.classList.remove('exec-mode');
-  document.body.classList.remove('dag-mode');
-
-  if (mode === 'dag') {
-    $canvasWrap.style.display = '';
-    document.body.classList.add('dag-mode');
-    clearColumnBrowserKbFocus();
-    if ($viewToggle) $viewToggleLabel.innerHTML = '&#x2630;'; // hamburger = list view
-    // Redraw edges since layout changed
-    requestAnimationFrame(() => drawEdges());
-  } else if (mode === 'columns') {
-    // Exit focus mode before switching to columns
-    if (focusNodeId) exitFocusMode();
+
+  if (mode === 'columns') {
     if ($drillBrowser) $drillBrowser.classList.add('active');
-    if ($viewToggle) $viewToggleLabel.innerHTML = '&#x2B13;'; // graph icon
     // Refresh drill browser data
     renderDrillView();
   } else if (mode === 'execution') {
-    if (focusNodeId) exitFocusMode();
     if ($execView) $execView.classList.add('active');
     document.body.classList.add('exec-mode');
-    if ($viewToggle) $viewToggleLabel.innerHTML = '&#x2630;';
     orderConfirmed = false;
     preExecWaves = null;
     renderPreExecutionView();
@@ -7339,17 +6637,6 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
-// View toggle button — cycles: columns -> dag (execution excluded, entered only via play)
-if ($viewToggle) {
-  $viewToggle.addEventListener('click', () => {
-    if (viewMode === 'columns') {
-      switchView('dag');
-    } else {
-      switchView('columns');
-    }
-  });
-}
-
 // Execution topbar buttons
 if ($execExitBtn) {
   $execExitBtn.addEventListener('click', () => switchView('columns'));
@@ -7487,53 +6774,12 @@ if ($playStopBtn) {
   $playStopBtn.addEventListener('click', stopPlay);
 }
 
-// ESC to exit focus mode; arrow keys to navigate between declarations (DAG view only)
-document.addEventListener('keydown', (e) => {
-  // Skip DAG keyboard handling when column browser is active
-  if (isColumnBrowserActive()) return;
-
-  if (e.key === 'Escape' && focusNodeId) {
-    document.querySelectorAll('.node.selected').forEach(el => el.classList.remove('selected'));
-    selectedNodeId = null;
-    exitFocusMode();
-    if ($panelEmpty) $panelEmpty.style.display = '';
-  }
-
-  if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && selectedNodeId && graphData) {
-    const declarations = graphData.declarations;
-    const idx = declarations.findIndex(d => d.id === selectedNodeId);
-    if (idx === -1) return; // selected node is not a declaration
-    const next = e.key === 'ArrowRight'
-      ? (idx + 1) % declarations.length
-      : (idx - 1 + declarations.length) % declarations.length;
-    selectNode(declarations[next].id, 'declaration');
-  }
-});
-
-// Click on canvas background to exit focus mode
-document.getElementById('canvas-wrap').addEventListener('click', (e) => {
-  if (!focusNodeId) return;
-  if (!e.target.closest('.node')) {
-    document.querySelectorAll('.node.selected').forEach(el => el.classList.remove('selected'));
-    selectedNodeId = null;
-    exitFocusMode();
-    if ($panelEmpty) $panelEmpty.style.display = '';
-  }
-});
 
 $overlayRetry.addEventListener('click', () => {
   showLoading();
   loadData();
 });
 
-// Redraw edges on window resize or scroll (layout may shift)
-window.addEventListener('resize', () => {
-  if (graphData) requestAnimationFrame(() => drawEdges());
-});
-
-document.getElementById('canvas-wrap').addEventListener('scroll', () => {
-  if (graphData) requestAnimationFrame(() => drawEdges());
-});
 
 // ─── Confetti ────────────────────────────────────────────────────────────────
 // Fires once when all declarations reach a completed state (DONE/KEPT/HONORED).
@@ -8155,7 +7401,6 @@ function connectSSE() {
   });
   let sseChangeTimer = null;
   es.addEventListener('change', () => {
-    if (focusNodeId || focusCleanupTimer) return; // skip during animation
     // Debounce rapid SSE change events (e.g. approve writes multiple files)
     clearTimeout(sseChangeTimer);
     sseChangeTimer = setTimeout(() => {