shipwright-cli 2.2.2 → 2.3.1

package/dashboard/src/core/ws.ts

@@ -0,0 +1,143 @@
+// WebSocket connection with automatic reconnection, stale data indicator, offline resilience
+
+import { store } from "./state";
+import type { FleetState } from "../types/api";
+
+let ws: WebSocket | null = null;
+let reconnectDelay = 1000;
+let connectionTimer: ReturnType<typeof setInterval> | null = null;
+let lastDataTime = 0;
+let staleTimer: ReturnType<typeof setInterval> | null = null;
+let reconnectAttempts = 0;
+
+function startConnectionTimer(): void {
+  stopConnectionTimer();
+  connectionTimer = setInterval(() => {
+    const connectedAt = store.get("connectedAt");
+    if (connectedAt) {
+      const elapsed = Math.floor((Date.now() - connectedAt) / 1000);
+      const h = String(Math.floor(elapsed / 3600)).padStart(2, "0");
+      const m = String(Math.floor((elapsed % 3600) / 60)).padStart(2, "0");
+      const s = String(elapsed % 60).padStart(2, "0");
+      const el = document.getElementById("connection-text");
+      if (el) el.textContent = `LIVE \u2014 ${h}:${m}:${s}`;
+    }
+  }, 1000);
+}
+
+function stopConnectionTimer(): void {
+  if (connectionTimer) {
+    clearInterval(connectionTimer);
+    connectionTimer = null;
+  }
+}
+
+function startStaleDataTimer(): void {
+  if (staleTimer) clearInterval(staleTimer);
+  staleTimer = setInterval(() => {
+    if (!lastDataTime) return;
+    const ageS = Math.floor((Date.now() - lastDataTime) / 1000);
+    const banner = document.getElementById("stale-data-banner");
+    if (ageS > 30 && banner) {
+      banner.style.display = "";
+      const ageEl = document.getElementById("stale-data-age");
+      if (ageEl) {
+        if (ageS < 60) ageEl.textContent = `${ageS}s`;
+        else if (ageS < 3600)
+          ageEl.textContent = `${Math.floor(ageS / 60)}m ${ageS % 60}s`;
+        else
+          ageEl.textContent = `${Math.floor(ageS / 3600)}h ${Math.floor((ageS % 3600) / 60)}m`;
+      }
+    } else if (banner) {
+      banner.style.display = "none";
+    }
+  }, 5000);
+}
+
+function updateConnectionStatus(status: "LIVE" | "OFFLINE"): void {
+  const dot = document.getElementById("connection-dot");
+  const text = document.getElementById("connection-text");
+  if (!dot || !text) return;
+  if (status === "LIVE") {
+    dot.className = "connection-dot live";
+    text.textContent = "LIVE \u2014 00:00:00";
+    reconnectAttempts = 0;
+  } else {
+    dot.className = "connection-dot offline";
+    text.textContent = `OFFLINE (retry ${reconnectAttempts})`;
+  }
+}
+
+function showOfflineBanner(show: boolean): void {
+  let banner = document.getElementById("offline-banner");
+  if (!banner && show) {
+    banner = document.createElement("div");
+    banner.id = "offline-banner";
+    banner.className = "offline-banner";
+    banner.innerHTML =
+      `<span class="offline-icon">\u26A0</span>` +
+      `<span>Connection lost. Data may be stale.</span>` +
+      `<button class="btn-sm" id="manual-reconnect">Reconnect</button>`;
+    const main = document.querySelector(".main");
+    if (main) main.prepend(banner);
+    document
+      .getElementById("manual-reconnect")
+      ?.addEventListener("click", () => {
+        if (ws) {
+          try {
+            ws.close();
+          } catch {}
+        }
+        reconnectDelay = 1000;
+        reconnectAttempts = 0;
+        connect();
+      });
+  }
+  if (banner) banner.style.display = show ? "" : "none";
+}
+
+export function connect(): void {
+  const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  const wsUrl = `${protocol}//${location.host}/ws`;
+  ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    reconnectDelay = 1000;
+    reconnectAttempts = 0;
+    store.update({ connected: true, connectedAt: Date.now() });
+    updateConnectionStatus("LIVE");
+    startConnectionTimer();
+    showOfflineBanner(false);
+  };
+
+  ws.onclose = () => {
+    store.update({ connected: false, connectedAt: null });
+    stopConnectionTimer();
+    reconnectAttempts++;
+    updateConnectionStatus("OFFLINE");
+    showOfflineBanner(true);
+    setTimeout(connect, reconnectDelay);
+    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
+  };
+
+  ws.onerror = () => {};
+
+  ws.onmessage = (e: MessageEvent) => {
+    try {
+      const data: FleetState = JSON.parse(e.data);
+      lastDataTime = Date.now();
+      store.update({
+        fleetState: data,
+        firstRender: false,
+      });
+    } catch (err) {
+      console.error("Failed to parse message:", err);
+    }
+  };
+
+  startStaleDataTimer();
+}
+
+export function getWebSocket(): WebSocket | null {
+  return ws;
+}

