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

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">
-      <aside className="min-h-0 overflow-y-auto border-r bg-muted/20 p-3">
-        <div className="mb-3 text-sm font-medium">Nodes</div>
-        <div className="space-y-2">
-          {nodeSpecs.map((spec) => (
-            <button
-              key={spec.type}
-              type="button"
-              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">
-                <span className="block truncate font-medium">{spec.title}</span>
-                <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-                  {spec.description}
+    <ResizablePanelGroup orientation="horizontal" className="h-full min-h-0 border-t">
+      <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) => (
+              <button
+                key={spec.type}
+                type="button"
+                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">
+                  <span className="block truncate font-medium">{spec.title}</span>
+                  <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                    {spec.description}
+                  </span>
                 </span>
-              </span>
-            </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>
+              </button>
+            ))}
           </div>
-        ) : null}
-        <div className="border-t p-4">
-          <Button
-            variant="outline"
-            className="w-full"
-            onClick={() => onDefinitionChange(toApiDefinition(toDraft(nodes, edges)) as AIWorkflowDefinition)}
+        </aside>
+      </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}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            onConnect={onConnect}
+            onNodeClick={(_, node) => setSelectedNodeId(node.id)}
+            fitView
           >
-            Sync definition
-          </Button>
-        </div>
-      </aside>
-    </div>
+            <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>
+      </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>
   )
 }