Merge pull request 'Subscriptions UX overhaul + Patreon /cw/ vanity fix' (#75) from dev into main

2026-06-06 21:12:02 -04:00
parent ef8f4f7193 e4e35163ab
commit a75c602175
8 changed files with 394 additions and 185 deletions
@@ -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,
@@ -0,0 +1,81 @@
+<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-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', '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>
@@ -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>
@@ -23,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
@@ -42,61 +55,19 @@
    </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)"
+        @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'

@@ -108,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 })
@@ -124,11 +95,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 {
@@ -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
@@ -30,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
@@ -49,65 +66,19 @@
      <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)"
+        @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'

@@ -116,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 })
@@ -129,18 +100,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));
@@ -151,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;
@@ -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) {
@@ -491,13 +542,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 +621,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 +637,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}`,
@@ -582,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
@@ -649,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)
@@ -733,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;
 }
@@ -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
  }

@@ -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, [])
@@ -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