app.js

/**
 * Orchestrator Web Dashboard — Frontend
 *
 * Connects to SSE endpoint for live state updates.
 * Zero dependencies, vanilla JS.
 */

// ─── Helpers ────────────────────────────────────────────────────────────────

function formatDuration(ms) {
  if (!ms || ms <= 0) return "—";
  const totalSec = Math.floor(ms / 1000);
  const h = Math.floor(totalSec / 3600);
  const m = Math.floor((totalSec % 3600) / 60);
  const s = totalSec % 60;
  if (h > 0) return `${h}h ${String(m).padStart(2, "0")}m`;
  return `${m}m ${String(s).padStart(2, "0")}s`;
}

function relativeTime(epochOrIso) {
  if (!epochOrIso) return "";
  const ts = typeof epochOrIso === "string" ? new Date(epochOrIso).getTime() : epochOrIso;
  if (isNaN(ts)) return "";
  const diff = Date.now() - ts;
  if (diff < 60000) return `${Math.floor(diff / 1000)}s ago`;
  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
  return `${Math.floor(diff / 3600000)}h ago`;
}

function pctClass(pct) {
  if (pct >= 100) return "pct-hi";
  if (pct >= 50) return "pct-mid";
  if (pct > 0) return "pct-low";
  return "pct-0";
}

function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

/** Format token count as human-readable (e.g., 1.2k, 45k, 1.2M). */
function formatTokens(n) {
  if (!n || n === 0) return "0";
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(1) + "k";
  return String(n);
}

function formatCost(usd) {
  if (!usd || usd === 0) return "";
  if (usd < 0.01) return `$${usd.toFixed(4)}`;
  if (usd < 1) return `$${usd.toFixed(3)}`;
  return `$${usd.toFixed(2)}`;
}

/**
 * TP-107: Check if a lane has a live agent via the Runtime V2 registry.
 * Returns true/false if registry data is available, null if no V2 data.
 */
function isLaneAliveV2(laneNumber) {
  if (!currentData || !currentData.runtimeRegistry || !currentData.runtimeRegistry.agents) return null;
  const agents = Object.values(currentData.runtimeRegistry.agents);
  const laneAgents = agents.filter(a => a.laneNumber === laneNumber);
  if (laneAgents.length === 0) return null;
  return laneAgents.some(a => a.status === 'running' || a.status === 'spawning');
}

/**
 * TP-107: Merge Runtime V2 lane snapshot data onto legacy lane state.
 * V2 fields take precedence when present; legacy fields are preserved as fallback.
 */
function mergeV2LaneSnapshot(legacyLs, v2snap) {
  const base = legacyLs ? { ...legacyLs } : {};
  // Overlay V2 fields from nested worker snapshot onto flat legacy shape.
  // RuntimeLaneSnapshot has worker: { status, elapsedMs, toolCalls, contextPct, ... }
  const w = v2snap.worker;
  if (w) {
    // Map V2 agent status to legacy dashboard status strings
    if (w.status) {
      const statusMap = { running: 'running', spawning: 'running', exited: 'done', crashed: 'error', killed: 'done', timed_out: 'error', wrapping_up: 'running' };
      base.workerStatus = statusMap[w.status] || w.status;
    }
    if (w.elapsedMs != null) base.workerElapsed = w.elapsedMs;
    if (w.contextPct != null) base.workerContextPct = w.contextPct;
    if (w.toolCalls != null) base.workerToolCount = w.toolCalls;
    if (w.lastTool) base.workerLastTool = w.lastTool;
    if (w.costUsd != null) base.workerCostUsd = w.costUsd;
    if (w.inputTokens != null) base.workerInputTokens = w.inputTokens;
    if (w.outputTokens != null) base.workerOutputTokens = w.outputTokens;
    if (w.cacheReadTokens != null) base.workerCacheReadTokens = w.cacheReadTokens;
    if (w.cacheWriteTokens != null) base.workerCacheWriteTokens = w.cacheWriteTokens;
  }
  if (v2snap.taskId) base.taskId = v2snap.taskId;
  if (v2snap.batchId) base.batchId = v2snap.batchId;
  // Enrich progress display from V2 snapshot
  if (v2snap.progress) {
    base._v2Progress = v2snap.progress;
  }
  return base;
}

function isReviewerActiveForTask(ls, task) {
  if (!ls || !task) return false;
  return !!(ls.reviewerStatus === "running" && task.status === "running" && (!ls.taskId || ls.taskId === task.taskId));
}

/** Build a compact token summary string from lane state sidecar data.
 *  Display: ↑total_input ↓output (cost)
 *  Anthropic splits input into: uncached `input` + `cacheRead`.
 *  Both represent tokens the model processed as input.
 *  We show the combined figure as ↑ for clarity.
 */
function tokenSummaryFromLaneState(ls) {
  if (!ls) return "";
  const inp = ls.workerInputTokens || 0;
  const out = ls.workerOutputTokens || 0;
  const cr = ls.workerCacheReadTokens || 0;
  const cw = ls.workerCacheWriteTokens || 0;
  const cost = ls.workerCostUsd || 0;
  const totalIn = inp + cr; // uncached + cached = total input processed
  if (totalIn === 0 && out === 0) return "";
  let s = `↑${formatTokens(totalIn)} ↓${formatTokens(out)}`;
  if (cost > 0) s += ` ${formatCost(cost)}`;
  return s;
}

function tokenSummaryFromReviewerLaneState(ls) {
  if (!ls) return "";
  const inp = ls.reviewerInputTokens || 0;
  const out = ls.reviewerOutputTokens || 0;
  const cr = ls.reviewerCacheReadTokens || 0;
  const cw = ls.reviewerCacheWriteTokens || 0;
  const cost = ls.reviewerCostUsd || 0;
  const totalIn = inp + cr; // uncached + cached = total input processed
  if (totalIn === 0 && out === 0) return "";
  let s = `↑${formatTokens(totalIn)} ↓${formatTokens(out)}`;
  if (cost > 0) s += ` ${formatCost(cost)}`;
  return s;
}

/** Build compact telemetry badge HTML for retry/compaction indicators.
 *  Only shows badges when telemetry data has meaningful values.
 *  @param {object|null} tel - Telemetry data for a lane (from currentData.telemetry[prefix])
 *  @param {boolean} [suppressRetry=false] - When true, hide the retrying badge
 *    (used when reviewer is active — long tool calls trigger false retry signals)
 *  @returns {string} HTML string with badges, or "" if nothing to show
 */
function telemetryBadgesHtml(tel, suppressRetry) {
  if (!tel) return "";
  let badges = "";
  if (tel.retryActive && !suppressRetry) {
    const err = tel.lastRetryError ? ` — ${tel.lastRetryError}` : "";
    badges += `<span class="telem-badge telem-retry-active" title="Retry in progress${escapeHtml(err)}">🔄 retrying</span>`;
  } else if (tel.retries > 0 && !suppressRetry) {
    badges += `<span class="telem-badge telem-retry" title="${tel.retries} auto-retry event(s)">🔄 ${tel.retries}</span>`;
  }
  if (tel.compactions > 0) {
    badges += `<span class="telem-badge telem-compaction" title="${tel.compactions} context compaction(s)">🗜 ${tel.compactions}</span>`;
  }
  return badges;
}

// ─── Copy to Clipboard ──────────────────────────────────────────────────────

let toastEl = null;
let toastTimer = null;

function showCopyToast(text) {
  if (!toastEl) {
    toastEl = document.createElement("div");
    toastEl.className = "copy-toast";
    document.body.appendChild(toastEl);
  }
  toastEl.textContent = `Copied: ${text}`;
  toastEl.classList.add("visible");
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => toastEl.classList.remove("visible"), 2000);
}

