wip: spinner por-fila en Investigate + spawn directo de python en launcher (incluye trabajo acumulado del arbol)

2026-08-22 14:03:39 -06:00
parent cd9f16f329
commit b04a2710cf
3 changed files with 702 additions and 129 deletions
@@ -21,10 +21,13 @@
  <link rel="stylesheet" href="/static/styles.css" />
 </head>
 <body class="min-h-screen relative">
-<div id="root" x-cloak x-data="platform()" x-init="init()" class="relative z-10 flex min-h-screen">
+<div id="root" x-cloak x-data="platform()" x-init="init()" @keydown.escape.window="onGlobalEscape($event)" class="relative z-10 flex min-h-screen">
+
+  <button class="fixed top-4 left-4 z-40 md:hidden btn btn-ghost !p-2" @click="toggleSidebar()" :aria-label="sidebarOpen ? 'Close navigation' : 'Open navigation'"><svg x-show="!sidebarOpen" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"/></svg><svg x-show="sidebarOpen" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/></svg></button>
+  <div x-show="sidebarOpen" x-transition.opacity @click="closeSidebar()" class="fixed inset-0 z-20 bg-black/60 md:hidden"></div>

  <!-- ============ SIDEBAR ============ -->
-  <aside class="w-64 shrink-0 border-r border-zinc-800/80 bg-zinc-950/70 backdrop-blur-xl flex flex-col fixed inset-y-0 left-0 z-30">
+  <aside class="w-64 shrink-0 border-r border-zinc-800/80 bg-zinc-950/70 backdrop-blur-xl flex flex-col fixed inset-y-0 left-0 z-30 transform transition-transform md:translate-x-0" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" x-transition>
    <div class="px-5 py-5 flex items-center gap-3 border-b border-zinc-800/70">
      <div class="w-9 h-9 rounded-xl accent-grad flex items-center justify-center font-bold text-white shadow-lg shadow-rose-500/20">
        <svg viewBox="0 0 24 24" class="w-5 h-5" fill="currentColor"><path d="M10 15.5v-7l6 3.5-6 3.5zM21 6.5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-11z"/></svg>
@@ -46,14 +49,23 @@

    <div class="px-4 py-4 border-t border-zinc-800/70 text-[0.7rem] text-zinc-500">
      <div class="flex items-center gap-2">
-        <span class="w-2 h-2 rounded-full" :class="health ? 'bg-emerald-500' : 'bg-zinc-600'"></span>
-        <span x-text="health ? 'backend online' : 'checking…'"></span>
+        <span class="w-2 h-2 rounded-full" :class="health ? 'bg-emerald-500' : (healthFails ? 'bg-rose-500 animate-pulse' : 'bg-zinc-600')"></span>
+        <span x-text="health ? 'backend online' : (healthFails ? 'backend unreachable' : 'checking…')"></span>
      </div>
    </div>
  </aside>

  <!-- ============ MAIN ============ -->
-  <main class="flex-1 ml-64 min-w-0">
+  <main class="flex-1 ml-0 md:ml-64 min-w-0">
+    <div x-show="!health && healthFails" x-transition.opacity class="bg-rose-500/15 border-b border-rose-500/40 text-rose-200" role="alert" aria-live="polite">
+      <div class="max-w-7xl mx-auto px-8 py-2.5 flex items-center justify-between text-sm">
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01M4.93 4.93l14.14 14.14M12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>
+          <span><span x-text="healthFails"></span> failed health check(s). The backend may be down; requests will retry automatically.</span>
+        </div>
+        <button class="text-rose-200 hover:text-white underline text-xs" @click="checkHealth()">Retry now</button>
+      </div>
+    </div>
    <div class="max-w-7xl mx-auto px-8 py-8">

      <!-- ===== Dashboard ===== -->
@@ -107,11 +119,17 @@
            </template>
            <div class="grid md:grid-cols-2 gap-4">
              <template x-for="c in dash.channels" :key="c.channel_id">
-                <div class="glass p-5 hover:border-rose-500/40 transition-colors">
+                <div class="glass p-5 hover:border-rose-500/40 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-rose-500/40" role="button" tabindex="0" @click="openChannel(c.channel_id)" @keydown.enter.prevent="openChannel(c.channel_id)" @keydown.space.prevent="openChannel(c.channel_id)" :aria-label="'Open videos for ' + (c.name || c.channel_id)">
                  <div class="flex items-start justify-between gap-3">
-                    <div class="min-w-0">
-                      <div class="text-white font-semibold truncate" x-text="c.name"></div>
-                      <div class="text-xs text-zinc-500 truncate" x-text="c.handle || c.channel_id"></div>
+                    <div class="flex items-center gap-3 min-w-0">
+                      <div class="relative w-10 h-10 shrink-0">
+                        <img class="avatar w-10 h-10 shrink-0" :src="c.avatar || '/api/avatars/'+c.channel_id" :alt="c.name" :data-fb-src="'/api/avatars/'+c.channel_id" onerror="if(!this.dataset.swapped){this.dataset.swapped='1'; this.src=this.dataset.fbSrc||''}else{this.style.visibility='hidden'; if(this.nextElementSibling) this.nextElementSibling.style.display='inline-flex'}" />
+                        <span class="avatar avatar-initial rounded-full w-10 h-10 text-sm absolute inset-0 hidden" :text-content="(c.name||c.channel_id||'?').charAt(0)" aria-hidden="true"></span>
+                      </div>
+                      <div class="min-w-0">
+                        <div class="text-white font-semibold truncate" x-text="c.name"></div>
+                        <div class="text-xs text-zinc-500 truncate" x-text="c.handle || c.channel_id"></div>
+                      </div>
                    </div>
                    <div class="text-right shrink-0">
                      <div class="text-lg font-bold text-white font-mono" x-text="fmtNum(c.video_count)"></div>
