shipwright-cli 3.1.0 → 3.3.0

package/dashboard/src/canvas/submarine-layout.ts

@@ -0,0 +1,267 @@
+// Submarine Layout System — Compartment positioning, hull geometry, and navigation paths
+
+import type { StageName } from "../design/tokens";
+import { COMPARTMENTS, STAGE_TO_COMPARTMENT } from "../design/submarine-theme";
+import { layout, timing } from "../design/submarine-theme";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface CompartmentRect {
+  stage: StageName;
+  label: string;
+  icon: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+  stationX: number; // where agent stands to work
+  stationY: number;
+}
+
+export interface HullGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+}
+
+export interface PipeSegment {
+  from: Point;
+  to: Point;
+}
+
+// ── SubmarineLayout class ────────────────────────────────────────────────────
+
+export class SubmarineLayout {
+  compartments: CompartmentRect[] = [];
+  hull: HullGeometry = { x: 0, y: 0, width: 0, height: 0, radius: 0 };
+  pipes: PipeSegment[] = [];
+  portholes: Point[] = [];
+  width = 0;
+  height = 0;
+
+  recalculate(width: number, height: number): void {
+    this.width = width;
+    this.height = height;
+
+    // Compute available space
+    const depthGaugeWidth = layout.depthGaugeWidth;
+    const gap = 12; // gap between depth gauge and hull
+    const manifestHeight = layout.manifestHeight;
+    const hullPadding = layout.hullPadding;
+    const compartmentGap = layout.compartmentGap;
+
+    const availableWidth = width - depthGaugeWidth - gap;
+    const availableHeight = height - manifestHeight;
+
+    // Hull takes up ~85% of height, centered vertically
+    const hullHeightRatio = 0.85;
+    const hullHeight = Math.floor(availableHeight * hullHeightRatio);
+    const hullWidth = availableWidth - gap;
+
+    // Center hull vertically
+    const topMargin = Math.floor((availableHeight - hullHeight) / 2);
+    const hullX = depthGaugeWidth + gap;
+    const hullY = topMargin;
+
+    this.hull = {
+      x: hullX,
+      y: hullY,
+      width: hullWidth,
+      height: hullHeight,
+      radius: layout.hullRadius,
+    };
+
+    // Compute compartment layout: 3 rows
+    this.computeCompartments();
+    this.computePipes();
+    this.computePortholes();
+  }
+
+  private computeCompartments(): void {
+    this.compartments = [];
+
+    const innerX = this.hull.x + layout.hullPadding;
+    const innerY = this.hull.y + layout.hullPadding;
+    const innerWidth = this.hull.width - layout.hullPadding * 2;
+    const innerHeight = this.hull.height - layout.hullPadding * 2;
+
+    // Row sizes: 4, 4, 3 compartments
+    const rowSizes = [4, 4, 3];
+    const numRows = rowSizes.length;
+    const rowHeight =
+      (innerHeight - (numRows - 1) * layout.compartmentGap) / numRows;
+
+    for (let rowIdx = 0; rowIdx < numRows; rowIdx++) {
+      const colCount = rowSizes[rowIdx];
+      const colWidth =
+        (innerWidth - (colCount - 1) * layout.compartmentGap) / colCount;
+
+      const rowY = innerY + rowIdx * (rowHeight + layout.compartmentGap);
+
+      for (let colIdx = 0; colIdx < colCount; colIdx++) {
+        const compartment = COMPARTMENTS.find(
+          (c) => c.row === rowIdx && c.col === colIdx,
+        );
+
+        if (!compartment) continue;
+
+        const x = innerX + colIdx * (colWidth + layout.compartmentGap);
+
+        const rect: CompartmentRect = {
+          stage: compartment.stage,
+          label: compartment.label,
+          icon: compartment.icon,
+          x,
+          y: rowY,
+          width: colWidth,
+          height: rowHeight,
+          centerX: x + colWidth / 2,
+          centerY: rowY + rowHeight / 2,
+          stationX: x + colWidth / 2,
+          stationY: rowY + rowHeight / 2,
+        };
+
+        this.compartments.push(rect);
+      }
+    }
+  }
+
+  private computePipes(): void {
+    this.pipes = [];
+
+    // Connect adjacent compartments in the same row horizontally
+    const compartmentsByRow: { [key: number]: CompartmentRect[] } = {};
+    for (const comp of this.compartments) {
+      const compartment = COMPARTMENTS.find((c) => c.stage === comp.stage);
+      if (compartment) {
+        if (!compartmentsByRow[compartment.row]) {
+          compartmentsByRow[compartment.row] = [];
+        }
+        compartmentsByRow[compartment.row].push(comp);
+      }
+    }
+
+    // Connect horizontally within rows
+    for (const row of Object.values(compartmentsByRow)) {
+      row.sort((a, b) => a.x - b.x);
+      for (let i = 0; i < row.length - 1; i++) {
+        this.pipes.push({
+          from: { x: row[i].x + row[i].width, y: row[i].centerY },
+          to: { x: row[i + 1].x, y: row[i + 1].centerY },
+        });
+      }
+    }
+
+    // Connect rows vertically at the end of each row
+    for (let rowIdx = 0; rowIdx < 2; rowIdx++) {
+      const currentRow = compartmentsByRow[rowIdx];
+      const nextRow = compartmentsByRow[rowIdx + 1];
+      if (currentRow && nextRow) {
+        const lastInCurrent = currentRow[currentRow.length - 1];
+        const firstInNext = nextRow[0];
+        this.pipes.push({
+          from: {
+            x: lastInCurrent.centerX,
+            y: lastInCurrent.y + lastInCurrent.height,
+          },
+          to: { x: firstInNext.centerX, y: firstInNext.y },
+        });
+      }
+    }
+  }
+
+  private computePortholes(): void {
+    this.portholes = [];
+
+    const portholesPerEdge = 4;
+    const topY = this.hull.y + layout.portholeRadius;
+    const bottomY = this.hull.y + this.hull.height - layout.portholeRadius;
+
+    // Top portholes
+    for (let i = 0; i < portholesPerEdge; i++) {
+      const x =
+        this.hull.x +
+        layout.portholeRadius +
+        (i * (this.hull.width - 2 * layout.portholeRadius)) /
+          (portholesPerEdge - 1);
+      this.portholes.push({ x, y: topY });
+    }
+
+    // Bottom portholes
+    for (let i = 0; i < portholesPerEdge; i++) {
+      const x =
+        this.hull.x +
+        layout.portholeRadius +
+        (i * (this.hull.width - 2 * layout.portholeRadius)) /
+          (portholesPerEdge - 1);
+      this.portholes.push({ x, y: bottomY });
+    }
+  }
+
+  getCompartment(stage: StageName): CompartmentRect | undefined {
+    return this.compartments.find((c) => c.stage === stage);
+  }
+
+  getPathBetween(from: StageName, to: StageName): Point[] {
+    const fromComp = this.getCompartment(from);
+    const toComp = this.getCompartment(to);
+
+    if (!fromComp || !toComp) return [];
+    if (from === to) return [{ x: fromComp.stationX, y: fromComp.stationY }];
+
+    const fromCompartmentDef = STAGE_TO_COMPARTMENT[from];
+    const toCompartmentDef = STAGE_TO_COMPARTMENT[to];
+
+    const fromRow = fromCompartmentDef.row;
+    const toRow = toCompartmentDef.row;
+
+    const waypoints: Point[] = [{ x: fromComp.stationX, y: fromComp.stationY }];
+
+    if (fromRow === toRow) {
+      // Same row: straight horizontal path
+      waypoints.push({ x: toComp.stationX, y: toComp.stationY });
+    } else {
+      // Different rows: exit compartment, move to row connector, vertical, then horizontal to target
+
+      // Move to right edge of current compartment
+      waypoints.push({
+        x: fromComp.x + fromComp.width + layout.compartmentGap / 2,
+        y: fromComp.centerY,
+      });
+
+      // Move vertically to target row
+      waypoints.push({
+        x: fromComp.x + fromComp.width + layout.compartmentGap / 2,
+        y: toComp.centerY,
+      });
+
+      // Move horizontally to target
+      waypoints.push({ x: toComp.stationX, y: toComp.stationY });
+    }
+
+    return waypoints;
+  }
+
+  hitTestCompartment(x: number, y: number): CompartmentRect | undefined {
+    for (const comp of this.compartments) {
+      if (
+        x >= comp.x &&
+        x <= comp.x + comp.width &&
+        y >= comp.y &&
+        y <= comp.y + comp.height
+      ) {
+        return comp;
+      }
+    }
+    return undefined;
+  }
+}

