ST-1216: Insights sprint-widget — token KPI-kaartjes & per-job tabel (#114)

* feat(ST-vmc7vpps): lib/insights/token-stats.ts — sprint KPI + per-job query

SQL-queries voor totale tokens/kosten (KPI) en per-job tabel met
ModelPrice JOIN. Guard op lege sprintId. Tests voor empty guard,
KPI-mapping en null token-data.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-vmc7vpps): TokenUsageCard — KPI-kaartjes + sorteerbare per-job tabel

Client-component met drie KPI-strips (totaal tokens, kosten USD, gem. per job)
en sorteerbare tabel op kosten of duur. Nulls als '—', MD3-tokens, geen
hardcoded kleuren.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ST-vmc7vpps): insights page — TokenUsageCard integreren

Voeg getTokenStats + TokenUsageCard imports toe aan insights/page.tsx.
tokenStats apart awaiten na activeSprints (kan niet in dezelfde Promise.all).
TokenUsageCard-sectie toegevoegd na AgentThroughputCard.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/lib/insights/token-stats.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const { mockQueryRaw } = vi.hoisted(() => ({ mockQueryRaw: vi.fn() }))
+
+vi.mock('@/lib/prisma', () => ({
+  prisma: { $queryRaw: mockQueryRaw },
+}))
+
+import { getTokenStats } from '@/lib/insights/token-stats'
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('getTokenStats', () => {
+  it('returns empty result for empty sprintId', async () => {
+    const result = await getTokenStats('user-1', '')
+
+    expect(result.kpi.totalTokens).toBe(0)
+    expect(result.kpi.totalCostUsd).toBe(0)
+    expect(result.kpi.avgCostPerJob).toBe(0)
+    expect(result.kpi.jobCount).toBe(0)
+    expect(result.jobs).toHaveLength(0)
+    expect(mockQueryRaw).not.toHaveBeenCalled()
+  })
+
+  it('maps kpi rows correctly', async () => {
+    const kpiRows = [{ total_tokens: BigInt(10000), total_cost: 0.15, avg_cost: 0.05, job_count: BigInt(3) }]
+    const jobRows: unknown[] = []
+    mockQueryRaw.mockResolvedValueOnce(kpiRows).mockResolvedValueOnce(jobRows)
+
+    const result = await getTokenStats('user-1', 'sprint-1')
+
+    expect(result.kpi.totalTokens).toBe(10000)
+    expect(result.kpi.totalCostUsd).toBe(0.15)
+    expect(result.kpi.avgCostPerJob).toBe(0.05)
+    expect(result.kpi.jobCount).toBe(3)
+  })
+
+  it('maps job rows and handles null token data', async () => {
+    const kpiRows = [{ total_tokens: BigInt(0), total_cost: null, avg_cost: null, job_count: BigInt(0) }]
+    const jobRows = [
+      {
+        job_id: 'job-1',
+        task_title: 'My Task',
+        idea_code: null,
+        model_id: 'claude-sonnet-4-6',
+        input_tokens: null,
+        output_tokens: null,
+        cache_read_tokens: null,
+        cache_write_tokens: null,
+        cost_usd: null,
+        duration_seconds: 42,
+      },
+    ]
+    mockQueryRaw.mockResolvedValueOnce(kpiRows).mockResolvedValueOnce(jobRows)
+
+    const result = await getTokenStats('user-1', 'sprint-1')
+
+    expect(result.jobs).toHaveLength(1)
+    const job = result.jobs[0]
+    expect(job.jobId).toBe('job-1')
+    expect(job.taskTitle).toBe('My Task')
+    expect(job.costUsd).toBeNull()
+    expect(job.durationSeconds).toBe(42)
+  })
+})