@@ -127,29 +145,32 @@
              </template>
            </div>
          </div>
-
-          <!-- charts -->
-          <div class="grid lg:grid-cols-2 gap-4">
-            <div class="glass p-5">
-              <h3 class="text-sm font-semibold text-zinc-200 mb-3">Uploads over time</h3>
-              <div class="h-64"><canvas id="chart-uploads"></canvas></div>
-            </div>
-            <div class="glass p-5">
-              <h3 class="text-sm font-semibold text-zinc-200 mb-3">Duration distribution</h3>
-              <div class="h-64"><canvas id="chart-duration"></canvas></div>
-            </div>
-            <div class="glass p-5 lg:col-span-2">
-              <h3 class="text-sm font-semibold text-zinc-200 mb-3">Top tags</h3>
-              <div class="h-64"><canvas id="chart-tags"></canvas></div>
-            </div>
-          </div>
        </section>
      </template>

      <!-- ===== Channels ===== -->
      <template x-if="view==='channels'">
        <section class="space-y-6" x-transition.opacity>
-          <header><h1 class="text-2xl font-bold text-white">Channels</h1><p class="text-sm text-zinc-500">Add a channel URL to start tracking</p></header>
+          <header class="flex items-end justify-between gap-3 flex-wrap">
+            <div>
+              <h1 class="text-2xl font-bold text-white">Channels</h1>
+              <p class="text-sm text-zinc-500">Add a channel URL to start tracking</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <span x-show="sync.lastResult" class="text-xs transition-opacity" :class="sync.lastResultKind === 'error' ? 'text-rose-400' : 'text-emerald-400'" x-text="sync.lastResult"></span>
+              <button class="btn accent-grad btn-primary" :disabled="jobActive() || channels.items.length===0" @click="startDiscovery()" title="Scan only what was uploaded since the last video we have">
+                <svg x-show="jobActive() && scrape.kind==='discovery'" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                Investigate all
+              </button>
+              <button class="btn btn-ghost" :disabled="jobActive() || channels.items.length===0" @click="startDiscovery(null, true)" title="Re-read every page of every channel — slow, only if videos are missing">
+                Full rescan
+              </button>
+              <button class="btn btn-ghost" :disabled="sync.busy==='all' || channels.items.length===0" @click="syncChannels()">
+                <svg x-show="sync.busy==='all'" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                Sync channels
+              </button>
+            </div>
+          </header>

          <form class="glass p-4 flex gap-2" @submit.prevent="addChannel()">
            <input class="field flex-1" type="text" placeholder="https://www.youtube.com/@handle" x-model="forms.channelUrl" />
@@ -162,20 +183,35 @@

          <div class="glass overflow-hidden">
            <table class="tbl">
-              <thead><tr><th>Name</th><th>Handle</th><th>Videos</th><th>Pending</th><th>Last scraped</th><th class="text-right">Actions</th></tr></thead>
+              <thead><tr><th>Name</th><th>Handle</th><th>Videos</th><th>Pending</th><th>Latest video</th><th>Last scraped</th><th class="text-right">Actions</th></tr></thead>
              <tbody>
-                <template x-if="loading.channels"><tr><td colspan="6" class="text-center text-zinc-500 py-8">loading…</td></tr></template>
-                <template x-if="!loading.channels && channels.items.length===0"><tr><td colspan="6" class="text-center text-zinc-500 py-8">No channels tracked yet.</td></tr></template>
+                <template x-if="loading.channels"><tr><td colspan="7" class="text-center text-zinc-500 py-8">loading…</td></tr></template>
+                <template x-if="!loading.channels && channels.items.length===0"><tr><td colspan="7" class="text-center text-zinc-500 py-8">No channels tracked yet.</td></tr></template>
                <template x-for="c in channels.items" :key="c.channel_id">
                  <tr class="row-hover">
