+ {item.name}未接入
+
+ 尚未接入
+ 后续接入批次 · 当前不可用于生成
+
+ 0 个工作流使用
+
+ 外观主题
-同一个片场，换一种灯光。
-{t("settings.loading")}
- {:else if $settingsQuery.isError} -
-
{t("settings.loadFailed")}
- +
+
-
-
-
-
-
-
- {:else if tab === "agent"}
-
-
-
-
+
+
- {:else if $settingsQuery.data}
- {@const s = $settingsQuery.data}
- {#if tab === "queue"}
- + 外观主题 · 同一布局与功能；切换不影响正在编辑的内容，选择会被记住 -
{t("settings.queueSection")}
-{t("settings.queueLead")}
-
- {#each QUEUE_FIELDS as f (f.key)}
- {@render numberField(s, f)}
- {/each}
-
-
- (draft.dry_run = next)}
- />
-
-
-
- {t("settings.dryRunTitle")}
-{t("settings.dryRunHint")}
-{t("settings.agentRunSection")}
-{t("settings.agentRunLead")}
-
- {@render numberField(s, {
- key: "agent_max_steps",
- labelKey: "settings.agentMaxStepsField",
- hintKey: "settings.agentMaxStepsHint",
- step: "1",
- })}
-
- {#snippet actions()}
- {t('tasks.count', { n: genJobs.length, m: activeCount })}
- {/snippet}
-
-
+
+ {#snippet tools()}
diff --git a/calliope-web/src/routes/workflows/+page.svelte b/calliope-web/src/routes/workflows/+page.svelte
index 1c7958fa..0bbb96b3 100644
--- a/calliope-web/src/routes/workflows/+page.svelte
+++ b/calliope-web/src/routes/workflows/+page.svelte
@@ -1,152 +1,18 @@
-
-
-
-
+ $meta.refetch()}
+/>
diff --git a/calliope-web/static/themes.css b/calliope-web/static/themes.css
index 80cc0823..c2df8bbe 100644
--- a/calliope-web/static/themes.css
+++ b/calliope-web/static/themes.css
@@ -56,6 +56,40 @@
--desk-dock-focus:
var(--sh-2), 0 0 0 3px color-mix(in srgb, var(--gold) 8%, transparent),
0 0 40px color-mix(in srgb, var(--gold) 8%, transparent);
+ --theme-reveal-duration: 520ms;
+ --theme-fallback-duration: 280ms;
+ --theme-preview-art: linear-gradient(160deg, #2f5d7c, #f2b36b);
+ --family-qwen: #8aa2ff;
+ --family-krea: #ff86b0;
+ --family-flux: #62d2ff;
+ --family-zimg: #a6e16a;
+ --family-h3: #ff9a52;
+ --family-wan: #c79bff;
+ --family-anima: #ffb86b;
+ --family-ink: #0c0e14;
+ --manage-field-radius: 10px;
+ --manage-card-radius: 14px;
+ --manage-segment-radius: 9px;
+ --manage-segment-option-radius: 7px;
+ --manage-page-background: var(--bg-0);
+ --manage-panel-background: var(--bg-1);
+ --manage-icon-stroke: 1.7;
+ --manage-pin-radius: 6px;
+ --manage-pin-size: 24px;
+ --manage-control-height: 32px;
+ --manage-control-size: 12.5px;
+ --manage-control-weight: 500;
+ --manage-control-radius: var(--r-sm);
+ --manage-button-height: 26px;
+ --manage-button-padding: 9px;
+ --manage-button-radius: 5px;
+ --manage-header-letter-spacing: normal;
+ --manage-filter-width: 220px;
+ --manage-detail-width: 360px;
+ --manage-media-radius: 10px;
+ --manage-add-min-height: 130px;
+ --manage-card-min: 280px;
+ --manage-card-padding: 14px;
--desk-head-height: var(--head);
--desk-head-inset: 16px;
--desk-head-bg: var(--glass);
@@ -291,6 +325,12 @@
--tx-inv: #141516;
--r-xs: 2px;
--r-sm: 4px;
+ --manage-button-radius: 5px;
+ --manage-header-letter-spacing: 0.2px;
+ --manage-field-radius: 4px;
+ --manage-card-radius: 4px;
+ --manage-segment-radius: 4px;
+ --manage-segment-option-radius: 4px;
--r-md: 6px;
--r-lg: 8px;
--desk-dock-radius: 8px;
@@ -372,6 +412,15 @@
--bg-3: #1f2c5c;
--bg-4: #2a386e;
--r-sm: 8px;
+ --manage-button-radius: 8px;
+ --manage-control-radius: 10px;
+ --manage-page-background: linear-gradient(
+ 180deg,
+ #0c1435 0%,
+ #121640 55%,
+ #24163f 100%
+ );
+ --manage-panel-background: color-mix(in srgb, var(--bg-1) 78%, transparent);
--r-md: 12px;
--r-lg: 18px;
--desk-dock-radius: 18px;
@@ -607,3 +656,40 @@ html {
background: var(--bg-0);
color: var(--tx-1);
}
+
+/* HEL-726 theme switch: the approved lamp reveal and its colour-only fallback. */
+html.theme-anim,
+html.theme-anim *,
+html.theme-anim *::before,
+html.theme-anim *::after {
+ transition:
+ background-color var(--theme-fallback-duration) var(--ease-io),
+ border-color var(--theme-fallback-duration) var(--ease-io),
+ color var(--theme-fallback-duration) var(--ease-io),
+ fill var(--theme-fallback-duration),
+ box-shadow var(--theme-fallback-duration) !important;
+}
+::view-transition-old(root),
+::view-transition-new(root) {
+ animation: none;
+ mix-blend-mode: normal;
+}
+::view-transition-new(root) {
+ animation: theme-lamp var(--theme-reveal-duration) var(--ease-out);
+}
+@keyframes theme-lamp {
+ from {
+ clip-path: circle(0 at var(--theme-x, 34px) var(--theme-y, 85%));
+ }
+ to {
+ clip-path: circle(150% at var(--theme-x, 34px) var(--theme-y, 85%));
+ }
+}
+:root[data-reduce="1"]::view-transition-new(root) {
+ animation: none;
+}
+@media (prefers-reduced-motion: reduce) {
+ ::view-transition-new(root) {
+ animation: none;
+ }
+}
diff --git a/docs/changelogs/2026-10-22-hel730-management.md b/docs/changelogs/2026-10-22-hel730-management.md
new file mode 100644
index 00000000..354095a5
--- /dev/null
+++ b/docs/changelogs/2026-10-22-hel730-management.md
@@ -0,0 +1,45 @@
+# HEL-730 · B2 管理页面施工稿
+
+本稿尚未通过本卡的完整验收门槛。未合并、未部署、未迁移数据、未修改用户配置或密钥、未触发真实/付费生成；没有新增项目依赖。
+
+基底精确为 `feat/hel-729-creative-desk@634965f5f51c8a1e489e6462395fc26037dcacba`，独立施工分支 `feat/hel-730-management`，PR 目标仍是该 B1 分支。原样本通过 Multica 附件下载，SHA256 为 `0473d80d22b90194375f3566c1b8ca30dbd7433581b18f60956eabca252242a4`。依据 HEL-727 B2 边界与 HEL-735 审计执行，未启动其他批次。
+
+## 实现
+
+- `src/lib/components/manage/ManagementPage.svelte` / `management.css` 与 `static/themes.css`：统一管理页头、220px 筛选、弹性列表、360px 详情、表格、状态标签、模型卡片和表单。旧页面样式整体移除，不追加第二套覆盖样式。现有 `Button`、`Modal`、导入/试跑/元数据组件继续复用。
+- `routes/workflows` / `WorkflowLibrary.svelte`：工作流库成为独立管理页，搜索、用途/模型族/状态/媒介/收藏筛选、真实计数、最近排序、逐批显示、单文件导入、扫描/转换/批量导入、去重、批量标注与启停、连接绑定、节点检查、输出映射与试跑入口均保留。列表使用轻量 meta，详情按需读取。修复同时预加载和打开映射时错过打开的问题，合并同条详情的并发读取，试跑前强制取得新详情，避免沿用旧绑定。
+- `workflowState.ts` 统一可运行契约：`is_enabled && usage && !needs_mapping`；创作台的三处原判断改为调用同一纯函数，其他创作交互保留。
+- `routes/connections`：合并 ComfyUI、大语言模型、图片模型、视频模型四页签。提取原连接/LLM 业务逻辑为 `ComfyConnections` / `LlmModels`，保留连接测试、编辑、默认项、删除、密钥留空保留和智能体模型分配。连接使用数从真实工作流的显式绑定或默认绑定计算；队列和显存没有接口则显示未知。云端图片、可灵、即梦卡片明确未接入且不能生成。`/models`、旧工作流入口兼容转向新位置。
+- `routes/tasks`：按本卡及 HEL-727 的明确要求使用管理三栏；来源过滤把工作流试跑单列，不计入创作台来源。进度使用 SSE 实际值，未上报则说明等待服务；取消、重试、下载、缺失输出提示和原撤销删除队列保留。
+- `routes/library`：使用素材墙，保留真实文件索引、分页、预览、选择、删除确认、存入项目。视频默认暂停，进入预览后也需手动播放。接口只提供图片/视频且没有归属字段，因此音频/未归属筛选明确禁用，项目范围显示全部，不假造归属。
+- `routes/settings`：两列分组、四主题预览卡、七种真实语言、队列数值、动效开关、Dry-run、存储目录、固定保存栏；更多队列/目录/智能体选项保留在高级分组。原验证、草稿、放弃修改、离页保护及保存逻辑保留。
+- `AppShell` 只增加可选页头插槽；未改导航内容。`ThemeChoices` 的新 tiles 形态仅用于设置，原主题弹层形态保留。`LanguageSwitcher` 保留原下拉形态，并增加设置页分段形态。
+- 主题切换按 HEL-726 补 520ms 圆形展开、280ms 颜色回退、减少动效立即切换、连续选择以最后一次为准。仅改变根 token 和主题 store，不重新挂载编辑器。现有按钮在原统一规则中改用可选尺寸/字重 token，默认值保留 B1 最终值，管理页消费样本值。Icon 通过可选 stroke token 保留 B1 默认 1.5，仅管理页用原件 1.7，并在既有图标表中补原件的置顶、搜索、上传与映射箭头等路径，旧图标键不改；置顶复用创作台的本地 pin 存储，原后端收藏操作仍保留在详情。输入映射左侧显示真实节点类及字段，右侧显示控件名称。
+
+上述路径除 `static` 外均相对 `calliope-web/`。
+
+## 自测与证据
+
+`verify-hel730.py` 只在单独的本机数据库、配置和本机假 ComfyUI 上运行，进程在脚本退出时关闭。它扫描真实示例目录，从 146 个 UI 格式文件中选取 `3-图像生成/Anima/Anima_Klein放大_超强动漫模型.json`，只转换/导入一份，确认输出节点 99，绑定假服务，检查节点后试跑。产物 SHA256、原文件 SHA256、输出隔离及创作历史排除见附件 `closed-loop.json`。假服务返回 1px 验证文件，不代表真实 GPU/模型效果，也不用于装饰产品截图。
+
+浏览器脚本采集 5 页 × 4 主题 × 3 尺寸的 60 组同窗样本/实际截图及 DOM 实测。素材页默认空态的对照不冒充有作品状态；对照完成后才上传带 HEL730 fixture 名称的本地视频，用于播放、删除取消和存入项目空态回归。待配置工作流 fixture 同样在视觉采集之后加入，用于验证从 B1 创作台进入映射行，不属于目录导入数量。
+
+- `npm run check`：0 errors，保留 B1 的 ShotStagePanel 字幕 warning 1 条。
+- `npm run build`、前端四组守护检查通过。
+- 相关后端回归 126 项通过：导入/转换、未知输出映射、试跑隔离、连接、LLM、真实状态、图输入和上传。
+- 浏览器检查包含搜索、空态、导入焦点与归还、试跑入口、连接弹层关闭、四页签/旧入口、草稿保留与放弃、520ms 主题展开、减少动效、快速切换、无 View Transitions 回退、视频手动播放、删除取消、存入项目空态以及 B1 待配置入口。最终数量以附件 JSON 为准。
+- 管理源码定向 Prettier 检查通过；`git diff --check` 通过。
+
+复现：在仓库父目录用 `multica attachment download 01a15ddd-040d-7e9a-a1a3-04932a3aa0c8 -o ./attachments` 下载样本，然后从仓库根设置 `PYTHONPATH=calliope-backend/src:calliope-backend`，运行 `python3 scripts/verify-hel730.py`。浏览器工具是运行环境已有工具；可通过 `PLAYWRIGHT_MODULE` 指向它的 `index.mjs`，没有将 Playwright 加为项目依赖。生成的本机 URL 只用于脚本过程，脚本结束后不可访问，交付物是任务卡附件。
+
+## 尚未通过的门槛
+
+全仓 `npm run lint` 仍失败。独立导出 B1 精确基底复跑，同样存在 62 个格式文件问题，且 ESLint 9 没有任何 `eslint.config.*`，单独执行也退出 2。不能把定向格式/类型检查写成全仓 lint 已通过；未擅自跨批重排全部基线文件或增加 lint 解析器依赖，需总管明确基线工具修复的范围。
+
+样本“动效强度”的克制档没有实际行为规则，现有偏好仅完整/减少动效；本稿把克制档诚实禁用，未自创第三套时长。需总管明确归入 B5 收尾还是补充本卡规则。任务原件的全宽表格与其组织说明不一致，本稿遵本卡/HEL-727 的明确三栏要求，证据中保留这一结构差异，不宣称整页像素相等。
+
+仍须总工独立重拍样本/实际页面并审核；真实数据、空态、更多管理入口、继承 B1 的导航与样本的差异均可见于附件，不以功能通过代替视觉一致性，也不宣称整套样本落地。
+
+## 回滚
+
+本稿零后端/数据库变更。尚无部署可回滚；后续若获准部署，回退至 B1 精确提交 `634965f5f51c8a1e489e6462395fc26037dcacba` 的构建即可，保持原配置和数据。施工稿和原 B1 使用独立分支及独立 PR，不合并或改写旧 PR。
diff --git a/scripts/verify-hel730.mjs b/scripts/verify-hel730.mjs
new file mode 100644
index 00000000..c90bf5ca
--- /dev/null
+++ b/scripts/verify-hel730.mjs
@@ -0,0 +1,549 @@
+/** Browser evidence for a foreground, isolated HEL-730 server. */
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+const { chromium } = await import(
+ process.env.PLAYWRIGHT_MODULE || "playwright"
+);
+const out = process.env.HEL730_OUT,
+ base = process.env.HEL730_URL;
+const browser = await chromium.launch({
+ headless: true,
+ args: ["--no-sandbox"],
+});
+const evidence = { errors: [], checks: [], measurements: [] };
+const check = (condition, name) => {
+ evidence.checks.push({ name, pass: !!condition });
+ if (!condition) throw Error(name);
+};
+let activePage;
+try {
+ const context = await browser.newContext({
+ viewport: { width: 1440, height: 900 },
+ recordVideo: {
+ dir: path.join(out, "videos"),
+ size: { width: 1440, height: 900 },
+ },
+ });
+ const page = await context.newPage();
+ activePage = page;
+ page.on("pageerror", (error) => evidence.errors.push(error.message));
+ await page.goto(base + "/workflows");
+ await page.getByRole("button", { name: "试运行", exact: true }).waitFor();
+ await page.keyboard.press("/");
+ check(
+ await page
+ .locator(".workflow-search input")
+ .evaluate((el) => el === document.activeElement),
+ "workflow / focuses search",
+ );
+ await page.locator(".workflow-search input").fill("missing-result");
+ check(
+ await page.getByText("没有匹配的工作流", { exact: true }).isVisible(),
+ "search empty state",
+ );
+ await page.locator(".workflow-search input").fill("");
+ check(
+ (await page
+ .locator(".management-header .icon")
+ .first()
+ .evaluate((el) => getComputedStyle(el).strokeWidth)) === "1.7px",
+ "management icon stroke matches approved 1.7",
+ );
+ await page.locator(".mg-side .mg-filter").nth(1).hover();
+ await page.screenshot({
+ path: path.join(out, "interaction-filter-hover.png"),
+ });
+ await page.route("**/api/workflows/*/check", async (route) => {
+ await new Promise((resolve) => setTimeout(resolve, 400));
+ await route.continue();
+ });
+ await page
+ .getByRole("button", { name: "检查节点与模型", exact: true })
+ .click();
+ await page.locator(".mg-detail .a-btn.loading").waitFor();
+ await page.screenshot({
+ path: path.join(out, "interaction-check-loading.png"),
+ });
+ check(
+ true,
+ "real node check exposes loading feedback under 400ms transport delay",
+ );
+ await page.locator(".mg-detail .a-btn.loading").waitFor({ state: "hidden" });
+ await page.unroute("**/api/workflows/*/check");
+ const pinButton = page.locator(".mg-pin").first();
+ await pinButton.click();
+ check(
+ (await pinButton.getAttribute("aria-pressed")) === "true",
+ "workflow pin is selected",
+ );
+ await page.goto(base + "/image", { waitUntil: "networkidle" });
+ check(
+ (await page
+ .locator(".sidebar .icon")
+ .first()
+ .evaluate((el) => getComputedStyle(el).strokeWidth)) === "1.5px",
+ "B1 icon stroke remains 1.5",
+ );
+ check(
+ await page.getByText("置顶工作流", { exact: true }).isVisible(),
+ "library pin is shared with B1 creation rail",
+ );
+ await page.goto(base + "/workflows", { waitUntil: "networkidle" });
+ await page.locator(".mg-pin").first().click();
+ await page.getByRole("button", { name: "批量标注", exact: true }).click();
+ await page
+ .getByRole("checkbox", { name: "全选当前列表", exact: true })
+ .check();
+ await page.getByRole("button", { name: "批量标注", exact: true }).click();
+ await page.getByRole("dialog").waitFor();
+ await page.waitForTimeout(350);
+ await page.screenshot({
+ path: path.join(out, "interaction-batch-metadata.png"),
+ });
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ await page.getByRole("button", { name: "取消选择", exact: true }).click();
+ check(
+ (await page
+ .getByRole("checkbox", { name: "全选当前列表", exact: true })
+ .count()) === 0,
+ "bulk entry preserves a clean default table",
+ );
+ const importButton = page.getByRole("button", {
+ name: "导入工作流",
+ exact: true,
+ });
+ await importButton.click();
+ await page.getByRole("dialog").waitFor();
+ await page.waitForTimeout(350);
+ await page.screenshot({
+ path: path.join(out, "interaction-import-open.png"),
+ });
+ for (let i = 0; i < 12; i++) await page.keyboard.press("Tab");
+ check(
+ await page
+ .getByRole("dialog")
+ .evaluate((el) => el.contains(document.activeElement)),
+ "import focus remains trapped",
+ );
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ check(
+ await importButton.evaluate((el) => el === document.activeElement),
+ "import focus returns",
+ );
+ await page
+ .getByRole("button", { name: "扫描 / 转换 / 批量导入", exact: true })
+ .click();
+ await page.getByRole("dialog").waitFor();
+ await page.waitForTimeout(350);
+ await page.screenshot({ path: path.join(out, "interaction-scan-open.png") });
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ await page.getByRole("button", { name: "试运行", exact: true }).click();
+ await page.getByRole("dialog").waitFor();
+ await page.waitForTimeout(350);
+ await page.screenshot({ path: path.join(out, "interaction-test-open.png") });
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ await page.goto(base + "/connections");
+ await page.getByRole("button", { name: "测试连接", exact: true }).click();
+ await page.getByText("连接测试通过", { exact: false }).first().waitFor();
+ check(true, "ComfyUI test uses real local fake HTTP");
+ await page.getByRole("button", { name: "编辑", exact: true }).first().click();
+ await page.getByRole("dialog").waitFor();
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ check(true, "ComfyUI edit modal closes and restores card");
+ await page
+ .getByRole("button", { name: "图片模型 · 后续", exact: true })
+ .click();
+ await page.waitForURL("**/connections?tab=image");
+ check(
+ await page.getByRole("button", { name: "等待接入" }).isDisabled(),
+ "cloud image remains disabled",
+ );
+ await page
+ .getByRole("button", { name: "视频模型 · 后续", exact: true })
+ .click();
+ await page.waitForURL("**/connections?tab=video");
+ check(
+ await page.getByRole("button", { name: "等待接入" }).first().isDisabled(),
+ "cloud video remains disabled",
+ );
+ await page.goto(base + "/models");
+ await page.waitForURL("**/connections?tab=llm");
+ await page
+ .getByRole("button", { name: "添加大语言模型", exact: true })
+ .waitFor();
+ check(true, "legacy models redirects to LLM tab");
+ await page
+ .getByRole("button", { name: "添加大语言模型", exact: true })
+ .click();
+ await page.getByRole("dialog").waitFor();
+ await page.waitForTimeout(350);
+ await page.screenshot({ path: path.join(out, "interaction-llm-add.png") });
+ await page.keyboard.press("Escape");
+ await page.goto(base + "/tasks");
+ await page.locator(".mg-table tbody button").first().click();
+ check(
+ (await page.locator(".mg-detail h2").textContent())?.length > 0,
+ "task details selectable",
+ );
+ await page.screenshot({
+ path: path.join(out, "interaction-task-detail.png"),
+ });
+ await page.goto(base + "/settings");
+ await page.locator(".queue-fields input").first().waitFor();
+ const queue = page.locator(".queue-fields input").first();
+ const original = await queue.inputValue();
+ await queue.fill(original === "2" ? "3" : "2");
+ await page.getByRole("button", { name: /日光棚/ }).click();
+ await page.waitForFunction(
+ () => document.documentElement.dataset.theme === "day",
+ );
+ if (await page.evaluate(() => !!document.startViewTransition)) {
+ await page.waitForFunction(() =>
+ document.getAnimations().some((a) => a.animationName === "theme-lamp"),
+ );
+ const duration = await page.evaluate(
+ () =>
+ document
+ .getAnimations()
+ .find((a) => a.animationName === "theme-lamp")
+ ?.effect.getTiming().duration,
+ );
+ check(duration === 520, "theme lamp duration matches 520ms sample");
+ await page.screenshot({
+ path: path.join(out, "interaction-theme-reveal-frame.png"),
+ });
+ }
+ check(
+ (await queue.inputValue()) !== original,
+ "theme preserves unsaved settings",
+ );
+ await page.screenshot({
+ path: path.join(out, "interaction-settings-draft.png"),
+ });
+ await page.waitForTimeout(600);
+ await page.getByRole("button", { name: "放弃修改", exact: true }).click();
+ check(
+ (await queue.inputValue()) === original,
+ "discard settings restores draft",
+ );
+ await page
+ .getByRole("button", { name: "关闭（减少动效）", exact: true })
+ .click();
+ await page.getByRole("button", { name: /夜片场/ }).click();
+ check(
+ await page.evaluate(
+ () =>
+ document.documentElement.dataset.theme === "night" &&
+ document.documentElement.dataset.reduce === "1" &&
+ !document.getAnimations().some((a) => a.animationName === "theme-lamp"),
+ ),
+ "reduced motion changes theme immediately",
+ );
+ await page.getByRole("button", { name: "完整", exact: true }).click();
+ await page.evaluate(() => {
+ for (const id of ["day", "bluehour", "night"])
+ document
+ .querySelector('.choices .preview[data-theme="' + id + '"]')
+ .closest("button")
+ .click();
+ });
+ await page.waitForTimeout(600);
+ check(
+ await page.evaluate(
+ () => document.documentElement.dataset.theme === "night",
+ ),
+ "rapid theme switching keeps the final choice",
+ );
+ const advanced = page.locator(".advanced");
+ await advanced.locator("summary").click();
+ check(
+ await advanced.evaluate((el) => el.open),
+ "settings advanced controls expand",
+ );
+ await page.screenshot({
+ path: path.join(out, "interaction-settings-expanded.png"),
+ });
+ await advanced.locator("summary").click();
+ check(
+ !(await advanced.evaluate((el) => el.open)),
+ "settings advanced controls collapse",
+ );
+ // Approved sample, downloaded separately through the CLI; do not modify it.
+ const sampleFile = path.resolve(
+ "..",
+ "attachments",
+ "夜片场-多主题交互样本.html",
+ );
+ const ref = await context.newPage();
+ await ref.goto(pathToFileURL(sampleFile).href, {
+ waitUntil: "domcontentloaded",
+ });
+ const measure = async (p, selectors) =>
+ p.evaluate(
+ (selectors) =>
+ Object.fromEntries(
+ Object.entries(selectors).map(([name, selector]) => {
+ const el = document.querySelector(selector);
+ if (!el) return [name, null];
+ const r = el.getBoundingClientRect(),
+ s = getComputedStyle(el);
+ return [
+ name,
+ {
+ x: r.x,
+ y: r.y,
+ width: r.width,
+ height: r.height,
+ fontSize: s.fontSize,
+ fontWeight: s.fontWeight,
+ letterSpacing: s.letterSpacing,
+ borderRadius: s.borderRadius,
+ color: s.color,
+ background: s.backgroundColor,
+ },
+ ];
+ }),
+ ),
+ selectors,
+ );
+ for (const [width, height] of process.env.HEL730_SKIP_VISUAL
+ ? []
+ : [
+ [1440, 900],
+ [1366, 768],
+ [1280, 720],
+ ]) {
+ await page.setViewportSize({ width, height });
+ await ref.setViewportSize({ width, height });
+ 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.goto(base + "/" + route, { waitUntil: "networkidle" });
+ 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(600);
+ await page.screenshot({
+ path: path.join(out, `${route}-${theme}-${width}-actual.png`),
+ });
+ await ref.screenshot({
+ path: path.join(out, `${route}-${theme}-${width}-sample.png`),
+ });
+ const actual = await measure(page, {
+ header: ".management-header",
+ title: ".management-header>b",
+ side: ".mg-side",
+ detail: ".mg-detail",
+ input: ".mg-search",
+ button: ".management-header .a-btn",
+ card: ".mg-card",
+ seg: ".management-header .mg-seg",
+ tag: ".management-page .mg-tag",
+ });
+ const reference = await measure(ref, {
+ header: `#p-${sample} .ph`,
+ title: `#p-${sample} .crumb b`,
+ side: `#p-${sample} .mg-side`,
+ detail: `#p-${sample} .mg-detail`,
+ input: `#p-${sample} .input`,
+ button: `#p-${sample} .ph .btn`,
+ card: `#p-${sample} .mcard`,
+ seg: `#p-${sample} .ph .seg`,
+ tag: `#p-${sample} .tag`,
+ });
+ evidence.measurements.push({
+ route,
+ theme,
+ width,
+ height,
+ actual,
+ sample: reference,
+ documentOverflow: await page.evaluate(
+ () => document.documentElement.scrollWidth > innerWidth,
+ ),
+ });
+ }
+ }
+ }
+ // Uploaded media is an explicitly named local fixture, added after empty-state visual captures.
+ const fixturePath = path.resolve(
+ "design/prototypes/reframe-20261014/assets/preview.webm",
+ );
+ const upload = await page.request.post(base + "/api/playground/uploads", {
+ multipart: {
+ file: {
+ name: "HEL730-playback-fixture.webm",
+ mimeType: "video/webm",
+ buffer: await fs.readFile(fixturePath),
+ },
+ },
+ });
+ check(upload.ok(), "isolated video fixture upload succeeds");
+ await page.goto(base + "/library", { waitUntil: "networkidle" });
+ const preview = page.getByRole("button", {
+ name: /预览 .*HEL730-playback-fixture/,
+ });
+ await preview.click();
+ const player = page.getByRole("dialog").locator("video");
+ await player.waitFor();
+ await player.evaluate(
+ (video) =>
+ new Promise((resolve) => {
+ if (video.readyState >= 1) resolve();
+ else video.addEventListener("loadedmetadata", resolve, { once: true });
+ }),
+ );
+ check(
+ await player.evaluate(
+ (video) => video.paused && video.controls && !video.autoplay,
+ ),
+ "library video preview waits for manual play",
+ );
+ await player.evaluate((video) => video.play());
+ await page.waitForTimeout(300);
+ check(
+ await player.evaluate((video) => video.currentTime > 0 && !video.paused),
+ "library video plays on request",
+ );
+ await player.evaluate((video) => video.pause());
+ await page.screenshot({
+ path: path.join(out, "interaction-library-video-paused.png"),
+ });
+ await page.keyboard.press("Escape");
+ await page.getByRole("dialog").waitFor({ state: "hidden" });
+ await page.locator('.asset-meta input[type="checkbox"]').check();
+ await page.getByRole("button", { name: /删除已选/ }).click();
+ await page.getByRole("dialog").waitFor();
+ await page.keyboard.press("Escape");
+ check(
+ await preview.isVisible(),
+ "library delete cancellation retains fixture",
+ );
+ await page.getByRole("button", { name: "存入项目", exact: true }).click();
+ await page.getByRole("dialog").waitFor();
+ await page.screenshot({
+ path: path.join(out, "interaction-library-attach-empty.png"),
+ });
+ await page.keyboard.press("Escape");
+ // Test-only fixture is added after all visual snapshots; it never represents an imported directory file.
+ const fixture = await page.request.post(base + "/api/workflows", {
+ data: {
+ name: "HEL730 待配置入口回归",
+ workflow_json: {
+ 1: {
+ class_type: "PrimitiveStringMultiline",
+ inputs: { value: "fixture" },
+ },
+ 7: {
+ class_type: "GlaxSamplerNode",
+ inputs: { prompt: ["1", 0], length: 121 },
+ },
+ 15: { class_type: "QuarkMuffinDisplay", inputs: { payload: ["7", 0] } },
+ },
+ usage: "text2image",
+ usage_source: "user",
+ is_enabled: false,
+ },
+ });
+ check(fixture.ok(), "isolated pending fixture created");
+ const pending = await fixture.json();
+ check(
+ pending.needs_mapping && !pending.is_enabled,
+ "pending fixture cannot generate",
+ );
+ // B1 compatibility: readonly desk search, pending workflow deep link, no imaginary text-to-image input.
+ await page.goto(base + "/image", { waitUntil: "networkidle" });
+ await page.keyboard.press("/");
+ check(
+ await page.evaluate(() => document.activeElement?.tagName === "INPUT"),
+ "B1 / search remains available",
+ );
+ await page.keyboard.type("HEL730 keyboard");
+ await page.keyboard.press("Escape");
+ await page.screenshot({ path: path.join(out, "b1-keyboard-regression.png") });
+ await page
+ .getByRole("searchbox", { name: "搜索工作流", exact: true })
+ .fill("");
+ await page.getByRole("checkbox", { name: "仅可运行", exact: true }).uncheck();
+ await page
+ .locator('button.workflow-pick[title="HEL730 待配置入口回归"]')
+ .click();
+ await page.waitForURL("**/workflows?manage=1&wf=" + pending.id);
+ await page.locator(".wf-map-editor").waitFor();
+ check(
+ (await page.locator(".mg-detail h2").textContent()) ===
+ "HEL730 待配置入口回归",
+ "B1 pending link opens selected mapping row",
+ );
+ await page.screenshot({
+ path: path.join(out, "b1-pending-mapping-regression.png"),
+ });
+ const fallback = await context.newPage();
+ await fallback.addInitScript(() =>
+ Object.defineProperty(document, "startViewTransition", {
+ value: undefined,
+ configurable: true,
+ }),
+ );
+ await fallback.goto(base + "/settings", { waitUntil: "networkidle" });
+ const previous = await fallback.evaluate(
+ () => document.documentElement.dataset.theme,
+ );
+ await fallback
+ .getByRole("button", { name: previous === "day" ? /夜片场/ : /日光棚/ })
+ .click();
+ check(
+ await fallback.evaluate(() =>
+ document.documentElement.classList.contains("theme-anim"),
+ ),
+ "unsupported View Transitions uses colour fallback",
+ );
+ await fallback.waitForTimeout(400);
+ check(
+ !(await fallback.evaluate(() =>
+ document.documentElement.classList.contains("theme-anim"),
+ )),
+ "fallback cleans up after 340ms",
+ );
+ await fallback.screenshot({
+ path: path.join(out, "interaction-theme-fallback.png"),
+ });
+ await context.close();
+ evidence.videos = {
+ actual: path.basename(await page.video().path()),
+ reference: path.basename(await ref.video().path()),
+ };
+ check(evidence.errors.length === 0, "no browser runtime errors");
+} catch (error) {
+ await activePage?.screenshot({
+ path: path.join(out, "verification-failure.png"),
+ });
+ throw error;
+} finally {
+ await fs.writeFile(
+ path.join(out, "browser-evidence.json"),
+ JSON.stringify(evidence, null, 2),
+ );
+ await browser.close();
+}
diff --git a/scripts/verify-hel730.py b/scripts/verify-hel730.py
new file mode 100644
index 00000000..f73aee08
--- /dev/null
+++ b/scripts/verify-hel730.py
@@ -0,0 +1,118 @@
+"""Reproduce HEL-730 on an isolated database and HTTP fake, never on a user server.
+Run from repo root: PYTHONPATH=calliope-backend/src:calliope-backend python3 scripts/verify-hel730.py
+Optional: PLAYWRIGHT_MODULE=/absolute/path/to/playwright/index.mjs.
+"""
+from __future__ import annotations
+import asyncio
+import hashlib
+import json
+import os
+from pathlib import Path
+import socket
+import subprocess
+import threading
+import time
+import uuid
+
+import httpx
+import uvicorn
+from PIL import Image
+
+from calliope.config import settings
+import calliope.config as config_module
+from calliope.db import migrate_db
+from calliope.main import create_app
+from tests.test_studio_generation import fake_comfy, PNG_1PX
+
+ROOT = Path(__file__).resolve().parents[1]
+OUT = ROOT.parent / 'hel730-evidence'
+OUT.mkdir(exist_ok=True)
+DATA = OUT / ('isolated-data-'+uuid.uuid4().hex[:8])
+DATA.mkdir(exist_ok=True)
+settings.data_dir = DATA
+settings.assets_dir = DATA / 'assets'
+settings.dry_run = False
+settings.queue_poll_interval_sec = .5
+settings.queue_poll_timeout_sec = 10
+settings.llm_profiles = []
+settings.llm_active_id = None
+settings.comfyui_endpoints = []
+settings.comfyui_active_id = None
+config_module.CONFIG_FILE = DATA / 'isolated-config.json'
+# Configuration and queue data are local to this evidence run.
+asyncio.run(migrate_db(settings.db_path))
+fake_generator = fake_comfy.__wrapped__()
+fake = next(fake_generator)
+sock = socket.socket()
+sock.bind(('127.0.0.1', 0))
+port = sock.getsockname()[1]
+server = uvicorn.Server(uvicorn.Config(create_app(ROOT/'calliope-web'/'build'), log_level='warning'))
+thread = threading.Thread(target=lambda: server.run(sockets=[sock]), daemon=True)
+thread.start()
+try:
+ with httpx.Client(base_url=f'http://127.0.0.1:{port}', timeout=30) as client:
+ for _ in range(200):
+ if server.started: break
+ time.sleep(.05)
+ assert server.started
+ def request(method, url, **kwargs):
+ r = client.request(method, url, **kwargs)
+ assert r.is_success, (url, r.status_code, r.text)
+ return r.json()
+ endpoint = request('POST','/api/comfyui/endpoints',json={'name':'HEL-730 本机隔离假服务','base_url':f'http://127.0.0.1:{fake.server_address[1]}','auth_type':'none'})['endpoints'][0]
+ scan = request('POST','/api/workflows/import-scan',json={'root':str(ROOT/'example_ComfyUI_workflows'),'dry_run':True})
+ (OUT/'scan.json').write_text(json.dumps(scan,ensure_ascii=False,indent=2))
+ assert request('GET','/api/workflows?view=meta') == []
+ candidates = [f for f in scan['files'] if f.get('importable') and f.get('suggested',{}).get('usage') == 'text2image' and 'image' in f.get('suggested',{}).get('media_out',[])]
+ assert candidates, 'No convertible UI-format workflow in the real directory'
+ # Prefer text-only inputs so the fake run does not need synthetic user reference media.
+ candidates.sort(key=lambda f: (bool(f.get('suggested',{}).get('media_in')),f.get('source_path','')))
+ chosen = candidates[0]
+ path = ROOT/'example_ComfyUI_workflows'/chosen['source_path']
+ graph = json.loads(path.read_text())
+ convert = request('POST','/api/workflows/convert',json={'files':[{'source_path':chosen['source_path'],'workflow_json':graph}],'include_workflows':True})
+ (OUT/'convert.json').write_text(json.dumps(convert,ensure_ascii=False,indent=2))
+ imported = request('POST','/api/workflows/import-batch',json={'files':[{'source_path':chosen['source_path'],'workflow_json':graph}]})
+ (OUT/'import.json').write_text(json.dumps(imported,ensure_ascii=False,indent=2))
+ rows = request('GET','/api/workflows')
+ assert len(rows) == 1
+ wf = rows[0]
+ wid = wf['id']
+ outputs = wf.get('output_map') or [{'nodeId':o['nodeId'],'kind':o.get('kind') or 'image'} for o in wf['output_schema'] if o.get('kind') in ('image','video')]
+ assert outputs, wf
+ wf = request('PATCH',f'/api/workflows/{wid}',json={'usage':wf.get('usage') or 'text2image','usage_source':'user','output_map':outputs,'output_map_source':'user','endpoint_id':endpoint['id'],'is_enabled':True})
+ fake.forced_output_node = outputs[0]['nodeId']
+ fake.outputs_key = 'videos' if outputs[0]['kind']=='video' else 'images'
+ fake.out_name = 'hel730-isolated.png'
+ fake.object_info = {n['class_type']:{'input':{'required':{},'optional':{}},'output':[]} for n in wf['workflow_json'].values() if isinstance(n,dict) and n.get('class_type')}
+ check = request('POST',f'/api/workflows/{wid}/check',json={'endpoint_id':endpoint['id'],'refresh':True})
+ values = {i['nodeId']:i.get('defaultValue','HEL-730 fake-service verification') for i in wf['input_schema'] if i['kind'] in ('text','textarea','number','select')}
+ result = request('POST',f'/api/workflows/{wid}/test',json={'input_values':values})
+ jobid = result['job']['id']
+ deadline = time.monotonic()+30
+ while True:
+ job = request('GET',f'/api/jobs/{jobid}')
+ if job['status'] not in ('pending','running'): break
+ assert time.monotonic()
- {@render numberField(s, {
- key: "agent_history_char_budget",
- labelKey: "settings.historyBudgetField",
- step: "1000",
- })}
-
+
+
+
+
+
+
-
-
+
+
- {#each HISTORY_BUDGET_PRESETS as preset (preset.value)}
-
- {/each}
+
+
+
+ {#if $settingsQuery.isLoading}
+
-
-
-
-
-
+
+ 界面语言 规则说明
++ 正在读取设置… +
{:else if $settingsQuery.isError}+ 设置加载失败 +
{:else if $settingsQuery.data}{@const s = $settingsQuery.data} +任务队列 规则说明
+
+ {#each QUEUE_FIELDS.filter((f) => f.key === "queue_concurrency" || f.key === "queue_poll_timeout_sec") as f}
-
+
+
-
+ (draft[f.key] = e.currentTarget.value)}
+ onblur={(e) => clampOnBlur(e, f.key)}
+ />
{t("settings.historyBudgetHint")}
-{t("settings.hardeningSection")}
-- {t("settings.hardeningLead")} - {t("settings.hardeningCalloutStrong")}{t( - "settings.hardeningCalloutBody", - )} -
-动效强度
+ ++ 系统开启“减少动态效果”时自动关闭；主题切换保留当前编辑内容。 +
+Dry-run 测试用
+
+ 只写占位文件，不调用 ComfyUI (draft.dry_run = next)}
+ />
+
+ 存储路径 规则说明
+ (draft.data_dir = e.currentTarget.value)} + /> +
+
高级设置 · 队列 / 存储 / 智能体
+
+
+
+
+
-
-
-
队列高级选项
+ {#each QUEUE_FIELDS.filter((f) => f.key !== "queue_concurrency" && f.key !== "queue_poll_timeout_sec") as f}{@render numberField( + s, + f, + )}{/each} +素材与工作目录
+ - -{t("settings.hardeningHint")}
- -
-
-
-
-
- {/if}
+
+
+
+
+
+
+
+
+
+
+
{/if}
-
+
+
+ (draft.agent_shell_enabled = next)}
- />
-
- {t("settings.shellSection")}
-{t("settings.shellLead")}
+保存新路径不会迁移已有文件。
+ +{t("settings.agentRunSection")}
+{t("settings.agentRunLead")}
+
+ {@render numberField(s, {
+ key: "agent_max_steps",
+ labelKey: "settings.agentMaxStepsField",
+ hintKey: "settings.agentMaxStepsHint",
+ step: "1",
+ })}
+
-
+ {@render numberField(s, {
+ key: "agent_history_char_budget",
+ labelKey: "settings.historyBudgetField",
+ step: "1000",
+ })}
+
+ {#each HISTORY_BUDGET_PRESETS as preset (preset.value)}
+
+ {/each}
+
+
-
- - {t("settings.shellCalloutStrong")} - {t("settings.shellCalloutBody")} -
-{t("settings.shellHint")}
- +{t("settings.historyBudgetHint")}
+ -{t("settings.storageSection")}
-{t("settings.storageLead")}
-
-
-
-
-
- - {t("settings.storageCalloutStrong")} - {t("settings.storageCalloutBody")} -
-{t("settings.hardeningSection")}
++ {t("settings.hardeningLead")} + {t("settings.hardeningCalloutStrong")}{t( + "settings.hardeningCalloutBody", + )} +
+
+ (draft.agent_shell_enabled = next)}
+ />
+
+
+
+ {t("settings.shellSection")}
+{t("settings.shellLead")}
+
+
+ + {t("settings.shellCalloutStrong")} + {t("settings.shellCalloutBody")} +
+{t("settings.shellHint")}
+
-
-
- {#if !shown.length}
-
-
-
- {:else}
- {search || filter !== 'all' ? t('tasks.emptyFiltered') : t('tasks.empty')}
- {t('tasks.goGenerate')} -
- {#each shown as job (job.id)}
- {@const st = jobStatusInfo(job)}
- {@const progress = rowProgress(job)}
-
- {/if}
-
-
-
- {/each}
-
- {#if job.output_paths?.[0]}
- {#if job.kind === 'image'}
- })
job.output_paths[0] && markOutputMissing(job.output_paths[0])}
- />
- {:else}
-
- {/if}
- {/if}
-
-
-
-
- {#if isWorkflowTestJob(job)}{t('tasks.testBadge')}{/if}
- {wfName(job)}
- {#if job.workflow_id == null}{t('studio.wfDeletedTag')}{/if}
-
-
- {#if job.status === 'failed' && job.error}
- {job.error}
- {:else if st.tone === 'fail' || (job.status === 'done' && job.phase === 'dry_run')}
- {st.detail}
- {:else if st.tone === 'ok' && isFileMissing(job)}
- {t('jobst.missingDetail')}
- {/if}
-
- {#if job.output_paths?.length}
-
- {labelOf(job, st)}
-
- {#if (st.tone === 'fail' || (st.tone === 'ok' && isFileMissing(job))) && job.error !== 'cancelled'}
-
- {/if}
- {#if job.status === 'pending' || job.status === 'running'}
-
- {/if}
- {#if job.output_paths?.length}
-
- {t('tasks.download')}
-
- {/if}
- {#if isStandaloneJob(job) && job.status !== 'pending' && job.status !== 'running'}
-
- {/if}
-
- {#if progress > 0}
-
- {/if}
-
- {#each job.output_paths.slice(0, 4) as p (p)}
-
- {#if job.kind === 'image'}
- })
- {:else}
-
- {/if}
-
- {/each}
-
- {/if}
-
+ {#each [["all", "全部"], ["active", "进行中"], ["failed", "失败"], ["image", "图片"], ["video", "视频"]] as [value, label]}{/each}
+
{/snippet}
+ {#snippet actions()}{/snippet}
+
+
+
+
+
+
+
+
+
+ {#if $jobsQuery.isLoading}
+ | 任务 / 工作流 | 来源 | 进度 | 时间 |
|---|---|---|---|
| {projectOf(job) || jobSourceLabel(job)} | {labelOf(job, st)}{#if job.status === "running" && progressFor(job.id)?.progress != null}{progressFor(job.id)?.progress}%{/if} | {timeOf(job)} |
+ 正在读取任务… +
{:else if $jobsQuery.isError}+ 任务加载失败 +
{:else if !shown.length}
+
{/if}
+ + {search || filter !== "all" + ? t("tasks.emptyFiltered") + : t("tasks.empty")} +
+ 前往创作台 +
-
-
-
- {#if $meta.isLoading}
-
-
-
- YOUR CREATIVE MATERIALS
- 工作流目录
-按用途挑选工具，未完成配置的工作流先到管理页核对。
-正在打开工具目录…
{:else if $meta.isError}- 工具目录没有加载出来。 -
{:else if manage} -
- r.needs_mapping).length}
- selectedId={null}
- bind:activeId
- endpoints={$config.data?.comfyui_endpoints ?? []}
- onPick={pick}
- onClose={() => {}}
- />
-
{/if}
-