package/dashboard/src/design/icons.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from "vitest";
+import { icon, iconNames } from "./icons";
+import type { IconName } from "./icons";
+
+describe("Icons", () => {
+  describe("iconNames", () => {
+    it("exports a non-empty list of icon names", () => {
+      expect(iconNames.length).toBeGreaterThan(0);
+    });
+
+    it("includes essential navigation icons", () => {
+      const essential = [
+        "anchor",
+        "layout-dashboard",
+        "users",
+        "activity",
+        "server",
+      ];
+      for (const name of essential) {
+        expect(iconNames).toContain(name);
+      }
+    });
+
+    it("includes status icons", () => {
+      const status = [
+        "circle-check",
+        "circle-x",
+        "circle-alert",
+        "circle-pause",
+      ];
+      for (const name of status) {
+        expect(iconNames).toContain(name);
+      }
+    });
+
+    it("includes action icons", () => {
+      const actions = ["play", "pause", "send", "plus", "x", "copy"];
+      for (const name of actions) {
+        expect(iconNames).toContain(name);
+      }
+    });
+  });
+
+  describe("icon()", () => {
+    it("returns an SVG string for a valid icon", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain("<svg");
+      expect(svg).toContain("</svg>");
+      expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    });
+
+    it("returns empty string for unknown icon", () => {
+      const svg = icon("nonexistent-icon-name" as IconName);
+      expect(svg).toBe("");
+    });
+
+    it("uses default size of 16", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('width="16"');
+      expect(svg).toContain('height="16"');
+    });
+
+    it("respects custom size", () => {
+      const svg = icon("anchor", 24);
+      expect(svg).toContain('width="24"');
+      expect(svg).toContain('height="24"');
+    });
+
+    it("applies color attribute when provided", () => {
+      const svg = icon("anchor", 16, "#ff0000");
+      expect(svg).toContain('color="#ff0000"');
+    });
+
+    it("omits color attribute when not provided", () => {
+      const svg = icon("anchor");
+      expect(svg).not.toContain("color=");
+    });
+
+    it("always includes stroke attributes", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('stroke="currentColor"');
+      expect(svg).toContain('stroke-width="2"');
+      expect(svg).toContain('stroke-linecap="round"');
+      expect(svg).toContain('stroke-linejoin="round"');
+    });
+
+    it("includes fill=none", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('fill="none"');
+    });
+
+    it("uses 24x24 viewBox", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('viewBox="0 0 24 24"');
+    });
+
+    it("renders every registered icon without error", () => {
+      for (const name of iconNames) {
+        const svg = icon(name);
+        expect(svg).toContain("<svg");
+        expect(svg).toContain("</svg>");
+      }
+    });
+  });
+});

package/dashboard/src/design/icons.ts

