From 52a00370eaac16dba944e7142c010e2d9abbe946 Mon Sep 17 00:00:00 2001
From: Vito <vito.sansevero@gmail.com>
Date: Tue, 27 Oct 2026 19:15:37 +0000
Subject: [PATCH] test(system): prove Diagnostics & logs against the concept
 and every legacy System capability's owner (#329, PR 3) (#387)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(logs): declare the compressed length so a log download finishes

The gzip middleware compressed a text body but kept the handler's declared
Content-Length (the uncompressed size), so a browser waited for bytes that
never came: downloading any log over 1 KB hung, in the workspace and on the
admin page. The middleware now drops a declared length before compressing.

Part of #329

* feat(system): show Diagnostics & logs natively and retire the hand-off panel

System › Diagnostics & logs is native (D109, D110): the concept's
Diagnostics surface with the live database, source, Viewer.js and renderer
lines, Run checks (the shared Health report), the diagnostic report, Inspect
and the confirmed test link; and the Logs surface with the minimum-level
viewer, Lines 1-500, statistics, the log download, the runtime level and
console setting saved by Save preferences, the log files with their
downloads, Review log cleanup (the rotated_logs maintenance plan, no backup
box, Listed files) and a confirmed Clear all logs.

D94's hand-off panel, SECTION_HANDOFFS and the undelivered runtime adapter
are gone. The browser server logs into its own temporary root.

Part of #329

* test(system): compare Diagnostics & logs with the concept

System › Diagnostics & logs and its log cleanup review are compared with the
concept (app.js 694–695 and maintenancePlan("rotated logs")) in both themes at
1600x1100 and 390x844, with D109 and D110 (and D100 for the review) as the only
mapped differences, a 320-wide select check and a mutation check.

The fixture gains a concept seed mode (the concept's four log lines, a 1.4 MB
active log with three rotated copies, console logging off), and the plan
dialog's measureReview and mapPlanConcept move unchanged into
concept-inventory.mjs for Maintenance and this review.

The comparison found that the Database line read a report key that does not
exist (database_info.size_bytes) and so always showed "0 bytes"; it now reads
database_size_bytes, the key get_database_info() returns.

Part of #329

* test(system): prove every legacy System capability has an owner

TESTING.md gains "Legacy System capability coverage": every System capability
of the legacy admin and gallery pages with its anchor on main, owner, status
(covered, kept in legacy or approved removal), native control and the exact
title of the test that proves it.

tests/vendor/legacy-coverage.test.mjs (with tools/vendor/legacy-coverage.mjs)
fails on a row with no owner, an unknown status, a malformed native control, a
control on a row that is not covered, or a test title its file does not
declare; a title only in a comment does not count. workspace-system.spec's
"every covered legacy System capability has its native control" opens each
covered row's section and finds the control by role and accessible name.

Versus the design's table: the anchors are re-checked against main, "Run
health checks" is on Maintenance (D123), not Overview, Diagnostics run is
proven by "Run checks opens the shared Health report", and the export rows
repeat their test title instead of "(same as above)".

Part of #329

* fix(system): confirm Clear all logs on a fresh file list and record coverage

Review fixes for the Diagnostics & logs section:
- Clear all logs reads the log files again before it confirms, so the
  dialog names the copies it deletes now (a list it cannot read gives the
  general sentence, never an old count); Refresh reads the files too.
- Runtime values that cannot be read stay disabled and say so.
- Create test link holds its button until the write answered, so a second
  press cannot write a second record.
- The Lines field names its range.
- The browser server builds its logger in its own root, so no log file is
  ever opened in another folder; the fixture closes every directory scan
  and replaces a link instead of writing through it.
- system.mjs drops the unused section fallback; frontend coverage floors
  recorded with coverage:update (system-diagnostics.mjs 97.5% lines).

Part of #329

* fix(system): read the database size the report sends

The Database line read database_info.size_bytes, a key the report does
not have (get_database_info answers database_size_bytes), so it always
read "Readable · 0 bytes · N images". The browser test now requires a
non-zero size. Found by PR 3's concept comparison.

Part of #329

* test(system): require a running test and a control for every covered capability

Review fixes for the legacy coverage proof:

- A title declared only with test.skip, .fixme or .fail no longer proves a
  row (.only and .slow still do).
- Every covered row names its native control, except the rows in
  CONTROL_EXEMPTIONS, each with its reason (today only the gallery per-image
  auto-tag row, owned by the Images selection bar). The browser test asserts
  that the covered rows without a control are exactly the exemptions.
- JavaScript comments are stripped across the whole source, wherever a block
  comment starts, skipping strings, template literals and regular
  expressions. A Python def test_ counts only at function or method
  indentation and outside comments and docstrings.
- A control name several rows share ("Review plan", "Review options",
  "Refresh") is looked up inside the row the table names (· in "<row>").
- The diagnostics comparison records each select's chosen option, so a wrong
  default level is caught.

Part of #329
---
 TESTING.md                                    |  99 +++++
 tests/browser/concept-inventory.mjs           |  70 ++++
 .../system-diagnostics-concept.spec.mjs       | 396 ++++++++++++++++++
 .../system-maintenance-concept.spec.mjs       |  70 +---
 tests/browser/workspace-system.spec.mjs       |  43 ++
 .../browser/workspace_diagnostics_fixture.py  |  28 +-
 tests/vendor/legacy-coverage.test.mjs         | 116 +++++
 tools/vendor/legacy-coverage.mjs              | 215 ++++++++++
 8 files changed, 968 insertions(+), 69 deletions(-)
 create mode 100644 tests/browser/system-diagnostics-concept.spec.mjs
 create mode 100644 tests/vendor/legacy-coverage.test.mjs
 create mode 100644 tools/vendor/legacy-coverage.mjs

diff --git a/TESTING.md b/TESTING.md
index 1b56e9b..ffcfde2 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -3844,6 +3844,105 @@ The browser server writes its logs into `<server root>/logs`
 times, rotated copies, a link (POSIX) and a user's `.bak`, and roll the copies over; no
 test reads or deletes a real log folder.
 
