feat(analyzer): Phase 2 — full stage persistence, fingerprints, aggregate reports, cost guards

Eight sub-phases per docs/ticket-analyzer-phase2-spec.md:

2.1 Schema (migration 070): analyzer_stage_executions table; source_snapshot,
    aggregate_fingerprint, fingerprint_generated_at columns on analyzer_analyses.
    model_traces marked LEGACY (kept for back-compat).
2.2 Every pipeline stage records a row to analyzer_stage_executions, success
    or failure. Worker persists a status='failed' analyzer_analyses row when
    the pipeline throws so partial stage records have a parent. Pipeline
    exposes raw triage/sonnet/opus responses for downstream stages.
2.3 Stage 3 prompt updated with markdown formatting rules + banned filler
    phrases. Added react-markdown + remark-gfm + @tailwindcss/typography.
    New <AnalysisMarkdown> component replaces <ProseText>; coerces stray
    headers to bold paragraphs.
2.4 Stage 6 fingerprint (Haiku) runs after persistence, failure-tolerant.
    scripts/backfill-fingerprints.ts reconstructs Stage 6 input from the
    legacy model_traces blob.
2.5 Browse UI rebuild at /analyzer/tickets: multi-select for client/issue/
    queue/status/priority/assignee, sticky filter bar, active-filter chips,
    bulk selection persisted via localStorage, "Analyze N selected" +
    "Generate aggregate report" actions. New <MultiSelect> primitive.
    Staleness uses last_activity_date > completed_at heuristic per spec C.1.
2.6 Aggregate reports (migration 071): runner is fire-and-forget, persists
    SQL distributions immediately so UI shows partial state during the
    Sonnet reduce call. Three endpoints, three pages (/analyzer/reports[/new
    /:id]). IT Glue context fetcher capped at 200 doc titles.
2.7 Cost guards (migration 072): per-request $5 confirmation, soft-warn at
    $20/day, hard-block at $50/day with ANALYZER_DAILY_COST_OVERRIDE_USERS
    override. Every gating decision audited.
2.8 Runbook + build notes updated.

128 vitest tests passing, tsc clean. Migrations 070/071/072 idempotent
(IF NOT EXISTS). model_traces double-write retained — drop in a future
migration once aggregate reports have soaked.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/analyzer/reports/[id]/page.tsx

