shipwright-cli 2.4.0 → 3.0.0

package/dashboard/src/core/sse.test.ts

@@ -0,0 +1,144 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { SSEClient } from "./sse";
+
+const EventSourceOpen = 1;
+const EventSourceClosed = 2;
+
+describe("SSEClient", () => {
+  let mockEventSource: {
+    close: ReturnType<typeof vi.fn>;
+    readyState: number;
+    onmessage: ((e: { data: string }) => void) | null;
+    onerror: (() => void) | null;
+  };
+  let EventSourceConstructor: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockEventSource = {
+      close: vi.fn(),
+      readyState: EventSourceClosed,
+      onmessage: null,
+      onerror: null,
+    };
+    EventSourceConstructor = vi.fn(function (this: unknown) {
+      return mockEventSource;
+    }) as ReturnType<typeof vi.fn> & { OPEN: number };
+    EventSourceConstructor.OPEN = EventSourceOpen;
+    EventSourceConstructor.CLOSED = EventSourceClosed;
+    EventSourceConstructor.CONNECTING = 0;
+    vi.stubGlobal("EventSource", EventSourceConstructor);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  describe("constructor", () => {
+    it("stores url and callbacks", () => {
+      const onMessage = vi.fn();
+      const onError = vi.fn();
+      const client = new SSEClient(
+        "https://example.com/events",
+        onMessage,
+        onError,
+      );
+      expect(client).toBeDefined();
+      // Verify connect uses stored values
+      client.connect();
+      expect(EventSourceConstructor).toHaveBeenCalledWith(
+        "https://example.com/events",
+      );
+    });
+  });
+
+  describe("connect", () => {
+    it("creates EventSource with url", () => {
+      const client = new SSEClient("/api/logs/42/stream", vi.fn());
+      client.connect();
+      expect(EventSourceConstructor).toHaveBeenCalledWith(
+        "/api/logs/42/stream",
+      );
+    });
+
+    it("closes existing connection before reconnecting", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      client.connect();
+      const firstES = EventSourceConstructor.mock.results[0].value;
+      client.connect();
+      expect(firstES.close).toHaveBeenCalled();
+    });
+
+    it("registers onmessage handler that forwards to callback", () => {
+      const onMessage = vi.fn();
+      const client = new SSEClient("/api/stream", onMessage);
+      client.connect();
+
+      expect(mockEventSource.onmessage).toBeDefined();
+      mockEventSource.onmessage!({ data: "hello world" });
+      expect(onMessage).toHaveBeenCalledWith("hello world");
+    });
+
+    it("registers onerror handler when onError provided", () => {
+      const onError = vi.fn();
+      const client = new SSEClient("/api/stream", vi.fn(), onError);
+      client.connect();
+
+      expect(mockEventSource.onerror).toBeDefined();
+      mockEventSource.onerror!();
+      expect(onError).toHaveBeenCalled();
+    });
+  });
+
+  describe("close", () => {
+    it("closes EventSource and sets to null", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      client.connect();
+      client.close();
+      expect(mockEventSource.close).toHaveBeenCalled();
+      // eventSource is private, but isConnected should reflect closed state
+      mockEventSource.readyState = EventSourceClosed;
+      expect(client.isConnected()).toBe(false);
+    });
+
+    it("is safe to call when not connected", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      expect(() => client.close()).not.toThrow();
+    });
+  });
+
+  describe("isConnected", () => {
+    it("returns false when not connected", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      expect(client.isConnected()).toBe(false);
+    });
+
+    it("returns false when EventSource is closed", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      client.connect();
+      mockEventSource.readyState = EventSourceClosed;
+      expect(client.isConnected()).toBe(false);
+    });
+
+    it("returns true when EventSource is OPEN", () => {
+      const client = new SSEClient("/api/stream", vi.fn());
+      client.connect();
+      mockEventSource.readyState = EventSourceOpen;
+      expect(client.isConnected()).toBe(true);
+    });
+  });
+
+  describe("message handling", () => {
+    it("receives multiple messages", () => {
+      const onMessage = vi.fn();
+      const client = new SSEClient("/api/stream", onMessage);
+      client.connect();
+
+      mockEventSource.onmessage!({ data: "msg1" });
+      mockEventSource.onmessage!({ data: "msg2" });
+
+      expect(onMessage).toHaveBeenCalledTimes(2);
+      expect(onMessage).toHaveBeenNthCalledWith(1, "msg1");
+      expect(onMessage).toHaveBeenNthCalledWith(2, "msg2");
+    });
+  });
+});

