HEL-688: deploy S4 workflow import wizard & meta admin (feat/hel-682-workflow-import-admin @ 1c00587)

- WorkflowBatchImportWizard：目录扫描/多文件 → dry-run 逐文件报告 → 确认导入；
  warn 可补用途、需确认与 fail 项不导入不标可运行、重复导入全量 conflict 跳过
- WorkflowLibrary：view=meta 轻量列表（搜索/分类/模型/媒介/收藏/最近/启停/
  去重/批量标注），完整 JSON 仅操作时按需加载；试运行复用 WorkflowTestDialog；
  保留用途确认、输出指定、单文件导入等既有能力
- api/types：listMeta、convert、importBatch、importScanDry/Commit、touch、
  dedupe 客户端与 WorkflowMeta/转换报告类型；update 支持 favorite/tags/
  category/model_family
- i18n 130 键 ×7 语言；changelog

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

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/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
@@ -410,6 +411,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 +506,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")

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/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_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_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_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/package.json

@@ -7,7 +7,7 @@
 		"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",
+		"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 ."
 	},

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/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}`, {

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

@@ -175,6 +175,120 @@ export interface Workflow {
 	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;

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

@@ -15,8 +15,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="/" title={t('shell.brand')}>
+			{t('shell.brand')}
 		</a>
 		{#if crumb}
 			<span class="crumb">{crumb}</span>
@@ -28,7 +28,7 @@ interface Props {
 		{/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 === 'projects'} href="/">{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>
@@ -69,18 +69,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 +118,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

@@ -136,9 +136,9 @@
 
 	const projectList = $derived(($projectsQuery.data ?? []) as Project[]);
 
-	// Stage-URL contract: images land on Assets, clips on Video.
+	// Five-stage workbench URL contract: images land on 素材资产, clips on 镜头脚本.
 	const stageLink = $derived(
-		attached ? `/project/${attached.projectId}?stage=${isVideo ? 'video' : 'assets'}` : '',
+		attached ? `/workbench/${attached.projectId}?stage=${isVideo ? 'shot' : 'assets'}` : '',
 	);
 </script>
 
@@ -267,13 +267,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 +282,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 +293,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 +322,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 +339,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/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} />
@@ -90,6 +103,26 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					<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}

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/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/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/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')}
@@ -57,7 +62,8 @@
 		position: fixed;
 		right: 24px;
 		bottom: 24px;
-		z-index: 1000;
+		/* 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/AgentChat.svelte

@@ -357,16 +357,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 +388,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 +430,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 +443,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 +451,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 +487,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 +527,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 +544,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 +605,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 +618,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

@@ -711,12 +711,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,12 +724,12 @@ 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;
 	}

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

@@ -77,7 +77,7 @@
 	}
 	.head:hover {
 		color: var(--text-primary);
-		background: rgba(255, 255, 255, 0.03);
+		background: var(--bg-3);
 	}
 	.name {
 		flex: 1;

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

@@ -135,9 +135,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,22 +1,23 @@
 /**
  * Agent identity palette: a stable display name + accent color 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 colors answer "who is speaking" only (avatar / name / bubble
+ * tint) — they never express task status (spec v2 §3.6). The curated set
+ * reuses the spec §3.6 avatar five-color family plus one neutral slate, so
+ * no tailwind rainbow hues leak into the fusion palette; the default
+ * main-loop agent is neutral `--text-2` slate.
  */
 
 export const DEFAULT_AGENT_NAME = 'Calliope';
 
 // Fixed identity map (keyed by the raw agent_name the backend emits).
 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
+	planner: { label: 'Planner', color: '#5b8def' }, // avatar-2 blue
+	'story-agent': { label: 'Story Agent', color: '#3fb97f' }, // avatar-3 green
+	'script-agent': { label: 'Script Agent', color: '#e8a33d' }, // avatar-1 amber
+	'assets-agent': { label: 'Assets Agent', color: '#b98be0' }, // avatar-4 violet
+	'video-agent': { label: 'Video Agent', color: '#d98e6a' }, // avatar-5 clay
+	'research-agent': { label: 'Research Agent', color: '#8fa3c8' }, // neutral slate
 	// 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' },
@@ -26,19 +27,9 @@ const IDENTITIES: Record<string, { label: string; color: string }> = {
 	镜头脚本: { label: '镜头脚本', color: '#d98e6a' },
 };
 
-// Fallback palette for unknown names (stable hash → deterministic color).
-const FALLBACK_COLORS = [
-	'#22d3ee',
-	'#22c55e',
-	'#f59e0b',
-	'#ec4899',
-	'#fb923c',
-	'#a78bfa',
-	'#38bdf8',
-	'#4ade80',
-	'#f472b6',
-	'#facc15',
-];
+// Fallback palette for unknown names (stable hash → deterministic color),
+// narrowed to the avatar identity family + neutral slate (spec v2 §十.4).
+const FALLBACK_COLORS = ['#5b8def', '#3fb97f', '#e8a33d', '#b98be0', '#d98e6a', '#8fa3c8'];
 
 function hashString(s: string): number {
 	let h = 0;
@@ -48,8 +39,8 @@ function hashString(s: string): number {
 	return h;
 }
 
-/** The default "Calliope" accent (matches --accent). */
-export const DEFAULT_AGENT_COLOR = '#8b5cf6';
+/** Neutral slate (--text-2) — the default agent borrows no signal color. */
+export const DEFAULT_AGENT_COLOR = '#aab2c5';
 
 export function agentDisplayName(name: string | null | undefined): string {
 	const key = (name || '').trim().toLowerCase();

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

@@ -6,7 +6,9 @@
 	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';
 
@@ -15,6 +17,10 @@
 	 * 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 即时无动画), a finished/just-picked video auto-plays muted,
+	 * failed takes get 重试, and a done take whose files no longer load
+	 * shows the amber 文件缺失 state with 用相同参数重做 / 移除记录.
 	 */
 	interface Props {
 		tab: 'result' | 'params';
@@ -26,9 +32,16 @@
 		inactive: boolean;
 		/** Current workflow can take an image output (送入当前图片槽). */
 		canSendToSlot: boolean;
+		/** Animate this result change (pointer pick) — 150ms cross-fade. */
+		crossfade: boolean;
+		/** Bump to auto-play the stage video (pointer pick / completion). */
+		playSignal: number;
+		/** The stage <video> element, for the desk's space-bar toggle. */
+		videoEl?: HTMLVideoElement | null;
 		params: Snippet;
 		onClose: () => void;
 		onReuse: (job: Job) => void;
+		onRetry: (job: Job) => void;
 		onSendToSlot: (path: string) => void;
 		onDelete: (job: Job) => void;
 	}
@@ -41,9 +54,13 @@
 		open,
 		inactive,
 		canSendToSlot,
+		crossfade,
+		playSignal,
+		videoEl = $bindable(null),
 		params,
 		onClose,
 		onReuse,
+		onRetry,
 		onSendToSlot,
 		onDelete,
 	}: Props = $props();
@@ -55,9 +72,15 @@
 	});
 
 	const st = $derived(job ? jobStatusInfo(job) : null);
-	const outputs = $derived(job && st?.tone === 'ok' ? job.output_paths : []);
+	// §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 spec = $derived(job ? specOf(job, wf) : []);
@@ -84,6 +107,41 @@
 		const v = e.currentTarget as HTMLVideoElement;
 		dims = `${v.videoWidth}×${v.videoHeight}`;
 	}
+
+	// 完成或点选后自动播放（静音）；键盘切换不触发。
+	$effect(() => {
+		void playSignal;
+		if (inactive || tab !== 'result' || !videoEl) return;
+		videoEl.muted = true;
+		videoEl.play().catch(() => {});
+	});
+
+	function reduced(): boolean {
+		return (
+			document.documentElement.dataset.reduce === '1' ||
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		);
+	}
+
+	/** 150ms 交叉淡变 on pointer picks; keyboard switches stay instant. */
+	function xfade(_node: Element) {
+		const ms = crossfade ? (reduced() ? 120 : 150) : 0;
+		return { duration: ms, css: (t: number) => `opacity: ${t}` };
+	}
+
+	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:open inert={inactive} aria-label={t('desk.inspector')}>
@@ -105,31 +163,64 @@
 			<div class="a-stage stage"><div class="stage-empty">{t('desk.pickTake')}</div></div>
 		{:else}
 			<div class="a-stage stage">
-				{#if output && video}
-					{#key output}
-						<!-- svelte-ignore a11y_media_has_caption -->
-						<video src={assetUrl(output)} controls playsinline preload="metadata" onloadedmetadata={noteVideo}></video>
-					{/key}
-				{:else if output}
-					<img src={assetUrl(output)} alt={prompt || t('desk.tabResult')} onload={noteImg} />
-				{: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>
+				{#key mediaKey}
+					<div class="stage-media" in:xfade out:xfade>
+						{#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
+									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)}
+								/>
+							</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>
-				{/if}
+				{/key}
 			</div>
 
-			{#if outputs.length > 1}
+			{#if allOutputs.length > 1}
 				<div class="strip" role="group" aria-label={t('desk.outputs')}>
-					{#each outputs as p, i (p)}
+					{#each allOutputs as p, i (p)}
 						<button
 							type="button"
 							class="strip-item"
-							aria-pressed={i === outIndex}
+							class:gone={gonePaths.includes(p)}
+							aria-pressed={p === output}
 							aria-label={t('desk.outputN', { n: i + 1 })}
 							onclick={() => (outIndex = i)}
 						>
@@ -155,22 +246,44 @@
 			</div>
 
 			<div class="actions">
-				<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>{t('desk.download')}</a>
-				{/if}
-				{#if job.status !== 'pending' && job.status !== 'running'}
-					<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}>{t('studio.deleteBtn')}</button>
+				{#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>{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 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}
 
 			{#if inputs.length || prompt}
@@ -192,7 +305,10 @@
 			<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 })}</dd>
+				<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>
@@ -247,13 +363,29 @@
 		display: grid;
 		place-items: center;
 	}
-	.stage > img,
-	.stage > video {
+	.stage-media {
 		position: absolute;
 		inset: 0;
-		width: 100%;
-		height: 100%;
-		object-fit: contain;
+		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;
@@ -264,6 +396,9 @@
 		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);
@@ -293,6 +428,11 @@
 	.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%;
@@ -326,6 +466,10 @@
 		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);
@@ -376,6 +520,9 @@
 		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) {

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

@@ -154,6 +154,7 @@
 			{@const reject = rejects[s.inp.nodeId]?.[0]}
 			<MediaSlot
 				label={s.label}
+				hint={s.lastFrame && !s.inp.required ? t('studio.slotOptional') : undefined}
 				required={s.inp.required}
 				value={String(values[s.inp.nodeId] ?? '')}
 				kind={s.mediaKind}

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

@@ -5,6 +5,7 @@
 	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 { usageLabel } from './schema';
 	import { elapsedSec, fmtClock, fmtDur, inputsOf, isVideoOutput, promptOf } from './takes';
@@ -13,6 +14,12 @@
 	 * 一条记录 (spec-v2 §3.3 记录卡): workflow · usage · time, the prompt, the
 	 * inputs it used, its real state (phase / progress / time / error) and
 	 * the first output. The whole card selects; actions sit above it.
+	 * D 批 (HEL-654): the gold sel-mark frame slides between cards on
+	 * pointer selection (driven by the feed), new takes enter with a
+	 * 220ms rise, completion flashes once, failure shakes once, a done
+	 * take whose files no longer load turns amber (文件缺失) with
+	 * 用相同参数重做 / 移除记录, and takes on a deleted workflow are
+	 * marked as such instead of pretending nothing changed.
 	 */
 	interface Props {
 		job: Job;
@@ -20,6 +27,12 @@
 		selected: boolean;
 		nowMs: number;
 		busy?: boolean;
+		/** Play the 220ms entrance rise (new take / undo restore). */
+		enter?: boolean;
+		/** One-shot 900ms gold flash on completion. */
+		flash?: boolean;
+		/** One-shot failure shake. */
+		shake?: boolean;
 		onSelect: () => void;
 		onReuse: () => void;
 		onRetry: () => void;
@@ -27,13 +40,37 @@
 		onDelete: () => void;
 	}
 
-	let { job, wf, selected, nowMs, busy = false, onSelect, onReuse, onRetry, onCancel, onDelete }: Props = $props();
+	let {
+		job,
+		wf,
+		selected,
+		nowMs,
+		busy = false,
+		enter = false,
+		flash = false,
+		shake = false,
+		onSelect,
+		onReuse,
+		onRetry,
+		onCancel,
+		onDelete,
+	}: Props = $props();
 
 	const st = $derived(jobStatusInfo(job));
-	const tagTone = $derived(st.tone === 'queue' ? '' : st.tone === 'fail' ? 'err' : st.tone);
+	// §3.4 红/琥珀界线: red follows the backend task status only. Amber is
+	// reserved for a SUCCEEDED take whose product files no longer load.
+	const gonePaths = $derived(missingOutputsOf(job));
+	const fileGone = $derived(gonePaths.length > 0);
+	const tone = $derived(fileGone ? 'warn' : st.tone === 'queue' ? '' : st.tone === 'fail' ? 'err' : st.tone);
+	const label = $derived(fileGone ? t('jobst.missing') : st.label);
+	const wfDeleted = $derived(job.workflow_id == null);
 	const prompt = $derived(promptOf(job, wf));
 	const inputs = $derived(inputsOf(job, wf).filter((i) => i.kind === 'image'));
-	const output = $derived(st.tone === 'ok' ? (job.output_paths[0] ?? null) : null);
+	const output = $derived(
+		fileGone
+			? (job.output_paths.find((p) => !gonePaths.includes(p)) ?? null)
+			: (job.output_paths[0] ?? null),
+	);
 	const progress = $derived.by(() => {
 		if (job.status !== 'running') return 0;
 		const live = progressFor(job.id);
@@ -46,11 +83,13 @@
 
 	let portrait = $state(false);
 	let clipSec = $state<number | null>(null);
+	let errOpen = $state(false);
 
 	function noteImage(e: Event) {
 		const img = e.currentTarget as HTMLImageElement;
 		portrait = img.naturalHeight > img.naturalWidth;
 	}
+
 	function noteVideo(e: Event) {
 		const v = e.currentTarget as HTMLVideoElement;
 		portrait = v.videoHeight > v.videoWidth;
@@ -58,17 +97,26 @@
 	}
 </script>
 
-<article class="take" class:selected data-job={job.id}>
+<article
+	class="take"
+	class:selected
+	class:enter
+	class:done-flash={flash}
+	class:shake
+	data-job={job.id}
+>
+	<span class="sel-mark" aria-hidden="true"></span>
 	<button
 		type="button"
 		class="hit"
 		aria-pressed={selected}
-		aria-label={`${name} · ${st.label}`}
+		aria-label={`${name} · ${label}`}
 		onclick={onSelect}
 	></button>
 
 	<div class="head">
 		<span class="name">{name}</span>
+		{#if wfDeleted}<span class="a-tag">{t('studio.wfDeletedTag')}</span>{/if}
 		{#if wf?.usage}<span class="a-tag">{usageLabel(wf.usage)}</span>{/if}
 		<span class="meta mono">{fmtClock(parseDbTs(job.created_at))}</span>
 	</div>
@@ -85,50 +133,90 @@
 	{/if}
 
 	<div class="state">
-		<span class="a-tag {tagTone}">{st.label}</span>
+		<span class="a-tag {tone}">{label}</span>
 		{#if st.tone === 'run'}
 			{#if progress > 0}
 				<div class="a-progress bar" style:--p={progress / 100}><i></i></div>
 			{/if}
 			<span class="txt">{fmtDur(elapsedSec(job, nowMs))}</span>
-		{:else if st.tone === 'ok'}
+		{:else if st.tone === 'ok' && !fileGone}
 			<span class="txt">{t('desk.took', { d: fmtDur(elapsedSec(job, nowMs)) })}</span>
 		{:else if st.tone === 'fail'}
-			<span class="err-txt" title={st.detail}>{st.detail}</span>
+			<button
+				type="button"
+				class="err-txt"
+				class:open={errOpen}
+				title={st.detail}
+				aria-expanded={errOpen}
+				onclick={() => (errOpen = !errOpen)}
+			>
+				{st.detail}
+			</button>
+		{:else if fileGone}
+			<span class="gone-txt">{t('jobst.missingDetail')}</span>
 		{:else}
 			<span class="txt">{st.detail}</span>
 		{/if}
 		<div class="actions">
-			<button type="button" class="a-btn ghost xs" onclick={onReuse}>{t('desk.reuse')}</button>
-			{#if st.tone === 'fail' && job.error !== 'cancelled'}
-				<button type="button" class="a-btn ghost xs" disabled={busy} onclick={onRetry}>{t('common.retry')}</button>
-			{/if}
-			{#if active}
-				<button type="button" class="a-btn ghost xs" disabled={busy} onclick={onCancel}>{t('common.cancel')}</button>
-			{/if}
-			{#if output}
-				<a class="a-btn ghost xs" href={assetUrl(output)} download>{t('desk.download')}</a>
-			{/if}
-			{#if !active}
-				<button type="button" class="a-btn danger xs" onclick={onDelete}>{t('studio.deleteBtn')}</button>
+			{#if fileGone}
+				<button type="button" class="a-btn ghost xs" disabled={busy} onclick={onRetry}>
+					{t('desk.redo')}
+				</button>
+				<button type="button" class="a-btn danger xs" onclick={onDelete}>{t('desk.removeRecord')}</button>
+			{:else}
+				<button type="button" class="a-btn ghost xs" onclick={onReuse}>{t('desk.reuse')}</button>
+				{#if st.tone === 'fail' && job.error !== 'cancelled'}
+					<button type="button" class="a-btn ghost xs" disabled={busy} onclick={onRetry}>{t('common.retry')}</button>
+				{/if}
+				{#if active}
+					<button type="button" class="a-btn ghost xs" disabled={busy} onclick={onCancel}>{t('common.cancel')}</button>
+				{/if}
+				{#if output}
+					<a class="a-btn ghost xs" href={assetUrl(output)} download>{t('desk.download')}</a>
+				{/if}
+				{#if !active}
+					<button type="button" class="a-btn danger xs" onclick={onDelete}>{t('studio.deleteBtn')}</button>
+				{/if}
 			{/if}
 		</div>
 	</div>
 
 	<div class="out">
 		{#if output}
-			<div class="thumb" class:portrait>
+			<div class="thumb a-photo" class:portrait>
+				{#if st.tone === 'ok' && !fileGone}<span class="a-fix">{t('jobst.done')}</span>{/if}
 				{#if isVideoOutput(job, output)}
-					<video src={assetUrl(output)} preload="metadata" muted playsinline onloadedmetadata={noteVideo}></video>
+					<video
+						src={assetUrl(output)}
+						preload="metadata"
+						muted
+						playsinline
+						onloadedmetadata={(e) => {
+							clearOutputMissing(output);
+							noteVideo(e);
+						}}
+						onerror={() => output && markOutputMissing(output)}
+					></video>
 					<span class="play" aria-hidden="true"><Icon name="play" size={10} /></span>
 					{#if clipSec != null}<span class="badge mono">{fmtDur(clipSec)}</span>{/if}
 				{:else}
-					<img src={assetUrl(output)} alt="" loading="lazy" onload={noteImage} />
+					<img
+						src={assetUrl(output)}
+						alt=""
+						loading="lazy"
+						onload={(e) => {
+							clearOutputMissing(output);
+							noteImage(e);
+						}}
+						onerror={() => output && markOutputMissing(output)}
+					/>
 				{/if}
 				{#if job.output_paths.length > 1}<span class="count mono">×{job.output_paths.length}</span>{/if}
 			</div>
 		{:else if active}
 			<div class="thumb pending">{st.label}</div>
+		{:else if fileGone}
+			<div class="thumb gone">{t('jobst.missing')}</div>
 		{:else}
 			<div class="thumb missing">{t('desk.notGenerated')}</div>
 		{/if}
@@ -151,17 +239,102 @@
 			background-color var(--d-state) ease,
 			box-shadow var(--d-state) ease;
 	}
+	/* 选中框：取景框角线从上一条记录滑到新选中的记录（feed 驱动 WAAPI，
+	   HEL-680 四角短线取代整框描边） */
+	.sel-mark {
+		position: absolute;
+		inset: -1px;
+		z-index: 3;
+		display: none;
+		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:
+			14px 2px,
+			2px 14px,
+			14px 2px,
+			2px 14px,
+			14px 2px,
+			2px 14px,
+			14px 2px,
+			2px 14px;
+		background-repeat: no-repeat;
+	}
 	.take.selected {
-		border-color: var(--accent-line);
+		border-color: transparent;
 		background: var(--accent-wash), var(--bg-3);
 		box-shadow: var(--sel-shadow);
 	}
+	.take.selected > .sel-mark {
+		display: block;
+	}
 	@media (hover: hover) and (pointer: fine) {
 		.take:hover:not(.selected) {
 			border-color: var(--line-2);
 			background: var(--bg-3);
 		}
 	}
+	/* 新记录 / 撤销恢复：220ms 上移 8px 入场（减动效只余淡变） */
+	.take.enter {
+		animation: take-in var(--d-enter) var(--ease-out);
+	}
+	@keyframes take-in {
+		from {
+			opacity: 0;
+			transform: translateY(8px);
+		}
+	}
+	/* 完成一次性金色光晕 900ms；失败原地轻抖一次 */
+	.take.done-flash {
+		animation: done-flash var(--d-flash) var(--ease-out);
+	}
+	@keyframes done-flash {
+		from {
+			box-shadow: var(--accent-glow), 0 0 0 1px var(--accent-line);
+		}
+	}
+	.take.shake {
+		animation: take-shake 320ms var(--ease-out);
+	}
+	@keyframes take-shake {
+		20% {
+			transform: translateX(-4px);
+		}
+		45% {
+			transform: translateX(4px);
+		}
+		70% {
+			transform: translateX(-2px);
+		}
+	}
+	:global(:root[data-reduce='1']) .take.enter {
+		animation: take-fade var(--d-state) ease;
+	}
+	:global(:root[data-reduce='1']) .take.done-flash,
+	:global(:root[data-reduce='1']) .take.shake {
+		animation: none;
+	}
+	@keyframes take-fade {
+		from {
+			opacity: 0;
+		}
+	}
 	.hit {
 		position: absolute;
 		inset: 0;
@@ -242,13 +415,39 @@
 		color: var(--text-2);
 		white-space: nowrap;
 	}
-	.err-txt {
+	.gone-txt {
 		min-width: 0;
-		color: var(--err);
+		color: var(--warn);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	/* 失败：一行中文结论自动展开，点开看完整详情 */
+	.err-txt {
+		min-width: 0;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--err);
+		font: inherit;
+		font-size: var(--fs-aux);
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		pointer-events: auto;
+		cursor: pointer;
+	}
+	.err-txt.open {
+		white-space: normal;
+		word-break: break-word;
+	}
+	.err-txt:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+		border-radius: var(--r-sm);
+	}
 	.actions {
 		display: flex;
 		gap: var(--sp-1);
@@ -287,6 +486,12 @@
 		background: var(--bg-4);
 		box-shadow: inset 0 0 0 1px var(--on-media-line);
 	}
+	/* 相纸白边 (HEL-680)：有产出的记录缩略图按相纸呈现，压过占位态样式 */
+	.thumb.a-photo {
+		border-radius: 2px;
+		background: var(--accent);
+		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+	}
 	.thumb.portrait {
 		width: 96px;
 		aspect-ratio: 3 / 4;
@@ -329,7 +534,8 @@
 		color: var(--on-media);
 	}
 	.thumb.pending,
-	.thumb.missing {
+	.thumb.missing,
+	.thumb.gone {
 		display: grid;
 		place-items: center;
 		padding: var(--sp-2);
@@ -345,6 +551,10 @@
 		border-style: solid;
 		color: var(--run);
 	}
+	.thumb.gone {
+		color: var(--warn);
+		border-color: var(--warn);
+	}
 	.thumb.pending::after {
 		content: '';
 		position: absolute;

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { SvelteSet } from 'svelte/reactivity';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import type { Job, Workflow } from '$lib/comfy/types';
 	import { parseDbTs } from '$lib/dbtime';
@@ -10,6 +12,12 @@
 	/**
 	 * 记录流 (spec-v2 §3.3): every desk take, newest last above the composer,
 	 * filtered 全部 / 图片 / 视频 / 失败 and grouped by day.
+	 * D 批 (HEL-654): rows pending their 5-second undo collapse out
+	 * (200ms) instead of vanishing, new/restored takes rise in (220ms),
+	 * the gold selection frame slides between cards on pointer picks
+	 * (键盘 ↑↓/J/K 即时切换无动画 — driven by the desk through the
+	 * exported helpers), and long histories page in from the top
+	 * (spec §五: 记录流超 200 条分页).
 	 */
 	interface Props {
 		jobs: Job[];
@@ -19,6 +27,13 @@
 		nowMs: number;
 		busyId: number | null;
 		loading: boolean;
+		/** Takes whose delete is inside the 5s undo window — hidden. */
+		pendingIds: SvelteSet<number>;
+		/** One-shot completion flashes / failure shakes (driven by SSE). */
+		flashIds: SvelteSet<number>;
+		shakeIds: SvelteSet<number>;
+		/** Ordered visible ids (oldest first) for ↑↓/J/K. */
+		orderedIds?: number[];
 		/** Shown under the filters (e.g. the workbench context bar). */
 		banner?: Snippet;
 		/** Inspector toggle when it is hidden (desktop) or an overlay (mid). */
@@ -38,6 +53,10 @@
 		nowMs,
 		busyId,
 		loading,
+		pendingIds,
+		flashIds,
+		shakeIds,
+		orderedIds = $bindable(),
 		banner,
 		inspectorToggle,
 		onSelect,
@@ -54,16 +73,27 @@
 		{ id: 'failed', key: 'desk.filterFailed' },
 	];
 
+	/** §五 分页: render the newest PAGE_SIZE takes; older ones load on demand. */
+	const PAGE_SIZE = 80;
+	let limit = $state(PAGE_SIZE);
+
 	let scroller = $state<HTMLElement | null>(null);
 
 	/** Oldest first so the newest take sits right above the composer. */
 	const shown = $derived(
-		jobs.filter((j) => matchesFilter(j, filter)).sort((a, b) => parseDbTs(a.created_at) - parseDbTs(b.created_at)),
+		jobs
+			.filter((j) => matchesFilter(j, filter) && !pendingIds.has(j.id))
+			.sort((a, b) => parseDbTs(a.created_at) - parseDbTs(b.created_at)),
 	);
+	const hiddenEarlier = $derived(Math.max(0, shown.length - limit));
+	const visible = $derived(hiddenEarlier > 0 ? shown.slice(-limit) : shown);
+	$effect(() => {
+		orderedIds = visible.map((j) => j.id);
+	});
 	const activeCount = $derived(jobs.filter((j) => j.status === 'pending' || j.status === 'running').length);
 	const days = $derived.by(() => {
 		const out: Array<{ label: string; items: Job[] }> = [];
-		for (const job of shown) {
+		for (const job of visible) {
 			const label = dayLabel(parseDbTs(job.created_at), nowMs);
 			const last = out[out.length - 1];
 			if (last?.label === label) last.items.push(job);
@@ -79,12 +109,108 @@
 		pinned = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight < 80;
 	}
 	$effect(() => {
-		void shown.length;
+		void visible.length;
 		void filter;
 		if (!scroller || !pinned) return;
 		const el = scroller;
 		requestAnimationFrame(() => (el.scrollTop = el.scrollHeight));
 	});
+
+	// ------------------------------------------------------------------
+	// Entrance bookkeeping: only takes that appear AFTER the first fill
+	// (or come back from an undo) play the 220ms rise.
+	// ------------------------------------------------------------------
+	const seenIds = new Set<number>();
+	const animateIds = new SvelteSet<number>();
+	let hydrated = false;
+	$effect(() => {
+		if (!hydrated) {
+			if (jobs.length) {
+				for (const j of jobs) seenIds.add(j.id);
+				hydrated = true;
+			}
+			return;
+		}
+		for (const j of jobs) {
+			if (seenIds.has(j.id)) continue;
+			seenIds.add(j.id);
+			animateIds.add(j.id);
+		}
+	});
+
+	export function markEnter(jobId: number) {
+		seenIds.add(jobId);
+		animateIds.add(jobId);
+	}
+
+	function reduced(): boolean {
+		return (
+			document.documentElement.dataset.reduce === '1' ||
+			window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		);
+	}
+
+	// ------------------------------------------------------------------
+	// Gold selection frame (HEL-648 slideMark): pointer picks only.
+	// ------------------------------------------------------------------
+	export function markRect(): DOMRect | null {
+		const el = scroller?.querySelector(`.take[data-job="${selectedId}"]`);
+		return el instanceof HTMLElement ? el.getBoundingClientRect() : null;
+	}
+
+	export function slideFrom(fromRect: DOMRect | null) {
+		if (!fromRect || reduced()) return;
+		const el = scroller?.querySelector(`.take[data-job="${selectedId}"]`);
+		const mark = el?.querySelector('.sel-mark');
+		if (!(el instanceof HTMLElement) || !(mark instanceof HTMLElement)) return;
+		const to = el.getBoundingClientRect();
+		if (Math.abs(fromRect.top - to.top) < 1 && Math.abs(fromRect.height - to.height) < 1) return;
+		mark.animate(
+			[
+				{ top: `${fromRect.top - to.top - 1}px`, bottom: `${to.bottom - fromRect.bottom - 1}px` },
+				{ top: '-1px', bottom: '-1px' },
+			],
+			{ duration: 220, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' },
+		);
+	}
+
+	/** Bring a keyboard-selected take into view without animation. */
+	export function scrollToJob(jobId: number) {
+		const el = scroller?.querySelector(`.take[data-job="${jobId}"]`);
+		el?.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+	}
+
+	// ------------------------------------------------------------------
+	// Row transitions: undo-pending rows collapse out (200ms 收起 + 补位),
+	// new/restored takes rise in (220ms). Everything else is instant.
+	// ------------------------------------------------------------------
+	function takeEnter(_node: HTMLElement, should: () => boolean) {
+		if (!should()) return { duration: 0 };
+		if (reduced()) return { duration: 120, css: (t: number) => `opacity: ${t}` };
+		return {
+			duration: 220,
+			easing: cubicOut,
+			css: (t: number) => `opacity: ${t}; transform: translateY(${8 * (1 - t)}px)`,
+		};
+	}
+
+	function takeLeave(node: HTMLElement, isPending: () => boolean) {
+		if (!isPending()) return { duration: 0 };
+		if (reduced()) return { duration: 120, css: (t: number) => `opacity: ${t}` };
+		const h = node.offsetHeight;
+		const cs = getComputedStyle(node);
+		const num = (v: string) => parseFloat(v) || 0;
+		const padT = num(cs.paddingTop);
+		const padB = num(cs.paddingBottom);
+		const mb = num(cs.marginBottom);
+		return {
+			duration: 200,
+			easing: cubicOut,
+			css: (t: number, u: number) =>
+				`height:${h * t}px;padding-top:${padT * t}px;padding-bottom:${padB * t}px;` +
+				`margin-bottom:${mb * t}px;opacity:${t};transform:translateX(${-10 * u}px);overflow:hidden;`,
+		};
+	}
 </script>
 
 <div class="filters">
@@ -109,21 +235,36 @@
 			<p>{filter === 'failed' ? t('desk.emptyFailed') : t('desk.emptyFeed')}</p>
 		</div>
 	{:else}
+		{#if hiddenEarlier > 0}
+			<button type="button" class="a-btn ghost sm earlier" onclick={() => (limit += PAGE_SIZE)}>
+				<Icon name="chevron-up" size={13} />
+				{t('desk.loadEarlier', { n: hiddenEarlier })}
+			</button>
+		{/if}
 		{#each days as day (day.label)}
 			<div class="day">{day.label}</div>
 			{#each day.items as job (job.id)}
-				<TakeCard
-					{job}
-					wf={workflowOf(job)}
-					selected={job.id === selectedId}
-					{nowMs}
-					busy={busyId === job.id}
-					onSelect={() => onSelect(job)}
-					onReuse={() => onReuse(job)}
-					onRetry={() => onRetry(job)}
-					onCancel={() => onCancel(job)}
-					onDelete={() => onDelete(job)}
-				/>
+				<div
+					class="take-slot"
+					in:takeEnter={() => animateIds.has(job.id)}
+					out:takeLeave={() => pendingIds.has(job.id)}
+				>
+					<TakeCard
+						{job}
+						wf={workflowOf(job)}
+						selected={job.id === selectedId}
+						{nowMs}
+						busy={busyId === job.id}
+						enter={animateIds.has(job.id)}
+						flash={flashIds.has(job.id)}
+						shake={shakeIds.has(job.id)}
+						onSelect={() => onSelect(job)}
+						onReuse={() => onReuse(job)}
+						onRetry={() => onRetry(job)}
+						onCancel={() => onCancel(job)}
+						onDelete={() => onDelete(job)}
+					/>
+				</div>
 			{/each}
 		{/each}
 	{/if}
@@ -149,6 +290,10 @@
 		overflow-y: auto;
 		padding: var(--sp-6) var(--sp-7) var(--sp-3);
 	}
+	.earlier {
+		display: flex;
+		margin: 0 auto var(--sp-4);
+	}
 	.day {
 		display: flex;
 		align-items: center;

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

@@ -10,6 +10,9 @@
 	 * pop grouped by usage with search; each row shows what the workflow
 	 * really takes (slot summary from its JSON), its connection and whether
 	 * it last ran. Picking keeps the prompt and carried-over images.
+	 * D 批 (HEL-654): the footer's「↑↓ 选择」is now literally true — an
+	 * active row follows ↑↓ (and the pointer), Enter uses it, and the
+	 * search's Enter picks the active row instead of always the first.
 	 */
 	interface Props {
 		workflows: Workflow[];
@@ -22,6 +25,7 @@
 
 	let open = $state(false);
 	let query = $state('');
+	let activeId = $state<number | null>(null);
 
 	type Status = { tone: '' | 'ok' | 'warn' | 'err'; label: string };
 
@@ -59,17 +63,46 @@
 		})).filter((g) => g.items.length);
 	});
 
+	/** Flattened rows in display order — the roving selection walks these. */
+	const flat = $derived(groups.flatMap((g) => g.items));
+
+	// Keep the active row real: default to the current workflow, clamp on
+	// filter changes, never point at a row that is no longer listed.
+	$effect(() => {
+		if (!open) return;
+		if (activeId != null && flat.some((r) => r.wf.id === activeId)) return;
+		activeId = flat.find((r) => r.wf.id === current?.id)?.wf.id ?? flat[0]?.wf.id ?? null;
+	});
+
+	function moveActive(delta: number) {
+		if (!flat.length) return;
+		let i = flat.findIndex((r) => r.wf.id === activeId);
+		i = i < 0 ? (delta > 0 ? 0 : flat.length - 1) : i + delta;
+		activeId = flat[Math.max(0, Math.min(flat.length - 1, i))].wf.id;
+	}
+
+	function pickActive() {
+		const row = flat.find((r) => r.wf.id === activeId) ?? flat[0];
+		if (row) pick(row.wf);
+	}
+
 	function pick(wf: Workflow) {
 		open = false;
 		query = '';
 		if (wf.id !== current?.id) onPick(wf);
 	}
 
-	function onSearchKey(e: KeyboardEvent) {
-		if (e.key !== 'Enter') return;
-		e.preventDefault();
-		const first = groups[0]?.items[0];
-		if (first) pick(first.wf);
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			moveActive(1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			moveActive(-1);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			pickActive();
+		}
 	}
 </script>
 
@@ -86,63 +119,80 @@
 		<Icon name="playground" size={14} />
 		<span class="lbl">{current?.name ?? t('desk.pickWorkflow')}</span>
 	</button>
-	<ShellPop bind:open label={t('desk.pickWorkflow')} placement="top" width="520px" onclose={() => (query = '')}>
-		<div class="search">
-			<Icon name="search" size={14} />
-			<input
-				class="search-input"
-				type="search"
-				bind:value={query}
-				placeholder={t('desk.wfSearchPh')}
-				aria-label={t('desk.wfSearchPh')}
-				onkeydown={onSearchKey}
-			/>
-		</div>
-		<div class="list">
-			{#each groups as g (g.usage)}
-				<div class="a-menu-group">{usageLabel(g.usage)} · {g.items.length}</div>
-				{#each g.items as r (r.wf.id)}
-					{@const cur = r.wf.id === current?.id}
-					<button
-						type="button"
-						class="a-menu-item row"
-						class:off={r.status.tone === 'err'}
-						aria-current={cur ? 'true' : undefined}
-						onclick={() => pick(r.wf)}
-					>
-						<span class="main">
-							<span class="a-menu-label">{r.wf.name}{cur ? ` · ${t('desk.wfCurrent')}` : ''}</span>
-							<span class="sub">
-								<span class="a-tag">{r.summary}</span>
-								<span class="a-tag">{r.conn}</span>
+	<ShellPop
+		bind:open
+		label={t('desk.pickWorkflow')}
+		placement="top"
+		width="520px"
+		arrowRoving={false}
+		onclose={() => (query = '')}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="pop-body" onkeydown={onKeydown}>
+			<div class="search">
+				<Icon name="search" size={14} />
+				<input
+					class="search-input"
+					type="search"
+					bind:value={query}
+					placeholder={t('desk.wfSearchPh')}
+					aria-label={t('desk.wfSearchPh')}
+				/>
+			</div>
+			<div class="list" role="listbox" aria-label={t('desk.pickWorkflow')}>
+				{#each groups as g (g.usage)}
+					<div class="a-menu-group">{usageLabel(g.usage)} · {g.items.length}</div>
+					{#each g.items as r (r.wf.id)}
+						{@const cur = r.wf.id === current?.id}
+						<button
+							type="button"
+							class="a-menu-item row"
+							class:off={r.status.tone === 'err'}
+							class:active={r.wf.id === activeId}
+							role="option"
+							aria-current={cur ? 'true' : undefined}
+							aria-selected={r.wf.id === activeId ? 'true' : undefined}
+							onclick={() => pick(r.wf)}
+							onpointermove={() => (activeId = r.wf.id)}
+						>
+							<span class="main">
+								<span class="a-menu-label">{r.wf.name}{cur ? ` · ${t('desk.wfCurrent')}` : ''}</span>
+								<span class="sub">
+									<span class="a-tag">{r.summary}</span>
+									<span class="a-tag">{r.conn}</span>
+								</span>
 							</span>
-						</span>
-						<span class="a-tag {r.status.tone}">{r.status.label}</span>
-					</button>
+							<span class="a-tag {r.status.tone}">{r.status.label}</span>
+						</button>
+					{/each}
+				{:else}
+					<p class="empty">{t('desk.wfNoMatch')}</p>
 				{/each}
-			{:else}
-				<p class="empty">{t('desk.wfNoMatch')}</p>
-			{/each}
-		</div>
-		<div class="foot">
-			<a class="a-btn ghost sm" href="/connections">
-				<Icon name="upload" size={13} />
-				{t('desk.wfImport')}
-			</a>
-			<span class="keys">
-				<span class="a-kbd">↑↓</span>{t('desk.keySelect')}
-				<span class="a-kbd">Enter</span>{t('desk.keyUse')}
-				<span class="a-kbd">Esc</span>{t('desk.keyClose')}
-			</span>
+			</div>
+			<div class="foot">
+				<a class="a-btn ghost sm" href="/connections">
+					<Icon name="upload" size={13} />
+					{t('desk.wfImport')}
+				</a>
+				<span class="keys">
+					<span class="a-kbd">↑↓</span>{t('desk.keySelect')}
+					<span class="a-kbd">Enter</span>{t('desk.keyUse')}
+					<span class="a-kbd">Esc</span>{t('desk.keyClose')}
+				</span>
+			</div>
 		</div>
 	</ShellPop>
 </div>
 
-<style>
+	<style>
 	.picker {
 		position: relative;
 		min-width: 0;
 	}
+	.pop-body {
+		display: flex;
+		flex-direction: column;
+	}
 	.search {
 		display: flex;
 		align-items: center;
@@ -173,6 +223,10 @@
 	.row {
 		align-items: center;
 	}
+	/* 键盘游走选中态（↑↓ 选择 · Enter 使用） */
+	.row.active {
+		background: var(--bg-4);
+	}
 	.main {
 		display: grid;
 		gap: 2px;

calliope-web/src/lib/components/generate/schema.ts

@@ -282,7 +282,9 @@ export function validateForm(
 	if (first && last) {
 		const a = String(values[first.inp.nodeId] ?? '');
 		const b = String(values[last.inp.nodeId] ?? '');
-		if ((!a || !b) && (a || b)) {
+		// An optional last frame (H3 FL2VA) may stay empty; it never goes without a first frame.
+		const unpaired = last.inp.required ? (!a || !b) && (a || b) : !a && !!b;
+		if (unpaired) {
 			errs.firstLast = t('studio.errFirstLast');
 			if (!a) errs[first.inp.nodeId] = ' ';
 			if (!b) errs[last.inp.nodeId] = ' ';

calliope-web/src/lib/components/generate/takeDelete.svelte.ts

@@ -0,0 +1,120 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { QueryClient } from '@tanstack/svelte-query';
+import { apiErrorMessage, playgroundApi } from '$lib/api';
+import type { Job } from '$lib/comfy/types';
+import { showToast } from '$lib/toast';
+import { t } from '$lib/i18n.svelte';
+
+/**
+* 撤销删除 (spec-v2 §四.4 删除两级制 · HEL-654 D 批): deleting a single
+* take/task never opens a dialog. The row leaves the view right away, a
+* 5-second Toast offers 撤销, and the backend DELETE is only sent when
+* that window closes without an undo — the backend removes result files,
+* so an undo after the call would be impossible. Leaving the page (SPA
+* route change or hard unload) flushes pending deletes instead of
+* dropping them.
+*/
+
+export interface TakeDeleteHandlers {
+	/** Localized toast message for this take. */
+	message: (job: Job) => string;
+	/** Undo: the row comes back — reselect / replay its entrance here. */
+	onUndo?: (job: Job) => void;
+	/** Called after the delete really hit the backend. */
+	onCommitted?: (job: Job) => void;
+}
+
+export interface TakeDeleteQueue {
+	/** Ids whose rows should be hidden (commit pending). */
+	readonly pending: SvelteSet<number>;
+	request: (job: Job, handlers: TakeDeleteHandlers) => void;
+	destroy: () => void;
+}
+
+const UNDO_MS = 5000;
+
+export function createTakeDeleteQueue(client: QueryClient): TakeDeleteQueue {
+	const pending = new SvelteSet<number>();
+	const entries = new Map<
+		number,
+		{
+			job: Job;
+			handlers: TakeDeleteHandlers;
+			timer: ReturnType<typeof setTimeout>;
+		}
+	>();
+	let destroyed = false;
+
+	async function invalidate() {
+		await Promise.allSettled([
+			client.invalidateQueries({ queryKey: ['playground-jobs'] }),
+			client.invalidateQueries({ queryKey: ['jobs'] }),
+		]);
+	}
+
+	async function commit(id: number) {
+		const entry = entries.get(id);
+		if (!entry) return;
+		entries.delete(id);
+		try {
+			await playgroundApi.deleteJob(id);
+			pending.delete(id);
+			entry.handlers.onCommitted?.(entry.job);
+		} catch (err) {
+			// Delete failed: the take stays — bring the row back honestly.
+			pending.delete(id);
+			showToast(
+				t('studio.deleteFailedToast', { detail: apiErrorMessage(err) }),
+				'error',
+			);
+		}
+		await invalidate();
+	}
+
+	/** Hard unload (tab close / external nav): fire-and-forget with keepalive. */
+	function onPageHide() {
+		for (const [id] of entries) {
+			void fetch(`/api/playground/jobs/${id}`, {
+				method: 'DELETE',
+				keepalive: true,
+			});
+		}
+	}
+
+	function destroy() {
+		if (destroyed) return;
+		destroyed = true;
+		if (inBrowser) window.removeEventListener('pagehide', onPageHide);
+		// SPA route change: the JS context survives, normal commits are fine.
+		for (const [id] of entries) {
+			const entry = entries.get(id)!;
+			clearTimeout(entry.timer);
+			void commit(id);
+		}
+	}
+
+	const inBrowser = typeof window !== 'undefined';
+	if (inBrowser) window.addEventListener('pagehide', onPageHide);
+
+	return {
+		pending,
+		request(job, handlers) {
+			if (destroyed || pending.has(job.id)) return;
+			pending.add(job.id);
+			const timer = setTimeout(() => void commit(job.id), UNDO_MS);
+			entries.set(job.id, { job, handlers, timer });
+			showToast(handlers.message(job), 'info', UNDO_MS, {
+				label: t('toast.undo'),
+				run: () => {
+					const e = entries.get(job.id);
+					if (!e) return;
+					clearTimeout(e.timer);
+					entries.delete(job.id);
+					pending.delete(job.id);
+					handlers.onUndo?.(job);
+				},
+			});
+		},
+		destroy,
+	};
+}

calliope-web/src/lib/components/home/AProjectCard.svelte

@@ -52,7 +52,12 @@
 		'var(--avatar-4)',
 		'var(--avatar-5)',
 	];
-	const placeholder = $derived(PLACEHOLDER_GRADIENTS[project.id % PLACEHOLDER_GRADIENTS.length]);
+	const placeholderIdx = $derived(project.id % PLACEHOLDER_GRADIENTS.length);
+	const placeholder = $derived(PLACEHOLDER_GRADIENTS[placeholderIdx]);
+	// HEL-680 灰阶封面占位：1–2 亮阶配深图标，3–5 暗阶配浅图标
+	const placeholderIconColor = $derived(
+		placeholderIdx <= 1 ? 'var(--accent-ink)' : 'var(--text)',
+	);
 
 	const coverUrl = $derived(assetUrl(project.cover_path));
 
@@ -174,7 +179,12 @@
 					onerror={() => (coverFailed = true)}
 				/>
 			{:else}
-				<span class="cover-ph" style:background={placeholder} aria-hidden="true">
+				<span
+					class="cover-ph"
+					style:background={placeholder}
+					style:color={placeholderIconColor}
+					aria-hidden="true"
+				>
 					<Icon name="film" size={22} />
 				</span>
 			{/if}
@@ -381,7 +391,7 @@
 		white-space: nowrap;
 	}
 	.arrow {
-		color: var(--accent);
+		color: var(--text-2);
 		font-size: 13px;
 		opacity: 0;
 		transform: translateX(-6px);

calliope-web/src/lib/components/shell/AppShell.svelte

@@ -402,6 +402,7 @@
 		flex-shrink: 0;
 		margin-bottom: var(--sp-5);
 		border-radius: var(--r-md);
+		border-bottom: 2px solid var(--accent-lo);
 		display: grid;
 		place-items: center;
 		background: var(--accent-grad);

calliope-web/src/lib/components/shell/ShellPop.svelte

@@ -15,6 +15,8 @@
 		/** `top` opens above the trigger (triggers near the bottom edge, e.g. the composer). */
 		placement?: 'bottom' | 'top';
 		width?: string;
+		/** Set false when the content runs its own ↑↓ roving selection. */
+		arrowRoving?: boolean;
 		onclose?: () => void;
 		children: Snippet;
 	}
@@ -25,6 +27,7 @@
 		align = 'start',
 		placement = 'bottom',
 		width = '300px',
+		arrowRoving = true,
 		onclose,
 		children,
 	}: Props = $props();
@@ -55,7 +58,7 @@
 		const current = document.activeElement as HTMLElement | null;
 		const index = current ? list.indexOf(current) : -1;
 		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-			if (current?.tagName === 'SELECT') return;
+			if (!arrowRoving || current?.tagName === 'SELECT') return;
 			event.preventDefault();
 			const step = event.key === 'ArrowDown' ? 1 : -1;
 			const next = index < 0 ? (step > 0 ? 0 : list.length - 1) : index + step;

calliope-web/src/lib/components/shell/nav.ts

@@ -9,6 +9,7 @@ export type NavId =
 	| 'agents'
 	| 'connections'
 	| 'models'
+	| 'library'
 	| 'settings';
 
 export interface NavItem {
@@ -33,6 +34,7 @@ export const NAV_MAIN: NavItem[] = [
 export const NAV_FOOT: NavItem[] = [
 	{ id: 'connections', labelKey: 'shell.navConnections', icon: 'link', href: '/connections' },
 	{ id: 'models', labelKey: 'shell.navModels', icon: 'assets', href: '/models' },
+	{ id: 'library', labelKey: 'shell.navLibrary', icon: 'folder', href: '/library' },
 	{ id: 'settings', labelKey: 'shell.navSettings', icon: 'settings', href: '/settings' },
 ];
 

calliope-web/src/lib/components/studio/StudioGenerate.svelte

@@ -2,8 +2,8 @@
 	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 	import { toStore } from 'svelte/store';
 	import { tick, untrack } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 	import { page } from '$app/state';
-	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 AppShell from '$lib/components/shell/AppShell.svelte';
@@ -12,6 +12,7 @@
 	import Inspector from '$lib/components/generate/Inspector.svelte';
 	import ParamsPanel from '$lib/components/generate/ParamsPanel.svelte';
 	import TakeFeed from '$lib/components/generate/TakeFeed.svelte';
+	import { createTakeDeleteQueue } from '$lib/components/generate/takeDelete.svelte';
 	import { readDeskContext } from '$lib/components/generate/context';
 	import {
 		changedParams,
@@ -90,6 +91,22 @@
 	// jobs list refetch knows about them.
 	const submittedIds = new Set<number>();
 
+	// D 批: one-shot completion flash / failure shake (SSE-driven) and the
+	// 5-second undo window for record deletes.
+	const flashIds = new SvelteSet<number>();
+	const shakeIds = new SvelteSet<number>();
+	const deleteQueue = createTakeDeleteQueue(client);
+	const pendingIds = deleteQueue.pending;
+	$effect(() => deleteQueue.destroy);
+
+	function flashTake(id: number, ms: number, set: SvelteSet<number>) {
+		set.add(id);
+		setTimeout(() => set.delete(id), ms);
+	}
+
+	let feed = $state<TakeFeed | null>(null);
+	let orderedIds = $state<number[]>([]);
+
 	$effect(() => {
 		const off = connectEvents((ev) => {
 			handleJobEvent(ev);
@@ -100,6 +117,13 @@
 				if (submittedIds.has(id) || (known && known.status !== 'failed')) {
 					toast.error(t('studio.jobFailedToast', { detail: String(ev.data.error ?? '') }));
 				}
+				flashTake(id, 400, shakeIds);
+			}
+			if (ev.type === 'job.completed') {
+				const id = Number(ev.data.job_id);
+				flashTake(id, 950, flashIds);
+				// 完成：检视区若正选中该条且为视频，自动播放。
+				if (selectedJobId === id) playSignal += 1;
 			}
 			if (ev.type === 'job.completed' && submittedIds.has(Number(ev.data.job_id)) && ev.data.dry_run) {
 				toast.info(t('studio.dryRunToast'));
@@ -342,6 +366,10 @@
 			sent = true;
 			if (sentTimer) clearTimeout(sentTimer);
 			sentTimer = setTimeout(() => (sent = false), 900);
+			// C 批审核:从「参数」页提交后自动切到「结果」页，进行中进度可见。
+			tab = 'result';
+			if (wide) inspOff = false;
+			else if (!narrow) inspOpen = true;
 			await client.invalidateQueries({ queryKey: ['playground-jobs'] });
 			await client.invalidateQueries({ queryKey: ['jobs'] });
 		} catch (err) {
@@ -361,13 +389,25 @@
 	let inspOff = $state(false);
 	let inspOpen = $state(false);
 	let wide = $state(true);
+	let narrow = $state(false);
+	let crossfade = $state(false);
+	let playSignal = $state(0);
+	let videoEl = $state<HTMLVideoElement | null>(null);
 
 	$effect(() => {
 		const mq = window.matchMedia('(min-width: 1180px)');
-		const sync = () => (wide = mq.matches);
+		const mq2 = window.matchMedia('(max-width: 760px)');
+		const sync = () => {
+			wide = mq.matches;
+			narrow = mq2.matches;
+		};
 		sync();
 		mq.addEventListener('change', sync);
-		return () => mq.removeEventListener('change', sync);
+		mq2.addEventListener('change', sync);
+		return () => {
+			mq.removeEventListener('change', sync);
+			mq2.removeEventListener('change', sync);
+		};
 	});
 
 	let nowMs = $state(Date.now());
@@ -378,19 +418,40 @@
 		return () => clearInterval(id);
 	});
 
-	/** Picked take, else the newest finished one in view. */
+	/** Picked take, else the newest finished one in view (undo-pending rows don't count). */
 	const selectedJob = $derived(
-		allJobs.find((j) => j.id === selectedJobId) ??
+		allJobs.find((j) => j.id === selectedJobId && !pendingIds.has(j.id)) ??
 			allJobs
-				.filter((j) => matchesFilter(j, filter) && jobStatusInfo(j).tone === 'ok')
+				.filter((j) => matchesFilter(j, filter) && !pendingIds.has(j.id) && jobStatusInfo(j).tone === 'ok')
 				.sort((a, b) => parseDbTs(b.created_at) - parseDbTs(a.created_at))[0] ??
 			null,
 	);
 
-	function selectTake(job: Job) {
+	/**
+	 * 结果切换 (HEL-648): pointer picks slide the gold frame and cross-fade
+	 * the inspector; keyboard ↑↓/J/K switch instantly with no animation.
+	 */
+	function selectTake(job: Job, via: 'pointer' | 'keyboard' = 'pointer') {
+		const from = via === 'pointer' ? (feed?.markRect() ?? null) : null;
 		selectedJobId = job.id;
 		tab = 'result';
-		if (!wide) inspOpen = true;
+		crossfade = via === 'pointer';
+		if (via === 'pointer') {
+			playSignal += 1;
+			if (!wide) inspOpen = true;
+			void tick().then(() => feed?.slideFrom(from));
+		} else {
+			feed?.scrollToJob(job.id);
+		}
+	}
+
+	function moveSelection(delta: number) {
+		if (!orderedIds.length) return;
+		let i = orderedIds.indexOf(selectedJob?.id ?? -1);
+		if (i < 0) i = orderedIds.length - 1;
+		i = Math.max(0, Math.min(orderedIds.length - 1, i + delta));
+		const job = allJobs.find((j) => j.id === orderedIds[i]);
+		if (job) selectTake(job, 'keyboard');
 	}
 
 	function openParams() {
@@ -460,7 +521,7 @@
 			toast.success(t('studio.retryQueuedToast'));
 			await client.invalidateQueries({ queryKey: ['playground-jobs'] });
 		} catch (err) {
-			toast.error(t('studio.retryFailedToast', { detail: err instanceof Error ? err.message : String(err) }));
+			toast.error(t('studio.retryFailedToast', { detail: apiErrorMessage(err) }));
 		} finally {
 			busyId = null;
 		}
@@ -474,49 +535,39 @@
 			toast.info(t('studio.cancelToast'));
 			await client.invalidateQueries({ queryKey: ['playground-jobs'] });
 		} catch (err) {
-			toast.error(err instanceof Error ? err.message : String(err));
+			toast.error(apiErrorMessage(err));
 		} finally {
 			busyId = null;
 		}
 	}
 
-	let deleteOpen = $state(false);
-	let deleteJob = $state<Job | null>(null);
-	// The dialog names the exact take and — when it produced several
-	// outputs — says plainly that ALL of them go away with it (the
-	// backend only deletes whole jobs, never a single output file).
-	const deleteTitle = $derived(
-		deleteJob
-			? t('studio.delTitleJob', { name: workflowOf(deleteJob)?.name ?? t('studio.jobName', { id: deleteJob.id }) })
-			: t('studio.delTitle'),
-	);
-	const deleteMessage = $derived(
-		(deleteJob?.output_paths?.length ?? 0) > 1
-			? t('studio.delConfirmMulti', { n: deleteJob!.output_paths.length })
-			: t('studio.delConfirm'),
-	);
-
-	function askDelete(job: Job) {
-		deleteJob = job;
-		deleteOpen = true;
-	}
-
-	async function doDelete() {
-		const job = deleteJob;
-		if (!job) return;
-		try {
-			await playgroundApi.deleteJob(job.id);
-			submittedIds.delete(job.id);
-			if (selectedJobId === job.id) selectedJobId = null;
-			toast.success(t('studio.deletedToast'));
-			await client.invalidateQueries({ queryKey: ['playground-jobs'] });
-			await client.invalidateQueries({ queryKey: ['jobs'] });
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : String(err));
-		} finally {
-			deleteJob = null;
-			deleteOpen = false;
-		}
+	/**
+	 * 删除整条任务 (§四.4 删除两级制): no dialog — the row collapses out,
+	 * a 5-second Toast offers 撤销 (row returns with its entrance and is
+	 * reselected), and only then does the DELETE really hit the backend.
+	 */
+	function requestDelete(job: Job) {
+		if (job.status === 'pending' || job.status === 'running') return;
+		const name = workflowOf(job)?.name ?? t('studio.jobName', { id: job.id });
+		deleteQueue.request(job, {
+			message: () =>
+				(job.output_paths?.length ?? 0) > 0
+					? t('studio.deletedTakeToast', { name })
+					: t('studio.deletedTakeNoFilesToast', { name }),
+			onUndo: (j) => {
+				feed?.markEnter(j.id);
+				const from = feed?.markRect() ?? null;
+				selectedJobId = j.id;
+				void tick().then(() => {
+					feed?.slideFrom(from);
+					feed?.scrollToJob(j.id);
+				});
+			},
+			onCommitted: (j) => {
+				submittedIds.delete(j.id);
+				if (selectedJobId === j.id) selectedJobId = null;
+			},
+		});
 	}
 
 	// ------------------------------------------------------------------
@@ -543,27 +594,60 @@
 	}
 
 	// ------------------------------------------------------------------
-	// Keyboard: Ctrl/⌘+Enter 生成 · / 聚焦提示词 · ] 检视区 · Esc 关浮层
+	// 键盘 (§四.8): Ctrl/⌘+Enter 生成 · / 聚焦提示词 · ↑↓/J/K 切换记录
+	// （即时无动画）· 空格播放/暂停 · Delete 删选中 · ] 检视区 · Esc 关浮层
 	// ------------------------------------------------------------------
 	function typing(target: EventTarget | null): boolean {
 		const el = target as HTMLElement | null;
 		return !!el && (el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName));
 	}
 
+	/** Focus sits on something that owns the key (button, link, video…). */
+	function onInteractive(target: EventTarget | null): boolean {
+		const el = target instanceof Element ? target : null;
+		return !!el?.closest('button, a, input, textarea, select, label, video, audio, [contenteditable]');
+	}
+
+	function inLayer(target: EventTarget | null): boolean {
+		const el = target instanceof Element ? target : null;
+		return !!el?.closest('.shell-pop, .modal, [role="dialog"]');
+	}
+
 	function onKeydown(e: KeyboardEvent) {
-		if (e.defaultPrevented || deleteOpen || pickerFor) return;
+		if (e.defaultPrevented || pickerFor || inLayer(e.target)) return;
 		if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
 			e.preventDefault();
 			void submit();
 			return;
 		}
 		if (e.ctrlKey || e.metaKey || e.altKey) return;
-		if (e.key === '/' && !typing(e.target)) {
+		const key = e.key.toLowerCase();
+		if (key === '/' && !typing(e.target)) {
 			e.preventDefault();
 			promptEl?.focus();
+		} else if ((e.key === 'ArrowDown' || key === 'j') && !typing(e.target)) {
+			e.preventDefault();
+			moveSelection(1);
+		} else if ((e.key === 'ArrowUp' || key === 'k') && !typing(e.target)) {
+			e.preventDefault();
+			moveSelection(-1);
+		} else if (e.key === ' ') {
+			// 空格播放/暂停：检视区可见且有视频时接管；焦点在控件上时走原生行为。
+			if (typing(e.target) || onInteractive(e.target)) return;
+			if (videoEl && (wide ? !inspOff : inspOpen)) {
+				e.preventDefault();
+				if (videoEl.paused) videoEl.play().catch(() => {});
+				else videoEl.pause();
+			}
 		} else if (e.key === ']' && !typing(e.target)) {
 			e.preventDefault();
 			toggleInspector();
+		} else if ((e.key === 'Delete' || e.key === 'Backspace') && !typing(e.target)) {
+			const job = selectedJob;
+			if (job && job.status !== 'pending' && job.status !== 'running') {
+				e.preventDefault();
+				requestDelete(job);
+			}
 		} else if (e.key === 'Escape' && !wide && inspOpen) {
 			inspOpen = false;
 		}
@@ -604,6 +688,7 @@
 	<div class="desk" class:insp-off={inspOff}>
 		<section class="center" aria-label={t('desk.title')}>
 			<TakeFeed
+				bind:this={feed}
 				jobs={allJobs}
 				{workflowOf}
 				bind:filter
@@ -611,13 +696,17 @@
 				{nowMs}
 				{busyId}
 				loading={$jobsQuery.isLoading}
+				{pendingIds}
+				{flashIds}
+				{shakeIds}
+				bind:orderedIds
 				banner={ctxBanner}
 				{inspectorToggle}
-				onSelect={selectTake}
+				onSelect={(job) => selectTake(job, 'pointer')}
 				onReuse={reuse}
 				onRetry={retry}
 				onCancel={cancel}
-				onDelete={askDelete}
+				onDelete={requestDelete}
 			/>
 			{#if !$workflowsQuery.isLoading && !deskWorkflows.length}
 				<div class="desk-empty" role="note">
@@ -662,11 +751,15 @@
 			open={inspOpen}
 			inactive={wide ? inspOff : !inspOpen}
 			canSendToSlot={!!imageSlotTarget || !!imageList}
+			{crossfade}
+			{playSignal}
+			bind:videoEl
 			params={paramsTab}
 			onClose={closeInspector}
 			onReuse={reuse}
+			onRetry={retry}
 			onSendToSlot={sendToSlot}
-			onDelete={askDelete}
+			onDelete={requestDelete}
 		/>
 	</div>
 </AppShell>
@@ -685,20 +778,6 @@
 	{/if}
 </Modal>
 
-<ConfirmDialog
-	bind:open={deleteOpen}
-	title={deleteTitle}
-	message={deleteMessage}
-	confirmLabel={t('studio.deleteBtn')}
-	cancelLabel={t('common.cancel')}
-	danger
-	onconfirm={doDelete}
-	oncancel={() => {
-		deleteJob = null;
-		deleteOpen = false;
-	}}
-/>
-
 <style>
 	.desk {
 		display: grid;

calliope-web/src/lib/components/ui/Drawer.svelte

@@ -0,0 +1,256 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Icon from './Icon.svelte';
+  import { t } from '$lib/i18n.svelte';
+
+  /**
+   * Drawer — the shared right-side floating layer (HEL-649 §四.3):
+   * slides in over 280ms with --ease-drawer and reverses mid-flight,
+   * focus is trapped while open, Esc / backdrop click close it, and
+   * reduced-motion keeps only a ≤120ms opacity fade (no slide).
+   */
+  interface Props {
+    open?: boolean;
+    title?: string;
+    /** Panel width on >760px screens. */
+    width?: number;
+    dismissible?: boolean;
+    onclose?: () => void;
+    footer?: Snippet;
+    children: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    width = 380,
+    dismissible = true,
+    onclose,
+    footer,
+    children,
+  }: Props = $props();
+
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  const titleId = `drawer-title-${Math.random().toString(36).slice(2, 9)}`;
+
+  let panel = $state<HTMLDivElement | null>(null);
+
+  function requestClose() {
+    if (!dismissible) return;
+    open = false;
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      requestClose();
+      return;
+    }
+    if (event.key === 'Tab') trapFocus(event);
+  }
+
+  function trapFocus(event: KeyboardEvent) {
+    if (!panel) return;
+    const focusables = Array.from(
+      panel.querySelectorAll<HTMLElement>(FOCUSABLE),
+    ).filter((el) => el.getClientRects().length > 0);
+    if (focusables.length === 0) {
+      event.preventDefault();
+      panel.focus();
+      return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = document.activeElement;
+    const focusInside = panel.contains(active);
+    if (event.shiftKey && (!focusInside || active === first)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!focusInside || active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) requestClose();
+  }
+
+  $effect(() => {
+    if (!open) return;
+
+    const invoker = document.activeElement as HTMLElement | null;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', handleKeydown, true);
+
+    requestAnimationFrame(() => {
+      if (!panel || panel.contains(document.activeElement)) return;
+      const first = panel.querySelector<HTMLElement>(FOCUSABLE);
+      (first ?? panel).focus();
+    });
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener('keydown', handleKeydown, true);
+      if (invoker?.isConnected) invoker.focus();
+      onclose?.();
+    };
+  });
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div class="drawer-backdrop" onclick={handleBackdropClick}>
+    <div
+      bind:this={panel}
+      class="drawer-panel"
+      style:--drawer-w="{width}px"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+      aria-label={title ? undefined : t('modal.dialog')}
+      tabindex="-1"
+    >
+      {#if title || dismissible}
+        <div class="drawer-header">
+          {#if title}
+            <h2 class="drawer-title" id={titleId}>{title}</h2>
+          {/if}
+          {#if dismissible}
+            <button
+              type="button"
+              class="drawer-close"
+              aria-label={t('modal.closeDialog')}
+              onclick={requestClose}
+            >
+              <Icon name="close" size={16} />
+            </button>
+          {/if}
+        </div>
+      {/if}
+      <div class="drawer-body">
+        {@render children()}
+      </div>
+      {#if footer}
+        <div class="drawer-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 900;
+    display: flex;
+    justify-content: flex-end;
+    background: var(--overlay);
+    animation: drawer-fade var(--d-state) ease-out;
+  }
+  .drawer-panel {
+    width: min(var(--drawer-w), 100vw);
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    background: var(--float-bg);
+    border-radius: var(--r-lg) 0 0 var(--r-lg);
+    box-shadow: var(--shadow-float);
+    outline: none;
+    animation: drawer-slide var(--d-drawer) var(--ease-drawer) both;
+  }
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 20px 0;
+    flex-shrink: 0;
+  }
+  .drawer-title {
+    margin: 0;
+    font-size: var(--fs-title);
+    font-weight: 600;
+    color: var(--text);
+  }
+  .drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin-left: auto;
+    border: none;
+    border-radius: var(--r-sm);
+    background: transparent;
+    color: var(--text-3);
+    cursor: pointer;
+    transition:
+      background-color var(--d-state) ease,
+      color var(--d-state) ease;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .drawer-close:hover {
+      background: var(--bg-4);
+      color: var(--text);
+    }
+  }
+  .drawer-close:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+  .drawer-body {
+    padding: 14px 20px 20px;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--text);
+  }
+  .drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 20px 16px;
+    border-top: 1px solid var(--line);
+    flex-shrink: 0;
+  }
+  @keyframes drawer-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes drawer-slide {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+  /* 减少动态效果 (§五)：去位移，只留 ≤120ms 透明度 */
+  :global(:root[data-reduce='1']) .drawer-panel {
+    animation: drawer-fade var(--d-drawer) ease-out both;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-panel {
+      animation: drawer-fade var(--d-drawer) ease-out both;
+    }
+  }
+
+  @media (max-width: 760px) {
+    .drawer-panel {
+      width: 100vw;
+      border-radius: 0;
+    }
+  }
+</style>

calliope-web/src/lib/components/ui/icons.ts

@@ -51,6 +51,7 @@ export const icons = {
 	stop: '<rect x="5" y="5" width="14" height="14" rx="2"/>',
 	// Status
 	check: '<path d="M20 6 9 17l-5-5"/>',
+	star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>',
 	alert:
 		'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
 	info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',

calliope-web/src/lib/components/video/ClipMonitor.svelte

@@ -132,9 +132,7 @@ let {
 		min-height: 0;
 		width: 100%;
 		height: 100%;
-		background:
-			radial-gradient(ellipse at center, rgba(139, 92, 246, 0.08), transparent 55%),
-			#050508;
+		background: var(--stage-bg);
 		border: 1px solid var(--border);
 		border-radius: var(--radius-md);
 		overflow: hidden;

calliope-web/src/lib/components/video/PromptPreviewModal.svelte

@@ -79,14 +79,14 @@
 	let criticNotes = $state<string[]>([]);
 
 	const preview = createMutation({
-		mutationFn: async (vars?: { force?: boolean }) => {
+		mutationFn: async (vars: { force?: boolean } | void) => {
 			if (!clip && !scene) throw new Error(t('promptPreview.noClipSelected'));
 			return jobsApi.previewPrompt(projectId, {
 				clip_id: clip?.id,
 				scene_id: clip ? undefined : scene?.id,
 				workflow_id: workflow?.id,
 				input_values: compactInputValues(inputValues),
-				force: Boolean(vars?.force),
+				force: Boolean((vars as { force?: boolean } | undefined)?.force),
 			});
 		},
 		onSuccess: (data) => {

calliope-web/src/lib/components/video/SceneFilmstrip.svelte

@@ -203,7 +203,7 @@ title={t('filmstrip.clipTitle', {
 		inset: 0 0 auto 0;
 		height: 3px;
 		z-index: 1;
-		background: #3f3f46;
+		background: var(--bg-4);
 	}
 
 	.clip.status-done .bar {

calliope-web/src/lib/components/workbench/AssetsStagePanel.svelte

@@ -81,12 +81,12 @@
 			{#each draft as asset (asset.id)}
 				<div class="asset-edit">
 					<div class="asset-edit-head">
-						<select class="wb-input w-kind" bind:value={asset.kind}>
+						<select class="a-input w-kind" bind:value={asset.kind}>
 							<option value="character">{t('workbench.asset.kindCharacter')}</option>
 							<option value="location">{t('workbench.asset.kindLocation')}</option>
 							<option value="prop">{t('workbench.asset.kindProp')}</option>
 						</select>
-						<input class="wb-input name" bind:value={asset.name} placeholder={t('workbench.asset.namePh')} />
+						<input class="a-input name" bind:value={asset.name} placeholder={t('workbench.asset.namePh')} />
 						<button
 							type="button"
 							class="icon-btn danger"
@@ -96,15 +96,15 @@
 							<Icon name="trash" size={13} />
 						</button>
 					</div>
-					<input class="wb-input" bind:value={asset.description} placeholder={t('workbench.asset.descPh')} />
+					<input class="a-input" bind:value={asset.description} placeholder={t('workbench.asset.descPh')} />
 					<textarea
-						class="wb-input mono"
+						class="a-input mono"
 						rows="2"
 						bind:value={asset.prompt}
 						placeholder={t('workbench.asset.promptPh')}
 					></textarea>
 					<input
-						class="wb-input mono"
+						class="a-input mono"
 						bind:value={asset.negative_prompt}
 						placeholder={t('workbench.style.negativePh')}
 					/>
@@ -112,17 +112,17 @@
 			{/each}
 		</div>
 		<div class="editor-foot">
-			<button type="button" class="btn ghost" onclick={addAsset}>
+			<button type="button" class="a-btn ghost" onclick={addAsset}>
 				<Icon name="plus" size={13} />
 				{t('workbench.asset.add')}
 			</button>
 			<div class="foot-btns">
-				<button type="button" class="btn ghost" onclick={() => (editing = false)}>
+				<button type="button" class="a-btn ghost" onclick={() => (editing = false)}>
 					{t('workbench.cancelEdit')}
 				</button>
 				<button
 					type="button"
-					class="btn primary"
+					class="a-btn primary"
 					disabled={!draft.some((a) => a.name.trim() && a.prompt.trim())}
 					onclick={save}
 				>
@@ -135,7 +135,7 @@
 	<div class="todo-card">
 		<p class="todo-title">{t('workbench.asset.todoTitle')}</p>
 		<p class="todo-body">{t('workbench.asset.todoBody')}</p>
-		<button type="button" class="btn primary" disabled={busy} onclick={() => onRun?.()}>
+		<button type="button" class="a-btn primary" disabled={busy} onclick={() => onRun?.()}>
 			<Icon name="sparkle" size={14} />
 			{t('workbench.asset.generate')}
 		</button>
@@ -192,7 +192,7 @@
 					{/if}
 					<button
 						type="button"
-						class="btn ghost gen"
+						class="a-btn ghost sm"
 						disabled={busy || jobActive(asset.job)}
 						title={t('workbench.asset.generateHint')}
 						onclick={() =>
@@ -214,11 +214,11 @@
 		<span class="hint">{t('workbench.asset.summary', { n: assets.length })}</span>
 		<div class="foot-btns">
 			{#if stage.status !== 'running'}
-				<button type="button" class="btn ghost" disabled={busy} onclick={startEdit}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={startEdit}>
 					<Icon name="edit" size={13} />
 					{t('workbench.editDraft')}
 				</button>
-				<button type="button" class="btn ghost" disabled={busy} onclick={() => onRun?.()}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={() => onRun?.()}>
 					<Icon name="retry" size={13} />
 					{t('workbench.regenerate')}
 				</button>
@@ -378,34 +378,14 @@
 		gap: 8px;
 	}
 
-	.wb-input {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 8px 10px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 12.5px;
-		line-height: 1.6;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
-	.wb-input.mono {
+	.a-input.mono {
 		font-family: var(--font-a-mono);
 		font-size: 11.5px;
 	}
-	.wb-input.name {
+	.a-input.name {
 		font-weight: 600;
 	}
-	.wb-input.w-kind {
+	.a-input.w-kind {
 		width: 92px;
 		flex-shrink: 0;
 	}
@@ -432,44 +412,4 @@
 		color: var(--error);
 	}
 
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn.gen {
-		color: var(--accent);
-		border-color: var(--border-strong);
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
 </style>

calliope-web/src/lib/components/workbench/JobChip.svelte

@@ -83,7 +83,7 @@
 		width: 6px;
 		height: 6px;
 		border-radius: 50%;
-		background: var(--accent);
+		background: var(--run);
 		animation: wb-chip-breath 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
 	}
 	@keyframes wb-chip-breath {

calliope-web/src/lib/components/workbench/ScriptStagePanel.svelte

@@ -56,15 +56,15 @@
 			<blockquote class="idea-quote">{projectIdea}</blockquote>
 		{/if}
 		<div class="todo-actions">
-			<button type="button" class="btn primary" disabled={busy} onclick={() => onRun?.()}>
+			<button type="button" class="a-btn primary" disabled={busy} onclick={() => onRun?.()}>
 				<Icon name="sparkle" size={14} />
 				{t('workbench.script.generate')}
 			</button>
-			<button type="button" class="btn ghost" onclick={() => (importOpen = !importOpen)}>
+			<button type="button" class="a-btn ghost" onclick={() => (importOpen = !importOpen)}>
 				<Icon name="upload" size={14} />
 				{t('workbench.script.importBtn')}
 			</button>
-			<button type="button" class="btn ghost" onclick={startEdit}>
+			<button type="button" class="a-btn ghost" onclick={startEdit}>
 				<Icon name="edit" size={14} />
 				{t('workbench.script.writeManually')}
 			</button>
@@ -72,7 +72,7 @@
 		{#if importOpen}
 			<div class="import-box">
 				<textarea
-					class="wb-input"
+					class="a-input"
 					rows="8"
 					bind:value={importText}
 					placeholder={t('workbench.script.importPlaceholder')}
@@ -81,7 +81,7 @@
 					<span class="hint">{t('workbench.script.importHint')}</span>
 					<button
 						type="button"
-						class="btn primary sm"
+						class="a-btn primary sm"
 						disabled={importText.trim().length < 30}
 						onclick={doImport}
 					>
@@ -94,7 +94,7 @@
 {:else if editing}
 	<div class="editor">
 		<textarea
-			class="wb-input mono-area"
+			class="a-input mono-area"
 			rows="18"
 			bind:value={draft}
 			data-testid="script-editor"
@@ -102,12 +102,12 @@
 		<div class="editor-foot">
 			<span class="hint">{t('workbench.script.editorHint')}</span>
 			<div class="foot-btns">
-				<button type="button" class="btn ghost" onclick={() => (editing = false)}>
+				<button type="button" class="a-btn ghost" onclick={() => (editing = false)}>
 					{t('workbench.cancelEdit')}
 				</button>
 				<button
 					type="button"
-					class="btn primary"
+					class="a-btn primary"
 					disabled={draft.trim().length < 30}
 					onclick={save}
 				>
@@ -122,13 +122,13 @@
 		<span class="char-count mono">{t('workbench.charCount', { n: charCount })}</span>
 		<div class="foot-btns">
 			{#if stage.status !== 'running'}
-				<button type="button" class="btn ghost" disabled={busy} onclick={startEdit}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={startEdit}>
 					<Icon name="edit" size={13} />
 					{t('workbench.editDraft')}
 				</button>
 				<button
 					type="button"
-					class="btn ghost"
+					class="a-btn ghost"
 					disabled={busy}
 					onclick={() => onRun?.()}
 					title={t('workbench.regenerateHint')}
@@ -243,65 +243,5 @@
 		color: var(--text-3);
 	}
 
-	.wb-input {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 12px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 13px;
-		line-height: 1.7;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
 
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn.sm {
-		padding: 6px 12px;
-		font-size: 12px;
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
 </style>

calliope-web/src/lib/components/workbench/ShotStagePanel.svelte

@@ -74,9 +74,9 @@
 			{#each draft as shot (shot.id)}
 				<div class="vshot-edit">
 					<div class="vshot-edit-head">
-						<input class="wb-input w-no mono" bind:value={shot.shot_no} placeholder={t('workbench.vshot.noPh')} />
+						<input class="a-input w-no mono" bind:value={shot.shot_no} placeholder={t('workbench.vshot.noPh')} />
 						<input
-							class="wb-input w-dur mono"
+							class="a-input w-dur mono"
 							type="number"
 							min="1"
 							step="1"
@@ -92,9 +92,9 @@
 							<Icon name="trash" size={13} />
 						</button>
 					</div>
-					<input class="wb-input" bind:value={shot.description} placeholder={t('workbench.vshot.descPh')} />
+					<input class="a-input" bind:value={shot.description} placeholder={t('workbench.vshot.descPh')} />
 					<textarea
-						class="wb-input mono"
+						class="a-input mono"
 						rows="3"
 						bind:value={shot.prompt}
 						placeholder={t('workbench.vshot.promptPh')}
@@ -103,17 +103,17 @@
 			{/each}
 		</div>
 		<div class="editor-foot">
-			<button type="button" class="btn ghost" onclick={addShot}>
+			<button type="button" class="a-btn ghost" onclick={addShot}>
 				<Icon name="plus" size={13} />
 				{t('workbench.vshot.add')}
 			</button>
 			<div class="foot-btns">
-				<button type="button" class="btn ghost" onclick={() => (editing = false)}>
+				<button type="button" class="a-btn ghost" onclick={() => (editing = false)}>
 					{t('workbench.cancelEdit')}
 				</button>
 				<button
 					type="button"
-					class="btn primary"
+					class="a-btn primary"
 					disabled={!draft.some((s) => s.prompt.trim())}
 					onclick={save}
 				>
@@ -126,7 +126,7 @@
 	<div class="todo-card">
 		<p class="todo-title">{t('workbench.vshot.todoTitle')}</p>
 		<p class="todo-body">{t('workbench.vshot.todoBody')}</p>
-		<button type="button" class="btn primary" disabled={busy} onclick={() => onRun?.()}>
+		<button type="button" class="a-btn primary" disabled={busy} onclick={() => onRun?.()}>
 			<Icon name="sparkle" size={14} />
 			{t('workbench.vshot.generate')}
 		</button>
@@ -180,7 +180,7 @@
 					{/if}
 					<button
 						type="button"
-						class="btn ghost gen"
+						class="a-btn ghost sm"
 						disabled={busy || jobActive(shot.job)}
 						title={t('workbench.vshot.generateHint')}
 						onclick={() =>
@@ -202,11 +202,11 @@
 		<span class="hint">{t('workbench.vshot.summary', { n: shots.length })}</span>
 		<div class="foot-btns">
 			{#if stage.status !== 'running'}
-				<button type="button" class="btn ghost" disabled={busy} onclick={startEdit}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={startEdit}>
 					<Icon name="edit" size={13} />
 					{t('workbench.editDraft')}
 				</button>
-				<button type="button" class="btn ghost" disabled={busy} onclick={() => onRun?.()}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={() => onRun?.()}>
 					<Icon name="retry" size={13} />
 					{t('workbench.regenerate')}
 				</button>
@@ -260,9 +260,10 @@
 		flex-wrap: wrap;
 	}
 	.vshot-no {
-		font-size: 13px;
+		font-family: var(--mono);
+		font-size: var(--fs-body);
 		font-weight: 700;
-		color: var(--accent);
+		color: var(--accent-lo);
 		font-variant-numeric: tabular-nums;
 	}
 	.vshot-dur {
@@ -279,9 +280,9 @@
 	.vshot-video {
 		width: 100%;
 		max-height: 300px;
-		border-radius: 8px;
-		border: 1px solid var(--border);
-		background: #000;
+		border-radius: var(--r-md);
+		border: 1px solid var(--line);
+		background: var(--media-scrim);
 	}
 	.vshot-foot {
 		display: flex;
@@ -347,35 +348,15 @@
 		gap: 8px;
 	}
 
-	.wb-input {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 8px 10px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 12.5px;
-		line-height: 1.6;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
-	.wb-input.mono {
+	.a-input.mono {
 		font-family: var(--font-a-mono);
 		font-size: 11.5px;
 	}
-	.wb-input.w-no {
+	.a-input.w-no {
 		width: 90px;
 		flex-shrink: 0;
 	}
-	.wb-input.w-dur {
+	.a-input.w-dur {
 		width: 110px;
 		flex-shrink: 0;
 	}
@@ -403,44 +384,4 @@
 		color: var(--error);
 	}
 
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn.gen {
-		color: var(--accent);
-		border-color: var(--border-strong);
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
 </style>

calliope-web/src/lib/components/workbench/StageStepper.svelte

@@ -50,7 +50,7 @@
 	function stateLabel(stage: WorkbenchStage): string {
 		const s = stateOf(stage);
 		if (s === 'running') return t('workbench.state.running');
-		if (s === 'confirmed') return t('workbench.state.confirmed');
+		if (s === 'confirmed') return `✓ ${t('workbench.state.confirmed')}`;
 		if (s === 'edited') return t('workbench.state.edited');
 		if (s === 'draft') return t('workbench.state.draft');
 		return t('workbench.state.todo');
@@ -144,6 +144,14 @@
 	.step-btn.active {
 		background: var(--surface-2);
 		border-color: var(--border-strong);
+		/* §3.2 当前段：金色下划 2px 内阴影 + 段名金色。 */
+		box-shadow: inset 0 -2px 0 var(--accent);
+	}
+	.step-btn.active .step-name {
+		color: var(--accent);
+	}
+	.step-btn[data-state='confirmed']:not(.active) .step-name {
+		color: var(--success);
 	}
 	.step-btn.locked {
 		opacity: 0.55;

calliope-web/src/lib/components/workbench/StoryboardStagePanel.svelte

@@ -71,11 +71,11 @@
 						</button>
 					</div>
 					<div class="shot-fields">
-						<input class="wb-input w-xs" bind:value={shot.scene} placeholder={t('workbench.board.scene')} />
-						<input class="wb-input w-xs" bind:value={shot.shot_size} placeholder={t('workbench.board.size')} />
-						<input class="wb-input w-xs" bind:value={shot.camera} placeholder={t('workbench.board.camera')} />
+						<input class="a-input w-xs" bind:value={shot.scene} placeholder={t('workbench.board.scene')} />
+						<input class="a-input w-xs" bind:value={shot.shot_size} placeholder={t('workbench.board.size')} />
+						<input class="a-input w-xs" bind:value={shot.camera} placeholder={t('workbench.board.camera')} />
 						<input
-							class="wb-input w-xs mono"
+							class="a-input w-xs mono"
 							type="number"
 							min="0.5"
 							step="0.5"
@@ -84,27 +84,27 @@
 						/>
 					</div>
 					<textarea
-						class="wb-input"
+						class="a-input"
 						rows="2"
 						bind:value={shot.description}
 						placeholder={t('workbench.board.descPh')}
 					></textarea>
-					<input class="wb-input" bind:value={shot.dialog} placeholder={t('workbench.board.dialogPh')} />
+					<input class="a-input" bind:value={shot.dialog} placeholder={t('workbench.board.dialogPh')} />
 				</div>
 			{/each}
 		</div>
 		<div class="editor-foot">
-			<button type="button" class="btn ghost" onclick={addShot}>
+			<button type="button" class="a-btn ghost" onclick={addShot}>
 				<Icon name="plus" size={13} />
 				{t('workbench.board.add')}
 			</button>
 			<div class="foot-btns">
-				<button type="button" class="btn ghost" onclick={() => (editing = false)}>
+				<button type="button" class="a-btn ghost" onclick={() => (editing = false)}>
 					{t('workbench.cancelEdit')}
 				</button>
 				<button
 					type="button"
-					class="btn primary"
+					class="a-btn primary"
 					disabled={!draft.some((s) => s.description.trim())}
 					onclick={save}
 				>
@@ -117,7 +117,7 @@
 	<div class="todo-card">
 		<p class="todo-title">{t('workbench.board.todoTitle')}</p>
 		<p class="todo-body">{t('workbench.board.todoBody')}</p>
-		<button type="button" class="btn primary" disabled={busy} onclick={() => onRun?.()}>
+		<button type="button" class="a-btn primary" disabled={busy} onclick={() => onRun?.()}>
 			<Icon name="sparkle" size={14} />
 			{t('workbench.board.generate')}
 		</button>
@@ -149,11 +149,11 @@
 		<span class="hint mono">{t('workbench.board.summary', { n: shots.length, sec: totalDuration })}</span>
 		<div class="foot-btns">
 			{#if stage.status !== 'running'}
-				<button type="button" class="btn ghost" disabled={busy} onclick={startEdit}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={startEdit}>
 					<Icon name="edit" size={13} />
 					{t('workbench.editDraft')}
 				</button>
-				<button type="button" class="btn ghost" disabled={busy} onclick={() => onRun?.()}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={() => onRun?.()}>
 					<Icon name="retry" size={13} />
 					{t('workbench.regenerate')}
 				</button>
@@ -282,31 +282,11 @@
 		flex-wrap: wrap;
 		gap: 8px;
 	}
-	.wb-input {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 8px 10px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 12.5px;
-		line-height: 1.6;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
-	.wb-input.mono {
+	.a-input.mono {
 		font-family: var(--font-a-mono);
 		font-size: 11.5px;
 	}
-	.wb-input.w-xs {
+	.a-input.w-xs {
 		width: 110px;
 		flex: 1;
 		min-width: 96px;
@@ -356,40 +336,4 @@
 		color: var(--error);
 	}
 
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
 </style>

calliope-web/src/lib/components/workbench/StyleStagePanel.svelte

@@ -67,7 +67,7 @@
 			<div class="dir-edit">
 				<div class="dir-edit-head">
 					<span class="dir-index mono">{i + 1}</span>
-					<input class="wb-input name" bind:value={dir.name} placeholder={t('workbench.style.namePh')} />
+					<input class="a-input name" bind:value={dir.name} placeholder={t('workbench.style.namePh')} />
 					<button
 						type="button"
 						class="icon-btn danger"
@@ -78,35 +78,35 @@
 					</button>
 				</div>
 				<input
-					class="wb-input"
+					class="a-input"
 					bind:value={dir.description}
 					placeholder={t('workbench.style.descPh')}
 				/>
 				<textarea
-					class="wb-input mono"
+					class="a-input mono"
 					rows="2"
 					bind:value={dir.prompt}
 					placeholder={t('workbench.style.promptPh')}
 				></textarea>
 				<input
-					class="wb-input mono"
+					class="a-input mono"
 					bind:value={dir.negative_prompt}
 					placeholder={t('workbench.style.negativePh')}
 				/>
 			</div>
 		{/each}
 		<div class="editor-foot">
-			<button type="button" class="btn ghost" onclick={addDirection}>
+			<button type="button" class="a-btn ghost" onclick={addDirection}>
 				<Icon name="plus" size={13} />
 				{t('workbench.style.add')}
 			</button>
 			<div class="foot-btns">
-				<button type="button" class="btn ghost" onclick={() => (editing = false)}>
+				<button type="button" class="a-btn ghost" onclick={() => (editing = false)}>
 					{t('workbench.cancelEdit')}
 				</button>
 				<button
 					type="button"
-					class="btn primary"
+					class="a-btn primary"
 					disabled={draft.filter((d) => d.name.trim() && d.prompt.trim()).length < 2}
 					onclick={save}
 				>
@@ -119,7 +119,7 @@
 	<div class="todo-card">
 		<p class="todo-title">{t('workbench.style.todoTitle')}</p>
 		<p class="todo-body">{t('workbench.style.todoBody')}</p>
-		<button type="button" class="btn primary" disabled={busy} onclick={() => onRun?.()}>
+		<button type="button" class="a-btn primary" disabled={busy} onclick={() => onRun?.()}>
 			<Icon name="sparkle" size={14} />
 			{t('workbench.style.generate')}
 		</button>
@@ -153,11 +153,11 @@
 		<span class="hint">{t('workbench.style.chooseHint')}</span>
 		<div class="foot-btns">
 			{#if stage.status !== 'running'}
-				<button type="button" class="btn ghost" disabled={busy} onclick={startEdit}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={startEdit}>
 					<Icon name="edit" size={13} />
 					{t('workbench.editDraft')}
 				</button>
-				<button type="button" class="btn ghost" disabled={busy} onclick={() => onRun?.()}>
+				<button type="button" class="a-btn ghost" disabled={busy} onclick={() => onRun?.()}>
 					<Icon name="retry" size={13} />
 					{t('workbench.regenerate')}
 				</button>
@@ -295,31 +295,11 @@
 		gap: 8px;
 	}
 
-	.wb-input {
-		width: 100%;
-		box-sizing: border-box;
-		padding: 8px 10px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 12.5px;
-		line-height: 1.6;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
-	.wb-input.mono {
+	.a-input.mono {
 		font-family: var(--font-a-mono);
 		font-size: 11.5px;
 	}
-	.wb-input.name {
+	.a-input.name {
 		font-weight: 600;
 	}
 
@@ -345,40 +325,4 @@
 		color: var(--error);
 	}
 
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 8px 14px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
 </style>

calliope-web/src/lib/components/workflows/WorkflowBatchImportWizard.svelte

@@ -0,0 +1,908 @@
+<script lang="ts">
+	import Drawer from '$lib/components/ui/Drawer.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import {
+		apiErrorMessage,
+		workflows,
+		type ComfyEndpoint,
+		type WorkflowConvertFileReport,
+		type WorkflowConvertReport,
+		type WorkflowImportResult,
+		type WorkflowUIFileInput,
+		type WorkflowUsage,
+	} from '$lib/api';
+	import { WORKFLOW_USAGES } from '$lib/comfy/types';
+	import { t } from '$lib/i18n.svelte';
+	import { toast } from '$lib/toast';
+
+	/**
+	 * 批量导入向导 (HEL-682 / S4)：扫描服务器目录或选择多个本地文件 →
+	 * dry-run 逐文件预检报告（ok / warn / fail / 需人工确认，含建议元数据）→
+	 * 确认后提交导入。warn 项可补充用途后以启用状态入库；fail 与需人工确认项
+	 * 不会被导入，也不得被标作可运行。重复导入按内容去重，全部跳过。
+	 */
+	interface Props {
+		open?: boolean;
+		endpoints: ComfyEndpoint[];
+		onimported?: () => void;
+	}
+
+	let { open = $bindable(false), endpoints, onimported }: Props = $props();
+
+	type Step = 'source' | 'report' | 'result';
+
+	let step = $state<Step>('source');
+	let mode = $state<'scan' | 'files'>('scan');
+	let scanRoot = $state('example_ComfyUI_workflows');
+	let preflightId = $state('');
+	let inputFiles = $state<WorkflowUIFileInput[]>([]);
+	let nonUiSkipped = $state<string[]>([]);
+	let reading = $state(false);
+	let running = $state(false);
+	let importing = $state(false);
+	let error = $state('');
+	let report = $state<WorkflowConvertReport | null>(null);
+	let result = $state<WorkflowImportResult | null>(null);
+	let usageApplied = $state(0);
+	/** Per-file usage chosen in the report step, keyed by name\0source_path. */
+	let usageBy = $state<Record<string, WorkflowUsage>>({});
+	/** Files the user un-checked (file-picker mode only). */
+	let excludedKeys = $state<Set<string>>(new Set());
+	let rSearch = $state('');
+	let rFilter = $state<'all' | 'warn' | 'blocked'>('all');
+	let expandedIssues = $state<Set<string>>(new Set());
+	let visible = $state(60);
+	let fileInput = $state<HTMLInputElement | null>(null);
+
+	function rk(f: { name: string; source_path: string | null }): string {
+		return `${f.name}\u0000${f.source_path ?? ''}`;
+	}
+
+	function reset() {
+		step = 'source';
+		inputFiles = [];
+		nonUiSkipped = [];
+		report = null;
+		result = null;
+		usageApplied = 0;
+		usageBy = {};
+		excludedKeys = new Set();
+		rSearch = '';
+		rFilter = 'all';
+		expandedIssues = new Set();
+		visible = 60;
+		error = '';
+	}
+
+	function usageLabel(u: WorkflowUsage | null | undefined): string {
+		return u ? t(`usage.${u}`) : t('usage.pending');
+	}
+
+	function mediaIcon(kind: string): 'image' | 'film' | 'music' {
+		if (kind === 'video') return 'film';
+		if (kind === 'audio') return 'music';
+		return 'image';
+	}
+
+	function mediaTitle(kind: string): string {
+		if (kind === 'video') return t('wl.mediaVideo');
+		if (kind === 'audio') return t('wl.mediaAudio');
+		return t('wl.mediaImage');
+	}
+
+	async function readPickedFiles(list: FileList | null) {
+		if (!list?.length) return;
+		reading = true;
+		error = '';
+		try {
+			const items: WorkflowUIFileInput[] = [];
+			const skipped: string[] = [];
+			for (const file of Array.from(list)) {
+				try {
+					const data = JSON.parse(await file.text());
+					if (!(data && typeof data === 'object' && Array.isArray(data.nodes))) {
+						skipped.push(file.name);
+						continue;
+					}
+					items.push({
+						name: file.name.replace(/\.json$/i, ''),
+						source_path: file.name,
+						workflow_json: data,
+					});
+				} catch {
+					skipped.push(file.name);
+				}
+			}
+			inputFiles = items;
+			nonUiSkipped = skipped;
+		} finally {
+			reading = false;
+			if (fileInput) fileInput.value = '';
+		}
+	}
+
+	async function runDryRun() {
+		running = true;
+		error = '';
+		try {
+			let res: WorkflowConvertReport;
+			if (mode === 'scan') {
+				res = await workflows.importScanDry(scanRoot.trim() || 'example_ComfyUI_workflows');
+				inputFiles = [];
+				nonUiSkipped = [];
+			} else {
+				if (inputFiles.length === 0) {
+					error = t('wiz.noFiles');
+					return;
+				}
+				res = await workflows.convert(
+					inputFiles,
+					preflightId ? { endpoint_id: preflightId } : undefined,
+				);
+			}
+			report = res;
+			usageBy = {};
+			excludedKeys = new Set(res.files.filter((f) => !f.importable).map((f) => rk(f)));
+			rSearch = '';
+			rFilter = 'all';
+			expandedIssues = new Set();
+			visible = 60;
+			step = 'report';
+		} catch (err) {
+			error = apiErrorMessage(err);
+		} finally {
+			running = false;
+		}
+	}
+
+	const selectedCount = $derived(
+		report
+			? mode === 'files'
+				? report.files.filter((f) => f.importable && !excludedKeys.has(rk(f))).length
+				: report.importable
+			: 0,
+	);
+	const blockedCount = $derived(
+		report ? report.files.filter((f) => !f.importable).length : 0,
+	);
+
+	const filteredFiles = $derived.by(() => {
+		if (!report) return [];
+		const q = rSearch.trim().toLowerCase();
+		return report.files.filter((f) => {
+			if (rFilter === 'warn' && f.status !== 'warn') return false;
+			if (rFilter === 'blocked' && f.importable) return false;
+			if (!q) return true;
+			return (
+				f.name.toLowerCase().includes(q) ||
+				(f.source_path ?? '').toLowerCase().includes(q) ||
+				(f.suggested?.model_family ?? '').toLowerCase().includes(q)
+			);
+		});
+	});
+
+	function needsUsagePick(f: WorkflowConvertFileReport): boolean {
+		return Boolean(f.importable && (!f.suggested?.usage || f.suggested.usage_ambiguous));
+	}
+
+	function setUsage(f: WorkflowConvertFileReport, usage: string) {
+		const key = rk(f);
+		if (usage) usageBy = { ...usageBy, [key]: usage as WorkflowUsage };
+		else {
+			const next = { ...usageBy };
+			delete next[key];
+			usageBy = next;
+		}
+	}
+
+	function toggleIssue(f: WorkflowConvertFileReport) {
+		const key = rk(f);
+		const next = new Set(expandedIssues);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		expandedIssues = next;
+	}
+
+	function skipText(reason: string | null | undefined): string {
+		if (reason === 'conflict') return t('wiz.conflict');
+		return reason ?? '';
+	}
+
+	async function runImport() {
+		if (!report) return;
+		importing = true;
+		error = '';
+		try {
+			let res: WorkflowImportResult;
+			if (mode === 'files') {
+				const files = inputFiles
+					.map((item, i) => ({ item, f: report!.files[i] }))
+					.filter(({ f }) => f?.importable && !excludedKeys.has(rk(f)))
+					.map(({ item, f }) => {
+						const usage = usageBy[rk(f)];
+						return usage ? { ...item, usage } : item;
+					});
+				res = await workflows.importBatch(files);
+			} else {
+				res = await workflows.importScanCommit(scanRoot.trim() || 'example_ComfyUI_workflows');
+			}
+			result = res;
+			// Directory commits import everything found server-side; usage
+			// choices from the report step are applied to the fresh rows here.
+			if (mode === 'scan') {
+				let applied = 0;
+				for (const f of res.files) {
+					const usage = usageBy[rk(f)];
+					if (f.result === 'imported' && f.id != null && usage) {
+						try {
+							await workflows.update(f.id, {
+								usage,
+								usage_source: 'user',
+								is_enabled: true,
+							});
+							applied++;
+						} catch {
+							try {
+								await workflows.update(f.id, { usage, usage_source: 'user' });
+								applied++;
+							} catch {
+								/* keep the imported row, skip the override */
+							}
+						}
+					}
+				}
+				usageApplied = applied;
+			}
+			step = 'result';
+			onimported?.();
+			if (res.imported > 0) toast.success(t('wiz.importedToast', { n: res.imported }));
+		} catch (err) {
+			error = apiErrorMessage(err);
+		} finally {
+			importing = false;
+		}
+	}
+</script>
+
+<Drawer bind:open title={t('wiz.title')} width={780} onclose={reset}>
+	<ol class="wz-steps" aria-label={t('wiz.title')}>
+		<li class:active={step === 'source'} class:done={step !== 'source'}>
+			<span class="wz-step-n">1</span>{t('wiz.stepSource')}
+		</li>
+		<li class:active={step === 'report'} class:done={step === 'result'}>
+			<span class="wz-step-n">2</span>{t('wiz.stepReport')}
+		</li>
+		<li class:active={step === 'result'}>
+			<span class="wz-step-n">3</span>{t('wiz.stepResult')}
+		</li>
+	</ol>
+
+	{#if error}
+		<div class="wz-error" role="alert">
+			<Icon name="alert" size={14} />
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	{#if step === 'source'}
+		<div class="seg wz-mode" role="radiogroup" aria-label={t('wiz.sourceLabel')}>
+			<button
+				type="button"
+				class="seg-item"
+				class:selected={mode === 'scan'}
+				aria-pressed={mode === 'scan'}
+				onclick={() => (mode = 'scan')}
+			>
+				<Icon name="folder" size={14} />
+				{t('wiz.modeScan')}
+			</button>
+			<button
+				type="button"
+				class="seg-item"
+				class:selected={mode === 'files'}
+				aria-pressed={mode === 'files'}
+				onclick={() => (mode = 'files')}
+			>
+				<Icon name="upload" size={14} />
+				{t('wiz.modeFiles')}
+			</button>
+		</div>
+
+		{#if mode === 'scan'}
+			<label class="wz-field">
+				<span class="wz-label">{t('wiz.rootLabel')}</span>
+				<input
+					class="a-input wz-root"
+					value={scanRoot}
+					spellcheck="false"
+					oninput={(e) => (scanRoot = e.currentTarget.value)}
+					placeholder="example_ComfyUI_workflows"
+				/>
+				<span class="wz-hint">{t('wiz.rootHint')}</span>
+			</label>
+		{:else}
+			<div class="wz-field">
+				<span class="wz-label">{t('wiz.pickFiles')}</span>
+				<button type="button" class="a-btn secondary" onclick={() => fileInput?.click()}>
+					<Icon name="upload" size={14} />
+					{t('wiz.pickFilesBtn')}
+				</button>
+				<input
+					bind:this={fileInput}
+					type="file"
+					accept=".json,application/json"
+					multiple
+					class="wz-file-hidden"
+					onchange={(e) => void readPickedFiles(e.currentTarget.files)}
+				/>
+				<span class="wz-hint">{t('wiz.pickFilesHint')}</span>
+				{#if reading}
+					<p class="wz-read">{t('common.loading')}…</p>
+				{/if}
+				{#if inputFiles.length}
+					<p class="wz-read ok">
+						<Icon name="check" size={13} />
+						{t('wiz.parsed', { n: inputFiles.length })}
+					</p>
+				{/if}
+				{#if nonUiSkipped.length}
+					<p class="wz-read bad">
+						<Icon name="alert" size={13} />
+						{t('wiz.notUi', { n: nonUiSkipped.length })}
+					</p>
+				{/if}
+			</div>
+		{/if}
+
+		{#if mode === 'files' && endpoints.length > 0}
+			<label class="wz-field">
+				<span class="wz-label">{t('wiz.preflight')}</span>
+				<select class="a-select wz-preflight" value={preflightId} onchange={(e) => (preflightId = e.currentTarget.value)}>
+					<option value="">{t('wiz.preflightNone')}</option>
+					{#each endpoints as ep (ep.id)}
+						<option value={ep.id}>{ep.name}</option>
+					{/each}
+				</select>
+				<span class="wz-hint">{t('wiz.preflightHint')}</span>
+			</label>
+		{/if}
+	{:else if step === 'report' && report}
+		<div class="wz-summary">
+			<span class="wz-chip">{t('wiz.total', { n: report.total })}</span>
+			<span class="wz-chip ok">{t('wiz.ok', { n: report.ok })}</span>
+			<span class="wz-chip warn">{t('wiz.warn', { n: report.warn })}</span>
+			<span class="wz-chip fail">{t('wiz.fail', { n: report.fail })}</span>
+			<span class="wz-chip confirm">{t('wiz.confirmCount', { n: report.needs_confirmation })}</span>
+			<span class="wz-chip importable">{t('wiz.importable', { n: report.importable })}</span>
+		</div>
+		<p class="wz-note">{t('wiz.reportHint')}</p>
+
+		<div class="wz-toolbar">
+			<div class="filters" role="group" aria-label={t('wiz.filterLabel')}>
+				<button type="button" class="a-chip" class:sel={rFilter === 'all'} aria-pressed={rFilter === 'all'} onclick={() => (rFilter = 'all')}>
+					{t('wl.filterAll')}
+				</button>
+				<button type="button" class="a-chip" class:sel={rFilter === 'warn'} aria-pressed={rFilter === 'warn'} onclick={() => (rFilter = 'warn')}>
+					{t('wiz.filterWarn')}
+				</button>
+				<button type="button" class="a-chip" class:sel={rFilter === 'blocked'} aria-pressed={rFilter === 'blocked'} onclick={() => (rFilter = 'blocked')}>
+					{t('wiz.filterBlocked')}
+				</button>
+			</div>
+			<input
+				class="a-input wz-search"
+				value={rSearch}
+				oninput={(e) => (rSearch = e.currentTarget.value)}
+				placeholder={t('wiz.searchPh')}
+				aria-label={t('wiz.searchPh')}
+			/>
+		</div>
+
+		<div class="wz-list">
+			{#each filteredFiles.slice(0, visible) as f (rk(f))}
+				<div class="wz-row" class:blocked={!f.importable}>
+					{#if mode === 'files'}
+						<input
+							type="checkbox"
+							class="wz-check"
+							aria-label={t('wiz.includeAria', { name: f.name })}
+							disabled={!f.importable}
+							checked={f.importable && !excludedKeys.has(rk(f))}
+							onchange={(e) => {
+								const next = new Set(excludedKeys);
+								if (e.currentTarget.checked) next.delete(rk(f));
+								else next.add(rk(f));
+								excludedKeys = next;
+							}}
+						/>
+					{/if}
+					<span class="wz-dot {f.status}" title={f.status}></span>
+					<div class="wz-main">
+						<div class="wz-line">
+							<span class="wz-name" title={f.suggested?.description ?? f.name}>{f.name}</span>
+							{#if f.suggested?.model_family}
+								<span class="tag tag-usage">{f.suggested.model_family}</span>
+							{/if}
+							{#if f.suggested}
+								<span class="tag tag-usage">{usageLabel(f.suggested.usage)}</span>
+								<span class="wz-media" aria-hidden="true">
+									{#each f.suggested.media_in as m (m)}
+										<span class="wz-m" title={mediaTitle(m)}><Icon name={mediaIcon(m)} size={12} /></span>
+									{/each}
+									{#if f.suggested.media_out.length}
+										<span class="wz-arrow">→</span>
+										{#each f.suggested.media_out as m (m)}
+											<span class="wz-m" title={mediaTitle(m)}><Icon name={mediaIcon(m)} size={12} /></span>
+										{/each}
+									{/if}
+								</span>
+							{/if}
+							{#if f.status === 'warn'}
+								<span class="tag tag-warn">{t('wiz.warnTag')}</span>
+							{/if}
+							{#if f.needs_confirmation}
+								<span class="tag tag-error">{t('wiz.confirmTag')}</span>
+							{/if}
+							{#if f.preflight && !f.preflight.ok}
+								<span class="tag tag-error" title={f.preflight.findings.map((x) => x.message).join('\n')}>
+									{t('wiz.preflightTag')}
+								</span>
+							{/if}
+						</div>
+						{#if f.source_path}
+							<div class="wz-path mono">{f.source_path}</div>
+						{/if}
+						{#if !f.importable && f.skip_reason}
+							<div class="wz-skip">{t('wiz.skipReason', { reason: skipText(f.skip_reason) })}</div>
+						{/if}
+						{#if needsUsagePick(f)}
+							<label class="wz-usage">
+								<span>{t('wiz.usagePick')}</span>
+								<select
+									class="a-select wz-usage-select"
+									value={usageBy[rk(f)] ?? ''}
+									onchange={(e) => setUsage(f, e.currentTarget.value)}
+								>
+									<option value="">{t('wiz.usageNone')}</option>
+									{#each WORKFLOW_USAGES as u (u)}
+										<option value={u}>{usageLabel(u)}</option>
+									{/each}
+								</select>
+							</label>
+						{/if}
+						{#if f.issues.length}
+							<button type="button" class="wz-issues-toggle" onclick={() => toggleIssue(f)} aria-expanded={expandedIssues.has(rk(f))}>
+								<Icon name="alert" size={12} />
+								{t('wiz.issues', { n: f.issues.length })}
+							</button>
+							{#if expandedIssues.has(rk(f))}
+								<ul class="wz-issues">
+									{#each f.issues as iss, i (`${rk(f)}#${i}`)}
+										<li class="lvl-{iss.level}">
+											<span class="mono">{iss.node_id}</span>
+											{iss.message}
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+		{#if filteredFiles.length > visible}
+			<button type="button" class="a-btn ghost wz-more" onclick={() => (visible += 100)}>
+				{t('wl.moreCount', { n: Math.min(100, filteredFiles.length - visible), m: filteredFiles.length })}
+			</button>
+		{/if}
+	{:else if step === 'result' && result}
+		<div class="wz-summary">
+			<span class="wz-chip ok">{t('wiz.imported', { n: result.imported })}</span>
+			<span class="wz-chip">{t('wiz.skipped', { n: result.skipped })}</span>
+			{#if result.files.some((f) => f.result === 'failed')}
+				<span class="wz-chip fail">{t('wiz.fail', { n: result.files.filter((f) => f.result === 'failed').length })}</span>
+			{/if}
+		</div>
+		<p class="wz-note">{t('wiz.resultNote')}</p>
+		{#if usageApplied > 0}
+			<p class="wz-note ok">{t('wiz.usageApplied', { n: usageApplied })}</p>
+		{/if}
+		<div class="wz-list">
+			{#each result.files as f (rk(f))}
+				<div class="wz-row">
+					<span class="wz-dot {f.result === 'imported' ? 'ok' : f.result === 'failed' ? 'fail' : 'warn'}"></span>
+					<div class="wz-main">
+						<div class="wz-line">
+							<span class="wz-name">{f.name}</span>
+							{#if f.result === 'imported'}
+								<span class="tag tag-ok">
+									<Icon name="check" size={12} />
+									{t('wiz.importedTag', { id: f.id ?? '?' })}
+								</span>
+							{:else if f.skip_reason === 'conflict' || f.result === 'skipped'}
+								<span class="tag tag-usage">{skipText(f.skip_reason)}</span>
+							{:else}
+								<span class="tag tag-error">{skipText(f.skip_reason)}</span>
+							{/if}
+						</div>
+						{#if f.source_path}
+							<div class="wz-path mono">{f.source_path}</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#snippet footer()}
+		{#if step === 'source'}
+			<Button variant="secondary" onclick={() => (open = false)}>{t('common.cancel')}</Button>
+			<Button variant="primary" loading={running} disabled={reading} onclick={() => void runDryRun()}>
+				{running ? t('wiz.running') : t('wiz.runDry')}
+			</Button>
+		{:else if step === 'report'}
+			<span class="wz-footer-note">
+				{t('wiz.selectedN', { n: selectedCount })}
+				{#if blockedCount}· {t('wiz.excludedM', { m: blockedCount })}{/if}
+			</span>
+			<Button variant="secondary" disabled={importing} onclick={() => (step = 'source')}>{t('wiz.back')}</Button>
+			<Button variant="primary" loading={importing} disabled={selectedCount === 0} onclick={() => void runImport()}>
+				{importing ? t('wiz.importing') : t('wiz.import')}
+			</Button>
+		{:else}
+			<Button variant="secondary" onclick={() => { reset(); step = 'source'; }}>{t('wiz.again')}</Button>
+			<Button variant="primary" onclick={() => (open = false)}>{t('wiz.done')}</Button>
+		{/if}
+	{/snippet}
+</Drawer>
+
+<style>
+	.wz-steps {
+		display: flex;
+		gap: 6px;
+		list-style: none;
+		padding: 0;
+		margin: 0 0 14px;
+	}
+	.wz-steps li {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 7px;
+		padding: 8px 10px;
+		border-radius: 8px;
+		border: 1px solid var(--border);
+		background: var(--surface-2);
+		color: var(--text-3);
+		font-size: 12px;
+	}
+	.wz-steps li.active {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: var(--accent-dim);
+		font-weight: 600;
+	}
+	.wz-steps li.done {
+		color: var(--text-2);
+	}
+	.wz-step-n {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		border: 1px solid currentColor;
+		font-size: 10.5px;
+		flex-shrink: 0;
+	}
+	.wz-error {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		margin-bottom: 12px;
+		padding: 9px 12px;
+		border-radius: 7px;
+		background: var(--error-dim);
+		color: var(--text-2);
+		font-size: 12px;
+	}
+	.wz-error :global(.icon) {
+		color: var(--error);
+		flex-shrink: 0;
+		margin-top: 1px;
+	}
+	.wz-mode {
+		margin-bottom: 14px;
+	}
+	.seg {
+		display: flex;
+		gap: 6px;
+	}
+	.seg-item {
+		flex: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 6px;
+		text-align: center;
+		padding: 8px 6px;
+		border-radius: 7px;
+		border: 1px solid var(--border);
+		background: var(--surface-2);
+		font-size: 12.5px;
+		color: var(--text-2);
+		cursor: pointer;
+		font-family: inherit;
+	}
+	.seg-item.selected {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: var(--accent-dim);
+		font-weight: 600;
+	}
+	.wz-field {
+		display: block;
+		margin-bottom: 14px;
+	}
+	.wz-label {
+		display: block;
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--text-2);
+		margin-bottom: 6px;
+	}
+	.wz-root,
+	.wz-preflight,
+	.wz-search {
+		width: 100%;
+		box-sizing: border-box;
+	}
+	.wz-hint {
+		display: block;
+		margin-top: 5px;
+		font-size: 11px;
+		color: var(--text-3);
+		line-height: 1.6;
+	}
+	.wz-file-hidden {
+		display: none;
+	}
+	.wz-read {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin: 8px 0 0;
+		font-size: 12px;
+		color: var(--text-2);
+	}
+	.wz-read.ok {
+		color: var(--success);
+	}
+	.wz-read.bad {
+		color: var(--warn);
+	}
+	.wz-summary {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px;
+		margin-bottom: 8px;
+	}
+	.wz-chip {
+		display: inline-flex;
+		align-items: center;
+		padding: 3px 10px;
+		border-radius: 999px;
+		font-size: 11.5px;
+		font-weight: 600;
+		color: var(--text-2);
+		background: var(--bg-4);
+	}
+	.wz-chip.ok,
+	.wz-chip.importable {
+		color: var(--success);
+		background: var(--success-dim);
+	}
+	.wz-chip.warn {
+		color: var(--warn);
+		background: var(--warn-dim, var(--bg-4));
+	}
+	.wz-chip.fail,
+	.wz-chip.confirm {
+		color: var(--error);
+		background: var(--error-dim);
+	}
+	.wz-note {
+		margin: 0 0 12px;
+		font-size: 11.5px;
+		line-height: 1.6;
+		color: var(--text-3);
+	}
+	.wz-note.ok {
+		color: var(--success);
+	}
+	.wz-toolbar {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin-bottom: 10px;
+		flex-wrap: wrap;
+	}
+	.wz-toolbar .filters {
+		display: flex;
+		gap: 6px;
+	}
+	.wz-search {
+		flex: 1;
+		min-width: 160px;
+	}
+	.wz-list {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+	.wz-row {
+		display: flex;
+		align-items: flex-start;
+		gap: 10px;
+		padding: 8px 10px;
+		border-radius: 8px;
+	}
+	.wz-row:hover {
+		background: var(--surface-2);
+	}
+	.wz-row.blocked .wz-name {
+		color: var(--text-3);
+	}
+	.wz-check {
+		margin-top: 3px;
+		accent-color: var(--accent);
+		flex-shrink: 0;
+	}
+	.wz-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		margin-top: 6px;
+		flex-shrink: 0;
+	}
+	.wz-dot.ok {
+		background: var(--success);
+	}
+	.wz-dot.warn {
+		background: var(--warn);
+	}
+	.wz-dot.fail {
+		background: var(--error);
+	}
+	.wz-main {
+		flex: 1;
+		min-width: 0;
+	}
+	.wz-line {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+	.wz-name {
+		font-size: 13px;
+		font-weight: 500;
+		color: var(--text);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+	}
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 2px 9px;
+		border-radius: 999px;
+		font-size: 10.5px;
+		font-weight: 600;
+	}
+	.tag-usage {
+		color: var(--text-2);
+		background: var(--bg-4);
+	}
+	.tag-warn {
+		color: var(--warn);
+		background: var(--warn-dim, var(--bg-4));
+	}
+	.tag-error {
+		color: var(--error);
+		background: var(--error-dim);
+	}
+	.tag-ok {
+		color: var(--success);
+		background: var(--success-dim);
+	}
+	.wz-media {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		color: var(--text-3);
+	}
+	.wz-m {
+		display: inline-flex;
+		align-items: center;
+	}
+	.wz-arrow {
+		font-size: 10px;
+	}
+	.wz-path {
+		margin-top: 2px;
+		font-size: 10.5px;
+		color: var(--text-3);
+		word-break: break-all;
+	}
+	.wz-skip {
+		margin-top: 4px;
+		font-size: 11.5px;
+		color: var(--error);
+		line-height: 1.5;
+	}
+	.wz-usage {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: 6px;
+		font-size: 11.5px;
+		color: var(--text-2);
+	}
+	.wz-usage-select {
+		width: 180px;
+	}
+	.wz-issues-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		margin-top: 5px;
+		padding: 0;
+		border: none;
+		background: none;
+		font-family: inherit;
+		font-size: 11.5px;
+		color: var(--warn);
+		cursor: pointer;
+	}
+	.wz-issues-toggle:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
+	.wz-issues {
+		margin: 6px 0 0;
+		padding: 8px 10px;
+		list-style: none;
+		border-radius: 7px;
+		background: var(--surface-2);
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+	.wz-issues li {
+		font-size: 11px;
+		color: var(--text-2);
+		line-height: 1.5;
+	}
+	.wz-issues li .mono {
+		color: var(--text-3);
+		margin-right: 6px;
+	}
+	.wz-issues li.lvl-error {
+		color: var(--error);
+	}
+	.wz-more {
+		margin-top: 10px;
+		width: 100%;
+	}
+	.wz-footer-note {
+		margin-right: auto;
+		font-size: 11.5px;
+		color: var(--text-3);
+	}
+</style>

calliope-web/src/lib/components/workflows/WorkflowMetaDialog.svelte

@@ -0,0 +1,259 @@
+<script lang="ts">
+	import Modal from '$lib/components/ui/Modal.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import { useQueryClient } from '@tanstack/svelte-query';
+	import { apiErrorMessage, workflows, type WorkflowMeta } from '$lib/api';
+	import { t } from '$lib/i18n.svelte';
+	import { toast } from '$lib/toast';
+
+	/**
+	 * 工作流标注 (HEL-682 / S4)：单条编辑显示名/说明/标签/分类/模型家族；
+	 * 批量模式对选中项做查找替换重命名、统一说明、追加标签与分类标注。
+	 * 只有填写了的字段会被提交，空字段一律不动。
+	 */
+	interface Props {
+		open?: boolean;
+		/** Rows to update — length 1 = single edit (prefilled), >1 = batch. */
+		targets: WorkflowMeta[];
+		/** Known category keys / family names for the datalists. */
+		categories: string[];
+		families: string[];
+		onchanged?: () => void;
+	}
+
+	let { open = $bindable(false), targets, categories, families, onchanged }: Props = $props();
+
+	const client = useQueryClient();
+
+	let name = $state('');
+	let nameFind = $state('');
+	let nameReplace = $state('');
+	let description = $state('');
+	let tagsText = $state('');
+	let category = $state('');
+	let modelFamily = $state('');
+	let applying = $state(false);
+
+	const isBatch = $derived(targets.length > 1);
+
+	$effect(() => {
+		if (open) {
+			const first = targets[0];
+			name = targets.length === 1 ? (first?.name ?? '') : '';
+			nameFind = '';
+			nameReplace = '';
+			description = targets.length === 1 ? (first?.description ?? '') : '';
+			tagsText = targets.length === 1 ? (first?.tags?.join(', ') ?? '') : '';
+			category = targets.length === 1 ? (first?.category ?? '') : '';
+			modelFamily = targets.length === 1 ? (first?.model_family ?? '') : '';
+		}
+	});
+
+	function parseTags(text: string): string[] {
+		return text
+			.split(/[,，]/)
+			.map((s) => s.trim())
+			.filter(Boolean);
+	}
+
+	function payloadFor(row: WorkflowMeta): Record<string, unknown> | null {
+		const payload: Record<string, unknown> = {};
+		if (isBatch) {
+			if (nameFind && row.name.includes(nameFind)) {
+				payload.name = row.name.split(nameFind).join(nameReplace);
+			}
+			if (description.trim()) payload.description = description.trim();
+			if (tagsText.trim()) {
+				const add = parseTags(tagsText);
+				const merged = [...row.tags, ...add.filter((x) => !row.tags.includes(x))];
+				if (merged.length !== row.tags.length) payload.tags = merged;
+			}
+			if (category.trim()) payload.category = category.trim();
+			if (modelFamily.trim()) payload.model_family = modelFamily.trim();
+		} else {
+			if (name.trim() && name.trim() !== row.name) payload.name = name.trim();
+			if (description !== (row.description ?? '')) payload.description = description.trim();
+			const nextTags = parseTags(tagsText);
+			if (JSON.stringify(nextTags) !== JSON.stringify(row.tags ?? [])) payload.tags = nextTags;
+			if (category.trim() !== (row.category ?? '')) payload.category = category.trim();
+			if (modelFamily.trim() !== (row.model_family ?? '')) payload.model_family = modelFamily.trim();
+		}
+		return Object.keys(payload).length ? payload : null;
+	}
+
+	async function apply() {
+		applying = true;
+		try {
+			let done = 0;
+			let failed = 0;
+			for (const row of targets) {
+				const payload = payloadFor(row);
+				if (!payload) {
+					done++; // nothing to change counts as OK (single mode no-op)
+					continue;
+				}
+				try {
+					await workflows.update(row.id, payload);
+					done++;
+				} catch {
+					failed++;
+				}
+			}
+			if (failed === 0) {
+				toast.success(isBatch ? t('md.applied', { n: done }) : t('md.appliedOne'));
+			} else {
+				toast.error(t('md.partial', { n: done, m: failed }));
+			}
+			open = false;
+			client.invalidateQueries({ queryKey: ['workflows'] });
+			onchanged?.();
+		} catch (err) {
+			toast.error(apiErrorMessage(err));
+		} finally {
+			applying = false;
+		}
+	}
+</script>
+
+<Modal bind:open title={isBatch ? t('md.batchTitle', { n: targets.length }) : t('md.title')} size="md">
+	<div class="md-form">
+		{#if isBatch}
+			<p class="md-hint">
+				<Icon name="info" size={14} />
+				{t('md.batchHint')}
+			</p>
+			<div class="md-grid2">
+				<label class="md-field">
+					<span class="md-label">{t('md.nameFind')}</span>
+					<input class="a-input" value={nameFind} oninput={(e) => (nameFind = e.currentTarget.value)} placeholder={t('md.nameFindPh')} />
+				</label>
+				<label class="md-field">
+					<span class="md-label">{t('md.nameReplace')}</span>
+					<input class="a-input" value={nameReplace} oninput={(e) => (nameReplace = e.currentTarget.value)} placeholder={t('md.nameReplacePh')} />
+				</label>
+			</div>
+			<p class="md-sub">{t('md.nameHint')}</p>
+		{:else}
+			<label class="md-field">
+				<span class="md-label">{t('md.name')}</span>
+				<input class="a-input" value={name} oninput={(e) => (name = e.currentTarget.value)} />
+			</label>
+		{/if}
+
+		<label class="md-field">
+			<span class="md-label">{t('md.description')}</span>
+			<textarea
+				class="a-textarea md-desc"
+				rows="2"
+				value={description}
+				oninput={(e) => (description = e.currentTarget.value)}
+				placeholder={t('md.descriptionPh')}
+			></textarea>
+		</label>
+
+		<label class="md-field">
+			<span class="md-label">{t('md.tags')}</span>
+			<input
+				class="a-input"
+				value={tagsText}
+				oninput={(e) => (tagsText = e.currentTarget.value)}
+				placeholder={t('md.tagsPh')}
+			/>
+			<span class="md-sub">{t('md.tagsHint')}</span>
+		</label>
+
+		<div class="md-grid2">
+			<label class="md-field">
+				<span class="md-label">{t('md.category')}</span>
+				<input
+					class="a-input"
+					value={category}
+					list="md-cat-list"
+					oninput={(e) => (category = e.currentTarget.value)}
+				/>
+				<datalist id="md-cat-list">
+					{#each categories as c (c)}
+						<option value={c}></option>
+					{/each}
+				</datalist>
+			</label>
+			<label class="md-field">
+				<span class="md-label">{t('md.modelFamily')}</span>
+				<input
+					class="a-input"
+					value={modelFamily}
+					list="md-family-list"
+					oninput={(e) => (modelFamily = e.currentTarget.value)}
+				/>
+				<datalist id="md-family-list">
+					{#each families as f (f)}
+						<option value={f}></option>
+					{/each}
+				</datalist>
+			</label>
+		</div>
+	</div>
+
+	{#snippet footer()}
+		<Button variant="secondary" disabled={applying} onclick={() => (open = false)}>{t('common.cancel')}</Button>
+		<Button variant="primary" loading={applying} onclick={() => void apply()}>{t('md.apply')}</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	.md-form {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+	.md-hint {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		margin: 0;
+		padding: 9px 12px;
+		border-radius: 7px;
+		background: var(--surface-2);
+		color: var(--text-2);
+		font-size: 11.5px;
+		line-height: 1.6;
+	}
+	.md-hint :global(.icon) {
+		color: var(--text-3);
+		flex-shrink: 0;
+		margin-top: 2px;
+	}
+	.md-grid2 {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 12px;
+	}
+	.md-field {
+		display: block;
+	}
+	.md-label {
+		display: block;
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--text-2);
+		margin-bottom: 6px;
+	}
+	.md-desc {
+		width: 100%;
+		box-sizing: border-box;
+		resize: vertical;
+	}
+	.md-sub {
+		display: block;
+		margin-top: 5px;
+		font-size: 11px;
+		color: var(--text-3);
+		line-height: 1.5;
+	}
+	@media (max-width: 760px) {
+		.md-grid2 {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

calliope-web/src/lib/i18n/de.ts

@@ -64,6 +64,7 @@ export const de: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': 'Ausblenden',
+	'toast.undo': 'Rückgängig',
 	'toast.uploadFailed': 'Upload fehlgeschlagen',
 
 	// --- Modal ---
@@ -220,6 +221,25 @@ export const de: Dict = {
 	'lightbox.videoPreview': 'Videovorschau',
 	'lightbox.videoUnavailable': 'Video nicht verfügbar',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': 'Letztes Bild exportieren',
+	'lastFrame.exporting': 'Letztes Bild wird exportiert…',
+	'lastFrame.hint': 'Speichert das letzte Bild in Originalgröße als PNG, z. B. als Startbild-Referenz',
+	'lastFrame.fileTag': 'letztes-bild',
+	'lastFrame.done': 'Letztes Bild exportiert {name} ({size})',
+	'lastFrame.errTimeout': 'Das Video lädt zu lange. Bitte später erneut versuchen.',
+	'lastFrame.errNotFound': 'Die Videodatei fehlt oder wurde entfernt.',
+	'lastFrame.errForbidden': 'Keine Berechtigung, dieses Video zu lesen.',
+	'lastFrame.errNetwork': 'Das Video konnte nicht gelesen werden (Netzwerkfehler).',
+	'lastFrame.errDecode': 'Das Video ist beschädigt; das Ende lässt sich nicht dekodieren.',
+	'lastFrame.errUnsupported': 'Dieser Browser unterstützt das Videoformat nicht, oder die Datei ist beschädigt.',
+	'lastFrame.errCrossOrigin':
+		'Das Video stammt von einer anderen Website, die das Auslesen von Bildern sperrt (Cross-Origin). Video zuerst herunterladen.',
+	'lastFrame.errNoPicture': 'Diese Datei enthält kein Videobild.',
+	'lastFrame.errUnseekable':
+		'Das Videoende ist nicht erreichbar (Länge unbekannt oder Quelle erlaubt kein Springen); kein Bild exportiert.',
+	'lastFrame.errBlack': 'Die letzte Sekunde des Videos ist schwarz; kein Bild exportiert.',
+	'lastFrame.errEmpty': 'Der Browser konnte das Ende nicht dekodieren. Erneut versuchen oder Desktop-Chrome / Edge nutzen.',
+	'lastFrame.errUnknown': 'Export des letzten Bildes fehlgeschlagen: {msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': 'Artefakt',
@@ -948,6 +968,8 @@ export const de: Dict = {
 	'library.selectAll': 'Alle auswählen',
 	'library.deselectAll': 'Auswahl aufheben',
 	'library.itemCount': '{count} Element(e)',
+	'library.loadError': 'Bibliothek konnte nicht geladen werden',
+	'library.subtitle': 'Generierte Assets an einem Ort – Bilder und Videos ohne Projektbezug ansehen, filtern und löschen',
 	'library.deleteSelected': 'Löschen ({count})',
 	'library.addToProject': 'Zum Projekt hinzufügen',
 	'library.filterLabel': 'Nach Art filtern',
@@ -1259,6 +1281,7 @@ export const de: Dict = {
 	'shell.navAgents': 'Agenten',
 	'shell.navConnections': 'ComfyUI-Verbindungen',
 	'shell.navModels': 'Modelle',
+	'shell.navLibrary': 'Asset-Bibliothek',
 	'shell.navSettings': 'Einstellungen',
 	'shell.comfy_ok': '{name} verbunden',
 	'shell.comfy_fail': '{name} nicht erreichbar',
@@ -1535,6 +1558,7 @@ export const de: Dict = {
 	'studio.slotMask': 'Maske',
 	'studio.slotFirst': 'Erster Frame',
 	'studio.slotLast': 'Letzter Frame',
+	'studio.slotOptional': 'Optional',
 	'studio.slotRefVideo': 'Referenzvideo',
 	'studio.slotAudio': 'Referenzaudio',
 	'studio.slotPick': 'Klicken oder Datei ziehen',
@@ -1609,7 +1633,11 @@ export const de: Dict = {
 	'studio.delConfirm': 'Beim Löschen werden auch die Ergebnisdateien dieses Auftrags entfernt; der Verlauf ist nicht wiederherstellbar. Löschen?',
 	'studio.delTitleJob': 'Auftrag „{name}“ löschen',
 	'studio.delConfirmMulti': 'Dieser Auftrag hat {n} Ergebnisse. Beim Löschen werden der gesamte Auftragsdatensatz und alle {n} Ergebnisdateien entfernt; dies ist unwiderruflich. Löschen?',
+	'studio.deleteFailedToast': 'Löschen fehlgeschlagen: {detail}',
+	'studio.deletedTakeNoFilesToast': '„{name}“ gelöscht',
+	'studio.deletedTakeToast': '„{name}“ und seine Ergebnisdateien wurden gelöscht',
 	'studio.deletedToast': 'Auftrag und zugehörige Ergebnisdateien gelöscht',
+	'studio.wfDeletedTag': 'Workflow gelöscht',
 	'studio.wfEmptyTitle': 'Noch keine {kind}-Workflows',
 	'studio.wfEmptyBody': 'Entwicklermodus in ComfyUI aktivieren, Workflow als API-JSON exportieren und auf der Seite ComfyUI-Verbindungen als {kind} importieren.',
 	'studio.wfEmptyGo': 'In ComfyUI-Verbindungen importieren',
@@ -1628,9 +1656,12 @@ export const de: Dict = {
 	'tasks.subtitle': 'Alle Bild-/Videoaufgaben — eigenständige Fenster und Kreativfluss',
 	'tasks.filterAll': 'Alle',
 	'tasks.filterImage': 'Bilder',
+	'tasks.filterFailed': 'Fehlgeschlagen',
+	'tasks.filterActive': 'Aktiv',
 	'tasks.filterVideo': 'Videos',
 	'tasks.count': '{n} Aufgaben · {m} aktiv',
 	'tasks.empty': 'Noch keine Aufgaben. Reiche die erste in Bild oder Video ein.',
+	'tasks.emptyFiltered': 'Keine Aufgaben passen zum aktuellen Filter.',
 	'tasks.goGenerate': 'Bild öffnen',
 	'tasks.sourceStudioImage': 'Eigenständiges Bild',
 	'tasks.sourceStudioVideo': 'Eigenständiges Video',
@@ -1644,8 +1675,10 @@ export const de: Dict = {
 	'tasks.retry': 'Erneut',
 	'tasks.cancel': 'Abbrechen',
 	'tasks.delete': 'Löschen',
+	'tasks.download': 'Herunterladen',
 	'tasks.delTitle': 'Aufgabe löschen',
 	'tasks.delConfirm': 'Die Ergebnisdateien werden mitgelöscht. Löschen?',
+	'tasks.searchPh': 'Aufgaben suchen…',
 	'tasks.outputs': '{n} Ergebnisse',
 
 	'agentsPage.title': 'Agenten',
@@ -1869,12 +1902,14 @@ export const de: Dict = {
 	'home.stageProgress': 'Fünf-Phasen-Fortschritt',
 	'tasks.sourceWorkbench': 'Kreativ-Fluss',
 	'jobst.idSuffix': ' · ComfyUI-Prompt-ID {id}',
-	'jobst.done': 'Fertig',
+	'jobst.done': 'Fixiert',
 	'jobst.doneDetail': 'ComfyUI ist fertig, Ergebnisse gespeichert',
 	'jobst.dryRun': 'Platzhalter',
 	'jobst.dryRunDetail': 'Nur Platzhalter: Dry-run ist aktiv, ComfyUI wurde nicht aufgerufen',
 	'jobst.noOutput': 'Keine Ausgabe',
 	'jobst.noOutputDetail': 'Der Job endete ohne Ergebnisdatei – keine fertige Generierung',
+	'jobst.missing': 'Dateien fehlen',
+	'jobst.missingDetail': 'Der Task lief erfolgreich, aber die Ergebnisdateien sind nicht mehr auf dem Server',
 	'jobst.queued': 'Wartet',
 	'jobst.queuedDetail': 'Wartet in der Workbench-Warteschlange auf ComfyUI',
 	'jobst.connecting': 'Verbinde',
@@ -1994,6 +2029,9 @@ export const de: Dict = {
 	'desk.kvName': 'Name',
 	'desk.kvPromptId': 'ComfyUI-Auftrags-ID',
 	'desk.kvUsage': 'Zweck',
+	'desk.loadEarlier': '{n} ältere Takes anzeigen',
+	'desk.missingSub': 'Mit gleichen Parametern wiederholen oder diesen Take entfernen',
+	'desk.missingTitle': 'Die Ergebnisdateien sind nicht mehr auf dem Server',
 	'desk.needWorkflow': 'Fehlt: Workflow',
 	'desk.noConn': 'Nicht verbunden',
 	'desk.noPromptInput': 'Dieser Workflow hat keinen Prompt-Eingang und läuft mit seinen eigenen Werten.',
@@ -2014,6 +2052,8 @@ export const de: Dict = {
 	'desk.promptOnly': 'Nur Prompt',
 	'desk.promptPh': 'Motiv beschreiben… (Strg/⌘ + Enter generiert, / fokussiert)',
 	'desk.restoreAll': 'Alle Workflow-Werte wiederherstellen',
+	'desk.redo': 'Mit gleichen Parametern wiederholen',
+	'desk.removeRecord': 'Eintrag entfernen',
 	'desk.restoreOrig': 'Original wiederherstellen',
 	'desk.reuse': 'Wiederverwenden',
 	'desk.reuseToComposer': 'In Eingabe übernehmen',
@@ -2041,4 +2081,152 @@ export const de: Dict = {
 	'desk.wfUntested': 'Nicht getestet',
 	'desk.workflow': 'Workflow',
 	'desk.yesterday': 'Gestern',
+	'wfd.stepParse': 'JSON parsen',
+	'wfd.stepNodes': 'Knoten erkennen',
+	'wfd.stepModels': 'Modelle prüfen',
+	'wfd.stepSlots': 'Eingangsslots aufbauen',
+	'wfd.noOutput': 'Der Workflow hat keinen Ausgabeknoten — Import nicht möglich',
+	'wfd.nodesAutoOk': 'Verwendung automatisch erkannt: {usage}',
+	'wfd.nodesUserOk': 'Verwendung bestätigt: {usage}',
+	'wfd.modelsOk': '„{name}“ hat alle benötigten Knoten und Modelle',
+	'wfd.slotsOk': '{n} Eingangsslot(s) aufgebaut ({m} Medien)',
+	'wfd.checksAria': 'Import-Prüfergebnisse',
+	'wfd.showDetails': 'Fehlerdetails anzeigen',
+	'wfd.hideDetails': 'Fehlerdetails ausblenden',
+	'wfd.unreachableSuggest': 'Eine misslungene Prüfung verhindert das Speichern nicht; nach Reparatur erneut prüfen.',
+	'wfd.nodesPickSuggest': 'Wähle unten die Verwendung und schließe die Ausgangszuordnung ab, bevor du speicherst.',
+	'wfd.showRaw': 'Rohes JSON anzeigen',
+	'wfd.hideRaw': 'Rohes JSON ausblenden',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'UI-Format-Workflows stapelweise importieren; suchen, filtern, annotieren — volles JSON nur bei Bedarf',
+	'wl.batchImport': 'Stapelimport',
+	'wl.dedupe': 'Duplikate entfernen',
+	'wl.dedupeTitle': 'Duplizierte Workflows entfernen',
+	'wl.dedupeConfirm': 'Einträge mit identischem Namen UND Inhalt werden gelöscht (der früheste Import bleibt). Gleicher Name mit anderem Inhalt bleibt unangetastet. Fortfahren?',
+	'wl.dedupeDone': '{n} doppelte Workflows entfernt',
+	'wl.dedupeNone': 'Keine doppelten Workflows gefunden',
+	'wl.favCount': '{n} Favoriten',
+	'wl.searchPh': 'Name, Beschreibung, Tags, Modell suchen… (/ drücken)',
+	'wl.filterLabel': 'Filter',
+	'wl.filterAll': 'Alle',
+	'wl.filterFav': 'Favoriten',
+	'wl.filterPending': 'Offen',
+	'wl.filterDisabled': 'Deaktiviert',
+	'wl.favAria': 'Favorisieren',
+	'wl.unfavAria': 'Favorit entfernen',
+	'wl.categoryLabel': 'Kategorie',
+	'wl.categoryAll': 'Alle Kategorien',
+	'wl.familyLabel': 'Modellfamilie',
+	'wl.familyAll': 'Alle Familien',
+	'wl.mediaLabel': 'Medium',
+	'wl.mediaAll': 'Alle Medien',
+	'wl.mediaImage': 'Bild',
+	'wl.mediaVideo': 'Video',
+	'wl.mediaAudio': 'Audio',
+	'wl.mediaIn': 'Eingabe',
+	'wl.mediaOut': 'Ausgabe',
+	'wl.sortLabel': 'Sortierung',
+	'wl.sortRecent': 'Favoriten / zuletzt',
+	'wl.sortName': 'Name',
+	'wl.resetFilters': 'Filter zurücksetzen',
+	'wl.noMatch': 'Keine Workflows entsprechen den Filtern',
+	'wl.resultCount': '{n} von {m}',
+	'wl.selected': '{n} ausgewählt',
+	'wl.batchLabel': 'Stapelaktionen',
+	'wl.batchAnnotate': 'Annotieren',
+	'wl.batchEnable': 'Aktivieren',
+	'wl.batchDisable': 'Deaktivieren',
+	'wl.clearSel': 'Auswahl aufheben',
+	'wl.batchDone': '{n} Workflows aktualisiert',
+	'wl.batchPartial': '{n} erfolgreich, {m} fehlgeschlagen (zuerst Verwendung und Ausgabe klären)',
+	'wl.selectAll': 'Alle aufgelisteten Workflows auswählen',
+	'wl.rowCheckAria': '{name} auswählen',
+	'wl.headMeta': 'Metadaten',
+	'wl.headActions': 'Aktionen',
+	'wl.enableAria': '{name} aktivieren oder deaktivieren',
+	'wl.enableBlocked': 'Verwendung und Ausgabeknoten vor Aktivierung festlegen',
+	'wl.editMeta': 'Metadaten bearbeiten',
+	'wl.lastUsed': 'Zuletzt verwendet',
+	'wl.moreCount': '{n} mehr anzeigen ({m} gesamt)',
+	'wfCat.basic': 'Grundverarbeitung',
+	'wfCat.audioTts': 'Sprachgenerierung',
+	'wfCat.music': 'Musikgenerierung',
+	'wfCat.image': 'Bildgenerierung',
+	'wfCat.video': 'Videogenerierung',
+	'wfCat.digitalHuman': 'Digitaler Mensch',
+	'wfCat.motionTransfer': 'Bewegungsübertragung',
+	'md.title': 'Workflow-Metadaten',
+	'md.batchTitle': 'Stapel-Annotieren ({n})',
+	'md.batchHint': 'Nur ausgefüllte Felder werden angewendet; Namen per Suchen→Ersetzen, Tags werden ergänzt.',
+	'md.name': 'Anzeigename',
+	'md.nameFind': 'Suchen',
+	'md.nameFindPh': 'Zu ersetzender Text…',
+	'md.nameReplace': 'Ersetzen mit',
+	'md.nameReplacePh': 'Ersatztext…',
+	'md.nameHint': 'Leeres „Suchen“ lässt Namen unverändert.',
+	'md.description': 'Beschreibung',
+	'md.descriptionPh': 'Eine Zeile, was dieser Workflow tut…',
+	'md.tags': 'Tags',
+	'md.tagsPh': 'z. B. schnell, hohe Qualität',
+	'md.tagsHint': 'Kommagetrennt; im Stapelmodus werden sie ergänzt.',
+	'md.category': 'Kategorie',
+	'md.modelFamily': 'Modellfamilie',
+	'md.apply': 'Anwenden',
+	'md.applied': '{n} Workflows aktualisiert',
+	'md.appliedOne': 'Aktualisiert',
+	'md.partial': '{n} erfolgreich, {m} fehlgeschlagen',
+	'wiz.title': 'Workflows stapelweise importieren',
+	'wiz.stepSource': 'Quelle',
+	'wiz.stepReport': 'Prüfbericht',
+	'wiz.stepResult': 'Ergebnis',
+	'wiz.sourceLabel': 'Importquelle',
+	'wiz.modeScan': 'Serververzeichnis scannen',
+	'wiz.modeFiles': 'Lokale Dateien wählen',
+	'wiz.rootLabel': 'Serververzeichnis',
+	'wiz.rootHint': 'Ein Verzeichnispfad auf dem Server (z. B. example_ComfyUI_workflows des Repos); UI-Format-JSONs werden rekursiv gescannt, API-Format und andere übersprungen.',
+	'wiz.preflight': 'Preflight gegen echtes ComfyUI (optional)',
+	'wiz.preflightNone': 'Überspringen (Offline-Konvertierung)',
+	'wiz.preflightHint': 'Mit gewählter Verbindung werden konvertierte Graphen Knoten für Knoten geprüft.',
+	'wiz.pickFiles': 'Lokale Dateien',
+	'wiz.pickFilesBtn': 'JSON-Dateien wählen (mehrere)',
+	'wiz.pickFilesHint': 'ComfyUI-Workflows im UI-Format wählen; Mehrfachauswahl möglich.',
+	'wiz.parsed': '{n} Dateien gelesen',
+	'wiz.notUi': '{n} Dateien sind kein UI-Format (kein nodes-Array) und wurden übersprungen',
+	'wiz.noFiles': 'Zuerst Dateien zum Import auswählen',
+	'wiz.runDry': 'Probelauf starten (nichts wird gespeichert)',
+	'wiz.running': 'Prüfe…',
+	'wiz.total': '{n} Dateien',
+	'wiz.ok': 'OK {n}',
+	'wiz.warn': 'Warnung {n}',
+	'wiz.fail': 'Fehler {n}',
+	'wiz.confirmCount': 'Prüfung nötig {n}',
+	'wiz.importable': 'Importierbar {n}',
+	'wiz.reportHint': 'Der Probelauf speichert nichts. Warnungen werden aktiviert importiert, sobald eine Verwendung angegeben ist; prüfungspflichtige und fehlgeschlagene Dateien werden nie importiert.',
+	'wiz.filterLabel': 'Berichtsfilter',
+	'wiz.filterWarn': 'Nur Warnungen',
+	'wiz.filterBlocked': 'Nicht importierbar',
+	'wiz.searchPh': 'Dateinamen suchen…',
+	'wiz.includeAria': '{name} importieren',
+	'wiz.skipReason': 'Nicht importierbar: {reason}',
+	'wiz.issues': '{n} Konvertierungshinweise',
+	'wiz.usagePick': 'Verwendung:',
+	'wiz.usageNone': 'Vorerst überspringen (nach Import offen)',
+	'wiz.selectedN': '{n} Dateien werden importiert',
+	'wiz.excludedM': '{m} nicht importierbar',
+	'wiz.import': 'Importieren',
+	'wiz.importing': 'Importiere…',
+	'wiz.back': 'Zurück',
+	'wiz.imported': '{n} importiert',
+	'wiz.skipped': '{n} übersprungen',
+	'wiz.conflict': 'Existiert bereits (Duplikat übersprungen)',
+	'wiz.usageApplied': 'Verwendung für {n} neue Importe gesetzt',
+	'wiz.done': 'Fertig',
+	'wiz.again': 'Weitere Charge importieren',
+	'wiz.resultNote': 'Dateien mit identischem Inhalt werden automatisch übersprungen — Wiederholung erzeugt keine Duplikate.',
+	'wiz.importedToast': '{n} Workflows importiert',
+	'wiz.warnTag': 'Warnung',
+	'wiz.confirmTag': 'Prüfung nötig',
+	'wiz.preflightTag': 'Preflight fehlgeschlagen',
+	'wiz.importedTag': 'Importiert #{id}',
 };

calliope-web/src/lib/i18n/en.ts

@@ -62,6 +62,7 @@ export const en = {
 
 	// --- Toast ---
 	'toast.dismiss': 'Dismiss',
+	'toast.undo': 'Undo',
 	'toast.uploadFailed': 'Upload failed',
 
 	// --- Modal ---
@@ -220,6 +221,25 @@ export const en = {
 	'lightbox.videoPreview': 'Video preview',
 	'lightbox.videoUnavailable': 'Video unavailable',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': 'Export last frame',
+	'lastFrame.exporting': 'Exporting last frame…',
+	'lastFrame.hint': 'Save the final frame as a full-size PNG, e.g. as a first-frame reference',
+	'lastFrame.fileTag': 'last-frame',
+	'lastFrame.done': 'Exported last frame {name} ({size})',
+	'lastFrame.errTimeout': 'The video took too long to load. Try again later.',
+	'lastFrame.errNotFound': 'The video file is missing or was removed.',
+	'lastFrame.errForbidden': 'You do not have permission to read this video.',
+	'lastFrame.errNetwork': 'Reading the video failed (network error). Check the connection and retry.',
+	'lastFrame.errDecode': 'The video is damaged; its ending cannot be decoded.',
+	'lastFrame.errUnsupported': 'This browser cannot play the video format, or the file is damaged.',
+	'lastFrame.errCrossOrigin':
+		'The video comes from another site that blocks reading its frames (cross-origin). Download the video first.',
+	'lastFrame.errNoPicture': 'This file has no video picture.',
+	'lastFrame.errUnseekable':
+		'Cannot reach the end of the video (unknown length, or the source does not allow seeking); no frame exported.',
+	'lastFrame.errBlack': 'The last second of the video is black; no frame exported.',
+	'lastFrame.errEmpty': 'The browser could not decode the ending. Retry, or use desktop Chrome / Edge.',
+	'lastFrame.errUnknown': 'Exporting the last frame failed: {msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': 'Artifact',
@@ -948,6 +968,8 @@ export const en = {
 	'library.selectAll': 'Select all',
 	'library.deselectAll': 'Deselect all',
 	'library.itemCount': '{count} item(s)',
+	'library.loadError': 'Failed to load the library',
+	'library.subtitle': 'Generated assets in one place — preview, filter and remove images and videos not tied to a project',
 	'library.deleteSelected': 'Delete ({count})',
 	'library.addToProject': 'Add to Project',
 	'library.filterLabel': 'Filter by kind',
@@ -1261,6 +1283,7 @@ export const en = {
 	'shell.navAgents': 'Agents',
 	'shell.navConnections': 'ComfyUI Connections',
 	'shell.navModels': 'Models',
+	'shell.navLibrary': 'Asset Library',
 	'shell.navSettings': 'Settings',
 	'shell.comfy_ok': '{name} connected',
 	'shell.comfy_fail': '{name} unreachable',
@@ -1534,6 +1557,7 @@ export const en = {
 	'studio.slotMask': 'Mask',
 	'studio.slotFirst': 'First frame',
 	'studio.slotLast': 'Last frame',
+	'studio.slotOptional': 'Optional',
 	'studio.slotRefVideo': 'Reference video',
 	'studio.slotAudio': 'Reference audio',
 	'studio.slotPick': 'Click or drop a file',
@@ -1608,7 +1632,11 @@ export const en = {
 	'studio.delConfirm': 'Deleting also removes this job’s result files; the history cannot be restored. Delete?',
 	'studio.delTitleJob': 'Delete job “{name}”',
 	'studio.delConfirmMulti': 'This job produced {n} results. Deleting removes the whole job record and all {n} result files; this cannot be undone. Delete?',
+	'studio.deleteFailedToast': 'Delete failed: {detail}',
+	'studio.deletedTakeNoFilesToast': 'Deleted “{name}”',
+	'studio.deletedTakeToast': 'Deleted “{name}” together with its result files',
 	'studio.deletedToast': 'Job deleted together with its result files',
+	'studio.wfDeletedTag': 'Workflow deleted',
 	'studio.wfEmptyTitle': 'No {kind} workflows yet',
 	'studio.wfEmptyBody': "Enable ComfyUI's developer mode, export the workflow as API JSON, then import it on the ComfyUI Connections page as {kind}.",
 	'studio.wfEmptyGo': 'Import in ComfyUI Connections',
@@ -1627,9 +1655,12 @@ export const en = {
 	'tasks.subtitle': 'All image / video tasks — standalone windows and the creation flow',
 	'tasks.filterAll': 'All',
 	'tasks.filterImage': 'Images',
+	'tasks.filterFailed': 'Failed',
+	'tasks.filterActive': 'Active',
 	'tasks.filterVideo': 'Videos',
 	'tasks.count': '{n} tasks · {m} active',
 	'tasks.empty': 'No generation tasks yet. Submit the first one in Image or Video.',
+	'tasks.emptyFiltered': 'No tasks match the current filter.',
 	'tasks.goGenerate': 'Open Image',
 	'tasks.sourceStudioImage': 'Standalone image',
 	'tasks.sourceStudioVideo': 'Standalone video',
@@ -1643,8 +1674,10 @@ export const en = {
 	'tasks.retry': 'Retry',
 	'tasks.cancel': 'Cancel',
 	'tasks.delete': 'Delete',
+	'tasks.download': 'Download',
 	'tasks.delTitle': 'Delete task',
 	'tasks.delConfirm': 'The result files will be removed together with the task. Delete it?',
+	'tasks.searchPh': 'Search tasks…',
 	'tasks.outputs': '{n} outputs',
 
 	'agentsPage.title': 'Agents',
@@ -1868,12 +1901,14 @@ export const en = {
 	'home.stageProgress': 'Five-stage progress',
 	'tasks.sourceWorkbench': 'Creation flow',
 	'jobst.idSuffix': ' · ComfyUI prompt ID {id}',
-	'jobst.done': 'Done',
+	'jobst.done': 'Fixed',
 	'jobst.doneDetail': 'ComfyUI finished and the results are saved',
 	'jobst.dryRun': 'Placeholder',
 	'jobst.dryRunDetail': 'Placeholder only: Dry-run is on, ComfyUI was not called',
 	'jobst.noOutput': 'No output',
 	'jobst.noOutputDetail': 'The job ended without any result file — not a finished generation',
+	'jobst.missing': 'Files missing',
+	'jobst.missingDetail': 'The task succeeded, but its result files are no longer on the server',
 	'jobst.queued': 'Queued',
 	'jobst.queuedDetail': 'Waiting in the workbench queue to be sent to ComfyUI',
 	'jobst.connecting': 'Connecting',
@@ -1993,6 +2028,9 @@ export const en = {
 	'desk.kvName': 'Name',
 	'desk.kvPromptId': 'ComfyUI prompt id',
 	'desk.kvUsage': 'Usage',
+	'desk.loadEarlier': 'Show {n} earlier takes',
+	'desk.missingSub': 'Redo with the same params, or remove this take',
+	'desk.missingTitle': 'The result files are no longer on the server',
 	'desk.needWorkflow': 'Missing: workflow',
 	'desk.noConn': 'Not connected',
 	'desk.noPromptInput': 'This workflow takes no prompt; it runs with its own values.',
@@ -2013,6 +2051,8 @@ export const en = {
 	'desk.promptOnly': 'Prompt only',
 	'desk.promptPh': 'Describe the shot… (Ctrl/⌘ + Enter to generate, / to focus)',
 	'desk.restoreAll': 'Restore all workflow values',
+	'desk.redo': 'Redo with same params',
+	'desk.removeRecord': 'Remove record',
 	'desk.restoreOrig': 'Restore original',
 	'desk.reuse': 'Reuse',
 	'desk.reuseToComposer': 'Reuse in composer',
@@ -2040,6 +2080,154 @@ export const en = {
 	'desk.wfUntested': 'Not tested',
 	'desk.workflow': 'Workflow',
 	'desk.yesterday': 'Yesterday',
+	'wfd.stepParse': 'Parse JSON',
+	'wfd.stepNodes': 'Identify nodes',
+	'wfd.stepModels': 'Verify models',
+	'wfd.stepSlots': 'Build input slots',
+	'wfd.noOutput': 'The workflow has no output node — cannot import',
+	'wfd.nodesAutoOk': 'Usage auto-detected: {usage}',
+	'wfd.nodesUserOk': 'Usage confirmed: {usage}',
+	'wfd.modelsOk': '"{name}" has all required nodes and models',
+	'wfd.slotsOk': '{n} input slot(s) built ({m} media)',
+	'wfd.checksAria': 'Import check results',
+	'wfd.showDetails': 'Show error details',
+	'wfd.hideDetails': 'Hide error details',
+	'wfd.unreachableSuggest': 'Being unverifiable does not block saving; re-check after fixing the connection.',
+	'wfd.nodesPickSuggest': 'Pick the usage and finish the output mapping below before saving.',
+	'wfd.showRaw': 'View raw JSON',
+	'wfd.hideRaw': 'Hide raw JSON',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'Batch-import UI-format workflows; search, filter and annotate — full JSON loads only per action',
+	'wl.batchImport': 'Batch import',
+	'wl.dedupe': 'Dedupe',
+	'wl.dedupeTitle': 'Remove duplicate workflows',
+	'wl.dedupeConfirm': 'This deletes entries whose name AND content are identical (the earliest import is kept). Same name with different content is your variant and stays untouched. Continue?',
+	'wl.dedupeDone': 'Removed {n} duplicate workflows',
+	'wl.dedupeNone': 'No duplicate workflows found',
+	'wl.favCount': '{n} favorites',
+	'wl.searchPh': 'Search name, description, tags, model… (press /)',
+	'wl.filterLabel': 'Filters',
+	'wl.filterAll': 'All',
+	'wl.filterFav': 'Favorites',
+	'wl.filterPending': 'Pending',
+	'wl.filterDisabled': 'Disabled',
+	'wl.favAria': 'Favorite',
+	'wl.unfavAria': 'Unfavorite',
+	'wl.categoryLabel': 'Category',
+	'wl.categoryAll': 'All categories',
+	'wl.familyLabel': 'Model family',
+	'wl.familyAll': 'All families',
+	'wl.mediaLabel': 'Media',
+	'wl.mediaAll': 'All media',
+	'wl.mediaImage': 'Image',
+	'wl.mediaVideo': 'Video',
+	'wl.mediaAudio': 'Audio',
+	'wl.mediaIn': 'Input',
+	'wl.mediaOut': 'Output',
+	'wl.sortLabel': 'Sort',
+	'wl.sortRecent': 'Favorite / recent',
+	'wl.sortName': 'Name',
+	'wl.resetFilters': 'Clear filters',
+	'wl.noMatch': 'No workflows match the current filters',
+	'wl.resultCount': '{n} of {m} match',
+	'wl.selected': '{n} selected',
+	'wl.batchLabel': 'Batch actions',
+	'wl.batchAnnotate': 'Annotate',
+	'wl.batchEnable': 'Enable',
+	'wl.batchDisable': 'Disable',
+	'wl.clearSel': 'Clear selection',
+	'wl.batchDone': 'Updated {n} workflows',
+	'wl.batchPartial': '{n} succeeded, {m} failed (usage and output mapping must be settled first)',
+	'wl.selectAll': 'Select all listed workflows',
+	'wl.rowCheckAria': 'Select {name}',
+	'wl.headMeta': 'Metadata',
+	'wl.headActions': 'Actions',
+	'wl.enableAria': 'Enable or disable {name}',
+	'wl.enableBlocked': 'Settle usage and output nodes before enabling',
+	'wl.editMeta': 'Edit metadata',
+	'wl.lastUsed': 'Last used',
+	'wl.moreCount': 'Show {n} more ({m} total)',
+	'wfCat.basic': 'Basic processing',
+	'wfCat.audioTts': 'Speech generation',
+	'wfCat.music': 'Music generation',
+	'wfCat.image': 'Image generation',
+	'wfCat.video': 'Video generation',
+	'wfCat.digitalHuman': 'Digital human',
+	'wfCat.motionTransfer': 'Motion transfer',
+	'md.title': 'Workflow metadata',
+	'md.batchTitle': 'Batch annotate ({n})',
+	'md.batchHint': 'Only filled fields are applied; names are renamed via find→replace and tags are appended.',
+	'md.name': 'Display name',
+	'md.nameFind': 'Find',
+	'md.nameFindPh': 'Text to replace…',
+	'md.nameReplace': 'Replace with',
+	'md.nameReplacePh': 'Replacement text…',
+	'md.nameHint': 'Leave “Find” empty to keep names unchanged.',
+	'md.description': 'Description',
+	'md.descriptionPh': 'One line about what this workflow does…',
+	'md.tags': 'Tags',
+	'md.tagsPh': 'e.g. fast, high quality',
+	'md.tagsHint': 'Comma separated; appended in batch mode.',
+	'md.category': 'Category',
+	'md.modelFamily': 'Model family',
+	'md.apply': 'Apply',
+	'md.applied': 'Updated {n} workflows',
+	'md.appliedOne': 'Updated',
+	'md.partial': '{n} succeeded, {m} failed',
+	'wiz.title': 'Batch import workflows',
+	'wiz.stepSource': 'Source',
+	'wiz.stepReport': 'Dry-run report',
+	'wiz.stepResult': 'Result',
+	'wiz.sourceLabel': 'Import source',
+	'wiz.modeScan': 'Scan server directory',
+	'wiz.modeFiles': 'Pick local files',
+	'wiz.rootLabel': 'Server directory',
+	'wiz.rootHint': 'A directory path on the server (e.g. the repo’s example_ComfyUI_workflows); UI-format ComfyUI JSONs inside are scanned recursively — API-format and other JSONs are skipped.',
+	'wiz.preflight': 'Preflight against a live ComfyUI (optional)',
+	'wiz.preflightNone': 'Skip (offline conversion)',
+	'wiz.preflightHint': 'With a connection selected, converted graphs are checked node-by-node against that ComfyUI.',
+	'wiz.pickFiles': 'Local files',
+	'wiz.pickFilesBtn': 'Choose JSON files (multiple)',
+	'wiz.pickFilesHint': 'Pick ComfyUI UI-format workflow JSONs; multiple selection supported.',
+	'wiz.parsed': '{n} files read',
+	'wiz.notUi': '{n} files are not UI-format (no nodes array) and were skipped',
+	'wiz.noFiles': 'Choose files to import first',
+	'wiz.runDry': 'Run dry-run (nothing stored)',
+	'wiz.running': 'Checking…',
+	'wiz.total': '{n} files',
+	'wiz.ok': 'OK {n}',
+	'wiz.warn': 'Warn {n}',
+	'wiz.fail': 'Fail {n}',
+	'wiz.confirmCount': 'Need review {n}',
+	'wiz.importable': 'Importable {n}',
+	'wiz.reportHint': 'The dry-run stores nothing. Warn items import enabled once a usage is supplied; needs-review and failed items are never imported nor marked runnable.',
+	'wiz.filterLabel': 'Report filters',
+	'wiz.filterWarn': 'Warnings only',
+	'wiz.filterBlocked': 'Not importable',
+	'wiz.searchPh': 'Search file name…',
+	'wiz.includeAria': 'Import {name}',
+	'wiz.skipReason': 'Not importable: {reason}',
+	'wiz.issues': '{n} conversion notes',
+	'wiz.usagePick': 'Usage:',
+	'wiz.usageNone': 'Skip for now (pending after import)',
+	'wiz.selectedN': '{n} files will be imported',
+	'wiz.excludedM': '{m} not importable',
+	'wiz.import': 'Import',
+	'wiz.importing': 'Importing…',
+	'wiz.back': 'Back',
+	'wiz.imported': 'Imported {n}',
+	'wiz.skipped': 'Skipped {n}',
+	'wiz.conflict': 'Already exists (duplicate skipped)',
+	'wiz.usageApplied': 'Usage supplied for {n} new imports',
+	'wiz.done': 'Done',
+	'wiz.again': 'Import another batch',
+	'wiz.resultNote': 'Files with identical content are skipped automatically — re-running never creates duplicates.',
+	'wiz.importedToast': 'Imported {n} workflows',
+	'wiz.warnTag': 'Warn',
+	'wiz.confirmTag': 'Needs review',
+	'wiz.preflightTag': 'Preflight failed',
+	'wiz.importedTag': 'Imported #{id}',
 };
 
 export type Dict = typeof en;

calliope-web/src/lib/i18n/es.ts

@@ -64,6 +64,7 @@ export const es: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': 'Descartar',
+	'toast.undo': 'Deshacer',
 	'toast.uploadFailed': 'Error al subir',
 
 	// --- Modal ---
@@ -220,6 +221,25 @@ export const es: Dict = {
 	'lightbox.videoPreview': 'Vista previa de vídeo',
 	'lightbox.videoUnavailable': 'Vídeo no disponible',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': 'Exportar último fotograma',
+	'lastFrame.exporting': 'Exportando último fotograma…',
+	'lastFrame.hint': 'Guarda el último fotograma como PNG a tamaño completo, p. ej. como referencia de primer fotograma',
+	'lastFrame.fileTag': 'ultimo-fotograma',
+	'lastFrame.done': 'Último fotograma exportado {name} ({size})',
+	'lastFrame.errTimeout': 'El vídeo tardó demasiado en cargar. Inténtalo más tarde.',
+	'lastFrame.errNotFound': 'El archivo de vídeo no existe o fue eliminado.',
+	'lastFrame.errForbidden': 'No tienes permiso para leer este vídeo.',
+	'lastFrame.errNetwork': 'No se pudo leer el vídeo (error de red).',
+	'lastFrame.errDecode': 'El vídeo está dañado; su final no se puede decodificar.',
+	'lastFrame.errUnsupported': 'Este navegador no admite el formato del vídeo o el archivo está dañado.',
+	'lastFrame.errCrossOrigin':
+		'El vídeo procede de otro sitio que no permite leer sus fotogramas (origen cruzado). Descarga primero el vídeo.',
+	'lastFrame.errNoPicture': 'Este archivo no tiene imagen de vídeo.',
+	'lastFrame.errUnseekable':
+		'No se puede llegar al final del vídeo (duración desconocida o el origen no permite buscar); no se exportó nada.',
+	'lastFrame.errBlack': 'El último segundo del vídeo es negro; no se exportó ningún fotograma.',
+	'lastFrame.errEmpty': 'El navegador no pudo decodificar el final. Reintenta o usa Chrome / Edge de escritorio.',
+	'lastFrame.errUnknown': 'Error al exportar el último fotograma: {msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': 'Artefacto',
@@ -948,6 +968,8 @@ export const es: Dict = {
 	'library.selectAll': 'Seleccionar todo',
 	'library.deselectAll': 'Deseleccionar todo',
 	'library.itemCount': '{count} elemento(s)',
+	'library.loadError': 'No se pudo cargar la biblioteca',
+	'library.subtitle': 'Recursos generados en un solo lugar: previsualiza, filtra y elimina imágenes y vídeos sin proyecto',
 	'library.deleteSelected': 'Eliminar ({count})',
 	'library.addToProject': 'Añadir al proyecto',
 	'library.filterLabel': 'Filtrar por tipo',
@@ -1259,6 +1281,7 @@ export const es: Dict = {
 	'shell.navAgents': 'Agentes',
 	'shell.navConnections': 'Conexiones ComfyUI',
 	'shell.navModels': 'Modelos',
+	'shell.navLibrary': 'Biblioteca de assets',
 	'shell.navSettings': 'Ajustes',
 	'shell.comfy_ok': '{name} conectado',
 	'shell.comfy_fail': '{name} sin conexión',
@@ -1535,6 +1558,7 @@ export const es: Dict = {
 	'studio.slotMask': 'Máscara',
 	'studio.slotFirst': 'Primer fotograma',
 	'studio.slotLast': 'Último fotograma',
+	'studio.slotOptional': 'Opcional',
 	'studio.slotRefVideo': 'Vídeo de referencia',
 	'studio.slotAudio': 'Audio de referencia',
 	'studio.slotPick': 'Haz clic o arrastra',
@@ -1609,7 +1633,11 @@ export const es: Dict = {
 	'studio.delConfirm': 'Al eliminar también se quitan los archivos de resultados de esta tarea; el historial no se puede restaurar. ¿Eliminar?',
 	'studio.delTitleJob': 'Eliminar tarea «{name}»',
 	'studio.delConfirmMulti': 'Esta tarea produjo {n} resultados. Al eliminarla se quita el registro completo y los {n} archivos de resultados; no se puede deshacer. ¿Eliminar?',
+	'studio.deleteFailedToast': 'No se pudo eliminar: {detail}',
+	'studio.deletedTakeNoFilesToast': 'Se eliminó «{name}»',
+	'studio.deletedTakeToast': 'Se eliminó «{name}» junto con sus archivos de resultado',
 	'studio.deletedToast': 'Tarea eliminada junto con sus archivos de resultados',
+	'studio.wfDeletedTag': 'Flujo eliminado',
 	'studio.wfEmptyTitle': 'Aún no hay flujos de {kind}',
 	'studio.wfEmptyBody': 'Activa el modo desarrollador de ComfyUI, exporta el flujo como JSON API e impórtalo en Conexiones ComfyUI como {kind}.',
 	'studio.wfEmptyGo': 'Importar en Conexiones ComfyUI',
@@ -1628,9 +1656,12 @@ export const es: Dict = {
 	'tasks.subtitle': 'Todas las tareas de imagen / vídeo: ventanas independientes y flujo de creación',
 	'tasks.filterAll': 'Todas',
 	'tasks.filterImage': 'Imágenes',
+	'tasks.filterFailed': 'Fallidas',
+	'tasks.filterActive': 'En curso',
 	'tasks.filterVideo': 'Vídeos',
 	'tasks.count': '{n} tareas · {m} activas',
 	'tasks.empty': 'Aún no hay tareas. Envía la primera en Imagen o Vídeo.',
+	'tasks.emptyFiltered': 'Ninguna tarea coincide con el filtro actual.',
 	'tasks.goGenerate': 'Abrir Imagen',
 	'tasks.sourceStudioImage': 'Imagen independiente',
 	'tasks.sourceStudioVideo': 'Vídeo independiente',
@@ -1644,8 +1675,10 @@ export const es: Dict = {
 	'tasks.retry': 'Reintentar',
 	'tasks.cancel': 'Cancelar',
 	'tasks.delete': 'Eliminar',
+	'tasks.download': 'Descargar',
 	'tasks.delTitle': 'Eliminar tarea',
 	'tasks.delConfirm': 'Los archivos de resultados se eliminarán junto con la tarea. ¿Eliminar?',
+	'tasks.searchPh': 'Buscar tareas…',
 	'tasks.outputs': '{n} resultados',
 
 	'agentsPage.title': 'Agentes',
@@ -1869,12 +1902,14 @@ export const es: Dict = {
 	'home.stageProgress': 'Progreso de cinco etapas',
 	'tasks.sourceWorkbench': 'Flujo de creación',
 	'jobst.idSuffix': ' · ID de prompt de ComfyUI {id}',
-	'jobst.done': 'Listo',
+	'jobst.done': 'Fijado',
 	'jobst.doneDetail': 'ComfyUI terminó y los resultados se guardaron',
 	'jobst.dryRun': 'Marcador',
 	'jobst.dryRunDetail': 'Solo marcador: Dry-run activo, no se llamó a ComfyUI',
 	'jobst.noOutput': 'Sin salida',
 	'jobst.noOutputDetail': 'El trabajo terminó sin archivos de resultado: no cuenta como generado',
+	'jobst.missing': 'Archivos no disponibles',
+	'jobst.missingDetail': 'La tarea terminó correctamente, pero sus archivos ya no están en el servidor',
 	'jobst.queued': 'En cola',
 	'jobst.queuedDetail': 'Esperando en la cola del taller para enviarse a ComfyUI',
 	'jobst.connecting': 'Conectando',
@@ -1994,6 +2029,9 @@ export const es: Dict = {
 	'desk.kvName': 'Nombre',
 	'desk.kvPromptId': 'ID de ComfyUI',
 	'desk.kvUsage': 'Uso',
+	'desk.loadEarlier': 'Mostrar {n} tomas anteriores',
+	'desk.missingSub': 'Rehacer con los mismos parámetros, o quitar esta toma',
+	'desk.missingTitle': 'Los archivos de resultado ya no están en el servidor',
 	'desk.needWorkflow': 'Falta: flujo',
 	'desk.noConn': 'Sin conexión',
 	'desk.noPromptInput': 'Este flujo no tiene prompt; se ejecuta con sus propios valores.',
@@ -2014,6 +2052,8 @@ export const es: Dict = {
 	'desk.promptOnly': 'Solo prompt',
 	'desk.promptPh': 'Describe la escena… (Ctrl/⌘ + Enter genera, / enfoca)',
 	'desk.restoreAll': 'Restaurar todos los valores del flujo',
+	'desk.redo': 'Rehacer con los mismos parámetros',
+	'desk.removeRecord': 'Quitar el registro',
 	'desk.restoreOrig': 'Restaurar original',
 	'desk.reuse': 'Reutilizar',
 	'desk.reuseToComposer': 'Reutilizar en el editor',
@@ -2041,4 +2081,152 @@ export const es: Dict = {
 	'desk.wfUntested': 'Sin probar',
 	'desk.workflow': 'Flujo',
 	'desk.yesterday': 'Ayer',
+	'wfd.stepParse': 'Analizar JSON',
+	'wfd.stepNodes': 'Identificar nodos',
+	'wfd.stepModels': 'Verificar modelos',
+	'wfd.stepSlots': 'Crear slots de entrada',
+	'wfd.noOutput': 'El flujo no tiene nodos de salida; no se puede importar',
+	'wfd.nodesAutoOk': 'Uso detectado automáticamente: {usage}',
+	'wfd.nodesUserOk': 'Uso confirmado: {usage}',
+	'wfd.modelsOk': '«{name}» tiene todos los nodos y modelos necesarios',
+	'wfd.slotsOk': '{n} slot(s) de entrada creados ({m} de medios)',
+	'wfd.checksAria': 'Resultados de la comprobación de importación',
+	'wfd.showDetails': 'Mostrar detalles del error',
+	'wfd.hideDetails': 'Ocultar detalles del error',
+	'wfd.unreachableSuggest': 'No poder verificar no impide guardar; vuelve a comprobar tras arreglar la conexión.',
+	'wfd.nodesPickSuggest': 'Elige el uso y completa el mapeo de salida abajo antes de guardar.',
+	'wfd.showRaw': 'Ver JSON original',
+	'wfd.hideRaw': 'Ocultar JSON original',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'Importa por lotes flujos en formato UI; busca, filtra y anota — el JSON completo solo se carga al actuar',
+	'wl.batchImport': 'Importar por lotes',
+	'wl.dedupe': 'Deduplicar',
+	'wl.dedupeTitle': 'Eliminar flujos duplicados',
+	'wl.dedupeConfirm': 'Se eliminan las entradas con nombre Y contenido idénticos (se conserva la primera importada). Mismo nombre con contenido distinto no se toca. ¿Continuar?',
+	'wl.dedupeDone': 'Se eliminaron {n} flujos duplicados',
+	'wl.dedupeNone': 'No se encontraron flujos duplicados',
+	'wl.favCount': '{n} favoritos',
+	'wl.searchPh': 'Buscar nombre, descripción, etiquetas, modelo… (pulsa /)',
+	'wl.filterLabel': 'Filtros',
+	'wl.filterAll': 'Todos',
+	'wl.filterFav': 'Favoritos',
+	'wl.filterPending': 'Pendientes',
+	'wl.filterDisabled': 'Desactivados',
+	'wl.favAria': 'Marcar como favorito',
+	'wl.unfavAria': 'Quitar de favoritos',
+	'wl.categoryLabel': 'Categoría',
+	'wl.categoryAll': 'Todas las categorías',
+	'wl.familyLabel': 'Familia de modelo',
+	'wl.familyAll': 'Todas las familias',
+	'wl.mediaLabel': 'Medio',
+	'wl.mediaAll': 'Todos los medios',
+	'wl.mediaImage': 'Imagen',
+	'wl.mediaVideo': 'Vídeo',
+	'wl.mediaAudio': 'Audio',
+	'wl.mediaIn': 'Entrada',
+	'wl.mediaOut': 'Salida',
+	'wl.sortLabel': 'Orden',
+	'wl.sortRecent': 'Favoritos / recientes',
+	'wl.sortName': 'Nombre',
+	'wl.resetFilters': 'Limpiar filtros',
+	'wl.noMatch': 'Ningún flujo coincide con los filtros',
+	'wl.resultCount': '{n} de {m}',
+	'wl.selected': '{n} seleccionados',
+	'wl.batchLabel': 'Acciones por lotes',
+	'wl.batchAnnotate': 'Anotar',
+	'wl.batchEnable': 'Activar',
+	'wl.batchDisable': 'Desactivar',
+	'wl.clearSel': 'Limpiar selección',
+	'wl.batchDone': '{n} flujos actualizados',
+	'wl.batchPartial': '{n} con éxito, {m} fallidos (confirma antes uso y salida)',
+	'wl.selectAll': 'Seleccionar todos los flujos listados',
+	'wl.rowCheckAria': 'Seleccionar {name}',
+	'wl.headMeta': 'Metadatos',
+	'wl.headActions': 'Acciones',
+	'wl.enableAria': 'Activar o desactivar {name}',
+	'wl.enableBlocked': 'Confirma uso y nodos de salida antes de activar',
+	'wl.editMeta': 'Editar metadatos',
+	'wl.lastUsed': 'Último uso',
+	'wl.moreCount': 'Mostrar {n} más ({m} en total)',
+	'wfCat.basic': 'Procesamiento básico',
+	'wfCat.audioTts': 'Generación de voz',
+	'wfCat.music': 'Generación de música',
+	'wfCat.image': 'Generación de imágenes',
+	'wfCat.video': 'Generación de vídeo',
+	'wfCat.digitalHuman': 'Humano digital',
+	'wfCat.motionTransfer': 'Transferencia de movimiento',
+	'md.title': 'Metadatos del flujo',
+	'md.batchTitle': 'Anotar por lotes ({n})',
+	'md.batchHint': 'Solo se aplican los campos rellenados; los nombres se renombran con buscar→reemplazar y las etiquetas se añaden.',
+	'md.name': 'Nombre visible',
+	'md.nameFind': 'Buscar',
+	'md.nameFindPh': 'Texto a reemplazar…',
+	'md.nameReplace': 'Reemplazar por',
+	'md.nameReplacePh': 'Texto de reemplazo…',
+	'md.nameHint': 'Deja «Buscar» vacío para no cambiar nombres.',
+	'md.description': 'Descripción',
+	'md.descriptionPh': 'Una línea sobre qué hace este flujo…',
+	'md.tags': 'Etiquetas',
+	'md.tagsPh': 'p. ej. rápido, alta calidad',
+	'md.tagsHint': 'Separadas por comas; en lote se añaden.',
+	'md.category': 'Categoría',
+	'md.modelFamily': 'Familia de modelo',
+	'md.apply': 'Aplicar',
+	'md.applied': '{n} flujos actualizados',
+	'md.appliedOne': 'Actualizado',
+	'md.partial': '{n} con éxito, {m} fallidos',
+	'wiz.title': 'Importar flujos por lotes',
+	'wiz.stepSource': 'Origen',
+	'wiz.stepReport': 'Informe de prueba',
+	'wiz.stepResult': 'Resultado',
+	'wiz.sourceLabel': 'Origen de importación',
+	'wiz.modeScan': 'Escanear carpeta del servidor',
+	'wiz.modeFiles': 'Elegir archivos locales',
+	'wiz.rootLabel': 'Carpeta del servidor',
+	'wiz.rootHint': 'Ruta de carpeta en el servidor (p. ej. example_ComfyUI_workflows del repo); se escanean recursivamente los JSON en formato UI, el formato API y otros JSON se omiten.',
+	'wiz.preflight': 'Preflight contra un ComfyUI real (opcional)',
+	'wiz.preflightNone': 'Omitir (conversión sin conexión)',
+	'wiz.preflightHint': 'Con una conexión elegida, los grafos convertidos se verifican nodo a nodo.',
+	'wiz.pickFiles': 'Archivos locales',
+	'wiz.pickFilesBtn': 'Elegir archivos JSON (varios)',
+	'wiz.pickFilesHint': 'Elige JSON de flujos ComfyUI en formato UI; se admite selección múltiple.',
+	'wiz.parsed': '{n} archivos leídos',
+	'wiz.notUi': '{n} archivos no son formato UI (sin array nodes) y se omitieron',
+	'wiz.noFiles': 'Elige primero los archivos a importar',
+	'wiz.runDry': 'Ejecutar prueba (no se guarda nada)',
+	'wiz.running': 'Comprobando…',
+	'wiz.total': '{n} archivos',
+	'wiz.ok': 'OK {n}',
+	'wiz.warn': 'Avisos {n}',
+	'wiz.fail': 'Fallos {n}',
+	'wiz.confirmCount': 'Requieren revisión {n}',
+	'wiz.importable': 'Importables {n}',
+	'wiz.reportHint': 'La prueba no guarda nada. Los avisos se importan activados al indicar un uso; los que requieren revisión o fallaron nunca se importan.',
+	'wiz.filterLabel': 'Filtros del informe',
+	'wiz.filterWarn': 'Solo avisos',
+	'wiz.filterBlocked': 'No importables',
+	'wiz.searchPh': 'Buscar nombre de archivo…',
+	'wiz.includeAria': 'Importar {name}',
+	'wiz.skipReason': 'No importable: {reason}',
+	'wiz.issues': '{n} notas de conversión',
+	'wiz.usagePick': 'Uso:',
+	'wiz.usageNone': 'Omitir por ahora (pendiente tras importar)',
+	'wiz.selectedN': 'Se importarán {n} archivos',
+	'wiz.excludedM': '{m} no importables',
+	'wiz.import': 'Importar',
+	'wiz.importing': 'Importando…',
+	'wiz.back': 'Atrás',
+	'wiz.imported': '{n} importados',
+	'wiz.skipped': '{n} omitidos',
+	'wiz.conflict': 'Ya existe (duplicado omitido)',
+	'wiz.usageApplied': 'Uso indicado para {n} importaciones nuevas',
+	'wiz.done': 'Hecho',
+	'wiz.again': 'Importar otro lote',
+	'wiz.resultNote': 'Los archivos con contenido idéntico se omiten automáticamente; repetir no crea duplicados.',
+	'wiz.importedToast': '{n} flujos importados',
+	'wiz.warnTag': 'Aviso',
+	'wiz.confirmTag': 'Requiere revisión',
+	'wiz.preflightTag': 'Preflight fallido',
+	'wiz.importedTag': 'Importado #{id}',
 };

calliope-web/src/lib/i18n/fr.ts

@@ -64,6 +64,7 @@ export const fr: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': 'Ignorer',
+	'toast.undo': 'Annuler',
 	'toast.uploadFailed': "Échec de l'import",
 
 	// --- Modal ---
@@ -220,6 +221,25 @@ export const fr: Dict = {
 	'lightbox.videoPreview': 'Aperçu de la vidéo',
 	'lightbox.videoUnavailable': 'Vidéo indisponible',
 	'lightbox.zoom100': '100 %',
+	'lastFrame.export': 'Exporter la dernière image',
+	'lastFrame.exporting': 'Export de la dernière image…',
+	'lastFrame.hint': 'Enregistre la dernière image en PNG pleine taille, p. ex. comme référence de première image',
+	'lastFrame.fileTag': 'derniere-image',
+	'lastFrame.done': 'Dernière image exportée {name} ({size})',
+	'lastFrame.errTimeout': 'Le chargement de la vidéo a expiré. Réessayez plus tard.',
+	'lastFrame.errNotFound': 'Le fichier vidéo est introuvable ou a été supprimé.',
+	'lastFrame.errForbidden': "Vous n'avez pas l'autorisation de lire cette vidéo.",
+	'lastFrame.errNetwork': 'Lecture de la vidéo impossible (erreur réseau).',
+	'lastFrame.errDecode': 'La vidéo est endommagée ; sa fin ne peut pas être décodée.',
+	'lastFrame.errUnsupported': 'Ce navigateur ne prend pas en charge ce format vidéo, ou le fichier est endommagé.',
+	'lastFrame.errCrossOrigin':
+		"La vidéo provient d'un autre site qui bloque la lecture des images (cross-origin). Téléchargez d'abord la vidéo.",
+	'lastFrame.errNoPicture': "Ce fichier ne contient pas d'image vidéo.",
+	'lastFrame.errUnseekable':
+		"Impossible d'atteindre la fin de la vidéo (durée inconnue ou source sans recherche) ; aucune image exportée.",
+	'lastFrame.errBlack': 'La dernière seconde de la vidéo est noire ; aucune image exportée.',
+	'lastFrame.errEmpty': "Le navigateur n'a pas pu décoder la fin. Réessayez ou utilisez Chrome / Edge sur ordinateur.",
+	'lastFrame.errUnknown': "Échec de l'export de la dernière image : {msg}",
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': 'Artefact',
@@ -948,6 +968,8 @@ export const fr: Dict = {
 	'library.selectAll': 'Tout sélectionner',
 	'library.deselectAll': 'Tout désélectionner',
 	'library.itemCount': '{count} élément(s)',
+	'library.loadError': 'Échec du chargement de la bibliothèque',
+	'library.subtitle': 'Les ressources générées au même endroit : prévisualisez, filtrez et supprimez les images et vidéos sans projet',
 	'library.deleteSelected': 'Supprimer ({count})',
 	'library.addToProject': 'Ajouter au projet',
 	'library.filterLabel': 'Filtrer par type',
@@ -1259,6 +1281,7 @@ export const fr: Dict = {
 	'shell.navAgents': 'Agents',
 	'shell.navConnections': 'Connexions ComfyUI',
 	'shell.navModels': 'Modèles',
+	'shell.navLibrary': 'Bibliothèque d’assets',
 	'shell.navSettings': 'Réglages',
 	'shell.comfy_ok': '{name} connecté',
 	'shell.comfy_fail': '{name} injoignable',
@@ -1535,6 +1558,7 @@ export const fr: Dict = {
 	'studio.slotMask': 'Masque',
 	'studio.slotFirst': 'Premier cadre',
 	'studio.slotLast': 'Dernier cadre',
+	'studio.slotOptional': 'Facultatif',
 	'studio.slotRefVideo': 'Vidéo de référence',
 	'studio.slotAudio': 'Audio de référence',
 	'studio.slotPick': 'Cliquez ou déposez',
@@ -1609,7 +1633,11 @@ export const fr: Dict = {
 	'studio.delConfirm': 'La suppression retire aussi les fichiers de résultats de cette tâche ; l’historique est irrécupérable. Supprimer ?',
 	'studio.delTitleJob': 'Supprimer la tâche « {name} »',
 	'studio.delConfirmMulti': 'Cette tâche a produit {n} résultats. La suppression retire la tâche entière et ses {n} fichiers de résultats ; action irréversible. Supprimer ?',
+	'studio.deleteFailedToast': 'Échec de la suppression : {detail}',
+	'studio.deletedTakeNoFilesToast': '« {name} » supprimé',
+	'studio.deletedTakeToast': '« {name} » et ses fichiers de résultat ont été supprimés',
 	'studio.deletedToast': 'Tâche supprimée avec ses fichiers de résultats',
+	'studio.wfDeletedTag': 'Workflow supprimé',
 	'studio.wfEmptyTitle': 'Pas encore de workflows {kind}',
 	'studio.wfEmptyBody': 'Activez le mode développeur de ComfyUI, exportez le workflow en JSON API, puis importez-le dans Connexions ComfyUI comme {kind}.',
 	'studio.wfEmptyGo': 'Importer dans Connexions ComfyUI',
@@ -1628,9 +1656,12 @@ export const fr: Dict = {
 	'tasks.subtitle': 'Toutes les tâches image / vidéo : fenêtres indépendantes et flux de création',
 	'tasks.filterAll': 'Toutes',
 	'tasks.filterImage': 'Images',
+	'tasks.filterFailed': 'Échecs',
+	'tasks.filterActive': 'En cours',
 	'tasks.filterVideo': 'Vidéos',
 	'tasks.count': '{n} tâches · {m} actives',
 	'tasks.empty': 'Aucune tâche. Lancez la première dans Image ou Vidéo.',
+	'tasks.emptyFiltered': 'Aucune tâche ne correspond au filtre actuel.',
 	'tasks.goGenerate': 'Ouvrir Image',
 	'tasks.sourceStudioImage': 'Image indépendante',
 	'tasks.sourceStudioVideo': 'Vidéo indépendante',
@@ -1644,8 +1675,10 @@ export const fr: Dict = {
 	'tasks.retry': 'Réessayer',
 	'tasks.cancel': 'Annuler',
 	'tasks.delete': 'Supprimer',
+	'tasks.download': 'Télécharger',
 	'tasks.delTitle': 'Supprimer la tâche',
 	'tasks.delConfirm': 'Les fichiers de résultats seront supprimés avec la tâche. Supprimer ?',
+	'tasks.searchPh': 'Rechercher des tâches…',
 	'tasks.outputs': '{n} résultats',
 
 	'agentsPage.title': 'Agents',
@@ -1869,12 +1902,14 @@ export const fr: Dict = {
 	'home.stageProgress': 'Progression en cinq étapes',
 	'tasks.sourceWorkbench': 'Flux de création',
 	'jobst.idSuffix': ' · ID de prompt ComfyUI {id}',
-	'jobst.done': 'Terminé',
+	'jobst.done': 'Fixé',
 	'jobst.doneDetail': 'ComfyUI a terminé, résultats enregistrés',
 	'jobst.dryRun': 'Substitut',
 	'jobst.dryRunDetail': 'Substitut uniquement : Dry-run actif, ComfyUI n\'a pas été appelé',
 	'jobst.noOutput': 'Aucune sortie',
 	'jobst.noOutputDetail': 'La tâche s\'est terminée sans fichier de résultat : pas une génération',
+	'jobst.missing': 'Fichiers manquants',
+	'jobst.missingDetail': 'La tâche a réussi, mais ses fichiers ne sont plus sur le serveur',
 	'jobst.queued': 'En attente',
 	'jobst.queuedDetail': 'En attente dans la file de l\'atelier avant envoi à ComfyUI',
 	'jobst.connecting': 'Connexion',
@@ -1994,6 +2029,9 @@ export const fr: Dict = {
 	'desk.kvName': 'Nom',
 	'desk.kvPromptId': 'ID ComfyUI',
 	'desk.kvUsage': 'Usage',
+	'desk.loadEarlier': 'Afficher {n} prises plus anciennes',
+	'desk.missingSub': 'Refaire avec les mêmes paramètres, ou retirer cette prise',
+	'desk.missingTitle': 'Les fichiers de résultat ne sont plus sur le serveur',
 	'desk.needWorkflow': 'Manque : workflow',
 	'desk.noConn': 'Non connecté',
 	'desk.noPromptInput': 'Ce workflow n’a pas de prompt ; il s’exécute avec ses propres valeurs.',
@@ -2014,6 +2052,8 @@ export const fr: Dict = {
 	'desk.promptOnly': 'Prompt seul',
 	'desk.promptPh': 'Décrivez l’image… (Ctrl/⌘ + Entrée pour générer, / pour cibler)',
 	'desk.restoreAll': 'Rétablir toutes les valeurs du workflow',
+	'desk.redo': 'Refaire avec les mêmes paramètres',
+	'desk.removeRecord': 'Retirer la ligne',
 	'desk.restoreOrig': 'Rétablir l’original',
 	'desk.reuse': 'Réutiliser',
 	'desk.reuseToComposer': 'Réutiliser dans l’éditeur',
@@ -2041,4 +2081,152 @@ export const fr: Dict = {
 	'desk.wfUntested': 'Non testé',
 	'desk.workflow': 'Workflow',
 	'desk.yesterday': 'Hier',
+	'wfd.stepParse': 'Analyser le JSON',
+	'wfd.stepNodes': 'Identifier les nœuds',
+	'wfd.stepModels': 'Vérifier les modèles',
+	'wfd.stepSlots': 'Créer les slots d’entrée',
+	'wfd.noOutput': "Le flux n'a aucun nœud de sortie — import impossible",
+	'wfd.nodesAutoOk': 'Usage détecté automatiquement : {usage}',
+	'wfd.nodesUserOk': 'Usage confirmé : {usage}',
+	'wfd.modelsOk': '« {name} » possède tous les nœuds et modèles requis',
+	'wfd.slotsOk': "{n} slot(s) d'entrée créés ({m} média)",
+	'wfd.checksAria': "Résultats de la vérification d'import",
+	'wfd.showDetails': "Afficher les détails de l'erreur",
+	'wfd.hideDetails': "Masquer les détails de l'erreur",
+	'wfd.unreachableSuggest': "L'impossibilité de vérifier n'empêche pas l'enregistrement ; revérifiez après avoir réparé la connexion.",
+	'wfd.nodesPickSuggest': "Choisissez l'usage et terminez le mappage des sorties ci-dessous avant d'enregistrer.",
+	'wfd.showRaw': 'Voir le JSON brut',
+	'wfd.hideRaw': 'Masquer le JSON brut',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'Importez par lots des flux au format UI ; cherchez, filtrez, annotez — le JSON complet ne se charge qu’à l’action',
+	'wl.batchImport': 'Import par lot',
+	'wl.dedupe': 'Dédupliquer',
+	'wl.dedupeTitle': 'Supprimer les flux dupliqués',
+	'wl.dedupeConfirm': 'Les entrées au nom ET contenu identiques seront supprimées (le premier import est conservé). Même nom mais contenu différent = votre variante, intact. Continuer ?',
+	'wl.dedupeDone': '{n} flux dupliqués supprimés',
+	'wl.dedupeNone': 'Aucun flux dupliqué trouvé',
+	'wl.favCount': '{n} favoris',
+	'wl.searchPh': 'Rechercher nom, description, tags, modèle… (touche /)',
+	'wl.filterLabel': 'Filtres',
+	'wl.filterAll': 'Tous',
+	'wl.filterFav': 'Favoris',
+	'wl.filterPending': 'À confirmer',
+	'wl.filterDisabled': 'Désactivés',
+	'wl.favAria': 'Mettre en favori',
+	'wl.unfavAria': 'Retirer des favoris',
+	'wl.categoryLabel': 'Catégorie',
+	'wl.categoryAll': 'Toutes les catégories',
+	'wl.familyLabel': 'Famille de modèle',
+	'wl.familyAll': 'Toutes les familles',
+	'wl.mediaLabel': 'Média',
+	'wl.mediaAll': 'Tous les médias',
+	'wl.mediaImage': 'Image',
+	'wl.mediaVideo': 'Vidéo',
+	'wl.mediaAudio': 'Audio',
+	'wl.mediaIn': 'Entrée',
+	'wl.mediaOut': 'Sortie',
+	'wl.sortLabel': 'Tri',
+	'wl.sortRecent': 'Favoris / récents',
+	'wl.sortName': 'Nom',
+	'wl.resetFilters': 'Effacer les filtres',
+	'wl.noMatch': 'Aucun flux ne correspond aux filtres',
+	'wl.resultCount': '{n} sur {m}',
+	'wl.selected': '{n} sélectionnés',
+	'wl.batchLabel': 'Actions groupées',
+	'wl.batchAnnotate': 'Annoter',
+	'wl.batchEnable': 'Activer',
+	'wl.batchDisable': 'Désactiver',
+	'wl.clearSel': 'Effacer la sélection',
+	'wl.batchDone': '{n} flux mis à jour',
+	'wl.batchPartial': '{n} réussis, {m} échoués (usage et sortie à confirmer d’abord)',
+	'wl.selectAll': 'Sélectionner tous les flux listés',
+	'wl.rowCheckAria': 'Sélectionner {name}',
+	'wl.headMeta': 'Métadonnées',
+	'wl.headActions': 'Actions',
+	'wl.enableAria': 'Activer ou désactiver {name}',
+	'wl.enableBlocked': 'Confirmez l’usage et les nœuds de sortie avant activation',
+	'wl.editMeta': 'Modifier les métadonnées',
+	'wl.lastUsed': 'Dernière utilisation',
+	'wl.moreCount': 'Afficher {n} de plus ({m} au total)',
+	'wfCat.basic': 'Traitement de base',
+	'wfCat.audioTts': 'Génération de voix',
+	'wfCat.music': 'Génération de musique',
+	'wfCat.image': 'Génération d’images',
+	'wfCat.video': 'Génération de vidéo',
+	'wfCat.digitalHuman': 'Humain numérique',
+	'wfCat.motionTransfer': 'Transfert de mouvement',
+	'md.title': 'Métadonnées du flux',
+	'md.batchTitle': 'Annotation groupée ({n})',
+	'md.batchHint': 'Seuls les champs remplis sont appliqués ; renommage par rechercher→remplacer, tags ajoutés.',
+	'md.name': 'Nom affiché',
+	'md.nameFind': 'Rechercher',
+	'md.nameFindPh': 'Texte à remplacer…',
+	'md.nameReplace': 'Remplacer par',
+	'md.nameReplacePh': 'Texte de remplacement…',
+	'md.nameHint': 'Laissez « Rechercher » vide pour ne pas renommer.',
+	'md.description': 'Description',
+	'md.descriptionPh': 'Une ligne sur ce que fait ce flux…',
+	'md.tags': 'Tags',
+	'md.tagsPh': 'ex. rapide, haute qualité',
+	'md.tagsHint': 'Séparés par des virgules ; ajoutés en mode groupé.',
+	'md.category': 'Catégorie',
+	'md.modelFamily': 'Famille de modèle',
+	'md.apply': 'Appliquer',
+	'md.applied': '{n} flux mis à jour',
+	'md.appliedOne': 'Mis à jour',
+	'md.partial': '{n} réussis, {m} échoués',
+	'wiz.title': 'Import de flux par lot',
+	'wiz.stepSource': 'Source',
+	'wiz.stepReport': 'Rapport de test',
+	'wiz.stepResult': 'Résultat',
+	'wiz.sourceLabel': 'Source d’import',
+	'wiz.modeScan': 'Scanner un dossier serveur',
+	'wiz.modeFiles': 'Choisir des fichiers locaux',
+	'wiz.rootLabel': 'Dossier serveur',
+	'wiz.rootHint': 'Chemin d’un dossier sur le serveur (ex. example_ComfyUI_workflows du dépôt) ; les JSON au format UI sont scannés récursivement, le format API et les autres sont ignorés.',
+	'wiz.preflight': 'Pré-vérification sur un ComfyUI réel (facultatif)',
+	'wiz.preflightNone': 'Passer (conversion hors ligne)',
+	'wiz.preflightHint': 'Avec une connexion choisie, les graphes convertis sont vérifiés nœud par nœud.',
+	'wiz.pickFiles': 'Fichiers locaux',
+	'wiz.pickFilesBtn': 'Choisir des fichiers JSON (plusieurs)',
+	'wiz.pickFilesHint': 'Choisissez des flux ComfyUI au format UI ; sélection multiple possible.',
+	'wiz.parsed': '{n} fichiers lus',
+	'wiz.notUi': '{n} fichiers ne sont pas au format UI (pas de tableau nodes), ignorés',
+	'wiz.noFiles': 'Choisissez d’abord des fichiers à importer',
+	'wiz.runDry': 'Lancer le test (rien n’est enregistré)',
+	'wiz.running': 'Vérification…',
+	'wiz.total': '{n} fichiers',
+	'wiz.ok': 'OK {n}',
+	'wiz.warn': 'Avertissements {n}',
+	'wiz.fail': 'Échecs {n}',
+	'wiz.confirmCount': 'À vérifier {n}',
+	'wiz.importable': 'Importables {n}',
+	'wiz.reportHint': 'Le test n’écrit rien. Les avertissements s’importent activés dès qu’un usage est fourni ; les fichiers à vérifier ou en échec ne sont jamais importés.',
+	'wiz.filterLabel': 'Filtres du rapport',
+	'wiz.filterWarn': 'Avertissements seuls',
+	'wiz.filterBlocked': 'Non importables',
+	'wiz.searchPh': 'Rechercher un nom de fichier…',
+	'wiz.includeAria': 'Importer {name}',
+	'wiz.skipReason': 'Non importable : {reason}',
+	'wiz.issues': '{n} notes de conversion',
+	'wiz.usagePick': 'Usage :',
+	'wiz.usageNone': 'Passer pour l’instant (à confirmer après import)',
+	'wiz.selectedN': '{n} fichiers seront importés',
+	'wiz.excludedM': '{m} non importables',
+	'wiz.import': 'Importer',
+	'wiz.importing': 'Import…',
+	'wiz.back': 'Retour',
+	'wiz.imported': '{n} importés',
+	'wiz.skipped': '{n} ignorés',
+	'wiz.conflict': 'Existe déjà (doublon ignoré)',
+	'wiz.usageApplied': 'Usage fourni pour {n} nouveaux imports',
+	'wiz.done': 'Terminé',
+	'wiz.again': 'Importer un autre lot',
+	'wiz.resultNote': 'Les fichiers au contenu identique sont ignorés automatiquement — relancer ne crée jamais de doublons.',
+	'wiz.importedToast': '{n} flux importés',
+	'wiz.warnTag': 'Avertissement',
+	'wiz.confirmTag': 'À vérifier',
+	'wiz.preflightTag': 'Pré-vérification échouée',
+	'wiz.importedTag': 'Importé #{id}',
 };

calliope-web/src/lib/i18n/ja.ts

@@ -64,6 +64,7 @@ export const ja: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': '閉じる',
+	'toast.undo': '元に戻す',
 	'toast.uploadFailed': 'アップロードに失敗しました',
 
 	// --- Modal ---
@@ -220,6 +221,23 @@ export const ja: Dict = {
 	'lightbox.videoPreview': 'ビデオプレビュー',
 	'lightbox.videoUnavailable': 'ビデオを再生できません',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': '最終フレームを書き出す',
+	'lastFrame.exporting': '最終フレームを書き出し中…',
+	'lastFrame.hint': '動画の最後のフレームを元のサイズの PNG で保存します（先頭フレーム参照用）',
+	'lastFrame.fileTag': '最終フレーム',
+	'lastFrame.done': '最終フレームを書き出しました {name}（{size}）',
+	'lastFrame.errTimeout': '動画の読み込みがタイムアウトしました。後でもう一度お試しください。',
+	'lastFrame.errNotFound': '動画ファイルが存在しないか削除されています。',
+	'lastFrame.errForbidden': 'この動画へのアクセス権限がありません。',
+	'lastFrame.errNetwork': '動画の読み込みに失敗しました（ネットワークエラー）。',
+	'lastFrame.errDecode': '動画が破損しており、末尾をデコードできません。',
+	'lastFrame.errUnsupported': 'このブラウザーは動画形式に対応していないか、ファイルが破損しています。',
+	'lastFrame.errCrossOrigin': '他サイトの動画のためフレームを読み取れません（クロスオリジン制限）。先に動画をダウンロードしてください。',
+	'lastFrame.errNoPicture': 'このファイルには映像がありません。',
+	'lastFrame.errUnseekable': '動画の末尾に移動できません（長さ不明、またはシーク非対応）。書き出しませんでした。',
+	'lastFrame.errBlack': '動画の最後の 1 秒が黒画面のため、書き出しませんでした。',
+	'lastFrame.errEmpty': '末尾をデコードできませんでした。再試行するか、PC の Chrome / Edge をお使いください。',
+	'lastFrame.errUnknown': '最終フレームの書き出しに失敗しました：{msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': '成果物',
@@ -948,6 +966,8 @@ export const ja: Dict = {
 	'library.selectAll': 'すべて選択',
 	'library.deselectAll': '選択を解除',
 	'library.itemCount': '{count} 件',
+	'library.loadError': 'ライブラリの読み込みに失敗しました',
+	'library.subtitle': '生成素材を一元管理——プロジェクトに紐付いていない画像・動画をプレビュー・絞り込み・削除できます',
 	'library.deleteSelected': '削除（{count}）',
 	'library.addToProject': 'プロジェクトに追加',
 	'library.filterLabel': '種類で絞り込み',
@@ -1259,6 +1279,7 @@ export const ja: Dict = {
 	'shell.navAgents': 'エージェント',
 	'shell.navConnections': 'ComfyUI 接続',
 	'shell.navModels': 'モデル設定',
+	'shell.navLibrary': 'アセットライブラリ',
 	'shell.navSettings': '設定',
 	'shell.comfy_ok': '{name} 接続済み',
 	'shell.comfy_fail': '{name} 接続失敗',
@@ -1535,6 +1556,7 @@ export const ja: Dict = {
 	'studio.slotMask': 'マスク',
 	'studio.slotFirst': '始端フレーム',
 	'studio.slotLast': '終端フレーム',
+	'studio.slotOptional': '任意',
 	'studio.slotRefVideo': '参照動画',
 	'studio.slotAudio': '参照音声',
 	'studio.slotPick': 'クリックまたはドロップ',
@@ -1609,7 +1631,11 @@ export const ja: Dict = {
 	'studio.delConfirm': '削除するとこのタスクの結果ファイルも削除され、履歴は元に戻せません。削除しますか？',
 	'studio.delTitleJob': 'タスク「{name}」を削除',
 	'studio.delConfirmMulti': 'このタスクには結果が {n} 件あります。削除するとタスク記録と {n} 件すべての結果ファイルが失われ、元に戻せません。削除しますか？',
+	'studio.deleteFailedToast': '削除に失敗しました：{detail}',
+	'studio.deletedTakeNoFilesToast': '「{name}」の記録を削除しました',
+	'studio.deletedTakeToast': '「{name}」の記録と結果ファイルを削除しました',
 	'studio.deletedToast': 'タスクと結果ファイルを削除しました',
+	'studio.wfDeletedTag': 'ワークフローは削除済み',
 	'studio.wfEmptyTitle': '{kind}ワークフローがまだありません',
 	'studio.wfEmptyBody': 'ComfyUI の開発者モードで API 形式 JSON を書き出し、「ComfyUI 接続」ページで{kind}として取り込んでください。',
 	'studio.wfEmptyGo': '「ComfyUI 接続」で取り込む',
@@ -1628,9 +1654,12 @@ export const ja: Dict = {
 	'tasks.subtitle': '独立画像・独立動画・創作フロー内の画像/動画タスクをまとめて表示',
 	'tasks.filterAll': 'すべて',
 	'tasks.filterImage': '画像',
+	'tasks.filterFailed': '失敗',
+	'tasks.filterActive': '実行中',
 	'tasks.filterVideo': '動画',
 	'tasks.count': '{n} 件 · 実行中 {m} 件',
 	'tasks.empty': '生成タスクがまだありません。「画像生成」「動画生成」から最初のタスクを送信してください。',
+	'tasks.emptyFiltered': '現在のフィルターに一致するタスクはありません。',
 	'tasks.goGenerate': '画像生成を開く',
 	'tasks.sourceStudioImage': '独立画像',
 	'tasks.sourceStudioVideo': '独立動画',
@@ -1644,8 +1673,10 @@ export const ja: Dict = {
 	'tasks.retry': '再試行',
 	'tasks.cancel': 'キャンセル',
 	'tasks.delete': '削除',
+	'tasks.download': 'ダウンロード',
 	'tasks.delTitle': 'タスクを削除',
 	'tasks.delConfirm': '結果ファイルも一緒に削除されます。削除しますか？',
+	'tasks.searchPh': 'タスクを検索…',
 	'tasks.outputs': '結果 {n} 件',
 
 	'agentsPage.title': 'エージェント',
@@ -1869,12 +1900,14 @@ export const ja: Dict = {
 	'home.stageProgress': '五段階の進捗',
 	'tasks.sourceWorkbench': '制作フロー',
 	'jobst.idSuffix': ' · ComfyUI プロンプト ID {id}',
-	'jobst.done': '完了',
+	'jobst.done': '定着',
 	'jobst.doneDetail': 'ComfyUI の実行が完了し、結果を保存しました',
 	'jobst.dryRun': 'プレースホルダー',
 	'jobst.dryRunDetail': 'プレースホルダーのみ：Dry-run が有効で ComfyUI は呼び出されていません',
 	'jobst.noOutput': '出力なし',
 	'jobst.noOutputDetail': '結果ファイルなしで終了しました（生成完了ではありません）',
+	'jobst.missing': 'ファイル欠落',
+	'jobst.missingDetail': 'タスクは成功しましたが、結果ファイルはサーバー上にありません',
 	'jobst.queued': '待機中',
 	'jobst.queuedDetail': 'ワークベンチのキューで ComfyUI への送信を待っています',
 	'jobst.connecting': '接続中',
@@ -1994,6 +2027,9 @@ export const ja: Dict = {
 	'desk.kvName': '名前',
 	'desk.kvPromptId': 'ComfyUI タスク ID',
 	'desk.kvUsage': '用途',
+	'desk.loadEarlier': '過去の {n} 件を表示',
+	'desk.missingSub': '同じパラメータでやり直すか、この記録を削除できます',
+	'desk.missingTitle': '結果ファイルはサーバー上にありません',
 	'desk.needWorkflow': '不足：ワークフロー',
 	'desk.noConn': '未接続',
 	'desk.noPromptInput': 'このワークフローにはプロンプト入力がなく、元の値で生成します。',
@@ -2014,6 +2050,8 @@ export const ja: Dict = {
 	'desk.promptOnly': 'プロンプトのみ',
 	'desk.promptPh': '欲しい画面を説明…（Ctrl/⌘ + Enter で生成、/ でフォーカス）',
 	'desk.restoreAll': 'すべてワークフローの値に戻す',
+	'desk.redo': '同じパラメータでやり直す',
+	'desk.removeRecord': '記録を削除',
 	'desk.restoreOrig': '元に戻す',
 	'desk.reuse': '再利用',
 	'desk.reuseToComposer': '入力台で再利用',
@@ -2041,4 +2079,152 @@ export const ja: Dict = {
 	'desk.wfUntested': '未テスト',
 	'desk.workflow': 'ワークフロー',
 	'desk.yesterday': '昨日',
+	'wfd.stepParse': 'JSON を解析',
+	'wfd.stepNodes': 'ノードを識別',
+	'wfd.stepModels': 'モデルを確認',
+	'wfd.stepSlots': '入力スロットを構築',
+	'wfd.noOutput': '出力ノードがないためインポートできません',
+	'wfd.nodesAutoOk': '用途を自動判定：{usage}',
+	'wfd.nodesUserOk': '用途を確認済み：{usage}',
+	'wfd.modelsOk': '「{name}」に必要なノードとモデルが揃っています',
+	'wfd.slotsOk': '入力スロット {n} 件を構築（うちメディア {m} 件）',
+	'wfd.checksAria': 'インポート検査結果',
+	'wfd.showDetails': 'エラー詳細を展開',
+	'wfd.hideDetails': 'エラー詳細を折りたたむ',
+	'wfd.unreachableSuggest': '検査できなくても保存は可能です。接続を直して「再チェック」してください。',
+	'wfd.nodesPickSuggest': '保存前に下で用途を選び、出力マッピングを完了してください。',
+	'wfd.showRaw': '元の JSON を見る',
+	'wfd.hideRaw': '元の JSON を閉じる',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'UI 形式ワークフローを一括取り込み、検索・絞り込み・注釈管理。完全な JSON は操作時のみ読み込み',
+	'wl.batchImport': '一括取り込み',
+	'wl.dedupe': '重複を削除',
+	'wl.dedupeTitle': '重複ワークフローの削除',
+	'wl.dedupeConfirm': '名前と内容が完全に同一の項目を削除します（最初に取り込んだものを残す）。名前が同じでも内容が異なるものは触れません。実行しますか？',
+	'wl.dedupeDone': '重複 {n} 件を削除しました',
+	'wl.dedupeNone': '重複するワークフローはありません',
+	'wl.favCount': 'お気に入り {n} 件',
+	'wl.searchPh': '名前・説明・タグ・モデルを検索…（/ で移動）',
+	'wl.filterLabel': '絞り込み',
+	'wl.filterAll': 'すべて',
+	'wl.filterFav': 'お気に入り',
+	'wl.filterPending': '要確認',
+	'wl.filterDisabled': '無効',
+	'wl.favAria': 'お気に入りに追加',
+	'wl.unfavAria': 'お気に入りから外す',
+	'wl.categoryLabel': 'カテゴリ',
+	'wl.categoryAll': 'すべてのカテゴリ',
+	'wl.familyLabel': 'モデルファミリー',
+	'wl.familyAll': 'すべてのファミリー',
+	'wl.mediaLabel': 'メディア',
+	'wl.mediaAll': 'すべてのメディア',
+	'wl.mediaImage': '画像',
+	'wl.mediaVideo': '動画',
+	'wl.mediaAudio': '音声',
+	'wl.mediaIn': '入力',
+	'wl.mediaOut': '出力',
+	'wl.sortLabel': '並び替え',
+	'wl.sortRecent': 'お気に入り / 最近',
+	'wl.sortName': '名前',
+	'wl.resetFilters': '絞り込みを解除',
+	'wl.noMatch': '条件に合うワークフローがありません',
+	'wl.resultCount': '{n} / {m} 件',
+	'wl.selected': '{n} 件選択中',
+	'wl.batchLabel': '一括操作',
+	'wl.batchAnnotate': '一括注釈',
+	'wl.batchEnable': '有効化',
+	'wl.batchDisable': '無効化',
+	'wl.clearSel': '選択を解除',
+	'wl.batchDone': '{n} 件を更新しました',
+	'wl.batchPartial': '{n} 件成功、{m} 件失敗（用途と出力の確認が必要）',
+	'wl.selectAll': '表示中のワークフローをすべて選択',
+	'wl.rowCheckAria': '{name} を選択',
+	'wl.headMeta': 'メタデータ',
+	'wl.headActions': '操作',
+	'wl.enableAria': '{name} を有効化・無効化',
+	'wl.enableBlocked': '用途と出力ノードを確定してから有効化してください',
+	'wl.editMeta': 'メタデータを編集',
+	'wl.lastUsed': '最終使用',
+	'wl.moreCount': 'さらに {n} 件表示（全 {m} 件）',
+	'wfCat.basic': '基本処理',
+	'wfCat.audioTts': '音声生成',
+	'wfCat.music': '音楽生成',
+	'wfCat.image': '画像生成',
+	'wfCat.video': '動画生成',
+	'wfCat.digitalHuman': 'デジタルヒューマン',
+	'wfCat.motionTransfer': 'モーション転送',
+	'md.title': 'ワークフローの注釈',
+	'md.batchTitle': '一括注釈（{n} 件）',
+	'md.batchHint': '入力したフィールドのみ適用。名前は検索→置換で変更、タグは追加されます。',
+	'md.name': '表示名',
+	'md.nameFind': '検索',
+	'md.nameFindPh': '置換する文字…',
+	'md.nameReplace': '置換後',
+	'md.nameReplacePh': '置換する文字…',
+	'md.nameHint': '「検索」が空なら名前は変更されません。',
+	'md.description': '説明',
+	'md.descriptionPh': 'このワークフローの用途を一行で…',
+	'md.tags': 'タグ',
+	'md.tagsPh': '例: 高速, 高品質',
+	'md.tagsHint': 'カンマ区切り。一括モードでは追加されます。',
+	'md.category': 'カテゴリ',
+	'md.modelFamily': 'モデルファミリー',
+	'md.apply': '適用',
+	'md.applied': '{n} 件を更新しました',
+	'md.appliedOne': '更新しました',
+	'md.partial': '{n} 件成功、{m} 件失敗',
+	'wiz.title': 'ワークフローの一括取り込み',
+	'wiz.stepSource': '取り込み元',
+	'wiz.stepReport': '事前チェック',
+	'wiz.stepResult': '結果',
+	'wiz.sourceLabel': '取り込み元',
+	'wiz.modeScan': 'サーバーディレクトリをスキャン',
+	'wiz.modeFiles': 'ローカルファイルを選択',
+	'wiz.rootLabel': 'サーバーディレクトリ',
+	'wiz.rootHint': 'サーバー上のディレクトリパス（例: リポジトリの example_ComfyUI_workflows）。UI 形式の JSON を再帰的にスキャンし、API 形式などは自動的にスキップします。',
+	'wiz.preflight': '実機 ComfyUI で事前チェック（任意）',
+	'wiz.preflightNone': 'スキップ（オフライン変換）',
+	'wiz.preflightHint': '接続を選ぶと、変換結果をその ComfyUI のノート・モデルと照合します。',
+	'wiz.pickFiles': 'ローカルファイル',
+	'wiz.pickFilesBtn': 'JSON ファイルを選択（複数可）',
+	'wiz.pickFilesHint': 'ComfyUI UI 形式のワークフロー JSON を選んでください。複数選択できます。',
+	'wiz.parsed': '{n} ファイルを読み込みました',
+	'wiz.notUi': '{n} ファイルは UI 形式でないため（nodes 配列なし）スキップしました',
+	'wiz.noFiles': '先に取り込むファイルを選んでください',
+	'wiz.runDry': '事前チェックを実行（保存しません）',
+	'wiz.running': 'チェック中…',
+	'wiz.total': '全体 {n} ファイル',
+	'wiz.ok': '正常 {n}',
+	'wiz.warn': '警告 {n}',
+	'wiz.fail': '失敗 {n}',
+	'wiz.confirmCount': '要確認 {n}',
+	'wiz.importable': '取り込み可 {n}',
+	'wiz.reportHint': '事前チェックは何も書き込みません。警告は用途を補えば有効な状態で取り込まれ、要確認・失敗のファイルは取り込まれません。',
+	'wiz.filterLabel': 'レポートの絞り込み',
+	'wiz.filterWarn': '警告のみ',
+	'wiz.filterBlocked': '取り込み不可',
+	'wiz.searchPh': 'ファイル名を検索…',
+	'wiz.includeAria': '{name} を取り込む',
+	'wiz.skipReason': '取り込み不可: {reason}',
+	'wiz.issues': '変換メモ {n} 件',
+	'wiz.usagePick': '用途：',
+	'wiz.usageNone': '今はスキップ（取り込み後に要確認）',
+	'wiz.selectedN': '{n} ファイルを取り込みます',
+	'wiz.excludedM': '{m} 件は取り込み不可',
+	'wiz.import': '取り込む',
+	'wiz.importing': '取り込み中…',
+	'wiz.back': '戻る',
+	'wiz.imported': '{n} 件取り込み完了',
+	'wiz.skipped': '{n} 件スキップ',
+	'wiz.conflict': '既に存在（重複は自動スキップ）',
+	'wiz.usageApplied': '新規取り込み {n} 件に用途を設定しました',
+	'wiz.done': '完了',
+	'wiz.again': '続けて取り込む',
+	'wiz.resultNote': '内容が同一のファイルは自動スキップされ、再実行しても重複は作られません。',
+	'wiz.importedToast': '{n} 件のワークフローを取り込みました',
+	'wiz.warnTag': '警告',
+	'wiz.confirmTag': '要確認',
+	'wiz.preflightTag': '事前チェック不合格',
+	'wiz.importedTag': '取り込み済み #{id}',
 };

calliope-web/src/lib/i18n/ko.ts

@@ -64,6 +64,7 @@ export const ko: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': '닫기',
+	'toast.undo': '실행 취소',
 	'toast.uploadFailed': '업로드 실패',
 
 	// --- Modal ---
@@ -220,6 +221,23 @@ export const ko: Dict = {
 	'lightbox.videoPreview': '영상 미리보기',
 	'lightbox.videoUnavailable': '영상을 표시할 수 없습니다',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': '마지막 프레임 내보내기',
+	'lastFrame.exporting': '마지막 프레임 내보내는 중…',
+	'lastFrame.hint': '영상의 마지막 프레임을 원본 크기 PNG로 저장합니다(첫 프레임 참조용)',
+	'lastFrame.fileTag': '마지막프레임',
+	'lastFrame.done': '마지막 프레임을 내보냈습니다 {name} ({size})',
+	'lastFrame.errTimeout': '영상 로딩 시간이 초과되었습니다. 잠시 후 다시 시도하세요.',
+	'lastFrame.errNotFound': '영상 파일이 없거나 삭제되었습니다.',
+	'lastFrame.errForbidden': '이 영상에 접근할 권한이 없습니다.',
+	'lastFrame.errNetwork': '영상을 읽지 못했습니다(네트워크 오류).',
+	'lastFrame.errDecode': '영상이 손상되어 끝부분을 디코딩할 수 없습니다.',
+	'lastFrame.errUnsupported': '이 브라우저가 영상 형식을 지원하지 않거나 파일이 손상되었습니다.',
+	'lastFrame.errCrossOrigin': '다른 사이트의 영상이라 프레임을 읽을 수 없습니다(교차 출처 제한). 먼저 영상을 다운로드하세요.',
+	'lastFrame.errNoPicture': '이 파일에는 영상 화면이 없습니다.',
+	'lastFrame.errUnseekable': '영상 끝으로 이동할 수 없습니다(길이 불명 또는 탐색 미지원). 내보내지 않았습니다.',
+	'lastFrame.errBlack': '영상의 마지막 1초가 검은 화면이라 내보내지 않았습니다.',
+	'lastFrame.errEmpty': '끝부분을 디코딩하지 못했습니다. 다시 시도하거나 PC Chrome / Edge를 사용하세요.',
+	'lastFrame.errUnknown': '마지막 프레임 내보내기 실패: {msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': '아티팩트',
@@ -948,6 +966,8 @@ export const ko: Dict = {
 	'library.selectAll': '모두 선택',
 	'library.deselectAll': '선택 해제',
 	'library.itemCount': '{count}개 항목',
+	'library.loadError': '라이브러리를 불러오지 못했습니다',
+	'library.subtitle': '생성 자산을 한곳에서 관리——프로젝트에 연결되지 않은 이미지와 동영상을 미리보기·필터·삭제',
 	'library.deleteSelected': '삭제 ({count})',
 	'library.addToProject': '프로젝트에 추가',
 	'library.filterLabel': '종류로 필터',
@@ -1259,6 +1279,7 @@ export const ko: Dict = {
 	'shell.navAgents': '에이전트',
 	'shell.navConnections': 'ComfyUI 연결',
 	'shell.navModels': '모델 설정',
+	'shell.navLibrary': '애셋 라이브러리',
 	'shell.navSettings': '설정',
 	'shell.comfy_ok': '{name} 연결됨',
 	'shell.comfy_fail': '{name} 연결 실패',
@@ -1535,6 +1556,7 @@ export const ko: Dict = {
 	'studio.slotMask': '마스크',
 	'studio.slotFirst': '첫 프레임',
 	'studio.slotLast': '마지막 프레임',
+	'studio.slotOptional': '선택',
 	'studio.slotRefVideo': '참조 비디오',
 	'studio.slotAudio': '참조 오디오',
 	'studio.slotPick': '클릭하거나 끌어다 놓기',
@@ -1609,7 +1631,11 @@ export const ko: Dict = {
 	'studio.delConfirm': '삭제 시 이 작업의 결과 파일도 함께 제거되며 기록은 복구할 수 없습니다. 삭제할까요?',
 	'studio.delTitleJob': '작업 «{name}» 삭제',
 	'studio.delConfirmMulti': '이 작업에는 결과가 {n}개 있습니다. 삭제하면 작업 기록과 결과 파일 {n}개 모두 제거되며 복구할 수 없습니다. 삭제할까요?',
+	'studio.deleteFailedToast': '삭제 실패: {detail}',
+	'studio.deletedTakeNoFilesToast': '\'{name}\' 기록을 삭제했습니다',
+	'studio.deletedTakeToast': '\'{name}\' 기록과 결과 파일을 삭제했습니다',
 	'studio.deletedToast': '작업과 결과 파일을 삭제했습니다',
+	'studio.wfDeletedTag': '삭제된 워크플로',
 	'studio.wfEmptyTitle': '{kind} 워크플로가 아직 없습니다',
 	'studio.wfEmptyBody': 'ComfyUI 개발자 모드를 켜고 API 형식 JSON으로 내보낸 뒤, ComfyUI 연결 페이지에서 {kind}(으)로 가져오세요.',
 	'studio.wfEmptyGo': 'ComfyUI 연결에서 가져오기',
@@ -1628,9 +1654,12 @@ export const ko: Dict = {
 	'tasks.subtitle': '독립 이미지·독립 비디오·창작 흐름의 이미지/비디오 작업 모아 보기',
 	'tasks.filterAll': '전체',
 	'tasks.filterImage': '이미지',
+	'tasks.filterFailed': '실패',
+	'tasks.filterActive': '진행 중',
 	'tasks.filterVideo': '비디오',
 	'tasks.count': '{n}건 · 진행 중 {m}건',
 	'tasks.empty': '생성 작업이 아직 없습니다. 이미지/비디오 생성에서 첫 작업을 제출하세요.',
+	'tasks.emptyFiltered': '현재 필터에 일치하는 작업이 없습니다.',
 	'tasks.goGenerate': '이미지 생성 열기',
 	'tasks.sourceStudioImage': '독립 이미지',
 	'tasks.sourceStudioVideo': '독립 비디오',
@@ -1644,8 +1673,10 @@ export const ko: Dict = {
 	'tasks.retry': '재시도',
 	'tasks.cancel': '취소',
 	'tasks.delete': '삭제',
+	'tasks.download': '다운로드',
 	'tasks.delTitle': '작업 삭제',
 	'tasks.delConfirm': '결과 파일도 함께 삭제됩니다. 삭제할까요?',
+	'tasks.searchPh': '작업 검색…',
 	'tasks.outputs': '결과 {n}개',
 
 	'agentsPage.title': '에이전트',
@@ -1869,12 +1900,14 @@ export const ko: Dict = {
 	'home.stageProgress': '5단계 진행',
 	'tasks.sourceWorkbench': '제작 흐름',
 	'jobst.idSuffix': ' · ComfyUI 프롬프트 ID {id}',
-	'jobst.done': '완료',
+	'jobst.done': '정착',
 	'jobst.doneDetail': 'ComfyUI 실행이 끝나 결과를 저장했습니다',
 	'jobst.dryRun': '자리표시자',
 	'jobst.dryRunDetail': '자리표시자만: Dry-run이 켜져 있어 ComfyUI를 호출하지 않았습니다',
 	'jobst.noOutput': '출력 없음',
 	'jobst.noOutputDetail': '결과 파일 없이 끝났습니다 — 생성 완료가 아닙니다',
+	'jobst.missing': '파일 없음',
+	'jobst.missingDetail': '작업은 성공했지만 결과 파일이 서버에 없습니다',
 	'jobst.queued': '대기 중',
 	'jobst.queuedDetail': '워크벤치 대기열에서 ComfyUI 전송을 기다리는 중',
 	'jobst.connecting': '연결 중',
@@ -1994,6 +2027,9 @@ export const ko: Dict = {
 	'desk.kvName': '이름',
 	'desk.kvPromptId': 'ComfyUI 작업 ID',
 	'desk.kvUsage': '용도',
+	'desk.loadEarlier': '이전 {n}개 표시',
+	'desk.missingSub': '같은 설정으로 다시 만들거나 이 기록을 제거할 수 있습니다',
+	'desk.missingTitle': '결과 파일이 서버에 없습니다',
 	'desk.needWorkflow': '부족: 워크플로',
 	'desk.noConn': '연결 안 됨',
 	'desk.noPromptInput': '이 워크플로에는 프롬프트 입력이 없어 원래 값으로 생성합니다.',
@@ -2014,6 +2050,8 @@ export const ko: Dict = {
 	'desk.promptOnly': '프롬프트만',
 	'desk.promptPh': '원하는 장면을 설명… (Ctrl/⌘ + Enter 생성, / 포커스)',
 	'desk.restoreAll': '모두 워크플로 값으로 되돌리기',
+	'desk.redo': '같은 설정으로 다시 생성',
+	'desk.removeRecord': '기록 제거',
 	'desk.restoreOrig': '원래 값으로',
 	'desk.reuse': '재사용',
 	'desk.reuseToComposer': '입력대에서 재사용',
@@ -2041,4 +2079,152 @@ export const ko: Dict = {
 	'desk.wfUntested': '테스트 안 함',
 	'desk.workflow': '워크플로',
 	'desk.yesterday': '어제',
+	'wfd.stepParse': 'JSON 파싱',
+	'wfd.stepNodes': '노드 식별',
+	'wfd.stepModels': '모델 확인',
+	'wfd.stepSlots': '입력 슬롯 구성',
+	'wfd.noOutput': '출력 노드가 없어 가져올 수 없습니다',
+	'wfd.nodesAutoOk': '용도 자동 판정: {usage}',
+	'wfd.nodesUserOk': '용도 확인됨: {usage}',
+	'wfd.modelsOk': "'{name}'에 필요한 노드와 모델이 모두 있습니다",
+	'wfd.slotsOk': '입력 슬롯 {n}개 구성(미디어 {m}개)',
+	'wfd.checksAria': '가져오기 검사 결과',
+	'wfd.showDetails': '오류 자세히 보기',
+	'wfd.hideDetails': '오류 자세히 접기',
+	'wfd.unreachableSuggest': '확인 실패는 저장을 막지 않습니다. 연결을 고친 뒤 다시 검사하세요.',
+	'wfd.nodesPickSuggest': '저장하기 전에 아래에서 용도를 선택하고 출력 매핑을 완료하세요.',
+	'wfd.showRaw': '원본 JSON 보기',
+	'wfd.hideRaw': '원본 JSON 접기',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': 'UI 형식 워크플로 일괄 가져오기, 검색·필터·주석 관리. 전체 JSON은 작업 시에만 로드',
+	'wl.batchImport': '일괄 가져오기',
+	'wl.dedupe': '중복 정리',
+	'wl.dedupeTitle': '중복 워크플로 삭제',
+	'wl.dedupeConfirm': '이름과 내용이 완전히 같은 항목을 삭제합니다(가장 먼저 가져온 것 유지). 이름이 같아도 내용이 다르면 그대로 둡니다. 계속할까요?',
+	'wl.dedupeDone': '중복 워크플로 {n}건 삭제',
+	'wl.dedupeNone': '중복 워크플로가 없습니다',
+	'wl.favCount': '즐겨찾기 {n}건',
+	'wl.searchPh': '이름·설명·태그·모델 검색… (/ 키)',
+	'wl.filterLabel': '필터',
+	'wl.filterAll': '전체',
+	'wl.filterFav': '즐겨찾기',
+	'wl.filterPending': '확인 필요',
+	'wl.filterDisabled': '비활성',
+	'wl.favAria': '즐겨찾기 추가',
+	'wl.unfavAria': '즐겨찾기 해제',
+	'wl.categoryLabel': '분류',
+	'wl.categoryAll': '전체 분류',
+	'wl.familyLabel': '모델 계열',
+	'wl.familyAll': '전체 계열',
+	'wl.mediaLabel': '미디어',
+	'wl.mediaAll': '전체 미디어',
+	'wl.mediaImage': '이미지',
+	'wl.mediaVideo': '영상',
+	'wl.mediaAudio': '오디오',
+	'wl.mediaIn': '입력',
+	'wl.mediaOut': '출력',
+	'wl.sortLabel': '정렬',
+	'wl.sortRecent': '즐겨찾기 / 최근',
+	'wl.sortName': '이름',
+	'wl.resetFilters': '필터 해제',
+	'wl.noMatch': '조건에 맞는 워크플로가 없습니다',
+	'wl.resultCount': '{n} / {m}',
+	'wl.selected': '{n}건 선택됨',
+	'wl.batchLabel': '일괄 작업',
+	'wl.batchAnnotate': '일괄 주석',
+	'wl.batchEnable': '활성화',
+	'wl.batchDisable': '비활성화',
+	'wl.clearSel': '선택 해제',
+	'wl.batchDone': '{n}건 업데이트',
+	'wl.batchPartial': '{n}건 성공, {m}건 실패(용도와 출력 먼저 확정)',
+	'wl.selectAll': '나열된 워크플로 모두 선택',
+	'wl.rowCheckAria': '{name} 선택',
+	'wl.headMeta': '메타데이터',
+	'wl.headActions': '작업',
+	'wl.enableAria': '{name} 활성화/비활성화',
+	'wl.enableBlocked': '활성화 전에 용도와 출력 노드를 확정하세요',
+	'wl.editMeta': '메타데이터 편집',
+	'wl.lastUsed': '마지막 사용',
+	'wl.moreCount': '{n}건 더 보기(전체 {m}건)',
+	'wfCat.basic': '기본 처리',
+	'wfCat.audioTts': '음성 생성',
+	'wfCat.music': '음악 생성',
+	'wfCat.image': '이미지 생성',
+	'wfCat.video': '영상 생성',
+	'wfCat.digitalHuman': '디지털 휴먼',
+	'wfCat.motionTransfer': '모션 전이',
+	'md.title': '워크플로 주석',
+	'md.batchTitle': '일괄 주석({n}건)',
+	'md.batchHint': '입력한 필드만 적용됩니다. 이름은 찾기→바꾸기로 변경, 태그는 추가됩니다.',
+	'md.name': '표시 이름',
+	'md.nameFind': '찾기',
+	'md.nameFindPh': '바꿀 문자…',
+	'md.nameReplace': '바꾸기',
+	'md.nameReplacePh': '대체 문자…',
+	'md.nameHint': '「찾기」를 비우면 이름이 유지됩니다.',
+	'md.description': '설명',
+	'md.descriptionPh': '이 워크플로가 하는 일을 한 줄로…',
+	'md.tags': '태그',
+	'md.tagsPh': '예: 빠름, 고품질',
+	'md.tagsHint': '쉼표로 구분. 일괄 모드에서는 추가됩니다.',
+	'md.category': '분류',
+	'md.modelFamily': '모델 계열',
+	'md.apply': '적용',
+	'md.applied': '{n}건 업데이트',
+	'md.appliedOne': '업데이트됨',
+	'md.partial': '{n}건 성공, {m}건 실패',
+	'wiz.title': '워크플로 일괄 가져오기',
+	'wiz.stepSource': '원본',
+	'wiz.stepReport': '사전 검사',
+	'wiz.stepResult': '결과',
+	'wiz.sourceLabel': '가져오기 원본',
+	'wiz.modeScan': '서버 디렉터리 스캔',
+	'wiz.modeFiles': '로컬 파일 선택',
+	'wiz.rootLabel': '서버 디렉터리',
+	'wiz.rootHint': '서버의 디렉터리 경로(예: 저장소의 example_ComfyUI_workflows). UI 형식 JSON을 재귀적으로 스캔하며 API 형식 등은 건너뜁니다.',
+	'wiz.preflight': '실제 ComfyUI 사전 검사(선택)',
+	'wiz.preflightNone': '건너뛰기(오프라인 변환)',
+	'wiz.preflightHint': '연결을 선택하면 변환 결과를 해당 ComfyUI의 노드·모델과 대조합니다.',
+	'wiz.pickFiles': '로컬 파일',
+	'wiz.pickFilesBtn': 'JSON 파일 선택(여러 개)',
+	'wiz.pickFilesHint': 'ComfyUI UI 형식 워크플로 JSON을 선택하세요. 다중 선택이 가능합니다.',
+	'wiz.parsed': '{n}개 파일 읽음',
+	'wiz.notUi': '{n}개 파일이 UI 형식이 아니어서(nodes 배열 없음) 건너뛰었습니다',
+	'wiz.noFiles': '먼저 가져올 파일을 선택하세요',
+	'wiz.runDry': '사전 검사 실행(저장 안 함)',
+	'wiz.running': '검사 중…',
+	'wiz.total': '총 {n}개 파일',
+	'wiz.ok': '정상 {n}',
+	'wiz.warn': '경고 {n}',
+	'wiz.fail': '실패 {n}',
+	'wiz.confirmCount': '확인 필요 {n}',
+	'wiz.importable': '가져오기 가능 {n}',
+	'wiz.reportHint': '사전 검사는 아무것도 저장하지 않습니다. 경고 항목은 용도를 지정하면 활성화 상태로 가져오며, 확인 필요·실패 항목은 절대 가져오지 않습니다.',
+	'wiz.filterLabel': '보고서 필터',
+	'wiz.filterWarn': '경고만',
+	'wiz.filterBlocked': '가져올 수 없음',
+	'wiz.searchPh': '파일 이름 검색…',
+	'wiz.includeAria': '{name} 가져오기',
+	'wiz.skipReason': '가져올 수 없음: {reason}',
+	'wiz.issues': '변환 메모 {n}건',
+	'wiz.usagePick': '용도:',
+	'wiz.usageNone': '지금은 건너뜀(가져온 뒤 확인 필요)',
+	'wiz.selectedN': '{n}개 파일을 가져옵니다',
+	'wiz.excludedM': '{m}개 가져올 수 없음',
+	'wiz.import': '가져오기',
+	'wiz.importing': '가져오는 중…',
+	'wiz.back': '이전',
+	'wiz.imported': '{n}건 가져옴',
+	'wiz.skipped': '{n}건 건너뜀',
+	'wiz.conflict': '이미 있음(중복 자동 건너뜀)',
+	'wiz.usageApplied': '새로 가져온 {n}건에 용도 지정',
+	'wiz.done': '완료',
+	'wiz.again': '다시 가져오기',
+	'wiz.resultNote': '내용이 같은 파일은 자동으로 건너뛰며, 다시 실행해도 중복이 생기지 않습니다.',
+	'wiz.importedToast': '워크플로 {n}건을 가져왔습니다',
+	'wiz.warnTag': '경고',
+	'wiz.confirmTag': '확인 필요',
+	'wiz.preflightTag': '사전 검사 실패',
+	'wiz.importedTag': '가져옴 #{id}',
 };

calliope-web/src/lib/i18n/zh.ts

@@ -64,6 +64,7 @@ export const zh: Dict = {
 
 	// --- Toast ---
 	'toast.dismiss': '关闭',
+	'toast.undo': '撤销',
 	'toast.uploadFailed': '上传失败',
 
 	// --- Modal ---
@@ -220,6 +221,23 @@ export const zh: Dict = {
 	'lightbox.videoPreview': '视频预览',
 	'lightbox.videoUnavailable': '视频不可用',
 	'lightbox.zoom100': '100%',
+	'lastFrame.export': '导出尾帧',
+	'lastFrame.exporting': '正在导出尾帧…',
+	'lastFrame.hint': '把视频最后一帧按原尺寸保存为 PNG，可作首帧参考',
+	'lastFrame.fileTag': '尾帧',
+	'lastFrame.done': '已导出尾帧 {name}（{size}）',
+	'lastFrame.errTimeout': '视频加载超时，未能导出尾帧，请稍后重试',
+	'lastFrame.errNotFound': '视频文件不存在或已被移除，无法导出尾帧',
+	'lastFrame.errForbidden': '没有访问该视频的权限，无法导出尾帧',
+	'lastFrame.errNetwork': '视频读取失败（网络中断），请检查连接后重试',
+	'lastFrame.errDecode': '视频文件已损坏，片尾画面无法解码',
+	'lastFrame.errUnsupported': '当前浏览器不支持该视频格式，或文件已损坏，无法导出尾帧',
+	'lastFrame.errCrossOrigin': '该视频来自其他站点，浏览器禁止读取画面（跨域限制），请先下载原视频',
+	'lastFrame.errNoPicture': '该文件没有视频画面，无法导出尾帧',
+	'lastFrame.errUnseekable': '无法定位到视频结尾（时长未知或来源不支持拖动进度），未导出尾帧',
+	'lastFrame.errBlack': '视频结尾 1 秒内都是黑屏，未导出尾帧',
+	'lastFrame.errEmpty': '浏览器未能解码出片尾画面，请重试或换用电脑端 Chrome / Edge',
+	'lastFrame.errUnknown': '导出尾帧失败：{msg}',
 
 	// --- Artifact / canvas nodes ---
 	'artifact.artifactLabel': '产物',
@@ -948,6 +966,8 @@ export const zh: Dict = {
 	'library.selectAll': '全选',
 	'library.deselectAll': '取消全选',
 	'library.itemCount': '{count} 个项目',
+	'library.loadError': '素材库加载失败',
+	'library.subtitle': '生成素材集中在这里——未关联项目的图片和视频可预览、筛选和删除',
 	'library.deleteSelected': '删除（{count}）',
 	'library.addToProject': '添加到项目',
 	'library.filterLabel': '按类型筛选',
@@ -1261,6 +1281,7 @@ export const zh: Dict = {
 	'shell.navAgents': '智能体',
 	'shell.navConnections': 'ComfyUI 连接',
 	'shell.navModels': '模型设置',
+	'shell.navLibrary': '素材库',
 	'shell.navSettings': '设置',
 	'shell.comfy_ok': '{name} 已连接',
 	'shell.comfy_fail': '{name} 连接失败',
@@ -1534,6 +1555,7 @@ export const zh: Dict = {
 	'studio.slotMask': '遮罩',
 	'studio.slotFirst': '首帧',
 	'studio.slotLast': '尾帧',
+	'studio.slotOptional': '可选',
 	'studio.slotRefVideo': '参考视频',
 	'studio.slotAudio': '参考音频',
 	'studio.slotPick': '点击或拖入',
@@ -1609,7 +1631,11 @@ export const zh: Dict = {
 	'studio.delConfirm': '删除后该任务的结果文件会一并移除，历史不可恢复。确定删除？',
 	'studio.delTitleJob': '删除任务「{name}」',
 	'studio.delConfirmMulti': '该任务共生成 {n} 个结果，删除将移除整条任务记录及其全部 {n} 个结果文件，历史不可恢复。确定删除？',
+	'studio.deleteFailedToast': '删除失败：{detail}',
+	'studio.deletedTakeNoFilesToast': '已删除「{name}」这条记录',
+	'studio.deletedTakeToast': '已删除「{name}」这条记录及其结果文件',
 	'studio.deletedToast': '已删除该任务及其结果文件',
+	'studio.wfDeletedTag': '工作流已删除',
 	'studio.wfEmptyTitle': '还没有{kind}工作流',
 	'studio.wfEmptyBody': '在 ComfyUI 里启用开发者模式，用「导出（API 格式）」得到 JSON，再到「ComfyUI 连接」页导入并分类为{kind}。',
 	'studio.wfEmptyGo': '去「ComfyUI 连接」导入',
@@ -1628,9 +1654,12 @@ export const zh: Dict = {
 	'tasks.subtitle': '汇总独立生图、独立生视频与创作流程内的图片 / 视频任务',
 	'tasks.filterAll': '全部',
 	'tasks.filterImage': '图片',
+	'tasks.filterFailed': '失败',
+	'tasks.filterActive': '进行中',
 	'tasks.filterVideo': '视频',
 	'tasks.count': '{n} 个任务 · {m} 个进行中',
 	'tasks.empty': '还没有生成任务。到「生图」「生视频」提交第一个任务。',
+	'tasks.emptyFiltered': '没有符合筛选的任务。',
 	'tasks.goGenerate': '去生图',
 	'tasks.sourceStudioImage': '独立生图',
 	'tasks.sourceStudioVideo': '独立生视频',
@@ -1644,8 +1673,10 @@ export const zh: Dict = {
 	'tasks.retry': '重试',
 	'tasks.cancel': '取消',
 	'tasks.delete': '删除',
+	'tasks.download': '下载',
 	'tasks.delTitle': '删除任务',
 	'tasks.delConfirm': '删除后该任务的结果文件会一并移除。确定删除？',
+	'tasks.searchPh': '搜索任务…',
 	'tasks.outputs': '{n} 个结果',
 
 	'agentsPage.title': '智能体',
@@ -1869,12 +1900,14 @@ export const zh: Dict = {
 	'home.stageProgress': '五段进度',
 	'tasks.sourceWorkbench': '创作流程',
 	'jobst.idSuffix': ' · ComfyUI 任务 ID {id}',
-	'jobst.done': '完成',
-	'jobst.doneDetail': 'ComfyUI 已执行完成，结果已保存',
+	'jobst.done': '定影',
+	'jobst.doneDetail': '生成完成，结果已定影保存',
 	'jobst.dryRun': '占位结果',
 	'jobst.dryRunDetail': '占位结果：当前开启了 Dry-run，没有调用 ComfyUI，不是真实生成',
 	'jobst.noOutput': '无产出',
 	'jobst.noOutputDetail': '任务结束但没有任何结果文件，不算生成完成',
+	'jobst.missing': '文件缺失',
+	'jobst.missingDetail': '生成成功，但结果文件已不在服务器上',
 	'jobst.queued': '排队中',
 	'jobst.queuedDetail': '在工作台队列中等待提交到 ComfyUI',
 	'jobst.connecting': '连接中',
@@ -1994,6 +2027,9 @@ export const zh: Dict = {
 	'desk.kvName': '名称',
 	'desk.kvPromptId': 'ComfyUI 任务号',
 	'desk.kvUsage': '用途',
+	'desk.loadEarlier': '显示更早的 {n} 条',
+	'desk.missingSub': '可用相同参数重做，或移除这条记录',
+	'desk.missingTitle': '结果文件已不在服务器上',
 	'desk.needWorkflow': '还缺：工作流',
 	'desk.noConn': '未连接',
 	'desk.noPromptInput': '这个工作流没有提示词输入，按工作流原值生成。',
@@ -2014,6 +2050,8 @@ export const zh: Dict = {
 	'desk.promptOnly': '仅提示词',
 	'desk.promptPh': '描述想要的画面…（Ctrl/⌘ + Enter 生成，/ 快速聚焦）',
 	'desk.restoreAll': '全部恢复工作流原值',
+	'desk.redo': '用相同参数重做',
+	'desk.removeRecord': '移除记录',
 	'desk.restoreOrig': '恢复原值',
 	'desk.reuse': '复用',
 	'desk.reuseToComposer': '复用到输入台',
@@ -2041,4 +2079,152 @@ export const zh: Dict = {
 	'desk.wfUntested': '未试运行',
 	'desk.workflow': '工作流',
 	'desk.yesterday': '昨天',
+	'wfd.stepParse': '解析 JSON',
+	'wfd.stepNodes': '识别节点',
+	'wfd.stepModels': '核对模型',
+	'wfd.stepSlots': '建立输入槽',
+	'wfd.noOutput': '工作流没有任何输出节点，无法导入',
+	'wfd.nodesAutoOk': '自动判定用途：{usage}',
+	'wfd.nodesUserOk': '用途已确认：{usage}',
+	'wfd.modelsOk': '「{name}」已装齐所需节点与模型',
+	'wfd.slotsOk': '已建立 {n} 个输入槽（含 {m} 个媒体槽）',
+	'wfd.checksAria': '导入检查结果',
+	'wfd.showDetails': '展开错误详情',
+	'wfd.hideDetails': '收起错误详情',
+	'wfd.unreachableSuggest': '无法核查不会阻止保存；修好连接后点「重新检查」复查。',
+	'wfd.nodesPickSuggest': '请在下方选择用途并完成输出映射后再保存。',
+	'wfd.showRaw': '查看原始 JSON',
+	'wfd.hideRaw': '收起原始 JSON',
+
+	// --- Workflow library · batch import & management (HEL-682) ---
+	'wl.hint': '批量导入 UI 格式工作流，搜索筛选与标注管理；完整 JSON 只在试运行等操作时按需加载',
+	'wl.batchImport': '批量导入',
+	'wl.dedupe': '去重',
+	'wl.dedupeTitle': '清理重复工作流',
+	'wl.dedupeConfirm': '将删除名称与内容完全相同的重复条目（保留最早导入的一条）。同名但内容不同的是你的变体，不会被动。确定执行？',
+	'wl.dedupeDone': '已删除 {n} 个重复工作流',
+	'wl.dedupeNone': '没有发现重复工作流',
+	'wl.favCount': '{n} 个收藏',
+	'wl.searchPh': '搜索名称、说明、标签、模型…（按 / 聚焦）',
+	'wl.filterLabel': '筛选',
+	'wl.filterAll': '全部',
+	'wl.filterFav': '收藏',
+	'wl.filterPending': '待确认',
+	'wl.filterDisabled': '已停用',
+	'wl.favAria': '收藏',
+	'wl.unfavAria': '取消收藏',
+	'wl.categoryLabel': '分类',
+	'wl.categoryAll': '全部分类',
+	'wl.familyLabel': '模型家族',
+	'wl.familyAll': '全部模型',
+	'wl.mediaLabel': '媒介',
+	'wl.mediaAll': '全部媒介',
+	'wl.mediaImage': '图像',
+	'wl.mediaVideo': '视频',
+	'wl.mediaAudio': '音频',
+	'wl.mediaIn': '输入',
+	'wl.mediaOut': '输出',
+	'wl.sortLabel': '排序',
+	'wl.sortRecent': '收藏 / 最近使用',
+	'wl.sortName': '名称',
+	'wl.resetFilters': '清除筛选',
+	'wl.noMatch': '没有符合条件的工作流',
+	'wl.resultCount': '匹配 {n} / {m}',
+	'wl.selected': '已选 {n} 项',
+	'wl.batchLabel': '批量操作',
+	'wl.batchAnnotate': '批量标注',
+	'wl.batchEnable': '启用',
+	'wl.batchDisable': '停用',
+	'wl.clearSel': '清除选择',
+	'wl.batchDone': '已更新 {n} 项',
+	'wl.batchPartial': '{n} 项成功，{m} 项失败（需先确认用途与输出映射）',
+	'wl.selectAll': '选择当前列出的全部工作流',
+	'wl.rowCheckAria': '选择 {name}',
+	'wl.headMeta': '标注',
+	'wl.headActions': '操作',
+	'wl.enableAria': '启用或停用 {name}',
+	'wl.enableBlocked': '需先确认用途并指定输出节点，才能启用',
+	'wl.editMeta': '编辑标注',
+	'wl.lastUsed': '最近使用',
+	'wl.moreCount': '再显示 {n} 项（共 {m} 项）',
+	'wfCat.basic': '基础处理',
+	'wfCat.audioTts': '语音生成',
+	'wfCat.music': '音乐生成',
+	'wfCat.image': '图像生成',
+	'wfCat.video': '视频生成',
+	'wfCat.digitalHuman': '数字人',
+	'wfCat.motionTransfer': '动作迁移',
+	'md.title': '标注工作流',
+	'md.batchTitle': '批量标注（{n} 项）',
+	'md.batchHint': '只有填写了的字段会被应用；显示名按「查找→替换」批量重命名，标签为追加。',
+	'md.name': '显示名',
+	'md.nameFind': '查找',
+	'md.nameFindPh': '要替换的文字…',
+	'md.nameReplace': '替换为',
+	'md.nameReplacePh': '替换后的文字…',
+	'md.nameHint': '留空「查找」则不改名。',
+	'md.description': '说明',
+	'md.descriptionPh': '一句话说明这个工作流做什么…',
+	'md.tags': '标签',
+	'md.tagsPh': '如：快速, 高质量',
+	'md.tagsHint': '用逗号分隔；批量模式下为追加标签。',
+	'md.category': '分类',
+	'md.modelFamily': '模型家族',
+	'md.apply': '应用',
+	'md.applied': '已更新 {n} 项',
+	'md.appliedOne': '已更新',
+	'md.partial': '{n} 项成功，{m} 项失败',
+	'wiz.title': '批量导入工作流',
+	'wiz.stepSource': '选择来源',
+	'wiz.stepReport': '预检报告',
+	'wiz.stepResult': '导入结果',
+	'wiz.sourceLabel': '导入来源',
+	'wiz.modeScan': '扫描服务器目录',
+	'wiz.modeFiles': '选择本地文件',
+	'wiz.rootLabel': '服务器目录',
+	'wiz.rootHint': '服务器上的目录路径（如仓库的 example_ComfyUI_workflows），将递归扫描其中的 ComfyUI 界面格式 JSON；API 格式与其他 JSON 自动跳过。',
+	'wiz.preflight': '对真实 ComfyUI 预检（可选）',
+	'wiz.preflightNone': '跳过（离线转换）',
+	'wiz.preflightHint': '选择连接后，转换结果会对照该 ComfyUI 的节点与模型做对象级检查。',
+	'wiz.pickFiles': '本地文件',
+	'wiz.pickFilesBtn': '选择 JSON 文件（可多选）',
+	'wiz.pickFilesHint': '选择 ComfyUI 界面格式（UI 格式）的工作流 JSON，可一次选多个。',
+	'wiz.parsed': '已读取 {n} 个文件',
+	'wiz.notUi': '{n} 个文件不是 UI 格式（缺少 nodes 数组），已忽略',
+	'wiz.noFiles': '请先选择要导入的文件',
+	'wiz.runDry': '开始预检（不写入）',
+	'wiz.running': '预检中…',
+	'wiz.total': '共 {n} 个文件',
+	'wiz.ok': '正常 {n}',
+	'wiz.warn': '警告 {n}',
+	'wiz.fail': '失败 {n}',
+	'wiz.confirmCount': '需人工确认 {n}',
+	'wiz.importable': '可导入 {n}',
+	'wiz.reportHint': '预检不写入数据库。warn 项可补充用途后以启用状态导入；「需人工确认」与转换失败项不会被导入，也不会被标为可运行。',
+	'wiz.filterLabel': '报告筛选',
+	'wiz.filterWarn': '仅看警告',
+	'wiz.filterBlocked': '不可导入',
+	'wiz.searchPh': '搜索文件名…',
+	'wiz.includeAria': '导入 {name}',
+	'wiz.skipReason': '不可导入：{reason}',
+	'wiz.issues': '{n} 条转换提示',
+	'wiz.usagePick': '补充用途：',
+	'wiz.usageNone': '暂不补充（导入后待确认）',
+	'wiz.selectedN': '将导入 {n} 个文件',
+	'wiz.excludedM': '{m} 个不可导入',
+	'wiz.import': '确认导入',
+	'wiz.importing': '导入中…',
+	'wiz.back': '上一步',
+	'wiz.imported': '导入成功 {n}',
+	'wiz.skipped': '跳过 {n}',
+	'wiz.conflict': '已存在（重复导入自动跳过）',
+	'wiz.usageApplied': '已为 {n} 个新导入项补充用途',
+	'wiz.done': '完成',
+	'wiz.again': '再导一批',
+	'wiz.resultNote': '内容相同的重复文件会被自动跳过，重复执行不会产生重复条目。',
+	'wiz.importedToast': '已导入 {n} 个工作流',
+	'wiz.warnTag': '警告',
+	'wiz.confirmTag': '需人工确认',
+	'wiz.preflightTag': '预检未通过',
+	'wiz.importedTag': '已导入 #{id}',
 };

calliope-web/src/lib/media/exportFrame.ts

@@ -0,0 +1,343 @@
+/**
+ * 导出尾帧 (HEL-669): decode a frame just before the end of a video in the
+ * browser and save it as a PNG at the video's native resolution.
+ *
+ * Frames are taken from a hidden, muted <video> of the same URL so the
+ * player the user is watching never jumps. Media is served same-origin by
+ * /api/file, so the canvas stays untainted.
+ *
+ * The pure helpers at the top touch no DOM and import nothing, so
+ * scripts/check-export-frame.mjs can run them under plain Node.
+ */
+
+export type FrameErrorCode =
+  | "timeout"
+  | "not-found"
+  | "forbidden"
+  | "network"
+  | "decode"
+  | "unsupported"
+  | "cross-origin"
+  | "no-picture"
+  | "unseekable"
+  | "black"
+  | "empty";
+
+export class FrameExportError extends Error {
+  code: FrameErrorCode;
+
+  constructor(code: FrameErrorCode, detail?: string) {
+    super(detail ? `${code}: ${detail}` : code);
+    this.name = "FrameExportError";
+    this.code = code;
+  }
+}
+
+/**
+ * Seconds before the end to try, nearest first. The exact end is often not
+ * decodable, so the first try is ~1 frame back; later tries step past a
+ * black fade-out tail.
+ */
+export const TAIL_OFFSETS = [0.05, 0.12, 0.25, 0.5, 1];
+
+export function tailSeekTimes(duration: number): number[] {
+  if (!Number.isFinite(duration) || duration <= 0) return [0];
+  const times: number[] = [];
+  for (const off of TAIL_OFFSETS) {
+    const t = Math.max(0, Math.round((duration - off) * 1000) / 1000);
+    if (!times.includes(t)) times.push(t);
+  }
+  return times;
+}
+
+/** File name of the video behind a media URL (`/api/file?path=…` or plain). */
+export function videoBaseName(src: string): string {
+  let name = "";
+  try {
+    const url = new URL(src, "http://local.invalid/");
+    const path =
+      url.searchParams.get("path") ?? decodeURIComponent(url.pathname);
+    name = path.split(/[\\/]/).pop() ?? "";
+  } catch {
+    name = "";
+  }
+  name = name.replace(/\.[a-z0-9]{1,5}$/i, "");
+  name = name.replace(/[\\/:*?"<>|\u0000-\u001f]+/g, "_").trim();
+  return name || "video";
+}
+
+/** `{视频名}_{tag}_{秒}s.png` — names the source video and the frame time. */
+export function frameFileName(
+  src: string,
+  seconds: number,
+  tag: string,
+): string {
+  const safeTag = tag.replace(/[\\/:*?"<>|\s]+/g, "-");
+  return `${videoBaseName(src)}_${safeTag}_${seconds.toFixed(3)}s.png`;
+}
+
+/**
+ * Classify sampled RGBA pixels: "empty" when nothing was painted (the
+ * decoder handed back no picture), "black" for an all-dark frame, else null.
+ * A bright highlight anywhere keeps a dark scene from counting as black.
+ */
+export function blankKind(rgba: ArrayLike<number>): "empty" | "black" | null {
+  let opaque = 0;
+  let sum = 0;
+  let max = 0;
+  for (let i = 0; i + 3 < rgba.length; i += 4) {
+    if (rgba[i + 3] < 8) continue;
+    opaque++;
+    const luma = 0.2126 * rgba[i] + 0.7152 * rgba[i + 1] + 0.0722 * rgba[i + 2];
+    sum += luma;
+    if (luma > max) max = luma;
+  }
+  if (opaque === 0) return "empty";
+  // 16 = limited-range video black when a decoder skips range expansion.
+  if (max < 40 && sum / opaque < 20) return "black";
+  return null;
+}
+
+/** HTTP status of a failed media fetch → error code (null = not decisive). */
+export function statusErrorCode(status: number): FrameErrorCode | null {
+  if (status === 404 || status === 410) return "not-found";
+  if (status === 401 || status === 403) return "forbidden";
+  if (status >= 400) return "network";
+  return null;
+}
+
+// ---- browser side -------------------------------------------------------
+
+export interface LastFrame {
+  blob: Blob;
+  width: number;
+  height: number;
+  /** Media time of the exported frame, in seconds. */
+  time: number;
+  fileName: string;
+}
+
+export interface CaptureOptions {
+  /** Word placed in the file name, e.g. 尾帧. */
+  fileTag: string;
+  timeoutMs?: number;
+}
+
+const SAMPLE = 64;
+
+function isCrossOrigin(src: string): boolean {
+  try {
+    const url = new URL(src, location.href);
+    if (url.protocol === "blob:" || url.protocol === "data:") return false;
+    return url.origin !== location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/** Probe the URL so a failed load can say 不存在 / 无权限 / 跨域 precisely. */
+async function classifyLoadFailure(
+  video: HTMLVideoElement,
+  src: string,
+  crossOrigin: boolean,
+): Promise<FrameExportError> {
+  const ctl = new AbortController();
+  const timer = setTimeout(() => ctl.abort(), 5000);
+  try {
+    const res = await fetch(src, {
+      headers: { Range: "bytes=0-0" },
+      mode: crossOrigin ? "cors" : "same-origin",
+      signal: ctl.signal,
+    });
+    ctl.abort();
+    const code = statusErrorCode(res.status);
+    if (code) return new FrameExportError(code, `HTTP ${res.status}`);
+  } catch {
+    if (crossOrigin) return new FrameExportError("cross-origin");
+    return new FrameExportError("network");
+  } finally {
+    clearTimeout(timer);
+  }
+  const mediaCode = video.error?.code;
+  if (mediaCode === MediaError.MEDIA_ERR_NETWORK) {
+    return new FrameExportError("network", video.error?.message);
+  }
+  if (mediaCode === MediaError.MEDIA_ERR_DECODE) {
+    return new FrameExportError("decode", video.error?.message);
+  }
+  return new FrameExportError("unsupported", video.error?.message);
+}
+
+export async function captureLastFrame(
+  src: string,
+  { fileTag, timeoutMs = 30000 }: CaptureOptions,
+): Promise<LastFrame> {
+  const crossOrigin = isCrossOrigin(src);
+  const video = document.createElement("video");
+  if (crossOrigin) video.crossOrigin = "anonymous";
+  video.muted = true;
+  video.playsInline = true;
+  video.preload = "auto";
+  video.setAttribute("aria-hidden", "true");
+  // Kept in the DOM (some engines never paint a detached video) but unseen.
+  Object.assign(video.style, {
+    position: "fixed",
+    left: "0",
+    top: "0",
+    width: "1px",
+    height: "1px",
+    opacity: "0",
+    pointerEvents: "none",
+  });
+  document.body.appendChild(video);
+
+  const deadline = Date.now() + timeoutMs;
+
+  /** Resolve on `event`; reject on a media error or the shared deadline. */
+  const until = (event: string) =>
+    new Promise<void>((resolve, reject) => {
+      const done = (fn: () => void) => {
+        clearTimeout(timer);
+        video.removeEventListener(event, onEvent);
+        video.removeEventListener("error", onError);
+        fn();
+      };
+      const onEvent = () => done(resolve);
+      const onError = () =>
+        done(() => {
+          classifyLoadFailure(video, src, crossOrigin).then(reject, reject);
+        });
+      const timer = setTimeout(
+        () => done(() => reject(new FrameExportError("timeout"))),
+        Math.max(0, deadline - Date.now()),
+      );
+      video.addEventListener(event, onEvent);
+      video.addEventListener("error", onError);
+    });
+
+  const seek = async (time: number) => {
+    const settled = until("seeked");
+    video.currentTime = time;
+    await settled;
+  };
+
+  /** Wait until the seeked frame has actually been decoded and presented. */
+  const presented = () =>
+    new Promise<void>((resolve) => {
+      const fallback = setTimeout(resolve, 250);
+      const finish = () => {
+        clearTimeout(fallback);
+        resolve();
+      };
+      if (typeof video.requestVideoFrameCallback === "function") {
+        video.requestVideoFrameCallback(() => finish());
+      } else {
+        requestAnimationFrame(() => requestAnimationFrame(finish));
+      }
+    });
+
+  try {
+    const metadata = until("loadedmetadata");
+    video.src = src;
+    video.load();
+    await metadata;
+
+    if (!video.videoWidth || !video.videoHeight) {
+      throw new FrameExportError("no-picture");
+    }
+
+    // MediaRecorder WebM reports Infinity until the end has been read. When
+    // the server cannot seek either, the end is unreachable — fail rather
+    // than hand back the first frame.
+    let duration = video.duration;
+    if (!Number.isFinite(duration) || duration <= 0) {
+      await seek(1e101);
+      duration = video.duration;
+      if (!Number.isFinite(duration) || duration <= 0) {
+        throw new FrameExportError("unseekable", "duration unknown");
+      }
+    }
+
+    const width = video.videoWidth;
+    const height = video.videoHeight;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    const sample = document.createElement("canvas");
+    sample.width = SAMPLE;
+    sample.height = SAMPLE;
+    const sampleCtx = sample.getContext("2d", { willReadFrequently: true });
+    if (!ctx || !sampleCtx)
+      throw new FrameExportError("empty", "no 2d context");
+
+    let lastBlank: "empty" | "black" = "empty";
+    for (const time of tailSeekTimes(duration)) {
+      await seek(time);
+      if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+        // iOS Safari only decodes after a play(); muted inline play is allowed.
+        await video.play().catch(() => {});
+        video.pause();
+        await seek(time);
+      }
+      if (Math.abs(video.currentTime - time) > 0.5) {
+        throw new FrameExportError(
+          "unseekable",
+          `asked ${time}s, landed at ${video.currentTime}s`,
+        );
+      }
+      await presented();
+
+      ctx.clearRect(0, 0, width, height);
+      ctx.drawImage(video, 0, 0, width, height);
+      sampleCtx.clearRect(0, 0, SAMPLE, SAMPLE);
+      sampleCtx.drawImage(canvas, 0, 0, SAMPLE, SAMPLE);
+      let pixels: Uint8ClampedArray;
+      try {
+        pixels = sampleCtx.getImageData(0, 0, SAMPLE, SAMPLE).data;
+      } catch (err) {
+        throw new FrameExportError("cross-origin", String(err));
+      }
+      const blank = blankKind(pixels);
+      if (blank) {
+        lastBlank = blank;
+        continue;
+      }
+
+      const blob = await new Promise<Blob | null>((resolve) => {
+        try {
+          canvas.toBlob(resolve, "image/png");
+        } catch {
+          resolve(null);
+        }
+      });
+      if (!blob) throw new FrameExportError("empty", "toBlob returned nothing");
+      const shown = video.currentTime;
+      return {
+        blob,
+        width,
+        height,
+        time: shown,
+        fileName: frameFileName(src, shown, fileTag),
+      };
+    }
+    throw new FrameExportError(lastBlank);
+  } finally {
+    video.removeAttribute("src");
+    video.load();
+    video.remove();
+  }
+}
+
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  a.rel = "noopener";
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60000);
+}

calliope-web/src/lib/media/lastFrame.ts

@@ -0,0 +1,50 @@
+import { t } from "$lib/i18n.svelte";
+import { toast } from "$lib/toast";
+import {
+  captureLastFrame,
+  downloadBlob,
+  FrameExportError,
+  type FrameErrorCode,
+} from "./exportFrame";
+
+const ERROR_KEYS: Record<FrameErrorCode, string> = {
+  timeout: "lastFrame.errTimeout",
+  "not-found": "lastFrame.errNotFound",
+  forbidden: "lastFrame.errForbidden",
+  network: "lastFrame.errNetwork",
+  decode: "lastFrame.errDecode",
+  unsupported: "lastFrame.errUnsupported",
+  "cross-origin": "lastFrame.errCrossOrigin",
+  "no-picture": "lastFrame.errNoPicture",
+  unseekable: "lastFrame.errUnseekable",
+  black: "lastFrame.errBlack",
+  empty: "lastFrame.errEmpty",
+};
+
+/**
+ * 导出尾帧 for one video URL: capture, download the PNG and report the
+ * outcome as a toast. Never throws. Resolves true when a file was saved.
+ */
+export async function exportLastFrame(src: string): Promise<boolean> {
+  try {
+    const frame = await captureLastFrame(src, {
+      fileTag: t("lastFrame.fileTag"),
+    });
+    downloadBlob(frame.blob, frame.fileName);
+    toast.success(
+      t("lastFrame.done", {
+        name: frame.fileName,
+        size: `${frame.width}×${frame.height}`,
+      }),
+    );
+    return true;
+  } catch (err) {
+    if (err instanceof FrameExportError) {
+      toast.error(t(ERROR_KEYS[err.code]), 6000);
+    } else {
+      const msg = err instanceof Error ? err.message : String(err);
+      toast.error(t("lastFrame.errUnknown", { msg }), 6000);
+    }
+    return false;
+  }
+}

calliope-web/src/lib/missingOutputs.svelte.ts

@@ -0,0 +1,38 @@
+import { SvelteSet } from 'svelte/reactivity';
+import type { Job } from '$lib/comfy/types';
+
+/**
+* Output files a done job claims but the asset endpoint could not serve
+* (spec-v2 §3.4 红/琥珀界线): the backend task status stays the single
+* verdict for red — a FAILED job is red no matter what. Amber means the
+* job SUCCEEDED and only its product file is gone (cleaned up, moved,
+* storage hiccup). We learn that the only way the frontend can: the
+* media element itself failed to load. A later successful load clears
+* the mark.
+*/
+const missing = new SvelteSet<string>();
+
+/** Mark one output path as unreachable (img/video onerror). */
+export function markOutputMissing(path: string): void {
+	if (path) missing.add(path);
+}
+
+/** Clear the mark when the same path loads fine after all. */
+export function clearOutputMissing(path: string): void {
+	missing.delete(path);
+}
+
+/** Paths of this job's outputs that are currently unreachable. */
+export function missingOutputsOf(job: Job | null | undefined): string[] {
+	if (!job || job.status !== 'done' || !(job.output_paths?.length ?? 0))
+		return [];
+	return job.output_paths.filter((p) => missing.has(p));
+}
+
+/**
+* The take reads as 文件缺失 when it succeeded but at least one claimed
+* product file cannot be fetched.
+*/
+export function isFileMissing(job: Job | null | undefined): boolean {
+	return missingOutputsOf(job).length > 0;
+}

calliope-web/src/lib/shot/components/TimelineStrip.svelte

@@ -305,13 +305,13 @@
 		z-index: 2;
 	}
 	.keyframe.cam {
-		background: #e0b34d;
+		background: var(--accent-lo);
 	}
 	.keyframe.obj {
-		background: #4ade80;
+		background: var(--ok);
 	}
 	.keyframe.obj.selected {
-		background: #f87171;
+		background: var(--accent);
 	}
 	.keyframe:hover {
 		filter: brightness(1.15);

calliope-web/src/lib/toast.ts

@@ -1,11 +1,18 @@
 export type ToastKind = 'success' | 'error' | 'info';
 
+/** Inline action on a toast (§四.5: 动作金色文字，如「撤销」). */
+export type ToastAction = {
+	label: string;
+	run: () => void;
+};
+
 export type Toast = {
 	id: number;
 	message: string;
 	kind: ToastKind;
 	/** Auto-dismiss delay in ms. 0 = sticky until dismissed. */
 	duration: number;
+	action?: ToastAction;
 };
 
 type Listener = (toasts: Toast[]) => void;
@@ -57,9 +64,10 @@ export function showToast(
 	message: string,
 	kind: ToastKind = 'success',
 	durationMs: number = DEFAULT_DURATION,
+	action?: ToastAction,
 ) {
 	const id = ++seq;
-	toasts = [...toasts, { id, message, kind, duration: durationMs }];
+	toasts = [...toasts, { id, message, kind, duration: durationMs, action }];
 	emit();
 	if (durationMs > 0) schedule(id, durationMs);
 	return id;

calliope-web/src/routes/+page.svelte

@@ -304,10 +304,10 @@
 
 <AppShell active="projects" title={t('home.title')} subtitle={t('home.subtitle')}>
 	{#snippet actions()}
-		<span class="chip">{t('home.projectCount', { n: allProjects.length, m: inProgressCount })}</span
+		<span class="status-chip">{t('home.projectCount', { n: allProjects.length, m: inProgressCount })}</span
 		>
 		<button
-			class="entry-btn"
+			class="a-btn"
 			class:primary={entryMode === 'none'}
 			class:secondary={entryMode !== 'none'}
 			onclick={openIdea}
@@ -321,22 +321,22 @@
 		<section class="main-col">
 			{#if entryMode === 'none'}
 				<div class="entries">
-					<article class="entry-card">
-						<span class="entry-icon"><Icon name="sparkle" size={18} /></span>
-						<h2>{t('home.entryIdeaTitle')}</h2>
-						<p>{t('home.entryIdeaBody')}</p>
-						<button type="button" class="entry-btn secondary full" onclick={openIdea}>
-							{t('home.startIdea')}
-						</button>
-					</article>
-					<article class="entry-card">
-						<span class="entry-icon"><Icon name="script" size={18} /></span>
-						<h2>{t('home.entryScriptTitle')}</h2>
-						<p>{t('home.entryScriptBody')}</p>
-						<button type="button" class="entry-btn secondary full" onclick={openScript}>
-							{t('home.importScript')}
-						</button>
-					</article>
+				<article class="entry-card">
+					<span class="entry-icon"><Icon name="sparkle" size={18} /></span>
+					<h2>{t('home.entryIdeaTitle')}</h2>
+					<p>{t('home.entryIdeaBody')}</p>
+					<button type="button" class="a-btn secondary full" onclick={openIdea}>
+						{t('home.startIdea')}
+					</button>
+				</article>
+				<article class="entry-card">
+					<span class="entry-icon"><Icon name="script" size={18} /></span>
+					<h2>{t('home.entryScriptTitle')}</h2>
+					<p>{t('home.entryScriptBody')}</p>
+					<button type="button" class="a-btn secondary full" onclick={openScript}>
+						{t('home.importScript')}
+					</button>
+				</article>
 				</div>
 			{:else if entryMode === 'idea'}
 				<form class="entry-form" onsubmit={submitIdea}>
@@ -351,43 +351,43 @@
 							<Icon name="close" size={16} />
 						</button>
 					</div>
-					<label class="f-field">
-						<span class="f-label">{t('projects.titleField')}<em>*</em></span>
+					<label class="field">
+						<span class="field-label">{t('projects.titleField')}<em>*</em></span>
 						<input
-							class="f-input"
+							class="field-input"
 							class:invalid={showErrors && ideaErrors.title}
 							bind:value={ideaForm.title}
 							placeholder={t('projects.titlePlaceholder')}
 						/>
-						{#if showErrors && ideaErrors.title}<span class="f-error">{ideaErrors.title}</span>{/if}
+						{#if showErrors && ideaErrors.title}<span class="field-error">{ideaErrors.title}</span>{/if}
 					</label>
-					<label class="f-field">
-						<span class="f-label">{t('projects.ideaField')}</span>
+					<label class="field">
+						<span class="field-label">{t('projects.ideaField')}</span>
 						<textarea
-							class="f-input textarea"
+							class="field-textarea"
 							bind:value={ideaForm.idea}
 							placeholder={t('home.ideaPlaceholder')}
 							rows={4}
 						></textarea>
-						<span class="f-hint">{t('projects.ideaHint')}</span>
+						<span class="field-hint">{t('projects.ideaHint')}</span>
 					</label>
 					<div class="f-grid">
-						<label class="f-field">
-							<span class="f-label">{t('projects.genre')}</span>
-							<select class="f-input" bind:value={ideaForm.genre}>
+						<label class="field">
+							<span class="field-label">{t('projects.genre')}</span>
+							<select class="field-input" bind:value={ideaForm.genre}>
 								{#each GENRES as v (v)}<option value={v}>{t('genres.' + genreKey(v))}</option
 									>{/each}
 							</select>
 						</label>
-						<label class="f-field">
-							<span class="f-label">{t('projects.tone')}</span>
-							<select class="f-input" bind:value={ideaForm.tone}>
+						<label class="field">
+							<span class="field-label">{t('projects.tone')}</span>
+							<select class="field-input" bind:value={ideaForm.tone}>
 								{#each TONES as v (v)}<option value={v}>{t('tones.' + toneKey(v))}</option>{/each}
 							</select>
 						</label>
-						<label class="f-field">
-							<span class="f-label">{t('projects.duration')}</span>
-							<select class="f-input" bind:value={ideaForm.duration}>
+						<label class="field">
+							<span class="field-label">{t('projects.duration')}</span>
+							<select class="field-input" bind:value={ideaForm.duration}>
 								{#each DURATIONS as v (v)}<option value={v}
 										>{t('durations.' + durationKey(v))}</option
 									>{/each}
@@ -414,29 +414,29 @@
 							<Icon name="close" size={16} />
 						</button>
 					</div>
-					<label class="f-field">
-						<span class="f-label">{t('projects.titleField')}<em>*</em></span>
+					<label class="field">
+						<span class="field-label">{t('projects.titleField')}<em>*</em></span>
 						<input
-							class="f-input"
+							class="field-input"
 							class:invalid={showErrors && scriptErrors.title}
 							bind:value={scriptForm.title}
 							placeholder={t('projects.titlePlaceholder')}
 						/>
-						{#if showErrors && scriptErrors.title}<span class="f-error">{scriptErrors.title}</span
+						{#if showErrors && scriptErrors.title}<span class="field-error">{scriptErrors.title}</span
 							>{/if}
 					</label>
-					<label class="f-field">
-						<span class="f-label">{t('home.scriptField')}<em>*</em></span>
+					<label class="field">
+						<span class="field-label">{t('home.scriptField')}<em>*</em></span>
 						<textarea
-							class="f-input textarea"
+							class="field-textarea"
 							class:invalid={showErrors && scriptErrors.script}
 							bind:value={scriptForm.script}
 							placeholder={t('home.scriptPlaceholder')}
 							rows={9}
 						></textarea>
-						{#if showErrors && scriptErrors.script}<span class="f-error">{scriptErrors.script}</span
+						{#if showErrors && scriptErrors.script}<span class="field-error">{scriptErrors.script}</span
 							>{/if}
-						<span class="f-hint">{t('home.scriptHint')}</span>
+						<span class="field-hint">{t('home.scriptHint')}</span>
 					</label>
 					<div class="form-actions">
 						<Button variant="ghost" onclick={closeEntry}>{t('projects.cancel')}</Button>
@@ -491,12 +491,12 @@
 		</section>
 
 		<aside class="tasks">
-			<div class="tasks-head">
-				<h2>{t('home.tasksTitle')}</h2>
-				<span class="chip" class:run={activeJobCount > 0}>
-					{t('home.activeJobs', { n: activeJobCount })}
-				</span>
-			</div>
+		<div class="tasks-head">
+			<h2>{t('home.tasksTitle')}</h2>
+			<span class="status-chip" class:run-chip={activeJobCount > 0}>
+				{t('home.activeJobs', { n: activeJobCount })}
+			</span>
+		</div>
 
 			{#if $jobsQuery.isLoading}
 				<div class="tasks-loading">{t('common.loading')}…</div>
@@ -513,7 +513,7 @@
 						{@const bar = jobBar(job)}
 						<li class="job-row" class:failed={job.status === 'failed'}>
 							<div class="job-top">
-								<span class="tag {tag.cls}">{tag.label}</span>
+								<span class="a-tag">{tag.label}</span>
 								<span class="job-name" title={jobTitle(job)}>{jobTitle(job)}</span>
 								<span class="job-side">
 									{#if job.status === 'failed' && job.error !== 'cancelled'}
@@ -572,56 +572,7 @@
 	}
 
 	/* ---------------- topbar chip + buttons ---------------- */
-	.chip {
-		padding: 5px 12px;
-		border-radius: 999px;
-		background: var(--surface-3);
-		color: var(--text-2);
-		font-size: 11.5px;
-		white-space: nowrap;
-	}
-	.chip.run {
-		background: var(--run-soft);
-		color: var(--run);
-	}
-
-	.entry-btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 6px;
-		min-height: 34px;
-		padding: 0 16px;
-		border-radius: 8px;
-		font-family: inherit;
-		font-size: 13px;
-		font-weight: 600;
-		cursor: pointer;
-		border: 1px solid transparent;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			transform 100ms;
-	}
-	.entry-btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-	}
-	.entry-btn.primary:hover {
-		background: var(--accent-hover);
-	}
-	.entry-btn.secondary {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text);
-	}
-	.entry-btn.secondary:hover {
-		border-color: var(--line-2);
-	}
-	.entry-btn:active {
-		transform: scale(0.98);
-	}
-	.entry-btn.full {
+	.a-btn.full {
 		width: 100%;
 		margin-top: auto;
 	}
@@ -630,57 +581,57 @@
 	.entries {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: 16px;
+		gap: var(--sp-6);
 	}
 	.entry-card {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		padding: 18px 20px 20px;
+		gap: var(--sp-3);
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		padding: 18px var(--sp-7) var(--sp-7);
 		min-height: 168px;
 	}
 	.entry-icon {
 		width: 38px;
 		height: 38px;
 		border-radius: 9px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
+		background: var(--bg-3);
+		border: 1px solid var(--line-2);
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		color: var(--text-2);
 	}
 	.entry-card h2 {
-		margin: 4px 0 0;
+		margin: var(--sp-1) 0 0;
 		font-size: 14.5px;
 		font-weight: 600;
 		color: var(--text);
 	}
 	.entry-card p {
 		margin: 0;
-		font-size: 12.5px;
+		font-size: var(--fs-body-sm);
 		line-height: 1.65;
 		color: var(--text-2);
 	}
 
 	.entry-form {
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		padding: 18px 20px 20px;
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		padding: 18px var(--sp-7) var(--sp-7);
 	}
 	.form-head {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		margin-bottom: 14px;
+		margin-bottom: var(--sp-5);
 	}
 	.form-head h2 {
 		margin: 0;
-		font-size: 15px;
+		font-size: var(--fs-title);
 		font-weight: 600;
 		color: var(--text);
 	}
@@ -691,89 +642,41 @@
 		width: 28px;
 		height: 28px;
 		border: none;
-		border-radius: 7px;
+		border-radius: var(--r-sm);
 		background: transparent;
 		color: var(--text-3);
 		cursor: pointer;
 	}
 	.icon-btn:hover {
-		background: var(--surface-3);
+		background: var(--bg-4);
 		color: var(--text);
 	}
-
-	.f-field {
-		display: block;
-		margin-bottom: 13px;
-	}
-	.f-label {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		font-size: 12px;
-		font-weight: 600;
-		color: var(--text-2);
-		margin-bottom: 6px;
-	}
-	.f-label em {
-		color: var(--error);
+	.field-label em {
+		color: var(--err);
 		font-style: normal;
 	}
-	.f-input {
-		width: 100%;
-		box-sizing: border-box;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 7px;
-		padding: 9px 11px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 13px;
-	}
-	.f-input.textarea {
-		resize: vertical;
-		min-height: 88px;
-		line-height: 1.6;
-	}
-	.f-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.f-input.invalid {
-		border-color: var(--err-line);
-	}
-	.f-hint {
-		display: block;
-		margin-top: 5px;
-		font-size: 11px;
-		color: var(--text-3);
-	}
-	.f-error {
-		display: block;
-		margin-top: 5px;
-		font-size: 11.5px;
-		color: var(--error);
-	}
+
 	.f-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		gap: 12px;
+		gap: var(--sp-5);
 	}
-	.f-grid .f-field {
+	.f-grid .field {
 		margin-bottom: 0;
 	}
 	.form-actions {
 		display: flex;
 		justify-content: flex-end;
-		gap: 8px;
-		margin-top: 16px;
-		padding-top: 12px;
-		border-top: 1px solid var(--border);
+		gap: var(--sp-3);
+		margin-top: var(--sp-6);
+		padding-top: var(--sp-5);
+		border-top: 1px solid var(--line);
 	}
 	/* ---------------- project cards ---------------- */
 	.projects-head {
 		display: flex;
 		align-items: baseline;
-		gap: 12px;
+		gap: var(--sp-5);
 	}
 	.projects-head h2 {
 		margin: 0;
@@ -788,12 +691,12 @@
 	.cards {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-		gap: 16px;
+		gap: var(--sp-6);
 	}
 	.skel-card {
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
 		overflow: hidden;
 	}
 	.skel-card :global(.skeleton) {
@@ -803,77 +706,82 @@
 		display: flex;
 		flex-direction: column;
 		gap: 9px;
-		padding: 14px 16px;
+		padding: var(--sp-5) var(--sp-6);
 	}
 	.panel-empty {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 10px;
-		padding: 36px 20px;
-		border: 1.5px dashed var(--border-strong);
-		border-radius: 10px;
+		gap: var(--sp-4);
+		padding: 36px var(--sp-7);
+		border: 1.5px dashed var(--line-2);
+		border-radius: var(--r-lg);
 		color: var(--text-3);
 		text-align: center;
 	}
 	.panel-empty p {
 		margin: 0;
-		font-size: 12.5px;
+		font-size: var(--fs-body-sm);
 		line-height: 1.65;
 		color: var(--text-2);
 	}
 	.panel-empty.error p {
-		color: var(--error);
+		color: var(--err);
 	}
 
 	/* ---------------- right task area ---------------- */
 	.tasks {
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		padding: 16px 18px 14px;
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		padding: var(--sp-6) var(--sp-7) var(--sp-5);
 		position: sticky;
 		top: 24px;
 		display: flex;
 		flex-direction: column;
-		gap: 12px;
+		gap: var(--sp-5);
 		min-width: 0;
 	}
 	.tasks-head {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: 10px;
+		gap: var(--sp-4);
 	}
 	.tasks-head h2 {
 		margin: 0;
-		font-size: 14px;
+		font-size: var(--fs-section);
 		font-weight: 600;
 		color: var(--text);
 		white-space: nowrap;
 	}
+	.run-chip {
+		background: var(--run-soft);
+		border-color: color-mix(in srgb, var(--run) 35%, transparent);
+		color: var(--run);
+	}
 	.tasks-loading {
 		color: var(--text-3);
-		font-size: 12px;
-		padding: 12px 0;
+		font-size: var(--fs-aux);
+		padding: var(--sp-4) 0;
 	}
 	.tasks-empty {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 8px;
-		padding: 22px 10px 16px;
+		gap: var(--sp-3);
+		padding: 22px var(--sp-4) var(--sp-6);
 		color: var(--text-3);
 		text-align: center;
 	}
 	.tasks-empty p {
 		margin: 0;
-		font-size: 12px;
+		font-size: var(--fs-aux);
 		line-height: 1.65;
 		color: var(--text-2);
 	}
 	.tasks-empty-sub {
-		font-size: 11px;
+		font-size: var(--fs-mini);
 		color: var(--text-3);
 	}
 
@@ -888,8 +796,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 7px;
-		padding: 12px 0;
-		border-bottom: 1px solid var(--border);
+		padding: var(--sp-5) 0;
+		border-bottom: 1px solid var(--line);
 	}
 	.job-row:last-child {
 		border-bottom: none;
@@ -897,26 +805,13 @@
 	.job-top {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: var(--sp-3);
 		min-width: 0;
 	}
-	.tag {
-		padding: 1px 8px;
-		border-radius: 999px;
-		font-size: 10.5px;
-		font-weight: 600;
-		flex-shrink: 0;
-		white-space: nowrap;
-	}
-	.tag-local,
-	.tag-cloud {
-		background: var(--bg-4);
-		color: var(--text-2);
-	}
 	.job-name {
 		flex: 1;
 		min-width: 0;
-		font-size: 12.5px;
+		font-size: var(--fs-body-sm);
 		font-weight: 600;
 		color: var(--text);
 		white-space: nowrap;
@@ -926,7 +821,7 @@
 	.job-side {
 		display: inline-flex;
 		align-items: center;
-		gap: 8px;
+		gap: var(--sp-3);
 		flex-shrink: 0;
 	}
 	.job-meta {
@@ -941,10 +836,10 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 5px;
-		font-size: 11px;
+		font-size: var(--fs-mini);
 	}
 	.done-text {
-		color: var(--success);
+		color: var(--ok);
 	}
 	.running-text {
 		color: var(--run);
@@ -953,7 +848,7 @@
 		color: var(--text-3);
 	}
 	.failed-text {
-		color: var(--error);
+		color: var(--err);
 		max-width: 120px;
 		white-space: nowrap;
 		overflow: hidden;
@@ -978,21 +873,25 @@
 			opacity: 0.35;
 		}
 	}
-		.retry-link {
+	/* 次级文字操作「重试」走 ghost（§1.2）：默认 --text-2，悬停 --text。 */
+	.retry-link {
 		background: none;
 		border: none;
 		padding: 0;
 		font-family: inherit;
-		font-size: 11px;
-		color: var(--error);
+		font-size: var(--fs-mini);
+		color: var(--text-2);
 		cursor: pointer;
 		text-decoration: underline;
 		text-underline-offset: 3px;
 	}
+	.retry-link:hover {
+		color: var(--text);
+	}
 	.tasks-note {
 		margin: 0;
-		padding-top: 10px;
-		border-top: 1px solid var(--border);
+		padding-top: var(--sp-4);
+		border-top: 1px solid var(--line);
 		font-size: 10.5px;
 		line-height: 1.6;
 		color: var(--text-3);
@@ -1002,13 +901,13 @@
 	@media (max-width: 1439px) {
 		.home {
 			grid-template-columns: minmax(0, 1fr) 320px;
-			padding: 20px 22px 36px;
+			padding: var(--sp-6) 22px 36px;
 		}
 	}
-	@media (max-width: 1023px) {
+	@media (max-width: 1179px) {
 		.home {
 			grid-template-columns: minmax(0, 1fr);
-			padding: 16px 16px 32px;
+			padding: var(--sp-5) var(--sp-5) 32px;
 		}
 		.tasks {
 			position: static;
@@ -1020,4 +919,9 @@
 			grid-template-columns: minmax(0, 1fr);
 		}
 	}
+	@media (max-width: 760px) {
+		.home {
+			padding: var(--sp-4) var(--sp-4) var(--sp-8);
+		}
+	}
 </style>

calliope-web/src/routes/agents/+page.svelte

@@ -589,6 +589,11 @@
 	function avatarStyle(n: number): string {
 		return `var(--avatar-${Math.min(Math.max(n, 1), 5)})`;
 	}
+
+	// HEL-680 灰阶头像：1–2 亮阶配深字，3–5 暗阶配浅字，按阶数决定。
+	function avatarLight(n: number | undefined): boolean {
+		return Math.min(Math.max(n ?? 1, 1), 5) <= 2;
+	}
 </script>
 
 {#snippet skillRow(skill: SkillAdminEntry, detail: string)}
@@ -655,7 +660,7 @@
 								class:selected
 								onclick={() => selectAgent(agent.key)}
 							>
-								<span class="avatar" class:dark={agent.avatar_dark} style:background={avatarStyle(agent.avatar)}>
+								<span class="avatar" class:dark={avatarLight(agent.avatar)} style:background={avatarStyle(agent.avatar)}>
 									{agent.char}
 								</span>
 								<span class="agent-meta">
@@ -693,7 +698,7 @@
 				<section class="mid">
 					{#if activeAgent}
 						<header class="chat-head">
-							<span class="avatar lg" class:dark={activeAgent.avatar_dark} style:background={avatarStyle(activeAgent.avatar)}>
+							<span class="avatar lg" class:dark={avatarLight(activeAgent.avatar)} style:background={avatarStyle(activeAgent.avatar)}>
 								{activeAgent.char}
 							</span>
 							<div class="chat-head-meta">
@@ -1185,17 +1190,20 @@
 		padding: 10px 4px;
 		margin: 0;
 	}
+	/* Skill 行（§3.6）：启用 = --run 描边 + 软底；停用 = --text-3 描边。 */
 	.skill-row {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 		padding: 7px 8px;
-		border-radius: 8px;
-		border: 1px solid var(--border);
-		background: var(--surface);
+		border-radius: var(--r-md);
+		border: 1px solid color-mix(in srgb, var(--run) 45%, transparent);
+		background: var(--run-soft);
 	}
 	.skill-row.disabled {
-		opacity: 0.55;
+		border-color: color-mix(in srgb, var(--text-3) 45%, transparent);
+		background: var(--bg-2);
+		opacity: 0.75;
 	}
 	.skill-row-main {
 		display: flex;
@@ -1218,7 +1226,7 @@
 		text-overflow: ellipsis;
 	}
 	.skill-name:hover {
-		color: var(--accent);
+		color: var(--text);
 	}
 	.skill-tags {
 		display: flex;
@@ -1390,13 +1398,15 @@
 		gap: 5px;
 		background: none;
 		border: none;
-		color: var(--accent);
+		color: var(--text-2);
 		font-size: 11.5px;
 		cursor: pointer;
 		padding: 2px 4px;
 	}
 	.link-btn:hover {
+		color: var(--text);
 		text-decoration: underline;
+		text-underline-offset: 3px;
 	}
 
 	.versions {
@@ -1486,7 +1496,7 @@
 		color: var(--text-2);
 	}
 	.f-label em {
-		color: var(--accent);
+		color: var(--err);
 		font-style: normal;
 		margin-left: 2px;
 	}
@@ -1660,7 +1670,7 @@
 			border-radius: 12px 0 0 12px;
 			transform: translateX(calc(100% + 18px));
 			transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
-			box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
+			box-shadow: var(--shadow-float);
 		}
 		.right.open {
 			transform: translateX(0);
@@ -1669,7 +1679,7 @@
 			display: block;
 			position: fixed;
 			inset: 0;
-			background: rgba(0, 0, 0, 0.5);
+			background: var(--overlay);
 			z-index: 55;
 		}
 		.session-select {
@@ -1677,7 +1687,7 @@
 		}
 	}
 
-	@media (max-width: 1279px) {
+	@media (max-width: 1179px) {
 		.model-pick .model-label {
 			display: none;
 		}

calliope-web/src/routes/app.css

@@ -4,62 +4,67 @@
 
 :root {
 	/* ------------------------------------------------------------------
-	 * 融合视觉 design tokens — HEL-649 整站施工规范 §一（流水台结构 ×
-	 * 放映厅配色）。Single source of truth for the whole app: pages and
-	 * components reference these variables only — no hardcoded colors,
-	 * no ad-hoc overrides. Gold is for key actions and the current
-	 * selection only; status colors each carry exactly one meaning.
+	 * 无彩灰阶 design tokens — HEL-680 S1（白栖知 theme-1「暗房放大机」
+	 * × HEL-679 已确认融合样稿）。Single source of truth for the whole
+	 * app: pages and components reference these variables only — no
+	 * hardcoded colors, no ad-hoc overrides. 界面只有暖调黑白灰，作品是
+	 * 屏幕上唯一成片的颜色；状态色仅按主题卡的两处有限例外（琥珀
+	 * #A3915F、红 #B3564A）使用，不放大成全站主色。选中=取景框角线，
+	 * 完成=「定影」，结果=相纸白边。
 	 * ------------------------------------------------------------------ */
 
-	/* 底色：蓝黑四阶，逐层浮起 (§1.1) */
-	--bg: #07090e;
-	--bg-2: #0c0f16;
-	--bg-3: #121724;
-	--bg-4: #1a2133;
-	--line: #1b2233;
-	--line-2: #2a3450;
-	--page-glow: radial-gradient(1200px 500px at 70% -10%, rgba(38, 52, 92, 0.25), transparent 60%);
-	--float-bg: linear-gradient(180deg, #10152a, var(--bg-2));
-	--overlay: rgba(4, 6, 10, 0.6);
-	--media-scrim: rgba(7, 9, 14, 0.65);
+	/* 底色：显影灰阶四阶，逐层浮起（theme-1：#212120 底 / #2C2C2A 面板） */
+	--bg: #212120;
+	--bg-2: #262625;
+	--bg-3: #2c2c2a;
+	--bg-4: #383835;
+	--line: #313130;
+	--line-2: #454542;
+	--page-glow: radial-gradient(1200px 500px at 70% -10%, rgba(245, 244, 238, 0.035), transparent 60%);
+	--float-bg: linear-gradient(180deg, #2e2e2c, var(--bg-2));
+	--overlay: rgba(18, 18, 17, 0.62);
+	--media-scrim: rgba(18, 18, 17, 0.66);
 	--on-media: #fff;
 	--on-media-line: rgba(255, 255, 255, 0.05);
-	--composer-bg: linear-gradient(180deg, #0e1220, var(--bg-2));
-	--composer-focus: 0 0 0 1px rgba(242, 199, 132, 0.12), 0 8px 28px rgba(0, 0, 0, 0.4);
+	--composer-bg: linear-gradient(180deg, #2a2a28, var(--bg-2));
+	--composer-focus: 0 0 0 1px rgba(245, 244, 238, 0.12), 0 8px 28px rgba(0, 0, 0, 0.4);
 
-	/* 放映金：主按钮、当前选中、改过的参数、聚焦框、Toast 动作 (§1.2) */
-	--accent: #f2c784;
-	--accent-ink: #23170a;
-	--accent-soft: rgba(242, 199, 132, 0.13);
-	--accent-hi: #f7d9a2;
-	--accent-lo: #ecaf63;
-	--accent-glow: rgba(236, 175, 99, 0.28);
-	--accent-line: rgba(242, 199, 132, 0.55);
+	/* 相纸白（重点色）：主按钮、当前选中、改过的参数、聚焦框、Toast 动作
+	   (theme-1 #F5F4EE 重点) */
+	--accent: #f5f4ee;
+	--accent-ink: #212120;
+	--accent-soft: rgba(245, 244, 238, 0.08);
+	--accent-hi: #ffffff;
+	--accent-lo: #ddddd7;
+	--accent-glow: rgba(240, 239, 233, 0.2);
+	--accent-line: rgba(245, 244, 238, 0.55);
 	--accent-grad: linear-gradient(180deg, var(--accent-hi), var(--accent-lo));
-	--accent-grad-hover: linear-gradient(180deg, #fbe3b6, #f0b968);
-	--accent-ring: 0 0 0 1px rgba(242, 199, 132, 0.7), 0 0 22px var(--accent-glow);
-	--btn-glow: 0 2px 14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
-	--btn-glow-hover: 0 4px 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
-	--accent-wash: linear-gradient(180deg, rgba(242, 199, 132, 0.05), transparent 40%);
-	--sel-shadow: 0 0 0 1px rgba(242, 199, 132, 0.15), 0 6px 24px rgba(0, 0, 0, 0.35);
+	--accent-grad-hover: linear-gradient(180deg, #ffffff, #e8e7df);
+	--accent-ring: 0 0 0 1px rgba(245, 244, 238, 0.7), 0 0 22px var(--accent-glow);
+	--btn-glow: 0 2px 10px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
+	--btn-glow-hover: 0 3px 14px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.65);
+	--accent-wash: linear-gradient(180deg, rgba(245, 244, 238, 0.05), transparent 40%);
+	--sel-shadow: 0 0 0 1px rgba(245, 244, 238, 0.14), 0 6px 24px rgba(0, 0, 0, 0.35);
 
-	/* 信号色：绿=完成/已确认/通过，青=进行中/在线，红=失败/危险，
-	   琥珀=待确认/文件缺失/限额 (§1.3) */
-	--ok: #49cb90;
-	--ok-soft: rgba(73, 203, 144, 0.13);
-	--run: #54dfd2;
-	--run-soft: rgba(84, 223, 210, 0.13);
-	--run-grad: linear-gradient(90deg, #3bbfb4, var(--run));
-	--err: #f0645a;
-	--err-soft: rgba(240, 100, 90, 0.13);
-	--err-line: rgba(240, 100, 90, 0.6);
-	--warn: #f0b45c;
-	--warn-soft: rgba(240, 180, 92, 0.13);
+	/* 信号色：完成=显影亮灰（「定影」，配图标/文字双编码），进行中=灰阶
+	   +动效；红/琥珀只按 theme-1 卡片的有限例外使用（红=失败/危险
+	   #B3564A 系，琥珀=待确认/文件缺失 #A3915F） */
+	--ok: #ddddd7;
+	--ok-soft: rgba(221, 221, 215, 0.1);
+	--run: #b8b6ac;
+	--run-soft: rgba(184, 182, 172, 0.12);
+	--run-grad: linear-gradient(90deg, #8f8e85, #c6c5c0);
+	--err: #d07a6b;
+	--err-solid: #b3564a;
+	--err-soft: rgba(181, 86, 74, 0.15);
+	--err-line: rgba(208, 122, 107, 0.55);
+	--warn: #a3915f;
+	--warn-soft: rgba(163, 145, 95, 0.13);
 
-	/* 文字与字体 (§1.4)；--text-2 是深底可读性下限，不得再暗 */
-	--text: #f4f6fa;
-	--text-2: #aab2c5;
-	--text-3: #6d7690;
+	/* 文字与字体；--text-3 是深底可读性下限（≥4.5:1 on --bg-3），不得再暗 */
+	--text: #f0efe9;
+	--text-2: #a8a69c;
+	--text-3: #94938c;
 	--font: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
 	--mono: 'JetBrains Mono', ui-monospace, monospace;
 	--fs-title: 15px;
@@ -95,8 +100,14 @@
 	/* 专属符号 (§1.7)：齿孔只在记录流/输入台分隔带，光晕只在播放舞台 */
 	--sprocket: radial-gradient(circle 2px, var(--line-2) 98%, transparent);
 	--stage-bg:
-		radial-gradient(60% 45% at 50% 38%, rgba(242, 199, 132, 0.07), transparent 70%),
-		radial-gradient(80% 70% at 50% 50%, #0d1220, #05070c);
+		radial-gradient(60% 45% at 50% 38%, rgba(245, 244, 238, 0.045), transparent 70%),
+		radial-gradient(80% 70% at 50% 50%, #232322, #171716);
+
+	/* 取景框角线与相纸白边 (HEL-680)：内容级选中/结果呈现的统一语言 */
+	--frame-w: 2px;
+	--frame-arm: 12px;
+	--frame-inset: -4px;
+	--paper-w: 4px;
 
 	/* 动效 (§1.6，取 HEL-648 实测值)；只动 transform / opacity */
 	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
@@ -113,13 +124,13 @@
 	--d-progress: 400ms;
 	--press-scale: 0.97;
 
-	/* Avatar five-color set — five agents only; the one colorful gradient
-	   family the spec keeps (§3.6). */
-	--avatar-1: linear-gradient(135deg, #e8a33d, #b96a1b);
-	--avatar-2: linear-gradient(135deg, #5b8def, #3a5fa9);
-	--avatar-3: linear-gradient(135deg, #3fb97f, #2a7a54);
-	--avatar-4: linear-gradient(135deg, #b98be0, #7a4fa9);
-	--avatar-5: linear-gradient(135deg, #d98e6a, #a95535);
+	/* Avatar five-step grayscale (HEL-680 无彩化)：1–2 亮阶配深字，
+	   3–5 暗阶配浅字；仍是五个身份位，只是从彩色渐变改为显影灰阶。 */
+	--avatar-1: linear-gradient(135deg, #e8e7df, #cdcbc4);
+	--avatar-2: linear-gradient(135deg, #b5b3aa, #9c9a91);
+	--avatar-3: linear-gradient(135deg, #6b6a66, #55544f);
+	--avatar-4: linear-gradient(135deg, #55544f, #424140);
+	--avatar-5: linear-gradient(135deg, #424140, #2e2e2c);
 
 	/* ------------------------------------------------------------------
 	 * Legacy token names (§六 映射表) — aliases only, never new values,
@@ -297,7 +308,7 @@ code,
 	color: var(--err);
 }
 .a-btn.danger-solid {
-	background: var(--err);
+	background: var(--err-solid);
 	color: var(--on-media);
 }
 @media (hover: hover) and (pointer: fine) {
@@ -550,6 +561,47 @@ button.status-chip:active {
 .a-chip.changed {
 	color: var(--accent);
 }
+/* Selected filter chip (§3.5 筛选芯片组): 当前选中 = 取景框角线缩影 +
+   相纸白文字 + accent-soft 底 (HEL-680) */
+.a-chip.sel {
+	position: relative;
+	background: var(--accent-soft);
+	color: var(--accent);
+}
+.a-chip.sel::after {
+	content: '';
+	position: absolute;
+	inset: 2px;
+	pointer-events: none;
+	background-image:
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0);
+	background-position:
+		left top,
+		left top,
+		right top,
+		right top,
+		left bottom,
+		left bottom,
+		right bottom,
+		right bottom;
+	background-size:
+		6px 1.5px,
+		1.5px 6px,
+		6px 1.5px,
+		1.5px 6px,
+		6px 1.5px,
+		1.5px 6px,
+		6px 1.5px,
+		1.5px 6px;
+	background-repeat: no-repeat;
+}
 .a-chip.warn {
 	color: var(--warn);
 }
@@ -748,6 +800,81 @@ button.a-tile:disabled {
 	box-shadow: 0 0 0 1px var(--line);
 }
 
+/* ------------------------------------------------------------------
+ * 取景框角线选中 (HEL-680)：内容级选中态的唯一语言——四角短线取景，
+ * 不整框描边。挂在需要角线的元素上（元素自身可 overflow 可见；被
+ * overflow:hidden 裁切的容器改用 --frame-inset 正值画在内侧）。
+ * ------------------------------------------------------------------ */
+.a-frame {
+	position: relative;
+}
+.a-frame::after {
+	content: '';
+	position: absolute;
+	inset: var(--frame-inset, -4px);
+	z-index: 3;
+	pointer-events: none;
+	background-image:
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0),
+		linear-gradient(var(--accent) 0 0);
+	background-position:
+		left top,
+		left top,
+		right top,
+		right top,
+		left bottom,
+		left bottom,
+		right bottom,
+		right bottom;
+	background-size:
+		var(--frame-arm, 12px) var(--frame-w, 2px),
+		var(--frame-w, 2px) var(--frame-arm, 12px),
+		var(--frame-arm, 12px) var(--frame-w, 2px),
+		var(--frame-w, 2px) var(--frame-arm, 12px),
+		var(--frame-arm, 12px) var(--frame-w, 2px),
+		var(--frame-w, 2px) var(--frame-arm, 12px),
+		var(--frame-arm, 12px) var(--frame-w, 2px),
+		var(--frame-w, 2px) var(--frame-arm, 12px);
+	background-repeat: no-repeat;
+}
+
+/* 相纸白边 (HEL-680)：结果媒体外的相纸白框，底边略厚如手工相纸。
+   挂在承载 img/video 的媒体容器上；容器尺寸由调用方决定。 */
+.a-photo {
+	background: var(--accent);
+	border: var(--paper-w, 4px) solid var(--accent);
+	border-bottom-width: calc(var(--paper-w, 4px) + 2px);
+	border-radius: 2px;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+	box-sizing: border-box;
+}
+
+/* 「定影」完成章 (HEL-680)：已定影结果右上角的完成印记，随 jobst.done
+   文案走（中文=定影）。absolute 定位，挂在有媒体的结果容器内。 */
+.a-fix {
+	position: absolute;
+	top: var(--sp-3);
+	right: var(--sp-3);
+	z-index: 2;
+	padding: 1px 6px;
+	border: 1px solid currentColor;
+	border-radius: 3px;
+	background: var(--media-scrim);
+	color: var(--ok);
+	font-size: var(--fs-mini);
+	font-weight: 700;
+	letter-spacing: 0.1em;
+	text-indent: 0.1em;
+	transform: rotate(-4deg);
+	pointer-events: none;
+}
+
 /* Floating surface for pop / drawer / confirm / toast / lightbox (§四.3). */
 .a-float {
 	background: var(--float-bg);

calliope-web/src/routes/build-scene/+page.svelte

@@ -574,7 +574,7 @@ function toggleChat() {
 	.left-panel {
 		width: 280px;
 		flex-shrink: 0;
-		border-right: 1px solid var(--border, #232733);
+		border-right: 1px solid var(--line);
 		display: flex;
 		flex-direction: column;
 		min-height: 0;
@@ -582,7 +582,7 @@ function toggleChat() {
 	.inspector-slot {
 		flex: 1;
 		min-height: 0;
-		border-top: 1px solid var(--border, #232733);
+		border-top: 1px solid var(--line);
 		overflow: hidden;
 	}
 	.center-panel {
@@ -600,7 +600,7 @@ function toggleChat() {
 		position: relative;
 		display: flex;
 		overflow: hidden;
-		background: #0b1220;
+		background: var(--bg-2);
 	}
 	.loading {
 		flex: 1;
@@ -612,11 +612,11 @@ function toggleChat() {
 	.chat-panel {
 		width: 360px;
 		flex-shrink: 0;
-		border-left: 1px solid var(--border, #232733);
+		border-left: 1px solid var(--line);
 		display: flex;
 		flex-direction: column;
 		min-height: 0;
-		transition: width 0.18s ease;
+		transition: width var(--d-pop) var(--ease-out);
 	}
 	.chat-panel.collapsed {
 		width: 40px;
@@ -636,7 +636,7 @@ function toggleChat() {
 		letter-spacing: 0.04em;
 	}
 	.chat-toggle {
-		border: 1px solid var(--border, #2a2f3a);
+		border: 1px solid var(--line-2);
 		background: transparent;
 		color: inherit;
 		border-radius: 6px;
@@ -650,14 +650,14 @@ function toggleChat() {
 		flex-shrink: 0;
 	}
 	.chat-toggle:hover {
-		background: rgba(255, 255, 255, 0.08);
+		background: var(--bg-4);
 	}
 	.chat-head {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 		padding: 10px 14px;
-		border-bottom: 1px solid var(--border, #232733);
+		border-bottom: 1px solid var(--line);
 	}
 	.chat-head .chat-toggle {
 		margin-left: auto;
@@ -677,7 +677,7 @@ function toggleChat() {
 		font-size: 10px;
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		border: 1px solid var(--border, #2a2f3a);
+		border: 1px solid var(--line-2);
 		border-radius: 999px;
 		padding: 2px 8px;
 		opacity: 0.7;
@@ -686,6 +686,37 @@ function toggleChat() {
 		margin: 0;
 		padding: 4px 12px;
 		font-size: 12px;
-		color: var(--muted, #9aa3b5);
+		color: var(--text-3);
+	}
+	/* ── ≤760px 可用级适配（F 批）：解除 100vh 固定布局，纵向堆叠可滚动。 ── */
+	@media (max-width: 760px) {
+		.shell {
+			height: auto;
+			min-height: 100vh;
+			overflow: visible;
+		}
+		.workspace {
+			flex-direction: column;
+		}
+		.left-panel {
+			width: 100%;
+			border-right: none;
+			border-bottom: 1px solid var(--line);
+			max-height: 60vh;
+		}
+		.chat-panel,
+		.chat-panel.collapsed {
+			width: 100%;
+			border-left: none;
+			border-top: 1px solid var(--line);
+			min-height: 50vh;
+		}
+		.chat-panel.collapsed .chat-head {
+			flex-direction: row;
+			padding: var(--sp-3) var(--sp-5);
+		}
+		.chat-title-vert {
+			writing-mode: horizontal-tb;
+		}
 	}
 </style>

calliope-web/src/routes/canvas/+page.svelte

@@ -39,6 +39,6 @@
 		font-size: 14px;
 	}
 	.redirect-error {
-		color: #f87171;
+		color: var(--err);
 	}
 </style>

calliope-web/src/routes/canvas/[id]/+page.svelte

@@ -1080,7 +1080,7 @@
 					<span class="saved">saved</span>
 				{/if}
 				{#if canvas.project}
-					<a class="project-chip" href="/project/{canvas.project.id}">
+					<a class="project-chip" href="/workbench/{canvas.project.id}">
 						<Icon name="folder" size={12} />
 						{canvas.project.title}
 					</a>
@@ -1387,8 +1387,8 @@ title={running
 			color 0.15s;
 	}
 	.unlink-btn:hover:not(:disabled) {
-		border-color: #f87171;
-		color: #fca5a5;
+		border-color: var(--err-line);
+		color: var(--err);
 	}
 	.unlink-btn:disabled {
 		opacity: 0.45;
@@ -1476,4 +1476,27 @@ title={running
 		top: 14px;
 		z-index: 5;
 	}
+	/* ── ≤760px 可用级适配（F 批）：解除 100vh 固定布局，画布与对话纵向堆叠。 ── */
+	@media (max-width: 760px) {
+		.shell {
+			height: auto;
+			min-height: 100vh;
+			overflow: visible;
+		}
+		.workspace {
+			flex-direction: column;
+		}
+		.flow-panel {
+			min-height: 60vh;
+		}
+		.chat-panel {
+			width: 100% !important;
+			border-left: none;
+			border-top: 1px solid var(--line);
+			min-height: 50vh;
+		}
+		.chat-splitter {
+			display: none;
+		}
+	}
 </style>

calliope-web/src/routes/favicon.png/+server.ts

@@ -1,5 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-
-export const GET: RequestHandler = () => {
-	return new Response(null, { status: 204 });
-};

calliope-web/src/routes/library/+page.svelte

@@ -3,13 +3,15 @@
 	import { libraryApi, type LibraryMediaItem } from '$lib/api';
 	import { assetUrl } from '$lib/api';
 	import { t } from '$lib/i18n.svelte';
-	import AppHeader from '$lib/components/AppHeader.svelte';
+	import AppShell from '$lib/components/shell/AppShell.svelte';
 	import AttachToProject from '$lib/components/AttachToProject.svelte';
 	import ImageLightbox from '$lib/components/ImageLightbox.svelte';
 	import SafeMedia from '$lib/components/SafeMedia.svelte';
 	import Button from '$lib/components/ui/Button.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';
+	import Modal from '$lib/components/ui/Modal.svelte';
 	import Skeleton from '$lib/components/ui/Skeleton.svelte';
 	import { toast } from '$lib/toast';
 
@@ -127,117 +129,135 @@
 	}
 </script>
 
-<AppHeader active="library">
-	{#if selectedCount > 0}
-		<Button variant="danger" onclick={() => (confirmingDelete = true)}>
-			<Icon name="close" size={14} />
-			{t('library.deleteSelected', { count: selectedCount })}
-		</Button>
-	{/if}
-</AppHeader>
-
-<main class="container">
-	<div class="toolbar">
-		<div class="filters" role="tablist" aria-label={t('library.filterLabel')}>
-			<button
-				type="button"
-				class="filter-chip"
-				class:active={filter === 'all'}
-				aria-pressed={filter === 'all'}
-				onclick={() => (filter = 'all')}
-			>
-				{t('library.filterAll')} <span class="chip-count">{items.length}</span>
-			</button>
-			<button
-				type="button"
-				class="filter-chip"
-				class:active={filter === 'image'}
-				aria-pressed={filter === 'image'}
-				onclick={() => (filter = 'image')}
-			>
-				{t('library.filterImage')}
-				<span class="chip-count">
-					{items.filter((i) => i.kind === 'image').length}
-				</span>
-			</button>
-			<button
-				type="button"
-				class="filter-chip"
-				class:active={filter === 'video'}
-				aria-pressed={filter === 'video'}
-				onclick={() => (filter = 'video')}
-			>
-				{t('library.filterVideo')}
-				<span class="chip-count">
-					{items.filter((i) => i.kind === 'video').length}
-				</span>
-			</button>
-		</div>
-		<label class="select-all">
-			<input type="checkbox" checked={allSelected} onchange={toggleAll} />
-			<span>{allSelected ? t('library.deselectAll') : t('library.selectAll')}</span>
-		</label>
-		<span class="count" data-testid="library-count">
+<AppShell active="library" title={t('nav.library')} subtitle={t('library.subtitle')}>
+	{#snippet actions()}
+		<span class="status-chip" data-testid="library-count">
 			{t('library.itemCount', { count: filtered.length })}
 		</span>
-	</div>
+		{#if selectedCount > 0}
+			<Button variant="danger" onclick={() => (confirmingDelete = true)}>
+				<Icon name="close" size={14} />
+				{t('library.deleteSelected', { count: selectedCount })}
+			</Button>
+		{/if}
+	{/snippet}
 
-	{#if $mediaQuery.isLoading}
-		<div class="grid">
-			{#each Array(8) as _, i (i)}
-				<div class="card skeleton-card"><Skeleton height="220px" /></div>
-			{/each}
+	<div class="library">
+		<div class="toolbar">
+			<div class="filters" role="tablist" aria-label={t('library.filterLabel')}>
+				<button
+					type="button"
+					class="a-chip"
+					class:sel={filter === 'all'}
+					aria-pressed={filter === 'all'}
+					onclick={() => (filter = 'all')}
+				>
+					<span class="lbl">{t('library.filterAll')}</span>
+					<span class="chip-count">{items.length}</span>
+				</button>
+				<button
+					type="button"
+					class="a-chip"
+					class:sel={filter === 'image'}
+					aria-pressed={filter === 'image'}
+					onclick={() => (filter = 'image')}
+				>
+					<span class="lbl">{t('library.filterImage')}</span>
+					<span class="chip-count">{items.filter((i) => i.kind === 'image').length}</span>
+				</button>
+				<button
+					type="button"
+					class="a-chip"
+					class:sel={filter === 'video'}
+					aria-pressed={filter === 'video'}
+					onclick={() => (filter = 'video')}
+				>
+					<span class="lbl">{t('library.filterVideo')}</span>
+					<span class="chip-count">{items.filter((i) => i.kind === 'video').length}</span>
+				</button>
+			</div>
+			<label class="select-all">
+				<input type="checkbox" checked={allSelected} onchange={toggleAll} />
+				<span>{allSelected ? t('library.deselectAll') : t('library.selectAll')}</span>
+			</label>
 		</div>
-	{:else if filtered.length === 0}
-		<EmptyState
-			title={filter === 'all' ? t('library.emptyTitle') : t('library.emptyFilterTitle', { kind: filter === 'image' ? t('library.filterImage') : t('library.filterVideo') })}
-			body={filter === 'all' ? t('library.emptyBody') : t('library.emptyFilterBody')}
-		/>
-	{:else}
-		<div class="grid">
-			{#each visible as item (item.path)}
-				<div class="card" class:selected={selected.has(item.path)}>
-					<label class="check">
-						<input
-							type="checkbox"
-							checked={selected.has(item.path)}
-							onchange={() => toggle(item.path)}
-						/>
-					</label>
+
+		{#if $mediaQuery.isLoading}
+			<div class="grid" aria-busy="true">
+				{#each Array(8) as _, i (i)}
+					<div class="card skeleton-card"><Skeleton height="220px" /></div>
+				{/each}
+			</div>
+		{:else if $mediaQuery.isError}
+			<EmptyState title={t('library.loadError')}>
+				{#snippet action()}
+					<Button variant="secondary" onclick={() => $mediaQuery.refetch()}>
+						<Icon name="retry" size={14} />
+						{t('common.retry')}
+					</Button>
+				{/snippet}
+			</EmptyState>
+		{:else if filtered.length === 0}
+			<EmptyState
+				title={filter === 'all'
+					? t('library.emptyTitle')
+					: t('library.emptyFilterTitle', {
+							kind: filter === 'image' ? t('library.filterImage') : t('library.filterVideo')
+						})}
+				body={filter === 'all' ? t('library.emptyBody') : t('library.emptyFilterBody')}
+			/>
+		{:else}
+			<div class="grid">
+				{#each visible as item (item.path)}
+					<div
+						class="card"
+						class:selected={selected.has(item.path)}
+						class:a-frame={selected.has(item.path)}
+						style:--frame-inset="3px"
+						style:--frame-arm="16px"
+					>
+						<label class="check">
+							<input
+								type="checkbox"
+								checked={selected.has(item.path)}
+								onchange={() => toggle(item.path)}
+							/>
+						</label>
 					<button
 						type="button"
-						class="media"
+						class="media a-photo"
 						onclick={() => openPreview(item)}
 						title={item.name}
 					>
-						<SafeMedia src={assetUrl(item.path)} kind={item.kind} alt={item.name} controls={false} />
-					</button>
-					<div class="meta">
-						<span class="name" title={item.name}>{item.name}</span>
-						<span class="sub">{item.kind} · {fmtSize(item.size)}</span>
+							<SafeMedia src={assetUrl(item.path)} kind={item.kind} alt={item.name} controls={false} />
+						</button>
+						<div class="meta">
+							<span class="name" title={item.name}>{item.name}</span>
+							<span class="sub">{item.kind} · {fmtSize(item.size)}</span>
+						</div>
+						<div class="card-actions">
+							<Button variant="secondary" onclick={() => (attachItem = item)}>
+								{t('library.addToProject')}
+							</Button>
+						</div>
 					</div>
-					<div class="card-actions">
-						<Button variant="secondary" onclick={() => (attachItem = item)}>
-							{t('library.addToProject')}
-						</Button>
-					</div>
-				</div>
-			{/each}
-		</div>
-		{#if hasMore}
-			<div class="load-more" bind:this={sentinel} aria-hidden="true"></div>
-			<div class="more-row">
-				{#if loadingMore}
-					<span class="loading-note">{t('library.loadingMore')}</span>
-				{:else}
-					<Button variant="secondary" onclick={loadMore}>
-						{t('library.loadMore', { count: remaining })}
-					</Button>
-				{/if}
+				{/each}
 			</div>
+			{#if hasMore}
+				<div class="load-more" bind:this={sentinel} aria-hidden="true"></div>
+				<div class="more-row">
+					{#if loadingMore}
+						<span class="loading-note">{t('library.loadingMore')}</span>
+					{:else}
+						<Button variant="secondary" onclick={loadMore}>
+							{t('library.loadMore', { count: remaining })}
+						</Button>
+					{/if}
+				</div>
+			{/if}
 		{/if}
-	{/if}
-</main>
+	</div>
+</AppShell>
 
 {#if preview}
 	<ImageLightbox
@@ -249,118 +269,85 @@
 	/>
 {/if}
 
-{#if attachItem}
-	<div class="modal-backdrop">
-		<div
-			class="modal"
-			role="dialog"
-			aria-modal="true"
-			aria-label={t('library.addToProject')}
-		>
-			<div class="modal-head">
-				<strong>{t('library.addToProject')}</strong>
-				<button type="button" class="modal-close" onclick={() => (attachItem = null)}>
-					<Icon name="close" size={14} />
-				</button>
-			</div>
-			<p class="modal-file">{attachItem.name}</p>
-			<AttachToProject path={attachItem.path} kind={attachItem.kind} />
-		</div>
-	</div>
-{/if}
+<Modal
+	open={attachItem !== null}
+	title={t('library.addToProject')}
+	onclose={() => (attachItem = null)}
+>
+	{#if attachItem}
+		<p class="modal-file">{attachItem.name}</p>
+		<AttachToProject path={attachItem.path} kind={attachItem.kind} />
+	{/if}
+</Modal>
 
-{#if confirmingDelete}
-	<div class="modal-backdrop" role="presentation">
-		<div class="modal confirm" role="alertdialog" aria-modal="true">
-			<p>{t('library.confirmDelete', { count: selectedCount })}</p>
-			<div class="modal-actions">
-				<Button variant="danger" loading={$deleteMutation.isPending} onclick={deleteSelected}>
-					{t('common.delete')}
-				</Button>
-				<Button variant="ghost" onclick={() => (confirmingDelete = false)}>
-					{t('common.cancel')}
-				</Button>
-			</div>
-		</div>
-	</div>
-{/if}
+<ConfirmDialog
+	open={confirmingDelete}
+	title={t('library.deleteSelected', { count: selectedCount })}
+	message={t('library.confirmDelete', { count: selectedCount })}
+	confirmLabel={t('common.delete')}
+	cancelLabel={t('common.cancel')}
+	danger={true}
+	onconfirm={deleteSelected}
+	oncancel={() => (confirmingDelete = false)}
+/>
 
 <style>
+	.library {
+		padding: 20px 28px 40px;
+		max-width: 1560px;
+		width: 100%;
+		box-sizing: border-box;
+		margin: 0 auto;
+	}
 	.toolbar {
 		display: flex;
 		align-items: center;
-		gap: 16px;
-		margin-bottom: 14px;
+		gap: var(--sp-6);
+		margin-bottom: var(--sp-5);
 		flex-wrap: wrap;
 	}
 	.filters {
 		display: flex;
 		align-items: center;
-		gap: 6px;
-	}
-	.filter-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 6px 12px;
-		border: 1px solid var(--border);
-		border-radius: 999px;
-		background: transparent;
-		color: var(--text-secondary);
-		font-size: 13px;
-		font-weight: 500;
-		cursor: pointer;
-		transition: color 0.15s, background 0.15s, border-color 0.15s;
-	}
-	.filter-chip:hover {
-		color: var(--text-primary);
-		background: var(--bg-elevated);
-	}
-	.filter-chip.active {
-		color: var(--text-primary);
-		background: var(--bg-elevated);
-		border-color: var(--accent);
-	}
-	.filter-chip:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
+		gap: var(--sp-2);
+		flex-wrap: wrap;
 	}
 	.chip-count {
-		font-size: 11px;
-		color: var(--text-muted);
-		background: rgba(255, 255, 255, 0.06);
-		border-radius: 999px;
-		padding: 1px 7px;
+		font-size: var(--fs-mini);
+		color: var(--text-3);
+		font-variant-numeric: tabular-nums;
 	}
 	.select-all {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-		font-size: 13px;
-		color: var(--text-secondary);
+		gap: var(--sp-3);
+		font-size: var(--fs-body-sm);
+		color: var(--text-2);
 		cursor: pointer;
 	}
-	.count {
-		font-size: 13px;
-		color: var(--text-muted);
+	.select-all input {
+		accent-color: var(--accent-lo);
+		width: 15px;
+		height: 15px;
+		cursor: pointer;
 	}
 	.grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-		gap: 14px;
+		gap: var(--sp-4);
 	}
 	.card {
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
+		background: var(--bg-2);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
 		overflow: hidden;
-		transition: border-color 0.15s ease;
+		transition: border-color var(--d-state) ease;
 	}
 	.card.selected {
-		border-color: var(--accent);
+		background: linear-gradient(180deg, var(--accent-soft), transparent 32%), var(--bg-2);
 	}
 	.card :global(.media-el) {
 		object-fit: cover;
@@ -370,22 +357,22 @@
 	}
 	.check {
 		position: absolute;
-		top: 8px;
-		left: 8px;
+		top: var(--sp-3);
+		left: var(--sp-3);
 		z-index: 2;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 26px;
 		height: 26px;
-		background: rgba(0, 0, 0, 0.55);
-		border-radius: var(--radius-sm);
+		background: var(--media-scrim);
+		border-radius: var(--r-sm);
 		cursor: pointer;
 	}
 	.check input {
 		width: 15px;
 		height: 15px;
-		accent-color: var(--accent);
+		accent-color: var(--accent-lo);
 		cursor: pointer;
 	}
 	.media {
@@ -394,10 +381,18 @@
 		height: 150px;
 		padding: 0;
 		border: none;
-		background: rgba(0, 0, 0, 0.3);
+		background: var(--media-scrim);
 		cursor: zoom-in;
 		overflow: hidden;
 	}
+	/* 相纸白边 (HEL-680)：素材墙里的作品按相纸呈现 */
+	.media.a-photo {
+		border: var(--paper-w, 4px) solid var(--accent);
+		border-bottom-width: calc(var(--paper-w, 4px) + 2px);
+		background: var(--accent);
+		border-radius: 0;
+		box-sizing: border-box;
+	}
 	.media :global(img),
 	.media :global(video) {
 		width: 100%;
@@ -408,22 +403,22 @@
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
-		padding: 10px 12px 6px;
+		padding: var(--sp-4) var(--sp-5) var(--sp-2);
 		min-width: 0;
 	}
 	.name {
-		font-size: 13px;
-		color: var(--text-primary);
+		font-size: var(--fs-body);
+		color: var(--text);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 	.sub {
-		font-size: 11px;
-		color: var(--text-muted);
+		font-size: var(--fs-mini);
+		color: var(--text-3);
 	}
 	.card-actions {
-		padding: 8px 12px 12px;
+		padding: var(--sp-3) var(--sp-5) var(--sp-5);
 	}
 	.load-more {
 		height: 1px;
@@ -431,65 +426,28 @@
 	.more-row {
 		display: flex;
 		justify-content: center;
-		padding: 18px 0 6px;
+		padding: var(--sp-6) 0 var(--sp-2);
 	}
 	.loading-note {
-		font-size: 13px;
-		color: var(--text-muted);
-	}
-	.modal-backdrop {
-		position: fixed;
-		inset: 0;
-		z-index: 60;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: rgba(0, 0, 0, 0.6);
-		padding: 20px;
-	}
-	.modal {
-		width: min(420px, 100%);
-		background: var(--bg-elevated);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-lg);
-		padding: 16px;
-	}
-	.modal.confirm {
-		width: min(360px, 100%);
-	}
-	.modal-head {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 8px;
-	}
-	.modal-close {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border: none;
-		border-radius: var(--radius-sm);
-		background: transparent;
-		color: var(--text-muted);
-		cursor: pointer;
-	}
-	.modal-close:hover {
-		color: var(--text-primary);
-		background: rgba(255, 255, 255, 0.06);
+		font-size: var(--fs-body-sm);
+		color: var(--text-3);
 	}
 	.modal-file {
-		margin: 0 0 10px;
-		font-size: 12px;
-		color: var(--text-muted);
+		margin: 0 0 var(--sp-4);
+		font-size: var(--fs-aux);
+		color: var(--text-3);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-	.modal-actions {
-		display: flex;
-		gap: 8px;
-		margin-top: 12px;
+
+	@media (max-width: 760px) {
+		.library {
+			padding: var(--sp-5) var(--sp-5) var(--sp-8);
+		}
+		.grid {
+			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+			gap: var(--sp-3);
+		}
 	}
 </style>

calliope-web/src/routes/library/+page.ts

@@ -1,8 +1,2 @@
-import { redirect } from '@sveltejs/kit';
-
 export const ssr = false;
 export const prerender = false;
-
-export function load() {
-	redirect(308, '/');
-}

calliope-web/src/routes/models/+page.svelte

@@ -392,14 +392,8 @@
 		char: string;
 		dark?: boolean;
 	}[] = [
-		{
-			role: 'story',
-			labelKey: 'models.agentStory',
-			color: 'var(--avatar-1)',
-			char: '剧',
-			dark: true,
-		},
-		{ role: 'style', labelKey: 'models.agentStyle', color: 'var(--avatar-2)', char: '视' },
+		{ role: 'story', labelKey: 'models.agentStory', color: 'var(--avatar-1)', char: '剧', dark: true },
+		{ role: 'style', labelKey: 'models.agentStyle', color: 'var(--avatar-2)', char: '视', dark: true },
 		{ role: 'script', labelKey: 'models.agentScript', color: 'var(--avatar-3)', char: '分' },
 		{ role: 'assets', labelKey: 'models.agentAssets', color: 'var(--avatar-4)', char: '素' },
 		{ role: 'video', labelKey: 'models.agentVideo', color: 'var(--avatar-5)', char: '镜' },
@@ -1097,11 +1091,13 @@
 		padding: 0;
 		font-family: inherit;
 		font-size: 12px;
-		color: var(--accent);
+		color: var(--text-2);
 		cursor: pointer;
 	}
 	.link-accent:hover {
+		color: var(--text);
 		text-decoration: underline;
+		text-underline-offset: 3px;
 	}
 
 	/* ---------------- notice bar (§9.5) ---------------- */
@@ -1414,7 +1410,7 @@
 			overflow-y: auto;
 			transform: translateX(100%);
 			transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
-			box-shadow: -24px 0 64px rgba(0, 0, 0, 0.4);
+			box-shadow: var(--shadow-float);
 		}
 		.form-col.open {
 			transform: translateX(0);
@@ -1437,7 +1433,7 @@
 		}
 	}
 
-	@media (max-width: 1023px) {
+	@media (max-width: 760px) {
 		.page {
 			padding: 16px 16px 32px;
 		}

calliope-web/src/routes/playground/+page.svelte

@@ -36,6 +36,6 @@
 		font-size: 14px;
 	}
 	.redirect-error {
-		color: #f87171;
+		color: var(--err);
 	}
 </style>

calliope-web/src/routes/project/[id]/+page.svelte

@@ -1,309 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { toStore } from 'svelte/store';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/state';
-	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import NavRail from '$lib/components/NavRail.svelte';
-	import StoryStage from '$lib/components/StoryStage.svelte';
-	import AssetsStage from '$lib/components/AssetsStage.svelte';
-	import ScriptStage from '$lib/components/ScriptStage.svelte';
-	import QueueStage from '$lib/components/QueueStage.svelte';
-	import ActivityPanel from '$lib/components/ActivityPanel.svelte';
-	import AppHeader from '$lib/components/AppHeader.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import Skeleton from '$lib/components/ui/Skeleton.svelte';
-	import StatusChip from '$lib/components/ui/StatusChip.svelte';
-	import { t } from '$lib/i18n.svelte';
-	import { jobsApi, projects, settings } from '$lib/api';
-	import { connectEvents, type CalliopeEvent, type EventConnectionState } from '$lib/events';
-	import { handleJobEvent } from '$lib/jobProgress';
-
-	interface Props {
-		data: { id: string };
-	}
-
-	let { data }: Props = $props();
-	const client = useQueryClient();
-	const projectId = $derived(Number(data.id));
-	const enabled = $derived(!isNaN(projectId));
-
-	// Stage <-> URL contract: the active stage lives in ?stage=story|assets|script|video.
-	// Switching stages = goto('?stage=<id>'); deep links and browser Back/Forward work.
-	const STAGES = ['story', 'assets', 'script', 'video'] as const;
-	type Stage = (typeof STAGES)[number];
-
-	function stageFromUrl(url: URL): Stage {
-		const s = url.searchParams.get('stage');
-		return (STAGES as readonly string[]).includes(s ?? '') ? (s as Stage) : 'story';
-	}
-
-	const STAGE_LABELS: Record<Stage, string> = {
-		story: '1 · Story',
-		assets: '2 · Assets',
-		script: '3 · Script',
-		video: '4 · Video',
-	};
-
-	let activeTab = $state<Stage>(stageFromUrl(page.url));
-	let activityCollapsed = $state(false);
-	let logs = $state<CalliopeEvent[]>([]);
-	let connState = $state<EventConnectionState>('connecting');
-
-	// URL → state: deep links, browser Back/Forward
-	$effect(() => {
-		const s = stageFromUrl(page.url);
-		if (s !== activeTab) activeTab = s;
-	});
-
-	// State → URL: every stage switch goes through goto so history works
-	function selectStage(id: string) {
-		const stage: Stage = (STAGES as readonly string[]).includes(id) ? (id as Stage) : 'story';
-		if (stage === activeTab) return;
-		activeTab = stage;
-		goto(`?stage=${stage}`, { keepFocus: true, noScroll: true });
-	}
-
-	const storyQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['story', projectId],
-			queryFn: () => projects.getStory(projectId),
-			enabled,
-		})),
-	);
-
-	const settingsQuery = createQuery({
-		queryKey: ['settings'],
-		queryFn: settings.get,
-	});
-
-	// Same query keys as QueueStage/ActivityPanel — cache is shared.
-	// Refreshes are SSE-driven (job.* events + events.resync below), no polling.
-	const jobsQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['jobs', projectId],
-			queryFn: () => jobsApi.list(projectId),
-			enabled,
-		})),
-	);
-
-	const queueStatusQuery = createQuery(
-		toStore(() => ({
-			queryKey: ['queue-status'],
-			queryFn: jobsApi.queueStatus,
-			enabled,
-		})),
-	);
-
-	const isConfigured = $derived(
-		Boolean($settingsQuery.data?.llm_base_url && $settingsQuery.data?.llm_model),
-	);
-	const projectTitle = $derived($storyQuery.data?.project?.title ?? 'Project');
-
-	const runningCount = $derived(
-		($jobsQuery.data ?? []).filter((j) => j.status === 'running').length,
-	);
-	const queuedCount = $derived(
-		($jobsQuery.data ?? []).filter((j) => j.status === 'pending').length,
-	);
-	const queuePaused = $derived(Boolean($queueStatusQuery.data?.paused));
-
-	onMount(() => {
-		return connectEvents(
-			(ev) => {
-				if (ev.type === 'events.resync') {
-					// SSE reconnected: refill anything missed while the stream was down.
-					client.invalidateQueries({ queryKey: ['jobs'] });
-					client.invalidateQueries({ queryKey: ['queue-status'] });
-					client.invalidateQueries({ queryKey: ['assets'] });
-					client.invalidateQueries({ queryKey: ['story'] });
-					client.invalidateQueries({ queryKey: ['scenes'] });
-					return;
-				}
-				// Live per-job progress for ProgressBars (Activity log stays clean)
-				handleJobEvent(ev);
-				// Don't keep Comfy poll ticks in the Activity log
-				if (ev.type !== 'job.progress') {
-					logs = [...logs, ev].slice(-120);
-				}
-				if (
-					ev.type.startsWith('job.') ||
-					ev.type === 'asset.ready' ||
-					ev.type === 'agent.thinking' ||
-					ev.type.startsWith('story.')
-				) {
-					client.invalidateQueries({ queryKey: ['jobs'] });
-					client.invalidateQueries({ queryKey: ['queue-status'] });
-					client.invalidateQueries({ queryKey: ['assets'] });
-					client.invalidateQueries({ queryKey: ['story'] });
-					client.invalidateQueries({ queryKey: ['scenes'] });
-				}
-			},
-			(state) => (connState = state),
-		);
-	});
-</script>
-
-<div class="shell">
-	<AppHeader crumb={`· ${projectTitle}`} />
-
-	{#if !enabled}
-		<div class="invalid-wrap">
-			<EmptyState
-				title={t('project.notFound')}
-				body={t('project.invalidIdBody', { id: data.id })}
-			>
-				{#snippet icon()}
-					<Icon name="folder" size={28} />
-				{/snippet}
-				{#snippet action()}
-					<Button variant="primary" onclick={() => goto('/projects')}>{t('project.backToProjects')}</Button>
-				{/snippet}
-			</EmptyState>
-		</div>
-	{:else}
-		<div class="workspace-bar">
-			<span class="stage-label">{STAGE_LABELS[activeTab]}</span>
-			<Button
-				variant="secondary"
-				size="sm"
-				title={t('project.openVideoStage')}
-				onclick={() => selectStage('video')}
-			>
-				<Icon name="queue" size={13} />
-				{runningCount + queuedCount > 0
-					? t('project.runningQueued', { running: runningCount, queued: queuedCount })
-					: t('project.queueIdle')}
-				{#if queuePaused}
-					<StatusChip status="paused" />
-				{/if}
-			</Button>
-		</div>
-
-		<div class="workspace">
-			<NavRail active={activeTab} onSelect={selectStage} />
-
-			<main class="stage" class:stage-fill={activeTab === 'video'}>
-				{#if activeTab === 'story'}
-					{#if $storyQuery.isLoading}
-						<div class="card skel" aria-busy="true">
-							<Skeleton width="36%" height="22px" />
-							<Skeleton width="88%" />
-							<Skeleton width="72%" />
-							<Skeleton height="140px" />
-						</div>
-					{:else if $storyQuery.isError}
-						<div class="card" style="color: var(--error)">
-							Failed to load story: {$storyQuery.error?.message ?? 'unknown error'}
-						</div>
-					{:else if $storyQuery.data}
-						<StoryStage
-							{projectId}
-							story={$storyQuery.data}
-							configured={isConfigured}
-							onGoAssets={() => selectStage('assets')}
-						/>
-					{/if}
-				{:else if activeTab === 'assets'}
-					<AssetsStage {projectId} />
-				{:else if activeTab === 'script'}
-					<ScriptStage {projectId} />
-				{:else if activeTab === 'video'}
-					<QueueStage {projectId} {projectTitle} />
-				{/if}
-			</main>
-
-			<ActivityPanel
-				{logs}
-				{projectId}
-				{connState}
-				collapsed={activityCollapsed}
-				onToggle={() => (activityCollapsed = !activityCollapsed)}
-			/>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.shell {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-		overflow: hidden;
-	}
-	.invalid-wrap {
-		flex: 1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: var(--space-lg);
-		overflow-y: auto;
-	}
-	.workspace-bar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--space-md);
-		padding: 8px var(--space-lg);
-		border-bottom: 1px solid var(--border);
-		background: var(--bg-surface);
-		flex-shrink: 0;
-	}
-	.stage-label {
-		font-family: var(--font-display);
-		font-size: 13px;
-		font-weight: 600;
-		letter-spacing: 0.02em;
-		color: var(--text-secondary);
-	}
-	.workspace {
-		display: flex;
-		flex: 1;
-		overflow: hidden;
-	}
-	.stage {
-		flex: 1;
-		padding: var(--space-lg);
-		overflow-y: auto;
-		background: var(--bg-primary);
-		min-width: 0;
-	}
-	.stage.stage-fill {
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		/* Bleed to column edges — Nav/Activity already frame the stage.
-		   Old max-width+margin:auto looked off-center because this column
-		   sits between unequal side rails. */
-		padding: 12px 0 12px;
-	}
-	.stage.stage-fill > :global(.queue-root) {
-		flex: 1;
-		min-height: 0;
-		padding-inline: 16px;
-	}
-	/* Player hero breaks out to full stage width; strip/composer keep inset */
-	.stage.stage-fill :global(.hero) {
-		margin-inline: -16px;
-		width: auto;
-	}
-	.stage.stage-fill :global(.hero .frame) {
-		border-radius: 0;
-		border-left: none;
-		border-right: none;
-	}
-	.card {
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-md);
-		padding: var(--space-lg);
-	}
-	.skel {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
-</style>

calliope-web/src/routes/projects/+page.svelte

@@ -1,458 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { createMutation, createQuery, useQueryClient } from '@tanstack/svelte-query';
-	import { projects, type Project } from '$lib/api';
-	import { t } from '$lib/i18n.svelte';
-	import AppHeader from '$lib/components/AppHeader.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import ProjectCard from '$lib/components/ProjectCard.svelte';
-	import Skeleton from '$lib/components/ui/Skeleton.svelte';
-	import { toast } from '$lib/toast';
-
-	const client = useQueryClient();
-
-	const projectsQuery = createQuery({
-		queryKey: ['projects'],
-		queryFn: projects.list,
-	});
-
-	const createProjectMutation = createMutation({
-		mutationFn: projects.create,
-		onSuccess: (data: Project) => {
-			client.invalidateQueries({ queryKey: ['projects'] });
-			toast.success(t('projects.created', { title: data.title }));
-			goto(`/project/${data.id}`);
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('projects.createFailed'));
-		},
-	});
-
-	// English values are sent to the backend; display labels come from the dictionary.
-	const GENRES: 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 TONES: Record<string, string> = {
-		'Cinematic, atmospheric': 'tones.cinematic',
-		'Dark, tense': 'tones.dark',
-		'Whimsical, warm': 'tones.whimsical',
-		'Gritty, realistic': 'tones.gritty',
-		'Epic, sweeping': 'tones.epic',
-	};
-	const DURATIONS: Record<string, string> = {
-		'30 seconds': 'durations.30',
-		'1 minute': 'durations.1m',
-		'2 minutes': 'durations.2m',
-		'5 minutes': 'durations.5m',
-		'10 minutes': 'durations.10m',
-	};
-
-	let title = $state('');
-	let idea = $state('');
-	let genre = $state('Adventure / Mystery');
-	let tone = $state('Cinematic, atmospheric');
-	let duration = $state('2 minutes');
-	let showForm = $state(false);
-	let search = $state('');
-	let filter = $state('all');
-
-	function onCreate(e: Event) {
-		e.preventDefault();
-		if (!title.trim()) return;
-		$createProjectMutation.mutate({
-			title: title.trim(),
-			idea: idea.trim() || undefined,
-			genre: genre || undefined,
-			tone: tone || undefined,
-			target_duration: duration || undefined,
-		});
-	}
-
-	function openForm() {
-		showForm = true;
-		title = '';
-		idea = '';
-		genre = 'Adventure / Mystery';
-		tone = 'Cinematic, atmospheric';
-		duration = '2 minutes';
-	}
-
-	const FILTERS = $derived(
-		[
-			{ id: 'all', key: 'projects.filterAll' },
-			{ id: 'in_progress', key: 'projects.filterProgress' },
-			{ id: 'completed', key: 'projects.filterCompleted' },
-			{ id: 'draft', key: 'projects.filterDraft' },
-		].map((f) => ({ id: f.id, label: t(f.key) })),
-	);
-
-	const all = $derived($projectsQuery.data ?? []);
-	const filtered = $derived.by(() => {
-		let list = all;
-		if (filter !== 'all') list = list.filter((p) => p.status === filter);
-		const q = search.trim().toLowerCase();
-		if (q) {
-			list = list.filter(
-				(p) => p.title.toLowerCase().includes(q) || (p.idea ?? '').toLowerCase().includes(q),
-			);
-		}
-		return list;
-	});
-
-	function clearFilters() {
-		search = '';
-		filter = 'all';
-	}
-</script>
-
-<AppHeader active="projects">
-	<Button variant="primary" onclick={openForm}>
-		<Icon name="plus" size={15} />
-		{t('projects.new')}
-	</Button>
-</AppHeader>
-
-<main class="container">
-	<div class="hero">
-		<div>
-			<h1>{t('projects.title')}</h1>
-			<p>{t('projects.subtitle')}</p>
-		</div>
-	</div>
-
-	{#if showForm}
-		<form class="new-project-card" onsubmit={onCreate}>
-			<div class="form-head">
-				<div>
-					<p class="eyebrow">{t('projects.newReel')}</p>
-					<h3>{t('projects.new')}</h3>
-				</div>
-				<Button variant="ghost" onclick={() => (showForm = false)}>{t('projects.close')}</Button>
-			</div>
-
-			<label class="field">
-				<span class="field-label">{t('projects.titleField')}</span>
-				<input class="field-input" bind:value={title} placeholder={t('projects.titlePlaceholder')} required />
-			</label>
-
-			<label class="field">
-				<span class="field-label">{t('projects.ideaField')}</span>
-				<textarea
-					class="field-textarea"
-					bind:value={idea}
-					placeholder={t('projects.ideaPlaceholder')}
-					rows={4}
-				></textarea>
-				<p class="field-hint">{t('projects.ideaHint')}</p>
-			</label>
-
-			<div class="form-grid">
-				<label class="field">
-					<span class="field-label">{t('projects.genre')}</span>
-					<select class="field-select" bind:value={genre}>
-						{#each Object.keys(GENRES) as v (v)}
-							<option value={v}>{t(GENRES[v])}</option>
-						{/each}
-					</select>
-				</label>
-				<label class="field">
-					<span class="field-label">{t('projects.tone')}</span>
-					<select class="field-select" bind:value={tone}>
-						{#each Object.keys(TONES) as v (v)}
-							<option value={v}>{t(TONES[v])}</option>
-						{/each}
-					</select>
-				</label>
-				<label class="field">
-					<span class="field-label">{t('projects.duration')}</span>
-					<select class="field-select" bind:value={duration}>
-						{#each Object.keys(DURATIONS) as v (v)}
-							<option value={v}>{t(DURATIONS[v])}</option>
-						{/each}
-					</select>
-					<p class="field-hint">{t('projects.durationHint')}</p>
-				</label>
-			</div>
-
-			<div class="form-actions">
-				<Button variant="secondary" onclick={() => (showForm = false)}>{t('projects.cancel')}</Button>
-				<Button variant="primary" type="submit" loading={$createProjectMutation.isPending}>
-					{t('projects.create')}
-				</Button>
-			</div>
-		</form>
-	{/if}
-
-	<div class="toolbar">
-		<input
-			class="search field-input"
-			bind:value={search}
-			placeholder={t('projects.searchPlaceholder')}
-			aria-label={t('projects.searchLabel')}
-		/>
-		<div class="filter-group" role="group" aria-label={t('projects.filterBy')}>
-			{#each FILTERS as f (f.id)}
-				<button
-					type="button"
-					class="pill"
-					class:active={filter === f.id}
-					aria-pressed={filter === f.id}
-					onclick={() => (filter = f.id)}
-				>
-					{f.label}
-				</button>
-			{/each}
-		</div>
-	</div>
-
-	{#if $projectsQuery.isLoading}
-		<div class="grid" aria-busy="true" aria-label={t('projects.loading')}>
-			{#each [1, 2, 3, 4, 5, 6] as n (n)}
-				<div class="skel-card">
-					<Skeleton height="170px" />
-					<div class="skel-body">
-						<Skeleton width="60%" height="16px" />
-						<Skeleton />
-						<Skeleton width="80%" />
-						<Skeleton width="40%" height="12px" />
-					</div>
-				</div>
-			{/each}
-		</div>
-	{:else if $projectsQuery.isError}
-		<EmptyState
-			title={t('projects.loadError')}
-			body={$projectsQuery.error instanceof Error
-				? $projectsQuery.error.message
-				: t('projects.loadErrorBody')}
-		>
-			{#snippet icon()}
-				<Icon name="alert" size={28} />
-			{/snippet}
-			{#snippet action()}
-				<Button variant="primary" onclick={() => $projectsQuery.refetch()}>
-					<Icon name="retry" size={15} />
-					{t('common.retry')}
-				</Button>
-			{/snippet}
-		</EmptyState>
-	{:else if all.length === 0}
-		<EmptyState title={t('projects.emptyTitle')} body={t('projects.emptyBody')}>
-			{#snippet icon()}
-				<Icon name="video" size={28} />
-			{/snippet}
-			{#snippet action()}
-				<Button variant="primary" onclick={openForm}>
-					<Icon name="plus" size={15} />
-					{t('projects.firstProject')}
-				</Button>
-			{/snippet}
-		</EmptyState>
-	{:else if filtered.length === 0}
-		<EmptyState
-			title={search.trim()
-				? t('projects.noMatchSearch', { q: search.trim() })
-				: t('projects.noMatchFilter')}
-			body={t('projects.noMatchBody')}
-		>
-			{#snippet icon()}
-				<Icon name="search" size={28} />
-			{/snippet}
-			{#snippet action()}
-				<Button variant="secondary" onclick={clearFilters}>{t('projects.clearFilters')}</Button>
-			{/snippet}
-		</EmptyState>
-	{:else}
-		<div class="grid">
-			{#each filtered as project (project.id)}
-				<ProjectCard {project} />
-			{/each}
-			<button type="button" class="new-card" onclick={openForm}>
-				<div class="new-card-icon"><Icon name="plus" size={24} /></div>
-				<div class="new-card-title">{t('projects.newCard')}</div>
-				<div class="new-card-sub">{t('projects.newCardSub')}</div>
-			</button>
-		</div>
-	{/if}
-</main>
-
-<style>
-	.container {
-		max-width: 1280px;
-		margin: 0 auto;
-		padding: var(--space-xl);
-	}
-	.hero {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-		margin-bottom: var(--space-xl);
-	}
-	.hero h1 {
-		margin: 0 0 var(--space-sm);
-		font-size: 32px;
-	}
-	.hero p {
-		margin: 0;
-		color: var(--text-secondary);
-		font-size: 15px;
-	}
-	.new-project-card {
-		background: rgba(255, 255, 255, 0.03);
-		border: 1px solid rgba(255, 255, 255, 0.08);
-		border-radius: var(--radius-lg);
-		padding: var(--space-lg);
-		margin-bottom: var(--space-xl);
-		box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.08);
-	}
-	.form-head {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		margin-bottom: var(--space-md);
-	}
-	.eyebrow {
-		margin: 0 0 4px;
-		font-size: 11px;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--accent);
-		font-weight: 600;
-	}
-	.new-project-card h3 {
-		margin: 0;
-		font-size: 20px;
-	}
-	.form-grid {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: var(--space-md);
-	}
-	@media (max-width: 700px) {
-		.form-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-	.form-actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--space-sm);
-		margin-top: var(--space-sm);
-	}
-	.toolbar {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: var(--space-lg);
-		gap: var(--space-md);
-		flex-wrap: wrap;
-	}
-	.search {
-		flex: 1;
-		max-width: 360px;
-	}
-	.filter-group {
-		display: flex;
-		gap: var(--space-xs);
-	}
-	.pill {
-		border: 1px solid transparent;
-		border-radius: 999px;
-		background: transparent;
-		color: var(--text-secondary);
-		padding: 8px 14px;
-		cursor: pointer;
-		font-size: 13px;
-		font-weight: 500;
-		font-family: inherit;
-		transition:
-			background 0.15s,
-			color 0.15s,
-			border-color 0.15s;
-	}
-	.pill:hover {
-		background: var(--bg-elevated);
-		color: var(--text-primary);
-	}
-	.pill.active {
-		background: var(--bg-elevated);
-		border-color: var(--border);
-		color: var(--text-primary);
-	}
-	.pill:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-		gap: var(--space-lg);
-	}
-	.skel-card {
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-lg);
-		overflow: hidden;
-	}
-	.skel-card :global(.skeleton) {
-		border-radius: 0;
-	}
-	.skel-body {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-		padding: var(--space-md);
-	}
-	.skel-body :global(.skeleton) {
-		border-radius: var(--radius-sm);
-	}
-	.new-card {
-		border: 2px dashed var(--border);
-		background: transparent;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: 320px;
-		color: var(--text-muted);
-		gap: var(--space-md);
-		border-radius: var(--radius-lg);
-		cursor: pointer;
-		font-family: inherit;
-		transition: all 0.15s;
-	}
-	.new-card:hover {
-		border-color: var(--accent);
-		color: var(--text-primary);
-		background: rgba(139, 92, 246, 0.04);
-	}
-	.new-card:focus-visible {
-		outline: 2px solid var(--accent);
-		outline-offset: 2px;
-	}
-	.new-card-icon {
-		width: 56px;
-		height: 56px;
-		border-radius: var(--radius-md);
-		background: var(--bg-elevated);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.new-card-title {
-		font-weight: 600;
-		font-size: 15px;
-	}
-	.new-card-sub {
-		font-size: 13px;
-		color: var(--text-muted);
-	}
-</style>

calliope-web/src/routes/settings/+page.svelte

@@ -701,7 +701,7 @@
 	}
 
 	/* ---------------- responsive (§4.5) ---------------- */
-	@media (max-width: 1023px) {
+	@media (max-width: 760px) {
 		.page {
 			flex-direction: column;
 			padding: 18px;

calliope-web/src/routes/tasks/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 	import AppShell from '$lib/components/shell/AppShell.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import {
+		apiErrorMessage,
 		assetUrl,
 		jobsApi,
 		playgroundApi,
@@ -14,16 +13,21 @@
 	} from '$lib/api';
 	import { connectEvents } from '$lib/events';
 	import { parseDbTs } from '$lib/dbtime';
-	import { handleJobEvent } from '$lib/jobProgress';
+	import { handleJobEvent, progressFor } from '$lib/jobProgress';
 	import { jobStatusInfo } from '$lib/jobStatus';
+	import { isFileMissing, markOutputMissing } from '$lib/missingOutputs.svelte';
 	import { toast } from '$lib/toast';
 	import { t } from '$lib/i18n.svelte';
 	import { isStandaloneJob, isWorkflowTestJob, jobSourceLabel } from '$lib/jobLabels';
+	import { createTakeDeleteQueue } from '$lib/components/generate/takeDelete.svelte';
 
 	/**
-	 * 生成任务页 (spec-v2 §3 nav item, HEL-612): one table summing both
+	 * 生成任务页 (spec-v2 §3.5, HEL-612/654 D 批): one table summing both
 	 * task classes — image and video — from standalone windows, the
-	 * creation flow, and Playground, with retry / cancel / delete.
+	 * creation flow, and Playground. Filter chips + search; running rows
+	 * carry a 2px progress bar; 重试 is a ghost text op (spec v2 §1.2);
+	 * deleting one task is record-level: 200ms collapse + 5s undo Toast,
+	 * no dialog. The real DELETE only fires after the undo window.
 	 */
 	const client = useQueryClient();
 
@@ -46,13 +50,27 @@
 		return off;
 	});
 
-	type Filter = 'all' | 'image' | 'video';
+	type Filter = 'all' | 'image' | 'video' | 'failed' | 'active';
 	let filter = $state<Filter>('all');
+	let search = $state('');
 
-	const genJobs = $derived(
-		($jobsQuery.data ?? []).filter((j) => j.kind === 'image' || j.kind === 'video'),
-	);
-	const shown = $derived(filter === 'all' ? genJobs : genJobs.filter((j) => j.kind === filter));
+	const deleteQueue = createTakeDeleteQueue(client);
+	const pendingIds = deleteQueue.pending;
+	$effect(() => deleteQueue.destroy);
+
+	const genJobs = $derived(($jobsQuery.data ?? []).filter((j) => j.kind === 'image' || j.kind === 'video'));
+	const shown = $derived.by(() => {
+		const q = search.trim().toLowerCase();
+		return genJobs.filter((j) => {
+			if (pendingIds.has(j.id)) return false;
+			if (filter === 'image' || filter === 'video') {
+				if (j.kind !== filter) return false;
+			} else if (filter === 'failed' && jobStatusInfo(j).tone !== 'fail') return false;
+			else if (filter === 'active' && j.status !== 'pending' && j.status !== 'running') return false;
+			if (!q) return true;
+			return `${wfName(j)} ${jobSourceLabel(j)} ${j.error ?? ''} ${j.id}`.toLowerCase().includes(q);
+		});
+	});
 	const activeCount = $derived(genJobs.filter((j) => j.status === 'pending' || j.status === 'running').length);
 
 	function wfName(job: Job): string {
@@ -76,6 +94,35 @@
 		return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
 	}
 
+	/** 2px 进度条贴行底 — real progress from the SSE store only. */
+	function rowProgress(job: Job): number {
+		if (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;
+	}
+
+	function toneOf(job: Job, base: string): string {
+		if (base === 'ok' && isFileMissing(job)) return 'warn';
+		if (base === 'queue') return '';
+		if (base === 'fail') return 'err';
+		return base;
+	}
+
+	function labelOf(job: Job, base: { tone: string; label: string }): string {
+		return base.tone === 'ok' && isFileMissing(job) ? t('jobst.missing') : base.label;
+	}
+
+	function requestDelete(job: Job) {
+		if (job.status === 'pending' || job.status === 'running') return;
+		deleteQueue.request(job, {
+			message: () =>
+				(job.output_paths?.length ?? 0) > 0
+					? t('studio.deletedTakeToast', { name: wfName(job) })
+					: t('studio.deletedTakeNoFilesToast', { name: wfName(job) }),
+		});
+	}
 
 	let busyId = $state<number | null>(null);
 	async function retry(job: Job) {
@@ -86,7 +133,7 @@
 			toast.success(t('studio.retryQueuedToast'));
 			await client.invalidateQueries({ queryKey: ['jobs'] });
 		} catch (err) {
-			toast.error(t('studio.retryFailedToast', { detail: err instanceof Error ? err.message : String(err) }));
+			toast.error(t('studio.retryFailedToast', { detail: apiErrorMessage(err) }));
 		} finally {
 			busyId = null;
 		}
@@ -100,28 +147,11 @@
 			toast.info(t('studio.cancelToast'));
 			await client.invalidateQueries({ queryKey: ['jobs'] });
 		} catch (err) {
-			toast.error(err instanceof Error ? err.message : String(err));
+			toast.error(apiErrorMessage(err));
 		} finally {
 			busyId = null;
 		}
 	}
-
-	let deleteOpen = $state(false);
-	let deleteJobId = $state<number | null>(null);
-	const deleteTarget = $derived(genJobs.find((j) => j.id === deleteJobId) ?? null);
-	async function doDelete() {
-		if (!deleteJobId) return;
-		try {
-			await playgroundApi.deleteJob(deleteJobId);
-			await client.invalidateQueries({ queryKey: ['jobs'] });
-			await client.invalidateQueries({ queryKey: ['playground-jobs'] });
-		} catch (err) {
-			toast.error(err instanceof Error ? err.message : String(err));
-		} finally {
-			deleteJobId = null;
-			deleteOpen = false;
-		}
-	}
 </script>
 
 <AppShell active="tasks" title={t('tasks.title')} subtitle={t('tasks.subtitle')}>
@@ -130,48 +160,61 @@
 	{/snippet}
 
 	<div class="tasks-page">
-		<div class="seg" role="radiogroup" aria-label={t('tasks.title')}>
-			{#each [['all', t('tasks.filterAll')], ['image', t('tasks.filterImage')], ['video', t('tasks.filterVideo')]] as [value, label] (value)}
-				<button
-					type="button"
-					class="seg-item"
-					class:selected={filter === value}
-					aria-pressed={filter === value}
-					onclick={() => (filter = value as Filter)}
-				>
-					{label}
-				</button>
-			{/each}
+		<div class="toolbar">
+			<div class="chips" role="group" aria-label={t('tasks.title')}>
+				{#each [['all', t('tasks.filterAll')], ['image', t('tasks.filterImage')], ['video', t('tasks.filterVideo')], ['failed', t('tasks.filterFailed')], ['active', t('tasks.filterActive')]] as [value, label] (value)}
+					<button
+						type="button"
+						class="a-chip fchip"
+						class:sel={filter === value}
+						aria-pressed={filter === value}
+						onclick={() => (filter = value as Filter)}
+					>
+						{label}
+					</button>
+				{/each}
+			</div>
+			<label class="search">
+				<Icon name="search" size={13} />
+				<input type="search" bind:value={search} placeholder={t('tasks.searchPh')} aria-label={t('tasks.searchPh')} />
+			</label>
 		</div>
 
 		{#if !shown.length}
 			<div class="empty-card">
 				<Icon name="queue" size={22} />
-				<p>{t('tasks.empty')}</p>
+				<p>{search || filter !== 'all' ? t('tasks.emptyFiltered') : t('tasks.empty')}</p>
 				<a class="a-btn primary" href="/image">{t('tasks.goGenerate')}</a>
 			</div>
 		{:else}
-			<div class="task-table">
+			<div class="task-table" role="table" aria-label={t('tasks.title')}>
 				{#each shown as job (job.id)}
 					{@const st = jobStatusInfo(job)}
-					<div class="trow" class:failed={job.status === 'failed'}>
+					{@const progress = rowProgress(job)}
+					<div class="trow" class:failed={st.tone === 'fail'} class:running={st.tone === 'run'}>
 						<span class="tkind {job.kind}">
 							<Icon name={job.kind === 'image' ? 'image' : 'film'} size={14} />
 						</span>
 						<div class="tthumb">
 							{#if job.output_paths?.[0]}
 								{#if job.kind === 'image'}
-									<img src={assetUrl(job.output_paths[0])} alt={wfName(job)} loading="lazy" />
+									<img
+										src={assetUrl(job.output_paths[0])}
+										alt={wfName(job)}
+										loading="lazy"
+										onerror={() => job.output_paths[0] && markOutputMissing(job.output_paths[0])}
+									/>
 								{:else}
 									<video src={assetUrl(job.output_paths[0])} preload="metadata" muted></video>
 								{/if}
 							{/if}
 						</div>
-					<div class="tmain">
-						<div class="tname" title={wfName(job)}>
-							{#if isWorkflowTestJob(job)}<span class="tag tag-test">{t('tasks.testBadge')}</span>{/if}
-							{wfName(job)}
-						</div>
+						<div class="tmain">
+							<div class="tname" title={wfName(job)}>
+								{#if isWorkflowTestJob(job)}<span class="tag-test">{t('tasks.testBadge')}</span>{/if}
+								{wfName(job)}
+								{#if job.workflow_id == null}<span class="a-tag wf-gone">{t('studio.wfDeletedTag')}</span>{/if}
+							</div>
 							<div class="tmeta mono">
 								{#if projectOf(job)}{projectOf(job)} · {/if}{jobSourceLabel(job)} · {timeOf(job)}
 								{#if (job.output_paths?.length ?? 0) > 0}
@@ -182,13 +225,21 @@
 								<div class="terror">{job.error}</div>
 							{:else if st.tone === 'fail' || (job.status === 'done' && job.phase === 'dry_run')}
 								<div class="terror">{st.detail}</div>
+							{:else if st.tone === 'ok' && isFileMissing(job)}
+								<div class="twarn">{t('jobst.missingDetail')}</div>
 							{/if}
 						</div>
 						<div class="tout">
 							{#if job.output_paths?.length}
 								<div class="tout-thumbs">
-									{#each job.output_paths.slice(0, 3) as p (p)}
-										<a href={assetUrl(p)} target="_blank" rel="noreferrer" title={p.split(/[/\\]/).pop()}>
+									{#each job.output_paths.slice(0, 4) as p (p)}
+										<a
+											href={assetUrl(p)}
+											download
+											target="_blank"
+											rel="noreferrer"
+											title={t('tasks.download')}
+										>
 											{#if job.kind === 'image'}
 												<img src={assetUrl(p)} alt="" loading="lazy" />
 											{:else}
@@ -199,32 +250,37 @@
 								</div>
 							{/if}
 						</div>
-						<span class="tst {st.tone}" title={st.detail}>{st.label}</span>
+						<span class="a-tag tst {toneOf(job, st.tone)}" title={st.detail}>{labelOf(job, st)}</span>
 						<span class="tactions">
-							{#if job.status === 'failed'}
-								<button type="button" class="link-accent" disabled={busyId === job.id} onclick={() => retry(job)}>
+							{#if (st.tone === 'fail' || (st.tone === 'ok' && isFileMissing(job))) && job.error !== 'cancelled'}
+								<button type="button" class="link-ghost" disabled={busyId === job.id} onclick={() => retry(job)}>
 									{t('tasks.retry')}
 								</button>
 							{/if}
 							{#if job.status === 'pending' || job.status === 'running'}
-								<button type="button" class="link-danger" disabled={busyId === job.id} onclick={() => cancel(job)}>
+								<button type="button" class="link-ghost" disabled={busyId === job.id} onclick={() => cancel(job)}>
 									{t('tasks.cancel')}
 								</button>
 							{/if}
-							{#if isStandaloneJob(job)}
+							{#if job.output_paths?.length}
+								<a class="link-ghost" href={assetUrl(job.output_paths[0])} download>
+									{t('tasks.download')}
+								</a>
+							{/if}
+							{#if isStandaloneJob(job) && job.status !== 'pending' && job.status !== 'running'}
 								<button
 									type="button"
 									class="link-danger"
 									title={t('tasks.delete')}
-									onclick={() => {
-										deleteJobId = job.id;
-										deleteOpen = true;
-									}}
+									onclick={() => requestDelete(job)}
 								>
 									<Icon name="trash" size={13} />
 								</button>
 							{/if}
 						</span>
+						{#if progress > 0}
+							<div class="rowbar" style:--p={progress / 100}><i></i></div>
+						{/if}
 					</div>
 				{/each}
 			</div>
@@ -232,19 +288,6 @@
 	</div>
 </AppShell>
 
-<ConfirmDialog
-	bind:open={deleteOpen}
-	title={t('tasks.delTitle')}
-	message={t('tasks.delConfirm')}
-	confirmLabel={t('tasks.delete')}
-	danger
-	onconfirm={doDelete}
-	oncancel={() => {
-		deleteJobId = null;
-		deleteOpen = false;
-	}}
-/>
-
 <style>
 	.tasks-page {
 		padding: 20px 28px 40px;
@@ -254,30 +297,52 @@
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
-		gap: 18px;
+		gap: 16px;
 	}
 
-
-	.seg {
+	/* §3.5: 筛选芯片组（选中 = 金色文字 + accent-soft 底）+ 右侧搜索框 */
+	.toolbar {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		flex-wrap: wrap;
+	}
+	.chips {
 		display: flex;
 		gap: 6px;
-		width: fit-content;
+		flex-wrap: wrap;
 	}
-	.seg-item {
-		padding: 7px 18px;
-		border-radius: 7px;
-		border: 1px solid var(--border);
-		background: var(--surface-2);
-		font-size: 12px;
-		color: var(--text-2);
-		cursor: pointer;
-		font-family: inherit;
+	.fchip {
+		height: 28px;
 	}
-	.seg-item.selected {
+	.search {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		margin-left: auto;
+		min-width: 0;
+		height: 30px;
+		padding: 0 10px;
+		border: 1px solid var(--line);
+		border-radius: var(--r-pill);
+		background: var(--bg-2);
+		color: var(--text-3);
+	}
+	.search:focus-within {
 		border-color: var(--accent);
-		color: var(--accent);
-		background: var(--accent-dim);
-		font-weight: 600;
+	}
+	.search input {
+		min-width: 0;
+		width: 180px;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: var(--text);
+		font: inherit;
+		font-size: 12px;
+	}
+	.search input::placeholder {
+		color: var(--text-3);
 	}
 
 	.empty-card {
@@ -286,8 +351,8 @@
 		align-items: center;
 		gap: 12px;
 		padding: 56px 24px;
-		border: 1.5px dashed var(--border-strong);
-		border-radius: 10px;
+		border: 1.5px dashed var(--line-2);
+		border-radius: var(--r-lg);
 		color: var(--text-3);
 	}
 	.empty-card p {
@@ -296,24 +361,49 @@
 		line-height: 1.7;
 	}
 
+	/* 表格行：行底 --bg-2，悬停 --bg-3，进行中行底贴 2px 青进度条 */
 	.task-table {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 	}
 	.trow {
+		position: relative;
 		display: flex;
 		align-items: center;
 		gap: 12px;
-		padding: 10px 12px;
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		background: var(--surface);
+		padding: 10px 14px 10px 12px;
+		border: 1px solid var(--line);
+		border-radius: var(--r-md);
+		background: var(--bg-2);
 		min-height: 56px;
 	}
+	@media (hover: hover) and (pointer: fine) {
+		.trow:hover {
+			background: var(--bg-3);
+		}
+	}
 	.trow.failed {
 		border-color: color-mix(in srgb, var(--err) 35%, transparent);
 	}
+	.rowbar {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 2px;
+		overflow: hidden;
+		border-radius: 0 0 var(--r-md) var(--r-md);
+	}
+	.rowbar i {
+		display: block;
+		height: 100%;
+		width: 100%;
+		transform-origin: left;
+		transform: scaleX(var(--p));
+		background: var(--run-grad);
+		transition: transform var(--d-progress) linear;
+	}
 
 	.tkind {
 		width: 28px;
@@ -323,9 +413,6 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-	}
-	.tkind.image,
-	.tkind.video {
 		color: var(--text-2);
 		background: var(--bg-4);
 	}
@@ -335,8 +422,8 @@
 		height: 32px;
 		border-radius: 6px;
 		overflow: hidden;
-		border: 1px solid var(--border);
-		background: var(--surface-2);
+		border: 1px solid var(--line);
+		background: var(--bg-3);
 		flex-shrink: 0;
 	}
 	.tthumb img,
@@ -363,6 +450,9 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	.tname .wf-gone {
+		flex-shrink: 0;
+	}
 	.tmeta {
 		font-size: 10.5px;
 		color: var(--text-3);
@@ -371,7 +461,13 @@
 	.terror {
 		margin-top: 3px;
 		font-size: 11px;
-		color: var(--error);
+		color: var(--err);
+		line-height: 1.5;
+	}
+	.twarn {
+		margin-top: 3px;
+		font-size: 11px;
+		color: var(--warn);
 		line-height: 1.5;
 	}
 
@@ -383,11 +479,11 @@
 		gap: 4px;
 	}
 	.tout-thumbs a {
-		width: 44px;
-		height: 30px;
+		width: 32px;
+		height: 32px;
 		border-radius: 5px;
 		overflow: hidden;
-		border: 1px solid var(--border);
+		border: 1px solid var(--line);
 		display: block;
 	}
 	.tout-thumbs img,
@@ -399,45 +495,41 @@
 	}
 
 	.tst {
-		width: 52px;
-		text-align: right;
-		font-size: 11.5px;
-		font-weight: 600;
+		width: 64px;
+		text-align: center;
 		flex-shrink: 0;
 	}
-	.tst.ok {
-		color: var(--success);
-	}
-	.tst.run {
-		color: var(--run);
-	}
-	.tst.queue {
-		color: var(--text-3);
-		font-weight: 400;
-	}
-	.tst.fail {
-		color: var(--error);
-	}
 
+	/* §1.2 ghost：次级文字操作（重试/取消/下载）文字 --text-2，悬停 --text */
 	.tactions {
 		display: inline-flex;
 		align-items: center;
 		gap: 8px;
 		flex-shrink: 0;
 	}
-	.link-accent {
+	.link-ghost {
 		background: none;
 		border: none;
 		padding: 4px 6px;
 		font-family: inherit;
 		font-size: 12px;
-		color: var(--accent);
+		color: var(--text-2);
 		cursor: pointer;
+		border-radius: 6px;
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
 	}
-	.link-accent:hover:not(:disabled) {
-		text-decoration: underline;
+	@media (hover: hover) and (pointer: fine) {
+		.link-ghost:hover:not(:disabled) {
+			color: var(--text);
+		}
 	}
-	.link-accent:disabled {
+	.link-ghost:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.link-ghost:disabled {
 		opacity: 0.5;
 		cursor: default;
 	}
@@ -447,16 +539,22 @@
 		padding: 4px 6px;
 		font-family: inherit;
 		font-size: 12px;
-		color: var(--error);
+		color: var(--err);
 		cursor: pointer;
 		border-radius: 6px;
 		opacity: 0.85;
 		display: inline-flex;
 		align-items: center;
 	}
-	.link-danger:hover:not(:disabled) {
-		opacity: 1;
-		background: var(--error-dim);
+	@media (hover: hover) and (pointer: fine) {
+		.link-danger:hover:not(:disabled) {
+			opacity: 1;
+			background: var(--err-soft);
+		}
+	}
+	.link-danger:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
 	}
 	.link-danger:disabled {
 		opacity: 0.35;
@@ -464,26 +562,43 @@
 	}
 	.tag-test {
 		flex-shrink: 0;
-		background: var(--accent-dim);
-		color: var(--accent);
+		background: var(--bg-4);
+		color: var(--text-2);
 		font-size: 10px;
 		font-weight: 600;
 		padding: 1px 7px;
 		border-radius: 999px;
 	}
 
+	/* 窄屏：表格转卡片堆叠 */
 	@media (max-width: 1023px) {
 		.tasks-page {
 			padding: 14px 16px 32px;
 		}
-		.tout {
-			display: none;
-		}
 		.trow {
 			flex-wrap: wrap;
+			row-gap: 8px;
+		}
+		.tout {
+			order: 5;
+			width: 100%;
 		}
 		.tactions {
+			order: 6;
 			margin-left: auto;
 		}
+		.tst {
+			order: 4;
+			width: auto;
+			margin-left: auto;
+		}
+		.search {
+			margin-left: 0;
+			width: 100%;
+		}
+		.search input {
+			width: 100%;
+			flex: 1;
+		}
 	}
 </style>

calliope-web/src/routes/workbench/+page.svelte

@@ -63,7 +63,7 @@
 		{:else if items.length === 0}
 			<EmptyState title={t('workbench.pickerEmpty')} body={t('workbench.pickerEmptyBody')}>
 				{#snippet action()}
-					<a class="entry-btn primary" href="/">{t('workbench.pickerGoHome')}</a>
+					<a class="a-btn primary" href="/">{t('workbench.pickerGoHome')}</a>
 				{/snippet}
 			</EmptyState>
 		{:else}
@@ -167,7 +167,7 @@
 		background: var(--surface-3);
 	}
 	.seg.st-draft {
-		background: var(--accent);
+		background: var(--warn);
 	}
 	.seg.st-confirmed {
 		background: var(--success);
@@ -187,9 +187,9 @@
 	}
 	.jobs-chip {
 		padding: 1px 9px;
-		border-radius: 999px;
-		background: var(--accent-dim);
-		color: var(--accent);
+		border-radius: var(--r-pill);
+		background: var(--run-soft);
+		color: var(--run);
 		font-size: 10.5px;
 		font-weight: 600;
 		font-variant-numeric: tabular-nums;
@@ -207,23 +207,7 @@
 		text-align: center;
 	}
 
-	.entry-btn.primary {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		padding: 9px 18px;
-		border-radius: 8px;
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-size: 13px;
-		font-weight: 600;
-		text-decoration: none;
-	}
-	.entry-btn.primary:hover {
-		filter: brightness(1.08);
-	}
-
-	@media (max-width: 780px) {
+	@media (max-width: 760px) {
 		.picker {
 			padding: 16px 14px 32px;
 		}

calliope-web/src/routes/workbench/[id]/+page.svelte

@@ -313,10 +313,10 @@
 		confirmed: 'workbench.state.confirmed',
 	};
 	const STATUS_CLASS: Record<string, string> = {
-		todo: 'st-todo',
-		running: 'st-running',
-		awaiting_confirm: 'st-draft',
-		confirmed: 'st-confirmed',
+		todo: '',
+		running: 'run',
+		awaiting_confirm: 'warn',
+		confirmed: 'ok',
 	};
 
 	const stageStatus = $derived(currentStage?.status ?? 'todo');
@@ -335,7 +335,7 @@
 
 <AppShell active="workbench" title={overview?.project.title ?? t('workbench.title')} subtitle={t('workbench.subtitle')}>
 	{#snippet actions()}
-		<span class="chip">{t('workbench.progressChip', { n: confirmedCount })}</span>
+		<span class="status-chip">{t('workbench.progressChip', { n: confirmedCount })}</span>
 		<a class="ghost-link" href="/">{t('workbench.backHome')}</a>
 	{/snippet}
 
@@ -366,12 +366,12 @@
 						<p class="stage-tag">{currentAgent?.tagline ?? ''}</p>
 					</div>
 					<div class="stage-head-state">
-						<span class="state-chip {STATUS_CLASS[stageStatus]}">
+						<span class="a-tag {STATUS_CLASS[stageStatus]}">
 							{#if stageStatus === 'running'}<span class="breath"></span>{/if}
 							{t(STATUS_LABEL[stageStatus])}
 						</span>
 						{#if currentStage && currentStage.draft_edited && stageStatus !== 'todo'}
-							<span class="edited-chip">{t('workbench.state.edited')}</span>
+							<span class="a-tag warn">{t('workbench.state.edited')}</span>
 						{/if}
 					</div>
 				</div>
@@ -399,7 +399,7 @@
 
 				<div class="instruction-row">
 					<input
-						class="wb-input"
+						class="a-input"
 						bind:value={instruction}
 						placeholder={t('workbench.instructionPh')}
 						disabled={busyFor(stageKey)}
@@ -408,7 +408,7 @@
 					{#if stageStatus === 'todo'}
 						<button
 							type="button"
-							class="btn primary"
+							class="a-btn primary"
 							disabled={busyFor(stageKey) || $runMutation.isPending}
 							onclick={() => handleRun(stageKey)}
 							data-testid="stage-run-btn"
@@ -420,7 +420,7 @@
 					{#if stageStatus === 'awaiting_confirm'}
 						<button
 							type="button"
-							class="btn primary"
+							class="a-btn primary"
 							disabled={$confirmMutation.isPending}
 							onclick={() => $confirmMutation.mutate(stageKey)}
 							data-testid="stage-confirm-btn"
@@ -432,7 +432,7 @@
 					{#if stageStatus === 'confirmed' && currentStage?.draft_edited}
 						<button
 							type="button"
-							class="btn ghost"
+							class="a-btn ghost"
 							disabled={$restoreMutation.isPending}
 							onclick={() => $restoreMutation.mutate(stageKey)}
 							data-testid="stage-restore-btn"
@@ -496,7 +496,11 @@
 		<aside class="side-col">
 			{#if currentAgent}
 				<div class="side-card agent-card">
-					<span class="agent-avatar" style:background={`var(--avatar-${currentAgent.avatar})`}>
+					<span
+						class="agent-avatar"
+						class:light={(currentAgent.avatar ?? 1) <= 2}
+						style:background={`var(--avatar-${currentAgent.avatar})`}
+					>
 						{currentAgent.char}
 					</span>
 					<div class="agent-copy">
@@ -506,7 +510,7 @@
 							{#if currentModelName}· {currentModelName}{/if}
 						</span>
 					</div>
-					<button type="button" class="btn ghost sm" onclick={openAgentChat}>
+					<button type="button" class="a-btn ghost sm" onclick={openAgentChat}>
 						{t('workbench.chatWithAgent')}
 					</button>
 				</div>
@@ -659,40 +663,6 @@
 		flex-shrink: 0;
 	}
 
-	.state-chip {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 2px 10px;
-		border-radius: 999px;
-		font-size: 11px;
-		font-weight: 600;
-	}
-	.st-todo {
-		color: var(--text-2);
-		background: var(--surface-3);
-	}
-	.st-running {
-		color: var(--run);
-		background: var(--run-soft);
-	}
-	.st-draft {
-		color: var(--warn);
-		background: var(--warn-soft);
-	}
-	.st-confirmed {
-		color: var(--success);
-		background: var(--success-dim);
-	}
-	.edited-chip {
-		padding: 2px 10px;
-		border-radius: 999px;
-		font-size: 11px;
-		font-weight: 600;
-		color: var(--warn);
-		background: var(--warn-soft);
-	}
-
 	.error-banner {
 		display: flex;
 		align-items: flex-start;
@@ -733,7 +703,7 @@
 		gap: 10px;
 		align-items: center;
 	}
-	.instruction-row .wb-input {
+	.instruction-row .a-input {
 		flex: 1;
 	}
 
@@ -774,6 +744,10 @@
 		color: var(--text);
 		flex-shrink: 0;
 	}
+	/* HEL-680 灰阶头像：1–2 亮阶用深字 */
+	.agent-avatar.light {
+		color: var(--accent-ink);
+	}
 	.agent-copy {
 		display: flex;
 		flex-direction: column;
@@ -918,18 +892,9 @@
 	}
 
 	/* ── shared bits ── */
-	.chip {
-		padding: 3px 11px;
-		border-radius: 999px;
-		background: var(--surface-3);
-		color: var(--text-2);
-		font-size: 11.5px;
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-	}
 	.ghost-link {
 		color: var(--text-2);
-		font-size: 12px;
+		font-size: var(--fs-aux);
 		text-decoration: none;
 	}
 	.ghost-link:hover {
@@ -944,67 +909,6 @@
 		text-decoration: underline;
 	}
 
-	.wb-input {
-		padding: 9px 12px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		color: var(--text);
-		font-family: inherit;
-		font-size: 12.5px;
-		box-sizing: border-box;
-		transition: border-color 150ms;
-	}
-	.wb-input:focus {
-		outline: none;
-		border-color: var(--accent-line);
-	}
-	.wb-input::placeholder {
-		color: var(--text-3);
-	}
-
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 6px;
-		padding: 9px 15px;
-		border-radius: 8px;
-		border: 1px solid transparent;
-		font-family: inherit;
-		font-size: 12.5px;
-		cursor: pointer;
-		white-space: nowrap;
-		transition:
-			background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			border-color 150ms,
-			opacity 150ms;
-	}
-	.btn.primary {
-		background: var(--accent);
-		color: var(--accent-contrast);
-		font-weight: 600;
-	}
-	.btn.primary:hover:not(:disabled) {
-		filter: brightness(1.08);
-	}
-	.btn.ghost {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text-2);
-	}
-	.btn.ghost:hover:not(:disabled) {
-		color: var(--text);
-		border-color: var(--line-2);
-	}
-	.btn.sm {
-		padding: 6px 11px;
-		font-size: 11.5px;
-	}
-	.btn:disabled {
-		opacity: 0.4;
-		cursor: not-allowed;
-	}
-
 	.icon-btn {
 		display: inline-flex;
 		align-items: center;
@@ -1066,9 +970,9 @@
 			flex: 1 1 260px;
 		}
 	}
-	@media (max-width: 900px) {
+	@media (max-width: 760px) {
 		.wb-page {
-			padding: 4px 14px 24px;
+			padding: 4px var(--sp-4) 24px;
 		}
 		.instruction-row {
 			flex-direction: column;

calliope-web/svelte.config.js

@@ -14,12 +14,6 @@ const config = {
 			// finds the bundle. adapter-static otherwise emits ./_app on prerendered pages.
 			relative: false,
 		},
-		prerender: {
-			handleHttpError: ({ path, message }) => {
-				if (path === '/favicon.png') return;
-				throw new Error(message);
-			},
-		},
 	},
 };