h3-console: 任务列表加缩略图+分页，修复重复记录的竞态

左侧任务列表宽度 300px→50%，每条任务加缩略图（已完成显示结果视频首帧，未完成显示输入的首帧图/参考图）；行节点按 job id 复用，避免每 5 秒轮询重建 DOM 把还没加载完的 <video>/<img> 连根拔掉。无限滚动改成真分页（默认 20 条/页），/v1/videos 加 offset 参数和 total 字段——列表变慢是因为无限滚动堆积的缩略图媒体请求越滚越多，分页把并发请求数固定住。修复 _try_submit（提交任务给 gateway）和 _discover_from_gateway（捞取绕过 console 直连的任务）之间的竞态：提交请求已发出但 gateway_id 还没写回数据库的窗口内，discover 会把这个任务误判成孤儿、用 gateway_id 自己当 console id 再插一行，导致同一个真实任务在列表里出现两条记录（同一个 comfy_prompt_id）。两段操作现在共享同一把锁，不再重叠。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GFw9ZBh3eVjssk6quYQ4Ki

h3-console: 任务列表加缩略图+分页，修复重复记录的竞态
左侧任务列表宽度 300px→50%，每条任务加缩略图（已完成显示结果视频首帧，未完成显示输入的首帧图/参考图）；行节点按 job id 复用，避免每 5 秒轮询重建 DOM 把还没加载完的 <video>/<img> 连根拔掉。无限滚动改成真分页（默认 20 条/页），/v1/videos 加 offset 参数和 total 字段——列表变慢是因为无限滚动堆积的缩略图媒体请求越滚越多，分页把并发请求数固定住。修复 _try_submit（提交任务给 gateway）和 _discover_from_gateway（捞取绕过 console 直连的任务）之间的竞态：提交请求已发出但 gateway_id 还没写回数据库的窗口内，discover 会把这个任务误判成孤儿、用 gateway_id 自己当 console id 再插一行，导致同一个真实任务在列表里出现两条记录（同一个 comfy_prompt_id）。两段操作现在共享同一把锁，不再重叠。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GFw9ZBh3eVjssk6quYQ4Ki
yibo
1 parent f1f62301
Showing 2 changed files with 206 additions and 101 deletions
h3-console/server.py
h3-console/static/index.html
@@ -231,6 +231,18 @@ def _row_view(row) -&gt; dict:
 # 两行判断中间没有 await，天然原子，不会被其它协程插进来）。
 _SUBMITTING: set[str] = set()
+# 2026-09-04：上面这把 _SUBMITTING 只挡得住"同一个 cid 被提交两次"，挡不住另一种真实踩到过的
+# 重复——_try_submit 从发 POST 到把 gateway_id 写回数据库之间有一段 await 窗口，这段时间里
+# gateway(raylight) 那边这条任务已经创建、能在它自己的 /v1/videos 列表里查到了，但 console 的
+# jobs 表还没记上这个 gateway_id。如果 reconciler_loop 的 _discover_from_gateway() 正好在这个
+# 窗口执行，会把这条"看起来没人认领"的 gateway 任务当成孤儿任务，拿 gateway_id 本身当 console id
+# 再插一行——于是同一个真实生成任务在任务列表里出现两条记录，状态/进度看起来一样，其实是同一个
+# comfy_prompt_id（案例：4c99f52a3a7a / ff818215fd3e，2026-09-04）。
+# 修法：把"提交"（发请求→写回 gateway_id）和"发现孤儿"（读已知 gateway_id 集合→插入孤儿行）
+# 这两段簿记操作用同一把锁互斥，全程不重叠——反正 raylight 本来就一次只处理一个请求，串行化
+# 这两段轻量 HTTP 调用不影响真正的生成吞吐量。
+_SUBMIT_LOCK = asyncio.Lock()
+
 async def _try_submit(cid: str):
     """把一条本地排队的任务尝试提交给 gateway。给 create_video 首次调用和 reconciler_loop 复用。"""
@@ -242,31 +254,32 @@ async def _try_submit(cid: str):
         return  # 任务不存在，或已经提交过
     _SUBMITTING.add(cid)
     try:
