Use browser theme validation and an offline appearance bootstrap

.github/workflows/quality.yml

@@ -84,6 +84,9 @@ jobs:
     - name: Install Playwright browser dependencies
       run: pnpm exec playwright install --with-deps chromium
 
+    - name: Verify browser-computed theme contrast
+      run: pnpm theme:contrast
+
     - name: Rebuild native modules for Electron smoke tests
       run: pnpm run electron:rebuild
 

AGENTS.md

@@ -14,7 +14,7 @@
 - Lint: `pnpm lint`; Type-check: `pnpm typecheck` (runs per package). The root lint command is the single entry point for blocking Oxlint and Knip checks, residual ESLint, and advisory anti-slop checks.
 - Detailed advisory output: `pnpm lint:ox:extra:details`; accessibility scan: `pnpm a11y:scan` (install Chromium once with `pnpm exec playwright install chromium`); opt-in render evidence: `pnpm perf:scan`.
 - Tests (E2E): `pnpm test`, `pnpm test:ui`, CI configs in `playwright.ci*.config.ts`.
-- Themes: `pnpm theme:contrast` gates the 15 batch themes' token pairs in `frontend/src/styles/tokens/colors.css` (text/UI/terminal contrast, high-contrast overlay, CVD separation; `--all` reports the original twelve, `--themes a,b` picks themes, `--markdown --cvd` prints PR tables — see `scripts/README.md`); `pnpm theme:screenshots` regenerates `screenshots/themes/batch/`.
+- Themes: `pnpm theme:contrast` gates every theme's muted text plus the 15 batch themes' token pairs in `frontend/src/styles/tokens/colors.css` (text/UI/terminal contrast, high-contrast overlay, CVD separation; `--all` reports all themes without enforcing thresholds, `--themes a,b` picks themes, `--markdown --cvd` prints PR tables — see `scripts/README.md`); `pnpm theme:screenshots` regenerates `screenshots/themes/batch/`.
 - Main unit tests (if added): `pnpm --filter main test`, coverage: `pnpm --filter main run test:coverage`.
 - Releases must follow `docs/RELEASE_INSTRUCTIONS.md` and run from a clean `main` checkout whose `HEAD` matches `origin/main`.
 

frontend/index.html

@@ -9,37 +9,9 @@
     <link rel="preload" href="/fonts/SymbolsNerdFontMono-Regular.woff2" as="font" type="font/woff2" crossorigin />
     <title>Pane</title>
     <script>
-      const themeClasses = {
-        'light': ['light'],
-        'light-rounded': ['light', 'light-rounded'],
-        'dark': ['dark'],
-        'oled': ['dark', 'oled'],
-        'dusk': ['dark', 'dusk'],
-        'dusk-oled': ['dark', 'dusk', 'dusk-oled'],
-        'forge': ['dark', 'forge'],
-        'ember': ['dark', 'ember'],
-        'aurora': ['dark', 'aurora'],
-        'night-owl': ['dark', 'night-owl'],
-        'night-owl-oled': ['dark', 'night-owl', 'night-owl-oled'],
-        'terracotta': ['dark', 'terracotta'],
-        'synthwave': ['dark', 'synthwave'],
-        'acid': ['dark', 'acid'],
-        'tokyo-rain': ['dark', 'tokyo-rain'],
-        'folio': ['light', 'folio'],
-        'newsprint': ['light', 'newsprint'],
-        'walnut': ['dark', 'walnut'],
-        'amber-crt': ['dark', 'amber-crt'],
-        'teletype': ['light', 'teletype'],
-        'dot-matrix': ['dark', 'dot-matrix'],
-        'haar': ['light', 'haar'],
-        'abyss': ['dark', 'abyss'],
-        'understory': ['dark', 'understory'],
-        'colorblind-safe': ['dark', 'colorblind-safe'],
-        'low-fatigue': ['dark', 'low-fatigue'],
-        'high-legibility': ['light', 'high-legibility'],
-      };
+      const themeClasses = __PANE_THEME_CLASSES__;
       try {
-        const defaults = { appearanceMode: 'system', theme: 'light-rounded', systemLightTheme: 'light-rounded', systemDarkTheme: 'dark' };
+        const defaults = __PANE_DEFAULT_APPEARANCE__;
         const snapshot = window.electronAPI?.appearanceSnapshot;
         let cached;
         try {

frontend/src/index.css

@@ -685,7 +685,7 @@ body.understory {
 
 .thinking-content blockquote {
   color: inherit;
-  border-color: rgba(var(--color-interactive-rgb), 0.2);
+  border-color: rgb(var(--color-interactive-rgb) / 0.2);
   @apply pl-3 py-1;
 }