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>

components/analyzer/analysis-markdown.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface Props {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Renders the analyzer's prose fields (summary, next_step, next_step_rationale,
+ * post_resolution_analysis) as markdown. Stage 3's prompt forbids headers, but
+ * we coerce any that slip through into bold paragraphs since the surrounding
+ * Card already provides the section heading.
+ */
+export function AnalysisMarkdown({ children, className = '' }: Props) {
+  return (
+    <div
+      className={`prose prose-sm dark:prose-invert max-w-none prose-p:leading-7 prose-li:leading-7 prose-strong:text-foreground prose-headings:text-foreground ${className}`}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: ({ children }) => <p className="font-semibold">{children}</p>,
+          h2: ({ children }) => <p className="font-semibold">{children}</p>,
+          h3: ({ children }) => <p className="font-semibold">{children}</p>,
+          h4: ({ children }) => <p className="font-semibold">{children}</p>,
+          h5: ({ children }) => <p className="font-semibold">{children}</p>,
+          h6: ({ children }) => <p className="font-semibold">{children}</p>,
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}

components/analyzer/analysis-view.tsx

@@ -20,6 +20,7 @@ import {
 } from 'lucide-react';
 import { ShareModal } from './share-modal';
 import { AnalyzeButton } from './analyze-button';
+import { AnalysisMarkdown } from './analysis-markdown';
 import type { PersistedAnalysis, Visibility } from '@/lib/types/analyzer';
 
 interface AnalysisViewProps {
@@ -44,29 +45,6 @@ const SEVERITY_TONE: Record<string, string> = {
   low: 'border-blue-500 bg-blue-500/5',
 };
 
-function ProseText({
-  text,
-  className = '',
-}: {
-  text: string;
-  className?: string;
-}) {
-  const paragraphs = text
-    .split(/\n\s*\n/)
-    .map((p) => p.trim())
-    .filter(Boolean);
-  if (paragraphs.length === 0) return null;
-  return (
-    <div className={`space-y-3 ${className}`}>
-      {paragraphs.map((p, i) => (
-        <p key={i} className="leading-7 whitespace-pre-line">
-          {p}
-        </p>
-      ))}
-    </div>
-  );
-}
-
 function ConfidenceBadge({ score }: { score: number | null }) {
   if (score === null) return null;
   const pct = Math.round(score * 100);
@@ -169,7 +147,7 @@ export function AnalysisView({ analysis: a }: AnalysisViewProps) {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <ProseText text={a.summary} className="text-base text-foreground" />
+            <AnalysisMarkdown className="text-base">{a.summary}</AnalysisMarkdown>
           </CardContent>
         </Card>
       )}
@@ -184,10 +162,9 @@ export function AnalysisView({ analysis: a }: AnalysisViewProps) {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <ProseText
-              text={a.nextStep}
-              className="text-base font-medium text-foreground"
-            />
+            <AnalysisMarkdown className="text-base prose-p:font-medium">
+              {a.nextStep}
+            </AnalysisMarkdown>
             {a.nextStepRationale && (
               <Collapsible
                 open={nextStepOpen}
@@ -205,10 +182,9 @@ export function AnalysisView({ analysis: a }: AnalysisViewProps) {
                   </Button>
                 </CollapsibleTrigger>
                 <CollapsibleContent>
-                  <ProseText
-                    text={a.nextStepRationale}
-                    className="text-sm text-muted-foreground mt-3 pl-4 border-l-2 border-primary/30"
-                  />
+                  <AnalysisMarkdown className="text-sm text-muted-foreground mt-3 pl-4 border-l-2 border-primary/30">
+                    {a.nextStepRationale}
+                  </AnalysisMarkdown>
                 </CollapsibleContent>
               </Collapsible>
             )}
@@ -351,10 +327,9 @@ export function AnalysisView({ analysis: a }: AnalysisViewProps) {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <ProseText
-              text={a.postResolutionAnalysis}
-              className="text-base text-foreground"
-            />
+            <AnalysisMarkdown className="text-base">
+              {a.postResolutionAnalysis}
+            </AnalysisMarkdown>
           </CardContent>
         </Card>
       )}

components/navigation/app-navigation.tsx

@@ -118,6 +118,12 @@ const navigationItems: NavItem[] = [
         icon: Search,
         description: 'Filter tickets by period, client, or issue type — pick one to analyze',
       },
+      {
+        title: 'Aggregate Reports',
+        href: '/analyzer/reports',
+        icon: BarChart3,
+        description: 'Cross-ticket pattern analysis: documentation gaps, process gaps, recurrence clusters',
+      },
       {
         title: 'Needs Review',
         href: '/analyzer/queue',

components/ui/multi-select.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { ChevronDown, Search, X } from 'lucide-react';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+interface Props {
+  options: MultiSelectOption[];
+  value: string[];
+  onChange: (next: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  className?: string;
+  /** Hide the search box when option count is below this threshold. */
+  searchThreshold?: number;
+  /** Optional max-height for the option list (px). */
+  maxListHeight?: number;
+}
+
+export function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = 'Any',
+  searchPlaceholder = 'Search…',
+  className = '',
+  searchThreshold = 8,
+  maxListHeight = 300,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const valueSet = useMemo(() => new Set(value), [value]);
+
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    if (!s) return options;
+    return options.filter((o) => o.label.toLowerCase().includes(s));
+  }, [options, search]);
+
+  const selectedLabels = useMemo(() => {
+    if (value.length === 0) return null;
+    if (value.length === 1) {
+      return options.find((o) => o.value === value[0])?.label ?? value[0];
+    }
+    return `${value.length} selected`;
+  }, [value, options]);
+
+  function toggle(optValue: string) {
+    if (valueSet.has(optValue)) {
+      onChange(value.filter((v) => v !== optValue));
+    } else {
+      onChange([...value, optValue]);
+    }
+  }
+
+  function clear(e: React.MouseEvent) {
+    e.stopPropagation();
+    onChange([]);
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={`justify-between font-normal ${className}`}
+        >
+          <span className="truncate">
+            {selectedLabels ?? (
+              <span className="text-muted-foreground">{placeholder}</span>
+            )}
+          </span>
+          <span className="flex items-center gap-1 shrink-0 ml-2">
+            {value.length > 0 && (
+              <Badge
+                variant="secondary"
+                className="h-5 px-1.5 text-xs hover:bg-destructive hover:text-destructive-foreground"
+                onClick={clear}
+              >
+                <X className="w-3 h-3" />
+              </Badge>
+            )}
+            <ChevronDown className="w-4 h-4 opacity-50" />
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0 w-[var(--radix-popover-trigger-width)] min-w-[260px]"
+        align="start"
+      >
+        {options.length >= searchThreshold && (
+          <div className="p-2 border-b">
+            <div className="relative">
+              <Search className="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="pl-8 h-8"
+              />
+            </div>
+          </div>
+        )}
+        <div
+          className="overflow-y-auto py-1"
+          style={{ maxHeight: maxListHeight }}
+        >
+          {filtered.length === 0 ? (
+            <div className="px-3 py-6 text-sm text-muted-foreground text-center">
+              No matches
+            </div>
+          ) : (
+            filtered.map((opt) => {
+              const checked = valueSet.has(opt.value);
+              return (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => toggle(opt.value)}
+                  className="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-accent text-left"
+                >
+                  <Checkbox checked={checked} className="pointer-events-none" />
+                  <span className="truncate">{opt.label}</span>
+                </button>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}