feat(insights): add AgentThroughputCard — stacked BarChart + KPI-strip + product filter

KPI strip (jobs today, 7d success rate, 7d avg duration), 14-day stacked
BarChart with JOB_STATUS_COLORS, and URL-bookmarkable product dropdown via
useTransition + router.replace. Empty-state when no activity.

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

app/(app)/insights/components/agent-throughput.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { useTransition } from 'react'
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import type { JobsPerDayResult } from '@/lib/insights/agent-throughput'
+import { JOB_STATUS_COLORS } from '@/lib/chart-colors'
+
+interface Props {
+  data: JobsPerDayResult
+  productList: { id: string; name: string }[]
+  currentProductId?: string
+}
+
+function formatDuration(seconds: number | null): string {
+  if (seconds === null) return '—'
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return m > 0 ? `${m}m ${s}s` : `${s}s`
+}
+
+const STACKED_STATUSES = ['queued', 'claimed', 'running', 'done', 'failed', 'cancelled'] as const
+
+export function AgentThroughputCard({ data, productList, currentProductId }: Props) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [isPending, startTransition] = useTransition()
+
+  const { perDay, kpi } = data
+
+  const isEmpty = perDay.every(
+    d => d.done + d.failed + d.queued + d.claimed + d.running + d.cancelled === 0,
+  )
+
+  function handleProductChange(value: string | null) {
+    if (value === null) return
+    startTransition(() => {
+      const params = new URLSearchParams(searchParams.toString())
+      if (value === '__all__') {
+        params.delete('product')
+      } else {
+        params.set('product', value)
+      }
+      router.replace(`${pathname}?${params.toString()}`)
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* KPI strip + product filter */}
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div className="flex gap-6">
+          <div>
+            <div className="text-2xl font-semibold text-foreground">{kpi.todayCount}</div>
+            <div className="text-xs text-muted-foreground">Jobs vandaag</div>
+          </div>
+          <div>
+            <div className="text-2xl font-semibold text-foreground">
+              {kpi.successRate7d === 0 ? '—' : `${Math.round(kpi.successRate7d * 100)}%`}
+            </div>
+            <div className="text-xs text-muted-foreground">Success-rate (7d)</div>
+          </div>
+          <div>
+            <div className="text-2xl font-semibold text-foreground">
+              {formatDuration(kpi.avgDurationSeconds7d)}
+            </div>
+            <div className="text-xs text-muted-foreground">Avg duration (7d)</div>
+          </div>
+        </div>
+
+        {productList.length > 0 && (
+          <Select
+            value={currentProductId ?? '__all__'}
+            onValueChange={handleProductChange}
+          >
+            <SelectTrigger className="w-44" disabled={isPending}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__all__">Alle producten</SelectItem>
+              {productList.map(p => (
+                <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+
+      {/* Chart */}
+      {isEmpty ? (
+        <p className="text-sm text-muted-foreground py-4 text-center">
+          Geen agent-activiteit in de laatste 2 weken
+        </p>
+      ) : (
+        <ResponsiveContainer width="100%" height={240}>
+          <BarChart data={perDay}>
+            <XAxis
+              dataKey="day"
+              tick={{ fontSize: 11 }}
+              tickFormatter={v => (v as string).slice(5)}
+            />
+            <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
+            <Tooltip />
+            {STACKED_STATUSES.map(status => (
+              <Bar
+                key={status}
+                dataKey={status}
+                stackId="status"
+                fill={JOB_STATUS_COLORS[status]}
+                name={status}
+              />
+            ))}
+          </BarChart>
+        </ResponsiveContainer>
+      )}
+    </div>
+  )
+}