Merge pull request 'Extension: fix credential-push 405, guard the publish path, add a unit suite' (#234) from dev into main

extension/ had no test harness at all -- web-ext lint was the only signal, so
the URL-normalization fix in 8214afe shipped with nothing exercising it.

Adds vitest (mirroring frontend/vitest.config.js) and three specs:

- url.spec.js       normalizeApiUrl / webRootFromApiUrl, including the #2393
                    regression: instance-root input must reach /api/credentials,
                    idempotence, trailing-slash and whitespace handling, and
                    that empty input never yields a bare "/api" (which
                    isConfigured() would read as configured).
- platforms.spec.js getPlatformFromUrl / isArtistPage, pinning the #1485
                    regression -- all three Patreon creator URL shapes
                    (bare, /c/, /cw/) plus inner pages, with nav pages
                    excluded -- and table-integrity checks.
- version.spec.js   manifest.json and package.json versions in lockstep,
                    AMO-safe version format, and url.js ordered before api.js
                    in background.scripts (classic scripts share one scope, so
                    a reorder is a runtime ReferenceError with no build signal).

Specs load lib/*.js by evaluating the real file as a classic script
(test/helpers/loadLib.js) instead of adding module.exports shims to production
code that would never run in the browser. The suite therefore exercises exactly
the bytes packaged into the XPI.

Two packaging consequences, both handled:

- web-ext would otherwise bundle test/ and vitest.config.js INTO the XPI;
  both are now in --ignore-files across all four web-ext scripts.
- ci.yml's extension-version guard must ignore the same paths, or editing a
  spec would demand a pointless version bump. The dangerous drift direction is
  the opposite one -- a guard exclusion for a file that DOES ship would let a
  real change pass unnoticed -- so version.spec.js asserts every :(exclude) in
  ci.yml appears in --ignore-files.

extension.yml also triggers on ci.yml now, since version.spec.js reads it.

Refs #2393, #2397

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

.forgejo/workflows/ci.yml

@@ -2,6 +2,7 @@ name: CI
 
 # CI lanes per FabledRulebook/forgejo.md "CI philosophy":
 #   - lint: ruff only, no dep install — fast-fail for the common lint bounce.
+#   - extension-version: guards the extension publish path (see the job).
 #   - backend-lint-and-test: `pytest -m "not integration"`, no service containers.
 #   - frontend-build: vitest unit + vite build.
 #   - integration: pgvector + redis service containers; alembic + `pytest -m integration`.
@@ -41,6 +42,121 @@ jobs:
         # catching syntax errors before the image build.
         run: python -m compileall -q agent/fc_agent
 
+  # Guards the extension publish path, which has no self-correcting behavior.
+  #
+  # build.yml's sign-extension job keys its AMO-signing cache purely on the
+  # version string in extension/package.json: if an `ext-<version>` Forgejo
+  # release already carries an XPI, signing is SKIPPED and that old signed XPI
+  # is what build-web bakes into `:latest`. Nothing in that path inspects
+  # whether extension/ actually changed — so a forgotten version bump ships a
+  # stale extension on a fully green build, silently. (AMO can't help: it 409s
+  # on re-signing a version, which is exactly why the cache exists.)
+  #
+  # This job makes that case loud, on the dev push, instead of invisible at
+  # merge-to-main. It is pure git + text work — no deps, no services.
+  extension-version:
+    runs-on: python-ci
+    container:
+      image: git.fabledsword.com/bvandeusen/ci-python:3.14
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # Full history: the check diffs against the push's `before` SHA (or
+          # the PR base), which a depth-1 clone wouldn't contain.
+          fetch-depth: 0
+      - name: Extension version guard
+        env:
+          BEFORE: ${{ github.event.before }}
+          PR_BASE: ${{ github.event.pull_request.base.sha }}
+        run: |
+          set -eu
+          # busybox sh on the act_runner — no bashisms (family rule).
+          ver() { grep -E '"version"' "$1" | head -1 | sed -E 's/.*"version"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/'; }
+          PKG=$(ver extension/package.json)
+          MAN=$(ver extension/manifest.json)
+          test -n "$PKG" || { echo "ERROR: no version found in extension/package.json"; exit 1; }
+          test -n "$MAN" || { echo "ERROR: no version found in extension/manifest.json"; exit 1; }
+
+          # (1) Unconditional: the two version strings must agree. `web-ext sign`
+          # reads manifest.json (package.json sits in --ignore-files and isn't
+          # even inside the XPI), so AMO signs MAN and Firefox installs MAN.
+          # build.yml keys its cache, release tag, XPI filename — and therefore
+          # the version /api/extension/manifest reports to the update prompt —
+          # on PKG. Divergence either hard-fails at AMO or ships a mislabelled
+          # XPI whose update prompt lies about what's installed.
+          if [ "$MAN" != "$PKG" ]; then
+            echo "ERROR: extension version mismatch."
+            echo "  extension/manifest.json = $MAN  <- what AMO signs / Firefox installs"
+            echo "  extension/package.json  = $PKG  <- what CI caches, names, and reports"
+            echo "Set both to the same value."
+            exit 1
+          fi
+
+          # (2) If the SHIPPED extension changed, the version must have moved.
+          #
+          # Compare against MAIN, not against the previous push. The publish
+          # decision is made at merge-to-main against whatever ext-<version>
+          # already exists, so "differs from main" is the question that matters.
+          # Diffing against the previous dev push instead would demand a fresh
+          # bump on every iteration — push, tweak the extension again, and CI
+          # would insist on a second bump that buys nothing, inflating the
+          # version for no reason. On a main push there is no "main to compare
+          # to" yet, so fall back to that push's own before-SHA.
+          if [ "${GITHUB_REF##*/}" = "main" ]; then
+            BASE="${BEFORE:-}"
+          else
+            BASE=$(git rev-parse --verify -q origin/main 2>/dev/null || git rev-parse --verify -q main 2>/dev/null || echo "")
+            # PR base is the fallback when main isn't in the clone at all.
+            [ -n "$BASE" ] || BASE="${PR_BASE:-}"
+          fi
+          case "$BASE" in
+            ''|0000000000000000000000000000000000000000)
+              echo "No usable base ref (no main in clone / first push) — skipping the bump check."
+              echo "OK: extension version $PKG"
+              exit 0
+              ;;
+          esac
+          if ! git cat-file -e "$BASE^{commit}" 2>/dev/null; then
+            echo "Base commit $BASE not in this clone — skipping the bump check."
+            echo "OK: extension version $PKG"
+            exit 0
+          fi
+          # Exclusions mirror --ignore-files in extension/package.json's web-ext
+          # scripts: these files are not packaged into the XPI, so touching them
+          # (e.g. Renovate bumping the web-ext devDep, or editing a spec)
+          # changes nothing shipped and must not demand a version bump.
+          # KEEP IN SYNC with --ignore-files — a file packaged into the XPI but
+          # excluded here is exactly the silent-stale-ship this job exists to
+          # prevent. test/version.spec.js pins the two lists' shared intent.
+          CHANGED=$(git diff --name-only "$BASE" HEAD -- extension/ \
+            ':(exclude)extension/package.json' \
+            ':(exclude)extension/package-lock.json' \
+            ':(exclude)extension/README.md' \
+            ':(exclude)extension/.gitignore' \
+            ':(exclude)extension/vitest.config.js' \
+            ':(exclude)extension/test/**')
+          if [ -z "$CHANGED" ]; then
+            echo "No packaged extension files changed since $BASE — nothing to guard."
+            echo "OK: extension version $PKG"
+            exit 0
+          fi
+          echo "Packaged extension files changed since $BASE:"
+          echo "$CHANGED" | sed 's/^/  /'
+          PKG_OLD=$(git show "$BASE:extension/package.json" 2>/dev/null | grep -E '"version"' | head -1 | sed -E 's/.*"version"[[:space:]]*:[[:space:]]*"([^"]+)".*/\1/')
+          if [ -z "$PKG_OLD" ]; then
+            echo "Could not read the base version — skipping the bump check."
+            echo "OK: extension version $PKG"
+            exit 0
+          fi
+          if [ "$PKG_OLD" = "$PKG" ]; then
+            echo "ERROR: packaged extension files changed but the version is still $PKG."
+            echo "build.yml would find the existing ext-$PKG release, skip AMO signing,"
+            echo "and bake the OLD signed XPI into :latest — a green build shipping stale code."
+            echo "Bump the version in BOTH extension/package.json and extension/manifest.json."
+            exit 1
+          fi
+          echo "OK: extension version $PKG_OLD -> $PKG"
+
   backend-lint-and-test:
     runs-on: python-ci
     container:

.forgejo/workflows/extension.yml

@@ -1,5 +1,5 @@
 name: extension
-# Lint-only workflow. The sign-and-publish dance moved into build.yml's
+# Lint + unit tests. The sign-and-publish dance moved into build.yml's
 # `sign-extension` job (2026-05-25) — `:latest` now always bundles the XPI
 # because sign-extension runs as a build-web dependency in the SAME workflow,
 # eliminating the prior race between build.yml and a separate extension.yml.
@@ -10,10 +10,15 @@ on:
     paths:
       - 'extension/**'
       - '.forgejo/workflows/extension.yml'
+      # test/version.spec.js asserts ci.yml's extension-version guard never
+      # ignores a file web-ext actually packages, so a ci.yml-only edit can
+      # break this suite and must trigger it.
+      - '.forgejo/workflows/ci.yml'
   pull_request:
     branches: [main]
     paths:
       - 'extension/**'
+      - '.forgejo/workflows/ci.yml'
   workflow_dispatch:
 
 jobs:
@@ -23,7 +28,13 @@ jobs:
       image: node:24-bookworm-slim
     steps:
       - uses: actions/checkout@v4
-      - name: Install web-ext
-        run: cd extension && npm install --no-save --no-audit --no-fund
+      # Not --no-save: vitest and web-ext are both real devDependencies now,
+      # and the suite needs vitest resolvable from node_modules.
+      - name: Install dev dependencies
+        run: cd extension && npm install --no-audit --no-fund
       - name: Lint
         run: cd extension && npm run lint
+      # Pure-logic specs over lib/url.js and lib/platforms.js plus manifest /
+      # package version-consistency checks. No browser, no network.
+      - name: Unit tests
+        run: cd extension && npm run test:unit

agent/fc_agent/app.py

@@ -21,7 +21,7 @@ log = logging.getLogger("fc_agent.app")
 # Bump on every agent change. The page embeds this and /status reports it; the UI
 # warns to reload when they differ — so a stale browser-cached page can't be
 # mistaken for "the new image didn't deploy". (Belt-and-braces with no-store.)
-VERSION = "2026-07-02.6 · sleep mode: an empty queue sheds to one downloader and backs the lease poll off to 15 min"
+VERSION = "2026-07-17.1 · idle model-unload: after ~5 min idle the GPU models release their VRAM and reload on the next job (env IDLE_UNLOAD_SECONDS, 0=off) · sleep mode sheds to one downloader"
 
 logbuf.install()
 cfg = Config.from_env()
@@ -334,9 +334,12 @@ _PAGE = """<!doctype html><html><head><meta charset=utf-8>
   waited.textContent=s.transient||0
   // Instantaneous pool state → demoted to the sub-line, where its jumpiness reads
   // as live churn rather than a "broken" headline metric.
+  // '=== false' (not falsy) so a stale page that doesn't send models_loaded shows
+  // nothing; when the idle monitor unloads, the VRAM meter drops alongside this.
   pipe.textContent='downloaders '+(s.downloaders!=null?s.downloaders:'—')+' · consumers '+(s.consumers!=null?s.consumers:'—')+' · on GPU '+(s.active||0)
    +' · net '+(s.net_mb_s!=null?s.net_mb_s.toFixed(1):'—')+' MB/s'
    +(s.bandwidth_limit_mb_s>0?(' / cap '+s.bandwidth_limit_mb_s):'')
+   +(s.models_loaded===false?' · GPU models unloaded (idle — reload on next job)':'')
   if(document.activeElement!==bw && s.bandwidth_limit_mb_s!=null) bw.value=s.bandwidth_limit_mb_s
   // Buffer occupancy bar (also driven here so it tracks the /status cadence).
   if(s.buffer!=null && s.buffer_max){ const p=Math.round(100*s.buffer/s.buffer_max)

agent/fc_agent/config.py

@@ -51,6 +51,12 @@ class Config:
     bandwidth_limit_mb_s: float  # aggregate download cap in MEGABYTES/s across
     #                              all downloaders + video streams (0 = unlimited);
     #                              tunable live from the agent UI
+    idle_unload_seconds: float   # after this long with the GPU idle (nothing in
+    #                              flight, queue empty or Stopped), unload the
+    #                              SigLIP embedder + YOLO proposers to free their
+    #                              VRAM; they reload lazily on the next job. A
+    #                              24/7 agent otherwise squats on ~5GB doing
+    #                              nothing. 0 disables (keep models warm forever).
 
     @classmethod
     def from_env(cls) -> Config:
@@ -87,4 +93,8 @@ class Config:
             # link to ~1-1.5 MB/s per stream, browser included). Raise it (or 0)
             # from the agent UI on wired/faster networks.
             bandwidth_limit_mb_s=float(os.environ.get("BANDWIDTH_LIMIT_MB_S", "8")),
+            # 5 min: long enough that a lull between job bursts doesn't thrash the
+            # (few-second) reload, short enough that an agent left running with an
+            # empty queue hands its VRAM back promptly.
+            idle_unload_seconds=float(os.environ.get("IDLE_UNLOAD_SECONDS", "300")),
         )

agent/fc_agent/detectors.py

@@ -170,6 +170,13 @@ class YoloProposer:
             ))
         return out
 
+    def unload(self) -> None:
+        """Drop the loaded YOLO so its VRAM can be reclaimed; detect() reloads it
+        lazily on the next job. Leaves _ok untouched — a healthy proposer comes
+        back, but one that self-disabled on a fault stays off."""
+        with self._lock:
+            self._model = None
+
 
 class Proposers:
     """The agent's proposer set, built from config. Each detector is optional —
@@ -216,3 +223,11 @@ class Proposers:
 
     def panels(self, image):
         return self._top(self._panel, image, self.cfg.max_panels)
+
+    def unload(self) -> None:
+        """Release every loaded proposer's YOLO (idle VRAM reclaim). The worker
+        also drops its reference to this Proposers and rebuilds a fresh one via
+        _proposers_for on the next job, so this is belt-and-braces."""
+        for p in (self._person, self._anatomy, self._panel):
+            if p is not None:
+                p.unload()

agent/fc_agent/embedder.py

@@ -75,3 +75,18 @@ class CropEmbedder:
         pooled = out.pooler_output if hasattr(out, "pooler_output") else out
         arr = pooled.float().cpu().numpy().astype(np.float32)
         return [row.reshape(-1).tolist() for row in arr]
+
+    def unload(self) -> bool:
+        """Drop the loaded model so its VRAM can be reclaimed — the idle monitor
+        calls this after a spell with no work so an idle agent doesn't squat on
+        the card; the next embed() reloads it lazily (a few seconds). Held under
+        BOTH the load and inference locks so it can never race a concurrent load
+        or an in-flight forward pass. Returns True if a model was actually
+        released (the caller then runs one empty_cache() to hand the freed blocks
+        back to the driver)."""
+        with self._load_lock, self._infer_lock:
+            if self._model is None:
+                return False
+            self._model = None
+            self._processor = None
+            return True

agent/fc_agent/worker.py

@@ -57,6 +57,15 @@ MAX_BACKOFF_SECONDS = 60.0
 # up on their own.
 IDLE_POLL_MAX_SECONDS = 900.0
 
+# Idle VRAM reclaim (operator 2026-07-17): the SigLIP embedder + YOLO proposers
+# load lazily and then stay warm for fast job bursts — but a 24/7 agent with an
+# empty queue would otherwise squat on that VRAM (~5GB on the operator's card)
+# indefinitely while doing nothing. So a monitor unloads them after
+# cfg.idle_unload_seconds with the GPU genuinely idle (nothing in flight, buffer
+# drained); they reload lazily on the next job. This is just how often the
+# monitor wakes to check — it bounds how soon past the threshold the unload fires.
+IDLE_UNLOAD_CHECK_INTERVAL = 30.0
+
 # A job whose fetch dies transiently this many times IN ONE SESSION stops being
 # handed back and is failed instead. Transient handbacks (release) burn no
 # attempts on the server, so a poisoned transfer — an original that stalls the
@@ -268,6 +277,11 @@ class Worker:
         self._proposers_sig = None    # detector-config signature the current
         #                               proposers were built for (#134)
         self._proposers_lock = threading.Lock()
+        # Monotonic time of the last GPU activity (a consumer finishing a job).
+        # The idle monitor unloads the warm models once this goes stale by
+        # cfg.idle_unload_seconds — see _idle_unload_loop.
+        self._last_gpu_activity = time.monotonic()
+        threading.Thread(target=self._idle_unload_loop, daemon=True).start()
 
     # --- held-lease bookkeeping --------------------------------------------
     def _hold(self, job_ids) -> None:
@@ -608,6 +622,9 @@ class Worker:
             "net_mb_s": round(self._net_mb_s, 1),       # observed aggregate rate
             "bw_capped": self._bw_capped,   # autoscaler holding at the cap (UI hint)
             "idle": self._idle,             # queue empty → poll backed off (UI hint)
+            # Whether the GPU models are currently resident (False after an idle
+            # unload freed their VRAM) — a plain bool read, UI hint only.
+            "models_loaded": self._embedder is not None or self._proposers is not None,
         }
 
     def _bump(self, *, processed=0, downloaded=0, errors=0, active=0, transient=0):
@@ -788,6 +805,9 @@ class Worker:
                     self._bump(processed=1)
             finally:
                 self._bump(active=-1)
+                # Mark the GPU busy-until-now so the idle monitor starts its
+                # unload countdown from when work actually stopped, not before.
+                self._last_gpu_activity = time.monotonic()
 
     def _ensure_embedder(self, model_name: str):
         if self._embedder is not None:
@@ -845,6 +865,61 @@ class Worker:
                 self._proposers_sig = sig
             return self._proposers
 
