shipwright-cli 2.2.2 → 2.3.1

package/dashboard/src/views/machines.ts

@@ -0,0 +1,162 @@
+// Machines tab - machine grid, health checks, worker management
+
+import { store } from "../core/state";
+import { escapeHtml } from "../core/helpers";
+import { icon } from "../design/icons";
+import {
+  setupMachinesModals,
+  updateWorkerCount,
+  machineHealthCheckAction,
+  confirmMachineRemove,
+} from "../components/modal";
+import * as api from "../core/api";
+import type { FleetState, View, MachineInfo, JoinToken } from "../types/api";
+
+function fetchMachinesTab(): void {
+  api
+    .fetchMachines()
+    .then((machines) => {
+      store.set("machinesCache", machines);
+      renderMachinesTab(machines);
+    })
+    .catch(() => {});
+
+  api
+    .fetchJoinTokens()
+    .then(({ tokens }) => {
+      store.set("joinTokensCache", tokens);
+      renderJoinTokens(tokens);
+    })
+    .catch(() => {});
+}
+
+function renderMachinesTab(machines: MachineInfo[]): void {
+  const summaryEl = document.getElementById("machines-summary");
+  const gridEl = document.getElementById("machines-grid");
+  if (!summaryEl || !gridEl) return;
+
+  summaryEl.innerHTML = renderMachineSummary(machines);
+
+  if (machines.length === 0) {
+    gridEl.innerHTML = `<div class="empty-state">${icon("server", 32)}<p>No machines registered</p></div>`;
+    return;
+  }
+
+  gridEl.innerHTML = machines.map((m) => renderMachineCard(m)).join("");
+
+  // Wire up action buttons
+  gridEl.querySelectorAll(".machine-action-btn").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const action = btn.getAttribute("data-machine-action");
+      const name = btn.getAttribute("data-machine-name") || "";
+      if (action === "check") machineHealthCheckAction(name);
+      else if (action === "remove") confirmMachineRemove(name);
+    });
+  });
+
+  // Wire up worker sliders
+  gridEl.querySelectorAll(".workers-slider").forEach((slider) => {
+    slider.addEventListener("input", (e) => {
+      const el = e.target as HTMLInputElement;
+      const name = el.getAttribute("data-machine-name") || "";
+      updateWorkerCount(name, el.value);
+    });
+  });
+}
+
+function renderMachineSummary(machines: MachineInfo[]): string {
+  let totalMaxWorkers = 0;
+  let totalActiveWorkers = 0;
+  let onlineCount = 0;
+  for (const m of machines) {
+    totalMaxWorkers += m.max_workers || 0;
+    totalActiveWorkers += m.active_workers || 0;
+    if (m.status === "online") onlineCount++;
+  }
+
+  return (
+    `<div class="machines-summary-card"><div class="stat-value">${machines.length}</div><div class="stat-label">Total Machines</div></div>` +
+    `<div class="machines-summary-card"><div class="stat-value">${onlineCount}</div><div class="stat-label">Online</div></div>` +
+    `<div class="machines-summary-card"><div class="stat-value">${totalActiveWorkers} / ${totalMaxWorkers}</div><div class="stat-label">Active / Max Workers</div></div>`
+  );
+}
+
+function renderMachineCard(machine: MachineInfo): string {
+  const name = machine.name || "";
+  const host = machine.host || "\u2014";
+  const role = machine.role || "worker";
+  const status = machine.status || "offline";
+  const maxWorkers = machine.max_workers || 4;
+  const activeWorkers = machine.active_workers || 0;
+  const health = machine.health || {};
+  const daemonRunning = health.daemon_running || false;
+  const heartbeatCount = health.heartbeat_count || 0;
+  const lastHbAge = health.last_heartbeat_s_ago;
+  let lastHbText = "\u2014";
+  if (typeof lastHbAge === "number" && lastHbAge < 9999) {
+    if (lastHbAge < 60) lastHbText = lastHbAge + "s ago";
+    else if (lastHbAge < 3600)
+      lastHbText = Math.floor(lastHbAge / 60) + "m ago";
+    else lastHbText = Math.floor(lastHbAge / 3600) + "h ago";
+  }
+
+  return (
+    `<div class="machine-card" id="machine-card-${escapeHtml(name)}">` +
+    `<div class="machine-card-header">` +
+    `<span class="presence-dot ${status}"></span>` +
+    `<span class="machine-name">${escapeHtml(name)}</span>` +
+    `<span class="machine-role">${escapeHtml(role)}</span></div>` +
+    `<div class="machine-host">${escapeHtml(host)}</div>` +
+    `<div class="machine-workers-section">` +
+    `<div class="machine-workers-label-row"><span>Workers</span><span class="workers-count">${activeWorkers} / ${maxWorkers}</span></div>` +
+    `<input type="range" class="workers-slider" min="1" max="64" value="${maxWorkers}" data-machine-name="${escapeHtml(name)}" title="Max workers" /></div>` +
+    `<div class="machine-health">` +
+    `<div class="machine-health-row"><span class="health-label">Daemon</span>` +
+    `<span class="health-status ${daemonRunning ? "running" : "stopped"}">${daemonRunning ? "Running" : "Stopped"}</span></div>` +
+    `<div class="machine-health-row"><span class="health-label">Heartbeats</span><span class="health-value">${heartbeatCount}</span></div>` +
+    `<div class="machine-health-row"><span class="health-label">Last heartbeat</span><span class="health-value">${lastHbText}</span></div></div>` +
+    `<div class="machine-card-actions">` +
+    `<button class="machine-action-btn" data-machine-action="check" data-machine-name="${escapeHtml(name)}">Check</button>` +
+    `<button class="machine-action-btn danger" data-machine-action="remove" data-machine-name="${escapeHtml(name)}">Remove</button></div></div>`
+  );
+}
+
+function renderJoinTokens(tokens: JoinToken[]): void {
+  const section = document.getElementById("join-tokens-section");
+  const list = document.getElementById("join-tokens-list");
+  if (!section || !list) return;
+  if (!tokens || tokens.length === 0) {
+    section.style.display = "none";
+    return;
+  }
+  section.style.display = "";
+
+  let html = "";
+  for (const t of tokens) {
+    const label = t.label || "Unlabeled";
+    const created = t.created_at
+      ? new Date(t.created_at).toLocaleDateString()
+      : "\u2014";
+    const used = t.used ? "Claimed" : "Active";
+    const usedClass = t.used ? "c-amber" : "c-green";
+    html +=
+      `<div class="join-token-row">` +
+      `<span class="join-token-label">${escapeHtml(label)}</span>` +
+      `<span class="join-token-created">${created}</span>` +
+      `<span class="join-token-status ${usedClass}">${used}</span></div>`;
+  }
+  list.innerHTML = html;
+}
+
+export const machinesView: View = {
+  init() {
+    setupMachinesModals();
+    fetchMachinesTab();
+  },
+  render(_data: FleetState) {
+    const cache = store.get("machinesCache");
+    if (cache) renderMachinesTab(cache);
+  },
+  destroy() {},
+};

