feat(reports): cohort sparklines render one polyline per actor when focus-pair is off

Author: jddunn

src/dashboard/src/components/reports/MetricSparklines.module.scss

@@ -88,3 +88,52 @@
   color: var(--side-b-color, var(--eng));
   font-weight: 700;
 }
+
+/* Cohort variant: chips of the per-actor last-value, wrapping when
+ * many actors are present so a 12-actor cohort doesn't blow up the
+ * sparkline card's footer width. */
+.cardFooterCohort {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  margin-top: 4px;
+  font-size: var(--font-2xs);
+  font-family: var(--mono);
+}
+
+.lastCohort {
+  color: var(--actor-color, var(--text-3));
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+/* Cohort legend at the section header. Wrapping flex of per-actor
+ * chips; each chip carries the actor's color via the --actor-color
+ * CSS var set inline. */
+.legendCohort {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font-family: var(--mono);
+  font-size: var(--font-2xs);
+  max-width: 70%;
+  justify-content: flex-end;
+}
+
+.legendCohortEntry {
+  color: var(--actor-color, var(--text-2));
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--actor-color, var(--text-3));
+    margin-right: 4px;
+    vertical-align: 1px;
+  }
+}

src/dashboard/src/components/reports/MetricSparklines.tsx

@@ -1,6 +1,15 @@
 /**
- * Six compact SVG sparklines, one per world metric, overlaying
- * A and B so the user sees where the curves cross across the run.
+ * Six compact SVG sparklines, one per world metric. Renders two
+ * shapes:
+ *
+ * - Pair mode (default): overlays leader A + leader B polylines on
+ *   each card so the user spots crossover turns. Driven by
+ *   `metric.a` / `metric.b` in the MetricSeries payload.
+ * - Cohort mode: when `metric.series` is populated, overlays one
+ *   polyline per actor (up to N) and renders a wrapped legend at the
+ *   top. Triggered by ReportView when the user runs a cohort with the
+ *   pair-focus toggle OFF.
+ *
  * No chart library; same inline-SVG pattern as CommanderTrajectoryCard.
  *
  * @module paracosm/dashboard/reports/MetricSparklines
@@ -35,22 +44,81 @@ function SparkCard({ metric, sideAColor, sideBColor }: CardProps) {
   const padX = 4;
   const padY = 6;
 
-  const all = [...metric.a, ...metric.b];
-  if (all.length === 0) return null;
+  // Cohort mode: one polyline per actor in `series`. Falls through to
+  // pair mode when the array is absent or empty.
+  const isCohortShape = Array.isArray(metric.series) && metric.series.length >= 2;
+
+  const allPoints = isCohortShape
+    ? metric.series!.flatMap(s => s.points)
+    : [...metric.a, ...metric.b];
+  if (allPoints.length === 0) return null;
 
-  const minTurn = Math.min(...all.map(p => p.turn));
-  const maxTurn = Math.max(...all.map(p => p.turn));
-  const minVal = Math.min(...all.map(p => p.value));
-  const maxVal = Math.max(...all.map(p => p.value));
+  const minTurn = Math.min(...allPoints.map(p => p.turn));
+  const maxTurn = Math.max(...allPoints.map(p => p.turn));
+  const minVal = Math.min(...allPoints.map(p => p.value));
+  const maxVal = Math.max(...allPoints.map(p => p.value));
   const valRange = Math.max(1e-6, maxVal - minVal);
   const turnRange = Math.max(1, maxTurn - minTurn);
 
   const xFor = (turn: number) => padX + (W - padX * 2) * ((turn - minTurn) / turnRange);
   const yFor = (value: number) => padY + (H - padY * 2) * (1 - (value - minVal) / valRange);
 
+  if (isCohortShape) {
+    return (
+      <div className={styles.card}>
+        <div className={styles.cardHeader}>
+          <span className={styles.cardLabel}>{metric.label}</span>
+          <span className={styles.cardRange}>T{minTurn} → T{maxTurn}</span>
+        </div>
+        <svg
+          viewBox={`0 0 ${W} ${H}`}
+          width="100%"
+          height={H}
+          role="img"
+          aria-label={`${metric.label} sparkline (${metric.series!.length} actors)`}
+        >
+          <line x1={padX} y1={H / 2} x2={W - padX} y2={H / 2} stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2,3" />
+          {metric.series!.map((s) => {
+            const points = s.points.map(p => `${xFor(p.turn)},${yFor(p.value)}`).join(' ');
+            if (!points) return null;
+            return (
+              <polyline
+                key={s.actorId}
+                points={points}
+                fill="none"
+                stroke={s.color}
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+                strokeLinecap="round"
+                opacity={0.78}
+              >
+                <title>{s.name}</title>
+              </polyline>
+            );
+          })}
+        </svg>
+        <div className={styles.cardFooterCohort}>
+          {metric.series!.map((s) => {
+            const last = s.points[s.points.length - 1]?.value;
+            return (
+              <span
+                key={s.actorId}
+                className={styles.lastCohort}
+                style={{ ['--actor-color' as string]: s.color } as CSSProperties}
+                title={s.name}
+              >
+                {last != null ? formatValue(last, metric.unit) : '·'}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // Pair mode (original rendering).
   const aPoints = metric.a.map(p => `${xFor(p.turn)},${yFor(p.value)}`).join(' ');
   const bPoints = metric.b.map(p => `${xFor(p.turn)},${yFor(p.value)}`).join(' ');
-
   const aLast = metric.a[metric.a.length - 1]?.value;
   const bLast = metric.b[metric.b.length - 1]?.value;
 
@@ -91,7 +159,14 @@ export function MetricSparklines(props: MetricSparklinesProps) {
   const { metrics, leaderAName, leaderBName } = props;
   const sideAColor = props.sideAColor ?? 'var(--vis)';
   const sideBColor = props.sideBColor ?? 'var(--eng)';
-  const populated = metrics.filter(m => m.a.length > 0 || m.b.length > 0);
+  // Detect cohort shape off the first metric — collectMetricSeriesCohort
+  // populates `series` on every entry uniformly.
+  const isCohortShape = metrics.length > 0 && Array.isArray(metrics[0].series) && metrics[0].series!.length >= 2;
+  const populated = metrics.filter(m =>
+    isCohortShape
+      ? (m.series ?? []).some(s => s.points.length > 0)
+      : (m.a.length > 0 || m.b.length > 0),
+  );
   if (populated.length === 0) return null;
 
   const themeStyle = {
@@ -103,11 +178,25 @@ export function MetricSparklines(props: MetricSparklinesProps) {
     <section aria-label="Metric sparklines" className={styles.section} style={themeStyle}>
       <div className={styles.sectionHeader}>
         <span className={styles.sectionTitle}>Metric Trajectories</span>
-        <span className={styles.legend}>
-          <span className={styles.legendA}>{leaderAName}</span>
-          {' · '}
-          <span className={styles.legendB}>{leaderBName}</span>
-        </span>
+        {isCohortShape ? (
+          <span className={styles.legendCohort}>
+            {(populated[0].series ?? []).map((s) => (
+              <span
+                key={s.actorId}
+                className={styles.legendCohortEntry}
+                style={{ ['--actor-color' as string]: s.color } as CSSProperties}
+              >
+                {s.name}
+              </span>
+            ))}
+          </span>
+        ) : (
+          <span className={styles.legend}>
+            <span className={styles.legendA}>{leaderAName}</span>
+            {' · '}
+            <span className={styles.legendB}>{leaderBName}</span>
+          </span>
+        )}
       </div>
       <div className={`responsive-grid-3 ${styles.grid}`}>
         {populated.map(m => (

src/dashboard/src/components/reports/ReportView.tsx

@@ -25,7 +25,8 @@ import { CohortVerdict } from './CohortVerdict';
 import { RunStrip } from './RunStrip';
 import { MetricSparklines } from './MetricSparklines';
 import { ReportSideNav, type SideNavItem } from './ReportSideNav';
-import { collectMetricSeries, collectRunStripData } from './reports-shared';
+import { collectMetricSeries, collectMetricSeriesCohort, collectRunStripData } from './reports-shared';
+import { getActorColorVar } from '../../hooks/useGameState';
 import styles from './ReportView.module.scss';
 
 /**
@@ -388,7 +389,16 @@ export function ReportView({ state, verdict, reportSections }: ReportViewProps)
   // Strip + sparklines respect the picker so swapping actors rotates
   // every panel that mentions A/B in lockstep.
   const stripCells = useMemo(() => collectRunStripData(turns), [turns]);
+  // Pair-mode metric series (A vs B). Used when isPairFocus is on for
+  // cohort runs and for all 2-actor pair runs.
   const metricSeries = useMemo(() => collectMetricSeries(state, aId, bId), [state, aId, bId]);
+  // Cohort-mode metric series (one polyline per actor). Used when the
+  // pair-focus toggle is off for cohort runs so the sparklines render
+  // all N actors at once instead of just the picked pair.
+  const cohortMetricSeries = useMemo(
+    () => (isNActor ? collectMetricSeriesCohort(state, getActorColorVar) : null),
+    [isNActor, state],
+  );
   const sideNavItems = useMemo<SideNavItem[]>(() => {
     // Order now matches the new section layout: turn-by-turn content
     // at the top (Strip → Metrics → Trajectory → individual turns →
@@ -618,6 +628,15 @@ export function ReportView({ state, verdict, reportSections }: ReportViewProps)
         </section>
       )}
 
+      {/* Cohort sparklines: N polylines per metric card when the
+          pair-focus toggle is off, replacing the 2-color A/B overlay
+          with the full cohort trajectory. */}
+      {isNActor && !isPairFocus && cohortMetricSeries && (
+        <section id="sparklines">
+          <MetricSparklines metrics={cohortMetricSeries} leaderAName="" leaderBName="" />
+        </section>
+      )}
+
       {/* Commander personality arcs. Shown once per side once there's at
           least one turn of drift data, so the user can visually inspect
           how each commander's HEXACO evolved across the run. Data comes

src/dashboard/src/components/reports/reports-shared.ts

@@ -32,13 +32,25 @@ export function classifyTurn(
   return aFirstTitle === bFirstTitle ? 'shared' : 'divergent';
 }
 
-/** Series shape consumed by MetricSparklines. */
+/** Per-actor entry in the cohort metric series. */
+export interface CohortMetricSeriesPoint {
+  actorId: string;
+  name: string;
+  color: string;
+  points: Array<{ turn: number; value: number }>;
+}
+
+/** Series shape consumed by MetricSparklines. The `a` / `b` pair is the
+ *  pair-mode rendering shape kept for back-compat; when `series` is
+ *  populated MetricSparklines branches into N-polyline cohort mode and
+ *  ignores `a` / `b`. */
 export interface MetricSeries {
   id: 'population' | 'morale' | 'foodMonthsReserve' | 'powerKw' | 'infrastructureModules' | 'scienceOutput';
   label: string;
   unit?: string;
   a: Array<{ turn: number; value: number }>;
   b: Array<{ turn: number; value: number }>;
+  series?: CohortMetricSeriesPoint[];
 }
 
 const METRIC_DEFS: Array<{ id: MetricSeries['id']; label: string; unit?: string }> = [
@@ -98,6 +110,42 @@ export function collectMetricSeries(
   }));
 }
 
+/**
+ * Cohort variant: builds the six-metric series for every actor in the
+ * run. Each MetricSeries carries a populated `series` array (one entry
+ * per actor) so MetricSparklines can render N polylines per card instead
+ * of the pair-mode A/B overlay. Leaves `a` / `b` empty since the cohort
+ * card ignores them when `series` is present.
+ */
+export function collectMetricSeriesCohort(
+  state: GameState,
+  paletteFor: (idx: number) => string,
+): MetricSeries[] {
+  const perActor = state.actorIds.map((actorId, idx) => {
+    const events = state.actors[actorId]?.events as Array<{ turn?: number; data: Record<string, unknown> }> | undefined;
+    return {
+      actorId,
+      idx,
+      name: state.actors[actorId]?.leader?.name ?? actorId,
+      color: paletteFor(idx),
+      events,
+    };
+  });
+  return METRIC_DEFS.map(def => ({
+    id: def.id,
+    label: def.label,
+    unit: def.unit,
+    a: [],
+    b: [],
+    series: perActor.map(p => ({
+      actorId: p.actorId,
+      name: p.name,
+      color: p.color,
+      points: p.events ? seriesForSide(p.events, def.id) : [],
+    })),
+  }));
+}
+
 export interface RunStripCell {
   turn: number;
   time?: number;