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,70 +177,77 @@ 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">
-        <div className="mb-3 text-sm font-medium">Nodes</div>
+        <aside className="h-full min-h-0 overflow-y-auto bg-muted/20 p-3">
-        <div className="space-y-2">
+          <div className="mb-3 text-sm font-medium">Nodes</div>
-          {nodeSpecs.map((spec) => (
+          <div className="space-y-2">
-            <button
+            {nodeSpecs.map((spec) => (
-              key={spec.type}
+              <button
-              type="button"
+                key={spec.type}
-              onClick={() => addNode(spec)}
+                type="button"
-              className="flex w-full items-start gap-2 rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted"
+                onClick={() => addNode(spec)}
-            >
+                className="flex w-full items-start gap-2 rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted"
-              <PlusIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              >
-              <span className="min-w-0">
+                <PlusIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
-                <span className="block truncate font-medium">{spec.title}</span>
+                <span className="min-w-0">
-                <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                  <span className="block truncate font-medium">{spec.title}</span>
-                  {spec.description}
+                  <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                    {spec.description}
+                  </span>
                 </span>
-              </span>
+              </button>
-            </button>
+            ))}
-          ))}
-        </div>
-      </aside>
-      <section className="relative min-h-0">
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          onNodeClick={(_, node) => setSelectedNodeId(node.id)}
-          fitView
-        >
-          <Background />
-          <Controls />
-          <MiniMap pannable zoomable />
-        </ReactFlow>
-        <div className="absolute left-3 top-3 flex gap-2">
-          <Badge variant={validation.valid ? "default" : "destructive"}>
-            {validation.valid ? "Valid draft" : `${validation.errors.length} issues`}
-          </Badge>
-        </div>
-      </section>
-      <aside className="min-h-0 overflow-y-auto border-l bg-muted/10">
-        <NodeConfigPanel node={selectedNode} onChange={updateNodeData} />
-        {!validation.valid ? (
-          <div className="border-t p-4">
-            <div className="mb-2 text-sm font-medium">Local validation</div>
-            <ul className="space-y-1 text-xs text-destructive">
-              {validation.errors.map((error) => (
-                <li key={error}>{error}</li>
-              ))}
-            </ul>
           </div>
-        ) : null}
+        </aside>
-        <div className="border-t p-4">
+      </ResizablePanel>
-          <Button
+      <ResizableHandle withHandle />
-            variant="outline"
+      <ResizablePanel defaultSize="56%" minSize="30%" className="min-h-0">
-            className="w-full"
+        <section className="relative h-full min-h-0">
-            onClick={() => onDefinitionChange(toApiDefinition(toDraft(nodes, edges)) as AIWorkflowDefinition)}
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onNodeClick={(_, node) => setSelectedNodeId(node.id)}
+            fitView
           >
-            Sync definition
+            <Background />
-          </Button>
+            <Controls />
-        </div>
+            <MiniMap pannable zoomable />
-      </aside>
+          </ReactFlow>
-    </div>
+          <div className="absolute left-3 top-3 flex gap-2">
+            <Badge variant={validation.valid ? "default" : "destructive"}>
+              {validation.valid ? "Valid draft" : `${validation.errors.length} issues`}
+            </Badge>
+          </div>
+        </section>
+      </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">
+              <div className="mb-2 text-sm font-medium">Local validation</div>
+              <ul className="space-y-1 text-xs text-destructive">
+                {validation.errors.map((error) => (
+                  <li key={error}>{error}</li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+          <div className="border-t p-4">
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => onDefinitionChange(toApiDefinition(toDraft(nodes, edges)) as AIWorkflowDefinition)}
+            >
+              Sync definition
+            </Button>
+          </div>
+        </aside>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   )
 }