package/dashboard/src/views/metrics.ts

@@ -0,0 +1,420 @@
+// Metrics tab - success rate, duration, throughput, DORA, costs, stage performance
+
+import { store } from "../core/state";
+import {
+  escapeHtml,
+  fmtNum,
+  formatDuration,
+  animateValue,
+} from "../core/helpers";
+import { renderSVGDonut } from "../components/charts/donut";
+import { renderSVGBarChart } from "../components/charts/bar";
+import {
+  renderSparkline,
+  renderSVGLineChart,
+} from "../components/charts/sparkline";
+import { renderDoraGrades } from "../components/charts/pipeline-rail";
+import { STAGES, STAGE_COLORS, STAGE_HEX } from "../design/tokens";
+import * as api from "../core/api";
+import type { FleetState, View, MetricsData } from "../types/api";
+
+function fetchMetrics(): void {
+  api
+    .fetchMetricsHistory()
+    .then((data) => {
+      store.set("metricsCache", data);
+      renderMetrics(data);
+    })
+    .catch((err) => {
+      const el = document.getElementById("metrics-grid");
+      if (el)
+        el.innerHTML = `<div class="empty-state"><p>Failed to load metrics: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderMetrics(data: MetricsData): void {
+  const firstRender = store.get("firstRender");
+
+  // Success rate donut
+  const rate = data.success_rate ?? 0;
+  const donutWrap = document.getElementById("metric-donut-wrap");
+  if (donutWrap) donutWrap.innerHTML = renderSVGDonut(rate);
+
+  // Avg duration
+  const avgDurEl = document.getElementById("metric-avg-duration");
+  if (avgDurEl) avgDurEl.textContent = formatDuration(data.avg_duration_s);
+
+  // Throughput
+  const tp = data.throughput_per_hour ?? 0;
+  const tpEl = document.getElementById("metric-throughput");
+  if (tpEl) tpEl.textContent = tp.toFixed(2);
+
+  // Totals
+  const totalCompleted = data.total_completed ?? 0;
+  const totalFailed = data.total_failed ?? 0;
+  const tcEl = document.getElementById("metric-total-completed");
+  if (tcEl) {
+    if (firstRender && totalCompleted > 0)
+      animateValue(tcEl, 0, totalCompleted, 800, "");
+    else tcEl.textContent = fmtNum(totalCompleted);
+  }
+  const failedEl = document.getElementById("metric-total-failed");
+  if (failedEl) {
+    failedEl.textContent = fmtNum(totalFailed) + " failed";
+    failedEl.style.color = totalFailed > 0 ? "var(--rose)" : "";
+  }
+
+  // Stage breakdown
+  renderStageBreakdown(data.stage_durations || {});
+  // Daily chart
+  renderDailyChart(data.daily_counts || []);
+  // DORA grades
+  const doraContainer = document.getElementById("dora-grades-container");
+  if (doraContainer && data.dora_grades) {
+    doraContainer.innerHTML = renderDoraGrades(
+      data.dora_grades as unknown as Record<
+        string,
+        { grade: string; value: number; unit: string }
+      >,
+    );
+    doraContainer.style.display = "";
+  } else if (doraContainer) {
+    doraContainer.style.display = "none";
+  }
+
+  // Cost breakdown/trend
+  if (document.getElementById("cost-breakdown-container"))
+    renderCostBreakdown();
+  if (document.getElementById("cost-trend-container")) renderCostTrend();
+  if (document.getElementById("dora-trend-container")) renderDoraTrend();
+  if (document.getElementById("stage-performance-container"))
+    renderStagePerformance();
+  if (document.getElementById("bottleneck-alert-container"))
+    renderBottleneckAlert();
+  if (document.getElementById("throughput-trend-container"))
+    renderThroughputTrend();
+  if (document.getElementById("capacity-forecast-container"))
+    renderCapacityForecast();
+}
+
+function renderStageBreakdown(stageDurations: Record<string, number>): void {
+  const container = document.getElementById("stage-breakdown");
+  if (!container) return;
+  const keys = Object.keys(stageDurations);
+  if (keys.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No data</p></div>';
+    return;
+  }
+
+  let maxVal = 0;
+  for (const k of keys) {
+    if (stageDurations[k] > maxVal) maxVal = stageDurations[k];
+  }
+  if (maxVal === 0) maxVal = 1;
+
+  let html = "";
+  keys.forEach((stage, i) => {
+    const val = stageDurations[stage];
+    const pct = (val / maxVal) * 100;
+    const colorIdx = i % STAGE_COLORS.length;
+    html +=
+      `<div class="stage-bar-row">` +
+      `<span class="stage-bar-label">${escapeHtml(stage)}</span>` +
+      `<div class="stage-bar-track-h"><div class="stage-bar-fill-h ${STAGE_COLORS[colorIdx]}" style="width:${pct}%"></div></div>` +
+      `<span class="stage-bar-value">${formatDuration(val)}</span></div>`;
+  });
+  container.innerHTML = html;
+}
+
+function renderDailyChart(dailyCounts: any[]): void {
+  const container = document.getElementById("daily-chart");
+  if (!container) return;
+  if (!dailyCounts || dailyCounts.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No data</p></div>';
+    return;
+  }
+  container.innerHTML = renderSVGBarChart(dailyCounts);
+}
+
+function renderCostBreakdown(): void {
+  const container = document.getElementById("cost-breakdown-container");
+  if (!container) return;
+
+  api
+    .fetchCostBreakdown()
+    .then((data) => {
+      store.set("costBreakdownCache", data as any);
+      let html = "";
+
+      if (data.by_model) {
+        html +=
+          '<div class="cost-section"><div class="cost-section-label">COST BY MODEL</div>';
+        const modelColors: Record<string, string> = {
+          opus: "#7c3aed",
+          sonnet: "#00d4ff",
+          haiku: "#4ade80",
+        };
+        const models = Object.keys(data.by_model);
+        let maxModel = 0;
+        models.forEach((m) => {
+          if (data.by_model![m] > maxModel) maxModel = data.by_model![m];
+        });
+        if (maxModel === 0) maxModel = 1;
+        models.forEach((m) => {
+          const val = data.by_model![m];
+          const pct = (val / maxModel) * 100;
+          const color = modelColors[m.toLowerCase()] || "#5a6d8a";
+          html +=
+            `<div class="cost-bar-row"><span class="cost-bar-label">${escapeHtml(m)}</span>` +
+            `<div class="cost-bar-track-h"><div class="cost-bar-fill-h" style="width:${pct}%;background:${color}"></div></div>` +
+            `<span class="cost-bar-value">$${val.toFixed(2)}</span></div>`;
+        });
+        html += "</div>";
+      }
+
+      if (data.by_stage) {
+        html +=
+          '<div class="cost-section"><div class="cost-section-label">COST BY STAGE</div>';
+        const stages = Object.keys(data.by_stage);
+        let maxStage = 0;
+        stages.forEach((s) => {
+          if (data.by_stage![s] > maxStage) maxStage = data.by_stage![s];
+        });
+        if (maxStage === 0) maxStage = 1;
+        stages.forEach((s) => {
+          const val = data.by_stage![s];
+          const pct = (val / maxStage) * 100;
+          const barColor =
+            (STAGE_HEX as Record<string, string>)[s] || "#5a6d8a";
+          html +=
+            `<div class="cost-bar-row"><span class="cost-bar-label">${escapeHtml(s)}</span>` +
+            `<div class="cost-bar-track-h"><div class="cost-bar-fill-h" style="width:${pct}%;background:${barColor}"></div></div>` +
+            `<span class="cost-bar-value">$${val.toFixed(2)}</span></div>`;
+        });
+        html += "</div>";
+      }
+
+      if (data.by_issue?.length) {
+        html +=
+          '<div class="cost-section"><div class="cost-section-label">COST PER ISSUE</div>';
+        html +=
+          '<table class="cost-issue-table"><thead><tr><th>Issue</th><th>Cost</th></tr></thead><tbody>';
+        const sorted = [...data.by_issue].sort(
+          (a, b) => (b.cost || 0) - (a.cost || 0),
+        );
+        sorted.forEach((item) => {
+          html += `<tr><td>#${item.issue}</td><td>$${(item.cost || 0).toFixed(2)}</td></tr>`;
+        });
+        html += "</tbody></table></div>";
+      }
+
+      if (data.budget != null && data.spent != null) {
+        const budgetPct =
+          data.budget > 0 ? Math.min((data.spent / data.budget) * 100, 100) : 0;
+        const budgetClass =
+          budgetPct >= 80
+            ? "cost-over"
+            : budgetPct >= 60
+              ? "cost-warn"
+              : "cost-ok";
+        html +=
+          `<div class="cost-section"><div class="cost-section-label">BUDGET UTILIZATION</div>` +
+          `<div class="budget-util-bar"><div class="cost-bar-track"><div class="cost-bar-fill ${budgetClass}" style="width:${budgetPct.toFixed(0)}%"></div></div>` +
+          `<span class="budget-util-text">$${data.spent.toFixed(2)} / $${data.budget.toFixed(2)} (${budgetPct.toFixed(0)}%)</span></div></div>`;
+      }
+
+      container.innerHTML =
+        html || '<div class="empty-state"><p>No cost data</p></div>';
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderCostTrend(): void {
+  const container = document.getElementById("cost-trend-container");
+  if (!container) return;
+  api
+    .fetchCostTrend()
+    .then((data) => {
+      const points = data.points || [];
+      if (points.length === 0) {
+        container.innerHTML =
+          '<div class="empty-state"><p>No trend data</p></div>';
+        return;
+      }
+      container.innerHTML = renderSVGLineChart(
+        points,
+        "cost",
+        "#00d4ff",
+        300,
+        100,
+      );
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderDoraTrend(): void {
+  const container = document.getElementById("dora-trend-container");
+  if (!container) return;
+  api
+    .fetchDoraTrend()
+    .then((data) => {
+      const metrics = [
+        { key: "deploy_freq", label: "Deploy Freq", color: "#00d4ff" },
+        { key: "lead_time", label: "Lead Time", color: "#0066ff" },
+        { key: "cfr", label: "Change Fail Rate", color: "#f43f5e" },
+        { key: "mttr", label: "MTTR", color: "#4ade80" },
+      ];
+      let html = '<div class="dora-trend-grid">';
+      for (const m of metrics) {
+        const points = data[m.key] || [];
+        html += `<div class="dora-trend-card"><span class="dora-trend-label">${escapeHtml(m.label)}</span>`;
+        html +=
+          points.length > 0
+            ? renderSparkline(
+                points as Array<number | { value: number }>,
+                m.color,
+                120,
+                30,
+              )
+            : '<span class="dora-trend-empty">\u2014</span>';
+        html += "</div>";
+      }
+      html += "</div>";
+      container.innerHTML = html;
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderStagePerformance(): void {
+  const container = document.getElementById("stage-performance-container");
+  if (!container) return;
+  api
+    .fetchStagePerformance()
+    .then((data) => {
+      const stages = data.stages || [];
+      if (stages.length === 0) {
+        container.innerHTML =
+          '<div class="empty-state"><p>No stage performance data</p></div>';
+        return;
+      }
+      let html =
+        '<table class="stage-perf-table"><thead><tr><th>Stage</th><th>Avg</th><th>Min</th><th>Max</th><th>Count</th><th>Trend</th></tr></thead><tbody>';
+      for (const s of stages) {
+        let trendArrow = "";
+        if (s.trend_pct != null) {
+          if (s.trend_pct > 5)
+            trendArrow = `<span class="trend-up">\u2191 ${s.trend_pct.toFixed(0)}%</span>`;
+          else if (s.trend_pct < -5)
+            trendArrow = `<span class="trend-down">\u2193 ${Math.abs(s.trend_pct).toFixed(0)}%</span>`;
+          else trendArrow = '<span class="trend-flat">\u2192</span>';
+        }
+        html +=
+          `<tr><td>${escapeHtml(s.name || s.stage || "")}</td><td>${formatDuration(s.avg_s)}</td><td>${formatDuration(s.min_s)}</td>` +
+          `<td>${formatDuration(s.max_s)}</td><td>${s.count || 0}</td><td>${trendArrow}</td></tr>`;
+      }
+      html += "</tbody></table>";
+      container.innerHTML = html;
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderBottleneckAlert(): void {
+  const container = document.getElementById("bottleneck-alert-container");
+  if (!container) return;
+  api
+    .fetchBottlenecks()
+    .then((data) => {
+      const bottlenecks = data.bottlenecks || [];
+      if (bottlenecks.length === 0) {
+        container.innerHTML = "";
+        return;
+      }
+      let html = "";
+      for (const b of bottlenecks) {
+        if (b.impact === "low") continue;
+        const msg =
+          escapeHtml(b.stage || "Unknown") +
+          " stage averages " +
+          formatDuration(b.avgDuration) +
+          " (" +
+          escapeHtml(b.impact) +
+          " impact)";
+        const suggestion = b.suggestion
+          ? `<div class="bottleneck-suggestion">${escapeHtml(b.suggestion)}</div>`
+          : "";
+        html += `<div class="bottleneck-alert"><span class="bottleneck-icon">\u26A0</span><span class="bottleneck-msg">${msg}</span>${suggestion}</div>`;
+      }
+      container.innerHTML = html;
+    })
+    .catch(() => {
+      container.innerHTML = "";
+    });
+}
+
+function renderThroughputTrend(): void {
+  const container = document.getElementById("throughput-trend-container");
+  if (!container) return;
+  api
+    .fetchThroughputTrend()
+    .then((data) => {
+      const points = data.points || [];
+      if (points.length === 0) {
+        container.innerHTML =
+          '<div class="empty-state"><p>No throughput data</p></div>';
+        return;
+      }
+      container.innerHTML = renderSVGLineChart(
+        points,
+        "throughput",
+        "#4ade80",
+        300,
+        100,
+      );
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function renderCapacityForecast(): void {
+  const container = document.getElementById("capacity-forecast-container");
+  if (!container) return;
+  api
+    .fetchCapacity()
+    .then((data) => {
+      if (!data.rate && !data.queue_clear_hours) {
+        container.innerHTML =
+          '<div class="empty-state"><p>No capacity data</p></div>';
+        return;
+      }
+      const rate = data.rate != null ? data.rate.toFixed(1) : "?";
+      const clearTime =
+        data.queue_clear_hours != null
+          ? data.queue_clear_hours.toFixed(1)
+          : "?";
+      container.innerHTML = `<div class="capacity-forecast"><span class="capacity-text">At current rate (${rate}/hr), queue will clear in <strong>${clearTime} hours</strong></span></div>`;
+    })
+    .catch((err) => {
+      container.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+export const metricsView: View = {
+  init() {
+    fetchMetrics();
+  },
+  render(_data: FleetState) {
+    // Metrics use cached data; don't re-fetch on every WS push
+    const cache = store.get("metricsCache");
+    if (cache) renderMetrics(cache);
+  },
+  destroy() {},
+};