Update app.py

app.py

@@ -10,9 +10,10 @@ import uuid
 from dataclasses import dataclass, asdict
 from typing import List, Dict, Optional, Any
 from openai import AsyncOpenAI
+
 #================================================================================
-## UML TOOLOX !
-# Unified Hierarchical Component definitions for UML and Object-Oriented Design
+# Unified Hierarchical Component definitions for UML and Object-Oriented Design 
+# as well as agentic design
 COMPONENT_HIERARCHY = {
     "HIGH_LEVEL": {
         "CLASS": {
@@ -77,9 +78,66 @@ COMPONENT_HIERARCHY = {
             "icon": "📦",
             "shape": "folder",
             "sub_components": ["PACKAGE", "SUBPACKAGE", "PACKAGE_DEPENDENCY", "IMPORT", "ACCESS"]
-        }
+        },
+        "SYSTEM": {
+            "description": "Top-level system architecture containing all components",
+            "color": "#333333",
+            "icon": "🌐",
+            "shape": "folder",
+            "sub_components": ["AGENT", "USER", "TOOL", "DATA", "PROCESSOR", "ROUTER", "INFRASTRUCTURE", "CONFIG"]
+        },
+        "AGENT": {
+            "description": "Autonomous reasoning and decision-making units",
+            "color": "#4CAF50",
+            "icon": "🤖",
+            "shape": "rect",
+            "sub_components": ["REASONING_AGENT", "ACTION_AGENT", "PLANNER_AGENT", "REACT_AGENT", "MULTI_AGENT"]
+        },
+        "USER": {
+            "description": "User interaction points and interfaces",
+            "color": "#9C27B0",
+            "icon": "👤",
+            "shape": "ellipse",
+            "sub_components": ["USER_INPUT", "USER_OUTPUT", "MULTIMODAL_INTERFACE"]
+        },
+        "TOOL": {
+            "description": "External functions and capabilities",
+            "color": "#795548",
+            "icon": "🔧",
+            "shape": "hexagon",
+            "sub_components": ["MCP_TOOL", "API_TOOL", "LOCAL_TOOL", "AGENT_TOOL", "FUNCTION_TOOL"]
+        },
+        "DATA": {
+            "description": "Data sources and storage systems",
+            "color": "#009688",
+            "icon": "💾",
+            "shape": "cylinder",
+            "sub_components": ["KNOWLEDGE_BASE", "VECTOR_DB", "DOCUMENT_STORE", "CACHE", "MEMORY"]
+        },
+        "PROCESSOR": {
+            "description": "Data processing and transformation units",
+            "color": "#2196F3",
+            "icon": "⚙️",
+            "shape": "rect",
+            "sub_components": ["QUERY_PROCESSOR", "CONTENT_RETRIEVAL", "PROMPT_TEMPLATE", "RESPONSE_FORMATTER"]
+        },
+        "ROUTER": {
+            "description": "Decision points and workflow routing",
+            "color": "#FF9800",
+            "icon": "🎯",
+            "shape": "diamond",
+            "sub_components": ["INTENT_DISCOVERY", "MODEL_SELECTOR", "WORKFLOW_ROUTER", "VALIDATOR"]
+        },
+        "INFRASTRUCTURE": {
+            "description": "System infrastructure and services",
+            "color": "#FF5722",
+            "icon": "🌐",
+            "shape": "rect",
+            "sub_components": ["PROVIDER", "MONITOR", "FALLBACK", "ORCHESTRATOR"]
+        },
     }
 }
