shipwright-cli 2.2.1 → 2.3.0

package/dashboard/src/main.ts

@@ -0,0 +1,68 @@
+// Fleet Command Dashboard - Main Entry Point
+// Boots WebSocket, router, header, modals, and registers all views
+
+import { connect } from "./core/ws";
+import { store } from "./core/state";
+import { setupRouter, registerView } from "./core/router";
+import {
+  setupHeader,
+  renderCostTicker,
+  renderAlertBanner,
+  updateEmergencyBrakeVisibility,
+  updateAmbientIndicator,
+  detectCompletions,
+} from "./components/header";
+import { setupInterventionModal, setupBulkActions } from "./components/modal";
+
+// Views
+import { overviewView } from "./views/overview";
+import { agentsView } from "./views/agents";
+import { pipelinesView } from "./views/pipelines";
+import { timelineView } from "./views/timeline";
+import { activityView } from "./views/activity";
+import { metricsView } from "./views/metrics";
+import { machinesView } from "./views/machines";
+import { insightsView } from "./views/insights";
+import { teamView } from "./views/team";
+
+// New visualization views (lazy-loaded when tabs exist)
+import { fleetMapView } from "./views/fleet-map";
+import { pipelineTheaterView } from "./views/pipeline-theater";
+import { agentCockpitView } from "./views/agent-cockpit";
+
+// Register all views
+registerView("overview", overviewView);
+registerView("agents", agentsView);
+registerView("pipelines", pipelinesView);
+registerView("timeline", timelineView);
+registerView("activity", activityView);
+registerView("metrics", metricsView);
+registerView("machines", machinesView);
+registerView("insights", insightsView);
+registerView("team", teamView);
+registerView("fleet-map", fleetMapView);
+registerView("pipeline-theater", pipelineTheaterView);
+registerView("agent-cockpit", agentCockpitView);
+
+// Setup header (user menu, daemon control, emergency brake)
+setupHeader();
+
+// Setup shared modals
+setupInterventionModal();
+setupBulkActions();
+
+// Setup tab routing
+setupRouter();
+
+// Subscribe to fleet state for global UI updates
+store.subscribe("fleetState", (data) => {
+  if (!data) return;
+  renderCostTicker(data);
+  renderAlertBanner(data);
+  updateEmergencyBrakeVisibility(data);
+  updateAmbientIndicator(data);
+  detectCompletions(data);
+});
+
+// Connect WebSocket
+connect();

package/dashboard/src/types/api.ts