+`tests/browser/system-diagnostics-concept.spec.mjs` compares the section and its log
+cleanup review with the concept (dark and light, 1600x1100 and 390x844, no page scroll;
+both selects show their whole option at 320 wide). The fixture's `{mode: "concept"}` seed
+reproduces the concept's Logs sample: only its four buffer lines, a 1.4 MB active log with
+three rotated copies and console logging off, so those values are compared as the concept
+prints them. `mapDiagnosticsConcept` applies only D109 and D110, and `mapCleanupConcept`
+D100 (the shared `mapPlanConcept`) with D109's rule for this plan (no backup box, "Not
+needed: no library record changes", "Listed files"). The mutation check asserts that the
+unmapped difference is exactly the deviated paths. The comparison found that the Database
+line read `database_info.size_bytes`, a key the report does not have, so it always said
+"0 bytes"; it reads `database_size_bytes`, the key `get_database_info()` returns.
+
+### Legacy System capability coverage
+
+Every System capability of the legacy admin and gallery pages has an owner (#249 System
+S12, #329). Status is `covered` (a native control replaces it), `kept in legacy` (it stays
+on the legacy page, which keeps working) or `approved removal` (a ruling retired it). Native
+control is `` `<section>` · <role> · "<accessible name>" ``, `<section>` a System hash id
+and `<role>` one of button, combobox, switch, slider, spinbutton, textbox, group, status or
+term, followed by ` · in "<row title>"` when several rows of the section share the name.
+Every `covered` row names one, except the rows in `CONTROL_EXEMPTIONS`
+(`tools/vendor/legacy-coverage.mjs`), each with its reason: today only "Gallery per-image
+auto-tag / review", which the Images selection bar owns, not a System section. A row that
+is not `covered` names none (`—`). Test is the exact title of a test that runs, then its
+file. Anchors are line numbers on `main` at this PR.
+
+`tests/vendor/legacy-coverage.test.mjs` fails on a row with any of these problems:
+- no owner, or a status outside the three;
+- a malformed Native control cell;
+- a covered row without a control (unless exempt), or a control on a row that is not
+  covered;
+- a test title its file does not declare: `test(` or `it(` (`.only` and `.slow` count),
+  or a `def test_` at function or method indentation;
+- a title whose test is only declared with `.skip`, `.fixme` or `.fail`.
+
+A title that appears only in a comment or a Python docstring does not count. CI running
+those tests green is what proves them. `every covered legacy System capability has its
+native control` (workspace-system.spec) opens each covered row's section and finds the
+control by role and accessible name, inside its row when the cell names one. The shared
+"Review plan" of the per-operation review row and the Sources "Refresh" of the monitoring
+list stay unscoped: any row's control proves them.
+
+| Capability | Legacy anchor | Owner | Status | Native control | Test |
+| --- | --- | --- | --- | --- | --- |
+| Image scan directories add/remove | `admin.html:377–390`; `admin.js:200,1273–1323` | S4 Sources | covered | `sources` · button · "+ Add source" | Add source validates on the server, then marks the host draft dirty; Save persists (workspace-system-sources.spec.mjs) |
+| Currently monitoring list + Refresh | `admin.html:392–400`; `admin.js:1032` | S4 Sources | covered | `sources` · button · "Refresh" | watching only with a live observer; restart pending otherwise (workspace-system-sources.spec.mjs) |
+| Monitoring enabled | `py/config.py:212,248` | S4 Sources | covered | `sources` · switch · "Watch for new outputs" | Watch for new outputs saves monitoring_enabled; a restart applies it (workspace-system-sources.spec.mjs) |
+| Search results auto-hide `result_timeout` | `admin.html:407–412` | S3 Appearance | covered | `appearance` · spinbutton · "Node search auto-hide (seconds)" | host fields round-trip through /settings with revision (workspace-system.spec.mjs) |
+| Web UI display mode | `admin.html:414–422` | S3 Appearance | covered | `appearance` · combobox · "Open from ComfyUI" | host fields round-trip through /settings with revision (workspace-system.spec.mjs) |
+| Infinite scrolling default | `admin.html:424–430`; `admin.js:689–727` | Legacy prompt list (README continuous browsing); read-only in the report | kept in legacy | — | shouldLoadMore asks for the next page only near the bottom with pages left (list-state.test.js) |
+| Worker threads | `admin.html:437–445` | S4 Sources | covered | `sources` · slider · "Worker threads" | worker range max is cpu_count (workspace-system-sources.spec.mjs) |
+| LoraManager badge, enable, path, trigger words, CivitAI key, clear key | `admin.html:448–490`; `admin.js:1052–1156` | S10 Integrations | covered | `integrations` · switch · "LoraManager integration" | LoRA rows show detected / enabled / cache-loaded separately (workspace-system-integrations.spec.mjs) |
+| LoRA data import with progress | `admin.html:492–498,517–541`; `admin.js:1157` | S10 Integrations | covered | `integrations` · button · "Review import" | Review import shows replacement, blocked items and network effects with the backup box; Start opens the job (D107) (workspace-system-integrations.spec.mjs) |
+| Statistics | `admin.html:159`; `admin.js:1627` | S2 Overview | covered | `overview` · button · "Explore" | statistics dialog lists runs by category and library totals (workspace-system.spec.mjs) |
+| Export components JSON `/export` | `admin.html:163`; `admin.js:1607`; `py/api/prompts.py:238` | S9 Backup & export | covered | `backups` · button · "Export all prompts JSON" | Export JSON downloads /library/export; secondary buttons download all prompts (/export) and /pairs/export (D103) (workspace-system-backups.spec.mjs) |
+| Saved pairs export | `py/api/pairs.py:84` | S9 Backup & export | covered | `backups` · button · "Export saved pairs JSON" | Export JSON downloads /library/export; secondary buttons download all prompts (/export) and /pairs/export (D103) (workspace-system-backups.spec.mjs) |
+| Library export | `py/api/library.py:223` | S9 Backup & export | covered | `backups` · button · "Export JSON" | Export JSON downloads /library/export; secondary buttons download all prompts (/export) and /pairs/export (D103) (workspace-system-backups.spec.mjs) |
+| Diagnostics run | `admin.html:171,659`; `admin.js:1984` | S12 Diagnostics | covered | `diagnostics` · button · "Run checks" | Run checks opens the shared Health report (workspace-system-diagnostics.spec.mjs) |
+| Synthetic image-link test | `admin.html:662`; `admin.js:2101` | S12 Diagnostics | covered | `diagnostics` · button · "Create test link…" | Create test link confirms first and names the prompt (workspace-system-diagnostics.spec.mjs) |
+| Maintenance cleanup_duplicates, vacuum, cleanup_orphaned_images, prune_orphaned_prompts | `admin.html:692–748`; `admin.js:1834` | S6/S7 Maintenance | covered | `maintenance` · button · "Review plan" · in "Duplicate prompt text" | Apply reviewed operation closes, toasts, opens the job in Activity (workspace-system-maintenance.spec.mjs) |
+| Maintenance check_hash_duplicates, check_consistency | `admin.html:692–748`; `admin.js:1834` | S2 Health report (Maintenance notice, D123) | covered | `maintenance` · button · "Run health checks" | Run health checks opens Health report and updates metric 4 (workspace-system.spec.mjs) |
+| Maintenance statistics (database info) | `admin.html:692–748`; `admin.js:1834` | S12 Diagnostics | covered | `diagnostics` · term · "Database" | meta-grid shows real database and source status, the pinned Viewer.js version and the host renderers (workspace-system-diagnostics.spec.mjs) |
+| Maintenance select all / clear all / run | `admin.html:754–762`; `admin.js:1822–1833` | S7 per-operation review | covered | `maintenance` · button · "Review plan" | plan dialog shows the server's scope, protected, backup policy and media lines with the backup box (D100); Cancel writes nothing (workspace-system-maintenance.spec.mjs) |
+| Prompt cleanup `/cleanup` | `py/api/admin.py:620` | S6/S7 Maintenance | covered | `maintenance` · button · "Review plan" · in "Duplicate prompt text" | test_duplicate_prompts_plan_counts_the_legacy_groups (test_maintenance_plans.py) |
+| Database backup | `admin.html:179,824`; `admin.js:2139,2454` | S9 Backup & export | covered | `backups` · button · "Back up" | Back up downloads through the api client and revokes the object URL (D103) (workspace-system-backups.spec.mjs) |
+| Restore from file | `admin.html:183,616–642`; `admin.js:2177–2248` | S8/S9 Backup & export | covered | `backups` · button · "Review restore…" | Review restore stages the chosen file and shows the real summary with the backup box (D105) (workspace-system-backups.spec.mjs) |
+| Metadata scan with progress, cancel, pill | `admin.html:187,805–865`; `admin.js:2336–2500` | S4 Sources | covered | `sources` · button · "Review scan" | Review scan opens the shared Review metadata scan with all sources (workspace-system-sources.spec.mjs) |
+| Rescan-required notice + dismiss | `admin.html:1367–1410`; `admin.js:991–1011` | S4 Sources | covered | `sources` · button · "Later" | notice Later persists the 3.2.0 dismissal (pm_update_notice_dismissed) without scanning (workspace-system-sources.spec.mjs) |
+| View logs with level and limit | `admin.html:195,885–907,974`; `admin.js:2579–2641` | S12 Logs | covered | `diagnostics` · combobox · "Level" | level filter is minimum-level over all six choices (workspace-system-diagnostics.spec.mjs) |
+| Log statistics | `admin.html:921–941`; `admin.js:2512` | S12 Logs | covered | `diagnostics` · status · "Log statistics" | log statistics show entries, errors, warnings, files and size (workspace-system-diagnostics.spec.mjs) |
+| Log files list and download | `admin.html:910,982–985`; `admin.js:2545,2642,2679` | S12 Logs | covered | `diagnostics` · button · "Download log" | each listed file downloads by its returned name and a link has no Download (workspace-system-diagnostics.spec.mjs) |
+| Clear/truncate logs | `admin.html:915`; `admin.js:2704` | S12 Logs | covered | `diagnostics` · button · "Clear all logs…" | Clear all logs states both counts, confirms first and reads everything again (workspace-system-diagnostics.spec.mjs) |
+| Rotated-log cleanup (new, #329) | — | S12 Logs | covered | `diagnostics` · button · "Review log cleanup" | Review log cleanup lists only rotated copies and keeps the rest (workspace-system-diagnostics.spec.mjs) |
+| Set log level (incl. CRITICAL), console logging | `admin.html:948–966`; `admin.js:2530,2729` | S12 Logs | covered | `diagnostics` · combobox · "Runtime log level" | runtime level (including CRITICAL) and console logging save and say they apply until the server restarts (workspace-system-diagnostics.spec.mjs) |
+| Log file_logging / max_file_size / backup_count / buffer_size | `py/api/logging_routes.py:56,285–299` | S12 Logs (read-only) | covered | `diagnostics` · group · "Log files & retention" | each listed file downloads by its returned name and a link has no Download (workspace-system-diagnostics.spec.mjs) |
+| Auto-tag model list with status | `admin.html:1095–1148`; `admin.js:3641` | S11 Auto-tagging | covered | `tagging` · combobox · "Tagging model" | model options are the four real engines with size and the description shows live status (workspace-system-tagging.spec.mjs) |
+| Auto-tag model download | `admin.html:1413–1438`; `admin.js:3680–3747`; `gallery.js:3412` | S11 Auto-tagging | covered | `tagging` · button · "Download" | Download starts the job and Activity shows it without Cancel (workspace-system-tagging.spec.mjs) |
+| Unload model | `gallery.js:3480` | S11 Auto-tagging | covered | `tagging` · button · "Unload" | Unload is enabled only while a model is loaded, and a held gate's refusal names the operation (workspace-system-tagging.spec.mjs) |
+| Tag template, WD14 thresholds, already-tagged mode | `admin.html:1150–1198`; `admin.js:3748` | S11 Auto-tagging | covered | `tagging` · combobox · "Existing tags" | defaults save through Save preferences and the Tag image dialog uses them (workspace-system-tagging.spec.mjs) |
+| Batch auto-tag output images | `admin.html:191,1210,1279–1318`; `admin.js:3748–3840` | S11 Auto-tagging | covered | `tagging` · button · "Review" | Tag output images reviews the scope and starts a batch job (workspace-system-tagging.spec.mjs) |
+| Batch review loop | `admin.html:1206,1218–1364`; `admin.js:3841–4172` | S11 + image-tagging plan | covered | `tagging` · button · "Preview tagging review" | Preview tagging review opens the Tag image dialog for the selected image (workspace-system-tagging.spec.mjs) |
+| Gallery per-image auto-tag / review | `gallery.html:601,605`; `gallery.js:3506,3674–3753` | Image-tagging plan (selection bar) | covered | — | Auto-tag selected with Apply automatically runs a job with the chosen model, thresholds and suggestion count (workspace-tagging-bulk.spec.mjs) |
+| Gallery thumbnail generation | `gallery.js:1852,1967` | S5/S7 | covered | `sources` · button · "Review options" · in "Thumbnail generation" | Start closes the dialog, toasts, and opens the job in Activity (workspace-system-sources.spec.mjs) |
+| Clear server thumbnails | `gallery.js:2175–2192` | S7 Maintenance | covered | `maintenance` · button · "Review options" · in "Thumbnail cache" | Thumbnail cache opens the S5 dialog (workspace-system-maintenance.spec.mjs) |
+| Browser cache clear | `gallery.js:2194–2207` | S7 Maintenance | covered | `maintenance` · button · "Review plan" · in "Metadata cache" | Metadata cache reviews and clears only owned browser entries when there are some (D102) (workspace-system-maintenance.spec.mjs) |
+| Refresh file listing | `gallery.js:2209` | S4 Sources | covered | `sources` · button · "Refresh" · in "Refresh files" | Refresh files calls /gallery/rescan and toasts its counts (workspace-system-sources.spec.mjs) |
+| Duplicate image scan, review, delete | `gallery.js:2234–2577` | S6/S7 Maintenance | covered | `maintenance` · button · "Find duplicates" | Find duplicates starts a job; its view links Review groups; Keep radios build a duplicate_files plan (D101) (workspace-system-maintenance.spec.mjs) |
+| Default view mode, image quality | `gallery-settings.js:26–27` | S3 Appearance | covered | `appearance` · combobox · "Default layout" | defaults apply to a new visit but not to the current view or a saved view (workspace-system.spec.mjs) |
+| Auto-load metadata, cache metadata, show file paths | `gallery-settings.js:31–33` | S3 Appearance | covered | `appearance` · switch · "Load metadata on selection" | metadata off shows an explicit load and loads once on request (workspace-system.spec.mjs) |
+| Video autoplay, mute, loop | `gallery-settings.js:40–42` | S3 Appearance | covered | `appearance` · switch · "Autoplay videos" | video defaults reach the viewer (workspace-system.spec.mjs) |
+| Image info on cards; sidebar collapsed | `gallery-settings.js:30,34` | S3 Appearance | covered | `appearance` · switch · "Show image details on cards" | added rows reach their consumers (workspace-system.spec.mjs) |
+| Reset gallery settings | `gallery.js:1813` | S3 Appearance | covered | `appearance` · button · "Reset" | reset restores defaults without touching other keys (workspace-system.spec.mjs) |
+| Lazy loading | `gallery-settings.js:25` | Legacy gallery (native always lazy) | kept in legacy | — | a legacy gallery Save keeps the workspace keys and every other stored key (gallery-settings.test.js) |
+| Results per page / grid columns / paged mode | `gallery-settings.js:28–29,35` | README continuous browsing | approved removal | — | numeric strings from <select> values are accepted and columns are clamped (gallery-settings.test.js) |
+| Startup thumbnail prompt | `gallery-settings.js:38–39`; `gallery.js:2578` | README; Overview thumbnail row | approved removal | — | thumbnail row reflects the status endpoint (workspace-system.spec.mjs) |
+| Client debug output `debugMode` | `gallery-settings.js:36` | Legacy gallery (S12-10) | kept in legacy | — | a legacy gallery Save keeps the workspace keys and every other stored key (gallery-settings.test.js) |
+| API timeout `apiTimeout` | `gallery-settings.js:37` | Legacy gallery (S12-10; read by no request) | kept in legacy | — | defaults are a complete, sane settings object (gallery-settings.test.js) |
+| config.json-only keys | `py/config.py:212–234,722–739`; `py/api/diagnostics_report.py:185` | S12 report (read-only) | covered | `diagnostics` · button · "Download diagnostic report" | test_report_lists_config_only_keys (test_api_diagnostics_report.py) |
+
 ### Browser cache ownership (#222)
 
 The legacy gallery's Clear cache used to delete every localStorage key starting `pm_` or
diff --git a/tests/browser/concept-inventory.mjs b/tests/browser/concept-inventory.mjs
index 4afd585..d04d2fd 100644
--- a/tests/browser/concept-inventory.mjs
+++ b/tests/browser/concept-inventory.mjs
@@ -676,3 +676,73 @@ export function measureInspector(selector) {
             primary:node.classList.contains('ca-primary'),minHeight:getComputedStyle(node).minHeight})),
     };
 }