-                    <td><button class="text-white font-medium hover:text-rose-400 transition-colors text-left" @click="openChannel(c.channel_id)" x-text="c.name"></button></td>
+                    <td>
+                      <div class="flex items-center gap-2">
+                        <div class="relative w-7 h-7 shrink-0">
+                          <img class="avatar w-7 h-7 shrink-0" :src="c.avatar || '/api/avatars/'+c.channel_id" :alt="c.name" :data-fb-src="'/api/avatars/'+c.channel_id" onerror="if(!this.dataset.swapped){this.dataset.swapped='1'; this.src=this.dataset.fbSrc||''}else{this.style.visibility='hidden'; if(this.nextElementSibling) this.nextElementSibling.style.display='inline-flex'}" />
+                          <span class="avatar avatar-initial rounded-full w-7 h-7 text-xs absolute inset-0 hidden" :text-content="(c.name||c.channel_id||'?').charAt(0)" aria-hidden="true"></span>
+                        </div>
+                        <button class="text-white font-medium hover:text-rose-400 transition-colors text-left" @click="openChannel(c.channel_id)" x-text="c.name"></button>
+                      </div>
+                    </td>
                    <td class="text-zinc-400" x-text="c.handle || '—'"></td>
                    <td><button class="font-mono text-zinc-300 hover:text-rose-400 transition-colors" @click="openChannel(c.channel_id)" x-text="fmtNum(c.video_count)"></button></td>
                    <td>
                      <span class="pill" :class="(channels.pending[c.channel_id]||0) > 0 ? 'st-pending' : 'st-skipped'" x-text="(channels.pending[c.channel_id]||0) + ' pending'"></span>
                    </td>
+                    <td class="text-zinc-400 text-xs font-mono" x-text="fmtDate(c.last_video_date)" title="Newest upload we know of — incremental scans start here"></td>
                    <td class="text-zinc-400 text-xs" x-text="c.last_scraped ? fmtDate(c.last_scraped) : '—'"></td>
                    <td class="text-right whitespace-nowrap">
+                      <button class="btn accent-grad btn-primary !py-1 !px-2 text-xs" @click="startDiscovery(c.channel_id)" :disabled="jobActive()" title="Find videos uploaded since the latest one we have">
+                        <svg x-show="jobActive() && scrape.kind==='discovery' && scrape.targetChannel===c.channel_id" class="spin w-3 h-3" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"></circle></svg>
+                        Investigate
+                      </button>
+                      <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="startDiscovery(c.channel_id, true)" :disabled="jobActive()" title="Re-read every page of this channel">Full</button>
+                      <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="syncChannels(c.channel_id)" :disabled="sync.busy===c.channel_id || sync.busy==='all'" title="Re-scrape channel info + avatar">Sync</button>
                      <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="openChannel(c.channel_id)">Videos</button>
                      <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="openFolder('markdown', c.channel_id)" title="Open .md folder">.md</button>
                      <button class="btn accent-grad btn-primary !py-1 !px-2 text-xs" @click="downloadChannelPending(c.channel_id)" title="Process pending videos to .md" :disabled="(channels.pending[c.channel_id]||0)===0">Pending .md</button>
@@ -192,17 +228,52 @@
      <!-- ===== Videos ===== -->
      <template x-if="view==='videos'">
        <section class="space-y-5" x-transition.opacity>
-          <header><h1 class="text-2xl font-bold text-white">Videos</h1><p class="text-sm text-zinc-500">Browse and filter the catalog</p></header>
+          <header class="flex items-end justify-between gap-3 flex-wrap">
+            <div><h1 class="text-2xl font-bold text-white">Videos</h1><p class="text-sm text-zinc-500">Browse and filter the catalog</p></div>
+            <div class="flex items-center gap-2 flex-wrap">
+              <button class="btn btn-ghost" :disabled="loading.reconcile" @click="reconcile()" title="Re-scan data/markdown and repair any status that disagrees with what is on disk">
+                <svg x-show="loading.reconcile" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                Sync from disk
+              </button>
+              <button class="btn btn-ghost" x-show="retryable.total > 0" :disabled="loading.reset || jobActive()" @click="resetVideos()"
+                      :title="'Send ' + retryable.total + ' failed/skipped videos back to pending so they can be retried'">
+                <svg x-show="loading.reset" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                <span x-text="'Retry ' + retryable.total + ' stuck'"></span>
+              </button>
+              <button class="btn accent-grad btn-primary" :disabled="jobActive() || channels.items.length===0" @click="startDiscovery(filters.channel || null)">
+                <svg x-show="jobActive() && scrape.kind==='discovery'" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                <span x-text="filters.channel ? 'Investigate channel' : 'Investigate all'"></span>
+              </button>
+            </div>
+          </header>
+
+          <div x-show="retryable.total > 0" class="glass px-4 py-3 text-sm text-zinc-300 flex items-start gap-3">
+            <span class="text-rose-400 font-bold shrink-0">!</span>
+            <div>
+              <span x-text="retryable.total"></span> video(s) sit in a terminal status
+              (<span x-text="(retryable.counts.no_subtitles||0) + ' no_subtitles, ' + (retryable.counts.error||0) + ' error'"></span>)
+              and will never be picked up by &ldquo;Pending .md&rdquo;.
+              <span class="text-zinc-500">&ldquo;no_subtitles&rdquo; often just means the language policy rejected the auto-generated captions &mdash; hover a status badge for the recorded reason.</span>
+              <span x-show="retryable.permanent > 0" class="block mt-1 text-zinc-500">
+                A further <span class="text-zinc-300" x-text="retryable.permanent"></span> are permanently blocked
+                (members-only, private or removed) and are excluded from retries &mdash; no amount of re-running will fetch them.
+              </span>
+            </div>
+          </div>

          <div class="glass p-4 grid md:grid-cols-6 gap-3">
            <select class="field" x-model="filters.channel" @change="loadVideos(1)"><option value="">All channels</option><template x-for="c in channels.items" :key="c.channel_id"><option :value="c.channel_id" x-text="c.name"></option></template></select>
            <select class="field" x-model="filters.status" @change="loadVideos(1)">
              <option value="">Any status</option>
-              <option value="done">Done</option><option value="pending">Pending</option><option value="error">Error</option><option value="skipped">Skipped</option><option value="new">New</option>
+              <option value="done">Done</option>
+              <option value="pending">Pending</option>
+              <option value="no_subtitles">No subtitles</option>
+              <option value="error">Error</option>
+              <option value="__blocked__">Locked (members-only…)</option>
            </select>
            <input class="field" type="date" x-model="filters.from" @change="loadVideos(1)" />
            <input class="field" type="date" x-model="filters.to" @change="loadVideos(1)" />
-            <input class="field" type="number" min="0" step="60" placeholder="min sec" x-model="filters.min_dur" @change="loadVideos(1)" />
+            <input class="field" type="number" min="0" step="30" placeholder="min duration (s)" title="Hide videos shorter than this many seconds" x-model="filters.min_dur" @change="loadVideos(1)" aria-label="Minimum duration in seconds" />
            <div class="flex gap-2">
              <input class="field flex-1" type="text" placeholder="search title…" x-model="filters.q" @keydown.enter="loadVideos(1)" />
              <button class="btn btn-ghost" @click="loadVideos(1)">Go</button>
@@ -213,9 +284,9 @@
          <template x-if="videos.selected.length > 0">
            <div class="bulk-bar glass p-3 flex flex-wrap items-center gap-2">
              <span class="pill accent-grad btn-primary font-bold" x-text="videos.selected.length + ' selected'"></span>
-              <button class="btn accent-grad btn-primary !py-1.5 !px-3 text-xs" @click="downloadMdBatch()" title="Download .md + thumbnails for the selection">
+              <button class="btn accent-grad btn-primary !py-1.5 !px-3 text-xs" @click="downloadMdBatch()" title="Generate the .md notes for the selection. Thumbnails are not touched — they already come from the channel scrape.">
                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v12m0 0l-4-4m4 4l4-4M4 18v2h16v-2"/></svg>
-                Download .md + thumbs
+                Download .md
              </button>
              <button class="btn btn-ghost !py-1.5 !px-3 text-xs" @click="downloadAudio()">
                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18V6l10-2v12M9 18a3 3 0 11-6 0 3 3 0 016 0zm10-2a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
@@ -232,26 +303,44 @@
              <thead><tr>
                <th class="w-8"><input type="checkbox" class="accent-rose-500" :checked="allSelected" @change="toggleSelectAll()" title="Select page" /></th>
                <th class="w-24">Thumb</th><th>Title</th><th>Channel</th>
-                <th><select class="bg-transparent text-zinc-500 uppercase text-[0.7rem] tracking-wider font-semibold" x-model="filters.sort" @change="loadVideos(videos.page)">
-                  <option value="upload_date">Uploaded</option><option value="duration">Duration</option><option value="view_count">Views</option><option value="like_count">Likes</option>
-                </select></th>
+                <!-- No @click on the th: the select bubbles up to it, so a plain
+                     click on the dropdown used to cycle the sort as well. -->
+                <th class="select-none">
+                  <select class="bg-transparent text-zinc-300 uppercase text-[0.7rem] tracking-wider font-semibold cursor-pointer hover:text-white focus:outline-none" x-model="filters.sort" @change="loadVideos(1)" aria-label="Sort videos" title="Sort order — newest upload first by default">
+                    <option value="upload_date">Newest ▼</option>
+                    <option value="oldest">Oldest ▲</option>
+                    <option value="view_count">Views ▼</option>
+                    <option value="like_count">Likes ▼</option>
+                    <option value="duration">Duration ▼</option>
+                    <option value="title">Title A→Z</option>
+                  </select>
+                </th>
                <th>Duration</th><th>Views</th><th>Status</th><th class="text-right">Actions</th>
              </tr></thead>
              <tbody>
                <template x-if="loading.videos"><tr><td colspan="9" class="text-center text-zinc-500 py-10">loading…</td></tr></template>
-                <template x-if="!loading.videos && videos.items.length===0"><tr><td colspan="9" class="text-center text-zinc-500 py-10">No videos match these filters.</td></tr></template>
+                <template x-if="!loading.videos && videos.items.length===0"><tr><td colspan="9" class="text-center text-zinc-500 py-10"><div>No videos match these filters.</div><button class="btn btn-ghost mt-3" @click.stop="filters={ channel:'', status:'', from:'', to:'', min_dur:'', q:'', sort:'upload_date' }; loadVideos(1)">Clear filters</button></td></tr></template>
                <template x-for="v in videos.items" :key="v.video_id">
                  <tr class="row-hover" :class="isSelected(v.video_id) ? 'row-selected' : ''" @click="openVideo(v.video_id)">
                    <td @click.stop><input type="checkbox" class="accent-rose-500" :checked="isSelected(v.video_id)" @change="toggleSelect(v.video_id)" /></td>
                    <td><img class="thumb w-20 h-12" :src="'/api/thumbnails/'+v.video_id" :alt="v.title" onerror="this.style.visibility='hidden'" /></td>
                    <td class="text-zinc-100 max-w-md truncate" x-text="v.title"></td>
                    <td class="text-zinc-400 text-xs" x-text="chanName(v.channel_id)"></td>
-                    <td class="text-zinc-400 font-mono text-xs" x-text="fmtDate(v.upload_date)"></td>
+                    <td class="font-mono text-xs" :class="v.upload_date ? 'text-zinc-400' : 'text-zinc-600 italic'" x-text="videoDate(v)" :title="videoDateTitle(v)"></td>
                    <td class="font-mono text-zinc-300 text-xs" x-text="ts(v.duration)"></td>
                    <td class="font-mono text-zinc-300 text-xs" x-text="fmtNum(v.view_count)"></td>
-                    <td><span class="pill" :class="statusClass(v.status)" x-text="v.status"></span></td>
+                    <td>
+                      <div class="flex items-center gap-1 flex-wrap">
+                        <span class="pill" :class="statusClass(v.status)" x-text="v.status" :title="v.error_msg || v.status"></span>
+                        <span x-show="isBlocked(v)" class="pill st-locked" :title="blockTitle(v)">
+                          <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 1 1 8 0v3"/></svg>
+                          <span x-text="blockLabel(v)"></span>
+                        </span>
+                      </div>
+                    </td>
                    <td class="text-right whitespace-nowrap" @click.stop>
-                      <button class="btn btn-ghost !py-1 !px-2 text-xs" :class="v.status==='done' ? 'md-done' : 'md-todo'" @click="v.status==='done' ? downloadMd(v.video_id) : processOne(v.video_id)" :title="v.status==='done' ? 'Download .md' : 'Process to .md'" x-text="v.status==='done' ? '.md' : 'Process'"></button>
+                      <button x-show="!isBlocked(v) || v.status==='done'" class="btn btn-ghost !py-1 !px-2 text-xs" :class="v.status==='done' ? 'md-done' : 'md-todo'" @click="v.status==='done' ? downloadMd(v.video_id) : processOne(v.video_id)" :title="v.status==='done' ? 'Download .md' : 'Process to .md'" x-text="v.status==='done' ? '.md' : 'Process'"></button>
+                      <button x-show="isBlocked(v) && v.status!=='done'" class="btn btn-ghost !py-1 !px-2 text-xs opacity-50" @click="processOne(v.video_id)" :title="blockTitle(v) + ' Click anyway if you have since bought the membership and refreshed your cookies.'">Locked</button>
                      <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="openClip(v.video_id)" title="Extract transcript clip">Clip</button>
                    </td>
                  </tr>
@@ -261,13 +350,16 @@
          </div>

          <!-- pagination -->
-          <div class="flex items-center justify-between text-sm">
-            <div class="text-zinc-500" x-text="videos.total ? (videos.size*(videos.page-1)+1)+'–'+Math.min(videos.size*videos.page, videos.total)+' of '+videos.total : '0 results'"></div>
-            <div class="flex gap-2">
-              <button class="btn btn-ghost" :disabled="videos.page<=1" @click="loadVideos(videos.page-1)">Prev</button>
-              <button class="btn btn-ghost" :disabled="videos.size*videos.page >= videos.total" @click="loadVideos(videos.page+1)">Next</button>
-            </div>
-          </div>
+           <div class="flex items-center justify-between gap-3 text-sm flex-wrap">
+             <div class="text-zinc-500"><span x-text="videos.total ? (videos.size*(videos.page-1)+1)+'–'+Math.min(videos.size*videos.page, videos.total)+' of '+videos.total : '0 results'"></span><span class="ml-3" x-text="'Page '+(videos.total ? videos.page : 0)+' of '+pageCount"></span></div>
+             <div class="flex items-center gap-2">
+               <label class="text-zinc-500 text-xs" for="videos-size">Per page</label><select id="videos-size" class="field !py-1.5 !px-2 w-20" x-model.number="videos.size" @change="localStorage.setItem('videos-size', videos.size); loadVideos(1)"><template x-for="n in [10,25,50,100]" :key="n"><option :value="n" x-text="n"></option></template></select>
+               <button class="btn btn-ghost !py-1.5 !px-2" :disabled="videos.page<=1" @click="loadVideos(videos.page-1); window.scrollTo({top:0,behavior:'smooth'})">Prev</button>
+               <template x-for="item in pageNumbers" :key="item"><button x-show="item !== '…'" class="btn btn-ghost !py-1.5 !px-2 min-w-8" :class="item===videos.page ? 'accent-grad btn-primary' : ''" @click="loadVideos(item); window.scrollTo({top:0,behavior:'smooth'})" x-text="item"></button><span x-show="item === '…'" class="px-1 text-zinc-500">…</span></template>
+               <button class="btn btn-ghost !py-1.5 !px-2" :disabled="videos.page>=pageCount" @click="loadVideos(videos.page+1); window.scrollTo({top:0,behavior:'smooth'})">Next</button>
+             </div>
+           </div>
+
        </section>
      </template>