@@ -0,0 +1,337 @@
+// Shared TypeScript interfaces for all API responses
+// These types mirror the actual shapes returned by dashboard/server.ts
+
+export interface DaemonInfo {
+  running: boolean;
+  pid: number | null;
+  uptime_s: number;
+  maxParallel: number;
+  pollInterval: number;
+}
+
+export interface PipelineInfo {
+  issue: number;
+  title: string;
+  stage: string;
+  stagesDone: string[];
+  elapsed_s: number;
+  worktree?: string;
+  iteration: number;
+  maxIterations: number;
+  linesWritten?: number;
+  testsPassing?: boolean;
+  cost?: number;
+  branch?: string;
+  status?: string;
+}
+
+export interface QueueItem {
+  issue: number;
+  title: string;
+  score?: number;
+  estimated_cost?: number;
+  factors?: ScoringFactors;
+}
+
+export interface ScoringFactors {
+  complexity?: number;
+  impact?: number;
+  priority?: number;
+  age?: number;
+  dependency?: number;
+  memory?: number;
+}
+
+export interface EventItem {
+  ts?: string;
+  timestamp?: string;
+  type: string;
+  issue?: number;
+  issueTitle?: string;
+  title?: string;
+  duration_s?: number;
+  stage?: string;
+  result?: string;
+  [key: string]: unknown;
+}
+
+export interface ScaleInfo {
+  from?: number;
+  to?: number;
+  cpuCores?: number;
+  maxByCpu?: number;
+  maxByMem?: number;
+  maxByBudget?: number;
+  availMemGb?: number;
+}
+
+export interface MetricsSummary {
+  completed?: number;
+  failed?: number;
+  cpuCores?: number;
+}
+
+export interface CostInfo {
+  today_spent: number;
+  daily_budget: number;
+  pct_used: number;
+}
+
+export interface DoraMetric {
+  value: number;
+  unit: string;
+  grade: string;
+}
+
+export interface DoraGrades {
+  deploy_freq: DoraMetric;
+  lead_time: DoraMetric;
+  cfr: DoraMetric;
+  mttr: DoraMetric;
+}
+
+export interface AgentInfo {
+  id: string;
+  issue: number;
+  title: string;
+  machine: string;
+  stage: string;
+  iteration: number;
+  activity: string;
+  memory_mb: number;
+  cpu_pct: number;
+  status: "active" | "idle" | "stale" | "dead";
+  heartbeat_age_s: number;
+  started_at: string;
+  elapsed_s: number;
+}
+
+export interface FleetState {
+  timestamp: string;
+  daemon: DaemonInfo;
+  pipelines: PipelineInfo[];
+  queue: QueueItem[];
+  events: EventItem[];
+  scale: ScaleInfo;
+  metrics: MetricsSummary;
+  agents: AgentInfo[];
+  machines: MachineInfo[];
+  cost: CostInfo;
+  dora: DoraGrades;
+  team?: TeamData;
+}
+
+export interface CostBreakdown {
+  by_model?: Record<string, number>;
+  by_stage?: Record<string, number>;
+  by_issue?: Array<{ issue: number; cost: number }>;
+  budget?: number;
+  spent?: number;
+}
+
+export interface StageHistoryEntry {
+  stage: string;
+  duration_s: number;
+  ts: string;
+}
+
+export interface PipelineDetail {
+  issue: number;
+  title: string;
+  stage: string;
+  stageHistory: StageHistoryEntry[];
+  plan: string;
+  design: string;
+  dod: string;
+  intake: Record<string, unknown> | null;
+  elapsed_s: number;
+  branch: string;
+  prLink: string;
+}
+
+export interface TimelineEntry {
+  issue: number;
+  title: string;
+  segments: TimelineSegment[];
+}
+
+export interface TimelineSegment {
+  stage: string;
+  start: string;
+  end: string | null;
+  status: "complete" | "running" | "failed";
+}
+
+export interface MetricsData {
+  success_rate: number;
+  avg_duration_s: number;
+  throughput_per_hour: number;
+  total_completed: number;
+  total_failed: number;
+  stage_durations: Record<string, number>;
+  daily_counts: DailyCount[];
+  dora_grades: DoraGrades;
+}
+
+export interface DailyCount {
+  date: string;
+  completed: number;
+  failed: number;
+}
+
+export interface DoraMetrics {
+  deploy_freq?: DoraMetric;
+  lead_time?: DoraMetric;
+  cfr?: DoraMetric;
+  mttr?: DoraMetric;
+}
+
+export interface MachineInfo {
+  name: string;
+  host: string;
+  role: string;
+  max_workers: number;
+  active_workers: number;
+  registered_at: string;
+  ssh_user?: string;
+  shipwright_path?: string;
+  status: "online" | "degraded" | "offline";
+  health: MachineHealth;
+  join_token?: string;
+}
+
+export interface MachineHealth {
+  daemon_running: boolean;
+  heartbeat_count: number;
+  last_heartbeat_s_ago: number;
+}
+
+export interface JoinToken {
+  label: string;
+  created_at?: string;
+  used?: boolean;
+  token?: string;
+}
+
+export interface InsightsData {
+  patterns: FailurePattern[] | null;
+  decisions: Decision[] | null;
+  patrol: PatrolFinding[] | null;
+  heatmap: HeatmapData | null;
+  globalLearnings: Array<Record<string, unknown>> | null;
+}
+
+export interface FailurePattern {
+  description?: string;
+  pattern?: string;
+  frequency?: number;
+  count?: number;
+  root_cause?: string;
+  fix?: string;
+  suggested_fix?: string;
+}
+
+export interface Decision {
+  timestamp?: string;
+  ts?: string;
+  action?: string;
+  decision?: string;
+  outcome?: string;
+  result?: string;
+  issue?: number;
+}
+
+export interface PatrolFinding {
+  severity?: string;
+  type?: string;
+  category?: string;
+  description?: string;
+  message?: string;
+  file?: string;
+}
+
+// Heatmap from server: { heatmap: Record<stage, Record<date, count>> }
+export interface HeatmapData {
+  heatmap: Record<string, Record<string, number>>;
+}
+
+export interface DaemonConfig {
+  paused?: boolean;
+  config?: Record<string, unknown>;
+  budget?: Record<string, unknown>;
+}
+
+export interface AlertInfo {
+  severity: string;
+  message: string;
+  type?: string;
+  issue?: number;
+  actions?: string[];
+}
+
+export interface TeamData {
+  total_online?: number;
+  total_active_pipelines?: number;
+  total_queued?: number;
+  developers?: TeamDeveloper[];
+}
+
+export interface TeamDeveloper {
+  developer_id: string;
+  machine_name: string;
+  hostname?: string;
+  platform?: string;
+  last_heartbeat?: number;
+  daemon_running: boolean;
+  daemon_pid?: number | null;
+  active_jobs: Array<{ issue: number; title?: string; stage?: string }>;
+  queued: number[];
+  events_since?: number;
+  _presence?: string;
+}
+
+export interface TeamActivityEvent {
+  ts?: string;
+  type: string;
+  issue?: number;
+  from_developer?: string;
+  stage?: string;
+  result?: string;
+}
+
+export interface StagePerformance {
+  name?: string;
+  stage?: string;
+  avg_s: number;
+  min_s?: number;
+  max_s?: number;
+  count: number;
+  trend_pct?: number;
+}
+
+export interface UserInfo {
+  username?: string;
+  avatarUrl?: string;
+  isAdmin?: boolean;
+  role?: "viewer" | "operator" | "admin";
+}
+
+export type TabId =
+  | "overview"
+  | "agents"
+  | "pipelines"
+  | "timeline"
+  | "activity"
+  | "metrics"
+  | "machines"
+  | "insights"
+  | "team"
+  | "fleet-map"
+  | "pipeline-theater"
+  | "agent-cockpit";
+
+export interface View {
+  init(): void;
+  render(state: FleetState): void;
+  destroy(): void;
+}

