feat(subs): subscriptions UX batch — error reasons, single-source rows, health sort, bulk backfill

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>

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)

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 })

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;

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
+          <!-- #2: single source → its own actions inline (Check / Backfill / ⋮),
-            icon size="small" variant="text"
+               plus Edit, so the row is actionable without expanding. -->
-            :loading="anyChecking(item.sources)"
+          <template v-if="item.singleSource">
-            @click.stop="checkAll(item)"
+            <SourceActions
-          >
+              :source="item.singleSource"
-            <v-icon>mdi-refresh</v-icon>
+              :checking="store.checkingIds.has(item.singleSource.id)"
-            <v-tooltip activator="parent" location="top">Check all sources</v-tooltip>
+              @check="onCheck" @backfill="onBackfill"
-          </v-btn>
+              @recover="onRecover" @remove="removeSource"
-          <v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
+            />
-            <v-icon>mdi-plus</v-icon>
+            <v-btn icon size="small" variant="text" @click.stop="openEditSource(item.singleSource)">
-            <v-tooltip activator="parent" location="top">Add source</v-tooltip>
+              <v-icon>mdi-pencil</v-icon>
-          </v-btn>
+              <v-tooltip activator="parent" location="top">Edit source</v-tooltip>
-          <v-btn
+            </v-btn>
-            icon size="small" variant="text"
+            <v-btn icon size="small" variant="text" @click.stop="openAddSource(item.artist)">
-            :to="`/posts?artist_id=${item.artist.id}`" @click.stop
+              <v-icon>mdi-plus</v-icon>
-          >
+              <v-tooltip activator="parent" location="top">Add another source</v-tooltip>
-            <v-icon>mdi-rss</v-icon>
+            </v-btn>
-            <v-tooltip activator="parent" location="top">View posts</v-tooltip>
+            <v-btn
-          </v-btn>
+              icon size="small" variant="text"
-          <v-btn
+              :to="`/artist/${item.artist.slug}`" @click.stop
-            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-icon>mdi-account</v-icon>
+            </v-btn>
-            <v-tooltip activator="parent" location="top">Open artist page</v-tooltip>
+          </template>
-          </v-btn>
+          <!-- 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;
 }