Add Playwright e2e tests for upload interception

.cursor/rules/cimo-anti-slop.mdc

@@ -0,0 +1,34 @@
+---
+description: Maintainability and anti-slop standards when changing Cimo code
+alwaysApply: true
+---
+
+# Maintainability & anti-slop
+
+Prefer deepening existing seams over inventing parallel structure. Goal: one place to change a behaviour; freemium gates and shared heuristics stay single-sourced.
+
+## Before you paste
+
+When adding or extending behaviour, check the nearest sibling first. If the change would clone a block (converter wiring, media-manager upload hooks, settings field + REST save pairs, upsell/pricing URL builders, `CIMO_BUILD` gates), extract or reuse a shared helper **before** adding the nth copy.
+
+## Deepen, don’t layer
+
+Keep the runtime spine:
+
+- **Upload path:** media-manager hooks → shared converters → metadata saver
+- **Settings path:** React settings UI → REST/options → localized `window.cimoAdmin` / script loader
+- **Freemium:** free tree + `CIMO_BUILD` gates; premium only under `pro__premium_only/`
+
+New behaviour goes into an existing module cluster (converter, media-manager surface, settings section, shared util, premium module) when one fits. Do not add a second converter registry, parallel upload interceptor, or ad-hoc AJAX twin beside an existing REST route without an explicit extract.
+
+God-file rule of thumb: prefer extracting a coherent cluster over growing `admin-settings.js`, a media-manager entry, or a fat PHP admin class with another pasted case.
+
+## Single source for shared heuristics
+
+Heuristics that exist on both PHP and JS (settings defaults, “is premium” flags, pricing/upsell URLs, optimization labels) share one definition of truth — localized data, shared module, or a documented sync. Do not hand-sync a second map “for convenience.”
+
+Ship or silence: do not advertise a premium feature, format, or setting in free UI/copy unless the free build truly exposes it (or clearly marks it as premium upsell).
+
+## Completion check
+
+Before finishing a change that adds a converter, setting, upload hook, or freemium gate: every list/map/UI/REST surface that must know about it is updated, no phantom options remain, and no new duplicate helper was introduced beside an existing one. Keep premium logic out of the free tree.

.cursor/rules/cimo-javascript-react.mdc

@@ -0,0 +1,32 @@
+---
+description: Cimo uses plain JavaScript; React for settings, vanilla JS for media upload
+alwaysApply: true
+---
+
+# JavaScript & React
+
+Cimo uses **regular JavaScript** (`.js`), not TypeScript, for plugin UI and runtime code. Do not add `.ts` / `.tsx` source files outside e2e tests (`e2e/**/*.ts` is fine).
+
+## Two JS surfaces
+
+1. **Media upload interception** (primary product runtime) — mostly **vanilla JS** under `src/admin/js/media-manager/` and shared converters under `src/shared/converters/`. This hooks Media Manager / editor / page-builder uploads and runs client-side optimize/convert before save.
+2. **Settings UI** — **React** via `@wordpress/element` under `src/admin/js/page/` (and related bulk-optimizer UI). Mount with `createRoot` into `#cimo-admin-settings`.
+
+Prefer putting interactive upload/optimize logic in shared JS modules. PHP should expose settings, enqueue assets, REST/AJAX, and capability gates — not reimplement conversion in PHP when the product path is client-side.
+
+## React (settings / admin UI)
+
+- Build admin UI with **React** via `@wordpress/element` (WordPress’s React wrapper).
+- Use JSX inside `.js` files (wp-scripts handles transpilation).
+- Prefer WordPress packages (`@wordpress/element`, `@wordpress/components`, `@wordpress/i18n`, `@wordpress/api-fetch`, `@wordpress/hooks`, etc.) over adding a separate `react` / `react-dom` dependency.
+- Text domain: `cimo-image-optimizer`.
+- Freemium UI extensions use `applyFilters( 'cimo.…' )` so premium can swap/inject components without putting premium logic in the free tree.
+
+## Import alias
+
+- Use the `~cimo` alias (maps to `src/`) for cross-folder imports, e.g. `~cimo/shared/pricing-url`.
+
+## Media & converters
+
+- New optimize/convert formats deepen `src/shared/converters/` (extend `converter-abstract` / registry in `index.js`) rather than forking one-off paths in each media-manager file.
+- Keep upload UX (drop zone, select files, progress, sidebar info) in `src/admin/js/media-manager/`; keep pure conversion/util code in `src/shared/`.

.cursor/rules/cimo-project-repos.mdc

@@ -17,10 +17,19 @@ This project has two GitHub repositories, used depending on whether we're buildi
 ### Free version
 
 - Main plugin repo: https://github.com/gambitph/Cimo
