fix(agent): retain daylight input focus border from sample

Co-authored-by: multica-agent <github@multica.ai>

calliope-backend/contracts.json

@@ -156,7 +156,8 @@
     "job.started",
     "shot.capture.saved",
     "shot.updated",
-    "story.ready"
+    "story.ready",
+    "workbench.stage.updated"
   ],
   "prompt_profiles": [
     "minimax_h3_ref",

calliope-backend/scripts/build_widget_orders.py

@@ -0,0 +1,128 @@
+"""Regenerate ``src/calliope/comfyui/ui_widget_orders.py`` (HEL-681).
+
+Offline widget-order registry for the UI→API converter. Sources, in priority:
+
+1. ``widgets_values_named`` instances across ``example_ComfyUI_workflows``
+   (including subgraph inner nodes) — the frontend serializes named widgets
+   in widget order, so the key order IS the serialization order;
+2. the repo's 10 ground-truth API exports (root ``*_API.json``) — scalar
+   input names in export order (control_after_generate entries are absent
+   there; the converter's walk skips them positionally).
+
+Run from anywhere inside the repo:
+    python scripts/build_widget_orders.py
+"""
+
+from __future__ import annotations
+
+import collections
+import json
+from pathlib import Path
+
+BACKEND = Path(__file__).resolve().parents[1]
+REPO = BACKEND.parent
+EXAMPLES = REPO / "example_ComfyUI_workflows"
+OUT = BACKEND / "src" / "calliope" / "comfyui" / "ui_widget_orders.py"
+
+BUTTONS = {"preview", "audioUI", "compare_view", "ToggleableColorPicker", "imagebrowser"}
+MAX_SIGNATURES = 3
+MAX_ORDER_LEN = 48
+
+# Hand-curated fallbacks for node classes the corpus never serializes with
+# names (classic core/custom widgets whose order is stable and public).
+CURATED: dict[str, list[list[str]]] = {
+    "PrimitiveNode": [["value"]],
+    "Seed (rgthree)": [["seed"]],
+}
+
+
+def _iter_ui_nodes() -> list[dict]:
+    nodes: list[dict] = []
+    for path in sorted(EXAMPLES.rglob("*.json")):
+        try:
+            data = json.loads(path.read_text(encoding="utf-8"))
+        except (json.JSONDecodeError, OSError):
+            continue
+        if not (isinstance(data, dict) and isinstance(data.get("nodes"), list)):
+            continue
+        nodes.extend(n for n in data["nodes"] if isinstance(n, dict))
+        for sub in data.get("definitions", {}).get("subgraphs", []) or []:
+            if isinstance(sub, dict):
+                nodes.extend(n for n in sub.get("nodes", []) or [] if isinstance(n, dict))
+    return nodes
+
+
+def _iter_api_workflows() -> list[dict]:
+    out: list[dict] = []
+    for path in sorted(EXAMPLES.glob("*_API.json")):
+        try:
+            data = json.loads(path.read_text(encoding="utf-8"))
+        except (json.JSONDecodeError, OSError):
+            continue
+        if isinstance(data, dict) and "nodes" not in data:
+            out.append(data)
+    return out
+
+
+def main() -> None:
+    learned: dict[str, collections.Counter[tuple[str, ...]]] = collections.defaultdict(
+        collections.Counter
+    )
+    for node in _iter_ui_nodes():
+        named = node.get("widgets_values_named")
+        if not isinstance(named, dict) or not named:
+            continue
+        keys = tuple(
+            str(k) for k in named.keys() if k and k not in BUTTONS
+        )
+        if keys and len(keys) <= MAX_ORDER_LEN:
+            learned[str(node.get("type") or "")][keys] += 1
+
+    for workflow in _iter_api_workflows():
+        for node in workflow.values():
+            if not isinstance(node, dict):
+                continue
+            names = [
+                str(k)
+                for k, v in (node.get("inputs") or {}).items()
+                if not isinstance(v, list) and k and k not in BUTTONS
+            ]
+            if len(names) > MAX_ORDER_LEN:
+                continue
+            # Display nodes (PreviewAny…) carry zero scalar inputs — that
+            # empty order is real signal: their positional arrays are pure
+            # button leftovers and map to {}.
+            learned[str(node.get("class_type") or "")][tuple(names)] += 1
+
+    registry: dict[str, list[list[str]]] = {}
+    for node_type, counter in sorted(learned.items()):
+        if not node_type:
+            continue
+        orders: list[list[str]] = []
+        for signature, _count in counter.most_common(MAX_SIGNATURES):
+            orders.append(list(signature))
+        if orders:
+            registry[node_type] = orders
+    for node_type, orders in CURATED.items():
+        registry.setdefault(node_type, orders)
+
+    body = json.dumps(registry, ensure_ascii=False, indent=1, sort_keys=True)
+    OUT.write_text(
+        '"""GENERATED by scripts/build_widget_orders.py — do not edit by hand.\n'
+        "\n"
+        "Widget-order registry for the UI→API converter: class_type → candidate\n"
+        "widget name orders, learned from the repo's named-widget UI files and\n"
+        "ground-truth API exports (HEL-681).\n"
+        '"""\n'
+        "\n"
+        "from __future__ import annotations\n"
+        "\n"
+        f"WIDGET_ORDERS: dict[str, list[list[str]]] = {body}\n",
+        encoding="utf-8",
+    )
+    total = sum(len(o) for orders in registry.values() for o in orders)
+    print(f"wrote {OUT.name}: {len(registry)} node types, {total} orders total")
+
+
+if __name__ == "__main__":
+    main()

calliope-backend/scripts/ui_import_dryrun.py

@@ -0,0 +1,170 @@
+"""Generate the HEL-681 dry-run report over the repo's UI workflow library.
+
+Walks ``example_ComfyUI_workflows`` (or ``--root``), runs every file through
+the production converter + lint + parser pipeline (exactly what
+``POST /api/workflows/convert`` does, minus HTTP), and writes a JSON detail
+file plus a human-readable Markdown summary. Read-only: nothing is imported,
+no DB is touched.
+
+Usage:
+    python scripts/ui_import_dryrun.py [--root DIR] [--out PREFIX]
+"""
+
+from __future__ import annotations
+
+import argparse
+import collections
+import json
+import sys
+from pathlib import Path
+
+BACKEND = Path(__file__).resolve().parents[1]
+sys.path.insert(0, str(BACKEND / "src"))
+
+from calliope.comfyui.lint import workflow_warnings  # noqa: E402
+from calliope.comfyui.metadata import suggested_metadata  # noqa: E402
+from calliope.comfyui.parser import classify_usage  # noqa: E402
+from calliope.comfyui.ui_convert import convert_ui_workflow  # noqa: E402
+
+REPO = BACKEND.parent
+
+
+def main() -> int:
+    parser = argparse.ArgumentParser()
+    parser.add_argument("--root", default=str(REPO / "example_ComfyUI_workflows"))
+    parser.add_argument("--out", default=str(REPO / "dryrun_report"))
+    args = parser.parse_args()
+    root = Path(args.root)
+    out_prefix = Path(args.out)
+
+    entries = []
+    for path in sorted(root.rglob("*.json")):
+        try:
+            data = json.loads(path.read_text(encoding="utf-8"))
+        except (json.JSONDecodeError, OSError) as exc:
+            entries.append(
+                {
+                    "source_path": str(path.relative_to(root)),
+                    "status": "fail",
+                    "issues": [{"code": "unreadable", "message": str(exc)}],
+                }
+            )
+            continue
+        if not (isinstance(data, dict) and isinstance(data.get("nodes"), list)):
+            continue  # API-format / non-workflow files are out of scope
+        rel = str(path.relative_to(root))
+        result = convert_ui_workflow(data)
+        entry: dict = {
+            "source_path": rel,
+            "status": result.status,
+            "needs_confirmation": result.needs_confirmation,
+            "issues": [
+                {"node_id": i.node_id, "code": i.code, "level": i.level, "message": i.message}
+                for i in result.issues
+            ],
+        }
+        if result.workflow is not None:
+            entry["node_count"] = len(result.workflow)
+            entry["suggested"] = suggested_metadata(result.workflow, rel, data)
+            errors = [w for w in workflow_warnings(result.workflow) if w["level"] == "error"]
+            entry["lint_errors"] = [e["code"] for e in errors]
+            entry["importable"] = not result.needs_confirmation and not errors
+        else:
+            entry["importable"] = False
+        entries.append(entry)
+
+    counts = collections.Counter(e["status"] for e in entries)
+    code_counts = collections.Counter(
+        i["code"] for e in entries for i in e["issues"]
+    )
+    category_counts = collections.Counter(
+        (e.get("suggested") or {}).get("category") or "?" for e in entries
+    )
+    family_counts = collections.Counter(
+        (e.get("suggested") or {}).get("model_family") or "?" for e in entries
+    )
+    importable = sum(1 for e in entries if e.get("importable"))
+    needs_confirmation = sum(1 for e in entries if e["needs_confirmation"])
+    lint_blocked = [e for e in entries if e.get("lint_errors")]
+
+    detail = {
+        "root": str(root),
+        "total": len(entries),
+        "status_counts": dict(counts),
+        "issue_code_counts": dict(code_counts),
+        "importable": importable,
+        "needs_confirmation": needs_confirmation,
+        "lint_blocked": [e["source_path"] for e in lint_blocked],
+        "files": entries,
+    }
+    out_prefix.parent.mkdir(parents=True, exist_ok=True)
+    (out_prefix.with_suffix(".json")).write_text(
+        json.dumps(detail, ensure_ascii=False, indent=1), encoding="utf-8"
+    )
+
+    lines = [
+        "# HEL-681 工作流 UI→API 转换 dry-run 报告",
+        "",
+        f"- 扫描目录：`{root}`（根目录 10 个 API 格式旧文件不在本管线范围）",
+        f"- UI 格式文件总数：**{len(entries)}**",
+        f"- 转换结果：ok **{counts.get('ok', 0)}** / warn **{counts.get('warn', 0)}** / fail **{counts.get('fail', 0)}**",
+        f"- 其中「需人工确认」（控件无法可靠映射，禁止直接导入）：**{needs_confirmation}**",
+        f"- 通过转换＋lint 后可直接导入：**{importable}**",
+        f"- 转换成功但被现有 lint 拦截（导入时按阻止处理）：**{len(lint_blocked)}**",
+        "",
+        "## 分类分布（自动提取）",
+        "",
+        "| 分类 | 数量 |",
+        "|---|---|",
+    ]
+    for cat, n in sorted(category_counts.items()):
+        lines.append(f"| {cat} | {n} |")
+    lines += ["", "## 模型家族分布（自动提取）", "", "| 家族 | 数量 |", "|---|---|"]
+    for fam, n in sorted(family_counts.items(), key=lambda kv: -kv[1]):
+        lines.append(f"| {fam} | {n} |")
+    lines += ["", "## 问题代码统计", "", "| 代码 | 次数 | 含义 |", "|---|---|---|"]
+    meaning = {
+        "muted_input_dropped": "上游节点被静音，输入按未连接处理",
+        "variable_upstream_dropped": "Set/Get 变量上游被旁路，取值按未连接处理",
+        "get_without_set": "GetNode 没有同名 SetNode",
+        "widget_unmapped": "控件值无法可靠映射到输入名（需人工确认）",
+        "widget_order_mismatch": "控件数量与已知顺序不符（需人工确认）",
+        "no_output_node": "图中无已知输出节点，全部活跃节点保留待确认",
+        "cyclic_variable": "Set/Get 循环（FOR 循环流），该连线按未连接处理",
+        "dangling_link": "连线指向不存在的节点",
+    }
+    for code, n in code_counts.most_common():
+        lines.append(f"| `{code}` | {n} | {meaning.get(code, '')} |")
+    lines += ["", "## 需人工确认文件清单", ""]
+    for e in entries:
+        if e["needs_confirmation"]:
+            reasons = sorted({i["code"] for i in e["issues"]})[:3]
+            lines.append(f"- `{e['source_path']}`（{', '.join(reasons)}）")
+    lines += ["", "## lint 拦截文件清单", ""]
+    for e in lint_blocked:
+        lines.append(f"- `{e['source_path']}`（{', '.join(e['lint_errors'])}）")
+    lines += [
+        "",
+        "## 逐文件结果",
+        "",
+        "| 文件 | 状态 | 节点数 | 分类 | 模型家族 | 用途 | 问题 |",
+        "|---|---|---|---|---|---|---|",
+    ]
+    for e in entries:
+        sug = e.get("suggested") or {}
+        issues = collections.Counter(i["code"] for i in e["issues"])
+        issue_text = ", ".join(f"{c}×{n}" for c, n in issues.most_common(2)) or "-"
+        usage = sug.get("usage") or ("待定" if sug.get("usage_ambiguous") else "-")
+        lines.append(
+            f"| `{e['source_path']}` | {e['status']} | {e.get('node_count', '-')} "
+            f"| {sug.get('category') or '-'} | {sug.get('model_family') or '-'} "
+            f"| {usage} | {issue_text} |"
+        )
+    (out_prefix.with_suffix(".md")).write_text("\n".join(lines) + "\n", encoding="utf-8")
+    print(f"{len(entries)} files: {dict(counts)}, importable={importable}, nc={needs_confirmation}")
+    print(f"report → {out_prefix}.md / {out_prefix}.json")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

calliope-backend/src/calliope/agent/deliverables.py

@@ -0,0 +1,52 @@
+"""Capture successful task replies without treating chat/errors as confirmed work."""
+
+from __future__ import annotations
+
+from calliope.config import settings
+from calliope.db import get_db
+
+
+def complete_task(session_id: int, final: str) -> None:
+    from calliope.agent.harness.plugins.interaction import latest_open_question
+
+    conn = get_db(settings.db_path)
+    try:
+        if latest_open_question(session_id):
+            conn.execute(
+                "UPDATE agent_sessions SET task_status='awaiting_input' WHERE id=?", (session_id,)
+            )
+        else:
+            session = conn.execute(
+                "SELECT * FROM agent_sessions WHERE id=?", (session_id,)
+            ).fetchone()
+            message = conn.execute(
+                "SELECT id FROM agent_messages WHERE session_id=? AND role='assistant' "
+                "AND content=? AND (status IS NULL OR status NOT IN ('error','cancelled')) "
+                "ORDER BY id DESC LIMIT 1",
+                (session_id, final),
+            ).fetchone()
+            if session and message and final.strip():
+                conn.execute(
+                    "INSERT OR IGNORE INTO agent_deliverables "
+                    "(session_id,source_message_id,project_id,stage_key,title,content) "
+                    "VALUES (?,?,?,?,?,?)",
+                    (
+                        session_id,
+                        message["id"],
+                        session["project_id"],
+                        session["agent_key"] or "script",
+                        session["title"][:200],
+                        final,
+                    ),
+                )
+                conn.execute(
+                    "UPDATE agent_sessions SET task_status='awaiting_confirm' WHERE id=?",
+                    (session_id,),
+                )
+            else:
+                conn.execute(
+                    "UPDATE agent_sessions SET task_status='completed' WHERE id=?", (session_id,)
+                )
+        conn.commit()
+    finally:
+        conn.close()

calliope-backend/src/calliope/agent/harness/runner.py

@@ -40,8 +40,10 @@ class AgentRunner:
         conn = self._db()
         try:
             conn.execute(
-                "UPDATE agent_sessions SET status = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?",
-                (status, session_id),
+                "UPDATE agent_sessions SET status = ?, task_status=CASE "
+                "WHEN ? = 'running' THEN 'running' WHEN ? = 'error' THEN 'error' "
+                "ELSE task_status END, updated_at = CURRENT_TIMESTAMP WHERE id = ?",
+                (status, status, status, session_id),
             )
             conn.commit()
         finally:
@@ -201,7 +203,8 @@ class AgentRunner:
             ).fetchall()]
             if stuck:
                 conn.execute(
-                    "UPDATE agent_sessions SET status = 'idle' WHERE status = 'running'"
+                    "UPDATE agent_sessions SET status = 'idle', task_status='interrupted' "
+                    "WHERE status = 'running'"
                 )
                 conn.commit()
                 logger.warning(
@@ -295,6 +298,15 @@ class AgentRunner:
                 finally:
                     conn.close()
 
+            conn = self._db()
+            try:
+                conn.execute(
+                    "UPDATE agent_sessions SET task_summary=? WHERE id=?",
+                    (user_message.strip()[:300], session_id),
+                )
+                conn.commit()
+            finally:
+                conn.close()
             self._set_status(session_id, "running")
             task = asyncio.create_task(
                 self._run_session(session_id), name=f"agent-session-{session_id}"
@@ -398,6 +410,9 @@ class AgentRunner:
                 session_id=session_id,
                 on_message=self._make_message_sink(session_id, default_agent_name),
             )
+            from calliope.agent.deliverables import complete_task
+
+            complete_task(session_id, final)
             # Final answer is persisted + broadcast by the loop's emit() call
             # (which goes through the message sink). Only set status here.
             self._set_status(session_id, "idle")
@@ -408,6 +423,14 @@ class AgentRunner:
                 content="— run cancelled —",
                 status="cancelled",
             )
+            conn = self._db()
+            try:
+                conn.execute(
+                    "UPDATE agent_sessions SET task_status='cancelled' WHERE id=?", (session_id,)
+                )
+                conn.commit()
+            finally:
+                conn.close()
             self._set_status(session_id, "idle")
             raise
         except Exception as exc:  # noqa: BLE001 — surfaced to the chat as the reply

calliope-backend/src/calliope/comfyui/metadata.py

@@ -0,0 +1,160 @@
+"""Suggested workflow metadata for imports (HEL-681 / S2 data layer).
+
+Everything here derives from two honest sources: the repo directory the file
+came from (category) and the converted API graph itself (usage, media in/out,
+model family, note text). Per HEL-675's inventory, clean display names and
+tags stay human work — the suggestion is a starting point, never a guess that
+hides uncertainty.
+"""
+
+from __future__ import annotations
+
+import re
+from typing import Any
+
+from calliope.comfyui.parser import (
+    classify_usage,
+    parse_dynamic_inputs,
+    parse_dynamic_outputs,
+)
+
+# Repo top-level directory → (category key, display label). Directory names
+# are mapping sources only — they never surface to users verbatim.
+CATEGORY_DIRS: dict[str, tuple[str, str]] = {
+    "0-基础处理：图像合并-音频分离-视频截取合并-图像视频放大": ("basic", "基础处理"),
+    "1-语音生成": ("audio_tts", "语音生成"),
+    "2-音乐生成": ("music", "音乐生成"),
+    "3-图像生成": ("image", "图像生成"),
+    "4-视频生成": ("video", "视频生成"),
+    "5-数字人": ("digital_human", "数字人"),
+    "6-动作迁移": ("motion_transfer", "动作迁移"),
+}
+
+# Evidence patterns → model family. Shared VAE/text-encoder files must NOT
+# count (HEL-675: Anima/Z-Image graphs reference qwen_image_vae and get
+# mislabeled Qwen — `qwen.?image(?!_vae)` is deliberate).
+_FAMILY_PATTERNS: tuple[tuple[str, str], ...] = (
+    (r"minimax[_\-]?(music|_audio)|MiniMaxMusic", "MiniMax-Music"),
+    (r"minimax.?h3|minimax_h3|h3[-_]realism|fl2v[aa]?", "MiniMax-H3"),
+    (r"ltx[-_.]?2", "LTX-2.5"),
+    (r"ltx", "LTX"),
+    (r"krea", "Krea2"),
+    (r"qwen.?image(?!_vae)|qwen_image_2|qwen2vl|qwen3vl|Qwen3?[-.]?ASR|qwen3?[-_.]?tts", "Qwen"),
+    (r"z[._-]?image", "Z-Image"),
+    (r"flux", "Flux"),
+    (r"\bwan", "Wan"),
+    (r"ace[_-]?step", "ACE-Step"),
+    (r"index[_-]?tts", "IndexTTS2"),
+    (r"anima[-_.]?(turbo|klein)", "Anima"),
+    (r"sdpose", "SDPose"),
+    (r"gemma", "Gemma"),
+    (r"instantmesh|instant_mesh", "InstantMesh"),
+    (r"hidream", "HiDream"),
+)
+_FAMILY_RE = [(re.compile(pat, re.IGNORECASE), fam) for pat, fam in _FAMILY_PATTERNS]
+
+# Main-model loaders dominate the vote: a UNET/checkpoint reference says far
+# more about the workflow's family than a shared VAE or text encoder does.
+_PRIMARY_LOADER_RE = re.compile(r"UNETLoader|CheckpointLoader|unet|diffusion_model", re.IGNORECASE)
+
+# Directory names that carry family evidence the files' own widget values
+# lack (HEL-675: 14 krea2 files reference no "krea" string at all).
+_FAMILY_DIRS = (
+    (re.compile(r"krea2", re.IGNORECASE), "Krea2"),
+    (re.compile(r"Minimax-h3|uncensored", re.IGNORECASE), "MiniMax-H3"),
+    (re.compile(r"Z-Image", re.IGNORECASE), "Z-Image"),
+    (re.compile(r"Qwen-Image", re.IGNORECASE), "Qwen"),
+    (re.compile(r"^Anima$", re.IGNORECASE), "Anima"),
+    (re.compile(r"Flux", re.IGNORECASE), "Flux"),
+)
+
+_NOTE_TYPES = frozenset({"Note", "MarkdownNote"})
+
+
+def category_from_source_path(source_path: str | None) -> tuple[str | None, str | None]:
+    """(category key, label) derived from the file's repo-relative path."""
+    if not source_path:
+        return None, None
+    head = source_path.replace("\\", "/").split("/", 1)[0]
+    return CATEGORY_DIRS.get(head, (None, None))
+
+
+def model_family_from(workflow: dict[str, Any], source_path: str | None = None) -> str | None:
+    """The graph's dominant model family: main-model loader references weigh
+    triple, other node evidence single, and the repo sub-directory adds a
+    strong vote for families the widget values don't spell out."""
+    votes: dict[str, int] = {}
+    for node in workflow.values():
+        if not isinstance(node, dict):
+            continue
+        class_type = str(node.get("class_type") or "")
+        blob = " ".join(
+            [class_type]
+            + [str(v) for v in (node.get("inputs") or {}).values() if isinstance(v, str)]
+        )
+        weight = 3 if _PRIMARY_LOADER_RE.search(blob) else 1
+        for pattern, family in _FAMILY_RE:
+            if pattern.search(blob):
+                votes[family] = votes.get(family, 0) + weight
+                break  # one vote per node: strongest family that node shows
+    if source_path:
+        parts = source_path.replace("\\", "/").split("/")
+        for part in parts[1:2]:
+            for pattern, family in _FAMILY_DIRS:
+                if pattern.search(part):
+                    votes[family] = votes.get(family, 0) + 2
+    if not votes:
+        return None
+    return max(votes.items(), key=lambda kv: kv[1])[0]
+
+
+def note_description(ui_workflow: dict[str, Any], limit: int = 160) -> str | None:
+    """First non-trivial author note as description material (never final copy)."""
+    for node in ui_workflow.get("nodes") or []:
+        if not isinstance(node, dict) or str(node.get("type")) not in _NOTE_TYPES:
+            continue
+        values = node.get("widgets_values")
+        text = values[0] if isinstance(values, list) and values else None
+        if isinstance(values, dict):
+            text = values.get("text") or next(iter(values.values()), None)
+        if isinstance(text, str):
+            text = text.strip()
+            if len(text) >= 8:
+                return text[:limit].strip()
+    return None
+
+
+def suggested_metadata(
+    converted: dict[str, Any],
+    source_path: str | None = None,
+    ui_workflow: dict[str, Any] | None = None,
+) -> dict[str, Any]:
+    """The import suggestion bundle for one converted workflow."""
+    judgment = classify_usage(converted)
+    media_kinds = ("image", "image_list", "video", "video_list", "audio", "audio_list")
+    media_in = sorted(
+        {
+            entry["kind"].replace("_list", "")
+            for entry in parse_dynamic_inputs(converted)
+            if entry.get("kind") in media_kinds
+        }
+    )
+    media_out = sorted(
+        {
+            str(entry.get("kind"))
+            for entry in parse_dynamic_outputs(converted)
+            if entry.get("kind") in ("image", "video", "audio")
+        }
+    )
+    category, category_label = category_from_source_path(source_path)
+    return {
+        "kind": "video" if "video" in media_out and "image" not in media_out else "image",
+        "usage": judgment["usage"],
+        "usage_ambiguous": judgment["ambiguous"],
+        "category": category,
+        "category_label": category_label,
+        "model_family": model_family_from(converted, source_path),
+        "media_in": media_in,
+        "media_out": media_out,
+        "description": note_description(ui_workflow or {}),
+    }

calliope-backend/src/calliope/comfyui/parser.py

@@ -13,12 +13,14 @@ from calliope.comfyui.registry import (
     IMAGE_OUTPUT_CLASSES,
     IMAGE_URL_CLASSES,
     NUMBER_CLASSES,
+    OPTIONAL_FRAME_INPUTS,
     TEXT_AREA_CLASSES,
     VIDEO_CLASSES,
     VIDEO_OUTPUT_CLASSES,
     ComfyOutputKind,
     class_to_input_kind,
     class_to_output_kind,
+    optional_frame_sibling,
 )
 from calliope.comfyui.roles import (
     USAGE_VALUES,
@@ -689,6 +691,8 @@ def detect_untagged_inputs(workflow: dict[str, Any]) -> list[dict[str, Any]]:
                 )
             )
 
+    media = _with_optional_frames(workflow, media)
+
     results: list[dict[str, Any]] = []
     positives = [t for t in texts if not t[3]]
     negatives = [t for t in texts if t[3]]
@@ -732,6 +736,42 @@ def detect_untagged_inputs(workflow: dict[str, Any]) -> list[dict[str, Any]]:
     return results
 
 
+def _with_optional_frames(
+    workflow: dict[str, Any], media: list[dict[str, Any]]
+) -> list[dict[str, Any]]:
+    """Insert an optional slot after each frame slot whose node also accepts
+    an unwired optional frame (H3 FL2VA: 首帧 → 尾帧)."""
+    out = list(media)
+    for nid, node in sorted(
+        ((str(k), v) for k, v in workflow.items() if isinstance(v, dict)),
+        key=lambda kv: _node_sort_key(kv[0]),
+    ):
+        for field in OPTIONAL_FRAME_INPUTS.get(str(node.get("class_type") or ""), {}):
+            sibling = optional_frame_sibling(node, field)
+            if sibling is None:
+                continue
+            loader_id = str(node["inputs"][sibling][0])
+            loader = workflow.get(loader_id)
+            if not isinstance(loader, dict) or loader.get("class_type") not in IMAGE_CLASSES:
+                continue
+            at = next(
+                (
+                    i
+                    for i, e in enumerate(out)
+                    if e["nodeId"] == _key(loader_id, loader, "image")
+                ),
+                None,
+            )
+            if at is None:
+                continue
+            role, label = _FRAME_SLOT_ROLES[field]
+            out.insert(
+                at + 1,
+                _entry(f"{nid}{FIELD_KEY_SEP}{field}", label, role, "image", None, False),
+            )
+    return out
+
+
 def _is_negative(
     node_id: str, lowered_title: str, consumers: dict[str, list[tuple[str, str]]]
 ) -> bool:

calliope-backend/src/calliope/comfyui/patcher.py

@@ -11,6 +11,7 @@ from calliope.comfyui.registry import (
     VIDEO_CLASSES,
     VIDEO_FILE_CLASSES,
     class_to_patch_field,
+    optional_frame_sibling,
 )
 
 # Input keys of the form "<nodeId>@<widget>" target one named widget on a
@@ -142,6 +143,26 @@ def apply_media_group(
 apply_image_group = apply_media_group
 
 
+def apply_optional_frame(
+    workflow: dict[str, Any], node_id: str, field: str, sibling: str, path: str
+) -> None:
+    """Wire ``path`` into an unwired optional frame input (H3 ``last_frame``)
+    through a new LoadImage cloned from the ``sibling`` frame's loader."""
+    node = workflow[node_id]
+    inputs = dict(node.get("inputs") or {})
+    src = workflow.get(str(inputs[sibling][0]))
+    if isinstance(src, dict) and str(src.get("class_type") or "") in IMAGE_CLASSES:
+        loader = copy.deepcopy(src)
+    else:
+        loader = {"class_type": "LoadImage", "inputs": {}}
+    loader["inputs"] = {**(loader.get("inputs") or {}), "image": path}
+    loader["_meta"] = {"title": "尾帧" if field == "last_frame" else field}
+    nid = _next_node_id(workflow)
+    workflow[nid] = loader
+    inputs[field] = [nid, 0]
+    node["inputs"] = inputs
+
+
 def patch_workflow(
     base: dict[str, Any],
     values_by_node_id: dict[str, Any],
@@ -167,6 +188,10 @@ def patch_workflow(
                 if clean:
                     apply_media_group(patched, key, field, clean)
             continue
+        if field is not None and (sibling := optional_frame_sibling(node, field)):
+            if isinstance(value, str) and value.strip():
+                apply_optional_frame(patched, key, field, sibling, value)
+            continue
         if field is None:
             field = resolve_patch_field(node)
         elif isinstance(inputs.get(field), list):

calliope-backend/src/calliope/comfyui/registry.py

@@ -1,7 +1,7 @@
 """Unified class_type → kind + patch-field registry (MuseAgent port)."""
 from __future__ import annotations
 
-from typing import Literal
+from typing import Any, Literal
 
 ComfyInputKind = Literal["text", "textarea", "number", "image", "image_url", "audio", "video"]
 ComfyOutputKind = Literal["image", "video", "other"]
@@ -33,6 +33,24 @@ IMAGE_OUTPUT_CLASSES = frozenset(
     {"SaveImage", "PreviewImage", "SaveImageWebsocket", "ETN_SendImageWebSocket",
      "SaveImageAdvanced"}
 )
+# Frame-conditioned video nodes and the optional frame input an export may
+# leave unwired. MiniMax H3's FL2VA node takes `first_frame` plus an
+# optional `last_frame`; the studio offers the slot and the patcher adds
+# the LoadImage only when the user supplies that frame.
+OPTIONAL_FRAME_INPUTS: dict[str, dict[str, str]] = {
+    "MiniMaxH3ImageToVideo": {"last_frame": "first_frame"},
+}
+
+
+def optional_frame_sibling(node: dict[str, Any], field: str) -> str | None:
+    """The wired frame input an unwired optional ``field`` mirrors
+    (``last_frame`` → ``first_frame``); None when it does not apply."""
+    inputs = node.get("inputs") or {}
+    sibling = OPTIONAL_FRAME_INPUTS.get(str(node.get("class_type") or ""), {}).get(field)
+    if sibling is None or field in inputs:
+        return None
+    link = inputs.get(sibling)
+    return sibling if isinstance(link, list) and len(link) == 2 else None
 
 
 def class_to_input_kind(class_type: str) -> ComfyInputKind:

calliope-backend/src/calliope/comfyui/ui_convert.py

@@ -0,0 +1,801 @@
+"""UI→API converter for ComfyUI workflow JSON (HEL-681 / S2 data layer).
+
+ComfyUI saves two formats: the editor ("UI") format with ``nodes``/``links``
+arrays, and the API ("prompt") format ``{node_id: {class_type, inputs}}`` the
+product executes. This module converts UI→API offline and deterministically:
+
+* links are rewritten through ``Reroute`` chains and bypassed (mode 4) nodes;
+* packed subgraph instances (frontend ≥1.x ``definitions.subgraphs``) expand
+  into their inner nodes under qualified ids ``<packed>:<inner>`` — the same
+  scheme ComfyUI itself exports;
+* widget values map through, in priority order: the node's serialized input
+  list (entries carrying a ``widget`` marker — authoritative, this corpus's
+  frontend version always writes them), the ``widgets_values_named`` dict,
+  then a generated registry of widget orders learned from the corpus and the
+  repo's ground-truth API exports (``ui_widget_orders``).
+
+Anything that cannot be mapped with certainty is reported as an issue and the
+file is flagged ``needs_confirmation`` — never silently guessed: a wrong
+widget order produces a runnable-looking workflow with swapped seed/steps,
+which is worse than an honest「需人工确认」.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Any
+
+from calliope.comfyui.ui_widget_orders import WIDGET_ORDERS
+
+# Values of the frontend-only "control_after_generate" control that serializes
+# right after every seed-like INT widget (and is not a real server input).
+_CONTROL_MODES = frozenset({"fixed", "increment", "decrement", "randomize"})
+
+# Widget names that are pure UI buttons/previews — never serialized in
+# widgets_values (named dicts skip them too) and never API inputs.
+_BUTTON_WIDGETS = frozenset(
+    {"preview", "audioUI", "compare_view", "ToggleableColorPicker", "imagebrowser"}
+)
+
+# Leftover positional values that are provably action buttons, not data:
+# known labels, self-describing ids, or emoji-prefixed actions. Anything
+# else left over keeps the file in the needs-confirmation queue.
+_BUTTON_LEFTOVER_LABELS = frozenset({"Edit", "lanpaint_star_button"})
+_BUTTON_LEFTOVER_EMOJI = ("🖼", "🎬", "🎵", "➕", "🔁", "🗑", "📂", "🔎", "✨")
+
+
+def _is_button_leftover(value: Any) -> bool:
+    if value is None or value == "":
+        return True
+    if isinstance(value, str):
+        return (
+            value in _BUTTON_LEFTOVER_LABELS
+            or "button" in value.lower()
+            or value.startswith(_BUTTON_LEFTOVER_EMOJI)
+        )
+    return False
+
+# Virtual editor-only nodes. Links pass *through* reroute-style ones (see
+# _resolve_source); the rest are dropped from the graph entirely.
+_REROUTE_TYPES = frozenset({"Reroute", "Reroute (rgthree)"})
+# Frontend-virtual variable nodes: SetNode captures a value under a name,
+# GetNode reads it. Neither reaches the server — links through a Get resolve
+# to whatever its same-named Set captured (scope-local).
+_SET_TYPES = frozenset({"SetNode"})
+_GET_TYPES = frozenset({"GetNode"})
+_UI_ONLY_TYPES = frozenset(
+    {
+        "Note",
+        "MarkdownNote",
+        "Image Comparer (rgthree)",
+        "GH_ImageVideoComparer",
+        "Label (rgthree)",
+        "Fast Groups Bypasser (rgthree)",
+        "Fast Groups Muter (rgthree)",
+        "Fast Muter (rgthree)",
+        "FastGroupsBypassSwitch",
+        "Mute / Bypass Repeater (rgthree)",
+    }
+)
+
+# Server-side OUTPUT nodes: the closure roots. Learned from the repo's
+# ground-truth API exports (their unreferenced classes) + the corpus's
+# real save/preview sinks (SaveVideo/SaveImageAdvanced/… custom nodes).
+_OUTPUT_CLASSES = frozenset(
+    {
+        "SaveImage",
+        "PreviewImage",
+        "SaveImageAdvanced",
+        "SaveImageKJ",
+        "SaveAnimatedWEBP",
+        "SaveAnimatedPNG",
+        "SaveAnimatedGIF",
+        "SaveVideo",
+        "SaveAudio",
+        "SaveAudioMP3",
+        "SaveAudioAdvanced",
+        "PreviewAudio",
+        "MaskPreview",
+        "MaskPreview+",
+        "ImageAndMaskPreview",
+        "VHS_VideoCombine",
+        "easy saveVideo",
+        "easy multitrackProjectVideoCombine",
+        "easy multiTrackInfoOutput",
+        "easy multiTrackTaskOutput",
+        "easy compareVideos",
+        "easy compareImages",
+        "easy showText",
+        "easy imageWall",
+        "CR Prompt Text",
+        "PreviewAny",
+        "easy clearGpuUsed",
+        "easy clearCacheAll",
+        "easy showSpentTime",
+    }
+)
+
+MODE_ACTIVE = 0
+MODE_MUTED = 2
+MODE_BYPASSED = 4
+
+_SUBGRAPH_IN = -10  # pseudo-node id of a subgraph's boundary input
+_SUBGRAPH_OUT = -20  # pseudo-node id of a subgraph's boundary output
+
+
+@dataclass
+class ConvertIssue:
+    node_id: str
+    code: str
+    message: str
+    level: str = "warning"  # 'error' | 'warning'
+
+
+@dataclass
+class ConvertResult:
+    workflow: dict[str, Any] | None
+    status: str  # 'ok' | 'warn' | 'fail'
+    issues: list[ConvertIssue] = field(default_factory=list)
+
+    @property
+    def needs_confirmation(self) -> bool:
+        """Widget mapping uncertain — must not be imported as runnable."""
+        return any(
+            i.code in ("widget_unmapped", "widget_order_mismatch") for i in self.issues
+        )
+
+
+def _norm_link(link: Any) -> tuple[int, int, int, int, int, str] | None:
+    """(id, origin_id, origin_slot, target_id, target_slot, type) from either form."""
+    if isinstance(link, dict):
+        try:
+            return (
+                int(link["id"]),
+                int(link["origin_id"]),
+                int(link["origin_slot"]),
+                int(link["target_id"]),
+                int(link["target_slot"]),
+                str(link.get("type") or "*"),
+            )
+        except (KeyError, TypeError, ValueError):
+            return None
+    if isinstance(link, (list, tuple)) and len(link) >= 5:
+        try:
+            return (
+                int(link[0]),
+                int(link[1]),
+                int(link[2]),
+                int(link[3]),
+                int(link[4]),
+                str(link[5]) if len(link) > 5 and link[5] else "*",
+            )
+        except (TypeError, ValueError):
+            return None
+    return None
+
+
+def _is_seed_like(name: str) -> bool:
+    lowered = name.lower()
+    return lowered in ("seed", "noise_seed", "value", "rand_seed", "random_seed") or (
+        lowered.endswith("seed")
+    )
+
+
+def _is_upload_entry(name: str, type_: str) -> bool:
+    return type_.upper().endswith("UPLOAD") or name == "upload" or "UPLOAD" in type_.upper()
+
+
+class _Converter:
+    """One conversion run over a single UI-format document."""
+
+    def __init__(self, ui: dict[str, Any]) -> None:
+        self.ui = ui
+        self.issues: list[ConvertIssue] = []
+        self.subgraphs: dict[str, dict[str, Any]] = {
+            str(s.get("id")): s
+            for s in self.ui.get("definitions", {}).get("subgraphs", []) or []
+            if isinstance(s, dict)
+        }
+        # qualified id → UI node + owning scope
+        self.nodes: dict[str, dict[str, Any]] = {}
+        # scope key ('' for top level) → link table / node-id index / owner
+        self.scope_links: dict[str, dict[int, tuple[int, int, int, int, str]]] = {}
+        self.scope_ids: dict[str, dict[str, str]] = {}
+        self.scope_owner: dict[str, str] = {}
+        self._set_capture_cache: dict[str, dict[str, tuple[str, int]]] = {}
+        self._set_names: dict[str, set[str]] = {}
+        self._depth = 0
+        self._cycle_warned = False
+        self._set_building: set[str] = set()
+
+    # -------------------------------------------------------------- indexing
+    def _index_scope(self, scope: str, links: list[Any], owner: str | None) -> None:
+        table = self.scope_links.setdefault(scope, {})
+        for link in links or []:
+            norm = _norm_link(link)
+            if norm is not None:
+                table[norm[0]] = norm[1:]
+        self.scope_ids.setdefault(scope, {})
+        if owner is not None:
+            self.scope_owner[scope] = owner
+
+    def _flatten(
+        self, node: dict[str, Any], scope: str, prefix: str
+    ) -> None:
+        qualified = f"{prefix}{node.get('id')}"
+        self.nodes[qualified] = {"node": node, "scope": scope}
+        self.scope_ids.setdefault(scope, {})[str(node.get("id"))] = qualified
+        sub = self.subgraphs.get(str(node.get("type") or ""))
+        if sub is None:
+            return
+        if not isinstance(sub.get("nodes"), list):
+            self.issues.append(
+                ConvertIssue(qualified, "subgraph_bad_definition", "子图缺少内部节点定义")
+            )
+            return
+        sub_scope = f"{scope}|{node.get('type')}" if scope else f"{node.get('type')}"
+        if sub_scope not in self.scope_links:
+            self._index_scope(sub_scope, sub.get("links") or [], qualified)
+        for inner in sub["nodes"]:
+            if isinstance(inner, dict):
+                self._flatten(inner, sub_scope, f"{qualified}:")
+
+    # --------------------------------------------------------------- lookups
+    def _node(self, qualified: str) -> dict[str, Any] | None:
+        entry = self.nodes.get(qualified)
+        return entry["node"] if entry else None
+
+    def _scope(self, qualified: str) -> str:
+        entry = self.nodes.get(qualified)
+        return entry["scope"] if entry else ""
+
+    def _link(self, scope: str, link_id: Any) -> tuple[int, int, int, int, str] | None:
+        if link_id is None:
+            return None
+        try:
+            key = int(link_id)
+        except (TypeError, ValueError):
+            return None
+        return self.scope_links.get(scope, {}).get(key)
+
+    def _boundary_source(self, scope: str, link_id: Any) -> tuple[str, int] | None:
+        """(packed qualified id, boundary slot) when this link leaves a
+        subgraph through its -10 input boundary."""
+        link = self._link(scope, link_id)
+        if link is None or link[0] != _SUBGRAPH_IN:
+            return None
+        packed_q = self.scope_owner.get(scope)
+        if packed_q is None:
+            return None
+        return packed_q, link[1]
+
+    def _subgraph_of(self, qualified: str) -> dict[str, Any] | None:
+        node = self._node(qualified)
+        if node is None:
+            return None
+        return self.subgraphs.get(str(node.get("type") or ""))
+
+    @staticmethod
+    def _virtual_name(node: dict[str, Any]) -> str:
+        """A Set/Get node's captured variable name (its first widget value)."""
+        named = node.get("widgets_values_named")
+        if isinstance(named, dict):
+            for key in ("const_name", "name", "value"):
+                if key in named:
+                    return str(named[key])
+        values = node.get("widgets_values")
+        if isinstance(values, list) and values and isinstance(values[0], str):
+            return values[0]
+        return ""
+
+    def _set_captures(self, scope: str) -> dict[str, tuple[str, int]]:
+        """{variable name → resolved source} for the Set nodes in one scope."""
+        table = self._set_capture_cache.get(scope)
+        if table is not None:
+            return table
+        table = {}
+        # Seed before resolving: a Set feeding a same-named Get (FOR-loop
+        # graphs) would otherwise recurse into this builder forever. A miss
+        # while building is not a missing Set — never warn mid-construction.
+        self._set_capture_cache[scope] = table
+        self._set_building.add(scope)
+        try:
+            return self._build_set_captures(scope, table)
+        finally:
+            self._set_building.discard(scope)
+
+    def _build_set_captures(
+        self, scope: str, table: dict[str, tuple[str, int]]
+    ) -> dict[str, tuple[str, int]]:
+        names: set[str] = set()
+        for qualified, entry in self.nodes.items():
+            if entry["scope"] != scope:
+                continue
+            node = entry["node"]
+            if str(node.get("type") or "") not in _SET_TYPES:
+                continue
+            name = self._virtual_name(node)
+            if not name:
+                continue
+            names.add(name)
+            ins = self._inputs_of(node)
+            link = self._link(scope, ins[0].get("link")) if ins else None
+            resolved = self._resolve_link(scope, link)
+            if resolved is not None:
+                table.setdefault(name, resolved)
+        self._set_names[scope] = names
+        self._set_capture_cache[scope] = table
+        return table
+
+    @staticmethod
+    def _inputs_of(node: dict[str, Any]) -> list[dict[str, Any]]:
+        return [i for i in node.get("inputs") or [] if isinstance(i, dict)]
+
+    @staticmethod
+    def _outputs_of(node: dict[str, Any]) -> list[dict[str, Any]]:
+        return [o for o in node.get("outputs") or [] if isinstance(o, dict)]
+
+    # ------------------------------------------------------------- resolution
+    def _resolve_link(
+        self, scope: str, link: tuple[int, int, int, int, str] | None
+    ) -> tuple[str, int] | None:
+        """Resolve one link (in scope) to an API source (qualified id, slot)."""
+        if link is None:
+            return None
+        if self._depth > 200:  # Set/Get cycles (FOR-loop graphs) never unwind
+            if not self._cycle_warned:
+                self._cycle_warned = True
+                self.issues.append(
+                    ConvertIssue(
+                        "",
+                        "cyclic_variable",
+                        "变量/Set-Get 连线存在循环（常见于 FOR 循环流），该连线按未连接处理",
+                    )
+                )
+            return None
+        self._depth += 1
+        try:
+            return self._resolve_link_inner(scope, link)
+        finally:
+            self._depth -= 1
+
+    def _resolve_link_inner(
+        self, scope: str, link: tuple[int, int, int, int, str]
+    ) -> tuple[str, int] | None:
+        origin_id, origin_slot = link[0], link[1]
+        if origin_id == _SUBGRAPH_IN:
+            # Boundary: hand off to the packed instance's own input slot.
+            packed_q = self.scope_owner.get(scope)
+            if packed_q is None:
+                return None
+            node = self._node(packed_q)
+            if node is None:
+                return None
+            entries = self._inputs_of(node)
+            if origin_slot >= len(entries):
+                return None
+            entry = entries[origin_slot]
+            if entry.get("link") is None:
+                return None  # unlinked boundary → inner widget value applies
+            outer = self._scope(packed_q)
+            return self._resolve_link(outer, self._link(outer, entry.get("link")))
+        qualified = self.scope_ids.get(scope, {}).get(str(origin_id))
+        if qualified is None:
+            return None
+        return self._resolve_source(qualified, origin_slot)
+
+    def _resolve_source(self, qualified: str, slot: int) -> tuple[str, int] | None:
+        """What an outgoing edge from (node, output slot) really connects to."""
+        node = self._node(qualified)
+        if node is None:
+            return None
+        node_type = str(node.get("type") or "")
+        mode = node.get("mode") or 0
+        scope = self._scope(qualified)
+
+        if node_type in _UI_ONLY_TYPES:
+            return None
+
+        if node_type in _REROUTE_TYPES:
+            ins = self._inputs_of(node)
+            if not ins:
+                return None
+            return self._resolve_link(scope, self._link(scope, ins[0].get("link")))
+
+        if node_type in _SET_TYPES:
+            ins = self._inputs_of(node)
+            if not ins:
+                return None
+            return self._resolve_link(scope, self._link(scope, ins[0].get("link")))
+
+        if node_type in _GET_TYPES:
+            name = self._virtual_name(node)
+            captured = self._set_captures(scope).get(name)
+            if captured is None and scope not in self._set_building:
+                if name in self._set_names.get(scope, set()):
+                    self.issues.append(
+                        ConvertIssue(
+                            qualified,
+                            "variable_upstream_dropped",
+                            f"变量「{name}」的上游被旁路或未连接，取值按未连接处理",
+                        )
+                    )
+                else:
+                    self.issues.append(
+                        ConvertIssue(
+                            qualified,
+                            "get_without_set",
+                            f"变量节点「{name}」没有对应的 Set 节点",
+                        )
+                    )
+            return captured
+
+        sub = self._subgraph_of(qualified)
+        if sub is not None:
+            outputs = [o for o in sub.get("outputs") or [] if isinstance(o, dict)]
+            if slot >= len(outputs):
+                return None
+            sub_scope = f"{scope}|{node_type}" if scope else node_type
+            for link in self.scope_links.get(sub_scope, {}).values():
+                if link[2] == _SUBGRAPH_OUT and link[3] == slot:
+                    inner_q = self.scope_ids.get(sub_scope, {}).get(str(link[0]))
+                    return self._resolve_source(inner_q, link[1]) if inner_q else None
+            return None  # boundary output with no inner source
+
+        if mode == MODE_MUTED:
+            return None
+        if mode == MODE_BYPASSED:
+            return self._bypass_through(qualified, slot)
+        return (qualified, slot)
+
+    def _bypass_through(self, qualified: str, slot: int) -> tuple[str, int] | None:
+        """Pass-through of a bypassed node: same-name input first, then same-type."""
+        node = self._node(qualified)
+        if node is None:
+            return None
+        outputs = self._outputs_of(node)
+        out = outputs[slot] if slot < len(outputs) else {}
+        out_name = str(out.get("name") or "")
+        out_type = str(out.get("type") or "*")
+        linkable = [
+            e for e in self._inputs_of(node) if not e.get("widget") and e.get("link") is not None
+        ]
+        pick = None
+        if out_name:
+            pick = next((e for e in linkable if str(e.get("name") or "") == out_name), None)
+        if pick is None:
+            pick = next(
+                (
+                    e
+                    for e in linkable
+                    if out_type == "*" or str(e.get("type") or "*") in (out_type, "*")
+                ),
+                None,
+            )
+        if pick is None:
+            return None
+        scope = self._scope(qualified)
+        return self._resolve_link(scope, self._link(scope, pick.get("link")))
+
+    # --------------------------------------------------------- widget mapping
+    def _widget_entries(self, node: dict[str, Any]) -> list[tuple[str, str]]:
+        """[(name, type)] of entries carrying the ``widget`` marker, in order."""
+        out: list[tuple[str, str]] = []
+        for entry in self._inputs_of(node):
+            marker = entry.get("widget")
+            if isinstance(marker, dict):
+                name = str(marker.get("name") or entry.get("name") or "")
+                if name:
+                    out.append((name, str(entry.get("type") or "")))
+        return out
+
+    def _widgets_from_entries(
+        self,
+        node_id: str,
+        entries: list[tuple[str, str]],
+        values: Any,
+    ) -> tuple[dict[str, Any], list[ConvertIssue]]:
+        """Map widget values using the node's serialized input list."""
+        inputs: dict[str, Any] = {}
+        issues: list[ConvertIssue] = []
+        if isinstance(values, dict):
+            for name, type_ in entries:
+                if name in _BUTTON_WIDGETS or self._is_upload(name, type_):
+                    continue
+                if name in values:
+                    inputs[name] = values[name]
+                else:
+                    issues.append(
+                        ConvertIssue(node_id, "widget_unmapped", f"控件「{name}」没有序列化值")
+                    )
+            return inputs, issues
+        if not isinstance(values, list):
+            return inputs, issues
+        if not values:
+            return inputs, issues  # nothing serialized — server defaults apply
+        i = 0
+        for name, type_ in entries:
+            if name in _BUTTON_WIDGETS:
+                continue  # button widgets never serialize
+            if i >= len(values):
+                issues.append(
+                    ConvertIssue(node_id, "widget_order_mismatch", f"控件值数量不足（{name}）")
+                )
+                break
+            value = values[i]
+            i += 1
+            if self._is_upload(name, type_):
+                continue  # consumes a slot, never an API input
+            inputs[name] = value
+            if (
+                type_.upper() == "INT"
+                and _is_seed_like(name)
+                and i < len(values)
+                and values[i] in _CONTROL_MODES
+            ):
+                i += 1  # control_after_generate rides right after its seed
+        leftover_ok = all(_is_button_leftover(v) for v in values[i:])
+        if not issues and i != len(values) and not leftover_ok:
+            issues.append(
+                ConvertIssue(
+                    node_id,
+                    "widget_order_mismatch",
+                    f"有 {len(values)} 个控件值，输入清单只覆盖 {i} 个",
+                )
+            )
+        return inputs, issues
+
+    @staticmethod
+    def _is_upload(name: str, type_: str) -> bool:
+        return _is_upload_entry(name, type_)
+
+    def _widgets_from_registry(
+        self, node: dict[str, Any], values: list[Any]
+    ) -> tuple[dict[str, Any], list[ConvertIssue]]:
+        node_type = str(node.get("type") or "")
+        if not values:
+            return {}, []  # nothing serialized — server defaults apply
+        for order in WIDGET_ORDERS.get(node_type) or []:
+            inputs: dict[str, Any] = {}
+            i = 0
+            for name in order:
+                if name in _BUTTON_WIDGETS:
+                    continue
+                if i >= len(values):
+                    break
+                value = values[i]
+                i += 1
+                if _is_upload_entry(name, ""):
+                    continue
+                inputs[name] = value
+                if _is_seed_like(name) and i < len(values) and values[i] in _CONTROL_MODES:
+                    i += 1
+            if i == len(values) or all(_is_button_leftover(v) for v in values[i:]):
+                return inputs, []  # exact fit, or trailing button leftovers
+        return {}, [
+            ConvertIssue(
+                node.get("id", ""),
+                "widget_unmapped" if not WIDGET_ORDERS.get(node_type) else "widget_order_mismatch",
+                f"「{node_type}」的 {len(values)} 个控件值无法可靠对应到输入名",
+            )
+        ]
+
+    def _packed_widget_values(self, qualified: str) -> Any:
+        """Exposed widget values of a packed instance as {boundary name: value}."""
+        node = self._node(qualified)
+        sub = self._subgraph_of(qualified)
+        if node is None or sub is None:
+            return None
+        boundary = [i for i in sub.get("inputs") or [] if isinstance(i, dict)]
+        named = node.get("widgets_values_named")
+        if isinstance(named, dict):
+            return named
+        values = node.get("widgets_values")
+        if not isinstance(values, list):
+            return None
+        out: dict[str, Any] = {}
+        i = 0
+        for entry in boundary:
+            name = str(entry.get("name") or "")
+            type_ = str(entry.get("type") or "")
+            if name and i < len(values):
+                out[name] = values[i]
+            i += 1
+            if (
+                type_.upper() == "INT"
+                and _is_seed_like(name)
+                and i < len(values)
+                and values[i] in _CONTROL_MODES
+            ):
+                i += 1
+        return out
+
+    # -------------------------------------------------------------- serialize
+    def _serialize_node(self, qualified: str) -> dict[str, Any] | None:
+        node = self._node(qualified)
+        if node is None:
+            return None
+        node_type = str(node.get("type") or "")
+        if (
+            not node_type
+            or node_type in _UI_ONLY_TYPES
+            or node_type in _REROUTE_TYPES
+            or node_type in _SET_TYPES
+            or node_type in _GET_TYPES
+        ):
+            return None
+        scope = self._scope(qualified)
+        inputs: dict[str, Any] = {}
+
+        widget_values = node.get("widgets_values_named")
+        if not isinstance(widget_values, dict):
+            widget_values = node.get("widgets_values")
+        if self._subgraph_of(qualified) is not None:
+            widget_values = self._packed_widget_values(qualified)
+
+        widget_inputs: dict[str, Any] = {}
+        entries = self._widget_entries(node)
+        if widget_values is not None:
+            if entries:
+                widget_inputs, w_issues = self._widgets_from_entries(
+                    qualified, entries, widget_values
+                )
+                self.issues.extend(w_issues)
+            elif isinstance(widget_values, dict):
+                widget_inputs = {
+                    k: v for k, v in widget_values.items() if k not in _BUTTON_WIDGETS
+                }
+            elif isinstance(widget_values, list):
+                widget_inputs, w_issues = self._widgets_from_registry(node, widget_values)
+                self.issues.extend(w_issues)
+
+        for entry in self._inputs_of(node):
+            name = str(entry.get("name") or "")
+            if not name or name in inputs:
+                continue
+            if entry.get("link") is None:
+                continue  # unconnected optional input; widget values applied below
+            # Widget entries fed from the subgraph boundary (-10): when the
+            # packed instance left that boundary slot unlinked, the value is
+            # the packed node's own exposed widget value, not the inner one.
+            boundary = self._boundary_source(scope, entry.get("link"))
+            if boundary is not None:
+                packed_q, boundary_slot = boundary
+                packed_node = self._node(packed_q)
+                packed_entries = self._inputs_of(packed_node) if packed_node else []
+                if boundary_slot < len(packed_entries) and packed_entries[
+                    boundary_slot
+                ].get("link") is None:
+                    values = self._packed_widget_values(packed_q)
+                    boundary_name = str(packed_entries[boundary_slot].get("name") or "")
+                    if isinstance(values, dict) and boundary_name in values:
+                        inputs[name] = values[boundary_name]
+                        continue
+                # linked boundary falls through to normal resolution
+            link = self._link(scope, entry.get("link"))
+            if link is None:
+                self.issues.append(
+                    ConvertIssue(qualified, "dangling_link", f"输入「{name}」的连线不存在")
+                )
+                continue
+            resolved = self._resolve_link(scope, link)
+            if resolved is not None:
+                inputs[name] = [resolved[0], resolved[1]]
+            elif entry.get("widget"):
+                pass  # muted upstream: the widget value below takes over
+            else:
+                self.issues.append(
+                    ConvertIssue(
+                        qualified,
+                        "muted_input_dropped",
+                        f"输入「{name}」上游被静音，已按未连接处理",
+                    )
+                )
+
+        for name, value in widget_inputs.items():
+            inputs.setdefault(name, value)
+
+        api_node: dict[str, Any] = {"class_type": node_type, "inputs": inputs}
+        title = str(node.get("title") or "").strip()
+        if title:
+            api_node["_meta"] = {"title": title}
+        return api_node
+
+    # ------------------------------------------------------------------- main
+    def run(self) -> ConvertResult:
+        nodes = self.ui.get("nodes")
+        if not isinstance(nodes, list) or not nodes:
+            return ConvertResult(
+                None,
+                "fail",
+                [ConvertIssue("", "no_nodes", "文件不含 nodes 数组，不是 UI 格式工作流", "error")],
+            )
+        try:
+            self._index_scope("", self.ui.get("links") or [], None)
+            for node in nodes:
+                if isinstance(node, dict):
+                    self._flatten(node, "", "")
+        except RecursionError:
+            return ConvertResult(
+                None, "fail", [ConvertIssue("", "subgraph_recursion", "子图嵌套过深", "error")]
+            )
+
+        # Closure from known output nodes (ComfyUI's own graphToPrompt roots).
+        roots = [
+            q
+            for q, entry in self.nodes.items()
+            if str(entry["node"].get("type") or "") in _OUTPUT_CLASSES
+            and (entry["node"].get("mode") or 0) == MODE_ACTIVE
+        ]
+        keep: dict[str, None] = {}
+        stack = list(roots)
+        while stack:
+            qualified = stack.pop()
+            if qualified in keep:
+                continue
+            entry = self.nodes.get(qualified)
+            if entry is None:
+                continue
+            keep[qualified] = None
+            node = entry["node"]
+            scope = entry["scope"]
+            for e in self._inputs_of(node):
+                if e.get("link") is None:
+                    continue
+                link = self._link(scope, e.get("link"))
+                resolved = self._resolve_link(scope, link)
+                if resolved is not None:
+                    stack.append(resolved[0])
+
+        if not keep:
+            # No known output node: keep every active computed node and warn —
+            # the import lint will report the missing output separately.
+            for qualified, entry in self.nodes.items():
+                node = entry["node"]
+                node_type = str(node.get("type") or "")
+                if (
+                    node_type in _UI_ONLY_TYPES
+                    or node_type in _REROUTE_TYPES
+                    or (node.get("mode") or 0) != MODE_ACTIVE
+                    or self._subgraph_of(qualified) is not None
+                ):
+                    continue
+                keep[qualified] = None
+            self.issues.append(
+                ConvertIssue(
+                    "",
+                    "no_output_node",
+                    "图中没有已知输出节点（SaveImage / 视频合成等），"
+                    "全部活跃节点已保留，需人工确认",
+                )
+            )
+
+        workflow: dict[str, Any] = {}
+        for qualified in keep:
+            api_node = self._serialize_node(qualified)
+            if api_node is not None and api_node["class_type"]:
+                workflow[qualified] = api_node
+
+        if not workflow:
+            return ConvertResult(
+                None,
+                "fail",
+                self.issues or [ConvertIssue("", "empty", "转换后没有任何节点", "error")],
+            )
+        status = (
+            "fail"
+            if any(i.level == "error" for i in self.issues)
+            else ("ok" if not self.issues else "warn")
+        )
+        return ConvertResult(workflow, status, self.issues)
+
+
+def convert_ui_workflow(ui: dict[str, Any]) -> ConvertResult:
+    """Convert one ComfyUI UI-format workflow dict into API format."""
+    if not isinstance(ui, dict) or not isinstance(ui.get("nodes"), list):
+        return ConvertResult(
+            None,
+            "fail",
+            [ConvertIssue("", "not_ui_format", "不是 UI 格式（缺少 nodes 数组）", "error")],
+        )
+    return _Converter(ui).run()

calliope-backend/src/calliope/db.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import json
+import re
 import sqlite3
 from pathlib import Path
 from typing import Any
@@ -310,6 +311,36 @@ CREATE TABLE IF NOT EXISTS project_stages (
 );
 CREATE INDEX IF NOT EXISTS idx_project_stages_project ON project_stages(project_id);
 
+-- B4: immutable source identity, editable draft, optimistic concurrency.
+CREATE TABLE IF NOT EXISTS agent_deliverables (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES agent_sessions(id) ON DELETE CASCADE,
+    source_message_id INTEGER NOT NULL,
+    project_id INTEGER REFERENCES projects(id) ON DELETE SET NULL,
+    stage_key TEXT NOT NULL CHECK(stage_key IN ('script','style','storyboard','assets','shot')),
+    title TEXT NOT NULL,
+    content TEXT NOT NULL,
+    revision INTEGER NOT NULL DEFAULT 1,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(session_id, source_message_id)
+);
+CREATE TABLE IF NOT EXISTS agent_deliverable_versions (
+    deliverable_id INTEGER NOT NULL REFERENCES agent_deliverables(id) ON DELETE CASCADE,
+    revision INTEGER NOT NULL,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY(deliverable_id, revision)
+);
+CREATE TABLE IF NOT EXISTS result_attachments (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    source_key TEXT NOT NULL,
+    project_id INTEGER NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+    stage_key TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(source_key, project_id, stage_key)
+);
+
 -- Audit trail of agent runs inside the flow (HEL-614): instruction in,
 -- normalized JSON artifact out, or a Chinese-readable failure reason.
 CREATE TABLE IF NOT EXISTS stage_runs (
@@ -410,6 +441,43 @@ def _backfill_workflow_output_map(conn: sqlite3.Connection) -> None:
             )
 
 
+# HEL-671: the user's H3 import went in under a first-frame-only name
+# (“H3图生视频·首帧…”) although its graph is the FL2VA node that also takes
+# a last frame. A row is renamed only when BOTH hold: its graph carries a
+# wired MiniMaxH3ImageToVideo node, and its name still reads like a
+# first-frame-only workflow — a row the user renamed, or any other graph,
+# is left alone. Idempotent: the new name no longer matches.
+_FIRST_FRAME_NAME_RE = re.compile(r"图生视频\s*[·\-—~]?\s*首帧")
+_FL2VA_DESCRIPTION = "首帧必填，尾帧可选：只传首帧为图生视频，同时传尾帧为首尾帧生视频"
+
+
+def _rename_workflows(conn: sqlite3.Connection) -> None:
+    for wid, name, wf_json in conn.execute(
+        "SELECT id, name, workflow_json FROM workflows"
+    ).fetchall():
+        if not name or "尾帧" in name or not _FIRST_FRAME_NAME_RE.search(name):
+            continue
+        try:
+            workflow = json.loads(wf_json) if wf_json else None
+        except (json.JSONDecodeError, TypeError):
+            continue
+        if not isinstance(workflow, dict):
+            continue
+        fl2va = any(
+            isinstance(node, dict)
+            and str(node.get("class_type") or "") == "MiniMaxH3ImageToVideo"
+            and isinstance((node.get("inputs") or {}).get("first_frame"), list)
+            for node in workflow.values()
+        )
+        if not fl2va:
+            continue
+        conn.execute(
+            "UPDATE workflows SET name = ?,"
+            " description = COALESCE(NULLIF(description, ''), ?) WHERE id = ?",
+            (_FIRST_FRAME_NAME_RE.sub("首尾帧生视频", name), _FL2VA_DESCRIPTION, wid),
+        )
+
+
 async def migrate_db(db_path: Path) -> None:
     db_path.parent.mkdir(parents=True, exist_ok=True)
     conn = sqlite3.connect(db_path)
@@ -468,10 +536,32 @@ async def migrate_db(db_path: Path) -> None:
         conn.execute("ALTER TABLE workflows ADD COLUMN output_map TEXT")
     if "output_map_source" not in cols:
         conn.execute("ALTER TABLE workflows ADD COLUMN output_map_source TEXT")
+    # HEL-681 (S2): library metadata for 150+ scale workflow browsing. Purely
+    # additive columns — old rows stay NULL/0 and every legacy path ignores
+    # them; the lightweight list view (?view=meta) is their only reader.
+    if "category" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN category TEXT")
+    if "model_family" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN model_family TEXT")
+    if "media_io" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN media_io TEXT")
+    if "tags" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN tags TEXT")
+    if "favorite" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN favorite INTEGER NOT NULL DEFAULT 0")
+    if "last_used_at" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN last_used_at TIMESTAMP")
+    if "source" not in cols:
+        # where the row came from: 'ui_convert' (HEL-681 batch import) vs
+        # NULL = manual/API import as before.
+        conn.execute("ALTER TABLE workflows ADD COLUMN source TEXT")
+    if "source_path" not in cols:
+        conn.execute("ALTER TABLE workflows ADD COLUMN source_path TEXT")
     # Idempotent backfill: pending rows are re-judged on every boot (parser
     # upgrades can settle them); confirmed rows are never touched.
     _backfill_workflow_usage(conn)
     _backfill_workflow_output_map(conn)
+    _rename_workflows(conn)
     scene_cols = {r[1] for r in conn.execute("PRAGMA table_info(scenes)").fetchall()}
     if "location_id" not in scene_cols:
         conn.execute("ALTER TABLE scenes ADD COLUMN location_id INTEGER")
@@ -527,6 +617,13 @@ async def migrate_db(db_path: Path) -> None:
     # born ('chat' = user-created in AI Canvas, 'scene' = auto-created by the
     # Build Scene rail). The session list excludes origin='scene' so scene
     # sessions don't pollute the AI Canvas sidebar; Build Scene filters on it.
+    b4_cols = {r[1] for r in conn.execute("PRAGMA table_info(agent_sessions)")}
+    if "task_summary" not in b4_cols:
+        conn.execute("ALTER TABLE agent_sessions ADD COLUMN task_summary TEXT NOT NULL DEFAULT ''")
+    if "task_status" not in b4_cols:
+        conn.execute(
+            "ALTER TABLE agent_sessions ADD COLUMN task_status TEXT NOT NULL DEFAULT 'ready'"
+        )
     session_cols = {r[1] for r in conn.execute("PRAGMA table_info(agent_sessions)").fetchall()}
     if "origin" not in session_cols:
         conn.execute("ALTER TABLE agent_sessions ADD COLUMN origin TEXT NOT NULL DEFAULT 'chat'")

calliope-backend/src/calliope/main.py

@@ -20,19 +20,24 @@ from calliope.routers import (
     agent,
     assets,
     canvas,
-    comfyui as comfy,
     events,
     jobs,
     library,
     playground,
     projects,
+    results,
     scenes,
-    settings as settings_router,
     shots,
     story,
     workbench,
     workflows,
 )
+from calliope.routers import (
+    comfyui as comfy,
+)
+from calliope.routers import (
+    settings as settings_router,
+)
 
 logging.basicConfig(
     level=logging.INFO,
@@ -141,6 +146,7 @@ def create_app(static_dir: Path | None = None) -> FastAPI:
     app.include_router(library.router, prefix="/api/library", tags=["library"])
     app.include_router(canvas.router, prefix="/api/canvas", tags=["canvas"])
     app.include_router(shots.router, prefix="/api/shots", tags=["shots"])
+    app.include_router(results.router, prefix="/api/results", tags=["results"])
     app.include_router(agent.router, prefix="/api/agent", tags=["agent"])
     app.include_router(workbench.router, prefix="/api/workbench", tags=["workbench"])
     app.include_router(events.router, prefix="/api/events", tags=["events"])

calliope-backend/src/calliope/models/schemas.py

@@ -243,6 +243,55 @@ class WorkflowUpdate(BaseModel):
     # resets the workflow to pending confirmation.
     output_map: list[dict[str, Any]] | None = None
     output_map_source: Literal["auto", "user"] | None = None
+    # HEL-681 (S2): library metadata fields.
+    favorite: bool | None = None
+    tags: list[str] | None = None
+    category: str | None = None
+    model_family: str | None = None
+
+
+class WorkflowUIFileItem(BaseModel):
+    """One UI-format file for the HEL-681 convert/import pipeline."""
+
+    name: str | None = None
+    # repo-relative path (category/model-family evidence); display name
+    # defaults to the file stem.
+    source_path: str | None = None
+    workflow_json: dict[str, Any]
+    # optional human confirmations from the import wizard (S3): a settled
+    # usage and a corrected schema let warn files import enabled.
+    usage: WorkflowUsageKind | None = None
+    input_schema: list[dict[str, Any]] | None = None
+    output_map: list[dict[str, Any]] | None = None
+    description: str | None = None
+    tags: list[str] | None = None
+
+
+class WorkflowConvertRequest(BaseModel):
+    """Dry-run: per-file ok/warn/fail + suggested metadata, nothing stored."""
+
+    files: list[WorkflowUIFileItem]
+    # Include the converted API JSON per file (default on for small batches;
+    # the 146-file report leaves it off to keep the payload sane).
+    include_workflows: bool = False
+    # L2 preflight against a real ComfyUI (opt-in; needs a connection).
+    endpoint_id: str | None = None
+    refresh: bool = False
+
+
+class WorkflowImportBatchRequest(BaseModel):
+    """Commit: convert UI files and insert, skipping conflicts. Idempotent."""
+
+    files: list[WorkflowUIFileItem]
+
+
+class WorkflowImportScanRequest(BaseModel):
+    """Scan a server-side directory of UI JSONs (repo example library)."""
+
+    root: str = "example_ComfyUI_workflows"
+    # Set to preview what would import (same shape as /convert) — the safe
+    # default for a first run against the 146-file library.
+    dry_run: bool = True
 
 
 class WorkflowAnalyze(BaseModel):

calliope-backend/src/calliope/queue/manager.py

@@ -49,6 +49,12 @@ class QueueManager:
                 """,
                 (project_id, scene_id, clip_id, kind, workflow_id, json.dumps(payload), origin),
             )
+            # HEL-681: every enqueued job counts as a use (最近使用).
+            if workflow_id is not None:
+                conn.execute(
+                    "UPDATE workflows SET last_used_at = CURRENT_TIMESTAMP WHERE id = ?",
+                    (workflow_id,),
+                )
             conn.commit()
             row = conn.execute("SELECT * FROM jobs WHERE id = ?", (cur.lastrowid,)).fetchone()
             return row_to_dict(row)

calliope-backend/src/calliope/routers/agent.py

@@ -97,7 +97,7 @@ class MemoryCreate(BaseModel):
 
 class MessageCreate(BaseModel):
     content: str = ""
-    mentions: list[MessageMention] = Field(default_factory=list, max_length=1)
+    mentions: list[MessageMention] = Field(default_factory=list, max_length=5)
     attachments: list[MessageAttachment] = Field(default_factory=list, max_length=8)
     answer_to: int | None = None  # question/asked seq this message answers (card click)
 
@@ -113,8 +113,10 @@ class MessageCreate(BaseModel):
     @field_validator("mentions")
     @classmethod
     def _one_workflow(cls, v: list[MessageMention]) -> list[MessageMention]:
-        if len(v) > 1:
+        if sum(m.type == "workflow" for m in v) > 1:
             raise ValueError("Only one @workflow mention per message")
+        if sum(m.type == "skill" for m in v) > 4:
+            raise ValueError("At most four skill mentions per message")
         return v
 
 

calliope-backend/src/calliope/routers/playground.py

@@ -1,4 +1,5 @@
 """Standalone ComfyUI playground — generate freely, attach favorites to projects."""
+
 from __future__ import annotations
 
 import json
@@ -31,6 +32,23 @@ PLAYGROUND_TITLE = "Playground Scratch"
 # page can label origins ("独立生图" vs canvas Playground) without guessing.
 PlaygroundSource = Literal["playground", "studio-image", "studio-video"]
 
+# HEL-684: a desk visit opened from a five-stage workbench row may carry
+# that row as optional context. Only real, server-verified project/stage/
+# source info is accepted — the source row must still exist in the stage
+# content, and the desk kind must match what that stage renders.
+WorkbenchStage = Literal["assets", "shot"]
+WORKBENCH_KIND_BY_STAGE: dict[str, str] = {"assets": "image", "shot": "video"}
+WORKBENCH_ROW_KEY_BY_STAGE: dict[str, str] = {"assets": "assets", "shot": "shots"}
+
+
+class PlaygroundWorkbenchContext(BaseModel):
+    project_id: int
+    stage: WorkbenchStage
+    source_kind: Literal["asset", "shot"]
+    source_id: str = Field(min_length=1)
+    # Display-only echo of the DeskContext label (e.g. 镜头 S1).
+    label: str | None = None
+
 
 class PlaygroundGenerate(BaseModel):
     workflow_id: int
@@ -39,6 +57,13 @@ class PlaygroundGenerate(BaseModel):
     # then the active one (resolved in queue_manager.enqueue).
     endpoint_id: str | None = None
     source: PlaygroundSource = "playground"
+    # Optional real workbench source — validated, then stamped on the job
+    # payload so a finished take can be flowed back (attach-workbench).
+    context: PlaygroundWorkbenchContext | None = None
+
+
+class PlaygroundAttachWorkbench(BaseModel):
+    job_id: int
 
 
 class PlaygroundAttach(BaseModel):
@@ -83,6 +108,72 @@ def ensure_playground_project(conn) -> int:
     return int(cur.lastrowid)
 
 
+# ─────────────────────────────────────────────────────────────────────────
+# HEL-684: workbench source context — validate against real rows, never
+# guess. Both generate-time (record on the job payload) and attach-time
+# (flow a finished take back) go through the same checks.
+# ─────────────────────────────────────────────────────────────────────────
+
+
+def _workbench_target_row(conn, ctx: PlaygroundWorkbenchContext) -> dict[str, Any] | None:
+    """The real asset/shot row this context points at, or None."""
+    stage = conn.execute(
+        "SELECT content_json FROM project_stages WHERE project_id = ? AND stage_key = ?",
+        (ctx.project_id, ctx.stage),
+    ).fetchone()
+    if not stage or not stage["content_json"]:
+        return None
+    try:
+        content = json.loads(stage["content_json"])
+    except (json.JSONDecodeError, TypeError):
+        return None
+    rows = content.get(WORKBENCH_ROW_KEY_BY_STAGE[ctx.stage])
+    if not isinstance(rows, list):
+        return None
+    for row in rows:
+        if isinstance(row, dict) and str(row.get("id") or "") == ctx.source_id:
+            return row
+    return None
+
+
+def _validate_workbench_context(conn, ctx: PlaygroundWorkbenchContext, kind: str) -> dict[str, Any]:
+    """Reject anything that is not a real, current project/stage/source.
+
+    Returns the payload stamp for the job. Raises on any mismatch so no
+    guessed or stale source is ever recorded.
+    """
+    expected_kind = WORKBENCH_KIND_BY_STAGE[ctx.stage]
+    expected_source_kind = "asset" if ctx.stage == "assets" else "shot"
+    if ctx.source_kind != expected_source_kind or kind != expected_kind:
+        raise HTTPException(
+            status_code=422,
+            detail=(
+                f"来源上下文与生成类型不符：「{ctx.stage}」阶段需要{expected_kind}生成。"
+                "可关闭来源提示后独立生成。"
+            ),
+        )
+    project = conn.execute(
+        "SELECT id, status FROM projects WHERE id = ?", (ctx.project_id,)
+    ).fetchone()
+    if not project:
+        raise HTTPException(status_code=404, detail="来源项目不存在，无法记录回流上下文")
+    if project["status"] == PLAYGROUND_STATUS:
+        raise HTTPException(status_code=400, detail="不能以 playground 隐藏项目作为回流来源")
+    if _workbench_target_row(conn, ctx) is None:
+        raise HTTPException(
+            status_code=409,
+            detail=(
+                "来源"
+                f"{'资产' if ctx.source_kind == 'asset' else '镜头'}行已不存在"
+                "（阶段内容可能已重新生成）。可关闭来源提示后独立生成。"
+            ),
+        )
+    stamp: dict[str, Any] = ctx.model_dump()
+    if not (stamp.get("label") or "").strip():
+        stamp["label"] = None
+    return stamp
+
+
 def _assert_path_in_assets(path: str) -> Path:
     assets_root = config.settings.assets_dir.resolve()
     target = Path(path).resolve()
@@ -195,6 +286,17 @@ async def list_playground_jobs(limit: int = 50) -> list[dict[str, Any]]:
     conn = get_db(config.settings.db_path)
     try:
         pid = ensure_playground_project(conn)
+        # HEL-684: which takes have already been flowed back to a workbench
+        # row (per source project) — the desk shows an honest 已回流 state
+        # that survives reloads instead of guessing from client memory.
+        links_by_project: dict[int, dict[int, dict[str, Any]]] = {}
+        rows = conn.execute(
+            "SELECT DISTINCT project_id FROM jobs"
+            " WHERE payload_json LIKE '%\"from_playground_job\"%'"
+        ).fetchall()
+        for r in rows:
+            proj_id = int(r["project_id"])
+            links_by_project[proj_id] = _workbench_link_rows(conn, proj_id)
     finally:
         conn.close()
     # Workflow-test jobs (HEL-643) ride the same scratch project but must not
@@ -204,7 +306,16 @@ async def list_playground_jobs(limit: int = 50) -> list[dict[str, Any]]:
         for j in queue_manager.list_jobs(pid, None, limit)
         if str(j.get("origin") or "user") != "workflow_test"
     ]
-    return [_job_public(j) for j in jobs]
+    out = []
+    for j in jobs:
+        pub = _job_public(j)
+        stamp = (pub.get("payload") or {}).get("workbench")
+        if isinstance(stamp, dict) and isinstance(stamp.get("project_id"), int):
+            link = links_by_project.get(int(stamp["project_id"]), {}).get(int(pub["id"]))
+            if link and link.get("target_id") == stamp.get("source_id"):
+                pub["workbench_attach"] = link
+        out.append(pub)
+    return out
 
 
 @router.delete("/jobs/{job_id}")
@@ -239,6 +350,21 @@ async def delete_playground_job(job_id: int) -> dict[str, Any]:
     conn = get_db(config.settings.db_path)
     try:
         _clear_entity_refs(conn, [p for p in paths if isinstance(p, str)])
+        # HEL-684: the output files are about to vanish — drop the workbench
+        # link rows created from this take so no project row points at
+        # missing media (mirrors the entity-ref clearing above).
+        removed_links: list[int] = []
+        link_rows = conn.execute(
+            "SELECT id, payload_json FROM jobs WHERE payload_json LIKE '%\"from_playground_job\"%'"
+        ).fetchall()
+        for r in link_rows:
+            try:
+                p = json.loads(r["payload_json"] or "{}")
+            except (json.JSONDecodeError, TypeError):
+                continue
+            if p.get("from_playground_job") == job_id:
+                conn.execute("DELETE FROM jobs WHERE id = ?", (int(r["id"]),))
+                removed_links.append(int(r["id"]))
         conn.commit()
     finally:
         conn.close()
@@ -261,6 +387,7 @@ async def delete_playground_job(job_id: int) -> dict[str, Any]:
         "job_id": job_id,
         "deleted_files": deleted_files,
         "missing_files": missing_files,
+        "removed_workbench_links": removed_links,
     }
 
 
@@ -365,6 +492,14 @@ async def generate(payload: PlaygroundGenerate) -> dict[str, Any]:
         schema = effective_input_schema(
             json.loads(wf["input_schema"]) if wf["input_schema"] else [], workflow_json
         )
+        # HEL-684: an optional workbench source is only recorded when it is
+        # real and current — the job itself still runs on the playground
+        # scratch project so the desk feed, SSE and tasks stay unchanged.
+        workbench_stamp = (
+            _validate_workbench_context(conn, payload.context, kind)
+            if payload.context is not None
+            else None
+        )
     finally:
         conn.close()
 
@@ -385,6 +520,7 @@ async def generate(payload: PlaygroundGenerate) -> dict[str, Any]:
             "input_values": input_values,
             "source": payload.source,
             **({"endpoint_id": payload.endpoint_id} if payload.endpoint_id else {}),
+            **({"workbench": workbench_stamp} if workbench_stamp else {}),
         },
     )
     await event_bus.publish(
@@ -495,3 +631,167 @@ async def attach_to_project(payload: PlaygroundAttach) -> dict[str, Any]:
         return out
     finally:
         conn.close()
+
+
+def _workbench_link_rows(conn, project_id: int) -> dict[int, dict[str, Any]]:
+    """playground job id → its flow-back link row on this project.
+
+    Link rows are done jobs with payload.source='workbench' and a
+    from_playground_job stamp — the exact shape _workbench_job_outputs
+    already enriches the workbench rows from, so a flowed-back take shows
+    up on its source row through the existing display path.
+    """
+    out: dict[int, dict[str, Any]] = {}
+    rows = conn.execute(
+        "SELECT id, payload_json FROM jobs WHERE project_id = ? ORDER BY id ASC",
+        (project_id,),
+    ).fetchall()
+    for r in rows:
+        try:
+            p = json.loads(r["payload_json"] or "{}")
+        except (json.JSONDecodeError, TypeError):
+            continue
+        if p.get("source") != "workbench":
+            continue
+        src = p.get("from_playground_job")
+        if isinstance(src, int):
+            out[src] = {
+                "job_id": int(r["id"]),
+                "stage": p.get("stage_key"),
+                "target_id": p.get("target_id"),
+            }
+    return out
+
+
+@router.post("/attach-workbench")
+async def attach_workbench(payload: PlaygroundAttachWorkbench) -> dict[str, Any]:
+    """Flow a finished desk take back to its workbench source row (HEL-684).
+
+    The source is whatever real context the generate request carried —
+    nothing is guessed here. Re-attaching is idempotent: the existing link
+    row is returned, no duplicate is created, nothing is overwritten.
+    """
+    conn = get_db(config.settings.db_path)
+    try:
+        pid = ensure_playground_project(conn)
+        job = queue_manager.get_job(payload.job_id)
+        if not job:
+            raise HTTPException(status_code=404, detail="Job not found")
+        if int(job["project_id"]) != int(pid):
+            raise HTTPException(status_code=403, detail="Not a playground job")
+
+        try:
+            job_payload = json.loads(job.get("payload_json") or "{}")
+        except (json.JSONDecodeError, TypeError):
+            job_payload = {}
+        stamp = job_payload.get("workbench")
+        if not isinstance(stamp, dict) or not stamp.get("source_id"):
+            raise HTTPException(
+                status_code=400, detail="该记录没有项目来源上下文，无法回流（独立生成不回流）"
+            )
+        if job["status"] != "done":
+            raise HTTPException(status_code=400, detail="生成完成后才能回流")
+        outputs = json.loads(job.get("output_paths_json") or "[]")
+        if not isinstance(outputs, list) or not outputs:
+            raise HTTPException(status_code=400, detail="该记录没有产物文件，无法回流")
+
+        try:
+            ctx = PlaygroundWorkbenchContext(
+                project_id=int(stamp["project_id"]),
+                stage=stamp.get("stage"),
+                source_kind=stamp.get("source_kind"),
+                source_id=str(stamp["source_id"]),
+                label=stamp.get("label"),
+            )
+        except Exception as exc:  # pydantic ValidationError / missing keys
+            raise HTTPException(
+                status_code=400, detail="该记录的项目来源上下文无效，无法回流"
+            ) from exc
+        # Re-validate against the live stage content — the row may have been
+        # regenerated since the take was created; refuse rather than mis-write.
+        if _workbench_target_row(conn, ctx) is None:
+            raise HTTPException(
+                status_code=409,
+                detail=(
+                    "来源"
+                    f"{'资产' if ctx.source_kind == 'asset' else '镜头'}行已不存在"
+                    "（阶段内容可能已重新生成），未回流。"
+                ),
+            )
+
+        links = _workbench_link_rows(conn, ctx.project_id)
+        existing = links.get(int(job["id"]))
+        if existing and existing.get("target_id") == ctx.source_id:
+            return {
+                "ok": True,
+                "already_attached": True,
+                "job_id": int(job["id"]),
+                "attached_job_id": existing["job_id"],
+                "project_id": ctx.project_id,
+                "stage": ctx.stage,
+                "target_id": ctx.source_id,
+            }
+
+        link_payload = {
+            "source": "workbench",
+            "stage_key": ctx.stage,
+            "target_id": ctx.source_id,
+            "from_playground_job": int(job["id"]),
+            "input_values": job_payload.get("input_values") or {},
+        }
+        if ctx.label:
+            link_payload["label"] = ctx.label
+        cur = conn.execute(
+            """
+            INSERT INTO jobs (project_id, kind, workflow_id, status, payload_json,
+                              output_paths_json, created_at, started_at, completed_at, origin)
+            VALUES (?, ?, ?, 'done', ?, ?,
+                    CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'user')
+            """,
+            (
+                ctx.project_id,
+                job["kind"],
+                job["workflow_id"],
+                json.dumps(link_payload, ensure_ascii=False),
+                json.dumps([str(p) for p in outputs if isinstance(p, str)]),
+            ),
+        )
+        conn.execute(
+            "UPDATE projects SET updated_at = CURRENT_TIMESTAMP WHERE id = ?",
+            (ctx.project_id,),
+        )
+        conn.commit()
+        link_id = int(cur.lastrowid)
+    finally:
+        conn.close()
+
+    await event_bus.publish(
+        "job.completed",
+        {
+            "job_id": link_id,
+            "kind": job["kind"],
+            "outputs": outputs,
+            "project_id": ctx.project_id,
+            "source": "workbench",
+            "message": "生成台结果已回流到项目",
+        },
+    )
+    await event_bus.publish(
+        "asset.ready",
+        {
+            "job_id": link_id,
+            "path": outputs[0] if isinstance(outputs[0], str) else str(outputs[0]),
+            "project_id": ctx.project_id,
+            "target": "workbench",
+            "source": "playground_attach",
+        },
+    )
+    return {
+        "ok": True,
+        "already_attached": False,
+        "job_id": int(job["id"]),
+        "attached_job_id": link_id,
+        "project_id": ctx.project_id,
+        "stage": ctx.stage,
+        "target_id": ctx.source_id,
+    }

calliope-backend/src/calliope/routers/results.py

@@ -0,0 +1,244 @@
+"""Editable task deliverables and explicit, idempotent result → stage drafts."""
+
+from __future__ import annotations
+
+import json
+from typing import Any
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel, Field, model_validator
+
+from calliope.config import settings
+from calliope.db import get_db, row_to_dict
+from calliope.events.bus import event_bus
+from calliope.routers.workbench import StageKey
+
+router = APIRouter()
+
+
+class DraftPatch(BaseModel):
+    revision: int = Field(ge=1)
+    content: str = Field(min_length=1, max_length=200_000)
+    project_id: int | None = None
+    stage_key: StageKey
+
+
+class StoreResult(BaseModel):
+    project_id: int = Field(gt=0)
+    stage_key: StageKey
+    deliverable_id: int | None = Field(default=None, gt=0)
+    revision: int | None = Field(default=None, gt=0)
+    job_id: int | None = Field(default=None, gt=0)
+
+    @model_validator(mode="after")
+    def one_source(self):
+        if (self.deliverable_id is None) == (self.job_id is None):
+            raise ValueError("Choose exactly one result source")
+        if self.deliverable_id is not None and self.revision is None:
+            raise ValueError("Deliverable revision is required")
+        return self
+
+
+def _public(row) -> dict[str, Any]:
+    return row_to_dict(row)
+
+
+@router.get("/deliverables")
+def list_deliverables(session_id: int | None = None) -> list[dict[str, Any]]:
+    conn = get_db(settings.db_path)
+    try:
+        sql = "SELECT * FROM agent_deliverables"
+        args = ()
+        if session_id is not None:
+            sql += " WHERE session_id=?"
+            args = (session_id,)
+        return [_public(r) for r in conn.execute(sql + " ORDER BY id DESC", args)]
+    finally:
+        conn.close()
+
+
+@router.get("/deliverables/{draft_id}/versions")
+def list_versions(draft_id: int) -> list[dict[str, Any]]:
+    conn = get_db(settings.db_path)
+    try:
+        if not conn.execute("SELECT id FROM agent_deliverables WHERE id=?", (draft_id,)).fetchone():
+            raise HTTPException(404, "成果不存在")
+        return [
+            _public(row)
+            for row in conn.execute(
+                "SELECT * FROM agent_deliverable_versions WHERE deliverable_id=? "
+                "ORDER BY revision DESC",
+                (draft_id,),
+            )
+        ]
+    finally:
+        conn.close()
+
+
+@router.patch("/deliverables/{draft_id}")
+def patch_deliverable(draft_id: int, payload: DraftPatch) -> dict[str, Any]:
+    conn = get_db(settings.db_path)
+    try:
+        conn.execute("BEGIN IMMEDIATE")
+        row = conn.execute("SELECT * FROM agent_deliverables WHERE id=?", (draft_id,)).fetchone()
+        if not row:
+            raise HTTPException(404, "成果不存在")
+        if payload.project_id is not None:
+            from calliope.routers.workbench import _get_project
+
+            _get_project(conn, payload.project_id)
+        if row["revision"] != payload.revision:
+            raise HTTPException(409, "草稿已更新，请刷新后重试")
+        # A linked session cannot silently move its work into another project.
+        session = conn.execute(
+            "SELECT project_id FROM agent_sessions WHERE id=?", (row["session_id"],)
+        ).fetchone()
+        if session["project_id"] is not None and payload.project_id != session["project_id"]:
+            raise HTTPException(409, "成果归属与原会话项目不一致")
+        if not payload.content.strip():
+            raise HTTPException(422, "成果内容不能为空")
+        conn.execute(
+            "INSERT INTO agent_deliverable_versions(deliverable_id,revision,content) "
+            "VALUES (?,?,?)",
+            (draft_id, row["revision"], row["content"]),
+        )
+        conn.execute(
+            "UPDATE agent_deliverables SET content=?,project_id=?,stage_key=?,revision=revision+1,"
+            "updated_at=CURRENT_TIMESTAMP WHERE id=?",
+            (payload.content, payload.project_id, payload.stage_key, draft_id),
+        )
+        conn.commit()
+        return _public(
+            conn.execute("SELECT * FROM agent_deliverables WHERE id=?", (draft_id,)).fetchone()
+        )
+    finally:
+        conn.close()
+
+
+@router.post("/store")
+async def store_result(payload: StoreResult) -> dict[str, Any]:
+    from calliope.agent.llm import extract_json
+    from calliope.routers.playground import _assert_path_in_assets
+    from calliope.routers.workbench import (
+        NORMALIZERS,
+        StageContentError,
+        _get_project,
+        _stage_or_404,
+        _stage_public,
+    )
+
+    conn = get_db(settings.db_path)
+    try:
+        conn.execute("BEGIN IMMEDIATE")
+        _get_project(conn, payload.project_id)
+        stage = _stage_or_404(conn, payload.project_id, payload.stage_key)
+        draft = None
+        if payload.deliverable_id is not None:
+            draft = conn.execute(
+                "SELECT * FROM agent_deliverables WHERE id=?", (payload.deliverable_id,)
+            ).fetchone()
+            if not draft:
+                raise HTTPException(404, "成果不存在")
+            if draft["revision"] != payload.revision:
+                raise HTTPException(409, "草稿版本已变化，请先保存并刷新")
+            if draft["project_id"] != payload.project_id or draft["stage_key"] != payload.stage_key:
+                raise HTTPException(409, "请先保存成果的项目与阶段归属")
+            session = conn.execute(
+                "SELECT project_id FROM agent_sessions WHERE id=?", (draft["session_id"],)
+            ).fetchone()
+            if session["project_id"] is not None and session["project_id"] != payload.project_id:
+                raise HTTPException(409, "会话项目已变化，请重新核对成果归属")
+            source_key = f"deliverable:{draft['id']}:{draft['revision']}"
+            result = {
+                "source_key": source_key,
+                "title": draft["title"],
+                "text": draft["content"],
+                "session_id": draft["session_id"],
+            }
+        else:
+            job = conn.execute("SELECT * FROM jobs WHERE id=?", (payload.job_id,)).fetchone()
+            if not job:
+                raise HTTPException(404, "生成结果不存在")
+            project = conn.execute(
+                "SELECT status FROM projects WHERE id=?", (job["project_id"],)
+            ).fetchone()
+            if job["project_id"] != payload.project_id and (
+                not project or project["status"] != "system"
+            ):
+                raise HTTPException(409, "此结果属于其他项目")
+            if job["status"] != "done" or job["kind"] not in ("image", "video"):
+                raise HTTPException(409, "仅可存入已完成的图片或视频")
+            paths = json.loads(job["output_paths_json"] or "[]")
+            if (
+                not paths
+                or not isinstance(paths, list)
+                or not all(isinstance(p, str) for p in paths)
+            ):
+                raise HTTPException(422, "结果没有产物")
+            for path in paths:
+                if not _assert_path_in_assets(path).is_file():
+                    raise HTTPException(410, "产物文件已不存在")
+            source_key = f"job:{job['id']}"
+            result = {
+                "source_key": source_key,
+                "title": f"生成结果 #{job['id']}",
+                "kind": job["kind"],
+                "paths": paths,
+                "job_id": job["id"],
+            }
+        existing = conn.execute(
+            "SELECT id FROM result_attachments WHERE source_key=? AND project_id=? AND stage_key=?",
+            (source_key, payload.project_id, payload.stage_key),
+        ).fetchone()
+        if existing:
+            return {"ok": True, "already_attached": True, "stage": _stage_public(stage)}
+        if stage["status"] == "running":
+            raise HTTPException(409, "本阶段正在生成，请稍后再存入")
+        content = json.loads(stage["content_json"] or "{}")
+        if draft:
+            text = draft["content"].strip()
+            # Valid structured artifacts replace only the working draft.
+            # Confirmed snapshots stay intact.
+            parsed = None
+            try:
+                parsed = extract_json(text)
+            except ValueError:
+                if payload.stage_key == "script":
+                    parsed = {"text": text}
+            if isinstance(parsed, dict):
+                try:
+                    normalized = NORMALIZERS[payload.stage_key](parsed)
+                    normalized["incoming_results"] = content.get("incoming_results", [])
+                    content = normalized
+                except StageContentError as exc:
+                    raise HTTPException(422, str(exc)) from exc
+        incoming = list(content.get("incoming_results") or [])
+        incoming.append(result)
+        content["incoming_results"] = incoming
+        conn.execute(
+            "UPDATE project_stages SET content_json=?,status='awaiting_confirm',draft_edited=1,"
+            "error=NULL,updated_at=CURRENT_TIMESTAMP WHERE project_id=? AND stage_key=?",
+            (json.dumps(content, ensure_ascii=False), payload.project_id, payload.stage_key),
+        )
+        conn.execute(
+            "INSERT INTO result_attachments(source_key,project_id,stage_key) VALUES (?,?,?)",
+            (source_key, payload.project_id, payload.stage_key),
+        )
+        if draft:
+            conn.execute(
+                "UPDATE agent_sessions SET task_status='returned' WHERE id=?",
+                (draft["session_id"],),
+            )
+        conn.execute(
+            "UPDATE projects SET updated_at=CURRENT_TIMESTAMP WHERE id=?", (payload.project_id,)
+        )
+        conn.commit()
+        row = _stage_or_404(conn, payload.project_id, payload.stage_key)
+        out = {"ok": True, "already_attached": False, "stage": _stage_public(row)}
+    finally:
+        conn.close()
+    await event_bus.publish(
+        "workbench.stage.updated",
+        {"project_id": payload.project_id, "stage_key": payload.stage_key},
+    )
+    return out

calliope-backend/src/calliope/routers/workbench.py

@@ -45,6 +45,10 @@ class StagePatch(BaseModel):
     chosen_style_id: str | None = None
 
 
+class StageNotePatch(BaseModel):
+    text: str = Field(max_length=200_000)
+
+
 class StageRunRequest(BaseModel):
     instruction: str | None = Field(default=None, max_length=8000)
 
@@ -292,10 +296,13 @@ def _load_stage(conn, project_id: int, stage_key: str) -> dict[str, Any]:
 
 
 def _stage_public(row: dict[str, Any]) -> dict[str, Any]:
+    content = json.loads(row["content_json"]) if row["content_json"] else None
     return {
         "stage_key": row["stage_key"],
         "status": row["status"],
-        "content": json.loads(row["content_json"]) if row["content_json"] else None,
+        "content": content,
+        "assistant_note": (content or {}).get("assistant_note", ""),
+        "incoming_results": (content or {}).get("incoming_results", []),
         "confirmed_content": (
             json.loads(row["confirmed_content_json"]) if row["confirmed_content_json"] else None
         ),
@@ -571,6 +578,10 @@ async def _execute_run(project_id: int, stage_key: str, run_id: int, instruction
 
         conn = get_db(db)
         try:
+            latest_stage = _load_stage(conn, project_id, stage_key)
+            previous = json.loads(latest_stage["content_json"]) if latest_stage["content_json"] else {}
+            if previous.get("assistant_note"):
+                content["assistant_note"] = previous["assistant_note"]
             conn.execute(
                 "UPDATE stage_runs SET status='done', output_json=?, completed_at=CURRENT_TIMESTAMP "
                 "WHERE id = ?",
@@ -681,6 +692,11 @@ async def patch_stage(project_id: int, stage_key: str, payload: StagePatch) -> d
             content = NORMALIZERS[stage_key](payload.content)
         except StageContentError as exc:
             raise HTTPException(status_code=400, detail=str(exc)) from exc
+        old_content = json.loads(stage["content_json"]) if stage["content_json"] else {}
+        if old_content.get("incoming_results"):
+            content["incoming_results"] = old_content["incoming_results"]
+        if old_content.get("assistant_note"):
+            content["assistant_note"] = old_content["assistant_note"]
         if content == (json.loads(stage["content_json"]) if stage["content_json"] else None):
             return {"ok": True, "stage": _stage_public({**stage, "content_json": json.dumps(content, ensure_ascii=False)})}
         # Editing a confirmed stage produces a new draft awaiting re-confirm;
@@ -715,6 +731,32 @@ async def patch_stage(project_id: int, stage_key: str, payload: StagePatch) -> d
         conn.close()
 
 
+@router.patch("/projects/{project_id}/stages/{stage_key}/note")
+async def patch_stage_note(project_id: int, stage_key: str, payload: StageNotePatch) -> dict[str, Any]:
+    """Keep free-text advice separate from validated stage artifacts and snapshots."""
+    conn = get_db(config.settings.db_path)
+    try:
+        _get_project(conn, project_id)
+        stage = _stage_or_404(conn, project_id, stage_key)
+        if stage["status"] == "running":
+            raise HTTPException(status_code=409, detail="本阶段正在生成中，请稍候再保存建议。")
+        content = json.loads(stage["content_json"]) if stage["content_json"] else {}
+        if payload.text.strip():
+            content["assistant_note"] = payload.text.strip()
+        else:
+            content.pop("assistant_note", None)
+        conn.execute(
+            "UPDATE project_stages SET content_json=?, updated_at=CURRENT_TIMESTAMP "
+            "WHERE project_id=? AND stage_key=?",
+            (json.dumps(content, ensure_ascii=False) if content else None, project_id, stage_key),
+        )
+        conn.execute("UPDATE projects SET updated_at=CURRENT_TIMESTAMP WHERE id=?", (project_id,))
+        conn.commit()
+        return {"ok": True, "stage": _stage_public(_load_stage(conn, project_id, stage_key))}
+    finally:
+        conn.close()
+
+
 @router.post("/projects/{project_id}/stages/{stage_key}/run")
 async def run_stage(project_id: int, stage_key: str, payload: StageRunRequest | None = None) -> dict[str, Any]:
     instruction = (payload.instruction if payload else None) or None
@@ -777,7 +819,13 @@ async def confirm_stage(
             raise HTTPException(status_code=409, detail="本阶段正在生成中，请等待完成。")
         if not stage["content_json"]:
             raise HTTPException(status_code=400, detail="本阶段还没有内容，请先生成或手动填写。")
-        content = json.loads(stage["content_json"])
+        try:
+            content = NORMALIZERS[stage_key](json.loads(stage["content_json"]))
+        except StageContentError as exc:
+            raise HTTPException(status_code=400, detail=str(exc)) from exc
+        raw_content = json.loads(stage["content_json"])
+        if raw_content.get("incoming_results"):
+            content["incoming_results"] = raw_content["incoming_results"]
         chosen = payload.chosen_style_id if payload else None
         if stage_key == "style":
             directions = content.get("directions") or []
@@ -815,11 +863,15 @@ async def restore_stage(project_id: int, stage_key: str) -> dict[str, Any]:
         stage = _stage_or_404(conn, project_id, stage_key)
         if not stage["confirmed_content_json"]:
             raise HTTPException(status_code=400, detail="本阶段还没有已确认版本，无需恢复。")
+        content = json.loads(stage["confirmed_content_json"])
+        current = json.loads(stage["content_json"]) if stage["content_json"] else {}
+        if current.get("assistant_note"):
+            content["assistant_note"] = current["assistant_note"]
         conn.execute(
-            "UPDATE project_stages SET content_json=confirmed_content_json, "
+            "UPDATE project_stages SET content_json=?, "
             "status='confirmed', draft_edited=0, updated_at=CURRENT_TIMESTAMP "
             "WHERE project_id = ? AND stage_key = ?",
-            (project_id, stage_key),
+            (json.dumps(content, ensure_ascii=False), project_id, stage_key),
         )
         conn.commit()
         row = _load_stage(conn, project_id, stage_key)

calliope-backend/src/calliope/routers/workflows.py

@@ -7,6 +7,7 @@ from fastapi import APIRouter, HTTPException
 
 from calliope.comfyui.endpoints import client_for, endpoint_snapshot
 from calliope.comfyui.lint import blocking_problem, workflow_warnings
+from calliope.comfyui.metadata import suggested_metadata
 from calliope.comfyui.output_map import (
     auto_output_map,
     load_output_map,
@@ -23,6 +24,7 @@ from calliope.comfyui.parser import (
 from calliope.comfyui.preflight import check_workflow_against
 from calliope.comfyui.profiles import detect_prompt_profile
 from calliope.comfyui.roles import usage_to_kind
+from calliope.comfyui.ui_convert import convert_ui_workflow
 from calliope.comfyui.validate import validate_input_values
 from calliope.config import settings
 from calliope.db import get_db, row_to_dict
@@ -30,8 +32,12 @@ from calliope.events.bus import event_bus
 from calliope.models.schemas import (
     WorkflowAnalyze,
     WorkflowCheckRequest,
+    WorkflowConvertRequest,
     WorkflowCreate,
+    WorkflowImportBatchRequest,
+    WorkflowImportScanRequest,
     WorkflowTestRequest,
+    WorkflowUIFileItem,
     WorkflowUpdate,
 )
 from calliope.queue.manager import queue_manager
@@ -44,6 +50,14 @@ from calliope.queue.workflow_test import (
 
 router = APIRouter()
 
+# HEL-681: metadata columns the lightweight list view exposes (everything
+# except the heavy workflow_json / input_schema / output_map payloads).
+_META_COLUMNS = (
+    "id, name, kind, usage, is_enabled, category, model_family, media_io, tags,"
+    " favorite, last_used_at, description, source, source_path, prompt_profile,"
+    " created_at, endpoint_id, usage_source, output_map_source"
+)
+
 
 def _serialize_workflow(row: Any) -> dict[str, Any]:
     data = row_to_dict(row)
@@ -61,9 +75,21 @@ def _serialize_workflow(row: Any) -> dict[str, Any]:
     data["needs_mapping"] = (
         mapping_problem(data["workflow_json"], raw_map, data.get("output_map_source")) is not None
     )
+    # HEL-681: structured library metadata (raw JSON columns → values).
+    data["media_io"] = _load_json_col(data.get("media_io"), {"in": [], "out": []})
+    data["tags"] = _load_json_col(data.get("tags"), [])
+    data["favorite"] = bool(data.get("favorite"))
     return data
 
 
+def _load_json_col(raw: Any, default: Any) -> Any:
+    try:
+        value = json.loads(raw) if raw else None
+    except (json.JSONDecodeError, TypeError):
+        value = None
+    return value if value is not None else default
+
+
 async def _connection_check(
     endpoint_id: str | None, workflow_json: dict[str, Any], refresh: bool = False
 ) -> dict[str, Any]:
@@ -216,9 +242,31 @@ def _last_test_summary(job: dict[str, Any]) -> dict[str, Any]:
 
 
 @router.get("")
-async def list_workflows() -> list[dict[str, Any]]:
+async def list_workflows(view: str | None = None) -> list[dict[str, Any]]:
     conn = get_db(settings.db_path)
     try:
+        if view == "meta":
+            # HEL-681: metadata-only list for 150+ scale browsing — no
+            # workflow_json, no per-row re-parse. `needs_mapping` here is the
+            # cheap pending check (usage/output_map not yet settled); rows
+            # that never generated keep showing as pending exactly like the
+            # full view reports them.
+            rows = conn.execute(
+                f"SELECT {_META_COLUMNS} FROM workflows ORDER BY favorite DESC,"
+                " last_used_at DESC, id DESC"
+            ).fetchall()
+            out = []
+            for row in rows:
+                data = row_to_dict(row)
+                data["is_enabled"] = bool(data.get("is_enabled"))
+                data["favorite"] = bool(data.get("favorite"))
+                data["media_io"] = _load_json_col(data.get("media_io"), {"in": [], "out": []})
+                data["tags"] = _load_json_col(data.get("tags"), [])
+                data["needs_mapping"] = data.get("usage") is None or data.get(
+                    "output_map_source"
+                ) is None
+                out.append(data)
+            return out
         rows = conn.execute("SELECT * FROM workflows ORDER BY id DESC").fetchall()
         out = [_serialize_workflow(r) for r in rows]
         # 上次测试 state is read live from the newest test job per workflow —
@@ -395,6 +443,12 @@ async def update_workflow(workflow_id: int, payload: WorkflowUpdate) -> dict[str
         data = payload.model_dump(exclude_unset=True)
         if "is_enabled" in data and data["is_enabled"] is not None:
             data["is_enabled"] = 1 if data["is_enabled"] else 0
+        # HEL-681: library metadata patch fields (favorite/tags/category/
+        # model_family) — booleans to ints, lists to JSON text.
+        if "favorite" in data and data["favorite"] is not None:
+            data["favorite"] = 1 if data["favorite"] else 0
+        if data.get("tags") is not None:
+            data["tags"] = json.dumps(data["tags"])
         workflow_json = json.loads(existing["workflow_json"])
         # HEL-638: output_map payload. A non-empty list validates against the
         # stored JSON and becomes the user decision; an explicit empty list
@@ -600,3 +654,280 @@ async def delete_workflow(workflow_id: int) -> dict[str, bool]:
         return {"ok": True}
     finally:
         conn.close()
+
+
+# ---------------------------------------------------------------------------
+# HEL-681 (S2): UI→API conversion dry-run + batch import + repo scan.
+# The convert endpoint never writes; import-batch converts again server-side
+# and skips anything uncertain (needs_confirmation / lint-blocked / conflict)
+# — repeated runs import nothing new, so the batch is idempotent by design.
+# ---------------------------------------------------------------------------
+
+
+def _convert_one(item: WorkflowUIFileItem) -> tuple[dict[str, Any], dict[str, Any] | None]:
+    """(report, converted workflow) for one UI file — shared by every
+    convert/import path so the analysis can never drift between them."""
+    result = convert_ui_workflow(item.workflow_json)
+    stem = (
+        item.source_path.replace("\\", "/").rsplit("/", 1)[-1].removesuffix(".json")
+        if item.source_path
+        else None
+    )
+    name = item.name or stem or "未命名工作流"
+    report: dict[str, Any] = {
+        "name": name,
+        "source_path": item.source_path,
+        "status": result.status,
+        "needs_confirmation": result.needs_confirmation,
+        "issues": [
+            {"node_id": i.node_id, "code": i.code, "level": i.level, "message": i.message}
+            for i in result.issues
+        ],
+    }
+    if result.workflow is None:
+        report["importable"] = False
+        report["skip_reason"] = "转换失败：" + (
+            result.issues[0].message if result.issues else "未知错误"
+        )
+        return report, None
+    suggested = suggested_metadata(result.workflow, item.source_path, item.workflow_json)
+    report["suggested"] = suggested
+    # The import gate re-runs the product's own checks — a converted graph
+    # that the lint would block (missing model link etc.) is reported, not
+    # silently imported.
+    broken = blocking_problem(result.workflow)
+    if broken:
+        report["importable"] = False
+        report["skip_reason"] = broken
+        report["status"] = "warn"
+        return report, result.workflow
+    if result.needs_confirmation:
+        report["importable"] = False
+        report["skip_reason"] = "存在无法可靠映射的控件，需人工确认后重导"
+        return report, result.workflow
+    report["importable"] = True
+    return report, result.workflow
+
+
+@router.post("/convert")
+async def convert_workflows(payload: WorkflowConvertRequest) -> dict[str, Any]:
+    """Dry-run UI→API conversion for a batch of files: per-file ok/warn/fail,
+    issues, suggested metadata and importability. Nothing is stored."""
+    files = []
+    object_info: dict[str, Any] | None = None
+    client = None
+    if payload.endpoint_id:
+        endpoint = settings.resolve_comfyui_endpoint(payload.endpoint_id)
+        if endpoint is not None:
+            client = client_for(endpoint)
+            try:
+                object_info = await client.object_info(force_refresh=payload.refresh)
+            except Exception:
+                object_info = None
+    try:
+        for item in payload.files:
+            report, converted = _convert_one(item)
+            if object_info is not None and report.get("importable") and converted:
+                findings = check_workflow_against(object_info, converted)
+                errors = [f for f in findings if f.get("level") == "error"]
+                report["preflight"] = {
+                    "endpoint_id": payload.endpoint_id,
+                    "ok": not errors,
+                    "findings": findings,
+                }
+                if errors:
+                    report["importable"] = False
+                    report["skip_reason"] = errors[0].get("message") or "preflight 未通过"
+            if payload.include_workflows:
+                report["workflow_json"] = converted
+            files.append(report)
+    finally:
+        if client is not None:
+            await client.close()
+    counts = {key: sum(1 for f in files if f["status"] == key) for key in ("ok", "warn", "fail")}
+    return {
+        "total": len(files),
+        **counts,
+        "needs_confirmation": sum(1 for f in files if f["needs_confirmation"]),
+        "importable": sum(1 for f in files if f.get("importable")),
+        "files": files,
+    }
+
+
+def _insert_converted(
+    conn: Any, item: WorkflowUIFileItem, report: dict[str, Any], converted: dict[str, Any]
+) -> dict[str, Any]:
+    """Insert one converted workflow row (import-batch's write path).
+
+    Mirrors create_workflow's enable gate: usage must be settled (auto or the
+    wizard's confirmation) and unknown outputs need a mapping; anything less
+    lands disabled exactly like a manual import would.
+    """
+    suggested = report["suggested"]
+    judgment = classify_usage(converted)
+    usage = item.usage or judgment["usage"]
+    usage_source = "user" if item.usage else "auto"
+    kind = usage_to_kind(usage) or suggested["kind"]
+    profile = detect_prompt_profile(converted)
+    if item.output_map:
+        problems = validate_output_map(converted, item.output_map)
+        if problems:
+            raise HTTPException(status_code=422, detail="；".join(problems))
+        output_map = json.dumps(item.output_map)
+        output_map_source = "user"
+    else:
+        auto_map = auto_output_map(converted)
+        output_map = json.dumps(auto_map) if auto_map else None
+        output_map_source = "auto" if auto_map else None
+    mapping_ok = not needs_user_output_map(converted) or bool(item.output_map)
+    workflow_text = json.dumps(converted)
+    existing = conn.execute(
+        "SELECT id FROM workflows WHERE name = ? AND kind = ? AND workflow_json = ?",
+        (report["name"], kind, workflow_text),
+    ).fetchone()
+    if existing:
+        return {
+            "result": "skipped",
+            "skip_reason": "conflict",
+            "existing_id": existing["id"],
+        }
+    is_enabled = 1 if (usage and mapping_ok) else 0
+    cur = conn.execute(
+        """
+        INSERT INTO workflows (name, kind, workflow_json, input_schema, output_schema,
+                               description, prompt_profile, endpoint_id, is_enabled,
+                               usage, usage_source, output_map, output_map_source,
+                               category, model_family, media_io, tags, favorite,
+                               source, source_path)
+        VALUES (?, ?, ?, ?, ?, ?, ?, NULL, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0, 'ui_convert', ?)
+        """,
+        (
+            report["name"],
+            kind,
+            workflow_text,
+            json.dumps(
+                item.input_schema if item.input_schema else parse_dynamic_inputs(converted)
+            ),
+            json.dumps(parse_dynamic_outputs(converted)),
+            item.description if item.description is not None else suggested["description"],
+            profile,
+            is_enabled,
+            usage,
+            usage_source,
+            output_map,
+            output_map_source,
+            suggested["category"],
+            suggested["model_family"],
+            json.dumps({"in": suggested["media_in"], "out": suggested["media_out"]}),
+            json.dumps(item.tags or []),
+            item.source_path,
+        ),
+    )
+    return {"result": "imported", "id": cur.lastrowid}
+
+
+async def _run_import(items: list[WorkflowUIFileItem]) -> dict[str, Any]:
+    reports: list[dict[str, Any]] = []
+    conn = get_db(settings.db_path)
+    try:
+        for item in items:
+            report, converted = _convert_one(item)
+            if not report.get("importable"):
+                report["result"] = "skipped"
+                reports.append(report)
+                continue
+            try:
+                outcome = _insert_converted(conn, item, report, converted)
+            except HTTPException as exc:
+                report["result"] = "failed"
+                report["skip_reason"] = str(exc.detail)
+                reports.append(report)
+                continue
+            conn.commit()
+            report.update(outcome)
+            reports.append(report)
+    finally:
+        conn.close()
+    imported = [r for r in reports if r.get("result") == "imported"]
+    skipped = [
+        {"name": r["name"], "source_path": r["source_path"], "reason": r.get("skip_reason")}
+        for r in reports
+        if r.get("result") != "imported"
+    ]
+    return {
+        "total": len(reports),
+        "imported": len(imported),
+        "skipped": len(skipped),
+        "imported_ids": [r["id"] for r in imported],
+        "skipped_files": skipped,
+        "files": reports,
+    }
+
+
+@router.post("/import-batch")
+async def import_workflows_batch(payload: WorkflowImportBatchRequest) -> dict[str, Any]:
+    """Batch-import UI-format workflows: convert server-side, insert what is
+    cleanly convertible, skip conflicts and anything uncertain. Re-running
+    with the same files creates zero new rows."""
+    return await _run_import(payload.files)
+
+
+@router.post("/import-scan")
+async def import_workflows_scan(payload: WorkflowImportScanRequest) -> dict[str, Any]:
+    """Scan a server-side directory for UI-format workflow JSONs and run the
+    convert (dry_run, default) or import pipeline over every file found."""
+    from pathlib import Path
+
+    root = Path(payload.root)
+    if not root.is_absolute():
+        candidates = [
+            Path.cwd() / root,
+            Path(__file__).resolve().parents[4] / root,
+        ]
+        root = next((c for c in candidates if c.is_dir()), root)
+    if not root.is_dir():
+        raise HTTPException(status_code=404, detail=f"目录不存在：{payload.root}")
+    items: list[WorkflowUIFileItem] = []
+    for path in sorted(root.rglob("*.json")):
+        try:
+            data = json.loads(path.read_text(encoding="utf-8"))
+        except (json.JSONDecodeError, OSError):
+            continue
+        if not (isinstance(data, dict) and isinstance(data.get("nodes"), list)):
+            continue  # API-format or non-workflow files: not this pipeline's job
+        items.append(
+            WorkflowUIFileItem(
+                source_path=str(path.relative_to(root)), workflow_json=data
+            )
+        )
+    if payload.dry_run:
+        files = [_convert_one(item)[0] for item in items]
+        counts = {
+            key: sum(1 for f in files if f["status"] == key) for key in ("ok", "warn", "fail")
+        }
+        return {
+            "total": len(files),
+            **counts,
+            "needs_confirmation": sum(1 for f in files if f["needs_confirmation"]),
+            "importable": sum(1 for f in files if f.get("importable")),
+            "files": files,
+        }
+    return await _run_import(items)
+
+
+@router.post("/{workflow_id}/touch")
+async def touch_workflow(workflow_id: int) -> dict[str, bool]:
+    """Record a use (最近使用) — called by the generate pipeline on enqueue."""
+    conn = get_db(settings.db_path)
+    try:
+        row = conn.execute("SELECT id FROM workflows WHERE id = ?", (workflow_id,)).fetchone()
+        if not row:
+            raise HTTPException(status_code=404, detail="Workflow not found")
+        conn.execute(
+            "UPDATE workflows SET last_used_at = CURRENT_TIMESTAMP WHERE id = ?",
+            (workflow_id,),
+        )
+        conn.commit()
+        return {"ok": True}
+    finally:
+        conn.close()

calliope-backend/tests/test_agent_mention_limits.py

@@ -0,0 +1,36 @@
+"""Workflow uniqueness is independent of the selected task skills."""
+import pytest
+from pydantic import ValidationError
+from calliope.routers.agent import MessageCreate
+
+
+def workflow(n=1):
+    return {"type": "workflow", "id": n, "name": f"workflow-{n}", "kind": "image"}
+
+
+def skill(n=1):
+    return {"type": "skill", "name": f"skill-{n}"}
+
+
+def test_workflow_and_skills_can_be_sent_together():
+    message = MessageCreate(content="Create an image", mentions=[workflow(), *[skill(i) for i in range(4)]])
+    assert len(message.mentions) == 5
+    assert message.mentions[0].id == 1
+
+
+def test_legacy_single_workflow_is_accepted():
+    assert MessageCreate(mentions=[workflow()]).mentions[0].type == "workflow"
+
+
+def test_skills_without_workflow_are_accepted():
+    assert len(MessageCreate(mentions=[skill(i) for i in range(4)]).mentions) == 4
+
+
+def test_second_workflow_is_still_rejected():
+    with pytest.raises(ValidationError, match="Only one @workflow"):
+        MessageCreate(mentions=[workflow(), skill(), workflow(2)])
+
+
+def test_fifth_skill_is_rejected():
+    with pytest.raises(ValidationError, match="At most four skill"):
+        MessageCreate(mentions=[skill(i) for i in range(5)])

calliope-backend/tests/test_image_input_workflows.py

@@ -36,6 +36,7 @@ QWEN_EDIT = "qwen21_edit_sage_API.json"  # qwen-image-2.1-图片编辑-sage加
 EXAMPLES = Path(__file__).resolve().parents[2] / "example_ComfyUI_workflows"
 
 REF_KEY = "131@ref_images"
+LAST_KEY = "131@last_frame"
 
 
 def _load(name: str) -> dict:
@@ -61,7 +62,8 @@ def _ref_links(wf: dict, node_id: str = "131") -> list[tuple[str, str]]:
 # ---------------------------------------------------------------------------
 
 
-def test_i2v_exposes_one_required_first_frame_and_no_last_frame():
+def test_i2v_exposes_required_first_frame_and_optional_last_frame():
+    """HEL-671: the 04 export is H3 FL2VA — `last_frame` is unwired but real."""
     inputs = parse_dynamic_inputs(_load(I2V))
     media = [i for i in inputs if i["kind"] in ("image", "image_list", "video", "audio")]
     assert media == [
@@ -73,10 +75,36 @@ def test_i2v_exposes_one_required_first_frame_and_no_last_frame():
             "defaultValue": None,
             "required": True,
             "auto": True,
-        }
+        },
+        {
+            "nodeId": LAST_KEY,
+            "label": "尾帧",
+            "role": "last_frame",
+            "kind": "image",
+            "defaultValue": None,
+            "required": False,
+            "auto": True,
+        },
     ]
-    # the title comment about FL2V is not a slot
-    assert not any(i.get("role") == "last_frame" for i in inputs)
+
+
+def test_wired_last_frame_is_its_own_slot_not_a_second_virtual_one():
+    wf = _load(I2V)
+    wf["950"] = {"class_type": "LoadImage", "inputs": {"image": "last.png"}}
+    wf["131"]["inputs"]["last_frame"] = ["950", 0]
+    media = [i for i in parse_dynamic_inputs(wf) if i["kind"] == "image"]
+    assert [(i["nodeId"], i["role"], i["required"]) for i in media] == [
+        ("901", "first_frame", True),
+        ("950", "last_frame", True),
+    ]
+
+
+def test_first_frame_through_a_custom_loader_gets_no_last_frame_slot():
+    # Repo example: VHS_LoadImagePath → resize → first_frame; no slot pair to mirror.
+    wf = json.loads(
+        (EXAMPLES / "minimax_h3-Turbo_Image2Video_20260813_API.json").read_text(encoding="utf-8")
+    )
+    assert not any(i.get("role") == "last_frame" for i in parse_dynamic_inputs(wf))
 
 
 def test_ref2v_exposes_one_group_of_one_to_nine_reference_images():
@@ -201,6 +229,29 @@ def test_single_slot_values_patch_first_frame_and_qwen_input():
     assert qwen["4"]["inputs"]["resolution"] == 1536
 
 
+def test_patch_last_frame_adds_its_own_load_image():
+    base = _load(I2V)
+    wf = patch_workflow(base, {"901": "/u/first.png", LAST_KEY: "/u/last.png"})
+    node = wf["131"]["inputs"]
+    assert node["first_frame"] == ["901", 0]
+    last_id = node["last_frame"][0]
+    assert last_id not in base and node["last_frame"] == [last_id, 0]
+    assert wf[last_id]["class_type"] == "LoadImage"
+    assert wf[last_id]["inputs"] == {"image": "/u/last.png"}
+    assert wf["901"]["inputs"]["image"] == "/u/first.png"
+    # base untouched; patching the result again rewires nothing
+    assert "last_frame" not in base["131"]["inputs"]
+    again = patch_workflow(wf, {LAST_KEY: "/u/other.png"})
+    assert again["131"]["inputs"]["last_frame"] == [last_id, 0]
+
+
+def test_patch_without_last_frame_leaves_first_frame_only_graph():
+    for values in ({"901": "/u/first.png"}, {"901": "/u/first.png", LAST_KEY: ""}):
+        wf = patch_workflow(_load(I2V), values)
+        assert "last_frame" not in wf["131"]["inputs"]
+        assert sorted(wf) == sorted(_load(I2V))
+
+
 def test_legacy_job_values_keyed_by_load_image_still_patch():
     """Jobs queued before HEL-633 carry the LoadImage id, not the group key."""
     wf = patch_workflow(_load(REF), {"901": "/assets/uploads/old.png"})
@@ -265,6 +316,14 @@ def test_validate_rejects_bad_reference_files(uploads_dir):
 def test_validate_requires_first_frame_and_input_image():
     _, errs = validate_input_values(parse_dynamic_inputs(_load(I2V)), {"1": "p"})
     assert errs == ["请上传首帧"]
+    _, errs = validate_input_values(
+        parse_dynamic_inputs(_load(I2V)), {"1": "p", LAST_KEY: "/u/l.png"}
+    )
+    assert errs == ["请上传首帧"]
+    clean, errs = validate_input_values(
+        parse_dynamic_inputs(_load(I2V)), {"1": "p", "901": "/u/f.png"}
+    )
+    assert errs == [] and LAST_KEY not in clean
     _, errs = validate_input_values(parse_dynamic_inputs(_load(QWEN_EDIT)), {"4@prompt": "p"})
     assert errs == ["请上传输入图"]
 
@@ -403,9 +462,67 @@ def test_i2v_chain_uploads_first_frame(client, named_comfy):
     prompt = named_comfy.prompts[0]["prompt"]
     assert prompt["901"]["inputs"]["image"] == f"calliope/{Path(first).name}"
     assert prompt["131"]["inputs"]["first_frame"] == ["901", 0]
+    assert "last_frame" not in prompt["131"]["inputs"]
     assert prompt["124"]["inputs"]["denoise"] == 0.8
 
 
+def test_fl2v_chain_uploads_first_and_last_frame_into_their_own_inputs(client, named_comfy):
+    with _real_run(client, named_comfy):
+        wf_id = _import_workflow(client, "H3 首尾帧生视频", "video", _load(I2V))
+        listed = next(w for w in client.get("/api/workflows").json() if w["id"] == wf_id)
+        assert listed["usage"] == "image2video"
+        slots = {i["nodeId"]: i for i in listed["input_schema"] if i["kind"] == "image"}
+        assert slots["901"]["role"] == "first_frame" and slots[LAST_KEY]["role"] == "last_frame"
+        last = _upload(client, "尾帧.png")
+        r = _generate(client, wf_id, {"1": "从白天过渡到夜晚", LAST_KEY: last})
+        assert r.status_code == 400 and "请上传首帧" in r.json()["detail"]
+        first = _upload(client, "首帧.png")
+        r = _generate(client, wf_id, {"1": "从白天过渡到夜晚", "901": first, LAST_KEY: last})
+        assert r.status_code == 200, r.text
+        assert _wait_done(client, r.json()["job"]["id"])["status"] == "done"
+    prompt = named_comfy.prompts[0]["prompt"]
+    node = prompt["131"]["inputs"]
+    assert prompt[node["first_frame"][0]]["inputs"]["image"] == f"calliope/{Path(first).name}"
+    assert prompt[node["last_frame"][0]]["inputs"]["image"] == f"calliope/{Path(last).name}"
+    assert node["first_frame"][0] != node["last_frame"][0]
+    assert sorted(named_comfy.upload_names) == sorted([Path(first).name, Path(last).name])
+
+
+def test_migration_renames_the_imported_first_frame_workflow(tmp_path):
+    import asyncio
+    import sqlite3
+
+    from calliope.db import migrate_db
+
+    db = tmp_path / "c.db"
+    asyncio.run(migrate_db(db))
+    conn = sqlite3.connect(db)
+    i2v, ref = json.dumps(_load(I2V)), json.dumps(_load(REF))
+    conn.executemany(
+        "INSERT INTO workflows (name, kind, workflow_json, description) VALUES (?, 'video', ?, ?)",
+        [
+            ("H3 图生视频·首帧（04 用户提供）", i2v, None),
+            ("H3图生视频·首帧", i2v, "我自己写的说明"),
+            ("图生视频·首帧模板", ref, None),  # not the FL2VA graph — left alone
+            ("我的视频工作流", i2v, None),  # user already renamed — left alone
+        ],
+    )
+    conn.commit()
+    conn.close()
+    asyncio.run(migrate_db(db))
+    asyncio.run(migrate_db(db))  # idempotent
+    conn = sqlite3.connect(db)
+    rows = conn.execute("SELECT name, description FROM workflows ORDER BY id").fetchall()
+    conn.close()
+    assert rows[0] == (
+        "H3 首尾帧生视频（04 用户提供）",
+        "首帧必填，尾帧可选：只传首帧为图生视频，同时传尾帧为首尾帧生视频",
+    )
+    assert rows[1] == ("H3首尾帧生视频", "我自己写的说明")  # suffix kept, description kept
+    assert rows[2] == ("图生视频·首帧模板", None)
+    assert rows[3] == ("我的视频工作流", None)
+
+
 def test_broken_qwen_import_warns_and_generation_is_refused(client, named_comfy):
     with _real_run(client, named_comfy):
         analyzed = client.post("/api/workflows/analyze", json={"workflow_json": _load(QWEN_EDIT)})

calliope-backend/tests/test_playground_workbench_flowback.py

@@ -0,0 +1,350 @@
+"""HEL-684 — playground takes flow back to their workbench source row.
+
+Covers the acceptance list: real-context-only passthrough (no guessing,
+stale rows rejected), explicit flow-back with idempotency (repeated
+operations create no duplicates), cancelled/independent paths never
+writing the project, and playground job deletion clearing the link.
+"""
+
+from __future__ import annotations
+
+import tempfile
+import time
+from pathlib import Path
+
+import pytest
+from fastapi.testclient import TestClient
+
+from calliope.db import migrate_db
+from calliope.main import create_app
+
+SAMPLE_WORKFLOW = {
+    "1": {
+        "class_type": "CLIPTextEncode",
+        "inputs": {"text": "hello"},
+        "_meta": {"title": "Prompt (Input:prompt)"},
+    },
+    "2": {
+        "class_type": "SaveImage",
+        "inputs": {"images": ["1", 0]},
+        "_meta": {"title": "Save (Output:image)"},
+    },
+}
+
+SAMPLE_VIDEO_WORKFLOW = {
+    "1": {
+        "class_type": "CLIPTextEncode",
+        "inputs": {"text": "hello"},
+        "_meta": {"title": "Prompt (Input:prompt)"},
+    },
+    "2": {
+        "class_type": "SaveVideo",
+        "inputs": {"video": ["1", 0]},
+        "_meta": {"title": "Save (Output:video)"},
+    },
+}
+
+
+@pytest.fixture
+def client(monkeypatch):
+    with tempfile.TemporaryDirectory() as tmpdir:
+        import asyncio
+
+        import calliope.config as config_module
+
+        s = config_module.settings
+        prev = {
+            "data_dir": s.data_dir,
+            "assets_dir": s.assets_dir,
+            "dry_run": s.dry_run,
+        }
+        s.data_dir = Path(tmpdir)
+        s.assets_dir = Path(tmpdir) / "assets"
+        s.assets_dir.mkdir(parents=True, exist_ok=True)
+        s.dry_run = True
+        monkeypatch.setattr(config_module.Settings, "save_config_file", lambda self: None)
+        asyncio.run(migrate_db(s.db_path))
+        app = create_app()
+        try:
+            with TestClient(app) as c:
+                yield c
+        finally:
+            for k, v in prev.items():
+                setattr(s, k, v)
+
+
+def _wait_done(client: TestClient, job_id: int) -> dict:
+    for _ in range(60):
+        jobs = client.get("/api/playground/jobs").json()
+        done = next((j for j in jobs if j["id"] == job_id and j["status"] == "done"), None)
+        if done and done.get("output_paths"):
+            return done
+        time.sleep(0.25)
+    raise AssertionError("playground job did not finish in dry-run")
+
+
+def _seed_assets_stage(client: TestClient) -> dict:
+    proj = client.post("/api/projects", json={"title": "Reel"}).json()
+    # Real stage rows the way the workbench itself creates them.
+    patch = client.patch(
+        f"/api/workbench/projects/{proj['id']}/stages/assets",
+        json={
+            "content": {
+                "assets": [
+                    {
+                        "id": "asset-1",
+                        "kind": "character",
+                        "name": "林夏",
+                        "description": "",
+                        "prompt": "a stoic courier",
+                        "negative_prompt": "",
+                    }
+                ]
+            }
+        },
+    )
+    assert patch.status_code == 200, patch.text
+    return proj
+
+
+def _context(proj: dict, **over: object) -> dict:
+    base = {
+        "project_id": proj["id"],
+        "stage": "assets",
+        "source_kind": "asset",
+        "source_id": "asset-1",
+        "label": "角色「林夏」",
+    }
+    base.update(over)
+    return base
+
+
+def _make_workflow(client: TestClient, name: str, workflow: dict) -> int:
+    r = client.post(
+        "/api/workflows",
+        json={
+            "name": name,
+            "kind": "video" if "SaveVideo" in str(workflow) else "image",
+            "workflow_json": workflow,
+        },
+    )
+    assert r.status_code == 200, r.text
+    return r.json()["id"]
+
+
+# ── context passthrough ────────────────────────────────────────────────
+
+
+def test_generate_with_context_stamps_job_and_stays_on_playground(client):
+    wf_id = _make_workflow(client, "FB Img", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+
+    r = client.post(
+        "/api/playground/generate",
+        json={
+            "workflow_id": wf_id,
+            "input_values": {"1": "a cat"},
+            "source": "studio-image",
+            "context": _context(proj),
+        },
+    )
+    assert r.status_code == 200, r.text
+    job = r.json()["job"]
+    assert job["payload"]["workbench"]["project_id"] == proj["id"]
+    assert job["payload"]["workbench"]["source_id"] == "asset-1"
+    assert job["payload"]["workbench"]["label"] == "角色「林夏」"
+
+    # The job itself rides the hidden playground project — independent
+    # desk behavior (feed, SSE, tasks) is untouched.
+    scratch = client.get("/api/playground/project").json()
+    assert job["project_id"] == scratch["id"]
+
+
+def test_generate_without_context_writes_nothing_to_any_project(client):
+    wf_id = _make_workflow(client, "FB Solo", SAMPLE_WORKFLOW)
+    _seed_assets_stage(client)
+    r = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "solo"}},
+    )
+    assert r.status_code == 200
+    assert "workbench" not in r.json()["job"]["payload"]
+
+
+def test_generate_rejects_fake_or_stale_context(client):
+    wf_id = _make_workflow(client, "FB Fake", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+
+    # Unknown project
+    r = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "context": _context(proj, project_id=99999)},
+    )
+    assert r.status_code == 404
+
+    # Source row that does not exist in the stage content
+    r = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "context": _context(proj, source_id="asset-404")},
+    )
+    assert r.status_code == 409
+
+    # Kind mismatch: assets stage wants an image workflow
+    video_wf = _make_workflow(client, "FB Vid", SAMPLE_VIDEO_WORKFLOW)
+    r = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": video_wf, "context": _context(proj)},
+    )
+    assert r.status_code == 422
+
+    # The playground scratch project is not a valid source
+    scratch = client.get("/api/playground/project").json()
+    r = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "context": _context(proj, project_id=scratch["id"])},
+    )
+    assert r.status_code == 400
+
+
+# ── flow back ──────────────────────────────────────────────────────────
+
+
+def test_attach_workbench_links_take_to_source_row(client):
+    wf_id = _make_workflow(client, "FB Link", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+    job = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "a cat"}, "context": _context(proj)},
+    ).json()["job"]
+
+    # Not done yet → refused, nothing written.
+    early = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]})
+    assert early.status_code == 400
+
+    done = _wait_done(client, job["id"])
+
+    r = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]})
+    assert r.status_code == 200, r.text
+    body = r.json()
+    assert body["already_attached"] is False
+    assert body["project_id"] == proj["id"]
+    assert body["target_id"] == "asset-1"
+
+    # The workbench overview now shows the artifact on the source row,
+    # through the exact enrichment path in-flow generation uses.
+    overview = client.get(f"/api/workbench/projects/{proj['id']}").json()
+    assets_stage = next(s for s in overview["stages"] if s["stage_key"] == "assets")
+    row = next(a for a in assets_stage["content"]["assets"] if a["id"] == "asset-1")
+    assert row["job"]["id"] == body["attached_job_id"]
+    assert row["job"]["status"] == "done"
+    assert row["job"]["output"] == done["output_paths"][0]
+
+    # Repeated flow-back: idempotent, no duplicate row.
+    again = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]})
+    assert again.status_code == 200
+    assert again.json()["already_attached"] is True
+    assert again.json()["attached_job_id"] == body["attached_job_id"]
+
+    # The desk jobs list reports the honest 已回流 marker.
+    jobs = client.get("/api/playground/jobs").json()
+    listed = next(j for j in jobs if j["id"] == job["id"])
+    assert listed["workbench_attach"]["job_id"] == body["attached_job_id"]
+
+
+def test_attach_workbench_requires_real_context(client):
+    wf_id = _make_workflow(client, "FB NoCtx", SAMPLE_WORKFLOW)
+    job = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "solo"}},
+    ).json()["job"]
+    _wait_done(client, job["id"])
+
+    r = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]})
+    assert r.status_code == 400
+    assert "独立" in r.json()["detail"]
+
+
+def test_attach_workbench_refuses_regenerated_source(client):
+    wf_id = _make_workflow(client, "FB Stale", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+    job = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "a cat"}, "context": _context(proj)},
+    ).json()["job"]
+    _wait_done(client, job["id"])
+
+    # Stage content regenerated: the old row id is gone.
+    client.patch(
+        f"/api/workbench/projects/{proj['id']}/stages/assets",
+        json={
+            "content": {
+                "assets": [
+                    {
+                        "id": "asset-2",
+                        "kind": "prop",
+                        "name": "Blaster",
+                        "description": "",
+                        "prompt": "a blaster",
+                        "negative_prompt": "",
+                    }
+                ]
+            }
+        },
+    )
+
+    r = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]})
+    assert r.status_code == 409
+    overview = client.get(f"/api/workbench/projects/{proj['id']}").json()
+    assets_stage = next(s for s in overview["stages"] if s["stage_key"] == "assets")
+    assert all("job" not in a for a in assets_stage["content"]["assets"])
+
+
+def test_attach_workbench_allows_new_flow_job_to_take_over(client):
+    """A later in-flow generation for the same row wins the display, as
+    the enrichment keeps the newest workbench job per target."""
+    wf_id = _make_workflow(client, "FB Takeover", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+    job = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "a cat"}, "context": _context(proj)},
+    ).json()["job"]
+    _wait_done(client, job["id"])
+    link = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]}).json()
+
+    flow = client.post(
+        f"/api/workbench/projects/{proj['id']}/generate",
+        json={
+            "kind": "image",
+            "stage_key": "assets",
+            "target_id": "asset-1",
+            "prompt": "in-flow take",
+        },
+    )
+    assert flow.status_code == 200, flow.text
+
+    overview = client.get(f"/api/workbench/projects/{proj['id']}").json()
+    assets_stage = next(s for s in overview["stages"] if s["stage_key"] == "assets")
+    row = next(a for a in assets_stage["content"]["assets"] if a["id"] == "asset-1")
+    assert row["job"]["id"] != link["attached_job_id"]
+
+
+def test_delete_playground_job_removes_workbench_link(client):
+    wf_id = _make_workflow(client, "FB Del", SAMPLE_WORKFLOW)
+    proj = _seed_assets_stage(client)
+    job = client.post(
+        "/api/playground/generate",
+        json={"workflow_id": wf_id, "input_values": {"1": "a cat"}, "context": _context(proj)},
+    ).json()["job"]
+    done = _wait_done(client, job["id"])
+    link = client.post("/api/playground/attach-workbench", json={"job_id": job["id"]}).json()
+
+    dead = client.delete(f"/api/playground/jobs/{job['id']}")
+    assert dead.status_code == 200
+    assert dead.json()["removed_workbench_links"] == [link["attached_job_id"]]
+
+    # The link row is gone: the project row no longer points at deleted files.
+    overview = client.get(f"/api/workbench/projects/{proj['id']}").json()
+    assets_stage = next(s for s in overview["stages"] if s["stage_key"] == "assets")
+    row = next(a for a in assets_stage["content"]["assets"] if a["id"] == "asset-1")
+    assert "job" not in row or row["job"]["id"] != link["attached_job_id"]
+    assert not Path(done["output_paths"][0]).exists()

calliope-backend/tests/test_results.py

@@ -0,0 +1,183 @@
+"""B4 draft persistence, concurrency, scope, confirmation and migration regression."""
+
+from __future__ import annotations
+
+import asyncio
+import json
+import sqlite3
+
+from calliope.agent.deliverables import complete_task
+from calliope.agent.harness.runner import runner
+from calliope.config import settings
+from calliope.db import get_db, migrate_db
+
+TEXT = (
+    "第一场，清晨海岸，女孩将纸船推向海面，等待父亲归来。"
+    "第二场，纸船带回树叶，女孩沿着灯塔的光继续前行。"
+)
+
+
+def setup(client, stage="script"):
+    project = client.post("/api/projects", json={"title": "B4 isolated"}).json()
+    session = client.post(
+        "/api/agent/sessions",
+        json={
+            "project_id": project["id"],
+            "agent_key": stage,
+        },
+    ).json()
+    runner._persist_message(session["id"], role="assistant", content=TEXT)
+    complete_task(session["id"], TEXT)
+    draft = client.get("/api/results/deliverables", params={"session_id": session["id"]}).json()[0]
+    return project["id"], session["id"], draft
+
+
+def store(client, pid, draft, stage="script"):
+    return client.post(
+        "/api/results/store",
+        json={
+            "project_id": pid,
+            "stage_key": stage,
+            "deliverable_id": draft["id"],
+            "revision": draft["revision"],
+        },
+    )
+
+
+def test_draft_save_refresh_conflict_and_scope(client):
+    pid, sid, draft = setup(client)
+    body = {"revision": 1, "content": TEXT + "新结尾。", "project_id": pid, "stage_key": "script"}
+    saved = client.patch(f"/api/results/deliverables/{draft['id']}", json=body)
+    assert saved.status_code == 200
+    assert saved.json()["revision"] == 2
+    versions = client.get(f"/api/results/deliverables/{draft['id']}/versions").json()
+    assert len(versions) == 1 and versions[0]["content"] == TEXT
+    assert (
+        client.get("/api/results/deliverables", params={"session_id": sid}).json()[0]
+        == saved.json()
+    )
+    assert client.patch(f"/api/results/deliverables/{draft['id']}", json=body).status_code == 409
+    assert store(client, pid, draft).status_code == 409
+    other = client.post("/api/projects", json={"title": "Other"}).json()["id"]
+    assert store(client, other, saved.json()).status_code == 409
+    body.update(revision=2, project_id=other)
+    assert client.patch(f"/api/results/deliverables/{draft['id']}", json=body).status_code == 409
+    assert client.get(f"/api/agent/sessions/{sid}").json()["task_status"] == "awaiting_confirm"
+
+
+def test_store_idempotency_confirm_restore_and_preserve_snapshot(client):
+    pid, sid, draft = setup(client)
+    url = f"/api/workbench/projects/{pid}/stages/script"
+    old = {"text": TEXT + "已确认的旧版。"}
+    assert client.patch(url, json={"content": old}).status_code == 200
+    snapshot = client.post(url + "/confirm", json={}).json()["stage"]["confirmed_content"]
+    res = store(client, pid, draft)
+    assert res.status_code == 200, res.text
+    stage = res.json()["stage"]
+    assert stage["status"] == "awaiting_confirm"
+    assert stage["confirmed_content"] == snapshot
+    assert stage["content"]["text"] == TEXT
+    assert len(stage["incoming_results"]) == 1
+    assert store(client, pid, draft).json()["already_attached"] is True
+    assert len(store(client, pid, draft).json()["stage"]["incoming_results"]) == 1
+    assert client.get(f"/api/agent/sessions/{sid}").json()["task_status"] == "returned"
+    assert client.post(url + "/restore", json={}).json()["stage"]["content"] == snapshot
+    # A newer source revision is a new explicit handoff, never an automatic update.
+    draft = client.patch(
+        f"/api/results/deliverables/{draft['id']}",
+        json={
+            "revision": 1,
+            "content": TEXT + "新版本。",
+            "project_id": pid,
+            "stage_key": "script",
+        },
+    ).json()
+    assert store(client, pid, draft).status_code == 200
+    confirmed = client.post(url + "/confirm", json={}).json()["stage"]["confirmed_content"]
+    assert confirmed["text"].endswith("新版本。")
+    assert len(confirmed["incoming_results"]) == 1
+    stages = client.get(f"/api/workbench/projects/{pid}").json()["stages"]
+    assert all(s["status"] == "todo" for s in stages if s["stage_key"] != "script")
+
+
+def test_capture_idempotency_and_no_error_artifact(client):
+    _, sid, _ = setup(client)
+    complete_task(sid, TEXT)
+    assert len(client.get("/api/results/deliverables", params={"session_id": sid}).json()) == 1
+    runner._persist_message(sid, role="assistant", content="error", status="error")
+    complete_task(sid, "error")
+    assert len(client.get("/api/results/deliverables", params={"session_id": sid}).json()) == 1
+
+
+def test_sandbox_assignment_and_running_stage(client):
+    pid, _, draft = setup(client)
+    conn = get_db(settings.db_path)
+    conn.execute("UPDATE project_stages SET status='running' WHERE project_id=?", (pid,))
+    conn.commit()
+    conn.close()
+    # Stage rows are created lazily; ensure they exist first.
+    client.get(f"/api/workbench/projects/{pid}")
+    conn = get_db(settings.db_path)
+    conn.execute("UPDATE project_stages SET status='running' WHERE project_id=?", (pid,))
+    conn.commit()
+    conn.close()
+    assert store(client, pid, draft).status_code == 409
+    assert client.get("/api/results/deliverables", params={"session_id": 99999}).json() == []
+
+
+def test_media_paths_scope_and_empty_errors(client):
+    pid, _, _ = setup(client)
+    other = client.post("/api/projects", json={"title": "other"}).json()["id"]
+    path = settings.assets_dir / "b4.txt"
+    path.parent.mkdir(parents=True, exist_ok=True)
+    path.write_text("isolated")
+    conn = get_db(settings.db_path)
+    job = conn.execute(
+        "INSERT INTO jobs(project_id,kind,status,output_paths_json) VALUES (?,'image','done',?)",
+        (pid, json.dumps([str(path)])),
+    ).lastrowid
+    conn.commit()
+    conn.close()
+    body = {"job_id": job, "project_id": other, "stage_key": "assets"}
+    assert client.post("/api/results/store", json=body).status_code == 409
+    body["project_id"] = pid
+    result = client.post("/api/results/store", json=body)
+    assert result.status_code == 200, result.text
+    assert result.json()["stage"]["incoming_results"][0]["paths"] == [str(path)]
+    assert client.post("/api/results/store", json=body).json()["already_attached"]
+    assert (
+        client.post(
+            "/api/results/store", json={"project_id": pid, "stage_key": "bogus", "job_id": job}
+        ).status_code
+        == 422
+    )
+    assert (
+        client.post(
+            "/api/results/store", json={"project_id": pid, "stage_key": "assets"}
+        ).status_code
+        == 422
+    )
+    path.unlink()
+    assert client.post("/api/results/store", json=body).status_code == 404
+
+
+def test_migration_twice_and_sqlite_backup_rollback(client, tmp_path):
+    pid, sid, draft = setup(client)
+    conn = sqlite3.connect(settings.db_path)
+    backup = sqlite3.connect(tmp_path / "before-b4.db")
+    conn.backup(backup)
+    backup.close()
+    conn.close()
+    asyncio.run(migrate_db(settings.db_path))
+    asyncio.run(migrate_db(settings.db_path))
+    assert client.get("/api/results/deliverables").json()[0]["content"] == draft["content"]
+    conn = get_db(settings.db_path)
+    # Old-code SQL continues reading the original schema and rows.
+    assert (
+        conn.execute(
+            "SELECT title,status,project_id FROM agent_sessions WHERE id=?", (sid,)
+        ).fetchone()["project_id"]
+        == pid
+    )
+    assert conn.execute("PRAGMA integrity_check").fetchone()[0] == "ok"
+    conn.close()

calliope-backend/tests/test_ui_convert.py

@@ -0,0 +1,449 @@
+"""HEL-681: UI→API converter unit tests + ground-truth cross-checks.
+
+The synthetic graphs pin the structural semantics (reroute / bypass / mute /
+subgraph expansion / Set-Get variables / control_after_generate pairing);
+the corpus section runs the real 146-file library and the repo's API exports.
+"""
+
+from __future__ import annotations
+
+import copy
+import json
+from pathlib import Path
+
+import pytest
+
+from calliope.comfyui.lint import workflow_warnings
+from calliope.comfyui.ui_convert import convert_ui_workflow
+
+EXAMPLES = Path(__file__).resolve().parents[2] / "example_ComfyUI_workflows"
+
+
+def _node(nid, ntype, *, mode=0, inputs=None, outputs=None, wv=None, wvn=None, title=None):
+    node = {"id": nid, "type": ntype, "mode": mode, "inputs": inputs or [], "order": 0}
+    if outputs is not None:
+        node["outputs"] = outputs
+    if wv is not None:
+        node["widgets_values"] = wv
+    if wvn is not None:
+        node["widgets_values_named"] = wvn
+    if title:
+        node["title"] = title
+    return node
+
+
+def _in_slot(name, type_, link=None, widget=None):
+    entry = {"name": name, "type": type_, "link": link}
+    if widget:
+        entry["widget"] = {"name": widget}
+    return entry
+
+
+def _out(name, type_, links=None):
+    return {"name": name, "type": type_, "links": links or [], "slot_index": 0}
+
+
+def _base_graph():
+    """text2image: loader → prompts/latent → KSampler → VAE → SaveImage."""
+    nodes = [
+        _node(
+            1,
+            "CheckpointLoaderSimple",
+            outputs=[_out("MODEL", "MODEL"), _out("CLIP", "CLIP"), _out("VAE", "VAE")],
+            wv=["model.safetensors"],
+            inputs=[_in_slot("ckpt_name", "COMBO", widget="ckpt_name")],
+        ),
+        _node(
+            2,
+            "CLIPTextEncode",
+            inputs=[
+                _in_slot("clip", "CLIP", link=1),
+                _in_slot("text", "STRING", widget="text"),
+            ],
+            outputs=[_out("CONDITIONING", "CONDITIONING")],
+            wv=["a cat"],
+        ),
+        _node(
+            3,
+            "CLIPTextEncode",
+            inputs=[
+                _in_slot("clip", "CLIP", link=2),
+                _in_slot("text", "STRING", widget="text"),
+            ],
+            outputs=[_out("CONDITIONING", "CONDITIONING")],
+            wv=["bad quality"],
+        ),
+        _node(
+            4,
+            "EmptyLatentImage",
+            inputs=[
+                _in_slot("width", "INT", widget="width"),
+                _in_slot("height", "INT", widget="height"),
+                _in_slot("batch_size", "INT", widget="batch_size"),
+            ],
+            outputs=[_out("LATENT", "LATENT")],
+            wv=[512, 512, 1],
+        ),
+        _node(
+            5,
+            "KSampler",
+            inputs=[
+                _in_slot("model", "MODEL", link=3),
+                _in_slot("positive", "CONDITIONING", link=4),
+                _in_slot("negative", "CONDITIONING", link=5),
+                _in_slot("latent_image", "LATENT", link=6),
+                _in_slot("seed", "INT", widget="seed"),
+                _in_slot("steps", "INT", widget="steps"),
+                _in_slot("cfg", "FLOAT", widget="cfg"),
+                _in_slot("sampler_name", "COMBO", widget="sampler_name"),
+                _in_slot("scheduler", "COMBO", widget="scheduler"),
+                _in_slot("denoise", "FLOAT", widget="denoise"),
+            ],
+            outputs=[_out("LATENT", "LATENT")],
+            # seed 42 + control "fixed" rides together, then five widgets
+            wv=[42, "fixed", 20, 7, "euler", "normal", 1.0],
+        ),
+        _node(
+            6,
+            "VAEDecode",
+            inputs=[
+                _in_slot("samples", "LATENT", link=7),
+                _in_slot("vae", "VAE", link=8),
+            ],
+            outputs=[_out("IMAGE", "IMAGE")],
+        ),
+        _node(
+            7,
+            "SaveImage",
+            inputs=[
+                _in_slot("images", "IMAGE", link=9),
+                _in_slot("filename_prefix", "STRING", widget="filename_prefix"),
+            ],
+            wv=["test"],
+        ),
+    ]
+    links = [
+        [1, 1, 1, 2, 0, "CLIP"],
+        [2, 1, 1, 3, 0, "CLIP"],
+        [3, 1, 0, 5, 0, "MODEL"],
+        [4, 2, 0, 5, 1, "CONDITIONING"],
+        [5, 3, 0, 5, 2, "CONDITIONING"],
+        [6, 4, 0, 5, 3, "LATENT"],
+        [7, 5, 0, 6, 0, "LATENT"],
+        [8, 1, 2, 6, 1, "VAE"],
+        [9, 6, 0, 7, 0, "IMAGE"],
+    ]
+    return {"nodes": nodes, "links": links, "last_node_id": 7, "last_link_id": 9}
+
+
+def _convert(graph):
+    return convert_ui_workflow(graph)
+
+
+def test_clean_conversion_maps_everything():
+    result = _convert(_base_graph())
+    assert result.status == "ok"
+    assert result.needs_confirmation is False
+    wf = result.workflow
+    assert set(wf) == {"1", "2", "3", "4", "5", "6", "7"}
+    ks = wf["5"]
+    assert ks["class_type"] == "KSampler"
+    assert ks["inputs"]["seed"] == 42  # control_after_generate consumed silently
+    assert ks["inputs"]["steps"] == 20
+    assert ks["inputs"]["denoise"] == 1.0
+    assert ks["inputs"]["model"] == ["1", 0]
+    assert ks["inputs"]["latent_image"] == ["4", 0]
+    # lint on the converted graph must be error-free
+    assert not [w for w in workflow_warnings(wf) if w["level"] == "error"]
+
+
+def test_upload_button_widgets_are_consumed_but_never_emitted():
+    graph = _base_graph()
+    load = _node(
+        8,
+        "LoadImage",
+        inputs=[
+            _in_slot("image", "COMBO", widget="image"),
+            _in_slot("upload", "IMAGEUPLOAD", widget="upload"),
+        ],
+        outputs=[_out("IMAGE", "IMAGE")],
+        wv=["sample.png", "image"],
+    )
+    save = _node(
+        9,
+        "PreviewImage",
+        inputs=[
+            _in_slot("images", "IMAGE", link=20),
+            _in_slot("filename_prefix", "STRING", widget="filename_prefix"),
+        ],
+        wv=["preview"],
+    )
+    graph["nodes"] += [load, save]
+    graph["links"].append([20, 8, 0, 9, 0, "IMAGE"])
+    result = _convert(graph)
+    assert result.workflow["8"]["inputs"] == {"image": "sample.png"}
+
+
+def test_reroute_pass_through():
+    graph = _base_graph()
+    reroute = _node(8, "Reroute", inputs=[_in_slot("(in)", "*", link=9)])
+    graph["nodes"].append(reroute)
+    # SaveImage now fed by the reroute instead of VAEDecode directly
+    graph["nodes"][6]["inputs"][0]["link"] = 10
+    graph["links"].append([10, 8, 0, 7, 0, "IMAGE"])
+    result = _convert(graph)
+    assert result.workflow["7"]["inputs"]["images"] == ["6", 0]
+    assert "8" not in result.workflow
+
+
+def test_bypass_pass_through_and_mute_drop():
+    graph = _base_graph()
+    # bypass the KSampler: VAEDecode.samples must fall back to the latent
+    graph["nodes"][4]["mode"] = 4
+    result = _convert(graph)
+    assert result.workflow["6"]["inputs"]["samples"] == ["4", 0]
+    # mute the negative prompt: the link input is dropped with a warning
+    graph = _base_graph()
+    graph["nodes"][2]["mode"] = 2
+    result = _convert(graph)
+    assert "negative" not in result.workflow["5"]["inputs"]
+    assert any(i.code == "muted_input_dropped" for i in result.issues)
+
+
+def test_widget_entry_with_muted_upstream_falls_back_to_value():
+    graph = _base_graph()
+    # feed seed from a muted PrimitiveInt via a converted widget input
+    prim = _node(
+        9,
+        "PrimitiveInt",
+        mode=2,
+        inputs=[_in_slot("value", "INT", widget="value"), _in_slot("control", "COMBO", widget="control")],
+        wv=[7],
+    )
+    graph["nodes"].append(prim)
+    graph["nodes"][4]["inputs"][4]["link"] = 11  # seed ← primitive
+    graph["links"].append([11, 9, 0, 5, 4, "INT"])
+    result = _convert(graph)
+    assert result.workflow["5"]["inputs"]["seed"] == 42
+
+
+def test_subgraph_expansion_and_boundary_wiring():
+    graph = _base_graph()
+    # pack the EmptyLatentImage into a subgraph exposing width/height widgets
+    del graph["nodes"][3]
+    graph["nodes"] = [n for n in graph["nodes"] if n["id"] != 4]
+    sub_id = "aaaa-bbbb-cccc-dddd-eeee"
+    packed = _node(
+        20,
+        sub_id,
+        inputs=[
+            _in_slot("width", "INT", widget="width"),
+            _in_slot("height", "INT", widget="height"),
+        ],
+        outputs=[_out("LATENT", "LATENT")],
+        wv=[640, 384],
+    )
+    graph["nodes"].append(packed)
+    # KSampler latent_image ← packed output
+    graph["links"] = [l for l in graph["links"] if l[0] != 6]
+    graph["links"].append([6, 20, 0, 5, 3, "LATENT"])
+    graph["definitions"] = {
+        "subgraphs": [
+            {
+                "id": sub_id,
+                "name": "Latent",
+                "inputs": [
+                    {"name": "width", "type": "INT"},
+                    {"name": "height", "type": "INT"},
+                ],
+                "outputs": [{"name": "LATENT", "type": "LATENT"}],
+                "inputNode": {"id": -10},
+                "outputNode": {"id": -20},
+                "nodes": [
+                    _node(
+                        5,
+                        "EmptyLatentImage",
+                        inputs=[
+                            _in_slot("width", "INT", widget="width", link=101),
+                            _in_slot("height", "INT", widget="height", link=102),
+                            _in_slot("batch_size", "INT", widget="batch_size"),
+                        ],
+                        outputs=[_out("LATENT", "LATENT")],
+                        wv=[512, 512, 1],
+                    ),
+                ],
+                "links": [
+                    {"id": 101, "origin_id": -10, "origin_slot": 0, "target_id": 5, "target_slot": 0, "type": "INT"},
+                    {"id": 102, "origin_id": -10, "origin_slot": 1, "target_id": 5, "target_slot": 1, "type": "INT"},
+                    {"id": 103, "origin_id": 5, "origin_slot": 0, "target_id": -20, "target_slot": 0, "type": "LATENT"},
+                ],
+            }
+        ]
+    }
+    result = _convert(graph)
+    wf = result.workflow
+    assert "20:5" in wf  # qualified packed:inner id, ComfyUI's own scheme
+    inner = wf["20:5"]
+    assert inner["class_type"] == "EmptyLatentImage"
+    # exposed widget values from the packed instance, not the inner defaults
+    assert inner["inputs"]["width"] == 640
+    assert inner["inputs"]["height"] == 384
+    assert inner["inputs"]["batch_size"] == 1
+    assert wf["5"]["inputs"]["latent_image"] == ["20:5", 0]
+    # now wire the packed width slot from outside: boundary becomes a link
+    res_node = _node(
+        21,
+        "ResolutionSelector",
+        inputs=[_in_slot("aspect_ratio", "COMBO", widget="aspect_ratio")],
+        outputs=[_out("width", "INT"), _out("height", "INT")],
+        wv=["1:1"],
+    )
+    graph["nodes"].append(res_node)
+    graph["nodes"][-2]["inputs"][0]["link"] = 12  # packed width ← selector
+    graph["links"].append([12, 21, 0, 20, 0, "INT"])
+    wf2 = _convert(graph).workflow
+    assert wf2["20:5"]["inputs"]["width"] == ["21", 0]
+    assert wf2["20:5"]["inputs"]["height"] == 384
+
+
+def test_set_get_variables_resolve_to_captured_source():
+    graph = _base_graph()
+    setter = _node(8, "SetNode", inputs=[_in_slot("*", "*", link=8)], wv=["the_vae"])
+    getter = _node(9, "GetNode", wv=["the_vae"], outputs=[_out("VAE", "VAE")])
+    graph["nodes"] += [setter, getter]
+    # VAEDecode.vae now fed via the variable
+    graph["nodes"][5]["inputs"][1]["link"] = 13
+    graph["links"] = [l for l in graph["links"] if l[0] != 8]
+    graph["links"] += [
+        [8, 1, 2, 8, 0, "VAE"],
+        [13, 9, 0, 6, 1, "VAE"],
+    ]
+    result = _convert(graph)
+    assert "8" not in result.workflow and "9" not in result.workflow
+    assert result.workflow["6"]["inputs"]["vae"] == ["1", 2]
+
+
+def test_unknown_widget_order_lands_in_needs_confirmation():
+    graph = _base_graph()
+    # an old-frontend node: positional widgets, no widget markers, no registry
+    graph["nodes"].append(
+        _node(10, "MysteryCustomNode", inputs=[], outputs=[_out("IMAGE", "IMAGE")], wv=[1, 2, 3])
+    )
+    save = _node(
+        11,
+        "PreviewImage",
+        inputs=[_in_slot("images", "IMAGE", link=30)],
+        wv=["preview"],
+    )
+    graph["nodes"].append(save)
+    graph["links"].append([30, 10, 0, 11, 0, "IMAGE"])
+    result = _convert(graph)
+    assert result.needs_confirmation is True
+    assert any(i.code == "widget_unmapped" for i in result.issues)
+    # the node is still converted structurally — the report carries the doubt
+    assert "10" in result.workflow
+
+
+def test_not_ui_format_fails_fast():
+    result = convert_ui_workflow({"3": {"class_type": "SaveImage", "inputs": {}}})
+    assert result.status == "fail"
+    assert result.workflow is None
+
+
+# ---------------------------------------------------------------------------
+# Real corpus: the 146 UI files + ground-truth API cross-checks (对拍).
+# ---------------------------------------------------------------------------
+
+pytestmark_convert = pytest.mark.skipif(
+    not EXAMPLES.is_dir(), reason="example_ComfyUI_workflows not checked out"
+)
+
+
+@pytest.mark.skipif(not EXAMPLES.is_dir(), reason="example library missing")
+def test_corpus_146_files_all_convert():
+    ui_files = [
+        p
+        for p in sorted(EXAMPLES.rglob("*.json"))
+        if isinstance(json.loads(p.read_text(encoding="utf-8")), dict)
+        and isinstance(json.loads(p.read_text(encoding="utf-8")).get("nodes"), list)
+    ]
+    assert len(ui_files) == 146
+    statuses = {"ok": 0, "warn": 0, "fail": 0}
+    needs_confirmation = 0
+    for path in ui_files:
+        data = json.loads(path.read_text(encoding="utf-8"))
+        result = convert_ui_workflow(data)
+        statuses[result.status] += 1
+        needs_confirmation += result.needs_confirmation
+        assert result.workflow, f"{path.name} produced no workflow"
+        # structural sanity: no dangling links in any conversion
+        nodes = result.workflow
+        for nid, node in nodes.items():
+            for name, val in node.get("inputs", {}).items():
+                if isinstance(val, list):
+                    assert str(val[0]) in nodes, f"{path.name}: {nid}.{name} dangles"
+    assert statuses["fail"] == 0
+    assert statuses["ok"] + statuses["warn"] == 146
+    # files whose widget order cannot be trusted are flagged, never hidden
+    assert 0 < needs_confirmation < 10
+
+
+@pytest.mark.skipif(not EXAMPLES.is_dir(), reason="example library missing")
+def test_cross_check_against_ground_truth_exports():
+    """The H3 t2v UI export converts to the same node classes the author's
+    own API export carries; shared classes agree on scalar input names."""
+    ui = json.loads(
+        (EXAMPLES / "4-视频生成/Minimax-h3/minimax_h3_t2v_文生视频.json").read_text(encoding="utf-8")
+    )
+    api = json.loads(
+        (EXAMPLES / "minimax_h3-Turbo_Text2Video_20260813_API.json").read_text(encoding="utf-8")
+    )
+    result = convert_ui_workflow(ui)
+    assert result.status in ("ok", "warn")
+    converted = result.workflow
+    api_classes = {n["class_type"] for n in api.values()}
+    # Every scalar name the conversion emits for a shared class must be an
+    # input name the author's own export knows — wiring may differ between
+    # versions (a muted branch falls back to its widget value), but the NAME
+    # mapping must never invent or swap inputs.
+    for cls in api_classes & {n["class_type"] for n in converted.values()}:
+        api_names = {
+            key
+            for n in api.values()
+            if n["class_type"] == cls
+            for key in n.get("inputs", {})
+        }
+        conv_names = {
+            key
+            for n in converted.values()
+            if n["class_type"] == cls
+            for key, v in n.get("inputs", {}).items()
+            if not isinstance(v, list)
+        }
+        assert conv_names <= api_names, f"class {cls} invents inputs: {conv_names - api_names}"
+
+
+@pytest.mark.skipif(not EXAMPLES.is_dir(), reason="example library missing")
+def test_packed_krea2_conversion_shape_matches_export_scheme():
+    """The krea2 turbo file (packed subgraph) converts ok, expands inner nodes
+    under `<packed>:<inner>` ids and maps the sampler widgets exactly — the
+    same scheme the author's own Krea2 API export uses (ids like "171:153")."""
+    ui = json.loads(
+        (EXAMPLES / "3-图像生成/krea2/krea2_turbo_文生图.json").read_text(encoding="utf-8")
+    )
+    api = json.loads(
+        (EXAMPLES / "Krea2_t2i_20260818_API.json").read_text(encoding="utf-8")
+    )
+    result = convert_ui_workflow(ui)
+    assert result.status == "ok"
+    assert any(":" in nid for nid in result.workflow)  # expanded subgraph nodes
+    assert any("171:" in nid for nid in api)  # ground truth uses the same scheme
+    ks = [
+        n
+        for n in result.workflow.values()
+        if n["class_type"] == "KSampler" and not isinstance(n["inputs"].get("seed"), list)
+    ]
+    assert ks, "inner KSampler with widget-mapped seed expected"
+    assert {"seed", "steps", "cfg", "sampler_name", "scheduler", "denoise"} <= set(
+        ks[0]["inputs"]
+    )

calliope-backend/tests/test_usage_classifier.py

@@ -82,13 +82,16 @@ def test_a2_qwen_edit_variant_with_new_ids_titles_and_model_stays_image2image():
     assert len(mask) == 1  # mask never counts as an input image
 
 
-def test_a3_i2v_variant_renamed_still_image2video_first_frame_only():
+def test_a3_i2v_variant_renamed_still_image2video_with_optional_last_frame():
     wf = _rename_everything(_load(FIXTURES / "h3_i2v_04_API.json"))
     c = classify_usage(wf)
     assert c["usage"] == "image2video"
     media = _media(parse_dynamic_inputs(wf))
-    assert [i.get("role") for i in media] == ["first_frame"]
-    # A3: no first/last pair → the pair validation must not fire
+    # HEL-671: the FL2VA node's unwired last_frame is offered, but optional
+    assert [(i.get("role"), i["required"]) for i in media] == [
+        ("first_frame", True),
+        ("last_frame", False),
+    ]
     assert blocking_problem(wf) is None
 
 

calliope-backend/tests/test_workbench.py

@@ -197,6 +197,39 @@ def _confirm(client, pid: int, key: str, **extra):
     return client.post(f"/api/workbench/projects/{pid}/stages/{key}/confirm", json=extra or None)
 
 
+def test_assistant_notes_keep_confirmation_and_survive_artifact_edits(client):
+    pid = _make_project(client)
+    note_url = f"/api/workbench/projects/{pid}/stages/style/note"
+    r = client.patch(note_url, json={"text": "建议先比较冷暖两个方向。"})
+    assert r.status_code == 200
+    assert r.json()["stage"]["status"] == "todo"
+    assert r.json()["stage"]["assistant_note"] == "建议先比较冷暖两个方向。"
+    assert _confirm(client, pid, "style").status_code == 400
+    # An ordinary structured save must keep the separate advice.
+    r = client.patch(f"/api/workbench/projects/{pid}/stages/style", json={"content": json.loads(STYLE_REPLY)})
+    assert r.status_code == 200
+    assert r.json()["stage"]["assistant_note"] == "建议先比较冷暖两个方向。"
+    # Notes on confirmed content don't change its status or confirmed snapshot.
+    client.post(f"/api/workbench/projects/{pid}/stages/script/import", json={"text": SCRIPT_TEXT})
+    before = _stage(_overview(client, pid), "script")
+    r = client.patch(f"/api/workbench/projects/{pid}/stages/script/note", json={"text": "下一版建议加强人物动机。"})
+    assert r.status_code == 200
+    after = r.json()["stage"]
+    assert after["status"] == before["status"] == "confirmed"
+    assert after["confirmed_content"] == before["confirmed_content"]
+    assert after["draft_edited"] == before["draft_edited"]
+    assert _confirm(client, pid, "script").status_code == 200
+    confirmed = _stage(_overview(client, pid), "script")
+    assert "assistant_note" not in confirmed["confirmed_content"]
+    client.patch(f"/api/workbench/projects/{pid}/stages/script/note", json={"text": "保留确认后的新建议。"})
+    restored = client.post(f"/api/workbench/projects/{pid}/stages/script/restore").json()["stage"]
+    assert restored["assistant_note"] == "保留确认后的新建议。"
+    assert restored["confirmed_content"] == confirmed["confirmed_content"]
+    assert client.patch(note_url, json={"text": ""}).json()["stage"]["assistant_note"] == ""
+    assert client.patch(note_url, json={"text": "x" * 200_001}).status_code == 422
+    assert client.patch(f"/api/workbench/projects/{pid}/stages/unknown/note", json={"text": "x"}).status_code == 404
+
+
 # ─────────────────────────────────────────────────────────────────────────
 
 

calliope-backend/tests/test_workflow_import_batch.py

@@ -0,0 +1,421 @@
+"""HEL-681 (S2): batch import endpoints, meta list view, migration safety.
+
+Everything runs on a temp DB via the shared client fixture — the real
+146-file library is never touched, matching the card's「不导入生产数据」boundary.
+"""
+
+from __future__ import annotations
+
+import json
+import sqlite3
+from pathlib import Path
+
+from calliope.db import migrate_db
+
+import pytest
+
+
+EXAMPLES = Path(__file__).resolve().parents[2] / "example_ComfyUI_workflows"
+
+
+def _ui_graph():
+    """Minimal clean t2i UI graph (same shape as test_ui_convert's)."""
+    return {
+        "nodes": [
+            {
+                "id": 1,
+                "type": "CheckpointLoaderSimple",
+                "mode": 0,
+                "inputs": [{"name": "ckpt_name", "type": "COMBO", "widget": {"name": "ckpt_name"}, "link": None}],
+                "outputs": [
+                    {"name": "MODEL", "type": "MODEL", "links": [3], "slot_index": 0},
+                    {"name": "CLIP", "type": "CLIP", "links": [1, 2], "slot_index": 1},
+                    {"name": "VAE", "type": "VAE", "links": [8], "slot_index": 2},
+                ],
+                "widgets_values": ["qwen_image_2.safetensors"],
+            },
+            {
+                "id": 2,
+                "type": "CLIPTextEncode",
+                "mode": 0,
+                "inputs": [
+                    {"name": "clip", "type": "CLIP", "link": 1},
+                    {"name": "text", "type": "STRING", "widget": {"name": "text"}, "link": None},
+                ],
+                "outputs": [{"name": "CONDITIONING", "type": "CONDITIONING", "links": [4], "slot_index": 0}],
+                "widgets_values": ["a cat"],
+            },
+            {
+                "id": 3,
+                "type": "CLIPTextEncode",
+                "mode": 0,
+                "inputs": [
+                    {"name": "clip", "type": "CLIP", "link": 2},
+                    {"name": "text", "type": "STRING", "widget": {"name": "text"}, "link": None},
+                ],
+                "outputs": [{"name": "CONDITIONING", "type": "CONDITIONING", "links": [5], "slot_index": 0}],
+                "widgets_values": ["bad"],
+            },
+            {
+                "id": 4,
+                "type": "EmptyLatentImage",
+                "mode": 0,
+                "inputs": [
+                    {"name": "width", "type": "INT", "widget": {"name": "width"}, "link": None},
+                    {"name": "height", "type": "INT", "widget": {"name": "height"}, "link": None},
+                    {"name": "batch_size", "type": "INT", "widget": {"name": "batch_size"}, "link": None},
+                ],
+                "outputs": [{"name": "LATENT", "type": "LATENT", "links": [6], "slot_index": 0}],
+                "widgets_values": [512, 512, 1],
+            },
+            {
+                "id": 5,
+                "type": "KSampler",
+                "mode": 0,
+                "inputs": [
+                    {"name": "model", "type": "MODEL", "link": 3},
+                    {"name": "positive", "type": "CONDITIONING", "link": 4},
+                    {"name": "negative", "type": "CONDITIONING", "link": 5},
+                    {"name": "latent_image", "type": "LATENT", "link": 6},
+                    {"name": "seed", "type": "INT", "widget": {"name": "seed"}, "link": None},
+                    {"name": "steps", "type": "INT", "widget": {"name": "steps"}, "link": None},
+                    {"name": "cfg", "type": "FLOAT", "widget": {"name": "cfg"}, "link": None},
+                    {"name": "sampler_name", "type": "COMBO", "widget": {"name": "sampler_name"}, "link": None},
+                    {"name": "scheduler", "type": "COMBO", "widget": {"name": "scheduler"}, "link": None},
+                    {"name": "denoise", "type": "FLOAT", "widget": {"name": "denoise"}, "link": None},
+                ],
+                "outputs": [{"name": "LATENT", "type": "LATENT", "links": [7], "slot_index": 0}],
+                "widgets_values": [42, "fixed", 20, 7, "euler", "normal", 1.0],
+            },
+            {
+                "id": 6,
+                "type": "VAEDecode",
+                "mode": 0,
+                "inputs": [
+                    {"name": "samples", "type": "LATENT", "link": 7},
+                    {"name": "vae", "type": "VAE", "link": 8},
+                ],
+                "outputs": [{"name": "IMAGE", "type": "IMAGE", "links": [9], "slot_index": 0}],
+            },
+            {
+                "id": 7,
+                "type": "SaveImage",
+                "mode": 0,
+                "inputs": [
+                    {"name": "images", "type": "IMAGE", "link": 9},
+                    {"name": "filename_prefix", "type": "STRING", "widget": {"name": "filename_prefix"}, "link": None},
+                ],
+                "widgets_values": ["test"],
+            },
+        ],
+        "links": [
+            [1, 1, 1, 2, 0, "CLIP"],
+            [2, 1, 1, 3, 0, "CLIP"],
+            [3, 1, 0, 5, 0, "MODEL"],
+            [4, 2, 0, 5, 1, "CONDITIONING"],
+            [5, 3, 0, 5, 2, "CONDITIONING"],
+            [6, 4, 0, 5, 3, "LATENT"],
+            [7, 5, 0, 6, 0, "LATENT"],
+            [8, 1, 2, 6, 1, "VAE"],
+            [9, 6, 0, 7, 0, "IMAGE"],
+        ],
+    }
+
+
+def _api_workflow():
+    return json.loads(
+        (EXAMPLES / "video_minimax_h3_r2v_2ref_API.json").read_text(encoding="utf-8")
+    )
+
+
+def test_convert_dry_run_reports_and_stores_nothing(client):
+    payload = {
+        "files": [
+            {
+                "source_path": "3-图像生成/Qwen-Image-2.1/test_t2i.json",
+                "workflow_json": _ui_graph(),
+            }
+        ],
+        "include_workflows": True,
+    }
+    resp = client.post("/api/workflows/convert", json=payload)
+    assert resp.status_code == 200
+    body = resp.json()
+    assert body["total"] == 1 and body["ok"] == 1 and body["importable"] == 1
+    entry = body["files"][0]
+    assert entry["name"] == "test_t2i"
+    assert entry["workflow_json"]["5"]["inputs"]["seed"] == 42
+    assert entry["suggested"]["usage"] == "text2image"
+    assert entry["suggested"]["category"] == "image"
+    assert entry["suggested"]["model_family"] == "Qwen"
+    assert entry["suggested"]["media_out"] == ["image"]
+    # dry-run must not write anything
+    assert client.get("/api/workflows").json() == []
+
+
+def test_convert_needs_confirmation_is_flagged_not_runnable(client):
+    graph = _ui_graph()
+    graph["nodes"].append(
+        {
+            "id": 10,
+            "type": "MysteryCustomNode",
+            "mode": 0,
+            "inputs": [],
+            "outputs": [{"name": "IMAGE", "type": "IMAGE", "links": [30], "slot_index": 0}],
+            "widgets_values": [1, 2, 3],
+        }
+    )
+    graph["nodes"].append(
+        {
+            "id": 11,
+            "type": "PreviewImage",
+            "mode": 0,
+            "inputs": [{"name": "images", "type": "IMAGE", "link": 30}],
+            "widgets_values": ["p"],
+        }
+    )
+    graph["links"].append([30, 10, 0, 11, 0, "IMAGE"])
+    resp = client.post(
+        "/api/workflows/convert",
+        json={"files": [{"source_path": "x/mystery.json", "workflow_json": graph}]},
+    )
+    body = resp.json()
+    assert body["needs_confirmation"] == 1
+    assert body["importable"] == 0
+    assert "需人工确认" in body["files"][0]["skip_reason"]
+
+
+def test_import_batch_then_rerun_is_idempotent(client):
+    files = [
+        {
+            "source_path": "3-图像生成/Qwen-Image-2.1/test_t2i.json",
+            "workflow_json": _ui_graph(),
+        }
+    ]
+    first = client.post("/api/workflows/import-batch", json={"files": files})
+    assert first.status_code == 200
+    body = first.json()
+    assert body["imported"] == 1 and body["skipped"] == 0
+    row_id = body["imported_ids"][0]
+
+    # second run with identical file: conflict skip, no duplicates
+    second = client.post("/api/workflows/import-batch", json={"files": files})
+    body2 = second.json()
+    assert body2["imported"] == 0 and body2["skipped"] == 1
+    assert body2["skipped_files"][0]["reason"] == "conflict"
+    listing = client.get("/api/workflows").json()
+    assert len(listing) == 1
+
+    detail = client.get(f"/api/workflows/{row_id}").json()
+    assert detail["usage"] == "text2image"
+    assert detail["is_enabled"] is True
+    assert detail["category"] == "image"
+    assert detail["model_family"] == "Qwen"
+    assert detail["media_io"] == {"in": [], "out": ["image"]}
+    assert detail["source"] == "ui_convert"
+    assert detail["source_path"] == "3-图像生成/Qwen-Image-2.1/test_t2i.json"
+
+
+def test_import_batch_skips_needs_confirmation_files(client):
+    graph = _ui_graph()
+    graph["nodes"].append(
+        {
+            "id": 10,
+            "type": "MysteryCustomNode",
+            "mode": 0,
+            "inputs": [],
+            "outputs": [{"name": "IMAGE", "type": "IMAGE", "links": [30], "slot_index": 0}],
+            "widgets_values": [1, 2, 3],
+        }
+    )
+    graph["nodes"].append(
+        {
+            "id": 11,
+            "type": "PreviewImage",
+            "mode": 0,
+            "inputs": [{"name": "images", "type": "IMAGE", "link": 30}],
+            "widgets_values": ["p"],
+        }
+    )
+    graph["links"].append([30, 10, 0, 11, 0, "IMAGE"])
+    resp = client.post(
+        "/api/workflows/import-batch",
+        json={"files": [{"name": "mystery", "workflow_json": graph}]},
+    )
+    body = resp.json()
+    assert body["imported"] == 0
+    assert "需人工确认" in body["skipped_files"][0]["reason"]
+    assert client.get("/api/workflows").json() == []
+
+
+def test_warn_sample_imports_with_human_confirmation(client):
+    """A warn file (muted branch → input dropped) still imports when the
+    wizard supplies the settled usage — the manual-correction path."""
+    graph = _ui_graph()
+    graph["nodes"][2]["mode"] = 2  # mute the negative prompt branch
+    dry = client.post(
+        "/api/workflows/convert",
+        json={"files": [{"name": "warned", "workflow_json": graph}]},
+    ).json()
+    assert dry["warn"] == 1 and dry["importable"] == 1
+    resp = client.post(
+        "/api/workflows/import-batch",
+        json={"files": [{"name": "warned", "workflow_json": graph, "usage": "text2image"}]},
+    )
+    body = resp.json()
+    assert body["imported"] == 1
+    detail = client.get(f"/api/workflows/{body['imported_ids'][0]}").json()
+    assert detail["is_enabled"] is True
+    assert "negative" not in detail["workflow_json"]["5"]["inputs"]
+
+
+@pytest.mark.skipif(not EXAMPLES.is_dir(), reason="example library missing")
+def test_import_scan_dry_run_over_repo_library(client):
+    resp = client.post(
+        "/api/workflows/import-scan",
+        json={"root": str(EXAMPLES), "dry_run": True},
+    )
+    assert resp.status_code == 200
+    body = resp.json()
+    assert body["total"] == 146
+    assert body["fail"] == 0
+    assert body["ok"] + body["warn"] == 146
+    assert body["needs_confirmation"] > 0  # the 3 uncensored files stay honest
+    assert body["importable"] < body["total"]
+    # a dry scan must leave the DB untouched
+    assert client.get("/api/workflows").json() == []
+
+
+def test_import_scan_commit_from_tmp_directory(client, tmp_path):
+    (tmp_path / "sub").mkdir()
+    (tmp_path / "sub" / "demo.json").write_text(json.dumps(_ui_graph()), encoding="utf-8")
+    (tmp_path / "plain_api.json").write_text(json.dumps(_api_workflow()), encoding="utf-8")
+    (tmp_path / "not_a_workflow.json").write_text(json.dumps({"hello": 1}), encoding="utf-8")
+    resp = client.post(
+        "/api/workflows/import-scan",
+        json={"root": str(tmp_path), "dry_run": False},
+    )
+    body = resp.json()
+    # only the one UI file went through this pipeline; API-format and junk skipped
+    assert body["imported"] == 1
+    listing = client.get("/api/workflows").json()
+    assert len(listing) == 1
+    assert listing[0]["source_path"] == "sub/demo.json"
+    # rerun: idempotent
+    again = client.post(
+        "/api/workflows/import-scan",
+        json={"root": str(tmp_path), "dry_run": False},
+    ).json()
+    assert again["imported"] == 0
+    assert len(client.get("/api/workflows").json()) == 1
+
+
+def test_meta_view_has_metadata_but_no_full_json(client):
+    client.post(
+        "/api/workflows/import-batch",
+        json={
+            "files": [
+                {
+                    "source_path": "3-图像生成/Qwen-Image-2.1/test_t2i.json",
+                    "workflow_json": _ui_graph(),
+                    "tags": ["极速"],
+                }
+            ]
+        },
+    )
+    meta = client.get("/api/workflows", params={"view": "meta"}).json()
+    assert len(meta) == 1
+    row = meta[0]
+    assert "workflow_json" not in row
+    assert "input_schema" not in row
+    assert "output_schema" not in row
+    assert row["category"] == "image"
+    assert row["model_family"] == "Qwen"
+    assert row["media_io"] == {"in": [], "out": ["image"]}
+    assert row["tags"] == ["极速"]
+    assert row["favorite"] is False
+    assert row["needs_mapping"] is False
+
+
+def test_legacy_list_shape_and_old_records_unchanged(client):
+    """Old imports (API format via POST /api/workflows) keep working; the
+    legacy list still carries workflow_json and the new columns default."""
+    created = client.post(
+        "/api/workflows",
+        json={"name": "旧导入", "workflow_json": _api_workflow()},
+    )
+    assert created.status_code == 200
+    legacy = client.get("/api/workflows").json()
+    assert len(legacy) == 1
+    row = legacy[0]
+    assert isinstance(row["workflow_json"], dict)
+    assert "usage" in row and "output_map" in row
+    assert row["favorite"] is False
+    assert row["tags"] == []
+    assert row["media_io"] == {"in": [], "out": []}
+    meta = client.get("/api/workflows", params={"view": "meta"}).json()
+    assert meta[0]["needs_mapping"] is False or meta[0]["needs_mapping"] is True
+    assert meta[0]["source"] is None
+
+
+def test_favorite_tags_patch_and_touch(client):
+    wid = client.post(
+        "/api/workflows/import-batch",
+        json={"files": [{"name": "fav", "workflow_json": _ui_graph()}]},
+    ).json()["imported_ids"][0]
+    resp = client.patch(f"/api/workflows/{wid}", json={"favorite": True, "tags": ["高质量"]})
+    assert resp.status_code == 200
+    assert resp.json()["favorite"] is True
+    assert resp.json()["tags"] == ["高质量"]
+    touch = client.post(f"/api/workflows/{wid}/touch")
+    assert touch.status_code == 200
+    meta = client.get("/api/workflows", params={"view": "meta"}).json()
+    assert meta[0]["last_used_at"] is not None
+    assert meta[0]["favorite"] is True
+
+
+def test_migration_adds_columns_on_old_database(tmp_path):
+    """A pre-S2 database (workflows table without the metadata columns)
+    migrates in place; existing rows survive with defaults."""
+    db_path = tmp_path / "old.db"
+    conn = sqlite3.connect(db_path)
+    conn.executescript(
+        """
+        CREATE TABLE workflows (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            name TEXT NOT NULL,
+            kind TEXT NOT NULL CHECK(kind IN ('image', 'video')),
+            workflow_json TEXT NOT NULL,
+            description TEXT,
+            prompt_profile TEXT NOT NULL DEFAULT 'prose',
+            is_enabled INTEGER NOT NULL DEFAULT 1,
+            usage TEXT,
+            usage_source TEXT,
+            output_map TEXT,
+            output_map_source TEXT
+        );
+        INSERT INTO workflows (name, kind, workflow_json)
+            VALUES ('legacy', 'video', '{"1": {"class_type": "SaveImage", "inputs": {}}}');
+        """
+    )
+    conn.commit()
+    conn.close()
+
+    import asyncio
+
+    asyncio.run(migrate_db(db_path))
+    conn = sqlite3.connect(db_path)
+    cols = {r[1] for r in conn.execute("PRAGMA table_info(workflows)").fetchall()}
+    assert {
+        "category",
+        "model_family",
+        "media_io",
+        "tags",
+        "favorite",
+        "last_used_at",
+        "source",
+        "source_path",
+    } <= cols
+    row = conn.execute("SELECT name, favorite, tags, category FROM workflows").fetchone()
+    assert row == ("legacy", 0, None, None)
+    conn.close()

calliope-web/eslint.config.js

@@ -0,0 +1,49 @@
+import js from "@eslint/js";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import svelte from "eslint-plugin-svelte";
+
+export default [
+  // SvelteKit sync and adapter-static output; these are not source files.
+  { ignores: [".svelte-kit/**", "build/**"] },
+  js.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  // v3 removed these from recommended; retain the previous checks explicitly.
+  {
+    rules: {
+      "svelte/valid-compile": "error",
+      "svelte/no-dynamic-slot-name": "error",
+    },
+  },
+  {
+    files: ["**/*.{ts,svelte}"],
+    plugins: { "@typescript-eslint": tsPlugin },
+    rules: {
+      ...tsPlugin.configs["eslint-recommended"].overrides[0].rules,
+      ...tsPlugin.configs.recommended.rules,
+    },
+  },
+  {
+    files: ["**/*.ts"],
+    ignores: ["**/*.svelte.ts"],
+    languageOptions: { parser: tsParser },
+  },
+  {
+    files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+    languageOptions: { parserOptions: { parser: tsParser } },
+    rules: {
+      "prefer-const": "off",
+      "svelte/prefer-const": "error",
+    },
+  },
+  {
+    files: ["src/**/*.{js,ts,svelte}"],
+    ignores: ["src/hooks.server.ts"],
+    languageOptions: { globals: globals.browser },
+  },
+  {
+    files: ["*.{js,ts}", "scripts/**/*.mjs", "src/hooks.server.ts"],
+    languageOptions: { globals: globals.node },
+  },
+];

calliope-web/package.json

@@ -1,39 +1,41 @@
 {
-	"name": "calliope-web",
-	"version": "1.5.8",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"test": "node scripts/check-storage-ssr.mjs && node scripts/check-random-uuid.mjs && node scripts/check-skill-frontmatter.mjs",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.70.3",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@types/node": "^22.13.0",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^9.20.0",
-		"eslint-plugin-svelte": "^2.46.0",
-		"postcss": "^8.5.0",
-		"prettier": "^3.5.0",
-		"prettier-plugin-svelte": "^3.3.0",
-		"svelte": "^5.20.0",
-		"svelte-check": "^4.1.0",
-		"tailwindcss": "^3.4.17",
-		"typescript": "^5.7.0",
-		"vite": "^6.1.0"
-	},
-	"dependencies": {
-		"@tanstack/svelte-query": "^5.66.0",
-		"@types/three": "0.185.0",
-		"@xyflow/svelte": "^1.6.5",
-		"mannequin-js": "5.2.3",
-		"three": "0.185.1"
-	},
-	"type": "module"
+  "name": "calliope-web",
+  "version": "1.5.8",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "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",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.70.3",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@types/node": "^22.13.0",
+    "@typescript-eslint/eslint-plugin": "8.46.2",
+    "@typescript-eslint/parser": "8.46.2",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.20.0",
+    "eslint-plugin-svelte": "3.23.1",
+    "postcss": "^8.5.0",
+    "prettier": "^3.5.0",
+    "prettier-plugin-svelte": "^3.3.0",
+    "svelte": "^5.20.0",
+    "svelte-check": "^4.1.0",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.0",
+    "vite": "^6.1.0"
+  },
+  "dependencies": {
+    "@tanstack/svelte-query": "^5.66.0",
+    "@types/three": "0.185.0",
+    "@xyflow/svelte": "^1.6.5",
+    "mannequin-js": "5.2.3",
+    "three": "0.185.1"
+  },
+  "type": "module"
 }

calliope-web/scripts/check-export-frame.mjs

@@ -0,0 +1,156 @@
+#!/usr/bin/env node
+/**
+ * Pure-logic checks for 导出尾帧 (lib/media/exportFrame.ts): which media
+ * times get tried near the end, how the PNG is named, and when a sampled
+ * frame counts as black / empty. The decode + download path itself runs in
+ * a real browser (e2e/lastframe.mjs).
+ *
+ * Run with `npm test` (or `node scripts/check-export-frame.mjs`).
+ */
+import { dirname, join } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const MODULE = join(HERE, "..", "src", "lib", "media", "exportFrame.ts");
+
+const {
+  tailSeekTimes,
+  videoBaseName,
+  frameFileName,
+  blankKind,
+  statusErrorCode,
+  TAIL_OFFSETS,
+} = await import(pathToFileURL(MODULE).href);
+
+let failures = 0;
+function check(name, cond, extra = "") {
+  if (cond) console.log(`ok    ${name}`);
+  else {
+    failures += 1;
+    console.error(`FAIL  ${name}${extra ? `  — ${extra}` : ""}`);
+  }
+}
+
+// ---- seek targets -------------------------------------------------------
+
+const t6 = tailSeekTimes(6.04);
+check(
+  "first try is ~1 frame before the end, never the end itself",
+  t6[0] < 6.04 && 6.04 - t6[0] <= 0.05 + 1e-9,
+  JSON.stringify(t6),
+);
+check(
+  "later tries step strictly further back",
+  t6.every((t, i) => i === 0 || t < t6[i - 1]),
+  JSON.stringify(t6),
+);
+check(
+  "tries stay within ~1s of the end",
+  t6.length === TAIL_OFFSETS.length && 6.04 - t6[t6.length - 1] <= 1 + 1e-9,
+);
+check(
+  "short clip clamps to 0 without duplicates",
+  JSON.stringify(tailSeekTimes(0.1)) === "[0.05,0]",
+);
+check(
+  "unknown / zero duration falls back to t=0",
+  JSON.stringify(tailSeekTimes(NaN)) === "[0]" &&
+    JSON.stringify(tailSeekTimes(0)) === "[0]",
+);
+
+// ---- file names ---------------------------------------------------------
+
+const api =
+  "/api/file?path=" +
+  encodeURIComponent(
+    "/opt/aigc-home/data/assets/1/video/05_ref2va_4step_sla_00035_.mp4",
+  );
+check(
+  "base name from /api/file?path=…",
+  videoBaseName(api) === "05_ref2va_4step_sla_00035_",
+);
+check(
+  "base name from a Windows path",
+  videoBaseName(
+    "/api/file?path=" +
+      encodeURIComponent("D:\\calliope\\assets\\镜头 01.webm"),
+  ) === "镜头 01",
+);
+check(
+  "base name from a plain URL",
+  videoBaseName("http://x.test/media/clip-9.mov?x=1") === "clip-9",
+);
+check(
+  "unsafe characters are replaced",
+  !/[:*?"<>|]/.test(
+    videoBaseName("/api/file?path=" + encodeURIComponent('a:b*c?"d<e>f|g.mp4')),
+  ),
+);
+check(
+  "blob URL without a name falls back to 'video'",
+  videoBaseName("blob:http://x.test/") === "video",
+);
+const fname = frameFileName(api, 5.958, "尾帧");
+check(
+  "PNG name names the video, the tag and the frame time",
+  fname === "05_ref2va_4step_sla_00035__尾帧_5.958s.png",
+  fname,
+);
+check(
+  "spaces in the tag become dashes",
+  frameFileName(api, 1, "last frame").includes("_last-frame_1.000s.png"),
+);
+
+// ---- black / empty detection -------------------------------------------
+
+function frame(n, rgba) {
+  const out = new Uint8ClampedArray(n * 4);
+  for (let i = 0; i < n; i++) out.set(rgba(i), i * 4);
+  return out;
+}
+const N = 64 * 64;
+check(
+  "fully transparent sample → empty",
+  blankKind(frame(N, () => [0, 0, 0, 0])) === "empty",
+);
+check(
+  "pure black → black",
+  blankKind(frame(N, () => [0, 0, 0, 255])) === "black",
+);
+check(
+  "near-black encoder noise (16..18) → black",
+  blankKind(frame(N, (i) => [16 + (i % 3), 16, 16, 255])) === "black",
+);
+check(
+  "mid-grey picture → not blank",
+  blankKind(frame(N, () => [128, 128, 128, 255])) === null,
+);
+check(
+  "dim but visible picture (≈50) → not blank",
+  blankKind(frame(N, () => [50, 48, 52, 255])) === null,
+);
+check(
+  "dark night scene with a bright highlight → not blank",
+  blankKind(
+    frame(N, (i) => (i === 100 ? [250, 240, 200, 255] : [4, 4, 6, 255])),
+  ) === null,
+);
+
+// ---- HTTP status classification ----------------------------------------
+
+check("404 → not-found", statusErrorCode(404) === "not-found");
+check(
+  "403 → forbidden",
+  statusErrorCode(403) === "forbidden" && statusErrorCode(401) === "forbidden",
+);
+check("500 → network", statusErrorCode(500) === "network");
+check(
+  "206 / 200 are not errors",
+  statusErrorCode(206) === null && statusErrorCode(200) === null,
+);
+
+if (failures) {
+  console.error(`\n${failures} export-frame check(s) failed.`);
+  process.exit(1);
+}
+console.log("export-frame checks passed.");

calliope-web/scripts/check-skill-frontmatter.mjs

@@ -98,9 +98,9 @@ check(
   JSON.stringify(stripSkillFrontmatter(plain)),
 );
 
-// 5. Static: the page uses the shared helper; no `\A` regex remains.
+// 5. Static: the extracted skill editor uses the shared helper; no `\A` regex remains.
 const page = readFileSync(
-  join(ROOT, "src/routes/agents/+page.svelte"),
+  join(ROOT, "src/lib/components/agent/LegacyAgentWorkspace.svelte"),
   "utf-8",
 );
 check(

calliope-web/scripts/check-storage-ssr.mjs

@@ -16,51 +16,53 @@
  *
  * Run with `npm test` (or `node scripts/check-storage-ssr.mjs`).
  */
-import { readFileSync, readdirSync, statSync } from 'node:fs';
-import { dirname, join, relative } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
 
 const HERE = dirname(fileURLToPath(import.meta.url));
-const ROOT = join(HERE, '..');
-const SRC = join(ROOT, 'src');
-const HELPER = join(SRC, 'lib', 'storage.ts');
+const ROOT = join(HERE, "..");
+const SRC = join(ROOT, "src");
+const HELPER = join(SRC, "lib", "storage.ts");
 
 let failures = 0;
 
 function fail(message) {
-	failures += 1;
-	console.error(`FAIL  ${message}`);
+  failures += 1;
+  console.error(`FAIL  ${message}`);
 }
 
 function ok(message) {
-	console.log(`ok    ${message}`);
+  console.log(`ok    ${message}`);
 }
 
 /** Replace the global under test. Node's own binding may be getter-only. */
 function setGlobalStorage(value) {
-	Object.defineProperty(globalThis, 'localStorage', {
-		value,
-		configurable: true,
-		writable: true,
-	});
+  Object.defineProperty(globalThis, "localStorage", {
+    value,
+    configurable: true,
+    writable: true,
+  });
 }
 
 /** A Storage that behaves like a browser's. */
 function fakeStorage(initial = {}) {
-	const map = new Map(Object.entries(initial));
-	return {
-		getItem: (k) => (map.has(k) ? map.get(k) : null),
-		setItem: (k, v) => void map.set(k, String(v)),
-		removeItem: (k) => void map.delete(k),
-		clear: () => map.clear(),
-		key: (i) => [...map.keys()][i] ?? null,
-		get length() {
-			return map.size;
-		},
-	};
+  const map = new Map(Object.entries(initial));
+  return {
+    getItem: (k) => (map.has(k) ? map.get(k) : null),
+    setItem: (k, v) => void map.set(k, String(v)),
+    removeItem: (k) => void map.delete(k),
+    clear: () => map.clear(),
+    key: (i) => [...map.keys()][i] ?? null,
+    get length() {
+      return map.size;
+    },
+  };
 }
 
-const { storageGet, storageSet, storageRemove } = await import(pathToFileURL(HELPER).href);
+const { storageGet, storageSet, storageRemove } = await import(
+  pathToFileURL(HELPER).href
+);
 
 // ---- 1. behavioural ----------------------------------------------------
 
@@ -68,124 +70,133 @@ const { storageGet, storageSet, storageRemove } = await import(pathToFileURL(HEL
 // This is the configuration that produced the original crash.
 setGlobalStorage({});
 try {
-	if (storageGet('calliope-lang') !== null) fail('method-less localStorage: expected null');
-	else if (storageSet('calliope-lang', 'ja') !== undefined) fail('method-less localStorage: setItem should no-op');
-	else {
-		storageRemove('calliope-lang');
-		ok('method-less localStorage (Node SSR shape) degrades to null without throwing');
-	}
+  if (storageGet("calliope-lang") !== null)
+    fail("method-less localStorage: expected null");
+  else if (storageSet("calliope-lang", "ja") !== undefined)
+    fail("method-less localStorage: setItem should no-op");
+  else {
+    storageRemove("calliope-lang");
+    ok(
+      "method-less localStorage (Node SSR shape) degrades to null without throwing",
+    );
+  }
 } catch (err) {
-	fail(`method-less localStorage threw: ${err.message}`);
+  fail(`method-less localStorage threw: ${err.message}`);
 }
 
 // Absent entirely (the common server case).
 setGlobalStorage(undefined);
 try {
-	if (storageGet('k') !== null) fail('undefined localStorage: expected null');
-	else ok('absent localStorage degrades to null');
+  if (storageGet("k") !== null) fail("undefined localStorage: expected null");
+  else ok("absent localStorage degrades to null");
 } catch (err) {
-	fail(`undefined localStorage threw: ${err.message}`);
+  fail(`undefined localStorage threw: ${err.message}`);
 }
 
 // Access itself can throw (sandboxed frame / blocked third-party storage).
 setGlobalStorage(
-	new Proxy(
-		{},
-		{
-			get() {
-				throw new Error('SecurityError');
-			},
-		},
-	),
+  new Proxy(
+    {},
+    {
+      get() {
+        throw new Error("SecurityError");
+      },
+    },
+  ),
 );
 try {
-	if (storageGet('k') !== null) fail('throwing localStorage: expected null');
-	else ok('throwing localStorage access degrades to null');
+  if (storageGet("k") !== null) fail("throwing localStorage: expected null");
+  else ok("throwing localStorage access degrades to null");
 } catch (err) {
-	fail(`throwing localStorage access threw: ${err.message}`);
+  fail(`throwing localStorage access threw: ${err.message}`);
 }
 
 // Quota / private-mode errors on write must not escape.
 setGlobalStorage({
-	getItem: () => null,
-	setItem: () => {
-		throw new Error('QuotaExceededError');
-	},
-	removeItem: () => {},
+  getItem: () => null,
+  setItem: () => {
+    throw new Error("QuotaExceededError");
+  },
+  removeItem: () => {},
 });
 try {
-	storageSet('k', 'v');
-	ok('setItem failure is swallowed');
+  storageSet("k", "v");
+  ok("setItem failure is swallowed");
 } catch (err) {
-	fail(`setItem failure escaped: ${err.message}`);
+  fail(`setItem failure escaped: ${err.message}`);
 }
 
 // A real browser Storage must still work — guards against a helper that just
 // returns null unconditionally to satisfy the checks above.
 setGlobalStorage(fakeStorage());
 try {
-	storageSet('calliope-lang', 'ko');
-	const read = storageGet('calliope-lang');
-	if (read !== 'ko') fail(`working storage round-trip: expected "ko", got ${JSON.stringify(read)}`);
-	else {
-		storageRemove('calliope-lang');
-		if (storageGet('calliope-lang') !== null) fail('working storage remove: expected null');
-		else ok('working storage round-trips and removes');
-	}
+  storageSet("calliope-lang", "ko");
+  const read = storageGet("calliope-lang");
+  if (read !== "ko")
+    fail(
+      `working storage round-trip: expected "ko", got ${JSON.stringify(read)}`,
+    );
+  else {
+    storageRemove("calliope-lang");
+    if (storageGet("calliope-lang") !== null)
+      fail("working storage remove: expected null");
+    else ok("working storage round-trips and removes");
+  }
 } catch (err) {
-	fail(`working storage threw: ${err.message}`);
+  fail(`working storage threw: ${err.message}`);
 }
 
 // ---- 2. static ---------------------------------------------------------
 
 const UNSAFE = /typeof\s+localStorage/;
-const EXTENSIONS = ['.ts', '.js', '.svelte'];
+const EXTENSIONS = [".ts", ".js", ".svelte"];
 
 function walk(dir) {
-	const found = [];
-	for (const entry of readdirSync(dir, { withFileTypes: true })) {
-		const full = join(dir, entry.name);
-		if (entry.isDirectory()) {
-			if (entry.name === 'node_modules') continue;
-			found.push(...walk(full));
-		} else if (EXTENSIONS.some((ext) => entry.name.endsWith(ext))) {
-			found.push(full);
-		}
-	}
-	return found;
+  const found = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules") continue;
+      found.push(...walk(full));
+    } else if (EXTENSIONS.some((ext) => entry.name.endsWith(ext))) {
+      found.push(full);
+    }
+  }
+  return found;
 }
 
 function exists(p) {
-	try {
-		return statSync(p).isFile();
-	} catch {
-		return false;
-	}
+  try {
+    return statSync(p).isFile();
+  } catch {
+    return false;
+  }
 }
 
 const offenders = [];
 for (const file of walk(SRC)) {
-	if (file === HELPER) continue; // the one place allowed to probe the global
-	const lines = readFileSync(file, 'utf8').split('\n');
-	lines.forEach((line, i) => {
-		if (UNSAFE.test(line)) offenders.push(`${relative(ROOT, file)}:${i + 1}: ${line.trim()}`);
-	});
+  if (file === HELPER) continue; // the one place allowed to probe the global
+  const lines = readFileSync(file, "utf8").split("\n");
+  lines.forEach((line, i) => {
+    if (UNSAFE.test(line))
+      offenders.push(`${relative(ROOT, file)}:${i + 1}: ${line.trim()}`);
+  });
 }
 
 if (offenders.length) {
-	fail(
-		`unsafe \`typeof localStorage\` guard outside lib/storage.ts — use storageGet/storageSet instead:\n  ${offenders.join('\n  ')}`,
-	);
+  fail(
+    `unsafe \`typeof localStorage\` guard outside lib/storage.ts — use storageGet/storageSet instead:\n  ${offenders.join("\n  ")}`,
+  );
 } else {
-	ok('no unsafe `typeof localStorage` guards in src/');
+  ok("no unsafe `typeof localStorage` guards in src/");
 }
 
-if (!exists(HELPER)) fail('src/lib/storage.ts is missing');
+if (!exists(HELPER)) fail("src/lib/storage.ts is missing");
 
 // ---- result ------------------------------------------------------------
 
 if (failures) {
-	console.error(`\n${failures} storage/SSR check(s) failed.`);
-	process.exit(1);
+  console.error(`\n${failures} storage/SSR check(s) failed.`);
+  process.exit(1);
 }
-console.log('\nstorage SSR checks passed.');
+console.log("\nstorage SSR checks passed.");

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>

calliope-web/src/hooks.client.ts

@@ -1,9 +1,9 @@
-import type { HandleClientError } from '@sveltejs/kit';
-import { t } from '$lib/i18n.svelte';
+import type { HandleClientError } from "@sveltejs/kit";
+import { t } from "$lib/i18n.svelte";
 
 export const handleError: HandleClientError = ({ error }) => {
-	console.error(error);
-	return {
-		message: t('global.somethingWentWrong'),
-	};
+  console.error(error);
+  return {
+    message: t("global.somethingWentWrong"),
+  };
 };

calliope-web/src/hooks.server.ts

@@ -1,4 +1,4 @@
 export async function handle({ event, resolve }) {
-	const response = await resolve(event);
-	return response;
+  const response = await resolve(event);
+  return response;
 }

calliope-web/src/lib/actions/spotlight.ts

@@ -0,0 +1,17 @@
+import type { Action } from "svelte/action";
+
+/** A local honeycomb highlight follows the pointer, independent of selected state. */
+export const spotlight: Action<HTMLElement> = (node) => {
+  const move = (event: PointerEvent) => {
+    if (
+      document.documentElement.dataset.reduce === "1" ||
+      event.pointerType === "touch"
+    )
+      return;
+    const rect = node.getBoundingClientRect();
+    node.style.setProperty("--pointer-x", `${event.clientX - rect.left}px`);
+    node.style.setProperty("--pointer-y", `${event.clientY - rect.top}px`);
+  };
+  node.addEventListener("pointermove", move);
+  return { destroy: () => node.removeEventListener("pointermove", move) };
+};

calliope-web/src/lib/agentComposer.ts

@@ -2,50 +2,50 @@
  * Shared types and helpers for the Agent composer (@workflow mentions + attachments).
  */
 
-export type WorkflowKind = 'image' | 'video';
-export type AttachmentKind = 'image' | 'video' | 'audio' | 'document';
+export type WorkflowKind = "image" | "video";
+export type AttachmentKind = "image" | "video" | "audio" | "document";
 
 export interface WorkflowMention {
-	type: 'workflow';
-	id: number;
-	name: string;
-	kind: WorkflowKind;
+  type: "workflow";
+  id: number;
+  name: string;
+  kind: WorkflowKind;
 }
 
 export interface AgentAttachment {
-	path: string;
-	name: string;
-	kind: AttachmentKind;
+  path: string;
+  name: string;
+  kind: AttachmentKind;
 }
 
 export interface AgentComposerPayload {
-	content: string;
-	mentions: (WorkflowMention | SkillMention)[];
-	attachments: AgentAttachment[];
-	/** question/asked seq this message answers (question-card click). */
-	answer_to?: number;
+  content: string;
+  mentions: (WorkflowMention | SkillMention)[];
+  attachments: AgentAttachment[];
+  /** question/asked seq this message answers (question-card click). */
+  answer_to?: number;
 }
 
 export interface WorkflowOption {
-	id: number;
-	name: string;
-	kind: WorkflowKind;
-	description?: string | null;
-	is_enabled?: boolean;
+  id: number;
+  name: string;
+  kind: WorkflowKind;
+  description?: string | null;
+  is_enabled?: boolean;
 }
 
 export interface SkillOption {
-	name: string;
-	description: string;
-	tags: string[];
+  name: string;
+  description: string;
+  tags: string[];
 }
 
 /** A `/skill` command inserted as a chip. Serialized into the message's
  * mentions payload so the backend can project it into the LLM context. */
 export interface SkillMention {
-	type: 'skill';
-	name: string;
-	description: string;
+  type: "skill";
+  name: string;
+  description: string;
 }
 
 export const MAX_WORKFLOW_MENTIONS = 1;
@@ -53,27 +53,36 @@ export const MAX_WORKFLOW_MENTIONS = 1;
 export const MENTION_LIMIT = 12;
 
 /** Case-insensitive name filter of enabled workflows, capped for the typeahead. */
-export function filterWorkflows(workflows: WorkflowOption[], query: string): WorkflowOption[] {
-	const q = query.trim().toLowerCase();
-	const enabled = workflows.filter((w) => w.is_enabled !== false);
-	const matched = q
-		? enabled.filter((w) => w.name.toLowerCase().includes(q))
-		: enabled;
-	return matched.slice(0, MENTION_LIMIT);
+export function filterWorkflows(
+  workflows: WorkflowOption[],
+  query: string,
+): WorkflowOption[] {
+  const q = query.trim().toLowerCase();
+  const enabled = workflows.filter((w) => w.is_enabled !== false);
+  const matched = q
+    ? enabled.filter((w) => w.name.toLowerCase().includes(q))
+    : enabled;
+  return matched.slice(0, MENTION_LIMIT);
 }
 
 /** Case-insensitive filter of skills for the `/` typeahead (name + description). */
-export function filterSkills(skills: SkillOption[], query: string): SkillOption[] {
-	const q = query.trim().toLowerCase();
-	const matched = q
-		? skills.filter(
-				(s) =>
-					s.name.toLowerCase().includes(q) || s.description.toLowerCase().includes(q),
-			)
-		: skills;
-	return matched.slice(0, MENTION_LIMIT);
+export function filterSkills(
+  skills: SkillOption[],
+  query: string,
+): SkillOption[] {
+  const q = query.trim().toLowerCase();
+  const matched = q
+    ? skills.filter(
+        (s) =>
+          s.name.toLowerCase().includes(q) ||
+          s.description.toLowerCase().includes(q),
+      )
+    : skills;
+  return matched.slice(0, MENTION_LIMIT);
 }
 
 export function payloadIsEmpty(p: AgentComposerPayload): boolean {
-	return !p.content.trim() && p.mentions.length === 0 && p.attachments.length === 0;
+  return (
+    !p.content.trim() && p.mentions.length === 0 && p.attachments.length === 0
+  );
 }

calliope-web/src/lib/agentTasks.ts

@@ -7,28 +7,30 @@
  * buttons stay dumb and the wording never drifts out of sync.
  */
 
-export type AgentTaskKind = 'story' | 'script';
+export type AgentTaskKind = "story" | "script";
 
 /** The pre-filled composer prompt for each task. */
 export const AGENT_TASK_PROMPTS: Record<AgentTaskKind, string> = {
-	story:
-		'Draft the storyline for this project — generate the beats, characters, environments, and any misc. items from the story idea.',
-	script:
-		'Regenerate the full script for this project — turn the storyline into ordered scenes with action and dialogue.',
+  story:
+    "Draft the storyline for this project — generate the beats, characters, environments, and any misc. items from the story idea.",
+  script:
+    "Regenerate the full script for this project — turn the storyline into ordered scenes with action and dialogue.",
 };
 
 /** i18n key for the auto-created session's sidebar title. */
 export const AGENT_TASK_TITLE_KEYS: Record<AgentTaskKind, string> = {
-	story: 'agent.task.story',
-	script: 'agent.task.script',
+  story: "agent.task.story",
+  script: "agent.task.script",
 };
 
-export function isAgentTaskKind(value: string | null | undefined): value is AgentTaskKind {
-	return value === 'story' || value === 'script';
+export function isAgentTaskKind(
+  value: string | null | undefined,
+): value is AgentTaskKind {
+  return value === "story" || value === "script";
 }
 
 /** Build the /agents deep-link URL for a project-scoped task. */
 export function agentDeepLink(projectId: number, task: AgentTaskKind): string {
-	const params = new URLSearchParams({ project: String(projectId), task });
-	return `/agents?${params.toString()}`;
+  const params = new URLSearchParams({ project: String(projectId), task });
+  return `/agents?${params.toString()}`;
 }

calliope-web/src/lib/api.ts

@@ -140,6 +140,11 @@ import type {
   WorkflowOutputMapEntry,
   WorkflowConnectionCheck,
   WorkflowLastTest,
+  WorkflowMeta,
+  WorkflowUIFileInput,
+  WorkflowConvertFileReport,
+  WorkflowConvertReport,
+  WorkflowImportResult,
 } from "./comfy/types";
 export type {
   Job,
@@ -154,6 +159,11 @@ export type {
   WorkflowOutputMapEntry,
   WorkflowConnectionCheck,
   WorkflowLastTest,
+  WorkflowMeta,
+  WorkflowUIFileInput,
+  WorkflowConvertFileReport,
+  WorkflowConvertReport,
+  WorkflowImportResult,
 };
 
 async function api<T>(path: string, init?: RequestInit): Promise<T> {
@@ -462,6 +472,50 @@ export const comfy = {
 
 export const workflows = {
   list: () => api<Workflow[]>("/api/workflows"),
+  /** HEL-682: metadata-only list — 150+ rows without any workflow_json. */
+  listMeta: () => api<WorkflowMeta[]>("/api/workflows?view=meta"),
+  /** HEL-682: dry-run UI→API conversion for a batch of files (nothing stored). */
+  convert: (
+    files: WorkflowUIFileInput[],
+    opts?: { endpoint_id?: string | null; refresh?: boolean },
+  ) =>
+    api<WorkflowConvertReport>("/api/workflows/convert", {
+      method: "POST",
+      body: JSON.stringify({
+        files,
+        ...(opts?.endpoint_id ? { endpoint_id: opts.endpoint_id } : {}),
+        ...(opts?.refresh ? { refresh: opts.refresh } : {}),
+      }),
+    }),
+  /** HEL-682: commit a batch import (converts server-side, conflicts skipped). */
+  importBatch: (files: WorkflowUIFileInput[]) =>
+    api<WorkflowImportResult>("/api/workflows/import-batch", {
+      method: "POST",
+      body: JSON.stringify({ files }),
+    }),
+  /** HEL-682: scan a server-side directory of UI-format JSONs — dry-run report. */
+  importScanDry: (root: string) =>
+    api<WorkflowConvertReport>("/api/workflows/import-scan", {
+      method: "POST",
+      body: JSON.stringify({ root, dry_run: true }),
+    }),
+  /** HEL-682: scan a server-side directory of UI-format JSONs — commit the import. */
+  importScanCommit: (root: string) =>
+    api<WorkflowImportResult>("/api/workflows/import-scan", {
+      method: "POST",
+      body: JSON.stringify({ root, dry_run: false }),
+    }),
+  /** HEL-682: record a use (最近使用). */
+  touch: (id: number) =>
+    api<{ ok: boolean }>(`/api/workflows/${id}/touch`, { method: "POST" }),
+  /** HEL-682: delete byte-identical duplicates, keeping the lowest id. */
+  dedupe: () =>
+    api<{
+      ok: boolean;
+      removed: number;
+      kept_ids: number[];
+      removed_ids: number[];
+    }>("/api/workflows/dedupe", { method: "POST" }),
   analyze: (
     workflow_json: Record<string, unknown>,
     endpoint_id?: string | null,
@@ -537,6 +591,10 @@ export const workflows = {
       input_schema: ComfyDynamicInput[];
       output_map: WorkflowOutputMapEntry[];
       output_map_source: "auto" | "user";
+      favorite: boolean;
+      tags: string[];
+      category: string;
+      model_family: string;
     }>,
   ) =>
     api<Workflow>(`/api/workflows/${id}`, {
@@ -638,6 +696,15 @@ export const playgroundApi = {
     endpoint_id?: string | null;
     /** Origin recorded on the job payload (tasks page labels). */
     source?: "playground" | "studio-image" | "studio-video";
+    /** Optional real workbench source (HEL-684) — validated server-side and
+     * stamped on the job so finished takes can flow back to their row. */
+    context?: {
+      project_id: number;
+      stage: "assets" | "shot";
+      source_kind: "asset" | "shot";
+      source_id: string;
+      label?: string;
+    };
   }) =>
     api<{ ok: boolean; job: Job }>("/api/playground/generate", {
       method: "POST",
@@ -655,7 +722,24 @@ export const playgroundApi = {
       job_id: number;
       deleted_files: string[];
       missing_files: string[];
+      removed_workbench_links?: number[];
     }>(`/api/playground/jobs/${jobId}`, { method: "DELETE" }),
+  /** Flow a finished take back to the workbench row it came from (HEL-684).
+   * The server derives the target from the job's own recorded context —
+   * idempotent, never overwrites, refuses stale source rows. */
+  attachWorkbench: (jobId: number) =>
+    api<{
+      ok: boolean;
+      already_attached: boolean;
+      job_id: number;
+      attached_job_id: number;
+      project_id: number;
+      stage: "assets" | "shot";
+      target_id: string;
+    }>("/api/playground/attach-workbench", {
+      method: "POST",
+      body: JSON.stringify({ job_id: jobId }),
+    }),
   attach: (payload: {
     path: string;
     project_id: number;
@@ -750,6 +834,8 @@ export interface VideoShot {
 }
 
 export interface WorkbenchStage {
+  incoming_results?: IncomingResult[];
+  assistant_note?: string;
   stage_key: WorkbenchStageKey;
   status: WorkbenchStageStatus;
   content: Record<string, unknown> | null;
@@ -773,6 +859,11 @@ export interface WorkbenchOverview {
 }
 
 export const workbenchApi = {
+  saveNote: (projectId: number, stageKey: WorkbenchStageKey, text: string) =>
+    api<{ ok: boolean; stage: WorkbenchStage }>(
+      `/api/workbench/projects/${projectId}/stages/${stageKey}/note`,
+      { method: "PATCH", body: JSON.stringify({ text }) },
+    ),
   overview: (projectId: number) =>
     api<WorkbenchOverview>(`/api/workbench/projects/${projectId}`),
   patchStage: (
@@ -864,7 +955,65 @@ export const libraryApi = {
 
 // ── Agents (agentic harness) ────────────────────────────────────────────
 
+export interface AgentDeliverable {
+  id: number;
+  session_id: number;
+  source_message_id: number;
+  project_id: number | null;
+  stage_key: WorkbenchStageKey;
+  title: string;
+  content: string;
+  revision: number;
+  created_at: string;
+  updated_at: string;
+}
+export interface IncomingResult {
+  source_key: string;
+  title: string;
+  text?: string;
+  kind?: string;
+  paths?: string[];
+  session_id?: number;
+  job_id?: number;
+}
+export const resultsApi = {
+  versions: (id: number) =>
+    api<{ revision: number; content: string }[]>(
+      `/api/results/deliverables/${id}/versions`,
+    ),
+  list: (sessionId?: number) =>
+    api<AgentDeliverable[]>(
+      `/api/results/deliverables${sessionId == null ? "" : `?session_id=${sessionId}`}`,
+    ),
+  patch: (
+    id: number,
+    payload: {
+      revision: number;
+      content: string;
+      project_id: number | null;
+      stage_key: WorkbenchStageKey;
+    },
+  ) =>
+    api<AgentDeliverable>(`/api/results/deliverables/${id}`, {
+      method: "PATCH",
+      body: JSON.stringify(payload),
+    }),
+  store: (payload: {
+    project_id: number;
+    stage_key: WorkbenchStageKey;
+    deliverable_id?: number;
+    revision?: number;
+    job_id?: number;
+  }) =>
+    api<{ ok: boolean; already_attached: boolean; stage: WorkbenchStage }>(
+      "/api/results/store",
+      { method: "POST", body: JSON.stringify(payload) },
+    ),
+};
+
 export interface AgentSession {
+  task_summary?: string;
+  task_status?: string;
   id: number;
   project_id: number | null;
   title: string;

calliope-web/src/lib/assetPicker.ts

@@ -1,50 +1,60 @@
 /** Shared shape for Omni / video ref pickers. */
-export type AssetGroup = 'character' | 'location' | 'item' | 'upload' | 'clip' | 'shot';
+export type AssetGroup =
+  "character" | "location" | "item" | "upload" | "clip" | "shot";
 
 export interface AssetOption {
-	label: string;
-	path: string;
-	kind?: 'image' | 'video' | 'audio';
-	group?: AssetGroup;
+  label: string;
+  path: string;
+  kind?: "image" | "video" | "audio";
+  group?: AssetGroup;
 }
 
 const GROUP_FROM_SUFFIX: Array<{ re: RegExp; group: AssetGroup }> = [
-	{ re: /\s·\s*sheet$/i, group: 'character' },
-	{ re: /\s·\s*environment$/i, group: 'location' },
-	{ re: /\s·\s*item$/i, group: 'item' },
-	{ re: /\s·\s*upload$/i, group: 'upload' },
-	{ re: /\s·\s*blockout(\s+clip)?$/i, group: 'shot' },
-	{ re: /^clip\s*#/i, group: 'clip' },
+  { re: /\s·\s*sheet$/i, group: "character" },
+  { re: /\s·\s*environment$/i, group: "location" },
+  { re: /\s·\s*item$/i, group: "item" },
+  { re: /\s·\s*upload$/i, group: "upload" },
+  { re: /\s·\s*blockout(\s+clip)?$/i, group: "shot" },
+  { re: /^clip\s*#/i, group: "clip" },
 ];
 
 export function assetGroup(opt: AssetOption): AssetGroup {
-	if (opt.group) return opt.group;
-	for (const { re, group } of GROUP_FROM_SUFFIX) {
-		if (re.test(opt.label)) return group;
-	}
-	return 'upload';
+  if (opt.group) return opt.group;
+  for (const { re, group } of GROUP_FROM_SUFFIX) {
+    if (re.test(opt.label)) return group;
+  }
+  return "upload";
 }
 
 /** Strip the " · sheet" style suffix so the tab already names the type. */
 export function assetDisplayName(opt: AssetOption): string {
-	return opt.label.replace(/\s·\s*(sheet|environment|item|upload|blockout(\s+clip)?)\s*$/i, '').trim() || opt.label;
+  return (
+    opt.label
+      .replace(
+        /\s·\s*(sheet|environment|item|upload|blockout(\s+clip)?)\s*$/i,
+        "",
+      )
+      .trim() || opt.label
+  );
 }
 
 export const ASSET_GROUP_TABS: Array<{ id: AssetGroup; label: string }> = [
-	{ id: 'character', label: 'Characters' },
-	{ id: 'location', label: 'Environments' },
-	{ id: 'item', label: 'Misc. Items' },
-	{ id: 'shot', label: 'From Build Scene' },
-	{ id: 'clip', label: 'Clips' },
-	{ id: 'upload', label: 'Uploads' },
+  { id: "character", label: "Characters" },
+  { id: "location", label: "Environments" },
+  { id: "item", label: "Misc. Items" },
+  { id: "shot", label: "From Build Scene" },
+  { id: "clip", label: "Clips" },
+  { id: "upload", label: "Uploads" },
 ];
 
-export function tabsForMediaKind(kind: string | undefined): Array<{ id: AssetGroup; label: string }> {
-	const ids: AssetGroup[] =
-		kind === 'video'
-			? ['clip', 'upload']
-			: kind === 'audio'
-				? ['upload']
-				: ['character', 'location', 'item', 'shot', 'upload'];
-	return ASSET_GROUP_TABS.filter((t) => ids.includes(t.id));
+export function tabsForMediaKind(
+  kind: string | undefined,
+): Array<{ id: AssetGroup; label: string }> {
+  const ids: AssetGroup[] =
+    kind === "video"
+      ? ["clip", "upload"]
+      : kind === "audio"
+        ? ["upload"]
+        : ["character", "location", "item", "shot", "upload"];
+  return ASSET_GROUP_TABS.filter((t) => ids.includes(t.id));
 }

calliope-web/src/lib/canvas/ArtifactNode.svelte

@@ -47,14 +47,12 @@
 	</header>
 	<div class="media">
 		{#if videoSrc}
-			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 			<button
 				type="button"
 				class="media-btn"
 				onclick={openPreview}
 				title={t('canvas.openPreview')}
 			>
-				<!-- svelte-ignore a11y_media_has_caption -->
 				<video
 					class="media-el"
 					src={videoSrc}
@@ -64,7 +62,6 @@
 				></video>
 			</button>
 		{:else if mediaSrc}
-			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 			<button
 				type="button"
 				class="media-btn"
@@ -98,8 +95,8 @@
 		position: relative;
 	}
 	.artifact-node.running {
-		border-color: rgba(125, 211, 252, 0.6);
-		box-shadow: 0 0 18px rgba(125, 211, 252, 0.25);
+		border-color: var(--run);
+		box-shadow: 0 0 18px var(--run-soft);
 	}
 	:global(.svelte-flow__node.selected) .artifact-node {
 		border-color: var(--accent);
@@ -117,9 +114,9 @@
 		font-size: 9px;
 		letter-spacing: 0.06em;
 		text-transform: uppercase;
-		color: #bae6fd;
-		background: rgba(12, 74, 110, 0.55);
-		border: 1px solid rgba(125, 211, 252, 0.35);
+		color: var(--text-2);
+		background: var(--bg-4);
+		border: 1px solid var(--line-2);
 		border-radius: 999px;
 		padding: 2px 6px;
 		flex-shrink: 0;
@@ -141,12 +138,12 @@
 		flex-shrink: 0;
 	}
 	.running-badge {
-		color: #bae6fd;
-		background: rgba(12, 74, 110, 0.6);
+		color: var(--run);
+		background: var(--run-soft);
 	}
 	.failed-badge {
-		color: #fecaca;
-		background: rgba(127, 29, 29, 0.5);
+		color: var(--err);
+		background: var(--err-soft);
 	}
 	.play-badge {
 		font-size: 9px;
@@ -205,9 +202,9 @@
 		font-weight: 600;
 		letter-spacing: 0.04em;
 		text-transform: lowercase;
-		color: var(--text-muted);
+		color: var(--on-media);
 		pointer-events: none;
-		background: rgba(0, 0, 0, 0.55);
+		background: var(--media-scrim);
 		padding: 1px 5px;
 		border-radius: 999px;
 	}

calliope-web/src/lib/canvas/EntityNode.svelte

@@ -76,7 +76,6 @@
 			<SafeMedia class="media-el" src={posterSrc} alt={data.title} kind="image" controls={false} />
 		{:else if videoSrc}
 			<!-- No poster available: #t=0.1 first-frame thumbnail. -->
-			<!-- svelte-ignore a11y_media_has_caption -->
 			<video
 				class="media-el"
 				src={videoSrc}
@@ -108,7 +107,7 @@
 	transition: border-color 0.15s;
 }
 	.entity-node:hover {
-		border-color: #3a3a44;
+		border-color: var(--line-2);
 	}
 	/* Svelte Flow marks the selected node wrapper with .selected */
 	:global(.svelte-flow__node.selected) .entity-node {
@@ -176,9 +175,9 @@
 		font-weight: 600;
 		letter-spacing: 0.04em;
 		text-transform: lowercase;
-		color: var(--text-muted);
+		color: var(--on-media);
 		pointer-events: none;
-		background: rgba(0, 0, 0, 0.55);
+		background: var(--media-scrim);
 		padding: 1px 5px;
 		border-radius: 999px;
 	}

calliope-web/src/lib/canvas/tokens.css

@@ -1,13 +0,0 @@
-/* Canvas v2.1 scoped visual tokens (spec v2.0 §2) — canvas surfaces only.
-   The global --accent stays untouched for v1 pages. */
-.canvas-root {
-	--accent: #4f46a5;
-	--accent-hover: #6157c9;
-	--accent-glow: rgba(99, 102, 241, 0.3);
-	--edge: #7dd3fc;
-	/* Edge-chip surfaces (LinkEdge label) — fallbacks match the dark theme. */
-	--panel: #17171f;
-	--panel-border: #2a2a35;
-	--fg: #f4f4f5;
-	--fg-dim: #a1a1aa;
-}

calliope-web/src/lib/comfy/classifyInput.ts

@@ -12,24 +12,25 @@
  *   control   → compact pills (resolution, duration, seed)
  *   advanced  → hidden inside an "Advanced" popover
  */
-import type { ComfyDynamicInput } from './types';
-import { normalizeInputRole } from './parser';
+import type { ComfyDynamicInput } from "./types";
+import { normalizeInputRole } from "./parser";
 
-export type InputZone = 'composer' | 'media' | 'control' | 'advanced' | 'hidden';
+export type InputZone =
+  "composer" | "media" | "control" | "advanced" | "hidden";
 
 export type OmniWidget =
-	| 'promptTextarea'
-	| 'negativeTextarea'
-	| 'uploadTile'
-	| 'assetTile'
-	| 'resolutionPill'
-	| 'numberPill'
-	| 'textPill';
+  | "promptTextarea"
+  | "negativeTextarea"
+  | "uploadTile"
+  | "assetTile"
+  | "resolutionPill"
+  | "numberPill"
+  | "textPill";
 
 export interface ClassifiedInput {
-	input: ComfyDynamicInput;
-	zone: InputZone;
-	widget: OmniWidget;
+  input: ComfyDynamicInput;
+  zone: InputZone;
+  widget: OmniWidget;
 }
 
 /**
@@ -39,49 +40,49 @@ export interface ClassifiedInput {
  * zone. Unknown roles fall to `advanced` so no field is ever hidden or lost.
  */
 export function classifyInput(inp: ComfyDynamicInput): ClassifiedInput {
-	const role = normalizeInputRole(inp.role);
+  const role = normalizeInputRole(inp.role);
 
-	// --- Composer ---
-	if (role === 'prompt' || role === 'positive') {
-		return { input: inp, zone: 'composer', widget: 'promptTextarea' };
-	}
-	if (role === 'negative') {
-		return { input: inp, zone: 'composer', widget: 'negativeTextarea' };
-	}
+  // --- Composer ---
+  if (role === "prompt" || role === "positive") {
+    return { input: inp, zone: "composer", widget: "promptTextarea" };
+  }
+  if (role === "negative") {
+    return { input: inp, zone: "composer", widget: "negativeTextarea" };
+  }
 
-	// --- Media tray ---
-	if (
-		role === 'character' ||
-		role === 'location' ||
-		role === 'image' ||
-		role === 'video' ||
-		role === 'audio'
-	) {
-		const isMediaKind =
-			inp.kind === 'image' ||
-			inp.kind === 'image_url' ||
-			inp.kind === 'audio' ||
-			inp.kind === 'video';
-		return {
-			input: inp,
-			zone: 'media',
-			widget: isMediaKind ? 'uploadTile' : 'assetTile',
-		};
-	}
+  // --- Media tray ---
+  if (
+    role === "character" ||
+    role === "location" ||
+    role === "image" ||
+    role === "video" ||
+    role === "audio"
+  ) {
+    const isMediaKind =
+      inp.kind === "image" ||
+      inp.kind === "image_url" ||
+      inp.kind === "audio" ||
+      inp.kind === "video";
+    return {
+      input: inp,
+      zone: "media",
+      widget: isMediaKind ? "uploadTile" : "assetTile",
+    };
+  }
 
-	// --- Control bar ---
-	if (role === 'width' || role === 'height') {
-		return { input: inp, zone: 'control', widget: 'resolutionPill' };
-	}
-	if (role === 'duration' || role === 'seed') {
-		return { input: inp, zone: 'control', widget: 'numberPill' };
-	}
+  // --- Control bar ---
+  if (role === "width" || role === "height") {
+    return { input: inp, zone: "control", widget: "resolutionPill" };
+  }
+  if (role === "duration" || role === "seed") {
+    return { input: inp, zone: "control", widget: "numberPill" };
+  }
 
-	// --- Advanced popover ---
-	if (inp.kind === 'number') {
-		return { input: inp, zone: 'advanced', widget: 'numberPill' };
-	}
-	return { input: inp, zone: 'advanced', widget: 'textPill' };
+  // --- Advanced popover ---
+  if (inp.kind === "number") {
+    return { input: inp, zone: "advanced", widget: "numberPill" };
+  }
+  return { input: inp, zone: "advanced", widget: "textPill" };
 }
 
 /**
@@ -92,57 +93,62 @@ export function classifyInput(inp: ComfyDynamicInput): ClassifiedInput {
  * nodeIds on change.
  */
 export function classifyAll(inputs: ComfyDynamicInput[]): {
-	prompt: ClassifiedInput | null;
-	negative: ClassifiedInput | null;
-	media: ClassifiedInput[];
-	control: ClassifiedInput[];
-	advanced: ClassifiedInput[];
-	/** Non-null when both width AND height are present → merge into one pill. */
-	resolutionPair: { width: ClassifiedInput; height: ClassifiedInput } | null;
+  prompt: ClassifiedInput | null;
+  negative: ClassifiedInput | null;
+  media: ClassifiedInput[];
+  control: ClassifiedInput[];
+  advanced: ClassifiedInput[];
+  /** Non-null when both width AND height are present → merge into one pill. */
+  resolutionPair: { width: ClassifiedInput; height: ClassifiedInput } | null;
 } {
-	const classified = inputs.map(classifyInput);
+  const classified = inputs.map(classifyInput);
 
-	const prompt = classified.find((c) => c.widget === 'promptTextarea') ?? null;
-	const negative = classified.find((c) => c.widget === 'negativeTextarea') ?? null;
-	const media = classified.filter((c) => c.zone === 'media');
-	const advanced = classified.filter((c) => c.zone === 'advanced');
+  const prompt = classified.find((c) => c.widget === "promptTextarea") ?? null;
+  const negative =
+    classified.find((c) => c.widget === "negativeTextarea") ?? null;
+  const media = classified.filter((c) => c.zone === "media");
+  const advanced = classified.filter((c) => c.zone === "advanced");
 
-	// Separate resolution from other control inputs
-	const controlNonRes = classified.filter(
-		(c) => c.zone === 'control' && c.widget !== 'resolutionPill',
-	);
-	const resInputs = classified.filter((c) => c.widget === 'resolutionPill');
+  // Separate resolution from other control inputs
+  const controlNonRes = classified.filter(
+    (c) => c.zone === "control" && c.widget !== "resolutionPill",
+  );
+  const resInputs = classified.filter((c) => c.widget === "resolutionPill");
 
-	// Detect width + height pair
-	const wInput = resInputs.find((c) => normalizeInputRole(c.input.role) === 'width');
-	const hInput = resInputs.find((c) => normalizeInputRole(c.input.role) === 'height');
-	const resolutionPair =
-		wInput && hInput ? { width: wInput, height: hInput } : null;
+  // Detect width + height pair
+  const wInput = resInputs.find(
+    (c) => normalizeInputRole(c.input.role) === "width",
+  );
+  const hInput = resInputs.find(
+    (c) => normalizeInputRole(c.input.role) === "height",
+  );
+  const resolutionPair =
+    wInput && hInput ? { width: wInput, height: hInput } : null;
 
-	// If only one of width/height exists, treat it as a standalone control number pill
-	const standaloneRes = resolutionPair ? [] : resInputs;
+  // If only one of width/height exists, treat it as a standalone control number pill
+  const standaloneRes = resolutionPair ? [] : resInputs;
 
-	return {
-		prompt,
-		negative,
-		media,
-		control: [...controlNonRes, ...standaloneRes],
-		advanced,
-		resolutionPair,
-	};
+  return {
+    prompt,
+    negative,
+    media,
+    control: [...controlNonRes, ...standaloneRes],
+    advanced,
+    resolutionPair,
+  };
 }
 
 // ── Resolution presets ────────────────────────────────────────────────────────
 
 export interface ResolutionPreset {
-	label: string;
-	width: number;
-	height: number;
+  label: string;
+  width: number;
+  height: number;
 }
 
 export const RESOLUTION_PRESETS: ResolutionPreset[] = [
-	{ label: '720p', width: 1280, height: 720 },
-	{ label: '1080p', width: 1920, height: 1080 },
+  { label: "720p", width: 1280, height: 720 },
+  { label: "1080p", width: 1920, height: 1080 },
 ];
 
 /**
@@ -150,12 +156,12 @@ export const RESOLUTION_PRESETS: ResolutionPreset[] = [
  * (or return null for custom / unset values).
  */
 export function resolutionLabel(
-	width: number | string | undefined,
-	height: number | string | undefined,
+  width: number | string | undefined,
+  height: number | string | undefined,
 ): string | null {
-	const w = Number(width);
-	const h = Number(height);
-	if (!w || !h) return null;
-	const match = RESOLUTION_PRESETS.find((p) => p.width === w && p.height === h);
-	return match?.label ?? `${w}×${h}`;
+  const w = Number(width);
+  const h = Number(height);
+  if (!w || !h) return null;
+  const match = RESOLUTION_PRESETS.find((p) => p.width === w && p.height === h);
+  return match?.label ?? `${w}×${h}`;
 }

calliope-web/src/lib/comfy/parser.ts

@@ -1,142 +1,192 @@
-import type { ComfyDynamicInput, ComfyDynamicOutput, WorkflowNode } from './types';
+import type {
+  ComfyDynamicInput,
+  ComfyDynamicOutput,
+  WorkflowNode,
+} from "./types";
 
 const TEXT_AREA = new Set([
-	'CLIPTextEncode',
-	'Note',
-	'ShowText',
-	'ImpactWildcardProcessor',
-	'PrimitiveStringMultiline',
-	'PrimitiveString',
+  "CLIPTextEncode",
+  "Note",
+  "ShowText",
+  "ImpactWildcardProcessor",
+  "PrimitiveStringMultiline",
+  "PrimitiveString",
+]);
+const NUMBER = new Set([
+  "INT",
+  "FLOAT",
+  "PrimitiveInt",
+  "PrimitiveFloat",
+  "KSampler",
+  "KSamplerAdvanced",
+]);
+const IMAGE = new Set([
+  "LoadImage",
+  "LoadImageMask",
+  "ImageLoader",
+  "ETN_LoadImageBase64",
+]);
+const IMAGE_URL = new Set(["Load Image From Url (mtb)"]);
+const AUDIO = new Set(["LoadAudio", "VHS_LoadAudio"]);
+const VIDEO = new Set(["LoadVideo", "VHS_LoadVideo", "VHS_LoadVideoPath"]);
+const VIDEO_OUT = new Set([
+  "VHS_VideoCombine",
+  "SaveVideo",
+  "VideoOutput",
+  "AnimateDiffCombine",
+]);
+const IMAGE_OUT = new Set([
+  "SaveImage",
+  "PreviewImage",
+  "SaveImageWebsocket",
+  "ETN_SendImageWebSocket",
 ]);
-const NUMBER = new Set(['INT', 'FLOAT', 'PrimitiveInt', 'PrimitiveFloat', 'KSampler', 'KSamplerAdvanced']);
-const IMAGE = new Set(['LoadImage', 'LoadImageMask', 'ImageLoader', 'ETN_LoadImageBase64']);
-const IMAGE_URL = new Set(['Load Image From Url (mtb)']);
-const AUDIO = new Set(['LoadAudio', 'VHS_LoadAudio']);
-const VIDEO = new Set(['LoadVideo', 'VHS_LoadVideo', 'VHS_LoadVideoPath']);
-const VIDEO_OUT = new Set(['VHS_VideoCombine', 'SaveVideo', 'VideoOutput', 'AnimateDiffCombine']);
-const IMAGE_OUT = new Set(['SaveImage', 'PreviewImage', 'SaveImageWebsocket', 'ETN_SendImageWebSocket']);
 
 /** Matches (Input), (Input:prompt), (Output:image), … */
 const TITLE_TAG_RE = /\((Input|Output)(?::([a-zA-Z0-9_-]+))?\)/i;
 
 const INPUT_ROLE_ALIASES: Record<string, string[]> = {
-	prompt: ['prompt', 'positive'],
-	negative: ['negative', 'neg'],
-	width: ['width', 'w'],
-	height: ['height', 'h'],
-	character: ['character', 'char', 'portrait', 'sheet', 'face', 'ref'],
-	location: ['location', 'loc', 'environment', 'env', 'background', 'scene'],
-	image: ['image', 'img'],
-	video: ['video', 'vid'],
-	audio: ['audio', 'sound', 'sfx'],
-	seed: ['seed'],
-	duration: ['duration', 'dur', 'length', 'seconds'],
+  prompt: ["prompt", "positive"],
+  negative: ["negative", "neg"],
+  width: ["width", "w"],
+  height: ["height", "h"],
+  character: ["character", "char", "portrait", "sheet", "face", "ref"],
+  location: ["location", "loc", "environment", "env", "background", "scene"],
+  image: ["image", "img"],
+  video: ["video", "vid"],
+  audio: ["audio", "sound", "sfx"],
+  seed: ["seed"],
+  duration: ["duration", "dur", "length", "seconds"],
 };
 
 const OUTPUT_ROLE_ALIASES: Record<string, string[]> = {
-	image: ['image', 'img'],
-	video: ['video', 'vid'],
+  image: ["image", "img"],
+  video: ["video", "vid"],
 };
 
 export function parseTitleTag(title: string): {
-	kind: 'input' | 'output' | null;
-	role: string | null;
-	label: string;
+  kind: "input" | "output" | null;
+  role: string | null;
+  label: string;
 } {
-	if (!title) return { kind: null, role: null, label: '' };
-	const match = TITLE_TAG_RE.exec(title);
-	if (!match) return { kind: null, role: null, label: title.trim() };
-	const kind = match[1].toLowerCase() as 'input' | 'output';
-	const role = match[2] ? match[2].toLowerCase() : null;
-	const stripped = title.replace(TITLE_TAG_RE, '').trim();
-	const label = stripped || role || kind;
-	return { kind, role, label };
+  if (!title) return { kind: null, role: null, label: "" };
+  const match = TITLE_TAG_RE.exec(title);
+  if (!match) return { kind: null, role: null, label: title.trim() };
+  const kind = match[1].toLowerCase() as "input" | "output";
+  const role = match[2] ? match[2].toLowerCase() : null;
+  const stripped = title.replace(TITLE_TAG_RE, "").trim();
+  const label = stripped || role || kind;
+  return { kind, role, label };
 }
 
-export function normalizeInputRole(role: string | null | undefined): string | null {
-	if (!role) return null;
-	const r = role.toLowerCase().trim();
-	for (const [canonical, aliases] of Object.entries(INPUT_ROLE_ALIASES)) {
-		if (r === canonical || aliases.includes(r)) return canonical;
-	}
-	return r;
+export function normalizeInputRole(
+  role: string | null | undefined,
+): string | null {
+  if (!role) return null;
+  const r = role.toLowerCase().trim();
+  for (const [canonical, aliases] of Object.entries(INPUT_ROLE_ALIASES)) {
+    if (r === canonical || aliases.includes(r)) return canonical;
+  }
+  return r;
 }
 
-export function normalizeOutputRole(role: string | null | undefined): string | null {
-	if (!role) return null;
-	const r = role.toLowerCase().trim();
-	for (const [canonical, aliases] of Object.entries(OUTPUT_ROLE_ALIASES)) {
-		if (r === canonical || aliases.includes(r)) return canonical;
-	}
-	return r;
+export function normalizeOutputRole(
+  role: string | null | undefined,
+): string | null {
+  if (!role) return null;
+  const r = role.toLowerCase().trim();
+  for (const [canonical, aliases] of Object.entries(OUTPUT_ROLE_ALIASES)) {
+    if (r === canonical || aliases.includes(r)) return canonical;
+  }
+  return r;
 }
 
-function classToInputKind(classType: string): ComfyDynamicInput['kind'] {
-	if (IMAGE.has(classType)) return 'image';
-	if (IMAGE_URL.has(classType)) return 'image_url';
-	if (AUDIO.has(classType)) return 'audio';
-	if (VIDEO.has(classType)) return 'video';
-	if (NUMBER.has(classType)) return 'number';
-	if (TEXT_AREA.has(classType)) return 'textarea';
-	const lower = classType.toLowerCase();
-	if (lower.includes('video')) return 'video';
-	if (lower.includes('audio')) return 'audio';
-	if (lower.includes('image') || lower.includes('load')) return 'image';
-	if (lower.includes('int') || lower.includes('float') || lower.includes('seed')) return 'number';
-	if (lower.includes('text') || lower.includes('clip') || lower.includes('prompt')) return 'textarea';
-	return 'text';
+function classToInputKind(classType: string): ComfyDynamicInput["kind"] {
+  if (IMAGE.has(classType)) return "image";
+  if (IMAGE_URL.has(classType)) return "image_url";
+  if (AUDIO.has(classType)) return "audio";
+  if (VIDEO.has(classType)) return "video";
+  if (NUMBER.has(classType)) return "number";
+  if (TEXT_AREA.has(classType)) return "textarea";
+  const lower = classType.toLowerCase();
+  if (lower.includes("video")) return "video";
+  if (lower.includes("audio")) return "audio";
+  if (lower.includes("image") || lower.includes("load")) return "image";
+  if (
+    lower.includes("int") ||
+    lower.includes("float") ||
+    lower.includes("seed")
+  )
+    return "number";
+  if (
+    lower.includes("text") ||
+    lower.includes("clip") ||
+    lower.includes("prompt")
+  )
+    return "textarea";
+  return "text";
 }
 
 function extractDefault(node: WorkflowNode): string | number | undefined {
-	const { inputs, class_type } = node;
-	if (IMAGE.has(class_type) || AUDIO.has(class_type) || VIDEO.has(class_type)) return undefined;
-	if (typeof inputs.text === 'string') return inputs.text;
-	if (typeof inputs.value === 'string' || typeof inputs.value === 'number') return inputs.value;
-	if (typeof inputs.int === 'number') return inputs.int;
-	if (typeof inputs.float === 'number') return inputs.float;
-	return undefined;
+  const { inputs, class_type } = node;
+  if (IMAGE.has(class_type) || AUDIO.has(class_type) || VIDEO.has(class_type))
+    return undefined;
+  if (typeof inputs.text === "string") return inputs.text;
+  if (typeof inputs.value === "string" || typeof inputs.value === "number")
+    return inputs.value;
+  if (typeof inputs.int === "number") return inputs.int;
+  if (typeof inputs.float === "number") return inputs.float;
+  return undefined;
 }
 
-export function parseDynamicInputs(workflow: Record<string, WorkflowNode>): ComfyDynamicInput[] {
-	const results: ComfyDynamicInput[] = [];
-	for (const [nodeId, node] of Object.entries(workflow)) {
-		const title = node._meta?.title ?? '';
-		const { kind, role, label } = parseTitleTag(title);
-		if (kind !== 'input') continue;
-		results.push({
-			nodeId,
-			label: label || node.class_type,
-			role: normalizeInputRole(role),
-			kind: classToInputKind(node.class_type),
-			defaultValue: extractDefault(node),
-			required: true,
-		});
-	}
-	return results;
+export function parseDynamicInputs(
+  workflow: Record<string, WorkflowNode>,
+): ComfyDynamicInput[] {
+  const results: ComfyDynamicInput[] = [];
+  for (const [nodeId, node] of Object.entries(workflow)) {
+    const title = node._meta?.title ?? "";
+    const { kind, role, label } = parseTitleTag(title);
+    if (kind !== "input") continue;
+    results.push({
+      nodeId,
+      label: label || node.class_type,
+      role: normalizeInputRole(role),
+      kind: classToInputKind(node.class_type),
+      defaultValue: extractDefault(node),
+      required: true,
+    });
+  }
+  return results;
 }
 
-export function parseDynamicOutputs(workflow: Record<string, WorkflowNode>): ComfyDynamicOutput[] {
-	const results: ComfyDynamicOutput[] = [];
-	for (const [nodeId, node] of Object.entries(workflow)) {
-		const title = node._meta?.title ?? '';
-		const { kind, role, label } = parseTitleTag(title);
-		if (kind !== 'output') continue;
-		const canon = normalizeOutputRole(role);
-		let outKind: ComfyDynamicOutput['kind'] = 'other';
-		if (canon === 'video' || VIDEO_OUT.has(node.class_type) || node.class_type.toLowerCase().includes('video'))
-			outKind = 'video';
-		else if (
-			canon === 'image' ||
-			IMAGE_OUT.has(node.class_type) ||
-			node.class_type.toLowerCase().includes('image')
-		)
-			outKind = 'image';
-		results.push({
-			nodeId,
-			label: label || node.class_type,
-			role: canon,
-			kind: outKind,
-		});
-	}
-	return results;
+export function parseDynamicOutputs(
+  workflow: Record<string, WorkflowNode>,
+): ComfyDynamicOutput[] {
+  const results: ComfyDynamicOutput[] = [];
+  for (const [nodeId, node] of Object.entries(workflow)) {
+    const title = node._meta?.title ?? "";
+    const { kind, role, label } = parseTitleTag(title);
+    if (kind !== "output") continue;
+    const canon = normalizeOutputRole(role);
+    let outKind: ComfyDynamicOutput["kind"] = "other";
+    if (
+      canon === "video" ||
+      VIDEO_OUT.has(node.class_type) ||
+      node.class_type.toLowerCase().includes("video")
+    )
+      outKind = "video";
+    else if (
+      canon === "image" ||
+      IMAGE_OUT.has(node.class_type) ||
+      node.class_type.toLowerCase().includes("image")
+    )
+      outKind = "image";
+    results.push({
+      nodeId,
+      label: label || node.class_type,
+      role: canon,
+      kind: outKind,
+    });
+  }
+  return results;
 }

calliope-web/src/lib/comfy/promptInput.ts

@@ -1,51 +1,55 @@
-import type { ComfyDynamicInput } from './types';
-import { normalizeInputRole } from './parser';
+import type { ComfyDynamicInput } from "./types";
+import { normalizeInputRole } from "./parser";
 
-const PROMPT_ROLES = new Set(['prompt', 'positive']);
+const PROMPT_ROLES = new Set(["prompt", "positive"]);
 
 function roleOf(inp: ComfyDynamicInput): string | null {
-	return normalizeInputRole(inp.role ?? null);
+  return normalizeInputRole(inp.role ?? null);
 }
 
 /** Positive prompt input — prefers (Input:prompt), legacy label fallback. */
 export function isPromptLikeInput(inp: ComfyDynamicInput): boolean {
-	const role = roleOf(inp);
-	if (role && PROMPT_ROLES.has(role)) return true;
-	if (role) return false; // other roles are never "the" prompt
-	if (inp.kind !== 'text' && inp.kind !== 'textarea') return false;
-	const label = (inp.label || '').toLowerCase();
-	if (label.includes('negative')) return false;
-	return (
-		label.includes('prompt') ||
-		label.includes('positive') ||
-		label.includes('text') ||
-		inp.kind === 'textarea'
-	);
+  const role = roleOf(inp);
+  if (role && PROMPT_ROLES.has(role)) return true;
+  if (role) return false; // other roles are never "the" prompt
+  if (inp.kind !== "text" && inp.kind !== "textarea") return false;
+  const label = (inp.label || "").toLowerCase();
+  if (label.includes("negative")) return false;
+  return (
+    label.includes("prompt") ||
+    label.includes("positive") ||
+    label.includes("text") ||
+    inp.kind === "textarea"
+  );
 }
 
 /** Drop prompt-role fields from shared workflow forms (entity Image prompt owns those). */
-export function withoutPromptInputs(inputs: ComfyDynamicInput[] | undefined | null): ComfyDynamicInput[] {
-	if (!inputs?.length) return [];
-	return inputs.filter((inp) => !isPromptLikeInput(inp));
+export function withoutPromptInputs(
+  inputs: ComfyDynamicInput[] | undefined | null,
+): ComfyDynamicInput[] {
+  if (!inputs?.length) return [];
+  return inputs.filter((inp) => !isPromptLikeInput(inp));
 }
 
 /** True if this workflow schema has a prompt-role (or legacy prompt-like) (Input). */
-export function workflowHasPromptInput(inputs: ComfyDynamicInput[] | undefined | null): boolean {
-	if (!inputs?.length) return false;
-	return inputs.some(isPromptLikeInput);
+export function workflowHasPromptInput(
+  inputs: ComfyDynamicInput[] | undefined | null,
+): boolean {
+  if (!inputs?.length) return false;
+  return inputs.some(isPromptLikeInput);
 }
 
 /** Strip blank strings so empty fields cannot wipe smart-fill. */
 export function compactInputValues(
-	values: Record<string, unknown> | undefined | null,
+  values: Record<string, unknown> | undefined | null,
 ): Record<string, unknown> {
-	if (!values) return {};
-	const out: Record<string, unknown> = {};
-	for (const [k, v] of Object.entries(values)) {
-		if (v === null || v === undefined) continue;
-		if (typeof v === 'string' && !v.trim()) continue;
-		if (Array.isArray(v) && !v.length) continue;
-		out[k] = v;
-	}
-	return out;
+  if (!values) return {};
+  const out: Record<string, unknown> = {};
+  for (const [k, v] of Object.entries(values)) {
+    if (v === null || v === undefined) continue;
+    if (typeof v === "string" && !v.trim()) continue;
+    if (Array.isArray(v) && !v.length) continue;
+    out[k] = v;
+  }
+  return out;
 }

calliope-web/src/lib/comfy/resolution.ts

@@ -3,39 +3,42 @@
  * ratios and rounding, so the size shown is the size ComfyUI renders.
  */
 const RATIOS: Record<string, [number, number]> = {
-	'1:1 (Square)': [1, 1],
-	'2:3 (Portrait Photo)': [2, 3],
-	'3:2 (Photo)': [3, 2],
-	'3:4 (Portrait Standard)': [3, 4],
-	'4:3 (Standard)': [4, 3],
-	'9:16 (Portrait Widescreen)': [9, 16],
-	'16:9 (Widescreen)': [16, 9],
-	'21:9 (Ultrawide)': [21, 9],
+  "1:1 (Square)": [1, 1],
+  "2:3 (Portrait Photo)": [2, 3],
+  "3:2 (Photo)": [3, 2],
+  "3:4 (Portrait Standard)": [3, 4],
+  "4:3 (Standard)": [4, 3],
+  "9:16 (Portrait Widescreen)": [9, 16],
+  "16:9 (Widescreen)": [16, 9],
+  "21:9 (Ultrawide)": [21, 9],
 };
 
 /** Python's round(): halves go to the even neighbour. */
 function roundHalfEven(x: number): number {
-	const f = Math.floor(x);
-	const diff = x - f;
-	if (diff > 0.5) return f + 1;
-	if (diff < 0.5) return f;
-	return f % 2 === 0 ? f : f + 1;
+  const f = Math.floor(x);
+  const diff = x - f;
+  if (diff > 0.5) return f + 1;
+  if (diff < 0.5) return f;
+  return f % 2 === 0 ? f : f + 1;
 }
 
 export function resolutionSelectorSize(
-	aspectRatio: string,
-	megapixels: number,
-	multiple: number,
+  aspectRatio: string,
+  megapixels: number,
+  multiple: number,
 ): { width: number; height: number } | null {
-	const ratio = RATIOS[aspectRatio];
-	if (!ratio || !Number.isFinite(megapixels) || megapixels <= 0) return null;
-	const [w, h] = ratio;
-	const m = Math.max(1, Math.floor(multiple) || 8);
-	const scale = Math.sqrt((megapixels * 1024 * 1024) / (w * h));
-	return { width: roundHalfEven((w * scale) / m) * m, height: roundHalfEven((h * scale) / m) * m };
+  const ratio = RATIOS[aspectRatio];
+  if (!ratio || !Number.isFinite(megapixels) || megapixels <= 0) return null;
+  const [w, h] = ratio;
+  const m = Math.max(1, Math.floor(multiple) || 8);
+  const scale = Math.sqrt((megapixels * 1024 * 1024) / (w * h));
+  return {
+    width: roundHalfEven((w * scale) / m) * m,
+    height: roundHalfEven((h * scale) / m) * m,
+  };
 }
 
 /** "16:9 (Widescreen)" → "16:9". */
 export function ratioShort(option: string): string {
-	return option.split(' ')[0] ?? option;
+  return option.split(" ")[0] ?? option;
 }

calliope-web/src/lib/comfy/types.ts

@@ -1,253 +1,384 @@
 export type ComfyInputKind =
-	| 'text'
-	| 'textarea'
-	| 'number'
-	| 'select'
-	| 'image'
-	| 'image_url'
-	| 'audio'
-	| 'video'
-	/** Ordered list of images for one Autogrow input (e.g. H3 ref_images, min…max). */
-	| 'image_list'
-	/** Ordered lists of videos / audios for Autogrow inputs (HEL-643). */
-	| 'video_list'
-	| 'audio_list';
-export type ComfyOutputKind = 'image' | 'video' | 'other';
+  | "text"
+  | "textarea"
+  | "number"
+  | "select"
+  | "image"
+  | "image_url"
+  | "audio"
+  | "video"
+  /** Ordered list of images for one Autogrow input (e.g. H3 ref_images, min…max). */
+  | "image_list"
+  /** Ordered lists of videos / audios for Autogrow inputs (HEL-643). */
+  | "video_list"
+  | "audio_list";
+export type ComfyOutputKind = "image" | "video" | "other";
 
 /** Structural finding on an imported workflow; `error` blocks generation. */
 export interface WorkflowWarning {
-	level: 'error' | 'warning';
-	code: string;
-	node_id: string;
-	message: string;
+  level: "error" | "warning";
+  code: string;
+  node_id: string;
+  message: string;
 }
 
 export interface ComfyDynamicInput {
-	nodeId: string;
-	label: string;
-	/** Role from title tag, e.g. (Input:prompt) → "prompt". Null for plain (Input). */
-	role?: string | null;
-	kind: ComfyInputKind;
-	defaultValue?: string | number;
-	required: boolean;
-	/** Inferred from node classes/wiring — the workflow carries no (Input) tags. */
-	auto?: boolean;
-	/** ComfyUI widget limits (number kind). */
-	min?: number;
-	max?: number;
-	step?: number;
-	integer?: boolean;
-	/** Allowed values (select kind). */
-	options?: string[];
-	/** On a ResolutionSelector aspect_ratio entry: its megapixels key and rounding multiple. */
-	resolution?: { megapixels: string; multiple: number };
-	/** Official usage-limits hint key for known media groups (HEL-643, e.g. 'minimax_h3_ref2va'). */
-	media_hint?: string;
+  nodeId: string;
+  label: string;
+  /** Role from title tag, e.g. (Input:prompt) → "prompt". Null for plain (Input). */
+  role?: string | null;
+  kind: ComfyInputKind;
+  defaultValue?: string | number;
+  required: boolean;
+  /** Inferred from node classes/wiring — the workflow carries no (Input) tags. */
+  auto?: boolean;
+  /** ComfyUI widget limits (number kind). */
+  min?: number;
+  max?: number;
+  step?: number;
+  integer?: boolean;
+  /** Allowed values (select kind). */
+  options?: string[];
+  /** On a ResolutionSelector aspect_ratio entry: its megapixels key and rounding multiple. */
+  resolution?: { megapixels: string; multiple: number };
+  /** Official usage-limits hint key for known media groups (HEL-643, e.g. 'minimax_h3_ref2va'). */
+  media_hint?: string;
 }
 
 export interface ComfyDynamicOutput {
-	nodeId: string;
-	label: string;
-	/** Role from title tag, e.g. (Output:image). */
-	role?: string | null;
-	/** Null while an unknown custom node awaits the user's media-type pick. */
-	kind: ComfyOutputKind | null;
-	/** Untagged detection: node class + which rule typed it. */
-	class_type?: string;
-	evidence?: 'registry' | 'class_name_match' | 'unknown_node';
-	/** Form default for unknown candidates — never auto-applied. */
-	suggested_kind?: 'image' | 'video' | null;
+  nodeId: string;
+  label: string;
+  /** Role from title tag, e.g. (Output:image). */
+  role?: string | null;
+  /** Null while an unknown custom node awaits the user's media-type pick. */
+  kind: ComfyOutputKind | null;
+  /** Untagged detection: node class + which rule typed it. */
+  class_type?: string;
+  evidence?: "registry" | "class_name_match" | "unknown_node";
+  /** Form default for unknown candidates — never auto-applied. */
+  suggested_kind?: "image" | "video" | null;
 }
 
 /** One entry of a workflow's confirmed output mapping (HEL-638). */
 export interface WorkflowOutputMapEntry {
-	nodeId: string;
-	kind: 'image' | 'video';
-	label?: string;
-	class_type?: string;
+  nodeId: string;
+  kind: "image" | "video";
+  label?: string;
+  class_type?: string;
 }
 
 /** The five workflow usages the studio distinguishes (HEL-636). */
 export type WorkflowUsage =
-	| 'text2image'
-	| 'image2image'
-	| 'text2video'
-	| 'image2video'
-	| 'ref2video';
+  "text2image" | "image2image" | "text2video" | "image2video" | "ref2video";
 
 export const WORKFLOW_USAGES: WorkflowUsage[] = [
-	'text2image',
-	'image2image',
-	'text2video',
-	'image2video',
-	'ref2video',
+  "text2image",
+  "image2image",
+  "text2video",
+  "image2video",
+  "ref2video",
 ];
 
 /** Which usages each generate page serves. */
-export const USAGE_BY_KIND: Record<'image' | 'video', WorkflowUsage[]> = {
-	image: ['text2image', 'image2image'],
-	video: ['text2video', 'image2video', 'ref2video'],
+export const USAGE_BY_KIND: Record<"image" | "video", WorkflowUsage[]> = {
+  image: ["text2image", "image2image"],
+  video: ["text2video", "image2video", "ref2video"],
 };
 
 /** One L2 connection-check finding against a live ComfyUI (HEL-643). */
 export interface PreflightFinding {
-	level: 'error' | 'warn' | 'info' | 'ok';
-	code: string;
-	node_id?: string;
-	node_title?: string | null;
-	message: string;
-	hint?: string | null;
+  level: "error" | "warn" | "info" | "ok";
+  code: string;
+  node_id?: string;
+  node_title?: string | null;
+  message: string;
+  hint?: string | null;
 }
 
 /** Result of checking a workflow against a target connection's /object_info. */
 export interface WorkflowConnectionCheck {
-	endpoint_id: string | null;
-	endpoint_name: string | null;
-	base_url?: string | null;
-	/** False when any error-level finding exists (or the server was unreachable). */
-	ok: boolean;
-	/** False → 无法核查 (server down): honest, non-blocking. */
-	reachable: boolean;
-	findings: PreflightFinding[];
-	message?: string | null;
+  endpoint_id: string | null;
+  endpoint_name: string | null;
+  base_url?: string | null;
+  /** False when any error-level finding exists (or the server was unreachable). */
+  ok: boolean;
+  /** False → 无法核查 (server down): honest, non-blocking. */
+  reachable: boolean;
+  findings: PreflightFinding[];
+  message?: string | null;
 }
 
 /** Slim live record of a workflow's latest test run (HEL-643). */
 export interface WorkflowLastTest {
-	id: number;
-	status: string;
-	phase: string | null;
-	error: string | null;
-	created_at: string;
-	completed_at: string | null;
-	output_count: number;
+  id: number;
+  status: string;
+  phase: string | null;
+  error: string | null;
+  created_at: string;
+  completed_at: string | null;
+  output_count: number;
 }
 
 /** Result of POST /api/workflows/analyze (import confirm step 1). */
 export interface WorkflowAnalyzeResult {
-	inputs: ComfyDynamicInput[];
-	outputs: ComfyDynamicOutput[];
-	suggested_profile?: string;
-	warnings?: WorkflowWarning[];
-	usage: WorkflowUsage | null;
-	usage_ambiguous: boolean;
-	needs_mapping: boolean;
-	usage_problem: string | null;
-	usage_evidence: {
-		outputs: ComfyDynamicOutput[];
-		image_slots: Array<{ nodeId: string; label: string; kind: string; role: string | null }>;
-		video_slots: Array<{ nodeId: string; label: string; kind: string; role: string | null }>;
-		summary: string[];
-	};
-	usable_usage: WorkflowUsage[];
-	/** Present when analyze was called with a target endpoint (HEL-643 L2). */
-	connection_check?: WorkflowConnectionCheck;
+  inputs: ComfyDynamicInput[];
+  outputs: ComfyDynamicOutput[];
+  suggested_profile?: string;
+  warnings?: WorkflowWarning[];
+  usage: WorkflowUsage | null;
+  usage_ambiguous: boolean;
+  needs_mapping: boolean;
+  usage_problem: string | null;
+  usage_evidence: {
+    outputs: ComfyDynamicOutput[];
+    image_slots: Array<{
+      nodeId: string;
+      label: string;
+      kind: string;
+      role: string | null;
+    }>;
+    video_slots: Array<{
+      nodeId: string;
+      label: string;
+      kind: string;
+      role: string | null;
+    }>;
+    summary: string[];
+  };
+  usable_usage: WorkflowUsage[];
+  /** Present when analyze was called with a target endpoint (HEL-643 L2). */
+  connection_check?: WorkflowConnectionCheck;
 }
 
 export interface WorkflowNode {
-	class_type: string;
-	inputs: Record<string, unknown>;
-	_meta?: { title?: string };
+  class_type: string;
+  inputs: Record<string, unknown>;
+  _meta?: { title?: string };
 }
 
 export interface Workflow {
-	id: number;
-	name: string;
-	kind: 'image' | 'video';
-	/** Five-way usage (HEL-636); null = pending human confirmation. */
-	usage?: WorkflowUsage | null;
-	usage_source?: 'auto' | 'user' | null;
-	workflow_json: Record<string, WorkflowNode>;
-	input_schema: ComfyDynamicInput[];
-	output_schema: ComfyDynamicOutput[];
-	description: string | null;
-	prompt_profile: string;
-	is_enabled: boolean;
-	/** Bound ComfyUI connection id (settings.comfyui_endpoints); null = active. */
-	endpoint_id?: string | null;
-	warnings?: WorkflowWarning[];
-	/** HEL-638: confirmed output mapping ({nodeId, kind}); null/empty = pending. */
-	output_map?: WorkflowOutputMapEntry[] | null;
-	output_map_source?: 'auto' | 'user' | null;
-	/** True when the graph has unknown output nodes needing designation. */
-	needs_mapping?: boolean;
-	/** Latest test-run record, queried live (HEL-643); null = never tested. */
-	last_test?: WorkflowLastTest | null;
+  id: number;
+  name: string;
+  kind: "image" | "video";
+  /** Five-way usage (HEL-636); null = pending human confirmation. */
+  usage?: WorkflowUsage | null;
+  usage_source?: "auto" | "user" | null;
+  workflow_json: Record<string, WorkflowNode>;
+  input_schema: ComfyDynamicInput[];
+  output_schema: ComfyDynamicOutput[];
+  description: string | null;
+  prompt_profile: string;
+  is_enabled: boolean;
+  /** Bound ComfyUI connection id (settings.comfyui_endpoints); null = active. */
+  endpoint_id?: string | null;
+  warnings?: WorkflowWarning[];
+  /** HEL-638: confirmed output mapping ({nodeId, kind}); null/empty = pending. */
+  output_map?: WorkflowOutputMapEntry[] | null;
+  output_map_source?: "auto" | "user" | null;
+  /** True when the graph has unknown output nodes needing designation. */
+  needs_mapping?: boolean;
+  /** Latest test-run record, queried live (HEL-643); null = never tested. */
+  last_test?: WorkflowLastTest | null;
+}
+
+/**
+ * HEL-682: metadata-only row (GET /api/workflows?view=meta) — the whole
+ * point is browsing 150+ workflows without downloading workflow_json.
+ */
+export interface WorkflowMediaIO {
+  in: string[];
+  out: string[];
+}
+
+export interface WorkflowMeta {
+  id: number;
+  name: string;
+  kind: "image" | "video";
+  usage: WorkflowUsage | null;
+  usage_source: "auto" | "user" | null;
+  is_enabled: boolean;
+  category: string | null;
+  model_family: string | null;
+  media_io: WorkflowMediaIO;
+  tags: string[];
+  favorite: boolean;
+  last_used_at: string | null;
+  description: string | null;
+  source: string | null;
+  source_path: string | null;
+  prompt_profile: string;
+  created_at: string;
+  endpoint_id: string | null;
+  output_map_source: "auto" | "user" | null;
+  /** Cheap pending check: usage or output mapping not settled yet. */
+  needs_mapping: boolean;
+}
+
+/** One UI-format file submitted to the batch convert/import pipeline. */
+export interface WorkflowUIFileInput {
+  name?: string;
+  source_path?: string;
+  workflow_json: Record<string, unknown>;
+  usage?: WorkflowUsage;
+  description?: string;
+  tags?: string[];
+}
+
+export interface WorkflowConvertIssue {
+  node_id: string;
+  code: string;
+  level: "error" | "warning";
+  message: string;
+}
+
+export interface WorkflowConvertSuggested {
+  kind: "image" | "video";
+  usage: WorkflowUsage | null;
+  usage_ambiguous: boolean;
+  category: string | null;
+  category_label: string | null;
+  model_family: string | null;
+  media_in: string[];
+  media_out: string[];
+  description: string | null;
+}
+
+export interface WorkflowPreflightFinding {
+  level: string;
+  code: string;
+  node_id?: string;
+  node_title?: string;
+  message: string;
+  hint?: string;
+}
+
+export interface WorkflowConvertFileReport {
+  name: string;
+  source_path: string | null;
+  status: "ok" | "warn" | "fail";
+  needs_confirmation: boolean;
+  issues: WorkflowConvertIssue[];
+  importable: boolean;
+  skip_reason?: string | null;
+  suggested?: WorkflowConvertSuggested;
+  preflight?: {
+    endpoint_id: string | null;
+    ok: boolean;
+    findings: WorkflowPreflightFinding[];
+  };
+}
+
+/** Dry-run report (POST /convert, POST /import-scan with dry_run). */
+export interface WorkflowConvertReport {
+  total: number;
+  ok: number;
+  warn: number;
+  fail: number;
+  needs_confirmation: number;
+  importable: number;
+  files: WorkflowConvertFileReport[];
+}
+
+export interface WorkflowImportFileReport extends WorkflowConvertFileReport {
+  result?: "imported" | "skipped" | "failed";
+  id?: number;
+  existing_id?: number;
+}
+
+/** Commit result (POST /import-batch, POST /import-scan without dry_run). */
+export interface WorkflowImportResult {
+  total: number;
+  imported: number;
+  skipped: number;
+  imported_ids: number[];
+  skipped_files: {
+    name: string;
+    source_path: string | null;
+    reason: string | null;
+  }[];
+  files: WorkflowImportFileReport[];
 }
 
 export interface Job {
-	id: number;
-	project_id: number;
-	scene_id: number | null;
-	/** Render unit — video jobs are clip jobs (scene_id stays for grouping). */
-	clip_id: number | null;
-	kind: string;
-	workflow_id: number | null;
-	status: string;
-	payload: Record<string, unknown>;
-	output_paths: string[];
-	error: string | null;
-	created_at: string;
-	started_at: string | null;
-	completed_at: string | null;
-	retry_count: number;
-	/** Prompt id ComfyUI accepted this job under (null until /prompt succeeds). */
-	comfy_prompt_id?: string | null;
-	/** connecting · comfy_queued · comfy_running · saving · finished · dry_run */
-	phase?: string | null;
-	/** 'user' (normal generation) or 'workflow_test' (HEL-643 test run). */
-	origin?: string;
+  id: number;
+  project_id: number;
+  scene_id: number | null;
+  /** Render unit — video jobs are clip jobs (scene_id stays for grouping). */
+  clip_id: number | null;
+  kind: string;
+  workflow_id: number | null;
+  status: string;
+  payload: Record<string, unknown>;
+  output_paths: string[];
+  error: string | null;
+  created_at: string;
+  started_at: string | null;
+  completed_at: string | null;
+  retry_count: number;
+  /** Prompt id ComfyUI accepted this job under (null until /prompt succeeds). */
+  comfy_prompt_id?: string | null;
+  /** connecting · comfy_queued · comfy_running · saving · finished · dry_run */
+  phase?: string | null;
+  /** 'user' (normal generation) or 'workflow_test' (HEL-643 test run). */
+  origin?: string;
+  /** HEL-684: present when this take has been flowed back to its
+   * workbench source row (link job id on the source project). */
+  workbench_attach?: {
+    job_id: number;
+    stage: string;
+    target_id: string;
+  };
 }
 
 export interface SceneVideoSettings {
-	input_values?: Record<string, string | number>;
-	/** 'auto' | 'upload' | target scene id as string. */
-	clip_source?: string;
-	form_workflow_id?: number;
-	prompt_draft?: string;
-	prompt_draft_meta?: { based_on?: string; saved_at?: string };
-	[key: string]: unknown;
+  input_values?: Record<string, string | number>;
+  /** 'auto' | 'upload' | target scene id as string. */
+  clip_source?: string;
+  form_workflow_id?: number;
+  prompt_draft?: string;
+  prompt_draft_meta?: { based_on?: string; saved_at?: string };
+  [key: string]: unknown;
 }
 
 export interface Scene {
-	id: number;
-	project_id: number;
-	order_index: number;
-	heading: string | null;
-	action: string | null;
-	dialog: string | null;
-	duration_sec: number | null;
-	workflow_id: number | null;
-	env_image_path: string | null;
-	location_id: number | null;
-	video_path: string | null;
-	chain_from_prev?: number | boolean | null;
-	video_settings?: SceneVideoSettings | null;
-	character_ids: number[];
-	characters: Array<{
-		id: number;
-		name: string;
-		role: string | null;
-		portrait_path: string | null;
-		sheet_path: string | null;
-	}>;
-	clips: Clip[];
+  id: number;
+  project_id: number;
+  order_index: number;
+  heading: string | null;
+  action: string | null;
+  dialog: string | null;
+  duration_sec: number | null;
+  workflow_id: number | null;
+  env_image_path: string | null;
+  location_id: number | null;
+  video_path: string | null;
+  chain_from_prev?: number | boolean | null;
+  video_settings?: SceneVideoSettings | null;
+  character_ids: number[];
+  characters: Array<{
+    id: number;
+    name: string;
+    role: string | null;
+    portrait_path: string | null;
+    sheet_path: string | null;
+  }>;
+  clips: Clip[];
 }
 
 /** Shot unit: one scene expands into 1+ clips; each renders one ~5-10s video. */
 export interface Clip {
-	id: number;
-	scene_id: number;
-	project_id: number;
-	order_index: number;
-	description: string | null;
-	shot_size: string | null;
-	dialog_lines_covered: number[] | null;
-	duration_sec: number | null;
-	workflow_id: number | null;
-	clip_path: string | null;
-	chain_from_prev?: number | boolean | null;
-	video_settings?: SceneVideoSettings | null;
-	/** '#3.2' — scene 3, clip 2 (display label). */
-	label?: string;
+  id: number;
+  scene_id: number;
+  project_id: number;
+  order_index: number;
+  description: string | null;
+  shot_size: string | null;
+  dialog_lines_covered: number[] | null;
+  duration_sec: number | null;
+  workflow_id: number | null;
+  clip_path: string | null;
+  chain_from_prev?: number | boolean | null;
+  video_settings?: SceneVideoSettings | null;
+  /** '#3.2' — scene 3, clip 2 (display label). */
+  label?: string;
 }

calliope-web/src/lib/comfy/useUpload.svelte.ts

@@ -8,92 +8,96 @@
  *   - upload progress per nodeId
  *   - metadata (name, kind) for uploaded files
  */
-import { playgroundApi, type UploadKind } from '$lib/api';
-	import { toast } from '$lib/toast';
-	import { t } from '$lib/i18n.svelte';
+import { playgroundApi, type UploadKind } from "$lib/api";
+import { toast } from "$lib/toast";
+import { t } from "$lib/i18n.svelte";
 
 export interface UploadState {
-	/** nodeId → uploading filename (present while upload is in-flight) */
-	uploading: Record<string, string>;
-	/** path → { name, kind } for previously uploaded files */
-	uploadedMeta: Record<string, { name: string; kind: UploadKind }>;
+  /** nodeId → uploading filename (present while upload is in-flight) */
+  uploading: Record<string, string>;
+  /** path → { name, kind } for previously uploaded files */
+  uploadedMeta: Record<string, { name: string; kind: UploadKind }>;
 }
 
 export function createUploadManager() {
-	let uploading = $state<Record<string, string>>({});
-	let uploadedMeta = $state<Record<string, { name: string; kind: UploadKind }>>({});
+  let uploading = $state<Record<string, string>>({});
+  let uploadedMeta = $state<Record<string, { name: string; kind: UploadKind }>>(
+    {},
+  );
 
-	return {
-		get uploading() {
-			return uploading;
-		},
-		get uploadedMeta() {
-			return uploadedMeta;
-		},
+  return {
+    get uploading() {
+      return uploading;
+    },
+    get uploadedMeta() {
+      return uploadedMeta;
+    },
 
-		isUploading(nodeId: string): boolean {
-			return !!uploading[nodeId];
-		},
+    isUploading(nodeId: string): boolean {
+      return !!uploading[nodeId];
+    },
 
-		uploadMetaFor(path: string): { name: string; kind: UploadKind } {
-			const meta = uploadedMeta[path];
-			if (meta) return meta;
-			const base = path.split(/[/\\]/).pop() ?? path;
-			const ext = base.slice(base.lastIndexOf('.')).toLowerCase();
-			if (['.mp4', '.webm', '.mov', '.mkv'].includes(ext))
-				return { name: base, kind: 'video' };
-			if (['.mp3', '.wav', '.flac', '.ogg', '.m4a'].includes(ext))
-				return { name: base, kind: 'audio' };
-			return { name: base, kind: 'image' };
-		},
+    uploadMetaFor(path: string): { name: string; kind: UploadKind } {
+      const meta = uploadedMeta[path];
+      if (meta) return meta;
+      const base = path.split(/[/\\]/).pop() ?? path;
+      const ext = base.slice(base.lastIndexOf(".")).toLowerCase();
+      if ([".mp4", ".webm", ".mov", ".mkv"].includes(ext))
+        return { name: base, kind: "video" };
+      if ([".mp3", ".wav", ".flac", ".ogg", ".m4a"].includes(ext))
+        return { name: base, kind: "audio" };
+      return { name: base, kind: "image" };
+    },
 
-		/**
-		 * Upload a file and return the server path.
-		 * Manages uploading state and metadata internally.
-		 * Throws on failure (caller handles toast if needed).
-		 */
-		async upload(nodeId: string, file: File): Promise<string> {
-			uploading = { ...uploading, [nodeId]: file.name };
-			try {
-				const res = await playgroundApi.upload(file);
-				uploadedMeta = {
-					...uploadedMeta,
-					[res.path]: { name: res.name, kind: res.kind },
-				};
-				return res.path;
-			} finally {
-				const next = { ...uploading };
-				delete next[nodeId];
-				uploading = next;
-			}
-		},
+    /**
+     * Upload a file and return the server path.
+     * Manages uploading state and metadata internally.
+     * Throws on failure (caller handles toast if needed).
+     */
+    async upload(nodeId: string, file: File): Promise<string> {
+      uploading = { ...uploading, [nodeId]: file.name };
+      try {
+        const res = await playgroundApi.upload(file);
+        uploadedMeta = {
+          ...uploadedMeta,
+          [res.path]: { name: res.name, kind: res.kind },
+        };
+        return res.path;
+      } finally {
+        const next = { ...uploading };
+        delete next[nodeId];
+        uploading = next;
+      }
+    },
 
-		/**
-		 * Convenience: upload + toast on error, return path or null.
-		 */
-		async uploadSafe(nodeId: string, file: File): Promise<string | null> {
-			try {
-				return await this.upload(nodeId, file);
-			} catch (err) {
-				toast.error(err instanceof Error ? err.message : t('toast.uploadFailed'));
-				return null;
-			}
-		},
-	};
+    /**
+     * Convenience: upload + toast on error, return path or null.
+     */
+    async uploadSafe(nodeId: string, file: File): Promise<string | null> {
+      try {
+        return await this.upload(nodeId, file);
+      } catch (err) {
+        toast.error(
+          err instanceof Error ? err.message : t("toast.uploadFailed"),
+        );
+        return null;
+      }
+    },
+  };
 }
 
 export type UploadManager = ReturnType<typeof createUploadManager>;
 
 export function truncateMiddle(name: string, max = 32): string {
-	if (name.length <= max) return name;
-	const head = Math.ceil((max - 1) / 2);
-	const tail = Math.floor((max - 1) / 2);
-	return `${name.slice(0, head)}…${name.slice(name.length - tail)}`;
+  if (name.length <= max) return name;
+  const head = Math.ceil((max - 1) / 2);
+  const tail = Math.floor((max - 1) / 2);
+  return `${name.slice(0, head)}…${name.slice(name.length - tail)}`;
 }
 
 export function acceptForKind(kind: string): string {
-	if (kind === 'audio') return 'audio/*';
-	if (kind === 'video') return 'video/*,.mp4,.webm,.mov,.mkv';
-	if (kind === 'document') return '.txt,.md,.docx';
-	return 'image/*';
+  if (kind === "audio") return "audio/*";
+  if (kind === "video") return "video/*,.mp4,.webm,.mov,.mkv";
+  if (kind === "document") return ".txt,.md,.docx";
+  return "image/*";
 }

calliope-web/src/lib/components/ActivityPanel.svelte

@@ -1,614 +0,0 @@
-<script lang="ts">
-	import { createQuery } from '@tanstack/svelte-query';
-	import { toStore } from 'svelte/store';
-	import { jobsApi, type Job } from '$lib/api';
-	import type { CalliopeEvent, EventConnectionState } from '$lib/events';
-	import { t } from '$lib/i18n.svelte';
-	import JobRow from './JobRow.svelte';
-	import Button from './ui/Button.svelte';
-	import Icon from './ui/Icon.svelte';
-
-	interface Props {
-		logs: CalliopeEvent[];
-		projectId: number;
-		/** Real SSE connection state from events.ts — drives the live pip. */
-		connState: EventConnectionState;
-		collapsed?: boolean;
-		onToggle?: () => void;
-	}
-
-	let { logs, projectId, connState, collapsed = false, onToggle }: Props = $props();
-
-	type Tone = 'info' | 'ok' | 'warn' | 'err' | 'work';
-
-	type LogEntry = {
-		key: string;
-		ts: string;
-		title: string;
-		detail: string;
-		tone: Tone;
-		type: string;
-	};
-
-	function str(v: unknown): string {
-		if (v == null) return '';
-		if (typeof v === 'string') return v;
-		if (typeof v === 'number' || typeof v === 'boolean') return String(v);
-		return '';
-	}
-
-	function formatEvent(ev: CalliopeEvent, index: number): LogEntry | null {
-		// Poll spam — progress lives in the jobProgress store, not the log
-		if (ev.type === 'job.progress') return null;
-
-		const d = ev.data ?? {};
-		const msg = str(d.message).trim();
-		const kind = str(d.kind);
-		const jobId = d.job_id != null ? `#${d.job_id}` : '';
-		const err = str(d.error).trim();
-		const paths = Array.isArray(d.paths) ? d.paths.length : 0;
-		const outputs = Array.isArray(d.outputs) ? d.outputs.length : 0;
-		const time = ev.ts?.includes('T') ? ev.ts.slice(11, 19) : ev.ts?.slice(0, 8) || '';
-
-		let title = ev.type;
-		let detail = msg;
-		let tone: Tone = 'info';
-
-		switch (ev.type) {
-			case 'agent.thinking':
-				title = t('activity.agentWorking');
-				detail = msg || t('activity.working');
-				tone = 'work';
-				break;
-			case 'story.ready':
-				title = t('activity.storyReady');
-				detail = msg || t('activity.storylineDrafted');
-				tone = 'ok';
-				break;
-			case 'job.created':
-				title = t('activity.queued');
-				detail = msg || [kind, jobId].filter(Boolean).join(' ');
-				tone = 'info';
-				break;
-			case 'job.started':
-				title = t('activity.running');
-				detail = msg || [kind, jobId].filter(Boolean).join(' ');
-				tone = 'work';
-				break;
-			case 'job.completed':
-				title = t('activity.finished');
-				detail =
-					msg ||
-					[kind, jobId, outputs ? t('activity.files', { count: outputs }) : '']
-						.filter(Boolean)
-						.join(' · ');
-				tone = 'ok';
-				break;
-			case 'job.failed':
-				title = t('activity.failed');
-				detail = err || msg || [kind, jobId].filter(Boolean).join(' ');
-				tone = 'err';
-				break;
-			case 'asset.ready':
-				title = t('activity.assetReady');
-				detail = msg || (paths ? t('activity.filesSaved', { count: paths }) : t('activity.outputSaved'));
-				tone = 'ok';
-				break;
-			case 'job.deleted':
-				title = t('activity.removed');
-				detail = msg || jobId || t('activity.jobDeleted');
-				tone = 'warn';
-				break;
-			default:
-				title = ev.type.replace(/\./g, ' · ');
-				detail = msg || err || kind;
-				tone = 'info';
-		}
-
-		return {
-			key: `${ev.ts}-${ev.type}-${index}`,
-			ts: time,
-			title,
-			detail,
-			tone,
-			type: ev.type,
-		};
-	}
-
-	const entries = $derived.by(() => {
-		const raw = logs
-			.slice(-120)
-			.map((ev, i) => formatEvent(ev, i))
-			.filter((e): e is LogEntry => e != null);
-
-		// Collapse consecutive identical agent lines
-		const collapsed: LogEntry[] = [];
-		for (const e of raw) {
-			const prev = collapsed[collapsed.length - 1];
-			if (prev && prev.type === e.type && prev.detail === e.detail) {
-				continue;
-			}
-			collapsed.push(e);
-		}
-		return collapsed.slice(-60).reverse();
-	});
-
-	// Same query key as QueueStage — refreshed by SSE invalidation from the
-	// project page (job.* events), not by polling.
-	const jobsQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['jobs', projectId],
-			queryFn: () => jobsApi.list(projectId),
-		})),
-	);
-
-	const allJobs = $derived(($jobsQuery.data ?? []) as Job[]);
-
-	function activeWeight(job: Job): number {
-		if (job.status === 'running') return 0;
-		if (job.status === 'pending') return 1;
-		return 2;
-	}
-
-	// Active jobs first, then most recent — capped so the log keeps room.
-	const queueRows = $derived(
-		[...allJobs].sort((a, b) => activeWeight(a) - activeWeight(b) || b.id - a.id).slice(0, 6),
-	);
-
-	const stats = $derived({
-		running: allJobs.filter((j) => j.status === 'running').length,
-		queued: allJobs.filter((j) => j.status === 'pending').length,
-		done: allJobs.filter((j) => j.status === 'done').length,
-		failed: allJobs.filter((j) => j.status === 'failed').length,
-	});
-	const busyCount = $derived(stats.running + stats.queued);
-
-	const connected = $derived(connState === 'open');
-</script>
-
-<aside class="activity" class:collapsed aria-label={t('activity.title')}>
-	{#if collapsed}
-		<button
-			type="button"
-			class="rail-toggle"
-			onclick={onToggle}
-			aria-expanded="false"
-			title={t('activity.show')}
-		>
-			<span class="pip rail-pip" class:live={connected} class:reconnecting={connState === 'reconnecting'} aria-hidden="true"></span>
-			{#if busyCount > 0}
-				<span class="rail-count" title={t('activity.busyCount', { count: busyCount })}>{busyCount}</span>
-			{/if}
-			<span class="rail-label">{t('activity.title')}</span>
-			<span class="rail-chevron" aria-hidden="true">‹</span>
-		</button>
-	{:else}
-		<header class="head">
-			<div class="head-title">
-				<span class="pip" class:live={connected} class:reconnecting={connState === 'reconnecting'} aria-hidden="true"></span>
-				<strong>{t('activity.title')}</strong>
-				{#if connState === 'reconnecting'}
-					<span class="conn-state warn">{t('activity.reconnecting')}</span>
-				{:else if connState === 'connecting'}
-					<span class="conn-state">{t('activity.connecting')}</span>
-				{/if}
-			</div>
-			<Button variant="ghost" size="sm" onclick={onToggle} title={t('activity.hide')}>
-				{t('activity.hide')} <Icon name="chevron-right" size={13} />
-			</Button>
-		</header>
-
-		<div class="body">
-			<section class="queue" aria-label={t('activity.queue')}>
-				<div class="section-head">
-					<p class="eyebrow">{t('activity.queue')}</p>
-				</div>
-				{#if queueRows.length === 0}
-					<p class="queue-empty">{t('activity.queueIdle')}</p>
-				{:else}
-					<div class="job-list">
-						{#each queueRows as job (job.id)}
-							<JobRow {job} />
-						{/each}
-					</div>
-				{/if}
-				<div class="stats-strip" aria-label={t('activity.queueStats')}>
-					<span><span class="sd sd-running" aria-hidden="true"></span>{stats.running} {t('activity.running').toLowerCase()}</span>
-					<span><span class="sd sd-queued" aria-hidden="true"></span>{stats.queued} {t('activity.queued').toLowerCase()}</span>
-					<span><span class="sd sd-done" aria-hidden="true"></span>{stats.done} {t('activity.done')}</span>
-					<span><span class="sd sd-failed" aria-hidden="true"></span>{stats.failed} {t('activity.failed').toLowerCase()}</span>
-				</div>
-			</section>
-
-			<section class="log-section" aria-label={t('activity.agentLog')}>
-				<p class="eyebrow">{t('activity.agentLog')}</p>
-				{#if entries.length === 0}
-					<div class="empty">
-						<p>{t('activity.quiet')}</p>
-						<p class="hint">{t('activity.quietHint')}</p>
-					</div>
-				{:else}
-					<ul class="log">
-						{#each entries as ev (ev.key)}
-							<li class="entry tone-{ev.tone}">
-								<span class="dot" aria-hidden="true"></span>
-								<div class="meta">
-									<div class="row">
-										<span class="title">{ev.title}</span>
-										<time class="ts" datetime={ev.ts}>{ev.ts}</time>
-									</div>
-									{#if ev.detail}
-										<p class="detail">{ev.detail}</p>
-									{/if}
-								</div>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			</section>
-		</div>
-	{/if}
-</aside>
-
-<style>
-	.activity {
-		--panel-w: 320px;
-		--rail-w: 44px;
-		width: var(--panel-w);
-		flex-shrink: 0;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		height: 100%;
-		border-left: 1px solid var(--border);
-		background:
-			linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 120px),
-			var(--bg-surface);
-		overflow: hidden;
-		transition: width 0.2s ease;
-	}
-
-	.activity.collapsed {
-		width: var(--rail-w);
-		background: var(--bg-surface);
-	}
-
-	.rail-toggle {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 12px;
-		width: 100%;
-		height: 100%;
-		margin: 0;
-		padding: 16px 0;
-		border: none;
-		background: transparent;
-		color: var(--text-secondary);
-		cursor: pointer;
-		overflow: hidden;
-	}
-
-	.rail-toggle:hover {
-		background: rgba(139, 92, 246, 0.08);
-		color: var(--text-primary);
-	}
-
-	.rail-toggle:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
-	}
-
-	.rail-label {
-		writing-mode: vertical-rl;
-		transform: rotate(180deg);
-		font-family: var(--font-display);
-		font-size: 12px;
-		font-weight: 600;
-		letter-spacing: 0.12em;
-		text-transform: uppercase;
-	}
-
-	.rail-chevron {
-		font-size: 18px;
-		line-height: 1;
-		color: var(--text-muted);
-	}
-
-	.rail-count {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		height: 20px;
-		padding: 0 5px;
-		border-radius: 999px;
-		background: var(--accent);
-		color: #fff;
-		font-family: var(--font-mono);
-		font-size: 11px;
-		font-weight: 700;
-	}
-
-	.pip {
-		width: 8px;
-		height: 8px;
-		border-radius: 50%;
-		background: var(--text-muted);
-		flex-shrink: 0;
-	}
-
-	.pip.live {
-		background: var(--accent);
-		box-shadow: 0 0 0 4px var(--accent-glow);
-		animation: live-pulse 1.6s ease-in-out infinite;
-	}
-
-	.pip.reconnecting {
-		background: var(--warning);
-		box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
-	}
-
-	@keyframes live-pulse {
-		0%,
-		100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.65;
-			transform: scale(0.92);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.activity {
-			transition: none;
-		}
-		.pip.live {
-			animation: none;
-		}
-	}
-
-	.head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		padding: 14px 14px 10px;
-		border-bottom: 1px solid var(--border);
-		flex-shrink: 0;
-	}
-
-	.head-title {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		min-width: 0;
-	}
-
-	.head-title strong {
-		font-family: var(--font-display);
-		font-size: 15px;
-		font-weight: 650;
-		letter-spacing: -0.02em;
-	}
-
-	.conn-state {
-		font-size: 11px;
-		color: var(--text-muted);
-		white-space: nowrap;
-	}
-
-	.conn-state.warn {
-		color: var(--warning);
-	}
-
-	.body {
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
-		padding: 12px 10px 16px;
-		overflow: hidden;
-	}
-
-	.queue {
-		flex-shrink: 0;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		margin-bottom: 14px;
-	}
-
-	.section-head {
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-		flex-shrink: 0;
-	}
-
-	.job-list {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		max-height: 216px;
-		overflow-y: auto;
-		padding-right: 4px;
-	}
-
-	.queue-empty {
-		margin: 0 6px 4px;
-		padding: 12px 14px;
-		border: 1px dashed var(--border);
-		border-radius: var(--radius-md);
-		background: rgba(0, 0, 0, 0.2);
-		font-size: 12px;
-		line-height: 1.45;
-		color: var(--text-muted);
-	}
-
-	.stats-strip {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 4px 12px;
-		margin: 10px 6px 0;
-		padding-top: 10px;
-		border-top: 1px solid var(--border);
-		font-family: var(--font-mono);
-		font-size: 10px;
-		color: var(--text-secondary);
-		flex-shrink: 0;
-	}
-
-	.stats-strip > span {
-		display: inline-flex;
-		align-items: center;
-		gap: 5px;
-		white-space: nowrap;
-	}
-
-	.sd {
-		width: 6px;
-		height: 6px;
-		border-radius: 50%;
-	}
-
-	.sd-running {
-		background: var(--info);
-	}
-	.sd-queued {
-		background: var(--text-muted);
-	}
-	.sd-done {
-		background: var(--success);
-	}
-	.sd-failed {
-		background: var(--error);
-	}
-
-	.log-section {
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.eyebrow {
-		margin: 0 6px 10px;
-		font-size: 11px;
-		font-weight: 600;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--text-muted);
-		flex-shrink: 0;
-	}
-
-	.empty {
-		margin: 8px 6px;
-		padding: 16px;
-		border: 1px dashed var(--border);
-		border-radius: var(--radius-md);
-		background: rgba(0, 0, 0, 0.2);
-	}
-
-	.empty p {
-		margin: 0;
-		font-size: 13px;
-		color: var(--text-secondary);
-	}
-
-	.empty .hint {
-		margin-top: 8px;
-		font-size: 12px;
-		color: var(--text-muted);
-		line-height: 1.45;
-	}
-
-	.log {
-		list-style: none;
-		margin: 0;
-		padding: 0 4px 8px 0;
-		overflow-y: auto;
-		overflow-x: hidden;
-		flex: 1;
-		min-height: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
-
-	.entry {
-		display: grid;
-		grid-template-columns: 14px 1fr;
-		gap: 8px;
-		padding: 8px 8px 8px 4px;
-		border-radius: var(--radius-sm);
-	}
-
-	.entry:hover {
-		background: rgba(255, 255, 255, 0.03);
-	}
-
-	.dot {
-		width: 8px;
-		height: 8px;
-		margin-top: 5px;
-		border-radius: 50%;
-		background: var(--text-muted);
-		justify-self: center;
-	}
-
-	.tone-ok .dot {
-		background: var(--success);
-	}
-	.tone-err .dot {
-		background: var(--error);
-	}
-	.tone-warn .dot {
-		background: var(--warning);
-	}
-	.tone-work .dot {
-		background: var(--accent);
-	}
-	.tone-info .dot {
-		background: var(--info);
-	}
-
-	.meta {
-		min-width: 0;
-	}
-
-	.row {
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-		gap: 8px;
-	}
-
-	.title {
-		font-size: 12px;
-		font-weight: 650;
-		color: var(--text-primary);
-	}
-
-	.ts {
-		font-family: var(--font-mono);
-		font-size: 10px;
-		color: var(--text-muted);
-		flex-shrink: 0;
-	}
-
-	.detail {
-		margin: 3px 0 0;
-		font-size: 12px;
-		line-height: 1.4;
-		color: var(--text-secondary);
-		word-break: break-word;
-	}
-
-	.tone-err .detail {
-		color: #fca5a5;
-	}
-</style>

calliope-web/src/lib/components/AppHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 	import { t } from '$lib/i18n.svelte';
 
@@ -15,8 +16,8 @@ interface Props {
 
 <header class="header">
 	<div class="header-left">
-		<a class="logo" href="/canvas" title="Calliope Lab">
-			Calliope <span>Lab</span>
+		<a class="logo" href={resolve('/')} title={t('shell.brand')}>
+			{t('shell.brand')}
 		</a>
 		{#if crumb}
 			<span class="crumb">{crumb}</span>
@@ -27,13 +28,13 @@ interface Props {
 			</div>
 		{/if}
 		<nav class="top-nav" aria-label={t('nav.primary')}>
-			<a class="nav-link" class:active={active === 'canvas'} href="/canvas">{t('nav.canvas')}</a>
-			<a class="nav-link" class:active={active === 'projects'} href="/projects">{t('nav.projects')}</a>
-			<a class="nav-link" class:active={active === 'build-scene'} href="/build-scene">{t('nav.buildScene')}</a>
-			<a class="nav-link" class:active={active === 'library'} href="/library">{t('nav.library')}</a>
-			<a class="nav-link" class:active={active === 'agents'} href="/agents">{t('nav.agents')}</a>
-			<a class="nav-link" class:active={active === 'models'} href="/models">{t('nav.models')}</a>
-			<a class="nav-link" class:active={active === 'settings'} href="/settings">{t('nav.settings')}</a>
+			<a class="nav-link" class:active={active === 'canvas'} href={resolve('/canvas')}>{t('nav.canvas')}</a>
+			<a class="nav-link" class:active={active === 'projects'} href={resolve('/')}>{t('nav.projects')}</a>
+			<a class="nav-link" class:active={active === 'build-scene'} href={resolve('/build-scene')}>{t('nav.buildScene')}</a>
+			<a class="nav-link" class:active={active === 'library'} href={resolve('/library')}>{t('nav.library')}</a>
+			<a class="nav-link" class:active={active === 'agents'} href={resolve('/agents')}>{t('nav.agents')}</a>
+			<a class="nav-link" class:active={active === 'models'} href={resolve('/models')}>{t('nav.models')}</a>
+			<a class="nav-link" class:active={active === 'settings'} href={resolve('/settings')}>{t('nav.settings')}</a>
 		</nav>
 	</div>
 	<div class="header-right">
@@ -69,18 +70,14 @@ interface Props {
 		flex-shrink: 0;
 	}
 	.logo {
-		font-family: var(--font-display);
-		font-size: 18px;
+		font-family: var(--font);
+		font-size: 15px;
 		font-weight: 700;
-		color: var(--text-primary);
+		color: var(--text);
 		text-decoration: none;
-		letter-spacing: -0.02em;
+		letter-spacing: -0.01em;
 		white-space: nowrap;
 	}
-	.logo span {
-		color: var(--accent);
-		font-weight: 500;
-	}
 	.crumb {
 		color: var(--text-muted);
 		font-size: 13px;
@@ -122,7 +119,7 @@ interface Props {
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
 	}
-	@media (max-width: 640px) {
+	@media (max-width: 760px) {
 		.header {
 			padding: 12px 16px;
 			flex-direction: column;

calliope-web/src/lib/components/AssetThumb.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { t } from '$lib/i18n.svelte';
-	import SafeMedia from '$lib/components/SafeMedia.svelte';
-	import StatusChip from '$lib/components/ui/StatusChip.svelte';
-
-	interface Props {
-		src: string | null;
-		alt: string;
-		placeholder: string;
-		wide?: boolean;
-		/** Taller 4:3 media-first crop (asset card grids). */
-		tall?: boolean;
-		/** Latest generation-job state for this asset, if the parent tracks jobs. */
-		jobState?: 'generating' | 'failed' | null;
-		onPreview?: (src: string) => void;
-	}
-
-	let {
-		src,
-		alt,
-		placeholder,
-		wide = false,
-		tall = false,
-		jobState = null,
-		onPreview,
-	}: Props = $props();
-
-	let available = $state(false);
-
-	$effect(() => {
-		void src;
-		available = false;
-	});
-
-	// Job state (live from the queue) wins over the media-derived state.
-	const chip = $derived.by((): { status: string; label: string } => {
-		if (jobState === 'generating') return { status: 'generating', label: t('common.generating') };
-		if (jobState === 'failed') return { status: 'failed', label: t('common.failed') };
-		if (available) return { status: 'ready', label: t('common.ready') };
-		if (src) return { status: 'missing', label: t('common.missing') };
-		return { status: 'pending', label: t('common.pending') };
-	});
-
-	function open() {
-		if (available && src && onPreview) onPreview(src);
-	}
-
-	function onKey(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			open();
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex a11y_no_noninteractive_element_interactions -->
-<div
-	class="thumb"
-	class:wide
-	class:tall
-	class:clickable={available && !!onPreview}
-	role={available && onPreview ? 'button' : undefined}
-	tabindex={available && onPreview ? 0 : undefined}
-	onclick={open}
-	onkeydown={available && onPreview ? onKey : undefined}
->
-	<SafeMedia
-		class="fill"
-		{src}
-		{alt}
-		label={placeholder}
-		onAvailable={() => (available = true)}
-		onUnavailable={() => (available = false)}
-	/>
-	<span class="thumb-chip">
-		<StatusChip status={chip.status} label={chip.label} />
-	</span>
-</div>
-
-<style>
-	.thumb {
-		aspect-ratio: 1;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		overflow: hidden;
-		padding: 0;
-		margin: 0;
-		width: 100%;
-		color: inherit;
-		font: inherit;
-		box-sizing: border-box;
-	}
-	.thumb.wide {
-		aspect-ratio: 16 / 10;
-	}
-	.thumb.tall {
-		aspect-ratio: 4 / 3;
-	}
-	.thumb.clickable {
-		cursor: zoom-in;
-	}
-	.thumb.clickable:hover {
-		border-color: var(--accent, #a78bfa);
-	}
-	.thumb.clickable:focus-visible {
-		outline: 2px solid var(--accent, #a78bfa);
-		outline-offset: 2px;
-	}
-	.thumb :global(.fill) {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		border: none;
-		border-radius: 0;
-		min-height: 0;
-	}
-	.thumb :global(.safe-media-ph.fill) {
-		position: absolute;
-		inset: 0;
-	}
-	.thumb-chip {
-		position: absolute;
-		top: 8px;
-		left: 8px;
-		z-index: 1;
-		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
-	}
-</style>

calliope-web/src/lib/components/AttachToProject.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { createMutation, createQuery } from '@tanstack/svelte-query';
 	import {
 		playgroundApi,
@@ -136,10 +137,7 @@
 
 	const projectList = $derived(($projectsQuery.data ?? []) as Project[]);
 
-	// Stage-URL contract: images land on Assets, clips on Video.
-	const stageLink = $derived(
-		attached ? `/project/${attached.projectId}?stage=${isVideo ? 'video' : 'assets'}` : '',
-	);
+	// Five-stage workbench URL contract: images land on 素材资产, clips on 镜头脚本.
 </script>
 
 <div class="attach">
@@ -147,7 +145,7 @@
 		<div class="attached" role="status">
 			<span class="attached-check" aria-hidden="true"><Icon name="check" size={14} /></span>
 			<span class="attached-text">{t('attach.addedTo')} <strong>{attached.title}</strong></span>
-			<a class="attached-link" href={stageLink}>{t('attach.viewInProject')}</a>
+			<a class="attached-link" href={resolve(`/workbench/${attached.projectId}?stage=${isVideo ? 'shot' : 'assets'}`)}>{t('attach.viewInProject')}</a>
 			<button
 				class="attached-dismiss"
 				type="button"
@@ -173,7 +171,7 @@
 				<span class="field-label">{t('attach.projectField')}</span>
 				<select class="field-select" bind:value={projectId}>
 					<option value="">{t('attach.selectProject')}</option>
-					{#each projectList as p}
+					{#each projectList as p (p.id)}
 						<option value={p.id}>{p.title}</option>
 					{/each}
 				</select>
@@ -194,7 +192,7 @@
 						<span class="field-label">{t('attach.characterField')}</span>
 						<select class="field-select" bind:value={characterId} disabled={projectId === '' || loadingTargets}>
 							<option value="">{t('attach.selectCharacter')}</option>
-							{#each characters as c}
+							{#each characters as c (c.id)}
 								<option value={c.id}>{c.name}</option>
 							{/each}
 						</select>
@@ -207,7 +205,7 @@
 						<span class="field-label">{t('attach.locationField')}</span>
 						<select class="field-select" bind:value={locationId} disabled={projectId === '' || loadingTargets}>
 							<option value="">{t('attach.selectLocation')}</option>
-							{#each locations as loc}
+							{#each locations as loc (loc.id)}
 								<option value={loc.id}>{loc.name}</option>
 							{/each}
 						</select>
@@ -232,7 +230,7 @@
 					<span class="field-label">{t('attach.sceneField')}</span>
 					<select class="field-select" bind:value={sceneId} disabled={projectId === '' || loadingTargets}>
 						<option value="">{t('attach.selectScene')}</option>
-						{#each scenes as s}
+						{#each scenes as s (s.id)}
 							<option value={s.id}>#{s.order_index} {s.heading || t('attach.scene')}</option>
 						{/each}
 					</select>
@@ -267,13 +265,13 @@
 	.attached {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-		padding: 8px 10px;
-		background: rgba(34, 197, 94, 0.08);
-		border: 1px solid rgba(34, 197, 94, 0.3);
-		border-radius: var(--radius-md);
-		font-size: 12px;
-		color: var(--text-secondary);
+		gap: var(--sp-3);
+		padding: var(--sp-3) var(--sp-4);
+		background: var(--ok-soft);
+		border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
+		border-radius: var(--r-md);
+		font-size: var(--fs-aux);
+		color: var(--text-2);
 	}
 	.attached-check {
 		display: flex;
@@ -282,8 +280,8 @@
 		width: 20px;
 		height: 20px;
 		border-radius: 50%;
-		background: var(--success);
-		color: #052e12;
+		background: var(--ok);
+		color: var(--bg);
 		flex-shrink: 0;
 	}
 	.attached-text {
@@ -293,23 +291,26 @@
 		white-space: nowrap;
 	}
 	.attached-text strong {
-		color: var(--text-primary);
+		color: var(--text);
 		font-weight: 600;
 	}
+	/* 普通链接走 ghost（§1.2）：默认 --text-2，悬停 --text，不用金色文字链接。 */
 	.attached-link {
-		color: var(--accent);
-		font-weight: 600;
+		color: var(--text-2);
+		font-weight: 500;
 		text-decoration: none;
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 	.attached-link:hover {
+		color: var(--text);
 		text-decoration: underline;
+		text-underline-offset: 3px;
 	}
 	.attached-link:focus-visible {
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
-		border-radius: var(--radius-sm);
+		border-radius: var(--r-sm);
 	}
 	.attached-dismiss {
 		display: flex;
@@ -319,15 +320,15 @@
 		height: 22px;
 		margin-left: auto;
 		border: none;
-		border-radius: var(--radius-sm);
+		border-radius: var(--r-sm);
 		background: transparent;
-		color: var(--text-muted);
+		color: var(--text-3);
 		cursor: pointer;
 		flex-shrink: 0;
 	}
 	.attached-dismiss:hover {
-		color: var(--text-primary);
-		background: rgba(255, 255, 255, 0.06);
+		color: var(--text);
+		background: var(--bg-4);
 	}
 	.attached-dismiss:focus-visible {
 		outline: 2px solid var(--accent);
@@ -336,20 +337,20 @@
 	.panel {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
-		padding: 12px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
+		gap: var(--sp-1);
+		padding: var(--sp-5);
+		background: var(--bg-3);
+		border: 1px solid var(--line);
+		border-radius: var(--r-md);
 	}
 	.actions {
 		display: flex;
-		gap: 8px;
-		margin-top: 4px;
+		gap: var(--sp-3);
+		margin-top: var(--sp-1);
 	}
 	.err {
-		margin: 4px 0 0;
-		font-size: 12px;
-		color: var(--error);
+		margin: var(--sp-1) 0 0;
+		font-size: var(--fs-aux);
+		color: var(--err);
 	}
 </style>

calliope-web/src/lib/components/ComfyDynamicForm.svelte

@@ -17,6 +17,10 @@
 		allowUpload?: boolean;
 		/** Force required-field error rings visible (e.g. after a blocked Generate). */
 		showErrors?: boolean;
+		/** Show each field's workflow value (原值) and mark fields that differ from it. */
+		showOrig?: boolean;
+		/** Extra per-field messages keyed by nodeId (e.g. range checks); shown with showErrors. */
+		errors?: Record<string, string>;
 		/** Emits labels of required-but-empty inputs whenever the set changes. */
 		onValidityChange?: (missing: string[]) => void;
 		onChange?: (values: Record<string, string | number>) => void;
@@ -30,10 +34,23 @@
 		assetOptions = [],
 		allowUpload = false,
 		showErrors = false,
+		showOrig = false,
+		errors = {},
 		onValidityChange,
 		onChange,
 	}: Props = $props();
 
+	function hasOrig(inp: ComfyDynamicInput): boolean {
+		return inp.defaultValue !== undefined && inp.defaultValue !== '';
+	}
+
+	function isChanged(inp: ComfyDynamicInput): boolean {
+		if (!showOrig) return false;
+		const v = values[inp.nodeId];
+		if (isBlank(v)) return hasOrig(inp);
+		return !hasOrig(inp) || String(v) !== String(inp.defaultValue);
+	}
+
 	// Unique per mounted form so label/id pairs never collide across instances.
 	const uid = Math.random().toString(36).slice(2, 8);
 	let touched = $state<Record<string, boolean>>({});
@@ -80,6 +97,11 @@
 		return isMissing(inp) && (showErrors || !!touched[inp.nodeId]);
 	}
 
+	function extraError(inp: ComfyDynamicInput): string | null {
+		const msg = errors[inp.nodeId]?.trim();
+		return msg && !isMissing(inp) && (showErrors || !!touched[inp.nodeId]) ? msg : null;
+	}
+
 	function thumbFor(current: string): string | null {
 		if (!current) return null;
 		const opt = assetOptions.find((o) => o.path === current);
@@ -207,6 +229,7 @@
 
 {#if inputs.length === 0}
 	<p class="muted">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- This fixed key comes only from the seven bundled translation dictionaries, without interpolation or remote overrides. Retain the existing HTML-capable translation contract. -->
 		{@html t('cdf.noInputs')}
 	</p>
 {:else}
@@ -224,7 +247,9 @@
 		{#each inputs as inp (inp.nodeId)}
 			{@const current = String(values[inp.nodeId] ?? '')}
 			{@const id = inputId(inp.nodeId)}
-			{@const errored = showError(inp)}
+			{@const extra = extraError(inp)}
+			{@const errored = showError(inp) || !!extra}
+			{@const changed = isChanged(inp)}
 			<div class="field">
 				<label class="label" for={id}>
 					{inp.label}
@@ -235,6 +260,9 @@
 						{#if inp.role}<span class="role">{inp.role}</span>{/if}
 						<span class="kind">{inp.kind}</span>
 					{/if}
+					{#if showOrig && hasOrig(inp)}
+						<span class="orig">{t('cdf.orig', { v: String(inp.defaultValue) })}</span>
+					{/if}
 				</label>
 				{#if readonly}
 					<div class="readonly">{values[inp.nodeId] ?? inp.defaultValue ?? '—'}</div>
@@ -243,6 +271,7 @@
 						{id}
 						rows="3"
 						class:invalid={errored}
+						class:changed
 						aria-required={inp.required || undefined}
 						aria-invalid={errored || undefined}
 						value={current}
@@ -254,6 +283,7 @@
 						{id}
 						type="number"
 						class:invalid={errored}
+						class:changed
 						aria-required={inp.required || undefined}
 						aria-invalid={errored || undefined}
 						value={values[inp.nodeId] ?? ''}
@@ -264,6 +294,7 @@
 					<select
 						{id}
 						class:invalid={errored}
+						class:changed
 						value={current || String(inp.defaultValue ?? '')}
 						onchange={(e) => setValue(inp.nodeId, e.currentTarget.value)}
 						onblur={() => markTouched(inp.nodeId)}
@@ -351,7 +382,8 @@
 									}}
 								>
 									<option value="">{t('cdf.chooseAsset')}</option>
-									{#each assetOptions as opt}
+									<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+									{#each assetOptions as opt, i (i)}
 										<option value={opt.path}>{opt.label}</option>
 									{/each}
 								</select>
@@ -392,7 +424,8 @@
 								}}
 							>
 								<option value="">{t('cdf.chooseAsset')}</option>
-								{#each assetOptions as opt}
+								<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+								{#each assetOptions as opt, i (i)}
 									<option value={opt.path}>{opt.label}</option>
 								{/each}
 							</select>
@@ -423,7 +456,8 @@
 							}}
 						>
 							<option value="">{t('cdf.chooseAsset')}</option>
-							{#each assetOptions as opt}
+							<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+							{#each assetOptions as opt, i (i)}
 								<option value={opt.path}>{opt.label}</option>
 							{/each}
 						</select>
@@ -445,6 +479,7 @@
 						{id}
 						type="text"
 						class:invalid={errored}
+						class:changed
 						aria-required={inp.required || undefined}
 						aria-invalid={errored || undefined}
 						value={current}
@@ -453,7 +488,7 @@
 					/>
 				{/if}
 				{#if errored}
-					<span class="error-msg" role="alert">{t('cdf.requiredMsg', { label: inp.label })}</span>
+					<span class="error-msg" role="alert">{extra ?? t('cdf.requiredMsg', { label: inp.label })}</span>
 				{/if}
 			</div>
 		{/each}
@@ -491,7 +526,7 @@
 	}
 	.role {
 		font-weight: 600;
-		color: var(--accent, #a78bfa);
+		color: var(--accent);
 		font-size: 11px;
 		margin-left: 6px;
 		font-family: ui-monospace, monospace;
@@ -516,15 +551,27 @@
 		border-color: var(--accent);
 		box-shadow: 0 0 0 3px var(--accent-glow);
 	}
+	input.changed,
+	textarea.changed,
+	select.changed {
+		border-color: var(--accent-line);
+	}
 	input.invalid,
 	textarea.invalid,
 	select.invalid {
 		border-color: var(--error);
 	}
+	.orig {
+		float: right;
+		font-weight: 400;
+		font-size: var(--fs-mini);
+		font-family: var(--mono);
+		color: var(--text-muted);
+	}
 	input.invalid:focus-visible,
 	textarea.invalid:focus-visible,
 	select.invalid:focus-visible {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
+		box-shadow: 0 0 0 3px var(--err-soft);
 	}
 	.error-msg {
 		font-size: 11px;
@@ -564,7 +611,7 @@
 	}
 	.clear:hover {
 		color: var(--error);
-		border-color: rgba(239, 68, 68, 0.4);
+		border-color: var(--err-line);
 	}
 	.clear:focus-visible {
 		outline: 2px solid var(--accent);

calliope-web/src/lib/components/GeneratingOverlay.svelte

@@ -30,7 +30,7 @@
 		position: absolute;
 		inset: 0;
 		z-index: 30;
-		background: rgba(18, 18, 24, 0.78);
+		background: var(--overlay);
 		backdrop-filter: blur(2px);
 		border-radius: var(--radius-md);
 		display: flex;

calliope-web/src/lib/components/ImageLightbox.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import SafeMedia from '$lib/components/SafeMedia.svelte';
 	import Icon from '$lib/components/ui/Icon.svelte';
+	import Spinner from '$lib/components/ui/Spinner.svelte';
 	import { t } from '$lib/i18n.svelte';
+	import { exportLastFrame } from '$lib/media/lastFrame';
 
 	interface Props {
 		src: string | null;
@@ -61,6 +63,17 @@
 		}
 		return alt ? `${alt.trim().replace(/\s+/g, '-').toLowerCase()}.png` : 'media';
 	});
+
+	let frameBusy = $state(false);
+	async function exportTail() {
+		if (!src || frameBusy) return;
+		frameBusy = true;
+		try {
+			await exportLastFrame(src);
+		} finally {
+			frameBusy = false;
+		}
+	}
 </script>
 
 <svelte:window onkeydown={src ? onKeydown : undefined} />
@@ -83,17 +96,40 @@
 				<button
 					class="tool"
 					type="button"
-aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
-				title={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
+					aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
+					title={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					onclick={() => (zoomed = !zoomed)}
 				>
 					<Icon name="zoom-in" size={17} />
 				</button>
 			{/if}
+			{#if isVideo}
+				<button
+					class="tool"
+					type="button"
+					aria-label={frameBusy ? t('lastFrame.exporting') : t('lastFrame.export')}
+					title={frameBusy
+						? t('lastFrame.exporting')
+						: `${t('lastFrame.export')} · ${t('lastFrame.hint')}`}
+					disabled={frameBusy}
+					aria-busy={frameBusy}
+					onclick={(e) => {
+						e.stopPropagation();
+						exportTail();
+					}}
+				>
+					{#if frameBusy}
+						<Spinner size="sm" />
+					{:else}
+						<Icon name="image" size={17} />
+					{/if}
+				</button>
+			{/if}
 			<a
 				class="tool"
 				href={src}
 				download={downloadName}
+				rel="external"
 				aria-label={t('lightbox.downloadMedia')}
 				title={t('lightbox.download')}
 				onclick={(e) => e.stopPropagation()}
@@ -146,9 +182,8 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					{alt}
 					kind="video"
 					label={t('lightbox.videoUnavailable')}
-					autoplay
 					controls
-					preload="auto"
+					preload="metadata"
 				/>
 			</div>
 		{:else}
@@ -174,7 +209,7 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 			{:else}
 				{t('lightbox.clickToZoom')} · {t('lightbox.closeHint')} ·
 			{/if}
-			<a href={src} target="_blank" rel="noopener" onclick={(e) => e.stopPropagation()}
+			<a href={src} target="_blank" rel="noopener external" onclick={(e) => e.stopPropagation()}
 				>{t('lightbox.openOriginal')}</a
 			>
 		</p>
@@ -204,7 +239,7 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 	}
 	.counter {
 		font-size: 12px;
-		color: rgba(255, 255, 255, 0.65);
+		color: color-mix(in srgb, var(--on-media) 65%, transparent);
 		margin-right: 4px;
 		font-variant-numeric: tabular-nums;
 	}
@@ -216,13 +251,13 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 		height: 40px;
 		border: none;
 		border-radius: 999px;
-		background: rgba(255, 255, 255, 0.12);
-		color: #fff;
+		background: color-mix(in srgb, var(--on-media) 12%, transparent);
+		color: var(--on-media);
 		cursor: pointer;
 		transition: background 0.15s;
 	}
 	.tool:hover {
-		background: rgba(255, 255, 255, 0.22);
+		background: color-mix(in srgb, var(--on-media) 22%, transparent);
 	}
 	.tool:focus-visible {
 		outline: 2px solid var(--accent);
@@ -239,13 +274,13 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 		height: 44px;
 		border: none;
 		border-radius: 999px;
-		background: rgba(255, 255, 255, 0.1);
-		color: #fff;
+		background: color-mix(in srgb, var(--on-media) 10%, transparent);
+		color: var(--on-media);
 		cursor: pointer;
 		transition: background 0.15s;
 	}
 	.nav:hover {
-		background: rgba(255, 255, 255, 0.22);
+		background: color-mix(in srgb, var(--on-media) 22%, transparent);
 	}
 	.nav:focus-visible {
 		outline: 2px solid var(--accent);
@@ -301,16 +336,16 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 	.caption {
 		margin: 0;
 		font-size: 13px;
-		color: rgba(255, 255, 255, 0.85);
+		color: color-mix(in srgb, var(--on-media) 85%, transparent);
 		max-width: min(96vw, 720px);
 		text-align: center;
 	}
 	.hint {
 		margin: 0;
 		font-size: 12px;
-		color: rgba(255, 255, 255, 0.55);
+		color: color-mix(in srgb, var(--on-media) 55%, transparent);
 	}
 	.hint a {
-		color: rgba(255, 255, 255, 0.85);
+		color: color-mix(in srgb, var(--on-media) 85%, transparent);
 	}
 </style>

calliope-web/src/lib/components/JobRow.svelte

@@ -1,164 +0,0 @@
-<script lang="ts">
-	import { useQueryClient } from '@tanstack/svelte-query';
-	import { jobsApi, type Job } from '$lib/api';
-	import { t } from '$lib/i18n.svelte';
-	import { progressFor } from '$lib/jobProgress';
-	import { toast } from '$lib/toast';
-	import Button from './ui/Button.svelte';
-	import Icon from './ui/Icon.svelte';
-	import type { IconName } from './ui/icons';
-	import ProgressBar from './ui/ProgressBar.svelte';
-	import StatusChip from './ui/StatusChip.svelte';
-
-	interface Props {
-		job: Job;
-		/** Optional override for the leading label (defaults to "Kind #id"). */
-		label?: string;
-	}
-
-	let { job, label }: Props = $props();
-
-	const client = useQueryClient();
-	let busy = $state(false);
-
-	const kindIcon: IconName = $derived(
-		job.kind === 'video'
-			? 'video'
-			: job.kind === 'image'
-				? 'image'
-				: job.kind === 'export'
-					? 'film'
-					: 'queue',
-	);
-	const kindLabel = $derived(
-		job.kind === 'export'
-			? t('job.exportFilm')
-			: job.kind.charAt(0).toUpperCase() + job.kind.slice(1),
-	);
-	const title = $derived(label ?? t('job.title', { kind: kindLabel, id: String(job.id) }));
-	const active = $derived(job.status === 'pending' || job.status === 'running');
-	const entry = $derived(progressFor(job.id));
-
-	async function refresh() {
-		await client.invalidateQueries({ queryKey: ['jobs'] });
-		await client.invalidateQueries({ queryKey: ['playground-jobs'] });
-	}
-
-	async function cancel() {
-		busy = true;
-		try {
-			await jobsApi.cancel(job.id);
-			await refresh();
-			toast.info(t('job.cancelled', { id: String(job.id) }));
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('job.cancelFailed'));
-		} finally {
-			busy = false;
-		}
-	}
-
-	async function retry() {
-		busy = true;
-		try {
-			await jobsApi.retry(job.id);
-			await refresh();
-			toast.success(t('job.requeued', { id: String(job.id) }));
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('job.retryFailed'));
-		} finally {
-			busy = false;
-		}
-	}
-</script>
-
-<div class="job-row">
-	<span class="kind" aria-hidden="true"><Icon name={kindIcon} size={14} /></span>
-	<div class="main">
-		<div class="top">
-			<span class="label" {title}>{title}</span>
-			<StatusChip status={job.status} />
-		</div>
-		{#if active}
-			<div class="bar">
-				<ProgressBar
-					size="sm"
-					value={entry?.progress ?? 0}
-					indeterminate={job.status === 'running' && entry == null}
-					label={entry?.message}
-				/>
-			</div>
-		{:else if job.status === 'failed' && job.error}
-			<p class="err" title={job.error}>{job.error}</p>
-		{/if}
-	</div>
-	<div class="actions">
-		{#if active}
-			<Button size="sm" variant="ghost" loading={busy} title={t('job.cancelJob')} onclick={cancel}>
-				<Icon name="close" size={13} />
-			</Button>
-		{:else if job.status === 'failed'}
-			<Button size="sm" variant="ghost" loading={busy} title={t('job.retryJob')} onclick={retry}>
-				<Icon name="retry" size={13} />
-			</Button>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.job-row {
-		display: grid;
-		grid-template-columns: 20px 1fr auto;
-		gap: 8px;
-		align-items: start;
-		padding: 8px;
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		background: var(--bg-elevated);
-	}
-	.kind {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 20px;
-		color: var(--text-muted);
-	}
-	.main {
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-	.top {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		min-height: 20px;
-	}
-	.label {
-		font-size: 12px;
-		font-weight: 600;
-		color: var(--text-primary);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	.bar {
-		padding-bottom: 2px;
-	}
-	.err {
-		margin: 0;
-		font-size: 11px;
-		line-height: 1.4;
-		color: var(--error);
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-	.actions {
-		display: flex;
-		align-items: center;
-	}
-</style>

calliope-web/src/lib/components/LanguageSwitcher.svelte

@@ -1,37 +1,56 @@
 <script lang="ts">
-	import { language, setLanguage, type Language } from '$lib/i18n.svelte';
-	import { t } from '$lib/i18n.svelte';
+  import { language, setLanguage, type Language } from "$lib/i18n.svelte";
+  import { t } from "$lib/i18n.svelte";
+  let { segmented = false }: { segmented?: boolean } = $props();
+  const languages: [Language, string][] = [
+    ["zh", "中文"],
+    ["en", "English"],
+    ["ja", "日本語"],
+    ["ko", "한국어"],
+    ["de", "Deutsch"],
+    ["es", "Español"],
+    ["fr", "Français"],
+  ];
 </script>
 
-<select
-	class="lang-switcher"
-	value={language.current}
-	aria-label={t('common.language')}
-	onchange={(e) => setLanguage(e.currentTarget.value as Language)}
->
-	<option value="de">Deutsch</option>
-	<option value="en">English</option>
-	<option value="es">Español</option>
-	<option value="fr">Français</option>
-	<option value="ja">日本語</option>
-	<option value="ko">한국어</option>
-	<option value="zh">中文</option>
-</select>
+{#if segmented}<div class="mg-options" aria-label={t("common.language")}>
+    {#each languages as [code, label] (code)}<button
+        class="mg-option"
+        class:on={language.current === code}
+        aria-pressed={language.current === code}
+        onclick={() => setLanguage(code)}>{label}</button
+      >{/each}
+  </div>{:else}
+  <select
+    class="lang-switcher"
+    value={language.current}
+    aria-label={t("common.language")}
+    onchange={(e) => setLanguage(e.currentTarget.value as Language)}
+  >
+    <option value="de">Deutsch</option>
+    <option value="en">English</option>
+    <option value="es">Español</option>
+    <option value="fr">Français</option>
+    <option value="ja">日本語</option>
+    <option value="ko">한국어</option>
+    <option value="zh">中文</option>
+  </select>
+{/if}
 
 <style>
-	.lang-switcher {
-		background: var(--bg-elevated);
-		color: var(--text-primary);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		padding: 6px 8px;
-		font-size: 12px;
-		font-family: inherit;
-		cursor: pointer;
-		min-height: 34px;
-	}
-	.lang-switcher:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
+  .lang-switcher {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 6px 8px;
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    min-height: 34px;
+  }
+  .lang-switcher:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
 </style>

calliope-web/src/lib/components/NavRail.svelte

@@ -1,137 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { t } from '$lib/i18n.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import type { IconName } from '$lib/components/ui/icons';
-
-	const items = $derived(
-		[
-			{ id: 'story', key: 'nav.story', icon: 'story' },
-			{ id: 'assets', key: 'nav.assets', icon: 'assets' },
-			{ id: 'script', key: 'nav.script', icon: 'script' },
-			{ id: 'video', key: 'nav.video', icon: 'video' },
-		] as { id: string; key: string; icon: IconName }[],
-	);
-
-	interface Props {
-		active?: string;
-		onSelect?: (id: string) => void;
-		/** Optional per-stage counts — a nonzero value shows a small pill on the icon. */
-		badges?: Record<string, number>;
-	}
-
-	let { active = 'story', onSelect, badges = {} }: Props = $props();
-</script>
-
-<nav class="nav" aria-label={t('nav.projectStages')}>
-	<button
-		class="nav-item home"
-		title={t('nav.projects')}
-		aria-label={t('nav.backProjects')}
-		onclick={() => goto('/projects')}
-	>
-		<span class="icon"><Icon name="home" size={20} /></span>
-		<span class="label">{t('nav.home')}</span>
-	</button>
-	<div class="divider" aria-hidden="true"></div>
-	{#each items as item (item.id)}
-		{@const count = badges[item.id] ?? 0}
-		<button
-			class="nav-item"
-			class:active={active === item.id}
-			title={t(item.key)}
-			aria-current={active === item.id ? 'page' : undefined}
-			onclick={() => onSelect?.(item.id)}
-		>
-			<span class="icon">
-				<Icon name={item.icon} size={20} />
-				{#if count > 0}
-					<span class="badge" aria-label={t('nav.countActive', { count })}>
-						{count > 9 ? '9+' : count}
-					</span>
-				{/if}
-			</span>
-			<span class="label">{t(item.key)}</span>
-		</button>
-	{/each}
-</nav>
-
-<style>
-	.nav {
-		width: 64px;
-		background: var(--bg-surface);
-		border-right: 1px solid var(--border);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: var(--space-md) 0;
-		gap: var(--space-sm);
-		flex-shrink: 0;
-	}
-	.divider {
-		width: 32px;
-		height: 1px;
-		background: var(--border);
-		margin: 2px 0 4px;
-	}
-	.nav-item {
-		width: 56px;
-		border: none;
-		background: transparent;
-		border-radius: var(--radius-md);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		padding: 8px 0;
-		cursor: pointer;
-		color: var(--text-muted);
-		font-size: 11px;
-		font-family: inherit;
-		transition: all 0.15s;
-	}
-	.nav-item:hover {
-		background: var(--bg-elevated);
-		color: var(--text-primary);
-	}
-	.nav-item.active {
-		background: var(--accent);
-		color: white;
-		box-shadow: 0 0 16px var(--accent-glow);
-	}
-	.nav-item.home:hover {
-		color: var(--accent);
-	}
-	.nav-item:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.icon {
-		position: relative;
-		display: inline-flex;
-		line-height: 1;
-	}
-	.badge {
-		position: absolute;
-		top: -6px;
-		right: -12px;
-		min-width: 15px;
-		height: 15px;
-		padding: 0 4px;
-		box-sizing: border-box;
-		border-radius: 999px;
-		background: var(--accent);
-		color: #fff;
-		font-size: 9px;
-		font-weight: 700;
-		line-height: 15px;
-		text-align: center;
-		box-shadow: 0 0 0 2px var(--bg-surface);
-	}
-	.nav-item.active .badge {
-		background: #fff;
-		color: var(--accent);
-		box-shadow: 0 0 0 2px var(--accent);
-	}
-</style>

calliope-web/src/lib/components/OmniComposer.svelte

@@ -18,7 +18,7 @@
 	import { createUploadManager } from '$lib/comfy/useUpload.svelte';
 	import { normalizeInputRole } from '$lib/comfy/parser';
 	import type { AssetOption } from '$lib/assetPicker';
-	import { assetUrl } from '$lib/api';
+	import '$lib/api';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import { t } from '$lib/i18n.svelte';
 	import PillSelect from './omni/PillSelect.svelte';
@@ -504,9 +504,9 @@
 		height: 36px;
 		padding: 0 20px;
 		border-radius: 9999px;
-		background: var(--success, #22c55e);
+		background: var(--ok);
 		border: none;
-		color: #000;
+		color: var(--accent-ink);
 		font-size: 14px;
 		font-weight: 700;
 		font-family: var(--font-body);

calliope-web/src/lib/components/ProjectCard.svelte

@@ -1,478 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import { assetUrl, projects, type Project } from '$lib/api';
-	import { toast } from '$lib/toast';
-	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 Modal from '$lib/components/ui/Modal.svelte';
-	import StatusChip from '$lib/components/ui/StatusChip.svelte';
-	import { t } from '$lib/i18n.svelte';
-
-	interface Props {
-		project: Project;
-	}
-
-	const { project }: Props = $props();
-
-	const client = useQueryClient();
-
-	const stats = $derived(
-		project.stats ?? {
-			scene_count: 0,
-			character_count: 0,
-			asset_ready_count: 0,
-			asset_total_count: 0,
-		},
-	);
-
-	// Explicit project cover wins; otherwise fall back to the first asset image.
-	// The project prop is stable for the lifetime of a card, so the eager
-	// queryKey capture below is intentional.
-	// svelte-ignore state_referenced_locally
-	const assetsQuery = createQuery({
-		queryKey: ['assets', project.id],
-		queryFn: () => projects.getAssets(project.id),
-		staleTime: 60_000,
-	});
-
-	const thumbUrl = $derived.by(() => {
-		if (project.cover_path) return assetUrl(project.cover_path);
-		const data = $assetsQuery.data;
-		if (!data) return null;
-		const char = data.characters.find((c) => c.portrait_path || c.sheet_path);
-		const path =
-			char?.portrait_path ??
-			char?.sheet_path ??
-			data.locations.find((l) => l.reference_image_path)?.reference_image_path ??
-			null;
-		return assetUrl(path);
-	});
-
-	// A broken cover (deleted file, 404) falls back to the gradient tile.
-	let thumbFailedFor = $state<string | null>(null);
-
-	function relativeTime(iso: string): string {
-		const then = new Date(iso).getTime();
-		if (Number.isNaN(then)) return '';
-		const mins = Math.max(0, Math.round((Date.now() - then) / 60000));
-		if (mins < 1) return t('projectCard.timeJustNow');
-		if (mins < 60) return t('projectCard.timeM', { count: mins });
-		const hours = Math.round(mins / 60);
-		if (hours < 24) return t('projectCard.timeH', { count: hours });
-		const days = Math.round(hours / 24);
-		if (days < 30) return t('projectCard.timeD', { count: days });
-		const months = Math.round(days / 30);
-		if (months < 12) return t('projectCard.timeMo', { count: months });
-		return t('projectCard.timeY', { count: Math.round(months / 12) });
-	}
-
-	const updatedLabel = $derived(relativeTime(project.updated_at));
-	const updatedTitle = $derived(new Date(project.updated_at).toLocaleString());
-
-	// Overflow menu (⋯) — closes on outside click, focus leaving, or Esc.
-	let menuOpen = $state(false);
-	let menuEl = $state<HTMLDivElement | null>(null);
-
-	$effect(() => {
-		if (!menuOpen) return;
-		const onDocClick = (e: MouseEvent) => {
-			if (menuEl && !menuEl.contains(e.target as Node)) menuOpen = false;
-		};
-		const onKey = (e: KeyboardEvent) => {
-			if (e.key === 'Escape') menuOpen = false;
-		};
-		const onFocusIn = (e: FocusEvent) => {
-			if (menuEl && !menuEl.contains(e.target as Node)) menuOpen = false;
-		};
-		window.addEventListener('click', onDocClick);
-		window.addEventListener('keydown', onKey);
-		document.addEventListener('focusin', onFocusIn);
-		return () => {
-			window.removeEventListener('click', onDocClick);
-			window.removeEventListener('keydown', onKey);
-			document.removeEventListener('focusin', onFocusIn);
-		};
-	});
-
-	let renameOpen = $state(false);
-	let renameValue = $state('');
-
-	const renameMutation = createMutation({
-		mutationFn: (title: string) => projects.update(project.id, { title }),
-		onSuccess: (updated) => {
-			client.invalidateQueries({ queryKey: ['projects'] });
-			toast.success(t('projectCard.renamedTo', { title: updated.title }));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('projectCard.renameFailed'));
-		},
-	});
-
-	function openRename() {
-		menuOpen = false;
-		renameValue = project.title;
-		renameOpen = true;
-	}
-
-	function submitRename() {
-		const title = renameValue.trim();
-		renameOpen = false;
-		if (!title || title === project.title) return;
-		$renameMutation.mutate(title);
-	}
-
-	let deleteOpen = $state(false);
-
-	const deleteMutation = createMutation({
-		mutationFn: () => projects.delete(project.id),
-		onSuccess: () => {
-			client.invalidateQueries({ queryKey: ['projects'] });
-			toast.success(t('projectCard.deleted', { title: project.title }));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('projectCard.deleteFailed'));
-		},
-	});
-</script>
-
-<article class="project-card">
-	<button
-		type="button"
-		class="card-main"
-		aria-label={t('projectCard.open', { title: project.title })}
-		onclick={() => goto(`/project/${project.id}`)}
-	>
-		<div class="card-thumb">
-			{#if thumbUrl && thumbFailedFor !== thumbUrl}
-				<img
-					class="thumb-img"
-					src={thumbUrl}
-					alt=""
-					loading="lazy"
-					onerror={() => (thumbFailedFor = thumbUrl)}
-				/>
-			{:else}
-				<div class="card-thumb-icon"><Icon name="video" size={26} /></div>
-			{/if}
-			<div class="card-status">
-				<StatusChip status={project.status} label={t(`projectCard.status.${project.status}`)} />
-			</div>
-		</div>
-		<div class="card-body">
-			<div class="card-title">
-				{project.title}
-				<span class="open-arrow">→</span>
-			</div>
-			<p class="card-desc">{project.idea || t('projectCard.noIdea')}</p>
-			<div class="card-meta">
-				<div class="card-stats">
-					<span class="card-stat">
-						<Icon name="script" size={13} />
-						{t('projectCard.scenes', { count: stats.scene_count })}
-					</span>
-					<span class="card-stat">
-						<Icon name="assets" size={13} />
-						{t('projectCard.characters', { count: stats.character_count })}
-					</span>
-					<span class="card-stat">
-						<Icon name="image" size={13} />
-						{t('projectCard.assets', {
-							ready: stats.asset_ready_count,
-							total: stats.asset_total_count,
-						})}
-					</span>
-				</div>
-				<span title={updatedTitle}>{updatedLabel}</span>
-			</div>
-		</div>
-	</button>
-
-	<div class="menu-wrap" bind:this={menuEl}>
-		<button
-			type="button"
-			class="menu-btn"
-			aria-label={t('projectCard.actions', { title: project.title })}
-			aria-haspopup="menu"
-			aria-expanded={menuOpen}
-			onclick={() => (menuOpen = !menuOpen)}
-		>
-			⋯
-		</button>
-		{#if menuOpen}
-			<div class="menu" role="menu" aria-label={t('projectCard.menuLabel')}>
-				<button type="button" role="menuitem" class="menu-item" onclick={openRename}>
-					<Icon name="edit" size={14} />
-					{t('common.rename')}
-				</button>
-				<button
-					type="button"
-					role="menuitem"
-					class="menu-item"
-					onclick={() => {
-						menuOpen = false;
-						goto(`/project/${project.id}?stage=assets`);
-					}}
-				>
-					<Icon name="image" size={14} />
-					{t('projectCard.changeCover')}
-				</button>
-				<button
-					type="button"
-					role="menuitem"
-					class="menu-item danger"
-					onclick={() => {
-						menuOpen = false;
-						deleteOpen = true;
-					}}
-				>
-					<Icon name="trash" size={14} />
-					{t('common.delete')}
-				</button>
-			</div>
-		{/if}
-	</div>
-</article>
-
-<Modal bind:open={renameOpen} title={t('projectCard.renameTitle')}>
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-			submitRename();
-		}}
-	>
-		<label class="field">
-			<span class="field-label">{t('common.title')}</span>
-			<input class="field-input" bind:value={renameValue} required />
-		</label>
-	</form>
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (renameOpen = false)}>{t('common.cancel')}</Button>
-		<Button
-			variant="primary"
-			disabled={!renameValue.trim() || $renameMutation.isPending}
-			onclick={submitRename}
-		>
-			{t('common.rename')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<ConfirmDialog
-	bind:open={deleteOpen}
-	title={t('projectCard.deleteTitle')}
-	message={t('projectCard.deleteMessage', { title: project.title })}
-	confirmLabel={t('common.delete')}
-	danger
-	onconfirm={() => $deleteMutation.mutate()}
-/>
-
-<style>
-	.project-card {
-		position: relative;
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-lg);
-		overflow: hidden;
-		transition: all 0.2s;
-	}
-	.project-card:hover {
-		border-color: var(--accent);
-		transform: translateY(-2px);
-		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
-	}
-	.project-card:hover .open-arrow {
-		opacity: 1;
-		transform: translateX(0);
-	}
-	.card-main {
-		display: block;
-		width: 100%;
-		padding: 0;
-		border: none;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		text-align: left;
-		cursor: pointer;
-	}
-	.card-main:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
-	}
-	.card-thumb {
-		height: 170px;
-		background: linear-gradient(135deg, var(--bg-elevated) 0%, #1a1625 100%);
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-	}
-	.card-thumb::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		background:
-			radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 40%),
-			radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 40%);
-	}
-	.thumb-img {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.card-thumb-icon {
-		width: 64px;
-		height: 64px;
-		border-radius: var(--radius-md);
-		background: rgba(139, 92, 246, 0.12);
-		border: 1px solid rgba(139, 92, 246, 0.2);
-		color: var(--accent);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		position: relative;
-		z-index: 1;
-	}
-	.card-status {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		z-index: 2;
-		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
-	}
-	.card-body {
-		padding: var(--space-md);
-	}
-	.card-title {
-		font-size: 16px;
-		font-weight: 600;
-		margin: 0 0 var(--space-xs);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: var(--space-sm);
-	}
-	.open-arrow {
-		color: var(--accent);
-		opacity: 0;
-		transform: translateX(-8px);
-		transition: all 0.2s;
-		font-size: 14px;
-	}
-	.card-desc {
-		color: var(--text-secondary);
-		font-size: 13px;
-		line-height: 1.5;
-		margin: 0 0 var(--space-md);
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-	.card-meta {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: var(--space-sm);
-		font-size: 12px;
-		color: var(--text-muted);
-	}
-	.card-stats {
-		display: flex;
-		gap: var(--space-md);
-		flex-wrap: wrap;
-	}
-	.card-stat {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-	.menu-wrap {
-		position: absolute;
-		top: 8px;
-		left: 8px;
-		z-index: 3;
-	}
-	.menu-btn {
-		width: 30px;
-		height: 30px;
-		border: 1px solid transparent;
-		border-radius: var(--radius-sm);
-		background: rgba(10, 10, 12, 0.55);
-		color: var(--text-secondary);
-		font-size: 16px;
-		line-height: 1;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		transition: all 0.15s;
-	}
-	.project-card:hover .menu-btn,
-	.menu-btn:focus-visible,
-	.menu-btn[aria-expanded='true'] {
-		opacity: 1;
-	}
-	.menu-btn:hover {
-		background: var(--bg-elevated);
-		color: var(--text-primary);
-		border-color: var(--border);
-	}
-	.menu-btn:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.menu {
-		position: absolute;
-		top: 34px;
-		left: 0;
-		min-width: 140px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
-		padding: 4px;
-		display: flex;
-		flex-direction: column;
-	}
-	.menu-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 8px 10px;
-		border: none;
-		border-radius: var(--radius-sm);
-		background: transparent;
-		color: var(--text-primary);
-		font-size: 13px;
-		font-family: inherit;
-		cursor: pointer;
-		text-align: left;
-	}
-	.menu-item:hover {
-		background: rgba(255, 255, 255, 0.06);
-	}
-	.menu-item.danger {
-		color: var(--error);
-	}
-	.menu-item.danger:hover {
-		background: rgba(239, 68, 68, 0.12);
-	}
-	.menu-item:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: -2px;
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.project-card:hover {
-			transform: none;
-		}
-	}
-</style>

calliope-web/src/lib/components/SafeMedia.svelte

@@ -95,10 +95,10 @@
 				rgba(255, 255, 255, 0.03) 6px,
 				rgba(255, 255, 255, 0.03) 12px
 			),
-			var(--bg-elevated, #16161d);
-		border: 1px dashed var(--border, #2a2a35);
+			var(--bg-elevated);
+		border: 1px dashed var(--border);
 		border-radius: inherit;
-		color: var(--text-muted, #8b8b9a);
+		color: var(--text-muted);
 		font-size: 12px;
 		font-weight: 500;
 		letter-spacing: 0.02em;

calliope-web/src/lib/components/ScriptStage.svelte

@@ -1,867 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { toStore } from 'svelte/store';
-	import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import { assetUrl, jobsApi, projects, type Job, type Scene, type Clip } from '$lib/api';
-	import { estimateTargetSeconds } from '$lib/durationBudget';
-	import { agentDeepLink } from '$lib/agentTasks';
-	import { toast } from '$lib/toast';
-	import { t } from '$lib/i18n.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import StatusChip from '$lib/components/ui/StatusChip.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-
-	interface Props {
-		projectId: number;
-	}
-
-	let { projectId }: Props = $props();
-	const client = useQueryClient();
-	let editing = $state<Scene | null>(null);
-	let editOpen = $state(false);
-	let highlightId = $state<number | null>(null);
-	let adding = $state(false);
-	let deletingId = $state<number | null>(null);
-	let sceneToDelete = $state<Scene | null>(null);
-	let deleteOpen = $state(false);
-
-	const scenesQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['scenes', projectId],
-			queryFn: () => projects.getScenes(projectId),
-		})),
-	);
-
-	// Shared cache key with QueueStage — clip job state shows up on scene cards
-	// too. Refreshed via SSE invalidation from the project page, not polling.
-	const jobsQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['jobs', projectId],
-			queryFn: () => jobsApi.list(projectId),
-		})),
-	);
-
-	// Cache-shared with the parent's story query — only used for the target-length hint.
-	const storyQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['story', projectId],
-			queryFn: () => projects.getStory(projectId),
-		})),
-	);
-
-	// Cache-shared with AssetsStage — resolves scene location chips.
-	const assetsQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['assets', projectId],
-			queryFn: () => projects.getAssets(projectId),
-		})),
-	);
-
-	const scenes = $derived($scenesQuery.data?.scenes ?? []);
-	const sceneCount = $derived(scenes.length);
-	const totalClips = $derived(scenes.reduce((n, s) => n + (s.clips?.length ?? 0), 0));
-	const totalSec = $derived($scenesQuery.data?.estimated_duration_sec ?? 0);
-	const targetSec = $derived.by(() => {
-		const target = $storyQuery.data?.project?.target_duration;
-		return target ? estimateTargetSeconds(target) : 0;
-	});
-
-	const busy = $derived(adding || deletingId != null);
-
-	// ── Break into shots (coverage expansion) ────────────────────────────
-	let expandingIds = $state<number[]>([]);
-	let expandingAll = $state(false);
-	let expandedIds = $state<number[]>([]);
-
-	function isExpanded(scene: Scene): boolean {
-		return (scene.clips?.length ?? 0) > 1 || expandedIds.includes(scene.id);
-	}
-
-	async function breakIntoShots(scene: Scene) {
-		if (expandingIds.length > 0 || expandingAll) return;
-		expandingIds = [...expandingIds, scene.id];
-		try {
-			const res = await projects.expandClips(projectId, { scene_ids: [scene.id] });
-			expandedIds = [...new Set([...expandedIds, scene.id])];
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-			toast.success(
-				t('script.toast.breakIntoShots', {
-					num: scene.order_index,
-					clips: res.scenes?.[0]?.clip_count ?? '?',
-				}),
-			);
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.breakFail'));
-		} finally {
-			expandingIds = expandingIds.filter((id) => id !== scene.id);
-		}
-	}
-
-	async function breakAllIntoShots() {
-		if (expandingIds.length > 0 || expandingAll) return;
-		if (
-			!window.confirm(t('script.toast.breakAllConfirm', { count: sceneCount }))
-		)
-			return;
-		expandingAll = true;
-		try {
-			const res = await projects.expandClips(projectId, { all: true });
-			expandedIds = scenes.map((s) => s.id);
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-			toast.success(t('script.toast.boardExpanded', { count: res.total_clips }));
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.breakAllFail'));
-		} finally {
-			expandingAll = false;
-		}
-	}
-
-	async function deleteClip(clip: Clip, scene: Scene) {
-		try {
-			await projects.deleteClip(projectId, clip.id);
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-			toast.success(t('script.toast.deletedShot', { num: `${scene.order_index}.${clip.order_index}` }));
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.deleteClipFail'));
-		}
-	}
-
-	const saveMutation = createMutation({
-		mutationFn: () =>
-			projects.updateScene(projectId, editing!.id, {
-				heading: editing!.heading,
-				action: editing!.action,
-				dialog: editing!.dialog,
-				duration_sec: editing!.duration_sec,
-			}),
-		onSuccess: () => {
-			editing = null;
-			editOpen = false;
-			client.invalidateQueries({ queryKey: ['scenes'] });
-			toast.success(t('script.toast.sceneSaved'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('script.toast.saveSceneFail'));
-		},
-	});
-
-	// Chain-from-previous toggle — persists on the scene; consumed at render time.
-	let chainPendingId = $state<number | null>(null);
-	async function toggleChain(scene: Scene) {
-		if (chainPendingId != null) return;
-		chainPendingId = scene.id;
-		try {
-			await projects.updateScene(projectId, scene.id, {
-				chain_from_prev: !scene.chain_from_prev,
-			});
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.updateSceneFail'));
-		} finally {
-			chainPendingId = null;
-		}
-	}
-
-	function jobForScene(sceneId: number): Job | undefined {
-		const jobs = ($jobsQuery.data ?? []).filter(
-			(j) => j.scene_id === sceneId && j.kind === 'video',
-		);
-		if (jobs.length === 0) return undefined;
-		return [...jobs].sort((a, b) => b.id - a.id)[0];
-	}
-
-	function jobForClip(clipId: number): Job | undefined {
-		const jobs = ($jobsQuery.data ?? []).filter(
-			(j) => (j as Job & { clip_id?: number | null }).clip_id === clipId && j.kind === 'video',
-		);
-		if (jobs.length === 0) return undefined;
-		return [...jobs].sort((a, b) => b.id - a.id)[0];
-	}
-
-	/** Per-scene production status — only uses fields the API actually exposes. */
-	function sceneStatus(scene: Scene): { status: string; label: string } {
-		const job = jobForScene(scene.id);
-		if (job && (job.status === 'pending' || job.status === 'running')) {
-			return { status: 'generating', label: t('script.status.rendering') };
-		}
-		if (job?.status === 'failed') return { status: 'failed', label: t('script.status.renderFailed') };
-		if (scene.video_path || job?.status === 'done') {
-			return { status: 'ready', label: t('script.status.clipReady') };
-		}
-		return { status: 'idle', label: t('script.status.noClip') };
-	}
-
-	function locationName(scene: Scene): string | null {
-		if (scene.location_id == null) return null;
-		const locs = $assetsQuery.data?.locations ?? [];
-		return locs.find((l) => l.id === scene.location_id)?.name ?? null;
-	}
-
-	function avatarFor(char: { portrait_path: string | null; sheet_path: string | null }) {
-		return assetUrl(char.portrait_path ?? char.sheet_path);
-	}
-
-	function initialsOf(name: string): string {
-		const parts = name.trim().split(/\s+/).filter(Boolean);
-		if (parts.length === 0) return '?';
-		return parts
-			.slice(0, 2)
-			.map((p) => p[0].toUpperCase())
-			.join('');
-	}
-
-	/** Hide a broken avatar image (portrait moved/deleted on disk), revealing initials. */
-	function hideBrokenAvatar(e: Event) {
-		const img = e.currentTarget as HTMLImageElement | null;
-		if (img) img.style.display = 'none';
-	}
-
-	function formatClock(sec: number): string {
-		const s = Math.max(0, Math.round(sec));
-		const m = Math.floor(s / 60);
-		const r = s % 60;
-		return `${m}:${r.toString().padStart(2, '0')}`;
-	}
-
-	async function move(sceneId: number, dir: -1 | 1) {
-		if (busy) return;
-		const list = $scenesQuery.data?.scenes ?? [];
-		const idx = list.findIndex((s) => s.id === sceneId);
-		const swap = idx + dir;
-		if (idx < 0 || swap < 0 || swap >= list.length) return;
-		const ids = list.map((s) => s.id);
-		[ids[idx], ids[swap]] = [ids[swap], ids[idx]];
-		await projects.reorderScenes(projectId, ids);
-		client.invalidateQueries({ queryKey: ['scenes'] });
-	}
-
-	/** Hand off script regeneration to a fresh, project-linked agent chat. */
-	function requestRegenerate() {
-		if (busy) return;
-		goto(agentDeepLink(projectId, 'script'));
-	}
-
-	function openEdit(scene: Scene) {
-		editing = { ...scene };
-		editOpen = true;
-	}
-
-	async function addScene() {
-		if (busy) return;
-		adding = true;
-		try {
-			const existing = $scenesQuery.data?.scenes ?? [];
-			const nextIndex = existing.length + 1;
-			const created = await projects.createScene(projectId, {
-				order_index: nextIndex,
-				heading: `NEW SCENE ${nextIndex}`,
-				action: '',
-				dialog: '',
-				duration_sec: 5,
-			});
-			// Keep order_index contiguous 1..n so Regenerate sees the real board size
-			const ids = [...existing.map((s) => s.id), created.id];
-			await projects.reorderScenes(projectId, ids);
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-			await client.refetchQueries({ queryKey: ['scenes', projectId] });
-			editing = { ...created, order_index: nextIndex, heading: `NEW SCENE ${nextIndex}` };
-			editOpen = true;
-			highlightId = created.id;
-			await tick();
-			document
-				.getElementById(`scene-${created.id}`)
-				?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-			toast.success(t('script.toast.sceneAdded', { num: nextIndex }));
-			window.setTimeout(() => {
-				if (highlightId === created.id) highlightId = null;
-			}, 2800);
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.addSceneFail'));
-		} finally {
-			adding = false;
-		}
-	}
-
-	function requestDelete(scene: Scene) {
-		if (busy) return;
-		sceneToDelete = scene;
-		deleteOpen = true;
-	}
-
-	async function confirmDeleteScene() {
-		const scene = sceneToDelete;
-		sceneToDelete = null;
-		if (!scene || busy) return;
-		const label = scene.heading?.trim() || `Scene #${scene.order_index}`;
-		deletingId = scene.id;
-		try {
-			await projects.deleteScene(projectId, scene.id);
-			if (editing?.id === scene.id) {
-				editing = null;
-				editOpen = false;
-			}
-			const remaining = ($scenesQuery.data?.scenes ?? [])
-				.filter((s) => s.id !== scene.id)
-				.map((s) => s.id);
-			if (remaining.length > 0) {
-				await projects.reorderScenes(projectId, remaining);
-			}
-			await client.invalidateQueries({ queryKey: ['scenes'] });
-			toast.success(t('script.toast.deleted', { name: label }));
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('script.toast.deleteFailed'));
-		} finally {
-			deletingId = null;
-		}
-	}
-</script>
-
-<header class="stage-header">
-	<div>
-		<h2>3. Script</h2>
-		<p class="muted">
-			Estimated duration: {formatClock(totalSec)}
-			{#if targetSec > 0}
-				/ target ~{formatClock(targetSec)}
-			{/if}
-			{#if sceneCount > 0}
-				· {sceneCount} scenes
-				{#if totalClips > 0}
-					/ {totalClips} shot clips
-				{/if}
-			{/if}
-		</p>
-	</div>
-	<div class="stage-actions">
-		<Button variant="secondary" disabled={busy} loading={adding} onclick={addScene}>
-			<Icon name="plus" size={14} /> {t('script.addScene')}
-		</Button>
-		<Button
-			variant="secondary"
-			disabled={busy || expandingAll || expandingIds.length > 0 || sceneCount === 0}
-			loading={expandingAll}
-			onclick={breakAllIntoShots}
-			title={t('script.breakAllTitle')}
-		>
-			<Icon name="film" size={14} /> {t('script.breakAllIntoShots')}
-		</Button>
-		<Button variant="primary" disabled={busy} onclick={requestRegenerate}>
-			<Icon name="sparkle" size={15} /> {t('script.regenerate')}
-		</Button>
-	</div>
-</header>
-
-<div class="script-panel">
-	{#if $scenesQuery.isLoading}
-		<div class="card">{t('script.loadingScenes')}</div>
-	{:else if sceneCount === 0}
-		<EmptyState
-			title={t('script.noScenesTitle')}
-			body={t('script.noScenesBody')}
-		>
-			{#snippet icon()}
-				<Icon name="script" size={28} />
-			{/snippet}
-			{#snippet action()}
-				<Button variant="secondary" disabled={busy} loading={adding} onclick={addScene}>
-					<Icon name="plus" size={14} /> {t('script.addScene')}
-				</Button>
-			{/snippet}
-		</EmptyState>
-	{:else}
-		{#each scenes as scene, i (scene.id)}
-			{@const st = sceneStatus(scene)}
-			{@const locName = locationName(scene)}
-			<article
-				id="scene-{scene.id}"
-				class="card scene"
-				class:fresh={highlightId === scene.id}
-				class:deleting={deletingId === scene.id}
-			>
-				<div class="scene-head">
-					<div class="scene-title">
-						<span class="grip" aria-hidden="true"><Icon name="drag" size={14} /></span>
-						<span class="num">#{scene.order_index}</span>
-						<strong>{scene.heading || t('script.untitledScene')}</strong>
-						{#if highlightId === scene.id}
-							<span class="fresh-tag">{t('script.justAdded')}</span>
-						{/if}
-						<StatusChip status={st.status} label={st.label} />
-					</div>
-					<div class="actions">
-						<button
-							type="button"
-							class="icon-btn"
-							aria-label={t('script.moveSceneUp')}
-							title={t('script.moveSceneUp')}
-							disabled={busy || i === 0}
-							onclick={() => move(scene.id, -1)}
-						>
-							<Icon name="chevron-up" size={15} />
-						</button>
-						<button
-							type="button"
-							class="icon-btn"
-							aria-label={t('script.moveSceneDown')}
-							title={t('script.moveSceneDown')}
-							disabled={busy || i === sceneCount - 1}
-							onclick={() => move(scene.id, 1)}
-						>
-							<Icon name="chevron-down" size={15} />
-						</button>
-						<Button variant="secondary" size="sm" disabled={busy} onclick={() => openEdit(scene)}>
-							{t('script.edit')}
-						</Button>
-						<Button
-							variant="danger"
-							size="sm"
-							disabled={busy}
-							loading={deletingId === scene.id}
-							onclick={() => requestDelete(scene)}
-						>
-							{t('script.delete')}
-						</Button>
-					</div>
-				</div>
-				{#if scene.action}
-					<p class="muted">{scene.action}</p>
-				{:else}
-					<p class="muted empty-line">{t('script.noActionYet')}</p>
-				{/if}
-				{#if scene.dialog}
-					<pre class="dialog">{scene.dialog}</pre>
-				{/if}
-				<div class="clip-block">
-					<div class="clip-head">
-						<span class="clip-title">
-							<Icon name="film" size={12} />
-							{(scene.clips ?? []).length}
-							{((scene.clips ?? []).length === 1 ? t('script.shotClipSingular') : t('script.shotClipPlural', { n: (scene.clips ?? []).length }))}
-							{#if (scene.clips ?? []).some((c) => c.clip_path)}
-								· {t('script.renderedCount', { count: (scene.clips ?? []).filter((c) => c.clip_path).length })}
-							{/if}
-						</span>
-						<Button
-							variant="secondary"
-							size="sm"
-							disabled={busy || expandingIds.length > 0 || expandingAll}
-							loading={expandingIds.includes(scene.id)}
-							onclick={() => breakIntoShots(scene)}
-							title={isExpanded(scene) ? t('script.rebreakTitle') : t('script.breakTitle')}
-						>
-							{isExpanded(scene) ? t('script.rebreak') : t('script.break')}
-						</Button>
-					</div>
-					{#if isExpanded(scene) && (scene.clips ?? []).length > 1}
-						<ul class="clip-list">
-							{#each scene.clips ?? [] as clip (clip.id)}
-								{@const clipJob = jobForClip(clip.id)}
-								<li class="clip-row">
-									<span class="clip-num" class:ready={Boolean(clip.clip_path)}>
-										#{scene.order_index}.{clip.order_index}
-									</span>
-									<span class="clip-desc">{clip.description || t('script.untitledShot')}</span>
-									{#if clip.shot_size}
-										<span class="chip">{clip.shot_size}</span>
-									{/if}
-									{#if clipJob && (clipJob.status === 'pending' || clipJob.status === 'running')}
-										<span class="chip chip-render">{t('script.rendering')}</span>
-									{:else if clip.clip_path}
-										<span class="chip chip-ok">✓ {t('script.clipDone')}</span>
-									{/if}
-									{#if clip.duration_sec}
-										<span class="clip-dur">{clip.duration_sec}s</span>
-									{/if}
-									<button
-										type="button"
-										class="icon-btn"
-										aria-label={t('script.deleteShotAria', { id: `${scene.order_index}.${clip.order_index}` })}
-										title={t('script.deleteShotTitle')}
-										onclick={() => deleteClip(clip, scene)}
-									>
-										<Icon name="trash" size={13} />
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{/if}
-				</div>
-				<div class="chips">
-					{#each scene.characters ?? [] as c (c.id)}
-						{@const avatar = avatarFor(c)}
-						<span class="chip">
-							<span class="avatar">
-								<span class="initials" aria-hidden="true">{initialsOf(c.name)}</span>
-								{#if avatar}
-									<img src={avatar} alt="" loading="lazy" onerror={hideBrokenAvatar} />
-								{/if}
-							</span>
-							{c.name}
-						</span>
-					{/each}
-					{#if locName}
-						<span class="chip"><Icon name="folder" size={12} /> {locName}</span>
-					{/if}
-					{#if scene.duration_sec}
-						<span class="chip"><Icon name="clock" size={12} /> {formatClock(scene.duration_sec)}</span>
-					{/if}
-					{#if i > 0}
-						<button
-							type="button"
-							class="chip chip-toggle"
-							class:chip-on={Boolean(scene.chain_from_prev)}
-							disabled={chainPendingId === scene.id}
-						title={t('script.chainTitle')}
-						onclick={() => toggleChain(scene)}
-					>
-						<Icon name="film" size={12} />
-						{Boolean(scene.chain_from_prev) ? t('script.chainOn') : t('script.chainOff')}
-						</button>
-					{/if}
-				</div>
-			</article>
-		{/each}
-	{/if}
-</div>
-
-<Modal
-	bind:open={editOpen}
-	title={editing ? t('script.editSceneNumbered', { n: editing.order_index }) : t('script.editScene')}
-	onclose={() => (editing = null)}
->
-	{#if editing}
-		<label class="field">
-			<span class="field-label">{t('script.headingField')}</span>
-			<input class="field-input" bind:value={editing.heading} placeholder={t('script.headingPlaceholder')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('script.actionField')}</span>
-			<textarea
-				class="field-textarea"
-				bind:value={editing.action}
-				rows="4"
-				placeholder={t('script.actionPlaceholder')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('script.dialogField')}</span>
-			<textarea
-				class="field-textarea"
-				bind:value={editing.dialog}
-				rows="4"
-				placeholder={t('script.dialogPlaceholder')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('script.durationField')}</span>
-			<input class="field-input" type="number" bind:value={editing.duration_sec} min="1" />
-		</label>
-	{/if}
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (editOpen = false)}>{t('common.cancel')}</Button>
-		<Button
-			variant="primary"
-			loading={$saveMutation.isPending}
-			onclick={() => $saveMutation.mutate()}
-		>
-			{t('script.save')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<ConfirmDialog
-	bind:open={deleteOpen}
-	title={t('script.deleteSceneTitle')}
-	message={sceneToDelete
-		? t('script.deleteSceneMessage', {
-				heading: sceneToDelete.heading?.trim() || t('script.sceneNumber', { n: sceneToDelete.order_index }),
-			})
-		: ''}
-	confirmLabel={t('script.delete')}
-	danger
-	onconfirm={() => void confirmDeleteScene()}
-	oncancel={() => (sceneToDelete = null)}
-/>
-
-<style>
-	.stage-header {
-		/* Pins inside the stage scroll container so Add Scene / Regenerate
-		   stay reachable while scrolling long scripts. */
-		position: sticky;
-		top: 0;
-		z-index: 5;
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		margin-bottom: var(--space-lg);
-		gap: var(--space-md);
-		padding: 8px 0 12px;
-		background: var(--bg-primary);
-		border-bottom: 1px solid var(--border);
-	}
-	.stage-header h2 {
-		margin: 0 0 4px;
-		font-size: 22px;
-		font-weight: 700;
-	}
-	.stage-actions {
-		display: flex;
-		gap: 8px;
-	}
-	.muted {
-		color: var(--text-secondary);
-		margin: 0;
-	}
-	.script-panel {
-		position: relative;
-		min-height: 220px;
-	}
-	.card {
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		padding: var(--space-lg);
-		margin-bottom: var(--space-md);
-		scroll-margin-top: 84px;
-		scroll-margin-bottom: 24px;
-	}
-	.scene {
-		transition:
-			border-color 0.25s ease,
-			box-shadow 0.25s ease,
-			opacity 0.2s ease;
-	}
-	.scene.fresh {
-		border-color: var(--accent);
-		box-shadow:
-			0 0 0 1px var(--accent),
-			0 0 24px var(--accent-glow);
-		animation: scene-in 0.45s ease-out;
-	}
-	.scene.deleting {
-		opacity: 0.45;
-	}
-	@keyframes scene-in {
-		from {
-			opacity: 0.35;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: none;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.scene.fresh {
-			animation: none;
-		}
-	}
-	.scene-head {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		gap: 12px;
-		margin-bottom: 8px;
-	}
-	.scene-title {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 8px;
-		min-width: 0;
-	}
-	.grip {
-		display: inline-flex;
-		color: var(--text-muted);
-		cursor: grab;
-		opacity: 0.6;
-	}
-	.num {
-		color: var(--accent);
-		font-weight: 700;
-	}
-	.fresh-tag {
-		font-size: 10px;
-		font-weight: 700;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
-		color: var(--accent);
-		background: var(--accent-glow);
-		border-radius: 999px;
-		padding: 2px 8px;
-	}
-	.actions {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px;
-		flex-shrink: 0;
-	}
-	.icon-btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 28px;
-		height: 28px;
-		border: 1px solid transparent;
-		border-radius: var(--radius-sm);
-		background: transparent;
-		color: var(--text-secondary);
-		cursor: pointer;
-	}
-	.icon-btn:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.05);
-		color: var(--text-primary);
-		border-color: var(--border);
-	}
-	.icon-btn:disabled {
-		opacity: 0.35;
-		cursor: not-allowed;
-	}
-	.icon-btn:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.empty-line {
-		font-style: italic;
-		color: var(--text-muted);
-	}
-	.dialog {
-		background: var(--bg-elevated);
-		padding: 12px;
-		border-radius: var(--radius-sm);
-		white-space: pre-wrap;
-		font-family: var(--font-mono);
-		font-size: 13px;
-	}
-	.chips {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 6px;
-		margin-top: 10px;
-	}
-	.chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: 999px;
-		padding: 2px 10px;
-		font-size: 12px;
-		color: var(--text-secondary);
-	}
-	.chip-toggle {
-		cursor: pointer;
-		font-family: inherit;
-	}
-	.chip-toggle:hover {
-		color: var(--text-primary);
-		border-color: #52525b;
-	}
-	.chip-toggle:disabled {
-		opacity: 0.6;
-		cursor: wait;
-	}
-	.chip-on {
-		color: var(--accent);
-		border-color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 12%, var(--bg-elevated));
-	}
-	.clip-block {
-		margin-top: 10px;
-		border-top: 1px dashed var(--border);
-		padding-top: 8px;
-	}
-	.clip-head {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 8px;
-	}
-	.clip-title {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 12px;
-		font-weight: 600;
-		color: var(--text-secondary);
-	}
-	.clip-list {
-		list-style: none;
-		margin: 8px 0 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-	.clip-row {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		padding: 4px 8px;
-		font-size: 12px;
-	}
-	.clip-num {
-		font-family: var(--font-mono);
-		font-weight: 700;
-		color: var(--text-secondary);
-		flex-shrink: 0;
-	}
-	.clip-num.ready {
-		color: var(--accent);
-	}
-	.clip-desc {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		color: var(--text-primary);
-	}
-	.clip-dur {
-		color: var(--text-muted);
-		flex-shrink: 0;
-	}
-	.chip-ok {
-		color: var(--accent);
-		border-color: var(--accent);
-	}
-	.chip-render {
-		color: var(--warning, #eab308);
-		border-color: var(--warning, #eab308);
-	}
-	.avatar {
-		position: relative;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		overflow: hidden;
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		flex-shrink: 0;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.avatar img {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.initials {
-		font-size: 9px;
-		font-weight: 700;
-		color: var(--accent);
-		letter-spacing: 0.02em;
-	}
-</style>

calliope-web/src/lib/components/StoryStage.svelte

@@ -1,947 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { createMutation, useQueryClient } from '@tanstack/svelte-query';
-	import {
-		projects,
-		type Beat,
-		type Character,
-		type Item,
-		type Location,
-		type StoryData,
-	} from '$lib/api';
-	import {
-		buildStoryDraftPromptPreview,
-		estimateTargetSeconds,
-		recommendBeatCount,
-		recommendSceneCount,
-	} from '$lib/durationBudget';
-	import { toast } from '$lib/toast';
-	import { t } from '$lib/i18n.svelte';
-	import { agentDeepLink } from '$lib/agentTasks';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Card from '$lib/components/ui/Card.svelte';
-	import StatusChip from '$lib/components/ui/StatusChip.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Spinner from '$lib/components/ui/Spinner.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-
-	interface Props {
-		projectId: number;
-		story: StoryData;
-		configured: boolean;
-		onGoAssets?: () => void;
-	}
-
-	let { projectId, story, configured, onGoAssets }: Props = $props();
-	const client = useQueryClient();
-
-	const GENRES = [
-		'Adventure / Mystery',
-		'Drama',
-		'Sci-Fi',
-		'Fantasy',
-		'Horror',
-		'Romance',
-		'Thriller',
-	];
-	const LENGTHS_HINT = $derived(t('story.lengthsHint'));
-	const TONES = [
-		'Cinematic, atmospheric',
-		'Dark, tense',
-		'Whimsical, warm',
-		'Gritty, realistic',
-		'Epic, sweeping',
-	];
-
-	const GENRE_KEYS: Record<string, string> = {
-		'Adventure / Mystery': 'genres.adventure',
-		Drama: 'genres.drama',
-		'Sci-Fi': 'genres.scifi',
-		Fantasy: 'genres.fantasy',
-		Horror: 'genres.horror',
-		Romance: 'genres.romance',
-		Thriller: 'genres.thriller',
-	};
-	const TONE_KEYS: Record<string, string> = {
-		'Cinematic, atmospheric': 'tones.cinematic',
-		'Dark, tense': 'tones.dark',
-		'Whimsical, warm': 'tones.whimsical',
-		'Gritty, realistic': 'tones.gritty',
-		'Epic, sweeping': 'tones.epic',
-	};
-	function genreLabel(v: string): string {
-		return t(GENRE_KEYS[v] ?? v);
-	}
-	function toneLabel(v: string): string {
-		return t(TONE_KEYS[v] ?? v);
-	}
-
-	const EXAMPLE = {
-		idea: 'A lone cartographer discovers a map that rewrites itself every midnight, leading her into a forgotten city beneath the desert.',
-		genre: 'Adventure / Mystery',
-		tone: 'Cinematic, atmospheric',
-		target_duration: '2 minutes',
-	};
-
-	let editingBeat = $state<Beat | null>(null);
-	let editingChar = $state<Character | null>(null);
-	let editingLoc = $state<Location | null>(null);
-	let editingItem = $state<Item | null>(null);
-	let beatModalOpen = $state(false);
-	let charModalOpen = $state(false);
-	let locModalOpen = $state(false);
-	let itemModalOpen = $state(false);
-	let confirmExampleOpen = $state(false);
-	let deletingBeat = $state<Beat | null>(null);
-	let beatDeleteOpen = $state(false);
-	let addingBeat = $state(false);
-	// Static defaults — the $effect below syncs all drafts from the story prop.
-	let ideaDraft = $state('');
-	let genreDraft = $state(GENRES[0]);
-	let toneDraft = $state(TONES[0]);
-	let lengthDraft = $state('2 minutes');
-	let showDraftPrompt = $state(false);
-
-	type SaveState = 'idle' | 'saving' | 'saved' | 'error';
-	let saveState = $state<SaveState>('idle');
-	let savedTimer: ReturnType<typeof setTimeout> | null = null;
-
-	const beatBudget = $derived(recommendBeatCount(lengthDraft));
-	const sceneBudget = $derived(recommendSceneCount(lengthDraft));
-	const secsBudget = $derived(estimateTargetSeconds(lengthDraft));
-	const draftPromptPreview = $derived(
-		buildStoryDraftPromptPreview({
-			title: story.project.title,
-			idea: ideaDraft,
-			genre: genreDraft,
-			tone: toneDraft,
-			targetDuration: lengthDraft,
-		}),
-	);
-
-	$effect(() => {
-		ideaDraft = story.project.idea ?? '';
-		genreDraft = story.project.genre || GENRES[0];
-		toneDraft = story.project.tone || TONES[0];
-		lengthDraft = story.project.target_duration || '2 minutes';
-	});
-
-	$effect(() => {
-		return () => {
-			if (savedTimer) clearTimeout(savedTimer);
-		};
-	});
-
-	function armSavedTimer() {
-		if (savedTimer) clearTimeout(savedTimer);
-		savedTimer = setTimeout(() => {
-			if (saveState === 'saved') saveState = 'idle';
-		}, 2000);
-	}
-
-	const saveProject = createMutation({
-		mutationFn: (payload: {
-			idea?: string;
-			genre?: string;
-			tone?: string;
-			target_duration?: string;
-		}) => projects.update(projectId, payload),
-		onMutate: () => {
-			saveState = 'saving';
-		},
-		onSuccess: () => {
-			client.invalidateQueries({ queryKey: ['story'] });
-			saveState = 'saved';
-			armSavedTimer();
-		},
-		onError: (err) => {
-			saveState = 'error';
-			toast.error(err instanceof Error ? err.message : t('story.saveSettingsFailed'));
-		},
-	});
-
-	/** Autosave path — returns false on failure (mutation onError already toasted). */
-	async function persistSettings(): Promise<boolean> {
-		try {
-			await $saveProject.mutateAsync({
-				idea: ideaDraft,
-				genre: genreDraft || undefined,
-				tone: toneDraft || undefined,
-				target_duration: lengthDraft || undefined,
-			});
-			return true;
-		} catch {
-			return false;
-		}
-	}
-
-	async function loadExample() {
-		ideaDraft = EXAMPLE.idea;
-		genreDraft = EXAMPLE.genre;
-		toneDraft = EXAMPLE.tone;
-		lengthDraft = EXAMPLE.target_duration;
-		const saved = await persistSettings();
-		if (saved) toast.success(t('story.exampleLoaded'));
-	}
-
-	function requestLoadExample() {
-		if (ideaDraft.trim()) confirmExampleOpen = true;
-		else void loadExample();
-	}
-
-	/** Hand off to a fresh, project-linked agent chat with the composer pre-filled. */
-	async function draftStoryline() {
-		if (!configured) return;
-		const saved = await persistSettings();
-		if (!saved) return; // persistSettings already toasted the failure
-		goto(agentDeepLink(projectId, 'story'));
-	}
-
-	function openBeat(beat: Beat) {
-		editingBeat = { ...beat };
-		beatModalOpen = true;
-	}
-
-	async function addBeat() {
-		if (addingBeat) return;
-		addingBeat = true;
-		try {
-			const nextIndex =
-				story.beats.reduce((max, b) => Math.max(max, b.order_index), 0) + 1;
-			// No api.ts binding exists yet for POST /beats — call the endpoint directly.
-			const res = await fetch(`/api/projects/${projectId}/beats`, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					order_index: nextIndex,
-					title: t('story.newBeat', { n: nextIndex }),
-					description: '',
-				}),
-			});
-			if (!res.ok) {
-				const body = await res.text().catch(() => 'unknown error');
-				throw new Error(`${res.status}: ${body}`);
-			}
-			const created = (await res.json()) as Beat;
-			await client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.beatAdded', { index: nextIndex }));
-			openBeat(created);
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : t('story.addBeatFailed'));
-		} finally {
-			addingBeat = false;
-		}
-	}
-
-	function requestDeleteBeat(beat: Beat) {
-		deletingBeat = beat;
-		beatDeleteOpen = true;
-	}
-
-	const deleteBeatMutation = createMutation({
-		mutationFn: (beatId: number) => projects.deleteBeat(projectId, beatId),
-		onSuccess: () => {
-			client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.beatDeleted'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('story.deleteBeatFailed'));
-		},
-	});
-
-	const saveBeat = createMutation({
-		mutationFn: () =>
-			projects.updateBeat(projectId, editingBeat!.id, {
-				title: editingBeat!.title,
-				description: editingBeat!.description,
-				order_index: editingBeat!.order_index,
-			}),
-		onSuccess: () => {
-			editingBeat = null;
-			beatModalOpen = false;
-			client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.beatSaved'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('story.saveBeatFailed'));
-		},
-	});
-
-	const saveChar = createMutation({
-		mutationFn: () =>
-			projects.updateCharacter(projectId, editingChar!.id, {
-				name: editingChar!.name,
-				role: editingChar!.role,
-				age: editingChar!.age,
-				appearance: editingChar!.appearance,
-				personality: editingChar!.personality,
-				consistency_prompt: editingChar!.consistency_prompt,
-			}),
-		onSuccess: () => {
-			editingChar = null;
-			charModalOpen = false;
-			client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.characterSaved'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('story.saveCharacterFailed'));
-		},
-	});
-
-	const saveLoc = createMutation({
-		mutationFn: () =>
-			projects.updateLocation(projectId, editingLoc!.id, {
-				name: editingLoc!.name,
-				description: editingLoc!.description,
-				consistency_prompt: editingLoc!.consistency_prompt,
-			}),
-		onSuccess: () => {
-			editingLoc = null;
-			locModalOpen = false;
-			client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.locationSaved'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('story.saveLocationFailed'));
-		},
-	});
-
-	const saveItem = createMutation({
-		mutationFn: () =>
-			projects.updateItem(projectId, editingItem!.id, {
-				name: editingItem!.name,
-				description: editingItem!.description,
-				consistency_prompt: editingItem!.consistency_prompt,
-			}),
-		onSuccess: () => {
-			editingItem = null;
-			itemModalOpen = false;
-			client.invalidateQueries({ queryKey: ['story'] });
-			toast.success(t('story.itemSaved'));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('story.saveItemFailed'));
-		},
-	});
-
-	function goToAssets() {
-		goto('?stage=assets', { keepFocus: true, noScroll: true });
-	}
-
-	function beatCountLabel(n: number): string {
-		return t('story.beats', { n });
-	}
-</script>
-
-{#snippet saveIndicator()}
-	{#if saveState === 'saving'}
-		<span class="save-ind"><Spinner size="sm" /> {t('common.saving')}</span>
-	{:else if saveState === 'saved'}
-		<span class="save-ind saved"><Icon name="check" size={13} /> {t('common.saved')}</span>
-	{:else if saveState === 'error'}
-		<span class="save-ind err">
-			<Icon name="alert" size={13} /> {t('common.saveFailed')}
-			<Button variant="ghost" size="sm" onclick={() => void persistSettings()}>{t('common.retry')}</Button>
-		</span>
-	{/if}
-{/snippet}
-
-<header class="stage-header">
-	<h2>{t('story.stageTitle')}</h2>
-	<div class="stage-actions">
-		<Button
-			variant="secondary"
-			disabled={$saveProject.isPending}
-			onclick={requestLoadExample}
-		>
-			{t('story.loadExample')}
-		</Button>
-		<Button variant="primary" disabled={!configured} onclick={() => void draftStoryline()}>
-			<Icon name="sparkle" size={15} /> {t('story.draftStoryline')}
-		</Button>
-	</div>
-</header>
-
-{#if !configured}
-	<div class="banner">{t('story.llmBanner')}</div>
-{/if}
-
-<div class="stack-col">
-	<Card>
-	{#snippet header()}
-		<h3 class="card-h">{t('story.ideaTitle')}</h3>
-		{@render saveIndicator()}
-	{/snippet}
-	<textarea
-		class="field-textarea"
-		bind:value={ideaDraft}
-		rows="5"
-		placeholder={t('story.ideaPlaceholder')}
-		onblur={() => void persistSettings()}
-	></textarea>
-</Card>
-
-<Card>
-	{#snippet header()}
-		<h3 class="card-h">{t('story.settingsTitle')}</h3>
-		{@render saveIndicator()}
-	{/snippet}
-	<div class="grid-3">
-		<label class="field">
-			<span class="field-label">{t('projects.genre')}</span>
-			<select
-				class="field-select"
-				bind:value={genreDraft}
-				onchange={() => void persistSettings()}
-			>
-{#each GENRES as g}
-					<option value={g}>{genreLabel(g)}</option>
-				{/each}
-				{#if genreDraft && !GENRES.includes(genreDraft)}
-					<option value={genreDraft}>{genreLabel(genreDraft)}</option>
-				{/if}
-			</select>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.targetLength')}</span>
-			<input
-				class="field-input"
-				type="text"
-				bind:value={lengthDraft}
-				placeholder={LENGTHS_HINT}
-				onblur={() => void persistSettings()}
-			/>
-			<span class="field-hint beat-hint">
-				{t('story.lengthHint', { secs: secsBudget, beats: beatBudget, scenes: sceneBudget })}
-			</span>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('projects.tone')}</span>
-			<select
-				class="field-select"
-				bind:value={toneDraft}
-				onchange={() => void persistSettings()}
-			>
-				{#each TONES as tone}
-					<option value={tone}>{toneLabel(tone)}</option>
-				{/each}
-				{#if toneDraft && !TONES.includes(toneDraft)}
-					<option value={toneDraft}>{toneLabel(toneDraft)}</option>
-				{/if}
-			</select>
-		</label>
-	</div>
-</Card>
-
-<Card>
-	{#snippet header()}
-		<h3 class="card-h">{t('story.draftPromptTitle')}</h3>
-		<Button variant="ghost" size="sm" onclick={() => (showDraftPrompt = !showDraftPrompt)}>
-			{showDraftPrompt ? t('story.hidePrompt') : t('story.showPrompt')}
-		</Button>
-	{/snippet}
-	{#if showDraftPrompt}
-		<pre class="prompt-preview">{draftPromptPreview}</pre>
-		<p class="field-hint">
-			{t('story.promptExplain')}
-		</p>
-	{:else}
-		<p class="field-hint prompt-collapsed">
-			{t('story.promptCollapsedHint')}
-		</p>
-	{/if}
-</Card>
-
-<Card>
-	{#snippet header()}
-		<h3 class="card-h">{t('story.beatsTitle')}</h3>
-		<div class="head-actions">
-			{#if story.beats.length}
-				<StatusChip status="ready" label={beatCountLabel(story.beats.length)} />
-			{/if}
-			<Button variant="secondary" size="sm" loading={addingBeat} onclick={addBeat}>
-				<Icon name="plus" size={14} /> {t('story.addBeat')}
-			</Button>
-		</div>
-	{/snippet}
-	{#if story.beats.length === 0}
-		<EmptyState
-			title={t('story.noBeats')}
-			body={t('story.noBeatsBody')}
-		>
-			{#snippet icon()}
-				<Icon name="story" size={28} />
-			{/snippet}
-			{#snippet action()}
-				<Button variant="secondary" size="sm" loading={addingBeat} onclick={addBeat}>
-					<Icon name="plus" size={14} /> {t('story.addBeatManual')}
-				</Button>
-			{/snippet}
-		</EmptyState>
-	{:else}
-		<div class="beat-list">
-			{#each story.beats as beat (beat.id)}
-				<div class="beat-row">
-					<button type="button" class="beat" onclick={() => openBeat(beat)}>
-						<div class="beat-number">{beat.order_index}</div>
-						<div class="beat-body">
-							<h4>{beat.title}</h4>
-							<p>{beat.description}</p>
-						</div>
-					</button>
-					<div class="beat-actions">
-						<Button
-							variant="ghost"
-							size="sm"
-							title={t('story.deleteBeat', { index: beat.order_index })}
-							onclick={() => requestDeleteBeat(beat)}
-						>
-							<Icon name="trash" size={14} /><span class="sr-only">{t('story.deleteBeat', { index: beat.order_index })}</span>
-						</Button>
-					</div>
-				</div>
-			{/each}
-		</div>
-		<div class="beats-footer">
-			<Button variant="primary" onclick={goToAssets}>
-				{t('story.continueAssets')} <Icon name="chevron-right" size={15} />
-			</Button>
-		</div>
-	{/if}
-</Card>
-
-{#if story.characters.length || story.locations.length || story.items.length}
-	<Card>
-		{#snippet header()}
-			<h3 class="card-h">{t('story.extracted')}</h3>
-			<Button variant="ghost" size="sm" onclick={goToAssets}>
-				{t('story.openAssets')} <Icon name="chevron-right" size={14} />
-			</Button>
-		{/snippet}
-		<div class="chips">
-			{#each story.characters as char (char.id)}
-				<button
-					type="button"
-					class="chip"
-					onclick={() => {
-						editingChar = { ...char };
-						charModalOpen = true;
-					}}
-					title={char.appearance ?? ''}
-				>
-					<span class="chip-tag">{t('story.charTag')}</span>
-					{char.name}
-				</button>
-			{/each}
-			{#each story.locations as loc (loc.id)}
-				<button
-					type="button"
-					class="chip"
-					onclick={() => {
-						editingLoc = { ...loc };
-						locModalOpen = true;
-					}}
-					title={loc.description ?? ''}
-				>
-					<span class="chip-tag">{t('story.envTag')}</span>
-					{loc.name}
-				</button>
-			{/each}
-			{#each story.items as item (item.id)}
-				<button
-					type="button"
-					class="chip"
-					onclick={() => {
-						editingItem = { ...item };
-						itemModalOpen = true;
-					}}
-					title={item.description ?? ''}
-				>
-					<span class="chip-tag">{t('story.itemTag')}</span>
-					{item.name}
-				</button>
-			{/each}
-		</div>
-	</Card>
-{/if}
-</div>
-
-<Modal bind:open={beatModalOpen} title={t('story.editBeatTitle')} onclose={() => (editingBeat = null)}>
-	{#if editingBeat}
-		<label class="field">
-			<span class="field-label">{t('story.fieldTitle')}</span>
-			<input class="field-input" bind:value={editingBeat.title} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldDescription')}</span>
-			<textarea class="field-textarea" rows="4" bind:value={editingBeat.description}></textarea>
-		</label>
-	{/if}
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (beatModalOpen = false)}>{t('common.cancel')}</Button>
-		<Button variant="primary" loading={$saveBeat.isPending} onclick={() => $saveBeat.mutate()}>
-			{t('common.save')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<Modal bind:open={charModalOpen} title={t('story.editCharTitle')} onclose={() => (editingChar = null)}>
-	{#if editingChar}
-		<label class="field">
-			<span class="field-label">{t('story.fieldName')}</span>
-			<input class="field-input" bind:value={editingChar.name} placeholder={t('story.fieldName')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldRole')}</span>
-			<input class="field-input" bind:value={editingChar.role} placeholder={t('story.fieldRole')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldAge')}</span>
-			<input class="field-input" bind:value={editingChar.age} placeholder={t('story.fieldAge')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldAppearance')}</span>
-			<textarea
-				class="field-textarea"
-				rows="3"
-				bind:value={editingChar.appearance}
-				placeholder={t('story.fieldAppearance')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldPersonality')}</span>
-			<textarea
-				class="field-textarea"
-				rows="2"
-				bind:value={editingChar.personality}
-				placeholder={t('story.fieldPersonality')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldConsistency')}</span>
-			<textarea
-				class="field-textarea"
-				rows="2"
-				bind:value={editingChar.consistency_prompt}
-				placeholder={t('story.fieldConsistency')}
-			></textarea>
-		</label>
-	{/if}
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (charModalOpen = false)}>{t('common.cancel')}</Button>
-		<Button variant="primary" loading={$saveChar.isPending} onclick={() => $saveChar.mutate()}>
-			{t('common.save')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<Modal bind:open={locModalOpen} title={t('story.editLocTitle')} onclose={() => (editingLoc = null)}>
-	{#if editingLoc}
-		<label class="field">
-			<span class="field-label">{t('story.fieldName')}</span>
-			<input class="field-input" bind:value={editingLoc.name} placeholder={t('story.fieldName')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldDescription')}</span>
-			<textarea
-				class="field-textarea"
-				rows="3"
-				bind:value={editingLoc.description}
-				placeholder={t('story.fieldDescription')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldConsistency')}</span>
-			<textarea
-				class="field-textarea"
-				rows="2"
-				bind:value={editingLoc.consistency_prompt}
-				placeholder={t('story.fieldConsistency')}
-			></textarea>
-		</label>
-	{/if}
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (locModalOpen = false)}>{t('common.cancel')}</Button>
-		<Button variant="primary" loading={$saveLoc.isPending} onclick={() => $saveLoc.mutate()}>
-			{t('common.save')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<Modal bind:open={itemModalOpen} title={t('story.editItemTitle')} onclose={() => (editingItem = null)}>
-	{#if editingItem}
-		<label class="field">
-			<span class="field-label">{t('story.fieldName')}</span>
-			<input class="field-input" bind:value={editingItem.name} placeholder={t('story.fieldName')} />
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldDescription')}</span>
-			<textarea
-				class="field-textarea"
-				rows="3"
-				bind:value={editingItem.description}
-				placeholder={t('story.fieldDescription')}
-			></textarea>
-		</label>
-		<label class="field">
-			<span class="field-label">{t('story.fieldConsistency')}</span>
-			<textarea
-				class="field-textarea"
-				rows="2"
-				bind:value={editingItem.consistency_prompt}
-				placeholder={t('story.fieldConsistency')}
-			></textarea>
-		</label>
-	{/if}
-	{#snippet footer()}
-		<Button variant="ghost" onclick={() => (itemModalOpen = false)}>{t('common.cancel')}</Button>
-		<Button variant="primary" loading={$saveItem.isPending} onclick={() => $saveItem.mutate()}>
-			{t('common.save')}
-		</Button>
-	{/snippet}
-</Modal>
-
-<ConfirmDialog
-	bind:open={confirmExampleOpen}
-	title={t('story.confirmExampleTitle')}
-	message={t('story.confirmExampleMsg')}
-	confirmLabel={t('story.loadExample')}
-	onconfirm={() => void loadExample()}
-/>
-
-<ConfirmDialog
-	bind:open={beatDeleteOpen}
-	title={t('story.confirmDeleteBeatTitle')}
-	message={deletingBeat
-		? t('story.confirmDeleteBeatMsg', { index: deletingBeat.order_index, title: deletingBeat.title })
-		: ''}
-	confirmLabel={t('common.delete')}
-	danger
-	onconfirm={() => {
-		const id = deletingBeat?.id;
-		deletingBeat = null;
-		if (id != null) $deleteBeatMutation.mutate(id);
-	}}
-	oncancel={() => (deletingBeat = null)}
-/>
-
-<style>
-	.stage-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: var(--space-lg);
-		gap: var(--space-md);
-	}
-	.stage-header h2 {
-		margin: 0;
-		font-size: 22px;
-		font-weight: 700;
-	}
-	.stage-actions {
-		display: flex;
-		gap: var(--space-sm);
-	}
-	.banner {
-		background: rgba(245, 158, 11, 0.1);
-		border: 1px solid rgba(245, 158, 11, 0.3);
-		color: var(--warning);
-		padding: var(--space-md);
-		border-radius: var(--radius-md);
-		margin-bottom: var(--space-lg);
-		font-size: 13px;
-	}
-	.stack-col {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-md);
-	}
-	.card-h {
-		margin: 0;
-		font-size: 16px;
-		color: var(--text-secondary);
-		font-weight: 600;
-	}
-	.head-actions {
-		display: flex;
-		align-items: center;
-		gap: var(--space-sm);
-	}
-	.save-ind {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 12px;
-		color: var(--text-muted);
-	}
-	.save-ind.saved {
-		color: var(--success);
-		animation: saved-fade 2s ease forwards;
-	}
-	.save-ind.err {
-		color: var(--error);
-	}
-	@keyframes saved-fade {
-		0% {
-			opacity: 0;
-		}
-		12% {
-			opacity: 1;
-		}
-		78% {
-			opacity: 1;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
-	.grid-3 {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: var(--space-md);
-	}
-	@media (max-width: 900px) {
-		.grid-3 {
-			grid-template-columns: 1fr;
-		}
-	}
-	.grid-3 .field {
-		margin-bottom: 0;
-	}
-	.beat-hint {
-		display: block;
-	}
-	.beat-hint strong {
-		color: var(--accent);
-		font-weight: 600;
-	}
-	.prompt-preview {
-		margin: 0 0 var(--space-sm);
-		padding: 12px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		font-family: var(--font-mono);
-		font-size: 11px;
-		line-height: 1.45;
-		white-space: pre-wrap;
-		color: var(--text-secondary);
-		max-height: 280px;
-		overflow: auto;
-	}
-	.prompt-collapsed {
-		margin: 0;
-	}
-	.beat-list {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-	}
-	.beat-row {
-		display: flex;
-		align-items: flex-start;
-		gap: var(--space-xs);
-	}
-	.beat {
-		display: flex;
-		flex: 1;
-		min-width: 0;
-		gap: var(--space-md);
-		align-items: flex-start;
-		background: transparent;
-		border: 1px solid transparent;
-		border-radius: var(--radius-md);
-		padding: 8px;
-		cursor: pointer;
-		text-align: left;
-		color: inherit;
-		font: inherit;
-	}
-	.beat:hover {
-		border-color: var(--border);
-		background: var(--bg-elevated);
-	}
-	.beat:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.beat-actions {
-		flex-shrink: 0;
-		padding-top: 8px;
-	}
-	.beat-number {
-		width: 36px;
-		height: 36px;
-		border-radius: var(--radius-md);
-		background: var(--bg-elevated);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-weight: 700;
-		color: var(--text-secondary);
-		flex-shrink: 0;
-	}
-	.beat-body h4 {
-		margin: 0 0 4px;
-		font-size: 15px;
-		font-weight: 600;
-	}
-	.beat-body p {
-		margin: 0;
-		color: var(--text-secondary);
-		font-size: 14px;
-		line-height: 1.45;
-	}
-	.beats-footer {
-		display: flex;
-		justify-content: flex-end;
-		margin-top: var(--space-md);
-		padding-top: var(--space-md);
-		border-top: 1px solid var(--border);
-	}
-	.chips {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-	.chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		padding: 6px 10px;
-		color: var(--text-primary);
-		font-size: 13px;
-		cursor: pointer;
-	}
-	.chip:hover {
-		border-color: var(--accent);
-	}
-	.chip:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.chip-tag {
-		font-size: 10px;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--accent);
-		font-weight: 700;
-	}
-	.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
-	}
-</style>

calliope-web/src/lib/components/ToastHost.svelte

@@ -37,8 +37,13 @@
 					<span class="dot"></span>
 					<Icon name={kindIcon[toast.kind]} size={15} />
 				</span>
-				<span class="msg">{toast.message}</span>
-				<button
+			<span class="msg">{toast.message}</span>
+			{#if toast.action}
+				<button type="button" class="action" onclick={() => (toast.action?.run(), dismissToast(toast.id))}>
+					{toast.action.label}
+				</button>
+			{/if}
+			<button
 					type="button"
 					class="dismiss"
 					aria-label={t('toast.dismiss')}
@@ -56,8 +61,9 @@
 	.toast-host {
 		position: fixed;
 		right: 24px;
-		bottom: 24px;
-		z-index: 1000;
+		bottom: var(--toast-bottom, 24px);
+		/* Above every overlay, incl. the 10000 lightbox, so feedback stays visible. */
+		z-index: 10001;
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
@@ -104,6 +110,29 @@
 		color: var(--text-primary);
 		font-weight: 500;
 	}
+	/* §四.5: Toast 动作（如撤销）为金色文字 */
+	.action {
+		flex-shrink: 0;
+		align-self: center;
+		padding: var(--sp-1) var(--sp-2);
+		border: 0;
+		border-radius: var(--r-sm);
+		background: transparent;
+		color: var(--accent);
+		font: inherit;
+		font-size: var(--fs-aux);
+		font-weight: 600;
+		cursor: pointer;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.action:hover {
+			background: var(--accent-soft);
+		}
+	}
+	.action:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
 	.dismiss {
 		display: inline-flex;
 		align-items: center;

calliope-web/src/lib/components/agent/AgentArtifactCard.svelte

@@ -132,7 +132,7 @@
 		border-color: color-mix(in srgb, var(--success) 30%, var(--border));
 	}
 	.artifact.failed {
-		border-color: rgba(239, 68, 68, 0.4);
+		border-color: var(--err-line);
 	}
 	.meta {
 		display: flex;
@@ -249,12 +249,12 @@
 		width: 44px;
 		height: 44px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.55);
-		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
+		background: var(--media-scrim);
+		box-shadow: 0 0 0 1px var(--on-media-line);
 	}
 	.play-badge :global(svg) {
 		position: absolute;
-		color: #fff;
+		color: var(--on-media);
 		fill: currentColor;
 		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
 		margin-left: 2px;

calliope-web/src/lib/components/agent/AgentChat.svelte

@@ -10,6 +10,7 @@
 	import { t } from '$lib/i18n.svelte';
 
 	interface Props {
+        studio?: boolean;
 		messages: AgentMessage[];
 		/** In-flight tool calls for the current turn (from agent.tool SSE). */
 		liveTools: { tool: string; args?: Record<string, unknown> | null; result?: unknown; phase: 'running' | 'done' | 'error' }[];
@@ -31,6 +32,7 @@
 	}
 
 	let {
+        studio = false,
 		messages,
 		liveTools,
 		streaming,
@@ -46,6 +48,21 @@
 	let listEl = $state<HTMLDivElement | null>(null);
 	let pinned = $state(true);
 
+    // A user message starts a turn; keep different named assistants distinct.
+    const studioGroups = $derived.by(() => {
+        const groups: AgentMessage[][] = [];
+        for (const message of messages) {
+            if (!['user', 'assistant', 'tool'].includes(message.role)) continue;
+            const previous = groups.at(-1);
+            const author = previous?.find(m => m.role === 'assistant')?.agent_name;
+            if (!previous || message.role === 'user' || previous[0].role === 'user' ||
+                (message.role === 'assistant' && author !== undefined && message.agent_name !== author)) {
+                groups.push([message]);
+            } else previous.push(message);
+        }
+        return groups;
+    });
+
 	// Derived tool rows carry no status — infer failure from the result shape,
 	// same as the live SSE path does.
 	function toolPhase(m: AgentMessage): 'done' | 'error' {
@@ -61,6 +78,7 @@
 
 	/** Later tool results (wait_for_jobs) often have the finished status + paths. */
 	const trailJobsById = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Each derivation rebuilds this tool-result lookup from messages; only the completed Map escapes, with no later mutation.
 		const map = new Map<number, ArtifactJob>();
 		for (const row of messages) {
 			if (row.role !== 'tool' || !row.tool_result || typeof row.tool_result !== 'object') continue;
@@ -188,6 +206,35 @@
 </script>
 
 <div class="chat" bind:this={listEl} onscroll={onScroll}>
+    {#if studio}
+      {#if loading}<p class="studio-empty">{t('agentChat.loading')}</p>{/if}
+      {#each studioGroups as group (group[0].id)}
+          <div class="studio-msg" class:me={group[0].role==='user'}>
+            <div class="studio-avatar" title={group[0].role==='user'?'我':agentDisplayName(group[0].agent_name)}>{#if group[0].role==='user'}我{:else}<Icon name="project-agent" size={14}/>{/if}</div>
+            <div class="studio-message-body">
+              {#each group as m (m.id)}
+                {#if m.role==='tool'}
+                  <AgentToolCard studio name={m.tool_name??'tool'} args={m.tool_args} result={m.tool_result} phase={toolPhase(m)}/>
+                  {#each artifactJobs(m) as job(job.id)}<AgentArtifactCard {job}/>{/each}
+                {:else}
+                  {#if m.reasoning}<ReasoningPanel reasoning={m.reasoning}/>{/if}
+<div class="studio-bubble" data-message-id={m.id} class:failed={m.status==='error'||m.status==='cancelled'}>{#if m.status==='steering'}<small>{t('agentChat.steering')}</small>{/if}{#each m.attachments??[] as a (a.path)}<a href={assetUrl(a.path)??'#'} target="_blank" rel="noopener external">{a.name}</a>{/each}{#each bubbleParts(m.content,(m.mentions??[]) as WorkflowMention[]) as part,i (`${i}-${part.type}`)}{#if part.type==='chip'}<span class="wf-chip">{part.text}</span>{:else}{part.text}{/if}{/each}</div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+      {/each}
+      {#if lastQuestion && !running}<div class="question-card"><p>{lastQuestion.question}</p><div class="question-options">{#each lastQuestion.options as opt(opt)}<button type="button" class="question-option" onclick={()=>onAnswer?.(opt,lastQuestion.scope,lastQuestion.questionSeq)}>{opt}</button>{/each}</div></div>{/if}
+      {#if running && (liveTools.length || streamingReasoning || streaming)}
+        <div class="studio-msg"><div class="studio-avatar"><Icon name="project-agent" size={14}/></div><div class="studio-message-body">
+          {#each liveTools as tool,i(i)}<AgentToolCard studio name={tool.tool} args={tool.args} result={tool.result} phase={tool.phase}/>{/each}
+          {#if streamingReasoning}<ReasoningPanel reasoning={streamingReasoning}/>{/if}
+          {#if streaming}<div class="studio-bubble">{streaming}</div>{/if}
+        </div></div>
+      {/if}
+      {#if !loading&&!messages.length&&!running}<p class="studio-empty">{t('agentChat.emptyHint')}</p>{/if}
+    {:else}
+
 	{#if loading}
 		<div class="empty">
 			<p class="empty-hint">{t('agentChat.loading')}</p>
@@ -328,9 +375,20 @@
 			</div>
 		</div>
 	{/if}
+    {/if}
 </div>
 
 <style>
+    .studio-msg {display:flex;gap:10px;max-width:760px;}
+    .studio-msg.me {align-self:flex-end;flex-direction:row-reverse;}
+    .studio-avatar {width:28px;height:28px;border-radius:var(--agent-radius-8);flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--sc-agent) 18%,transparent);color:var(--sc-agent);}
+    .studio-msg.me .studio-avatar {background:var(--bg-3);color:var(--tx-2);}
+    .studio-message-body {flex:var(--agent-message-flex);display:flex;flex-direction:column;gap:10px;min-width:0;}
+    .studio-bubble {padding:10px 13px;border-radius:var(--agent-bubble-radius);background:var(--bg-2);border:1px solid var(--line);font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word;}
+    .studio-msg.me .studio-bubble {background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 25%,transparent);}
+    .studio-bubble.failed {color:var(--err);border-color:var(--err);}
+    .studio-empty {color:var(--tx-3);font-size:12px;}
+
 	.chat {
 		flex: 1;
 		min-height: 0;
@@ -341,7 +399,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 14px;
-		padding: 4px 4px 12px;
+		padding: var(--chat-padding, 4px 4px 12px);
 	}
 	.empty {
 		margin: auto;
@@ -357,16 +415,13 @@
 	.empty-mark {
 		width: 48px;
 		height: 48px;
-		border-radius: var(--radius-md);
+		border-radius: var(--r-md);
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--accent);
-		background:
-			radial-gradient(circle at 30% 25%, rgba(139, 92, 246, 0.35) 0%, transparent 60%),
-			var(--bg-elevated);
-		border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-		box-shadow: 0 0 32px var(--accent-glow);
+		color: var(--text-2);
+		background: var(--bg-3);
+		border: 1px solid var(--line-2);
 		margin-bottom: 6px;
 	}
 	.empty-title {
@@ -391,21 +446,24 @@
 		margin-top: 16px;
 	}
 	.suggestion {
-		border: 1px solid var(--border);
-		background: var(--bg-surface);
-		color: var(--text-secondary);
-		border-radius: 999px;
-		padding: 8px 16px;
-		font-size: 13px;
+		border: 1px solid var(--line);
+		background: var(--bg-2);
+		color: var(--text-2);
+		border-radius: var(--r-pill);
+		padding: var(--sp-3) var(--sp-6);
+		font-size: var(--fs-body);
 		font-weight: 500;
 		font-family: inherit;
 		cursor: pointer;
-		transition: all 0.15s;
+		transition:
+			color var(--d-state) ease,
+			border-color var(--d-state) ease,
+			background-color var(--d-state) ease;
 	}
 	.suggestion:hover {
-		color: var(--text-primary);
-		border-color: var(--accent);
-		background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
+		color: var(--text);
+		border-color: var(--line-2);
+		background: var(--bg-4);
 	}
 	.suggestion:focus-visible {
 		outline: 2px solid var(--accent);
@@ -430,11 +488,11 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
-		font-size: 11px;
+		font-size: var(--fs-mini);
 		font-weight: 700;
 		letter-spacing: 0.06em;
 		text-transform: uppercase;
-		color: var(--agent, var(--accent));
+		color: var(--agent, var(--text-2));
 		margin-bottom: 4px;
 		padding-left: 2px;
 	}
@@ -443,7 +501,7 @@
 		height: 8px;
 		border-radius: 999px;
 		flex-shrink: 0;
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent, var(--accent)) 25%, transparent);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent, var(--text-2)) 25%, transparent);
 	}
 	.reasoning-wrap {
 		margin-bottom: 4px;
@@ -451,28 +509,29 @@
 	}
 	.bubble {
 		max-width: 86%;
-		border-radius: var(--radius-md);
+		border-radius: var(--r-lg);
 		padding: 10px 14px;
 		font-size: 13.5px;
 		line-height: 1.6;
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+	/* 对话气泡按规范 §3.2/§3.6：用户 --bg-3，Agent --bg-2 + --line 描边。 */
 	.user-bubble {
-		background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
-		border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-		color: var(--text-primary);
+		background: var(--bg-3);
+		border: 1px solid var(--line);
+		color: var(--text);
 	}
 	.user-bubble.steering {
 		border-style: dashed;
 	}
 	.steer-tag {
 		display: inline-block;
-		font-size: 10px;
+		font-size: var(--fs-mini);
 		font-weight: 600;
 		letter-spacing: 0.06em;
 		text-transform: uppercase;
-		color: var(--accent);
+		color: var(--text-3);
 		margin-bottom: 4px;
 	}
 	.user-thumbs {
@@ -486,36 +545,37 @@
 		width: 48px;
 		height: 48px;
 		object-fit: cover;
-		border-radius: var(--radius-sm);
-		border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-		background: var(--bg-elevated);
+		border-radius: var(--r-sm);
+		border: 1px solid var(--line-2);
+		background: var(--bg-3);
 	}
 	.user-thumb.file {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--text-muted);
+		color: var(--text-3);
 	}
 	.user-text {
 		white-space: pre-wrap;
 	}
+	/* 工作流提及为次级内容：中性底 + --text，不占金色。 */
 	.wf-chip {
 		display: inline;
 		padding: 1px 7px;
 		margin: 0 1px;
-		border-radius: 999px;
-		background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
-		border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
-		color: var(--accent);
+		border-radius: var(--r-pill);
+		background: var(--bg-4);
+		border: 1px solid var(--line-2);
+		color: var(--text);
 		font-weight: 600;
-		font-size: 13px;
+		font-size: var(--fs-body);
 		white-space: nowrap;
 	}
 	.assistant-bubble {
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-left: 3px solid var(--agent, var(--accent));
-		color: var(--text-primary);
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-left: 3px solid var(--agent, var(--text-2));
+		color: var(--text);
 	}
 	.question-card {
 		display: flex;
@@ -525,15 +585,15 @@
 		max-width: 420px;
 		margin: 2px 0 6px;
 		padding: 12px 14px;
-		border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-		border-radius: var(--radius-md);
-		background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface));
+		border: 1px solid var(--line);
+		border-radius: var(--r-md);
+		background: var(--bg-2);
 	}
 	.question-text {
 		margin: 0;
-		font-size: 13px;
+		font-size: var(--fs-body);
 		line-height: 1.5;
-		color: var(--text-primary);
+		color: var(--text);
 		white-space: pre-wrap;
 	}
 	.question-options {
@@ -542,40 +602,39 @@
 		gap: 6px;
 	}
 	.question-option {
-		border: 1px solid color-mix(in srgb, var(--agent, var(--accent)) 45%, transparent);
-		background: var(--bg-elevated);
-		color: var(--text-primary);
-		border-radius: var(--radius-sm);
+		border: 1px solid var(--line-2);
+		background: var(--bg-3);
+		color: var(--text);
+		border-radius: var(--r-sm);
 		padding: 8px 12px;
-		font-size: 13px;
+		font-size: var(--fs-body);
 		font-weight: 600;
 		cursor: pointer;
 		text-align: left;
 		transition:
-			background 120ms ease,
-			border-color 120ms ease;
+			background-color var(--d-press) ease,
+			border-color var(--d-press) ease;
 	}
 	.question-option:hover:enabled {
-		background: color-mix(in srgb, var(--agent, var(--accent)) 18%, var(--bg-elevated));
-		border-color: var(--agent, var(--accent));
+		background: var(--bg-4);
+		border-color: var(--agent, var(--text-2));
 	}
 	.question-option:disabled {
 		opacity: 0.5;
 		cursor: default;
 	}
 	.question-option.affirmative {
-		border-color: var(--accent);
-		color: var(--accent);
+		border-color: var(--line-2);
 	}
 	.question-hint {
 		margin: 0;
-		font-size: 11px;
-		color: var(--text-muted);
+		font-size: var(--fs-mini);
+		color: var(--text-3);
 	}
 	.assistant-bubble.err {
-		border-color: rgba(239, 68, 68, 0.4);
-		border-left-color: rgba(239, 68, 68, 0.6);
-		color: var(--error);
+		border-color: var(--err-line);
+		border-left-color: var(--err);
+		color: var(--err);
 	}
 	.bubble.live {
 		display: flex;
@@ -604,7 +663,7 @@
 		width: 7px;
 		height: 14px;
 		margin-left: 2px;
-		background: var(--accent);
+		background: var(--run);
 		animation: blink 1s step-end infinite;
 		vertical-align: text-bottom;
 	}
@@ -617,14 +676,15 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		color: var(--text-secondary);
-		font-size: 13px;
+		color: var(--text-2);
+		font-size: var(--fs-body);
 	}
+	/* 进行中指示 = 信号青（§1.3），不占金色。 */
 	.pulse {
 		width: 8px;
 		height: 8px;
 		border-radius: 999px;
-		background: var(--accent);
+		background: var(--run);
 		animation: pulse 1.1s ease-in-out infinite;
 	}
 	@keyframes pulse {

calliope-web/src/lib/components/agent/AgentComposer.svelte

@@ -20,6 +20,7 @@
 	import { t } from '$lib/i18n.svelte';
 
 interface Props {
+	studio?: boolean;
 	running: boolean;
 	onSend: (payload: AgentComposerPayload) => void;
 	onCancel: () => void;
@@ -34,6 +35,7 @@ interface Props {
 }
 
 let {
+	studio = false,
 	running,
 	onSend,
 	onCancel,
@@ -76,6 +78,7 @@ let {
 		void draftNonce;
 		if (draftNonce === 0) return;
 		if (!editorEl) return;
+		// eslint-disable-next-line svelte/no-dom-manipulating -- Template owns the empty editor shell; its user-editable subtree is imperative. Restore draft text before caret placement/focus and serialization.
 		editorEl.textContent = draft;
 		placeCaretAtEnd(editorEl);
 		editorEl.focus();
@@ -161,6 +164,7 @@ let {
 			attachments: [...attachments],
 		};
 		if (payloadIsEmpty(payload)) return;
+		// eslint-disable-next-line svelte/no-dom-manipulating -- Template does not render editor children; after serializing text/chips, clear the user-owned subtree before onSend, preserving submit/reset behavior.
 		if (editorEl) editorEl.innerHTML = '';
 		attachments = [];
 		mentionOpen = false;
@@ -291,8 +295,10 @@ let {
 			chip.after(space);
 			placeCaretAfter(space);
 		} else {
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Editor owns its children: fallback appends a noneditable workflow chip whose dataset serialize reads; keep template shell and caret logic intact.
 			editorEl.appendChild(makeChip(wf));
 			const space = document.createTextNode('\u00a0');
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Editor-owned trailing space provides a text caret after the workflow chip; placeCaretAfter uses this exact node.
 			editorEl.appendChild(space);
 			placeCaretAfter(space);
 		}
@@ -327,8 +333,10 @@ let {
 			chip.after(space);
 			placeCaretAfter(space);
 		} else {
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Editor owns its children: fallback appends a noneditable skill chip whose dataset serialize reads; keep template shell and caret logic intact.
 			editorEl.appendChild(makeSkillChip(skill));
 			const space = document.createTextNode('\u00a0');
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Editor-owned trailing space provides a text caret after the skill chip; placeCaretAfter uses this exact node.
 			editorEl.appendChild(space);
 			placeCaretAfter(space);
 		}
@@ -543,6 +551,7 @@ let {
 			onpaste={onPaste}
 		></div>
 		<div class="actions">
+            {#if studio}<button type="button" class="b4-chip workflow-shortcut" disabled={busy} onclick={()=>{editorEl?.focus();mentionQuery='';mentionIndex=0;mentionAnchor=caretAnchor();mentionLocked=false;mentionOpen=true;}}>@ 工作流</button>{/if}
 			<input
 				bind:this={fileInput}
 				type="file"
@@ -553,29 +562,31 @@ let {
 			/>
 			<button
 				type="button"
-				class="attach"
+				class={studio ? "b4-chip" : "attach"}
 				title={t('agentComposer.attach')}
 				disabled={busy}
 				onclick={() => fileInput?.click()}
 			>
-				<Icon name="paperclip" size={16} />
+				{#if studio}+ 参考材料{:else}<Icon name="paperclip" size={16} />{/if}
 			</button>
+			{#if studio}<span class="b4-grow"></span>{/if}
 			{#if running}
-				<button type="button" class="send stop" onclick={onCancel} title={t('agentComposer.stopTitle')}>
-					<Icon name="stop" size={14} />
+				<button type="button" class={studio ? "a-btn sm ghost stop" : "send stop"} onclick={onCancel} title={t('agentComposer.stopTitle')}>
+					{#if !studio}<Icon name="stop" size={14} />{/if}
 					{t('common.stop')}
 				</button>
 			{/if}
 			<button
 				type="button"
-				class="send"
+				class={studio ? "a-btn sm primary" : "send"}
 				class:steer={running}
 				onclick={submit}
 				disabled={!sendable}
 				title={running ? t('agentComposer.steerTitle') : t('agentComposer.sendTitle')}
 			>
+				{#if studio}<Icon name="agent-send" size={14} />{/if}
 				{running ? t('agentComposer.steer') : t('common.send')}
-				<Icon name="chevron-right" size={14} />
+				{#if !studio}<Icon name="chevron-right" size={14} />{/if}
 			</button>
 		</div>
 	</div>
@@ -611,8 +622,8 @@ let {
 		gap: 8px;
 		width: 100%;
 		min-width: 0;
-		padding-top: 10px;
-		border-top: 1px solid var(--border);
+		padding-top: var(--composer-top-padding, 10px);
+		border-top: var(--composer-top-border, 1px) solid var(--border);
 	}
 	.composer.drag-over .box {
 		border-color: var(--accent);
@@ -668,8 +679,8 @@ let {
 		justify-content: center;
 		border: none;
 		border-radius: 999px;
-		background: rgba(0, 0, 0, 0.65);
-		color: #fff;
+		background: var(--media-scrim);
+		color: var(--on-media);
 		cursor: pointer;
 		padding: 0;
 	}
@@ -680,18 +691,19 @@ let {
 	}
 	.box {
 		display: flex;
-		align-items: flex-end;
+		align-items: var(--composer-box-align, flex-end);
+		flex-direction: var(--composer-box-direction, row);
 		gap: 8px;
 		min-width: 0;
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
+		background: var(--composer-box-bg, var(--bg-surface));
+		border: var(--composer-box-border, 1px) solid var(--border);
 		border-radius: var(--radius-md);
-		padding: 8px 8px 8px 12px;
+		padding: var(--composer-box-padding, 8px 8px 8px 12px);
 	}
 	.editor {
 		flex: 1;
 		min-width: 0;
-		min-height: 28px;
+		min-height: var(--composer-editor-height, 28px);
 		max-height: 160px;
 		overflow-y: auto;
 		color: var(--text-primary);
@@ -711,12 +723,12 @@ let {
 		display: inline;
 		padding: 1px 7px;
 		margin: 0 1px;
-		border-radius: 999px;
-		background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
-		border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
-		color: var(--accent);
+		border-radius: var(--r-pill);
+		background: var(--bg-4);
+		border: 1px solid var(--line-2);
+		color: var(--text);
 		font-weight: 600;
-		font-size: 13px;
+		font-size: var(--fs-body);
 		white-space: nowrap;
 		user-select: none;
 	}
@@ -724,33 +736,37 @@ let {
 		display: inline;
 		padding: 1px 7px;
 		margin: 0 1px;
-		border-radius: 999px;
-		background: color-mix(in srgb, #38bdf8 20%, var(--bg-elevated));
-		border: 1px solid color-mix(in srgb, #38bdf8 45%, transparent);
-		color: #7dd3fc;
+		border-radius: var(--r-pill);
+		background: var(--bg-4);
+		border: 1px dashed var(--line-2);
+		color: var(--text-2);
 		font-weight: 600;
-		font-size: 13px;
+		font-size: var(--fs-body);
 		white-space: nowrap;
 		user-select: none;
 	}
 	.actions {
 		display: flex;
+		justify-content:var(--composer-actions-justify,normal);
 		align-items: center;
-		gap: 6px;
+		gap: var(--composer-actions-gap, 6px);
 		flex-shrink: 0;
 	}
 	.attach {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 36px;
-		height: 36px;
+		width: var(--composer-attach-width,36px);
+		height: var(--composer-attach-height,36px);
+		padding:var(--composer-attach-padding,0px);
+		margin-right:var(--composer-attach-margin,0px);
 		border: none;
 		border-radius: var(--radius-md);
 		background: transparent;
 		color: var(--text-secondary);
 		cursor: pointer;
 	}
+	.workflow-shortcut {font-size:12px;white-space:nowrap;flex:none;}
 	.attach:hover:not(:disabled) {
 		color: var(--text-primary);
 		background: var(--bg-elevated);
@@ -767,12 +783,12 @@ let {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
-		height: 36px;
+		height: var(--composer-send-height, 36px);
 		padding: 0 14px;
 		border-radius: var(--radius-md);
 		border: 1px solid var(--accent);
-		background: var(--accent);
-		color: #fff;
+		background: var(--composer-send-bg, var(--accent));
+		color: var(--accent-ink);
 		font-size: 13px;
 		font-weight: 600;
 		cursor: pointer;
@@ -785,7 +801,7 @@ let {
 	.send.stop {
 		background: transparent;
 		color: var(--error);
-		border-color: rgba(239, 68, 68, 0.5);
+		border-color: var(--err-line);
 	}
 	.send.steer {
 		color: var(--accent);

calliope-web/src/lib/components/agent/AgentSessionSidebar.svelte

@@ -28,6 +28,7 @@
 
 	const sandbox = $derived(sessions.filter((s) => s.project_id == null));
 	const grouped = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Local grouping accumulator is consumed as an array in this derivation; sessions drive recomputation, not Map writes.
 		const map = new Map<number, { project: AgentSession['project']; items: AgentSession[] }>();
 		for (const s of sessions) {
 			if (s.project_id == null) continue;
@@ -431,6 +432,6 @@
 	}
 	.del:hover {
 		color: var(--error);
-		background: rgba(239, 68, 68, 0.12);
+		background: var(--err-soft);
 	}
 </style>

calliope-web/src/lib/components/agent/AgentToolCard.svelte

@@ -3,13 +3,14 @@
 	import { t } from '$lib/i18n.svelte';
 
 	interface Props {
+		studio?: boolean;
 		name: string;
 		args?: Record<string, unknown> | null;
 		result?: unknown;
 		phase: 'running' | 'done' | 'error';
 	}
 
-	let { name, args = null, result = null, phase }: Props = $props();
+	let { studio = false, name, args = null, result = null, phase }: Props = $props();
 	let open = $state(false);
 
 	function fmt(value: unknown): string {
@@ -21,18 +22,19 @@
 	}
 </script>
 
-<div class="tool-card" class:error={phase === 'error'}>
+<div class="tool-card" class:done={studio && phase === 'done'} class:error={phase === 'error'}>
 	<button type="button" class="head" onclick={() => (open = !open)} aria-expanded={open}>
-		<span class="dot" class:running={phase === 'running'}></span>
+		{#if studio}<Icon name="nav-flow" size={14} /><span>调用</span>{:else}<span class="dot" class:running={phase === 'running'}></span>{/if}
 		<span class="name mono">{name}</span>
+        {#if studio && args && Object.keys(args).length}<span class="summary">· {Object.entries(args).map(([key, value]) => `${key}=${JSON.stringify(value)}`).join(' · ')}</span>{/if}
 		{#if phase === 'running'}
-			<span class="state">{t('agentTool.running')}</span>
+			<span class={studio ? "state a-tag" : "state"}>{t('agentTool.running')}</span>
 		{:else if phase === 'error'}
-			<span class="state err-text">{t('agentTool.failed')}</span>
+			<span class={studio ? "state a-tag err-text" : "state err-text"}>{t('agentTool.failed')}</span>
 		{:else}
-			<span class="state ok-text">{t('agentTool.done')}</span>
+			<span class={studio ? "state a-tag ok-text" : "state ok-text"}>{t('agentTool.done')}</span>
 		{/if}
-		<span class="chev"><Icon name="chevron-down" size={13} /></span>
+		{#if !studio}<span class="chev"><Icon name="chevron-down" size={13} /></span>{/if}
 	</button>
 	{#if open}
 		<div class="body">
@@ -54,40 +56,47 @@
 
 <style>
 	.tool-card {
-		border: 1px solid var(--border);
-		border-radius: var(--radius-sm);
-		background: var(--bg-elevated);
+        font-size: var(--tool-font, inherit);
+		border: 1px solid var(--tool-border, var(--border));
+		border-radius: var(--tool-card-radius, var(--radius-sm));
+		background: var(--tool-card-bg, var(--bg-elevated));
 		overflow: hidden;
 	}
 	.tool-card.error {
-		border-color: rgba(239, 68, 68, 0.45);
+		border-color: var(--err-line);
 	}
 	.head {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 		width: 100%;
-		padding: 7px 10px;
+		padding: var(--tool-head-padding, 7px 10px);
 		background: transparent;
 		border: none;
 		cursor: pointer;
-		color: var(--text-secondary);
-		font-size: 12px;
+		color: var(--tool-head-color, var(--text-secondary));
+		font-size: var(--tool-head-font, 12px);
 		text-align: left;
 	}
 	.head:hover {
 		color: var(--text-primary);
-		background: rgba(255, 255, 255, 0.03);
+		background: var(--bg-3);
 	}
 	.name {
-		flex: 1;
+		flex: var(--tool-name-flex, 1);
 		min-width: 0;
-		font-size: 12px;
-		color: var(--text-primary);
+		font-size: var(--tool-name-font, 12px);
+		color: var(--tool-name-color, var(--text-primary));
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	.summary {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
 	.dot {
 		width: 7px;
 		height: 7px;
@@ -115,10 +124,10 @@
 		flex-shrink: 0;
 	}
 	.ok-text {
-		color: var(--success);
+		color: var(--tool-ok-color, var(--success));
 	}
 	.err-text {
-		color: var(--error);
+		color: var(--tool-error-color, var(--error));
 	}
 	.chev {
 		display: inline-flex;

calliope-web/src/lib/components/agent/AgentWorkspace.svelte

@@ -0,0 +1,982 @@
+<script lang="ts">
+  import "./workspace.css";
+  import { onMount, untrack } from "svelte";
+  import { page } from "$app/state";
+  import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
+  import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+  import { toStore } from "svelte/store";
+  import AppShell from "$lib/components/shell/AppShell.svelte";
+  import type { IconName } from "$lib/components/ui/icons";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import AgentChat from "./AgentChat.svelte";
+  import AgentPlanPanel from "./AgentPlanPanel.svelte";
+  import Modal from "$lib/components/ui/Modal.svelte";
+  import AgentComposer from "./AgentComposer.svelte";
+  import {
+    agentApi,
+    resultsApi,
+    jobsApi,
+    assetUrl,
+    settings,
+    workflows,
+    workbenchApi,
+    type AgentDeliverable,
+    type AgentSession,
+    type WorkbenchStageKey,
+  } from "$lib/api";
+  import { createUploadManager } from "$lib/comfy/useUpload.svelte";
+  import type { AgentAttachment } from "$lib/agentComposer";
+  import type { AgentComposerPayload } from "$lib/agentComposer";
+  import { connectEvents } from "$lib/events";
+  import { toast } from "$lib/toast";
+
+  const client = useQueryClient();
+  const stageNames: Record<WorkbenchStageKey, string> = {
+    script: "剧本创作",
+    style: "视觉设计",
+    storyboard: "分镜设计",
+    assets: "素材资产",
+    shot: "镜头脚本",
+  };
+  const assistantIcons: Record<string, IconName> = {
+    script: "project-book",
+    style: "nav-palette",
+    storyboard: "project-grid",
+    assets: "project-image",
+    shot: "project-film",
+  };
+  const assistantColors: Record<string, string> = {
+    script: "var(--sc-agent)",
+    style: "var(--gold)",
+    storyboard: "var(--sc-image)",
+    assets: "var(--sc-asset)",
+    shot: "var(--sc-video)",
+  };
+  const assistantDescriptions: Record<string, string> = {
+    script: "故事、人物、场次与台词",
+    style: "风格板、色彩与参考图",
+    storyboard: "镜头拆分、景别与时长",
+    assets: "角色、场景、道具出图",
+    shot: "逐镜视频提示词与生成",
+  };
+  const keys = Object.keys(stageNames) as WorkbenchStageKey[];
+  const registry = createQuery({
+    queryKey: ["agents-registry"],
+    queryFn: agentApi.listNamedAgents,
+  });
+  const config = createQuery({ queryKey: ["settings"], queryFn: settings.get });
+  const skills = createQuery({
+    queryKey: ["b4-skills"],
+    queryFn: () => agentApi.listSkillsAdmin(),
+  });
+  const wfQuery = createQuery({
+    queryKey: ["b4-workflows"],
+    queryFn: workflows.list,
+  });
+  const projects = createQuery({
+    queryKey: ["b4-projects"],
+    queryFn: agentApi.listLinkableProjects,
+  });
+  const sessions = createQuery({
+    queryKey: ["b4-sessions"],
+    queryFn: async () =>
+      (
+        await Promise.all([
+          agentApi.listSessions(),
+          ...keys.map(agentApi.listAgentSessions),
+        ])
+      )
+        .flat()
+        .sort((a, b) => b.updated_at.localeCompare(a.updated_at)),
+  });
+  const allResults = createQuery({
+    queryKey: ["b4-results"],
+    queryFn: () => resultsApi.list(),
+  });
+  const activeId = $derived(
+    Number(page.url.searchParams.get("session")) || null,
+  );
+  const session = createQuery(
+    toStore(() => ({
+      queryKey: ["agent-session", activeId],
+      queryFn: () => agentApi.getSession(activeId!),
+      enabled: activeId != null,
+    })),
+  );
+  const taskResults = $derived(
+    ($allResults.data ?? []).filter((r) => r.session_id === activeId),
+  );
+  let filter = $state("all");
+  let agentKey = $state<WorkbenchStageKey | "">("");
+  let projectId = $state<number | null>(null);
+  let draft = $state("");
+  let busy = $state(false);
+  let error = $state("");
+  let streaming = $state("");
+  let reasoning = $state("");
+  let particles = $state<HTMLCanvasElement | null>(null);
+  let liveTools = $state<
+    {
+      tool: string;
+      args?: Record<string, unknown>;
+      result?: unknown;
+      phase: "running" | "done" | "error";
+    }[]
+  >([]);
+  const running = $derived($session.data?.running === true);
+  let editing = $state<AgentDeliverable | null>(null);
+  let text = $state("");
+  let targetProject = $state<number | null>(null);
+  let targetStage = $state<WorkbenchStageKey>("script");
+  let saving = $state(false);
+  let dirty = $state(false);
+  let artifactTab = $state("shots");
+  let compareOpen = $state(false);
+  let previousText = $state("");
+  async function comparePrevious() {
+    if (!editing) return;
+    try {
+      const versions = await resultsApi.versions(editing.id);
+      previousText = versions[0]?.content ?? "";
+      compareOpen = true;
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+  function parseContent(value: string): Record<string, unknown> | null {
+    try {
+      const start = value.indexOf("{");
+      const end = value.lastIndexOf("}");
+      return JSON.parse(value.slice(start, end + 1));
+    } catch {
+      return null;
+    }
+  }
+  function editShot(index: number, key: string, value: string | number) {
+    const data = parseContent(text);
+    if (!data || !Array.isArray(data.shots)) return;
+    data.shots[index] = { ...data.shots[index], [key]: value };
+    text = JSON.stringify(data, null, 2);
+    dirty = true;
+  }
+
+  let selectedSkill = $state("");
+  let uploadInput = $state<HTMLInputElement | null>(null);
+  let attachments = $state<AgentAttachment[]>([]);
+  const uploads = createUploadManager();
+  let uploadBusy = $state(false);
+  async function upload(event: Event) {
+    const files = Array.from((event.target as HTMLInputElement).files ?? []);
+    uploadBusy = true;
+    try {
+      for (const file of files.slice(0, 8 - attachments.length)) {
+        const path = await uploads.upload("b4-reference", file);
+        const meta = uploads.uploadMetaFor(path);
+        attachments.push({ path, name: meta.name, kind: meta.kind });
+      }
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      uploadBusy = false;
+      (event.target as HTMLInputElement).value = "";
+    }
+  }
+  async function assignModel(id: string) {
+    busy = true;
+    try {
+      await settings.update({
+        agent_llm_assignments: {
+          [activeAgent?.llm_role ?? "main"]: id || null,
+        },
+      });
+      await client.invalidateQueries({ queryKey: ["settings"] });
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      busy = false;
+    }
+  }
+
+  const shownTasks = $derived(
+    ($sessions.data ?? []).filter(
+      (s) =>
+        filter === "all" ||
+        (filter === "sandbox"
+          ? s.project_id == null
+          : s.running ||
+            s.task_status === "awaiting_confirm" ||
+            s.task_status === "awaiting_input"),
+    ),
+  );
+  const activeAgent = $derived(
+    ($registry.data ?? []).find(
+      (a) => a.key === ($session.data?.agent_key || agentKey),
+    ),
+  );
+  const enabledSkills = $derived(
+    ($skills.data ?? []).filter(
+      (s) => s.is_enabled && (!agentKey || s.bindings?.[agentKey]),
+    ),
+  );
+  const profiles = $derived($config.data?.llm_profiles ?? []);
+  function modelName(key?: string | null) {
+    const a = ($registry.data ?? []).find((a) => a.key === key);
+    const id =
+      (a && $config.data?.agent_llm_assignments?.[a.llm_role]) ||
+      $config.data?.llm_active_id;
+    return (
+      profiles.find((p) => p.id === id)?.name ||
+      $config.data?.llm_model ||
+      "未配置模型"
+    );
+  }
+  function status(s: AgentSession) {
+    return s.running
+      ? "运行中"
+      : ({
+          ready: "未开始",
+          awaiting_confirm: "待你确认",
+          returned: "已带回项目",
+          completed: "已完成",
+          error: "失败",
+          cancelled: "已停止",
+          interrupted: "运行中断",
+          awaiting_input: "等待回答",
+        }[s.task_status ?? "ready"] ?? "未开始");
+  }
+  function openResult(r: AgentDeliverable) {
+    editing = r;
+    text = r.content;
+    targetProject = r.project_id;
+    targetStage = r.stage_key;
+    dirty = false;
+    error = "";
+  }
+  async function openTask(id: number) {
+    if (dirty) {
+      error = "请先保存成果草稿，再切换任务。";
+      return false;
+    }
+    streaming = "";
+    reasoning = "";
+    liveTools = [];
+    await goto(resolve(`/agents?session=${id}`));
+    return true;
+  }
+  async function launchAssistant(key: WorkbenchStageKey) {
+    if (busy || uploadBusy) return;
+    agentKey = key;
+    if (draft.trim()) {
+      await send({
+        content: draft,
+        mentions: [],
+        attachments: [...attachments],
+      });
+      return;
+    }
+    busy = true;
+    try {
+      const s = await agentApi.createSession({
+        agent_key: key,
+        project_id: projectId,
+      });
+      await openTask(s.id);
+      await refresh();
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      busy = false;
+    }
+  }
+  async function home() {
+    if (dirty) {
+      error = "请先保存成果草稿，再新建任务。";
+      return;
+    }
+    editing = null;
+    error = "";
+    agentKey = "";
+    await goto(resolve("/agents"));
+  }
+  $effect(() => {
+    const id = activeId,
+      results = taskResults;
+    untrack(() => {
+      if (editing?.session_id !== id) {
+        editing = null;
+        dirty = false;
+      }
+      if (!editing && results.length) openResult(results[0]);
+    });
+  });
+  onMount(() => {
+    if (!particles) return;
+    const canvas = particles,
+      ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const points = Array.from({ length: 46 }, () => ({
+      x: Math.random(),
+      y: Math.random(),
+      v: 0.15 + Math.random() * 0.35,
+      s: Math.random() * 1.6 + 0.4,
+      a: Math.random() * 0.5 + 0.15,
+    }));
+    const resize = () => {
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+    };
+    resize();
+    const observer = new ResizeObserver(resize);
+    observer.observe(canvas);
+    let raf = 0;
+    const frame = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      if (
+        !activeId &&
+        document.documentElement.dataset.reduce !== "1" &&
+        !matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        const color =
+          getComputedStyle(document.documentElement)
+            .getPropertyValue("--particle")
+            .trim() || "168,121,255";
+        for (const point of points) {
+          point.y -= point.v / Math.max(1, canvas.height);
+          point.x +=
+            (Math.sin((point.y * canvas.height) / 60) * 0.2) /
+            Math.max(1, canvas.width);
+          if (point.y < 0) {
+            point.y = 1;
+            point.x = Math.random();
+          }
+          ctx.beginPath();
+          ctx.arc(
+            point.x * canvas.width,
+            point.y * canvas.height,
+            point.s,
+            0,
+            7,
+          );
+          ctx.fillStyle = `rgba(${color},${point.a})`;
+          ctx.fill();
+        }
+      }
+      raf = requestAnimationFrame(frame);
+    };
+    frame();
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  });
+  async function refresh() {
+    await Promise.all([
+      client.invalidateQueries({ queryKey: ["b4-sessions"] }),
+      client.invalidateQueries({ queryKey: ["b4-results"] }),
+      client.invalidateQueries({ queryKey: ["agent-session"] }),
+    ]);
+  }
+  onMount(() =>
+    connectEvents((ev) => {
+      if (ev.type.startsWith("job."))
+        void client.invalidateQueries({ queryKey: ["b4-jobs"] });
+      if (ev.type === "events.resync" || ev.type === "agent.session.updated") {
+        void refresh();
+        return;
+      }
+      if (
+        ev.data?.session_id !== activeId &&
+        (ev.data?.message as { session_id?: number } | undefined)
+          ?.session_id !== activeId
+      )
+        return;
+      if (ev.type === "agent.token")
+        streaming += String(ev.data?.content ?? "");
+      if (ev.type === "agent.thinking")
+        reasoning += String(ev.data?.content ?? "");
+      if (ev.type === "agent.message") {
+        streaming = "";
+        void client.invalidateQueries({
+          queryKey: ["agent-session", activeId],
+        });
+      }
+      if (ev.type === "agent.plan" || ev.type === "agent.task")
+        void client.invalidateQueries({
+          queryKey: ["agent-session", activeId],
+        });
+      if (ev.type === "agent.tool") {
+        const tool = String(ev.data?.tool ?? "");
+        if (ev.data?.phase === "start")
+          liveTools.push({
+            tool,
+            args: ev.data?.args as Record<string, unknown>,
+            phase: "running",
+          });
+        else {
+          const index = liveTools
+            .map((t) => t.tool === tool && t.phase === "running")
+            .lastIndexOf(true);
+          if (index >= 0)
+            liveTools[index] = {
+              ...liveTools[index],
+              result: ev.data?.result,
+              phase:
+                (ev.data?.result as { ok?: boolean })?.ok === false
+                  ? "error"
+                  : "done",
+            };
+        }
+      }
+    }),
+  );
+  async function send(payload: AgentComposerPayload) {
+    if (busy || uploadBusy) return;
+    busy = true;
+    error = "";
+    try {
+      let sid = activeId;
+      if (!sid) {
+        const s = await agentApi.createSession({
+          project_id: projectId,
+          agent_key: agentKey || null,
+        });
+        sid = s.id;
+        await goto(resolve(`/agents?session=${sid}`));
+      }
+      const skill = enabledSkills.find((s) => s.dir === selectedSkill);
+      if (
+        skill &&
+        payload.mentions.filter((m) => m.type === "skill").length < 4 &&
+        !payload.mentions.some(
+          (m) => m.type === "skill" && m.name === skill.dir,
+        )
+      )
+        payload.mentions.push({
+          type: "skill",
+          name: skill.dir,
+          description: skill.description,
+        });
+      await agentApi.postMessage(sid, payload);
+      draft = "";
+      attachments = [];
+      await refresh();
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      busy = false;
+    }
+  }
+  async function save() {
+    if (!editing || saving) return null;
+    saving = true;
+    error = "";
+    try {
+      const r = await resultsApi.patch(editing.id, {
+        revision: editing.revision,
+        content: text,
+        project_id: targetProject,
+        stage_key: targetStage,
+      });
+      openResult(r);
+      await client.invalidateQueries({ queryKey: ["b4-results"] });
+      toast.success("草稿已保存");
+      return r;
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+      return null;
+    } finally {
+      saving = false;
+    }
+  }
+  async function returnToProject() {
+    if (!editing || !targetProject || saving) return;
+    const r = dirty ? await save() : editing;
+    if (!r) return;
+    saving = true;
+    error = "";
+    try {
+      const res = await resultsApi.store({
+        deliverable_id: r.id,
+        revision: r.revision,
+        project_id: targetProject,
+        stage_key: targetStage,
+      });
+      toast.success(
+        res.already_attached ? "该版本已带回项目" : "已带回项目，等待确认",
+      );
+      await refresh();
+      await goto(resolve(`/workbench/${targetProject}?stage=${targetStage}`));
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      saving = false;
+    }
+  }
+  const projectJobs = createQuery(
+    toStore(() => ({
+      queryKey: ["b4-jobs", targetProject],
+      queryFn: () => jobsApi.list(targetProject!),
+      enabled: targetProject != null,
+    })),
+  );
+  function shotJob(id: string) {
+    return ($projectJobs.data ?? []).find(
+      (j) =>
+        j.payload?.stage_key === targetStage &&
+        j.payload?.target_id === id &&
+        j.status === "done" &&
+        j.output_paths?.length,
+    );
+  }
+  const structuredShots = $derived.by(() => {
+    const data = parseContent(text);
+    return Array.isArray(data?.shots)
+      ? (data.shots as {
+          id: string;
+          description?: string;
+          prompt?: string;
+          duration_sec?: number;
+        }[])
+      : [];
+  });
+  async function redraw(shot: {
+    id: string;
+    description?: string;
+    prompt?: string;
+    duration_sec?: number;
+  }) {
+    if (!targetProject || saving || !shot.id) return;
+    saving = true;
+    error = "";
+    try {
+      await workbenchApi.generate(targetProject, {
+        kind: targetStage === "shot" ? "video" : "image",
+        stage_key: targetStage,
+        target_id: shot.id,
+        prompt: shot.prompt || shot.description || "",
+        duration_sec: shot.duration_sec,
+      });
+      toast.success(`仅镜头 ${shot.id} 已入队`);
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      saving = false;
+    }
+  }
+</script>
+
+{#snippet header()}
+  <header class="b4-header">
+    {#if activeId}<div class="b4-crumb"><button onclick={home}>智能体</button>/<b>{$session.data?.title ?? "加载任务…"}</b></div><span class="a-tag sc">{$session.data ? status($session.data) : "加载中"}</span>{:else}<div class="b4-crumb"><button onclick={home}><b>智能体</b></button></div><span class="b4-subtitle">把创作任务交给助手，成果回到项目等你确认</span>{/if}<span class="b4-grow"></span>{#if activeId}<span class="b4-chip"
+        ><Icon name="agent-cpu" size={14}/><b>{modelName($session.data?.agent_key)}</b></span
+      >{/if}<a class="a-btn secondary sm" href={resolve("/agents?legacy=1")}
+      >原会话与技能管理</a
+    >
+  </header>
+{/snippet}
+{#snippet shellHeader()}{/snippet}
+<AppShell active="agents" title="智能体" workspace pageHeader={shellHeader}>
+  <div class="b4" class:task-view={activeId != null}>
+    {@render header()}
+    <div class="aurora fx-only"><i></i><i></i><i></i></div>
+    <canvas class="particles fx-only" bind:this={particles} aria-hidden="true"
+    ></canvas>
+    <div class={activeId ? "atask" : "agent-grid"}>
+      <aside class="tasklist">
+        <div class="tl-h">
+          <button class="a-btn scene" onclick={home}
+            ><Icon name="plus" size={14} />新任务</button
+          >{#if !activeId}<div class="b4-seg">
+              {#each [["active", "进行中"], ["all", "全部"], ["sandbox", "沙盒"]] as [value, label] (value)}<button
+                  class:on={filter === value}
+                  onclick={() => (filter = value)}>{label}</button
+                >{/each}
+            </div>{/if}
+        </div>
+        <div class="tl-b">
+          {#each shownTasks as s (s.id)}<button
+              class="titem"
+              data-session-id={s.id}
+              class:on={s.id === activeId}
+              onclick={() => openTask(s.id)}
+              title={s.task_summary || s.title}
+              ><b>{s.title}</b><span class="meta"
+                ><i class="dot" style:--agent-task-dot={s.running ? "var(--agent-task-running)" : s.task_status === "returned" ? "var(--agent-task-returned)" : s.task_status === "awaiting_confirm" ? "var(--agent-task-confirm)" : "var(--agent-task-idle)"}></i>{status(s)}<span class="b4-grow"></span>{s
+                  .project?.title ?? "沙盒"}</span
+              ></button
+            >{:else}<p class="b4-empty">
+              {$sessions.isPending ? "加载任务…" : "暂无任务"}
+            </p>{/each}
+        </div>
+      </aside>
+      {#if !activeId}
+        <div class="agent-home">
+          <div class="ahero">
+            <div class="hero-copy">
+              <span class="eyebrow">主创智能体 · 统筹五个阶段助手</span>
+              <h2>从一个想法，到一组能直接开拍的镜头</h2>
+              <p class="muted">
+                它会先列计划，再调用剧本、视觉、分镜、素材与镜头助手；每一步的成果都是可编辑草稿，你确认后才写入项目。
+              </p>
+              <div class="steps">
+                {#each ["说出想法", "确认计划", "编辑成果", "带回项目"] as label, i (label)}<span
+                    ><i>{i + 1}</i>{label}</span
+                  >{/each}
+              </div>
+              <div class="big-input">
+                <textarea
+                  aria-label="任务想法"
+                  bind:value={draft}
+                  placeholder="描述你的创作想法、目标与要求…"
+                ></textarea>
+                <div class="b4-row">
+                  <label class="b4-chip"
+                    ><Icon name="nav-project" size={14} />绑定：<select
+                      aria-label="绑定项目"
+                      bind:value={projectId}
+                      ><option value={null}>沙盒</option
+                      >{#each $projects.data ?? [] as p (p.id)}<option
+                          value={p.id}>{p.title}</option
+                        >{/each}</select
+                    ></label
+                  ><label class="b4-chip"
+                    ><Icon name="agent-cpu" size={14} /><select
+                      aria-label="任务模型"
+                      disabled={busy}
+                      value={$config.data?.agent_llm_assignments?.[
+                        activeAgent?.llm_role ?? "main"
+                      ] ?? ""}
+                      onchange={(e) => assignModel(e.currentTarget.value)}
+                      ><option value="">{modelName(agentKey)}</option
+                      >{#each profiles as p (p.id)}<option value={p.id}
+                          >{p.name}</option
+                        >{/each}</select
+                    ></label
+                  ><label class="b4-chip"
+                    ><Icon name="project-book" size={14} />技能
+                    <select aria-label="任务技能" bind:value={selectedSkill}
+                      ><option value="">不指定</option
+                      >{#each enabledSkills as s (s.dir)}<option value={s.dir}
+                          >{s.name}</option
+                        >{/each}</select
+                    ></label
+                  ><input
+                    hidden
+                    type="file"
+                    bind:this={uploadInput}
+                    multiple
+                    accept="image/*,video/*,audio/*,.txt,.md,.docx"
+                    onchange={upload}
+                  /><button
+                    class="b4-chip"
+                    disabled={uploadBusy || busy}
+                    onclick={() => uploadInput?.click()}
+                    ><Icon name="upload" size={14} />参考材料{attachments.length
+                      ? ` · ${attachments.length}`
+                      : ""}</button
+                  ><span class="b4-grow"></span><button
+                    class="a-btn primary"
+                    disabled={busy || uploadBusy || !draft.trim()}
+                    onclick={() =>
+                      send({
+                        content: draft,
+                        mentions: [],
+                        attachments: [...attachments],
+                      })}><Icon name="agent-send" size={14} />开始任务</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">
+              <h2>阶段助手</h2>
+              <span class="dim">每个助手对应项目的一个阶段，也可以单独调用</span
+              >
+            </div>
+            <div class="roster">
+              {#each $registry.data ?? [] as a, i (a.key)}<button
+                  class="acard"
+                  style:--c={assistantColors[a.key]}
+                  disabled={busy || uploadBusy}
+                  onclick={() => launchAssistant(a.key as WorkbenchStageKey)}
+                  ><span class="num">0{i + 1}</span><span class="ic"
+                    ><Icon name={assistantIcons[a.key]} size={18} /></span
+                  >
+                  <div class="tx">
+                    <b>{stageNames[a.key as WorkbenchStageKey]}</b>
+                    <p>{assistantDescriptions[a.key]}</p>
+                    <div class="b4-row">
+                      <span class="a-tag">{a.skill_count} 个技能</span><span
+                        class="b4-grow"
+                      ></span><span class="dim">{modelName(a.key)}</span>
+                    </div>
+                  </div></button
+                >{/each}
+            </div>
+          </div>
+          <div class="mini-row">
+            <div class="panel">
+              <h3>最近成果<span class="dim">点开即可编辑，再带回项目</span></h3>
+              <div class="outrow">
+                {#each ($allResults.data ?? []).slice(0, 4) as r (r.id)}<button
+                    class="outcard"
+                    data-deliverable-id={r.id}
+                    onclick={async () => {
+                      if (await openTask(r.session_id)) openResult(r);
+                    }}
+                    ><div class="t"><Icon name="file" size={24} /></div>
+                    <div class="d">
+                      <b>{r.title}</b><span class="dim"
+                        >{stageNames[r.stage_key]} · 草稿 v{r.revision}</span
+                      >
+                    </div></button
+                  >{:else}<p class="b4-empty">
+                    暂无成果，完成任务后将在这里显示。
+                  </p>{/each}
+              </div>
+            </div>
+            <div class="panel">
+              <h3>
+                技能库<span class="a-tag">{($skills.data ?? []).length}</span
+                ><span class="b4-grow"></span><a
+                  class="a-btn sm ghost"
+                  href={resolve("/agents?legacy=1")}>管理</a
+                >
+              </h3>
+              <div class="skills">
+                {#each ($skills.data ?? [])
+                  .filter((s) => s.is_enabled)
+                  .slice(0, 7) as s (s.dir)}<button
+                    class="skill"
+                    title={s.description}
+                    onclick={() => {
+                      selectedSkill = s.dir;
+                      agentKey = "";
+                    }}><i></i>{s.name}</button
+                  >{:else}<span class="dim">尚未添加技能</span>{/each}<a
+                  class="skill dim"
+                  href={resolve("/agents?legacy=1")}>+ 学习新技能</a
+                >
+              </div>
+              <p class="dim">
+                技能 = 可复用的规则 +
+                示例。可从对话中“记住这个做法”生成，也可导入 Markdown。
+              </p>
+            </div>
+          </div>
+        </div>
+      {:else}
+        <div class="convo">
+          <div class="convo-b">
+            {#if $session.data?.plan}<AgentPlanPanel
+                plan={$session.data.plan}
+              />{/if}<AgentChat
+              studio
+              messages={$session.data?.messages ?? []}
+              {liveTools}
+              {streaming}
+              streamingReasoning={reasoning}
+              {running}
+              loading={$session.isPending}
+              onAnswer={(option, _scope, seq) =>
+                send({
+                  content: option,
+                  mentions: [],
+                  attachments: [],
+                  answer_to: seq,
+                })}
+            />
+          </div>
+          <div class="convo-in">
+            <AgentComposer
+              studio
+              {running}
+              onSend={send}
+              onCancel={() => {
+                if (activeId) void agentApi.cancel(activeId);
+              }}
+              workflows={($wfQuery.data ?? [])
+                .filter((w) => w.is_enabled)
+                .map((w) => ({
+                  id: w.id,
+                  name: w.name,
+                  kind: w.kind as "image" | "video",
+                }))}
+              skills={($skills.data ?? [])
+                .filter((s) => s.is_enabled)
+                .map((s) => ({
+                  name: s.dir,
+                  description: s.description,
+                  tags: s.tags,
+                }))}
+            />
+          </div>
+        </div>
+        <aside class="artifact">
+          <div class="art-h">
+            <div class="b4-row">
+              <b>{editing ? stageNames[editing.stage_key] : "成果"} · 草稿</b
+              ><span class="a-tag sc">未确认</span><span class="b4-grow"
+              ></span><span class="dim mono art-meta"
+                >{structuredShots.length
+                  ? `${structuredShots.length} 镜 · ${structuredShots.reduce((sum, shot) => sum + (Number(shot.duration_sec) || 0), 0)}s`
+                  : editing
+                    ? `v${editing.revision}`
+                    : ""}</span
+              >
+            </div>
+            {#if taskResults.length > 1}<div class="b4-seg">
+                {#each taskResults as r (r.id)}<button
+                    class:on={editing?.id === r.id}
+                    onclick={() => {
+                      if (!dirty) openResult(r);
+                      else error = "请先保存当前成果";
+                    }}>成果 {r.id}</button
+                  >{/each}
+              </div>{/if}
+            <div class="b4-seg art-tabs">
+              <button
+                class:on={artifactTab === "shots"}
+                onclick={() => (artifactTab = "shots")}>镜头</button
+              >
+              <button disabled title="当前成果没有角色数据">角色</button>
+              <button
+                class:on={artifactTab === "text"}
+                onclick={() => (artifactTab = "text")}>原文</button
+              >
+              <button onclick={comparePrevious} disabled={!editing}
+                >对比上一版</button
+              >
+            </div>
+          </div>
+          <div class="art-b">
+            {#if editing}
+              {#if structuredShots.length && artifactTab === "shots"}
+                {#each structuredShots as shot, i (shot.id)}
+                  <div class="shot">
+                    <div class="th">
+                      <span>{String(i + 1).padStart(2, "0")}</span
+                      >{#if shotJob(shot.id)?.kind === "video"}<video
+                          src={assetUrl(shotJob(shot.id)!.output_paths![0]) ??
+                            ""}
+                          controls
+                          muted
+                          preload="metadata"
+                          aria-label={`镜头 ${shot.id} 视频`}
+
+                        ></video>{:else if shotJob(shot.id)?.output_paths?.[0]}<img
+                          src={assetUrl(shotJob(shot.id)!.output_paths![0]) ??
+                            ""}
+                          alt={`镜头 ${shot.id} 草图`}
+                        />{:else}<small class="dim">暂无草图</small>{/if}
+                    </div>
+                    <div class="shot-copy">
+                      <textarea
+                        aria-label={`镜头 ${shot.id} 描述`}
+                        value={shot.description || shot.prompt || ""}
+                        oninput={(e) =>
+                          editShot(
+                            i,
+                            shot.description != null ? "description" : "prompt",
+                            e.currentTarget.value,
+                          )}
+                      ></textarea>
+                      <div class="b4-row">
+                        <label class="a-tag mono"
+                          ><input
+                            aria-label={`镜头 ${shot.id} 时长`}
+                            type="number"
+                            min="0.1"
+                            step="0.1"
+                            value={shot.duration_sec ?? 3}
+                            oninput={(e) =>
+                              editShot(
+                                i,
+                                "duration_sec",
+                                Number(e.currentTarget.value),
+                              )}
+                          />s</label
+                        ><span class="b4-grow"></span><button
+                          class="a-btn sm ghost"
+                          disabled={saving || !targetProject || dirty}
+                          onclick={() => redraw(shot)}><Icon name="project-refresh" size={14}/>重画</button
+                        >
+                      </div>
+                    </div>
+                  </div>
+                {/each}
+              {:else}<textarea
+                  class="draft-editor"
+                  aria-label="成果草稿"
+                  bind:value={text}
+                  oninput={() => (dirty = true)}
+                ></textarea>{/if}
+            {:else}<p class="b4-empty">
+                暂无成果。任务完成后，真实回复将在这里形成可编辑草稿。
+              </p>{/if}
+          </div>
+          <div class="art-f">
+            <label class="b4-row dim"
+              >带回到<span class="b4-chip"><select
+                aria-label="成果项目"
+                bind:value={targetProject}
+                onchange={() => (dirty = true)}
+                disabled={!editing}
+                ><option value={null}>选择项目</option
+                >{#each $projects.data ?? [] as p (p.id)}<option value={p.id}
+                    >{p.title}</option
+                  >{/each}</select
+              > · <select
+                class="stage-select"
+                aria-label="成果阶段"
+                bind:value={targetStage}
+                onchange={() => (dirty = true)}
+                disabled={!editing}
+                >{#each keys as key (key)}<option value={key}
+                    >{stageNames[key]}</option
+                  >{/each}</select
+              ></span></label
+            >
+            <div class="b4-row">
+              <button
+                class="a-btn secondary"
+                disabled={!editing || saving}
+                onclick={save}>保存草稿</button
+              ><button
+                class="a-btn primary"
+                disabled={!editing || !targetProject || saving}
+                onclick={returnToProject}
+                ><Icon name="arrow-right" size={14} />带回项目待确认</button
+              >
+            </div>
+          </div>
+        </aside>
+      {/if}
+    </div>
+    {#if error}<div class="b4-error" role="alert">
+        {error}<button class="a-btn sm ghost" onclick={() => (error = "")}
+          >关闭</button
+        >
+      </div>{/if}
+  </div>
+</AppShell>
+
+<Modal bind:open={compareOpen} title="对比上一版" size="lg">
+  <div class="b4-compare">
+    <section>
+      <h3>上一保存版本</h3>
+      <pre>{previousText || "尚无上一保存版本"}</pre>
+    </section>
+    <section>
+      <h3>当前草稿{dirty ? " · 未保存" : ""}</h3>
+      <pre>{text}</pre>
+    </section>
+  </div>
+</Modal>

calliope-web/src/lib/components/agent/ReasoningPanel.svelte

@@ -68,7 +68,7 @@
 	}
 	.head:hover {
 		color: var(--text-secondary);
-		background: rgba(255, 255, 255, 0.02);
+		background: var(--bg-3);
 	}
 	.icon-wrap {
 		display: inline-flex;

calliope-web/src/lib/components/agent/WorkflowMentionMenu.svelte

@@ -1,16 +1,9 @@
-<script lang="ts">
+<script lang="ts" generics="Item extends { id?: number; name: string; kind?: string; description?: string | null }">
 	import { t } from '$lib/i18n.svelte';
 
-	interface MenuItem {
-		id?: number;
-		name: string;
-		kind?: string;
-		description?: string | null;
-	}
-
 	interface Props {
 		open: boolean;
-		items: MenuItem[];
+		items: Item[];
 		activeIndex: number;
 		/** Caret / `@` viewport box — menu opens above this (composer is bottom-docked). */
 		anchor: { top: number; bottom: number; left: number };
@@ -18,7 +11,7 @@
 		lockReason?: string | null;
 		/** Skill mode: rows show `/name` + a description subtitle, no kind chip. */
 		skillMode?: boolean;
-		onSelect: (item: any) => void;
+		onSelect: (item: Item) => void;
 		onHover: (index: number) => void;
 	}
 
@@ -62,6 +55,7 @@
 		if (!open || !menuEl) return;
 		document.body.appendChild(menuEl);
 		return () => {
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Template creates menu contents; this effect moves the root to body and owns portal teardown on close/unmount. Remove that moved root to avoid residue.
 			menuEl?.remove();
 		};
 	});
@@ -135,9 +129,7 @@
 		background: var(--bg-surface);
 		border: 1px solid var(--border);
 		border-radius: var(--radius-md);
-		box-shadow:
-			0 8px 24px rgba(0, 0, 0, 0.5),
-			0 0 0 1px rgba(0, 0, 0, 0.3);
+		box-shadow: var(--shadow-float);
 		padding: 4px;
 	}
 	.empty {

calliope-web/src/lib/components/agent/agentPalette.ts

@@ -1,76 +1,74 @@
 /**
- * Agent identity palette: a stable display name + accent color per agent.
+ * Agent identity palette: a stable display name + identity step per agent.
  *
- * The main loop runs with `agent_name = null`; we label it "Calliope". Each
- * swarm sub-agent ("planner", "story-agent", …) gets its own fixed color so
- * differently-authored bubbles are visually distinct, plus a deterministic
- * fallback for any future agent name.
+ * Identity answers "who is speaking" only (avatar dot / name / bubble tint)
+ * — it never expresses task status. HEL-685 无彩化：全部改为 app.css 的
+ * 显影灰阶实色阶 --id-1..5（与全站 --avatar-1..5 同一身份语言），
+ * 不再使用彩色身份色；默认主循环智能体保持中性 --id-4。
  */
 
-export const DEFAULT_AGENT_NAME = 'Calliope';
+export const DEFAULT_AGENT_NAME = "Calliope";
 
 // Fixed identity map (keyed by the raw agent_name the backend emits).
+// Step numbers mirror the avatar five-set used across the app
+// (models/agents/home project cards).
 const IDENTITIES: Record<string, { label: string; color: string }> = {
-	planner: { label: 'Planner', color: '#22d3ee' }, // cyan
-	'story-agent': { label: 'Story Agent', color: '#22c55e' }, // green
-	'script-agent': { label: 'Script Agent', color: '#f59e0b' }, // amber
-	'assets-agent': { label: 'Assets Agent', color: '#ec4899' }, // pink
-	'video-agent': { label: 'Video Agent', color: '#fb923c' }, // orange
-	'research-agent': { label: 'Research Agent', color: '#a78bfa' }, // violet
-	// The five named agents (HEL-613) — the runner stamps their zh names on
-	// named-session replies; colors mirror the spec §2.1 avatar five-set.
-	剧本创作: { label: '剧本创作', color: '#e8a33d' },
-	视觉设计: { label: '视觉设计', color: '#5b8def' },
-	分镜设计: { label: '分镜设计', color: '#3fb97f' },
-	素材资产: { label: '素材资产', color: '#b98be0' },
-	镜头脚本: { label: '镜头脚本', color: '#d98e6a' },
+  planner: { label: "Planner", color: "var(--id-2)" },
+  "story-agent": { label: "Story Agent", color: "var(--id-3)" },
+  "script-agent": { label: "Script Agent", color: "var(--id-1)" },
+  "assets-agent": { label: "Assets Agent", color: "var(--id-4)" },
+  "video-agent": { label: "Video Agent", color: "var(--id-5)" },
+  "research-agent": { label: "Research Agent", color: "var(--id-4)" },
+  // The five named agents (HEL-613) — the runner stamps their zh names on
+  // named-session replies; steps mirror the avatar five-set.
+  剧本创作: { label: "剧本创作", color: "var(--id-1)" },
+  视觉设计: { label: "视觉设计", color: "var(--id-2)" },
+  分镜设计: { label: "分镜设计", color: "var(--id-3)" },
+  素材资产: { label: "素材资产", color: "var(--id-4)" },
+  镜头脚本: { label: "镜头脚本", color: "var(--id-5)" },
 };
 
-// Fallback palette for unknown names (stable hash → deterministic color).
+// Fallback palette for unknown names (stable hash → deterministic step),
+// spanning the same five grayscale identity steps.
 const FALLBACK_COLORS = [
-	'#22d3ee',
-	'#22c55e',
-	'#f59e0b',
-	'#ec4899',
-	'#fb923c',
-	'#a78bfa',
-	'#38bdf8',
-	'#4ade80',
-	'#f472b6',
-	'#facc15',
+  "var(--id-1)",
+  "var(--id-2)",
+  "var(--id-3)",
+  "var(--id-4)",
+  "var(--id-5)",
 ];
 
 function hashString(s: string): number {
-	let h = 0;
-	for (let i = 0; i < s.length; i++) {
-		h = (h * 31 + s.charCodeAt(i)) >>> 0;
-	}
-	return h;
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  }
+  return h;
 }
 
-/** The default "Calliope" accent (matches --accent). */
-export const DEFAULT_AGENT_COLOR = '#8b5cf6';
+/** Neutral step (--id-4) — the default agent borrows no signal color. */
+export const DEFAULT_AGENT_COLOR = "var(--id-4)";
 
 export function agentDisplayName(name: string | null | undefined): string {
-	const key = (name || '').trim().toLowerCase();
-	if (!key) return DEFAULT_AGENT_NAME;
-	return IDENTITIES[key]?.label ?? prettyName(name!);
+  const key = (name || "").trim().toLowerCase();
+  if (!key) return DEFAULT_AGENT_NAME;
+  return IDENTITIES[key]?.label ?? prettyName(name!);
 }
 
 export function agentColor(name: string | null | undefined): string {
-	const key = (name || '').trim().toLowerCase();
-	if (!key) return DEFAULT_AGENT_COLOR;
-	const identity = IDENTITIES[key];
-	if (identity) return identity.color;
-	return FALLBACK_COLORS[hashString(key) % FALLBACK_COLORS.length];
+  const key = (name || "").trim().toLowerCase();
+  if (!key) return DEFAULT_AGENT_COLOR;
+  const identity = IDENTITIES[key];
+  if (identity) return identity.color;
+  return FALLBACK_COLORS[hashString(key) % FALLBACK_COLORS.length];
 }
 
 function prettyName(raw: string): string {
-	// "story-agent" → "Story Agent", "assets-agent" → "Assets Agent"
-	const title = raw
-		.split(/[-_\s]+/)
-		.filter(Boolean)
-		.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-		.join(' ');
-	return title || DEFAULT_AGENT_NAME;
+  // "story-agent" → "Story Agent", "assets-agent" → "Assets Agent"
+  const title = raw
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+  return title || DEFAULT_AGENT_NAME;
 }

calliope-web/src/lib/components/desk/Artboard.svelte

@@ -0,0 +1,831 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { untrack, type Snippet } from 'svelte';
+	import Modal from '$lib/components/ui/Modal.svelte';
+	import ImageLightbox from '$lib/components/ImageLightbox.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { assetUrl } from '$lib/api';
+	import type { Job, Workflow } from '$lib/comfy/types';
+	import { progressFor } from '$lib/jobProgress';
+	import { jobStatusInfo } from '$lib/jobStatus';
+	import { parseDbTs } from '$lib/dbtime';
+	import {
+		clearOutputMissing,
+		markOutputMissing,
+		missingOutputsOf,
+	} from '$lib/missingOutputs.svelte';
+	import { t } from '$lib/i18n.svelte';
+	import { exportLastFrame } from '$lib/media/lastFrame';
+	import { usageLabel } from '../generate/schema';
+	import {
+		elapsedSec,
+		fmtClock,
+		fmtDur,
+		inputsOf,
+		isVideoOutput,
+		promptOf,
+		specOf,
+	} from '../generate/takes';
+
+	/**
+	 * 检视区 (spec-v2 §3.3): 结果 shows the selected take on the projection
+	 * stage with its spec, inputs and workflow; 参数 hosts the full form.
+	 * ≥1180 it is a column (hide with ]), 761–1179 a right overlay, ≤760
+	 * fullscreen — `overlay` / `open` drive the last two.
+	 * D 批 (HEL-654): pointer picks cross-fade the stage 150ms (键盘
+	 * ↑↓/J/K 即时无动画), video playback is always explicit,
+	 * failed takes get 重试, and a done take whose files no longer load
+	 * shows the amber 文件缺失 state with 用相同参数重做 / 移除记录.
+	 */
+	interface Props {
+		main?: boolean;
+		comparePath?: string | null;
+		tab: 'result' | 'params';
+		job: Job | null;
+		wf: Workflow | undefined;
+		nowMs: number;
+		open: boolean;
+		/** Collapsed or off-screen — nothing inside may take focus. */
+		inactive: boolean;
+		/** Current workflow can take an image output (送入当前图片槽). */
+		canSendToSlot: boolean;
+		/** Animate this result change (pointer pick) — 150ms cross-fade. */
+		crossfade: boolean;
+		/** The stage <video> element, for explicit playback controls. */
+		videoEl?: HTMLVideoElement | null;
+		params: Snippet;
+		onClose: () => void;
+		onReuse: (job: Job) => void;
+		onRetry: (job: Job) => void;
+		onCancel: (job: Job) => void;
+		onSendToSlot: (path: string) => void;
+		onDelete: (job: Job) => void;
+		canAttach?: boolean;
+		attachBusy?: boolean;
+		onAttach?: () => void;
+	}
+
+	let {
+		main = false,
+		comparePath = null,
+		tab = $bindable(),
+		job,
+		wf,
+		nowMs,
+		canSendToSlot,
+		videoEl = $bindable(null),
+		onReuse,
+		onRetry,
+		onCancel,
+		onSendToSlot,
+		onDelete,
+		canAttach = false,
+		attachBusy = false,
+		onAttach,
+	}: Props = $props();
+
+	let detailsOpen = $state(false);
+	let deleteOpen = $state(false);
+	let outIndex = $state(0);
+	let compare = $state(false),
+		compareAt = $state(50),
+		lightbox = $state(false);
+	$effect(() => {
+		void job?.id;
+		detailsOpen = false;
+		deleteOpen = false;
+		compare = false;
+		lightbox = false;
+	});
+	$effect.pre(() => {
+		void job?.id;
+		outIndex = 0;
+	});
+
+	const st = $derived(job ? jobStatusInfo(job) : null);
+	// §3.4 红/琥珀界线: amber only when the task SUCCEEDED but its files
+	// cannot be fetched — the failed case stays red.
+	const gonePaths = $derived(missingOutputsOf(job));
+	const fileGone = $derived(gonePaths.length > 0);
+	const outputs = $derived(
+		job && st?.tone === 'ok'
+			? job.output_paths.filter((p) => !gonePaths.includes(p))
+			: [],
+	);
+	const output = $derived(
+		outputs[Math.min(outIndex, outputs.length - 1)] ?? null,
+	);
+	const video = $derived(!!job && !!output && isVideoOutput(job, output));
+	const wfDeleted = $derived(!!job && job.workflow_id == null);
+	const prompt = $derived(job ? promptOf(job, wf) : '');
+	const inputs = $derived(job ? inputsOf(job, wf) : []);
+	const compareSource = $derived(
+		inputs.find((i) => i.kind === 'image')?.path ?? comparePath,
+	);
+	const spec = $derived(job ? specOf(job, wf) : []);
+	const endpoint = $derived(
+		((job?.payload?.endpoint as Record<string, unknown> | undefined)?.name as
+			string | undefined) ?? '',
+	);
+	const progress = $derived.by(() => {
+		if (!job || job.status !== 'running') return 0;
+		const live = progressFor(job.id);
+		const phase = live?.phase ?? job.phase;
+		if (phase !== 'comfy_running' && phase !== 'saving') return 0;
+		return live?.progress ?? 3;
+	});
+	let dims = $state('');
+	let naturalWidth = $state(1),
+		naturalHeight = $state(1);
+	let stageWidth = $state(0),
+		stageHeight = $state(0);
+	const fitted = $derived(
+		Math.min(stageWidth / naturalWidth, stageHeight / naturalHeight),
+	);
+	$effect.pre(() => {
+		void output;
+		dims = '';
+	});
+	function noteImg(e: Event) {
+		const img = e.currentTarget as HTMLImageElement;
+		naturalWidth = img.naturalWidth;
+		naturalHeight = img.naturalHeight;
+		dims = `${img.naturalWidth}×${img.naturalHeight}`;
+	}
+	function noteVideo(e: Event) {
+		const v = e.currentTarget as HTMLVideoElement;
+		naturalWidth = v.videoWidth;
+		naturalHeight = v.videoHeight;
+		dims = `${v.videoWidth}×${v.videoHeight}`;
+	}
+
+	let paused = $state(true);
+	$effect.pre(() => {
+		void output;
+		untrack(() => {
+			videoEl?.pause();
+			paused = true;
+		});
+	});
+	function togglePlayback() {
+		if (!videoEl) return;
+		if (videoEl.paused) videoEl.play().catch(() => {});
+		else videoEl.pause();
+	}
+
+	const mediaKey = $derived(`${job?.id ?? 'none'}:${output ?? st?.tone ?? ''}`);
+
+	let frameBusy = $state(false);
+	async function exportTail() {
+		const src = assetUrl(output);
+		if (!src || frameBusy) return;
+		frameBusy = true;
+		try {
+			await exportLastFrame(src);
+		} finally {
+			frameBusy = false;
+		}
+	}
+</script>
+
+<div class="artboard" aria-label="生成结果">
+	<button
+		class="artboard-toolbar"
+		aria-label="作品详情与操作"
+		onclick={() => (detailsOpen = true)}
+	>
+		<div class="result-title">
+			<span>第 {job?.id} 次生成</span><small>{wf?.name ?? '历史作品'}</small>
+		</div>
+	</button>
+	<div class="stage" class:comparing={compare}>
+		{#if job && st}{#key mediaKey}
+				<div
+					class="stage-media"
+					bind:clientWidth={stageWidth}
+					bind:clientHeight={stageHeight}
+				>
+					{#if output && video}
+						<!-- svelte-ignore a11y_media_has_caption -->
+						<div
+							class="print a-photo"
+							style:width={fitted > 0 ? `${naturalWidth * fitted}px` : '100%'}
+							style:height={fitted > 0 ? `${naturalHeight * fitted}px` : '100%'}
+						>
+							{#if st.tone === 'ok' && !fileGone}<span class="a-fix"
+									>{t('jobst.done')}</span
+								>{/if}
+							<video
+								bind:this={videoEl}
+								src={assetUrl(output)}
+								controls
+								aria-label="生成的视频，使用播放按钮开始播放"
+								onkeydown={(e) => {
+									if (e.code === 'Space' && e.target === e.currentTarget) {
+										e.preventDefault();
+										togglePlayback();
+									}
+								}}
+								onplay={() => (paused = false)}
+								onpause={() => (paused = true)}
+								onended={() => (paused = true)}
+								playsinline
+								preload="metadata"
+								onloadedmetadata={(e) => {
+									clearOutputMissing(output);
+									noteVideo(e);
+								}}
+								onerror={() => output && markOutputMissing(output)}
+							></video>
+							{#if paused}<button
+									class="big-play"
+									aria-label="播放此视频"
+									onclick={() => {
+										videoEl?.focus();
+										togglePlayback();
+									}}>▶</button
+								>{/if}
+						</div>
+					{:else if output}
+						<div
+							class="print a-photo"
+							style:width={fitted > 0 ? `${naturalWidth * fitted}px` : '100%'}
+							style:height={fitted > 0 ? `${naturalHeight * fitted}px` : '100%'}
+						>
+							{#if st.tone === 'ok' && !fileGone}<span class="a-fix"
+									>{t('jobst.done')}</span
+								>{/if}
+							<img
+								src={assetUrl(output)}
+								alt={prompt || t('desk.tabResult')}
+								onload={(e) => {
+									clearOutputMissing(output);
+									noteImg(e);
+								}}
+								onerror={() => output && markOutputMissing(output)}
+							/>
+							{#if main && compare && compareSource}<div
+									class="comparison-layer"
+									style:clip-path={`inset(0 ${100 - compareAt}% 0 0)`}
+								>
+									<img src={assetUrl(compareSource)} alt="对比参考画面" />
+								</div>
+								<div
+									class="comparison-divider"
+									style:left={`${compareAt}%`}
+								></div>{/if}
+						</div>
+					{:else if fileGone}
+						<div class="stage-empty gone">
+							<span>{t('desk.missingTitle')}</span>
+							<span class="sub">{t('desk.missingSub')}</span>
+						</div>
+					{:else}
+						<div class="stage-empty">
+							<span>{st.label}</span>
+							<span class="sub"
+								>{st.tone === 'fail' ? t('desk.notGenerated') : st.detail}</span
+							>
+							{#if progress > 0}
+								<div class="a-progress stage-bar" style:--p={progress / 100}>
+									<i></i>
+								</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/key}{/if}
+		{#if outputs.length > 1}<div
+				class="output-picker"
+				role="group"
+				aria-label="本次生成的作品"
+			>
+				<!-- Output paths may repeat; the button number and outIndex refer to this position. -->
+				{#each outputs as p, i (i)}<button
+						aria-pressed={output === p}
+						onclick={() => (outIndex = i)}
+						aria-label={'查看第 ' + (i + 1) + ' 件作品'}>{i + 1}</button
+					>{/each}
+			</div>{/if}
+	</div>
+	<footer class="artboard-footer">
+		<button
+			class="canvas-btn"
+			disabled={!output}
+			onclick={() =>
+				video
+					? videoEl?.requestFullscreen().catch(() => {})
+					: (lightbox = true)}
+			aria-label="放大查看"><Icon name="zoom-in" size={14} />放大</button
+		>
+		<a
+			class="canvas-btn"
+			href={output ? assetUrl(output) : undefined}
+			aria-disabled={!output}
+			download
+			rel="external"
+			aria-label="下载生成结果"><Icon name="download" size={14} />下载</a
+		>
+		<span class="action-separator" aria-hidden="true"></span>
+		<button
+			class="canvas-btn"
+			disabled={!job || !output}
+			onclick={() => job && onReuse(job)}
+			><Icon name="retry" size={14} />复用参数</button
+		>
+		<button
+			class="canvas-btn"
+			disabled={!output || video || !canSendToSlot}
+			title={canSendToSlot
+				? '放入当前工作流图片输入'
+				: '当前工作流没有图片输入'}
+			onclick={() => output && onSendToSlot(output)}
+			><Icon name="image" size={14} />作为参考图</button
+		>
+		<button
+			class="canvas-btn"
+			disabled
+			title="跨工作流送图尚未具备，请选择生视频工作流后从已有结果选取"
+			><Icon name="film" size={14} />送去生视频</button
+		>
+		<span class="action-separator" aria-hidden="true"></span>
+		<button
+			class="canvas-btn"
+			disabled={!canAttach || attachBusy}
+			title={canAttach
+				? '保存到来源项目'
+				: '通用选择项目与阶段将在后续批次提供'}
+			onclick={onAttach}><Icon name="folder" size={14} />存入项目</button
+		>
+		<a class="canvas-btn" href={resolve('/library')}
+			><Icon name="assets" size={14} />素材库</a
+		>
+		<button
+			class="canvas-btn delete-output"
+			aria-label="删除作品记录"
+			title="删除作品记录"
+			disabled={!job || job.status === 'pending' || job.status === 'running'}
+			onclick={() => (deleteOpen = true)}
+			><Icon name="close" size={14} /></button
+		>
+		{#if job?.status === 'pending' || job?.status === 'running'}<button
+				class="canvas-btn"
+				onclick={() => job && onCancel(job)}>取消生成</button
+			>{/if}
+		{#if st?.tone === 'fail'}<button
+				class="canvas-btn"
+				onclick={() => job && onRetry(job)}>重试</button
+			>{/if}
+		{#if compare && output && !video}<label class="compare-slider"
+				>参考<input
+					type="range"
+					min="0"
+					max="100"
+					bind:value={compareAt}
+					aria-label="拖动对比画面"
+				/>结果</label
+			>{/if}
+	</footer>
+</div>
+<Modal bind:open={detailsOpen} size="lg" title="作品详情与操作">
+	{#if job && st}
+		<div class="detail-actions">
+			{#if video}<button
+					class="canvas-btn play-button"
+					onclick={togglePlayback}
+					aria-label={paused ? '播放视频' : '暂停视频'}
+					>{paused ? '▶ 播放' : 'Ⅱ 暂停'}</button
+				><button
+					class="canvas-btn"
+					onclick={() => videoEl?.requestFullscreen().catch(() => {})}
+					>全屏</button
+				>{/if}
+			<span class="result-spec"
+				>{dims || st?.label} · {job ? fmtDur(elapsedSec(job, nowMs)) : ''}</span
+			>
+			{#if compare && output && !video}<label class="compare-slider"
+					>参考<input
+						type="range"
+						min="0"
+						max="100"
+						bind:value={compareAt}
+						aria-label="拖动对比画面"
+					/>结果</label
+				>{/if}
+			{#if output && !video && compareSource && compareSource !== output}<button
+					class="canvas-btn"
+					aria-pressed={compare}
+					onclick={() => {
+						compare = !compare;
+						detailsOpen = false;
+					}}>◫ {compare ? '结束对比' : '对比'}</button
+				>{/if}
+			<button
+				class="a-btn secondary sm"
+				onclick={() => {
+					onReuse(job);
+					detailsOpen = false;
+				}}>复用到输入区</button
+			>
+			{#if output && !video && canSendToSlot}<button
+					class="a-btn secondary sm"
+					onclick={() => {
+						onSendToSlot(output);
+						detailsOpen = false;
+					}}>送入当前图片槽</button
+				>{/if}
+			{#if video && output}<button
+					class="a-btn secondary sm"
+					disabled={frameBusy}
+					onclick={exportTail}>{frameBusy ? '正在导出…' : '导出尾帧'}</button
+				>{/if}
+			{#if st.tone === 'fail' || fileGone}<button
+					class="a-btn secondary sm"
+					onclick={() => onRetry(job)}>用相同参数重做</button
+				>{/if}
+			{#if job.status !== 'pending' && job.status !== 'running'}<button
+					class="a-btn danger sm"
+					onclick={() => {
+						deleteOpen = true;
+						detailsOpen = false;
+					}}>移除记录</button
+				>{/if}
+		</div>
+		{#if st.tone === 'fail' || fileGone}<p class="error-note" role="alert">
+				{fileGone ? t('jobst.missingDetail') : st.detail}
+			</p>{/if}
+		<div class="detail-meta">
+			<!-- Display-only spec rows have no local state; preserve their existing positional reuse. -->
+			{#each spec as s, i (i)}<span>{s.label} · {s.value}</span
+				>{/each}{#if endpoint}<span>{endpoint}</span>{/if}
+		</div>
+		{#if inputs.length || prompt}
+			<div class="section-title">{t('desk.inputs')}</div>
+			{#if inputs.length}
+				<div class="inputs">
+					{#each inputs as inp (inp.label + inp.path)}
+						{#if inp.kind === 'image'}
+							<img
+								class="mini"
+								src={assetUrl(inp.path)}
+								alt={inp.label}
+								title={inp.label}
+								loading="lazy"
+							/>
+						{:else}
+							<span class="mini glyph" title={inp.label}
+								><Icon
+									name={inp.kind === 'video' ? 'film' : 'music'}
+									size={14}
+								/></span
+							>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+			{#if prompt}<p class="prompt">{prompt}</p>{/if}
+		{/if}
+
+		<div class="section-title">{t('desk.workflow')}</div>
+		<dl class="kv">
+			<dt>{t('desk.kvName')}</dt>
+			<dd>
+				{wf?.name ?? t('studio.jobName', { id: job.id })}
+				{#if wfDeleted}<span class="a-tag wf-gone"
+						>{t('studio.wfDeletedTag')}</span
+					>{/if}
+			</dd>
+			{#if wf?.usage}
+				<dt>{t('desk.kvUsage')}</dt>
+				<dd>{usageLabel(wf.usage)}</dd>
+			{/if}
+			<dt>{t('desk.kvCreated')}</dt>
+			<dd class="mono">{fmtClock(parseDbTs(job.created_at))}</dd>
+			{#if job.comfy_prompt_id}
+				<dt>{t('desk.kvPromptId')}</dt>
+				<dd class="mono">{job.comfy_prompt_id}</dd>
+			{/if}
+		</dl>
+	{/if}
+</Modal>
+<Modal bind:open={deleteOpen} title="删除作品记录" size="md">
+	<p>
+		确认移除这条生成记录及生成文件？关联项目中的回流记录也会移除。确认后有 5
+		秒可撤销，提交后无法恢复。
+	</p>
+	{#snippet footer()}<button
+			class="a-btn secondary"
+			onclick={() => (deleteOpen = false)}>取消</button
+		>
+		<button
+			class="a-btn danger"
+			onclick={() => {
+				if (job) onDelete(job);
+				deleteOpen = false;
+			}}>确认移除</button
+		>{/snippet}
+</Modal>
+{#if lightbox && output && !video}<ImageLightbox
+		src={assetUrl(output) ?? ''}
+		alt={prompt || '创作结果'}
+		onClose={() => (lightbox = false)}
+	/>{/if}
+
+<style>
+	.artboard {
+		position: relative;
+		display: grid;
+		grid-template-rows: 0 minmax(0, 1fr) 40px;
+		height: 100%;
+		min-height: 0;
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+		overflow: hidden;
+	}
+	.artboard-toolbar,
+	.artboard-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 6px;
+		padding: 0 12px;
+		min-width: 0;
+	}
+	.artboard-toolbar {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		z-index: 2;
+		border-radius: 4px;
+		background: var(--media-scrim);
+		color: var(--on-media);
+		padding: 2px 6px;
+		max-width: calc(100% - 20px);
+		border: 0;
+		cursor: pointer;
+		text-align: left;
+	}
+	.result-title {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		min-width: 0;
+		font-size: 11px;
+		color: var(--text-2);
+	}
+	.result-title small {
+		color: var(--text-3);
+		font-size: 10px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 220px;
+	}
+	.canvas-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		height: 26px;
+		box-sizing: border-box;
+		background: var(--bg-2);
+		color: var(--text-2);
+		border: 1px solid var(--line);
+		border-radius: var(--desk-action-radius);
+		padding: 0 9px;
+		font-size: 12px;
+		font-weight: 500;
+		cursor: pointer;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+	.action-separator {
+		width: 1px;
+		height: 18px;
+		flex-shrink: 0;
+		margin: 0 4px;
+		background: var(--line-2);
+	}
+	.delete-output {
+		width: 26px;
+		padding: 0;
+		justify-content: center;
+		color: var(--err);
+		background: transparent;
+		border-color: transparent;
+	}
+	.canvas-btn:disabled,
+	.canvas-btn[aria-disabled='true'] {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.canvas-btn:hover {
+		color: var(--text);
+		background: var(--bg-3);
+	}
+	.canvas-btn[aria-pressed='true'],
+	.play-button {
+		color: var(--accent);
+		border-color: var(--accent-line);
+	}
+	.stage {
+		grid-row: 2;
+		min-height: 0;
+		min-width: 0;
+		position: relative;
+		overflow: hidden;
+	}
+	.stage-media {
+		position: absolute;
+		inset: 0;
+		padding: 0;
+		display: grid;
+		place-items: center;
+		min-height: 0;
+	}
+	.print {
+		position: relative;
+		display: grid;
+		grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		min-width: 0;
+		border: 0;
+		padding: 0;
+		background: none;
+		box-shadow: none;
+	}
+	.big-play {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		width: 64px;
+		height: 64px;
+		border-radius: 50%;
+		border: 1px solid var(--on-media-line);
+		color: var(--on-media);
+		background: var(--media-scrim);
+		font-size: 26px;
+		cursor: pointer;
+	}
+	.print img,
+	.print video {
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		min-height: 0;
+		min-width: 0;
+		object-fit: contain;
+		display: block;
+	}
+	.print :global(.a-fix) {
+		display: none;
+	}
+	.stage-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		gap: 12px;
+		font-size: 14px;
+		color: var(--text-2);
+	}
+	.stage-empty .sub {
+		color: var(--text-3);
+		font-size: 11px;
+		text-align: center;
+		max-width: 480px;
+		overflow-wrap: anywhere;
+	}
+	.stage-bar {
+		width: 200px;
+	}
+	.comparison-layer {
+		position: absolute;
+		inset: 0;
+		background: var(--bg-0);
+		pointer-events: none;
+	}
+	.comparison-divider {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background: var(--accent);
+		pointer-events: none;
+	}
+	.artboard-footer {
+		grid-row: 3;
+		justify-content: center;
+		gap: 6px;
+		padding: 0;
+		font-size: 10px;
+		color: var(--text-3);
+	}
+	.result-spec {
+		margin-left: auto;
+	}
+	.compare-slider {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 10px;
+	}
+	.compare-slider input {
+		width: 120px;
+		accent-color: var(--accent);
+	}
+	.output-picker {
+		position: absolute;
+		bottom: 8px;
+		left: 50%;
+		transform: translateX(-50%);
+		display: flex;
+		gap: 4px;
+		max-width: 90%;
+		overflow: auto;
+		background: var(--media-scrim);
+		border: 1px solid var(--line);
+		padding: 4px;
+		border-radius: 8px;
+	}
+	.output-picker button {
+		background: none;
+		border: 0;
+		color: var(--text-3);
+		font-size: 10px;
+		padding: 4px 8px;
+		cursor: pointer;
+		border-radius: 4px;
+	}
+	.output-picker button[aria-pressed='true'] {
+		background: var(--accent-soft);
+		color: var(--accent);
+	}
+	.detail-actions,
+	.detail-meta,
+	.inputs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+		margin-bottom: 16px;
+	}
+	.detail-meta {
+		color: var(--text-3);
+		font-size: 11px;
+	}
+	.section-title {
+		font-size: 12px;
+		color: var(--text-3);
+		margin: 20px 0 10px;
+	}
+	.mini {
+		width: 60px;
+		height: 60px;
+		object-fit: cover;
+		border-radius: 8px;
+		background: var(--surface);
+	}
+	.mini.glyph {
+		display: grid;
+		place-items: center;
+	}
+	.prompt {
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+		padding: 16px;
+		border: 1px solid var(--line);
+		border-radius: 10px;
+		background: var(--bg-2);
+		max-height: 260px;
+		overflow: auto;
+	}
+	.kv {
+		display: grid;
+		grid-template-columns: 90px minmax(0, 1fr);
+		font-size: 12px;
+		gap: 8px;
+	}
+	.kv dt {
+		color: var(--text-3);
+	}
+	.kv dd {
+		margin: 0;
+		overflow-wrap: anywhere;
+	}
+	.error-note {
+		color: var(--warn);
+	}
+	@media (max-width: 1100px) {
+		.result-title small {
+			display: none;
+		}
+		.stage-media {
+			padding: 8px 12px;
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/DeskWorkflowRail.svelte

@@ -0,0 +1,631 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+ import { isWorkflowRunnable } from '$lib/workflowState';
+	import { onMount, untrack } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { createMutation, useQueryClient } from '@tanstack/svelte-query';
+	import { workflows, apiErrorMessage } from '$lib/api';
+	import type { WorkflowMeta } from '$lib/comfy/types';
+	import { usageLabel } from '$lib/components/generate/schema';
+	import { spotlight } from '$lib/actions/spotlight';
+	import { toast } from '$lib/toast';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	let {
+		kind,
+		initialUsage = 'all',
+		metas,
+		selectedId,
+		pendingCount,
+		onPick,
+		onKind,
+		onDetails,
+		disabled = false,
+		historyCollapsed = false,
+		onToggleHistory,
+	}: {
+		disabled?: boolean;
+		historyCollapsed?: boolean;
+		onToggleHistory: () => void;
+		kind: 'image' | 'video';
+		initialUsage?: string;
+		metas: WorkflowMeta[];
+		selectedId: number | null;
+		pendingCount: number;
+		onPick: (id: number) => void;
+		onKind: (kind: 'image' | 'video') => void;
+		onDetails: () => void;
+	} = $props();
+	let searchInput: HTMLInputElement;
+	let searchOrigin: HTMLElement | null = null;
+	function searchKeydown(e: KeyboardEvent) {
+		if (e.defaultPrevented || e.isComposing || e.keyCode === 229) return;
+		if (
+			[
+				...document.querySelectorAll('.shell-pop, .modal, [role="dialog"]'),
+			].some((el) => el.getClientRects().length)
+		)
+			return;
+		if (e.key === 'Escape' && e.target === searchInput) {
+			e.preventDefault();
+			const origin = searchOrigin?.isConnected
+				? searchOrigin
+				: searchInput.closest('aside')?.querySelector('button');
+			if (origin instanceof HTMLElement) origin.focus();
+			else searchInput.blur();
+			return;
+		}
+		const el = e.target instanceof HTMLElement ? e.target : null;
+		if (
+			e.key !== '/' ||
+			e.ctrlKey ||
+			e.metaKey ||
+			e.altKey ||
+			el?.isContentEditable ||
+			el?.closest(
+				'input, textarea, select, [contenteditable]:not([contenteditable="false"])',
+			) ||
+			!searchInput?.getClientRects().length
+		)
+			return;
+		e.preventDefault();
+		searchInput.focus();
+	}
+	const client = useQueryClient();
+	let search = $state(''),
+		usage = $state(untrack(() => initialUsage)),
+		family = $state('all'),
+		favOnly = $state(false),
+		runnableOnly = $state(true),
+		limit = $state(48),
+		pins = $state<number[]>([]);
+	onMount(() => {
+		try {
+			pins = JSON.parse(
+				localStorage.getItem('calliope.reference.workflowPins') || '[]',
+			);
+		} catch {
+			pins = [];
+		}
+	});
+	const families = $derived([
+		...new Set(metas.map((m) => m.model_family).filter(Boolean)),
+	]);
+	const usages = $derived([
+		...new Set(metas.map((m) => m.usage).filter(Boolean)),
+	]);
+	const filtered = $derived(
+		metas
+			.filter(
+				(m) =>
+					(!runnableOnly || runnable(m)) &&
+					(!favOnly || m.favorite) &&
+					(usage === 'all' || m.usage === usage) &&
+					(family === 'all' || m.model_family === family) &&
+					[
+						m.name,
+						m.description,
+						m.source_path,
+						m.usage ? usageLabel(m.usage) : null,
+						m.model_family,
+						...(m.tags ?? []),
+					]
+						.join(' ')
+						.toLowerCase()
+						.includes(search.trim().toLowerCase()),
+			)
+			.sort(
+				(a, b) =>
+					Number(pins.includes(b.id)) - Number(pins.includes(a.id)) ||
+					Number(b.favorite) - Number(a.favorite) ||
+					(a.model_family ?? '本地工作流').localeCompare(
+						b.model_family ?? '本地工作流',
+						'zh',
+					) ||
+					a.name.localeCompare(b.name, 'zh'),
+			),
+	);
+	$effect(() => {
+		void search;
+		void usage;
+		void family;
+		void favOnly;
+		limit = 48;
+	});
+	$effect(() => {
+		const index = filtered.findIndex((m) => m.id === selectedId);
+		if (index >= limit) limit = index + 24;
+	});
+	function runnable(m: WorkflowMeta) {
+		return isWorkflowRunnable(m);
+	}
+	function choose(m: WorkflowMeta) {
+		if (runnable(m)) onPick(m.id);
+		else void goto(resolve(`/workflows?manage=1&wf=${m.id}`));
+	}
+	function pin(id: number) {
+		pins = pins.includes(id) ? pins.filter((p) => p !== id) : [...pins, id];
+		try {
+			localStorage.setItem(
+				'calliope.reference.workflowPins',
+				JSON.stringify(pins),
+			);
+		} catch {
+			/* Pins remain usable this visit. */
+		}
+	}
+	const favorite = createMutation({
+		mutationFn: (m: WorkflowMeta) =>
+			workflows.update(m.id, { favorite: !m.favorite }),
+		onSuccess: () => client.invalidateQueries({ queryKey: ['workflows-meta'] }),
+		onError: (e) => toast.error(apiErrorMessage(e)),
+	});
+</script>
+
+<svelte:window onkeydown={searchKeydown} />
+
+<aside class="workflow-rail" aria-label="创作工作流列表">
+	<header>
+		<strong>创作台</strong><button
+			class="history-toggle a-btn ghost sm"
+			onclick={onToggleHistory}
+			aria-label={historyCollapsed ? '展开历史栏' : '收起历史栏'}
+			aria-expanded={!historyCollapsed}>◫</button
+		>
+	</header>
+	<div class="rail-tools">
+		<div class="kind-tabs" role="tablist" aria-label="创作类型">
+			<button
+				role="tab"
+				aria-selected={kind === 'image'}
+				{disabled}
+				onclick={() => onKind('image')}>图片</button
+			>
+			<button
+				role="tab"
+				aria-selected={kind === 'video'}
+				{disabled}
+				onclick={() => onKind('video')}>视频</button
+			>
+		</div>
+		<div class="rail-search">
+			<Icon name="search" size={14} />
+			<input
+				type="search"
+				bind:this={searchInput}
+				onfocus={(e) => {
+					searchOrigin =
+						e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null;
+				}}
+				bind:value={search}
+				aria-label="搜索工作流"
+				placeholder="搜用途、模型或文件名"
+			/>
+			<kbd>/</kbd>
+		</div>
+		<div class="filters" role="group" aria-label="筛选工作流用途">
+			<button aria-pressed={usage === 'all'} onclick={() => (usage = 'all')}
+				>全部</button
+			>
+			{#each usages as u (u)}<button
+					aria-pressed={usage === u}
+					onclick={() => (usage = u!)}>{usageLabel(u!)}</button
+				>{/each}
+			<button aria-pressed={favOnly} onclick={() => (favOnly = !favOnly)}
+				>☆ 收藏</button
+			>
+		</div>
+		{#if families.length}<div
+				class="filters"
+				role="group"
+				aria-label="筛选模型家族"
+			>
+				<button aria-pressed={family === 'all'} onclick={() => (family = 'all')}
+					>全部模型</button
+				>
+				{#each families as f (f)}<button
+						aria-pressed={family === f}
+						onclick={() => (family = f!)}>{f}</button
+					>{/each}
+			</div>{/if}
+		<div class="list-meta">
+			<span title="目录接口不提供仓库文件总数"
+				>{filtered.length} 个 · 仓库文件数未知</span
+			>
+			<label class="runnable-filter"
+				><input type="checkbox" bind:checked={runnableOnly} />仅可运行</label
+			>
+		</div>
+	</div>
+	<div class="rail-list">
+		{#each filtered.slice(0, limit) as m, index (m.id)}
+			{#if index === 0 || pins.includes(m.id) !== pins.includes(filtered[index - 1].id) || (!pins.includes(m.id) && m.model_family !== filtered[index - 1].model_family)}<div
+					class="family-label"
+				>
+					{pins.includes(m.id) ? '置顶工作流' : m.model_family || '本地工作流'}
+				</div>{/if}
+			<div
+				class="workflow-row reference-option"
+				use:spotlight
+				class:selected={selectedId === m.id}
+			>
+				<button
+					class="workflow-pick"
+					{disabled}
+					onclick={() => choose(m)}
+					aria-pressed={selectedId === m.id}
+					title={m.name}
+					><i class:video={kind === 'video'}
+						>{m.model_family?.slice(0, 3) || (kind === 'image' ? '◈' : '▷')}</i
+					><span
+						><b>{m.name}</b>{#if !runnable(m)}<small class="pending"
+								>待配置 · 映射 / 测试 →</small
+							>{/if}<small
+							>{m.description ||
+								(m.usage ? usageLabel(m.usage) : '本地 ComfyUI')}</small
+						></span
+					></button
+				>
+				<div class="row-actions">
+					<button
+						class:pressed={pins.includes(m.id)}
+						aria-pressed={pins.includes(m.id)}
+						aria-label={(pins.includes(m.id) ? '取消置顶' : '置顶') + m.name}
+						onclick={() => pin(m.id)}>⌖</button
+					><button
+						aria-pressed={!!m.favorite}
+						aria-label={(m.favorite ? '取消收藏' : '收藏') + m.name}
+						disabled={$favorite.isPending}
+						onclick={() => $favorite.mutate(m)}>{m.favorite ? '★' : '☆'}</button
+					>
+				</div>
+			</div>{/each}
+		{#if !filtered.length}<p class="empty">
+				没有符合条件的工作流。可以清空搜索或更改筛选。
+			</p>{/if}
+		{#if filtered.length > limit}<button
+				class="more"
+				onclick={() => (limit += 48)}
+				>再显示 {Math.min(filtered.length - limit, 48)} 个</button
+			>{/if}
+	</div>
+	<footer>
+		{#if pendingCount}<a href={resolve('/workflows?manage=1')}
+				>{pendingCount} 个工作流待配置 →</a
+			>{/if}<button class="manage" data-workflow-details onclick={onDetails}
+			><span>＋</span>
+			<div>工作流说明与管理<small>输入要求 / 导入 / 分类</small></div>
+			<b>›</b></button
+		><a href={resolve('/models')}>云端模型与接口 ↗</a>
+	</footer>
+</aside>
+
+<style>
+	.workflow-rail {
+		box-sizing: border-box;
+		width: var(--list);
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		background: var(--bg-1);
+		border-right: 1px solid var(--line);
+	}
+	.workflow-rail > header {
+		padding: 12px 12px 0;
+		height: var(--desk-rail-title-height);
+		box-sizing: border-box;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	header strong {
+		font-size: 14px;
+		font-weight: 600;
+		display: block;
+	}
+	.rail-tools {
+		padding: var(--desk-rail-gap) 12px;
+		border-bottom: 1px solid var(--line);
+	}
+	.kind-tabs {
+		display: flex;
+		gap: 2px;
+		padding: 3px;
+		height: 36px;
+		box-sizing: border-box;
+		border: 1px solid var(--line);
+		border-radius: var(--desk-seg-radius);
+		background: var(--well);
+	}
+	.kind-tabs button {
+		flex: 1;
+		height: 28px;
+		padding: 0 12px;
+		font-size: 12.5px;
+		border: 0;
+		border-radius: var(--desk-seg-selected-radius);
+		background: transparent;
+		color: var(--tx-2);
+		cursor: pointer;
+	}
+	.kind-tabs [aria-selected='true'] {
+		background: var(--bg-3);
+		box-shadow: var(--sh-1);
+		color: var(--tx-1);
+	}
+	.kind-tabs button:disabled {
+		cursor: wait;
+	}
+	.rail-search {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: var(--desk-rail-gap);
+		height: var(--desk-search-height);
+		box-sizing: border-box;
+		font-size: var(--desk-search-size);
+		padding: 0 10px;
+		background: var(--well);
+		border: 1px solid var(--line-2);
+		border-radius: var(--desk-search-radius);
+		color: var(--text);
+	}
+	.rail-search input {
+		min-width: 0;
+		flex: 1;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		outline: none;
+	}
+	.rail-search kbd {
+		font: var(--desk-search-key-font);
+		padding: var(--desk-search-key-padding);
+		border-radius: var(--desk-search-key-radius);
+		border: 1px solid var(--line-2);
+		color: var(--tx-3);
+		background: var(--bg-1);
+	}
+	.rail-search:focus-within {
+		border-color: var(--scene);
+	}
+	.filters {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		margin-top: 8px;
+	}
+	.filters button {
+		height: var(--desk-filter-height);
+		padding: 0 9px;
+		font-size: var(--desk-filter-size);
+		border-radius: var(--desk-filter-radius);
+		border: 1px solid var(--line);
+		background: var(--bg-2);
+		color: var(--tx-2);
+		cursor: pointer;
+	}
+	.filters button[aria-pressed='true'] {
+		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));
+	}
+	.runnable-filter {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		white-space: nowrap;
+		cursor: pointer;
+	}
+	.runnable-filter input {
+		margin: 0;
+		appearance: none;
+		width: var(--desk-switch-width);
+		height: var(--desk-switch-height);
+		border: 0;
+		border-radius: var(--r-pill);
+		background: var(--bg-4);
+		position: relative;
+		cursor: pointer;
+		flex-shrink: 0;
+	}
+	.runnable-filter input::after {
+		content: '';
+		position: absolute;
+		left: 2px;
+		top: 2px;
+		width: var(--desk-switch-knob);
+		height: var(--desk-switch-knob);
+		border-radius: 50%;
+		background: var(--tx-2);
+		transition: transform var(--t-base);
+	}
+	.runnable-filter input:checked {
+		background: color-mix(in srgb, var(--scene) 55%, var(--bg-4));
+	}
+	.runnable-filter input:checked::after {
+		transform: translateX(11px);
+		background: var(--on-media);
+	}
+	.pending {
+		color: var(--warn);
+	}
+	.list-meta {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 6px;
+		padding: 8px 2px 0;
+		font-size: var(--desk-filter-size);
+		color: var(--tx-3);
+	}
+	.family-label {
+		font-size: 11px;
+		color: var(--tx-3);
+		padding: 8px;
+	}
+	.rail-list {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		padding: 0 8px 8px;
+		scrollbar-gutter: stable;
+	}
+	.workflow-row {
+		border: 1px solid transparent;
+		position: relative;
+		display: flex;
+		align-items: center;
+		border-radius: 10px;
+		margin: 2px 0;
+	}
+	.workflow-row.selected {
+		border-color: color-mix(in srgb, var(--scene) 35%, transparent);
+		background: linear-gradient(
+			90deg,
+			color-mix(in srgb, var(--scene) 12%, var(--bg-3)),
+			var(--bg-3)
+		);
+	}
+	.workflow-row.selected::before {
+		content: '';
+		width: 3px;
+		height: 22px;
+		position: absolute;
+		left: 0;
+		background: var(--scene);
+		border-radius: 3px;
+	}
+	.workflow-pick {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+		padding: 9px 8px;
+		min-height: 55px;
+		width: 100%;
+		min-width: 0;
+		text-align: left;
+		border: 0;
+		background: none;
+		color: var(--text);
+		cursor: pointer;
+	}
+	.workflow-pick i {
+		display: grid;
+		place-items: center;
+		width: 32px;
+		height: 32px;
+		flex-shrink: 0;
+		border-radius: 9px;
+		border: 1px solid var(--line-2);
+		color: var(--scene);
+		background: var(--bg-3);
+		font-size: 16px;
+		font-style: normal;
+	}
+	.workflow-pick > span {
+		min-width: 0;
+		flex: 1;
+	}
+	.workflow-pick b {
+		display: block;
+		font-size: 12px;
+		font-weight: 550;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-bottom: 4px;
+	}
+	.workflow-pick small {
+		display: block;
+		font-size: 10px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--text-3);
+	}
+	.row-actions {
+		display: flex;
+		gap: 2px;
+		padding-right: 4px;
+		flex-shrink: 0;
+	}
+	.row-actions button {
+		opacity: 0;
+		padding: 2px;
+		height: 24px;
+		width: 20px;
+		border: 0;
+		color: var(--text-3);
+		background: none;
+		font-size: 12px;
+		cursor: pointer;
+	}
+	.row-actions button[aria-pressed='true'] {
+		color: var(--warn);
+		opacity: 1;
+	}
+	.workflow-row:hover .row-actions button,
+	.workflow-row:focus-within .row-actions button {
+		opacity: 1;
+	}
+	.workflow-row:hover {
+		background-color: var(--bg-2);
+	}
+	.empty {
+		color: var(--text-3);
+		font-size: 11px;
+		padding: 12px;
+	}
+	.more {
+		width: 100%;
+		padding: 8px;
+		background: none;
+		border: 1px solid var(--line);
+		color: var(--text-3);
+		border-radius: 6px;
+		font-size: 11px;
+		cursor: pointer;
+	}
+	footer {
+		padding: 12px;
+		display: grid;
+		gap: 6px;
+		border-top: 1px solid var(--line);
+	}
+	footer a,
+	.manage {
+		font-size: 11px;
+		color: var(--text-3);
+		text-decoration: none;
+	}
+	.manage {
+		text-align: left;
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		background: none;
+		border: 0;
+		padding: 7px 8px;
+		cursor: pointer;
+	}
+	.manage small {
+		display: none;
+	}
+	.manage b {
+		margin-left: auto;
+	}
+	button:disabled {
+		opacity: 0.5;
+		cursor: wait;
+	}
+	@media (max-width: 1100px) {
+		.workflow-rail {
+			width: var(--list);
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/HistoryRail.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { assetUrl } from '$lib/api';
+	import { jobStatusInfo } from '$lib/jobStatus';
+	import { isVideoOutput } from '../generate/takes';
+	import type { Job } from '$lib/comfy/types';
+	let {
+		jobs,
+		selectedId,
+		onSelect,
+		onExpand,
+		collapsed = false,
+	}: {
+		collapsed?: boolean;
+		jobs: Job[];
+		selectedId: number | null;
+		onSelect: (job: Job) => void;
+		onExpand: () => void;
+	} = $props();
+	const sorted = $derived([...jobs].sort((a, b) => b.id - a.id));
+</script>
+
+<aside class="history-rail" class:collapsed aria-label="生成历史">
+	<header>历史</header>
+	{#if !collapsed}
+		<div class="history-list">
+			{#each sorted as job (job.id)}
+				{@const status = jobStatusInfo(job)}
+				<button
+					class="history-take"
+					class:selected={selectedId === job.id}
+					onclick={() => onSelect(job)}
+					aria-label={'查看历史 #' + job.id + ' · ' + status.label}
+					aria-pressed={selectedId === job.id}
+				>
+					<div class="thumb">
+						{#if job.output_paths[0] && status.tone === 'ok'}
+							{#if isVideoOutput(job, job.output_paths[0])}<span
+									class="video-mark">▷</span
+								><video
+									src={assetUrl(job.output_paths[0])}
+									muted
+									preload="metadata"
+									aria-label="视频缩略图"
+								></video>
+							{:else}<img
+									src={assetUrl(job.output_paths[0])}
+									alt=""
+									loading="lazy"
+								/>{/if}
+						{:else}<span class:failed={status.tone === 'fail'}
+								>{status.label}</span
+							>{/if}
+					</div>
+					<small>#{job.id}</small>
+				</button>
+			{/each}
+			{#if !sorted.length}<p>生成后<br />记录留在这里</p>{/if}
+		</div>
+		<footer><button onclick={onExpand}>全部记录</button></footer>
+	{/if}
+</aside>
+
+<style>
+	.history-rail {
+		box-sizing: border-box;
+		width: var(--hist);
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		border-left: 1px solid var(--line);
+		background: var(--bg-1);
+	}
+	.history-rail.collapsed {
+		width: 0;
+		border: 0;
+		overflow: hidden;
+		visibility: hidden;
+	}
+	header {
+		height: var(--head);
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		border-bottom: 1px solid var(--line);
+	}
+	button {
+		font: inherit;
+		font-size: 11px;
+		background: none;
+		color: var(--tx-2);
+		border: 0;
+		cursor: pointer;
+	}
+	.history-list {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		padding: 8px 6px;
+	}
+	.history-take {
+		display: block;
+		width: 100%;
+		padding: 3px;
+		margin-bottom: 8px;
+		border: 1px solid transparent;
+		border-radius: var(--r-sm);
+	}
+	.history-take.selected {
+		border-color: var(--scene);
+		background: color-mix(in srgb, var(--scene) 10%, transparent);
+	}
+	.thumb {
+		position: relative;
+		aspect-ratio: 1;
+		display: grid;
+		place-items: center;
+		background: var(--bg-0);
+		border-radius: var(--r-xs);
+		overflow: hidden;
+		font-size: 10px;
+	}
+	img,
+	video {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		position: absolute;
+		inset: 0;
+	}
+	.video-mark {
+		position: absolute;
+		z-index: 1;
+		color: var(--on-media);
+		font-size: 24px;
+		text-shadow: 0 1px 6px var(--media-scrim);
+	}
+	.failed {
+		color: var(--err);
+	}
+	small {
+		font-family: var(--mono);
+		font-size: 10px;
+		color: var(--tx-3);
+	}
+	p {
+		text-align: center;
+		font-size: 10px;
+		color: var(--tx-3);
+		line-height: 1.7;
+	}
+	footer {
+		padding: 10px 2px;
+		text-align: center;
+		border-top: 1px solid var(--line);
+	}
+</style>

calliope-web/src/lib/components/desk/InputRequirementBadge.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import type { WorkflowMediaIO } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+
+	/**
+	 * 输入要求徽标 (HEL-683)：一个工作流真实声明 的进出媒介，
+	 * 来自 S2 元数据——图标+文字双编码，只报真实接线，不虚构输入。
+	 */
+	interface Props {
+		io: WorkflowMediaIO | null | undefined;
+		/** Compact form for row summaries (no out side when empty-in). */
+		compact?: boolean;
+	}
+
+	let { io, compact = false }: Props = $props();
+
+	type Medium = 'image' | 'video' | 'audio';
+
+	const LABELS: Record<Medium, string> = {
+		image: 'wl.mediaImage',
+		video: 'wl.mediaVideo',
+		audio: 'wl.mediaAudio',
+	};
+
+	const inList = $derived(((io?.in ?? []) as Medium[]).filter((m) => m in LABELS));
+	const outList = $derived(((io?.out ?? []) as Medium[]).filter((m) => m in LABELS));
+</script>
+
+{#if inList.length || outList.length}
+	<span class="req" aria-label={t('desk.bayReqAria')}>
+		{#each inList as m (m)}
+			<span class="pill in" title="{t(LABELS[m])} · {t('wl.mediaIn')}">
+				<Icon name={m === 'image' ? 'image' : m === 'video' ? 'film' : 'music'} size={12} />
+				{#if !compact}<span class="lbl">{t(LABELS[m])}</span>{/if}
+			</span>
+		{/each}
+		{#if inList.length && outList.length}<span class="arrow">→</span>{/if}
+		{#each outList as m (m)}
+			<span class="pill out" title="{t(LABELS[m])} · {t('wl.mediaOut')}">
+				<Icon name={m === 'image' ? 'image' : m === 'video' ? 'film' : 'music'} size={12} />
+				{#if !compact}<span class="lbl">{t(LABELS[m])}</span>{/if}
+			</span>
+		{/each}
+	</span>
+{:else if !compact}
+	<span class="pill none" title={t('desk.promptOnly')}><span class="lbl">{t('desk.promptOnly')}</span></span>
+{/if}
+
+<style>
+	.req {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		flex-wrap: wrap;
+	}
+	.pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		height: 18px;
+		padding: 0 5px;
+		border-radius: var(--r-sm);
+		background: var(--bg-4);
+		color: var(--text-2);
+		font-size: var(--fs-mini);
+		white-space: nowrap;
+	}
+	.pill.in {
+		color: var(--text);
+	}
+	.pill.none .lbl {
+		color: var(--text-3);
+	}
+	.arrow {
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+	}
+</style>

calliope-web/src/lib/components/desk/LibraryFilters.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { t } from '$lib/i18n.svelte';
+
+	/**
+	 * 挑选台筛选行 (HEL-683)：搜索框 + 本机/云端来源分段 + 仅收藏开关。
+	 * 云端分段是诚实的占位——云端生成能力尚未接入，切过去只看到说明。
+	 */
+	interface Props {
+		search: string;
+		source: 'local' | 'cloud';
+		favOnly: boolean;
+		resultHint: string;
+		searchEl?: HTMLInputElement | null;
+		onSetSearch: (v: string) => void;
+		onSetSource: (s: 'local' | 'cloud') => void;
+		onToggleFav: () => void;
+	}
+
+	let {
+		search,
+		source,
+		favOnly,
+		resultHint,
+		searchEl = $bindable(null),
+		onSetSearch,
+		onSetSource,
+		onToggleFav,
+	}: Props = $props();
+</script>
+
+<div class="filters">
+	<div class="search">
+		<Icon name="search" size={14} />
+		<input
+			bind:this={searchEl}
+			class="search-input"
+			type="search"
+			value={search}
+			placeholder={t('desk.baySearchPh')}
+			aria-label={t('desk.baySearchPh')}
+			aria-keyshortcuts="/"
+			oninput={(e) => onSetSearch(e.currentTarget.value)}
+		/>
+	</div>
+	<div class="a-seg source" role="group" aria-label={t('desk.baySourceLabel')}>
+		<button type="button" aria-pressed={source === 'local'} onclick={() => onSetSource('local')}>
+			{t('desk.baySourceLocal')}
+		</button>
+		<button type="button" aria-pressed={source === 'cloud'} onclick={() => onSetSource('cloud')}>
+			{t('desk.baySourceCloud')}
+		</button>
+	</div>
+	<button
+		type="button"
+		class="a-chip fav"
+		class:on={favOnly}
+		aria-pressed={favOnly}
+		title={t('desk.bayFavOnly')}
+		onclick={onToggleFav}
+	>
+		<Icon name="star" size={13} />
+		<span class="lbl">{t('desk.bayFavOnly')}</span>
+	</button>
+	<span class="hint">{resultHint}</span>
+</div>
+
+<style>
+	.filters {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+	}
+	.search {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		flex: 1 1 180px;
+		min-width: 0;
+		height: 32px;
+		box-sizing: border-box;
+		padding: 0 var(--sp-3);
+		border: 1px solid var(--line);
+		border-radius: var(--r-md);
+		background: var(--bg-2);
+		color: var(--text-3);
+		transition: border-color var(--d-state) ease;
+	}
+	.search:focus-within {
+		border-color: var(--accent-line);
+	}
+	.search-input {
+		flex: 1;
+		min-width: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: var(--text);
+		font: inherit;
+		font-size: var(--fs-section);
+	}
+	.search-input::placeholder {
+		color: var(--text-3);
+	}
+	.source {
+		flex-shrink: 0;
+	}
+	.fav.on {
+		color: var(--accent);
+		background: var(--accent-soft);
+	}
+	.hint {
+		margin-left: auto;
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+		white-space: nowrap;
+	}
+	@media (max-width: 760px) {
+		.hint {
+			display: none;
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/LibraryRow.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import type { WorkflowMeta } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import { usageLabel } from '$lib/components/generate/schema';
+	import InputRequirementBadge from './InputRequirementBadge.svelte';
+
+	/**
+	 * 挑选台一行 (HEL-683)：显示名 + 输入要求徽标 + 用途标签 + 端点/收藏
+	 * 标注。当前工作流行带取景框角线；键盘/指针悬停行只是背景高亮。
+	 */
+	interface Props {
+		meta: WorkflowMeta;
+		current: boolean;
+		active: boolean;
+		endpoints: Array<{ id: string; name: string }>;
+		onPick: () => void;
+		onActive: () => void;
+	}
+
+	let { meta, current, active, endpoints, onPick, onActive }: Props = $props();
+
+	const endpointName = $derived(
+		meta.endpoint_id
+			? (endpoints.find((e) => e.id === meta.endpoint_id)?.name ?? t('desk.wfDefaultConn'))
+			: t('desk.wfDefaultConn'),
+	);
+</script>
+
+<button
+	type="button"
+	class="row"
+	class:active
+	class:current
+	role="option"
+	aria-selected={active ? 'true' : undefined}
+	aria-current={current ? 'true' : undefined}
+	onclick={onPick}
+	onpointermove={onActive}
+	onfocus={onActive}
+>
+	<span class="main">
+		<span class="name">
+			{#if meta.favorite}<span class="fav"><Icon name="star" size={11} /></span>{/if}
+			<span class="name-txt">{meta.name}</span>
+			{#if current}<span class="cur-mark">{t('desk.wfCurrent')}</span>{/if}
+		</span>
+		<span class="sub">
+			<span class="a-tag">{usageLabel(meta.usage!)}</span>
+			<InputRequirementBadge io={meta.media_io} compact />
+		</span>
+	</span>
+	<span class="side">
+		<span class="conn" title="{t('studio.connLabel')}：{endpointName}">{endpointName}</span>
+	</span>
+</button>
+
+<style>
+	.row {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-3);
+		width: 100%;
+		box-sizing: border-box;
+		padding: var(--sp-3) var(--sp-4);
+		border: 0;
+		border-radius: var(--r-md);
+		background: none;
+		color: var(--text);
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+		/* 长列表性能：视口外的行不参与布局/绘制。 */
+		content-visibility: auto;
+		contain-intrinsic-size: auto 52px;
+		transition: background-color var(--d-state) ease;
+	}
+	.row:hover,
+	.row.active {
+		background: var(--bg-3);
+	}
+	.row:focus-visible {
+		outline: none;
+		background: var(--bg-3);
+		box-shadow: 0 0 0 1px var(--accent-line);
+	}
+	.main {
+		display: grid;
+		gap: 3px;
+		flex: 1;
+		min-width: 0;
+	}
+	.name {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+	}
+	.name-txt {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 500;
+	}
+	.fav {
+		display: inline-flex;
+		flex-shrink: 0;
+		color: var(--accent);
+	}
+	.cur-mark {
+		flex-shrink: 0;
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+	}
+	.sub {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--sp-1);
+	}
+	.side {
+		flex-shrink: 0;
+	}
+	.conn {
+		max-width: 120px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+	}
+	/* 当前工作流：取景框角线（HEL-680 的内容级选中语言）。 */
+	.row.current {
+		position: relative;
+	}
+	.row.current::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:
+			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;
+	}
+</style>

calliope-web/src/lib/components/desk/ResultRail.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { assetUrl } from '$lib/api';
+	import type { Job } from '$lib/comfy/types';
+	import { jobStatusInfo } from '$lib/jobStatus';
+	import { parseDbTs } from '$lib/dbtime';
+	import { missingOutputsOf, markOutputMissing } from '$lib/missingOutputs.svelte';
+	let {
+		jobs,
+		selectedId,
+		onSelect,
+		onHistory,
+		nameOf,
+	}: {
+		jobs: Job[];
+		selectedId: number | null;
+		onSelect: (job: Job) => void;
+		onHistory: () => void;
+		nameOf: (job: Job) => string;
+	} = $props();
+	const sorted = $derived(
+		[...jobs].sort((a, b) => parseDbTs(b.created_at) - parseDbTs(a.created_at)),
+	);
+</script>
+
+<section class="result-rail" aria-label="生成结果记录">
+	<header>
+		<strong>生成记录 <small>{jobs.length}</small></strong><button
+			class="a-btn ghost sm"
+			onclick={onHistory}>全部记录与任务 ↗</button
+		>
+	</header>
+	<div class="rail-items">
+		{#each sorted as job (job.id)}
+			{@const path = job.output_paths.find((p) => !missingOutputsOf(job).includes(p))}
+			{@const status = jobStatusInfo(job)}
+			<button
+				class="result-item"
+				class:selected={job.id === selectedId}
+				aria-pressed={job.id === selectedId}
+				aria-label="查看第 {job.id} 次生成，{status.label}"
+				title="{nameOf(job)} · {job.created_at} · {status.label}"
+				onclick={() => onSelect(job)}
+			>
+				<span class="thumb"
+					>{#if path && job.kind === 'image'}<img
+							src={assetUrl(path)}
+							alt=""
+							loading="lazy"
+							onerror={() => markOutputMissing(path)}
+						/>{:else}<span>{job.kind === 'video' ? '▶' : '✳'}</span>{/if}</span
+				>
+				<span class="record-label">{nameOf(job)}</span>
+				<span class="record-label"
+					>第 {job.id} 次 · {path
+						? status.label
+						: job.status === 'done'
+							? '文件缺失'
+							: status.label}</span
+				>
+			</button>
+		{:else}<p>生成后，结果会保存在这里。</p>{/each}
+	</div>
+</section>
+
+<style>
+	.result-rail {
+		border-top: 1px solid var(--line);
+		padding-top: 8px;
+		min-width: 0;
+		flex-shrink: 0;
+	}
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+		gap: 10px;
+	}
+	strong {
+		font-size: 12px;
+	}
+	small {
+		color: var(--text-3);
+		margin-left: 5px;
+		font-weight: 400;
+	}
+	.rail-items {
+		display: flex;
+		gap: 8px;
+		overflow-x: auto;
+		overscroll-behavior: contain;
+		padding-bottom: 5px;
+	}
+	.result-item {
+		width: 122px;
+		flex-shrink: 0;
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		overflow: hidden;
+		padding: 3px;
+		background: var(--surface);
+		cursor: pointer;
+		color: var(--text);
+	}
+	.result-item.selected {
+		border: 2px solid var(--accent);
+		padding: 2px;
+		background: var(--accent-soft);
+	}
+	.thumb {
+		display: grid;
+		place-items: center;
+		height: 48px;
+		background: var(--bg);
+		border-radius: 5px;
+		color: var(--accent);
+		font-size: 20px;
+	}
+	img {
+		width: 100%;
+		height: 48px;
+		object-fit: cover;
+		border-radius: 5px;
+	}
+	.record-label {
+		display: block;
+		font-size: 10px;
+		padding: 5px 3px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	p {
+		font-size: 12px;
+		color: var(--text-3);
+		margin: 4px 0;
+	}
+	@media (max-height: 650px) {
+		.rail-items {
+			display: none;
+		}
+		.thumb,
+		img {
+			height: 32px;
+		}
+		.result-item {
+			width: 110px;
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/TaskModeRail.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { USAGE_BY_KIND, type WorkflowMeta, type WorkflowUsage } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import { usageLabel } from '$lib/components/generate/schema';
+
+	/**
+	 * 左栏任务模式 (HEL-683)：该入口可用的任务模式（按真实工作流统计），
+	 * 未覆盖的模式置灰；底部为收藏与最近使用。窄屏退化为横向模式条。
+	 */
+	interface Props {
+		kind: 'image' | 'video';
+		metas: WorkflowMeta[];
+		active: WorkflowUsage | 'all';
+		onSelect: (mode: WorkflowUsage | 'all') => void;
+		onPickWorkflow: (id: number) => void;
+	}
+
+	let { kind, metas, active, onSelect, onPickWorkflow }: Props = $props();
+
+	const modes = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Local counting accumulator is consumed synchronously into mode rows; metas/kind drive the derivation.
+		const counts = new Map<WorkflowUsage, number>();
+		for (const m of metas) {
+			if (!m.usage) continue;
+			counts.set(m.usage, (counts.get(m.usage) ?? 0) + 1);
+		}
+		return USAGE_BY_KIND[kind].map((u) => ({ usage: u, count: counts.get(u) ?? 0 }));
+	});
+
+	const favorites = $derived(
+		metas
+			.filter((m) => m.favorite)
+			.sort((a, b) => (b.last_used_at ?? '').localeCompare(a.last_used_at ?? ''))
+			.slice(0, 5),
+	);
+	const recents = $derived(
+		metas
+			.filter((m) => m.last_used_at && !m.favorite)
+			.sort((a, b) => (b.last_used_at ?? '').localeCompare(a.last_used_at ?? ''))
+			.slice(0, 5),
+	);
+</script>
+
+<nav class="rail" aria-label={t('desk.modeRailAria')}>
+	<p class="rail-label">{t('desk.modeRailTitle')}</p>
+	<div class="modes" role="group" aria-label={t('desk.modeRailTitle')}>
+		<button
+			type="button"
+			class="mode"
+			class:on={active === 'all'}
+			aria-pressed={active === 'all'}
+			onclick={() => onSelect('all')}
+		>
+			<span class="mode-lbl">{t('desk.modeAll')}</span>
+			<span class="mode-n">{metas.length}</span>
+		</button>
+		{#each modes as m (m.usage)}
+			<button
+				type="button"
+				class="mode"
+				class:on={active === m.usage}
+				class:off={m.count === 0}
+				disabled={m.count === 0}
+				aria-pressed={active === m.usage}
+				title={m.count === 0 ? t('desk.modeEmpty') : usageLabel(m.usage)}
+				onclick={() => onSelect(m.usage)}
+			>
+				<span class="mode-lbl">{usageLabel(m.usage)}</span>
+				<span class="mode-n">{m.count}</span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="lists">
+		{#if recents.length}
+			<section class="rail-sec">
+				<p class="rail-label">
+					<Icon name="clock" size={12} />
+					{t('desk.railRecent')}
+				</p>
+				<ul class="pick-list">
+					{#each recents as m (m.id)}
+						<li>
+							<button type="button" class="pick" title={m.name} onclick={() => onPickWorkflow(m.id)}>
+								<span class="pick-name">{m.name}</span>
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</section>
+		{/if}
+		{#if favorites.length}
+			<section class="rail-sec">
+				<p class="rail-label">
+					<Icon name="star" size={12} />
+					{t('desk.railFav')}
+				</p>
+				<ul class="pick-list">
+					{#each favorites as m (m.id)}
+						<li>
+							<button type="button" class="pick" title={m.name} onclick={() => onPickWorkflow(m.id)}>
+								<span class="pick-name">{m.name}</span>
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</section>
+		{/if}
+	</div>
+</nav>
+
+<style>
+	.rail {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		box-sizing: border-box;
+		padding: var(--sp-5) var(--sp-3);
+		border-right: 1px solid var(--line);
+		overflow-y: auto;
+	}
+	.rail-label {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		margin: 0 0 var(--sp-2);
+		padding: 0 var(--sp-3);
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+		letter-spacing: 0.05em;
+		white-space: nowrap;
+	}
+	.modes {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.mode {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--sp-2);
+		box-sizing: border-box;
+		width: 100%;
+		padding: var(--sp-3) var(--sp-4);
+		border: 0;
+		border-radius: var(--r-md);
+		background: none;
+		color: var(--text-2);
+		font: inherit;
+		font-size: var(--fs-body);
+		text-align: left;
+		cursor: pointer;
+		transition:
+			color var(--d-state) ease,
+			background-color var(--d-state) ease;
+	}
+	.mode:hover:not(:disabled) {
+		background: var(--bg-3);
+		color: var(--text);
+	}
+	.mode:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 1px var(--accent-line);
+	}
+	.mode.on {
+		background: var(--bg-3);
+		color: var(--text);
+	}
+	/* 取景框角线只标当前模式（HEL-680 内容级选中语言）。 */
+	.mode.on {
+		position: relative;
+	}
+	.mode.on::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:
+			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;
+	}
+	.mode.off {
+		color: var(--text-3);
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+	.mode-n {
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+		font-variant-numeric: tabular-nums;
+	}
+	.lists {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-4);
+		margin-top: var(--sp-5);
+		padding-top: var(--sp-4);
+		border-top: 1px solid var(--line);
+	}
+	.rail-sec {
+		min-width: 0;
+	}
+	.pick-list {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.pick {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		padding: var(--sp-2) var(--sp-4);
+		border: 0;
+		border-radius: var(--r-sm);
+		background: none;
+		color: var(--text-2);
+		font: inherit;
+		font-size: var(--fs-aux);
+		text-align: left;
+		cursor: pointer;
+		transition:
+			color var(--d-state) ease,
+			background-color var(--d-state) ease;
+	}
+	.pick:hover {
+		background: var(--bg-3);
+		color: var(--text);
+	}
+	.pick:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 1px var(--accent-line);
+	}
+	.pick-name {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* 窄屏：任务模式退化为横向条，收藏/最近隐藏（挑选台里有同样入口）。 */
+	@media (max-width: 760px) {
+		.rail {
+			flex-direction: row;
+			align-items: center;
+			gap: var(--sp-2);
+			padding: var(--sp-2) var(--sp-4);
+			border-right: 0;
+			border-bottom: 1px solid var(--line);
+			overflow-x: auto;
+			overflow-y: hidden;
+			overscroll-behavior-x: contain;
+		}
+		.rail-label {
+			margin: 0;
+			padding: 0;
+			flex-shrink: 0;
+		}
+		.modes {
+			flex-direction: row;
+			gap: var(--sp-1);
+		}
+		.mode {
+			width: auto;
+			gap: var(--sp-2);
+			padding: var(--sp-2) var(--sp-3);
+			border: 1px solid var(--line);
+			font-size: var(--fs-aux);
+			white-space: nowrap;
+		}
+		.mode.on::after {
+			inset: 1px;
+		}
+		.lists {
+			display: none;
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/WorkflowBay.svelte

@@ -0,0 +1,550 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+ import { isWorkflowRunnable } from '$lib/workflowState';
+	import { tick } from 'svelte';
+	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
+	import { workflows, settings, apiErrorMessage } from '$lib/api';
+	import type { WorkflowMeta } from '$lib/comfy/types';
+	import { usageLabel } from '$lib/components/generate/schema';
+	import InputRequirementBadge from './InputRequirementBadge.svelte';
+	import { toast } from '$lib/toast';
+	interface Props {
+		open: boolean;
+		metas: WorkflowMeta[];
+		pendingCount: number;
+		selectedId: number | null;
+		activeId: number | null;
+		endpoints: Array<{ id: string; name: string }>;
+		onPick: (id: number) => void;
+		onClose: () => void;
+		catalogue?: boolean;
+		localOnly?: boolean;
+		onPreview?: (id: number) => void;
+	}
+	let {
+		open,
+		metas,
+		pendingCount,
+		selectedId,
+		activeId = $bindable(null),
+		onPick,
+		onClose,
+		catalogue = false,
+		localOnly = false,
+		onPreview,
+	}: Props = $props();
+	const client = useQueryClient();
+	const modelsQuery = createQuery({
+		queryKey: ['settings'],
+		queryFn: settings.get,
+	});
+	let search = $state(''),
+		category = $state('all'),
+		family = $state('all'),
+		source = $state('local'),
+		usage = $state('all'),
+		favOnly = $state(false),
+		recentOnly = $state(false),
+		visibleCount = $state(48);
+	let searchEl: HTMLInputElement;
+	let listEl: HTMLDivElement;
+	const labels: Record<string, string> = {
+		basic: '基础工具',
+		audio_tts: '语音',
+		music: '音乐',
+		image: '图片',
+		video: '视频',
+		digital_human: '数字人',
+		motion_transfer: '动作',
+	};
+	const categories = $derived([
+		...new Set(metas.map((m) => m.category).filter((k): k is string => !!k)),
+	]);
+	const families = $derived(
+		[...new Set(metas.map((m) => m.model_family).filter((k): k is string => !!k))].sort(),
+	);
+	const filtered = $derived(
+		metas
+			.filter(
+				(m) =>
+					(category === 'all' || m.category === category) &&
+					(usage === 'all' || m.usage === usage) &&
+					(family === 'all' || m.model_family === family) &&
+					(!favOnly || m.favorite) &&
+					(!recentOnly || m.last_used_at) &&
+					(!search.trim() ||
+						[
+							m.name,
+							m.description,
+							...(m.tags ?? []),
+							m.model_family,
+							m.usage ? usageLabel(m.usage) : '',
+						]
+							.join(' ')
+							.toLowerCase()
+							.includes(search.toLowerCase().trim())),
+			)
+			.sort((a, b) =>
+				recentOnly
+					? (b.last_used_at ?? '').localeCompare(a.last_used_at ?? '')
+					: Number(b.favorite) - Number(a.favorite) || a.name.localeCompare(b.name, 'zh'),
+			),
+	);
+	const visible = $derived(filtered.slice(0, visibleCount));
+	const cloudModels = $derived(
+		($modelsQuery.data?.llm_profiles ?? []).filter(
+			(p) => !search || [p.name, p.model].join(' ').toLowerCase().includes(search.toLowerCase()),
+		),
+	);
+	$effect(() => {
+		void search;
+		void category;
+		void family;
+		void usage;
+		void favOnly;
+		void recentOnly;
+		visibleCount = 48;
+		listEl?.scrollTo({ top: 0 });
+	});
+	$effect(() => {
+		if (!open) return;
+		const idx = filtered.findIndex((m) => m.id === selectedId);
+		if (idx >= visibleCount) visibleCount = idx + 48;
+		void tick().then(() => searchEl?.focus());
+	});
+	$effect(() => {
+		if (!filtered.some((m) => m.id === activeId)) activeId = filtered[0]?.id ?? null;
+	});
+	export function focusSearch() {
+		searchEl?.focus();
+	}
+	async function favorite(m: WorkflowMeta) {
+		try {
+			await workflows.update(m.id, { favorite: !m.favorite });
+			await client.invalidateQueries({ queryKey: ['workflows-meta'] });
+		} catch (e) {
+			toast.error(apiErrorMessage(e));
+		}
+	}
+	function pick(m: WorkflowMeta) {
+		if (onPreview) onPreview(m.id);
+		else if (isWorkflowRunnable(m)) onPick(m.id);
+	}
+	function move(delta: number) {
+		const i = Math.max(
+			0,
+			Math.min(filtered.length - 1, filtered.findIndex((m) => m.id === activeId) + delta),
+		);
+		activeId = filtered[i]?.id ?? null;
+		if (i >= visibleCount) visibleCount = i + 24;
+		void tick().then(() =>
+			listEl?.querySelector(`[data-wf-row="${activeId}"]`)?.scrollIntoView({ block: 'nearest' }),
+		);
+	}
+	function key(e: KeyboardEvent) {
+		if (e.defaultPrevented) return;
+		if (e.key === 'Escape' && !catalogue) {
+			e.preventDefault();
+			onClose();
+		} else if (source !== 'local') {
+			return;
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			move(1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			move(-1);
+		} else if (e.key === 'Enter' && e.target === searchEl) {
+			e.preventDefault();
+			const m = filtered.find((m) => m.id === activeId);
+			if (m) pick(m);
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="catalogue" inert={!open} onkeydown={key}>
+	<aside class="categories">
+		<p>按创作任务寻找</p>
+		<button
+			class:active={category === 'all' && !favOnly && !recentOnly}
+			onclick={() => {
+				category = 'all';
+				favOnly = false;
+				recentOnly = false;
+			}}><span>全部工具</span><small>{metas.length}</small></button
+		>
+		{#each categories as cat (cat)}<button
+				class:active={category === cat}
+				onclick={() => {
+					category = cat;
+					favOnly = false;
+					recentOnly = false;
+				}}
+				><span>{labels[cat] ?? cat}</span><small
+					>{metas.filter((m) => m.category === cat).length}</small
+				></button
+			>{/each}
+		<div class="divider"></div>
+		<button
+			class:active={favOnly}
+			onclick={() => {
+				favOnly = !favOnly;
+				recentOnly = false;
+			}}><span>☆ 我的收藏</span><small>{metas.filter((m) => m.favorite).length}</small></button
+		><button
+			class:active={recentOnly}
+			onclick={() => {
+				recentOnly = !recentOnly;
+				favOnly = false;
+			}}><span>◷ 最近使用</span></button
+		>
+	</aside>
+	<section class="catalogue-main">
+		<label class="search"
+			><span>⌕</span><input
+				type="search"
+				bind:this={searchEl}
+				bind:value={search}
+				placeholder="搜索工作流、模型或用途…"
+				aria-label="搜索工作流"
+			/></label
+		>
+		<div class="filters">
+			<button class:active={source === 'local'} onclick={() => (source = 'local')}
+				>本地 ComfyUI</button
+			>{#if !localOnly}<button class:active={source === 'cloud'} onclick={() => (source = 'cloud')}
+					>云端与智能体</button
+				>{/if}{#if source === 'local'}<select aria-label="筛选创作任务" bind:value={usage}
+					><option value="all">所有创作任务</option>{#each [...new Set(metas
+								.map((m) => m.usage)
+								.filter(Boolean))] as u (u)}<option value={u!}>{usageLabel(u!)}</option>{/each}</select
+				><select aria-label="筛选模型家族" bind:value={family}
+					><option value="all">全部模型</option>{#each families as f (f)}<option value={f}>{f}</option
+						>{/each}</select
+				>{/if}<span>{source === 'local' ? filtered.length : cloudModels.length} 个结果</span>
+		</div>
+		<div class="results" bind:this={listEl}>
+			{#if source === 'cloud'}
+				<div class="cloud-context">
+					<h3>让专业搭档加入创作。</h3>
+					<p>使用已配置模型，在智能体或画布中创作。自定义多媒体接口与技能可在设置中管理。</p>
+					<a href={resolve('/canvas')} class="a-btn primary">打开创作画布 ↗</a>
+				</div>
+				{#each cloudModels as profile (profile.id)}<article class="workflow-card">
+						<div class="family">{profile.model}<span>已配置模型</span></div>
+						<h3>{profile.name}</h3>
+						<a href={resolve('/agents')} class="tool-link">交给智能体创作 ↗</a>
+					</article>{:else}<p class="empty">
+						还没有匹配的模型。<a href={resolve('/models')}>配置模型 ↗</a>
+					</p>{/each}
+			{:else}
+				{#each visible as m (m.id)}<article
+						class="workflow-card"
+						class:selected={m.id === selectedId}
+						class:roving={m.id === activeId}
+						data-wf-row={m.id}
+					>
+						<button
+							class="workflow-choice"
+							onclick={() => pick(m)}
+							onfocus={() => (activeId = m.id)}
+							disabled={!onPreview && (!m.is_enabled || m.needs_mapping || !m.usage)}
+							aria-label="{onPreview ? '查看' : '使用'} {m.name}"
+							aria-current={m.id === selectedId ? 'true' : undefined}
+						>
+							<div class="family">
+								{m.model_family ?? 'COMFYUI'}<span>本地</span>
+							</div>
+							<h3 title={m.name}>{m.name}</h3>
+							{#if m.description}<p class="description">{m.description}</p>{/if}
+							<div class="card-meta">
+								<span>{m.usage ? usageLabel(m.usage) : '待映射'}</span><InputRequirementBadge
+									io={m.media_io}
+									compact
+								/>
+							</div>
+						</button>
+						<button
+							class="favorite"
+							class:saved={m.favorite}
+							aria-label="{m.favorite ? '取消收藏' : '收藏'} {m.name}"
+							aria-pressed={m.favorite}
+							onclick={() => favorite(m)}>{m.favorite ? '★' : '☆'}</button
+						>
+						{#if m.needs_mapping || !m.is_enabled || !m.usage}<a
+								href={resolve('/workflows?manage=1')}
+								class="tool-link">{m.needs_mapping ? '完成映射' : '管理工作流'} ↗</a
+							>{/if}
+					</article>{:else}<p class="empty">没有找到匹配的工作流，试试更短的关键词。</p>{/each}
+				{#if visibleCount < filtered.length}<button
+						class="more a-btn secondary"
+						onclick={() => (visibleCount += 48)}
+						>再看 {Math.min(48, filtered.length - visibleCount)} 个工具</button
+					>{/if}
+			{/if}
+		</div>
+		{#if pendingCount > 0}<p class="pending">
+				另有 {pendingCount} 个工作流待映射。<a href={resolve('/workflows?manage=1')}>去整理 ↗</a>
+			</p>{/if}
+	</section>
+</div>
+
+<style>
+	.description {
+		font-size: 11px;
+		color: var(--text-3);
+		line-height: 1.5;
+		margin: 0 0 10px;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+	@media (max-width: 1100px) {
+		.catalogue {
+			grid-template-columns: 112px minmax(0, 1fr);
+		}
+		.catalogue-main {
+			padding-left: 12px;
+		}
+		.results {
+			grid-template-columns: 1fr;
+		}
+	}
+	.catalogue {
+		display: grid;
+		grid-template-columns: 145px minmax(0, 1fr);
+		height: 100%;
+		min-height: 0;
+	}
+	.categories {
+		padding: 16px 15px 20px 0;
+		border-right: 1px solid var(--line);
+		overflow: auto;
+	}
+	.categories p {
+		font-size: 9px;
+		letter-spacing: 1px;
+		color: var(--text-3);
+		margin: 0 9px 15px;
+	}
+	.categories button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		border: 0;
+		background: none;
+		border-radius: 7px;
+		text-align: left;
+		font-size: 11px;
+		padding: 11px 10px;
+		color: var(--text-2);
+		cursor: pointer;
+	}
+	.categories button.active {
+		background: #e8eafe;
+		color: var(--accent);
+	}
+	.categories small {
+		font-size: 9px;
+		color: var(--text-3);
+	}
+	.divider {
+		border-top: 1px solid var(--line);
+		margin: 20px 8px 12px;
+	}
+	.catalogue-main {
+		padding: 16px 0 0 22px;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		min-width: 0;
+	}
+	.search {
+		display: flex;
+		gap: 9px;
+		align-items: center;
+		background: var(--bg);
+		border: 1px solid var(--line);
+		padding: 9px 13px;
+		border-radius: 8px;
+	}
+	.search input {
+		border: 0;
+		outline: none;
+		background: transparent;
+		width: 100%;
+		font-size: 12px;
+		color: var(--text);
+	}
+	.search:focus-within {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.filters {
+		display: flex;
+		gap: 7px;
+		align-items: center;
+		margin: 16px 0 21px;
+		flex-wrap: wrap;
+	}
+	.filters button,
+	.filters select {
+		font-size: 10px;
+		padding: 5px 10px;
+		border: 1px solid var(--line);
+		border-radius: 20px;
+		background: var(--surface);
+		color: var(--text-3);
+		cursor: pointer;
+	}
+	.filters button.active {
+		color: var(--surface);
+		background: var(--text);
+		border-color: var(--text);
+	}
+	.filters span {
+		font-size: 9px;
+		color: var(--text-3);
+		margin-left: auto;
+	}
+	.filters select {
+		max-width: 140px;
+	}
+	.results {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 11px;
+		overflow: auto;
+		min-height: 0;
+		align-content: start;
+		padding: 2px 5px 15px 2px;
+	}
+	.workflow-card {
+		border: 1px solid var(--line);
+		border-radius: 11px;
+		padding: 14px;
+		position: relative;
+		background: var(--surface);
+		min-width: 0;
+		content-visibility: auto;
+		contain-intrinsic-size: auto 132px;
+	}
+	.workflow-card.selected {
+		border-color: var(--accent);
+		background: #f1f3ff;
+	}
+	.workflow-choice {
+		display: block;
+		text-align: left;
+		width: 100%;
+		padding: 0 0 9px;
+		border: 0;
+		background: none;
+		color: var(--text);
+		cursor: pointer;
+	}
+	.workflow-choice:disabled {
+		opacity: 0.65;
+		cursor: default;
+	}
+	.family {
+		font: 9px var(--mono);
+		letter-spacing: 0.5px;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 12px;
+		color: var(--text-3);
+	}
+	.family span {
+		font: 8px var(--font);
+		padding: 2px 5px;
+		border: 1px solid var(--line);
+		border-radius: 4px;
+	}
+	h3 {
+		font-size: 11px;
+		line-height: 1.7;
+		margin: 0 0 9px;
+		font-weight: 550;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		word-break: break-word;
+	}
+	.card-meta {
+		display: flex;
+		gap: 5px;
+		flex-wrap: wrap;
+		font-size: 9px;
+		color: var(--text-3);
+		padding-right: 14px;
+	}
+	.favorite {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		font-size: 18px;
+		border: 0;
+		background: none;
+		color: #838a78;
+		cursor: pointer;
+	}
+	.favorite.saved {
+		color: var(--accent);
+	}
+	.tool-link {
+		font-size: 10px;
+		color: var(--accent);
+		text-decoration: none;
+	}
+	.cloud-context {
+		grid-column: 1/-1;
+		background: #e9e7df;
+		padding: 25px;
+		border-radius: 12px;
+	}
+	.cloud-context h3 {
+		font-size: 19px;
+	}
+	.cloud-context p {
+		font-size: 11px;
+		color: var(--text-2);
+		line-height: 1.8;
+	}
+	.cloud-context .a-btn {
+		font-size: 11px;
+	}
+	.pending {
+		font-size: 10px;
+		color: var(--text-3);
+		padding-top: 12px;
+		border-top: 1px solid var(--line);
+		margin: 0;
+	}
+	.empty {
+		grid-column: 1/-1;
+		padding: 45px;
+		text-align: center;
+		font-size: 12px;
+		color: var(--text-3);
+	}
+	.more {
+		grid-column: 1/-1;
+		justify-self: center;
+		font-size: 11px;
+	}
+	@media (hover: hover) {
+		.workflow-card:hover {
+			border-color: var(--accent-line);
+		}
+		.categories button:hover {
+			background: var(--bg-3);
+		}
+	}
+</style>

calliope-web/src/lib/components/desk/WorkflowPreview.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import type { Workflow, WorkflowMeta } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import { usageLabel, slotSummary } from '$lib/components/generate/schema';
+	import InputRequirementBadge from './InputRequirementBadge.svelte';
+
+	/**
+	 * 输入要求预览 (HEL-683)：挑选台打开时右侧的详情面板——展示键盘/指针
+	 * 停留的工作流的名称、家族、说明与真实输入要求（S2 元数据 + 已加载的
+	 * 完整记录槽位摘要），确认后进入创作区。
+	 */
+	interface Props {
+		meta: WorkflowMeta | null;
+		full: Workflow | null;
+		currentId: number | null;
+		endpoints: Array<{ id: string; name: string }>;
+		onUse: () => void;
+		onToggleFav: (fav: boolean) => void;
+	}
+
+	let { meta, full, currentId, endpoints, onUse, onToggleFav }: Props = $props();
+
+	const isCurrent = $derived(meta != null && meta.id === currentId);
+	const broken = $derived((full?.warnings ?? []).some((w) => w.level === 'error'));
+	const endpointName = $derived.by(() => {
+		const id = meta?.endpoint_id;
+		if (!id) return t('desk.wfDefaultConn');
+		return endpoints.find((e) => e.id === id)?.name ?? t('desk.wfDefaultConn');
+	});
+	const CATEGORY_LABELS: Record<string, string> = {
+		basic: 'wfCat.basic',
+		audio_tts: 'wfCat.audioTts',
+		music: 'wfCat.music',
+		image: 'wfCat.image',
+		video: 'wfCat.video',
+		digital_human: 'wfCat.digitalHuman',
+		motion_transfer: 'wfCat.motionTransfer',
+	};
+</script>
+
+<div class="preview">
+	{#if meta}
+		<div class="head">
+			<h3 class="name" title={meta.name}>{meta.name}</h3>
+			<button
+				type="button"
+				class="fav"
+				class:on={meta.favorite}
+				aria-pressed={meta.favorite}
+				aria-label={t('desk.bayFavOnly')}
+				title={meta.favorite ? t('desk.pvUnfav') : t('desk.pvFav')}
+				onclick={() => onToggleFav(!meta.favorite)}
+			>
+				<Icon name="star" size={16} />
+			</button>
+		</div>
+		<div class="tags">
+			{#if meta.usage}<span class="a-tag accent">{usageLabel(meta.usage)}</span>{/if}
+			{#if meta.model_family}<span class="a-tag">{meta.model_family}</span>{/if}
+			{#if meta.category && CATEGORY_LABELS[meta.category]}
+				<span class="a-tag">{t(CATEGORY_LABELS[meta.category])}</span>
+			{/if}
+			{#if isCurrent}<span class="a-tag ok">{t('desk.pvCurrent')}</span>{/if}
+			{#if broken}<span class="a-tag err">{t('desk.wfBroken')}</span>{/if}
+		</div>
+
+		{#if meta.description}
+			<p class="desc">{meta.description}</p>
+		{/if}
+
+		<section class="sec">
+			<h4 class="sec-title">{t('desk.bayReqTitle')}</h4>
+			<div class="req-line">
+				<InputRequirementBadge io={meta.media_io} />
+			</div>
+			{#if full}
+				<p class="slot-summary">{slotSummary(full)}</p>
+			{:else}
+				<p class="slot-summary dim">{t('desk.pvSlotsLoading')}</p>
+			{/if}
+		</section>
+
+		<dl class="kv">
+			<div class="kv-row">
+				<dt>{t('studio.connLabel')}</dt>
+				<dd>{endpointName}</dd>
+			</div>
+			{#if meta.last_used_at}
+				<div class="kv-row">
+					<dt>{t('desk.pvLastUsed')}</dt>
+					<dd>{new Date(meta.last_used_at).toLocaleString()}</dd>
+				</div>
+			{/if}
+			{#if (full?.input_schema ?? []).length}
+				<div class="kv-row">
+					<dt>{t('desk.pvParamCount')}</dt>
+					<dd>{(full?.input_schema ?? []).length}</dd>
+				</div>
+			{/if}
+		</dl>
+
+		<div class="use">
+			<button type="button" class="a-btn primary" disabled={broken} onclick={onUse}>
+				<Icon name="check" size={13} />
+				{isCurrent ? t('desk.pvBackCreate') : t('desk.pvUse')}
+			</button>
+			{#if broken}<p class="use-hint">{t('studio.errWfBroken')}</p>{/if}
+		</div>
+	{:else}
+		<div class="preview-empty">
+			<Icon name="search" size={20} />
+			<p>{t('desk.pvEmpty')}</p>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.preview {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-4);
+		flex: 1;
+		min-height: 0;
+		box-sizing: border-box;
+		height: 100%;
+		padding: var(--sp-7);
+		overflow-y: auto;
+	}
+	.head {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-3);
+	}
+	.name {
+		flex: 1;
+		min-width: 0;
+		margin: 0;
+		color: var(--text);
+		font-size: var(--fs-title);
+		font-weight: 600;
+		line-height: 1.4;
+		overflow-wrap: anywhere;
+	}
+	.fav {
+		flex-shrink: 0;
+		display: grid;
+		place-items: center;
+		width: 32px;
+		height: 32px;
+		border: 1px solid var(--line);
+		border-radius: var(--r-md);
+		background: none;
+		color: var(--text-3);
+		cursor: pointer;
+		transition:
+			color var(--d-state) ease,
+			background-color var(--d-state) ease;
+	}
+	.fav.on {
+		color: var(--accent);
+		background: var(--accent-soft);
+	}
+	.fav:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 1px var(--accent-line);
+	}
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-1);
+	}
+	.desc {
+		margin: 0;
+		color: var(--text-2);
+		font-size: var(--fs-aux);
+		line-height: 1.65;
+		white-space: pre-line;
+	}
+	.sec {
+		display: grid;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		background: var(--bg-2);
+	}
+	.sec-title {
+		margin: 0;
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+		letter-spacing: 0.05em;
+	}
+	.req-line {
+		display: flex;
+	}
+	.slot-summary {
+		margin: 0;
+		color: var(--text-2);
+		font-size: var(--fs-aux);
+	}
+	.slot-summary.dim {
+		color: var(--text-3);
+	}
+	.kv {
+		display: grid;
+		gap: var(--sp-1);
+		margin: 0;
+	}
+	.kv-row {
+		display: flex;
+		gap: var(--sp-3);
+		font-size: var(--fs-aux);
+	}
+	.kv-row dt {
+		flex-shrink: 0;
+		width: 72px;
+		color: var(--text-3);
+	}
+	.kv-row dd {
+		margin: 0;
+		color: var(--text-2);
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	.use {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-2);
+		margin-top: auto;
+		padding-top: var(--sp-4);
+	}
+	.use-hint {
+		margin: 0;
+		color: var(--err);
+		font-size: var(--fs-mini);
+	}
+	.preview-empty {
+		display: grid;
+		place-content: center;
+		justify-items: center;
+		gap: var(--sp-3);
+		height: 100%;
+		color: var(--text-3);
+		font-size: var(--fs-aux);
+	}
+</style>

calliope-web/src/lib/components/desk/draftCache.ts

@@ -0,0 +1,17 @@
+// Same-tab fallback for browsers that deny session storage. No user data leaves the browser.
+const drafts = new Map<string, string>();
+export function readDeskDraft(key: string): string | null {
+  try {
+    return sessionStorage.getItem(key) ?? drafts.get(key) ?? null;
+  } catch {
+    return drafts.get(key) ?? null;
+  }
+}
+export function writeDeskDraft(key: string, value: string) {
+  drafts.set(key, value);
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+    /* In-memory switching still works. */
+  }
+}

calliope-web/src/lib/components/generate/Composer.svelte

@@ -0,0 +1,771 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import Modal from '$lib/components/ui/Modal.svelte';
+	import { tick } from 'svelte';
+	import { assetUrl } from '$lib/api';
+	import ParameterPopover from './ParameterPopover.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import type { ComfyDynamicInput, Workflow } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import ComfyDynamicForm from '$lib/components/ComfyDynamicForm.svelte';
+	import type { Snippet } from 'svelte';
+	import SlotTray from './SlotTray.svelte';
+	import {
+		type BlockReason,
+		type DeskSchema,
+		type FormValue,
+		type FormValues,
+	} from './schema';
+
+	/** Scrollable creative inputs with a separate, always visible submission footer. */
+	interface Props {
+		header?: Snippet;
+		dock?: boolean;
+		ds: DeskSchema;
+		values: FormValues;
+		current: Workflow | null;
+		endpoints: Array<{ id: string; name: string }>;
+		endpointId: string;
+		conn: { state: 'ok' | 'fail' | 'untested' | 'dry'; ms?: number | null };
+		errors: Record<string, string>;
+		showErrors: boolean;
+		block: BlockReason | null;
+		changedCount: number;
+		submitting: boolean;
+		/** Shows 已提交 on the button for --d-flash. */
+		sent: boolean;
+		slotBusy?: boolean;
+		promptEl?: HTMLTextAreaElement | null;
+		onSet: (nodeId: string, value: FormValue) => void;
+		onOpenBay: () => void;
+		onPickEndpoint: (id: string) => void;
+		onSubmit: () => void;
+		onReveal: () => void;
+		onOpenParams: () => void;
+		onRestoreAll: () => void;
+		onFromResults: (nodeId: string) => void;
+	}
+
+	let {
+		header,
+		dock = false,
+		ds,
+		values,
+		current,
+		endpoints,
+		endpointId,
+		conn,
+		errors,
+		showErrors,
+		block,
+		changedCount,
+		submitting,
+		sent,
+		slotBusy = $bindable(false),
+		promptEl = $bindable(null),
+		onSet,
+		onPickEndpoint,
+		onSubmit,
+		onReveal,
+		onOpenParams,
+		onRestoreAll,
+		onFromResults,
+	}: Props = $props();
+
+	let mediaOpen = $state(false);
+	let expanded = $state(false);
+	let popoverInputs = $state<ComfyDynamicInput[]>([]);
+	let popoverAnchor = $state<HTMLElement | null>(null);
+	export function openMedia() {
+		mediaOpen = true;
+	}
+	function openParameter(inp: ComfyDynamicInput, anchor: HTMLElement) {
+		popoverInputs =
+			inp === ds.width || inp === ds.height
+				? [ds.width, ds.height].filter((i): i is ComfyDynamicInput => !!i)
+				: inp === ds.ratio
+					? [ds.ratio, ds.megapixels].filter((i): i is ComfyDynamicInput => !!i)
+					: [inp];
+		popoverAnchor = anchor;
+	}
+	let tray = $state<ReturnType<typeof SlotTray> | null>(null);
+	let root = $state<HTMLElement | null>(null);
+	let dragDepth = $state(0);
+
+	const hasSlots = $derived(ds.slots.length + ds.lists.length > 0);
+	const commonInputs = $derived(
+		ds.megapixels && !ds.common.some((i) => i.nodeId === ds.megapixels?.nodeId)
+			? [...ds.common, ds.megapixels]
+			: ds.common,
+	);
+	const advancedInputs = $derived(
+		ds.advanced.filter((i) => !commonInputs.some((c) => c.nodeId === i.nodeId)),
+	);
+	const promptVal = $derived(
+		ds.prompt ? String(values[ds.prompt.nodeId] ?? '') : '',
+	);
+	const promptErr = $derived(
+		showErrors && ds.prompt ? errors[ds.prompt.nodeId] : undefined,
+	);
+	const endpointName = $derived(
+		endpoints.find((e) => e.id === endpointId)?.name ?? t('desk.noConn'),
+	);
+
+	function patch(
+		inputs: ComfyDynamicInput[],
+		next: Record<string, string | number>,
+	) {
+		for (const inp of inputs) {
+			const v = next[inp.nodeId];
+			if (v !== undefined && v !== values[inp.nodeId]) onSet(inp.nodeId, v);
+		}
+	}
+
+	async function onDrop(e: DragEvent) {
+		e.preventDefault();
+		dragDepth = 0;
+		const files = Array.from(e.dataTransfer?.files ?? []);
+		if (files.length) {
+			if (dock) {
+				mediaOpen = true;
+				await tick();
+			}
+			tray?.dropFiles(files);
+		}
+	}
+
+	function hasFiles(e: DragEvent): boolean {
+		return Array.from(e.dataTransfer?.types ?? []).includes('Files');
+	}
+</script>
+
+<div class="composer-wrap" class:dock class:expanded>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={root}
+		class="composer"
+		class:drag={dragDepth > 0}
+		ondragenter={(e) => {
+			if (hasFiles(e)) {
+				e.preventDefault();
+				dragDepth += 1;
+			}
+		}}
+		ondragleave={() => (dragDepth = Math.max(0, dragDepth - 1))}
+		ondragover={(e) => hasFiles(e) && e.preventDefault()}
+		ondrop={onDrop}
+	>
+		<div class="composer-scroll" aria-label="创作输入">
+			{@render header?.()}
+			{#if current}
+				<section
+					class="input-section prompt-section"
+					class:has-slots={dock && hasSlots}
+				>
+					<h3>2 · 准备这次创作</h3>
+					{#if hasSlots && !dock}<div class="slots">
+							<SlotTray
+				allowScene={current?.kind === 'video'}
+								bind:this={tray}
+								bind:busy={slotBusy}
+								{ds}
+								{values}
+								{showErrors}
+								{errors}
+								{onSet}
+								{onFromResults}
+							/>
+						</div>{/if}
+					{#if dock}<div class="media-summary" class:has-slots={hasSlots}>
+							{#if hasSlots}
+								{#each ds.slots.slice(0, 3) as slot (slot.inp.nodeId)}<button
+										class="media-token"
+										onclick={openMedia}
+										aria-label={'设置' + slot.label}
+									>
+										{#if values[slot.inp.nodeId] && slot.mediaKind === 'image'}<img
+												src={assetUrl(String(values[slot.inp.nodeId]))}
+												alt=""
+											/>{:else}<Icon name="plus" size={12} />{/if}
+										{slot.label}{slot.inp.required ? ' *' : ''}
+									</button>{/each}
+								{#if ds.lists.length}<button
+										class="media-token"
+										onclick={openMedia}
+										>＋ 参考材料 {ds.lists.reduce(
+											(n, g) =>
+												n +
+												(Array.isArray(values[g.nodeId])
+													? (values[g.nodeId] as string[]).length
+													: 0),
+											0,
+										)}</button
+									>{/if}
+								<button class="expand-prompt manage-media" onclick={openMedia}
+									>{slotBusy ? '正在上传…' : '管理素材'}</button
+								>
+							{/if}
+						</div>{/if}
+					<div class="prompt-pair" class:dual={dock && !!ds.negative}>
+						{#if ds.prompt}<div class="prompt-field">
+								<div class="prompt-label">
+									<label for="desk-prompt"
+										>{ds.negative ? '正向提示词' : '提示词'}
+										{#if ds.prompt.required}<span>必填</span>{/if}</label
+									>
+									<button
+										class="expand-prompt"
+										aria-expanded={expanded}
+										onclick={() => (expanded = !expanded)}
+										>{expanded ? '收起提示词' : '展开提示词'}</button
+									>
+								</div>
+								<textarea
+									bind:this={promptEl}
+									id="desk-prompt"
+									class="prompt"
+									class:invalid={!!promptErr}
+									rows="4"
+									value={promptVal}
+									placeholder="描述你想要的画面、动作和镜头…"
+									aria-label={t('studio.promptLabel')}
+									aria-invalid={!!promptErr || undefined}
+									oninput={(e) =>
+										onSet(ds.prompt!.nodeId, e.currentTarget.value)}
+								></textarea>
+								<div class="prompt-counter">
+									<span>Enter 换行 · Ctrl + Enter 生成</span><span
+										>{promptVal.length} 字</span
+									>
+								</div>
+								{#if promptErr}<p class="error" role="alert">
+										{promptErr}
+									</p>{/if}
+							</div>{:else}<p class="note">
+								这个工具不需要填写提示词，请准备它需要的素材。
+							</p>{/if}
+						{#if dock && ds.negative}<div class="prompt-field negative">
+								<label for="desk-negative"
+									>反向提示词 {#if ds.negative.required}<span>必填</span
+										>{/if}</label
+								><textarea
+									id="desk-negative"
+									class="prompt"
+									rows="4"
+									value={String(values[ds.negative.nodeId] ?? '')}
+									placeholder="填写希望避免的内容…"
+									aria-label="反向提示词"
+									aria-invalid={(showErrors && !!errors[ds.negative.nodeId]) ||
+										undefined}
+									oninput={(e) =>
+										onSet(ds.negative!.nodeId, e.currentTarget.value)}
+								></textarea>
+								<div class="prompt-counter">
+									<span>避免的内容</span><span
+										>{String(values[ds.negative.nodeId] ?? '').length} 字</span
+									>
+								</div>
+								{#if showErrors && errors[ds.negative.nodeId]}<p
+										class="error"
+										role="alert"
+									>
+										{errors[ds.negative.nodeId]}
+									</p>{/if}
+							</div>{/if}
+					</div>
+				</section>
+				{#if !dock && commonInputs.length}<section class="input-section">
+						<h3>画面与生成设置</h3>
+						<ComfyDynamicForm
+							inputs={commonInputs}
+							values={values as Record<string, string | number>}
+							quiet
+							{errors}
+							{showErrors}
+							onChange={(v) => patch(commonInputs, v)}
+						/>
+					</section>{/if}
+				{#if !dock && changedCount > 0}<button
+						class="a-btn ghost sm"
+						onclick={onRestoreAll}>恢复工具默认参数</button
+					>{/if}
+				{#if !dock && advancedInputs.length}<details class="advanced">
+						<summary>更多参数 · {advancedInputs.length} 项</summary>
+						<ComfyDynamicForm
+							inputs={advancedInputs}
+							values={values as Record<string, string | number>}
+							quiet
+							{errors}
+							{showErrors}
+							onChange={(v) => patch(advancedInputs, v)}
+						/>
+					</details>{/if}
+			{/if}
+			{#if !dock}<details
+					class="runtime"
+					open={conn.state === 'fail' || !endpointId}
+				>
+					<summary id="desk-conn">运行设置 · {endpointName}</summary>
+					<label for="comfy-endpoint">使用哪台 ComfyUI</label>
+					<select
+						id="comfy-endpoint"
+						class="a-select"
+						value={endpointId}
+						onchange={(e) => onPickEndpoint(e.currentTarget.value)}
+					>
+						{#if !endpoints.length}<option value="">尚未配置服务</option>{/if}
+						{#each endpoints as ep (ep.id)}<option value={ep.id}>{ep.name}</option
+							>{/each}
+					</select><a href={resolve('/connections')} target="_blank" rel="noreferrer"
+						>配置或检查连接 ↗</a
+					>
+				</details>{/if}
+		</div>
+		<footer class="submit">
+			{#if dock}<div class="dock-chips">
+					<button id="desk-conn" class="parameter" onclick={onOpenParams}
+						>✦ {endpointName}⌄</button
+					>{#each commonInputs
+						.filter((i) => i !== ds.height)
+						.slice(0, 3) as inp (inp.nodeId)}<button
+							class="parameter"
+							onclick={(e) => openParameter(inp, e.currentTarget)}
+							>{inp.label}: {String(
+								inp === ds.width && ds.height
+									? String(values[inp.nodeId]) +
+											' × ' +
+											String(values[ds.height.nodeId])
+									: (values[inp.nodeId] ?? inp.defaultValue ?? '—'),
+							)}⌄</button
+						>{/each}<button class="parameter" onclick={onOpenParams}
+						>创作设置⌄</button
+					>
+				</div>{/if}
+			{#if block}<button
+					type="button"
+					class="why"
+					class:err={block.tone === 'err'}
+					onclick={onReveal}>{block.text}</button
+				>
+			{:else}<p class="ready">素材已准备好，可以开始生成。</p>{/if}
+			<button
+				type="button"
+				class="a-btn primary gen"
+				disabled={!!block || submitting || slotBusy}
+				onclick={onSubmit}
+			>
+				<Icon name="sparkle" size={14} />{submitting
+					? '正在提交…'
+					: slotBusy
+						? '正在上传素材…'
+						: sent
+							? '已加入生成队列'
+							: '开始生成'}
+			</button>
+		</footer>
+	</div>
+</div>
+
+{#if dock}
+	<Modal
+		bind:open={mediaOpen}
+		size="lg"
+		title="本次创作素材"
+		dismissible={!slotBusy}
+	>
+		<div class="media-editor">
+			<SlotTray
+				allowScene={current?.kind === 'video'}
+				bind:this={tray}
+				bind:busy={slotBusy}
+				{ds}
+				{values}
+				{showErrors}
+				{errors}
+				{onSet}
+				{onFromResults}
+			/>
+		</div>
+		{#snippet footer()}<button
+				class="a-btn secondary"
+				disabled={slotBusy}
+				onclick={() => (mediaOpen = false)}
+				>{slotBusy ? '正在上传…' : '完成'}</button
+			>{/snippet}
+	</Modal>
+{/if}
+<ParameterPopover
+	inputs={popoverInputs}
+	{values}
+	anchor={popoverAnchor}
+	onClose={() => {
+		popoverInputs = [];
+		popoverAnchor = null;
+	}}
+	onApply={(v) => {
+		for (const [id, value] of Object.entries(v)) onSet(id, value);
+	}}
+/>
+
+<style>
+	.composer-wrap,
+	.composer {
+		height: 100%;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+	.composer-scroll {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		padding: 18px;
+		overscroll-behavior: contain;
+		scrollbar-gutter: stable;
+	}
+	.composer.drag {
+		outline: 2px dashed var(--accent);
+		outline-offset: -4px;
+	}
+	.input-section {
+		padding: 18px 0;
+		border-top: 1px solid var(--line);
+	}
+	h3 {
+		font-size: 13px;
+		margin: 0 0 14px;
+		font-weight: 650;
+	}
+	label {
+		display: block;
+		font-size: 12px;
+		margin-bottom: 8px;
+		color: var(--text-2);
+	}
+	label span {
+		font-size: 10px;
+		color: var(--text-3);
+		margin-left: 6px;
+	}
+	.prompt {
+		display: block;
+		width: 100%;
+		min-height: 100px;
+		max-height: 260px;
+		resize: vertical;
+		box-sizing: border-box;
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		background: var(--surface);
+		padding: 12px;
+		font: inherit;
+		font-size: 13px;
+		line-height: 1.6;
+		color: var(--text);
+	}
+	.prompt:focus {
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	.slots {
+		margin-bottom: 16px;
+	}
+	.slots :global(.tray) {
+		padding: 0;
+		gap: 14px;
+	}
+	.slots :global(.note) {
+		padding: 8px 0 0;
+	}
+	.advanced,
+	.runtime {
+		border-top: 1px solid var(--line);
+		padding: 14px 0;
+	}
+	summary {
+		font-size: 12px;
+		cursor: pointer;
+		padding: 4px 0;
+		margin-bottom: 8px;
+		line-height: 1.5;
+		overflow-wrap: anywhere;
+	}
+	.runtime .a-select {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+	.runtime a {
+		font-size: 12px;
+	}
+	.submit {
+		flex-shrink: 0;
+		padding: 12px 18px 16px;
+		border-top: 1px solid var(--line);
+		background: var(--surface);
+		display: grid;
+		gap: 10px;
+		box-shadow: var(--sh-1);
+	}
+	.gen {
+		width: 100%;
+		min-height: 44px;
+		justify-content: center;
+		gap: 8px;
+		font-size: 14px;
+	}
+	.why {
+		padding: 0;
+		border: 0;
+		background: none;
+		text-align: left;
+		font: inherit;
+		font-size: 12px;
+		line-height: 1.5;
+		color: var(--warn);
+		cursor: pointer;
+		overflow-wrap: anywhere;
+	}
+	.why.err,
+	.error {
+		color: var(--err);
+	}
+	.ready,
+	.note,
+	.error {
+		margin: 0;
+		font-size: 12px;
+		line-height: 1.5;
+		color: var(--text-3);
+	}
+	.error {
+		color: var(--err);
+	}
+
+	.dock {
+		height: auto;
+		min-height: 0;
+	}
+	.dock .composer {
+		height: auto;
+		min-height: 0;
+		border: 1px solid var(--line-2);
+		border-radius: var(--desk-dock-radius);
+		background: var(--composer-bg);
+		overflow: hidden;
+		box-shadow: var(--desk-dock-shadow);
+	}
+	.dock .composer:focus-within {
+		border-color: color-mix(in srgb, var(--gold) 45%, transparent);
+		box-shadow: var(--desk-dock-focus);
+	}
+	.dock .composer-scroll {
+		scrollbar-gutter: auto;
+		padding: 0;
+		overflow: auto;
+		display: flex;
+		flex-direction: column;
+	}
+	.dock .input-section {
+		padding: 0;
+		border: 0;
+		margin: 0;
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+	.dock .input-section > h3 {
+		display: none;
+	}
+	.media-summary {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-height: 0;
+		margin: 0;
+		flex-shrink: 0;
+		overflow: auto;
+	}
+
+	.dock .input-section.has-slots {
+		display: grid;
+		grid-template-columns: minmax(0, var(--desk-slot-column)) minmax(0, 1fr);
+		gap: 0;
+	}
+	.has-slots .media-summary {
+		align-self: start;
+		flex-wrap: wrap;
+		margin: 0;
+		padding: 10px 12px 8px;
+		border-right: 1px solid var(--line);
+	}
+	.media-token {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		background: var(--bg-2);
+		border: 1px dashed var(--line-3);
+		border-radius: 6px;
+		padding: 3px 7px;
+		font-size: 10px;
+		color: var(--text-2);
+		cursor: pointer;
+		white-space: nowrap;
+		height: var(--slot-size);
+	}
+	.media-token img {
+		height: 36px;
+		width: 36px;
+		object-fit: cover;
+		border-radius: 3px;
+	}
+	.expand-prompt {
+		margin-left: auto;
+		flex-shrink: 0;
+		border: 0;
+		background: none;
+		color: var(--tx-2);
+		font-size: 11px;
+		cursor: pointer;
+	}
+	.dock .prompt-pair {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		min-height: 0;
+		flex: 1;
+		gap: 0;
+	}
+	.dock .prompt-pair.dual {
+		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+	}
+	.dock .prompt-field {
+		padding: 10px 14px 6px;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		min-width: 0;
+	}
+	.dock .negative {
+		border-left: 1px solid var(--line);
+	}
+	.dock .prompt-field label {
+		font-size: 11.5px;
+		height: 20px;
+		color: var(--text-3);
+		margin: 0;
+		display: flex;
+		gap: 6px;
+	}
+	.prompt-label {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 20px;
+	}
+	.dock .prompt-field:first-child label {
+		color: var(--tx-2);
+	}
+	.dock .prompt {
+		background: none;
+		border: 0;
+		border-radius: 0;
+		padding: 0;
+		font-size: var(--fs-body);
+		line-height: 1.6;
+		resize: none;
+		min-height: 0;
+		max-height: none;
+		height: var(--prompt-height);
+		flex: none;
+		overflow: auto;
+	}
+	.dock.expanded .prompt {
+		height: var(--prompt-expanded);
+	}
+	.dock .prompt:focus {
+		outline: 0;
+	}
+	.prompt-counter {
+		display: flex;
+		justify-content: space-between;
+		font-size: 9px;
+		color: var(--text-3);
+		margin-top: 3px;
+	}
+	.dock .prompt-counter {
+		height: 22px;
+		align-items: center;
+		font-size: 11px;
+		margin-top: 4px;
+	}
+	.dock .submit {
+		display: flex;
+		flex-wrap: nowrap;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 10px 10px 12px;
+		height: 57px;
+		box-sizing: border-box;
+		background: none;
+		border-top: 1px solid var(--line);
+		position: relative;
+	}
+	.dock-chips {
+		display: flex;
+		gap: 5px;
+		align-items: center;
+		flex: 1;
+		min-width: 0;
+		overflow: auto;
+	}
+	.parameter {
+		background: var(--bg-3);
+		border: 1px solid var(--line);
+		border-radius: 7px;
+		padding: 5px 8px;
+		font-size: 10px;
+		color: var(--tx-2);
+		cursor: pointer;
+		white-space: nowrap;
+		max-width: 180px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 0;
+	}
+	.parameter:hover {
+		border-color: var(--line-3);
+	}
+	.dock .gen {
+		width: var(--desk-gen-width);
+		height: var(--desk-gen-height);
+		min-height: var(--desk-gen-height);
+		font-size: 14px;
+		font-weight: var(--desk-gen-weight);
+		padding: 0 16px;
+		border-radius: var(--desk-gen-radius);
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+	.dock .why {
+		position: absolute;
+		bottom: calc(100% + 3px);
+		right: 14px;
+		max-width: 65%;
+		padding: 3px 8px;
+		border-radius: 5px;
+		background: var(--bg-2);
+		font-size: 10px;
+		color: var(--warn);
+		z-index: 1;
+	}
+	.dock .why.err {
+		color: var(--err);
+		background: var(--bg-2);
+	}
+	.dock .ready {
+		display: none;
+	}
+	.dock .error {
+		font-size: 10px;
+	}
+</style>

calliope-web/src/lib/components/generate/ContextBar.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { t } from '$lib/i18n.svelte';
+	import { backHref, type DeskContext } from './context';
+
+	/**
+	 * 上下文条 (spec-v2 §3.3): the desk was opened from a creation stage.
+	 * Says where from. With a full source identity (HEL-684) results can
+	 * be flowed back per take from the result card; otherwise the old
+	 * note stands — results stay in the desk feed, nothing is written back.
+	 */
+	interface Props {
+		ctx: DeskContext;
+		projectTitle: string;
+		onDismiss: () => void;
+	}
+
+	let { ctx, projectTitle, onDismiss }: Props = $props();
+
+	const stageName = $derived(t(`workbench.stage.${ctx.stage}`));
+	const canFlowBack = $derived(!!ctx.sourceKind && !!ctx.sourceId);
+</script>
+
+<div class="context-bar" role="status">
+	<Icon name="link" size={14} />
+	<span class="from">
+		<b>{t('desk.ctxFrom', { project: projectTitle })}</b>{#if ctx.label}&nbsp;· {ctx.label}{/if}
+	</span>
+	<span class="note">
+		{canFlowBack ? t('desk.ctxBackfill', { stage: stageName }) : t('desk.ctxNoBackfill', { stage: stageName })}
+	</span>
+	<a class="a-btn ghost xs back" href={resolve(backHref(ctx))}>{t('desk.ctxBack', { stage: stageName })}</a>
+	<button type="button" class="a-btn ghost xs" aria-label={t('desk.ctxDismiss')} onclick={onDismiss}>
+		<Icon name="close" size={12} />
+	</button>
+</div>
+
+<style>
+	.context-bar {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: var(--sp-2) var(--sp-4);
+		margin: var(--sp-4) var(--sp-7) 0;
+		padding: var(--sp-3) var(--sp-5);
+		border-radius: var(--r-md);
+		background: var(--run-soft);
+		color: var(--text);
+		font-size: var(--fs-aux);
+	}
+	.context-bar > :global(svg) {
+		color: var(--run);
+	}
+	.from b {
+		color: var(--run);
+		font-weight: 600;
+	}
+	.note {
+		color: var(--text-2);
+	}
+	.back {
+		margin-left: auto;
+	}
+	@media (max-width: 1179px) {
+		.context-bar {
+			margin: var(--sp-4) var(--sp-6) 0;
+		}
+	}
+	@media (max-width: 760px) {
+		.context-bar {
+			margin: var(--sp-3) var(--sp-5) 0;
+		}
+	}
+</style>

calliope-web/src/lib/components/generate/Inspector.svelte

@@ -0,0 +1,887 @@
+<script lang="ts">
+	import { untrack, type Snippet } from 'svelte';
+	import ImageLightbox from '$lib/components/ImageLightbox.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { assetUrl } from '$lib/api';
+	import type { Job, Workflow } from '$lib/comfy/types';
+	import { progressFor } from '$lib/jobProgress';
+	import { jobStatusInfo } from '$lib/jobStatus';
+	import { parseDbTs } from '$lib/dbtime';
+	import {
+		clearOutputMissing,
+		markOutputMissing,
+		missingOutputsOf,
+	} from '$lib/missingOutputs.svelte';
+	import { t } from '$lib/i18n.svelte';
+	import { exportLastFrame } from '$lib/media/lastFrame';
+	import { usageLabel } from './schema';
+	import { elapsedSec, fmtClock, fmtDur, inputsOf, isVideoOutput, promptOf, specOf } from './takes';
+
+	/**
+	 * 检视区 (spec-v2 §3.3): 结果 shows the selected take on the projection
+	 * stage with its spec, inputs and workflow; 参数 hosts the full form.
+	 * ≥1180 it is a column (hide with ]), 761–1179 a right overlay, ≤760
+	 * fullscreen — `overlay` / `open` drive the last two.
+	 * D 批 (HEL-654): pointer picks cross-fade the stage 150ms (键盘
+	 * ↑↓/J/K 即时无动画), video playback is always explicit,
+	 * failed takes get 重试, and a done take whose files no longer load
+	 * shows the amber 文件缺失 state with 用相同参数重做 / 移除记录.
+	 */
+	interface Props {
+		main?: boolean;
+		comparePath?: string | null;
+		tab: 'result' | 'params';
+		job: Job | null;
+		wf: Workflow | undefined;
+		nowMs: number;
+		open: boolean;
+		/** Collapsed or off-screen — nothing inside may take focus. */
+		inactive: boolean;
+		/** Current workflow can take an image output (送入当前图片槽). */
+		canSendToSlot: boolean;
+		/** Animate this result change (pointer pick) — 150ms cross-fade. */
+		crossfade: boolean;
+		/** The stage <video> element, for explicit playback controls. */
+		videoEl?: HTMLVideoElement | null;
+		params: Snippet;
+		onClose: () => void;
+		onReuse: (job: Job) => void;
+		onRetry: (job: Job) => void;
+		onCancel: (job: Job) => void;
+		onSendToSlot: (path: string) => void;
+		onDelete: (job: Job) => void;
+	}
+
+	let {
+		main = false,
+		comparePath = null,
+		tab = $bindable(),
+		job,
+		wf,
+		nowMs,
+		open,
+		inactive,
+		canSendToSlot,
+		videoEl = $bindable(null),
+		params,
+		onClose,
+		onReuse,
+		onRetry,
+		onCancel,
+		onSendToSlot,
+		onDelete,
+	}: Props = $props();
+
+	let outIndex = $state(0);
+	let compare = $state(false),
+		compareAt = $state(50),
+		lightbox = $state(false);
+	$effect(() => {
+		void job?.id;
+		compare = false;
+		lightbox = false;
+	});
+	$effect.pre(() => {
+		void job?.id;
+		outIndex = 0;
+	});
+
+	const st = $derived(job ? jobStatusInfo(job) : null);
+	// §3.4 红/琥珀界线: amber only when the task SUCCEEDED but its files
+	// cannot be fetched — the failed case stays red.
+	const gonePaths = $derived(missingOutputsOf(job));
+	const fileGone = $derived(gonePaths.length > 0);
+	const outputs = $derived(
+		job && st?.tone === 'ok' ? job.output_paths.filter((p) => !gonePaths.includes(p)) : [],
+	);
+	const output = $derived(outputs[Math.min(outIndex, outputs.length - 1)] ?? null);
+	const allOutputs = $derived(job && st?.tone === 'ok' ? job.output_paths : []);
+	const video = $derived(!!job && !!output && isVideoOutput(job, output));
+	const wfDeleted = $derived(!!job && job.workflow_id == null);
+	const prompt = $derived(job ? promptOf(job, wf) : '');
+	const inputs = $derived(job ? inputsOf(job, wf) : []);
+	const compareSource = $derived(inputs.find((i) => i.kind === 'image')?.path ?? comparePath);
+	const spec = $derived(job ? specOf(job, wf) : []);
+	const endpoint = $derived(
+		((job?.payload?.endpoint as Record<string, unknown> | undefined)?.name as string | undefined) ??
+			'',
+	);
+	const progress = $derived.by(() => {
+		if (!job || job.status !== 'running') return 0;
+		const live = progressFor(job.id);
+		const phase = live?.phase ?? job.phase;
+		if (phase !== 'comfy_running' && phase !== 'saving') return 0;
+		return live?.progress ?? 3;
+	});
+	let dims = $state('');
+	$effect.pre(() => {
+		void output;
+		dims = '';
+	});
+	function noteImg(e: Event) {
+		const img = e.currentTarget as HTMLImageElement;
+		dims = `${img.naturalWidth}×${img.naturalHeight}`;
+	}
+	function noteVideo(e: Event) {
+		const v = e.currentTarget as HTMLVideoElement;
+		dims = `${v.videoWidth}×${v.videoHeight}`;
+	}
+
+	let paused = $state(true);
+	$effect.pre(() => {
+		void output;
+		untrack(() => {
+			videoEl?.pause();
+			paused = true;
+		});
+	});
+	function togglePlayback() {
+		if (!videoEl) return;
+		if (videoEl.paused) videoEl.play().catch(() => {});
+		else videoEl.pause();
+	}
+
+	const mediaKey = $derived(`${job?.id ?? 'none'}:${output ?? st?.tone ?? ''}`);
+
+	let frameBusy = $state(false);
+	async function exportTail() {
+		const src = assetUrl(output);
+		if (!src || frameBusy) return;
+		frameBusy = true;
+		try {
+			await exportLastFrame(src);
+		} finally {
+			frameBusy = false;
+		}
+	}
+</script>
+
+<aside class="inspector" class:main class:open inert={inactive} aria-label={t('desk.inspector')}>
+	<div class="tabs">
+		<div class="a-seg" role="group" aria-label={t('desk.inspector')}>
+			<button type="button" aria-pressed={tab === 'result'} onclick={() => (tab = 'result')}
+				>{t('desk.tabResult')}</button
+			>
+			<button type="button" aria-pressed={tab === 'params'} onclick={() => (tab = 'params')}
+				>{t('desk.tabParams')}</button
+			>
+		</div>
+		<span class="keys"><span class="a-kbd">]</span>{t('desk.keyInspector')}</span>
+		<button
+			type="button"
+			class="a-btn ghost sm close"
+			aria-label={t('desk.closeInspector')}
+			onclick={onClose}
+		>
+			<Icon name="close" size={14} />
+		</button>
+	</div>
+
+	<div class="body">
+		{#if tab === 'params'}
+			{@render params()}
+		{:else if !job || !st}
+			<div class="a-stage stage">
+				<div class="stage-empty">
+					<span class="empty-symbol">✳</span><strong>给想象留一个位置。</strong><span class="sub"
+						>在右侧写下描述，或选择一次已有创作。</span
+					>
+				</div>
+			</div>
+		{:else}
+			<div class="a-stage stage">
+				{#key mediaKey}
+					<div class="stage-media">
+						{#if output && video}
+							<!-- svelte-ignore a11y_media_has_caption -->
+							<div class="print a-photo">
+								{#if st.tone === 'ok' && !fileGone}<span class="a-fix">{t('jobst.done')}</span>{/if}
+								<video
+									bind:this={videoEl}
+									src={assetUrl(output)}
+									controls
+									aria-label="生成的视频，使用播放按钮开始播放"
+									onplay={() => (paused = false)}
+									onpause={() => (paused = true)}
+									onended={() => (paused = true)}
+									playsinline
+									preload="metadata"
+									onloadedmetadata={(e) => {
+										clearOutputMissing(output);
+										noteVideo(e);
+									}}
+									onerror={() => output && markOutputMissing(output)}
+								></video>
+							</div>
+						{:else if output}
+							<div class="print a-photo">
+								{#if st.tone === 'ok' && !fileGone}<span class="a-fix">{t('jobst.done')}</span>{/if}
+								<img
+									src={assetUrl(output)}
+									alt={prompt || t('desk.tabResult')}
+									onload={(e) => {
+										clearOutputMissing(output);
+										noteImg(e);
+									}}
+									onerror={() => output && markOutputMissing(output)}
+								/>
+								{#if main && compare && compareSource}<div
+										class="comparison-layer"
+										style:clip-path={`inset(0 ${100 - compareAt}% 0 0)`}
+									>
+										<img src={assetUrl(compareSource)} alt="对比参考画面" />
+									</div>
+									<div class="comparison-divider" style:left={`${compareAt}%`}></div>{/if}
+							</div>
+						{:else if fileGone}
+							<div class="stage-empty gone">
+								<span>{t('desk.missingTitle')}</span>
+								<span class="sub">{t('desk.missingSub')}</span>
+							</div>
+						{:else}
+							<div class="stage-empty">
+								<span>{st.label}</span>
+								<span class="sub">{st.tone === 'fail' ? t('desk.notGenerated') : st.detail}</span>
+								{#if progress > 0}
+									<div class="a-progress stage-bar" style:--p={progress / 100}>
+										<i></i>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					</div>
+				{/key}
+			</div>
+
+			{#if output && video}<div class="playback-bar">
+					<button
+						class="a-btn primary sm"
+						onclick={togglePlayback}
+						aria-label={paused ? '播放视频' : '暂停视频'}
+						>{paused ? '▶ 播放视频' : 'Ⅱ 暂停视频'}</button
+					>
+					<span>视频默认暂停，由你控制播放。</span>
+					<button
+						class="a-btn secondary sm"
+						onclick={() => videoEl?.requestFullscreen().catch(() => {})}>全屏查看 ⤢</button
+					>
+				</div>{/if}
+			{#if allOutputs.length > 1}
+				<div class="strip" role="group" aria-label={t('desk.outputs')}>
+					{#each allOutputs as p, i (p)}
+						<button
+							type="button"
+							class="strip-item"
+							class:gone={gonePaths.includes(p)}
+							aria-pressed={p === output}
+							aria-label={t('desk.outputN', { n: i + 1 })}
+							onclick={() => (outIndex = i)}
+						>
+							{#if isVideoOutput(job, p)}
+								<Icon name="film" size={14} />
+							{:else}
+								<img src={assetUrl(p)} alt="" loading="lazy" />
+							{/if}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			<div class="meta">
+				{#if dims}<span class="mono"><b>{dims}</b></span>{/if}
+				{#each spec as s (s.label)}
+					{#if !(dims && s.label === t('desk.specSize'))}
+						<span>{s.label} <b class="mono">{s.value}</b></span>
+					{/if}
+				{/each}
+				<span
+					>{t('desk.elapsed')}
+					<b class="mono">{fmtDur(elapsedSec(job, nowMs))}</b></span
+				>
+				{#if endpoint}<span>{endpoint}</span>{/if}
+			</div>
+
+			{#if main && compare && output && !video}<div class="compare-controls">
+					<span>{inputs.some((i) => i.kind === 'image') ? '参考图片' : '上一版'}</span><input
+						type="range"
+						min="0"
+						max="100"
+						bind:value={compareAt}
+						aria-label="拖动对比画面"
+					/><span>当前结果</span>
+				</div>{/if}
+			<div class="actions">
+				{#if main && output && !video}<button
+						class="a-btn secondary sm"
+						onclick={() => (lightbox = true)}>放大查看 ⤢</button
+					>{#if compareSource && compareSource !== output}<button
+							class="a-btn secondary sm"
+							aria-pressed={compare}
+							onclick={() => (compare = !compare)}>{compare ? '结束对比' : '对比画面'} ◫</button
+						>{/if}{/if}
+				{#if fileGone && !outputs.length}
+					<button type="button" class="a-btn secondary sm" onclick={() => onRetry(job)}
+						>{t('desk.redo')}</button
+					>
+					<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}
+						>{t('desk.removeRecord')}</button
+					>
+				{:else}
+					<button type="button" class="a-btn secondary sm" onclick={() => onReuse(job)}
+						>{t('desk.reuseToComposer')}</button
+					>
+					{#if output && !video && canSendToSlot}
+						<button type="button" class="a-btn secondary sm" onclick={() => onSendToSlot(output)}>
+							{t('desk.sendToSlot')}
+						</button>
+					{/if}
+					{#if output}
+						<a class="a-btn secondary sm" href={assetUrl(output)} download rel="external">{t('desk.download')}</a>
+					{/if}
+					{#if output && video}
+						<button
+							type="button"
+							class="a-btn secondary sm"
+							title={t('lastFrame.hint')}
+							disabled={frameBusy}
+							aria-busy={frameBusy}
+							onclick={exportTail}
+						>
+							{frameBusy ? t('lastFrame.exporting') : t('lastFrame.export')}
+						</button>
+					{/if}
+					{#if st.tone === 'fail'}
+						<button type="button" class="a-btn secondary sm" onclick={() => onRetry(job)}
+							>{t('common.retry')}</button
+						>
+					{/if}
+					{#if job.status === 'pending' || job.status === 'running'}<button
+							class="a-btn secondary sm"
+							onclick={() => onCancel(job)}>取消这次生成</button
+						>{/if}
+					{#if job.status !== 'pending' && job.status !== 'running'}
+						<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}
+							>{t('studio.deleteBtn')}</button
+						>
+					{/if}
+				{/if}
+			</div>
+
+			{#if st.tone === 'fail'}
+				<div class="note err" role="alert">{st.detail}</div>
+			{:else if fileGone}
+				<div class="note warn" role="alert">{t('jobst.missingDetail')}</div>
+			{/if}
+
+			<details class="result-details">
+				<summary>创作详情与参数</summary>
+				{#if inputs.length || prompt}
+					<div class="section-title">{t('desk.inputs')}</div>
+					{#if inputs.length}
+						<div class="inputs">
+							{#each inputs as inp (inp.label + inp.path)}
+								{#if inp.kind === 'image'}
+									<img
+										class="mini"
+										src={assetUrl(inp.path)}
+										alt={inp.label}
+										title={inp.label}
+										loading="lazy"
+									/>
+								{:else}
+									<span class="mini glyph" title={inp.label}
+										><Icon name={inp.kind === 'video' ? 'film' : 'music'} size={14} /></span
+									>
+								{/if}
+							{/each}
+						</div>
+					{/if}
+					{#if prompt}<p class="prompt">{prompt}</p>{/if}
+				{/if}
+
+				<div class="section-title">{t('desk.workflow')}</div>
+				<dl class="kv">
+					<dt>{t('desk.kvName')}</dt>
+					<dd>
+						{wf?.name ?? t('studio.jobName', { id: job.id })}
+						{#if wfDeleted}<span class="a-tag wf-gone">{t('studio.wfDeletedTag')}</span>{/if}
+					</dd>
+					{#if wf?.usage}
+						<dt>{t('desk.kvUsage')}</dt>
+						<dd>{usageLabel(wf.usage)}</dd>
+					{/if}
+					<dt>{t('desk.kvCreated')}</dt>
+					<dd class="mono">{fmtClock(parseDbTs(job.created_at))}</dd>
+					{#if job.comfy_prompt_id}
+						<dt>{t('desk.kvPromptId')}</dt>
+						<dd class="mono">{job.comfy_prompt_id}</dd>
+					{/if}
+				</dl>
+			</details>
+		{/if}
+	</div>
+</aside>
+
+{#if lightbox && output && !video}<ImageLightbox
+		src={assetUrl(output) ?? ''}
+		alt={prompt || '创作结果'}
+		onClose={() => (lightbox = false)}
+	/>{/if}
+
+<style>
+	.inspector {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+		border-left: 1px solid var(--line);
+		background: var(--bg);
+	}
+	.tabs {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-4) var(--sp-5);
+		border-bottom: 1px solid var(--line);
+	}
+	.keys {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		margin-left: auto;
+		font-size: var(--fs-mini);
+		color: var(--text-3);
+	}
+	.close {
+		padding: 0 var(--sp-3);
+	}
+	.body {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		padding: var(--sp-6);
+	}
+	.stage {
+		aspect-ratio: 16 / 10;
+		display: grid;
+		place-items: center;
+	}
+	.stage-media {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		padding: var(--sp-5);
+		box-sizing: border-box;
+	}
+	/* 相纸白边 (HEL-680)：检视舞台上的结果按相纸呈现，媒体自适应内含 */
+	.print {
+		position: relative;
+		display: grid;
+		max-width: 100%;
+		max-height: 100%;
+		--paper-w: 5px;
+	}
+	.print > img,
+	.print > video {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+		width: auto;
+		height: auto;
+	}
+	.stage-empty {
+		display: grid;
+		place-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-6);
+		text-align: center;
+		color: var(--text-3);
+		font-size: var(--fs-aux);
+	}
+	.stage-empty.gone {
+		color: var(--warn);
+	}
+	.stage-empty .sub {
+		color: var(--text-3);
+		font-size: var(--fs-mini);
+	}
+	.stage-bar {
+		width: 160px;
+	}
+	.strip {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+		margin-top: var(--sp-4);
+	}
+	.strip-item {
+		display: grid;
+		place-items: center;
+		width: 44px;
+		height: 44px;
+		padding: 0;
+		overflow: hidden;
+		border: 1px solid var(--line-2);
+		border-radius: var(--r-sm);
+		background: var(--bg-3);
+		color: var(--text-3);
+		cursor: pointer;
+	}
+	.strip-item[aria-pressed='true'] {
+		border-color: var(--accent);
+	}
+	.strip-item.gone {
+		border-style: dashed;
+		border-color: var(--warn);
+		color: var(--warn);
+	}
+	.strip-item img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-2) var(--sp-5);
+		margin: var(--sp-5) 0;
+		font-size: var(--fs-aux);
+		color: var(--text-3);
+	}
+	.meta b {
+		color: var(--text-2);
+		font-weight: 500;
+	}
+	.actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+	}
+	.note {
+		margin-top: var(--sp-5);
+		padding: var(--sp-3) var(--sp-4);
+		border-radius: var(--r-md);
+		font-size: var(--fs-aux);
+		word-break: break-word;
+	}
+	.note.err {
+		background: var(--err-soft);
+		color: var(--err);
+	}
+	.note.warn {
+		background: var(--warn-soft);
+		color: var(--warn);
+	}
+	.section-title {
+		margin: var(--sp-7) 0 var(--sp-3);
+		font-size: var(--fs-aux);
+		color: var(--text-3);
+	}
+	.inputs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+		margin-bottom: var(--sp-3);
+	}
+	.mini {
+		width: 40px;
+		height: 40px;
+		border-radius: var(--r-sm);
+		border: 1px solid var(--line-2);
+		object-fit: cover;
+	}
+	.mini.glyph {
+		display: grid;
+		place-items: center;
+		background: var(--bg-3);
+		color: var(--text-3);
+		box-sizing: border-box;
+	}
+	.prompt {
+		margin: 0;
+		padding: var(--sp-4) var(--sp-5);
+		border-radius: var(--r-md);
+		background: var(--bg-3);
+		color: var(--text-2);
+		font-size: var(--fs-aux);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+	.kv {
+		display: grid;
+		grid-template-columns: 92px 1fr;
+		gap: var(--sp-2) var(--sp-4);
+		margin: 0;
+		font-size: var(--fs-aux);
+	}
+	.kv dt {
+		color: var(--text-3);
+	}
+	.kv dd {
+		margin: 0;
+		color: var(--text-2);
+		word-break: break-all;
+	}
+	.kv .wf-gone {
+		margin-left: var(--sp-2);
+	}
+
+	/* ≥1180: a column of the desk grid; the close button hides it (]) */
+	@media (max-width: 1179px) {
+		.inspector {
+			position: fixed;
+			top: var(--topbar-h);
+			right: 0;
+			bottom: 0;
+			z-index: 40;
+			width: min(420px, 100vw);
+			box-shadow: var(--shadow-float);
+			transform: translateX(100%);
+			visibility: hidden;
+			transition:
+				transform var(--d-drawer) var(--ease-drawer),
+				visibility 0s linear var(--d-drawer);
+		}
+		.inspector.open {
+			transform: none;
+			visibility: visible;
+			transition:
+				transform var(--d-drawer) var(--ease-drawer),
+				visibility 0s;
+		}
+		:global(:root[data-reduce='1']) .inspector {
+			transform: none;
+			opacity: 0;
+			transition:
+				opacity var(--d-drawer) ease,
+				visibility 0s linear var(--d-drawer);
+		}
+		:global(:root[data-reduce='1']) .inspector.open {
+			opacity: 1;
+			transition:
+				opacity var(--d-drawer) ease,
+				visibility 0s;
+		}
+		.keys {
+			display: none;
+		}
+		.close {
+			margin-left: auto;
+		}
+	}
+	@media (max-width: 760px) {
+		.inspector {
+			top: 0;
+			z-index: 70;
+			width: 100vw;
+			border-left: 0;
+		}
+		.body {
+			padding: var(--sp-5);
+		}
+	}
+
+	.inspector.main {
+		position: static;
+		inset: auto;
+		transform: none;
+		opacity: 1;
+		pointer-events: auto;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		max-width: none;
+		border: 0;
+		background: transparent;
+		overflow: hidden;
+		box-shadow: none;
+		display: flex;
+		flex-direction: column;
+	}
+	.main .tabs {
+		display: none;
+	}
+	.main .body {
+		padding: 0;
+		overflow: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		flex: 1;
+		min-height: 0;
+	}
+	.main .stage {
+		aspect-ratio: auto;
+		width: 100%;
+		min-height: 110px;
+		flex: 1;
+		height: auto;
+		max-height: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--line);
+		border-radius: 10px;
+		overflow: hidden;
+		background: #eae9e3;
+	}
+	.main .stage-media {
+		position: relative;
+		inset: auto;
+		padding: 0;
+		height: 100%;
+		width: 100%;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.main .print {
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		max-height: 100%;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		background: none;
+		display: grid;
+		grid-template-rows: minmax(0, 1fr);
+		grid-template-columns: minmax(0, 1fr);
+	}
+	.main .print img,
+	.main .print video {
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+		height: 100%;
+		max-height: 100%;
+		object-fit: contain;
+		border-radius: 0;
+	}
+	.main .meta,
+	.main .actions,
+	.main .playback-bar,
+	.main .strip,
+	.main .note,
+	.main .result-details {
+		flex-shrink: 0;
+		margin: 0;
+	}
+	.main .meta {
+		font-size: 10px;
+		gap: 8px;
+		line-height: 1.5;
+		max-height: 30px;
+		overflow: auto;
+	}
+	.main .actions {
+		gap: 6px;
+		flex-wrap: wrap;
+	}
+	.main .result-details {
+		font-size: 11px;
+		max-height: 160px;
+		overflow: auto;
+	}
+	.playback-bar {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 4px 0;
+	}
+	.playback-bar span {
+		flex: 1;
+		font-size: 11px;
+		color: var(--text-3);
+	}
+	@media (max-height: 650px) {
+		.playback-bar span {
+			display: none;
+		}
+		.main .meta {
+			max-height: 16px;
+		}
+		.main .actions :global(.a-btn) {
+			font-size: 11px;
+			padding: 4px 8px;
+		}
+	}
+	.main .a-fix {
+		display: none;
+	}
+	.main .stage-empty {
+		display: flex;
+		gap: 10px;
+		flex-direction: column;
+		align-items: center;
+		color: var(--text-3);
+		font-size: 12px;
+	}
+	.empty-symbol {
+		color: var(--accent);
+		font-size: 55px;
+		font-weight: 300;
+		line-height: 1.4;
+	}
+	.stage-empty strong {
+		font-size: 16px;
+		font-weight: 500;
+		color: var(--text);
+	}
+	.main .meta {
+		font-size: 9px;
+		gap: 12px;
+		margin-top: 10px;
+	}
+	.main .actions {
+		margin-top: 12px;
+	}
+	.result-details {
+		font-size: 11px;
+		color: var(--text-3);
+		margin-top: 12px;
+	}
+	.result-details summary {
+		cursor: pointer;
+	}
+	.result-details .prompt {
+		margin-top: 12px;
+	}
+
+	.comparison-layer {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+	.comparison-layer img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		background: #eae9e3;
+	}
+	.comparison-divider {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background: var(--surface);
+		box-shadow: 0 0 8px #292a2d40;
+		pointer-events: none;
+	}
+	.compare-controls {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+		margin-top: 10px;
+		font-size: 10px;
+		color: var(--text-3);
+	}
+	.compare-controls input {
+		flex: 1;
+		accent-color: var(--accent);
+	}
+</style>

calliope-web/src/lib/components/generate/ParamChip.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import ShellPop from '$lib/components/shell/ShellPop.svelte';
+	import type { ComfyDynamicInput } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import { inputRole, isChanged, type FormValue, type FormValues } from './schema';
+
+	/**
+	 * One common parameter as a composer chip (spec-v2 §3.3 参数芯片): the
+	 * pop edits it in place — options list for selects, a number field for
+	 * the rest (seed adds 随机) — and 恢复原值 returns to the workflow value.
+	 * `inputs` holds two entries for the width × height pair.
+	 */
+	interface Props {
+		inputs: ComfyDynamicInput[];
+		values: FormValues;
+		text: string;
+		title?: string;
+		invalid?: boolean;
+		onSet: (nodeId: string, value: FormValue) => void;
+	}
+
+	let { inputs, values, text, title, invalid = false, onSet }: Props = $props();
+
+	let open = $state(false);
+	const changed = $derived(inputs.some((i) => isChanged(i, values)));
+	const single = $derived(inputs.length === 1 ? inputs[0] : null);
+	const uid = Math.random().toString(36).slice(2, 8);
+
+	function current(inp: ComfyDynamicInput): string {
+		const v = values[inp.nodeId] ?? inp.defaultValue ?? '';
+		return Array.isArray(v) ? v.join(',') : String(v);
+	}
+
+	function setNumber(inp: ComfyDynamicInput, raw: string) {
+		if (raw === '') return onSet(inp.nodeId, '');
+		const n = Number(raw);
+		onSet(inp.nodeId, Number.isNaN(n) ? raw : n);
+	}
+
+	function restore() {
+		for (const inp of inputs) onSet(inp.nodeId, inp.defaultValue ?? '');
+	}
+
+	function randomSeed(inp: ComfyDynamicInput) {
+		const max = Math.min(inp.max ?? 2 ** 32 - 1, Number.MAX_SAFE_INTEGER);
+		const min = Math.max(inp.min ?? 0, 0);
+		onSet(inp.nodeId, min + Math.floor(Math.random() * (max - min + 1)));
+	}
+
+	function pickOption(inp: ComfyDynamicInput, opt: string) {
+		onSet(inp.nodeId, opt);
+		open = false;
+	}
+</script>
+
+<div class="param-chip">
+	<button
+		type="button"
+		class="a-chip"
+		class:changed={changed && !invalid}
+		class:err={invalid}
+		aria-haspopup="dialog"
+		aria-expanded={open}
+		title={title ?? inputs.map((i) => i.label).join(' × ')}
+		onclick={() => (open = !open)}
+	>
+		<span class="lbl">{text}</span>
+	</button>
+	<ShellPop bind:open label={inputs.map((i) => i.label).join(' × ')} placement="top" width="260px">
+		{#if single?.kind === 'select' && single.options?.length}
+			<div class="a-menu-group">{single.label}</div>
+			{#each single.options as opt (opt)}
+				<button
+					type="button"
+					class="a-menu-item"
+					aria-current={current(single) === opt ? 'true' : undefined}
+					onclick={() => pickOption(single, opt)}
+				>
+					<span class="a-menu-label">{opt}</span>
+					{#if String(single.defaultValue ?? '') === opt}
+						<span class="a-menu-meta">{t('desk.origValue')}</span>
+					{/if}
+				</button>
+			{/each}
+		{:else}
+			<div class="fields">
+				{#each inputs as inp (inp.nodeId)}
+					{@const id = `pc-${uid}-${inp.nodeId.replace(/[^a-zA-Z0-9_-]/g, '')}`}
+					<div class="field-row">
+						<label class="field-label" for={id}>
+							{inp.label}
+							{#if inp.defaultValue !== undefined && inp.defaultValue !== ''}
+								<span class="orig mono">{t('cdf.orig', { v: String(inp.defaultValue) })}</span>
+							{/if}
+						</label>
+						<div class="inline">
+							{#if inp.kind === 'number'}
+								<input
+									{id}
+									class="a-input mono"
+									class:invalid
+									type="number"
+									inputmode="numeric"
+									value={current(inp)}
+									oninput={(e) => setNumber(inp, e.currentTarget.value)}
+									onkeydown={(e) => e.key === 'Enter' && (open = false)}
+								/>
+							{:else}
+								<input
+									{id}
+									class="a-input"
+									class:invalid
+									type="text"
+									value={current(inp)}
+									oninput={(e) => onSet(inp.nodeId, e.currentTarget.value)}
+									onkeydown={(e) => e.key === 'Enter' && (open = false)}
+								/>
+							{/if}
+							{#if inputRole(inp) === 'seed'}
+								<button type="button" class="a-btn secondary sm" onclick={() => randomSeed(inp)}>
+									{t('desk.seedRandom')}
+								</button>
+							{/if}
+						</div>
+						{#if inp.min != null || inp.max != null}
+							<span class="field-hint mono">{inp.min ?? '−∞'} – {inp.max ?? '∞'}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		{#if changed}
+			<div class="foot">
+				<button type="button" class="a-btn ghost sm" onclick={restore}>{t('desk.restoreOrig')}</button>
+			</div>
+		{/if}
+	</ShellPop>
+</div>
+
+<style>
+	.param-chip {
+		position: relative;
+		min-width: 0;
+	}
+	.fields {
+		display: grid;
+		gap: var(--sp-5);
+		padding: var(--sp-3);
+	}
+	.field-row {
+		display: grid;
+		gap: var(--sp-2);
+	}
+	.field-row .field-label {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--sp-3);
+		margin: 0;
+	}
+	.orig {
+		font-size: var(--fs-mini);
+		color: var(--text-3);
+		font-weight: 400;
+	}
+	.inline {
+		display: flex;
+		gap: var(--sp-2);
+	}
+	.field-row .field-hint {
+		margin: 0;
+	}
+	.foot {
+		display: flex;
+		justify-content: flex-end;
+		padding: var(--sp-2) var(--sp-1) 0;
+		border-top: 1px solid var(--line);
+		margin-top: var(--sp-2);
+	}
+</style>

calliope-web/src/lib/components/generate/ParameterPopover.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import ComfyDynamicForm from '$lib/components/ComfyDynamicForm.svelte';
+	import type { ComfyDynamicInput } from '$lib/comfy/types';
+	import { validateForm, classifySchema, type FormValues } from './schema';
+	let {
+		inputs,
+		values,
+		anchor,
+		onClose,
+		onApply,
+	}: {
+		inputs: ComfyDynamicInput[];
+		values: FormValues;
+		anchor: HTMLElement | null;
+		onClose: () => void;
+		onApply: (values: FormValues) => void;
+	} = $props();
+	let draft = $state<FormValues>({});
+	let showErrors = $state(false);
+	let panel = $state<HTMLDivElement | null>(null);
+	let x = $state(0),
+		y = $state(0);
+	const errors = $derived(
+		validateForm(inputs, classifySchema(inputs, 'image'), draft),
+	);
+	$effect(() => {
+		if (!anchor || !inputs.length) return;
+		const source = anchor;
+		draft = Object.fromEntries(
+			inputs.map((i) => [i.nodeId, values[i.nodeId] ?? i.defaultValue ?? '']),
+		);
+		showErrors = false;
+		const rect = source.getBoundingClientRect();
+		x = Math.max(12, Math.min(rect.left, innerWidth - 312));
+		y = Math.max(12, innerHeight - rect.top + 8);
+		void tick().then(() =>
+			panel
+				?.querySelector<HTMLElement>('input,select,textarea,button')
+				?.focus(),
+		);
+		const closeOutside = (e: PointerEvent) => {
+			if (
+				!panel?.contains(e.target as Node) &&
+				!source.contains(e.target as Node)
+			)
+				onClose();
+		};
+		const keys = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				onClose();
+			}
+			if (e.key === 'Tab' && panel) {
+				const all = [
+					...panel.querySelectorAll<HTMLElement>(
+						'input,select,textarea,button',
+					),
+				].filter(
+					(e) => !e.hasAttribute('disabled') && e.getClientRects().length,
+				);
+				if (e.shiftKey && document.activeElement === all[0]) {
+					e.preventDefault();
+					all.at(-1)?.focus();
+				} else if (!e.shiftKey && document.activeElement === all.at(-1)) {
+					e.preventDefault();
+					all[0]?.focus();
+				}
+			}
+		};
+		document.addEventListener('pointerdown', closeOutside);
+		document.addEventListener('keydown', keys, true);
+		window.addEventListener('resize', onClose);
+		return () => {
+			document.removeEventListener('pointerdown', closeOutside);
+			document.removeEventListener('keydown', keys, true);
+			window.removeEventListener('resize', onClose);
+			if (source.isConnected) source.focus();
+		};
+	});
+	function save() {
+		if (Object.keys(errors).length) {
+			showErrors = true;
+			return;
+		}
+		onApply(draft);
+		onClose();
+	}
+</script>
+
+{#if inputs.length && anchor}
+	<div
+		bind:this={panel}
+		class="parameter-popover"
+		role="dialog"
+		aria-label={inputs.map((i) => i.label).join(' / ')}
+		style:left={`${x}px`}
+		style:bottom={`${y}px`}
+	>
+		<header>{inputs.map((i) => i.label).join(' / ')}</header>
+		<ComfyDynamicForm
+			{inputs}
+			values={draft as Record<string, string | number>}
+			quiet
+			{errors}
+			{showErrors}
+			onChange={(v) => (draft = { ...draft, ...v })}
+		/>
+		<footer>
+			<button class="a-btn ghost sm" onclick={onClose}>取消</button><button
+				class="a-btn secondary sm"
+				onclick={save}>应用参数</button
+			>
+		</footer>
+	</div>
+{/if}
+
+<style>
+	.parameter-popover {
+		position: fixed;
+		z-index: 800;
+		width: 300px;
+		box-sizing: border-box;
+		max-height: calc(100dvh - 36px);
+		overflow: auto;
+		padding: 16px;
+		background: var(--float-bg);
+		border: 1px solid var(--line-2);
+		border-radius: 12px;
+		box-shadow: var(--shadow-float);
+		transform-origin: bottom left;
+		animation: appear var(--d-pop) var(--ease-out);
+	}
+	header {
+		font-size: 12px;
+		color: var(--text-2);
+		margin-bottom: 14px;
+	}
+	footer {
+		display: flex;
+		gap: 8px;
+		justify-content: flex-end;
+		margin-top: 12px;
+	}
+	@keyframes appear {
+		from {
+			opacity: 0;
+			transform: translateY(4px) scale(0.98);
+		}
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+</style>

calliope-web/src/lib/components/generate/ParamsPanel.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	import ComfyDynamicForm from '$lib/components/ComfyDynamicForm.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import type { ComfyDynamicInput, Workflow } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import type { DeskSchema, FormValue, FormValues } from './schema';
+
+	/**
+	 * 参数 (spec-v2 §3.3 检视区 · 参数): every non-media input the workflow
+	 * declares, each with its 原值 and a gold edge once changed. Common ones
+	 * first; the rest fold under 高级参数 — untouched, they keep the
+	 * workflow's own values.
+	 */
+	interface Props {
+		workflow: Workflow | null;
+		ds: DeskSchema;
+		values: FormValues;
+		errors: Record<string, string>;
+		showErrors: boolean;
+		changedCount: number;
+		onSet: (nodeId: string, value: FormValue) => void;
+		onRestoreAll: () => void;
+	}
+
+	let { workflow, ds, values, errors, showErrors, changedCount, onSet, onRestoreAll }: Props = $props();
+
+	let advancedOpen = $state(false);
+	const brokenReasons = $derived(
+		(workflow?.warnings ?? []).filter((w) => w.level === 'error').map((w) => w.message),
+	);
+	const advancedErr = $derived(showErrors && ds.advanced.some((i) => !!errors[i.nodeId]?.trim()));
+
+	$effect(() => {
+		if (advancedErr) advancedOpen = true;
+	});
+
+	function patch(inputs: ComfyDynamicInput[], next: Record<string, string | number>) {
+		for (const inp of inputs) {
+			const v = next[inp.nodeId];
+			if (v !== undefined && v !== values[inp.nodeId]) onSet(inp.nodeId, v);
+		}
+	}
+</script>
+
+<div class="params">
+	{#if !workflow}
+		<p class="note">{t('desk.pickWorkflow')}</p>
+	{:else}
+		{#if brokenReasons.length}
+			<div class="note err" role="alert">
+				<strong>{t('studio.wfBrokenTitle')}</strong>
+				<ul>
+					{#each brokenReasons as r (r)}<li>{r}</li>{/each}
+				</ul>
+				<span>{t('studio.wfBrokenHint')}</span>
+			</div>
+		{/if}
+		{#if !(workflow.input_schema ?? []).length}
+			<p class="note">{t('studio.wfNoParamsNote')}</p>
+		{:else if (workflow.input_schema ?? []).some((i) => i.auto)}
+			<p class="note">{t('studio.wfAutoParamsNote', { n: workflow.input_schema.length })}</p>
+		{/if}
+
+		{#if ds.common.length}
+			<div class="section-title">{t('desk.paramsCommon')}</div>
+			<ComfyDynamicForm
+				inputs={ds.common}
+				values={values as Record<string, string | number>}
+				quiet
+				showOrig
+				{errors}
+				{showErrors}
+				onChange={(v) => patch(ds.common, v)}
+			/>
+		{/if}
+
+		{#if ds.advanced.length}
+			<div class="fold">
+				<button
+					type="button"
+					class="fold-head"
+					class:err={advancedErr}
+					aria-expanded={advancedOpen}
+					aria-controls="desk-advanced"
+					onclick={() => (advancedOpen = !advancedOpen)}
+				>
+					<span class="chev" aria-hidden="true"><Icon name="play" size={10} /></span>
+					{t('desk.advanced', { n: ds.advanced.length })}
+				</button>
+				<div id="desk-advanced" class="collapse" class:open={advancedOpen} inert={!advancedOpen}>
+					<div class="collapse-in">
+						<ComfyDynamicForm
+							inputs={ds.advanced}
+							values={values as Record<string, string | number>}
+							quiet
+							showOrig
+							{errors}
+							{showErrors}
+							onChange={(v) => patch(ds.advanced, v)}
+						/>
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		{#if changedCount > 0}
+			<div class="restore">
+				<button type="button" class="a-btn ghost sm" onclick={onRestoreAll}>
+					<Icon name="retry" size={13} />
+					{t('desk.restoreAll')}
+				</button>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.params {
+		display: grid;
+		gap: var(--sp-4);
+	}
+	.note {
+		margin: 0;
+		padding: var(--sp-3) var(--sp-4);
+		border-radius: var(--r-md);
+		background: var(--bg-3);
+		color: var(--text-3);
+		font-size: var(--fs-aux);
+	}
+	.note.err {
+		background: var(--err-soft);
+		color: var(--err);
+	}
+	.note ul {
+		margin: var(--sp-2) 0;
+		padding-left: 18px;
+	}
+	.section-title {
+		font-size: var(--fs-aux);
+		color: var(--text-3);
+	}
+	.fold {
+		border-top: 1px solid var(--line);
+	}
+	.fold-head {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+		padding: var(--sp-4) 0;
+		border: 0;
+		background: none;
+		color: var(--text-2);
+		font: inherit;
+		font-size: var(--fs-aux);
+		text-align: left;
+		cursor: pointer;
+		transition: color var(--d-state) ease;
+	}
+	.fold-head.err {
+		color: var(--err);
+	}
+	.chev {
+		display: inline-grid;
+		transition: transform var(--d-pop) var(--ease-out);
+	}
+	.fold-head[aria-expanded='true'] .chev {
+		transform: rotate(90deg);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.fold-head:hover {
+			color: var(--text);
+		}
+	}
+	.collapse {
+		display: grid;
+		grid-template-rows: 0fr;
+		opacity: 0;
+		transition:
+			grid-template-rows var(--d-enter) var(--ease-out),
+			opacity var(--d-state) ease;
+	}
+	.collapse.open {
+		grid-template-rows: 1fr;
+		opacity: 1;
+	}
+	.collapse-in {
+		min-height: 0;
+		overflow: hidden;
+	}
+	.collapse.open .collapse-in {
+		padding-bottom: var(--sp-2);
+	}
+	.restore {
+		display: flex;
+		justify-content: flex-end;
+	}
+</style>