-        req = json.loads(row["req_json"])
-        try:
-            resp = await client.post(f"{GATEWAY_URL}/v1/videos", json=req)
-        except httpx.HTTPError:
-            return  # gateway 暂时连不上，下一轮再试
-        now = time.time()
-        if resp.status_code < 400:
-            job = resp.json()
-            gateway_id = job["id"]
-            job["id"] = cid  # 对外只暴露 console 自己的 id
-            with db() as con:
-                con.execute(
-                    "UPDATE jobs SET gateway_id=?, backend=?, status=?, updated_at=?, last_known_json=? WHERE id=?",
-                    (gateway_id, job.get("backend"), job.get("status", "queued"),
-                     now, json.dumps(job, ensure_ascii=False), cid),
-                )
-        elif resp.status_code in (503, 429):
-            return  # 没有就绪后端 / 队列满，留在本地队列，等 flip 或别的任务跑完再试
-        else:
-            # 真正的客户端错误（比如 422 参数越界、400 turbo+steps>8），重试也不会成功，直接判失败
-            err_view = {"id": cid, "status": "failed", "error": resp.text,
-                        "req": req, "partition": row["partition"], "created_at": row["created_at"]}
-            with db() as con:
-                con.execute("UPDATE jobs SET status='failed', updated_at=?, last_known_json=? WHERE id=?",
-                            (now, json.dumps(err_view, ensure_ascii=False), cid))
+        async with _SUBMIT_LOCK:
+            req = json.loads(row["req_json"])
+            try:
+                resp = await client.post(f"{GATEWAY_URL}/v1/videos", json=req)
+            except httpx.HTTPError:
+                return  # gateway 暂时连不上，下一轮再试
+            now = time.time()
+            if resp.status_code < 400:
+                job = resp.json()
+                gateway_id = job["id"]
+                job["id"] = cid  # 对外只暴露 console 自己的 id
+                with db() as con:
+                    con.execute(
+                        "UPDATE jobs SET gateway_id=?, backend=?, status=?, updated_at=?, last_known_json=? WHERE id=?",
+                        (gateway_id, job.get("backend"), job.get("status", "queued"),
+                         now, json.dumps(job, ensure_ascii=False), cid),
+                    )
+            elif resp.status_code in (503, 429):
+                return  # 没有就绪后端 / 队列满，留在本地队列，等 flip 或别的任务跑完再试
+            else:
+                # 真正的客户端错误（比如 422 参数越界、400 turbo+steps>8），重试也不会成功，直接判失败
+                err_view = {"id": cid, "status": "failed", "error": resp.text,
+                            "req": req, "partition": row["partition"], "created_at": row["created_at"]}
+                with db() as con:
+                    con.execute("UPDATE jobs SET status='failed', updated_at=?, last_known_json=? WHERE id=?",
+                                (now, json.dumps(err_view, ensure_ascii=False), cid))
     finally:
         _SUBMITTING.discard(cid)
@@ -313,42 +326,46 @@ async def _discover_from_gateway():
     捞回来。两边后端都有 GET /v1/videos 全量列表（raylight 直接返回 list，老 gateway 包一层
     {"jobs":[...]}），本来就是给这个用的。2026-08-24 真出过一次：有人直连后端提交，console
     界面完全看不到，两边还因为都不知道对方在用哪张卡而抢 GPU。
-    没有反过来发现「新任务」的必要去重锁——本函数只在 reconciler_loop 里单协程顺序调用，
-    不会跟自己并发。"""
-    try:
-        resp = await client.get(f"{GATEWAY_URL}/v1/videos", params={"limit": 200})
-    except httpx.HTTPError:
-        return
-    if resp.status_code != 200:
-        return
-    body = resp.json()
-    remote = body.get("jobs", body) if isinstance(body, dict) else body
-    with db() as con:
-        known = {r["gateway_id"] for r in con.execute(
-            "SELECT gateway_id FROM jobs WHERE gateway_id IS NOT NULL")}
-    for summary in remote:
-        gid = summary.get("id")
-        if not gid or gid in known:
-            continue
+    2026-09-04 更正：本函数确实只在 reconciler_loop 里单协程顺序调用、不会跟自己并发，但会跟
+    别的协程（create_video/get_video 触发的 _try_submit）并发——如果正好在某个 _try_submit
+    "已经把请求 POST 给 gateway、gateway_id 还没写回数据库"的窗口执行，会把这条其实已经被
+    console 自己认领、只是还没记上账的任务当成孤儿，插出一条重复记录（同一个 comfy_prompt_id
+    在任务列表里出现两条）。用跟 _try_submit 共享的 _SUBMIT_LOCK 互斥，两段簿记操作不再重叠。"""
+    async with _SUBMIT_LOCK:
         try:
-            detail = await client.get(f"{GATEWAY_URL}/v1/videos/{gid}")
+            resp = await client.get(f"{GATEWAY_URL}/v1/videos", params={"limit": 200})
         except httpx.HTTPError:
-            continue
-        if detail.status_code != 200:
-            continue
-        job = detail.json()
-        req = job.get("req", {})
-        now = time.time()
-        job["id"] = gid  # 发现的任务没有独立的 console id，直接用 gateway id 本身
+            return
+        if resp.status_code != 200:
+            return
+        body = resp.json()
+        remote = body.get("jobs", body) if isinstance(body, dict) else body
         with db() as con:
-            con.execute(
-                "INSERT OR IGNORE INTO jobs "
-                "(id, gateway_id, partition, backend, status, req_json, created_at, updated_at, last_known_json) "
-                "VALUES (?,?,?,?,?,?,?,?,?)",
-                (gid, gid, job.get("partition") or _partition_of(req), job.get("backend"),
-                 job.get("status", "queued"), json.dumps(req, ensure_ascii=False),
-                 job.get("created_at", now), now, json.dumps(job, ensure_ascii=False)),
-            )
+            known = {r["gateway_id"] for r in con.execute(
+                "SELECT gateway_id FROM jobs WHERE gateway_id IS NOT NULL")}
+        for summary in remote:
+            gid = summary.get("id")
+            if not gid or gid in known:
+                continue
+            try:
+                detail = await client.get(f"{GATEWAY_URL}/v1/videos/{gid}")
+            except httpx.HTTPError:
+                continue
+            if detail.status_code != 200:
+                continue
+            job = detail.json()
+            req = job.get("req", {})
+            now = time.time()
+            job["id"] = gid  # 发现的任务没有独立的 console id，直接用 gateway id 本身
+            with db() as con:
+                con.execute(
+                    "INSERT OR IGNORE INTO jobs "
+                    "(id, gateway_id, partition, backend, status, req_json, created_at, updated_at, last_known_json) "
+                    "VALUES (?,?,?,?,?,?,?,?,?)",
+                    (gid, gid, job.get("partition") or _partition_of(req), job.get("backend"),
+                     job.get("status", "queued"), json.dumps(req, ensure_ascii=False),
+                     job.get("created_at", now), now, json.dumps(job, ensure_ascii=False)),
+                )
 @api.post("/v1/videos", status_code=202)
@@ -527,7 +544,7 @@ async def download_video(jid: str, request: Request):
 @api.get("/v1/videos")
