shipwright-cli 2.2.2 → 2.3.1

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

@@ -0,0 +1,235 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+// Re-create store for each test to avoid state leakage
+function createStore() {
+  // Reset module cache to get fresh store
+  const mod = require("./state");
+  return mod.store;
+}
+
+// Since the module exports a singleton, we'll test the Store class behavior
+// by importing and using the exported store, resetting between tests
+import { store } from "./state";
+import type { AppState } from "./state";
+
+describe("Store", () => {
+  beforeEach(() => {
+    // Reset to default state
+    store.update({
+      connected: false,
+      connectedAt: null,
+      fleetState: null,
+      activeTab: "overview",
+      selectedPipelineIssue: null,
+      pipelineDetail: null,
+      pipelineFilter: "all",
+      activityFilter: "all",
+      activityIssueFilter: "",
+      activityEvents: [],
+      activityOffset: 0,
+      activityHasMore: false,
+      metricsCache: null,
+      insightsCache: null,
+      machinesCache: null,
+      joinTokensCache: null,
+      costBreakdownCache: null,
+      alertsCache: null,
+      alertDismissed: false,
+      teamCache: null,
+      teamActivityCache: null,
+      daemonConfig: null,
+      currentUser: null,
+      selectedIssues: {},
+      firstRender: true,
+    });
+  });
+
+  describe("get/set", () => {
+    it("returns the initial value for a key", () => {
+      expect(store.get("connected")).toBe(false);
+      expect(store.get("activeTab")).toBe("overview");
+      expect(store.get("firstRender")).toBe(true);
+    });
+
+    it("sets and retrieves a value", () => {
+      store.set("connected", true);
+      expect(store.get("connected")).toBe(true);
+    });
+
+    it("sets activeTab correctly", () => {
+      store.set("activeTab", "pipelines");
+      expect(store.get("activeTab")).toBe("pipelines");
+    });
+
+    it("handles null values", () => {
+      store.set("fleetState", null);
+      expect(store.get("fleetState")).toBeNull();
+    });
+
+    it("handles numeric values", () => {
+      store.set("selectedPipelineIssue", 42);
+      expect(store.get("selectedPipelineIssue")).toBe(42);
+    });
+  });
+
+  describe("getState", () => {
+    it("returns a snapshot of the full state", () => {
+      const state = store.getState();
+      expect(state.connected).toBe(false);
+      expect(state.activeTab).toBe("overview");
+      expect(state).toHaveProperty("fleetState");
+    });
+  });
+
+  describe("update", () => {
+    it("updates multiple keys at once", () => {
+      store.update({
+        connected: true,
+        connectedAt: 1234567890,
+        activeTab: "metrics",
+      });
+      expect(store.get("connected")).toBe(true);
+      expect(store.get("connectedAt")).toBe(1234567890);
+      expect(store.get("activeTab")).toBe("metrics");
+    });
+
+    it("does not trigger listeners when values haven't changed", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.update({ connected: false }); // already false
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("triggers listeners for each changed key", () => {
+      const connectedListener = vi.fn();
+      const tabListener = vi.fn();
+      store.subscribe("connected", connectedListener);
+      store.subscribe("activeTab", tabListener);
+
+      store.update({ connected: true, activeTab: "insights" });
+
+      expect(connectedListener).toHaveBeenCalledWith(true, false);
+      expect(tabListener).toHaveBeenCalledWith("insights", "overview");
+    });
+  });
+
+  describe("subscribe", () => {
+    it("calls listener when the subscribed key changes", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledWith(true, false);
+    });
+
+    it("does not call listener for unchanged value (same reference)", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.set("connected", false); // already false
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("returns an unsubscribe function", () => {
+      const listener = vi.fn();
+      const unsub = store.subscribe("connected", listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      unsub();
+      store.set("connected", false);
+      expect(listener).toHaveBeenCalledTimes(1); // not called again
+    });
+
+    it("supports multiple listeners on the same key", () => {
+      const listener1 = vi.fn();
+      const listener2 = vi.fn();
+      store.subscribe("activeTab", listener1);
+      store.subscribe("activeTab", listener2);
+
+      store.set("activeTab", "team");
+
+      expect(listener1).toHaveBeenCalledWith("team", "overview");
+      expect(listener2).toHaveBeenCalledWith("team", "overview");
+    });
+
+    it("supports listeners on different keys independently", () => {
+      const connListener = vi.fn();
+      const tabListener = vi.fn();
+      store.subscribe("connected", connListener);
+      store.subscribe("activeTab", tabListener);
+
+      store.set("connected", true);
+      expect(connListener).toHaveBeenCalledTimes(1);
+      expect(tabListener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("onAny", () => {
+    it("fires on any state change", () => {
+      const listener = vi.fn();
+      store.onAny(listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      store.set("activeTab", "metrics");
+      expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it("returns an unsubscribe function", () => {
+      const listener = vi.fn();
+      const unsub = store.onAny(listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      unsub();
+      store.set("activeTab", "metrics");
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("receives the full state object", () => {
+      const listener = vi.fn();
+      store.onAny(listener);
+      store.set("connected", true);
+
+      const receivedState = listener.mock.calls[0][0] as AppState;
+      expect(receivedState.connected).toBe(true);
+      expect(receivedState.activeTab).toBe("overview");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles rapid updates without losing data", () => {
+      for (let i = 0; i < 100; i++) {
+        store.set("activityOffset", i);
+      }
+      expect(store.get("activityOffset")).toBe(99);
+    });
+
+    it("handles object values (reference equality check)", () => {
+      const events = [{ type: "test" }];
+      const listener = vi.fn();
+      store.subscribe("activityEvents", listener);
+
+      store.set("activityEvents", events);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      // Same reference, should not fire
+      store.set("activityEvents", events);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      // New reference with same content, WILL fire (reference check)
+      store.set("activityEvents", [...events]);
+      expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it("handles selectedIssues record updates", () => {
+      store.set("selectedIssues", { "123": true, "456": true });
+      expect(store.get("selectedIssues")).toEqual({
+        "123": true,
+        "456": true,
+      });
+    });
+  });
+});

package/dashboard/src/core/state.ts

@@ -0,0 +1,150 @@
+// Global state store with typed subscriptions
+
+import type {
+  FleetState,
+  TabId,
+  PipelineDetail,
+  InsightsData,
+  MetricsData,
+  MachineInfo,
+  JoinToken,
+  DaemonConfig,
+  AlertInfo,
+  TeamData,
+  TeamActivityEvent,
+  UserInfo,
+} from "../types/api";
+
+export interface AppState {
+  connected: boolean;
+  connectedAt: number | null;
+  fleetState: FleetState | null;
+  activeTab: TabId;
+  selectedPipelineIssue: number | null;
+  pipelineDetail: PipelineDetail | null;
+  pipelineFilter: string;
+  activityFilter: string;
+  activityIssueFilter: string;
+  activityEvents: Array<Record<string, unknown>>;
+  activityOffset: number;
+  activityHasMore: boolean;
+  metricsCache: MetricsData | null;
+  insightsCache: InsightsData | null;
+  machinesCache: MachineInfo[] | null;
+  joinTokensCache: JoinToken[] | null;
+  costBreakdownCache: Record<string, unknown> | null;
+  alertsCache: AlertInfo[] | null;
+  alertDismissed: boolean;
+  teamCache: TeamData | null;
+  teamActivityCache: TeamActivityEvent[] | null;
+  daemonConfig: DaemonConfig | null;
+  currentUser: UserInfo | null;
+  selectedIssues: Record<string, boolean>;
+  firstRender: boolean;
+}
+
+const initialState: AppState = {
+  connected: false,
+  connectedAt: null,
+  fleetState: null,
+  activeTab: "overview",
+  selectedPipelineIssue: null,
+  pipelineDetail: null,
+  pipelineFilter: "all",
+  activityFilter: "all",
+  activityIssueFilter: "",
+  activityEvents: [],
+  activityOffset: 0,
+  activityHasMore: false,
+  metricsCache: null,
+  insightsCache: null,
+  machinesCache: null,
+  joinTokensCache: null,
+  costBreakdownCache: null,
+  alertsCache: null,
+  alertDismissed: false,
+  teamCache: null,
+  teamActivityCache: null,
+  daemonConfig: null,
+  currentUser: null,
+  selectedIssues: {},
+  firstRender: true,
+};
+
+type Listener<K extends keyof AppState> = (
+  value: AppState[K],
+  prev: AppState[K],
+) => void;
+type AnyListener = (state: AppState) => void;
+
+class Store {
+  private state: AppState;
+  private listeners: Map<keyof AppState, Set<Listener<any>>> = new Map();
+  private globalListeners: Set<AnyListener> = new Set();
+
+  constructor() {
+    this.state = { ...initialState };
+  }
+
+  get<K extends keyof AppState>(key: K): AppState[K] {
+    return this.state[key];
+  }
+
+  getState(): Readonly<AppState> {
+    return this.state;
+  }
+
+  set<K extends keyof AppState>(key: K, value: AppState[K]): void {
+    const prev = this.state[key];
+    if (prev === value) return;
+    this.state = { ...this.state, [key]: value };
+    const keyListeners = this.listeners.get(key);
+    if (keyListeners) {
+      keyListeners.forEach((fn) => fn(value, prev));
+    }
+    this.globalListeners.forEach((fn) => fn(this.state));
+  }
+
+  update(partial: Partial<AppState>): void {
+    const keys = Object.keys(partial) as Array<keyof AppState>;
+    let changed = false;
+    const prevState = this.state;
+    const nextState = { ...this.state };
+    for (const key of keys) {
+      if (nextState[key] !== partial[key]) {
+        (nextState as any)[key] = partial[key];
+        changed = true;
+      }
+    }
+    if (!changed) return;
+    this.state = nextState;
+    for (const key of keys) {
+      if (prevState[key] !== this.state[key]) {
+        const keyListeners = this.listeners.get(key);
+        if (keyListeners) {
+          keyListeners.forEach((fn) => fn(this.state[key], prevState[key]));
+        }
+      }
+    }
+    this.globalListeners.forEach((fn) => fn(this.state));
+  }
+
+  subscribe<K extends keyof AppState>(key: K, fn: Listener<K>): () => void {
+    if (!this.listeners.has(key)) {
+      this.listeners.set(key, new Set());
+    }
+    this.listeners.get(key)!.add(fn);
+    return () => {
+      this.listeners.get(key)?.delete(fn);
+    };
+  }
+
+  onAny(fn: AnyListener): () => void {
+    this.globalListeners.add(fn);
+    return () => {
+      this.globalListeners.delete(fn);
+    };
+  }
+}
+
+export const store = new Store();

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

@@ -0,0 +1,216 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+describe("WebSocket module", () => {
+  let ws: typeof import("./ws");
+  let store: typeof import("./state");
+
+  // Mock WebSocket
+  class MockWebSocket {
+    url: string;
+    onopen: (() => void) | null = null;
+    onclose: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+    onmessage: ((e: { data: string }) => void) | null = null;
+
+    constructor(url: string) {
+      this.url = url;
+      MockWebSocket.instances.push(this);
+    }
+
+    close() {}
+
+    static instances: MockWebSocket[] = [];
+    static reset() {
+      MockWebSocket.instances = [];
+    }
+  }
+
+  beforeEach(async () => {
+    vi.resetModules();
+    vi.useFakeTimers();
+
+    // Set up DOM elements the ws module expects
+    document.body.innerHTML = `
+      <div id="connection-dot" class="connection-dot offline"></div>
+      <span id="connection-text">OFFLINE</span>
+      <div id="stale-data-banner" style="display:none"></div>
+      <span id="stale-data-age"></span>
+      <div class="main"></div>
+    `;
+
+    // Mock WebSocket
+    MockWebSocket.reset();
+    (global as any).WebSocket = MockWebSocket;
+
+    // Mock location
+    Object.defineProperty(window, "location", {
+      value: {
+        protocol: "http:",
+        host: "localhost:18767",
+        hash: "",
+      },
+      writable: true,
+    });
+
+    // Import fresh
+    store = await import("./state");
+    ws = await import("./ws");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe("connect", () => {
+    it("creates a WebSocket with the correct URL", () => {
+      ws.connect();
+      expect(MockWebSocket.instances).toHaveLength(1);
+      expect(MockWebSocket.instances[0].url).toBe("ws://localhost:18767/ws");
+    });
+
+    it("stores the WebSocket reference", () => {
+      ws.connect();
+      expect(ws.getWebSocket()).toBeTruthy();
+    });
+  });
+
+  describe("onopen", () => {
+    it("sets connected state to true", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      expect(store.store.get("connected")).toBe(true);
+      expect(store.store.get("connectedAt")).toBeGreaterThan(0);
+    });
+
+    it("updates connection status to LIVE", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onopen?.();
+
+      const dot = document.getElementById("connection-dot");
+      expect(dot?.className).toContain("live");
+    });
+  });
+
+  describe("onclose", () => {
+    it("sets connected state to false", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+      instance.onclose?.();
+
+      expect(store.store.get("connected")).toBe(false);
+      expect(store.store.get("connectedAt")).toBeNull();
+    });
+
+    it("updates connection status to OFFLINE", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onclose?.();
+
+      const dot = document.getElementById("connection-dot");
+      expect(dot?.className).toContain("offline");
+    });
+
+    it("schedules reconnection", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onclose?.();
+
+      // Should schedule a reconnect
+      vi.advanceTimersByTime(1500);
+      // A new WebSocket should have been created
+      expect(MockWebSocket.instances.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("uses exponential backoff for reconnection", () => {
+      ws.connect();
+
+      // First close - 1s delay
+      MockWebSocket.instances[0].onclose?.();
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(2);
+
+      // Second close - 2s delay
+      MockWebSocket.instances[1].onclose?.();
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(2); // not yet
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(3); // now
+    });
+  });
+
+  describe("onmessage", () => {
+    it("parses JSON and updates fleet state", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      const mockState = {
+        pipelines: [{ issue: 42, status: "building" }],
+        machines: [],
+      };
+      instance.onmessage?.({ data: JSON.stringify(mockState) });
+
+      expect(store.store.get("fleetState")).toEqual(mockState);
+      expect(store.store.get("firstRender")).toBe(false);
+    });
+
+    it("handles malformed JSON gracefully", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+      instance.onmessage?.({ data: "not json{" });
+
+      // Should not crash, fleet state should remain null
+      expect(store.store.get("fleetState")).toBeNull();
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("stale data detection", () => {
+    it("shows stale banner after 30s without data", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      // Send one message to set lastDataTime
+      instance.onmessage?.({ data: JSON.stringify({ pipelines: [] }) });
+
+      // Advance time by 35 seconds
+      vi.advanceTimersByTime(35000);
+
+      const banner = document.getElementById("stale-data-banner");
+      expect(banner?.style.display).not.toBe("none");
+    });
+  });
+
+  describe("offline banner", () => {
+    it("shows offline banner on disconnect", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onclose?.();
+
+      const banner = document.getElementById("offline-banner");
+      expect(banner).toBeTruthy();
+      expect(banner?.style.display).not.toBe("none");
+    });
+
+    it("hides offline banner on reconnect", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onclose?.();
+
+      // Reconnect
+      vi.advanceTimersByTime(1500);
+      MockWebSocket.instances[1].onopen?.();
+
+      const banner = document.getElementById("offline-banner");
+      expect(banner?.style.display).toBe("none");
+    });
+  });
+});