shipwright-cli 2.2.1 → 2.3.0

package/dashboard/src/canvas/interactions.ts

@@ -0,0 +1,74 @@
+// Hit testing, hover, click, zoom handlers for canvas
+
+import type { LayoutNode, StageColumn } from "./layout";
+
+export interface HoverState {
+  node: LayoutNode | null;
+  column: StageColumn | null;
+}
+
+export function hitTestNode(
+  nodes: LayoutNode[],
+  x: number,
+  y: number,
+): LayoutNode | null {
+  for (const node of nodes) {
+    const dx = x - node.x;
+    const dy = y - node.y;
+    if (dx * dx + dy * dy <= node.radius * node.radius) {
+      return node;
+    }
+  }
+  return null;
+}
+
+export function hitTestColumn(
+  columns: StageColumn[],
+  x: number,
+  _y: number,
+): StageColumn | null {
+  for (const col of columns) {
+    if (x >= col.x && x <= col.x + col.width) {
+      return col;
+    }
+  }
+  return null;
+}
+
+export class ZoomPan {
+  public scale = 1;
+  public offsetX = 0;
+  public offsetY = 0;
+  private minScale = 0.5;
+  private maxScale = 3;
+
+  zoom(delta: number, cx: number, cy: number): void {
+    const factor = delta > 0 ? 0.95 : 1.05;
+    const newScale = Math.max(
+      this.minScale,
+      Math.min(this.maxScale, this.scale * factor),
+    );
+    const ratio = newScale / this.scale;
+    this.offsetX = cx - (cx - this.offsetX) * ratio;
+    this.offsetY = cy - (cy - this.offsetY) * ratio;
+    this.scale = newScale;
+  }
+
+  screenToWorld(sx: number, sy: number): { x: number; y: number } {
+    return {
+      x: (sx - this.offsetX) / this.scale,
+      y: (sy - this.offsetY) / this.scale,
+    };
+  }
+
+  apply(ctx: CanvasRenderingContext2D): void {
+    ctx.translate(this.offsetX, this.offsetY);
+    ctx.scale(this.scale, this.scale);
+  }
+
+  reset(): void {
+    this.scale = 1;
+    this.offsetX = 0;
+    this.offsetY = 0;
+  }
+}

package/dashboard/src/canvas/layout.ts

@@ -0,0 +1,85 @@
+// Stage-column layout algorithm for fleet topology map
+
+import { STAGES, STAGE_HEX, type StageName } from "../design/tokens";
+import { colors } from "../design/tokens";
+import type { PipelineInfo } from "../types/api";
+
+export interface LayoutNode {
+  issue: number;
+  title: string;
+  stage: string;
+  stageIndex: number;
+  x: number;
+  y: number;
+  targetX: number;
+  targetY: number;
+  radius: number;
+  color: string;
+  status: string;
+  progress: number; // 0-1 within current stage
+  velocity: number;
+}
+
+export interface StageColumn {
+  name: string;
+  x: number;
+  width: number;
+  color: string;
+}
+
+export function computeLayout(
+  pipelines: PipelineInfo[],
+  width: number,
+  height: number,
+): { nodes: LayoutNode[]; columns: StageColumn[] } {
+  const padding = 60;
+  const colWidth = (width - padding * 2) / STAGES.length;
+  const columns: StageColumn[] = STAGES.map((stage, i) => ({
+    name: stage === "compound_quality" ? "quality" : stage,
+    x: padding + i * colWidth,
+    width: colWidth,
+    color: STAGE_HEX[stage],
+  }));
+
+  const stageNodes: Record<string, PipelineInfo[]> = {};
+  for (const p of pipelines) {
+    const stage = p.stage || "intake";
+    if (!stageNodes[stage]) stageNodes[stage] = [];
+    stageNodes[stage].push(p);
+  }
+
+  const nodes: LayoutNode[] = [];
+  for (const p of pipelines) {
+    const stage = p.stage || "intake";
+    const stageIdx = STAGES.indexOf(stage as StageName);
+    const col = columns[stageIdx >= 0 ? stageIdx : 0];
+    const pipelinesInStage = stageNodes[stage] || [];
+    const indexInStage = pipelinesInStage.indexOf(p);
+    const spacing = Math.min(
+      60,
+      (height - padding * 2) / (pipelinesInStage.length + 1),
+    );
+    const yOffset = padding + (indexInStage + 1) * spacing;
+
+    const nodeColor = p.status === "failed" ? colors.semantic.error : col.color;
+    const progress = (p.stagesDone?.length || 0) / STAGES.length;
+
+    nodes.push({
+      issue: p.issue,
+      title: p.title || "",
+      stage,
+      stageIndex: stageIdx >= 0 ? stageIdx : 0,
+      x: col.x + col.width / 2,
+      y: yOffset,
+      targetX: col.x + col.width / 2,
+      targetY: yOffset,
+      radius: 18,
+      color: nodeColor,
+      status: p.status || "active",
+      progress,
+      velocity: 0.5 + Math.random() * 0.5,
+    });
+  }
+
+  return { nodes, columns };
+}

