declare-cc 0.6.0 → 1.0.0

package/dist/public/app.js

@@ -87,18 +87,24 @@ let editFormError = null;
 /** @type {string|null} ID of declaration showing delete confirmation */
 let deleteConfirmId = null;
 
-/** @type {string | null} Active derivation session ID */
+/** @type {string | null} Active derivation session ID (legacy single-session) */
 let derivationSessionId = null;
 /** @type {Array<{title: string, realizes: string, reason: string}> | null} */
 let derivationProposals = null;
 
-/** @type {string | null} Active action derivation session ID */
+/** @type {Map<string, { sessionId: string, status: string }>} Tracks active derivations per declaration */
+const activeDeriveMap = new Map();
+
+/** @type {string | null} Active action derivation session ID (for the drilled-into milestone) */
 let actionDerivationSessionId = null;
-/** @type {string | null} Milestone ID for the current action derivation */
+/** @type {string | null} Milestone ID for the current action derivation (drilled-into) */
 let actionDerivationMilestoneId = null;
 /** @type {Array<{title: string, produces: string, reason: string}> | null} */
 let actionDerivationProposals = null;
 
+/** @type {Set<string>} Node IDs with in-flight planning (immediate visual feedback before agent registry updates) */
+const pendingDerivations = new Set();
+
 /** @type {number|null} Line number currently being annotated */
 let annotatingLine = null;
 /** @type {string|null} Node ID of the currently displayed annotation panel */
@@ -135,6 +141,20 @@ let execCompletedActions = 0;
 let execFailedActions = 0;
 
 
+// ─── Onboarding flow state ─────────────────────────────────────────────────────
+/** @type {'idle'|'questions'|'proposals'|'approving'} Current onboard phase */
+let onboardPhase = 'idle';
+/** @type {string|null} The original vision prompt */
+let onboardPrompt = null;
+/** @type {Array<{question: string, context: string, options?: string[]}>|null} */
+let onboardQuestions = null;
+/** @type {Array<{title: string, statement: string, reasoning: string, approvedId?: string}>|null} */
+let onboardProposals = null;
+/** @type {number} Current index being approved */
+let onboardApproveIndex = 0;
+/** @type {string} Streaming text buffer */
+let onboardStreamText = '';
+
 // ─── DOM refs ─────────────────────────────────────────────────────────────────
 
 const $overlay       = document.getElementById('overlay');
@@ -151,7 +171,7 @@ const $healthBadge   = document.getElementById('health-badge');
 const $lastUpdated   = document.getElementById('last-updated');
 const $refreshBtn    = document.getElementById('refresh-btn');
 const $executeMainBtn = document.getElementById('execute-main-btn');
-const $activityPinned = document.getElementById('activity-pinned');
+// $activityPinned removed — replaced by agent cards panel (A-124)
 const $statusBreadcrumb = document.getElementById('status-breadcrumb');
 
 // Project name click → go back to declarations (home)
@@ -227,6 +247,20 @@ const $wfActionBtn       = document.getElementById('wf-action-btn');
 /** @type {{ state: string, nextStep: { label: string, action: string, targetId?: string }, progress: { percentage: number, declarations: number, milestones: number, actions: number, actionsDone: number } } | null} */
 let workflowState = null;
 
