# Universal admin component redesign — request

Audience: AI coding agents first.

## Status

DONE — the universal admin redesign, schema-upgrade repair, release 0.9.58, dev1 deployment, and deployed-browser-asset byte verification are complete.

## Goal

Redesign every International Zone-owned WordPress admin surface through one universal shared component system so rendered output closely matches owner-supplied references while preserving all behavior.

## Task IDs

- Session tasks: 1–7, 19–21.
- Corrective re-audit: task 19; shared-control repair: task 20; browser verification and delivery: task 21.

## Source request

Owner supplied authoritative reference screenshots and requested component redesign through `/claudex-workflow`. Owner later replaced the Fields/ACF target with `reference-fields-split.png`: a card-style split view with searchable field-group cards on the left and selected-group detail on the right. Every plugin admin surface MUST use the universal shared design system. Components outside it MUST migrate to shared components. Page-local/inline visual components and inline styling are forbidden. Every table, including all Fields main/nested tables, MUST use one universal zebra-row appearance; this explicitly overrides plain rows in the Fields mockup. Do not maintain separate visual table representations. Do not create another mockup: supplied images are the target. Worker “done” claims are insufficient; main session MUST independently inspect fresh screenshots before acceptance.

## Context

- Design contract: `docs/specs/2026-08-12-universal-admin-component-redesign-design.md`.
- Immutable references:
  - `docs/specs/assets/universal-admin-component-redesign/reference-list.png`
  - `docs/specs/assets/universal-admin-component-redesign/reference-fields-split.png` — authoritative Fields/ACF card-style split view
  - `docs/specs/assets/universal-admin-component-redesign/reference-fields.png` — superseded Fields reference retained for provenance only
- SPA routes register from `admin/src/main.js`; plugin-owned editor metaboxes and other WordPress admin registrations are also in scope.
- Shared components live in `admin/src/components/`; public exports belong in `admin/src/components/index.js`.
- Shared SCSS lives in `admin/src/styles/components/`; semantic tokens originate in `admin/src/styles/_variables.scss` and compile through `admin/src/styles/main.scss`.
- Existing `PageShell` owns route lifecycle. Existing `DataRegion` owns store reconciliation, cancellation, teardown, and interaction-safe updates. Preserve both responsibilities.
- Existing `Table` is the target semantic table renderer. Existing `GridTable` is a temporary compatibility seam only where current responsive behavior cannot immediately migrate; it MUST render the identical universal zebra appearance. Do not add another table implementation or visual representation.
- Existing functional safeguards include explicit language selection before billable generation, disabled/confirmation states, ACF disclosure/search/focus state, request cancellation, selection, sorting, filters, pagination, progress, errors, and teardown.
- Existing SPA style path is authoritative. Correct stale `.claude/agents/expert.md` `/css/` wording before implementation so agent guidance points to `admin/src/styles/`.

## Files

Factory planner MUST derive exact migration files from generated surface/import/style inventories. Expected contract boundaries:

- Modify `.claude/agents/expert.md` — align admin SCSS guidance with actual webpack source path.
- Modify `admin/src/styles/_variables.scss` — centralized semantic Sass maps and emitted CSS custom-property values.
- Modify `admin/src/styles/main.scss` — load universal component styles and runtime theme properties.
- Modify `admin/src/components/index.js` — sole public component export boundary.
- Preserve/modify `admin/src/components/PageShell.js` — retain lifecycle ownership; compose visual frame.
- Create or reuse one shared `AppFrame` component/style pair — own sidebar, canvas, page heading, description, local tabs, and route actions.
- Preserve/modify `admin/src/components/DataRegion.js` — retain data lifecycle ownership; compose state and table presentation.
- Modify existing shared components and component styles as required: `PageHeader`, `Tabs`, `Card`, `FilterBar`, `FormField`, `Input`, `Select`, `Checkbox`, `Toggle`, `Button`, `Table`, `GridTable`, `Badge`, `Modal`, `Toast`, `Notice`, `StatusFeedback`, `ProgressBar`, `Skeleton`, `EmptyState`, `ErrorState`, and field disclosure implementation.
- Modify every production module found by canonical SPA and WordPress-admin surface manifests — migrate presentation to public shared components.
- Modify page SCSS only to retain route-specific layout; remove duplicate control/surface/token styling.
- Add parser-backed architecture/style enforcement under existing project test/tool conventions.
- Add deterministic surface/screenshot manifests, fixtures, browser coverage, and visual artifacts under existing `tests/` conventions.
- Create `tests/e2e/run-remote.sh` — sole plugin-owned remote visual-test entrypoint; invoke exact calibration/capture sequence and artifact paths through narrow `e2e-remote` transport.