package/dashboard/src/canvas/overlays.ts

@@ -0,0 +1,117 @@
+// Floating labels, tooltips, prediction overlays
+
+import {
+  colors,
+  fonts,
+  typeScale,
+  radius as borderRadius,
+} from "../design/tokens";
+import { drawRoundRect, drawText } from "./renderer";
+import { formatDuration } from "../core/helpers";
+import type { LayoutNode } from "./layout";
+
+export function drawTooltip(
+  ctx: CanvasRenderingContext2D,
+  node: LayoutNode,
+  predictions?: {
+    eta_s?: number;
+    success_probability?: number;
+    estimated_cost?: number;
+  },
+): void {
+  const padding = 12;
+  const lineHeight = 20;
+  const lines: string[] = [
+    `#${node.issue} ${node.title.substring(0, 40)}`,
+    `Stage: ${node.stage}`,
+    `Status: ${node.status}`,
+  ];
+
+  if (predictions) {
+    if (predictions.eta_s != null)
+      lines.push(`ETA: ${formatDuration(predictions.eta_s)}`);
+    if (predictions.success_probability != null)
+      lines.push(
+        `Success: ${(predictions.success_probability * 100).toFixed(0)}%`,
+      );
+    if (predictions.estimated_cost != null)
+      lines.push(`Est. cost: $${predictions.estimated_cost.toFixed(2)}`);
+  }
+
+  const style = typeScale.caption;
+  ctx.font = `${style.weight} ${style.size}px ${style.family}`;
+
+  let maxWidth = 0;
+  for (const line of lines) {
+    const w = ctx.measureText(line).width;
+    if (w > maxWidth) maxWidth = w;
+  }
+
+  const boxWidth = maxWidth + padding * 2;
+  const boxHeight = lines.length * lineHeight + padding * 2;
+  const x = node.x + node.radius + 10;
+  const y = node.y - boxHeight / 2;
+
+  // Background
+  ctx.fillStyle = colors.bg.ocean;
+  drawRoundRect(ctx, x, y, boxWidth, boxHeight, borderRadius.md);
+  ctx.fill();
+
+  // Border
+  ctx.strokeStyle = colors.accent.cyanDim;
+  ctx.lineWidth = 1;
+  drawRoundRect(ctx, x, y, boxWidth, boxHeight, borderRadius.md);
+  ctx.stroke();
+
+  // Text
+  for (let i = 0; i < lines.length; i++) {
+    drawText(ctx, lines[i], x + padding, y + padding + i * lineHeight, {
+      font: "caption",
+      color: i === 0 ? colors.text.primary : colors.text.secondary,
+    });
+  }
+}
+
+export function drawPredictionGhost(
+  ctx: CanvasRenderingContext2D,
+  fromX: number,
+  fromY: number,
+  toX: number,
+  toY: number,
+  progress: number,
+  color: string,
+): void {
+  const x = fromX + (toX - fromX) * progress;
+  const y = fromY + (toY - fromY) * progress;
+
+  ctx.globalAlpha = 0.3;
+  ctx.beginPath();
+  ctx.arc(x, y, 8, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+
+  // Dashed line to destination
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(toX, toY);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.globalAlpha = 1;
+}
+
+export function drawStageLabel(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  color: string,
+): void {
+  drawText(ctx, text.toUpperCase(), x, y, {
+    font: "monoSm",
+    color,
+    align: "center",
+  });
+}

package/dashboard/src/canvas/particles.ts

@@ -0,0 +1,105 @@
+// Pipeline particle system - movement, trail effects, completion bursts
+
+import { colors } from "../design/tokens";
+
+export interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  size: number;
+  color: string;
+  type: "trail" | "burst" | "ambient";
+  alpha: number;
+}
+
+export class ParticleSystem {
+  private particles: Particle[] = [];
+  private maxParticles = 500;
+
+  emit(
+    x: number,
+    y: number,
+    type: "trail" | "burst" | "ambient",
+    color: string,
+    count = 1,
+  ): void {
+    for (let i = 0; i < count; i++) {
+      if (this.particles.length >= this.maxParticles) break;
+
+      const angle = Math.random() * Math.PI * 2;
+      const speed =
+        type === "burst"
+          ? 30 + Math.random() * 60
+          : type === "trail"
+            ? 5 + Math.random() * 10
+            : 2 + Math.random() * 5;
+
+      this.particles.push({
+        x,
+        y,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        life:
+          type === "burst"
+            ? 0.5 + Math.random() * 0.5
+            : type === "trail"
+              ? 0.3 + Math.random() * 0.3
+              : 2 + Math.random() * 3,
+        maxLife: type === "burst" ? 1 : type === "trail" ? 0.6 : 5,
+        size:
+          type === "burst"
+            ? 2 + Math.random() * 3
+            : type === "trail"
+              ? 1 + Math.random() * 2
+              : 1,
+        color,
+        type,
+        alpha: 1,
+      });
+    }
+  }
+
+  update(dt: number): void {
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      const p = this.particles[i];
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.life -= dt;
+      p.alpha = Math.max(0, p.life / p.maxLife);
+
+      // Slow down
+      p.vx *= 0.98;
+      p.vy *= 0.98;
+
+      if (p.life <= 0) {
+        this.particles.splice(i, 1);
+      }
+    }
+  }
+
+  draw(ctx: CanvasRenderingContext2D): void {
+    for (const p of this.particles) {
+      ctx.globalAlpha = p.alpha * 0.8;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      ctx.fillStyle = p.color;
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+
+  burstAt(x: number, y: number, color: string): void {
+    this.emit(x, y, "burst", color, 20);
+  }
+
+  clear(): void {
+    this.particles = [];
+  }
+
+  get count(): number {
+    return this.particles.length;
+  }
+}

package/dashboard/src/canvas/renderer.ts

@@ -0,0 +1,191 @@
+// Base Canvas2D renderer with requestAnimationFrame loop and dirty tracking
+
+import { colors, fonts, typeScale } from "../design/tokens";
+
+export interface CanvasScene {
+  update(dt: number): void;
+  draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+  onResize(width: number, height: number): void;
+  onMouseMove(x: number, y: number): void;
+  onMouseClick(x: number, y: number): void;
+  onMouseWheel(delta: number): void;
+}
+
+export class CanvasRenderer {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private scene: CanvasScene | null = null;
+  private animationId: number | null = null;
+  private lastTime = 0;
+  private dpr = 1;
+  private running = false;
+
+  constructor(container: HTMLElement) {
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.width = "100%";
+    this.canvas.style.height = "100%";
+    this.canvas.style.display = "block";
+    container.appendChild(this.canvas);
+
+    this.ctx = this.canvas.getContext("2d")!;
+    this.dpr = window.devicePixelRatio || 1;
+
+    this.handleResize();
+    window.addEventListener("resize", () => this.handleResize());
+    this.canvas.addEventListener("mousemove", (e) => this.handleMouseMove(e));
+    this.canvas.addEventListener("click", (e) => this.handleClick(e));
+    this.canvas.addEventListener("wheel", (e) => this.handleWheel(e), {
+      passive: true,
+    });
+  }
+
+  setScene(scene: CanvasScene): void {
+    this.scene = scene;
+    scene.onResize(this.canvas.width / this.dpr, this.canvas.height / this.dpr);
+  }
+
+  start(): void {
+    if (this.running) return;
+    this.running = true;
+    this.lastTime = performance.now();
+    this.loop(this.lastTime);
+  }
+
+  stop(): void {
+    this.running = false;
+    if (this.animationId != null) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = null;
+    }
+  }
+
+  destroy(): void {
+    this.stop();
+    this.canvas.remove();
+  }
+
+  getCanvas(): HTMLCanvasElement {
+    return this.canvas;
+  }
+
+  private loop(time: number): void {
+    if (!this.running) return;
+    const dt = (time - this.lastTime) / 1000;
+    this.lastTime = time;
+
+    if (this.scene) {
+      this.scene.update(dt);
+      this.ctx.save();
+      this.ctx.scale(this.dpr, this.dpr);
+      this.ctx.clearRect(
+        0,
+        0,
+        this.canvas.width / this.dpr,
+        this.canvas.height / this.dpr,
+      );
+      this.scene.draw(
+        this.ctx,
+        this.canvas.width / this.dpr,
+        this.canvas.height / this.dpr,
+      );
+      this.ctx.restore();
+    }
+
+    this.animationId = requestAnimationFrame((t) => this.loop(t));
+  }
+
+  private handleResize(): void {
+    const rect = this.canvas.parentElement?.getBoundingClientRect();
+    if (!rect) return;
+    this.canvas.width = rect.width * this.dpr;
+    this.canvas.height = rect.height * this.dpr;
+    this.canvas.style.width = rect.width + "px";
+    this.canvas.style.height = rect.height + "px";
+    if (this.scene) this.scene.onResize(rect.width, rect.height);
+  }
+
+  private handleMouseMove(e: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect();
+    if (this.scene)
+      this.scene.onMouseMove(e.clientX - rect.left, e.clientY - rect.top);
+  }
+
+  private handleClick(e: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect();
+    if (this.scene)
+      this.scene.onMouseClick(e.clientX - rect.left, e.clientY - rect.top);
+  }
+
+  private handleWheel(e: WheelEvent): void {
+    if (this.scene) this.scene.onMouseWheel(e.deltaY);
+  }
+}
+
+// Canvas drawing helpers
+export function drawText(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  options: {
+    font?: keyof typeof typeScale;
+    color?: string;
+    align?: CanvasTextAlign;
+    baseline?: CanvasTextBaseline;
+    maxWidth?: number;
+  } = {},
+): void {
+  const style = typeScale[options.font || "body"];
+  ctx.font = `${style.weight} ${style.size}px ${style.family}`;
+  ctx.fillStyle = options.color || colors.text.primary;
+  ctx.textAlign = options.align || "left";
+  ctx.textBaseline = options.baseline || "top";
+  if (options.maxWidth) {
+    ctx.fillText(text, x, y, options.maxWidth);
+  } else {
+    ctx.fillText(text, x, y);
+  }
+}
+
+export function drawRoundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  radius: number,
+): void {
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + w - radius, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+  ctx.lineTo(x + w, y + h - radius);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+  ctx.lineTo(x + radius, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+}
+
+export function drawCircle(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  r: number,
+  fill?: string,
+  stroke?: string,
+  lineWidth?: number,
+): void {
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, Math.PI * 2);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = lineWidth || 1;
+    ctx.stroke();
+  }
+}