-async def list_videos(limit: int = 50, trash: bool = False, q: str = "", status: str = "",
+async def list_videos(limit: int = 20, offset: int = 0, trash: bool = False, q: str = "", status: str = "",
                        kind: str = "", sort: str = "desc"):
     # console 自己的 sqlite 是任务列表的唯一真相来源（本地排队中的任务，gateway 根本不知道它存在，
     # 没法从 gateway 反查出来）。实时进度由后台 reconciler_loop 持续刷新进 last_known_json，
@@ -552,12 +569,14 @@ async def list_videos(limit: int = 50, trash: bool = False, q: str = &quot;&quot;, status:
         params.append(kind)
     order_col = "deleted_at" if trash else "created_at"
     order = f"{order_col} {'ASC' if sort == 'asc' else 'DESC'}"
-    params.append(limit)
     with db() as con:
+        # 前端要做真分页（第X/共Y页），得知道筛选条件下总共有多少条，不能只看这一页拿回了几条。
+        total = con.execute(f"SELECT COUNT(*) FROM jobs WHERE {' AND '.join(where)}", params).fetchone()[0]
         rows = con.execute(
-            f"SELECT * FROM jobs WHERE {' AND '.join(where)} ORDER BY {order} LIMIT ?", params
+            f"SELECT * FROM jobs WHERE {' AND '.join(where)} ORDER BY {order} LIMIT ? OFFSET ?",
+            params + [limit, offset],
         ).fetchall()
-    return {"jobs": [_row_view(r) for r in rows]}
+    return {"jobs": [_row_view(r) for r in rows], "total": total}
 @api.delete("/v1/videos/{jid}")
@@ -9,7 +9,9 @@
   body { font-family: -apple-system, "PingFang SC", sans-serif; margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden; }
   /* ---- 左侧任务记录 ---- */
-  #sidebar { width: 300px; flex-shrink: 0; border-right: 1px solid #ddd; display: flex; flex-direction: column; height: 100vh; }
+  /* 2026-09-04：原来 300px 定宽太窄，列表里看不出每条任务在生成什么，只能点进详情才知道——
+     改成视口 50%，腾出空间放缩略图（见下面 .jr-thumb）。 */
+  #sidebar { width: 50%; flex-shrink: 0; border-right: 1px solid #ddd; display: flex; flex-direction: column; height: 100vh; }
   #sidebar-header { padding: 16px; border-bottom: 1px solid #ddd; }
   #sidebar-header h1 { font-size: 16px; margin: 0; }
   #sidebar-filters { padding: 8px 16px; border-bottom: 1px solid #ddd; display: flex; flex-direction: column; gap: 6px; }
@@ -21,6 +23,9 @@
   #job-sort-btn:hover { background: rgba(128,128,128,.15); }
   #job-list { flex: 1; overflow-y: auto; }
   #job-list-footer { padding: 10px 16px; text-align: center; font-size: 11px; opacity: .55; }
+  .page-btn { font-size: 12px; padding: 3px 10px; border: 1px solid #888; background: transparent;
+    border-radius: 4px; cursor: pointer; }
+  .page-btn:disabled { opacity: .4; cursor: default; }
   .job-row { position: relative; padding: 10px 16px; border-bottom: 1px solid #eee; cursor: pointer; }
   .job-row:hover { background: rgba(128,128,128,.08); }
   .job-row.selected { background: rgba(74,170,119,.15); border-left: 3px solid #4a7; }
@@ -29,6 +34,16 @@
   .job-row .jr-actions { display: flex; align-items: center; gap: 6px; }
   .job-row .jr-prompt { font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .job-row .jr-time { font-size: 11px; opacity: .55; margin-top: 2px; }
+  /* 2026-09-04：任务列表加缩略图——已完成的显示结果视频（取第一帧当封面），还没完成的
+     显示输入的首帧图/参考图，两者都没有就显示任务类型文字兜底。 */
+  .jr-body { display: flex; gap: 10px; align-items: flex-start; }
+  .jr-thumb { width: 88px; height: 118px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
+    background: rgba(128,128,128,.15); display: flex; align-items: center; justify-content: center; }
+  .jr-thumb img, .jr-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .jr-thumb-empty { font-size: 12px; opacity: .5; text-align: center; padding: 0 4px; }
+  .jr-info { flex: 1; min-width: 0; }
+  .jr-info .jr-prompt { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4; }
   .jr-menu-btn { cursor: pointer; padding: 0 4px; opacity: .55; font-size: 14px; line-height: 1; }
   .jr-menu-btn:hover { opacity: 1; }
   .jr-menu { position: absolute; top: 22px; right: 12px; background: Canvas; color: CanvasText;
@@ -310,20 +325,26 @@ let trashCache = [];
 let viewingTrash = false;
 let openMenuFor = null;
-// 任务列表原来固定 limit=50，服务器上实测已经攒了 232 条未删除任务——超出的 182 条根本
-//没请求回来，#job-list 的 overflow-y:auto 只能滚动已加载的这 50 条，看起来像"下拉到底
-// 就没了"。改成滚到底部自动把 loadedLimit 加 50 再重新拉，直到某次返回条数小于请求的
-// limit（说明已经拉到头，noMoreJobs=true，不用再滚）。search/status/kind/sort 每次改动
-// 都把 loadedLimit 重置回 50 重新拉——过滤条件变了，"已经拉到第几页"这个状态就该归零。
-let loadedLimit = 50;
-let noMoreJobs = false;
-let loadingMore = false;
+// 2026-09-04：原来是"滚到底部自动多拉50条"的无限滚动，列表越滚越长，每条任务的缩略图
+// （视频/图片）也跟着越攒越多，同时几十个 <video preload=metadata> 一起抢带宽，这才是
+// "任务列表加载变慢"的真正原因（不是接口慢，是 DOM 和媒体请求堆积)。改成真分页——每页
+// 固定 20 条，翻页时旧页的行/缩略图节点整个丢弃，同一时间最多只有一页的媒体请求在飞。
+const PAGE_SIZE = 20;
+let currentPage = 1;
+let totalJobs = 0;
 let filterQ = '';
 let filterStatus = '';
 let filterKind = '';
 let sortOrder = 'desc';
-function resetPaging() { loadedLimit = 50; noMoreJobs = false; refreshJobs(); }
+function resetPaging() { currentPage = 1; refreshJobs(); }
+
+function gotoPage(p) {
+  const totalPages = Math.max(1, Math.ceil(totalJobs / PAGE_SIZE));
+  currentPage = Math.min(Math.max(1, p), totalPages);
+  refreshJobs();
+  document.getElementById('job-list').scrollTop = 0;
+}
 // URL 是 /task.html/<id> 或 /newtask.html（或裸 /，等同 newtask）——不是两个页面文件，
 // server.py 里 /task.html/{tid} 和 /newtask.html 两条路由都返回这同一份 index.html，
@@ -356,17 +377,6 @@ document.getElementById(&#39;job-sort-btn&#39;).addEventListener(&#39;click&#39;, e =&gt; {
   resetPaging();
 });
-// 滚到列表底部附近就自动加载下一页，不用额外放个"加载更多"按钮——viewingTrash/已经拉到头/
-// 上一页还没回来这三种情况都不重复触发。
-document.getElementById('job-list').addEventListener('scroll', e => {
-  if (viewingTrash || noMoreJobs || loadingMore) return;
-  const el = e.target;
-  if (el.scrollTop + el.clientHeight < el.scrollHeight - 80) return;
-  loadingMore = true;
-  loadedLimit += 50;
-  refreshJobs().finally(() => { loadingMore = false; });
-});
-
 function showCreate(pushUrl = true) {
   selectedId = null;
   if (pushUrl) history.pushState(null, '', H3_BASE + '/newtask.html');
@@ -825,6 +835,28 @@ async function resetGpu() {
   await refreshJobs();
 }
+function jobKindLabel(req) {
+  if (req.first_frame_url || req.last_frame_url) return '首尾帧';
+  if ((req.reference_image_urls || []).length || (req.reference_video_urls || []).length || (req.reference_audio_urls || []).length) return '参考图';
+  return '文生';
+}
+
+// 已完成的任务直接拿结果视频当封面（preload=metadata 只取第一帧，不下载整段）；
+// 还没完成的用输入的首帧图/参考图占位，好歹能看出这条任务在做什么；两者都没有
+// （纯文生视频还没跑完）就退化成显示任务类型文字。
+// ponytail: 列表里同时出现很多条"已完成"任务时，浏览器会并发发起同等数量的
+// metadata 探测请求，量大可能变卡——真遇到再改成后端生成静态封面图。
+function jobThumbHtml(j) {
+  const req = j.req || {};
+  if (j.status === 'done') {
+    const src = h3FileUrl(H3_BASE + '/v1/videos/' + j.id + '/file');
+    return `<video src="${src}" muted preload="metadata"></video>`;
+  }
+  const imgUrl = req.first_frame_url || (req.reference_image_urls || [])[0];
+  if (imgUrl) return `<img src="${imgUrl}" loading="lazy">`;
+  return `<div class="jr-thumb-empty">${jobKindLabel(req)}</div>`;
+}
+
 function statusLabel(s) {
   const map = { queued: '排队中', running: '运行中', done: '已完成', failed: '失败', cancelled: '已取消' };
   return `<span class="status-${s}">${map[s] || s}</span>`;
@@ -843,8 +875,24 @@ function fmtTime(ts) {
   return new Date(ts * 1000).toLocaleString('zh-CN', { hour12: false });
 }
+// id -> { el, thumbSig }。renderSidebar() 每 5 秒被 refreshJobs() 轮询触发一次，加了缩略图
+// 之后如果还是老办法"box.innerHTML=''整表重建"，<img loading=lazy>/<video preload=metadata>
+// 就会在真正加载出内容之前被连根拔掉重来一遍——缩略图永远来不及显示，长期空白。
+// 这两个变量按 job id 缓存已经建好的行节点，跨轮询复用，缩略图只在来源真的变了（比如
+// 排队中变成已完成，thumbSig 从 img:xxx 变成 video）才重建；只是状态/时间文字变化则原地更新。
+let jobRowNodes = new Map();
+let lastSidebarMode = null;
+
+function jobThumbSig(j) {
+  if (j.status === 'done') return 'video';
+  const req = j.req || {};
+  return 'img:' + (req.first_frame_url || (req.reference_image_urls || [])[0] || '');
+}
+
 function renderSidebar() {
-  const box = document.getElementById('job-list'); box.innerHTML = '';
+  const box = document.getElementById('job-list');
+  const mode = viewingTrash ? 'trash' : 'normal';
+  if (mode !== lastSidebarMode) { box.innerHTML = ''; jobRowNodes.clear(); lastSidebarMode = mode; }
   document.getElementById('sidebar-filters').style.display = viewingTrash ? 'none' : 'flex';
   // "+新建任务" 固定在筛选框上面、列表外面，不随 #job-list 滚动——之前是塞进 job-list 第一
   // 行的，列表一滚就跟着跑没了，2026-08-28 用户反馈要求固定住。
@@ -853,6 +901,7 @@ function renderSidebar() {
   newTaskRow.classList.toggle('selected', !viewingTrash && selectedId === null);
   if (viewingTrash) {
+    box.innerHTML = '';
     const backRow = document.createElement('div');
     backRow.className = 'job-row new-row';
     backRow.onclick = () => backToList();
@@ -879,13 +928,27 @@ function renderSidebar() {
     return;
   }
+  const seen = new Set();
   jobsCache.forEach(j => {
-    const row = document.createElement('div');
+    seen.add(j.id);
+    let cached = jobRowNodes.get(j.id);
+    if (!cached) {
+      cached = { el: document.createElement('div'), thumbSig: null };
+      jobRowNodes.set(j.id, cached);
+    }
+    const row = cached.el;
     row.className = 'job-row' + (j.id === selectedId ? ' selected' : '');
     row.onclick = () => selectJob(j.id);
+
+    const thumbSig = jobThumbSig(j);
+    if (cached.thumbSig !== thumbSig) {
+      row.innerHTML = `<div class="jr-body"><div class="jr-thumb">${jobThumbHtml(j)}</div><div class="jr-info"></div></div>`;
+      cached.thumbSig = thumbSig;
+    }
+
     const prompt = j.req ? (j.req.prompt || '(无 prompt)') : '';
     const menuOpen = openMenuFor === j.id;
-    row.innerHTML = `
+    row.querySelector('.jr-info').innerHTML = `
       <div class="jr-top"><span>${j.id}</span>
         <div class="jr-actions">
           ${statusLabel(j.status)}
@@ -893,25 +956,42 @@ function renderSidebar() {
         </div>
       </div>
       <div class="jr-prompt" title="${prompt}">${prompt}</div>
-      <div class="jr-time">${timeAgo(j.created_at)}</div>
-      ${menuOpen ? `<div class="jr-menu" onclick="event.stopPropagation()">
+      <div class="jr-time">${timeAgo(j.created_at)}</div>`;
+
+    const oldMenu = row.querySelector(':scope > .jr-menu');
+    if (oldMenu) oldMenu.remove();
+    if (menuOpen) {
+      row.insertAdjacentHTML('beforeend', `<div class="jr-menu" onclick="event.stopPropagation()">
         ${j.status === 'queued' ? `<div class="jr-menu-item" onclick="prioritizeJob('${j.id}')">优先插队</div>` : ''}
         <div class="jr-menu-item" onclick="deleteJob('${j.id}')">删除</div>
-      </div>` : ''}`;
-    box.appendChild(row);
+      </div>`);
+    }
+    box.appendChild(row);  // 已经在 DOM 里的话是"挪位置"，不会销毁子节点（缩略图不受影响）
   });
-  if (jobsCache.length) {
-    const footer = document.createElement('div');
+  // 丢掉不在当前列表里的行缓存（被删除/被筛选掉了），顺带把对应 DOM 节点也摘掉
+  for (const [id, cached] of jobRowNodes) {
+    if (!seen.has(id)) { cached.el.remove(); jobRowNodes.delete(id); }
+  }
+
+  let footer = document.getElementById('job-list-footer');
+  if (!footer) {
+    footer = document.createElement('div');
     footer.id = 'job-list-footer';
-    footer.textContent = noMoreJobs ? '— 没有更多了 —' : '下拉加载更多…';
-    box.appendChild(footer);
-  } else if (filterQ || filterStatus || filterKind) {
-    const empty = document.createElement('div');
-    empty.style.cssText = 'padding:16px;font-size:13px;opacity:.6';
-    empty.textContent = '没有匹配的任务';
-    box.appendChild(empty);
   }
+  box.appendChild(footer);  // 挪到最后一行任务后面（新建的话就是插入）
+
+  if (totalJobs === 0) {
+    footer.innerHTML = `<div style="padding:6px 0">${(filterQ || filterStatus || filterKind) ? '没有匹配的任务' : '还没有任务'}</div>`;
+    return;
+  }
+  const totalPages = Math.max(1, Math.ceil(totalJobs / PAGE_SIZE));
+  footer.innerHTML = `
+    <div style="display:flex;align-items:center;justify-content:center;gap:10px">
+      <button class="page-btn" ${currentPage <= 1 ? 'disabled' : ''} onclick="gotoPage(${currentPage - 1})">‹ 上一页</button>
+      <span>第 ${currentPage}/${totalPages} 页 · 共 ${totalJobs} 条</span>
+      <button class="page-btn" ${currentPage >= totalPages ? 'disabled' : ''} onclick="gotoPage(${currentPage + 1})">下一页 ›</button>
+    </div>`;
 }
 // 任意点击落在某条任务的「⋯」菜单外面，就把菜单收起来——不然点开一个菜单后点别处它会一直挂着
@@ -1088,13 +1168,19 @@ async function loadComfyHistory(id) {
 async function refreshJobs() {
   if (viewingTrash) { await loadTrash(); renderSidebar(); return; }
   try {
-    const params = new URLSearchParams({ limit: String(loadedLimit), sort: sortOrder });
+    const params = new URLSearchParams({ limit: String(PAGE_SIZE), offset: String((currentPage - 1) * PAGE_SIZE), sort: sortOrder });
     if (filterQ) params.set('q', filterQ);
     if (filterStatus) params.set('status', filterStatus);
     if (filterKind) params.set('kind', filterKind);
     const r = await fetch(`${H3_BASE}/v1/videos?${params}`); const d = await r.json();
     jobsCache = d.jobs || [];
-    noMoreJobs = jobsCache.length < loadedLimit;
+    totalJobs = d.total ?? jobsCache.length;
+    // 轮询轮到的这一页如果因为任务被删/移出回收站而变空了（比如正好停在最后一页），
+    // 退回上一页重新拉一次，不要晾着一页空列表。
+    if (jobsCache.length === 0 && currentPage > 1 && totalJobs > 0) {
+      currentPage = Math.max(1, Math.ceil(totalJobs / PAGE_SIZE));
+      return refreshJobs();
+    }
     renderSidebar();
     // 只有还在变化的任务（排队/运行中）才需要重新拉详情。`refreshDetail()` 是整段
     // innerHTML 重建，`done` 之后再重建会把正在播放的 <video> 元素连根拔掉——