Do not trust this expected list as complete. Generated registration/import/style inventories define completeness.

## Contract

### Surface manifest

Generate deterministic manifest from:

- routes registered by `admin/src/main.js`;
- plugin-owned WordPress admin pages, editor metaboxes, setup/onboarding, and integration registrations;
- reachable loading, empty, error, disabled, selected, modal, progress, and disclosure states.

Each manifest entry records stable surface ID, entry registration, production renderer, shared-component dependencies, required behavior checks, and required screenshot states. Missing registered surfaces fail acceptance.

### Visual frame

```text
AppFrame({ route, title, description, tabs?, actions?, children }): HTMLElement
```

`AppFrame` owns presentation only. `PageShell` retains lifecycle/store/cancellation/teardown. Compatibility adapters preserve existing `PageHeader` and `Tabs` APIs until import graph proves zero consumers.

### Data presentation

`DataRegion` retains current lifecycle contract and composes loading/error/empty/content state. `Table` owns semantic tabular presentation and the single universal zebra-row contract used by every table. Zebra parity resets independently per table. `GridTable` remains a temporary compatibility adapter only where current responsive interaction cannot immediately migrate; it MUST render identically and migrate to `Table` wherever semantics permit. No dense/plain/zebra appearance variants and no additional table representation. Compatibility adapters preserve callers until manifest/import checks prove zero consumers.

### Shared disclosure

```text
Disclosure({ id, title, meta?, expanded, onToggle, children }): HTMLElement
```

Shared implementation owns summary semantics, ARIA, keyboard behavior, icon state, borders, lazy child mount, and nested state. Preserve shipped ACF group/layout behavior.

### Fields/ACF split-view contract

Use `reference-fields-split.png` as authoritative Fields layout. Compose one card-style master-detail surface from shared primitives:

- Left pane: heading, group search, selectable numbered group cards, count badges, active blue outline/chevron, bounded scroll, and result-count footer.
- Right pane: selected-group heading/count, global-default control, field search, main field table, nested child-field card/tables, total count, and pagination footer.
- Group selection updates detail without losing search context. Narrow layouts stack selector above detail with logical focus/order and no document overflow.
- Every main and nested table uses the universal zebra-row contract. This explicit requirement overrides the plain rows depicted in the Fields reference; all other split/card geometry follows that image.
- Create a generic master-detail component only if another production surface consumes the same interaction contract; otherwise compose existing shared primitives in Fields.

### Styling

- Central Sass maps are source values; build emits semantic CSS custom properties on plugin admin root.
- `body.dark-mode` overrides semantic custom properties. System preference alone MUST NOT switch theme.
- Pages may import only public exports from `admin/src/components/index.js`.
- Pages MUST NOT import component-private modules/styles, restyle shared controls, define competing tokens, or implement reusable visual classes.
- Parser-backed checks reject JSX/template style attributes, DOM `.style` writes, `<style>` blocks, `wp_add_inline_style`, private component imports, and page-owned reusable visual primitives.
- Inventory existing dynamic style use before enforcing the gate. Replace geometry-dependent cases with shared class/custom-property contracts that validate permitted values; preserve sortable/positioning behavior.

### Visual reference measurements

Record machine-readable image metadata and measured target properties before styling: pixel dimensions, DPR assumption, sidebar/content proportions, content bounds, primary spacing intervals, representative control heights, typography, radii, borders, and row density. NEVER treat image pixels as CSS pixels without the recorded DPR assumption.

### Risk-based visual coverage manifest

NEVER generate full state × theme × direction × viewport Cartesian coverage. Use deterministic layered coverage:

1. Shared-component showcase: render every public component and meaningful visual variant together. Capture light, `body.dark-mode`, RTL, 320 CSS px, keyboard focus, and forced/high contrast.
2. Representative layouts: capture one page per genuinely distinct composition. MUST include translation list, Fields/ACF split view, modal, and plugin-owned editor surface.
3. Pairwise matrix: select deterministic cases so every relevant pair among viewport, direction, theme, and materially visual state appears at least once. Record pair inventory and prove 100% pair coverage.
4. Targeted component regions: capture complex tables, nested Fields/disclosures, pagination, modal, and progress presentation where showcase/full-page evidence is insufficient.
5. Direct references: compare desktop translation list to `reference-list.png` and desktop Fields to `reference-fields-split.png`; universal zebra requirement overrides reference row treatment.
6. DOM/browser assertions: verify loading, empty, error, disabled, selected, accessibility attributes, focus continuity, reduced motion, request cancellation, and other nonvisual behavior without screenshots unless state materially changes geometry or appearance.

