refactor: update tool section titles and improve layout in workflow editor

web/app/dashboard/ai-agents/_components/config-workbench.tsx

@@ -468,7 +468,7 @@ export function AIAgentConfigWorkbench({
     { key: "model", title: "模型与 Prompt", icon: <BrainCircuitIcon /> },
     { key: "knowledge", title: "知识库", icon: <DatabaseIcon /> },
     { key: "skills", title: "Skills", icon: <ShieldCheckIcon /> },
-    { key: "tools", title: "工具能力", icon: <PlugIcon /> },
+    { key: "tools", title: "MCP Tools", icon: <PlugIcon /> },
     { key: "workflow", title: "会话流程", icon: <GitBranchIcon /> },
     { key: "handoff", title: "转人工与兜底", icon: <LifeBuoyIcon /> },
     { key: "publish", title: "发布状态", icon: <ShieldCheckIcon /> },
@@ -668,7 +668,7 @@ export function AIAgentConfigWorkbench({
               ) : null}
 
               {activeSection === "tools" ? (
-                <ConfigSection title="工具能力" description="配置外部 MCP Direct Tools。内置 Graph Tool 由会话流程节点管理。">
+                <ConfigSection title="MCP Tools" description="配置外部 MCP Direct Tools。内置 Graph Tool 由会话流程节点管理。">
                   <div className="grid grid-cols-1 gap-3 lg:grid-cols-[220px_minmax(0,1fr)_auto]">
                     <OptionCombobox
                       value={directToolGroupToAdd}
@@ -718,12 +718,9 @@ export function AIAgentConfigWorkbench({
 
               {activeSection === "workflow" ? (
                 <div className="flex h-full min-h-0 flex-col">
-                  <div className="flex shrink-0 items-center justify-between border-b px-4 py-3">
+                  <div className="flex shrink-0 items-center justify-between border-b px-3 py-2">
                     <div className="min-w-0 flex-1">
                       <div className="truncate text-sm font-medium">主会话流程</div>
-                      <div className="mt-1 truncate text-xs text-muted-foreground">
-                        当前 Agent 只维护一个主流程，发布后作为会话运行入口。
-                      </div>
                     </div>
                     <div className="ml-3 flex items-center gap-2">
                       {validation ? (
@@ -731,15 +728,15 @@ export function AIAgentConfigWorkbench({
                           {validation.valid ? "校验通过" : `${validation.errors.length} 个问题`}
                         </Badge>
                       ) : null}
-                      <Button variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={validateWorkflowDraft}>
+                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={validateWorkflowDraft}>
                         <CheckCircle2Icon className="size-4" />
                         校验
                       </Button>
-                      <Button variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={saveWorkflowDraft}>
+                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={saveWorkflowDraft}>
                         <SaveIcon className="size-4" />
                         保存草稿
                       </Button>
-                      <Button disabled={savingWorkflow || !currentAgentId} onClick={publishWorkflow}>
+                      <Button size="sm" disabled={savingWorkflow || !currentAgentId} onClick={publishWorkflow}>
                         <SendIcon className="size-4" />
                         发布
                       </Button>

web/app/dashboard/ai-workflows/_components/workflow-editor.tsx

@@ -19,6 +19,11 @@ import { useCallback, useEffect, useMemo, useState } from "react"
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
 import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
 import {
   fromApiDefinition,
@@ -172,8 +177,9 @@ export function WorkflowEditor({
   }
 
   return (
-    <div className="grid h-full min-h-0 grid-cols-[220px_minmax(0,1fr)_320px] border-t">
+    <ResizablePanelGroup orientation="horizontal" className="h-full min-h-0 border-t">
-      <aside className="min-h-0 overflow-y-auto border-r bg-muted/20 p-3">
+      <ResizablePanel defaultSize="18%" minSize="12%" maxSize="34%" className="min-h-0">
+        <aside className="h-full min-h-0 overflow-y-auto bg-muted/20 p-3">
           <div className="mb-3 text-sm font-medium">Nodes</div>
           <div className="space-y-2">
             {nodeSpecs.map((spec) => (
@@ -194,7 +200,10 @@ export function WorkflowEditor({
             ))}
           </div>
         </aside>
-      <section className="relative min-h-0">
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize="56%" minSize="30%" className="min-h-0">
+        <section className="relative h-full min-h-0">
           <ReactFlow
             nodes={nodes}
             edges={edges}
@@ -214,7 +223,9 @@ export function WorkflowEditor({
             </Badge>
           </div>
         </section>
-      <aside className="min-h-0 overflow-y-auto border-l bg-muted/10">
+      </ResizablePanel>
+      <ResizablePanel defaultSize="26%" minSize="18%" maxSize="40%" className="min-h-0">
+        <aside className="h-full min-h-0 overflow-y-auto border-l bg-muted/10">
           <NodeConfigPanel node={selectedNode} onChange={updateNodeData} />
           {!validation.valid ? (
             <div className="border-t p-4">
@@ -236,6 +247,7 @@ export function WorkflowEditor({
             </Button>
           </div>
         </aside>
-    </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }