From c65da42593043decd229118073e62718c313dc6d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 6 Jun 2026 20:34:15 -0400
Subject: [PATCH 1/3] fix(patreon): handle the /cw/ creator-URL prefix in
 vanity extraction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A source URL like https://www.patreon.com/cw/Atole resolved vanity='cw' — the
vanity regex only skipped a /c/ prefix, so Patreon's current /cw/ ("creator
workspace") form fell through to the bare-vanity branch and captured the prefix
instead of the slug. Every /cw/ source then failed campaign-id resolution
(API + page-scrape both looked up "cw"). Operator-confirmed 2026-06-07 via the
new error text: source_url='.../cw/Atole'; vanity='cw'.

Add cw/ to the optional prefix group (ordered before c/ so the longer prefix
wins), and have the creator-page fallback try the /cw/ form too. Test covers
bare / c/ / cw/ extraction and that id: URLs stay non-vanity.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 backend/app/services/patreon_resolver.py | 20 +++++++++++++++-----
 tests/test_patreon_resolver.py           | 14 ++++++++++++++
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/backend/app/services/patreon_resolver.py b/backend/app/services/patreon_resolver.py
index c8acd2c..8c8d963 100644
--- a/backend/app/services/patreon_resolver.py
+++ b/backend/app/services/patreon_resolver.py
@@ -30,9 +30,17 @@ _CAMPAIGNS_URL = "https://www.patreon.com/api/campaigns"
 # A source URL of the form `.../id:<digits>` already carries the campaign id
 # (no lookup needed). The vanity regex deliberately EXCLUDES the id: form so the
 # two paths don't overlap.
+#
+# Patreon serves the creator vanity under several path prefixes — bare
+# (`patreon.com/Atole`), `c/` (`patreon.com/c/Atole`), and `cw/`
+# (`patreon.com/cw/Atole`, its current "creator workspace" URL). The optional
+# prefix group must list `cw/` BEFORE `c/` so the longer prefix wins — otherwise
+# `cw/Atole` matches the bare branch and yields vanity="cw" (operator-flagged
+# 2026-06-07: every `/cw/` source failed resolution on vanity="cw").
 _ID_URL_RE = re.compile(r"/id:(\d+)")
+_VANITY_PREFIXES = ("cw/", "c/")
 _VANITY_RE = re.compile(
-    r"^https?://(?:www\.)?patreon\.com/(?:c/)?(?!id:)([^/?#]+)",
+    r"^https?://(?:www\.)?patreon\.com/(?:cw/|c/)?(?!id:)([^/?#]+)",
     re.IGNORECASE,
 )
 _USER_AGENT = (
@@ -141,10 +149,12 @@ def _lookup_via_page(vanity: str, cookies_path: str | None) -> str | None:
     Patreon redirects between. Never raises."""
     jar = _load_cookie_jar(cookies_path)
     headers = {"User-Agent": _USER_AGENT, "Accept": "text/html"}
-    for page_url in (
-        f"https://www.patreon.com/{vanity}",
-        f"https://www.patreon.com/c/{vanity}",
-    ):
+    # Try the bare vanity and every known creator-path prefix Patreon
+    # redirects between (c/, cw/) — the one the source used isn't known here
+    # (extract_vanity already stripped it).
+    page_urls = [f"https://www.patreon.com/{vanity}"]
+    page_urls += [f"https://www.patreon.com/{p}{vanity}" for p in _VANITY_PREFIXES]
+    for page_url in page_urls:
         try:
             resp = requests.get(
                 page_url,
diff --git a/tests/test_patreon_resolver.py b/tests/test_patreon_resolver.py
index 6586e41..3b2e226 100644
--- a/tests/test_patreon_resolver.py
+++ b/tests/test_patreon_resolver.py
@@ -169,3 +169,17 @@ async def test_for_source_unresolvable_returns_none():
     cid, resolved = await resolve_campaign_id_for_source("not-a-patreon-url", None, {})
     assert cid is None
     assert resolved is None
+
+
+def test_extract_vanity_handles_all_path_prefixes():
+    """Patreon serves the vanity bare and under c/ and cw/ prefixes; all must
+    yield the creator slug, not the prefix (operator-flagged 2026-06-07: a
+    /cw/Atole source resolved vanity='cw')."""
+    from backend.app.services.patreon_resolver import extract_vanity
+
+    assert extract_vanity("https://www.patreon.com/Atole") == "Atole"
+    assert extract_vanity("https://www.patreon.com/c/Atole") == "Atole"
+    assert extract_vanity("https://www.patreon.com/cw/Atole") == "Atole"
+    assert extract_vanity("https://patreon.com/cw/Atole") == "Atole"
+    # id: URLs are NOT vanities (handled by the id path).
+    assert extract_vanity("https://www.patreon.com/id:123") is None

From b7d07324eee4235cbcea219701fd3c602090b2a5 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 6 Jun 2026 20:48:01 -0400
Subject: [PATCH 2/3] fix(subs): stop the lock/reload on source actions +
 regroup the row buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lock/reload: every inline source action (check / backfill / recover / toggle /
remove) ended by refetching the WHOLE subscription list (store.loadAll /
refresh), which blocked the UI and re-rendered the table — collapsing the
expanded row, which read as "locks then resets." The action APIs already return
the updated source, so the store now patches that one row in place
(_patchSource / _dropSource); the post-action loadAll/refresh calls are gone.
Toggling enabled, starting/stopping a backfill, recovering, and removing are now
instant and leave the expansion intact.

Button regroup (operator-flagged: tiny, mis-clickable, not grouped by function):
- New shared SourceActions.vue used by desktop SourceRow + mobile SourceCard.
- Frequent actions stay as size="small" buttons: Check, Backfill/Stop.
- Low-frequency / destructive actions move into a labelled overflow (⋮) menu —
  Preview backfill, Recover dropped near-duplicates, Remove source — so they
  can't be fat-fingered, and the labels spell out recover-vs-backfill.
- Edit moves next to the source URL (its identity), out of the action cluster
  where it sat beside Remove.
- Single-source Remove now confirms (it had no guard before).

Tests: store patches/drops in place without dropping the cache.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../subscriptions/SourceActions.vue           | 91 +++++++++++++++++
 .../components/subscriptions/SourceCard.vue   | 80 +++++----------
 .../components/subscriptions/SourceRow.vue    | 98 +++++++------------
 .../subscriptions/SubscriptionsTab.vue        | 25 +++--
 frontend/src/stores/sources.js                | 35 ++++++-
 frontend/test/sources.spec.js                 | 35 +++++++
 6 files changed, 238 insertions(+), 126 deletions(-)
 create mode 100644 frontend/src/components/subscriptions/SourceActions.vue

diff --git a/frontend/src/components/subscriptions/SourceActions.vue b/frontend/src/components/subscriptions/SourceActions.vue
new file mode 100644
index 0000000..94b2a02
--- /dev/null
+++ b/frontend/src/components/subscriptions/SourceActions.vue
@@ -0,0 +1,91 @@
+<template>
+  <!-- Shared per-source action cluster (desktop SourceRow + mobile SourceCard).
+       Frequent actions stay as buttons; low-frequency / destructive ones move
+       into a labelled overflow menu so they can't be mis-clicked, and the
+       labels spell out what each one does (recover vs backfill). -->
+  <div class="fc-src-actions">
+    <v-btn
+      icon size="small" variant="text" :loading="checking"
+      @click.stop="emit('check', source)"
+    >
+      <v-icon>mdi-play</v-icon>
+      <v-tooltip activator="parent" location="top">
+        Check now — fetch posts published since the last check
+      </v-tooltip>
+    </v-btn>
+    <v-btn
+      icon size="small" variant="text"
+      :color="running ? 'warning' : undefined"
+      @click.stop="emit('backfill', source)"
+    >
+      <v-icon>{{ running ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
+      <v-tooltip activator="parent" location="top">
+        {{ running
+          ? (recovering ? 'Stop recovery' : 'Stop backfill')
+          : 'Backfill — one-time walk of the FULL post history until complete' }}
+      </v-tooltip>
+    </v-btn>
+
+    <v-menu location="bottom end">
+      <template #activator="{ props: menuProps }">
+        <v-btn icon size="small" variant="text" v-bind="menuProps" @click.stop>
+          <v-icon>mdi-dots-vertical</v-icon>
+          <v-tooltip activator="parent" location="top">More actions</v-tooltip>
+        </v-btn>
+      </template>
+      <v-list density="compact" min-width="260">
+        <v-list-item
+          v-if="isPatreon && !running"
+          prepend-icon="mdi-eye-outline"
+          @click="emit('preview', source)"
+        >
+          <v-list-item-title>Preview backfill</v-list-item-title>
+          <v-list-item-subtitle>
+            Count what a backfill would download — nothing is downloaded
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item
+          v-if="isPatreon && !running"
+          prepend-icon="mdi-backup-restore"
+          @click="emit('recover', source)"
+        >
+          <v-list-item-title>Recover dropped near-duplicates</v-list-item-title>
+          <v-list-item-subtitle>
+            Re-fetch images previously dropped as near-dups and re-judge them
+            under the current similarity threshold
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-divider v-if="isPatreon && !running" />
+        <v-list-item
+          base-color="error"
+          prepend-icon="mdi-delete-outline"
+          @click="emit('remove', source)"
+        >
+          <v-list-item-title>Remove source</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  source: { type: Object, required: true },
+  checking: { type: Boolean, default: false },
+})
+const emit = defineEmits(['check', 'backfill', 'recover', 'preview', 'remove'])
+
+const running = computed(() => props.source.backfill_state === 'running')
+const recovering = computed(() => !!props.source.backfill_bypass_seen)
+const isPatreon = computed(() => props.source.platform === 'patreon')
+</script>
+
+<style scoped>
+.fc-src-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+</style>
diff --git a/frontend/src/components/subscriptions/SourceCard.vue b/frontend/src/components/subscriptions/SourceCard.vue
index 0e0617b..c8f5fb2 100644
--- a/frontend/src/components/subscriptions/SourceCard.vue
+++ b/frontend/src/components/subscriptions/SourceCard.vue
@@ -12,10 +12,19 @@
       />
     </div>
 
-    <a
-      :href="source.url" target="_blank" rel="noopener"
-      class="fc-source-card__url" @click.stop
-    >{{ source.url }}</a>
+    <div class="fc-source-card__url-row">
+      <a
+        :href="source.url" target="_blank" rel="noopener"
+        class="fc-source-card__url" @click.stop
+      >{{ source.url }}</a>
+      <v-btn
+        icon="mdi-pencil" size="x-small" variant="text"
+        @click.stop="$emit('edit', source)"
+      >
+        <v-icon>mdi-pencil</v-icon>
+        <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
+      </v-btn>
+    </div>
 
     <div class="fc-source-card__meta">
       <span>Last {{ formatRelative(source.last_checked_at) }}</span>
@@ -42,61 +51,20 @@
     </div>
 
     <div class="fc-source-card__actions">
-      <v-btn
-        size="x-small" variant="text" :loading="checking"
-        @click.stop="$emit('check', source)"
-      >
-        <v-icon>mdi-play</v-icon>
-        <v-tooltip activator="parent" location="top">Check now</v-tooltip>
-      </v-btn>
-      <v-btn
-        size="x-small" variant="text"
-        :color="source.backfill_state === 'running' ? 'warning' : undefined"
-        @click.stop="$emit('backfill', source)"
-      >
-        <v-icon>{{ source.backfill_state === 'running' ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
-        <v-tooltip activator="parent" location="top">
-          {{ source.backfill_state === 'running'
-            ? (source.backfill_bypass_seen ? 'Stop recovery' : 'Stop backfill')
-            : 'Backfill full history' }}
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('preview', source)"
-      >
-        <v-icon>mdi-eye-outline</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Preview — count what a backfill would download (no download)
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('recover', source)"
-      >
-        <v-icon>mdi-backup-restore</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Recover — re-fetch dropped near-dups &amp; re-evaluate under the current threshold
-        </v-tooltip>
-      </v-btn>
-      <v-btn size="x-small" variant="text" @click.stop="$emit('edit', source)">
-        <v-icon>mdi-pencil</v-icon>
-        <v-tooltip activator="parent" location="top">Edit</v-tooltip>
-      </v-btn>
-      <v-btn
-        size="x-small" variant="text" color="error"
-        @click.stop="$emit('remove', source)"
-      >
-        <v-icon>mdi-close</v-icon>
-        <v-tooltip activator="parent" location="top">Remove</v-tooltip>
-      </v-btn>
+      <SourceActions
+        :source="source" :checking="checking"
+        @check="$emit('check', $event)"
+        @backfill="$emit('backfill', $event)"
+        @recover="$emit('recover', $event)"
+        @preview="$emit('preview', $event)"
+        @remove="$emit('remove', $event)"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
+import SourceActions from './SourceActions.vue'
 import SourceHealthDot from './SourceHealthDot.vue'
 import { formatRelative } from '../../utils/date.js'
 
@@ -124,11 +92,15 @@ function onToggleEnabled(value) {
   display: flex; flex-direction: column; gap: 6px;
 }
 .fc-source-card__top { display: flex; align-items: center; gap: 8px; }
+.fc-source-card__url-row {
+  display: flex; align-items: center; gap: 4px;
+}
 .fc-source-card__url {
   color: rgb(var(--v-theme-on-surface-variant));
   text-decoration: none;
   font-size: 0.8rem;
   word-break: break-all;
+  flex: 1 1 auto; min-width: 0;
 }
 .fc-source-card__url:hover { color: rgb(var(--v-theme-accent)); }
 .fc-source-card__meta {
diff --git a/frontend/src/components/subscriptions/SourceRow.vue b/frontend/src/components/subscriptions/SourceRow.vue
index 22873be..554e7d9 100644
--- a/frontend/src/components/subscriptions/SourceRow.vue
+++ b/frontend/src/components/subscriptions/SourceRow.vue
@@ -7,10 +7,22 @@
       <v-chip size="x-small" variant="tonal" label>{{ source.platform }}</v-chip>
     </td>
     <td class="fc-source-row__url-cell">
-      <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url"
-         @click.stop>
-        {{ source.url }}
-      </a>
+      <div class="fc-source-row__url-wrap">
+        <a :href="source.url" target="_blank" rel="noopener" class="fc-source-row__url"
+           @click.stop>
+          {{ source.url }}
+        </a>
+        <!-- Edit sits next to the source identity (operator-requested), not in
+             the action cluster where it was easy to fat-finger Remove. -->
+        <v-btn
+          icon="mdi-pencil" size="x-small" variant="text"
+          class="fc-source-row__edit"
+          @click.stop="$emit('edit', source)"
+        >
+          <v-icon>mdi-pencil</v-icon>
+          <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
+        </v-btn>
+      </div>
     </td>
     <td>
       <v-switch
@@ -49,65 +61,20 @@
       <span v-else class="fc-source-row__zero">0</span>
     </td>
     <td class="fc-source-row__actions">
-      <v-btn
-        icon="mdi-play" size="x-small" variant="text"
-        :loading="checking"
-        @click.stop="$emit('check', source)"
-      >
-        <v-icon>mdi-play</v-icon>
-        <v-tooltip activator="parent" location="top">Check now</v-tooltip>
-      </v-btn>
-      <v-btn
-        size="x-small" variant="text"
-        :color="source.backfill_state === 'running' ? 'warning' : undefined"
-        @click.stop="$emit('backfill', source)"
-      >
-        <v-icon>{{ source.backfill_state === 'running' ? 'mdi-stop' : 'mdi-magnify-scan' }}</v-icon>
-        <v-tooltip activator="parent" location="top">
-          {{ source.backfill_state === 'running'
-            ? (source.backfill_bypass_seen ? 'Stop recovery' : 'Stop backfill')
-            : 'Backfill — walk the full post history until complete' }}
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('preview', source)"
-      >
-        <v-icon>mdi-eye-outline</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Preview — count what a backfill would download (no download)
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        v-if="source.platform === 'patreon' && source.backfill_state !== 'running'"
-        size="x-small" variant="text"
-        @click.stop="$emit('recover', source)"
-      >
-        <v-icon>mdi-backup-restore</v-icon>
-        <v-tooltip activator="parent" location="top">
-          Recover — re-fetch dropped near-dups &amp; re-evaluate under the current threshold
-        </v-tooltip>
-      </v-btn>
-      <v-btn
-        icon="mdi-pencil" size="x-small" variant="text"
-        @click.stop="$emit('edit', source)"
-      >
-        <v-icon>mdi-pencil</v-icon>
-        <v-tooltip activator="parent" location="top">Edit</v-tooltip>
-      </v-btn>
-      <v-btn
-        icon="mdi-close" size="x-small" variant="text" color="error"
-        @click.stop="$emit('remove', source)"
-      >
-        <v-icon>mdi-close</v-icon>
-        <v-tooltip activator="parent" location="top">Remove</v-tooltip>
-      </v-btn>
+      <SourceActions
+        :source="source" :checking="checking"
+        @check="$emit('check', $event)"
+        @backfill="$emit('backfill', $event)"
+        @recover="$emit('recover', $event)"
+        @preview="$emit('preview', $event)"
+        @remove="$emit('remove', $event)"
+      />
     </td>
   </tr>
 </template>
 
 <script setup>
+import SourceActions from './SourceActions.vue'
 import SourceHealthDot from './SourceHealthDot.vue'
 import { formatRelative } from '../../utils/date.js'
 
@@ -129,18 +96,27 @@ function onToggleEnabled(value) {
   padding-right: 0 !important;
 }
 .fc-source-row__url-cell {
-  max-width: 400px;
+  max-width: 420px;
   overflow: hidden;
 }
+.fc-source-row__url-wrap {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
 .fc-source-row__url {
   color: rgb(var(--v-theme-on-surface-variant));
   text-decoration: none;
-  display: inline-block;
-  max-width: 100%;
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Keep the edit affordance subtle until the row is hovered. */
+.fc-source-row__edit { opacity: 0.5; flex: 0 0 auto; }
+.fc-source-row:hover .fc-source-row__edit { opacity: 1; }
 .fc-source-row__url:hover { color: rgb(var(--v-theme-accent)); }
 .fc-source-row__when {
   color: rgb(var(--v-theme-on-surface-variant));
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index 8744f9d..fc2892e 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -491,13 +491,26 @@ function openEditSource(source) {
 }
 
 async function removeSource(source) {
-  await store.remove(source.id, source.artist_id)
-  await refresh()
+  // Confirm — Remove moved into the overflow menu, but a destructive action
+  // still deserves a guard (single-source removal had none before).
+  if (!globalThis.window?.confirm(
+    `Remove this ${source.platform} source?\n${source.url}\n\nThe artist and already-downloaded images stay.`,
+  )) return
+  try {
+    // store._dropSource patches the cache in place — no full reload, so the
+    // table + expansion don't reset (operator-flagged lock/reload, 2026-06-07).
+    await store.remove(source.id, source.artist_id)
+  } catch (e) {
+    toast({ text: `Remove failed: ${e?.body?.detail || e?.message || e}`, type: 'error' })
+  }
 }
 
 async function toggleSourceEnabled({ source, enabled }) {
-  await store.update(source.id, { enabled }, source.artist_id)
-  await refresh()
+  try {
+    await store.update(source.id, { enabled }, source.artist_id)
+  } catch (e) {
+    toast({ text: `Update failed: ${e?.body?.detail || e?.message || e}`, type: 'error' })
+  }
 }
 
 async function onSourceSaved() {
@@ -557,7 +570,7 @@ async function onBackfill(source) {
       await store.startBackfill(source.id, source.artist_id)
       toast({ text: `Backfill started for ${source.artist_name}`, type: 'success' })
     }
-    await store.loadAll()
+    // startBackfill/stopBackfill patch the source in place — no full reload.
   } catch (e) {
     toast({
       text: `Backfill ${running ? 'stop' : 'start'} failed: ${e?.body?.detail || e?.message || e}`,
@@ -573,7 +586,7 @@ async function onRecover(source) {
   try {
     await store.recoverSource(source.id, source.artist_id)
     toast({ text: `Recovery started for ${source.artist_name}`, type: 'success' })
-    await store.loadAll()
+    // recoverSource patches the source in place — no full reload.
   } catch (e) {
     toast({
       text: `Recovery start failed: ${e?.body?.detail || e?.message || e}`,
diff --git a/frontend/src/stores/sources.js b/frontend/src/stores/sources.js
index f16ad8e..0b4d132 100644
--- a/frontend/src/stores/sources.js
+++ b/frontend/src/stores/sources.js
@@ -32,6 +32,31 @@ export const useSourcesStore = defineStore('sources', () => {
     if (artistId != null) byArtist.value.delete(artistId)
   }
 
+  // Patch a single updated source into every cached array IN PLACE, rather than
+  // invalidating + refetching the whole list. The full refetch was what locked
+  // the Subscriptions UI and collapsed the expanded row after every inline
+  // action (check / backfill / recover / toggle) — operator-flagged 2026-06-07.
+  // Map.set on a Vue-reactive ref(Map) triggers re-render; we hand each cache a
+  // NEW array so the table diffs just the one changed row.
+  function _patchSource(updated) {
+    if (!updated || updated.id == null) return
+    for (const [key, arr] of byArtist.value) {
+      const i = arr.findIndex((s) => s.id === updated.id)
+      if (i === -1) continue
+      const next = arr.slice()
+      next[i] = { ...arr[i], ...updated }
+      byArtist.value.set(key, next)
+    }
+  }
+
+  function _dropSource(id) {
+    for (const [key, arr] of byArtist.value) {
+      if (arr.some((s) => s.id === id)) {
+        byArtist.value.set(key, arr.filter((s) => s.id !== id))
+      }
+    }
+  }
+
   async function create(payload) {
     const body = await api.post('/api/sources', { body: payload })
     _invalidate(payload.artist_id)
@@ -40,13 +65,13 @@ export const useSourcesStore = defineStore('sources', () => {
 
   async function update(id, patch, artistIdHint = null) {
     const body = await api.patch(`/api/sources/${id}`, { body: patch })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
 
   async function remove(id, artistIdHint = null) {
     await api.delete(`/api/sources/${id}`)
-    _invalidate(artistIdHint)
+    _dropSource(id)
   }
 
   async function findOrCreateArtist(name) {
@@ -90,12 +115,12 @@ export const useSourcesStore = defineStore('sources', () => {
   // source shows backfill_state 'complete'); 'stop' cancels back to tick mode.
   async function startBackfill(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'start' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
   async function stopBackfill(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'stop' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
   // Plan #697: arm a recovery walk — a backfill that bypasses the Patreon
@@ -103,7 +128,7 @@ export const useSourcesStore = defineStore('sources', () => {
   // under the current pHash threshold. Stop with stopBackfill (shared lifecycle).
   async function recoverSource(id, artistIdHint = null) {
     const body = await api.post(`/api/sources/${id}/backfill`, { body: { action: 'recover' } })
-    _invalidate(artistIdHint ?? body.artist_id)
+    _patchSource(body)
     return body
   }
 
diff --git a/frontend/test/sources.spec.js b/frontend/test/sources.spec.js
index 395ede5..2570c76 100644
--- a/frontend/test/sources.spec.js
+++ b/frontend/test/sources.spec.js
@@ -41,6 +41,41 @@ describe('sources store', () => {
     expect(calls[0]).toContain('artist_id=7')
   })
 
+  it('update patches the source in place without dropping the cache', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [
+      { id: 5, artist_id: 5, enabled: true, backfill_state: null },
+      { id: 6, artist_id: 5, enabled: true },
+    ])
+    stubFetch(() => ({
+      status: 200,
+      body: { id: 5, artist_id: 5, enabled: false, backfill_state: null },
+    }))
+    await s.update(5, { enabled: false }, 5)
+    // Cache survives (no full reload) and only source 5 changed.
+    expect(s.byArtist.has(null)).toBe(true)
+    const arr = s.byArtist.get(null)
+    expect(arr.find(r => r.id === 5).enabled).toBe(false)
+    expect(arr.find(r => r.id === 6).enabled).toBe(true)
+  })
+
+  it('startBackfill patches backfill_state in place', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [{ id: 5, artist_id: 5, backfill_state: null }])
+    stubFetch(() => ({ status: 200, body: { id: 5, backfill_state: 'running' } }))
+    await s.startBackfill(5, 5)
+    expect(s.byArtist.get(null).find(r => r.id === 5).backfill_state).toBe('running')
+  })
+
+  it('remove drops the source from the cache in place', async () => {
+    const s = useSourcesStore()
+    s.byArtist.set(null, [{ id: 5, artist_id: 5 }, { id: 6, artist_id: 5 }])
+    stubFetch(() => ({ status: 204, body: null }))
+    await s.remove(5, 5)
+    expect(s.byArtist.has(null)).toBe(true)
+    expect(s.byArtist.get(null).map(r => r.id)).toEqual([6])
+  })
+
   it('create invalidates the all-cache and the artist-cache', async () => {
     const s = useSourcesStore()
     s.byArtist.set(null, [])

From e4e35163ab4090e70a84cba157c9dfb0c3fe8a30 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 6 Jun 2026 21:00:47 -0400
Subject: [PATCH 3/3] =?UTF-8?q?feat(subs):=20subscriptions=20UX=20batch=20?=
 =?UTF-8?q?=E2=80=94=20error=20reasons,=20single-source=20rows,=20health?=
 =?UTF-8?q?=20sort,=20bulk=20backfill?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator-requested follow-ups:
- #1 Failure reason on hover: the red error-count chip now shows source.last_error
  in a tooltip (desktop row + mobile card), so the cause (e.g. the new
  "vanity=cw" message) is visible without opening Downloads.
- #2 Collapse the single-source case: a subscription with exactly one source now
  shows that source's URL + its own actions (Check / Backfill / ⋮ / Edit) inline
  on the artist row — no expand needed for the common case. Multi-source keeps
  the artist-level actions + expandable per-source table.
- #3 Sort by health: the Health column is sortable on a numeric rank
  (never/ok/warn/fail) and the table defaults to worst-first, name as tiebreak.
- #4 Drop Preview: removed the low-value bounded-peek action from the menu and
  all its wiring (backend endpoint + store fn left in place, unused).
- #5 Backfill selected: a "Backfill" button in the bulk bar arms a run-until-done
  backfill on every enabled, not-already-running source in the selection.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../subscriptions/SourceActions.vue           |  12 +-
 .../components/subscriptions/SourceCard.vue   |   9 +-
 .../components/subscriptions/SourceRow.vue    |  14 +-
 .../subscriptions/SubscriptionsTab.vue        | 172 +++++++++++++-----
 4 files changed, 140 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/subscriptions/SourceActions.vue b/frontend/src/components/subscriptions/SourceActions.vue
index 94b2a02..ae4751c 100644
--- a/frontend/src/components/subscriptions/SourceActions.vue
+++ b/frontend/src/components/subscriptions/SourceActions.vue
@@ -34,16 +34,6 @@
         </v-btn>
       </template>
       <v-list density="compact" min-width="260">
-        <v-list-item
-          v-if="isPatreon && !running"
-          prepend-icon="mdi-eye-outline"
-          @click="emit('preview', source)"
-        >
-          <v-list-item-title>Preview backfill</v-list-item-title>
-          <v-list-item-subtitle>
-            Count what a backfill would download — nothing is downloaded
-          </v-list-item-subtitle>
-        </v-list-item>
         <v-list-item
           v-if="isPatreon && !running"
           prepend-icon="mdi-backup-restore"
@@ -75,7 +65,7 @@ const props = defineProps({
   source: { type: Object, required: true },
   checking: { type: Boolean, default: false },
 })
-const emit = defineEmits(['check', 'backfill', 'recover', 'preview', 'remove'])
+const emit = defineEmits(['check', 'backfill', 'recover', 'remove'])
 
 const running = computed(() => props.source.backfill_state === 'running')
 const recovering = computed(() => !!props.source.backfill_bypass_seen)
diff --git a/frontend/src/components/subscriptions/SourceCard.vue b/frontend/src/components/subscriptions/SourceCard.vue
index c8f5fb2..0ba7f86 100644
--- a/frontend/src/components/subscriptions/SourceCard.vue
+++ b/frontend/src/components/subscriptions/SourceCard.vue
@@ -32,7 +32,11 @@
       <v-chip
         v-if="(source.consecutive_failures || 0) > 0"
         size="x-small" color="error" variant="tonal" label
-      >{{ source.consecutive_failures }} err</v-chip>
+      >{{ source.consecutive_failures }} err
+        <v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
+          <span style="white-space: pre-wrap; word-break: break-word;">{{ source.last_error }}</span>
+        </v-tooltip>
+      </v-chip>
       <v-chip
         v-else-if="source.backfill_state === 'running'"
         size="x-small" color="info" variant="tonal" label
@@ -56,7 +60,6 @@
         @check="$emit('check', $event)"
         @backfill="$emit('backfill', $event)"
         @recover="$emit('recover', $event)"
-        @preview="$emit('preview', $event)"
         @remove="$emit('remove', $event)"
       />
     </div>
@@ -76,7 +79,7 @@ const props = defineProps({
   checking: { type: Boolean, default: false },
   warningThreshold: { type: Number, default: 5 },
 })
-const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover', 'preview'])
+const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])
 
 function onToggleEnabled(value) {
   emit('toggle', { source: props.source, enabled: value })
diff --git a/frontend/src/components/subscriptions/SourceRow.vue b/frontend/src/components/subscriptions/SourceRow.vue
index 554e7d9..8f737d5 100644
--- a/frontend/src/components/subscriptions/SourceRow.vue
+++ b/frontend/src/components/subscriptions/SourceRow.vue
@@ -42,7 +42,12 @@
       <v-chip
         v-if="(source.consecutive_failures || 0) > 0"
         size="x-small" color="error" variant="tonal" label
-      >{{ source.consecutive_failures }}</v-chip>
+      >{{ source.consecutive_failures }}
+        <!-- #1: show the actual failure reason on hover instead of a bare count. -->
+        <v-tooltip v-if="source.last_error" activator="parent" location="top" max-width="480">
+          <span class="fc-source-row__err-text">{{ source.last_error }}</span>
+        </v-tooltip>
+      </v-chip>
       <v-chip
         v-else-if="source.backfill_state === 'running'"
         size="x-small" color="info" variant="tonal" label
@@ -66,7 +71,6 @@
         @check="$emit('check', $event)"
         @backfill="$emit('backfill', $event)"
         @recover="$emit('recover', $event)"
-        @preview="$emit('preview', $event)"
         @remove="$emit('remove', $event)"
       />
     </td>
@@ -83,7 +87,7 @@ const props = defineProps({
   checking: { type: Boolean, default: false },
   warningThreshold: { type: Number, default: 5 },
 })
-const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover', 'preview'])
+const emit = defineEmits(['edit', 'remove', 'toggle', 'check', 'backfill', 'recover'])
 
 function onToggleEnabled(value) {
   emit('toggle', { source: props.source, enabled: value })
@@ -127,6 +131,10 @@ function onToggleEnabled(value) {
   color: rgb(var(--v-theme-on-surface-variant));
   opacity: 0.6;
 }
+.fc-source-row__err-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
 .fc-source-row__actions {
   white-space: nowrap;
   text-align: right;
diff --git a/frontend/src/components/subscriptions/SubscriptionsTab.vue b/frontend/src/components/subscriptions/SubscriptionsTab.vue
index fc2892e..83bbb8c 100644
--- a/frontend/src/components/subscriptions/SubscriptionsTab.vue
+++ b/frontend/src/components/subscriptions/SubscriptionsTab.vue
@@ -54,6 +54,9 @@
           <v-btn size="small" variant="text" prepend-icon="mdi-toggle-switch-off-outline" @click="bulkSetEnabled(false)">
             Disable all
           </v-btn>
+          <v-btn size="small" variant="text" prepend-icon="mdi-magnify-scan" @click="bulkBackfill">
+            Backfill
+          </v-btn>
           <v-btn size="small" variant="text" color="error" prepend-icon="mdi-delete" @click="bulkDelete">
             Delete
           </v-btn>
@@ -82,6 +85,7 @@
         item-value="key"
         v-model="selected"
         v-model:expanded="expanded"
+        v-model:sort-by="sortBy"
         :items-per-page="50"
         :items-per-page-options="ITEMS_PER_PAGE_OPTIONS"
         density="comfortable"
@@ -89,7 +93,13 @@
         @click:row="onRowClick"
       >
         <template #item.name="{ item }">
-          <span class="fc-subs__name">{{ item.artist.name }}</span>
+          <div class="fc-subs__name">{{ item.artist.name }}</div>
+          <!-- #2: single-source subscriptions show their URL inline (no expand). -->
+          <a
+            v-if="item.singleSource"
+            :href="item.singleSource.url" target="_blank" rel="noopener"
+            class="fc-subs__sub-url" @click.stop
+          >{{ item.singleSource.url }}</a>
         </template>
 
         <template #item.platforms="{ item }">
@@ -121,32 +131,60 @@
         </template>
 
         <template #item.actions="{ item }">
-          <v-btn
-            icon size="small" variant="text"
-            :loading="anyChecking(item.sources)"
-            @click.stop="checkAll(item)"
-          >
-            <v-icon>mdi-refresh</v-icon>
-            <v-tooltip activator="parent" location="top">Check all sources</v-tooltip>
-          </v-btn>
-          <v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
-            <v-icon>mdi-plus</v-icon>
-            <v-tooltip activator="parent" location="top">Add source</v-tooltip>
-          </v-btn>
-          <v-btn
-            icon size="small" variant="text"
-            :to="`/posts?artist_id=${item.artist.id}`" @click.stop
-          >
-            <v-icon>mdi-rss</v-icon>
-            <v-tooltip activator="parent" location="top">View posts</v-tooltip>
-          </v-btn>
-          <v-btn
-            icon size="small" variant="text"
-            :to="`/artist/${item.artist.slug}`" @click.stop
-          >
-            <v-icon>mdi-account</v-icon>
-            <v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
-          </v-btn>
+          <!-- #2: single source → its own actions inline (Check / Backfill / ⋮),
+               plus Edit, so the row is actionable without expanding. -->
+          <template v-if="item.singleSource">
+            <SourceActions
+              :source="item.singleSource"
+              :checking="store.checkingIds.has(item.singleSource.id)"
+              @check="onCheck" @backfill="onBackfill"
+              @recover="onRecover" @remove="removeSource"
+            />
+            <v-btn icon size="small" variant="text" @click.stop="openEditSource(item.singleSource)">
+              <v-icon>mdi-pencil</v-icon>
+              <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
+            </v-btn>
+            <v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
+              <v-icon>mdi-plus</v-icon>
+              <v-tooltip activator="parent" location="top">Add another source</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon size="small" variant="text"
+              :to="`/artist/${item.artist.slug}`" @click.stop
+            >
+              <v-icon>mdi-account</v-icon>
+              <v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
+            </v-btn>
+          </template>
+          <!-- Multi-source → artist-level actions; expand for per-source rows. -->
+          <template v-else>
+            <v-btn
+              icon size="small" variant="text"
+              :loading="anyChecking(item.sources)"
+              @click.stop="checkAll(item)"
+            >
+              <v-icon>mdi-refresh</v-icon>
+              <v-tooltip activator="parent" location="top">Check all sources</v-tooltip>
+            </v-btn>
+            <v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
+              <v-icon>mdi-plus</v-icon>
+              <v-tooltip activator="parent" location="top">Add source</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon size="small" variant="text"
+              :to="`/posts?artist_id=${item.artist.id}`" @click.stop
+            >
+              <v-icon>mdi-rss</v-icon>
+              <v-tooltip activator="parent" location="top">View posts</v-tooltip>
+            </v-btn>
+            <v-btn
+              icon size="small" variant="text"
+              :to="`/artist/${item.artist.slug}`" @click.stop
+            >
+              <v-icon>mdi-account</v-icon>
+              <v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
+            </v-btn>
+          </template>
         </template>
 
         <template #expanded-row="{ columns, item }">
@@ -176,7 +214,6 @@
                     @check="onCheck"
                     @backfill="onBackfill"
                     @recover="onRecover"
-                    @preview="onPreview"
                   />
                   <tr v-if="item.sources.length === 0">
                     <td colspan="8" class="fc-subs__sources-empty">
@@ -254,7 +291,6 @@
             @check="onCheck"
             @backfill="onBackfill"
             @recover="onRecover"
-            @preview="onPreview"
           />
           <div v-if="item.sources.length === 0" class="fc-subs__sources-empty">
             No sources yet. Tap + to add one.
@@ -270,11 +306,6 @@
       @saved="onSourceSaved"
     />
     <ArtistCreateDialog v-model="showArtistDialog" @created="onArtistCreated" />
-    <PreviewDialog
-      v-model="showPreviewDialog"
-      :source="previewTarget"
-      @backfill="onPreviewBackfill"
-    />
   </div>
 </template>
 
@@ -291,7 +322,7 @@ import SourceCard from './SourceCard.vue'
 import SourceHealthDot from './SourceHealthDot.vue'
 import SourceFormDialog from './SourceFormDialog.vue'
 import ArtistCreateDialog from './ArtistCreateDialog.vue'
-import PreviewDialog from './PreviewDialog.vue'
+import SourceActions from './SourceActions.vue'
 import PlatformChip from './PlatformChip.vue'
 import SchedulerStatusBar from './SchedulerStatusBar.vue'
 import { formatRelative } from '../../utils/date.js'
@@ -325,6 +356,12 @@ const statusFilter = ref('all')
 const needsAttention = ref(false)
 const expanded = ref([])
 const selected = ref([])
+// #3: default to worst-health first, name as the tiebreak (the table header
+// stays clickable to re-sort by any column).
+const sortBy = ref([
+  { key: 'health', order: 'desc' },
+  { key: 'name', order: 'asc' },
+])
 
 // Mobile card list drives the same `selected`/`expanded` key arrays the
 // desktop v-data-table binds, so selection + bulk actions work identically.
@@ -342,8 +379,6 @@ const showSourceDialog = ref(false)
 const editingSource = ref(null)
 const editingArtist = ref(null)
 const showArtistDialog = ref(false)
-const showPreviewDialog = ref(false)
-const previewTarget = ref(null)
 
 const artistFilter = computed(() => {
   const raw = route.query.artist_id
@@ -382,7 +417,7 @@ const headers = [
   { title: 'Subscription', key: 'name',          sortable: true,  align: 'start' },
   { title: 'Platforms',    key: 'platforms',     sortable: false, align: 'start', width: 240 },
   { title: 'Sources',      key: 'sources_count', sortable: true,  align: 'start', width: 90 },
-  { title: 'Health',       key: 'health',        sortable: false, align: 'start', width: 80 },
+  { title: 'Health',       key: 'health',        sortable: true,  align: 'start', width: 80 },
   { title: 'Last activity',key: 'last_activity', sortable: true,  align: 'start', width: 140 },
   { title: 'Actions',      key: 'actions',       sortable: false, align: 'end',   width: 200 },
 ]
@@ -403,10 +438,26 @@ const groups = computed(() => {
       lastActivity,
       name: g.artist.name,
       last_activity: lastActivity ?? '',
+      // #3: numeric health rank so the Health column is sortable worst-first.
+      health: healthRank(worstSource, failureThreshold.value),
+      // #2: when a subscription has exactly one source, surface it on the
+      // artist row directly (URL + actions) so the common case needs no expand.
+      singleSource: g.sources.length === 1 ? g.sources[0] : null,
     }
   })
 })
 
+// 0 never-checked · 1 ok · 2 warning · 3 failing — higher = worse, so a
+// descending sort floats the broken subscriptions to the top.
+function healthRank(source, threshold) {
+  if (!source) return 0
+  if (!source.last_checked_at) return 0
+  const f = source.consecutive_failures || 0
+  if (f === 0) return 1
+  if (f < threshold) return 2
+  return 3
+}
+
 // A group "needs attention" if any of its sources has accumulated
 // failures OR has never been checked — the ones worth acting on.
 function groupNeedsAttention(g) {
@@ -595,18 +646,6 @@ async function onRecover(source) {
   }
 }
 
-// Plan #708 B4: open the dry-run preview dialog (it self-fetches on open).
-function onPreview(source) {
-  previewTarget.value = source
-  showPreviewDialog.value = true
-}
-
-// "Start backfill" from inside the preview dialog → arm it + close.
-async function onPreviewBackfill(source) {
-  showPreviewDialog.value = false
-  await onBackfill(source)
-}
-
 async function checkAll(group) {
   let ok = 0
   let conflict = 0
@@ -662,6 +701,28 @@ async function bulkSetEnabled(enabled) {
   selected.value = []
 }
 
+// #5: arm a run-until-done backfill on every enabled source in the selected
+// subscriptions (skips ones already backfilling). Patches each row in place.
+async function bulkBackfill() {
+  const sel = resolveSelectedGroups()
+  let armed = 0
+  for (const g of sel) {
+    for (const s of g.sources) {
+      if (!s.enabled || s.backfill_state === 'running') continue
+      try {
+        await store.startBackfill(s.id, s.artist_id)
+        armed += 1
+      } catch { /* keep going */ }
+    }
+  }
+  toast({
+    text: armed ? `Backfill started on ${armed} source${armed === 1 ? '' : 's'}`
+      : 'Nothing to backfill (already running or disabled)',
+    type: armed ? 'success' : 'info',
+  })
+  selected.value = []
+}
+
 async function bulkDelete() {
   const groups = resolveSelectedGroups()
   const total = groups.reduce((n, g) => n + g.sources.length, 0)
@@ -746,6 +807,17 @@ async function bulkDelete() {
 }
 .fc-subs__mactions { display: flex; gap: 2px; }
 .fc-subs__name { font-weight: 600; }
+.fc-subs__sub-url {
+  display: block;
+  max-width: 460px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.76rem;
+  color: rgb(var(--v-theme-on-surface-variant));
+  text-decoration: none;
+}
+.fc-subs__sub-url:hover { color: rgb(var(--v-theme-accent)); }
 .fc-subs__chips {
   display: flex; flex-wrap: wrap; gap: 4px;
 }