Each visual entry records coverage layer, surface/component ID, material state, viewport, direction, theme, deterministic fixture, filename, masks, reference/baseline source, calibrated threshold, and covered pairs. Calibrate per-image thresholds from repeated deterministic captures; forbid global tolerance. Missing required layers, uncovered pairs, direct references, or artifacts fail the gate.

#### Canonical screenshot inventory — exactly 30

This list is final. Implementation agents MUST generate these exact IDs/files and MUST NOT choose, add, substitute, or remove screenshots. Use deterministic fixtures, reduced motion for every capture, DPR 1, and repository baselines unless a reference is named. `desktop` = 1440×1000; `reference-list` = source-image geometry recorded in `reference-measurements.json`; `reference-fields` = 1448×1086; `mobile` = 320×900; `zoom-200` = 720×900 viewport at 200% browser zoom. The manifest’s pair-coverage audit MUST derive covered pairs from these entries and fail below 100% of the declared relevant pair inventory.

| # | Stable ID and filename (`tests/artifacts/universal-admin/`) | Layer | Required fixture/state and capture mode | Comparison |
|---:|---|---|---|---|
| 01 | `showcase.all.light.desktop.ltr` → `showcase.all.light.desktop.ltr.png` | Showcase | Every public shared component and meaningful variant; desktop, light, LTR | Baseline |
| 02 | `showcase.all.dark.desktop.ltr` → `showcase.all.dark.desktop.ltr.png` | Showcase | Same showcase; desktop, `body.dark-mode`, LTR | Baseline |
| 03 | `showcase.all.light.desktop.rtl` → `showcase.all.light.desktop.rtl.png` | Showcase | Same showcase; desktop, light, RTL | Baseline |
| 04 | `showcase.all.dark.mobile.rtl` → `showcase.all.dark.mobile.rtl.png` | Showcase | Same showcase; mobile, dark, RTL | Baseline |
| 05 | `showcase.focus.light.desktop.ltr` → `showcase.focus.light.desktop.ltr.png` | Showcase | Keyboard-focus fixture with visible focus on representative controls, tabs, disclosure, row action, and modal trigger | Baseline |
| 06 | `showcase.forced-colors.mobile.ltr` → `showcase.forced-colors.mobile.ltr.png` | Showcase | Mobile, light, LTR, forced colors active; every control/status remains distinguishable | Baseline |
| 07 | `translation.content.reference.light.ltr` → `translation.content.reference.light.ltr.png` | Direct reference | Content translation list, populated/filterable/selectable zebra table; reference-list geometry, light, LTR | `reference-list.png` |
| 08 | `fields.selected-reference.light.ltr` → `fields.selected-reference.light.ltr.png` | Direct reference | Fields split view, selected group, populated main table; reference-fields geometry, light, LTR | `reference-fields-split.png`; zebra override |
| 09 | `dashboard.analytics.dark.desktop.ltr` → `dashboard.analytics.dark.desktop.ltr.png` | Representative layout | Dashboard with analytics cards/data; desktop, dark, LTR | Baseline |
| 10 | `languages.list.light.desktop.rtl` → `languages.list.light.desktop.rtl.png` | Representative layout | Populated language list with active/default badges and row actions; desktop, light, RTL | Baseline |
| 11 | `translations.shell.light.mobile.ltr` → `translations.shell.light.mobile.ltr.png` | Representative layout | Translation shell/navigation with representative route tabs and populated content; mobile, light, LTR | Baseline |
| 12 | `strings.list.dark.desktop.rtl` → `strings.list.dark.desktop.rtl.png` | Representative layout | String translation filters, selection, zebra table, actions; desktop, dark, RTL | Baseline |
| 13 | `history.list.light.zoom-200.ltr` → `history.list.light.zoom-200.ltr.png` | Representative layout | Populated translation history with filters/table/pagination; zoom-200, light, LTR | Baseline |
| 14 | `settings.exceptions.dark.mobile.ltr` → `settings.exceptions.dark.mobile.ltr.png` | Representative layout | Settings exceptions controls and data region; mobile, dark, LTR | Baseline |
| 15 | `team.members.light.desktop.ltr` → `team.members.light.desktop.ltr.png` | Representative layout | Populated team/member management composition; desktop, light, LTR | Baseline |
| 16 | `workflow.board.dark.desktop.rtl` → `workflow.board.dark.desktop.rtl.png` | Representative layout | Populated workflow composition with statuses/actions; desktop, dark, RTL | Baseline |
| 17 | `assignments.selected.light.mobile.rtl` → `assignments.selected.light.mobile.rtl.png` | Representative layout | Selected assignment/detail composition; mobile, light, RTL | Baseline |
| 18 | `account.connected.dark.desktop.ltr` → `account.connected.dark.desktop.ltr.png` | Representative layout | Connected account/license state; desktop, dark, LTR | Baseline |
| 19 | `onboarding.integration.light.desktop.rtl` → `onboarding.integration.light.desktop.rtl.png` | Representative layout | Reachable setup/integration step with completed and current steps; desktop, light, RTL | Baseline |
| 20 | `migration.progress.dark.mobile.ltr` → `migration.progress.dark.mobile.ltr.png` | Representative layout | Active migration progress/checklist; mobile, dark, LTR | Baseline |
| 21 | `editor.metabox.dirty-disabled.light.desktop.ltr` → `editor.metabox.dirty-disabled.light.desktop.ltr.png` | Representative layout | WordPress editor translation metabox with unsaved changes and billable generation disabled pending explicit language selection | Baseline |
| 22 | `modal.language-focused.dark.desktop.rtl` → `modal.language-focused.dark.desktop.rtl.png` | Targeted component | Open language modal, initial keyboard focus visible and footer actions present; desktop, dark, RTL | Baseline |
| 23 | `table.translation-selected.light.desktop.ltr` → `table.translation-selected.light.desktop.ltr.png` | Targeted component | Translation table region only; zebra parity, selected rows, badges, disabled and enabled row actions | Baseline |
| 24 | `fields.nested-disclosure.dark.desktop.ltr` → `fields.nested-disclosure.dark.desktop.ltr.png` | Targeted component | Fields detail region only; expanded nested disclosure with independently reset nested zebra table | Baseline |
| 25 | `fields.search-pagination.light.mobile.rtl` → `fields.search-pagination.light.mobile.rtl.png` | Targeted component | Stacked split view; filtered group cards, selected result, field search, count, and pagination; mobile, light, RTL | Baseline |
| 26 | `pagination.focused.dark.desktop.ltr` → `pagination.focused.dark.desktop.ltr.png` | Targeted component | Shared pagination region with current/disabled states and keyboard focus; desktop, dark, LTR | Baseline |
| 27 | `progress.translation.light.desktop.rtl` → `progress.translation.light.desktop.rtl.png` | Targeted component | Translation progress region with determinate bar, per-item status, cancel action; desktop, light, RTL | Baseline |
| 28 | `data-region.loading.dark.mobile.rtl` → `data-region.loading.dark.mobile.rtl.png` | Material visual state | Shared data-region skeleton materially affecting geometry; mobile, dark, RTL | Baseline |
| 29 | `data-region.recoverable-error.light.desktop.ltr` → `data-region.recoverable-error.light.desktop.ltr.png` | Material visual state | Stable frame plus recoverable error notice and retry action; desktop, light, LTR | Baseline |
| 30 | `data-region.empty.forced-colors.zoom-200.ltr` → `data-region.empty.forced-colors.zoom-200.ltr.png` | Material visual state | Empty state at zoom-200, light, LTR, forced colors active | Baseline |