+- Contains **only** free plugin code and must remain free of premium logic (WordPress.org guidelines).
+- Must pass [WordPress Plugin Check](https://github.com/wordpress/plugin-check) for Plugin Directory inclusion (see `cimo-wordpress-plugin-check` rule).
 
 ### Premium version
 
 - Uses the free version as the main plugin repo, and additionally uses:
 - Premium-only repo: https://github.com/bfintal/cimo-premium
 - The premium repo contains **only** the premium plugin code.
 - It is placed in the `pro__premium_only` directory inside the free plugin's root folder.
+
+## Free / Premium boundaries
+
+- Do not put premium feature logic in the free repo.
+- Premium code lives exclusively under `pro__premium_only/`.
+- The free plugin may gate-load premium via `CIMO_BUILD === 'premium'` and `pro__premium_only/index.php`.
+- When packaging the free build, `pro__premium_only` must not be included.

.cursor/rules/cimo-wordpress-plugin-check.mdc

@@ -0,0 +1,26 @@
+---
+description: Free plugin must pass WordPress Plugin Check for directory submission
+alwaysApply: true
+---
+
+# WordPress Plugin Directory & Plugin Check
+
+The **free** Cimo plugin is intended for the [WordPress Plugin Directory](https://wordpress.org/plugins/). Directory inclusion requires meeting WordPress.org plugin guidelines.
+
+## Official checker
+
+Use **[WordPress/plugin-check](https://github.com/wordpress/plugin-check)** (Plugin Check / PCP) as the compliance bar:
+
+- Static + runtime checks for directory requirements and best practices
+- WP Admin: **Tools → Plugin Check**
+- WP-CLI: `wp plugin check <plugin>` (add `--require=…/plugin-check/cli.php` for runtime checks)
+- Also: [wordpress.org/plugins/plugin-check](https://wordpress.org/plugins/plugin-check/)
+
+## What this means for Cimo
+
+- Free-repo code and the free build zip should be written to **pass Plugin Check**.
+- Prefer WordPress coding / security / i18n / enqueue practices that PCP enforces (escaping, nonces, capability checks, no forbidden APIs, proper headers, etc.).
+- Do not ship premium-only code, `pro__premium_only/`, or directory-disallowed patterns in the free package.
+- When changing free-plugin PHP, assets, or packaging, keep Plugin Check green in mind — fix regressions rather than silencing them without cause.
+
+Premium code under `pro__premium_only/` is out of scope for Directory submission, but anything that lands in the **free** tree or free zip is in scope.

.cursor/skills/code-review/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: code-review
+description: Review the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does the code follow this repo's documented coding standards?) and Spec (does the code match what the originating issue/spec asked for?). Runs both reviews in parallel sub-agents and reports them side by side. Use when the user wants to review a branch, a PR, work-in-progress changes, or asks to "review since X".
+---
+
+Two-axis review of the diff between `HEAD` and a fixed point the user supplies:
+
+- **Standards** — does the code conform to this repo's documented coding standards?
+- **Spec** — does the code faithfully implement the originating issue / spec?
+
+Both axes run as **parallel sub-agents** so they don't pollute each other's context, then this skill aggregates their findings.
+
+The issue tracker should have been provided to you — run `/setup-matt-pocock-skills` if `docs/agents/issue-tracker.md` is missing.
+
+## Process
+
+### 1. Pin the fixed point
+
+Whatever the user said is the fixed point — a commit SHA, branch name, tag, `main`, `HEAD~5`, etc. If they didn't specify one, ask for it.
+
+Capture the diff command once: `git diff <fixed-point>...HEAD` (three-dot, so the comparison is against the merge-base). Also note the list of commits via `git log <fixed-point>..HEAD --oneline`.
+
+Before going further, confirm the fixed point resolves (`git rev-parse <fixed-point>`) and the diff is non-empty. A bad ref or empty diff should fail here — not inside two parallel sub-agents.
+
+### 2. Identify the spec source
+
+Look for the originating spec, in this order:
+
+1. Issue references in the commit messages (`#123`, `Closes #45`, GitLab `!67`, etc.) — fetch via the workflow in `docs/agents/issue-tracker.md`.
+2. A path the user passed as an argument.
+3. A spec file under `docs/`, `specs/`, or `.scratch/` matching the branch name or feature.
+4. If nothing is found, ask the user where the spec is. If they say there isn't one, the **Spec** sub-agent will skip and report "no spec available".
+
+### 3. Identify the standards sources
+
+Anything in the repo that documents how code should be written, such as `CODING_STANDARDS.md` or `CONTRIBUTING.md`.
+
+On top of whatever the repo documents, the Standards axis always carries the **smell baseline** below — a fixed set of Fowler code smells (_Refactoring_, ch.3) that applies even when a repo documents nothing. Two rules bind it:
+
+- **The repo overrides.** A documented repo standard always wins; where it endorses something the baseline would flag, suppress the smell.
+- **Always a judgement call.** Each smell is a labelled heuristic ("possible Feature Envy"), never a hard violation — and, like any standard here, skip anything tooling already enforces.
+
+Each smell reads *what it is* → *how to fix*; match it against the diff:
+
+- **Mysterious Name** — a function, variable, or type whose name doesn't reveal what it does or holds. → rename it; if no honest name comes, the design's murky.
+- **Duplicated Code** — the same logic shape appears in more than one hunk or file in the change. → extract the shared shape, call it from both.
+- **Feature Envy** — a method that reaches into another object's data more than its own. → move the method onto the data it envies.
+- **Data Clumps** — the same few fields or params keep travelling together (a type wanting to be born). → bundle them into one type, pass that.
+- **Primitive Obsession** — a primitive or string standing in for a domain concept that deserves its own type. → give the concept its own small type.
+- **Repeated Switches** — the same `switch`/`if`-cascade on the same type recurs across the change. → replace with polymorphism, or one map both sites share.
+- **Shotgun Surgery** — one logical change forces scattered edits across many files in the diff. → gather what changes together into one module.
+- **Divergent Change** — one file or module is edited for several unrelated reasons. → split so each module changes for one reason.
+- **Speculative Generality** — abstraction, parameters, or hooks added for needs the spec doesn't have. → delete it; inline back until a real need shows.
+- **Message Chains** — long `a.b().c().d()` navigation the caller shouldn't depend on. → hide the walk behind one method on the first object.
+- **Middle Man** — a class or function that mostly just delegates onward. → cut it, call the real target direct.
+- **Refused Bequest** — a subclass or implementer that ignores or overrides most of what it inherits. → drop the inheritance, use composition.
+
+### 4. Spawn both sub-agents in parallel
+
+**Standards sub-agent prompt** — include:
+
+- The full diff command and commit list.
+- The list of standards-source files you found in step 3, **plus the smell baseline from step 3** pasted in full — the sub-agent has no other access to it.
+- The brief: "Report — per file/hunk where relevant — (a) every place the diff violates a documented standard: cite the standard (file + the rule); and (b) any baseline smell you spot: name it and quote the hunk. Distinguish hard violations from judgement calls — documented-standard breaches can be hard, but baseline smells are always judgement calls, and a documented repo standard overrides the baseline. Skip anything tooling enforces. Under 400 words."
+
+**Spec sub-agent prompt** — include:
+
+- The diff command and commit list.
+- The path or fetched contents of the spec.
+- The brief: "Report: (a) requirements the spec asked for that are missing or partial; (b) behaviour in the diff that wasn't asked for (scope creep); (c) requirements that look implemented but where the implementation looks wrong. Quote the spec line for each finding. Under 400 words."
+
+If the spec is missing, skip the Spec sub-agent and note this in the final report.
+
+### 5. Aggregate
+
+Present the two reports under `## Standards` and `## Spec` headings, verbatim or lightly cleaned. Do **not** merge or rerank findings — the two axes are deliberately separate (see _Why two axes_).
+
+End with a one-line summary: total findings per axis, and the worst issue _within each axis_ (if any). Don't pick a single winner across axes — that's the reranking the separation exists to prevent.
+
+## Why two axes
+
+A change can pass one axis and fail the other:
+
+- Code that follows every standard but implements the wrong thing → **Standards pass, Spec fail.**
+- Code that does exactly what the issue asked but breaks the project's conventions → **Spec pass, Standards fail.**
+
+Reporting them separately stops one axis from masking the other.

.cursor/skills/code-review/agents/openai.yaml

@@ -0,0 +1,3 @@
+interface:
+  display_name: "Code Review"
+  short_description: "Review a diff on standards and spec"

.cursor/skills/codebase-design/DEEPENING.md

@@ -0,0 +1,37 @@
+# Deepening
+
+How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**.
+
+## Dependency categories
+
+When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam.
+
+### 1. In-process
+
+Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed.
+
+### 2. Local-substitutable
+
+Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface.
+
+### 3. Remote but owned (Ports & Adapters)
+
+Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter.
+
+Recommendation shape: *"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."*
+
+### 4. True external (Mock)
+
+Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter.
+
+## Seam discipline
+
+- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection.
+- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them.
+
+## Testing strategy: replace, don't layer
+
+- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them.
+- Write new tests at the deepened module's interface. The **interface is the test surface**.
+- Tests assert on observable outcomes through the interface, not internal state.
+- Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface.

.cursor/skills/codebase-design/DESIGN-IT-TWICE.md

@@ -0,0 +1,44 @@
+# Design It Twice
+
+When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best.
+
+Uses the vocabulary in [SKILL.md](SKILL.md) — **module**, **interface**, **seam**, **adapter**, **leverage**.
+
+## Process
+
+### 1. Frame the problem space
+
+Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate:
+
+- The constraints any new interface would need to satisfy
+- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md))
+- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete
+
+Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel.
+
+### 2. Spawn sub-agents
+
+Spawn 3+ sub-agents in parallel. Each must produce a **radically different** interface for the deepened module.
+
+Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint:
+
+- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point."
+- Agent 2: "Maximise flexibility — support many use cases and extension."
+- Agent 3: "Optimise for the most common caller — make the default case trivial."
+- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies."
+
+Include both [SKILL.md](SKILL.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language.
+
+Each sub-agent outputs:
+
+1. Interface (types, methods, params — plus invariants, ordering, error modes)
+2. Usage example showing how callers use it
+3. What the implementation hides behind the seam
+4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md))
+5. Trade-offs — where leverage is high, where it's thin
+
+### 3. Present and compare
+
+Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**.
+
+After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu.