shipwright-cli 2.2.1 → 2.3.0

package/dashboard/src/views/agent-cockpit.ts

@@ -0,0 +1,236 @@
+// Agent Cockpit - full-screen agent view with live terminal, CPU/memory sparklines, self-healing ring
+
+import { store } from "../core/state";
+import { escapeHtml, formatDuration, fmtNum } from "../core/helpers";
+import { icon } from "../design/icons";
+import { colors } from "../design/tokens";
+import { renderSparkline } from "../components/charts/sparkline";
+import { renderSVGDonut } from "../components/charts/donut";
+import { LiveTerminal } from "../components/terminal";
+import { SSEClient } from "../core/sse";
+import * as api from "../core/api";
+import type { FleetState, View, PipelineInfo } from "../types/api";
+
+let terminal: LiveTerminal | null = null;
+let sseClient: SSEClient | null = null;
+let selectedAgent: number | null = null;
+let cpuHistory: number[] = [];
+let memHistory: number[] = [];
+
+function renderCockpit(data: FleetState): void {
+  const container = document.getElementById("panel-agent-cockpit");
+  if (!container) return;
+
+  const pipelines = data.pipelines || [];
+  if (pipelines.length === 0 && !selectedAgent) {
+    container.innerHTML = `<div class="empty-state">${icon("cpu", 48)}<p>No active agents</p></div>`;
+    return;
+  }
+
+  // Agent selector bar
+  let html = '<div class="cockpit-layout">';
+  html += '<div class="cockpit-agent-bar">';
+  for (const p of pipelines) {
+    const isSelected = selectedAgent === p.issue;
+    const statusDot = p.status === "failed" ? "offline" : "online";
+    html +=
+      `<button class="cockpit-agent-btn${isSelected ? " selected" : ""}" data-issue="${p.issue}">` +
+      `<span class="presence-dot ${statusDot}"></span>#${p.issue}</button>`;
+  }
+  html += "</div>";
+
+  if (selectedAgent) {
+    const pipeline = pipelines.find((p) => p.issue === selectedAgent);
+    if (pipeline) {
+      html += '<div class="cockpit-main">';
+
+      // Top metrics row
+      html += '<div class="cockpit-metrics">';
+
+      // CPU sparkline
+      html += '<div class="cockpit-metric-card">';
+      html += `<div class="cockpit-metric-header">${icon("cpu", 16)} CPU</div>`;
+      html += `<div class="cockpit-metric-chart">${cpuHistory.length > 1 ? renderSparkline(cpuHistory, colors.accent.cyan, 160, 40) : '<span class="text-muted">\u2014</span>'}</div>`;
+      html += "</div>";
+
+      // Memory sparkline
+      html += '<div class="cockpit-metric-card">';
+      html += `<div class="cockpit-metric-header">${icon("memory-stick", 16)} Memory</div>`;
+      html += `<div class="cockpit-metric-chart">${memHistory.length > 1 ? renderSparkline(memHistory, colors.accent.purple, 160, 40) : '<span class="text-muted">\u2014</span>'}</div>`;
+      html += "</div>";
+
+      // Self-healing ring
+      const healthPct =
+        pipeline.status === "failed"
+          ? 0
+          : Math.min(
+              100,
+              ((pipeline.iteration || 0) / (pipeline.maxIterations || 20)) *
+                100,
+            );
+      html += '<div class="cockpit-metric-card">';
+      html += `<div class="cockpit-metric-header">${icon("shield-alert", 16)} Health</div>`;
+      html += `<div class="cockpit-metric-chart">${renderSVGDonut(100 - healthPct)}</div>`;
+      html += "</div>";
+
+      // Stage + status
+      html += '<div class="cockpit-metric-card">';
+      html += `<div class="cockpit-metric-header">${icon("activity", 16)} Status</div>`;
+      html += '<div class="cockpit-status-info">';
+      html += `<div>Stage: <strong>${escapeHtml(pipeline.stage)}</strong></div>`;
+      html += `<div>Iteration: ${pipeline.iteration || 0}/${pipeline.maxIterations || 20}</div>`;
+      html += `<div>Elapsed: ${formatDuration(pipeline.elapsed_s)}</div>`;
+      if (pipeline.linesWritten != null)
+        html += `<div>Lines: ${fmtNum(pipeline.linesWritten)}</div>`;
+      html += "</div></div>";
+
+      html += "</div>"; // cockpit-metrics
+
+      // Live Changes panel
+      html += '<div class="cockpit-changes" id="cockpit-changes">';
+      html += `<div class="cockpit-changes-header">${icon("file-diff", 16)} Files Changed <button class="btn-sm" id="cockpit-refresh-diff">Refresh</button></div>`;
+      html +=
+        '<div class="cockpit-changes-body" id="cockpit-changes-body"></div>';
+      html += "</div>";
+
+      // Live terminal
+      html +=
+        '<div class="cockpit-terminal" id="cockpit-terminal-container"></div>';
+
+      html += "</div>"; // cockpit-main
+    } else {
+      html += `<div class="empty-state"><p>Agent #${selectedAgent} no longer active</p></div>`;
+    }
+  } else {
+    html += `<div class="empty-state">${icon("terminal", 32)}<p>Select an agent to monitor</p></div>`;
+  }
+
+  html += "</div>";
+  container.innerHTML = html;
+
+  // Wire up agent selector
+  container.querySelectorAll(".cockpit-agent-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const issue = parseInt(btn.getAttribute("data-issue") || "0", 10);
+      if (issue) selectAgent(issue, data);
+    });
+  });
+
+  // Initialize terminal
+  if (selectedAgent) {
+    const termContainer = document.getElementById("cockpit-terminal-container");
+    if (termContainer) {
+      terminal = new LiveTerminal(termContainer);
+      connectAgentStream(selectedAgent);
+    }
+
+    // Load live changes
+    loadCockpitChanges(selectedAgent);
+    const refreshBtn = document.getElementById("cockpit-refresh-diff");
+    if (refreshBtn) {
+      refreshBtn.addEventListener("click", () => {
+        if (selectedAgent) loadCockpitChanges(selectedAgent);
+      });
+    }
+
+    // Update resource histories from agent heartbeat data
+    const agents = data.agents || [];
+    const agentInfo = agents.find((a) => a.issue === selectedAgent);
+    if (agentInfo) {
+      if (agentInfo.cpu_pct != null) {
+        cpuHistory.push(agentInfo.cpu_pct);
+        if (cpuHistory.length > 60) cpuHistory.shift();
+      }
+      if (agentInfo.memory_mb != null) {
+        memHistory.push(agentInfo.memory_mb);
+        if (memHistory.length > 60) memHistory.shift();
+      }
+    }
+  }
+}
+
+function selectAgent(issue: number, data: FleetState): void {
+  if (sseClient) sseClient.close();
+  if (terminal) terminal.destroy();
+  selectedAgent = issue;
+  cpuHistory = [];
+  memHistory = [];
+  renderCockpit(data);
+}
+
+function loadCockpitChanges(issue: number): void {
+  const body = document.getElementById("cockpit-changes-body");
+  if (!body) return;
+  body.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+
+  api
+    .fetchPipelineFiles(issue)
+    .then((data) => {
+      const files = data.files || [];
+      if (files.length === 0) {
+        body.innerHTML = '<div class="empty-state"><p>No changes yet</p></div>';
+        return;
+      }
+      let html = "";
+      for (const f of files) {
+        const statusCls =
+          f.status === "added"
+            ? "file-added"
+            : f.status === "deleted"
+              ? "file-deleted"
+              : "file-modified";
+        const statusChar =
+          f.status === "added" ? "A" : f.status === "deleted" ? "D" : "M";
+        html += `<div class="changes-file-item ${statusCls}"><span class="file-status">${statusChar}</span><span class="file-path">${escapeHtml(f.path)}</span></div>`;
+      }
+      body.innerHTML = html;
+    })
+    .catch(() => {
+      body.innerHTML =
+        '<div class="empty-state"><p>Could not load changes</p></div>';
+    });
+}
+
+function connectAgentStream(issue: number): void {
+  if (sseClient) sseClient.close();
+
+  sseClient = new SSEClient(
+    `/api/logs/${issue}/stream`,
+    (data) => {
+      if (terminal) terminal.append(data);
+    },
+    () => {
+      api
+        .fetchLogs(issue)
+        .then((data) => {
+          if (terminal) terminal.append(data.content || "No logs available");
+        })
+        .catch(() => {
+          if (terminal) terminal.append("Failed to load logs");
+        });
+    },
+  );
+  sseClient.connect();
+}
+
+export const agentCockpitView: View = {
+  init() {},
+
+  render(data: FleetState) {
+    renderCockpit(data);
+  },
+
+  destroy() {
+    if (sseClient) {
+      sseClient.close();
+      sseClient = null;
+    }
+    if (terminal) {
+      terminal.destroy();
+      terminal = null;
+    }
+    selectedAgent = null;
+    cpuHistory = [];
+    memHistory = [];
+  },
+};

