feat(web): filter context banner, drift trends, pairs scope, slowest runs

apps/web/app/api/timing/route.ts

@@ -1,7 +1,11 @@
 import { filterRunArtifacts, loadRunArtifacts } from "../../../lib/data";
-import { agentTimingToCsv } from "../../../lib/listExport";
+import {
+    agentTimingToCsv,
+    slowestRunTimingToCsv,
+} from "../../../lib/listExport";
 import {
     buildAgentTimingStats,
+    buildSlowestRunRows,
     summarizeStepTiming,
 } from "../../../lib/stepTiming";
 
@@ -24,14 +28,22 @@ export async function GET(request: Request) {
     const runs = filterRunArtifacts(allRuns, filters);
     const summary = summarizeStepTiming(runs);
     const rows = buildAgentTimingStats(runs);
+    const slowestRuns = buildSlowestRunRows(runs);
 
     if (format === "csv") {
-        const csv = agentTimingToCsv(rows);
+        const scope = url.searchParams.get("scope") ?? "agents";
+        const csv =
+            scope === "runs"
+                ? slowestRunTimingToCsv(slowestRuns)
+                : agentTimingToCsv(rows);
+        const filename =
+            scope === "runs"
+                ? "pipeline-timing-slowest-runs.csv"
+                : "pipeline-timing.csv";
         return new Response(csv, {
             headers: {
                 "Content-Type": "text/csv; charset=utf-8",
-                "Content-Disposition":
-                    'attachment; filename="pipeline-timing.csv"',
+                "Content-Disposition": `attachment; filename="${filename}"`,
                 "Cache-Control": "public, max-age=60",
             },
         });
@@ -43,5 +55,6 @@ export async function GET(request: Request) {
         filters,
         summary,
         rows,
+        slowestRuns,
     });
 }

apps/web/app/counterfactual/page.tsx