+    def _unload_models(self) -> bool:
+        """Release the GPU-resident models (SigLIP embedder + YOLO proposers) so an
+        idle agent hands their VRAM back instead of squatting on the card. They
+        reload lazily on the next job (_ensure_embedder / _proposers_for) — a
+        few seconds' cost paid only when work actually resumes. Dropping the
+        shared instances under their build locks means a concurrent job either
+        sees the old instance (before) or rebuilds a fresh one (after); the idle
+        monitor only calls this with nothing in flight, so no inference is using
+        them. Returns True if anything was released."""
+        released = False
+        with self._embedder_lock:
+            if self._embedder is not None:
+                self._embedder.unload()
+                self._embedder = None
+                released = True
+        with self._proposers_lock:
+            if self._proposers is not None:
+                self._proposers.unload()
+                self._proposers = None
+                self._proposers_sig = None
+                released = True
+        if released:
+            try:
+                import torch
+                if torch.cuda.is_available():
+                    # torch's caching allocator holds freed blocks; hand them back
+                    # to the driver so nvidia-smi actually reflects the drop.
+                    torch.cuda.empty_cache()
+            except Exception:   # noqa: BLE001 — torch absent / CPU-only → nothing to free
+                pass
+        return released
+
+    def _idle_unload_loop(self) -> None:
+        """Unload the warm GPU models after a stretch of inactivity so a 24/7
+        agent with an empty queue doesn't hold ~5GB of VRAM doing nothing. Fires
+        only when nothing is in flight (active == 0 AND the buffer is drained) and
+        no job has completed for cfg.idle_unload_seconds — a window long enough
+        that a brief lull between bursts doesn't thrash reload/unload. Covers BOTH
+        sleep mode (queue empty, pipeline still running) and a full Stop; the
+        models reload lazily on the next job. idle_unload_seconds <= 0 disables it."""
+        idle_after = self.cfg.idle_unload_seconds
+        if idle_after <= 0:
+            return
+        while True:
+            time.sleep(IDLE_UNLOAD_CHECK_INTERVAL)
+            if self._embedder is None and self._proposers is None:
+                continue                       # nothing loaded → nothing to free
+            if self._active != 0 or not self._buffer.empty():
+                continue                       # work in flight → keep them warm
+            if time.monotonic() - self._last_gpu_activity < idle_after:
+                continue                       # not idle long enough yet
+            if self._unload_models():
+                log.info("idle %.0fs — unloaded GPU models, freed VRAM "
+                         "(reload on next job)", idle_after)
+
     def _consume(self, job: dict, frames: list, stop_evt: threading.Event) -> bool:
         """Detect + embed the decoded frames and submit the result. Returns True
         when the job was completed (→ count it processed), False otherwise: a

backend/app/models/ml_settings.py

@@ -215,12 +215,12 @@ class MLSettings(Base):
     )
 
     @classmethod
-    async def load(cls, session) -> "MLSettings":
+    async def load(cls, session) -> MLSettings:
         """The singleton settings row (id=1), via an async session. Mirrors
         ImportSettings.load — the shared singleton-loader pattern."""
         return (await session.execute(select(cls).where(cls.id == 1))).scalar_one()
 
     @classmethod
-    def load_sync(cls, session) -> "MLSettings":
+    def load_sync(cls, session) -> MLSettings:
         """The singleton settings row (id=1), via a sync session."""
         return session.execute(select(cls).where(cls.id == 1)).scalar_one()

ci-requirements.md

@@ -11,12 +11,22 @@ git.fabledsword.com/bvandeusen/ci-python:3.14
 - python 3.14
 - ruff (analyzer for `backend/`, `tests/`, `alembic/`)
 - node (frontend job: `npm install` + vitest + vite build)
-- docker CLI + buildx (`.forgejo/workflows/build.yml`: build-web, build-ml — Forgejo registry push)
+- docker CLI + buildx (`.forgejo/workflows/build.yml`: build-web, build-ml — Fabled-Git registry push)
+
+## Secondary runtime image
+
+node:24-bookworm-slim — `.forgejo/workflows/extension.yml` only.
+
+The extension lane is the one job that does NOT run on `ci-python:3.14`: it
+needs a current Node for `web-ext` and vitest and nothing Python at all. Kept
+on the upstream slim image rather than adding a Node toolchain to `ci-python`,
+per `docs/process.md`'s "add deps to the image when used by >1 project".
 
 ## Per-job tool installs
 
 - `pip install -r requirements.txt pytest pytest-asyncio` — in `backend-lint-and-test` and `integration` jobs
 - `npm install --no-audit --no-fund` — in `frontend-build` job
+- `npm install --no-audit --no-fund` — in `extension.yml`'s `lint` job (web-ext + vitest)
 
 ## Notes
 
@@ -26,12 +36,20 @@ git.fabledsword.com/bvandeusen/ci-python:3.14
   "add deps to image when used by >1 project" rule: FC alone is one Python
   project, so the deps live in `requirements.txt` and install per-job.
   Reconsider when a second Fabled-family Python backend lands.
-- Integration uses Forgejo Actions `services:` + socket-discovered bridge IPs
+- Integration uses Fabled-Git Actions `services:` + socket-discovered bridge IPs
   because `act_runner` (swarm-runner v0.6+) puts services on the default
   bridge with no embedded DNS. The pattern is documented in the rulebook's
-  `forgejo.md` "CI philosophy" section and FC's `ci.yml` is the canonical
+  `fabled-git.md` "CI philosophy" section and FC's `ci.yml` is the canonical
   example.
 - No `package-lock.json` is tracked yet (FC's `feedback_no_local_runs`
   memory bans `npm install` locally). Using `npm install` rather than
   `npm ci` until a lockfile lands.
 - No `imagemagick` / `pandoc` per-job installs needed.
+- `extension/`'s vitest specs load `lib/*.js` by evaluating the real file as a
+  classic script (`test/helpers/loadLib.js`) rather than adding `module.exports`
+  shims to production code — the libs ship as `background.scripts`, not ES
+  modules, so the specs exercise exactly the bytes packaged into the XPI.
+- Extension test files are excluded from the XPI via `--ignore-files` in
+  `extension/package.json`, and the same paths are excluded from `ci.yml`'s
+  `extension-version` guard. Those two lists must agree — `test/version.spec.js`
+  asserts the guard never ignores a file web-ext actually packages.

extension/background/background.js

@@ -60,9 +60,8 @@ async function checkForUpdateInfo() {
   }
   const currentVersion = browser.runtime.getManifest().version;
   const latestVersion = info && info.version ? info.version : null;
-  // latest_url is served from the web root; strip the /api suffix off baseUrl
-  // (same transform as OPEN_ARTIST_PAGE).
-  const base = (api.baseUrl || '').replace(/\/+$/, '').replace(/\/api$/, '');
+  // latest_url is served from the web root, not the JSON API.
+  const base = api.webRoot();
   return {
     updateAvailable: !!latestVersion && versionIsNewer(latestVersion, currentVersion),
     currentVersion,
@@ -211,6 +210,21 @@ browser.webRequest.onBeforeRedirect.addListener(
   { urls: ['https://app-api.pixiv.net/web/v1/users/auth/pixiv/callback*'] },
 );
 
+// Extract → verify → upload one cookie-auth platform. Returns a structured
+// outcome so the two callers (EXPORT_COOKIES single, EXPORT_ALL_COOKIES) shape
+// their own response + skip semantics. Verifies the captured cookies are
+// actually live BEFORE uploading, so a confirmed-stale session doesn't overwrite
+// good FC-side credentials; platforms with no verify config (v.ok === null) fall
+// through to upload.
+async function exportPlatformCookies(key) {
+  const cookies = await extractCookiesForPlatform(key);
+  if (cookies.length === 0) return { status: 'empty' };
+  const v = await verifyCookiesForPlatform(key);
+  if (v.ok === false) return { status: 'stale', reason: v.reason, cookieCount: cookies.length };
+  await api.uploadCredentials(key, 'cookies', toNetscapeFormat(cookies));
+  return { status: 'ok', cookieCount: cookies.length, verified: v.ok === true };
+}
+
 // ---- Message router ----
 
 browser.runtime.onMessage.addListener(async (msg) => {
@@ -255,22 +269,14 @@ browser.runtime.onMessage.addListener(async (msg) => {
       if (!platform) return { error: `Unknown platform: ${key}` };
       try {
         if (platform.authType === 'cookies') {
-          const cookies = await extractCookiesForPlatform(key);
-          if (cookies.length === 0) return { error: 'No cookies found — log in first.' };
-          // Verify the captured cookies are actually live BEFORE
-          // uploading. Skips upload on confirmed-stale sessions so we
-          // don't overwrite FC-side credentials with garbage. Platforms
-          // without a verify config (verify.ok === null) fall through
-          // to upload as before.
-          const v = await verifyCookiesForPlatform(key);
-          if (v.ok === false) {
+          const r = await exportPlatformCookies(key);
+          if (r.status === 'empty') return { error: 'No cookies found — log in first.' };
+          if (r.status === 'stale') {
             return {
-              error: `Captured ${cookies.length} ${platform.name} cookies but they don't appear authenticated (${v.reason}). Log in again in this browser, then retry.`,
+              error: `Captured ${r.cookieCount} ${platform.name} cookies but they don't appear authenticated (${r.reason}). Log in again in this browser, then retry.`,
             };
           }
-          const data = toNetscapeFormat(cookies);
-          await api.uploadCredentials(key, 'cookies', data);
-          return { success: true, cookieCount: cookies.length, verified: v.ok === true };
+          return { success: true, cookieCount: r.cookieCount, verified: r.verified };
         }
         if (key === 'discord') {
           if (!discordToken) return { error: 'Open discord.com to capture a token first.' };
@@ -298,18 +304,10 @@ browser.runtime.onMessage.addListener(async (msg) => {
           continue;
         }
         try {
-          const cookies = await extractCookiesForPlatform(key);
-          if (cookies.length === 0) {
-            results[key] = { skipped: true, reason: 'no cookies' };
-            continue;
-          }
-          const v = await verifyCookiesForPlatform(key);
-          if (v.ok === false) {
-            results[key] = { error: `verify failed: ${v.reason}` };
-            continue;
-          }
-          await api.uploadCredentials(key, 'cookies', toNetscapeFormat(cookies));
-          results[key] = { success: true, cookieCount: cookies.length, verified: v.ok === true };
+          const r = await exportPlatformCookies(key);
+          if (r.status === 'empty') results[key] = { skipped: true, reason: 'no cookies' };
+          else if (r.status === 'stale') results[key] = { error: `verify failed: ${r.reason}` };
+          else results[key] = { success: true, cookieCount: r.cookieCount, verified: r.verified };
         } catch (e) {
           results[key] = { error: e.message };
         }
@@ -346,11 +344,9 @@ browser.runtime.onMessage.addListener(async (msg) => {
       }
 
     case 'OPEN_ARTIST_PAGE': {
-      // apiUrl is configured with the /api suffix (see
-      // options/options.html placeholder); the SPA artist route is
-      // /artist/:slug, served from the same origin. Strip /api so the
-      // browser-level URL hits the Vue router, not the JSON API.
-      const base = (api.baseUrl || '').replace(/\/+$/, '').replace(/\/api$/, '');
+      // The SPA artist route (/artist/:slug) is served from the web root, not
+      // the JSON API — see api.webRoot().
+      const base = api.webRoot();
       const slug = encodeURIComponent(msg.slug || '');
       if (!base || !slug) return { error: 'apiUrl or slug missing' };
       try {

extension/lib/api.js

@@ -11,7 +11,10 @@ class FabledCuratorAPI {
 
   async init() {
     const cfg = await browser.storage.local.get(['apiUrl', 'apiKey']);
-    this.baseUrl = cfg.apiUrl || null;
+    // Normalize on READ, not just on save: configs stored before the options
+    // page started normalizing are missing the `/api` suffix, and this heals
+    // them without the operator having to reopen Settings.
+    this.baseUrl = normalizeApiUrl(cfg.apiUrl) || null;
     this.apiKey = cfg.apiKey || null;
     return this.isConfigured();
   }
@@ -50,6 +53,13 @@ class FabledCuratorAPI {
       } catch {
         message = `HTTP ${response.status}: ${response.statusText}`;
       }
+      // 404/405 from FC almost always means the request never reached the JSON
+      // API — it fell through to the SPA catch-all, which serves HTML on GET
+      // and rejects everything else. Say so, rather than making the operator
+      // decode "Method Not Allowed" on an endpoint that plainly allows POST.
+      if (response.status === 404 || response.status === 405) {
+        message += ` — ${url} isn't the FC API. Check the FC URL in settings.`;
+      }
       const err = new Error(message);
       err.status = response.status;
       throw err;
@@ -96,6 +106,12 @@ class FabledCuratorAPI {
     return this.request('GET', '/extension/manifest');
   }
 
+  // The web/SPA root: where the Vue router (artist pages) and the served XPI
+  // live, NOT the JSON API. Used by OPEN_ARTIST_PAGE + the self-update check.
+  webRoot() {
+    return webRootFromApiUrl(this.baseUrl);
+  }
+
   // Connection test = the cheapest read with auth.
   testConnection() {
     return this.request('GET', '/credentials');

extension/lib/url.js

@@ -0,0 +1,32 @@
+/**
+ * Canonical FC endpoint derivation, shared by the background client and the
+ * options page so a URL entered either way behaves identically.
+ *
+ * FC serves two things on one origin: the JSON API under `/api`, and the Vue
+ * SPA from the root. `api.js` builds requests as `${baseUrl}/credentials`, so
+ * the stored base URL has to carry the `/api` suffix.
+ */
+
+/**
+ * Accept what an operator would naturally type — the instance root
+ * (`http://curator.example.com`) or the API root (`.../api`) — and return the
+ * API root either way.
+ *
+ * Worth normalizing rather than validating: a root-form URL doesn't fail
+ * loudly, it lands on the SPA catch-all, which answers `GET /credentials` with
+ * 200 HTML and rejects `POST /credentials` with 405. The operator sees a
+ * working Test Connection and a broken export.
+ */
+function normalizeApiUrl(raw) {
+  const trimmed = (raw || '').trim().replace(/\/+$/, '');
+  if (!trimmed) return '';
+  return /\/api$/i.test(trimmed) ? trimmed : `${trimmed}/api`;
+}
+
+/**
+ * The SPA root — where the Vue router (artist pages) and the served XPI live,
+ * NOT the JSON API. Accepts either input form, same as normalizeApiUrl.
+ */
+function webRootFromApiUrl(raw) {
+  return normalizeApiUrl(raw).replace(/\/api$/i, '');
+}

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "FabledCurator",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Export cookies from supported platforms to FabledCurator and add creators as sources in one click.",
 
   "browser_specific_settings": {
@@ -46,7 +46,7 @@
   },
 
   "background": {
-    "scripts": ["lib/platforms.js", "lib/cookies.js", "lib/api.js", "background/background.js"]
+    "scripts": ["lib/platforms.js", "lib/cookies.js", "lib/url.js", "lib/api.js", "background/background.js"]
   },
 
   "options_ui": {

extension/options/options.html

@@ -21,9 +21,12 @@
 <body>
   <h1>FabledCurator extension</h1>
 
-  <label for="api-url">FC base URL</label>
-  <input id="api-url" type="url" placeholder="http://curator.example.com/api" />
-  <div class="hint">Find this on FC → Settings → Maintenance → Browser extension.</div>
+  <label for="api-url">FC instance URL</label>
+  <input id="api-url" type="url" placeholder="http://curator.example.com" />
+  <div class="hint">
+    Your FabledCurator address — with or without the trailing <code>/api</code>; both work.
+    Find it on FC → Settings → Maintenance → Browser extension.
+  </div>
 
   <label for="api-key">Extension API key</label>
   <input id="api-key" type="password" placeholder="paste from FC Settings card" />
@@ -36,6 +39,7 @@
 
   <div id="status" class="status" style="display:none;"></div>
 
+  <script src="../lib/url.js"></script>
   <script src="options.js"></script>
 </body>
 </html>

extension/options/options.js

@@ -8,7 +8,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 async function save() {
-  const apiUrl = document.getElementById('api-url').value.trim().replace(/\/+$/, '');
+  const apiUrl = normalizeApiUrl(document.getElementById('api-url').value);
   const apiKey = document.getElementById('api-key').value.trim();
   if (!apiUrl || !apiKey) {
     showStatus('Both fields are required.', 'err');
@@ -16,11 +16,14 @@ async function save() {
   }
   await browser.storage.local.set({ apiUrl, apiKey });
   await browser.storage.local.remove(['lastConnectionTest', 'lastConnectionStatus']);
-  showStatus('Saved.', 'ok');
+  // Show what was actually stored — the operator may have typed the instance
+  // root and it was normalized to the API root.
+  document.getElementById('api-url').value = apiUrl;
+  showStatus(`Saved — using ${apiUrl}`, 'ok');
 }
 
 async function test() {
-  const apiUrl = document.getElementById('api-url').value.trim().replace(/\/+$/, '');
+  const apiUrl = normalizeApiUrl(document.getElementById('api-url').value);
   const apiKey = document.getElementById('api-key').value.trim();
   if (!apiUrl || !apiKey) {
     showStatus('Fill both fields first.', 'err');
@@ -31,8 +34,23 @@ async function test() {
       method: 'GET',
       headers: { 'X-Extension-Key': apiKey },
     });
-    if (r.ok) showStatus(`Connected — HTTP ${r.status}.`, 'ok');
-    else showStatus(`HTTP ${r.status}: ${r.statusText}`, 'err');
+    if (!r.ok) {
+      showStatus(`HTTP ${r.status}: ${r.statusText}`, 'err');
+      return;
+    }
+    // A 200 is NOT sufficient. If the URL resolves to the Vue SPA instead of
+    // the JSON API, the catch-all route returns 200 with an HTML document —
+    // which used to report "Connected" on a config that could not POST at all.
+    const contentType = r.headers.get('content-type') || '';
+    if (!contentType.includes('json')) {
+      showStatus(
+        `${apiUrl} answered with ${contentType || 'no content-type'}, not JSON `
+          + '— that looks like the FC web UI rather than its API.',
+        'err',
+      );
+      return;
+    }
+    showStatus(`Connected to ${apiUrl} — HTTP ${r.status}.`, 'ok');
   } catch (e) {
     showStatus(`Cannot reach ${apiUrl}: ${e.message}`, 'err');
   }

extension/package.json

@@ -1,15 +1,17 @@
 {
   "name": "fabledcurator-extension",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "description": "Firefox extension for FabledCurator",
   "scripts": {
-    "lint":  "web-ext lint --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore",
-    "start": "web-ext run --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore --firefox=firefox",
-    "build": "web-ext build --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore --overwrite-dest",
-    "sign":  "web-ext sign --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore --channel=unlisted --api-key=$WEB_EXT_API_KEY --api-secret=$WEB_EXT_API_SECRET"
+    "lint":  "web-ext lint --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore vitest.config.js \"test/**\"",
+    "start": "web-ext run --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore vitest.config.js \"test/**\" --firefox=firefox",
+    "build": "web-ext build --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore vitest.config.js \"test/**\" --overwrite-dest",
+    "sign":  "web-ext sign --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore vitest.config.js \"test/**\" --channel=unlisted --api-key=$WEB_EXT_API_KEY --api-secret=$WEB_EXT_API_SECRET",
+    "test:unit": "vitest run"
   },
   "devDependencies": {
+    "vitest": "^4.0.0",
     "web-ext": "^10.0.0"
   }
 }

extension/popup/popup.js

@@ -2,6 +2,15 @@ document.addEventListener('DOMContentLoaded', init);
 
 const CONNECTION_TEST_INTERVAL = 2 * 60 * 1000;
 
+// A centered muted note div — the loading / empty state shared by the platform
+// and sources lists.
+function mutedNote(text) {
+  const d = document.createElement('div');
+  d.style.cssText = 'text-align:center;padding:18px;color:var(--on-surface-variant);';
+  d.textContent = text;
+  return d;
+}
+
 async function init() {
   try {
     const cfg = await browser.runtime.sendMessage({ type: 'GET_CONFIG' });
@@ -38,10 +47,7 @@ function showSetupRequired() {
 function showPlatformsLoading() {
   const c = document.getElementById('platforms-list');
   c.textContent = '';
-  const d = document.createElement('div');
-  d.style.cssText = 'text-align:center;padding:18px;color:var(--on-surface-variant);';
-  d.textContent = 'Loading platforms…';
-  c.appendChild(d);
+  c.appendChild(mutedNote('Loading platforms…'));
 }
 
 async function testConnectionIfNeeded() {
@@ -183,10 +189,7 @@ async function exportAllCookies() {
 async function loadSources() {
   const c = document.getElementById('sources-list');
   c.textContent = '';
-  const d = document.createElement('div');
-  d.style.cssText = 'text-align:center;padding:18px;color:var(--on-surface-variant);';
-  d.textContent = 'Loading sources…';
-  c.appendChild(d);
+  c.appendChild(mutedNote('Loading sources…'));
   const r = await browser.runtime.sendMessage({ type: 'LIST_SOURCES' });
   c.textContent = '';
   if (r.error) {
@@ -197,10 +200,7 @@ async function loadSources() {
     return;
   }
   if (!r.sources || r.sources.length === 0) {
-    const empty = document.createElement('div');
-    empty.style.cssText = 'text-align:center;padding:18px;color:var(--on-surface-variant);';
-    empty.textContent = 'No sources yet.';
-    c.appendChild(empty);
+    c.appendChild(mutedNote('No sources yet.'));
     return;
   }
   for (const src of r.sources) c.appendChild(createSourceRow(src));

extension/test/helpers/loadLib.js

@@ -0,0 +1,29 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const LIB_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..', '..', 'lib')
+
+/**
+ * Load an extension lib and hand back the globals it declares.
+ *
+ * The files under lib/ are CLASSIC scripts, not ES modules: manifest.json
+ * lists them in `background.scripts` and options.html pulls them in with a
+ * plain <script> tag, so they declare bare functions into a shared scope and
+ * export nothing. Rather than bolt a `module.exports` shim onto production
+ * code that would never run in the browser, evaluate the real file the same
+ * way the browser does — as a script body — and pick the declarations back out.
+ *
+ * This means the specs exercise the exact bytes that get packaged into the
+ * XPI. Only usable for libs that touch no browser APIs at load time
+ * (url.js, platforms.js); cookies.js and api.js reference `browser.*` and
+ * would need stubbing, which is why they aren't loaded this way.
+ *
+ * @param {string} filename e.g. 'url.js'
+ * @param {string[]} names  declarations to return, e.g. ['normalizeApiUrl']
+ */
+export function loadLib(filename, names) {
+  const source = readFileSync(path.join(LIB_DIR, filename), 'utf8')
+  const factory = new Function(`${source}\nreturn { ${names.join(', ')} }`)
+  return factory()
+}

extension/test/platforms.spec.js

@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest'
+import { loadLib } from './helpers/loadLib.js'
+
+const { getPlatformFromUrl, isArtistPage, PLATFORMS, PLATFORM_ARTIST_PATTERNS } = loadLib(
+  'platforms.js',
+  ['getPlatformFromUrl', 'isArtistPage', 'PLATFORMS', 'PLATFORM_ARTIST_PATTERNS']
+)
+
+describe('getPlatformFromUrl', () => {
+  it('identifies each platform from a domain URL', () => {
+    expect(getPlatformFromUrl('https://www.patreon.com/Atole')).toBe('patreon')
+    expect(getPlatformFromUrl('https://subscribestar.adult/someone')).toBe('subscribestar')
+    expect(getPlatformFromUrl('https://www.hentai-foundry.com/user/someone')).toBe('hentaifoundry')
+    expect(getPlatformFromUrl('https://discord.com/channels/@me')).toBe('discord')
+    expect(getPlatformFromUrl('https://www.pixiv.net/en/users/123')).toBe('pixiv')
+    expect(getPlatformFromUrl('https://www.deviantart.com/someone')).toBe('deviantart')
+  })
+
+  it('accepts http as well as https, with or without www', () => {
+    expect(getPlatformFromUrl('http://patreon.com/Atole')).toBe('patreon')
+    expect(getPlatformFromUrl('https://www.patreon.com/Atole')).toBe('patreon')
+  })
+
+  it('returns null for unrelated hosts', () => {
+    expect(getPlatformFromUrl('https://example.com/patreon.com')).toBe(null)
+    expect(getPlatformFromUrl('https://not-patreon.com/Atole')).toBe(null)
+    expect(getPlatformFromUrl('')).toBe(null)
+  })
+})
+
+describe('isArtistPage', () => {
+  // Regression cases from issue #1485: the Add-to-FC button vanished once the
+  // operator SUBSCRIBED to a creator, because Patreon serves subscribed users
+  // the /cw/ ("creator workspace") URL and the pattern only matched the bare
+  // root. All three creator URL shapes must match, plus inner pages — the
+  // button matters most exactly when you're subscribed.
+  it('matches all three Patreon creator URL shapes', () => {
+    expect(isArtistPage('https://www.patreon.com/Atole', 'patreon')).toBe(true)
+    expect(isArtistPage('https://www.patreon.com/c/Atole', 'patreon')).toBe(true)
+    expect(isArtistPage('https://www.patreon.com/cw/Atole', 'patreon')).toBe(true)
+  })
+
+  it('matches Patreon creator inner pages', () => {
+    expect(isArtistPage('https://www.patreon.com/cw/Atole/posts', 'patreon')).toBe(true)
+    expect(isArtistPage('https://www.patreon.com/Atole/membership', 'patreon')).toBe(true)
+  })
+
+  it('excludes Patreon navigation pages that are not creators', () => {
+    for (const nav of ['home', 'search', 'messages', 'notifications', 'library', 'settings']) {
+      expect(isArtistPage(`https://www.patreon.com/${nav}`, 'patreon')).toBe(false)
+      expect(isArtistPage(`https://www.patreon.com/${nav}/anything`, 'patreon')).toBe(false)
+    }
+  })
+
+  it('matches SubscribeStar creator roots on both TLDs but not feed pages', () => {
+    expect(isArtistPage('https://subscribestar.adult/someone', 'subscribestar')).toBe(true)
+    expect(isArtistPage('https://subscribestar.com/someone', 'subscribestar')).toBe(true)
+    expect(isArtistPage('https://subscribestar.adult/feed', 'subscribestar')).toBe(false)
+    expect(isArtistPage('https://subscribestar.adult/messages', 'subscribestar')).toBe(false)
+  })
+
+  it('matches Hentai Foundry user pages only', () => {
+    expect(isArtistPage('https://www.hentai-foundry.com/user/someone', 'hentaifoundry')).toBe(true)
+    expect(isArtistPage('https://www.hentai-foundry.com/pictures/popular', 'hentaifoundry')).toBe(
+      false
+    )
+  })
+
+  it('matches Pixiv numeric user pages, with or without the /en/ prefix', () => {
+    expect(isArtistPage('https://www.pixiv.net/users/12345', 'pixiv')).toBe(true)
+    expect(isArtistPage('https://www.pixiv.net/en/users/12345', 'pixiv')).toBe(true)
+    expect(isArtistPage('https://www.pixiv.net/en/artworks/999', 'pixiv')).toBe(false)
+  })
+
+  it('excludes DeviantArt navigation roots', () => {
+    expect(isArtistPage('https://www.deviantart.com/someone', 'deviantart')).toBe(true)
+    expect(isArtistPage('https://www.deviantart.com/home', 'deviantart')).toBe(false)
+    expect(isArtistPage('https://www.deviantart.com/watch', 'deviantart')).toBe(false)
+  })
+
+  it('returns false for a platform with no artist pattern (discord)', () => {
+    expect(isArtistPage('https://discord.com/channels/@me', 'discord')).toBe(false)
+  })
+
+  it('returns false for an unknown platform key', () => {
+    expect(isArtistPage('https://www.patreon.com/Atole', 'nope')).toBe(false)
+  })
+})
+
+describe('platform table integrity', () => {
+  it('gives every artist pattern a corresponding platform entry', () => {
+    // A pattern keyed to a platform that no longer exists is dead code that
+    // silently never fires; the reverse (a platform with no pattern) is the
+    // legitimate discord case, so only this direction is an error.
+    for (const key of Object.keys(PLATFORM_ARTIST_PATTERNS)) {
+      expect(Object.keys(PLATFORMS)).toContain(key)
+    }
+  })
+
+  it('gives every platform the fields the popup renders', () => {
+    for (const [key, platform] of Object.entries(PLATFORMS)) {
+      expect(platform.name, `${key}.name`).toBeTruthy()
+      expect(platform.color, `${key}.color`).toMatch(/^#[0-9A-Fa-f]{6}$/)
+      expect(['cookies', 'token'], `${key}.authType`).toContain(platform.authType)
+      expect(platform.urlPattern, `${key}.urlPattern`).toBeInstanceOf(RegExp)
+      expect(Array.isArray(platform.domains), `${key}.domains`).toBe(true)
+      expect(platform.domains.length, `${key}.domains`).toBeGreaterThan(0)
+    }
+  })
+
+  it('keeps every artist URL matched by its own platform pattern too', () => {
+    // isArtistPage is only ever consulted after getPlatformFromUrl resolves a
+    // key, so an artist pattern matching a URL its platform's urlPattern
+    // rejects would be unreachable.
+    const samples = {
+      patreon: 'https://www.patreon.com/cw/Atole',
+      subscribestar: 'https://subscribestar.adult/someone',
+      hentaifoundry: 'https://www.hentai-foundry.com/user/someone',
+      deviantart: 'https://www.deviantart.com/someone',
+      pixiv: 'https://www.pixiv.net/en/users/12345'
+    }
+    for (const [key, url] of Object.entries(samples)) {
+      expect(isArtistPage(url, key), `${key} artist pattern`).toBe(true)
+      expect(getPlatformFromUrl(url), `${key} urlPattern`).toBe(key)
+    }
+  })
+})

extension/test/url.spec.js

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest'
+import { loadLib } from './helpers/loadLib.js'
+
+const { normalizeApiUrl, webRootFromApiUrl } = loadLib('url.js', [
+  'normalizeApiUrl',
+  'webRootFromApiUrl'
+])
+
+describe('normalizeApiUrl', () => {
+  // The bug this exists for (issue #2393): the instance root was accepted and
+  // stored verbatim, so every request went to /credentials instead of
+  // /api/credentials. That path is a Vue router route, so the SPA catch-all
+  // answered GET with 200 HTML and rejected POST with 405 — which read as a
+  // backend bug rather than a URL one.
+  it('appends /api to an instance root', () => {
+    expect(normalizeApiUrl('http://curator.traefik.internal')).toBe(
+      'http://curator.traefik.internal/api'
+    )
+  })
+
+  it('leaves an API root alone rather than doubling the suffix', () => {
+    expect(normalizeApiUrl('http://curator.traefik.internal/api')).toBe(
+      'http://curator.traefik.internal/api'
+    )
+  })
+
+  it('is idempotent', () => {
+    const once = normalizeApiUrl('http://curator.example.com')
+    expect(normalizeApiUrl(once)).toBe(once)
+  })
+
+  it('strips trailing slashes before deciding', () => {
+    expect(normalizeApiUrl('http://curator.example.com/')).toBe('http://curator.example.com/api')
+    expect(normalizeApiUrl('http://curator.example.com///')).toBe('http://curator.example.com/api')
+    expect(normalizeApiUrl('http://curator.example.com/api/')).toBe('http://curator.example.com/api')
+  })
+
+  it('trims surrounding whitespace (paste artifacts)', () => {
+    expect(normalizeApiUrl('  http://curator.example.com  ')).toBe(
+      'http://curator.example.com/api'
+    )
+  })
+
+  it('matches the /api suffix case-insensitively', () => {
+    expect(normalizeApiUrl('http://curator.example.com/API')).toBe('http://curator.example.com/API')
+  })
+
+  it('returns empty string for empty/nullish input, never a bare "/api"', () => {
+    // isConfigured() gates on truthiness, so a bogus '/api' here would read as
+    // "configured" and produce a request against the options page's own origin.
+    expect(normalizeApiUrl('')).toBe('')
+    expect(normalizeApiUrl('   ')).toBe('')
+    expect(normalizeApiUrl(null)).toBe('')
+    expect(normalizeApiUrl(undefined)).toBe('')
+  })
+
+  it('does not treat a path merely containing "api" as the suffix', () => {
+    expect(normalizeApiUrl('http://curator.example.com/apiary')).toBe(
+      'http://curator.example.com/apiary/api'
+    )
+  })
+
+  it('preserves a subpath deployment', () => {
+    expect(normalizeApiUrl('http://host.internal/curator')).toBe('http://host.internal/curator/api')
+  })
+})
+
+describe('webRootFromApiUrl', () => {
+  // The SPA root, where the Vue router and the served XPI live. Used by
+  // OPEN_ARTIST_PAGE and the self-update check — NOT the JSON API.
+  it('strips the /api suffix', () => {
+    expect(webRootFromApiUrl('http://curator.example.com/api')).toBe('http://curator.example.com')
+  })
+
+  it('accepts an instance root unchanged', () => {
+    expect(webRootFromApiUrl('http://curator.example.com')).toBe('http://curator.example.com')
+  })
+
+  it('agrees with normalizeApiUrl in both directions', () => {
+    for (const input of ['http://curator.example.com', 'http://curator.example.com/api']) {
+      expect(normalizeApiUrl(webRootFromApiUrl(input))).toBe(normalizeApiUrl(input))
+    }
+  })
+
+  it('preserves a subpath deployment', () => {
+    expect(webRootFromApiUrl('http://host.internal/curator/api')).toBe('http://host.internal/curator')
+  })
+
+  it('returns empty string for empty/nullish input', () => {
+    expect(webRootFromApiUrl('')).toBe('')
+    expect(webRootFromApiUrl(null)).toBe('')
+  })
+})

extension/test/version.spec.js

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+const EXT_DIR = path.join(path.dirname(fileURLToPath(import.meta.url)), '..')
+const read = (name) => JSON.parse(readFileSync(path.join(EXT_DIR, name), 'utf8'))
+
+describe('extension version consistency', () => {
+  // Duplicates check (1) of ci.yml's extension-version job, deliberately.
+  // That job is the gate that can't be bypassed; this spec is the one that
+  // fails in a second on the developer's own CI lane with a readable diff.
+  // The two version strings feed different systems and nothing else reconciles
+  // them:
+  //   manifest.json  -> what `web-ext sign` signs, so what Firefox installs
+  //                     (package.json is in --ignore-files, not in the XPI)
+  //   package.json   -> build.yml's AMO cache key, the ext-<version> release
+  //                     tag, the XPI filename, and therefore the version
+  //                     /api/extension/manifest reports to the update prompt
+  it('keeps manifest.json and package.json in lockstep', () => {
+    const manifest = read('manifest.json')
+    const pkg = read('package.json')
+    expect(manifest.version).toBe(pkg.version)
+  })
+
+  it('uses a plain dotted numeric version AMO will accept', () => {
+    // AMO rejects exotic version strings, and build.yml embeds this value in a
+    // release tag and a filename — so anything needing escaping breaks the
+    // publish path rather than the extension.
+    expect(read('package.json').version).toMatch(/^\d+(\.\d+)*$/)
+  })
+
+  it('declares manifest v3', () => {
+    expect(read('manifest.json').manifest_version).toBe(3)
+  })
+
+  it('never lets the CI guard ignore a file that actually ships', () => {
+    // ci.yml's extension-version job skips its bump check for paths it deems
+    // non-shipping. If it excludes something web-ext DOES package, a real
+    // change to shipped code passes the guard unnoticed — precisely the
+    // silent-stale-ship the guard exists to stop. The reverse drift (guard
+    // stricter than web-ext) only costs a needless bump, so it isn't asserted.
+    const ci = readFileSync(path.join(EXT_DIR, '..', '.forgejo', 'workflows', 'ci.yml'), 'utf8')
+    const lint = read('package.json').scripts.lint
+    const after = lint.split('--ignore-files')[1] ?? ''
+    const ignored = new Set(
+      after
+        .split(/\s+/)
+        .filter((tok) => tok && !tok.startsWith('--'))
+        .map((tok) => tok.replace(/^["']|["']$/g, ''))
+    )
+    expect(ignored.size, 'parsed --ignore-files from the lint script').toBeGreaterThan(0)
+
+    const guarded = [...ci.matchAll(/:\(exclude\)extension\/(\S+?)'/g)].map((m) => m[1])
+    expect(guarded.length, 'parsed :(exclude) entries from ci.yml').toBeGreaterThan(0)
+    for (const entry of guarded) {
+      expect(ignored, `ci.yml excludes "${entry}" but web-ext packages it`).toContain(entry)
+    }
+  })
+
+  it('lists every background script that exists, in dependency order', () => {
+    // url.js must load BEFORE api.js: api.js calls normalizeApiUrl at
+    // init()-time, and these are classic scripts sharing one scope, so a
+    // reordering here is a runtime ReferenceError with no build-time signal.
+    const scripts = read('manifest.json').background.scripts
+    for (const rel of scripts) {
+      expect(() => readFileSync(path.join(EXT_DIR, rel)), `missing ${rel}`).not.toThrow()
+    }
+    expect(scripts.indexOf('lib/url.js')).toBeLessThan(scripts.indexOf('lib/api.js'))
+  })
+})

extension/vitest.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config'
+
+// Mirrors frontend/vitest.config.js, minus the Vue plugin — the extension has
+// no SFCs and mounts nothing. Pure-logic specs only, so `node` is enough; the
+// libs under test are deliberately the ones with no browser-API surface (see
+// test/helpers/loadLib.js).
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['test/**/*.spec.js'],
+    passWithNoTests: true
+  }
+})

frontend/src/components/common/SettingNumberField.vue

@@ -0,0 +1,56 @@
+<!--
+  Canonical settings number field (DRY pass #161): a compact numeric v-text-field
+  with a built-in clamp to [min,max] on commit. Hand-rolled identically across the
+  ML settings cards (HeadsCard x6, CropProposersCard, VideoEmbeddingCard).
+
+  The clamp is the point: the cards previously sent Number(raw) straight to the
+  API, so an out-of-range value bounced off the API's 400 validator (only
+  TranslationCard clamped). This is now the single home for that clamp.
+
+  Binds `modelValue` (v-model) and emits `change` on blur/enter AFTER clamping, so
+  the parent's save reads the already-clamped value — same as the prior
+  `v-model.number` + `@change=save` pattern.
+-->
+<template>
+  <v-text-field
+    :model-value="modelValue"
+    :label="label"
+    type="number"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    :density="density" hide-details
+    :style="{ maxWidth }"
+    @update:model-value="v => emit('update:modelValue', v)"
+    @change="onCommit"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: [Number, String], default: null },
+  label: { type: String, default: '' },
+  min: { type: [Number, String], default: null },
+  max: { type: [Number, String], default: null },
+  step: { type: [Number, String], default: 1 },
+  maxWidth: { type: String, default: '200px' },
+  density: { type: String, default: 'compact' },
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue', 'change'])
+
+function onCommit() {
+  // On blur/enter: coerce to a number and clamp to [min,max] so an out-of-range
+  // value never reaches the API. props.modelValue reflects the latest keystroke
+  // (kept in sync by the passthrough above); re-emit the clamped number, then let
+  // the parent persist.
+  let n = Number(props.modelValue)
+  if (!Number.isNaN(n)) {
+    if (props.min !== null && props.min !== '') n = Math.max(Number(props.min), n)
+    if (props.max !== null && props.max !== '') n = Math.min(Number(props.max), n)
+    if (n !== Number(props.modelValue)) emit('update:modelValue', n)
+  }
+  emit('change')
+}
+</script>

frontend/src/components/common/SettingToggleRow.vue

@@ -0,0 +1,42 @@
+<!--
+  Canonical settings toggle row (DRY pass #161): an accent icon + an uppercase
+  .fc-section-h label + a right-aligned switch. Hand-rolled identically in the
+  ML settings cards (HeadsCard x3, CropProposersCard, MLBackfillCard).
+
+  Two-way binds `modelValue` (so the parent switch state stays optimistic) AND
+  emits `change` with the new boolean, so the parent can persist + revert on
+  failure — matching the prior `v-model` + `@update:model-value=handler` pattern.
+-->
+<template>
+  <div class="d-flex align-center mb-1" style="gap: 10px;">
+    <v-icon v-if="icon" size="18" :color="iconColor">{{ icon }}</v-icon>
+    <span class="fc-section-h">{{ label }}</span>
+    <v-switch
+      :model-value="modelValue"
+      :loading="loading"
+      :disabled="disabled"
+      hide-details density="compact" color="success" class="ml-auto"
+      @update:model-value="onSwitch"
+    />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  icon: { type: String, default: '' },
+  // Icon tint. Default accent; pass null for the theme default (e.g. when a row
+  // is off). null (not undefined) so the default doesn't override it.
+  iconColor: { type: String, default: 'accent' },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+})
+const emit = defineEmits(['update:modelValue', 'change'])
+
+function onSwitch(v) {
+  const b = !!v
+  emit('update:modelValue', b)
+  emit('change', b)
+}
+</script>

frontend/src/components/settings/CropProposersCard.vue

@@ -15,28 +15,23 @@
     </p>
 
     <div v-for="p in proposers" :key="p.key" class="fc-proposer">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" :color="p.on ? 'accent' : undefined">{{ p.icon }}</v-icon>
-        <span class="fc-section-h">{{ p.label }}</span>
-        <v-switch
-          v-model="p.on" :loading="busy" hide-details density="compact"
-          color="success" class="ml-auto"
-          @update:model-value="v => saveToggle(p, v)"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="p.on" :loading="busy" :icon="p.icon"
+        :icon-color="p.on ? 'accent' : null" :label="p.label"
+        @change="v => saveToggle(p, v)"
+      />
       <p class="fc-muted text-body-2 mb-2">{{ p.help }}</p>
       <div class="d-flex flex-wrap mb-4" style="gap: 12px;">
         <v-text-field
           v-model="p.weights" label="Weights" density="compact" hide-details
           style="min-width: 300px; flex: 1;" :disabled="busy || !p.on"
           placeholder="name | URL | hf_repo::file"
-          @change="save({ [`detector_${p.key}_weights`]: p.weights })"
+          @change="saveField({ [`detector_${p.key}_weights`]: p.weights })"
         />
-        <v-text-field
-          v-model.number="p.conf" label="Confidence" type="number"
-          min="0" max="1" step="0.05" density="compact" hide-details
-          style="max-width: 140px;" :disabled="busy || !p.on"
-          @change="save({ [`detector_${p.key}_conf`]: Number(p.conf) })"
+        <SettingNumberField
+          v-model="p.conf" label="Confidence" :min="0" :max="1" :step="0.05"
+          max-width="140px" :disabled="busy || !p.on"
+          @change="saveField({ [`detector_${p.key}_conf`]: Number(p.conf) })"
         />
       </div>
     </div>
@@ -48,12 +43,12 @@
         storage. Dedupe IoU drops near-duplicate crops before embedding.
       </p>
       <div class="d-flex flex-wrap" style="gap: 12px;">
-        <v-text-field
+        <SettingNumberField
           v-for="c in caps" :key="c.key"
-          v-model.number="c.val" :label="c.label" type="number"
-          :min="c.min" :max="c.max" :step="c.step || 1" density="compact"
-          hide-details style="max-width: 165px;" :disabled="busy"
-          @change="save({ [c.key]: Number(c.val) })"
+          v-model="c.val" :label="c.label"
+          :min="c.min" :max="c.max" :step="c.step || 1"
+          max-width="165px" :disabled="busy"
+          @change="saveField({ [c.key]: Number(c.val) })"
         />
       </div>
     </div>
@@ -61,14 +56,16 @@
 </template>
 
 <script setup>
-import { toast } from '../../utils/toast.js'
 import { onMounted, ref } from 'vue'
 
 import MaintenanceTile from '../common/MaintenanceTile.vue'
+import SettingNumberField from '../common/SettingNumberField.vue'
+import SettingToggleRow from '../common/SettingToggleRow.vue'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 import { useMLStore } from '../../stores/ml.js'
 
 const mlSettings = useMLStore()
-const busy = ref(false)
+const { busy, save } = useSettingSave(mlSettings.patchSettings)
 const proposers = ref([])
 const caps = ref([])
 
@@ -111,31 +108,20 @@ onMounted(async () => {
   caps.value = CAP_DEFS.map(c => ({ ...c, val: s[c.key] ?? 0 }))
 })
 
-async function save(patch, revert) {
-  busy.value = true
-  try {
-    await mlSettings.patchSettings(patch)
-    toast({ text: 'Saved', type: 'success' })
-  } catch (e) {
-    if (revert) revert()
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    busy.value = false
-  }
+// Field @change → persist with a "Saved" confirmation. SettingNumberField has
+// already clamped numeric values to their [min,max] before this fires.
+function saveField(patch) {
+  save(patch, { successMessage: 'Saved' })
 }
 
-function saveToggle (p, v) {
+async function saveToggle(p, v) {
   // Revert the switch on failure so it never lies about the persisted state.
-  save({ [`detector_${p.key}_enabled`]: !!v }, () => { p.on = !v })
+  const ok = await save({ [`detector_${p.key}_enabled`]: !!v }, { successMessage: 'Saved' })
+  if (!ok) p.on = !v
 }
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-.fc-section-h {
-  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
-  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
-}
 .fc-proposer {
   border-top: 1px solid rgb(var(--v-theme-surface-light)); padding-top: 14px;
 }

frontend/src/components/settings/DangerZoneCard.vue

@@ -112,7 +112,6 @@ async function onCommit() {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-code {
   background: rgb(var(--v-theme-surface-light));
   border-radius: 4px; padding: 2px 8px;

frontend/src/components/settings/DbMaintenanceCard.vue

@@ -42,7 +42,7 @@
           </tr>
         </tbody>
       </v-table>
-      <p v-else class="text-caption mt-3" style="opacity: 0.6;">
+      <p v-else class="text-caption mt-3 fc-muted">
         No table statistics yet.
       </p>
   </MaintenanceTile>

frontend/src/components/settings/DownloadsActivityPanel.vue

@@ -72,6 +72,5 @@ onUnmounted(() => { if (pollId) clearInterval(pollId) })
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-bad { color: rgb(var(--v-theme-error)); }
 </style>

frontend/src/components/settings/GpuActivityPanel.vue

@@ -95,7 +95,6 @@ onUnmounted(() => { if (pollId) clearInterval(pollId) })
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-cells { display: flex; gap: 28px; }
 .fc-cell__n {
   font-size: 20px; font-weight: 700; line-height: 1.1;
@@ -105,6 +104,5 @@ onUnmounted(() => { if (pollId) clearInterval(pollId) })
   font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-good { color: rgb(var(--v-theme-success)); }
 .fc-bad { color: rgb(var(--v-theme-error)); }
 </style>

frontend/src/components/settings/GpuAgentCard.vue

@@ -367,11 +367,6 @@ async function onReprocess() {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-.fc-section-h {
-  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
-  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
-}
 .fc-token {
   display: flex; align-items: center; gap: 4px;
   background: rgb(var(--v-theme-surface-light)); border-radius: 6px;
@@ -390,6 +385,4 @@ async function onReprocess() {
   font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-good { color: rgb(var(--v-theme-success)); }
-.fc-weak { color: rgb(var(--v-theme-error)); }
 </style>

frontend/src/components/settings/GpuTriageCard.vue

@@ -155,11 +155,6 @@ async function onRecover(it) {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-.fc-section-h {
-  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
-  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
-}
 .fc-queue { display: flex; gap: 24px; }
 .fc-q__n {
   font-size: 20px; font-weight: 700; line-height: 1.1;
@@ -169,8 +164,6 @@ async function onRecover(it) {
   font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
   color: rgb(var(--v-theme-on-surface-variant));
 }
-.fc-good { color: rgb(var(--v-theme-success)); }
-.fc-weak { color: rgb(var(--v-theme-error)); }
 .fc-defect {
   display: flex; align-items: center; gap: 12px;
   background: rgb(var(--v-theme-surface-light)); border-radius: 8px;

frontend/src/components/settings/HeadsCard.vue

@@ -95,14 +95,10 @@
 
     <!-- Earned auto-apply -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-lightning-bolt</v-icon>
-        <span class="fc-section-h">Auto-apply</span>
-        <v-switch
-          v-model="autoEnabled" :loading="settingBusy" hide-details density="compact"
-          color="success" class="ml-auto" @update:model-value="onToggleAuto"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="autoEnabled" :loading="settingBusy"
+        icon="mdi-lightning-bolt" label="Auto-apply" @change="onToggleAuto"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Graduated heads (⚡, with ≥ {{ autoMinPosInput }} examples) apply their tag
         on their own where they clear {{ Math.round((autoPrecisionInput || 0) * 100) }}%
@@ -111,17 +107,14 @@
       </p>
 
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="autoPrecisionInput" label="Precision target"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="autoPrecisionInput" label="Precision target"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSaveSettings"
         />
-        <v-text-field
-          v-model.number="autoMinPosInput" label="Min examples to fire"
-          type="number" min="1" density="compact" hide-details
-          style="max-width: 200px;" :disabled="settingBusy"
-          @change="onSaveSettings"
+        <SettingNumberField
+          v-model="autoMinPosInput" label="Min examples to fire"
+          :min="1" :disabled="settingBusy" @change="onSaveSettings"
         />
       </div>
 
@@ -161,15 +154,11 @@
 
     <!-- Presentation chrome auto-hide (#141) -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-image-off-outline</v-icon>
-        <span class="fc-section-h">Hide presentation chrome</span>
-        <v-switch
-          v-model="presentationEnabled" :loading="settingBusy" hide-details
-          density="compact" color="success" class="ml-auto"
-          @update:model-value="onTogglePresentation"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="presentationEnabled" :loading="settingBusy"
+        icon="mdi-image-off-outline" label="Hide presentation chrome"
+        @change="onTogglePresentation"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Auto-hide <code>banner</code> chrome from the gallery once a head has
         learned it (≥ {{ minPositives }} examples) and clears
@@ -180,16 +169,14 @@
         tag), it's flagged for review instead of buried. Every auto-hide is reversible.
       </p>
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="presentationThresholdInput" label="Hide confidence"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="presentationThresholdInput" label="Hide confidence"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSavePresentation"
         />
-        <v-text-field
-          v-model.number="presentationConflictInput" label="Flag if content ≥"
-          type="number" min="0" max="1" step="0.05" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="presentationConflictInput" label="Flag if content ≥"
+          :min="0" :max="1" :step="0.05" :disabled="settingBusy"
           @change="onSavePresentation"
         />
       </div>
@@ -197,15 +184,11 @@
 
     <!-- Process auto-tagging (#1464): wip / editor screenshot -->
     <div class="fc-auto mt-6">
-      <div class="d-flex align-center mb-1" style="gap: 10px;">
-        <v-icon size="18" color="accent">mdi-progress-wrench</v-icon>
-        <span class="fc-section-h">Auto-tag work-in-progress</span>
-        <v-switch
-          v-model="processEnabled" :loading="settingBusy" hide-details
-          density="compact" color="success" class="ml-auto"
-          @update:model-value="onToggleProcess"
-        />
-      </div>
+      <SettingToggleRow
+        v-model="processEnabled" :loading="settingBusy"
+        icon="mdi-progress-wrench" label="Auto-tag work-in-progress"
+        @change="onToggleProcess"
+      />
       <p class="fc-muted text-body-2 mb-3">
         Auto-tag <code>wip</code> and <code>editor screenshot</code> process art
         once a head has learned them (≥ {{ minPositives }} examples) and clears
@@ -217,16 +200,14 @@
         manual tags, never its own guesses — so it can't run away. Every tag reversible.
       </p>
       <div class="d-flex mb-3" style="gap: 12px;">
-        <v-text-field
-          v-model.number="processThresholdInput" label="Tag confidence"
-          type="number" min="0.5" max="0.999" step="0.01" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="processThresholdInput" label="Tag confidence"
+          :min="0.5" :max="0.999" :step="0.01" :disabled="settingBusy"
           @change="onSaveProcess"
         />
-        <v-text-field
-          v-model.number="processConflictInput" label="Flag if content ≥"
-          type="number" min="0" max="1" step="0.05" density="compact"
-          hide-details style="max-width: 200px;" :disabled="settingBusy"
+        <SettingNumberField
+          v-model="processConflictInput" label="Flag if content ≥"
+          :min="0" :max="1" :step="0.05" :disabled="settingBusy"
           @change="onSaveProcess"
         />
       </div>
@@ -256,7 +237,7 @@
               <td class="fc-r fc-mono">{{ c.n_auto_applied }}</td>
               <td class="fc-r fc-mono">{{ c.n_misfires }}</td>
               <td class="fc-r fc-mono" :class="rateClass(c.misfire_rate)">
-                {{ ratePct(c.misfire_rate) }}
+                {{ pct(c.misfire_rate) }}
               </td>
               <td class="fc-r fc-mono">{{ c.n_underfires }}</td>
             </tr>
@@ -272,6 +253,9 @@ import { toast } from '../../utils/toast.js'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import MaintenanceTile from '../common/MaintenanceTile.vue'
+import SettingNumberField from '../common/SettingNumberField.vue'
+import SettingToggleRow from '../common/SettingToggleRow.vue'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 import { useHeadsStore } from '../../stores/heads.js'
 import { useMLStore } from '../../stores/ml.js'
 
@@ -285,7 +269,9 @@ let pollTimer = null
 const autoEnabled = ref(false)
 const autoPrecisionInput = ref(0.97)
 const autoMinPosInput = ref(30)
-const settingBusy = ref(false)
+// Shared settings-save flow (busy + toast + revert); `settingBusy` gates the
+// toggles/fields, `save` returns ok/false for the optimistic-switch revert.
+const { busy: settingBusy, save } = useSettingSave(mlSettings.patchSettings)
 const autoBusy = ref(false)
 const autoStatus = ref(null)
 const metricsData = ref(null)
@@ -395,81 +381,39 @@ function startAutoPoll() {
 function stopAutoPoll() { if (autoTimer) { clearInterval(autoTimer); autoTimer = null } }
 
 async function onToggleAuto(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ head_auto_apply_enabled: !!val })
-    toast({ text: val ? 'Auto-apply on' : 'Auto-apply off', type: 'success' })
-  } catch (e) {
-    autoEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ head_auto_apply_enabled: !!val },
+    { successMessage: val ? 'Auto-apply on' : 'Auto-apply off', errorPrefix: 'Could not update' })
+  if (!ok) autoEnabled.value = !val   // revert the switch
 }
 async function onSaveSettings() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      head_auto_apply_precision: Number(autoPrecisionInput.value),
-      head_auto_apply_min_positives: Number(autoMinPosInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    head_auto_apply_precision: Number(autoPrecisionInput.value),
+    head_auto_apply_min_positives: Number(autoMinPosInput.value),
+  })
 }
 
 async function onTogglePresentation(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ presentation_auto_apply_enabled: !!val })
-    toast({ text: val ? 'Chrome auto-hide on' : 'Chrome auto-hide off', type: 'success' })
-  } catch (e) {
-    presentationEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ presentation_auto_apply_enabled: !!val },
+    { successMessage: val ? 'Chrome auto-hide on' : 'Chrome auto-hide off', errorPrefix: 'Could not update' })
+  if (!ok) presentationEnabled.value = !val   // revert the switch
 }
 async function onSavePresentation() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      presentation_auto_apply_threshold: Number(presentationThresholdInput.value),
-      presentation_conflict_threshold: Number(presentationConflictInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    presentation_auto_apply_threshold: Number(presentationThresholdInput.value),
+    presentation_conflict_threshold: Number(presentationConflictInput.value),
+  })
 }
 
 async function onToggleProcess(val) {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({ process_auto_apply_enabled: !!val })
-    toast({ text: val ? 'WIP auto-tag on' : 'WIP auto-tag off', type: 'success' })
-  } catch (e) {
-    processEnabled.value = !val   // revert the switch
-    toast({ text: `Could not update: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  const ok = await save({ process_auto_apply_enabled: !!val },
+    { successMessage: val ? 'WIP auto-tag on' : 'WIP auto-tag off', errorPrefix: 'Could not update' })
+  if (!ok) processEnabled.value = !val   // revert the switch
 }
 async function onSaveProcess() {
-  settingBusy.value = true
-  try {
-    await mlSettings.patchSettings({
-      process_auto_apply_threshold: Number(processThresholdInput.value),
-      process_conflict_threshold: Number(processConflictInput.value),
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-  } finally {
-    settingBusy.value = false
-  }
+  await save({
+    process_auto_apply_threshold: Number(processThresholdInput.value),
+    process_conflict_threshold: Number(processConflictInput.value),
+  })
 }
 function onPreview() { startSweep(true) }
 function onApplyNow() { startSweep(false) }
@@ -495,7 +439,6 @@ function sweepConcepts(run) {
     .sort((a, b) => b.applied - a.applied)
 }
 function sweepTotal(run) { return run?.n_applied ?? 0 }
-function ratePct(x) { return x == null ? '—' : `${Math.round(x * 100)}%` }
 function rateClass(x) {
   if (x == null) return ''
   if (x <= 0.03) return 'fc-good'
@@ -526,12 +469,6 @@ function relTime(iso) {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-
-.fc-section-h {
-  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
-  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
-}
 .fc-auto {
   border-top: 1px solid rgb(var(--v-theme-surface-light)); padding-top: 16px;
 }
@@ -588,7 +525,5 @@ function relTime(iso) {
   background: rgb(var(--v-theme-surface-light));
   padding: 1px 6px; border-radius: 999px;
 }
-.fc-good { color: rgb(var(--v-theme-success)); }
 .fc-ok { color: rgb(var(--v-theme-on-surface)); }
-.fc-weak { color: rgb(var(--v-theme-error)); }
 </style>

frontend/src/components/settings/MLBackfillCard.vue

@@ -39,13 +39,14 @@
 import { toast } from '../../utils/toast.js'
 import { onMounted, ref } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 import MaintenanceTile from '../common/MaintenanceTile.vue'
 import QueueStatusBar from './QueueStatusBar.vue'
 const store = useMLStore()
+const { busy: saving, save } = useSettingSave(store.patchSettings)
 const busy = ref(false)
 const done = ref(false)
 const enabled = ref(true)
-const saving = ref(false)
 onMounted(async () => {
   try {
     await store.loadSettings()
@@ -55,21 +56,12 @@ onMounted(async () => {
   } catch { /* non-fatal */ }
 })
 async function onToggle() {
-  saving.value = true
-  try {
-    await store.patchSettings({ cpu_embed_enabled: enabled.value })
-    toast({
-      text: enabled.value
-        ? 'CPU embedding on — imports queue embeds for the ml-worker'
-        : 'CPU embedding off — the GPU embed backfill owns whole-image embeds',
-      type: 'success',
-    })
-  } catch (e) {
-    toast({ text: `Could not save: ${e.message}`, type: 'error' })
-    enabled.value = !enabled.value
-  } finally {
-    saving.value = false
-  }
+  const ok = await save({ cpu_embed_enabled: enabled.value }, {
+    successMessage: enabled.value
+      ? 'CPU embedding on — imports queue embeds for the ml-worker'
+      : 'CPU embedding off — the GPU embed backfill owns whole-image embeds',
+  })
+  if (!ok) enabled.value = !enabled.value
 }
 async function run() {
   busy.value = true
@@ -80,5 +72,4 @@ async function run() {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 </style>

frontend/src/components/settings/MaintenancePanel.vue

@@ -24,6 +24,7 @@
         the CPU fallback.
       </p>
       <div class="fc-tile-stack">
+        <VideoEmbeddingCard />
         <GpuAgentCard />
         <GpuTriageCard />
         <MLBackfillCard />
@@ -36,7 +37,6 @@
         Suggestion thresholds, trained heads and tag aliases.
       </p>
       <div class="fc-tile-stack">
-        <MLThresholdSliders />
         <CropProposersCard />
         <HeadsCard />
         <AliasTable />
@@ -77,7 +77,7 @@ import ArchiveReextractCard from './ArchiveReextractCard.vue'
 import MissingFileRepairCard from './MissingFileRepairCard.vue'
 import GpuTriageCard from './GpuTriageCard.vue'
 import DbMaintenanceCard from './DbMaintenanceCard.vue'
-import MLThresholdSliders from './MLThresholdSliders.vue'
+import VideoEmbeddingCard from './VideoEmbeddingCard.vue'
 import CropProposersCard from './CropProposersCard.vue'
 import HeadsCard from './HeadsCard.vue'
 import GpuAgentCard from './GpuAgentCard.vue'

frontend/src/components/settings/VideoEmbeddingCard.vue

@@ -12,17 +12,17 @@
       </div>
       <v-row>
         <v-col cols="12" sm="6">
-          <v-text-field
-            v-model.number="local.video_frame_interval_seconds"
-            label="Frame interval (s)" type="number" min="0.5" step="0.5"
-            density="comfortable" hide-details @change="save"
+          <SettingNumberField
+            v-model="local.video_frame_interval_seconds"
+            label="Frame interval (s)" :min="0.5" :step="0.5"
+            density="comfortable" max-width="none" @change="onSave"
           />
         </v-col>
         <v-col cols="12" sm="6">
-          <v-text-field
-            v-model.number="local.video_max_frames"
-            label="Max frames" type="number" min="1" step="1"
-            density="comfortable" hide-details @change="save"
+          <SettingNumberField
+            v-model="local.video_max_frames"
+            label="Max frames" :min="1" :step="1"
+            density="comfortable" max-width="none" @change="onSave"
           />
         </v-col>
       </v-row>
@@ -32,21 +32,23 @@
 </template>
 
 <script setup>
-import { toast } from '../../utils/toast.js'
 import { reactive, watch } from 'vue'
 import { useMLStore } from '../../stores/ml.js'
 import MaintenanceTile from '../common/MaintenanceTile.vue'
+import SettingNumberField from '../common/SettingNumberField.vue'
+import { useSettingSave } from '../../composables/useSettingSave.js'
 
 const store = useMLStore()
+const { save } = useSettingSave(store.patchSettings)
 const local = reactive({})
 watch(() => store.settings, (s) => { if (s) Object.assign(local, s) }, { immediate: true })
 
-async function save() {
-  const patch = {
-    video_frame_interval_seconds: local.video_frame_interval_seconds,
-    video_max_frames: local.video_max_frames
-  }
-  try { await store.patchSettings(patch) }
-  catch (e) { toast({ text: e.message, type: 'error' }) }
+// SettingNumberField clamps interval to ≥0.5 and max-frames to ≥1 before this
+// fires, so an out-of-range value never reaches the API.
+function onSave() {
+  save({
+    video_frame_interval_seconds: Number(local.video_frame_interval_seconds),
+    video_max_frames: Number(local.video_max_frames),
+  })
 }
 </script>

frontend/src/composables/useSettingSave.js

@@ -0,0 +1,33 @@
+import { ref } from 'vue'
+import { toast } from '../utils/toast.js'
+
+// The shared "persist a settings patch" flow for the ML settings cards. Flips a
+// busy flag, calls the store's patch (which rethrows on failure), toasts
+// success/error, and returns true/false so a toggle handler can revert its
+// optimistic switch on failure. Centralises the try/catch/toast the cards each
+// hand-rolled (HeadsCard x6, CropProposersCard, MLBackfillCard) — and where the
+// threshold-clamp drifted; the clamp now lives in <SettingNumberField>.
+//
+// Pass the store's patch fn, e.g. useSettingSave(ml.patchSettings).
+export function useSettingSave(patchFn) {
+  const busy = ref(false)
+
+  // opts.successMessage — toast on success (toggles announce their new state;
+  // silent field-saves omit it). opts.errorPrefix — the failure toast prefix
+  // ("Could not save" default; toggles used "Could not update").
+  async function save(patch, { successMessage = '', errorPrefix = 'Could not save' } = {}) {
+    busy.value = true
+    try {
+      await patchFn(patch)
+      if (successMessage) toast({ text: successMessage, type: 'success' })
+      return true
+    } catch (e) {
+      toast({ text: `${errorPrefix}: ${e.message}`, type: 'error' })
+      return false
+    } finally {
+      busy.value = false
+    }
+  }
+
+  return { busy, save }
+}

frontend/src/styles/app.css

@@ -40,6 +40,20 @@
    emits, so no specificity/reorder fight — no !important needed. */
 .fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 
+/* Section sub-heading in settings cards (DRY pass #161): was redefined
+   identically in 4 cards, and TranslationCard used the class with NO local def
+   so its section headers rendered unstyled. Now one global utility. */
+.fc-section-h {
+  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
+  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
+}
+
+/* Status text colours (DRY pass #161): fc-good = success, fc-weak = error,
+   consolidated from the GPU / heads cards. fc-ok is intentionally NOT global —
+   it means on-surface in HeadsCard but success in QueuesTable. */
+.fc-good { color: rgb(var(--v-theme-success)); }
+.fc-weak { color: rgb(var(--v-theme-error)); }
+
 /* Vuetify 4 dropped its global CSS reset (normalisation moved into each
    component). FC's layouts assumed the reset zeroed margins on text elements, so
    restore just that — the "minimal reset" from the v4 upgrade guide — inside

frontend/src/views/ExploreView.vue

@@ -284,7 +284,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 
 /* Full-height workspace under the sticky top nav. --fc-nav-h is the nav's REAL
    measured height (set by TopNav) — a hardcoded 64px here overflowed the

frontend/src/views/TagsView.vue

@@ -349,7 +349,6 @@ async function onDeleteTagConfirm() {
 .fc-tags__sentinel {
   display: flex; justify-content: center; padding: 32px 0; min-height: 60px;
 }
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 .fc-merge-preview {
   padding: 10px 12px;
   border: 1px solid rgba(var(--v-theme-on-surface), 0.12);