All other states and behaviors named in this request are assertion-only unless this inventory explicitly captures them. Required assertion-only coverage includes disabled/confirmation logic beyond #21/#23, selected state beyond #17/#23, modal focus trap/restoration, ARIA and keyboard semantics, reduced-motion behavior, request cancellation/teardown, polling, sorting, filtering, pagination behavior, disclosure lazy mounting, mutation-error state preservation, terminal errors, and every registered surface’s shared-component dependency contract.

### Remote E2E boundary

Keep WordPress-specific behavior inside plugin:

1. Maintain one immutable, versioned WordPress/MariaDB E2E snapshot containing WordPress core, ACF, deterministic database fixtures, and required baseline configuration. Snapshot MUST NOT embed current plugin source.
2. `tests/e2e/remote-stack.sh` MUST restore/clone that snapshot, mount/install current uploaded plugin build, apply only task-specific fixture deltas, and start WordPress. NEVER reinstall WordPress, MariaDB schema, ACF, or baseline fixtures on every pass.
3. Snapshot fingerprint MUST bind WordPress version, MariaDB version/schema, ACF version, fixture schema/version, PHP/runtime requirements, and snapshot build contract. Missing/mismatched snapshot MUST fail with one explicit rebuild command; NEVER silently use stale state.
4. Test execution MUST use a disposable clone/volume layer from immutable snapshot. Reuse snapshot bytes, not mutable live database state; each suite starts clean and cannot contaminate later runs.
5. `tests/e2e/run-playwright.sh` MUST own Playwright execution.
6. `tests/e2e/run-remote.sh` MUST invoke `e2e-remote` once, start one restored stack once, run exact three calibration passes plus final capture against that same clean stack, and return repository-relative artifacts. It MUST NOT launch four remote stacks.
7. Shared `e2e-remote` MUST remain narrow transport only: upload repository, run supplied server command, wait for port, run supplied browser command, return artifacts.
8. Remote path requires only registered reachable host, SSH, container runtime, Node/npm, browser dependencies, and valid versioned snapshot.

