shipwright-cli 2.3.1 → 3.0.0

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

@@ -148,9 +148,49 @@ describe("Router", () => {
       router.switchTab("metrics");
       expect(mockView.render).toHaveBeenCalledWith(fakeState);
     });
+
+    it("clears team refresh timer when leaving team tab", () => {
+      const timer = setInterval(() => {}, 999999);
+      router.__setTeamRefreshTimerForTest(timer);
+
+      const clearSpy = vi.spyOn(global, "clearInterval");
+
+      store.set("activeTab", "team");
+      router.switchTab("overview");
+
+      expect(clearSpy).toHaveBeenCalledWith(timer);
+
+      router.__setTeamRefreshTimerForTest(null);
+      clearSpy.mockRestore();
+    });
   });
 
   describe("error boundaries", () => {
+    it("shows string errors when non-Error is thrown", () => {
+      const errorView = {
+        init: vi.fn(() => {
+          throw "string error";
+        }),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+
+      const panel = document.getElementById("panel-metrics");
+      const errorBoundary = panel?.querySelector(".tab-error-boundary");
+      expect(errorBoundary).toBeTruthy();
+      expect(errorBoundary?.textContent).toContain("string error");
+
+      consoleSpy.mockRestore();
+    });
+
     it("catches init errors and shows error boundary", () => {
       const errorView = {
         init: vi.fn(() => {
@@ -262,5 +302,272 @@ describe("Router", () => {
       router.renderActiveView();
       expect(mockView.render).not.toHaveBeenCalled();
     });
+
+    it("does nothing when no view is registered for active tab", () => {
+      store.set("activeTab", "agents");
+      store.set("fleetState", { pipelines: [] });
+
+      expect(() => router.renderActiveView()).not.toThrow();
+    });
+
+    it("catches render errors and shows error boundary", () => {
+      const errorView = {
+        init: vi.fn(),
+        render: vi.fn(() => {
+          throw new Error("renderActiveView render failed!");
+        }),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("fleetState", { pipelines: [] });
+      store.set("activeTab", "overview");
+
+      router.renderActiveView();
+
+      const panel = document.getElementById("panel-overview");
+      const errorBoundary = panel?.querySelector(".tab-error-boundary");
+      expect(errorBoundary).toBeTruthy();
+      expect(errorBoundary?.textContent).toContain(
+        "renderActiveView render failed!",
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("error boundary retry", () => {
+    it("retry button reinitalizes view and re-renders on success", () => {
+      let initCalled = 0;
+      const errorView = {
+        init: vi.fn(() => {
+          initCalled++;
+          if (initCalled === 1) throw new Error("First init failed");
+        }),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("fleetState", { pipelines: [] });
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+
+      const panel = document.getElementById("panel-metrics");
+      const retryBtn = panel?.querySelector(".error-boundary-retry");
+      expect(retryBtn).toBeTruthy();
+
+      retryBtn?.dispatchEvent(new Event("click", { bubbles: true }));
+
+      expect(errorView.init).toHaveBeenCalledTimes(2);
+      expect(errorView.render).toHaveBeenCalledWith({ pipelines: [] });
+      expect(panel?.querySelector(".tab-error-boundary")).toBeFalsy();
+
+      consoleSpy.mockRestore();
+    });
+
+    it("retry button does not call render when fleetState is null", () => {
+      const errorView = {
+        init: vi.fn(),
+        render: vi.fn(() => {
+          throw new Error("Render failed");
+        }),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("fleetState", { pipelines: [] });
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+      expect(errorView.render).toHaveBeenCalledTimes(1);
+
+      store.set("fleetState", null);
+
+      const panel = document.getElementById("panel-metrics");
+      const retryBtn = panel?.querySelector(".error-boundary-retry");
+      retryBtn?.dispatchEvent(new Event("click", { bubbles: true }));
+
+      expect(errorView.init).toHaveBeenCalledTimes(2);
+      expect(errorView.render).toHaveBeenCalledTimes(1);
+
+      consoleSpy.mockRestore();
+    });
+
+    it("retry button shows error boundary again when retry fails", () => {
+      const errorView = {
+        init: vi.fn(() => {
+          throw new Error("Retry failed!");
+        }),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("fleetState", { pipelines: [] });
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+
+      const panel = document.getElementById("panel-metrics");
+      const retryBtn = panel?.querySelector(".error-boundary-retry");
+      retryBtn?.dispatchEvent(new Event("click", { bubbles: true }));
+
+      const errorBoundary = panel?.querySelector(".tab-error-boundary");
+      expect(errorBoundary).toBeTruthy();
+      expect(errorBoundary?.textContent).toContain("Retry failed!");
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("setupRouter", () => {
+    beforeEach(async () => {
+      vi.resetModules();
+      store = (await import("./state")).store;
+      router = await import("./router");
+    });
+
+    it("handles tab button clicks and switches tab", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("pipelines", mockView);
+
+      router.setupRouter();
+
+      const pipelinesBtn = document.querySelector(
+        '[data-tab="pipelines"]',
+      ) as HTMLElement;
+      pipelinesBtn?.click();
+
+      expect(store.get("activeTab")).toBe("pipelines");
+    });
+
+    it("does not switch when tab button has no data-tab", () => {
+      document.body.innerHTML = `
+        <div class="tab-btn">No Tab</div>
+        <div class="tab-btn" data-tab="overview">Overview</div>
+        <div class="tab-panel" id="panel-overview"></div>
+      `;
+      store.set("activeTab", "overview");
+      router.registerView("overview", {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      });
+
+      router.setupRouter();
+
+      const noTabBtn = document.querySelector(".tab-btn");
+      noTabBtn?.dispatchEvent(new Event("click", { bubbles: true }));
+
+      expect(store.get("activeTab")).toBe("overview");
+    });
+
+    it("switches to tab from valid initial hash", () => {
+      location.hash = "#team";
+
+      router.registerView("team", {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      });
+      router.setupRouter();
+
+      expect(store.get("activeTab")).toBe("team");
+      expect(location.hash).toBe("#team");
+    });
+
+    it("initializes current view when hash is invalid", () => {
+      location.hash = "#invalid";
+      store.set("activeTab", "overview");
+
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", mockView);
+
+      router.setupRouter();
+
+      expect(mockView.init).toHaveBeenCalledTimes(1);
+    });
+
+    it("responds to hashchange events", () => {
+      router.registerView("overview", {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      });
+      router.registerView("metrics", {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      });
+
+      router.setupRouter();
+
+      store.set("activeTab", "overview");
+      location.hash = "#metrics";
+
+      window.dispatchEvent(new HashChangeEvent("hashchange"));
+
+      expect(store.get("activeTab")).toBe("metrics");
+    });
+
+    it("does not switch on hashchange when hash matches current tab", () => {
+      router.registerView("metrics", {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      });
+
+      router.setupRouter();
+
+      store.set("activeTab", "metrics");
+      location.hash = "#metrics";
+
+      const switchSpy = vi.spyOn(router, "switchTab");
+      window.dispatchEvent(new HashChangeEvent("hashchange"));
+
+      expect(switchSpy).not.toHaveBeenCalled();
+    });
+
+    it("re-renders active view when fleetState changes", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", mockView);
+
+      store.set("activeTab", "overview");
+      router.setupRouter();
+
+      store.set("fleetState", { pipelines: [], machines: [] });
+
+      expect(mockView.render).toHaveBeenCalledWith({
+        pipelines: [],
+        machines: [],
+      });
+    });
   });
 });

package/dashboard/src/core/router.ts

@@ -23,6 +23,13 @@ const VALID_TABS: TabId[] = [
 
 let teamRefreshTimer: ReturnType<typeof setInterval> | null = null;
 
+/** Test hook: set team refresh timer so switchTab can clear it when leaving team tab */
+export function __setTeamRefreshTimerForTest(
+  timer: ReturnType<typeof setInterval> | null,
+): void {
+  teamRefreshTimer = timer;
+}
+
 export function registerView(tabId: TabId, view: View): void {
   views.set(tabId, view);
 }

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();
+  });
+});