@@ -6,6 +6,7 @@ import {
     ResponsiveTable,
     TruncateText,
 } from "../../components/ResponsiveTable";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import { loadAnalysisIndex, loadRunArtifacts } from "../../lib/data";
 import {
@@ -83,6 +84,7 @@ export default async function CounterfactualExplorerPage({
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={rawIndex.filterContext} />
             <div>
                 <h1 className="title">Counterfactual failure modes</h1>
                 <p className="subtitle">

apps/web/app/drift/page.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { CritiqueConfidenceScatter } from "../../components/charts/CritiqueConfidenceScatter";
+import { DriftTrendCharts } from "../../components/charts/DriftTrendCharts";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { MetricCard } from "../../components/MetricCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
@@ -13,6 +15,7 @@ import {
     buildConfidenceDriftRows,
     summarizeConfidenceDrift,
 } from "../../lib/confidenceDrift";
+import { buildDriftTrendSeries } from "../../lib/driftTrends";
 import { applyIndexFilters, collectIndexFacets } from "../../lib/indexFilters";
 import { buildQueryString } from "../../lib/listPagination";
 
@@ -63,7 +66,8 @@ export default async function ConfidenceDriftPage({
     const index = applyIndexFilters(rawIndex, params);
     const summary = summarizeConfidenceDrift(index);
     const rows = buildConfidenceDriftRows(index, { runs: allRuns });
-    const scatterPoints = rows
+    const driftTrendSeries = buildDriftTrendSeries(rows);
+    const solverScatterPoints = rows
         .filter(
             (row) =>
                 typeof row.maxSeverity === "number" &&
@@ -72,12 +76,24 @@ export default async function ConfidenceDriftPage({
         .map((row) => ({
             runId: row.runId,
             maxSeverity: row.maxSeverity as number,
-            solverToRevisionDelta: row.solverToRevisionDelta as number,
+            delta: row.solverToRevisionDelta as number,
+        }));
+    const revisionScatterPoints = rows
+        .filter(
+            (row) =>
+                typeof row.maxSeverity === "number" &&
+                typeof row.revisionToSynthesizerDelta === "number",
+        )
+        .map((row) => ({
+            runId: row.runId,
+            maxSeverity: row.maxSeverity as number,
+            delta: row.revisionToSynthesizerDelta as number,
         }));
 
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={rawIndex.filterContext} />
             <div>
                 <h1 className="title">Confidence drift</h1>
                 <p className="subtitle">
@@ -162,11 +178,30 @@ export default async function ConfidenceDriftPage({
                 />
             </div>
 
-            {scatterPoints.length > 0 ? (
-                <CritiqueConfidenceScatter
-                    points={scatterPoints}
-                    hint="Filtered runs with both severity and solver→revision delta — click a point to open the trace."
-                />
+            <DriftTrendCharts series={driftTrendSeries} />
+
+            {solverScatterPoints.length > 0 ||
+            revisionScatterPoints.length > 0 ? (
+                <div className="two-col">
+                    {solverScatterPoints.length > 0 ? (
+                        <CritiqueConfidenceScatter
+                            points={solverScatterPoints}
+                            title="Severity vs solver→revision Δ"
+                            helpKey="severityVsSolverToRevisionDelta"
+                            hint="Filtered runs with both severity and solver→revision delta — click a point to open the trace."
+                            yAxisName="solverToRevisionDelta"
+                        />
+                    ) : null}
+                    {revisionScatterPoints.length > 0 ? (
+                        <CritiqueConfidenceScatter
+                            points={revisionScatterPoints}
+                            title="Severity vs revision→synth Δ"
+                            helpKey="severityVsRevisionToSynthesizerDelta"
+                            hint="Filtered runs with both severity and revision→synthesizer delta — click a point to open the trace."
+                            yAxisName="revisionToSynthesizerDelta"
+                        />
+                    ) : null}
+                </div>
             ) : null}
 
             {rows.length === 0 ? (

apps/web/app/evidence/page.tsx

@@ -7,6 +7,7 @@ import {
     ResponsiveTable,
     TruncateText,
 } from "../../components/ResponsiveTable";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import { loadAnalysisIndex, loadRunArtifacts } from "../../lib/data";
 import {
@@ -90,6 +91,7 @@ export default async function EvidenceExplorerPage({
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={rawIndex.filterContext} />
             <div>
                 <h1 className="title">Evidence planning</h1>
                 <p className="subtitle">

apps/web/app/issues/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Link from "next/link";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import {
     ResponsiveTable,
@@ -123,6 +124,7 @@ export default async function IssuesExplorerPage({
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={index.filterContext} />
             <div>
                 <h1 className="title">Critique issues</h1>
                 <p className="subtitle">

apps/web/app/outliers/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { MetricCard } from "../../components/MetricCard";
 import { ResponsiveTable } from "../../components/ResponsiveTable";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import { loadAnalysisIndex } from "../../lib/data";
 import { applyIndexFilters, collectIndexFacets } from "../../lib/indexFilters";
@@ -60,6 +61,7 @@ export default async function OutliersPage({
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={rawIndex.filterContext} />
             <div>
                 <h1 className="title">Outlier runs</h1>
                 <p className="subtitle">

apps/web/app/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { CollapsibleFilterCard } from "../components/CollapsibleFilterCard";
+import { AnalysisFilterContextCard } from "../components/AnalysisFilterContextCard";
 import { MetricCard } from "../components/MetricCard";
 import { ModelFilterSelect } from "../components/ModelFilterSelect";
 import { PresetFilterSelect } from "../components/PresetFilterSelect";
@@ -285,6 +286,7 @@ export default async function OverviewPage({
     const filterEntries = Object.entries(index.filterContext ?? {}).filter(
         ([, value]) => value !== undefined && value !== null && value !== "",
     );
+    const hasFilterContext = filterEntries.length > 0;
     const { models, presets } = collectIndexFacets(index);
     const trendFilters = {
         preset: params.preset,
@@ -590,25 +592,10 @@ export default async function OverviewPage({
                 />
             </div>
 
-            {filterEntries.length > 0 ? (
-                <div className="card">
-                    <h2 style={{ marginTop: 0 }}>Analysis filter context</h2>
-                    <p className="small muted">
-                        This index was generated from a filtered artifact
-                        subset.
-                    </p>
-                    <ResponsiveTable
-                        columns={[
-                            { key: "key", label: "Filter" },
-                            { key: "value", label: "Value" },
-                        ]}
-                        data={filterEntries.map(([key, value]) => ({
-                            key,
-                            value: String(value),
-                        }))}
-                        getRowId={(row) => row.key as string}
-                    />
-                </div>
+            {hasFilterContext ? (
+                <AnalysisFilterContextCard
+                    filterContext={index.filterContext}
+                />
             ) : null}
 
             <div className="card">

apps/web/app/pairs/page.tsx

@@ -9,6 +9,7 @@ import {
 import { collectArtifactFacets } from "../../lib/artifactFacets";
 import {
     loadBenchmarkArtifacts,
+    loadDataStatus,
     type ArtifactFilterParams,
 } from "../../lib/data";
 import { buildQueryString } from "../../lib/listPagination";
@@ -32,17 +33,43 @@ export default async function PairsExplorerPage({
     searchParams: Promise<PairsSearchParams>;
 }) {
     const params = await searchParams;
-    const allBenchmarks = await loadBenchmarkArtifacts();
+    const [allBenchmarks, status] = await Promise.all([
+        loadBenchmarkArtifacts(),
+        loadDataStatus(),
+    ]);
     const { models, presets } = collectArtifactFacets([], allBenchmarks);
     const allSummaries = await buildBenchmarkPairSummaries(allBenchmarks);
     const summaries = filterPairSummaries(allSummaries, params);
     const selectedBenchmark = (params.benchmark ?? "").trim();
+    const benchmarkOptions = [...allBenchmarks].sort((a, b) =>
+        b.metadata.createdAt.localeCompare(a.metadata.createdAt),
+    );
     const details = selectedBenchmark
         ? await buildBenchmarkPairDetails(selectedBenchmark, allBenchmarks)
         : { summary: null, pairs: [] };
 
     return (
         <section className="stack">
+            {status.artifactCounts.benchmarks > 0 &&
+            !status.hasBenchmarkPairs ? (
+                <div
+                    className="card"
+                    style={{ borderColor: "var(--color-warning)" }}
+                >
+                    <h2 style={{ marginTop: 0 }}>
+                        Dedicated pairs export not found
+                    </h2>
+                    <p className="muted" style={{ marginBottom: 12 }}>
+                        Benchmark artifacts exist but{" "}
+                        <code>analysis-benchmark-pairs.json</code> is missing.
+                        The explorer can fall back to in-artifact pairs, but the
+                        dedicated export enables richer pairwise data.
+                    </p>
+                    <Link href="/status" className="button secondary">
+                        Check data status
+                    </Link>
+                </div>
+            ) : null}
             <div>
                 <h1 className="title">Benchmark pairwise similarity</h1>
                 <p className="subtitle">
@@ -65,6 +92,75 @@ export default async function PairsExplorerPage({
                 </div>
             </div>
 
+            <form className="card" method="get">
+                <h2 style={{ marginTop: 0 }}>Benchmark scope</h2>
+                <p className="small muted" style={{ marginBottom: "1rem" }}>
+                    Jump directly to pairwise details for one benchmark while
+                    keeping list filters applied.
+                </p>
+                <div className="filter-grid">
+                    <label className="filter-field">
+                        <span className="small muted">Benchmark</span>
+                        <select
+                            name="benchmark"
+                            defaultValue={selectedBenchmark}
+                            className="input"
+                        >
+                            <option value="">All benchmarks (summary)</option>
+                            {benchmarkOptions.map((benchmark) => (
+                                <option key={benchmark.id} value={benchmark.id}>
+                                    {benchmark.id.slice(-12)} —{" "}
+                                    {benchmark.question.length > 48
+                                        ? `${benchmark.question.slice(0, 48)}…`
+                                        : benchmark.question}
+                                </option>
+                            ))}
+                        </select>
+                    </label>
+                </div>
+                {params.q ? (
+                    <input type="hidden" name="q" value={params.q} />
+                ) : null}
+                {params.model ? (
+                    <input type="hidden" name="model" value={params.model} />
+                ) : null}
+                {params.preset ? (
+                    <input type="hidden" name="preset" value={params.preset} />
+                ) : null}
+                {params.fast ? (
+                    <input type="hidden" name="fast" value={params.fast} />
+                ) : null}
+                {params.from ? (
+                    <input type="hidden" name="from" value={params.from} />
+                ) : null}
+                {params.to ? (
+                    <input type="hidden" name="to" value={params.to} />
+                ) : null}
+                <div className="filter-actions">
+                    <button type="submit" className="button">
+                        Apply benchmark
+                    </button>
+                    {selectedBenchmark ? (
+                        <Link
+                            href={`/pairs${buildQueryString(
+                                {
+                                    q: params.q,
+                                    model: params.model,
+                                    preset: params.preset,
+                                    fast: params.fast,
+                                    from: params.from,
+                                    to: params.to,
+                                },
+                                {},
+                            )}`}
+                            className="button secondary"
+                        >
+                            Clear benchmark
+                        </Link>
+                    ) : null}
+                </div>
+            </form>
+
             <InsightFilterCard
                 action="/pairs"
                 models={models}

apps/web/app/quality/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
+import { AnalysisFilterContextCard } from "../../components/AnalysisFilterContextCard";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { MetricCard } from "../../components/MetricCard";
 import { StaleIndexBanner } from "../../components/StaleIndexBanner";
@@ -117,6 +118,7 @@ export default async function QualityInsightsPage({
     return (
         <section className="stack">
             <StaleIndexBanner />
+            <AnalysisFilterContextCard filterContext={rawIndex.filterContext} />
             <div>
                 <h1 className="title">Quality insights</h1>
                 <p className="subtitle">