@@ -288,10 +380,25 @@
                    <div><span class="text-zinc-500">Duration </span><span class="text-zinc-200 font-mono" x-text="ts(detail.video.duration)"></span></div>
                    <div><span class="text-zinc-500">Views </span><span class="text-zinc-200 font-mono" x-text="fmtNum(detail.video.view_count)"></span></div>
                    <div><span class="text-zinc-500">Likes </span><span class="text-zinc-200 font-mono" x-text="fmtNum(detail.video.like_count)"></span></div>
-                    <div><span class="pill" :class="statusClass(detail.video.status)" x-text="detail.video.status"></span></div>
+                    <div class="flex items-center gap-1">
+                      <span class="pill" :class="statusClass(detail.video.status)" x-text="detail.video.status"></span>
+                      <span x-show="isBlocked(detail.video)" class="pill st-locked" :title="blockTitle(detail.video)">
+                        <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 1 1 8 0v3"/></svg>
+                        <span x-text="blockLabel(detail.video)"></span>
+                      </span>
+                    </div>
                  </div>
+                  <div x-show="isBlocked(detail.video)" class="mt-3 text-xs text-amber-300/90" x-text="blockTitle(detail.video)"></div>
+                  <div x-show="detail.video.status==='no_subtitles' || detail.video.status==='error'" class="mt-3 text-xs text-amber-300/90">
+                    No <span class="font-mono">.md</span> was generated.
+                    <span x-show="detail.video.error_msg" class="block mt-1 text-zinc-400 font-mono" x-text="detail.video.error_msg"></span>
+                    <span x-show="!detail.video.error_msg" class="block mt-1 text-zinc-500">No reason was recorded (processed before reasons were stored). Re-process to find out why.</span>
+                  </div>
+                  <div x-show="detail.video.status==='error' && detail.video.error_msg" class="mt-3 text-xs text-rose-300" x-text="detail.video.error_msg"></div>
                  <div class="flex flex-wrap gap-2 mt-4">
-                    <button class="btn accent-grad btn-primary !py-1.5 !px-3 text-xs" @click="detail.video.status==='done' ? downloadMd(detail.video.video_id) : processOne(detail.video.video_id)" x-text="detail.video.status==='done' ? 'Download .md' : 'Process to .md'"></button>
+                    <button class="btn accent-grad btn-primary !py-1.5 !px-3 text-xs" @click="startDiscovery(detail.video.channel_id)" :disabled="jobActive()" title="Find recent videos from this channel without downloading transcripts">Investigate channel</button>
+                    <button x-show="!isBlocked(detail.video) || detail.video.status==='done'" class="btn accent-grad btn-primary !py-1.5 !px-3 text-xs" @click="detail.video.status==='done' ? downloadMd(detail.video.video_id) : processOne(detail.video.video_id)" x-text="detail.video.status==='done' ? 'Download .md' : 'Process to .md'"></button>
+                    <button x-show="isBlocked(detail.video) && detail.video.status!=='done'" class="btn btn-ghost !py-1.5 !px-3 text-xs opacity-60" @click="processOne(detail.video.video_id)" :title="blockTitle(detail.video) + ' Click anyway if you have since bought the membership and refreshed your cookies.'">Try anyway</button>
                    <button class="btn btn-ghost !py-1.5 !px-3 text-xs" @click="downloadAudioOne(detail.video.video_id)" x-show="detail.video.status==='done'" x-text="detail.hasAudio ? 'Re-download audio' : 'Download audio'">
                      <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18V6l10-2v12M9 18a3 3 0 11-6 0 3 3 0 016 0zm10-2a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </button>
@@ -301,6 +408,13 @@
                  <div class="flex flex-wrap gap-1.5 mt-3" x-show="(detail.video.tags||[]).length">
                    <template x-for="t in (detail.video.tags||[]).slice(0,8)" :key="t"><span class="pill st-skipped" x-text="t"></span></template>
                  </div>
+                  <div x-show="detail.video.description" x-data="{ descOpen: false }" class="mt-3 pt-3 border-t border-zinc-800/70">
+                    <button class="flex items-center gap-2 text-xs text-zinc-400 hover:text-rose-400 transition-colors w-full text-left" @click="descOpen = !descOpen" :aria-expanded="descOpen ? 'true' : 'false'" title="Click to toggle description">
+                      <svg :class="descOpen ? 'rotate-90' : ''" class="w-3 h-3 transition-transform shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+                      <span class="uppercase tracking-wider font-semibold">Description</span>
+                    </button>
+                    <div x-show="descOpen" x-transition.opacity class="mt-3 text-sm text-zinc-300 whitespace-pre-wrap leading-relaxed max-h-72 overflow-y-auto pr-1" x-text="detail.video.description"></div>
+                  </div>
                </div>
              </div>

@@ -372,12 +486,21 @@
        <section class="space-y-5" x-transition.opacity>
          <header><h1 class="text-2xl font-bold text-white">Search transcripts</h1><p class="text-sm text-zinc-500">Find moments across all videos</p></header>
          <form class="glass p-4 flex flex-col md:flex-row gap-2" @submit.prevent="loadSearch()">