package/dashboard/src/components/charts/bar.ts

@@ -0,0 +1,54 @@
+// SVG Bar Chart
+
+import { escapeHtml } from "../../core/helpers";
+import type { DailyCount } from "../../types/api";
+
+export function renderSVGBarChart(dailyCounts: DailyCount[]): string {
+  if (!dailyCounts || dailyCounts.length === 0) return "";
+
+  const chartW = 700;
+  const chartH = 100;
+  const barGap = 4;
+  const barW = Math.max(
+    8,
+    (chartW - (dailyCounts.length - 1) * barGap) / dailyCounts.length,
+  );
+
+  let maxCount = 0;
+  for (const day of dailyCounts) {
+    const total = (day.completed || 0) + (day.failed || 0);
+    if (total > maxCount) maxCount = total;
+  }
+  if (maxCount === 0) maxCount = 1;
+
+  let svg = `<svg class="svg-bar-chart" viewBox="0 0 ${chartW} ${chartH + 20}" width="100%" height="${chartH + 20}">`;
+
+  for (let i = 0; i < dailyCounts.length; i++) {
+    const day = dailyCounts[i];
+    const completed = day.completed || 0;
+    const failed = day.failed || 0;
+    const x = i * (barW + barGap);
+    const cH = (completed / maxCount) * chartH;
+    const fH = (failed / maxCount) * chartH;
+
+    if (cH > 0) {
+      svg += `<rect x="${x}" y="${chartH - cH - fH}" width="${barW}" height="${cH}" rx="3" fill="#4ade80" opacity="0.85"/>`;
+    }
+    if (fH > 0) {
+      svg += `<rect x="${x}" y="${chartH - fH}" width="${barW}" height="${fH}" rx="3" fill="#f43f5e" opacity="0.85"/>`;
+    }
+    if (cH === 0 && fH === 0) {
+      svg += `<rect x="${x}" y="${chartH - 1}" width="${barW}" height="1" fill="#0d1f3c"/>`;
+    }
+
+    const dateStr = day.date || "";
+    const parts = dateStr.split("-");
+    const label = parts.length >= 3 ? parts[1] + "/" + parts[2] : dateStr;
+    svg +=
+      `<text x="${x + barW / 2}" y="${chartH + 14}" text-anchor="middle" fill="#5a6d8a" ` +
+      `font-family="'JetBrains Mono', monospace" font-size="8">${escapeHtml(label)}</text>`;
+  }
+
+  svg += "</svg>";
+  return svg;
+}