NEVER make plugin E2E depend on Claude runtime files, remote `settings.json`, seat provisioning, runtime symlink publication, or broader host configuration. Test/fix shared runner infrastructure independently in Overdeck; unrelated infrastructure suites MUST NOT gate this plugin when narrow transport works.

```text
# required
./tests/e2e/run-remote.sh

# reject: agent-reconstructed command or provisioning dependency
e2e-remote ... hand-written flags ...
remote-seat-provision ...
```


- First preserve behavior with characterization tests and baseline captures for each migration wave.
- Establish tokens, boundaries, compatibility adapters, source enforcement, and screenshot tooling before broad route migration.
- Prove the translation list/filter/table pilot against `reference-list.png` before expanding the pattern.
- Prove the Fields card-style split-view pilot against `reference-fields-split.png`: left searchable group-card selector, right selected-group detail/table, nested child cards, controls, footer/pagination, responsive stacking, and universal zebra rows.
- Migrate remaining surfaces in bounded, independently revertible waves.
- Remove adapters/styles only after manifest and import graph prove zero consumers.
- Maintain exact route workflows and API contracts.
- Preserve billing safety, focus continuity, request cancellation, disclosure state, sorting, selection, filters, pagination, progress, mutation errors, responsive behavior, RTL, reduced motion, high contrast, keyboard operation, 320 CSS px, and 200% zoom.
- Failed requests retain stable frame and expose retry where valid. Failed mutations retain selection/filter/disclosure/focus context. Never convert an error into a silent empty state.
- Match reference hierarchy, proportions, typography, spacing, surfaces, borders, radii, shadows, control geometry, blue actions/active states, badges, and disclosure treatment. Apply one universal zebra-row appearance to every table.
- Permit visual differences only from text, date, count, dataset, viewport, direction, theme, and resulting natural geometry.

## Out of scope

- Backend/API redesign.
- Information-architecture changes.
- Parallel “reference theme” or second design system.
- Page-by-page CSS imitation outside shared components.
- Wholesale Admin Snappy lifecycle revival.
- Unrelated functional refactors.
- New mockups or alternative visual directions.
- Browser tests against client, staging, or production sites.
- Development-only demos/readmes unless shared API changes require updates.

## Acceptance