package/dashboard/src/views/activity.ts

@@ -0,0 +1,185 @@
+// Activity tab - filterable event feed with pagination
+
+import { store } from "../core/state";
+import {
+  escapeHtml,
+  formatDuration,
+  formatTime,
+  getBadgeClass,
+  getTypeShort,
+} from "../core/helpers";
+import { icon } from "../design/icons";
+import * as api from "../core/api";
+import type { FleetState, View } from "../types/api";
+
+function setupActivityFilters(): void {
+  const chips = document.querySelectorAll("#activity-filters .filter-chip");
+  chips.forEach((chip) => {
+    chip.addEventListener("click", () => {
+      store.set("activityFilter", chip.getAttribute("data-filter") || "all");
+      const siblings = document.querySelectorAll(
+        "#activity-filters .filter-chip",
+      );
+      siblings.forEach((s) => s.classList.remove("active"));
+      chip.classList.add("active");
+      renderActivityTimeline();
+    });
+  });
+
+  const issueFilter = document.getElementById(
+    "activity-issue-filter",
+  ) as HTMLInputElement;
+  if (issueFilter) {
+    issueFilter.addEventListener("input", () => {
+      store.set(
+        "activityIssueFilter",
+        issueFilter.value.replace(/[^0-9]/g, ""),
+      );
+      renderActivityTimeline();
+    });
+  }
+
+  const loadMoreBtn = document.getElementById("load-more-btn");
+  if (loadMoreBtn) loadMoreBtn.addEventListener("click", loadMoreActivity);
+}
+
+function loadActivity(): void {
+  store.update({ activityOffset: 0, activityEvents: [] });
+
+  api
+    .fetchActivity({ limit: 50, offset: 0 })
+    .then((result) => {
+      store.update({
+        activityEvents: result.events || [],
+        activityHasMore: result.hasMore || false,
+        activityOffset: (result.events || []).length,
+      });
+      renderActivityTimeline();
+    })
+    .catch((err) => {
+      const el = document.getElementById("activity-timeline");
+      if (el)
+        el.innerHTML = `<div class="empty-state"><p>Failed to load: ${escapeHtml(String(err))}</p></div>`;
+    });
+}
+
+function loadMoreActivity(): void {
+  const btn = document.getElementById("load-more-btn") as HTMLButtonElement;
+  if (btn) {
+    btn.disabled = true;
+    btn.textContent = "Loading...";
+  }
+
+  const offset = store.get("activityOffset");
+  api
+    .fetchActivity({ limit: 50, offset })
+    .then((result) => {
+      const existing = store.get("activityEvents");
+      const newEvents = result.events || [];
+      store.update({
+        activityEvents: [...existing, ...newEvents],
+        activityHasMore: result.hasMore || false,
+        activityOffset: existing.length + newEvents.length,
+      });
+      renderActivityTimeline();
+      if (btn) {
+        btn.disabled = false;
+        btn.textContent = "Load more";
+      }
+    })
+    .catch(() => {
+      if (btn) {
+        btn.disabled = false;
+        btn.textContent = "Load more";
+      }
+    });
+}
+
+function renderActivityTimeline(): void {
+  const container = document.getElementById("activity-timeline");
+  const loadMoreWrap = document.getElementById("activity-load-more");
+  if (!container) return;
+
+  const activityEvents = store.get("activityEvents");
+  const activityFilter = store.get("activityFilter");
+  const activityIssueFilter = store.get("activityIssueFilter");
+  const activityHasMore = store.get("activityHasMore");
+
+  const filtered = activityEvents.filter((ev) => {
+    const typeRaw = String(ev.type || "");
+    const badge = getBadgeClass(typeRaw);
+    if (
+      activityFilter !== "all" &&
+      badge !== activityFilter &&
+      !typeRaw.includes(activityFilter)
+    )
+      return false;
+    if (activityIssueFilter && String(ev.issue || "") !== activityIssueFilter)
+      return false;
+    return true;
+  });
+
+  if (filtered.length === 0) {
+    container.innerHTML =
+      '<div class="empty-state"><p>No matching events</p></div>';
+    if (loadMoreWrap)
+      loadMoreWrap.style.display = activityHasMore ? "" : "none";
+    return;
+  }
+
+  let html = "";
+  for (const ev of filtered) {
+    const typeRaw = String(ev.type || "unknown");
+    const typeShort = getTypeShort(typeRaw);
+    const badgeClass = getBadgeClass(typeRaw);
+
+    let detail = "";
+    if (ev.stage) detail += "stage=" + ev.stage + " ";
+    if (ev.issueTitle) detail += ev.issueTitle;
+    else if (ev.title) detail += ev.title;
+    detail = detail.trim();
+
+    if (!detail) {
+      const skip: Record<string, boolean> = {
+        ts: true,
+        type: true,
+        timestamp: true,
+        issue: true,
+        stage: true,
+        duration_s: true,
+        issueTitle: true,
+        title: true,
+      };
+      const dparts: string[] = [];
+      for (const [key, val] of Object.entries(ev)) {
+        if (!skip[key]) dparts.push(key + "=" + val);
+      }
+      detail = dparts.join(" ");
+    }
+
+    html +=
+      `<div class="timeline-row">` +
+      `<span class="timeline-ts">${formatTime(String(ev.ts || ev.timestamp || ""))}</span>` +
+      `<span class="activity-badge ${badgeClass}">${escapeHtml(typeShort)}</span>` +
+      (ev.issue ? `<span class="timeline-issue">#${ev.issue}</span>` : "") +
+      `<span class="timeline-detail">${escapeHtml(detail)}</span>` +
+      (ev.duration_s != null
+        ? `<span class="timeline-duration">${formatDuration(Number(ev.duration_s))}</span>`
+        : "") +
+      `</div>`;
+  }
+
+  container.innerHTML = html;
+  if (loadMoreWrap) loadMoreWrap.style.display = activityHasMore ? "" : "none";
+}
+
+export const activityView: View = {
+  init() {
+    setupActivityFilters();
+    if (store.get("activityEvents").length === 0) loadActivity();
+  },
+  render(_data: FleetState) {
+    renderActivityTimeline();
+  },
+  destroy() {},
+};