package/dashboard/src/components/header.ts

@@ -35,10 +35,10 @@ function setupSoundToggle(): void {
     btn.innerHTML = soundEnabled ? "\u{1F50A} Sound" : "\u{1F507} Mute";
   });
 
-  // Insert before user avatar if possible
-  const userAvatar = document.getElementById("user-avatar");
-  if (userAvatar) {
-    headerActions.insertBefore(btn, userAvatar);
+  // Insert before user menu if possible
+  const userMenu = document.getElementById("user-menu");
+  if (userMenu && userMenu.parentNode === headerActions) {
+    headerActions.insertBefore(btn, userMenu);
   } else {
     headerActions.appendChild(btn);
   }
@@ -71,11 +71,12 @@ function setupThemeToggle(): void {
   });
 
   const soundBtn = document.getElementById("sound-toggle");
-  if (soundBtn) {
+  if (soundBtn && soundBtn.parentNode === headerActions) {
     headerActions.insertBefore(btn, soundBtn);
   } else {
-    const userAvatar = document.getElementById("user-avatar");
-    if (userAvatar) headerActions.insertBefore(btn, userAvatar);
+    const userMenu = document.getElementById("user-menu");
+    if (userMenu && userMenu.parentNode === headerActions)
+      headerActions.insertBefore(btn, userMenu);
     else headerActions.appendChild(btn);
   }
 }