@@ -0,0 +1,131 @@
+// Lucide Icons - inlined SVG strings
+// Each icon is a function returning an SVG string with configurable size and color.
+
+const iconPaths: Record<string, string> = {
+  // Navigation
+  anchor:
+    '<path d="M12 22V8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/>',
+  "layout-dashboard":
+    '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/>',
+  users:
+    '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  "git-branch":
+    '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  clock:
+    '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+  activity:
+    '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
+  "bar-chart-3":
+    '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M7 16h8"/><path d="M7 11h12"/><path d="M7 6h3"/>',
+  server:
+    '<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/>',
+  lightbulb:
+    '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
+  "users-round":
+    '<path d="M18 21a8 8 0 0 0-16 0"/><circle cx="10" cy="8" r="5"/><path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/>',
+
+  // Status
+  "circle-check": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  "circle-x":
+    '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+  "circle-alert":
+    '<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>',
+  "circle-pause":
+    '<circle cx="12" cy="12" r="10"/><line x1="10" x2="10" y1="15" y2="9"/><line x1="14" x2="14" y1="15" y2="9"/>',
+  "circle-play":
+    '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>',
+  loader:
+    '<path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/>',
+  signal:
+    '<path d="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/>',
+
+  // Actions
+  play: '<polygon points="6 3 20 12 6 21 6 3"/>',
+  pause:
+    '<rect width="4" height="16" x="6" y="4"/><rect width="4" height="16" x="14" y="4"/>',
+  square: '<rect width="18" height="18" x="3" y="3" rx="2"/>',
+  send: '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
+  "message-square":
+    '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+  "trash-2":
+    '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  "external-link":
+    '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+
+  // Data
+  cpu: '<rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/>',
+  "memory-stick":
+    '<path d="M6 19v-3"/><path d="M10 19v-3"/><path d="M14 19v-3"/><path d="M18 19v-3"/><path d="M8 11V9"/><path d="M16 11V9"/><path d="M12 11V9"/><path d="M2 15h20"/><path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V15H2v-3.063a2 2 0 0 0 0-3.837Z"/>',
+  "dollar-sign":
+    '<line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
+  zap: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
+  gauge: '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>',
+  timer:
+    '<line x1="10" x2="14" y1="2" y2="2"/><line x1="12" x2="15" y1="14" y2="11"/><circle cx="12" cy="14" r="8"/>',
+  "trending-up":
+    '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
+  "trending-down":
+    '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
+
+  // Fleet
+  ship: '<path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1 .6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-9-4-9 4c0 2.9.94 5.34 2.81 7.76"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M12 10v4"/><path d="M12 2v3"/>',
+  radar:
+    '<path d="M19.07 4.93A10 10 0 0 0 6.99 3.34"/><path d="M4 6h.01"/><path d="M2.29 9.62A10 10 0 1 0 21.31 8.35"/><path d="M16.24 7.76A6 6 0 1 0 8.23 16.67"/><path d="M12 18h.01"/><path d="M17.99 11.66A6 6 0 0 1 15.77 16.67"/><circle cx="12" cy="12" r="2"/><path d="m13.41 10.59 5.66-5.66"/>',
+  map: '<path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/><path d="M15 5.764v15"/><path d="M9 3.236v15"/>',
+  globe:
+    '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
+  terminal:
+    '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  "file-diff":
+    '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M9 10h6"/><path d="M12 13V7"/><path d="M9 17h6"/>',
+  "git-pull-request":
+    '<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><line x1="6" x2="6" y1="9" y2="21"/>',
+  "shield-alert":
+    '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
+  "octagon-alert":
+    '<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
+  "refresh-cw":
+    '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+  brain:
+    '<path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4 4 0 0 1 .585-.396"/><path d="M19.938 10.5a4 4 0 0 1 .585.396"/><path d="M6 18a4 4 0 0 1-1.967-.516"/><path d="M19.967 17.484A4 4 0 0 1 18 18"/>',
+  "shield-check":
+    '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
+  webhook:
+    '<path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"/><path d="m6 17 3.13-5.78c.53-.97.43-2.22-.26-3.07a4 4 0 0 1 6.72-4.07"/><path d="m11.44 11.79.87-.47c.98-.53 2.22-.43 3.07.26a4 4 0 0 1 2.72 6.93"/>',
+  "clipboard-list":
+    '<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>',
+  "check-circle":
+    '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',
+  "user-check":
+    '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/>',
+  "mail-plus":
+    '<path d="M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/><path d="M19 16v6"/><path d="M16 19h6"/>',
+  "scroll-text":
+    '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2"/>',
+  settings:
+    '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  "log-out":
+    '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
+};
+
+export type IconName = keyof typeof iconPaths;
+
+export function icon(
+  name: IconName,
+  size: number = 16,
+  color?: string,
+): string {
+  const paths = iconPaths[name];
+  if (!paths) return "";
+  const c = color ? ` color="${color}"` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${c}>${paths}</svg>`;
+}
+
+export const iconNames = Object.keys(iconPaths) as IconName[];

package/dashboard/src/design/tokens.test.ts

@@ -0,0 +1,204 @@
+import { describe, it, expect } from "vitest";
+import {
+  colors,
+  fonts,
+  typeScale,
+  spacing,
+  radius,
+  shadows,
+  duration,
+  easing,
+  zIndex,
+  STAGES,
+  STAGE_SHORT,
+  STAGE_COLORS,
+  STAGE_HEX,
+} from "./tokens";
+import type { StageName } from "./tokens";
+
+describe("Design Tokens", () => {
+  describe("colors", () => {
+    it("has all background colors", () => {
+      expect(colors.bg).toHaveProperty("abyss");
+      expect(colors.bg).toHaveProperty("deep");
+      expect(colors.bg).toHaveProperty("ocean");
+      expect(colors.bg).toHaveProperty("surface");
+      expect(colors.bg).toHaveProperty("foam");
+    });
+
+    it("has accent colors as valid hex/rgba", () => {
+      expect(colors.accent.cyan).toMatch(/^#[0-9a-f]{6}$/i);
+      expect(colors.accent.purple).toMatch(/^#[0-9a-f]{6}$/i);
+      expect(colors.accent.blue).toMatch(/^#[0-9a-f]{6}$/i);
+      expect(colors.accent.cyanGlow).toMatch(/^rgba\(/);
+    });
+
+    it("has semantic colors", () => {
+      expect(colors.semantic.success).toMatch(/^#/);
+      expect(colors.semantic.warning).toMatch(/^#/);
+      expect(colors.semantic.error).toMatch(/^#/);
+    });
+
+    it("has text colors", () => {
+      expect(colors.text.primary).toMatch(/^#/);
+      expect(colors.text.secondary).toMatch(/^#/);
+      expect(colors.text.muted).toMatch(/^#/);
+    });
+  });
+
+  describe("fonts", () => {
+    it("defines display, body, and mono font stacks", () => {
+      expect(fonts.display).toContain("serif");
+      expect(fonts.body).toContain("sans-serif");
+      expect(fonts.mono).toContain("monospace");
+    });
+  });
+
+  describe("typeScale", () => {
+    it("has all scale levels", () => {
+      const levels = [
+        "display",
+        "heading",
+        "title",
+        "body",
+        "caption",
+        "tiny",
+        "mono",
+        "monoSm",
+      ];
+      for (const level of levels) {
+        const entry = typeScale[level as keyof typeof typeScale];
+        expect(entry).toHaveProperty("size");
+        expect(entry).toHaveProperty("weight");
+        expect(entry).toHaveProperty("family");
+        expect(entry.size).toBeGreaterThan(0);
+      }
+    });
+
+    it("sizes are ordered display > heading > title > body > caption > tiny", () => {
+      expect(typeScale.display.size).toBeGreaterThan(typeScale.heading.size);
+      expect(typeScale.heading.size).toBeGreaterThan(typeScale.title.size);
+      expect(typeScale.title.size).toBeGreaterThan(typeScale.body.size);
+      expect(typeScale.body.size).toBeGreaterThan(typeScale.caption.size);
+      expect(typeScale.caption.size).toBeGreaterThan(typeScale.tiny.size);
+    });
+  });
+
+  describe("spacing", () => {
+    it("defines a spacing scale", () => {
+      expect(spacing[0]).toBe(0);
+      expect(spacing[1]).toBe(4);
+      expect(spacing[2]).toBe(8);
+      expect(spacing[4]).toBe(16);
+      expect(spacing[8]).toBe(32);
+    });
+
+    it("has increasing values", () => {
+      const keys = Object.keys(spacing)
+        .map(Number)
+        .sort((a, b) => a - b);
+      for (let i = 1; i < keys.length; i++) {
+        expect(spacing[keys[i]]).toBeGreaterThanOrEqual(spacing[keys[i - 1]]);
+      }
+    });
+  });
+
+  describe("radius", () => {
+    it("has sm < md < lg < xl < full", () => {
+      expect(radius.sm).toBeLessThan(radius.md);
+      expect(radius.md).toBeLessThan(radius.lg);
+      expect(radius.lg).toBeLessThan(radius.xl);
+      expect(radius.xl).toBeLessThan(radius.full);
+    });
+  });
+
+  describe("shadows", () => {
+    it("has glow shadows for each semantic color", () => {
+      expect(shadows.glow.cyan).toContain("rgba");
+      expect(shadows.glow.purple).toContain("rgba");
+      expect(shadows.glow.success).toContain("rgba");
+      expect(shadows.glow.error).toContain("rgba");
+    });
+
+    it("has an elevated shadow", () => {
+      expect(shadows.elevated).toContain("rgba");
+    });
+  });
+
+  describe("duration", () => {
+    it("has increasing animation durations", () => {
+      expect(duration.fast).toBeLessThan(duration.base);
+      expect(duration.base).toBeLessThan(duration.slow);
+      expect(duration.slow).toBeLessThan(duration.glacial);
+    });
+  });
+
+  describe("easing", () => {
+    it("defines easing curves", () => {
+      expect(easing.default).toBe("ease");
+      expect(easing.smooth).toContain("cubic-bezier");
+      expect(easing.spring).toContain("cubic-bezier");
+    });
+  });
+
+  describe("zIndex", () => {
+    it("has increasing z-index values", () => {
+      expect(zIndex.base).toBeLessThan(zIndex.dropdown);
+      expect(zIndex.dropdown).toBeLessThan(zIndex.sticky);
+      expect(zIndex.sticky).toBeLessThan(zIndex.overlay);
+      expect(zIndex.overlay).toBeLessThan(zIndex.modal);
+      expect(zIndex.modal).toBeLessThan(zIndex.toast);
+    });
+  });
+
+  describe("STAGES", () => {
+    it("defines the pipeline stage sequence", () => {
+      expect(STAGES).toHaveLength(11);
+      expect(STAGES[0]).toBe("intake");
+      expect(STAGES[STAGES.length - 1]).toBe("monitor");
+    });
+
+    it("includes all expected stages", () => {
+      const expected = [
+        "intake",
+        "plan",
+        "design",
+        "build",
+        "test",
+        "review",
+        "compound_quality",
+        "pr",
+        "merge",
+        "deploy",
+        "monitor",
+      ];
+      expect([...STAGES]).toEqual(expected);
+    });
+  });
+
+  describe("STAGE_SHORT", () => {
+    it("maps every stage to a short code", () => {
+      for (const stage of STAGES) {
+        expect(STAGE_SHORT[stage]).toBeDefined();
+        expect(STAGE_SHORT[stage].length).toBeLessThanOrEqual(3);
+      }
+    });
+  });
+
+  describe("STAGE_COLORS", () => {
+    it("has a color class for each stage", () => {
+      expect(STAGE_COLORS).toHaveLength(STAGES.length);
+      for (const cls of STAGE_COLORS) {
+        expect(cls).toMatch(/^c-/);
+      }
+    });
+  });
+
+  describe("STAGE_HEX", () => {
+    it("maps every stage to a hex color", () => {
+      for (const stage of STAGES) {
+        expect(STAGE_HEX[stage]).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+    });
+  });
+});