shipwright-cli 2.2.1 → 2.3.0

package/dashboard/src/views/overview.ts

@@ -0,0 +1,409 @@
+// Overview tab - stats, pipelines, queue, activity, resources, cost, machines
+
+import { store } from "../core/state";
+import {
+  escapeHtml,
+  fmtNum,
+  formatDuration,
+  formatTime,
+  animateValue,
+  getBadgeClass,
+  getTypeShort,
+} from "../core/helpers";
+import { renderPipelineSVG } from "../components/charts/pipeline-rail";
+import { renderCostTicker } from "../components/header";
+import { switchTab } from "../core/router";
+import * as api from "../core/api";
+import { fetchPipelineDetail } from "./pipelines";
+import { icon } from "../design/icons";
+import type {
+  FleetState,
+  View,
+  PipelineInfo,
+  QueueItem,
+  EventItem,
+} from "../types/api";
+
+function renderStats(data: FleetState): void {
+  const d = data.daemon || ({} as any);
+  const m = data.metrics || ({} as any);
+  const firstRender = store.get("firstRender");
+
+  const statusEl = document.getElementById("stat-status");
+  const statusDot = document.getElementById("status-dot");
+  if (statusEl && statusDot) {
+    if (d.running) {
+      statusEl.textContent = "OPERATIONAL";
+      statusEl.className = "stat-value status-green";
+      statusDot.className = "pulse-dot operational";
+    } else {
+      statusEl.textContent = "OFFLINE";
+      statusEl.className = "stat-value status-rose";
+      statusDot.className = "pulse-dot offline";
+    }
+  }
+
+  const active = data.pipelines ? data.pipelines.length : 0;
+  const max = d.maxParallel || 0;
+  const activeEl = document.getElementById("stat-active");
+  if (activeEl) {
+    if (firstRender && active > 0) {
+      animateValue(activeEl, 0, active, 600, " / " + fmtNum(max));
+    } else {
+      activeEl.textContent = fmtNum(active) + " / " + fmtNum(max);
+    }
+  }
+  const barPct = max > 0 ? Math.min((active / max) * 100, 100) : 0;
+  const bar = document.getElementById("stat-active-bar");
+  if (bar) bar.style.width = barPct + "%";
+
+  const queued = data.queue ? data.queue.length : 0;
+  const queueEl = document.getElementById("stat-queue");
+  if (queueEl) {
+    queueEl.textContent = fmtNum(queued);
+    queueEl.className =
+      queued > 0 ? "stat-value status-amber" : "stat-value status-green";
+  }
+  const queueSub = document.getElementById("stat-queue-sub");
+  if (queueSub)
+    queueSub.textContent = queued === 1 ? "issue waiting" : "issues waiting";
+
+  const completed = m.completed ?? 0;
+  const completedEl = document.getElementById("stat-completed");
+  if (completedEl) {
+    if (firstRender && completed > 0) {
+      animateValue(completedEl, 0, completed, 800, "");
+    } else {
+      completedEl.textContent = fmtNum(completed);
+    }
+  }
+  const failed = m.failed ?? 0;
+  const failedSub = document.getElementById("stat-failed-sub");
+  if (failedSub) {
+    failedSub.textContent = fmtNum(failed) + " failed";
+    failedSub.className =
+      failed > 0 ? "stat-subtitle failed-some" : "stat-subtitle failed-none";
+  }
+}
+
+function renderOverviewPipelines(data: FleetState): void {
+  const container = document.getElementById("active-pipelines");
+  if (!container) return;
+  const firstRender = store.get("firstRender");
+
+  if (!data.pipelines || data.pipelines.length === 0) {
+    container.innerHTML = `<div class="empty-state">${icon("clock", 32)}<p>No active pipelines</p></div>`;
+    return;
+  }
+
+  let html = "";
+  for (let idx = 0; idx < data.pipelines.length; idx++) {
+    const p = data.pipelines[idx];
+    const maxIter = p.maxIterations || 20;
+    const curIter = p.iteration || 0;
+    const iterPct = maxIter > 0 ? Math.min((curIter / maxIter) * 100, 100) : 0;
+
+    const linesText =
+      p.linesWritten != null ? fmtNum(p.linesWritten) + " lines" : "";
+    const testsText =
+      p.testsPassing === true
+        ? '<span class="tests-pass">Tests \u2713</span>'
+        : p.testsPassing === false
+          ? '<span class="tests-fail">Tests \u2717</span>'
+          : "";
+    const metaParts = [linesText, testsText].filter(Boolean);
+    const animDelay = firstRender
+      ? ` style="animation-delay:${idx * 0.05}s"`
+      : "";
+
+    html +=
+      `<div class="pipeline-card" data-issue="${p.issue}"${animDelay}>` +
+      `<div class="pipeline-header">` +
+      `<span class="pipeline-issue">#${p.issue}</span>` +
+      `<span class="pipeline-title">${escapeHtml(p.title)}</span>` +
+      `<span class="pipeline-elapsed">${formatDuration(p.elapsed_s)}</span></div>` +
+      `<div class="pipeline-svg-wrap">${renderPipelineSVG(p)}</div>` +
+      `<div class="pipeline-iter">` +
+      `<span class="pipeline-iter-label">Iteration ${curIter}/${maxIter}</span>` +
+      `<div class="iter-bar-track"><div class="iter-bar-fill" style="width:${iterPct}%"></div></div></div>` +
+      `<div class="pipeline-meta">${metaParts.join(" <span>\u00b7</span> ")}</div>` +
+      (p.worktree
+        ? `<div class="pipeline-worktree">WORKTREE: ${escapeHtml(p.worktree)}</div>`
+        : "") +
+      `</div>`;
+  }
+  container.innerHTML = html;
+
+  container.querySelectorAll(".pipeline-card").forEach((card) => {
+    card.addEventListener("click", () => {
+      const issue = card.getAttribute("data-issue");
+      if (issue) {
+        switchTab("pipelines");
+        fetchPipelineDetail(Number(issue));
+      }
+    });
+  });
+}
+
+function renderQueue(data: FleetState): void {
+  const container = document.getElementById("queue-list");
+  if (!container) return;
+
+  if (!data.queue || data.queue.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>Queue clear</p></div>';
+    return;
+  }
+
+  let html = "";
+  for (let i = 0; i < data.queue.length; i++) {
+    const q = data.queue[i];
+    const costEst =
+      q.estimated_cost != null
+        ? ` <span class="queue-cost-est">~$${q.estimated_cost.toFixed(2)}</span>`
+        : "";
+    html +=
+      `<div class="queue-row" data-queue-idx="${i}" data-issue="${q.issue}">` +
+      `<span class="queue-issue">#${q.issue}</span>` +
+      `<span class="queue-title-text">${escapeHtml(q.title)}</span>` +
+      `<span class="queue-score">${q.score != null ? q.score : "\u2014"}</span>${costEst}</div>`;
+    html += `<div class="queue-scoring-detail" id="queue-detail-${i}" style="display:none">`;
+    if (q.factors) {
+      html += renderScoringFactors(
+        q.factors as unknown as Record<string, unknown>,
+      );
+    }
+    html += `<div class="queue-triage-reasoning" id="queue-reasoning-${i}"></div>`;
+    html += `</div>`;
+  }
+  container.innerHTML = html;
+
+  // Fetch detailed queue data for triage reasoning
+  let detailedData: Array<Record<string, unknown>> | null = null;
+  api
+    .fetchQueueDetailed()
+    .then((d) => {
+      detailedData = d.items || [];
+    })
+    .catch(() => {});
+
+  container.querySelectorAll(".queue-row").forEach((row) => {
+    row.addEventListener("click", () => {
+      const idx = row.getAttribute("data-queue-idx");
+      const detail = document.getElementById("queue-detail-" + idx);
+      if (!detail) return;
+      const isHidden = detail.style.display === "none";
+      detail.style.display = isHidden ? "" : "none";
+
+      if (isHidden && detailedData) {
+        const issue = row.getAttribute("data-issue");
+        const reasoningEl = document.getElementById("queue-reasoning-" + idx);
+        if (reasoningEl && !reasoningEl.innerHTML) {
+          const match = detailedData.find((d) => String(d.issue) === issue);
+          if (match) {
+            let rHtml = "";
+            if (match.triage_reason || match.reason)
+              rHtml += `<div class="triage-reason"><strong>Triage:</strong> ${escapeHtml(String(match.triage_reason || match.reason))}</div>`;
+            if (match.complexity_estimate)
+              rHtml += `<div class="triage-detail"><strong>Complexity:</strong> ${escapeHtml(String(match.complexity_estimate))}</div>`;
+            if (match.labels)
+              rHtml += `<div class="triage-detail"><strong>Labels:</strong> ${escapeHtml(String(match.labels))}</div>`;
+            if (match.age_hours)
+              rHtml += `<div class="triage-detail"><strong>Age:</strong> ${Number(match.age_hours).toFixed(1)}h</div>`;
+            reasoningEl.innerHTML = rHtml;
+          }
+        }
+      }
+    });
+  });
+}
+
+function renderScoringFactors(factors: Record<string, unknown>): string {
+  const keys = [
+    "complexity",
+    "impact",
+    "priority",
+    "age",
+    "dependency",
+    "memory",
+  ];
+  let html = '<div class="scoring-factors">';
+  for (const k of keys) {
+    const val = Number(factors[k] ?? 0);
+    const pct = Math.max(0, Math.min(100, val));
+    html +=
+      `<div class="scoring-factor-row">` +
+      `<span class="scoring-factor-label">${escapeHtml(k)}</span>` +
+      `<div class="scoring-factor-track"><div class="scoring-factor-fill" style="width:${pct}%"></div></div>` +
+      `<span class="scoring-factor-val">${pct}</span></div>`;
+  }
+  html += "</div>";
+  return html;
+}
+
+function renderOverviewActivity(data: FleetState): void {
+  const container = document.getElementById("activity-feed");
+  if (!container) return;
+
+  if (!data.events || data.events.length === 0) {
+    container.innerHTML =
+      '<div class="empty-state"><p>Awaiting events...</p></div>';
+    return;
+  }
+
+  const events = data.events.slice(-10).reverse();
+  let html = "";
+  for (const ev of events) {
+    const typeRaw = String(ev.type || "unknown");
+    const typeShort = getTypeShort(typeRaw);
+    const badgeClass = getBadgeClass(typeRaw);
+
+    const skip: Record<string, boolean> = {
+      ts: true,
+      type: true,
+      timestamp: true,
+    };
+    const dparts: string[] = [];
+    for (const [key, val] of Object.entries(ev)) {
+      if (!skip[key]) dparts.push(key + "=" + val);
+    }
+    const detail = dparts.join(" ");
+
+    html +=
+      `<div class="activity-row">` +
+      `<span class="activity-ts">${formatTime(ev.ts || ev.timestamp)}</span>` +
+      `<span class="activity-badge ${badgeClass}">${escapeHtml(typeShort)}</span>` +
+      `<span class="activity-detail">${escapeHtml(detail)}</span></div>`;
+  }
+  container.innerHTML = html;
+}
+
+function renderResources(data: FleetState): void {
+  const s = data.scale || ({} as any);
+  const m = data.metrics || ({} as any);
+  const active = data.pipelines ? data.pipelines.length : 0;
+
+  const cores = m.cpuCores || s.cpuCores || 0;
+  const maxByCpu = s.maxByCpu ?? null;
+  const maxByMem = s.maxByMem ?? null;
+  const maxByBudget = s.maxByBudget ?? null;
+
+  const cpuBar = document.getElementById("res-cpu-bar");
+  const cpuInfo = document.getElementById("res-cpu-info");
+  if (cpuBar && cpuInfo) {
+    if (maxByCpu != null) {
+      const pct = maxByCpu > 0 ? Math.min((active / maxByCpu) * 100, 100) : 0;
+      cpuBar.style.width = pct + "%";
+      cpuBar.className = "resource-bar-fill";
+      cpuInfo.textContent = maxByCpu + " max (" + cores + " cores)";
+    } else {
+      cpuBar.style.width = "0%";
+      cpuInfo.textContent = "\u2014";
+    }
+  }
+
+  const memBar = document.getElementById("res-mem-bar");
+  const memInfo = document.getElementById("res-mem-info");
+  if (memBar && memInfo) {
+    if (maxByMem != null) {
+      const pct = maxByMem > 0 ? Math.min((active / maxByMem) * 100, 100) : 0;
+      memBar.style.width = pct + "%";
+      memBar.className =
+        maxByMem <= 1
+          ? "resource-bar-fill critical"
+          : maxByMem <= 2
+            ? "resource-bar-fill warning"
+            : "resource-bar-fill";
+      const memGb = s.availMemGb != null ? s.availMemGb + "GB free" : "";
+      memInfo.textContent =
+        maxByMem + " max" + (memGb ? " (" + memGb + ")" : "");
+    } else {
+      memBar.style.width = "0%";
+      memInfo.textContent = "\u2014";
+    }
+  }
+
+  const budgetBar = document.getElementById("res-budget-bar");
+  const budgetInfo = document.getElementById("res-budget-info");
+  if (budgetBar && budgetInfo) {
+    if (maxByBudget != null) {
+      const pct =
+        maxByBudget > 0 ? Math.min((active / maxByBudget) * 100, 100) : 0;
+      budgetBar.style.width = pct + "%";
+      budgetBar.className = "resource-bar-fill";
+      budgetInfo.textContent = maxByBudget + " max";
+    } else {
+      budgetBar.style.width = "0%";
+      budgetInfo.textContent = "unlimited";
+    }
+  }
+
+  const constraintEl = document.getElementById("resource-constraint");
+  if (constraintEl) {
+    if (maxByMem != null && maxByCpu != null) {
+      const minFactor = Math.min(
+        maxByCpu || Infinity,
+        maxByMem || Infinity,
+        maxByBudget ?? Infinity,
+      );
+      if (minFactor === maxByMem && maxByMem <= 2) {
+        constraintEl.innerHTML =
+          '<span class="constraint-badge warning">MEM-BOUND</span>';
+      } else if (maxByBudget != null && minFactor === maxByBudget) {
+        constraintEl.innerHTML =
+          '<span class="constraint-badge warning">BUDGET-BOUND</span>';
+      } else {
+        constraintEl.innerHTML =
+          '<span class="constraint-badge nominal">NOMINAL</span>';
+      }
+    } else {
+      constraintEl.innerHTML =
+        '<span class="constraint-badge nominal">NOMINAL</span>';
+    }
+  }
+}
+
+function renderMachines(data: FleetState): void {
+  const section = document.getElementById("machines-section");
+  if (!section) return;
+  const machines = data.machines || [];
+  if (machines.length === 0) {
+    section.style.display = "none";
+    return;
+  }
+  section.style.display = "";
+  const grid = document.getElementById("machines-grid");
+  if (!grid) return;
+  let html = "";
+  for (const m of machines) {
+    const statusCls =
+      m.status === "online"
+        ? "machine-online"
+        : m.status === "degraded"
+          ? "machine-degraded"
+          : "machine-offline";
+    html +=
+      `<div class="machine-card ${statusCls}">` +
+      `<div class="machine-card-header">` +
+      `<span class="machine-name">${escapeHtml(m.name)}</span>` +
+      `<span class="machine-status-dot"></span></div>` +
+      `<div class="machine-card-body">` +
+      `<span class="machine-host">${escapeHtml(m.host)}</span>` +
+      `<span class="machine-workers">${m.active_workers}/${m.max_workers} workers</span>` +
+      `</div></div>`;
+  }
+  grid.innerHTML = html;
+}
+
+export const overviewView: View = {
+  init() {},
+  render(data: FleetState) {
+    renderStats(data);
+    renderOverviewPipelines(data);
+    renderQueue(data);
+    renderOverviewActivity(data);
+    renderResources(data);
+    renderCostTicker(data);
+    renderMachines(data);
+  },
+  destroy() {},
+};