package/dashboard/src/core/api.ts

@@ -7,6 +7,7 @@ import type {
   MachineInfo,
   JoinToken,
   CostBreakdown,
+  ContextEfficiency,
   DaemonConfig,
   AlertInfo,
   InsightsData,
@@ -113,6 +114,10 @@ export const fetchCostTrend = (period = 30) =>
     `/api/costs/trend?period=${period}`,
   );
 
+// Context efficiency
+export const fetchContextEfficiency = (period = 7) =>
+  request<ContextEfficiency>(`/api/context-efficiency?period=${period}`);
+
 // Daemon
 export const fetchDaemonConfig = () =>
   request<DaemonConfig>("/api/daemon/config");

package/dashboard/src/core/router.ts

@@ -19,6 +19,7 @@ const VALID_TABS: TabId[] = [
   "fleet-map",
   "pipeline-theater",
   "agent-cockpit",
+  "shipyard",
 ];
 
 let teamRefreshTimer: ReturnType<typeof setInterval> | null = null;

package/dashboard/src/design/submarine-theme.ts

@@ -0,0 +1,253 @@
+// Submarine Theme — Nautical design constants for the Shipyard tab
+// Maps pipeline stages to submarine compartments, crew roles, and visual styling.
+
+import type { StageName } from "./tokens";
+
+// ── Compartment definitions ──────────────────────────────────────────────────
+
+export interface Compartment {
+  stage: StageName;
+  label: string;
+  icon: string;
+  row: number; // 0=top, 1=mid, 2=bottom
+  col: number; // position within row
+}
+
+export const COMPARTMENTS: Compartment[] = [
+  // Row 0 — upper deck
+  { stage: "intake", label: "Airlock", icon: "\u{1F6AA}", row: 0, col: 0 },
+  { stage: "plan", label: "Bridge", icon: "\u{1F9ED}", row: 0, col: 1 },
+  { stage: "design", label: "Nav Room", icon: "\u{1F4D0}", row: 0, col: 2 },
+  {
+    stage: "build",
+    label: "Engine Room",
+    icon: "\u2699\uFE0F",
+    row: 0,
+    col: 3,
+  },
+  // Row 1 — mid deck
+  { stage: "test", label: "Testing Bay", icon: "\u{1F52C}", row: 1, col: 0 },
+  { stage: "review", label: "War Room", icon: "\u{1F4CB}", row: 1, col: 1 },
+  {
+    stage: "compound_quality",
+    label: "Sonar Room",
+    icon: "\u{1F4E1}",
+    row: 1,
+    col: 2,
+  },
+  { stage: "pr", label: "Comms", icon: "\u{1F4FB}", row: 1, col: 3 },
+  // Row 2 — lower deck
+  { stage: "merge", label: "Reactor", icon: "\u269B\uFE0F", row: 2, col: 0 },
+  { stage: "deploy", label: "Ballast", icon: "\u{1F680}", row: 2, col: 1 },
+  { stage: "monitor", label: "Periscope", icon: "\u{1F52D}", row: 2, col: 2 },
+];
+
+export const STAGE_TO_COMPARTMENT: Record<StageName, Compartment> =
+  Object.fromEntries(COMPARTMENTS.map((c) => [c.stage, c])) as Record<
+    StageName,
+    Compartment
+  >;
+
+// ── Crew roles ───────────────────────────────────────────────────────────────
+
+export type CrewRole =
+  | "captain"
+  | "engineer"
+  | "navigator"
+  | "operator"
+  | "medic"
+  | "sonarTech";
+
+export interface CrewPalette {
+  role: CrewRole;
+  /** Primary uniform hue (0-360) */
+  hue: number;
+  /** Saturation % */
+  sat: number;
+  /** Lightness for body */
+  bodyL: number;
+  /** Lightness for highlight/trim */
+  trimL: number;
+  /** Accent color hex (hat, badge, accessory) */
+  accent: string;
+  /** Skin tone base (HSL lightness) */
+  skinL: number;
+}
+
+export const CREW_PALETTES: Record<CrewRole, CrewPalette> = {
+  captain: {
+    role: "captain",
+    hue: 220,
+    sat: 70,
+    bodyL: 25,
+    trimL: 55,
+    accent: "#ffd700",
+    skinL: 72,
+  },
+  engineer: {
+    role: "engineer",
+    hue: 25,
+    sat: 85,
+    bodyL: 45,
+    trimL: 60,
+    accent: "#ff8c00",
+    skinL: 72,
+  },
+  navigator: {
+    role: "navigator",
+    hue: 140,
+    sat: 55,
+    bodyL: 30,
+    trimL: 55,
+    accent: "#2ecc71",
+    skinL: 72,
+  },
+  operator: {
+    role: "operator",
+    hue: 50,
+    sat: 80,
+    bodyL: 50,
+    trimL: 65,
+    accent: "#f1c40f",
+    skinL: 72,
+  },
+  medic: {
+    role: "medic",
+    hue: 0,
+    sat: 0,
+    bodyL: 90,
+    trimL: 95,
+    accent: "#e74c3c",
+    skinL: 72,
+  },
+  sonarTech: {
+    role: "sonarTech",
+    hue: 185,
+    sat: 70,
+    bodyL: 35,
+    trimL: 55,
+    accent: "#00d4ff",
+    skinL: 72,
+  },
+};
+
+/** Map stages to default crew roles */
+export const STAGE_CREW_ROLE: Record<StageName, CrewRole> = {
+  intake: "sonarTech",
+  plan: "captain",
+  design: "navigator",
+  build: "engineer",
+  test: "engineer",
+  review: "medic",
+  compound_quality: "medic",
+  pr: "sonarTech",
+  merge: "operator",
+  deploy: "operator",
+  monitor: "navigator",
+};
+
+/** Pick a crew role for a pipeline based on its current stage */
+export function crewRoleForStage(stage: StageName): CrewRole {
+  return STAGE_CREW_ROLE[stage];
+}
+
+// ── Nautical color palette ───────────────────────────────────────────────────
+
+export const nautical = {
+  // Hull
+  hullOuter: "#1a2a3a",
+  hullInner: "#0f1d2d",
+  hullStroke: "#2a4a6a",
+  hullHighlight: "rgba(0, 212, 255, 0.08)",
+
+  // Ocean / background
+  oceanDeep: "#040810",
+  oceanMid: "#071018",
+  oceanLight: "#0a1828",
+
+  // Compartment
+  compartmentBg: "#0c1a2e",
+  compartmentBorder: "#1a3050",
+  compartmentActive: "rgba(0, 212, 255, 0.12)",
+
+  // Pipes
+  pipeColor: "#1a3050",
+  pipeFlow: "#00d4ff",
+  pipeFlowDim: "rgba(0, 212, 255, 0.3)",
+
+  // Porthole
+  portholeRing: "#2a4a6a",
+  portholeGlass: "rgba(0, 212, 255, 0.06)",
+  portholeGlow: "rgba(0, 212, 255, 0.15)",
+
+  // Effects
+  bubbleColor: "rgba(120, 200, 255, 0.4)",
+  sonarColor: "#00d4ff",
+  sparkleColor: "#ffffff",
+
+  // Depth gauge
+  depthGaugeBg: "#0a1628",
+  depthGaugeFill: "#00d4ff",
+  depthGaugeBorder: "#1a3050",
+
+  // Text
+  labelColor: "#8899b8",
+  labelActive: "#e8ecf4",
+} as const;
+
+// ── Layout constants ─────────────────────────────────────────────────────────
+
+export const layout = {
+  /** Rows in the submarine */
+  rows: 3,
+  /** Max columns per row */
+  maxCols: 4,
+  /** Padding inside hull */
+  hullPadding: 24,
+  /** Gap between compartments */
+  compartmentGap: 12,
+  /** Compartment corner radius */
+  compartmentRadius: 6,
+  /** Hull corner radius */
+  hullRadius: 32,
+  /** Depth gauge width */
+  depthGaugeWidth: 24,
+  /** Crew manifest bar height */
+  manifestHeight: 36,
+  /** Min compartment size */
+  minCompartmentW: 100,
+  minCompartmentH: 70,
+  /** Pipe width */
+  pipeWidth: 2,
+  /** Porthole radius */
+  portholeRadius: 8,
+} as const;
+
+// ── Animation timing ─────────────────────────────────────────────────────────
+
+export const timing = {
+  /** Agent walk speed in pixels/second */
+  walkSpeed: 48,
+  /** Idle bob amplitude in pixels */
+  idleBobAmplitude: 1,
+  /** Idle bob period in seconds */
+  idleBobPeriod: 2,
+  /** Idle wander interval range [min, max] seconds */
+  idleWanderRange: [2, 4] as [number, number],
+  /** Working frame interval in seconds */
+  workFrameInterval: 0.3,
+  /** Alert flash interval in seconds */
+  alertFlashInterval: 0.4,
+  /** Spawn cascade duration in seconds */
+  spawnDuration: 0.5,
+  /** Despawn dissolve duration in seconds */
+  despawnDuration: 0.5,
+  /** Sonar ping ring expand duration */
+  sonarPingDuration: 1.5,
+  /** Sonar ping ring count */
+  sonarPingRings: 3,
+  /** Pipe flow dash speed (px/s) */
+  pipeFlowSpeed: 30,
+  /** Bubble rise speed (px/s) */
+  bubbleRiseSpeed: 15,
+} as const;