-            <input class="field flex-1" type="text" placeholder="search query…" x-model="search.q" />
-            <select class="field md:w-56" x-model="search.channel"><option value="">All channels</option><template x-for="c in channels.items" :key="c.channel_id"><option :value="c.channel_id" x-text="c.name"></option></template></select>
-            <button class="btn accent-grad btn-primary" :disabled="loading.search">Search</button>
+            <input class="field flex-1" type="text" placeholder="search query… (Press Enter)" x-model="search.q" aria-label="Search query" />
+            <select class="field md:w-56" x-model="search.channel" @change="if(search.ran) loadSearch()" aria-label="Filter by channel"><option value="">All channels</option><template x-for="c in channels.items" :key="c.channel_id"><option :value="c.channel_id" x-text="c.name"></option></template></select>
+            <button class="btn accent-grad btn-primary" :disabled="loading.search || !search.q.trim()" @click="loadSearch()">Search</button>
+            <button class="btn btn-ghost" type="button" @click="resetSearch()" x-show="search.ran || search.q || search.channel" title="Clear search">Clear</button>
          </form>
          <template x-if="loading.search"><div class="glass p-10 text-center text-zinc-500">searching…</div></template>
-          <template x-if="!loading.search && search.ran && search.items.length===0"><div class="glass p-10 text-center text-zinc-500">No matches found.</div></template>
+          <template x-if="!loading.search && search.ran && search.items.length===0">
+            <div class="glass p-10 text-center">
+              <div class="text-zinc-500 mb-3">No matches for <span class="text-zinc-300 font-mono" x-text="search.q"></span><span x-show="search.channel"> in <span class="text-zinc-300" x-text="chanName(search.channel)"></span></span>.</div>
+              <button class="btn btn-ghost" @click="resetSearch()">Clear filters</button>
+            </div>
+          </template>
+          <template x-if="!loading.search && !search.ran">
+            <div class="glass p-10 text-center text-zinc-500">Type a query and press <kbd class="kbd">Enter</kbd> to search transcripts across all channels.<br><span class="text-xs text-zinc-500">Tip: try a phrase in its original language for best matches.</span></div>
+          </template>
          <div class="space-y-3">
            <template x-for="r in search.items" :key="r.video_id+r.start_sec">
              <div class="glass p-4 hover:border-rose-500/40 transition-colors cursor-pointer" @click="openVideo(r.video_id)">
@@ -457,12 +580,13 @@
                </div>
              </div>
              <div>
-                <label class="block text-xs text-zinc-500 uppercase tracking-wider mb-1">Languages <span class="text-zinc-600 normal-case">(comma-sep)</span></label>
+                <label class="block text-xs text-zinc-500 uppercase tracking-wider mb-1">Languages <span class="text-zinc-500 normal-case">(comma-sep)</span></label>
                <input class="field" type="text" placeholder="en, es" x-model="scrape.form.languages" />
              </div>
              <div class="flex gap-6 pt-1">
                <label class="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer"><input type="checkbox" class="accent-rose-500" x-model="scrape.form.include_shorts" /> Include shorts</label>
                <label class="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer"><input type="checkbox" class="accent-rose-500" x-model="scrape.form.no_live" /> Skip live</label>
+                <label class="flex items-center gap-2 text-sm text-zinc-300 cursor-pointer" title="Off: discovery reads only what was uploaded since the latest video we have"><input type="checkbox" class="accent-rose-500" x-model="scrape.form.full" /> Full channel rescan</label>
              </div>
              <button class="btn accent-grad btn-primary w-full" :disabled="loading.startScrape || !scrape.form.channel_id">
                <svg x-show="loading.startScrape" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
@@ -478,7 +602,7 @@
                  <span class="pill" :class="scrape.error ? 'st-error' : (scrape.done ? 'st-done' : 'st-running')" x-text="scrape.error ? 'error' : (scrape.done ? 'done' : 'running')"></span>
                </template>
              </div>
-              <template x-if="!scrape.jobId"><div class="flex-1 flex items-center justify-center text-zinc-600 text-sm">No active job. Start one to see live progress.</div></template>
+                <template x-if="!scrape.jobId"><div class="flex-1 flex items-center justify-center text-zinc-500 text-sm">No active job. Start one to see live progress.</div></template>
              <template x-if="scrape.jobId">
                <div class="mt-4 space-y-3 flex-1 flex flex-col">
                  <div class="flex justify-between text-xs text-zinc-500"><span>Progress</span><span class="font-mono" x-text="(scrape.progress.completed||0)+' / '+(scrape.progress.total||0)"></span></div>
@@ -500,7 +624,7 @@
            <div class="px-4 py-3 border-b border-zinc-800/70 flex items-center justify-between">
              <div class="flex flex-col">
                <h3 class="text-sm font-semibold text-zinc-200">Recent jobs</h3>
-                <span class="text-[0.65rem] text-zinc-600 mt-0.5">Clearing history removes job records only — downloaded .md files stay.</span>
+                <span class="text-[0.65rem] text-zinc-500 mt-0.5">Clearing history removes job records only — downloaded .md files stay.</span>
              </div>
              <div class="flex gap-1.5">
                <button class="btn btn-ghost !py-1 !px-2 text-xs" @click="loadJobs()">Refresh</button>