app/(app)/insights/components/token-usage.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import type { TokenKpi, TokenJobRow } from '@/lib/insights/token-stats'
+
+export interface TokenUsageCardProps {
+  kpi: TokenKpi
+  jobs: TokenJobRow[]
+}
+
+type SortKey = 'cost' | 'duration'
+
+function fmt(n: number | null, decimals = 0): string {
+  if (n === null) return '—'
+  return n.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+}
+
+function fmtCost(n: number | null): string {
+  if (n === null) return '—'
+  return '$' + n.toFixed(4)
+}
+
+function jobLabel(job: TokenJobRow): string {
+  const label = job.taskTitle ?? job.ideaCode ?? job.jobId
+  return label.length > 40 ? label.slice(0, 37) + '…' : label
+}
+
+export function TokenUsageCard({ kpi, jobs }: TokenUsageCardProps) {
+  const [sortKey, setSortKey] = useState<SortKey>('cost')
+
+  const sorted = useMemo(() => {
+    return [...jobs].sort((a, b) => {
+      if (sortKey === 'cost') return (b.costUsd ?? -Infinity) - (a.costUsd ?? -Infinity)
+      return (b.durationSeconds ?? -Infinity) - (a.durationSeconds ?? -Infinity)
+    })
+  }, [jobs, sortKey])
+
+  if (kpi.jobCount === 0) {
+    return <p className="text-muted-foreground">Geen token-data</p>
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* KPI strip */}
+      <div className="flex gap-6">
+        <div>
+          <div className="text-2xl font-semibold text-foreground">
+            {kpi.totalTokens.toLocaleString()}
+          </div>
+          <div className="text-xs text-muted-foreground">Totaal tokens</div>
+        </div>
+        <div>
+          <div className="text-2xl font-semibold text-foreground">
+            ${kpi.totalCostUsd.toFixed(4)}
+          </div>
+          <div className="text-xs text-muted-foreground">Kosten (USD)</div>
+        </div>
+        <div>
+          <div className="text-2xl font-semibold text-foreground">
+            {kpi.avgCostPerJob ? '$' + kpi.avgCostPerJob.toFixed(4) : '—'}
+          </div>
+          <div className="text-xs text-muted-foreground">Gem. per job</div>
+        </div>
+      </div>
+
+      {/* Sortable table */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted text-muted-foreground text-xs uppercase tracking-wide">
+              <th className="py-2 pr-3 text-left font-medium">Taak</th>
+              <th className="py-2 pr-3 text-left font-medium">Model</th>
+              <th className="py-2 pr-3 text-right font-medium">Input</th>
+              <th className="py-2 pr-3 text-right font-medium">Output</th>
+              <th className="py-2 pr-3 text-right font-medium">Cache-R</th>
+              <th className="py-2 pr-3 text-right font-medium">Cache-W</th>
+              <th
+                className={`py-2 pr-3 text-right font-medium cursor-pointer select-none ${sortKey === 'cost' ? 'text-primary' : ''}`}
+                onClick={() => setSortKey('cost')}
+              >
+                Kosten (USD) {sortKey === 'cost' ? '▾' : ''}
+              </th>
+              <th
+                className={`py-2 text-right font-medium cursor-pointer select-none ${sortKey === 'duration' ? 'text-primary' : ''}`}
+                onClick={() => setSortKey('duration')}
+              >
+                Duur (s) {sortKey === 'duration' ? '▾' : ''}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map(job => (
+              <tr key={job.jobId} className="border-b border-border last:border-0">
+                <td className="py-2 pr-3 text-foreground max-w-48 truncate">{jobLabel(job)}</td>
+                <td className="py-2 pr-3 text-muted-foreground whitespace-nowrap">{job.modelId ?? '—'}</td>
+                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.inputTokens)}</td>
+                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.outputTokens)}</td>
+                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheReadTokens)}</td>
+                <td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheWriteTokens)}</td>
+                <td className="py-2 pr-3 text-right tabular-nums">{fmtCost(job.costUsd)}</td>
+                <td className="py-2 text-right tabular-nums">{fmt(job.durationSeconds, 1)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

app/(app)/insights/page.tsx

@@ -7,6 +7,7 @@ import { getBurndownData } from '@/lib/insights/burndown'
 import { getSprintStatusBreakdown } from '@/lib/insights/sprint-status'
 import { getVerifyResultStats, getAlignmentTrend } from '@/lib/insights/verify-stats'
 import { getJobsPerDay } from '@/lib/insights/agent-throughput'
+import { getTokenStats } from '@/lib/insights/token-stats'
 import { getVelocity } from '@/lib/insights/velocity'
 import { getBacklogHealth } from '@/lib/insights/backlog-health'
 import { SprintInfoStrip } from './components/sprint-info-strip'
@@ -15,6 +16,7 @@ import { SprintStatusDonut } from './components/sprint-status-donut'
 import { PlanQualityCard } from './components/plan-quality'
 import { AlignmentTrend } from './components/alignment-trend'
 import { AgentThroughputCard } from './components/agent-throughput'
+import { TokenUsageCard } from './components/token-usage'
 import { VelocityChart } from './components/velocity-chart'
 import { BacklogHealthCard } from './components/backlog-health'
 
@@ -76,6 +78,11 @@ export default async function InsightsPage({ searchParams }: InsightsPageProps)
     getBacklogHealth(userId),
   ])
 
