From 8e84e4c21f22febe7bd4f20777d06fa1d4914e8e Mon Sep 17 00:00:00 2001
From: leefer <hello@shengshentech.com>
Date: Wed, 21 Oct 2026 20:13:03 +0800
Subject: [PATCH] feat(HEL-728): establish approved themes and compatible
 studio navigation

Co-authored-by: multica-agent <github@multica.ai>
---
 calliope-web/src/app.html                     |   47 +-
 .../src/lib/components/shell/AppShell.svelte  | 1168 ++++++------
 .../components/shell/CommandPalette.svelte    |  412 +++--
 .../lib/components/shell/ThemeChoices.svelte  |  189 ++
 calliope-web/src/lib/components/shell/nav.ts  |  237 +--
 calliope-web/src/lib/theme.ts                 |   68 +
 calliope-web/src/routes/+layout.svelte        |   28 +-
 calliope-web/src/routes/app.css               | 1478 +++++++--------
 calliope-web/src/routes/create/+page.ts       |    9 +
 .../src/routes/model-connections/+page.ts     |    9 +
 calliope-web/src/routes/project/[id]/+page.ts |   11 +-
 calliope-web/src/routes/projects/+page.ts     |    6 +-
 calliope-web/src/routes/settings/+page.svelte | 1542 +++++++++-------
 calliope-web/static/themes.css                |  547 ++++++
 design/nocturne/design-spec-v1.md             |  140 ++
 design/nocturne/design-spec-v2.md             |  105 ++
 design/nocturne/reference.html                | 1640 +++++++++++++++++
 docs/hel-728/backup-hashes.txt                |    5 +
 docs/hel-728/baseline-browser.log             |   31 +
 docs/hel-728/baseline-lint.log                |   74 +
 docs/hel-728/baseline-pytest.log              |  413 +++++
 docs/hel-728/baseline.md                      |   33 +
 docs/hel-728/browser-results.json             |   49 +
 docs/hel-728/build.log                        |  264 +++
 docs/hel-728/changed-prettier.log             |    2 +
 docs/hel-728/check.log                        |   21 +
 docs/hel-728/eslint.log                       |   15 +
 docs/hel-728/frontend-test.log                |   51 +
 docs/hel-728/implementation.md                |   13 +
 docs/hel-728/legacy-browser.log               |   48 +
 docs/hel-728/lint.log                         |   69 +
 docs/hel-728/pytest.log                       |  442 +++++
 docs/hel-728/server-audit.txt                 |  201 ++
 docs/hel-728/server-backend.txt               |   79 +
 docs/hel-728/theme-browser.log                |   49 +
 docs/hel-728/validation.md                    |   47 +
 e2e/hel728.cjs                                |  397 ++++
 e2e/run-hel728.py                             |   43 +
 38 files changed, 7567 insertions(+), 2415 deletions(-)
 create mode 100644 calliope-web/src/lib/components/shell/ThemeChoices.svelte
 create mode 100644 calliope-web/src/lib/theme.ts
 create mode 100644 calliope-web/src/routes/create/+page.ts
 create mode 100644 calliope-web/src/routes/model-connections/+page.ts
 create mode 100644 calliope-web/static/themes.css
 create mode 100644 design/nocturne/design-spec-v1.md
 create mode 100644 design/nocturne/design-spec-v2.md
 create mode 100644 design/nocturne/reference.html
 create mode 100644 docs/hel-728/backup-hashes.txt
 create mode 100644 docs/hel-728/baseline-browser.log
 create mode 100644 docs/hel-728/baseline-lint.log
 create mode 100644 docs/hel-728/baseline-pytest.log
 create mode 100644 docs/hel-728/baseline.md
 create mode 100644 docs/hel-728/browser-results.json
 create mode 100644 docs/hel-728/build.log
 create mode 100644 docs/hel-728/changed-prettier.log
 create mode 100644 docs/hel-728/check.log
 create mode 100644 docs/hel-728/eslint.log
 create mode 100644 docs/hel-728/frontend-test.log
 create mode 100644 docs/hel-728/implementation.md
 create mode 100644 docs/hel-728/legacy-browser.log
 create mode 100644 docs/hel-728/lint.log
 create mode 100644 docs/hel-728/pytest.log
 create mode 100644 docs/hel-728/server-audit.txt
 create mode 100644 docs/hel-728/server-backend.txt
 create mode 100644 docs/hel-728/theme-browser.log
 create mode 100644 docs/hel-728/validation.md
 create mode 100644 e2e/hel728.cjs
 create mode 100644 e2e/run-hel728.py

diff --git a/calliope-web/src/app.html b/calliope-web/src/app.html
index 124c4539..02629c38 100644
--- a/calliope-web/src/app.html
+++ b/calliope-web/src/app.html
@@ -1,19 +1,30 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>影工坊</title>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap"
-			rel="stylesheet"
-		/>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      (function () {
+        var saved;
+        try {
+          saved = localStorage.getItem("aigc-theme");
+        } catch (_) {}
+        document.documentElement.dataset.theme =
+          /^(night|day|grade|bluehour)$/.test(saved || "") ? saved : "night";
+      })();
+    </script>
+    <link rel="stylesheet" href="%sveltekit.assets%/themes.css" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>影工坊</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/calliope-web/src/lib/components/shell/AppShell.svelte b/calliope-web/src/lib/components/shell/AppShell.svelte
index 024cbcdc..6ee60a51 100644
--- a/calliope-web/src/lib/components/shell/AppShell.svelte
+++ b/calliope-web/src/lib/components/shell/AppShell.svelte
@@ -1,586 +1,626 @@
 <script lang="ts">
-	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';
-	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import Switch from '$lib/components/ui/Switch.svelte';
-	import { settings, jobsApi, comfy } from '$lib/api';
-	import { t } from '$lib/i18n.svelte';
-	import { reduceMotion, setReduceMotion } from '$lib/reduceMotion.svelte';
-	import CommandPalette from './CommandPalette.svelte';
-	import ProjectScope from './ProjectScope.svelte';
-	import QueueTray from './QueueTray.svelte';
-	import type { NavId } from './nav';
+  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";
+  import LanguageSwitcher from "$lib/components/LanguageSwitcher.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import Switch from "$lib/components/ui/Switch.svelte";
+  import { settings, jobsApi, comfy } from "$lib/api";
+  import { t } from "$lib/i18n.svelte";
+  import { reduceMotion, setReduceMotion } from "$lib/reduceMotion.svelte";
+  import CommandPalette from "./CommandPalette.svelte";
+  import ProjectScope from "./ProjectScope.svelte";
+  import QueueTray from "./QueueTray.svelte";
+  import { NAV_MAIN, NAV_MANAGE, type NavId } from "./nav";
+  import { storageGet, storageSet } from "$lib/storage";
+  import Modal from "$lib/components/ui/Modal.svelte";
+  import ThemeChoices from "./ThemeChoices.svelte";
 
-	/** Desktop studio shell: six named sections, project scope, search,
-	 * real queue and connection status. Individual tools keep their routes. */
-	interface Props {
-		workspace?: boolean;
-		active: NavId;
-		title: string;
-		subtitle?: string;
-		/** Page-level actions rendered in the top bar (chips / buttons). */
-		actions?: import('svelte').Snippet;
-		children?: import('svelte').Snippet;
-	}
+  /** Desktop studio shell: six named sections, project scope, search,
+   * real queue and connection status. Individual tools keep their routes. */
+  interface Props {
+    workspace?: boolean;
+    active: NavId;
+    title: string;
+    subtitle?: string;
+    /** Page-level actions rendered in the top bar (chips / buttons). */
+    actions?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+  }
 
-	let { title, actions, children, workspace = false }: Props = $props();
+  let { title, actions, children, workspace = false }: Props = $props();
 
-	let paletteOpen = $state(false);
+  let paletteOpen = $state(false);
 
-	// Real ComfyUI connections from settings — shown honestly without a
-	// fake "connected" claim; tested state lives on /connections (a6).
-	const settingsQuery = createQuery({
-		queryKey: ['settings'],
-		queryFn: settings.get,
-		staleTime: 60_000,
-	});
+  // Real ComfyUI connections from settings — shown honestly without a
+  // fake "connected" claim; tested state lives on /connections (a6).
+  const settingsQuery = createQuery({
+    queryKey: ["settings"],
+    queryFn: settings.get,
+    staleTime: 60_000,
+  });
 
-	// Queue capsule / tray: the same image + video jobs the task page lists.
-	// Polled lightly; SSE-driven pages keep their own faster cadence.
-	const activeJobsQuery = createQuery({
-		queryKey: ['jobs', 'active-count'],
-		queryFn: () => jobsApi.list(),
-		refetchInterval: 8_000,
-		staleTime: 5_000,
-	});
-	const genJobs = $derived(
-		($activeJobsQuery.data ?? []).filter(
-			(j) => j.kind === 'image' || j.kind === 'video',
-		),
-	);
-	const activeJobs = $derived(
-		genJobs.filter((j) => j.status === 'pending' || j.status === 'running')
-			.length,
-	);
+  // Queue capsule / tray: the same image + video jobs the task page lists.
+  // Polled lightly; SSE-driven pages keep their own faster cadence.
+  const activeJobsQuery = createQuery({
+    queryKey: ["jobs", "active-count"],
+    queryFn: () => jobsApi.list(),
+    refetchInterval: 8_000,
+    staleTime: 5_000,
+  });
+  const genJobs = $derived(
+    ($activeJobsQuery.data ?? []).filter(
+      (j) => j.kind === "image" || j.kind === "video",
+    ),
+  );
+  const activeJobs = $derived(
+    genJobs.filter((j) => j.status === "pending" || j.status === "running")
+      .length,
+  );
 
-	// The ACTIVE ComfyUI connection (HEL-611). Its status dot comes from a
-	// real server-side probe (GET /system_stats from the workbench server,
-	// §3) — cyan only when that probe passes.
-	const activeEndpoint = $derived.by(() => {
-		const s = $settingsQuery.data;
-		if (!s) return null;
-		return (
-			s.comfyui_endpoints?.find((ep) => ep.id === s.comfyui_active_id) ?? null
-		);
-	});
+  // The ACTIVE ComfyUI connection (HEL-611). Its status dot comes from a
+  // real server-side probe (GET /system_stats from the workbench server,
+  // §3) — cyan only when that probe passes.
+  const activeEndpoint = $derived.by(() => {
+    const s = $settingsQuery.data;
+    if (!s) return null;
+    return (
+      s.comfyui_endpoints?.find((ep) => ep.id === s.comfyui_active_id) ?? null
+    );
+  });
 
-	const comfyUrl = $derived.by(() => {
-		const raw = (
-			activeEndpoint?.base_url ??
-			$settingsQuery.data?.comfyui_base_url ??
-			''
-		).trim();
-		if (!raw) return '';
-		try {
-			const u = new URL(raw.includes('://') ? raw : `http://${raw}`);
-			return u.host;
-		} catch {
-			return raw;
-		}
-	});
+  const comfyUrl = $derived.by(() => {
+    const raw = (
+      activeEndpoint?.base_url ??
+      $settingsQuery.data?.comfyui_base_url ??
+      ""
+    ).trim();
+    if (!raw) return "";
+    try {
+      const u = new URL(raw.includes("://") ? raw : `http://${raw}`);
+      return u.host;
+    } catch {
+      return raw;
+    }
+  });
 
-	const activeId = $derived(activeEndpoint?.id ?? null);
-	const probeQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['comfy-probe', activeId],
-			queryFn: () =>
-				comfy.testEndpoint({
-					endpoint_id: activeId ?? undefined,
-					timeout_sec: 5,
-				}),
-			enabled: activeId != null,
-			staleTime: 60_000,
-			refetchInterval: 60_000,
-			retry: false,
-		})),
-	);
-	const probeState = $derived.by<'unset' | 'testing' | 'ok' | 'fail'>(() => {
-		if (!activeEndpoint) return 'unset';
-		if ($probeQuery.isPending) return 'testing';
-		if ($probeQuery.isError) return 'fail';
-		return $probeQuery.data?.ok ? 'ok' : 'fail';
-	});
-	const endpointName = $derived(activeEndpoint?.name?.trim() || 'ComfyUI');
-	const latencyMs = $derived(
-		probeState === 'ok' && $probeQuery.data?.elapsed_ms != null
-			? Math.round($probeQuery.data.elapsed_ms)
-			: null,
-	);
-	const connDetail = $derived.by(() => {
-		if (probeState === 'unset') return t('shell.comfyUnset');
-		const state = t(`shell.comfy_${probeState}`, { name: endpointName });
-		if (probeState === 'fail' && $probeQuery.data?.message)
-			return `${state}：${$probeQuery.data.message}`;
-		return comfyUrl ? `${state} · ${comfyUrl}` : state;
-	});
-	const connDot = $derived(
-		probeState === 'ok' || probeState === 'testing'
-			? 'run'
-			: probeState === 'fail'
-				? 'fail'
-				: 'idle',
-	);
+  const activeId = $derived(activeEndpoint?.id ?? null);
+  const probeQuery = createQuery(
+    toStore(() => ({
+      queryKey: ["comfy-probe", activeId],
+      queryFn: () =>
+        comfy.testEndpoint({
+          endpoint_id: activeId ?? undefined,
+          timeout_sec: 5,
+        }),
+      enabled: activeId != null,
+      staleTime: 60_000,
+      refetchInterval: 60_000,
+      retry: false,
+    })),
+  );
+  const probeState = $derived.by<"unset" | "testing" | "ok" | "fail">(() => {
+    if (!activeEndpoint) return "unset";
+    if ($probeQuery.isPending) return "testing";
+    if ($probeQuery.isError) return "fail";
+    return $probeQuery.data?.ok ? "ok" : "fail";
+  });
+  const endpointName = $derived(activeEndpoint?.name?.trim() || "ComfyUI");
+  const latencyMs = $derived(
+    probeState === "ok" && $probeQuery.data?.elapsed_ms != null
+      ? Math.round($probeQuery.data.elapsed_ms)
+      : null,
+  );
+  const connDetail = $derived.by(() => {
+    if (probeState === "unset") return t("shell.comfyUnset");
+    const state = t(`shell.comfy_${probeState}`, { name: endpointName });
+    if (probeState === "fail" && $probeQuery.data?.message)
+      return `${state}：${$probeQuery.data.message}`;
+    return comfyUrl ? `${state} · ${comfyUrl}` : state;
+  });
+  const connDot = $derived(
+    probeState === "ok" || probeState === "testing"
+      ? "run"
+      : probeState === "fail"
+        ? "fail"
+        : "idle",
+  );
 
-	// 范围胶囊: the project a page belongs to, read from its URL.
-	const scopeProjectId = $derived.by(() => {
-		const m = page.url.pathname.match(/^\/(?:workbench|project)\/(\d+)/);
-		return m ? Number(m[1]) : null;
-	});
+  // 范围胶囊: the project a page belongs to, read from its URL.
+  const scopeProjectId = $derived.by(() => {
+    const m = page.url.pathname.match(/^\/(?:workbench|project)\/(\d+)/);
+    return m ? Number(m[1]) : null;
+  });
 
-	function openPalette() {
-		paletteOpen = true;
-	}
+  function openPalette() {
+    paletteOpen = true;
+  }
 
-	function handleGlobalKeydown(event: KeyboardEvent) {
-		if (
-			(event.ctrlKey || event.metaKey) &&
-			!event.altKey &&
-			event.key.toLowerCase() === 'k'
-		) {
-			event.preventDefault();
-			paletteOpen = !paletteOpen;
-		}
-	}
+  function handleGlobalKeydown(event: KeyboardEvent) {
+    if (
+      (event.ctrlKey || event.metaKey) &&
+      !event.altKey &&
+      event.key.toLowerCase() === "k"
+    ) {
+      event.preventDefault();
+      paletteOpen = !paletteOpen;
+    }
+  }
 
-	const mainNav = [
-		{
-			href: '/',
-			label: '工作室',
-			icon: 'home',
-			match: (p: string) => p === '/',
-		},
-		{
-			href: '/workbench',
-			label: '我的项目',
-			icon: 'folder',
-			match: (p: string) => /^\/(workbench|project)/.test(p),
-		},
-		{
-			href: '/image',
-			label: '创作台',
-			icon: 'image',
-			match: (p: string) =>
-				['/image', '/video', '/playground', '/build-scene'].includes(p),
-		},
-		{
-			href: '/canvas',
-			label: '画布',
-			icon: 'story',
-			match: (p: string) => p.startsWith('/canvas'),
-		},
-		{
-			href: '/library',
-			label: '素材库',
-			icon: 'assets',
-			match: (p: string) => p === '/library',
-		},
-		{
-			href: '/workflows',
-			label: '工作流',
-			icon: 'folder',
-			match: (p: string) => p === '/workflows',
-		},
-		{
-			href: '/agents',
-			label: '智能体',
-			icon: 'sparkle',
-			match: (p: string) => p === '/agents',
-		},
-	] as const;
-	let focus = $state(false);
-	let expanded = $state(false);
-	function toggleNavigation() {
-		expanded = !expanded;
-		localStorage.setItem('calliope.reference.navigation', String(expanded));
-	}
-	onMount(() => {
-		expanded = localStorage.getItem('calliope.reference.navigation') === 'true';
-		const listener = (e: Event) => {
-			focus = (e as CustomEvent<boolean>).detail;
-		};
-		window.addEventListener('refract-focus', listener);
-		return () => window.removeEventListener('refract-focus', listener);
-	});
+  const mainNav = NAV_MAIN;
+  const currentNav = $derived(
+    [...NAV_MAIN, ...NAV_MANAGE].find((item) =>
+      item.matches(page.url.pathname),
+    ),
+  );
+  const scene = $derived(
+    page.url.pathname === "/video" ? "video" : (currentNav?.scene ?? "manage"),
+  );
+  let themeOpen = $state(false);
+  let focus = $state(false);
+  let expanded = $state(false);
+  function toggleNavigation() {
+    expanded = !expanded;
+    storageSet("calliope.reference.navigation", String(expanded));
+  }
+  onMount(() => {
+    expanded = storageGet("calliope.reference.navigation") === "true";
+    const listener = (e: Event) => {
+      focus = (e as CustomEvent<boolean>).detail;
+    };
+    window.addEventListener("refract-focus", listener);
+    return () => window.removeEventListener("refract-focus", listener);
+  });
 </script>
 
-<svelte:head
-	><title>{title} · AIGC工作台</title><meta
-		name="color-scheme"
-		content="dark"
-	/></svelte:head
->
+<svelte:head><title>{title} · AIGC工作台</title></svelte:head>
 <svelte:window onkeydown={handleGlobalKeydown} />
-<div class="refract-shell" class:focus class:expanded>
-	<aside class="sidebar" aria-label="全站导航">
-		<a class="brand" href="/" aria-label="返回工作室"
-			>AIGC{#if expanded}<small>创作工作台</small>{/if}</a
-		>
-		<nav aria-label="主要导航">
-			{#each mainNav as item}<a
-					class="nav-item reference-option"
-					use:spotlight
-					href={item.href}
-					aria-current={item.match(page.url.pathname) ? 'page' : undefined}
-					title={item.label}
-					><Icon name={item.icon} size={20} /><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="nav-item reference-option"
-				use:spotlight
-				href="/tasks"
-				title="生成任务"
-				><Icon name="clock" size={18} /><span
-					>任务{#if activeJobs > 0}<b>{activeJobs}</b>{/if}</span
-				></a
-			>
-			<a
-				class="nav-item reference-option"
-				use:spotlight
-				href="/models"
-				title="模型与接口"><Icon name="link" size={18} /><span>模型</span></a
-			>
-			<a
-				class="nav-item reference-option"
-				use:spotlight
-				href="/settings"
-				title="设置"><Icon name="settings" size={18} /><span>设置</span></a
-			>
-			<a
-				class="connection"
-				href="/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
-			>
-		</div>
-	</aside>
-	<div class="app-body">
-		<header class="topbar">
-			<div class="breadcrumb">
-				{mainNav.find((n) => n.match(page.url.pathname))?.label ?? title}<span
-					>/</span
-				><span class="page-name">{title}</span>
-			</div>
-			<div class="grow"></div>
-			{#if scopeProjectId}<ProjectScope
-					projectId={scopeProjectId}
-					onProjectsList={false}
-				/>{/if}
-			{#if actions}<div class="topbar-actions">{@render actions()}</div>{/if}
-			<button
-				class="search-trigger"
-				onclick={openPalette}
-				aria-label={t('shell.searchTitle')}
-				aria-keyshortcuts="Control+K Meta+K"
-				><Icon name="search" size={16} /><span>搜索</span><kbd>Ctrl K</kbd
-				></button
-			>
-			<label class="motion"
-				><Switch
-					checked={reduceMotion.system || reduceMotion.manual}
-					disabled={reduceMotion.system}
-					label={t('shell.reduceMotion')}
-					onchange={setReduceMotion}
-				/><span>减少动效</span></label
-			>
-			<LanguageSwitcher /><QueueTray jobs={genJobs} />
-		</header>
-		<div class="body" class:bounded={workspace}>{@render children?.()}</div>
-	</div>
+<div
+  class="refract-shell"
+  class:focus
+  class:expanded
+  style:--scene={`var(--sc-${scene})`}
+>
+  <aside class="sidebar" aria-label="全站导航">
+    <a class="brand" href="/" aria-label="返回工作室"
+      >AIGC{#if expanded}<small>创作工作台</small>{/if}</a
+    >
+    <nav aria-label="主要导航">
+      {#each mainNav as item}<a
+          class="nav-item reference-option"
+          use:spotlight
+          href={item.href}
+          style:--nav-c={`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
+        >{/each}
+    </nav>
+    <nav class="management" aria-label="管理导航">
+      {#each NAV_MANAGE as item}<a
+          class="nav-item reference-option"
+          use:spotlight
+          href={item.href}
+          style:--nav-c={`var(--sc-${item.scene})`}
+          aria-current={item.matches(page.url.pathname) ? "page" : undefined}
+          title={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
+      >
+      <button
+        class="nav-item reference-option"
+        use:spotlight
+        onclick={() => (themeOpen = true)}
+        aria-haspopup="dialog"
+        aria-expanded={themeOpen}
+        title="主题"
+        ><span class="theme-dot" aria-hidden="true"></span><span>主题</span
+        ></button
+      >
+      <a
+        class="nav-item reference-option"
+        use:spotlight
+        href="/settings"
+        aria-current={page.url.pathname === "/settings" ? "page" : undefined}
+        title="设置"><Icon name="settings" size={18} /><span>设置</span></a
+      >
+      <a
+        class="connection"
+        href="/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
+      >
+    </div>
+  </aside>
+  <div class="app-body">
+    <header class="topbar">
+      <div class="breadcrumb">
+        {currentNav?.label ?? title}<span>/</span><span class="page-name"
+          >{title}</span
+        >
+      </div>
+      <div class="grow"></div>
+      {#if currentNav?.id === "connections"}
+        <a
+          class="a-btn secondary sm"
+          href="/connections"
+          aria-current={page.url.pathname === "/connections"
+            ? "page"
+            : undefined}>ComfyUI 连接</a
+        >
+        <a
+          class="a-btn secondary sm"
+          href="/models"
+          aria-current={page.url.pathname === "/models" ? "page" : undefined}
+          >大语言模型</a
+        >
+      {/if}
+      {#if scopeProjectId}<ProjectScope
+          projectId={scopeProjectId}
+          onProjectsList={false}
+        />{/if}
+      {#if actions}<div class="topbar-actions">{@render actions()}</div>{/if}
+      <button
+        class="search-trigger"
+        onclick={openPalette}
+        aria-label={t("shell.searchTitle")}
+        aria-keyshortcuts="Control+K Meta+K"
+        ><Icon name="search" size={16} /><span>搜索</span><kbd>Ctrl K</kbd
+        ></button
+      >
+      <label class="motion"
+        ><Switch
+          checked={reduceMotion.system || reduceMotion.manual}
+          disabled={reduceMotion.system}
+          label={t("shell.reduceMotion")}
+          onchange={setReduceMotion}
+        /><span>减少动效</span></label
+      >
+      <LanguageSwitcher /><QueueTray jobs={genJobs} />
+    </header>
+    <div class="body" class:bounded={workspace}>{@render children?.()}</div>
+  </div>
 </div>
 <CommandPalette bind:open={paletteOpen} />
+<Modal bind:open={themeOpen} title="外观主题">
+  <ThemeChoices compact />
+  <label class="theme-motion"
+    ><Switch
+      checked={reduceMotion.system || reduceMotion.manual}
+      disabled={reduceMotion.system}
+      label={t("shell.reduceMotion")}
+      onchange={setReduceMotion}
+    /><span>减少动效</span></label
+  >
+</Modal>
 
 <style>
-	.refract-shell {
-		position: fixed;
-		inset: 0;
-		display: grid;
-		grid-template-columns: 68px minmax(0, 1fr);
-		background: var(--bg);
-		color: var(--text);
-		min-width: 0;
-	}
-	.refract-shell.expanded {
-		grid-template-columns: 174px minmax(0, 1fr);
-	}
-	.sidebar {
-		background: linear-gradient(#141419, #0f0f12);
-		border-right: 1px solid var(--line);
-		padding: 16px 8px 9px;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		overflow: auto;
-		scrollbar-width: thin;
-	}
-	.brand {
-		font-size: 19px;
-		font-weight: 800;
-		color: var(--accent);
-		text-align: center;
-		text-decoration: none;
-		letter-spacing: -1px;
-		display: block;
-		margin: 2px 0 18px;
-		text-shadow: 0 0 20px #00cae044;
-	}
-	.brand small {
-		display: block;
-		font-size: 10px;
-		letter-spacing: 1px;
-		color: var(--text-3);
-		font-weight: 400;
-		margin-top: 4px;
-	}
-	.sidebar nav {
-		display: flex;
-		flex-direction: column;
-		gap: 7px;
-	}
-	.nav-item {
-		min-height: 50px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		gap: 5px;
-		font-size: 10px;
-		padding: 9px 3px;
-		color: #90949b;
-		text-decoration: none;
-		border: 0;
-		background: none;
-		border-radius: 11px;
-		cursor: pointer;
-		font-family: inherit;
-		transition:
-			background-color 180ms ease,
-			color 180ms ease,
-			transform 160ms var(--ease-out);
-		flex-shrink: 0;
-	}
-	.nav-item[aria-current='page'] {
-		color: var(--accent);
-		background: #00cae01d;
-	}
-	.nav-item[aria-current='page']::before {
-		content: '';
-		position: absolute;
-		bottom: 5px;
-		width: 18px;
-		height: 2px;
-		border-radius: 3px;
-		background: var(--accent);
-	}
-	.nav-item:active {
-		transform: scale(var(--press-scale));
-	}
-	.nav-item b {
-		font-size: 9px;
-		color: var(--accent);
-		margin-left: 3px;
-	}
-	.expanded .nav-item {
-		flex-direction: row;
-		justify-content: flex-start;
-		gap: 12px;
-		font-size: 12px;
-		padding: 10px 14px;
-		min-height: 43px;
-	}
-	.expanded .nav-item::before {
-		display: none;
-	}
-	.sidebar-bottom {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		margin-top: auto;
-		padding-top: 18px;
-	}
-	.sidebar-bottom .nav-item {
-		min-height: 45px;
-		font-size: 9px;
-		padding: 7px 3px;
-		gap: 4px;
-	}
-	.expanded .sidebar-bottom .nav-item {
-		min-height: 39px;
-		padding: 9px 14px;
-		font-size: 12px;
-	}
-	.connection {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 8px;
-		padding: 8px;
-		color: var(--text-3);
-		font-size: 10px;
-		text-decoration: none;
-	}
-	.app-body {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		min-width: 0;
-	}
-	.topbar {
-		height: 52px;
-		flex-shrink: 0;
-		background: #141419;
-		border-bottom: 1px solid var(--line);
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		padding: 0 20px;
-	}
-	.breadcrumb {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		color: var(--text-3);
-		font-size: 11px;
-	}
-	.page-name {
-		color: var(--text-2);
-	}
-	.grow {
-		flex: 1;
-	}
-	.topbar-actions {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-	.search-trigger {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		color: var(--text-3);
-		border: 1px solid var(--line);
-		background: #1b1c21;
-		padding: 6px 10px;
-		border-radius: 7px;
-		font-size: 11px;
-		cursor: pointer;
-	}
-	.search-trigger kbd {
-		font-size: 9px;
-		color: #66717a;
-		margin-left: 8px;
-	}
-	.motion {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 10px;
-		color: var(--text-3);
-	}
-	.body {
-		flex: 1;
-		min-height: 0;
-		overflow: auto;
-	}
-	.body.bounded {
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-	.focus .sidebar,
-	.focus .topbar {
-		display: none;
-	}
-	.refract-shell.focus {
-		grid-template-columns: minmax(0, 1fr);
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.nav-item:hover {
-			background-color: #ffffff09;
-			color: #e0e7f0;
-		}
-		.search-trigger:hover {
-			border-color: var(--line-2);
-		}
-	}
-	@media (max-width: 1150px) {
-		.topbar {
-			gap: 8px;
-			padding: 0 14px;
-		}
-		.search-trigger kbd {
-			display: none;
-		}
-		.breadcrumb .page-name {
-			max-width: 180px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-	@media (max-height: 760px) {
-		.sidebar {
-			padding-top: 11px;
-		}
-		.brand {
-			margin-bottom: 18px;
-		}
-		.nav-item {
-			min-height: 51px;
-		}
-		.sidebar-bottom {
-			gap: 0;
-			padding-top: 12px;
-		}
-		.sidebar-bottom .nav-item {
-			min-height: 37px;
-		}
-	}
+  .management {
+    border-top: 1px solid var(--line-2);
+    margin-top: 8px;
+    padding-top: 8px;
+  }
+  .theme-dot {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: conic-gradient(
+      var(--gold) 0 25%,
+      var(--sc-image) 0 50%,
+      var(--bg-3) 0 75%,
+      var(--tx-1) 0
+    );
+    box-shadow: 0 0 0 1px var(--line-3);
+  }
+  .theme-motion {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 14px;
+    padding-top: 12px;
+    border-top: 1px solid var(--line);
+    font-size: 12px;
+    color: var(--tx-2);
+  }
+  .nav-item[aria-current="page"] :global(svg) {
+    color: var(--nav-c, var(--scene));
+  }
 
-	@media (max-height: 740px) {
-		.sidebar {
-			padding-top: 10px;
-		}
-		.brand {
-			margin-bottom: 12px;
-		}
-		.sidebar nav {
-			gap: 4px;
-		}
-		.nav-item {
-			min-height: 42px;
-			padding: 7px 2px;
-		}
-		.sidebar-bottom {
-			padding-top: 8px;
-		}
-		.sidebar-bottom .nav-item {
-			min-height: 31px;
-			padding: 4px 2px;
-		}
-	}
+  .refract-shell {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    grid-template-columns: var(--rail-w) minmax(0, 1fr);
+    background: var(--bg);
+    color: var(--text);
+    min-width: 0;
+  }
+  .refract-shell.expanded {
+    grid-template-columns: 174px minmax(0, 1fr);
+  }
+  .sidebar {
+    background: var(--bg-1);
+    border-right: 1px solid var(--line);
+    padding: 16px 8px 9px;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+  .brand {
+    font-size: 19px;
+    font-weight: 800;
+    color: var(--gold);
+    text-align: center;
+    text-decoration: none;
+    letter-spacing: -1px;
+    display: block;
+    margin: 2px 0 18px;
+    text-shadow: var(--brand-glow);
+  }
+  .brand small {
+    display: block;
+    font-size: 10px;
+    letter-spacing: 1px;
+    color: var(--text-3);
+    font-weight: 400;
+    margin-top: 4px;
+  }
+  .sidebar nav {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .nav-item {
+    min-height: 44px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+    line-height: 1;
+    padding: 7px 3px;
+    color: var(--tx-3);
+    text-decoration: none;
+    border: 0;
+    background: none;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    font-family: inherit;
+    transition:
+      background-color 180ms ease,
+      color 180ms ease,
+      transform 160ms var(--ease-out);
+    flex-shrink: 0;
+  }
+  .nav-item[aria-current="page"] {
+    color: var(--tx-1);
+    background: linear-gradient(
+      180deg,
+      rgb(var(--ink) / 0.08),
+      rgb(var(--ink) / 0.03)
+    );
+  }
+  .nav-item[aria-current="page"]::before {
+    content: "";
+    position: absolute;
+    left: -2px;
+    top: 12px;
+    bottom: 12px;
+    width: 3px;
+    border-radius: 3px;
+    background: var(--nav-c, var(--scene));
+  }
+  .nav-item:active {
+    transform: scale(var(--press-scale));
+  }
+  .nav-item > span {
+    white-space: nowrap;
+  }
+  .expanded .nav-item {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 12px;
+    font-size: 12px;
+    padding: 10px 14px;
+    min-height: 43px;
+  }
+  .expanded .nav-item::before {
+    display: none;
+  }
+  .sidebar-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin-top: auto;
+    padding-top: 8px;
+  }
+  .sidebar-bottom .nav-item {
+    min-height: 45px;
+    font-size: 9px;
+    padding: 7px 3px;
+    gap: 4px;
+  }
+  .expanded .sidebar-bottom .nav-item {
+    min-height: 39px;
+    padding: 9px 14px;
+    font-size: 12px;
+  }
+  .connection {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px;
+    color: var(--text-3);
+    font-size: 10px;
+    text-decoration: none;
+  }
+  .app-body {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+  }
+  .topbar {
+    height: var(--head);
+    flex-shrink: 0;
+    background: var(--glass);
+    border-bottom: 1px solid var(--line);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 20px;
+  }
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-3);
+    font-size: 11px;
+  }
+  .page-name {
+    color: var(--text-2);
+  }
+  .grow {
+    flex: 1;
+  }
+  .topbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .search-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--text-3);
+    border: 1px solid var(--line);
+    background: var(--bg-3);
+    padding: 6px 10px;
+    border-radius: 7px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+  .search-trigger kbd {
+    font-size: 9px;
+    color: var(--tx-3);
+    margin-left: 8px;
+  }
+  .motion {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 10px;
+    color: var(--text-3);
+  }
+  .body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  .body.bounded {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .focus .sidebar,
+  .focus .topbar {
+    display: none;
+  }
+  .refract-shell.focus {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .nav-item:hover {
+      background-color: rgb(var(--ink) / 0.04);
+      color: var(--tx-1);
+    }
+    .search-trigger:hover {
+      border-color: var(--line-2);
+    }
+  }
+  @media (max-width: 1150px) {
+    .topbar {
+      gap: 8px;
+      padding: 0 14px;
+    }
+    .search-trigger kbd {
+      display: none;
+    }
+    .breadcrumb .page-name {
+      max-width: 180px;
+      overflow: hidden;
+      white-space: nowrap;
+      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/CommandPalette.svelte b/calliope-web/src/lib/components/shell/CommandPalette.svelte
index eaaac0a8..ec4f390f 100644
--- a/calliope-web/src/lib/components/shell/CommandPalette.svelte
+++ b/calliope-web/src/lib/components/shell/CommandPalette.svelte
@@ -1,218 +1,232 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { createQuery } from '@tanstack/svelte-query';
-	import { toStore } from 'svelte/store';
-	import { projects } from '$lib/api';
-	import { t } from '$lib/i18n.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import type { IconName } from '$lib/components/ui/icons';
-	import { NAV } from './nav';
+  import { goto } from "$app/navigation";
+  import { createQuery } from "@tanstack/svelte-query";
+  import { toStore } from "svelte/store";
+  import { projects } from "$lib/api";
+  import { t } from "$lib/i18n.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import Modal from "$lib/components/ui/Modal.svelte";
+  import type { IconName } from "$lib/components/ui/icons";
+  import { NAV } from "./nav";
 
-	/** Ctrl/⌘K 搜索：跳到任一页面或项目（↑↓ 选择，Enter 打开，Esc 关闭）. */
-	let { open = $bindable(false) }: { open?: boolean } = $props();
+  /** Ctrl/⌘K 搜索：跳到任一页面或项目（↑↓ 选择，Enter 打开，Esc 关闭）. */
+  let { open = $bindable(false) }: { open?: boolean } = $props();
 
-	interface Entry {
-		key: string;
-		group: 'pages' | 'projects';
-		label: string;
-		icon: IconName;
-		href: string;
-	}
+  interface Entry {
+    key: string;
+    group: "pages" | "projects";
+    label: string;
+    icon: IconName;
+    href: string;
+  }
 
-	const listId = `palette-${Math.random().toString(36).slice(2, 9)}`;
-	let query = $state('');
-	let activeIndex = $state(0);
-	let list = $state<HTMLDivElement | null>(null);
+  const listId = `palette-${Math.random().toString(36).slice(2, 9)}`;
+  let query = $state("");
+  let activeIndex = $state(0);
+  let list = $state<HTMLDivElement | null>(null);
 
-	const projectsQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['projects'],
-			queryFn: projects.list,
-			enabled: open,
-			staleTime: 30_000,
-		})),
-	);
+  const projectsQuery = createQuery(
+    toStore(() => ({
+      queryKey: ["projects"],
+      queryFn: projects.list,
+      enabled: open,
+      staleTime: 30_000,
+    })),
+  );
 
-	const entries = $derived.by<Entry[]>(() => {
-		const pages: Entry[] = NAV.map((item) => ({
-			key: `page-${item.id}`,
-			group: 'pages',
-			label: t(item.labelKey),
-			icon: item.icon,
-			href: item.href,
-		}));
-		const projectEntries: Entry[] = ($projectsQuery.data ?? []).map((p) => ({
-			key: `project-${p.id}`,
-			group: 'projects',
-			label: p.title,
-			icon: 'story',
-			href: `/workbench/${p.id}`,
-		}));
-		const q = query.trim().toLowerCase();
-		const all = [...pages, ...projectEntries];
-		return q ? all.filter((e) => e.label.toLowerCase().includes(q)) : all;
-	});
+  const entries = $derived.by<Entry[]>(() => {
+    const pages: Entry[] = NAV.map((item) => ({
+      key: `page-${item.href}`,
+      group: "pages",
+      label: item.label,
+      icon: item.icon,
+      href: item.href,
+    }));
+    const projectEntries: Entry[] = ($projectsQuery.data ?? []).map((p) => ({
+      key: `project-${p.id}`,
+      group: "projects",
+      label: p.title,
+      icon: "story",
+      href: `/workbench/${p.id}`,
+    }));
+    const q = query.trim().toLowerCase();
+    const all = [...pages, ...projectEntries];
+    return q ? all.filter((e) => e.label.toLowerCase().includes(q)) : all;
+  });
 
-	$effect(() => {
-		void query;
-		activeIndex = 0;
-	});
+  $effect(() => {
+    void query;
+    activeIndex = 0;
+  });
 
-	$effect(() => {
-		if (!open) query = '';
-	});
+  $effect(() => {
+    if (!open) query = "";
+  });
 
-	function optionId(index: number) {
-		return `${listId}-${index}`;
-	}
+  function optionId(index: number) {
+    return `${listId}-${index}`;
+  }
 
-	function go(entry: Entry) {
-		open = false;
-		void goto(entry.href);
-	}
+  function go(entry: Entry) {
+    open = false;
+    void goto(entry.href);
+  }
 
-	function move(step: number) {
-		if (entries.length === 0) return;
-		activeIndex = (activeIndex + step + entries.length) % entries.length;
-		list?.querySelector(`#${optionId(activeIndex)}`)?.scrollIntoView({ block: 'nearest' });
-	}
+  function move(step: number) {
+    if (entries.length === 0) return;
+    activeIndex = (activeIndex + step + entries.length) % entries.length;
+    list
+      ?.querySelector(`#${optionId(activeIndex)}`)
+      ?.scrollIntoView({ block: "nearest" });
+  }
 
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			move(1);
-		} else if (event.key === 'ArrowUp') {
-			event.preventDefault();
-			move(-1);
-		} else if (event.key === 'Enter') {
-			const entry = entries[activeIndex];
-			if (entry) {
-				event.preventDefault();
-				go(entry);
-			}
-		}
-	}
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Enter") {
+      const entry = entries[activeIndex];
+      if (entry) {
+        event.preventDefault();
+        go(entry);
+      }
+    }
+  }
 
-	function focusOnMount(node: HTMLInputElement) {
-		requestAnimationFrame(() => node.focus());
-	}
+  function focusOnMount(node: HTMLInputElement) {
+    requestAnimationFrame(() => node.focus());
+  }
 </script>
 
-<Modal bind:open title={t('shell.searchTitle')}>
-	<div class="palette">
-		<div class="palette-search">
-			<Icon name="search" size={16} />
-			<input
-				use:focusOnMount
-				class="palette-input"
-				type="text"
-				bind:value={query}
-				placeholder={t('shell.searchPlaceholder')}
-				role="combobox"
-				aria-expanded="true"
-				aria-controls={listId}
-				aria-autocomplete="list"
-				aria-activedescendant={entries.length ? optionId(activeIndex) : undefined}
-				aria-label={t('shell.searchTitle')}
-				onkeydown={handleKeydown}
-			/>
-		</div>
-		<div class="palette-list" id={listId} role="listbox" bind:this={list} aria-label={t('shell.searchTitle')}>
-			{#if entries.length === 0}
-				<p class="palette-empty">{t('shell.searchEmpty', { q: query.trim() })}</p>
-			{/if}
-			{#each entries as entry, i (entry.key)}
-				{#if i === 0 || entries[i - 1].group !== entry.group}
-					<div class="a-menu-group" role="presentation">
-						{entry.group === 'pages' ? t('shell.searchGroupPages') : t('shell.searchGroupProjects')}
-					</div>
-				{/if}
-				<div
-					id={optionId(i)}
-					class="a-menu-item"
-					class:active={i === activeIndex}
-					role="option"
-					tabindex="-1"
-					aria-selected={i === activeIndex}
-					onpointermove={() => (activeIndex = i)}
-					onmousedown={(e) => e.preventDefault()}
-					onclick={() => go(entry)}
-					onkeydown={handleKeydown}
-				>
-					<Icon name={entry.icon} size={15} />
-					<span class="a-menu-label">{entry.label}</span>
-					<span class="a-menu-meta mono">{entry.href}</span>
-				</div>
-			{/each}
-		</div>
-		<p class="palette-hint">
-			<span class="a-kbd">↑↓</span>{t('shell.searchHintMove')}
-			<span class="a-kbd">Enter</span>{t('shell.searchHintOpen')}
-			<span class="a-kbd">Esc</span>{t('shell.searchHintClose')}
-		</p>
-	</div>
+<Modal bind:open title={t("shell.searchTitle")}>
+  <div class="palette">
+    <div class="palette-search">
+      <Icon name="search" size={16} />
+      <input
+        use:focusOnMount
+        class="palette-input"
+        type="text"
+        bind:value={query}
+        placeholder={t("shell.searchPlaceholder")}
+        role="combobox"
+        aria-expanded="true"
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={entries.length
+          ? optionId(activeIndex)
+          : undefined}
+        aria-label={t("shell.searchTitle")}
+        onkeydown={handleKeydown}
+      />
+    </div>
+    <div
+      class="palette-list"
+      id={listId}
+      role="listbox"
+      bind:this={list}
+      aria-label={t("shell.searchTitle")}
+    >
+      {#if entries.length === 0}
+        <p class="palette-empty">
+          {t("shell.searchEmpty", { q: query.trim() })}
+        </p>
+      {/if}
+      {#each entries as entry, i (entry.key)}
+        {#if i === 0 || entries[i - 1].group !== entry.group}
+          <div class="a-menu-group" role="presentation">
+            {entry.group === "pages"
+              ? t("shell.searchGroupPages")
+              : t("shell.searchGroupProjects")}
+          </div>
+        {/if}
+        <div
+          id={optionId(i)}
+          class="a-menu-item"
+          class:active={i === activeIndex}
+          role="option"
+          tabindex="-1"
+          aria-selected={i === activeIndex}
+          onpointermove={() => (activeIndex = i)}
+          onmousedown={(e) => e.preventDefault()}
+          onclick={() => go(entry)}
+          onkeydown={handleKeydown}
+        >
+          <Icon name={entry.icon} size={15} />
+          <span class="a-menu-label">{entry.label}</span>
+          <span class="a-menu-meta mono">{entry.href}</span>
+        </div>
+      {/each}
+    </div>
+    <p class="palette-hint">
+      <span class="a-kbd">↑↓</span>{t("shell.searchHintMove")}
+      <span class="a-kbd">Enter</span>{t("shell.searchHintOpen")}
+      <span class="a-kbd">Esc</span>{t("shell.searchHintClose")}
+    </p>
+  </div>
 </Modal>
 
 <style>
-	.palette {
-		display: flex;
-		flex-direction: column;
-		gap: var(--sp-3);
-	}
-	.palette-search {
-		display: flex;
-		align-items: center;
-		gap: var(--sp-3);
-		padding: 0 var(--sp-5);
-		border: 1px solid var(--line);
-		border-radius: var(--r-md);
-		background: var(--bg-3);
-		color: var(--text-3);
-		transition: border-color var(--d-state) ease;
-	}
-	.palette-search:focus-within {
-		border-color: var(--accent-line);
-	}
-	.palette-input {
-		flex: 1;
-		min-width: 0;
-		height: 40px;
-		border: 0;
-		outline: 0;
-		background: transparent;
-		color: var(--text);
-		font-family: inherit;
-		font-size: var(--fs-section);
-	}
-	.palette-input::placeholder {
-		color: var(--text-3);
-	}
-	.palette-list {
-		max-height: min(360px, 50vh);
-		overflow-y: auto;
-	}
-	.palette-empty {
-		margin: 0;
-		padding: var(--sp-6) var(--sp-4);
-		font-size: var(--fs-aux);
-		color: var(--text-3);
-		text-align: center;
-	}
-	.palette-hint {
-		display: flex;
-		align-items: center;
-		gap: var(--sp-2);
-		margin: 0;
-		font-size: var(--fs-mini);
-		color: var(--text-3);
-	}
-	.palette-hint .a-kbd:not(:first-child) {
-		margin-left: var(--sp-3);
-	}
-	@media (hover: none) {
-		.palette-hint {
-			display: none;
-		}
-	}
+  .palette {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-3);
+  }
+  .palette-search {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3);
+    padding: 0 var(--sp-5);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+    background: var(--bg-3);
+    color: var(--text-3);
+    transition: border-color var(--d-state) ease;
+  }
+  .palette-search:focus-within {
+    border-color: var(--accent-line);
+  }
+  .palette-input {
+    flex: 1;
+    min-width: 0;
+    height: 40px;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--text);
+    font-family: inherit;
+    font-size: var(--fs-section);
+  }
+  .palette-input::placeholder {
+    color: var(--text-3);
+  }
+  .palette-list {
+    max-height: min(360px, 50vh);
+    overflow-y: auto;
+  }
+  .palette-empty {
+    margin: 0;
+    padding: var(--sp-6) var(--sp-4);
+    font-size: var(--fs-aux);
+    color: var(--text-3);
+    text-align: center;
+  }
+  .palette-hint {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-2);
+    margin: 0;
+    font-size: var(--fs-mini);
+    color: var(--text-3);
+  }
+  .palette-hint .a-kbd:not(:first-child) {
+    margin-left: var(--sp-3);
+  }
+  @media (hover: none) {
+    .palette-hint {
+      display: none;
+    }
+  }
 </style>
diff --git a/calliope-web/src/lib/components/shell/ThemeChoices.svelte b/calliope-web/src/lib/components/shell/ThemeChoices.svelte
new file mode 100644
index 00000000..fe2584ea
--- /dev/null
+++ b/calliope-web/src/lib/components/shell/ThemeChoices.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { THEMES, theme, setTheme, themeStorageUnavailable } from "$lib/theme";
+  let { compact = false }: { compact?: boolean } = $props();
+  function move(event: KeyboardEvent) {
+    const steps: Record<string, number> = {
+      ArrowRight: 1,
+      ArrowDown: 1,
+      ArrowLeft: -1,
+      ArrowUp: -1,
+    };
+    const step = steps[event.key];
+    if (!step && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    const group = (event.currentTarget as HTMLElement).closest(
+      ".choices",
+    ) as HTMLElement;
+    const buttons = [...group.querySelectorAll<HTMLButtonElement>("button")];
+    const current = buttons.indexOf(
+      document.activeElement as HTMLButtonElement,
+    );
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? buttons.length - 1
+          : (current + step + buttons.length) % buttons.length;
+    buttons[next]?.focus();
+  }
+</script>
+
+<div class="choices" class:compact role="group" aria-label="外观主题">
+  {#each THEMES as item}
+    <button
+      class="choice"
+      class:selected={$theme === item.id}
+      aria-pressed={$theme === item.id}
+      onkeydown={move}
+      onclick={() => setTheme(item.id)}
+    >
+      <span class="preview" data-theme={item.id} aria-hidden="true"
+        ><span class="rail"></span><span class="list"
+          ><i></i><i></i><i></i></span
+        ><span class="stage"><i></i><b></b></span></span
+      >
+      <span class="copy"
+        ><strong>{item.name}</strong><small>{item.english}</small><span
+          >{item.description}</span
+        ></span
+      >
+      <span class="check" aria-hidden="true"
+        >{$theme === item.id ? "✓" : ""}</span
+      >
+    </button>
+  {/each}
+</div>
+{#if $themeStorageUnavailable}<p class="notice" role="status">
+    浏览器禁止本地存储：本次有效，其他操作不受影响
+  </p>{/if}
+
+<style>
+  .choices {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+  }
+  .choices.compact {
+    grid-template-columns: 1fr;
+  }
+  .choice {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 18px;
+    gap: 8px;
+    padding: 8px;
+    border: 1px solid var(--line-2);
+    border-radius: var(--r-md);
+    background: var(--bg-2);
+    color: var(--tx-1);
+    text-align: left;
+    cursor: pointer;
+  }
+  .choice:hover {
+    border-color: var(--line-3);
+    background: var(--bg-3);
+  }
+  .choice.selected {
+    border-color: var(--gold);
+  }
+  .choice:focus-visible {
+    outline: 2px solid var(--info);
+    outline-offset: 2px;
+  }
+  .compact .choice {
+    grid-template-columns: 76px minmax(0, 1fr) 18px;
+    align-items: center;
+  }
+  .preview {
+    grid-column: 1 / -1;
+    height: 64px;
+    border-radius: var(--r-sm);
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 12px 22px 1fr;
+    background: var(--bg-0);
+    border: 1px solid var(--line-2);
+  }
+  .compact .preview {
+    grid-column: auto;
+    height: 48px;
+  }
+  .rail,
+  .list {
+    background: var(--bg-1);
+    border-right: 1px solid var(--line);
+  }
+  .rail::before {
+    content: "";
+    display: block;
+    width: 4px;
+    height: 4px;
+    margin: 6px auto;
+    border-radius: 50%;
+    background: var(--gold);
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 6px 3px;
+  }
+  .list i {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--line-3);
+  }
+  .list i:first-child {
+    background: var(--sc-image);
+  }
+  .stage {
+    padding: 5px 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .stage i {
+    flex: 1;
+    border-radius: 3px;
+    background: var(--bg-3);
+    border: 1px solid var(--line-2);
+  }
+  .stage b {
+    height: 9px;
+    width: 18px;
+    align-self: end;
+    border-radius: 2px;
+    background: var(--grad-gold);
+  }
+  .copy {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 6px;
+    min-width: 0;
+  }
+  .copy strong {
+    font-size: 13px;
+  }
+  .copy small {
+    font: 10px var(--mono);
+    color: var(--tx-3);
+    align-self: center;
+  }
+  .copy > span {
+    width: 100%;
+    font-size: 11px;
+    color: var(--tx-2);
+  }
+  .check {
+    color: var(--gold);
+  }
+  .notice {
+    font-size: 12px;
+    color: var(--tx-2);
+    margin: 12px 0 0;
+  }
+  @media (max-width: 1366px) {
+    .choices:not(.compact) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+</style>
diff --git a/calliope-web/src/lib/components/shell/nav.ts b/calliope-web/src/lib/components/shell/nav.ts
index 71927285..fffef095 100644
--- a/calliope-web/src/lib/components/shell/nav.ts
+++ b/calliope-web/src/lib/components/shell/nav.ts
@@ -1,123 +1,130 @@
-import type { IconName } from '$lib/components/ui/icons';
+import type { IconName } from "$lib/components/ui/icons";
 
+// IDs are retained for the existing page contracts while B1–B4 replace layouts.
 export type NavId =
-	| 'projects'
-	| 'workbench'
-	| 'image'
-	| 'video'
-	| 'tasks'
-	| 'agents'
-	| 'connections'
-	| 'models'
-	| 'library'
-	| 'settings'
-	| 'canvas'
-	| 'workflows';
-
+  | "projects"
+  | "workbench"
+  | "image"
+  | "video"
+  | "tasks"
+  | "agents"
+  | "connections"
+  | "models"
+  | "library"
+  | "settings"
+  | "canvas"
+  | "workflows";
 export interface NavItem {
-	id: NavId;
-	labelKey: string;
-	icon: IconName;
-	href: string;
+  id: NavId;
+  label: string;
+  icon: IconName;
+  href: string;
+  scene: "project" | "image" | "agent" | "manage" | "asset";
+  matches: (path: string) => boolean;
 }
-
-// Order is fixed by spec-v2 §3: 项目 / 创作工作台 / 生图 / 生视频 / 生成任务 /
-// 智能体 / ComfyUI 连接 / 模型设置 / 设置. HEL-649 §二 puts the connection
-// and settings entries at the foot of the 60px rail.
 export const NAV_MAIN: NavItem[] = [
-	{ id: 'projects', labelKey: 'shell.navProjects', icon: 'home', href: '/' },
-	{
-		id: 'workbench',
-		labelKey: 'shell.navWorkbench',
-		icon: 'story',
-		href: '/workbench',
-	},
-	{ id: 'image', labelKey: 'shell.navImage', icon: 'image', href: '/image' },
-	{ id: 'video', labelKey: 'shell.navVideo', icon: 'film', href: '/video' },
-	{ id: 'tasks', labelKey: 'shell.navTasks', icon: 'queue', href: '/tasks' },
-	{ id: 'canvas', labelKey: 'nav.canvas', icon: 'story', href: '/canvas' },
-	{
-		id: 'agents',
-		labelKey: 'shell.navAgents',
-		icon: 'sparkle',
-		href: '/agents',
-	},
+  {
+    id: "projects",
+    label: "工作室",
+    icon: "home",
+    href: "/",
+    scene: "project",
+    matches: (p) => p === "/",
+  },
+  {
+    id: "workbench",
+    label: "项目",
+    icon: "folder",
+    href: "/workbench",
+    scene: "project",
+    matches: (p) => /^\/(workbench|project)(\/|$)/.test(p),
+  },
+  {
+    id: "image",
+    label: "创作台",
+    icon: "image",
+    href: "/create",
+    scene: "image",
+    matches: (p) =>
+      ["/create", "/image", "/video", "/playground", "/build-scene"].includes(
+        p,
+      ),
+  },
+  {
+    id: "agents",
+    label: "智能体",
+    icon: "sparkle",
+    href: "/agents",
+    scene: "agent",
+    matches: (p) => p === "/agents",
+  },
+  {
+    id: "canvas",
+    label: "画布",
+    icon: "story",
+    href: "/canvas",
+    scene: "manage",
+    matches: (p) => p.startsWith("/canvas"),
+  },
+  {
+    id: "library",
+    label: "素材库",
+    icon: "assets",
+    href: "/library",
+    scene: "asset",
+    matches: (p) => p === "/library",
+  },
+];
+export const NAV_MANAGE: NavItem[] = [
+  {
+    id: "tasks",
+    label: "任务",
+    icon: "clock",
+    href: "/tasks",
+    scene: "manage",
+    matches: (p) => p === "/tasks",
+  },
+  {
+    id: "workflows",
+    label: "工作流",
+    icon: "playground",
+    href: "/workflows",
+    scene: "manage",
+    matches: (p) => p === "/workflows",
+  },
+  {
+    id: "connections",
+    label: "模型连接",
+    icon: "link",
+    href: "/model-connections",
+    scene: "manage",
+    matches: (p) =>
+      ["/connections", "/models", "/model-connections"].includes(p),
+  },
 ];
-
 export const NAV_FOOT: NavItem[] = [
-	{
-		id: 'connections',
-		labelKey: 'shell.navConnections',
-		icon: 'link',
-		href: '/connections',
-	},
-	{
-		id: 'models',
-		labelKey: 'shell.navModels',
-		icon: 'assets',
-		href: '/models',
-	},
-	{
-		id: 'workflows',
-		labelKey: 'connections.wfTitle',
-		icon: 'playground',
-		href: '/workflows',
-	},
-	{
-		id: 'library',
-		labelKey: 'shell.navLibrary',
-		icon: 'folder',
-		href: '/library',
-	},
-	{
-		id: 'settings',
-		labelKey: 'shell.navSettings',
-		icon: 'settings',
-		href: '/settings',
-	},
+  {
+    id: "settings",
+    label: "设置",
+    icon: "settings",
+    href: "/settings",
+    scene: "manage",
+    matches: (p) => p === "/settings",
+  },
 ];
-
-export const NAV: NavItem[] = [...NAV_MAIN, ...NAV_FOOT];
-
-export interface TabItem {
-	id: 'projects' | 'workbench' | 'generate';
-	labelKey: string;
-	icon: IconName;
-	href: string;
-	/** Pages that light this tab up. */
-	covers: NavId[];
-}
-
-/** ≤760px bottom tab bar (§二): 项目 / 创作 / 生成 / 更多. */
-export const TABS: TabItem[] = [
-	{
-		id: 'projects',
-		labelKey: 'shell.tabProjects',
-		icon: 'home',
-		href: '/',
-		covers: ['projects'],
-	},
-	{
-		id: 'workbench',
-		labelKey: 'shell.tabCreate',
-		icon: 'story',
-		href: '/workbench',
-		covers: ['workbench'],
-	},
-	{
-		id: 'generate',
-		labelKey: 'shell.tabGenerate',
-		icon: 'image',
-		href: '/image',
-		covers: ['image', 'video'],
-	},
-];
-
-/**
- * Every page a tab does not link to directly lives in the 更多 sheet. 生视频
- * is still its own route, so it is listed there too until the two
- * generation pages merge.
- */
-export const MORE_ITEMS: NavItem[] = NAV.filter(
-	(item) => !TABS.some((tab) => tab.href === item.href),
-);
+// Tools awaiting their replacement keep reachable entries in global search.
+export const NAV = [
+  ...NAV_MAIN,
+  ...NAV_MANAGE,
+  ...NAV_FOOT,
+  { id: "video", label: "视频创作", icon: "film", href: "/video" },
+  { id: "models", label: "大语言模型", icon: "assets", href: "/models" },
+  {
+    id: "connections",
+    label: "ComfyUI 连接",
+    icon: "link",
+    href: "/connections",
+  },
+  { id: "image", label: "试验台", icon: "playground", href: "/playground" },
+  { id: "video", label: "三维搭景", icon: "story", href: "/build-scene" },
+] as const;
diff --git a/calliope-web/src/lib/theme.ts b/calliope-web/src/lib/theme.ts
new file mode 100644
index 00000000..a6831a37
--- /dev/null
+++ b/calliope-web/src/lib/theme.ts
@@ -0,0 +1,68 @@
+import { writable } from "svelte/store";
+
+/** Approved HEL-726 themes. Colours live only in static/themes.css. */
+export const THEMES = [
+  {
+    id: "night",
+    name: "夜片场",
+    english: "Nocturne",
+    description: "墨黑与钨丝金 · 沉浸式创作",
+  },
+  {
+    id: "day",
+    name: "日光棚",
+    english: "Daylight",
+    description: "暖白纸面 · 白天办公与长时间审稿",
+  },
+  {
+    id: "grade",
+    name: "调色间",
+    english: "Grading",
+    description: "中性深灰 · 判断作品色彩",
+  },
+  {
+    id: "bluehour",
+    name: "蓝调时刻",
+    english: "Blue Hour",
+    description: "靛蓝与珊瑚 · 提案与灵感发散",
+  },
+] as const;
+export type ThemeId = (typeof THEMES)[number]["id"];
+export const THEME_KEY = "aigc-theme";
+export const theme = writable<ThemeId>("night");
+export const themeStorageUnavailable = writable(false);
+
+export function isTheme(value: unknown): value is ThemeId {
+  return THEMES.some((item) => item.id === value);
+}
+
+export function setTheme(id: ThemeId) {
+  if (typeof document === "undefined" || !isTheme(id)) return;
+  // Only the root attribute changes: editors, uploads and jobs stay mounted.
+  document.documentElement.dataset.theme = id;
+  theme.set(id);
+  try {
+    localStorage.setItem(THEME_KEY, id);
+    themeStorageUnavailable.set(false);
+  } catch {
+    themeStorageUnavailable.set(true);
+  }
+}
+
+export function initTheme() {
+  const current = document.documentElement.dataset.theme;
+  theme.set(isTheme(current) ? current : "night");
+  try {
+    localStorage.getItem(THEME_KEY);
+  } catch {
+    themeStorageUnavailable.set(true);
+  }
+  const sync = (event: StorageEvent) => {
+    if (event.key !== THEME_KEY && event.key !== null) return;
+    const id = isTheme(event.newValue) ? event.newValue : "night";
+    document.documentElement.dataset.theme = id;
+    theme.set(id);
+  };
+  window.addEventListener("storage", sync);
+  return () => window.removeEventListener("storage", sync);
+}
diff --git a/calliope-web/src/routes/+layout.svelte b/calliope-web/src/routes/+layout.svelte
index 0a378bc7..cd91f504 100644
--- a/calliope-web/src/routes/+layout.svelte
+++ b/calliope-web/src/routes/+layout.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-	import './app.css';
-	import { onMount } from 'svelte';
-	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-	import ToastHost from '$lib/components/ToastHost.svelte';
-	import { initReduceMotion } from '$lib/reduceMotion.svelte';
+  import "./app.css";
+  import { initTheme } from "$lib/theme";
+  import { onMount } from "svelte";
+  import { QueryClient, QueryClientProvider } from "@tanstack/svelte-query";
+  import ToastHost from "$lib/components/ToastHost.svelte";
+  import { initReduceMotion } from "$lib/reduceMotion.svelte";
 
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: { refetchOnWindowFocus: false, retry: 1 },
-		},
-	});
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { refetchOnWindowFocus: false, retry: 1 },
+    },
+  });
 
-	onMount(() => initReduceMotion());
+  onMount(() => initReduceMotion());
+  onMount(initTheme);
 </script>
 
 <QueryClientProvider client={queryClient}>
-	<slot />
-	<ToastHost />
+  <slot />
+  <ToastHost />
 </QueryClientProvider>
diff --git a/calliope-web/src/routes/app.css b/calliope-web/src/routes/app.css
index b832d5d2..874cf09e 100644
--- a/calliope-web/src/routes/app.css
+++ b/calliope-web/src/routes/app.css
@@ -2,201 +2,59 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-	color-scheme: dark;
-	--accent-grad-hover: linear-gradient(135deg, #39dcee, #00b4c5);
-	--accent-ring: #00cae040;
-	--accent-wash: #00cae016;
-	--btn-glow-hover: 0 3px 0 #2235a01f;
-	--composer-bg: #131219d1;
-	--composer-focus: #131219e6;
-	--float-bg: #1b1c21;
-	--on-media: #fff;
-	--on-media-line: #ffffff66;
-	--sel-shadow: 0 0 0 1px #354fe0;
-	--bg: #0f0f12;
-	--bg-2: #141419;
-	--bg-3: #1b1c21;
-	--bg-4: #292b33;
-	--paper: #141419;
-	--lime: #203e39;
-	--rose: #402837;
-	--line: #ffffff14;
-	--line-2: #ffffff29;
-	--line-3: #ffffff40;
-	--text: #f5fbff;
-	--text-2: #b7bdc8;
-	--text-3: #8c99a0;
-	--accent: #00cae0;
-	--accent-hi: #79effa;
-	--accent-lo: #00a8b8;
-	--accent-ink: #071719;
-	--accent-soft: #00cae016;
-	--accent-line: #00cae059;
-	--accent-grad: linear-gradient(135deg, #00cae0, #00a8b8);
-	--accent-glow: transparent;
-	--btn-glow: 0 3px 0 #2235a01f;
-	--page-glow: linear-gradient(transparent, transparent);
-	--ok: #55d4ad;
-	--ok-soft: #10b98118;
-	--run: #a78bfa;
-	--run-soft: #7850ff18;
-	--run-grad: linear-gradient(90deg, #7850ff, #c4b5fd);
-	--err: #ff8c88;
-	--err-solid: #ef706b;
-	--err-soft: #ef706b18;
-	--err-line: #ef706b66;
-	--warn: #f5b042;
-	--warn-soft: #f5b04218;
-	--overlay: #000000bf;
-	--media-scrim: #101017ee;
-	--media-text: #fff;
-	--media-line: #ffffff66;
-	--stage-bg: #0f1117;
-	--font:
-		system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
-	--mono: ui-monospace, monospace;
-	--fs-title: 15px;
-	--fs-section: 14px;
-	--fs-body: 13px;
-	--fs-body-sm: 12.5px;
-	--fs-aux: 12px;
-	--fs-mini: 11px;
-	--lh-body: 1.55;
-	--sp-1: 4px;
-	--sp-2: 6px;
-	--sp-3: 8px;
-	--sp-4: 10px;
-	--sp-5: 12px;
-	--sp-6: 16px;
-	--sp-7: 20px;
-	--sp-8: 28px;
-	--r-sm: 6px;
-	--r-md: 10px;
-	--r-lg: 14px;
-	--r-pill: 999px;
-	--shadow-float: 0 20px 60px #0008, 0 0 0 1px var(--line);
-	--rail-w: 68px;
-	--topbar-h: 52px;
-	--tabbar-h: 0px;
-	--sprocket: none;
-	--frame-w: 0px;
-	--frame-arm: 12px;
-	--frame-inset: -4px;
-	--paper-w: 4px;
-	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
-	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-	--ease-spring: cubic-bezier(0.34, 1.45, 0.44, 1);
-	--d-press: 160ms;
-	--d-state: 160ms;
-	--d-pop: 180ms;
-	--d-leave: 200ms;
-	--d-enter: 220ms;
-	--d-drawer: 250ms;
-	--d-flash: 900ms;
-	--d-progress: 400ms;
-	--press-scale: 0.97;
-	--avatar-1: #e8c6b7;
-	--avatar-2: #e1eb9a;
-	--avatar-3: #c6d3e4;
-	--avatar-4: #d6d6c1;
-	--avatar-5: #d8c7e5;
-	--id-1: #875440;
-	--id-2: #5c6b23;
-	--id-3: #45698d;
-	--id-4: #626348;
-	--id-5: #73578c;
-	--surface: var(--bg-2);
-	--surface-2: var(--bg-3);
-	--surface-3: var(--bg-4);
-	--border: var(--line);
-	--border-strong: var(--line-2);
-	--border-hover: var(--line-2);
-	--accent-dim: var(--accent-soft);
-	--success: var(--ok);
-	--success-dim: var(--ok-soft);
-	--info: var(--run);
-	--info-dim: var(--run-soft);
-	--error: var(--err);
-	--error-dim: var(--err-soft);
-	--warning: var(--warn);
-	--bg-primary: var(--bg);
-	--bg-surface: var(--bg-2);
-	--bg-elevated: var(--bg-3);
-	--text-primary: var(--text);
-	--text-secondary: var(--text-2);
-	--text-muted: var(--text-3);
-	--font-a-mono: var(--mono);
-	--font-display: var(--font);
-	--font-body: var(--font);
-	--font-mono: var(--mono);
-	--radius-sm: var(--r-sm);
-	--radius-md: var(--r-md);
-	--radius-lg: var(--r-lg);
-	--space-sm: var(--sp-3);
-	--space-md: var(--sp-6);
-	--pill-bg: var(--bg-3);
-	--pill-border: var(--line-2);
-	--pill-radius: var(--r-pill);
-	--pill-height: 36px;
-	--pill-padding: 0 14px;
-	--pill-font-size: var(--fs-body);
-}
-
 /* 减少动态效果 (§五)：系统设置自动生效，顶栏开关写 data-reduce="1"。
    位移/缩放/弹入/光晕全部取消，只留 ≤120ms 透明度，进度条直接跳变。 */
-:root[data-reduce='1'] {
-	--d-press: 0ms;
-	--d-state: 120ms;
-	--d-pop: 120ms;
-	--d-leave: 120ms;
-	--d-enter: 120ms;
-	--d-drawer: 120ms;
-	--d-flash: 0ms;
-	--d-progress: 0ms;
-	--press-scale: 1;
-	--ease-spring: ease;
+:root[data-reduce="1"] {
+  --d-press: 0ms;
+  --d-state: 120ms;
+  --d-pop: 120ms;
+  --d-leave: 120ms;
+  --d-enter: 120ms;
+  --d-drawer: 120ms;
+  --d-flash: 0ms;
+  --d-progress: 0ms;
+  --press-scale: 1;
+  --ease-spring: ease;
 }
 @media (prefers-reduced-motion: reduce) {
-	:root {
-		--d-press: 0ms;
-		--d-state: 120ms;
-		--d-pop: 120ms;
-		--d-leave: 120ms;
-		--d-enter: 120ms;
-		--d-drawer: 120ms;
-		--d-flash: 0ms;
-		--d-progress: 0ms;
-		--press-scale: 1;
-		--ease-spring: ease;
-	}
+  :root {
+    --d-press: 0ms;
+    --d-state: 120ms;
+    --d-pop: 120ms;
+    --d-leave: 120ms;
+    --d-enter: 120ms;
+    --d-drawer: 120ms;
+    --d-flash: 0ms;
+    --d-progress: 0ms;
+    --press-scale: 1;
+    --ease-spring: ease;
+  }
 }
 
 body {
-	background: var(--page-glow), var(--bg);
-	color: var(--text);
-	font-family: var(--font);
-	font-size: var(--fs-body);
-	line-height: var(--lh-body);
-	-webkit-font-smoothing: antialiased;
-	margin: 0;
-	min-height: 100vh;
+  background: var(--page-glow), var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+  min-height: 100vh;
 }
 
 .a-darkroom {
-	background: var(--page-glow), var(--bg);
-	color: var(--text);
-	font-family: var(--font);
-	font-size: var(--fs-body);
-	line-height: var(--lh-body);
+  background: var(--page-glow), var(--bg);
+  color: var(--text);
+  font-family: var(--font);
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
 }
 
 code,
 .mono,
 .kh {
-	font-family: var(--mono);
-	font-variant-numeric: tabular-nums;
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
 }
 
 /* ------------------------------------------------------------------
@@ -206,555 +64,555 @@ code,
  * (width / margin), never re-declare colors.
  * ------------------------------------------------------------------ */
 .a-btn {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	gap: var(--sp-2);
-	min-height: 34px;
-	padding: 0 var(--sp-6);
-	border-radius: var(--r-md);
-	border: 1px solid transparent;
-	font-family: inherit;
-	font-size: var(--fs-body);
-	font-weight: 600;
-	white-space: nowrap;
-	text-decoration: none;
-	cursor: pointer;
-	box-sizing: border-box;
-	transition:
-		transform var(--d-press) var(--ease-out),
-		background-color var(--d-state) ease,
-		border-color var(--d-state) ease,
-		box-shadow var(--d-state) ease,
-		color var(--d-state) ease,
-		opacity var(--d-state) ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sp-2);
+  min-height: 34px;
+  padding: 0 var(--sp-6);
+  border-radius: var(--r-md);
+  border: 1px solid transparent;
+  font-family: inherit;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    transform var(--d-press) var(--ease-out),
+    background-color var(--d-state) ease,
+    border-color var(--d-state) ease,
+    box-shadow var(--d-state) ease,
+    color var(--d-state) ease,
+    opacity var(--d-state) ease;
 }
 .a-btn.lg {
-	min-height: 38px;
-	padding: 0 var(--sp-7);
+  min-height: 38px;
+  padding: 0 var(--sp-7);
 }
 .a-btn.sm {
-	min-height: 28px;
-	padding: 0 var(--sp-4);
-	font-size: var(--fs-aux);
-	border-radius: var(--r-sm);
+  min-height: 28px;
+  padding: 0 var(--sp-4);
+  font-size: var(--fs-aux);
+  border-radius: var(--r-sm);
 }
 .a-btn.xs {
-	min-height: 24px;
-	padding: 0 var(--sp-3);
-	font-size: var(--fs-mini);
-	border-radius: var(--r-sm);
+  min-height: 24px;
+  padding: 0 var(--sp-3);
+  font-size: var(--fs-mini);
+  border-radius: var(--r-sm);
 }
 .a-btn.block {
-	width: 100%;
+  width: 100%;
 }
 .a-btn.primary {
-	background: var(--accent-grad);
-	color: var(--accent-ink);
-	box-shadow: var(--btn-glow);
+  background: var(--accent-grad);
+  color: var(--accent-ink);
+  box-shadow: var(--btn-glow);
 }
 .a-btn.secondary {
-	background: var(--bg-3);
-	border-color: var(--line);
-	color: var(--text);
+  background: var(--bg-3);
+  border-color: var(--line);
+  color: var(--text);
 }
 .a-btn.ghost {
-	background: transparent;
-	color: var(--text-2);
+  background: transparent;
+  color: var(--text-2);
 }
 /* 危险两级制：列表行内只用描边红 danger；实心红 danger-solid 只在确认弹层内。 */
 .a-btn.danger {
-	background: transparent;
-	border-color: var(--err-line);
-	color: var(--err);
+  background: transparent;
+  border-color: var(--err-line);
+  color: var(--err);
 }
 .a-btn.danger-solid {
-	background: var(--err-solid);
-	color: var(--on-media);
+  background: var(--err-solid);
+  color: var(--on-media);
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-btn.primary:hover:not(:disabled) {
-		background: var(--accent-grad-hover);
-		box-shadow: var(--btn-glow-hover);
-	}
-	.a-btn.secondary:hover:not(:disabled) {
-		border-color: var(--line-2);
-		background: var(--bg-4);
-	}
-	.a-btn.ghost:hover:not(:disabled) {
-		background: var(--bg-4);
-		color: var(--text);
-	}
-	.a-btn.danger:hover:not(:disabled) {
-		background: var(--err-soft);
-	}
-	.a-btn.danger-solid:hover:not(:disabled) {
-		box-shadow:
-			0 0 0 1px var(--err-line),
-			0 0 18px var(--err-soft);
-	}
+  .a-btn.primary:hover:not(:disabled) {
+    background: var(--accent-grad-hover);
+    box-shadow: var(--btn-glow-hover);
+  }
+  .a-btn.secondary:hover:not(:disabled) {
+    border-color: var(--line-2);
+    background: var(--bg-4);
+  }
+  .a-btn.ghost:hover:not(:disabled) {
+    background: var(--bg-4);
+    color: var(--text);
+  }
+  .a-btn.danger:hover:not(:disabled) {
+    background: var(--err-soft);
+  }
+  .a-btn.danger-solid:hover:not(:disabled) {
+    box-shadow:
+      0 0 0 1px var(--err-line),
+      0 0 18px var(--err-soft);
+  }
 }
 .a-btn:active:not(:disabled) {
-	transform: scale(var(--press-scale));
+  transform: scale(var(--press-scale));
 }
 /* 禁用必须在旁边给出中文原因（§1.2），由调用方渲染。 */
 .a-btn:disabled,
-.a-btn[aria-disabled='true'] {
-	opacity: 0.45;
-	box-shadow: none;
-	cursor: not-allowed;
+.a-btn[aria-disabled="true"] {
+  opacity: 0.45;
+  box-shadow: none;
+  cursor: not-allowed;
 }
 
 /* Top-bar status capsule (queue / connection / save state) — §二 顶栏胶囊. */
 .status-chip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-2);
-	height: 30px;
-	padding: 0 var(--sp-5);
-	border-radius: var(--r-pill);
-	border: 1px solid var(--line);
-	background: var(--bg-2);
-	color: var(--text-2);
-	font-size: var(--fs-aux);
-	white-space: nowrap;
-	box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  height: 30px;
+  padding: 0 var(--sp-5);
+  border-radius: var(--r-pill);
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  color: var(--text-2);
+  font-size: var(--fs-aux);
+  white-space: nowrap;
+  box-sizing: border-box;
 }
 .status-chip.accent {
-	background: var(--accent-soft);
-	border-color: var(--accent-line);
-	color: var(--accent);
+  background: var(--accent-soft);
+  border-color: var(--accent-line);
+  color: var(--accent);
 }
 a.status-chip,
 button.status-chip {
-	font-family: inherit;
-	text-decoration: none;
-	cursor: pointer;
-	transition:
-		border-color var(--d-state) ease,
-		color var(--d-state) ease,
-		transform var(--d-press) var(--ease-out);
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    border-color var(--d-state) ease,
+    color var(--d-state) ease,
+    transform var(--d-press) var(--ease-out);
 }
 a.status-chip:active,
 button.status-chip:active {
-	transform: scale(var(--press-scale));
+  transform: scale(var(--press-scale));
 }
 @media (hover: hover) and (pointer: fine) {
-	a.status-chip:hover,
-	button.status-chip:hover {
-		border-color: var(--text-3);
-		color: var(--text);
-	}
+  a.status-chip:hover,
+  button.status-chip:hover {
+    border-color: var(--text-3);
+    color: var(--text);
+  }
 }
 /* Keyboard shortcut hint, e.g. the Ctrl K badge on the search capsule. */
 .a-kbd {
-	font: var(--fs-mini) var(--mono);
-	color: var(--text-3);
-	border: 1px solid var(--line-2);
-	border-bottom-width: 2px;
-	border-radius: var(--r-sm);
-	padding: 0 var(--sp-2);
-	line-height: 16px;
-	white-space: nowrap;
+  font: var(--fs-mini) var(--mono);
+  color: var(--text-3);
+  border: 1px solid var(--line-2);
+  border-bottom-width: 2px;
+  border-radius: var(--r-sm);
+  padding: 0 var(--sp-2);
+  line-height: 16px;
+  white-space: nowrap;
 }
 .status-chip-dot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50%;
-	flex-shrink: 0;
-	background: currentColor;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: currentColor;
 }
 .status-chip-dot.ok {
-	background: var(--ok);
+  background: var(--ok);
 }
 .status-chip-dot.run {
-	background: var(--run);
+  background: var(--run);
 }
 .status-chip-dot.fail {
-	background: var(--err);
+  background: var(--err);
 }
 .status-chip-dot.idle {
-	background: var(--text-3);
+  background: var(--text-3);
 }
 
 /* Status label (§四.2)：语义色文字 + 13% 软底；默认为中性（排队 / 未开始）。 */
 .a-tag {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-1);
-	height: 20px;
-	padding: 0 var(--sp-2);
-	border-radius: var(--r-sm);
-	background: var(--bg-4);
-	color: var(--text-2);
-	font-size: var(--fs-aux);
-	white-space: nowrap;
-	box-sizing: border-box;
-	transition:
-		color var(--d-state) ease,
-		background-color var(--d-state) ease;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-1);
+  height: 20px;
+  padding: 0 var(--sp-2);
+  border-radius: var(--r-sm);
+  background: var(--bg-4);
+  color: var(--text-2);
+  font-size: var(--fs-aux);
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition:
+    color var(--d-state) ease,
+    background-color var(--d-state) ease;
 }
 .a-tag.accent {
-	color: var(--accent);
-	background: var(--accent-soft);
+  color: var(--accent);
+  background: var(--accent-soft);
 }
 .a-tag.ok {
-	color: var(--ok);
-	background: var(--ok-soft);
+  color: var(--ok);
+  background: var(--ok-soft);
 }
 .a-tag.run {
-	color: var(--run);
-	background: var(--run-soft);
+  color: var(--run);
+  background: var(--run-soft);
 }
 .a-tag.err {
-	color: var(--err);
-	background: var(--err-soft);
+  color: var(--err);
+  background: var(--err-soft);
 }
 .a-tag.warn {
-	color: var(--warn);
-	background: var(--warn-soft);
+  color: var(--warn);
+  background: var(--warn-soft);
 }
 
 /* Real-progress bar (§1.3)：<div class="a-progress" style="--p:.42"><i></i></div>.
    Only for true progress values — never fake progress. */
 .a-progress {
-	position: relative;
-	height: 4px;
-	border-radius: var(--r-pill);
-	background: var(--bg-4);
-	overflow: hidden;
+  position: relative;
+  height: 4px;
+  border-radius: var(--r-pill);
+  background: var(--bg-4);
+  overflow: hidden;
 }
 .a-progress > i {
-	position: absolute;
-	inset: 0;
-	background: var(--run-grad);
-	box-shadow: 0 0 8px var(--run-soft);
-	transform-origin: left;
-	transform: scaleX(var(--p, 0));
-	transition: transform var(--d-progress) linear;
+  position: absolute;
+  inset: 0;
+  background: var(--run-grad);
+  box-shadow: 0 0 8px var(--run-soft);
+  transform-origin: left;
+  transform: scaleX(var(--p, 0));
+  transition: transform var(--d-progress) linear;
 }
 
 /* Film sprocket divider — only between the take feed and the composer (§1.7). */
 .a-sprocket {
-	height: 6px;
-	background-image: var(--sprocket);
-	background-size: 18px 6px;
-	background-repeat: repeat-x;
-	background-position: center;
-	opacity: 0.55;
+  height: 6px;
+  background-image: var(--sprocket);
+  background-size: 18px 6px;
+  background-repeat: repeat-x;
+  background-position: center;
+  opacity: 0.55;
 }
-:root[data-reduce='1'] .a-sprocket {
-	opacity: 0.3;
+:root[data-reduce="1"] .a-sprocket {
+  opacity: 0.3;
 }
 
 /* Segmented control (§四 分段): the pressed option is lifted, never gold. */
 .a-seg {
-	display: inline-flex;
-	padding: 2px;
-	border: 1px solid var(--line);
-	border-radius: var(--r-md);
-	background: var(--bg-2);
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  background: var(--bg-2);
 }
 .a-seg > button {
-	height: 26px;
-	padding: 0 var(--sp-4);
-	border: 0;
-	border-radius: 8px;
-	background: transparent;
-	color: var(--text-3);
-	font-family: inherit;
-	font-size: var(--fs-body-sm);
-	white-space: nowrap;
-	cursor: pointer;
-	transition:
-		color var(--d-state) ease,
-		background-color var(--d-state) ease;
+  height: 26px;
+  padding: 0 var(--sp-4);
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-3);
+  font-family: inherit;
+  font-size: var(--fs-body-sm);
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--d-state) ease,
+    background-color var(--d-state) ease;
 }
-.a-seg > button[aria-pressed='true'] {
-	background: var(--bg-4);
-	color: var(--text);
-	box-shadow: inset 0 0 0 1px var(--line-2);
+.a-seg > button[aria-pressed="true"] {
+  background: var(--bg-4);
+  color: var(--text);
+  box-shadow: inset 0 0 0 1px var(--line-2);
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-seg > button:hover {
-		color: var(--text);
-	}
+  .a-seg > button:hover {
+    color: var(--text);
+  }
 }
 
 /* Composer chips (§3.3 输入台底行): workflow / connection / parameter chips.
    Gold (`changed`) only marks a parameter that differs from the workflow value. */
 .a-chip {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--sp-2);
-	height: 28px;
-	max-width: 280px;
-	padding: 0 var(--sp-4);
-	border: 0;
-	border-radius: var(--r-pill);
-	background: var(--bg-3);
-	color: var(--text-2);
-	font-family: inherit;
-	font-size: var(--fs-aux);
-	white-space: nowrap;
-	text-decoration: none;
-	cursor: pointer;
-	box-sizing: border-box;
-	transition:
-		background-color var(--d-state) ease,
-		color var(--d-state) ease,
-		transform var(--d-press) var(--ease-out);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sp-2);
+  height: 28px;
+  max-width: 280px;
+  padding: 0 var(--sp-4);
+  border: 0;
+  border-radius: var(--r-pill);
+  background: var(--bg-3);
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: var(--fs-aux);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    background-color var(--d-state) ease,
+    color var(--d-state) ease,
+    transform var(--d-press) var(--ease-out);
 }
 .a-chip:active {
-	transform: scale(var(--press-scale));
+  transform: scale(var(--press-scale));
 }
 .a-chip > .lbl {
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .a-chip.wf {
-	background: var(--bg-4);
-	color: var(--text);
-	font-weight: 500;
-	box-shadow: inset 0 0 0 1px var(--line-2);
+  background: var(--bg-4);
+  color: var(--text);
+  font-weight: 500;
+  box-shadow: inset 0 0 0 1px var(--line-2);
 }
 .a-chip.changed {
-	color: var(--accent);
+  color: var(--accent);
 }
 /* Selected filter chip (§3.5 筛选芯片组): 当前选中 = 取景框角线缩影 +
    相纸白文字 + accent-soft 底 (HEL-680) */
 .a-chip.sel {
-	position: relative;
-	background: var(--accent-soft);
-	color: var(--accent);
+  position: relative;
+  background: var(--accent-soft);
+  color: var(--accent);
 }
 .a-chip.sel::after {
-	content: '';
-	position: absolute;
-	inset: 2px;
-	pointer-events: none;
-	background-image:
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0);
-	background-position:
-		left top,
-		left top,
-		right top,
-		right top,
-		left bottom,
-		left bottom,
-		right bottom,
-		right bottom;
-	background-size:
-		6px 1.5px,
-		1.5px 6px,
-		6px 1.5px,
-		1.5px 6px,
-		6px 1.5px,
-		1.5px 6px,
-		6px 1.5px,
-		1.5px 6px;
-	background-repeat: no-repeat;
+  content: "";
+  position: absolute;
+  inset: 2px;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0);
+  background-position:
+    left top,
+    left top,
+    right top,
+    right top,
+    left bottom,
+    left bottom,
+    right bottom,
+    right bottom;
+  background-size:
+    6px 1.5px,
+    1.5px 6px,
+    6px 1.5px,
+    1.5px 6px,
+    6px 1.5px,
+    1.5px 6px,
+    6px 1.5px,
+    1.5px 6px;
+  background-repeat: no-repeat;
 }
 .a-chip.warn {
-	color: var(--warn);
+  color: var(--warn);
 }
 .a-chip.err {
-	color: var(--err);
+  color: var(--err);
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-chip:hover {
-		background: var(--bg-4);
-		color: var(--text);
-	}
-	.a-chip.changed:hover {
-		color: var(--accent);
-	}
+  .a-chip:hover {
+    background: var(--bg-4);
+    color: var(--text);
+  }
+  .a-chip.changed:hover {
+    color: var(--accent);
+  }
 }
 
 /* Composer input slots (§3.3 输入槽): 58px tiles — empty dashed / drag gold /
    uploading ring / filled with hover ✕. MediaSlot and RefImageGrid render these. */
 .a-slot {
-	display: flex;
-	flex-direction: column;
-	gap: var(--sp-2);
-	min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-2);
+  min-width: 0;
 }
 .a-slot-label {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-2);
-	min-height: 20px;
-	font-size: var(--fs-mini);
-	color: var(--text-3);
-	white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-height: 20px;
+  font-size: var(--fs-mini);
+  color: var(--text-3);
+  white-space: nowrap;
 }
 .a-slot-label .req {
-	color: var(--warn);
+  color: var(--warn);
 }
 .a-slot-row {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--sp-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sp-2);
 }
 .a-slot-hint {
-	font-size: var(--fs-mini);
-	color: var(--text-3);
+  font-size: var(--fs-mini);
+  color: var(--text-3);
 }
 .a-slot-hint.err {
-	color: var(--err);
+  color: var(--err);
 }
 .a-tile {
-	position: relative;
-	flex: none;
-	display: grid;
-	place-items: center;
-	width: 58px;
-	height: 58px;
-	padding: 0;
-	border: 1px solid var(--line-2);
-	border-radius: var(--r-md);
-	background: var(--bg-3);
-	color: var(--text-3);
-	font-family: inherit;
-	box-sizing: border-box;
-	transition:
-		border-color var(--d-state) ease,
-		background-color var(--d-state) ease,
-		color var(--d-state) ease,
-		transform var(--d-press) var(--ease-out);
+  position: relative;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 58px;
+  height: 58px;
+  padding: 0;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-md);
+  background: var(--bg-3);
+  color: var(--text-3);
+  font-family: inherit;
+  box-sizing: border-box;
+  transition:
+    border-color var(--d-state) ease,
+    background-color var(--d-state) ease,
+    color var(--d-state) ease,
+    transform var(--d-press) var(--ease-out);
 }
 button.a-tile {
-	cursor: pointer;
+  cursor: pointer;
 }
 button.a-tile:disabled {
-	cursor: default;
+  cursor: default;
 }
 .a-tile.add {
-	border-style: dashed;
+  border-style: dashed;
 }
 .a-tile.add:active:not(:disabled) {
-	transform: scale(var(--press-scale));
+  transform: scale(var(--press-scale));
 }
 .a-tile.drag {
-	border-color: var(--accent);
-	background-color: var(--accent-soft);
-	color: var(--accent);
+  border-color: var(--accent);
+  background-color: var(--accent-soft);
+  color: var(--accent);
 }
 .a-tile.need {
-	border-color: var(--warn);
+  border-color: var(--warn);
 }
 .a-tile.bad {
-	border-color: var(--err);
-	color: var(--err);
+  border-color: var(--err);
+  color: var(--err);
 }
 .a-tile-hit {
-	position: absolute;
-	inset: 0;
-	display: grid;
-	place-items: center;
-	padding: 0;
-	border: 0;
-	border-radius: inherit;
-	overflow: hidden;
-	background: transparent;
-	color: inherit;
-	cursor: pointer;
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
 }
 .a-tile-hit img,
 .a-tile-hit video {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 /* Uploads have no byte progress (fetch), so the ring spins instead of filling. */
 .a-tile-ring {
-	position: absolute;
-	inset: 0;
-	display: grid;
-	place-items: center;
-	border-radius: inherit;
-	background: var(--media-scrim);
-	pointer-events: none;
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  border-radius: inherit;
+  background: var(--media-scrim);
+  pointer-events: none;
 }
 .a-tile-ring > i {
-	width: 26px;
-	height: 26px;
-	border-radius: 50%;
-	background: conic-gradient(var(--accent) 0.3turn, var(--line-2) 0);
-	-webkit-mask: radial-gradient(circle, transparent 9.5px, #000 10.5px);
-	mask: radial-gradient(circle, transparent 9.5px, #000 10.5px);
-	animation: a-tile-spin 900ms linear infinite;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: conic-gradient(var(--accent) 0.3turn, var(--line-2) 0);
+  -webkit-mask: radial-gradient(circle, transparent 9.5px, #000 10.5px);
+  mask: radial-gradient(circle, transparent 9.5px, #000 10.5px);
+  animation: a-tile-spin 900ms linear infinite;
 }
 @keyframes a-tile-spin {
-	to {
-		transform: rotate(1turn);
-	}
+  to {
+    transform: rotate(1turn);
+  }
 }
-:root[data-reduce='1'] .a-tile-ring > i {
-	animation: none;
+:root[data-reduce="1"] .a-tile-ring > i {
+  animation: none;
 }
 .a-tile-x {
-	position: absolute;
-	top: -6px;
-	right: -6px;
-	z-index: 1;
-	display: grid;
-	place-items: center;
-	width: 18px;
-	height: 18px;
-	padding: 0;
-	border: 1px solid var(--line-2);
-	border-radius: 50%;
-	background: var(--bg-4);
-	color: var(--text-2);
-	cursor: pointer;
-	opacity: 0;
-	transition:
-		opacity var(--d-state) ease,
-		color var(--d-state) ease;
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--line-2);
+  border-radius: 50%;
+  background: var(--bg-4);
+  color: var(--text-2);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--d-state) ease,
+    color var(--d-state) ease;
 }
 .a-tile:focus-within .a-tile-x {
-	opacity: 1;
+  opacity: 1;
 }
 .a-tile-idx {
-	position: absolute;
-	left: 3px;
-	top: 2px;
-	font: 10px var(--mono);
-	color: var(--on-media);
-	text-shadow: 0 1px 2px var(--bg);
-	pointer-events: none;
+  position: absolute;
+  left: 3px;
+  top: 2px;
+  font: 10px var(--mono);
+  color: var(--on-media);
+  text-shadow: 0 1px 2px var(--bg);
+  pointer-events: none;
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-tile:hover .a-tile-x {
-		opacity: 1;
-	}
-	.a-tile-x:hover {
-		color: var(--err);
-	}
-	button.a-tile.add:hover:not(:disabled) {
-		border-color: var(--text-3);
-		color: var(--text);
-	}
+  .a-tile:hover .a-tile-x {
+    opacity: 1;
+  }
+  .a-tile-x:hover {
+    color: var(--err);
+  }
+  button.a-tile.add:hover:not(:disabled) {
+    border-color: var(--text-3);
+    color: var(--text);
+  }
 }
 @media (hover: none) {
-	.a-tile-x {
-		opacity: 1;
-	}
+  .a-tile-x {
+    opacity: 1;
+  }
 }
 
 /* Projection stage — only behind media in the inspector (§1.7). */
 .a-stage {
-	position: relative;
-	border-radius: var(--r-lg);
-	overflow: hidden;
-	background: var(--stage-bg);
-	box-shadow: 0 0 0 1px var(--line);
+  position: relative;
+  border-radius: var(--r-lg);
+  overflow: hidden;
+  background: var(--stage-bg);
+  box-shadow: 0 0 0 1px var(--line);
 }
 
 /* ------------------------------------------------------------------
@@ -763,154 +621,154 @@ button.a-tile:disabled {
  * overflow:hidden 裁切的容器改用 --frame-inset 正值画在内侧）。
  * ------------------------------------------------------------------ */
 .a-frame {
-	position: relative;
+  position: relative;
 }
 .a-frame::after {
-	content: '';
-	position: absolute;
-	inset: var(--frame-inset, -4px);
-	z-index: 3;
-	pointer-events: none;
-	background-image:
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
-		linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0);
-	background-position:
-		left top,
-		left top,
-		right top,
-		right top,
-		left bottom,
-		left bottom,
-		right bottom,
-		right bottom;
-	background-size:
-		var(--frame-arm, 12px) var(--frame-w, 2px),
-		var(--frame-w, 2px) var(--frame-arm, 12px),
-		var(--frame-arm, 12px) var(--frame-w, 2px),
-		var(--frame-w, 2px) var(--frame-arm, 12px),
-		var(--frame-arm, 12px) var(--frame-w, 2px),
-		var(--frame-w, 2px) var(--frame-arm, 12px),
-		var(--frame-arm, 12px) var(--frame-w, 2px),
-		var(--frame-w, 2px) var(--frame-arm, 12px);
-	background-repeat: no-repeat;
+  content: "";
+  position: absolute;
+  inset: var(--frame-inset, -4px);
+  z-index: 3;
+  pointer-events: none;
+  background-image:
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0),
+    linear-gradient(var(--accent) 0 0), linear-gradient(var(--accent) 0 0);
+  background-position:
+    left top,
+    left top,
+    right top,
+    right top,
+    left bottom,
+    left bottom,
+    right bottom,
+    right bottom;
+  background-size:
+    var(--frame-arm, 12px) var(--frame-w, 2px),
+    var(--frame-w, 2px) var(--frame-arm, 12px),
+    var(--frame-arm, 12px) var(--frame-w, 2px),
+    var(--frame-w, 2px) var(--frame-arm, 12px),
+    var(--frame-arm, 12px) var(--frame-w, 2px),
+    var(--frame-w, 2px) var(--frame-arm, 12px),
+    var(--frame-arm, 12px) var(--frame-w, 2px),
+    var(--frame-w, 2px) var(--frame-arm, 12px);
+  background-repeat: no-repeat;
 }
 
 /* 相纸白边 (HEL-680)：结果媒体外的相纸白框，底边略厚如手工相纸。
    挂在承载 img/video 的媒体容器上；容器尺寸由调用方决定。 */
 .a-photo {
-	background: var(--accent);
-	border: var(--paper-w, 4px) solid var(--accent);
-	border-bottom-width: calc(var(--paper-w, 4px) + 2px);
-	border-radius: 2px;
-	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-	box-sizing: border-box;
+  background: var(--accent);
+  border: var(--paper-w, 4px) solid var(--accent);
+  border-bottom-width: calc(var(--paper-w, 4px) + 2px);
+  border-radius: 2px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+  box-sizing: border-box;
 }
 
 /* 「定影」完成章 (HEL-680)：已定影结果右上角的完成印记，随 jobst.done
    文案走（中文=定影）。absolute 定位，挂在有媒体的结果容器内。 */
 .a-fix {
-	position: absolute;
-	top: var(--sp-3);
-	right: var(--sp-3);
-	z-index: 2;
-	padding: 1px 6px;
-	border: 1px solid currentColor;
-	border-radius: 3px;
-	background: var(--media-scrim);
-	color: var(--ok);
-	font-size: var(--fs-mini);
-	font-weight: 700;
-	letter-spacing: 0.1em;
-	text-indent: 0.1em;
-	transform: rotate(-4deg);
-	pointer-events: none;
+  position: absolute;
+  top: var(--sp-3);
+  right: var(--sp-3);
+  z-index: 2;
+  padding: 1px 6px;
+  border: 1px solid currentColor;
+  border-radius: 3px;
+  background: var(--media-scrim);
+  color: var(--ok);
+  font-size: var(--fs-mini);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-indent: 0.1em;
+  transform: rotate(-4deg);
+  pointer-events: none;
 }
 
 /* Floating surface for pop / drawer / confirm / toast / lightbox (§四.3). */
 .a-float {
-	background: var(--float-bg);
-	border-radius: var(--r-lg);
-	box-shadow: var(--shadow-float);
+  background: var(--float-bg);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-float);
 }
 
 /* Rows inside pops, sheets and the Ctrl+K palette (§四.3 pop). Gold marks
    only the current page / project; keyboard and hover highlight is neutral. */
 .a-menu-group {
-	padding: var(--sp-4) var(--sp-4) var(--sp-1);
-	font-size: var(--fs-mini);
-	color: var(--text-3);
+  padding: var(--sp-4) var(--sp-4) var(--sp-1);
+  font-size: var(--fs-mini);
+  color: var(--text-3);
 }
 .a-menu-item {
-	display: flex;
-	align-items: center;
-	gap: var(--sp-3);
-	width: 100%;
-	min-height: 40px;
-	padding: var(--sp-3) var(--sp-4);
-	border: 0;
-	border-radius: var(--r-md);
-	background: transparent;
-	color: var(--text-2);
-	font-family: inherit;
-	font-size: var(--fs-body);
-	text-align: left;
-	text-decoration: none;
-	cursor: pointer;
-	box-sizing: border-box;
-	transition:
-		background-color var(--d-state) ease,
-		color var(--d-state) ease;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-3);
+  width: 100%;
+  min-height: 40px;
+  padding: var(--sp-3) var(--sp-4);
+  border: 0;
+  border-radius: var(--r-md);
+  background: transparent;
+  color: var(--text-2);
+  font-family: inherit;
+  font-size: var(--fs-body);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    background-color var(--d-state) ease,
+    color var(--d-state) ease;
 }
 .a-menu-item.active,
 .a-menu-item:focus-visible {
-	background: var(--bg-4);
-	color: var(--text);
+  background: var(--bg-4);
+  color: var(--text);
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-menu-item:hover {
-		background: var(--bg-4);
-		color: var(--text);
-	}
+  .a-menu-item:hover {
+    background: var(--bg-4);
+    color: var(--text);
+  }
 }
-.a-menu-item[aria-current='page'],
-.a-menu-item[aria-current='true'] {
-	color: var(--accent);
+.a-menu-item[aria-current="page"],
+.a-menu-item[aria-current="true"] {
+  color: var(--accent);
 }
 .a-menu-label {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .a-menu-meta {
-	flex-shrink: 0;
-	font-size: var(--fs-mini);
-	color: var(--text-3);
-	white-space: nowrap;
+  flex-shrink: 0;
+  font-size: var(--fs-mini);
+  color: var(--text-3);
+  white-space: nowrap;
 }
 
 /* Card / panel surface (§1.5：卡片不投影，用底色差分层). */
 .a-panel {
-	background: var(--bg-2);
-	border: 1px solid var(--line);
-	border-radius: var(--r-lg);
-	padding: var(--sp-7);
-	box-sizing: border-box;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  padding: var(--sp-7);
+  box-sizing: border-box;
 }
 .a-panel-title {
-	margin: 0;
-	font-size: var(--fs-section);
-	font-weight: 600;
-	color: var(--text);
+  margin: 0;
+  font-size: var(--fs-section);
+  font-weight: 600;
+  color: var(--text);
 }
 .a-panel-lead {
-	margin: var(--sp-1) 0 0;
-	font-size: var(--fs-aux);
-	line-height: var(--lh-body);
-	color: var(--text-3);
+  margin: var(--sp-1) 0 0;
+  font-size: var(--fs-aux);
+  line-height: var(--lh-body);
+  color: var(--text-3);
 }
 
 .a-select,
@@ -919,48 +777,48 @@ button.a-tile:disabled {
 .field-input,
 .field-textarea,
 .field-select {
-	box-sizing: border-box;
-	background: var(--bg-3);
-	border: 1px solid var(--line);
-	border-radius: var(--r-md);
-	color: var(--text);
-	font-family: inherit;
-	font-size: var(--fs-body-sm);
-	transition: border-color var(--d-state) ease;
+  box-sizing: border-box;
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  color: var(--text);
+  font-family: inherit;
+  font-size: var(--fs-body-sm);
+  transition: border-color var(--d-state) ease;
 }
 .a-select {
-	padding: var(--sp-2) var(--sp-4);
-	cursor: pointer;
+  padding: var(--sp-2) var(--sp-4);
+  cursor: pointer;
 }
 .a-input,
 .field-input,
 .field-select {
-	width: 100%;
-	padding: var(--sp-3) var(--sp-5);
+  width: 100%;
+  padding: var(--sp-3) var(--sp-5);
 }
 .a-textarea,
 .field-textarea {
-	width: 100%;
-	padding: var(--sp-4) var(--sp-5);
-	resize: vertical;
-	min-height: 96px;
-	line-height: var(--lh-body);
+  width: 100%;
+  padding: var(--sp-4) var(--sp-5);
+  resize: vertical;
+  min-height: 96px;
+  line-height: var(--lh-body);
 }
 .a-input::placeholder,
 .a-textarea::placeholder,
 .field-input::placeholder,
 .field-textarea::placeholder {
-	color: var(--text-3);
+  color: var(--text-3);
 }
 @media (hover: hover) and (pointer: fine) {
-	.a-select:hover,
-	.a-input:hover,
-	.a-textarea:hover,
-	.field-input:hover,
-	.field-textarea:hover,
-	.field-select:hover {
-		border-color: var(--line-2);
-	}
+  .a-select:hover,
+  .a-input:hover,
+  .a-textarea:hover,
+  .field-input:hover,
+  .field-textarea:hover,
+  .field-select:hover {
+    border-color: var(--line-2);
+  }
 }
 .a-select:focus,
 .a-input:focus,
@@ -968,79 +826,79 @@ button.a-tile:disabled {
 .field-input:focus,
 .field-textarea:focus,
 .field-select:focus {
-	outline: none;
-	border-color: var(--accent-line);
+  outline: none;
+  border-color: var(--accent-line);
 }
 .a-input.invalid,
 .a-textarea.invalid,
 .field-input.invalid {
-	border-color: var(--err);
+  border-color: var(--err);
 }
 .a-select option.unavailable {
-	color: var(--text-3);
+  color: var(--text-3);
 }
 
 .field {
-	display: block;
-	margin-bottom: var(--sp-5);
+  display: block;
+  margin-bottom: var(--sp-5);
 }
 .field-label {
-	display: block;
-	font-size: var(--fs-aux);
-	font-weight: 500;
-	color: var(--text-2);
-	margin-bottom: var(--sp-2);
+  display: block;
+  font-size: var(--fs-aux);
+  font-weight: 500;
+  color: var(--text-2);
+  margin-bottom: var(--sp-2);
 }
 .field-hint {
-	margin: var(--sp-2) 0 0;
-	font-size: var(--fs-aux);
-	color: var(--text-3);
+  margin: var(--sp-2) 0 0;
+  font-size: var(--fs-aux);
+  color: var(--text-3);
 }
 .field-error {
-	margin: var(--sp-2) 0 0;
-	font-size: var(--fs-aux);
-	color: var(--err);
+  margin: var(--sp-2) 0 0;
+  font-size: var(--fs-aux);
+  color: var(--err);
 }
 
 /* Dark theme scrollbars (Firefox + Chromium) */
 * {
-	scrollbar-width: thin;
-	scrollbar-color: var(--bg-4) transparent;
+  scrollbar-width: thin;
+  scrollbar-color: var(--bg-4) transparent;
 }
 
 *::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 *::-webkit-scrollbar-track {
-	background: transparent;
+  background: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-	background: var(--bg-4);
-	border-radius: var(--r-pill);
-	border: 2px solid transparent;
-	background-clip: padding-box;
+  background: var(--bg-4);
+  border-radius: var(--r-pill);
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-	background: var(--text-3);
-	border: 2px solid transparent;
-	background-clip: padding-box;
+  background: var(--text-3);
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 
 *::-webkit-scrollbar-corner {
-	background: transparent;
+  background: transparent;
 }
 
 /* Global keyboard focus (§四.8): every natively focusable element gets the
    gold ring. Component-scoped :focus-visible rules override this via higher
    specificity. */
 :focus-visible {
-	outline: 2px solid var(--accent);
-	outline-offset: 2px;
-	border-radius: var(--r-sm);
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--r-sm);
 }
 
 /* Reduced-motion baseline for components that still carry their own
@@ -1048,148 +906,146 @@ button.a-tile:disabled {
    ProgressBar indeterminate, StatusChip pulse) also handle this in their
    scoped styles. */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-	}
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
 }
-:root[data-reduce='1'] *,
-:root[data-reduce='1'] *::before,
-:root[data-reduce='1'] *::after {
-	animation-duration: 0.01ms !important;
-	animation-iteration-count: 1 !important;
-	transition-duration: 0.01ms !important;
+:root[data-reduce="1"] *,
+:root[data-reduce="1"] *::before,
+:root[data-reduce="1"] *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
 }
 
 /* Refract shared behavior: desktop composition, paper surfaces, direct feedback. */
 [hidden] {
-	display: none !important;
+  display: none !important;
 }
 button,
 input,
 textarea,
 select {
-	font-family: inherit;
+  font-family: inherit;
 }
 button {
-	transition:
-		transform var(--d-press) var(--ease-out),
-		background-color var(--d-state) ease,
-		color var(--d-state) ease;
+  transition:
+    transform var(--d-press) var(--ease-out),
+    background-color var(--d-state) ease,
+    color var(--d-state) ease;
 }
 button:active:not(:disabled) {
-	transform: scale(var(--press-scale));
+  transform: scale(var(--press-scale));
 }
 button:focus-visible,
 a:focus-visible,
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
-	outline: 2px solid var(--accent);
-	outline-offset: 3px;
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
 }
 .a-btn.primary {
-	border-color: transparent;
-	border-bottom-width: 0;
-	min-height: 40px;
-	padding: 0 18px;
-	border-radius: 8px;
-	font-weight: 550;
+  border-color: transparent;
+  border-bottom-width: 0;
+  min-height: 40px;
+  padding: 0 18px;
+  border-radius: 8px;
+  font-weight: 550;
 }
 .a-btn.secondary {
-	background: var(--surface);
-	border-radius: 8px;
+  background: var(--surface);
+  border-radius: 8px;
 }
 .a-stage {
-	background: var(--stage-bg);
-	border-radius: 14px;
+  background: var(--stage-bg);
+  border-radius: 14px;
 }
 .a-sprocket {
-	display: none;
+  display: none;
 }
 .a-photo {
-	box-shadow: none;
-	background: var(--surface);
+  box-shadow: none;
+  background: var(--surface);
 }
 .a-fix {
-	background: var(--surface);
-	color: var(--ok);
+  background: var(--surface);
+  color: var(--ok);
 }
 .a-input,
 .a-select,
 .field-input,
 .field-textarea {
-	background: var(--surface);
-	color: var(--text);
+  background: var(--surface);
+  color: var(--text);
 }
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
-		animation: none !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
-:root[data-reduce='1'] *,
-:root[data-reduce='1'] *::before,
-:root[data-reduce='1'] *::after {
-	animation: none !important;
-	transition-duration: 0.01ms !important;
-	scroll-behavior: auto !important;
+:root[data-reduce="1"] *,
+:root[data-reduce="1"] *::before,
+:root[data-reduce="1"] *::after {
+  animation: none !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
 }
 
 /* Shared reference interface: explicit hover states and press feedback. */
 .reference-option {
-	position: relative;
-	isolation: isolate;
-	overflow: hidden;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
 }
 .reference-option::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border-radius: inherit;
-	pointer-events: none;
-	opacity: 0;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33' height='19'%3E%3Cpath d='M5.5 0h11l5.5 9.5-5.5 9.5h-11L0 9.5ZM22 9.5h11' fill='none' stroke='%23fff' stroke-opacity='.35'/%3E%3C/svg%3E");
-	mask-image: radial-gradient(
-		70px circle at var(--pointer-x, -100px) var(--pointer-y, -100px),
-		#000,
-		transparent
-	);
-	transition: opacity 180ms ease;
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  background-image: var(--lattice);
+  mask-image: radial-gradient(
+    70px circle at var(--pointer-x, -100px) var(--pointer-y, -100px),
+    #000,
+    transparent
+  );
+  transition: opacity 180ms ease;
 }
 @media (hover: hover) and (pointer: fine) {
-	.reference-option:hover::after {
-		opacity: 1;
-	}
+  .reference-option:hover::after {
+    opacity: 1;
+  }
 }
-:root[data-reduce='1'] .reference-option::after {
-	display: none;
+:root[data-reduce="1"] .reference-option::after {
+  display: none;
 }
 @media (prefers-reduced-motion: reduce) {
-	.reference-option::after {
-		display: none;
-	}
+  .reference-option::after {
+    display: none;
+  }
 }
 .a-btn.gold {
-	background: linear-gradient(135deg, #ffd700, #f7931a);
-	color: #211703;
-	border-color: #f5b042;
-	border-radius: 999px;
-	box-shadow:
-		0 2px 12px #ffd70035,
-		inset 0 1px 0 #ffffff4d;
+  background: var(--grad-gold);
+  color: var(--tx-inv);
+  border-color: var(--gold);
+  border-radius: var(--r-pill);
+  box-shadow: var(--sh-gold);
 }
 .a-btn.gold:hover {
-	background: linear-gradient(135deg, #ffe250, #ffac3c);
+  box-shadow: var(--sh-gold-hover);
 }
 .a-btn.purple {
-	background: linear-gradient(135deg, #8b5cf6bf, #6366f1b3);
-	color: white;
-	border-color: #a78bfa40;
+  background: color-mix(in srgb, var(--sc-agent) 16%, var(--bg-3));
+  color: color-mix(in srgb, var(--sc-agent) 70%, var(--hi));
+  border-color: color-mix(in srgb, var(--sc-agent) 35%, transparent);
 }
diff --git a/calliope-web/src/routes/create/+page.ts b/calliope-web/src/routes/create/+page.ts
new file mode 100644
index 00000000..8dd58fbb
--- /dev/null
+++ b/calliope-web/src/routes/create/+page.ts
@@ -0,0 +1,9 @@
+import { redirect } from "@sveltejs/kit";
+export const ssr = false;
+export const prerender = false;
+// B0 compatibility gateway: existing working editors remain the destination
+// until the unified editor is delivered in B1. Preserve all source context.
+export function load({ url }: { url: URL }) {
+  const kind = url.searchParams.get("kind") === "video" ? "video" : "image";
+  redirect(307, `/${kind}${url.search}${new URL(url.href).hash}`);
+}
diff --git a/calliope-web/src/routes/model-connections/+page.ts b/calliope-web/src/routes/model-connections/+page.ts
new file mode 100644
index 00000000..72c1cc44
--- /dev/null
+++ b/calliope-web/src/routes/model-connections/+page.ts
@@ -0,0 +1,9 @@
+import { redirect } from "@sveltejs/kit";
+export const ssr = false;
+export const prerender = false;
+// Both existing management pages stay usable until B2 combines their tabs.
+export function load({ url }: { url: URL }) {
+  const destination =
+    url.searchParams.get("tab") === "llm" ? "/models" : "/connections";
+  redirect(307, destination + url.search + new URL(url.href).hash);
+}
diff --git a/calliope-web/src/routes/project/[id]/+page.ts b/calliope-web/src/routes/project/[id]/+page.ts
index 9cd802be..a2b8ac5d 100644
--- a/calliope-web/src/routes/project/[id]/+page.ts
+++ b/calliope-web/src/routes/project/[id]/+page.ts
@@ -1,9 +1,12 @@
-import { redirect } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
+import { redirect } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
 
 export const prerender = false;
 export const ssr = false;
 
-export const load: PageLoad = ({ params }) => {
-	redirect(308, `/workbench/${params.id}`);
+export const load: PageLoad = ({ params, url }) => {
+  redirect(
+    308,
+    `/workbench/${params.id}${url.search}${new URL(url.href).hash}`,
+  );
 };
diff --git a/calliope-web/src/routes/projects/+page.ts b/calliope-web/src/routes/projects/+page.ts
index a8f63ebf..436bbb11 100644
--- a/calliope-web/src/routes/projects/+page.ts
+++ b/calliope-web/src/routes/projects/+page.ts
@@ -1,8 +1,8 @@
-import { redirect } from '@sveltejs/kit';
+import { redirect } from "@sveltejs/kit";
 
 export const ssr = false;
 export const prerender = false;
 
-export function load() {
-	redirect(308, '/');
+export function load({ url }: { url: URL }) {
+  redirect(308, "/" + url.search + new URL(url.href).hash);
 }
diff --git a/calliope-web/src/routes/settings/+page.svelte b/calliope-web/src/routes/settings/+page.svelte
index 474fa595..3e7a1763 100644
--- a/calliope-web/src/routes/settings/+page.svelte
+++ b/calliope-web/src/routes/settings/+page.svelte
@@ -1,741 +1,907 @@
 <script lang="ts">
-	import { beforeNavigate, goto, afterNavigate } from '$app/navigation';
-	import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import AppShell from '$lib/components/shell/AppShell.svelte';
-	import MemoryPanel from '$lib/components/settings/MemoryPanel.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import type { IconName } from '$lib/components/ui/icons';
-	import Switch from '$lib/components/ui/Switch.svelte';
-	import { settings, type Settings } from '$lib/api';
-	import { toast } from '$lib/toast';
-	import { t } from '$lib/i18n.svelte';
+  import { beforeNavigate, goto, afterNavigate } from "$app/navigation";
+  import {
+    createMutation,
+    createQuery,
+    useQueryClient,
+  } from "@tanstack/svelte-query";
+  import AppShell from "$lib/components/shell/AppShell.svelte";
+  import ThemeChoices from "$lib/components/shell/ThemeChoices.svelte";
+  import MemoryPanel from "$lib/components/settings/MemoryPanel.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import ConfirmDialog from "$lib/components/ui/ConfirmDialog.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import type { IconName } from "$lib/components/ui/icons";
+  import Switch from "$lib/components/ui/Switch.svelte";
+  import { settings, type Settings } from "$lib/api";
+  import { toast } from "$lib/toast";
+  import { t } from "$lib/i18n.svelte";
 
-	/**
-	 * 设置 — A「片场暗房」shell (spec-v2 §3 nav item). Only the settings
-	 * that have no dedicated page live here: generation queue, agent runtime
-	 * and storage paths. LLMs, ComfyUI connections / workflows and Skills are
-	 * managed on 模型设置 / ComfyUI 连接 / 智能体 — one place per setting.
-	 */
+  /**
+   * 设置 — A「片场暗房」shell (spec-v2 §3 nav item). Only the settings
+   * that have no dedicated page live here: generation queue, agent runtime
+   * and storage paths. LLMs, ComfyUI connections / workflows and Skills are
+   * managed on 模型设置 / ComfyUI 连接 / 智能体 — one place per setting.
+   */
 
-	type Section = 'queue' | 'agent' | 'storage';
+  type Section = "queue" | "agent" | "storage" | "appearance";
 
-	const SECTIONS: { id: Section; labelKey: string; blurbKey: string; icon: IconName }[] = [
-		{ id: 'queue', labelKey: 'settings.secQueue', blurbKey: 'settings.secQueueBlurb', icon: 'queue' },
-		{ id: 'agent', labelKey: 'settings.secAgent', blurbKey: 'settings.secAgentBlurb', icon: 'sparkle' },
-		{ id: 'storage', labelKey: 'settings.secStorage', blurbKey: 'settings.secStorageBlurb', icon: 'folder' },
-	];
+  const SECTIONS: {
+    id: Section;
+    labelKey: string;
+    blurbKey: string;
+    icon: IconName;
+  }[] = [
+    {
+      id: "appearance",
+      labelKey: "shell.navSettings",
+      blurbKey: "settings.pageSub",
+      icon: "settings",
+    },
+    {
+      id: "queue",
+      labelKey: "settings.secQueue",
+      blurbKey: "settings.secQueueBlurb",
+      icon: "queue",
+    },
+    {
+      id: "agent",
+      labelKey: "settings.secAgent",
+      blurbKey: "settings.secAgentBlurb",
+      icon: "sparkle",
+    },
+    {
+      id: "storage",
+      labelKey: "settings.secStorage",
+      blurbKey: "settings.secStorageBlurb",
+      icon: "folder",
+    },
+  ];
 
-	const ELSEWHERE: { href: string; labelKey: string; blurbKey: string; icon: IconName }[] = [
-		{ href: '/models', labelKey: 'shell.navModels', blurbKey: 'settings.linkModelsBlurb', icon: 'assets' },
-		{ href: '/connections', labelKey: 'shell.navConnections', blurbKey: 'settings.linkConnectionsBlurb', icon: 'link' },
-		{ href: '/agents', labelKey: 'shell.navAgents', blurbKey: 'settings.linkAgentsBlurb', icon: 'sparkle' },
-	];
+  const ELSEWHERE: {
+    href: string;
+    labelKey: string;
+    blurbKey: string;
+    icon: IconName;
+  }[] = [
+    {
+      href: "/models",
+      labelKey: "shell.navModels",
+      blurbKey: "settings.linkModelsBlurb",
+      icon: "assets",
+    },
+    {
+      href: "/connections",
+      labelKey: "shell.navConnections",
+      blurbKey: "settings.linkConnectionsBlurb",
+      icon: "link",
+    },
+    {
+      href: "/agents",
+      labelKey: "shell.navAgents",
+      blurbKey: "settings.linkAgentsBlurb",
+      icon: "sparkle",
+    },
+  ];
 
-	// Old Calliope tab links (/settings?tab=llm …) land on the page that now
-	// owns that setting instead of a dead tab.
-	const MOVED_TABS: Record<string, string> = {
-		llm: '/models',
-		workflows: '/connections',
-		skills: '/agents',
-	};
+  // Old Calliope tab links (/settings?tab=llm …) land on the page that now
+  // owns that setting instead of a dead tab.
+  const MOVED_TABS: Record<string, string> = {
+    llm: "/models",
+    workflows: "/connections",
+    skills: "/agents",
+  };
 
-	const client = useQueryClient();
-	let tab = $state<Section>('queue');
+  const client = useQueryClient();
+  let tab = $state<Section>("queue");
 
-	afterNavigate((nav) => {
-		const raw = nav.to?.url.searchParams.get('tab') || 'queue';
-		if (MOVED_TABS[raw]) {
-			goto(MOVED_TABS[raw], { replaceState: true });
-			return;
-		}
-		tab = raw === 'comfy' ? 'queue' : SECTIONS.some((s) => s.id === raw) ? (raw as Section) : 'queue';
-	});
+  afterNavigate((nav) => {
+    const raw = nav.to?.url.searchParams.get("tab") || "queue";
+    if (MOVED_TABS[raw]) {
+      const destination = new URL(nav.to!.url);
+      destination.pathname = MOVED_TABS[raw];
+      goto(destination.pathname + destination.search + destination.hash, {
+        replaceState: true,
+      });
+      return;
+    }
+    tab =
+      raw === "comfy"
+        ? "queue"
+        : SECTIONS.some((s) => s.id === raw)
+          ? (raw as Section)
+          : "queue";
+  });
 
-	const settingsQuery = createQuery({
-		queryKey: ['settings'],
-		queryFn: settings.get,
-	});
+  const settingsQuery = createQuery({
+    queryKey: ["settings"],
+    queryFn: settings.get,
+  });
 
-	let draft = $state<Record<string, unknown>>({});
+  let draft = $state<Record<string, unknown>>({});
 
-	const dirtyKeys = $derived(Object.keys(draft).filter((k) => draft[k] !== undefined));
-	const isDirty = $derived(dirtyKeys.length > 0);
+  const dirtyKeys = $derived(
+    Object.keys(draft).filter((k) => draft[k] !== undefined),
+  );
+  const isDirty = $derived(dirtyKeys.length > 0);
 
-	const FIELD_SECTION: Record<string, Section> = {
-		dry_run: 'queue',
-		queue_concurrency: 'queue',
-		queue_poll_interval_sec: 'queue',
-		queue_poll_timeout_sec: 'queue',
-		queue_max_retries: 'queue',
-		agent_max_steps: 'agent',
-		agent_hardening_prompt: 'agent',
-		agent_history_char_budget: 'agent',
-		agent_shell_enabled: 'agent',
-		data_dir: 'storage',
-		assets_dir: 'storage',
-		agent_workspace_dir: 'storage',
-	};
-	const dirtySections = $derived(new Set(dirtyKeys.map((k) => FIELD_SECTION[k]).filter(Boolean)));
+  const FIELD_SECTION: Record<string, Section> = {
+    dry_run: "queue",
+    queue_concurrency: "queue",
+    queue_poll_interval_sec: "queue",
+    queue_poll_timeout_sec: "queue",
+    queue_max_retries: "queue",
+    agent_max_steps: "agent",
+    agent_hardening_prompt: "agent",
+    agent_history_char_budget: "agent",
+    agent_shell_enabled: "agent",
+    data_dir: "storage",
+    assets_dir: "storage",
+    agent_workspace_dir: "storage",
+  };
+  const dirtySections = $derived(
+    new Set(dirtyKeys.map((k) => FIELD_SECTION[k]).filter(Boolean)),
+  );
 
-	// Mirrors backend Field(ge=..., le=...) limits — validated client-side so
-	// save never trips a raw 422.
-	const NUMERIC_LIMITS: Record<string, { min: number; max: number; labelKey: string }> = {
-		queue_concurrency: { min: 1, max: 8, labelKey: 'settings.concurrencyField' },
-		queue_poll_interval_sec: { min: 0.5, max: 60, labelKey: 'settings.pollIntervalField' },
-		queue_poll_timeout_sec: { min: 0, max: 86400, labelKey: 'settings.pollTimeoutField' },
-		queue_max_retries: { min: 0, max: 10, labelKey: 'settings.maxRetriesField' },
-		agent_max_steps: { min: 1, max: 100, labelKey: 'settings.agentMaxStepsField' },
-		agent_history_char_budget: { min: 10000, max: 2000000, labelKey: 'settings.historyBudgetField' },
-	};
+  // Mirrors backend Field(ge=..., le=...) limits — validated client-side so
+  // save never trips a raw 422.
+  const NUMERIC_LIMITS: Record<
+    string,
+    { min: number; max: number; labelKey: string }
+  > = {
+    queue_concurrency: {
+      min: 1,
+      max: 8,
+      labelKey: "settings.concurrencyField",
+    },
+    queue_poll_interval_sec: {
+      min: 0.5,
+      max: 60,
+      labelKey: "settings.pollIntervalField",
+    },
+    queue_poll_timeout_sec: {
+      min: 0,
+      max: 86400,
+      labelKey: "settings.pollTimeoutField",
+    },
+    queue_max_retries: {
+      min: 0,
+      max: 10,
+      labelKey: "settings.maxRetriesField",
+    },
+    agent_max_steps: {
+      min: 1,
+      max: 100,
+      labelKey: "settings.agentMaxStepsField",
+    },
+    agent_history_char_budget: {
+      min: 10000,
+      max: 2000000,
+      labelKey: "settings.historyBudgetField",
+    },
+  };
 
-	function fieldError(key: string): string | null {
-		const limits = NUMERIC_LIMITS[key];
-		if (!limits) return null;
-		const raw = draft[key];
-		if (raw === undefined || raw === '' || raw === null) return null;
-		const v = Number(raw);
-		if (Number.isNaN(v)) return t('settings.notNumber', { label: t(limits.labelKey) });
-		if (v < limits.min) return t('settings.minError', { label: t(limits.labelKey), min: limits.min });
-		if (v > limits.max) return t('settings.maxError', { label: t(limits.labelKey), max: limits.max });
-		return null;
-	}
+  function fieldError(key: string): string | null {
+    const limits = NUMERIC_LIMITS[key];
+    if (!limits) return null;
+    const raw = draft[key];
+    if (raw === undefined || raw === "" || raw === null) return null;
+    const v = Number(raw);
+    if (Number.isNaN(v))
+      return t("settings.notNumber", { label: t(limits.labelKey) });
+    if (v < limits.min)
+      return t("settings.minError", {
+        label: t(limits.labelKey),
+        min: limits.min,
+      });
+    if (v > limits.max)
+      return t("settings.maxError", {
+        label: t(limits.labelKey),
+        max: limits.max,
+      });
+    return null;
+  }
 
-	const validationErrors = $derived.by(() => {
-		const errors: Record<string, string> = {};
-		for (const key of Object.keys(NUMERIC_LIMITS)) {
-			const err = fieldError(key);
-			if (err) errors[key] = err;
-		}
-		return errors;
-	});
-	const isValid = $derived(Object.keys(validationErrors).length === 0);
+  const validationErrors = $derived.by(() => {
+    const errors: Record<string, string> = {};
+    for (const key of Object.keys(NUMERIC_LIMITS)) {
+      const err = fieldError(key);
+      if (err) errors[key] = err;
+    }
+    return errors;
+  });
+  const isValid = $derived(Object.keys(validationErrors).length === 0);
 
-	function discardDraft() {
-		draft = {};
-	}
+  function discardDraft() {
+    draft = {};
+  }
 
-	const saveMutation = createMutation({
-		mutationFn: () => {
-			const update: Record<string, unknown> = {};
-			for (const [k, v] of Object.entries(draft)) {
-				if (v === undefined) continue;
-				// dry_run / shell may be false; the hardening prompt may be emptied.
-				if (v === '' && k !== 'agent_hardening_prompt') continue;
-				if (typeof v === 'string' && k.endsWith('_dir')) {
-					// Strip wrapping quotes users often paste from Explorer
-					update[k] = v.trim().replace(/^["']|["']$/g, '');
-					continue;
-				}
-				update[k] = v;
-			}
-			return settings.update(update);
-		},
-		onSuccess: (saved) => {
-			client.invalidateQueries({ queryKey: ['settings'] });
-			discardDraft();
-			toast.success(saved?.dry_run ? t('settings.savedDryRun') : t('settings.saved'));
-		},
-		onError: (err) => {
-			// Surface pydantic 422 validation dumps as a readable message.
-			let msg = err instanceof Error ? err.message : t('settings.saveFailed');
-			const m = msg.match(/"msg":"([^"]+)"/);
-			if (m) {
-				const field = msg.match(/\["body","([a-z_]+)"\]/);
-				msg = field
-					? t('settings.invalidField', { field: field[1].replace(/_/g, ' '), detail: m[1] })
-					: t('settings.invalidValue', { detail: m[1] });
-			}
-			toast.error(msg);
-		},
-	});
+  const saveMutation = createMutation({
+    mutationFn: () => {
+      const update: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(draft)) {
+        if (v === undefined) continue;
+        // dry_run / shell may be false; the hardening prompt may be emptied.
+        if (v === "" && k !== "agent_hardening_prompt") continue;
+        if (typeof v === "string" && k.endsWith("_dir")) {
+          // Strip wrapping quotes users often paste from Explorer
+          update[k] = v.trim().replace(/^["']|["']$/g, "");
+          continue;
+        }
+        update[k] = v;
+      }
+      return settings.update(update);
+    },
+    onSuccess: (saved) => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      discardDraft();
+      toast.success(
+        saved?.dry_run ? t("settings.savedDryRun") : t("settings.saved"),
+      );
+    },
+    onError: (err) => {
+      // Surface pydantic 422 validation dumps as a readable message.
+      let msg = err instanceof Error ? err.message : t("settings.saveFailed");
+      const m = msg.match(/"msg":"([^"]+)"/);
+      if (m) {
+        const field = msg.match(/\["body","([a-z_]+)"\]/);
+        msg = field
+          ? t("settings.invalidField", {
+              field: field[1].replace(/_/g, " "),
+              detail: m[1],
+            })
+          : t("settings.invalidValue", { detail: m[1] });
+      }
+      toast.error(msg);
+    },
+  });
 
-	// Leave-guard: in-app navigation away from /settings asks to discard;
-	// same-path section switches keep the draft. Tab close uses beforeunload.
-	let leaveOpen = $state(false);
-	let pendingUrl = $state<string | null>(null);
+  // Leave-guard: in-app navigation away from /settings asks to discard;
+  // same-path section switches keep the draft. Tab close uses beforeunload.
+  let leaveOpen = $state(false);
+  let pendingUrl = $state<string | null>(null);
 
-	beforeNavigate((nav) => {
-		if (!isDirty || !nav.to) return;
-		if (nav.to.url.pathname === nav.from?.url.pathname) return;
-		nav.cancel();
-		pendingUrl = `${nav.to.url.pathname}${nav.to.url.search}${nav.to.url.hash}`;
-		leaveOpen = true;
-	});
+  beforeNavigate((nav) => {
+    if (!isDirty || !nav.to) return;
+    if (nav.to.url.pathname === nav.from?.url.pathname) return;
+    nav.cancel();
+    pendingUrl = `${nav.to.url.pathname}${nav.to.url.search}${nav.to.url.hash}`;
+    leaveOpen = true;
+  });
 
-	function confirmLeave() {
-		const url = pendingUrl;
-		pendingUrl = null;
-		discardDraft();
-		if (url) goto(url);
-	}
+  function confirmLeave() {
+    const url = pendingUrl;
+    pendingUrl = null;
+    discardDraft();
+    if (url) goto(url);
+  }
 
-	function onBeforeUnload(e: BeforeUnloadEvent) {
-		if (!isDirty) return;
-		e.preventDefault();
-		e.returnValue = '';
-	}
+  function onBeforeUnload(e: BeforeUnloadEvent) {
+    if (!isDirty) return;
+    e.preventDefault();
+    e.returnValue = "";
+  }
 
-	function fieldValue(key: keyof Settings, fallback: string | number | boolean | null | undefined) {
-		if (draft[key] !== undefined && draft[key] !== '') return draft[key] as string;
-		const raw = fallback ?? '';
-		if (typeof raw === 'string') return raw.replace(/^["']|["']$/g, '');
-		return raw;
-	}
+  function fieldValue(
+    key: keyof Settings,
+    fallback: string | number | boolean | null | undefined,
+  ) {
+    if (draft[key] !== undefined && draft[key] !== "")
+      return draft[key] as string;
+    const raw = fallback ?? "";
+    if (typeof raw === "string") return raw.replace(/^["']|["']$/g, "");
+    return raw;
+  }
 
-	function boolValue(s: Settings, key: 'dry_run' | 'agent_shell_enabled'): boolean {
-		if (draft[key] !== undefined) return Boolean(draft[key]);
-		return s[key] === true;
-	}
+  function boolValue(
+    s: Settings,
+    key: "dry_run" | "agent_shell_enabled",
+  ): boolean {
+    if (draft[key] !== undefined) return Boolean(draft[key]);
+    return s[key] === true;
+  }
 
-	// History budget presets (chars). Large matches the backend default (400k).
-	const HISTORY_BUDGET_PRESETS: { value: number; labelKey: string }[] = [
-		{ value: 60_000, labelKey: 'settings.historyBudgetSmall' },
-		{ value: 120_000, labelKey: 'settings.historyBudgetMedium' },
-		{ value: 400_000, labelKey: 'settings.historyBudgetLarge' },
-	];
+  // History budget presets (chars). Large matches the backend default (400k).
+  const HISTORY_BUDGET_PRESETS: { value: number; labelKey: string }[] = [
+    { value: 60_000, labelKey: "settings.historyBudgetSmall" },
+    { value: 120_000, labelKey: "settings.historyBudgetMedium" },
+    { value: 400_000, labelKey: "settings.historyBudgetLarge" },
+  ];
 
-	function historyBudgetActive(s: Settings, value: number): boolean {
-		const current =
-			draft.agent_history_char_budget !== undefined
-				? Number(draft.agent_history_char_budget)
-				: Number(s.agent_history_char_budget ?? 0);
-		return current === value;
-	}
+  function historyBudgetActive(s: Settings, value: number): boolean {
+    const current =
+      draft.agent_history_char_budget !== undefined
+        ? Number(draft.agent_history_char_budget)
+        : Number(s.agent_history_char_budget ?? 0);
+    return current === value;
+  }
 
-	// Snap out-of-range numbers back into the valid range when the user leaves
-	// the field, so a typed 200 never reaches the backend.
-	function clampOnBlur(e: FocusEvent, key: string) {
-		const limits = NUMERIC_LIMITS[key];
-		if (!limits) return;
-		const el = e.currentTarget as HTMLInputElement;
-		const v = Number(el.value);
-		if (el.value === '' || Number.isNaN(v)) return;
-		const clamped = Math.min(Math.max(v, limits.min), limits.max);
-		if (clamped !== v) {
-			el.value = String(clamped);
-			draft[key] = clamped;
-		}
-	}
+  // Snap out-of-range numbers back into the valid range when the user leaves
+  // the field, so a typed 200 never reaches the backend.
+  function clampOnBlur(e: FocusEvent, key: string) {
+    const limits = NUMERIC_LIMITS[key];
+    if (!limits) return;
+    const el = e.currentTarget as HTMLInputElement;
+    const v = Number(el.value);
+    if (el.value === "" || Number.isNaN(v)) return;
+    const clamped = Math.min(Math.max(v, limits.min), limits.max);
+    if (clamped !== v) {
+      el.value = String(clamped);
+      draft[key] = clamped;
+    }
+  }
 
-	// The hardening prompt may be intentionally emptied, so it can't reuse
-	// fieldValue (which falls back to the saved value on '').
-	function hardeningDraft(s: Settings): string {
-		if (draft.agent_hardening_prompt !== undefined) return String(draft.agent_hardening_prompt);
-		return s.agent_hardening_prompt ?? '';
-	}
+  // The hardening prompt may be intentionally emptied, so it can't reuse
+  // fieldValue (which falls back to the saved value on '').
+  function hardeningDraft(s: Settings): string {
+    if (draft.agent_hardening_prompt !== undefined)
+      return String(draft.agent_hardening_prompt);
+    return s.agent_hardening_prompt ?? "";
+  }
 
-	function selectSection(id: Section) {
-		goto(`/settings?tab=${id}`, { replaceState: true, noScroll: true, keepFocus: true });
-	}
+  function selectSection(id: Section) {
+    goto(`/settings?tab=${id}`, {
+      replaceState: true,
+      noScroll: true,
+      keepFocus: true,
+    });
+  }
 
-	type NumField = {
-		key: keyof Settings & string;
-		labelKey: string;
-		hintKey?: string;
-		step: string;
-	};
-	const QUEUE_FIELDS: NumField[] = [
-		{ key: 'queue_concurrency', labelKey: 'settings.concurrencyField', step: '1' },
-		{ key: 'queue_max_retries', labelKey: 'settings.maxRetriesField', step: '1' },
-		{ key: 'queue_poll_interval_sec', labelKey: 'settings.pollIntervalField', step: '0.5' },
-		{
-			key: 'queue_poll_timeout_sec',
-			labelKey: 'settings.pollTimeoutField',
-			hintKey: 'settings.pollTimeoutHint',
-			step: '1',
-		},
-	];
+  type NumField = {
+    key: keyof Settings & string;
+    labelKey: string;
+    hintKey?: string;
+    step: string;
+  };
+  const QUEUE_FIELDS: NumField[] = [
+    {
+      key: "queue_concurrency",
+      labelKey: "settings.concurrencyField",
+      step: "1",
+    },
+    {
+      key: "queue_max_retries",
+      labelKey: "settings.maxRetriesField",
+      step: "1",
+    },
+    {
+      key: "queue_poll_interval_sec",
+      labelKey: "settings.pollIntervalField",
+      step: "0.5",
+    },
+    {
+      key: "queue_poll_timeout_sec",
+      labelKey: "settings.pollTimeoutField",
+      hintKey: "settings.pollTimeoutHint",
+      step: "1",
+    },
+  ];
 </script>
 
 <svelte:window onbeforeunload={onBeforeUnload} />
 
 {#snippet numberField(s: Settings, f: NumField)}
-	{@const limits = NUMERIC_LIMITS[f.key]}
-	<label class="field">
-		<span class="field-label">{t(f.labelKey)}</span>
-		<input
-			class="a-input mono"
-			class:invalid={validationErrors[f.key]}
-			type="number"
-			min={limits.min}
-			max={limits.max}
-			step={f.step}
-			value={String(fieldValue(f.key, s[f.key] as number))}
-			oninput={(e) => (draft[f.key] = e.currentTarget.value)}
-			onblur={(e) => clampOnBlur(e, f.key)}
-		/>
-		{#if validationErrors[f.key]}
-			<p class="field-error">{validationErrors[f.key]}</p>
-		{:else}
-			<p class="field-hint">
-				{t('settings.rangeHint', { min: limits.min, max: limits.max })}{#if f.hintKey}
-					· {t(f.hintKey)}{/if}
-			</p>
-		{/if}
-	</label>
+  {@const limits = NUMERIC_LIMITS[f.key]}
+  <label class="field">
+    <span class="field-label">{t(f.labelKey)}</span>
+    <input
+      class="a-input mono"
+      class:invalid={validationErrors[f.key]}
+      type="number"
+      min={limits.min}
+      max={limits.max}
+      step={f.step}
+      value={String(fieldValue(f.key, s[f.key] as number))}
+      oninput={(e) => (draft[f.key] = e.currentTarget.value)}
+      onblur={(e) => clampOnBlur(e, f.key)}
+    />
+    {#if validationErrors[f.key]}
+      <p class="field-error">{validationErrors[f.key]}</p>
+    {:else}
+      <p class="field-hint">
+        {t("settings.rangeHint", {
+          min: limits.min,
+          max: limits.max,
+        })}{#if f.hintKey}
+          · {t(f.hintKey)}{/if}
+      </p>
+    {/if}
+  </label>
 {/snippet}
 
-<AppShell active="settings" title={t('shell.navSettings')} subtitle={t('settings.pageSub')}>
-	{#snippet actions()}
-		<span class="status-chip" class:accent={isDirty}>
-			{#if isDirty}<span class="status-chip-dot" aria-hidden="true"></span>{/if}
-			{isDirty ? t('settings.unsaved') : t('settings.allSaved')}
-		</span>
-		<Button variant="ghost" disabled={!isDirty || $saveMutation.isPending} onclick={discardDraft}>
-			{t('settings.discard')}
-		</Button>
-		<Button
-			variant="primary"
-			disabled={!isDirty || !isValid}
-			loading={$saveMutation.isPending}
-			onclick={() => $saveMutation.mutate()}
-		>
-			{t('settings.saveChanges')}
-		</Button>
-	{/snippet}
+<AppShell
+  active="settings"
+  title={t("shell.navSettings")}
+  subtitle={t("settings.pageSub")}
+>
+  {#snippet actions()}
+    <span class="status-chip" class:accent={isDirty}>
+      {#if isDirty}<span class="status-chip-dot" aria-hidden="true"></span>{/if}
+      {isDirty ? t("settings.unsaved") : t("settings.allSaved")}
+    </span>
+    <Button
+      variant="ghost"
+      disabled={!isDirty || $saveMutation.isPending}
+      onclick={discardDraft}
+    >
+      {t("settings.discard")}
+    </Button>
+    <Button
+      variant="primary"
+      disabled={!isDirty || !isValid}
+      loading={$saveMutation.isPending}
+      onclick={() => $saveMutation.mutate()}
+    >
+      {t("settings.saveChanges")}
+    </Button>
+  {/snippet}
 
-	<div class="page">
-		<nav class="sections" aria-label={t('shell.navSettings')}>
-			{#each SECTIONS as sec (sec.id)}
-				<button
-					type="button"
-					class="sec"
-					class:active={tab === sec.id}
-					aria-current={tab === sec.id ? 'page' : undefined}
-					onclick={() => selectSection(sec.id)}
-				>
-					<span class="sec-icon"><Icon name={sec.icon} size={15} /></span>
-					<span class="sec-copy">
-						<span class="sec-label">
-							{t(sec.labelKey)}
-							{#if dirtySections.has(sec.id)}
-								<span class="dirty-dot" title={t('settings.unsaved')}></span>
-							{/if}
-						</span>
-						<span class="sec-blurb">{t(sec.blurbKey)}</span>
-					</span>
-				</button>
-			{/each}
+  <div class="page">
+    <nav class="sections" aria-label={t("shell.navSettings")}>
+      {#each SECTIONS as sec (sec.id)}
+        <button
+          type="button"
+          class="sec"
+          class:active={tab === sec.id}
+          aria-current={tab === sec.id ? "page" : undefined}
+          onclick={() => selectSection(sec.id)}
+        >
+          <span class="sec-icon"><Icon name={sec.icon} size={15} /></span>
+          <span class="sec-copy">
+            <span class="sec-label">
+              {sec.id === "appearance" ? "外观主题" : t(sec.labelKey)}
+              {#if dirtySections.has(sec.id)}
+                <span class="dirty-dot" title={t("settings.unsaved")}></span>
+              {/if}
+            </span>
+            <span class="sec-blurb"
+              >{sec.id === "appearance"
+                ? "选择片场灯光"
+                : t(sec.blurbKey)}</span
+            >
+          </span>
+        </button>
+      {/each}
 
-			<p class="elsewhere-head">{t('settings.elsewhere')}</p>
-			{#each ELSEWHERE as link (link.href)}
-				<a class="sec link" href={link.href}>
-					<span class="sec-icon"><Icon name={link.icon} size={15} /></span>
-					<span class="sec-copy">
-						<span class="sec-label">{t(link.labelKey)}</span>
-						<span class="sec-blurb">{t(link.blurbKey)}</span>
-					</span>
-					<span class="sec-arrow" aria-hidden="true">→</span>
-				</a>
-			{/each}
-		</nav>
+      <p class="elsewhere-head">{t("settings.elsewhere")}</p>
+      {#each ELSEWHERE as link (link.href)}
+        <a class="sec link" href={link.href}>
+          <span class="sec-icon"><Icon name={link.icon} size={15} /></span>
+          <span class="sec-copy">
+            <span class="sec-label">{t(link.labelKey)}</span>
+            <span class="sec-blurb">{t(link.blurbKey)}</span>
+          </span>
+          <span class="sec-arrow" aria-hidden="true">→</span>
+        </a>
+      {/each}
+    </nav>
 
-		<div class="content">
-			{#if $settingsQuery.isLoading}
-				<p class="muted">{t('settings.loading')}</p>
-			{:else if $settingsQuery.isError}
-				<div class="a-panel error-panel" role="alert">
-					<Icon name="alert" size={16} />
-					<p>{t('settings.loadFailed')}</p>
-					<Button size="sm" onclick={() => $settingsQuery.refetch()}>{t('common.retry')}</Button>
-				</div>
-			{:else if $settingsQuery.data}
-				{@const s = $settingsQuery.data}
-				{#if tab === 'queue'}
-					<section class="a-panel">
-						<header class="panel-head">
-							<h2 class="a-panel-title">{t('settings.queueSection')}</h2>
-							<p class="a-panel-lead">{t('settings.queueLead')}</p>
-						</header>
-						<div class="grid-2">
-							{#each QUEUE_FIELDS as f (f.key)}
-								{@render numberField(s, f)}
-							{/each}
-						</div>
-					</section>
+    <div class="content">
+      {#if tab === "appearance"}
+        <section class="a-panel">
+          <header class="panel-head">
+            <h2 class="a-panel-title">外观主题</h2>
+            <p class="a-panel-lead">同一个片场，换一种灯光。</p>
+          </header>
+          <ThemeChoices />
+        </section>
+      {:else if $settingsQuery.isLoading}
+        <p class="muted">{t("settings.loading")}</p>
+      {:else if $settingsQuery.isError}
+        <div class="a-panel error-panel" role="alert">
+          <Icon name="alert" size={16} />
+          <p>{t("settings.loadFailed")}</p>
+          <Button size="sm" onclick={() => $settingsQuery.refetch()}
+            >{t("common.retry")}</Button
+          >
+        </div>
+      {:else if $settingsQuery.data}
+        {@const s = $settingsQuery.data}
+        {#if tab === "queue"}
+          <section class="a-panel">
+            <header class="panel-head">
+              <h2 class="a-panel-title">{t("settings.queueSection")}</h2>
+              <p class="a-panel-lead">{t("settings.queueLead")}</p>
+            </header>
+            <div class="grid-2">
+              {#each QUEUE_FIELDS as f (f.key)}
+                {@render numberField(s, f)}
+              {/each}
+            </div>
+          </section>
 
-					<section class="a-panel">
-						<div class="switch-row">
-							<div class="switch-copy">
-								<h2 class="a-panel-title">{t('settings.dryRunTitle')}</h2>
-								<p class="a-panel-lead">{t('settings.dryRunHint')}</p>
-							</div>
-							<Switch
-								checked={boolValue(s, 'dry_run')}
-								label={t('settings.dryRunLabel')}
-								onchange={(next) => (draft.dry_run = next)}
-							/>
-						</div>
-					</section>
-				{:else if tab === 'agent'}
-					<section class="a-panel">
-						<header class="panel-head">
-							<h2 class="a-panel-title">{t('settings.agentRunSection')}</h2>
-							<p class="a-panel-lead">{t('settings.agentRunLead')}</p>
-						</header>
-						<div class="grid-2">
-							{@render numberField(s, {
-								key: 'agent_max_steps',
-								labelKey: 'settings.agentMaxStepsField',
-								hintKey: 'settings.agentMaxStepsHint',
-								step: '1',
-							})}
-							<div class="budget">
-								{@render numberField(s, {
-									key: 'agent_history_char_budget',
-									labelKey: 'settings.historyBudgetField',
-									step: '1000',
-								})}
-								<div class="presets">
-									{#each HISTORY_BUDGET_PRESETS as preset (preset.value)}
-										<button
-											type="button"
-											class="preset"
-											class:active={historyBudgetActive(s, preset.value)}
-											onclick={() => (draft.agent_history_char_budget = String(preset.value))}
-										>
-											{t(preset.labelKey)}
-										</button>
-									{/each}
-								</div>
-							</div>
-						</div>
-						<p class="field-hint">{t('settings.historyBudgetHint')}</p>
-					</section>
+          <section class="a-panel">
+            <div class="switch-row">
+              <div class="switch-copy">
+                <h2 class="a-panel-title">{t("settings.dryRunTitle")}</h2>
+                <p class="a-panel-lead">{t("settings.dryRunHint")}</p>
+              </div>
+              <Switch
+                checked={boolValue(s, "dry_run")}
+                label={t("settings.dryRunLabel")}
+                onchange={(next) => (draft.dry_run = next)}
+              />
+            </div>
+          </section>
+        {:else if tab === "agent"}
+          <section class="a-panel">
+            <header class="panel-head">
+              <h2 class="a-panel-title">{t("settings.agentRunSection")}</h2>
+              <p class="a-panel-lead">{t("settings.agentRunLead")}</p>
+            </header>
+            <div class="grid-2">
+              {@render numberField(s, {
+                key: "agent_max_steps",
+                labelKey: "settings.agentMaxStepsField",
+                hintKey: "settings.agentMaxStepsHint",
+                step: "1",
+              })}
+              <div class="budget">
+                {@render numberField(s, {
+                  key: "agent_history_char_budget",
+                  labelKey: "settings.historyBudgetField",
+                  step: "1000",
+                })}
+                <div class="presets">
+                  {#each HISTORY_BUDGET_PRESETS as preset (preset.value)}
+                    <button
+                      type="button"
+                      class="preset"
+                      class:active={historyBudgetActive(s, preset.value)}
+                      onclick={() =>
+                        (draft.agent_history_char_budget = String(
+                          preset.value,
+                        ))}
+                    >
+                      {t(preset.labelKey)}
+                    </button>
+                  {/each}
+                </div>
+              </div>
+            </div>
+            <p class="field-hint">{t("settings.historyBudgetHint")}</p>
+          </section>
 
-					<section class="a-panel">
-						<header class="panel-head">
-							<h2 class="a-panel-title">{t('settings.hardeningSection')}</h2>
-							<p class="a-panel-lead">
-								{t('settings.hardeningLead')}
-								{t('settings.hardeningCalloutStrong')}{t('settings.hardeningCalloutBody')}
-							</p>
-						</header>
-						<label class="field">
-							<span class="field-label">{t('settings.hardeningRulesLabel')}</span>
-							<textarea
-								class="a-textarea mono"
-								rows={10}
-								spellcheck="false"
-								value={hardeningDraft(s)}
-								oninput={(e) => (draft.agent_hardening_prompt = e.currentTarget.value)}
-								placeholder={t('settings.hardeningPlaceholder')}
-							></textarea>
-							<p class="field-hint">{t('settings.hardeningHint')}</p>
-						</label>
-					</section>
+          <section class="a-panel">
+            <header class="panel-head">
+              <h2 class="a-panel-title">{t("settings.hardeningSection")}</h2>
+              <p class="a-panel-lead">
+                {t("settings.hardeningLead")}
+                {t("settings.hardeningCalloutStrong")}{t(
+                  "settings.hardeningCalloutBody",
+                )}
+              </p>
+            </header>
+            <label class="field">
+              <span class="field-label"
+                >{t("settings.hardeningRulesLabel")}</span
+              >
+              <textarea
+                class="a-textarea mono"
+                rows={10}
+                spellcheck="false"
+                value={hardeningDraft(s)}
+                oninput={(e) =>
+                  (draft.agent_hardening_prompt = e.currentTarget.value)}
+                placeholder={t("settings.hardeningPlaceholder")}
+              ></textarea>
+              <p class="field-hint">{t("settings.hardeningHint")}</p>
+            </label>
+          </section>
 
-					<section class="a-panel">
-						<div class="switch-row">
-							<div class="switch-copy">
-								<h2 class="a-panel-title">{t('settings.shellSection')}</h2>
-								<p class="a-panel-lead">{t('settings.shellLead')}</p>
-							</div>
-							<Switch
-								checked={boolValue(s, 'agent_shell_enabled')}
-								label={t('settings.shellLabel')}
-								onchange={(next) => (draft.agent_shell_enabled = next)}
-							/>
-						</div>
-						<div class="note warn">
-							<Icon name="alert" size={14} />
-							<p>
-								<strong>{t('settings.shellCalloutStrong')}</strong>
-								{t('settings.shellCalloutBody')}
-							</p>
-						</div>
-						<p class="field-hint">{t('settings.shellHint')}</p>
-					</section>
+          <section class="a-panel">
+            <div class="switch-row">
+              <div class="switch-copy">
+                <h2 class="a-panel-title">{t("settings.shellSection")}</h2>
+                <p class="a-panel-lead">{t("settings.shellLead")}</p>
+              </div>
+              <Switch
+                checked={boolValue(s, "agent_shell_enabled")}
+                label={t("settings.shellLabel")}
+                onchange={(next) => (draft.agent_shell_enabled = next)}
+              />
+            </div>
+            <div class="note warn">
+              <Icon name="alert" size={14} />
+              <p>
+                <strong>{t("settings.shellCalloutStrong")}</strong>
+                {t("settings.shellCalloutBody")}
+              </p>
+            </div>
+            <p class="field-hint">{t("settings.shellHint")}</p>
+          </section>
 
-					<MemoryPanel />
-				{:else if tab === 'storage'}
-					<section class="a-panel">
-						<header class="panel-head">
-							<h2 class="a-panel-title">{t('settings.storageSection')}</h2>
-							<p class="a-panel-lead">{t('settings.storageLead')}</p>
-						</header>
-						<div class="note warn">
-							<Icon name="alert" size={14} />
-							<p>
-								<strong>{t('settings.storageCalloutStrong')}</strong>
-								{t('settings.storageCalloutBody')}
-							</p>
-						</div>
-						<label class="field">
-							<span class="field-label">{t('settings.dataDir')}</span>
-							<input
-								class="a-input mono"
-								value={String(fieldValue('data_dir', s.data_dir))}
-								oninput={(e) => (draft.data_dir = e.currentTarget.value)}
-							/>
-							<p class="field-hint">{t('settings.current')} <code>{s.data_dir}</code></p>
-						</label>
-						<label class="field">
-							<span class="field-label">{t('settings.assetsDir')}</span>
-							<input
-								class="a-input mono"
-								value={String(fieldValue('assets_dir', s.assets_dir))}
-								oninput={(e) => (draft.assets_dir = e.currentTarget.value)}
-							/>
-							<p class="field-hint">{t('settings.current')} <code>{s.assets_dir}</code></p>
-						</label>
-						<label class="field">
-							<span class="field-label">{t('settings.workspaceDir')}</span>
-							<input
-								class="a-input mono"
-								value={String(fieldValue('agent_workspace_dir', s.agent_workspace_dir))}
-								oninput={(e) => (draft.agent_workspace_dir = e.currentTarget.value)}
-							/>
-							<p class="field-hint">{t('settings.workspaceDirHint')}</p>
-							<p class="field-hint">{t('settings.current')} <code>{s.agent_workspace_dir}</code></p>
-						</label>
-					</section>
-				{/if}
-			{/if}
-		</div>
-	</div>
+          <MemoryPanel />
+        {:else if tab === "storage"}
+          <section class="a-panel">
+            <header class="panel-head">
+              <h2 class="a-panel-title">{t("settings.storageSection")}</h2>
+              <p class="a-panel-lead">{t("settings.storageLead")}</p>
+            </header>
+            <div class="note warn">
+              <Icon name="alert" size={14} />
+              <p>
+                <strong>{t("settings.storageCalloutStrong")}</strong>
+                {t("settings.storageCalloutBody")}
+              </p>
+            </div>
+            <label class="field">
+              <span class="field-label">{t("settings.dataDir")}</span>
+              <input
+                class="a-input mono"
+                value={String(fieldValue("data_dir", s.data_dir))}
+                oninput={(e) => (draft.data_dir = e.currentTarget.value)}
+              />
+              <p class="field-hint">
+                {t("settings.current")} <code>{s.data_dir}</code>
+              </p>
+            </label>
+            <label class="field">
+              <span class="field-label">{t("settings.assetsDir")}</span>
+              <input
+                class="a-input mono"
+                value={String(fieldValue("assets_dir", s.assets_dir))}
+                oninput={(e) => (draft.assets_dir = e.currentTarget.value)}
+              />
+              <p class="field-hint">
+                {t("settings.current")} <code>{s.assets_dir}</code>
+              </p>
+            </label>
+            <label class="field">
+              <span class="field-label">{t("settings.workspaceDir")}</span>
+              <input
+                class="a-input mono"
+                value={String(
+                  fieldValue("agent_workspace_dir", s.agent_workspace_dir),
+                )}
+                oninput={(e) =>
+                  (draft.agent_workspace_dir = e.currentTarget.value)}
+              />
+              <p class="field-hint">{t("settings.workspaceDirHint")}</p>
+              <p class="field-hint">
+                {t("settings.current")} <code>{s.agent_workspace_dir}</code>
+              </p>
+            </label>
+          </section>
+        {/if}
+      {/if}
+    </div>
+  </div>
 </AppShell>
 
 <ConfirmDialog
-	bind:open={leaveOpen}
-	title={t('settings.leaveTitle')}
-	message={t('settings.leaveMessage')}
-	confirmLabel={t('settings.leaveConfirm')}
-	danger
-	onconfirm={confirmLeave}
-	oncancel={() => (pendingUrl = null)}
+  bind:open={leaveOpen}
+  title={t("settings.leaveTitle")}
+  message={t("settings.leaveMessage")}
+  confirmLabel={t("settings.leaveConfirm")}
+  danger
+  onconfirm={confirmLeave}
+  oncancel={() => (pendingUrl = null)}
 />
 
 <style>
-	.page {
-		display: flex;
-		gap: 24px;
-		padding: 24px 28px 40px;
-		align-items: flex-start;
-	}
+  .page {
+    display: flex;
+    gap: 24px;
+    padding: 24px 28px 40px;
+    align-items: flex-start;
+  }
 
-	/* ---------------- section list ---------------- */
-	.sections {
-		width: 248px;
-		flex-shrink: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		padding: 10px;
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		box-sizing: border-box;
-		position: sticky;
-		top: 0;
-	}
-	.sec {
-		display: flex;
-		align-items: flex-start;
-		gap: 10px;
-		width: 100%;
-		padding: 9px 10px;
-		border: none;
-		border-radius: 8px;
-		background: transparent;
-		color: var(--text-2);
-		font-family: inherit;
-		text-align: left;
-		text-decoration: none;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			color 150ms;
-	}
-	.sec:hover {
-		background: var(--surface-3);
-		color: var(--text);
-	}
-	.sec.active {
-		background: var(--surface-3);
-		color: var(--text);
-	}
-	.sec-icon {
-		display: inline-flex;
-		margin-top: 2px;
-		flex-shrink: 0;
-	}
-	.sec.active .sec-icon {
-		color: var(--accent);
-	}
-	.sec-copy {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 0;
-		flex: 1;
-	}
-	.sec-label {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 13px;
-		font-weight: 600;
-	}
-	.sec-blurb {
-		font-size: 11px;
-		line-height: 1.5;
-		color: var(--text-3);
-	}
-	.sec-arrow {
-		color: var(--text-3);
-		font-size: 12px;
-		margin-top: 1px;
-	}
-	.dirty-dot {
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-		background: var(--accent);
-	}
-	.elsewhere-head {
-		margin: 12px 10px 4px;
-		padding-top: 12px;
-		border-top: 1px solid var(--border);
-		font-size: 11px;
-		color: var(--text-3);
-	}
+  /* ---------------- section list ---------------- */
+  .sections {
+    width: 248px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 10px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    box-sizing: border-box;
+    position: sticky;
+    top: 0;
+  }
+  .sec {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    width: 100%;
+    padding: 9px 10px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text-2);
+    font-family: inherit;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      color 150ms;
+  }
+  .sec:hover {
+    background: var(--surface-3);
+    color: var(--text);
+  }
+  .sec.active {
+    background: var(--surface-3);
+    color: var(--text);
+  }
+  .sec-icon {
+    display: inline-flex;
+    margin-top: 2px;
+    flex-shrink: 0;
+  }
+  .sec.active .sec-icon {
+    color: var(--accent);
+  }
+  .sec-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+  .sec-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  .sec-blurb {
+    font-size: 11px;
+    line-height: 1.5;
+    color: var(--text-3);
+  }
+  .sec-arrow {
+    color: var(--text-3);
+    font-size: 12px;
+    margin-top: 1px;
+  }
+  .dirty-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+  }
+  .elsewhere-head {
+    margin: 12px 10px 4px;
+    padding-top: 12px;
+    border-top: 1px solid var(--border);
+    font-size: 11px;
+    color: var(--text-3);
+  }
 
-	/* ---------------- content ---------------- */
-	.content {
-		flex: 1;
-		min-width: 0;
-		max-width: 820px;
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-	}
-	.panel-head {
-		margin-bottom: 16px;
-	}
-	.grid-2 {
-		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 0 16px;
-	}
-	.budget .presets {
-		margin: -6px 0 14px;
-	}
-	.switch-row {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 20px;
-	}
-	.presets {
-		display: flex;
-		gap: 6px;
-		flex-wrap: wrap;
-	}
-	/* §4.3 分段 chip: selected = amber outline + amber text + dim fill */
-	.preset {
-		padding: 3px 11px;
-		border-radius: 999px;
-		border: 1px solid var(--border-strong);
-		background: transparent;
-		color: var(--text-2);
-		font-family: inherit;
-		font-size: 11.5px;
-		cursor: pointer;
-		transition:
-			border-color 150ms,
-			color 150ms,
-			background-color 150ms;
-	}
-	.preset:hover {
-		border-color: var(--border-hover);
-		color: var(--text);
-	}
-	.preset.active {
-		border-color: var(--accent);
-		background: var(--accent-dim);
-		color: var(--accent);
-	}
-	.note {
-		display: flex;
-		align-items: flex-start;
-		gap: 8px;
-		margin: 14px 0;
-		padding: 10px 12px;
-		border-radius: 8px;
-		border: 1px dashed var(--border-strong);
-		color: var(--text-2);
-	}
-	.note.warn :global(.icon) {
-		color: var(--warn);
-		flex-shrink: 0;
-		margin-top: 2px;
-	}
-	.note p {
-		margin: 0;
-		font-size: 12px;
-		line-height: 1.6;
-	}
-	.note strong {
-		color: var(--text);
-	}
-	.field-hint code {
-		color: var(--text-2);
-		word-break: break-all;
-	}
-	.muted {
-		color: var(--text-3);
-	}
-	.error-panel {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		color: var(--error);
-	}
-	.error-panel p {
-		margin: 0;
-		flex: 1;
-		font-size: 12.5px;
-	}
-
-	/* ---------------- responsive (§4.5) ---------------- */
-	@media (max-width: 760px) {
-		.page {
-			flex-direction: column;
-			padding: 18px;
-		}
-		.sections {
-			width: 100%;
-			position: static;
-			flex-direction: row;
-			flex-wrap: wrap;
-		}
-		.sec {
-			width: auto;
-			flex: 1 1 200px;
-		}
-		.elsewhere-head {
-			flex-basis: 100%;
-			margin: 6px 10px 0;
-			padding-top: 8px;
-		}
-		.content {
-			max-width: none;
-			width: 100%;
-		}
-		.grid-2 {
-			grid-template-columns: minmax(0, 1fr);
-		}
-	}
-.page {
-		max-width: 1280px;
-		padding: 24px 28px 30px;
-	}
-	.a-panel {
-		border-radius: 10px;
-		background: #16161b;
-	}
+  /* ---------------- content ---------------- */
+  .content {
+    flex: 1;
+    min-width: 0;
+    max-width: 820px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+  .panel-head {
+    margin-bottom: 16px;
+  }
+  .grid-2 {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0 16px;
+  }
+  .budget .presets {
+    margin: -6px 0 14px;
+  }
+  .switch-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+  }
+  .presets {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  /* §4.3 分段 chip: selected = amber outline + amber text + dim fill */
+  .preset {
+    padding: 3px 11px;
+    border-radius: 999px;
+    border: 1px solid var(--border-strong);
+    background: transparent;
+    color: var(--text-2);
+    font-family: inherit;
+    font-size: 11.5px;
+    cursor: pointer;
+    transition:
+      border-color 150ms,
+      color 150ms,
+      background-color 150ms;
+  }
+  .preset:hover {
+    border-color: var(--border-hover);
+    color: var(--text);
+  }
+  .preset.active {
+    border-color: var(--accent);
+    background: var(--accent-dim);
+    color: var(--accent);
+  }
+  .note {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin: 14px 0;
+    padding: 10px 12px;
+    border-radius: 8px;
+    border: 1px dashed var(--border-strong);
+    color: var(--text-2);
+  }
+  .note.warn :global(.icon) {
+    color: var(--warn);
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  .note p {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.6;
+  }
+  .note strong {
+    color: var(--text);
+  }
+  .field-hint code {
+    color: var(--text-2);
+    word-break: break-all;
+  }
+  .muted {
+    color: var(--text-3);
+  }
+  .error-panel {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--error);
+  }
+  .error-panel p {
+    margin: 0;
+    flex: 1;
+    font-size: 12.5px;
+  }
 
+  /* ---------------- responsive (§4.5) ---------------- */
+  @media (max-width: 760px) {
+    .page {
+      flex-direction: column;
+      padding: 18px;
+    }
+    .sections {
+      width: 100%;
+      position: static;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    .sec {
+      width: auto;
+      flex: 1 1 200px;
+    }
+    .elsewhere-head {
+      flex-basis: 100%;
+      margin: 6px 10px 0;
+      padding-top: 8px;
+    }
+    .content {
+      max-width: none;
+      width: 100%;
+    }
+    .grid-2 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+  .page {
+    max-width: 1280px;
+    padding: 24px 28px 30px;
+  }
 </style>
diff --git a/calliope-web/static/themes.css b/calliope-web/static/themes.css
new file mode 100644
index 00000000..e955055b
--- /dev/null
+++ b/calliope-web/static/themes.css
@@ -0,0 +1,547 @@
+/* HEL-726 approved themes. Loaded before the app for first-paint safety. */
+:root,
+[data-theme="night"] {
+  color-scheme: dark;
+  /* surfaces: ink black with a faint blue cast, never pure #000 */
+  --bg-0: #07080c;
+  --bg-1: #0c0e14;
+  --bg-2: #12151d;
+  --bg-3: #1a1e29;
+  --bg-4: #232838;
+  --line: rgb(var(--ink) / 0.06);
+  --line-2: rgb(var(--ink) / 0.11);
+  --line-3: rgb(var(--ink) / 0.18);
+  /* text: warm paper white */
+  --tx-1: #f3efe6;
+  --tx-2: #aaa79e;
+  --tx-3: #6f6d68;
+  --tx-inv: #1a1206;
+  /* key light: tungsten gold */
+  --gold: #e9b04b;
+  --gold-hi: #f8d68c;
+  --gold-lo: #b8771f;
+  --grad-gold: linear-gradient(135deg, #fbe1a1 0%, #efb54f 45%, #d98a26 100%);
+  /* scene lights — each workspace has its own colour temperature */
+  --sc-image: #3fd8c6;
+  --sc-video: #ff8a3d;
+  --sc-agent: #a879ff;
+  --sc-project: #e9b04b;
+  --sc-manage: #7f93b5;
+  --scene: var(--gold);
+  /* status */
+  --ok: #43d39a;
+  --warn: #f2b33d;
+  --err: #ff5d6c;
+  --info: #5aa9ff;
+  /* type */
+  --font:
+    "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
+    system-ui, sans-serif;
+  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
+  --fs-display: 28px;
+  --fs-h1: 20px;
+  --fs-h2: 16px;
+  --fs-body: 13px;
+  --fs-small: 12px;
+  --fs-micro: 11px;
+  /* space (4 base) */
+  --s1: 4px;
+  --s2: 8px;
+  --s3: 12px;
+  --s4: 16px;
+  --s5: 20px;
+  --s6: 24px;
+  --s8: 32px;
+  /* radius */
+  --r-xs: 4px;
+  --r-sm: 6px;
+  --r-md: 10px;
+  --r-lg: 14px;
+  --r-xl: 20px;
+  --r-pill: 999px;
+  /* elevation */
+  --sh-1: 0 1px 0 rgb(var(--ink) / 0.04) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
+  --sh-2: 0 1px 0 rgb(var(--ink) / 0.05) inset, 0 12px 32px rgba(0, 0, 0, 0.5);
+  --sh-gold:
+    0 6px 22px rgba(233, 160, 60, 0.35),
+    0 0 0 1px rgba(255, 220, 150, 0.35) inset;
+  /* motion */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --t-fast: 120ms;
+  --t-base: 200ms;
+  --t-slow: 320ms;
+  --t-reveal: 700ms;
+  /* layout */
+  --rail: 68px;
+  --list: 272px;
+  --hist: 92px;
+  --head: 48px;
+  /* ---- theme-semantic tokens (v2 · 主题化) ---- */
+  --ink: 255 255 255; /* overlay channel: hover tint, hairlines (white in dark, ink in light) */
+  --hi: white; /* scene-coloured text is mixed toward this for contrast */
+  --on-scene: #140a03; /* text on a solid scene/status colour */
+  --on-ok: #06140e;
+  --sc-asset: #ff86b0; /* 素材资产 helper colour (agent roster) */
+  --glass: color-mix(in srgb, var(--bg-1) 70%, transparent);
+  --scrim: rgba(4, 5, 8, 0.6);
+  --well: var(--bg-0); /* inputs, segmented track */
+  --media-shadow:
+    0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgb(255 255 255 / 0.07);
+  --sh-gold-hover:
+    0 8px 28px rgba(233, 160, 60, 0.5), 0 0 0 1px rgba(255, 230, 170, 0.5) inset;
+  --brand-grad: radial-gradient(
+    circle at 30% 25%,
+    #fff3cf 0,
+    #efb54f 35%,
+    #9b5a12 100%
+  );
+  --brand-glow: 0 0 24px rgba(233, 176, 75, 0.35);
+  --brand-ink: #1b1206;
+  --display-grad: linear-gradient(
+    90deg,
+    var(--gold-hi),
+    var(--gold) 60%,
+    #ff9b5a
+  );
+  --glow: 1; /* 1 = glows on (dark themes), 0 = off (light / neutral) */
+  /* signature effects */
+  --gen-bg: #0b0d12;
+  --grain: rgba(255, 255, 255, 0.08);
+  --beam: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--scene) 30%, transparent),
+    rgba(255, 255, 255, 0.25),
+    transparent
+  );
+  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='white' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
+  --scanline: rgb(var(--ink) / 0.012);
+  --stage-tint: 7%;
+  /* agent atmosphere */
+  --aur-1: #7c4dff;
+  --aur-2: #ff5fa8;
+  --aur-3: #2fd5c5;
+  --aur-op: 0.33;
+  --agent-hero: linear-gradient(
+    120deg,
+    rgba(32, 20, 58, 0.9),
+    rgba(14, 12, 26, 0.92) 55%,
+    rgba(10, 22, 30, 0.9)
+  );
+  --agent-title: linear-gradient(90deg, #fff, #d9c6ff 50%, #ffb3d9);
+  --orb-core: radial-gradient(
+    circle at 35% 30%,
+    #fff 0,
+    #e3d4ff 12%,
+    #a879ff 40%,
+    #4b1fa8 75%,
+    transparent 76%
+  );
+  --particle: 214, 190, 255;
+  --fail-a: #1a1215;
+  --fail-b: #140f12;
+}
+
+[data-theme="day"] {
+  color-scheme: light;
+  --bg-0: #e9e4da;
+  --bg-1: #f4f1ea;
+  --bg-2: #fbf9f5;
+  --bg-3: #ffffff;
+  --bg-4: #efe9df;
+  --ink: 38 30 18;
+  --line: rgb(38 30 18 / 0.09);
+  --line-2: rgb(38 30 18 / 0.15);
+  --line-3: rgb(38 30 18 / 0.26);
+  --tx-1: #1f1b15;
+  --tx-2: #55504a;
+  --tx-3: #736d65;
+  --tx-inv: #ffffff;
+  --gold: #a65a0c;
+  --gold-hi: #8a4a06;
+  --gold-lo: #c98a3a;
+  --grad-gold: linear-gradient(135deg, #bd6512 0%, #a9580d 55%, #984d08 100%);
+  --sc-image: #0b8378;
+  --sc-video: #c2511a;
+  --sc-agent: #6d45d0;
+  --sc-project: #a65a0c;
+  --sc-manage: #4c6286;
+  --sc-asset: #b93a72;
+  --ok: #11804f;
+  --warn: #9a6400;
+  --err: #c42b41;
+  --info: #2263c2;
+  --hi: #141109;
+  --on-scene: #ffffff;
+  --on-ok: #ffffff;
+  --sh-1:
+    0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 1px 2px rgba(60, 44, 20, 0.1);
+  --sh-2:
+    0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 32px rgba(60, 44, 20, 0.14),
+    0 2px 6px rgba(60, 44, 20, 0.06);
+  --sh-gold:
+    0 4px 14px rgba(166, 90, 12, 0.28), 0 0 0 1px rgba(120, 60, 0, 0.18) inset;
+  --sh-gold-hover:
+    0 6px 20px rgba(166, 90, 12, 0.38), 0 0 0 1px rgba(120, 60, 0, 0.24) inset;
+  --glass: color-mix(in srgb, var(--bg-1) 88%, transparent);
+  --scrim: rgba(40, 32, 20, 0.34);
+  --well: #ffffff;
+  --media-shadow:
+    0 14px 36px rgba(50, 38, 18, 0.2), 0 0 0 1px rgba(38, 30, 18, 0.1);
+  --brand-grad: linear-gradient(145deg, #2c261d, #14110c);
+  --brand-glow: 0 2px 8px rgba(40, 30, 15, 0.25);
+  --brand-ink: #f2c46d;
+  --display-grad: linear-gradient(90deg, #a65a0c, #c2511a);
+  --glow: 0;
+  --gen-bg: #e3ddd1;
+  --grain: rgba(40, 30, 18, 0.1);
+  --beam: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--scene) 24%, transparent),
+    rgba(255, 255, 255, 0.85),
+    transparent
+  );
+  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='%23261e12' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
+  --scanline: transparent;
+  --stage-tint: 6%;
+  --aur-1: #b9a0ff;
+  --aur-2: #ffb39a;
+  --aur-3: #8fe0d4;
+  --aur-op: 0.42;
+  --agent-hero: linear-gradient(120deg, #efe7ff, #faf7f1 55%, #e4f3ef);
+  --agent-title: linear-gradient(90deg, #24163f, #5b34c4 55%, #a2346f);
+  --orb-core: radial-gradient(
+    circle at 35% 30%,
+    #fff 0,
+    #efe6ff 14%,
+    #a98cf0 42%,
+    #6d45d0 75%,
+    transparent 76%
+  );
+  --particle: 109, 69, 208;
+  --fail-a: #f6e3e3;
+  --fail-b: #efd6d7;
+}
+
+[data-theme="grade"] {
+  color-scheme: dark;
+  --bg-0: #1b1b1c;
+  --bg-1: #222223;
+  --bg-2: #29292b;
+  --bg-3: #323234;
+  --bg-4: #3c3c3f;
+  --ink: 255 255 255;
+  --line: rgb(255 255 255 / 0.075);
+  --line-2: rgb(255 255 255 / 0.13);
+  --line-3: rgb(255 255 255 / 0.22);
+  --tx-1: #ecebe8;
+  --tx-2: #acaba6;
+  --tx-3: #85847f;
+  --tx-inv: #141516;
+  --r-xs: 2px;
+  --r-sm: 4px;
+  --r-md: 6px;
+  --r-lg: 8px;
+  --r-xl: 10px;
+  --gold: #d9dde2;
+  --gold-hi: #f2f4f6;
+  --gold-lo: #9aa1aa;
+  --grad-gold: linear-gradient(180deg, #f6f7f8 0%, #d5d9de 100%);
+  --sc-image: #6fc2b7;
+  --sc-video: #d8a06c;
+  --sc-agent: #a598d8;
+  --sc-project: #d4bc8a;
+  --sc-manage: #909cae;
+  --sc-asset: #d394b0;
+  --ok: #4cc38f;
+  --warn: #e3a93b;
+  --err: #ee5d70;
+  --info: #5d9fe3;
+  --hi: white;
+  --on-scene: #141516;
+  --on-ok: #06140e;
+  --sh-1:
+    0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
+  --sh-2:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 30px rgba(0, 0, 0, 0.45);
+  --sh-gold:
+    0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
+  --sh-gold-hover:
+    0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
+  --glass: color-mix(in srgb, var(--bg-1) 82%, transparent);
+  --scrim: rgba(0, 0, 0, 0.55);
+  --well: #18181a;
+  --media-shadow:
+    0 18px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
+  --brand-grad: linear-gradient(145deg, #f1f2f3, #aeb3ba);
+  --brand-glow: none;
+  --brand-ink: #17181a;
+  --display-grad: linear-gradient(90deg, #ffffff, #bfc5cc);
+  --glow: 0;
+  --gen-bg: #1a1b1d;
+  --grain: rgba(255, 255, 255, 0.06);
+  --beam: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.07),
+    rgba(255, 255, 255, 0.22),
+    transparent
+  );
+  --scanline: transparent;
+  --stage-tint: 0%;
+  --aur-1: #5d5a80;
+  --aur-2: #7a6070;
+  --aur-3: #4f7470;
+  --aur-op: 0.16;
+  --agent-hero: linear-gradient(120deg, #202027, #1b1c1e 60%, #1b2020);
+  --agent-title: linear-gradient(90deg, #ffffff, #d4d0ea);
+  --orb-core: radial-gradient(
+    circle at 35% 30%,
+    #fff 0,
+    #e7e5f2 14%,
+    #a598d8 44%,
+    #3e3a5c 76%,
+    transparent 77%
+  );
+  --particle: 205, 205, 215;
+  --fail-a: #211a1b;
+  --fail-b: #1b1617;
+}
+
+[data-theme="bluehour"] {
+  color-scheme: dark;
+  --bg-0: #0a1029;
+  --bg-1: #0f1838;
+  --bg-2: #162148;
+  --bg-3: #1f2c5c;
+  --bg-4: #2a386e;
+  --r-sm: 8px;
+  --r-md: 12px;
+  --r-lg: 18px;
+  --r-xl: 26px;
+  --ink: 214 224 255;
+  --line: rgb(214 224 255 / 0.07);
+  --line-2: rgb(214 224 255 / 0.12);
+  --line-3: rgb(214 224 255 / 0.2);
+  --tx-1: #eef1fb;
+  --tx-2: #a9b1cc;
+  --tx-3: #7680a2;
+  --tx-inv: #2b0c05;
+  --gold: #ff9a6c;
+  --gold-hi: #ffc7a8;
+  --gold-lo: #d9603f;
+  --grad-gold: linear-gradient(135deg, #ffd3b4 0%, #ff9a6c 45%, #f0644f 100%);
+  --sc-image: #4fd6ea;
+  --sc-video: #ffbb55;
+  --sc-agent: #b592ff;
+  --sc-project: #ff9a6c;
+  --sc-manage: #8aa0dc;
+  --sc-asset: #ff86c0;
+  --ok: #4fd69c;
+  --warn: #ffc94d;
+  --err: #ff4d6d;
+  --info: #69b4ff;
+  --hi: white;
+  --on-scene: #1a0b04;
+  --on-ok: #05150e;
+  --sh-1:
+    0 1px 0 rgba(214, 224, 255, 0.05) inset, 0 2px 8px rgba(0, 0, 10, 0.4);
+  --sh-2:
+    0 1px 0 rgba(214, 224, 255, 0.06) inset, 0 12px 32px rgba(0, 0, 12, 0.55);
+  --sh-gold:
+    0 6px 24px rgba(255, 120, 90, 0.38),
+    0 0 0 1px rgba(255, 214, 186, 0.42) inset;
+  --sh-gold-hover:
+    0 8px 30px rgba(255, 120, 90, 0.52),
+    0 0 0 1px rgba(255, 226, 206, 0.55) inset;
+  --scrim: rgba(4, 6, 16, 0.62);
+  --media-shadow:
+    0 30px 80px rgba(0, 0, 14, 0.62), 0 0 0 1px rgba(214, 224, 255, 0.08);
+  --brand-grad: radial-gradient(
+    circle at 30% 25%,
+    #ffe4d2 0,
+    #ff9a6c 38%,
+    #a3363a 100%
+  );
+  --brand-glow: 0 0 26px rgba(255, 140, 100, 0.42);
+  --brand-ink: #2b0c05;
+  --display-grad: linear-gradient(90deg, #ffd3b4, #ff9a6c 55%, #ff7096);
+  --glow: 1;
+  --gen-bg: #0b1124;
+  --grain: rgba(214, 224, 255, 0.08);
+  --beam: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--scene) 34%, transparent),
+    rgba(255, 236, 220, 0.3),
+    transparent
+  );
+  --stage-tint: 10%;
+  --aur-1: #3e5bff;
+  --aur-2: #ff7a8a;
+  --aur-3: #2fd5e5;
+  --aur-op: 0.36;
+  --agent-hero: linear-gradient(
+    120deg,
+    rgba(26, 32, 84, 0.92),
+    rgba(12, 16, 40, 0.94) 55%,
+    rgba(44, 18, 52, 0.9)
+  );
+  --agent-title: linear-gradient(90deg, #ffffff, #c9d4ff 50%, #ffb8a0);
+  --orb-core: radial-gradient(
+    circle at 35% 30%,
+    #fff 0,
+    #ffe1cf 12%,
+    #ff9a6c 38%,
+    #5a2fb0 76%,
+    transparent 77%
+  );
+  --particle: 255, 206, 186;
+  --fail-a: #1d1220;
+  --fail-b: #160e1a;
+}
+
+@media (max-width: 1366px) {
+  :root {
+    --list: 248px;
+    --hist: 84px;
+  }
+}
+@media (max-width: 1280px) {
+  :root {
+    --rail: 60px;
+    --list: 236px;
+    --hist: 76px;
+    --head: 44px;
+  }
+}
+
+/* Compatibility names for existing pages; no independent colour palette. */
+:root {
+  --accent-grad-hover: var(--grad-gold);
+  --accent-ring: color-mix(in srgb, var(--gold) 25%, transparent);
+  --accent-wash: var(--accent-soft);
+  --btn-glow-hover: var(--sh-gold-hover);
+  --composer-bg: var(--glass);
+  --composer-focus: var(--bg-2);
+  --float-bg: var(--bg-2);
+  --on-media: #fff;
+  --on-media-line: #ffffff66;
+  --sel-shadow: 0 0 0 1px var(--gold);
+  --bg: var(--bg-0);
+  --paper: var(--bg-2);
+  --lime: color-mix(in srgb, var(--sc-image) 14%, var(--bg-2));
+  --rose: color-mix(in srgb, var(--sc-asset) 14%, var(--bg-2));
+  --text: var(--tx-1);
+  --text-2: var(--tx-2);
+  --text-3: var(--tx-3);
+  --accent: var(--gold);
+  --accent-hi: var(--gold-hi);
+  --accent-lo: var(--gold-lo);
+  --accent-ink: var(--tx-inv);
+  --accent-soft: color-mix(in srgb, var(--gold) 9%, transparent);
+  --accent-line: color-mix(in srgb, var(--gold) 35%, transparent);
+  --accent-grad: var(--grad-gold);
+  --accent-glow: var(--sh-gold);
+  --btn-glow: var(--sh-gold);
+  --page-glow: linear-gradient(transparent, transparent);
+  --ok-soft: color-mix(in srgb, var(--ok) 9%, transparent);
+  --run: var(--info);
+  --run-soft: color-mix(in srgb, var(--info) 9%, transparent);
+  --run-grad: linear-gradient(90deg, var(--info), var(--sc-agent));
+  --err-solid: var(--err);
+  --err-soft: color-mix(in srgb, var(--err) 9%, transparent);
+  --err-line: color-mix(in srgb, var(--err) 40%, transparent);
+  --warn-soft: color-mix(in srgb, var(--warn) 9%, transparent);
+  --overlay: var(--scrim);
+  --media-scrim: #101017ee;
+  --media-text: #fff;
+  --media-line: #ffffff66;
+  --stage-bg: var(--bg-0);
+  --fs-title: 15px;
+  --fs-section: 14px;
+  --fs-body-sm: 12.5px;
+  --fs-aux: 12px;
+  --fs-mini: 11px;
+  --lh-body: 1.55;
+  --sp-1: 4px;
+  --sp-2: 6px;
+  --sp-3: 8px;
+  --sp-4: 10px;
+  --sp-5: 12px;
+  --sp-6: 16px;
+  --sp-7: 20px;
+  --sp-8: 28px;
+  --shadow-float: var(--sh-2);
+  --rail-w: var(--rail);
+  --topbar-h: var(--head);
+  --tabbar-h: 0px;
+  --sprocket: none;
+  --frame-w: 0px;
+  --frame-arm: 12px;
+  --frame-inset: -4px;
+  --paper-w: 4px;
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --d-press: 160ms;
+  --d-state: 160ms;
+  --d-pop: 180ms;
+  --d-leave: 200ms;
+  --d-enter: 220ms;
+  --d-drawer: 250ms;
+  --d-flash: 900ms;
+  --d-progress: 400ms;
+  --press-scale: 0.97;
+  --avatar-1: color-mix(in srgb, var(--sc-project) 20%, var(--bg-2));
+  --avatar-2: color-mix(in srgb, var(--sc-image) 20%, var(--bg-2));
+  --avatar-3: color-mix(in srgb, var(--sc-video) 20%, var(--bg-2));
+  --avatar-4: color-mix(in srgb, var(--sc-asset) 20%, var(--bg-2));
+  --avatar-5: color-mix(in srgb, var(--sc-agent) 20%, var(--bg-2));
+  --id-1: var(--sc-project);
+  --id-2: var(--sc-image);
+  --id-3: var(--sc-video);
+  --id-4: var(--sc-asset);
+  --id-5: var(--sc-agent);
+  --surface: var(--bg-2);
+  --surface-2: var(--bg-3);
+  --surface-3: var(--bg-4);
+  --border: var(--line);
+  --border-strong: var(--line-2);
+  --border-hover: var(--line-2);
+  --accent-dim: var(--accent-soft);
+  --success: var(--ok);
+  --success-dim: var(--ok-soft);
+  --info-dim: color-mix(in srgb, var(--info) 9%, transparent);
+  --error: var(--err);
+  --error-dim: var(--err-soft);
+  --warning: var(--warn);
+  --bg-primary: var(--bg);
+  --bg-surface: var(--bg-2);
+  --bg-elevated: var(--bg-3);
+  --text-primary: var(--text);
+  --text-secondary: var(--text-2);
+  --text-muted: var(--text-3);
+  --font-a-mono: var(--mono);
+  --font-display: var(--font);
+  --font-body: var(--font);
+  --font-mono: var(--mono);
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-md);
+  --radius-lg: var(--r-lg);
+  --space-sm: var(--sp-3);
+  --space-md: var(--sp-6);
+  --pill-bg: var(--bg-3);
+  --pill-border: var(--line-2);
+  --pill-radius: var(--r-pill);
+  --pill-height: 36px;
+  --pill-padding: 0 14px;
+  --pill-font-size: var(--fs-body);
+}
+
+html {
+  background: var(--bg-0);
+  color: var(--tx-1);
+}
diff --git a/design/nocturne/design-spec-v1.md b/design/nocturne/design-spec-v1.md
new file mode 100644
index 00000000..1fad27d3
--- /dev/null
+++ b/design/nocturne/design-spec-v1.md
@@ -0,0 +1,140 @@
+# 夜片场 Nocturne Set — AIGC 工作台设计规范 v1（待白栖知确认）
+
+> 视觉总监出具。本文件和 `index.html`（交互样本）、`shots/*.png` 一起，是施工和验收的唯一品味依据。样本中的画面都是程序生成的示意图，不是真实生成结果，也不调用任何接口。
+
+## 0. 一句话方向
+
+**深夜片场：墨黑的棚里只亮一盏钨丝灯，作品是唯一被照亮的东西。**
+本项目本质是“从故事到成片”的制片工具，所以主题元素取自片场，而不是暗房或印刷：取景框角标（选中）、扫描光束（生成中）、显影（结果到达）、场记编号与时间码（等宽数字）、每个工作区一种“场景色温”。参考站学的是它的骨架：紧凑、左侧双栏、底部输入座、参数胶囊、按场景变化的主题色；没有照抄它的配色。
+
+## 1. 事实盘点（已核实）
+
+| 项 | 事实 | 来源 |
+|---|---|---|
+| 前端路由 | 项目首页 `/`、工作台 `/workbench/[id]`、生图 `/image`、生视频 `/video`、任务 `/tasks`、智能体 `/agents`、画布 `/canvas/[id]`、素材库 `/library`、ComfyUI 连接 `/connections`、模型设置 `/models`、设置 `/settings`、三维搭景 `/build-scene`、试验台 `/playground` | 仓库 `calliope-web/src/routes` |
+| 五阶段 | 剧本 → 视觉 → 分镜 → 素材 → 镜头脚本；每阶段一个智能体，草稿需人工确认后才交给下一阶段，可恢复已确认版 | `i18n/zh.ts` workbench.* |
+| 工作流文件 | 仓库 `example_ComfyUI_workflows` 共 **156** 个文件：**10** 个是 API 格式，**146** 个是 ComfyUI 界面格式（需重新导出 API 格式并做输入映射才能执行） | 逐个文件检查 `nodes`/`last_node_id` 字段 |
+| 已可执行 | 测试站 `/api/workflows` 当前 **9** 条（图片 5、视频 4） | 测试站接口，只读 |
+| 素材槽 | 参考图（1–N）、遮罩、首帧、尾帧（可选）、参考视频、参考音频；按工作流声明出现 | studio.* 文案 + 组件 |
+| 模型设置 | 当前仅开放 LLM；图片/视频模型标“后续开放” | models.* |
+| 历次投诉 | 结果被挤小、历史穿插在生成区、大片空白、窗口不全、生成按钮要滚动才看到、视频自动播放且空格乱切、找不到播放键、百余工作流难找、智能体只做成了聊天 | 主卡 10/13–10/14 评论 |
+
+## 2. 页面分工与核心路径
+
+**用户要做的三件事**，决定了三个主场；其余页面都是它们的仓库或后台。
+
+| 用户要做什么 | 从哪里进入 | 连续操作 | 看到/处理结果 | 回到项目 |
+|---|---|---|---|---|
+| A. 推进一个片子 | 工作室首页「继续创作」大卡 / 项目卡 | 项目页顶部五阶段 → 当前阶段的内容网格 → 右侧本阶段助手（补充要求/重新生成） | 草稿条提示“待确认”，底栏固定「确认，进入下一阶段」 | 本身就在项目里 |
+| B. 生成一张图/一段视频 | 侧栏「创作台」或项目镜头卡「去生视频」 | 左列找工作流 → 底座放素材、写正反提示词 → 参数胶囊 → 生成 | 中间舞台整幅显示；右侧历史竖条单独存在，点开时顶部提示“正在查看历史”，可复用或回到最新 | 结果下方「存入项目」→ 选项目与阶段，进入“待确认” |
+| C. 让助手干活 | 侧栏「智能体」或项目阶段的「对话」 | 首页大输入框写想法、绑定项目/模型/技能 → 任务页看计划、工具调用 | 右侧成果栏是可编辑草稿（分镜表/角色/提示词），单镜可重画 | 「带回项目待确认」→ 项目页出现紫色草稿条 |
+
+**导航（左侧 68px 总导航，图标+文字常显）**：工作室、项目、创作台、智能体、画布、素材库 ｜ 任务、工作流、模型连接 ｜ 底部：队列、动效开关、设置。
+- 双左栏只在创作台出现（总导航 68 + 工作流列 272），两栏分别回答“去哪个功能”和“用哪个工作流”，宽度差一倍，不会混淆。
+- 原「生图」「生视频」两个路由合并为创作台，用顶部分段切换；切换时各自记住工作流、参数和输入。
+- 原「ComfyUI 连接」与「模型设置」合为「模型连接」，四个页签：ComfyUI 连接 / 大语言模型 / 图片模型 / 视频模型。
+
+**设计判断（为什么这样分）**
+1. 创作台舞台是“作品优先”：不放详情、不放历史，结果按真实比例 `contain` 适配剩余空间；操作条固定在作品正下方，不覆盖画面。
+2. 历史是独立竖条（92px），只承担“回看”；回看是显式状态（蓝色提示条），绝不替换当前输入。
+3. 工作流先按“我要做什么”（任务胶囊）缩小，再按模型族分组，置顶永远在最上；长文件名只在悬停/表头次要位置出现，主名是人话名。
+4. “待配置”的工作流默认隐藏（开关「仅可运行」），避免把 146 个未映射文件冒充可用工具；关掉开关能看到并引导去映射。
+5. 智能体不是聊天：任务列表 + 计划 + 工具卡 + 成果栏三栏，成果有归属（项目·阶段）和确认流程。
+6. 管理页（任务/工作流/模型连接/素材库）共用“左筛选 220 / 中列表 / 右详情 360”，详情不跳页。
+
+## 3. 设计 Token
+
+```css
+/* 表面 */ --bg-0:#07080c; --bg-1:#0c0e14; --bg-2:#12151d; --bg-3:#1a1e29; --bg-4:#232838;
+/* 描边 */ --line:rgba(255,255,255,.06); --line-2:.11; --line-3:.18;
+/* 文字 */ --tx-1:#f3efe6; --tx-2:#aaa79e; --tx-3:#6f6d68; --tx-inv:#1a1206;
+/* 主光 */ --gold:#e9b04b; --gold-hi:#f8d68c; --gold-lo:#b8771f;
+          --grad-gold:linear-gradient(135deg,#fbe1a1,#efb54f 45%,#d98a26);
+/* 场景色温 */ --sc-image:#3fd8c6; --sc-video:#ff8a3d; --sc-agent:#a879ff; --sc-project:#e9b04b; --sc-manage:#7f93b5;
+/* 状态 */ --ok:#43d39a; --warn:#f2b33d; --err:#ff5d6c; --info:#5aa9ff;
+/* 字号 */ --fs-display:28px/700; --fs-h1:20px/600; --fs-h2:16px/600; --fs-body:13px/400 lh1.55; --fs-small:12px; --fs-micro:11px;
+/* 字体 */ --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI",sans-serif; --mono:"JetBrains Mono",Consolas,monospace;
+/* 间距 */ --s1:4 --s2:8 --s3:12 --s4:16 --s5:20 --s6:24 --s8:32;
+/* 圆角 */ --r-xs:4 --r-sm:6 --r-md:10 --r-lg:14 --r-xl:20 --r-pill:999;
+/* 阴影 */ --sh-1 内高光+2/8; --sh-2 内高光+12/32 黑50%; --sh-gold 金色外发光（仅主按钮）;
+/* 动效 */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:(.65,0,.35,1); --ease-spring:(.34,1.56,.64,1);
+          --t-fast:120ms; --t-base:200ms; --t-slow:320ms; --t-reveal:700ms;
+/* 布局 */ --rail:68; --list:272; --hist:92; --head:48;
+```
+
+**色彩规则**
+- 一个页面只有一个金色主按钮（生成 / 确认 / 带回项目 / 开始任务）。
+- 场景色只用于“位置与焦点”：选中边框、取景框角标、进度条、焦点光环、导航指示条；禁止做大面积底色。智能体页是唯一允许场景色做氛围（极光、光球）的页面。
+- 数字信息（编号、时间码、比例、种子、延迟）一律等宽字体。
+
+## 4. 组件与状态
+
+| 组件 | 尺寸 | 默认 | 悬停 | 选中/按下 | 禁用/异常 |
+|---|---|---|---|---|---|
+| 按钮 `.btn` | 26/32/38 高 | bg-3 + line-2 | bg-4 + line-3 | 下移 1px | — |
+| 主按钮 `.btn.primary` | 32/38 | 金渐变 + sh-gold | 提亮 6% + 扫光一次 | 下移 1px | 去饱和 60% 亮度，旁边红字写“还缺：…” |
+| 胶囊 `.chip` | 24–26 | bg-2 | 文字变亮 | 场景色 13% 底 + 60% 描边 | — |
+| 参数胶囊 `.pchip` | 28 | 透明 4% | 描边变亮 | 点开弹层 | — |
+| 工作流行 `.wfi` | 50 | 透明 | 光栅悬停 + 3% 底 | 场景色渐变底 + 35% 描边 | 待配置：族色块灰化、名字降一级、黄标签 |
+| 素材槽 `.slot` | 56（矮屏 50） | 虚线 line-3 | 场景色虚线 | 实线 + 缩略图 + 悬停出现 × | 必填未填：黄色虚线 |
+| 作品框 `.frame` | 适配 | 取景框角标常显 | — | — | 失败：斜纹底 + 原因 + 重试 |
+| 视频播放器 | 画面 + 40 控制栏 | **暂停**，中央大播放键 | 大播放键放大 1.08 | 播放后大键隐藏，控制栏常显 | — |
+| 草稿条 | 44 | 紫色渐变 + 描边 | — | — | — |
+| 弹层 `.pop` | ≤620×64vh | 底部固定“取消/保存”，内部滚动 | — | — | — |
+
+**交互铁律**
+- 视频永不自动播放；切换结果保持暂停；空格只在播放器获得焦点时切换。
+- 生成按钮、确认按钮、带回项目按钮永远在首屏固定位置，不随内容滚走。
+- 参数弹层“取消不改参数”；图片与视频分别记忆参数。
+- 切换工作流保留提示词；新工作流有反向提示词时自动出现右栏（左正右反）。
+- 置顶不切换当前工作流、不清空输入；置顶分图片/视频保存。
+
+## 5. 图标与插图
+
+- 图标：1.7px 线性描边、圆角端点、24 网格；尺寸 14/18/22。不用填充图标，置顶激活例外（填充金色）。
+- 工作流族色块：34px 圆角方块 + 族缩写（Qwen/Kr2/FLX/Z/H3/Wan/GPT/NB/可灵/即梦），待配置时灰化。
+- 插图：阶段助手卡与工作室大卡用真实项目产物做底图（无产物时用场景色渐变 + 胶片颗粒），不用卡通吉祥物。
+
+## 6. 动效规范
+
+| 名称 | 触发 | 时长 · 曲线 | 可打断 | 减少动效 |
+|---|---|---|---|---|
+| 页面进入 | 切一级页 | 320ms · ease-out，上移 6px 淡入 | 是 | 直接出现 |
+| 光栅悬停 | 指针进入列表行/卡片 | 320ms 渐显，跟随指针的光斑 + 蜂窝纹 | 是 | 只变背景亮度 |
+| 取景框 | 选中工作流/作品/历史 | 200ms · ease-out，角标外扩 2px | 是 | 保留角标 |
+| 扫描光束 | 生成中 | 1.6s 循环 · ease-io | 取消即停 | 只留进度条 |
+| 显影 | 结果到达 | 700ms · ease-out（模糊/过曝 → 清晰） | 点击跳过 | 淡入 |
+| 主按钮扫光 | 悬停主按钮 | 700ms 一次 | 是 | 关闭 |
+| 弹层 | 打开参数/菜单 | 200ms · 上移 6px + 缩放 .98 | Esc / 点外部 | 直接出现 |
+| 提示 Toast | 操作完成 | 320ms spring，3.2s 消失 | 是 | 淡入 |
+| 智能体氛围 | 进入智能体页 | 极光 18s 漂移、粒子上升、光球呼吸 4.5s | 离开页面即停 | 全部关闭 |
+
+**性能降级**：粒子用单 canvas、≤46 个，离开页面停止 rAF；极光用 3 个模糊圆、transform 动画；`prefers-reduced-motion` 或侧栏「动效」开关关闭时加 `html.reduce`，去掉所有位移/循环，仅保留颜色与状态变化。
+
+## 7. 桌面断点
+
+| 窗口宽 | 总导航 | 工作流列 | 历史栏 | 其他 |
+|---|---|---|---|---|
+| ≥1600 | 68 | 272 | 92 | 工作室右栏 340，智能体成果栏 420 |
+| 1367–1599 | 68 | 272 | 92 | 标准（1440×900 样稿） |
+| 1281–1366 | 68 | 248 | 84 | 页头隐藏工作流文件名 |
+| ≤1280 | 60 | 236 | 76 | 页头 44；历史栏可收起 |
+| 高 ≤800 | 导航压缩 | 提示词 48 高、素材槽 50；长提示词点「展开」到 28vh，内部滚动 |
+
+最小支持 1280×720（已出样稿 `14-create-image-1280x720.png`、`15-agent-task-1280x720.png`）。不做手机版。
+
+## 8. 待确认事项（请总管转白栖知）
+
+1. **主题方向**：「夜片场」（墨黑 + 钨丝金 + 各区场景色温）是否认可？这是本卡唯一主方向，不再并列给多套。
+2. **生图/生视频合并**为一个「创作台」，顶部切换图片/视频（各自记忆）——是否同意？
+3. **试验台（Playground）并入创作台**、旧入口下线；**三维搭景**不进一级导航，入口放在项目「镜头脚本」阶段和视频参考槽——是否同意？
+4. 「仅可运行」默认打开：146 个未映射文件默认不出现在创作台，只在「工作流库」里显示待配置——是否接受？
+5. ComfyUI 连接与模型设置合并为「模型连接」一页四个页签——是否同意？
+6. 云端图片/视频模型（GPT-Image-2、Nano Banana、可灵、即梦）在样本中按“已接入”展示；当前后端只开放 LLM，接入属于新增能力，需另行排期。
+
+## 9. 施工提示（给总工/施工员）
+
+- Token 直接替换现有 `app.css` 变量体系；组件按第 4 节状态表逐一对照。
+- 舞台尺寸用容器实测（ResizeObserver）计算 contain 尺寸，不用固定高度；视频控件高度计入。
+- 历史栏、工作流列、成果栏、弹层内容都各自滚动；页面本身不滚（工作室、规范页除外）。
+- 验收看图看操作：1440×900、1366×768、1280×720 三档下，作品完整、主按钮可见、视频默认暂停。
diff --git a/design/nocturne/design-spec-v2.md b/design/nocturne/design-spec-v2.md
new file mode 100644
index 00000000..39aa1230
--- /dev/null
+++ b/design/nocturne/design-spec-v2.md
@@ -0,0 +1,105 @@
+# 夜片场 · 多主题规范 v2（待白栖知看样确认）
+
+> 视觉总监出具，在 HEL-716《夜片场》规范 v1 的基础上**增补**主题。v1 中的布局、组件、动效和断点全部继续有效，本文件只写新增和改动的部分。样本使用的是示例画面和演示状态，不调用真实生成、不产生费用。
+
+## 0. 原则
+
+**同一个片场，换一种灯光。** 四套主题共用同一套布局、功能、操作顺序和动效，只改变语义变量和少量“气质”参数（圆角、发光开关、氛围层）。组件 CSS 里只能引用语义变量，不允许写死颜色；主题差异只能写在 `[data-theme="…"]` 块中。
+
+| ID | 中文名 | 气质与适用场景 | 默认 |
+|---|---|---|---|
+| `night` | **夜片场** Nocturne | 墨黑底、钨丝金主键、各工作区有自己的场景色温。夜间、沉浸式创作。 | ✅ 默认（即已认可的原版，一个像素都没改） |
+| `day` | **日光棚** Daylight | 暖白纸面、墨色文字、深琥珀主键；不使用发光，靠描边、实色和对比度区分。白天办公、长时间审稿。 | |
+| `grade` | **调色间** Grading | 中性深灰、白色主键、场景色降低饱和度、舞台不加色调；圆角收紧到 2–8px，更像工具。用于判断作品色彩，适合长时间看片。 | |
+| `bluehour` | **蓝调时刻** Blue Hour | 靛蓝到紫的天色渐变、珊瑚橙主键、圆角放大到 8–26px、主按钮做成胶囊形，氛围最浓。用于提案、展示和灵感发散。 | |
+
+## 1. 语义变量（施工直接使用）
+
+基础变量名沿用 v1；v2 新增的语义变量标 ★。
+
+| 语义 | 变量 | 夜片场 | 日光棚 | 调色间 | 蓝调时刻 |
+|---|---|---|---|---|---|
+| 页面底 / 输入凹槽 | `--bg-0` | #07080c | #e9e4da | #1b1b1c | #0a1029 |
+| 面板（导航、列表、历史栏） | `--bg-1` | #0c0e14 | #f4f1ea | #222223 | #0f1838 |
+| 卡片 | `--bg-2` | #12151d | #fbf9f5 | #29292b | #162148 |
+| 浮起层 / 按钮 | `--bg-3` | #1a1e29 | #ffffff | #323234 | #1f2c5c |
+| 悬停 | `--bg-4` | #232838 | #efe9df | #3c3c3f | #2a386e |
+| 主文字 | `--tx-1` | #f3efe6 | #1f1b15 | #ecebe8 | #eef1fb |
+| 次要文字 | `--tx-2` | #aaa79e | #55504a | #acaba6 | #a9b1cc |
+| 弱文字（≥4.3:1，浅色主题同样适用） | `--tx-3` | #6f6d68 | #736d65 | #85847f | #7680a2 |
+| 叠加通道 ★（悬停、细线用 `rgb(var(--ink)/a)`） | `--ink` | 255 255 255 | 38 30 18 | 255 255 255 | 214 224 255 |
+| 边框 1/2/3 | `--line*` | 白 .06/.11/.18 | 墨 .09/.15/.26 | 白 .075/.13/.22 | 冷白 .07/.12/.2 |
+| 主操作（“去做”，全页唯一） | `--gold` / `--grad-gold` | #e9b04b 金 | #a65a0c 深琥珀 | #d9dde2 校色白 | #ff9a6c 珊瑚 |
+| 主操作上的文字 | `--tx-inv` | #1a1206 | #ffffff | #141516 | #2b0c05 |
+| 场景 · 图片 | `--sc-image` | #3fd8c6 | #0b8378 | #6fc2b7 | #4fd6ea |
+| 场景 · 视频 | `--sc-video` | #ff8a3d | #c2511a | #d8a06c | #ffbb55 |
+| 场景 · 智能体 | `--sc-agent` | #a879ff | #6d45d0 | #a598d8 | #b592ff |
+| 场景 · 项目 | `--sc-project` | #e9b04b | #a65a0c | #d4bc8a | #ff9a6c |
+| 场景 · 管理 | `--sc-manage` | #7f93b5 | #4c6286 | #909cae | #8aa0dc |
+| 场景 · 素材资产 ★ | `--sc-asset` | #ff86b0 | #b93a72 | #d394b0 | #ff86c0 |
+| 成功 | `--ok` | #43d39a | #11804f | #4cc38f | #4fd69c |
+| 提醒 / 待配置 | `--warn` | #f2b33d | #9a6400 | #e3a93b | #ffc94d |
+| 错误 / 失败 | `--err` | #ff5d6c | #c42b41 | #ee5d70 | #ff4d6d |
+| 信息 / 历史回看 | `--info` | #5aa9ff | #2263c2 | #5d9fe3 | #69b4ff |
+| 场景色文字混色端 ★ | `--hi` | white | #141109 | white | white |
+| 场景/状态实底上的文字 ★ | `--on-scene` / `--on-ok` | 深色 | #fff | 深色 | 深色 |
+| 输入框底 ★ | `--well` | bg-0 | #ffffff | #18181a | bg-0 |
+| 页头毛玻璃 ★ | `--glass` | bg-1 70% | bg-1 88% | bg-1 82% | 定制 55% |
+| 遮罩层 ★ | `--scrim` | 黑 .6 | 暖墨 .34 | 黑 .55 | 深蓝 .62 |
+| 作品阴影 ★ | `--media-shadow` | 重 | 轻、暖 | 中 | 重、偏蓝 |
+| 发光开关 ★ | `--glow` | 1 | 0 | 0 | 1 |
+
+另有特效变量 ★：`--gen-bg`（生成中底色）、`--beam`（扫描光）、`--grain`（颗粒）、`--lattice`（光栅蜂窝纹）、`--scanline`、`--stage-tint`（舞台场景色晕 0–10%）、`--aur-1/2/3`、`--aur-op`（极光）、`--agent-hero`、`--agent-title`、`--orb-core`、`--particle`、`--brand-grad/-glow/-ink`、`--display-grad`、`--fail-a/b`。完整取值见交互样本 `<style>` 中的四个主题块；也可以在样本「规范 → 05 主题」里查看，那里直接读取实际变量。
+
+**场景色与状态色**：两组颜色在每套主题里都单独取值，不互相借用。场景色只表示“你在哪个工作区”（选中边框、取景框、进度、焦点）；状态色只表示“结果怎么样”。调色间里场景色降低饱和度，状态色保持鲜明，两者不会混淆。
+**不随主题变的元素**：作品框底色、视频控制条、作品上的角标（编号、时长、草图标签）、灯箱，在所有主题都保持深色，避免主题给作品染色。工作流模型族色块也保持不变，方便跨主题识别。
+
+## 2. 特色效果按主题适配
+
+| 效果 | 夜片场 | 日光棚 | 调色间 | 蓝调时刻 |
+|---|---|---|---|---|
+| 扫描光（生成中） | 场景色 + 白光 | 场景色 24% + 纸白高光，不发光 | 中性白，无色彩 | 场景色 34% + 暖白 |
+| 显影（结果到达） | 模糊/过曝 → 清晰 | `developDay`：模糊 + 棕褐色调 → 清晰（像相纸显影） | `developGrade`：去饱和 → 清晰 | 同夜片场 |
+| 取景框角标 | 场景色偏白 | 场景色偏墨（更深） | 场景色 | 场景色 |
+| 光栅悬停 | 白色蜂窝纹 | 墨色蜂窝纹 | 白色 | 冷白色 |
+| 发光（导航条、进度条、阶段下划线、状态点） | 有 | **无** | **无** | 有 |
+| 智能体氛围 | 紫粉青极光 .33 | 淡紫/桃/薄荷 .42 | 低饱和 .16 | 蓝/珊瑚/青 .36 |
+
+浅色主题不靠发光，也不靠低对比文字来区分信息：选中用实色描边加浅底，禁用的主按钮用浅灰底加灰字（不只是降低透明度）。
+
+## 3. 切换与记忆规则
+
+- **入口**：侧栏底部「主题」（图标是当前主题的四色圆点）→ 弹层列出四个主题：实时缩略预览、中文名、英文名、色调和一句话用途，当前项有 ✓。「设置 → 外观主题」有同样的四张卡片。键盘可用：方向键在选项间移动，Enter 选择，Esc 关闭并把焦点还给入口按钮。
+- **只改 `html[data-theme]`**：不重新渲染页面，所以提示词、上传素材、参数、工作流选择、历史回看、项目阶段草稿、智能体任务和成果都保持原样（样本自测已覆盖，见第 6 节）。
+- **记忆**：存 `localStorage['aigc-theme']`；`<head>` 里的内联脚本在首次绘制前读取，避免先闪一下夜片场。读到非法值或读取失败时回退到 `night`。
+- **存储不可用**：切换照常生效，弹层底部提示“浏览器禁止本地存储：本次有效，其他操作不受影响”，不报错，也不阻止其他操作。
+- **默认是夜片场**，不跟随系统的深浅色设置（深浅色只是主题的一个属性，不是选择主题的依据）。正式产品如需按账号同步，再把同一个值存到用户设置里，本地存储作为缓存。
+- 「动效开/关」已移到主题弹层底部（同属外观设置），侧栏底部仍然是 4 个按钮，1280×720 下不会溢出。
+
+## 4. 动效与减少动效
+
+| 名称 | 触发 | 时长 · 曲线 | 可否打断 | 减少动效时 |
+|---|---|---|---|---|
+| 切换主题「开灯」 | 选择新主题 | 520ms · `--ease-out`；新主题从点击位置圆形展开（View Transitions） | 是，再次选择会接管 | 立即替换 |
+| 不支持 View Transitions 时 | 同上 | 280ms 颜色淡入淡出（`html.theme-anim`，340ms 后移除） | 是 | 立即替换 |
+| 其余动效 | 同 v1 | 同 v1 | 同 v1 | 同 v1 |
+
+`prefers-reduced-motion` 或手动关闭动效时加上 `html.reduce`：主题立即切换，极光、粒子、光束隐藏，只保留颜色和状态变化。粒子颜色在切换主题时从 `--particle` 重新读取。
+
+## 5. 本卡同时修正（按已定分工）
+
+- 云端 GPT-Image-2、Nano Banana Pro、可灵、即梦：在创作台归入「云端模型 · 尚未接入（后续批次）」，灰色色块加虚线「未接入」标签；选中后，生成按钮禁用并提示“尚未接入：云端接口属后续批次，当前不可生成”，页头连接状态为灰点“云端接口尚未接入”。「模型连接」页的云端卡片改为虚线卡片“未接入 / 等待接入”，图片模型、视频模型页签标注“后续”。历史和任务里不再出现云端生成的结果。
+- 三维搭景和试验台的组织方式标签由“待确认”改为“已确认”。
+- 工作流库表格改为固定列宽，长文件名用省略号截断，1366 宽时“状态”列不再被挤出可视区。
+
+## 6. 检查结果
+
+- 尺寸：四套主题都检查了 1440×900、1366×768（视频首尾帧）和 1280×720（图片竖图）。主按钮在首屏、作品按比例完整显示、视频默认暂停、列表各自滚动、侧栏底部不溢出（见附图 04、05）。
+- 全站一致性：工作室、创作台（图片/视频）、智能体首页/任务、项目工作台、工作流库、模型连接、设置、规范页都只使用语义变量（附图 02、03、10–16）。
+- 自测（样本地址加 `?selftest=1`，在无界面浏览器中运行）：17/17 通过，包括在四套主题之间依次切换后提示词、上传、参数、工作流、历史回看、项目阶段和智能体状态不变；切换后选择被记住；存储被禁止时仍能切换且有提示；云端未接入时生成按钮被禁用。另外验证了重新打开页面会沿用上次的选择。
+
+## 7. 施工提示
+
+1. 先把 v1 组件中写死的 `rgba(...)` 和十六进制颜色换成本文的语义变量（样本已完成，可直接对照）。规则是：白色叠加 → `rgb(var(--ink)/a)`；场景色/状态色叠加 → `color-mix(in srgb,var(--x) N%,transparent)`；场景色文字 → 与 `var(--hi)` 混合。
+2. 主题块的选择器写成 `[data-theme="x"]`，不要写成 `html[...]`，这样局部预览（缩略图、规范对照表）也能套用主题。
+3. 新主题须等白栖知看样确认后再正式施工；最终上线哪几套、是否保留切换入口，以他的确认为准。
diff --git a/design/nocturne/reference.html b/design/nocturne/reference.html
new file mode 100644
index 00000000..9fe10d1e
--- /dev/null
+++ b/design/nocturne/reference.html
@@ -0,0 +1,1640 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>AIGC 工作台 · 「夜片场」多主题设计演示</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script>
+/* apply the remembered theme before first paint; storage failures fall back to 夜片场 silently */
+(function(){var d=document.documentElement,t=null;
+ try{t=new URLSearchParams(location.search).get('theme')}catch(e){}
+ if(!t){try{t=localStorage.getItem('aigc-theme')}catch(e){}}
+ d.setAttribute('data-theme',/^(night|day|grade|bluehour)$/.test(t||'')?t:'night');})();
+</script>
+<style>
+/* =========================================================
+   夜片场 Nocturne Set — design tokens
+   ========================================================= */
+:root,[data-theme="night"]{
+  /* surfaces: ink black with a faint blue cast, never pure #000 */
+  --bg-0:#07080c; --bg-1:#0c0e14; --bg-2:#12151d; --bg-3:#1a1e29; --bg-4:#232838;
+  --line:rgb(var(--ink) / .06); --line-2:rgb(var(--ink) / .11); --line-3:rgb(var(--ink) / .18);
+  /* text: warm paper white */
+  --tx-1:#f3efe6; --tx-2:#aaa79e; --tx-3:#6f6d68; --tx-inv:#1a1206;
+  /* key light: tungsten gold */
+  --gold:#e9b04b; --gold-hi:#f8d68c; --gold-lo:#b8771f;
+  --grad-gold:linear-gradient(135deg,#fbe1a1 0%,#efb54f 45%,#d98a26 100%);
+  /* scene lights — each workspace has its own colour temperature */
+  --sc-image:#3fd8c6; --sc-video:#ff8a3d; --sc-agent:#a879ff; --sc-project:#e9b04b; --sc-manage:#7f93b5;
+  --scene:var(--gold);
+  /* status */
+  --ok:#43d39a; --warn:#f2b33d; --err:#ff5d6c; --info:#5aa9ff;
+  /* type */
+  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
+  --mono:"JetBrains Mono","Cascadia Mono",Consolas,monospace;
+  --fs-display:28px; --fs-h1:20px; --fs-h2:16px; --fs-body:13px; --fs-small:12px; --fs-micro:11px;
+  /* space (4 base) */
+  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
+  /* radius */
+  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
+  /* elevation */
+  --sh-1:0 1px 0 rgb(var(--ink) / .04) inset,0 2px 8px rgba(0,0,0,.35);
+  --sh-2:0 1px 0 rgb(var(--ink) / .05) inset,0 12px 32px rgba(0,0,0,.5);
+  --sh-gold:0 6px 22px rgba(233,160,60,.35),0 0 0 1px rgba(255,220,150,.35) inset;
+  /* motion */
+  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
+  --t-fast:120ms; --t-base:200ms; --t-slow:320ms; --t-reveal:700ms;
+  /* layout */
+  --rail:68px; --list:272px; --hist:92px; --head:48px;
+  /* ---- theme-semantic tokens (v2 · 主题化) ---- */
+  --ink:255 255 255;            /* overlay channel: hover tint, hairlines (white in dark, ink in light) */
+  --hi:white;                   /* scene-coloured text is mixed toward this for contrast */
+  --on-scene:#140a03;           /* text on a solid scene/status colour */
+  --on-ok:#06140e;
+  --sc-asset:#ff86b0;           /* 素材资产 helper colour (agent roster) */
+  --glass:color-mix(in srgb,var(--bg-1) 70%,transparent);
+  --scrim:rgba(4,5,8,.6);
+  --well:var(--bg-0);           /* inputs, segmented track */
+  --media-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgb(255 255 255 / .07);
+  --sh-gold-hover:0 8px 28px rgba(233,160,60,.5),0 0 0 1px rgba(255,230,170,.5) inset;
+  --brand-grad:radial-gradient(circle at 30% 25%,#fff3cf 0,#efb54f 35%,#9b5a12 100%);
+  --brand-glow:0 0 24px rgba(233,176,75,.35);
+  --brand-ink:#1b1206;
+  --display-grad:linear-gradient(90deg,var(--gold-hi),var(--gold) 60%,#ff9b5a);
+  --glow:1;                     /* 1 = glows on (dark themes), 0 = off (light / neutral) */
+  /* signature effects */
+  --gen-bg:#0b0d12; --grain:rgba(255,255,255,.08);
+  --beam:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene) 30%,transparent),rgba(255,255,255,.25),transparent);
+  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='white' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
+  --scanline:rgb(var(--ink) / .012);
+  --stage-tint:7%;
+  /* agent atmosphere */
+  --aur-1:#7c4dff; --aur-2:#ff5fa8; --aur-3:#2fd5c5; --aur-op:.33;
+  --agent-hero:linear-gradient(120deg,rgba(32,20,58,.9),rgba(14,12,26,.92) 55%,rgba(10,22,30,.9));
+  --agent-title:linear-gradient(90deg,#fff,#d9c6ff 50%,#ffb3d9);
+  --orb-core:radial-gradient(circle at 35% 30%,#fff 0,#e3d4ff 12%,#a879ff 40%,#4b1fa8 75%,transparent 76%);
+  --particle:214,190,255;
+  --fail-a:#1a1215; --fail-b:#140f12;
+}
+@media (max-width:1366px){ :root{ --list:248px; --hist:84px; } }
+@media (max-width:1280px){ :root{ --rail:60px; --list:236px; --hist:76px; --head:44px; } }
+@media (max-height:780px){.nav{padding:5px 0 3px;margin:0}.nav span{font-size:10px}.brand{margin-bottom:4px;width:36px;height:36px}.rail hr{margin:4px 0}.queue-dot{width:36px;height:36px}}
+html.reduce *{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
+html.reduce .fx-only{ display:none!important; }
+
+*{box-sizing:border-box;margin:0;padding:0}
+html,body{height:100%;background:var(--bg-0);color:var(--tx-1);font:400 var(--fs-body)/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
+button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+input,textarea,select{font:inherit;color:inherit}
+::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:rgb(var(--ink) / .1);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
+::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--ink) / .2)}::-webkit-scrollbar-track{background:transparent}
+svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
+svg.i.sm{width:14px;height:14px}svg.i.lg{width:22px;height:22px}
+.mono{font-family:var(--mono);letter-spacing:0}
+.muted{color:var(--tx-2)}.dim{color:var(--tx-3)}
+.row{display:flex;align-items:center;gap:var(--s2)}.grow{flex:1;min-width:0}
+.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* ---------- app shell ---------- */
+#app{display:grid;grid-template-columns:var(--rail) 1fr;height:100vh;min-height:640px}
+.rail{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:2px;z-index:5}
+.brand{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:10px;position:relative;
+  background:var(--brand-grad);box-shadow:var(--brand-glow)}
+.brand b{font:800 15px/1 var(--font);color:var(--brand-ink);letter-spacing:-.5px}
+.nav{width:56px;padding:7px 0 6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--tx-3);position:relative;transition:color var(--t-base),background var(--t-base)}
+.nav span{font-size:11px;line-height:1}
+.nav:hover{color:var(--tx-1);background:rgb(var(--ink) / .04)}
+.nav.on{color:var(--tx-1);background:linear-gradient(180deg,rgb(var(--ink) / .08),rgb(var(--ink) / .03))}
+.nav.on::before{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--nav-c,var(--gold));box-shadow:0 0 12px var(--nav-c,var(--gold))}
+.nav.on svg{color:var(--nav-c,var(--gold))}
+.rail hr{width:28px;border:0;border-top:1px solid var(--line-2);margin:8px 0}
+.rail .foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
+.queue-dot{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;position:relative;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line)}
+.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}
+.queue-dot .ring{position:absolute;inset:-1px;border-radius:12px;border:1.5px solid transparent;border-top-color:var(--sc-video);animation:spin 1.6s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a3f52,#1b1e28);display:grid;place-items:center;font-size:12px;color:var(--tx-2);border:1px solid var(--line-2)}
+
+.page{display:none;height:100vh;min-width:0;position:relative;overflow:hidden}
+.page.on{display:flex;flex-direction:column;animation:pageIn var(--t-slow) var(--ease-out)}
+@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+html.capture .page.on{animation:none}
+
+/* page header */
+.ph{height:var(--head);flex:none;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);position:relative;z-index:3}
+.ph h1{font-size:15px;font-weight:600;letter-spacing:.2px}
+.crumb{display:flex;align-items:center;gap:6px;color:var(--tx-3);font-size:12px}
+.crumb b{color:var(--tx-1);font-weight:600;font-size:14px}
+.demo-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);border:1px dashed color-mix(in srgb,var(--gold-hi) 45%,transparent);color:var(--gold-hi);font-size:11px;background:color-mix(in srgb,var(--gold) 6%,transparent);white-space:nowrap}
+.demo-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
+
+/* buttons */
+.btn{height:32px;padding:0 12px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;white-space:nowrap;
+  background:var(--bg-3);border:1px solid var(--line-2);color:var(--tx-1);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
+.btn:hover{background:var(--bg-4);border-color:var(--line-3)}
+.btn:active{transform:translateY(1px)}
+.btn.ghost{background:transparent;border-color:transparent;color:var(--tx-2)}.btn.ghost:hover{background:rgb(var(--ink) / .05);color:var(--tx-1)}
+.btn.sm{height:26px;padding:0 9px;font-size:12px;border-radius:5px}
+.btn.icon{width:32px;padding:0;justify-content:center}.btn.sm.icon{width:26px}
+.btn.danger:hover{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
+.btn.primary{position:relative;overflow:hidden;background:var(--grad-gold);border:0;color:var(--tx-inv);font-weight:700;box-shadow:var(--sh-gold)}
+.btn.primary:hover{filter:brightness(1.06);box-shadow:var(--sh-gold-hover)}
+.btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left 0s}
+.btn.primary:hover::after{left:130%;transition:left .7s var(--ease-out)}
+.btn.primary[disabled]{filter:grayscale(.8) brightness(.6);cursor:not-allowed;box-shadow:none}
+.btn.scene{background:color-mix(in srgb,var(--scene) 16%,transparent);border-color:color-mix(in srgb,var(--scene) 45%,transparent);color:color-mix(in srgb,var(--scene) 70%,var(--hi))}
+.btn.scene:hover{background:color-mix(in srgb,var(--scene) 24%,transparent)}
+
+/* segmented */
+.seg{display:flex;padding:3px;border-radius:9px;background:var(--well);border:1px solid var(--line);gap:2px}
+.seg button{flex:1;height:28px;border-radius:7px;color:var(--tx-2);font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all var(--t-base) var(--ease-out)}
+.seg button:hover{color:var(--tx-1)}
+.seg button.on{background:var(--bg-3);color:var(--tx-1);box-shadow:var(--sh-1)}
+.seg button.on svg{color:var(--scene)}
+
+/* chips */
+.chip{height:26px;padding:0 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);white-space:nowrap;transition:all var(--t-fast)}
+.chip:hover{color:var(--tx-1);border-color:var(--line-3)}
+.chip.on{color:var(--tx-1);border-color:color-mix(in srgb,var(--scene) 60%,transparent);background:color-mix(in srgb,var(--scene) 13%,var(--bg-2))}
+.chip b{font-weight:600;color:var(--tx-1)}
+.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;font-size:11px;color:var(--tx-2);background:rgb(var(--ink) / .05);border:1px solid var(--line);white-space:nowrap}
+.tag.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent)}
+.tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent);background:color-mix(in srgb,var(--warn) 7%,transparent)}
+.tag.err{color:var(--err);border-color:color-mix(in srgb,var(--err) 30%,transparent);background:color-mix(in srgb,var(--err) 7%,transparent)}
+.tag.sc{color:color-mix(in srgb,var(--scene) 80%,var(--hi));border-color:color-mix(in srgb,var(--scene) 40%,transparent);background:color-mix(in srgb,var(--scene) 10%,transparent)}
+.dot{width:7px;height:7px;border-radius:50%;flex:none}
+.input{height:34px;border-radius:var(--r-sm);background:var(--well);border:1px solid var(--line-2);padding:0 10px;display:flex;align-items:center;gap:8px;color:var(--tx-3);transition:border-color var(--t-base),box-shadow var(--t-base)}
+.input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx-1);font-size:13px}
+.input:focus-within{border-color:color-mix(in srgb,var(--scene) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--scene) 16%,transparent)}
+kbd{font:500 10.5px/1 var(--mono);padding:3px 5px;border-radius:4px;border:1px solid var(--line-2);color:var(--tx-3);background:var(--bg-1)}
+
+/* light-grid hover — the site-wide signature (mouse-following spotlight + revealed hex lattice) */
+.lg{position:relative;isolation:isolate}
+.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity var(--t-slow) var(--ease-out);
+  background:
+   radial-gradient(160px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--scene) 30%,transparent),transparent 70%),
+   var(--lattice);
+  -webkit-mask:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 75%);mask:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 75%)}
+.lg:hover::before{opacity:1}
+/* viewfinder corners — marks the thing that is "in frame" (selected) */
+.vf{position:relative}
+.vf::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--t-base),inset var(--t-slow) var(--ease-out);
+  --c:color-mix(in srgb,var(--scene) 90%,var(--hi));
+  background:
+   linear-gradient(var(--c),var(--c)) top left/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top left/1.5px 12px no-repeat,
+   linear-gradient(var(--c),var(--c)) top right/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) top right/1.5px 12px no-repeat,
+   linear-gradient(var(--c),var(--c)) bottom left/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1.5px 12px no-repeat,
+   linear-gradient(var(--c),var(--c)) bottom right/12px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1.5px 12px no-repeat}
+.vf.on::after{opacity:1;inset:-3px}
+
+/* =========================================================
+   创作台 (Create)
+   ========================================================= */
+.page.create.on{display:grid}
+.create{grid-template-columns:var(--list) 1fr var(--hist);grid-template-rows:100%;height:100vh}
+.create.hide-hist{grid-template-columns:var(--list) 1fr 0}
+/* workflow browser */
+.wfb{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
+.wfb-top{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
+.wfb-title{display:flex;align-items:center;gap:8px;height:28px}
+.wfb-title .glyph{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--scene) 16%,transparent);color:var(--scene);box-shadow:0 0 18px color-mix(in srgb,var(--scene) 25%,transparent)}
+.wfb-title b{font-size:14px}
+.taskchips{display:flex;gap:6px;flex-wrap:wrap}
+.taskchips .chip{height:24px;padding:0 9px;font-size:11.5px}
+.wfb-meta{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--tx-3);padding:0 2px}
+.wfb-meta label{display:flex;align-items:center;gap:6px;cursor:pointer}
+.sw{width:26px;height:15px;border-radius:9px;background:var(--bg-4);position:relative;transition:background var(--t-base)}
+.sw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--tx-2);transition:transform var(--t-base) var(--ease-spring),background var(--t-base)}
+.sw.on{background:color-mix(in srgb,var(--scene) 55%,var(--bg-4))}.sw.on::after{transform:translateX(11px);background:#fff}
+.wfl{flex:1;overflow:auto;padding:4px 8px 12px}
+.grp{margin-top:8px}
+.grp-h span:not(.n){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+.grp-h{display:flex;align-items:center;gap:6px;height:26px;padding:0 6px;font-size:11.5px;color:var(--tx-3);cursor:pointer;user-select:none;position:sticky;top:-4px;background:var(--bg-1);z-index:1}
+.grp-h:hover{color:var(--tx-2)}
+.grp-h .n{margin-left:auto;font-family:var(--mono);font-size:10.5px}
+.grp-h svg{transition:transform var(--t-base)}.grp.closed .grp-h svg.chev{transform:rotate(-90deg)}.grp.closed .grp-b{display:none}
+.wfi{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:8px 8px;border-radius:10px;cursor:pointer;margin:2px 0;border:1px solid transparent;transition:background var(--t-base),border-color var(--t-base)}
+.wfi:hover{background:rgb(var(--ink) / .03)}
+.wfi.on{background:linear-gradient(90deg,color-mix(in srgb,var(--scene) 12%,var(--bg-3)),var(--bg-3));border-color:color-mix(in srgb,var(--scene) 35%,transparent)}
+.wfi .fam{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:700 11px/1 var(--mono);color:#0c0e14;position:relative}
+.wfi .fam.off{filter:grayscale(1) brightness(.55)}
+.wfi .nm{font-size:13px;font-weight:500;color:var(--tx-1)}
+.wfi .sub{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--tx-3);margin-top:1px}
+.wfi .sub svg{width:12px;height:12px}
+.wfi .acts{display:flex;align-items:center;gap:2px}
+.pin{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--tx-3);opacity:0;transition:opacity var(--t-fast),color var(--t-fast),background var(--t-fast)}
+.wfi:hover .pin,.pin.on{opacity:1}.pin:hover{background:rgb(var(--ink) / .08);color:var(--tx-1)}.pin.on{color:var(--gold)}
+.pin.on svg{fill:currentColor}
+.wfi.needs .nm{color:var(--tx-2)}
+.wfb-foot{border-top:1px solid var(--line);padding:8px;display:flex;gap:6px}
+.wfb-foot .btn{flex:1;justify-content:center}
+
+/* centre column */
+.cc{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
+.cc .ph{gap:10px}
+.wf-head-name{display:flex;align-items:center;gap:8px;min-width:0}
+.wf-head-name b{font-size:14px;font-weight:600}
+.conn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2);height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--line)}
+
+/* stage — the result gets every pixel that isn't a control */
+.stage{flex:1;min-height:180px;position:relative;display:flex;flex-direction:column;padding:12px 16px 8px;overflow:hidden}
+.stage-bg{position:absolute;inset:0;pointer-events:none;
+  background:radial-gradient(60% 70% at 50% 45%,color-mix(in srgb,var(--scene) var(--stage-tint),transparent),transparent 70%),
+             repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px)}
+.viewport{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
+.frame{position:relative;max-width:100%;max-height:100%;border-radius:8px;overflow:hidden;box-shadow:var(--media-shadow);background:#000}
+.frame img,.frame .vid{display:block;width:100%;height:100%;object-fit:contain}
+.frame.reveal img,.frame.reveal .vid{animation:develop var(--t-reveal) var(--ease-out)}
+@keyframes develop{0%{filter:blur(18px) brightness(1.8) saturate(0);opacity:.2;transform:scale(1.015)}60%{filter:blur(2px) brightness(1.1) saturate(.8);opacity:1}100%{filter:none;transform:none}}
+.fmeta{position:absolute;left:10px;top:10px;display:flex;gap:6px}
+.fmeta .tag{background:rgba(7,8,12,.66);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.12);color:#ddd}
+.hist-banner{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;display:none;align-items:center;gap:10px;height:34px;padding:0 6px 0 14px;border-radius:var(--r-pill);
+  background:color-mix(in srgb,var(--bg-2) 92%,transparent);border:1px solid color-mix(in srgb,var(--info) 50%,transparent);box-shadow:var(--sh-2);font-size:12.5px;backdrop-filter:blur(8px);white-space:nowrap}
+.stage.viewing .viewport{margin-top:34px}
+.hist-banner.on{display:flex;animation:pageIn var(--t-slow) var(--ease-out)}
+.hist-banner b{color:var(--info)}
+/* empty / generating states */
+.empty-stage{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--tx-3);text-align:center}
+.empty-stage .ring{width:84px;height:84px;border-radius:50%;border:1px dashed var(--line-3);display:grid;place-items:center;color:color-mix(in srgb,var(--scene) 70%,var(--hi))}
+.gen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:2}
+.gen.on{display:flex}
+.gen-card{width:min(60%,520px);aspect-ratio:var(--ar,1);max-height:92%;border-radius:8px;position:relative;overflow:hidden;background:var(--gen-bg);border:1px solid var(--line-2)}
+.gen-card .beam{position:absolute;top:0;bottom:0;width:45%;left:-45%;background:var(--beam);animation:beam 1.6s var(--ease-io) infinite}
+@keyframes beam{to{left:100%}}
+.gen-card .grain{position:absolute;inset:0;opacity:.25;background-image:repeating-radial-gradient(circle at 17% 32%,var(--grain) 0 1px,transparent 1px 3px)}
+.gen-info{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;flex-direction:column;gap:8px}
+.bar{height:4px;border-radius:4px;background:rgb(var(--ink) / .1);overflow:hidden}
+.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,color-mix(in srgb,var(--scene) 70%,var(--hi)),var(--scene));box-shadow:0 0 12px var(--scene);transition:width .25s linear}
+/* result action bar — fixed under the media, never overlays it */
+.actbar{flex:none;height:40px;display:flex;align-items:center;gap:6px;justify-content:center;position:relative;z-index:1}
+.actbar .sep{width:1px;height:18px;background:var(--line-2);margin:0 4px}
+
+/* video player — explicit controls, paused by default */
+.player{display:flex;flex-direction:column;max-width:100%;max-height:100%;border-radius:8px;overflow:hidden;background:#000;box-shadow:var(--media-shadow)}
+.player .scr{position:relative;flex:1;min-height:0;overflow:hidden}
+.player .scr .vid{width:100%;height:100%}
+.bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,18,.55);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);color:#fff;transition:transform var(--t-base) var(--ease-spring),opacity var(--t-base)}
+.bigplay:hover{transform:translate(-50%,-50%) scale(1.08)}
+.bigplay svg{width:26px;height:26px;fill:#fff;stroke:none;margin-left:3px}
+.player.playing .bigplay{opacity:0;pointer-events:none}
+.pctl{flex:none;height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;background:#0b0d13;border-top:1px solid rgba(255,255,255,.06);color:#cfcabe}
+.pctl .btn.ghost{color:#aaa79e}.pctl .btn.ghost:hover{color:#fff;background:rgba(255,255,255,.08)}
+.pctl .pp{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3efe6;color:#000}
+.pctl .pp svg{width:13px;height:13px;fill:#000;stroke:none}
+.pctl .tc{font:500 11.5px var(--mono);color:#aaa79e;min-width:88px}
+.scrub{flex:1;height:18px;display:flex;align-items:center;cursor:pointer}
+.scrub div{height:4px;width:100%;border-radius:4px;background:rgb(var(--ink) / .14);position:relative}
+.scrub i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--scene)}
+.scrub b{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--scene) 40%,transparent)}
+/* animated stand-in for a video clip (only moves while "playing") */
+.vid{position:relative;overflow:hidden}
+.vid .layer{position:absolute;inset:-10%;background-size:cover;background-position:center;animation:pan 8s linear infinite;animation-play-state:paused}
+.player.playing .vid .layer{animation-play-state:running}
+@keyframes pan{from{transform:scale(1.05) translateX(-3%)}to{transform:scale(1.18) translateX(3%)}}
+
+/* composer dock */
+.dock{flex:none;margin:0 16px 14px;border-radius:var(--r-lg);background:linear-gradient(180deg,color-mix(in srgb,var(--bg-3) 92%,transparent),color-mix(in srgb,var(--bg-2) 96%,transparent));border:1px solid var(--line-2);box-shadow:var(--sh-2);
+  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;max-height:52vh;position:relative;transition:border-color var(--t-slow),box-shadow var(--t-slow)}
+.dock:focus-within{border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow: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)}
+.slots{grid-row:1;grid-column:1;padding:10px 12px 8px 12px;display:flex;flex-direction:row;gap:14px;max-width:360px;border-right:1px solid var(--line);align-items:flex-start}
+.sgrp{display:flex;flex-direction:column;gap:6px;min-width:0}
+.slots .lbl{font-size:11px;color:var(--tx-3);display:flex;gap:5px;align-items:center;white-space:nowrap;height:20px}
+.slots .lbl b{color:var(--tx-2);font-weight:500}
+.slot-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:300px}
+.slots .from{color:var(--tx-2);cursor:pointer;margin-left:4px}.slots .from:hover{color:var(--scene)}
+@media (max-height:800px){.pbox textarea{height:48px;min-height:44px}.slot{width:50px;height:50px}.stage{padding-top:8px}}
+@media (max-width:1366px){#hdFile{display:none}}
+.conn{white-space:nowrap}
+.slot{width:56px;height:56px;border-radius:8px;border:1px dashed var(--line-3);display:grid;place-items:center;color:var(--tx-3);position:relative;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--well) 60%,transparent);transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast)}
+.slot:hover{border-color:color-mix(in srgb,var(--scene) 70%,transparent);color:var(--tx-1)}
+.slot.req{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
+.slot img{width:100%;height:100%;object-fit:cover}
+.slot.filled{border-style:solid;border-color:var(--line-2)}
+.slot .x{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.7);display:none;place-items:center}
+.slot.filled:hover .x{display:grid}
+.slot .cap{position:absolute;left:0;right:0;bottom:0;font-size:10px;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#ddd;padding:6px 0 1px}
+.slot .ph{all:unset;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px}
+.ff-arrow{color:var(--tx-3)}
+.prompts{grid-row:1;grid-column:2;display:grid;grid-template-columns:1fr;min-width:0}
+.prompts.split{grid-template-columns:1.35fr 1fr}
+.pbox{display:flex;flex-direction:column;padding:10px 14px 6px;min-width:0}
+.pbox+.pbox{border-left:1px solid var(--line)}
+.pbox .pl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx-3);height:20px}
+.pbox .pl b{font-weight:600;color:var(--tx-2)}
+.pbox .pl .pos{color:var(--ok)}.pbox .pl .neg{color:var(--err)}
+.pbox textarea{flex:1;min-height:60px;height:64px;margin-bottom:4px;max-height:30vh;resize:none;background:none;border:0;outline:0;color:var(--tx-1);font-size:13px;line-height:1.6;padding:2px 0}
+.dock.tall .pbox textarea{height:28vh}
+.pbox textarea::placeholder{color:var(--tx-3)}
+.pbox .pf{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-3);height:22px}
+.dock-bar{grid-row:2;grid-column:1/3;display:flex;align-items:center;gap:6px;padding:8px 10px 10px 12px;border-top:1px solid var(--line);flex-wrap:nowrap;min-width:0}
+.pchips{display:flex;gap:6px;overflow:hidden;flex:1;min-width:0;flex-wrap:nowrap}
+.pchip{height:28px;padding:0 10px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2);background:rgb(var(--ink) / .04);border:1px solid var(--line);white-space:nowrap;transition:all var(--t-fast)}
+.pchip:hover{border-color:var(--line-3);color:var(--tx-1)}
+.pchip b{color:var(--tx-1);font-weight:500}
+.pchip svg{width:13px;height:13px}
+.gen-btn{height:38px;padding:0 18px 0 16px;font-size:14px;border-radius:10px}
+.gen-btn small{font:500 10.5px var(--mono);opacity:.7;margin-left:2px}
+.missing{font-size:11.5px;color:var(--warn);white-space:nowrap;display:flex;align-items:center;gap:4px}
+
+/* popover */
+.pop{position:absolute;z-index:20;bottom:calc(100% + 8px);left:12px;width:min(620px,calc(100% - 24px));max-height:min(64vh,560px);display:none;flex-direction:column;border-radius:var(--r-lg);
+  background:color-mix(in srgb,var(--bg-2) 98%,transparent);border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);transform-origin:bottom left}
+.pop.on{display:flex;animation:popIn var(--t-base) var(--ease-out)}
+@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
+.pop-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
+.pop-b{flex:1;overflow:auto;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.pop-f{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
+.fld{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
+.fld.wide{grid-column:1/3}
+.fld .fh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2)}
+.fld .fh b{color:var(--tx-1);font-weight:600}
+.opts{display:flex;flex-wrap:wrap;gap:6px}
+.opt{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2);font-size:12px;color:var(--tx-2);display:inline-flex;align-items:center;gap:6px}
+.opt:hover{color:var(--tx-1)}
+.opt.on{border-color:color-mix(in srgb,var(--scene) 65%,transparent);background:color-mix(in srgb,var(--scene) 14%,transparent);color:var(--tx-1)}
+.ratio-ico{border:1.5px solid currentColor;border-radius:2px}
+.step{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;height:28px}
+.step button{width:28px;height:100%;color:var(--tx-2)}.step button:hover{background:rgb(var(--ink) / .06);color:#fff}
+.step span{min-width:56px;text-align:center;font:600 12px var(--mono)}
+.range{display:flex;align-items:center;gap:10px}
+.range input{flex:1;accent-color:var(--gold)}
+
+/* history rail */
+.hist{background:var(--bg-1);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
+.hist-h{height:var(--head);display:flex;align-items:center;justify-content:center;gap:4px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--tx-3);flex:none}
+.hist-l{flex:1;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px;align-items:center}
+.hcell{width:100%;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;background:#000;border:1px solid var(--line);flex:none}
+.hcell img{display:block;width:100%;height:auto}
+.hcell .n{position:absolute;left:3px;top:3px;font:600 9.5px var(--mono);padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.6);color:#ccc}
+.hcell .k{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:4px;background:rgba(0,0,0,.6);display:grid;place-items:center}
+.hcell .k svg{width:10px;height:10px}
+.hcell.on{border-color:transparent}
+.hcell:hover{border-color:var(--line-3)}
+.hcell.fail{aspect-ratio:1;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--fail-a) 0 6px,var(--fail-b) 6px 12px);color:var(--err);font-size:10px}
+.hcell.run{aspect-ratio:1;display:grid;place-items:center;background:var(--gen-bg);font:600 10px var(--mono);color:var(--scene)}
+.hdate{font-size:10px;color:var(--tx-3);align-self:stretch;text-align:center;padding-top:4px}
+
+/* =========================================================
+   Studio (home)
+   ========================================================= */
+.scroll{flex:1;overflow:auto;min-height:0}
+.studio-wrap{display:grid;grid-template-columns:1fr 340px;gap:20px;padding:20px 24px 28px;max-width:1680px}
+.hero{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:250px;display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line-2);background:#0b0c11}
+.hero .art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9}
+.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg-0) 96%,transparent) 0%,color-mix(in srgb,var(--bg-0) 85%,transparent) 38%,color-mix(in srgb,var(--bg-0) 15%,transparent) 75%,color-mix(in srgb,var(--bg-0) 30%,transparent))}
+.hero .copy{position:relative;padding:26px 28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
+.eyebrow{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.5px;width:max-content;
+  color:color-mix(in srgb,var(--scene) 75%,var(--hi));border:1px solid color-mix(in srgb,var(--scene) 45%,transparent);background:color-mix(in srgb,var(--scene) 10%,transparent)}
+.display{font-size:var(--fs-display);font-weight:700;letter-spacing:.5px;line-height:1.25}
+.display em{font-style:normal;background:var(--display-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
+.stagebar{display:flex;gap:4px;margin-top:4px}
+.stagebar div{flex:1;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--tx-3)}
+.stagebar div i{height:3px;border-radius:3px;background:rgb(var(--ink) / .12)}
+.stagebar div.done i{background:var(--gold)}.stagebar div.cur i{background:linear-gradient(90deg,var(--gold) 50%,rgb(var(--ink) / .12) 50%)}
+.stagebar div.done,.stagebar div.cur{color:var(--tx-1)}
+.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
+.qcard{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-2);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base)}
+.qcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--scene) 45%,transparent)}
+.qcard .qi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--scene) 15%,transparent);color:var(--scene)}
+.qcard b{font-size:14px}.qcard p{font-size:12px;color:var(--tx-3)}
+.sec-h{display:flex;align-items:center;gap:10px;margin:24px 0 12px}
+.sec-h h2{font-size:15px;font-weight:600}
+.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
+.pcard{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);border:1px solid var(--line);cursor:pointer;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base)}
+.pcard:hover{transform:translateY(-3px);border-color:var(--line-3)}
+.pcard .cv{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
+.pcard .cv .tag{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.55)}
+.pcard .pb{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
+.pcard .pb b{font-size:13.5px}
+.mini-stages{display:flex;gap:3px}.mini-stages i{flex:1;height:3px;border-radius:2px;background:rgb(var(--ink) / .1)}.mini-stages i.d{background:var(--gold)}.mini-stages i.c{background:var(--sc-agent)}
+.side-card{border-radius:var(--r-lg);background:var(--bg-1);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px}
+.side-card h3{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
+.qitem{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;padding:6px;border-radius:8px}
+.qitem:hover{background:rgb(var(--ink) / .03)}
+.qitem .th{width:40px;height:40px;border-radius:6px;background-size:cover;background-position:center}
+.qitem .bar{margin-top:5px}
+.confirm-item{border-radius:10px;border:1px solid color-mix(in srgb,var(--sc-agent) 35%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--sc-agent) 10%,transparent),transparent);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
+.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
+.outs div{aspect-ratio:1;border-radius:6px;background-size:cover;background-position:center}
+
+/* =========================================================
+   Agents
+   ========================================================= */
+.agent-page{--scene:var(--sc-agent)}
+.aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
+.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--aur-op);animation:drift 18s var(--ease-io) infinite alternate}
+.aurora i:nth-child(1){width:520px;height:420px;left:8%;top:-120px;background:var(--aur-1)}
+.aurora i:nth-child(2){width:420px;height:380px;right:4%;top:40px;background:var(--aur-2);animation-delay:-6s;opacity:calc(var(--aur-op) * .55)}
+.aurora i:nth-child(3){width:460px;height:360px;left:38%;top:260px;background:var(--aur-3);animation-delay:-12s;opacity:calc(var(--aur-op) * .36)}
+@keyframes drift{to{transform:translate(60px,40px) scale(1.12)}}
+.particles{position:absolute;inset:0;pointer-events:none;z-index:0}
+.agent-grid{position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr;min-height:0;flex:1}
+.tasklist{border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg-1) 72%,transparent);backdrop-filter:blur(8px);display:flex;flex-direction:column;min-height:0}
+.tl-h{padding:12px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
+.tl-b{flex:1;overflow:auto;padding:6px 8px}
+.titem{padding:9px 10px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;border:1px solid transparent;margin:2px 0}
+.titem:hover{background:rgb(var(--ink) / .03)}
+.titem.on{background:color-mix(in srgb,var(--sc-agent) 10%,transparent);border-color:color-mix(in srgb,var(--sc-agent) 30%,transparent)}
+.titem b{font-size:12.5px;font-weight:500}
+.titem .meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-3)}
+.agent-home{overflow:auto;padding:22px 26px 30px;display:flex;flex-direction:column;gap:18px}
+.ahero{position:relative;border-radius:22px;overflow:hidden;border:1px solid color-mix(in srgb,var(--sc-agent) 28%,transparent);background:var(--agent-hero);padding:26px 28px;display:grid;grid-template-columns:1fr 330px;gap:24px}
+.ahero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 0H0v32' fill='none' stroke='white' stroke-opacity='.04'/%3E%3C/svg%3E");-webkit-mask:linear-gradient(90deg,#000,transparent 80%);mask:linear-gradient(90deg,#000,transparent 80%)}
+.ahero h2{font-size:30px;font-weight:700;line-height:1.2;background:var(--agent-title);-webkit-background-clip:text;background-clip:text;color:transparent}
+.big-input{margin-top:14px;border-radius:16px;background:color-mix(in srgb,var(--bg-0) 60%,transparent);border:1px solid rgb(var(--ink) / .12);padding:12px 14px 10px;transition:border-color var(--t-slow),box-shadow var(--t-slow)}
+.big-input:focus-within{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%,transparent),0 0 40px color-mix(in srgb,var(--sc-agent) 20%,transparent)}
+.big-input textarea{width:100%;height:58px;background:none;border:0;outline:0;resize:none;font-size:14px;line-height:1.6}
+.big-input .row{flex-wrap:wrap}
+.steps{display:flex;gap:8px;flex-wrap:wrap}
+.steps span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 4px;border-radius:var(--r-pill);background:rgb(var(--ink) / .05);border:1px solid var(--line-2);font-size:11.5px;color:var(--tx-2)}
+.steps span i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--mono);font-style:normal;background:var(--scene);color:var(--on-scene)}
+.orb{position:relative;display:grid;place-items:center}
+.orb .core{width:180px;height:180px;border-radius:50%;background:var(--orb-core);box-shadow:0 0 80px color-mix(in srgb,var(--sc-agent) 60%,transparent);animation:breath 4.5s var(--ease-io) infinite}
+.orb .ring{position:absolute;width:250px;height:250px;border-radius:50%;border:1px solid rgb(var(--ink) / .12);animation:spin 24s linear infinite}
+.orb .ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
+.orb .ring.r2{width:300px;height:300px;animation-duration:40s;animation-direction:reverse;border-style:dashed;border-color:rgb(var(--ink) / .07)}
+@keyframes breath{50%{transform:scale(1.05);box-shadow:0 0 120px color-mix(in srgb,var(--sc-agent) 75%,transparent)}}
+.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
+.acard{--c:var(--sc-agent);position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2);cursor:pointer;min-height:176px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform var(--t-slow) var(--ease-out),border-color var(--t-base),box-shadow var(--t-slow)}
+.acard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 18px 40px color-mix(in srgb,var(--c) 22%,transparent)}
+.acard .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;transition:transform .8s var(--ease-out),opacity var(--t-slow)}
+.acard:hover .bg{transform:scale(1.06);opacity:.75}
+.acard .sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,color-mix(in srgb,var(--bg-2) 95%,transparent) 75%)}
+.acard .num{position:absolute;right:12px;top:6px;font:800 36px/1 var(--mono);color:transparent;-webkit-text-stroke:1px rgb(var(--ink) / .22)}
+.acard .ic{position:absolute;left:12px;top:12px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--bg-1) 72%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--c)}
+.acard .tx{position:relative;padding:12px;display:flex;flex-direction:column;gap:4px}
+.acard .tx b{font-size:14px}.acard .tx p{font-size:11.5px;color:var(--tx-2);line-height:1.5}
+.acard .tx .row{margin-top:4px}
+.mini-row{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
+.panel{border-radius:16px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg-2) 80%,transparent);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
+.panel h3{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
+.skills{display:flex;flex-wrap:wrap;gap:6px}
+.skill{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:rgb(var(--ink) / .03);display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2)}
+.skill i{width:6px;height:6px;border-radius:50%;background:var(--sc-agent)}
+.outrow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
+.outcard{border-radius:10px;border:1px solid var(--line);background:var(--bg-2);overflow:hidden}
+.outcard .t{height:64px;background-size:cover;background-position:center}
+.outcard .d{padding:7px 9px;font-size:11.5px;display:flex;flex-direction:column;gap:2px}
+
+/* agent task (session) */
+.atask{position:relative;z-index:1;display:grid;grid-template-columns:260px 1fr 420px;flex:1;min-height:0}
+.convo{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line)}
+.convo-b{flex:1;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
+.msg{display:flex;gap:10px;max-width:760px}
+.msg.me{align-self:flex-end;flex-direction:row-reverse}
+.msg .av{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--sc-agent) 18%,transparent);color:var(--sc-agent)}
+.msg.me .av{background:var(--bg-3);color:var(--tx-2)}
+.bub{padding:10px 13px;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);font-size:13px;line-height:1.65}
+.msg.me .bub{background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 25%,transparent)}
+.plan{border-radius:12px;border:1px solid color-mix(in srgb,var(--sc-agent) 30%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--sc-agent) 8%,transparent),color-mix(in srgb,var(--bg-2) 90%,transparent));padding:12px 14px;display:flex;flex-direction:column;gap:8px}
+.pstep{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
+.pstep .s{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-3);font:600 10px var(--mono);color:var(--tx-3)}
+.pstep.done .s{background:var(--ok);border-color:var(--ok);color:var(--on-ok)}
+.pstep.run .s{border-color:var(--sc-agent);color:var(--sc-agent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-agent) 20%,transparent);animation:breath 2s infinite}
+.pstep.done b{color:var(--tx-2);font-weight:400}
+.tool{border-radius:10px;border:1px solid var(--line);background:var(--bg-1);font-size:12px}
+.tool summary{list-style:none;display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--tx-2)}
+.tool summary::-webkit-details-marker{display:none}
+.tool summary code{font-family:var(--mono);color:var(--sc-image);font-size:11.5px}
+.tool pre{margin:0 12px 10px;padding:8px 10px;border-radius:8px;background:var(--well);font:11px/1.6 var(--mono);color:var(--tx-2);white-space:pre-wrap}
+.thinking{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx-3)}
+.thinking i{width:6px;height:6px;border-radius:50%;background:var(--sc-agent);animation:blink 1.2s infinite}
+.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}
+@keyframes blink{50%{opacity:.2;transform:translateY(-2px)}}
+.convo-in{flex:none;margin:0 18px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line-2);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
+.convo-in textarea{background:none;border:0;outline:0;resize:none;height:44px;font-size:13px}
+.artifact{display:flex;flex-direction:column;min-height:0;background:color-mix(in srgb,var(--bg-1) 80%,transparent)}
+.art-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
+.art-b{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
+.shot{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2)}
+.shot .th{aspect-ratio:16/9;border-radius:6px;background-size:cover;background-position:center;position:relative}
+.shot .th span{position:absolute;left:3px;top:3px;font:700 9.5px var(--mono);background:rgba(0,0,0,.6);padding:1px 4px;border-radius:3px}
+.shot [contenteditable]{outline:0;border-radius:4px;padding:1px 3px;margin:-1px -3px;font-size:12px;line-height:1.55;color:var(--tx-1)}
+.shot [contenteditable]:hover{background:rgb(var(--ink) / .04)}
+.shot [contenteditable]:focus{background:color-mix(in srgb,var(--gold) 8%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 35%,transparent)}
+.art-f{border-top:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
+
+/* =========================================================
+   Project workbench
+   ========================================================= */
+.proj{--scene:var(--sc-project)}
+.stepper{display:flex;align-items:stretch;gap:0;padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--bg-1);flex:none;height:58px}
+.stp{flex:1;display:flex;align-items:center;gap:10px;padding:0 14px;cursor:pointer;position:relative;color:var(--tx-3);transition:color var(--t-base)}
+.stp:hover{color:var(--tx-1)}
+.stp .n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:700 11px var(--mono);border:1px solid var(--line-3)}
+.stp .t{display:flex;flex-direction:column;line-height:1.3}
+.stp .t b{font-size:13px;font-weight:600}
+.stp .t small{font-size:11px}
+.stp.done .n{background:color-mix(in srgb,var(--gold) 16%,transparent);border-color:color-mix(in srgb,var(--gold) 50%,transparent);color:var(--gold)}
+.stp.draft .n{border-color:var(--sc-agent);color:var(--sc-agent);box-shadow:0 0 12px color-mix(in srgb,var(--sc-agent) 35%,transparent)}
+.stp.on{color:var(--tx-1)}
+.stp.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
+.stp+.stp::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:1px;background:var(--line-3)}
+.proj-body{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0}
+.proj-main{display:flex;flex-direction:column;min-height:0;min-width:0}
+.draftbar{margin:14px 18px 0;border-radius:12px;padding:10px 12px 10px 14px;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--sc-agent) 14%,transparent),color-mix(in srgb,var(--sc-agent) 4%,transparent));border:1px solid color-mix(in srgb,var(--sc-agent) 35%,transparent);font-size:12.5px}
+.draftbar.hide{display:none}
+.shots{flex:1;overflow:auto;padding:14px 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-content:start;grid-auto-rows:max-content}
+.scard{border-radius:12px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden;cursor:pointer;transition:border-color var(--t-base),transform var(--t-base) var(--ease-out)}
+.scard:hover{border-color:var(--line-3);transform:translateY(-2px)}
+.scard.on{border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
+.scard .im{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
+.scard .im .tc{position:absolute;left:8px;top:8px;font:700 11px var(--mono);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:4px}
+.scard .im .st{position:absolute;right:8px;top:8px}
+.scard .bd{padding:9px 11px 11px;display:flex;flex-direction:column;gap:5px;font-size:12px}
+.scard .bd p{color:var(--tx-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.scard .bd .row .btn{margin-left:auto}
+.proj-side{border-left:1px solid var(--line);background:var(--bg-1);display:flex;flex-direction:column;min-height:0}
+.ps-sec{padding:14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
+.ps-sec h3{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
+.agent-chip{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--sc-agent) 12%,transparent),rgb(var(--ink) / .02));border:1px solid color-mix(in srgb,var(--sc-agent) 25%,transparent)}
+.agent-chip .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--sc-agent) 20%,transparent);color:var(--sc-agent)}
+.ps-tasks{flex:1;overflow:auto;padding:8px 10px}
+.proj-foot{flex:none;height:56px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 18px;background:color-mix(in srgb,var(--bg-1) 85%,transparent)}
+
+/* =========================================================
+   Management pages (workflow library, models, tasks, library)
+   ========================================================= */
+.manage{--scene:var(--sc-manage)}
+.mg{flex:1;display:grid;grid-template-columns:220px 1fr 360px;min-height:0}
+.mg-side{border-right:1px solid var(--line);background:var(--bg-1);padding:12px 10px;overflow:auto;display:flex;flex-direction:column;gap:2px}
+.mg-side .h{font-size:11px;color:var(--tx-3);padding:10px 8px 4px;letter-spacing:.5px}
+.fitem{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:8px;font-size:12.5px;color:var(--tx-2);cursor:pointer}
+.fitem:hover{background:rgb(var(--ink) / .04);color:var(--tx-1)}
+.fitem.on{background:var(--bg-3);color:var(--tx-1)}
+.fitem .n{margin-left:auto;font:500 11px var(--mono);color:var(--tx-3)}
+.mg-main{display:flex;flex-direction:column;min-height:0;min-width:0}
+.mg-tools{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
+.tbl{flex:1;overflow:auto}
+.tbl table{width:100%;border-collapse:collapse;font-size:12.5px}
+.tbl th{position:sticky;top:0;background:var(--bg-0);z-index:1;text-align:left;font-weight:500;color:var(--tx-3);font-size:11.5px;padding:8px 12px;border-bottom:1px solid var(--line)}
+.tbl td{white-space:nowrap;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
+.tbl tr{cursor:pointer;transition:background var(--t-fast)}
+.tbl tbody tr:hover{background:rgb(var(--ink) / .025)}
+.tbl tr.on{background:color-mix(in srgb,var(--sc-manage) 10%,transparent)}
+.tbl .nm b{font-weight:500;display:block}
+.tbl .nm small{font:11px var(--mono);color:var(--tx-3)}
+.mg-detail{border-left:1px solid var(--line);background:var(--bg-1);overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
+.map{display:grid;grid-template-columns:1fr 18px 1fr;gap:6px;align-items:center;font-size:12px}
+.map .a{padding:6px 8px;border-radius:6px;background:var(--bg-0);border:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--tx-2)}
+.map .b{padding:6px 8px;border-radius:6px;background:color-mix(in srgb,var(--sc-image) 8%,transparent);border:1px solid color-mix(in srgb,var(--sc-image) 30%,transparent)}
+.lib-grid{flex:1;overflow:auto;padding:14px 16px;columns:5 200px;column-gap:10px}
+.lib-grid div{break-inside:avoid;margin-bottom:10px;border-radius:10px;overflow:hidden;border:1px solid var(--line);position:relative}
+.lib-grid img{display:block;width:100%}
+.mcards{flex:1;overflow:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;align-content:start;grid-auto-rows:max-content}
+.mcard{border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);padding:14px;display:flex;flex-direction:column;gap:10px}
+.mcard .row b{font-size:13.5px}
+.lat{font:600 11px var(--mono);color:var(--ok)}
+.ia-map{flex:1;overflow:auto;padding:22px 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start;grid-auto-rows:max-content}
+.ia-card{border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);padding:16px;display:flex;flex-direction:column;gap:8px}
+.ia-card h3{font-size:14px;display:flex;align-items:center;gap:8px}
+.ia-card p{font-size:12.5px;color:var(--tx-2)}.ia-card .tag{align-self:flex-start}
+
+/* spec page */
+.spec{padding:20px 24px 32px;display:flex;flex-direction:column;gap:14px;max-width:1500px}
+.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.sp-sec{border-radius:14px;border:1px solid var(--line-2);background:var(--bg-1);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
+.sp-sec h3{font-size:14px;font-weight:600}
+.sp-sec code,.ty code{font:11px var(--mono);color:var(--tx-3)}
+.sw-row{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
+.swc{border-radius:10px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2)}
+.swc i{display:block;height:54px}
+.swc div{padding:6px 8px;font-size:11px;line-height:1.4}
+.swc div b{display:block;font-size:12px}
+.ty{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:6px}
+.states{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.states small{display:block;color:var(--tx-3);font-size:11px;margin-bottom:6px}
+.mt{width:100%;border-collapse:collapse;font-size:12px}
+.mt th{text-align:left;color:var(--tx-3);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line-2)}
+.mt td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--tx-2)}
+.mt td:first-child{color:var(--tx-1)}
+/* toast */
+#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:100}
+.toast{min-width:260px;max-width:380px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--bg-3) 97%,transparent);border:1px solid var(--line-2);box-shadow:var(--sh-2);font-size:12.5px;display:flex;gap:10px;align-items:flex-start;animation:toastIn var(--t-slow) var(--ease-spring)}
+.toast .dot{margin-top:6px}
+@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
+/* lightbox */
+.lb{position:fixed;inset:0;z-index:60;background:rgba(4,5,8,.92);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
+.lb.on{display:flex;animation:pageIn var(--t-base) var(--ease-out)}
+.lb img{max-width:92vw;max-height:88vh;border-radius:6px;box-shadow:0 30px 80px #000}
+.lb .btn{position:absolute;top:16px;right:16px}
+/* project picker */
+.sheet{position:fixed;inset:0;z-index:50;background:var(--scrim);display:none;align-items:center;justify-content:center}
+.sheet.on{display:flex;animation:pageIn var(--t-base) var(--ease-out)}
+.sheet-card{width:440px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--sh-2);overflow:hidden}
+.sheet-card .h{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600}
+.sheet-card .b{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
+.sheet-card .f{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
+.pick{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;border:1px solid var(--line);cursor:pointer}
+.pick.on{border-color:color-mix(in srgb,var(--gold) 60%,transparent);background:color-mix(in srgb,var(--gold) 7%,transparent)}
+.pick .th{width:56px;height:32px;border-radius:5px;background-size:cover}
+
+/* =========================================================
+   v2 · 主题（同一布局 / 功能 / 动效，只换“灯光”）
+   规则：变量只在主题块里改；组件 CSS 只引用语义变量。
+   ========================================================= */
+/* media overlays stay dark in every theme — they sit on artwork, not on UI */
+.scard .im .tc,.shot .th span,.pcard .cv .tag,.lib-grid .tag{color:#eee;border-color:rgba(255,255,255,.14)}
+.slot .x{color:#fff}
+.scard .im .st .tag{background:rgba(7,8,12,.62);border-color:rgba(255,255,255,.16);color:#ddd;backdrop-filter:blur(4px)}
+.scard .im .st .tag.ok{color:#5fe0aa;border-color:rgba(95,224,170,.4)}
+#p-workflows .tbl table{table-layout:fixed}
+#p-workflows .tbl th:nth-child(2){width:9%}#p-workflows .tbl th:nth-child(3){width:13%}#p-workflows .tbl th:nth-child(4){width:20%}#p-workflows .tbl th:nth-child(5){width:12%}
+#p-workflows .tbl td{overflow:hidden;text-overflow:ellipsis}
+.wfi .sub{white-space:nowrap;overflow:hidden}
+.gen-info{color:var(--tx-1)}
+
+/* ---------- 日光棚 Daylight（浅色） ---------- */
+[data-theme="day"]{
+  color-scheme:light;
+  --bg-0:#e9e4da; --bg-1:#f4f1ea; --bg-2:#fbf9f5; --bg-3:#ffffff; --bg-4:#efe9df;
+  --ink:38 30 18;
+  --line:rgb(38 30 18 / .09); --line-2:rgb(38 30 18 / .15); --line-3:rgb(38 30 18 / .26);
+  --tx-1:#1f1b15; --tx-2:#55504a; --tx-3:#736d65; --tx-inv:#ffffff;
+  --gold:#a65a0c; --gold-hi:#8a4a06; --gold-lo:#c98a3a;
+  --grad-gold:linear-gradient(135deg,#bd6512 0%,#a9580d 55%,#984d08 100%);
+  --sc-image:#0b8378; --sc-video:#c2511a; --sc-agent:#6d45d0; --sc-project:#a65a0c; --sc-manage:#4c6286; --sc-asset:#b93a72;
+  --ok:#11804f; --warn:#9a6400; --err:#c42b41; --info:#2263c2;
+  --hi:#141109; --on-scene:#ffffff; --on-ok:#ffffff;
+  --sh-1:0 1px 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(60,44,20,.10);
+  --sh-2:0 1px 0 rgba(255,255,255,.8) inset,0 12px 32px rgba(60,44,20,.14),0 2px 6px rgba(60,44,20,.06);
+  --sh-gold:0 4px 14px rgba(166,90,12,.28),0 0 0 1px rgba(120,60,0,.18) inset;
+  --sh-gold-hover:0 6px 20px rgba(166,90,12,.38),0 0 0 1px rgba(120,60,0,.24) inset;
+  --glass:color-mix(in srgb,var(--bg-1) 88%,transparent);
+  --scrim:rgba(40,32,20,.34);
+  --well:#ffffff;
+  --media-shadow:0 14px 36px rgba(50,38,18,.20),0 0 0 1px rgba(38,30,18,.10);
+  --brand-grad:linear-gradient(145deg,#2c261d,#14110c); --brand-glow:0 2px 8px rgba(40,30,15,.25); --brand-ink:#f2c46d;
+  --display-grad:linear-gradient(90deg,#a65a0c,#c2511a);
+  --glow:0;
+  --gen-bg:#e3ddd1; --grain:rgba(40,30,18,.10);
+  --beam:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene) 24%,transparent),rgba(255,255,255,.85),transparent);
+  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 14 24'%3E%3Cpath d='M7 0l7 4v8l-7 4-7-4V4zM7 16v8' fill='none' stroke='%23261e12' stroke-opacity='.16' stroke-width='.8'/%3E%3C/svg%3E");
+  --scanline:transparent; --stage-tint:6%;
+  --aur-1:#b9a0ff; --aur-2:#ffb39a; --aur-3:#8fe0d4; --aur-op:.42;
+  --agent-hero:linear-gradient(120deg,#efe7ff,#faf7f1 55%,#e4f3ef);
+  --agent-title:linear-gradient(90deg,#24163f,#5b34c4 55%,#a2346f);
+  --orb-core:radial-gradient(circle at 35% 30%,#fff 0,#efe6ff 14%,#a98cf0 42%,#6d45d0 75%,transparent 76%);
+  --particle:109,69,208;
+  --fail-a:#f6e3e3; --fail-b:#efd6d7;
+}
+/* ---------- 调色间 Grading Suite（中性深灰） ---------- */
+[data-theme="grade"]{
+  color-scheme:dark;
+  --bg-0:#1b1b1c; --bg-1:#222223; --bg-2:#29292b; --bg-3:#323234; --bg-4:#3c3c3f;
+  --ink:255 255 255;
+  --line:rgb(255 255 255 / .075); --line-2:rgb(255 255 255 / .13); --line-3:rgb(255 255 255 / .22);
+  --tx-1:#ecebe8; --tx-2:#acaba6; --tx-3:#85847f; --tx-inv:#141516;
+  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:10px;
+  --gold:#d9dde2; --gold-hi:#f2f4f6; --gold-lo:#9aa1aa;
+  --grad-gold:linear-gradient(180deg,#f6f7f8 0%,#d5d9de 100%);
+  --sc-image:#6fc2b7; --sc-video:#d8a06c; --sc-agent:#a598d8; --sc-project:#d4bc8a; --sc-manage:#909cae; --sc-asset:#d394b0;
+  --ok:#4cc38f; --warn:#e3a93b; --err:#ee5d70; --info:#5d9fe3;
+  --hi:white; --on-scene:#141516; --on-ok:#06140e;
+  --sh-1:0 1px 0 rgba(255,255,255,.035) inset,0 2px 6px rgba(0,0,0,.35);
+  --sh-2:0 1px 0 rgba(255,255,255,.04) inset,0 12px 30px rgba(0,0,0,.45);
+  --sh-gold:0 4px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.55) inset;
+  --sh-gold-hover:0 6px 18px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.7) inset;
+  --glass:color-mix(in srgb,var(--bg-1) 82%,transparent);
+  --scrim:rgba(0,0,0,.55);
+  --well:#18181a;
+  --media-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07);
+  --brand-grad:linear-gradient(145deg,#f1f2f3,#aeb3ba); --brand-glow:none; --brand-ink:#17181a;
+  --display-grad:linear-gradient(90deg,#ffffff,#bfc5cc);
+  --glow:0;
+  --gen-bg:#1a1b1d; --grain:rgba(255,255,255,.06);
+  --beam:linear-gradient(90deg,transparent,rgba(255,255,255,.07),rgba(255,255,255,.22),transparent);
+  --scanline:transparent; --stage-tint:0%;
+  --aur-1:#5d5a80; --aur-2:#7a6070; --aur-3:#4f7470; --aur-op:.16;
+  --agent-hero:linear-gradient(120deg,#202027,#1b1c1e 60%,#1b2020);
+  --agent-title:linear-gradient(90deg,#ffffff,#d4d0ea);
+  --orb-core:radial-gradient(circle at 35% 30%,#fff 0,#e7e5f2 14%,#a598d8 44%,#3e3a5c 76%,transparent 77%);
+  --particle:205,205,215;
+  --fail-a:#211a1b; --fail-b:#1b1617;
+}
+/* ---------- 蓝调时刻 Blue Hour（深蓝 + 珊瑚） ---------- */
+[data-theme="bluehour"]{
+  color-scheme:dark;
+  --bg-0:#0a1029; --bg-1:#0f1838; --bg-2:#162148; --bg-3:#1f2c5c; --bg-4:#2a386e;
+  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
+  --ink:214 224 255;
+  --line:rgb(214 224 255 / .07); --line-2:rgb(214 224 255 / .12); --line-3:rgb(214 224 255 / .2);
+  --tx-1:#eef1fb; --tx-2:#a9b1cc; --tx-3:#7680a2; --tx-inv:#2b0c05;
+  --gold:#ff9a6c; --gold-hi:#ffc7a8; --gold-lo:#d9603f;
+  --grad-gold:linear-gradient(135deg,#ffd3b4 0%,#ff9a6c 45%,#f0644f 100%);
+  --sc-image:#4fd6ea; --sc-video:#ffbb55; --sc-agent:#b592ff; --sc-project:#ff9a6c; --sc-manage:#8aa0dc; --sc-asset:#ff86c0;
+  --ok:#4fd69c; --warn:#ffc94d; --err:#ff4d6d; --info:#69b4ff;
+  --hi:white; --on-scene:#1a0b04; --on-ok:#05150e;
+  --sh-1:0 1px 0 rgba(214,224,255,.05) inset,0 2px 8px rgba(0,0,10,.4);
+  --sh-2:0 1px 0 rgba(214,224,255,.06) inset,0 12px 32px rgba(0,0,12,.55);
+  --sh-gold:0 6px 24px rgba(255,120,90,.38),0 0 0 1px rgba(255,214,186,.42) inset;
+  --sh-gold-hover:0 8px 30px rgba(255,120,90,.52),0 0 0 1px rgba(255,226,206,.55) inset;
+  --scrim:rgba(4,6,16,.62);
+  --media-shadow:0 30px 80px rgba(0,0,14,.62),0 0 0 1px rgba(214,224,255,.08);
+  --brand-grad:radial-gradient(circle at 30% 25%,#ffe4d2 0,#ff9a6c 38%,#a3363a 100%); --brand-glow:0 0 26px rgba(255,140,100,.42); --brand-ink:#2b0c05;
+  --display-grad:linear-gradient(90deg,#ffd3b4,#ff9a6c 55%,#ff7096);
+  --glow:1;
+  --gen-bg:#0b1124; --grain:rgba(214,224,255,.08);
+  --beam:linear-gradient(90deg,transparent,color-mix(in srgb,var(--scene) 34%,transparent),rgba(255,236,220,.3),transparent);
+  --stage-tint:10%;
+  --aur-1:#3e5bff; --aur-2:#ff7a8a; --aur-3:#2fd5e5; --aur-op:.36;
+  --agent-hero:linear-gradient(120deg,rgba(26,32,84,.92),rgba(12,16,40,.94) 55%,rgba(44,18,52,.9));
+  --agent-title:linear-gradient(90deg,#ffffff,#c9d4ff 50%,#ffb8a0);
+  --orb-core:radial-gradient(circle at 35% 30%,#fff 0,#ffe1cf 12%,#ff9a6c 38%,#5a2fb0 76%,transparent 77%);
+  --particle:255,206,186;
+  --fail-a:#1d1220; --fail-b:#160e1a;
+}
+/* glow-free themes: light & neutral rely on contrast and outline, never on bloom */
+[data-theme="day"] .nav.on::before,[data-theme="grade"] .nav.on::before,
+[data-theme="day"] .bar i,[data-theme="grade"] .bar i,
+[data-theme="day"] .stp.on::after,[data-theme="grade"] .stp.on::after,
+[data-theme="day"] .stp.draft .n,[data-theme="grade"] .stp.draft .n,
+[data-theme="day"] .wfb-title .glyph,[data-theme="grade"] .wfb-title .glyph,
+[data-theme="day"] .demo-badge::before,[data-theme="grade"] .demo-badge::before,
+[data-theme="day"] .orb .ring::before,[data-theme="grade"] .orb .ring::before,
+[data-theme="day"] .scrub b,[data-theme="grade"] .scrub b{box-shadow:none}
+[data-theme="day"] .dot,[data-theme="grade"] .dot{box-shadow:none!important}
+[data-theme="day"] .nav.on::before{width:3px}
+[data-theme="day"] .seg{background:var(--bg-0)}
+[data-theme="day"] .seg button.on{background:#fff;box-shadow:0 1px 2px rgba(60,44,20,.14),0 0 0 1px rgba(38,30,18,.06)}
+[data-theme="day"] .input{border-color:var(--line-3)}
+[data-theme="day"] .gen-info{background:linear-gradient(transparent,rgba(251,249,245,.94))}
+[data-theme="day"] .frame.reveal img{animation-name:developDay}
+[data-theme="day"] .vf::after{--c:color-mix(in srgb,var(--scene) 85%,black)}
+[data-theme="day"] .wfi.on{background:linear-gradient(90deg,color-mix(in srgb,var(--scene) 10%,#fff),#fff);box-shadow:0 1px 2px rgba(60,44,20,.08)}
+[data-theme="day"] .wfi .fam,[data-theme="day"] .fam-dot{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
+[data-theme="day"] .orb .core{box-shadow:0 18px 50px rgba(109,69,208,.28)}
+[data-theme="day"] .big-input{background:rgba(255,255,255,.75);border-color:rgba(38,30,18,.14)}
+[data-theme="day"] .ahero{border-color:rgba(109,69,208,.22)}
+[data-theme="day"] .btn.primary[disabled]{filter:none;background:#e3ddd2;color:#8d877d;box-shadow:none}
+[data-theme="day"] .tbl tbody tr:hover{background:rgba(38,30,18,.035)}
+[data-theme="day"] .hcell{border-color:var(--line-2)}
+@keyframes developDay{0%{filter:blur(16px) brightness(1.35) sepia(.6) saturate(.2);opacity:.15;transform:scale(1.015)}60%{filter:blur(2px) sepia(.12);opacity:1}100%{filter:none;transform:none}}
+/* 调色间: neutral grey stage so artwork colour is judged without a tint */
+[data-theme="grade"] .stage-bg{background:#262627}
+[data-theme="grade"] .wfi,[data-theme="grade"] .hcell,[data-theme="grade"] .frame,[data-theme="grade"] .player,[data-theme="grade"] .scard,[data-theme="grade"] .acard,[data-theme="grade"] .ahero,[data-theme="grade"] .panel,[data-theme="grade"] .mcard,[data-theme="grade"] .side-card,[data-theme="grade"] .hero,[data-theme="grade"] .pcard,[data-theme="grade"] .qcard,[data-theme="grade"] .gen-btn,[data-theme="grade"] .big-input,[data-theme="grade"] .plan,[data-theme="grade"] .bub,[data-theme="grade"] .tool,[data-theme="grade"] .shot,[data-theme="grade"] .convo-in,[data-theme="grade"] .draftbar,[data-theme="grade"] .agent-chip,[data-theme="grade"] .nav,[data-theme="grade"] .brand,[data-theme="grade"] .queue-dot,[data-theme="grade"] .seg,[data-theme="grade"] .seg button,[data-theme="grade"] .pchip,[data-theme="grade"] .opt,[data-theme="grade"] .fld{border-radius:4px}
+[data-theme="grade"] .chip,[data-theme="grade"] .eyebrow,[data-theme="grade"] .conn,[data-theme="grade"] .demo-badge{border-radius:3px}
+[data-theme="grade"] .wfi.on{background:var(--bg-3);border-color:var(--line-3);box-shadow:inset 2px 0 0 var(--scene)}
+[data-theme="grade"] .ph,[data-theme="grade"] .wfb-meta,[data-theme="grade"] .grp-h{letter-spacing:.2px}
+[data-theme="grade"] .grp-h{font-weight:500}
+[data-theme="grade"] .btn.primary{color:#141516}
+[data-theme="grade"] .orb .core{box-shadow:0 0 40px rgba(165,152,216,.25)}
+[data-theme="grade"] .frame.reveal img{animation-name:developGrade}
+@keyframes developGrade{0%{filter:blur(10px) saturate(0);opacity:.25}100%{filter:none;opacity:1}}
+/* 蓝调时刻: the one theme that leans into atmosphere */
+[data-theme="bluehour"] body,[data-theme="bluehour"] #pages{background:linear-gradient(180deg,#0c1435 0%,#121640 55%,#24163f 100%)}
+[data-theme="bluehour"] .rail{background:linear-gradient(180deg,#101a40,#1a1440)}
+[data-theme="bluehour"] .wfb,[data-theme="bluehour"] .hist,[data-theme="bluehour"] .mg-side,[data-theme="bluehour"] .mg-detail,[data-theme="bluehour"] .proj-side{background:color-mix(in srgb,var(--bg-1) 78%,transparent)}
+[data-theme="bluehour"] .ph{background:color-mix(in srgb,#0f1838 55%,transparent)}
+[data-theme="bluehour"] .wfi,[data-theme="bluehour"] .hcell,[data-theme="bluehour"] .scard,[data-theme="bluehour"] .bub,[data-theme="bluehour"] .shot,[data-theme="bluehour"] .tool,[data-theme="bluehour"] .nav,[data-theme="bluehour"] .pchip,[data-theme="bluehour"] .opt{border-radius:14px}
+[data-theme="bluehour"] .frame,[data-theme="bluehour"] .player{border-radius:14px}
+[data-theme="bluehour"] .btn{border-radius:10px}[data-theme="bluehour"] .btn.sm{border-radius:8px}[data-theme="bluehour"] .gen-btn{border-radius:999px;padding:0 22px}
+[data-theme="bluehour"] .dock{background:linear-gradient(180deg,rgba(31,44,92,.82),rgba(22,33,72,.9));backdrop-filter:blur(14px)}
+[data-theme="bluehour"] .wfi.on{background:linear-gradient(90deg,color-mix(in srgb,var(--scene) 20%,var(--bg-3)),color-mix(in srgb,var(--gold) 6%,var(--bg-3)))}
+[data-theme="bluehour"] .stage-bg{background:radial-gradient(70% 80% at 50% 40%,color-mix(in srgb,var(--scene) 10%,transparent),transparent 70%),linear-gradient(180deg,rgba(40,60,140,.12),transparent 40%,rgba(255,120,90,.05))}
+
+/* ---------- theme switcher ---------- */
+.theme-pop{position:fixed;left:calc(var(--rail) + 8px);bottom:12px;z-index:70;width:380px;display:none;flex-direction:column;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--sh-2),0 24px 60px rgba(0,0,0,.35);transform-origin:bottom left}
+.theme-pop.on{display:flex;animation:popIn var(--t-base) var(--ease-out)}
+.theme-pop .tp-h{display:flex;align-items:center;gap:8px;padding:12px 14px 8px}
+.theme-pop .tp-h b{font-size:13.5px}
+.theme-pop .tp-b{display:flex;flex-direction:column;gap:6px;padding:4px 10px 10px}
+.theme-pop .tp-f{border-top:1px solid var(--line);padding:8px 10px 8px 14px;font-size:11.5px;color:var(--tx-3);display:flex;gap:6px;align-items:center}
+.topt{display:grid;grid-template-columns:76px 1fr 18px;gap:12px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent;text-align:left;width:100%;transition:background var(--t-fast),border-color var(--t-fast)}
+.topt:hover{background:rgb(var(--ink) / .04);border-color:var(--line-2)}
+.topt.on{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
+.topt:focus-visible,.ttile:focus-visible{outline:2px solid var(--info);outline-offset:2px}
+.topt .nm{display:flex;align-items:baseline;gap:6px}.topt .nm b{font-size:13px;color:var(--tx-1)}.topt .nm small{font:500 10.5px var(--mono);color:var(--tx-3)}
+.topt p{font-size:11.5px;color:var(--tx-2);line-height:1.45;margin-top:2px}
+.topt .ck{color:var(--gold);opacity:0}.topt.on .ck{opacity:1}
+/* live mini-preview: rendered from the theme's own tokens, not screenshots */
+.tprev{height:48px;border-radius:8px;overflow:hidden;display:grid;grid-template-columns:12px 22px 1fr;background:var(--bg-0);border:1px solid var(--line-2);position:relative}
+.tprev .r{background:var(--bg-1);border-right:1px solid var(--line)}
+.tprev .r::before{content:"";display:block;width:4px;height:4px;margin:6px auto;border-radius:50%;background:var(--gold)}
+.tprev .l{background:var(--bg-1);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;padding:6px 3px}
+.tprev .l i{height:4px;border-radius:2px;background:var(--line-3)}.tprev .l i:first-child{background:var(--sc-image)}
+.tprev .m{position:relative;padding:5px 6px;display:flex;flex-direction:column;gap:4px}
+.tprev .m .art{flex:1;border-radius:3px;background:linear-gradient(160deg,#2f5d7c,#f2b36b);box-shadow:0 0 0 1px var(--line-2)}
+.tprev .m .dk{height:9px;border-radius:3px;background:var(--bg-3);border:1px solid var(--line-2);display:flex;justify-content:flex-end;padding:1px}
+.tprev .m .dk span{width:14px;border-radius:2px;background:var(--grad-gold)}
+.tprev .tx{position:absolute;left:40px;top:6px;width:20px;height:3px;border-radius:2px;background:var(--tx-1);opacity:.85}
+.ttiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
+.ttile{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg-2);text-align:left;cursor:pointer;transition:border-color var(--t-fast)}
+.ttile:hover{border-color:var(--line-3)}
+.ttile.on{border-color:color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 14%,transparent)}
+.ttile .tprev{height:64px}
+.ttile b{font-size:12.5px}.ttile small{font-size:11px;color:var(--tx-3)}
+.ttile .tprev,.topt .tprev{color:var(--tx-1)}
+.theme-dot{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--gold) 0 25%,var(--sc-image) 0 50%,var(--bg-3) 0 75%,var(--tx-1) 0);box-shadow:0 0 0 1px var(--line-3)}
+/* spec: theme matrix */
+.tmx{display:grid;grid-template-columns:150px repeat(4,1fr);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;font-size:11.5px}
+.tmx>div{padding:6px 8px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;min-width:0}
+.tmx .hd{font-weight:600;font-size:12px;background:var(--bg-2)}
+.tmx .k{color:var(--tx-2)}.tmx .k code{font:10.5px var(--mono);color:var(--tx-3);margin-left:auto}
+.tmx .c i{width:16px;height:16px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(128,128,128,.35)}
+.tmx .c span{font:10.5px var(--mono);color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* theme change: one-shot colour crossfade (fallback when View Transitions is unavailable) */
+html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .28s var(--ease-io),border-color .28s var(--ease-io),color .28s var(--ease-io),fill .28s,box-shadow .28s!important}
+::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
+::view-transition-new(root){animation:lampOn .52s var(--ease-out)}
+@keyframes lampOn{from{clip-path:circle(0 at var(--tx,34px) var(--ty,85%))}to{clip-path:circle(150% at var(--tx,34px) var(--ty,85%))}}
+</style>
+</head>
+<body>
+<svg width="0" height="0" style="position:absolute">
+ <defs>
+  <symbol id="i-home" viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></symbol>
+  <symbol id="i-project" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 4v5M13 4v5"/></symbol>
+  <symbol id="i-create" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-agent" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-canvas" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-lib" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-queue" viewBox="0 0 24 24"><path d="M4 6h16M4 12h10M4 18h7"/><circle cx="18" cy="16" r="3"/></symbol>
+  <symbol id="i-flow" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-plug" viewBox="0 0 24 24"><path d="M9 2v5M15 2v5M6 7h12v4a6 6 0 0 1-12 0zM12 17v5"/></symbol>
+  <symbol id="i-cube" viewBox="0 0 24 24"><path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M3 7l9 5 9-5M12 12v10"/></symbol>
+  <symbol id="i-gear" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
+  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 17v5M5 17h14l-2-4V5a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v8z"/></symbol>
+  <symbol id="i-play" viewBox="0 0 24 24"><path d="M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5z"/></symbol>
+  <symbol id="i-pause" viewBox="0 0 24 24"><rect x="6" y="4" width="4.5" height="16" rx="1"/><rect x="13.5" y="4" width="4.5" height="16" rx="1"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></symbol>
+  <symbol id="i-image" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></symbol>
+  <symbol id="i-film" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5"/></symbol>
+  <symbol id="i-mask" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 16c1-4 7-4 8-8" stroke-dasharray="2 2"/><circle cx="15" cy="15" r="3"/></symbol>
+  <symbol id="i-audio" viewBox="0 0 24 24"><path d="M4 10v4M8 6v12M12 9v6M16 4v16M20 10v4"/></symbol>
+  <symbol id="i-down" viewBox="0 0 24 24"><path d="M12 4v12M6 11l6 6 6-6M4 20h16"/></symbol>
+  <symbol id="i-expand" viewBox="0 0 24 24"><path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5"/></symbol>
+  <symbol id="i-hist" viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5M12 7v5l3 2"/></symbol>
+  <symbol id="i-reuse" viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12.5 10 17l9-10"/></symbol>
+  <symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></symbol>
+  <symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
+  <symbol id="i-sliders" viewBox="0 0 24 24"><path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="18" cy="18" r="2"/></symbol>
+  <symbol id="i-dice" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8" cy="8" r="1"/><circle cx="16" cy="16" r="1"/><circle cx="12" cy="12" r="1"/></symbol>
+  <symbol id="i-ratio" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/></symbol>
+  <symbol id="i-layers" viewBox="0 0 24 24"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
+  <symbol id="i-send" viewBox="0 0 24 24"><path d="M4 12 20 4l-6 16-3-7z"/></symbol>
+  <symbol id="i-edit" viewBox="0 0 24 24"><path d="M4 20h4L19 9l-4-4L4 16z"/></symbol>
+  <symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7"/></symbol>
+  <symbol id="i-cloud" viewBox="0 0 24 24"><path d="M7 18a5 5 0 1 1 1-9.9A6 6 0 0 1 19.5 10 4 4 0 0 1 18 18z"/></symbol>
+  <symbol id="i-cpu" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/></symbol>
+  <symbol id="i-book" viewBox="0 0 24 24"><path d="M4 4h6a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H4zM20 4h-5a3 3 0 0 0-3 3"/><path d="M20 4v14h-6"/></symbol>
+  <symbol id="i-palette" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></symbol>
+  <symbol id="i-motion" viewBox="0 0 24 24"><path d="M3 12h4l3-8 4 16 3-8h4"/></symbol>
+  <symbol id="i-folder-in" viewBox="0 0 24 24"><path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M12 10v6M9 13l3 3 3-3"/></symbol>
+  <symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 16V4M6 9l6-6 6 6M4 20h16"/></symbol>
+  <symbol id="i-hide" viewBox="0 0 24 24"><path d="M15 4v16M4 4h16v16H4z"/></symbol>
+ </defs>
+</svg>
+
+<div id="app">
+ <nav class="rail" aria-label="主导航">
+  <div class="brand" title="AIGC 工作台"><b>片</b></div>
+  <button class="nav" data-go="studio" style="--nav-c:var(--gold)"><svg class="i"><use href="#i-home"/></svg><span>工作室</span></button>
+  <button class="nav" data-go="project" style="--nav-c:var(--sc-project)"><svg class="i"><use href="#i-project"/></svg><span>项目</span></button>
+  <button class="nav" data-go="create" style="--nav-c:var(--sc-image)"><svg class="i"><use href="#i-create"/></svg><span>创作台</span></button>
+  <button class="nav" data-go="agents" style="--nav-c:var(--sc-agent)"><svg class="i"><use href="#i-agent"/></svg><span>智能体</span></button>
+  <button class="nav" data-go="canvas" style="--nav-c:var(--sc-image)"><svg class="i"><use href="#i-canvas"/></svg><span>画布</span></button>
+  <button class="nav" data-go="library" style="--nav-c:var(--gold)"><svg class="i"><use href="#i-lib"/></svg><span>素材库</span></button>
+  <hr>
+  <button class="nav" data-go="tasks" style="--nav-c:var(--sc-manage)"><svg class="i"><use href="#i-queue"/></svg><span>任务</span></button>
+  <button class="nav" data-go="workflows" style="--nav-c:var(--sc-manage)"><svg class="i"><use href="#i-flow"/></svg><span>工作流</span></button>
+  <button class="nav" data-go="models" style="--nav-c:var(--sc-manage)"><svg class="i"><use href="#i-plug"/></svg><span>模型连接</span></button>
+  <div class="foot">
+   <button class="queue-dot" data-go="tasks" title="2 个任务进行中"><svg class="i"><use href="#i-queue"/></svg><span class="ring fx-only"></span><i>2</i></button>
+   <button class="nav" id="themeBtn" title="切换主题" aria-haspopup="dialog" aria-expanded="false" aria-controls="themePop"><span class="theme-dot" aria-hidden="true"></span><span>主题</span></button>
+   <button class="nav" data-go="settings"><svg class="i"><use href="#i-gear"/></svg><span>设置</span></button>
+   <button class="nav" data-go="spec" title="设计规范（施工用，非产品入口）" style="--nav-c:var(--gold)"><svg class="i"><use href="#i-palette"/></svg><span>规范</span></button>
+  </div>
+ </nav>
+
+ <main id="pages">
+
+ <!-- ================= 工作室 ================= -->
+ <section class="page" id="p-studio" style="--scene:var(--gold)">
+  <header class="ph"><div class="crumb"><b>工作室</b></div><span class="dim" style="font-size:12px">晚上好，今天从哪里继续？</span><div class="grow"></div>
+   <div class="input" style="width:280px"><svg class="i sm"><use href="#i-search"/></svg><input placeholder="搜索项目、工作流、素材…"><kbd>Ctrl K</kbd></div>
+   <span class="demo-badge">设计演示 · 数据为示例</span></header>
+  <div class="scroll"><div class="studio-wrap">
+   <div>
+    <div class="hero" data-go="project">
+     <div class="art" id="heroArt"></div><div class="shade"></div>
+     <div class="copy">
+      <span class="eyebrow">继续创作 · 上次编辑 2 小时前</span>
+      <div class="display">《雾港来信》<br><em>分镜设计</em> 等你确认</div>
+      <p class="muted" style="max-width:420px">分镜智能体已交回 12 个镜头的草稿；确认后进入素材资产阶段。</p>
+      <div class="stagebar" style="max-width:440px"><div class="done"><i></i>故事</div><div class="done"><i></i>风格</div><div class="cur"><i></i>分镜</div><div><i></i>素材</div><div><i></i>镜头脚本</div></div>
+      <div class="row" style="margin-top:6px"><button class="btn primary" data-go="project">打开项目 <svg class="i sm"><use href="#i-arrow"/></svg></button><button class="btn" data-go="agent-task">查看分镜草稿</button></div>
+     </div>
+    </div>
+    <div class="quick">
+     <div class="qcard lg" data-go="project" style="--scene:var(--gold)"><div class="qi"><svg class="i"><use href="#i-book"/></svg></div><b>从创意开始</b><p>一句话想法 → 五阶段项目</p></div>
+     <div class="qcard lg" style="--scene:var(--gold)"><div class="qi"><svg class="i"><use href="#i-folder-in"/></svg></div><b>导入剧本</b><p>TXT / DOCX / Fountain</p></div>
+     <div class="qcard lg" data-go="create" data-kind="image" style="--scene:var(--sc-image)"><div class="qi"><svg class="i"><use href="#i-image"/></svg></div><b>独立生图</b><p>文生图 · 图生图 · 遮罩</p></div>
+     <div class="qcard lg" data-go="create" data-kind="video" style="--scene:var(--sc-video)"><div class="qi"><svg class="i"><use href="#i-film"/></svg></div><b>独立生视频</b><p>文生 · 首尾帧 · 参考</p></div>
+    </div>
+    <div class="sec-h"><h2>我的项目</h2><span class="tag">4</span><div class="grow"></div><div class="seg" style="width:200px"><button class="on">最近</button><button>进行中</button><button>已完成</button></div></div>
+    <div class="pgrid" id="projGrid"></div>
+   </div>
+   <aside style="display:flex;flex-direction:column;gap:14px">
+    <div class="side-card"><h3><span class="dot" style="background:var(--sc-agent);box-shadow:0 0 8px var(--sc-agent)"></span>待你确认<span class="tag" style="margin-left:auto">2</span></h3>
+     <div class="confirm-item"><div class="row"><b style="font-size:12.5px">分镜设计 · 12 个镜头</b><span class="grow"></span><span class="dim" style="font-size:11px">雾港来信</span></div><div class="row"><button class="btn sm scene" style="--scene:var(--sc-agent)" data-go="project">去确认</button><button class="btn sm ghost" data-go="agent-task">看草稿</button></div></div>
+     <div class="confirm-item"><div class="row"><b style="font-size:12.5px">视觉设计 · 3 套风格板</b><span class="grow"></span><span class="dim" style="font-size:11px">夏日站台</span></div><div class="row"><button class="btn sm scene" style="--scene:var(--sc-agent)">去确认</button></div></div>
+    </div>
+    <div class="side-card"><h3><svg class="i sm" style="color:var(--sc-video)"><use href="#i-queue"/></svg>生成队列<span class="dim" style="margin-left:auto;font-size:11px">本机 ComfyUI-5090D</span></h3><div id="queueMini"></div><button class="btn sm ghost" data-go="tasks" style="align-self:flex-start">全部任务 <svg class="i sm"><use href="#i-arrow"/></svg></button></div>
+    <div class="side-card"><h3>最近产出</h3><div class="outs" id="recentOuts"></div></div>
+   </aside>
+  </div></div>
+ </section>
+
+ <!-- ================= 创作台 ================= -->
+ <section class="page create" id="p-create">
+  <aside class="wfb">
+   <div class="wfb-top">
+    <div class="wfb-title"><span class="glyph"><svg class="i sm"><use href="#i-create"/></svg></span><b>创作台</b><span class="grow"></span><button class="btn sm icon ghost" title="收起历史栏" id="toggleHist"><svg class="i sm"><use href="#i-hide"/></svg></button></div>
+    <div class="seg" id="kindSeg"><button data-kind="image"><svg class="i sm"><use href="#i-image"/></svg>图片</button><button data-kind="video"><svg class="i sm"><use href="#i-film"/></svg>视频</button></div>
+    <div class="input"><svg class="i sm"><use href="#i-search"/></svg><input id="wfSearch" placeholder="搜用途、模型或文件名"><kbd>/</kbd></div>
+    <div class="taskchips" id="taskChips"></div>
+    <div class="wfb-meta"><span id="wfCount"></span><label id="readyOnly"><span class="sw on"></span>仅可运行</label></div>
+   </div>
+   <div class="wfl" id="wfList"></div>
+   <div class="wfb-foot"><button class="btn sm" data-go="workflows"><svg class="i sm"><use href="#i-flow"/></svg>工作流管理</button><button class="btn sm" data-go="models"><svg class="i sm"><use href="#i-cloud"/></svg>云端接口</button></div>
+  </aside>
+
+  <div class="cc">
+   <div class="stage-bg"></div>
+   <header class="ph">
+    <div class="wf-head-name"><span class="fam-dot" id="hdFam"></span><b id="hdName" class="ellipsis"></b><span class="tag sc" id="hdTask"></span></div>
+    <span class="dim mono" id="hdFile" style="font-size:11px;max-width:260px" class="ellipsis"></span>
+    <div class="grow"></div>
+    <span class="conn"><span class="dot" style="background:var(--ok);box-shadow:0 0 6px var(--ok)"></span><span id="hdConn">本机 ComfyUI-5090D · 38ms</span></span>
+    <span class="demo-badge">设计演示 · 不调用真实接口、不计费</span>
+   </header>
+   <div class="stage">
+    <div class="hist-banner" id="histBanner"><svg class="i sm" style="color:var(--info)"><use href="#i-hist"/></svg><span>正在查看 <b id="hbN">历史 #—</b> · 当前输入未改动</span><button class="btn sm" id="hbReuse"><svg class="i sm"><use href="#i-reuse"/></svg>复用这组参数</button><button class="btn sm ghost" id="hbBack">回到最新</button></div>
+    <div class="viewport" id="viewport"></div>
+    <div class="gen" id="genLayer"><div class="gen-card"><div class="grain"></div><div class="beam fx-only"></div><div class="gen-info"><div class="row" style="font-size:12px"><b id="genTxt">显影中</b><span class="grow"></span><span class="mono dim" id="genEta"></span></div><div class="bar"><i id="genBar"></i></div><div class="row dim" style="font-size:11px"><span id="genStep">采样 0/8</span><span class="grow"></span><button class="btn sm ghost" id="genCancel">取消</button></div></div></div></div>
+    <div class="actbar" id="actbar"></div>
+   </div>
+   <div class="dock" id="dock">
+    <div class="pop" id="paramPop">
+     <div class="pop-h"><svg class="i sm" style="color:var(--scene)"><use href="#i-sliders"/></svg><b>创作设置</b><span class="dim" style="font-size:11.5px" id="popSub"></span><span class="grow"></span><button class="btn sm ghost" id="popReset">恢复工作流默认</button></div>
+     <div class="pop-b" id="popBody"></div>
+     <div class="pop-f"><span class="dim" style="font-size:11.5px;margin-right:auto;align-self:center">取消不会改动当前参数 · 图片 / 视频分别记忆</span><button class="btn" id="popCancel">取消</button><button class="btn primary" id="popSave">保存设置</button></div>
+    </div>
+    <div class="slots" id="slots"></div>
+    <div class="prompts" id="prompts">
+     <div class="pbox"><div class="pl"><b class="pos">●</b><b>正向提示词</b><span class="grow"></span><button class="btn sm ghost" title="AI 润色"><svg class="i sm"><use href="#i-agent"/></svg>润色</button><button class="btn sm ghost icon" id="tallBtn" title="展开长提示词"><svg class="i sm"><use href="#i-expand"/></svg></button></div>
+      <textarea id="posTa" placeholder="描述画面：主体、动作、环境、光线、镜头、风格…"></textarea><div class="pf"><span id="posCount">0 字</span><span class="grow"></span><span>Enter 换行 · Ctrl+Enter 生成</span></div></div>
+     <div class="pbox" id="negBox"><div class="pl"><b class="neg">●</b><b>反向提示词</b><span class="grow"></span><button class="btn sm ghost">常用</button></div>
+      <textarea id="negTa" placeholder="不希望出现的内容"></textarea><div class="pf"><span id="negCount">0 字</span></div></div>
+    </div>
+    <div class="dock-bar"><div class="pchips" id="pchips"></div><span class="missing" id="missing"></span><button class="btn primary gen-btn" id="genBtn"><svg class="i sm"><use href="#i-create"/></svg>开始生成<small id="genCost"></small></button></div>
+   </div>
+  </div>
+
+  <aside class="hist"><div class="hist-h"><svg class="i sm"><use href="#i-hist"/></svg>历史</div><div class="hist-l" id="histList"></div></aside>
+ </section>
+
+ <!-- ================= 智能体 · 首页 ================= -->
+ <section class="page agent-page" id="p-agents">
+  <div class="aurora fx-only"><i></i><i></i><i></i></div><canvas class="particles fx-only" id="particles"></canvas>
+  <header class="ph" style="z-index:3"><div class="crumb"><b>智能体</b></div><span class="dim" style="font-size:12px">把创作任务交给助手，成果回到项目等你确认</span><div class="grow"></div><button class="btn sm"><svg class="i sm"><use href="#i-plus"/></svg>自定义智能体</button><span class="demo-badge">设计演示</span></header>
+  <div class="agent-grid">
+   <aside class="tasklist"><div class="tl-h"><button class="btn scene" style="justify-content:center"><svg class="i sm"><use href="#i-plus"/></svg>新任务</button><div class="seg"><button class="on">进行中</button><button>全部</button><button>沙盒</button></div></div><div class="tl-b" id="taskList"></div></aside>
+   <div class="agent-home">
+    <div class="ahero">
+     <div style="position:relative">
+      <span class="eyebrow">主创智能体 · 统筹五个阶段助手</span>
+      <h2 style="margin-top:10px">从一个想法，到一组能直接开拍的镜头</h2>
+      <p class="muted" style="margin-top:8px;max-width:560px">它会先列计划，再调用剧本、视觉、分镜、素材与镜头助手；每一步的成果都是可编辑草稿，你确认后才写入项目。</p>
+      <div class="steps" style="margin-top:12px"><span><i>1</i>说出想法</span><span><i>2</i>确认计划</span><span><i>3</i>编辑成果</span><span><i>4</i>带回项目</span></div>
+      <div class="big-input">
+       <textarea placeholder="例如：一个 90 秒的雨夜港口短片，退休邮差收到一封二十年前寄出的信…"></textarea>
+       <div class="row"><span class="chip"><svg class="i sm"><use href="#i-project"/></svg>绑定：<b>雾港来信</b></span><span class="chip"><svg class="i sm"><use href="#i-cpu"/></svg><b>DeepSeek-V4</b></span><span class="chip"><svg class="i sm"><use href="#i-book"/></svg>技能 <b>3</b></span><span class="chip"><svg class="i sm"><use href="#i-upload"/></svg>参考材料</span><span class="grow"></span><button class="btn primary" data-go="agent-task"><svg class="i sm"><use href="#i-send"/></svg>开始任务</button></div>
+      </div>
+     </div>
+     <div class="orb fx-only"><div class="ring r2"></div><div class="ring"></div><div class="core"></div></div>
+    </div>
+    <div><div class="sec-h" style="margin:4px 0 10px"><h2>阶段助手</h2><span class="dim" style="font-size:12px">每个助手对应项目的一个阶段，也可以单独调用</span></div><div class="roster" id="roster"></div></div>
+    <div class="mini-row">
+     <div class="panel"><h3>最近成果<span class="dim" style="font-weight:400;font-size:11.5px">点开即可编辑，再带回项目</span></h3><div class="outrow" id="agentOuts"></div></div>
+     <div class="panel"><h3>技能库<span class="tag">12</span><span class="grow"></span><button class="btn sm ghost">管理</button></h3><div class="skills">
+      <span class="skill"><i></i>港风电影分镜</span><span class="skill"><i style="background:var(--gold)"></i>Minimax-H3 提示词</span><span class="skill"><i style="background:var(--sc-image)"></i>角色三视图规范</span><span class="skill"><i></i>台词口语化</span><span class="skill"><i style="background:var(--sc-video)"></i>镜头时长分配</span><span class="skill"><i></i>短剧钩子</span><span class="skill"><i style="background:var(--sc-image)"></i>Qwen 遮罩重绘</span><span class="skill dim">+ 学习新技能</span></div>
+      <p class="dim" style="font-size:11.5px">技能 = 可复用的规则 + 示例。可从对话中“记住这个做法”生成，也可导入 Markdown。</p></div>
+    </div>
+   </div>
+  </div>
+ </section>
+
+ <!-- ================= 智能体 · 任务 ================= -->
+ <section class="page agent-page" id="p-agent-task">
+  <div class="aurora fx-only" style="opacity:.6"><i></i><i></i><i></i></div>
+  <header class="ph" style="z-index:3"><div class="crumb"><span data-go="agents" style="cursor:pointer">智能体</span>/<b>雾港来信 · 分镜设计</b></div><span class="tag sc">进行中 · 4/5 步</span><div class="grow"></div><span class="chip"><svg class="i sm"><use href="#i-cpu"/></svg><b>DeepSeek-V4</b></span><span class="chip"><svg class="i sm"><use href="#i-book"/></svg>港风电影分镜 · 镜头时长分配</span><span class="demo-badge">设计演示</span></header>
+  <div class="atask">
+   <aside class="tasklist"><div class="tl-h"><button class="btn scene" style="justify-content:center" data-go="agents"><svg class="i sm"><use href="#i-plus"/></svg>新任务</button></div><div class="tl-b" id="taskList2"></div></aside>
+   <div class="convo">
+    <div class="convo-b">
+     <div class="msg me"><div class="av">我</div><div class="bub">按已确认的故事和“冷雾港口”风格板，把第一场拆成镜头，控制在 60 秒左右，台词保留原文。</div></div>
+     <div class="msg"><div class="av"><svg class="i sm"><use href="#i-agent"/></svg></div><div style="display:flex;flex-direction:column;gap:10px;min-width:0;flex:1">
+      <div class="plan"><div class="row"><b style="font-size:12.5px">执行计划</b><span class="grow"></span><span class="tag ok">已确认</span></div>
+       <div class="pstep done"><span class="s"><svg class="i sm"><use href="#i-check"/></svg></span><b>读取项目：故事 v3、风格板「冷雾港口」</b><span class="dim mono" style="font-size:11px">2s</span></div>
+       <div class="pstep done"><span class="s"><svg class="i sm"><use href="#i-check"/></svg></span><b>按台词与动作分配 12 个镜头（平均 5.2 秒）</b><span class="dim mono" style="font-size:11px">14s</span></div>
+       <div class="pstep done"><span class="s"><svg class="i sm"><use href="#i-check"/></svg></span><b>为每个镜头写画面提示词（H3 规范）</b><span class="dim mono" style="font-size:11px">21s</span></div>
+       <div class="pstep run"><span class="s">4</span><b>生成 12 张分镜草图（Krea2 · 4 宫格）</b><span class="mono" style="font-size:11px;color:var(--sc-agent)">7/12</span></div>
+       <div class="pstep"><span class="s">5</span><b>整理成可编辑分镜表，交回项目待确认</b><span></span></div>
+      </div>
+      <details class="tool"><summary><svg class="i sm"><use href="#i-flow"/></svg>调用 <code>queue_image_jobs</code><span class="dim">· 12 个任务 · Krea2 文生图</span><span class="grow"></span><span class="tag ok">已提交</span></summary><pre>{ workflow: "krea2_turbo_文生图_4_6_8宫格故事板", count: 12, size: "1344×768", project: "雾港来信", stage: "storyboard" }</pre></details>
+      <details class="tool"><summary><svg class="i sm"><use href="#i-book"/></svg>使用技能 <code>港风电影分镜</code><span class="dim">· 规则 6 条</span></summary><pre>长焦压缩、霓虹反光、雨夜湿地面；对白镜头优先过肩 + 反打…</pre></details>
+      <div class="bub">已完成 7 张草图。右侧分镜表可以直接改文字、换镜头时长；不满意的镜头点「重画」只会重做那一个。</div>
+      <div class="thinking fx-only"><i></i><i></i><i></i>正在画第 8 个镜头…</div>
+     </div></div>
+    </div>
+    <div class="convo-in"><textarea placeholder="补充要求，例如：第 3 镜改成俯拍，节奏更慢…"></textarea><div class="row"><span class="chip">@ 工作流</span><span class="chip">+ 参考材料</span><span class="grow"></span><button class="btn sm ghost">停止</button><button class="btn sm primary"><svg class="i sm"><use href="#i-send"/></svg>发送</button></div></div>
+   </div>
+   <aside class="artifact">
+    <div class="art-h"><div class="row"><b>分镜表 · 草稿</b><span class="tag" style="color:var(--sc-agent);border-color:color-mix(in srgb,var(--sc-agent) 40%,transparent)">未确认</span><span class="grow"></span><span class="dim mono" style="font-size:11px">12 镜 · 62s</span></div>
+     <div class="seg"><button class="on">镜头</button><button>角色</button><button>提示词</button><button>对比上一版</button></div></div>
+    <div class="art-b" id="shotList"></div>
+    <div class="art-f"><div class="row" style="font-size:11.5px"><span class="dim">带回到</span><span class="chip"><b>雾港来信</b> · 分镜设计</span></div><div class="row"><button class="btn" style="flex:1;justify-content:center">保存草稿</button><button class="btn primary" style="flex:1.4;justify-content:center" id="sendBack"><svg class="i sm"><use href="#i-arrow"/></svg>带回项目待确认</button></div></div>
+   </aside>
+  </div>
+ </section>
+
+ <!-- ================= 项目工作台 ================= -->
+ <section class="page proj" id="p-project">
+  <header class="ph"><div class="crumb"><span data-go="studio" style="cursor:pointer">工作室</span>/<b>雾港来信</b></div><span class="tag">短片 · 90s · 16:9</span><div class="grow"></div><button class="btn sm ghost" data-go="canvas"><svg class="i sm"><use href="#i-canvas"/></svg>灵感画布</button><button class="btn sm ghost" data-go="library"><svg class="i sm"><use href="#i-lib"/></svg>项目素材</button><button class="btn sm"><svg class="i sm"><use href="#i-film"/></svg>导出成片</button><span class="demo-badge">设计演示</span></header>
+  <div class="stepper" id="stepper"></div>
+  <div class="proj-body">
+   <div class="proj-main">
+    <div class="draftbar" id="draftbar"><svg class="i" style="color:var(--sc-agent)"><use href="#i-agent"/></svg><span><b>分镜助手</b>交回了 12 个镜头的草稿（2 分钟前）。确认后才会交给「素材」阶段使用。</span><span class="grow"></span><button class="btn sm ghost" data-go="agent-task">在智能体中打开</button><button class="btn sm">对比已确认版</button></div>
+    <div class="shots" id="projShots"></div>
+   </div>
+   <aside class="proj-side">
+    <div class="ps-sec"><h3>本阶段助手</h3>
+     <div class="agent-chip"><span class="ic"><svg class="i"><use href="#i-grid"/></svg></span><div class="grow"><b style="font-size:13px">分镜助手</b><div class="dim" style="font-size:11px">DeepSeek-V4 · 2 个技能</div></div><button class="btn sm ghost" data-go="agent-task">对话</button></div>
+     <div class="input" style="height:auto;padding:8px 10px;align-items:flex-start"><textarea style="flex:1;background:none;border:0;outline:0;resize:none;height:52px;font-size:12.5px;color:var(--tx-1)" placeholder="补充要求（可选）：节奏更慢、第 3 镜改俯拍…"></textarea></div>
+     <div class="row"><button class="btn sm" style="flex:1;justify-content:center"><svg class="i sm"><use href="#i-refresh"/></svg>重新生成本阶段</button><button class="btn sm ghost">恢复已确认版</button></div>
+    </div>
+    <div class="ps-sec" style="border-bottom:0;padding-bottom:4px"><h3>阶段任务<span class="tag">7/12</span><span class="grow"></span><button class="btn sm ghost" data-go="tasks">全部</button></h3></div>
+    <div class="ps-tasks" id="projTasks"></div>
+   </aside>
+  </div>
+  <div class="proj-foot"><span class="tag" style="color:var(--sc-agent);border-color:color-mix(in srgb,var(--sc-agent) 40%,transparent)">草稿 · 未确认</span><span class="dim" style="font-size:12px">已编辑 2 处 · 自动保存于 21:04</span><span class="grow"></span><button class="btn">保存草稿</button><button class="btn primary" id="confirmStage"><svg class="i sm"><use href="#i-check"/></svg>确认分镜，进入素材阶段</button></div>
+ </section>
+
+ <!-- ================= 工作流库 (管理) ================= -->
+ <section class="page manage" id="p-workflows">
+  <header class="ph"><div class="crumb"><b>工作流库</b></div><span class="dim" style="font-size:12px">仓库 156 个文件 · 已配置可运行 9 个（测试站实况）</span><div class="grow"></div><button class="btn sm"><svg class="i sm"><use href="#i-upload"/></svg>导入工作流</button><span class="demo-badge">设计演示</span></header>
+  <div class="mg">
+   <aside class="mg-side" id="wfFacets"></aside>
+   <div class="mg-main"><div class="mg-tools"><div class="input" style="width:320px"><svg class="i sm"><use href="#i-search"/></svg><input placeholder="搜索名称、文件名、模型…"></div><div class="seg" style="width:260px"><button class="on">全部</button><button>可运行</button><button>待配置</button><button>有问题</button></div><span class="grow"></span><button class="btn sm ghost">批量标注</button></div>
+    <div class="tbl"><table><thead><tr><th style="width:36%">名称</th><th>用途</th><th>模型族</th><th>需要的素材</th><th>状态</th><th style="width:40px"></th></tr></thead><tbody id="wfTable"></tbody></table></div></div>
+   <aside class="mg-detail" id="wfDetail"></aside>
+  </div>
+ </section>
+
+ <!-- ================= 模型与连接 ================= -->
+ <section class="page manage" id="p-models">
+  <header class="ph"><div class="crumb"><b>模型与连接</b></div><div class="seg" style="width:420px;margin-left:12px"><button class="on">ComfyUI 连接</button><button>大语言模型</button><button>图片模型 · 后续</button><button>视频模型 · 后续</button></div><div class="grow"></div><button class="btn sm"><svg class="i sm"><use href="#i-plus"/></svg>添加</button><span class="demo-badge">设计演示</span></header>
+  <div class="mcards" id="modelCards"></div>
+ </section>
+
+ <!-- ================= 任务 ================= -->
+ <section class="page manage" id="p-tasks">
+  <header class="ph"><div class="crumb"><b>生成任务</b></div><div class="seg" style="width:340px;margin-left:12px"><button class="on">全部</button><button>进行中</button><button>失败</button><button>图片</button><button>视频</button></div><div class="grow"></div><div class="input" style="width:240px"><svg class="i sm"><use href="#i-search"/></svg><input placeholder="搜索任务…"></div><span class="demo-badge">设计演示</span></header>
+  <div class="tbl"><table><thead><tr><th style="width:64px"></th><th>任务</th><th>来源</th><th>工作流</th><th>连接</th><th>进度</th><th>时间</th><th></th></tr></thead><tbody id="taskTable"></tbody></table></div>
+ </section>
+
+ <!-- ================= 素材库 ================= -->
+ <section class="page" id="p-library" style="--scene:var(--gold)">
+  <header class="ph"><div class="crumb"><b>素材库</b></div><div class="seg" style="width:300px;margin-left:12px"><button class="on">全部</button><button>图片</button><button>视频</button><button>音频</button><button>未归属</button></div><div class="grow"></div><span class="chip">项目：全部 <svg class="i sm"><use href="#i-chev"/></svg></span><span class="demo-badge">设计演示</span></header>
+  <div class="lib-grid" id="libGrid"></div>
+ </section>
+
+ <!-- ================= 画布 / 三维搭景 / 设置：组织方式 ================= -->
+ <section class="page" id="p-canvas" style="--scene:var(--sc-image)">
+  <header class="ph"><div class="crumb"><b>灵感画布 · 三维搭景 · 设置</b></div><span class="dim" style="font-size:12px">其余已有功能统一后的组织方式</span><div class="grow"></div><button class="btn sm" data-go="spec">查看设计规范</button><span class="demo-badge">设计演示 · 组织方式说明</span></header>
+  <div class="ia-map">
+   <div class="ia-card" style="--scene:var(--sc-image)"><h3><svg class="i" style="color:var(--sc-image)"><use href="#i-canvas"/></svg>灵感画布</h3><p>无限画布 + 右侧智能体对话栏（可收起）。卡片＝角色 / 场景 / 图片 / 视频产物，沿用创作台的取景框选中、显影出现动效。从画布卡片可「送入创作台作参考」或「存入项目」。</p><span class="tag">导航：一级 · 画布</span></div>
+   <div class="ia-card" style="--scene:var(--sc-video)"><h3><svg class="i" style="color:var(--sc-video)"><use href="#i-cube"/></svg>三维搭景</h3><p>属于“镜头”阶段的辅助工具：从项目镜头卡或创作台视频参考槽「从三维搭景截取」进入。版面＝左场景列表 / 中 Three.js 视口 / 下时间线 / 右智能体。暂不进一级导航，入口放在项目「镜头脚本」阶段和创作台素材槽。</p><span class="tag ok">已确认：不进一级导航</span></div>
+   <div class="ia-card" style="--scene:var(--gold)"><h3><svg class="i" style="color:var(--gold)"><use href="#i-flow"/></svg>试验台（Playground）</h3><p>功能与创作台重叠（任意工作流 + 任意输入）。建议并入创作台：工作流列表中“待配置”项点开即进入映射测试；不再单列页面。</p><span class="tag ok">已确认：并入创作台</span></div>
+   <div class="ia-card" style="--scene:var(--sc-manage)"><h3><svg class="i" style="color:var(--sc-manage)"><use href="#i-gear"/></svg>设置</h3><p>两列分组卡片（参考站偏好设置的组织方式）：语言、存储路径、队列并发与超时、Dry-run、动效强度、默认画幅。每组带「规则说明」，底部固定保存。</p><span class="tag">导航：侧栏底部</span></div>
+   <div class="ia-card" style="--scene:var(--sc-agent)"><h3><svg class="i" style="color:var(--sc-agent)"><use href="#i-book"/></svg>技能与参考材料</h3><p>归在智能体页：技能库、参考材料库是智能体首页下半区的面板；编辑在抽屉中完成，不另起一级页面。</p></div>
+   <div class="ia-card" style="--scene:var(--sc-manage)"><h3><svg class="i" style="color:var(--sc-manage)"><use href="#i-plug"/></svg>管理三页的共同骨架</h3><p>左筛选 220 / 中列表 / 右详情 360。任务、工作流、模型连接、素材库共用一套表格、标签、状态色；详情抽屉不跳页，返回不丢筛选。</p></div>
+  </div>
+ </section>
+ <section class="page" id="p-settings" style="--scene:var(--sc-manage)">
+  <header class="ph"><div class="crumb"><b>设置</b></div><div class="grow"></div><span class="demo-badge">设计演示</span></header>
+  <div class="scroll"><div style="max-width:980px;margin:20px auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px">
+   <div class="fld wide"><div class="fh"><b>外观主题</b><span class="dim">· 同一布局与功能；切换不影响正在编辑的内容，选择会被记住</span></div><div class="ttiles" id="themeTiles" role="radiogroup" aria-label="外观主题"></div></div>
+   <div class="fld wide"><div class="fh"><b>界面语言</b><span class="tag">规则说明</span></div><div class="opts"><span class="opt on">中文</span><span class="opt">English</span><span class="opt">日本語</span></div></div>
+   <div class="fld"><div class="fh"><b>任务队列</b></div><div class="row">并发数<span class="grow"></span><div class="step"><button>−</button><span>2</span><button>+</button></div></div><div class="row">单任务超时<span class="grow"></span><div class="step"><button>−</button><span>1800s</span><button>+</button></div></div></div>
+   <div class="fld"><div class="fh"><b>动效强度</b></div><div class="opts"><span class="opt on">完整</span><span class="opt">克制</span><span class="opt">关闭（减少动效）</span></div><p class="dim" style="font-size:11.5px">系统开启“减少动态效果”时自动切到「关闭」。</p></div>
+   <div class="fld"><div class="fh"><b>Dry-run</b><span class="tag warn">测试用</span></div><div class="row">只写占位文件，不调用 ComfyUI<span class="grow"></span><span class="sw"></span></div></div>
+   <div class="fld"><div class="fh"><b>存储路径</b></div><div class="input"><input value="D:\\AIGC\\projects" readonly></div></div>
+  </div></div>
+ </section>
+ <section class="page" id="p-spec" style="--scene:var(--gold)">
+  <header class="ph"><div class="crumb"><b>设计规范 · 夜片场（多主题 v2）</b></div><span class="dim" style="font-size:12px">施工唯一品味依据 · 变量名见 design-spec.md</span><div class="grow"></div><span class="demo-badge">设计规范</span></header>
+  <div class="scroll"><div class="spec">
+   <div class="sp-sec"><h3>01 色彩 · 当前主题「<span id="specThemeName">夜片场</span>」（切换后实时更新）</h3>
+    <div class="sw-row" id="swatches"></div>
+    <p class="dim">规则：界面只用一个主光（主操作色，夜片场为金）表示“去做”；场景色只表示“你在哪里”（图片=青、视频=琥珀、智能体=紫、项目=金、管理=钢蓝），用于选中、焦点、进度，不用于大面积底色。作品永远是画面里最亮、最饱和的东西。</p></div>
+   <div class="sp-grid">
+    <div class="sp-sec"><h3>02 文字层级</h3>
+     <div class="ty"><span style="font-size:28px;font-weight:700">展示 28/700</span><code>--fs-display</code></div>
+     <div class="ty"><span style="font-size:20px;font-weight:600">页面标题 20/600</span><code>--fs-h1</code></div>
+     <div class="ty"><span style="font-size:16px;font-weight:600">区块标题 16/600</span><code>--fs-h2</code></div>
+     <div class="ty"><span style="font-size:13px">正文 / 输入 13/400 行高 1.55</span><code>--fs-body</code></div>
+     <div class="ty"><span style="font-size:12px;color:var(--tx-2)">辅助 12/400</span><code>--fs-small</code></div>
+     <div class="ty"><span class="mono" style="font-size:11px;color:var(--tx-3)">#61 · 00:05 · 3:4 · 952567</span><code>--mono 11</code></div></div>
+    <div class="sp-sec"><h3>03 间距 · 圆角 · 阴影</h3>
+
+     <div class="row" id="spaceRow" style="align-items:flex-end;gap:10px"></div>
+     <div class="row" id="radRow" style="gap:10px;margin-top:12px"></div>
+     <p class="dim" style="margin-top:10px">4px 基准；控件高 26 / 32 / 38；列表行 50；面板内边距 12–16；页面外边距 16–24。</p></div>
+   </div>
+   <div class="sp-sec"><h3>04 组件状态</h3><div class="states">
+    <div><small>按钮</small><div class="row"><button class="btn">默认</button><button class="btn" style="background:var(--bg-4);border-color:var(--line-3)">悬停</button><button class="btn primary">主操作</button><button class="btn primary" disabled>缺素材</button><button class="btn scene" style="--scene:var(--sc-image)">场景</button></div></div>
+    <div><small>筛选胶囊</small><div class="row" style="--scene:var(--sc-image)"><span class="chip">默认</span><span class="chip on">选中</span><span class="pchip">参数 <b>3:4</b></span></div></div>
+    <div><small>工作流行</small><div style="width:260px;--scene:var(--sc-image)"><div class="wfi"><div class="fam" style="background:#8aa2ff">Qwen</div><div><div class="nm">默认</div><div class="sub">文生图</div></div><span></span></div><div class="wfi on"><div class="fam" style="background:#8aa2ff">Qwen</div><div><div class="nm">选中</div><div class="sub">局部重绘</div></div><span></span></div><div class="wfi needs"><div class="fam off" style="background:#8aa2ff">Qwen</div><div><div class="nm">待配置</div><div class="sub"><span class="tag warn" style="height:16px;font-size:10px">待配置</span></div></div><span></span></div></div></div>
+    <div><small>素材槽</small><div class="row" style="--scene:var(--sc-image)"><div class="slot"><span class="ph">上传</span></div><div class="slot req"><span class="ph">必填</span></div><div class="slot filled" id="specSlot"></div></div></div>
+    <div><small>状态标签</small><div class="row"><span class="tag ok">完成/可运行</span><span class="tag warn">待配置</span><span class="tag err">失败</span><span class="tag" style="color:var(--sc-agent);border-color:color-mix(in srgb,var(--sc-agent) 40%,transparent)">草稿未确认</span></div></div>
+    <div><small>取景框选中</small><div class="row" style="--scene:var(--sc-video)"><div class="vf on" style="width:90px;height:56px;border-radius:6px;background:var(--bg-3)"></div><div class="lg" style="width:160px;height:56px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);--mx:60px;--my:28px"></div><span class="dim" style="font-size:11.5px">右：光栅悬停（随鼠标）</span></div></div>
+   </div></div>
+   <div class="sp-grid">
+    <div class="sp-sec" style="grid-column:1/3"><h3>05 主题 · 语义色对照（直接读取四套主题变量）</h3><div class="tmx" id="themeMatrix"></div>
+     <p class="dim" style="margin-top:8px">场景色只表示“你在哪里”，状态色只表示“结果如何”，两组在每套主题里都单独取值、互不借用；浅色主题不用发光表达状态，靠描边、实色与对比度。作品框、视频控制条、作品上的角标在所有主题保持深色，避免主题给作品染色。</p></div>
+   </div><div class="sp-grid">
+    <div class="sp-sec"><h3>06 动效</h3><table class="mt"><thead><tr><th>名称</th><th>触发</th><th>时长 · 曲线</th><th>可打断</th><th>减少动效时</th></tr></thead><tbody>
+     <tr><td>页面进入</td><td>切换一级页</td><td>320ms · ease-out</td><td>是</td><td>直接出现</td></tr>
+     <tr><td>光栅悬停</td><td>指针进入列表/卡片</td><td>320ms 渐显 · 跟随指针</td><td>是</td><td>仅背景变亮</td></tr>
+     <tr><td>取景框</td><td>选中工作流/作品</td><td>200ms · ease-out，角标外扩 2px</td><td>是</td><td>保留角标，无位移</td></tr>
+     <tr><td>扫描光束</td><td>生成中</td><td>1.6s 循环 · ease-in-out</td><td>取消即停</td><td>只保留进度条</td></tr>
+     <tr><td>显影</td><td>结果到达</td><td>700ms · ease-out（模糊→清晰）</td><td>点任意处跳过</td><td>淡入 1ms</td></tr>
+     <tr><td>主按钮扫光</td><td>悬停主操作</td><td>700ms 一次</td><td>是</td><td>关闭</td></tr>
+     <tr><td>弹层</td><td>打开参数/菜单</td><td>200ms · 上移 6px + 缩放 .98</td><td>Esc/点外部</td><td>直接出现</td></tr>
+     <tr><td>智能体氛围</td><td>进入智能体页</td><td>极光 18s、粒子、光球呼吸 4.5s</td><td>离开页面即停</td><td>全部关闭</td></tr>
+     <tr><td>提示</td><td>操作完成</td><td>320ms · spring，3.2s 后消失</td><td>是</td><td>淡入</td></tr>
+     <tr><td>切换主题「开灯」</td><td>选择新主题</td><td>520ms · ease-out，新主题从点击处圆形展开</td><td>是（再次选择即接管）</td><td>瞬间替换</td></tr></tbody></table>
+     <p class="dim" style="margin-top:8px">曲线：<code>--ease-out cubic-bezier(.22,1,.36,1)</code> · <code>--ease-io (.65,0,.35,1)</code> · <code>--ease-spring (.34,1.56,.64,1)</code>。视频永不自动播放；空格只在播放器获得焦点时生效。</p></div>
+    <div class="sp-sec"><h3>07 桌面断点</h3><table class="mt"><thead><tr><th>窗口</th><th>总导航</th><th>工作流列</th><th>历史栏</th><th>其他</th></tr></thead><tbody>
+     <tr><td>≥1600</td><td>68</td><td>272</td><td>92</td><td>工作室右栏 340；智能体成果栏 420</td></tr>
+     <tr><td>1367–1599</td><td>68</td><td>272</td><td>92</td><td>标准布局（1440×900 样稿）</td></tr>
+     <tr><td>1281–1366</td><td>68</td><td>248</td><td>84</td><td>隐藏工作流文件名</td></tr>
+     <tr><td>≤1280</td><td>60</td><td>236</td><td>76</td><td>页头 44；可收起历史栏</td></tr>
+     <tr><td>高度 ≤800</td><td colspan="4">提示词默认 48 高、素材槽 50；长提示词点「展开」到 28vh，内部滚动</td></tr></tbody></table>
+     <p class="dim" style="margin-top:8px">最小支持 1280×720。主操作（生成、确认、带回项目）始终在首屏，不随内容滚走；长列表各自滚动。</p></div>
+   </div>
+  </div></div>
+ </section>
+ </main>
+</div>
+
+<div class="lb" id="lb"><img id="lbImg" alt=""><button class="btn" id="lbClose"><svg class="i sm"><use href="#i-x"/></svg>关闭 (Esc)</button></div>
+<div class="sheet" id="sheet"><div class="sheet-card"><div class="h">存入项目</div><div class="b" id="sheetBody"></div><div class="f"><button class="btn" id="sheetCancel">取消</button><button class="btn primary" id="sheetOk">存入</button></div></div></div>
+<div id="toasts"></div>
+<div class="theme-pop" id="themePop" role="dialog" aria-label="选择界面主题"><div class="tp-h"><b>界面主题</b><span class="dim" style="font-size:11.5px">同一布局与功能，只换灯光</span><span class="grow"></span><button class="btn sm ghost icon" id="themeClose" aria-label="关闭"><svg class="i sm"><use href="#i-x"/></svg></button></div><div class="tp-b" id="themeList" role="radiogroup" aria-label="主题"></div><div class="tp-f"><span id="themeFoot" class="grow" style="display:flex;gap:6px;align-items:center"></span><button class="btn sm" id="motionBtn" title="减少动效（去掉光束、粒子与位移）"><svg class="i sm"><use href="#i-motion"/></svg><span>动效开</span></button></div></div>
+<div aria-hidden="true" style="display:none"><i data-theme="night" class="tprobe"></i><i data-theme="day" class="tprobe"></i><i data-theme="grade" class="tprobe"></i><i data-theme="bluehour" class="tprobe"></i></div>
+
+<script>
+/* ---------------------------------------------------------
+   procedural "stills" so the demo ships as one offline file
+   --------------------------------------------------------- */
+const PALS=[
+ ['#0b1d2e','#2f5d7c','#f2b36b','#0a0f17','#1c2f40'],   // harbour dusk
+ ['#1b0f2e','#6b2f7c','#ff8fb0','#0d0716','#2e1740'],   // neon violet
+ ['#2b1a0c','#a8582a','#ffd28a','#140b05','#4a2a12'],   // tungsten amber
+ ['#0c2422','#1f6e66','#c9f2dd','#06110f','#14403b'],   // teal mist
+ ['#1a1d26','#59627a','#f0e6d2','#0b0c10','#2c313f'],   // silver rain
+ ['#2d0f12','#8c2b2b','#ffb38a','#120607','#47181a'],   // crimson
+];
+function rnd(seed){let s=seed%2147483647;if(s<=0)s+=2147483646;return()=> (s=s*16807%2147483647)/2147483647}
+function still(seed,w,h,opt={}){
+ const r=rnd(seed*7919+13),p=PALS[seed%PALS.length];
+ const sunX=w*(.25+r()*.5),sunY=h*(.25+r()*.25),sunR=Math.min(w,h)*(.07+r()*.06);
+ let hills='';for(let L=0;L<3;L++){let y0=h*(.55+L*.13);let d=`M0 ${h} L0 ${y0}`;const n=6+L*2;for(let k=1;k<=n;k++){d+=` Q${(k-.5)*w/n} ${y0-(r()*h*.18)} ${k*w/n} ${y0+(r()-.5)*h*.06}`}d+=` L${w} ${h}Z`;hills+=`<path d="${d}" fill="${L==2?p[3]:p[4]}" opacity="${.55+L*.2}"/>`}
+ let fig='';if(opt.figure!==false){const fx=w*(.35+r()*.3),fh=h*(opt.portrait?.62:.34),fy=h-fh*.92;fig=`<g fill="${p[3]}"><ellipse cx="${fx}" cy="${fy+fh*.09}" rx="${fh*.075}" ry="${fh*.09}"/><path d="M${fx-fh*.16} ${h} Q${fx-fh*.17} ${fy+fh*.3} ${fx} ${fy+fh*.2} Q${fx+fh*.17} ${fy+fh*.3} ${fx+fh*.16} ${h}Z"/></g>`}
+ let rain='';if(seed%3==0){for(let k=0;k<40;k++){const x=r()*w,y=r()*h;rain+=`<path d="M${x} ${y}l${-w*.006} ${h*.05}" stroke="#fff" stroke-opacity=".12"/>`}}
+ const svg=`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${p[0]}"/><stop offset=".62" stop-color="${p[1]}"/><stop offset="1" stop-color="${p[2]}"/></linearGradient><radialGradient id="s"><stop offset="0" stop-color="${p[2]}" stop-opacity=".95"/><stop offset=".35" stop-color="${p[2]}" stop-opacity=".35"/><stop offset="1" stop-color="${p[2]}" stop-opacity="0"/></radialGradient><radialGradient id="v" cx=".5" cy=".5" r=".75"><stop offset=".6" stop-color="#000" stop-opacity="0"/><stop offset="1" stop-color="#000" stop-opacity=".55"/></radialGradient></defs><rect width="100%" height="100%" fill="url(#g)"/><circle cx="${sunX}" cy="${sunY}" r="${sunR*4}" fill="url(#s)"/><circle cx="${sunX}" cy="${sunY}" r="${sunR}" fill="${p[2]}" opacity=".9"/>${hills}${fig}${rain}<rect width="100%" height="100%" fill="url(#v)"/></svg>`;
+ return 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg);
+}
+const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];
+const icon=(n,c='i sm')=>`<svg class="${c}"><use href="#i-${n}"/></svg>`;
+function toast(msg,c='var(--ok)'){const t=document.createElement('div');t.className='toast';t.innerHTML=`<span class="dot" style="background:${c};box-shadow:0 0 8px ${c}"></span><div>${msg}</div>`;$('#toasts').append(t);setTimeout(()=>{t.style.transition='opacity .3s';t.style.opacity=0;setTimeout(()=>t.remove(),300)},3200)}
+
+/* ---------------------------------------------------------
+   workflow catalogue (representative sample of the repo's 156 files)
+   --------------------------------------------------------- */
+const FAM={qwen:['Qwen','#8aa2ff'],krea:['Kr2','#ff86b0'],flux:['FLX','#62d2ff'],zimg:['Z','#a6e16a'],h3:['H3','#ff9a52'],wan:['Wan','#c79bff'],gpt:['GPT','#e8e8e8'],nano:['NB','#ffd54a'],kling:['可灵','#3fd8c6'],jimeng:['即梦','#ff6f9a'],anima:['Ani','#ffb86b']};
+const S={ref:{n:'参考图',ic:'image'},mask:{n:'遮罩',ic:'mask'},first:{n:'首帧',ic:'image'},last:{n:'尾帧',ic:'image'},vref:{n:'参考视频',ic:'film'},aud:{n:'音频',ic:'audio'},input:{n:'输入图',ic:'image'}};
+const WF=[
+ // image
+ {id:1,k:'image',f:'qwen',name:'Qwen 2.1 · 文生图',task:'文生图',src:'local',ready:true,neg:true,slots:[],file:'qwen-image-2.1'},
+ {id:2,k:'image',f:'qwen',name:'Qwen 2.1 · 图片编辑',task:'图生图',src:'local',ready:true,neg:false,slots:[['ref',1,3,true]],file:'Qwen Image 2.1 图片编辑（用户提供）'},
+ {id:3,k:'image',f:'qwen',name:'Qwen 2.1 · 局部重绘',task:'局部重绘',src:'local',ready:true,neg:true,slots:[['input',1,1,true],['mask',1,1,true]],file:'image_qwen_image_2_1_image_edit (1)'},
+ {id:4,k:'image',f:'krea',name:'Krea2 · 文生图',task:'文生图',src:'local',ready:true,neg:false,slots:[],file:'Krea2 文生图（审核示例）'},
+ {id:5,k:'image',f:'qwen',name:'Qwen 2.1 · 角色四视图',task:'角色设定',src:'local',ready:false,neg:false,slots:[['ref',1,1,true]],file:'Qwen_image2.1_图像编辑_角色表四视图.json'},
+ {id:6,k:'image',f:'qwen',name:'Qwen 2.1 · 多图编辑（透明背景）',task:'图生图',src:'local',ready:false,neg:false,slots:[['ref',1,4,true]],file:'Qwen_image2.1_文生_多图编辑_透明背景.json'},
+ {id:7,k:'image',f:'krea',name:'Krea2 · 极致写实 2K',task:'文生图',src:'local',ready:false,neg:false,slots:[],file:'Krea2_turbo_文生图_极致写实双采样2k版(N版).json'},
+ {id:8,k:'image',f:'krea',name:'Krea2 · 4/6/8 宫格故事板',task:'分镜',src:'local',ready:false,neg:false,slots:[],file:'Krea2_turbo_文生图_4_6_8宫格故事板.json'},
+ {id:9,k:'image',f:'krea',name:'Krea2 · 图像风格参考',task:'风格',src:'local',ready:false,neg:false,slots:[['ref',1,1,true]],file:'krea2_turbo_文生图_图像风格参考.json'},
+ {id:10,k:'image',f:'flux',name:'Flux2 Klein · 局部重绘',task:'局部重绘',src:'local',ready:false,neg:false,slots:[['input',1,1,true],['mask',1,1,true]],file:'4_flux2_klein_图生图_局部重绘.json'},
+ {id:11,k:'image',f:'flux',name:'Flux2 Klein · 扩图',task:'扩图',src:'local',ready:false,neg:false,slots:[['input',1,1,true]],file:'5_flux2_klein_图生图_扩图.json'},
+ {id:12,k:'image',f:'flux',name:'Flux2 Klein · 服装迁移',task:'图生图',src:'local',ready:false,neg:false,slots:[['ref',2,2,true]],file:'flux2_klein_服装迁移.json'},
+ {id:13,k:'image',f:'flux',name:'Flux2 Klein · 老照片修复',task:'修复',src:'local',ready:false,neg:false,slots:[['input',1,1,true]],file:'flux2_klein_图生图_老照片修复.json'},
+ {id:14,k:'image',f:'zimg',name:'Z-Image Turbo · 文生图',task:'文生图',src:'local',ready:false,neg:true,slots:[],file:'1_Z-Image-Tubro_文生图.json'},
+ {id:15,k:'image',f:'zimg',name:'Z-Image · 4K 高清放大',task:'放大',src:'local',ready:false,neg:false,slots:[['input',1,1,true]],file:'11_Z_Image_Turbo+模型放大_图像4K高清放大.json'},
+ {id:16,k:'image',f:'zimg',name:'Z-Image · 姿势控制洗图',task:'图生图',src:'local',ready:false,neg:true,slots:[['ref',1,1,true]],file:'8_Z-image+Controlnet_姿势控制-洗图.json'},
+ {id:17,k:'image',f:'anima',name:'Anima · 动漫模型 + Klein 放大',task:'文生图',src:'local',ready:false,neg:true,slots:[],file:'Anima_Klein放大_超强动漫模型.json'},
+ {id:18,k:'image',f:'gpt',name:'GPT-Image-2',task:'文生图',src:'cloud',ready:false,pending:true,neg:false,slots:[['ref',0,10,false]],file:'云端 · 后续接入批次'},
+ {id:19,k:'image',f:'nano',name:'Nano Banana Pro',task:'图生图',src:'cloud',ready:false,pending:true,neg:false,slots:[['ref',0,10,false]],file:'云端 · 后续接入批次'},
+ // video
+ {id:31,k:'video',f:'h3',name:'H3 · 文生视频',task:'文生视频',src:'local',ready:true,neg:true,slots:[],file:'MiniMax H3 文生视频（审核示例）'},
+ {id:32,k:'video',f:'h3',name:'H3 · 首尾帧生视频',task:'首尾帧',src:'local',ready:true,neg:true,slots:[['first',1,1,true],['last',1,1,false]],file:'H3 首尾帧生视频（04 用户提供）'},
+ {id:33,k:'video',f:'h3',name:'H3 · 参考生视频',task:'参考生视频',src:'local',ready:true,neg:true,slots:[['ref',1,5,true]],file:'H3 参考生视频·参考图（05 用户提供）'},
+ {id:34,k:'video',f:'h3',name:'H3 · 文生视频 8 步加速',task:'文生视频',src:'local',ready:true,neg:false,slots:[],file:'minimaxh3-文生图加速版'},
+ {id:35,k:'video',f:'h3',name:'H3 · 图生视频 8 步高质量',task:'图生视频',src:'local',ready:false,neg:true,slots:[['first',1,1,true]],file:'Minimax_H3_T8双时钟采样_图生视频-8步高质量极速版.json'},
+ {id:36,k:'video',f:'h3',name:'H3 导演台 · 视频参考 + 多参图',task:'参考生视频',src:'local',ready:false,neg:true,slots:[['vref',1,1,true],['ref',1,4,false]],file:'MiniMax_H3_导演台_视频参考+多参图.json'},
+ {id:37,k:'video',f:'h3',name:'H3 · 音频数字人',task:'数字人',src:'local',ready:false,neg:false,slots:[['ref',1,1,true],['aud',1,1,true]],file:'Minimax_H3_音频数字人_单采样.json'},
+ {id:38,k:'video',f:'wan',name:'Wan2.1 · InfiniteTalk 对口型',task:'数字人',src:'local',ready:false,neg:false,slots:[['ref',1,1,true],['aud',1,1,true]],file:'Wan2.1_I2V_InfiniteTalk_rCM_数字人对口型多动态(KJ版).json'},
+ {id:39,k:'video',f:'wan',name:'Wan2.2 Animate · 人物替换',task:'动作迁移',src:'local',ready:false,neg:false,slots:[['vref',1,1,true],['ref',1,1,true]],file:'Wan2.2_Animate_人物遮罩替换(官流整理).json'},
+ {id:40,k:'video',f:'kling',name:'可灵 2.5 · 图生视频',task:'图生视频',src:'cloud',ready:false,pending:true,neg:true,slots:[['first',1,1,true],['last',0,1,false]],file:'云端 · 后续接入批次'},
+ {id:41,k:'video',f:'jimeng',name:'即梦 · 文生视频',task:'文生视频',src:'cloud',ready:false,pending:true,neg:false,slots:[],file:'云端 · 后续接入批次'},
+];
+const TASKS={image:['全部','文生图','图生图','局部重绘','扩图','放大','分镜','角色设定'],video:['全部','文生视频','图生视频','首尾帧','参考生视频','数字人','动作迁移']};
+
+/* ---------------------------------------------------------
+   state
+   --------------------------------------------------------- */
+const st={kind:'image',task:'全部',q:'',readyOnly:true,
+ pins:JSON.parse(localStorage.getItem('ns-pins')||'[3,33]'),
+ sel:{image:3,video:32},
+ params:{image:{ratio:'3:4',mp:'1.0',seed:'随机',batch:1,steps:8,cfg:'4.0',denoise:'1.00'},video:{ratio:'16:9',res:'720p',dur:5,fps:24,seed:'随机',steps:8}},
+ fills:{}, hist:{image:[],video:[]}, viewing:null, generating:false, playing:false, t:0};
+const RATIO={'1:1':1,'3:4':3/4,'4:3':4/3,'9:16':9/16,'16:9':16/9,'21:9':21/9};
+const curWF=()=>WF.find(w=>w.id===st.sel[st.kind]);
+const prompts={image:['冷雾港口的清晨，一位穿深灰呢大衣的退休邮差站在湿漉漉的码头尽头，手里捏着一封泛黄的信。长焦压缩，远处吊臂与灯塔在雾中只剩剪影，地面反射琥珀色路灯；胶片颗粒，电影感，低饱和冷青与暖橙对比。','低清晰度，畸形手指，多余肢体，文字水印，过曝'],video:['镜头缓慢推近：雨夜港口，邮差撑伞走过积水的码头，霓虹倒影随步伐碎开；他停下，抬头看向灯塔，雾气翻涌。24fps，电影感，长焦，浅景深。','画面抖动，闪烁，人物变形，字幕']};
+
+/* seed history */
+function seedHistory(){
+ const mk=(k,i,wf,ratio,extra={})=>({n:i,k,wf,ratio,seed:(i*977)%100000,img:still(i+(k==='video'?40:0),ratio>=1?640:Math.round(640*ratio),ratio>=1?Math.round(640/ratio):640,{portrait:ratio<1}),prompt:prompts[k][0].slice(0,40)+'…',...extra});
+ st.hist.image=[mk('image',61,3,3/4),mk('image',60,4,16/9),mk('image',59,1,1),mk('image',58,1,9/16),{n:57,k:'image',fail:true,wf:2},mk('image',56,4,4/3),mk('image',55,4,3/4)];
+ st.hist.video=[mk('video',24,32,16/9),mk('video',23,33,9/16),mk('video',22,31,16/9),{n:21,k:'video',fail:true,wf:33},mk('video',20,31,16/9)];
+}
+
+/* ---------------------------------------------------------
+   create page rendering
+   --------------------------------------------------------- */
+function renderTaskChips(){$('#taskChips').innerHTML=TASKS[st.kind].map(t=>`<button class="chip ${st.task===t?'on':''}" data-task="${t}">${t}</button>`).join('')}
+function wfMatches(w){if(w.k!==st.kind)return false;if(st.readyOnly&&!w.ready&&!w.pending)return false;if(st.task!=='全部'&&w.task!==st.task)return false;if(st.q){const q=st.q.toLowerCase();return (w.name+w.file+w.task+FAM[w.f][0]).toLowerCase().includes(q)}return true}
+function wfItem(w){const fam=FAM[w.f];const sl=w.slots.map(s=>icon(S[s[0]].ic)).join('');
+ return `<div class="wfi lg ${st.sel[st.kind]===w.id?'on':''} ${w.ready?'':'needs'}" data-wf="${w.id}" title="${w.file}">
+  <div class="fam ${w.ready?'':'off'}" style="background:${fam[1]}">${fam[0]}</div>
+  <div style="min-width:0"><div class="nm ellipsis">${w.name}</div><div class="sub"><span>${w.task}</span>${sl?'<span>·</span>'+sl:''}${w.src==='cloud'&&!w.pending?'<span>· 云端</span>':''}${w.pending?'<span class="tag" style="height:16px;font-size:10px;border-style:dashed">未接入</span>':w.ready?'':'<span class="tag warn" style="height:16px;font-size:10px">待配置</span>'}</div></div>
+  <div class="acts"><button class="pin ${st.pins.includes(w.id)?'on':''}" data-pin="${w.id}" title="${st.pins.includes(w.id)?'取消置顶':'置顶'}">${icon('pin')}</button></div></div>`}
+function renderWfList(){
+ const list=WF.filter(wfMatches);const all=WF.filter(w=>w.k===st.kind);
+ $('#wfCount').textContent=`${list.length} 个 · 仓库共 ${st.kind==='image'?'98':'52'} 个文件`;
+ const groups=[];const pinned=list.filter(w=>st.pins.includes(w.id));if(pinned.length)groups.push(['置顶',pinned,'pin']);
+ const rest=list.filter(w=>!st.pins.includes(w.id));
+ const local=rest.filter(w=>w.src==='local'),cloud=rest.filter(w=>w.src==='cloud');
+ const fams=[...new Set(local.map(w=>w.f))];fams.forEach(f=>groups.push([`本地 ComfyUI · ${({qwen:'Qwen Image 2.1',krea:'Krea2',flux:'Flux2 Klein',zimg:'Z-Image',h3:'MiniMax H3',wan:'Wan',anima:'Anima'})[f]||f}`,local.filter(w=>w.f===f),'cpu']));
+ if(cloud.length)groups.push([cloud.every(w=>w.pending)?'云端模型 · 尚未接入（后续批次）':'云端模型',cloud,'cloud']);
+ $('#wfList').innerHTML=groups.length?groups.map(([t,ws,ic])=>`<div class="grp"><div class="grp-h">${icon('chev','i sm chev')}${icon(ic)}<span>${t}</span><span class="n">${ws.length}</span></div><div class="grp-b">${ws.map(wfItem).join('')}</div></div>`).join(''):
+  `<div class="empty-stage" style="padding:40px 10px">${icon('search','i lg')}<div>没有匹配的工作流</div><button class="btn sm" id="clearF">清除筛选</button></div>`;
+}
+function renderHead(){const w=curWF(),fam=FAM[w.f];
+ $('#hdFam').outerHTML=`<span class="fam-dot" id="hdFam" style="width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 9px var(--mono);color:#0c0e14;background:${fam[1]}">${fam[0]}</span>`;
+ $('#hdName').textContent=w.name;$('#hdTask').textContent=w.task;$('#hdFile').textContent=w.file;
+ $('#hdConn').textContent=w.pending?'云端接口尚未接入 · 后续批次':w.src==='cloud'?`${w.file.replace('云端 · ','')} · 按次计费`:'本机 ComfyUI-5090D · 38ms';
+ $('.cc .conn .dot').style.background=w.pending?'var(--tx-3)':'var(--ok)';
+}
+function renderSlots(){const w=curWF();const box=$('#slots');
+ if(!w.slots.length){box.style.display='none';return}box.style.display='';
+ const fill=st.fills[w.id]||(st.fills[w.id]={});
+ let html='';
+ const isFF=w.slots.some(s=>s[0]==='first');
+ if(isFF){html+=`<div class="sgrp"><div class="lbl"><b>首尾帧</b>· 首帧必填</div><div class="slot-row">`;
+  w.slots.forEach((s,i)=>{const key=s[0]+'0';const f=fill[key];if(i)html+=`<span class="ff-arrow">${icon('arrow')}</span>`;
+   html+=`<div class="slot ${f?'filled':''} ${s[3]&&!f?'req':''}" data-slot="${key}" data-seed="${s[0]==='first'?5:11}">${f?`<img src="${f}"><span class="x" data-rm="${key}">${icon('x')}</span>`:`<span class="ph">${icon('plus')}${S[s[0]].n}</span>`}<span class="cap">${S[s[0]].n}${s[3]?'':' · 可选'}</span></div>`});
+  html+='</div></div>';
+ } else w.slots.forEach(s=>{const [t,min,max,req]=s;const keys=Object.keys(fill).filter(k=>k.startsWith(t));
+  html+=`<div class="sgrp"><div class="lbl"><b>${S[t].n}</b>· ${req?'必填':'可选'} · ${keys.length}/${max}${t!=='mask'?`<span class="from" data-from="${t}">从结果选</span>`:''}</div><div class="slot-row">`;
+  keys.forEach(k=>{html+=`<div class="slot filled" data-slot="${k}"><img src="${fill[k]}"><span class="x" data-rm="${k}">${icon('x')}</span>${t==='mask'?'<span class="cap">遮罩</span>':''}</div>`});
+  if(keys.length<max)html+=`<div class="slot ${req&&keys.length<Math.max(min,1)?'req':''}" data-slot="${t}${Date.now()%1000}${keys.length}" data-seed="${t==='mask'?99:keys.length+7}"><span class="ph">${icon(t==='mask'?'mask':'upload')}${t==='mask'?'画遮罩':'上传'}</span></div>`;
+  html+='</div></div>'});
+ box.innerHTML=html;
+}
+function renderPrompts(){const w=curWF();$('#prompts').classList.toggle('split',w.neg);$('#negBox').style.display=w.neg?'':'none';count()}
+function count(){$('#posCount').textContent=$('#posTa').value.length+' 字';$('#negCount').textContent=$('#negTa').value.length+' 字'}
+function renderChips(){const w=curWF(),p=st.params[st.kind];
+ const ri=(r)=>{const v=RATIO[r]||1;const W=v>=1?14:Math.round(14*v),H=v>=1?Math.round(14/v):14;return `<span class="ratio-ico" style="width:${W}px;height:${H}px"></span>`};
+ let c=[];
+ if(w.src==='cloud')c.push(`<button class="pchip" data-pop>${icon('cloud')}<b>${w.name}</b></button>`); else c.push(`<button class="pchip" data-pop>${icon('cpu')}<b>5090D</b></button>`);
+ c.push(`<button class="pchip" data-pop>${ri(p.ratio)}<b>${p.ratio}</b></button>`);
+ if(st.kind==='image'){c.push(`<button class="pchip" data-pop>${icon('layers')}<b>${p.mp} MP</b></button>`,`<button class="pchip" data-pop>${icon('grid')}批次 <b>${p.batch}</b></button>`)}
+ else{c.push(`<button class="pchip" data-pop>${icon('film')}<b>${p.res}</b></button>`,`<button class="pchip" data-pop>${icon('clock')}<b>${p.dur}s</b> · ${p.fps}fps</button>`)}
+ c.push(`<button class="pchip" data-pop>${icon('dice')}种子 <b>${p.seed}</b></button>`,`<button class="pchip" data-pop>${icon('sliders')}更多参数</button>`);
+ $('#pchips').innerHTML=c.join('');
+ $('#genCost').textContent=w.pending?'':w.src==='cloud'?' 约 ¥0.2':(st.kind==='image'?` ×${p.batch}`:` ${p.dur}s`);
+ validate();
+}
+function validate(){const w=curWF();const fill=st.fills[w.id]||{};const miss=[];
+ w.slots.forEach(s=>{if(!s[3])return;const n=Object.keys(fill).filter(k=>k.startsWith(s[0])).length;if(n<Math.max(s[1],1))miss.push(S[s[0]].n)});
+ if(w.pending){$('#missing').innerHTML=`${icon('cloud')}尚未接入：云端接口属后续批次，当前不可生成`;$('#genBtn').disabled=true;return}
+ if(!w.ready)miss.push('输入映射');
+ $('#missing').innerHTML=miss.length?`${icon('x')}还缺：${miss.join('、')}`:'';
+ $('#genBtn').disabled=!!miss.length||st.generating;
+}
+function renderViewport(){
+ const vp=$('#viewport');const item=st.viewing||st.hist[st.kind][0];
+ $('#histBanner').classList.toggle('on',!!st.viewing);$('.stage').classList.toggle('viewing',!!st.viewing);
+ if(st.viewing)$('#hbN').textContent=`历史 #${st.viewing.n}`;
+ if(!item||item.fail){vp.innerHTML=`<div class="empty-stage"><div class="ring">${icon(st.kind==='image'?'image':'film','i lg')}</div><div style="color:var(--tx-2);font-size:14px">${item&&item.fail?'这次生成失败了':'作品会在这里完整显示'}</div><div style="font-size:12px">${item&&item.fail?'ComfyUI 报告：显存不足（OOM）· <a style="color:var(--gold)">重试</a>':'选工作流 → 填素材与提示词 → 开始生成'}</div></div>`;$('#actbar').innerHTML='';return}
+ fitFrame(item);renderActbar(item);
+}
+function fitFrame(item,reveal){
+ const vp=$('#viewport');const r=vp.getBoundingClientRect();const ctl=item.k==='video'?40:0;
+ let W=r.width,H=r.height-ctl;if(W/H>item.ratio)W=H*item.ratio;else H=W/item.ratio;W=Math.floor(W);H=Math.floor(H);
+ const meta=`<div class="fmeta"><span class="tag mono">#${item.n}</span><span class="tag">${WF.find(w=>w.id===item.wf).name}</span><span class="tag mono">${item.ratio>=1?'横':'竖'} ${fmtRatio(item.ratio)}</span></div>`;
+ if(item.k==='image'){vp.innerHTML=`<div class="frame vf on ${reveal?'reveal':''}" style="width:${W}px;height:${H}px"><img src="${item.img}" alt="">${meta}</div>`}
+ else{st.playing=false;st.t=0;vp.innerHTML=`<div class="player vf on ${reveal?'reveal':''}" id="player" style="width:${W}px;height:${H+ctl}px" tabindex="0" aria-label="视频播放器，空格播放或暂停（仅在播放器聚焦时）"><div class="scr"><div class="vid"><div class="layer" style="background-image:url('${item.img}')"></div></div>${meta}<button class="bigplay" id="bigplay" aria-label="播放"><svg><use href="#i-play"/></svg></button></div>
+  <div class="pctl"><button class="pp" id="pp" aria-label="播放"><svg><use href="#i-play"/></svg></button><span class="tc" id="tc">00:00 / 00:05</span><div class="scrub" id="scrub"><div><i id="scrI" style="width:0"></i><b id="scrB" style="left:0"></b></div></div><button class="btn sm ghost icon" title="循环">${icon('reuse')}</button><button class="btn sm ghost icon" title="全屏">${icon('expand')}</button></div></div>`}
+}
+const fmtRatio=r=>{for(const k in RATIO)if(Math.abs(RATIO[k]-r)<.01)return k;return r.toFixed(2)};
+function renderActbar(item){$('#actbar').innerHTML=`<button class="btn sm" data-act="zoom">${icon('expand')}放大</button><button class="btn sm" data-act="dl">${icon('down')}下载</button><span class="sep"></span><button class="btn sm" data-act="reuse">${icon('reuse')}复用参数</button><button class="btn sm" data-act="asref">${icon('image')}作为${st.kind==='image'?'参考图':'首帧'}</button>${st.kind==='image'?`<button class="btn sm" data-act="tovid">${icon('film')}送去生视频</button>`:''}<span class="sep"></span><button class="btn sm scene" data-act="toproj">${icon('project')}存入项目</button><button class="btn sm ghost" data-act="tolib">${icon('lib')}素材库</button><button class="btn sm ghost icon danger" data-act="del" title="删除">${icon('x')}</button>`}
+function renderHist(){const h=st.hist[st.kind];const cur=(st.viewing||h[0]);
+ let html='';if(st.generating)html+=`<div class="hcell run">${st.kind==='image'?'IMG':'VID'}<br>…</div>`;
+ h.forEach((it,i)=>{if(i===0||i===3)html+=`<div class="hdate">${i===0?'今天':'昨天'}</div>`;
+  html+=it.fail?`<div class="hcell fail" data-h="${it.n}">#${it.n}<br>失败</div>`:`<div class="hcell vf ${cur&&cur.n===it.n?'on':''}" data-h="${it.n}"><img src="${it.img}" alt=""><span class="n">#${it.n}</span>${it.k==='video'?`<span class="k">${icon('play')}</span>`:''}</div>`});
+ $('#histList').innerHTML=html;
+}
+function renderCreate(){document.documentElement.style.setProperty('--scene',st.kind==='image'?'var(--sc-image)':'var(--sc-video)');$('#p-create').style.setProperty('--scene',st.kind==='image'?'var(--sc-image)':'var(--sc-video)');
+ $$('#kindSeg button').forEach(b=>b.classList.toggle('on',b.dataset.kind===st.kind));
+ renderTaskChips();renderWfList();renderHead();renderSlots();renderPrompts();renderChips();renderHist();renderViewport();
+ const nav=$('.nav[data-go="create"]');nav.style.setProperty('--nav-c',st.kind==='image'?'var(--sc-image)':'var(--sc-video)');
+}
+function selectWF(id){const prev=curWF();st.sel[st.kind]=id;st.viewing=null;
+ const w=curWF();renderWfList();renderHead();renderSlots();renderPrompts();renderChips();renderViewport();renderHist();
+ if(prev.id!==id)toast(`已切换到「${w.name}」· 提示词已保留${w.neg&&!prev.neg?'，新增反向提示词栏':''}`,'var(--scene)')}
+
+/* params popover */
+let draft=null;
+function openPop(){draft=JSON.parse(JSON.stringify(st.params[st.kind]));renderPop();$('#paramPop').classList.add('on')}
+function renderPop(){const w=curWF(),p=draft;$('#popSub').textContent=`· ${w.name}`;
+ const ratios=st.kind==='image'?['1:1','3:4','4:3','9:16','16:9','21:9']:['16:9','9:16','1:1','21:9'];
+ const opt=(key,v,lab)=>`<button class="opt ${p[key]==v?'on':''}" data-k="${key}" data-v="${v}">${lab||v}</button>`;
+ const ri=r=>{const v=RATIO[r];const W=v>=1?16:Math.round(16*v),H=v>=1?Math.round(16/v):16;return `<span class="ratio-ico" style="width:${W}px;height:${H}px"></span>`};
+ let h=`<div class="fld wide"><div class="fh"><b>画面比例</b><span class="dim">· 结果按此比例完整显示，不裁切</span></div><div class="opts">${ratios.map(r=>opt('ratio',r,ri(r)+r)).join('')}</div></div>`;
+ if(st.kind==='image'){h+=`<div class="fld"><div class="fh"><b>总像素</b></div><div class="opts">${['0.5','1.0','2.0','4.0'].map(v=>opt('mp',v,v+' MP')).join('')}</div></div><div class="fld"><div class="fh"><b>批次</b></div><div class="row"><span class="dim" style="font-size:12px">一次生成张数</span><span class="grow"></span><div class="step"><button data-step="batch" data-d="-1">−</button><span>${p.batch}</span><button data-step="batch" data-d="1">+</button></div></div></div>
+  <div class="fld"><div class="fh"><b>采样步数</b><span class="dim">· 工作流默认 8</span></div><div class="range"><input type="range" min="4" max="40" value="${p.steps}" data-r="steps"><span class="mono">${p.steps}</span></div></div><div class="fld"><div class="fh"><b>引导 CFG</b></div><div class="range"><input type="range" min="1" max="10" step=".5" value="${p.cfg}" data-r="cfg"><span class="mono">${p.cfg}</span></div></div>
+  <div class="fld"><div class="fh"><b>降噪强度</b><span class="dim">· 仅图生图</span></div><div class="range"><input type="range" min="0" max="1" step=".05" value="${p.denoise}" data-r="denoise"><span class="mono">${p.denoise}</span></div></div>`}
+ else{h+=`<div class="fld"><div class="fh"><b>清晰度</b></div><div class="opts">${['480p','720p','1080p'].map(v=>opt('res',v)).join('')}</div></div><div class="fld"><div class="fh"><b>时长</b></div><div class="opts">${[3,5,8,10].map(v=>opt('dur',v,v+' 秒')).join('')}</div></div><div class="fld"><div class="fh"><b>帧率</b></div><div class="opts">${[16,24,30].map(v=>opt('fps',v,v+' fps')).join('')}</div></div><div class="fld"><div class="fh"><b>采样步数</b></div><div class="range"><input type="range" min="4" max="30" value="${p.steps}" data-r="steps"><span class="mono">${p.steps}</span></div></div>`}
+ h+=`<div class="fld"><div class="fh"><b>种子</b></div><div class="opts">${opt('seed','随机')}${opt('seed','固定','固定 952567')}</div></div>`;
+ h+=`<div class="fld wide" style="background:transparent;border-style:dashed"><div class="fh"><b>工作流内部节点</b><span class="tag">高级</span></div><p class="dim" style="font-size:11.5px">LoRA 强度、采样器、调度器等由工作流声明后才在这里出现；未声明的保持工作流原值。映射在「工作流管理」中配置，不在创作时打扰。</p></div>`;
+ $('#popBody').innerHTML=h;
+}
+
+/* generation (demo) */
+function generate(){if($('#genBtn').disabled)return;st.generating=true;st.viewing=null;validate();renderHist();
+ const p=st.params[st.kind];const ratio=RATIO[p.ratio]||1;const g=$('#genLayer');g.classList.add('on');g.querySelector('.gen-card').style.setProperty('--ar',ratio);
+ $('#viewport').style.opacity=.15;$('#actbar').style.visibility='hidden';$('#hist-banner');
+ let k=0;const total=st.kind==='image'?22:34;$('#genTxt').textContent='显影中 · 演示';
+ const tick=()=>{if(!st.generating)return;k++;const pc=Math.min(100,Math.round(k/total*100));$('#genBar').style.width=pc+'%';$('#genStep').textContent=st.kind==='image'?`采样 ${Math.min(8,Math.ceil(k/total*8))}/8`:`渲染帧 ${Math.min(120,Math.round(k/total*120))}/120`;$('#genEta').textContent=`剩余 ${Math.max(0,((total-k)*.1)).toFixed(1)}s`;
+  if(k>=total){finish(ratio)}else setTimeout(tick,100)};tick();
+}
+function finish(ratio){st.generating=false;$('#genLayer').classList.remove('on');$('#viewport').style.opacity=1;$('#actbar').style.visibility='';
+ const h=st.hist[st.kind];const n=(h.find(x=>!x.fail)||{n:0}).n+1;const W=ratio>=1?640:Math.round(640*ratio),H=ratio>=1?Math.round(640/ratio):640;
+ const item={n,k:st.kind,wf:curWF().id,ratio,seed:Math.floor(Math.random()*1e5),img:still(n*3+Date.now()%50,W,H,{portrait:ratio<1}),prompt:$('#posTa').value.slice(0,40)};
+ h.unshift(item);renderHist();fitFrame(item,true);renderActbar(item);validate();toast(`#${n} 完成（演示画面，未调用 ComfyUI）`,'var(--scene)')}
+
+/* video playback — never autoplays; space only toggles while player has focus */
+let raf=null,last=0;
+function setPlay(on){st.playing=on;const pl=$('#player');if(!pl)return;pl.classList.toggle('playing',on);$('#pp').innerHTML=`<svg><use href="#i-${on?'pause':'play'}"/></svg>`;$('#pp').setAttribute('aria-label',on?'暂停':'播放');
+ cancelAnimationFrame(raf);if(on){last=performance.now();const loop=now=>{st.t+=(now-last)/1000;last=now;if(st.t>=5){st.t=5;setPlay(false);updT();return}updT();raf=requestAnimationFrame(loop)};raf=requestAnimationFrame(loop)}}
+function updT(){const pc=st.t/5*100;$('#scrI').style.width=pc+'%';$('#scrB').style.left=pc+'%';$('#tc').textContent=`00:${String(Math.floor(st.t)).padStart(2,'0')} / 00:05`}
+
+/* ---------------------------------------------------------
+   other pages
+   --------------------------------------------------------- */
+const PROJ=[{t:'雾港来信',s:2,c:1,tag:'分镜待确认',seed:0},{t:'夏日站台',s:1,c:1,tag:'风格待确认',seed:3},{t:'城市漫游者',s:4,c:0,tag:'镜头制作中',seed:4},{t:'旧照片里的猫',s:5,c:0,tag:'已完成',seed:2}];
+function renderStudio(){$('#heroArt').style.backgroundImage=`url("${still(9,960,420)}")`;
+ $('#projGrid').innerHTML=PROJ.map(p=>`<div class="pcard" data-go="project"><div class="cv" style="background-image:url('${still(p.seed+20,480,270)}')"><span class="tag">${p.tag}</span></div><div class="pb"><b>${p.t}</b><div class="mini-stages">${[0,1,2,3,4].map(i=>`<i class="${i<p.s?'d':i===p.s&&p.c?'c':''}"></i>`).join('')}</div><div class="row dim" style="font-size:11px"><span>阶段 ${Math.min(p.s+1,5)}/5</span><span class="grow"></span><span>2 小时前</span></div></div></div>`).join('')+`<div class="pcard" style="display:grid;place-items:center;min-height:200px;border-style:dashed;background:transparent"><div class="empty-stage">${icon('plus','i lg')}<span>新建项目</span></div></div>`;
+ $('#queueMini').innerHTML=[['镜头 07 · H3 首尾帧',62,'var(--sc-video)',5],['分镜草图 8/12 · Krea2',35,'var(--sc-image)',8],['排队 · Qwen 局部重绘',0,'var(--tx-3)',1]].map(([t,p,c,s])=>`<div class="qitem"><div class="th" style="background-image:url('${still(s,80,80)}')"></div><div style="min-width:0"><div class="row" style="font-size:12px"><span class="ellipsis grow">${t}</span><span class="mono dim" style="font-size:11px">${p?p+'%':'排队'}</span></div><div class="bar"><i style="width:${p}%;background:${c};box-shadow:none"></i></div></div></div>`).join('');
+ $('#recentOuts').innerHTML=[1,2,3,4,5,6].map(i=>`<div style="background-image:url('${still(i+30,160,160)}')"></div>`).join('');
+}
+const AGENTS=[['剧本创作','故事、人物、场次与台词','book','var(--sc-agent)'],['视觉设计','风格板、色彩与参考图','palette','var(--gold)'],['分镜设计','镜头拆分、景别与时长','grid','var(--sc-image)'],['素材资产','角色、场景、道具出图','image','var(--sc-asset)'],['镜头脚本','逐镜视频提示词与生成','film','var(--sc-video)']];
+function renderAgents(){
+ $('#roster').innerHTML=AGENTS.map((a,i)=>`<div class="acard" style="--c:${a[3]}" data-go="agent-task"><div class="bg" style="background-image:url('${still(i+11,400,260)}')"></div><div class="sh"></div><span class="num">0${i+1}</span><span class="ic">${icon(a[2])}</span><div class="tx"><b>${a[0]}</b><p>${a[1]}</p><div class="row"><span class="tag" style="color:${a[3]};border-color:color-mix(in srgb,${a[3]} 35%,transparent)">${[2,1,2,3,2][i]} 个技能</span><span class="grow"></span><span class="dim" style="font-size:11px">${['DeepSeek-V4','GPT-5.5','DeepSeek-V4','Qwen3.5 本地','Qwen3.8'][i]}</span></div></div></div>`).join('');
+ const tl=[['分镜设计 · 雾港来信','运行中 4/5','var(--sc-agent)',1],['视觉设计 · 夏日站台','待你确认','var(--gold)',0],['剧本创作 · 城市漫游者','已带回项目','var(--ok)',0],['沙盒：港风海报提示词','已完成','var(--tx-3)',0],['素材资产 · 雾港来信 角色','已完成','var(--tx-3)',0]];
+ const html=tl.map((t,i)=>`<div class="titem ${i===0?'on':''}" data-go="agent-task"><b class="ellipsis">${t[0]}</b><div class="meta"><span class="dot" style="background:${t[2]}"></span>${t[1]}<span class="grow"></span>${['刚刚','12 分钟','昨天','昨天','周一'][i]}</div>${t[3]?`<div class="bar"><i style="width:70%;background:var(--sc-agent);box-shadow:none"></i></div>`:''}</div>`).join('');
+ $('#taskList').innerHTML=html;$('#taskList2').innerHTML=html;
+ $('#agentOuts').innerHTML=[['分镜表 · 12 镜','雾港来信'],['风格板 · 冷雾港口','雾港来信'],['人物小传 · 3 人','城市漫游者'],['海报提示词 ×6','沙盒']].map((o,i)=>`<div class="outcard"><div class="t" style="background-image:url('${still(i+14,240,120)}')"></div><div class="d"><b>${o[0]}</b><span class="dim">${o[1]}</span></div></div>`).join('');
+ const shots=['远景 · 雾中码头，灯塔一明一灭，邮差背影走入画面。','中景 · 他停在系缆桩旁，从大衣内袋取出信封，雨点落在纸上。','特写 · 信封邮戳「2006.11.03」，指尖微颤。','过肩 · 对面渡轮靠岸，汽笛声；他抬头。','近景 · 年轻女孩撑红伞下船，四处张望。','反打 · 邮差认出她，手中的信被风掀起一角。','俯拍 · 两人之间隔着积水，倒影里霓虹碎开。'];
+ $('#shotList').innerHTML=shots.map((s,i)=>`<div class="shot"><div class="th" style="background-image:url('${still(i+50,172,97,{figure:i%2==0})}')"><span>${String(i+1).padStart(2,'0')}</span></div><div style="display:flex;flex-direction:column;gap:4px;min-width:0"><div contenteditable="true">${s}</div><div class="row" style="font-size:11px"><span class="tag mono">${[6,5,3,5,4,5,6][i]}s</span><span class="tag">${['远景','中景','特写','过肩','近景','反打','俯拍'][i]}</span><span class="grow"></span><button class="btn sm ghost" style="height:22px">${icon('refresh')}重画</button></div></div></div>`).join('')+`<div class="shot" style="opacity:.6"><div class="th" style="background:var(--gen-bg);display:grid;place-items:center;color:var(--sc-agent);font:600 10px var(--mono)">生成中</div><div class="dim" style="font-size:12px">08 · 近景 · 女孩接过信，读到第一行…</div></div>`;
+}
+const STAGES=[['故事','已确认 v3','done'],['风格','已确认','done'],['分镜','草稿待确认','draft'],['素材','未开始',''],['镜头脚本','未开始','']];
+function renderProject(cur=2){$('#stepper').innerHTML=STAGES.map((s,i)=>`<div class="stp ${s[2]} ${i===cur?'on':''}" data-stage="${i}"><span class="n">${s[2]==='done'?icon('check'):i+1}</span><span class="t"><b>${s[0]}</b><small>${s[1]}</small></span></div>`).join('');
+ $('#projShots').innerHTML=Array.from({length:12},(_,i)=>`<div class="scard ${i===2?'on':''}"><div class="im" style="background-image:url('${still(i+50,400,225,{figure:i%2==0})}')"><span class="tc">${String(i+1).padStart(2,'0')} · ${[6,5,3,5,4,5,6,5,6,4,7,6][i]}s</span><span class="st">${i<7?'<span class="tag ok">草图</span>':'<span class="tag">待画</span>'}</span></div><div class="bd"><div class="row"><b>${['远景','中景','特写','过肩','近景','反打','俯拍','近景','双人','特写','远景','空镜'][i]}</b><span class="dim">场 1</span></div><p>${['雾中码头，灯塔一明一灭，邮差背影走入画面。','他停在系缆桩旁，从大衣内袋取出信封。','信封邮戳「2006.11.03」，指尖微颤。','对面渡轮靠岸，汽笛声；他抬头。','年轻女孩撑红伞下船，四处张望。','邮差认出她，信被风掀起一角。'][i%6]}</p><div class="row"><span class="dim" style="font-size:11px">台词 ${i%3}</span><button class="btn sm ghost" data-go="create" data-kind="video">${icon('film')}去生视频</button></div></div></div>`).join('');
+ $('#projTasks').innerHTML=Array.from({length:8},(_,i)=>`<div class="qitem"><div class="th" style="background-image:url('${still(i+50,80,80)}')"></div><div style="min-width:0"><div class="row" style="font-size:12px"><span class="ellipsis grow">分镜草图 ${String(i+1).padStart(2,'0')}</span><span class="mono dim" style="font-size:11px">${i<7?'完成':'47%'}</span></div><div class="bar"><i style="width:${i<7?100:47}%;background:${i<7?'var(--ok)':'var(--sc-agent)'};box-shadow:none"></i></div></div></div>`).join('');
+}
+function renderWorkflows(){
+ const facets=[['用途',[['全部',156],['图片生成',64],['图片编辑',38],['视频生成',30],['数字人 / 动作',10],['音频 / 音乐',8],['基础处理',19]]],['模型族',[['Qwen Image 2.1',13],['Krea2',20],['Flux2 Klein',15],['Z-Image',16],['MiniMax H3',38],['Wan',10]]],['状态',[['可运行',9],['需导出 API 格式',146],['缺自定义节点',3]]]];
+ $('#wfFacets').innerHTML=facets.map(([h,it])=>`<div class="h">${h}</div>`+it.map((x,i)=>`<div class="fitem ${h==='用途'&&i===0?'on':''}">${x[0]}<span class="n">${x[1]}</span></div>`).join('')).join('');
+ const rows=WF.filter(w=>w.src==='local');
+ $('#wfTable').innerHTML=rows.map((w,i)=>`<tr class="${w.id===3?'on':''}"><td class="nm"><div class="row"><span class="fam" style="width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:700 9px var(--mono);color:#0c0e14;background:${FAM[w.f][1]};${w.ready?'':'filter:grayscale(1) brightness(.55)'}">${FAM[w.f][0]}</span><div style="min-width:0"><b class="ellipsis">${w.name}</b><small class="ellipsis" style="display:block">${w.file}</small></div></div></td><td>${w.task}</td><td class="muted">${({qwen:'Qwen Image 2.1',krea:'Krea2',flux:'Flux2 Klein',zimg:'Z-Image',h3:'MiniMax H3',wan:'Wan',anima:'Anima'})[w.f]}</td><td>${w.slots.length?w.slots.map(s=>`<span class="tag">${S[s[0]].n}${s[2]>1?' ≤'+s[2]:''}</span>`).join(' '):'<span class="dim">仅提示词</span>'}</td><td>${w.ready?'<span class="tag ok">可运行</span>':(i%7===3?'<span class="tag err">缺节点</span>':'<span class="tag warn">需导出 API</span>')}</td><td><button class="pin ${st.pins.includes(w.id)?'on':''}" style="opacity:1">${icon('pin')}</button></td></tr>`).join('');
+ $('#wfDetail').innerHTML=`<div class="row"><span style="width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font:700 11px var(--mono);color:#0c0e14;background:${FAM.qwen[1]}">Qwen</span><div><b style="font-size:14px">Qwen 2.1 · 局部重绘</b><div class="dim mono" style="font-size:11px">image_qwen_image_2_1_image_edit (1)</div></div></div>
+  <div class="row"><span class="tag ok">可运行</span><span class="tag">本机 ComfyUI-5090D</span><span class="tag">平均 10s</span></div>
+  <div class="fld"><div class="fh"><b>显示名称与用途</b></div><div class="input"><input value="Qwen 2.1 · 局部重绘"></div><div class="opts"><span class="opt on">局部重绘</span><span class="opt">图生图</span><span class="opt">+ 标签</span></div></div>
+  <div class="fld"><div class="fh"><b>输入映射</b><span class="dim">· 节点 → 创作台控件</span></div>
+   <div class="map"><span class="a">470 · LoadImage</span>${icon('arrow')}<span class="b">输入图（必填）</span></div>
+   <div class="map"><span class="a">471 · LoadImageMask</span>${icon('arrow')}<span class="b">遮罩（必填）</span></div>
+   <div class="map"><span class="a">459:451 · TextEncode</span>${icon('arrow')}<span class="b">正向提示词</span></div>
+   <div class="map"><span class="a">459:452 · TextEncode</span>${icon('arrow')}<span class="b">反向提示词</span></div>
+   <div class="map"><span class="a">502 · ResolutionSelector</span>${icon('arrow')}<span class="b">画面比例 · 总像素</span></div>
+   <div class="map"><span class="a">459:3 · KSampler.seed</span>${icon('arrow')}<span class="b">种子</span></div></div>
+  <div class="row"><button class="btn sm">${icon('create')}在创作台打开</button><button class="btn sm">试运行</button><span class="grow"></span><button class="btn sm ghost danger">删除</button></div>`;
+}
+function renderModels(){const C=[['本机 ComfyUI-5090D','http://192.168.200.15:8188','ok','38ms','队列 2 · 显存 31.2/32 GB',9],['机房 ComfyUI-4090','http://192.168.200.21:8188','err','—','连接失败 · 3 次 · 10 分钟前',0],['云端 · 聚合 API（GPT-Image-2 · Nano Banana Pro）','尚未接入','soon','—','后续接入批次 · 当前不可用于生成',0],['云端 · 可灵','尚未接入','soon','—','后续接入批次 · 当前不可用于生成',0],['云端 · 即梦 CLI','尚未接入','soon','—','后续接入批次 · 当前不可用于生成',0]];
+ $('#modelCards').innerHTML=C.map(c=>c[2]==='soon'?`<div class="mcard" style="border-style:dashed;background:transparent"><div class="row"><span class="dot" style="background:var(--tx-3)"></span><b>${c[0]}</b><span class="grow"></span><span class="tag" style="border-style:dashed">未接入</span></div><div class="mono dim" style="font-size:11px">${c[1]}</div><div class="muted" style="font-size:12px">${c[4]}</div><div class="row"><span class="tag">0 个工作流使用</span><span class="grow"></span><button class="btn sm" disabled style="opacity:.5;cursor:not-allowed">等待接入</button></div></div>`:`<div class="mcard"><div class="row"><span class="dot" style="background:var(--${c[2]});box-shadow:0 0 8px var(--${c[2]})"></span><b>${c[0]}</b><span class="grow"></span><span class="lat" style="color:var(--${c[2]})">${c[3]}</span></div><div class="mono dim" style="font-size:11px">${c[1]}</div><div class="muted" style="font-size:12px">${c[4]}</div><div class="row"><span class="tag">${c[5]} 个工作流使用</span><span class="grow"></span><button class="btn sm">测试连接</button><button class="btn sm ghost">编辑</button></div></div>`).join('')+`<div class="mcard" style="border-style:dashed;background:transparent;display:grid;place-items:center;min-height:130px;color:var(--tx-3)">${icon('plus','i lg')}添加连接</div>`;
+}
+function renderTasks(){const R=[['镜头 07 · 首尾帧','项目 · 雾港来信','H3 首尾帧生视频','5090D',62,'run','video'],['分镜草图 8/12','智能体 · 分镜助手','Krea2 · 4 宫格故事板','5090D',35,'run','image'],['Qwen 局部重绘 #62','创作台','Qwen 2.1 · 局部重绘','5090D',0,'q','image'],['参考生视频 #21','创作台','H3 参考生视频','5090D',100,'fail','video'],['Krea2 文生图 #55','创作台','Krea2 · 文生图','5090D',100,'done','image'],['镜头 06 · 首尾帧','项目 · 雾港来信','H3 首尾帧生视频','5090D',100,'done','video']];
+ const lab={run:'<span class="tag sc" style="--scene:var(--sc-video)">生成中</span>',q:'<span class="tag">排队</span>',fail:'<span class="tag err">失败 · OOM</span>',done:'<span class="tag ok">完成</span>'};
+ $('#taskTable').innerHTML=R.map((r,i)=>`<tr><td><div style="width:48px;height:32px;border-radius:5px;background:url('${still(i+60,96,64)}') center/cover"></div></td><td><b style="font-weight:500">${r[0]}</b></td><td class="muted">${r[1]}</td><td>${r[2]}</td><td class="muted">${r[3]}</td><td style="width:180px">${lab[r[5]]}${r[5]==='run'?`<div class="bar" style="margin-top:5px"><i style="width:${r[4]}%"></i></div>`:''}</td><td class="mono dim" style="font-size:11px">21:0${i}</td><td><div class="row">${r[5]==='fail'?'<button class="btn sm">重试</button>':''}${r[5]==='run'||r[5]==='q'?'<button class="btn sm ghost">取消</button>':''}${r[5]==='done'?'<button class="btn sm ghost">查看</button>':''}</div></td></tr>`).join('')}
+function renderSpec(){const cs=getComputedStyle(document.documentElement);const S2=[['底 0','--bg-0'],['面板 1','--bg-1'],['卡片 2','--bg-2'],['浮起 3','--bg-3'],['主文字','--tx-1'],['次要文字','--tx-2'],['主操作','--gold'],['主操作高光','--gold-hi'],['主操作暗部','--gold-lo'],['图片场景','--sc-image'],['视频场景','--sc-video'],['智能体场景','--sc-agent'],['项目场景','--sc-project'],['管理场景','--sc-manage'],['成功','--ok'],['提醒','--warn'],['错误','--err'],['信息/历史','--info']].map(s=>[s[0],s[1],cs.getPropertyValue(s[1]).trim()]);
+ $('#swatches').innerHTML=S2.map(s=>`<div class="swc"><i style="background:var(${s[1]})"></i><div><b>${s[0]}</b><span class="mono dim">${s[1]}<br>${s[2]}</span></div></div>`).join('');
+ renderThemeMatrix();
+ $('#spaceRow').innerHTML=[4,8,12,16,20,24,32].map(n=>`<div style="display:flex;flex-direction:column;align-items:center;gap:4px"><i style="width:${n}px;height:${n}px;background:var(--gold);opacity:.75;border-radius:2px"></i><span class="mono dim" style="font-size:10px">${n}</span></div>`).join('');
+ $('#radRow').innerHTML=[['xs',4],['sm',6],['md',10],['lg',14],['xl',20]].map(r=>`<div style="display:flex;flex-direction:column;align-items:center;gap:4px"><i style="width:44px;height:30px;border:1.5px solid var(--line-3);border-radius:${r[1]}px;background:var(--bg-3);box-shadow:var(--sh-1)"></i><span class="mono dim" style="font-size:10px">r-${r[0]} ${r[1]}</span></div>`).join('');
+ $('#specSlot').innerHTML=`<img src="${still(5,120,120)}">`}
+function renderLibrary(){$('#libGrid').innerHTML=Array.from({length:22},(_,i)=>{const r=[3/4,16/9,1,9/16,4/3][i%5];const W=300,H=Math.round(W/r);return `<div><img src="${still(i+70,W,H,{portrait:r<1})}" alt="">${i%4==1?`<span class="tag" style="position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6)">${icon('play')}视频</span>`:''}</div>`}).join('')}
+
+/* ---------------------------------------------------------
+   routing
+   --------------------------------------------------------- */
+const pageOf={studio:'studio',create:'create',agents:'agents','agent-task':'agent-task',project:'project',workflows:'workflows',models:'models',tasks:'tasks',library:'library',canvas:'canvas',settings:'settings',spec:'spec'};
+function go(name,opts={}){if(!pageOf[name])name='studio';
+ $$('.page').forEach(p=>p.classList.toggle('on',p.id==='p-'+name));
+ const navName=name==='agent-task'?'agents':name;$$('.nav[data-go]').forEach(n=>n.classList.toggle('on',n.dataset.go===navName));
+ if(name==='create'){if(opts.kind)st.kind=opts.kind;renderCreate()}
+ if(name==='agents'||name==='agent-task')startParticles();
+ const h='#'+name+(name==='create'?'/'+st.kind:'');if(location.hash!==h)history.replaceState(null,'',h);
+}
+document.addEventListener('click',e=>{
+ const g=e.target.closest('[data-go]');if(g&&!e.target.closest('[data-pin]')){e.preventDefault();go(g.dataset.go,{kind:g.dataset.kind});return}
+ const pin=e.target.closest('[data-pin]');if(pin){e.stopPropagation();const id=+pin.dataset.pin;const i=st.pins.indexOf(id);i>=0?st.pins.splice(i,1):st.pins.unshift(id);localStorage.setItem('ns-pins',JSON.stringify(st.pins));renderWfList();toast(i>=0?'已取消置顶':'已置顶 · 当前工作流和输入不受影响','var(--gold)');return}
+ const wf=e.target.closest('[data-wf]');if(wf){selectWF(+wf.dataset.wf);return}
+ const gh=e.target.closest('.grp-h');if(gh){gh.parentElement.classList.toggle('closed');return}
+ const tk=e.target.closest('[data-task]');if(tk){st.task=tk.dataset.task;renderTaskChips();renderWfList();return}
+ if(e.target.closest('#clearF')){st.task='全部';st.q='';$('#wfSearch').value='';st.readyOnly=false;$('#readyOnly .sw').classList.remove('on');renderTaskChips();renderWfList();return}
+ const kb=e.target.closest('#kindSeg button');if(kb){st.kind=kb.dataset.kind;st.task='全部';st.viewing=null;$('#posTa').value=prompts[st.kind][0];$('#negTa').value=prompts[st.kind][1];history.replaceState(null,'','#create/'+st.kind);renderCreate();return}
+ if(e.target.closest('#readyOnly')){st.readyOnly=!st.readyOnly;$('#readyOnly .sw').classList.toggle('on',st.readyOnly);renderWfList();return}
+ const rm=e.target.closest('[data-rm]');if(rm){e.stopPropagation();delete st.fills[curWF().id][rm.dataset.rm];renderSlots();validate();return}
+ const sl=e.target.closest('.slot[data-slot]');if(sl&&!sl.classList.contains('filled')){const w=curWF();const f=st.fills[w.id]||(st.fills[w.id]={});const key=sl.dataset.slot;const isMask=key.startsWith('mask');f[key]=isMask?maskImg():still(+sl.dataset.seed||3,160,160);renderSlots();validate();toast(isMask?'遮罩已绘制（演示）':'素材已上传（演示）','var(--scene)');return}
+ const fr=e.target.closest('[data-from]');if(fr){const w=curWF();const f=st.fills[w.id]||(st.fills[w.id]={});const it=st.hist.image.find(x=>!x.fail);f[fr.dataset.from+'h'+Date.now()%1000]=it.img;renderSlots();validate();toast(`已把 #${it.n} 放入${S[fr.dataset.from].n}`,'var(--scene)');return}
+ if(e.target.closest('[data-pop]')){openPop();return}
+ if(e.target.closest('#popCancel')){$('#paramPop').classList.remove('on');toast('已取消，参数未改动','var(--tx-3)');return}
+ if(e.target.closest('#popSave')){if(!draft)return;st.params[st.kind]=draft;$('#paramPop').classList.remove('on');renderChips();toast('创作设置已保存','var(--scene)');return}
+ if(e.target.closest('#popReset')){draft={...draft,...(st.kind==='image'?{ratio:'1:1',mp:'1.0',batch:1,steps:8,cfg:'4.0'}:{ratio:'16:9',res:'720p',dur:5,fps:24,steps:8})};renderPop();return}
+ const o=e.target.closest('.pop .opt');if(o){draft[o.dataset.k]=isNaN(o.dataset.v)?o.dataset.v:(o.dataset.k==='mp'?o.dataset.v:+o.dataset.v);renderPop();return}
+ const sp=e.target.closest('[data-step]');if(sp){draft[sp.dataset.step]=Math.max(1,Math.min(8,draft[sp.dataset.step]+ +sp.dataset.d));renderPop();return}
+ if(e.target.closest('#genBtn')){generate();return}
+ if(e.target.closest('#genCancel')){st.generating=false;$('#genLayer').classList.remove('on');$('#viewport').style.opacity=1;$('#actbar').style.visibility='';validate();renderHist();toast('已取消（演示）','var(--tx-3)');return}
+ if(e.target.closest('#tallBtn')){$('#dock').classList.toggle('tall');setTimeout(renderViewport,220);return}
+ if(e.target.closest('#toggleHist')){$('#p-create').classList.toggle('hide-hist');setTimeout(renderViewport,50);return}
+ const hc=e.target.closest('[data-h]');if(hc){const it=st.hist[st.kind].find(x=>x.n==hc.dataset.h);st.viewing=(it===st.hist[st.kind][0])?null:it;renderHist();renderViewport();return}
+ if(e.target.closest('#hbBack')){st.viewing=null;renderHist();renderViewport();return}
+ if(e.target.closest('#hbReuse')){reuse(st.viewing);return}
+ const a=e.target.closest('[data-act]');if(a){const it=st.viewing||st.hist[st.kind][0];const act=a.dataset.act;
+  if(act==='zoom'){$('#lbImg').src=it.img;$('#lb').classList.add('on')}
+  if(act==='dl')toast(`下载 #${it.n}（演示）`);
+  if(act==='reuse')reuse(it);
+  if(act==='asref'){const w=curWF();const s=w.slots[0];if(!s){toast('当前工作流不需要参考素材，可换一个图生图工作流','var(--warn)')}else{const f=st.fills[w.id]||(st.fills[w.id]={});f[s[0]+'r'+it.n]=it.img;renderSlots();validate();toast(`#${it.n} 已放入「${S[s[0]].n}」`,'var(--scene)')}}
+  if(act==='tovid'){st.kind='video';st.sel.video=32;st.fills[32]={first0:it.img};go('create',{kind:'video'});toast(`#${it.n} 已作为首帧带到「H3 · 首尾帧生视频」`,'var(--sc-video)')}
+  if(act==='toproj')openSheet(it);
+  if(act==='tolib')toast(`#${it.n} 已存入素材库`);
+  if(act==='del')toast('删除需二次确认（演示中省略）','var(--warn)');return}
+ if(e.target.closest('#bigplay')||e.target.closest('#pp')){setPlay(!st.playing);return}
+ const sc=e.target.closest('#scrub');if(sc){const r=sc.getBoundingClientRect();st.t=Math.max(0,Math.min(5,(e.clientX-r.left)/r.width*5));updT();return}
+ if(e.target.closest('#lbClose')||e.target.id==='lb'){$('#lb').classList.remove('on');return}
+ const stp=e.target.closest('[data-stage]');if(stp){renderProject(+stp.dataset.stage);return}
+ if(e.target.closest('#confirmStage')){STAGES[2]=['分镜','已确认','done'];STAGES[3]=['素材','进行中',''];renderProject(3);$('#draftbar').classList.add('hide');toast('分镜已确认 · 素材阶段已解锁','var(--gold)');return}
+ if(e.target.closest('#sendBack')){STAGES[2]=['分镜','草稿待确认','draft'];$('#draftbar').classList.remove('hide');go('project');renderProject(2);toast('草稿已带回「雾港来信 · 分镜设计」，等你确认','var(--sc-agent)');return}
+ const pk=e.target.closest('.pick');if(pk){$$('.pick').forEach(x=>x.classList.remove('on'));pk.classList.add('on');return}
+ if(e.target.closest('#sheetCancel')){$('#sheet').classList.remove('on');return}
+ if(e.target.closest('#sheetOk')){$('#sheet').classList.remove('on');toast('已存入「雾港来信 · 素材资产 · 角色：老邮差」，可在项目中确认','var(--gold)');return}
+ if(e.target.closest('#motionBtn')){const on=document.documentElement.classList.toggle('reduce');$('#motionBtn span').textContent=on?'动效关':'动效开';toast(on?'已减少动效：保留状态变化，去掉光束、粒子与位移':'已恢复完整动效','var(--tx-3)');return}
+ if(!e.target.closest('#paramPop')&&$('#paramPop').classList.contains('on')&&!e.target.closest('[data-pop]')){$('#paramPop').classList.remove('on')}
+});
+function reuse(it){if(!it)return;st.sel[st.kind]=it.wf;st.viewing=null;$('#posTa').value=prompts[st.kind][0];const w=curWF();renderWfList();renderHead();renderSlots();renderPrompts();renderChips();renderHist();renderViewport();toast(`已回填 #${it.n} 的工作流、提示词与参数（种子 ${it.seed}）· 素材需重新确认`,'var(--info)')}
+function maskImg(){const s=`<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><rect width="160" height="160" fill="#111"/><path d="M40 120 C30 60 90 30 120 70 C140 100 100 140 40 120Z" fill="#fff"/></svg>`;return 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(s)}
+function openSheet(it){$('#sheetBody').innerHTML=`<div class="dim" style="font-size:12px">选择项目与阶段，产物会以「待确认」状态进入该阶段</div>`+[['雾港来信','素材资产 · 角色：老邮差',0],['雾港来信','镜头脚本 · 镜头 07',0],['夏日站台','风格 · 参考图',3]].map((p,i)=>`<div class="pick ${i===0?'on':''}"><div class="th" style="background-image:url('${still(p[2]+20,112,64)}')"></div><div><b style="font-size:12.5px">${p[0]}</b><div class="dim" style="font-size:11.5px">${p[1]}</div></div></div>`).join('');$('#sheet').classList.add('on')}
+document.addEventListener('input',e=>{if(e.target.id==='wfSearch'){st.q=e.target.value;renderWfList()}if(e.target.id==='posTa'||e.target.id==='negTa')count();
+ if(e.target.dataset.r){draft[e.target.dataset.r]=e.target.value;e.target.nextElementSibling.textContent=e.target.value}});
+document.addEventListener('keydown',e=>{
+ if(e.key==='Escape'){$('#lb').classList.remove('on');$('#paramPop').classList.remove('on');$('#sheet').classList.remove('on')}
+ if(e.key===' '&&document.activeElement&&document.activeElement.id==='player'){e.preventDefault();setPlay(!st.playing)}
+ if(e.key==='Enter'&&e.ctrlKey&&$('#p-create').classList.contains('on'))generate();
+ if(e.key==='/'&&$('#p-create').classList.contains('on')&&!/TEXTAREA|INPUT/.test(document.activeElement.tagName)){e.preventDefault();$('#wfSearch').focus()}
+});
+/* spotlight coordinates for .lg */
+document.addEventListener('pointermove',e=>{const el=e.target.closest('.lg');if(el){const r=el.getBoundingClientRect();el.style.setProperty('--mx',(e.clientX-r.left)+'px');el.style.setProperty('--my',(e.clientY-r.top)+'px')}});
+window.addEventListener('resize',()=>{if($('#p-create').classList.contains('on'))renderViewport()});
+
+/* particles for agent pages (stops when hidden or reduced motion) */
+let pRaf=null;
+function startParticles(){const cv=$('#particles');if(!cv||document.documentElement.classList.contains('reduce'))return;const ctx=cv.getContext('2d');const r=cv.getBoundingClientRect();cv.width=r.width;cv.height=r.height;
+ const P=Array.from({length:46},()=>({x:Math.random()*cv.width,y:Math.random()*cv.height,v:.15+Math.random()*.35,s:Math.random()*1.6+.4,a:Math.random()*.5+.15}));
+ cancelAnimationFrame(pRaf);const loop=()=>{if(!$('#p-agents').classList.contains('on')||document.documentElement.classList.contains('reduce')){ctx.clearRect(0,0,cv.width,cv.height);return}ctx.clearRect(0,0,cv.width,cv.height);P.forEach(p=>{p.y-=p.v;p.x+=Math.sin(p.y/60)*.2;if(p.y<-4){p.y=cv.height+4;p.x=Math.random()*cv.width}ctx.beginPath();ctx.arc(p.x,p.y,p.s,0,7);ctx.fillStyle=`rgba(${PCOL},${p.a})`;ctx.fill()});pRaf=requestAnimationFrame(loop)};loop()}
+
+/* ---------------------------------------------------------
+   themes — only html[data-theme] changes; no page re-render, so prompts,
+   uploads, params, workflow choice, project and agent state are untouched
+   --------------------------------------------------------- */
+const THEMES=[
+ {id:'night',name:'夜片场',en:'Nocturne',tone:'深色 · 默认',desc:'墨黑棚里一盏钨丝灯：作品最亮，金色只给“去做”。夜间与沉浸创作。'},
+ {id:'day',name:'日光棚',en:'Daylight',tone:'浅色',desc:'开窗的白天摄影棚：暖白纸面、墨色文字、琥珀主键。白天办公与长时间审稿。'},
+ {id:'grade',name:'调色间',en:'Grading',tone:'中性深灰',desc:'调色室的中性灰：不给作品染色，场景色降饱和、主键为白。判断色彩、久盯不累。'},
+ {id:'bluehour',name:'蓝调时刻',en:'Blue Hour',tone:'深蓝',desc:'日落后的靛蓝天色配珊瑚主光，氛围最浓。提案、展示与灵感发散。'}];
+const TKEY='aigc-theme';let themeSaved=true,PCOL='214,190,255';
+const curTheme=()=>document.documentElement.getAttribute('data-theme')||'night';
+const prev=()=>`<span class="r"></span><span class="l"><i></i><i></i><i></i><i></i></span><span class="m"><span class="art"></span><span class="dk"><span></span></span></span><span class="tx"></span>`;
+function renderThemeUI(){const cur=curTheme(),t=THEMES.find(x=>x.id===cur);
+ $('#themeList').innerHTML=THEMES.map(x=>`<button class="topt ${x.id===cur?'on':''}" role="radio" aria-checked="${x.id===cur}" data-theme-set="${x.id}"><span class="tprev" data-theme="${x.id}">${prev()}</span><span><span class="nm"><b>${x.name}</b><small>${x.en} · ${x.tone}</small></span><p>${x.desc}</p></span><svg class="i sm ck"><use href="#i-check"/></svg></button>`).join('');
+ $('#themeTiles').innerHTML=THEMES.map(x=>`<button class="ttile ${x.id===cur?'on':''}" role="radio" aria-checked="${x.id===cur}" data-theme-set="${x.id}"><span class="tprev" data-theme="${x.id}">${prev()}</span><b>${x.name}${x.id==='night'?' <span class="tag" style="height:16px;font-size:10px">默认</span>':''}</b><small>${x.tone}</small></button>`).join('');
+ $('#themeFoot').innerHTML=themeSaved?`${icon('check')}已记住，下次打开沿用 · 正在编辑的内容不受影响`:`${icon('x')}浏览器禁止本地存储：本次有效，其他操作不受影响`;
+ $('#themeBtn').title=`切换主题（当前：${t.name}）`;
+ const n=$('#specThemeName');if(n)n.textContent=t.name;
+ if($('#p-spec').classList.contains('on'))renderSpec();
+}
+function setTheme(id,ev){if(!THEMES.some(t=>t.id===id))id='night';if(id===curTheme())return;
+ const root=document.documentElement;const reduce=root.classList.contains('reduce');
+ const apply=()=>{root.setAttribute('data-theme',id);try{localStorage.setItem(TKEY,id);themeSaved=true}catch(e){themeSaved=false}
+  PCOL=getComputedStyle(root).getPropertyValue('--particle').trim()||PCOL;renderThemeUI()};
+ if(reduce){apply()}
+ else if(document.startViewTransition){ // "开灯" reveal from the control that was clicked; non-blocking, ~0.5s
+  if(ev&&ev.clientX!=null){root.style.setProperty('--tx',ev.clientX+'px');root.style.setProperty('--ty',ev.clientY+'px')}
+  document.startViewTransition(apply)}
+ else{root.classList.add('theme-anim');apply();clearTimeout(setTheme._t);setTheme._t=setTimeout(()=>root.classList.remove('theme-anim'),340)}
+ toast(`已切换到「${THEMES.find(t=>t.id===id).name}」· 正在编辑的内容未改动`,'var(--gold)');
+}
+function toggleThemePop(on){const p=$('#themePop');on=on===undefined?!p.classList.contains('on'):on;p.classList.toggle('on',on);$('#themeBtn').setAttribute('aria-expanded',on);if(on){renderThemeUI();const a=p.querySelector('.topt.on');a&&a.focus()}}
+function renderThemeMatrix(){const probes=THEMES.map(t=>getComputedStyle(document.querySelector(`.tprobe[data-theme="${t.id}"]`)));
+ const rows=[['页面底','--bg-0'],['面板','--bg-1'],['卡片','--bg-2'],['浮起/按钮','--bg-3'],['主文字','--tx-1'],['次要文字','--tx-2'],['弱文字','--tx-3'],['边框','--line-2'],['主操作','--gold'],['主操作上文字','--tx-inv'],['选中/焦点（随场景）','--sc-image'],['视频场景','--sc-video'],['智能体场景','--sc-agent'],['管理场景','--sc-manage'],['成功','--ok'],['提醒','--warn'],['错误','--err'],['信息 / 历史回看','--info']];
+ let h=`<div class="hd">语义 · 变量</div>`+THEMES.map(t=>`<div class="hd">${t.name}${t.id===curTheme()?' · 当前':''}</div>`).join('');
+ rows.forEach(([n,v])=>{h+=`<div class="k">${n}<code>${v}</code></div>`+probes.map(p=>{const val=p.getPropertyValue(v).trim();return `<div class="c"><i style="background:${val}"></i><span>${val}</span></div>`}).join('')});
+ $('#themeMatrix').innerHTML=h}
+document.addEventListener('click',e=>{
+ const ts=e.target.closest('[data-theme-set]');if(ts){setTheme(ts.dataset.themeSet,e);return}
+ if(e.target.closest('#themeBtn')){toggleThemePop();return}
+ if(e.target.closest('#themeClose')){toggleThemePop(false);$('#themeBtn').focus();return}
+ if($('#themePop').classList.contains('on')&&!e.target.closest('#themePop'))toggleThemePop(false);
+},true);
+document.addEventListener('keydown',e=>{if(e.key==='Escape'&&$('#themePop').classList.contains('on')){toggleThemePop(false);$('#themeBtn').focus()}
+ const o=e.target.closest&&e.target.closest('[data-theme-set]');if(o&&/Arrow(Up|Down|Left|Right)/.test(e.key)){e.preventDefault();const sib=[...o.parentElement.children];const i=sib.indexOf(o)+(/Up|Left/.test(e.key)?-1:1);sib[(i+sib.length)%sib.length].focus()}});
+try{localStorage.setItem('__t','1');localStorage.removeItem('__t')}catch(e){themeSaved=false}
+PCOL=getComputedStyle(document.documentElement).getPropertyValue('--particle').trim()||PCOL;
+
+/* boot */
+if(matchMedia('(prefers-reduced-motion: reduce)').matches){document.documentElement.classList.add('reduce');$('#motionBtn span').textContent='动效关'}
+seedHistory();$('#posTa').value=prompts.image[0];$('#negTa').value=prompts.image[1];
+renderStudio();renderAgents();renderProject();renderWorkflows();renderModels();renderTasks();renderLibrary();renderSpec();renderThemeUI();
+(function(){const h=location.hash.slice(1).split('/');const q=new URLSearchParams(location.search);
+ if(q.get('still'))document.documentElement.classList.add('reduce');
+ if(q.get('shot'))document.documentElement.classList.add('capture');
+ if(h[0]==='create'&&h[1]){st.kind=h[1];$('#posTa').value=prompts[st.kind][0];$('#negTa').value=prompts[st.kind][1]}
+ if(q.get('hist')){st.viewing=st.hist[st.kind][+q.get('hist')]}
+ if(q.get('pop'))setTimeout(openPop,60);
+ if(q.get('themepop'))setTimeout(()=>toggleThemePop(true),80);
+ if(q.get('scrollto'))setTimeout(()=>{const el=document.getElementById(q.get('scrollto'));el&&el.scrollIntoView({block:'start'})},120);
+ if(q.get('wf'))st.sel[st.kind]=+q.get('wf');
+ if(q.get('fill')){st.fills[3]={input0:still(5,160,160),mask0:maskImg()};st.fills[32]={first0:still(5,160,160),last0:still(11,160,160)};st.fills[33]={ref0:still(7,160,160),ref1:still(8,160,160),ref2:still(9,160,160)}}
+ go(h[0]||'studio',{kind:h[1]});
+ if(q.get('selftest')==='1')setTimeout(selfTest,200);
+})();
+/* design-QA hook (?selftest=1): proves a theme switch leaves working state untouched */
+function selfTest(){const R=[];const ok=(n,c)=>R.push((c?'PASS ':'FAIL ')+n);
+ document.documentElement.classList.add('reduce');
+ go('create',{kind:'image'});selectWF(3);$('#posTa').value='自测提示词：雾港清晨';$('#negTa').value='自测反向';
+ st.fills[3]={input0:still(5,160,160),mask0:maskImg()};renderSlots();st.params.image.ratio='16:9';st.params.image.batch=3;renderChips();
+ st.viewing=st.hist.image[2];renderHist();renderViewport();STAGES[2]=['分镜','草稿待确认','draft'];
+ const snap=()=>JSON.stringify([$('#posTa').value,$('#negTa').value,Object.keys(st.fills[3]||{}),st.params.image,st.sel,st.kind,st.viewing&&st.viewing.n,STAGES[2],$('#shotList').innerHTML.length,$('#taskList').innerHTML.length,$('#p-create').classList.contains('on')]);
+ const before=snap();
+ ['day','grade','bluehour','night','day'].forEach(t=>{setTheme(t);ok(`切到 ${t} 后 data-theme 正确`,curTheme()===t);ok(`切到 ${t} 后提示词/上传/参数/工作流/历史/项目/智能体状态未变`,snap()===before)});
+ let stored=null;try{stored=localStorage.getItem(TKEY)}catch(e){}ok('选择已记住（localStorage=day）',stored==='day');
+ const orig=Storage.prototype.setItem;Storage.prototype.setItem=function(){throw new Error('blocked')};
+ setTheme('grade');ok('存储被禁止时仍可切换',curTheme()==='grade');ok('存储被禁止时给出提示且不报错',!themeSaved&&/本次有效/.test($('#themeFoot').textContent));ok('存储被禁止时状态未变',snap()===before);
+ Storage.prototype.setItem=orig;
+ ok('云端未接入：生成按钮禁用',(selectWF(18),$('#genBtn').disabled&&/尚未接入/.test($('#missing').textContent)));
+ ok('云端未接入：连接标识为未接入',/尚未接入/.test($('#hdConn').textContent));
+ selectWF(3);ok('回到本地工作流后提示词仍在',$('#posTa').value==='自测提示词：雾港清晨');
+ setTheme('bluehour');const pre=document.createElement('pre');pre.id='selftest';pre.textContent=R.join('\n');document.body.append(pre);}
+</script>
+</body>
+</html>
diff --git a/docs/hel-728/backup-hashes.txt b/docs/hel-728/backup-hashes.txt
new file mode 100644
index 00000000..715ca637
--- /dev/null
+++ b/docs/hel-728/backup-hashes.txt
@@ -0,0 +1,5 @@
+c32f1f7e6814350d2f5470e900b5a697bf8f34f02eac3837eca9a7a3fe9b25d4  /opt/aigc-home/releases/formal-v5-35fd07a.tgz
+f1fb2e4167a7e552de69f7857347ca95a1ebf0f1a5ab1d075692ccf1ae5a103b  /opt/aigc-home/releases/backup-HEL665-v5-35fd07a-20261015.tgz
+8374951e292df80f43aac3425a7aaa312e59f3a0b953b45a4d051934612ff304  /opt/aigc-home/releases/rollback-HEL665-v5-35fd07a-20261015.sh
+old-source-present
+old-static-present
diff --git a/docs/hel-728/baseline-browser.log b/docs/hel-728/baseline-browser.log
new file mode 100644
index 00000000..c71c48b3
--- /dev/null
+++ b/docs/hel-728/baseline-browser.log
@@ -0,0 +1,31 @@
+{"image_wf": 1, "video_wf": 2, "endpoint": "cba0eaa4-57f2-4f57-99b1-ba7b6f0b0835"}
+{'dual': 3, 'h3': 4, 'project': 1}
+RUN e2e/reference/check.cjs
+PASS 真实工作流显示正反向左右分栏
+PASS 工作流列表可应对超过 48 项
+PASS 列表搜索过滤真实元数据
+PASS 置顶不切换工作流、不清空草稿
+PASS 参数取消不改当前值
+PASS 参数保存应用到当前工作流
+PASS 真实生成请求提交且取得结果
+PASS 正反向与种子写入任务
+locator.click: Timeout 12000ms exceeded.
+Call log:
+  - waiting for locator('.result-item').first()
+
+    at /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/e2e/reference/check.cjs:146:45 {
+  log: [ "  - waiting for locator('.result-item').first()" ],
+  name: 'TimeoutError'
+}
+RUN e2e/reference/check-copy-fallback.cjs
+locator.waitFor: Timeout 15000ms exceeded.
+Call log:
+  - waiting for getByRole('button', { name: /编辑内容并带回项目/ }) to be visible
+
+    at /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/e2e/reference/check-copy-fallback.cjs:44:54 {
+  log: [
+    "  - waiting for getByRole('button', { name: /编辑内容并带回项目/ }) to be visible"
+  ],
+  name: 'TimeoutError'
+}
+FAILED SCRIPTS ['e2e/reference/check.cjs', 'e2e/reference/check-copy-fallback.cjs']
diff --git a/docs/hel-728/baseline-lint.log b/docs/hel-728/baseline-lint.log
new file mode 100644
index 00000000..fe2ed9d9
--- /dev/null
+++ b/docs/hel-728/baseline-lint.log
@@ -0,0 +1,74 @@
+
+> calliope-web@1.5.8 lint
+> prettier --check . && eslint .
+
+Checking formatting...
+[warn] package-lock.json
+[warn] package.json
+[warn] scripts/check-storage-ssr.mjs
+[warn] src/app.html
+[warn] src/hooks.client.ts
+[warn] src/hooks.server.ts
+[warn] src/lib/actions/spotlight.ts
+[warn] src/lib/agentComposer.ts
+[warn] src/lib/agentTasks.ts
+[warn] src/lib/assetPicker.ts
+[warn] src/lib/comfy/classifyInput.ts
+[warn] src/lib/comfy/parser.ts
+[warn] src/lib/comfy/promptInput.ts
+[warn] src/lib/comfy/resolution.ts
+[warn] src/lib/comfy/types.ts
+[warn] src/lib/comfy/useUpload.svelte.ts
+[warn] src/lib/components/agent/agentPalette.ts
+[warn] src/lib/components/generate/context.ts
+[warn] src/lib/components/generate/schema.ts
+[warn] src/lib/components/generate/takeDelete.svelte.ts
+[warn] src/lib/components/generate/takes.ts
+[warn] src/lib/components/shell/nav.ts
+[warn] src/lib/components/ui/icons.ts
+[warn] src/lib/components/ui/modalLayers.ts
+[warn] src/lib/components/ui/README.md
+[warn] src/lib/dbtime.ts
+[warn] src/lib/durationBudget.ts
+[warn] src/lib/endpointKind.ts
+[warn] src/lib/events.ts
+[warn] src/lib/formOptions.ts
+[warn] src/lib/i18n.svelte.ts
+[warn] src/lib/i18n/de.ts
+[warn] src/lib/i18n/en.ts
+[warn] src/lib/i18n/es.ts
+[warn] src/lib/i18n/fr.ts
+[warn] src/lib/i18n/ja.ts
+[warn] src/lib/i18n/ko.ts
+[warn] src/lib/i18n/zh.ts
+[warn] src/lib/jobProgress.ts
+[warn] src/lib/jobStatus.ts
+[warn] src/lib/missingOutputs.svelte.ts
+[warn] src/lib/promptTemplates.ts
+[warn] src/lib/reduceMotion.svelte.ts
+[warn] src/lib/referenceAgent.ts
+[warn] src/lib/shot/api.ts
+[warn] src/lib/shot/calibration/compositionPresets.ts
+[warn] src/lib/shot/calibration/shotSolver.ts
+[warn] src/lib/shot/helpers/cameraUtils.ts
+[warn] src/lib/shot/helpers/jointConfig.ts
+[warn] src/lib/shot/helpers/mannequinFactory.ts
+[warn] src/lib/shot/helpers/mirror.ts
+[warn] src/lib/shot/helpers/posture.ts
+[warn] src/lib/shot/helpers/primitiveFactory.ts
+[warn] src/lib/shot/motion/sampleTrack.ts
+[warn] src/lib/shot/shotStore.svelte.ts
+[warn] src/lib/shot/types/mannequin-js.d.ts
+[warn] src/lib/storage.ts
+[warn] src/lib/toast.ts
+[warn] src/lib/wideLayout.ts
+[warn] src/routes/+layout.ts
+[warn] src/routes/+page.ts
+[warn] src/routes/app.css
+[warn] src/routes/project/[id]/+page.ts
+[warn] src/routes/projects/+page.ts
+[warn] svelte.config.js
+[warn] tailwind.config.js
+[warn] tsconfig.json
+[warn] vite.config.ts
+[warn] Code style issues found in 68 files. Run Prettier with --write to fix.
diff --git a/docs/hel-728/baseline-pytest.log b/docs/hel-728/baseline-pytest.log
new file mode 100644
index 00000000..a6c0665f
--- /dev/null
+++ b/docs/hel-728/baseline-pytest.log
@@ -0,0 +1,413 @@
+FFFFF                                                                    [100%]
+=================================== FAILURES ===================================
+________________________ test_comfy_server_info_scoping ________________________
+
+    def test_comfy_server_info_scoping():
+        """Native health check stays visible in both blind and linked sessions."""
+        from calliope.agent.harness import tools as harness_tools
+
+        blind = ToolContext(session_id=1, project_id=None)
+        linked = ToolContext(session_id=1, project_id=99)
+
+>       blind_names = {e["function"]["name"] for e in harness_tools.openai_tools_payload(blind)}
+                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+tests/test_agent_comfy_mcp.py:370:
+_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
+src/calliope/agent/harness/tools.py:27: in openai_tools_payload
+    return _registry.openai_payload(ctx)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/registry.py:219: in openai_payload
+    if self._visible(t, ctx)
+       ^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/registry.py:203: in _visible
+    if not user_allows_render(ctx):
+           ^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:156: in user_allows_render
+    if has_structured_approval(ctx, "render"):
+       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:277: in has_structured_approval
+    answer = latest_answer(ctx.session_id)
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:260: in latest_answer
+    events = read_events(session_id)
+             ^^^^^^^^^^^^^^^^^^^^^^^
+_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
+
+session_id = 1
+
+    def read_events(session_id: int) -> list[SessionEvent]:
+        conn = _db()
+        try:
+>           rows = conn.execute(
+                "SELECT * FROM agent_events WHERE session_id = ? ORDER BY seq", (session_id,)
+            ).fetchall()
+E           sqlite3.OperationalError: no such table: agent_events
+
+src/calliope/agent/harness/log.py:146: OperationalError
+----------------------------- Captured stderr call -----------------------------
+2026-10-21 20:00:31,637 | INFO | calliope.harness | Harness composed: 79 tools
+------------------------------ Captured log call -------------------------------
+INFO     calliope.harness:__init__.py:214 Harness composed: 79 tools
+___________ test_h3_messages_bind_neighbor_shots_and_keep_file_slots ___________
+
+    def test_h3_messages_bind_neighbor_shots_and_keep_file_slots():
+        from calliope.agent.prompts import build_minimax_h3_ref_messages
+        from calliope.agent.video_agent import resolve_h3_references
+        from calliope.comfyui.parser import parse_dynamic_inputs
+
+        plan = {
+            "overview": {"style": "noir", "lighting": "sodium"},
+            "requirements": {"lighting": "sodium lamps only"},
+            "shots": [
+                {
+                    "clip_id": 1,
+                    "window": "00:00.000-00:04.000",
+                    "action": "enter",
+                    "camera": "push in",
+                    "lighting": "dim sodium",
+                    "speakers": "MAYA: hello",
+                    "spatial": "screen left",
+                    "state_after": "door open",
+                },
+                {
+                    "clip_id": 2,
+                    "window": "00:04.000-00:08.000",
+                    "action": "turn",
+                    "camera": "hold",
+                    "lighting": "dim sodium",
+                    "speakers": "",
+                    "spatial": "screen left",
+                    "state_after": "",
+                },
+                {
+                    "clip_id": 3,
+                    "window": "00:08.000-00:12.000",
+                    "action": "leave",
+                    "camera": "pull out",
+                    "lighting": "brighter",
+                    "speakers": "",
+                    "spatial": "",
+                    "state_after": "hallway empty",
+                },
+            ],
+        }
+        lock = continuity_lock_text(plan, 2)
+        assert "Previous shot" in lock
+        assert "Next shot" in lock
+        assert "Do not recast a subject" in lock
+        assert "screen direction" in lock
+        assert "enter" in lock and "leave" in lock
+
+        scene = {"heading": "INT. HALL", "action": "She turns.", "duration_sec": 4, "dialog": ""}
+        subjects = [
+            {
+                "index": 1,
+                "kind": "reference",
+                "name": "mercs",
+                "appearance": "",
+                "path": r"E:\assets\mercs.png",
+            }
+        ]
+        messages = build_minimax_h3_ref_messages(scene, subjects, continuity=lock)
+        text = messages[1]["content"]
+        assert "Previous shot" in text
+        assert "Next shot" in text
+        assert "screen direction" in text
+        assert "do not substitute another character or location" in text
+
+        workflow = {
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+        }
+        inputs = parse_dynamic_inputs(workflow)
+        resolved, paths, _videos = resolve_h3_references(
+            inputs,
+            {"148": r"E:\assets\hero.png", "149": r"E:\assets\mercs.png"},
+            [{"name": "Maya", "appearance": "olive jacket", "sheet_path": r"E:\assets\maya.png"}],
+            {"name": "Metro Line", "description": "rain-slick rooftops"},
+            r"E:\assets\metro.png",
+        )
+>       assert resolved[1]["name"] == "mercs"
+E       AssertionError: assert 'E:\\assets\\mercs' == 'mercs'
+E
+E         - mercs
+E         + E:\assets\mercs
+
+tests/test_continuity.py:249: AssertionError
+___________ test_resolve_h3_references_prefers_form_files_over_story ___________
+
+    def test_resolve_h3_references_prefers_form_files_over_story():
+        """Slot files the user picked replace the story cast; empty slots keep it."""
+        from calliope.agent.video_agent import resolve_h3_references
+        from calliope.comfyui.parser import parse_dynamic_inputs
+
+        workflow = {
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+            "150": {
+                "class_type": "LoadVideo",
+                "inputs": {"video": ""},
+                "_meta": {"title": "Motion (Input:video)"},
+            },
+        }
+        inputs = parse_dynamic_inputs(workflow)
+        characters = [
+            {
+                "name": "Maya",
+                "appearance": "olive jacket",
+                "sheet_path": r"E:\assets\maya.png",
+            }
+        ]
+        location = {"name": "Metro Line", "description": "rain-slick rooftops"}
+        loc_image = r"E:\assets\metro.png"
+
+        empty_subjects, empty_paths, empty_videos = resolve_h3_references(
+            inputs, {}, characters, location, loc_image
+        )
+        assert [s["name"] for s in empty_subjects] == ["Maya", "Metro Line"]
+        assert empty_paths == [r"E:\assets\maya.png", r"E:\assets\metro.png"]
+        assert empty_videos == []
+
+        subjects, paths, videos = resolve_h3_references(
+            inputs,
+            {
+                "148": r"E:\assets\maya.png",
+                "149": r"E:\assets\mercs.png",
+                "150": r"E:\assets\fight.mp4",
+            },
+            characters,
+            location,
+            loc_image,
+        )
+        assert subjects[0]["kind"] == "character"
+        assert subjects[0]["name"] == "Maya"
+        assert subjects[1]["kind"] == "reference"
+>       assert subjects[1]["name"] == "mercs"
+E       AssertionError: assert 'E:\\assets\\mercs' == 'mercs'
+E
+E         - mercs
+E         + E:\assets\mercs
+
+tests/test_h3_profile.py:215: AssertionError
+___________ test_preview_prompt_uses_form_references_not_story_cast ____________
+
+client = <starlette.testclient.TestClient object at 0x7f3b525d3830>
+monkeypatch = <_pytest.monkeypatch.MonkeyPatch object at 0x7f3b525d0c80>
+
+    def test_preview_prompt_uses_form_references_not_story_cast(client, monkeypatch):
+        """The Video-tab image and video slots are the prompt's subjects.
+
+        Story character + location text must not replace files the user picked,
+        and Regenerate (force) must not return a draft written before those files.
+        """
+        pid = _mk_project(client, "Preview refs")
+        scene = _add_scene(client, pid, 1, action="She swings the extinguisher.")
+        clip_id = _scene_default_clip(pid, scene["id"])
+
+        wf = {
+            "10": {
+                "class_type": "CLIPTextEncode",
+                "inputs": {"text": ""},
+                "_meta": {"title": "Main Prompt (Input:prompt)"},
+            },
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+            "150": {
+                "class_type": "LoadVideo",
+                "inputs": {"video": ""},
+                "_meta": {"title": "Motion (Input:video)"},
+            },
+        }
+        conn = get_db(settings.db_path)
+        try:
+            cur = conn.execute(
+                """
+                INSERT INTO workflows (name, kind, workflow_json, input_schema, output_schema,
+                                       prompt_profile, is_enabled)
+                VALUES (?, 'video', ?, '[]', '[]', 'minimax_h3_ref', 1)
+                """,
+                ("H3 refs", json.dumps(wf)),
+            )
+            wf_id = cur.lastrowid
+            char = conn.execute(
+                """
+                INSERT INTO characters (project_id, name, appearance, sheet_path)
+                VALUES (?, 'Maya', 'olive jacket', ?)
+                """,
+                (pid, r"E:\story\maya-sheet.png"),
+            )
+            conn.execute(
+                "INSERT INTO scene_characters (scene_id, character_id) VALUES (?, ?)",
+                (scene["id"], char.lastrowid),
+            )
+            loc = conn.execute(
+                """
+                INSERT INTO locations (project_id, name, description, reference_image_path)
+                VALUES (?, 'Metro Line', 'rain-slick rooftops', ?)
+                """,
+                (pid, r"E:\story\metro.png"),
+            )
+            conn.execute(
+                "UPDATE scenes SET location_id = ? WHERE id = ?",
+                (loc.lastrowid, scene["id"]),
+            )
+            conn.execute(
+                "UPDATE clips SET workflow_id = ? WHERE id = ?", (wf_id, clip_id)
+            )
+            conn.commit()
+        finally:
+            conn.close()
+
+        seen: dict = {}
+
+        async def fake_rewrite(scene_, subjects, **kwargs):
+            seen["subjects"] = subjects
+            seen["videos"] = kwargs.get("videos")
+            seen["calls"] = seen.get("calls", 0) + 1
+            return "REWRITE FROM REFS"
+
+        monkeypatch.setattr("calliope.agent.video_agent._h3_rewrite", fake_rewrite)
+
+        form = {
+            "148": r"E:\refs\hero.png",
+            "149": r"E:\refs\mercs.png",
+            "150": r"E:\refs\fight.mp4",
+        }
+        r = client.post(
+            f"/api/jobs/projects/{pid}/preview-prompt",
+            json={"clip_id": clip_id, "input_values": form},
+        )
+        assert r.status_code == 200
+        body = r.json()
+        assert body["prompt"] == "REWRITE FROM REFS"
+        assert body["from_draft"] is False
+        names = [s["name"] for s in seen["subjects"]]
+>       assert names == ["hero", "mercs"]
+E       AssertionError: assert ['E:\\refs\\h...\refs\\mercs'] == ['hero', 'mercs']
+E
+E         At index 0 diff: 'E:\\refs\\hero' != 'hero'
+E         Use -v to get more diff
+
+tests/test_scene_settings.py:487: AssertionError
+---------------------------- Captured stderr setup -----------------------------
+2026-10-21 20:00:31,702 | INFO | calliope | Calliope started — db=/tmp/multica-task-3084682389/tmpj2vinw90/calliope.db dry_run=True
+2026-10-21 20:00:31,702 | INFO | calliope.worker | Queue worker started
+------------------------------ Captured log setup ------------------------------
+INFO     calliope:main.py:112 Calliope started — db=/tmp/multica-task-3084682389/tmpj2vinw90/calliope.db dry_run=True
+INFO     calliope.worker:worker.py:79 Queue worker started
+----------------------------- Captured stderr call -----------------------------
+2026-10-21 20:00:31,707 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+2026-10-21 20:00:31,721 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects/1/scenes "HTTP/1.1 200 OK"
+2026-10-21 20:00:31,733 | INFO | httpx2 | HTTP Request: POST http://testserver/api/jobs/projects/1/preview-prompt "HTTP/1.1 200 OK"
+------------------------------ Captured log call -------------------------------
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects/1/scenes "HTTP/1.1 200 OK"
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/jobs/projects/1/preview-prompt "HTTP/1.1 200 OK"
+--------------------------- Captured stderr teardown ---------------------------
+2026-10-21 20:00:32,204 | INFO | calliope.worker | Queue worker stopped
+2026-10-21 20:00:32,204 | INFO | calliope | Calliope shutting down
+---------------------------- Captured log teardown -----------------------------
+INFO     calliope.worker:worker.py:185 Queue worker stopped
+INFO     calliope:main.py:118 Calliope shutting down
+_________________ test_script_regenerate_keeps_expanded_count __________________
+
+client = <starlette.testclient.TestClient object at 0x7f3b524d76b0>
+monkeypatch = <_pytest.monkeypatch.MonkeyPatch object at 0x7f3b525d2180>
+
+    def test_script_regenerate_keeps_expanded_count(client, monkeypatch):
+        calls: list[int] = []
+
+        async def fake_structured(messages, temperature=0.7):
+            user = messages[1]["content"]
+            # Parse required count from prompt
+            n = 4
+            for line in user.splitlines():
+                if line.startswith("required_scene_count:"):
+                    n = int(line.split(":", 1)[1].strip())
+                    break
+            calls.append(n)
+            return {
+                "scenes": [
+                    {
+                        "order_index": i,
+                        "heading": f"SCENE {i}",
+                        "action": f"action {i}",
+                        "dialog": "",
+                        "duration_sec": 5,
+                        "character_ids": [],
+                        "location_id": None,
+                    }
+                    for i in range(1, n + 1)
+                ]
+            }
+
+        monkeypatch.setattr("calliope.agent.script_agent.generate_structured", fake_structured)
+
+        r = client.post("/api/projects", json={"title": "Expand", "idea": "desert", "target_duration": "30 seconds"})
+        pid = r.json()["id"]
+
+        # Seed 4 scenes via generate
+        r = client.post(f"/api/projects/{pid}/generate-script", json={"replace": True})
+>       assert r.status_code == 200
+E       assert 500 == 200
+E        +  where 500 = <Response [500 Internal Server Error]>.status_code
+
+tests/test_script_scene_count.py:59: AssertionError
+---------------------------- Captured stderr setup -----------------------------
+2026-10-21 20:00:32,234 | INFO | calliope | Calliope started — db=/tmp/multica-task-3084682389/tmp2hqlzdiy/calliope.db dry_run=True
+2026-10-21 20:00:32,234 | INFO | calliope.worker | Queue worker started
+------------------------------ Captured log setup ------------------------------
+INFO     calliope:main.py:112 Calliope started — db=/tmp/multica-task-3084682389/tmp2hqlzdiy/calliope.db dry_run=True
+INFO     calliope.worker:worker.py:79 Queue worker started
+----------------------------- Captured stderr call -----------------------------
+2026-10-21 20:00:32,238 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+2026-10-21 20:00:32,264 | INFO | calliope.llm | LLM stream request to http://127.0.0.1:11434/v1/chat/completions with model llama3.2
+2026-10-21 20:00:32,266 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects/1/generate-script "HTTP/1.1 500 Internal Server Error"
+------------------------------ Captured log call -------------------------------
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+INFO     calliope.llm:llm.py:360 LLM stream request to http://127.0.0.1:11434/v1/chat/completions with model llama3.2
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects/1/generate-script "HTTP/1.1 500 Internal Server Error"
+--------------------------- Captured stderr teardown ---------------------------
+2026-10-21 20:00:32,735 | INFO | calliope.worker | Queue worker stopped
+2026-10-21 20:00:32,736 | INFO | calliope | Calliope shutting down
+---------------------------- Captured log teardown -----------------------------
+INFO     calliope.worker:worker.py:185 Queue worker stopped
+INFO     calliope:main.py:118 Calliope shutting down
+=============================== warnings summary ===============================
+../../aigc-home/calliope-backend/.venv/lib/python3.12/site-packages/starlette/testclient.py:53
+  /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/calliope-backend/.venv/lib/python3.12/site-packages/starlette/testclient.py:53: DeprecationWarning: The anyio.abc.BlockingPortal alias is deprecated, use anyio.from_thread.BlockingPortal instead.
+    _PortalFactoryType = Callable[[], AbstractContextManager[anyio.abc.BlockingPortal]]
+
+-- Docs: https://docs.pytest.org/en/stable/how-to/capture-warnings.html
+=========================== short test summary info ============================
+FAILED tests/test_agent_comfy_mcp.py::test_comfy_server_info_scoping - sqlite...
+FAILED tests/test_continuity.py::test_h3_messages_bind_neighbor_shots_and_keep_file_slots
+FAILED tests/test_h3_profile.py::test_resolve_h3_references_prefers_form_files_over_story
+FAILED tests/test_scene_settings.py::test_preview_prompt_uses_form_references_not_story_cast
+FAILED tests/test_script_scene_count.py::test_script_regenerate_keeps_expanded_count
+5 failed, 1 warning in 1.19s
diff --git a/docs/hel-728/baseline.md b/docs/hel-728/baseline.md
new file mode 100644
index 00000000..96869354
--- /dev/null
+++ b/docs/hel-728/baseline.md
@@ -0,0 +1,33 @@
+# HEL-728 B0 版本核实与回退记录
+
+核实日期：2026-10-21。服务器仅执行只读查询；未部署、重启服务或修改配置/数据。
+
+| 对象 | 精确版本 / 结论 |
+| --- | --- |
+| `origin/main` | `1fc8bdb8bb2a88ccace6f21a507fd77bcf22f532` |
+| `origin/deploy/hel-691` | `2b3bbf9`，是第五版的祖先，不是当前部署版本 |
+| `origin/feat/hel-665-refract`、PR #1 head | `35fd07af24e62add1f96f6a9c38e363f8e23d778` |
+| 当前测试站 | `DEPLOYED_REVISION` 标为第五版 `35fd07a`；前端 191 文件、后端 79 个 Python 文件逐项 SHA-256 全匹配该提交 |
+| 静态构建 | 当前 static 与 `stage-HEL665-v5-35fd07a-20261015/build` 全目录 `diff -qr` 无差异；两份 index.html 的 SHA-256 均为 `acd3ba6e0ab29b92f5133358398f3544baa0ce2bea03560004a42e812b6abc8a` |
+| PR #1 | https://gitea.xbay.cc/leefer/aigc-home/pulls/1 ：open、未合并、目标 main、head=35fd07a |
+| B0 底稿 | 从完整第五版另开 `feat/hel-728-night-foundation`，没有合并旧 PR 或更改 main |
+
+第五版领先 main 22 个提交、领先 deploy/hel-691 10 个提交。HEL-692、HEL-695 的实装和后续修复均在该祖先链上：从 aaddd3d 到 35fd07a 的创作草稿/端点归属、手动播放、智能体编辑成果、阶段建议与确认隔离保留。第五版也完整包含 HEL-681/682 批量导入和 HEL-684 生成结果回流。
+
+HEL-727 把两个 API 返回 422 作为部署版本依据的结论已由源码/发布包实证纠正。当前差异均已解释，没有以旧 deploy 分支覆盖后续工作。
+
+本任务专用检出初始 `git status --short` 为空，无未提交/未推送工作被覆盖。服务器应用目录不是 Git 检出，以全部源码哈希替代 git status 核实，没有发现与第五版不同的产品源码。已有 `.before-*` 和发布备份保留。未触碰其他任务私有工作区。
+
+本地保全引用：`backup/hel-728-main-1fc8bdb` 与 `backup/hel-728-v5-35fd07a`。完整证据见同目录 `server-audit.txt`、`server-backend.txt`、`backup-hashes.txt`。
+
+## 已存在的服务器备份
+
+目录 `/opt/aigc-home/releases`：
+
+- `formal-v5-35fd07a.tgz`：当前第五版发布包。
+- `backup-HEL665-v5-35fd07a-20261015.tgz`：部署第五版之前的静态页、前端源码、workbench 路由及版本标记。
+- `rollback-HEL665-v5-35fd07a-20261015.sh`：第五版回退脚本，旧源码/静态目录均仍存在。**此脚本会回到第五版之前，不能当成本批将来的回退脚本。**
+
+备份和脚本哈希已留档。本批尚未部署，因此当前站点无需回退。后续由总工部署 B0 时，须先重新核对当前源码/构建哈希及活动任务，并备份当前第五版，才能替换 B0 静态页、前端源码和新增的 app.html/themes.css。B0 回退应恢复这份第五版完整备份；无需数据库回退。本批无后端、数据迁移或用户配置改动。
+
+代码回退：以 `35fd07af24e62add1f96f6a9c38e363f8e23d778` 为基线重新构建第五版，或恢复总工部署前生成的完整备份。不要只切回 `deploy/hel-691`。
diff --git a/docs/hel-728/browser-results.json b/docs/hel-728/browser-results.json
new file mode 100644
index 00000000..a8f64a43
--- /dev/null
+++ b/docs/hel-728/browser-results.json
@@ -0,0 +1,49 @@
+{
+  "checks": [
+    "默认主题为夜片场",
+    "night 保留原编辑组件和正反向草稿",
+    "day 保留原编辑组件和正反向草稿",
+    "grade 保留原编辑组件和正反向草稿",
+    "bluehour 保留原编辑组件和正反向草稿",
+    "刷新恢复主题和草稿",
+    "方向键移动主题选项焦点",
+    "Esc 关闭并恢复入口焦点",
+    "创作台兼容入口保留全部参数及片段",
+    "隔离真实队列已收到任务",
+    "night 上传素材和运行中编辑状态保留",
+    "day 上传素材和运行中编辑状态保留",
+    "grade 上传素材和运行中编辑状态保留",
+    "bluehour 上传素材和运行中编辑状态保留",
+    "切主题后原任务完成且产物归属不变",
+    "切主题保留视频节点和暂停状态",
+    "切主题保留智能体任务输入组件和草稿",
+    "切主题保留未保存设置",
+    "1440,900 night 导航入口和四主题完整可见",
+    "1440,900 day 导航入口和四主题完整可见",
+    "1440,900 grade 导航入口和四主题完整可见",
+    "1440,900 bluehour 导航入口和四主题完整可见",
+    "1366,768 night 导航入口和四主题完整可见",
+    "1366,768 day 导航入口和四主题完整可见",
+    "1366,768 grade 导航入口和四主题完整可见",
+    "1366,768 bluehour 导航入口和四主题完整可见",
+    "1280,720 night 导航入口和四主题完整可见",
+    "1280,720 day 导航入口和四主题完整可见",
+    "1280,720 grade 导航入口和四主题完整可见",
+    "1280,720 bluehour 导航入口和四主题完整可见",
+    "模型连接入口保留页签参数",
+    "旧项目链接保留阶段参数",
+    "全局搜索保留 视频创作",
+    "全局搜索保留 大语言模型",
+    "全局搜索保留 试验台",
+    "全局搜索保留 三维搭景",
+    "night 首次绘制前恢复主题及底色",
+    "day 首次绘制前恢复主题及底色",
+    "grade 首次绘制前恢复主题及底色",
+    "bluehour 首次绘制前恢复主题及底色",
+    "存储被禁用仍可切换且显示提示",
+    "存储被禁用保留输入",
+    "无效存储回退夜片场",
+    "浏览器无运行错误"
+  ],
+  "errors": []
+}
\ No newline at end of file
diff --git a/docs/hel-728/build.log b/docs/hel-728/build.log
new file mode 100644
index 00000000..1db95a5d
--- /dev/null
+++ b/docs/hel-728/build.log
@@ -0,0 +1,264 @@
+
+> calliope-web@1.5.8 build
+> vite build
+
+vite v6.4.3 building SSR bundle for production...
+transforming...
+8:10:50 PM [vite-plugin-svelte] src/lib/components/workbench/ShotStagePanel.svelte:156:5 `<video>` elements must have a `<track kind="captions">`
+https://svelte.dev/e/a11y_media_has_caption
+154:         {#if shot.description}<p class="vshot-desc">{shot.description}</p>{/if}
+155:         {#if shot.job?.status === 'done' && shot.job.output}
+156:           <video
+                     ^
+157:             class="vshot-video"
+158:             src={assetUrl(shot.job.output) ?? undefined}
+"handleConnectionChange" and "handleAttributionWarning" are imported from external module "@xyflow/system" but never used in "node_modules/@xyflow/svelte/dist/lib/hooks/useNodeConnections.svelte.js", "node_modules/@xyflow/svelte/dist/lib/components/Handle/Handle.svelte" and "node_modules/@xyflow/svelte/dist/lib/components/Attribution/Attribution.svelte".
+✓ 533 modules transformed.
+rendering chunks...
+vite v6.4.3 building for production...
+transforming...
+8:10:53 PM [vite-plugin-svelte] src/lib/components/workbench/ShotStagePanel.svelte:156:5 `<video>` elements must have a `<track kind="captions">`
+https://svelte.dev/e/a11y_media_has_caption
+154:         {#if shot.description}<p class="vshot-desc">{shot.description}</p>{/if}
+155:         {#if shot.job?.status === 'done' && shot.job.output}
+156:           <video
+                     ^
+157:             class="vshot-video"
+158:             src={assetUrl(shot.job.output) ?? undefined}
+✓ 778 modules transformed.
+rendering chunks...
+computing gzip size...
+.svelte-kit/output/client/_app/version.json                                     0.03 kB │ gzip:   0.05 kB
+.svelte-kit/output/client/.vite/manifest.json                                  28.72 kB │ gzip:   3.35 kB
+.svelte-kit/output/client/_app/immutable/assets/reduceMotion.BrXLPzfy.css       0.08 kB │ gzip:   0.10 kB
+.svelte-kit/output/client/_app/immutable/assets/14.IyyrLGyK.css                 0.22 kB │ gzip:   0.15 kB
+.svelte-kit/output/client/_app/immutable/assets/6.C62bpzl4.css                  0.22 kB │ gzip:   0.15 kB
+.svelte-kit/output/client/_app/immutable/assets/Skeleton.BQeWIsLh.css           0.39 kB │ gzip:   0.22 kB
+.svelte-kit/output/client/_app/immutable/assets/SafeMedia.Cf_dgjFv.css          0.51 kB │ gzip:   0.31 kB
+.svelte-kit/output/client/_app/immutable/assets/EmptyState.BXjpyO2u.css         0.58 kB │ gzip:   0.31 kB
+.svelte-kit/output/client/_app/immutable/assets/Spinner.us8fwMZC.css            0.73 kB │ gzip:   0.37 kB
+.svelte-kit/output/client/_app/immutable/assets/ConfirmDialog.DOfiQL0c.css      0.91 kB │ gzip:   0.38 kB
+.svelte-kit/output/client/_app/immutable/assets/ProgressBar.DG8dH-U_.css        1.44 kB │ gzip:   0.58 kB
+.svelte-kit/output/client/_app/immutable/assets/22.ChQ8T8dK.css                 1.50 kB │ gzip:   0.56 kB
+.svelte-kit/output/client/_app/immutable/assets/20.D7w-Sx1Y.css                 1.66 kB │ gzip:   0.55 kB
+.svelte-kit/output/client/_app/immutable/assets/AgentPlanPanel.BMGRQZdH.css     2.24 kB │ gzip:   0.74 kB
+.svelte-kit/output/client/_app/immutable/assets/ImageLightbox.DN4QbnbA.css      2.55 kB │ gzip:   0.76 kB
+.svelte-kit/output/client/_app/immutable/assets/types.DUMMEwmy.css              4.86 kB │ gzip:   1.13 kB
+.svelte-kit/output/client/_app/immutable/assets/17.CdHWgDYY.css                 4.90 kB │ gzip:   1.33 kB
+.svelte-kit/output/client/_app/immutable/assets/AgentComposer.BhJ_F-aX.css      4.90 kB │ gzip:   1.31 kB
+.svelte-kit/output/client/_app/immutable/assets/18.D3s-Wa9z.css                 5.02 kB │ gzip:   1.31 kB
+.svelte-kit/output/client/_app/immutable/assets/WorkflowBay.CrZOCTCD.css        5.20 kB │ gzip:   1.40 kB
+.svelte-kit/output/client/_app/immutable/assets/AProjectCard.BhK9fW6H.css       5.39 kB │ gzip:   1.47 kB
+.svelte-kit/output/client/_app/immutable/assets/11.CpN-OyyL.css                 5.63 kB │ gzip:   1.45 kB
+.svelte-kit/output/client/_app/immutable/assets/8.BK-8H9u5.css                  9.05 kB │ gzip:   2.13 kB
+.svelte-kit/output/client/_app/immutable/assets/3.CxKDlY5x.css                  9.73 kB │ gzip:   2.04 kB
+.svelte-kit/output/client/_app/immutable/assets/AgentChat.C5wVAvmg.css         11.44 kB │ gzip:   2.53 kB
+.svelte-kit/output/client/_app/immutable/assets/13.DdkN80tf.css                11.76 kB │ gzip:   2.55 kB
+.svelte-kit/output/client/_app/immutable/assets/AppShell.Bk5S4WfJ.css          14.10 kB │ gzip:   3.27 kB
+.svelte-kit/output/client/_app/immutable/assets/5.DoWQHLuE.css                 15.17 kB │ gzip:   3.13 kB
+.svelte-kit/output/client/_app/immutable/assets/0.C2N0LW81.css                 19.69 kB │ gzip:   3.99 kB
+.svelte-kit/output/client/_app/immutable/assets/WorkflowLibrary.CN-_i5Sc.css   27.67 kB │ gzip:   4.81 kB
+.svelte-kit/output/client/_app/immutable/assets/4.BQ063dE_.css                 29.80 kB │ gzip:   5.74 kB
+.svelte-kit/output/client/_app/immutable/assets/7.B1E9ZlPG.css                 29.94 kB │ gzip:   5.07 kB
+.svelte-kit/output/client/_app/immutable/assets/21.BY02oOwl.css                30.01 kB │ gzip:   4.94 kB
+.svelte-kit/output/client/_app/immutable/assets/StudioDesk.DiLnYEIx.css        31.15 kB │ gzip:   6.17 kB
+.svelte-kit/output/client/_app/immutable/nodes/5.hx3kxUVa.js                    0.09 kB │ gzip:   0.10 kB
+.svelte-kit/output/client/_app/immutable/chunks/Bzak7iHL.js                     0.10 kB │ gzip:   0.10 kB
+.svelte-kit/output/client/_app/immutable/chunks/IKQcdn9t.js                     0.12 kB │ gzip:   0.12 kB
+.svelte-kit/output/client/_app/immutable/entry/start.BUwQ6lIJ.js                0.12 kB │ gzip:   0.11 kB
+.svelte-kit/output/client/_app/immutable/chunks/B0XwC4Ot.js                     0.15 kB │ gzip:   0.14 kB
+.svelte-kit/output/client/_app/immutable/chunks/BsCRBkET.js                     0.18 kB │ gzip:   0.16 kB
+.svelte-kit/output/client/_app/immutable/chunks/Sbfne8nC.js                     0.19 kB │ gzip:   0.17 kB
+.svelte-kit/output/client/_app/immutable/chunks/FwfFJvU_.js                     0.19 kB │ gzip:   0.16 kB
+.svelte-kit/output/client/_app/immutable/chunks/DEfCzHLx.js                     0.23 kB │ gzip:   0.18 kB
+.svelte-kit/output/client/_app/immutable/chunks/Ba1assjq.js                     0.26 kB │ gzip:   0.22 kB
+.svelte-kit/output/client/_app/immutable/nodes/16.sWMaj3Bi.js                   0.26 kB │ gzip:   0.23 kB
+.svelte-kit/output/client/_app/immutable/chunks/BXFzAH0P.js                     0.28 kB │ gzip:   0.18 kB
+.svelte-kit/output/client/_app/immutable/nodes/15.DYsaZg84.js                   0.29 kB │ gzip:   0.25 kB
+.svelte-kit/output/client/_app/immutable/chunks/CK7WZZfM.js                     0.31 kB │ gzip:   0.18 kB
+.svelte-kit/output/client/_app/immutable/nodes/12.CF9Zu6pN.js                   0.33 kB │ gzip:   0.27 kB
+.svelte-kit/output/client/_app/immutable/nodes/9.BVfZlOMu.js                    0.34 kB │ gzip:   0.28 kB
+.svelte-kit/output/client/_app/immutable/nodes/2.BDtoJguU.js                    0.37 kB │ gzip:   0.25 kB
+.svelte-kit/output/client/_app/immutable/chunks/BWaKaORA.js                     0.37 kB │ gzip:   0.26 kB
+.svelte-kit/output/client/_app/immutable/nodes/1.Bm5c1i2N.js                    0.40 kB │ gzip:   0.28 kB
+.svelte-kit/output/client/_app/immutable/nodes/10.DPw0t24L.js                   0.41 kB │ gzip:   0.26 kB
+.svelte-kit/output/client/_app/immutable/nodes/19.EN81mzhv.js                   0.41 kB │ gzip:   0.26 kB
+.svelte-kit/output/client/_app/immutable/chunks/6n2EhuN1.js                     0.46 kB │ gzip:   0.30 kB
+.svelte-kit/output/client/_app/immutable/chunks/DNKIhv1n.js                     0.47 kB │ gzip:   0.34 kB
+.svelte-kit/output/client/_app/immutable/chunks/BpBwGJjl.js                     0.49 kB │ gzip:   0.34 kB
+.svelte-kit/output/client/_app/immutable/chunks/-UyI9lYi.js                     0.51 kB │ gzip:   0.30 kB
+.svelte-kit/output/client/_app/immutable/chunks/D41pZ3kD.js                     0.56 kB │ gzip:   0.32 kB
+.svelte-kit/output/client/_app/immutable/chunks/5hKhZLI5.js                     0.62 kB │ gzip:   0.36 kB
+.svelte-kit/output/client/_app/immutable/chunks/BXakyGcx.js                     0.71 kB │ gzip:   0.43 kB
+.svelte-kit/output/client/_app/immutable/chunks/8OLyFVGd.js                     0.75 kB │ gzip:   0.42 kB
+.svelte-kit/output/client/_app/immutable/chunks/CN9eJxB2.js                     0.76 kB │ gzip:   0.42 kB
+.svelte-kit/output/client/_app/immutable/chunks/CNhvvmZJ.js                     0.83 kB │ gzip:   0.42 kB
+.svelte-kit/output/client/_app/immutable/chunks/DCtQckrV.js                     1.09 kB │ gzip:   0.62 kB
+.svelte-kit/output/client/_app/immutable/nodes/14.CvNq-suX.js                   1.09 kB │ gzip:   0.66 kB
+.svelte-kit/output/client/_app/immutable/nodes/6.BpRKot_7.js                    1.20 kB │ gzip:   0.71 kB
+.svelte-kit/output/client/_app/immutable/chunks/Dp1pzeXC.js                     1.27 kB │ gzip:   0.73 kB
+.svelte-kit/output/client/_app/immutable/chunks/wbPk3Yxo.js                     1.37 kB │ gzip:   0.66 kB
+.svelte-kit/output/client/_app/immutable/chunks/D3mdsp0g.js                     1.43 kB │ gzip:   0.66 kB
+.svelte-kit/output/client/_app/immutable/chunks/PEmPcvxY.js                     1.49 kB │ gzip:   0.78 kB
+.svelte-kit/output/client/_app/immutable/chunks/whH4D4QZ.js                     1.49 kB │ gzip:   0.75 kB
+.svelte-kit/output/client/_app/immutable/chunks/LuZC9yWf.js                     1.99 kB │ gzip:   1.05 kB
+.svelte-kit/output/client/_app/immutable/chunks/t712vir_.js                     2.24 kB │ gzip:   0.99 kB
+.svelte-kit/output/client/_app/immutable/nodes/20.COu3iy7d.js                   2.37 kB │ gzip:   1.38 kB
+.svelte-kit/output/client/_app/immutable/chunks/C5fjXKkg.js                     2.47 kB │ gzip:   1.12 kB
+.svelte-kit/output/client/_app/immutable/chunks/BPNbeFLK.js                     2.77 kB │ gzip:   1.28 kB
+.svelte-kit/output/client/_app/immutable/nodes/22.C5Nwx_zE.js                   2.92 kB │ gzip:   1.61 kB
+.svelte-kit/output/client/_app/immutable/chunks/CnYh2b86.js                     2.95 kB │ gzip:   1.24 kB
+.svelte-kit/output/client/_app/immutable/chunks/Bie-hupT.js                     3.08 kB │ gzip:   1.57 kB
+.svelte-kit/output/client/_app/immutable/chunks/DK7AMg8o.js                     3.23 kB │ gzip:   1.55 kB
+.svelte-kit/output/client/_app/immutable/chunks/DDlx89yg.js                     4.27 kB │ gzip:   1.51 kB
+.svelte-kit/output/client/_app/immutable/chunks/C1VtnVx0.js                     6.86 kB │ gzip:   3.09 kB
+.svelte-kit/output/client/_app/immutable/chunks/BFgrkAWo.js                     8.09 kB │ gzip:   3.27 kB
+.svelte-kit/output/client/_app/immutable/chunks/PWQRmEWD.js                    10.09 kB │ gzip:   2.31 kB
+.svelte-kit/output/client/_app/immutable/nodes/18.Dqn9lNj5.js                  10.20 kB │ gzip:   3.92 kB
+.svelte-kit/output/client/_app/immutable/chunks/CELneDUs.js                    10.41 kB │ gzip:   4.44 kB
+.svelte-kit/output/client/_app/immutable/nodes/0.B9UHNpdV.js                   11.98 kB │ gzip:   4.40 kB
+.svelte-kit/output/client/_app/immutable/entry/app.BgS0U9Aq.js                 12.58 kB │ gzip:   4.11 kB
+.svelte-kit/output/client/_app/immutable/chunks/StFt4UCs.js                    14.41 kB │ gzip:   5.54 kB
+.svelte-kit/output/client/_app/immutable/nodes/11.CYMf0Aop.js                  17.10 kB │ gzip:   6.44 kB
+.svelte-kit/output/client/_app/immutable/chunks/CHDY03l9.js                    17.32 kB │ gzip:   6.96 kB
+.svelte-kit/output/client/_app/immutable/chunks/CI5J-U9v.js                    17.44 kB │ gzip:   6.33 kB
+.svelte-kit/output/client/_app/immutable/nodes/3.lt50pTEv.js                   19.56 kB │ gzip:   6.87 kB
+.svelte-kit/output/client/_app/immutable/chunks/Cj6gCTdL.js                    20.25 kB │ gzip:   7.21 kB
+.svelte-kit/output/client/_app/immutable/nodes/8.c25p5xbs.js                   21.27 kB │ gzip:   7.28 kB
+.svelte-kit/output/client/_app/immutable/nodes/17.C8PkQczY.js                  23.50 kB │ gzip:   7.73 kB
+.svelte-kit/output/client/_app/immutable/chunks/Dmrd7xQR.js                    23.98 kB │ gzip:   9.32 kB
+.svelte-kit/output/client/_app/immutable/nodes/13.CGct_Wju.js                  24.87 kB │ gzip:   8.36 kB
+.svelte-kit/output/client/_app/immutable/chunks/CKnAzW_q.js                    36.67 kB │ gzip:  14.42 kB
+.svelte-kit/output/client/_app/immutable/chunks/BwCNePTm.js                    41.30 kB │ gzip:  15.68 kB
+.svelte-kit/output/client/_app/immutable/chunks/BR687OLR.js                    49.24 kB │ gzip:  17.84 kB
+.svelte-kit/output/client/_app/immutable/nodes/4.C6iXVhZu.js                   50.59 kB │ gzip:  17.70 kB
+.svelte-kit/output/client/_app/immutable/nodes/21.Cz9clG7U.js                  54.65 kB │ gzip:  15.14 kB
+.svelte-kit/output/client/_app/immutable/chunks/Bmp6xnce.js                    71.50 kB │ gzip:  26.91 kB
+.svelte-kit/output/client/_app/immutable/chunks/C5t8Nts6.js                    87.12 kB │ gzip:  27.47 kB
+.svelte-kit/output/client/_app/immutable/chunks/Bvurq_58.js                    92.46 kB │ gzip:  32.40 kB
+.svelte-kit/output/client/_app/immutable/nodes/7.D95zSIUA.js                  211.51 kB │ gzip:  68.00 kB
+.svelte-kit/output/client/_app/immutable/chunks/BQUFPnBP.js                   684.72 kB │ gzip: 180.05 kB
+.svelte-kit/output/client/_app/immutable/chunks/vMwlJ6hm.js                   774.61 kB │ gzip: 226.22 kB
+
+(!) Some chunks are larger than 500 kB after minification. Consider:
+- Using dynamic import() to code-split the application
+- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
+- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
+✓ built in 3.57s
+.svelte-kit/output/server/.vite/manifest.json                                  25.84 kB
+.svelte-kit/output/server/_app/immutable/assets/Icon.BrXLPzfy.css               0.08 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.C62bpzl4.css              0.22 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.IyyrLGyK.css              0.22 kB
+.svelte-kit/output/server/_app/immutable/assets/Skeleton.BQeWIsLh.css           0.39 kB
+.svelte-kit/output/server/_app/immutable/assets/SafeMedia.Cf_dgjFv.css          0.51 kB
+.svelte-kit/output/server/_app/immutable/assets/EmptyState.BXjpyO2u.css         0.58 kB
+.svelte-kit/output/server/_app/immutable/assets/Spinner.us8fwMZC.css            0.73 kB
+.svelte-kit/output/server/_app/immutable/assets/ConfirmDialog.C_pBcjz1.css      0.89 kB
+.svelte-kit/output/server/_app/immutable/assets/ProgressBar.DG8dH-U_.css        1.44 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.ChQ8T8dK.css              1.50 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.D7w-Sx1Y.css              1.66 kB
+.svelte-kit/output/server/_app/immutable/assets/AgentPlanPanel.BMGRQZdH.css     2.24 kB
+.svelte-kit/output/server/_app/immutable/assets/ImageLightbox.DhBJATfN.css      2.53 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.Bn3DGoQS.css              3.55 kB
+.svelte-kit/output/server/_app/immutable/assets/AgentComposer.JZyE_n9K.css      4.85 kB
+.svelte-kit/output/server/_app/immutable/assets/RefImageGrid.DUMMEwmy.css       4.86 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.D3s-Wa9z.css              5.02 kB
+.svelte-kit/output/server/_app/immutable/assets/WorkflowBay.CrZOCTCD.css        5.20 kB
+.svelte-kit/output/server/_app/immutable/assets/AProjectCard.BHJv_kAx.css       5.30 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.CpN-OyyL.css              5.63 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.u1ByS4kk.css              9.02 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.k-tm080m.css              9.35 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.CxKDlY5x.css              9.73 kB
+.svelte-kit/output/server/_app/immutable/assets/AgentChat.DGaLhJTa.css         11.41 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.CHFzkBke.css             11.66 kB
+.svelte-kit/output/server/_app/immutable/assets/AppShell.q20u3EwN.css          14.02 kB
+.svelte-kit/output/server/_app/immutable/assets/_layout.MRWQDt5E.css           19.46 kB
+.svelte-kit/output/server/_app/immutable/assets/WorkflowLibrary.QeU6Pxlx.css   27.65 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.BPi-Y6Y8.css             29.59 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.UfnkmHg7.css             29.89 kB
+.svelte-kit/output/server/_app/immutable/assets/_page.BY02oOwl.css             30.01 kB
+.svelte-kit/output/server/_app/immutable/assets/StudioDesk.y8URPnQJ.css        31.03 kB
+.svelte-kit/output/server/entries/pages/build-scene/_page.ts.js                 0.04 kB
+.svelte-kit/output/server/entries/pages/canvas/_page.ts.js                      0.04 kB
+.svelte-kit/output/server/entries/pages/canvas/_id_/_page.ts.js                 0.04 kB
+.svelte-kit/output/server/entries/pages/playground/_page.ts.js                  0.04 kB
+.svelte-kit/output/server/entries/pages/workflows/_page.ts.js                   0.04 kB
+.svelte-kit/output/server/entries/pages/_layout.ts.js                           0.06 kB
+.svelte-kit/output/server/entries/pages/agents/_page.ts.js                      0.08 kB
+.svelte-kit/output/server/entries/pages/library/_page.ts.js                     0.08 kB
+.svelte-kit/output/server/entries/pages/models/_page.ts.js                      0.08 kB
+.svelte-kit/output/server/entries/pages/settings/_page.ts.js                    0.08 kB
+.svelte-kit/output/server/entries/pages/workbench/_page.ts.js                   0.08 kB
+.svelte-kit/output/server/entries/pages/workbench/_id_/_page.ts.js              0.08 kB
+.svelte-kit/output/server/entries/pages/_page.ts.js                             0.12 kB
+.svelte-kit/output/server/entries/hooks.server.js                               0.13 kB
+.svelte-kit/output/server/entries/pages/projects/_page.ts.js                    0.21 kB
+.svelte-kit/output/server/chunks/index-server.js                                0.22 kB
+.svelte-kit/output/server/env.js                                                0.23 kB
+.svelte-kit/output/server/entries/pages/project/_id_/_page.ts.js                0.26 kB
+.svelte-kit/output/server/entries/pages/create/_page.ts.js                      0.30 kB
+.svelte-kit/output/server/chunks/client.js                                      0.31 kB
+.svelte-kit/output/server/entries/pages/model-connections/_page.ts.js           0.31 kB
+.svelte-kit/output/server/internal.js                                           0.35 kB
+.svelte-kit/output/server/entries/fallbacks/error.svelte.js                     0.35 kB
+.svelte-kit/output/server/chunks/state.svelte.js                                0.45 kB
+.svelte-kit/output/server/chunks/Skeleton.js                                    0.48 kB
+.svelte-kit/output/server/chunks/Spinner.js                                     0.52 kB
+.svelte-kit/output/server/entries/pages/canvas/_id_/_layout.svelte.js           0.55 kB
+.svelte-kit/output/server/entries/pages/image/_page.svelte.js                   0.55 kB
+.svelte-kit/output/server/entries/pages/video/_page.svelte.js                   0.55 kB
+.svelte-kit/output/server/chunks/index2.js                                      0.57 kB
+.svelte-kit/output/server/chunks/server.js                                      0.62 kB
+.svelte-kit/output/server/entries/pages/canvas/_page.svelte.js                  0.66 kB
+.svelte-kit/output/server/entries/pages/playground/_page.svelte.js              0.67 kB
+.svelte-kit/output/server/chunks/utils2.js                                      0.72 kB
+.svelte-kit/output/server/chunks/ids.js                                         0.77 kB
+.svelte-kit/output/server/chunks/Icon.svelte_svelte_type_style_lang.js          0.86 kB
+.svelte-kit/output/server/chunks/endpointKind.js                                0.95 kB
+.svelte-kit/output/server/chunks/createMutation.js                              1.02 kB
+.svelte-kit/output/server/chunks/EmptyState.js                                  1.10 kB
+.svelte-kit/output/server/chunks/toast.js                                       1.14 kB
+.svelte-kit/output/server/chunks/SafeMedia.js                                   1.65 kB
+.svelte-kit/output/server/chunks/ProgressBar.js                                 1.93 kB
+.svelte-kit/output/server/chunks/useUpload.svelte.js                            2.15 kB
+.svelte-kit/output/server/chunks/context.js                                     2.27 kB
+.svelte-kit/output/server/chunks/clone.js                                       2.33 kB
+.svelte-kit/output/server/chunks/takeDelete.svelte.js                           2.56 kB
+.svelte-kit/output/server/chunks/index3.js                                      2.77 kB
+.svelte-kit/output/server/entries/pages/workbench/_page.svelte.js               2.82 kB
+.svelte-kit/output/server/entries/pages/_layout.svelte.js                       3.08 kB
+.svelte-kit/output/server/chunks/ConfirmDialog.js                               3.25 kB
+.svelte-kit/output/server/entries/pages/workflows/_page.svelte.js               4.10 kB
+.svelte-kit/output/server/chunks/internal.js                                    4.19 kB
+.svelte-kit/output/server/chunks/exports.js                                     5.54 kB
+.svelte-kit/output/server/chunks/Icon.js                                        6.16 kB
+.svelte-kit/output/server/entries/pages/agents/_page.svelte.js                  8.49 kB
+.svelte-kit/output/server/chunks/AProjectCard.js                               10.17 kB
+.svelte-kit/output/server/entries/pages/tasks/_page.svelte.js                  13.41 kB
+.svelte-kit/output/server/entries/pages/settings/_page.svelte.js               15.31 kB
+.svelte-kit/output/server/entries/pages/_page.svelte.js                        18.29 kB
+.svelte-kit/output/server/entries/pages/library/_page.svelte.js                20.35 kB
+.svelte-kit/output/server/chunks/AppShell.svelte_svelte_type_style_lang.js     20.49 kB
+.svelte-kit/output/server/chunks/WorkflowBay.js                                20.80 kB
+.svelte-kit/output/server/chunks/RefImageGrid.js                               26.16 kB
+.svelte-kit/output/server/chunks/root.js                                       29.42 kB
+.svelte-kit/output/server/chunks/AgentComposer.js                              31.59 kB
+.svelte-kit/output/server/chunks/utils.js                                      34.14 kB
+.svelte-kit/output/server/entries/pages/models/_page.svelte.js                 36.45 kB
+.svelte-kit/output/server/remote-entry.js                                      36.81 kB
+.svelte-kit/output/server/chunks/AppShell.js                                   39.08 kB
+.svelte-kit/output/server/entries/pages/build-scene/_page.svelte.js            51.56 kB
+.svelte-kit/output/server/entries/pages/workbench/_id_/_page.svelte.js         52.95 kB
+.svelte-kit/output/server/chunks/index.js                                     101.49 kB
+.svelte-kit/output/server/chunks/StudioDesk.js                                113.69 kB
+.svelte-kit/output/server/index.js                                            130.14 kB
+.svelte-kit/output/server/entries/pages/canvas/_id_/_page.svelte.js           144.05 kB
+.svelte-kit/output/server/entries/pages/connections/_page.svelte.js           150.23 kB
+.svelte-kit/output/server/chunks/i18n.svelte.js                               846.64 kB
+✓ built in 6.69s
+
+Run npm run preview to preview your production build locally.
+
+> Using @sveltejs/adapter-static
+  Wrote site to "build"
+  ✔ done
diff --git a/docs/hel-728/changed-prettier.log b/docs/hel-728/changed-prettier.log
new file mode 100644
index 00000000..4aa0d16e
--- /dev/null
+++ b/docs/hel-728/changed-prettier.log
@@ -0,0 +1,2 @@
+Checking formatting...
+All matched files use Prettier code style!
diff --git a/docs/hel-728/check.log b/docs/hel-728/check.log
new file mode 100644
index 00000000..f1694a31
--- /dev/null
+++ b/docs/hel-728/check.log
@@ -0,0 +1,21 @@
+
+> calliope-web@1.5.8 check
+> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
+
+Loading svelte-check in workspace: /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/calliope-web
+Getting Svelte diagnostics...
+
+/home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte:156:6
+Warn: `<video>` elements must have a `<track kind="captions">`
+https://svelte.dev/e/a11y_media_has_caption (svelte)
+				{#if shot.job?.status === 'done' && shot.job.output}
+					<video
+						class="vshot-video"
+						src={assetUrl(shot.job.output) ?? undefined}
+						controls
+						preload="metadata"
+					></video>
+				{/if}
+
+====================================
+svelte-check found 0 errors and 1 warning in 1 file
diff --git a/docs/hel-728/eslint.log b/docs/hel-728/eslint.log
new file mode 100644
index 00000000..ad2320a9
--- /dev/null
+++ b/docs/hel-728/eslint.log
@@ -0,0 +1,15 @@
+
+Oops! Something went wrong! :(
+
+ESLint: 9.39.5
+
+ESLint couldn't find an eslint.config.(js|mjs|cjs) file.
+
+From ESLint v9.0.0, the default configuration file is now eslint.config.js.
+If you are using a .eslintrc.* file, please follow the migration guide
+to update your configuration file to the new format:
+
+https://eslint.org/docs/latest/use/configure/migration-guide
+
+If you still have problems after following the migration guide, please stop by
+https://eslint.org/chat/help to chat with the team.
diff --git a/docs/hel-728/frontend-test.log b/docs/hel-728/frontend-test.log
new file mode 100644
index 00000000..bcd44f23
--- /dev/null
+++ b/docs/hel-728/frontend-test.log
@@ -0,0 +1,51 @@
+
+> calliope-web@1.5.8 test
+> node scripts/check-storage-ssr.mjs && node scripts/check-random-uuid.mjs && node scripts/check-skill-frontmatter.mjs && node scripts/check-export-frame.mjs
+
+ok    method-less localStorage (Node SSR shape) degrades to null without throwing
+ok    absent localStorage degrades to null
+ok    throwing localStorage access degrades to null
+ok    setItem failure is swallowed
+ok    working storage round-trips and removes
+ok    no unsafe `typeof localStorage` guards in src/
+
+storage SSR checks passed.
+ok    insecure-context crypto (getRandomValues only) yields unique v4 UUIDs
+ok    method-less crypto degrades to unique best-effort ids without throwing
+ok    absent crypto degrades to unique best-effort ids without throwing
+ok    native randomUUID preferred when available
+ok    no direct `crypto.randomUUID()` calls in src/
+
+randomId insecure-context checks passed.
+ok    edit load strips the frontmatter block
+ok    edit load keeps the body
+ok    strip boundary is exact
+ok    strip is idempotent
+ok    second edit-save-reload adds no layer
+ok    plain body unchanged
+ok    page imports the shared strip helper
+ok    no \A-anchored strip regex left behind
+skill frontmatter checks passed.
+ok    first try is ~1 frame before the end, never the end itself
+ok    later tries step strictly further back
+ok    tries stay within ~1s of the end
+ok    short clip clamps to 0 without duplicates
+ok    unknown / zero duration falls back to t=0
+ok    base name from /api/file?path=…
+ok    base name from a Windows path
+ok    base name from a plain URL
+ok    unsafe characters are replaced
+ok    blob URL without a name falls back to 'video'
+ok    PNG name names the video, the tag and the frame time
+ok    spaces in the tag become dashes
+ok    fully transparent sample → empty
+ok    pure black → black
+ok    near-black encoder noise (16..18) → black
+ok    mid-grey picture → not blank
+ok    dim but visible picture (≈50) → not blank
+ok    dark night scene with a bright highlight → not blank
+ok    404 → not-found
+ok    403 → forbidden
+ok    500 → network
+ok    206 / 200 are not errors
+export-frame checks passed.
diff --git a/docs/hel-728/implementation.md b/docs/hel-728/implementation.md
new file mode 100644
index 00000000..5ec1f11c
--- /dev/null
+++ b/docs/hel-728/implementation.md
@@ -0,0 +1,13 @@
+# HEL-728 B0 实现说明
+
+以 HEL-716/726 确认附件和 HEL-727 模块边界为依据，只建设主题、导航与兼容基础；完整业务页面重排和动效分别留在 B1–B5。
+
+- `calliope-web/static/themes.css` 是四套语义颜色、字体、尺寸、圆角和特效 token 的唯一产品定义来源。取值直接来自 HEL-726 HTML；现有组件变量在此映射到语义变量，没有另设配色。作品控制、灯箱的固定深色保留。`routes/app.css` 保留公共组件与动效规则，已有金色/紫色按钮和光栅改为消费 token。
+- `src/app.html` 在绘制前验证 `aigc-theme`，失败回退夜片场；同步加载阻塞渲染的 themes.css，框架代码尚未执行时也有正确底色。`lib/theme.ts` 只改根元素属性，不改路由、不创建 QueryClient、不重建编辑器。写存储失败时继续本次切换，并明确提示；跨标签页存储事件同步主题。
+- `ThemeChoices.svelte` 在侧栏统一 Modal 和设置外观区复用，含四主题实时 token 预览、中文名/用途、方向键/Enter 操作。Esc/焦点返回复用既有 Modal。侧栏与主题选择适配三档桌面；减少动效沿用现有全局机制。
+- `shell/nav.ts` 为外壳和全局搜索提供单一导航定义。工作室/项目/创作台/智能体/画布/素材库，以及任务/工作流/模型连接按确认顺序组织。模型页与 ComfyUI 页面保留可见切换链接，原视频、试验台、三维搭景仍可从全局搜索到达。
+- `/create?kind=video`、`/model-connections?tab=llm` 是 B0 兼容入口，分别转到已有视频/LLM 页面；默认转到图片/ComfyUI 页面。后续页面未实现前不转向空页。原 `/image`、`/video`、`/connections`、`/models`、`/playground`、`/build-scene` 保持现有功能。
+- 修复既有 `/projects`、`/project/[id]` 的跳转参数丢失；新入口和旧项目入口保留查询及片段，项目来源、工作流、模式、提示词等不改写。设置的旧页签转向也保留原参数。
+- `design/nocturne` 保存已确认的 v1/v2 规范与 HTML，仅清除行尾空白；均为设计演示，未作为产品运行代码或假生成结果使用。
+
+B0 没有新增依赖、生成接口、主题测试副本、数据库变更、密钥或线上配置变更。已有页面局部硬编码视觉的全站替换与最终特效验收仍属于 B5，本批没有宣称完成全站重设计。
diff --git a/docs/hel-728/legacy-browser.log b/docs/hel-728/legacy-browser.log
new file mode 100644
index 00000000..01a85f82
--- /dev/null
+++ b/docs/hel-728/legacy-browser.log
@@ -0,0 +1,48 @@
+{"image_wf": 71, "video_wf": 72, "endpoint": "1c758e36-793b-4c11-8e08-c139bba68b02"}
+{'dual': 3, 'h3': 4, 'project': 6}
+RUN e2e/reference/check.cjs
+PASS 真实工作流显示正反向左右分栏
+PASS 工作流列表可应对超过 48 项
+PASS 列表搜索过滤真实元数据
+PASS 置顶不切换工作流、不清空草稿
+PASS 参数取消不改当前值
+PASS 参数保存应用到当前工作流
+PASS 真实生成请求提交且取得结果
+PASS 正反向与种子写入任务
+locator.click: Timeout 12000ms exceeded.
+Call log:
+  - waiting for locator('.result-item').first()
+
+    at /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/e2e/reference/check.cjs:146:45 {
+  log: [ "  - waiting for locator('.result-item').first()" ],
+  name: 'TimeoutError'
+}
+RUN e2e/reference/check-copy-fallback.cjs
+locator.waitFor: Timeout 15000ms exceeded.
+Call log:
+  - waiting for getByRole('button', { name: /编辑内容并带回项目/ }) to be visible
+
+    at /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/e2e/reference/check-copy-fallback.cjs:44:54 {
+  log: [
+    "  - waiting for getByRole('button', { name: /编辑内容并带回项目/ }) to be visible"
+  ],
+  name: 'TimeoutError'
+}
+RUN e2e/hel728.cjs
+PASS 默认主题为夜片场
+PASS night 保留原编辑组件和正反向草稿
+PASS day 保留原编辑组件和正反向草稿
+PASS grade 保留原编辑组件和正反向草稿
+PASS bluehour 保留原编辑组件和正反向草稿
+PASS 刷新恢复主题和草稿
+PASS 方向键移动主题选项焦点
+PASS Esc 关闭并恢复入口焦点
+locator.waitFor: Timeout 30000ms exceeded.
+Call log:
+  - waiting for locator('#desk-prompt') to be visible
+
+    at /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/e2e/hel728.cjs:23:74 {
+  log: [ "  - waiting for locator('#desk-prompt') to be visible" ],
+  name: 'TimeoutError'
+}
+FAILED SCRIPTS ['e2e/reference/check.cjs', 'e2e/reference/check-copy-fallback.cjs', 'e2e/hel728.cjs']
diff --git a/docs/hel-728/lint.log b/docs/hel-728/lint.log
new file mode 100644
index 00000000..ef4f45b2
--- /dev/null
+++ b/docs/hel-728/lint.log
@@ -0,0 +1,69 @@
+
+> calliope-web@1.5.8 lint
+> prettier --check . && eslint .
+
+Checking formatting...
+[warn] package-lock.json
+[warn] package.json
+[warn] scripts/check-storage-ssr.mjs
+[warn] src/hooks.client.ts
+[warn] src/hooks.server.ts
+[warn] src/lib/actions/spotlight.ts
+[warn] src/lib/agentComposer.ts
+[warn] src/lib/agentTasks.ts
+[warn] src/lib/assetPicker.ts
+[warn] src/lib/comfy/classifyInput.ts
+[warn] src/lib/comfy/parser.ts
+[warn] src/lib/comfy/promptInput.ts
+[warn] src/lib/comfy/resolution.ts
+[warn] src/lib/comfy/types.ts
+[warn] src/lib/comfy/useUpload.svelte.ts
+[warn] src/lib/components/agent/agentPalette.ts
+[warn] src/lib/components/generate/context.ts
+[warn] src/lib/components/generate/schema.ts
+[warn] src/lib/components/generate/takeDelete.svelte.ts
+[warn] src/lib/components/generate/takes.ts
+[warn] src/lib/components/ui/icons.ts
+[warn] src/lib/components/ui/modalLayers.ts
+[warn] src/lib/components/ui/README.md
+[warn] src/lib/dbtime.ts
+[warn] src/lib/durationBudget.ts
+[warn] src/lib/endpointKind.ts
+[warn] src/lib/events.ts
+[warn] src/lib/formOptions.ts
+[warn] src/lib/i18n.svelte.ts
+[warn] src/lib/i18n/de.ts
+[warn] src/lib/i18n/en.ts
+[warn] src/lib/i18n/es.ts
+[warn] src/lib/i18n/fr.ts
+[warn] src/lib/i18n/ja.ts
+[warn] src/lib/i18n/ko.ts
+[warn] src/lib/i18n/zh.ts
+[warn] src/lib/jobProgress.ts
+[warn] src/lib/jobStatus.ts
+[warn] src/lib/missingOutputs.svelte.ts
+[warn] src/lib/promptTemplates.ts
+[warn] src/lib/reduceMotion.svelte.ts
+[warn] src/lib/referenceAgent.ts
+[warn] src/lib/shot/api.ts
+[warn] src/lib/shot/calibration/compositionPresets.ts
+[warn] src/lib/shot/calibration/shotSolver.ts
+[warn] src/lib/shot/helpers/cameraUtils.ts
+[warn] src/lib/shot/helpers/jointConfig.ts
+[warn] src/lib/shot/helpers/mannequinFactory.ts
+[warn] src/lib/shot/helpers/mirror.ts
+[warn] src/lib/shot/helpers/posture.ts
+[warn] src/lib/shot/helpers/primitiveFactory.ts
+[warn] src/lib/shot/motion/sampleTrack.ts
+[warn] src/lib/shot/shotStore.svelte.ts
+[warn] src/lib/shot/types/mannequin-js.d.ts
+[warn] src/lib/storage.ts
+[warn] src/lib/toast.ts
+[warn] src/lib/wideLayout.ts
+[warn] src/routes/+layout.ts
+[warn] src/routes/+page.ts
+[warn] svelte.config.js
+[warn] tailwind.config.js
+[warn] tsconfig.json
+[warn] vite.config.ts
+[warn] Code style issues found in 63 files. Run Prettier with --write to fix.
diff --git a/docs/hel-728/pytest.log b/docs/hel-728/pytest.log
new file mode 100644
index 00000000..18b3675f
--- /dev/null
+++ b/docs/hel-728/pytest.log
@@ -0,0 +1,442 @@
+.................................F...................................... [  8%]
+........................................................................ [ 17%]
+........................................................................ [ 25%]
+........................................................................ [ 34%]
+..................................F..................................... [ 42%]
+........F............................................................... [ 51%]
+........................................................................ [ 59%]
+........................................................................ [ 68%]
+...F..........F......................................................... [ 76%]
+.........s.............................................................. [ 85%]
+........................................................................ [ 93%]
+sssss................................................                    [100%]
+=================================== FAILURES ===================================
+________________________ test_comfy_server_info_scoping ________________________
+
+    def test_comfy_server_info_scoping():
+        """Native health check stays visible in both blind and linked sessions."""
+        from calliope.agent.harness import tools as harness_tools
+
+        blind = ToolContext(session_id=1, project_id=None)
+        linked = ToolContext(session_id=1, project_id=99)
+
+>       blind_names = {e["function"]["name"] for e in harness_tools.openai_tools_payload(blind)}
+                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+tests/test_agent_comfy_mcp.py:370:
+_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
+src/calliope/agent/harness/tools.py:27: in openai_tools_payload
+    return _registry.openai_payload(ctx)
+           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/registry.py:219: in openai_payload
+    if self._visible(t, ctx)
+       ^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/registry.py:203: in _visible
+    if not user_allows_render(ctx):
+           ^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:156: in user_allows_render
+    if has_structured_approval(ctx, "render"):
+       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:277: in has_structured_approval
+    answer = latest_answer(ctx.session_id)
+             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+src/calliope/agent/harness/policy.py:260: in latest_answer
+    events = read_events(session_id)
+             ^^^^^^^^^^^^^^^^^^^^^^^
+_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
+
+session_id = 1
+
+    def read_events(session_id: int) -> list[SessionEvent]:
+        conn = _db()
+        try:
+>           rows = conn.execute(
+                "SELECT * FROM agent_events WHERE session_id = ? ORDER BY seq", (session_id,)
+            ).fetchall()
+E           sqlite3.OperationalError: no such table: agent_events
+
+src/calliope/agent/harness/log.py:146: OperationalError
+___________ test_h3_messages_bind_neighbor_shots_and_keep_file_slots ___________
+
+    def test_h3_messages_bind_neighbor_shots_and_keep_file_slots():
+        from calliope.agent.prompts import build_minimax_h3_ref_messages
+        from calliope.agent.video_agent import resolve_h3_references
+        from calliope.comfyui.parser import parse_dynamic_inputs
+
+        plan = {
+            "overview": {"style": "noir", "lighting": "sodium"},
+            "requirements": {"lighting": "sodium lamps only"},
+            "shots": [
+                {
+                    "clip_id": 1,
+                    "window": "00:00.000-00:04.000",
+                    "action": "enter",
+                    "camera": "push in",
+                    "lighting": "dim sodium",
+                    "speakers": "MAYA: hello",
+                    "spatial": "screen left",
+                    "state_after": "door open",
+                },
+                {
+                    "clip_id": 2,
+                    "window": "00:04.000-00:08.000",
+                    "action": "turn",
+                    "camera": "hold",
+                    "lighting": "dim sodium",
+                    "speakers": "",
+                    "spatial": "screen left",
+                    "state_after": "",
+                },
+                {
+                    "clip_id": 3,
+                    "window": "00:08.000-00:12.000",
+                    "action": "leave",
+                    "camera": "pull out",
+                    "lighting": "brighter",
+                    "speakers": "",
+                    "spatial": "",
+                    "state_after": "hallway empty",
+                },
+            ],
+        }
+        lock = continuity_lock_text(plan, 2)
+        assert "Previous shot" in lock
+        assert "Next shot" in lock
+        assert "Do not recast a subject" in lock
+        assert "screen direction" in lock
+        assert "enter" in lock and "leave" in lock
+
+        scene = {"heading": "INT. HALL", "action": "She turns.", "duration_sec": 4, "dialog": ""}
+        subjects = [
+            {
+                "index": 1,
+                "kind": "reference",
+                "name": "mercs",
+                "appearance": "",
+                "path": r"E:\assets\mercs.png",
+            }
+        ]
+        messages = build_minimax_h3_ref_messages(scene, subjects, continuity=lock)
+        text = messages[1]["content"]
+        assert "Previous shot" in text
+        assert "Next shot" in text
+        assert "screen direction" in text
+        assert "do not substitute another character or location" in text
+
+        workflow = {
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+        }
+        inputs = parse_dynamic_inputs(workflow)
+        resolved, paths, _videos = resolve_h3_references(
+            inputs,
+            {"148": r"E:\assets\hero.png", "149": r"E:\assets\mercs.png"},
+            [{"name": "Maya", "appearance": "olive jacket", "sheet_path": r"E:\assets\maya.png"}],
+            {"name": "Metro Line", "description": "rain-slick rooftops"},
+            r"E:\assets\metro.png",
+        )
+>       assert resolved[1]["name"] == "mercs"
+E       AssertionError: assert 'E:\\assets\\mercs' == 'mercs'
+E
+E         - mercs
+E         + E:\assets\mercs
+
+tests/test_continuity.py:249: AssertionError
+___________ test_resolve_h3_references_prefers_form_files_over_story ___________
+
+    def test_resolve_h3_references_prefers_form_files_over_story():
+        """Slot files the user picked replace the story cast; empty slots keep it."""
+        from calliope.agent.video_agent import resolve_h3_references
+        from calliope.comfyui.parser import parse_dynamic_inputs
+
+        workflow = {
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+            "150": {
+                "class_type": "LoadVideo",
+                "inputs": {"video": ""},
+                "_meta": {"title": "Motion (Input:video)"},
+            },
+        }
+        inputs = parse_dynamic_inputs(workflow)
+        characters = [
+            {
+                "name": "Maya",
+                "appearance": "olive jacket",
+                "sheet_path": r"E:\assets\maya.png",
+            }
+        ]
+        location = {"name": "Metro Line", "description": "rain-slick rooftops"}
+        loc_image = r"E:\assets\metro.png"
+
+        empty_subjects, empty_paths, empty_videos = resolve_h3_references(
+            inputs, {}, characters, location, loc_image
+        )
+        assert [s["name"] for s in empty_subjects] == ["Maya", "Metro Line"]
+        assert empty_paths == [r"E:\assets\maya.png", r"E:\assets\metro.png"]
+        assert empty_videos == []
+
+        subjects, paths, videos = resolve_h3_references(
+            inputs,
+            {
+                "148": r"E:\assets\maya.png",
+                "149": r"E:\assets\mercs.png",
+                "150": r"E:\assets\fight.mp4",
+            },
+            characters,
+            location,
+            loc_image,
+        )
+        assert subjects[0]["kind"] == "character"
+        assert subjects[0]["name"] == "Maya"
+        assert subjects[1]["kind"] == "reference"
+>       assert subjects[1]["name"] == "mercs"
+E       AssertionError: assert 'E:\\assets\\mercs' == 'mercs'
+E
+E         - mercs
+E         + E:\assets\mercs
+
+tests/test_h3_profile.py:215: AssertionError
+___________ test_preview_prompt_uses_form_references_not_story_cast ____________
+
+client = <starlette.testclient.TestClient object at 0x7ff7be3182c0>
+monkeypatch = <_pytest.monkeypatch.MonkeyPatch object at 0x7ff7bc9b2180>
+
+    def test_preview_prompt_uses_form_references_not_story_cast(client, monkeypatch):
+        """The Video-tab image and video slots are the prompt's subjects.
+
+        Story character + location text must not replace files the user picked,
+        and Regenerate (force) must not return a draft written before those files.
+        """
+        pid = _mk_project(client, "Preview refs")
+        scene = _add_scene(client, pid, 1, action="She swings the extinguisher.")
+        clip_id = _scene_default_clip(pid, scene["id"])
+
+        wf = {
+            "10": {
+                "class_type": "CLIPTextEncode",
+                "inputs": {"text": ""},
+                "_meta": {"title": "Main Prompt (Input:prompt)"},
+            },
+            "148": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 1 (Input:image)"},
+            },
+            "149": {
+                "class_type": "LoadImage",
+                "inputs": {"image": ""},
+                "_meta": {"title": "Ref 2 (Input:image)"},
+            },
+            "150": {
+                "class_type": "LoadVideo",
+                "inputs": {"video": ""},
+                "_meta": {"title": "Motion (Input:video)"},
+            },
+        }
+        conn = get_db(settings.db_path)
+        try:
+            cur = conn.execute(
+                """
+                INSERT INTO workflows (name, kind, workflow_json, input_schema, output_schema,
+                                       prompt_profile, is_enabled)
+                VALUES (?, 'video', ?, '[]', '[]', 'minimax_h3_ref', 1)
+                """,
+                ("H3 refs", json.dumps(wf)),
+            )
+            wf_id = cur.lastrowid
+            char = conn.execute(
+                """
+                INSERT INTO characters (project_id, name, appearance, sheet_path)
+                VALUES (?, 'Maya', 'olive jacket', ?)
+                """,
+                (pid, r"E:\story\maya-sheet.png"),
+            )
+            conn.execute(
+                "INSERT INTO scene_characters (scene_id, character_id) VALUES (?, ?)",
+                (scene["id"], char.lastrowid),
+            )
+            loc = conn.execute(
+                """
+                INSERT INTO locations (project_id, name, description, reference_image_path)
+                VALUES (?, 'Metro Line', 'rain-slick rooftops', ?)
+                """,
+                (pid, r"E:\story\metro.png"),
+            )
+            conn.execute(
+                "UPDATE scenes SET location_id = ? WHERE id = ?",
+                (loc.lastrowid, scene["id"]),
+            )
+            conn.execute(
+                "UPDATE clips SET workflow_id = ? WHERE id = ?", (wf_id, clip_id)
+            )
+            conn.commit()
+        finally:
+            conn.close()
+
+        seen: dict = {}
+
+        async def fake_rewrite(scene_, subjects, **kwargs):
+            seen["subjects"] = subjects
+            seen["videos"] = kwargs.get("videos")
+            seen["calls"] = seen.get("calls", 0) + 1
+            return "REWRITE FROM REFS"
+
+        monkeypatch.setattr("calliope.agent.video_agent._h3_rewrite", fake_rewrite)
+
+        form = {
+            "148": r"E:\refs\hero.png",
+            "149": r"E:\refs\mercs.png",
+            "150": r"E:\refs\fight.mp4",
+        }
+        r = client.post(
+            f"/api/jobs/projects/{pid}/preview-prompt",
+            json={"clip_id": clip_id, "input_values": form},
+        )
+        assert r.status_code == 200
+        body = r.json()
+        assert body["prompt"] == "REWRITE FROM REFS"
+        assert body["from_draft"] is False
+        names = [s["name"] for s in seen["subjects"]]
+>       assert names == ["hero", "mercs"]
+E       AssertionError: assert ['E:\\refs\\h...\refs\\mercs'] == ['hero', 'mercs']
+E
+E         At index 0 diff: 'E:\\refs\\hero' != 'hero'
+E         Use -v to get more diff
+
+tests/test_scene_settings.py:487: AssertionError
+---------------------------- Captured stderr setup -----------------------------
+2026-10-21 19:58:18,478 | INFO | calliope | Calliope started — db=/tmp/multica-task-3084682389/tmp_95dfjk4/calliope.db dry_run=True
+2026-10-21 19:58:18,478 | INFO | calliope.worker | Queue worker started
+------------------------------ Captured log setup ------------------------------
+INFO     calliope:main.py:112 Calliope started — db=/tmp/multica-task-3084682389/tmp_95dfjk4/calliope.db dry_run=True
+INFO     calliope.worker:worker.py:79 Queue worker started
+----------------------------- Captured stderr call -----------------------------
+2026-10-21 19:58:18,482 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+2026-10-21 19:58:18,495 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects/1/scenes "HTTP/1.1 200 OK"
+2026-10-21 19:58:18,506 | INFO | httpx2 | HTTP Request: POST http://testserver/api/jobs/projects/1/preview-prompt "HTTP/1.1 200 OK"
+------------------------------ Captured log call -------------------------------
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects/1/scenes "HTTP/1.1 200 OK"
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/jobs/projects/1/preview-prompt "HTTP/1.1 200 OK"
+--------------------------- Captured stderr teardown ---------------------------
+2026-10-21 19:58:18,980 | INFO | calliope.worker | Queue worker stopped
+2026-10-21 19:58:18,980 | INFO | calliope | Calliope shutting down
+---------------------------- Captured log teardown -----------------------------
+INFO     calliope.worker:worker.py:185 Queue worker stopped
+INFO     calliope:main.py:118 Calliope shutting down
+_________________ test_script_regenerate_keeps_expanded_count __________________
+
+client = <starlette.testclient.TestClient object at 0x7ff7bd902660>
+monkeypatch = <_pytest.monkeypatch.MonkeyPatch object at 0x7ff7bc9b2180>
+
+    def test_script_regenerate_keeps_expanded_count(client, monkeypatch):
+        calls: list[int] = []
+
+        async def fake_structured(messages, temperature=0.7):
+            user = messages[1]["content"]
+            # Parse required count from prompt
+            n = 4
+            for line in user.splitlines():
+                if line.startswith("required_scene_count:"):
+                    n = int(line.split(":", 1)[1].strip())
+                    break
+            calls.append(n)
+            return {
+                "scenes": [
+                    {
+                        "order_index": i,
+                        "heading": f"SCENE {i}",
+                        "action": f"action {i}",
+                        "dialog": "",
+                        "duration_sec": 5,
+                        "character_ids": [],
+                        "location_id": None,
+                    }
+                    for i in range(1, n + 1)
+                ]
+            }
+
+        monkeypatch.setattr("calliope.agent.script_agent.generate_structured", fake_structured)
+
+        r = client.post("/api/projects", json={"title": "Expand", "idea": "desert", "target_duration": "30 seconds"})
+        pid = r.json()["id"]
+
+        # Seed 4 scenes via generate
+        r = client.post(f"/api/projects/{pid}/generate-script", json={"replace": True})
+>       assert r.status_code == 200
+E       assert 500 == 200
+E        +  where 500 = <Response [500 Internal Server Error]>.status_code
+
+tests/test_script_scene_count.py:59: AssertionError
+---------------------------- Captured stderr setup -----------------------------
+2026-10-21 19:58:19,584 | INFO | calliope | Calliope started — db=/tmp/multica-task-3084682389/tmpl0t0r_mx/calliope.db dry_run=True
+2026-10-21 19:58:19,584 | INFO | calliope.worker | Queue worker started
+------------------------------ Captured log setup ------------------------------
+INFO     calliope:main.py:112 Calliope started — db=/tmp/multica-task-3084682389/tmpl0t0r_mx/calliope.db dry_run=True
+INFO     calliope.worker:worker.py:79 Queue worker started
+----------------------------- Captured stderr call -----------------------------
+2026-10-21 19:58:19,588 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+2026-10-21 19:58:19,604 | INFO | calliope.llm | LLM stream request to http://127.0.0.1:11434/v1/chat/completions with model llama3.2
+2026-10-21 19:58:19,606 | INFO | httpx2 | HTTP Request: POST http://testserver/api/projects/1/generate-script "HTTP/1.1 500 Internal Server Error"
+------------------------------ Captured log call -------------------------------
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects "HTTP/1.1 200 OK"
+INFO     calliope.llm:llm.py:360 LLM stream request to http://127.0.0.1:11434/v1/chat/completions with model llama3.2
+INFO     httpx2:_client.py:1085 HTTP Request: POST http://testserver/api/projects/1/generate-script "HTTP/1.1 500 Internal Server Error"
+--------------------------- Captured stderr teardown ---------------------------
+2026-10-21 19:58:20,086 | INFO | calliope.worker | Queue worker stopped
+2026-10-21 19:58:20,086 | INFO | calliope | Calliope shutting down
+---------------------------- Captured log teardown -----------------------------
+INFO     calliope.worker:worker.py:185 Queue worker stopped
+INFO     calliope:main.py:118 Calliope shutting down
+=============================== warnings summary ===============================
+.venv/lib/python3.12/site-packages/starlette/testclient.py:53
+  /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/calliope-backend/.venv/lib/python3.12/site-packages/starlette/testclient.py:53: DeprecationWarning: The anyio.abc.BlockingPortal alias is deprecated, use anyio.from_thread.BlockingPortal instead.
+    _PortalFactoryType = Callable[[], AbstractContextManager[anyio.abc.BlockingPortal]]
+
+tests/test_shell_tool.py::test_settings_roundtrip_for_new_keys
+  /home/xiaomo/multica_workspaces/hello-af23464d222e/hel-728-a07b128af8f7/workdir/aigc-home/calliope-backend/.venv/lib/python3.12/site-packages/_pytest/unraisableexception.py:67: PytestUnraisableExceptionWarning: Exception ignored in: <function BaseSubprocessTransport.__del__ at 0x7ff7c055cb80>
+
+  Traceback (most recent call last):
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/base_subprocess.py", line 126, in __del__
+      self.close()
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/base_subprocess.py", line 104, in close
+      proto.pipe.close()
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/unix_events.py", line 568, in close
+      self._close(None)
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/unix_events.py", line 592, in _close
+      self._loop.call_soon(self._call_connection_lost, exc)
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/base_events.py", line 799, in call_soon
+      self._check_closed()
+    File "/home/xiaomo/.local/share/uv/python/cpython-3.12.14-linux-x86_64-gnu/lib/python3.12/asyncio/base_events.py", line 545, in _check_closed
+      raise RuntimeError('Event loop is closed')
+  RuntimeError: Event loop is closed
+
+  Enable tracemalloc to get traceback where the object was allocated.
+  See https://docs.pytest.org/en/stable/how-to/capture-warnings.html#resource-warnings for more info.
+    warnings.warn(pytest.PytestUnraisableExceptionWarning(msg))
+
+-- Docs: https://docs.pytest.org/en/stable/how-to/capture-warnings.html
+=========================== short test summary info ============================
+FAILED tests/test_agent_comfy_mcp.py::test_comfy_server_info_scoping - sqlite...
+FAILED tests/test_continuity.py::test_h3_messages_bind_neighbor_shots_and_keep_file_slots
+FAILED tests/test_h3_profile.py::test_resolve_h3_references_prefers_form_files_over_story
+FAILED tests/test_scene_settings.py::test_preview_prompt_uses_form_references_not_story_cast
+FAILED tests/test_script_scene_count.py::test_script_regenerate_keeps_expanded_count
+5 failed, 834 passed, 6 skipped, 2 warnings in 368.55s (0:06:08)
diff --git a/docs/hel-728/server-audit.txt b/docs/hel-728/server-audit.txt
new file mode 100644
index 00000000..309cca94
--- /dev/null
+++ b/docs/hel-728/server-audit.txt
@@ -0,0 +1,201 @@
+feat/hel-665-refract @ 35fd07a (v5 formal interfaces; stage advice API; user database/config unchanged; demos retained; rollback /opt/aigc-home/releases/rollback-HEL665-v5-35fd07a-20261015.sh)
+total 64
+drwxr-xr-x  4 root  root   4096 Oct 15 00:33 .
+drwxr-xr-x 10 root  root  12288 Oct 15 00:33 ..
+drwxrwxr-x  6 mobai mobai  4096 Oct 15 00:33 build
+drwxrwxr-x  4 mobai mobai  4096 Oct 10 20:35 src
+-rw-rw-r--  1 mobai mobai 40144 Oct 15 00:13 workbench.py
+6864465552ed31ae9179bf6cb8b45bc7df4e43b1b5d452abaa04007346cfa50c  /opt/aigc-home/app/calliope-web/src/app.html
+9fcd4c28d99551f12eebc3e58d2d2e715a2d2fae91315078e25ad301a3fe0101  /opt/aigc-home/app/calliope-web/src/hooks.client.ts
+016119d7d2f2f77dee4441ce8c0e0c337461775be19589ab25eb8e6d93d9325b  /opt/aigc-home/app/calliope-web/src/hooks.server.ts
+90ef4a1441f5ea1b9b1191dcd90bdedfad038a834393860071f4ac658217234a  /opt/aigc-home/app/calliope-web/src/lib/actions/spotlight.ts
+b73c6e2c597d2ee06071c279ea7f51b8318702ec09617a29361d906fd72e3f12  /opt/aigc-home/app/calliope-web/src/lib/agentComposer.ts
+f5b7e10ecef0822206220c8c2827740c3e35254ca92ce130d52a786945dc3af8  /opt/aigc-home/app/calliope-web/src/lib/agentTasks.ts
+859129cc60fab17c6104f82c82eb0dc42322d9f81fb8b210ba4ff5aace234e4a  /opt/aigc-home/app/calliope-web/src/lib/api.ts
+53fa1c405c185b2ec07cd379011dde429de28c965a8d7e21771e1a5b21e3e79c  /opt/aigc-home/app/calliope-web/src/lib/assetPicker.ts
+b0adfec622f00ee5dbe1f786c9d487229ddb33eb2077e2166bd7b391c0d32d6c  /opt/aigc-home/app/calliope-web/src/lib/canvas/ArtifactNode.svelte
+4d76e5fd32270d79be2814c2bd6b9ba19f1c3e5319133d915966052ecc92f6f3  /opt/aigc-home/app/calliope-web/src/lib/canvas/EntityNode.svelte
+8bc6d779cdfc98885b5203dabdca38999e12e9d503dfd6d7cd8452162b0bd78e  /opt/aigc-home/app/calliope-web/src/lib/comfy/classifyInput.ts
+b0a8e133e68635ba08f700c23196a7ba9524d510ac5d28d8aa674cf18c21bd70  /opt/aigc-home/app/calliope-web/src/lib/comfy/imageFile.ts
+e8372ec223a04e4aef7af92cbe11656acc1339bfbc6029876efb4495efac60b1  /opt/aigc-home/app/calliope-web/src/lib/comfy/parser.ts
+233160c907bcf7a6b3a6d78d5500cecdf2e0a14dbd67b2f7a63555f721106c91  /opt/aigc-home/app/calliope-web/src/lib/comfy/promptInput.ts
+4cbfcb95e28e2d5061614977831b2a9fe1c82449ab9ed5b692d963e1d99f6505  /opt/aigc-home/app/calliope-web/src/lib/comfy/resolution.ts
+0edcc73d9a03a38804032b8799705f85d5a8560838ddbafd33651ea167a354c6  /opt/aigc-home/app/calliope-web/src/lib/comfy/types.ts
+aa91e6d36c34dd9a5246fff3c24e4b437dccb8f9c55141959a9b1df0639205b9  /opt/aigc-home/app/calliope-web/src/lib/comfy/useUpload.svelte.ts
+3722615c86e150d61fee60b287cc66fc1ff5f32c4a13e55f7f2e4ec6e3b7e95c  /opt/aigc-home/app/calliope-web/src/lib/components/AppHeader.svelte
+b6844910420c977167b7beee5afa6ee3f649a74bd6e8128ced432e3a51079e57  /opt/aigc-home/app/calliope-web/src/lib/components/AttachToProject.svelte
+70b01844b1b8bb3c1c79e49aa61d3a37fe93ccf30c1f28a1e05867efa8f58582  /opt/aigc-home/app/calliope-web/src/lib/components/ComfyDynamicForm.svelte
+b67433cd628d0507665fdd594bbf38ba366cb71cf6e1bcf32c8be05cbc8bddc5  /opt/aigc-home/app/calliope-web/src/lib/components/GeneratingOverlay.svelte
+6675bd98205aa274938874dba40e4c95f0f871b9ea29433cb5edf207a8963a3d  /opt/aigc-home/app/calliope-web/src/lib/components/ImageLightbox.svelte
+37fb771f258dd4dfe7b4c1738b84ea6aa74cd35508505c0c03bbb2121226c4ac  /opt/aigc-home/app/calliope-web/src/lib/components/LanguageSwitcher.svelte
+4552e1fd1972a55b7267949fe6f6ce57e18b0c500698e2f919562a77b3ffa636  /opt/aigc-home/app/calliope-web/src/lib/components/OmniComposer.svelte
+d53835230e1d584e59c98f5b6aa965b605ab73011f33eac61a0a0e44158b6d0b  /opt/aigc-home/app/calliope-web/src/lib/components/SafeMedia.svelte
+4becfa6663461e91602b74322f9807aedd403522ccd54603c66b80b872363953  /opt/aigc-home/app/calliope-web/src/lib/components/ToastHost.svelte
+d744fc2278a627ddb329a0ba9c86b80905d09e58a476297a35c4c77874c35b07  /opt/aigc-home/app/calliope-web/src/lib/components/WorkflowImportDrawer.svelte
+a75f0602d09cf72d6821a69be537cfda284ff589a9f5452e7ed8dd64337b7bd4  /opt/aigc-home/app/calliope-web/src/lib/components/WorkflowTestDialog.svelte
+52d9b005c65f6d83ef7ead5caa81dc61058a7049c29779b76d01979361c480b7  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentArtifactCard.svelte
+075ab299124430e41ca9ab1e314d3e616dd0fbdc9e36cf92cd7b0479fdd493f4  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentChat.svelte
+74545d012fa615b92d69ce6c5b660d4f61ba2501fe593a3cb92fd8df40136df6  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentComposer.svelte
+abc7741fd784affd82a7a38b2d10d1714b77170da866cf2ea89ced3d43bfaa46  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentPlanPanel.svelte
+3b87fdf4e8f2077cf0407bb2eadc418ca9e8aa4e781640b58ff9d88df73fc67f  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentSessionSidebar.svelte
+c1af4f03f60b8c677253c804316bfbc9629eb78d9846b5cff7d574befa1216e6  /opt/aigc-home/app/calliope-web/src/lib/components/agent/AgentToolCard.svelte
+932dcf780eec9d3f294bf90dbb04d25098b4a8c36a31113a7bb10162251c1e4e  /opt/aigc-home/app/calliope-web/src/lib/components/agent/ReasoningPanel.svelte
+6dfc7d0b3a2372e3dd5213c48a7e5c6a7c2bb109c7fe102b9ddfab8f42217e77  /opt/aigc-home/app/calliope-web/src/lib/components/agent/WorkflowMentionMenu.svelte
+a84cf30f6cf6356c09b2623201e1f099f2843408553c724f76e362f5d844d2f7  /opt/aigc-home/app/calliope-web/src/lib/components/agent/agentPalette.ts
+770c0feb2009286ebdc455228a67117a80f94f58e4728475c17c57d968910f4c  /opt/aigc-home/app/calliope-web/src/lib/components/desk/Artboard.svelte
+fe8483c2f5a4fdf9df112f0feae1d3170162b5c0fbf5bae73c1b6cc3126f2a31  /opt/aigc-home/app/calliope-web/src/lib/components/desk/DeskWorkflowRail.svelte
+f445d83de06804f132680eab34a6412444f1885a67a1aa832e62307f649ddaf3  /opt/aigc-home/app/calliope-web/src/lib/components/desk/InputRequirementBadge.svelte
+da087b4e93feeee3def4bafdf0ac931630fcd5b87b2293c4102e9b090eb3734f  /opt/aigc-home/app/calliope-web/src/lib/components/desk/LibraryFilters.svelte
+cbdad9bfe085513184e2c30aefabaa92dbef38de4cbf2af763e2f74ad29e75e3  /opt/aigc-home/app/calliope-web/src/lib/components/desk/LibraryRow.svelte
+28583dfa4bcd6e605d3ba41ac889fdbd29d592949153a93bdd3670246a0a33cc  /opt/aigc-home/app/calliope-web/src/lib/components/desk/ResultRail.svelte
+d78d68e3e3858d8cf0f22d06c9bb616187241264e3c67710f9f7561bb5ec4133  /opt/aigc-home/app/calliope-web/src/lib/components/desk/StudioDesk.svelte
+77518af58ceaaf4026eda2df5191ba244fff4b3ef21db54ae8692b759be86a6a  /opt/aigc-home/app/calliope-web/src/lib/components/desk/TaskModeRail.svelte
+7bd0699f0d83702e04a06adc4cff8cdc4f62f5e6581b5c2deeb0e0b05d2077d7  /opt/aigc-home/app/calliope-web/src/lib/components/desk/WorkflowBay.svelte
+c093d1664194022d3edfb782d735df60e93a6fe838afb5ccbfb9b6079b2b1023  /opt/aigc-home/app/calliope-web/src/lib/components/desk/WorkflowPreview.svelte
+281bf5a5795b17d468b12dd4973004e5bdac458cd55e061feaaed69aa2c218c5  /opt/aigc-home/app/calliope-web/src/lib/components/generate/Composer.svelte
+ef72dc2367471507a4b5d15621854c761b99bba571876b94b07852369646260e  /opt/aigc-home/app/calliope-web/src/lib/components/generate/ContextBar.svelte
+0e2943e5120efcf9ad620ba1d8a4e4c1658c88560c7c1d9b4032cd960f0a097a  /opt/aigc-home/app/calliope-web/src/lib/components/generate/Inspector.svelte
+32f4c7c1a3a571a240741255fdf83173ef5d9d0f0a4626e02ea19d88fe613980  /opt/aigc-home/app/calliope-web/src/lib/components/generate/ParamChip.svelte
+1c7726496d94f822b1f6a72ccd7e0fd1a40b91e3adf64edc45f995d71df5da2b  /opt/aigc-home/app/calliope-web/src/lib/components/generate/ParameterPopover.svelte
+18e20e2685e840f018b2eb9ba1928af5bd4fdf4cd8c2b2d65fd1f01da644aca8  /opt/aigc-home/app/calliope-web/src/lib/components/generate/ParamsPanel.svelte
+dd3d58c3bf9901d25790f44cc2eaa5835ea15335c3695202f565bb640efb2ed7  /opt/aigc-home/app/calliope-web/src/lib/components/generate/SlotTray.svelte
+f8205126227507fe1b50c9f57fec6412b830ad2234bf1ee61a5a458bb82ca3a2  /opt/aigc-home/app/calliope-web/src/lib/components/generate/TakeCard.svelte
+2307ee5f013d81f20315ec2118d801a3367837c8d018048d501f65770a173f26  /opt/aigc-home/app/calliope-web/src/lib/components/generate/TakeFeed.svelte
+beb37354c781810c670661be8ac35ccdf6b8fc9d23525a4fcc543cdb10b6ad0a  /opt/aigc-home/app/calliope-web/src/lib/components/generate/context.ts
+da980feb2ea7e0eec93fac5cc0ee0c01a6be6f80d3c685e7eb22ecd00cc8741b  /opt/aigc-home/app/calliope-web/src/lib/components/generate/schema.ts
+5cfda8936144415a0e001511128e39268cf4db39430b59882ff4ae80da9c93c6  /opt/aigc-home/app/calliope-web/src/lib/components/generate/takeDelete.svelte.ts
+ea14c626f5bedec1b8fb607af318e05454b36f913a63ad4808d9026380e0687d  /opt/aigc-home/app/calliope-web/src/lib/components/generate/takes.ts
+eed1c80c2bb5ed54737c94adcc8f6461e57fb182218fca6ae0f87c61b0a1a0f8  /opt/aigc-home/app/calliope-web/src/lib/components/home/AProjectCard.svelte
+82de633bef1c92fecedd0618faaf4f3c6e869f365f8d22eda1631921f8cf56a5  /opt/aigc-home/app/calliope-web/src/lib/components/omni/AssetPickerModal.svelte
+0ba296a2ea05bb78ab3fdcd1ea526d894eb3eed0ed74f9149025abd68774413a  /opt/aigc-home/app/calliope-web/src/lib/components/omni/MediaTile.svelte
+e587b7b07272f5f3c9935dce6092cb5fb4e678d0fa3653a02360f4dec7f478ae  /opt/aigc-home/app/calliope-web/src/lib/components/omni/PillPopover.svelte
+47f04edf92ad2336893f77744762effef6e4acfeb53d657524ce1005505fb240  /opt/aigc-home/app/calliope-web/src/lib/components/omni/PillSelect.svelte
+5ef968def3ce3d7e134ef5ac10d07b098a9ec7a336593494ff7d967f7ff3158e  /opt/aigc-home/app/calliope-web/src/lib/components/omni/PillStepper.svelte
+b895e524829484dd7306f1bb4cc2e9ce652a1968662c4f4d6a7d586cea6ba4f8  /opt/aigc-home/app/calliope-web/src/lib/components/refract/Hero.svelte
+e7399561fa10f35aaaffe4d085b1822e626a0396057883d4b5b5c24462f26a15  /opt/aigc-home/app/calliope-web/src/lib/components/settings/MemoryPanel.svelte
+24b303e3e0f2db36dafebef71353611f34fb75ac851730a1551621aaf1d0e219  /opt/aigc-home/app/calliope-web/src/lib/components/shell/AppShell.svelte
+25e74bb4200011048065b5c7de7566da902e2ed456316fdf786de1b1652d767a  /opt/aigc-home/app/calliope-web/src/lib/components/shell/CommandPalette.svelte
+87a214fb486b27a8a7ed38caaef39b736a2fddb8be9b5a09c051762caf263442  /opt/aigc-home/app/calliope-web/src/lib/components/shell/ProjectScope.svelte
+9ebcf08567795b431537942481b461e400ab6a37a60e927e3fe559ddce6e65eb  /opt/aigc-home/app/calliope-web/src/lib/components/shell/QueueTray.svelte
+fd205da624befed52999700d8a00ec48f167c376c51258b791ec4d8a2a345ac9  /opt/aigc-home/app/calliope-web/src/lib/components/shell/ShellPop.svelte
+f07a172763a2b0a7755ea20721ae20d7b2cb63aaeb5a6f3229c4ddedf99199e9  /opt/aigc-home/app/calliope-web/src/lib/components/shell/nav.ts
+16a3e74a27530b0a0065e425c128de12168243c5b35897f47bb5b7c9be2ae0c3  /opt/aigc-home/app/calliope-web/src/lib/components/studio/MediaSlot.svelte
+8b0e79f5d2563d2a73c61dad5dc721680d441787b26081dd2887097a9d9d1424  /opt/aigc-home/app/calliope-web/src/lib/components/studio/RefImageGrid.svelte
+b55a01704dad5ecdab05d3bddeb1d6e44923322fa7a9d4aa60558a702a231e07  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Button.svelte
+624cbcb67c9dc143a75b78359cd8c50c067dbff57cea528a7a309e0be29d8d96  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Card.svelte
+a72c982126332293887705350c8825f6232e2e1067abaf4a1bbfe1773aac473c  /opt/aigc-home/app/calliope-web/src/lib/components/ui/ConfirmDialog.svelte
+bd56ad82b41fa23f64e908984c7a4c3ae6f24bdd5d1cfe2e66e21de25446d5ca  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Drawer.svelte
+7ab297b1f73b8bde8b7389f52721e2216fecdd4df91e5fefb21e424336194f30  /opt/aigc-home/app/calliope-web/src/lib/components/ui/EmptyState.svelte
+81798dc7007582e1025c246d4c3e9bb9ccfe7306f3199475b1581e58382005a5  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Icon.svelte
+db6130e0930b5a92d6af7fd613a898dcd117a9a7268823c1544d9c150cefe92d  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Modal.svelte
+0925761862b026b218cea0d6464cff4e67f1181bf4df4ff06f91e8ae472ea292  /opt/aigc-home/app/calliope-web/src/lib/components/ui/ProgressBar.svelte
+8f9304f189cb51702be7d426aad14edc05d6c68707baf8448cfe6de6a7951fed  /opt/aigc-home/app/calliope-web/src/lib/components/ui/README.md
+08e0d4f85cc945a1fa3773edbbb8c725b7f9737bf5be5e7cd2a679bd9f9f90c1  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Skeleton.svelte
+1460161d521f5ffaf1853ccb85e33240bce1ce736fd4a2e0e081acdd7cd2c584  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Spinner.svelte
+c67bc6d80dc82801f9e9be21c201781dd2d0708dad857ee3425f42066ce5c6be  /opt/aigc-home/app/calliope-web/src/lib/components/ui/StatusChip.svelte
+bbe0468da5495496bb76b75624eecd18438346b9c111319a77e3a2936f0a15f8  /opt/aigc-home/app/calliope-web/src/lib/components/ui/Switch.svelte
+c1c0c2f9edca20d964eddad0d02e53a1b332c53cef2dc8d5636cdf7af5bdef33  /opt/aigc-home/app/calliope-web/src/lib/components/ui/icons.ts
+0ab42d1c4781f6aa63aaabe90d40062d5f633a9941b10ed9c2dc7f5fc5a2472d  /opt/aigc-home/app/calliope-web/src/lib/components/ui/modalLayers.ts
+61c450b53fc546a2f1b68551b691326abefd705fc6145287f25ea48b3c4b269f  /opt/aigc-home/app/calliope-web/src/lib/components/video/ClipMonitor.svelte
+62649ec0b2e02c33b60651b31927bca0a589e3f68bc665d50438aa71bfe16161  /opt/aigc-home/app/calliope-web/src/lib/components/video/ClipSourceModal.svelte
+23225ace57828aa80cbd37fc00156b4170d31ddfbebb693c747059ad2032a280  /opt/aigc-home/app/calliope-web/src/lib/components/video/JobInputsDrawer.svelte
+38df3060885270e2e0d4e7a0eecad7d460fd88b5d65f3f65e6d3ba87ea9e3744  /opt/aigc-home/app/calliope-web/src/lib/components/video/PromptPreviewModal.svelte
+cde0d361ab0b5eb220da310d6297092c9c0cc8fb3b44a53eab84a1acc898ac1b  /opt/aigc-home/app/calliope-web/src/lib/components/video/SceneFilmstrip.svelte
+116be76c6f77cd763279bbc632fefe9d5e1b8a220533ee92776e49a34e73e6cd  /opt/aigc-home/app/calliope-web/src/lib/components/video/SceneScriptDrawer.svelte
+bcaa50dd928ae2b1ecf95697fad51852c2bf091ff391e94e749eb09035521322  /opt/aigc-home/app/calliope-web/src/lib/components/video/ShotBrief.svelte
+fe5823233fd94847258f02a8dbba7df1d1c84f0f45a9fde459dad297221f7e52  /opt/aigc-home/app/calliope-web/src/lib/components/video/VideoEditWorkspace.svelte
+f0d8365d82b65dcbb995cf93fe4769705bf9d9136b1bd60eb0e26387ccd488ec  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/AssetsStagePanel.svelte
+91c7eb1b74135fdb4780e86871d646dcaa23c6c7cd1d8d0cc69bc4ec044bfd99  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/JobChip.svelte
+a9b75b36f0c2f061caf61a3fe897ad4799a2cbeb3fbdf4cd90c907321a9e3869  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/PromptBlock.svelte
+6a01205bf0e4118f38a988f359650a0e9c3522567e7328e6783a32abb7a4ce03  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte
+0cc25c48ed8bcc5d1312cae5da8ec8d43a719b88de1e9f1aecc34d216884ffbd  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/ShotStagePanel.svelte
+b64c479ec6e262c10607fd7bb9c5e3096e7ec9870369754e288f95293abb6fb2  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/StageStepper.svelte
+afd4ffe76429630d4ee6e30c06cc9e121a637e252bff78b0ff902990b1827c66  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte
+1b23da03f59c5d186e7e760c606e11e7fe22cb37ae8d90cfb813efc0dad9d597  /opt/aigc-home/app/calliope-web/src/lib/components/workbench/StyleStagePanel.svelte
+58407122bbb4c9cf4a4d3c280b7e27af7a8a51141ce2dd3eabe91644ea7843f7  /opt/aigc-home/app/calliope-web/src/lib/components/workflows/WorkflowBatchImportWizard.svelte
+77a2ac092a4c0bbb1f952e191b88704edd5815b783f439a022cd4f4baca5d16a  /opt/aigc-home/app/calliope-web/src/lib/components/workflows/WorkflowLibrary.svelte
+d193924f8d50ac86de09cb8b1d44511c637811dbe5fb12bf8826633f5cac6d88  /opt/aigc-home/app/calliope-web/src/lib/components/workflows/WorkflowMetaDialog.svelte
+f7e318b7c2be62b8075568eaa1cfebbb002a5ac554cf26b7c6367ee6429de224  /opt/aigc-home/app/calliope-web/src/lib/dbtime.ts
+cdbcb72007dbc24c5fc13377aeeae8851644b306eb376e872155fda179c7acd3  /opt/aigc-home/app/calliope-web/src/lib/durationBudget.ts
+161c8c35241d55c6643f946e092d65748b8d55c6fdf5dad0fadf6e37e4fb3208  /opt/aigc-home/app/calliope-web/src/lib/endpointKind.ts
+d8cfc840dcccffadf3546d07ed1fe32c43e86b85599149e756ea80871ca3706a  /opt/aigc-home/app/calliope-web/src/lib/events.ts
+9ae9634200ef0aaec1050a3638b32e2e1cf1dfdae089dca067a35cd2155fa7ec  /opt/aigc-home/app/calliope-web/src/lib/formOptions.ts
+e22719d77911c34c6d49ce6fbffb655fbb9053bbe0a471cfd7bb36804e1adb89  /opt/aigc-home/app/calliope-web/src/lib/i18n.svelte.ts
+b48252457d2ce992db05b82dad361f3f971504a5b7c4e1f78f7e4f59eb062afc  /opt/aigc-home/app/calliope-web/src/lib/i18n/de.ts
+8cc8df905076d916cbde2ba83ad3202ab3cfb87e38d4d2119023404dfaa6b7fc  /opt/aigc-home/app/calliope-web/src/lib/i18n/en.ts
+837bf76c0ae34be1f6348bea071f47227ca0573d4c466574ad2ed99eb6db7df0  /opt/aigc-home/app/calliope-web/src/lib/i18n/es.ts
+332522881a6fc1ea9d227745f681ce484ae75367d56e61bcdad13a17487f3ce3  /opt/aigc-home/app/calliope-web/src/lib/i18n/fr.ts
+b2c9d3b530fe388781f6b85dbef4b9c71ff0652a42ad8faf6e7864e8ef5438c2  /opt/aigc-home/app/calliope-web/src/lib/i18n/ja.ts
+89862053863f268a6f3dff975be041b526ef6b5bb937c9660f97b4e80ce241e8  /opt/aigc-home/app/calliope-web/src/lib/i18n/ko.ts
+42b332e23e881092977434ee0bd446bb410834de262d96f13e0a7150e0da4bb4  /opt/aigc-home/app/calliope-web/src/lib/i18n/zh.ts
+60895e55f0860fba53ef9d80981b7ec13bc1d17c0ab5dd7d4aeb5ec930131b76  /opt/aigc-home/app/calliope-web/src/lib/ids.ts
+8354c545da56aa7d05edba6820614611db5c2846407f9ec69e4d2b0da4e29814  /opt/aigc-home/app/calliope-web/src/lib/jobLabels.ts
+b17722f478a633982c02191e02ef908297357d33b15d01944f59dce0c13c3ed9  /opt/aigc-home/app/calliope-web/src/lib/jobProgress.ts
+536733c170cc5266cd1f5d0a0eeda9a2a56c8f8c9613058c32a7a9d103063842  /opt/aigc-home/app/calliope-web/src/lib/jobStatus.ts
+d57e21fb3549b5c773073cb7d4c9b62bc79c16a9fa24d5d488450940be27ed9e  /opt/aigc-home/app/calliope-web/src/lib/media/exportFrame.ts
+81762ea6ec15806d62298b838c48919744a6431df8a3300e28b6d214892b842e  /opt/aigc-home/app/calliope-web/src/lib/media/lastFrame.ts
+345d9b8f82fb4893ecc2a0866581838e7b5d45e45259c40d40234d915545f929  /opt/aigc-home/app/calliope-web/src/lib/missingOutputs.svelte.ts
+3975f02ba220365dd32d4053d199800355c80c1a5d2a26942779df304fa042b8  /opt/aigc-home/app/calliope-web/src/lib/promptTemplates.ts
+57900f9c597c868a40ff6d142ef3d3b0e3ef364f4adddd967414688ecfbd7293  /opt/aigc-home/app/calliope-web/src/lib/reduceMotion.svelte.ts
+abd820a9a7a47f8eede494583eaa18b5f34b1abfe73260a6fb311f2e8ea01494  /opt/aigc-home/app/calliope-web/src/lib/referenceAgent.ts
+c037acebc7b878e00f680e65c5bfd6934b9eb8f7cc2e7d8c58afc4c87f93a927  /opt/aigc-home/app/calliope-web/src/lib/shot/api.ts
+7495bcb0d98e4dd91ad72c132b31724d97f226ae0420f862a5791d20888e2526  /opt/aigc-home/app/calliope-web/src/lib/shot/calibration/compositionPresets.ts
+e9301e261d4a12184f820ee0b0a547bf8c061bb65c58ee2a1967d89537b0c9b2  /opt/aigc-home/app/calliope-web/src/lib/shot/calibration/shotAxes.ts
+24ebe82dc55cc53cf3dfe0bc40275a9613353dc9116539acc6faf0b0aa597d80  /opt/aigc-home/app/calliope-web/src/lib/shot/calibration/shotSolver.ts
+5de1596d7827248cd5be5e576a54848d18b63225061beeccd2bd144ed678a2ea  /opt/aigc-home/app/calliope-web/src/lib/shot/components/CaptureStrip.svelte
+d8450affdb98ce82325f9b0f860ca1f5493a0404c4f2dc52792758f25e7e145e  /opt/aigc-home/app/calliope-web/src/lib/shot/components/ScenePanel.svelte
+abbc4622691782aa8ccddd55e43324642d715f2c5f78d32ef4f8d6ad1c86be6f  /opt/aigc-home/app/calliope-web/src/lib/shot/components/ShotInspector.svelte
+810a24fb53b6458747ca981039fcde44a4b2f3b89242ec6f2be96e5f11e1d95d  /opt/aigc-home/app/calliope-web/src/lib/shot/components/ShotSessionRail.svelte
+6c6b55ab12443cb7086a41448c2245c526784af60df5b8d3078f046de5cdc574  /opt/aigc-home/app/calliope-web/src/lib/shot/components/ShotViewport.svelte
+cc871911957ac769829dd487095488e0cf4cdbf44f99ace78df906fa351ae71c  /opt/aigc-home/app/calliope-web/src/lib/shot/components/TimelineStrip.svelte
+6b18ef874ccd3c3508ac35788a8b9a1e924a79b4a7af9f7b9373e4f0b383e7e3  /opt/aigc-home/app/calliope-web/src/lib/shot/components/ViewportToolbar.svelte
+7de37792057307fd93a2df295308ccef609d9ec16ed17793eb8e2faf2295c626  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/cameraUtils.ts
+2a07e4133ccc93420b64fcde15c43638219359cf42b1c8d9c849c44eb85cd2fe  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/jointConfig.ts
+a64e0938354f7363195285dfc564949b3dfac5f0be254177ce1378fdc00bea59  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/mannequinFactory.ts
+0f94e29cb1d0b69d785dfaa326cee6a993c60472328f16664a5291d7e6caecf8  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/mirror.ts
+d6569792a3a9e2dbff0f82b527e4d3b9d35874864c019f5dbc7aa8e4da947b25  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/posture.ts
+18385f2f998666e864d5b67b6531b85e6d42c0d6de021a261f11199cb78b2fec  /opt/aigc-home/app/calliope-web/src/lib/shot/helpers/primitiveFactory.ts
+480d36f1dabed4944b34471ed55d869e28f6e81875e6558c62a0b75d694cb783  /opt/aigc-home/app/calliope-web/src/lib/shot/motion/sampleTrack.ts
+7af90bd8c957299c282e12fca917f8fa56d2069b4ded99cc4798d1e730506f1c  /opt/aigc-home/app/calliope-web/src/lib/shot/shotStore.svelte.ts
+f17a0e08c4c42336a8983f46f4970896daee72577e38fd4739f322d99c20e27d  /opt/aigc-home/app/calliope-web/src/lib/shot/types/mannequin-js.d.ts
+d9c276a046c0ba7326d65293a56711913b8be107439470342220e98c6736af0b  /opt/aigc-home/app/calliope-web/src/lib/skillFrontmatter.ts
+0a2075b0f882d9b354ed3d7a0a8913d9d9f2e0e380ad8ea4f655fc89f1986d97  /opt/aigc-home/app/calliope-web/src/lib/storage.ts
+07a9b47b8d793c23bc490b23d4bc7e4e5083e3780851525edc60c92118c43716  /opt/aigc-home/app/calliope-web/src/lib/toast.ts
+baa828f60b258b06032da3a2d289d353e1ba61b00bc3b06852d184936663d3ee  /opt/aigc-home/app/calliope-web/src/lib/wideLayout.ts
+363320f14113146f617b12ead186db995fa99de71ad04be336ea1cb3e6f28453  /opt/aigc-home/app/calliope-web/src/routes/+layout.svelte
+c9a6362f526374fe88546908b976f897bccc8bb1b12a3797e176afc0d37a1172  /opt/aigc-home/app/calliope-web/src/routes/+layout.ts
+6c6481bf7b09e2e74400a112b66ad2430be6cdc843ebdc1c20d370bdacc174d8  /opt/aigc-home/app/calliope-web/src/routes/+page.svelte
+82665e45d52d9b8f182fe7395e4c8b2726beb62320de2f581b5b73d9c9d3987f  /opt/aigc-home/app/calliope-web/src/routes/+page.ts
+bce9c599232e064eb946d9090391066ee8adcdc269797b8a874cca8effa4427d  /opt/aigc-home/app/calliope-web/src/routes/agents/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/agents/+page.ts
+9949bca2d32eac10b2f9dfe91d0f6b539205259fa15b0a4c6443a6c1e600dc35  /opt/aigc-home/app/calliope-web/src/routes/app.css
+e7212b5a4b2eedcd6f107e5fcfb5ae8a2ded5bce3d12f7c279f6dfa4c0007660  /opt/aigc-home/app/calliope-web/src/routes/build-scene/+page.svelte
+f21b64d615dfbac548e7298fe8d130dfc7e0e148ffb00d6945ac470da791e002  /opt/aigc-home/app/calliope-web/src/routes/build-scene/+page.ts
+370b52d8e87153b57ef73eed1846a770eaf9b7c356b310a3fdcc8d3c295a403e  /opt/aigc-home/app/calliope-web/src/routes/canvas/+page.svelte
+f21b64d615dfbac548e7298fe8d130dfc7e0e148ffb00d6945ac470da791e002  /opt/aigc-home/app/calliope-web/src/routes/canvas/+page.ts
+1e0197911d9752767374ca1fa1157ea534f24553fbea1e9db5fde0294af4f034  /opt/aigc-home/app/calliope-web/src/routes/canvas/[id]/+layout.svelte
+23de1dcb2b94ba7050764b7bfa04fd447aa36f50241f867783646ccb669a8658  /opt/aigc-home/app/calliope-web/src/routes/canvas/[id]/+page.svelte
+f21b64d615dfbac548e7298fe8d130dfc7e0e148ffb00d6945ac470da791e002  /opt/aigc-home/app/calliope-web/src/routes/canvas/[id]/+page.ts
+28c91d13beac10eba7964e562e90c8c4a3ec2652e69710970cd4733e9d42e1e5  /opt/aigc-home/app/calliope-web/src/routes/connections/+page.svelte
+bc76b47b593f0ae5e6946df26524d70e46b939889ccec090dc27a47cf71af140  /opt/aigc-home/app/calliope-web/src/routes/image/+page.svelte
+743d590d5e52e74a5b209448759c603c5b1ee5ae6540916354d496820c7acd7f  /opt/aigc-home/app/calliope-web/src/routes/library/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/library/+page.ts
+5684b7f04e3eef40f349a5e98b22c6ebb05c9fa75bb4606a988b0f2ee65cf13a  /opt/aigc-home/app/calliope-web/src/routes/models/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/models/+page.ts
+9f29a23ba5aed307d4f28c7091723269e6583d53357805f7e8893d468832fc53  /opt/aigc-home/app/calliope-web/src/routes/playground/+page.svelte
+f21b64d615dfbac548e7298fe8d130dfc7e0e148ffb00d6945ac470da791e002  /opt/aigc-home/app/calliope-web/src/routes/playground/+page.ts
+79812eaac33b12b43f539f0b957ebe4aeb64cf80eac03741ebfd4ba1cbf76335  /opt/aigc-home/app/calliope-web/src/routes/project/[id]/+page.ts
+f6ba8f210c2b8db20d401c57b6c84119ebda467b15ad9e41e8ba5ae89477354d  /opt/aigc-home/app/calliope-web/src/routes/projects/+page.ts
+675613be31a3a5f95cb8675a42790425f4f864380d6b3c141ab028f5069fc9fa  /opt/aigc-home/app/calliope-web/src/routes/settings/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/settings/+page.ts
+3c0f1d1b8d92c7b3e6372a83aaf5b3318442d135eb0de267cebfefb795d8ae49  /opt/aigc-home/app/calliope-web/src/routes/tasks/+page.svelte
+f2a395573851fe6916670ac392bedceaa5f93312c6560a33470b661e80132329  /opt/aigc-home/app/calliope-web/src/routes/video/+page.svelte
+32aa5a552f98d3a2ee487ed236de09daea24bd33ccf97f48bbe1f29fc639abbe  /opt/aigc-home/app/calliope-web/src/routes/workbench/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/workbench/+page.ts
+31c0251a0f09a0540021a621410c084ff4d0b1fb9d409de0e461fde224f858db  /opt/aigc-home/app/calliope-web/src/routes/workbench/[id]/+page.svelte
+58ca28942740b2ff08d6416473a2e8038f8a660017ce0b8b0d9ab3bb44453659  /opt/aigc-home/app/calliope-web/src/routes/workbench/[id]/+page.ts
+bc6dc994baaaf02c80ad390cb71965f2f15422704fa64c81f5b2c31f33b2ab13  /opt/aigc-home/app/calliope-web/src/routes/workflows/+page.svelte
+f21b64d615dfbac548e7298fe8d130dfc7e0e148ffb00d6945ac470da791e002  /opt/aigc-home/app/calliope-web/src/routes/workflows/+page.ts
+294450c3d45d4820d0bbf7f1c6e69aa0f3686efb6e3dbcdacf13e34e2d07b35e  /opt/aigc-home/app/calliope-backend/src/calliope/routers/workbench.py
+acd3ba6e0ab29b92f5133358398f3544baa0ce2bea03560004a42e812b6abc8a  /opt/aigc-home/app/calliope-backend/src/calliope/static/index.html
+acd3ba6e0ab29b92f5133358398f3544baa0ce2bea03560004a42e812b6abc8a  /opt/aigc-home/releases/stage-HEL665-v5-35fd07a-20261015/build/index.html
diff --git a/docs/hel-728/server-backend.txt b/docs/hel-728/server-backend.txt
new file mode 100644
index 00000000..960b751a
--- /dev/null
+++ b/docs/hel-728/server-backend.txt
@@ -0,0 +1,79 @@
+660a6de4471ec76986e56f8d4467e4ed85a3ee5fdfc47f438410131c0f47f051  /opt/aigc-home/app/calliope-backend/src/calliope/__init__.py
+b00189efb92d1f8f77fdd9b912e7357bd6a7baaff998f364d55aa0029f7f9417  /opt/aigc-home/app/calliope-backend/src/calliope/agent/__init__.py
+7d0a16a798d89d7c8932c63698b8f4af91a61f7ec22b29f9e2efde75f06890b9  /opt/aigc-home/app/calliope-backend/src/calliope/agent/agents_registry.py
+f3ae5d869628d1cf2347e6b216d60dc7d4ea4fb82945fb348180bd04aca1b5d2  /opt/aigc-home/app/calliope-backend/src/calliope/agent/asset_agent.py
+45daa038f5dbfca19ec351e2e2c4480ed8abc3fa51adf62b46dff714221afe45  /opt/aigc-home/app/calliope-backend/src/calliope/agent/continuity.py
+300f043668e003bdf98f73cce40ba0251d94356092e5ad1aafe29ee1d4c97e22  /opt/aigc-home/app/calliope-backend/src/calliope/agent/coverage_agent.py
+2245f0e117e728382554155c8f3e93f5304913c595cf070d9ad29daafb9bd088  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/__init__.py
+077cebb46d3ecccc1336b9c92a5c82ad21cdd57e55644df9298a5495374bc09d  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/log.py
+c9429604ecde92dfc95f463fcfbbf2dd0153d91fd3155696238a1713a2cb8dd6  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/loop.py
+5233ad11b93f072d456861829d0f856436a9f330c2e4870aa2dad15e3bfc117a  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/orchestrator.py
+f9e2f2f5ab4084c53866621e9c17eb388fd6dd9b4cb06be6c067ee03490f4da5  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/__init__.py
+ab17c10c8e372ff94659047dd94b56bdeecf79aa88bce60821538ab4d5e4d875  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/canvas.py
+1e7d44d9c9d8031bca9d3537b2d96d05bf9087e64a3ff6a33eee76c09001157e  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/comfy_mcp.py
+03c9041e6cc8c443e56d2e0e09effa15107ad7b6bc4048e6b56fdfccd623a2d7  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/interaction.py
+7fe0366e33a1600766914a0b7bcc2bc0968bb39850370dec35697055ba8e8c1a  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/memory.py
+58cc3518674cd689eade1c2d401d3fb943c5f2429af66da537b6b55ed00d95df  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/render.py
+15d479331934ed05c23e19f24b131e566ef528550ab9720fd570d4b1bf3e977b  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/script.py
+e9f736490d5ef6951ee0ce2ace3516bc2f6902c6fa3b1ef6ea9b6e7123f5f8d1  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/shot_builder.py
+ca11d12eb274a6852af2d091dbe453df582543cfb2d03051528bc629c8f0d024  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/skills.py
+8c49aea52a52a59e31269c8e79c988f4a1b3d676c23040f6506fab94789e4a20  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/story.py
+5dc7f0e6db53eaebe523b1b22b0e77ef06683c9182a52be7ab54f3c8d9d66395  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/system.py
+2a2d4606539c42f2f3acb7b93c73f571b66f53d4ead934bb1d47547825226978  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/plugins/workspace.py
+7001d912ae819bd25a27db28cffb77b62c53ec28eae9bef320d46d967d195a81  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/policy.py
+09e935288ad6c5c3579c26e948beac6d14df74978334fe4ffa4b000e8a600edb  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/prompts.py
+25e0716d36a6598fe516d2d4838cfe54eedf00f390385ede5c252edc3a4a94c0  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/registry.py
+0495ee7f9ffefe13256688e47b23f68d6361bbef527b7ed4a5bc7f4a8998e1b8  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/runner.py
+90405bbb07c7cbe1283ead1ae901c8183756a93667e71f4ce585c0a543853198  /opt/aigc-home/app/calliope-backend/src/calliope/agent/harness/tools.py
+5d225d80e8886e04e9b02d18b0bae358b65f4e66beec1280c4f500e761b1d752  /opt/aigc-home/app/calliope-backend/src/calliope/agent/llm.py
+beadb0e82e8eb47356f81d81ff41271da97cc51c90707c89ee2908ed095d0380  /opt/aigc-home/app/calliope-backend/src/calliope/agent/prompts.py
+feffad04e8a668d4426fc6f9021213a9d1122221e685aa5ba30bcaa9611faf45  /opt/aigc-home/app/calliope-backend/src/calliope/agent/script_agent.py
+483c6658b7573382f3a83add57b9f7e27e83ff1388bf0b900837f81c2b47c56e  /opt/aigc-home/app/calliope-backend/src/calliope/agent/skills_store.py
+2caa50c0e246b542f331c7a52778b5c13331cf3623a431c14bbdc4362674f138  /opt/aigc-home/app/calliope-backend/src/calliope/agent/video_agent.py
+1d3488bcc2eadcd8a8f2e84ab4f6e9bdf52096b8af637c4da399db041d5a0543  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/__init__.py
+e6faad052e3139d921936c7a73e2ee7fb55a3bb3c9fc256535dca5fa6f01ac14  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/client.py
+f8bf4d1b91d959044de1dbc4aeb11bf0bb521f51f1928d36a46c670381a08ed7  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/dry_run.py
+fc99a623850b581ae38843bbc3baf1b71ca9fd633e6103a34cb809a345e5a647  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/endpoints.py
+da82aad77fa561fea5fd6bdb553feaff61ce753a890eea2caa146a5813981952  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/lint.py
+12848b11ca346ee3c7703becb96469609b1b68612405a7be3cb7e8fca04291b5  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/metadata.py
+460d9463dabc8b055d1bdd81e5b908ad8bfd198da1560e3fe0f859c9cd1dfdf6  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/output_map.py
+d300c6f33f30bc9a1d9a4c5163b3a2f71795f9e349849205ec42f85f3a202824  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/parser.py
+8ac1417f0f78d952cdb219b10811a6ed7d4ce3bb0d561708858c4a8f5d15b45d  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/patcher.py
+6629961d33204cbe5b3fc3d8a5a0a4de0c86d235e73f542d191429cf7f4bd2ec  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/preflight.py
+4ca33343fc3f20e0fb82558cb428548f6415af04fb90213a694fb759515732f2  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/profiles.py
+21b024f44a3cba96db1b95a4c3a82591e6af921a31756378970da506ca0f9acf  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/registry.py
+355aca29ad4283f3cc600181fc0397cd06f8a63d3fe537b6fd10fc92bfcbe5a9  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/roles.py
+adc34e80cca7a2b38cc834a713c9e64001caac84413af288389e5554e304bab6  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/smart_fill.py
+ebb91f0d291b042d74a44019cfd69dcd553b0f0f96277b7795e52d4dbb7201d1  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/ui_convert.py
+db00a79a92d0add6ea3c2509d629c36cbe457c667e388fff50eeec7158d5b9d8  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/ui_widget_orders.py
+c27fca69a604705b06809fdd692975ca0e7a08d05d558172962f8910a6a0491d  /opt/aigc-home/app/calliope-backend/src/calliope/comfyui/validate.py
+94cda57274c512feac82ab3c97d9c680abf6706009727d6a6791cef690994001  /opt/aigc-home/app/calliope-backend/src/calliope/config.py
+9c404874ccbf1d3d49ab509b112f52ecd6a037488f3b0e05e5a08c5ad74123dd  /opt/aigc-home/app/calliope-backend/src/calliope/db.py
+4b3f2620e25c17bf9587beda3b5e73284bf83c6b5fb6beaf1c6e73a73dc560f3  /opt/aigc-home/app/calliope-backend/src/calliope/events/__init__.py
+a9be4db2e810135a3482432316925b0bed8b2fab9e1395333831b7f5246f987b  /opt/aigc-home/app/calliope-backend/src/calliope/events/bus.py
+e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855  /opt/aigc-home/app/calliope-backend/src/calliope/export/__init__.py
+cabc42a31999fa1e185b07c74f09b303f793a809127ce6039547c86657d9491b  /opt/aigc-home/app/calliope-backend/src/calliope/export/runner.py
+ee776991e7fbeef9d0a370a734bb9428e015ef9f18b0cbf8f3a8e772614922d9  /opt/aigc-home/app/calliope-backend/src/calliope/main.py
+ff156ab234a8ea57a120e31c83baa591e613fa776d74cf29f2e75468bcff4e71  /opt/aigc-home/app/calliope-backend/src/calliope/models/__init__.py
+81bbb9b938d452f41369982b7434520d173ff68b0242278c602f5d489c00527a  /opt/aigc-home/app/calliope-backend/src/calliope/models/schemas.py
+e4a4676265849f0dce021abccc1e7cc9ae6605a60eac8cc7e0a47246ff56bfa8  /opt/aigc-home/app/calliope-backend/src/calliope/poses.py
+dbe2691f035386e14a3be26725cfba67baf7f6f712fc0061740ea920a05d9f4c  /opt/aigc-home/app/calliope-backend/src/calliope/queue/__init__.py
+22724a06ad9d6fced7572d52392cf2d22c793614097dbab42be9c1bc373b2ab0  /opt/aigc-home/app/calliope-backend/src/calliope/queue/manager.py
+ee3e91bf7e330ff1981aece7fc4bb475acfd71153ab59db99736ac765a57ce2d  /opt/aigc-home/app/calliope-backend/src/calliope/queue/worker.py
+1805a0888c8dc007500cc1e24030a03555c6619e6fa56f937844831995cba5b8  /opt/aigc-home/app/calliope-backend/src/calliope/queue/workflow_test.py
+cbacc8761833b64aa017a3df2d933c3897f9f19997044efaea49f206ec1b205a  /opt/aigc-home/app/calliope-backend/src/calliope/routers/__init__.py
+780483a9389c939d632a79e248e58053e0c468f65a27b0a90337412cc0fe1ec8  /opt/aigc-home/app/calliope-backend/src/calliope/routers/agent.py
+315b6318864370449c3570ae705046501f696ac86cb370de189b05be26d79a05  /opt/aigc-home/app/calliope-backend/src/calliope/routers/assets.py
+a05c24f6c26d8a8432e8c73deb8acfb1e71fa4f611c10e80ba19dd6c10985e9d  /opt/aigc-home/app/calliope-backend/src/calliope/routers/canvas.py
+6195a37ef48e80a7f423fefcc2b2939c2270542ca4ce81ef58ca06da356b312d  /opt/aigc-home/app/calliope-backend/src/calliope/routers/comfyui.py
+be7f140608380aa93d23893ba97b222fcf5b2a288ca81e5ccb53731875d2cdff  /opt/aigc-home/app/calliope-backend/src/calliope/routers/events.py
+45c1952d866f76ab84cbc221541250ad6e9ae79d06d4e7c7cb4176d395f9d196  /opt/aigc-home/app/calliope-backend/src/calliope/routers/jobs.py
+3827af29c2645baee4a9ccbbc1d77155e830585bd033955b061bc320b6fb7de3  /opt/aigc-home/app/calliope-backend/src/calliope/routers/library.py
+ce4f8f21cff507cafdeece1f9427b02172c550da53327095167964cb97ca2145  /opt/aigc-home/app/calliope-backend/src/calliope/routers/playground.py
+c36d32df6571ecb1bf3bd17be48e47c0cc3864b79db51d764dcf95befbe78383  /opt/aigc-home/app/calliope-backend/src/calliope/routers/projects.py
+398cf96846e60c8e60907121b4a21f9086c3b03f86e0ad2ad4082acaa9fb4678  /opt/aigc-home/app/calliope-backend/src/calliope/routers/scenes.py
+a4fedd5c2285ffa0d28b4176e9014d46c27d83b4150a81b2de63ef9b921865cd  /opt/aigc-home/app/calliope-backend/src/calliope/routers/settings.py
+bd235fde191c512e0592e269c8d1c8d8784ef8bce07de6d62a93626fac249744  /opt/aigc-home/app/calliope-backend/src/calliope/routers/shots.py
+64b3b8e96beaf6b5fa50114188f5f101c09794dcfc5b47ce79174f43445b4bbf  /opt/aigc-home/app/calliope-backend/src/calliope/routers/story.py
+294450c3d45d4820d0bbf7f1c6e69aa0f3686efb6e3dbcdacf13e34e2d07b35e  /opt/aigc-home/app/calliope-backend/src/calliope/routers/workbench.py
+455073355ada5eb2807f90496ff3a28b3e1f9f06bbc9e262a8da354d6aec15ae  /opt/aigc-home/app/calliope-backend/src/calliope/routers/workflows.py
diff --git a/docs/hel-728/theme-browser.log b/docs/hel-728/theme-browser.log
new file mode 100644
index 00000000..490f328e
--- /dev/null
+++ b/docs/hel-728/theme-browser.log
@@ -0,0 +1,49 @@
+{"image_wf": 1, "video_wf": 2, "endpoint": "e9c0ef15-ab9a-4956-81d4-2d42425feea2"}
+{'dual': 3, 'h3': 4, 'project': 1}
+RUN e2e/hel728.cjs
+PASS 默认主题为夜片场
+PASS night 保留原编辑组件和正反向草稿
+PASS day 保留原编辑组件和正反向草稿
+PASS grade 保留原编辑组件和正反向草稿
+PASS bluehour 保留原编辑组件和正反向草稿
+PASS 刷新恢复主题和草稿
+PASS 方向键移动主题选项焦点
+PASS Esc 关闭并恢复入口焦点
+PASS 创作台兼容入口保留全部参数及片段
+PASS 隔离真实队列已收到任务
+PASS night 上传素材和运行中编辑状态保留
+PASS day 上传素材和运行中编辑状态保留
+PASS grade 上传素材和运行中编辑状态保留
+PASS bluehour 上传素材和运行中编辑状态保留
+PASS 切主题后原任务完成且产物归属不变
+PASS 切主题保留视频节点和暂停状态
+PASS 切主题保留智能体任务输入组件和草稿
+PASS 切主题保留未保存设置
+PASS 1440,900 night 导航入口和四主题完整可见
+PASS 1440,900 day 导航入口和四主题完整可见
+PASS 1440,900 grade 导航入口和四主题完整可见
+PASS 1440,900 bluehour 导航入口和四主题完整可见
+PASS 1366,768 night 导航入口和四主题完整可见
+PASS 1366,768 day 导航入口和四主题完整可见
+PASS 1366,768 grade 导航入口和四主题完整可见
+PASS 1366,768 bluehour 导航入口和四主题完整可见
+PASS 1280,720 night 导航入口和四主题完整可见
+PASS 1280,720 day 导航入口和四主题完整可见
+PASS 1280,720 grade 导航入口和四主题完整可见
+PASS 1280,720 bluehour 导航入口和四主题完整可见
+PASS 模型连接入口保留页签参数
+PASS 旧项目链接保留阶段参数
+PASS 全局搜索保留 视频创作
+PASS 全局搜索保留 大语言模型
+PASS 全局搜索保留 试验台
+PASS 全局搜索保留 三维搭景
+PASS night 首次绘制前恢复主题及底色
+PASS day 首次绘制前恢复主题及底色
+PASS grade 首次绘制前恢复主题及底色
+PASS bluehour 首次绘制前恢复主题及底色
+PASS 存储被禁用仍可切换且显示提示
+PASS 存储被禁用保留输入
+PASS 无效存储回退夜片场
+PASS 浏览器无运行错误
+TOTAL 44
+FAILED SCRIPTS []
diff --git a/docs/hel-728/validation.md b/docs/hel-728/validation.md
new file mode 100644
index 00000000..bedda70f
--- /dev/null
+++ b/docs/hel-728/validation.md
@@ -0,0 +1,47 @@
+# HEL-728 B0 自测与已知限制
+
+## 通过
+
+- `npm run check`：0 错误；1 个第五版已存在的视频字幕警告。干净第五版副本同为 0 错误、1 警告。
+- `npm test`：存储 SSR 安全、局域网随机 ID、技能正文、视频尾帧算法四组既有校验全部通过。
+- `npm run build`：静态构建成功；`git diff --check` 通过。
+- 本批全部修改的前端文件：Prettier 检查通过。
+- `e2e/hel728.cjs`：**44 项通过、0 个浏览器运行错误**。在一次性本地后端、假 ComfyUI、假 LLM 上检查；真实 HTTP 上传首尾帧和队列生成，四主题之间切换时原编辑 DOM 节点、正反向草稿、已上传文件、运行中的任务 ID/工作流归属不变，完成后仍可显示视频且默认暂停。另检查智能体输入、未保存设置、刷新恢复、方向键/Enter/Esc 与焦点返回、非法/禁用存储、旧项目链接及完整 URL 来源上下文。
+- 框架脚本被阻止时检查四个主题：head 脚本与阻塞样式表独立恢复主题与正确页面底色，没有依赖框架完成后才着色。
+- 人工查看 1440×900、1366×768、1280×720 截图：主题卡片完整可见、侧栏不溢出、浅色文字与面板正常。截图采用减少动效模式消除过渡帧；产品开关与系统减少动效沿用既有机制。
+
+## 存量失败及原版对照
+
+本批未修改 `calliope-backend`：`git diff --quiet 35fd07a -- calliope-backend` 退出 0。
+
+后端全量 `pytest -q`：**834 通过、5 失败、6 跳过**。在 git archive 导出的干净 `35fd07a` 副本中，用相同解释器/依赖和 `PYTHONPATH=src` 单独复跑这五项，全部复现：
+
+1. `test_agent_comfy_mcp.py::test_comfy_server_info_scoping`：`agent_events` 表不存在。
+2. `test_continuity.py::test_h3_messages_bind_neighbor_shots_and_keep_file_slots`：Linux 上 Windows 路径的名称提取与断言不符。
+3. `test_h3_profile.py::test_resolve_h3_references_prefers_form_files_over_story`：Linux 上 Windows 路径的名称提取与断言不符。
+4. `test_scene_settings.py::test_preview_prompt_uses_form_references_not_story_cast`：同类 Windows 路径名称问题。
+5. `test_script_scene_count.py::test_script_regenerate_keeps_expanded_count`：重新生成剧本返回 500，断言预期 200。
+
+全仓 `npm run lint`：原版 68 个文件的 Prettier 失败，本批剩余 63 个，均为未修改文件；ESLint 本身缺少 v9 配置文件，原仓未提供。没有为本批新增独立 lint 规则或格式覆盖。完整输出附在本目录。
+
+现有两份端到端脚本均在本批和干净第五版副本中失败，未删断言或改正式功能迎合旧测试：
+
+- `e2e/reference/check.cjs`：前 8 项通过，随后等待第五版已移除的 `.result-item` 历史栏超时；当前 UI 用作品画布与独立生成历史弹层。
+- `e2e/reference/check-copy-fallback.cjs`：等待旧版「编辑内容并带回项目」按钮超时；当前第五版已重排成果编辑流程。
+
+这些脚本没有被本批修改；原版和本批失败日志都保留。不能据此宣称现有端到端全绿。
+
+## 运行方式
+
+安装仓库锁定依赖后，从仓库根目录运行：
+
+```sh
+# 指向环境已有的 Playwright 和 Chromium；按环境需要提供系统库路径。
+PLAYWRIGHT_MODULE_PATH=/path/to/playwright-core \
+CHROMIUM_EXECUTABLE_PATH=/path/to/chromium \
+HEL728_TESTS=e2e/hel728.cjs python3 e2e/run-hel728.py
+```
+
+runner 检查端口空闲，保留上次一次性数据/证据到带时间戳的目录，再启动自己的本地服务；结束时停止自己创建的进程组。默认还会运行两份旧脚本并报告失败。用 `HEL728_WEB_DIR` 可将前端改为干净基线副本，完成同环境对照。
+
+未验证真实 GPU/付费模型的生成质量；没有操作测试站用户资料或执行真实收费生成。B0 只验证主题与导航地基，B1–B5 的新页面布局、通用存入项目及最终全站动效不在本次完成范围。
diff --git a/e2e/hel728.cjs b/e2e/hel728.cjs
new file mode 100644
index 00000000..352b16ea
--- /dev/null
+++ b/e2e/hel728.cjs
@@ -0,0 +1,397 @@
+// B0 state preservation and navigation checks on the disposable reference stack.
+const { chromium } = require(
+  process.env.PLAYWRIGHT_MODULE_PATH || "playwright",
+);
+const assert = require("node:assert/strict"),
+  fs = require("node:fs"),
+  path = require("node:path");
+const out = path.resolve("e2e/shots/hel728"),
+  f = JSON.parse(fs.readFileSync("e2e/shots/reference/fixtures.json"));
+const WEB = "http://127.0.0.1:5173",
+  API = "http://127.0.0.1:8247";
+const themes = ["night", "day", "grade", "bluehour"],
+  names = ["夜片场", "日光棚", "调色间", "蓝调时刻"];
+const checks = [];
+function ok(name, value) {
+  assert(value, name);
+  checks.push(name);
+  console.log("PASS", name);
+}
+async function change(p, id) {
+  await p.getByRole("button", { name: "主题", exact: true }).click();
+  await p
+    .locator(".choice")
+    .filter({ hasText: names[themes.indexOf(id)] })
+    .click();
+  await p.keyboard.press("Escape");
+  await p.waitForFunction(
+    (id) => document.documentElement.dataset.theme === id,
+    id,
+  );
+}
+async function waitJob(id) {
+  for (let i = 0; i < 120; i++) {
+    const j = (
+      await fetch(API + "/api/playground/jobs").then((r) => r.json())
+    ).find((j) => j.id === id);
+    assert(j, "submitted job remains in queue");
+    if (j.status === "done") return j;
+    assert(!["failed", "cancelled"].includes(j.status), JSON.stringify(j));
+    await new Promise((r) => setTimeout(r, 200));
+  }
+  throw Error("job timed out");
+}
+(async () => {
+  const browser = await chromium.launch({
+    executablePath: process.env.CHROMIUM_EXECUTABLE_PATH,
+    headless: true,
+    args: ["--no-sandbox"],
+  });
+  const errors = [];
+  const modepath = "e2e/fake_mode.json",
+    saved = fs.existsSync(modepath) ? fs.readFileSync(modepath) : null;
+  try {
+    const context = await browser.newContext({
+        viewport: { width: 1440, height: 900 },
+      }),
+      p = await context.newPage();
+    p.on(
+      "pageerror",
+      (e) => (errors.push(e.message), console.error("PAGEERROR", e.stack)),
+    );
+    await p.goto(WEB + "/image?wf=" + f.dual);
+    await p.locator("#desk-prompt").waitFor();
+    ok(
+      "默认主题为夜片场",
+      await p.evaluate(
+        () => document.documentElement.dataset.theme === "night",
+      ),
+    );
+    await p.locator("#desk-prompt").fill("切换主题时保留的半篇提示词");
+    await p.locator("#desk-negative").fill("反向草稿");
+    await p
+      .locator("#desk-prompt")
+      .evaluate((e) => (window.__promptElement = e));
+    for (const id of themes) {
+      await change(p, id);
+      ok(
+        id + " 保留原编辑组件和正反向草稿",
+        (await p
+          .locator("#desk-prompt")
+          .evaluate(
+            (e) =>
+              e === window.__promptElement &&
+              e.value === "切换主题时保留的半篇提示词",
+          )) && (await p.locator("#desk-negative").inputValue()) === "反向草稿",
+      );
+    }
+    await p.reload();
+    await p.locator("#desk-prompt").waitFor();
+    ok(
+      "刷新恢复主题和草稿",
+      (await p.evaluate(
+        () => document.documentElement.dataset.theme === "bluehour",
+      )) &&
+        (await p.locator("#desk-prompt").inputValue()) ===
+          "切换主题时保留的半篇提示词",
+    );
+    // Keyboard selection and focus return use the existing layered Modal.
+    const trigger = p.getByRole("button", { name: "主题", exact: true });
+    await trigger.click();
+    await p.locator(".choice").first().focus();
+    await p.keyboard.press("ArrowDown");
+    ok(
+      "方向键移动主题选项焦点",
+      await p
+        .locator(".choice")
+        .nth(1)
+        .evaluate((e) => document.activeElement === e),
+    );
+    await p.keyboard.press("Enter");
+    await p.keyboard.press("Escape");
+    ok(
+      "Esc 关闭并恢复入口焦点",
+      await trigger.evaluate((e) => document.activeElement === e),
+    );
+    // All source URL parameters survive the temporary gateway.
+    const q = new URLSearchParams({
+      kind: "video",
+      wf: String(f.h3),
+      from: "workbench",
+      project: String(f.project),
+      stage: "shot",
+      source_kind: "shot",
+      source_id: "s1",
+      label: "镜头一",
+      prompt: "上下文提示词",
+      negative: "上下文反向",
+      duration: "6",
+      mode: "image2video",
+    });
+    await p.goto(WEB + "/create?" + q + "#source");
+    await p.locator("#desk-prompt").waitFor();
+    ok(
+      "创作台兼容入口保留全部参数及片段",
+      new URL(p.url()).pathname === "/video" &&
+        [...q].every(([k, v]) => new URL(p.url()).searchParams.get(k) === v) &&
+        new URL(p.url()).hash === "#source",
+    );
+    await p.goto(WEB + "/video?wf=" + f.h3);
+    await p.getByRole("button", { name: "管理素材", exact: true }).click();
+    const first = p
+        .locator(".a-slot")
+        .filter({ has: p.getByText("首帧", { exact: true }) }),
+      last = p
+        .locator(".a-slot")
+        .filter({ has: p.getByText("尾帧", { exact: true }) });
+    await first.waitFor();
+    await first
+      .locator("input[type=file]")
+      .setInputFiles("calliope-web/static/refract/coast.jpg");
+    await last
+      .locator("input[type=file]")
+      .setInputFiles("calliope-web/static/refract/arch.jpg");
+    await first.locator("img").waitFor();
+    await last.locator("img").waitFor();
+    await p.locator("#desk-prompt").fill("上传和进行中任务保留");
+    const sources = [
+      await first.locator("img").getAttribute("src"),
+      await last.locator("img").getAttribute("src"),
+    ];
+    await p.getByRole("button", { name: "完成", exact: true }).click();
+    await p.locator("#desk-prompt").evaluate((e) => (window.__videoPrompt = e));
+    fs.writeFileSync(
+      modepath,
+      JSON.stringify({ mode: "ok", delay_sec: 12, videos: true }),
+    );
+    const response = p.waitForResponse(
+      (r) =>
+        r.url().endsWith("/api/playground/generate") &&
+        r.request().method() === "POST",
+    );
+    await p.locator(".gen").click();
+    const job = (await (await response).json()).job;
+    ok("隔离真实队列已收到任务", !!job.id);
+    for (const id of themes) {
+      await change(p, id);
+      ok(
+        id + " 上传素材和运行中编辑状态保留",
+        (await p.locator(".media-token img").nth(0).getAttribute("src")) ===
+          sources[0] &&
+          (await p.locator(".media-token img").nth(1).getAttribute("src")) ===
+            sources[1] &&
+          (await p
+            .locator("#desk-prompt")
+            .evaluate(
+              (e) =>
+                e === window.__videoPrompt &&
+                e.value === "上传和进行中任务保留",
+            )),
+      );
+    }
+    const completed = await waitJob(job.id);
+    ok(
+      "切主题后原任务完成且产物归属不变",
+      completed.workflow_id === f.h3 && completed.output_paths.length > 0,
+    );
+    await p.locator(".artboard video").waitFor();
+    await change(p, "day");
+    ok(
+      "切主题保留视频节点和暂停状态",
+      await p
+        .locator(".artboard video")
+        .evaluate((v) => v.paused && !v.autoplay),
+    );
+    await p.screenshot({ path: path.join(out, "uploaded-video-state.png") });
+    await p.goto(WEB + "/agents");
+    await p.locator(".agent-composer textarea").fill("智能体任务输入草稿");
+    await p
+      .locator(".agent-composer textarea")
+      .evaluate((e) => (window.__agentElement = e));
+    await change(p, "night");
+    ok(
+      "切主题保留智能体任务输入组件和草稿",
+      await p
+        .locator(".agent-composer textarea")
+        .evaluate(
+          (e) =>
+            e === window.__agentElement && e.value === "智能体任务输入草稿",
+        ),
+    );
+    // Preserve dirty settings separately from the appearance section.
+    await p.goto(WEB + "/settings");
+    await p.locator("input[type=number]").first().fill("2");
+    await change(p, "grade");
+    ok(
+      "切主题保留未保存设置",
+      (await p.locator("input[type=number]").first().inputValue()) === "2",
+    );
+    await p.getByRole("button", { name: "放弃", exact: true }).click();
+    await p.goto(WEB + "/settings?tab=appearance");
+    await p.locator(".choices").waitFor();
+    await p.emulateMedia({ reducedMotion: "reduce" });
+    for (const size of [
+      [1440, 900],
+      [1366, 768],
+      [1280, 720],
+    ]) {
+      await p.setViewportSize({ width: size[0], height: size[1] });
+      for (const id of themes) {
+        await p
+          .locator(".choice")
+          .filter({ hasText: names[themes.indexOf(id)] })
+          .click();
+        ok(
+          `${size} ${id} 导航入口和四主题完整可见`,
+          (await p
+            .locator(".sidebar")
+            .evaluate((e) => e.scrollHeight <= e.clientHeight + 1)) &&
+            (await p
+              .locator(".choices")
+              .evaluate((e) => e.getBoundingClientRect().right <= innerWidth)),
+        );
+        await p.screenshot({
+          path: path.join(out, `${id}-${size[0]}x${size[1]}.png`),
+        });
+      }
+    }
+    await p.goto(WEB + "/model-connections?tab=llm&keep=hello#models");
+    await p.locator(".sidebar").waitFor();
+    ok(
+      "模型连接入口保留页签参数",
+      new URL(p.url()).pathname === "/models" &&
+        new URL(p.url()).searchParams.get("keep") === "hello" &&
+        new URL(p.url()).hash === "#models",
+    );
+    await p.goto(
+      WEB + "/project/" + f.project + "?stage=assets&keep=source#draft",
+    );
+    await p.locator(".sidebar").waitFor();
+    ok(
+      "旧项目链接保留阶段参数",
+      new URL(p.url()).pathname === "/workbench/" + f.project &&
+        new URL(p.url()).searchParams.get("keep") === "source" &&
+        new URL(p.url()).hash === "#draft",
+    );
+    // Explicit legacy tools remain searchable until B1/B2 relocate them.
+    await p.keyboard.press("Control+k");
+    for (const label of ["视频创作", "大语言模型", "试验台", "三维搭景"])
+      ok(
+        "全局搜索保留 " + label,
+        (await p.getByRole("option").filter({ hasText: label }).count()) > 0,
+      );
+    await p.keyboard.press("Escape");
+    // Block framework scripts to verify the remembered theme before hydration.
+    const colours = [
+      "rgb(7, 8, 12)",
+      "rgb(233, 228, 218)",
+      "rgb(27, 27, 28)",
+      "rgb(10, 16, 41)",
+    ];
+    for (let n = 0; n < themes.length; n++) {
+      const cold = await browser.newContext();
+      await cold.addInitScript(
+        (id) => localStorage.setItem("aigc-theme", id),
+        themes[n],
+      );
+      const coldPage = await cold.newPage();
+      await coldPage.route("**/*", (route) =>
+        route.request().resourceType() === "script"
+          ? route.abort()
+          : route.continue(),
+      );
+      await coldPage.goto(WEB + "/", { waitUntil: "domcontentloaded" });
+      ok(
+        themes[n] + " 首次绘制前恢复主题及底色",
+        await coldPage.evaluate(
+          ({ id, colour }) =>
+            document.documentElement.dataset.theme === id &&
+            getComputedStyle(document.documentElement).backgroundColor ===
+              colour &&
+            !document.querySelector(".refract-shell"),
+          { id: themes[n], colour: colours[n] },
+        ),
+      );
+      await cold.close();
+    }
+    const reference = await browser.newPage();
+    await reference.goto(
+      "file://" + path.resolve("design/nocturne/reference.html"),
+    );
+    await reference.evaluate(() => {
+      document.documentElement.classList.add("capture", "reduce");
+      go("settings");
+    });
+    for (const [width, height] of [
+      [1440, 900],
+      [1366, 768],
+      [1280, 720],
+    ]) {
+      await reference.setViewportSize({ width, height });
+      await reference.screenshot({
+        path: path.join(out, `reference-${width}x${height}.png`),
+      });
+    }
+    await reference.close();
+    const blocked = await browser.newContext();
+    await blocked.addInitScript(() =>
+      Object.defineProperty(window, "localStorage", {
+        get() {
+          throw new DOMException("blocked", "SecurityError");
+        },
+      }),
+    );
+    const b = await blocked.newPage();
+    b.on(
+      "pageerror",
+      (e) => (errors.push(e.message), console.error("PAGEERROR", e.stack)),
+    );
+    await b.goto(WEB + "/image?wf=" + f.dual);
+    await b.locator("#desk-prompt").fill("禁止存储仍可编辑");
+    await change(b, "day");
+    await b.getByRole("button", { name: "主题", exact: true }).click();
+    ok(
+      "存储被禁用仍可切换且显示提示",
+      await b
+        .getByText("浏览器禁止本地存储：本次有效，其他操作不受影响")
+        .isVisible(),
+    );
+    await b.keyboard.press("Escape");
+    ok(
+      "存储被禁用保留输入",
+      (await b.locator("#desk-prompt").inputValue()) === "禁止存储仍可编辑",
+    );
+    await b.screenshot({ path: path.join(out, "storage-blocked.png") });
+    const invalid = await browser.newContext();
+    await invalid.addInitScript(() =>
+      localStorage.setItem("aigc-theme", "invalid"),
+    );
+    const i = await invalid.newPage();
+    await i.goto(WEB + "/settings?tab=appearance");
+    await i.locator(".choices").waitFor();
+    ok(
+      "无效存储回退夜片场",
+      await i.evaluate(
+        () => document.documentElement.dataset.theme === "night",
+      ),
+    );
+    if (errors.length) console.error("BROWSER ERRORS", errors);
+    fs.writeFileSync(
+      path.join(out, "results.json"),
+      JSON.stringify({ checks, errors }, null, 2),
+    );
+    ok("浏览器无运行错误", errors.length === 0);
+    fs.writeFileSync(
+      path.join(out, "results.json"),
+      JSON.stringify({ checks, errors }, null, 2),
+    );
+    console.log("TOTAL", checks.length);
+  } finally {
+    if (saved) fs.writeFileSync(modepath, saved);
+    else if (fs.existsSync(modepath)) fs.unlinkSync(modepath);
+    await browser.close();
+  }
+})().catch((e) => {
+  console.error(e);
+  process.exitCode = 1;
+});
diff --git a/e2e/run-hel728.py b/e2e/run-hel728.py
new file mode 100644
index 00000000..9b7b08a8
--- /dev/null
+++ b/e2e/run-hel728.py
@@ -0,0 +1,43 @@
+"""Run the isolated regression stack in the foreground and always stop children."""
+import os, signal, socket, subprocess, time, urllib.request
+from pathlib import Path
+root=Path(__file__).resolve().parents[1]
+os.chdir(root)
+py=str(root/'calliope-backend/.venv/bin/python')
+logs=root/'e2e/shots/hel728'; logs.mkdir(parents=True,exist_ok=True)
+env=os.environ.copy()
+for port in [8247,5173,18188,18189]:
+ with socket.socket() as probe:
+  assert probe.connect_ex(('127.0.0.1',port)) != 0, f'Test port {port} is already in use'
+# Every run gets fresh disposable state; retain prior evidence instead of deleting it.
+reference=root/'e2e/shots/reference'
+if reference.exists():reference.rename(reference.with_name('reference.previous-'+str(time.time_ns())))
+processes=[]; handles=[]
+try:
+ for name,cmd in [('api',[py,'e2e/reference/server.py']),('comfy',[py,'e2e/fake_comfy.py']),('llm',[py,'e2e/reference/fake_llm.py']),('web',['npm','--prefix',os.environ.get('HEL728_WEB_DIR','calliope-web'),'run','dev'])]:
+  h=open(logs/(name+'.log'),'w');handles.append(h);processes.append(subprocess.Popen(cmd,stdout=h,stderr=subprocess.STDOUT,env=env,start_new_session=True))
+ for url in ['http://127.0.0.1:8247/api/health','http://127.0.0.1:5173']:
+  for i in range(100):
+   try:
+    urllib.request.urlopen(url,timeout=2); break
+   except Exception:
+    if any(p.poll() is not None for p in processes): raise RuntimeError('A test service failed')
+    if i==99:raise
+    time.sleep(.2)
+ for cmd in [[py,'e2e/seed.py'],[py,'e2e/reference/seed.py']]:subprocess.run(cmd,env=env,check=True)
+ failures=[]
+ scripts=os.environ.get('HEL728_TESTS','e2e/reference/check.cjs,e2e/reference/check-copy-fallback.cjs,e2e/hel728.cjs').split(',')
+ for script in scripts:
+  print('RUN',script,flush=True)
+  result=subprocess.run(['node',script],env=env)
+  if result.returncode:failures.append(script)
+ print('FAILED SCRIPTS',failures,flush=True)
+ if failures:raise SystemExit(1)
+
+finally:
+ for p in processes:
+  if p.poll() is None:os.killpg(p.pid,signal.SIGTERM)
+ for p in processes:
+  try:p.wait(timeout=10)
+  except subprocess.TimeoutExpired:os.killpg(p.pid,signal.SIGKILL);p.wait()
+ for h in handles:h.close()
-- 
2.54.0