Skip to content

Pipeline Plan 30

Jump to bottom
Seth Ford edited this page Feb 11, 2026 · 1 revision

The plan file is in the .claude/ directory which requires permission. Let me present the plan directly instead.

DORA Metrics Dashboard — Implementation Plan

Architecture Overview

The dashboard is a Bun/TypeScript server (dashboard/server.ts) serving a vanilla JS frontend (dashboard/public/). All data lives in ~/.shipwright/events.jsonl and ~/.shipwright/optimization/outcomes.jsonl. The frontend uses hand-built SVG charts (no external charting library). We continue this pattern — no new npm dependencies.

The implementation adds 6 new API endpoints, redesigns the Metrics tab with sub-views, adds a CLI report command, and includes comprehensive tests.

Files to Modify

# File Action
1 dashboard/server.ts Add 6 new REST endpoints for extended metrics
2 dashboard/public/index.html Replace #panel-metrics with hero DORA dashboard layout
3 dashboard/public/app.js Add rendering functions for all new metric views
4 dashboard/public/styles.css Add styles for DORA cards, benchmarks, deep-dive views
5 scripts/sw-daemon.sh Add daemon report subcommand
6 scripts/sw-daemon-test.sh Add tests for daemon report command
7 scripts/sw-dora-dashboard-test.sh New — test suite for metric calculations
8 .claude/CLAUDE.md Update commands table, test suite count

Implementation Steps

Step 1–6: Server — New API Endpoints

Endpoint Response Summary
GET /api/metrics/dora-extended?period=7 4 DORA metrics with sparklines (last 4 weeks), industry benchmark bands, period-over-period delta %
GET /api/metrics/dx?period=7 Iteration efficiency (avg/p50/p95), first-pass rate, stage latency percentiles, cost/issue, quality distribution
GET /api/metrics/ai?period=7 Model routing split, cache hit rate, prediction accuracy, optimization delta, memory utilization
GET /api/metrics/lead-time-breakdown?period=7 Per-stage avg/p50/p95 with % of total, bottleneck identification
GET /api/metrics/failure-analysis?period=7 Failures by stage, by reason, by day, improving/regressing trend
GET /api/metrics/report?period=7 Auto-generated markdown engineering report

Step 7–9: Frontend — Redesigned Metrics Tab

Sub-tabs: Overview | Deep Dive | Cost | Report

Overview: 4 DORA hero cards (grade badge, value, sparkline, benchmark bar, delta arrow) + DX metrics row (4 cards) + AI performance row (4 cards)

Deep Dive: Lead time breakdown by stage, failure analysis charts, stage performance table with sortable p50/p95/p99

Cost: Existing cost breakdown enhanced with DORA context

Report: Rendered markdown report with period selector, copy-to-clipboard, print-to-PDF

Step 10: CLI — daemon report

Add daemon report [--period N] [--json] [--output FILE] to sw-daemon.sh generating the same markdown report from bash.

Step 11–12: Tests

New sw-dora-dashboard-test.sh with synthetic events testing all metric calculations, edge cases (empty data, all failures, all successes), and report structure. Extend sw-daemon-test.sh for the report subcommand.

Step 13: Documentation

Update .claude/CLAUDE.md with new command and test suite #23.

Task Checklist

  • Task 1: Add /api/metrics/dora-extended endpoint with sparklines, benchmarks, deltas
  • Task 2: Add /api/metrics/dx endpoint (iteration efficiency, first-pass rate, stage percentiles, cost/issue)
  • Task 3: Add /api/metrics/ai endpoint (model routing, cache hits, prediction accuracy)
  • Task 4: Add /api/metrics/lead-time-breakdown endpoint (per-stage timing with percentiles)
  • Task 5: Add /api/metrics/failure-analysis endpoint (by stage, by reason, trends)
  • Task 6: Add /api/metrics/report endpoint (auto-generated weekly markdown report)
  • Task 7: Redesign #panel-metrics HTML with sub-tabs and hero card layout
  • Task 8: Implement frontend DORA hero cards with sparklines and benchmark bars
  • Task 9: Implement frontend DX and AI metric card rendering
  • Task 10: Implement Deep Dive view (lead time breakdown, failure analysis, stage table)
  • Task 11: Implement Report view (rendered markdown, period selector, copy/export)
  • Task 12: Add CSS for all new dashboard components (responsive, theme-consistent)
  • Task 13: Add daemon report CLI subcommand with markdown generation
  • Task 14: Create sw-dora-dashboard-test.sh test suite
  • Task 15: Run all tests (npm test) and fix any failures

Testing Approach

  • Synthetic events: 50+ events across 30 days with known success/failure patterns, stage timings, cost records
  • Metric validation: Computed metrics match expected grades, percentiles, deltas
  • Edge cases: Empty events, single event, 100% failure, 100% success
  • Report structure: Markdown contains required sections
  • Existing tests: All 22 suites continue passing

Definition of Done

  • 4 core DORA metrics with trend sparklines and industry benchmark comparison
  • Extended DX metrics (iteration efficiency, first-pass rate, cost/issue, quality)
  • AI performance metrics (model routing, prediction accuracy, optimization delta)
  • Deep dive drill-down views (lead time breakdown, failure analysis, stage table)
  • Auto-generated weekly report (API + CLI)
  • Export support (copy markdown, print to PDF)
  • New test suite passes, all existing 22 suites pass
  • No new npm dependencies, responsive layout, docs updated

Clone this wiki locally