- Surface manifest covers every production SPA route and plugin-owned WordPress admin surface, including editor metaboxes.
- Every visible reusable unit maps to a public shared component; architecture/style gates report zero prohibited bypasses or inline styling.
- Characterization and regression tests pass for every migrated surface and named behavior.
- Risk-based visual manifest contains exactly the 30 named deterministic screenshots in **Canonical screenshot inventory — exactly 30**. Shared-component showcase, representative layouts, targeted complex-component regions, both direct-reference cases, and 100% declared relevant pairwise coverage MUST exist. Agents may not redesign the inventory.
- DOM/browser assertions cover nonvisual loading, empty, error, disabled, selected, focus, accessibility, reduced-motion, cancellation, and interaction contracts. Add screenshots only where a state materially changes geometry or appearance.
- Translation-list and fields screenshots satisfy calibrated automated diffs and independent human visual inspection against both supplied references.
- Main session opens every required screenshot after workers claim done and checks frame/alignment, typography, spacing/density, surfaces/borders/radii/shadows, controls/states, table/disclosure geometry, navigation/tabs/actions, overflow/clipping/wrapping, responsive defects, and cross-route consistency. Any material mismatch returns to implementation; rationale cannot waive screenshot correction.
- Browser/dev-server workloads run only through plugin entrypoint `tests/e2e/run-remote.sh`; it uses `e2e-remote` as narrow transport against authorized self-contained build-host WordPress infrastructure and returns repository-relative artifacts.
- Plugin acceptance MUST NOT depend on Claude seat provisioning, remote Claude configuration, remote `settings.json` ownership, or unrelated Overdeck test suites.
- Run from plugin admin: `npm run lint:js` — PASS with no warnings.
- Run from plugin admin: `npm test -- --run` or the repository’s current deterministic admin test command discovered from `package.json` — PASS with no warnings.
- Run from plugin admin: `npm run build` — PASS with no warnings.
- Run applicable plugin PHP/release gates from `.claude/agents/expert.md` — PASS with every signal resolved.
- Run `git diff --check` — no output.
- Clean candidate lands through project delivery workflow and deploys only to an authorized target after independent visual acceptance.

## Preserved WIP/ref/path

- Branch: `wt/ui-component-redesign`.
- Worktree: `/home/user/Projects/Press.zone/wordpress/wp-content/.worktrees/ui-component-redesign`.
- Base: fresh `origin/master` at worktree creation.
- Shared-checkout WIP remains untouched, including billable generation language selection, excerpt/backend changes, auth/setup, journeys, and UI-matrix work.
- References and design spec remain versioned acceptance inputs.

## Constraints

- Follow `.claude/agents/expert.md` and mapped admin, component, SCSS, accessibility, verification, and E2E skills after correcting its stale style path.
- No inline CSS or page-local reusable visual components.
- No raw browser/dev-server pair on workstation.
- Address every error, warning, notice, security-gate signal, and visual mismatch.
- Keep implementation surgical to universal visual-system migration and required verification.
- Launch through `/claudex-workflow` as owner directed.

## Current receipt

The universal redesign and follow-up component adoption audit are complete. Account and onboarding now declare and use their public shared-component dependencies. Fields now contains an accessible labelled horizontal scroll region that preserves usable Setting controls when the split pane is narrower than the table. The browser regression proves the region scrolls far enough to bring the complete controls into view.

The supported remote E2E sequence passed from the landed source: calibration run 1 passed 29 cases after one retryable initial-root startup miss, calibration runs 2 and 3 each passed all 30 cases, universal assertions passed all 15 cases, the Fields overflow regression passed, and the final screenshot run passed all 30 named captures. Independent inspection confirmed the translation reference surface and caught the first width-only Fields repair as insufficient; the accessible-scroller repair replaced it before acceptance.

The robust repair landed on `origin/master`. Distribution version 0.9.53 was built from the landed source and verified as 193 runtime files and 166 PHP files with runtime SHA-256 `f6633470ebd1801f663c4c687a6fcd074864ac0e91f55a3266d4578f2f9b85c6`. Dev1 upgraded in place from active version 0.9.52 to active version 0.9.53. Deployment byte-verified every browser asset listed by the release. No browser smoke test ran against dev1.

## Process-efficiency audit

Owner requested direct inspection for other wasteful testing/deployment practices on 2026-08-13. Do NOT orchestrate or load skills unless owner explicitly invokes one. Measure repository scripts and current workflow before recommending changes. Separate plugin-local fixes from shared infrastructure. Prefer robust cache/reuse, one-time setup, targeted gates before full gates, single artifact transfer, deterministic failure resume, and deploy-once verification. NEVER trade isolation, reproducibility, warning gates, or independent visual acceptance for speed.

## Follow-up source request — 2026-08-13

Owner supplied screenshots showing native-looking square dropdowns and page-local controls remaining after the redesign. Audit every plugin-owned admin component and surface. Every reusable visual unit MUST use the public shared component boundary. Dropdowns, inputs, buttons, cards, tables, badges, tabs, and related elements MUST use one canonical radius vocabulary through SCSS variables/tokens; non-semantic literal radii are forbidden. Inline styles and page-local reusable visual systems remain forbidden. Preserve all behavior while migrating visual ownership.

