Overview/catalog filters, stale index banner, contextual 404

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

@@ -1,21 +1,31 @@
 import {
-    buildCatalogStats,
-    filterCatalogStats,
+    buildFilteredCatalogStats,
+    type CatalogFilterParams,
 } from "../../../lib/catalogStats";
 import { loadBenchmarkArtifacts, loadRunArtifacts } from "../../../lib/data";
 import { catalogStatsToCsv } from "../../../lib/listExport";
 
+function readCatalogFilters(url: URL): CatalogFilterParams {
+    return {
+        q: url.searchParams.get("q") ?? undefined,
+        model: url.searchParams.get("model") ?? undefined,
+        preset: url.searchParams.get("preset") ?? undefined,
+        fast: url.searchParams.get("fast") ?? undefined,
+        from: url.searchParams.get("from") ?? undefined,
+        to: url.searchParams.get("to") ?? undefined,
+    };
+}
+
 export async function GET(request: Request) {
     const url = new URL(request.url);
     const format = url.searchParams.get("format") ?? "json";
-    const q = url.searchParams.get("q") ?? undefined;
+    const filters = readCatalogFilters(url);
 
     const [runs, benchmarks] = await Promise.all([
         loadRunArtifacts(),
         loadBenchmarkArtifacts(),
     ]);
-    const rawStats = buildCatalogStats(runs, benchmarks);
-    const stats = filterCatalogStats(rawStats, q);
+    const stats = buildFilteredCatalogStats(runs, benchmarks, filters);
 
     if (format === "csv") {
         const csv = catalogStatsToCsv(stats);
@@ -30,9 +40,8 @@ export async function GET(request: Request) {
     }
 
     return Response.json({
-        query: q ?? null,
+        filters,
         totals: stats.totals,
-        rawTotals: rawStats.totals,
         models: stats.models,
         presets: stats.presets,
         combos: stats.combos,

apps/web/app/catalog/page.tsx

@@ -2,8 +2,15 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { CollapsibleFilterCard } from "../../components/CollapsibleFilterCard";
 import { MetricCard } from "../../components/MetricCard";
+import { ModelFilterSelect } from "../../components/ModelFilterSelect";
+import { PresetFilterSelect } from "../../components/PresetFilterSelect";
 import { ResponsiveTable } from "../../components/ResponsiveTable";
-import { buildCatalogStats, filterCatalogStats } from "../../lib/catalogStats";
+import { collectArtifactFacets } from "../../lib/artifactFacets";
+import {
+    buildCatalogStats,
+    buildFilteredCatalogStats,
+    hasActiveCatalogFilters,
+} from "../../lib/catalogStats";
 import { loadBenchmarkArtifacts, loadRunArtifacts } from "../../lib/data";
 import { buildQueryString } from "../../lib/listPagination";
 
@@ -13,6 +20,11 @@ export const metadata: Metadata = {
 
 type CatalogSearchParams = {
     q?: string;
+    model?: string;
+    preset?: string;
+    fast?: string;
+    from?: string;
+    to?: string;
 };
 
 function filterHref(
@@ -33,9 +45,11 @@ export default async function CatalogPage({
         loadRunArtifacts(),
         loadBenchmarkArtifacts(),
     ]);
+    const { models, presets } = collectArtifactFacets(runs, benchmarks);
     const rawStats = buildCatalogStats(runs, benchmarks);
-    const stats = filterCatalogStats(rawStats, params.q);
+    const stats = buildFilteredCatalogStats(runs, benchmarks, params);
     const query = (params.q ?? "").trim();
+    const filtersActive = hasActiveCatalogFilters(params);
     const empty = runs.length === 0 && benchmarks.length === 0;
     const filteredCount =
         stats.models.length + stats.presets.length + stats.combos.length;
@@ -72,10 +86,10 @@ export default async function CatalogPage({
 
             <CollapsibleFilterCard
                 resultsSummary={
-                    query ? (
+                    filtersActive ? (
                         <>
                             {filteredCount} of {totalCount} catalog rows match
-                            &ldquo;{query}&rdquo;
+                            {query ? <> &ldquo;{query}&rdquo;</> : null}
                         </>
                     ) : (
                         <>
@@ -93,6 +107,38 @@ export default async function CatalogPage({
                             defaultValue={params.q ?? ""}
                             className="input"
                         />
+                        <ModelFilterSelect
+                            models={models}
+                            defaultValue={params.model ?? ""}
+                            listId="catalog-model-filter-options"
+                        />
+                        <PresetFilterSelect
+                            presets={presets}
+                            defaultValue={params.preset ?? ""}
+                        />
+                        <select
+                            name="fast"
+                            defaultValue={params.fast ?? ""}
+                            className="input"
+                        >
+                            <option value="">Fast mode: any</option>
+                            <option value="true">Fast only</option>
+                            <option value="false">Non-fast only</option>
+                        </select>
+                        <input
+                            type="datetime-local"
+                            name="from"
+                            defaultValue={params.from ?? ""}
+                            className="input"
+                            title="Created at or after"
+                        />
+                        <input
+                            type="datetime-local"
+                            name="to"
+                            defaultValue={params.to ?? ""}
+                            className="input"
+                            title="Created at or before"
+                        />
                     </div>
                     <div className="filter-actions">
                         <button type="submit" className="button">
@@ -110,7 +156,7 @@ export default async function CatalogPage({
                 style={{ display: "flex", gap: 10, flexWrap: "wrap" }}
             >
                 <a
-                    href={`/api/catalog${buildQueryString({ q: params.q }, {})}`}
+                    href={`/api/catalog${buildQueryString(params, {})}`}
                     className="button secondary"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -119,7 +165,7 @@ export default async function CatalogPage({
                     Export JSON
                 </a>
                 <a
-                    href={`/api/catalog${buildQueryString({ q: params.q }, {})}&format=csv`}
+                    href={`/api/catalog${buildQueryString({ ...params, format: "csv" }, {})}`}
                     className="button secondary"
                     download="experiment-catalog.csv"
                 >

apps/web/app/drift/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { CritiqueConfidenceScatter } from "../../components/charts/CritiqueConfidenceScatter";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { MetricCard } from "../../components/MetricCard";
+import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import {
     ResponsiveTable,
     TruncateText,
@@ -76,6 +77,7 @@ export default async function ConfidenceDriftPage({
 
     return (
         <section className="stack">
+            <StaleIndexBanner />
             <div>
                 <h1 className="title">Confidence drift</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 { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import {
     ResponsiveTable,
     TruncateText,
@@ -121,6 +122,7 @@ export default async function IssuesExplorerPage({
 
     return (
         <section className="stack">
+            <StaleIndexBanner />
             <div>
                 <h1 className="title">Critique issues</h1>
                 <p className="subtitle">

apps/web/app/leaderboard/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { ResponsiveTable } from "../../components/ResponsiveTable";
+import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import { loadAnalysisIndex } from "../../lib/data";
 import { applyIndexFilters, collectIndexFacets } from "../../lib/indexFilters";
 import { buildModelLeaderboard } from "../../lib/modelLeaderboard";
@@ -54,6 +55,7 @@ export default async function ModelLeaderboardPage({
 
     return (
         <section className="stack">
+            <StaleIndexBanner />
             <div>
                 <h1 className="title">Model leaderboard</h1>
                 <p className="subtitle">

apps/web/app/not-found.tsx

@@ -1,13 +1,5 @@
+import { NotFoundContent } from "../components/NotFoundContent";
+
 export default function NotFound() {
-    return (
-        <section className="stack">
-            <h1 className="title">Not found</h1>
-            <p className="subtitle">
-                The requested benchmark or run does not exist.
-            </p>
-            <a href="/" className="button">
-                Back to overview
-            </a>
-        </section>
-    );
+    return <NotFoundContent />;
 }

apps/web/app/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { CollapsibleFilterCard } from "../components/CollapsibleFilterCard";
 import { MetricCard } from "../components/MetricCard";
+import { ModelFilterSelect } from "../components/ModelFilterSelect";
 import { PresetFilterSelect } from "../components/PresetFilterSelect";
 import { ResponsiveTable } from "../components/ResponsiveTable";
 import { OverviewCharts } from "../components/charts/OverviewCharts";
@@ -33,6 +34,8 @@ export const metadata: Metadata = {
 
 type OverviewSearchParams = {
     preset?: string;
+    model?: string;
+    fast?: string;
     from?: string;
     to?: string;
 };
@@ -282,9 +285,11 @@ export default async function OverviewPage({
     const filterEntries = Object.entries(index.filterContext ?? {}).filter(
         ([, value]) => value !== undefined && value !== null && value !== "",
     );
-    const { presets } = collectIndexFacets(index);
+    const { models, presets } = collectIndexFacets(index);
     const trendFilters = {
         preset: params.preset,
+        model: params.model,
+        fast: params.fast,
         from: params.from,
         to: params.to,
     };
@@ -732,10 +737,24 @@ export default async function OverviewPage({
             >
                 <form method="get">
                     <div className="filter-grid">
+                        <ModelFilterSelect
+                            models={models}
+                            defaultValue={params.model ?? ""}
+                            listId="overview-model-filter-options"
+                        />
                         <PresetFilterSelect
                             presets={presets}
                             defaultValue={params.preset ?? ""}
                         />
+                        <select
+                            name="fast"
+                            defaultValue={params.fast ?? ""}
+                            className="input"
+                        >
+                            <option value="">Fast mode: any</option>
+                            <option value="true">Fast only</option>
+                            <option value="false">Non-fast only</option>
+                        </select>
                         <input
                             type="datetime-local"
                             name="from"

apps/web/app/quality/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { InsightFilterCard } from "../../components/InsightFilterCard";
 import { MetricCard } from "../../components/MetricCard";
+import { StaleIndexBanner } from "../../components/StaleIndexBanner";
 import {
     ResponsiveTable,
     TruncateText,
@@ -112,6 +113,7 @@ export default async function QualityInsightsPage({
 
     return (
         <section className="stack">
+            <StaleIndexBanner />
             <div>
                 <h1 className="title">Quality insights</h1>
                 <p className="subtitle">

apps/web/components/NotFoundContent.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+function describeMissingResource(pathname: string): {
+    title: string;
+    subtitle: string;
+    primaryHref: string;
+    primaryLabel: string;
+} {
+    if (pathname.startsWith("/runs/")) {
+        return {
+            title: "Run not found",
+            subtitle:
+                "This run ID is not in the artifact store. It may have been removed, renamed, or never synced to this deployment.",
+            primaryHref: "/runs",
+            primaryLabel: "Browse all runs",
+        };
+    }
+
+    if (pathname.startsWith("/benchmarks/")) {
+        return {
+            title: "Benchmark not found",
+            subtitle:
+                "This benchmark ID is not in the artifact store. Check the ID or browse benchmarks to find a related experiment.",
+            primaryHref: "/benchmarks",
+            primaryLabel: "Browse all benchmarks",
+        };
+    }
+
+    if (pathname.startsWith("/questions/view")) {
+        return {
+            title: "Question hub not found",
+            subtitle:
+                "No artifacts match this research question. Try the questions index or search for a related topic.",
+            primaryHref: "/questions",
+            primaryLabel: "Browse questions",
+        };
+    }
+
+    return {
+        title: "Page not found",
+        subtitle:
+            "The page you requested does not exist. Use search to find runs, benchmarks, and research questions.",
+        primaryHref: "/search",
+        primaryLabel: "Search artifacts",
+    };
+}
+
+export function NotFoundContent() {
+    const pathname = usePathname() ?? "";
+    const { title, subtitle, primaryHref, primaryLabel } =
+        describeMissingResource(pathname);
+
+    return (
+        <section className="stack">
+            <h1 className="title">{title}</h1>
+            <p className="subtitle">{subtitle}</p>
+            <div
+                className="page-actions"
+                style={{ display: "flex", gap: 10, flexWrap: "wrap" }}
+            >
+                <Link href={primaryHref} className="button">
+                    {primaryLabel}
+                </Link>
+                <Link href="/" className="button secondary">
+                    Back to overview
+                </Link>
+                <Link href="/search" className="button secondary">
+                    Search
+                </Link>
+            </div>
+        </section>
+    );
+}