feat(insights): port unique files from closed bundle-PRs (#41)

Re-introduce the 3 unique files from closed PRs #37 and #40 that
overlap-merged with already-landed sub-PRs (#34, #35, #36, #38, #39):

- app/(app)/insights/page.tsx — Server Component dat alle helpers
  parallel aanroept en de 5 sectie-Cards rendert (Sprint Health,
  Plan-quality, Agent throughput, Velocity, Backlog health)
- app/(app)/insights/components/sprint-info-strip.tsx — chips per
  active sprint met productname + goal + dagen-over + taakcount
- app/(app)/insights/components/alignment-trend.tsx — Recharts
  LineChart die % ALIGNED jobs per sprint over laatste 5 sprints toont
- lib/insights/verify-stats.ts — TrendPoint type + getAlignmentTrend
  helper (uitgebreid van PR #38)

Plus dependency: recharts (was in package.json van #37/#40 die we
sloten).

Tests: 290/290 groen, tsc clean, lint clean.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/(app)/insights/components/alignment-trend.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import type { TrendPoint } from '@/lib/insights/verify-stats'
+
+interface Props {
+  trend: TrendPoint[]
+}
+
+interface TooltipPayload {
+  payload?: { total: number; alignedRatio: number; sprintGoal: string }
+}
+
+function CustomTooltip({ active, payload }: { active?: boolean; payload?: TooltipPayload[] }) {
+  if (!active || !payload?.length) return null
+  const d = payload[0].payload
+  if (!d) return null
+  const aligned = Math.round((d.alignedRatio / 100) * d.total)
+  return (
+    <div className="rounded border border-border bg-surface-container px-3 py-2 text-sm shadow">
+      <p className="font-medium text-foreground">{d.sprintGoal}</p>
+      <p className="text-muted-foreground">
+        {aligned} / {d.total} aligned ({d.alignedRatio}%)
+      </p>
+    </div>
+  )
+}
+
+function sprintLabel(goal: string): string {
+  return goal.length > 20 ? goal.slice(0, 18) + '…' : goal
+}
+
+export function AlignmentTrend({ trend }: Props) {
+  if (trend.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        Geen voltooide sprints met verify-data gevonden.
+      </p>
+    )
+  }
+
+  const data = trend.map(p => ({
+    ...p,
+    label: sprintLabel(p.sprintGoal),
+  }))
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+        % Aligned per sprint (laatste {trend.length})
+      </p>
+      <ResponsiveContainer width="100%" height={180}>
+        <LineChart data={data}>
+          <XAxis dataKey="label" tick={{ fontSize: 11 }} />
+          <YAxis domain={[0, 100]} tickFormatter={v => `${v}%`} tick={{ fontSize: 11 }} />
+          <Tooltip content={<CustomTooltip />} />
+          <Line
+            dataKey="alignedRatio"
+            stroke="var(--status-done)"
+            dot={{ fill: 'var(--status-done)' }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

app/(app)/insights/components/sprint-info-strip.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+interface SprintInfo {
+  sprintId: string
+  productName: string
+  sprintGoal: string
+  taskCount: number
+  daysLeft: number
+}
+
+interface Props {
+  sprints: SprintInfo[]
+}
+
+function daysLeftColor(daysLeft: number): string {
+  if (daysLeft >= 3) return 'text-[color:var(--status-done)]'
+  if (daysLeft >= 1) return 'text-[color:var(--priority-medium)]'
+  return 'text-[color:var(--priority-critical)]'
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? text.slice(0, max) + '…' : text
+}
+
+export function SprintInfoStrip({ sprints }: Props) {
+  if (sprints.length === 0) return null
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {sprints.map(s => (
+        <div
+          key={s.sprintId}
+          className="flex items-center gap-3 rounded-lg border border-border bg-surface-container px-3 py-2 text-sm"
+        >
+          <span className="font-medium text-foreground">{s.productName}</span>
+          <span className="text-muted-foreground">{truncate(s.sprintGoal, 60)}</span>
+          <span className={`font-mono tabular-nums ${daysLeftColor(s.daysLeft)}`}>
+            {s.daysLeft > 0 ? `${s.daysLeft}d over` : `${Math.abs(s.daysLeft)}d over tijd`}
+          </span>
+          <span className="text-muted-foreground">{s.taskCount} tasks</span>
+        </div>
+      ))}
+    </div>
+  )
+}

app/(app)/insights/page.tsx

@@ -0,0 +1,97 @@
+import { cookies } from 'next/headers'
+import { getIronSession } from 'iron-session'
+import { SessionData, sessionOptions } from '@/lib/session'
+import { prisma } from '@/lib/prisma'
+import { productAccessFilter } from '@/lib/product-access'
+import { getBurndownData } from '@/lib/insights/burndown'
+import { getSprintStatusBreakdown } from '@/lib/insights/sprint-status'
+import { SprintInfoStrip } from './components/sprint-info-strip'
+import { BurndownChart } from './components/burndown-chart'
+import { SprintStatusDonut } from './components/sprint-status-donut'
+
+const DAY_MS = 86_400_000
+const ASSUMED_SPRINT_DAYS = 14
+
+function MissingDatesNotice({ productId, productName }: { productId: string; productName: string }) {
+  return (
+    <p className="text-muted-foreground text-sm">
+      {productName} — sprint heeft geen datums.{' '}
+      <a
+        href={`/products/${productId}/sprint`}
+        className="underline text-primary"
+      >
+        Stel datums in
+      </a>
+    </p>
+  )
+}
+
+export default async function InsightsPage() {
+  const session = await getIronSession<SessionData>(await cookies(), sessionOptions)
+  const userId = session.userId!
+
+  const [burndownSprints, statusBreakdown, activeSprints] = await Promise.all([
+    getBurndownData(userId),
+    getSprintStatusBreakdown(userId),
+    prisma.sprint.findMany({
+      where: { status: 'ACTIVE', product: productAccessFilter(userId) },
+      select: {
+        id: true,
+        sprint_goal: true,
+        created_at: true,
+        product: { select: { id: true, name: true } },
+        tasks: { select: { id: true } },
+      },
+    }),
+  ])
+
+  if (activeSprints.length === 0) {
+    return (
+      <div className="p-6 max-w-4xl mx-auto w-full">
+        <h1 className="text-xl font-medium text-foreground mb-6">Sprint Health</h1>
+        <p className="text-muted-foreground">
+          Geen active sprints — start er een via /products/[id]/sprint
+        </p>
+      </div>
+    )
+  }
+
+  const nowMs = new Date().getTime()
+  const sprintInfos = activeSprints.map(s => ({
+    sprintId: s.id,
+    productId: s.product.id,
+    productName: s.product.name,
+    sprintGoal: s.sprint_goal,
+    taskCount: s.tasks.length,
+    daysLeft: ASSUMED_SPRINT_DAYS - Math.floor((nowMs - s.created_at.getTime()) / DAY_MS),
+  }))
+
+  const burndownMap = new Map(burndownSprints.map(b => [b.sprintId, b]))
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl mx-auto w-full">
+      <h1 className="text-xl font-medium text-foreground">Sprint Health</h1>
+
+      <SprintInfoStrip sprints={sprintInfos} />
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-4">
+          {sprintInfos.map(s => {
+            const burndown = burndownMap.get(s.sprintId)
+            if (!burndown || burndown.days.length === 0) {
+              return (
+                <MissingDatesNotice
+                  key={s.sprintId}
+                  productId={s.productId}
+                  productName={s.productName}
+                />
+              )
+            }
+            return <BurndownChart key={s.sprintId} sprint={burndown} />
+          })}
+        </div>
+        <SprintStatusDonut data={statusBreakdown} />
+      </div>
+    </div>
+  )
+}

lib/insights/verify-stats.ts

@@ -1,4 +1,5 @@
 import { prisma } from '@/lib/prisma'
+import { productAccessFilter } from '@/lib/product-access'
 
 export type VerifyResultKey = 'ALIGNED' | 'PARTIAL' | 'EMPTY' | 'DIVERGENT'
 
@@ -17,6 +18,14 @@ export interface VerifyResultStats {
   topDivergent: TopJob[]
 }
 
+export interface TrendPoint {
+  sprintId: string
+  sprintGoal: string
+  productName: string
+  alignedRatio: number
+  total: number
+}
+
 const RESULT_ORDER: VerifyResultKey[] = ['ALIGNED', 'PARTIAL', 'EMPTY', 'DIVERGENT']
 
 export async function getVerifyResultStats(
@@ -90,3 +99,48 @@ export async function getVerifyResultStats(
     topDivergent: rawDivergent.map(toTopJob),
   }
 }
+
+export async function getAlignmentTrend(
+  userId: string,
+  sprintsBack = 5,
+): Promise<TrendPoint[]> {
+  const sprints = await prisma.sprint.findMany({
+    where: {
+      status: 'COMPLETED',
+      product: productAccessFilter(userId),
+    },
+    orderBy: { completed_at: 'desc' },
+    take: sprintsBack,
+    select: {
+      id: true,
+      sprint_goal: true,
+      completed_at: true,
+      product: { select: { name: true } },
+    },
+  })
+
+  const points = await Promise.all(
+    sprints.map(async sprint => {
+      const jobs = await prisma.claudeJob.findMany({
+        where: {
+          user_id: userId,
+          status: 'DONE',
+          verify_result: { not: null },
+          task: { story: { sprint_id: sprint.id } },
+        },
+        select: { verify_result: true },
+      })
+      const aligned = jobs.filter(j => j.verify_result === 'ALIGNED').length
+      return {
+        sprintId: sprint.id,
+        sprintGoal: sprint.sprint_goal,
+        productName: sprint.product.name,
+        alignedRatio: jobs.length > 0 ? Math.round((aligned / jobs.length) * 100) : 0,
+        total: jobs.length,
+      }
+    }),
+  )
+
+  // chronologisch oplopend (we fetched desc, so reverse)
+  return points.reverse()
+}