feat(ui): Add flow diagram views for workflows and folder groups

Introduce interactive flow diagram visualizations that display when
selecting workflows or folders in the tree view, showing task sequences
with conditions and connections.

Author: shankar-gpio

ui/src/components/workflow-visualizer/WorkflowVisualizer.tsx

@@ -14,6 +14,8 @@ import './styles/index.css';
 // Extended selection types for tree view
 export type TreeSelectionType =
   | { type: 'none' }
+  | { type: 'folder'; workflows: Workflow[]; name: string }
+  | { type: 'workflow'; workflow: Workflow }
   | { type: 'workflow-condition'; workflow: Workflow; condition: JsonLogicValue }
   | { type: 'task'; task: Task; workflow: Workflow }
   | { type: 'task-condition'; task: Task; workflow: Workflow; condition: JsonLogicValue }
@@ -49,6 +51,16 @@ export interface WorkflowVisualizerProps {
 // Get display info for the current selection
 function getSelectionInfo(selection: TreeSelectionType): { title: string; subtitle: string } | null {
   switch (selection.type) {
+    case 'folder':
+      return {
+        title: selection.name,
+        subtitle: `${selection.workflows.length} Workflows`,
+      };
+    case 'workflow':
+      return {
+        title: selection.workflow.name,
+        subtitle: 'Workflow Flow',
+      };
     case 'workflow-condition':
       return {
         title: 'Workflow Condition',
@@ -136,7 +148,9 @@ function VisualizerInner({
     setSelection(newSelection);
 
     // Fire callbacks for external consumers
-    if (newSelection.type === 'workflow-condition') {
+    if (newSelection.type === 'workflow') {
+      onWorkflowSelect?.(newSelection.workflow);
+    } else if (newSelection.type === 'workflow-condition') {
       onWorkflowSelect?.(newSelection.workflow);
     } else if (
       newSelection.type === 'task' ||
@@ -253,7 +267,7 @@ function VisualizerInner({
               </div>
             </div>
           )}
-          <DetailsPanel selection={selection} />
+          <DetailsPanel selection={selection} onSelect={handleSelection} />
         </div>
         </div>
       </div>

ui/src/components/workflow-visualizer/components/FolderNode.tsx

@@ -1,11 +1,20 @@
 import { Folder } from 'lucide-react';
+import type { Workflow } from '../../../types';
 import type { TreeSelectionType } from '../WorkflowVisualizer';
 import type { FolderTreeNode } from '../utils/folderTree';
 import { TreeNode } from './TreeNode';
 import { WorkflowNode } from './WorkflowNode';
 import { TREE_COLORS } from './colors';
 import { NODE_IDS } from '../constants';
 
+function collectAllWorkflows(folder: FolderTreeNode): Workflow[] {
+  const workflows = [...folder.workflows];
+  for (const child of folder.folders.values()) {
+    workflows.push(...collectAllWorkflows(child));
+  }
+  return workflows.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+}
+
 interface FolderNodeProps {
   folder: FolderTreeNode;
   level: number;
@@ -42,10 +51,14 @@ export function FolderNode({
       icon={<Folder size={14} />}
       iconColor={TREE_COLORS.folder}
       isExpanded={isExpanded}
+      isSelected={selection.type === 'folder' && selection.name === folder.name}
       hasChildren={hasChildren}
       level={level}
       onToggle={() => toggleNode(folderId)}
-      onClick={() => toggleNode(folderId)}
+      onClick={() => {
+        onSelect({ type: 'folder', workflows: collectAllWorkflows(folder), name: folder.name });
+        if (!isExpanded) toggleNode(folderId);
+      }}
     >
       {/* Render child folders first (alphabetically) */}
       {sortedFolders.map((childFolder) => (

ui/src/components/workflow-visualizer/components/WorkflowNode.tsx

@@ -42,10 +42,14 @@ export function WorkflowNode({
       icon={<Layers size={14} />}
       iconColor={TREE_COLORS.workflow}
       isExpanded={isExpanded}
+      isSelected={selection.type === 'workflow' && selection.workflow.id === workflow.id}
       hasChildren={hasChildren}
       level={level}
       onToggle={() => toggleNode(workflowId)}
-      onClick={() => toggleNode(workflowId)}
+      onClick={() => {
+        onSelect({ type: 'workflow', workflow });
+        if (!isExpanded) toggleNode(workflowId);
+      }}
       debugState={debugMode ? workflowDebugState.state : null}
     >
       {/* Workflow Condition */}