shipwright-cli 2.2.2 → 2.3.0

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

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.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.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.ts

@@ -0,0 +1,160 @@
+// Design System Tokens
+// Single source of truth for colors, typography, spacing, shadows, animations, and z-index.
+// CSS custom properties mirror these values; Canvas2D code reads from here directly.
+
+export const colors = {
+  bg: {
+    abyss: "#060a14",
+    deep: "#0a1628",
+    ocean: "#0d1f3c",
+    surface: "#132d56",
+    foam: "#1a3a6a",
+  },
+  accent: {
+    cyan: "#00d4ff",
+    cyanGlow: "rgba(0, 212, 255, 0.15)",
+    cyanDim: "rgba(0, 212, 255, 0.4)",
+    purple: "#7c3aed",
+    purpleGlow: "rgba(124, 58, 237, 0.15)",
+    blue: "#0066ff",
+  },
+  semantic: {
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#f43f5e",
+  },
+  text: {
+    primary: "#e8ecf4",
+    secondary: "#8899b8",
+    muted: "#5a6d8a",
+  },
+} as const;
+
+export const fonts = {
+  display: "'Instrument Serif', Georgia, serif",
+  body: "'Plus Jakarta Sans', system-ui, sans-serif",
+  mono: "'JetBrains Mono', 'SF Mono', monospace",
+} as const;
+
+export const typeScale = {
+  display: { size: 32, weight: 400, family: fonts.display },
+  heading: { size: 24, weight: 400, family: fonts.display },
+  title: { size: 20, weight: 600, family: fonts.body },
+  body: { size: 14, weight: 400, family: fonts.body },
+  caption: { size: 12, weight: 500, family: fonts.body },
+  tiny: { size: 11, weight: 400, family: fonts.body },
+  mono: { size: 13, weight: 400, family: fonts.mono },
+  monoSm: { size: 11, weight: 400, family: fonts.mono },
+} as const;
+
+export const spacing: Record<number, number> = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+  16: 64,
+};
+
+export const radius = {
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+export const shadows = {
+  glow: {
+    cyan: "0 0 20px rgba(0, 212, 255, 0.15)",
+    purple: "0 0 20px rgba(124, 58, 237, 0.15)",
+    success: "0 0 12px rgba(74, 222, 128, 0.2)",
+    error: "0 0 12px rgba(244, 63, 94, 0.2)",
+  },
+  elevated: "0 8px 32px rgba(0, 0, 0, 0.4)",
+} as const;
+
+export const duration = {
+  fast: 150,
+  base: 300,
+  slow: 500,
+  glacial: 1000,
+} as const;
+
+export const easing = {
+  default: "ease",
+  smooth: "cubic-bezier(0.4, 0, 0.2, 1)",
+  spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+} as const;
+
+export const zIndex = {
+  base: 1,
+  dropdown: 10,
+  sticky: 20,
+  overlay: 30,
+  modal: 40,
+  toast: 50,
+} as const;
+
+export const STAGES = [
+  "intake",
+  "plan",
+  "design",
+  "build",
+  "test",
+  "review",
+  "compound_quality",
+  "pr",
+  "merge",
+  "deploy",
+  "monitor",
+] as const;
+
+export type StageName = (typeof STAGES)[number];
+
+export const STAGE_SHORT: Record<StageName, string> = {
+  intake: "INT",
+  plan: "PLN",
+  design: "DSN",
+  build: "BLD",
+  test: "TST",
+  review: "REV",
+  compound_quality: "QA",
+  pr: "PR",
+  merge: "MRG",
+  deploy: "DPL",
+  monitor: "MON",
+};
+
+export const STAGE_COLORS: string[] = [
+  "c-cyan",
+  "c-blue",
+  "c-purple",
+  "c-green",
+  "c-amber",
+  "c-cyan",
+  "c-blue",
+  "c-purple",
+  "c-green",
+  "c-amber",
+  "c-cyan",
+];
+
+export const STAGE_HEX: Record<StageName, string> = {
+  intake: "#00d4ff",
+  plan: "#0066ff",
+  design: "#7c3aed",
+  build: "#4ade80",
+  test: "#fbbf24",
+  review: "#00d4ff",
+  compound_quality: "#0066ff",
+  pr: "#7c3aed",
+  merge: "#4ade80",
+  deploy: "#fbbf24",
+  monitor: "#00d4ff",
+};