@@ -0,0 +1,489 @@
+'use client';
+
+import { useEffect, useState, use } from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  ArrowLeft,
+  AlertTriangle,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+} from 'lucide-react';
+import { AnalysisMarkdown } from '@/components/analyzer/analysis-markdown';
+
+type Report = {
+  id: string;
+  generatedAt: string;
+  reportTitle: string | null;
+  ticketCount: number;
+  status: 'pending' | 'running' | 'complete' | 'failed';
+  errorMessage: string | null;
+  estimatedCostUsd: number | null;
+  modelUsed: string | null;
+  totalInputTokens: number | null;
+  totalOutputTokens: number | null;
+  itglueContextIncluded: boolean | null;
+  dateRangeActual: { earliest: string | null; latest: string | null } | null;
+  categoryDistribution: Record<string, number> | null;
+  clientDistribution: Record<string, number> | null;
+  resolutionPathDistribution: Record<string, number> | null;
+  rootCauseDistribution: Record<string, number> | null;
+  documentationGaps:
+    | Array<{
+        gap: string;
+        frequency: number;
+        example_ticket_numbers: string[];
+        evidence: string;
+        itglue_check: 'no_doc_exists' | 'doc_exists_but_unused' | 'unable_to_verify';
+      }>
+    | null;
+  processGaps:
+    | Array<{
+        gap: string;
+        frequency: number;
+        severity: 'low' | 'medium' | 'high';
+        example_ticket_numbers: string[];
+        evidence: string;
+      }>
+    | null;
+  clientPatterns:
+    | Array<{
+        client: string;
+        pattern: string;
+        frequency: number;
+        example_ticket_numbers: string[];
+      }>
+    | null;
+  recurrenceClusters:
+    | Array<{ theme: string; ticket_numbers: string[]; summary: string }>
+    | null;
+  systemicObservations:
+    | Array<{ observation: string; evidence: string; severity: 'low' | 'medium' | 'high' }>
+    | null;
+  recommendedActions:
+    | Array<{
+        action: string;
+        rationale: string;
+        priority: 'low' | 'medium' | 'high';
+        type: 'documentation' | 'process' | 'training' | 'tooling';
+      }>
+    | null;
+  narrativeSummary: string | null;
+  executiveSummary: string | null;
+};
+
+const SEVERITY_TONE: Record<string, string> = {
+  high: 'border-red-500 bg-red-500/5',
+  medium: 'border-amber-500 bg-amber-500/5',
+  low: 'border-blue-500 bg-blue-500/5',
+};
+
+const ITGLUE_CHECK_TONE: Record<string, string> = {
+  no_doc_exists: 'text-red-600 border-red-300 dark:text-red-400 dark:border-red-800',
+  doc_exists_but_unused:
+    'text-amber-600 border-amber-300 dark:text-amber-400 dark:border-amber-800',
+  unable_to_verify: 'text-muted-foreground',
+};
+
+const ITGLUE_CHECK_LABEL: Record<string, string> = {
+  no_doc_exists: 'No doc exists',
+  doc_exists_but_unused: 'Doc exists but unused',
+  unable_to_verify: 'Unable to verify',
+};
+
+function MiniBars({ data }: { data: Record<string, number> | null }) {
+  if (!data || Object.keys(data).length === 0) return null;
+  const entries = Object.entries(data).sort((a, b) => b[1] - a[1]);
+  const max = entries[0]?.[1] ?? 1;
+  return (
+    <div className="space-y-1.5">
+      {entries.map(([key, val]) => (
+        <div key={key} className="text-xs">
+          <div className="flex justify-between">
+            <span className="truncate">{key}</span>
+            <span className="text-muted-foreground tabular-nums ml-2">{val}</span>
+          </div>
+          <div className="h-1.5 bg-muted rounded overflow-hidden">
+            <div
+              className="h-full bg-primary rounded"
+              style={{ width: `${Math.round((val / max) * 100)}%` }}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function AggregateReportPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = use(params);
+  const [report, setReport] = useState<Report | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    async function load() {
+      try {
+        const res = await fetch(`/api/analyzer/aggregate-reports/${id}`);
+        if (!res.ok) {
+          throw new Error(`Request failed: ${res.status}`);
+        }
+        const { report } = (await res.json()) as { report: Report };
+        if (cancelled) return;
+        setReport(report);
+        setLoading(false);
+        if (report.status === 'pending' || report.status === 'running') {
+          timer = setTimeout(load, 3000);
+        }
+      } catch (err) {
+        if (cancelled) return;
+        setError(err instanceof Error ? err.message : 'Unknown error');
+        setLoading(false);
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [id]);
+
+  if (loading && !report)
+    return <div className="p-6 text-sm text-muted-foreground">Loading…</div>;
+  if (error)
+    return <div className="p-6 text-sm text-destructive">{error}</div>;
+  if (!report) return null;
+
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6 max-w-screen-xl">
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/analyzer/reports">
+            <ArrowLeft className="w-4 h-4 mr-1" />
+            All reports
+          </Link>
+        </Button>
+      </div>
+
+      {/* Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between gap-4 flex-wrap">
+            <div className="space-y-1 min-w-0">
+              <CardTitle className="text-2xl">
+                {report.reportTitle ?? `Aggregate report · ${report.ticketCount} tickets`}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground">
+                {new Date(report.generatedAt).toLocaleString()}
+                {report.modelUsed && ` · ${report.modelUsed}`}
+                {report.estimatedCostUsd !== null && (
+                  <> · ${report.estimatedCostUsd.toFixed(4)}</>
+                )}
+                {report.itglueContextIncluded !== null && (
+                  <>
+                    {' · '}IT Glue context: {report.itglueContextIncluded ? 'included' : 'no'}
+                  </>
+                )}
+                {report.dateRangeActual?.earliest && report.dateRangeActual?.latest && (
+                  <>
+                    {' · '}
+                    {new Date(report.dateRangeActual.earliest).toLocaleDateString()}
+                    {' – '}
+                    {new Date(report.dateRangeActual.latest).toLocaleDateString()}
+                  </>
+                )}
+              </p>
+            </div>
+            <StatusBadge status={report.status} />
+          </div>
+        </CardHeader>
+      </Card>
+
+      {report.status === 'failed' && report.errorMessage && (
+        <Card className="border-destructive/40 bg-destructive/5">
+          <CardContent className="pt-6 flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-destructive shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium">Report generation failed</p>
+              <p className="text-sm text-muted-foreground mt-1 font-mono whitespace-pre-wrap">
+                {report.errorMessage}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {(report.status === 'pending' || report.status === 'running') && (
+        <Card className="border-primary/40 bg-primary/5">
+          <CardContent className="pt-6 flex items-center gap-3">
+            <Loader2 className="w-5 h-5 animate-spin text-primary" />
+            <div className="text-sm">
+              {report.status === 'pending' ? 'Queued.' : 'Running.'} The page will
+              refresh automatically when the report is ready (typically 30–90s).
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Executive summary */}
+      {report.executiveSummary && (
+        <Card className="border-primary/40">
+          <CardHeader>
+            <CardTitle className="text-base text-primary uppercase tracking-wide font-semibold">
+              Executive Summary
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <AnalysisMarkdown className="text-base">
+              {report.executiveSummary}
+            </AnalysisMarkdown>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Distributions */}
+      {(report.categoryDistribution ||
+        report.rootCauseDistribution ||
+        report.resolutionPathDistribution ||
+        report.clientDistribution) && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm uppercase tracking-wide">Categories</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MiniBars data={report.categoryDistribution} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm uppercase tracking-wide">Root cause</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MiniBars data={report.rootCauseDistribution} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm uppercase tracking-wide">Resolution</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MiniBars data={report.resolutionPathDistribution} />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-sm uppercase tracking-wide">Clients</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <MiniBars data={report.clientDistribution} />
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Documentation gaps */}
+      {report.documentationGaps && report.documentationGaps.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Documentation gaps</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {report.documentationGaps.map((g, i) => (
+              <div
+                key={i}
+                className="rounded-lg border-l-4 border-blue-400 bg-blue-500/5 p-3"
+              >
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge
+                    variant="outline"
+                    className={ITGLUE_CHECK_TONE[g.itglue_check] ?? ''}
+                  >
+                    {ITGLUE_CHECK_LABEL[g.itglue_check]}
+                  </Badge>
+                  <Badge variant="secondary">{g.frequency}×</Badge>
+                  <p className="text-sm font-medium">{g.gap}</p>
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">{g.evidence}</p>
+                <div className="mt-2 text-xs flex flex-wrap gap-1">
+                  {g.example_ticket_numbers.map((tn) => (
+                    <Link
+                      key={tn}
+                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
+                      className="font-mono underline text-muted-foreground hover:text-foreground"
+                    >
+                      {tn}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Process gaps */}
+      {report.processGaps && report.processGaps.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Process gaps</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {report.processGaps.map((g, i) => (
+              <div
+                key={i}
+                className={`rounded-lg border-l-4 p-3 ${SEVERITY_TONE[g.severity] ?? ''}`}
+              >
+                <div className="flex items-center gap-2 flex-wrap">
+                  <Badge
+                    variant={
+                      g.severity === 'high'
+                        ? 'destructive'
+                        : g.severity === 'medium'
+                          ? 'default'
+                          : 'secondary'
+                    }
+                  >
+                    {g.severity}
+                  </Badge>
+                  <Badge variant="secondary">{g.frequency}×</Badge>
+                  <p className="text-sm font-medium">{g.gap}</p>
+                </div>
+                <p className="text-xs text-muted-foreground mt-2">{g.evidence}</p>
+                <div className="mt-2 text-xs flex flex-wrap gap-1">
+                  {g.example_ticket_numbers.map((tn) => (
+                    <Link
+                      key={tn}
+                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
+                      className="font-mono underline text-muted-foreground hover:text-foreground"
+                    >
+                      {tn}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Recurrence clusters */}
+      {report.recurrenceClusters && report.recurrenceClusters.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Recurrence clusters</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {report.recurrenceClusters.map((c, i) => (
+              <div key={i} className="border rounded-lg p-4">
+                <div className="font-medium text-sm mb-2">{c.theme}</div>
+                <AnalysisMarkdown className="text-sm">{c.summary}</AnalysisMarkdown>
+                <div className="mt-2 text-xs flex flex-wrap gap-1">
+                  {c.ticket_numbers.map((tn) => (
+                    <Link
+                      key={tn}
+                      href={`/analyzer/ticket/${encodeURIComponent(tn)}`}
+                      className="font-mono underline text-muted-foreground hover:text-foreground"
+                    >
+                      {tn}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Recommended actions */}
+      {report.recommendedActions && report.recommendedActions.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Recommended actions</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3 md:grid-cols-2">
+            {report.recommendedActions
+              .slice()
+              .sort(
+                (a, b) =>
+                  ['low', 'medium', 'high'].indexOf(b.priority) -
+                  ['low', 'medium', 'high'].indexOf(a.priority)
+              )
+              .map((a, i) => (
+                <div key={i} className="border rounded-lg p-4 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Badge
+                      variant={
+                        a.priority === 'high'
+                          ? 'destructive'
+                          : a.priority === 'medium'
+                            ? 'default'
+                            : 'secondary'
+                      }
+                    >
+                      {a.priority}
+                    </Badge>
+                    <Badge variant="outline" className="capitalize">
+                      {a.type}
+                    </Badge>
+                  </div>
+                  <AnalysisMarkdown className="text-sm prose-p:font-medium">
+                    {a.action}
+                  </AnalysisMarkdown>
+                  <AnalysisMarkdown className="text-xs text-muted-foreground">
+                    {a.rationale}
+                  </AnalysisMarkdown>
+                </div>
+              ))}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Narrative summary */}
+      {report.narrativeSummary && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Narrative summary</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <AnalysisMarkdown className="text-base">
+              {report.narrativeSummary}
+            </AnalysisMarkdown>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: Report['status'] }) {
+  if (status === 'complete')
+    return (
+      <Badge className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400" variant="outline">
+        <CheckCircle2 className="w-3 h-3 mr-1" />
+        Complete
+      </Badge>
+    );
+  if (status === 'failed')
+    return (
+      <Badge variant="destructive">
+        <XCircle className="w-3 h-3 mr-1" />
+        Failed
+      </Badge>
+    );
+  return (
+    <Badge variant="secondary">
+      <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+      {status === 'pending' ? 'Queued' : 'Running'}
+    </Badge>
+  );
+}

app/analyzer/reports/new/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useEffect, useMemo, useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { ArrowLeft, Sparkles, AlertTriangle } from 'lucide-react';
+import { toast } from 'sonner';
+
+function NewReportInner() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const ticketNumbers = useMemo(
+    () =>
+      (params.get('ids') ?? '')
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean),
+    [params]
+  );
+
+  const [title, setTitle] = useState('');
+  const [includeItglue, setIncludeItglue] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [warning, setWarning] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (ticketNumbers.length === 0)
+      setWarning('No tickets specified. Pick tickets from the browse page first.');
+    else if (ticketNumbers.length > 100)
+      setWarning(
+        `${ticketNumbers.length} tickets selected — the cap is 100. Narrow the selection or split into multiple reports.`
+      );
+    else setWarning(null);
+  }, [ticketNumbers]);
+
+  async function postReport(confirmedCost: boolean) {
+    const res = await fetch('/api/analyzer/aggregate-reports', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        ticketNumbers,
+        includeItglueContext: includeItglue,
+        reportTitle: title.trim() || null,
+        confirmedCost,
+      }),
+    });
+    return {
+      ok: res.ok,
+      status: res.status,
+      data: (await res.json().catch(() => ({}))) as {
+        reportId?: string;
+        error?: string;
+        message?: string;
+        missingFingerprint?: string[];
+        staleAnalyses?: string[];
+        hint?: string;
+        requiresConfirmation?: boolean;
+        estimatedCost?: number;
+        dailySpendBefore?: number;
+      },
+    };
+  }
+
+  async function handleGenerate() {
+    if (ticketNumbers.length === 0 || ticketNumbers.length > 100) return;
+    setSubmitting(true);
+    try {
+      let attempt = await postReport(false);
+      if (
+        !attempt.ok &&
+        attempt.status === 400 &&
+        attempt.data.requiresConfirmation &&
+        attempt.data.estimatedCost
+      ) {
+        const ok = window.confirm(
+          `Estimated cost for this report is $${attempt.data.estimatedCost.toFixed(
+            2
+          )} (above $5 threshold). Daily spend so far: $${(attempt.data.dailySpendBefore ?? 0).toFixed(2)}.\n\nProceed?`
+        );
+        if (!ok) {
+          setSubmitting(false);
+          return;
+        }
+        attempt = await postReport(true);
+      }
+      if (!attempt.ok || !attempt.data.reportId) {
+        const d = attempt.data;
+        const detail = d.missingFingerprint?.length
+          ? ` Missing fingerprint on: ${d.missingFingerprint.slice(0, 5).join(', ')}${
+              d.missingFingerprint.length > 5
+                ? `, +${d.missingFingerprint.length - 5} more`
+                : ''
+            }.`
+          : d.staleAnalyses?.length
+            ? ` Stale: ${d.staleAnalyses.slice(0, 5).join(', ')}${
+                d.staleAnalyses.length > 5
+                  ? `, +${d.staleAnalyses.length - 5} more`
+                  : ''
+              }.`
+            : '';
+        throw new Error(
+          (d.message ?? d.error ?? 'Request failed') +
+            detail +
+            (d.hint ? ` (${d.hint})` : '')
+        );
+      }
+      router.push(`/analyzer/reports/${attempt.data.reportId}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Unknown error');
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6 max-w-3xl">
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm" asChild>
+          <Link href="/analyzer/tickets">
+            <ArrowLeft className="w-4 h-4 mr-1" />
+            Back to browse
+          </Link>
+        </Button>
+      </div>
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Generate aggregate report
+        </h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          Cross-ticket analysis over the {ticketNumbers.length} ticket
+          {ticketNumbers.length === 1 ? '' : 's'} you selected.
+        </p>
+      </div>
+
+      {warning && (
+        <Card className="border-amber-300 bg-amber-50/50 dark:bg-amber-950/30">
+          <CardContent className="pt-6 flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
+            <p className="text-sm">{warning}</p>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Selected tickets</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-1.5 max-h-48 overflow-y-auto">
+            {ticketNumbers.length === 0 ? (
+              <span className="text-sm text-muted-foreground">None</span>
+            ) : (
+              ticketNumbers.map((tn) => (
+                <Badge key={tn} variant="secondary" className="font-mono text-xs">
+                  {tn}
+                </Badge>
+              ))
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Options</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="report-title">Report title (optional)</Label>
+            <Input
+              id="report-title"
+              placeholder="e.g. April backup tickets"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              maxLength={200}
+            />
+          </div>
+          <Label className="flex items-start gap-3 cursor-pointer">
+            <Checkbox
+              checked={includeItglue}
+              onCheckedChange={(c) => setIncludeItglue(c === true)}
+              className="mt-0.5"
+            />
+            <span className="space-y-0.5">
+              <span className="text-sm font-medium block">Include IT Glue context</span>
+              <span className="text-xs text-muted-foreground block">
+                Fetch documentation titles for the affected clients so the model
+                can distinguish "no doc exists" from "doc exists but unused".
+              </span>
+            </span>
+          </Label>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" asChild>
+          <Link href="/analyzer/tickets">Cancel</Link>
+        </Button>
+        <Button
+          disabled={submitting || ticketNumbers.length === 0 || ticketNumbers.length > 100}
+          onClick={handleGenerate}
+        >
+          <Sparkles className="w-4 h-4 mr-2" />
+          {submitting ? 'Queueing…' : 'Generate report'}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default function NewReportPage() {
+  return (
+    <Suspense fallback={<div className="p-6 text-sm text-muted-foreground">Loading…</div>}>
+      <NewReportInner />
+    </Suspense>
+  );
+}

app/analyzer/reports/page.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { CheckCircle2, XCircle, Loader2 } from 'lucide-react';
+
+interface ReportSummary {
+  id: string;
+  generatedAt: string;
+  reportTitle: string | null;
+  ticketCount: number;
+  status: 'pending' | 'running' | 'complete' | 'failed';
+  estimatedCostUsd: number | null;
+  modelUsed: string | null;
+  generatedByUserId: string | null;
+}
+
+export default function ReportsListPage() {
+  const [reports, setReports] = useState<ReportSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/analyzer/aggregate-reports')
+      .then((r) => (r.ok ? r.json() : Promise.reject(r)))
+      .then((data: { reports: ReportSummary[] }) => {
+        if (!cancelled) setReports(data.reports);
+      })
+      .catch((err) => {
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'Failed to load reports');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6 max-w-screen-xl">
+      <div className="flex items-start justify-between gap-4 flex-wrap">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-tight">
+            Aggregate reports
+          </h1>
+          <p className="text-muted-foreground text-sm mt-1">
+            Cross-ticket pattern analysis. Generate a new one from the browse
+            page.
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/analyzer/tickets">Browse tickets</Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          {loading ? (
+            <div className="p-6 text-sm text-muted-foreground">Loading…</div>
+          ) : error ? (
+            <div className="p-6 text-sm text-destructive">{error}</div>
+          ) : reports.length === 0 ? (
+            <div className="p-12 text-center text-muted-foreground">
+              <p>No reports yet.</p>
+              <p className="text-xs mt-1">
+                Pick tickets on the browse page and click{' '}
+                <em>Generate aggregate report</em>.
+              </p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[110px]">Status</TableHead>
+                  <TableHead>Title</TableHead>
+                  <TableHead className="w-[100px]">Tickets</TableHead>
+                  <TableHead className="w-[120px]">Model</TableHead>
+                  <TableHead className="w-[100px]">Cost</TableHead>
+                  <TableHead className="w-[160px]">Generated</TableHead>
+                  <TableHead className="w-[100px] text-right">Action</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {reports.map((r) => (
+                  <TableRow key={r.id}>
+                    <TableCell>
+                      {r.status === 'complete' ? (
+                        <Badge
+                          variant="outline"
+                          className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
+                        >
+                          <CheckCircle2 className="w-3 h-3 mr-1" />
+                          Complete
+                        </Badge>
+                      ) : r.status === 'failed' ? (
+                        <Badge variant="destructive">
+                          <XCircle className="w-3 h-3 mr-1" />
+                          Failed
+                        </Badge>
+                      ) : (
+                        <Badge variant="secondary">
+                          <Loader2 className="w-3 h-3 mr-1 animate-spin" />
+                          {r.status}
+                        </Badge>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-sm">
+                      {r.reportTitle ?? (
+                        <span className="text-muted-foreground italic">Untitled</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-sm">{r.ticketCount}</TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {r.modelUsed ?? '—'}
+                    </TableCell>
+                    <TableCell className="text-xs">
+                      {r.estimatedCostUsd === null
+                        ? '—'
+                        : `$${r.estimatedCostUsd.toFixed(4)}`}
+                    </TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {new Date(r.generatedAt).toLocaleString()}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="outline" size="sm" asChild>
+                        <Link href={`/analyzer/reports/${r.id}`}>View</Link>
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}