### Acceptance delta

- Production pages, sections, editor code, and utilities import reusable UI only through `components/index.js`.
- No page stylesheet owns a duplicate badge, modal, card, input, table, pagination, tooltip, progress, or select visual system.
- Every nonzero, non-circular admin radius resolves through a named SCSS variable or CSS token; all form controls share the canonical control radius.
- Parser-backed audits fail on direct component imports, raw reusable controls, inline styling, duplicate page-local component selectors, and literal radii.
- Fresh screenshots include the reported CPT filters and Fields rows and confirm matching dropdown/control radii.
- Existing behavior, accessibility, dark/RTL/high-contrast/reduced-motion support, loading states, and responsive behavior remain green.

## Corrective source request — 2026-08-14

Owner identified the CPT filter surface as visibly inconsistent and requested another complete audit and correction. Inspection proved the prior gate was unsound: `FilterBar` and `FilterGroup` were shared wrappers, but `content-translate.js` created raw `<input>` and `<select>` controls and merely attached legacy shared CSS classes. The public `Input` and `Select` components are themselves settings-oriented legacy seams, and `Select` still accepts an inline `style` path. CSS-class borrowing is NOT shared-component adoption.

### Corrective acceptance delta

- Audit every production admin renderer and every public shared visual component; do not limit the audit to the reported CPT route.
- Any visible reusable control MUST be created by a public component exported through `admin/src/components/index.js`; raw native controls are permitted only inside the owning shared component.
- A page wrapping raw controls with shared classes, `FilterGroup`, or another layout component MUST fail architecture enforcement.
- Shared controls MUST own markup, states, accessibility, and canonical visual classes. Remove legacy inline-style seams and settings-only appearance leakage from the universal API.
- Filter bars, search controls, selects, inputs, buttons, tabs, tables, cards, badges, pagination, modals, notices, progress, and disclosures MUST present one coherent reference-matching visual language.
- Preserve route state, dynamic option/count updates, focus, open-select identity where required, labels, keyboard behavior, cancellation, loading/error states, dark mode, RTL, forced colors, reduced motion, 320px layouts, and 200% zoom.
- Add parser-backed tests that prove renderers cannot pass raw visual controls into shared layout wrappers or obtain compliance merely by applying shared CSS classes.
- Fresh remote screenshots MUST include the CPT filter surface shown by the owner. Main session MUST independently inspect it and all affected canonical screenshots before acceptance.
- Land and deploy only after clean deterministic gates and independent visual acceptance.

## Corrective audit receipt

Task 19 completed a read-only production inventory. Confirmed page-owned raw filter controls in `content-translate.js`, `string-translate.js`, `translate-history.js`, and `translate-posts.js`; raw form controls in translation editors and `my-assignments.js`; page-owned tabs, pagination, and progress markup in translation routes; a raw sortable button and badge in `languages.js`; raw card shells in Team and Workflow dashboards; and a raw notice in `translate-posts.js`. Public `Input.js` and `Select.js` retain settings-only/unrestricted-property seams, while `FormControls.js` lacks the identity-preserving dynamic select update API required by filter count refresh. Existing architecture enforcement blocks raw tables but incorrectly permits these equivalent bypasses and CSS-class borrowing. No private production component imports or missing public production exports were found. Native elements inside their owning shared component remain legitimate.

## Corrective implementation receipt

Task 20 replaced confirmed consumer bypasses with public shared controls across translation filters/editors, history, assignments, languages, Team, Workflow, tabs, pagination, notices, cards, badges, and progress. Public control APIs now own narrow safe attributes, labels, state, events, classes, identity-preserving select option refresh, validation, and accessibility. Parser-backed enforcement rejects raw consumer controls, shared-class borrowing, raw controls passed into wrappers, private imports, and unrestricted style forwarding while permitting native elements inside their owning component. Dedicated regression tests preserve button IDs used by asynchronous updates and browser validation/accessibility attributes without reopening unsafe forwarding.

Independent review found two regressions in the first implementation (dropped button IDs and dropped input validation attributes); both were corrected and covered by tests. Re-review of commit `06d9a029e1c154e1e1bf49e9db96aa4b067ab762` was clean. Integration commit is `8ab9bda2c`. Verification passed: 610 admin tests, JavaScript lint, nine universal contracts, strict architecture/token audits across 80 JavaScript and 41 SCSS modules, exact 30-entry screenshot inventory, production build, generated-asset match, and `git diff --check`, all without warnings. Source scans report zero known production consumer bypasses.