package/dashboard/src/views/metrics.test.ts

@@ -0,0 +1,186 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { store } from "../core/state";
+import type { FleetState, MetricsData } from "../types/api";
+
+vi.mock("../core/api", () => ({
+  fetchMetricsHistory: vi.fn().mockResolvedValue({
+    success_rate: 0.95,
+    avg_duration_s: 600,
+    throughput_per_hour: 2.5,
+    total_completed: 100,
+    total_failed: 5,
+    stage_durations: {},
+    daily_counts: [],
+  }),
+  fetchCostBreakdown: vi.fn().mockResolvedValue({}),
+  fetchCostTrend: vi.fn().mockResolvedValue({ points: [] }),
+  fetchDoraTrend: vi.fn().mockResolvedValue({}),
+  fetchStagePerformance: vi.fn().mockResolvedValue({ stages: [] }),
+  fetchBottlenecks: vi.fn().mockResolvedValue({ bottlenecks: [] }),
+  fetchThroughputTrend: vi.fn().mockResolvedValue({ points: [] }),
+  fetchCapacity: vi.fn().mockResolvedValue({ rate: 1, queue_clear_hours: 2 }),
+}));
+
+function createMetricsDOM(): void {
+  const ids = [
+    "metric-donut-wrap",
+    "metric-avg-duration",
+    "metric-throughput",
+    "metric-total-completed",
+    "metric-total-failed",
+    "stage-breakdown",
+    "daily-chart",
+    "dora-grades-container",
+  ];
+  for (const id of ids) {
+    const el = document.createElement("div");
+    el.id = id;
+    document.body.appendChild(el);
+  }
+}
+
+function cleanupMetricsDOM(): void {
+  const ids = [
+    "metric-donut-wrap",
+    "metric-avg-duration",
+    "metric-throughput",
+    "metric-total-completed",
+    "metric-total-failed",
+    "stage-breakdown",
+    "daily-chart",
+    "dora-grades-container",
+  ];
+  ids.forEach((id) => document.getElementById(id)?.remove());
+}
+
+function emptyFleetState(): FleetState {
+  return {
+    timestamp: new Date().toISOString(),
+    daemon: {
+      running: false,
+      pid: null,
+      uptime_s: 0,
+      maxParallel: 0,
+      pollInterval: 5,
+    },
+    pipelines: [],
+    queue: [],
+    events: [],
+    scale: {},
+    metrics: {},
+    agents: [],
+    machines: [],
+    cost: { today_spent: 0, daily_budget: 0, pct_used: 0 },
+    dora: {} as any,
+  };
+}
+
+describe("MetricsView", () => {
+  beforeEach(() => {
+    store.set("firstRender", false);
+    store.set("metricsCache", null);
+    createMetricsDOM();
+  });
+
+  afterEach(() => {
+    cleanupMetricsDOM();
+    vi.clearAllMocks();
+  });
+
+  it("renders metric cards with cached data", async () => {
+    const { metricsView } = await import("./metrics");
+    const metricsData: MetricsData = {
+      success_rate: 0.92,
+      avg_duration_s: 420,
+      throughput_per_hour: 3.5,
+      total_completed: 50,
+      total_failed: 4,
+      stage_durations: { plan: 60, code: 300, review: 120 },
+      daily_counts: [{ date: "2025-02-17", completed: 5, failed: 1 }],
+      dora_grades: {} as any,
+    };
+    store.set("metricsCache", metricsData);
+    const data = emptyFleetState();
+    metricsView.render(data);
+    const avgEl = document.getElementById("metric-avg-duration");
+    const tpEl = document.getElementById("metric-throughput");
+    const tcEl = document.getElementById("metric-total-completed");
+    expect(avgEl?.textContent).toBeTruthy();
+    expect(tpEl?.textContent).toBe("3.50");
+    expect(tcEl?.textContent).toContain("50");
+  });
+
+  it("handles missing data gracefully", async () => {
+    const { metricsView } = await import("./metrics");
+    const emptyMetrics: MetricsData = {
+      success_rate: 0,
+      avg_duration_s: 0,
+      throughput_per_hour: 0,
+      total_completed: 0,
+      total_failed: 0,
+      stage_durations: {},
+      daily_counts: [],
+      dora_grades: {} as any,
+    };
+    store.set("metricsCache", emptyMetrics);
+    const data = emptyFleetState();
+    expect(() => metricsView.render(data)).not.toThrow();
+    const donutEl = document.getElementById("metric-donut-wrap");
+    expect(donutEl?.innerHTML).toBeTruthy();
+  });
+
+  it("formats numbers correctly for totals", async () => {
+    const { metricsView } = await import("./metrics");
+    const metricsData: MetricsData = {
+      success_rate: 1,
+      avg_duration_s: 0,
+      throughput_per_hour: 0,
+      total_completed: 1234,
+      total_failed: 10,
+      stage_durations: {},
+      daily_counts: [],
+      dora_grades: {} as any,
+    };
+    store.set("metricsCache", metricsData);
+    const data = emptyFleetState();
+    metricsView.render(data);
+    const tcEl = document.getElementById("metric-total-completed");
+    const failedEl = document.getElementById("metric-total-failed");
+    expect(tcEl?.textContent).toContain("1,234");
+    expect(failedEl?.textContent).toContain("10");
+  });
+
+  it("renders stage breakdown when stage_durations provided", async () => {
+    const { metricsView } = await import("./metrics");
+    const metricsData: MetricsData = {
+      success_rate: 0,
+      avg_duration_s: 0,
+      throughput_per_hour: 0,
+      total_completed: 0,
+      total_failed: 0,
+      stage_durations: { plan: 120, code: 400 },
+      daily_counts: [],
+      dora_grades: {} as any,
+    };
+    store.set("metricsCache", metricsData);
+    const data = emptyFleetState();
+    metricsView.render(data);
+    const breakdownEl = document.getElementById("stage-breakdown");
+    expect(breakdownEl?.innerHTML).toContain("plan");
+    expect(breakdownEl?.innerHTML).toContain("code");
+  });
+
+  it("shows empty state when no metrics cache", async () => {
+    const { metricsView } = await import("./metrics");
+    store.set("metricsCache", null);
+    const data = emptyFleetState();
+    metricsView.render(data);
+    expect(() => metricsView.render(data)).not.toThrow();
+  });
+
+  it("init and destroy do not throw", async () => {
+    const { metricsView } = await import("./metrics");
+    expect(() => metricsView.init()).not.toThrow();
+    expect(() => metricsView.destroy()).not.toThrow();
+  });
+});

