diff --git a/backend/app.py b/backend/app.py
index e5cdcdc..9610708 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -24,6 +24,7 @@ from routes import (
     health,
     knowledge_bases,
     model_registry,
+    node_types,
     voice_webrtc,
     voice_ws,
 )
@@ -49,6 +50,7 @@ app.include_router(health.router)
 app.include_router(assistants.router)
 app.include_router(knowledge_bases.router)
 app.include_router(model_registry.router)
+app.include_router(node_types.router)
 app.include_router(voice_webrtc.router)
 app.include_router(voice_ws.router)
 
diff --git a/backend/routes/assistants.py b/backend/routes/assistants.py
index 08569e6..ee82502 100644
--- a/backend/routes/assistants.py
+++ b/backend/routes/assistants.py
@@ -7,6 +7,7 @@ from db.session import get_session
 from fastapi import APIRouter, Depends, HTTPException
 from schemas import AssistantOut, AssistantUpsert
 from services.masking import mask, resolve_incoming_key
+from services.node_specs import validate_graph
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
@@ -14,6 +15,15 @@ router = APIRouter(prefix="/api/assistants", tags=["assistants"])
 CAPABILITIES = ("LLM", "ASR", "TTS", "Realtime", "Embedding")
 
 
+def _validate_workflow(body: AssistantUpsert) -> None:
+    """workflow 类型:保存前校验图结构,不通过则 400。其他类型跳过。"""
+    if body.type != "workflow":
+        return
+    errors = validate_graph(body.graph or {})
+    if errors:
+        raise HTTPException(400, "工作流校验失败:" + ";".join(errors))
+
+
 async def _sync_bindings(
     session: AsyncSession, assistant_id: str, resource_ids: dict[str, str]
 ) -> None:
@@ -82,6 +92,7 @@ async def list_assistants(session: AsyncSession = Depends(get_session)):
 async def create_assistant(
     body: AssistantUpsert, session: AsyncSession = Depends(get_session)
 ):
+    _validate_workflow(body)
     data = body.model_dump()
     resource_ids = data.pop("model_resource_ids")
     assistant = Assistant(id=f"asst_{uuid.uuid4().hex[:12]}", **data)
@@ -141,6 +152,7 @@ async def update_assistant(
     assistant = await session.get(Assistant, assistant_id)
     if not assistant:
         raise HTTPException(404, "助手不存在")
+    _validate_workflow(body)
     data = body.model_dump()
     resource_ids = data.pop("model_resource_ids")
     data["api_key"] = resolve_incoming_key(data["api_key"], assistant.api_key)
diff --git a/backend/routes/node_types.py b/backend/routes/node_types.py
new file mode 100644
index 0000000..4624b4d
--- /dev/null
+++ b/backend/routes/node_types.py
@@ -0,0 +1,14 @@
+"""工作流节点类型目录。前端画布据此渲染「添加节点」面板与节点编辑表单。
+
+规格是只读的、与代码同生命周期(改了要重启后端 + 前端刷新),所以无需鉴权与缓存层。
+"""
+
+from fastapi import APIRouter
+from services.node_specs import node_types_response
+
+router = APIRouter(prefix="/api/node-types", tags=["workflow"])
+
+
+@router.get("")
+async def list_node_types():
+    return node_types_response()
diff --git a/backend/services/node_specs.py b/backend/services/node_specs.py
new file mode 100644
index 0000000..3f18bbd
--- /dev/null
+++ b/backend/services/node_specs.py
@@ -0,0 +1,161 @@
+"""工作流节点规格 + 图校验(对齐 dograh 的 node-spec / GraphConstraints 思路)。
+
+当前实现 3 个核心节点:开始(startCall)/智能体(agentNode)/结束(endCall)。
+本模块是「节点类型」的唯一事实源:
+  - /api/node-types 接口直接吐这里的规格;
+  - 助手保存时用这里的约束校验 workflow 图。
+
+新增节点类型只需在 NODE_SPECS 里加一条并补充约束。前端 specs.ts 与此保持一致。
+"""
+
+from __future__ import annotations
+
+from typing import Any
+
+# 规格版本号:节点定义有破坏性变更时 +1,前端可据此判断是否需要刷新缓存。
+SPEC_VERSION = "1"
+
+# 每个节点的图约束。None 表示不限制。
+#   min_incoming / max_incoming:入边数量
+#   min_outgoing / max_outgoing:出边数量
+NODE_SPECS: list[dict[str, Any]] = [
+    {
+        "name": "startCall",
+        "displayName": "开始",
+        "category": "call_node",
+        "description": "工作流入口,每个流程有且仅有一个。播放开场白并进入首个节点。",
+        "icon": "Play",
+        "accent": "mint",
+        "addable": False,
+        "constraints": {"minIncoming": 0, "maxIncoming": 0},
+        "fields": [
+            {"key": "name", "label": "节点名称", "type": "text"},
+            {"key": "greeting", "label": "开场白", "type": "textarea"},
+            {"key": "prompt", "label": "全局提示词", "type": "textarea"},
+        ],
+    },
+    {
+        "name": "agentNode",
+        "displayName": "智能体节点",
+        "category": "call_node",
+        "description": "对话处理单元。按提示词与用户多轮交互,可有多个并通过条件边流转。",
+        "icon": "Bot",
+        "accent": "sky",
+        "addable": True,
+        "constraints": {"minIncoming": 1},
+        "fields": [
+            {"key": "name", "label": "节点名称", "type": "text"},
+            {"key": "prompt", "label": "节点提示词", "type": "textarea", "required": True},
+            {"key": "allowInterrupt", "label": "允许用户打断", "type": "switch"},
+        ],
+    },
+    {
+        "name": "endCall",
+        "displayName": "结束",
+        "category": "call_node",
+        "description": "终止节点,礼貌结束对话。可有多个,均无出边。",
+        "icon": "Flag",
+        "accent": "rose",
+        "addable": False,
+        "constraints": {"minIncoming": 1, "minOutgoing": 0, "maxOutgoing": 0},
+        "fields": [
+            {"key": "name", "label": "节点名称", "type": "text"},
+            {"key": "prompt", "label": "结束语提示词", "type": "textarea"},
+        ],
+    },
+]
+
+_SPEC_BY_NAME = {spec["name"]: spec for spec in NODE_SPECS}
+
+
+def node_types_response() -> dict[str, Any]:
+    """/api/node-types 的响应体(camelCase,直接喂前端)。"""
+    return {"specVersion": SPEC_VERSION, "nodeTypes": NODE_SPECS}
+
+
+def validate_graph(graph: dict[str, Any]) -> list[str]:
+    """校验 workflow 图,返回错误信息列表(空列表 = 通过)。
+
+    基础规则(对齐 dograh 的核心不变量):
+      1. 节点类型必须是已注册类型;
+      2. 有且仅有一个 startCall;
+      3. 至少有一个 endCall;
+      4. 边的 source/target 必须指向存在的节点;
+      5. 入边/出边数量满足各节点类型的约束。
+
+    空图(无节点)视为草稿,直接放行,方便先存后编排。
+    """
+    errors: list[str] = []
+    nodes = graph.get("nodes") or []
+    edges = graph.get("edges") or []
+
+    if not nodes:
+        return errors  # 草稿:放行
+
+    node_ids: set[str] = set()
+    type_counts: dict[str, int] = {}
+    node_type_by_id: dict[str, str] = {}
+
+    for node in nodes:
+        node_id = node.get("id")
+        node_type = node.get("type")
+        if not node_id:
+            errors.append("存在缺少 id 的节点")
+            continue
+        if node_id in node_ids:
+            errors.append(f"节点 id 重复:{node_id}")
+        node_ids.add(node_id)
+        if node_type not in _SPEC_BY_NAME:
+            errors.append(f"未知节点类型:{node_type}(节点 {node_id})")
+            continue
+        node_type_by_id[node_id] = node_type
+        type_counts[node_type] = type_counts.get(node_type, 0) + 1
+
+    start_count = type_counts.get("startCall", 0)
+    if start_count == 0:
+        errors.append("工作流必须有一个「开始」节点")
+    elif start_count > 1:
+        errors.append("工作流只能有一个「开始」节点")
+
+    if type_counts.get("endCall", 0) == 0:
+        errors.append("工作流至少需要一个「结束」节点")
+
+    # 统计入边/出边
+    incoming: dict[str, int] = {nid: 0 for nid in node_ids}
+    outgoing: dict[str, int] = {nid: 0 for nid in node_ids}
+    for edge in edges:
+        source = edge.get("source")
+        target = edge.get("target")
+        if source not in node_ids:
+            errors.append(f"连线指向了不存在的源节点:{source}")
+            continue
+        if target not in node_ids:
+            errors.append(f"连线指向了不存在的目标节点:{target}")
+            continue
+        outgoing[source] += 1
+        incoming[target] += 1
+
+    for node_id, node_type in node_type_by_id.items():
+        constraints = _SPEC_BY_NAME[node_type]["constraints"]
+        name = node_type
+        _check_count(errors, incoming[node_id], constraints, "Incoming", name, "入边")
+        _check_count(errors, outgoing[node_id], constraints, "Outgoing", name, "出边")
+
+    return errors
+
+
+def _check_count(
+    errors: list[str],
+    actual: int,
+    constraints: dict[str, int],
+    suffix: str,
+    node_type: str,
+    label: str,
+) -> None:
+    lo = constraints.get(f"min{suffix}")
+    hi = constraints.get(f"max{suffix}")
+    display = _SPEC_BY_NAME[node_type]["displayName"]
+    if lo is not None and actual < lo:
+        errors.append(f"「{display}」节点{label}数量不能少于 {lo}(当前 {actual})")
+    if hi is not None and actual > hi:
+        errors.append(f"「{display}」节点{label}数量不能多于 {hi}(当前 {actual})")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9d75b9a..0094f13 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "ai-video-admin-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@xyflow/react": "^12.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^1.17.0",
@@ -3776,6 +3777,55 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
@@ -4455,6 +4505,48 @@
         "win32"
       ]
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.11.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.11.0.tgz",
+      "integrity": "sha512-na4IO33FSs2OS72hASgZDmTYwFAkef7Z74uBUVrong3ARmQQHfnRUVaCFn1kTt5LbS6pK03TbYjCPGLjLFfziA==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.77",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=17",
+        "@types/react-dom": ">=17",
+        "react": ">=17",
+        "react-dom": ">=17"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.77",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.77.tgz",
+      "integrity": "sha512-qCDCMCQAAgUu8yHnhloHG9F5mwPX5E+Wl8McpYIOPSSXfzFJJoZcwOcsDiAjitVKIg2de1WmJbCHfpcvxprsgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
@@ -5071,6 +5163,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -5318,6 +5416,111 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -11532,6 +11735,34 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 5de6772..cadaaed 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@xyflow/react": "^12.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^1.17.0",
diff --git a/frontend/src/components/pages/AssistantPage.tsx b/frontend/src/components/pages/AssistantPage.tsx
index 39dbde7..a009d90 100644
--- a/frontend/src/components/pages/AssistantPage.tsx
+++ b/frontend/src/components/pages/AssistantPage.tsx
@@ -31,6 +31,7 @@ import {
   PhoneOff,
   Orbit,
   Waves,
+  Bug,
 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
@@ -38,6 +39,12 @@ import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Switch } from "@/components/ui/switch";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -89,6 +96,14 @@ import {
   type ChatMessage,
   type VoicePreviewStatus,
 } from "@/hooks/use-voice-preview";