@@ -647,6 +771,21 @@
              </button>
            </div>

+            <!-- Channel avatars -->
+            <div class="tool-card glass p-5">
+              <div class="tool-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
+              <h3 class="text-sm font-semibold text-zinc-100">Download avatars</h3>
+              <p class="text-xs text-zinc-500 mt-1 mb-2">Scrape + cache channel profile images locally.</p>
+              <select class="field !text-xs !py-1.5 mb-2" x-model="tools.avatarScope">
+                <option value="all">All tracked channels</option>
+                <template x-for="c in channels.items" :key="c.channel_id"><option :value="c.channel_id" x-text="c.name"></option></template>
+              </select>
+              <button class="btn btn-ghost w-full" :disabled="tools.busy==='avatars'" @click="downloadAvatarsScope(tools.avatarScope)">
+                <svg x-show="tools.busy==='avatars'" class="spin w-4 h-4" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" stroke-dasharray="40 20"/></svg>
+                Download
+              </button>
+            </div>
+
            <!-- Audio -->
            <div class="tool-card glass p-5">
              <div class="tool-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18V6l10-2v12M9 18a3 3 0 11-6 0 3 3 0 016 0zm10-2a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
@@ -787,7 +926,7 @@

  <!-- ============ FLOATING JOB WIDGET ============ -->
  <template x-if="scrape.jobId && view !== 'scrape' && !jobWidget.dismissed">
-    <div class="job-widget" x-transition.opacity>
+    <div class="job-widget" x-transition.opacity @mouseenter="_bumpAutoHide()" @focusin="_bumpAutoHide()">
      <template x-if="!jobWidget.collapsed">
        <div class="space-y-2.5">
          <div class="flex items-center justify-between gap-3">
@@ -796,7 +935,7 @@
              <span class="text-xs font-semibold text-white uppercase tracking-wider" x-text="scrape.kind ? scrape.kind + ' job' : 'job'"></span>
              <span class="pill !text-[0.6rem] !py-0" :class="scrape.error ? 'st-error' : (scrape.done ? 'st-done' : 'st-running')" x-text="scrape.error ? 'error' : (scrape.done ? 'done' : 'running')"></span>
            </div>
-            <button class="jw-x" @click="closeJobWidget()" :title="(!scrape.done && !scrape.error) ? 'Minimize' : 'Dismiss'">✕</button>
+            <button class="jw-x" @click="closeJobWidget()" :title="(!scrape.done && !scrape.error) ? 'Minimize' : 'Dismiss'" :aria-label="(!scrape.done && !scrape.error) ? 'Minimize job widget' : 'Dismiss job widget'">✕</button>
          </div>
          <div class="flex justify-between text-[0.7rem] text-zinc-500">
            <span>Progress</span>
@@ -832,7 +971,7 @@
      <div class="modal-card w-full max-w-2xl" @click.stop>
        <div class="modal-head">
          <h2 class="text-base font-semibold text-white">Clip extractor</h2>
-          <button class="jw-x" @click="closeClip()">✕</button>
+          <button class="jw-x" @click="closeClip()" aria-label="Close clip extractor" title="Close (Esc)">✕</button>
        </div>
        <div class="p-5 space-y-3">
          <div>
@@ -882,7 +1021,7 @@
      <div class="modal-card w-full max-w-3xl" @click.stop>
        <div class="modal-head">
          <h2 class="text-base font-semibold text-white">Stats</h2>
-          <button class="jw-x" @click="closeStats()">✕</button>
+          <button class="jw-x" @click="closeStats()" aria-label="Close stats panel" title="Close (Esc)">✕</button>
        </div>
        <div class="p-5 space-y-5">
          <template x-if="stats.loading"><div class="text-zinc-500 text-sm text-center py-8">crunching…</div></template>
@@ -935,6 +1074,25 @@
    </div>
  </template>

+  <!-- ============ IN-APP CONFIRM (replaces window.confirm) ============ -->
+  <template x-if="confirmBox.open">
+    <div class="modal-backdrop" @click.self="resolveConfirm(false)" x-transition.opacity>
+      <div class="modal-card w-full max-w-md" @click.stop role="alertdialog" aria-modal="true" :aria-label="confirmBox.title">
+        <div class="modal-head">
+          <h2 class="text-base font-semibold text-white" x-text="confirmBox.title"></h2>
+          <button class="jw-x" @click="resolveConfirm(false)" aria-label="Close dialog" title="Close (Esc)">✕</button>
+        </div>
+        <div class="p-5 space-y-4">
+          <p class="text-sm text-zinc-300 leading-relaxed whitespace-pre-line" x-text="confirmBox.message"></p>
+          <div class="flex gap-2 justify-end">
+            <button class="btn btn-ghost flex-1" @click="resolveConfirm(false)" x-init="$el.focus()" x-text="confirmBox.cancelLabel"></button>
+            <button class="btn flex-1" :class="confirmBox.danger ? 'btn-danger' : 'accent-grad btn-primary'" @click="resolveConfirm(true)" x-text="confirmBox.confirmLabel"></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+
 </div>
 </body>
 </html>