Independent inspection of the fresh CPT screenshot then proved a second defect: ownership was correct, but the canonical controls themselves retained the harsh square appearance the owner rejected. Task 21 now includes a shared-style correction in `_universal-admin.scss`: one canonical control-radius token, 42px controls, reference-matching padding/border/surface/focus treatment, shared select chevron, refined search icon, RTL placement, and a native forced-colors select fallback. `_translations.scss` no longer owns filter label appearance or select cursor behavior.

The visual pass then exposed unreadable dark-mode language-modal labels, proving the earlier SCSS ownership audit was also too narrow. A complete page-SCSS re-audit found 128 page-owned reusable appearance declarations. Live route-specific layout was preserved; orphan and duplicate shared-component appearance was removed from dashboard, exceptions, languages, migration, onboarding, settings, and translation styles. Modal container, controls, title, close action, overlay alias, selected-row state, tab success/failure state, and destructive bulk confirmation now resolve through universal shared styles. The parser-backed ownership gate now rejects reusable appearance in page SCSS, including a semicolon-less final declaration, while permitting route layout. Focused ownership tests pass 4/4. Full verification passes 610/610 admin tests, JavaScript lint, nine universal contracts, strict audits across 80 JavaScript and 41 SCSS modules, production build, and `git diff --check`. Expected error logs are emitted only by explicit error-state tests. Independent review is clean after correcting its two findings. The first post-cleanup remote attempt stopped before provisioning because port 8080 was transiently occupied on the selected build box; inspection confirmed no remaining listener or container, and the supported full run was restarted.

## Final verification receipt

Task 21 passed the complete supported remote sequence on the current-master candidate: three 30-screenshot calibration runs, all 15 assertion-only behavior tests, the Fields overflow regression, and the final 30-screenshot capture. Independent inspection caught and corrected an unreadable dark Analytics heading after the first green browser run; the production CSS was rebuilt and the entire sequence passed again. Final inspection confirms the heading, dark analytics cards/table, forced-colors 320px stacking, shared CPT filters, Fields split view and horizontal table containment are readable and coherent.

Release packaging then reproduced a pre-existing schema-upgrade defect on the local WordPress fixture: `wp_ipz_site_content_translations` lacked the required `attempt_hash` column, while its other required columns and indexes were present. The table declaration used `CREATE TABLE IF NOT EXISTS`, preventing WordPress `dbDelta()` from reconciling the existing table. The affected declaration now uses canonical `CREATE TABLE` syntax; legacy declarations remain unchanged because several use older inline-primary-key syntax that is not upgrade-safe under `dbDelta()`. Focused regression coverage pins the affected schema contract. Candidate activation against the actual older local table now succeeds and adds the missing column. The release verifier also reports unexpected activation output verbatim instead of hiding the underlying WordPress database error.

Deterministic receipts remain clean: 610 admin tests, JavaScript lint, nine universal contracts, strict audits across 80 JavaScript modules, 41 SCSS modules, and 19 current PHP admin files, focused ownership tests 4/4, production build, generated assets, and `git diff --check`. Stale manifest assertions for removed Compatibility Manager and WooCommerce integration surfaces were deleted so coverage matches the current production registration graph; the generated manifest now covers 21 current surfaces and exactly 30 screenshots.

Owner reported the workstation was stalled by local release builds and directed all remaining build work to the registered Debian build hosts. Release reconstruction was therefore offloaded through the remote build gate. The remote host completed dependency installation, webpack production compilation, archive assembly, and archive inventory/digest validation. Its unavailable local WordPress container was handled explicitly by deferring only that fixture check; the returned archive then passed local static verification and candidate activation without rebuilding on the workstation.

Release 0.9.58 was reconstructed from the landed source as 192 runtime files and 165 PHP files with runtime SHA-256 `f1bb0ae7b7fb2216e53601cd1528328fccafc1671a51c2df16a8e82085878b9b`. The archive passed local runtime activation verification. Dev1 already reported 0.9.58 active before replacement; deployment still replaced it in place from the verified archive and confirmed 0.9.58 active afterward. Every browser asset in the release was byte-verified, including the asset manifest, both CSS bundles, runtime/vendor/editor/main bundles, and all lazy JavaScript chunks. No browser smoke test ran against dev1.

## Next executable action

None — task 21 is complete.