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>

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>
+  )
+}