+
+// #249 System S7 Task 20, shared since S12 (#329): the maintenance plan dialog's measurement and its D100 mapping,
+// moved unchanged from system-maintenance-concept.spec.mjs so the rotated-log review uses the same ones.
+/** Runs in the page: the open review dialog (plan or duplicates): its title, body and the concept's tokens. */
+export function measureReview() {
+    const dialog = document.querySelector('dialog#modal[open]');
+    const css = (node, ...keys) => node ? Object.fromEntries(keys.map(key => [key, getComputedStyle(node)[key]])) : null;
+    const name = node => [node.localName, ...[...node.classList].sort()].join('.');
+    const text = node => node?.textContent.trim() ?? null;
+    const body = dialog.querySelector('#modal-body');
+    const grid = body.querySelector(':scope > dl.meta-grid');
+    const compare = body.querySelector('.compare-grid');
+    const item = compare?.querySelector('.compare-item');
+    const notes = [...body.querySelectorAll(':scope > p.small')];
+    const note = notes.at(-1);
+    const actions = body.querySelector(':scope > .dialog-actions');
+    return {
+        title: text(dialog.querySelector('#modal-title')),
+        tree: [...body.children].map(name),
+        heading: body.querySelector(':scope > h3') && { text: text(body.querySelector(':scope > h3')),
+            ...css(body.querySelector(':scope > h3'), 'fontSize', 'fontWeight', 'color', 'marginBottom') },
+        grid: grid && { rows: [...grid.children].map(row => [text(row.querySelector('dt')), text(row.querySelector('dd'))]),
+            ...css(grid, 'display', 'gridTemplateColumns', 'columnGap', 'rowGap'),
+            dt: css(grid.querySelector('dt'), 'fontSize', 'color', 'textTransform'), dd: css(grid.querySelector('dd'), 'fontSize', 'color') },
+        details: body.querySelector(':scope > details') && { summary: text(body.querySelector(':scope > details > summary')),
+            tree: [...body.querySelector(':scope > details').children].map(name) },
+        backup: body.querySelector(':scope > .notice') && { tree: [...body.querySelector(':scope > .notice').children].map(name),
+            text: [...body.querySelectorAll(':scope > .notice > div:first-child > *')].map(node => [node.localName, text(node)]),
+            buttons: [...body.querySelectorAll(':scope > .notice button')].map(text) },
+        compare: compare && { tree: [...compare.children].map(name), ...css(compare, 'display', 'gridTemplateColumns', 'columnGap'),
+            items: [...compare.children].map(entry => ({ tree: [...entry.children].map(name), label: text(entry.querySelector('label')),
+                checked: entry.querySelector('input[type=radio]').checked, image: entry.querySelector('img')?.className ?? null })),
+            item: css(item, 'paddingTop', 'paddingLeft', 'backgroundColor', 'borderTopWidth', 'borderTopColor', 'borderTopLeftRadius'),
+            image: css(item.querySelector('img'), 'width', 'objectFit'),
+            label: css(item.querySelector('label'), 'fontSize', 'color'),
+            radio: { name: item.querySelector('input[type=radio]').name.startsWith('keep-') ? 'keep-*' : 'other',
+                type: item.querySelector('input').type } },
+        note: note && { text: text(note), ...css(note, 'fontSize', 'color', 'marginTop') },
+        actions: { tree: [...actions.children].map(name), ...css(actions, 'display', 'justifyContent', 'columnGap', 'marginTop'),
+            buttons: [...actions.children].map(item => ({ text: text(item), className: item.className,
+                ...css(item, 'backgroundColor', 'color', 'fontSize', 'paddingTop', 'paddingLeft', 'borderTopColor') })) },
+    };
+}
+
+export const BACKUP_BOX = Object.freeze({ tree: ['div', 'div.row-actions'], text: [['h3', 'Back up the database first (recommended)'],
+    ['p', 'Downloads a copy of the prompts database before this operation changes any records.']], buttons: ['Back up now'] });
+
+/**
+ * D100: the server's plan in the concept's dialog: the operation's row title as its `h3` (the concept prints its
+ * `data-plan` name), the four rows with the plan's values, the listed records (`details`), the hold line in the
+ * concept's `p.small`, the D55 backup box before the actions, and "Apply reviewed operation". No sample note.
+ */
+export function mapPlanConcept(reference, title, plan) {
+    const backup = plan.backup.policy === 'off' ? 'No safety backup (the policy is off)'
+        : `Create and verify before changes (${plan.backup.destination_label})`;
+    const tree = ['h3', 'dl.meta-grid', ...(plan.details.length ? ['details'] : []), 'p.small', 'div.notice', 'div.dialog-actions'];
+    const [cancel, apply] = reference.actions.buttons;
+    return {
+        ...reference,
+        tree,
+        heading: { ...reference.heading, text: title },
+        grid: { ...reference.grid, rows: [['Scope', plan.scope.label],
+            ['Protected', plan.protected.reasons.length ? plan.protected.reasons.join(' · ') : 'Nothing is protected'],
+            ['Backup', backup], ['Media on disk', plan.media.label]] },
+        details: plan.details.length ? { summary: `Listed records (${plan.details.length})`, tree: ['summary', 'pre'] } : null,
+        backup: BACKUP_BOX,
+        note: { ...reference.note, text: 'Nothing changes until you apply. This review holds for 15 minutes.' },
+        actions: { ...reference.actions, buttons: [cancel, { ...apply, text: 'Apply reviewed operation' }] },
+    };
+}
diff --git a/tests/browser/system-diagnostics-concept.spec.mjs b/tests/browser/system-diagnostics-concept.spec.mjs
new file mode 100644
index 0000000..af459cd
--- /dev/null
+++ b/tests/browser/system-diagnostics-concept.spec.mjs
@@ -0,0 +1,396 @@
+import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
+import { test, expect } from './fixtures.mjs';
+import { SIZES, THEMES, seedConcept, openConcept, openProduction, diffInventory, mutate, measureReview, mapPlanConcept }
+    from './concept-inventory.mjs';
+
+// #249 System S12 Task 7 (#329): System › Diagnostics & logs (app.js renderSystem 694–695) and its log cleanup review
+// (the concept's `maintenancePlan("rotated logs")`, 953–958) against the immutable concept, on the concept-shaped
+// fixture with the logger writing into this server's own root and seeded with the concept's sample (four lines, a
+// 1.4 MB active log, three rotated copies, console logging off). Each concept measurement is mapped only by the recorded
+// deviations (D109, D110, and D100 for the review), each commented where it applies; after that the difference must be
+// empty, and a removed term, a renamed button, a reordered option, a primary Refresh, a squeezed select or a swapped
+// token must be noticed.
+test.use({ locale: 'en-US', timezoneId: 'UTC' });
+
+test.beforeEach(async ({ page, request, browserName }) => {
+    await startCoverage(page, browserName);
+    await seedConcept(request);
+    await expect(await request.post('/__test__/system/reset')).toBeOK();
+    await expect(await request.post('/__test__/jobs/restart')).toBeOK();
+    await expect(await request.post('/__test__/logs/reset')).toBeOK();
+    await expect(await request.post('/__test__/logs/seed', { data: { mode: 'concept' } })).toBeOK();
+    page.conceptErrors = [];
+    page.on('pageerror', error => page.conceptErrors.push(error.message));
+});
+
+test.afterEach(async ({ page, request, browserName }) => {
+    await saveCoverage(page, browserName);
+    await request.post('/__test__/jobs/restart');
+    await request.post('/__test__/logs/reset');
+    await request.post('/__test__/system/reset');
+    expect(page.conceptErrors).toEqual([]);
+});
+
+const REPORT_URL = '/prompt_manager/system/diagnostics';
+const PREVIEW_URL = '/prompt_manager/maintenance/preview';
+const LINE_FORMAT = /^\d\d:\d\d:\d\d [A-Z]+ +\S/;
+
+/** Runs in the page: Diagnostics & logs under `mainSelector`: every surface's text, controls, geometry and tokens. */
+function measureDiagnostics([mainSelector, lineFormat]) {
+    const format = new RegExp(lineFormat);
+    const layout = document.querySelector(`${mainSelector} .settings-layout`);
+    const css = (node, ...keys) => node ? Object.fromEntries(keys.map(key => [key, getComputedStyle(node)[key]])) : null;
+    const tokens = (node, ...names) => Object.fromEntries(names.map(key => [key, getComputedStyle(node).getPropertyValue(key).trim()]));
+    const name = node => [node.localName, ...[...node.classList].sort()].join('.');
+    const text = node => node?.textContent.trim() ?? null;
+    const button = node => ({ text: text(node), className: node.className });
+    const control = row => {
+        const select = row.querySelector(':scope > select');
+        if (select) return { kind: 'select', id: select.id, options: [...select.options].map(option => option.textContent),
+            selected: select.selectedOptions[0]?.textContent ?? null, disabled: select.disabled };
+        const toggle = row.querySelector(':scope > * input[type="checkbox"]');
+        return toggle ? { kind: 'switch', id: toggle.id, wrapper: name(toggle.parentElement), checked: toggle.checked,
+            disabled: toggle.disabled } : null;
+    };
+    const operations = parent => [...parent.querySelectorAll(':scope > .operation')].map(row => ({ tree: [...row.children].map(name),
+        title: text(row.querySelector('h3')), description: text(row.querySelector('p')),
+        actions: [...row.querySelectorAll('.row-actions > button')].map(button) }));
+    const toolbarItem = node => ({ name: name(node), text: node.localName === 'select' || node.localName === 'input' ? null : text(node),
+        for: node.localName === 'label' ? node.htmlFor : null, id: node.id || null,
+        options: node.localName === 'select' ? [...node.options].map(option => option.textContent) : null,
+        // The chosen option, so a wrong default level is noticed.
+        selected: node.localName === 'select' ? node.selectedOptions[0]?.textContent ?? null : null,
+        input: node.localName === 'input' ? [node.type, node.min, node.max, node.value] : null,
+        className: node.localName === 'button' ? node.className : null });
+    const surfaces = [...layout.querySelectorAll(':scope > section.surface')];
+    const pre = layout.querySelector('pre');
+    const lines = (pre?.textContent ?? '').split('\n').filter(Boolean);
+    const details = layout.querySelector('details');
+    const firstRow = layout.querySelector('.setting-row');
+    const toolbar = layout.querySelector('.toolbar');
+    return {
+        layout: [...layout.children].map(name),
+        surfaces: surfaces.map(surface => {
+            const heading = surface.querySelector(':scope > .panel-heading');
+            const grid = surface.querySelector(':scope > .meta-grid');
+            return {
+                tree: [...surface.children].map(name),
+                heading: text(surface.querySelector(':scope > h2, :scope > .panel-heading > h2')),
+                panelHeading: heading && [...heading.children].map(node => [name(node), text(node)]),
+                grid: grid && [...grid.children].map(entry => [name(entry), text(entry.querySelector('dt')), text(entry.querySelector('dd'))]),
+                buttons: [...surface.querySelectorAll(':scope > button')].map(button),
+                toolbar: surface.querySelector(':scope > .toolbar') && [...surface.querySelector(':scope > .toolbar').children].map(toolbarItem),
+                pre: surface.querySelector(':scope > pre') && { tabIndex: pre.tabIndex, tree: [...pre.children].map(name), lines,
+                    format: lines.every(line => format.test(line)) },
+                notes: [...surface.querySelectorAll(':scope > p')].map(node => [name(node), text(node), node.getAttribute('role'),
+                    node.getAttribute('aria-label')]),
+                rows: [...surface.querySelectorAll(':scope > .setting-row')].map(row => ({ tree: [...row.children].map(name),
+                    text: [...row.firstElementChild.children].map(node => [name(node), text(node), node.localName === 'label' ? node.htmlFor : null]),
+                    control: control(row) })),
+                details: surface.querySelector(':scope > details') && {
+                    summary: text(details.querySelector(':scope > summary')), tree: [...details.children].map(name),
+                    notes: [...details.querySelectorAll(':scope > p')].map(node => [name(node), text(node)]),
+                    buttons: [...details.querySelectorAll(':scope > button')].map(button),
+                    files: [...details.querySelectorAll(':scope > .operation-list > .operation')].map(row => ({
+                        title: text(row.querySelector('h3')), detail: text(row.querySelector('p')), actions: [...row.querySelectorAll('.row-actions > button')].map(item =>
+                            [text(item), item.getAttribute('aria-label')]) })),
+                    operations: operations(details) },
+                operations: operations(surface),
+            };
+        }),
+        tokens: tokens(surfaces[0], '--line', '--panel', '--accent'),
+        surface: css(surfaces[1], 'paddingTop', 'paddingLeft', 'backgroundColor', 'borderTopWidth', 'borderTopColor', 'borderTopLeftRadius',
+            'marginTop'),
+        grid: css(layout.querySelector('.meta-grid'), 'display', 'gridTemplateColumns', 'columnGap', 'rowGap'),
+        toolbar: css(toolbar, 'display', 'flexWrap', 'alignItems', 'columnGap', 'rowGap', 'marginBottom'),
+        pre: css(pre, 'fontFamily', 'fontSize', 'backgroundColor', 'borderTopColor', 'borderTopLeftRadius', 'paddingTop', 'overflowX'),
+        row: css(firstRow, 'display', 'alignItems', 'justifyContent', 'columnGap', 'paddingTop', 'paddingBottom', 'borderTopWidth',
+            'borderTopColor'),
+        label: css(firstRow.querySelector('label'), 'fontSize', 'fontWeight', 'color'),
+        description: css(firstRow.querySelector('p'), 'fontSize', 'color', 'marginTop'),
+        select: css(firstRow.querySelector('select'), 'fontSize', 'minWidth', 'maxWidth', 'backgroundColor', 'color', 'borderTopColor'),
+        summary: css(details.querySelector('summary'), 'fontSize', 'fontWeight', 'color', 'cursor'),
+        small: css(details.querySelector(':scope > p.small'), 'fontSize', 'color'),
+        // Whether each select is as wide as the browser lays out a copy holding only its chosen option, i.e. it shows
+        // that option whole (the browser's own select sizing, arrow included).
+        selectsFit: [...layout.querySelectorAll('select')].map(select => {
+            const copy = select.cloneNode(false);
+            copy.removeAttribute('id');
+            copy.append(new Option(select.selectedOptions[0]?.textContent ?? ''));
+            Object.assign(copy.style, { position: 'absolute', visibility: 'hidden', width: 'max-content', minWidth: '0',
+                maxWidth: 'none', flex: 'none' });
+            select.parentElement.append(copy);
+            const needed = copy.getBoundingClientRect().width;
+            copy.remove();
+            return select.getBoundingClientRect().width + 0.5 >= needed;
+        }),
+        pageScroll: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+    };
+}
+
+const plural = (count, one, many = `${one}s`) => `${count.toLocaleString('en-US')} ${count === 1 ? one : many}`;
+/** The server's size label (1 KB = 1024 bytes), as the section prints it. */
+function sizeText(bytes) {
+    if (bytes < 1024) return plural(bytes, 'byte');
+    if (bytes < 2 ** 20) return `${(bytes / 2 ** 10).toFixed(1)} KB`;
+    if (bytes < 2 ** 30) return `${(bytes / 2 ** 20).toFixed(1)} MB`;
+    return `${(bytes / 2 ** 30).toFixed(1)} GB`;
+}
+
+const KINDS = Object.freeze({ active: 'Active log', rotated: 'Rotated copy', other: 'Other file' });
+const RENDERER_NONE = 'No ComfyUI window is open in this browser, so its renderer is not known.';
+const COPY = Object.freeze({
+    testLink: 'Write a placeholder image record to check that linking works.',
+    runtimeLevel: 'How much the server writes to the log. Applied until the server restarts.',
+    console: 'Print Prompt Manager’s warnings and errors in the ComfyUI console (everything at DEBUG). Applied until the server restarts.',
+    clear: 'Empty the active log and delete its rotated copies.',
+    retention: 'Rotates at 10 MB · keeps 5 rotated copies · file logging on · memory buffer 1,000 entries',
+});
+
+/**
+ * The concept's Diagnostics & logs with the recorded deviations applied, for the server's `report` and the seeded
+ * `files` (`/logs/files`). The concept's own sample values the fixture reproduces stay as they are: the four log lines,
+ * the Viewer.js line, "prompt_manager.log · 1.4 MB · rotated copies: 3", INFO and console logging off.
+ */
+function mapDiagnosticsConcept(reference, { report, files, stats }) {
+    const [diagnostics, logs] = reference.surfaces;
+    const [levelLabel, level, refresh, download] = logs.toolbar;
+    const [runtime, consoleRow] = logs.rows;
+    const database = report.checks.database;
+    const { configured, watching, unavailable } = report.sources;
+    const sources = configured === 0 ? `ComfyUI output folder · ${watching ? 'watching' : 'manual scan'}`
+        : unavailable > 0 ? `${plural(configured, 'source')} · ${unavailable} not available`
+            : `${plural(configured, 'source')} · ${watching} watching`;
+    const errors = (stats.level_counts.ERROR ?? 0) + (stats.level_counts.CRITICAL ?? 0);
+    return {
+        ...reference,
+        surfaces: [
+            { ...diagnostics,
+                // D110: the Test image link operation follows the concept's Image-link diagnostics.
+                tree: [...diagnostics.tree, 'div.operation'],
+                // D110: live values. Database and Sources from `GET /system/diagnostics`, Host renderers is D106's
+                // renderer line (no ComfyUI window in this browser); the pinned Viewer.js line is the concept's own.
+                grid: diagnostics.grid.map(([entry, term, value]) => [entry, term, {
+                    Database: `Readable · ${sizeText(report.database_info.database_size_bytes)} · ${plural(database.image_count, 'image')}`,
+                    Sources: sources,
+                    'Host renderers': RENDERER_NONE }[term] ?? value]),
+                // D110: the buttons drop the concept's "sample".
+                buttons: diagnostics.buttons.map(item => ({ ...item, text: item.text.replace('Download sample diagnostic report',
+                    'Download diagnostic report') })),
+                operations: [
+                    // D110: "Inspect" opens the read-only Inspect a file page.
+                    ...diagnostics.operations.map(row => ({ ...row, actions: row.actions.map(item => ({ ...item, text: 'Inspect' })) })),
+                    // D110: the legacy synthetic link (S12-11), enabled: the fixture has a most recent prompt.
+                    { ...diagnostics.operations[0], title: 'Test image link', description: COPY.testLink,
+                        actions: [{ ...diagnostics.operations[0].actions[0], text: 'Create test link…' }] },
+                ] },
+            { ...logs,
+                // D109: the statistics line follows the viewer.
+                tree: [logs.tree[0], logs.tree[1], logs.tree[2], 'p.small', ...logs.tree.slice(3)],
+                toolbar: [
+                    levelLabel,
+                    // D109: all six minimum levels (the concept has three).
+                    { ...level, options: ['All levels', 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'] },
+                    // D109: the added Lines control, 1–500, default 100.
+                    { name: 'label.small', text: 'Lines', for: 'log-limit', id: null, options: null, selected: null, input: null,
+                        className: null },
+                    { name: 'input', text: null, for: null, id: 'log-limit', options: null, selected: null,
+                        input: ['number', '1', '500', '100'], className: null },
+                    refresh,
+                    // D109: the active log, not a sample.
+                    { ...download, text: 'Download log' },
+                ],
+                // D109: "Log statistics" (errors are ERROR + CRITICAL).
+                notes: [['p.small', `${plural(stats.buffer_count, 'entry', 'entries')} in memory · ${plural(errors, 'error')} · `
+                    + `${plural(stats.level_counts.WARNING ?? 0, 'warning')} · ${plural(stats.log_files_count, 'file')} · `
+                    + `${sizeText(stats.total_log_size)} on disk`, 'status', 'Log statistics']],
+                rows: [
+                    // D109: CRITICAL after the concept's levels; the value lasts until the server restarts.
+                    { ...runtime, text: [runtime.text[0], ['p', COPY.runtimeLevel, null]],
+                        control: { ...runtime.control, options: [...runtime.control.options, 'CRITICAL'] } },
+                    // D109: what the console setting does and that it lasts until the server restarts (off, as the
+                    // concept's sample, by the fixture's seed).
+                    { ...consoleRow, text: [consoleRow.text[0], ['p', COPY.console, null]] },
+                ],
+                details: { ...logs.details,
+                    // D109: the retention line, the files and Clear all logs follow the concept's line and review.
+                    tree: [...logs.details.tree, 'p.small', 'div.operation-list', 'div.operation'],
+                    notes: [...logs.details.notes, ['p.small', COPY.retention]],
+                    files: files.map(row => ({ title: row.filename, detail: `${sizeText(row.size)} · ${row.modified.slice(0, 16)
+                        .replace('T', ' ')} · ${KINDS[row.kind]}`, actions: [['Download', `Download ${row.filename}`]] })),
+                    operations: [{ tree: ['div', 'div.row-actions'], title: 'Clear all logs', description: COPY.clear,
+                        actions: [{ text: 'Clear all logs…', className: 'danger' }] }] } },
+        ],
+    };
+}
+
+async function conceptDiagnostics(page, theme) {
+    await openConcept(page, 'system', theme);
+    await page.locator('#main .section-nav').getByRole('button', { name: 'Diagnostics & logs', exact: true }).click();
+    await expect(page.locator('#main .settings-layout > section.surface')).toHaveCount(2);
+    await page.mouse.move(0, 0);
+    return page.evaluate(measureDiagnostics, ['#main', LINE_FORMAT.source]);
+}
+
+/** Production's section once every read answered, with the server's report, files and statistics it shows. */
+async function productionDiagnostics(page, request, theme) {
+    await openProduction(page, 'system/diagnostics', theme);
+    const main = page.locator('#workspace-main');
+    await expect(main.locator('.settings-layout > section.surface')).toHaveCount(2);
+    await expect(main.locator('.meta-grid dd')).not.toContainText(['Loading…']);
+    await expect(main.locator('.meta-grid dd').last()).toHaveText(RENDERER_NONE);
+    await expect(main.locator('#log-lines')).not.toHaveText('Loading…');
+    await expect(main.locator('#log-stats')).not.toHaveText('Loading…');
+    await expect(main.locator('details > p.small')).not.toContainText(['Loading…']);
+    await expect(main.locator('#runtime-level')).toBeEnabled();
+    await expect(main.locator('.operation').filter({ hasText: 'Create test link…' }).locator('button')).not.toHaveAttribute('aria-disabled', 'true');
+    await page.mouse.move(0, 0);
+    const production = await page.evaluate(measureDiagnostics, ['#workspace-main', LINE_FORMAT.source]);
+    const read = async url => (await request.get(url)).json();
+    const report = await read(REPORT_URL);
+    const { files } = await read('/prompt_manager/logs/files');
+    const { stats } = await read('/prompt_manager/logs/stats');
+    return { production, report, files, stats };
+}
+
+for (const theme of THEMES) for (const [width, height] of SIZES) {
+    test(`diagnostics and logs match the concept ${theme} ${width}x${height}`, async ({ page, request }, testInfo) => {
+        await page.setViewportSize({ width, height });
+        const concept = await conceptDiagnostics(page, theme);
+        await page.screenshot({ path: testInfo.outputPath(`concept-diagnostics-${theme}-${width}.png`), fullPage: true });
+        const { production, ...live } = await productionDiagnostics(page, request, theme);
+        await page.screenshot({ path: testInfo.outputPath(`production-diagnostics-${theme}-${width}.png`), fullPage: true });
+        expect(diffInventory(mapDiagnosticsConcept(concept, live), production)).toEqual([]);
+        expect(production.surfaces[1].pre.format).toBe(true);
+        expect(production.pageScroll).toBe(false);
+    });
+}
+
+// Below the concept's smallest size: on a 320px phone the Level and Runtime log level selects still show their whole
+// option, without page scroll.
+for (const theme of THEMES) test(`diagnostics selects fit at 320 wide ${theme}`, async ({ page, request }) => {
+    await page.setViewportSize({ width: 320, height: 700 });
+    const { production } = await productionDiagnostics(page, request, theme);
+    expect(production.selectsFit).toEqual([true, true]);
+    expect(production.pageScroll).toBe(false);
+});
+
+/**
+ * D100 with D109's rule for this plan: the server's `rotated_logs` plan in the concept's dialog, "Rotated log copies"
+ * as its `h3`, the plan's grid values (its Backup row says none is needed), "Listed files (N)", the hold line, no D55
+ * backup box (nothing in the library changes) and "Apply reviewed operation".
+ */
+function mapCleanupConcept(reference, plan) {
+    const mapped = mapPlanConcept(reference, 'Rotated log copies', plan);
+    return {
+        ...mapped,
+        // D109: no backup box for a plan that changes no library record.
+        tree: mapped.tree.filter(item => item !== 'div.notice'),
+        grid: { ...mapped.grid, rows: mapped.grid.rows.map(([term, value]) =>
+            [term, term === 'Backup' ? 'Not needed: no library record changes' : value]) },
+        backup: null,
+        // D109: the plan lists files, not records.
+        details: { ...mapped.details, summary: `Listed files (${plan.details.length})` },
+    };
+}
+
+async function conceptCleanup(page, theme) {
+    await conceptDiagnostics(page, theme);
+    await page.locator('#main details > summary').click();
+    await page.locator('#main [data-plan="rotated logs"]').click();
+    await expect(page.locator('dialog#modal[open] #modal-title')).toHaveText('Review maintenance plan');
+    await page.mouse.move(0, 0);
+    return page.evaluate(measureReview);
+}
+
+async function productionCleanup(page, request, theme) {
+    await productionDiagnostics(page, request, theme);
+    await page.locator('#workspace-main details > summary').click();
+    const answer = page.waitForResponse(response => response.url().endsWith(PREVIEW_URL));
+    await page.locator('#workspace-main').getByRole('button', { name: 'Review log cleanup', exact: true }).click();
+    const plan = await (await answer).json();
+    await expect(page.locator('dialog#modal[open] #modal-body > h3')).toHaveText('Rotated log copies');
+    await page.mouse.move(0, 0);
+    return { plan, production: await page.evaluate(measureReview) };
+}
+
+for (const theme of THEMES) for (const [width, height] of SIZES) {
+    test(`log cleanup review matches the concept ${theme} ${width}x${height}`, async ({ page, request }, testInfo) => {
+        await page.setViewportSize({ width, height });
+        const concept = await conceptCleanup(page, theme);
+        expect(concept.heading.text).toBe('rotated logs');
+        expect(concept.tree).toEqual(['p.demo-note', 'h3', 'dl.meta-grid', 'p.small', 'div.dialog-actions']);
+        await page.screenshot({ path: testInfo.outputPath(`concept-log-cleanup-${theme}-${width}.png`) });
+        const { plan, production } = await productionCleanup(page, request, theme);
+        expect(plan.operation).toBe('rotated_logs');
+        await page.screenshot({ path: testInfo.outputPath(`production-log-cleanup-${theme}-${width}.png`) });
+        expect(diffInventory(mapCleanupConcept(concept, plan), production)).toEqual([]);
+    });
+}
+
+// Every path where production differs from the unmapped concept: D110's live values (Viewer.js is the concept's own),
+// renamed buttons and added operation, and D109's toolbar, statistics line, runtime rows and log files.
+const DEVIATED_PATHS = [
+    'surfaces.0.buttons.0', 'surfaces.0.grid.0', 'surfaces.0.grid.1', 'surfaces.0.grid.3', 'surfaces.0.operations.0',
+    'surfaces.0.operations.1', 'surfaces.0.operations.length', 'surfaces.0.tree.4', 'surfaces.0.tree.length',
+    'surfaces.1.details.files', 'surfaces.1.details.notes', 'surfaces.1.details.operations', 'surfaces.1.details.tree',
+    'surfaces.1.notes.0', 'surfaces.1.notes.length', 'surfaces.1.rows.0', 'surfaces.1.rows.1', 'surfaces.1.toolbar.1',
+    'surfaces.1.toolbar.2', 'surfaces.1.toolbar.3', 'surfaces.1.toolbar.4', 'surfaces.1.toolbar.5', 'surfaces.1.toolbar.length',
+    'surfaces.1.tree.3', 'surfaces.1.tree.5', 'surfaces.1.tree.6', 'surfaces.1.tree.length'].sort();
+
+test('diagnostics comparison detects mutations', async ({ page, request }) => {
+    await page.setViewportSize({ width: 1600, height: 1100 });
+    const concept = await conceptDiagnostics(page, 'dark');
+    const { production, ...live } = await productionDiagnostics(page, request, 'dark');
+    const expected = mapDiagnosticsConcept(concept, live);
+    expect(diffInventory(expected, production)).toEqual([]);
+    // Unmapped, the section differs only where D109 and D110 are recorded.
+    expect(diffInventory(concept, production).map(item => item.path.split('.').slice(0, 4).join('.'))
+        .filter((path, index, all) => all.indexOf(path) === index).sort()).toEqual(DEVIATED_PATHS);
+    const measure = () => page.evaluate(measureDiagnostics, ['#workspace-main', LINE_FORMAT.source]);
+    const paths = async () => diffInventory(expected, await measure()).map(item => item.path);
+    // A removed term.
+    const undoTerm = await mutate(page, { remove: ['#workspace-main .meta-grid > div:nth-child(2)'] });
+    expect(await paths()).toEqual(expect.arrayContaining(['surfaces.0.grid.length']));
+    await undoTerm();
+    // A renamed button.
+    await page.evaluate(() => { document.querySelector('#workspace-main section.surface > button').textContent = 'Download report'; });
+    expect(await paths()).toEqual(['surfaces.0.buttons.0.text']);
+    await page.evaluate(() => { document.querySelector('#workspace-main section.surface > button').textContent = 'Download diagnostic report'; });
+    // A reordered level option.
+    await page.evaluate(() => { const select = document.querySelector('#workspace-main #log-level'); select.append(select.options[1]); });
+    expect(await paths()).toEqual(expect.arrayContaining(['surfaces.1.toolbar.1.options.1']));
+    await page.evaluate(() => { const select = document.querySelector('#workspace-main #log-level'); select.insertBefore(select.options[5], select.options[1]); });
+    // A wrong default level.
+    await page.evaluate(() => { document.querySelector('#workspace-main #log-level').value = 'INFO'; });
+    expect(await paths()).toEqual(['surfaces.1.toolbar.1.selected']);
+    await page.evaluate(() => { document.querySelector('#workspace-main #log-level').value = ''; });
+    // A primary Refresh.
+    await page.evaluate(() => { document.querySelectorAll('#workspace-main .toolbar > button')[0].classList.add('ca-primary'); });
+    expect(await paths()).toEqual(expect.arrayContaining(['surfaces.1.toolbar.4.className']));
+    await page.evaluate(() => { document.querySelectorAll('#workspace-main .toolbar > button')[0].classList.remove('ca-primary'); });
+    // A select squeezed until its chosen option is cut.
+    const undoSqueeze = await mutate(page, { css: '#workspace-main #runtime-level { max-width: 30px !important; min-width: 0 !important; }' });
+    expect(await paths()).toEqual(expect.arrayContaining(['selectsFit.1']));
+    await undoSqueeze();
+    // A swapped token.
+    const undoToken = await mutate(page, { css: '#workspace-main .settings-layout { --line: rgb(255, 0, 0); }' });
+    expect(await paths()).toEqual(expect.arrayContaining(['tokens.--line', 'row.borderTopColor']));
+    await undoToken();
+    expect(diffInventory(expected, await measure())).toEqual([]);
+
+    // The log cleanup review: a changed grid term, a backup box that came back and a grid token are noticed.
+    const conceptReview = await conceptCleanup(page, 'dark');
+    const { plan } = await productionCleanup(page, request, 'dark');
+    const expectedReview = mapCleanupConcept(conceptReview, plan);
+    const reviewPaths = async () => diffInventory(expectedReview, await page.evaluate(measureReview)).map(item => item.path);
+    expect(await reviewPaths()).toEqual([]);
+    await page.evaluate(() => { document.querySelectorAll('dialog#modal[open] dl.meta-grid dt')[2].textContent = 'Safety'; });
+    expect(await reviewPaths()).toEqual(['grid.rows.2.0']);
+    await page.evaluate(() => { document.querySelectorAll('dialog#modal[open] dl.meta-grid dt')[2].textContent = 'Backup'; });
+    const undoGrid = await mutate(page, { css: 'dialog#modal dl.meta-grid { column-gap: 3px; }' });
+    expect(await reviewPaths()).toEqual(expect.arrayContaining(['grid.columnGap']));
+    await undoGrid();
+    expect(await reviewPaths()).toEqual([]);
+});
+
diff --git a/tests/browser/system-maintenance-concept.spec.mjs b/tests/browser/system-maintenance-concept.spec.mjs
index 89812cd..cf2007d 100644
--- a/tests/browser/system-maintenance-concept.spec.mjs
+++ b/tests/browser/system-maintenance-concept.spec.mjs
@@ -1,6 +1,7 @@
 import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
 import { test, expect } from './fixtures.mjs';
-import { SIZES, THEMES, seedConcept, openConcept, openProduction, diffInventory, mutate } from './concept-inventory.mjs';
+import { SIZES, THEMES, seedConcept, openConcept, openProduction, diffInventory, mutate, measureReview, mapPlanConcept }
+    from './concept-inventory.mjs';
 
 // #249 System S7 Task 20: System › Maintenance (app.js renderSystem 688–690), its plan dialog (`maintenancePlan`,
 // 953–958) for each operation and its duplicates dialog (`duplicates`, 1457–1461) against the immutable concept, on
@@ -103,47 +104,6 @@ for (const theme of THEMES) for (const [width, height] of SIZES) {
     });
 }
 
