Updated per CodeRabbit review

Author: jimbethancourt

AGENTS.md

@@ -18,7 +18,11 @@ in `out/` is served by any static host (GitHub Pages, GitLab Pages, Bitbucket).
   of the breadcrumbs' left-edge alignment) — palettes selected in
   `app/globals.css` via `:root:has(#rf-theme-…:checked)` +
   `prefers-color-scheme`; an inline pre-paint script in `app/layout.jsx`
-  only restores/persists the choice (CSP-hashed by the build). Guards:
+   only restores/persists the choice (CSP-hashed by the build). Chart
+  legends are canvas-drawn, so they can't follow the CSS switch:
+  `resolveLegendTextColor`/`bindThemeChartRedraw` in `lib/report-view.js`
+  resolve a per-theme legend color (>= 4.5:1 on each `--bg-color`) and
+  redraw live charts on radio/`prefers-color-scheme` changes. Guards:
   `tests/unit/theme-css.test.js` (the two dark blocks must stay
   byte-identical; all hex colors live in the palette blocks; dark palette
   passes the same WCAG AA math as `tests/unit/css-a11y.test.js`)

lib/report-view.js

@@ -367,13 +367,109 @@ export function bindSectionNavLinks(root) {
 // Chart.js bubble charts per disharmony.
 // ---------------------------------------------------------------------------
 
+// Legend text colors mirroring --muted-color of each palette in
+// app/globals.css. The chart canvas is transparent, so legend text sits on
+// --bg-color (#ffffff light / #10161d dark); each value keeps >= 4.5:1
+// contrast against its own background (WCAG 1.4.3), which no single color
+// can achieve on both.
+const CHART_LEGEND_TEXT = Object.freeze({
+  light: '#5c6b7a', // 5.5:1 on #ffffff
+  dark: '#9fb0c0'   // 8.2:1 on #10161d
+});
+
+/**
+ * Returns 'light' or 'dark' for the active palette, mirroring the pure-CSS
+ * selection in app/globals.css: the explicit radios win, the system radio
+ * defers to prefers-color-scheme, and anything else is light.
+ *
+ * @returns {'light'|'dark'} Active palette name.
+ */
+export function activeChartTheme() {
+  const doc = typeof document === 'undefined' ? null : document;
+  if (doc) {
+    const dark = doc.getElementById('rf-theme-dark');
+    const light = doc.getElementById('rf-theme-light');
+    if (dark && dark.checked) return 'dark';
+    if (light && light.checked) return 'light';
+  }
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    try {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
+    } catch {
+      // Media query evaluation unavailable: fall through to light.
+    }
+  }
+  return 'light';
+}
+
+/**
+ * Legend text color for the currently active theme (>= 4.5:1 against the
+ * theme's --bg-color). Resolved at draw time so a redraw picks up theme
+ * switches.
+ *
+ * @returns {string} Hex color for legend item text.
+ */
+export function resolveLegendTextColor() {
+  return CHART_LEGEND_TEXT[activeChartTheme()] || CHART_LEGEND_TEXT.light;
+}
+
+// Live Chart.js instances by canvas, so theme changes can redraw the
+// canvas-drawn legend text (the palette switch itself is pure CSS).
+const bubbleCharts = new Map();
+
+/**
+ * Redraws every live bubble chart so legend text re-resolves against the
+ * newly active theme. Entries whose canvas left the DOM (report re-rendered
+ * or torn down) are pruned instead of redrawn.
+ *
+ * @returns {void}
+ */
+function redrawChartsForTheme() {
+  for (const [canvas, chart] of bubbleCharts) {
+    if (!canvas.isConnected) {
+      bubbleCharts.delete(canvas);
+      continue;
+    }
+    if (chart && typeof chart.update === 'function') chart.update();
+  }
+}
+
+/**
+ * Binds one delegated listener redrawing charts on theme changes: the
+ * rf-theme radios (components/theme-toggle.jsx) for explicit switches and
+ * prefers-color-scheme for the system radio. Idempotent per document.
+ *
+ * @returns {void}
+ */
+export function bindThemeChartRedraw() {
+  const doc = typeof document === 'undefined' ? null : document;
+  if (!doc || doc.documentElement.hasAttribute('data-rf-theme-redraw-bound')) return;
+  doc.documentElement.setAttribute('data-rf-theme-redraw-bound', '');
+  doc.addEventListener('change', event => {
+    const target = event.target;
+    if (target && target.name === 'rf-theme') redrawChartsForTheme();
+  });
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    try {
+      window.matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', redrawChartsForTheme);
+    } catch {
+      // Older engines without MQL listeners: explicit radios still redraw.
+    }
+  }
+}
+
 export function initBubbleChart(canvas, title, chartData) {
     const ChartLib = window.Chart;
     if (!ChartLib) {
         console.warn('Chart.js not loaded');
         return;
     }
-    new ChartLib(canvas.getContext('2d'), {
+    // Chart.js refuses a canvas that still backs a live instance; drop the
+    // previous chart (and its registry entry) before re-initializing.
+    const previous = bubbleCharts.get(canvas);
+    if (previous && typeof previous.destroy === 'function') previous.destroy();
+    const chart = new ChartLib(canvas.getContext('2d'), {
         type: 'bubble',
         data: {
             datasets: [{
@@ -399,17 +495,17 @@ export function initBubbleChart(canvas, title, chartData) {
                         // Chart.js renders each legend item's text from
                         // item.fontColor (plugin.legend.js); labels.color only
                         // feeds the DEFAULT generateLabels, which this chart
-                        // overrides below. The canvas is transparent, so the
-                        // text sits on the page background (#ffffff light /
-                        // #10161d dark): one gray for both, the balanced
-                        // midpoint (~4.3:1 on each; no single gray can hit
-                        // 4.5:1 on both).
+                        // overrides below. The color is resolved per draw so
+                        // the theme-change redraw (bindThemeChartRedraw)
+                        // re-syncs it; each palette's value keeps >= 4.5:1
+                        // against its --bg-color (#ffffff light / #10161d
+                        // dark), which no single color can do for both.
                         generateLabels: () =>
                             ['High Priority (1)', 'Medium Priority', 'Low Priority (max)'].map((label, i) => ({
                                 text: label,
                                 fillStyle: ['rgb(235, 64, 52)', 'rgb(137, 119, 74)', 'rgb(39, 174, 96)'][i],
                                 strokeStyle: ['rgb(235, 64, 52)', 'rgb(137, 119, 74)', 'rgb(39, 174, 96)'][i],
-                                fontColor: '#7a7a7a',
+                                fontColor: resolveLegendTextColor(),
                                 lineWidth: 1,
                                 hidden: false,
                                 index: i
@@ -442,6 +538,7 @@ export function initBubbleChart(canvas, title, chartData) {
             }
         }
     });
+    bubbleCharts.set(canvas, chart);
 }
 
 export function initDisharmonyCharts(disharmonies) {
@@ -596,6 +693,9 @@ export async function enhanceReport(root, data) {
       if (event.key === 'Escape') hidePopup();
     });
   }
+  // Theme switches are pure CSS, but chart legends are canvas-drawn: bind
+  // their redraw once so the legend color keeps >= 4.5:1 in every palette.
+  bindThemeChartRedraw();
   bindPopupHandlers(root);
 
   // Menu links: explicit scrolling because the report renders too late for