+/** @type {{ stages: Record<string, Array<{id:string,title:string,type:string,status:string,reviewState?:string,stage:string}>>, nextAction: {action:string,label:string,targetId?:string,targetType?:string}|null, progress: {total:number,done:number,percentage:number} } | null} */
+let lifecycleData = null;
+
+/** @type {string|null} Active lifecycle stage filter — null means show all stages */
+let lifecycleFilter = null;
+
+/** @type {boolean} Whether Done section is collapsed */
+let lifecycleDoneCollapsed = true;
+
+/** @type {string|null} Lifecycle filter for level 2 (milestones) */
+let lifecycleFilterL2 = null;
+/** @type {string|null} Lifecycle filter for level 3 (actions) */
+let lifecycleFilterL3 = null;
+
 // ─── Utilities ────────────────────────────────────────────────────────────────
 
 /**
@@ -339,6 +373,9 @@ async function loadData() {
     // Sync topbar with running operations
     syncTopbarFromRunning();
 
+    // Restore running derivation sessions after page refresh
+    await restoreRunningDerivations();
+
     hideOverlay();
     renderStatusBar();
     renderGraph();
@@ -347,6 +384,7 @@ async function loadData() {
     updateLastUpdated();
     checkProjectComplete(graph);
     loadWorkflowState();
+    loadLifecycleData();
 
     // Apply persisted view mode (shows correct container, hides the other)
     switchView(viewMode);
@@ -451,6 +489,7 @@ function renderStatusBar() {
 // ─── Node element builder ─────────────────────────────────────────────────────
 
 const COMPLETED = new Set(['DONE','KEPT','HONORED']);
+const EXECUTING_STATUSES_SET = new Set(['EXECUTING', 'IN_PROGRESS', 'RUNNING']);
 const IN_PROGRESS_STORED = new Set(['ACTIVE']);
 
 /**
@@ -1109,6 +1148,9 @@ function saveDrillNavState() {
 function drillGoDeeper(newLevel) {
   saveDrillNavState();
   drillLevel = newLevel;
+  // Reset level-specific lifecycle filters when navigating
+  if (newLevel === 'milestones') lifecycleFilterL2 = null;
+  if (newLevel === 'actions') lifecycleFilterL3 = null;
   pushDrillHash();
 }
 
@@ -1119,6 +1161,128 @@ function drillGoBack(newLevel) {
   pushDrillHash();
 }
 
+/**
+ * Navigate the drill browser to the result of a completed agent.
+ * Maps agent type + result metadata to the correct drill state.
+ * @param {object} agent - AgentRecord from the registry
+ */
+function navigateToResult(agent) {
+  if (!graphData) return;
+  const result = agent.result || {};
+  const milestones = graphData.milestones || [];
+
+  switch (agent.type) {
+    case 'execution': {
+      // Navigate to the milestone's action list
+      const mileId = result.milestoneId || agent.milestoneId;
+      if (mileId) {
+        const mile = milestones.find(m => m.id === mileId);
+        if (mile && mile.realizes && mile.realizes.length) {
+          drillDeclId = mile.realizes[0];
+        }
+        drillMileId = mileId;
+        drillLevel = 'actions';
+      }
+      break;
+    }
+    case 'derivation': {
+      // Navigate to the declaration's milestone list
+      // The target is the declaration ID (e.g., "D-16") or "all"
+      const declId = agent.target !== 'all' ? agent.target : null;
+      if (declId) {
+        drillDeclId = declId;
+        drillLevel = 'milestones';
+      } else {
+        // "all" derivation — go to declarations list
+        drillDeclId = null;
+        drillMileId = null;
+        drillLevel = 'declarations';
+      }
+      drillMileId = null;
+      break;
+    }
+    case 'action-derivation': {
+      // Navigate to the milestone's action list
+      const mileId = result.milestoneId || agent.milestoneId || agent.target;
+      if (mileId) {
+        const mile = milestones.find(m => m.id === mileId);
+        if (mile && mile.realizes && mile.realizes.length) {
+          drillDeclId = mile.realizes[0];
+        }
+        drillMileId = mileId;
+        drillLevel = 'actions';
+      }
+      break;
+    }
+    case 'revision': {
+      // Navigate to the revised node — could be declaration or milestone
+      const nodeId = result.nodeId || agent.target;
+      if (nodeId && nodeId.startsWith('M-')) {
+        // Milestone revision — navigate to its action list
+        const mile = milestones.find(m => m.id === nodeId);
+        if (mile && mile.realizes && mile.realizes.length) {
+          drillDeclId = mile.realizes[0];
+        }
+        drillMileId = nodeId;
+        drillLevel = 'actions';
+      } else if (nodeId && nodeId.startsWith('D-')) {
+        // Declaration revision — navigate to its milestone list
+        drillDeclId = nodeId;
+        drillMileId = null;
+        drillLevel = 'milestones';
+      }
+      break;
+    }
+    case 'pipeline': {
+      // Navigate to the milestone targeted by the pipeline
+      const mileId = agent.milestoneId || agent.target;
+      if (mileId && mileId.startsWith('M-')) {
+        const mile = milestones.find(m => m.id === mileId);
+        if (mile && mile.realizes && mile.realizes.length) {
+          drillDeclId = mile.realizes[0];
+        }
+        drillMileId = mileId;
+        drillLevel = 'actions';
+      } else {
+        drillDeclId = null;
+        drillMileId = null;
+        drillLevel = 'declarations';
+      }
+      break;
+    }
+    case 'refine':
+    case 'discuss': {
+      // Navigate to the refined/discussed node — same as revision
+      const nodeId = result.nodeId || agent.target;
+      if (nodeId && nodeId.startsWith('M-')) {
+        const mile = milestones.find(m => m.id === nodeId);
+        if (mile && mile.realizes && mile.realizes.length) {
+          drillDeclId = mile.realizes[0];
+        }
+        drillMileId = nodeId;
+        drillLevel = 'actions';
+      } else if (nodeId && nodeId.startsWith('D-')) {
+        drillDeclId = nodeId;
+        drillMileId = null;
+        drillLevel = 'milestones';
+      }
+      break;
+    }
+    default: {
+      // Unknown agent type — fall back to declarations
+      drillDeclId = null;
+      drillMileId = null;
+      drillLevel = 'declarations';
+      break;
+    }
+  }
+
+  // Switch to columns view if not already there and render
+  if (viewMode !== 'columns') switchView('columns');
+  pushDrillHash();
+  renderDrillView();
+}
+
 /** Build the hash string for current drill state */
 function drillHashString() {
   let hash = '#/';
@@ -1177,6 +1341,13 @@ window.addEventListener('popstate', () => {
  */
 function renderDrillView() {
   if (!$drillBrowser || !graphData) return;
+
+  // If onboarding is active, render it instead
+  if (onboardPhase !== 'idle') {
+    renderOnboardUI();
+    return;
+  }
+
   syncDrillHash(); // Keep URL in sync without creating history entries
 
   const { declarations, milestones, actions } = graphData;
@@ -1229,6 +1400,11 @@ function renderDrillView() {
   updateStatusBreadcrumb(enrichedDeclarations, enrichedMilestones);
   // Update next/execute button
   updateNextButton(enrichedDeclarations, enrichedMilestones, actions || []);
+
+  // Re-attach discuss container if a discuss session is active (survives re-renders)
+  if (discussActiveNodeId && discussActiveContainer) {
+    reattachDiscussContainer();
+  }
 }
 
 /**
@@ -1276,47 +1452,100 @@ function updateStatusBreadcrumb(enrichedDeclarations, enrichedMilestones) {
 
 /**
  * Find the next unapproved node and update the main button.
+ * Uses lifecycle nextAction when available for smarter guidance.
  */
 function updateNextButton(enrichedDeclarations, enrichedMilestones, actions) {
   if (!$executeMainBtn) return;
 
-  // Find first unapproved node across all levels
-  const unapprovedDecl = enrichedDeclarations.find(d => d.reviewState !== 'approved');
-  const unapprovedMile = enrichedMilestones.find(m => m.reviewState !== 'approved');
-  const unapprovedAction = (actions || []).find(a => a.reviewState !== 'approved' && !COMPLETED.has((a.status || '').toUpperCase()));
-
-  const hasUnapproved = unapprovedDecl || unapprovedMile || unapprovedAction;
+  // Use lifecycle nextAction if available
+  const next = lifecycleData ? lifecycleData.nextAction : null;
 
-  if (hasUnapproved) {
-    $executeMainBtn.innerHTML = '<kbd>N</kbd> Next';
-    $executeMainBtn.className = 'btn-next';
-    $executeMainBtn.id = 'execute-main-btn';
-    $executeMainBtn.disabled = false;
-    $executeMainBtn.title = 'Go to next item needing approval';
-
-    // Store target for click handler
-    $executeMainBtn._nextTarget = { decl: unapprovedDecl, mile: unapprovedMile, action: unapprovedAction };
-    $executeMainBtn._planMode = false;
-  } else {
-    // Check if any declarations still need milestones (PENDING = no milestones planned)
-    const needsPlanning = enrichedDeclarations.some(d => d.displayStatus === 'PENDING');
-
-    if (needsPlanning) {
-      $executeMainBtn.innerHTML = '<kbd>P</kbd> Plan';
+  if (next) {
+    if (next.action === 'derive-milestones' || next.action === 'derive-actions') {
+      $executeMainBtn.innerHTML = '<kbd>⌃⇧P</kbd> Plan';
       $executeMainBtn.className = 'btn-plan';
       $executeMainBtn.id = 'execute-main-btn';
       $executeMainBtn.disabled = false;
-      $executeMainBtn.title = 'Plan milestones for unplanned declarations';
+      $executeMainBtn.title = next.label;
       $executeMainBtn._nextTarget = null;
       $executeMainBtn._planMode = true;
-    } else {
+      $executeMainBtn._lifecycleAction = next;
+    } else if (next.action === 'approve') {
+      $executeMainBtn.innerHTML = '<kbd>N</kbd> Next';
+      $executeMainBtn.className = 'btn-next';
+      $executeMainBtn.id = 'execute-main-btn';
+      $executeMainBtn.disabled = false;
+      $executeMainBtn.title = next.label;
+      $executeMainBtn._nextTarget = null;
+      $executeMainBtn._planMode = false;
+      $executeMainBtn._lifecycleAction = next;
+    } else if (next.action === 'execute') {
       $executeMainBtn.innerHTML = '<kbd>E</kbd> Execute';
       $executeMainBtn.className = '';
       $executeMainBtn.id = 'execute-main-btn';
       $executeMainBtn.disabled = !canEnterExecution();
-      $executeMainBtn.title = canEnterExecution() ? 'Enter execution mode' : 'No actions to execute';
+      $executeMainBtn.title = next.label;
       $executeMainBtn._nextTarget = null;
       $executeMainBtn._planMode = false;
+      $executeMainBtn._lifecycleAction = next;
+    } else if (next.action === 'complete') {
+      $executeMainBtn.innerHTML = '\u2713 Done';
+      $executeMainBtn.className = 'btn-done';
+      $executeMainBtn.id = 'execute-main-btn';
+      $executeMainBtn.disabled = true;
+      $executeMainBtn.title = 'All items complete';
+      $executeMainBtn._nextTarget = null;
+      $executeMainBtn._planMode = false;
+      $executeMainBtn._lifecycleAction = null;
+    } else {
+      // view-execution or other — show status
+      $executeMainBtn.innerHTML = next.label;
+      $executeMainBtn.className = '';
+      $executeMainBtn.id = 'execute-main-btn';
+      $executeMainBtn.disabled = true;
+      $executeMainBtn.title = next.label;
+      $executeMainBtn._nextTarget = null;
+      $executeMainBtn._planMode = false;
+      $executeMainBtn._lifecycleAction = null;
+    }
+  } else {
+    // Fallback to original logic when lifecycle data not available
+    const unapprovedDecl = enrichedDeclarations.find(d => d.reviewState !== 'approved');
+    const unapprovedMile = enrichedMilestones.find(m => m.reviewState !== 'approved');
+    const unapprovedAction = (actions || []).find(a => a.reviewState !== 'approved' && !COMPLETED.has((a.status || '').toUpperCase()));
+
+    const hasUnapproved = unapprovedDecl || unapprovedMile || unapprovedAction;
+
+    if (hasUnapproved) {
+      $executeMainBtn.innerHTML = '<kbd>N</kbd> Next';
+      $executeMainBtn.className = 'btn-next';
+      $executeMainBtn.id = 'execute-main-btn';
+      $executeMainBtn.disabled = false;
+      $executeMainBtn.title = 'Go to next item needing approval';
+      $executeMainBtn._nextTarget = { decl: unapprovedDecl, mile: unapprovedMile, action: unapprovedAction };
+      $executeMainBtn._planMode = false;
+      $executeMainBtn._lifecycleAction = null;
+    } else {
+      const needsPlanning = enrichedDeclarations.some(d => d.displayStatus === 'PENDING');
+      if (needsPlanning) {
+        $executeMainBtn.innerHTML = '<kbd>⌃⇧P</kbd> Plan';
+        $executeMainBtn.className = 'btn-plan';
+        $executeMainBtn.id = 'execute-main-btn';
+        $executeMainBtn.disabled = false;
+        $executeMainBtn.title = 'Plan milestones for unplanned declarations';
+        $executeMainBtn._nextTarget = null;
+        $executeMainBtn._planMode = true;
+        $executeMainBtn._lifecycleAction = null;
+      } else {
+        $executeMainBtn.innerHTML = '<kbd>E</kbd> Execute';
+        $executeMainBtn.className = '';
+        $executeMainBtn.id = 'execute-main-btn';
+        $executeMainBtn.disabled = !canEnterExecution();
+        $executeMainBtn.title = canEnterExecution() ? 'Enter execution mode' : 'No actions to execute';
+        $executeMainBtn._nextTarget = null;
+        $executeMainBtn._planMode = false;
+        $executeMainBtn._lifecycleAction = null;
+      }
     }
   }
 
@@ -1358,19 +1587,52 @@ function renderProjectDetail() {
   const mCount = stats.milestones || 0;
   const aCount = stats.actions || 0;
 
+  // Lifecycle progress if available
+  let progressHtml = '';
+  if (lifecycleData) {
+    const s = lifecycleData.stages;
+    const total = Object.values(s).reduce((sum, arr) => sum + arr.length, 0);
+    if (total > 0) {
+      const segments = [
+        { count: (s['needs-planning'] || []).length, color: '#fbbf24' },
+        { count: (s['needs-approval'] || []).length, color: '#f97316' },
+        { count: (s['ready-to-execute'] || []).length, color: '#86efac' },
+        { count: (s['in-execution'] || []).length, color: '#60a5fa' },
+        { count: (s['done'] || []).length, color: '#6b7280' },
+      ];
+      progressHtml = `<div class="detail-section-label">Progress</div>
+        <div class="lifecycle-progress">${segments.map(seg =>
+          seg.count > 0 ? `<div class="lifecycle-progress-segment" style="width:${(seg.count / total * 100).toFixed(1)}%;background:${seg.color}"></div>` : ''
+        ).join('')}</div>
+        <div class="detail-meta">${lifecycleData.progress.done}/${lifecycleData.progress.total} done (${lifecycleData.progress.percentage}%)</div>`;
+    }
+  }
+
   $drillDetail.innerHTML = `
     <div class="detail-id" style="color:var(--accent)">PROJECT</div>
     <div class="detail-title">${escHtml(title)}</div>
     ${desc ? `<div class="detail-desc">${escHtml(desc)}</div>` : '<div class="detail-desc" style="color:var(--text-dim);font-style:italic">No project description yet. Run /declare:new-project to set one up.</div>'}
     ${core ? `<div class="detail-section-label">Core Value</div><div class="detail-desc">${escHtml(core)}</div>` : ''}
     ${currentState ? `<div class="detail-section-label">Current State</div><div class="detail-meta">${escHtml(currentState)}</div>` : ''}
+    ${progressHtml}
     <div class="detail-section-label">Graph</div>
     <div class="detail-meta">${dCount} declarations &middot; ${mCount} milestones &middot; ${aCount} actions</div>
   `;
 }
 
+// ─── Lifecycle stage display config ──────────────────────────────────────────
+
+const LIFECYCLE_STAGES = [
+  { key: 'needs-planning', label: 'Needs Planning', color: '#fbbf24', icon: '\u270E' },
+  { key: 'needs-approval', label: 'Needs Approval', color: '#f97316', icon: '\u2691' },
+  { key: 'ready-to-execute', label: 'Ready to Execute', color: '#86efac', icon: '\u25B6' },
+  { key: 'in-execution', label: 'In Execution', color: '#60a5fa', icon: '\u2699' },
+  { key: 'done', label: 'Done', color: '#6b7280', icon: '\u2713' },
+];
+
+
 /**
- * Level 1 — List all declarations as cards.
+ * Level 1 — Lifecycle-grouped view: all items grouped by stage.
  */
 function renderDrillDeclarations(enrichedDeclarations, enrichedMilestones, actions) {
   $drillContext.innerHTML = '';
@@ -1380,77 +1642,499 @@ function renderDrillDeclarations(enrichedDeclarations, enrichedMilestones, actio
   $drillDetail.classList.add('visible');
   renderProjectDetail();
 
+  // Handle empty project — delegate to onboarding (M-56)
   if (enrichedDeclarations.length === 0) {
-    $drillList.innerHTML = '<div class="col-empty">No declarations found</div>';
-    $drillPrompt.innerHTML = '';
+    renderEmptyOnboarding();
     return;
   }
 
+  // Classify ONLY declarations into lifecycle stages
+  const stages = classifyDeclarationsToStages(enrichedDeclarations, enrichedMilestones, actions);
+  const nextAction = lifecycleData ? lifecycleData.nextAction : null;
+
+  // Render filter chips
+  renderLifecycleFilterChipsGeneric($drillContext, stages, lifecycleFilter, (f) => {
+    lifecycleFilter = f;
+    renderDrillView();
+  });
+
+  // Build declaration cards grouped by lifecycle stage
   let firstUnapproved = null;
-  const container = document.createElement('div');
-  container.className = 'drill-cards';
-  container.dataset.nodeType = 'declaration';
+  const wrapper = document.createElement('div');
+  wrapper.className = 'lifecycle-stages';
+
+  LIFECYCLE_STAGES.forEach(stageDef => {
+    const items = stages[stageDef.key] || [];
+    if (lifecycleFilter && lifecycleFilter !== stageDef.key) return;
+    if (items.length === 0 && !lifecycleFilter) return;
+
+    const isDone = stageDef.key === 'done';
+    const isCollapsed = isDone && lifecycleDoneCollapsed && !lifecycleFilter;
+
+    const section = document.createElement('div');
+    section.className = `lifecycle-section${isCollapsed ? ' collapsed' : ''}`;
+    section.dataset.stage = stageDef.key;
+
+    // Stage header with action buttons
+    const header = document.createElement('div');
+    header.className = 'lifecycle-header';
+
+    let stageBtnHtml = '';
+    if (stageDef.key === 'needs-planning' && items.length > 0) {
+      stageBtnHtml = '<button class="lifecycle-stage-btn" data-stage-action="plan-next">Plan Next</button>';
+      stageBtnHtml += `<button class="lifecycle-stage-btn" data-stage-action="plan-all">Plan All (${items.length})</button>`;
+    } else if (stageDef.key === 'ready-to-execute' && items.length > 0) {
+      stageBtnHtml = '<button class="lifecycle-stage-btn" data-stage-action="execute">Execute</button>';
+    }
+
+    header.innerHTML = `
+      <span class="lifecycle-icon" style="color:${stageDef.color}">${stageDef.icon}</span>
+      <span class="lifecycle-label">${escHtml(stageDef.label)}</span>
+      <span class="lifecycle-count" style="background:${stageDef.color}20;color:${stageDef.color}">${items.length}</span>
+      ${isDone ? `<span class="lifecycle-toggle">${isCollapsed ? '\u25B6' : '\u25BC'}</span>` : ''}
+      <span class="lifecycle-header-spacer"></span>
+      ${stageBtnHtml}
+    `;
+    if (isDone) {
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', (e) => {
+        if (e.target.closest('.lifecycle-stage-btn')) return;
+        lifecycleDoneCollapsed = !lifecycleDoneCollapsed;
+        renderDrillView();
+      });
+    }
 
-  enrichedDeclarations.forEach(d => {
-    const title = d.title || d.statement || d.id;
-    const desc = d.statement || '';
-    const myMilestones = enrichedMilestones.filter(m => (d.milestones || []).includes(m.id));
-    const needsReview = d.reviewState !== 'approved';
-    const isCurrent = needsReview && !firstUnapproved;
-    if (needsReview && !firstUnapproved) firstUnapproved = d;
+    // Wire stage action buttons
+    const stageBtn = header.querySelector('.lifecycle-stage-btn');
+    if (stageBtn) {
+      stageBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const action = stageBtn.dataset.stageAction;
+        if (action === 'plan-next') {
+          // Navigate into the first declaration needing planning
+          const first = items[0];
+          if (first) {
+            drillDeclId = first.id;
+            drillGoDeeper('milestones');
+            renderDrillView();
+          }
+        } else if (action === 'plan-all') {
+          // Kick off concurrent derivation for all declarations needing planning
+          triggerDeriveAll();
+        } else if (action === 'execute') {
+          switchView('execution');
+        }
+      });
+    }
 
-    const reviewMiles = myMilestones.filter(m => m.reviewState !== 'approved').length;
-    const statusClass = d.displayStatus === 'DONE' ? 's-done' : d.displayStatus === 'EXECUTING' ? 's-executing' : 's-planned';
+    section.appendChild(header);
 
-    let badgesHtml = `<span class="drill-status-pill ${statusClass}">${escHtml(d.displayStatus)}</span>`;
-    badgesHtml += reviewBadgeHtml(d.id, d.reviewState);
-    if (myMilestones.length > 0) {
-      badgesHtml += `<span class="drill-card-stat">${myMilestones.length} milestones`;
-      if (reviewMiles > 0) badgesHtml += ` <strong>(${reviewMiles} need review)</strong>`;
-      badgesHtml += '</span>';
+    // Cards — declaration cards with statement text
+    if (!isCollapsed) {
+      const cardsContainer = document.createElement('div');
+      cardsContainer.className = 'drill-cards lifecycle-cards';
+      cardsContainer.dataset.nodeType = 'declaration';
+
+      items.forEach(d => {
+        const needsReview = d.reviewState !== 'approved';
+        const isCurrent = needsReview && !firstUnapproved;
+        if (needsReview && !firstUnapproved) firstUnapproved = d;
+
+        const stmt = d.statement || d.title || '';
+        const myMiles = enrichedMilestones.filter(m => (m.realizes || []).includes(d.id));
+        const mileCount = myMiles.length;
+        const unapprovedMiles = myMiles.filter(m => m.reviewState !== 'approved').length;
+
+        const isDeriving = activeDeriveMap.has(d.id);
+        const runningAgent = getRunningAgentForNode(d.id);
+        const isPending = pendingDerivations.has(d.id);
+        const hasActiveWork = isDeriving || runningAgent || isPending;
+
+        let statusLabel = d.displayStatus || d.status || 'PENDING';
+        const statusClass = statusLabel === 'DONE' ? 's-done' : statusLabel === 'EXECUTING' ? 's-executing' : 's-planned';
+
+        let badgesHtml = `<span class="drill-status-pill ${statusClass}">${escHtml(statusLabel)}</span>`;
+        badgesHtml += reviewBadgeHtml(d.id, d.reviewState);
+        if (mileCount > 0) {
+          badgesHtml += `<span class="drill-card-stat">${mileCount} milestones`;
+          if (unapprovedMiles > 0) badgesHtml += ` <strong>(${unapprovedMiles} need review)</strong>`;
+          badgesHtml += '</span>';
+        }
+
+        const activeLabel = isPending ? 'Starting\u2026' : isDeriving ? 'Planning\u2026' : runningAgent ? (AGENT_TYPE_LABELS[runningAgent.type] || runningAgent.type) + '\u2026' : '';
+
+        const el = document.createElement('div');
+        el.className = `drill-card${needsReview ? ' needs-review' : ''}${isCurrent ? ' current-review' : ''}${hasActiveWork ? ' drill-card-deriving' : ''}`;
+        el.innerHTML = `
+          <div class="drill-card-top">
+            <span class="drill-card-id">${escHtml(d.id)}</span>
+            <div class="drill-card-body">
+              <div class="drill-card-title">${escHtml(d.title || d.statement || d.id)}</div>
+              <div class="drill-card-desc">${stmt !== (d.title || '') ? escHtml(stmt) : ''}</div>
+              <div class="drill-card-badges">${badgesHtml}</div>
+            </div>
+          </div>
+          ${renderEntityActions(d.id, d.reviewState, undefined, hasActiveWork ? activeLabel : null)}
+        `;
+
+        el.addEventListener('click', (e) => {
+          if (e.target.closest('.drill-review-btn') || e.target.closest('.drill-action-btn') || e.target.closest('textarea') || e.target.closest('input') || e.target.closest('.refine-container') || e.target.closest('.discuss-container')) return;
+          drillDeclId = d.id;
+          drillGoDeeper('milestones');
+          renderDrillView();
+        });
+
+        cardsContainer.appendChild(el);
+      });
+
+      section.appendChild(cardsContainer);
+      wireInlineReviewButtons(cardsContainer);
+      wireEntityMenus(cardsContainer);
     }
 
-    const el = document.createElement('div');
-    el.className = `drill-card${needsReview ? ' needs-review' : ''}${isCurrent ? ' current-review' : ''}`;
-    el.innerHTML = `
-      <div class="drill-card-top">
-        <span class="drill-card-id">${escHtml(d.id)}</span>
-        <div class="drill-card-body">
-          <div class="drill-card-title">${escHtml(title)}</div>
-          <div class="drill-card-desc">${desc !== title ? escHtml(desc) : ''}</div>
-          <div class="drill-card-badges">${badgesHtml}</div>
-        </div>
-      </div>
-      ${renderEntityActions(d.id, d.reviewState)}
-    `;
+    wrapper.appendChild(section);
+  });
 
-    el.addEventListener('click', (e) => {
-      if (e.target.closest('.drill-review-btn') || e.target.closest('.drill-action-btn')) return;
-      drillDeclId = d.id;
-      drillGoDeeper('milestones');
-      renderDrillView();
+  $drillList.appendChild(wrapper);
+
+  $drillPrompt.innerHTML = '';
+}
+
+
+/**
+ * Navigate into a lifecycle item by type.
+ */
+function navigateToItem(item, enrichedDeclarations, enrichedMilestones, actions) {
+  if (item.type === 'declaration') {
+    drillDeclId = item.id;
+    drillGoDeeper('milestones');
+    renderDrillView();
+  } else if (item.type === 'milestone') {
+    // Find parent declaration
+    const decl = enrichedDeclarations.find(d => (d.milestones || []).includes(item.id));
+    if (decl) drillDeclId = decl.id;
+    drillMileId = item.id;
+    drillGoDeeper('actions');
+    renderDrillView();
+  } else if (item.type === 'action') {
+    // Find parent milestone and declaration
+    const action = (actions || []).find(a => a.id === item.id);
+    if (action) {
+      const mId = (action.causes || [])[0];
+      if (mId) {
+        const mile = enrichedMilestones.find(m => m.id === mId);
+        if (mile && mile.realizes && mile.realizes.length) drillDeclId = mile.realizes[0];
+        drillMileId = mId;
+      }
+    }
+    drillGoDeeper('actions');
+    renderDrillView();
+  }
+}
+
+/**
+ * Render the prompt bar for lifecycle view using nextAction intelligence.
+ */
+function renderLifecyclePrompt(nextAction, enrichedDeclarations, enrichedMilestones, actions) {
+  if (!$drillPrompt) return;
+
+  if (!nextAction) {
+    $drillPrompt.innerHTML = '';
+    return;
+  }
+
+  if (nextAction.action === 'complete') {
+    $drillPrompt.innerHTML = `<span class="drill-prompt-complete">${escHtml(nextAction.label)}</span>`;
+    return;
+  }
+
+  // Count unapproved items across all types
+  const allNodes = [...enrichedDeclarations, ...enrichedMilestones, ...(actions || [])];
+  const unapprovedCount = allNodes.filter(n => n.reviewState !== 'approved' && !COMPLETED.has((n.status || '').toUpperCase())).length;
+
+  const labelHtml = `<span class="drill-prompt-text">\u2192 ${escHtml(nextAction.label)}</span>`;
+
+  let actionsHtml = '';
+  if (nextAction.targetId) {
+    actionsHtml += `<button class="drill-next-btn" id="drill-lifecycle-go"><kbd>N</kbd> Go</button>`;
+  }
+  if (unapprovedCount > 0) {
+    actionsHtml += `<button class="drill-approve-all-btn" id="drill-approve-all"><kbd>⌃⇧A</kbd> Approve All (${unapprovedCount})</button>`;
+  }
+
+  $drillPrompt.innerHTML = labelHtml + actionsHtml;
+
+  // Wire go button
+  const goBtn = document.getElementById('drill-lifecycle-go');
+  if (goBtn && nextAction.targetId) {
+    goBtn.addEventListener('click', () => {
+      if (nextAction.action === 'derive-milestones') {
+        drillDeclId = nextAction.targetId;
+        drillGoDeeper('milestones');
+        renderDrillView();
+      } else if (nextAction.action === 'derive-actions') {
+        // Find parent declaration
+        const mile = enrichedMilestones.find(m => m.id === nextAction.targetId);
+        if (mile && mile.realizes && mile.realizes.length) drillDeclId = mile.realizes[0];
+        drillMileId = nextAction.targetId;
+        drillGoDeeper('actions');
+        renderDrillView();
+      } else if (nextAction.action === 'approve') {
+        // Navigate to the node needing approval
+        navigateToItem({
+          id: nextAction.targetId,
+          type: nextAction.targetType || 'declaration',
+        }, enrichedDeclarations, enrichedMilestones, actions);
+      } else if (nextAction.action === 'execute') {
+        switchView('execution');
+      }
     });
+  }
+
+  // Wire approve-all
+  const approveAllBtn = document.getElementById('drill-approve-all');
+  if (approveAllBtn) {
+    approveAllBtn.addEventListener('click', () => approveAllVisible());
+  }
+}
+
+/**
+ * Classify declarations into lifecycle stages (declarations only, no mixing).
+ */
+function classifyDeclarationsToStages(declarations, milestones, actions) {
+  const stages = { 'needs-planning': [], 'needs-approval': [], 'ready-to-execute': [], 'in-execution': [], 'done': [] };
+  for (const d of declarations) {
+    const status = (d.status || '').toUpperCase();
+    if (COMPLETED.has(status) || d.displayStatus === 'DONE') {
+      stages['done'].push(d);
+      continue;
+    }
+
+    // A declaration's stage is determined by the worst stage of its children.
+    // No milestones at all → needs planning.
+    const myMiles = milestones.filter(m => (m.realizes || []).includes(d.id));
+    if (myMiles.length === 0) {
+      stages['needs-planning'].push(d);
+      continue;
+    }
+
+    // Check each milestone's stage and bubble up the worst one.
+    // Priority (worst to best): needs-planning > needs-approval > ready-to-execute > in-execution > done
+    let worstStage = 'done';
+    const stageRank = { 'needs-planning': 0, 'needs-approval': 1, 'ready-to-execute': 2, 'in-execution': 3, 'done': 4 };
+
+    for (const m of myMiles) {
+      const mStatus = (m.status || m.displayStatus || '').toUpperCase();
+      let mStage;
+      if (COMPLETED.has(mStatus) || m.displayStatus === 'DONE') {
+        mStage = 'done';
+      } else if (!(actions || []).some(a => (a.causes || []).includes(m.id))) {
+        mStage = 'needs-planning';
+      } else if (m.reviewState !== 'approved') {
+        mStage = 'needs-approval';
+      } else if (m.displayStatus === 'EXECUTING' || EXECUTING_STATUSES_SET.has(mStatus)) {
+        mStage = 'in-execution';
+      } else {
+        mStage = 'ready-to-execute';
+      }
+      if (stageRank[mStage] < stageRank[worstStage]) {
+        worstStage = mStage;
+      }
+    }
+
+    // Declaration's own review state can also pull it back
+    if (d.reviewState !== 'approved' && stageRank['needs-approval'] < stageRank[worstStage]) {
+      worstStage = 'needs-approval';
+    }
 
-    container.appendChild(el);
+    stages[worstStage].push(d);
+  }
+  return stages;
+}
+
+/**
+ * Classify a list of milestones into lifecycle stages.
+ */
+function classifyMilestonesToStages(milestones, actions) {
+  const stages = { 'needs-planning': [], 'needs-approval': [], 'ready-to-execute': [], 'in-execution': [], 'done': [] };
+  for (const m of milestones) {
+    const status = (m.status || m.displayStatus || '').toUpperCase();
+    if (COMPLETED.has(status) || m.displayStatus === 'DONE') {
+      stages['done'].push(m);
+    } else {
+      const myActions = (actions || []).filter(a => (a.causes || []).includes(m.id));
+      const hasActions = myActions.length > 0;
+      const hasNoActionPlan = !m.hasPlan && !hasActions;
+      const allActionsApproved = hasActions && myActions.every(a => a.reviewState === 'approved' || COMPLETED.has((a.status || '').toUpperCase()));
+      const hasUnapprovedActions = hasActions && !allActionsApproved;
+      if (hasNoActionPlan) {
+        stages['needs-planning'].push(m);
+      } else if (m.reviewState !== 'approved' || hasUnapprovedActions) {
+        stages['needs-approval'].push(m);
+      } else if (m.displayStatus === 'EXECUTING' || EXECUTING_STATUSES_SET.has(status)) {
+        stages['in-execution'].push(m);
+      } else {
+        stages['ready-to-execute'].push(m);
+      }
+    }
+  }
+  return stages;
+}
+
+/**
+ * Classify a list of actions into lifecycle stages.
+ */
+function classifyActionsToStages(actionsArr) {
+  const stages = { 'needs-planning': [], 'needs-approval': [], 'ready-to-execute': [], 'in-execution': [], 'done': [] };
+  for (const a of actionsArr) {
+    const status = (a.status || '').toUpperCase();
+    if (COMPLETED.has(status)) {
+      stages['done'].push(a);
+    } else if (runningActions.has(a.id) || EXECUTING_STATUSES_SET.has(status)) {
+      stages['in-execution'].push(a);
+    } else if (a.reviewState !== 'approved') {
+      stages['needs-approval'].push(a);
+    } else {
+      stages['ready-to-execute'].push(a);
+    }
+  }
+  return stages;
+}
+
+/**
+ * Render lifecycle filter chips into a container for any level.
+ * @param {HTMLElement} container - Element to render chips into
+ * @param {Object} stages - Stage classification
+ * @param {string|null} activeFilter - Current filter
+ * @param {function} onFilter - Callback when filter changes
+ */
+function renderLifecycleFilterChipsGeneric(container, stages, activeFilter, onFilter) {
+  const chips = document.createElement('div');
+  chips.className = 'lifecycle-filter-chips';
+
+  const allChip = document.createElement('button');
+  allChip.className = `lifecycle-chip${!activeFilter ? ' active' : ''}`;
+  allChip.textContent = 'All';
+  allChip.addEventListener('click', () => onFilter(null));
+  chips.appendChild(allChip);
+
+  LIFECYCLE_STAGES.forEach(stageDef => {
+    const items = stages[stageDef.key] || [];
+    if (items.length === 0) return;
+    const chip = document.createElement('button');
+    chip.className = `lifecycle-chip${activeFilter === stageDef.key ? ' active' : ''}`;
+    chip.innerHTML = `${escHtml(stageDef.label)} <span class="chip-count">${items.length}</span>`;
+    chip.style.setProperty('--chip-color', stageDef.color);
+    chip.addEventListener('click', () => onFilter(activeFilter === stageDef.key ? null : stageDef.key));
+    chips.appendChild(chip);
   });
 
-  $drillList.appendChild(container);
-  wireInlineReviewButtons(container);
-  wireEntityMenus(container);
-
-  // Prompt
-  if (firstUnapproved) {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-text">\u2192 Review <span class="drill-prompt-target" data-drill-target="${escHtml(firstUnapproved.id)}">${escHtml(firstUnapproved.id)}</span> next</span>`;
-    $drillPrompt.querySelector('.drill-prompt-target').addEventListener('click', () => {
-      drillDeclId = firstUnapproved.id;
-      drillLevel = 'milestones';
-      renderDrillView();
-    });
-  } else {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-complete">All declarations reviewed</span>
-      <button class="drill-next-btn" id="drill-next-btn"><kbd>N</kbd> Next</button>`;
-    document.getElementById('drill-next-btn').addEventListener('click', () => drillAdvanceNext());
+  container.innerHTML = '';
+  container.appendChild(chips);
+}
+
+/**
+ * Render items grouped by lifecycle stage sections.
+ * @param {HTMLElement} listEl - Element to render sections into
+ * @param {Object} stages - Stage classification
+ * @param {string|null} filter - Active filter
+ * @param {function} buildCard - Function to build a card element for an item
+ * @param {Object} [opts] - Options like doneCollapsed
+ */
+function renderLifecycleSections(listEl, stages, filter, buildCard, opts) {
+  const wrapper = document.createElement('div');
+  wrapper.className = 'lifecycle-stages';
+  const doneCollapsed = opts && opts.doneCollapsed;
+
+  LIFECYCLE_STAGES.forEach(stageDef => {
+    const items = stages[stageDef.key] || [];
+    if (filter && filter !== stageDef.key) return;
+    if (items.length === 0 && !filter) return;
+
+    const isDone = stageDef.key === 'done';
+    const isCollapsed = isDone && doneCollapsed && !filter;
+
+    const section = document.createElement('div');
+    section.className = `lifecycle-section${isCollapsed ? ' collapsed' : ''}`;
+    section.dataset.stage = stageDef.key;
+
+    const header = document.createElement('div');
+    header.className = 'lifecycle-header';
+    header.innerHTML = `
+      <span class="lifecycle-icon" style="color:${stageDef.color}">${stageDef.icon}</span>
+      <span class="lifecycle-label">${escHtml(stageDef.label)}</span>
+      <span class="lifecycle-count" style="background:${stageDef.color}20;color:${stageDef.color}">${items.length}</span>
+      ${isDone ? `<span class="lifecycle-toggle">${isCollapsed ? '\u25B6' : '\u25BC'}</span>` : ''}
+    `;
+    if (isDone) {
+      header.style.cursor = 'pointer';
+      header.addEventListener('click', () => {
+        if (opts && opts.onToggleDone) opts.onToggleDone();
+      });
+    }
+    section.appendChild(header);
+
+    if (!isCollapsed) {
+      const cardsContainer = document.createElement('div');
+      cardsContainer.className = 'drill-cards lifecycle-cards';
+      if (opts && opts.nodeType) cardsContainer.dataset.nodeType = opts.nodeType;
+
+      items.forEach(item => {
+        const el = buildCard(item);
+        cardsContainer.appendChild(el);
+      });
+
+      section.appendChild(cardsContainer);
+      wireInlineReviewButtons(cardsContainer);
+      wireEntityMenus(cardsContainer);
+    }
+
+    wrapper.appendChild(section);
+  });
+
+  listEl.appendChild(wrapper);
+}
+
+/**
+ * Empty state onboarding — shown when project has no declarations.
+ * Renders centered project name, inline declaration input, and explanation.
+ */
+function renderEmptyOnboarding() {
+  const projectName = (projectInfo && (projectInfo.title || projectInfo.folder)) || 'Your Project';
+
+  $drillList.innerHTML = `
+    <div class="onboarding-empty">
+      <div class="onboarding-project">${escHtml(projectName)}</div>
+      <div class="onboarding-heading">Describe your vision</div>
+      <div class="onboarding-desc">Tell us what you're building. We'll ask clarifying questions, then break it down into concrete declarations with milestones.</div>
+      <div class="onboarding-form">
+        <textarea id="onboarding-vision" class="onboarding-textarea" placeholder="Describe what you're building, what problems it solves, key features, target users..." rows="10"></textarea>
+        <button id="onboarding-submit" class="onboarding-btn">Let's go</button>
+        <div id="onboarding-error" class="onboarding-error"></div>
+      </div>
+    </div>
+  `;
+
+  $drillPrompt.innerHTML = '';
+
+  const $vision = document.getElementById('onboarding-vision');
+  const $btn = document.getElementById('onboarding-submit');
+  const $err = document.getElementById('onboarding-error');
+
+  function submitVision() {
+    const text = ($vision.value || '').trim();
+    if (!text) {
+      $err.textContent = 'Describe your vision first.';
+      return;
+    }
+    startOnboard(text);
   }
+
+  $btn.addEventListener('click', submitVision);
+  $vision.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) submitVision();
+  });
+  requestAnimationFrame(() => $vision.focus());
 }
 
 /**
@@ -1487,58 +2171,77 @@ function renderDrillMilestones(enrichedDeclarations, enrichedMilestones, actions
   wireInlineReviewButtons($drillDetail);
   wireEntityMenus($drillDetail);
 
-  $drillContext.innerHTML = '';
-
   const filtered = enrichedMilestones.filter(m => (m.realizes || []).includes(drillDeclId));
 
   $drillList.innerHTML = '';
   if (filtered.length === 0) {
+    $drillContext.innerHTML = '';
     $drillList.innerHTML = `
       <div class="col-empty-invite">
         <div class="empty-invite-title">No milestones yet</div>
         <div class="empty-invite-desc">Plan milestones to break this declaration into achievable steps.</div>
         <textarea class="empty-invite-input" id="plan-guidance-input" placeholder="Optional: guide the direction..." rows="2"></textarea>
         <button class="empty-invite-btn" id="plan-milestones-btn"><kbd>P</kbd> Plan Milestones</button>
+        <div id="derivation-progress" class="derivation-progress" style="display:none"></div>
         <div id="derivation-log" class="output-log" style="display:none; min-height:0"></div>
-        <div id="derivation-proposals" style="display:none"></div>
       </div>`;
     $drillPrompt.innerHTML = '';
 
     // Wire the Plan button to trigger derivation
     const planBtn = document.getElementById('plan-milestones-btn');
     if (planBtn) {
-      planBtn.addEventListener('click', () => {
+      // If derivation is already running (triggered from declaration card or restored), show active state
+      if (derivationSessionId) {
         planBtn.disabled = true;
-        const startTime = Date.now();
-        planBtn.innerHTML = '<span class="derive-spinner"></span> Deriving milestones\u2026 <span class="derive-elapsed">0s</span>';
+        const startTime = derivationStartTime || Date.now();
+        const elapsed0 = Math.floor((Date.now() - startTime) / 1000);
+        planBtn.innerHTML = '<span class="derive-spinner"></span> Planning milestones\u2026 <span class="derive-elapsed">' + fmtElapsed(elapsed0) + '</span>';
         const elSpan = planBtn.querySelector('.derive-elapsed');
         const timer = setInterval(() => {
           if (!elSpan || !document.contains(elSpan)) { clearInterval(timer); return; }
-          const sec = Math.floor((Date.now() - startTime) / 1000);
-          elSpan.textContent = sec + 's';
+          elSpan.textContent = fmtElapsed(Math.floor((Date.now() - startTime) / 1000));
         }, 1000);
         planBtn._deriveTimer = timer;
-        startDerivation(drillDeclId);
-      });
-    }
-    return;
-  }
+        showDerivationProgress(startTime);
+      }
 
-  let firstUnapproved = null;
-  const container = document.createElement('div');
-  container.className = 'drill-cards';
-  container.dataset.nodeType = 'milestone';
+      planBtn.addEventListener('click', () => {
+        planBtn.disabled = true;
+        derivationStartTime = Date.now();
+        const startTime = derivationStartTime;
+        planBtn.innerHTML = '<span class="derive-spinner"></span> Planning milestones\u2026 <span class="derive-elapsed">0s</span>';
+        const elSpan = planBtn.querySelector('.derive-elapsed');
+        const timer = setInterval(() => {
+          if (!elSpan || !document.contains(elSpan)) { clearInterval(timer); return; }
+          elSpan.textContent = fmtElapsed(Math.floor((Date.now() - startTime) / 1000));
+        }, 1000);
+        planBtn._deriveTimer = timer;
+        showDerivationProgress(startTime);
+        startDerivation(drillDeclId);
+      });
+    }
+    return;
+  }
+
+  // Classify milestones into lifecycle stages
+  const stages = classifyMilestonesToStages(filtered, actions);
+
+  // Render filter chips
+  renderLifecycleFilterChipsGeneric($drillContext, stages, lifecycleFilterL2, (f) => {
+    lifecycleFilterL2 = f;
+    renderDrillView();
+  });
 
-  filtered.forEach(m => {
+  // Build cards grouped by lifecycle stage
+  let firstUnapproved = null;
+  renderLifecycleSections($drillList, stages, lifecycleFilterL2, (m) => {
     const mTitle = m.title || m.id;
     const needsReview = m.reviewState !== 'approved';
     const isCurrent = needsReview && !firstUnapproved;
     if (needsReview && !firstUnapproved) firstUnapproved = m;
 
     const myActions = (actions || []).filter(a => (a.causes || []).includes(m.id));
-
-    // Build description: milestone produces, or summarize from child action produces
-    let mDesc = m.produces || '';
+    let mDesc = m.description || m.produces || '';
     if (!mDesc && myActions.length > 0) {
       const actionDescs = myActions.map(a => a.produces).filter(Boolean);
       if (actionDescs.length > 0) mDesc = actionDescs.join(' \u00B7 ');
@@ -1562,6 +2265,26 @@ function renderDrillMilestones(enrichedDeclarations, enrichedMilestones, actions
       badgesHtml += '</span>';
     }
 
+    // Inline action list for milestone cards
+    let actionListHtml = '';
+    if (myActions.length > 0) {
+      actionListHtml = '<ul class="drill-card-action-list">' +
+        myActions.map(a => {
+          const aStatus = (a.status || 'PENDING').toUpperCase();
+          const isDone = COMPLETED.has(aStatus);
+          const isApproved = a.reviewState === 'approved';
+          const icon = isDone ? '\u2713' : isApproved ? '\u25CB' : '\u00B7';
+          const cls = isDone ? 'done' : isApproved ? 'planned' : 'unplanned';
+          return `<li class="${cls}"><span class="al-icon">${icon}</span>${escHtml(a.title || a.id)}</li>`;
+        }).join('') + '</ul>';
+    } else {
+      actionListHtml = '<div class="drill-card-no-actions">No actions yet</div>';
+    }
+
+    const runningAgent = getRunningAgentForNode(m.id);
+    const isPending = pendingDerivations.has(m.id);
+    const hasActiveWork = runningAgent || isPending;
+    const activeLabel = isPending ? 'Planning…' : runningAgent ? (AGENT_TYPE_LABELS[runningAgent.type] || runningAgent.type) + '…' : '';
     const el = document.createElement('div');
     el.className = `drill-card${needsReview ? ' needs-review' : ''}${isCurrent ? ' current-review' : ''}`;
     el.innerHTML = `
@@ -1571,38 +2294,23 @@ function renderDrillMilestones(enrichedDeclarations, enrichedMilestones, actions
           <div class="drill-card-title">${escHtml(mTitle)}</div>
           <div class="drill-card-desc">${mDesc !== mTitle ? escHtml(mDesc) : ''}</div>
           <div class="drill-card-badges">${badgesHtml}</div>
+          ${actionListHtml}
         </div>
       </div>
-      ${renderEntityActions(m.id, m.reviewState)}
+      ${renderEntityActions(m.id, m.reviewState, undefined, hasActiveWork ? activeLabel : null)}
     `;
 
     el.addEventListener('click', (e) => {
-      if (e.target.closest('.drill-review-btn') || e.target.closest('.drill-action-btn')) return;
+      if (e.target.closest('.drill-review-btn') || e.target.closest('.drill-action-btn') || e.target.closest('textarea') || e.target.closest('input') || e.target.closest('.refine-container') || e.target.closest('.discuss-container')) return;
       drillMileId = m.id;
       drillGoDeeper('actions');
       renderDrillView();
     });
 
-    container.appendChild(el);
-  });
+    return el;
+  }, { nodeType: 'milestone', doneCollapsed: lifecycleDoneCollapsed, onToggleDone: () => { lifecycleDoneCollapsed = !lifecycleDoneCollapsed; renderDrillView(); } });
 
-  $drillList.appendChild(container);
-  wireInlineReviewButtons(container);
-  wireEntityMenus(container);
-
-  // Prompt
-  if (firstUnapproved) {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-text">\u2192 Review <span class="drill-prompt-target" data-drill-target="${escHtml(firstUnapproved.id)}">${escHtml(firstUnapproved.id)}</span> to continue</span>`;
-    $drillPrompt.querySelector('.drill-prompt-target').addEventListener('click', () => {
-      drillMileId = firstUnapproved.id;
-      drillLevel = 'actions';
-      renderDrillView();
-    });
-  } else {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-complete">All milestones approved</span>
-      <button class="drill-next-btn" id="drill-next-btn"><kbd>N</kbd> Next</button>`;
-    document.getElementById('drill-next-btn').addEventListener('click', () => drillAdvanceNext());
-  }
+  $drillPrompt.innerHTML = '';
 }
 
 /**
@@ -1621,7 +2329,7 @@ function renderDrillActions(enrichedDeclarations, enrichedMilestones, actions) {
   const filtered = (actions || []).filter(a => (a.causes || []).includes(drillMileId));
 
   // Left detail panel — milestone info + review controls
-  let produces = mile.produces || '';
+  let produces = mile.description || mile.produces || '';
   if (!produces && filtered.length > 0) {
     const actionDescs = filtered.map(a => a.produces).filter(Boolean);
     if (actionDescs.length > 0) produces = actionDescs.join(' · ');
@@ -1638,7 +2346,14 @@ function renderDrillActions(enrichedDeclarations, enrichedMilestones, actions) {
 
   $drillDetail.classList.add('visible');
   $drillDetail.dataset.nodeType = 'milestone';
+  const declDesc = decl.statement || decl.title || '';
   $drillDetail.innerHTML = `
+    <div class="detail-parent-context">
+      <div class="detail-id" style="opacity:0.6">${escHtml(decl.id)}</div>
+      <div class="detail-title" style="font-size:14px;opacity:0.8">${escHtml(decl.title || '')}</div>
+      ${decl.statement ? `<div class="detail-desc" style="font-size:12px;opacity:0.6">${escHtml(truncate(decl.statement, 200))}</div>` : ''}
+    </div>
+    <hr style="border:none;border-top:1px solid var(--bg-3);margin:10px 0">
     <div class="detail-id">${escHtml(mile.id)}</div>
     <div class="detail-title">${escHtml(mileTitle)}</div>
     <div class="detail-desc">${produces ? escHtml(produces) : ''}</div>
@@ -1646,29 +2361,61 @@ function renderDrillActions(enrichedDeclarations, enrichedMilestones, actions) {
       <span class="drill-status-pill ${mileStatusClass}">${escHtml(mileStatusLabel)}</span>
       ${reviewBadgeHtml(mile.id, mile.reviewState)}
     </div>
-    <div class="detail-section-label">Declaration</div>
-    <div class="detail-meta">${escHtml(decl.id)}: ${escHtml(truncate(decl.title || decl.statement || '', 60))}</div>
     ${renderEntityActions(mile.id, mile.reviewState, { shift: true })}
     <div class="refine-container" id="refine-area-${escHtml(mile.id)}"></div>
   `;
   wireInlineReviewButtons($drillDetail);
   wireEntityMenus($drillDetail);
 
-  $drillContext.innerHTML = '';
-
   $drillList.innerHTML = '';
   if (filtered.length === 0) {
-    $drillList.innerHTML = '<div class="col-empty">No actions for this milestone</div>';
+    $drillContext.innerHTML = '';
+
+    // Check if derivation is already running for this milestone
+    const isDerivingHere = actionDerivationSessionId && actionDerivationMilestoneId === drillMileId;
+
+    $drillList.innerHTML = `
+      <div class="col-empty-invite">
+        <div class="empty-invite-title">No actions yet</div>
+        <div class="empty-invite-desc">Plan actions to break this milestone into executable steps.</div>
+        <textarea class="empty-invite-input" id="action-guidance-input" placeholder="Optional: guide the direction..." rows="2"></textarea>
+        <button class="empty-invite-btn" id="action-derive-btn"${isDerivingHere ? ' disabled' : ''}>${isDerivingHere ? '<span class="derive-spinner"></span> Planning actions\u2026' : '<kbd>P</kbd> Plan Actions'}</button>
+        <div id="action-derivation-log" class="output-log" style="${isDerivingHere ? '' : 'display:none;'} min-height:0"></div>
+        <div id="action-derivation-proposals" style="display:none"></div>
+      </div>`;
     $drillPrompt.innerHTML = '';
+
+    // If derivation already has proposals, render them
+    if (actionDerivationProposals && actionDerivationMilestoneId === drillMileId) {
+      renderActionProposals();
+    }
+
+    // Wire the Plan button to trigger action derivation
+    const deriveBtn = document.getElementById('action-derive-btn');
+    if (deriveBtn && !isDerivingHere) {
+      deriveBtn.addEventListener('click', () => {
+        deriveBtn.disabled = true;
+        deriveBtn.innerHTML = '<span class="derive-spinner"></span> Planning actions\u2026';
+        const logEl = document.getElementById('action-derivation-log');
+        if (logEl) logEl.style.display = '';
+        startActionDerivation(drillMileId);
+      });
+    }
     return;
   }
 
-  let firstUnapproved = null;
-  const container = document.createElement('div');
-  container.className = 'drill-cards';
-  container.dataset.nodeType = 'action';
+  // Classify actions into lifecycle stages
+  const stages = classifyActionsToStages(filtered);
+
+  // Render filter chips
+  renderLifecycleFilterChipsGeneric($drillContext, stages, lifecycleFilterL3, (f) => {
+    lifecycleFilterL3 = f;
+    renderDrillView();
+  });
 
-  filtered.forEach(a => {
+  // Build cards grouped by lifecycle stage
+  let firstUnapproved = null;
+  renderLifecycleSections($drillList, stages, lifecycleFilterL3, (a) => {
     const aTitle = a.title || a.id;
     const aDesc = a.produces || a.title || '';
     const status = a.status || 'PENDING';
@@ -1692,65 +2439,13 @@ function renderDrillActions(enrichedDeclarations, enrichedMilestones, actions) {
           <div class="drill-card-badges">${badgesHtml}</div>
         </div>
       </div>
-      <div class="drill-exec-plan-toggle" data-action-id="${escHtml(a.id)}">\u25B6 Show exec-plan</div>
-      <div class="drill-exec-plan-content" id="drill-plan-${escHtml(a.id)}"></div>
       ${renderEntityActions(a.id, a.reviewState)}
     `;
 
-    // Exec-plan toggle
-    el.querySelector('.drill-exec-plan-toggle').addEventListener('click', async (e) => {
-      e.stopPropagation();
-      const toggle = e.currentTarget;
-      const content = el.querySelector('.drill-exec-plan-content');
-      if (content.classList.contains('open')) {
-        content.classList.remove('open');
-        toggle.textContent = '\u25B6 Show exec-plan';
-        return;
-      }
-      toggle.textContent = '\u25BC Loading...';
-      try {
-        const res = await fetch(`/api/action/${encodeURIComponent(a.id)}`);
-        const data = await res.json();
-        if (data.error || !data.execPlan) {
-          content.innerHTML = '<span style="opacity:0.5">No exec-plan found</span>';
-        } else {
-          const ep = data.execPlan;
-          let planHtml = '';
-          if (ep.goal) planHtml += `<div style="margin-bottom:6px"><strong>Goal:</strong> ${escHtml(ep.goal)}</div>`;
-          if (ep.tasks && ep.tasks.length) {
-            planHtml += '<div style="margin-bottom:4px"><strong>Tasks:</strong></div><ol style="padding-left:16px;margin:0">';
-            ep.tasks.forEach(t => {
-              const taskTitle = typeof t === 'string' ? t : (t.title || t.description || JSON.stringify(t));
-              planHtml += `<li style="margin-bottom:2px">${escHtml(truncate(taskTitle, 120))}</li>`;
-            });
-            planHtml += '</ol>';
-          }
-          if (!planHtml) planHtml = '<span style="opacity:0.5">Exec-plan loaded (no details)</span>';
-          content.innerHTML = planHtml;
-        }
-      } catch (err) {
-        content.innerHTML = `<span style="color:var(--broken-color)">Error: ${escHtml(err.message)}</span>`;
-      }
-      content.classList.add('open');
-      toggle.textContent = '\u25BC Hide exec-plan';
-    });
-
-    container.appendChild(el);
-  });
-
-  $drillList.appendChild(container);
-  wireInlineReviewButtons(container);
-  wireEntityMenus(container);
+    return el;
+  }, { nodeType: 'action', doneCollapsed: lifecycleDoneCollapsed, onToggleDone: () => { lifecycleDoneCollapsed = !lifecycleDoneCollapsed; renderDrillView(); } });
 
-  // Prompt
-  const allApproved = filtered.every(a => a.reviewState === 'approved');
-  if (allApproved) {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-complete">All actions approved</span>
-      <button class="drill-next-btn" id="drill-next-btn"><kbd>N</kbd> Next</button>`;
-    document.getElementById('drill-next-btn').addEventListener('click', () => drillAdvanceNext());
-  } else if (firstUnapproved) {
-    $drillPrompt.innerHTML = `<span class="drill-prompt-text">\u2192 Review <span class="drill-prompt-target">${escHtml(firstUnapproved.id)}</span> next</span>`;
-  }
+  $drillPrompt.innerHTML = '';
 }
 
 // ─── Drill helper functions ──────────────────────────────────────────────────
@@ -1769,15 +2464,96 @@ function renderInlineReviewButtons(nodeId) {
  * Return HTML for the unified entity action menu.
  * Available on ALL entities regardless of review state.
  */
-function renderEntityActions(nodeId, reviewState, opts) {
+function renderEntityActions(nodeId, reviewState, opts, activeLabel) {
   const shift = opts && opts.shift;
+  const spinnerHtml = activeLabel ? `<span class="derive-card-status"><span class="derive-spinner"></span> ${escHtml(activeLabel)}</span>` : '';
   const k = (key) => shift ? `⇧${key}` : key;
   const needsApprove = reviewState !== 'approved';
+  const prefix = nodeId.split('-')[0];
+  const isDone = graphData && (() => {
+    const allNodes = [...(graphData.declarations || []), ...(graphData.milestones || []), ...(graphData.actions || [])];
+    const node = allNodes.find(n => n.id === nodeId);
+    return node && COMPLETED.has((node.status || '').toUpperCase());
+  })();
+
+  if (isDone) {
+    // Done milestones show no actions; other done nodes show Review/Delete
+    if (prefix === 'M') return `<div class="drill-card-actions"></div>`;
+    return `<div class="drill-card-actions">
+      <button class="drill-action-btn" data-action="refine" data-mode="outdated" data-node-id="${escHtml(nodeId)}"><kbd>${k('R')}</kbd> Review</button>
+      <button class="drill-action-btn drill-action-danger" data-action="delete" data-node-id="${escHtml(nodeId)}"><kbd>${k('D')}</kbd> Delete</button>
+    </div>`;
+  }
+
+  // Primary action: what this node needs most right now
+  let primaryBtn = '';
+  if (prefix === 'A' && graphData) {
+    const action = (graphData.actions || []).find(a => a.id === nodeId);
+    if (action) {
+      const isExecuting = runningActions.has(nodeId) || EXECUTING_STATUSES_SET.has((action.status || '').toUpperCase());
+      if (isExecuting) {
+        primaryBtn = `<button class="drill-action-btn drill-action-primary" disabled><kbd>${k('V')}</kbd> Running...</button>`;
+      } else if (needsApprove) {
+        // Approve is primary — shown below
+      } else {
+        // Approved, not executing — Execute is primary
+        primaryBtn = `<button class="drill-action-btn drill-action-primary" data-action="execute" data-node-id="${escHtml(nodeId)}"><kbd>${k('E')}</kbd> Execute</button>`;
+      }
+    }
+  } else if (prefix === 'M' && graphData) {
+    const milestone = (graphData.milestones || []).find(m => m.id === nodeId);
+    const myActions = (graphData.actions || []).filter(a => (a.causes || []).includes(nodeId));
+    if (needsApprove) {
+      // Unapproved milestone — no primary action, just Approve/Edit/Delete (shown below)
+    } else if (myActions.length === 0) {
+      // Approved, no actions — Plan Actions is primary
+      primaryBtn = `<button class="drill-action-btn drill-action-primary" data-action="derive-actions" data-node-id="${escHtml(nodeId)}"><kbd>${k('P')}</kbd> Plan Actions</button>`;
+    } else {
+      const allApproved = myActions.every(a => a.reviewState === 'approved');
+      const hasUnapproved = myActions.some(a => a.reviewState !== 'approved' && !COMPLETED.has((a.status || '').toUpperCase()));
+      if (hasUnapproved) {
+        // Has unapproved actions — primary is to navigate to review them
+      } else if (allApproved) {
+        // All actions approved — Execute is primary
+        primaryBtn = `<button class="drill-action-btn drill-action-primary" data-action="execute-milestone" data-node-id="${escHtml(nodeId)}"><kbd>${k('E')}</kbd> Execute</button>`;
+      }
+    }
+  } else if (prefix === 'D' && graphData) {
+    const myMilestones = (graphData.milestones || []).filter(m => {
+      const realizes = Array.isArray(m.realizes) ? m.realizes : [m.realizes];
+      return realizes.includes(nodeId);
+    });
+    if (myMilestones.length === 0) {
+      // No milestones — Derive Milestones is primary
+      primaryBtn = `<button class="drill-action-btn drill-action-primary" data-action="derive-milestones" data-node-id="${escHtml(nodeId)}"><kbd>${k('P')}</kbd> Plan Milestones</button>`;
+    } else {
+      const hasUnapproved = myMilestones.some(m => m.reviewState !== 'approved' && !COMPLETED.has((m.status || '').toUpperCase()));
+      if (hasUnapproved) {
+        // Has unapproved milestones — no extra primary button, user can drill in
+      }
+    }
+  }
+
+  // Milestones and Declarations: primary + approve (if needed) + edit + delete
+  if (prefix === 'M' || prefix === 'D') {
+    const editBtn = `<button class="drill-action-btn" data-action="refine" data-mode="write" data-node-id="${escHtml(nodeId)}"><kbd>${k('E')}</kbd> Edit</button>`;
+    const deleteBtn = `<button class="drill-action-btn drill-action-danger" data-action="delete" data-node-id="${escHtml(nodeId)}"><kbd>${k('D')}</kbd> Delete</button>`;
+    return `<div class="drill-card-actions">
+      ${primaryBtn}
+      ${needsApprove ? `<button class="drill-review-btn approve-btn" data-review-action="approved" data-node-id="${escHtml(nodeId)}"><kbd>${k('A')}</kbd> Approve</button>` : ''}
+      ${editBtn}
+      ${deleteBtn}
+      ${spinnerHtml}
+    </div>`;
+  }
+
   return `<div class="drill-card-actions">
+    ${primaryBtn}
     ${needsApprove ? `<button class="drill-review-btn approve-btn" data-review-action="approved" data-node-id="${escHtml(nodeId)}"><kbd>${k('A')}</kbd> Approve</button>` : ''}
     <button class="drill-action-btn" data-action="refine" data-mode="outdated" data-node-id="${escHtml(nodeId)}"><kbd>${k('R')}</kbd> Review</button>
     <button class="drill-action-btn" data-action="refine" data-mode="write" data-node-id="${escHtml(nodeId)}"><kbd>${k('W')}</kbd> Write</button>
     <button class="drill-action-btn drill-action-danger" data-action="delete" data-node-id="${escHtml(nodeId)}"><kbd>${k('D')}</kbd> Delete</button>
+    ${spinnerHtml}
   </div>`;
 }
 
@@ -1870,6 +2646,50 @@ function wireEntityMenus($container) {
         if (confirm(`Delete ${nodeId}? This cannot be undone.`)) {
           deleteNode(nodeId);
         }
+      } else if (action === 'execute') {
+        // Execute a single action
+        fetch('/api/action/' + encodeURIComponent(nodeId) + '/execute', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+        }).then(r => r.json()).then(data => {
+          if (data.error) {
+            alert('Execute error: ' + data.error);
+          } else {
+            runningActions.add(nodeId);
+            renderDrillView();
+          }
+        });
+      } else if (action === 'execute-milestone') {
+        // Execute all approved actions for this milestone
+        const myActions = (graphData.actions || []).filter(a =>
+          (a.causes || []).includes(nodeId) && a.reviewState === 'approved' && !COMPLETED.has((a.status || '').toUpperCase())
+        );
+        for (const a of myActions) {
+          fetch('/api/action/' + encodeURIComponent(a.id) + '/execute', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+          }).then(r => r.json()).then(data => {
+            if (!data.error) {
+              runningActions.add(a.id);
+              renderDrillView();
+            }
+          });
+        }
+      } else if (action === 'derive-actions') {
+        // Navigate into milestone's actions view, then derive
+        drillMileId = nodeId;
+        drillGoDeeper('actions');
+        renderDrillView();
+        triggerDerivation(nodeId);
+      } else if (action === 'derive-milestones') {
+        // Navigate into milestones view, then start derivation
+        drillDeclId = nodeId;
+        drillLevel = 'milestones';
+        renderDrillView();
+        triggerDerivation(nodeId);
+      } else if (action === 'discuss') {
+        // Optional discuss phase before derivation
+        startDiscuss(nodeId);
       }
     });
   });
@@ -1877,6 +2697,8 @@ function wireEntityMenus($container) {
 
 /** Currently active refine node */
 let refineActiveNodeId = null;
+/** @type {Set<string>} Active refine node IDs for concurrent support */
+const refineActiveNodes = new Set();
 
 /**
  * Start a refine session for a node.
@@ -1938,18 +2760,166 @@ function createRefineArea(nodeId) {
   // Fallback: append to detail panel
   const det = document.getElementById(`refine-area-${nodeId}`);
   if (det) return det;
+  // Last resort: attach to drill-detail or drill-list so output is always visible
+  const fallbackParent = document.getElementById('drill-detail') || document.getElementById('drill-list');
+  if (fallbackParent) {
+    const area = document.createElement('div');
+    area.className = 'refine-container';
+    area.id = `refine-area-${nodeId}`;
+    fallbackParent.appendChild(area);
+    return area;
+  }
   return document.createElement('div'); // noop
 }
 
+/**
+ * Trigger the appropriate derivation after discuss phase completes.
+ * @param {string} nodeId
+ */
+function triggerDerivation(nodeId) {
+  const prefix = nodeId.split('-')[0];
+  if (prefix === 'D') {
+    // Immediate visual feedback via pendingDerivations
+    pendingDerivations.add(nodeId);
+    derivationSessionId = 'pending';
+    derivationStartTime = Date.now();
+    derivationProposals = null;
+    renderDrillView();
+    // Derive milestones — capture real sessionId for SSE handler
+    fetch('/api/milestones/derive', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ declarationId: nodeId }),
+    }).then(r => r.json()).then(data => {
+      pendingDerivations.delete(nodeId);
+      if (data.error) {
+        console.error('Plan milestones error:', data.error);
+        derivationSessionId = null;
+        derivationStartTime = null;
+      } else if (data.sessionId) {
+        derivationSessionId = data.sessionId;
+      }
+      renderDrillView();
+    }).catch(() => {
+      pendingDerivations.delete(nodeId);
+      derivationSessionId = null;
+      derivationStartTime = null;
+      renderDrillView();
+    });
+  } else if (prefix === 'M') {
+    // Immediate visual feedback via pendingDerivations
+    pendingDerivations.add(nodeId);
+    actionDerivationSessionId = 'pending';
+    actionDerivationMilestoneId = nodeId;
+    actionDerivationProposals = null;
+    renderDrillView();
+    // Derive actions — capture real sessionId for SSE handler
+    fetch('/api/milestones/' + encodeURIComponent(nodeId) + '/actions/derive', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+    }).then(r => r.json()).then(data => {
+      pendingDerivations.delete(nodeId);
+      if (data.error) {
+        console.error('Plan actions error:', data.error);
+        actionDerivationSessionId = null;
+        actionDerivationMilestoneId = null;
+      } else if (data.sessionId) {
+        actionDerivationSessionId = data.sessionId;
+      }
+      renderDrillView();
+    }).catch(() => {
+      pendingDerivations.delete(nodeId);
+      actionDerivationSessionId = null;
+      actionDerivationMilestoneId = null;
+      renderDrillView();
+    });
+  }
+}
+
+/** @type {string|null} Node ID with an active discuss session */
+let discussActiveNodeId = null;
+/** @type {HTMLElement|null} Detached discuss container preserved across re-renders */
+let discussActiveContainer = null;
+
+/**
+ * Start a discuss (interview) phase for a node.
+ * Shows a discuss area and kicks off the discuss agent.
+ * @param {string} nodeId
+ */
+function startDiscuss(nodeId) {
+  discussActiveNodeId = nodeId;
+
+  // Create the discuss container
+  const container = document.createElement('div');
+  container.className = 'discuss-container';
+  container.id = `discuss-area-${nodeId}`;
+  discussActiveContainer = container;
+
+  // Attach to current card
+  reattachDiscussContainer();
+
+  container.innerHTML = `<div class="discuss-loading">
+    <pre class="discuss-streaming" id="discuss-output-${nodeId}">Thinking...</pre>
+    <button class="drill-action-btn" id="discuss-skip-early-${nodeId}">Skip</button>
+  </div>`;
+  container.querySelector(`#discuss-skip-early-${nodeId}`).addEventListener('click', () => {
+    clearDiscussState();
+    triggerDerivation(nodeId);
+  });
+
+  fetch(`/api/node/${encodeURIComponent(nodeId)}/discuss`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+  }).then(r => r.json()).then(data => {
+    if (data.error) {
+      clearDiscussState();
+      triggerDerivation(nodeId);
+    }
+  }).catch(() => {
+    clearDiscussState();
+    triggerDerivation(nodeId);
+  });
+}
+
+/** Clear discuss tracking state */
+function clearDiscussState() {
+  if (discussActiveContainer && discussActiveContainer.parentNode) {
+    discussActiveContainer.parentNode.removeChild(discussActiveContainer);
+  }
+  discussActiveNodeId = null;
+  discussActiveContainer = null;
+}
+
+/** Re-attach the discuss container to the card after a re-render */
+function reattachDiscussContainer() {
+  if (!discussActiveNodeId || !discussActiveContainer) return;
+  // Remove from old parent if still attached
+  if (discussActiveContainer.parentNode) {
+    discussActiveContainer.parentNode.removeChild(discussActiveContainer);
+  }
+  // Find the card for this node
+  const card = document.querySelector(`.drill-card[data-node-id="${discussActiveNodeId}"]`)
+    || document.querySelector(`.drill-action-btn[data-node-id="${discussActiveNodeId}"]`)?.closest('.drill-card');
+  if (card) {
+    card.appendChild(discussActiveContainer);
+  } else {
+    // Fallback: append to drill-list
+    const parent = document.getElementById('drill-list');
+    if (parent) parent.appendChild(discussActiveContainer);
+  }
+}
+
 async function doRefine(nodeId, mode, message) {
   refineActiveNodeId = nodeId;
+  refineActiveNodes.add(nodeId);
   const area = document.getElementById(`refine-area-${nodeId}`) || createRefineArea(nodeId);
   area.innerHTML = `<div class="refine-area"><div class="refine-streaming">Thinking...</div>
     <div class="refine-actions"><button class="refine-discard" id="refine-cancel-${nodeId}">Cancel</button></div></div>`;
   area.querySelector(`#refine-cancel-${nodeId}`).addEventListener('click', async () => {
     try { await fetch('/api/refine/stop', { method: 'POST' }); } catch (_) {}
     area.innerHTML = '';
-    refineActiveNodeId = null;
+    refineActiveNodes.delete(nodeId);
+    if (refineActiveNodeId === nodeId) refineActiveNodeId = null;
   });
 
   try {
@@ -1961,12 +2931,14 @@ async function doRefine(nodeId, mode, message) {
     if (!resp.ok) {
       const err = await resp.json();
       area.innerHTML = `<div class="refine-area" style="border-color:var(--broken-color)">${escHtml(err.error || 'Failed')}</div>`;
-      refineActiveNodeId = null;
+      refineActiveNodes.delete(nodeId);
+      if (refineActiveNodeId === nodeId) refineActiveNodeId = null;
     }
     // Output will stream via SSE
   } catch (err) {
     area.innerHTML = `<div class="refine-area" style="border-color:var(--broken-color)">${escHtml(err.message)}</div>`;
-    refineActiveNodeId = null;
+    refineActiveNodes.delete(nodeId);
+    if (refineActiveNodeId === nodeId) refineActiveNodeId = null;
   }
 }
 
@@ -2015,6 +2987,45 @@ function updateLocalReviewState(nodeId, newState) {
   if (node) node.reviewState = newState;
 }
 
+/**
+ * Approve all visible entities of a given type (or all types at current drill level).
+ * Sends parallel PUT requests and updates local state for instant feedback.
+ */
+async function approveAllVisible() {
+  if (!graphData) return;
+  let nodes;
+  if (drillLevel === 'declarations') {
+    nodes = (graphData.declarations || []).filter(n => n.reviewState !== 'approved');
+  } else if (drillLevel === 'milestones') {
+    const filtered = (graphData.milestones || []).filter(m =>
+      (m.realizes || []).includes(drillDeclId)
+    );
+    nodes = filtered.filter(n => n.reviewState !== 'approved');
+  } else if (drillLevel === 'actions') {
+    const filtered = (graphData.actions || []).filter(a =>
+      (a.causes || []).includes(drillMileId)
+    );
+    nodes = filtered.filter(n => n.reviewState !== 'approved');
+  } else {
+    return;
+  }
+  if (nodes.length === 0) return;
+
+  // Fire all approve requests in parallel
+  const promises = nodes.map(n =>
+    fetch(`/api/node/${encodeURIComponent(n.id)}/review-state`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ reviewState: 'approved' }),
+    }).then(resp => {
+      if (resp.ok) updateLocalReviewState(n.id, 'approved');
+    }).catch(err => console.error(`Failed to approve ${n.id}:`, err))
+  );
+  await Promise.all(promises);
+  renderDrillView();
+  loadActivity();
+}
+
 // ─── Column browser keyboard navigation ──────────────────────────────────────
 
 // Inject kb-focus CSS rule
@@ -2096,6 +3107,8 @@ function clearColumnBrowserKbFocus() {
  */
 function handleColumnKeydown(e) {
   if (!isColumnBrowserActive()) return;
+  // Don't intercept keys when user is typing in an input/textarea
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
 
   const key = e.key;
 
@@ -2152,6 +3165,21 @@ function getFocusedCard() {
 document.addEventListener('keydown', (e) => {
   if (viewMode !== 'columns') return;
   if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+  // Ctrl+Shift+A = Approve All visible entities (Ctrl on all platforms, not Cmd)
+  if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'a') {
+    e.preventDefault();
+    approveAllVisible();
+    return;
+  }
+
+  // Ctrl+Shift+P = Global Plan (top-right button)
+  if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'p') {
+    e.preventDefault();
+    if ($executeMainBtn && !$executeMainBtn.disabled) $executeMainBtn.click();
+    return;
+  }
+
   if (e.metaKey || e.ctrlKey || e.altKey) return;
 
   const key = e.key;
@@ -2197,16 +3225,42 @@ document.addEventListener('keydown', (e) => {
     return;
   }
 
-  // P = Plan milestones (empty state or main Plan button)
+  // P = Plan / Derive — trigger planning on focused/current card
   if (kl === 'p') {
+    // 1. Empty-state Plan buttons (inside a view with no children)
     const planBtn = document.getElementById('plan-milestones-btn');
-    if (planBtn) { e.preventDefault(); planBtn.click(); return; }
-    if ($executeMainBtn && $executeMainBtn._planMode) { e.preventDefault(); $executeMainBtn.click(); return; }
+    if (planBtn && !planBtn.disabled) { e.preventDefault(); planBtn.click(); return; }
+    const actionDeriveBtn = document.getElementById('action-derive-btn');
+    if (actionDeriveBtn && !actionDeriveBtn.disabled) { e.preventDefault(); actionDeriveBtn.click(); return; }
+    // 2. Focused or current-review card with derive button
+    const card = getFocusedCard();
+    if (card) {
+      const deriveBtn = card.querySelector('[data-action="derive-actions"], [data-action="derive-milestones"]');
+      if (deriveBtn) {
+        e.preventDefault();
+        const nodeId = deriveBtn.dataset.nodeId;
+        if (nodeId) triggerDerivation(nodeId);
+        return;
+      }
+    }
+    // 3. Fallback: any visible derive button
+    const anyDeriveBtn = document.querySelector('[data-action="derive-actions"], [data-action="derive-milestones"]');
+    if (anyDeriveBtn) {
+      e.preventDefault();
+      const nodeId = anyDeriveBtn.dataset.nodeId;
+      if (nodeId) triggerDerivation(nodeId);
+      return;
+    }
     return;
   }
 
-  // E = Execute (main button when in execute mode)
+  // E = Edit (click first Edit button on a card) or Execute (main button)
   if (kl === 'e') {
+    // First try Edit on a card
+    const editBtn = document.querySelector('.drill-card.current-review .drill-action-btn[data-mode="write"]')
+      || document.querySelector('.drill-card .drill-action-btn[data-mode="write"]');
+    if (editBtn) { e.preventDefault(); editBtn.click(); return; }
+    // Fallback: Execute main button
     if ($executeMainBtn && !$executeMainBtn._nextTarget && !$executeMainBtn._planMode && !$executeMainBtn.disabled) {
       e.preventDefault(); $executeMainBtn.click(); return;
     }
@@ -2221,13 +3275,13 @@ document.addEventListener('keydown', (e) => {
     return;
   }
 
-  // Shift+R/W/D/A = act on detail panel entity
-  if (e.shiftKey && (kl === 'r' || kl === 'w' || kl === 'd' || kl === 'a')) {
+  // Shift+R/E/W/D/A = act on detail panel entity
+  if (e.shiftKey && (kl === 'r' || kl === 'e' || kl === 'w' || kl === 'd' || kl === 'a')) {
     const detail = document.getElementById('drill-detail');
     if (!detail) return;
     let btn;
     if (kl === 'r') btn = detail.querySelector('.drill-action-btn[data-mode="outdated"]');
-    else if (kl === 'w') btn = detail.querySelector('.drill-action-btn[data-mode="write"]');
+    else if (kl === 'e' || kl === 'w') btn = detail.querySelector('.drill-action-btn[data-mode="write"]');
     else if (kl === 'd') btn = detail.querySelector('.drill-action-btn[data-action="delete"]');
     else if (kl === 'a') btn = detail.querySelector('.drill-review-btn[data-review-action="approved"]');
     if (btn) { e.preventDefault(); btn.click(); }
@@ -2261,12 +3315,18 @@ document.addEventListener('keydown', (e) => {
     return;
   }
 
-  // A = Approve focused card
+  // A = Approve focused card (fall back to detail panel approve button)
   if (kl === 'a') {
     const card = getFocusedCard();
-    if (!card) return;
-    const btn = card.querySelector('.drill-review-btn[data-review-action="approved"]');
-    if (btn) { e.preventDefault(); btn.click(); }
+    if (card) {
+      const btn = card.querySelector('.drill-review-btn[data-review-action="approved"]');
+      if (btn) { e.preventDefault(); btn.click(); return; }
+    }
+    const detail = document.getElementById('drill-detail');
+    if (detail) {
+      const btn = detail.querySelector('.drill-review-btn[data-review-action="approved"]');
+      if (btn) { e.preventDefault(); btn.click(); }
+    }
     return;
   }
 });
@@ -2294,10 +3354,10 @@ document.addEventListener('click', async (e) => {
       console.error('Failed to update review state:', err);
       return;
     }
-    // SSE will trigger a refresh, but also update immediately for responsiveness
-    badge.className = `review-badge review-${nextState}`;
-    badge.dataset.reviewState = nextState;
-    badge.textContent = REVIEW_DISPLAY[nextState] || nextState;
+    // Update local data + re-render for instant feedback (don't rely solely on SSE)
+    updateLocalReviewState(nodeId, nextState);
+    renderDrillView();
+    loadActivity();
   } catch (err) {
     console.error('Failed to update review state:', err);
   }
@@ -3557,7 +4617,7 @@ function renderPanelChain(item, type) {
 
         // Derivation panel — derive milestones for this declaration
         html += `<div class="derivation-panel" id="derivation-panel">`;
-        html += `<button class="derive-btn" id="derive-btn">Derive Milestones</button>`;
+        html += `<button class="derive-btn" id="derive-btn">Plan Milestones</button>`;
         html += `<div id="derivation-log" class="output-log" style="display:none"></div>`;
         html += `<div id="derivation-proposals" style="display:none"></div>`;
         html += `</div>`;
@@ -3650,7 +4710,7 @@ function renderPanelChain(item, type) {
       if (s.type === 'milestone') {
         // Action derivation panel — derive actions for this milestone
         html += `<div class="derivation-panel" id="action-derivation-panel">`;
-        html += `<button class="derive-btn" id="action-derive-btn">Derive Actions</button>`;
+        html += `<button class="derive-btn" id="action-derive-btn">Plan Actions</button>`;
         html += `<div id="action-derivation-log" class="output-log" style="display:none"></div>`;
         html += `<div id="action-derivation-proposals" style="display:none"></div>`;
         html += `</div>`;
@@ -3667,8 +4727,8 @@ function renderPanelChain(item, type) {
 
       if (s.type === 'action') {
         // Exec-plan placeholder — filled asynchronously after render
-        html += `<div id="exec-plan-detail" style="margin-top:16px">
-          <div class="detail-label" style="opacity:0.4">Loading exec-plan…</div>
+        html += `<div id="plan-detail" style="margin-top:16px">
+          <div class="detail-label" style="opacity:0.4">Loading plan…</div>
         </div>`;
       }
     }
@@ -3814,7 +4874,7 @@ function renderPanelChain(item, type) {
     }
   }
 
-  // If an action is focused, fetch and render its exec-plan
+  // If an action is focused, fetch and render its plan
   if (focusSection && focusSection.type === 'action') {
     loadExecPlan(focusSection.item.id);
   }
@@ -4088,7 +5148,7 @@ async function renderWorkabilityPath(nodeId, nodeType) {
 
     html += `</div>`;
 
-    const execPlanEl = $panelBody.querySelector('#exec-plan-detail');
+    const execPlanEl = $panelBody.querySelector('#plan-detail');
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
     const wpEl = tempDiv.firstElementChild;
@@ -4156,11 +5216,11 @@ function extractProducedFiles(summaryContent) {
 }
 
 /**
- * Fetch /api/action/:id and render the exec-plan into #exec-plan-detail.
+ * Fetch /api/action/:id and render the plan into #plan-detail.
  * @param {string} actionId
  */
 async function loadExecPlan(actionId) {
-  const container = document.getElementById('exec-plan-detail');
+  const container = document.getElementById('plan-detail');
   if (!container) return;
 
   try {
@@ -4168,7 +5228,7 @@ async function loadExecPlan(actionId) {
     const data = await res.json();
 
     if (data.error || !data.execPlan) {
-      container.innerHTML = `<div class="detail-label" style="opacity:0.4">No exec-plan found</div>`;
+      container.innerHTML = `<div class="detail-label" style="opacity:0.4">No plan found</div>`;
       return;
     }
 
@@ -4325,7 +5385,7 @@ async function loadExecPlan(actionId) {
     // Output log panel (hidden by default, shown when executing)
     html += `<div id="output-log" class="output-log" style="display:none"></div>`;
 
-    container.innerHTML = html || `<div class="detail-label" style="opacity:0.4">No exec-plan details</div>`;
+    container.innerHTML = html || `<div class="detail-label" style="opacity:0.4">No plan details</div>`;
 
     // Wire button click handlers
     const execBtn = document.getElementById('exec-action-btn');
@@ -4364,7 +5424,7 @@ async function loadExecPlan(actionId) {
     }
 
   } catch (e) {
-    if (container) container.innerHTML = `<div class="detail-label" style="opacity:0.4">Could not load exec-plan</div>`;
+    if (container) container.innerHTML = `<div class="detail-label" style="opacity:0.4">Could not load plan</div>`;
   }
 }
 
@@ -4910,6 +5970,85 @@ function handlePlayComplete(e) {
 
 // ─── Derivation controls ──────────────────────────────────────────────────────
 
+/** @type {number|null} Server-reported start time for active derivation (epoch ms) */
+let derivationStartTime = null;
+/** @type {number|null} Interval ID for derivation progress animation */
+let derivationProgressTimer = null;
+
+/** Format seconds as m:ss (e.g. 119 → "1:59") */
+function fmtElapsed(sec) {
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? m + ':' + String(s).padStart(2, '0') : s + 's';
+}
+
+const DERIVATION_PHASES = [
+  { at: 0,  icon: '\u2699', text: 'Spawning AI agent\u2026' },
+  { at: 3,  icon: '\uD83D\uDD0D', text: 'Analyzing declaration statement\u2026' },
+  { at: 7,  icon: '\uD83E\uDDE0', text: 'Reasoning about what must be true\u2026' },
+  { at: 12, icon: '\uD83C\uDFAF', text: 'Identifying key milestones\u2026' },
+  { at: 18, icon: '\u2696\uFE0F', text: 'Evaluating milestone boundaries\u2026' },
+  { at: 25, icon: '\uD83D\uDCDD', text: 'Drafting milestone proposals\u2026' },
+  { at: 35, icon: '\u2728', text: 'Refining and validating output\u2026' },
+  { at: 50, icon: '\u23F3', text: 'Almost there\u2026' },
+  { at: 75, icon: '\uD83D\uDD04', text: 'Still working\u2026 complex declaration' },
+];
+
+/**
+ * Show animated progress phases in the derivation progress area.
+ * @param {number} startTime - Epoch ms when derivation started
+ */
+function showDerivationProgress(startTime) {
+  if (derivationProgressTimer) clearInterval(derivationProgressTimer);
+
+  const el = document.getElementById('derivation-progress');
+  if (!el) return;
+  el.style.display = '';
+
+  let lastPhaseAt = -1;
+  function update() {
+    if (!document.contains(el)) { clearInterval(derivationProgressTimer); return; }
+    const elapsed = Math.floor((Date.now() - startTime) / 1000);
+    let phase = DERIVATION_PHASES[0];
+    for (const p of DERIVATION_PHASES) {
+      if (elapsed >= p.at) phase = p;
+    }
+    // Only update DOM when phase changes to avoid re-triggering animation
+    if (phase.at !== lastPhaseAt) {
+      lastPhaseAt = phase.at;
+      el.innerHTML = `<div class="derive-phase">
+        <span class="derive-phase-icon">${phase.icon}</span>
+        <span class="derive-phase-text">${phase.text}</span>
+      </div>`;
+    }
+  }
+
+  update();
+  derivationProgressTimer = setInterval(update, 1000);
+}
+
+/** Stop the derivation progress animation. */
+function stopDerivationProgress() {
+  if (derivationProgressTimer) { clearInterval(derivationProgressTimer); derivationProgressTimer = null; }
+  const el = document.getElementById('derivation-progress');
+  if (el) el.style.display = 'none';
+}
+
+/**
+ * Restore running derivation state after page refresh.
+ * Checks /api/derivation/running and restores derivationSessionId so SSE events reconnect.
+ */
+async function restoreRunningDerivations() {
+  try {
+    const data = await fetchJson('/api/derivation/running');
+    if (data && data.sessions && data.sessions.length > 0) {
+      const first = data.sessions[0];
+      derivationSessionId = first.sessionId;
+      derivationStartTime = first.startTime || null;
+    }
+  } catch (_) {}
+}
+
 /**
  * Trigger milestone derivation for a declaration via POST /api/milestones/derive.
  * @param {string} declarationId
@@ -4918,7 +6057,7 @@ async function startDerivation(declarationId) {
   const btn = document.getElementById('derive-btn') || document.getElementById('plan-milestones-btn');
   if (btn) {
     btn.disabled = true;
-    btn.textContent = 'Deriving...';
+    btn.textContent = 'Planning...';
   }
 
   const logEl = document.getElementById('derivation-log');
@@ -4936,7 +6075,7 @@ async function startDerivation(declarationId) {
 
     if (!res.ok) {
       if (logEl) { logEl.style.display = ''; logEl.textContent = 'Error: ' + (data.error || 'Failed to start derivation'); }
-      if (btn) { btn.disabled = false; btn.textContent = btn.id === 'plan-milestones-btn' ? 'Plan Milestones' : 'Derive Milestones'; }
+      if (btn) { btn.disabled = false; btn.textContent = btn.id === 'plan-milestones-btn' ? 'Plan Milestones' : 'Plan Milestones'; }
       return;
     }
 
@@ -4944,42 +6083,114 @@ async function startDerivation(declarationId) {
     derivationProposals = null;
   } catch (err) {
     if (logEl) { logEl.style.display = ''; logEl.textContent = 'Error: ' + err.message; }
-    if (btn) { btn.disabled = false; btn.textContent = btn.id === 'plan-milestones-btn' ? 'Plan Milestones' : 'Derive Milestones'; }
+    if (btn) { btn.disabled = false; btn.textContent = btn.id === 'plan-milestones-btn' ? 'Plan Milestones' : 'Plan Milestones'; }
   }
 }
 
 /**
  * Handle incoming derivation-output SSE event.
+ * Supports both single-session (detail panel) and concurrent (card-level) derivations.
  * @param {MessageEvent} e
  */
 function handleDerivationOutput(e) {
   try {
-    const { sessionId, text } = JSON.parse(e.data);
-    if (sessionId !== derivationSessionId) return;
-    const logEl = document.getElementById('derivation-log');
-    if (!logEl) return;
-    if (logEl.style.display === 'none') logEl.style.display = '';
-    logEl.appendChild(document.createTextNode(text + '\n'));
-    logEl.scrollTop = logEl.scrollHeight;
+    const { sessionId, declarationId, text, stream } = JSON.parse(e.data);
+
+    // Concurrent derive-all mode: update activeDeriveMap
+    if (declarationId && activeDeriveMap.has(declarationId)) {
+      // Card-level derivation — no log panel needed
+      return;
+    }
+
+    // Single-session mode: stream to progress area
+    // Accept if pending (optimistic) or matching session
+    if (derivationSessionId === 'pending') derivationSessionId = sessionId;
+    if (derivationSessionId && sessionId !== derivationSessionId) return;
+    if (!derivationSessionId) derivationSessionId = sessionId;
+
+    // Update progress display with real streaming content
+    const progressEl = document.getElementById('derivation-progress');
+    if (progressEl && stream !== 'stderr') {
+      progressEl.style.display = '';
+      // Stop synthetic phases — we have real output now
+      if (derivationProgressTimer) { clearInterval(derivationProgressTimer); derivationProgressTimer = null; }
+
+      if (stream === 'status') {
+        // Status messages (e.g. "Thinking...")
+        progressEl.innerHTML = `<div class="derive-phase">
+          <span class="derive-phase-icon">\u2699</span>
+          <span class="derive-phase-text">${text}</span>
+        </div>`;
+      } else {
+        // Streaming text — show accumulating output
+        if (!progressEl._streamEl) {
+          progressEl.innerHTML = `<div class="derive-phase">
+            <span class="derive-phase-icon">\uD83D\uDCDD</span>
+            <span class="derive-phase-text">Writing milestones\u2026</span>
+          </div>
+          <pre class="derive-stream-output"></pre>`;
+          progressEl._streamEl = progressEl.querySelector('.derive-stream-output');
+        }
+        if (progressEl._streamEl) {
+          progressEl._streamEl.textContent += text;
+          progressEl._streamEl.scrollTop = progressEl._streamEl.scrollHeight;
+        }
+      }
+    }
   } catch (_) {}
 }
 
 /**
  * Handle incoming derivation-complete SSE event.
+ * Supports both single-session (detail panel) and concurrent (card-level) derivations.
  * @param {MessageEvent} e
  */
 function handleDerivationComplete(e) {
   try {
-    const { sessionId, exitCode, milestones } = JSON.parse(e.data);
-    if (sessionId !== derivationSessionId) return;
+    const { sessionId, declarationId, exitCode, milestones } = JSON.parse(e.data);
+
+    // Concurrent derive-all mode: auto-accept milestones
+    if (declarationId && activeDeriveMap.has(declarationId)) {
+      activeDeriveMap.delete(declarationId);
+
+      if (exitCode === 0 && milestones && Array.isArray(milestones)) {
+        // Auto-accept only if declaration doesn't already have milestones
+        const existingMilestones = graphData ? (graphData.milestones || []).filter(m => {
+          const realizes = Array.isArray(m.realizes) ? m.realizes : [m.realizes];
+          return realizes.includes(declarationId);
+        }) : [];
+        if (existingMilestones.length === 0) {
+          const toAccept = milestones.map(m => ({
+            title: m.title || '',
+            description: m.description || m.reason || '',
+            realizes: m.realizes || declarationId || '',
+          }));
+          fetch('/api/milestones/derive/accept', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ milestones: toAccept }),
+          }).catch(() => {});
+        }
+      }
+
+      // Re-render to update card state
+      renderDrillView();
+      return;
+    }
+
+    // Single-session mode
+    if (derivationSessionId === 'pending') derivationSessionId = sessionId;
+    if (derivationSessionId && sessionId !== derivationSessionId) return;
 
     derivationSessionId = null;
+    derivationStartTime = null;
+    stopDerivationProgress();
 
     const btn = document.getElementById('derive-btn') || document.getElementById('plan-milestones-btn');
     if (btn) {
       if (btn._deriveTimer) { clearInterval(btn._deriveTimer); btn._deriveTimer = null; }
       btn.disabled = false;
-      btn.innerHTML = btn.id === 'plan-milestones-btn' ? '<kbd>P</kbd> Plan Milestones' : 'Derive Milestones';
+      btn.innerHTML = btn.id === 'plan-milestones-btn' ? '<kbd>P</kbd> Plan Milestones' : 'Plan Milestones';
     }
 
     if (exitCode !== 0) {
@@ -4989,22 +6200,39 @@ function handleDerivationComplete(e) {
         const span = document.createElement('span');
         span.style.color = 'var(--broken-color)';
         span.style.fontWeight = '700';
-        span.textContent = '\nDerivation failed (exit code ' + exitCode + ')';
+        span.textContent = '\nPlanning failed (exit code ' + exitCode + ')';
         logEl.appendChild(span);
       }
       return;
     }
 
     if (milestones && Array.isArray(milestones)) {
-      derivationProposals = milestones;
-      renderProposals();
+      // Auto-accept milestones into the DAG — but only if this declaration doesn't already have milestones
+      const declId = declarationId || drillDeclId || '';
+      const existingMilestones = graphData ? (graphData.milestones || []).filter(m => {
+        const realizes = Array.isArray(m.realizes) ? m.realizes : [m.realizes];
+        return realizes.includes(declId);
+      }) : [];
+      if (existingMilestones.length === 0) {
+        const toAccept = milestones.map(m => ({
+          title: m.title || '',
+          description: m.description || m.reason || '',
+          realizes: m.realizes || declId || '',
+        }));
+        fetch('/api/milestones/derive/accept', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ milestones: toAccept }),
+        }).catch(() => {});
+      }
+      // SSE change event will trigger graph reload with the new milestones as DRAFT cards
     } else {
       const logEl = document.getElementById('derivation-log');
       if (logEl) {
         const span = document.createElement('span');
         span.style.color = 'var(--integrity-partial)';
         span.style.fontWeight = '600';
-        span.textContent = '\nDerivation finished but output could not be parsed. Check the log above.';
+        span.textContent = '\nPlanning finished but output could not be parsed. Check the log above.';
         logEl.appendChild(span);
       }
     }
@@ -5012,93 +6240,15 @@ function handleDerivationComplete(e) {
 }
 
 /**
- * Render proposed milestones as an editable checklist.
+ * Legacy renderProposals — no longer needed since milestones are auto-accepted.
+ * Kept as no-op for any remaining references.
  */
-function renderProposals() {
-  const container = document.getElementById('derivation-proposals');
-  if (!container || !derivationProposals) return;
-  container.style.display = 'block';
-
-  let html = '<h4 style="margin:8px 0;color:var(--text-bright);font-size:13px">Proposed Milestones</h4>';
-  html += '<ul class="derivation-checklist">';
-  derivationProposals.forEach((m, idx) => {
-    html += '<li>';
-    html += '<input type="checkbox" checked data-idx="' + idx + '">';
-    html += '<input type="text" value="' + escHtml(m.title || '') + '" data-idx="' + idx + '">';
-    html += '</li>';
-    if (m.reason) {
-      html += '<li style="border-bottom:none;padding:0"><span class="reason">' + escHtml(m.reason) + '</span></li>';
-    }
-  });
-  html += '</ul>';
-  html += '<div style="margin-top:12px">';
-  html += '<button class="derive-accept-btn" onclick="acceptDerivation()">Accept Selected</button>';
-  html += '<button class="derive-cancel-btn" onclick="cancelDerivation()">Cancel</button>';
-  html += '</div>';
-
-  container.innerHTML = html;
-}
+function renderProposals() {}
 
 /**
- * Accept selected milestones from the derivation checklist.
- * Gathers checked items, POSTs to /api/milestones/derive/accept.
+ * Accept derivation — legacy no-op, milestones are now auto-accepted on completion.
  */
-async function acceptDerivation() {
-  const container = document.getElementById('derivation-proposals');
-  if (!container || !derivationProposals) return;
-
-  const checkboxes = container.querySelectorAll('input[type="checkbox"]');
-  const textInputs = container.querySelectorAll('input[type="text"]');
-
-  /** @type {Array<{title: string, realizes: string}>} */
-  const selected = [];
-  checkboxes.forEach((cb) => {
-    if (cb.checked) {
-      const idx = parseInt(cb.dataset.idx, 10);
-      const titleInput = textInputs[idx];
-      const proposal = derivationProposals[idx];
-      if (proposal && titleInput) {
-        selected.push({
-          title: titleInput.value || proposal.title,
-          realizes: proposal.realizes || '',
-        });
-      }
-    }
-  });
-
-  if (selected.length === 0) {
-    cancelDerivation();
-    return;
-  }
-
-  try {
-    const res = await fetch('/api/milestones/derive/accept', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ milestones: selected }),
-    });
-    const data = await res.json();
-
-    if (!res.ok) {
-      const logEl = document.getElementById('derivation-log');
-      if (logEl) logEl.textContent += '\nError accepting: ' + (data.error || 'Unknown error');
-      return;
-    }
-
-    // Clear derivation panel and show success
-    derivationProposals = null;
-    const panel = document.getElementById('derivation-panel');
-    if (panel) {
-      panel.innerHTML = '<div style="color:var(--act-color);font-weight:600;padding:8px 0">' +
-        selected.length + ' milestone' + (selected.length !== 1 ? 's' : '') + ' created</div>';
-      setTimeout(() => { if (panel) panel.innerHTML = ''; }, 3000);
-    }
-    // SSE change event will trigger graph reload automatically
-  } catch (err) {
-    const logEl = document.getElementById('derivation-log');
-    if (logEl) logEl.textContent += '\nError: ' + err.message;
-  }
-}
+async function acceptDerivation() {}
 
 /**
  * Cancel derivation — stop if running, clear proposals and panel.
@@ -5112,15 +6262,29 @@ async function cancelDerivation() {
 
   derivationSessionId = null;
   derivationProposals = null;
+  renderDrillView();
+}
 
-  const logEl = document.getElementById('derivation-log');
-  if (logEl) { logEl.style.display = 'none'; logEl.innerHTML = ''; }
+/**
+ * Trigger concurrent derivation for all declarations without milestones.
+ * Calls POST /api/declarations/derive-all and populates activeDeriveMap.
+ */
+async function triggerDeriveAll() {
+  try {
+    const res = await fetch('/api/declarations/derive-all', { method: 'POST' });
+    const data = await res.json();
+    if (!res.ok || !data.ok) return;
 
-  const proposals = document.getElementById('derivation-proposals');
-  if (proposals) { proposals.style.display = 'none'; proposals.innerHTML = ''; }
+    // Populate activeDeriveMap from response
+    for (const s of (data.sessions || [])) {
+      activeDeriveMap.set(s.declarationId, { sessionId: s.sessionId, status: 'running' });
+    }
 
-  const btn = document.getElementById('derive-btn');
-  if (btn) { btn.disabled = false; btn.textContent = 'Derive Milestones'; }
+    // Re-render to show spinners on cards
+    renderDrillView();
+  } catch (err) {
+    console.error('derive-all failed:', err);
+  }
 }
 
 /**
@@ -5194,7 +6358,7 @@ async function saveDependencies(milestoneId, dependsOn) {
 
 async function startActionDerivation(milestoneId) {
   const btn = document.getElementById('action-derive-btn');
-  if (btn) { btn.disabled = true; btn.textContent = 'Deriving...'; }
+  if (btn) { btn.disabled = true; btn.textContent = 'Planning...'; }
   const logEl = document.getElementById('action-derivation-log');
   if (logEl) { logEl.style.display = ''; logEl.innerHTML = ''; }
   try {
@@ -5204,7 +6368,7 @@ async function startActionDerivation(milestoneId) {
     const data = await res.json();
     if (!res.ok) {
       if (logEl) logEl.textContent = 'Error: ' + (data.error || 'Failed to start action derivation');
-      if (btn) { btn.disabled = false; btn.textContent = 'Derive Actions'; }
+      if (btn) { btn.disabled = false; btn.textContent = 'Plan Actions'; }
       return;
     }
     actionDerivationSessionId = data.sessionId;
@@ -5212,14 +6376,17 @@ async function startActionDerivation(milestoneId) {
     actionDerivationProposals = null;
   } catch (err) {
     if (logEl) logEl.textContent = 'Error: ' + err.message;
-    if (btn) { btn.disabled = false; btn.textContent = 'Derive Actions'; }
+    if (btn) { btn.disabled = false; btn.textContent = 'Plan Actions'; }
   }
 }
 
 function handleActionDerivationOutput(e) {
   try {
     const { sessionId, text } = JSON.parse(e.data);
-    if (sessionId !== actionDerivationSessionId) return;
+    // Accept output if session matches OR if we haven't captured the session ID yet
+    if (actionDerivationSessionId && sessionId !== actionDerivationSessionId) return;
+    // Capture session ID from first output event if we missed it
+    if (!actionDerivationSessionId) actionDerivationSessionId = sessionId;
     const logEl = document.getElementById('action-derivation-log');
     if (!logEl) return;
     logEl.appendChild(document.createTextNode(text + '\n'));
@@ -5229,32 +6396,50 @@ function handleActionDerivationOutput(e) {
 
 function handleActionDerivationComplete(e) {
   try {
-    const { sessionId, exitCode, actions } = JSON.parse(e.data);
-    if (sessionId !== actionDerivationSessionId) return;
+    const { sessionId, milestoneId, exitCode, actions } = JSON.parse(e.data);
+    // Accept completion if session matches OR if we haven't captured the session ID yet
+    if (actionDerivationSessionId && sessionId !== actionDerivationSessionId) return;
     actionDerivationSessionId = null;
     const btn = document.getElementById('action-derive-btn');
-    if (btn) { btn.disabled = false; btn.textContent = 'Derive Actions'; }
+    if (btn) { btn.disabled = false; btn.textContent = 'Plan Actions'; }
     if (exitCode !== 0) {
       const logEl = document.getElementById('action-derivation-log');
       if (logEl) {
         const span = document.createElement('span');
         span.style.color = 'var(--broken-color)';
         span.style.fontWeight = '700';
-        span.textContent = '\nAction derivation failed (exit code ' + exitCode + ')';
+        span.textContent = '\nAction planning failed (exit code ' + exitCode + ')';
         logEl.appendChild(span);
       }
       return;
     }
     if (actions && Array.isArray(actions)) {
-      actionDerivationProposals = actions;
-      renderActionProposals();
+      // Auto-accept: persist actions immediately (same as milestones), then re-render as cards
+      const targetMilestoneId = milestoneId || actionDerivationMilestoneId;
+      if (targetMilestoneId) {
+        const acceptPayload = actions.map(a => ({ title: a.title, produces: a.produces || '' }));
+        fetch('/api/milestones/' + encodeURIComponent(targetMilestoneId) + '/actions/derive/accept', {
+          method: 'POST', headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ actions: acceptPayload }),
+        }).then(r => r.json()).then(data => {
+          actionDerivationProposals = null;
+          actionDerivationMilestoneId = null;
+          if (!data.error) {
+            // Reload graph so new actions appear as cards
+            loadData();
+          }
+        }).catch(() => {
+          actionDerivationProposals = null;
+          actionDerivationMilestoneId = null;
+        });
+      }
     } else {
       const logEl = document.getElementById('action-derivation-log');
       if (logEl) {
         const span = document.createElement('span');
         span.style.color = 'var(--integrity-partial)';
         span.style.fontWeight = '600';
-        span.textContent = '\nDerivation finished but output could not be parsed. Check the log above.';
+        span.textContent = '\nPlanning finished but output could not be parsed. Check the log above.';
         logEl.appendChild(span);
       }
     }
@@ -5343,7 +6528,7 @@ async function cancelActionDerivation() {
   const proposals = document.getElementById('action-derivation-proposals');
   if (proposals) { proposals.style.display = 'none'; proposals.innerHTML = ''; }
   const btn = document.getElementById('action-derive-btn');
-  if (btn) { btn.disabled = false; btn.textContent = 'Derive Actions'; }
+  if (btn) { btn.disabled = false; btn.textContent = 'Plan Actions'; }
 }
 
 const $focusHint = document.getElementById('focus-hint');
@@ -6214,11 +7399,43 @@ if ($refreshBtn) $refreshBtn.addEventListener('click', () => { loadData(); });
 // Execute / Next main button
 if ($executeMainBtn) {
   $executeMainBtn.addEventListener('click', () => {
+    // Lifecycle-aware navigation
+    const lca = $executeMainBtn._lifecycleAction;
+    if (lca) {
+      if (lca.action === 'derive-milestones' && lca.targetId) {
+        drillDeclId = lca.targetId;
+        drillLevel = 'milestones';
+        if (viewMode !== 'columns') switchView('columns');
+        else renderDrillView();
+        return;
+      }
+      if (lca.action === 'derive-actions' && lca.targetId && graphData) {
+        const mile = (graphData.milestones || []).find(m => m.id === lca.targetId);
+        if (mile && mile.realizes && mile.realizes.length) drillDeclId = mile.realizes[0];
+        drillMileId = lca.targetId;
+        drillLevel = 'actions';
+        if (viewMode !== 'columns') switchView('columns');
+        else renderDrillView();
+        return;
+      }
+      if (lca.action === 'approve' && lca.targetId && graphData) {
+        // Navigate to the node needing approval
+        const { declarations, milestones, actions: acts } = graphData;
+        const enrichedM = (milestones || []).map(m => ({ ...m, ...deriveMilestoneStatus(m, acts || []) }));
+        const enrichedD = (declarations || []).map(d => ({ ...d, displayStatus: deriveDeclarationStatus(d, enrichedM) }));
+        navigateToItem({ id: lca.targetId, type: lca.targetType || 'declaration' }, enrichedD, enrichedM, acts || []);
+        return;
+      }
+      if (lca.action === 'execute') {
+        if (canEnterExecution()) switchView('execution');
+        return;
+      }
+    }
+
+    // Fallback: original logic
     const target = $executeMainBtn._nextTarget;
     if (target) {
-      // Navigate to first unapproved item
       if (target.action) {
-        // Find which milestone/declaration this action belongs to
         const action = target.action;
         const mileId = (action.causes || [])[0];
         if (mileId && graphData) {
@@ -6242,7 +7459,6 @@ if ($executeMainBtn) {
       if (viewMode !== 'columns') switchView('columns');
       else renderDrillView();
     } else if ($executeMainBtn._planMode) {
-      // Navigate to first unplanned declaration's milestones view
       if (graphData) {
         const { declarations, milestones, actions: acts } = graphData;
         const enrichedM = (milestones || []).map(m => ({ ...m, ...deriveMilestoneStatus(m, acts || []) }));
@@ -6409,6 +7625,273 @@ function fireConfetti() {
   setTimeout(() => { cancelAnimationFrame(frame); canvas.remove(); }, 8000);
 }
 
+// --- Agent activity cards ---
+
+const AGENT_TYPE_ICONS = { executor: '\uD83E\uDD16', planner: '\uD83D\uDCCB', deriver: '\u26A1', researcher: '\uD83D\uDD0D', revision: '\uD83D\uDD04', command: '\u2328\uFE0F', refine: '\uD83D\uDD0D', derivation: '\u26A1', 'action-derivation': '\u26A1', default: '\u2699\uFE0F' };
+const AGENT_TYPE_LABELS = { derivation: 'Planning', 'action-derivation': 'Planning Actions', revision: 'Revision', execution: 'Execution', pipeline: 'Pipeline', refine: 'Refine', discuss: 'Discuss', command: 'Command' };
+
+const AGENT_STATUS_LABELS = { running: 'Running', complete: 'Done', done: 'Done', failed: 'Failed', interrupted: 'Stopped' };
+
+/**
+ * Format elapsed time between two timestamps as a human-readable string.
+ * @param {string|number} startedAt - ISO string or ms timestamp
+ * @param {string|number|null} [completedAt] - ISO string, ms timestamp, or null (for running agents)
+ * @returns {string} e.g. "0:05", "1:23", "1h 05m"
+ */
+function formatElapsed(startedAt, completedAt) {
+  const start = typeof startedAt === 'string' ? new Date(startedAt).getTime() : startedAt;
+  const end = completedAt ? (typeof completedAt === 'string' ? new Date(completedAt).getTime() : completedAt) : Date.now();
+  const diffSec = Math.max(0, Math.floor((end - start) / 1000));
+  if (diffSec >= 3600) {
+    const h = Math.floor(diffSec / 3600);
+    const m = Math.floor((diffSec % 3600) / 60);
+    return `${h}h ${String(m).padStart(2, '0')}m`;
+  }
+  const m = Math.floor(diffSec / 60);
+  const s = diffSec % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+
+/**
+ * Generate a human-readable completion summary for an agent.
+ * @param {object} agent
+ * @returns {string}
+ */
+function getAgentCompletionSummary(agent) {
+  const result = agent.result || {};
+  switch (agent.type) {
+    case 'execution':
+      return 'Executed ' + (result.actionId || agent.target);
+    case 'derivation': {
+      const count = result.milestones ? result.milestones.length : 0;
+      return count > 0 ? 'Planned ' + count + ' milestone' + (count !== 1 ? 's' : '') : 'Planning complete';
+    }
+    case 'action-derivation': {
+      const count = result.actionCount;
+      const mId = result.milestoneId || agent.target;
+      return count != null ? 'Planned ' + count + ' action' + (count !== 1 ? 's' : '') + ' for ' + mId : 'Actions planned for ' + mId;
+    }
+    case 'revision':
+      return 'Revised ' + (result.nodeId || agent.target);
+    case 'pipeline': {
+      const c = result.completed || 0;
+      const f = result.failed || 0;
+      return c + ' completed' + (f > 0 ? ', ' + f + ' failed' : '');
+    }
+    default:
+      return 'Completed';
+  }
+}
+
+/**
+ * Render a single agent activity card as an HTML string.
+ * @param {{ id: string, type: string, target: string, milestoneId?: string, status: string, startedAt: string|number, updatedAt?: string|number, completedAt?: string|number, exitCode?: number, error?: string, result?: any }} agent
+ * @returns {string} HTML string
+ */
+function renderAgentCard(agent) {
+  const icon = AGENT_TYPE_ICONS[agent.type] || AGENT_TYPE_ICONS.default;
+  const statusLabel = AGENT_STATUS_LABELS[agent.status] || agent.status;
+  const elapsed = formatElapsed(agent.startedAt, agent.completedAt || null);
+  const completedAttr = agent.completedAt ? escHtml(String(agent.completedAt)) : '';
+
+  let errorHtml = '';
+  if (agent.error) {
+    const truncated = agent.error.length > 120 ? agent.error.slice(0, 117) + '...' : agent.error;
+    errorHtml = `<div class="agent-card-error" title="${escHtml(agent.error)}">${escHtml(truncated)}</div>`;
+  }
+
+  // Completion summary for done agents
+  let summaryHtml = '';
+  const isDone = agent.status === 'complete' || agent.status === 'done';
+  if (isDone) {
+    const summary = getAgentCompletionSummary(agent);
+    summaryHtml = `<div class="agent-card-summary">${escHtml(summary)}</div>`;
+  }
+
+  // "View Result" button for done agents only (not failed)
+  let viewResultHtml = '';
+  if (isDone) {
+    viewResultHtml = `<button class="agent-card-view-result" data-agent-id="${escHtml(agent.id)}">View Result</button>`;
+  }
+
+  // Timer class: final for completed/failed, ticking for running
+  const timerClass = (isDone || agent.status === 'failed') ? 'agent-card-timer agent-timer-final' : 'agent-card-timer';
+
+  return `<div class="agent-card status-${escHtml(agent.status)}" data-agent-id="${escHtml(agent.id)}" data-target="${escHtml(agent.target || '')}" style="cursor:pointer">
+  <div class="agent-card-header">
+    <span class="agent-card-icon">${icon}</span>
+    <span class="agent-card-target">${escHtml(agent.target || '')}</span>
+    <span class="agent-card-badge badge-${escHtml(agent.status)}">${escHtml(statusLabel)}</span>
+  </div>
+  <div class="agent-card-meta">
+    <span class="agent-card-type">${escHtml(AGENT_TYPE_LABELS[agent.type] || agent.type || '')}</span>
+    <span class="${timerClass}" data-started="${escHtml(String(agent.startedAt))}" data-completed="${completedAttr}">${elapsed}</span>
+  </div>
+  ${errorHtml}
+  ${summaryHtml}
+  ${viewResultHtml}
+</div>`;
+}
+
+let cardTimerInterval = null;
+
+/** Start the 1-second interval that updates elapsed timers on running agent cards. */
+function startCardTimers() {
+  if (cardTimerInterval) return;
+  cardTimerInterval = setInterval(() => {
+    const timers = document.querySelectorAll('.agent-card.status-running .agent-card-timer');
+    timers.forEach(el => {
+      const started = el.getAttribute('data-started');
+      if (started) el.textContent = formatElapsed(started, null);
+    });
+  }, 1000);
+}
+
+/** Stop the card timer interval. */
+function stopCardTimers() {
+  if (cardTimerInterval) {
+    clearInterval(cardTimerInterval);
+    cardTimerInterval = null;
+  }
+}
+
+/** Map of active/recent agent states keyed by agent ID. */
+const agentCardState = new Map();
+
+// DOM references for card containers (A-124)
+const $activityCards = document.getElementById('activity-cards');
+const $activityCardsActive = document.getElementById('activity-cards-active');
+const $activityCardsRecent = document.getElementById('activity-cards-recent');
+
+/**
+ * Re-render the agent cards panel.
+ * Splits agents from agentCardState into active (running) and recent (done/failed),
+ * renders them into #activity-cards-active and #activity-cards-recent.
+ */
+function renderAgentPanel() {
+  if (!$activityCardsActive) return;
+
+  const agents = Array.from(agentCardState.values());
+  const active = agents
+    .filter(a => a.status === 'running')
+    .sort((a, b) => new Date(b.startedAt || 0).getTime() - new Date(a.startedAt || 0).getTime());
+  const recent = agents
+    .filter(a => a.status === 'complete' || a.status === 'done' || a.status === 'failed' || a.status === 'interrupted')
+    .sort((a, b) => new Date(b.completedAt || b.updatedAt || 0).getTime() - new Date(a.completedAt || a.updatedAt || 0).getTime())
+    .slice(0, 10);
+
+  if (active.length === 0 && recent.length === 0) {
+    $activityCardsActive.innerHTML = '<div style="padding:16px;color:var(--text-muted);font-size:11px;text-align:center;">No active agents</div>';
+    $activityCardsRecent.innerHTML = '';
+    stopCardTimers();
+    return;
+  }
+
+  $activityCardsActive.innerHTML = active.length > 0
+    ? active.map(renderAgentCard).join('')
+    : '<div style="padding:16px;color:var(--text-muted);font-size:11px;text-align:center;">No active agents</div>';
+  $activityCardsRecent.innerHTML = recent.map(renderAgentCard).join('');
+
+  if (active.length > 0) startCardTimers(); else stopCardTimers();
+}
+
+// Delegated click handler for "View Result" buttons on agent cards (A-128)
+function handleViewResultClick(e) {
+  const btn = e.target.closest('.agent-card-view-result');
+  if (!btn) return;
+  e.stopPropagation();
+  const agentId = btn.getAttribute('data-agent-id');
+  const agent = agentCardState.get(agentId);
+  if (agent) navigateToResult(agent);
+}
+// Delegated click handler: clicking an agent card navigates to its target node
+function handleAgentCardClick(e) {
+  // Don't navigate if clicking a button (View Result, etc.)
+  if (e.target.closest('button')) return;
+  const card = e.target.closest('.agent-card');
+  if (!card) return;
+  const target = card.getAttribute('data-target');
+  if (!target || !graphData) return;
+  const prefix = target.split('-')[0];
+  if (prefix === 'D') {
+    drillDeclId = target;
+    drillLevel = 'milestones';
+    drillMileId = null;
+    pushDrillHash();
+    renderDrillView();
+  } else if (prefix === 'M') {
+    const mile = (graphData.milestones || []).find(m => m.id === target);
+    if (mile && mile.realizes && mile.realizes.length) drillDeclId = mile.realizes[0];
+    drillMileId = target;
+    drillLevel = 'actions';
+    pushDrillHash();
+    renderDrillView();
+  } else if (prefix === 'A') {
+    const action = (graphData.actions || []).find(a => a.id === target);
+    if (action && action.causes && action.causes.length) {
+      drillMileId = action.causes[0];
+      const parentMile = (graphData.milestones || []).find(m => m.id === drillMileId);
+      if (parentMile && parentMile.realizes && parentMile.realizes.length) drillDeclId = parentMile.realizes[0];
+      drillLevel = 'actions';
+      pushDrillHash();
+      renderDrillView();
+    }
+  }
+}
+if ($activityCardsActive) $activityCardsActive.addEventListener('click', handleAgentCardClick);
+if ($activityCardsRecent) $activityCardsRecent.addEventListener('click', handleAgentCardClick);
+
+if ($activityCardsActive) $activityCardsActive.addEventListener('click', handleViewResultClick);
+if ($activityCardsRecent) $activityCardsRecent.addEventListener('click', handleViewResultClick);
+
+// Tab switching for Agents/Log tabs (A-124)
+document.querySelectorAll('.activity-tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.activity-tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.activity-tab-content').forEach(c => c.classList.remove('active'));
+    tab.classList.add('active');
+    const target = tab.dataset.tab === 'cards' ? $activityCards : document.getElementById('activity-list');
+    if (target) target.classList.add('active');
+  });
+});
+
+/**
+ * Check if any agent is actively running for a given node ID.
+ * @param {string} nodeId
+ * @returns {{ type: string, id: string } | null}
+ */
+function getRunningAgentForNode(nodeId) {
+  for (const [, agent] of agentCardState) {
+    if (agent.status === 'running' && agent.target === nodeId) return agent;
+  }
+  return null;
+}
+
+/**
+ * Fetch current agent state from server and populate card state.
+ * Called on page load and SSE reconnect to ensure cards survive refresh.
+ */
+async function loadAgentCards() {
+  try {
+    const res = await fetch('/api/agents');
+    if (!res.ok) return;
+    const data = await res.json();
+    const agents = [].concat(data.active || [], data.recent || []);
+
+    // Replace entire state with server truth
+    agentCardState.clear();
+    for (const agent of agents) {
+      agentCardState.set(agent.id, agent);
+    }
+    renderAgentPanel();
+    if (agents.length > 0) {
+      console.log('[agents]', agents.length, 'agents loaded, active:', agents.filter(a => a.status === 'running').length);
+    }
+  } catch (err) {
+    console.error('[agents] loadAgentCards failed:', err);
+  }
+}
+
 // ─── Activity topbar ──────────────────────────────────────────────────────────
 
 /** @type {{ actionId: string, milestoneId?: string, startedAt: number } | null} */
@@ -6416,16 +7899,8 @@ let topbarActiveOp = null;
 /** @type {{ actionId: string, milestoneId?: string, completedAt: number } | null} */
 let topbarLastOp = null;
 
-function updateTopbar() {
-  if (!$activityPinned) return;
-  if (topbarActiveOp) {
-    const aLabel = topbarActiveOp.actionId;
-    const mLabel = topbarActiveOp.milestoneId ? ' \u2014 ' + topbarActiveOp.milestoneId : '';
-    $activityPinned.innerHTML = '<div class="activity-pinned"><span class="pinned-spinner"></span> EXECUTING ' + escHtml(aLabel) + escHtml(mLabel) + '</div>';
-  } else {
-    $activityPinned.innerHTML = '';
-  }
-}
+// updateTopbar() — no-op, replaced by agent cards panel (A-124)
+function updateTopbar() {}
 
 function formatTimeAgo(ts) {
   var diff = Math.floor((Date.now() - ts) / 1000);
@@ -6459,25 +7934,13 @@ function topbarOnActionComplete(actionId) {
   updateTopbar();
 }
 
-async function topbarOnActivity() {
-  try {
-    var res = await fetch('/api/activity');
-    var data = await res.json();
-    var events = data.events || [];
-    var taskStart = events.find(function(ev) { return ev.tool === 'Task' && ev.phase === 'start'; });
-    if (taskStart) {
-      var actionMatch = (taskStart.desc || '').match(/A-\d+/i);
-      var mileMatch = (taskStart.desc || '').match(/M-\d+/i);
-      if (actionMatch) {
-        topbarActiveOp = {
-          actionId: actionMatch[0].toUpperCase(),
-          milestoneId: mileMatch ? mileMatch[0].toUpperCase() : '',
-          startedAt: new Date(taskStart.ts).getTime() || Date.now(),
-        };
-        updateTopbar();
-      }
-    }
-  } catch (_) {}
+// topbarOnActivity() — simplified to just pulse the activity indicator (A-124)
+function topbarOnActivity() {
+  if ($activityPulse) {
+    $activityPulse.classList.add('live');
+    clearTimeout($activityPulse._topbarTimer);
+    $activityPulse._topbarTimer = setTimeout(() => $activityPulse.classList.remove('live'), 3000);
+  }
 }
 
 setInterval(function() { if (!topbarActiveOp && topbarLastOp) updateTopbar(); }, 30000);
@@ -6535,7 +7998,12 @@ async function loadActivity() {
         return '';
       }
 
-      return `<div class="activity-event">
+      // Extract node ID from desc for navigation
+      const nodeMatch = (desc || '').match(/\b([DMA]-\d+)\b/);
+      const clickable = nodeMatch ? ' clickable' : '';
+      const nodeAttr = nodeMatch ? ` data-nav-node="${nodeMatch[1]}"` : '';
+
+      return `<div class="activity-event${clickable}"${nodeAttr}>
         <div class="ae-top">
           <span class="ae-icon">${icon}</span>
           <span class="ae-label ${labelClass}">${escHtml(label)}</span>
@@ -6568,8 +8036,8 @@ const STATE_DISPLAY = {
 
 const STATE_BTN_LABEL = {
   'create-declaration': '+ Declaration',
-  'derive-milestones':  'Derive Milestones',
-  'derive-actions':     'Derive Actions',
+  'derive-milestones':  'Plan Milestones',
+  'derive-actions':     'Plan Actions',
   'execute-action':     'Execute',
   'plan-actions':       'Plan Actions',
   'view-execution':     'View Execution',
@@ -6590,6 +8058,18 @@ async function loadWorkflowState() {
   }
 }
 
+async function loadLifecycleData() {
+  try {
+    lifecycleData = await fetchJson('/api/lifecycle');
+    // Re-render if we're at the declarations level (lifecycle view)
+    if (drillLevel === 'declarations' && viewMode === 'columns') {
+      renderDrillView();
+    }
+  } catch (_) {
+    lifecycleData = null;
+  }
+}
+
 /**
  * Render the workflow next-step banner from current workflowState.
  */
@@ -6667,9 +8147,45 @@ if ($wfActionBtn) {
 
 function connectSSE() {
   const es = new EventSource('/events');
+  es.addEventListener('open', function() {
+    sseReconnectDelay = 1000;
+    hideReconnectBanner();
+    // Re-sync agent state on reconnect
+    loadAgentCards();
+  });
+  let sseChangeTimer = null;
   es.addEventListener('change', () => {
     if (focusNodeId || focusCleanupTimer) return; // skip during animation
-    loadData();
+    // Debounce rapid SSE change events (e.g. approve writes multiple files)
+    clearTimeout(sseChangeTimer);
+    sseChangeTimer = setTimeout(() => {
+      // If a refine or discuss session is active, save and restore the area across re-renders
+      if (refineActiveNodeId || refineActiveNodes.size > 0 || discussActiveNodeId) {
+        // Save refine area content before re-render
+        let savedRefineHtml = null;
+        const savedRefineNodeId = refineActiveNodeId;
+        if (savedRefineNodeId) {
+          const existingArea = document.getElementById(`refine-area-${savedRefineNodeId}`);
+          savedRefineHtml = existingArea ? existingArea.innerHTML : null;
+        }
+        // Save discuss container (detached element — just need to re-attach after render)
+        const savedDiscussNodeId = discussActiveNodeId;
+        loadData().then(() => {
+          // Restore refine area
+          if (savedRefineHtml && savedRefineNodeId) {
+            const restoredArea = document.getElementById(`refine-area-${savedRefineNodeId}`);
+            if (restoredArea) restoredArea.innerHTML = savedRefineHtml;
+          }
+          // Re-attach discuss container
+          if (savedDiscussNodeId && discussActiveContainer) {
+            reattachDiscussContainer();
+          }
+        });
+      } else {
+        loadData();
+      }
+      loadAgentCards(); // refresh agent cards on any .planning/ change
+    }, 300);
   });
   es.addEventListener('activity', () => {
     loadActivity();
@@ -6741,8 +8257,10 @@ function connectSSE() {
   es.addEventListener('refine-output', function(e) {
     try {
       const data = JSON.parse(e.data);
-      if (!refineActiveNodeId || data.nodeId !== refineActiveNodeId.toUpperCase()) return;
-      const area = document.getElementById(`refine-area-${refineActiveNodeId}`);
+      // Find matching active refine by nodeId
+      const nId = [...refineActiveNodes].find(id => id.toUpperCase() === data.nodeId) || refineActiveNodeId;
+      if (!nId) return;
+      const area = document.getElementById(`refine-area-${nId}`);
       if (!area) return;
       const streaming = area.querySelector('.refine-streaming');
       if (streaming) {
@@ -6754,9 +8272,10 @@ function connectSSE() {
   es.addEventListener('refine-complete', function(e) {
     try {
       const data = JSON.parse(e.data);
-      if (!refineActiveNodeId || data.nodeId !== refineActiveNodeId.toUpperCase()) return;
-      const nId = refineActiveNodeId;
-      refineActiveNodeId = null;
+      const nId = [...refineActiveNodes].find(id => id.toUpperCase() === data.nodeId) || refineActiveNodeId;
+      if (!nId) return;
+      refineActiveNodes.delete(nId);
+      if (refineActiveNodeId === nId) refineActiveNodeId = null;
       const area = document.getElementById(`refine-area-${nId}`);
       if (!area) return;
 
@@ -6810,17 +8329,689 @@ function connectSSE() {
       }
     } catch (_) {}
   });
+  // ─── Discuss (interview) SSE events ──────────────────────────────────────
+  es.addEventListener('discuss-output', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      const outputEl = document.getElementById(`discuss-output-${data.nodeId}`);
+      if (outputEl) {
+        if (outputEl.textContent === 'Thinking...') outputEl.textContent = '';
+        outputEl.textContent += data.text;
+      }
+    } catch (_) {}
+  });
+  es.addEventListener('discuss-complete', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      const container = document.getElementById(`discuss-area-${data.nodeId}`);
+      if (!container) return;
+      if (data.error || !Array.isArray(data.questions) || data.questions.length === 0) {
+        container.innerHTML = `<div class="discuss-result">
+          <div class="discuss-error">${escHtml(data.error || 'No questions generated. Proceed with derivation.')}</div>
+          <button class="drill-action-btn" id="discuss-skip-${data.nodeId}">Proceed</button>
+        </div>`;
+        container.querySelector(`#discuss-skip-${data.nodeId}`).addEventListener('click', () => {
+          clearDiscussState();
+          triggerDerivation(data.nodeId);
+        });
+        return;
+      }
+      // Show questions as a form
+      let html = '<div class="discuss-questions">';
+      html += '<div class="discuss-header">Answer these questions to improve the plan:</div>';
+      data.questions.forEach((q, i) => {
+        html += `<div class="discuss-q">
+          <label class="discuss-q-label">${escHtml(q.question)}</label>
+          ${q.context ? `<div class="discuss-q-context">${escHtml(q.context)}</div>` : ''}
+          ${q.options && q.options.length > 0
+            ? `<div class="discuss-q-options">${q.options.map(opt =>
+                `<button class="discuss-option-btn" data-q="${i}" data-opt="${escHtml(opt)}">${escHtml(opt)}</button>`
+              ).join('')}</div>`
+            : ''}
+          <textarea class="discuss-q-input" data-q="${i}" rows="2" placeholder="Your answer..."></textarea>
+        </div>`;
+      });
+      html += `<div class="discuss-actions">
+        <button class="drill-action-btn drill-action-primary" id="discuss-submit-${data.nodeId}">Save &amp; Proceed</button>
+        <button class="drill-action-btn" id="discuss-skip-${data.nodeId}">Skip</button>
+      </div></div>`;
+      container.innerHTML = html;
+
+      // Wire option buttons to fill textarea
+      container.querySelectorAll('.discuss-option-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const idx = btn.dataset.q;
+          const ta = container.querySelector(`.discuss-q-input[data-q="${idx}"]`);
+          if (ta) ta.value = btn.dataset.opt;
+        });
+      });
+
+      // Wire submit
+      container.querySelector(`#discuss-submit-${data.nodeId}`).addEventListener('click', async () => {
+        const answers = [];
+        data.questions.forEach((q, i) => {
+          const ta = container.querySelector(`.discuss-q-input[data-q="${i}"]`);
+          answers.push({ question: q.question, answer: ta ? ta.value.trim() : '' });
+        });
+        const filtered = answers.filter(a => a.answer);
+        if (filtered.length > 0) {
+          await fetch(`/api/node/${encodeURIComponent(data.nodeId)}/discuss/answer`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ answers: filtered }),
+          });
+        }
+        clearDiscussState();
+        triggerDerivation(data.nodeId);
+      });
+
+      // Wire skip
+      container.querySelector(`#discuss-skip-${data.nodeId}`).addEventListener('click', () => {
+        clearDiscussState();
+        triggerDerivation(data.nodeId);
+      });
+    } catch (_) {}
+  });
+
+  // ─── Agent lifecycle SSE events (M-44) ───────────────────────────────────
+  es.addEventListener('agent-start', function(e) {
+    try {
+      const agent = JSON.parse(e.data);
+      agentCardState.set(agent.id, agent);
+      renderAgentPanel();
+      // Flash pulse indicator
+      if ($activityPulse) {
+        $activityPulse.classList.add('live');
+        clearTimeout($activityPulse._timer);
+        $activityPulse._timer = setTimeout(() => $activityPulse.classList.remove('live'), 3000);
+      }
+    } catch (_) {}
+  });
+  es.addEventListener('agent-update', function(e) {
+    try {
+      const agent = JSON.parse(e.data);
+      // Merge with existing state to preserve any client-side additions
+      const existing = agentCardState.get(agent.id);
+      agentCardState.set(agent.id, Object.assign({}, existing || {}, agent));
+      renderAgentPanel();
+    } catch (_) {}
+  });
+  es.addEventListener('agent-complete', function(e) {
+    try {
+      const agent = JSON.parse(e.data);
+      const existing = agentCardState.get(agent.id);
+      agentCardState.set(agent.id, Object.assign({}, existing || {}, agent));
+      renderAgentPanel();
+      // Flash pulse
+      if ($activityPulse) {
+        $activityPulse.classList.add('live');
+        clearTimeout($activityPulse._timer);
+        $activityPulse._timer = setTimeout(() => $activityPulse.classList.remove('live'), 3000);
+      }
+    } catch (_) {}
+  });
+
+  // Command output — stream text into command output area
+  es.addEventListener('command-output', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      const outputEl = document.getElementById('command-output-stream');
+      if (outputEl) {
+        if (outputEl.textContent === 'Running...') outputEl.textContent = '';
+        outputEl.textContent += data.text;
+        outputEl.scrollTop = outputEl.scrollHeight;
+      }
+    } catch (_) {}
+  });
+
+  // Command complete — reload graph to reflect changes
+  es.addEventListener('command-complete', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      // Update command card UI
+      const outputEl = document.getElementById('command-output-stream');
+      if (outputEl) {
+        if (data.error) {
+          outputEl.textContent += '\n\nError: ' + data.error;
+        }
+        outputEl.classList.remove('streaming');
+      }
+      const cmdCard = document.getElementById('command-card');
+      if (cmdCard) { cmdCard.classList.remove('running'); cmdCard.classList.add('editing'); }
+      if (data.exitCode === 0) {
+        loadData().then(() => renderDrillView()); // refresh graph since command may have modified files
+        loadActivity();
+      }
+    } catch (_) {}
+  });
+
+  // Onboarding flow SSE events
+  es.addEventListener('onboard-output', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      onboardStreamText += data.text;
+      const el = document.getElementById('onboard-stream');
+      if (el) {
+        el.textContent = onboardStreamText;
+        el.scrollTop = el.scrollHeight;
+      }
+    } catch (_) {}
+  });
+
+  es.addEventListener('onboard-questions-complete', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.error) {
+        onboardPhase = 'idle';
+        renderDrillView();
+        return;
+      }
+      onboardQuestions = data.questions;
+      onboardStreamText = '';
+      renderOnboardUI();
+    } catch (_) {}
+  });
+
+  es.addEventListener('onboard-proposals-complete', function(e) {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.error) {
+        onboardPhase = 'idle';
+        renderDrillView();
+        return;
+      }
+      onboardProposals = data.proposals;
+      onboardStreamText = '';
+      renderOnboardUI();
+    } catch (_) {}
+  });
+
   es.addEventListener('error', () => {
-    // Connection dropped — reconnect after 3s
     es.close();
-    setTimeout(connectSSE, 3000);
+    showReconnectBanner();
+    setTimeout(connectSSE, sseReconnectDelay);
+    // Exponential backoff: 1s, 2s, 4s, 8s, max 30s
+    sseReconnectDelay = Math.min(sseReconnectDelay * 2, 30000);
   });
 }
 