+import {
+  WorkflowEditor,
+  type WorkflowSettings,
+} from "@/components/workflow/WorkflowEditor";
+import {
+  defaultGraph,
+  type WorkflowGraph,
+} from "@/components/workflow/specs";
 
 type RuntimeMode = "pipeline" | "realtime";
 
@@ -167,7 +182,7 @@ const typeToView = {
   dify: "create-dify",
   fastgpt: "create-fastgpt",
   opencode: "create-opencode",
-  workflow: "placeholder",
+  workflow: "workflow",
 } as const;
 
 type View = "list" | "choose" | "loading" | (typeof typeToView)[ApiAssistantType];
@@ -348,6 +363,16 @@ export function AssistantPage(props: AssistantPageProps) {
   // 已保存基线(当前类型表单的 JSON);与表单不一致时保存按钮才可点击
   const [savedSnapshot, setSavedSnapshot] = useState<string | null>(null);
 
+  // workflow 编辑器:名称 + 图(nodes/edges)。graph 实时由画布回传。
+  const [workflowName, setWorkflowName] = useState("");
+  const [workflowGraph, setWorkflowGraph] = useState<WorkflowGraph>(() =>
+    defaultGraph(),
+  );
+  const [workflowSettings, setWorkflowSettings] = useState<WorkflowSettings>({
+    allowInterrupt: true,
+  });
+  const [debugOpen, setDebugOpen] = useState(false);
+
   const loadAssistants = useCallback(async () => {
     setListLoading(true);
     setListError(null);
@@ -507,6 +532,14 @@ export function AssistantPage(props: AssistantPageProps) {
         const next = { ...openCodeForm, apiKey: "" };
         setOpenCodeForm(next);
         setSavedSnapshot(JSON.stringify(next));
+      } else if (view === "workflow") {
+        setSavedSnapshot(
+          JSON.stringify({
+            name: workflowName,
+            graph: workflowGraph,
+            settings: workflowSettings,
+          }),
+        );
       }
     } catch (error) {
       setSaveError(error instanceof Error ? error.message : "保存失败");
@@ -635,9 +668,29 @@ export function AssistantPage(props: AssistantPageProps) {
         } else if (assistant.type === "opencode") {
           setSavedSnapshot(JSON.stringify(fillOpenCodeForm(assistant)));
         } else {
-          // 工作流：暂时显示占位页
-          setDraftName(assistant.name);
-          setDraftType(typeToLabel[assistant.type]);
+          // 工作流：回填名称与图(空图回落到默认 开始→智能体→结束)
+          const graph =
+            assistant.graph &&
+            Array.isArray((assistant.graph as WorkflowGraph).nodes) &&
+            (assistant.graph as WorkflowGraph).nodes.length > 0
+              ? (assistant.graph as WorkflowGraph)
+              : defaultGraph();
+          const wfSettings: WorkflowSettings = {
+            llm: assistant.modelResourceIds.LLM,
+            asr: assistant.modelResourceIds.ASR,
+            tts: assistant.modelResourceIds.TTS,
+            allowInterrupt: assistant.enableInterrupt,
+          };
+          setWorkflowName(assistant.name);
+          setWorkflowGraph(graph);
+          setWorkflowSettings(wfSettings);
+          setSavedSnapshot(
+            JSON.stringify({
+              name: assistant.name,
+              graph,
+              settings: wfSettings,
+            }),
+          );
         }
         setView(typeToView[assistant.type]);
       } catch (error) {
@@ -672,6 +725,22 @@ export function AssistantPage(props: AssistantPageProps) {
     );
   }
 
+  function handleSaveWorkflow() {
+    void save(
+      baseUpsert({
+        name: workflowName.trim(),
+        type: "workflow",
+        enableInterrupt: workflowSettings.allowInterrupt,
+        modelResourceIds: {
+          ...(workflowSettings.llm ? { LLM: workflowSettings.llm } : {}),
+          ...(workflowSettings.asr ? { ASR: workflowSettings.asr } : {}),
+          ...(workflowSettings.tts ? { TTS: workflowSettings.tts } : {}),
+        },
+        graph: workflowGraph as unknown as Record<string, unknown>,
+      }),
+    );
+  }
+
   // 当前编辑器表单相对已保存基线是否有改动(决定保存按钮是否可点)
   const activeFormJson =
     view === "create"
@@ -682,7 +751,13 @@ export function AssistantPage(props: AssistantPageProps) {
           ? JSON.stringify(fastGptForm)
           : view === "create-opencode"
             ? JSON.stringify(openCodeForm)
-            : null;
+            : view === "workflow"
+              ? JSON.stringify({
+                  name: workflowName,
+                  graph: workflowGraph,
+                  settings: workflowSettings,
+                })
+              : null;
   const dirty =
     activeFormJson !== null &&
     savedSnapshot !== null &&
@@ -1114,59 +1189,73 @@ export function AssistantPage(props: AssistantPageProps) {
     );
   }
 
-  if (view === "placeholder") {
+  if (view === "workflow") {
     return (
-      <div className="mx-auto flex w-full max-w-[1180px] flex-col gap-6">
-        <div className="flex items-start justify-between gap-6">
-          <div>
-            <h1 className="font-display display-lg text-ink">
-              {draftName.trim() || "创建助手"}
-            </h1>
-            <p className="mt-3 max-w-2xl text-[15px] leading-7 text-muted-foreground">
-              {draftType} 构建方式正在开发中，敬请期待。
-            </p>
+      <div className="-mt-6 flex h-full flex-col gap-4">
+        <div className="flex shrink-0 items-center justify-between gap-6 border-b border-hairline pb-3 pt-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <EditorBackButton onClick={() => router.push("/assistants")} />
+            <EditableTitle value={workflowName} onChange={setWorkflowName} />
+            <AssistantIdentity assistantId={editingId} />
           </div>
 
-          <Button
-            variant="outline"
-            size="lg"
-            className="shrink-0 gap-2 border-hairline-strong text-muted-foreground hover:text-foreground"
-            onClick={() => router.push("/assistants")}
-          >
-            <ChevronLeft size={16} />
-            返回列表
-          </Button>
+          <div className="flex shrink-0 gap-2">
+            {saveError && (
+              <span className="self-center text-xs text-destructive">
+                {saveError}
+              </span>
+            )}
+            <Button
+              variant="outline"
+              className="gap-2 border-hairline-strong text-foreground hover:bg-surface-strong"
+              disabled={!editingId}
+              onClick={() => setDebugOpen(true)}
+            >
+              <Bug size={16} />
+              调试
+            </Button>
+            <Button
+              className="gap-2"
+              disabled={saving || !dirty || !workflowName.trim()}
+              onClick={() => handleSaveWorkflow()}
+            >
+              {saving ? (
+                <Loader2 size={16} className="animate-spin" />
+              ) : (
+                <Save size={16} />
+              )}
+              保存
+            </Button>
+          </div>
         </div>
 
-        <section className="relative overflow-hidden rounded-3xl border border-hairline bg-canvas-soft px-10 py-20 text-center">
-          <div
-            aria-hidden
-            className="pointer-events-none absolute -right-24 top-0 h-72 w-72 rounded-full opacity-50 blur-3xl"
-            style={{
-              backgroundImage:
-                "radial-gradient(circle, color-mix(in srgb, var(--gradient-sky) 50%, transparent), transparent 70%)",
+        <div className="min-h-0 flex-1">
+          <WorkflowEditor
+            value={workflowGraph}
+            onChange={setWorkflowGraph}
+            settings={workflowSettings}
+            onSettingsChange={setWorkflowSettings}
+            modelOptions={{
+              llm: credOptions("LLM"),
+              asr: credOptions("ASR"),
+              tts: credOptions("TTS"),
             }}
           />
-          <div
-            aria-hidden
-            className="pointer-events-none absolute -left-20 bottom-0 h-64 w-64 rounded-full opacity-45 blur-3xl"
-            style={{
-              backgroundImage:
-                "radial-gradient(circle, color-mix(in srgb, var(--gradient-lavender) 50%, transparent), transparent 70%)",
-            }}
-          />
-          <div className="relative">
-            <div className="caption-label inline-flex rounded-full bg-surface-strong px-3 py-1 text-muted-foreground">
-              建设中
-            </div>
-            <p className="font-display display-sm mx-auto mt-5 max-w-md text-ink">
-              {draftType} 构建页面正在编写中
-            </p>
-            <p className="mx-auto mt-3 max-w-md text-sm leading-7 text-body">
-              页面骨架与设计语言已就绪，后续将填充具体构建流程与数据。
-            </p>
-          </div>
-        </section>
+        </div>
+
+        <Sheet open={debugOpen} onOpenChange={setDebugOpen} modal={false}>
+          <SheetContent
+            side="right"
+            showOverlay={false}
+            onInteractOutside={(e) => e.preventDefault()}
+            className="w-[440px] gap-0 border-l border-hairline bg-card p-0 sm:max-w-[440px]"
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>语音调试</SheetTitle>
+            </SheetHeader>
+            <DebugDrawer assistantId={editingId} asSheet />
+          </SheetContent>
+        </Sheet>
       </div>
     );
   }
@@ -1767,12 +1856,23 @@ function SegmentedIconButton({
   );
 }
 
-function DebugDrawer({ assistantId }: { assistantId: string | null }) {
+function DebugDrawer({
+  assistantId,
+  asSheet = false,
+}: {
+  assistantId: string | null;
+  asSheet?: boolean;
+}) {
   const [showTranscript, setShowTranscript] = useState(false);
   const [vizStyle, setVizStyle] = useState<VizStyle>("aura");
 
+  // 内联(prompt 编辑器右栏)用 aside + 圆角边框;抽屉模式占满 Sheet。
+  const containerClass = asSheet
+    ? "flex h-full min-w-0 flex-1 flex-col overflow-hidden"
+    : "hidden min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-hairline bg-card shadow-sm lg:flex";
+
   return (
-    <aside className="hidden min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-hairline bg-card shadow-sm lg:flex">
+    <aside className={containerClass}>
       <div className="flex shrink-0 items-center justify-between gap-3 border-b border-hairline px-5 py-3">
         <div className="text-sm font-medium text-foreground">调试与预览</div>
         {SHOW_VOICE_VIZ && (
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index eb2c8a0..e6403fe 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -50,14 +50,16 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  showOverlay = true,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
+  showOverlay?: boolean
 }) {
   return (
     <SheetPortal>
-      <SheetOverlay />
+      {showOverlay && <SheetOverlay />}
       <SheetPrimitive.Content
         data-slot="sheet-content"
         data-side={side}
diff --git a/frontend/src/components/workflow/ConditionEdge.tsx b/frontend/src/components/workflow/ConditionEdge.tsx
new file mode 100644
index 0000000..8614cd3
--- /dev/null
+++ b/frontend/src/components/workflow/ConditionEdge.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * 条件边。边携带 condition(自然语言条件,LLM 据此决定是否走这条路径)与
+ * label(日志里识别该路径的短标签)。悬停/选中时在标签旁显示「编辑 / 删除」按钮。
+ */
+
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  type EdgeProps,
+  useReactFlow,
+} from "@xyflow/react";
+import { Pencil, Trash2 } from "lucide-react";
+import { useContext, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import { EdgeActionContext } from "./context";
+
+export function ConditionEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected,
+}: EdgeProps) {
+  const actions = useContext(EdgeActionContext);
+  const { setEdges } = useReactFlow();
+  const [hovered, setHovered] = useState(false);
+
+  // 点击标签:只选中这条边(露出编辑/删除按钮),不直接进入编辑。
+  const selectThisEdge = () =>
+    setEdges((eds) => eds.map((e) => ({ ...e, selected: e.id === id })));
+  const [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 8,
+    offset: 20,
+  });
+
+  const label = ((data?.label as string) || (data?.condition as string) || "")
+    .toString()
+    .trim();
+  const expanded = hovered || selected;
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        style={{
+          stroke: selected ? "var(--primary)" : "var(--muted-soft)",
+          strokeWidth: selected ? 2.5 : 1.5,
+          transition: "stroke 0.15s ease, stroke-width 0.15s ease",
+        }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          className="nodrag nopan pointer-events-auto absolute flex items-center gap-1"
+          style={{
+            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          }}
+          onMouseEnter={() => setHovered(true)}
+          onMouseLeave={() => setHovered(false)}
+        >
+          <button
+            type="button"
+            title="条件"
+            className={cn(
+              "max-w-[160px] truncate rounded-full border px-2.5 py-1 text-xs shadow-sm transition-colors",
+              label
+                ? "border-hairline bg-card text-foreground hover:border-primary"
+                : "border-dashed border-hairline-strong bg-card/80 text-muted-soft hover:text-foreground",
+              selected && "border-primary ring-2 ring-primary/30",
+            )}
+            onClick={selectThisEdge}
+          >
+            {label || "＋ 条件"}
+          </button>
+
+          {expanded && (
+            <button
+              type="button"
+              title="编辑条件"
+              className="flex h-6 w-6 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
+              onClick={() => actions.edit(id)}
+            >
+              <Pencil size={12} />
+            </button>
+          )}
+          {expanded && (
+            <button
+              type="button"
+              title="删除连线"
+              className="flex h-6 w-6 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-destructive"
+              onClick={() => actions.remove(id)}
+            >
+              <Trash2 size={12} />
+            </button>
+          )}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+export const edgeTypes = { condition: ConditionEdge };
diff --git a/frontend/src/components/workflow/GenericNode.tsx b/frontend/src/components/workflow/GenericNode.tsx
new file mode 100644
index 0000000..1723c4b
--- /dev/null
+++ b/frontend/src/components/workflow/GenericNode.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+/**
+ * 通用节点渲染器。所有节点类型共用一个组件,规格来自 NodeSpecsContext
+ * (后端 /api/node-types)。悬停/选中时在右上角显示「编辑 / 删除」按钮。
+ */
+
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { Pencil, Trash2 } from "lucide-react";
+import { useContext } from "react";
+
+import { cn } from "@/lib/utils";
+import { NodeActionContext, NodeSpecsContext } from "./context";
+import { accentVar, type WorkflowNodeData } from "./specs";
+
+export function GenericNode({ id, type, data, selected }: NodeProps) {
+  const specs = useContext(NodeSpecsContext);
+  const actions = useContext(NodeActionContext);
+  const spec = specs[type as string];
+  if (!spec) return null;
+
+  const nodeData = data as WorkflowNodeData;
+  const Icon = spec.icon;
+  const preview = (nodeData.greeting || nodeData.prompt || "")
+    .toString()
+    .trim();
+
+  return (
+    <div
+      data-node-id={id}
+      className={cn(
+        "group relative w-[228px] rounded-2xl border bg-card p-4 shadow-sm transition-all",
+        selected
+          ? "border-primary ring-2 ring-primary/30"
+          : "border-hairline hover:shadow-md",
+      )}
+    >
+      {spec.hasTarget && (
+        <Handle
+          type="target"
+          position={Position.Left}
+          className="!h-2.5 !w-2.5 !border-2 !border-card !bg-muted-soft"
+        />
+      )}
+
+      {/* 悬停/选中时出现的操作按钮 */}
+      <div
+        className={cn(
+          "nodrag absolute -top-3 right-3 flex items-center gap-1 transition-opacity",
+          selected
+            ? "opacity-100"
+            : "opacity-0 group-hover:opacity-100",
+        )}
+      >
+        <button
+          type="button"
+          title="编辑节点"
+          className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-foreground"
+          onClick={(e) => {
+            e.stopPropagation();
+            actions.edit(id);
+          }}
+        >
+          <Pencil size={13} />
+        </button>
+        {spec.addable && (
+          <button
+            type="button"
+            title="删除节点"
+            className="flex h-7 w-7 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground shadow-sm transition-colors hover:text-destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              actions.remove(id);
+            }}
+          >
+            <Trash2 size={13} />
+          </button>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-ink"
+          style={{
+            backgroundImage: `radial-gradient(circle at 30% 30%, color-mix(in srgb, var(${accentVar(spec.accent)}) 70%, transparent), color-mix(in srgb, var(${accentVar(spec.accent)}) 35%, transparent))`,
+          }}
+        >
+          <Icon size={18} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">
+            {nodeData.name || spec.displayName}
+          </div>
+          <div className="caption-label text-muted-soft">{spec.displayName}</div>
+        </div>
+      </div>
+
+      {preview ? (
+        <p className="mt-3 line-clamp-2 text-xs leading-5 text-muted-foreground">
+          {preview}
+        </p>
+      ) : (
+        <p className="mt-3 text-xs italic leading-5 text-muted-soft">
+          点击编辑节点内容…
+        </p>
+      )}
+
+      {spec.hasSource && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          className="!h-2.5 !w-2.5 !border-2 !border-card !bg-primary"
+        />
+      )}
+    </div>
+  );
+}
+
+export const nodeTypes = {
+  startCall: GenericNode,
+  agentNode: GenericNode,
+  endCall: GenericNode,
+};
diff --git a/frontend/src/components/workflow/WorkflowEditor.tsx b/frontend/src/components/workflow/WorkflowEditor.tsx
new file mode 100644
index 0000000..8a03c25
--- /dev/null
+++ b/frontend/src/components/workflow/WorkflowEditor.tsx
@@ -0,0 +1,662 @@
+"use client";
+
+/**
+ * 工作流可视化编辑器。基于 @xyflow/react,样式套用 ai-video 设计 token。
+ *
+ * 工具栏:添加节点(弹窗选类型)、工作流设置(ASR/LLM/TTS、是否允许打断)。
+ * 节点与条件边:悬停/选中出现「编辑 / 删除」按钮,编辑统一用弹出对话框。
+ * 节点目录来自后端 /api/node-types。数据通过 value/onChange 与外部 graph 同步。
+ */
+
+import {
+  addEdge,
+  Background,
+  BackgroundVariant,
+  type Connection,
+  Controls,
+  type Edge,
+  MiniMap,
+  type Node,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Loader2, Plus, Settings2, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+
+import { edgeTypes } from "./ConditionEdge";
+import {
+  EdgeActionContext,
+  NodeActionContext,
+  NodeSpecsContext,
+} from "./context";
+import { nodeTypes } from "./GenericNode";
+import {
+  accentVar,
+  defaultGraph,
+  type NodeSpecMap,
+  type RuntimeNodeSpec,
+  type WorkflowGraph,
+  type WorkflowNodeData,
+  type WorkflowNodeType,
+} from "./specs";
+import { useNodeSpecs } from "./useNodeSpecs";
+
+export type WorkflowSettings = {
+  llm?: string;
+  asr?: string;
+  tts?: string;
+  allowInterrupt: boolean;
+};
+
+export type ModelOption = { value: string; label: string };
+
+export type WorkflowEditorProps = {
+  value?: WorkflowGraph;
+  onChange?: (graph: WorkflowGraph) => void;
+  settings: WorkflowSettings;
+  onSettingsChange: (settings: WorkflowSettings) => void;
+  modelOptions: { llm: ModelOption[]; asr: ModelOption[]; tts: ModelOption[] };
+};
+
+let nodeSeq = 0;
+const NONE = "__none__";
+
+function toFlow(graph: WorkflowGraph): { nodes: Node[]; edges: Edge[] } {
+  return {
+    nodes: graph.nodes.map((n) => ({
+      id: n.id,
+      type: n.type,
+      position: n.position,
+      data: n.data,
+    })),
+    edges: graph.edges.map((e) => ({
+      id: e.id,
+      type: "condition",
+      source: e.source,
+      target: e.target,
+      data: e.data ?? {},
+    })),
+  };
+}
+
+function fromFlow(nodes: Node[], edges: Edge[]): WorkflowGraph {
+  return {
+    nodes: nodes.map((n) => ({
+      id: n.id,
+      type: n.type as WorkflowNodeType,
+      position: n.position,
+      data: n.data as WorkflowNodeData,
+    })),
+    edges: edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      data: (e.data as { condition?: string; label?: string }) ?? {},
+    })),
+  };
+}
+
+function Canvas({
+  value,
+  onChange,
+  settings,
+  onSettingsChange,
+  modelOptions,
+  specsByType,
+}: WorkflowEditorProps & { specsByType: NodeSpecMap }) {
+  const initial = useMemo(() => toFlow(value ?? defaultGraph()), [value]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initial.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initial.edges);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingEdgeId, setEditingEdgeId] = useState<string | null>(null);
+  const [addOpen, setAddOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const { screenToFlowPosition } = useReactFlow();
+
+  // 回传画布状态给外部(助手 graph)。用 ref 避免把 onChange 放进依赖导致循环。
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    onChangeRef.current?.(fromFlow(nodes, edges));
+  }, [nodes, edges]);
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      setEdges((eds) =>
+        addEdge(
+          {
+            ...connection,
+            id: `e-${connection.source}-${connection.target}-${Date.now()}`,
+            type: "condition",
+            animated: true,
+            data: {},
+          },
+          eds,
+        ),
+      );
+    },
+    [setEdges],
+  );
+
+  // 连线约束:不能连入开始节点(无入边句柄),不能自连。
+  const isValidConnection = useCallback(
+    (c: Connection | Edge) => {
+      if (c.source === c.target) return false;
+      const target = nodes.find((n) => n.id === c.target);
+      if (!target) return false;
+      const spec = specsByType[target.type as string];
+      return !!spec?.hasTarget;
+    },
+    [nodes, specsByType],
+  );
+
+  const addNode = useCallback(
+    (spec: RuntimeNodeSpec) => {
+      nodeSeq += 1;
+      const id = `${spec.type}-${Date.now()}-${nodeSeq}`;
+      const position = screenToFlowPosition({
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+      });
+      const data: WorkflowNodeData = { name: spec.displayName };
+      if (spec.type === "agentNode") {
+        data.allowInterrupt = true;
+        data.prompt = "";
+      }
+      setNodes((ns) => [...ns, { id, type: spec.type, position, data }]);
+      setAddOpen(false);
+      setEditingId(id);
+    },
+    [screenToFlowPosition, setNodes],
+  );
+
+  const updateNodeData = useCallback(
+    (id: string, patch: Partial<WorkflowNodeData>) => {
+      setNodes((ns) =>
+        ns.map((n) =>
+          n.id === id ? { ...n, data: { ...n.data, ...patch } } : n,
+        ),
+      );
+    },
+    [setNodes],
+  );
+
+  const deleteNode = useCallback(
+    (id: string) => {
+      setNodes((ns) => ns.filter((n) => n.id !== id));
+      setEdges((es) => es.filter((e) => e.source !== id && e.target !== id));
+      setEditingId((cur) => (cur === id ? null : cur));
+    },
+    [setNodes, setEdges],
+  );
+
+  const updateEdgeData = useCallback(
+    (id: string, patch: { condition?: string; label?: string }) => {
+      setEdges((es) =>
+        es.map((e) =>
+          e.id === id ? { ...e, data: { ...(e.data ?? {}), ...patch } } : e,
+        ),
+      );
+    },
+    [setEdges],
+  );
+
+  const deleteEdge = useCallback(
+    (id: string) => {
+      setEdges((es) => es.filter((e) => e.id !== id));
+      setEditingEdgeId((cur) => (cur === id ? null : cur));
+    },
+    [setEdges],
+  );
+
+  const nodeActions = useMemo(
+    () => ({ edit: setEditingId, remove: deleteNode }),
+    [deleteNode],
+  );
+  const edgeActions = useMemo(
+    () => ({ edit: setEditingEdgeId, remove: deleteEdge }),
+    [deleteEdge],
+  );
+
+  const editingNode = nodes.find((n) => n.id === editingId);
+  const editingSpec = editingNode ? specsByType[editingNode.type as string] : null;
+  const editingEdge = edges.find((e) => e.id === editingEdgeId);
+  const addableSpecs = Object.values(specsByType).filter((s) => s.addable);
+
+  return (
+    <NodeSpecsContext.Provider value={specsByType}>
+      <NodeActionContext.Provider value={nodeActions}>
+        <EdgeActionContext.Provider value={edgeActions}>
+          <div className="h-full w-full overflow-hidden rounded-2xl border border-hairline bg-canvas-soft">
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              isValidConnection={isValidConnection}
+              onPaneClick={() => {
+                setEditingId(null);
+                setEditingEdgeId(null);
+              }}
+              fitView
+              proOptions={{ hideAttribution: true }}
+              defaultEdgeOptions={{ type: "condition", animated: true }}
+              className="bg-canvas-soft"
+            >
+              <Background
+                variant={BackgroundVariant.Dots}
+                gap={20}
+                size={1}
+                color="var(--hairline-strong)"
+              />
+              <Controls className="!rounded-xl !border !border-hairline !bg-card !shadow-sm [&_button]:!border-hairline [&_button]:!bg-card [&_button]:!text-foreground" />
+              <MiniMap
+                pannable
+                zoomable
+                className="!rounded-xl !border !border-hairline !bg-card"
+                maskColor="color-mix(in srgb, var(--canvas-soft) 70%, transparent)"
+                nodeColor="var(--surface-strong)"
+              />
+              <Panel position="top-left" className="flex gap-2">
+                <Button size="sm" className="gap-2" onClick={() => setAddOpen(true)}>
+                  <Plus size={15} />
+                  添加节点
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="gap-2 border-hairline-strong bg-card text-foreground hover:bg-surface-strong"
+                  onClick={() => setSettingsOpen(true)}
+                >
+                  <Settings2 size={15} />
+                  工作流设置
+                </Button>
+              </Panel>
+            </ReactFlow>
+
+            {/* 添加节点弹窗 */}
+            <Dialog open={addOpen} onOpenChange={setAddOpen}>
+              <DialogContent className="sm:max-w-[460px]">
+                <DialogHeader>
+                  <DialogTitle className="font-display text-ink">
+                    添加节点
+                  </DialogTitle>
+                  <DialogDescription>
+                    选择要添加到画布的节点类型。
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-2 py-2">
+                  {addableSpecs.length === 0 && (
+                    <p className="text-sm text-muted-soft">暂无可添加的节点类型。</p>
+                  )}
+                  {addableSpecs.map((spec) => {
+                    const Icon = spec.icon;
+                    return (
+                      <button
+                        key={spec.type}
+                        type="button"
+                        className="flex items-start gap-3 rounded-xl border border-hairline bg-card p-3 text-left transition-colors hover:border-primary hover:bg-surface-strong/40"
+                        onClick={() => addNode(spec)}
+                      >
+                        <div
+                          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-ink"
+                          style={{
+                            backgroundImage: `radial-gradient(circle at 30% 30%, color-mix(in srgb, var(${accentVar(spec.accent)}) 70%, transparent), color-mix(in srgb, var(${accentVar(spec.accent)}) 35%, transparent))`,
+                          }}
+                        >
+                          <Icon size={18} />
+                        </div>
+                        <div className="min-w-0">
+                          <div className="text-sm font-medium text-foreground">
+                            {spec.displayName}
+                          </div>
+                          <div className="mt-0.5 text-xs leading-5 text-muted-foreground">
+                            {spec.description}
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </DialogContent>
+            </Dialog>
+
+            {/* 工作流设置弹窗 */}
+            <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
+              <DialogContent className="sm:max-w-[460px]">
+                <DialogHeader>
+                  <DialogTitle className="font-display text-ink">
+                    工作流设置
+                  </DialogTitle>
+                  <DialogDescription>
+                    配置整个工作流使用的语音与大模型,以及交互策略。
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-5 py-2">
+                  <ModelSelect
+                    label="大模型(LLM)"
+                    value={settings.llm}
+                    options={modelOptions.llm}
+                    onChange={(v) => onSettingsChange({ ...settings, llm: v })}
+                  />
+                  <ModelSelect
+                    label="语音识别(ASR)"
+                    value={settings.asr}
+                    options={modelOptions.asr}
+                    onChange={(v) => onSettingsChange({ ...settings, asr: v })}
+                  />
+                  <ModelSelect
+                    label="语音合成(TTS)"
+                    value={settings.tts}
+                    options={modelOptions.tts}
+                    onChange={(v) => onSettingsChange({ ...settings, tts: v })}
+                  />
+                  <label className="flex items-center justify-between gap-3 pt-1">
+                    <span className="text-sm font-medium text-foreground">
+                      允许用户打断
+                    </span>
+                    <Switch
+                      checked={settings.allowInterrupt}
+                      onCheckedChange={(checked) =>
+                        onSettingsChange({ ...settings, allowInterrupt: checked })
+                      }
+                    />
+                  </label>
+                </div>
+                <DialogFooter>
+                  <Button onClick={() => setSettingsOpen(false)}>完成</Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
+            {/* 节点编辑弹窗 */}
+            <Dialog
+              open={!!editingNode}
+              onOpenChange={(open) => !open && setEditingId(null)}
+            >
+              <DialogContent className="sm:max-w-[460px]">
+                {editingNode && editingSpec && (
+                  <NodeForm
+                    key={editingNode.id}
+                    spec={editingSpec}
+                    data={editingNode.data as WorkflowNodeData}
+                    onSave={(patch) => {
+                      updateNodeData(editingNode.id, patch);
+                      setEditingId(null);
+                    }}
+                    onDelete={
+                      editingSpec.addable
+                        ? () => deleteNode(editingNode.id)
+                        : undefined
+                    }
+                  />
+                )}
+              </DialogContent>
+            </Dialog>
+
+            {/* 条件编辑弹窗 */}
+            <Dialog
+              open={!!editingEdge}
+              onOpenChange={(open) => !open && setEditingEdgeId(null)}
+            >
+              <DialogContent className="sm:max-w-[460px]">
+                {editingEdge && (
+                  <EdgeForm
+                    key={editingEdge.id}
+                    edge={editingEdge}
+                    onSave={(patch) => {
+                      updateEdgeData(editingEdge.id, patch);
+                      setEditingEdgeId(null);
+                    }}
+                    onDelete={() => deleteEdge(editingEdge.id)}
+                  />
+                )}
+              </DialogContent>
+            </Dialog>
+          </div>
+        </EdgeActionContext.Provider>
+      </NodeActionContext.Provider>
+    </NodeSpecsContext.Provider>
+  );
+}
+
+function ModelSelect({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value?: string;
+  options: ModelOption[];
+  onChange: (value: string | undefined) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="text-sm font-medium text-foreground">{label}</label>
+      <Select
+        value={value ?? NONE}
+        onValueChange={(v) => onChange(v === NONE ? undefined : v)}
+      >
+        <SelectTrigger className="border-hairline-strong bg-background text-foreground">
+          <SelectValue placeholder="选择模型资源" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={NONE}>未选择</SelectItem>
+          {options.map((o) => (
+            <SelectItem key={o.value} value={o.value}>
+              {o.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
+
+function NodeForm({
+  spec,
+  data,
+  onSave,
+  onDelete,
+}: {
+  spec: RuntimeNodeSpec;
+  data: WorkflowNodeData;
+  onSave: (patch: WorkflowNodeData) => void;
+  onDelete?: () => void;
+}) {
+  const [draft, setDraft] = useState<WorkflowNodeData>({ ...data });
+  const set = (key: string, val: unknown) =>
+    setDraft((d) => ({ ...d, [key]: val }));
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle className="font-display text-ink">
+          编辑{spec.displayName}
+        </DialogTitle>
+        <DialogDescription>{spec.description}</DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-5 py-2">
+        {spec.fields.map((field) => {
+          const raw = draft[field.key];
+          if (field.type === "switch") {
+            return (
+              <label
+                key={field.key}
+                className="flex items-center justify-between gap-3"
+              >
+                <span className="text-sm font-medium text-foreground">
+                  {field.label}
+                </span>
+                <Switch
+                  checked={Boolean(raw)}
+                  onCheckedChange={(checked) => set(field.key, checked)}
+                />
+              </label>
+            );
+          }
+          return (
+            <div key={field.key} className="flex flex-col gap-2">
+              <label className="text-sm font-medium text-foreground">
+                {field.label}
+                {field.required && <span className="text-destructive"> *</span>}
+              </label>
+              {field.type === "textarea" ? (
+                <Textarea
+                  rows={4}
+                  value={(raw as string) ?? ""}
+                  onChange={(e) => set(field.key, e.target.value)}
+                  className="resize-none border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+                />
+              ) : (
+                <Input
+                  value={(raw as string) ?? ""}
+                  onChange={(e) => set(field.key, e.target.value)}
+                  className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      <DialogFooter className="flex-row justify-between sm:justify-between">
+        {onDelete ? (
+          <Button
+            variant="outline"
+            className="gap-2 border-hairline-strong text-muted-foreground hover:text-destructive"
+            onClick={onDelete}
+          >
+            <Trash2 size={15} />
+            删除节点
+          </Button>
+        ) : (
+          <span />
+        )}
+        <Button onClick={() => onSave(draft)}>保存</Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function EdgeForm({
+  edge,
+  onSave,
+  onDelete,
+}: {
+  edge: Edge;
+  onSave: (patch: { condition: string; label: string }) => void;
+  onDelete: () => void;
+}) {
+  const data = (edge.data ?? {}) as { condition?: string; label?: string };
+  const [label, setLabel] = useState(data.label ?? "");
+  const [condition, setCondition] = useState(data.condition ?? "");
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle className="font-display text-ink">编辑条件</DialogTitle>
+        <DialogDescription>
+          条件用于让大模型判断对话是否应沿这条路径流转到下一节点。
+        </DialogDescription>
+      </DialogHeader>
+
+      <div className="flex flex-col gap-5 py-2">
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium text-foreground">条件标签</label>
+          <Input
+            value={label}
+            maxLength={64}
+            placeholder="例如:用户想转人工"
+            onChange={(e) => setLabel(e.target.value)}
+            className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+          />
+          <span className="text-xs text-muted-soft">
+            日志中识别该路径的短标签,{label.length}/64
+          </span>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium text-foreground">条件</label>
+          <Textarea
+            rows={4}
+            value={condition}
+            placeholder="描述触发这条路径的条件,例如:用户明确表示要找人工客服。"
+            onChange={(e) => setCondition(e.target.value)}
+            className="resize-none border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+          />
+        </div>
+      </div>
+
+      <DialogFooter className="flex-row justify-between sm:justify-between">
+        <Button
+          variant="outline"
+          className="gap-2 border-hairline-strong text-muted-foreground hover:text-destructive"
+          onClick={onDelete}
+        >
+          <Trash2 size={15} />
+          删除连线
+        </Button>
+        <Button onClick={() => onSave({ condition, label })}>保存条件</Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+export function WorkflowEditor(props: WorkflowEditorProps) {
+  const { byType, loading, error } = useNodeSpecs();
+
+  if (loading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft text-muted-foreground">
+        <Loader2 className="mr-2 animate-spin" size={18} />
+        正在加载节点目录…
+      </div>
+    );
+  }
+  if (error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center rounded-2xl border border-hairline bg-canvas-soft px-6 text-center text-sm text-destructive">
+        加载节点目录失败:{error}
+      </div>
+    );
+  }
+
+  return (
+    <ReactFlowProvider>
+      <Canvas {...props} specsByType={byType} />
+    </ReactFlowProvider>
+  );
+}
diff --git a/frontend/src/components/workflow/context.ts b/frontend/src/components/workflow/context.ts
new file mode 100644
index 0000000..a7fc7a0
--- /dev/null
+++ b/frontend/src/components/workflow/context.ts
@@ -0,0 +1,23 @@
+"use client";
+
+/**
+ * 画布内共享上下文。GenericNode / ConditionEdge 由 ReactFlow 渲染,拿不到外层
+ * 回调,统一通过这些 context 取节点规格与编辑/删除动作。
+ */
+
+import { createContext } from "react";
+
+import type { NodeSpecMap } from "./specs";
+
+/** 节点类型 → 运行期规格(来自 /api/node-types) */
+export const NodeSpecsContext = createContext<NodeSpecMap>({});
+
+export type ElementActions = {
+  edit: (id: string) => void;
+  remove: (id: string) => void;
+};
+
+const noop: ElementActions = { edit: () => {}, remove: () => {} };
+
+export const NodeActionContext = createContext<ElementActions>(noop);
+export const EdgeActionContext = createContext<ElementActions>(noop);
diff --git a/frontend/src/components/workflow/specs.ts b/frontend/src/components/workflow/specs.ts
new file mode 100644
index 0000000..04e228a
--- /dev/null
+++ b/frontend/src/components/workflow/specs.ts
@@ -0,0 +1,135 @@
+/**
+ * 工作流节点的前端类型与运行期规格。
+ *
+ * 节点「目录」(有哪些类型、各自的字段与约束)由后端 /api/node-types 提供,
+ * 通过 useNodeSpecs 拉取后用 toRuntimeSpec 转成带 React 组件(图标)的运行期规格。
+ * 本文件只保留:类型定义、默认图、图标/配色解析。新增节点类型改后端即可。
+ */
+
+import * as LucideIcons from "lucide-react";
+import { Circle, type LucideIcon } from "lucide-react";
+
+import type { NodeSpecDto } from "@/lib/api";
+
+export type WorkflowNodeType = "startCall" | "agentNode" | "endCall";
+
+export type WorkflowNodeData = {
+  /** 节点显示名 */
+  name: string;
+  /** 开场白(仅 startCall) */
+  greeting?: string;
+  /** 节点提示词 */
+  prompt?: string;
+  /** 允许打断(仅 agentNode) */
+  allowInterrupt?: boolean;
+  [key: string]: unknown;
+};
+
+export type FieldSpec = {
+  key: string;
+  label: string;
+  type: "text" | "textarea" | "switch";
+  required?: boolean;
+};
+
+/** 解析后的运行期节点规格(DTO + 解析出的 React 图标 + 派生句柄) */
+export type RuntimeNodeSpec = {
+  type: string;
+  displayName: string;
+  description: string;
+  icon: LucideIcon;
+  accent: string;
+  addable: boolean;
+  /** 入边句柄(开始节点没有) */
+  hasTarget: boolean;
+  /** 出边句柄(结束节点没有) */
+  hasSource: boolean;
+  fields: FieldSpec[];
+};
+
+/** 渐变 token → CSS 变量名(图标底色用),未知配色回落到 sky */
+export const ACCENT_VAR: Record<string, string> = {
+  mint: "--gradient-mint",
+  sky: "--gradient-sky",
+  rose: "--gradient-rose",
+  peach: "--gradient-peach",
+  lavender: "--gradient-lavender",
+};
+
+export function accentVar(accent: string): string {
+  return ACCENT_VAR[accent] ?? ACCENT_VAR.sky;
+}
+
+/** 按名字解析 Lucide 图标,找不到回落到 Circle(对齐 dograh resolveIcon)。 */
+export function resolveIcon(name: string): LucideIcon {
+  const icons = LucideIcons as unknown as Record<string, LucideIcon>;
+  return icons[name] ?? Circle;
+}
+
+/** 后端 DTO → 运行期规格。hasTarget/hasSource 由入/出边上限派生。 */
+export function toRuntimeSpec(dto: NodeSpecDto): RuntimeNodeSpec {
+  return {
+    type: dto.name,
+    displayName: dto.displayName,
+    description: dto.description,
+    icon: resolveIcon(dto.icon),
+    accent: dto.accent,
+    addable: dto.addable,
+    hasTarget: dto.constraints.maxIncoming !== 0,
+    hasSource: dto.constraints.maxOutgoing !== 0,
+    fields: dto.fields.map((f) => ({
+      key: f.key,
+      label: f.label,
+      type: f.type,
+      required: f.required,
+    })),
+  };
+}
+
+export type NodeSpecMap = Record<string, RuntimeNodeSpec>;
+
+export type WorkflowGraph = {
+  nodes: Array<{
+    id: string;
+    type: WorkflowNodeType;
+    position: { x: number; y: number };
+    data: WorkflowNodeData;
+  }>;
+  edges: Array<{
+    id: string;
+    source: string;
+    target: string;
+    data?: { condition?: string; label?: string };
+  }>;
+  viewport?: { x: number; y: number; zoom: number };
+};
+
+/** 新建工作流的默认图:开始 → 智能体 → 结束 */
+export function defaultGraph(): WorkflowGraph {
+  return {
+    nodes: [
+      {
+        id: "start",
+        type: "startCall",
+        position: { x: 80, y: 160 },
+        data: { name: "开始", greeting: "你好,我是 AI 视频助手,有什么可以帮你?" },
+      },
+      {
+        id: "agent-1",
+        type: "agentNode",
+        position: { x: 400, y: 160 },
+        data: { name: "智能体节点", prompt: "", allowInterrupt: true },
+      },
+      {
+        id: "end",
+        type: "endCall",
+        position: { x: 720, y: 160 },
+        data: { name: "结束", prompt: "感谢你的来电,再见!" },
+      },
+    ],
+    edges: [
+      { id: "e-start-agent", source: "start", target: "agent-1", data: {} },
+      { id: "e-agent-end", source: "agent-1", target: "end", data: {} },
+    ],
+  };
+}
diff --git a/frontend/src/components/workflow/useNodeSpecs.ts b/frontend/src/components/workflow/useNodeSpecs.ts
new file mode 100644
index 0000000..1dc2364
--- /dev/null
+++ b/frontend/src/components/workflow/useNodeSpecs.ts
@@ -0,0 +1,61 @@
+"use client";
+
+/**
+ * 拉取并缓存 /api/node-types 节点目录(每会话一次,模块级缓存)。
+ * 对齐 dograh 的 useNodeSpecs:规格随后端 + 刷新生效。
+ */
+
+import { useEffect, useRef, useState } from "react";
+
+import { nodeTypesApi, type NodeTypesResponse } from "@/lib/api";
+import {
+  toRuntimeSpec,
+  type NodeSpecMap,
+  type RuntimeNodeSpec,
+} from "./specs";
+
+let _cache: NodeTypesResponse | null = null;
+
+type State = {
+  specs: RuntimeNodeSpec[];
+  byType: NodeSpecMap;
+  loading: boolean;
+  error: string | null;
+};
+
+function build(data: NodeTypesResponse | null): {
+  specs: RuntimeNodeSpec[];
+  byType: NodeSpecMap;
+} {
+  const specs = (data?.nodeTypes ?? []).map(toRuntimeSpec);
+  const byType: NodeSpecMap = {};
+  for (const spec of specs) byType[spec.type] = spec;
+  return { specs, byType };
+}
+
+export function useNodeSpecs(): State {
+  const fetched = useRef(false);
+  const [state, setState] = useState<State>(() => {
+    const { specs, byType } = build(_cache);
+    return { specs, byType, loading: !_cache, error: null };
+  });
+
+  useEffect(() => {
+    if (_cache || fetched.current) return;
+    fetched.current = true;
+
+    nodeTypesApi
+      .list()
+      .then((data) => {
+        _cache = data;
+        const { specs, byType } = build(data);
+        setState({ specs, byType, loading: false, error: null });
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err);
+        setState((s) => ({ ...s, loading: false, error: message }));
+      });
+  }, []);
+
+  return state;
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index be403f4..1fec7a6 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -172,3 +172,39 @@ export type KnowledgeBase = {
 export const knowledgeBasesApi = {
   list: () => request<KnowledgeBase[]>("/api/knowledge-bases"),
 };
+
+// ---------- 工作流节点类型目录 ----------
+export type NodeFieldSpec = {
+  key: string;
+  label: string;
+  type: "text" | "textarea" | "switch";
+  required?: boolean;
+};
+
+export type NodeConstraints = {
+  minIncoming?: number;
+  maxIncoming?: number;
+  minOutgoing?: number;
+  maxOutgoing?: number;
+};
+
+export type NodeSpecDto = {
+  name: string;
+  displayName: string;
+  category: string;
+  description: string;
+  icon: string;
+  accent: string;
+  addable: boolean;
+  constraints: NodeConstraints;
+  fields: NodeFieldSpec[];
+};
+
+export type NodeTypesResponse = {
+  specVersion: string;
+  nodeTypes: NodeSpecDto[];
+};
+
+export const nodeTypesApi = {
+  list: () => request<NodeTypesResponse>("/api/node-types"),
+};