function copySessionId(sessionName) {
  // Retained for potential future use but no longer rendered in the UI.
  navigator.clipboard.writeText(sessionName).then(() => {
    showCopyToast(`session ${sessionName}`);
    const btn = document.querySelector(`[data-session="${sessionName}"]`);
    if (btn) {
      btn.classList.add("copied");
      setTimeout(() => btn.classList.remove("copied"), 1500);
    }
  }).catch(() => {
    // Fallback: select the text
    const btn = document.querySelector(`[data-session="${sessionName}"]`);
    if (btn) {
      const range = document.createRange();
      range.selectNodeContents(btn);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  });
}



// ─── DOM References ─────────────────────────────────────────────────────────

const $ = (id) => document.getElementById(id);

const $batchId        = $("batch-id");
const $batchPhase     = $("batch-phase");
const $workspaceMode  = $("workspace-mode");
const $submoduleStatus = $("submodule-status");
const $connDot        = $("conn-dot");
const $lastUpdate     = $("last-update");
const $progressBarBg  = $("progress-bar-bg");
const $overallPct     = $("overall-pct");
const $summaryCounts  = $("summary-counts");
const $summaryElapsed = $("summary-elapsed");
const $summaryWaves   = $("summary-waves");
const $lanesTasksBody = $("lanes-tasks-body");
const $mergeBody      = $("merge-body");
const $errorsPanel    = $("errors-panel");
const $errorsBody     = $("errors-body");
const $footerInfo     = $("footer-info");
const $content        = $("content");
const $historySelect  = $("history-select");
const $historyPanel   = $("history-panel");
const $historyBody    = $("history-body");

// ─── Repo Filter State ──────────────────────────────────────────────────────

const $repoFilter = $("repo-filter");
let selectedRepo = "";       // "" means "All repos"
let knownRepos = [];         // sorted list of known repo IDs
let repoFilterVisible = false;

// ─── History State ──────────────────────────────────────────────────────────

let historyList = [];  // compact batch summaries
let viewingHistoryId = null; // batchId if viewing history, null if live

// ─── Viewer State ───────────────────────────────────────────────────────────

let viewerMode = null;   // "conversation" | "status-md" | null
let viewerTarget = null; // session name (conversation) or taskId (status-md)
let lastBatchId = null;  // TP-178: track batchId for stale viewer detection (#487)

// ─── Repo Helpers ───────────────────────────────────────────────────────────

/**
 * Build a sorted, deduplicated list of repo IDs from the batch payload.
 */
function collectRepoIds(batch) {
  if (!batch || batch.mode !== "workspace") return [];

  const repos = new Set();
  for (const lane of (batch.lanes || [])) {
    if (lane.repoId) repos.add(lane.repoId);
  }
  for (const task of (batch.tasks || [])) {
    const rid = task.resolvedRepoId || task.repoId;
    if (rid) repos.add(rid);
  }
  for (const mr of (batch.mergeResults || [])) {
    for (const rr of (mr.repoResults || [])) {
      if (rr.repoId) repos.add(rr.repoId);
    }
  }
  const sorted = Array.from(repos).sort();
  return sorted;
}

/**
 * Build the repo set used by the filter dropdown.
 * Returns empty array when mode !== "workspace" or when fewer than 2 repos.
 */
function buildRepoSet(batch) {
  const sorted = collectRepoIds(batch);
  return sorted.length >= 2 ? sorted : [];
}

/**
 * Update the repo filter dropdown options and visibility.
 * Resets selection to "All repos" if the previously selected repo disappeared.
 */
function updateRepoFilter(repos) {
  knownRepos = repos;
  const shouldShow = repos.length >= 2;

  if (shouldShow !== repoFilterVisible) {
    $repoFilter.style.display = shouldShow ? "" : "none";
    repoFilterVisible = shouldShow;
  }

  if (!shouldShow) {
    selectedRepo = "";
    return;
  }

  // If selected repo disappeared, reset to "All"
  if (selectedRepo && !repos.includes(selectedRepo)) {
    selectedRepo = "";
  }

  // Rebuild options only if repo set changed
  const currentOpts = Array.from($repoFilter.options).slice(1).map(o => o.value);
  const changed = currentOpts.length !== repos.length || currentOpts.some((v, i) => v !== repos[i]);
  if (changed) {
    // Preserve selection
    const prev = selectedRepo;
    $repoFilter.innerHTML = '<option value="">All repos</option>';
    for (const r of repos) {
      const opt = document.createElement("option");
      opt.value = r;
      opt.textContent = r;
      $repoFilter.appendChild(opt);
    }
    $repoFilter.value = prev;
  }
}

/** Get the effective repo ID for a task (prefer resolvedRepoId, fallback repoId). */
function taskRepoId(task) {
  return task.resolvedRepoId || task.repoId || undefined;
}

/** Render a repo badge span. Returns "" if repoId is falsy or repos not active. */
function repoBadgeHtml(repoId, extraClass) {
  if (!repoId || knownRepos.length < 2) return "";
  return `<span class="repo-badge ${extraClass || ""}" title="Repo: ${escapeHtml(repoId)}">${escapeHtml(repoId)}</span>`;
}

function parseSegmentId(segmentId) {
  if (!segmentId || typeof segmentId !== "string") return null;
  const sep = segmentId.indexOf("::");
  if (sep <= 0 || sep >= segmentId.length - 2) return null;
  return {
    taskId: segmentId.slice(0, sep),
    repoId: segmentId.slice(sep + 2),
  };
}

function segmentProgressText(segmentInfo) {
  if (!segmentInfo) return "";
  const repo = segmentInfo.repoId || "unknown";
  if (segmentInfo.index && segmentInfo.total) {
    return `Segment ${segmentInfo.index}/${segmentInfo.total}: ${repo}`;
  }
  return `Segment: ${repo}`;
}

function buildSegmentStatusMap(batch) {
  const map = new Map();
  for (const seg of (batch?.segments || [])) {
    if (seg && typeof seg.segmentId === "string") {
      map.set(seg.segmentId, seg.status || "pending");
    }
  }
  return map;
}

function taskSegmentProgress(task, segmentStatusMap, forcedActiveSegmentId) {
  const segmentIds = Array.isArray(task?.segmentIds)
    ? task.segmentIds.filter(id => typeof id === "string")
    : [];
  // Repo-singleton (or repo-mode) tasks should stay visually clean.
  if (segmentIds.length <= 1) return null;

  const activeSegmentId = forcedActiveSegmentId || task.activeSegmentId;
  let currentSegmentId = activeSegmentId && segmentIds.includes(activeSegmentId)
    ? activeSegmentId
    : null;

  if (!currentSegmentId) {
    if (task.status === "pending" || task.status === "running") {
      currentSegmentId = segmentIds.find((id) => {
        const status = segmentStatusMap.get(id);
        return !["succeeded", "failed", "stalled", "skipped"].includes(status);
      }) || segmentIds[segmentIds.length - 1];
    } else {
      currentSegmentId = segmentIds[segmentIds.length - 1];
    }
  }

  const idx = Math.max(0, segmentIds.indexOf(currentSegmentId));
  const parsed = parseSegmentId(currentSegmentId);
  return {
    index: idx + 1,
    total: segmentIds.length,
    repoId: parsed?.repoId || taskRepoId(task) || undefined,
    segmentId: currentSegmentId,
  };
}

function laneActiveSegmentInfo(v2snap, laneTasks, segmentStatusMap) {
  if (!v2snap || !v2snap.segmentId) return null;
  const parsed = parseSegmentId(v2snap.segmentId);
  if (!parsed) return null;

  const ownerTaskId = v2snap.taskId || parsed.taskId;
  const ownerTask = (laneTasks || []).find(t => t.taskId === ownerTaskId) || null;
  if (ownerTask) {
    const byTask = taskSegmentProgress(ownerTask, segmentStatusMap, v2snap.segmentId);
    if (byTask) return byTask;
    return null;
  }

  return {
    index: null,
    total: null,
    repoId: parsed.repoId,
    segmentId: v2snap.segmentId,
  };
}

// Repo filter change handler
$repoFilter.addEventListener("change", (e) => {
  selectedRepo = e.target.value;
  // Re-render with current data
  if (currentData) {
    const batch = currentData.batch;
    const sessions = currentData.sessions ?? currentData.tmuxSessions ?? [];
    if (batch) {
      renderLanesTasks(batch, sessions);
      renderMergeAgents(batch, sessions);
    }
  }
});

// ─── Render: Header ─────────────────────────────────────────────────────────

function renderHeader(batch) {
  if (!batch) {
    $batchId.textContent = "—";
    $batchPhase.textContent = "No batch";
    $batchPhase.className = "header-badge badge-phase";
    $workspaceMode.style.display = "none";
    $submoduleStatus.style.display = "none";
    return;
  }
  $batchId.textContent = batch.batchId;
  $batchPhase.textContent = batch.phase;
  $batchPhase.className = `header-badge badge-phase phase-${batch.phase}`;

  if (batch.mode === "workspace") {
    const repoIds = collectRepoIds(batch);
    const repoCount = repoIds.length;
    $workspaceMode.style.display = "";
    $workspaceMode.textContent = `${repoCount} repo${repoCount === 1 ? "" : "s"}`;
    $workspaceMode.title = repoCount > 0
      ? `Workspace batch spanning ${repoCount} repo${repoCount === 1 ? "" : "s"}`
      : "Workspace batch";
  } else {
    $workspaceMode.style.display = "none";
  }

  if (batch.workspaceSyncStatus) {
    $submoduleStatus.style.display = "";
    $submoduleStatus.textContent = batch.workspaceSyncStatus.label;
    $submoduleStatus.title = batch.workspaceSyncStatus.detail || "Workspace repo/submodule sync status";
    $submoduleStatus.className = `header-badge badge-sync sync-${batch.workspaceSyncStatus.state}`;
  } else {
    $submoduleStatus.style.display = "none";
  }
}

// ─── Render: Summary ────────────────────────────────────────────────────────

function renderSummary(batch) {
  if (!batch) {
    $progressBarBg.innerHTML = "";
    $overallPct.textContent = "0%";
    $summaryCounts.innerHTML = "";
    $summaryElapsed.textContent = "—";
    $summaryWaves.innerHTML = "";
    return;
  }

  const tasks = batch.tasks || [];
  const total = tasks.length;
  const succeeded = tasks.filter(t => t.status === "succeeded").length;
  const running   = tasks.filter(t => t.status === "running").length;
  const failed    = tasks.filter(t => t.status === "failed").length;
  const stalled   = tasks.filter(t => t.status === "stalled").length;
  const pending   = tasks.filter(t => t.status === "pending").length;

  // ── Checkbox-based progress by wave ──────────────────────────
  const taskMap = new Map(tasks.map(t => [t.taskId, t]));
  const wavePlan = batch.wavePlan || [tasks.map(t => t.taskId)]; // fallback: single wave
  const currentWaveIdx = batch.currentWaveIndex || 0;

  // TP-148: Build wave segment context — for each task appearing in multiple waves,
  // determine which segment corresponds to each wave appearance.
  const taskWaveAppearance = new Map(); // taskId → count of appearances so far
  const waveSegmentLabels = wavePlan.map((taskIds) => {
    const labels = new Map(); // taskId → label string
    for (const tid of taskIds) {
      const task = taskMap.get(tid);
      const segmentIds = task?.segmentIds;
      if (!segmentIds || segmentIds.length <= 1) continue;
      const count = (taskWaveAppearance.get(tid) || 0);
      taskWaveAppearance.set(tid, count + 1);
      const segId = segmentIds[count];
      if (segId) {
        const parsed = parseSegmentId(segId);
        const repo = parsed ? parsed.repoId : "";
        labels.set(tid, `${tid} (segment ${count + 1}/${segmentIds.length}: ${repo})`);
      }
    }
    return labels;
  });

  // Compute per-wave and overall checkbox totals
  let batchChecked = 0, batchTotal = 0;
  const waveStats = wavePlan.map((taskIds, waveIdx) => {
    let wChecked = 0, wTotal = 0;
    let allSucceeded = taskIds.length > 0;
    for (const tid of taskIds) {
      const t = taskMap.get(tid);
      if (!t || t.status !== "succeeded") allSucceeded = false;
      if (t && t.status === "succeeded" && t.statusData) {
        // Succeeded task with statusData: count as fully done even if
        // STATUS.md checkboxes weren't all ticked before .DONE was created
        const total = t.statusData.total || 1;
        wChecked += total;
        wTotal += total;
      } else if (t && t.statusData) {
        wChecked += t.statusData.checked || 0;
        wTotal += t.statusData.total || 0;
      } else if (t && t.status === "succeeded") {
        // Succeeded tasks may not have statusData if STATUS.md was cleaned up
        // Count as fully done — use a small placeholder if no data
        wChecked += 1;
        wTotal += 1;
      }
    }
    batchChecked += wChecked;
    batchTotal += wTotal;
    return { waveIdx, taskIds, checked: wChecked, total: wTotal, allSucceeded };
  });

  const overallPct = batchTotal > 0 ? Math.round((batchChecked / batchTotal) * 100) : 0;
  $overallPct.textContent = `${overallPct}%`;

  // Build segmented progress bar — each wave gets a proportional segment
  let barHtml = "";
  for (const ws of waveStats) {
    const segWidthPct = batchTotal > 0 ? (ws.total / batchTotal) * 100 : (100 / waveStats.length);
    const fillPct = ws.total > 0 ? (ws.checked / ws.total) * 100 : 0;
    const checkboxDone = ws.checked === ws.total && ws.total > 0;
    const pastWave = ws.waveIdx < currentWaveIdx;
    const batchDone = batch.phase === "completed";
    // TP-178: During merging, only past waves are truly done. The current wave's
    // checkboxDone/allSucceeded can be true (tasks finished) but the wave itself
    // isn't done until the merge completes. (#493)
    const isMerging = batch.phase === "merging";
    const isDone = batchDone || pastWave || (!isMerging && (checkboxDone || ws.allSucceeded));
    const isMergingWave = isMerging && ws.waveIdx === currentWaveIdx;
    const isCurrent = ws.waveIdx === currentWaveIdx && (batch.phase === "executing" || isMerging);
    const isFuture = ws.waveIdx > currentWaveIdx && (batch.phase === "executing" || isMerging);

    const fillClass = isDone ? "pct-hi" : fillPct > 50 ? "pct-mid" : fillPct > 0 ? "pct-low" : "pct-0";
    const fillWidth = isDone ? 100 : fillPct;
    // TP-178: Add merging visual state for the wave currently being merged (#493)
    const segClass = isMergingWave ? "wave-seg-current wave-seg-merging" : isCurrent ? "wave-seg-current" : isFuture ? "wave-seg-future" : "";

    // TP-148: Use segment-aware labels in tooltip when available
    const segLabels = waveSegmentLabels[ws.waveIdx] || new Map();
    const tooltipTasks = ws.taskIds.map(tid => segLabels.get(tid) || tid).join(', ');
    barHtml += `<div class="wave-seg ${segClass}" style="width:${segWidthPct.toFixed(1)}%" title="W${ws.waveIdx + 1}: ${ws.checked}/${ws.total} checkboxes (${tooltipTasks})">`;
    barHtml += `  <div class="wave-seg-fill ${fillClass}" style="width:${fillWidth.toFixed(1)}%"></div>`;
    barHtml += `  <span class="wave-seg-label">W${ws.waveIdx + 1}</span>`;
    barHtml += `</div>`;
  }
  $progressBarBg.innerHTML = barHtml;

  let countsHtml = "";
  if (succeeded > 0) countsHtml += `<span class="count-chip count-succeeded"><span class="count-num">${succeeded}</span><span class="count-icon">✓</span></span>`;
  if (running > 0)   countsHtml += `<span class="count-chip count-running"><span class="count-num">${running}</span><span class="count-icon">▶</span></span>`;
  if (failed > 0)    countsHtml += `<span class="count-chip count-failed"><span class="count-num">${failed}</span><span class="count-icon">✗</span></span>`;
  if (stalled > 0)   countsHtml += `<span class="count-chip count-stalled"><span class="count-num">${stalled}</span><span class="count-icon">⏸</span></span>`;
  if (pending > 0)   countsHtml += `<span class="count-chip count-pending"><span class="count-num">${pending}</span><span class="count-icon">◌</span></span>`;
  countsHtml += `<span class="count-total">/ ${total}</span>`;
  $summaryCounts.innerHTML = countsHtml;

  const elapsed = batch.startedAt ? Date.now() - batch.startedAt : 0;
  let elapsedStr = `elapsed: ${formatDuration(elapsed)}`;
  if (batch.updatedAt) elapsedStr += `  ·  updated: ${relativeTime(batch.updatedAt)}`;

  // Aggregate tokens/cost for summary.
  // Runtime V2 snapshots are authoritative when present; legacy lane-state sidecars are fallback.
  const laneStates = currentData?.laneStates || {};
  const runtimeLaneSnapshots = currentData?.runtimeLaneSnapshots || {};
  const v2Snaps = Object.values(runtimeLaneSnapshots);

  let batchInput = 0, batchOutput = 0, batchCacheRead = 0, batchCacheWrite = 0, batchCostFromSnapshots = 0;

  if (v2Snaps.length > 0) {
    for (const snap of v2Snaps) {
      const w = snap?.worker || {};
      batchInput += w.inputTokens || 0;
      batchOutput += w.outputTokens || 0;
      batchCacheRead += w.cacheReadTokens || 0;
      batchCacheWrite += w.cacheWriteTokens || 0;
      batchCostFromSnapshots += w.costUsd || 0;

      const r = snap?.reviewer || null;
      if (r) {
        batchInput += r.inputTokens || 0;
        batchOutput += r.outputTokens || 0;
        batchCacheRead += r.cacheReadTokens || 0;
        batchCacheWrite += r.cacheWriteTokens || 0;
        batchCostFromSnapshots += r.costUsd || 0;
      }
    }
  } else {
    // Legacy fallback
    for (const ls of Object.values(laneStates)) {
      batchInput += ls.workerInputTokens || 0;
      batchOutput += ls.workerOutputTokens || 0;
      batchCacheRead += ls.workerCacheReadTokens || 0;
      batchCacheWrite += ls.workerCacheWriteTokens || 0;
      batchCostFromSnapshots += ls.workerCostUsd || 0;
    }
  }

  // Keep server-computed cost as fallback for uncovered early-start lanes.
  const batchCost = batchCostFromSnapshots > 0
    ? batchCostFromSnapshots
    : ((currentData?.batchTotalCost != null && currentData.batchTotalCost > 0)
      ? currentData.batchTotalCost
      : 0);
  const batchTotalIn = batchInput + batchCacheRead;
  if (batchTotalIn > 0 || batchOutput > 0) {
    let tokenStr = `  ·  tokens: ↑${formatTokens(batchTotalIn)} ↓${formatTokens(batchOutput)}`;
    if (batchCost > 0) tokenStr += `  ·  cost: ${formatCost(batchCost)}`;
    elapsedStr += tokenStr;
  }

  $summaryElapsed.textContent = elapsedStr;

  // Waves
  if (batch.wavePlan && batch.wavePlan.length > 0) {
    const waveIdx = batch.currentWaveIndex || 0;
    let wavesHtml = '<span style="color:var(--text-muted); font-weight:600; margin-right:4px;">Waves</span>';
    batch.wavePlan.forEach((taskIds, i) => {
      // TP-178: During merging, only past waves are done; current wave shows merging state (#493)
      const isDone = i < waveIdx || batch.phase === "completed";
      const isCurrent = i === waveIdx && (batch.phase === "executing" || batch.phase === "merging");
      const isMergingChip = i === waveIdx && batch.phase === "merging";
      const cls = isDone ? "done" : isMergingChip ? "current merging" : isCurrent ? "current" : "";
      wavesHtml += `<span class="wave-chip ${cls}">W${i + 1} [${taskIds.join(", ")}]</span>`;
    });
    $summaryWaves.innerHTML = wavesHtml;
  } else {
    $summaryWaves.innerHTML = "";
  }
}

// ─── Render: Lanes + Tasks (integrated) ─────────────────────────────────────

function renderLanesTasks(batch, sessions) {
  if (!batch || !batch.lanes || batch.lanes.length === 0) {
    $lanesTasksBody.innerHTML = '<div class="empty-state">No lanes</div>';
    return;
  }

  const tasks = batch.tasks || [];
  const sessionSet = new Set(sessions || []);
  const laneStates = currentData?.laneStates || {};
  const telemetry = currentData?.telemetry || {};
  // TP-107: V2 lane snapshots take precedence over legacy lane states when present
  const v2Snapshots = currentData?.runtimeLaneSnapshots || {};
  const showRepos = knownRepos.length >= 2;
  const segmentStatusMap = buildSegmentStatusMap(batch);
  let html = "";

  for (const lane of batch.lanes) {
    const laneTasks = (lane.taskIds || []).map(tid => tasks.find(t => t.taskId === tid)).filter(Boolean);
    const v2snap = v2Snapshots[lane.laneNumber] || null;
    const laneActiveSegment = laneActiveSegmentInfo(v2snap, laneTasks, segmentStatusMap);

    // Repo filtering: if a repo is selected, skip lanes that don't match
    if (selectedRepo && showRepos) {
      const laneMatchesRepo = (lane.repoId === selectedRepo) ||
        laneTasks.some(t => (taskRepoId(t) || lane.repoId) === selectedRepo);
      if (!laneMatchesRepo) continue;
    }

    // TP-107: check Runtime V2 registry for liveness first, fall back to session list
    const laneSessionId = lane.laneSessionId;
    const v2Alive = isLaneAliveV2(lane.laneNumber);
    const alive = v2Alive !== null ? v2Alive : sessionSet.has(laneSessionId);


    // Lane header
    html += `<div class="lane-group">`;
    html += `<div class="lane-header">`;
    html += `  <span class="lane-num">${lane.laneNumber}</span>`;
    html += `  <div class="lane-meta">`;
    html += `    <span class="lane-session">${escapeHtml(laneSessionId || "—")}</span>`;
    html += `    <span class="lane-branch">${escapeHtml(lane.branch || "—")}</span>`;
    if (showRepos && lane.repoId) {
      html += `    ${repoBadgeHtml(lane.repoId, "repo-badge-lane")}`;
    }
    if (laneActiveSegment) {
      html += `    <span class="lane-segment" title="${escapeHtml(laneActiveSegment.segmentId || segmentProgressText(laneActiveSegment))}">${escapeHtml(segmentProgressText(laneActiveSegment))}</span>`;
    }
    html += `  </div>`;
    html += `  <div class="lane-right">`;
    html += `    <span class="session-dot ${alive ? "alive" : "dead"}" title="${alive ? "session alive" : "session not active"}"></span>`;
    // View button: shows conversation stream when available
    const isViewingConv = viewerMode === 'conversation' && viewerTarget === laneSessionId;
    html += `    <button class="session-view-btn${isViewingConv ? ' active' : ''}" onclick="viewConversation('${escapeHtml(laneSessionId)}')" title="View worker conversation">👁 View</button>`;

    html += `  </div>`;
    html += `</div>`;

    // Task rows for this lane
    if (laneTasks.length === 0) {
      html += `<div class="task-row"><span class="task-icon"></span><span style="color:var(--text-faint);grid-column:2/-1;">No tasks assigned</span></div>`;
    }

    // Get lane state and telemetry for worker stats
    // TP-107: V2 lane snapshots take precedence when present
    const legacyLs = laneStates[laneSessionId] || null;
    const ls = v2snap ? mergeV2LaneSnapshot(legacyLs, v2snap) : legacyLs;
    const tel = telemetry[laneSessionId] || null;

    for (const task of laneTasks) {
      // Repo filtering at task level
      const tRepo = taskRepoId(task) || lane.repoId;
      if (selectedRepo && showRepos && tRepo !== selectedRepo) continue;

      const sd = task.statusData;
      const dur = task.startedAt
        ? formatDuration((task.endedAt || Date.now()) - task.startedAt)
        : "—";
      const segmentInfo = taskSegmentProgress(task, segmentStatusMap, null);
      const packetHomeRepo = typeof task.packetRepoId === "string" ? task.packetRepoId : "";
      const showPacketHome = !!packetHomeRepo && packetHomeRepo !== (tRepo || lane.repoId || "");

      // Progress cell
      // TP-174: Prefer V2 snapshot progress (segment-scoped when available)
      // over full STATUS.md counts when the task is actively running on this lane.
      // TP-176: Succeeded tasks always show 100% regardless of sidecar/statusData (#491).
      let progressHtml = "";
      const v2p = ls && ls._v2Progress;
      const taskMatch = v2p && ls.taskId === task.taskId;
      // Split V2 usage: progress needs totals > 0, but step/iter can be used whenever present
      const useV2Progress = taskMatch && v2p.total > 0;
      const useV2Step = taskMatch && !!v2p.currentStep;
      if (task.status === "succeeded") {
        // #491 fix: succeeded tasks always show 100%
        progressHtml = `
          <div class="task-progress">
            <div class="task-progress-bar"><div class="task-progress-fill pct-hi" style="width:100%"></div></div>
            <span class="task-progress-text">100%</span>
          </div>`;
      } else if (useV2Progress || (sd && sd.total > 0)) {
        const displayChecked = useV2Progress ? v2p.checked : sd.checked;
        const displayTotal = useV2Progress ? v2p.total : sd.total;
        const displayProgress = displayTotal > 0 ? Math.round((displayChecked / displayTotal) * 100) : 0;
        const fillClass = pctClass(displayProgress);
        progressHtml = `
          <div class="task-progress">
            <div class="task-progress-bar">
              <div class="task-progress-fill ${fillClass}" style="width:${displayProgress}%"></div>
            </div>
            <span class="task-progress-text">${displayProgress}% ${displayChecked}/${displayTotal}</span>
          </div>`;
      } else if (task.status === "running") {
        // #494 fix: running tasks without meaningful totals show executing indicator
        // This covers non-final segments, early execution before sidecar captures, and stale 0/0 data
        progressHtml = `
          <div class="task-progress">
            <div class="task-progress-bar"><div class="task-progress-fill pct-low task-progress-executing" style="width:100%"></div></div>
            <span class="task-progress-text">executing…</span>
          </div>`;
      } else if (task.status === "pending") {
        progressHtml = `
          <div class="task-progress">
            <div class="task-progress-bar"><div class="task-progress-fill pct-0" style="width:0%"></div></div>
            <span class="task-progress-text">0%</span>
          </div>`;
      } else {
        progressHtml = '<span style="color:var(--text-faint)">—</span>';
      }

      // Step cell
      // TP-178: Prefer V2 snapshot currentStep (refreshed every sidecar poll) over
      // server-parsed statusData which can lag behind (#488).
      let stepHtml = "";
      if (task.status === "succeeded") {
        // TP-178: Succeeded tasks always show "Complete" regardless of sidecar data (#491)
        stepHtml = '<span style="color:var(--green)">Complete</span>';
      } else if (sd || useV2Step) {
        // #488 fix: prefer V2 step name whenever present (even if totals are 0)
        const stepName = useV2Step ? v2p.currentStep : (sd ? sd.currentStep : "Unknown");
        const iter = (useV2Step && v2p.iteration != null) ? v2p.iteration : (sd ? sd.iteration : 0);
        const revs = (useV2Step && v2p.reviews != null) ? v2p.reviews : (sd ? sd.reviews : 0);
        stepHtml = escapeHtml(stepName);
        if (iter > 0) stepHtml += `<span class="task-iter">i${iter}</span>`;
        if (revs > 0) stepHtml += `<span class="task-iter">r${revs}</span>`;
      } else if (task.status === "pending") {
        stepHtml = '<span style="color:var(--text-faint)">Waiting</span>';
      } else {
        stepHtml = `<span style="color:var(--text-faint)">${escapeHtml(task.exitReason || "—")}</span>`;
      }

      const detailBits = [];
      if (segmentInfo) {
        detailBits.push(`<span class="task-segment-progress" title="${escapeHtml(segmentInfo.segmentId || segmentProgressText(segmentInfo))}">${escapeHtml(segmentProgressText(segmentInfo))}</span>`);
      }
      if (showPacketHome) {
        detailBits.push(`<span class="task-packet-home" title="Task packet home repo">packet: ${escapeHtml(packetHomeRepo)}</span>`);
      }
      if (detailBits.length > 0) {
        stepHtml = `${detailBits.join('<span class="task-detail-sep"> · </span>')}<span class="task-detail-sep"> · </span><span class="task-step-main">${stepHtml}</span>`;
      }

      // Worker stats from lane state sidecar + telemetry badges
      let workerHtml = "";
      // Reviewer sub-row should only appear under the active running task in this lane.
      // Runtime V2 snapshots provide taskId; during early startup it can be briefly unset,
      // so allow a task-status fallback while still avoiding duplicate rows.
      const reviewerActive = isReviewerActiveForTask(ls, task);
      const telemBadges = task.status !== "pending" ? telemetryBadgesHtml(tel, reviewerActive) : "";
      if (ls && ls.workerStatus === "running" && task.status === "running") {
        const elapsed = ls.workerElapsed ? `${Math.round(ls.workerElapsed / 1000)}s` : "";
        const tools = ls.workerToolCount || 0;
        const ctx = ls.workerContextPct ? `${Math.round(ls.workerContextPct)}%` : "";
        const lastTool = reviewerActive ? "[awaiting review]" : (ls.workerLastTool || "");
        const tokenStr = tokenSummaryFromLaneState(ls);
        workerHtml = `<div class="worker-stats">`;
        workerHtml += `<span class="worker-stat" title="Worker elapsed">⏱ ${elapsed}</span>`;
        workerHtml += `<span class="worker-stat" title="Tool calls">🔧 ${tools}</span>`;
        if (ctx) workerHtml += `<span class="worker-stat" title="Context window used">📊 ${ctx}</span>`;
        if (tokenStr) workerHtml += `<span class="worker-stat" title="Tokens: input↑ output↓ cacheRead(R) cacheWrite(W)">🪙 ${tokenStr}</span>`;
        if (lastTool) workerHtml += `<span class="worker-stat worker-last-tool" title="${reviewerActive ? 'Waiting for reviewer' : 'Last tool call'}">${reviewerActive ? '<span style="color:var(--yellow)">' + escapeHtml(lastTool) + '</span>' : escapeHtml(lastTool)}</span>`;
        workerHtml += telemBadges;
        workerHtml += `</div>`;
      } else if (!ls && tel && task.status === "running") {
        // Running task with telemetry but no lane-state yet (early startup)
        const lastTool = tel.lastTool || "";
        workerHtml = `<div class="worker-stats">`;
        if (lastTool) workerHtml += `<span class="worker-stat worker-last-tool" title="Last tool call">${escapeHtml(lastTool)}</span>`;
        workerHtml += telemBadges;
        workerHtml += `</div>`;
      } else if (ls && ls.workerStatus === "done" && task.status !== "pending") {
        workerHtml = `<div class="worker-stats"><span class="worker-stat" style="color:var(--green)">✓ Worker done</span>${telemBadges}</div>`;
      } else if (ls && ls.workerStatus === "error" && task.status !== "pending") {
        workerHtml = `<div class="worker-stats"><span class="worker-stat" style="color:var(--red)">✗ Worker error</span>${telemBadges}</div>`;
      } else if (telemBadges && task.status !== "pending") {
        // No lane-state but telemetry exists (done/error lane without sidecar)
        workerHtml = `<div class="worker-stats">${telemBadges}</div>`;
      }

      // Reviewer sub-row: shown when reviewer is actively running
      let reviewerRowHtml = "";
      if (reviewerActive) {
        const rElapsed = ls.reviewerElapsed ? `${Math.round(ls.reviewerElapsed / 1000)}s` : "";
        const rTools = ls.reviewerToolCount || 0;
        const rCtx = ls.reviewerContextPct ? `${Math.round(ls.reviewerContextPct)}%` : "";
        const rLastTool = ls.reviewerLastTool || "";
        const rTokenStr = tokenSummaryFromReviewerLaneState(ls);
        const rType = ls.reviewerType || "review";
        const rStep = ls.reviewerStep || "?";
        reviewerRowHtml = `
          <div class="task-row reviewer-sub-row">
            <span class="task-icon"></span>
            <span class="task-actions"></span>
            <span class="reviewer-label">📋 Reviewer</span>
            <span class="reviewer-type">${escapeHtml(rType)} · Step ${rStep}</span>
            <span class="task-duration"></span>
            <span></span>
            <span class="task-step">
              <div class="worker-stats reviewer-stats">
                <span class="worker-stat" title="Reviewer elapsed">⏱ ${rElapsed}</span>
                <span class="worker-stat" title="Reviewer tool calls">🔧 ${rTools}</span>
                ${rCtx ? `<span class="worker-stat" title="Reviewer context used">📊 ${rCtx}</span>` : ""}
                ${rTokenStr ? `<span class="worker-stat" title="Reviewer tokens: input↑ output↓ cacheRead(R) cacheWrite(W)">🪙 ${rTokenStr}</span>` : ""}
                ${rLastTool ? `<span class="worker-stat worker-last-tool" title="Reviewer last tool">${escapeHtml(rLastTool)}</span>` : ""}
              </div>
            </span>
          </div>`;
      }

      const isViewingStatus = viewerMode === 'status-md' && viewerTarget === task.taskId;
      const eyeHtml = task.status !== 'pending'
        ? `<button class="viewer-eye-btn${isViewingStatus ? ' active' : ''}" onclick="viewStatusMd('${escapeHtml(task.taskId)}')" title="View STATUS.md">👁</button>`
        : '';

      html += `
        <div class="task-row">
          <span class="task-icon"><span class="status-dot ${task.status}"></span></span>
          <span class="task-actions">${eyeHtml}</span>
          <span class="task-id status-${task.status}">${escapeHtml(task.taskId)}${showRepos ? repoBadgeHtml(tRepo, "repo-badge-task") : ""}</span>
          <span><span class="status-badge status-${task.status}"><span class="status-dot ${task.status}"></span> ${task.status}</span></span>
          <span class="task-duration">${dur}</span>
          <span>${progressHtml}</span>
          <span class="task-step">${stepHtml}${workerHtml}</span>
        </div>`;
      html += reviewerRowHtml;
    }

    html += `</div>`; // close lane-group
  }

  $lanesTasksBody.innerHTML = html;
}

// ─── Render: Merge Agents ───────────────────────────────────────────────────

/** Build full telemetry HTML for a merge agent (parity with worker stats).
 *  Shows: elapsed, tool count, context %, cost, current tool, retry/compaction badges.
 *  Returns empty string if no meaningful telemetry exists.
 */
function mergeTelemetryHtml(tel, alive) {
  if (!tel) return '<span class="merge-no-data">—</span>';
  const hasData = (tel.inputTokens || 0) > 0 || (tel.outputTokens || 0) > 0 ||
    (tel.toolCalls || 0) > 0 || (tel.cost || 0) > 0;
  if (!hasData) return '<span class="merge-no-data">—</span>';

  let html = '<div class="merge-stats">';

  // Elapsed time
  if (tel.startedAt) {
    const elapsed = Date.now() - tel.startedAt;
    html += `<span class="worker-stat" title="Merge elapsed">⏱ ${formatDuration(elapsed)}</span>`;
  }

  // Tool calls
  if (tel.toolCalls > 0) {
    html += `<span class="worker-stat" title="Tool calls">🔧 ${tel.toolCalls}</span>`;
  }

  // Context %
  if (tel.contextPct > 0) {
    html += `<span class="worker-stat" title="Context window used">📊 ${Math.round(tel.contextPct)}%</span>`;
  }

  // Tokens + cost
  const inp = (tel.inputTokens || 0) + (tel.cacheReadTokens || 0);
  const out = tel.outputTokens || 0;
  const cost = tel.cost || 0;
  if (inp > 0 || out > 0) {
    let tokenStr = `↑${formatTokens(inp)} ↓${formatTokens(out)}`;
    if (cost > 0) tokenStr += ` ${formatCost(cost)}`;
    html += `<span class="worker-stat" title="Tokens">🪙 ${tokenStr}</span>`;
  }

  // Current tool (if alive/active) or last tool (completed merges)
  if (alive && tel.currentTool) {
    html += `<span class="worker-stat worker-last-tool" title="Current tool">${escapeHtml(tel.currentTool)}</span>`;
  } else if (!alive && tel.lastTool) {
    html += `<span class="worker-stat worker-last-tool" title="Last tool">${escapeHtml(tel.lastTool)}</span>`;
  }

  // Retry/compaction badges (reuse shared helper)
  html += telemetryBadgesHtml(tel);

  html += '</div>';
  return html;
}

function renderMergeAgents(batch, sessions) {
  const mergeResults = batch?.mergeResults || [];
  const sessionSet = new Set(sessions || []);
  const showRepos = knownRepos.length >= 2;
  const telemetry = currentData?.telemetry || {};

  // Check for active merge sessions (convention: {prefix}-{opId}-merge-{N})
  const mergeSessions = (sessions || []).filter(s => s.includes("-merge-"));

  // Derive merge session name from lane session naming pattern.
  // Lane sessions: "{prefix}-{opId}-lane-{N}", merge sessions: "{prefix}-{opId}-merge-{N}".
  // Extract the prefix-opId part from the first lane and use it to construct merge names.
  const lanes = batch?.lanes || [];
  let mergePrefix = "orch-merge"; // fallback for legacy/unknown patterns
  if (lanes.length > 0 && lanes[0].laneSessionId) {
    const laneName = lanes[0].laneSessionId;
    const laneMatch = laneName.match(/^(.+)-lane-\d+$/);
    if (laneMatch) {
      mergePrefix = laneMatch[1] + "-merge";
    }
  }
  // Helper: get merge session name for a merge number
  const getMergeSessionName = (mergeNum) => `${mergePrefix}-${mergeNum}`;

  if (mergeResults.length === 0 && mergeSessions.length === 0) {
    $mergeBody.innerHTML = '<div class="empty-state">No merge agents active</div>';
    return;
  }

  let html = '<table class="merge-table"><thead><tr>';
  html += '<th>Wave</th><th>Status</th><th>Session</th><th>Telemetry</th><th>Session ID</th><th>Details</th>';
  html += '</tr></thead><tbody>';

  // Track sessions shown in wave result rows so we don't duplicate them below
  const shownSessions = new Set();

  // Show merge results
  for (const mr of mergeResults) {
    // Repo filtering: if a repo is selected and this merge has repoResults,
    // check if the selected repo is among them
    const repoResults = mr.repoResults || [];
    if (selectedRepo && showRepos && repoResults.length >= 1) {
      const hasSelectedRepo = repoResults.some(rr => rr.repoId === selectedRepo);
      if (!hasSelectedRepo) continue;
    }

    const statusCls = mr.status === "succeeded" ? "status-succeeded"
      : mr.status === "partial" ? "status-stalled"
      : "status-failed";

    // Merge session mapping: derive from lane numbers involved in this wave.
    // Merge sessions are named by lane number (e.g., ...-merge-1), not wave index.
    // Extract lane numbers from repoResults or from batch tasks for this wave.
    const waveLaneNums = new Set();
    const repoResults2 = mr.repoResults || [];
    for (const rr of repoResults2) {
      for (const ln of (rr.laneNumbers || [])) waveLaneNums.add(ln);
    }
    // Fallback: find lane numbers from tasks assigned to this wave
    if (waveLaneNums.size === 0 && batch.wavePlan && batch.wavePlan[mr.waveIndex]) {
      const waveTaskIds = new Set(batch.wavePlan[mr.waveIndex]);
      for (const t of (batch.tasks || [])) {
        if (waveTaskIds.has(t.taskId) && t.laneNumber != null) {
          waveLaneNums.add(t.laneNumber);
        }
      }
    }
    // Find alive merge sessions matching the wave's lane numbers
    let effectiveSession = null;
    for (const ln of waveLaneNums) {
      const candidate = getMergeSessionName(ln);
      if (sessionSet.has(candidate) && !shownSessions.has(candidate)) {
        effectiveSession = candidate;
        break;
      }
    }
    // Fallback: any unshown alive merge session
    if (!effectiveSession) {
      effectiveSession = mergeSessions.find(s => sessionSet.has(s) && !shownSessions.has(s)) || null;
    }
    const effectiveAlive = !!effectiveSession;
    if (effectiveSession) shownSessions.add(effectiveSession);

    // TP-178: Find merge telemetry precisely using waveIndex (#498).
    // First try matching by waveIndex from the telemetry entries (injected from merge snapshots).
    // Then fall back to session-based matching (lane numbers), but never use a
    // catch-all fallback that grabs any merge session's telemetry.
    let mergeTel = null;
    // Priority 1: Match by waveIndex in telemetry entries
    for (const [telKey, tel] of Object.entries(telemetry)) {
      if (tel._source === "merge-snapshot" && tel.waveIndex === mr.waveIndex) {
        mergeTel = tel;
        break;
      }
    }
    // Priority 2: Match by lane number session
    if (!mergeTel) {
      for (const ln of waveLaneNums) {
        const candidate = getMergeSessionName(ln);
        if (telemetry[candidate]) { mergeTel = telemetry[candidate]; break; }
      }
    }
    // Priority 3: Effective session telemetry only (no catch-all fallback)
    if (!mergeTel && effectiveSession) mergeTel = telemetry[effectiveSession] || null;

    html += `<tr>`;
    html += `<td class="merge-wave-cell">Wave ${mr.waveIndex + 1}</td>`;
    html += `<td><span class="status-badge ${statusCls}">${mr.status}</span></td>`;
    html += `<td class="merge-session-cell">${effectiveAlive ? escapeHtml(effectiveSession) : "—"}</td>`;
    // Full telemetry cell
    html += `<td class="merge-telemetry-cell">${mergeTelemetryHtml(mergeTel, effectiveAlive)}</td>`;
    html += `<td>`;
    html += '<span class="merge-no-data">—</span>';
    html += `</td>`;
    html += `<td class="merge-detail-cell">${mr.failureReason ? escapeHtml(mr.failureReason) : "—"}</td>`;
    html += `</tr>`;

    // Per-repo sub-rows: show when workspace mode has repo results
    if (showRepos && repoResults.length >= 1) {
      const displayRepos = selectedRepo
        ? repoResults.filter(rr => rr.repoId === selectedRepo)
        : repoResults;

      for (const rr of displayRepos) {
        const rrStatusCls = rr.status === "succeeded" ? "status-succeeded"
          : rr.status === "partial" ? "status-stalled"
          : "status-failed";
        const rrLanes = (rr.laneNumbers || []).map(n => `L${n}`).join(", ") || "—";
        const rrDetail = rr.failureReason ? escapeHtml(rr.failureReason) : "—";

        html += `<tr class="merge-repo-row">`;
        html += `<td>${repoBadgeHtml(rr.repoId)}</td>`;
        html += `<td><span class="status-badge ${rrStatusCls}">${rr.status}</span></td>`;
        html += `<td class="merge-session-cell">${rrLanes}</td>`;
        html += `<td></td>`; /* telemetry placeholder */
        html += `<td></td>`; /* attach placeholder */
        html += `<td class="merge-detail-cell">${rrDetail}</td>`;
        html += `</tr>`;
      }
    }
  }

  // Show active merge sessions not yet in results
  for (const sess of mergeSessions) {
    if (shownSessions.has(sess)) continue;

    const sessTel = telemetry[sess] || null;
    html += `<tr>`;
    html += `<td class="merge-wave-cell">—</td>`;
    html += `<td><span class="status-badge status-running"><span class="status-dot running"></span> merging</span></td>`;
    html += `<td class="merge-session-cell">${escapeHtml(sess)}</td>`;
    // Full telemetry cell for active merge session
    html += `<td class="merge-telemetry-cell">${mergeTelemetryHtml(sessTel, true)}</td>`;
    html += `<td>—</td>`;
    html += `<td>—</td>`;
    html += `</tr>`;
  }

  html += '</tbody></table>';
  $mergeBody.innerHTML = html;
}

// ─── Render: Runtime V2 Agents (TP-107) ─────────────────────────────────────

function renderAgentsPanel(registry) {
  const $panel = document.getElementById('agents-panel');
  const $body = document.getElementById('agents-body');
  if (!$panel || !$body) return;

  if (!registry || !registry.agents || Object.keys(registry.agents).length === 0) {
    $panel.style.display = 'none';
    return;
  }

  $panel.style.display = '';
  const agents = Object.values(registry.agents);
  let html = '<div class="agents-grid">';

  for (const agent of agents) {
    const isCrash = ['crashed', 'timed_out'].includes(agent.status);
    const isTerminal = ['exited', 'crashed', 'timed_out', 'killed'].includes(agent.status);
    const statusClass = isTerminal ? (isCrash ? 'agent-terminal agent-crashed' : 'agent-terminal') : 'agent-live';
    const icon = isCrash ? '\u{1F534}' : (isTerminal ? '\u26AA' : '\u{1F7E2}');
    // Display label: exited and killed both show as 'shutdown' — the mechanism is an
    // implementation detail. Only crashed/timed_out warrant a different label.
    const displayStatus = (agent.status === 'exited' || agent.status === 'killed') ? 'shutdown'
      : agent.status === 'timed_out' ? 'timed out'
      : agent.status;
    const elapsed = agent.startedAt ? Math.round((Date.now() - agent.startedAt) / 1000) : 0;
    const elapsedStr = elapsed > 0 ? formatDuration(elapsed * 1000) : '';

    html += `<div class="agent-card ${statusClass}">`;
    html += `<div class="agent-header">${icon} <strong>${escapeHtml(agent.agentId)}</strong></div>`;
    html += `<div class="agent-meta">`;
    html += `<span class="agent-badge">${escapeHtml(agent.role)}</span>`;
    if (agent.laneNumber != null) html += `<span class="agent-badge">lane ${agent.laneNumber}</span>`;
    if (agent.taskId) html += `<span class="agent-badge">${escapeHtml(agent.taskId)}</span>`;
    html += `<span class="agent-badge agent-status-${agent.status}">${escapeHtml(displayStatus)}</span>`;
    if (elapsedStr && !isTerminal) html += `<span class="agent-badge">${elapsedStr}</span>`;
    html += `</div>`;
    html += `</div>`;
  }

  html += '</div>';
  $body.innerHTML = html;
}

// ─── Render: Mailbox Messages (TP-107) ──────────────────────────────────────

function renderMessagesPanel(mailbox) {
  const $panel = document.getElementById('messages-panel');
  const $body = document.getElementById('messages-body');
  if (!$panel || !$body) return;

  // TP-093: event-authoritative model — prefer audit events, fallback to directory scan
  const auditEvents = mailbox?.auditEvents || [];
  const dirMessages = mailbox?.messages || [];
  const hasData = auditEvents.length > 0 || dirMessages.length > 0;

  if (!mailbox || !hasData) {
    $panel.style.display = 'none';
    return;
  }

  $panel.style.display = '';
  let html = '<div class="messages-list">';

  if (auditEvents.length > 0) {
    // Primary: render from audit event stream (authoritative, durable)
    for (const evt of auditEvents) {
      html += renderMailboxAuditEvent(evt);
    }
  } else {
    // Fallback: render from directory scan (legacy compatibility)
    for (const msg of dirMessages) {
      html += renderMailboxDirMessage(msg);
    }
  }

  html += '</div>';
  $body.innerHTML = html;
}

/** Render a single mailbox audit event (events.jsonl row). */
function renderMailboxAuditEvent(evt) {
  const ts = evt.ts ? new Date(evt.ts).toLocaleTimeString() : '';
  const type = evt.type || '';

  let direction = '';
  let statusBadge = '';
  let typeBadge = '';
  let preview = '';

  if (type === 'message_sent') {
    const isBroadcast = evt.broadcast;
    direction = isBroadcast ? '\u2192 all (broadcast)' : `\u2192 ${escapeHtml(evt.to || '')}`;
    statusBadge = '<span class="msg-badge msg-delivered">sent</span>';
    typeBadge = `<span class="msg-badge msg-type">${escapeHtml(evt.messageType || '')}</span>`;
    preview = evt.contentPreview || '';
  } else if (type === 'message_delivered') {
    direction = `\u2192 ${escapeHtml(evt.to || '')}`;
    statusBadge = evt.broadcast
      ? '<span class="msg-badge msg-delivered">broadcast delivered</span>'
      : '<span class="msg-badge msg-delivered">delivered</span>';
    typeBadge = evt.messageType ? `<span class="msg-badge msg-type">${escapeHtml(evt.messageType)}</span>` : '';
    preview = evt.contentPreview || '';
  } else if (type === 'message_replied' || type === 'message_escalated') {
    direction = `\u2190 ${escapeHtml(evt.from || '')}`;
    statusBadge = type === 'message_escalated'
      ? '<span class="msg-badge msg-reply">escalation</span>'
      : '<span class="msg-badge msg-reply">reply</span>';
    typeBadge = evt.messageType ? `<span class="msg-badge msg-type">${escapeHtml(evt.messageType)}</span>` : '';
    preview = evt.contentPreview || '';
  } else if (type === 'message_rate_limited') {
    direction = `\u2192 ${escapeHtml(evt.to || '')}`;
    statusBadge = '<span class="msg-badge msg-rate-limited">rate limited</span>';
    const waitSec = evt.retryAfterMs ? Math.ceil(evt.retryAfterMs / 1000) : '?';
    preview = `${evt.reason || 'Rate limited'} (retry in ${waitSec}s)`;
  } else {
    // Unknown event type — render generically
    direction = evt.from ? `${escapeHtml(evt.from)}` : '';
    preview = JSON.stringify(evt);
  }

  return `<div class="message-row">`
    + `<span class="msg-time">${escapeHtml(ts)}</span>`
    + `<span class="msg-direction">${direction}</span>`
    + typeBadge
    + statusBadge
    + `<span class="msg-preview">${escapeHtml(preview)}</span>`
    + `</div>`;
}

/** Render a single directory-scanned message (legacy fallback). */
function renderMailboxDirMessage(msg) {
  const ts = msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString() : '';
  // TP-093: for broadcast per-agent ack markers, show recipient identity instead of "_broadcast"
  let direction;
  if (msg.to === 'supervisor') {
    direction = '\u2190 supervisor';
  } else if (msg._isBroadcast && msg._agentDir && msg._agentDir !== '_broadcast') {
    direction = `\u2192 ${escapeHtml(msg._agentDir)} (broadcast)`;
  } else {
    direction = `\u2192 ${escapeHtml(msg.to || msg._agentDir || '')}`;
  }
  let statusBadge;
  if (msg._status === 'pending') statusBadge = '<span class="msg-badge msg-pending">pending</span>';
  else if (msg._status === 'delivered') statusBadge = '<span class="msg-badge msg-delivered">delivered</span>';
  else if (msg._status === 'reply') statusBadge = '<span class="msg-badge msg-reply">reply</span>';
  else if (msg._status === 'reply-acked') statusBadge = '<span class="msg-badge msg-delivered">reply (acked)</span>';
  else statusBadge = '';
  const typeBadge = `<span class="msg-badge msg-type">${escapeHtml(msg.type || '')}</span>`;
  const preview = msg.content || '';
  const broadcastTag = msg._isBroadcast ? ' <span class="msg-badge msg-type">broadcast</span>' : '';

  return `<div class="message-row">`
    + `<span class="msg-time">${escapeHtml(ts)}</span>`
    + `<span class="msg-direction">${direction}</span>`
    + typeBadge
    + statusBadge
    + broadcastTag
    + `<span class="msg-preview">${escapeHtml(preview)}</span>`
    + `</div>`;
}


// ─── Render: Errors ─────────────────────────────────────────────────────────

function renderErrors(batch) {
  const errors = batch?.errors || [];
  if (errors.length === 0) {
    $errorsPanel.style.display = "none";
    return;
  }
  $errorsPanel.style.display = "";
  let html = "";
  for (const err of errors.slice(-10)) {
    const msg = typeof err === "string" ? err : err.message || JSON.stringify(err);
    html += `<div class="error-item"><span class="error-bullet">●</span><span class="error-text">${escapeHtml(msg)}</span></div>`;
  }
  $errorsBody.innerHTML = html;
}

// ─── Render: No Batch ───────────────────────────────────────────────────────

let noBatchRendered = false;

function renderNoBatch() {
  if (noBatchRendered) return;
  noBatchRendered = true;

  // Hide repo filter when no batch
  updateRepoFilter([]);

  // Hide live panels, show history panel
  const $lanesPanel = document.getElementById("lanes-tasks-panel");
  const $mergePanel = document.getElementById("merge-panel");
  if ($lanesPanel) $lanesPanel.style.display = "none";
  if ($mergePanel) $mergePanel.style.display = "none";
  if ($errorsPanel) $errorsPanel.style.display = "none";

  // Show a placeholder while history loads. loadHistoryList() (called in
  // render() just before this) is async — the fresh list may not be
  // available yet. The loadHistoryList callback will replace this with
  // the actual latest entry once it resolves.
  if (!viewingHistoryId) {
    $historyBody.innerHTML = `
      <div class="no-batch">
        <div class="no-batch-icon">⏳</div>
        <div class="no-batch-title">Batch complete</div>
        <div class="no-batch-hint">Loading history…</div>
      </div>`;
    $historyPanel.style.display = "";
  }
}

function ensureContentPanels() {
  if (noBatchRendered) {
    // A live batch started — restore panels without full page reload.
    // Reset the no-batch state and re-show content panels.
    noBatchRendered = false;
    const $lanesPanel = document.getElementById("lanes-tasks-panel");
    const $mergePanel = document.getElementById("merge-panel");
    if ($lanesPanel) $lanesPanel.style.display = "";
    if ($mergePanel) $mergePanel.style.display = "";
    if ($errorsPanel) $errorsPanel.style.display = "";
    $historyPanel.style.display = "none";
    viewingHistoryId = null;
    // Re-render with current data
    if (currentData) render(currentData);
  }
}

// ─── Supervisor Panel ───────────────────────────────────────────────────────

const $supervisorPanel        = $("supervisor-panel");
const $supervisorStatusBadge  = $("supervisor-status-badge");
const $supervisorCollapseBtn  = $("supervisor-collapse-btn");
const $supervisorPanelBody    = $("supervisor-panel-body");
const $supervisorStatusSection       = $("supervisor-status-section");
const $supervisorConversationSection = $("supervisor-conversation-section");
const $supervisorActionsSection      = $("supervisor-actions-section");
const $supervisorSummarySection      = $("supervisor-summary-section");

let supervisorCollapsed = false;

// Toggle collapse on header click
$("supervisor-panel-toggle").addEventListener("click", (e) => {
  // Don't toggle when clicking the collapse button itself (it has its own handler)
  if (e.target.id === "supervisor-collapse-btn") return;
  toggleSupervisorPanel();
});

$supervisorCollapseBtn.addEventListener("click", toggleSupervisorPanel);

function toggleSupervisorPanel() {
  supervisorCollapsed = !supervisorCollapsed;
  $supervisorPanelBody.style.display = supervisorCollapsed ? "none" : "";
  $supervisorCollapseBtn.textContent = supervisorCollapsed ? "▸" : "▾";
}

/** Determine supervisor status from lock data. */
function supervisorStatusInfo(lock) {
  if (!lock) return { status: "inactive", label: "Inactive", cls: "supervisor-inactive" };
  if (lock.stale) return { status: "stale", label: "Stale", cls: "supervisor-stale" };
  return { status: "active", label: "Active", cls: "supervisor-active" };
}

/** Format a timestamp for the supervisor timeline. */
function formatSupervisorTime(ts) {
  if (!ts) return "";
  const d = new Date(ts);
  return d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
}

/** Render the supervisor status indicator section. */
function renderSupervisorStatus(supervisor) {
  const lock = supervisor.lock;
  const info = supervisorStatusInfo(lock);

  // Update the header badge
  $supervisorStatusBadge.textContent = info.label;
  $supervisorStatusBadge.className = `supervisor-status-badge ${info.cls}`;

  let html = '<div class="supervisor-status-row">';
  html += `<span class="supervisor-status-dot ${info.cls}"></span>`;
  html += `<span class="supervisor-status-label">${info.label}</span>`;

  if (lock) {
    if (lock.autonomy) {
      html += `<span class="supervisor-autonomy-badge">${escapeHtml(lock.autonomy)}</span>`;
    }
    if (lock.heartbeat) {
      html += `<span class="supervisor-heartbeat" title="Last heartbeat">♡ ${relativeTime(lock.heartbeat)}</span>`;
    }
    if (lock.sessionId) {
      html += `<span class="supervisor-session-id" title="Session: ${escapeHtml(lock.sessionId)}">${escapeHtml(lock.sessionId)}</span>`;
    }
  }

  html += '</div>';
  $supervisorStatusSection.innerHTML = html;
}

/** Render the conversation history section. */
function renderSupervisorConversation(supervisor) {
  const conversation = supervisor.conversation || [];

  if (conversation.length === 0) {
    $supervisorConversationSection.innerHTML = '';
    return;
  }

  let html = '<div class="supervisor-subsection-title">Conversation</div>';
  html += '<div class="supervisor-conversation-list">';

  for (const entry of conversation) {
    const time = formatSupervisorTime(entry.ts || entry.timestamp);
    const role = entry.role || "unknown";
    const content = entry.content || entry.message || "";
    const roleCls = role === "operator" ? "conv-role-operator" : "conv-role-supervisor";
    const roleLabel = role === "operator" ? "Operator" : "Supervisor";

    html += `<div class="supervisor-conv-entry ${roleCls}">`;
    html += `  <div class="supervisor-conv-header">`;
    html += `    <span class="supervisor-conv-role">${roleLabel}</span>`;
    if (time) html += `<span class="supervisor-conv-time">${time}</span>`;
    html += `  </div>`;
    html += `  <div class="supervisor-conv-content">${escapeHtml(content)}</div>`;
    html += `</div>`;
  }

  html += '</div>';
  $supervisorConversationSection.innerHTML = html;
}

/**
 * Human-readable labels for supervisor recovery action identifiers.
 * The supervisor LLM writes snake_case action names to actions.jsonl.
 * This map translates them to operator-friendly labels for the dashboard.
 */
const RECOVERY_ACTION_LABELS = {
  // Conflict resolution
  conflict_resolve_checkout_ours:   "Auto-resolved merge conflict (kept task changes)",
  conflict_resolve_checkout_theirs: "Auto-resolved merge conflict (kept base changes)",
  conflict_resolve_manual:          "Manual conflict resolution applied",

  // Merge agent
  merge_retry:                      "Retried merge agent",
  merge_session_kill:               "Terminated stalled merge agent",
  merge_force:                      "Forced merge with partial results",

  // Worker / task
  worker_wrap_up:                   "Sent wrap-up signal to stalled worker",
  task_retry:                       "Retried failed task",
  task_skip:                        "Skipped task — unblocked dependents",
  wave_force_merge:                 "Force-merged wave with mixed results",

  // Git / worktree
  lock_clear:                       "Cleared stale git lock file",
  worktree_remove:                  "Removed stale worktree",
  worktree_prune:                   "Pruned stale worktrees",

  // Batch lifecycle
  abort_hard:                       "Hard-aborted batch",
  batch_resume:                     "Resumed batch after recovery",
  supervisor_handoff:               "Supervisor session handoff",

  // Diagnostics (usually not shown — filtered as non-recovery)
  initial_status_check:             "Checked initial batch status",
  completion_status_check:          "Verified batch completion status",
  read_state:                       "Read batch state",
};

/** Format a recovery action type string into a human-readable label. */
function formatRecoveryActionLabel(type) {
  return RECOVERY_ACTION_LABELS[type] || type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}

/** Merge supervisor actions and Tier 0 recovery events into a unified timeline.
 *  Actions from actions.jsonl and recovery events from events.jsonl are combined
 *  and sorted chronologically (per R002: show both Tier 0 and supervisor actions).
 */
function buildRecoveryTimeline(supervisor) {
  const actions = (supervisor.actions || []).map(a => ({
    ts: a.ts || a.timestamp || 0,
    tier: a.tier,
    type: a.type || a.action || "unknown",
    target: a.target || a.lane || a.taskId || "",
    outcome: a.outcome || a.result || "",
    reason: a.reason || "",
    context: a.context || "",
    detail: a.detail || "",
    source: "action"
  }));

  // Include Tier 0 recovery events from events.jsonl
  const events = (supervisor.events || [])
    .filter(e => e.tier === 0 || e.type === "recovery" || e.type === "tier0_recovery")
    .map(e => ({
      ts: e.ts || e.timestamp || 0,
      tier: e.tier != null ? e.tier : 0,
      type: e.type || "event",
      target: e.target || e.lane || e.taskId || "",
      outcome: e.outcome || e.result || "",
      reason: e.reason || e.message || "",
      context: e.context || "",
      detail: e.detail || "",
      source: "event"
    }));

  const timeline = [...actions, ...events];
  timeline.sort((a, b) => {
    const tA = typeof a.ts === "string" ? new Date(a.ts).getTime() : a.ts;
    const tB = typeof b.ts === "string" ? new Date(b.ts).getTime() : b.ts;
    return tA - tB;
  });

  return timeline;
}

/** Render the recovery action timeline section. */
function renderSupervisorActions(supervisor) {
  const timeline = buildRecoveryTimeline(supervisor);

  if (timeline.length === 0) {
    $supervisorActionsSection.innerHTML = '';
    return;
  }

  let html = '<div class="supervisor-subsection-title">Recovery Actions</div>';
  html += '<div class="supervisor-timeline">';

  for (const entry of timeline) {
    const time = formatSupervisorTime(entry.ts);
    const tier = entry.tier != null ? `T${entry.tier}` : "";
    const type = entry.type;
    const target = entry.target;
    const outcome = entry.outcome;
    const reason = entry.reason;
    const description = entry.context || entry.detail || "";

    const outcomeCls = outcome === "success" || outcome === "recovered"
      ? "action-success"
      : outcome === "failed" || outcome === "error"
        ? "action-failed"
        : "action-pending";

    html += `<div class="supervisor-action-entry">`;
    html += `  <div class="supervisor-action-left">`;
    html += `    <span class="supervisor-action-time">${time}</span>`;
    html += `    <span class="supervisor-action-dot ${outcomeCls}"></span>`;
    html += `  </div>`;
    html += `  <div class="supervisor-action-right">`;
    html += `    <div class="supervisor-action-header">`;
    if (tier) html += `<span class="supervisor-action-tier">${tier}</span>`;
    html += `      <span class="supervisor-action-type" title="${escapeHtml(type)}">${escapeHtml(formatRecoveryActionLabel(type))}</span>`;
    if (target) html += `<span class="supervisor-action-target">${escapeHtml(target)}</span>`;
    if (outcome) html += `<span class="supervisor-action-outcome ${outcomeCls}">${escapeHtml(outcome)}</span>`;
    html += `    </div>`;
    if (description) {
      const fullDesc = escapeHtml(description);
      const truncated = description.length > 100 ? escapeHtml(description.slice(0, 100)) + "\u2026" : fullDesc;
      html += `<div class="supervisor-action-description" title="${fullDesc}">${truncated}</div>`;
    }
    if (reason) {
      html += `<div class="supervisor-action-reason">${escapeHtml(reason)}</div>`;
    }
    html += `  </div>`;
    html += `</div>`;
  }

  html += '</div>';
  $supervisorActionsSection.innerHTML = html;
}

/** Render the batch summary section (from summary.md). */
function renderSupervisorSummary(supervisor) {
  const summary = supervisor.summary;

  if (!summary) {
    $supervisorSummarySection.innerHTML = '';
    return;
  }

  let html = '<div class="supervisor-subsection-title">Batch Summary</div>';
  html += '<div class="supervisor-summary-content">';
  // Render the summary markdown using the STATUS.md renderer (reuse)
  const { html: renderedMd } = renderStatusMd(summary);
  html += renderedMd;
  html += '</div>';
  $supervisorSummarySection.innerHTML = html;
}

/** Main supervisor panel render function. */
function renderSupervisor(data) {
  const supervisor = data.supervisor;

  if (!supervisor) {
    $supervisorPanel.style.display = "none";
    return;
  }

  $supervisorPanel.style.display = "";

  renderSupervisorStatus(supervisor);
  renderSupervisorConversation(supervisor);
  renderSupervisorActions(supervisor);
  renderSupervisorSummary(supervisor);
}

// ─── Full Render ────────────────────────────────────────────────────────────

// ─── Current data (stored for conversation viewer) ──────────────────────────

let currentData = null;

function render(data) {
  currentData = data;
  const batch = data.batch;
  const sessions = data.sessions ?? data.tmuxSessions ?? [];

  $lastUpdate.textContent = new Date().toLocaleTimeString();

  if (!batch) {
    // TP-178: Clear viewer when batch disappears (#487)
    if (lastBatchId && viewerMode) closeViewer();
    lastBatchId = null;
    renderHeader(null);
    renderSummary(null);
    renderSupervisor(data);
    // Refresh history list (batch may have just finished)
    if (!noBatchRendered) loadHistoryList();
    renderNoBatch();
    return;
  }

  // TP-178: Detect batchId change — clear stale viewer state (#487)
  if (batch.batchId && lastBatchId && batch.batchId !== lastBatchId && viewerMode) {
    closeViewer();
  }
  lastBatchId = batch.batchId || null;

  // Live batch is running — hide history panel, reset viewing state
  if (viewingHistoryId) {
    viewingHistoryId = null;
    $historyPanel.style.display = "none";
    $historySelect.value = "";
  }

  if (noBatchRendered) {
    ensureContentPanels();
    return;
  }

  renderHeader(batch);
  renderSummary(batch);

  // Update repo filter based on current batch data
  const repos = buildRepoSet(batch);
  updateRepoFilter(repos);

  renderSupervisor(data);
  renderLanesTasks(batch, sessions);
  renderMergeAgents(batch, sessions);
  // TP-107: Runtime V2 panels
  renderAgentsPanel(data.runtimeRegistry);
  renderMessagesPanel(data.mailbox);
  renderErrors(batch);

  const taskCount = (batch.tasks || []).length;
  const laneCount = (batch.lanes || []).length;
  const waveCount = (batch.wavePlan || []).length;
  $footerInfo.textContent = `${taskCount} tasks · ${laneCount} lanes · ${waveCount} waves`;
}

// ─── SSE Connection ─────────────────────────────────────────────────────────

let eventSource = null;
let reconnectTimer = null;

function connect() {
  if (eventSource) eventSource.close();

  eventSource = new EventSource("/api/stream");

  eventSource.onopen = () => {
    $connDot.className = "connection-dot connected";
    $connDot.title = "Connected";
    clearTimeout(reconnectTimer);
  };

  eventSource.onmessage = (event) => {
    try {
      const data = JSON.parse(event.data);
      render(data);
    } catch (err) {
      console.error("Failed to parse SSE data:", err);
    }
  };

  eventSource.onerror = () => {
    $connDot.className = "connection-dot disconnected";
    $connDot.title = "Disconnected — reconnecting…";
    eventSource.close();
    reconnectTimer = setTimeout(connect, 3000);
  };
}

// ─── Viewer Panel (Conversation + STATUS.md) ────────────────────────────────

const $terminalPanel = document.getElementById("terminal-panel");
const $terminalTitle = document.getElementById("terminal-title");
const $terminalBody  = document.getElementById("terminal-body");
const $terminalClose = document.getElementById("terminal-close");
const $autoScrollCheckbox = document.getElementById("auto-scroll-checkbox");
const $autoScrollText = document.getElementById("auto-scroll-text");

// Viewer state
let viewerTimer = null;
let autoScrollOn = false;
let isProgrammaticScroll = false;

// Conversation append-only state
let convRenderedLines = 0;

// STATUS.md diff-and-skip state
let lastStatusMdText = "";

// ── Open conversation viewer (TP-107: V2 events preferred, legacy fallback) ──

/**
 * Resolve a lane session ID to a Runtime V2 agent ID via the registry.
 * Returns null if no V2 registry data is available.
 */
function resolveV2AgentId(sessionName) {
  if (!currentData || !currentData.runtimeRegistry || !currentData.runtimeRegistry.agents) return null;
  const agents = currentData.runtimeRegistry.agents;
  // Direct match on agentId
  if (agents[sessionName]) return sessionName;
  // Match by session ID prefix + "-worker" suffix (common V2 naming)
  const workerKey = sessionName + '-worker';
  if (agents[workerKey]) return workerKey;
  // Search by laneNumber match from lane snapshots
  for (const [id, agent] of Object.entries(agents)) {
    if (agent.role === 'worker' && agent.laneNumber != null) {
      const m = sessionName.match(/lane-(\d+)/);
      if (m && parseInt(m[1]) === agent.laneNumber) return id;
    }
  }
  return null;
}

let viewerV2AgentId = null; // Runtime V2 agent ID for current conversation view

function viewConversation(sessionName) {
  // Toggle off if already viewing this session
  if (viewerMode === 'conversation' && viewerTarget === sessionName && $terminalPanel.style.display !== 'none') {
    closeViewer();
    return;
  }

  closeViewer();

  viewerMode = 'conversation';
  viewerTarget = sessionName;
  autoScrollOn = true;
  convRenderedLines = 0;

  // TP-107: Resolve V2 agent ID for events endpoint
  const v2AgentId = resolveV2AgentId(sessionName);
  viewerV2AgentId = v2AgentId;

  const label = v2AgentId || sessionName;
  $terminalTitle.textContent = `Worker Conversation — ${label}`;
  $autoScrollText.textContent = 'Follow feed';
  $autoScrollCheckbox.checked = true;
  $terminalPanel.style.display = '';
  $terminalBody.innerHTML = '<div class="conv-stream"></div>';

  pollConversation();
  viewerTimer = setInterval(pollConversation, 2000);

  $terminalPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function pollConversation() {
  // TP-107: prefer V2 agent events when available, fallback to legacy conversation
  const endpoint = viewerV2AgentId
    ? `/api/agent-events/${encodeURIComponent(viewerV2AgentId)}`
    : `/api/conversation/${encodeURIComponent(viewerTarget)}`;
  const isV2 = !!viewerV2AgentId;

  fetch(endpoint)
    .then(r => isV2 ? r.json() : r.text())
    .then(data => {
      if (isV2) {
        renderV2AgentEvents(data);
        return;
      }
      // Legacy: data is JSONL text
      const text = data;
      if (!text.trim()) {
        if (convRenderedLines === 0) {
          $terminalBody.innerHTML = '<div class="conv-empty">No conversation events yet…</div>';
        }
        return;
      }

      const lines = text.trim().split('\n');

      // File was reset (new task on same lane) — full re-render
      if (lines.length < convRenderedLines) {
        convRenderedLines = 0;
        const container = $terminalBody.querySelector('.conv-stream');
        if (container) container.innerHTML = '';
      }

      // Nothing new
      if (lines.length === convRenderedLines) return;

      // Ensure container exists
      let container = $terminalBody.querySelector('.conv-stream');
      if (!container) {
        $terminalBody.innerHTML = '';
        container = document.createElement('div');
        container.className = 'conv-stream';
        $terminalBody.appendChild(container);
      }

      // Append only new events
      const newLines = lines.slice(convRenderedLines);
      for (const line of newLines) {
        try {
          const event = JSON.parse(line);
          const html = renderConvEvent(event);
          if (html) container.insertAdjacentHTML('beforeend', html);
        } catch { continue; }
      }

      convRenderedLines = lines.length;

      // Auto-scroll to bottom
      if (autoScrollOn) {
        isProgrammaticScroll = true;
        $terminalBody.scrollTop = $terminalBody.scrollHeight;
        requestAnimationFrame(() => { isProgrammaticScroll = false; });
      }
    })
    .catch(() => {});
}

// ── Runtime V2 agent event renderer (TP-107) ──────────────────────────────

// Stable cursor for V2 event rendering.
// Uses a signature string from the last rendered event so the sliding window
// (server caps at 300) doesn't stall when new tail events push older ones out.
let v2LastCursor = null; // signature of last rendered event
let v2FirstRender = true;

function v2EventSignature(evt) {
  return `${evt.ts || 0}:${evt.type || ''}:${JSON.stringify(evt.payload || {}).slice(0, 80)}`;
}

function renderV2AgentEvents(events) {
  if (!Array.isArray(events) || events.length === 0) {
    if (v2FirstRender) {
      $terminalBody.innerHTML = '<div class="conv-empty">No agent events yet…</div>';
    }
    return;
  }

  let container = $terminalBody.querySelector('.conv-stream');

  if (v2FirstRender || !container) {
    // First load or container missing: full render
    $terminalBody.innerHTML = '';
    container = document.createElement('div');
    container.className = 'conv-stream';
    $terminalBody.appendChild(container);
    for (const evt of events) {
      const html = renderV2Event(evt);
      if (html) container.insertAdjacentHTML('beforeend', html);
    }
    v2LastCursor = v2EventSignature(events[events.length - 1]);
    v2FirstRender = false;
  } else {
    // Incremental: find first unseen event after cursor
    let cursorIdx = -1;
    if (v2LastCursor) {
      for (let i = events.length - 1; i >= 0; i--) {
        if (v2EventSignature(events[i]) === v2LastCursor) {
          cursorIdx = i;
          break;
        }
      }
    }

    if (cursorIdx === -1) {
      // Cursor not found (rotation/restart): full re-render
      container.innerHTML = '';
      for (const evt of events) {
        const html = renderV2Event(evt);
        if (html) container.insertAdjacentHTML('beforeend', html);
      }
    } else if (cursorIdx < events.length - 1) {
      // Append only new events after cursor
      const newEvents = events.slice(cursorIdx + 1);
      for (const evt of newEvents) {
        const html = renderV2Event(evt);
        if (html) container.insertAdjacentHTML('beforeend', html);
      }
    } else {
      // No new events
      return;
    }

    v2LastCursor = v2EventSignature(events[events.length - 1]);
  }

  if (autoScrollOn) {
    isProgrammaticScroll = true;
    $terminalBody.scrollTop = $terminalBody.scrollHeight;
    requestAnimationFrame(() => { isProgrammaticScroll = false; });
  }
}

function renderV2Event(evt) {
  const ts = evt.ts ? new Date(evt.ts).toLocaleTimeString() : '';
  const type = evt.type || 'unknown';

  switch (type) {
    case 'assistant_message':
      return `<div class="conv-event conv-assistant"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">assistant</span><span class="conv-text">${escapeHtml((evt.payload?.text || '').slice(0, 2000))}</span></div>`;
    case 'prompt_sent':
      return `<div class="conv-event conv-user"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">user</span><span class="conv-text">${escapeHtml((evt.payload?.text || '').slice(0, 2000))}</span></div>`;
    case 'tool_call':
      return `<div class="conv-event conv-tool"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">tool</span><span class="conv-text">${escapeHtml(evt.payload?.tool || type)} ${escapeHtml((evt.payload?.path || '').slice(0, 200))}</span></div>`;
    case 'tool_result':
      return `<div class="conv-event conv-tool-result"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">result</span><span class="conv-text">${escapeHtml((evt.payload?.summary || '').slice(0, 500))}</span></div>`;
    case 'agent_started':
      return `<div class="conv-event conv-lifecycle"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">▶</span><span class="conv-text">Agent started (${escapeHtml(evt.role || '')} lane ${evt.laneNumber ?? '?'})</span></div>`;
    case 'agent_exited':
      return `<div class="conv-event conv-lifecycle"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">■</span><span class="conv-text">Agent exited (code ${evt.payload?.exitCode ?? '?'})</span></div>`;
    case 'agent_crashed':
    case 'agent_killed':
    case 'agent_timeout':
      return `<div class="conv-event conv-lifecycle conv-error"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">⚠</span><span class="conv-text">${escapeHtml(type)} ${escapeHtml(evt.payload?.reason || '')}</span></div>`;
    case 'message_delivered':
      return `<div class="conv-event conv-steer"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">✉</span><span class="conv-text">Steering: ${escapeHtml((evt.payload?.content || '').slice(0, 500))}</span></div>`;
    case 'context_pressure':
      return `<div class="conv-event conv-lifecycle"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">⚠</span><span class="conv-text">Context pressure: ${evt.payload?.pct ?? '?'}%</span></div>`;
    default:
      return `<div class="conv-event conv-lifecycle"><span class="conv-ts">${escapeHtml(ts)}</span><span class="conv-role">•</span><span class="conv-text">${escapeHtml(type)}</span></div>`;
  }
}

// ── Segment-Scoped STATUS.md Helpers (TP-176) ──────────────────────────────

/**
 * Resolve the active segment repoId for a given task.
 * Uses runtimeLaneSnapshots (active segment) and falls back to
 * taskSegmentProgress (batch state).
 * Returns { repoId, segmentInfo } or null if single-segment / unresolvable.
 */
function resolveActiveSegmentForTask(taskId) {
  if (!currentData) return null;
  const batch = currentData.batch;
  if (!batch) return null;
  const task = (batch.tasks || []).find(t => t.taskId === taskId);
  if (!task) return null;
  const segmentIds = Array.isArray(task.segmentIds) ? task.segmentIds.filter(id => typeof id === "string") : [];
  if (segmentIds.length <= 1) return null; // single-segment or no segments

  // Try to get active segment from runtime lane snapshots
  const v2Snapshots = currentData.runtimeLaneSnapshots || {};
  for (const snap of Object.values(v2Snapshots)) {
    if (snap && snap.taskId === taskId && snap.segmentId) {
      const parsed = parseSegmentId(snap.segmentId);
      if (parsed) {
        const idx = segmentIds.indexOf(snap.segmentId);
        return {
          repoId: parsed.repoId,
          segmentInfo: {
            index: idx >= 0 ? idx + 1 : null,
            total: segmentIds.length,
            repoId: parsed.repoId,
            segmentId: snap.segmentId,
          },
        };
      }
    }
  }

  // Fallback: use taskSegmentProgress (batch state)
  const segmentStatusMap = buildSegmentStatusMap(batch);
  const info = taskSegmentProgress(task, segmentStatusMap, null);
  if (info && info.repoId) {
    return { repoId: info.repoId, segmentInfo: info };
  }
  return null;
}

/**
 * Filter STATUS.md content to show only the active segment's blocks.
 * Within each `### Step N:` section, removes `#### Segment: <otherRepo>` blocks
 * and keeps only the block matching `activeRepoId`.
 * Non-step content (metadata, notes, reviews, etc.) is preserved.
 *
 * Returns the filtered markdown string, or the original if no segment markers found.
 */
function filterStatusMdForSegment(markdown, activeRepoId) {
  if (!activeRepoId) return markdown;
  const lines = markdown.split('\n');
  const result = [];
  let inStep = false;          // inside a ### Step section
  let inSegmentBlock = false;  // inside a #### Segment: <repo> block
  let segmentMatch = false;    // current segment block matches active repo
  let foundAnySegmentHeader = false;

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    // Detect step headers: ### Step N: ...
    if (/^###\s+Step\s+\d+/.test(line)) {
      inStep = true;
      inSegmentBlock = false;
      segmentMatch = false;
      result.push(line);
      continue;
    }

    // Detect non-step ### headers (e.g., ### Reviews, ### Notes)
    if (/^###\s+/.test(line) && !/^###\s+Step\s+\d+/.test(line)) {
      inStep = false;
      inSegmentBlock = false;
      segmentMatch = false;
      result.push(line);
      continue;
    }

    // Inside a step section, detect #### Segment: <repoId> headers
    if (inStep && /^####\s+Segment:\s*/.test(line)) {
      foundAnySegmentHeader = true;
      const segRepo = line.replace(/^####\s+Segment:\s*/, '').trim();
      inSegmentBlock = true;
      segmentMatch = (segRepo === activeRepoId);
      if (segmentMatch) {
        result.push(line);
      }
      continue;
    }

    // Detect any other #### header (ends current segment block)
    if (/^####\s+/.test(line)) {
      inSegmentBlock = false;
      segmentMatch = false;
      result.push(line);
      continue;
    }

    // If we're in a segment block, only include matching lines
    if (inSegmentBlock) {
      if (segmentMatch) {
        result.push(line);
      }
      continue;
    }

    // Outside segment blocks: keep the line
    result.push(line);
  }

  // If no segment headers were found, return original (fallback for single-segment)
  if (!foundAnySegmentHeader) return markdown;
  return result.join('\n');
}

// ── Open STATUS.md viewer ───────────────────────────────────────────────────

function viewStatusMd(taskId) {
  // Toggle off if already viewing this task
  if (viewerMode === 'status-md' && viewerTarget === taskId && $terminalPanel.style.display !== 'none') {
    closeViewer();
    return;
  }

  closeViewer();

  viewerMode = 'status-md';
  viewerTarget = taskId;
  autoScrollOn = false;
  lastStatusMdText = '';

  // TP-176: Include segment context in title for multi-segment tasks
  const segData = resolveActiveSegmentForTask(taskId);
  if (segData && segData.segmentInfo) {
    const label = segmentProgressText(segData.segmentInfo);
    $terminalTitle.textContent = `STATUS.md — ${taskId} · ${label}`;
  } else {
    $terminalTitle.textContent = `STATUS.md — ${taskId}`;
  }

  $autoScrollText.textContent = 'Track progress';
  $autoScrollCheckbox.checked = false;
  $terminalPanel.style.display = '';
  $terminalBody.innerHTML = '<div class="conv-empty">Loading…</div>';

  pollStatusMd();
  viewerTimer = setInterval(pollStatusMd, 2000);

  $terminalPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function pollStatusMd() {
  fetch(`/api/status-md/${encodeURIComponent(viewerTarget)}`)
    .then(r => {
      if (!r.ok) throw new Error('not found');
      return r.text();
    })
    .then(text => {
      // TP-176: Apply segment-scoped filtering for multi-segment tasks.
      // Re-resolve on each poll since the active segment may change.
      const segData = resolveActiveSegmentForTask(viewerTarget);
      let displayText = text;
      if (segData && segData.repoId) {
        displayText = filterStatusMdForSegment(text, segData.repoId);
        // Update title with current segment context (may change between polls)
        const label = segmentProgressText(segData.segmentInfo);
        $terminalTitle.textContent = `STATUS.md \u2014 ${viewerTarget} \u00b7 ${label}`;
      }

      // Diff-and-skip: no change, no DOM update
      if (displayText === lastStatusMdText) return;
      lastStatusMdText = displayText;

      const { html, hasLastChecked } = renderStatusMd(displayText);
      $terminalBody.innerHTML = html;

      // Update tracking highlight
      updateTrackingHighlight();

      // Auto-scroll to last checked item
      if (autoScrollOn && hasLastChecked) {
        scrollToLastChecked();
      }
    })
    .catch(() => {
      if (!lastStatusMdText) {
        $terminalBody.innerHTML = '<div class="conv-empty">STATUS.md not found</div>';
      }
    });
}

// ── STATUS.md renderer ──────────────────────────────────────────────────────

function renderStatusMd(markdown) {
  const lines = markdown.split('\n');
  let lastCheckedIdx = -1;

  // First pass: find last checked item
  for (let i = 0; i < lines.length; i++) {
    if (/^\s*-\s*\[x\]/i.test(lines[i])) lastCheckedIdx = i;
  }

  let html = '<div class="status-md-content">';

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    // Headings
    const hMatch = line.match(/^(#{1,6})\s+(.+)/);
    if (hMatch) {
      const lvl = Math.min(hMatch[1].length, 4);
      html += `<div class="status-md-h${lvl}">${renderInlineMd(hMatch[2])}</div>`;
      continue;
    }

    // Checked checkbox
    if (/^\s*-\s*\[x\]/i.test(line)) {
      const text = line.replace(/^\s*-\s*\[x\]\s*/i, '');
      const isLast = i === lastCheckedIdx;
      const cls = isLast ? 'status-md-check checked last-checked' : 'status-md-check checked';
      const id = isLast ? ' id="last-checked"' : '';
      html += `<div class="${cls}"${id}><span class="check-box">☑</span><span>${renderInlineMd(text)}</span></div>`;
      continue;
    }

    // Unchecked checkbox
    if (/^\s*-\s*\[\s\]/.test(line)) {
      const text = line.replace(/^\s*-\s*\[\s\]\s*/, '');
      html += `<div class="status-md-check unchecked"><span class="check-box">☐</span><span>${renderInlineMd(text)}</span></div>`;
      continue;
    }

    // List item
    const liMatch = line.match(/^\s*-\s+(.*)/);
    if (liMatch) {
      html += `<div class="status-md-li">• ${renderInlineMd(liMatch[1])}</div>`;
      continue;
    }

    // Empty line
    if (!line.trim()) {
      html += '<div class="status-md-spacer"></div>';
      continue;
    }

    // Plain text
    html += `<div class="status-md-text">${renderInlineMd(line)}</div>`;
  }

  html += '</div>';
  return { html, hasLastChecked: lastCheckedIdx >= 0 };
}

function renderInlineMd(text) {
  let s = escapeHtml(text);
  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
  s = s.replace(/`(.+?)`/g, '<code class="status-md-code">$1</code>');
  return s;
}

// ── Conversation event renderer ─────────────────────────────────────────────

function renderConvEvent(event) {
  switch (event.type) {
    case "message_update": {
      const delta = event.assistantMessageEvent;
      if (delta?.type === "text_delta" && delta.delta) {
        return `<span class="conv-text">${escapeHtml(delta.delta)}</span>`;
      }
      if (delta?.type === "thinking_delta" && delta.delta) {
        return `<span class="conv-thinking">${escapeHtml(delta.delta)}</span>`;
      }
      return "";
    }

    case "tool_call": {
      const name = event.toolName || "unknown";
      const argsStr = event.args?.path || event.args?.command || "";
      return `<div class="conv-tool-call"><span class="conv-tool-name">🔧 ${escapeHtml(name)}</span> <span class="conv-tool-args">${escapeHtml(String(argsStr).substring(0, 200))}</span></div>`;
    }

    case "tool_execution_start": {
      const name = event.toolName || "unknown";
      const argsStr = event.args?.path || event.args?.command || "";
      return `<div class="conv-tool-call"><span class="conv-tool-name">🔧 ${escapeHtml(name)}</span> <span class="conv-tool-args">${escapeHtml(String(argsStr).substring(0, 200))}</span></div>`;
    }

    case "tool_result": {
      const output = event.output || event.result || "";
      const truncated = String(output).length > 500 ? String(output).substring(0, 500) + "…" : String(output);
      return `<div class="conv-tool-result"><pre>${escapeHtml(truncated)}</pre></div>`;
    }

    case "message_end": {
      const usage = event.message?.usage;
      if (usage) {
        const tokens = usage.totalTokens || (usage.input + usage.output) || 0;
        return `<div class="conv-usage">Tokens: ${tokens.toLocaleString()}</div>`;
      }
      return "";
    }

    default:
      return "";
  }
}

// ── Auto-scroll logic ───────────────────────────────────────────────────────

function scrollToLastChecked() {
  const el = document.getElementById('last-checked');
  if (!el) return;
  isProgrammaticScroll = true;
  el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  setTimeout(() => { isProgrammaticScroll = false; }, 600);
}

function updateTrackingHighlight() {
  const container = $terminalBody.querySelector('.status-md-content');
  if (container) {
    container.classList.toggle('tracking', autoScrollOn && viewerMode === 'status-md');
  }
}

$autoScrollCheckbox.addEventListener('change', () => {
  autoScrollOn = $autoScrollCheckbox.checked;
  if (autoScrollOn) {
    if (viewerMode === 'conversation') {
      isProgrammaticScroll = true;
      $terminalBody.scrollTop = $terminalBody.scrollHeight;
      requestAnimationFrame(() => { isProgrammaticScroll = false; });
    } else if (viewerMode === 'status-md') {
      scrollToLastChecked();
      updateTrackingHighlight();
    }
  } else {
    updateTrackingHighlight();
  }
});

$terminalBody.addEventListener('scroll', () => {
  if (isProgrammaticScroll) return;

  if (viewerMode === 'conversation') {
    const isAtBottom = $terminalBody.scrollTop + $terminalBody.clientHeight >= $terminalBody.scrollHeight - 30;
    if (isAtBottom && !autoScrollOn) {
      autoScrollOn = true;
      $autoScrollCheckbox.checked = true;
    } else if (!isAtBottom && autoScrollOn) {
      autoScrollOn = false;
      $autoScrollCheckbox.checked = false;
    }
  } else if (viewerMode === 'status-md') {
    if (autoScrollOn) {
      autoScrollOn = false;
      $autoScrollCheckbox.checked = false;
      updateTrackingHighlight();
    }
  }
});

// ── Close viewer ────────────────────────────────────────────────────────────

function closeViewer() {
  if (viewerTimer) {
    clearInterval(viewerTimer);
    viewerTimer = null;
  }
  viewerMode = null;
  viewerTarget = null;
  viewerV2AgentId = null;
  autoScrollOn = false;
  convRenderedLines = 0;
  v2LastCursor = null;
  v2FirstRender = true;
  lastStatusMdText = '';
  $terminalPanel.style.display = 'none';
  $terminalBody.innerHTML = '';
}

$terminalClose.addEventListener('click', closeViewer);

// Make viewer functions available globally for onclick handlers
window.viewConversation = viewConversation;
window.viewStatusMd = viewStatusMd;

// ─── History ────────────────────────────────────────────────────────────────

/** Fetch the compact history list and populate the dropdown. */
function loadHistoryList() {
  fetch("/api/history")
    .then(r => r.json())
    .then(list => {
      historyList = list || [];
      renderHistoryDropdown();
      // Auto-select the latest history entry when no live batch is running.
      // Always update the view here — renderNoBatch() shows a placeholder
      // while this async fetch completes, so we need to replace it with
      // the actual latest entry. This fixes #20 where the stale cached
      // historyList caused the previous batch to be shown.
      if (noBatchRendered && historyList.length > 0) {
        viewHistoryEntry(historyList[0].batchId);
        $historySelect.value = historyList[0].batchId;
      } else if (noBatchRendered && historyList.length === 0) {
        $historyBody.innerHTML = `
          <div class="no-batch">
            <div class="no-batch-icon">⏳</div>
            <div class="no-batch-title">No batch running</div>
            <div class="no-batch-hint">.pi/batch-state.json not found<br>Start an orchestrator batch to see the dashboard.</div>
          </div>`;
        $historyPanel.style.display = "";
      }
    })
    .catch(() => {});
}

function renderHistoryDropdown() {
  $historySelect.innerHTML = '<option value="">History ▾</option>';
  for (const h of historyList) {
    const d = new Date(h.startedAt);
    const dateStr = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
    const timeStr = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
    const statusIcon = h.status === "completed" ? "✓" : h.status === "partial" ? "⚠" : "✗";
    const label = `${statusIcon} ${dateStr} ${timeStr} — ${h.totalTasks}tasks ${formatDuration(h.durationMs)}`;
    const opt = document.createElement("option");
    opt.value = h.batchId;
    opt.textContent = label;
    $historySelect.appendChild(opt);
  }
}

/** Load and display a specific historical batch. */
function viewHistoryEntry(batchId) {
  if (!batchId) {
    viewingHistoryId = null;
    $historyPanel.style.display = "none";
    return;
  }
  viewingHistoryId = batchId;
  fetch(`/api/history/${encodeURIComponent(batchId)}`)
    .then(r => r.json())
    .then(entry => {
      if (entry.error) {
        $historyBody.innerHTML = `<div class="empty-state">${escapeHtml(entry.error)}</div>`;
      } else {
        renderHistorySummary(entry);
      }
      $historyPanel.style.display = "";
    })
    .catch(() => {
      $historyBody.innerHTML = '<div class="empty-state">Failed to load batch details</div>';
      $historyPanel.style.display = "";
    });
}

/** Render a full batch history summary. */
function renderHistorySummary(entry) {
  const startDate = new Date(entry.startedAt).toLocaleString();
  const endDate = entry.endedAt ? new Date(entry.endedAt).toLocaleString() : "—";
  const tok = entry.tokens || {};
  const totalIn = (tok.input || 0) + (tok.cacheRead || 0);
  let tokenStr = `↑${formatTokens(totalIn)} ↓${formatTokens(tok.output || 0)}`;
  const costStr = formatCost(tok.costUsd || 0);

  let html = `
    <div class="history-header">
      <span class="batch-id">${escapeHtml(entry.batchId)}</span>
      <span class="batch-status ${entry.status}">${entry.status}</span>
      <span class="batch-time">${startDate} → ${endDate}</span>
    </div>

    <div class="history-stats">
      <div class="stat-card">
        <div class="stat-value">${entry.totalTasks}</div>
        <div class="stat-label">Total Tasks</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" style="color:var(--green)">${entry.succeededTasks}</div>
        <div class="stat-label">Succeeded</div>
      </div>
      <div class="stat-card">
        <div class="stat-value" style="color:${entry.failedTasks > 0 ? 'var(--red)' : 'var(--text-muted)'}">${entry.failedTasks}</div>
        <div class="stat-label">Failed</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">${entry.totalWaves}</div>
        <div class="stat-label">Waves</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">${formatDuration(entry.durationMs)}</div>
        <div class="stat-label">Duration</div>
      </div>
      <div class="stat-card stat-tokens">
        <div class="stat-value">🪙 ${tokenStr}</div>
        <div class="stat-label">Tokens</div>
      </div>
      ${costStr ? `<div class="stat-card">
        <div class="stat-value" style="color:var(--yellow)">${costStr}</div>
        <div class="stat-label">Cost</div>
      </div>` : ""}
    </div>`;

  // Wave table
  if (entry.waves && entry.waves.length > 0) {
    html += `<div class="history-section-title">Waves</div>`;
    html += `<table class="history-waves-table"><thead><tr>
      <th>Wave</th><th>Tasks</th><th>Merge</th><th>Duration</th><th>Tokens</th><th>Cost</th>
    </tr></thead><tbody>`;
    for (const w of entry.waves) {
      const wTok = w.tokens || {};
      const wTotalIn = (wTok.input || 0) + (wTok.cacheRead || 0);
      let wTokenStr = `↑${formatTokens(wTotalIn)} ↓${formatTokens(wTok.output || 0)}`;
      const mergeClass = w.mergeStatus === "succeeded" ? "status-succeeded" :
        w.mergeStatus === "failed" ? "status-failed" : "status-stalled";
      html += `<tr>
        <td>Wave ${w.wave}</td>
        <td>${w.tasks.join(", ")}</td>
        <td><span class="status-badge ${mergeClass}">${w.mergeStatus}</span></td>
        <td>${formatDuration(w.durationMs)}</td>
        <td>${wTokenStr}</td>
        <td style="color:var(--yellow)">${formatCost(wTok.costUsd || 0)}</td>
      </tr>`;
    }
    html += `</tbody></table>`;
  }

  // Task table
  if (entry.tasks && entry.tasks.length > 0) {
    html += `<div class="history-section-title">Tasks</div>`;
    html += `<table class="history-tasks-table"><thead><tr>
      <th>Task</th><th>Status</th><th>Wave</th><th>Lane</th><th>Duration</th><th>Tokens</th><th>Cost</th><th>Exit</th>
    </tr></thead><tbody>`;
    for (const t of entry.tasks) {
      const tTok = t.tokens || {};
      const tTotalIn = (tTok.input || 0) + (tTok.cacheRead || 0);
      let tTokenStr = `↑${formatTokens(tTotalIn)} ↓${formatTokens(tTok.output || 0)}`;
      const statusCls = `status-${t.status}`;
      html += `<tr>
        <td>${escapeHtml(t.taskId)}</td>
        <td><span class="status-badge ${statusCls}">${t.status}</span></td>
        <td>W${t.wave}</td>
        <td>L${t.lane}</td>
        <td>${formatDuration(t.durationMs)}</td>
        <td>${tTokenStr}</td>
        <td style="color:var(--yellow)">${formatCost(tTok.costUsd || 0)}</td>
        <td style="font-size:0.8rem;color:var(--text-muted)">${t.exitReason ? escapeHtml(t.exitReason) : "—"}</td>
      </tr>`;
    }
    html += `</tbody></table>`;
  }

  $historyBody.innerHTML = html;
}

/** Handle dropdown change. */
$historySelect.addEventListener("change", (e) => {
  const batchId = e.target.value;
  if (batchId) {
    viewHistoryEntry(batchId);
  } else {
    // Switched to "History ▾" — go back to live view or latest
    viewingHistoryId = null;
    $historyPanel.style.display = "none";
  }
});

// ─── Theme Toggle ───────────────────────────────────────────────────────────

const DARK_LOGO = "taskplane-word-white.svg";
const LIGHT_LOGO = "taskplane-word-color.svg";

function applyTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
  const logo = document.getElementById("header-logo");
  const icon = document.getElementById("theme-toggle-icon");
  if (logo) logo.src = theme === "light" ? LIGHT_LOGO : DARK_LOGO;
  if (icon) icon.textContent = theme === "dark" ? "☀️" : "🌙";
}

function loadThemePreference() {
  fetch("/api/preferences")
    .then(r => r.ok ? r.json() : { theme: "dark" })
    .then(prefs => applyTheme(prefs.theme || "dark"))
    .catch(() => applyTheme("dark"));
}

function saveThemePreference(theme) {
  fetch("/api/preferences", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ theme }),
  }).catch(() => {}); // best-effort
}

const $themeToggle = document.getElementById("theme-toggle");
if ($themeToggle) {
  $themeToggle.addEventListener("click", () => {
    const current = document.documentElement.getAttribute("data-theme") || "dark";
    const next = current === "dark" ? "light" : "dark";
    applyTheme(next);
    saveThemePreference(next);
  });
}

// Load saved preference on startup
loadThemePreference();

// ─── Boot ───────────────────────────────────────────────────────────────────

connect();
loadHistoryList();

// One-shot fetch on load (in case SSE is slow to connect)
fetch("/api/state")
  .then(r => r.json())
  .then(render)
  .catch(() => {});