shipwright-cli 2.2.2 → 2.3.1

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

@@ -0,0 +1,266 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+// We need to mock the DOM and store before importing the router
+describe("Router", () => {
+  let store: any;
+  let router: typeof import("./router");
+
+  beforeEach(async () => {
+    // Reset DOM
+    document.body.innerHTML = `
+      <div class="tab-btn" data-tab="overview">Overview</div>
+      <div class="tab-btn" data-tab="pipelines">Pipelines</div>
+      <div class="tab-btn" data-tab="metrics">Metrics</div>
+      <div class="tab-btn" data-tab="team">Team</div>
+      <div class="tab-panel" id="panel-overview"></div>
+      <div class="tab-panel" id="panel-pipelines"></div>
+      <div class="tab-panel" id="panel-metrics"></div>
+      <div class="tab-panel" id="panel-team"></div>
+    `;
+
+    // Reset hash
+    location.hash = "";
+
+    // Fresh imports
+    vi.resetModules();
+    store = (await import("./state")).store;
+    router = await import("./router");
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("registerView", () => {
+    it("registers a view for a tab", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", mockView);
+
+      const views = router.getRegisteredViews();
+      expect(views.get("overview")).toBe(mockView);
+    });
+  });
+
+  describe("switchTab", () => {
+    it("updates the active tab in the store", () => {
+      store.set("activeTab", "overview");
+      router.switchTab("pipelines");
+      expect(store.get("activeTab")).toBe("pipelines");
+    });
+
+    it("updates the location hash", () => {
+      store.set("activeTab", "overview");
+      router.switchTab("pipelines");
+      expect(location.hash).toBe("#pipelines");
+    });
+
+    it("adds active class to the correct tab button", () => {
+      store.set("activeTab", "overview");
+      router.switchTab("pipelines");
+
+      const btns = document.querySelectorAll(".tab-btn");
+      const pipelinesBtn = Array.from(btns).find(
+        (b) => b.getAttribute("data-tab") === "pipelines",
+      );
+      const overviewBtn = Array.from(btns).find(
+        (b) => b.getAttribute("data-tab") === "overview",
+      );
+
+      expect(pipelinesBtn?.classList.contains("active")).toBe(true);
+      expect(overviewBtn?.classList.contains("active")).toBe(false);
+    });
+
+    it("adds active class to the correct panel", () => {
+      store.set("activeTab", "overview");
+      router.switchTab("pipelines");
+
+      const pipelinesPanel = document.getElementById("panel-pipelines");
+      const overviewPanel = document.getElementById("panel-overview");
+
+      expect(pipelinesPanel?.classList.contains("active")).toBe(true);
+      expect(overviewPanel?.classList.contains("active")).toBe(false);
+    });
+
+    it("does nothing when switching to the current tab", () => {
+      store.set("activeTab", "overview");
+      const prevHash = location.hash;
+      router.switchTab("overview");
+      // Should not change anything
+      expect(store.get("activeTab")).toBe("overview");
+    });
+
+    it("initializes the view on first switch", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", mockView);
+
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+
+      expect(mockView.init).toHaveBeenCalledTimes(1);
+    });
+
+    it("destroys the previous view on tab switch", () => {
+      const overviewView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      const metricsView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+
+      router.registerView("overview", overviewView);
+      router.registerView("metrics", metricsView);
+
+      // First, switch to overview so it gets initialized
+      store.set("activeTab", "pipelines");
+      router.switchTab("overview");
+      expect(overviewView.init).toHaveBeenCalledTimes(1);
+
+      // Now switch to metrics
+      router.switchTab("metrics");
+      expect(overviewView.destroy).toHaveBeenCalledTimes(1);
+      expect(metricsView.init).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders with fleet state if available", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", mockView);
+
+      const fakeState = { pipelines: [], machines: [] };
+      store.set("fleetState", fakeState);
+      store.set("activeTab", "overview");
+
+      router.switchTab("metrics");
+      expect(mockView.render).toHaveBeenCalledWith(fakeState);
+    });
+  });
+
+  describe("error boundaries", () => {
+    it("catches init errors and shows error boundary", () => {
+      const errorView = {
+        init: vi.fn(() => {
+          throw new Error("Init failed!");
+        }),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      // Suppress console.error for this test
+      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("Init failed!");
+
+      consoleSpy.mockRestore();
+    });
+
+    it("catches render errors and shows error boundary", () => {
+      const errorView = {
+        init: vi.fn(),
+        render: vi.fn(() => {
+          throw new Error("Render exploded!");
+        }),
+        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 errorBoundary = panel?.querySelector(".tab-error-boundary");
+      expect(errorBoundary).toBeTruthy();
+      expect(errorBoundary?.textContent).toContain("Render exploded!");
+
+      consoleSpy.mockRestore();
+    });
+
+    it("does not stack multiple error boundaries", () => {
+      const errorView = {
+        init: vi.fn(() => {
+          throw new Error("Fail");
+        }),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("metrics", errorView);
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+
+      store.set("activeTab", "overview");
+      router.switchTab("metrics");
+
+      // Try to trigger again (should not add second boundary)
+      store.set("activeTab", "pipelines");
+      router.switchTab("metrics");
+
+      const panel = document.getElementById("panel-metrics");
+      const boundaries = panel?.querySelectorAll(".tab-error-boundary");
+      expect(boundaries?.length).toBeLessThanOrEqual(1);
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("renderActiveView", () => {
+    it("renders the current active view with fleet state", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", mockView);
+
+      const fakeState = { pipelines: [] };
+      store.set("fleetState", fakeState);
+      store.set("activeTab", "overview");
+
+      router.renderActiveView();
+
+      expect(mockView.render).toHaveBeenCalledWith(fakeState);
+    });
+
+    it("does nothing when no fleet state is available", () => {
+      const mockView = {
+        init: vi.fn(),
+        render: vi.fn(),
+        destroy: vi.fn(),
+      };
+      router.registerView("overview", mockView);
+      store.set("activeTab", "overview");
+
+      router.renderActiveView();
+      expect(mockView.render).not.toHaveBeenCalled();
+    });
+  });
+});

package/dashboard/src/core/router.ts

@@ -0,0 +1,190 @@
+// Tab navigation with hash routing and view lifecycle
+
+import { store } from "./state";
+import type { TabId, View, FleetState } from "../types/api";
+
+const views = new Map<TabId, View>();
+const initializedViews = new Set<TabId>();
+
+const VALID_TABS: TabId[] = [
+  "overview",
+  "agents",
+  "pipelines",
+  "timeline",
+  "activity",
+  "metrics",
+  "machines",
+  "insights",
+  "team",
+  "fleet-map",
+  "pipeline-theater",
+  "agent-cockpit",
+];
+
+let teamRefreshTimer: ReturnType<typeof setInterval> | null = null;
+
+export function registerView(tabId: TabId, view: View): void {
+  views.set(tabId, view);
+}
+
+export function switchTab(tab: TabId): void {
+  const prev = store.get("activeTab");
+  if (prev === tab) return;
+
+  // Destroy previous view
+  const prevView = views.get(prev);
+  if (prevView && initializedViews.has(prev)) {
+    prevView.destroy();
+    initializedViews.delete(prev);
+  }
+
+  // Clear team refresh timer if leaving team tab
+  if (prev === "team" && teamRefreshTimer) {
+    clearInterval(teamRefreshTimer);
+    teamRefreshTimer = null;
+  }
+
+  store.set("activeTab", tab);
+  location.hash = "#" + tab;
+
+  // Update tab button classes
+  const btns = document.querySelectorAll(".tab-btn");
+  btns.forEach((btn) => {
+    if (btn.getAttribute("data-tab") === tab) {
+      btn.classList.add("active");
+    } else {
+      btn.classList.remove("active");
+    }
+  });
+
+  // Update panel visibility
+  const panels = document.querySelectorAll(".tab-panel");
+  panels.forEach((panel) => {
+    if (panel.id === "panel-" + tab) {
+      panel.classList.add("active");
+    } else {
+      panel.classList.remove("active");
+    }
+  });
+
+  // Initialize the new view with error boundary
+  const view = views.get(tab);
+  if (view && !initializedViews.has(tab)) {
+    try {
+      view.init();
+      initializedViews.add(tab);
+    } catch (err) {
+      console.error(`[Error Boundary] Tab "${tab}" init failed:`, err);
+      showTabError(tab, err);
+    }
+  }
+
+  // Render with current data
+  const fleetState = store.get("fleetState");
+  if (fleetState && view) {
+    try {
+      view.render(fleetState);
+    } catch (err) {
+      console.error(`[Error Boundary] Tab "${tab}" render failed:`, err);
+      showTabError(tab, err);
+    }
+  }
+}
+
+export function renderActiveView(): void {
+  const tab = store.get("activeTab");
+  const view = views.get(tab);
+  const fleetState = store.get("fleetState");
+  if (!view || !fleetState) return;
+
+  try {
+    if (!initializedViews.has(tab)) {
+      view.init();
+      initializedViews.add(tab);
+    }
+    view.render(fleetState);
+  } catch (err) {
+    console.error(`[Error Boundary] Tab "${tab}" render failed:`, err);
+    showTabError(tab, err);
+  }
+}
+
+function showTabError(tab: TabId, err: unknown): void {
+  const panel = document.getElementById("panel-" + tab);
+  if (!panel) return;
+  const msg = err instanceof Error ? err.message : String(err);
+  const existing = panel.querySelector(".tab-error-boundary");
+  if (existing) return; // don't stack errors
+  const div = document.createElement("div");
+  div.className = "tab-error-boundary";
+  div.innerHTML =
+    `<div class="error-boundary-content">` +
+    `<span class="error-boundary-icon">\u26A0</span>` +
+    `<div><strong>This tab encountered an error</strong>` +
+    `<pre class="error-boundary-msg">${msg.replace(/</g, "&lt;")}</pre></div>` +
+    `<button class="btn-sm error-boundary-retry">Retry</button></div>`;
+  panel.prepend(div);
+  const retryBtn = div.querySelector(".error-boundary-retry");
+  if (retryBtn) {
+    retryBtn.addEventListener("click", () => {
+      div.remove();
+      initializedViews.delete(tab);
+      const v = views.get(tab);
+      if (v) {
+        try {
+          v.init();
+          initializedViews.add(tab);
+          const state = store.get("fleetState");
+          if (state) v.render(state);
+        } catch (retryErr) {
+          console.error(
+            `[Error Boundary] Retry failed for "${tab}":`,
+            retryErr,
+          );
+          showTabError(tab, retryErr);
+        }
+      }
+    });
+  }
+}
+
+export function setupRouter(): void {
+  // Tab button click handlers
+  const btns = document.querySelectorAll(".tab-btn");
+  btns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const tab = btn.getAttribute("data-tab") as TabId;
+      if (tab) switchTab(tab);
+    });
+  });
+
+  // Hash-based routing
+  const hash = location.hash.replace("#", "") as TabId;
+  if (VALID_TABS.includes(hash)) {
+    switchTab(hash);
+  } else {
+    // Default to overview
+    const activeTab = store.get("activeTab");
+    const view = views.get(activeTab);
+    if (view && !initializedViews.has(activeTab)) {
+      view.init();
+      initializedViews.add(activeTab);
+    }
+  }
+
+  window.addEventListener("hashchange", () => {
+    const h = location.hash.replace("#", "") as TabId;
+    if (VALID_TABS.includes(h) && h !== store.get("activeTab")) {
+      switchTab(h);
+    }
+  });
+
+  // Subscribe to fleet state changes to re-render active view
+  store.subscribe("fleetState", () => {
+    renderActiveView();
+  });
+}
+
+export function getRegisteredViews(): Map<TabId, View> {
+  return views;
+}

package/dashboard/src/core/sse.ts

@@ -0,0 +1,38 @@
+// Server-Sent Events client for live log streaming
+
+type SSECallback = (data: string) => void;
+
+export class SSEClient {
+  private eventSource: EventSource | null = null;
+  private url: string;
+  private onMessage: SSECallback;
+  private onError?: () => void;
+
+  constructor(url: string, onMessage: SSECallback, onError?: () => void) {
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onError = onError;
+  }
+
+  connect(): void {
+    this.close();
+    this.eventSource = new EventSource(this.url);
+    this.eventSource.onmessage = (e) => {
+      this.onMessage(e.data);
+    };
+    this.eventSource.onerror = () => {
+      if (this.onError) this.onError();
+    };
+  }
+
+  close(): void {
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+  }
+
+  isConnected(): boolean {
+    return this.eventSource?.readyState === EventSource.OPEN;
+  }
+}