feat(compare): parent-first compare screen assembly

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

nextjs-app/components/compare/TrendsExplorer.tsx

@@ -7,7 +7,6 @@
 
 'use client';
 
-import { useState } from 'react';
 import dynamic from 'next/dynamic';
 
 import { progressBand } from '@/lib/compareLogic';
@@ -53,19 +52,20 @@ export function TrendsExplorer({
   schools,
   data,
   metrics,
-  initialMetric,
+  metric,
+  onMetricChange,
   isPrimaryPhase,
   nationalAverages,
 }: {
   schools: School[];
   data: Record<string, ComparisonData>;
   metrics: MetricDefinition[];
-  initialMetric: string;
+  /** Controlled: the page owns the metric so the URL contract survives. */
+  metric: string;
+  onMetricChange: (metric: string) => void;
   isPrimaryPhase: boolean;
   nationalAverages?: NationalAverages;
 }) {
-  const [metric, setMetric] = useState(initialMetric);
-
   const allowedCategories = isPrimaryPhase ? PRIMARY_CATEGORIES : SECONDARY_CATEGORIES;
   const optgroups = isPrimaryPhase ? PRIMARY_OPTGROUPS : SECONDARY_OPTGROUPS;
   const filteredMetrics = metrics.filter((m) => allowedCategories.includes(m.category));
@@ -88,7 +88,7 @@ export function TrendsExplorer({
 
   const handleMetricChange = (next: string) => {
     track('compare_metric_changed', { metric: next, phase: isPrimaryPhase ? 'primary' : 'secondary' });
-    setMetric(next);
+    onMetricChange(next);
   };
 
   const ciKeys = PROGRESS_CI[metric];