From 2004f527ccb689c84219282e3b706a95490c8b07 Mon Sep 17 00:00:00 2001
From: leefer <hello@shengshentech.com>
Date: Thu, 22 Oct 2026 06:38:32 +0800
Subject: [PATCH] fix(HEL-767): align management header, theme cards and shared
 rail with sample

Co-authored-by: multica-agent <github@multica.ai>
---
 .../components/manage/ManagementPage.svelte   |   4 +
 .../src/lib/components/manage/management.css  |  17 +
 .../src/lib/components/shell/AppShell.svelte  | 287 +++---
 .../lib/components/shell/ThemeChoices.svelte  |  13 +-
 calliope-web/src/lib/components/shell/nav.ts  |  28 +-
 calliope-web/src/lib/components/ui/icons.ts   |  22 +
 calliope-web/static/themes.css                |  30 +
 .../2026-10-22-hel767-sample-alignment.md     |  45 +
 scripts/verify-hel767.mjs                     | 936 ++++++++++++++++++
 scripts/verify-hel767.py                      | 127 +++
 10 files changed, 1361 insertions(+), 148 deletions(-)
 create mode 100644 docs/changelogs/2026-10-22-hel767-sample-alignment.md
 create mode 100644 scripts/verify-hel767.mjs
 create mode 100644 scripts/verify-hel767.py

diff --git a/calliope-web/src/lib/components/manage/ManagementPage.svelte b/calliope-web/src/lib/components/manage/ManagementPage.svelte
index 820015e0..725bbc35 100644
--- a/calliope-web/src/lib/components/manage/ManagementPage.svelte
+++ b/calliope-web/src/lib/components/manage/ManagementPage.svelte
@@ -28,6 +28,10 @@
     >
       <b>{title}</b>{@render tools?.()}<span class="mg-grow"
       ></span>{@render actions?.()}
+      <!-- The approved header reserves this inline width independently of demo copy. -->
+      <span class="mg-header-reserve" aria-hidden="true"
+        ><span></span><span>&emsp;&emsp;&emsp;&emsp;</span></span
+      >
     </header>
   {/snippet}
   <section
diff --git a/calliope-web/src/lib/components/manage/management.css b/calliope-web/src/lib/components/manage/management.css
index ba1f3e0a..a12f1c9c 100644
--- a/calliope-web/src/lib/components/manage/management.css
+++ b/calliope-web/src/lib/components/manage/management.css
@@ -835,3 +835,20 @@ textarea.f-input {
   object-fit: contain;
   background: var(--media-bg);
 }
+
+.mg-header-reserve {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--manage-header-reserve-padding);
+  border: 1px solid transparent;
+  font: var(--manage-header-reserve-font);
+  letter-spacing: inherit;
+}
+.mg-header-reserve > :first-child {
+  width: var(--manage-header-reserve-dot);
+}
+.mg-header-reserve > :last-child {
+  white-space: pre;
+}
diff --git a/calliope-web/src/lib/components/shell/AppShell.svelte b/calliope-web/src/lib/components/shell/AppShell.svelte
index baab7869..9857b385 100644
--- a/calliope-web/src/lib/components/shell/AppShell.svelte
+++ b/calliope-web/src/lib/components/shell/AppShell.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { resolve } from "$app/paths";
   import { onMount } from "svelte";
-  import { spotlight } from "$lib/actions/spotlight";
   import { createQuery } from "@tanstack/svelte-query";
   import { toStore } from "svelte/store";
   import { page } from "$app/state";
@@ -184,48 +183,61 @@
   class="refract-shell"
   class:focus
   class:expanded
-  style:--scene={`var(--sc-${scene})`}
+  style:--scene={scene === "gold" ? "var(--gold)" : `var(--sc-${scene})`}
 >
   <aside class="sidebar" aria-label="全站导航">
-    <a class="brand" href={resolve('/')} aria-label="返回工作室"
-      >AIGC{#if expanded}<small>创作工作台</small>{/if}</a
+    <a class="brand" href={resolve("/")} aria-label="返回工作室"
+      ><b>片</b>{#if expanded}<small>创作工作台</small>{/if}</a
     >
     <nav aria-label="主要导航">
       {#each mainNav as item (item.id)}<a
-          class="nav-item reference-option"
-          use:spotlight
+          class="nav-item"
           href={resolve(item.href)}
-          style:--nav-c={`var(--sc-${item.scene})`}
+          style:--nav-c={item.scene === "gold"
+            ? "var(--gold)"
+            : `var(--sc-${item.scene})`}
           aria-current={item.matches(page.url.pathname) ? "page" : undefined}
-          title={item.label}
-          ><Icon name={item.icon} size={20} /><span>{item.label}</span></a
+          title={item.id === "connections"
+            ? `${item.label} · ${connDetail}`
+            : item.label}
+          ><Icon name={item.icon} size={18} /><span>{item.label}</span></a
         >{/each}
     </nav>
+    <hr />
     <nav class="management" aria-label="管理导航">
       {#each NAV_MANAGE as item (item.id)}<a
-          class="nav-item reference-option"
-          use:spotlight
+          class="nav-item"
           href={resolve(item.href)}
-          style:--nav-c={`var(--sc-${item.scene})`}
+          style:--nav-c={item.scene === "gold"
+            ? "var(--gold)"
+            : `var(--sc-${item.scene})`}
           aria-current={item.matches(page.url.pathname) ? "page" : undefined}
-          title={item.label}
+          title={item.id === "connections"
+            ? `${item.label} · ${connDetail}`
+            : item.label}
           ><Icon name={item.icon} size={18} /><span>{item.label}</span></a
         >{/each}
     </nav>
     <div class="sidebar-bottom">
-      <button
-        class="nav-item reference-option"
-        use:spotlight
-        onclick={toggleNavigation}
-        aria-expanded={expanded}
-        title={expanded ? "收起导航" : "展开导航"}
-        ><Icon name="chevron-right" size={18} /><span
-          >{expanded ? "收起导航" : "展开导航"}</span
-        ></button
+      <a
+        class="queue-dot"
+        href={resolve("/tasks")}
+        title={`${genJobs.filter((j) => j.status === "running" || j.status === "pending").length} 个任务进行中`}
+        aria-label="查看生成任务"
       >
+        <Icon name="nav-queue" />
+        {#if genJobs.some((j) => j.status === "running") && !reduceMotion.manual && !reduceMotion.system}<span
+            class="queue-ring"
+            aria-hidden="true"
+          ></span>{/if}
+        {#if genJobs.some((j) => j.status === "running" || j.status === "pending")}<i
+            >{genJobs.filter(
+              (j) => j.status === "running" || j.status === "pending",
+            ).length}</i
+          >{/if}
+      </a>
       <button
-        class="nav-item reference-option"
-        use:spotlight
+        class="nav-item"
         onclick={() => (themeOpen = true)}
         aria-haspopup="dialog"
         aria-expanded={themeOpen}
@@ -234,27 +246,36 @@
         ></button
       >
       <a
-        class="nav-item reference-option"
-        use:spotlight
-        href={resolve('/settings')}
+        class="nav-item"
+        href={resolve("/settings")}
         aria-current={page.url.pathname === "/settings" ? "page" : undefined}
-        title="设置"><Icon name="settings" size={18} /><span>设置</span></a
+        title="设置"><Icon name="nav-gear" size={18} /><span>设置</span></a
       >
-      <a
-        class="connection"
-        href={resolve('/connections')}
-        title={connDetail}
-        aria-label={connDetail}
-        ><span class="status-chip-dot {connDot}"></span>{#if expanded}<span
-            >{probeState === "ok"
-              ? "本地服务已连接"
-              : probeState === "testing"
-                ? "正在检测服务"
-                : probeState === "fail"
-                  ? "本地服务离线"
-                  : "配置本地服务"}</span
-          >{/if}</a
+      <button
+        class="nav-item"
+        onclick={toggleNavigation}
+        aria-expanded={expanded}
+        title={expanded ? "收起导航" : "展开导航"}
+        ><Icon name="nav-palette" size={18} /><span
+          >{expanded ? "收起" : "导航"}</span
+        ></button
       >
+      {#if expanded}<a
+          class="connection"
+          href={resolve("/connections")}
+          title={connDetail}
+          aria-label={connDetail}
+          ><span class="status-chip-dot {connDot}"></span>{#if expanded}<span
+              >{probeState === "ok"
+                ? "本地服务已连接"
+                : probeState === "testing"
+                  ? "正在检测服务"
+                  : probeState === "fail"
+                    ? "本地服务离线"
+                    : "配置本地服务"}</span
+            >{/if}</a
+        >
+      {/if}
     </div>
   </aside>
   <div
@@ -272,14 +293,14 @@
         {#if currentNav?.id === "connections"}
           <a
             class="a-btn secondary sm"
-            href={resolve('/connections')}
+            href={resolve("/connections")}
             aria-current={page.url.pathname === "/connections"
               ? "page"
               : undefined}>ComfyUI 连接</a
           >
           <a
             class="a-btn secondary sm"
-            href={resolve('/models')}
+            href={resolve("/models")}
             aria-current={page.url.pathname === "/models" ? "page" : undefined}
             >大语言模型</a
           >
@@ -325,11 +346,6 @@
 </Modal>
 
 <style>
-  .management {
-    border-top: 1px solid var(--line-2);
-    margin-top: 8px;
-    padding-top: 8px;
-  }
   .theme-dot {
     width: 18px;
     height: 18px;
@@ -353,7 +369,7 @@
     color: var(--tx-2);
   }
   .nav-item[aria-current="page"] :global(svg) {
-    color: var(--nav-c, var(--scene));
+    color: var(--nav-c, var(--gold));
   }
 
   .refract-shell {
@@ -366,28 +382,45 @@
     min-width: 0;
   }
   .refract-shell.expanded {
-    grid-template-columns: 174px minmax(0, 1fr);
+    grid-template-columns: var(--rail-expanded-width) minmax(0, 1fr);
   }
   .sidebar {
     background: var(--bg-1);
     border-right: 1px solid var(--line);
-    padding: 16px 8px 9px;
+    --icon-stroke: var(--manage-icon-stroke);
+    padding: var(--rail-padding);
+    align-items: center;
+    gap: 2px;
+    z-index: 5;
     display: flex;
     flex-direction: column;
     min-height: 0;
-    overflow: auto;
-    scrollbar-width: thin;
+    overflow: visible;
   }
   .brand {
-    font-size: 19px;
-    font-weight: 800;
-    color: var(--gold);
-    text-align: center;
+    width: var(--rail-brand-size);
+    height: var(--rail-brand-size);
+    border-radius: var(--rail-brand-radius);
+    display: grid;
+    place-items: center;
+    margin-bottom: var(--rail-brand-margin);
+    position: relative;
+    background: var(--brand-grad);
+    box-shadow: var(--brand-glow);
     text-decoration: none;
-    letter-spacing: -1px;
-    display: block;
-    margin: 2px 0 18px;
-    text-shadow: var(--brand-glow);
+    flex: none;
+  }
+  .brand b {
+    font: 800 15px/1 var(--font);
+    color: var(--brand-ink);
+    letter-spacing: -0.5px;
+  }
+  .sidebar hr {
+    width: 28px;
+    border: 0;
+    border-top: 1px solid var(--line-2);
+    margin: var(--rail-divider-margin);
+    flex: none;
   }
   .brand small {
     display: block;
@@ -403,26 +436,24 @@
     gap: 2px;
   }
   .nav-item {
-    min-height: 44px;
+    box-sizing: border-box;
+    position: relative;
+    width: var(--rail-nav-width);
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    gap: 5px;
-    font-size: 10px;
-    line-height: 1;
-    padding: 7px 3px;
+    gap: 3px;
+    font: inherit;
+    padding: var(--rail-nav-padding);
     color: var(--tx-3);
     text-decoration: none;
     border: 0;
     background: none;
-    border-radius: var(--r-md);
+    border-radius: var(--rail-nav-radius);
     cursor: pointer;
-    font-family: inherit;
     transition:
-      background-color 180ms ease,
-      color 180ms ease,
-      transform 160ms var(--ease-out);
+      color var(--t-base),
+      background var(--t-base);
     flex-shrink: 0;
   }
   .nav-item[aria-current="page"] {
@@ -436,20 +467,30 @@
   .nav-item[aria-current="page"]::before {
     content: "";
     position: absolute;
-    left: -2px;
+    left: -6px;
     top: 12px;
     bottom: 12px;
     width: 3px;
     border-radius: 3px;
-    background: var(--nav-c, var(--scene));
+    background: var(--nav-c, var(--gold));
+    box-shadow: var(
+      --rail-active-shadow,
+      0 0 var(--rail-active-shadow-blur) var(--nav-c, var(--gold))
+    );
   }
   .nav-item:active {
     transform: scale(var(--press-scale));
   }
   .nav-item > span {
+    font-size: var(--rail-nav-size);
+    line-height: 1;
     white-space: nowrap;
   }
+  .expanded .sidebar {
+    overflow-y: auto;
+  }
   .expanded .nav-item {
+    width: var(--rail-expanded-nav-width);
     flex-direction: row;
     justify-content: flex-start;
     gap: 12px;
@@ -457,26 +498,56 @@
     padding: 10px 14px;
     min-height: 43px;
   }
+  .expanded .nav-item > span {
+    font-size: var(--rail-expanded-label-size);
+  }
   .expanded .nav-item::before {
     display: none;
   }
   .sidebar-bottom {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    align-items: center;
+    gap: 6px;
     margin-top: auto;
-    padding-top: 8px;
   }
-  .sidebar-bottom .nav-item {
-    min-height: 45px;
-    font-size: 9px;
-    padding: 7px 3px;
-    gap: 4px;
+  .queue-dot {
+    box-sizing: border-box;
+    width: var(--rail-queue-size);
+    height: var(--rail-queue-size);
+    border-radius: var(--rail-brand-radius);
+    display: grid;
+    place-items: center;
+    position: relative;
+    color: var(--tx-2);
+    background: var(--bg-2);
+    border: 1px solid var(--line);
   }
-  .expanded .sidebar-bottom .nav-item {
-    min-height: 39px;
-    padding: 9px 14px;
-    font-size: 12px;
+  .queue-ring {
+    position: absolute;
+    inset: -1px;
+    border-radius: var(--rail-queue-ring-radius);
+    border: var(--rail-queue-ring-border) solid transparent;
+    border-top-color: var(--sc-video);
+    animation: rail-spin var(--rail-queue-ring-duration) linear infinite;
+  }
+  @keyframes rail-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .queue-dot i {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: 8px;
+    background: var(--sc-video);
+    color: var(--on-scene);
+    font: 700 10px/16px var(--mono);
+    font-style: normal;
   }
   .connection {
     display: flex;
@@ -587,48 +658,4 @@
       text-overflow: ellipsis;
     }
   }
-  @media (max-height: 780px) {
-    .sidebar {
-      padding-top: 11px;
-    }
-    .brand {
-      margin-bottom: 8px;
-    }
-    .nav-item {
-      min-height: 40px;
-      padding: 5px 0 3px;
-      gap: 3px;
-    }
-    .sidebar-bottom {
-      gap: 0;
-      padding-top: 12px;
-    }
-    .sidebar-bottom .nav-item {
-      min-height: 37px;
-    }
-  }
-
-  @media (max-height: 740px) {
-    .sidebar {
-      padding-top: 10px;
-    }
-    .brand {
-      margin-bottom: 12px;
-    }
-    .sidebar nav {
-      gap: 4px;
-    }
-    .nav-item {
-      min-height: 38px;
-      padding: 4px 2px;
-      gap: 3px;
-    }
-    .sidebar-bottom {
-      padding-top: 8px;
-    }
-    .sidebar-bottom .nav-item {
-      min-height: 31px;
-      padding: 4px 2px;
-    }
-  }
 </style>
diff --git a/calliope-web/src/lib/components/shell/ThemeChoices.svelte b/calliope-web/src/lib/components/shell/ThemeChoices.svelte
index 8c72e333..2c31be80 100644
--- a/calliope-web/src/lib/components/shell/ThemeChoices.svelte
+++ b/calliope-web/src/lib/components/shell/ThemeChoices.svelte
@@ -80,16 +80,19 @@
   }
   .choices.tiles {
     --choice-check-width: 0px;
+    --choice-display: flex;
     --choice-box-sizing: border-box;
     --choice-gap: 6px;
     --choice-copy-gap: 6px;
-    --choice-tone-align: flex-start;
+    --choice-tone-align: stretch;
     --choice-preview-art: var(--theme-preview-art);
     --choice-dock-width: 100%;
     --choice-dock-background: var(--bg-3);
     --choice-radius: 12px;
-    --choice-name-size: 12.5px;
-    --choice-tone-font: 11px var(--font-body);
+    --choice-name-size: var(--manage-theme-name-size);
+    --choice-name-line: var(--manage-theme-line);
+    --choice-tone-font: var(--manage-theme-tone-size)/var(--manage-theme-line)
+      var(--font);
     --choice-selected: color-mix(in srgb, var(--gold) 60%, transparent);
     --choice-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent);
   }
@@ -104,7 +107,8 @@
   }
   .choice {
     box-sizing: var(--choice-box-sizing, content-box);
-    display: grid;
+    display: var(--choice-display, grid);
+    flex-direction: column;
     grid-template-columns: minmax(0, 1fr) var(--choice-check-width, 18px);
     gap: var(--choice-gap, 8px);
     padding: 8px;
@@ -209,6 +213,7 @@
   }
   .copy strong {
     font-size: var(--choice-name-size, 13px);
+    line-height: var(--choice-name-line, inherit);
   }
   .copy small {
     font: var(--choice-tone-font, 10px var(--mono));
diff --git a/calliope-web/src/lib/components/shell/nav.ts b/calliope-web/src/lib/components/shell/nav.ts
index a7567297..1b950589 100644
--- a/calliope-web/src/lib/components/shell/nav.ts
+++ b/calliope-web/src/lib/components/shell/nav.ts
@@ -20,22 +20,22 @@ export interface NavItem {
   label: string;
   icon: IconName;
   href: Pathname;
-  scene: "project" | "image" | "agent" | "manage" | "asset";
+  scene: "project" | "image" | "agent" | "manage" | "asset" | "gold";
   matches: (path: string) => boolean;
 }
 export const NAV_MAIN: NavItem[] = [
   {
     id: "projects",
     label: "工作室",
-    icon: "home",
+    icon: "nav-home",
     href: "/",
-    scene: "project",
+    scene: "gold",
     matches: (p) => p === "/",
   },
   {
     id: "workbench",
     label: "项目",
-    icon: "folder",
+    icon: "nav-project",
     href: "/workbench",
     scene: "project",
     matches: (p) => /^\/(workbench|project)(\/|$)/.test(p),
@@ -43,7 +43,7 @@ export const NAV_MAIN: NavItem[] = [
   {
     id: "image",
     label: "创作台",
-    icon: "image",
+    icon: "nav-create",
     href: "/create",
     scene: "image",
     matches: (p) =>
@@ -54,7 +54,7 @@ export const NAV_MAIN: NavItem[] = [
   {
     id: "agents",
     label: "智能体",
-    icon: "sparkle",
+    icon: "nav-agent",
     href: "/agents",
     scene: "agent",
     matches: (p) => p === "/agents",
@@ -62,17 +62,17 @@ export const NAV_MAIN: NavItem[] = [
   {
     id: "canvas",
     label: "画布",
-    icon: "story",
+    icon: "nav-canvas",
     href: "/canvas",
-    scene: "manage",
+    scene: "image",
     matches: (p) => p.startsWith("/canvas"),
   },
   {
     id: "library",
     label: "素材库",
-    icon: "assets",
+    icon: "nav-lib",
     href: "/library",
-    scene: "asset",
+    scene: "gold",
     matches: (p) => p === "/library",
   },
 ];
@@ -80,7 +80,7 @@ export const NAV_MANAGE: NavItem[] = [
   {
     id: "tasks",
     label: "任务",
-    icon: "clock",
+    icon: "nav-queue",
     href: "/tasks",
     scene: "manage",
     matches: (p) => p === "/tasks",
@@ -88,7 +88,7 @@ export const NAV_MANAGE: NavItem[] = [
   {
     id: "workflows",
     label: "工作流",
-    icon: "playground",
+    icon: "nav-flow",
     href: "/workflows",
     scene: "manage",
     matches: (p) => p === "/workflows",
@@ -96,7 +96,7 @@ export const NAV_MANAGE: NavItem[] = [
   {
     id: "connections",
     label: "模型连接",
-    icon: "link",
+    icon: "nav-plug",
     href: "/model-connections",
     scene: "manage",
     matches: (p) =>
@@ -107,7 +107,7 @@ export const NAV_FOOT: NavItem[] = [
   {
     id: "settings",
     label: "设置",
-    icon: "settings",
+    icon: "nav-gear",
     href: "/settings",
     scene: "manage",
     matches: (p) => p === "/settings",
diff --git a/calliope-web/src/lib/components/ui/icons.ts b/calliope-web/src/lib/components/ui/icons.ts
index d469b93f..b2c12e42 100644
--- a/calliope-web/src/lib/components/ui/icons.ts
+++ b/calliope-web/src/lib/components/ui/icons.ts
@@ -10,6 +10,28 @@ export const icons = {
     '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5"/>',
   "arrow-right": '<path d="M5 12h14M13 6l6 6-6 6"/>',
   pin: '<path d="M12 17v5M5 17h14l-2-4V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v8z"/>',
+  // Approved HEL-726 rail geometry; existing tool icons retain their contracts.
+  "nav-home":
+    '<path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/>',
+  "nav-project":
+    '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v5M13 4v5"/>',
+  "nav-create":
+    '<path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="3"/>',
+  "nav-agent":
+    '<path d="M12 3l1.8 4.6L18.5 9l-4.7 1.4L12 15l-1.8-4.6L5.5 9l4.7-1.4z"/><path d="M18.5 15l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z"/>',
+  "nav-canvas":
+    '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/>',
+  "nav-lib":
+    '<rect x="3" y="5" width="18" height="15" rx="2"/><circle cx="9" cy="10" r="2"/><path d="m21 16-5-5-9 9"/>',
+  "nav-queue":
+    '<path d="M4 6h16M4 12h10M4 18h7"/><circle cx="18" cy="16" r="3"/>',
+  "nav-flow":
+    '<rect x="3" y="3" width="6" height="6" rx="1.5"/><rect x="15" y="15" width="6" height="6" rx="1.5"/><path d="M9 6h4a2 2 0 0 1 2 2v7"/>',
+  "nav-plug": '<path d="M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5"/>',
+  "nav-gear":
+    '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+  "nav-palette":
+    '<path d="M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.2-1.6-.4-1 .3-2.4 1.6-2.4H17a4 4 0 0 0 4-4c0-5.5-4-10-9-10z"/><circle cx="7.5" cy="11" r="1"/><circle cx="10" cy="7" r="1"/><circle cx="15" cy="7.5" r="1"/>',
   // Navigation
   home: '<path d="m3 10 9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M9 22V12h6v10"/>',
   story:
diff --git a/calliope-web/static/themes.css b/calliope-web/static/themes.css
index bd08a542..e94b9d99 100644
--- a/calliope-web/static/themes.css
+++ b/calliope-web/static/themes.css
@@ -90,6 +90,31 @@
   --manage-add-min-height: 130px;
   --manage-card-min: 280px;
   --manage-card-padding: 14px;
+  /* Shared sample rail and management typography, not per-theme offsets. */
+  --rail-padding: 12px 0 10px;
+  --rail-brand-size: 40px;
+  --rail-brand-margin: 10px;
+  --rail-brand-radius: 12px;
+  --rail-nav-width: 56px;
+  --rail-expanded-width: 174px;
+  --rail-expanded-nav-width: 158px;
+  --rail-expanded-label-size: 12px;
+  --rail-nav-padding: 7px 0 6px;
+  --rail-nav-size: 11px;
+  --rail-nav-radius: 12px;
+  --rail-divider-margin: 8px 0;
+  --rail-queue-size: 40px;
+  --rail-queue-ring-radius: 12px;
+  --rail-queue-ring-border: 1.5px;
+  --rail-queue-ring-duration: 1.6s;
+  --rail-active-shadow: initial;
+  --rail-active-shadow-blur: 12px;
+  --manage-header-reserve-font: 11px/1.55 var(--font);
+  --manage-header-reserve-padding: 10px;
+  --manage-header-reserve-dot: 6px;
+  --manage-theme-name-size: 12.5px;
+  --manage-theme-tone-size: 11px;
+  --manage-theme-line: 1.55;
   --task-table-layout: auto;
   --task-thumbnail-column: 64px;
   --task-progress-column: 180px;
@@ -252,6 +277,7 @@
 }
 
 [data-theme="day"] {
+  --rail-active-shadow: none;
   color-scheme: light;
   --bg-0: #e9e4da;
   --bg-1: #f4f1ea;
@@ -334,6 +360,9 @@
 }
 
 [data-theme="grade"] {
+  --rail-active-shadow: none;
+  --rail-nav-radius: 4px;
+  --rail-brand-radius: 4px;
   --desk-filter-radius: 3px;
   --desk-connection-radius: 3px;
   color-scheme: dark;
@@ -431,6 +460,7 @@
 }
 
 [data-theme="bluehour"] {
+  --rail-nav-radius: 14px;
   --desk-head-bg: color-mix(in srgb, #0f1838 55%, transparent);
   color-scheme: dark;
   --bg-0: #0a1029;
diff --git a/docs/changelogs/2026-10-22-hel767-sample-alignment.md b/docs/changelogs/2026-10-22-hel767-sample-alignment.md
new file mode 100644
index 00000000..1ea0cde7
--- /dev/null
+++ b/docs/changelogs/2026-10-22-hel767-sample-alignment.md
@@ -0,0 +1,45 @@
+# HEL-767 · 搜索位置、主题卡片和侧栏样本返工
+
+施工基底经 `git ls-remote` 与认证仓库 API 双重核对，为完整 B2 `feat/hel-751-task-table@dca88b3765c507cba87a7c1da34f2309091e0588`。新分支 `fix/hel-767-sample-alignment`，PR 目标仍为该任务表格分支。PR #4/#5/#6 保持原目标、open、未合并。没有部署、改后端、修改用户配置或数据，没有增加依赖和检查例外。
+
+原 HTML 通过 Multica 附件 `01a15ddd-040d-7e9a-a1a3-04932a3aa0c8` 下载，SHA256 `0473d80d22b90194375f3566c1b8ca30dbd7433581b18f60956eabca252242a4`。只读运行该原件，未编辑或抽换样本。
+
+## 变更与原因
+
+- `ManagementPage.svelte` 和既有 `management.css`：在全部管理页统一头部恢复无文案、无交互、对辅助技术隐藏的右侧预留区域。使用字体、四个 em 空格、原件圆点占位和 padding 自然布局，继承 grade 页头字距；没有按主题补偿搜索坐标，没有演示徽标或假功能。
+- `ThemeChoices.svelte`：修复 tiles 标题与说明的字号/行高来源，标题 12.5px / 1.55，说明 11px / 1.55。改回样本纵向 flex 排版，文字区正常拉伸，不设固定卡片总高度。compact 弹层形态继续复用。`themes.css` 是对应排版 token 来源。
+- `AppShell.svelte`、`nav.ts`、`icons.ts`：在原组件和图标表内恢复品牌块、原件 SVG 路径和 1.7 描边、入口顺序、18px 图标、56px 宽入口、行距、分隔线、选中底座和左侧光条、底部队列/主题/设置/末槽的尺寸位置。恢复正确场景色和 day/grade 无光晕规则。去除侧栏继承的额外蜂窝悬停层，使用样本同一悬停来源。队列计数读取真实任务，运行环仅在真实 running 且未减少动效时显示，时长沿用原件；没有扩做 HEL-733 全局动效。
+- 保留原有导航展开、服务状态、所有产品路由和旧入口。原件最后的“规范”明确为非产品演示入口，该位置承载已有“导航”展开功能，复用原件图标和尺寸，不加入产品设计规范页。服务状态在模型连接提示和展开态保持可读。队列链接进入真实任务页；原顶栏 QueueTray 继续复用。
+- 小高度规则以浏览器 computed 为准：原 HTML 的早期 max-height 规则被后面的基础规则覆盖，三档窗口下原件实际都是 40px 品牌/队列、45px 入口；没有照抄一条无效规则造成小窗口压缩。
+
+## 证据与复现
+
+`scripts/verify-hel767.py` / `.mjs` 复用既有任务页隔离验证方式，创建临时 SQLite 与媒体夹具、动态本机静态服务器；所有 API 在精确本机 origin 下拦截，外部 origin 中止。未列出的写操作记录为失败并阻止。画布 ensure 仅返回隔离空图，不发送智能体消息或生成请求。退出 finally 关闭浏览器与服务器，Python TemporaryDirectory 删除 SQLite/视频。
+
+准备已有的 Playwright 与浏览器运行库，令 `PLAYWRIGHT_MODULE` 指向其 `index.mjs`，必要时设置 `LD_LIBRARY_PATH`。先构建前端，再从仓库根运行 `python3 scripts/verify-hel767.py`。不将浏览器工具或运行库加入项目依赖。
+
+截图矩阵为五个管理页 × night/day/grade/bluehour × 1440×900、1366×768、1280×720。样本与实际使用相同窗口、当前主题和减少动效模式；每组均有原件 PNG、实际 PNG、并排 PNG。`manifest.json` 列出图片文件名、字节数和 SHA256；`results.json` 保留 DOM 数字、完整断言、API 读写记录，`dimensions.md` 列样本/实际/差值。附加四主题悬停原图和操作录屏。
+
+固定比较范围：任务搜索 x/y/宽高；全部四张主题卡片的 x/y/宽高、预览、标题、说明字号/行高；品牌、九个主/管理入口、分隔线、底部队列/主题/设置的位置；全部导航 SVG 路径、尺寸、描边、颜色及选中伪元素。其余管理区域截图供独立复核，不把真实数据差异当成结构完全相同。
+
+## 已完成检查
+
+干净 `npm ci`、全仓 `npm run lint`、`npm run check`（0 errors / 0 warnings）、四组既有前端守护 `npm test` 和 `npm run build` 通过。构建保留既有 @xyflow 未使用导入和超过 500kB chunk 提示，未扩大豁免。额外检查了修改的 Svelte 模板格式、脚本语法和 `git diff --check`。
+
+后端相关回归 `test_studio_generation.py`、`test_playground.py`、`test_workflow_test.py`、`test_stop_kills_jobs.py`：19 passed，保留一条既有 Pydantic warning。后端源码未改。
+
+独立交互回归 73 项通过，0 pageerror；全动效主题切换实测包含 `theme-lamp` 520ms，运行环 1600ms；减少动效立即应用且移除运行环。完整矩阵 60 组、6,169 条断言全部通过，0 pageerror。搜索框 12 组 x/y/宽高差为 0；全部四张主题卡片 × 12 组合（48 项）x/y/宽高差为 0，总高 130.421875px；标题行高 19.375px，说明 computed 行高 17.05px。侧栏入口、底部几何、图标和选中状态逐组合通过。数字原始结果见附件 `results.json` / `summary.json`。
+
+## 真实数据和覆盖边界
+
+本机夹具明确标为隔离验证，不写入产品。任务第二行沿真实项目来源契约显示项目，未伪造 API 不存在的智能体来源；自动列宽随文案变化，进度列 x 单列报告。未有输出的任务和视频缩略图使用同尺寸媒介图标，完成图片只显示夹具真实输出路径。队列是两项 running 加一项 pending，真实计数为 3，不写原件演示计数 2。
+
+工作流、连接、素材的 API 列表由隔离契约夹具提供，不伪造用户真实目录、连接探测或素材。空连接/空素材状态与原件示例有内容差异，逐页对照保留。设置的真实语言、保存栏、高级选项与禁用“克制”档继续保留，隔离存储路径明确标记，不显示原件演示盘符。扫描导入真实入口保留，工作流三栏和任务整宽八列不变。
+
+交互验证包含五个管理路由、兼容跳转、其他共用侧栏路由冒烟；任务搜索/筛选/错误恢复、取消/重试/下载/预览、手动视频播放/暂停/跳播/音量、弹层焦点与归还、删除撤销；创作台图片/视频提示词编辑与刷新草稿、Ctrl+K、无图工作流无上传格；侧栏展开/收起，四主题悬停、主题键盘选择/记忆和减少动效。
+
+未覆盖真实 ComfyUI/GPU、付费云生成、用户数据库、全站全部历史业务、硬件扬声器与全屏，也未执行 HEL-731～733。此次交付须总管安排总工定向独立复核，不代表整套样本已验收，不合并或部署。
+
+## 回滚
+
+对本卡最终提交执行 `git revert <HEL-767 head>` 后正常推送，保留 B2 基底，不 reset/强推。无服务器或用户数据变更需要回滚。
diff --git a/scripts/verify-hel767.mjs b/scripts/verify-hel767.mjs
new file mode 100644
index 00000000..b407a2b0
--- /dev/null
+++ b/scripts/verify-hel767.mjs
@@ -0,0 +1,936 @@
+/** Run via verify-hel767.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.HEL767_OUT,
+  data = process.env.HEL767_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",
+      });
+    }
+    const session = {
+      id: 767,
+      title: "HEL767 isolated session",
+      project_id: null,
+      origin: u.searchParams.get("origin") === "scene" ? "scene" : "chat",
+      messages: [],
+      plan: null,
+      running: false,
+    };
+    const graph = {
+      canvas: {
+        id: 767,
+        title: "HEL767 isolated canvas",
+        project_id: null,
+        agent_session_id: 767,
+        viewport_json: null,
+      },
+      nodes: [],
+      edges: [],
+    };
+    if (u.pathname === "/api/agent/sessions" && req.method() === "GET")
+      return json([session]);
+    if (u.pathname === "/api/agent/sessions/767") return json(session);
+    if (u.pathname === "/api/canvas" && req.method() === "POST") {
+      result.mutations.push({
+        path: u.pathname,
+        method: "POST",
+        purpose: "isolated canvas ensure only",
+      });
+      return json(graph);
+    }
+    if (u.pathname === "/api/canvas/767") return json(graph);
+    if (u.pathname === "/api/shots/by-session/767")
+      return json({
+        id: 767,
+        title: "HEL767 isolated composition",
+        scene: { objects: [], cameraTrack: [] },
+      });
+    if (u.pathname === "/api/shots/767/captures") return json([]);
+    if (u.pathname === "/api/shots") return json([]);
+    if (
+      u.pathname === "/api/agent/projects" ||
+      u.pathname === "/api/agent/skills"
+    )
+      return json([]);
+    if (u.pathname === "/api/agent/sessions" && req.method() === "POST")
+      return json(session);
+    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 });
+      result.errors.push(`Unexpected mutation ${req.method()} ${u.pathname}`);
+      return route.fulfill({
+        status: 503,
+        body: "Unlisted fixture mutation blocked",
+      });
+    }
+    result.apiReads.push(u.pathname);
+    if (u.pathname === "/api/jobs") {
+      if (apiError)
+        return route.fulfill({ status: 500, body: "HEL767 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: 2,
+        queue_poll_timeout_sec: 1800,
+        queue_poll_interval_sec: 1,
+        queue_max_retries: 1,
+        data_dir: "HEL767-isolated-fixture",
+        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", "reduce");
+  });
+  // 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,
+                line: c.lineHeight,
+                weight: c.fontWeight,
+                shadow: c.boxShadow,
+                svg: e.matches("svg") ? e.innerHTML : undefined,
+                radius: c.borderRadius,
+                color: c.color,
+                background: c.backgroundColor,
+              },
+            ];
+          }),
+        ),
+      selectors,
+    );
+  for (const [width, height] of process.env.HEL767_SKIP_VISUAL
+    ? []
+    : [
+        [1440, 900],
+        [1366, 768],
+        [1280, 720],
+      ])
+    for (const theme of ["night", "day", "grade", "bluehour"])
+      for (const [route, sample] of [
+        ["workflows", "workflows"],
+        ["connections", "models"],
+        ["tasks", "tasks"],
+        ["library", "library"],
+        ["settings", "settings"],
+      ]) {
+        await page.setViewportSize({ width, height });
+        await ref.setViewportSize({ width, height });
+        await page.goto(base + "/" + route);
+        await page.locator(".management-header").waitFor();
+        if (route === "tasks") {
+          await page.locator(".task-table tbody tr").first().waitFor();
+          await progress();
+        }
+        if (route === "settings")
+          await page.locator(".choices.tiles").waitFor();
+        await page.evaluate((theme) => {
+          localStorage.setItem("aigc-theme", theme);
+          window.dispatchEvent(
+            new StorageEvent("storage", { key: "aigc-theme", newValue: theme }),
+          );
+        }, theme);
+        await ref.evaluate(
+          ({ sample, theme }) => {
+            go(sample);
+            setTheme(theme);
+          },
+          { sample, theme },
+        );
+        await page.waitForTimeout(650);
+        const name = `${route}-${theme}-${width}`;
+        const actualSelectors = {
+          header: ".management-header",
+          brand: ".refract-shell > .sidebar .brand",
+          divider: ".refract-shell > .sidebar hr",
+          foot: ".sidebar-bottom",
+          queue: ".queue-dot",
+          theme: ".sidebar-bottom button",
+          settings: '.sidebar-bottom a[href="/settings"]',
+          themeCard: ".tiles .choice",
+          themePreview: ".tiles .preview",
+          themeName: ".tiles .copy strong",
+          themeTone: ".tiles .copy small",
+        };
+        const sampleSelectors = {
+          header: `#p-${sample} .ph`,
+          brand: ".rail .brand",
+          divider: ".rail hr",
+          foot: ".rail .foot",
+          queue: ".rail .queue-dot",
+          theme: "#themeBtn",
+          settings: '.rail [data-go="settings"]',
+          themeCard: ".ttile",
+          themePreview: ".ttile .tprev",
+          themeName: ".ttile b",
+          themeTone: ".ttile small",
+        };
+        for (let i = 0; i < 9; i++) {
+          actualSelectors[`nav${i}`] =
+            `.refract-shell > .sidebar nav a:nth-child(${i < 6 ? i + 1 : i - 5})`;
+          if (i >= 6)
+            actualSelectors[`nav${i}`] =
+              `.refract-shell > .sidebar .management a:nth-child(${i - 5})`;
+          sampleSelectors[`nav${i}`] = `.rail > .nav:nth-of-type(${i + 1})`;
+        }
+        if (route === "settings")
+          for (let i = 1; i <= 4; i++)
+            for (const [key, a, b] of [
+              ["Card", ".choice", ".ttile"],
+              ["Preview", ".preview", ".tprev"],
+              ["Name", ".copy strong", "b"],
+              ["Tone", ".copy small", "small"],
+            ]) {
+              actualSelectors[`theme${key}${i}`] =
+                key === "Card"
+                  ? `.tiles .choice:nth-child(${i})`
+                  : `.tiles .choice:nth-child(${i}) ${a}`;
+              sampleSelectors[`theme${key}${i}`] =
+                key === "Card"
+                  ? `.ttile:nth-child(${i})`
+                  : `.ttile:nth-child(${i}) ${b}`;
+            }
+        if (route !== "settings")
+          for (const key of [
+            "themeCard",
+            "themePreview",
+            "themeName",
+            "themeTone",
+          ]) {
+            delete actualSelectors[key];
+            delete sampleSelectors[key];
+          }
+        if (route === "tasks") {
+          Object.assign(actualSelectors, {
+            table: ".task-table",
+            head: ".task-table thead",
+            row: ".task-table tbody tr",
+            thumbnail: ".task-thumbnail",
+            segment: ".task-tabs",
+            search: ".task-search",
+            progress: ".task-progress",
+          });
+          Object.assign(sampleSelectors, {
+            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",
+          });
+        }
+        const railState = (p, actual) =>
+          p.evaluate((actual) => {
+            const selectors = actual
+              ? [
+                  ".refract-shell > .sidebar nav a",
+                  '.sidebar-bottom a[href="/settings"]',
+                  ".sidebar-bottom button:last-of-type",
+                ]
+              : [
+                  ".rail > .nav",
+                  '.rail [data-go="settings"]',
+                  '.rail [data-go="spec"]',
+                ];
+            const nodes = [
+              ...document.querySelectorAll(selectors[0]),
+              ...selectors.slice(1).map((x) => document.querySelector(x)),
+            ];
+            const geometry = (svg) => {
+              const use = svg.querySelector("use");
+              const root = use
+                ? document.querySelector(use.getAttribute("href"))
+                : svg;
+              return [...root.children].map((n) => [
+                n.tagName,
+                [...n.attributes].map((a) => [a.name, a.value]).sort(),
+              ]);
+            };
+            const selected = nodes.find((n) =>
+              actual
+                ? n.getAttribute("aria-current") === "page"
+                : n.classList.contains("on"),
+            );
+            const pseudo = selected
+              ? getComputedStyle(selected, "::before")
+              : null;
+            return {
+              icons: nodes
+                .filter((n) => n?.querySelector("svg"))
+                .map((n) => {
+                  const svg = n.querySelector("svg"),
+                    c = getComputedStyle(svg);
+                  return {
+                    geometry: geometry(svg),
+                    width: c.width,
+                    height: c.height,
+                    stroke: c.strokeWidth,
+                    color: c.color,
+                  };
+                }),
+              selected: pseudo
+                ? Object.fromEntries(
+                    [
+                      "left",
+                      "top",
+                      "bottom",
+                      "width",
+                      "borderRadius",
+                      "backgroundColor",
+                      "boxShadow",
+                    ].map((k) => [k, pseudo[k]]),
+                  )
+                : null,
+            };
+          }, actual);
+        const railActual = await railState(page, true),
+          railSample = await railState(ref, false);
+        result.railProbe = { railActual, railSample };
+        check(
+          JSON.stringify(railActual) === JSON.stringify(railSample),
+          `${name}: rail icon paths, sizes, strokes, colors and selected indicator match`,
+        );
+        const measured = {
+          route,
+          theme,
+          width,
+          height,
+          railActual,
+          railSample,
+          actual: await measure(page, actualSelectors),
+          sample: await measure(ref, sampleSelectors),
+        };
+        result.measurements.push(measured);
+        await page.screenshot({ path: path.join(out, name + "-actual.png") });
+        await ref.screenshot({ path: path.join(out, name + "-sample.png") });
+        for (const key of Object.keys(sampleSelectors)) {
+          if (key === "progress") continue; // auto columns depend on honest source text; reported separately
+          for (const axis of ["x", "y", "width", "height"]) {
+            // Table column width distribution is data-dependent, the outer table and thumbnail dimensions are fixed.
+            if (key === "thumbnail" && axis === "x") continue;
+            check(
+              measured.actual[key] &&
+                measured.sample[key] &&
+                Math.abs(
+                  measured.actual[key][axis] - measured.sample[key][axis],
+                ) < 0.1,
+              `${name}: ${key} ${axis} matches sample`,
+            );
+          }
+        }
+        for (const key of [
+          "brand",
+          "queue",
+          "theme",
+          "settings",
+          ...Array.from({ length: 9 }, (_, i) => `nav${i}`),
+        ])
+          check(
+            measured.actual[key].radius === measured.sample[key].radius,
+            `${name}: ${key} radius matches sample`,
+          );
+        if (route === "settings")
+          for (const key of [
+            "themeName",
+            "themeTone",
+            ...Array.from({ length: 4 }, (_, i) => `themeName${i + 1}`),
+            ...Array.from({ length: 4 }, (_, i) => `themeTone${i + 1}`),
+          ])
+            check(
+              measured.actual[key].line === measured.sample[key].line,
+              `${name}: ${key} line height`,
+            );
+        check(
+          await page.evaluate(
+            () => document.documentElement.scrollWidth <= innerWidth,
+          ),
+          `${name}: no overflow`,
+        );
+      }
+  await page.goto(base + "/tasks");
+  await page.locator(".task-table tbody tr").first().waitFor();
+  await page.setViewportSize({ width: 1440, height: 900 });
+  if (process.env.HEL767_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("HEL767 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: "HEL767 workflow test" },
+    output_paths: ["HEL767-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("HEL767 isolated creative draft");
+      check(
+        (await textarea.inputValue()) === "HEL767 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()) ===
+          "HEL767 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",
+      );
+  }
+  for (const route of [
+    "/",
+    "/workbench",
+    "/agents",
+    "/canvas",
+    "/build-scene",
+    "/models",
+    "/model-connections",
+    "/image",
+    "/video",
+  ]) {
+    await page.goto(base + route);
+    await page.locator(".refract-shell > .sidebar").waitFor({ timeout: 15000 });
+    await page.waitForTimeout(350);
+    check(
+      (await page.locator(".refract-shell > .sidebar").count()) === 1,
+      `${route}: shared rail reachable`,
+    );
+    if (route === "/models")
+      check(
+        page.url().includes("/connections?tab=llm"),
+        "legacy models redirect",
+      );
+    if (route === "/model-connections")
+      check(page.url().includes("/connections"), "connections alias redirect");
+  }
+  await page.goto(base + "/create?kind=image");
+  await page.locator(".studio-form textarea").first().waitFor();
+  check(
+    (await page.locator(".studio-form input[type=file]").count()) === 0,
+    "t2i without image input keeps no padding slot",
+  );
+  await page.keyboard.press("Control+k");
+  await page.getByRole("dialog").waitFor();
+  check(true, "Ctrl+K opens global search");
+  await page.keyboard.press("Escape");
+  await page.getByRole("dialog").waitFor({ state: "hidden" });
+  await page.goto(base + "/tasks");
+  await page.locator(".task-table tbody tr").first().waitFor();
+  await ref.setViewportSize({ width: 1440, height: 900 });
+  for (const theme of ["night", "day", "grade", "bluehour"]) {
+    await page.evaluate((theme) => {
+      localStorage.setItem("aigc-theme", theme);
+      window.dispatchEvent(
+        new StorageEvent("storage", { key: "aigc-theme", newValue: theme }),
+      );
+    }, theme);
+    await ref.evaluate((theme) => {
+      go("tasks");
+      setTheme(theme);
+    }, theme);
+    await page.waitForTimeout(650);
+    await page
+      .locator('.refract-shell > .sidebar a[href="/workflows"]')
+      .hover();
+    await ref.locator('.rail [data-go="workflows"]').hover();
+    await page.waitForTimeout(250);
+    result.checks.push({
+      name: `${theme}: rail hover`,
+      pass: true,
+      actual: await measure(page, {
+        hover: '.refract-shell > .sidebar a[href="/workflows"]',
+      }),
+      sample: await measure(ref, { hover: '.rail [data-go="workflows"]' }),
+    });
+    const hover = result.checks.at(-1);
+    for (const prop of ["color", "background", "radius"])
+      check(
+        hover.actual.hover[prop] === hover.sample.hover[prop],
+        `${theme}: hover ${prop} matches sample`,
+      );
+    await page.screenshot({
+      path: path.join(out, `hover-${theme}-actual.png`),
+    });
+    await ref.screenshot({ path: path.join(out, `hover-${theme}-sample.png`) });
+  }
+  await page.locator('.sidebar-bottom button[title="主题"]').click();
+  await page.getByRole("dialog").waitFor();
+  const firstChoice = page.getByRole("dialog").locator(".choice").first();
+  await firstChoice.focus();
+  await page.keyboard.press("ArrowRight");
+  await page.keyboard.press("Enter");
+  check(
+    (await page.evaluate(() => document.documentElement.dataset.theme)) ===
+      "day",
+    "theme keyboard selection",
+  );
+  await page.keyboard.press("Escape");
+  await page.getByRole("dialog").waitFor({ state: "hidden" });
+  check(
+    await page
+      .locator('.sidebar-bottom button[title="主题"]')
+      .evaluate((e) => e === document.activeElement),
+    "theme dialog restores focus",
+  );
+  await page.locator('button[title="展开导航"]').click();
+  check(
+    (await page.locator(".refract-shell.expanded").count()) === 1,
+    "existing navigation expansion retained",
+  );
+  await page.locator('button[title="收起导航"]').click();
+  await page.goto(base + "/tasks");
+  await page.locator('.sidebar-bottom button[title="主题"]').click();
+  await page.getByRole("dialog").waitFor();
+  await page.getByRole("dialog").getByRole("switch").click();
+  await page.getByRole("dialog").locator(".choice").nth(3).click();
+  await page.waitForFunction(
+    () => document.documentElement.dataset.theme === "bluehour",
+  );
+  await page.waitForTimeout(50);
+  result.themeTransition = await page.evaluate(() => ({
+    theme: document.documentElement.dataset.theme,
+    animations: document.getAnimations().map((a) => ({
+      name: a.animationName,
+      duration: a.effect?.getTiming().duration,
+    })),
+    reduced: document.documentElement.dataset.reduce,
+  }));
+  check(
+    result.themeTransition.theme === "bluehour",
+    "full-motion theme switch applies",
+  );
+  await page.waitForTimeout(650);
+  check(
+    (await page.locator(".queue-ring").count()) === 1,
+    "real running jobs restore original queue ring in full motion",
+  );
+  await page.getByRole("dialog").getByRole("switch").click();
+  check(
+    (await page.locator(".queue-ring").count()) === 0,
+    "reduced motion removes queue ring",
+  );
+  await page.keyboard.press("Escape");
+  check(result.errors.length === 0, "no browser page errors");
+  const recordings = [await page.video().path(), await ref.video().path()];
+  await context.close();
+  result.recordings = recordings.map((p) => path.relative(out, p));
+} finally {
+  await fs.writeFile(
+    path.join(
+      out,
+      process.env.HEL767_SKIP_VISUAL
+        ? "interaction-results.json"
+        : "results.json",
+    ),
+    JSON.stringify(result, null, 2),
+  );
+  await browser.close();
+  await new Promise((r) => server.close(r));
+}
diff --git a/scripts/verify-hel767.py b/scripts/verify-hel767.py
new file mode 100644
index 00000000..b9254b34
--- /dev/null
+++ b/scripts/verify-hel767.py
@@ -0,0 +1,127 @@
+"""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 / "hel767-evidence"
+OUT.mkdir(exist_ok=True)
+
+# This database exists only for the duration of this foreground verification.
+with tempfile.TemporaryDirectory(prefix="hel767-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": "hel767-fake", "name": "5090D"},
+            },
+            "output_paths": (
+                ["HEL767-fixture-4.png" if i == 4 else "HEL767-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": "HEL767 fixture prompt",
+                "role": "prompt", "kind": "textarea", "defaultValue": "", "required": True,
+            }],
+            "output_schema": [{"nodeId": "2", "label": "Output", "kind": kind}],
+            "endpoint_id": "hel767-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 | {"HEL767_OUT": str(OUT), "HEL767_DATA": data}
+    subprocess.run(["node", "scripts/verify-hel767.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("HEL767_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"{measurement['route']}-{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]
+            if not expected or not observed:
+                continue
+            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['route']} {measurement['theme']} {measurement['width']}×{measurement['height']} "
+                f"| {key} | {values(expected)} | {values(observed)} | {values(delta)} |"
+            )
+            if key in ("themeName", "themeTone"):
+                lines.append(f"| typography | {key} | {expected['font']} / {expected['line']} | {observed['font']} / {observed['line']} | font-size / line-height |")
+    (OUT / "dimensions.md").write_text("\n".join(lines) + "\n", encoding="utf-8")
+    import hashlib
+    files = sorted(OUT.glob("*.png"))
+    manifest = [{"file": f.name, "bytes": f.stat().st_size, "sha256": hashlib.sha256(f.read_bytes()).hexdigest()} for f in files]
+    (OUT / "manifest.json").write_text(json.dumps(manifest, indent=2), encoding="utf-8")
-- 
2.54.0