-/** Runs in the page: the open review dialog (plan or duplicates): its title, body and the concept's tokens. */
-function measureReview() {
-    const dialog = document.querySelector('dialog#modal[open]');
-    const css = (node, ...keys) => node ? Object.fromEntries(keys.map(key => [key, getComputedStyle(node)[key]])) : null;
-    const name = node => [node.localName, ...[...node.classList].sort()].join('.');
-    const text = node => node?.textContent.trim() ?? null;
-    const body = dialog.querySelector('#modal-body');
-    const grid = body.querySelector(':scope > dl.meta-grid');
-    const compare = body.querySelector('.compare-grid');
-    const item = compare?.querySelector('.compare-item');
-    const notes = [...body.querySelectorAll(':scope > p.small')];
-    const note = notes.at(-1);
-    const actions = body.querySelector(':scope > .dialog-actions');
-    return {
-        title: text(dialog.querySelector('#modal-title')),
-        tree: [...body.children].map(name),
-        heading: body.querySelector(':scope > h3') && { text: text(body.querySelector(':scope > h3')),
-            ...css(body.querySelector(':scope > h3'), 'fontSize', 'fontWeight', 'color', 'marginBottom') },
-        grid: grid && { rows: [...grid.children].map(row => [text(row.querySelector('dt')), text(row.querySelector('dd'))]),
-            ...css(grid, 'display', 'gridTemplateColumns', 'columnGap', 'rowGap'),
-            dt: css(grid.querySelector('dt'), 'fontSize', 'color', 'textTransform'), dd: css(grid.querySelector('dd'), 'fontSize', 'color') },
-        details: body.querySelector(':scope > details') && { summary: text(body.querySelector(':scope > details > summary')),
-            tree: [...body.querySelector(':scope > details').children].map(name) },
-        backup: body.querySelector(':scope > .notice') && { tree: [...body.querySelector(':scope > .notice').children].map(name),
-            text: [...body.querySelectorAll(':scope > .notice > div:first-child > *')].map(node => [node.localName, text(node)]),
-            buttons: [...body.querySelectorAll(':scope > .notice button')].map(text) },
-        compare: compare && { tree: [...compare.children].map(name), ...css(compare, 'display', 'gridTemplateColumns', 'columnGap'),
-            items: [...compare.children].map(entry => ({ tree: [...entry.children].map(name), label: text(entry.querySelector('label')),
-                checked: entry.querySelector('input[type=radio]').checked, image: entry.querySelector('img')?.className ?? null })),
-            item: css(item, 'paddingTop', 'paddingLeft', 'backgroundColor', 'borderTopWidth', 'borderTopColor', 'borderTopLeftRadius'),
-            image: css(item.querySelector('img'), 'width', 'objectFit'),
-            label: css(item.querySelector('label'), 'fontSize', 'color'),
-            radio: { name: item.querySelector('input[type=radio]').name.startsWith('keep-') ? 'keep-*' : 'other',
-                type: item.querySelector('input').type } },
-        note: note && { text: text(note), ...css(note, 'fontSize', 'color', 'marginTop') },
-        actions: { tree: [...actions.children].map(name), ...css(actions, 'display', 'justifyContent', 'columnGap', 'marginTop'),
-            buttons: [...actions.children].map(item => ({ text: text(item), className: item.className,
-                ...css(item, 'backgroundColor', 'color', 'fontSize', 'paddingTop', 'paddingLeft', 'borderTopColor') })) },
-    };
-}
-
 // The concept's plan names (`data-plan`) and production's operation, row and button for each.
 const PLANS = Object.freeze([
     ['duplicate prompts', 'duplicate_prompts', 'Duplicate prompt text'],
@@ -151,32 +111,6 @@ const PLANS = Object.freeze([
     ['unused prompt components', 'unused_components', 'Unused prompt components'],
     ['missing-file links', 'missing_links', 'Missing-file links'],
 ]);
-const BACKUP_BOX = Object.freeze({ tree: ['div', 'div.row-actions'], text: [['h3', 'Back up the database first (recommended)'],
-    ['p', 'Downloads a copy of the prompts database before this operation changes any records.']], buttons: ['Back up now'] });
-
-/**
- * D100: the server's plan in the concept's dialog: the operation's row title as its `h3` (the concept prints its
- * `data-plan` name), the four rows with the plan's values, the listed records (`details`), the hold line in the
- * concept's `p.small`, the D55 backup box before the actions, and "Apply reviewed operation". No sample note.
- */
-function mapPlanConcept(reference, title, plan) {
-    const backup = plan.backup.policy === 'off' ? 'No safety backup (the policy is off)'
-        : `Create and verify before changes (${plan.backup.destination_label})`;
-    const tree = ['h3', 'dl.meta-grid', ...(plan.details.length ? ['details'] : []), 'p.small', 'div.notice', 'div.dialog-actions'];
-    const [cancel, apply] = reference.actions.buttons;
-    return {
-        ...reference,
-        tree,
-        heading: { ...reference.heading, text: title },
-        grid: { ...reference.grid, rows: [['Scope', plan.scope.label],
-            ['Protected', plan.protected.reasons.length ? plan.protected.reasons.join(' · ') : 'Nothing is protected'],
-            ['Backup', backup], ['Media on disk', plan.media.label]] },
-        details: plan.details.length ? { summary: `Listed records (${plan.details.length})`, tree: ['summary', 'pre'] } : null,
-        backup: BACKUP_BOX,
-        note: { ...reference.note, text: 'Nothing changes until you apply. This review holds for 15 minutes.' },
-        actions: { ...reference.actions, buttons: [cancel, { ...apply, text: 'Apply reviewed operation' }] },
-    };
-}
 
 async function conceptPlan(page, theme, name) {
     await conceptMaintenance(page, theme);
diff --git a/tests/browser/workspace-system.spec.mjs b/tests/browser/workspace-system.spec.mjs
index 0988f99..7dab866 100644
--- a/tests/browser/workspace-system.spec.mjs
+++ b/tests/browser/workspace-system.spec.mjs
@@ -1,6 +1,7 @@
 import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
 import { test, expect } from './fixtures.mjs';
 import { seedConcept } from './concept-inventory.mjs';
+import { readCoverageTable, parseControl, CONTROL_EXEMPTIONS } from '../../tools/vendor/legacy-coverage.mjs';
 
 // System › Overview (#249 System S2 Task 6) on the concept-shaped real fixture: the metrics, rows, Statistics dialog and
 // Health report read the server, never sample values (D93, D95, D96). The hooks are workspace_system_fixture.py's.
@@ -794,3 +795,45 @@ test('reset restores defaults without touching other keys', async ({ page }) =>
     expect(stored).toEqual({ gridColumns: 5, defaultLimit: 200, thumbnailPromptDismissed: 'kept', workspaceLayout: 'grid',
         videoMute: true, showImageInfo: true });
 });
+
+// TESTING.md "Legacy System capability coverage" (#249 System S12, #329): each `covered` row's native control is on its
+// System section, found by role and accessible name (a `term` by its text, a disclosure by its summary). Collapsed
+// `details` are opened first, so a control inside one counts once it is shown. tests/vendor/legacy-coverage.test.mjs
+// checks the rest of each row.
+test('every covered legacy System capability has its native control', async ({ page, request }) => {
+    // Download is offered for a model that is not on disk ("Download again" otherwise): the selected default's file is
+    // missing here.
+    await expect(await request.post('/__test__/tagging/models', { data: { unavailable: ['wd14-swinv2'] } })).toBeOK();
+    try {
+        await findControls(page);
+    } finally {
+        await request.post('/__test__/tagging/reset', { data: {} });
+    }
+});
+
+async function findControls(page) {
+    const covered = readCoverageTable().filter(row => row.Status === 'covered')
+        .map(row => ({ capability: row.Capability, ...parseControl(row['Native control']) }));
+    // A covered row without a control is one of the recorded exemptions, never silently skipped.
+    expect(covered.filter(row => !row.section).map(row => row.capability)).toEqual(Object.keys(CONTROL_EXEMPTIONS));
+    const controls = covered.filter(row => row.section);
+    expect(controls.length).toBeGreaterThan(40);
+    const sections = [...new Set(controls.map(row => row.section))];
+    for (const section of sections) {
+        await page.goto(`${workspace}#/system/${section}`);
+        const main = page.locator('#workspace-main');
+        await expect(layoutOf(page).locator(':scope > *').first()).toBeVisible();
+        for (const details of await main.locator('details:not([open]) > summary').all()) await details.click();
+        for (const { capability, role, name, row } of controls.filter(item => item.section === section)) {
+            // A name several rows share is looked up inside the row the table names.
+            const within = row ? main.locator('.operation').filter({ has: page.locator(`h3:text-is("${row}")`) }) : main;
+            const exact = new RegExp(`^${name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`);
+            // A `dt` (term) and a `details` disclosure (group) have no name from content: the term's text, the summary's.
+            const control = role === 'term' ? within.getByRole('term').filter({ hasText: exact })
+                : role === 'group' ? within.locator('details').filter({ has: page.locator(':scope > summary', { hasText: exact }) })
+                    .or(within.getByRole('group', { name, exact: true }))
+                    : within.getByRole(role, { name, exact: true });
+            await expect(control.first(), `${capability}: ${section} · ${role} · "${name}"${row ? ` in "${row}"` : ''}`).toBeVisible();
+        }
+    }
+}
diff --git a/tests/browser/workspace_diagnostics_fixture.py b/tests/browser/workspace_diagnostics_fixture.py
index 9a47009..b55cf34 100644
--- a/tests/browser/workspace_diagnostics_fixture.py
+++ b/tests/browser/workspace_diagnostics_fixture.py
@@ -14,7 +14,11 @@ real log folder. Every route refuses a log folder outside the server root.
   more INFO records older still), ``active`` bytes into the active log,
   rotated copies ``prompt_manager.log.<n>`` of the listed sizes (fixed
   times), on POSIX a symlink ``prompt_manager.log.<n+1>`` to a file outside
-  the folder (``link``) and a user's ``prompt_manager.log.bak`` (``other``);
+  the folder (``link``) and a user's ``prompt_manager.log.bak`` (``other``).
+  ``{mode: "concept"}`` reproduces the concept's Logs sample (app.js 695)
+  for the comparison: the buffer holds only its four lines, the active log
+  is 1.4 MB with three rotated copies ("prompt_manager.log · 1.4 MB · rotated
+  copies: 3") and console logging is off, as the concept's toggle;
 - ``POST /__test__/logs/rotate`` rolls the copies over as the handler does
   (``.2`` → ``.3``, ``.1`` → ``.2``, a new ``.1``), so a reviewed plan no
   longer matches;
@@ -48,6 +52,10 @@ LEVEL_RECORDS = (
     ("09:30:03", logging.CRITICAL, "The database could not be opened"),
 )
 ROTATED_TIME = datetime.datetime(2026, 10, 25, 14, 2)
+# The concept's "prompt_manager.log · 1.4 MB · rotated copies: 3": the active
+# log stays under 1.45 MB while the server writes its own lines.
+CONCEPT_ACTIVE = int(1.4 * 1024 * 1024)
+CONCEPT_ROTATED = (3072, 2048, 1024)
 MAX_SEED_BYTES = 64 * 1024 * 1024
 DEFAULT_CONFIG = {
     "level": "INFO",
@@ -152,7 +160,25 @@ def register_diagnostics_commands(app, routes, api, root: Path):
         with manager._buffer_lock:
             manager._log_buffer.clear()
 
+    def seed_concept() -> None:
+        manager = _manager()
+        log_dir = folder()
+        manager.update_config({"console_logging": False})
+        with manager._buffer_lock:
+            manager._log_buffer.clear()
+        for index, (time_text, level, message) in enumerate(CONCEPT_RECORDS):
+            record = _record(time_text, level, message, index)
+            manager.add_to_buffer(record, record.getMessage())
+        with open(log_dir / ACTIVE, "ab") as handle:
+            handle.write(b"x" * CONCEPT_ACTIVE)
+        for number, size in enumerate(CONCEPT_ROTATED, start=1):
+            moment = ROTATED_TIME - datetime.timedelta(hours=number)
+            _touch(log_dir / f"{ACTIVE}.{number}", size, moment)
+
     def seed(data) -> None:
+        if data.get("mode") == "concept":
+            seed_concept()
+            return
         manager = _manager()
         log_dir = folder()
         with_records = data.get("records", True) is not False
diff --git a/tests/vendor/legacy-coverage.test.mjs b/tests/vendor/legacy-coverage.test.mjs
new file mode 100644
index 0000000..c1bf38d
--- /dev/null
+++ b/tests/vendor/legacy-coverage.test.mjs
@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { COLUMNS, CONTROL_EXEMPTIONS, STATUSES, declaredTitles, parseControl, parseCoverageTable, readCoverageTable,
+    rowProblems } from '../../tools/vendor/legacy-coverage.mjs';
+
+// TESTING.md "Legacy System capability coverage" (#249 System S12, #329): every legacy System capability names an
+// owner, a known status, a well-formed native control and a test its file really declares.
+
+const ROW = Object.freeze({ Capability: 'Clear/truncate logs', 'Legacy anchor': '`admin.html:915`', Owner: 'S12 Logs',
+    Status: 'covered', 'Native control': '`diagnostics` · button · "Clear all logs…"', Test: 'clears the logs (clear.spec.mjs)' });
+const declaring = source => ({ locate: file => `tests/browser/${file}`, read: () => source });
+
+test('every coverage row has an owner, a known status and a declared test', () => {
+    const rows = readCoverageTable();
+    assert.ok(rows.length >= 54, `the table lists ${rows.length} capabilities`);
+    for (const row of rows) {
+        assert.deepEqual(rowProblems(row), [], `TESTING.md:${row.line} ${row.Capability}`);
+        assert.ok(row.Owner.trim());
+        assert.ok(STATUSES.includes(row.Status));
+    }
+    assert.ok(rows.some(row => row.Status === 'kept in legacy') && rows.some(row => row.Status === 'approved removal'));
+    // A broken row fails: an empty owner, an unknown status, a test its file does not declare.
+    const [first] = rows;
+    assert.deepEqual(rowProblems({ ...first, Owner: '' }), ['no owner']);
+    assert.ok(rowProblems({ ...first, Status: 'done' }).includes('unknown status "done"'));
+    assert.match(rowProblems({ ...first, Test: first.Test.replace(/^(.+) \(/, '$1 again (') }).join(), /declares no test/);
+    assert.match(rowProblems({ ...first, Test: 'some title (missing.spec.mjs)' }).join(), /no test file missing\.spec\.mjs/);
+});
+
+test('a title that appears only in a comment does not count', () => {
+    const commented = [
+        "// test('clears the logs', async () => {});",
+        "/* test('clears the logs', async () => {}); */",
+        '/**',
+        " * it('clears the logs')",
+        ' */',
+        "const title = 'clears the logs';",
+        "test.describe('clears the logs', () => {});",
+    ].join('\n');
+    assert.equal(declaredTitles(commented, 'clear.spec.mjs').has('clears the logs'), false);
+    assert.deepEqual(rowProblems(ROW, declaring(commented)), ['clear.spec.mjs declares no test "clears the logs"']);
+    const declared = `${commented}\nfor (const theme of THEMES) {\n    test('clears the logs', async ({ page }) => {});\n}\n`;
+    assert.deepEqual(rowProblems(ROW, declaring(declared)), []);
+    // Escaped quotes, template literals, modifiers and a title on the next line are declarations too.
+    const titles = declaredTitles("test('a gate\\'s refusal', () => {});\ntest.only(`b`, () => {});\nit(\n    'c', () => {});",
+        'x.test.js');
+    assert.deepEqual([...titles], ["a gate's refusal", 'b', 'c']);
+    // A block comment that starts after code on a line, and a `//` or `/*` inside a string or a regular expression.
+    const trailing = [
+        "const url = 'http://host/*'; /* test('clears the logs', () => {});",
+        "test('clears the logs', () => {}); */",
+        "const pattern = /['\"`]\\/\\*/;",
+        "test('after the pattern', () => {});",
+    ].join('\n');
+    assert.deepEqual([...declaredTitles(trailing, 'x.spec.mjs')], ['after the pattern']);
+    // Python: only a real `def test_…` counts, never a commented one.
+    const python = ['# def test_report_lists_config_only_keys(self):', 'class T:', '    \"\"\"Example:', '',
+        '    def test_in_a_docstring(self):', '    \"\"\"', '    def test_other(self):', '        def test_nested():',
+        '            pass', 'def test_module():', '    pass', ''].join('\n');
+    assert.deepEqual([...declaredTitles(python, 'test_x.py')], ['test_other', 'test_module']);
+});
+
+test('a malformed native control cell fails', () => {
+    assert.deepEqual(parseControl('`diagnostics` · button · "Clear all logs…"'),
+        { section: 'diagnostics', role: 'button', name: 'Clear all logs…', row: null });
+    assert.deepEqual(parseControl('`maintenance` · button · "Review plan" · in "Duplicate prompt text"'),
+        { section: 'maintenance', role: 'button', name: 'Review plan', row: 'Duplicate prompt text' });
+    assert.equal(parseControl('—'), null);
+    for (const [cell, message] of [
+        ['diagnostics · button · "Clear all logs…"', /malformed/],
+        ['`diagnostics` · button · Clear all logs…', /malformed/],
+        ['`diagnostics` - button - "Clear all logs…"', /malformed/],
+        ['', /malformed/],
+        ['`logs` · button · "Clear all logs…"', /unknown System section "logs"/],
+        ['`diagnostics` · link · "Clear all logs…"', /unknown role "link"/],
+    ]) {
+        assert.throws(() => parseControl(cell), message, cell);
+        assert.match(rowProblems({ ...ROW, 'Native control': cell }, declaring("test('clears the logs', () => {});")).join(), message);
+    }
+    // Only a covered row names a control.
+    assert.deepEqual(rowProblems({ ...ROW, Status: 'kept in legacy' }, declaring("test('clears the logs', () => {});")),
+        ['a kept in legacy row names a native control']);
+    // The table itself must keep its six columns.
+    assert.throws(() => parseCoverageTable(`### Legacy System capability coverage\n\n| Capability | Owner |\n| --- | --- |\n`), /columns/);
+    assert.deepEqual(COLUMNS, ['Capability', 'Legacy anchor', 'Owner', 'Status', 'Native control', 'Test']);
+});
+
+test('a skipped test does not prove a capability', () => {
+    for (const modifier of ['skip', 'fixme', 'fail']) {
+        assert.deepEqual(rowProblems(ROW, declaring(`test.${modifier}('clears the logs', async () => {});`)),
+            ['clear.spec.mjs only skips "clears the logs"'], modifier);
+    }
+    for (const modifier of ['only', 'slow']) {
+        assert.deepEqual(rowProblems(ROW, declaring(`test.${modifier}('clears the logs', async () => {});`)), [], modifier);
+    }
+    // A running declaration beside a skipped one counts.
+    assert.deepEqual(rowProblems(ROW, declaring("test.skip('clears the logs', () => {});\ntest('clears the logs', () => {});")), []);
+});
+
+test('a covered row names its native control unless it is exempt', () => {
+    const source = declaring("test('clears the logs', () => {});");
+    assert.deepEqual(rowProblems({ ...ROW, 'Native control': '—' }, source), ['a covered row names no native control']);
+    for (const status of ['kept in legacy', 'approved removal']) {
+        assert.deepEqual(rowProblems({ ...ROW, Status: status, 'Native control': '—' }, source), [], status);
+    }
+    const [exempt] = Object.keys(CONTROL_EXEMPTIONS);
+    assert.deepEqual(rowProblems({ ...ROW, Capability: exempt, 'Native control': '—' }, source), []);
+    // Every exemption has a reason and names a covered row of the table that has no control.
+    const rows = readCoverageTable();
+    for (const [capability, reason] of Object.entries(CONTROL_EXEMPTIONS)) {
+        assert.ok(reason.length > 20, capability);
+        const row = rows.find(item => item.Capability === capability);
+        assert.ok(row, `${capability} is in the table`);
+        assert.deepEqual([row.Status, row['Native control']], ['covered', '—']);
+    }
+});
diff --git a/tools/vendor/legacy-coverage.mjs b/tools/vendor/legacy-coverage.mjs
new file mode 100644
index 0000000..46a807c
--- /dev/null
+++ b/tools/vendor/legacy-coverage.mjs
@@ -0,0 +1,215 @@
+// The legacy System capability coverage table (TESTING.md "Legacy System capability coverage", #249 System S12 #329):
+// every capability of the legacy admin and gallery pages names its owner, a status, the native control that replaces it
+// and a declared test. tests/vendor/legacy-coverage.test.mjs checks each row against the test files; the browser spec
+// `every covered legacy System capability has its native control` finds each covered row's control on its System page.
+import { readFileSync, existsSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const ROOT = join(dirname(fileURLToPath(import.meta.url)), '../..');
+export const HEADING = '### Legacy System capability coverage';
+export const COLUMNS = Object.freeze(['Capability', 'Legacy anchor', 'Owner', 'Status', 'Native control', 'Test']);
+export const STATUSES = Object.freeze(['covered', 'kept in legacy', 'approved removal']);
+export const SECTIONS = Object.freeze(['overview', 'appearance', 'sources', 'integrations', 'tagging', 'maintenance', 'backups',
+    'diagnostics']);
+export const ROLES = Object.freeze(['button', 'combobox', 'switch', 'slider', 'spinbutton', 'textbox', 'group', 'status', 'term']);
+// Where a Test cell's file is looked up, in order.
+export const TEST_FOLDERS = Object.freeze(['tests/browser', 'tests/js', 'tests/vendor', 'tests']);
+const NONE = '—';
+/**
+ * Covered rows whose replacement is not on a System section, so they name no native control (`—`), each with why. Every
+ * other covered row must name one.
+ */
+export const CONTROL_EXEMPTIONS = Object.freeze({
+    'Gallery per-image auto-tag / review': 'owned by the Images selection bar (Auto-tag selected), not a System section',
+});
+
+/** Split a Markdown table row into its cells (a `|` inside backticks is not a separator). */
+function cells(line) {
+    const out = [];
+    let cell = '';
+    let code = false;
+    for (const char of line.trim().replace(/^\|/, '').replace(/\|$/, '')) {
+        if (char === '`') code = !code;
+        if (char === '|' && !code) {
+            out.push(cell.trim());
+            cell = '';
+        } else {
+            cell += char;
+        }
+    }
+    out.push(cell.trim());
+    return out;
+}
+
+/** The table's rows as objects keyed by COLUMNS, from the section that starts at HEADING. */
+export function parseCoverageTable(markdown) {
+    const lines = markdown.split('\n');
+    const start = lines.findIndex(line => line.trim() === HEADING);
+    if (start === -1) throw new Error(`TESTING.md has no "${HEADING}" section`);
+    const header = lines.findIndex((line, index) => index > start && line.trim().startsWith('|'));
+    if (header === -1 || lines.slice(start + 1, header).some(line => /^#{1,3} /.test(line))) {
+        throw new Error('The coverage section has no table');
+    }
+    const columns = cells(lines[header]);
+    if (columns.join('|') !== COLUMNS.join('|')) throw new Error(`The coverage table's columns are ${columns.join(', ')}`);
+    const rows = [];
+    for (let index = header + 2; index < lines.length && lines[index].trim().startsWith('|'); index += 1) {
+        const values = cells(lines[index]);
+        rows.push({ line: index + 1, ...Object.fromEntries(COLUMNS.map((column, at) => [column, values[at] ?? ''])) });
+    }
+    return rows;
+}
+
+/**
+ * A Native control cell: `` `<section>` · <role> · "<name>" ``, optionally ` · in "<row title>"` when the name is shared
+ * by several rows of the section → {section, role, name, row}; `—` → null; else it throws.
+ */
+export function parseControl(cell) {
+    if (cell === NONE) return null;
+    const match = /^`([a-z]+)` · ([a-z]+) · "([^"]+)"(?: · in "([^"]+)")?$/.exec(cell);
+    if (!match) throw new Error(`malformed native control "${cell}"`);
+    const [, section, role, name, row = null] = match;
+    if (!SECTIONS.includes(section)) throw new Error(`unknown System section "${section}"`);
+    if (!ROLES.includes(role)) throw new Error(`unknown role "${role}"`);
+    return { section, role, name, row };
+}
+
+/** A Test cell: `<title> (<file>)` → {title, file}. */
+export function parseTest(cell) {
+    const match = /^(.+) \(([\w.-]+\.(?:mjs|js|py))\)$/.exec(cell);
+    if (!match) throw new Error(`malformed test cell "${cell}"`);
+    return { title: match[1], file: match[2] };
+}
+
+// Modifiers that still run the test; `.skip`, `.fixme` and `.fail` do not prove the capability.
+const RUNS = new Set(['', 'only', 'slow']);
+// After these characters (or at the start) a `/` opens a regular expression, not a division.
+const REGEX_BEFORE = /[(,=:[!&|?{};+\-*%<>~^]$/;
+
+/** Where the string, template literal or regular expression opened by `source[start]` ends (its closing index), or -1. */
+function literalEnd(source, start) {
+    const quote = source[start];
+    let inClass = false;
+    for (let end = start + 1; end < source.length; end += 1) {
+        const at = source[end];
+        if (at === '\\') end += 1;
+        else if (quote === '/' && at === '[') inClass = true;
+        else if (quote === '/' && at === ']') inClass = false;
+        else if (at === quote && !inClass) return end;
+        // A quoted string or a regular expression never spans lines.
+        else if (at === '\n' && quote !== '`') return -1;
+    }
+    return -1;
+}
+
+/**
+ * JavaScript `source` with every comment blanked (newlines kept), wherever it starts on a line. Strings, template
+ * literals and regular expressions are skipped whole, so a `//` or `/*` inside them is not a comment.
+ */
+export function stripJsComments(source) {
+    let out = '';
+    let index = 0;
+    while (index < source.length) {
+        const char = source[index];
+        const next = source[index + 1];
+        if (char === '/' && next === '/') {
+            while (index < source.length && source[index] !== '\n') index += 1;
+            continue;
+        }
+        if (char === '/' && next === '*') {
+            const close = source.indexOf('*/', index + 2);
+            const stop = close === -1 ? source.length : close + 2;
+            out += source.slice(index, stop).replace(/[^\n]/g, ' ');
+            index = stop;
+            continue;
+        }
+        const opens = char === "'" || char === '"' || char === '`' || (char === '/' && REGEX_BEFORE.test(out.trimEnd() || '('));
+        const end = opens ? literalEnd(source, index) : -1;
+        if (end === -1) {
+            out += char;
+            index += 1;
+        } else {
+            out += source.slice(index, end + 1);
+            index = end + 1;
+        }
+    }
+    return out;
+}
+
+/** Python `source` with its comments and triple-quoted strings (docstrings) blanked, newlines kept. */
+export function stripPythonComments(source) {
+    return source.replace(/("""|''')[\s\S]*?\1|#[^\n]*/g, text => text.replace(/[^\n]/g, ' '));
+}
+
+/**
+ * The tests a source declares, title → whether it runs: a `test('…'` or `it('…'` call at a line's start (`.only` and
+ * `.slow` run; `.skip`, `.fixme` and `.fail` do not) in JavaScript, a `def test_…` at function or method indentation in
+ * Python. Comments, and Python docstrings, never count.
+ */
+export function declarations(source, file) {
+    const found = new Map();
+    const add = (title, runs) => found.set(title, found.get(title) || runs);
+    if (file.endsWith('.py')) {
+        for (const match of stripPythonComments(source).matchAll(/^(?: {4})?(?:async[ \t]+)?def[ \t]+(test_\w+)[ \t]*\(/gm)) {
+            add(match[1], true);
+        }
+        return found;
+    }
+    const declaration = /^[ \t]*(?:test|it)(?:\.(only|skip|fixme|fail|slow))?\(\s*(['"`])((?:\\.|(?!\2)[^\\])*)\2/gm;
+    for (const match of stripJsComments(source).matchAll(declaration)) add(match[3].replace(/\\(.)/g, '$1'), RUNS.has(match[1] ?? ''));
+    return found;
+}
+
+/** The titles of the tests a source declares and runs. */
+export function declaredTitles(source, file) {
+    return new Set([...declarations(source, file)].filter(([, runs]) => runs).map(([title]) => title));
+}
+
+/** The repository path of a Test cell's file, or null. */
+export function testFile(file, root = ROOT) {
+    for (const folder of TEST_FOLDERS) {
+        const path = join(root, folder, file);
+        if (existsSync(path)) return path;
+    }
+    return null;
+}
+
+/** Every problem of one row (empty: the row is sound). `locate(file)` finds a test file's path, `read(path)` reads it. */
+export function rowProblems(row, { root = ROOT, locate = file => testFile(file, root), read = path => readFileSync(path, 'utf8') } = {}) {
+    const problems = [];
+    if (!row.Capability) problems.push('no capability');
+    if (!row['Legacy anchor']) problems.push('no legacy anchor');
+    if (!row.Owner) problems.push('no owner');
+    if (!STATUSES.includes(row.Status)) problems.push(`unknown status "${row.Status}"`);
+    let control = null;
+    try {
+        control = parseControl(row['Native control']);
+    } catch (error) {
+        problems.push(error.message);
+    }
+    if (control && row.Status !== 'covered') problems.push(`a ${row.Status} row names a native control`);
+    if (row.Status === 'covered' && row['Native control'] === NONE && !Object.hasOwn(CONTROL_EXEMPTIONS, row.Capability)) {
+        problems.push('a covered row names no native control');
+    }
+    let test;
+    try {
+        test = parseTest(row.Test);
+    } catch (error) {
+        problems.push(error.message);
+        return problems;
+    }
+    const path = locate(test.file);
+    if (!path) problems.push(`no test file ${test.file}`);
+    else {
+        const runs = declarations(read(path), test.file).get(test.title);
+        if (runs === undefined) problems.push(`${test.file} declares no test "${test.title}"`);
+        else if (!runs) problems.push(`${test.file} only skips "${test.title}"`);
+    }
+    return problems;
+}
+
+/** The table read from TESTING.md. */
+export function readCoverageTable(root = ROOT) {
+    return parseCoverageTable(readFileSync(join(root, 'TESTING.md'), 'utf8'));
+}