package/dashboard/src/views/overview.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { store } from "../core/state";
+import type { FleetState } from "../types/api";
+
+vi.mock("../core/api", () => ({
+  fetchQueueDetailed: vi.fn().mockResolvedValue({ items: [] }),
+}));
+
+vi.mock("./pipelines", () => ({
+  fetchPipelineDetail: vi.fn(),
+}));
+
+vi.mock("../components/header", () => ({
+  renderCostTicker: vi.fn(),
+}));
+
+function createOverviewDOM(): void {
+  const ids = [
+    "stat-status",
+    "status-dot",
+    "stat-active",
+    "stat-active-bar",
+    "stat-queue",
+    "stat-queue-sub",
+    "stat-completed",
+    "stat-failed-sub",
+    "active-pipelines",
+    "queue-list",
+    "activity-feed",
+    "res-cpu-bar",
+    "res-cpu-info",
+    "res-mem-bar",
+    "res-mem-info",
+    "res-budget-bar",
+    "res-budget-info",
+    "resource-constraint",
+    "machines-section",
+    "machines-grid",
+  ];
+  for (const id of ids) {
+    if (!document.getElementById(id)) {
+      const el = document.createElement("div");
+      el.id = id;
+      document.body.appendChild(el);
+    }
+  }
+}
+
+function cleanupOverviewDOM(): void {
+  const ids = [
+    "stat-status",
+    "status-dot",
+    "stat-active",
+    "stat-active-bar",
+    "stat-queue",
+    "stat-queue-sub",
+    "stat-completed",
+    "stat-failed-sub",
+    "active-pipelines",
+    "queue-list",
+    "activity-feed",
+    "res-cpu-bar",
+    "res-cpu-info",
+    "res-mem-bar",
+    "res-mem-info",
+    "res-budget-bar",
+    "res-budget-info",
+    "resource-constraint",
+    "machines-section",
+    "machines-grid",
+  ];
+  ids.forEach((id) => document.getElementById(id)?.remove());
+}
+
+function emptyFleetState(): FleetState {
+  return {
+    timestamp: new Date().toISOString(),
+    daemon: {
+      running: false,
+      pid: null,
+      uptime_s: 0,
+      maxParallel: 0,
+      pollInterval: 5,
+    },
+    pipelines: [],
+    queue: [],
+    events: [],
+    scale: {},
+    metrics: {},
+    agents: [],
+    machines: [],
+    cost: { today_spent: 0, daily_budget: 0, pct_used: 0 },
+    dora: {} as any,
+  };
+}
+
+describe("OverviewView", () => {
+  beforeEach(() => {
+    store.set("firstRender", false);
+    createOverviewDOM();
+  });
+
+  afterEach(() => {
+    cleanupOverviewDOM();
+    vi.clearAllMocks();
+  });
+
+  it("renders without crashing when given empty data", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    expect(() => overviewView.render(data)).not.toThrow();
+  });
+
+  it("renders pipeline summary section with empty pipelines", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    overviewView.render(data);
+    const container = document.getElementById("active-pipelines");
+    expect(container).toBeTruthy();
+    expect(container!.innerHTML).toContain("No active pipelines");
+  });
+
+  it("renders pipeline cards when pipelines exist", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    data.pipelines = [
+      {
+        issue: 42,
+        title: "Fix bug",
+        stage: "code",
+        stagesDone: ["plan"],
+        elapsed_s: 120,
+        iteration: 2,
+        maxIterations: 20,
+      },
+    ];
+    overviewView.render(data);
+    const container = document.getElementById("active-pipelines");
+    expect(container).toBeTruthy();
+    expect(container!.innerHTML).toContain("#42");
+    expect(container!.innerHTML).toContain("Fix bug");
+    expect(container!.innerHTML).toContain("pipeline-card");
+  });
+
+  it("handles null/undefined state gracefully", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    (data as any).pipelines = null;
+    (data as any).queue = undefined;
+    (data as any).events = undefined;
+    expect(() => overviewView.render(data)).not.toThrow();
+    const pipelinesEl = document.getElementById("active-pipelines");
+    expect(pipelinesEl!.innerHTML).toContain("No active pipelines");
+  });
+
+  it("renders queue empty state", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    overviewView.render(data);
+    const queueEl = document.getElementById("queue-list");
+    expect(queueEl).toBeTruthy();
+    expect(queueEl!.innerHTML).toContain("Queue clear");
+  });
+
+  it("renders activity empty state", async () => {
+    const { overviewView } = await import("./overview");
+    const data = emptyFleetState();
+    overviewView.render(data);
+    const activityEl = document.getElementById("activity-feed");
+    expect(activityEl).toBeTruthy();
+    expect(activityEl!.innerHTML).toContain("Awaiting events");
+  });
+});

package/dashboard/src/views/pipelines.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { store } from "../core/state";
+import type { FleetState } from "../types/api";
+
+vi.mock("../core/api", () => ({
+  fetchPipelineDetail: vi.fn().mockResolvedValue({}),
+  fetchPipelineReasoning: vi.fn().mockResolvedValue({ reasoning: [] }),
+  fetchPipelineFailures: vi.fn().mockResolvedValue({ failures: [] }),
+  fetchArtifact: vi.fn().mockResolvedValue({ content: "" }),
+  fetchGitHubStatus: vi.fn().mockResolvedValue({ configured: false }),
+  fetchPipelineQuality: vi.fn().mockResolvedValue({ results: [] }),
+  fetchApprovalGates: vi.fn().mockResolvedValue({ enabled: false }),
+  fetchLogs: vi.fn().mockResolvedValue({ content: "" }),
+}));
+
+vi.mock("../components/modal", () => ({
+  updateBulkToolbar: vi.fn(),
+}));
+
+function createPipelinesDOM(): void {
+  const tbody = document.createElement("tbody");
+  tbody.id = "pipeline-table-body";
+  document.body.appendChild(tbody);
+
+  const filters = document.createElement("div");
+  filters.id = "pipeline-filters";
+  const chipAll = document.createElement("span");
+  chipAll.className = "filter-chip active";
+  chipAll.setAttribute("data-filter", "all");
+  filters.appendChild(chipAll);
+  document.body.appendChild(filters);
+
+  const closeBtn = document.createElement("button");
+  closeBtn.id = "detail-panel-close";
+  document.body.appendChild(closeBtn);
+
+  const selectAll = document.createElement("input");
+  selectAll.id = "pipeline-select-all";
+  selectAll.type = "checkbox";
+  document.body.appendChild(selectAll);
+
+  const panel = document.createElement("div");
+  panel.id = "pipeline-detail-panel";
+  const title = document.createElement("div");
+  title.id = "detail-panel-title";
+  const body = document.createElement("div");
+  body.id = "detail-panel-body";
+  panel.appendChild(title);
+  panel.appendChild(body);
+  document.body.appendChild(panel);
+}
+
+function cleanupPipelinesDOM(): void {
+  [
+    "pipeline-table-body",
+    "pipeline-filters",
+    "detail-panel-close",
+    "pipeline-select-all",
+    "pipeline-detail-panel",
+  ].forEach((id) => document.getElementById(id)?.remove());
+}
+
+function emptyFleetState(): FleetState {
+  return {
+    timestamp: new Date().toISOString(),
+    daemon: {
+      running: false,
+      pid: null,
+      uptime_s: 0,
+      maxParallel: 0,
+      pollInterval: 5,
+    },
+    pipelines: [],
+    queue: [],
+    events: [],
+    scale: {},
+    metrics: {},
+    agents: [],
+    machines: [],
+    cost: { today_spent: 0, daily_budget: 0, pct_used: 0 },
+    dora: {} as any,
+  };
+}
+
+describe("PipelinesView", () => {
+  beforeEach(() => {
+    store.set("pipelineFilter", "all");
+    store.set("selectedPipelineIssue", null);
+    store.set("selectedIssues", {});
+    store.set("fleetState", emptyFleetState());
+    createPipelinesDOM();
+  });
+
+  afterEach(() => {
+    cleanupPipelinesDOM();
+    vi.clearAllMocks();
+  });
+
+  it("renders pipeline list from mock data", async () => {
+    const { pipelinesView } = await import("./pipelines");
+    pipelinesView.init();
+    const data = emptyFleetState();
+    data.pipelines = [
+      {
+        issue: 100,
+        title: "Add feature X",
+        stage: "code",
+        stagesDone: ["plan", "design"],
+        elapsed_s: 300,
+        iteration: 3,
+        maxIterations: 20,
+      },
+    ];
+    pipelinesView.render(data);
+    const tbody = document.getElementById("pipeline-table-body");
+    expect(tbody).toBeTruthy();
+    expect(tbody!.innerHTML).toContain("#100");
+    expect(tbody!.innerHTML).toContain("Add feature X");
+    expect(tbody!.innerHTML).toContain("ACTIVE");
+  });
+
+  it("renders empty state when no pipelines", async () => {
+    const { pipelinesView } = await import("./pipelines");
+    pipelinesView.init();
+    const data = emptyFleetState();
+    pipelinesView.render(data);
+    const tbody = document.getElementById("pipeline-table-body");
+    expect(tbody).toBeTruthy();
+    expect(tbody!.innerHTML).toContain("No pipelines match filter");
+  });
+
+  it("handles various pipeline statuses from events", async () => {
+    const { pipelinesView } = await import("./pipelines");
+    pipelinesView.init();
+    const data = emptyFleetState();
+    data.pipelines = [];
+    data.events = [
+      {
+        type: "pipeline.completed",
+        issue: 50,
+        issueTitle: "Done",
+        duration_s: 600,
+      },
+      {
+        type: "pipeline.failed",
+        issue: 51,
+        issueTitle: "Failed",
+        duration_s: 120,
+      },
+    ];
+    pipelinesView.render(data);
+    const tbody = document.getElementById("pipeline-table-body");
+    expect(tbody!.innerHTML).toContain("#50");
+    expect(tbody!.innerHTML).toContain("#51");
+    expect(tbody!.innerHTML).toContain("COMPLETED");
+    expect(tbody!.innerHTML).toContain("FAILED");
+  });
+
+  it("filters by status when pipelineFilter is set", async () => {
+    const { pipelinesView } = await import("./pipelines");
+    store.set("pipelineFilter", "active");
+    pipelinesView.init();
+    const data = emptyFleetState();
+    data.pipelines = [
+      {
+        issue: 1,
+        title: "Active",
+        stage: "code",
+        stagesDone: [],
+        elapsed_s: 60,
+        iteration: 1,
+        maxIterations: 20,
+      },
+    ];
+    data.events = [
+      { type: "pipeline.completed", issue: 2, issueTitle: "Done" },
+    ];
+    pipelinesView.render(data);
+    const tbody = document.getElementById("pipeline-table-body");
+    expect(tbody!.innerHTML).toContain("#1");
+    expect(tbody!.innerHTML).not.toContain("#2");
+  });
+});