package/dashboard/src/views/agents.ts

@@ -0,0 +1,72 @@
+// Agents tab - agent cards grid with intervention controls
+
+import { escapeHtml, formatDuration } from "../core/helpers";
+import { icon } from "../design/icons";
+import { openInterventionModal, confirmAbort } from "../components/modal";
+import * as api from "../core/api";
+import type { FleetState, View, PipelineInfo } from "../types/api";
+
+function renderAgentsTab(data: FleetState): void {
+  const container = document.getElementById("agents-grid");
+  if (!container) return;
+
+  const pipelines = data.pipelines || [];
+  if (pipelines.length === 0) {
+    container.innerHTML = `<div class="empty-state">${icon("users", 32)}<p>No active agents</p></div>`;
+    return;
+  }
+
+  let html = "";
+  for (const p of pipelines) {
+    const statusClass = p.status === "failed" ? "agent-failed" : "agent-active";
+    html +=
+      `<div class="agent-card ${statusClass}">` +
+      `<div class="agent-card-header">` +
+      `<span class="agent-issue">#${p.issue}</span>` +
+      `<span class="agent-title">${escapeHtml(p.title)}</span></div>` +
+      `<div class="agent-card-body">` +
+      `<div class="agent-info-row"><span class="agent-info-label">${icon("activity", 14)} Stage</span>` +
+      `<span class="agent-info-value">${escapeHtml(p.stage)}</span></div>` +
+      `<div class="agent-info-row"><span class="agent-info-label">${icon("timer", 14)} Elapsed</span>` +
+      `<span class="agent-info-value">${formatDuration(p.elapsed_s)}</span></div>` +
+      `<div class="agent-info-row"><span class="agent-info-label">${icon("refresh-cw", 14)} Iteration</span>` +
+      `<span class="agent-info-value">${p.iteration || 0}/${p.maxIterations || 20}</span></div>` +
+      `</div>` +
+      `<div class="agent-card-actions">` +
+      `<button class="agent-action-btn" data-action="message" data-issue="${p.issue}">${icon("message-square", 14)} Message</button>` +
+      `<button class="agent-action-btn" data-action="pause" data-issue="${p.issue}">${icon("pause", 14)} Pause</button>` +
+      `<button class="agent-action-btn danger" data-action="abort" data-issue="${p.issue}">${icon("square", 14)} Abort</button>` +
+      `</div></div>`;
+  }
+  container.innerHTML = html;
+
+  // Wire up action buttons
+  container.querySelectorAll(".agent-action-btn").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const action = btn.getAttribute("data-action");
+      const issue = parseInt(btn.getAttribute("data-issue") || "0", 10);
+      if (!issue) return;
+
+      switch (action) {
+        case "message":
+          openInterventionModal(issue);
+          break;
+        case "pause":
+          api.sendIntervention(issue, "pause");
+          break;
+        case "abort":
+          confirmAbort(issue);
+          break;
+      }
+    });
+  });
+}
+
+export const agentsView: View = {
+  init() {},
+  render(data: FleetState) {
+    renderAgentsTab(data);
+  },
+  destroy() {},
+};

