feat: enhance WorkflowEditor with improved node selection and validation display

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

@@ -530,6 +530,28 @@ export function AIAgentConfigWorkbench({
           </div>
         </div>
         <div className="flex items-center gap-2">
+          {activeSection === "workflow" ? (
+            <>
+              {validation ? (
+                <Badge variant={validation.valid ? "default" : "destructive"}>
+                  {validation.valid ? "校验通过" : `${validation.errors.length} 个问题`}
+                </Badge>
+              ) : null}
+              <Button variant="outline" disabled={savingWorkflow || loading || !currentAgentId} onClick={validateWorkflowDraft}>
+                <CheckCircle2Icon className="size-4" />
+                校验
+              </Button>
+              <Button variant="outline" disabled={savingWorkflow || loading || !currentAgentId} onClick={saveWorkflowDraft}>
+                <SaveIcon className="size-4" />
+                保存草稿
+              </Button>
+              <Button disabled={savingWorkflow || loading || !currentAgentId} onClick={publishWorkflow}>
+                <SendIcon className="size-4" />
+                发布流程
+              </Button>
+            </>
+          ) : (
+            <>
               <Button variant="outline" disabled={savingAgent || loading} onClick={saveAgentSettings}>
                 <SaveIcon className="size-4" />
                 保存
@@ -538,6 +560,8 @@ export function AIAgentConfigWorkbench({
                 <SendIcon className="size-4" />
                 发布流程
               </Button>
+            </>
+          )}
         </div>
       </div>
 
@@ -753,40 +777,12 @@ export function AIAgentConfigWorkbench({
               ) : null}
 
               {activeSection === "workflow" ? (
-                <div className="flex h-full min-h-0 flex-col">
-                  <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>
-                    <div className="ml-3 flex items-center gap-2">
-                      {validation ? (
-                        <Badge variant={validation.valid ? "default" : "destructive"}>
-                          {validation.valid ? "校验通过" : `${validation.errors.length} 个问题`}
-                        </Badge>
-                      ) : null}
-                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={validateWorkflowDraft}>
-                        <CheckCircle2Icon className="size-4" />
-                        校验
-                      </Button>
-                      <Button size="sm" variant="outline" disabled={savingWorkflow || !currentAgentId} onClick={saveWorkflowDraft}>
-                        <SaveIcon className="size-4" />
-                        保存草稿
-                      </Button>
-                      <Button size="sm" disabled={savingWorkflow || !currentAgentId} onClick={publishWorkflow}>
-                        <SendIcon className="size-4" />
-                        发布
-                      </Button>
-                    </div>
-                  </div>
-                  <div className="min-h-0 flex-1">
                 <WorkflowEditor
                   key={editorKey}
                   definition={definition}
                   nodeSpecs={nodeSpecs}
                   onDefinitionChange={setDefinition}
                 />
-                  </div>
-                </div>
               ) : null}
 
               {activeSection === "handoff" ? (

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

@@ -24,7 +24,6 @@ import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import {
   Popover,
   PopoverContent,
@@ -188,6 +187,10 @@ export function WorkflowEditor({
     onDefinitionChange(toApiDefinition(draft) as AIWorkflowDefinition)
   }, [draft, onDefinitionChange])
 
+  useEffect(() => {
+    onDefinitionChange(toApiDefinition(draft) as AIWorkflowDefinition)
+  }, [draft, onDefinitionChange])
+
   const onConnect = useCallback(
     (connection: Connection) => {
       if (!connection.source || !connection.target) {
@@ -361,7 +364,7 @@ export function WorkflowEditor({
         </aside>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize="56%" minSize="30%" className="min-h-0">
+      <ResizablePanel defaultSize={selectedNode ? "56%" : "82%"} minSize="30%" className="min-h-0">
         <section
           data-workflow-canvas
           ref={canvasRef}
@@ -382,7 +385,12 @@ export function WorkflowEditor({
             onEdgesChange={onEdgesChange}
             onConnect={onConnect}
             onInit={setFlowInstance}
-            onNodeClick={(_, node) => setSelectedNodeId(node.id)}
+            onNodeClick={(event, node) => {
+              event.stopPropagation()
+              setSelectedNodeId(node.id)
+            }}
+            onEdgeClick={() => setSelectedNodeId(null)}
+            onPaneClick={() => setSelectedNodeId(null)}
             fitView
             fitViewOptions={fitViewOptions}
             minZoom={0.45}
@@ -406,6 +414,8 @@ export function WorkflowEditor({
           ) : null}
         </section>
       </ResizablePanel>
+      {selectedNode ? (
+        <>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize="26%" minSize="18%" maxSize="40%" className="min-h-0">
             <aside className="h-full min-h-0 overflow-y-auto bg-muted/10">
@@ -425,17 +435,10 @@ export function WorkflowEditor({
                   </ul>
                 </div>
               ) : null}
-          <div className="border-t p-4">
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={() => onDefinitionChange(toApiDefinition(toDraft(nodes, edges)) as AIWorkflowDefinition)}
-            >
-              同步当前流程
-            </Button>
-          </div>
             </aside>
           </ResizablePanel>
+        </>
+      ) : null}
     </ResizablePanelGroup>
   )
 }