From dca88b3765c507cba87a7c1da34f2309091e0588 Mon Sep 17 00:00:00 2001
From: leefer <hello@shengshentech.com>
Date: Thu, 22 Oct 2026 05:18:07 +0800
Subject: [PATCH] fix(HEL-751): restore confirmed full-width task table

Co-authored-by: multica-agent <github@multica.ai>
---
 .../src/lib/components/manage/management.css  |  85 ++-
 calliope-web/src/routes/tasks/+page.svelte    | 408 ++++++++-----
 calliope-web/static/themes.css                |  27 +
 .../2026-10-22-hel751-task-table.md           |  44 ++
 scripts/verify-hel751.mjs                     | 565 ++++++++++++++++++
 scripts/verify-hel751.py                      | 119 ++++
 6 files changed, 1089 insertions(+), 159 deletions(-)
 create mode 100644 docs/changelogs/2026-10-22-hel751-task-table.md
 create mode 100644 scripts/verify-hel751.mjs
 create mode 100644 scripts/verify-hel751.py

diff --git a/calliope-web/src/lib/components/manage/management.css b/calliope-web/src/lib/components/manage/management.css
index b874db6..ba1f3e0 100644
--- a/calliope-web/src/lib/components/manage/management.css
+++ b/calliope-web/src/lib/components/manage/management.css
@@ -138,7 +138,7 @@
   overflow: auto;
 }
 .mg-table table {
-  table-layout: fixed;
+  table-layout: var(--manage-table-layout, fixed);
   width: 100%;
   border-collapse: collapse;
   font-size: 12.5px;
@@ -148,6 +148,7 @@
   top: 0;
   background: var(--bg-0);
   z-index: 1;
+  box-sizing: var(--manage-cell-box, content-box);
   text-align: left;
   font-weight: 500;
   color: var(--tx-3);
@@ -156,6 +157,7 @@
   border-bottom: 1px solid var(--line);
 }
 .mg-table td {
+  box-sizing: var(--manage-cell-box, content-box);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -752,3 +754,84 @@ textarea.f-input {
 .mg-pin[aria-pressed="true"] svg {
   fill: currentColor;
 }
+
+/* Confirmed full-width task table. Shared table/controls remain the single source. */
+.task-table {
+  --manage-table-layout: var(--task-table-layout);
+  --manage-cell-box: border-box;
+}
+.task-thumbnail-column {
+  width: var(--task-thumbnail-column);
+}
+.task-progress-column {
+  width: var(--task-progress-column);
+}
+.task-tabs {
+  width: var(--task-tabs-width);
+  margin-left: var(--task-tabs-offset);
+}
+.task-search {
+  width: var(--task-search-width);
+}
+.task-thumbnail {
+  display: grid;
+  place-items: center;
+  width: var(--task-thumbnail-width);
+  height: var(--task-thumbnail-height);
+  border-radius: var(--task-thumbnail-radius);
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--tx-3);
+  background: var(--bg-2);
+  cursor: pointer;
+}
+.task-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.task-name {
+  font-weight: 500;
+}
+.task-progress {
+  height: var(--task-progress-height);
+  margin-top: var(--task-progress-gap);
+  border-radius: var(--task-progress-radius);
+  background: rgb(var(--ink) / 0.1);
+  overflow: hidden;
+}
+.task-progress i {
+  display: block;
+  height: 100%;
+  background: var(--task-progress-fill);
+  box-shadow: var(--task-progress-shadow);
+  transition: width var(--task-progress-duration) linear;
+}
+.task-progress-unknown {
+  color: var(--tx-3);
+  margin-left: var(--task-progress-gap);
+}
+.task-table .mg-tag.run,
+.task-dialog .mg-tag.run {
+  color: var(--task-running-color);
+  border-color: var(--task-running-border);
+  background: var(--task-running-background);
+}
+.task-dialog {
+  height: auto;
+  overflow: visible;
+  gap: 12px;
+}
+.task-output {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.task-output img,
+.task-output video {
+  width: 100%;
+  max-height: var(--task-preview-height);
+  object-fit: contain;
+  background: var(--media-bg);
+}
diff --git a/calliope-web/src/routes/tasks/+page.svelte b/calliope-web/src/routes/tasks/+page.svelte
index 8a55184..cfc25a8 100644
--- a/calliope-web/src/routes/tasks/+page.svelte
+++ b/calliope-web/src/routes/tasks/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { SvelteMap } from "svelte/reactivity";
+  import Modal from "$lib/components/ui/Modal.svelte";
   import { resolve } from "$app/paths";
   import { createQuery, useQueryClient } from "@tanstack/svelte-query";
   import ManagementPage from "$lib/components/manage/ManagementPage.svelte";
@@ -14,7 +16,7 @@
   } from "$lib/api";
   import { connectEvents } from "$lib/events";
   import { parseDbTs } from "$lib/dbtime";
-  import { handleJobEvent, progressFor } from "$lib/jobProgress";
+  import { handleJobEvent } from "$lib/jobProgress";
   import { jobStatusInfo } from "$lib/jobStatus";
   import { isFileMissing, markOutputMissing } from "$lib/missingOutputs.svelte";
   import { toast } from "$lib/toast";
@@ -26,7 +28,7 @@
   } from "$lib/jobLabels";
   import { createTakeDeleteQueue } from "$lib/components/generate/takeDelete.svelte";
 
-  /** Three-column real tasks: source filters, queue list and details. Existing SSE, retry, cancellation and undo-delete behavior is preserved. */
+  /** Full-width confirmed task table; existing mutations stay in the shared APIs. */
   const client = useQueryClient();
 
   const jobsQuery = createQuery({
@@ -43,9 +45,27 @@
     queryFn: projects.list,
   });
 
+  // Only explicit, attributed numeric reports are percentages. The shared
+  // progress store also estimates ticks for other consumers; do not show those here.
+  const reportedProgress = new SvelteMap<number, number>();
   $effect(() => {
     const off = connectEvents((ev) => {
       handleJobEvent(ev);
+      if (ev.type === "job.progress" && typeof ev.data.job_id === "number") {
+        const value = ev.data.progress ?? ev.data.percent ?? ev.data.value;
+        if (typeof value === "number" && Number.isFinite(value)) {
+          reportedProgress.set(
+            ev.data.job_id,
+            Math.max(0, Math.min(100, value <= 1 ? value * 100 : value)),
+          );
+        }
+      }
+      if (
+        ["job.completed", "job.failed", "job.deleted"].includes(ev.type) &&
+        typeof ev.data.job_id === "number"
+      ) {
+        reportedProgress.delete(ev.data.job_id);
+      }
       if (ev.type.startsWith("job.") || ev.type === "events.resync") {
         void client.invalidateQueries({ queryKey: ["jobs"] });
         void client.invalidateQueries({ queryKey: ["playground-jobs"] });
@@ -83,16 +103,11 @@
       )
         return false;
       if (!q) return true;
-      return `${wfName(j)} ${jobSourceLabel(j)} ${j.error ?? ""} ${j.id}`
+      return `${taskName(j)} ${wfName(j)} ${projectOf(j)} ${jobSourceLabel(j)} ${connectionOf(j)} ${j.error ?? ""} ${j.id}`
         .toLowerCase()
         .includes(q);
     });
   });
-  const activeCount = $derived(
-    genJobs.filter((j) => j.status === "pending" || j.status === "running")
-      .length,
-  );
-
   function wfName(job: Job): string {
     return (
       ($workflowsQuery.data ?? []).find((w) => w.id === job.workflow_id)
@@ -105,7 +120,17 @@
     const title = ($projectsQuery.data ?? []).find(
       (p) => p.id === job.project_id,
     )?.title;
-    return title ? `《${title}》` : "";
+    return title ? `项目 · ${title}` : "";
+  }
+
+  function sourceOf(job: Job): string {
+    if (isWorkflowTestJob(job)) return "工作流试跑";
+    if (
+      job.payload?.source === "studio-image" ||
+      job.payload?.source === "studio-video"
+    )
+      return "创作台";
+    return projectOf(job) || jobSourceLabel(job);
   }
 
   function timeOf(job: Job): string {
@@ -113,7 +138,7 @@
     if (!Number.isFinite(ts)) return "—";
     const d = new Date(ts);
     const p = (n: number) => String(n).padStart(2, "0");
-    return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+    return `${p(d.getHours())}:${p(d.getMinutes())}`;
   }
 
   function toneOf(job: Job, base: string): string {
@@ -124,9 +149,19 @@
   }
 
   function labelOf(job: Job, base: { tone: string; label: string }): string {
-    return base.tone === "ok" && isFileMissing(job)
-      ? t("jobst.missing")
-      : base.label;
+    if (base.tone === "ok" && isFileMissing(job)) return t("jobst.missing");
+    if (base.tone === "ok") return "完成";
+    if (job.status === "pending") return "排队";
+    if (job.status === "running" && job.phase === "comfy_running")
+      return "生成中";
+    if (
+      base.tone === "fail" &&
+      job.error &&
+      job.error !== "cancelled" &&
+      job.error.length <= 16
+    )
+      return `失败 · ${job.error}`;
+    return base.label;
   }
 
   function requestDelete(job: Job) {
@@ -172,6 +207,7 @@
 
   let sourceFilter = $state("all");
   let activeId = $state<number | null>(null);
+  let detailOpen = $state(false);
   function matchesSource(job: Job, value: string) {
     if (value === "all") return true;
     if (value === "test") return isWorkflowTestJob(job);
@@ -180,6 +216,26 @@
       ? isStandaloneJob(job)
       : !isStandaloneJob(job);
   }
+  function taskName(job: Job): string {
+    return typeof job.payload?.title === "string" && job.payload.title.trim()
+      ? job.payload.title
+      : `${job.kind === "image" ? "图片任务" : "视频任务"} #${job.id}`;
+  }
+  function connectionOf(job: Job): string {
+    const snapshot = job.payload?.endpoint;
+    if (
+      snapshot &&
+      typeof snapshot === "object" &&
+      "name" in snapshot &&
+      typeof snapshot.name === "string"
+    )
+      return snapshot.name;
+    return job.status === "pending" ? "等待分配" : "未记录";
+  }
+  function openDetail(job: Job) {
+    activeId = job.id;
+    detailOpen = true;
+  }
   const activeJob = $derived(
     genJobs.find((j) => j.id === activeId && !pendingIds.has(j.id)) ?? null,
   );
@@ -193,7 +249,11 @@
           onclick={() => (filter = value as Filter)}>{label}</button
         >{/each}
     </div>{/snippet}
-  {#snippet actions()}<label class="mg-search task-search"
+  {#snippet actions()}{#if sourceFilter !== "all"}<Button
+        size="sm"
+        variant="ghost"
+        onclick={() => (sourceFilter = "all")}>全部来源</Button
+      >{/if}<label class="mg-search task-search"
       ><Icon name="search-manage" size={14} /><input
         type="search"
         bind:value={search}
@@ -201,151 +261,183 @@
         aria-label="搜索任务…"
       /></label
     >{/snippet}
-  <div class="mg-layout">
-    <aside class="mg-side" aria-label="任务来源">
-      <div class="mg-label">来源</div>
-      {#each [["all", "全部任务"], ["standalone", "创作台"], ["project", "项目"]] as [value, label] (value)}<button
-          class="mg-filter"
-          class:on={sourceFilter === value}
-          onclick={() => (sourceFilter = value)}
-          >{label}<small
-            >{genJobs.filter((j) => matchesSource(j, value)).length}</small
-          ></button
-        >{/each}
-      <div class="mg-label">队列</div>
-      <span class="mg-dim">进行中 {activeCount} 项</span>
-    </aside>
-    <div class="mg-main">
-      <div class="mg-table">
-        <table>
-          <colgroup
-            ><col style="width:42%" /><col style="width:20%" /><col
-              style="width:20%"
-            /><col style="width:18%" /></colgroup
-          ><thead
-            ><tr
-              ><th>任务 / 工作流</th><th>来源</th><th>进度</th><th>时间</th></tr
-            ></thead
-          ><tbody>
-            {#each shown as job (job.id)}{@const st = jobStatusInfo(job)}
-              <tr class:on={activeId === job.id}
-                ><td
-                  ><button class="mg-click" onclick={() => (activeId = job.id)}
-                    ><Icon
-                      name={job.kind === "image" ? "image" : "film-manage"}
-                      size={14}
-                    /><span class="mg-name"
-                      ><b>{wfName(job)}</b><small
-                        >#{job.id}{isWorkflowTestJob(job)
-                          ? " · 工作流试跑"
-                          : ""}</small
-                      ></span
-                    ></button
-                  ></td
-                ><td title={projectOf(job) || jobSourceLabel(job)}
-                  >{projectOf(job) || jobSourceLabel(job)}</td
-                ><td
-                  ><span class="mg-tag {toneOf(job, st.tone)}" title={st.detail}
-                    >{labelOf(job, st)}</span
-                  >{#if job.status === "running" && progressFor(job.id)?.progress != null}<span
-                      class="mg-dim">{progressFor(job.id)?.progress}%</span
-                    >{/if}</td
-                ><td class="mg-mono">{timeOf(job)}</td></tr
+  <div class="mg-table task-table">
+    <table aria-label="生成任务">
+      <thead
+        ><tr
+          ><th class="task-thumbnail-column" aria-label="缩略图"></th><th
+            >任务</th
+          ><th>来源</th><th>工作流</th><th>连接</th><th
+            class="task-progress-column">进度</th
+          ><th>时间</th><th aria-label="操作"></th></tr
+        ></thead
+      >
+      <tbody>
+        {#each shown as job (job.id)}{@const st = jobStatusInfo(job)}
+          <tr>
+            <td
+              ><button
+                class="task-thumbnail"
+                aria-label={`查看任务 #${job.id}`}
+                onclick={() => openDetail(job)}
               >
-            {/each}
-          </tbody>
-        </table>
-        {#if $jobsQuery.isLoading}<p class="mg-empty">
-            正在读取任务…
-          </p>{:else if $jobsQuery.isError}<p class="mg-empty" role="alert">
-            任务加载失败<Button onclick={() => $jobsQuery.refetch()}
-              >重试</Button
-            >
-          </p>{:else if !shown.length}<div class="mg-empty">
-            <p>
-              {search || filter !== "all"
-                ? t("tasks.emptyFiltered")
-                : t("tasks.empty")}
-            </p>
-            <a class="a-btn secondary sm" href={resolve('/image')}>前往创作台</a>
-          </div>{/if}
-      </div>
-    </div>
-    <aside class="mg-detail" aria-label="任务详情">
-      {#if activeJob}{@const job = activeJob}{@const st = jobStatusInfo(job)}
-        <h2>{wfName(job)}</h2>
-        <div class="mg-mono">#{job.id} · {timeOf(job)}</div>
-        <div class="mg-row">
-          <span class="mg-tag {toneOf(job, st.tone)}">{labelOf(job, st)}</span
-          ><span class="mg-dim">{jobSourceLabel(job)}</span>
-        </div>
-        <div class="mg-field">
-          <h3>运行状态</h3>
-          <p class="mg-dim">{job.error ?? st.detail}</p>
-          {#if job.status === "running"}<p class="mg-dim">
-              {progressFor(job.id)?.progress != null
-                ? progressFor(job.id)?.progress + "%"
-                : "等待服务报告进度"}
-            </p>{/if}
-        </div>
-        {#if job.output_paths?.length}<div class="mg-field">
-            <h3>产出 · {job.output_paths.length}</h3>
-            <!-- Output paths may repeat. Keep positional video DOM reuse so playback state stays with its original slot. -->
-            {#each job.output_paths as path, i (i)}<div class="task-output">
-                {#if job.kind === "image"}<img
-                    src={assetUrl(path)}
-                    alt={wfName(job)}
+                {#if job.kind === "image" && job.output_paths?.length && !isFileMissing(job)}
+                  <img
+                    src={assetUrl(job.output_paths[0])}
+                    alt=""
                     loading="lazy"
-                    onerror={() => markOutputMissing(path)}
-                  />{:else}<video
-                    src={assetUrl(path)}
-                    controls
-                    preload="metadata"><track kind="captions" /></video
-                  >{/if}<a
-                  class="a-btn secondary sm"
-                  href={assetUrl(path)}
-                  download rel="external">下载</a
-                >
-              </div>{/each}
-          </div>{/if}
-        <div class="mg-row">
-          {#if (st.tone === "fail" && job.error !== "cancelled") || (st.tone === "ok" && isFileMissing(job))}<Button
-              size="sm"
-              disabled={busyId === job.id}
-              onclick={() => retry(job)}>重试</Button
-            >{/if}{#if job.status === "pending" || job.status === "running"}<Button
-              size="sm"
-              disabled={busyId === job.id}
-              onclick={() => cancel(job)}>取消任务</Button
-            >{/if}{#if isStandaloneJob(job) && job.status !== "pending" && job.status !== "running"}<Button
-              size="sm"
-              variant="danger"
-              onclick={() => requestDelete(job)}>删除</Button
-            >{/if}
-        </div>
-      {:else}<div class="mg-empty">选择任务查看状态与产出</div>{/if}
-    </aside>
+                    onerror={() => markOutputMissing(job.output_paths[0])}
+                  />
+                {:else}<Icon
+                    name={job.kind === "image" ? "image" : "film-manage"}
+                    size={14}
+                  />{/if}
+              </button></td
+            >
+            <td
+              ><button
+                class="mg-click task-name"
+                title={taskName(job)}
+                onclick={() => openDetail(job)}>{taskName(job)}</button
+              ></td
+            >
+            <td class="mg-muted" title={sourceOf(job)}>{sourceOf(job)}</td>
+            <td title={wfName(job)}>{wfName(job)}</td>
+            <td class="mg-muted" title={connectionOf(job)}
+              >{connectionOf(job)}</td
+            >
+            <td
+              ><span
+                class="mg-tag {toneOf(job, st.tone)}"
+                title={job.error ?? st.detail}>{labelOf(job, st)}</span
+              >
+              {#if job.status === "running"}
+                {#if reportedProgress.has(job.id)}<div
+                    class="task-progress"
+                    role="progressbar"
+                    aria-label={`任务 #${job.id} 进度`}
+                    aria-valuenow={reportedProgress.get(job.id)}
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                    title={`${reportedProgress.get(job.id)}%`}
+                  >
+                    <i style:width={`${reportedProgress.get(job.id)}%`}></i>
+                  </div>
+                {:else}<span
+                    class="task-progress-unknown"
+                    title="等待服务报告进度">—</span
+                  >{/if}
+              {/if}
+            </td>
+            <td class="mg-mono" title={job.created_at}>{timeOf(job)}</td>
+            <td
+              ><div class="mg-row">
+                {#if job.status === "pending" || job.status === "running"}<Button
+                    size="sm"
+                    variant="ghost"
+                    disabled={busyId === job.id}
+                    onclick={() => cancel(job)}>取消</Button
+                  >
+                {:else if (st.tone === "fail" && job.error !== "cancelled") || (st.tone === "ok" && isFileMissing(job))}<Button
+                    size="sm"
+                    disabled={busyId === job.id}
+                    onclick={() => retry(job)}>重试</Button
+                  >
+                {:else}<Button
+                    size="sm"
+                    variant="ghost"
+                    onclick={() => openDetail(job)}>查看</Button
+                  >{/if}
+              </div></td
+            >
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+    {#if $jobsQuery.isLoading}<p class="mg-empty">正在读取任务…</p>
+    {:else if $jobsQuery.isError}<div class="mg-empty" role="alert">
+        任务加载失败<Button onclick={() => $jobsQuery.refetch()}>重试</Button>
+      </div>
+    {:else if !shown.length}<div class="mg-empty">
+        <p>
+          {search || filter !== "all" || sourceFilter !== "all"
+            ? t("tasks.emptyFiltered")
+            : t("tasks.empty")}
+        </p>
+        <a class="a-btn secondary sm" href={resolve("/image")}>前往创作台</a>
+      </div>{/if}
   </div>
 </ManagementPage>
-
-<style>
-  .task-tabs {
-    width: 340px;
-    margin-left: 12px;
-  }
-  .task-search {
-    width: 240px;
-  }
-  .task-output img,
-  .task-output video {
-    width: 100%;
-    max-height: 300px;
-    object-fit: contain;
-    background: var(--media-bg);
-  }
-  .task-output {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-</style>
+<Modal bind:open={detailOpen} title="任务详情" size="lg">
+  <div class="management-page task-dialog">
+    {#if activeJob}{@const job = activeJob}{@const st = jobStatusInfo(job)}
+      <h2>{wfName(job)}</h2>
+      <div class="mg-mono">#{job.id} · {job.created_at}</div>
+      <p class="mg-muted">{taskName(job)} · {connectionOf(job)}</p>
+      <div class="mg-row">
+        <span class="mg-tag {toneOf(job, st.tone)}">{labelOf(job, st)}</span
+        ><span class="mg-dim">{jobSourceLabel(job)}</span>
+      </div>
+      <div class="mg-field">
+        <h3>运行状态</h3>
+        <p class="mg-dim">{job.error ?? st.detail}</p>
+        {#if job.status === "running"}<p class="mg-dim">
+            {reportedProgress.has(job.id)
+              ? reportedProgress.get(job.id) + "%"
+              : "等待服务报告进度"}
+          </p>{/if}
+      </div>
+      {#if job.output_paths?.length}<div class="mg-field">
+          <h3>产出 · {job.output_paths.length}</h3>
+          <!-- Output paths may repeat. Keep positional video DOM reuse so playback state stays with its original slot. -->
+          {#each job.output_paths as path, i (i)}<div class="task-output">
+              {#if job.kind === "image"}<img
+                  src={assetUrl(path)}
+                  alt={wfName(job)}
+                  loading="lazy"
+                  onerror={() => markOutputMissing(path)}
+                />{:else}<video src={assetUrl(path)} controls preload="metadata"
+                  ><track kind="captions" /></video
+                >{/if}<a
+                class="a-btn secondary sm"
+                href={assetUrl(path)}
+                download
+                rel="external">下载</a
+              >
+            </div>{/each}
+        </div>{/if}
+      <div class="mg-row">
+        {#if (st.tone === "fail" && job.error !== "cancelled") || (st.tone === "ok" && isFileMissing(job))}<Button
+            size="sm"
+            disabled={busyId === job.id}
+            onclick={() => retry(job)}>重试</Button
+          >{/if}{#if job.status === "pending" || job.status === "running"}<Button
+            size="sm"
+            disabled={busyId === job.id}
+            onclick={() => cancel(job)}>取消任务</Button
+          >{/if}{#if isStandaloneJob(job) && job.status !== "pending" && job.status !== "running"}<Button
+            size="sm"
+            variant="danger"
+            onclick={() => {
+              requestDelete(job);
+              detailOpen = false;
+            }}>删除</Button
+          >{/if}
+      </div>
+    {:else}<div class="mg-empty">选择任务查看状态与产出</div>{/if}
+    {#if activeJob}<div class="mg-field">
+        <h3>来源筛选</h3>
+        <div class="mg-options" aria-label="任务来源">
+          {#each [["all", "全部任务"], ["standalone", "创作台"], ["project", "项目"], ["test", "工作流试跑"]] as [value, label] (value)}<button
+              class="mg-option"
+              class:on={sourceFilter === value}
+              aria-pressed={sourceFilter === value}
+              onclick={() => {
+                sourceFilter = value;
+                detailOpen = false;
+              }}>{label}</button
+            >{/each}
+        </div>
+      </div>{/if}
+  </div>
+</Modal>
diff --git a/calliope-web/static/themes.css b/calliope-web/static/themes.css
index c2df8bb..bd08a54 100644
--- a/calliope-web/static/themes.css
+++ b/calliope-web/static/themes.css
@@ -90,6 +90,33 @@
   --manage-add-min-height: 130px;
   --manage-card-min: 280px;
   --manage-card-padding: 14px;
+  --task-table-layout: auto;
+  --task-thumbnail-column: 64px;
+  --task-progress-column: 180px;
+  --task-thumbnail-width: 48px;
+  --task-thumbnail-height: 32px;
+  --task-thumbnail-radius: 5px;
+  --task-progress-fill: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--sc-manage) 70%, var(--hi)),
+    var(--sc-manage)
+  );
+  --task-progress-shadow: 0 0 12px var(--sc-manage);
+  --task-progress-duration: 250ms;
+  --task-running-color: color-mix(in srgb, var(--sc-video) 80%, var(--hi));
+  --task-running-border: color-mix(in srgb, var(--sc-video) 40%, transparent);
+  --task-running-background: color-mix(
+    in srgb,
+    var(--sc-video) 10%,
+    transparent
+  );
+  --task-progress-height: 4px;
+  --task-progress-radius: 4px;
+  --task-progress-gap: 5px;
+  --task-tabs-width: 340px;
+  --task-tabs-offset: 12px;
+  --task-search-width: 240px;
+  --task-preview-height: 300px;
   --desk-head-height: var(--head);
   --desk-head-inset: 16px;
   --desk-head-bg: var(--glass);
diff --git a/docs/changelogs/2026-10-22-hel751-task-table.md b/docs/changelogs/2026-10-22-hel751-task-table.md
new file mode 100644
index 0000000..b4e6986
--- /dev/null
+++ b/docs/changelogs/2026-10-22-hel751-task-table.md
@@ -0,0 +1,44 @@
+# HEL-751 · 恢复确认原件的整宽任务表格
+
+本卡施工稿待总工独立对照审核，不代表整个 B2 样本验收通过。未合并、未部署、未迁移、未调用真实或付费生成服务。
+
+## 基底与实现
+
+独立核对远端及认证 API：施工基底为 `fix/hel-750-code-checks@54880e900bc2fc83cfce7d979379c5bfbbf1825e`，新分支 `feat/hel-751-task-table`，新 PR 目标仍为该检查分支。原 PR #4/#5 保持 open、未合并；未修改其正文。确认 HTML SHA256 为 `0473d80d22b90194375f3566c1b8ca30dbd7433581b18f60956eabca252242a4`。
+
+- `calliope-web/src/routes/tasks/+page.svelte`：移除常驻来源栏和详情栏，恢复原件八列（缩略图、任务、来源、工作流、连接、进度、时间、操作）；使用原件自动列宽。页头保留五个筛选及搜索，搜索同时匹配任务标题、工作流、项目、来源、连接、错误及编号。
+- 连接只读取任务的历史 endpoint 快照；未记录显示“未记录”或“等待分配”，不使用当前连接冒充历史事实。任务无标题时使用媒介和真实编号；时间列使用原件 HH:mm，详情保留完整创建时间。创作台和工作流试跑来源明确区分。
+- 取消、失败/输出缺失重试直接在行内调用原 API。缩略图、任务名及“查看”打开已有 Modal，容纳真实状态、完整产物、逐项下载、手动视频播放和原撤销删除队列；来源筛选也复用该弹层，筛选后可从页头“全部来源”清除。
+- 保留现有 jobStatusInfo / SSE 事件和错误语义。任务页的百分比只消费带明确 job_id 的有限数值上报；仅阶段/文本事件显示未知，不使用共享进度模块估算的百分比。未修改共享进度 store。
+- `static/themes.css` 是新增任务几何/颜色/进度渐变的统一来源。旧页面局部样式移入既有 `components/manage/management.css`，继续复用表格、按钮、标签、Modal，没有另一套表格组件。共享表格仅增加布局和 box-sizing 的可选变量，其他页面默认 fixed/content-box 保持；任务页使用原件 auto/border-box。新增选择器限定任务类，未改其他页面结构。
+- 两个 `scripts/verify-hel751.*` 是隔离证据工具，不是产品路由或数据。无新增依赖或 lockfile 变化；32 条既有 ESLint 局部例外及字幕边界未扩展。
+
+## 自测与共享影响
+
+干净 `npm ci`、`npm run lint`、`npm run check`、`npm test`、`npm run build` 均 exit 0；check 为 0 errors / 0 warnings。构建仍有既有 @xyflow 未使用导入、超过 500kB chunk 提示。Prettier 的全仓脚本仍不覆盖 Svelte 模板，本次任务模板额外显式使用原有 prettier-plugin-svelte 格式化，无扩大豁免。
+
+后端相关回归 19 项通过：studio_generation、playground、workflow_test、stop_kills_jobs；保留既有 Pydantic warning。前端四组守护通过。
+
+浏览器在明确标记用途的临时 SQLite 夹具上运行，所有 API 在精确 origin 下拦截，外部 origin 中止，未知写操作直接失败。原件只读取不修改。生成 2 秒含 440Hz 音轨的视频验证文件，媒体假接口支持 Range；无真实服务连接。唯一对应原件的合成图片也仅存在于 API 夹具，产品不包含示例任务、数量、时间或媒体。
+
+四主题 × 三尺寸独立截图，共 12 组完整样本/实际/并排图及数字表。页头、表格区域、表头、行、缩略图、分段筛选、搜索框、进度条的宽高逐项与原件比较；全部通过。浏览器 254 项断言通过、0 pageerror：全部/进行/失败/图片/视频、任务标题搜索、筛选空态/真实空态/API 错误与恢复、取消/重试、原生下载、产物预览、原生播放按钮、暂停/跳播/音量、焦点圈定与返回、关闭卸载播放器、删除撤销和超时提交、来源/试跑分离、无数值进度不造百分比。
+
+共享范围实际回归：工作流库仍是三栏（左栏 220px），连接/素材/设置路由可用，任务样式不泄漏；创作台图片和视频两路的提示词可编辑，刷新保留各自草稿。未重跑这些页面全部历史业务，不以路由冒烟代替整个 B2 验收。
+
+复现：先通过 Multica 下载原 HTML 到仓库父目录 `attachments/`，构建前端；已有运行环境安装 Playwright、Pillow、imageio_ffmpeg。设置 `PLAYWRIGHT_MODULE` 指向已有 Playwright 模块，必要时设置浏览器库路径，然后执行 `python3 scripts/verify-hel751.py`。工具使用动态本机端口，finally 关闭浏览器/HTTP 服务，退出删除临时 SQLite/媒体；证据在仓库父目录 `hel751-evidence/`，通过任务卡附件交付。
+
+## 仍须独立判断的可见差异
+
+- 继承 B1 的 AIGC 品牌、导航顺序/项目范围/展开入口和队列展示未在本卡改动；它们与原件的差异仍由总工逐项审核。
+- 产品不显示原件“设计演示”徽标，搜索框因此右移 90px（grade 为 90.8125px）；宽高一致。
+- 原件第二项演示来源为“智能体 · 分镜助手”；当前隔离夹具是具有真实项目来源契约的任务，显示“项目 · 雾港来信”。不伪造当前 API 没有的智能体来源记录。原件自动列宽随文案分配，进度列 x 差约 −4.297 至 −4.938px，列宽/行高一致，详见数字表。
+- 没有真实输出的任务显示同尺寸媒介图标；视频任务尚无后端缩略图字段时也显示媒介图标，不把演示风景当成真实产物。完成的图片使用实际 output 路径；视频完整产物在弹层手动预览。真实空态、未知连接/进度如实显示。
+- “克制”动效档继续按既有实现禁用，归 HEL-733；未擅自新增动效。既有任务视频的字幕欠缺未在本卡扩修；声音保留且需手动播放。未测真实 GPU/云 API、硬件音频输出和全屏。
+
+以上是明确交付边界，不表示这些差异已经被用户接受，也不宣称整页像素完全一致。若后续要求智能体专属来源或视频缩略图，应先由总管裁定其数据契约及范围，不能把演示字符串或媒体写入产品。
+
+## 回滚与清理
+
+仅本卡前端和证据脚本，无数据库/配置变更，无已部署版本需要回滚。需要撤销时对本卡精确 head 执行 `git revert <HEL-751 head>` 后正常推送，保留检查基底；禁止 reset/强推。未执行回滚。
+
+临时 SQLite、生成媒体、浏览器及动态端口 HTTP 服务在证据工具退出时清理；无临时产品路由、无调试日志写入产品。最终提交及远端 head/base、工作树状态见本卡唯一交付评论。
diff --git a/scripts/verify-hel751.mjs b/scripts/verify-hel751.mjs
new file mode 100644
index 0000000..2818a14
--- /dev/null
+++ b/scripts/verify-hel751.mjs
@@ -0,0 +1,565 @@
+/** Run via verify-hel751.py; explicit API fake, local-only origins, no user data. */
+import fs from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+const { chromium } = await import(
+  process.env.PLAYWRIGHT_MODULE || "playwright"
+);
+const out = process.env.HEL751_OUT,
+  data = process.env.HEL751_DATA;
+const fixture = JSON.parse(
+  await fs.readFile(path.join(data, "fixtures.json"), "utf8"),
+);
+let jobs = structuredClone(fixture.jobs),
+  apiError = false,
+  imageFixture;
+const result = {
+  checks: [],
+  measurements: [],
+  errors: [],
+  mutations: [],
+  externalBlocked: [],
+  apiReads: [],
+};
+const check = (v, n) => {
+  result.checks.push({ name: n, pass: !!v });
+  if (!v) throw Error(n);
+};
+const server = http.createServer(async (req, res) => {
+  try {
+    const p = new URL(req.url, "http://local").pathname;
+    let f = path.join("calliope-web/build", decodeURIComponent(p));
+    if (!path.extname(f)) f = path.join("calliope-web/build", "index.html");
+    const bytes = await fs.readFile(f);
+    res.setHeader(
+      "Content-Type",
+      f.endsWith(".js")
+        ? "text/javascript"
+        : f.endsWith(".css")
+          ? "text/css"
+          : f.endsWith(".html")
+            ? "text/html"
+            : "application/octet-stream",
+    );
+    res.end(bytes);
+  } catch {
+    res.writeHead(404);
+    res.end();
+  }
+});
+await new Promise((r) => server.listen(0, "127.0.0.1", r));
+const base = `http://127.0.0.1:${server.address().port}`;
+const browser = await chromium.launch({
+  headless: true,
+  args: ["--no-sandbox"],
+});
+try {
+  const context = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    timezoneId: "Asia/Shanghai",
+    recordVideo: {
+      dir: path.join(out, "recordings"),
+      size: { width: 1440, height: 900 },
+    },
+  });
+  await context.addInitScript(() => {
+    localStorage.setItem("aigc-lang", "zh");
+    localStorage.setItem("aigc-reduce-motion", "1");
+    window.__sse = [];
+    window.EventSource = class {
+      constructor() {
+        window.__sse.push(this);
+        setTimeout(() => this.onopen?.(), 0);
+      }
+      addEventListener(t, f) {
+        (this.handlers ??= {})[t] = f;
+      }
+      close() {}
+    };
+  });
+  await context.route("**/*", async (route) => {
+    const req = route.request(),
+      u = new URL(req.url());
+    if (["data:", "blob:", "file:"].includes(u.protocol))
+      return route.continue();
+    if (u.origin !== base) {
+      result.externalBlocked.push(u.origin);
+      return route.abort();
+    }
+    if (!u.pathname.startsWith("/api/")) return route.continue();
+    const json = (body) => route.fulfill({ json: body });
+    if (u.pathname === "/api/file") {
+      if (u.searchParams.get("path")?.endsWith(".mp4")) {
+        const bytes = await fs.readFile(path.join(data, "video.mp4"));
+        const range = req.headers()["range"]?.match(/bytes=(\d+)-(\d*)/);
+        if (range) {
+          const start = +range[1],
+            end = range[2]
+              ? Math.min(+range[2], bytes.length - 1)
+              : bytes.length - 1;
+          return route.fulfill({
+            status: 206,
+            body: bytes.subarray(start, end + 1),
+            contentType: "video/mp4",
+            headers: {
+              "Accept-Ranges": "bytes",
+              "Content-Range": `bytes ${start}-${end}/${bytes.length}`,
+              "Content-Length": String(end - start + 1),
+            },
+          });
+        }
+        return route.fulfill({
+          body: bytes,
+          contentType: "video/mp4",
+          headers: {
+            "Accept-Ranges": "bytes",
+            "Content-Length": String(bytes.length),
+          },
+        });
+      }
+      return route.fulfill({
+        body:
+          imageFixture ||
+          Buffer.from(
+            "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jR1kAAAAASUVORK5CYII=",
+            "base64",
+          ),
+        contentType: "image/png",
+      });
+    }
+    if (req.method() !== "GET") {
+      result.mutations.push({ path: u.pathname, method: req.method() });
+      const m = u.pathname.match(/^\/api\/jobs\/(\d+)\/(cancel|retry)$/);
+      if (m) {
+        const j = jobs.find((j) => j.id === +m[1]);
+        j.status = m[2] === "cancel" ? "failed" : "pending";
+        j.error = m[2] === "cancel" ? "cancelled" : null;
+        return json(j);
+      }
+      const d = u.pathname.match(/^\/api\/playground\/jobs\/(\d+)$/);
+      if (d && req.method() === "DELETE") {
+        jobs = jobs.filter((j) => j.id !== +d[1]);
+        return json({ ok: true });
+      }
+      if (u.pathname.includes("test")) return json({ ok: true });
+      throw Error(`Unexpected mutation ${req.method()} ${u.pathname}`);
+    }
+    result.apiReads.push(u.pathname);
+    if (u.pathname === "/api/jobs") {
+      if (apiError)
+        return route.fulfill({ status: 500, body: "HEL751 isolated error" });
+      return json(jobs);
+    }
+    if (u.pathname === "/api/workflows") return json(fixture.workflows);
+    if (u.pathname === "/api/projects")
+      return json([{ id: 1, title: "雾港来信" }]);
+    if (u.pathname === "/api/settings")
+      return json({
+        comfyui_endpoints: [],
+        llm_profiles: [],
+        queue_concurrency: 1,
+        dry_run: false,
+      });
+    if (u.pathname === "/api/comfyui/endpoints")
+      return json({ endpoints: [], active_id: null });
+    if (u.pathname.includes("/jobs")) return json([]);
+    if (u.pathname.includes("/sessions")) return json([]);
+    if (
+      u.pathname === "/api/library/media" ||
+      u.pathname === "/api/agent/agents" ||
+      u.pathname === "/api/agent/memories"
+    )
+      return json([]);
+    const wf = u.pathname.match(/^\/api\/workflows\/(\d+)$/);
+    if (wf)
+      return json({
+        ...fixture.workflows.find((w) => w.id === +wf[1]),
+        workflow_json: {},
+        output_map: [
+          {
+            nodeId: "2",
+            kind: fixture.workflows.find((w) => w.id === +wf[1]).kind,
+          },
+        ],
+      });
+    return json({});
+  });
+  const page = await context.newPage();
+  page.on("pageerror", (e) => result.errors.push(e.message));
+  const ref = await context.newPage();
+  await ref.goto(
+    pathToFileURL(path.resolve("../attachments/夜片场-多主题交互样本.html"))
+      .href,
+  );
+  await ref.evaluate(() => {
+    go("tasks");
+    document.documentElement.classList.add("capture");
+  });
+  // Reuse the corresponding original synthetic still only inside this API fake.
+  // Canvas avoids capturing a parent page during its opacity entrance animation.
+  imageFixture = Buffer.from(
+    await ref.evaluate(async () => {
+      const img = new Image();
+      img.src = still(64, 96, 64);
+      await img.decode();
+      const canvas = document.createElement("canvas");
+      canvas.width = 48;
+      canvas.height = 32;
+      canvas.getContext("2d").drawImage(img, 0, 0, 48, 32);
+      return canvas.toDataURL("image/png").split(",")[1];
+    }),
+    "base64",
+  );
+  const progress = () =>
+    page.evaluate(() => {
+      for (const es of window.__sse)
+        for (const [id, pct] of [
+          [1, 62],
+          [2, 35],
+        ])
+          es.handlers?.["job.progress"]?.({
+            data: JSON.stringify({
+              type: "job.progress",
+              data: { job_id: id, progress: pct, phase: "comfy_running" },
+            }),
+          });
+    });
+  const measure = (p, selectors) =>
+    p.evaluate(
+      (selectors) =>
+        Object.fromEntries(
+          Object.entries(selectors).map(([k, s]) => {
+            const e = document.querySelector(s);
+            if (!e) return [k, null];
+            const r = e.getBoundingClientRect(),
+              c = getComputedStyle(e);
+            return [
+              k,
+              {
+                x: r.x,
+                y: r.y,
+                width: r.width,
+                height: r.height,
+                font: c.fontSize,
+                radius: c.borderRadius,
+                color: c.color,
+                background: c.backgroundColor,
+              },
+            ];
+          }),
+        ),
+      selectors,
+    );
+  for (const [width, height] of process.env.HEL751_SKIP_VISUAL
+    ? []
+    : [
+        [1440, 900],
+        [1366, 768],
+        [1280, 720],
+      ])
+    for (const theme of ["night", "day", "grade", "bluehour"]) {
+      await page.setViewportSize({ width, height });
+      await ref.setViewportSize({ width, height });
+      await page.goto(base + "/tasks");
+      await page.locator(".task-table tbody tr").first().waitFor();
+      await progress();
+      await page.evaluate((theme) => {
+        localStorage.setItem("aigc-theme", theme);
+        window.dispatchEvent(
+          new StorageEvent("storage", { key: "aigc-theme", newValue: theme }),
+        );
+      }, theme);
+      await ref.evaluate((theme) => setTheme(theme), theme);
+      await page.waitForTimeout(650);
+      const name = `tasks-${theme}-${width}`;
+      await page.screenshot({ path: path.join(out, name + "-actual.png") });
+      await ref.screenshot({ path: path.join(out, name + "-sample.png") });
+      result.measurements.push({
+        theme,
+        width,
+        height,
+        actual: await measure(page, {
+          header: ".management-header",
+          table: ".task-table",
+          head: ".task-table thead",
+          row: ".task-table tbody tr",
+          thumbnail: ".task-thumbnail",
+          segment: ".task-tabs",
+          search: ".task-search",
+          progress: ".task-progress",
+          tag: ".task-table .mg-tag",
+        }),
+        sample: await measure(ref, {
+          header: "#p-tasks .ph",
+          table: "#p-tasks .tbl",
+          head: "#p-tasks thead",
+          row: "#taskTable tr",
+          thumbnail: "#taskTable td>div",
+          segment: "#p-tasks .seg",
+          search: "#p-tasks .input",
+          progress: "#taskTable .bar",
+          tag: "#taskTable .tag",
+        }),
+      });
+      const measured = result.measurements.at(-1);
+      for (const key of [
+        "header",
+        "table",
+        "head",
+        "row",
+        "thumbnail",
+        "segment",
+        "search",
+        "progress",
+      ])
+        for (const axis of ["width", "height"])
+          check(
+            Math.abs(measured.actual[key][axis] - measured.sample[key][axis]) <
+              0.1,
+            `${name}: ${key} ${axis} matches sample`,
+          );
+      check(
+        (await page.locator(".mg-side,.mg-detail").count()) === 0,
+        `${name}: no permanent sidebars`,
+      );
+      check(
+        await page.evaluate(
+          () => document.documentElement.scrollWidth <= innerWidth,
+        ),
+        `${name}: no document overflow`,
+      );
+    }
+  await page.setViewportSize({ width: 1440, height: 900 });
+  if (process.env.HEL751_SKIP_VISUAL) {
+    await page.goto(base + "/tasks");
+    await page.locator("tbody tr").first().waitFor();
+  }
+  await page.locator(".task-tabs button").nth(1).click();
+  check((await page.locator("tbody tr").count()) === 3, "active filter");
+  await page.locator(".task-tabs button").nth(2).click();
+  check((await page.locator("tbody tr").count()) === 1, "failed filter");
+  await page.locator(".task-tabs button").nth(3).click();
+  check((await page.locator("tbody tr").count()) === 3, "image filter");
+  await page.locator(".task-tabs button").nth(4).click();
+  check((await page.locator("tbody tr").count()) === 3, "video filter");
+  await page.locator(".task-tabs button").first().click();
+  await page.getByRole("searchbox").fill("镜头 07");
+  await page.waitForTimeout(100);
+  check((await page.locator("tbody tr").count()) === 1, "search by task title");
+  await page.getByRole("searchbox").fill("HEL751 absent");
+  await page.waitForTimeout(100);
+  check((await page.locator("tbody tr").count()) === 0, "search empty");
+  await page.screenshot({ path: path.join(out, "search-empty.png") });
+  await page.getByRole("searchbox").fill("");
+  await page.getByRole("button", { name: "查看任务 #6", exact: true }).click();
+  await page.getByRole("dialog").waitFor();
+  const video = page.locator("video");
+  await video.evaluate(
+    (v) =>
+      new Promise((r) =>
+        v.readyState >= 1
+          ? r()
+          : v.addEventListener("loadedmetadata", r, { once: true }),
+      ),
+  );
+  check(
+    await video.evaluate(
+      (v) =>
+        v.paused && v.controls && !v.autoplay && !v.muted && v.volume === 1,
+    ),
+    "video manual playback with sound",
+  );
+  await video.hover();
+  const videoBox = await video.boundingBox();
+  await video.click({ position: { x: 26, y: videoBox.height - 28 } });
+  await page.waitForTimeout(250);
+  check(
+    await video.evaluate((v) => !v.paused && v.currentTime > 0),
+    "explicit video play",
+  );
+  await video.evaluate((v) => {
+    v.pause();
+    v.currentTime = 0.7;
+    v.volume = 0.4;
+  });
+  await page.waitForTimeout(300);
+  result.videoState = await video.evaluate((v) => ({
+    paused: v.paused,
+    time: v.currentTime,
+    volume: v.volume,
+    duration: v.duration,
+    seekable: v.seekable.length,
+    error: v.error?.message,
+  }));
+  check(
+    result.videoState.paused &&
+      result.videoState.time > 0.6 &&
+      Math.abs(result.videoState.volume - 0.4) < 0.001,
+    "pause seek volume",
+  );
+  await page.screenshot({ path: path.join(out, "video-preview.png") });
+  await page.keyboard.press("Tab");
+  check(
+    await page
+      .getByRole("dialog")
+      .evaluate((e) => e.contains(document.activeElement)),
+    "modal focus stays inside",
+  );
+  await page.getByRole("dialog").locator(".modal-close").focus();
+  await page.keyboard.press("Escape");
+  await page.getByRole("dialog").waitFor({ state: "hidden" });
+  check((await page.locator("video").count()) === 0, "close unmounts video");
+  check(
+    await page
+      .getByRole("button", { name: "查看任务 #6", exact: true })
+      .evaluate((e) => e === document.activeElement),
+    "modal restores trigger focus",
+  );
+  await page.getByRole("button", { name: "查看任务 #5", exact: true }).click();
+  await page.getByRole("dialog").waitFor();
+  check(
+    (await page.getByRole("dialog").locator("img").count()) === 1,
+    "image preview",
+  );
+  const [download] = await Promise.all([
+    page.waitForEvent("download"),
+    page.getByRole("link", { name: "下载", exact: true }).click(),
+  ]);
+  check(!(await download.failure()), "native image download");
+  await download.saveAs(path.join(out, "downloaded-fixture.png"));
+  await page.getByRole("button", { name: "删除", exact: true }).click();
+  check(
+    (await page.locator("tbody tr").count()) === 5,
+    "delete removes row immediately",
+  );
+  await page.getByRole("button", { name: "撤销", exact: true }).click();
+  check((await page.locator("tbody tr").count()) === 6, "undo restores row");
+  check(
+    !result.mutations.some((m) => m.method === "DELETE"),
+    "undo prevents DELETE",
+  );
+  await page.getByRole("button", { name: "查看任务 #5", exact: true }).click();
+  await page.getByRole("button", { name: "删除", exact: true }).click();
+  await page.waitForTimeout(5300);
+  check(
+    result.mutations.some((m) => m.method === "DELETE"),
+    "delete commits after undo window",
+  );
+  await page
+    .locator("tbody tr")
+    .filter({ hasText: "参考生视频 #21" })
+    .getByRole("button", { name: "重试", exact: true })
+    .click();
+  await page.waitForTimeout(150);
+  check(
+    jobs.find((j) => j.id === 4).status === "pending",
+    "retry uses real API contract",
+  );
+  await page
+    .locator("tbody tr")
+    .filter({ hasText: "Qwen 局部重绘" })
+    .getByRole("button", { name: "取消", exact: true })
+    .click();
+  await page.waitForTimeout(150);
+  check(
+    jobs.find((j) => j.id === 3).error === "cancelled",
+    "cancel uses real API contract",
+  );
+  await page.getByRole("button", { name: "查看任务 #1", exact: true }).click();
+  await page.getByRole("button", { name: "创作台", exact: true }).click();
+  check(
+    (await page.locator("tbody tr").count()) === 2,
+    "source filter retained in details",
+  );
+  await page.getByRole("button", { name: "全部来源", exact: true }).click();
+  const testJob = {
+    ...structuredClone(fixture.jobs[4]),
+    id: 8,
+    origin: "workflow_test",
+    payload: { source: "workflow_test", title: "HEL751 workflow test" },
+    output_paths: ["HEL751-fixture-4.png"],
+  };
+  jobs.push(testJob);
+  await page.goto(base + "/tasks");
+  await page.getByRole("button", { name: "查看任务 #8", exact: true }).click();
+  await page.getByRole("button", { name: "工作流试跑", exact: true }).click();
+  check(
+    (await page.locator("tbody tr").count()) === 1,
+    "workflow test source isolated",
+  );
+  await page.getByRole("button", { name: "全部来源", exact: true }).click();
+  // Pending/running without a numeric report must remain unknown.
+  await page.goto(base + "/tasks");
+  await page.locator("tbody tr").first().waitFor();
+  check(
+    (await page.locator(".task-progress").count()) === 0,
+    "no fabricated percentages after reload",
+  );
+  jobs = [];
+  await page.goto(base + "/tasks");
+  await page.waitForTimeout(400);
+  check((await page.locator("tbody tr").count()) === 0, "true empty data");
+  await page.screenshot({ path: path.join(out, "true-empty.png") });
+  apiError = true;
+  await page.goto(base + "/tasks");
+  await page
+    .getByRole("alert")
+    .filter({ hasText: "任务加载失败" })
+    .waitFor({ timeout: 15000 });
+  check(true, "API failure shown honestly");
+  apiError = false;
+  jobs = structuredClone(fixture.jobs);
+  await page.getByRole("button", { name: "重试", exact: true }).click();
+  await page.locator("tbody tr").first().waitFor();
+  check(true, "load retry restores tasks");
+  for (const route of [
+    "workflows",
+    "connections",
+    "library",
+    "settings",
+    "create?kind=image",
+    "create?kind=video",
+  ]) {
+    await page.goto(base + "/" + route);
+    await page.waitForTimeout(400);
+    await page.screenshot({
+      path: path.join(out, "regression-" + route.replace(/\W/g, "-") + ".png"),
+    });
+    check(
+      (await page.locator(".task-table").count()) === 0,
+      `${route}: task table styles scoped`,
+    );
+    if (route.startsWith("create?")) {
+      const textarea = page.locator(".studio-form textarea").first();
+      await textarea.fill("HEL751 isolated creative draft");
+      check(
+        (await textarea.inputValue()) === "HEL751 isolated creative draft",
+        `${route}: prompt remains editable`,
+      );
+      await page.reload();
+      await page.locator(".studio-form textarea").first().waitFor();
+      check(
+        (await page.locator(".studio-form textarea").first().inputValue()) ===
+          "HEL751 isolated creative draft",
+        `${route}: draft survives reload`,
+      );
+    }
+    if (route === "workflows")
+      check(
+        (await page
+          .locator(".mg-side")
+          .evaluate((e) => e.getBoundingClientRect().width)) === 220,
+        "workflow sidebar retains 220px",
+      );
+  }
+  check(result.errors.length === 0, "no browser page errors");
+  await context.close();
+} finally {
+  await fs.writeFile(
+    path.join(out, "results.json"),
+    JSON.stringify(result, null, 2),
+  );
+  await browser.close();
+  await new Promise((r) => server.close(r));
+}
diff --git a/scripts/verify-hel751.py b/scripts/verify-hel751.py
new file mode 100644
index 0000000..5fab6da
--- /dev/null
+++ b/scripts/verify-hel751.py
@@ -0,0 +1,119 @@
+"""Foreground isolated evidence run. No user data or external generation services."""
+import json
+import os
+from pathlib import Path
+import sqlite3
+import subprocess
+import tempfile
+
+import imageio_ffmpeg
+from PIL import Image, ImageDraw
+
+ROOT = Path(__file__).resolve().parents[1]
+OUT = ROOT.parent / "hel751-evidence"
+OUT.mkdir(exist_ok=True)
+
+# This database exists only for the duration of this foreground verification.
+with tempfile.TemporaryDirectory(prefix="hel751-isolated-", dir=OUT) as data:
+    db = sqlite3.connect(Path(data) / "fixture.sqlite")
+    db.execute("create table fixture_jobs (id integer primary key, purpose text, body text)")
+    names = [
+        "镜头 07 · 首尾帧", "分镜草图 8/12", "Qwen 局部重绘 #62",
+        "参考生视频 #21", "Krea2 文生图 #55", "镜头 06 · 首尾帧",
+    ]
+    workflow_names = [
+        "H3 首尾帧生视频", "Krea2 · 4 宫格故事板", "Qwen 2.1 · 局部重绘",
+        "H3 参考生视频", "Krea2 · 文生图", "H3 首尾帧生视频",
+    ]
+    workflow_rows = []
+    for i in range(6):
+        kind = "video" if i in (0, 3, 5) else "image"
+        job = {
+            "id": i + 1,
+            "project_id": 1 if i in (0, 1, 5) else 0,
+            "scene_id": 1 if i in (0, 1, 5) else None,
+            "clip_id": None,
+            "kind": kind,
+            "workflow_id": i + 1,
+            "status": ["running", "running", "pending", "failed", "done", "done"][i],
+            "payload": {
+                "title": names[i],
+                "source": "workbench" if i in (0, 1, 5) else "studio-" + kind,
+                "endpoint": {"id": "hel751-fake", "name": "5090D"},
+            },
+            "output_paths": (
+                ["HEL751-fixture-4.png" if i == 4 else "HEL751-fixture-video.mp4"]
+                if i > 3 else []
+            ),
+            "error": "OOM" if i == 3 else None,
+            "created_at": f"2026-10-21T13:0{i}:00Z",
+            "started_at": None,
+            "completed_at": None,
+            "retry_count": 0,
+            "phase": "comfy_running" if i < 2 else None,
+        }
+        db.execute(
+            "insert into fixture_jobs values (?,?,?)",
+            (i + 1, "HEL-751 isolated sample correspondence; never production",
+             json.dumps(job, ensure_ascii=False)),
+        )
+        workflow_rows.append({
+            "id": i + 1, "name": workflow_names[i], "kind": kind,
+            "media_io": {"in": [], "out": [kind]}, "tags": [],
+            "favorite": False, "category": None, "model_family": None,
+            "usage": "text2video" if kind == "video" else "text2image",
+            "is_enabled": True, "needs_mapping": False,
+            "input_schema": [{
+                "nodeId": "1", "label": "HEL751 fixture prompt",
+                "role": "prompt", "kind": "textarea", "defaultValue": "", "required": True,
+            }],
+            "output_schema": [{"nodeId": "2", "label": "Output", "kind": kind}],
+            "endpoint_id": "hel751-fake",
+        })
+    db.commit()
+    jobs = [json.loads(row[0]) for row in db.execute("select body from fixture_jobs order by id")]
+    db.close()
+    (Path(data) / "fixtures.json").write_text(
+        json.dumps({"jobs": jobs, "workflows": workflow_rows}, ensure_ascii=False),
+        encoding="utf-8",
+    )
+    subprocess.run(
+        [
+            imageio_ffmpeg.get_ffmpeg_exe(), "-y", "-f", "lavfi", "-i",
+            "color=c=navy:s=320x180:r=24", "-f", "lavfi", "-i",
+            "sine=frequency=440:sample_rate=44100", "-t", "2", "-c:v",
+            "libx264", "-pix_fmt", "yuv420p", "-c:a", "aac", str(Path(data) / "video.mp4"),
+        ],
+        stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL, check=True,
+    )
+    env = os.environ | {"HEL751_OUT": str(OUT), "HEL751_DATA": data}
+    subprocess.run(["node", "scripts/verify-hel751.mjs"], cwd=ROOT, env=env, check=True)
+
+print("Isolated database and media removed; all run-owned servers closed.")
+
+# Compose unchanged captures into review artifacts; never alter the original HTML.
+if not os.environ.get("HEL751_SKIP_VISUAL"):
+    evidence = json.loads((OUT / "results.json").read_text())
+    lines = [
+        "| Theme / viewport | Element | Sample x,y,w,h | Actual x,y,w,h | Delta x,y,w,h |",
+        "|---|---|---|---|---|",
+    ]
+    for measurement in evidence["measurements"]:
+        name = f"tasks-{measurement['theme']}-{measurement['width']}"
+        sample = Image.open(OUT / f"{name}-sample.png").convert("RGB")
+        actual = Image.open(OUT / f"{name}-actual.png").convert("RGB")
+        pair = Image.new("RGB", (sample.width * 2, sample.height + 28), "#151515")
+        ImageDraw.Draw(pair).text((12, 8), "Confirmed sample (left) / Isolated implementation (right)", fill="white")
+        pair.paste(sample, (0, 28))
+        pair.paste(actual, (sample.width, 28))
+        pair.save(OUT / f"{name}-pair.png")
+        for key, expected in measurement["sample"].items():
+            observed = measurement["actual"][key]
+            coordinates = ("x", "y", "width", "height")
+            values = lambda row: ", ".join(f"{row[c]:.3f}" for c in coordinates)
+            delta = {c: observed[c] - expected[c] for c in coordinates}
+            lines.append(
+                f"| {measurement['theme']} {measurement['width']}×{measurement['height']} "
+                f"| {key} | {values(expected)} | {values(observed)} | {values(delta)} |"
+            )
+    (OUT / "dimensions.md").write_text("\n".join(lines) + "\n", encoding="utf-8")