+
 # Complete Component Information with Configuration
 COMPONENT_INFO = {
     # ===================================
@@ -534,186 +592,7 @@ COMPONENT_INFO = {
             "name": {"type": "text", "label": "Dependency Name", "default": "Dependency"},
             "stereotype": {"type": "text", "label": "Stereotype", "default": "<<import>>"},
         }
-    }
-}
-# Enhanced Example workflows
-EXAMPLE_WORKFLOWS = {
-    "E-Commerce Class Diagram": {
-        "description": "Object-oriented design for e-commerce system",
-        "nodes": [
-            {"id": "user", "type": "CLASS", "x": 100, "y": 100},
-            {"id": "product", "type": "CLASS", "x": 300, "y": 100},
-            {"id": "order", "type": "CLASS", "x": 500, "y": 100},
-            {"id": "payment", "type": "CLASS", "x": 700, "y": 100},
-            {"id": "cart", "type": "CLASS", "x": 300, "y": 300},
-            {"id": "inventory", "type": "CLASS", "x": 500, "y": 300}
-        ],
-        "connections": [
-            {"from": "user", "to": "order", "type": "AGGREGATION"},
-            {"from": "order", "to": "product", "type": "COMPOSITION"},
-            {"from": "order", "to": "payment", "type": "AGGREGATION"},
-            {"from": "user", "to": "cart", "type": "AGGREGATION"},
-            {"from": "cart", "to": "product", "type": "AGGREGATION"},
-            {"from": "product", "to": "inventory", "type": "AGGREGATION"}
-        ]
-    },
-    
-    "User Authentication Use Case": {
-        "description": "Use case diagram for user authentication system",
-        "nodes": [
-            {"id": "user", "type": "ACTOR", "x": 50, "y": 200},
-            {"id": "admin", "type": "ACTOR", "x": 50, "y": 300},
-            {"id": "login", "type": "USECASE", "x": 250, "y": 150},
-            {"id": "register", "type": "USECASE", "x": 250, "y": 250},
-            {"id": "reset_password", "type": "USECASE", "x": 250, "y": 350},
-            {"id": "admin_panel", "type": "USECASE", "x": 450, "y": 300},
-            {"id": "system_boundary", "type": "SYSTEM_BOUNDARY", "x": 150, "y": 100}
-        ],
-        "connections": [
-            {"from": "user", "to": "login"},
-            {"from": "user", "to": "register"},
-            {"from": "user", "to": "reset_password"},
-            {"from": "admin", "to": "admin_panel"},
-            {"from": "admin", "to": "login"},
-            {"from": "login", "to": "reset_password", "type": "EXTEND"}
-        ]
-    },
-    
-    "Order Processing Sequence": {
-        "description": "Sequence diagram for order processing workflow",
-        "nodes": [
-            {"id": "customer", "type": "LIFELINE", "x": 100, "y": 50},
-            {"id": "ui", "type": "LIFELINE", "x": 250, "y": 50},
-            {"id": "order_service", "type": "LIFELINE", "x": 400, "y": 50},
-            {"id": "payment_service", "type": "LIFELINE", "x": 550, "y": 50},
-            {"id": "inventory_service", "type": "LIFELINE", "x": 700, "y": 50}
-        ],
-        "connections": [
-            {"from": "customer", "to": "ui", "type": "MESSAGE", "label": "placeOrder()"},
-            {"from": "ui", "to": "order_service", "type": "MESSAGE", "label": "createOrder()"},
-            {"from": "order_service", "to": "inventory_service", "type": "MESSAGE", "label": "checkAvailability()"},
-            {"from": "inventory_service", "to": "order_service", "type": "MESSAGE", "label": "availabilityConfirmed()"},
-            {"from": "order_service", "to": "payment_service", "type": "MESSAGE", "label": "processPayment()"},
-            {"from": "payment_service", "to": "order_service", "type": "MESSAGE", "label": "paymentConfirmed()"},
-            {"from": "order_service", "to": "ui", "type": "MESSAGE", "label": "orderConfirmed()"},
-            {"from": "ui", "to": "customer", "type": "MESSAGE", "label": "showConfirmation()"}
-        ]
-    },
-    
-    "User State Machine": {
-        "description": "State machine for user account states",
-        "nodes": [
-            {"id": "pending", "type": "STATE", "x": 100, "y": 100},
-            {"id": "active", "type": "STATE", "x": 300, "y": 100},
-            {"id": "suspended", "type": "STATE", "x": 500, "y": 100},
-            {"id": "deleted", "type": "STATE", "x": 300, "y": 300},
-            {"id": "start", "type": "START_NODE", "x": 50, "y": 100},
-            {"id": "end", "type": "END_NODE", "x": 300, "y": 400}
-        ],
-        "connections": [
-            {"from": "start", "to": "pending"},
-            {"from": "pending", "to": "active", "type": "TRANSITION", "label": "approveAccount()"},
-            {"from": "active", "to": "suspended", "type": "TRANSITION", "label": "suspendAccount()"},
-            {"from": "suspended", "to": "active", "type": "TRANSITION", "label": "activateAccount()"},
-            {"from": "active", "to": "deleted", "type": "TRANSITION", "label": "deleteAccount()"},
-            {"from": "suspended", "to": "deleted", "type": "TRANSITION", "label": "deleteAccount()"},
-            {"from": "deleted", "to": "end"}
-        ]
     },
-    
-    "Document Management Activity": {
-        "description": "Activity diagram for document management process",
-        "nodes": [
-            {"id": "start", "type": "START_NODE", "x": 200, "y": 50},
-            {"id": "upload", "type": "ACTION", "x": 200, "y": 150},
-            {"id": "validate", "type": "DECISION", "x": 200, "y": 250},
-            {"id": "process", "type": "ACTION", "x": 200, "y": 350},
-            {"id": "store", "type": "ACTION", "x": 200, "y": 450},
-            {"id": "notify", "type": "ACTION", "x": 200, "y": 550},
-            {"id": "end", "type": "END_NODE", "x": 200, "y": 650},
-            {"id": "error", "type": "ACTION", "x": 400, "y": 350}
-        ],
-        "connections": [
-            {"from": "start", "to": "upload"},
-            {"from": "upload", "to": "validate"},
-            {"from": "validate", "to": "process", "label": "[valid]"},
-            {"from": "validate", "to": "error", "label": "[invalid]"},
-            {"from": "error", "to": "end"},
-            {"from": "process", "to": "store"},
-            {"from": "store", "to": "notify"},
-            {"from": "notify", "to": "end"}
-        ]
-    }
-}
-#================================================================================
-#================================================================================
-## AGENTIC TOOLBOX - FIXED VERSION
-#================================================================================
-
-# Unified Hierarchical Component definitions
-COMPONENT_HIERARCHY = {
-    "HIGH_LEVEL": {
-        "SYSTEM": {
-            "description": "Top-level system architecture containing all components",
-            "color": "#333333",
-            "icon": "🌐",
-            "shape": "folder",
-            "sub_components": ["AGENT", "USER", "TOOL", "DATA", "PROCESSOR", "ROUTER", "INFRASTRUCTURE", "CONFIG"]
-        },
-        "AGENT": {
-            "description": "Autonomous reasoning and decision-making units",
-            "color": "#4CAF50",
-            "icon": "🤖",
-            "shape": "rect",
-            "sub_components": ["REASONING_AGENT", "ACTION_AGENT", "PLANNER_AGENT", "REACT_AGENT", "MULTI_AGENT"]
-        },
-        "USER": {
-            "description": "User interaction points and interfaces",
-            "color": "#9C27B0",
-            "icon": "👤",
-            "shape": "ellipse",
-            "sub_components": ["USER_INPUT", "USER_OUTPUT", "MULTIMODAL_INTERFACE"]
-        },
-        "TOOL": {
-            "description": "External functions and capabilities",
-            "color": "#795548",
-            "icon": "🔧",
-            "shape": "hexagon",
-            "sub_components": ["MCP_TOOL", "API_TOOL", "LOCAL_TOOL", "AGENT_TOOL", "FUNCTION_TOOL"]
-        },
-        "DATA": {
-            "description": "Data sources and storage systems",
-            "color": "#009688",
-            "icon": "💾",
-            "shape": "cylinder",
-            "sub_components": ["KNOWLEDGE_BASE", "VECTOR_DB", "DOCUMENT_STORE", "CACHE", "MEMORY"]
-        },
-        "PROCESSOR": {
-            "description": "Data processing and transformation units",
-            "color": "#2196F3",
-            "icon": "⚙️",
-            "shape": "rect",
-            "sub_components": ["QUERY_PROCESSOR", "CONTENT_RETRIEVAL", "PROMPT_TEMPLATE", "RESPONSE_FORMATTER"]
-        },
-        "ROUTER": {
-            "description": "Decision points and workflow routing",
-            "color": "#FF9800",
-            "icon": "🎯",
-            "shape": "diamond",
-            "sub_components": ["INTENT_DISCOVERY", "MODEL_SELECTOR", "WORKFLOW_ROUTER", "VALIDATOR"]
-        },
-        "INFRASTRUCTURE": {
-            "description": "System infrastructure and services",
-            "color": "#FF5722",
-            "icon": "🌐",
-            "shape": "rect",
-            "sub_components": ["PROVIDER", "MONITOR", "FALLBACK", "ORCHESTRATOR"]
-        },
-    }
-}
-
-# Complete Component Information - ENSURED ALL HAVE config_fields
-COMPONENT_INFO = {
     # SYSTEM
     "SYSTEM": {
         "description": "Top-level system architecture containing all components",
@@ -1159,8 +1038,114 @@ COMPONENT_INFO = {
     },
 }
 
-# Example workflows
+# Enhanced Example workflows
 EXAMPLE_WORKFLOWS = {
+    "E-Commerce Class Diagram": {
+        "description": "Object-oriented design for e-commerce system",
+        "nodes": [
+            {"id": "user", "type": "CLASS", "x": 100, "y": 100},
+            {"id": "product", "type": "CLASS", "x": 300, "y": 100},
+            {"id": "order", "type": "CLASS", "x": 500, "y": 100},
+            {"id": "payment", "type": "CLASS", "x": 700, "y": 100},
+            {"id": "cart", "type": "CLASS", "x": 300, "y": 300},
+            {"id": "inventory", "type": "CLASS", "x": 500, "y": 300}
+        ],
+        "connections": [
+            {"from": "user", "to": "order", "type": "AGGREGATION"},
+            {"from": "order", "to": "product", "type": "COMPOSITION"},
+            {"from": "order", "to": "payment", "type": "AGGREGATION"},
+            {"from": "user", "to": "cart", "type": "AGGREGATION"},
+            {"from": "cart", "to": "product", "type": "AGGREGATION"},
+            {"from": "product", "to": "inventory", "type": "AGGREGATION"}
+        ]
+    },
+    
+    "User Authentication Use Case": {
+        "description": "Use case diagram for user authentication system",
+        "nodes": [
+            {"id": "user", "type": "ACTOR", "x": 50, "y": 200},
+            {"id": "admin", "type": "ACTOR", "x": 50, "y": 300},
+            {"id": "login", "type": "USECASE", "x": 250, "y": 150},
+            {"id": "register", "type": "USECASE", "x": 250, "y": 250},
+            {"id": "reset_password", "type": "USECASE", "x": 250, "y": 350},
+            {"id": "admin_panel", "type": "USECASE", "x": 450, "y": 300},
+            {"id": "system_boundary", "type": "SYSTEM_BOUNDARY", "x": 150, "y": 100}
+        ],
+        "connections": [
+            {"from": "user", "to": "login"},
+            {"from": "user", "to": "register"},
+            {"from": "user", "to": "reset_password"},
+            {"from": "admin", "to": "admin_panel"},
+            {"from": "admin", "to": "login"},
+            {"from": "login", "to": "reset_password", "type": "EXTEND"}
+        ]
+    },
+    
+    "Order Processing Sequence": {
+        "description": "Sequence diagram for order processing workflow",
+        "nodes": [
+            {"id": "customer", "type": "LIFELINE", "x": 100, "y": 50},
+            {"id": "ui", "type": "LIFELINE", "x": 250, "y": 50},
+            {"id": "order_service", "type": "LIFELINE", "x": 400, "y": 50},
+            {"id": "payment_service", "type": "LIFELINE", "x": 550, "y": 50},
+            {"id": "inventory_service", "type": "LIFELINE", "x": 700, "y": 50}
+        ],
+        "connections": [
+            {"from": "customer", "to": "ui", "type": "MESSAGE", "label": "placeOrder()"},
+            {"from": "ui", "to": "order_service", "type": "MESSAGE", "label": "createOrder()"},
+            {"from": "order_service", "to": "inventory_service", "type": "MESSAGE", "label": "checkAvailability()"},
+            {"from": "inventory_service", "to": "order_service", "type": "MESSAGE", "label": "availabilityConfirmed()"},
+            {"from": "order_service", "to": "payment_service", "type": "MESSAGE", "label": "processPayment()"},
+            {"from": "payment_service", "to": "order_service", "type": "MESSAGE", "label": "paymentConfirmed()"},
+            {"from": "order_service", "to": "ui", "type": "MESSAGE", "label": "orderConfirmed()"},
+            {"from": "ui", "to": "customer", "type": "MESSAGE", "label": "showConfirmation()"}
+        ]
+    },
+    
+    "User State Machine": {
+        "description": "State machine for user account states",
+        "nodes": [
+            {"id": "pending", "type": "STATE", "x": 100, "y": 100},
+            {"id": "active", "type": "STATE", "x": 300, "y": 100},
+            {"id": "suspended", "type": "STATE", "x": 500, "y": 100},
+            {"id": "deleted", "type": "STATE", "x": 300, "y": 300},
+            {"id": "start", "type": "START_NODE", "x": 50, "y": 100},
+            {"id": "end", "type": "END_NODE", "x": 300, "y": 400}
+        ],
+        "connections": [
+            {"from": "start", "to": "pending"},
+            {"from": "pending", "to": "active", "type": "TRANSITION", "label": "approveAccount()"},
+            {"from": "active", "to": "suspended", "type": "TRANSITION", "label": "suspendAccount()"},
+            {"from": "suspended", "to": "active", "type": "TRANSITION", "label": "activateAccount()"},
+            {"from": "active", "to": "deleted", "type": "TRANSITION", "label": "deleteAccount()"},
+            {"from": "suspended", "to": "deleted", "type": "TRANSITION", "label": "deleteAccount()"},
+            {"from": "deleted", "to": "end"}
+        ]
+    },
+    
+    "Document Management Activity": {
+        "description": "Activity diagram for document management process",
+        "nodes": [
+            {"id": "start", "type": "START_NODE", "x": 200, "y": 50},
+            {"id": "upload", "type": "ACTION", "x": 200, "y": 150},
+            {"id": "validate", "type": "DECISION", "x": 200, "y": 250},
+            {"id": "process", "type": "ACTION", "x": 200, "y": 350},
+            {"id": "store", "type": "ACTION", "x": 200, "y": 450},
+            {"id": "notify", "type": "ACTION", "x": 200, "y": 550},
+            {"id": "end", "type": "END_NODE", "x": 200, "y": 650},
+            {"id": "error", "type": "ACTION", "x": 400, "y": 350}
+        ],
+        "connections": [
+            {"from": "start", "to": "upload"},
+            {"from": "upload", "to": "validate"},
+            {"from": "validate", "to": "process", "label": "[valid]"},
+            {"from": "validate", "to": "error", "label": "[invalid]"},
+            {"from": "error", "to": "end"},
+            {"from": "process", "to": "store"},
+            {"from": "store", "to": "notify"},
+            {"from": "notify", "to": "end"}
+        ]
+    },
     "Simple Chat Agent": {
         "description": "Basic conversational agent with single LLM call",
         "nodes": [
@@ -1300,8 +1285,8 @@ EXAMPLE_WORKFLOWS = {
         ]
     }
 }
-
 #================================================================================
+
 # Combine all components
 ALL_COMPONENTS = {}
 for category, components in COMPONENT_HIERARCHY["HIGH_LEVEL"].items():
@@ -1737,13 +1722,7 @@ def create_workflow_ui():
                             )
                             component_buttons.append((btn, comp_type))
                 
-                gr.Markdown("---")
-                gr.Markdown("## 🔗 Connections")
-                with gr.Row():
-                    from_node = gr.Dropdown(label="From", choices=[], interactive=True, scale=2)
-                    to_node = gr.Dropdown(label="To", choices=[], interactive=True, scale=2)
-                connect_btn = gr.Button("➡️ Connect Nodes", variant="secondary")
-                
+           
                 gr.Markdown("---")
                 gr.Markdown("## 📋 Examples")
                 example_dropdown = gr.Dropdown(
@@ -1838,7 +1817,14 @@ def create_workflow_ui():
                             with gr.Row():
                                 save_config_btn = gr.Button("💾 Save Config", variant="primary")
                                 cancel_config_btn = gr.Button("❌ Cancel", variant="secondary")
-
+                with gr.Row():
+                    gr.Markdown("---")
+                    gr.Markdown("## 🔗 Connections")
+                    with gr.Row():
+                        from_node = gr.Dropdown(label="From", choices=[], interactive=True, scale=2)
+                        to_node = gr.Dropdown(label="To", choices=[], interactive=True, scale=2)
+                    connect_btn = gr.Button("➡️ Connect Nodes", variant="secondary")
+     
             # Right Sidebar - Information and Export
             with gr.Column(scale=1, min_width=300):
                 gr.Markdown("## 📊 Workflow Information")
@@ -2173,138 +2159,157 @@ def create_main_workflow_ui():
         pending_component_type = gr.State("")
         editing_node_id = gr.State("")
         
-        with gr.Row(equal_height=False):
-            # Left Sidebar
-            with gr.Column(scale=1, min_width=300):
-                gr.Markdown("## 📚 Component Library")
-                
-                with gr.Tabs():
-                    with gr.TabItem("Categories"):
-                        component_buttons = []
-                        for category, info in COMPONENT_HIERARCHY["HIGH_LEVEL"].items():
-                            with gr.Accordion(f"{info['icon']} {category}", open=False):
-                                gr.Markdown(f"*{info['description']}*")
-                                
-                                btn = gr.Button(
-                                    f"{info['icon']} Add {category}",
-                                    size="sm",
-                                    variant="primary"
-                                )
-                                component_buttons.append((btn, category))
-                                
-                                if info.get('sub_components'):
-                                    gr.Markdown("**Specialized:**")
-                                    for sub_comp in info['sub_components']:
-                                        if sub_comp in COMPONENT_INFO:
-                                            sub_info = COMPONENT_INFO[sub_comp]
-                                            sub_btn = gr.Button(
-                                                f"{sub_info['icon']} {sub_comp.replace('_', ' ').title()}",
-                                                size="sm"
-                                            )
-                                            component_buttons.append((sub_btn, sub_comp))
-                    
-                    with gr.TabItem("All"):
-                        for comp_type, comp_info in COMPONENT_INFO.items():
+#================================================================================
+        # Left Sidebar
+        with gr.Sidebar(open=True,label = "Components",width=600, position = "right"):
+            gr.Markdown("## 📚 Component Library")
+            
+            with gr.Tabs():
+                with gr.TabItem("Categories"):
+                    component_buttons = []
+                    for category, info in COMPONENT_HIERARCHY["HIGH_LEVEL"].items():
+                        with gr.TabItem(f"{info['icon']} {category}"):
+                            gr.Markdown(f"*{info['description']}*")
+                            
                             btn = gr.Button(
-                                f"{comp_info['icon']} {comp_type.replace('_', ' ').title()}",
+                                f"{info['icon']} Add {category}",
                                 size="sm",
-                                variant="secondary"
+                                variant="primary"
                             )
-                            component_buttons.append((btn, comp_type))
-                
-                gr.Markdown("---")
-                gr.Markdown("## 🔗 Connections")
-                with gr.Row():
-                    from_node = gr.Dropdown(label="From", choices=[], interactive=True)
-                    to_node = gr.Dropdown(label="To", choices=[], interactive=True)
-                connect_btn = gr.Button("➡️ Connect", variant="secondary")
-                
-                gr.Markdown("---")
-                example_dropdown = gr.Dropdown(
-                    choices=list(EXAMPLE_WORKFLOWS.keys()),
-                    label="Load Example",
-                    interactive=True
-                )
-                load_example_btn = gr.Button("📥 Load", variant="secondary")
-                
-                gr.Markdown("---")
-                with gr.Row():
-                    clear_btn = gr.Button("🗑️ Clear", variant="stop")
-                    download_btn = gr.Button("💾 Export", variant="primary")
+                            component_buttons.append((btn, category))
+                            
+                            if info.get('sub_components'):
+                                gr.Markdown("**Specialized:**")
+                                for sub_comp in info['sub_components']:
+                                    if sub_comp in COMPONENT_INFO:
+                                        sub_info = COMPONENT_INFO[sub_comp]
+                                        sub_btn = gr.Button(
+                                            f"{sub_info['icon']} {sub_comp.replace('_', ' ').title()}",
+                                            size="sm"
+                                        )
+                                        component_buttons.append((sub_btn, sub_comp))
+               
+                with gr.TabItem("All"):
+                    for comp_type, comp_info in COMPONENT_INFO.items():
+                        btn = gr.Button(
+                            f"{comp_info['icon']} {comp_type.replace('_', ' ').title()}",
+                            size="sm",
+                            variant="secondary"
+                        )
+                        component_buttons.append((btn, comp_type))
+            
+
+            gr.Markdown("---")
+            example_dropdown = gr.Dropdown(
+                choices=list(EXAMPLE_WORKFLOWS.keys()),
+                label="Load Example",
+                interactive=True
+            )
+            load_example_btn = gr.Button("📥 Load", variant="secondary")
+            
+            gr.Markdown("---")
+            with gr.Row():
+                clear_btn = gr.Button("🗑️ Clear", variant="stop")
+                download_btn = gr.Button("💾 Export", variant="primary")
 
             # Center
-            with gr.Column(scale=3):
-                gr.Markdown("## 🎨 Canvas")
-                canvas = gr.HTML(label="Workflow")
-                
+
+
+#================================================================================
+        with gr.Column():
+            # Config Modal -
+            with gr.Column(visible=False, elem_classes=["modal-overlay"]) as config_modal:
                 with gr.Row():
-                    with gr.Column(scale=1):
-                        gr.Markdown("### 🎯 Selected")
-                        selected_node_info = gr.Markdown("No node selected")
-                        
+                    gr.Markdown("")  # Left spacer
+                    
+                    # Modal content
+                    with gr.Column(scale=2, min_width=400, elem_classes=["modal-content"]):
                         with gr.Row():
-                            select_prev_btn = gr.Button("⬅️", size="sm")
-                            select_next_btn = gr.Button("➡️", size="sm")
+                            config_modal_title = gr.Markdown("### ⚙️ Configure Component")
+                            close_btn = gr.Button("❌", size="sm", elem_classes=["close-btn"])
                         
-                        gr.Markdown("**Move:**")
-                        with gr.Row():
-                            move_left_btn = gr.Button("⬅️", size="sm")
-                            move_up_btn = gr.Button("⬆️", size="sm")
-                            move_down_btn = gr.Button("⬇️", size="sm")
-                            move_right_btn = gr.Button("➡️", size="sm")
+                        config_inputs = []
+                        for i in range(8):  # Reasonable number of fields
+                            config_input = gr.Textbox(
+                                label=f"Field {i}", 
+                                visible=False,
+                                interactive=True
+                            )
+                            config_inputs.append(config_input)
                         
-                        delete_btn = gr.Button("🗑️ Delete", variant="stop", size="sm")
-                        edit_config_btn = gr.Button("⚙️ Config", variant="primary", size="sm")
+                        with gr.Row():
+                            save_new_btn = gr.Button("✅ Add Component", variant="primary")
+                            save_edit_btn = gr.Button("✅ Save Changes", variant="primary", visible=False)
+                            cancel_btn = gr.Button("❌ Cancel", variant="secondary")
                     
-                    with gr.Column(scale=2):
-                        gr.Markdown("### ⚙️ Configuration")
-                        config_display = gr.JSON(label="Current Config")
+                    gr.Markdown("")  # Right spacer
 
-            # Right Sidebar
-            with gr.Column(scale=1, min_width=300):
-                gr.Markdown("## 📊 Info")
-                
-                with gr.Accordion("📋 JSON", open=False):
-                    workflow_json = gr.JSON(label="Workflow Data")
-                
-                with gr.Accordion("📝 Component", open=True):
-                    component_info = gr.Markdown("Select a component")
-                
-                gr.Markdown("---")
-                gr.Markdown("## 📄 Report")
-                report_btn = gr.Button("📊 Generate", variant="primary")
-                report_output = gr.Textbox(label="Report", lines=10, interactive=False)
-                
-                gr.Markdown("---")
-                download_files = gr.Files(label="📥 Downloads")
+#================================================================================
 
-        # Config Modal - FIXED: Proper modal implementation
-        with gr.Column(visible=False, elem_classes=["modal-overlay"]) as config_modal:
+        # Canvas -
+        with gr.Column(scale=3,min_width=600):
+            gr.Markdown("## 🎨 Canvas")
+            canvas = gr.HTML(min_height=600,label="Workflow")
+            
             with gr.Row():
-                gr.Markdown("")  # Left spacer
-                
-                # Modal content
-                with gr.Column(scale=2, min_width=400, elem_classes=["modal-content"]):
+                with gr.Column(scale=2):
+                    gr.Markdown("### 🎯 Selected")
+                    selected_node_info = gr.Markdown("No node selected")
                     with gr.Row():
-                        config_modal_title = gr.Markdown("### ⚙️ Configure Component")
-                        close_btn = gr.Button("❌", size="sm", elem_classes=["close-btn"])
-                    
-                    config_inputs = []
-                    for i in range(8):  # Reasonable number of fields
-                        config_input = gr.Textbox(
-                            label=f"Field {i}", 
-                            visible=False,
-                            interactive=True
-                        )
-                        config_inputs.append(config_input)
+                        from_node = gr.Dropdown(label="From", choices=[], interactive=True)
+                        to_node = gr.Dropdown(label="To", choices=[], interactive=True)
+                        connect_btn = gr.Button("➡️ Connect", variant="secondary")
+                                
+                                        
+                    with gr.Row():
+                        select_prev_btn = gr.Button("⬅️", size="sm")
+                        select_next_btn = gr.Button("➡️", size="sm")
                     
+                    gr.Markdown("**Move:**")
                     with gr.Row():
-                        save_new_btn = gr.Button("✅ Add Component", variant="primary")
-                        save_edit_btn = gr.Button("✅ Save Changes", variant="primary", visible=False)
-                        cancel_btn = gr.Button("❌ Cancel", variant="secondary")
-                
-                gr.Markdown("")  # Right spacer
+                        move_left_btn = gr.Button("⬅️", size="sm")
+                        move_up_btn = gr.Button("⬆️", size="sm")
+                        move_down_btn = gr.Button("⬇️", size="sm")
+                        move_right_btn = gr.Button("➡️", size="sm")
+
+   
+                    delete_btn = gr.Button("🗑️ Delete", variant="stop", size="sm")
+                    edit_config_btn = gr.Button("⚙️ Config", variant="primary", size="sm")
+  
+                with gr.Column(scale=1):
+                    gr.Markdown("### ⚙️ Configuration")
+                    config_display = gr.JSON(label="Current Config")
+                    gr.Markdown("---")                    
+                    with gr.Row():
+                        gr.Markdown("---")
+                        gr.Markdown("## 🔗 Connections")
+                        
+              
+#================================================================================                    
+
+
+
 
+
+
+        # Right Sidebar
+        with gr.Sidebar(width=600,position = "left",open = False):
+            gr.Markdown("## 📊 Info")
+            
+            with gr.Accordion("📋 JSON", open=True):
+                workflow_json = gr.JSON(label="Workflow Data")
+            
+            with gr.Accordion("📝 Component", open=True):
+                component_info = gr.Markdown("Select a component")
+            
+            gr.Markdown("---")
+            gr.Markdown("## 📄 Report")
+            report_btn = gr.Button("📊 Generate", variant="primary")
+            report_output = gr.Textbox(label="Report", lines=10, interactive=False)
+            
+            gr.Markdown("---")
+            download_files = gr.Files(label="📥 Downloads")
+#================================================================================
         # Add custom CSS for modal styling
         demo.css = """
         .modal-overlay {
@@ -2333,7 +2338,7 @@ def create_main_workflow_ui():
             margin-bottom: 10px !important;
         }
         """
-
+#================================================================================
         # Helper functions
         def get_full_state():
             svg = workflow.render_svg()
@@ -2451,7 +2456,7 @@ def create_main_workflow_ui():
         def close_modal():
             """Close modal and reset state"""
             return [gr.update(visible=False), "", ""]
-
+#================================================================================
         # Connect component buttons
         for btn, comp_type in component_buttons:
             btn.click(
@@ -2483,7 +2488,7 @@ def create_main_workflow_ui():
         # Close modal actions
         cancel_btn.click(close_modal, outputs=[config_modal, pending_component_type, editing_node_id])
         close_btn.click(close_modal, outputs=[config_modal, pending_component_type, editing_node_id])
-
+#================================================================================
         # Navigation and other interactions remain the same...
         def navigate(direction):
             if workflow.nodes:
@@ -2503,7 +2508,7 @@ def create_main_workflow_ui():
         for btn, dx, dy in [(move_left_btn, -20, 0), (move_right_btn, 20, 0), (move_up_btn, 0, -20), (move_down_btn, 0, 20)]:
             btn.click(lambda dx=dx, dy=dy: (workflow.move_selected_node(dx, dy) or get_full_state()),
                      outputs=[canvas, from_node, to_node, selected_node_info, config_display, workflow_json, component_info])
-
+#================================================================================
         # Other actions
         connect_btn.click(lambda f, t: (workflow.add_connection(f, t) or get_full_state()) if f and t else get_full_state(),
                          inputs=[from_node, to_node], outputs=[canvas, from_node, to_node, selected_node_info, config_display, workflow_json, component_info])
@@ -2516,7 +2521,7 @@ def create_main_workflow_ui():
         
         clear_btn.click(lambda: (workflow.nodes.clear(), workflow.connections.clear(), setattr(workflow, 'node_counter', 0), setattr(workflow, 'selected_node', None), get_full_state())[-1],
                        outputs=[canvas, from_node, to_node, selected_node_info, config_display, workflow_json, component_info])
-
+#================================================================================
         # Export
         def export():
             wf = workflow.get_workflow_json()
@@ -2526,8 +2531,10 @@ def create_main_workflow_ui():
             
             svg_path = tempfile.mktemp(suffix="_workflow.svg")
             with open(svg_path, "w") as f:
-                f.write(workflow.render_svg())
-            
+                try:
+                    f.write(workflow.render_svg())
+                except:
+                    pass
             return [json_path, svg_path]
 
         download_btn.click(export, outputs=[download_files])
@@ -2540,7 +2547,7 @@ def create_main_workflow_ui():
                 return f"Error: {str(e)}\n\nEnsure LM Studio is running."
 
         report_btn.click(gen_report, outputs=[report_output])
-
+#================================================================================
         # Initialize
         demo.load(get_full_state, outputs=[canvas, from_node, to_node, selected_node_info, config_display, workflow_json, component_info])