+/** @type {number} Current SSE reconnection delay (exponential backoff) */
+let sseReconnectDelay = 1000;
+
+function showReconnectBanner() {
+  let banner = document.getElementById('reconnect-banner');
+  if (!banner) {
+    banner = document.createElement('div');
+    banner.id = 'reconnect-banner';
+    banner.textContent = 'Reconnecting\u2026';
+    document.body.appendChild(banner);
+  }
+  banner.classList.add('visible');
+}
+
+function hideReconnectBanner() {
+  const banner = document.getElementById('reconnect-banner');
+  if (banner) banner.classList.remove('visible');
+}
+
 connectSSE();
 
+// Prune completed agents older than 30 minutes to prevent unbounded growth
+setInterval(function() {
+  const cutoff = Date.now() - 30 * 60 * 1000;
+  for (const [id, agent] of agentCardState) {
+    if (agent.status !== 'running' && agent.completedAt) {
+      const completedTs = new Date(agent.completedAt).getTime();
+      if (completedTs < cutoff) agentCardState.delete(id);
+    }
+  }
+}, 60000);
+
+// ─── Command card ─────────────────────────────────────────────────────────────
+
+const $commandCard = document.getElementById('command-card');
+const $commandInput = document.getElementById('command-card-input');
+
+if ($commandCard && $commandInput) {
+  // Click to expand
+  $commandCard.addEventListener('click', function() {
+    if (!$commandCard.classList.contains('editing')) {
+      $commandCard.classList.add('editing');
+      $commandInput.value = '';
+      $commandInput.focus();
+    }
+  });
+
+  // Esc to blur — stop propagation to prevent drill-level back-navigation
+  $commandInput.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      $commandInput.value = '';
+      $commandInput.blur();
+    }
+    // Enter to send (without shift)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const msg = $commandInput.value.trim();
+      if (!msg) return;
+      $commandInput.value = '';
+      $commandInput.blur();
+      sendCommand(msg);
+    }
+  });
+
+  // Global shortcut: C key (when not in input)
+  document.addEventListener('keydown', function(e) {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
+    if (e.key === 'c' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      // Only if agents tab is visible
+      const agentsTab = document.querySelector('.activity-tab[data-tab="cards"]');
+      if (agentsTab && !agentsTab.classList.contains('active')) {
+        agentsTab.click();
+      }
+      $commandCard.click();
+      e.preventDefault();
+    }
+  });
+}
+
+// ─── Onboarding flow functions ─────────────────────────────────────────────────
+
+function loadOnboardState() {
+  fetch('/api/onboard/state').then(r => r.json()).then(data => {
+    if (!data.active) return;
+    onboardPrompt = data.prompt;
+    onboardQuestions = data.questions;
+    onboardProposals = data.proposals;
+    onboardApproveIndex = data.approveIndex || 0;
+    onboardStreamText = '';
+
+    if (data.phase === 'approving' && data.proposals) {
+      // Mark already-approved proposals
+      for (let i = 0; i < onboardApproveIndex && i < onboardProposals.length; i++) {
+        onboardProposals[i].approvedId = onboardProposals[i].approvedId || '?';
+      }
+      onboardPhase = 'approving';
+    } else if (data.phase === 'proposals' && data.proposals) {
+      onboardPhase = 'proposals';
+    } else if (data.phase === 'questions' && data.questions) {
+      onboardPhase = 'questions';
+    } else {
+      return; // Nothing useful to restore
+    }
+
+    renderOnboardUI();
+  }).catch(() => {});
+}
+
+function startOnboard(message) {
+  onboardPhase = 'questions';
+  onboardPrompt = message;
+  onboardQuestions = null;
+  onboardProposals = null;
+  onboardApproveIndex = 0;
+  onboardStreamText = '';
+  renderOnboardUI();
+
+  fetch('/api/onboard', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message }),
+  }).then(r => r.json()).then(data => {
+    if (data.error) {
+      onboardPhase = 'idle';
+      renderDrillView();
+    }
+  }).catch(() => {
+    onboardPhase = 'idle';
+    renderDrillView();
+  });
+}
+
+function submitOnboardAnswers() {
+  const textareas = document.querySelectorAll('.onboard-question textarea');
+  const answers = [];
+  if (onboardQuestions) {
+    onboardQuestions.forEach((q, i) => {
+      const ta = textareas[i];
+      answers.push({ question: q.question, answer: ta ? ta.value.trim() : '' });
+    });
+  }
+
+  onboardPhase = 'proposals';
+  onboardStreamText = '';
+  renderOnboardUI();
+
+  fetch('/api/onboard/answer', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ answers }),
+  }).then(r => r.json()).then(data => {
+    if (data.error) {
+      onboardPhase = 'idle';
+      renderDrillView();
+    }
+  }).catch(() => {
+    onboardPhase = 'idle';
+    renderDrillView();
+  });
+}
+
+function skipOnboardQuestions() {
+  onboardPhase = 'proposals';
+  onboardStreamText = '';
+  renderOnboardUI();
+
+  fetch('/api/onboard/answer', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ answers: [] }),
+  }).then(r => r.json()).catch(() => {
+    onboardPhase = 'idle';
+    renderDrillView();
+  });
+}
+
+function cancelOnboard() {
+  fetch('/api/onboard/cancel', { method: 'POST' }).catch(() => {});
+  onboardPhase = 'idle';
+  onboardPrompt = null;
+  onboardQuestions = null;
+  onboardProposals = null;
+  renderDrillView();
+}
+
+function startOnboardApproving(mode) {
+  onboardPhase = 'approving';
+  onboardApproveIndex = 0;
+  if (mode === 'all') {
+    approveAllOnboard();
+  } else {
+    renderOnboardUI();
+  }
+}
+
+async function approveCurrentOnboard() {
+  if (!onboardProposals || onboardApproveIndex >= onboardProposals.length) return;
+
+  const proposal = onboardProposals[onboardApproveIndex];
+  // Read potentially edited values from inputs
+  const titleInput = document.querySelector('.onboard-proposal.current .onboard-title');
+  const stmtInput = document.querySelector('.onboard-proposal.current .onboard-statement');
+  const title = titleInput ? titleInput.value.trim() : proposal.title;
+  const statement = stmtInput ? stmtInput.value.trim() : proposal.statement;
+
+  try {
+    const resp = await fetch('/api/onboard/approve', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ title, statement }),
+    });
+    const data = await resp.json();
+    if (data.id) {
+      proposal.approvedId = data.id;
+    }
+  } catch (_) {}
+
+  onboardApproveIndex++;
+  if (onboardApproveIndex >= onboardProposals.length) {
+    // All done — reset and refresh
+    onboardPhase = 'idle';
+    onboardPrompt = null;
+    onboardQuestions = null;
+    onboardProposals = null;
+    fetch('/api/onboard/complete', { method: 'POST' }).catch(() => {});
+    loadData().then(() => renderDrillView());
+    loadActivity();
+  } else {
+    renderOnboardUI();
+  }
+}
+
+async function approveAllOnboard() {
+  if (!onboardProposals) return;
+
+  for (let i = 0; i < onboardProposals.length; i++) {
+    onboardApproveIndex = i;
+    renderOnboardUI();
+    const proposal = onboardProposals[i];
+    try {
+      const resp = await fetch('/api/onboard/approve', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title: proposal.title, statement: proposal.statement }),
+      });
+      const data = await resp.json();
+      if (data.id) proposal.approvedId = data.id;
+    } catch (_) {}
+  }
+
+  onboardPhase = 'idle';
+  onboardPrompt = null;
+  onboardQuestions = null;
+  onboardProposals = null;
+  fetch('/api/onboard/complete', { method: 'POST' }).catch(() => {});
+  loadData().then(() => renderDrillView());
+  loadActivity();
+}
+
+function renderOnboardUI() {
+  if (!$drillList) return;
+  $drillList.innerHTML = '';
+
+  const container = document.createElement('div');
+  container.className = 'onboard-container';
+
+  if (onboardPhase === 'questions') {
+    if (!onboardQuestions) {
+      // Still streaming
+      container.innerHTML = `
+        <div class="onboard-phase-label">Analyzing your vision...</div>
+        <pre class="onboard-stream streaming" id="onboard-stream">${escHtml(onboardStreamText) || 'Thinking...'}</pre>
+      `;
+    } else {
+      // Show question form
+      let html = '<div class="onboard-phase-label">Clarification Questions</div>';
+      html += '<div class="onboard-questions">';
+      onboardQuestions.forEach((q, i) => {
+        html += `<div class="onboard-question">
+          <span class="oq-number">Q${i + 1}</span>
+          <label>${escHtml(q.question)}</label>
+          ${q.context ? `<div class="oq-context">${escHtml(q.context)}</div>` : ''}
+          ${q.options && q.options.length > 0 ? `<div class="oq-options">${q.options.map(o => `<span class="oq-option" data-qi="${i}" data-val="${escHtml(o)}">${escHtml(o)}</span>`).join('')}</div>` : ''}
+          <textarea placeholder="Your answer..." rows="2"></textarea>
+        </div>`;
+      });
+      html += '</div>';
+      html += `<div class="onboard-actions">
+        <button class="onboard-btn-primary" onclick="submitOnboardAnswers()">Submit Answers</button>
+        <button class="onboard-btn-secondary" onclick="skipOnboardQuestions()">Skip</button>
+        <button class="onboard-btn-secondary" onclick="cancelOnboard()">Cancel</button>
+      </div>`;
+      container.innerHTML = html;
+
+      // Attach option click handlers after DOM insertion
+      setTimeout(() => {
+        container.querySelectorAll('.oq-option').forEach(opt => {
+          opt.addEventListener('click', () => {
+            const qi = parseInt(opt.dataset.qi);
+            const val = opt.dataset.val;
+            const ta = container.querySelectorAll('.onboard-question textarea')[qi];
+            if (ta) {
+              ta.value = ta.value ? ta.value + ', ' + val : val;
+            }
+            opt.classList.toggle('selected');
+          });
+        });
+      }, 0);
+    }
+  } else if (onboardPhase === 'proposals') {
+    if (!onboardProposals) {
+      container.innerHTML = `
+        <div class="onboard-phase-label">Generating declarations...</div>
+        <pre class="onboard-stream streaming" id="onboard-stream">${escHtml(onboardStreamText) || 'Thinking...'}</pre>
+      `;
+    } else {
+      let html = '<div class="onboard-phase-label">Proposed Declarations</div>';
+      onboardProposals.forEach((p, i) => {
+        html += `<div class="onboard-proposal">
+          <div class="op-header">
+            <span class="op-index">${i + 1}.</span>
+          </div>
+          <input class="onboard-title" value="${escHtml(p.title)}" />
+          <textarea class="onboard-statement" rows="2">${escHtml(p.statement)}</textarea>
+          <div class="onboard-reason">${escHtml(p.reasoning || '')}</div>
+        </div>`;
+      });
+      html += `<div class="onboard-actions">
+        <button class="onboard-btn-primary" onclick="startOnboardApproving('all')">Approve All</button>
+        <button class="onboard-btn-secondary" onclick="startOnboardApproving('one')">One by One</button>
+        <button class="onboard-btn-secondary" onclick="cancelOnboard()">Cancel</button>
+      </div>`;
+      container.innerHTML = html;
+    }
+  } else if (onboardPhase === 'approving') {
+    if (!onboardProposals) return;
+    let html = `<div class="onboard-phase-label">Approving Declarations</div>`;
+    html += `<div class="onboard-progress">${onboardApproveIndex} of ${onboardProposals.length} approved</div>`;
+    onboardProposals.forEach((p, i) => {
+      const isApproved = i < onboardApproveIndex || p.approvedId;
+      const isCurrent = i === onboardApproveIndex && !p.approvedId;
+      const cls = isApproved ? 'approved' : isCurrent ? 'current' : '';
+      html += `<div class="onboard-proposal ${cls}">
+        <div class="op-header">
+          ${isApproved ? '<span class="op-check">\u2713</span>' : `<span class="op-index">${i + 1}.</span>`}
+          ${p.approvedId ? `<span class="op-id">${escHtml(p.approvedId)}</span>` : ''}
+        </div>
+        ${isCurrent ? `
+          <input class="onboard-title" value="${escHtml(p.title)}" />
+          <textarea class="onboard-statement" rows="2">${escHtml(p.statement)}</textarea>
+        ` : `
+          <div style="font-weight:600;font-size:13px">${escHtml(p.title)}</div>
+          <div style="font-size:12px;color:var(--text-dim);margin-top:4px">${escHtml(p.statement)}</div>
+        `}
+        <div class="onboard-reason">${escHtml(p.reasoning || '')}</div>
+      </div>`;
+    });
+    if (onboardApproveIndex < onboardProposals.length) {
+      html += `<div class="onboard-actions">
+        <button class="onboard-btn-primary" onclick="approveCurrentOnboard()">Approve &amp; Next</button>
+        <button class="onboard-btn-secondary" onclick="cancelOnboard()">Cancel</button>
+      </div>`;
+    }
+    container.innerHTML = html;
+  }
+
+  $drillList.appendChild(container);
+}
+
+function sendCommand(message) {
+  // Route to onboarding when at declarations level with few declarations or long message
+  if (drillLevel === 'declarations' && graphData) {
+    const declCount = (graphData.declarations || []).length;
+    if (declCount < 3 || message.length > 150) {
+      startOnboard(message);
+      return;
+    }
+  }
+
+  // Gather context from current view
+  const context = {};
+  if (drillLevel === 'declarations') {
+    context.viewDescription = 'Declaration list (lifecycle view)';
+    const cards = document.querySelectorAll('#drill-list .drill-card');
+    context.nodeIds = Array.from(cards).map(c => c.dataset.nodeId).filter(Boolean);
+  } else if (drillLevel === 'milestones' && drillDeclId) {
+    context.nodeId = drillDeclId;
+    context.viewDescription = 'Milestones for ' + drillDeclId;
+    const cards = document.querySelectorAll('#drill-list .drill-card');
+    context.nodeIds = Array.from(cards).map(c => c.dataset.nodeId).filter(Boolean);
+  } else if (drillLevel === 'actions' && drillMileId) {
+    context.nodeId = drillMileId;
+    context.viewDescription = 'Actions for ' + drillMileId;
+    const cards = document.querySelectorAll('#drill-list .drill-card');
+    context.nodeIds = Array.from(cards).map(c => c.dataset.nodeId).filter(Boolean);
+  }
+
+  // Show streaming output area in command card
+  const cmdCard = document.getElementById('command-card');
+  if (cmdCard) {
+    cmdCard.classList.add('running');
+    cmdCard.classList.remove('editing');
+    // Create or reuse output area
+    let outputEl = document.getElementById('command-output-stream');
+    if (!outputEl) {
+      outputEl = document.createElement('pre');
+      outputEl.id = 'command-output-stream';
+      outputEl.className = 'command-output-stream streaming';
+      cmdCard.appendChild(outputEl);
+    } else {
+      outputEl.className = 'command-output-stream streaming';
+    }
+    outputEl.textContent = 'Running...';
+  }
+
+  fetch('/api/command', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message, context }),
+  }).then(r => r.json()).then(data => {
+    if (data.error) {
+      console.error('Command error:', data.error);
+      const outputEl = document.getElementById('command-output-stream');
+      if (outputEl) outputEl.textContent = 'Error: ' + data.error;
+    }
+  }).catch(err => {
+    console.error('Command failed:', err);
+    const outputEl = document.getElementById('command-output-stream');
+    if (outputEl) outputEl.textContent = 'Error: ' + err.message;
+  });
+}
+
+// ─── Clickable activity log items ─────────────────────────────────────────────
+
+if ($activityList) {
+  $activityList.addEventListener('click', function(e) {
+    const item = e.target.closest('.activity-event');
+    if (!item) return;
+    const desc = item.querySelector('.ae-desc');
+    if (!desc) return;
+    // Extract node ID from description like "Review of A-117 complete"
+    const match = desc.textContent.match(/\b([DMA]-\d+)\b/);
+    if (match) {
+      const nodeId = match[1];
+      // Navigate to that node
+      const prefix = nodeId.split('-')[0];
+      if (prefix === 'D') {
+        renderDeclarations(graphData); // back to declarations
+      } else if (prefix === 'M') {
+        // Find parent declaration
+        const milestone = (graphData.milestones || []).find(m => m.id === nodeId);
+        if (milestone && milestone.realizes) {
+          const declId = Array.isArray(milestone.realizes) ? milestone.realizes[0] : milestone.realizes;
+          renderMilestones(declId, graphData);
+        }
+      } else if (prefix === 'A') {
+        // Find parent milestone
+        const action = (graphData.actions || []).find(a => a.id === nodeId);
+        if (action && action.causes && action.causes.length > 0) {
+          renderActions(action.causes[0], graphData);
+        }
+      }
+    }
+  });
+}
+
 // ─── Bootstrap ───────────────────────────────────────────────────────────────
 
 showLoading();
-loadData().then(() => restoreExecState());
+loadData().then(() => {
+  restoreExecState();
+  // Restore onboard session from server
+  loadOnboardState();
+});
 loadActivity();
+loadAgentCards();
+
+// Poll agent cards every 3s as fallback if SSE agent events are missed
+setInterval(loadAgentCards, 3000);