package/dashboard/src/views/fleet-map.ts

@@ -0,0 +1,299 @@
+// Fleet Map - Canvas2D topology with stage columns, animated pipeline particles
+
+import { store } from "../core/state";
+import { colors, STAGES, STAGE_HEX, STAGE_SHORT } from "../design/tokens";
+import { formatDuration } from "../core/helpers";
+import {
+  CanvasRenderer,
+  drawText,
+  drawCircle,
+  drawRoundRect,
+  type CanvasScene,
+} from "../canvas/renderer";
+import {
+  computeLayout,
+  type LayoutNode,
+  type StageColumn,
+} from "../canvas/layout";
+import { ParticleSystem } from "../canvas/particles";
+import { hitTestNode, ZoomPan } from "../canvas/interactions";
+import { drawTooltip, drawStageLabel } from "../canvas/overlays";
+import * as api from "../core/api";
+import type { FleetState, View } from "../types/api";
+
+let renderer: CanvasRenderer | null = null;
+let scene: FleetMapScene | null = null;
+
+class FleetMapScene implements CanvasScene {
+  nodes: LayoutNode[] = [];
+  columns: StageColumn[] = [];
+  particles = new ParticleSystem();
+  zoomPan = new ZoomPan();
+  hoveredNode: LayoutNode | null = null;
+  predictions: Record<
+    number,
+    { eta_s?: number; success_probability?: number; estimated_cost?: number }
+  > = {};
+  time = 0;
+  width = 0;
+  height = 0;
+
+  updateData(data: FleetState): void {
+    if (!data.pipelines) return;
+    const { nodes, columns } = computeLayout(
+      data.pipelines,
+      this.width,
+      this.height,
+    );
+
+    // Smooth transition: find matching nodes and lerp
+    for (const newNode of nodes) {
+      const existing = this.nodes.find((n) => n.issue === newNode.issue);
+      if (existing) {
+        newNode.x = existing.x;
+        newNode.y = existing.y;
+      }
+    }
+
+    this.nodes = nodes;
+    this.columns = columns;
+
+    // Fetch predictions for active pipelines
+    for (const p of data.pipelines) {
+      if (!this.predictions[p.issue]) {
+        api.fetchPredictions(p.issue).then((pred) => {
+          this.predictions[p.issue] = pred;
+        });
+      }
+    }
+  }
+
+  update(dt: number): void {
+    this.time += dt;
+
+    // Smooth node movement
+    for (const node of this.nodes) {
+      const dx = node.targetX - node.x;
+      const dy = node.targetY - node.y;
+      node.x += dx * 5 * dt;
+      node.y += dy * 5 * dt;
+    }
+
+    // Emit trail particles for active nodes
+    for (const node of this.nodes) {
+      if (node.status === "active" || node.status === "running") {
+        if (Math.random() < 0.3) {
+          this.particles.emit(
+            node.x + (Math.random() - 0.5) * node.radius,
+            node.y + (Math.random() - 0.5) * node.radius,
+            "trail",
+            node.color,
+            1,
+          );
+        }
+      }
+    }
+
+    // Ambient particles along columns
+    if (Math.random() < 0.05) {
+      const col = this.columns[Math.floor(Math.random() * this.columns.length)];
+      if (col) {
+        this.particles.emit(
+          col.x + Math.random() * col.width,
+          Math.random() * this.height,
+          "ambient",
+          col.color,
+          1,
+        );
+      }
+    }
+
+    this.particles.update(dt);
+  }
+
+  draw(ctx: CanvasRenderingContext2D, width: number, height: number): void {
+    // Background
+    ctx.fillStyle = colors.bg.abyss;
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.save();
+    this.zoomPan.apply(ctx);
+
+    // Stage columns
+    for (const col of this.columns) {
+      // Column separator
+      ctx.fillStyle = colors.bg.deep;
+      ctx.fillRect(col.x, 0, col.width, height);
+
+      // Column border
+      ctx.strokeStyle = colors.bg.foam + "40";
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(col.x, 0);
+      ctx.lineTo(col.x, height);
+      ctx.stroke();
+
+      // Stage label at top
+      drawStageLabel(ctx, col.name, col.x + col.width / 2, 20, col.color);
+    }
+
+    // Connection lines between pipeline stages
+    for (const node of this.nodes) {
+      if (node.stageIndex > 0) {
+        const prevCol = this.columns[node.stageIndex - 1];
+        if (prevCol) {
+          const fromX = prevCol.x + prevCol.width / 2;
+          ctx.globalAlpha = 0.15;
+          ctx.strokeStyle = node.color;
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 4]);
+          ctx.beginPath();
+          ctx.moveTo(fromX, node.y);
+          ctx.lineTo(node.x, node.y);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          ctx.globalAlpha = 1;
+        }
+      }
+    }
+
+    // Particles (behind nodes)
+    this.particles.draw(ctx);
+
+    // Pipeline nodes
+    for (const node of this.nodes) {
+      const isHovered = this.hoveredNode === node;
+      const r = isHovered ? node.radius * 1.2 : node.radius;
+
+      // Glow
+      if (node.status !== "failed") {
+        ctx.globalAlpha = 0.2 + 0.1 * Math.sin(this.time * 2 + node.issue);
+        drawCircle(ctx, node.x, node.y, r + 6, undefined, node.color, 2);
+        ctx.globalAlpha = 1;
+      }
+
+      // Node circle
+      drawCircle(ctx, node.x, node.y, r, node.color);
+
+      // Issue number
+      drawText(ctx, "#" + node.issue, node.x, node.y - 4, {
+        font: "monoSm",
+        color: colors.bg.abyss,
+        align: "center",
+        baseline: "middle",
+      });
+
+      // Progress arc
+      if (node.progress > 0 && node.progress < 1) {
+        ctx.beginPath();
+        ctx.arc(
+          node.x,
+          node.y,
+          r + 3,
+          -Math.PI / 2,
+          -Math.PI / 2 + node.progress * Math.PI * 2,
+        );
+        ctx.strokeStyle = colors.accent.cyan;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+
+    ctx.restore();
+
+    // Tooltip (drawn in screen space)
+    if (this.hoveredNode) {
+      drawTooltip(
+        ctx,
+        this.hoveredNode,
+        this.predictions[this.hoveredNode.issue],
+      );
+    }
+
+    // HUD: pipeline count
+    drawText(
+      ctx,
+      `${this.nodes.length} active pipeline${this.nodes.length !== 1 ? "s" : ""}`,
+      16,
+      height - 30,
+      {
+        font: "caption",
+        color: colors.text.muted,
+      },
+    );
+    drawText(ctx, `${this.particles.count} particles`, 16, height - 16, {
+      font: "tiny",
+      color: colors.text.muted,
+    });
+  }
+
+  onResize(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+    // Recompute layout
+    const data = store.get("fleetState");
+    if (data?.pipelines) {
+      const { nodes, columns } = computeLayout(data.pipelines, width, height);
+      this.nodes = nodes;
+      this.columns = columns;
+    }
+  }
+
+  onMouseMove(x: number, y: number): void {
+    const world = this.zoomPan.screenToWorld(x, y);
+    this.hoveredNode = hitTestNode(this.nodes, world.x, world.y);
+    if (renderer) {
+      renderer.getCanvas().style.cursor = this.hoveredNode
+        ? "pointer"
+        : "default";
+    }
+  }
+
+  onMouseClick(x: number, y: number): void {
+    const world = this.zoomPan.screenToWorld(x, y);
+    const node = hitTestNode(this.nodes, world.x, world.y);
+    if (node) {
+      this.particles.burstAt(node.x, node.y, node.color);
+      import("../core/router").then(({ switchTab }) => {
+        switchTab("pipelines");
+        import("./pipelines").then(({ fetchPipelineDetail }) => {
+          fetchPipelineDetail(node.issue);
+        });
+      });
+    }
+  }
+
+  onMouseWheel(delta: number): void {
+    this.zoomPan.zoom(delta, this.width / 2, this.height / 2);
+  }
+}
+
+export const fleetMapView: View = {
+  init() {
+    const container = document.getElementById("panel-fleet-map");
+    if (!container) return;
+
+    container.innerHTML =
+      '<div class="fleet-map-canvas" style="width:100%;height:calc(100vh - 160px);position:relative;"></div>';
+    const canvasContainer = container.querySelector(
+      ".fleet-map-canvas",
+    ) as HTMLElement;
+
+    renderer = new CanvasRenderer(canvasContainer);
+    scene = new FleetMapScene();
+    renderer.setScene(scene);
+    renderer.start();
+  },
+
+  render(data: FleetState) {
+    if (scene) scene.updateData(data);
+  },
+
+  destroy() {
+    if (renderer) {
+      renderer.destroy();
+      renderer = null;
+    }
+    scene = null;
+  },
+};