package/dashboard/src/main.ts

@@ -29,6 +29,7 @@ import { teamView } from "./views/team";
 import { fleetMapView } from "./views/fleet-map";
 import { pipelineTheaterView } from "./views/pipeline-theater";
 import { agentCockpitView } from "./views/agent-cockpit";
+import { shipyardView } from "./views/shipyard";
 
 // Register all views
 registerView("overview", overviewView);
@@ -43,6 +44,7 @@ registerView("team", teamView);
 registerView("fleet-map", fleetMapView);
 registerView("pipeline-theater", pipelineTheaterView);
 registerView("agent-cockpit", agentCockpitView);
+registerView("shipyard", shipyardView);
 
 // Setup header (user menu, daemon control, emergency brake)
 setupHeader();

package/dashboard/src/types/api.ts

@@ -255,6 +255,16 @@ export interface HeatmapData {
   heatmap: Record<string, Record<string, number>>;
 }
 
+export interface ContextEfficiency {
+  avg_utilization: number;
+  avg_trim_ratio: number;
+  total_raw_chars: number;
+  total_trimmed_chars: number;
+  total_discarded_chars: number;
+  trim_events: number;
+  total_iterations: number;
+}
+
 export interface DaemonConfig {
   paused?: boolean;
   config?: Record<string, unknown>;
@@ -328,7 +338,8 @@ export type TabId =
   | "team"
   | "fleet-map"
   | "pipeline-theater"
-  | "agent-cockpit";
+  | "agent-cockpit"
+  | "shipyard";
 
 export interface View {
   init(): void;

package/dashboard/src/views/activity.ts

@@ -76,8 +76,9 @@ function loadMoreActivity(): void {
     .then((result) => {
       const existing = store.get("activityEvents");
       const newEvents = result.events || [];
+      const merged = [...existing, ...newEvents];
       store.update({
-        activityEvents: [...existing, ...newEvents],
+        activityEvents: merged.length > 500 ? merged.slice(-500) : merged,
         activityHasMore: result.hasMore || false,
         activityOffset: existing.length + newEvents.length,
       });