package/dashboard/src/views/pipeline-theater.ts

@@ -0,0 +1,219 @@
+// Pipeline Theater - live terminal + animated stage rail + token burn meter + file accumulator
+
+import { store } from "../core/state";
+import { escapeHtml, formatDuration, fmtNum } from "../core/helpers";
+import { icon } from "../design/icons";
+import { colors, STAGES, STAGE_HEX, STAGE_SHORT } from "../design/tokens";
+import { LiveTerminal } from "../components/terminal";
+import { SSEClient } from "../core/sse";
+import { renderPipelineSVG } from "../components/charts/pipeline-rail";
+import * as api from "../core/api";
+import type { FleetState, View, PipelineInfo } from "../types/api";
+
+let terminal: LiveTerminal | null = null;
+let sseClient: SSEClient | null = null;
+let selectedIssue: number | null = null;
+
+function renderTheater(data: FleetState): void {
+  const container = document.getElementById("panel-pipeline-theater");
+  if (!container) return;
+
+  const pipelines = data.pipelines || [];
+  if (pipelines.length === 0 && !selectedIssue) {
+    container.innerHTML = `<div class="empty-state">${icon("eye", 48)}<p>No active pipelines to observe</p></div>`;
+    return;
+  }
+
+  // Pipeline selector
+  let html = '<div class="theater-layout">';
+  html += '<div class="theater-sidebar">';
+  html += '<div class="theater-sidebar-header">Active Pipelines</div>';
+  for (const p of pipelines) {
+    const isSelected = selectedIssue === p.issue;
+    html +=
+      `<div class="theater-pipeline-item${isSelected ? " selected" : ""}" data-issue="${p.issue}">` +
+      `<span class="theater-issue">#${p.issue}</span>` +
+      `<span class="theater-stage">${escapeHtml(p.stage)}</span>` +
+      `<span class="theater-elapsed">${formatDuration(p.elapsed_s)}</span></div>`;
+  }
+  html += "</div>";
+
+  // Main theater area
+  html += '<div class="theater-main">';
+  if (selectedIssue) {
+    const pipeline = pipelines.find((p) => p.issue === selectedIssue);
+    if (pipeline) {
+      // Stage rail
+      html += `<div class="theater-stage-rail">${renderPipelineSVG(pipeline)}</div>`;
+
+      // Token burn + file accumulator
+      html += '<div class="theater-metrics-bar">';
+      html +=
+        `<div class="theater-metric"><span class="theater-metric-label">${icon("zap", 14)} Iteration</span>` +
+        `<span class="theater-metric-value">${pipeline.iteration || 0}/${pipeline.maxIterations || 20}</span></div>`;
+      if (pipeline.linesWritten != null) {
+        html +=
+          `<div class="theater-metric"><span class="theater-metric-label">${icon("file-diff", 14)} Lines</span>` +
+          `<span class="theater-metric-value">${fmtNum(pipeline.linesWritten)}</span></div>`;
+      }
+      if (pipeline.cost != null) {
+        html +=
+          `<div class="theater-metric"><span class="theater-metric-label">${icon("dollar-sign", 14)} Cost</span>` +
+          `<span class="theater-metric-value">$${pipeline.cost.toFixed(2)}</span></div>`;
+      }
+      html += "</div>";
+
+      // Live Changes panel (diff + files)
+      html += '<div class="theater-changes" id="theater-changes">';
+      html += `<div class="theater-changes-header">${icon("file-diff", 16)} Live Changes <button class="btn-sm" id="theater-refresh-diff">Refresh</button></div>`;
+      html +=
+        '<div class="theater-changes-body" id="theater-changes-body"><div class="empty-state"><p>Loading changes...</p></div></div>';
+      html += "</div>";
+
+      // Live terminal
+      html +=
+        '<div class="theater-terminal" id="theater-terminal-container"></div>';
+    } else {
+      html += `<div class="empty-state"><p>Pipeline #${selectedIssue} no longer active</p></div>`;
+    }
+  } else {
+    html += `<div class="empty-state">${icon("terminal", 32)}<p>Select a pipeline to observe</p></div>`;
+  }
+  html += "</div></div>";
+  container.innerHTML = html;
+
+  // Wire up pipeline selection
+  container.querySelectorAll(".theater-pipeline-item").forEach((item) => {
+    item.addEventListener("click", () => {
+      const issue = parseInt(item.getAttribute("data-issue") || "0", 10);
+      if (issue) selectPipeline(issue, data);
+    });
+  });
+
+  // Initialize terminal and live changes if pipeline is selected
+  if (selectedIssue) {
+    const termContainer = document.getElementById("theater-terminal-container");
+    if (termContainer) {
+      terminal = new LiveTerminal(termContainer);
+      connectLogStream(selectedIssue);
+    }
+    loadLiveChanges(selectedIssue);
+    const refreshBtn = document.getElementById("theater-refresh-diff");
+    if (refreshBtn) {
+      refreshBtn.addEventListener("click", () => {
+        if (selectedIssue) loadLiveChanges(selectedIssue);
+      });
+    }
+  }
+}
+
+function selectPipeline(issue: number, data: FleetState): void {
+  if (sseClient) sseClient.close();
+  if (terminal) terminal.destroy();
+  selectedIssue = issue;
+  renderTheater(data);
+}
+
+function loadLiveChanges(issue: number): void {
+  const body = document.getElementById("theater-changes-body");
+  if (!body) return;
+
+  Promise.all([
+    api.fetchPipelineFiles(issue).catch(() => ({ files: [] })),
+    api.fetchPipelineDiff(issue).catch(() => ({
+      diff: "",
+      stats: { files_changed: 0, insertions: 0, deletions: 0 },
+      worktree: "",
+    })),
+  ]).then(([filesData, diffData]) => {
+    const files = filesData.files || [];
+    const stats = diffData.stats;
+    let html = "";
+
+    // Stats summary
+    if (stats.files_changed > 0) {
+      html +=
+        `<div class="changes-stats">` +
+        `<span class="stat-files">${stats.files_changed} file${stats.files_changed !== 1 ? "s" : ""}</span>` +
+        `<span class="stat-add">+${stats.insertions}</span>` +
+        `<span class="stat-del">-${stats.deletions}</span></div>`;
+    }
+
+    // File list
+    if (files.length > 0) {
+      html += '<div class="changes-file-list">';
+      for (const f of files) {
+        const statusCls =
+          f.status === "added"
+            ? "file-added"
+            : f.status === "deleted"
+              ? "file-deleted"
+              : "file-modified";
+        const statusChar =
+          f.status === "added" ? "A" : f.status === "deleted" ? "D" : "M";
+        html += `<div class="changes-file-item ${statusCls}"><span class="file-status">${statusChar}</span><span class="file-path">${escapeHtml(f.path)}</span></div>`;
+      }
+      html += "</div>";
+    }
+
+    // Diff preview (truncated)
+    if (diffData.diff) {
+      const truncatedDiff =
+        diffData.diff.length > 5000
+          ? diffData.diff.substring(0, 5000) + "\n... (truncated)"
+          : diffData.diff;
+      html += `<details class="changes-diff-details"><summary>Show Diff</summary><pre class="changes-diff">${escapeHtml(truncatedDiff)}</pre></details>`;
+    }
+
+    if (!html) {
+      html =
+        '<div class="empty-state"><p>No changes detected (worktree may not exist yet)</p></div>';
+    }
+
+    body.innerHTML = html;
+  });
+}
+
+function connectLogStream(issue: number): void {
+  if (sseClient) sseClient.close();
+
+  // Try SSE endpoint first, fall back to static logs
+  sseClient = new SSEClient(
+    `/api/logs/${issue}/stream`,
+    (data) => {
+      if (terminal) terminal.append(data);
+    },
+    () => {
+      // SSE not available, load static logs
+      api
+        .fetchLogs(issue)
+        .then((data) => {
+          if (terminal) terminal.append(data.content || "No logs available");
+        })
+        .catch(() => {
+          if (terminal) terminal.append("Failed to load logs");
+        });
+    },
+  );
+  sseClient.connect();
+}
+
+export const pipelineTheaterView: View = {
+  init() {},
+
+  render(data: FleetState) {
+    renderTheater(data);
+  },
+
+  destroy() {
+    if (sseClient) {
+      sseClient.close();
+      sseClient = null;
+    }
+    if (terminal) {
+      terminal.destroy();
+      terminal = null;
+    }
+    selectedIssue = null;
+  },
+};