refactor: split background job styles

CHANGELOG.md

@@ -8,6 +8,7 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 ## [Unreleased]
 
 ### Changed
+- **Background-job stylesheet split.** Job history and retry-panel rules now live in `static/css/background-jobs.css`.
 - **Resource diagnostics stylesheet split.** Performance-panel styles now live in `static/css/resource-diagnostics.css`
   and are loaded with the same release cache-busting version as the core stylesheet.
 - **Audiobook cast export extraction.** Markdown serialization and legacy page-stamping migration now live in

TODO.md

@@ -137,6 +137,7 @@ architecture change: the larger Audiobook/Rehearser/style split.
 - [x] Extract Audiobook parsing primitives and speaker-heuristic constants into `audiobook-parse.js`.
 - [x] Extract Audiobook cast serialization and page-stamping helpers into `audiobook-cast.js`.
 - [x] Split the Performance/resource diagnostic styles into `static/css/resource-diagnostics.css`.
+- [x] Split background-job history and retry-panel styles into `static/css/background-jobs.css`.
 - [ ] Split `style.css` by feature.
 - [ ] Do not migrate to TypeScript or rewrite the frontend until behavior is covered by tests.
 

VERSION

@@ -1 +1 @@
-1.24.34
+1.24.35

docs/ARCHITECTURE.md

@@ -37,6 +37,7 @@ Done incrementally as global-scope ordered files (no ES-module change needed)
 - ✅ `audiobook-parse.js` — dialogue detection, dehyphenation, and speaker-heuristic constants; the casting pipeline remains in `audiobook.js`.
 - ✅ `audiobook-cast.js` — cast Markdown export and legacy page-stamping migration helpers; live casting remains in `audiobook.js`.
 - ✅ `static/css/resource-diagnostics.css` — isolated Performance/resource diagnostic panel styles.
+- ✅ `static/css/background-jobs.css` — isolated background-job history and retry-panel styles.
 - ✅ `rehearser-train.js` — transcript normalization, LCS comparison, and word-level training feedback; microphone/state wiring remains in `rehearser.js`.
 - ✅ `rehearser-library.js` — SQLite persistence helpers and IndexedDB migration; import/export and auto-save remain
   in `rehearser.js` until their UI/event-handler dependencies are isolated.

static/css/background-jobs.css

@@ -0,0 +1,14 @@
+/* ── Background-job history panel ─────────────────────────────────────────── */
+.background-jobs-list { display: flex; flex-direction: column; }
+.background-job-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 12px; }
+.background-job-row:last-child { border-bottom: none; }
+.background-job-main { min-width: 0; display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; }
+.background-job-main strong { font-size: 13px; }
+.background-job-main code { color: var(--subtext); font-size: 10px; }
+.background-job-detail, .background-job-meta { grid-column: 1 / -1; color: var(--subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.background-job-artifact { grid-column: 1 / -1; color: var(--accent); font-size: 11px; }
+.background-job-row.is-error .background-job-detail { color: var(--red); }
+.background-job-row.is-done .background-job-meta { color: var(--green, #22c55e); }
+.background-job-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
+.background-job-retry-note { color: var(--subtext); font-size: 11px; white-space: nowrap; }
+@media (max-width: 640px) { .background-job-row { align-items: flex-start; flex-direction: column; gap: 8px; } .background-job-actions { width: 100%; justify-content: space-between; } }

static/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="color-scheme" content="light dark">
   <meta name="theme-color" content="#2563EB">
-  <meta name="app-version" content="1.24.34">
+  <meta name="app-version" content="1.24.35">
   <link rel="manifest" href="/manifest.webmanifest">
   <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/static/icon.svg">
@@ -27,8 +27,9 @@
 
   <!-- ── Core styles (local — no CDN dependency for first paint) ────────── -->
   <link rel="stylesheet" href="/static/vendor/mdi/materialdesignicons.min.css">
-  <link rel="stylesheet" href="/static/style.css?v=1.24.34">
-  <link rel="stylesheet" href="/static/css/resource-diagnostics.css?v=1.24.34">
+  <link rel="stylesheet" href="/static/style.css?v=1.24.35">
+  <link rel="stylesheet" href="/static/css/resource-diagnostics.css?v=1.24.35">
+  <link rel="stylesheet" href="/static/css/background-jobs.css?v=1.24.35">
 
 
   <!-- ── Flag icons — non-blocking (loaded async, icons appear after JS) ── -->
@@ -393,7 +394,7 @@ window.toggleNavTree = function(treeId, chevronId) {
 </script>
 
 <!-- loader.js: fetches sections → loads JS modules → removes skeleton -->
-<script src="/static/loader.js?v=1.24.34"></script>
+<script src="/static/loader.js?v=1.24.35"></script>
 
 </body>
 </html>

static/style.css

@@ -3734,19 +3734,6 @@ code { background: var(--panel); border-radius: 4px; padding: 1px 5px; font-fami
 .bench-history-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--subtext); cursor: pointer; }
 .perf-history-list { display: flex; flex-direction: column; gap: 0; overflow-x: auto; }
 .perf-history-empty { font-size: 13px; color: var(--subtext); padding: 16px 0; }
-.background-jobs-list { display: flex; flex-direction: column; }
-.background-job-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 12px; }
-.background-job-row:last-child { border-bottom: none; }
-.background-job-main { min-width: 0; display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; }
-.background-job-main strong { font-size: 13px; }
-.background-job-main code { color: var(--subtext); font-size: 10px; }
-.background-job-detail, .background-job-meta { grid-column: 1 / -1; color: var(--subtext); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.background-job-artifact { grid-column: 1 / -1; color: var(--accent); font-size: 11px; }
-.background-job-row.is-error .background-job-detail { color: var(--red); }
-.background-job-row.is-done .background-job-meta { color: var(--green, #22c55e); }
-.background-job-actions { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
-.background-job-retry-note { color: var(--subtext); font-size: 11px; white-space: nowrap; }
-@media (max-width: 640px) { .background-job-row { align-items: flex-start; flex-direction: column; gap: 8px; } .background-job-actions { width: 100%; justify-content: space-between; } }
 .perf-history-row { display: grid; grid-template-columns: 118px minmax(96px,.8fr) 34px 72px 72px minmax(190px,1.4fr) 92px 82px 68px 70px 24px; min-width: 1010px; gap: 0 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
 .perf-history-row:last-child { border-bottom: none; }
 .perf-history-head { font-size: 11px; color: var(--subtext); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }