HEL-836 restore original creative desk and orbit animation

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

calliope-backend/contracts.json

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

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

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

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

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

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

@@ -124,6 +124,19 @@ def note_description(ui_workflow: dict[str, Any], limit: int = 160) -> str | Non
     return None
 
 
+def media_io_from_schema(
+    inputs: list[dict[str, Any]], outputs: list[dict[str, Any]]
+) -> dict[str, list[str]]:
+    """Media declared by the final input schema and real graph outputs."""
+    media_kinds = ("image", "image_list", "video", "video_list", "audio", "audio_list")
+    return {
+        "in": sorted(
+            {e["kind"].replace("_list", "") for e in inputs if e.get("kind") in media_kinds}
+        ),
+        "out": sorted({e["kind"] for e in outputs if e.get("kind") in ("image", "video", "audio")}),
+    }
+
+
 def suggested_metadata(
     converted: dict[str, Any],
     source_path: str | None = None,
@@ -131,21 +144,10 @@ def suggested_metadata(
 ) -> 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")
-        }
+    media_io = media_io_from_schema(
+        parse_dynamic_inputs(converted), parse_dynamic_outputs(converted)
     )
+    media_in, media_out = media_io["in"], media_io["out"]
     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",

calliope-backend/src/calliope/db.py

@@ -311,6 +311,36 @@ CREATE TABLE IF NOT EXISTS project_stages (
 );
 CREATE INDEX IF NOT EXISTS idx_project_stages_project ON project_stages(project_id);
 
+-- B4: immutable source identity, editable draft, optimistic concurrency.
+CREATE TABLE IF NOT EXISTS agent_deliverables (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    session_id INTEGER NOT NULL REFERENCES agent_sessions(id) ON DELETE CASCADE,
+    source_message_id INTEGER NOT NULL,
+    project_id INTEGER REFERENCES projects(id) ON DELETE SET NULL,
+    stage_key TEXT NOT NULL CHECK(stage_key IN ('script','style','storyboard','assets','shot')),
+    title TEXT NOT NULL,
+    content TEXT NOT NULL,
+    revision INTEGER NOT NULL DEFAULT 1,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(session_id, source_message_id)
+);
+CREATE TABLE IF NOT EXISTS agent_deliverable_versions (
+    deliverable_id INTEGER NOT NULL REFERENCES agent_deliverables(id) ON DELETE CASCADE,
+    revision INTEGER NOT NULL,
+    content TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY(deliverable_id, revision)
+);
+CREATE TABLE IF NOT EXISTS result_attachments (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    source_key TEXT NOT NULL,
+    project_id INTEGER NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
+    stage_key TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    UNIQUE(source_key, project_id, stage_key)
+);
+
 -- Audit trail of agent runs inside the flow (HEL-614): instruction in,
 -- normalized JSON artifact out, or a Chinese-readable failure reason.
 CREATE TABLE IF NOT EXISTS stage_runs (
@@ -587,6 +617,13 @@ async def migrate_db(db_path: Path) -> None:
     # born ('chat' = user-created in AI Canvas, 'scene' = auto-created by the
     # Build Scene rail). The session list excludes origin='scene' so scene
     # sessions don't pollute the AI Canvas sidebar; Build Scene filters on it.
+    b4_cols = {r[1] for r in conn.execute("PRAGMA table_info(agent_sessions)")}
+    if "task_summary" not in b4_cols:
+        conn.execute("ALTER TABLE agent_sessions ADD COLUMN task_summary TEXT NOT NULL DEFAULT ''")
+    if "task_status" not in b4_cols:
+        conn.execute(
+            "ALTER TABLE agent_sessions ADD COLUMN task_status TEXT NOT NULL DEFAULT 'ready'"
+        )
     session_cols = {r[1] for r in conn.execute("PRAGMA table_info(agent_sessions)").fetchall()}
     if "origin" not in session_cols:
         conn.execute("ALTER TABLE agent_sessions ADD COLUMN origin TEXT NOT NULL DEFAULT 'chat'")

calliope-backend/src/calliope/main.py

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

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

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

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

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

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

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

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

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

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

@@ -7,7 +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.metadata import media_io_from_schema, suggested_metadata
 from calliope.comfyui.output_map import (
     auto_output_map,
     load_output_map,
@@ -76,7 +76,9 @@ def _serialize_workflow(row: Any) -> dict[str, Any]:
         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["media_io"] = _resolved_media_io(
+        data.get("media_io"), data["input_schema"], data["output_schema"]
+    )
     data["tags"] = _load_json_col(data.get("tags"), [])
     data["favorite"] = bool(data.get("favorite"))
     return data
@@ -90,6 +92,20 @@ def _load_json_col(raw: Any, default: Any) -> Any:
     return value if value is not None else default
 
 
+def _resolved_media_io(
+    raw: Any, inputs: list[dict[str, Any]], outputs: list[dict[str, Any]]
+) -> dict[str, list[str]]:
+    """Fill missing declarations only; an explicit empty list is meaningful."""
+    stored = _load_json_col(raw, {})
+    derived = media_io_from_schema(inputs, outputs)
+    if not isinstance(stored, dict):
+        return derived
+    return {
+        key: stored[key] if isinstance(stored.get(key), list) else derived[key]
+        for key in ("in", "out")
+    }
+
+
 async def _connection_check(
     endpoint_id: str | None, workflow_json: dict[str, Any], refresh: bool = False
 ) -> dict[str, Any]:
@@ -197,13 +213,15 @@ async def reanalyze_workflow(workflow_id: int) -> dict[str, Any]:
             output_map, output_map_source = None, None
         else:
             output_map, output_map_source = json.dumps(auto_output_map(workflow)), "auto"
+        media_io = _resolved_media_io(data["media_io"], schema, outputs)
+        media_io["in"] = media_io_from_schema(schema, outputs)["in"]
         is_enabled = data["is_enabled"]
         if output_map_source is None or usage is None:
             is_enabled = 0
         conn.execute(
             "UPDATE workflows SET input_schema = ?, output_schema = ?,"
             " usage = ?, usage_source = ?, output_map = ?, output_map_source = ?,"
-            " is_enabled = ? WHERE id = ?",
+            " is_enabled = ?, media_io = ? WHERE id = ?",
             (
                 json.dumps(schema),
                 json.dumps(outputs),
@@ -212,6 +230,7 @@ async def reanalyze_workflow(workflow_id: int) -> dict[str, Any]:
                 output_map,
                 output_map_source,
                 is_enabled,
+                json.dumps(media_io),
                 workflow_id,
             ),
         )
@@ -247,7 +266,8 @@ async def list_workflows(view: str | None = None) -> list[dict[str, Any]]:
     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
+            # workflow_json in the response. Only legacy/missing media
+            # declarations need graph parsing. `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.
@@ -260,11 +280,27 @@ async def list_workflows(view: str | None = None) -> list[dict[str, Any]]:
                 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": []})
+                media = _load_json_col(data.get("media_io"), {})
+                if isinstance(media, dict) and all(
+                    isinstance(media.get(key), list) for key in ("in", "out")
+                ):
+                    data["media_io"] = {key: media[key] for key in ("in", "out")}
+                else:
+                    legacy = conn.execute(
+                        "SELECT workflow_json, input_schema FROM workflows WHERE id = ?",
+                        (data["id"],),
+                    ).fetchone()
+                    graph = json.loads(legacy["workflow_json"])
+                    schema = effective_input_schema(
+                        _load_json_col(legacy["input_schema"], []), graph
+                    )
+                    data["media_io"] = _resolved_media_io(
+                        data.get("media_io"), schema, parse_dynamic_outputs(graph)
+                    )
                 data["tags"] = _load_json_col(data.get("tags"), [])
-                data["needs_mapping"] = data.get("usage") is None or data.get(
-                    "output_map_source"
-                ) is None
+                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()
@@ -369,6 +405,9 @@ async def create_workflow(payload: WorkflowCreate) -> dict[str, Any]:
         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(payload.workflow_json) or bool(payload.output_map)
+    schema = _stored_schema(payload.input_schema, payload.workflow_json)
+    outputs = parse_dynamic_outputs(payload.workflow_json)
+    media_io = media_io_from_schema(json.loads(schema), outputs)
     conn = get_db(settings.db_path)
     try:
         # Byte-identical re-imports are the main way the library fills up with
@@ -395,15 +434,15 @@ async def create_workflow(payload: WorkflowCreate) -> dict[str, Any]:
             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)
-            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                                   output_map, output_map_source, media_io)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
             """,
             (
                 payload.name,
                 kind,
                 json.dumps(payload.workflow_json),
-                _stored_schema(payload.input_schema, payload.workflow_json),
-                json.dumps(parse_dynamic_outputs(payload.workflow_json)),
+                schema,
+                json.dumps(outputs),
                 payload.description,
                 profile,
                 payload.endpoint_id,
@@ -412,6 +451,7 @@ async def create_workflow(payload: WorkflowCreate) -> dict[str, Any]:
                 usage_source,
                 output_map,
                 output_map_source,
+                json.dumps(media_io),
             ),
         )
         conn.commit()
@@ -474,7 +514,20 @@ async def update_workflow(workflow_id: int, payload: WorkflowUpdate) -> dict[str
         if "input_schema" in data and data["input_schema"] is not None:
             if not all(isinstance(e, dict) for e in data["input_schema"]):
                 raise HTTPException(status_code=422, detail="input_schema 必须是参数对象数组")
+            media = _resolved_media_io(
+                existing["media_io"], [], parse_dynamic_outputs(workflow_json)
+            )
+            schema = effective_input_schema(data["input_schema"], workflow_json)
+            media["in"] = media_io_from_schema(schema, [])["in"]
+            data["media_io"] = json.dumps(media)
             data["input_schema"] = json.dumps(data["input_schema"])
+        elif existing["media_io"] is None:
+            schema = effective_input_schema(
+                _load_json_col(existing["input_schema"], []), workflow_json
+            )
+            data["media_io"] = json.dumps(
+                media_io_from_schema(schema, parse_dynamic_outputs(workflow_json))
+            )
         # endpoint_id: explicit null clears the binding; other Nones are skips
         # (an output_map reset keeps its explicit NULLs).
         explicit_null = {"endpoint_id", "output_map", "output_map_source"} & {
@@ -792,6 +845,8 @@ def _insert_converted(
             "existing_id": existing["id"],
         }
     is_enabled = 1 if (usage and mapping_ok) else 0
+    schema = _stored_schema(item.input_schema, converted)
+    outputs = parse_dynamic_outputs(converted)
     cur = conn.execute(
         """
         INSERT INTO workflows (name, kind, workflow_json, input_schema, output_schema,
@@ -805,10 +860,8 @@ def _insert_converted(
             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)),
+            schema,
+            json.dumps(outputs),
             item.description if item.description is not None else suggested["description"],
             profile,
             is_enabled,
@@ -818,7 +871,7 @@ def _insert_converted(
             output_map_source,
             suggested["category"],
             suggested["model_family"],
-            json.dumps({"in": suggested["media_in"], "out": suggested["media_out"]}),
+            json.dumps(media_io_from_schema(json.loads(schema), outputs)),
             json.dumps(item.tags or []),
             item.source_path,
         ),

calliope-backend/tests/test_agent_mention_limits.py

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

calliope-backend/tests/test_playground_workbench_flowback.py

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

calliope-backend/tests/test_results.py

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

calliope-backend/tests/test_workbench.py

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

calliope-backend/tests/test_workflow_import_batch.py

@@ -339,7 +339,7 @@ def test_meta_view_has_metadata_but_no_full_json(client):
 
 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."""
+    legacy list still carries workflow_json and truthful media declarations."""
     created = client.post(
         "/api/workflows",
         json={"name": "旧导入", "workflow_json": _api_workflow()},
@@ -352,7 +352,7 @@ def test_legacy_list_shape_and_old_records_unchanged(client):
     assert "usage" in row and "output_map" in row
     assert row["favorite"] is False
     assert row["tags"] == []
-    assert row["media_io"] == {"in": [], "out": []}
+    assert row["media_io"] == {"in": ["image"], "out": ["video"]}
     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

calliope-backend/tests/test_workflow_media_io.py

@@ -0,0 +1,205 @@
+"""HEL-809: import declarations, persistence and both library views agree."""
+
+from __future__ import annotations
+
+import json
+
+import pytest
+
+from calliope.config import settings
+from calliope.db import get_db
+from tests.test_workflow_import_batch import _ui_graph
+
+
+def graph(*classes):
+    nodes = {str(i): {"class_type": cls, "inputs": {}} for i, cls in enumerate(classes, 1)}
+    nodes["90"] = {
+        "class_type": "PrimitiveStringMultiline",
+        "inputs": {"value": "HEL809 isolated prompt"},
+        "_meta": {"title": "Prompt (Input:prompt)"},
+    }
+    for i in range(1, len(classes) + 1):
+        role = "mask" if classes[i - 1] == "LoadImageMask" else "image"
+        nodes[str(i)]["_meta"] = {"title": f"Reference (Input:{role})"}
+    return nodes
+
+
+def create(client, workflow, schema=None):
+    analyzed = client.post("/api/workflows/analyze", json={"workflow_json": workflow})
+    assert analyzed.status_code == 200
+    response = client.post(
+        "/api/workflows",
+        json={
+            "name": "HEL809 input contract",
+            "workflow_json": workflow,
+            "input_schema": analyzed.json()["inputs"] if schema is None else schema,
+        },
+    )
+    assert response.status_code == 200, response.text
+    return response.json()
+
+
+def assert_views(client, wid, expected):
+    detail = client.get(f"/api/workflows/{wid}").json()
+    assert detail["media_io"] == expected
+    for query in ("", "?view=meta"):
+        rows = client.get("/api/workflows" + query).json()
+        row = next(r for r in rows if r["id"] == wid)
+        assert row["media_io"] == expected
+        # This is the library's exact media predicate, fed by the meta API.
+        for media in ("image", "video", "audio"):
+            hits = [
+                r["id"]
+                for r in rows
+                if media in r["media_io"]["in"] or media in r["media_io"]["out"]
+            ]
+            assert (wid in hits) == (media in expected["in"] or media in expected["out"])
+        if query:
+            assert not {"workflow_json", "input_schema", "output_schema"} & row.keys()
+
+
+def stored_media(wid):
+    with get_db(settings.db_path) as conn:
+        return json.loads(
+            conn.execute("SELECT media_io FROM workflows WHERE id = ?", (wid,)).fetchone()[
+                "media_io"
+            ]
+        )
+
+
+@pytest.mark.parametrize(
+    "classes", [("LoadImage",), ("LoadImageMask",), ("LoadImage", "LoadImageMask"), ()]
+)
+def test_analyze_create_persists_media_and_agrees_with_library(client, classes):
+    row = create(client, graph(*classes))
+    expected = {"in": ["image"] if classes else [], "out": []}
+    if "LoadImageMask" in classes:
+        assert any(e["role"] == "mask" and e["kind"] == "image" for e in row["input_schema"])
+    assert stored_media(row["id"]) == expected
+    assert row["model_family"] is None  # never infer a model or output from kind
+    assert_views(client, row["id"], expected)
+
+
+def test_create_uses_confirmed_schema_not_original_graph(client):
+    row = create(client, graph(), [{"nodeId": "90", "kind": "audio_list", "manual": True}])
+    assert stored_media(row["id"]) == {"in": ["audio"], "out": []}
+    assert_views(client, row["id"], {"in": ["audio"], "out": []})
+
+
+def test_update_changes_inputs_preserving_explicit_outputs_and_other_metadata(client):
+    row = create(client, graph("LoadImage"))
+    with get_db(settings.db_path) as conn:
+        conn.execute(
+            "UPDATE workflows SET media_io = ?, model_family = ?, tags = ? WHERE id = ?",
+            (json.dumps({"in": ["image"], "out": []}), "existing", '["tag"]', row["id"]),
+        )
+    for kind, expected in (("audio_list", ["audio"]), ("text", []), ("video_list", ["video"])):
+        response = client.patch(
+            f"/api/workflows/{row['id']}",
+            json={
+                "input_schema": [{"nodeId": "90", "kind": kind, "manual": True}],
+            },
+        )
+        assert response.status_code == 200, response.text
+        assert response.json()["model_family"] == "existing"
+        assert response.json()["tags"] == ["tag"]
+        assert stored_media(row["id"]) == {"in": expected, "out": []}
+        assert_views(client, row["id"], {"in": expected, "out": []})
+
+
+@pytest.mark.parametrize(
+    "raw, expected",
+    [
+        (None, {"in": ["image"], "out": ["image"]}),
+        ('{"in": [], "out": []}', {"in": [], "out": []}),
+        ('{"out": []}', {"in": ["image"], "out": []}),
+        ('{"in": []}', {"in": [], "out": ["image"]}),
+    ],
+)
+def test_legacy_null_and_missing_keys_are_distinct_from_empty_lists(client, raw, expected):
+    workflow = graph("LoadImageMask")
+    workflow["99"] = {"class_type": "SaveImage", "inputs": {"images": ["1", 0]}}
+    row = create(client, workflow)
+    with get_db(settings.db_path) as conn:
+        conn.execute("UPDATE workflows SET media_io = ? WHERE id = ?", (raw, row["id"]))
+    assert_views(client, row["id"], expected)
+    with get_db(settings.db_path) as conn:
+        assert (
+            conn.execute("SELECT media_io FROM workflows WHERE id = ?", (row["id"],)).fetchone()[
+                "media_io"
+            ]
+            == raw
+        )  # read only fallback
+    if raw is None:
+        response = client.patch(f"/api/workflows/{row['id']}", json={"favorite": True})
+        assert response.status_code == 200
+        assert stored_media(row["id"]) == expected
+
+
+def test_legacy_prompt_only_has_no_invented_media(client):
+    row = create(client, graph())
+    with get_db(settings.db_path) as conn:
+        conn.execute("UPDATE workflows SET media_io = NULL WHERE id = ?", (row["id"],))
+    assert_views(client, row["id"], {"in": [], "out": []})
+
+
+def test_batch_import_metadata_survives_unrelated_update(client):
+    response = client.post(
+        "/api/workflows/import-batch",
+        json={
+            "files": [
+                {
+                    "source_path": "3-图像生成/Qwen-Image-2.1/demo.json",
+                    "workflow_json": _ui_graph(),
+                    "tags": ["existing batch"],
+                }
+            ]
+        },
+    )
+    assert response.status_code == 200, response.text
+    wid = response.json()["imported_ids"][0]
+    before = client.get(f"/api/workflows/{wid}").json()
+    response = client.patch(f"/api/workflows/{wid}", json={"favorite": True})
+    after = response.json()
+    for key in ("media_io", "source", "source_path", "category", "model_family", "tags"):
+        assert before[key] == after[key]
+    assert_views(client, wid, {"in": [], "out": ["image"]})
+
+
+def test_reanalyze_refreshes_inputs_and_preserves_empty_output_declaration(client):
+    row = create(client, graph("LoadImageMask"))
+    client.patch(
+        f"/api/workflows/{row['id']}",
+        json={
+            "input_schema": [{"nodeId": "90", "kind": "text"}],
+        },
+    )
+    # Legacy auto schema: read/reanalyze must rederive it before media classification.
+    with get_db(settings.db_path) as conn:
+        conn.execute(
+            "UPDATE workflows SET input_schema = ? WHERE id = ?",
+            ('[{"nodeId": "90", "kind": "text", "auto": true}]', row["id"]),
+        )
+    response = client.post(f"/api/workflows/{row['id']}/reanalyze")
+    assert response.status_code == 200
+    expected = {"in": ["image"], "out": []}
+    assert stored_media(row["id"]) == expected
+    assert_views(client, row["id"], expected)
+
+
+def test_batch_import_uses_final_confirmed_input_schema(client):
+    response = client.post(
+        "/api/workflows/import-batch",
+        json={
+            "files": [
+                {
+                    "workflow_json": _ui_graph(),
+                    "input_schema": [{"nodeId": "2", "kind": "image_list", "manual": True}],
+                }
+            ]
+        },
+    )
+    assert response.status_code == 200, response.text
+    wid = response.json()["imported_ids"][0]
+    assert stored_media(wid) == {"in": ["image"], "out": ["image"]}
+    assert_views(client, wid, {"in": ["image"], "out": ["image"]})

calliope-web/eslint.config.js

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

calliope-web/package.json

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

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

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

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

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

calliope-web/src/app.html

@@ -1,19 +1,47 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>影工坊</title>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap"
-			rel="stylesheet"
-		/>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      (function () {
+        var saved, motion, legacy;
+        try {
+          saved = localStorage.getItem("aigc-theme");
+          motion = localStorage.getItem("aigc-motion");
+          legacy = localStorage.getItem("aigc-reduce-motion");
+        } catch (_) {}
+        document.documentElement.dataset.theme =
+          /^(night|day|grade|bluehour)$/.test(saved || "") ? saved : "night";
+        var preference =
+          motion === null || motion === undefined
+            ? legacy === "1" || legacy === "true"
+              ? "off"
+              : "full"
+            : /^(full|calm|off)$/.test(motion)
+              ? motion
+              : "full";
+        var mode = matchMedia("(prefers-reduced-motion: reduce)").matches
+          ? "off"
+          : preference;
+        document.documentElement.dataset.motion = mode;
+        document.documentElement.dataset.reduce = mode === "off" ? "1" : "0";
+        document.documentElement.classList.toggle("calm", mode === "calm");
+        document.documentElement.classList.toggle("reduce", mode === "off");
+      })();
+    </script>
+    <link rel="stylesheet" href="%sveltekit.assets%/themes.css" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>影工坊</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>

calliope-web/src/hooks.client.ts

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

calliope-web/src/hooks.server.ts

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

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

@@ -0,0 +1,18 @@
+import type { Action } from "svelte/action";
+
+/** HEL-716: interacting with an arriving result skips its development effect. */
+export const finishAnimations: Action<HTMLElement> = (node) => {
+  const finish = () => {
+    for (const animation of node.getAnimations({ subtree: true })) {
+      if (animation.playState === "running") animation.finish();
+    }
+  };
+  node.addEventListener("pointerdown", finish);
+  node.addEventListener("keydown", finish);
+  return {
+    destroy() {
+      node.removeEventListener("pointerdown", finish);
+      node.removeEventListener("keydown", finish);
+    },
+  };
+};

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

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

calliope-web/src/lib/agentComposer.ts

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

calliope-web/src/lib/agentTasks.ts

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

calliope-web/src/lib/api.ts

@@ -696,6 +696,15 @@ export const playgroundApi = {
     endpoint_id?: string | null;
     /** Origin recorded on the job payload (tasks page labels). */
     source?: "playground" | "studio-image" | "studio-video";
+    /** Optional real workbench source (HEL-684) — validated server-side and
+     * stamped on the job so finished takes can flow back to their row. */
+    context?: {
+      project_id: number;
+      stage: "assets" | "shot";
+      source_kind: "asset" | "shot";
+      source_id: string;
+      label?: string;
+    };
   }) =>
     api<{ ok: boolean; job: Job }>("/api/playground/generate", {
       method: "POST",
@@ -713,7 +722,24 @@ export const playgroundApi = {
       job_id: number;
       deleted_files: string[];
       missing_files: string[];
+      removed_workbench_links?: number[];
     }>(`/api/playground/jobs/${jobId}`, { method: "DELETE" }),
+  /** Flow a finished take back to the workbench row it came from (HEL-684).
+   * The server derives the target from the job's own recorded context —
+   * idempotent, never overwrites, refuses stale source rows. */
+  attachWorkbench: (jobId: number) =>
+    api<{
+      ok: boolean;
+      already_attached: boolean;
+      job_id: number;
+      attached_job_id: number;
+      project_id: number;
+      stage: "assets" | "shot";
+      target_id: string;
+    }>("/api/playground/attach-workbench", {
+      method: "POST",
+      body: JSON.stringify({ job_id: jobId }),
+    }),
   attach: (payload: {
     path: string;
     project_id: number;
@@ -808,6 +834,8 @@ export interface VideoShot {
 }
 
 export interface WorkbenchStage {
+  incoming_results?: IncomingResult[];
+  assistant_note?: string;
   stage_key: WorkbenchStageKey;
   status: WorkbenchStageStatus;
   content: Record<string, unknown> | null;
@@ -831,6 +859,11 @@ export interface WorkbenchOverview {
 }
 
 export const workbenchApi = {
+  saveNote: (projectId: number, stageKey: WorkbenchStageKey, text: string) =>
+    api<{ ok: boolean; stage: WorkbenchStage }>(
+      `/api/workbench/projects/${projectId}/stages/${stageKey}/note`,
+      { method: "PATCH", body: JSON.stringify({ text }) },
+    ),
   overview: (projectId: number) =>
     api<WorkbenchOverview>(`/api/workbench/projects/${projectId}`),
   patchStage: (
@@ -922,7 +955,65 @@ export const libraryApi = {
 
 // ── Agents (agentic harness) ────────────────────────────────────────────
 
+export interface AgentDeliverable {
+  id: number;
+  session_id: number;
+  source_message_id: number;
+  project_id: number | null;
+  stage_key: WorkbenchStageKey;
+  title: string;
+  content: string;
+  revision: number;
+  created_at: string;
+  updated_at: string;
+}
+export interface IncomingResult {
+  source_key: string;
+  title: string;
+  text?: string;
+  kind?: string;
+  paths?: string[];
+  session_id?: number;
+  job_id?: number;
+}
+export const resultsApi = {
+  versions: (id: number) =>
+    api<{ revision: number; content: string }[]>(
+      `/api/results/deliverables/${id}/versions`,
+    ),
+  list: (sessionId?: number) =>
+    api<AgentDeliverable[]>(
+      `/api/results/deliverables${sessionId == null ? "" : `?session_id=${sessionId}`}`,
+    ),
+  patch: (
+    id: number,
+    payload: {
+      revision: number;
+      content: string;
+      project_id: number | null;
+      stage_key: WorkbenchStageKey;
+    },
+  ) =>
+    api<AgentDeliverable>(`/api/results/deliverables/${id}`, {
+      method: "PATCH",
+      body: JSON.stringify(payload),
+    }),
+  store: (payload: {
+    project_id: number;
+    stage_key: WorkbenchStageKey;
+    deliverable_id?: number;
+    revision?: number;
+    job_id?: number;
+  }) =>
+    api<{ ok: boolean; already_attached: boolean; stage: WorkbenchStage }>(
+      "/api/results/store",
+      { method: "POST", body: JSON.stringify(payload) },
+    ),
+};
+
 export interface AgentSession {
+  task_summary?: string;
+  task_status?: string;
   id: number;
   project_id: number | null;
   title: string;

calliope-web/src/lib/assetPicker.ts

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

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

@@ -1,11 +1,15 @@
 <script lang="ts">
 	import { type Node, type NodeProps } from '@xyflow/svelte';
+	import { untrack } from 'svelte';
+	import { reduceMotion } from '$lib/reduceMotion.svelte';
+	import { finishAnimations } from '$lib/actions/finishAnimations';
 	import SafeMedia from '$lib/components/SafeMedia.svelte';
 	import { assetUrl } from '$lib/api';
 	import { t } from '$lib/i18n.svelte';
 
 	interface ArtifactNodeData extends Record<string, unknown> {
 		canvasNodeId: number;
+		jobId: number | null;
 		title: string;
 		/** Generated media file (image or video) — absolute path served via /assets. */
 		artifactPath: string | null;
@@ -17,44 +21,69 @@
 
 	type ArtifactNode = Node<ArtifactNodeData, 'image' | 'video'>;
 
-	let { data }: NodeProps<ArtifactNode> = $props();
+	let { data, selected }: NodeProps<ArtifactNode> = $props();
 
-	const mediaSrc = $derived(data.artifactPath ? assetUrl(data.artifactPath) : null);
+	const mediaSrc = $derived(
+		data.artifactPath ? assetUrl(data.artifactPath) : null,
+	);
 	// '#t=0.1' fragment paints the first frame (same trick as ClipMonitor).
 	const videoSrc = $derived(
 		data.kind === 'video' && mediaSrc ? mediaSrc + '#t=0.1' : null,
 	);
 
-	const running = $derived(data.status === 'running' || data.status === 'pending');
+	const running = $derived(
+		data.status === 'running' || data.status === 'pending',
+	);
 
+	let arriving = $state(false);
+	let previous: { id: number | null; status: string } | null = null;
+	$effect(() => {
+		void reduceMotion.mode;
+		void reduceMotion.loopRevision;
+		arriving = false;
+	});
+	$effect(() => {
+		const id = data.jobId,
+			status = data.status;
+		if (!id || previous?.id !== id || status !== 'done') arriving = false;
+		else if (previous.status === 'pending' || previous.status === 'running')
+			arriving = !untrack(() => reduceMotion.mode === 'off');
+		previous = { id, status };
+	});
+	$effect(() => {
+		if (!arriving) return;
+		const skip = () => (arriving = false);
+		window.addEventListener('pointerdown', skip, true);
+		return () => window.removeEventListener('pointerdown', skip, true);
+	});
 	function openPreview() {
 		if (!mediaSrc) return;
 		data.onOpenMedia?.(data.kind);
 	}
 </script>
 
-<div class="artifact-node" class:running>
+<div
+	class="canvas-card artifact-node a-viewfinder"
+	class:a-in-frame={selected}
+	data-kind={data.kind}
+>
 	<header>
 		<span class="type-chip">{data.kind}</span>
 		<span class="title" title={data.title}>{data.title}</span>
-		{#if running}
-			<span class="status running-badge">{t('canvas.running')}</span>
-		{:else if data.status === 'failed'}
-			<span class="status failed-badge">{t('canvas.failed')}</span>
-		{:else if videoSrc}
-			<span class="play-badge" aria-hidden="true">▶</span>
-		{/if}
 	</header>
-	<div class="media">
+	<div
+		class="media"
+		use:finishAnimations
+		onanimationend={() => (arriving = false)}
+	>
 		{#if videoSrc}
-			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 			<button
 				type="button"
 				class="media-btn"
+				class:a-result-develop={arriving}
 				onclick={openPreview}
 				title={t('canvas.openPreview')}
 			>
-				<!-- svelte-ignore a11y_media_has_caption -->
 				<video
 					class="media-el"
 					src={videoSrc}
@@ -64,10 +93,10 @@
 				></video>
 			</button>
 		{:else if mediaSrc}
-			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 			<button
 				type="button"
 				class="media-btn"
+				class:a-result-develop={arriving}
 				onclick={openPreview}
 				title={t('canvas.openPreview')}
 			>
@@ -84,131 +113,12 @@
 		{:else}
 			<span class="placeholder">{t('canvas.noMedia')}</span>
 		{/if}
+		<span class="out-kind">{data.kind}</span>
 	</div>
-	<span class="out-kind">{data.kind}</span>
+	<footer>
+		{#if running}<span class="status running-badge">{t('canvas.running')}</span
+			>{:else if data.status === 'failed'}<span class="status failed-badge"
+				>{t('canvas.failed')}</span
+			>{/if}<span class="node-id">#{data.canvasNodeId}</span>
+	</footer>
 </div>
-
-<style>
-	.artifact-node {
-		width: 220px;
-		background: var(--bg-surface);
-		border: 1px solid var(--border);
-		border-radius: 12px;
-		overflow: hidden;
-		position: relative;
-	}
-	.artifact-node.running {
-		border-color: rgba(125, 211, 252, 0.6);
-		box-shadow: 0 0 18px rgba(125, 211, 252, 0.25);
-	}
-	:global(.svelte-flow__node.selected) .artifact-node {
-		border-color: var(--accent);
-		box-shadow:
-			0 0 0 1px var(--accent),
-			0 0 30px var(--accent-glow);
-	}
-	header {
-		display: flex;
-		align-items: center;
-		gap: 7px;
-		padding: 8px 10px;
-	}
-	.type-chip {
-		font-size: 9px;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
-		color: #bae6fd;
-		background: rgba(12, 74, 110, 0.55);
-		border: 1px solid rgba(125, 211, 252, 0.35);
-		border-radius: 999px;
-		padding: 2px 6px;
-		flex-shrink: 0;
-	}
-	.title {
-		flex: 1;
-		min-width: 0;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--text-primary);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.status {
-		font-size: 9.5px;
-		padding: 2px 6px;
-		border-radius: 999px;
-		flex-shrink: 0;
-	}
-	.running-badge {
-		color: #bae6fd;
-		background: rgba(12, 74, 110, 0.6);
-	}
-	.failed-badge {
-		color: #fecaca;
-		background: rgba(127, 29, 29, 0.5);
-	}
-	.play-badge {
-		font-size: 9px;
-		color: var(--text-primary);
-		background: color-mix(in srgb, var(--accent) 22%, transparent);
-		border-radius: 50%;
-		width: 18px;
-		height: 18px;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-	.media {
-		height: 124px;
-		background: var(--bg-elevated);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-	}
-	/* SafeMedia renders the <img> inside a child component, so the scoped
-	 * `.media-el` below never lands on it — the :global() reach is what
-	 * makes it fill the frame (same pattern as EntityNode). Without it the
-	 * image renders at natural size and only a slice is visible. */
-	.media :global(.media-el),
-	.media-el {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		display: block;
-	}
-	.media-btn {
-		appearance: none;
-		border: none;
-		background: transparent;
-		padding: 0;
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-		display: block;
-	}
-	.placeholder {
-		font-size: 10px;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--text-muted);
-	}
-	/* Identical to EntityNode's kind badge: transparent-black pill, muted
-	 * white text — one style across project and non-project cards. */
-	.out-kind {
-		position: absolute;
-		right: 16px;
-		bottom: 10px;
-		font-size: 8.5px;
-		font-weight: 600;
-		letter-spacing: 0.04em;
-		text-transform: lowercase;
-		color: var(--text-muted);
-		pointer-events: none;
-		background: rgba(0, 0, 0, 0.55);
-		padding: 1px 5px;
-		border-radius: 999px;
-	}
-</style>

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

@@ -32,13 +32,15 @@
 		}
 	}
 
-	let { data }: NodeProps<EntityNode> = $props();
+	let { data, selected }: NodeProps<EntityNode> = $props();
 
 	const posterSrc = $derived(assetUrl(data.imagePath));
 	// '#t=0.1' media fragment: with preload="metadata" browsers paint nothing
 	// until playback, so the thumbnail sat black. The fragment seeks+paints
 	// the first frame without playing (same trick as ClipMonitor).
-	const videoSrc = $derived(data.videoPath ? assetUrl(data.videoPath) + '#t=0.1' : null);
+	const videoSrc = $derived(
+		data.videoPath ? assetUrl(data.videoPath) + '#t=0.1' : null,
+	);
 
 	function activate() {
 		// One rule for every card (artifact and entity alike): click opens the
@@ -52,7 +54,9 @@
 </script>
 
 <div
-	class="entity-node"
+	class="canvas-card entity-node a-viewfinder"
+	class:a-in-frame={selected}
+	data-kind={data.entityType}
 	role="button"
 	tabindex="0"
 	onclick={activate}
@@ -61,7 +65,9 @@
 	}}
 >
 	<header>
-		<Icon name={iconFor(data.entityType)} size={14} />
+		<span class="kind-icon"
+			><Icon name={iconFor(data.entityType)} size={14} /></span
+		>
 		<span class="title" title={data.title}>{data.title}</span>
 		{#if videoSrc}
 			<span class="play-badge" aria-hidden="true">
@@ -73,10 +79,15 @@
 		{#if videoSrc && posterSrc}
 			<!-- Idle video card: show the poster (cheap static file, never a
 				mounted <video>). Click opens the modal player. -->
-			<SafeMedia class="media-el" src={posterSrc} alt={data.title} kind="image" controls={false} />
+			<SafeMedia
+				class="media-el"
+				src={posterSrc}
+				alt={data.title}
+				kind="image"
+				controls={false}
+			/>
 		{:else if videoSrc}
 			<!-- No poster available: #t=0.1 first-frame thumbnail. -->
-			<!-- svelte-ignore a11y_media_has_caption -->
 			<video
 				class="media-el"
 				src={videoSrc}
@@ -85,101 +96,23 @@
 				preload="metadata"
 			></video>
 		{:else if posterSrc}
-			<SafeMedia class="media-el" src={posterSrc} alt={data.title} kind="image" controls={false} />
+			<SafeMedia
+				class="media-el"
+				src={posterSrc}
+				alt={data.title}
+				kind="image"
+				controls={false}
+			/>
 		{:else}
 			<span class="placeholder">{data.entityType}</span>
 		{/if}
+		{#if videoSrc}<span class="out-kind">video</span>{:else if posterSrc}<span
+				class="out-kind">image</span
+			>{/if}
 	</div>
-	{#if videoSrc}
-		<span class="out-kind">video</span>
-	{:else if posterSrc}
-		<span class="out-kind">image</span>
-	{/if}
+	<footer>
+		<span>{data.entityType}</span><span class="node-id"
+			>#{data.canvasNodeId}</span
+		>
+	</footer>
 </div>
-
-<style>
-.entity-node {
-	width: 240px;
-	background: var(--bg-surface);
-	border: 1px solid var(--border);
-	border-radius: 14px;
-	overflow: visible;
-	cursor: pointer;
-	transition: border-color 0.15s;
-}
-	.entity-node:hover {
-		border-color: #3a3a44;
-	}
-	/* Svelte Flow marks the selected node wrapper with .selected */
-	:global(.svelte-flow__node.selected) .entity-node {
-		border-color: var(--accent);
-		box-shadow:
-			0 0 0 1px var(--accent),
-			0 0 40px var(--accent-glow);
-	}
-	header {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		padding: 9px 12px;
-		color: var(--text-secondary);
-	}
-	.title {
-		flex: 1;
-		min-width: 0;
-		font-size: 12.5px;
-		font-weight: 500;
-		color: var(--text-primary);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.play-badge {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 18px;
-		height: 18px;
-		border-radius: 50%;
-		background: color-mix(in srgb, var(--accent) 22%, transparent);
-		color: var(--text-primary);
-		flex-shrink: 0;
-	}
-	.media {
-		height: 132px;
-		background: var(--bg-elevated);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		overflow: hidden;
-		border-radius: 0 0 14px 14px;
-	}
-	.media :global(.media-el),
-	.media-el {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		display: block;
-	}
-	.placeholder {
-		font-size: 10px;
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--text-muted);
-	}
-
-	.out-kind {
-		position: absolute;
-		right: 16px;
-		bottom: 10px;
-		font-size: 8.5px;
-		font-weight: 600;
-		letter-spacing: 0.04em;
-		text-transform: lowercase;
-		color: var(--text-muted);
-		pointer-events: none;
-		background: rgba(0, 0, 0, 0.55);
-		padding: 1px 5px;
-		border-radius: 999px;
-	}
-</style>

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

@@ -0,0 +1,227 @@
+/* Scope border-box to the canvas; shared legacy chat uses content-box elsewhere. */
+.canvas-root,
+.canvas-root *,
+.canvas-root *::before,
+.canvas-root *::after {
+  box-sizing: border-box;
+}
+/* Canvas surfaces consume the approved shared theme and motion tokens. */
+.canvas-root .svelte-flow {
+  --xy-background-color-default: var(--board-bg);
+  --xy-background-pattern-color-default: var(--board-dot);
+  --xy-controls-button-background-color-default: transparent;
+  --xy-controls-button-background-color-hover-default: rgb(var(--ink) / 0.06);
+  --xy-controls-button-color-default: var(--tx-2);
+  --xy-controls-button-color-hover-default: var(--tx-1);
+  --xy-controls-button-border-color-default: transparent;
+}
+.canvas-root .svelte-flow__panel {
+  margin: 14px;
+}
+.canvas-root .svelte-flow__controls,
+.canvas-root .svelte-flow__minimap {
+  padding: 4px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-md);
+  background: var(--glass);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--sh-1);
+  overflow: hidden;
+}
+.canvas-root .svelte-flow__controls {
+  gap: 2px;
+  height: 160px;
+}
+.canvas-root .svelte-flow__controls-button {
+  width: 30px;
+  height: 30px;
+  padding: 7px;
+  border-radius: 7px;
+}
+.canvas-root .svelte-flow__minimap {
+  padding: 10px;
+}
+.canvas-root .svelte-flow__minimap svg {
+  display: block;
+  background: rgb(var(--ink) / 0.04);
+  border-radius: 5px;
+}
+.canvas-root .svelte-flow__minimap-mask {
+  fill: rgb(var(--ink) / 0.04);
+  stroke: color-mix(in srgb, var(--gold) 80%, var(--hi));
+}
+.canvas-card {
+  position: relative;
+  width: 240px;
+  border-radius: var(--r-lg);
+  background: var(--bg-2);
+  border: 1px solid var(--line-2);
+  box-shadow: var(--sh-1);
+  cursor: grab;
+  transition:
+    box-shadow var(--t-base),
+    border-color var(--t-base);
+  --scene: var(--sc-image);
+}
+.canvas-card.artifact-node {
+  width: 220px;
+  border-radius: var(--r-md);
+}
+.canvas-card:hover {
+  box-shadow: var(--sh-2);
+  border-color: var(--line-3);
+}
+.canvas-card.a-in-frame,
+.canvas-root .svelte-flow__node:focus-visible .canvas-card {
+  border-color: color-mix(in srgb, var(--scene) 45%, transparent);
+}
+.canvas-card:focus-visible {
+  outline: none;
+}
+.canvas-card:focus-visible::after,
+.canvas-root .svelte-flow__node:focus-visible .canvas-card::after {
+  opacity: 1;
+  inset: var(--viewfinder-selected-inset);
+}
+.canvas-card header {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 10px 8px;
+}
+.canvas-card .title {
+  flex: 1;
+  min-width: 0;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--tx-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.canvas-card .kind-icon {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  border-radius: 6px;
+  color: var(--kind-color);
+  background: color-mix(in srgb, var(--kind-color) 12%, transparent);
+}
+.canvas-card[data-kind="character"] {
+  --kind-color: var(--sc-agent);
+}
+.canvas-card[data-kind="location"],
+.canvas-card[data-kind="scene"],
+.canvas-card[data-kind="video"] {
+  --kind-color: var(--sc-video);
+}
+.canvas-card[data-kind="item"] {
+  --kind-color: var(--sc-project);
+}
+.canvas-card[data-kind="image"] {
+  --kind-color: var(--sc-image);
+}
+.canvas-card .play-badge {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgb(var(--ink) / 0.06);
+  color: var(--tx-2);
+}
+.canvas-card .media {
+  position: relative;
+  height: 132px;
+  margin: 0 8px 8px;
+  border-radius: calc(var(--r-md) - 2px);
+  background: var(--desk-media-bg);
+  box-shadow: var(--media-shadow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.canvas-card.artifact-node .media {
+  height: 124px;
+}
+.canvas-card .media-el {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.canvas-card .media-btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+.canvas-card .placeholder {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: var(--tx-3);
+}
+.canvas-card .out-kind {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 10.5px;
+  color: var(--on-media);
+  background: var(--media-scrim);
+  border: 1px solid var(--line-2);
+  pointer-events: none;
+}
+.canvas-card footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px 9px;
+  font-size: 11px;
+  color: var(--tx-3);
+}
+.canvas-card footer .node-id {
+  margin-left: auto;
+  font-family: var(--mono);
+}
+.canvas-card .type-chip {
+  font-size: 10.5px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--kind-color);
+  background: color-mix(in srgb, var(--kind-color) 12%, transparent);
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+}
+.canvas-card .status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+}
+.canvas-card .running-badge {
+  color: var(--info);
+}
+.canvas-card .running-badge::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--info);
+}
+.canvas-card .failed-badge {
+  color: var(--err);
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 	import { t } from '$lib/i18n.svelte';
 
@@ -15,7 +16,7 @@ interface Props {
 
 <header class="header">
 	<div class="header-left">
-		<a class="logo" href="/" title={t('shell.brand')}>
+		<a class="logo" href={resolve('/')} title={t('shell.brand')}>
 			{t('shell.brand')}
 		</a>
 		{#if crumb}
@@ -27,13 +28,13 @@ interface Props {
 			</div>
 		{/if}
 		<nav class="top-nav" aria-label={t('nav.primary')}>
-			<a class="nav-link" class:active={active === 'canvas'} href="/canvas">{t('nav.canvas')}</a>
-			<a class="nav-link" class:active={active === 'projects'} href="/">{t('nav.projects')}</a>
-			<a class="nav-link" class:active={active === 'build-scene'} href="/build-scene">{t('nav.buildScene')}</a>
-			<a class="nav-link" class:active={active === 'library'} href="/library">{t('nav.library')}</a>
-			<a class="nav-link" class:active={active === 'agents'} href="/agents">{t('nav.agents')}</a>
-			<a class="nav-link" class:active={active === 'models'} href="/models">{t('nav.models')}</a>
-			<a class="nav-link" class:active={active === 'settings'} href="/settings">{t('nav.settings')}</a>
+			<a class="nav-link" class:active={active === 'canvas'} href={resolve('/canvas')}>{t('nav.canvas')}</a>
+			<a class="nav-link" class:active={active === 'projects'} href={resolve('/')}>{t('nav.projects')}</a>
+			<a class="nav-link" class:active={active === 'build-scene'} href={resolve('/build-scene')}>{t('nav.buildScene')}</a>
+			<a class="nav-link" class:active={active === 'library'} href={resolve('/library')}>{t('nav.library')}</a>
+			<a class="nav-link" class:active={active === 'agents'} href={resolve('/agents')}>{t('nav.agents')}</a>
+			<a class="nav-link" class:active={active === 'models'} href={resolve('/models')}>{t('nav.models')}</a>
+			<a class="nav-link" class:active={active === 'settings'} href={resolve('/settings')}>{t('nav.settings')}</a>
 		</nav>
 	</div>
 	<div class="header-right">

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import { createMutation, createQuery } from '@tanstack/svelte-query';
 	import {
 		playgroundApi,
@@ -137,9 +138,6 @@
 	const projectList = $derived(($projectsQuery.data ?? []) as Project[]);
 
 	// Five-stage workbench URL contract: images land on 素材资产, clips on 镜头脚本.
-	const stageLink = $derived(
-		attached ? `/workbench/${attached.projectId}?stage=${isVideo ? 'shot' : 'assets'}` : '',
-	);
 </script>
 
 <div class="attach">
@@ -147,7 +145,7 @@
 		<div class="attached" role="status">
 			<span class="attached-check" aria-hidden="true"><Icon name="check" size={14} /></span>
 			<span class="attached-text">{t('attach.addedTo')} <strong>{attached.title}</strong></span>
-			<a class="attached-link" href={stageLink}>{t('attach.viewInProject')}</a>
+			<a class="attached-link" href={resolve(`/workbench/${attached.projectId}?stage=${isVideo ? 'shot' : 'assets'}`)}>{t('attach.viewInProject')}</a>
 			<button
 				class="attached-dismiss"
 				type="button"
@@ -173,7 +171,7 @@
 				<span class="field-label">{t('attach.projectField')}</span>
 				<select class="field-select" bind:value={projectId}>
 					<option value="">{t('attach.selectProject')}</option>
-					{#each projectList as p}
+					{#each projectList as p (p.id)}
 						<option value={p.id}>{p.title}</option>
 					{/each}
 				</select>
@@ -194,7 +192,7 @@
 						<span class="field-label">{t('attach.characterField')}</span>
 						<select class="field-select" bind:value={characterId} disabled={projectId === '' || loadingTargets}>
 							<option value="">{t('attach.selectCharacter')}</option>
-							{#each characters as c}
+							{#each characters as c (c.id)}
 								<option value={c.id}>{c.name}</option>
 							{/each}
 						</select>
@@ -207,7 +205,7 @@
 						<span class="field-label">{t('attach.locationField')}</span>
 						<select class="field-select" bind:value={locationId} disabled={projectId === '' || loadingTargets}>
 							<option value="">{t('attach.selectLocation')}</option>
-							{#each locations as loc}
+							{#each locations as loc (loc.id)}
 								<option value={loc.id}>{loc.name}</option>
 							{/each}
 						</select>
@@ -232,7 +230,7 @@
 					<span class="field-label">{t('attach.sceneField')}</span>
 					<select class="field-select" bind:value={sceneId} disabled={projectId === '' || loadingTargets}>
 						<option value="">{t('attach.selectScene')}</option>
-						{#each scenes as s}
+						{#each scenes as s (s.id)}
 							<option value={s.id}>#{s.order_index} {s.heading || t('attach.scene')}</option>
 						{/each}
 					</select>

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

@@ -229,6 +229,7 @@
 
 {#if inputs.length === 0}
 	<p class="muted">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -- This fixed key comes only from the seven bundled translation dictionaries, without interpolation or remote overrides. Retain the existing HTML-capable translation contract. -->
 		{@html t('cdf.noInputs')}
 	</p>
 {:else}
@@ -381,7 +382,8 @@
 									}}
 								>
 									<option value="">{t('cdf.chooseAsset')}</option>
-									{#each assetOptions as opt}
+									<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+									{#each assetOptions as opt, i (i)}
 										<option value={opt.path}>{opt.label}</option>
 									{/each}
 								</select>
@@ -422,7 +424,8 @@
 								}}
 							>
 								<option value="">{t('cdf.chooseAsset')}</option>
-								{#each assetOptions as opt}
+								<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+								{#each assetOptions as opt, i (i)}
 									<option value={opt.path}>{opt.label}</option>
 								{/each}
 							</select>
@@ -453,7 +456,8 @@
 							}}
 						>
 							<option value="">{t('cdf.chooseAsset')}</option>
-							{#each assetOptions as opt}
+							<!-- Asset paths may repeat; option selection belongs to the parent value. Keep positional reuse. -->
+							{#each assetOptions as opt, i (i)}
 								<option value={opt.path}>{opt.label}</option>
 							{/each}
 						</select>
@@ -522,7 +526,7 @@
 	}
 	.role {
 		font-weight: 600;
-		color: var(--accent, #a78bfa);
+		color: var(--accent);
 		font-size: 11px;
 		margin-left: 6px;
 		font-family: ui-monospace, monospace;
@@ -567,7 +571,7 @@
 	input.invalid:focus-visible,
 	textarea.invalid:focus-visible,
 	select.invalid:focus-visible {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
+		box-shadow: 0 0 0 3px var(--err-soft);
 	}
 	.error-msg {
 		font-size: 11px;
@@ -607,7 +611,7 @@
 	}
 	.clear:hover {
 		color: var(--error);
-		border-color: rgba(239, 68, 68, 0.4);
+		border-color: var(--err-line);
 	}
 	.clear:focus-visible {
 		outline: 2px solid var(--accent);

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

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

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

@@ -96,8 +96,8 @@
 				<button
 					class="tool"
 					type="button"
-aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
-				title={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
+					aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
+					title={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					onclick={() => (zoomed = !zoomed)}
 				>
 					<Icon name="zoom-in" size={17} />
@@ -108,7 +108,9 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					class="tool"
 					type="button"
 					aria-label={frameBusy ? t('lastFrame.exporting') : t('lastFrame.export')}
-					title={frameBusy ? t('lastFrame.exporting') : `${t('lastFrame.export')} · ${t('lastFrame.hint')}`}
+					title={frameBusy
+						? t('lastFrame.exporting')
+						: `${t('lastFrame.export')} · ${t('lastFrame.hint')}`}
 					disabled={frameBusy}
 					aria-busy={frameBusy}
 					onclick={(e) => {
@@ -127,6 +129,7 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 				class="tool"
 				href={src}
 				download={downloadName}
+				rel="external"
 				aria-label={t('lightbox.downloadMedia')}
 				title={t('lightbox.download')}
 				onclick={(e) => e.stopPropagation()}
@@ -179,9 +182,8 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 					{alt}
 					kind="video"
 					label={t('lightbox.videoUnavailable')}
-					autoplay
 					controls
-					preload="auto"
+					preload="metadata"
 				/>
 			</div>
 		{:else}
@@ -207,7 +209,7 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 			{:else}
 				{t('lightbox.clickToZoom')} · {t('lightbox.closeHint')} ·
 			{/if}
-			<a href={src} target="_blank" rel="noopener" onclick={(e) => e.stopPropagation()}
+			<a href={src} target="_blank" rel="noopener external" onclick={(e) => e.stopPropagation()}
 				>{t('lightbox.openOriginal')}</a
 			>
 		</p>
@@ -237,7 +239,7 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 	}
 	.counter {
 		font-size: 12px;
-		color: rgba(255, 255, 255, 0.65);
+		color: color-mix(in srgb, var(--on-media) 65%, transparent);
 		margin-right: 4px;
 		font-variant-numeric: tabular-nums;
 	}
@@ -249,13 +251,13 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 		height: 40px;
 		border: none;
 		border-radius: 999px;
-		background: rgba(255, 255, 255, 0.12);
-		color: #fff;
+		background: color-mix(in srgb, var(--on-media) 12%, transparent);
+		color: var(--on-media);
 		cursor: pointer;
 		transition: background 0.15s;
 	}
 	.tool:hover {
-		background: rgba(255, 255, 255, 0.22);
+		background: color-mix(in srgb, var(--on-media) 22%, transparent);
 	}
 	.tool:focus-visible {
 		outline: 2px solid var(--accent);
@@ -272,13 +274,13 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 		height: 44px;
 		border: none;
 		border-radius: 999px;
-		background: rgba(255, 255, 255, 0.1);
-		color: #fff;
+		background: color-mix(in srgb, var(--on-media) 10%, transparent);
+		color: var(--on-media);
 		cursor: pointer;
 		transition: background 0.15s;
 	}
 	.nav:hover {
-		background: rgba(255, 255, 255, 0.22);
+		background: color-mix(in srgb, var(--on-media) 22%, transparent);
 	}
 	.nav:focus-visible {
 		outline: 2px solid var(--accent);
@@ -334,16 +336,16 @@ aria-label={zoomed ? t('lightbox.fitToScreen') : t('lightbox.zoom100')}
 	.caption {
 		margin: 0;
 		font-size: 13px;
-		color: rgba(255, 255, 255, 0.85);
+		color: color-mix(in srgb, var(--on-media) 85%, transparent);
 		max-width: min(96vw, 720px);
 		text-align: center;
 	}
 	.hint {
 		margin: 0;
 		font-size: 12px;
-		color: rgba(255, 255, 255, 0.55);
+		color: color-mix(in srgb, var(--on-media) 55%, transparent);
 	}
 	.hint a {
-		color: rgba(255, 255, 255, 0.85);
+		color: color-mix(in srgb, var(--on-media) 85%, transparent);
 	}
 </style>

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

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

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

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

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

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

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

@@ -8,18 +8,11 @@
 		type Toast,
 	} from '$lib/toast';
 	import Icon from '$lib/components/ui/Icon.svelte';
-	import type { IconName } from '$lib/components/ui/icons';
 	import { t } from '$lib/i18n.svelte';
 
 	let items = $state<Toast[]>([]);
 
 	onMount(() => subscribeToasts((next) => (items = next)));
-
-	const kindIcon: Record<Toast['kind'], IconName> = {
-		success: 'check',
-		error: 'alert',
-		info: 'info',
-	};
 </script>
 
 {#if items.length}
@@ -27,6 +20,7 @@
 		{#each items as toast (toast.id)}
 			<div
 				class="toast {toast.kind}"
+				class:leaving={toast.leaving}
 				role="status"
 				onmouseenter={() => pauseToast(toast.id)}
 				onmouseleave={() => resumeToast(toast.id)}
@@ -35,15 +29,18 @@
 			>
 				<span class="badge" aria-hidden="true">
 					<span class="dot"></span>
-					<Icon name={kindIcon[toast.kind]} size={15} />
 				</span>
-			<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
+				<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,35 +54,45 @@
 {/if}
 
 <style>
-	/* §四.5 Toast：右下角堆叠，220ms 上移入场；成功绿点 / 失败红点。 */
+	/* Shared host; visual values come from the approved sample tokens. */
 	.toast-host {
 		position: fixed;
-		right: 24px;
-		bottom: 24px;
+		right: var(--toast-right);
+		bottom: var(--toast-bottom);
 		/* Above every overlay, incl. the 10000 lightbox, so feedback stays visible. */
 		z-index: 10001;
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
-		max-width: min(400px, calc(100vw - 32px));
+		max-width: min(var(--toast-max-width), calc(100vw - 32px));
 		pointer-events: none;
 	}
 	.toast {
+		box-sizing: border-box;
+		font-size: var(--toast-font);
+		line-height: var(--toast-line-height);
 		pointer-events: auto;
 		display: flex;
 		align-items: flex-start;
 		gap: 10px;
-		padding: 12px 14px;
-		border-radius: var(--r-lg);
-		background: var(--float-bg);
-		box-shadow: var(--shadow-float);
-		animation: toast-in var(--d-enter) var(--ease-out);
+		min-width: var(--toast-min-width);
+		max-width: var(--toast-max-width);
+		padding: var(--toast-padding);
+		border-radius: var(--toast-radius);
+		background: var(--toast-bg);
+		border: 1px solid var(--toast-border);
+		box-shadow: var(--toast-shadow);
+		animation: toast-in var(--toast-enter) var(--toast-ease);
+		transition: opacity var(--toast-exit);
+	}
+	.toast.leaving {
+		opacity: 0;
 	}
 	.badge {
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
-		margin-top: 1px;
+		margin-top: var(--toast-dot-top);
 		flex-shrink: 0;
 	}
 	.dot {
@@ -93,6 +100,7 @@
 		height: 7px;
 		border-radius: 50%;
 		background: currentColor;
+		box-shadow: 0 0 8px currentColor;
 	}
 	.toast.success .badge {
 		color: var(--ok);
@@ -105,10 +113,10 @@
 	}
 	.msg {
 		flex: 1;
-		font-size: var(--fs-body);
-		line-height: 1.4;
+		font-size: var(--toast-font);
+		line-height: var(--toast-line-height);
 		color: var(--text-primary);
-		font-weight: 500;
+		font-weight: 400;
 	}
 	/* §四.5: Toast 动作（如撤销）为金色文字 */
 	.action {
@@ -158,7 +166,8 @@
 	@keyframes toast-in {
 		from {
 			opacity: 0;
-			transform: translateY(8px);
+			transform: translateY(var(--toast-enter-y))
+				scale(var(--toast-enter-scale));
 		}
 		to {
 			opacity: 1;

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

@@ -48,7 +48,7 @@
     onchanged,
   }: Props = $props();
 
-  const client = useQueryClient();
+  useQueryClient();
 
   let endpointId = $state('');
   let values = $state<Record<string, string | number>>({});
@@ -146,7 +146,7 @@
     if (stageLog[stageLog.length - 1] !== line) stageLog = [...stageLog, line];
   });
   $effect(() => {
-    stageLog.length;
+    void stageLog.length;
     if (logBox) logBox.scrollTop = logBox.scrollHeight;
   });
 
@@ -447,7 +447,7 @@
                 href={assetUrl(path)}
                 download
                 target="_blank"
-                rel="noreferrer"
+                rel="noreferrer external"
                 title={t('wft.download')}
               >
                 <SafeMedia
@@ -643,9 +643,9 @@
     height: 7px;
     border-radius: 50%;
     background: var(--run);
-    animation: wft-breathe 1.6s ease-in-out infinite;
+    animation: var(--decorative-loop-name, motion-workflowtestdialog-wft-breathe) 1.6s ease-in-out infinite;
   }
-  @keyframes wft-breathe {
+  @keyframes -global-motion-workflowtestdialog-wft-breathe {
     0%,
     100% {
       opacity: 1;

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

@@ -132,7 +132,7 @@
 		border-color: color-mix(in srgb, var(--success) 30%, var(--border));
 	}
 	.artifact.failed {
-		border-color: rgba(239, 68, 68, 0.4);
+		border-color: var(--err-line);
 	}
 	.meta {
 		display: flex;
@@ -192,9 +192,9 @@
 		flex-shrink: 0;
 		border-radius: 9999px;
 		background: var(--warning);
-		animation: pulse 1.2s ease-in-out infinite;
+		animation: var(--decorative-loop-name, motion-agentartifactcard-pulse) 1.2s ease-in-out infinite;
 	}
-	@keyframes pulse {
+	@keyframes -global-motion-agentartifactcard-pulse {
 		0%,
 		100% {
 			opacity: 0.4;
@@ -249,12 +249,12 @@
 		width: 44px;
 		height: 44px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.55);
-		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
+		background: var(--media-scrim);
+		box-shadow: 0 0 0 1px var(--on-media-line);
 	}
 	.play-badge :global(svg) {
 		position: absolute;
-		color: #fff;
+		color: var(--on-media);
 		fill: currentColor;
 		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
 		margin-left: 2px;

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

@@ -10,6 +10,7 @@
 	import { t } from '$lib/i18n.svelte';
 
 	interface Props {
+        studio?: boolean;
 		messages: AgentMessage[];
 		/** In-flight tool calls for the current turn (from agent.tool SSE). */
 		liveTools: { tool: string; args?: Record<string, unknown> | null; result?: unknown; phase: 'running' | 'done' | 'error' }[];
@@ -31,6 +32,7 @@
 	}
 
 	let {
+        studio = false,
 		messages,
 		liveTools,
 		streaming,
@@ -46,6 +48,21 @@
 	let listEl = $state<HTMLDivElement | null>(null);
 	let pinned = $state(true);
 
+    // A user message starts a turn; keep different named assistants distinct.
+    const studioGroups = $derived.by(() => {
+        const groups: AgentMessage[][] = [];
+        for (const message of messages) {
+            if (!['user', 'assistant', 'tool'].includes(message.role)) continue;
+            const previous = groups.at(-1);
+            const author = previous?.find(m => m.role === 'assistant')?.agent_name;
+            if (!previous || message.role === 'user' || previous[0].role === 'user' ||
+                (message.role === 'assistant' && author !== undefined && message.agent_name !== author)) {
+                groups.push([message]);
+            } else previous.push(message);
+        }
+        return groups;
+    });
+
 	// Derived tool rows carry no status — infer failure from the result shape,
 	// same as the live SSE path does.
 	function toolPhase(m: AgentMessage): 'done' | 'error' {
@@ -61,6 +78,7 @@
 
 	/** Later tool results (wait_for_jobs) often have the finished status + paths. */
 	const trailJobsById = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Each derivation rebuilds this tool-result lookup from messages; only the completed Map escapes, with no later mutation.
 		const map = new Map<number, ArtifactJob>();
 		for (const row of messages) {
 			if (row.role !== 'tool' || !row.tool_result || typeof row.tool_result !== 'object') continue;
@@ -188,6 +206,35 @@
 </script>
 
 <div class="chat" bind:this={listEl} onscroll={onScroll}>
+    {#if studio}
+      {#if loading}<p class="studio-empty">{t('agentChat.loading')}</p>{/if}
+      {#each studioGroups as group (group[0].id)}
+          <div class="studio-msg" class:me={group[0].role==='user'}>
+            <div class="studio-avatar" title={group[0].role==='user'?'我':agentDisplayName(group[0].agent_name)}>{#if group[0].role==='user'}我{:else}<Icon name="project-agent" size={14}/>{/if}</div>
+            <div class="studio-message-body">
+              {#each group as m (m.id)}
+                {#if m.role==='tool'}
+                  <AgentToolCard studio name={m.tool_name??'tool'} args={m.tool_args} result={m.tool_result} phase={toolPhase(m)}/>
+                  {#each artifactJobs(m) as job(job.id)}<AgentArtifactCard {job}/>{/each}
+                {:else}
+                  {#if m.reasoning}<ReasoningPanel reasoning={m.reasoning}/>{/if}
+<div class="studio-bubble" data-message-id={m.id} class:failed={m.status==='error'||m.status==='cancelled'}>{#if m.status==='steering'}<small>{t('agentChat.steering')}</small>{/if}{#each m.attachments??[] as a (a.path)}<a href={assetUrl(a.path)??'#'} target="_blank" rel="noopener external">{a.name}</a>{/each}{#each bubbleParts(m.content,(m.mentions??[]) as WorkflowMention[]) as part,i (`${i}-${part.type}`)}{#if part.type==='chip'}<span class="wf-chip">{part.text}</span>{:else}{part.text}{/if}{/each}</div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+      {/each}
+      {#if lastQuestion && !running}<div class="question-card"><p>{lastQuestion.question}</p><div class="question-options">{#each lastQuestion.options as opt(opt)}<button type="button" class="question-option" onclick={()=>onAnswer?.(opt,lastQuestion.scope,lastQuestion.questionSeq)}>{opt}</button>{/each}</div></div>{/if}
+      {#if running && (liveTools.length || streamingReasoning || streaming)}
+        <div class="studio-msg"><div class="studio-avatar"><Icon name="project-agent" size={14}/></div><div class="studio-message-body">
+          {#each liveTools as tool,i(i)}<AgentToolCard studio name={tool.tool} args={tool.args} result={tool.result} phase={tool.phase}/>{/each}
+          {#if streamingReasoning}<ReasoningPanel reasoning={streamingReasoning}/>{/if}
+          {#if streaming}<div class="studio-bubble">{streaming}</div>{/if}
+        </div></div>
+      {/if}
+      {#if !loading&&!messages.length&&!running}<p class="studio-empty">{t('agentChat.emptyHint')}</p>{/if}
+    {:else}
+
 	{#if loading}
 		<div class="empty">
 			<p class="empty-hint">{t('agentChat.loading')}</p>
@@ -328,9 +375,20 @@
 			</div>
 		</div>
 	{/if}
+    {/if}
 </div>
 
 <style>
+    .studio-msg {display:flex;gap:10px;max-width:760px;}
+    .studio-msg.me {align-self:flex-end;flex-direction:row-reverse;}
+    .studio-avatar {width:28px;height:28px;border-radius:var(--agent-radius-8);flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--sc-agent) 18%,transparent);color:var(--sc-agent);}
+    .studio-msg.me .studio-avatar {background:var(--bg-3);color:var(--tx-2);}
+    .studio-message-body {flex:var(--agent-message-flex);display:flex;flex-direction:column;gap:10px;min-width:0;}
+    .studio-bubble {padding:10px 13px;border-radius:var(--agent-bubble-radius);background:var(--bg-2);border:1px solid var(--line);font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word;}
+    .studio-msg.me .studio-bubble {background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 25%,transparent);}
+    .studio-bubble.failed {color:var(--err);border-color:var(--err);}
+    .studio-empty {color:var(--tx-3);font-size:12px;}
+
 	.chat {
 		flex: 1;
 		min-height: 0;
@@ -341,7 +399,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 14px;
-		padding: 4px 4px 12px;
+		padding: var(--chat-padding, 4px 4px 12px);
 	}
 	.empty {
 		margin: auto;
@@ -430,38 +488,38 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 6px;
-		font-size: var(--fs-mini);
-		font-weight: 700;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
+		font-size: var(--chat-tag-size, var(--fs-mini));
+		font-weight: var(--chat-tag-weight, 700);
+		letter-spacing: var(--chat-tag-spacing, 0.06em);
+		text-transform: var(--chat-tag-transform, uppercase);
 		color: var(--agent, var(--text-2));
 		margin-bottom: 4px;
 		padding-left: 2px;
 	}
 	.agent-dot {
-		width: 8px;
-		height: 8px;
+		width: var(--chat-dot-size, 8px);
+		height: var(--chat-dot-size, 8px);
 		border-radius: 999px;
 		flex-shrink: 0;
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--agent, var(--text-2)) 25%, transparent);
+		box-shadow: var(--chat-identity-shadow, 0 0 0 2px color-mix(in srgb, var(--agent, var(--text-2)) 25%, transparent));
 	}
 	.reasoning-wrap {
 		margin-bottom: 4px;
 		max-width: 86%;
 	}
 	.bubble {
-		max-width: 86%;
-		border-radius: var(--r-lg);
-		padding: 10px 14px;
-		font-size: 13.5px;
+		max-width: var(--chat-bubble-width, 86%);
+		border-radius: var(--chat-bubble-radius, var(--r-lg));
+		padding: var(--chat-bubble-padding, 10px 14px);
+		font-size: var(--chat-bubble-font, 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: var(--bg-3);
-		border: 1px solid var(--line);
+		background: var(--chat-user-bg, var(--bg-3));
+		border: 1px solid var(--chat-user-border, var(--line));
 		color: var(--text);
 	}
 	.user-bubble.steering {
@@ -516,7 +574,7 @@
 	.assistant-bubble {
 		background: var(--bg-2);
 		border: 1px solid var(--line);
-		border-left: 3px solid var(--agent, var(--text-2));
+		border-left: var(--chat-agent-border-width, 3px) solid var(--chat-agent-border, var(--agent, var(--text-2)));
 		color: var(--text);
 	}
 	.question-card {
@@ -606,10 +664,10 @@
 		height: 14px;
 		margin-left: 2px;
 		background: var(--run);
-		animation: blink 1s step-end infinite;
+		animation: var(--decorative-loop-name, motion-agentchat-blink) 1s step-end infinite;
 		vertical-align: text-bottom;
 	}
-	@keyframes blink {
+	@keyframes -global-motion-agentchat-blink {
 		50% {
 			opacity: 0;
 		}
@@ -623,13 +681,14 @@
 	}
 	/* 进行中指示 = 信号青（§1.3），不占金色。 */
 	.pulse {
+    opacity: var(--thinking-opacity, 1);
 		width: 8px;
 		height: 8px;
 		border-radius: 999px;
 		background: var(--run);
-		animation: pulse 1.1s ease-in-out infinite;
+		animation: var(--decorative-loop-name, motion-agentchat-pulse) 1.1s ease-in-out infinite;
 	}
-	@keyframes pulse {
+	@keyframes -global-motion-agentchat-pulse {
 		0%,
 		100% {
 			opacity: 0.35;

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

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

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

@@ -84,9 +84,9 @@
 		color: var(--text-muted);
 	}
 	.icon-wrap.spinning {
-		animation: spin 1.5s linear infinite;
+		animation: var(--decorative-loop-name, motion-agentplanpanel-spin) 1.5s linear infinite;
 	}
-	@keyframes spin {
+	@keyframes -global-motion-agentplanpanel-spin {
 		to {
 			transform: rotate(360deg);
 		}
@@ -155,9 +155,9 @@
 		width: 10px;
 		height: 10px;
 		border-radius: 9999px;
-		animation: pulse 1.1s ease-in-out infinite;
+		animation: var(--decorative-loop-name, motion-agentplanpanel-pulse) 1.1s ease-in-out infinite;
 	}
-	@keyframes pulse {
+	@keyframes -global-motion-agentplanpanel-pulse {
 		0%,
 		100% {
 			opacity: 0.35;

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

@@ -28,6 +28,7 @@
 
 	const sandbox = $derived(sessions.filter((s) => s.project_id == null));
 	const grouped = $derived.by(() => {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Local grouping accumulator is consumed as an array in this derivation; sessions drive recomputation, not Map writes.
 		const map = new Map<number, { project: AgentSession['project']; items: AgentSession[] }>();
 		for (const s of sessions) {
 			if (s.project_id == null) continue;
@@ -200,8 +201,8 @@
 	.sidebar {
 		width: 240px;
 		flex-shrink: 0;
-		border-right: 1px solid var(--border);
-		background: var(--bg-surface);
+		border-right: 1px solid var(--line);
+		background: var(--bg-1);
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
@@ -242,8 +243,8 @@
 		justify-content: center;
 		width: 32px;
 		height: 32px;
-		border: 1px dashed var(--border);
-		border-radius: var(--radius-sm);
+		border: 0;
+		border-radius: var(--r-sm);
 		background: transparent;
 		color: var(--text-secondary);
 		cursor: pointer;
@@ -266,32 +267,34 @@
 		min-height: 0;
 	}
 	.rail-dot {
-		width: 10px;
-		height: 10px;
-		border-radius: 50%;
-		border: 1px solid var(--border);
-		background: var(--bg-elevated);
+		width: 32px;
+		height: 32px;
+		display: grid;
+		place-items: center;
+		border: 0;
+		border-radius: var(--r-sm);
+		background: transparent;
 		cursor: pointer;
 		padding: 0;
 	}
+	.rail-dot::after {
+		content: '';
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--tx-3);
+	}
 	.rail-dot:hover {
-		border-color: var(--accent);
+		background: rgb(var(--ink) / 0.05);
 	}
 	.rail-dot.active {
-		background: var(--accent);
-		border-color: var(--accent);
+		background: color-mix(in srgb, var(--sc-agent) 12%, transparent);
 	}
-	.rail-dot.run {
-		animation: rail-pulse 1.4s ease-in-out infinite;
+	.rail-dot.active::after {
+		background: var(--sc-agent);
 	}
-	@keyframes rail-pulse {
-		0%,
-		100% {
-			box-shadow: 0 0 0 0 var(--accent-glow);
-		}
-		50% {
-			box-shadow: 0 0 0 5px transparent;
-		}
+	.rail-dot.run::after {
+		background: var(--ok);
 	}
 	.new-chat {
 		display: flex;
@@ -398,9 +401,10 @@
 	.dot.run {
 		background: var(--warning);
 		opacity: 1;
-		animation: pulse 1.1s ease-in-out infinite;
+		animation: var(--decorative-loop-name, motion-agentsessionsidebar-pulse)
+			1.1s ease-in-out infinite;
 	}
-	@keyframes pulse {
+	@keyframes -global-motion-agentsessionsidebar-pulse {
 		0%,
 		100% {
 			opacity: 0.35;
@@ -431,6 +435,6 @@
 	}
 	.del:hover {
 		color: var(--error);
-		background: rgba(239, 68, 68, 0.12);
+		background: var(--err-soft);
 	}
 </style>

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

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

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

@@ -76,9 +76,9 @@
 		color: var(--text-muted);
 	}
 	.icon-wrap.spinning {
-		animation: spin 1.5s linear infinite;
+		animation: var(--decorative-loop-name, motion-reasoningpanel-spin) 1.5s linear infinite;
 	}
-	@keyframes spin {
+	@keyframes -global-motion-reasoningpanel-spin {
 		to {
 			transform: rotate(360deg);
 		}
@@ -118,10 +118,10 @@
 		height: 12px;
 		margin-left: 1px;
 		background: var(--accent);
-		animation: blink 1s step-end infinite;
+		animation: var(--decorative-loop-name, motion-reasoningpanel-blink) 1s step-end infinite;
 		vertical-align: text-bottom;
 	}
-	@keyframes blink {
+	@keyframes -global-motion-reasoningpanel-blink {
 		50% {
 			opacity: 0;
 		}

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

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

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

@@ -1,67 +1,74 @@
 /**
- * Agent identity palette: a stable display name + accent color per agent.
+ * Agent identity palette: a stable display name + identity step per agent.
  *
- * 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.
+ * Identity answers "who is speaking" only (avatar dot / name / bubble tint)
+ * — it never expresses task status. HEL-685 无彩化：全部改为 app.css 的
+ * 显影灰阶实色阶 --id-1..5（与全站 --avatar-1..5 同一身份语言），
+ * 不再使用彩色身份色；默认主循环智能体保持中性 --id-4。
  */
 
-export const DEFAULT_AGENT_NAME = 'Calliope';
+export const DEFAULT_AGENT_NAME = "Calliope";
 
 // Fixed identity map (keyed by the raw agent_name the backend emits).
+// Step numbers mirror the avatar five-set used across the app
+// (models/agents/home project cards).
 const IDENTITIES: Record<string, { label: string; color: string }> = {
-	planner: { label: 'Planner', color: '#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' },
-	视觉设计: { label: '视觉设计', color: '#5b8def' },
-	分镜设计: { label: '分镜设计', color: '#3fb97f' },
-	素材资产: { label: '素材资产', color: '#b98be0' },
-	镜头脚本: { label: '镜头脚本', color: '#d98e6a' },
+  planner: { label: "Planner", color: "var(--id-2)" },
+  "story-agent": { label: "Story Agent", color: "var(--id-3)" },
+  "script-agent": { label: "Script Agent", color: "var(--id-1)" },
+  "assets-agent": { label: "Assets Agent", color: "var(--id-4)" },
+  "video-agent": { label: "Video Agent", color: "var(--id-5)" },
+  "research-agent": { label: "Research Agent", color: "var(--id-4)" },
+  // The five named agents (HEL-613) — the runner stamps their zh names on
+  // named-session replies; steps mirror the avatar five-set.
+  剧本创作: { label: "剧本创作", color: "var(--id-1)" },
+  视觉设计: { label: "视觉设计", color: "var(--id-2)" },
+  分镜设计: { label: "分镜设计", color: "var(--id-3)" },
+  素材资产: { label: "素材资产", color: "var(--id-4)" },
+  镜头脚本: { label: "镜头脚本", color: "var(--id-5)" },
 };
 
-// Fallback palette for unknown names (stable hash → deterministic color),
-// narrowed to the avatar identity family + neutral slate (spec v2 §十.4).
-const FALLBACK_COLORS = ['#5b8def', '#3fb97f', '#e8a33d', '#b98be0', '#d98e6a', '#8fa3c8'];
+// Fallback palette for unknown names (stable hash → deterministic step),
+// spanning the same five grayscale identity steps.
+const FALLBACK_COLORS = [
+  "var(--id-1)",
+  "var(--id-2)",
+  "var(--id-3)",
+  "var(--id-4)",
+  "var(--id-5)",
+];
 
 function hashString(s: string): number {
-	let h = 0;
-	for (let i = 0; i < s.length; i++) {
-		h = (h * 31 + s.charCodeAt(i)) >>> 0;
-	}
-	return h;
+  let h = 0;
+  for (let i = 0; i < s.length; i++) {
+    h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  }
+  return h;
 }
 
-/** Neutral slate (--text-2) — the default agent borrows no signal color. */
-export const DEFAULT_AGENT_COLOR = '#aab2c5';
+/** Neutral step (--id-4) — the default agent borrows no signal color. */
+export const DEFAULT_AGENT_COLOR = "var(--id-4)";
 
 export function agentDisplayName(name: string | null | undefined): string {
-	const key = (name || '').trim().toLowerCase();
-	if (!key) return DEFAULT_AGENT_NAME;
-	return IDENTITIES[key]?.label ?? prettyName(name!);
+  const key = (name || "").trim().toLowerCase();
+  if (!key) return DEFAULT_AGENT_NAME;
+  return IDENTITIES[key]?.label ?? prettyName(name!);
 }
 
 export function agentColor(name: string | null | undefined): string {
-	const key = (name || '').trim().toLowerCase();
-	if (!key) return DEFAULT_AGENT_COLOR;
-	const identity = IDENTITIES[key];
-	if (identity) return identity.color;
-	return FALLBACK_COLORS[hashString(key) % FALLBACK_COLORS.length];
+  const key = (name || "").trim().toLowerCase();
+  if (!key) return DEFAULT_AGENT_COLOR;
+  const identity = IDENTITIES[key];
+  if (identity) return identity.color;
+  return FALLBACK_COLORS[hashString(key) % FALLBACK_COLORS.length];
 }
 
 function prettyName(raw: string): string {
-	// "story-agent" → "Story Agent", "assets-agent" → "Assets Agent"
-	const title = raw
-		.split(/[-_\s]+/)
-		.filter(Boolean)
-		.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-		.join(' ');
-	return title || DEFAULT_AGENT_NAME;
+  // "story-agent" → "Story Agent", "assets-agent" → "Assets Agent"
+  const title = raw
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+  return title || DEFAULT_AGENT_NAME;
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+/** Abbreviations in the approved sample, applied only to declared metadata. */
+const families: Record<string, [string, string]> = {
+  Qwen: ["Qwen", "qwen"],
+  Krea2: ["Kr2", "krea"],
+  Flux: ["FLX", "flux"],
+  "Z-Image": ["Z", "zimg"],
+  "MiniMax-H3": ["H3", "h3"],
+  Wan: ["Wan", "wan"],
+  Anima: ["Ani", "anima"],
+};
+export function workflowFamily(family: string | null | undefined) {
+  const entry = family ? families[family] : undefined;
+  return {
+    label: entry?.[0] ?? family?.slice(0, 3) ?? "—",
+    color: entry ? `var(--desk-family-${entry[1]})` : "var(--scene)",
+  };
+}

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

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import { t } from '$lib/i18n.svelte';
 	import { backHref, type DeskContext } from './context';
 
 	/**
 	 * 上下文条 (spec-v2 §3.3): the desk was opened from a creation stage.
-	 * Says where from, and plainly that takes stay in the desk feed — the
-	 * desk's generate call has no shot/asset link to fill back.
+	 * Says where from. With a full source identity (HEL-684) results can
+	 * be flowed back per take from the result card; otherwise the old
+	 * note stands — results stay in the desk feed, nothing is written back.
 	 */
 	interface Props {
 		ctx: DeskContext;
@@ -17,6 +19,7 @@
 	let { ctx, projectTitle, onDismiss }: Props = $props();
 
 	const stageName = $derived(t(`workbench.stage.${ctx.stage}`));
+	const canFlowBack = $derived(!!ctx.sourceKind && !!ctx.sourceId);
 </script>
 
 <div class="context-bar" role="status">
@@ -24,8 +27,10 @@
 	<span class="from">
 		<b>{t('desk.ctxFrom', { project: projectTitle })}</b>{#if ctx.label}&nbsp;· {ctx.label}{/if}
 	</span>
-	<span class="note">{t('desk.ctxNoBackfill', { stage: stageName })}</span>
-	<a class="a-btn ghost xs back" href={backHref(ctx)}>{t('desk.ctxBack', { stage: stageName })}</a>
+	<span class="note">
+		{canFlowBack ? t('desk.ctxBackfill', { stage: stageName }) : t('desk.ctxNoBackfill', { stage: stageName })}
+	</span>
+	<a class="a-btn ghost xs back" href={resolve(backHref(ctx))}>{t('desk.ctxBack', { stage: stageName })}</a>
 	<button type="button" class="a-btn ghost xs" aria-label={t('desk.ctxDismiss')} onclick={onDismiss}>
 		<Icon name="close" size={12} />
 	</button>

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

@@ -1,12 +1,17 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
+	import ImageLightbox from '$lib/components/ImageLightbox.svelte';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import { assetUrl } from '$lib/api';
 	import type { Job, Workflow } from '$lib/comfy/types';
 	import { progressFor } from '$lib/jobProgress';
 	import { jobStatusInfo } from '$lib/jobStatus';
 	import { parseDbTs } from '$lib/dbtime';
-	import { clearOutputMissing, markOutputMissing, missingOutputsOf } from '$lib/missingOutputs.svelte';
+	import {
+		clearOutputMissing,
+		markOutputMissing,
+		missingOutputsOf,
+	} from '$lib/missingOutputs.svelte';
 	import { t } from '$lib/i18n.svelte';
 	import { exportLastFrame } from '$lib/media/lastFrame';
 	import { usageLabel } from './schema';
@@ -18,11 +23,13 @@
 	 * ≥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,
+	 * ↑↓/J/K 即时无动画), video playback is always explicit,
 	 * failed takes get 重试, and a done take whose files no longer load
 	 * shows the amber 文件缺失 state with 用相同参数重做 / 移除记录.
 	 */
 	interface Props {
+		main?: boolean;
+		comparePath?: string | null;
 		tab: 'result' | 'params';
 		job: Job | null;
 		wf: Workflow | undefined;
@@ -34,19 +41,20 @@
 		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. */
+		/** The stage <video> element, for explicit playback controls. */
 		videoEl?: HTMLVideoElement | null;
 		params: Snippet;
 		onClose: () => void;
 		onReuse: (job: Job) => void;
 		onRetry: (job: Job) => void;
+		onCancel: (job: Job) => void;
 		onSendToSlot: (path: string) => void;
 		onDelete: (job: Job) => void;
 	}
 
 	let {
+		main = false,
+		comparePath = null,
 		tab = $bindable(),
 		job,
 		wf,
@@ -54,18 +62,25 @@
 		open,
 		inactive,
 		canSendToSlot,
-		crossfade,
-		playSignal,
 		videoEl = $bindable(null),
 		params,
 		onClose,
 		onReuse,
 		onRetry,
+		onCancel,
 		onSendToSlot,
 		onDelete,
 	}: Props = $props();
 
 	let outIndex = $state(0);
+	let compare = $state(false),
+		compareAt = $state(50),
+		lightbox = $state(false);
+	$effect(() => {
+		void job?.id;
+		compare = false;
+		lightbox = false;
+	});
 	$effect.pre(() => {
 		void job?.id;
 		outIndex = 0;
@@ -76,16 +91,20 @@
 	// 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 outputs = $derived(
+		job && st?.tone === 'ok' ? job.output_paths.filter((p) => !gonePaths.includes(p)) : [],
+	);
 	const output = $derived(outputs[Math.min(outIndex, outputs.length - 1)] ?? null);
 	const allOutputs = $derived(job && st?.tone === 'ok' ? job.output_paths : []);
 	const video = $derived(!!job && !!output && isVideoOutput(job, output));
 	const wfDeleted = $derived(!!job && job.workflow_id == null);
 	const prompt = $derived(job ? promptOf(job, wf) : '');
 	const inputs = $derived(job ? inputsOf(job, wf) : []);
+	const compareSource = $derived(inputs.find((i) => i.kind === 'image')?.path ?? comparePath);
 	const spec = $derived(job ? specOf(job, wf) : []);
 	const endpoint = $derived(
-		((job?.payload?.endpoint as Record<string, unknown> | undefined)?.name as string | undefined) ?? '',
+		((job?.payload?.endpoint as Record<string, unknown> | undefined)?.name as string | undefined) ??
+			'',
 	);
 	const progress = $derived.by(() => {
 		if (!job || job.status !== 'running') return 0;
@@ -108,25 +127,18 @@
 		dims = `${v.videoWidth}×${v.videoHeight}`;
 	}
 
-	// 完成或点选后自动播放（静音）；键盘切换不触发。
-	$effect(() => {
-		void playSignal;
-		if (inactive || tab !== 'result' || !videoEl) return;
-		videoEl.muted = true;
-		videoEl.play().catch(() => {});
+	let paused = $state(true);
+	$effect.pre(() => {
+		void output;
+		untrack(() => {
+			videoEl?.pause();
+			paused = true;
+		});
 	});
-
-	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}` };
+	function togglePlayback() {
+		if (!videoEl) return;
+		if (videoEl.paused) videoEl.play().catch(() => {});
+		else videoEl.pause();
 	}
 
 	const mediaKey = $derived(`${job?.id ?? 'none'}:${output ?? st?.tone ?? ''}`);
@@ -144,14 +156,23 @@
 	}
 </script>
 
-<aside class="inspector" class:open inert={inactive} aria-label={t('desk.inspector')}>
+<aside class="inspector" class:main class:open inert={inactive} aria-label={t('desk.inspector')}>
 	<div class="tabs">
 		<div class="a-seg" role="group" aria-label={t('desk.inspector')}>
-			<button type="button" aria-pressed={tab === 'result'} onclick={() => (tab = 'result')}>{t('desk.tabResult')}</button>
-			<button type="button" aria-pressed={tab === 'params'} onclick={() => (tab = 'params')}>{t('desk.tabParams')}</button>
+			<button type="button" aria-pressed={tab === 'result'} onclick={() => (tab = 'result')}
+				>{t('desk.tabResult')}</button
+			>
+			<button type="button" aria-pressed={tab === 'params'} onclick={() => (tab = 'params')}
+				>{t('desk.tabParams')}</button
+			>
 		</div>
 		<span class="keys"><span class="a-kbd">]</span>{t('desk.keyInspector')}</span>
-		<button type="button" class="a-btn ghost sm close" aria-label={t('desk.closeInspector')} onclick={onClose}>
+		<button
+			type="button"
+			class="a-btn ghost sm close"
+			aria-label={t('desk.closeInspector')}
+			onclick={onClose}
+		>
 			<Icon name="close" size={14} />
 		</button>
 	</div>
@@ -160,11 +181,17 @@
 		{#if tab === 'params'}
 			{@render params()}
 		{:else if !job || !st}
-			<div class="a-stage stage"><div class="stage-empty">{t('desk.pickTake')}</div></div>
+			<div class="a-stage stage">
+				<div class="stage-empty">
+					<span class="empty-symbol">✳</span><strong>给想象留一个位置。</strong><span class="sub"
+						>在右侧写下描述，或选择一次已有创作。</span
+					>
+				</div>
+			</div>
 		{:else}
 			<div class="a-stage stage">
 				{#key mediaKey}
-					<div class="stage-media" in:xfade out:xfade>
+					<div class="stage-media">
 						{#if output && video}
 							<!-- svelte-ignore a11y_media_has_caption -->
 							<div class="print a-photo">
@@ -173,6 +200,10 @@
 									bind:this={videoEl}
 									src={assetUrl(output)}
 									controls
+									aria-label="生成的视频，使用播放按钮开始播放"
+									onplay={() => (paused = false)}
+									onpause={() => (paused = true)}
+									onended={() => (paused = true)}
 									playsinline
 									preload="metadata"
 									onloadedmetadata={(e) => {
@@ -194,6 +225,13 @@
 									}}
 									onerror={() => output && markOutputMissing(output)}
 								/>
+								{#if main && compare && compareSource}<div
+										class="comparison-layer"
+										style:clip-path={`inset(0 ${100 - compareAt}% 0 0)`}
+									>
+										<img src={assetUrl(compareSource)} alt="对比参考画面" />
+									</div>
+									<div class="comparison-divider" style:left={`${compareAt}%`}></div>{/if}
 							</div>
 						{:else if fileGone}
 							<div class="stage-empty gone">
@@ -205,7 +243,9 @@
 								<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>
+									<div class="a-progress stage-bar" style:--p={progress / 100}>
+										<i></i>
+									</div>
 								{/if}
 							</div>
 						{/if}
@@ -213,6 +253,19 @@
 				{/key}
 			</div>
 
+			{#if output && video}<div class="playback-bar">
+					<button
+						class="a-btn primary sm"
+						onclick={togglePlayback}
+						aria-label={paused ? '播放视频' : '暂停视频'}
+						>{paused ? '▶ 播放视频' : 'Ⅱ 暂停视频'}</button
+					>
+					<span>视频默认暂停，由你控制播放。</span>
+					<button
+						class="a-btn secondary sm"
+						onclick={() => videoEl?.requestFullscreen().catch(() => {})}>全屏查看 ⤢</button
+					>
+				</div>{/if}
 			{#if allOutputs.length > 1}
 				<div class="strip" role="group" aria-label={t('desk.outputs')}>
 					{#each allOutputs as p, i (p)}
@@ -241,23 +294,49 @@
 						<span>{s.label} <b class="mono">{s.value}</b></span>
 					{/if}
 				{/each}
-				<span>{t('desk.elapsed')} <b class="mono">{fmtDur(elapsedSec(job, nowMs))}</b></span>
+				<span
+					>{t('desk.elapsed')}
+					<b class="mono">{fmtDur(elapsedSec(job, nowMs))}</b></span
+				>
 				{#if endpoint}<span>{endpoint}</span>{/if}
 			</div>
 
+			{#if main && compare && output && !video}<div class="compare-controls">
+					<span>{inputs.some((i) => i.kind === 'image') ? '参考图片' : '上一版'}</span><input
+						type="range"
+						min="0"
+						max="100"
+						bind:value={compareAt}
+						aria-label="拖动对比画面"
+					/><span>当前结果</span>
+				</div>{/if}
 			<div class="actions">
+				{#if main && output && !video}<button
+						class="a-btn secondary sm"
+						onclick={() => (lightbox = true)}>放大查看 ⤢</button
+					>{#if compareSource && compareSource !== output}<button
+							class="a-btn secondary sm"
+							aria-pressed={compare}
+							onclick={() => (compare = !compare)}>{compare ? '结束对比' : '对比画面'} ◫</button
+						>{/if}{/if}
 				{#if fileGone && !outputs.length}
-					<button type="button" class="a-btn secondary sm" onclick={() => onRetry(job)}>{t('desk.redo')}</button>
-					<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}>{t('desk.removeRecord')}</button>
+					<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>
+					<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>
+						<a class="a-btn secondary sm" href={assetUrl(output)} download rel="external">{t('desk.download')}</a>
 					{/if}
 					{#if output && video}
 						<button
@@ -272,10 +351,18 @@
 						</button>
 					{/if}
 					{#if st.tone === 'fail'}
-						<button type="button" class="a-btn secondary sm" onclick={() => onRetry(job)}>{t('common.retry')}</button>
+						<button type="button" class="a-btn secondary sm" onclick={() => onRetry(job)}
+							>{t('common.retry')}</button
+						>
 					{/if}
+					{#if job.status === 'pending' || job.status === 'running'}<button
+							class="a-btn secondary sm"
+							onclick={() => onCancel(job)}>取消这次生成</button
+						>{/if}
 					{#if job.status !== 'pending' && job.status !== 'running'}
-						<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}>{t('studio.deleteBtn')}</button>
+						<button type="button" class="a-btn danger sm" onclick={() => onDelete(job)}
+							>{t('studio.deleteBtn')}</button
+						>
 					{/if}
 				{/if}
 			</div>
@@ -286,44 +373,61 @@
 				<div class="note warn" role="alert">{t('jobst.missingDetail')}</div>
 			{/if}
 
-			{#if inputs.length || prompt}
-				<div class="section-title">{t('desk.inputs')}</div>
-				{#if inputs.length}
-					<div class="inputs">
-						{#each inputs as inp (inp.label + inp.path)}
-							{#if inp.kind === 'image'}
-								<img class="mini" src={assetUrl(inp.path)} alt={inp.label} title={inp.label} loading="lazy" />
-							{:else}
-								<span class="mini glyph" title={inp.label}><Icon name={inp.kind === 'video' ? 'film' : 'music'} size={14} /></span>
-							{/if}
-						{/each}
-					</div>
+			<details class="result-details">
+				<summary>创作详情与参数</summary>
+				{#if inputs.length || prompt}
+					<div class="section-title">{t('desk.inputs')}</div>
+					{#if inputs.length}
+						<div class="inputs">
+							{#each inputs as inp (inp.label + inp.path)}
+								{#if inp.kind === 'image'}
+									<img
+										class="mini"
+										src={assetUrl(inp.path)}
+										alt={inp.label}
+										title={inp.label}
+										loading="lazy"
+									/>
+								{:else}
+									<span class="mini glyph" title={inp.label}
+										><Icon name={inp.kind === 'video' ? 'film' : 'music'} size={14} /></span
+									>
+								{/if}
+							{/each}
+						</div>
+					{/if}
+					{#if prompt}<p class="prompt">{prompt}</p>{/if}
 				{/if}
-				{#if prompt}<p class="prompt">{prompt}</p>{/if}
-			{/if}
 
-			<div class="section-title">{t('desk.workflow')}</div>
-			<dl class="kv">
-				<dt>{t('desk.kvName')}</dt>
-				<dd>
-					{wf?.name ?? t('studio.jobName', { id: job.id })}
-					{#if wfDeleted}<span class="a-tag wf-gone">{t('studio.wfDeletedTag')}</span>{/if}
-				</dd>
-				{#if wf?.usage}
-					<dt>{t('desk.kvUsage')}</dt>
-					<dd>{usageLabel(wf.usage)}</dd>
-				{/if}
-				<dt>{t('desk.kvCreated')}</dt>
-				<dd class="mono">{fmtClock(parseDbTs(job.created_at))}</dd>
-				{#if job.comfy_prompt_id}
-					<dt>{t('desk.kvPromptId')}</dt>
-					<dd class="mono">{job.comfy_prompt_id}</dd>
-				{/if}
-			</dl>
+				<div class="section-title">{t('desk.workflow')}</div>
+				<dl class="kv">
+					<dt>{t('desk.kvName')}</dt>
+					<dd>
+						{wf?.name ?? t('studio.jobName', { id: job.id })}
+						{#if wfDeleted}<span class="a-tag wf-gone">{t('studio.wfDeletedTag')}</span>{/if}
+					</dd>
+					{#if wf?.usage}
+						<dt>{t('desk.kvUsage')}</dt>
+						<dd>{usageLabel(wf.usage)}</dd>
+					{/if}
+					<dt>{t('desk.kvCreated')}</dt>
+					<dd class="mono">{fmtClock(parseDbTs(job.created_at))}</dd>
+					{#if job.comfy_prompt_id}
+						<dt>{t('desk.kvPromptId')}</dt>
+						<dd class="mono">{job.comfy_prompt_id}</dd>
+					{/if}
+				</dl>
+			</details>
 		{/if}
 	</div>
 </aside>
 
+{#if lightbox && output && !video}<ImageLightbox
+		src={assetUrl(output) ?? ''}
+		alt={prompt || '创作结果'}
+		onClose={() => (lightbox = false)}
+	/>{/if}
+
 <style>
 	.inspector {
 		display: flex;
@@ -578,4 +682,206 @@
 			padding: var(--sp-5);
 		}
 	}
+
+	.inspector.main {
+		position: static;
+		inset: auto;
+		transform: none;
+		opacity: 1;
+		pointer-events: auto;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		max-width: none;
+		border: 0;
+		background: transparent;
+		overflow: hidden;
+		box-shadow: none;
+		display: flex;
+		flex-direction: column;
+	}
+	.main .tabs {
+		display: none;
+	}
+	.main .body {
+		padding: 0;
+		overflow: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		flex: 1;
+		min-height: 0;
+	}
+	.main .stage {
+		aspect-ratio: auto;
+		width: 100%;
+		min-height: 110px;
+		flex: 1;
+		height: auto;
+		max-height: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--line);
+		border-radius: 10px;
+		overflow: hidden;
+		background: #eae9e3;
+	}
+	.main .stage-media {
+		position: relative;
+		inset: auto;
+		padding: 0;
+		height: 100%;
+		width: 100%;
+		min-height: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.main .print {
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		max-height: 100%;
+		max-width: 100%;
+		padding: 0;
+		border: 0;
+		background: none;
+		display: grid;
+		grid-template-rows: minmax(0, 1fr);
+		grid-template-columns: minmax(0, 1fr);
+	}
+	.main .print img,
+	.main .print video {
+		min-height: 0;
+		min-width: 0;
+		width: 100%;
+		height: 100%;
+		max-height: 100%;
+		object-fit: contain;
+		border-radius: 0;
+	}
+	.main .meta,
+	.main .actions,
+	.main .playback-bar,
+	.main .strip,
+	.main .note,
+	.main .result-details {
+		flex-shrink: 0;
+		margin: 0;
+	}
+	.main .meta {
+		font-size: 10px;
+		gap: 8px;
+		line-height: 1.5;
+		max-height: 30px;
+		overflow: auto;
+	}
+	.main .actions {
+		gap: 6px;
+		flex-wrap: wrap;
+	}
+	.main .result-details {
+		font-size: 11px;
+		max-height: 160px;
+		overflow: auto;
+	}
+	.playback-bar {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 4px 0;
+	}
+	.playback-bar span {
+		flex: 1;
+		font-size: 11px;
+		color: var(--text-3);
+	}
+	@media (max-height: 650px) {
+		.playback-bar span {
+			display: none;
+		}
+		.main .meta {
+			max-height: 16px;
+		}
+		.main .actions :global(.a-btn) {
+			font-size: 11px;
+			padding: 4px 8px;
+		}
+	}
+	.main .a-fix {
+		display: none;
+	}
+	.main .stage-empty {
+		display: flex;
+		gap: 10px;
+		flex-direction: column;
+		align-items: center;
+		color: var(--text-3);
+		font-size: 12px;
+	}
+	.empty-symbol {
+		color: var(--accent);
+		font-size: 55px;
+		font-weight: 300;
+		line-height: 1.4;
+	}
+	.stage-empty strong {
+		font-size: 16px;
+		font-weight: 500;
+		color: var(--text);
+	}
+	.main .meta {
+		font-size: 9px;
+		gap: 12px;
+		margin-top: 10px;
+	}
+	.main .actions {
+		margin-top: 12px;
+	}
+	.result-details {
+		font-size: 11px;
+		color: var(--text-3);
+		margin-top: 12px;
+	}
+	.result-details summary {
+		cursor: pointer;
+	}
+	.result-details .prompt {
+		margin-top: 12px;
+	}
+
+	.comparison-layer {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
+	.comparison-layer img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		background: #eae9e3;
+	}
+	.comparison-divider {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		background: var(--surface);
+		box-shadow: 0 0 8px #292a2d40;
+		pointer-events: none;
+	}
+	.compare-controls {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+		margin-top: 10px;
+		font-size: 10px;
+		color: var(--text-3);
+	}
+	.compare-controls input {
+		flex: 1;
+		accent-color: var(--accent);
+	}
 </style>

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

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

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { resolve } from "$app/paths";
+  import { assetUrl } from "$lib/api";
+  import { shotApi, type Capture } from "$lib/shot/api";
+  import Modal from "$lib/components/ui/Modal.svelte";
+  import { toast } from "$lib/toast";
+
+  let {
+    open = $bindable(false),
+    onPick,
+  }: { open?: boolean; onPick: (path: string) => void } = $props();
+  let compositions = $state<Array<{ id: number; title: string }>>([]);
+  let compositionId = $state("");
+  let captures = $state<Capture[]>([]);
+  let loading = $state(false);
+  let request = 0;
+  $effect(() => {
+    if (!open) {
+      request++;
+      return;
+    }
+    const version = ++request;
+    loading = true;
+    shotApi
+      .listCompositions()
+      .then((rows) => {
+        if (version !== request) return;
+        compositions = rows;
+        compositionId = rows.length ? String(rows[0].id) : "";
+      })
+      .catch((error) => toast.error(String(error)))
+      .finally(() => {
+        if (version === request) loading = false;
+      });
+  });
+  $effect(() => {
+    if (!open || !compositionId) {
+      captures = [];
+      return;
+    }
+    const id = Number(compositionId);
+    let active = true;
+    captures = [];
+    shotApi.listCaptures(id).then((rows) => {
+      if (active)
+        captures = rows.filter((c) => c.kind === "image" && c.file_path);
+    });
+    return () => {
+      active = false;
+    };
+  });
+</script>
+
+<Modal bind:open title="从三维搭景截取">
+  <p>选择已保存的搭景截图，填入当前工作流声明的图片槽。</p>
+  <a
+    class="a-btn secondary sm"
+    href={resolve("/build-scene")}
+    target="_blank"
+    rel="noopener">打开三维搭景</a
+  >
+  {#if loading}<p>正在读取截图…</p>{:else if !compositions.length}<p>
+      暂无搭景，请先保存截图。
+    </p>{:else}
+    <label class="field"
+      ><span class="field-label">场景</span><select
+        class="field-input"
+        bind:value={compositionId}
+        >{#each compositions as comp (comp.id)}<option value={String(comp.id)}
+            >{comp.title}</option
+          >{/each}</select
+      ></label
+    >
+    <div class="capture-choices">
+      {#each captures as capture (capture.id)}<button
+          class="a-btn secondary"
+          onclick={() => {
+            if (capture.file_path) {
+              onPick(capture.file_path);
+              open = false;
+            }
+          }}
+          ><img
+            src={assetUrl(capture.file_path) ?? ""}
+            alt={capture.label ?? "搭景截图"}
+          /><span>{capture.label ?? `截图 ${capture.id}`}</span></button
+        >{:else}<p>该场景暂无图片截图。</p>{/each}
+    </div>{/if}
+</Modal>
+
+<style>
+  .capture-choices {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--sp-4);
+    margin-top: var(--sp-5);
+  }
+  .capture-choices button {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sp-3);
+    height: auto;
+    white-space: normal;
+  }
+  .capture-choices img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: contain;
+  }
+</style>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Icon from '$lib/components/ui/Icon.svelte';
+	import SceneCapturePicker from './SceneCapturePicker.svelte';
 	import MediaSlot from '$lib/components/studio/MediaSlot.svelte';
 	import RefImageGrid from '$lib/components/studio/RefImageGrid.svelte';
 	import { mediaFileProblem } from '$lib/comfy/imageFile';
@@ -6,7 +8,15 @@
 	import type { ComfyDynamicInput } from '$lib/comfy/types';
 	import { toast } from '$lib/toast';
 	import { t } from '$lib/i18n.svelte';
-	import { h3Warnings, listKind, listPaths, type DeskSchema, type FormValue, type FormValues, type SlotDef } from './schema';
+	import {
+		h3Warnings,
+		listKind,
+		listPaths,
+		type DeskSchema,
+		type FormValue,
+		type FormValues,
+		type SlotDef,
+	} from './schema';
 
 	/**
 	 * 输入槽 (spec-v2 §3.3): exactly the media inputs the workflow JSON wires —
@@ -16,6 +26,8 @@
 	 */
 	interface Props {
 		ds: DeskSchema;
+		compact?: boolean;
+		allowScene?: boolean;
 		values: FormValues;
 		showErrors: boolean;
 		errors: Record<string, string>;
@@ -25,9 +37,51 @@
 		onFromResults: (nodeId: string) => void;
 	}
 
-	let { ds, values, showErrors, errors, busy = $bindable(false), onSet, onFromResults }: Props = $props();
+	let {
+		ds,
+		compact = false,
+		allowScene = false,
+		values,
+		showErrors,
+		errors,
+		busy = $bindable(false),
+		onSet,
+		onFromResults,
+	}: Props = $props();
+
+	let sceneOpen = $state(false);
+	let sceneNode = $state('');
+	$effect(() => {
+		void ds;
+		sceneOpen = false;
+		sceneNode = '';
+	});
+	function pickScene(path: string) {
+		const slot = ds.slots.find(
+			(s) => s.inp.nodeId === sceneNode && s.mediaKind === 'image' && !s.mask,
+		);
+		const list = ds.lists.find(
+			(g) => g.nodeId === sceneNode && g.kind === 'image_list',
+		);
+		if (!allowScene) return;
+		if (slot) onSet(sceneNode, path);
+		else if (list) {
+			const paths = listPaths(values, list);
+			if (paths.length >= (list.max ?? 9)) {
+				toast.error('参考图数量已达上限');
+				return;
+			}
+			onSet(sceneNode, [...paths, path]);
+		}
+	}
 
 	const uploads = createUploadManager();
+	const paired = $derived(
+		compact &&
+			ds.lists.length === 0 &&
+			ds.slots.length > 0 &&
+			ds.slots.every((s) => s.firstFrame || s.lastFrame),
+	);
 	type Reject = { name: string; message: string };
 	let rejects = $state<Record<string, Reject[]>>({});
 	let fileSizes = $state<Record<string, number>>({});
@@ -75,11 +129,15 @@
 		const ok = files.filter((f) => !mediaFileProblem(mk, f));
 		setRejects(
 			key,
-			files.filter((f) => mediaFileProblem(mk, f)).map((f) => ({ name: f.name, message: mediaFileProblem(mk, f)! })),
+			files
+				.filter((f) => mediaFileProblem(mk, f))
+				.map((f) => ({ name: f.name, message: mediaFileProblem(mk, f)! })),
 		);
 		const start = listPaths(values, entry);
 		if (start.length + ok.length > max) {
-			toast.error(t('studio.errRefMax', { max, n: start.length, k: ok.length }));
+			toast.error(
+				t('studio.errRefMax', { max, n: start.length, k: ok.length }),
+			);
 			return;
 		}
 		for (const f of ok) {
@@ -89,7 +147,11 @@
 		}
 	}
 
-	async function groupReplace(entry: ComfyDynamicInput, index: number, file: File) {
+	async function groupReplace(
+		entry: ComfyDynamicInput,
+		index: number,
+		file: File,
+	) {
 		const key = entry.nodeId;
 		const problem = mediaFileProblem(listKind(entry), file);
 		if (problem) {
@@ -101,7 +163,11 @@
 		replacingIndex = index;
 		try {
 			const path = await upload(key, file);
-			if (path) onSet(key, listPaths(values, entry).map((p, i) => (i === index ? path : p)));
+			if (path)
+				onSet(
+					key,
+					listPaths(values, entry).map((p, i) => (i === index ? path : p)),
+				);
 		} finally {
 			replacingKey = '';
 			replacingIndex = -1;
@@ -116,7 +182,9 @@
 
 	/** Composer-wide drop: each file goes to the first wired slot of its kind with room. */
 	export function dropFiles(files: File[]) {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Per-drop allocation buffer, synchronously consumed into groupAdd calls; no collection state survives this invocation.
 		const pending = new Map<string, File[]>();
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Per-drop reservation set prevents assigning two files to one slot before async upload completes; never used as render state.
 		const taken = new Set<string>();
 		let unplaced = 0;
 		for (const f of files) {
@@ -148,13 +216,22 @@
 	}
 </script>
 
+<SceneCapturePicker bind:open={sceneOpen} onPick={pickScene} />
+
 {#if ds.slots.length || ds.lists.length}
-	<div class="tray">
-		{#each ds.slots as s (s.inp.nodeId)}
+	<div class="tray" class:compact class:paired>
+		{#if paired}<div class="frame-label">
+				首尾帧 · {ds.slots[0]?.inp.required ? '首帧必填' : '按工作流要求填写'}
+			</div>{/if}
+		{#each ds.slots as s, index (s.inp.nodeId)}
+			{#if paired && index > 0}<Icon name="arrow-right" size={14} />{/if}
 			{@const reject = rejects[s.inp.nodeId]?.[0]}
 			<MediaSlot
+				caption={paired}
 				label={s.label}
-				hint={s.lastFrame && !s.inp.required ? t('studio.slotOptional') : undefined}
+				hint={s.lastFrame && !s.inp.required
+					? t('studio.slotOptional')
+					: undefined}
 				required={s.inp.required}
 				value={String(values[s.inp.nodeId] ?? '')}
 				kind={s.mediaKind}
@@ -162,11 +239,21 @@
 				uploading={uploads.isUploading(s.inp.nodeId)}
 				uploadName={uploads.uploading[s.inp.nodeId]}
 				need={showErrors && !!errors[s.inp.nodeId]}
-				error={reject?.message ?? (showErrors ? errors[s.inp.nodeId] : undefined)}
+				error={reject?.message ??
+					(showErrors ? errors[s.inp.nodeId] : undefined)}
 				allowFromResults={s.fromResults}
 				anchorId={`slot-${s.inp.nodeId}`}
 				onFile={(f) => slotFile(s, f)}
 				onFromResults={() => onFromResults(s.inp.nodeId)}
+				onFromScene={!compact &&
+				allowScene &&
+				s.mediaKind === 'image' &&
+				!s.mask
+					? () => {
+							sceneNode = s.inp.nodeId;
+							sceneOpen = true;
+						}
+					: undefined}
 				onClear={() => {
 					setRejects(s.inp.nodeId, []);
 					onSet(s.inp.nodeId, '');
@@ -189,16 +276,32 @@
 				anchorId={`slot-${entry.nodeId}`}
 				onAdd={(files) => groupAdd(entry, files)}
 				onReplace={(i, file) => groupReplace(entry, i, file)}
-				onRemove={(i) => onSet(entry.nodeId, listPaths(values, entry).filter((_, j) => j !== i))}
-				onDismissReject={(i) => setRejects(entry.nodeId, (rejects[entry.nodeId] ?? []).filter((_, j) => j !== i))}
-				onFromResults={entry.kind === 'image_list' ? () => onFromResults(entry.nodeId) : undefined}
+				onRemove={(i) =>
+					onSet(
+						entry.nodeId,
+						listPaths(values, entry).filter((_, j) => j !== i),
+					)}
+				onDismissReject={(i) =>
+					setRejects(
+						entry.nodeId,
+						(rejects[entry.nodeId] ?? []).filter((_, j) => j !== i),
+					)}
+				onFromScene={!compact && allowScene && entry.kind === 'image_list'
+					? () => {
+							sceneNode = entry.nodeId;
+							sceneOpen = true;
+						}
+					: undefined}
+				onFromResults={entry.kind === 'image_list'
+					? () => onFromResults(entry.nodeId)
+					: undefined}
 			/>
 		{/each}
 	</div>
 	{#if showErrors && errors.firstLast}
 		<p class="a-slot-hint err note">{errors.firstLast}</p>
 	{/if}
-	{#if ds.hasH3Hint}
+	{#if ds.hasH3Hint && !compact}
 		<div class="note" role="note">
 			<p class="a-slot-hint">{t('wfMedia.h3Limits')}</p>
 			{#each warns as w (w)}
@@ -212,8 +315,29 @@
 	.tray {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--sp-3) var(--sp-6);
-		padding: var(--sp-4) var(--sp-5) 0;
+		gap: var(--tray-gap, var(--sp-3) var(--sp-6));
+		padding: var(--tray-padding, var(--sp-4) var(--sp-5) 0);
+	}
+	.compact {
+		--tray-gap: 14px;
+		--tray-padding: 0;
+		--input-tile-size: var(--slot-size);
+		--input-tile-radius: var(--desk-slot-radius);
+		--input-slot-gap: var(--desk-slot-gap);
+		--input-slot-font: 11px;
+	}
+	.paired {
+		display: grid;
+		grid-template-columns: var(--slot-size) 14px var(--slot-size);
+		column-gap: var(--desk-slot-gap);
+		row-gap: var(--desk-slot-gap);
+		align-items: center;
+	}
+	.frame-label {
+		grid-column: 1 / -1;
+		height: 20px;
+		font-size: 11px;
+		color: var(--tx-3);
 	}
 	.note {
 		margin: 0;

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+  import Modal from "$lib/components/ui/Modal.svelte";
+  import { agentApi, resultsApi, type WorkbenchStageKey } from "$lib/api";
+  import { toast } from "$lib/toast";
+  let { jobId, onclose }: { jobId: number | null; onclose: () => void } =
+    $props();
+  const client = useQueryClient();
+  const projects = createQuery({
+    queryKey: ["b4-projects"],
+    queryFn: agentApi.listLinkableProjects,
+  });
+  let projectId = $state<number | null>(null);
+  let stage = $state<WorkbenchStageKey>("assets");
+  let busy = $state(false),
+    error = $state("");
+  async function store() {
+    if (!jobId || !projectId || busy) return;
+    busy = true;
+    error = "";
+    try {
+      const res = await resultsApi.store({
+        job_id: jobId,
+        project_id: projectId,
+        stage_key: stage,
+      });
+      await client.invalidateQueries({ queryKey: ["workbench", projectId] });
+      toast.success(
+        res.already_attached
+          ? "该结果已存入此阶段"
+          : "已存入项目草稿，等待确认",
+      );
+      onclose();
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<Modal open={jobId != null} title="存入项目草稿" {onclose} dismissible={!busy}>
+  <p>选择项目和阶段，结果将在该阶段等待确认。</p>
+  <label class="field"
+    >项目<select aria-label="存入项目" bind:value={projectId}
+      ><option value={null}>选择项目</option
+      >{#each $projects.data ?? [] as p (p.id)}<option value={p.id}
+          >{p.title}</option
+        >{/each}</select
+    ></label
+  >
+  <label class="field"
+    >阶段<select aria-label="存入阶段" bind:value={stage}
+      >{#each [["script", "剧本创作"], ["style", "视觉设计"], ["storyboard", "分镜设计"], ["assets", "素材资产"], ["shot", "镜头脚本"]] as [value, label] (value)}<option
+          {value}>{label}</option
+        >{/each}</select
+    ></label
+  >
+  {#if error}<p role="alert">{error}</p>{/if}
+  {#snippet footer()}<button class="a-btn" disabled={busy} onclick={onclose}
+      >取消</button
+    ><button class="a-btn primary" disabled={!projectId || busy} onclick={store}
+      >存入待确认草稿</button
+    >{/snippet}
+</Modal>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from '$app/paths';
 	import Icon from '$lib/components/ui/Icon.svelte';
 	import { assetUrl } from '$lib/api';
 	import type { Job, Workflow } from '$lib/comfy/types';
@@ -8,7 +9,15 @@
 	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';
+	import {
+		elapsedSec,
+		fmtClock,
+		fmtDur,
+		inputsOf,
+		isVideoOutput,
+		promptOf,
+		workbenchCtxOf,
+	} from './takes';
 
 	/**
 	 * 一条记录 (spec-v2 §3.3 记录卡): workflow · usage · time, the prompt, the
@@ -20,6 +29,9 @@
 	 * take whose files no longer load turns amber (文件缺失) with
 	 * 用相同参数重做 / 移除记录, and takes on a deleted workflow are
 	 * marked as such instead of pretending nothing changed.
+	 * HEL-684: a take generated with a real workbench source offers an
+	 * explicit 回流到源项目 action; once flowed back it shows 已回流 and
+	 * a direct 返回项目 link instead.
 	 */
 	interface Props {
 		job: Job;
@@ -33,11 +45,14 @@
 		flash?: boolean;
 		/** One-shot failure shake. */
 		shake?: boolean;
+		/** Flow-back request in flight (HEL-684). */
+		attachBusy?: boolean;
 		onSelect: () => void;
 		onReuse: () => void;
 		onRetry: () => void;
 		onCancel: () => void;
 		onDelete: () => void;
+		onAttach?: () => void;
 	}
 
 	let {
@@ -49,11 +64,13 @@
 		enter = false,
 		flash = false,
 		shake = false,
+		attachBusy = false,
 		onSelect,
 		onReuse,
 		onRetry,
 		onCancel,
 		onDelete,
+		onAttach,
 	}: Props = $props();
 
 	const st = $derived(jobStatusInfo(job));
@@ -80,6 +97,16 @@
 	});
 	const active = $derived(job.status === 'pending' || job.status === 'running');
 	const name = $derived(wf?.name ?? t('studio.jobName', { id: job.id }));
+	// HEL-684: flow-back only for finished takes with files and a real,
+	// still-recorded workbench source; the attached marker comes from the
+	// server so it survives reloads.
+	const wbCtx = $derived(workbenchCtxOf(job));
+	const attached = $derived(
+		!!job.workbench_attach && !!wbCtx && job.workbench_attach.target_id === wbCtx.sourceId,
+	);
+	const canAttach = $derived(
+		!!onAttach && !attached && st.tone === 'ok' && !fileGone && !!output,
+	);
 
 	let portrait = $state(false);
 	let clipSec = $state<number | null>(null);
@@ -164,6 +191,25 @@
 				</button>
 				<button type="button" class="a-btn danger xs" onclick={onDelete}>{t('desk.removeRecord')}</button>
 			{:else}
+				{#if canAttach}
+					<button
+						type="button"
+						class="a-btn ghost xs attach"
+						disabled={attachBusy}
+						title={t('desk.attachHint', { label: wbCtx?.label ?? '' })}
+						onclick={() => onAttach?.()}
+					>
+						{attachBusy ? t('desk.attaching') : t('desk.attachToProject')}
+					</button>
+				{/if}
+				{#if attached && wbCtx}
+					<span class="a-tag ok" title={t('desk.attachHint', { label: wbCtx.label ?? '' })}>
+						{t('desk.attachedTag')}
+					</span>
+					<a class="a-btn ghost xs" href={resolve(`/workbench/${wbCtx.projectId}?stage=${wbCtx.stage}`)}>
+						{t('desk.attachBack')}
+					</a>
+				{/if}
 				<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>
@@ -172,7 +218,7 @@
 					<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>
+					<a class="a-btn ghost xs" href={assetUrl(output)} download rel="external">{t('desk.download')}</a>
 				{/if}
 				{#if !active}
 					<button type="button" class="a-btn danger xs" onclick={onDelete}>{t('studio.deleteBtn')}</button>
@@ -560,9 +606,9 @@
 		position: absolute;
 		inset: 0;
 		background: linear-gradient(100deg, transparent 30%, var(--run-soft) 50%, transparent 70%);
-		animation: take-sheen 1.4s linear infinite;
+		animation: var(--decorative-loop-name, motion-takecard-take-sheen) 1.4s linear infinite;
 	}
-	@keyframes take-sheen {
+	@keyframes -global-motion-takecard-take-sheen {
 		from {
 			transform: translateX(-100%);
 		}

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

@@ -38,11 +38,14 @@
 		banner?: Snippet;
 		/** Inspector toggle when it is hidden (desktop) or an overlay (mid). */
 		inspectorToggle?: Snippet;
+		/** Flow-back to the workbench source row in flight (HEL-684). */
+		attachBusyId?: number | null;
 		onSelect: (job: Job) => void;
 		onReuse: (job: Job) => void;
 		onRetry: (job: Job) => void;
 		onCancel: (job: Job) => void;
 		onDelete: (job: Job) => void;
+		onAttach?: (job: Job) => void;
 	}
 
 	let {
@@ -59,11 +62,13 @@
 		orderedIds = $bindable(),
 		banner,
 		inspectorToggle,
+		attachBusyId = null,
 		onSelect,
 		onReuse,
 		onRetry,
 		onCancel,
 		onDelete,
+		onAttach,
 	}: Props = $props();
 
 	const FILTERS: Array<{ id: FeedFilter; key: string }> = [
@@ -120,6 +125,7 @@
 	// Entrance bookkeeping: only takes that appear AFTER the first fill
 	// (or come back from an undo) play the 220ms rise.
 	// ------------------------------------------------------------------
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Nonreactive entrance ledger read/written in the jobs effect and markEnter; keep bookkeeping outside effect dependencies, with animateIds driving classes.
 	const seenIds = new Set<number>();
 	const animateIds = new SvelteSet<number>();
 	let hydrated = false;
@@ -263,6 +269,8 @@
 						onRetry={() => onRetry(job)}
 						onCancel={() => onCancel(job)}
 						onDelete={() => onDelete(job)}
+						attachBusy={attachBusyId === job.id}
+						onAttach={onAttach ? () => onAttach(job) : undefined}
 					/>
 				</div>
 			{/each}

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

@@ -1,277 +0,0 @@
-<script lang="ts">
-	import Icon from '$lib/components/ui/Icon.svelte';
-	import ShellPop from '$lib/components/shell/ShellPop.svelte';
-	import { WORKFLOW_USAGES, type Workflow } from '$lib/comfy/types';
-	import { t } from '$lib/i18n.svelte';
-	import { slotSummary, usageLabel } from './schema';
-
-	/**
-	 * 工作流选择 (spec-v2 §3.3 工作流面板): the composer's first chip opens a
-	 * 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[];
-		current: Workflow | null;
-		endpoints: Array<{ id: string; name: string }>;
-		onPick: (wf: Workflow) => void;
-	}
-
-	let { workflows, current, endpoints, onPick }: Props = $props();
-
-	let open = $state(false);
-	let query = $state('');
-	let activeId = $state<number | null>(null);
-
-	type Status = { tone: '' | 'ok' | 'warn' | 'err'; label: string };
-
-	function statusOf(wf: Workflow): Status {
-		if ((wf.warnings ?? []).some((w) => w.level === 'error')) return { tone: 'err', label: t('desk.wfBroken') };
-		const lt = wf.last_test;
-		if (!lt) return { tone: '', label: t('desk.wfUntested') };
-		if (lt.status === 'done' && lt.output_count > 0) return { tone: 'ok', label: t('desk.wfOk') };
-		if (lt.status === 'failed' || lt.status === 'done') return { tone: 'warn', label: t('desk.wfLastFailed') };
-		return { tone: '', label: t('desk.wfTesting') };
-	}
-
-	function endpointLabel(wf: Workflow): string {
-		const ep = endpoints.find((e) => e.id === wf.endpoint_id);
-		return ep ? ep.name : t('desk.wfDefaultConn');
-	}
-
-	const rows = $derived(
-		workflows.map((wf) => ({
-			wf,
-			summary: slotSummary(wf),
-			conn: endpointLabel(wf),
-			status: statusOf(wf),
-			usage: wf.usage ? usageLabel(wf.usage) : '',
-		})),
-	);
-
-	const groups = $derived.by(() => {
-		const q = query.trim().toLowerCase();
-		const hit = (r: (typeof rows)[number]) =>
-			!q || `${r.wf.name} ${r.usage} ${r.summary}`.toLowerCase().includes(q);
-		return WORKFLOW_USAGES.map((u) => ({
-			usage: u,
-			items: rows.filter((r) => r.wf.usage === u && hit(r)),
-		})).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 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>
-
-<div class="picker">
-	<button
-		type="button"
-		id="desk-wf"
-		class="a-chip wf"
-		aria-haspopup="dialog"
-		aria-expanded={open}
-		title={current?.name ?? t('desk.pickWorkflow')}
-		onclick={() => (open = !open)}
-	>
-		<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"
-		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 class="a-tag {r.status.tone}">{r.status.label}</span>
-						</button>
-					{/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>
-	</ShellPop>
-</div>
-
-	<style>
-	.picker {
-		position: relative;
-		min-width: 0;
-	}
-	.pop-body {
-		display: flex;
-		flex-direction: column;
-	}
-	.search {
-		display: flex;
-		align-items: center;
-		gap: var(--sp-3);
-		padding: var(--sp-3) var(--sp-4) var(--sp-4);
-		border-bottom: 1px solid var(--line);
-		color: var(--text-3);
-	}
-	.search-input {
-		flex: 1;
-		min-width: 0;
-		border: 0;
-		outline: 0;
-		background: transparent;
-		color: var(--text);
-		font: inherit;
-		font-size: var(--fs-section);
-	}
-	.search-input::placeholder {
-		color: var(--text-3);
-	}
-	/* Search and foot stay put; only the list scrolls inside the pop's max-height. */
-	.list {
-		max-height: min(380px, 50vh);
-		overflow-y: auto;
-		padding: var(--sp-1) 0;
-	}
-	.row {
-		align-items: center;
-	}
-	/* 键盘游走选中态（↑↓ 选择 · Enter 使用） */
-	.row.active {
-		background: var(--bg-4);
-	}
-	.main {
-		display: grid;
-		gap: 2px;
-		flex: 1;
-		min-width: 0;
-	}
-	.main .a-menu-label {
-		font-weight: 500;
-	}
-	.row.off .a-menu-label {
-		color: var(--text-3);
-	}
-	.sub {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--sp-1);
-	}
-	.empty {
-		margin: 0;
-		padding: var(--sp-6) var(--sp-4);
-		color: var(--text-3);
-		font-size: var(--fs-aux);
-	}
-	.foot {
-		display: flex;
-		align-items: center;
-		gap: var(--sp-2);
-		padding: var(--sp-3) var(--sp-1) 0;
-		border-top: 1px solid var(--line);
-	}
-	.keys {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--sp-1);
-		margin-left: auto;
-		font-size: var(--fs-mini);
-		color: var(--text-3);
-		white-space: nowrap;
-	}
-	.keys .a-kbd:not(:first-child) {
-		margin-left: var(--sp-2);
-	}
-	@media (max-width: 760px) {
-		.keys {
-			display: none;
-		}
-	}
-</style>

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

@@ -1,55 +1,126 @@
-import type { WorkbenchStageKey } from '$lib/api';
-import type { DeskKind } from './schema';
+import type { WorkbenchStageKey } from "$lib/api";
+import type { DeskKind } from "./schema";
 
 /**
  * 五段创作 → 生成台 handoff, carried in the URL so a reload keeps it.
- * The desk only prefills from it; the playground generate API has no
- * project/shot link, so results stay in the desk feed (no backfill).
+ * The desk prefills from it and, when the full source identity is present
+ * (sourceKind/sourceId), sends it along with the generate request so a
+ * finished take can be flowed back to its source row (HEL-684).
  */
 export interface DeskContext {
-	kind: DeskKind;
-	projectId: number;
-	stage: WorkbenchStageKey;
-	/** Human label of the source row, e.g. 镜头 S1 / 角色「林夏」. */
-	label: string;
-	prompt?: string;
-	negative?: string;
-	durationSec?: number;
+  kind: DeskKind;
+  projectId: number;
+  stage: WorkbenchStageKey;
+  /** Human label of the source row, e.g. 镜头 S1 / 角色「林夏」. */
+  label: string;
+  prompt?: string;
+  negative?: string;
+  durationSec?: number;
+  /** Real source row identity — only present on links the workbench
+   * stamped with it; without it no flow-back is offered (nothing guessed). */
+  sourceKind?: "asset" | "shot";
+  sourceId?: string;
 }
 
-const STAGES: WorkbenchStageKey[] = ['script', 'style', 'storyboard', 'assets', 'shot'];
+/** The generate-request context payload shape (HEL-684). */
+export interface DeskWorkbenchContext {
+  project_id: number;
+  stage: "assets" | "shot";
+  source_kind: "asset" | "shot";
+  source_id: string;
+  label?: string;
+}
 
-export function deskHref(ctx: DeskContext): string {
-	const q = new URLSearchParams({
-		from: 'workbench',
-		project: String(ctx.projectId),
-		stage: ctx.stage,
-		label: ctx.label,
-	});
-	if (ctx.prompt) q.set('prompt', ctx.prompt);
-	if (ctx.negative) q.set('negative', ctx.negative);
-	if (ctx.durationSec != null) q.set('duration', String(ctx.durationSec));
-	return `/${ctx.kind}?${q.toString()}`;
+const STAGES: WorkbenchStageKey[] = [
+  "script",
+  "style",
+  "storyboard",
+  "assets",
+  "shot",
+];
+
+/** Stage ↔ desk kind pairing the workbench rows render (assets → image,
+ * shot → video). Anything else cannot display a flowed-back take. */
+const KIND_BY_STAGE: Partial<Record<WorkbenchStageKey, DeskKind>> = {
+  assets: "image",
+  shot: "video",
+};
+
+export function deskHref(ctx: DeskContext): `/${DeskKind}?${string}` {
+  const q = new URLSearchParams({
+    from: "workbench",
+    project: String(ctx.projectId),
+    stage: ctx.stage,
+    label: ctx.label,
+  });
+  if (ctx.prompt) q.set("prompt", ctx.prompt);
+  if (ctx.negative) q.set("negative", ctx.negative);
+  if (ctx.durationSec != null) q.set("duration", String(ctx.durationSec));
+  if (ctx.sourceKind && ctx.sourceId) {
+    q.set("source_kind", ctx.sourceKind);
+    q.set("source_id", ctx.sourceId);
+  }
+  return `/${ctx.kind}?${q.toString()}`;
 }
 
 export function readDeskContext(url: URL, kind: DeskKind): DeskContext | null {
-	const q = url.searchParams;
-	if (q.get('from') !== 'workbench') return null;
-	const projectId = Number(q.get('project'));
-	const stage = q.get('stage') as WorkbenchStageKey | null;
-	if (!Number.isInteger(projectId) || projectId <= 0 || !stage || !STAGES.includes(stage)) return null;
-	const duration = Number(q.get('duration'));
-	return {
-		kind,
-		projectId,
-		stage,
-		label: q.get('label') ?? '',
-		prompt: q.get('prompt') ?? undefined,
-		negative: q.get('negative') ?? undefined,
-		durationSec: Number.isFinite(duration) && duration > 0 ? duration : undefined,
-	};
+  const q = url.searchParams;
+  if (q.get("from") !== "workbench") return null;
+  const projectId = Number(q.get("project"));
+  const stage = q.get("stage") as WorkbenchStageKey | null;
+  if (
+    !Number.isInteger(projectId) ||
+    projectId <= 0 ||
+    !stage ||
+    !STAGES.includes(stage)
+  )
+    return null;
+  const duration = Number(q.get("duration"));
+  const rawKind = q.get("source_kind");
+  const rawId = q.get("source_id") ?? "";
+  // Source identity is only kept when it is complete and self-consistent;
+  // old/hand-made links keep today's prefill-only behavior.
+  const expectedKind =
+    stage === "assets" ? "asset" : stage === "shot" ? "shot" : null;
+  const sourceKind = rawKind === "asset" || rawKind === "shot" ? rawKind : null;
+  const hasSource =
+    sourceKind !== null && sourceKind === expectedKind && rawId.trim() !== "";
+  return {
+    kind,
+    projectId,
+    stage,
+    label: q.get("label") ?? "",
+    prompt: q.get("prompt") ?? undefined,
+    negative: q.get("negative") ?? undefined,
+    durationSec:
+      Number.isFinite(duration) && duration > 0 ? duration : undefined,
+    sourceKind: hasSource ? (sourceKind as "asset" | "shot") : undefined,
+    sourceId: hasSource ? rawId : undefined,
+  };
 }
 
-export function backHref(ctx: DeskContext): string {
-	return `/workbench/${ctx.projectId}?stage=${ctx.stage}`;
+/**
+ * The context a generate request carries: only when the full, real source
+ * identity is present AND the desk kind matches what that stage renders.
+ */
+export function workbenchContextOf(
+  ctx: DeskContext | null,
+): DeskWorkbenchContext | undefined {
+  if (!ctx?.sourceId || !ctx.sourceKind) return undefined;
+  if (ctx.stage !== "assets" && ctx.stage !== "shot") return undefined;
+  if (KIND_BY_STAGE[ctx.stage] !== ctx.kind) return undefined;
+  const out: DeskWorkbenchContext = {
+    project_id: ctx.projectId,
+    stage: ctx.stage,
+    source_kind: ctx.sourceKind,
+    source_id: ctx.sourceId,
+  };
+  if (ctx.label.trim()) out.label = ctx.label;
+  return out;
+}
+
+export function backHref(
+  ctx: DeskContext,
+): `/workbench/${string}?stage=${string}` {
+  return `/workbench/${ctx.projectId}?stage=${ctx.stage}`;
 }

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

@@ -1,7 +1,11 @@
-import type { ComfyDynamicInput, Workflow, WorkflowUsage } from '$lib/comfy/types';
-import { normalizeInputRole } from '$lib/comfy/parser';
-import { ratioShort, resolutionSelectorSize } from '$lib/comfy/resolution';
-import { t } from '$lib/i18n.svelte';
+import type {
+  ComfyDynamicInput,
+  Workflow,
+  WorkflowUsage,
+} from "$lib/comfy/types";
+import { normalizeInputRole } from "$lib/comfy/parser";
+import { ratioShort, resolutionSelectorSize } from "$lib/comfy/resolution";
+import { t } from "$lib/i18n.svelte";
 
 /**
  * 生成台表单识别 (HEL-653, moved verbatim from StudioGenerate): slots and
@@ -9,366 +13,477 @@ import { t } from '$lib/i18n.svelte';
  * never from model names. No wiring → no slot.
  */
 
-export type DeskKind = 'image' | 'video';
+export type DeskKind = "image" | "video";
 export type FormValue = string | number | string[];
 export type FormValues = Record<string, FormValue>;
 
 export interface SlotDef {
-	inp: ComfyDynamicInput;
-	label: string;
-	mediaKind: 'image' | 'video' | 'audio';
-	fromResults: boolean;
-	/** Required-slot message when left empty (ref-upload-spec §3). */
-	missing: string;
-	firstFrame: boolean;
-	lastFrame: boolean;
-	mask: boolean;
+  inp: ComfyDynamicInput;
+  label: string;
+  mediaKind: "image" | "video" | "audio";
+  fromResults: boolean;
+  /** Required-slot message when left empty (ref-upload-spec §3). */
+  missing: string;
+  firstFrame: boolean;
+  lastFrame: boolean;
+  mask: boolean;
 }
 
 /** Why 生成 is disabled — the line next to the button (spec-v2 §1.2). */
 export interface BlockReason {
-	text: string;
-	tone: 'warn' | 'err';
-	/** Element id to focus when the reason is clicked. */
-	target?: string;
-	/** Open the params tab instead of focusing. */
-	params?: boolean;
+  text: string;
+  tone: "warn" | "err";
+  /** Element id to focus when the reason is clicked. */
+  target?: string;
+  /** Open the params tab instead of focusing. */
+  params?: boolean;
 }
 
 export interface DeskSchema {
-	prompt: ComfyDynamicInput | null;
-	negative: ComfyDynamicInput | null;
-	seed: ComfyDynamicInput | null;
-	width: ComfyDynamicInput | null;
-	height: ComfyDynamicInput | null;
-	resolution: ComfyDynamicInput | null;
-	duration: ComfyDynamicInput | null;
-	batch: ComfyDynamicInput | null;
-	/** ComfyUI ResolutionSelector: the ratio + megapixels pair decides width/height. */
-	ratio: ComfyDynamicInput | null;
-	megapixels: ComfyDynamicInput | null;
-	/** Single media inputs (input image, first/last frame, mask, ref video/audio). */
-	slots: SlotDef[];
-	/** Autogrow media lists actually wired (image / video / audio). */
-	lists: ComfyDynamicInput[];
-	/** Parameters shown as composer chips (比例 / 尺寸 / 分辨率 / 时长 / 种子). */
-	common: ComfyDynamicInput[];
-	/** Everything else that is not media and not the prompt — folded. */
-	advanced: ComfyDynamicInput[];
-	hasH3Hint: boolean;
+  prompt: ComfyDynamicInput | null;
+  negative: ComfyDynamicInput | null;
+  seed: ComfyDynamicInput | null;
+  width: ComfyDynamicInput | null;
+  height: ComfyDynamicInput | null;
+  resolution: ComfyDynamicInput | null;
+  duration: ComfyDynamicInput | null;
+  batch: ComfyDynamicInput | null;
+  /** ComfyUI ResolutionSelector: the ratio + megapixels pair decides width/height. */
+  ratio: ComfyDynamicInput | null;
+  megapixels: ComfyDynamicInput | null;
+  /** Single media inputs (input image, first/last frame, mask, ref video/audio). */
+  slots: SlotDef[];
+  /** Autogrow media lists actually wired (image / video / audio). */
+  lists: ComfyDynamicInput[];
+  /** Parameters shown as composer chips (比例 / 尺寸 / 分辨率 / 时长 / 种子). */
+  common: ComfyDynamicInput[];
+  /** Everything else that is not media and not the prompt — folded. */
+  advanced: ComfyDynamicInput[];
+  hasH3Hint: boolean;
 }
 
 export function inputRole(inp: ComfyDynamicInput): string | null {
-	return normalizeInputRole(inp.role ?? null);
+  return normalizeInputRole(inp.role ?? null);
 }
 
 function hay(inp: ComfyDynamicInput): string {
-	return `${inp.role ?? ''} ${inp.label}`.toLowerCase();
+  return `${inp.role ?? ""} ${inp.label}`.toLowerCase();
 }
 
 export function isMedia(inp: ComfyDynamicInput): boolean {
-	return (
-		inp.kind === 'image' ||
-		inp.kind === 'image_url' ||
-		inp.kind === 'video' ||
-		inp.kind === 'audio' ||
-		inp.kind === 'image_list' ||
-		inp.kind === 'video_list' ||
-		inp.kind === 'audio_list'
-	);
+  return (
+    inp.kind === "image" ||
+    inp.kind === "image_url" ||
+    inp.kind === "video" ||
+    inp.kind === "audio" ||
+    inp.kind === "image_list" ||
+    inp.kind === "video_list" ||
+    inp.kind === "audio_list"
+  );
 }
 
 function isList(inp: ComfyDynamicInput): boolean {
-	return inp.kind === 'image_list' || inp.kind === 'video_list' || inp.kind === 'audio_list';
+  return (
+    inp.kind === "image_list" ||
+    inp.kind === "video_list" ||
+    inp.kind === "audio_list"
+  );
 }
 
 function isMask(inp: ComfyDynamicInput): boolean {
-	return inputRole(inp) === 'mask' || /mask|遮罩/.test(hay(inp));
+  return inputRole(inp) === "mask" || /mask|遮罩/.test(hay(inp));
 }
 
 // Auto-detected slots carry their role from the wiring; tagged (Input:…)
 // workflows still name frames only in the title.
 export function isFirstFrame(inp: ComfyDynamicInput, kind: DeskKind): boolean {
-	return inputRole(inp) === 'first_frame' || (!inp.auto && kind === 'video' && /first|start|首帧/.test(hay(inp)));
+  return (
+    inputRole(inp) === "first_frame" ||
+    (!inp.auto && kind === "video" && /first|start|首帧/.test(hay(inp)))
+  );
 }
 export function isLastFrame(inp: ComfyDynamicInput, kind: DeskKind): boolean {
-	return inputRole(inp) === 'last_frame' || (!inp.auto && kind === 'video' && /last|end|尾帧/.test(hay(inp)));
+  return (
+    inputRole(inp) === "last_frame" ||
+    (!inp.auto && kind === "video" && /last|end|尾帧/.test(hay(inp)))
+  );
 }
 
-export function listKind(entry: ComfyDynamicInput): 'image' | 'video' | 'audio' {
-	if (entry.kind === 'video_list') return 'video';
-	if (entry.kind === 'audio_list') return 'audio';
-	return 'image';
+export function listKind(
+  entry: ComfyDynamicInput,
+): "image" | "video" | "audio" {
+  if (entry.kind === "video_list") return "video";
+  if (entry.kind === "audio_list") return "audio";
+  return "image";
 }
 
-export function listPaths(values: FormValues, entry: ComfyDynamicInput): string[] {
-	const v = values[entry.nodeId];
-	if (Array.isArray(v)) return v;
-	return typeof v === 'string' && v ? [v] : [];
+export function listPaths(
+  values: FormValues,
+  entry: ComfyDynamicInput,
+): string[] {
+  const v = values[entry.nodeId];
+  if (Array.isArray(v)) return v;
+  return typeof v === "string" && v ? [v] : [];
 }
 
-export function classifySchema(schema: ComfyDynamicInput[], kind: DeskKind): DeskSchema {
-	const plain = (pred: (i: ComfyDynamicInput) => boolean) =>
-		schema.find((i) => !isMedia(i) && pred(i)) ?? null;
-	const byRole = (r: string) => plain((i) => inputRole(i) === r);
+export function classifySchema(
+  schema: ComfyDynamicInput[],
+  kind: DeskKind,
+): DeskSchema {
+  const plain = (pred: (i: ComfyDynamicInput) => boolean) =>
+    schema.find((i) => !isMedia(i) && pred(i)) ?? null;
+  const byRole = (r: string) => plain((i) => inputRole(i) === r);
 
-	const prompt = byRole('prompt');
-	const negative = byRole('negative');
-	const seed = byRole('seed');
-	const width = byRole('width');
-	const height = byRole('height');
-	const resolution = byRole('resolution');
-	const duration = byRole('duration');
-	const batch = plain((i) => /批次|batch/.test(hay(i)));
-	const ratio =
-		schema.find((i) => i.kind === 'select' && inputRole(i) === 'aspect_ratio' && i.resolution) ?? null;
-	const megapixels = ratio ? (schema.find((i) => i.nodeId === ratio.resolution!.megapixels) ?? null) : null;
+  const prompt = byRole("prompt");
+  const negative = byRole("negative");
+  const seed = byRole("seed");
+  const width = byRole("width");
+  const height = byRole("height");
+  const resolution = byRole("resolution");
+  const duration = byRole("duration");
+  const batch = plain((i) => /批次|batch/.test(hay(i)));
+  const ratio =
+    schema.find(
+      (i) =>
+        i.kind === "select" && inputRole(i) === "aspect_ratio" && i.resolution,
+    ) ?? null;
+  const megapixels = ratio
+    ? (schema.find((i) => i.nodeId === ratio.resolution!.megapixels) ?? null)
+    : null;
 
-	const media = schema.filter((i) => isMedia(i) && !isList(i));
-	const plainImages = media.filter(
-		(i) => i.kind === 'image' && !isMask(i) && !isFirstFrame(i, kind) && !isLastFrame(i, kind),
-	);
-	const editInput = kind === 'image' && plainImages.length === 1 ? plainImages[0] : null;
-	const slots: SlotDef[] = [];
-	let refIdx = 0;
-	for (const inp of media) {
-		const base = { inp, missing: '', firstFrame: false, lastFrame: false, mask: false };
-		if (inp.kind === 'video') {
-			slots.push({ ...base, label: t('studio.slotRefVideo'), mediaKind: 'video', fromResults: false });
-		} else if (inp.kind === 'audio') {
-			slots.push({ ...base, label: t('studio.slotAudio'), mediaKind: 'audio', fromResults: false });
-		} else if (isMask(inp)) {
-			slots.push({ ...base, mask: true, label: t('studio.slotMask'), mediaKind: 'image', fromResults: false });
-		} else if (isFirstFrame(inp, kind)) {
-			slots.push({
-				...base,
-				firstFrame: true,
-				label: t('studio.slotFirst'),
-				mediaKind: 'image',
-				fromResults: true,
-				missing: t('studio.errNeedFirstFrame'),
-			});
-		} else if (isLastFrame(inp, kind)) {
-			slots.push({ ...base, lastFrame: true, label: t('studio.slotLast'), mediaKind: 'image', fromResults: true });
-		} else if (inp === editInput) {
-			slots.push({
-				...base,
-				label: t('studio.slotInput'),
-				mediaKind: 'image',
-				fromResults: true,
-				missing: t('studio.errNeedInputImage'),
-			});
-		} else {
-			refIdx += 1;
-			const label = inp.auto
-				? inp.label
-				: refIdx === 1 && media.length === 1
-					? t('studio.slotRef')
-					: t('studio.slotRefN', { n: refIdx });
-			slots.push({
-				...base,
-				label,
-				mediaKind: 'image',
-				fromResults: true,
-				missing: t('studio.errUpload', { label }),
-			});
-		}
-	}
+  const media = schema.filter((i) => isMedia(i) && !isList(i));
+  const plainImages = media.filter(
+    (i) =>
+      i.kind === "image" &&
+      !isMask(i) &&
+      !isFirstFrame(i, kind) &&
+      !isLastFrame(i, kind),
+  );
+  const editInput =
+    kind === "image" && plainImages.length === 1 ? plainImages[0] : null;
+  const slots: SlotDef[] = [];
+  let refIdx = 0;
+  for (const inp of media) {
+    const base = {
+      inp,
+      missing: "",
+      firstFrame: false,
+      lastFrame: false,
+      mask: false,
+    };
+    if (inp.kind === "video") {
+      slots.push({
+        ...base,
+        label: t("studio.slotRefVideo"),
+        mediaKind: "video",
+        fromResults: false,
+      });
+    } else if (inp.kind === "audio") {
+      slots.push({
+        ...base,
+        label: t("studio.slotAudio"),
+        mediaKind: "audio",
+        fromResults: false,
+      });
+    } else if (isMask(inp)) {
+      slots.push({
+        ...base,
+        mask: true,
+        label: t("studio.slotMask"),
+        mediaKind: "image",
+        fromResults: false,
+      });
+    } else if (isFirstFrame(inp, kind)) {
+      slots.push({
+        ...base,
+        firstFrame: true,
+        label: t("studio.slotFirst"),
+        mediaKind: "image",
+        fromResults: true,
+        missing: t("studio.errNeedFirstFrame"),
+      });
+    } else if (isLastFrame(inp, kind)) {
+      slots.push({
+        ...base,
+        lastFrame: true,
+        label: t("studio.slotLast"),
+        mediaKind: "image",
+        fromResults: true,
+      });
+    } else if (inp === editInput) {
+      slots.push({
+        ...base,
+        label: t("studio.slotInput"),
+        mediaKind: "image",
+        fromResults: true,
+        missing: t("studio.errNeedInputImage"),
+      });
+    } else {
+      refIdx += 1;
+      const label = inp.auto
+        ? inp.label
+        : refIdx === 1 && media.length === 1
+          ? t("studio.slotRef")
+          : t("studio.slotRefN", { n: refIdx });
+      slots.push({
+        ...base,
+        label,
+        mediaKind: "image",
+        fromResults: true,
+        missing: t("studio.errUpload", { label }),
+      });
+    }
+  }
 
-	const lists = schema.filter(isList);
-	const common = [ratio, width, height, resolution, duration, seed].filter(
-		(i): i is ComfyDynamicInput => !!i,
-	);
-	const commonIds = new Set(common.map((i) => i.nodeId));
-	const advanced = schema.filter((i) => !isMedia(i) && i !== prompt && !commonIds.has(i.nodeId));
+  const lists = schema.filter(isList);
+  const common = [ratio, width, height, resolution, duration, seed].filter(
+    (i): i is ComfyDynamicInput => !!i,
+  );
+  const commonIds = new Set(common.map((i) => i.nodeId));
+  const advanced = schema.filter(
+    (i) => !isMedia(i) && i !== prompt && !commonIds.has(i.nodeId),
+  );
 
-	return {
-		prompt,
-		negative,
-		seed,
-		width,
-		height,
-		resolution,
-		duration,
-		batch,
-		ratio,
-		megapixels,
-		slots,
-		lists,
-		common,
-		advanced,
-		hasH3Hint: lists.some((e) => e.media_hint === 'minimax_h3_ref2va'),
-	};
+  return {
+    prompt,
+    negative,
+    seed,
+    width,
+    height,
+    resolution,
+    duration,
+    batch,
+    ratio,
+    megapixels,
+    slots,
+    lists,
+    common,
+    advanced,
+    hasH3Hint: lists.some((e) => e.media_hint === "minimax_h3_ref2va"),
+  };
 }
 
 /** Workflow JSON defaults — the 原值 every parameter falls back to. */
 export function schemaDefaults(schema: ComfyDynamicInput[]): FormValues {
-	const out: FormValues = {};
-	for (const inp of schema) {
-		if (inp.defaultValue !== undefined && inp.defaultValue !== '') out[inp.nodeId] = inp.defaultValue;
-	}
-	return out;
+  const out: FormValues = {};
+  for (const inp of schema) {
+    if (inp.defaultValue !== undefined && inp.defaultValue !== "")
+      out[inp.nodeId] = inp.defaultValue;
+  }
+  return out;
 }
 
 export function isChanged(inp: ComfyDynamicInput, values: FormValues): boolean {
-	const v = values[inp.nodeId];
-	const orig = inp.defaultValue;
-	if (v === undefined || v === '') return orig !== undefined && orig !== '';
-	if (orig === undefined || orig === '') return true;
-	return String(v) !== String(orig);
+  const v = values[inp.nodeId];
+  const orig = inp.defaultValue;
+  if (v === undefined || v === "") return orig !== undefined && orig !== "";
+  if (orig === undefined || orig === "") return true;
+  return String(v) !== String(orig);
 }
 
-export function changedParams(ds: DeskSchema, values: FormValues): ComfyDynamicInput[] {
-	return [...ds.common, ...ds.advanced].filter((i) => isChanged(i, values));
+export function changedParams(
+  ds: DeskSchema,
+  values: FormValues,
+): ComfyDynamicInput[] {
+  return [...ds.common, ...ds.advanced].filter((i) => isChanged(i, values));
 }
 
-export function outputSize(ds: DeskSchema, values: FormValues): { width: number; height: number } | null {
-	if (!ds.ratio?.resolution) return null;
-	const mp = Number(values[ds.megapixels?.nodeId ?? ''] ?? ds.megapixels?.defaultValue);
-	return resolutionSelectorSize(
-		String(values[ds.ratio.nodeId] ?? ds.ratio.defaultValue ?? ''),
-		mp,
-		ds.ratio.resolution.multiple,
-	);
+export function outputSize(
+  ds: DeskSchema,
+  values: FormValues,
+): { width: number; height: number } | null {
+  if (!ds.ratio?.resolution) return null;
+  const mp = Number(
+    values[ds.megapixels?.nodeId ?? ""] ?? ds.megapixels?.defaultValue,
+  );
+  return resolutionSelectorSize(
+    String(values[ds.ratio.nodeId] ?? ds.ratio.defaultValue ?? ""),
+    mp,
+    ds.ratio.resolution.multiple,
+  );
 }
 
 export function batchCount(ds: DeskSchema, values: FormValues): number {
-	if (!ds.batch) return 1;
-	const n = Number(values[ds.batch.nodeId]);
-	return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
+  if (!ds.batch) return 1;
+  const n = Number(values[ds.batch.nodeId]);
+  return Number.isFinite(n) && n > 0 ? Math.floor(n) : 1;
 }
 
 /** H3 Ref2VA official limits (soft hint, keyed off the node class only). */
 export function h3Warnings(ds: DeskSchema, values: FormValues): string[] {
-	if (!ds.hasH3Hint) return [];
-	const warns: string[] = [];
-	const counts = { image: 0, video: 0, audio: 0 };
-	for (const g of ds.lists) counts[listKind(g)] += listPaths(values, g).length;
-	const total = counts.image + counts.video + counts.audio;
-	if (total > 12) warns.push(t('wfMedia.h3TotalOver', { n: total }));
-	if (counts.audio > 0 && counts.image === 0 && counts.video === 0) warns.push(t('wfMedia.h3AudioAlone'));
-	return warns;
+  if (!ds.hasH3Hint) return [];
+  const warns: string[] = [];
+  const counts = { image: 0, video: 0, audio: 0 };
+  for (const g of ds.lists) counts[listKind(g)] += listPaths(values, g).length;
+  const total = counts.image + counts.video + counts.audio;
+  if (total > 12) warns.push(t("wfMedia.h3TotalOver", { n: total }));
+  if (counts.audio > 0 && counts.image === 0 && counts.video === 0)
+    warns.push(t("wfMedia.h3AudioAlone"));
+  return warns;
 }
 
 /** Same rules the backend enforces before queueing (comfyui/validate.py). */
-export function valueError(inp: ComfyDynamicInput, raw: string | number): string | null {
-	const label = inp.label;
-	if (inp.kind === 'select') {
-		return inp.options?.length && !inp.options.includes(String(raw)) ? t('studio.errOption', { label }) : null;
-	}
-	if (inp.kind !== 'number') return null;
-	const n = Number(raw);
-	if (!Number.isFinite(n)) return t('studio.errNumber', { label });
-	if (inp.integer && !Number.isInteger(n)) return t('studio.errInteger', { label });
-	if (inp.min != null && n < inp.min) return t('studio.errMin', { label, v: inp.min });
-	if (inp.max != null && n > inp.max) return t('studio.errMax', { label, v: inp.max });
-	return null;
+export function valueError(
+  inp: ComfyDynamicInput,
+  raw: string | number,
+): string | null {
+  const label = inp.label;
+  if (inp.kind === "select") {
+    return inp.options?.length && !inp.options.includes(String(raw))
+      ? t("studio.errOption", { label })
+      : null;
+  }
+  if (inp.kind !== "number") return null;
+  const n = Number(raw);
+  if (!Number.isFinite(n)) return t("studio.errNumber", { label });
+  if (inp.integer && !Number.isInteger(n))
+    return t("studio.errInteger", { label });
+  if (inp.min != null && n < inp.min)
+    return t("studio.errMin", { label, v: inp.min });
+  if (inp.max != null && n > inp.max)
+    return t("studio.errMax", { label, v: inp.max });
+  return null;
 }
 
 /** Field errors keyed by nodeId (spec §6.2 wording); '' keys never block. */
 export function validateForm(
-	schema: ComfyDynamicInput[],
-	ds: DeskSchema,
-	values: FormValues,
+  schema: ComfyDynamicInput[],
+  ds: DeskSchema,
+  values: FormValues,
 ): Record<string, string> {
-	const errs: Record<string, string> = {};
-	if (ds.prompt?.required) {
-		const v = String(values[ds.prompt.nodeId] ?? '');
-		if (!v.trim()) errs[ds.prompt.nodeId] = t('studio.errPrompt');
-		else if (v.length > 2000) errs[ds.prompt.nodeId] = t('studio.errPromptLong');
-	}
-	const first = ds.slots.find((s) => s.firstFrame);
-	const last = ds.slots.find((s) => s.lastFrame);
-	if (first && last) {
-		const a = String(values[first.inp.nodeId] ?? '');
-		const b = String(values[last.inp.nodeId] ?? '');
-		// 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] = ' ';
-		}
-	}
-	for (const s of ds.slots) {
-		if (!s.inp.required) continue;
-		if (!String(values[s.inp.nodeId] ?? '').trim()) {
-			errs[s.inp.nodeId] = s.missing || t('studio.errUpload', { label: s.label });
-		}
-	}
-	for (const g of ds.lists) {
-		const n = listPaths(values, g).length;
-		const max = g.max ?? 9;
-		if (n < (g.min ?? 1)) {
-			errs[g.nodeId] =
-				g.kind === 'image_list'
-					? t('studio.errNeedRef')
-					: t('studio.errNeedRefMedia', { n: g.min ?? 1, label: g.label });
-		} else if (n > max) {
-			errs[g.nodeId] = t('studio.errRefMax', { max, n, k: n - max });
-		}
-	}
-	for (const inp of [...ds.common, ...ds.advanced]) {
-		if (inp.required && !String(values[inp.nodeId] ?? '').trim()) {
-			errs[inp.nodeId] = t('studio.errFill', { label: inp.label });
-		}
-	}
-	for (const inp of schema) {
-		const raw = values[inp.nodeId];
-		if (raw === undefined || Array.isArray(raw) || String(raw).trim() === '' || errs[inp.nodeId]) continue;
-		const msg = valueError(inp, raw);
-		if (msg) errs[inp.nodeId] = msg;
-	}
-	return errs;
+  const errs: Record<string, string> = {};
+  if (ds.prompt?.required) {
+    const v = String(values[ds.prompt.nodeId] ?? "");
+    if (!v.trim()) errs[ds.prompt.nodeId] = t("studio.errPrompt");
+    else if (v.length > 2000)
+      errs[ds.prompt.nodeId] = t("studio.errPromptLong");
+  }
+  const first = ds.slots.find((s) => s.firstFrame);
+  const last = ds.slots.find((s) => s.lastFrame);
+  if (first && last) {
+    const a = String(values[first.inp.nodeId] ?? "");
+    const b = String(values[last.inp.nodeId] ?? "");
+    // 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] = " ";
+    }
+  }
+  for (const s of ds.slots) {
+    if (!s.inp.required) continue;
+    if (!String(values[s.inp.nodeId] ?? "").trim()) {
+      errs[s.inp.nodeId] =
+        s.missing || t("studio.errUpload", { label: s.label });
+    }
+  }
+  for (const g of ds.lists) {
+    const n = listPaths(values, g).length;
+    const max = g.max ?? 9;
+    if (n < (g.min ?? 1)) {
+      errs[g.nodeId] =
+        g.kind === "image_list"
+          ? t("studio.errNeedRef")
+          : t("studio.errNeedRefMedia", { n: g.min ?? 1, label: g.label });
+    } else if (n > max) {
+      errs[g.nodeId] = t("studio.errRefMax", { max, n, k: n - max });
+    }
+  }
+  for (const inp of [...ds.common, ...ds.advanced]) {
+    if (inp.required && !String(values[inp.nodeId] ?? "").trim()) {
+      errs[inp.nodeId] = t("studio.errFill", { label: inp.label });
+    }
+  }
+  for (const inp of schema) {
+    const raw = values[inp.nodeId];
+    if (
+      raw === undefined ||
+      Array.isArray(raw) ||
+      String(raw).trim() === "" ||
+      errs[inp.nodeId]
+    )
+      continue;
+    const msg = valueError(inp, raw);
+    if (msg) errs[inp.nodeId] = msg;
+  }
+  return errs;
 }
 
 /** Media a slot still waits for — the 「还缺：…」 hint next to 生成. */
-export function missingMedia(ds: DeskSchema, values: FormValues): Array<{ nodeId: string; label: string }> {
-	const out: Array<{ nodeId: string; label: string }> = [];
-	for (const s of ds.slots) {
-		if (s.inp.required && !String(values[s.inp.nodeId] ?? '').trim()) out.push({ nodeId: s.inp.nodeId, label: s.label });
-	}
-	for (const g of ds.lists) {
-		if (listPaths(values, g).length < (g.min ?? 1)) out.push({ nodeId: g.nodeId, label: g.label });
-	}
-	return out;
+export function missingMedia(
+  ds: DeskSchema,
+  values: FormValues,
+): Array<{ nodeId: string; label: string }> {
+  const out: Array<{ nodeId: string; label: string }> = [];
+  for (const s of ds.slots) {
+    if (s.inp.required && !String(values[s.inp.nodeId] ?? "").trim())
+      out.push({ nodeId: s.inp.nodeId, label: s.label });
+  }
+  for (const g of ds.lists) {
+    if (listPaths(values, g).length < (g.min ?? 1))
+      out.push({ nodeId: g.nodeId, label: g.label });
+  }
+  return out;
 }
 
 export function usageLabel(u: WorkflowUsage): string {
-	return t(`usage.${u}`);
+  return t(`usage.${u}`);
 }
 
 /** Mode badge: the stored usage when we have one, else the wiring shape. */
-export function modeLabel(wf: Workflow | null, ds: DeskSchema, kind: DeskKind): string {
-	if (wf?.usage) return usageLabel(wf.usage);
-	if (ds.lists.some((g) => g.kind === 'image_list')) return t('studio.modeRefToVideo');
-	if (ds.slots.some((s) => s.firstFrame)) return t('studio.modeImageToVideo');
-	if (kind === 'image' && ds.slots.some((s) => s.mediaKind === 'image' && !s.mask))
-		return t('studio.modeImageEdit');
-	if (ds.slots.length) return ds.slots.map((s) => s.label).join(' · ');
-	return kind === 'image' ? t('studio.modeTextToImage') : t('studio.modeTextToVideo');
+export function modeLabel(
+  wf: Workflow | null,
+  ds: DeskSchema,
+  kind: DeskKind,
+): string {
+  if (wf?.usage) return usageLabel(wf.usage);
+  if (ds.lists.some((g) => g.kind === "image_list"))
+    return t("studio.modeRefToVideo");
+  if (ds.slots.some((s) => s.firstFrame)) return t("studio.modeImageToVideo");
+  if (
+    kind === "image" &&
+    ds.slots.some((s) => s.mediaKind === "image" && !s.mask)
+  )
+    return t("studio.modeImageEdit");
+  if (ds.slots.length) return ds.slots.map((s) => s.label).join(" · ");
+  return kind === "image"
+    ? t("studio.modeTextToImage")
+    : t("studio.modeTextToVideo");
 }
 
 /** Picker row summary of a workflow's real media inputs, e.g. 参考图 1–9 张. */
 export function slotSummary(wf: Workflow): string {
-	const ds = classifySchema(wf.input_schema ?? [], wf.kind);
-	const parts = [
-		...ds.slots.map((s) => t('desk.slotOne', { label: s.label })),
-		...ds.lists.map((g) => t('desk.slotRange', { label: g.label, min: g.min ?? 1, max: g.max ?? 9 })),
-	];
-	return parts.length ? parts.join(' · ') : t('desk.promptOnly');
+  const ds = classifySchema(wf.input_schema ?? [], wf.kind);
+  const parts = [
+    ...ds.slots.map((s) => t("desk.slotOne", { label: s.label })),
+    ...ds.lists.map((g) =>
+      t("desk.slotRange", { label: g.label, min: g.min ?? 1, max: g.max ?? 9 }),
+    ),
+  ];
+  return parts.length ? parts.join(" · ") : t("desk.promptOnly");
 }
 
 /** Short chip text for one common parameter value. */
-export function chipValue(inp: ComfyDynamicInput, values: FormValues, ds: DeskSchema): string {
-	const raw = values[inp.nodeId] ?? inp.defaultValue ?? '';
-	const v = Array.isArray(raw) ? raw.join(',') : String(raw);
-	if (inp === ds.ratio) {
-		const size = outputSize(ds, values);
-		return size ? `${ratioShort(v)} · ${size.width}×${size.height}` : ratioShort(v);
-	}
-	if (inp === ds.duration) return v ? t('desk.chipSeconds', { v }) : t('studio.durationLabel');
-	if (inp === ds.seed) return t('desk.chipSeed', { v: v.length > 8 ? `${v.slice(0, 8)}…` : v || '—' });
-	if (inp === ds.resolution) return t('desk.chipResolution', { v: v || '—' });
-	return v || inp.label;
+export function chipValue(
+  inp: ComfyDynamicInput,
+  values: FormValues,
+  ds: DeskSchema,
+): string {
+  const raw = values[inp.nodeId] ?? inp.defaultValue ?? "";
+  const v = Array.isArray(raw) ? raw.join(",") : String(raw);
+  if (inp === ds.ratio) {
+    const size = outputSize(ds, values);
+    return size
+      ? `${ratioShort(v)} · ${size.width}×${size.height}`
+      : ratioShort(v);
+  }
+  if (inp === ds.duration)
+    return v ? t("desk.chipSeconds", { v }) : t("studio.durationLabel");
+  if (inp === ds.seed)
+    return t("desk.chipSeed", {
+      v: v.length > 8 ? `${v.slice(0, 8)}…` : v || "—",
+    });
+  if (inp === ds.resolution) return t("desk.chipResolution", { v: v || "—" });
+  return v || inp.label;
 }

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

@@ -1,120 +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';
+import { SvelteMap, 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.
-*/
+ * 撤销删除 (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;
+  /** 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;
+  /** 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;
+  const pending = new SvelteSet<number>();
+  const entries = new SvelteMap<
+    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 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();
-	}
+  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,
-			});
-		}
-	}
+  /** 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);
-		}
-	}
+  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);
+  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,
-	};
+  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/generate/takes.ts

@@ -1,129 +1,194 @@
-import type { Job, Workflow } from '$lib/comfy/types';
-import { parseDbTs } from '$lib/dbtime';
-import { jobStatusInfo } from '$lib/jobStatus';
-import { resolutionSelectorSize } from '$lib/comfy/resolution';
-import { t } from '$lib/i18n.svelte';
-import { classifySchema, inputRole, isFirstFrame, isLastFrame, isMedia } from './schema';
+import type { Job, Workflow } from "$lib/comfy/types";
+import { parseDbTs } from "$lib/dbtime";
+import { jobStatusInfo } from "$lib/jobStatus";
+import { resolutionSelectorSize } from "$lib/comfy/resolution";
+import { t } from "$lib/i18n.svelte";
+import {
+  classifySchema,
+  inputRole,
+  isFirstFrame,
+  isLastFrame,
+  isMedia,
+} from "./schema";
 
 /** Read-only views of a finished / running take (one playground job). */
 
-export type FeedFilter = 'all' | 'image' | 'video' | 'failed';
+export type FeedFilter = "all" | "image" | "video" | "failed";
 
-export function jobValues(job: Job): Record<string, unknown> {
-	return (job.payload?.input_values ?? {}) as Record<string, unknown>;
+/** The workbench source a take was generated with, if any (HEL-684). */
+export interface TakeWorkbenchCtx {
+  projectId: number;
+  stage: string;
+  sourceKind: "asset" | "shot";
+  sourceId: string;
+  label?: string;
 }
 
-export function jobValueByRole(job: Job, wf: Workflow | undefined, ...roles: string[]): string | null {
-	if (!wf) return null;
-	const vals = jobValues(job);
-	for (const inp of wf.input_schema ?? []) {
-		const r = inputRole(inp);
-		if (r && roles.includes(r)) {
-			const v = vals[inp.nodeId];
-			if (v !== undefined && v !== null && String(v).trim() !== '') return String(v);
-		}
-	}
-	return null;
+export function workbenchCtxOf(job: Job): TakeWorkbenchCtx | null {
+  const stamp = job.payload?.workbench;
+  if (!stamp || typeof stamp !== "object") return null;
+  const s = stamp as Record<string, unknown>;
+  const projectId = s.project_id;
+  const stage = typeof s.stage === "string" ? s.stage : "";
+  const sourceKind =
+    s.source_kind === "asset" || s.source_kind === "shot"
+      ? s.source_kind
+      : null;
+  const sourceId = typeof s.source_id === "string" ? s.source_id : "";
+  if (typeof projectId !== "number" || !stage || !sourceKind || !sourceId)
+    return null;
+  const label =
+    typeof s.label === "string" && s.label.trim() ? s.label : undefined;
+  return {
+    projectId,
+    stage,
+    sourceKind,
+    sourceId,
+    label,
+  };
+}
+
+export function jobValues(job: Job): Record<string, unknown> {
+  return (job.payload?.input_values ?? {}) as Record<string, unknown>;
+}
+
+export function jobValueByRole(
+  job: Job,
+  wf: Workflow | undefined,
+  ...roles: string[]
+): string | null {
+  if (!wf) return null;
+  const vals = jobValues(job);
+  for (const inp of wf.input_schema ?? []) {
+    const r = inputRole(inp);
+    if (r && roles.includes(r)) {
+      const v = vals[inp.nodeId];
+      if (v !== undefined && v !== null && String(v).trim() !== "")
+        return String(v);
+    }
+  }
+  return null;
 }
 
 export function promptOf(job: Job, wf: Workflow | undefined): string {
-	return jobValueByRole(job, wf, 'prompt') ?? '';
+  return jobValueByRole(job, wf, "prompt") ?? "";
 }
 
 export interface TakeInput {
-	label: string;
-	path: string;
-	kind: 'image' | 'video' | 'audio';
+  label: string;
+  path: string;
+  kind: "image" | "video" | "audio";
 }
 
 /** Media the take was generated from, in workflow order. */
 export function inputsOf(job: Job, wf: Workflow | undefined): TakeInput[] {
-	if (!wf) return [];
-	const kind = wf.kind;
-	const vals = jobValues(job);
-	const out: TakeInput[] = [];
-	let refIdx = 0;
-	for (const inp of wf.input_schema ?? []) {
-		if (!isMedia(inp)) continue;
-		const v = vals[inp.nodeId];
-		const list = Array.isArray(v) ? v : typeof v === 'string' && v ? [v] : [];
-		const mk = inp.kind.startsWith('video') ? 'video' : inp.kind.startsWith('audio') ? 'audio' : 'image';
-		list.forEach((p, i) => {
-			if (typeof p !== 'string' || !p) return;
-			let label = inp.label;
-			if (inp.kind === 'image_list') label = t('studio.slotRefN', { n: i + 1 });
-			else if (isFirstFrame(inp, kind)) label = t('studio.slotFirst');
-			else if (isLastFrame(inp, kind)) label = t('studio.slotLast');
-			else if (inp.kind === 'image' && inputRole(inp) !== 'mask') label = t('studio.slotRefN', { n: ++refIdx });
-			out.push({ label, path: p, kind: mk });
-		});
-	}
-	return out;
+  if (!wf) return [];
+  const kind = wf.kind;
+  const vals = jobValues(job);
+  const out: TakeInput[] = [];
+  let refIdx = 0;
+  for (const inp of wf.input_schema ?? []) {
+    if (!isMedia(inp)) continue;
+    const v = vals[inp.nodeId];
+    const list = Array.isArray(v) ? v : typeof v === "string" && v ? [v] : [];
+    const mk = inp.kind.startsWith("video")
+      ? "video"
+      : inp.kind.startsWith("audio")
+        ? "audio"
+        : "image";
+    list.forEach((p, i) => {
+      if (typeof p !== "string" || !p) return;
+      let label = inp.label;
+      if (inp.kind === "image_list") label = t("studio.slotRefN", { n: i + 1 });
+      else if (isFirstFrame(inp, kind)) label = t("studio.slotFirst");
+      else if (isLastFrame(inp, kind)) label = t("studio.slotLast");
+      else if (inp.kind === "image" && inputRole(inp) !== "mask")
+        label = t("studio.slotRefN", { n: ++refIdx });
+      out.push({ label, path: p, kind: mk });
+    });
+  }
+  return out;
 }
 
 /** 888×1184 · 种子 42 · 5 秒 — values that differ per take. */
-export function specOf(job: Job, wf: Workflow | undefined): Array<{ label: string; value: string }> {
-	const out: Array<{ label: string; value: string }> = [];
-	if (!wf) return out;
-	const w = jobValueByRole(job, wf, 'width');
-	const h = jobValueByRole(job, wf, 'height');
-	if (w && h) out.push({ label: t('desk.specSize'), value: `${w}×${h}` });
-	else {
-		const ds = classifySchema(wf.input_schema ?? [], wf.kind);
-		if (ds.ratio?.resolution) {
-			const vals = jobValues(job);
-			const size = resolutionSelectorSize(
-				String(vals[ds.ratio.nodeId] ?? ds.ratio.defaultValue ?? ''),
-				Number(vals[ds.ratio.resolution.megapixels] ?? ds.megapixels?.defaultValue),
-				ds.ratio.resolution.multiple,
-			);
-			if (size) out.push({ label: t('desk.specSize'), value: `${size.width}×${size.height}` });
-		}
-	}
-	const seed = jobValueByRole(job, wf, 'seed');
-	if (seed) out.push({ label: t('studio.seedLabel'), value: seed });
-	const dur = jobValueByRole(job, wf, 'duration');
-	if (dur) out.push({ label: t('studio.durationLabel'), value: t('desk.chipSeconds', { v: dur }) });
-	return out;
+export function specOf(
+  job: Job,
+  wf: Workflow | undefined,
+): Array<{ label: string; value: string }> {
+  const out: Array<{ label: string; value: string }> = [];
+  if (!wf) return out;
+  const w = jobValueByRole(job, wf, "width");
+  const h = jobValueByRole(job, wf, "height");
+  if (w && h) out.push({ label: t("desk.specSize"), value: `${w}×${h}` });
+  else {
+    const ds = classifySchema(wf.input_schema ?? [], wf.kind);
+    if (ds.ratio?.resolution) {
+      const vals = jobValues(job);
+      const size = resolutionSelectorSize(
+        String(vals[ds.ratio.nodeId] ?? ds.ratio.defaultValue ?? ""),
+        Number(
+          vals[ds.ratio.resolution.megapixels] ?? ds.megapixels?.defaultValue,
+        ),
+        ds.ratio.resolution.multiple,
+      );
+      if (size)
+        out.push({
+          label: t("desk.specSize"),
+          value: `${size.width}×${size.height}`,
+        });
+    }
+  }
+  const seed = jobValueByRole(job, wf, "seed");
+  if (seed) out.push({ label: t("studio.seedLabel"), value: seed });
+  const dur = jobValueByRole(job, wf, "duration");
+  if (dur)
+    out.push({
+      label: t("studio.durationLabel"),
+      value: t("desk.chipSeconds", { v: dur }),
+    });
+  return out;
 }
 
 export function isVideoOutput(job: Job, path: string): boolean {
-	return job.kind === 'video' && !/\.(png|jpe?g|webp)$/i.test(path);
+  return job.kind === "video" && !/\.(png|jpe?g|webp)$/i.test(path);
 }
 
 export function elapsedSec(job: Job, nowMs: number): number | null {
-	const from = job.started_at ? parseDbTs(job.started_at) : parseDbTs(job.created_at);
-	if (!Number.isFinite(from)) return null;
-	const to = job.completed_at ? parseDbTs(job.completed_at) : nowMs;
-	return Math.max(0, (to - from) / 1000);
+  const from = job.started_at
+    ? parseDbTs(job.started_at)
+    : parseDbTs(job.created_at);
+  if (!Number.isFinite(from)) return null;
+  const to = job.completed_at ? parseDbTs(job.completed_at) : nowMs;
+  return Math.max(0, (to - from) / 1000);
 }
 
 export function fmtDur(sec: number | null): string {
-	if (sec == null) return '—';
-	if (sec < 60) return t('desk.durSec', { s: Math.floor(sec) });
-	const m = Math.floor(sec / 60);
-	const s = Math.floor(sec % 60);
-	return t('desk.durMin', { m, s: String(s).padStart(2, '0') });
+  if (sec == null) return "—";
+  if (sec < 60) return t("desk.durSec", { s: Math.floor(sec) });
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return t("desk.durMin", { m, s: String(s).padStart(2, "0") });
 }
 
 export function fmtClock(ms: number): string {
-	const d = new Date(ms);
-	return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  const d = new Date(ms);
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
 }
 
 /** 今天 / 昨天 / 9月28日 heading for the feed. */
 export function dayLabel(ms: number, nowMs: number): string {
-	const d = new Date(ms);
-	const today = new Date(nowMs);
-	const startOf = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
-	const diff = Math.round((startOf(today) - startOf(d)) / 86_400_000);
-	if (diff === 0) return t('desk.today');
-	if (diff === 1) return t('desk.yesterday');
-	return t('desk.dayDate', { m: d.getMonth() + 1, d: d.getDate() });
+  const d = new Date(ms);
+  const today = new Date(nowMs);
+  const startOf = (x: Date) =>
+    new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
+  const diff = Math.round((startOf(today) - startOf(d)) / 86_400_000);
+  if (diff === 0) return t("desk.today");
+  if (diff === 1) return t("desk.yesterday");
+  return t("desk.dayDate", { m: d.getMonth() + 1, d: d.getDate() });
 }
 
 export function matchesFilter(job: Job, filter: FeedFilter): boolean {
-	if (filter === 'all') return true;
-	if (filter === 'failed') return jobStatusInfo(job).tone === 'fail';
-	return job.kind === filter;
+  if (filter === "all") return true;
+  if (filter === "failed") return jobStatusInfo(job).tone === "fail";
+  return job.kind === filter;
 }

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

@@ -1,542 +1,467 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { createMutation, 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 { t } from '$lib/i18n.svelte';
+  import { parseDbTs } from '$lib/dbtime';
+  import { resolve } from "$app/paths";
+  import { goto } from "$app/navigation";
+  import { createMutation, 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 { t } from "$lib/i18n.svelte";
 
-	/**
-	 * A「片场暗房」project card for the home overview (a1, HEL-608).
-	 * All numbers come from the real project record — no sample progress.
-	 */
+  /**
+   * A「片场暗房」project card for the home overview (a1, HEL-608).
+   * All numbers come from the real project record — no sample progress.
+   */
 
-	interface Props {
-		project: Project;
-	}
+  interface Props {
+    project: Project;
+  }
 
-	let { project }: Props = $props();
+  let { project }: Props = $props();
 
-	const client = useQueryClient();
+  const client = useQueryClient();
 
-	const stats = $derived(
-		project.stats ?? {
-			scene_count: 0,
-			character_count: 0,
-			asset_ready_count: 0,
-			asset_total_count: 0,
-			stage_confirmed: 0,
-			stage_status: {} as Record<string, string>,
-			active_jobs: 0,
-		},
-	);
+  const stats = $derived(
+    project.stats ?? {
+      scene_count: 0,
+      character_count: 0,
+      asset_ready_count: 0,
+      asset_total_count: 0,
+      stage_confirmed: 0,
+      stage_status: {} as Record<string, string>,
+      active_jobs: 0,
+    },
+  );
 
-	// Five-stage creation progress (HEL-614) — real stage rows only.
-	const STAGE_SEGMENTS = ['script', 'style', 'storyboard', 'assets', 'shot'] as const;
-	function segClass(key: string): string {
-		const state = stats.stage_status?.[key];
-		if (state === 'confirmed') return 'seg-confirmed';
-		if (state === 'running') return 'seg-running';
-		if (state === 'awaiting_confirm') return 'seg-draft';
-		return '';
-	}
+  // Five-stage creation progress (HEL-614) — real stage rows only.
+  const STAGE_SEGMENTS = [
+    "script",
+    "style",
+    "storyboard",
+    "assets",
+    "shot",
+  ] as const;
+  function segClass(key: string): string {
+    const state = stats.stage_status?.[key];
+    if (state === "confirmed") return "seg-confirmed";
+    if (state === "running") return "seg-running";
+    if (state === "awaiting_confirm") return "seg-draft";
+    return "";
+  }
 
-	// Spec §2.1 allows the five avatar gradients as cover placeholders.
-	const PLACEHOLDER_GRADIENTS = [
-		'var(--avatar-1)',
-		'var(--avatar-2)',
-		'var(--avatar-3)',
-		'var(--avatar-4)',
-		'var(--avatar-5)',
-	];
-	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)',
-	);
+  // Spec §2.1 allows the five avatar gradients as cover placeholders.
+  const placeholder = "var(--bg-3)";
+  // HEL-680 灰阶封面占位：1–2 亮阶配深图标，3–5 暗阶配浅图标
+  const placeholderIconColor = $derived("var(--text-2)");
 
-	const coverUrl = $derived(assetUrl(project.cover_path));
+  const coverUrl = $derived(assetUrl(project.cover_path));
 
-	let coverFailed = $state(false);
+  let coverFailed = $state(false);
 
-	// Cover tag reflects the real five-stage state (a1: 「分镜设计 · 进行中」):
-	// all confirmed → 已完成; otherwise the first unconfirmed stage + its state.
-	const cover = $derived.by(() => {
-		if (stats.stage_confirmed >= STAGE_SEGMENTS.length) {
-			return { cls: 'st-done', label: t('home.statusDone') };
-		}
-		const current = STAGE_SEGMENTS.find((k) => stats.stage_status?.[k] !== 'confirmed');
-		const state = current ? stats.stage_status?.[current] : undefined;
-		const stageName = current ? t(`workbench.stage.${current}`) : '';
-		if (state === 'running') {
-			return { cls: 'st-progress', label: `${stageName} · ${t('workbench.state.running')}` };
-		}
-		if (state === 'awaiting_confirm') {
-			return { cls: 'st-pending', label: `${stageName} · ${t('workbench.state.draft')}` };
-		}
-		if (stats.stage_confirmed > 0) {
-			return { cls: 'st-progress', label: `${stageName} · ${t('home.statusProgress')}` };
-		}
-		return { cls: 'st-draft', label: t('home.statusDraft') };
-	});
+  // Cover tag reflects the real five-stage state (a1: 「分镜设计 · 进行中」):
+  // all confirmed → 已完成; otherwise the first unconfirmed stage + its state.
+  const cover = $derived.by(() => {
+    if (stats.stage_confirmed >= STAGE_SEGMENTS.length) {
+      return { cls: "st-done", label: t("home.statusDone") };
+    }
+    const current = STAGE_SEGMENTS.find(
+      (k) => stats.stage_status?.[k] !== "confirmed",
+    );
+    const state = current ? stats.stage_status?.[current] : undefined;
+    const stageName = current ? t(`workbench.stage.${current}`) : "";
+    if (state === "running") {
+      return {
+        cls: "st-progress",
+        label: `${stageName} · ${t("workbench.state.running")}`,
+      };
+    }
+    if (state === "awaiting_confirm") {
+      return {
+        cls: "st-pending",
+        label: `${stageName} · ${t("workbench.state.draft")}`,
+      };
+    }
+    if (stats.stage_confirmed > 0) {
+      return {
+        cls: "st-progress",
+        label: `${stageName} · ${t("home.statusProgress")}`,
+      };
+    }
+    return { cls: "st-draft", label: t("home.statusDraft") };
+  });
 
-	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) });
-	}
+  function relativeTime(iso: string): string {
+    const then = parseDbTs(iso);
+    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 updatedLabel = $derived(relativeTime(project.updated_at));
 
-	// ---- overflow menu (rename / delete), pattern from ProjectCard ----
-	let menuOpen = $state(false);
-	let menuEl = $state<HTMLDivElement | null>(null);
+  // ---- overflow menu (rename / delete), pattern from ProjectCard ----
+  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;
-		};
-		window.addEventListener('click', onDocClick);
-		window.addEventListener('keydown', onKey);
-		return () => {
-			window.removeEventListener('click', onDocClick);
-			window.removeEventListener('keydown', onKey);
-		};
-	});
+  $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;
+    };
+    window.addEventListener("click", onDocClick);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("click", onDocClick);
+      window.removeEventListener("keydown", onKey);
+    };
+  });
 
-	let renameOpen = $state(false);
-	let renameValue = $state('');
+  let renameOpen = $state(false);
+  let renameValue = $state("");
 
-	function openRename() {
-		menuOpen = false;
-		renameValue = project.title;
-		renameOpen = true;
-	}
+  function openRename() {
+    menuOpen = false;
+    renameValue = project.title;
+    renameOpen = true;
+  }
 
-	const renameMutation = createMutation({
-		mutationFn: (title: string) => projects.update(project.id, { title }),
-		onSuccess: () => {
-			client.invalidateQueries({ queryKey: ['projects'] });
-			toast.success(t('projectCard.renamedTo', { title: renameValue }));
-		},
-		onError: (err) => {
-			toast.error(err instanceof Error ? err.message : t('projectCard.renameFailed'));
-		},
-	});
+  const renameMutation = createMutation({
+    mutationFn: (title: string) => projects.update(project.id, { title }),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["projects"] });
+      toast.success(t("projectCard.renamedTo", { title: renameValue }));
+    },
+    onError: (err) => {
+      toast.error(
+        err instanceof Error ? err.message : t("projectCard.renameFailed"),
+      );
+    },
+  });
 
-	function submitRename() {
-		const title = renameValue.trim();
-		renameOpen = false;
-		if (!title || title === project.title) return;
-		$renameMutation.mutate(title);
-	}
+  function submitRename() {
+    const title = renameValue.trim();
+    renameOpen = false;
+    if (!title || title === project.title) return;
+    $renameMutation.mutate(title);
+  }
 
-	let deleteOpen = $state(false);
+  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'));
-		},
-	});
+  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="a-card">
-	<button
-		type="button"
-		class="card-main"
-		aria-label={t('projectCard.open', { title: project.title })}
-		onclick={() => goto(`/workbench/${project.id}`)}
-	>
-		<span class="cover">
-			{#if coverUrl && !coverFailed}
-				<img
-					class="cover-img"
-					src={coverUrl}
-					alt=""
-					loading="lazy"
-					onerror={() => (coverFailed = true)}
-				/>
-			{:else}
-				<span
-					class="cover-ph"
-					style:background={placeholder}
-					style:color={placeholderIconColor}
-					aria-hidden="true"
-				>
-					<Icon name="film" size={22} />
-				</span>
-			{/if}
-			<span class="status-tag {cover.cls}">{cover.label}</span>
-		</span>
-		<span class="body">
-			<span class="title-row">
-				<span class="title">{project.title}</span>
-				<span class="arrow" aria-hidden="true">→</span>
-			</span>
-			<span class="idea">{project.idea || t('home.noIdea')}</span>
-			<span class="stage-bar" aria-label={t('home.stageProgress')}>
-				{#each STAGE_SEGMENTS as key (key)}
-					<span class="seg {segClass(key)}" title={t(`workbench.stage.${key}`)}></span>
-				{/each}
-				<span class="seg-count mono">{stats.stage_confirmed}/5</span>
-				{#if stats.active_jobs > 0}
-					<span class="jobs-pill">{t('home.activeJobs', { n: stats.active_jobs })}</span>
-				{/if}
-			</span>
-			<span class="meta">
-				<span class="meta-stats mono">
-					{t('home.statScenes', { n: stats.scene_count })}
-					· {t('home.statCharacters', { n: stats.character_count })}
-					· {t('home.statAssets', {
-						ready: stats.asset_ready_count,
-						total: stats.asset_total_count,
-					})}
-				</span>
-				<span class="meta-time">{updatedLabel}</span>
-			</span>
-		</span>
-	</button>
+  <button
+    type="button"
+    class="card-main"
+    aria-label={t("projectCard.open", { title: project.title })}
+    onclick={() => goto(resolve(`/workbench/${project.id}`))}
+  >
+    <span class="cover">
+      {#if coverUrl && !coverFailed}
+        <img
+          class="cover-img"
+          src={coverUrl}
+          alt=""
+          loading="lazy"
+          onerror={() => (coverFailed = true)}
+        />
+      {:else}
+        <span
+          class="cover-ph"
+          style:background={placeholder}
+          style:color={placeholderIconColor}
+          aria-hidden="true"
+        >
+          <span class="cover-type"
+            >✳<small>STORY / {String(project.id).padStart(3, "0")}</small></span
+          >
+        </span>
+      {/if}
+      <span class="status-tag {cover.cls}">{cover.label}</span>
+    </span>
+    <span class="body">
+      <span class="title-row">
+        <span class="title">{project.title}</span>
+        <span class="arrow" aria-hidden="true">→</span>
+      </span>
+      <span class="stage-bar" aria-label={t("home.stageProgress")}>
+        {#each STAGE_SEGMENTS as key (key)}
+          <span class="seg {segClass(key)}" title={t(`workbench.stage.${key}`)}
+          ></span>
+        {/each}
 
-	<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">
-				<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 danger"
-					onclick={() => {
-						menuOpen = false;
-						deleteOpen = true;
-					}}
-				>
-					<Icon name="trash" size={14} />
-					{t('common.delete')}
-				</button>
-			</div>
-		{/if}
-	</div>
+      </span>
+      <span class="meta">
+        <span>阶段 {Math.min(5, stats.stage_confirmed + 1)}/5</span>
+        <span class="meta-time">{updatedLabel}</span>
+      </span>
+    </span>
+  </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">
+        <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 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 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()}
+  bind:open={deleteOpen}
+  title={t("projectCard.deleteTitle")}
+  message={t("projectCard.deleteMessage", { title: project.title })}
+  confirmLabel={t("common.delete")}
+  danger
+  onconfirm={() => $deleteMutation.mutate()}
 />
 
 <style>
-	.a-card {
-		position: relative;
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: 10px;
-		overflow: hidden;
-		transition: border-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
-	}
-	.a-card:hover {
-		border-color: var(--border-strong);
-	}
-	.a-card:hover .arrow {
-		opacity: 1;
-		transform: translateX(0);
-	}
-
-	.card-main {
-		display: flex;
-		flex-direction: column;
-		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;
-	}
-
-	.cover {
-		position: relative;
-		display: block;
-		height: 132px;
-		background: var(--surface-2);
-		overflow: hidden;
-	}
-	.cover-img {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-	.cover-ph {
-		position: absolute;
-		inset: 0;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: color-mix(in srgb, var(--accent-ink) 82%, transparent);
-		opacity: 0.9;
-	}
-	.status-tag {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		padding: 2px 9px;
-		border-radius: 999px;
-		font-size: 10.5px;
-		font-weight: 600;
-		background: var(--media-scrim);
-		border: 1px solid var(--border-strong);
-		backdrop-filter: blur(4px);
-	}
-	/* a1: dark capsule over the cover so it stays legible on any image;
-	   the text carries the semantic color (§2.1). */
-	.st-draft {
-		color: var(--text-2);
-	}
-	.st-progress {
-		color: var(--run);
-	}
-	.st-pending {
-		color: var(--warn);
-	}
-	.st-done {
-		color: var(--success);
-	}
-
-	.body {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		padding: 14px 16px 15px;
-	}
-	.title-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-	}
-	.title {
-		font-size: 14px;
-		font-weight: 600;
-		color: var(--text);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.arrow {
-		color: var(--text-2);
-		font-size: 13px;
-		opacity: 0;
-		transform: translateX(-6px);
-		transition:
-			opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
-			transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
-	}
-	.idea {
-		font-size: 12px;
-		color: var(--text-2);
-		line-height: 1.6;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-		min-height: 2.2em;
-	}
-
-	/* Five-stage progress segments (real stage rows, HEL-614). */
-	.stage-bar {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-	.seg {
-		width: 20px;
-		height: 5px;
-		border-radius: 2px;
-		background: var(--surface-3);
-	}
-	.seg-running {
-		background: var(--run);
-	}
-	.seg-draft {
-		background: var(--warn);
-	}
-	.seg-confirmed {
-		background: var(--success);
-	}
-	.seg-count {
-		margin-left: 5px;
-		font-size: 11px;
-		color: var(--text-3);
-		font-variant-numeric: tabular-nums;
-	}
-	.jobs-pill {
-		margin-left: auto;
-		padding: 1px 8px;
-		border-radius: 999px;
-		background: var(--run-soft);
-		color: var(--run);
-		font-size: 10px;
-		font-weight: 600;
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-	}
-	.meta {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-	}
-	.meta-stats {
-		font-size: 11px;
-		color: var(--text-3);
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.meta-time {
-		font-size: 11px;
-		color: var(--text-3);
-		flex-shrink: 0;
-	}
-
-	.menu-wrap {
-		position: absolute;
-		top: 8px;
-		left: 8px;
-		z-index: 3;
-	}
-	.menu-btn {
-		width: 28px;
-		height: 28px;
-		border: 1px solid transparent;
-		border-radius: 7px;
-		background: var(--media-scrim);
-		color: var(--text-2);
-		font-size: 15px;
-		line-height: 1;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		transition: opacity 150ms;
-	}
-	.a-card:hover .menu-btn,
-	.menu-btn:focus-visible,
-	.menu-btn[aria-expanded='true'] {
-		opacity: 1;
-	}
-	.menu-btn:hover {
-		background: var(--surface-3);
-		color: var(--text);
-	}
-	.menu {
-		position: absolute;
-		top: 32px;
-		left: 0;
-		min-width: 132px;
-		background: var(--surface-2);
-		border: 1px solid var(--border-strong);
-		border-radius: 8px;
-		padding: 4px;
-		display: flex;
-		flex-direction: column;
-	}
-	.menu-item {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		width: 100%;
-		padding: 7px 9px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-		color: var(--text);
-		font-size: 12.5px;
-		font-family: inherit;
-		cursor: pointer;
-		text-align: left;
-	}
-	.menu-item:hover {
-		background: var(--surface-3);
-	}
-	.menu-item.danger {
-		color: var(--error);
-	}
-	.menu-item.danger:hover {
-		background: var(--error-dim);
-	}	.a-card :global(.field-input) {
-		background: var(--surface-2);
-		border-color: var(--border-strong);
-		color: var(--text);
-	}
+  .a-card {
+    position: relative;
+    background: var(--bg-2);
+    border: 1px solid var(--line);
+    border-radius: var(--project-card-radius, var(--r-lg));
+    overflow: hidden;
+    transition:
+      transform var(--t-base) var(--ease-out),
+      border-color var(--t-base);
+  }
+  .a-card:hover {
+    transform: translateY(-3px);
+    border-color: var(--line-3);
+  }
+  .card-main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .cover {
+    position: relative;
+    display: block;
+    aspect-ratio: 16/9;
+    width: 100%;
+    background: var(--bg-3);
+    overflow: hidden;
+  }
+  .cover-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .cover-ph {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+  }
+  .cover-type {
+    font-size: 32px;
+    text-align: center;
+  }
+  .cover-type small {
+    display: block;
+    font: 9px var(--mono);
+  }
+  .status-tag {
+    position: absolute;
+    left: 8px;
+    top: 8px;
+    padding: 0 6px;
+    height: 18px;
+    border-radius: 4px;
+    font-size: 11px;
+    background: var(--media-scrim);
+    color: var(--media-text);
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 10px 12px 12px;
+    width: 100%;
+  }
+  .title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .title {
+    font-size: 13.5px;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .arrow {
+    margin-left: auto;
+    color: var(--tx-3);
+  }
+  .stage-bar {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+  .seg {
+    flex: 1;
+    height: 3px;
+    border-radius: 2px;
+    background: rgb(var(--ink) / 0.1);
+  }
+  .seg-confirmed {
+    background: var(--gold);
+  }
+  .seg-draft {
+    background: var(--sc-agent);
+  }
+  .seg-running {
+    background: var(--sc-video);
+  }
+  .meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    color: var(--tx-3);
+    font-size: 11px;
+  }
+  .menu-wrap {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+  .menu-btn {
+    border: 0;
+    background: var(--bg-2);
+    color: var(--tx-2);
+    border-radius: var(--r-sm);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+  }
+  .menu {
+    position: absolute;
+    top: 28px;
+    right: 0;
+    min-width: 132px;
+    background: var(--bg-2);
+    border: 1px solid var(--line-2);
+    border-radius: var(--r-sm);
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--sh-2);
+    z-index: 2;
+  }
+  .menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    padding: 7px 9px;
+    border: 0;
+    border-radius: var(--r-sm);
+    background: transparent;
+    color: var(--tx-1);
+    font: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+    text-align: left;
+  }
+  .menu-item:hover {
+    background: var(--bg-3);
+  }
+  .menu-item.danger {
+    color: var(--err);
+  }
 </style>

calliope-web/src/lib/components/manage/CloudModels.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Button from "$lib/components/ui/Button.svelte";
+  let { kind = "all" }: { kind?: "all" | "image" | "video" } = $props();
+  const pending = [
+    { kind: "image", name: "云端 · 聚合 API（GPT-Image-2 · Nano Banana Pro）" },
+    { kind: "video", name: "云端 · 可灵" },
+    { kind: "video", name: "云端 · 即梦 CLI" },
+  ];
+</script>
+
+{#each pending.filter((item) => kind === "all" || item.kind === kind) as item (item.name)}<article
+    class="mg-card pending"
+  >
+    <div class="mg-row">
+      <span class="mg-dot"></span><b>{item.name}</b><span class="mg-grow"
+      ></span><span class="mg-tag">未接入</span>
+    </div>
+    <div class="mg-mono">尚未接入</div>
+    <div class="mg-muted">后续接入批次 · 当前不可用于生成</div>
+    <div class="mg-row">
+      <span class="mg-tag">0 个工作流使用</span><span class="mg-grow"
+      ></span><Button size="sm" disabled>等待接入</Button>
+    </div>
+  </article>{/each}

calliope-web/src/lib/components/manage/ComfyConnections.svelte

@@ -0,0 +1,646 @@
+<script lang="ts">
+  import CloudModels from "./CloudModels.svelte";
+  import {
+    createMutation,
+    createQuery,
+    useQueryClient,
+  } from "@tanstack/svelte-query";
+  import { untrack } from "svelte";
+  import { SvelteSet } from "svelte/reactivity";
+  import { fade } from "svelte/transition";
+
+  import Modal from "$lib/components/ui/Modal.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 { comfy, settings, workflows, type ComfyEndpoint } from "$lib/api";
+  import { toast } from "$lib/toast";
+  import { t } from "$lib/i18n.svelte";
+
+  const client = useQueryClient();
+
+  // ------------------------------------------------------------------
+  // Data
+  // ------------------------------------------------------------------
+  const settingsQuery = createQuery({
+    queryKey: ["settings"],
+    queryFn: settings.get,
+  });
+  // HEL-682: the library browses metadata only (view=meta) — the heavy
+  // workflow_json payloads are fetched per-row inside WorkflowLibrary
+  // exactly when an action needs them.
+  const wfMetaQuery = createQuery({
+    queryKey: ["workflows", "meta"],
+    queryFn: workflows.listMeta,
+  });
+
+  const endpoints = $derived($settingsQuery.data?.comfyui_endpoints ?? []);
+  const activeId = $derived(
+    $settingsQuery.data?.comfyui_active_id ?? endpoints[0]?.id ?? "",
+  );
+
+  // ------------------------------------------------------------------
+  // Local test records — presentational only; the connectivity facts
+  // always come from the server-side probe.
+  // ------------------------------------------------------------------
+  type TestRec = {
+    ok: boolean;
+    ms?: number;
+    version?: string;
+    at: number;
+    reason?: string;
+  };
+  const TESTS_KEY = "calliope.connections.tests";
+  let tests = $state<Record<string, TestRec>>({});
+  let pendingTests = $state<Record<string, boolean>>({});
+
+  function loadTests() {
+    try {
+      const raw = localStorage.getItem(TESTS_KEY);
+      if (raw) tests = JSON.parse(raw) as Record<string, TestRec>;
+    } catch {
+      tests = {};
+    }
+  }
+  function saveTests(map: Record<string, TestRec>) {
+    tests = map;
+    try {
+      localStorage.setItem(TESTS_KEY, JSON.stringify(map));
+    } catch {
+      /* storage disabled — the page still works without persistence */
+    }
+  }
+  function recordTest(id: string, rec: TestRec) {
+    saveTests({ ...tests, [id]: rec });
+  }
+
+  // ------------------------------------------------------------------
+  // Connection form (a6: right column, add / edit)
+  // ------------------------------------------------------------------
+  type FormMode = "idle" | "add" | "edit";
+  let formMode = $state<FormMode>("idle");
+  let editingId = $state<string | null>(null);
+  let form = $state({
+    name: "",
+    baseUrl: "",
+    authType: "none" as "none" | "bearer" | "header",
+    token: "",
+    headerName: "",
+    notes: "",
+  });
+  let formTest = $state<{ ok: boolean; ms?: number; version?: string } | null>(
+    null,
+  );
+  let formTestFailure = $state<{ message: string; detail: string } | null>(
+    null,
+  );
+  let formPending = $state(false);
+  let showErrors = $state(false);
+
+  function resetForm() {
+    formMode = "idle";
+    editingId = null;
+    form = {
+      name: "",
+      baseUrl: "",
+      authType: "none",
+      token: "",
+      headerName: "",
+      notes: "",
+    };
+    formTest = null;
+    formTestFailure = null;
+    showErrors = false;
+  }
+
+  export function startAdd() {
+    resetForm();
+    formMode = "add";
+  }
+
+  function startEdit(ep: ComfyEndpoint) {
+    resetForm();
+    formMode = "edit";
+    editingId = ep.id;
+    form = {
+      name: ep.name,
+      baseUrl: ep.base_url,
+      authType: ep.auth_type,
+      token: "",
+      headerName: ep.header_name ?? "",
+      notes: ep.notes ?? "",
+    };
+  }
+
+  function touchFormConnectivity() {
+    formTest = null;
+    formTestFailure = null;
+  }
+
+  const urlValid = $derived.by(() => {
+    try {
+      const u = new URL(form.baseUrl.trim());
+      return u.protocol === "http:" || u.protocol === "https:";
+    } catch {
+      return false;
+    }
+  });
+
+  const formErrors = $derived.by(() => {
+    const errs: Record<string, string> = {};
+    if (!form.name.trim()) errs.name = t("conn.errName");
+    if (!urlValid) errs.baseUrl = t("conn.errUrl");
+    if (form.authType === "header" && !form.headerName.trim())
+      errs.headerName = t("conn.errHeaderName");
+    return errs;
+  });
+  const formValid = $derived(Object.keys(formErrors).length === 0);
+
+  const editingEndpoint = $derived.by(() => {
+    if (formMode !== "edit" || !editingId) return null;
+    return endpoints.find((ep) => ep.id === editingId) ?? null;
+  });
+
+  async function runTest() {
+    showErrors = true;
+    if (!formValid) return;
+    formPending = true;
+    formTest = null;
+    formTestFailure = null;
+    try {
+      const res = await comfy.testEndpoint({
+        ...(formMode === "edit" && editingId ? { endpoint_id: editingId } : {}),
+        base_url: form.baseUrl.trim(),
+        auth_type: form.authType,
+        ...(form.authType !== "none" && form.token.trim()
+          ? { auth_token: form.token.trim() }
+          : {}),
+        ...(form.authType === "header" && form.headerName.trim()
+          ? { header_name: form.headerName.trim() }
+          : {}),
+        timeout_sec: 5,
+      });
+      if (res.ok) {
+        formTest = {
+          ok: true,
+          ms: res.elapsed_ms,
+          version: res.comfyui_version,
+        };
+      } else {
+        formTest = { ok: false };
+        formTestFailure = {
+          message: res.message ?? res.detail ?? res.error ?? "",
+          detail: res.detail ?? "",
+        };
+      }
+    } catch (err) {
+      formTest = { ok: false };
+      formTestFailure = {
+        message: err instanceof Error ? err.message : String(err),
+        detail: "",
+      };
+    } finally {
+      formPending = false;
+    }
+  }
+
+  const saveMutation = createMutation({
+    mutationFn: async () => {
+      const payload: Record<string, unknown> = {
+        name: form.name.trim(),
+        base_url: form.baseUrl.trim(),
+        auth_type: form.authType,
+        notes: form.notes.trim() || null,
+      };
+      if (form.authType !== "none" && form.token.trim()) {
+        payload["auth_token"] = form.token.trim();
+      }
+      if (form.authType === "header")
+        payload["header_name"] = form.headerName.trim();
+      if (formMode === "edit" && editingId) {
+        return comfy.updateEndpoint(editingId, payload);
+      }
+      return comfy.createEndpoint(
+        payload as Parameters<typeof comfy.createEndpoint>[0],
+      );
+    },
+    onSuccess: (res) => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      if (formTest?.ok && editingId) {
+        recordTest(editingId, {
+          ok: true,
+          ms: formTest.ms,
+          version: formTest.version,
+          at: Date.now(),
+        });
+      } else if (formTest?.ok && res.endpoints.length) {
+        // newest is the one we just created when adding
+        const created = res.endpoints.find(
+          (ep) => ep.base_url === form.baseUrl.trim(),
+        );
+        if (created)
+          recordTest(created.id, {
+            ok: true,
+            ms: formTest.ms,
+            version: formTest.version,
+            at: Date.now(),
+          });
+      }
+      toast.success(t("conn.saved"));
+      resetForm();
+    },
+    onError: (err) => {
+      toast.error(
+        t("conn.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  function submitSave() {
+    showErrors = true;
+    if (!formValid || !formTest?.ok || $saveMutation.isPending) return;
+    $saveMutation.mutate();
+  }
+
+  // ------------------------------------------------------------------
+  // Card actions
+  // ------------------------------------------------------------------
+  async function testEndpoint(ep: ComfyEndpoint) {
+    pendingTests = { ...pendingTests, [ep.id]: true };
+    try {
+      const res = await comfy.testEndpoint({
+        endpoint_id: ep.id,
+        timeout_sec: 10,
+      });
+      if (res.ok) {
+        recordTest(ep.id, {
+          ok: true,
+          ms: res.elapsed_ms,
+          version: res.comfyui_version,
+          at: Date.now(),
+        });
+      } else {
+        recordTest(ep.id, {
+          ok: false,
+          at: Date.now(),
+          reason: res.message ?? res.detail ?? res.error ?? "unknown",
+        });
+      }
+    } catch (err) {
+      recordTest(ep.id, {
+        ok: false,
+        at: Date.now(),
+        reason: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      const next = { ...pendingTests };
+      delete next[ep.id];
+      pendingTests = next;
+    }
+  }
+
+  let deleteOpen = $state(false);
+  let deleteTarget = $state<ComfyEndpoint | null>(null);
+
+  function requestDelete(ep: ComfyEndpoint) {
+    deleteTarget = ep;
+    deleteOpen = true;
+  }
+
+  function workflowsBound(id: string): number {
+    return ($wfMetaQuery.data ?? []).filter(
+      (wf) => wf.endpoint_id === id || (!wf.endpoint_id && id === activeId),
+    ).length;
+  }
+
+  const deleteMessage = $derived.by(() => {
+    if (!deleteTarget) return "";
+    const n = workflowsBound(deleteTarget.id);
+    return n > 0
+      ? t("conn.delConfirmUsed", { name: deleteTarget.name })
+      : t("conn.delConfirmFree", { name: deleteTarget.name });
+  });
+
+  const deleteMutation = createMutation({
+    mutationFn: () => {
+      if (!deleteTarget) throw new Error("no target");
+      return comfy.deleteEndpoint(deleteTarget.id);
+    },
+    onSuccess: () => {
+      if (deleteTarget) {
+        const next = { ...tests };
+        delete next[deleteTarget.id];
+        saveTests(next);
+        if (editingId === deleteTarget.id) resetForm();
+      }
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(t("conn.deleted"));
+    },
+    onError: (err) => {
+      toast.error(
+        t("conn.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  const defaultMutation = createMutation({
+    mutationFn: (id: string) => comfy.activateEndpoint(id),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(t("conn.defaultSetToast"));
+    },
+    onError: (err) => {
+      toast.error(
+        t("conn.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  function tokenTail(ep: ComfyEndpoint): string {
+    const tail = ep.token_tail ?? "";
+    return tail ? `****${tail}` : "";
+  }
+
+  loadTests();
+  $effect(() => {
+    // prune stale test records once the endpoint list is known
+    const data = $settingsQuery.data;
+    if (data) {
+      const keep = new Set(data.comfyui_endpoints.map((ep) => ep.id));
+      let changed = false;
+      const next: Record<string, TestRec> = {};
+      for (const [k, v] of Object.entries(tests)) {
+        if (keep.has(k)) next[k] = v;
+        else changed = true;
+      }
+      if (changed) saveTests(next);
+    }
+  });
+
+  // Probe every connection once per visit so the cards show real state
+  // instead of 「未测试」; results younger than a minute are reused.
+  const autoProbed = new SvelteSet<string>();
+  $effect(() => {
+    const list = endpoints;
+    untrack(() => {
+      const now = Date.now();
+      for (const ep of list) {
+        if (autoProbed.has(ep.id)) continue;
+        autoProbed.add(ep.id);
+        const rec = tests[ep.id];
+        if (!rec || now - rec.at > 60_000) void testEndpoint(ep);
+      }
+    });
+  });
+</script>
+
+{#if $settingsQuery.isLoading}<p class="mg-empty">
+    正在读取连接…
+  </p>{:else if $settingsQuery.isError}<p class="mg-empty" role="alert">
+    连接加载失败<Button onclick={() => $settingsQuery.refetch()}>重试</Button>
+  </p>{:else}
+  <div class="mg-cards">
+    {#each endpoints as ep (ep.id)}{@const rec = tests[ep.id]}
+      <article class="mg-card">
+        <div class="mg-row">
+          <span
+            class="mg-dot"
+            class:ok={rec?.ok === true}
+            class:err={rec?.ok === false}
+          ></span><b>{ep.name}</b><span class="mg-grow"></span><span
+            class="mg-latency"
+            >{rec?.ms != null ? Math.round(rec.ms) + "ms" : "—"}</span
+          >
+        </div>
+        <div class="mg-mono">{ep.base_url}</div>
+        <div class="mg-muted">
+          {rec?.ok === false
+            ? "连接失败 · " + (rec.reason ?? "原因未知")
+            : rec?.ok
+              ? "连接测试通过"
+              : "尚未测试"} · 队列未知 · 显存未知
+        </div>
+        <div class="mg-row">
+          <span class="mg-tag">{workflowsBound(ep.id)} 个工作流使用</span><span
+            class="mg-grow"
+          ></span><Button
+            size="sm"
+            loading={pendingTests[ep.id]}
+            onclick={() => testEndpoint(ep)}>测试连接</Button
+          ><Button variant="ghost" size="sm" onclick={() => startEdit(ep)}
+            >编辑</Button
+          >
+        </div>
+      </article>
+    {/each}
+    <CloudModels />
+    <button class="mg-card pending mg-add" onclick={startAdd}
+      ><Icon name="plus" size={22} />添加连接</button
+    >
+  </div>{/if}
+<Modal
+  open={formMode !== "idle"}
+  title={formMode === "add" ? t("conn.formTitleAdd") : t("conn.formTitleEdit")}
+  dismissible={!formPending && !$saveMutation.isPending}
+  onclose={resetForm}
+>
+  <aside
+    class="form-col"
+    class:open={formMode !== "idle"}
+    aria-label={t("conn.formTitleAdd")}
+  >
+    {#if formMode !== "idle"}
+      <div class="form-head">
+        <h2>
+          {formMode === "add"
+            ? t("conn.formTitleAdd")
+            : t("conn.formTitleEdit")}
+        </h2>
+      </div>
+
+      <label class="f-field">
+        <span class="f-label">{t("conn.fName")}<em>*</em></span>
+        <input
+          class="f-input"
+          class:invalid={showErrors && formErrors.name}
+          value={form.name}
+          disabled={formPending}
+          oninput={(e) => (form.name = e.currentTarget.value)}
+          placeholder={t("conn.fNamePh")}
+        />
+        {#if showErrors && formErrors.name}<span class="f-error"
+            >{formErrors.name}</span
+          >{/if}
+      </label>
+
+      <label class="f-field">
+        <span class="f-label">{t("conn.fBaseUrl")}<em>*</em></span>
+        <input
+          class="f-input mono"
+          class:invalid={showErrors && formErrors.baseUrl}
+          value={form.baseUrl}
+          disabled={formPending}
+          spellcheck="false"
+          oninput={(e) => {
+            form.baseUrl = e.currentTarget.value;
+            touchFormConnectivity();
+          }}
+          placeholder={t("conn.fBaseUrlPh")}
+        />
+        {#if showErrors && formErrors.baseUrl}
+          <span class="f-error">{formErrors.baseUrl}</span>
+        {/if}
+        <span class="f-hint">{t("conn.baseUrlHelp")}</span>
+      </label>
+
+      <div class="f-field">
+        <span class="f-label">{t("conn.fAuth")}</span>
+        <div class="mg-seg" role="radiogroup" aria-label={t("conn.fAuth")}>
+          {#each [["none", t("conn.authNone")], ["bearer", t("conn.authBearer")], ["header", t("conn.authHeader")]] as [value, label] (value)}
+            <button
+              type="button"
+              class="seg-item"
+              class:on={form.authType === value}
+              aria-pressed={form.authType === value}
+              onclick={() => {
+                form.authType = value as typeof form.authType;
+                touchFormConnectivity();
+              }}
+            >
+              {label}
+            </button>
+          {/each}
+        </div>
+        <span class="f-hint">{t("conn.authHelp")}</span>
+      </div>
+
+      {#if form.authType !== "none"}
+        {#if form.authType === "header"}
+          <label class="f-field">
+            <span class="f-label">{t("conn.fHeaderName")}<em>*</em></span>
+            <input
+              class="f-input mono"
+              class:invalid={showErrors && formErrors.headerName}
+              value={form.headerName}
+              disabled={formPending}
+              spellcheck="false"
+              oninput={(e) => {
+                form.headerName = e.currentTarget.value;
+                touchFormConnectivity();
+              }}
+              placeholder={t("conn.fHeaderNamePh")}
+            />
+            {#if showErrors && formErrors.headerName}
+              <span class="f-error">{formErrors.headerName}</span>
+            {/if}
+          </label>
+        {/if}
+        <label class="f-field">
+          <span class="f-label">
+            {t("conn.fToken")}
+            <span class="kh-inline mono">{t("conn.keyNoEcho")}</span>
+          </span>
+          <span class="key-wrap">
+            <input
+              class="f-input key-input"
+              type="password"
+              value={form.token}
+              disabled={formPending}
+              autocomplete="off"
+              oninput={(e) => {
+                form.token = e.currentTarget.value;
+                touchFormConnectivity();
+              }}
+              placeholder={formMode === "edit" && editingEndpoint?.has_token
+                ? t("conn.tokenSaved")
+                : "…"}
+            />
+            {#if formMode === "edit" && editingEndpoint?.has_token && tokenTail(editingEndpoint)}
+              <span class="kh mono">{tokenTail(editingEndpoint)}</span>
+            {/if}
+          </span>
+          <span class="f-hint">{t("conn.keyHelp")}</span>
+        </label>
+      {/if}
+
+      <label class="f-field">
+        <span class="f-label">{t("conn.fNotes")}</span>
+        <input
+          class="f-input"
+          value={form.notes}
+          disabled={formPending}
+          oninput={(e) => (form.notes = e.currentTarget.value)}
+          placeholder={t("conn.fNotesPh")}
+        />
+      </label>
+
+      {#if formTest?.ok}
+        <div class="result-bar ok" transition:fade={{ duration: 250 }}>
+          {t("conn.testOk", {
+            ms: formTest.ms ?? "?",
+            v: formTest.version ?? "?",
+          })}
+        </div>
+      {:else if formTest?.ok === false && formTestFailure}
+        <div class="result-bar err" transition:fade={{ duration: 250 }}>
+          <p>{t("conn.testFail", { reason: formTestFailure.message })}</p>
+          {#if formTestFailure.detail}
+            <p class="mono detail">{formTestFailure.detail}</p>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="form-actions">
+        <span class="need-test" class:passed={formTest?.ok}
+          >{t("conn.needTest")}</span
+        >
+        <Button
+          variant="secondary"
+          size="sm"
+          loading={formPending}
+          onclick={runTest}
+        >
+          {formPending ? t("conn.testing") : t("conn.testBtn")}
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          disabled={!formValid || !formTest?.ok}
+          loading={$saveMutation.isPending}
+          onclick={submitSave}
+        >
+          {t("conn.save")}
+        </Button>
+      </div>
+    {/if}
+    {#if formMode === "edit" && editingId}<div class="mg-row">
+        {#if editingId !== activeId}<Button
+            size="sm"
+            onclick={() => $defaultMutation.mutate(editingId!)}>设为默认</Button
+          >{/if}<Button
+          size="sm"
+          variant="danger"
+          onclick={() => {
+            const target = editingEndpoint;
+            if (target) requestDelete(target);
+          }}>删除</Button
+        >
+      </div>{/if}
+  </aside></Modal
+>
+<ConfirmDialog
+  bind:open={deleteOpen}
+  title={t("conn.delTitle")}
+  message={deleteMessage}
+  confirmLabel={t("conn.delete")}
+  danger
+  onconfirm={() => $deleteMutation.mutate()}
+  oncancel={() => (deleteTarget = null)}
+/>

calliope-web/src/lib/components/manage/FamilyBadge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  let {
+    model,
+    muted = false,
+    large = false,
+  }: { model: string | null; muted?: boolean; large?: boolean } = $props();
+  const family = $derived.by(() => {
+    const value = (model ?? "").toLowerCase();
+    const known: [string, string, string][] = [
+      ["qwen", "qwen", "Qwen"],
+      ["krea", "krea", "Kr2"],
+      ["flux", "flux", "FLX"],
+      ["z-image", "zimg", "Z"],
+      ["minimax", "h3", "H3"],
+      ["wan", "wan", "Wan"],
+      ["anima", "anima", "Ani"],
+    ];
+    const hit = known.find(([prefix]) => value.includes(prefix));
+    return hit
+      ? { color: `var(--family-${hit[1]})`, label: hit[2] }
+      : { color: "var(--tx-3)", label: model?.slice(0, 3) ?? "本地" };
+  });
+</script>
+
+<span
+  class="family-badge"
+  class:muted
+  class:large
+  style:--family-color={family.color}
+  aria-hidden="true">{family.label}</span
+>
+
+<style>
+  .family-badge {
+    width: 26px;
+    height: 26px;
+    border-radius: 7px;
+    display: grid;
+    place-items: center;
+    flex: none;
+    font: 700 9px var(--mono);
+    color: var(--family-ink);
+    background: var(--family-color);
+  }
+  .muted {
+    filter: grayscale(1) brightness(0.55);
+  }
+  .large {
+    width: 36px;
+    height: 36px;
+    border-radius: 9px;
+    font-size: 11px;
+  }
+</style>

calliope-web/src/lib/components/manage/LlmModels.svelte

@@ -0,0 +1,834 @@
+<script lang="ts">
+  import {
+    createMutation,
+    createQuery,
+    useQueryClient,
+  } from "@tanstack/svelte-query";
+  import { untrack } from "svelte";
+  import { SvelteSet } from "svelte/reactivity";
+  import { fade } from "svelte/transition";
+  import Modal from "$lib/components/ui/Modal.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 { settings, type LlmProfile, type Settings } from "$lib/api";
+  import { randomId } from "$lib/ids";
+  import { toast } from "$lib/toast";
+  import { t } from "$lib/i18n.svelte";
+
+  const client = useQueryClient();
+
+  const settingsQuery = createQuery({
+    queryKey: ["settings"],
+    queryFn: settings.get,
+  });
+
+  // A profile while being edited here: `api_key` is the public boolean,
+  // except for a freshly typed key waiting to be sent to the server.
+  type WorkingProfile = Omit<LlmProfile, "api_key"> & {
+    api_key: boolean | string;
+  };
+
+  // ------------------------------------------------------------------
+  // Local test-state persistence (last result / time / consecutive
+  // failures per profile). Purely presentational; connectivity facts
+  // always come from the server-side probe.
+  // ------------------------------------------------------------------
+  type TestRec = {
+    ok: boolean;
+    ms?: number;
+    at: number;
+    fails: number;
+    reason?: string;
+  };
+  const TESTS_KEY = "calliope.models.tests";
+  let tests = $state<Record<string, TestRec>>({});
+  let pendingTests = $state<Record<string, boolean>>({});
+
+  function loadTests() {
+    try {
+      const raw = localStorage.getItem(TESTS_KEY);
+      if (raw) tests = JSON.parse(raw) as Record<string, TestRec>;
+    } catch {
+      tests = {};
+    }
+  }
+  function saveTests(map: Record<string, TestRec>) {
+    tests = map;
+    try {
+      localStorage.setItem(TESTS_KEY, JSON.stringify(map));
+    } catch {
+      /* storage full / disabled — the page still works without persistence */
+    }
+  }
+  function recordTest(id: string, rec: TestRec) {
+    saveTests({ ...tests, [id]: rec });
+  }
+  function pruneTests(ids: string[]) {
+    const keep = new Set(ids);
+    const next: Record<string, TestRec> = {};
+    let changed = false;
+    for (const [k, v] of Object.entries(tests)) {
+      if (keep.has(k)) next[k] = v;
+      else changed = true;
+    }
+    if (changed) saveTests(next);
+  }
+
+  // ------------------------------------------------------------------
+  // Form state — add / edit custom LLM (spec §9.3)
+  // ------------------------------------------------------------------
+  type FormMode = "idle" | "add" | "edit";
+  let formMode = $state<FormMode>("idle");
+  let editingId = $state<string | null>(null);
+  let form = $state({
+    name: "",
+    baseUrl: "",
+    model: "",
+    apiKey: "",
+    timeout: 10,
+  });
+  let formTest = $state<{ ok: boolean; ms?: number } | null>(null);
+  let formTestFailure = $state<{ text: string; detail: string } | null>(null);
+  let formPending = $state(false);
+  let showErrors = $state(false);
+
+  const TIMEOUT_OPTIONS = [5, 10, 15, 30, 60];
+
+  function resetForm() {
+    formMode = "idle";
+    editingId = null;
+    form = { name: "", baseUrl: "", model: "", apiKey: "", timeout: 10 };
+    formTest = null;
+    formTestFailure = null;
+    showErrors = false;
+  }
+
+  export function startAdd() {
+    resetForm();
+    formMode = "add";
+  }
+
+  function startEdit(profile: LlmProfile) {
+    resetForm();
+    formMode = "edit";
+    editingId = profile.id;
+    form = {
+      name: profile.name,
+      baseUrl: profile.base_url,
+      model: profile.model,
+      apiKey: "",
+      timeout: 10,
+    };
+  }
+
+  // A connectivity-relevant edit invalidates the previous passing test.
+  function touchFormConnectivity() {
+    formTest = null;
+    formTestFailure = null;
+  }
+
+  const urlValid = $derived.by(() => {
+    try {
+      const u = new URL(form.baseUrl.trim());
+      return u.protocol === "http:" || u.protocol === "https:";
+    } catch {
+      return false;
+    }
+  });
+
+  const formErrors = $derived.by(() => {
+    const errs: Record<string, string> = {};
+    if (!form.name.trim()) errs.name = t("models.errName");
+    if (!urlValid) errs.baseUrl = t("models.errUrl");
+    if (!form.model.trim()) errs.model = t("models.errModel");
+    // Key is required when creating; on edit an empty field keeps the
+    // stored key (masked tail placeholder covers the affordance).
+    if (formMode === "add" && !form.apiKey.trim())
+      errs.apiKey = t("models.errKey");
+    return errs;
+  });
+  const formValid = $derived(Object.keys(formErrors).length === 0);
+
+  const editingProfile = $derived.by(() => {
+    if (formMode !== "edit" || !editingId || !$settingsQuery.data) return null;
+    return (
+      $settingsQuery.data.llm_profiles.find((p) => p.id === editingId) ?? null
+    );
+  });
+
+  // ------------------------------------------------------------------
+  // Failure classification → spec §9.6 copy (primary sentence) with the
+  // server-provided detail as a mono secondary line where it adds info.
+  // ------------------------------------------------------------------
+  function classifyFailure(
+    res: { error?: string; detail?: string; timeout_sec?: number },
+    fallbackSec: number,
+  ): { text: string; detail: string } {
+    const detail = res.detail ?? "";
+    switch (res.error) {
+      case "timeout":
+        return {
+          text: t("models.failTimeout", {
+            sec: res.timeout_sec ?? fallbackSec,
+          }),
+          detail,
+        };
+      case "auth":
+        return { text: t("models.failAuth"), detail };
+      case "not_found":
+        return { text: t("models.failNotFound"), detail };
+      case "http": {
+        if (detail.startsWith("HTTP 404"))
+          return { text: t("models.failNotOpenai"), detail };
+        const status = detail.split(":")[0].replace("HTTP ", "").trim();
+        return {
+          text: t("models.failHttp", { status: status || detail }),
+          detail,
+        };
+      }
+      case "connect":
+      default:
+        return { text: t("models.failConnect"), detail };
+    }
+  }
+
+  async function runTest() {
+    showErrors = true;
+    if (!urlValid || !form.model.trim()) return;
+    // On add the key is required before anything can be probed.
+    if (formMode === "add" && !form.apiKey.trim()) return;
+    formPending = true;
+    formTest = null;
+    formTestFailure = null;
+    try {
+      const res = await settings.testLlm({
+        ...(formMode === "edit" && editingId ? { profile_id: editingId } : {}),
+        base_url: form.baseUrl.trim(),
+        model: form.model.trim(),
+        ...(form.apiKey.trim() ? { api_key: form.apiKey.trim() } : {}),
+        timeout_sec: form.timeout,
+      });
+      if (res.ok) {
+        formTest = { ok: true, ms: res.elapsed_ms };
+      } else {
+        formTest = { ok: false };
+        formTestFailure = classifyFailure(res, form.timeout);
+      }
+    } catch (err) {
+      formTest = { ok: false };
+      formTestFailure = {
+        text: t("models.failConnect"),
+        detail: err instanceof Error ? err.message : String(err),
+      };
+    } finally {
+      formPending = false;
+    }
+  }
+
+  function llmProfilesFromSettings(s: Settings): WorkingProfile[] {
+    if (s.llm_profiles?.length) return s.llm_profiles.map((p) => ({ ...p }));
+    return [
+      {
+        id: s.llm_active_id || "legacy",
+        name: s.llm_model || "LLM",
+        base_url: s.llm_base_url,
+        model: s.llm_model,
+        api_key: s.llm_api_key,
+      },
+    ];
+  }
+
+  const saveMutation = createMutation({
+    mutationFn: async () => {
+      const s = $settingsQuery.data;
+      if (!s) throw new Error("settings unavailable");
+      const base = llmProfilesFromSettings(s);
+      const typedKey = form.apiKey.trim();
+      let list: WorkingProfile[];
+      if (formMode === "edit" && editingId) {
+        list = base.map((p) =>
+          p.id === editingId
+            ? {
+                ...p,
+                name: form.name.trim(),
+                base_url: form.baseUrl.trim(),
+                model: form.model.trim(),
+                ...(typedKey ? { api_key: typedKey } : {}),
+              }
+            : p,
+        );
+      } else {
+        list = [
+          ...base,
+          {
+            id: randomId(),
+            name: form.name.trim(),
+            base_url: form.baseUrl.trim(),
+            model: form.model.trim(),
+            api_key: typedKey,
+          },
+        ];
+      }
+      return settings.update({
+        llm_profiles: list.map((p) => ({
+          id: p.id,
+          name: p.name.trim(),
+          base_url: p.base_url.trim(),
+          model: p.model.trim(),
+          ...(typeof p.api_key === "string" && p.api_key.trim()
+            ? { api_key: p.api_key.trim() }
+            : {}),
+        })),
+      });
+    },
+    onSuccess: (saved) => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      // Carry the passing test over so the new card shows 已连接.
+      if (formTest?.ok) {
+        const id =
+          formMode === "edit" && editingId
+            ? editingId
+            : (saved.llm_profiles.at(-1)?.id ?? "");
+        if (id)
+          recordTest(id, {
+            ok: true,
+            ms: formTest.ms,
+            at: Date.now(),
+            fails: 0,
+          });
+      }
+      toast.success(t("models.saved"));
+      resetForm();
+    },
+    onError: (err) => {
+      toast.error(
+        t("models.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  function submitSave() {
+    showErrors = true;
+    if (!formValid || !formTest?.ok || $saveMutation.isPending) return;
+    $saveMutation.mutate();
+  }
+
+  // ------------------------------------------------------------------
+  // Card actions: per-profile test / delete / set default
+  // ------------------------------------------------------------------
+  async function testProfile(profile: LlmProfile) {
+    pendingTests = { ...pendingTests, [profile.id]: true };
+    try {
+      const res = await settings.testLlm({
+        profile_id: profile.id,
+        base_url: profile.base_url.trim(),
+        model: profile.model.trim(),
+        timeout_sec: 10,
+      });
+      const prev = tests[profile.id];
+      if (res.ok) {
+        recordTest(profile.id, {
+          ok: true,
+          ms: res.elapsed_ms,
+          at: Date.now(),
+          fails: 0,
+        });
+      } else {
+        const cls = classifyFailure(res, 10);
+        recordTest(profile.id, {
+          ok: false,
+          at: Date.now(),
+          fails: (prev?.fails ?? 0) + 1,
+          reason: cls.text + (cls.detail ? `（${cls.detail}）` : ""),
+        });
+      }
+    } catch (err) {
+      const prev = tests[profile.id];
+      recordTest(profile.id, {
+        ok: false,
+        at: Date.now(),
+        fails: (prev?.fails ?? 0) + 1,
+        reason: err instanceof Error ? err.message : String(err),
+      });
+    } finally {
+      const next = { ...pendingTests };
+      delete next[profile.id];
+      pendingTests = next;
+    }
+  }
+
+  let deleteOpen = $state(false);
+  let deleteTarget = $state<LlmProfile | null>(null);
+
+  function requestDelete(profile: LlmProfile) {
+    deleteTarget = profile;
+    deleteOpen = true;
+  }
+
+  function agentsUsing(s: Settings, profileId: string): number {
+    return Object.values(s.agent_llm_assignments ?? {}).filter(
+      (v) => v === profileId,
+    ).length;
+  }
+
+  const deleteMessage = $derived.by(() => {
+    const s = $settingsQuery.data;
+    if (!deleteTarget || !s) return "";
+    const n = agentsUsing(s, deleteTarget.id);
+    return n > 0
+      ? t("models.delConfirmUsed", { n })
+      : t("models.delConfirmFree");
+  });
+
+  const deleteMutation = createMutation({
+    mutationFn: async () => {
+      const s = $settingsQuery.data;
+      const target = deleteTarget;
+      if (!s || !target) throw new Error("no target");
+      const list = llmProfilesFromSettings(s).filter((p) => p.id !== target.id);
+      return settings.update({
+        llm_profiles: list.map((p) => ({
+          id: p.id,
+          name: p.name.trim(),
+          base_url: p.base_url.trim(),
+          model: p.model.trim(),
+        })),
+      });
+    },
+    onSuccess: () => {
+      if (deleteTarget) {
+        const next = { ...tests };
+        delete next[deleteTarget.id];
+        saveTests(next);
+        if (editingId === deleteTarget.id) resetForm();
+      }
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(t("models.deleted"));
+    },
+    onError: (err) => {
+      toast.error(
+        t("models.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  const defaultMutation = createMutation({
+    mutationFn: (id: string) => settings.update({ llm_active_id: id }),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(t("models.defaultSetToast"));
+    },
+    onError: (err) => {
+      toast.error(
+        t("models.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  // ------------------------------------------------------------------
+  // Agent default-model panel (spec §9.4). The five AIGC agents; 视觉设计
+  // binds to the `style` role added for the upcoming style agent.
+  // ------------------------------------------------------------------
+  const AGENTS: {
+    role: string;
+    labelKey: string;
+    color: string;
+    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: "视",
+      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: "镜",
+    },
+  ];
+
+  const assignMutation = createMutation({
+    mutationFn: (payload: Record<string, string | null>) =>
+      settings.update({ agent_llm_assignments: payload }),
+    onSuccess: () => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.success(t("models.assignSaved"));
+    },
+    onError: (err) => {
+      client.invalidateQueries({ queryKey: ["settings"] });
+      toast.error(
+        t("models.saveFailed", {
+          detail: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    },
+  });
+
+  function setAssignment(role: string, value: string) {
+    // Single-role delta only (HEL-619): replaying the whole cached
+    // snapshot races concurrent dropdown switches — an older snapshot
+    // could overwrite a newer choice. The server merges per role.
+    $assignMutation.mutate({ [role]: value === "" ? null : value });
+  }
+
+  function keyTail(profile: LlmProfile): string {
+    const tail = profile.api_key_tail ?? "";
+    return tail ? `sk-****${tail}` : "";
+  }
+
+  loadTests();
+  // Prune stale test records once the profile list is known.
+  $effect(() => {
+    const data = $settingsQuery.data;
+    if (data) pruneTests(data.llm_profiles.map((p) => p.id));
+  });
+
+  // Test each model once per visit (1-token probe) so the cards show real
+  // state instead of 「未测试」; results younger than 10 minutes are reused.
+  const autoProbed = new SvelteSet<string>();
+  $effect(() => {
+    const list = $settingsQuery.data?.llm_profiles ?? [];
+    untrack(() => {
+      const now = Date.now();
+      for (const p of list) {
+        if (autoProbed.has(p.id)) continue;
+        autoProbed.add(p.id);
+        const rec = tests[p.id];
+        if (!rec || now - rec.at > 600_000) void testProfile(p);
+      }
+    });
+  });
+</script>
+
+{#if $settingsQuery.isLoading}<p class="mg-empty">
+    正在读取模型…
+  </p>{:else if !$settingsQuery.data}<p class="mg-empty" role="alert">
+    模型加载失败<Button onclick={() => $settingsQuery.refetch()}>重试</Button>
+  </p>{:else}{@const s = $settingsQuery.data}{@const profiles = s.llm_profiles}
+  <div class="mg-cards">
+    {#each profiles as profile (profile.id)}{@const rec = tests[profile.id]}
+      <article class="mg-card">
+        <div class="mg-row">
+          <span
+            class="mg-dot"
+            class:ok={rec?.ok === true}
+            class:err={rec?.ok === false}
+          ></span><b>{profile.name}</b><span class="mg-grow"></span><span
+            class="mg-latency"
+            >{rec?.ms != null ? Math.round(rec.ms) + "ms" : "—"}</span
+          >
+        </div>
+        <div class="mg-mono">{profile.base_url}</div>
+        <div class="mg-muted">{profile.model}</div>
+        <div class="mg-dim">
+          {rec?.ok === false
+            ? (rec.reason ?? "连接失败")
+            : rec?.ok
+              ? "连接测试通过"
+              : "尚未测试"}
+        </div>
+        <div class="mg-row">
+          <span class="mg-tag">{agentsUsing(s, profile.id)} 个智能体使用</span
+          ><span class="mg-grow"></span><Button
+            size="sm"
+            loading={pendingTests[profile.id]}
+            onclick={() => testProfile(profile)}>测试连接</Button
+          ><Button size="sm" variant="ghost" onclick={() => startEdit(profile)}
+            >编辑</Button
+          >
+        </div>
+      </article>{/each}<button class="mg-card pending mg-add" onclick={startAdd}
+      ><Icon name="plus" size={22} />添加大语言模型</button
+    >
+    <div class="model-assignments">
+      <section class="mg-field">
+        <div class="mg-row">
+          <h2>{t("models.agentsTitle")}</h2>
+          <span class="panel-hint">{t("models.agentsHint")}</span>
+        </div>
+        <div class="mg-assignments">
+          {#each AGENTS as agent (agent.role)}
+            <label class="agent-cell">
+              <span
+                class="avatar"
+                style:background={agent.color}
+                class:dark={agent.dark}
+              >
+                {agent.char}
+              </span>
+              <span class="agent-name">{t(agent.labelKey)}</span>
+              <select
+                class="a-select"
+                value={s.agent_llm_assignments?.[agent.role] ?? ""}
+                onchange={(e) =>
+                  setAssignment(agent.role, e.currentTarget.value)}
+              >
+                <option value="">{t("models.agentDefault")}</option>
+                {#each profiles as p (p.id)}
+                  <option
+                    value={p.id}
+                    class:unavailable={tests[p.id]?.ok === false}
+                  >
+                    {p.name} — {p.model}{tests[p.id]?.ok === false
+                      ? t("models.unavailable")
+                      : ""}
+                  </option>
+                {/each}
+              </select>
+            </label>
+          {/each}
+        </div>
+      </section>
+    </div>
+  </div>{/if}
+<Modal
+  open={formMode !== "idle"}
+  title={formMode === "edit"
+    ? t("models.formTitleEdit")
+    : t("models.formTitleAdd")}
+  dismissible={!formPending}
+  onclose={resetForm}
+  size="md"
+  ><aside
+    class="form-col"
+    class:open={formMode !== "idle"}
+    aria-label={t("models.formTitleAdd")}
+  >
+    {#if formMode === "idle"}
+      <div class="form-idle">
+        <Icon name="sparkle" size={20} />
+        <p>{t("models.idleFormHint")}</p>
+      </div>
+    {:else}
+      <div class="form-head">
+        <h2>
+          {formMode === "add"
+            ? t("models.formTitleAdd")
+            : t("models.formTitleEdit")}
+        </h2>
+
+        <button
+          type="button"
+          class="icon-btn"
+          aria-label={t("models.formClose")}
+          onclick={resetForm}
+        >
+          <Icon name="close" size={16} />
+        </button>
+      </div>
+
+      <label class="f-field">
+        <span class="f-label">{t("models.fName")}<em>*</em></span>
+        <input
+          class="f-input"
+          class:invalid={showErrors && formErrors.name}
+          value={form.name}
+          disabled={formPending}
+          oninput={(e) => (form.name = e.currentTarget.value)}
+          placeholder={t("models.fNamePh")}
+        />
+        {#if showErrors && formErrors.name}<span class="f-error"
+            >{formErrors.name}</span
+          >{/if}
+      </label>
+
+      <div class="f-field">
+        <span class="f-label">{t("models.fApiType")}</span>
+        <div class="seg" role="radiogroup" aria-label={t("models.fApiType")}>
+          <span class="seg-item selected" role="radio" aria-checked="true">
+            {t("models.apiOpenai")}
+          </span>
+          <span class="seg-item disabled" aria-disabled="true">
+            {t("models.apiAnthropic")}
+          </span>
+          <span class="seg-item disabled" aria-disabled="true"
+            >{t("models.apiOther")}</span
+          >
+        </div>
+        <span class="f-hint">{t("models.apiTypeHelp")}</span>
+      </div>
+
+      <label class="f-field">
+        <span class="f-label">{t("models.fBaseUrl")}<em>*</em></span>
+        <input
+          class="f-input mono"
+          class:invalid={showErrors && formErrors.baseUrl}
+          value={form.baseUrl}
+          disabled={formPending}
+          spellcheck="false"
+          oninput={(e) => {
+            form.baseUrl = e.currentTarget.value;
+            touchFormConnectivity();
+          }}
+          placeholder="http://192.168.200.18:11434/v1"
+        />
+        {#if showErrors && formErrors.baseUrl}
+          <span class="f-error">{formErrors.baseUrl}</span>
+        {/if}
+        <span class="f-hint">{t("models.baseUrlHelp")}</span>
+      </label>
+
+      <label class="f-field">
+        <span class="f-label">{t("models.fModel")}<em>*</em></span>
+        <input
+          class="f-input mono"
+          class:invalid={showErrors && formErrors.model}
+          value={form.model}
+          disabled={formPending}
+          spellcheck="false"
+          oninput={(e) => {
+            form.model = e.currentTarget.value;
+            touchFormConnectivity();
+          }}
+          placeholder="deepseek-chat"
+        />
+        {#if showErrors && formErrors.model}
+          <span class="f-error">{formErrors.model}</span>
+        {/if}
+        <span class="f-hint">{t("models.modelHelp")}</span>
+      </label>
+
+      <label class="f-field">
+        <span class="f-label">
+          {t("models.fApiKey")}<em>*</em>
+          <span class="kh-inline mono">{t("models.keyNoEcho")}</span>
+        </span>
+        <span class="key-wrap">
+          <input
+            class="f-input key-input"
+            type="password"
+            class:invalid={showErrors && formErrors.apiKey}
+            value={form.apiKey}
+            disabled={formPending}
+            autocomplete="off"
+            oninput={(e) => {
+              form.apiKey = e.currentTarget.value;
+              touchFormConnectivity();
+            }}
+            placeholder={formMode === "edit" && editingProfile?.api_key
+              ? t("models.keyKeepHint")
+              : "sk-…"}
+          />
+          {#if formMode === "edit" && editingProfile?.api_key && keyTail(editingProfile)}
+            <span class="kh mono">{keyTail(editingProfile)}</span>
+          {/if}
+        </span>
+        {#if showErrors && formErrors.apiKey}
+          <span class="f-error">{formErrors.apiKey}</span>
+        {/if}
+        <span class="f-hint">{t("models.keyHelp")}</span>
+      </label>
+
+      <label class="f-field">
+        <span class="f-label">{t("models.fTimeout")}</span>
+        <select
+          class="f-input"
+          value={form.timeout}
+          disabled={formPending}
+          onchange={(e) => {
+            form.timeout = Number(e.currentTarget.value);
+            touchFormConnectivity();
+          }}
+        >
+          {#each TIMEOUT_OPTIONS as sec (sec)}
+            <option value={sec}>{t("models.timeoutSec", { n: sec })}</option>
+          {/each}
+        </select>
+      </label>
+
+      {#if formTest?.ok}
+        <div class="result-bar ok" transition:fade={{ duration: 250 }}>
+          {t("models.testOk", {
+            ms: formTest.ms ?? "?",
+            model: form.model.trim(),
+          })}
+        </div>
+      {:else if formTest?.ok === false && formTestFailure}
+        <div class="result-bar err" transition:fade={{ duration: 250 }}>
+          <p>
+            {t("models.testFail", { reason: formTestFailure.text })}
+          </p>
+          {#if formTestFailure.detail}
+            <p class="mono detail">{formTestFailure.detail}</p>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="form-actions">
+        <span class="need-test" class:passed={formTest?.ok}
+          >{t("models.needTest")}</span
+        >
+        <Button
+          variant="secondary"
+          size="sm"
+          loading={formPending}
+          onclick={runTest}
+        >
+          {formPending ? t("models.testing") : t("models.testBtn")}
+        </Button>
+        <Button
+          variant="primary"
+          size="sm"
+          disabled={!formValid || !formTest?.ok}
+          loading={$saveMutation.isPending}
+          onclick={submitSave}
+        >
+          {t("models.save")}
+        </Button>
+      </div>
+    {/if}
+    {#if formMode === "edit" && editingId}<div class="mg-row">
+        {#if editingId !== $settingsQuery.data?.llm_active_id}<Button
+            size="sm"
+            onclick={() => $defaultMutation.mutate(editingId!)}>设为默认</Button
+          >{/if}<Button
+          size="sm"
+          variant="danger"
+          onclick={() => {
+            const target = editingProfile;
+            if (target) requestDelete(target);
+          }}>删除</Button
+        >
+      </div>{/if}
+  </aside></Modal
+>
+<ConfirmDialog
+  bind:open={deleteOpen}
+  title={t("models.delTitle")}
+  message={deleteMessage}
+  confirmLabel={t("models.delete")}
+  danger
+  onconfirm={() => $deleteMutation.mutate()}
+  oncancel={() => (deleteTarget = null)}
+/>

calliope-web/src/lib/components/manage/ManagementPage.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import AppShell from "$lib/components/shell/AppShell.svelte";
+  import type { NavId } from "$lib/components/shell/nav";
+  import "./management.css";
+  let {
+    title,
+    active,
+    tools,
+    actions,
+    children,
+    scene = "manage",
+  }: {
+    scene?: "manage" | "gold";
+    title: string;
+    active: NavId;
+    tools?: Snippet;
+    actions?: Snippet;
+    children: Snippet;
+  } = $props();
+</script>
+
+<AppShell {title} {active} workspace>
+  {#snippet pageHeader()}
+    <header
+      class="management-header"
+      style:--scene={scene === "gold" ? "var(--gold)" : "var(--sc-manage)"}
+    >
+      <b>{title}</b>{@render tools?.()}<span class="mg-grow"
+      ></span>{@render actions?.()}
+      <!-- The approved header reserves this inline width independently of demo copy. -->
+      <span class="mg-header-reserve" aria-hidden="true"
+        ><span></span><span>&emsp;&emsp;&emsp;&emsp;</span></span
+      >
+    </header>
+  {/snippet}
+  <section
+    class="management-page"
+    aria-label={title}
+    style:--scene={scene === "gold" ? "var(--gold)" : "var(--sc-manage)"}
+  >
+    {@render children()}
+  </section>
+</AppShell>

calliope-web/src/lib/components/manage/management.css

@@ -0,0 +1,854 @@
+/* HEL-726 approved management primitives. Geometry and colours use theme tokens. */
+.management-header {
+  --icon-stroke: var(--manage-icon-stroke);
+  letter-spacing: var(--manage-header-letter-spacing);
+  box-sizing: border-box;
+  --button-weight: var(--manage-control-weight);
+  --button-primary-weight: var(--manage-control-weight);
+  --button-height: var(--manage-control-height);
+  --button-font-size: var(--manage-control-size);
+  --button-radius: var(--manage-control-radius);
+  --button-secondary-bg: var(--bg-3);
+  --button-sm-height: var(--manage-button-height);
+  --button-sm-padding: var(--manage-button-padding);
+  --button-secondary-radius: var(--manage-button-radius);
+  height: var(--head);
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--glass);
+  backdrop-filter: blur(10px);
+  position: relative;
+  z-index: 3;
+  min-width: 0;
+  color: var(--tx-1);
+}
+.management-header > b {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.management-page {
+  --icon-stroke: var(--manage-icon-stroke);
+  box-sizing: border-box;
+  --button-weight: var(--manage-control-weight);
+  --button-primary-weight: var(--manage-control-weight);
+  --button-height: var(--manage-control-height);
+  --button-font-size: var(--manage-control-size);
+  --button-radius: var(--manage-control-radius);
+  --button-secondary-bg: var(--bg-3);
+  animation: management-enter var(--page-enter-duration) var(--ease-out);
+  --button-sm-height: var(--manage-button-height);
+  --button-sm-padding: var(--manage-button-padding);
+  --button-sm-radius: var(--manage-button-radius);
+  --button-primary-height: var(--manage-control-height);
+  --button-primary-padding: 12px;
+  --button-primary-radius: var(--manage-control-radius);
+  --button-secondary-radius: var(--manage-button-radius);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  color: var(--tx-1);
+  font-size: 13px;
+  overflow: hidden;
+}
+.mg-grow {
+  flex: 1;
+  min-width: 0;
+}
+.manage {
+  --scene: var(--sc-manage);
+}
+.mg-layout {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: var(--manage-filter-width) minmax(0, 1fr) var(
+      --manage-detail-width
+    );
+  min-height: 0;
+}
+.mg-side {
+  box-sizing: border-box;
+  border-right: 1px solid var(--line);
+  background: var(--manage-panel-background);
+  padding: 12px 10px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mg-side .mg-label {
+  font-size: 11px;
+  color: var(--tx-3);
+  padding: 10px 8px 4px;
+  letter-spacing: 0.5px;
+}
+.mg-filter {
+  border: 0;
+  background: none;
+  text-align: left;
+  flex: none;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  font-size: 12.5px;
+  color: var(--tx-2);
+  cursor: pointer;
+}
+.mg-filter:hover {
+  background: rgb(var(--ink) / 0.04);
+  color: var(--tx-1);
+}
+.mg-filter.on {
+  background: var(--bg-3);
+  color: var(--tx-1);
+}
+.mg-filter .n {
+  margin-left: auto;
+  font: 500 11px var(--mono);
+  color: var(--tx-3);
+}
+.mg-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.mg-tools {
+  box-sizing: border-box;
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.mg-table {
+  flex: 1;
+  overflow: auto;
+}
+.mg-table table {
+  table-layout: var(--manage-table-layout, fixed);
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12.5px;
+}
+.mg-table th {
+  position: sticky;
+  top: 0;
+  background: var(--bg-0);
+  z-index: 1;
+  box-sizing: var(--manage-cell-box, content-box);
+  text-align: left;
+  font-weight: 500;
+  color: var(--tx-3);
+  font-size: 11.5px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.mg-table td {
+  box-sizing: var(--manage-cell-box, content-box);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: middle;
+}
+.mg-table tr {
+  cursor: pointer;
+  transition: background var(--t-fast);
+}
+.mg-table tbody tr:hover {
+  background: rgb(var(--ink) / 0.025);
+}
+.mg-table tr.on {
+  background: color-mix(in srgb, var(--sc-manage) 10%, transparent);
+}
+.mg-table .nm b {
+  font-weight: 500;
+  display: block;
+}
+.mg-table .nm small {
+  font: 11px var(--mono);
+  color: var(--tx-3);
+}
+.mg-detail {
+  box-sizing: border-box;
+  min-width: 0;
+  border-left: 1px solid var(--line);
+  background: var(--manage-panel-background);
+  overflow: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.mg-map {
+  display: grid;
+  grid-template-columns: 1fr 18px 1fr;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+}
+.mg-map .a {
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--bg-0);
+  border: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--tx-2);
+}
+.mg-map .b {
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--sc-image) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--sc-image) 30%, transparent);
+}
+.mg-media {
+  flex: 1;
+  overflow: auto;
+  padding: 14px 16px;
+  columns: 5 200px;
+  column-gap: 10px;
+}
+.mg-media > article {
+  break-inside: avoid;
+  margin-bottom: 10px;
+  border-radius: var(--manage-media-radius);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  position: relative;
+}
+.mg-media img {
+  display: block;
+  width: 100%;
+}
+.mg-cards {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--manage-card-min), 1fr));
+  gap: 12px;
+  align-content: start;
+  grid-auto-rows: max-content;
+}
+.mg-card {
+  box-sizing: border-box;
+  min-width: 0;
+  border-radius: var(--manage-card-radius);
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  padding: var(--manage-card-padding);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.mg-card .mg-row b {
+  font-size: 13.5px;
+}
+.mg-latency {
+  font: 600 11px var(--mono);
+  color: var(--ok);
+}
+
+.mg-filter small {
+  margin-left: auto;
+  font: 500 11px var(--mono);
+  color: var(--tx-3);
+}
+.mg-search {
+  height: 34px;
+  border-radius: var(--r-sm);
+  background: var(--well);
+  border: 1px solid var(--line-2);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--tx-3);
+  min-width: 0;
+  box-sizing: border-box;
+}
+.mg-search input {
+  min-width: 0;
+  width: 100%;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: var(--tx-1);
+  font: inherit;
+  font-size: 13px;
+  padding: 0;
+}
+.mg-search:focus-within {
+  border-color: var(--scene);
+}
+.mg-search kbd {
+  font: 10px var(--mono);
+  color: var(--tx-3);
+}
+.mg-seg {
+  box-sizing: border-box;
+  display: flex;
+  padding: 3px;
+  border-radius: var(--manage-segment-radius);
+  background: var(--well);
+  border: 1px solid var(--line);
+  gap: 2px;
+}
+.mg-seg button {
+  flex: 1;
+  white-space: nowrap;
+  height: 28px;
+  border: 0;
+  border-radius: var(--manage-segment-option-radius);
+  background: transparent;
+  color: var(--tx-2);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 0;
+  cursor: pointer;
+  transition: all var(--t-base) var(--ease-out);
+}
+.mg-seg button.on {
+  background: var(--bg-3);
+  color: var(--tx-1);
+  box-shadow: var(--sh-1);
+}
+.mg-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.mg-muted {
+  color: var(--tx-2);
+}
+.mg-dim {
+  color: var(--tx-3);
+  font-size: 12px;
+}
+.mg-mono {
+  font: 11px/var(--lh-body) var(--mono);
+  color: var(--tx-3);
+  overflow-wrap: anywhere;
+}
+.mg-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  height: 18px;
+  padding: 0 6px;
+  border-radius: 4px;
+  border: 1px solid var(--line);
+  background: rgb(var(--ink) / 0.05);
+  font-size: 11px;
+  color: var(--tx-2);
+}
+.mg-tag.ok {
+  color: var(--ok);
+  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
+  background: color-mix(in srgb, var(--ok) 7%, transparent);
+}
+.mg-tag.warn {
+  color: var(--warn);
+  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
+  background: color-mix(in srgb, var(--warn) 7%, transparent);
+}
+.mg-tag.err {
+  color: var(--err);
+  border-color: color-mix(in srgb, var(--err) 30%, transparent);
+  background: color-mix(in srgb, var(--err) 7%, transparent);
+}
+.mg-field {
+  box-sizing: border-box;
+  background: var(--bg-2);
+  border: 1px solid var(--line);
+  border-radius: var(--manage-field-radius);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mg-field h3 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--tx-2);
+  margin: 0;
+}
+.mg-detail h2 {
+  font-size: 14px;
+  margin: 0;
+  font-weight: 600;
+}
+.mg-name {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.mg-name b {
+  font-size: 12.5px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mg-name small {
+  font: 11px var(--mono);
+  color: var(--tx-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mg-empty {
+  padding: 40px 16px;
+  text-align: center;
+  color: var(--tx-3);
+  font-size: 12px;
+}
+.mg-card.pending {
+  border-style: dashed;
+  background: transparent;
+}
+.mg-add {
+  min-height: var(--manage-add-min-height);
+  display: grid;
+  place-items: center;
+  color: var(--tx-3);
+  cursor: pointer;
+  font: inherit;
+}
+.mg-dot {
+  height: 7px;
+  width: 7px;
+  border-radius: 50%;
+  background: var(--tx-3);
+  flex: none;
+}
+.mg-dot.ok {
+  background: var(--ok);
+}
+.mg-dot.err {
+  background: var(--err);
+}
+.mg-click {
+  border: 0;
+  background: none;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+}
+.management-page button:focus-visible,
+.management-header button:focus-visible {
+  outline: 2px solid var(--scene, var(--info));
+  outline-offset: 2px;
+}
+
+/* Shared connection/model edit form, hosted by the existing focus-trapping Modal. */
+.form-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.form-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.form-head h2 {
+  font-size: 14px;
+  margin: 0;
+}
+.f-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--tx-2);
+}
+.f-label {
+  font-weight: 500;
+  display: flex;
+  gap: 4px;
+}
+.f-label em {
+  color: var(--err);
+}
+.f-input {
+  height: 34px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-sm);
+  background: var(--well);
+  padding: 0 10px;
+  color: var(--tx-1);
+  font: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+textarea.f-input {
+  height: 70px;
+  padding: 8px 10px;
+  resize: vertical;
+}
+.f-input.invalid {
+  border-color: var(--err);
+}
+.f-input:focus {
+  outline: 2px solid var(--info);
+  outline-offset: 1px;
+}
+.f-error {
+  color: var(--err);
+  font-size: 11px;
+}
+.f-hint,
+.need-test {
+  color: var(--tx-3);
+  font-size: 11px;
+}
+.need-test.passed {
+  color: var(--ok);
+}
+.form-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
+}
+.form-test-result,
+.form-test-failure {
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  font-size: 12px;
+}
+.form-test-failure {
+  color: var(--err);
+}
+.form-col pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font: 11px var(--mono);
+}
+.mg-assignments {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+.agent-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+}
+.agent-cell .avatar {
+  display: none;
+}
+.model-assignments {
+  grid-column: 1/-1;
+}
+.wf-map-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 1px dashed var(--line-2);
+  border-radius: var(--r-sm);
+}
+.wf-slot-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.wf-out-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+.wf-slot-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+.wf-slot-id,
+.wf-map-hint {
+  font-size: 11px;
+  color: var(--tx-3);
+}
+.wf-slot-row select {
+  width: 90px;
+}
+
+.result-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.result-bar.ok {
+  color: var(--ok);
+}
+.result-bar.err {
+  color: var(--err);
+}
+.result-bar .detail {
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.key-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.kh,
+.kh-inline {
+  font: 11px var(--mono);
+  color: var(--tx-3);
+}
+
+.mg-table .mg-row {
+  flex-wrap: nowrap;
+}
+
+.mg-field p {
+  margin: 0;
+}
+.mg-card > .mg-row {
+  flex-wrap: nowrap;
+}
+.mg-card > .mg-row > b {
+  min-width: 0;
+}
+.mg-options {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.mg-option {
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--line-2);
+  font: inherit;
+  font-size: 12px;
+  color: var(--tx-2);
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--t-fast);
+}
+.mg-option.on {
+  background: color-mix(in srgb, var(--sc-manage) 12%, var(--bg-3));
+  border-color: color-mix(in srgb, var(--sc-manage) 60%, transparent);
+  color: var(--tx-1);
+}
+.mg-option:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.mg-step {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 114px;
+  height: 28px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-sm);
+  background: var(--bg-0);
+}
+.mg-step button {
+  width: 24px;
+  height: 26px;
+  border: 0;
+  color: var(--tx-2);
+  background: transparent;
+  cursor: pointer;
+}
+.mg-step input {
+  width: 50px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--tx-1);
+  font: 600 12px var(--mono);
+  text-align: center;
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+.mg-step input::-webkit-inner-spin-button {
+  appearance: none;
+}
+@keyframes management-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--page-enter-y));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.mg-card .mg-muted {
+  font-size: 12px;
+}
+
+.mg-pin {
+  width: var(--manage-pin-size);
+  height: var(--manage-pin-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--manage-pin-radius);
+  display: grid;
+  place-items: center;
+  color: var(--tx-3);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--t-fast),
+    background var(--t-fast);
+}
+.mg-pin:hover {
+  background: rgb(var(--ink) / 0.08);
+  color: var(--tx-1);
+}
+.mg-pin[aria-pressed="true"] {
+  color: var(--gold);
+}
+.mg-pin[aria-pressed="true"] svg {
+  fill: currentColor;
+}
+
+/* Confirmed full-width task table. Shared table/controls remain the single source. */
+.task-table {
+  --manage-table-layout: var(--task-table-layout);
+  --manage-cell-box: border-box;
+}
+.task-thumbnail-column {
+  width: var(--task-thumbnail-column);
+}
+.task-progress-column {
+  width: var(--task-progress-column);
+}
+.task-tabs {
+  width: var(--task-tabs-width);
+  margin-left: var(--task-tabs-offset);
+}
+.task-search {
+  width: var(--task-search-width);
+}
+.task-thumbnail {
+  display: grid;
+  place-items: center;
+  width: var(--task-thumbnail-width);
+  height: var(--task-thumbnail-height);
+  border-radius: var(--task-thumbnail-radius);
+  border: 0;
+  padding: 0;
+  overflow: hidden;
+  color: var(--tx-3);
+  background: var(--bg-2);
+  cursor: pointer;
+}
+.task-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.task-name {
+  font-weight: 500;
+}
+.task-progress {
+  height: var(--task-progress-height);
+  margin-top: var(--task-progress-gap);
+  border-radius: var(--task-progress-radius);
+  background: rgb(var(--ink) / 0.1);
+  overflow: hidden;
+}
+.task-progress i {
+  display: block;
+  height: 100%;
+  background: var(--task-progress-fill);
+  box-shadow: var(--task-progress-shadow);
+  transition: width var(--task-progress-duration) linear;
+}
+.task-progress-unknown {
+  color: var(--tx-3);
+  margin-left: var(--task-progress-gap);
+}
+.task-table .mg-tag.run,
+.task-dialog .mg-tag.run {
+  color: var(--task-running-color);
+  border-color: var(--task-running-border);
+  background: var(--task-running-background);
+}
+.task-dialog {
+  height: auto;
+  overflow: visible;
+  gap: 12px;
+}
+.task-output {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.task-output img,
+.task-output video {
+  width: 100%;
+  max-height: var(--task-preview-height);
+  object-fit: contain;
+  background: var(--media-bg);
+}
+
+.mg-header-reserve {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 0 var(--manage-header-reserve-padding);
+  border: 1px solid transparent;
+  font: var(--manage-header-reserve-font);
+  letter-spacing: inherit;
+}
+.mg-header-reserve > :first-child {
+  width: var(--manage-header-reserve-dot);
+}
+.mg-header-reserve > :last-child {
+  white-space: pre;
+}

calliope-web/src/lib/components/omni/AssetPickerModal.svelte

@@ -166,7 +166,6 @@
 						>
 							<div class="thumb">
 								{#if isVideo}
-									<!-- svelte-ignore a11y_media_has_caption -->
 									<video src={src} muted playsinline preload="metadata" onerror={hideBroken}></video>
 								{:else if (opt.kind ?? kind) === 'audio'}
 									<Icon name="music" size={28} />
@@ -231,7 +230,7 @@
 	.tabs button.active {
 		background: var(--accent);
 		border-color: var(--accent);
-		color: #fff;
+		color: var(--accent-ink);
 	}
 
 	.tabs button:focus-visible {
@@ -341,7 +340,7 @@
 		height: 20px;
 		border-radius: 9999px;
 		background: var(--accent);
-		color: #fff;
+		color: var(--accent-ink);
 		display: flex;
 		align-items: center;
 		justify-content: center;

calliope-web/src/lib/components/omni/MediaTile.svelte

@@ -78,6 +78,7 @@
 		// The same path can arrive twice (e.g. a scene clip that was also
 		// uploaded to the playground). Duplicate keys crash the keyed each
 		// in the picker grid, so dedupe by path first.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Local path deduplication scratch set for one filter pass; only the filtered asset array escapes.
 		const seen = new Set<string>();
 		return assetOptions.filter((o) => {
 			const match =
@@ -144,7 +145,6 @@
 		{:else if value && thumbSrc && isImageKind}
 			<img class="tile-thumb" src={thumbSrc} alt={displayLabel} onerror={hideBrokenThumb} />
 		{:else if value && isVideoKind && thumbSrc}
-			<!-- svelte-ignore a11y_media_has_caption -->
 			<video class="tile-thumb" src={thumbSrc} muted playsinline></video>
 		{:else if value}
 			<div class="tile-file">
@@ -271,9 +271,9 @@
 		width: 20px;
 		height: 20px;
 		border-radius: 9999px;
-		background: rgba(0, 0, 0, 0.65);
+		background: var(--media-scrim);
 		border: none;
-		color: white;
+		color: var(--on-media);
 		cursor: pointer;
 		opacity: 0;
 		transition: opacity 0.15s;

calliope-web/src/lib/components/omni/PillPopover.svelte

@@ -63,6 +63,7 @@
 		if (!open || !panelEl) return;
 		document.body.appendChild(panelEl);
 		return () => {
+			// eslint-disable-next-line svelte/no-dom-manipulating -- Template creates panel contents; effect owns body portal placement and teardown. Remove the moved root on close/unmount; listener cleanup stays separate.
 			panelEl?.remove();
 		};
 	});
@@ -173,7 +174,7 @@
 		padding: 0 4px;
 		border-radius: 9999px;
 		background: var(--accent);
-		color: white;
+		color: var(--accent-ink);
 		font-size: 10px;
 		font-weight: 700;
 	}