package/dashboard/src/components/charts/donut.ts

@@ -0,0 +1,25 @@
+// SVG Donut Chart
+
+export function renderSVGDonut(rate: number): string {
+  const size = 120;
+  const strokeW = 12;
+  const r = (size - strokeW) / 2;
+  const c = Math.PI * 2 * r;
+  const pct = Math.max(0, Math.min(100, rate));
+  const offset = c - (pct / 100) * c;
+
+  let svg = `<svg class="svg-donut" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">`;
+  svg +=
+    '<defs><linearGradient id="donut-grad" x1="0%" y1="0%" x2="100%" y2="100%">' +
+    '<stop offset="0%" stop-color="#00d4ff"/><stop offset="100%" stop-color="#7c3aed"/></linearGradient></defs>';
+  svg += `<circle cx="${size / 2}" cy="${size / 2}" r="${r}" fill="none" stroke="#0d1f3c" stroke-width="${strokeW}"/>`;
+  svg +=
+    `<circle cx="${size / 2}" cy="${size / 2}" r="${r}" fill="none" stroke="url(#donut-grad)" stroke-width="${strokeW}" ` +
+    `stroke-linecap="round" stroke-dasharray="${c}" stroke-dashoffset="${offset}" ` +
+    `transform="rotate(-90 ${size / 2} ${size / 2})" style="transition: stroke-dashoffset 0.8s ease"/>`;
+  svg +=
+    `<text x="${size / 2}" y="${size / 2 + 8}" text-anchor="middle" fill="#e8ecf4" ` +
+    `font-family="'Instrument Serif', serif" font-size="24">${pct.toFixed(1)}%</text>`;
+  svg += "</svg>";
+  return svg;
+}