Helm — Agentic Development Dashboard

A prototype dashboard for engineering managers to understand and track the return on investment and business outcomes of agentic (AI-assisted) development across multiple projects.

The core idea, drawn from 2025–2026 industry research (DORA, DX, Faros, Opsera): DORA metrics alone are misleading once AI writes 30–70% of code. Throughput inflates while the real bottleneck shifts to code review and quality. So Helm pairs four layers of signal:

1. DORA baseline — delivery performance
2. AI attribution — how much, which tools, who's actually using them
3. Quality & durability — does AI code survive and avoid defects
4. Review bottleneck + cost/ROI — where gains stall and what it costs

Features

• Project selector + date range (30/60/90 day) in the top bar, applied globally. Selecting fewer projects refocuses every page; click a row on the Overview to drill into one project.
• Overview — executive KPIs, an "Agentic Health" verdict (throughput gains only count if quality and ROI hold), throughput-vs-adoption and quality trends, and a sortable project comparison.
• DORA Metrics — the five DORA metrics (incl. 2025 deployment rework rate) with performance tiers and trends.
• AI Impact — AI code share, acceptance rate (flagged as a vanity metric), tool mix, adoption cohorts (power / emerging / idle seats), and AI-vs-human cycle time.
• Quality & Durability — code survival curve, rework/turnover, AI-vs-human defect escape, and security findings.
• Review & Collaboration — AI-vs-human review wait (research shows AI PRs wait ~4.6× longer), iterations, PR size distribution, reviewer load, and a recent-PR table.
• CI/CD — build success, pipeline duration, flaky tests, deployments, and a failed-run table.
• Feature Acceptance — proposed → merged → accepted → retained funnel, retention, and value per feature.
• Cost & ROI — spend vs modelled value created, cost per merged PR, hours saved, net ROI, and idle-license waste.
• Skills — the skill-management section: searchable/filterable table of installs, active users, invocations, success rate, time saved, versions (with update indicators) and per-skill trend sparklines, plus a detail drawer with usage, version history, and per-project adoption.
• Settings — projects and (mock) data-source connections.

Tech stack

• Next.js 16 (App Router) + React 19 + TypeScript
• Tailwind CSS v4 (custom dark design system in src/app/globals.css)
• Recharts for charts
• lucide-react icons

Data

All data is deterministic mock data generated in src/lib/mock/ (seeded PRNG, so charts are stable across reloads). The aggregation/selector layer in src/lib/data.ts filters by selected projects and date range. To wire up real integrations later, replace the selectors in src/lib/data.ts — the page components and types stay the same.

Getting started

npm install
npm run dev

Open http://localhost:3000.

npm run build   # production build
npm run start   # serve the production build

Project structure

src/
  app/                 # routes (overview, dora, ai-impact, quality, review, cicd, features, roi, skills, settings)
  components/
    layout/            # sidebar, topbar (project + range selectors)
    charts/            # Recharts wrappers + theme
    ui/                # MetricCard, DataTable, Badge, TrendBadge, Card, SectionHeader
    skills/            # skill detail drawer
    health-banner.tsx  # agentic health verdict
  lib/
    mock/              # seeded data models (projects, metrics, skills, tables)
    data.ts            # filtering + aggregation (swap point for real APIs)
    store.tsx          # global selection context (projects + range)
    types.ts, format.ts, nav.ts, utils.ts

Prototype note: data is illustrative and meant to demonstrate the metric model and UX, not real telemetry.