+  const activeSprintId = activeSprints.find(s => s.product.id === filterProductId)?.id ?? ''
+  const tokenStats = await (activeSprints.length > 0 && filterProductId
+    ? getTokenStats(userId, activeSprintId)
+    : Promise.resolve({ kpi: { totalTokens: 0, totalCostUsd: 0, avgCostPerJob: 0, jobCount: 0 }, jobs: [] }))
+
   // Date.now is an impure call but used once per request — safe in a Server Component.
   // eslint-disable-next-line react-hooks/purity
   const nowMs = Date.now()
@@ -142,6 +149,12 @@ export default async function InsightsPage({ searchParams }: InsightsPageProps)
         />
       </section>
 
+      {/* Token usage */}
+      <section className="space-y-3">
+        <h2 className="text-lg font-medium text-foreground">Token gebruik</h2>
+        <TokenUsageCard kpi={tokenStats.kpi} jobs={tokenStats.jobs} />
+      </section>
+
       {/* Velocity */}
       <section className="space-y-3">
         <h2 className="text-lg font-medium text-foreground">Velocity</h2>

lib/insights/token-stats.ts

@@ -0,0 +1,129 @@
+import { prisma } from '@/lib/prisma'
+
+export interface TokenKpi {
+  totalTokens: number
+  totalCostUsd: number
+  avgCostPerJob: number
+  jobCount: number
+}
+
+export interface TokenJobRow {
+  jobId: string
+  taskTitle: string | null
+  ideaCode: string | null
+  modelId: string | null
+  inputTokens: number | null
+  outputTokens: number | null
+  cacheReadTokens: number | null
+  cacheWriteTokens: number | null
+  costUsd: number | null
+  durationSeconds: number | null
+}
+
+export interface TokenStatsResult {
+  kpi: TokenKpi
+  jobs: TokenJobRow[]
+}
+
+type RawKpiRow = {
+  total_tokens: bigint
+  total_cost: number | null
+  avg_cost: number | null
+  job_count: bigint
+}
+
+type RawJobRow = {
+  job_id: string
+  task_title: string | null
+  idea_code: string | null
+  model_id: string | null
+  input_tokens: number | null
+  output_tokens: number | null
+  cache_read_tokens: number | null
+  cache_write_tokens: number | null
+  cost_usd: number | null
+  duration_seconds: number | null
+}
+
+const EMPTY_KPI: TokenKpi = { totalTokens: 0, totalCostUsd: 0, avgCostPerJob: 0, jobCount: 0 }
+
+export async function getTokenStats(userId: string, sprintId: string): Promise<TokenStatsResult> {
+  if (!sprintId) return { kpi: EMPTY_KPI, jobs: [] }
+
+  const [kpiRows, jobRows] = await Promise.all([
+    prisma.$queryRaw<RawKpiRow[]>`
+      SELECT
+        COALESCE(SUM(cj.input_tokens + cj.output_tokens + cj.cache_read_tokens + cj.cache_write_tokens), 0) AS total_tokens,
+        SUM(
+          cj.input_tokens  * mp.input_price_per_1m  / 1000000.0
+          + cj.output_tokens * mp.output_price_per_1m / 1000000.0
+          + cj.cache_read_tokens  * mp.cache_read_price_per_1m  / 1000000.0
+          + cj.cache_write_tokens * mp.cache_write_price_per_1m / 1000000.0
+        ) FILTER (WHERE cj.input_tokens IS NOT NULL) AS total_cost,
+        AVG(
+          cj.input_tokens  * mp.input_price_per_1m  / 1000000.0
+          + cj.output_tokens * mp.output_price_per_1m / 1000000.0
+          + cj.cache_read_tokens  * mp.cache_read_price_per_1m  / 1000000.0
+          + cj.cache_write_tokens * mp.cache_write_price_per_1m / 1000000.0
+        ) FILTER (WHERE cj.input_tokens IS NOT NULL) AS avg_cost,
+        COUNT(*) FILTER (WHERE cj.input_tokens IS NOT NULL) AS job_count
+      FROM claude_jobs cj
+      JOIN tasks t ON cj.task_id = t.id
+      JOIN stories s ON t.story_id = s.id
+      LEFT JOIN model_prices mp ON mp.model_id = cj.model_id
+      WHERE cj.user_id = ${userId}
+        AND s.sprint_id = ${sprintId}
+        AND cj.status = 'DONE'
+    `,
+    prisma.$queryRaw<RawJobRow[]>`
+      SELECT
+        cj.id AS job_id,
+        t.title AS task_title,
+        i.code AS idea_code,
+        cj.model_id,
+        cj.input_tokens,
+        cj.output_tokens,
+        cj.cache_read_tokens,
+        cj.cache_write_tokens,
+        CASE WHEN cj.input_tokens IS NOT NULL THEN
+          cj.input_tokens  * mp.input_price_per_1m  / 1000000.0
+          + cj.output_tokens * mp.output_price_per_1m / 1000000.0
+          + cj.cache_read_tokens  * mp.cache_read_price_per_1m  / 1000000.0
+          + cj.cache_write_tokens * mp.cache_write_price_per_1m / 1000000.0
+        END AS cost_usd,
+        EXTRACT(EPOCH FROM (cj.finished_at - cj.claimed_at)) AS duration_seconds
+      FROM claude_jobs cj
+      LEFT JOIN tasks t ON cj.task_id = t.id
+      LEFT JOIN ideas i ON cj.idea_id = i.id
+      LEFT JOIN stories s ON t.story_id = s.id
+      LEFT JOIN model_prices mp ON mp.model_id = cj.model_id
+      WHERE cj.user_id = ${userId}
+        AND (s.sprint_id = ${sprintId} OR cj.idea_id IS NOT NULL)
+        AND cj.status = 'DONE'
+      ORDER BY cj.finished_at DESC
+    `,
+  ])
+
+  const kpi = kpiRows[0]
+
+  return {
+    kpi: {
+      totalTokens: Number(kpi?.total_tokens ?? 0),
+      totalCostUsd: Number(kpi?.total_cost ?? 0),
+      avgCostPerJob: Number(kpi?.avg_cost ?? 0),
+      jobCount: Number(kpi?.job_count ?? 0),
+    },
+    jobs: jobRows.map(r => ({
+      jobId: r.job_id,
+      taskTitle: r.task_title,
+      ideaCode: r.idea_code,
+      modelId: r.model_id,
+      inputTokens: r.input_tokens,
+      outputTokens: r.output_tokens,
+      cacheReadTokens: r.cache_read_tokens,
+      cacheWriteTokens: r.cache_write_tokens,
+      costUsd: r.cost_usd != null ? Number(r.cost_usd) : null,
+      durationSeconds: r.duration_seconds != null ? Number(r.duration_seconds) : null,
+    })),
+  }
+}