Update app.py

app.py

@@ -1,1135 +1,468 @@
-import tkinter as tk
-from tkinter import simpledialog, messagebox, Toplevel, filedialog, ttk
+import gradio as gr
 import networkx as nx
-import math
-import json
+import matplotlib.pyplot as plt
+import pandas as pd
 import random
-from PIL import ImageGrab
+import copy
+import json
+import io
 
-# external modules / files from project
+# --- Local Imports (Must exist in your file system) ---
 import config
 from utils import calculate_metric
-from components import InteractiveComparisonPanel, CreateToolTip
 import metric_visualizations
 
-# descriptions of metrics (hover-over-able)
+# --- Constants ---
+# Metrics description for tooltips/help
 METRIC_DESCRIPTIONS = {
-    "Density": "The ratio of actual connections to potential connections.\nHigh density = highly connected.",
-    "Cyclomatic Number": "The number of fundamental independent loops.\nMeasures the structural complexity of feedback.",
-    "Global Efficiency": "A measure (0.0 - 1.0) of how easily information flows across the network.\nHigher is better for connectivity.",
-    "Supportive Gain": "The amount of efficiency provided specifically by 'Soft' edges.\nHigh gain = Critical reliance on soft interdependencies.",
-    "Brittleness Ratio": "The balance of Supportive (Soft) vs. Essential (Hard) edges.\nLow soft count may indicate a brittle, rigid system.",
-    "Critical Vulnerability": "Checks if the 'Hard' skeleton of the graph is connected.\n'Fractured' means the system breaks if soft links fail.",
-    "Interdependence": "The percentage of edges that cross between different agents.\nHigh interdependence = High requirement for collaboration.",
-    "Total Cycles": "The total count of all feedback loops in the system.\nIndicates potential for recirculation or resonance.",
-    "Avg Cycle Length": "The average number of steps in a feedback loop.\nLong loops = delayed feedback.",
-    "Modularity": "How well the system divides into distinct, isolated groups (modules).\nHigh modularity = Low coupling between groups.",
-    "Functional Redundancy": "The average number of agents assigned to each function.\n>1.0 implies backup capacity exists.",
-    "Agent Criticality": "The agent with the most sole-authority tasks.\nLoss of this agent may cause most disruption.",
-    "Collaboration Ratio": "The percentage of functions that have shared authority.\nCould be a measure of system flexibility."
+    "Density": "Ratio of actual connections to potential connections.",
+    "Cyclomatic Number": "Number of fundamental independent loops.",
+    "Global Efficiency": "Measure (0-1) of information flow ease.",
+    "Supportive Gain": "Efficiency provided specifically by 'Soft' edges.",
+    "Brittleness Ratio": "Balance of Supportive (Soft) vs Essential (Hard) edges.",
+    "Critical Vulnerability": "Checks if 'Hard' skeleton is connected.",
+    "Interdependence": "% of edges crossing between different agents.",
+    "Total Cycles": "Total count of feedback loops.",
+    "Modularity": "How well the system divides into isolated groups.",
+    "Functional Redundancy": "Avg number of agents per function.",
+    "Collaboration Ratio": "% of functions with shared authority."
 }
 
-class GraphBuilderApp:
-    def __init__(self, root):
-        self.root = root
-        self.root.title("Interactive JSAT")
-        self.root.geometry("1400x900")
-        
-        # Backend Data 
+# --- State Management Class ---
+class GraphState:
+    """
+    Acts as the 'self' from your Tkinter app. 
+    Holds the graph, history, and configuration for the current session.
+    """
+    def __init__(self):
         self.G = nx.DiGraph()
-        self.saved_archs = {} 
+        self.pos = {}  # Store display positions
+        self.agents = config.DEFAULT_AGENTS.copy()
         self.undo_stack = []
         self.redo_stack = []
-        
-        # State 
-        self.selected_node = None     
-        self.inspected_node = None    
-        self.drag_node = None       
-        self.drag_start_pos = None 
-        self.is_dragging = False   
-        self.pre_drag_graph_state = None
-        self.sidebar_drag_data = None
-        self.current_highlights = [] 
-        self.active_vis_mode = None
-
-        # View Settings
-        self.zoom = 1.0
-        self.offset_x = 0
-        self.offset_y = 0
-        self.pan_start = None 
-        
-        # Mode Settings
-        self.mode = "SELECT"
-        self.mode_buttons = {}
-        self.view_mode = config.VIEW_MODE_FREE
-        self.edge_view_mode = "ALL"
-        
-        self.agents = config.DEFAULT_AGENTS.copy()
-        
-        self.setup_ui()
-        
-    def setup_ui(self):
-        # Toolbar
-        toolbar_frame = tk.Frame(self.root, bd=1, relief=tk.RAISED)
-        toolbar_frame.pack(side=tk.TOP, fill=tk.X)
-        self.build_toolbar(toolbar_frame)
-
-        # Main Layout
-        main_container = tk.Frame(self.root)
-        main_container.pack(fill=tk.BOTH, expand=True)
-
-        # 1. Dashboard (Right Side)
-        self.dashboard_frame = tk.Frame(main_container, width=350, bg="#f0f0f0", bd=1, relief=tk.SUNKEN)
-        self.dashboard_frame.pack(side=tk.RIGHT, fill=tk.Y)
-        self.dashboard_frame.pack_propagate(False)
-
-        # 2. Canvas (Left Side)
-        self.canvas = tk.Canvas(main_container, bg="white")
-        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
-        
-        # Canvas Bindings
-        self.canvas.bind("<Button-1>", self.on_mouse_down)
-        self.canvas.bind("<B1-Motion>", self.on_mouse_drag)
-        self.canvas.bind("<ButtonRelease-1>", self.on_mouse_up)
-        self.canvas.bind("<Double-Button-1>", self.on_double_click)
-        
-        # Zooming
-        self.canvas.bind("<MouseWheel>", self.on_zoom)      
-        self.canvas.bind("<Button-4>", lambda e: self.on_zoom(e, 1))  
-        self.canvas.bind("<Button-5>", lambda e: self.on_zoom(e, -1)) 
-
-        # 3. Dashboard Content
-        self._setup_dashboard_structure()
+        self.saved_snapshots = {} # For comparison
+        self.counter = 0 # Unique ID counter
+
+    def save_to_history(self):
+        """Push current state to undo stack"""
+        # Deep copy the graph to ensure isolation
+        self.undo_stack.append(self.G.copy())
+        if len(self.undo_stack) > 10: 
+            self.undo_stack.pop(0)
+        self.redo_stack.clear()
 
-        # Footer Status
-        self.status_label = tk.Label(self.root, text="Mode: Select & Inspect", bd=1, relief=tk.SUNKEN, anchor=tk.W)
-        self.status_label.pack(side=tk.BOTTOM, fill=tk.X)
-        
-        self.redraw()
+    def get_node_choices(self):
+        """Returns list of (Label, ID) tuples for Dropdowns"""
+        return [(d.get('label', str(n)), n) for n, d in self.G.nodes(data=True)]
+
+# --- Global Initialization ---
+# In Gradio, we instantiate this once. For multi-user isolation, 
+# you would pass this state through the function arguments, 
+# but for a Space demo, a global instance often suffices for simplicity 
+# unless you expect heavy concurrent traffic.
+session = GraphState()
+
+# --- Core Logic Functions ---
+
+def render_plot(vis_mode="None", edge_filter="ALL"):
+    """
+    Replaces the Canvas drawing logic.
+    Uses Matplotlib to render the JSAT layers and NetworkX graph.
+    """
+    plt.figure(figsize=(12, 8))
+    ax = plt.gca()
+    
+    # 1. Draw Layer Backgrounds
+    # We map config layers to Y-axis. Matplotlib Y increases upwards.
+    for name, y_val in config.JSAT_LAYERS.items():
+        plt.axhline(y=y_val, color='#e0e0e0', linestyle='--', zorder=0)
+        plt.text(50, y_val + 10, name, color='grey', fontsize=10, fontweight='bold', zorder=0)
+
+    if session.G.number_of_nodes() == 0:
+        plt.text(0.5, 0.5, "Graph is Empty.\nUse 'Editor' tab to add nodes.", 
+                 ha='center', va='center', transform=ax.transAxes, color='grey')
+        plt.axis('off')
+        return plt.gcf()
+
+    # 2. Filter Edges
+    edges_to_draw = []
+    for u, v, d in session.G.edges(data=True):
+        etype = d.get('type', config.EDGE_TYPE_HARD)
+        if edge_filter == "ALL" or etype == edge_filter:
+            edges_to_draw.append((u, v))
+
+    # 3. Draw Highlights (Visual Analytics)
+    # This replaces the yellow overlay logic
+    highlight_nodes = []
+    highlight_edges = []
+    
+    if vis_mode == "Cycles":
+        hl_data = metric_visualizations.get_cycle_highlights(session.G)
+        for item in hl_data:
+            highlight_nodes.extend(item.get('nodes', []))
+            highlight_edges.extend(item.get('edges', []))
+    elif vis_mode == "Interdependence":
+        hl_data = metric_visualizations.get_interdependence_highlights(session.G)
+        for item in hl_data:
+            highlight_nodes.extend(item.get('nodes', []))
+            highlight_edges.extend(item.get('edges', []))
+    elif vis_mode == "Modularity":
+        hl_data = metric_visualizations.get_modularity_highlights(session.G)
+        for item in hl_data:
+            highlight_nodes.extend(item.get('nodes', []))
+            highlight_edges.extend(item.get('edges', []))
+
+    pos = session.pos
+    
+    # Draw Highlights Underneath
+    if highlight_nodes:
+        nx.draw_networkx_nodes(session.G, pos, nodelist=highlight_nodes, node_color='yellow', node_size=900, alpha=0.5)
+    if highlight_edges:
+        nx.draw_networkx_edges(session.G, pos, edgelist=highlight_edges, edge_color='yellow', width=6, alpha=0.5)
+
+    # 4. Draw Standard Edges
+    hard_edges = [(u,v) for (u,v) in edges_to_draw if session.G.edges[u,v].get('type') == 'hard']
+    soft_edges = [(u,v) for (u,v) in edges_to_draw if session.G.edges[u,v].get('type') == 'soft']
+    
+    nx.draw_networkx_edges(session.G, pos, edgelist=hard_edges, edge_color='black', width=2, arrowstyle='-|>')
+    nx.draw_networkx_edges(session.G, pos, edgelist=soft_edges, edge_color='grey', width=2, style='dashed', arrowstyle='-|>')
 
-    def _setup_dashboard_structure(self):
-        """Initializes static dashboard containers."""
-        tk.Label(self.dashboard_frame, text="Network Dashboard", font=("Arial", 14, "bold"), 
-                 bg="#4a4a4a", fg="white", pady=8).pack(fill=tk.X)
+    # 5. Draw Nodes (Shapes and Colors based on Type/Agent)
+    for n, d in session.G.nodes(data=True):
+        x, y = pos[n]
+        lbl = d.get('label', str(n))
+        ntype = d.get('type', 'Function')
+        agents = d.get('agent', ['Unassigned'])
+        if isinstance(agents, str): agents = [agents]
         
-        self.inspector_frame = tk.Frame(self.dashboard_frame, bg="#fff8e1", bd=2, relief=tk.GROOVE)
-        self.inspector_frame.pack(fill=tk.X, padx=5, pady=5)
+        # Determine Color (Primary Agent)
+        primary_agent = agents[0]
+        color = session.agents.get(primary_agent, 'white')
         
-        # Scrollable Area
-        self.scroll_canvas = tk.Canvas(self.dashboard_frame, bg="#f0f0f0")
-        self.scrollbar = tk.Scrollbar(self.dashboard_frame, orient="vertical", command=self.scroll_canvas.yview)
-        self.scrollable_content = tk.Frame(self.scroll_canvas, bg="#f0f0f0")
-
-        self.scroll_canvas.create_window((0, 0), window=self.scrollable_content, anchor="nw", width=330)
-        self.scroll_canvas.configure(yscrollcommand=self.scrollbar.set)
+        # Shape
+        marker = 's' if ntype == 'Function' else 'o'
         
-        self.scroll_canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
-        self.scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
-        self.scrollable_content.bind("<Configure>", lambda e: self.scroll_canvas.configure(scrollregion=self.scroll_canvas.bbox("all")))
-
-    # Coordinate Transforms
-
-    def to_screen(self, wx, wy):
-        return (wx * self.zoom) + self.offset_x, (wy * self.zoom) + self.offset_y
+        # Manual scatter plot to handle mixed shapes/colors
+        plt.scatter(x, y, s=600, c=color, marker=marker, edgecolors='black', linewidth=1.5, zorder=2)
+        plt.text(x, y-40, lbl, ha='center', va='top', fontsize=9, fontweight='bold', zorder=3)
 
-    def to_world(self, sx, sy):
-        return (sx - self.offset_x) / self.zoom, (sy - self.offset_y) / self.zoom
+    plt.axis('off')
+    plt.tight_layout()
+    return plt.gcf()
 
-    def get_draw_pos(self, node_id):
-        """Calculates WORLD coordinates based on current view mode."""
-        data = self.G.nodes[node_id]
-        raw_x, raw_y = data.get('pos', (100, 100))
-        
-        # If dragging in JSAT mode, show raw position until dropped
-        if self.view_mode == config.VIEW_MODE_JSAT and self.drag_node == node_id and self.is_dragging:
-            return raw_x, raw_y
-        
-        if self.view_mode == config.VIEW_MODE_FREE:
-            return raw_x, raw_y
-            
-        # JSAT Mode: Snap Y to layer
-        layer = self.get_node_layer(data)
-        return raw_x, config.JSAT_LAYERS[layer]
+# --- Interaction Functions ---
 
-    def get_node_layer(self, data):
-        if 'layer' in data and data['layer'] in config.JSAT_LAYERS:
-            return data['layer']
-        return "Base Environment" if data.get('type') == "Resource" else "Distributed Work"
-
-    # Interaction Logic
-
-    def on_zoom(self, event, direction=None):
-        factor = 1.1 if (direction or event.delta) > 0 else 0.9
-        self.zoom *= factor
-        self.redraw()
-
-    def on_mouse_down(self, event):
-        # 1. Check for Node Click
-        clicked_node = self._get_node_at(event.x, event.y)
-        
-        if clicked_node is not None:
-            self._handle_node_press(clicked_node, event)
-        else:
-            self._handle_background_press(event)
-
-    def _handle_node_press(self, node_id, event):
-        self.pre_drag_graph_state = self.G.copy()
-        self.drag_node = node_id
-        self.drag_start_pos = (event.x, event.y)
-        self.is_dragging = False
-
-    def _handle_background_press(self, event):
-        if self.mode == "DELETE":
-            clicked_edge = self.find_edge_at(event.x, event.y)
-            if clicked_edge:
-                self.save_state()
-                self.G.remove_edge(*clicked_edge)
-                self.redraw()
-                return
+def add_node_fn(label, n_type, layer, agent):
+    session.save_to_history()
+    
+    # Generate ID
+    nid = session.counter
+    session.counter += 1
+    
+    # Calculate position
+    y = config.JSAT_LAYERS.get(layer, 0)
+    x = random.randint(100, 900)
+    
+    session.G.add_node(nid, label=label, type=n_type, layer=layer, 
+                       agent=[agent], pos=(x, y))
+    session.pos[nid] = (x, y)
+    
+    return render_plot(), update_node_dropdown(), f"Added {label}"
 
-        # Prepare for Pan or Add
-        self.inspected_node = None
-        self.pan_start = (event.x, event.y)
-        self.is_dragging = False
-        self.redraw()
+def add_edge_fn(u_id, v_id, e_type):
+    if u_id is None or v_id is None:
+        return render_plot(), update_node_dropdown(), "Error: Select nodes"
+    
+    # Enforce alternating type logic from Tkinter app
+    t1 = session.G.nodes[u_id].get('type')
+    t2 = session.G.nodes[v_id].get('type')
+    
+    if t1 == t2:
+        return render_plot(), update_node_dropdown(), f"Error: Cannot connect {t1} to {t2}"
+        
+    session.save_to_history()
+    session.G.add_edge(u_id, v_id, type=e_type)
+    return render_plot(), update_node_dropdown(), "Connection Created"
+
+def delete_node_fn(u_id):
+    if u_id is None: return render_plot(), update_node_dropdown(), "No node selected"
+    session.save_to_history()
+    session.G.remove_node(u_id)
+    return render_plot(), update_node_dropdown(), "Node Deleted"
+
+def create_agent_fn(name, color):
+    if not name: return "Name required", gr.update()
+    session.agents[name] = color
+    # Update choices for agent dropdowns
+    return f"Created agent {name}", gr.Dropdown(choices=list(session.agents.keys()))
+
+def assign_agent_fn(node_id, agent_name):
+    if node_id is None: return render_plot(), "Select a node"
+    
+    session.save_to_history()
+    current = session.G.nodes[node_id].get('agent', [])
+    if isinstance(current, str): current = [current]
+    
+    # Logic from Tkinter: Toggle agent
+    if agent_name in current:
+        current.remove(agent_name)
+    else:
+        if "Unassigned" in current: current.remove("Unassigned")
+        current.append(agent_name)
+        
+    if not current: current = ["Unassigned"]
+    
+    session.G.nodes[node_id]['agent'] = current
+    return render_plot(), f"Agents for node {node_id}: {current}"
 
-    def on_mouse_drag(self, event):
-        if self.drag_node is not None:
-            if not self.is_dragging and math.hypot(event.x - self.drag_start_pos[0], event.y - self.drag_start_pos[1]) > 5:
-                self.is_dragging = True
-            
-            if self.is_dragging:
-                wx, wy = self.to_world(event.x, event.y)
-                self.G.nodes[self.drag_node]['pos'] = (wx, wy)
-                self.redraw()
+def update_node_dropdown():
+    # Helper to refresh dropdown options
+    choices = session.get_node_choices()
+    return gr.Dropdown(choices=choices)
 
-        elif self.pan_start is not None:
-            if not self.is_dragging and math.hypot(event.x - self.pan_start[0], event.y - self.pan_start[1]) > 5:
-                self.is_dragging = True
+def calculate_stats_fn():
+    report = "### Network Statistics\n"
+    
+    metrics = [
+        "Density", "Cyclomatic Number", "Global Efficiency", 
+        "Supportive Gain", "Brittleness Ratio", "Interdependence",
+        "Total Cycles", "Modularity"
+    ]
+    
+    for m in metrics:
+        try:
+            val = calculate_metric(session.G, m)
+            desc = METRIC_DESCRIPTIONS.get(m, "")
+            report += f"**{m}**: {val}\n> *{desc}*\n\n"
+        except Exception as e:
+            report += f"**{m}**: Error ({str(e)})\n\n"
             
-            if self.is_dragging:
-                dx, dy = event.x - self.pan_start[0], event.y - self.pan_start[1]
-                self.offset_x += dx
-                self.offset_y += dy
-                self.pan_start = (event.x, event.y)
-                self.redraw()
-
-    def on_mouse_up(self, event):
-        if self.drag_node is not None:
-            if self.is_dragging: 
-                self._finalize_drag(event)
-            else: 
-                self.handle_click(self.drag_node)
-            self.drag_node = None
-            self.is_dragging = False
+    return report
 
-        elif self.pan_start is not None:
-            if not self.is_dragging and self.mode in ["ADD_FUNC", "ADD_RES"]:
-                self.save_state()
-                wx, wy = self.to_world(event.x, event.y)
-                self.add_node(wx, wy)
-            self.pan_start = None
-            self.is_dragging = False
+def snapshot_fn(name):
+    if not name: return "Enter a name", gr.update()
+    session.saved_snapshots[name] = session.G.copy()
+    return f"Saved snapshot: {name}", gr.update(choices=list(session.saved_snapshots.keys()))
 
-    def _finalize_drag(self, event):
-        self.save_state(state=self.pre_drag_graph_state) # save previous state before modification
-        
-        # JSAT Snapping Logic
-        if self.view_mode == config.VIEW_MODE_JSAT:
-            _, world_y = self.to_world(event.x, event.y)
-            new_layer = self.get_layer_from_y(world_y)
-            if new_layer:
-                self.G.nodes[self.drag_node]['layer'] = new_layer
-                # Visual snap logic handled in get_draw_pos via data update
+def compare_fn(selected_snapshots):
+    if not selected_snapshots: return pd.DataFrame()
+    
+    data = []
+    metrics = ["Density", "Global Efficiency", "Total Cycles", "Modularity"]
+    
+    for name in selected_snapshots:
+        g = session.saved_snapshots[name]
+        row = {"Snapshot": name, "Nodes": g.number_of_nodes(), "Edges": g.number_of_edges()}
+        for m in metrics:
+            row[m] = calculate_metric(g, m)
+        data.append(row)
+        
+    return pd.DataFrame(data)
+
+def export_json_fn():
+    # Mimic the Save JSON logic
+    nodes_dict = {}
+    agent_authorities = {name: [] for name in session.agents}
+    
+    for nid, d in session.G.nodes(data=True):
+        lbl = d.get('label', f"Node_{nid}")
+        layer = d.get('layer', "Base Environment").replace(" ", "")
+        typ = d.get('type', "Function")
+        nodes_dict[lbl] = {"Type": f"{layer}{typ}", "UserData": lbl}
+        
+        ag_list = d.get('agent', ["Unassigned"])
+        if not isinstance(ag_list, list): ag_list = [ag_list]
+        for ag in ag_list:
+            if ag in agent_authorities: agent_authorities[ag].append(lbl)
+
+    edges_list = []
+    for u, v, d in session.G.edges(data=True): 
+        src_lbl = session.G.nodes[u].get('label', str(u))
+        tgt_lbl = session.G.nodes[v].get('label', str(v))
+        edges_list.append({
+            "Source": src_lbl,
+            "Target": tgt_lbl,
+            "UserData": {"type": d.get('type', config.EDGE_TYPE_HARD)}
+        })
+
+    final = {"GraphData": {
+        "Nodes": nodes_dict, 
+        "Edges": edges_list, 
+        "Agents": {name: {"Authority": auth} for name, auth in agent_authorities.items()}
+    }}
+    
+    # Return as string for Textbox
+    return json.dumps(final, indent=4)
+
+def load_json_fn(json_str):
+    try:
+        data = json.loads(json_str)["GraphData"]
+        session.G.clear()
+        session.pos = {}
+        session.counter = 0
+        
+        # Load Agents
+        for ag_name, ag_data in data.get("Agents", {}).items():
+            if ag_name not in session.agents:
+                session.agents[ag_name] = "#999999" # Default color if unknown
+        
+        # Load Nodes
+        label_to_id = {}
+        for lbl, props in data.get("Nodes", {}).items():
+            combined_type = props.get("Type", "")
+            # Basic Parse logic
+            ntype = "Function" if "Function" in combined_type else "Resource"
+            # Find layer
+            layer = "Distributed Work"
+            for l in config.LAYER_ORDER:
+                if l.replace(" ","") in combined_type:
+                    layer = l
+                    break
+            
+            nid = session.counter
+            session.counter += 1
+            
+            # Position logic
+            y = config.JSAT_LAYERS.get(layer, 0)
+            x = random.randint(100, 900)
+            
+            session.G.add_node(nid, label=lbl, type=ntype, layer=layer, agent=["Unassigned"], pos=(x,y))
+            session.pos[nid] = (x,y)
+            label_to_id[lbl] = nid
+            
+        # Load Edges
+        for e in data.get("Edges", []):
+            u = label_to_id.get(e["Source"])
+            v = label_to_id.get(e["Target"])
+            if u is not None and v is not None:
+                etype = e.get("UserData", {}).get("type", "hard")
+                session.G.add_edge(u, v, type=etype)
                 
-        self.redraw()
+        return render_plot(), update_node_dropdown(), "JSON Loaded Successfully"
+    except Exception as e:
+        return render_plot(), update_node_dropdown(), f"Error loading JSON: {str(e)}"
 
-    def handle_click(self, node_id):
-        self.inspected_node = node_id
-        
-        if self.mode == "SELECT": 
-            self.redraw()
-            
-        elif self.mode == "DELETE": 
-            self.save_state()
-            self.G.remove_node(node_id)
-            self.inspected_node = None
-            self.redraw()
-            
-        elif self.mode == "ADD_EDGE":
-            self._handle_add_edge(node_id)
-
-    def _handle_add_edge(self, node_id):
-        if not self.selected_node: 
-            self.selected_node = node_id
-            self.redraw()
-            return
-
-        if self.selected_node == node_id:
-            return
-
-        # Enforce Alternating connection types (Func <-> Res, no fun-->fun or res-->res)
-        type_start = self.G.nodes[self.selected_node].get('type')
-        type_end = self.G.nodes[node_id].get('type')
-        
-        if type_start == type_end:
-            messagebox.showerror("Connection Error", f"Cannot connect {type_start} to {type_end}.\nConnections must alternate (Func <-> Res).")
-        else:
-            is_hard = messagebox.askyesno("Interdependency Type", "Is this a HARD constraint?\n\nYes = Essential (Hard)\nNo = Supportive (Soft)")
-            edge_type = config.EDGE_TYPE_HARD if is_hard else config.EDGE_TYPE_SOFT
-            
-            self.save_state()
-            self.G.add_edge(self.selected_node, node_id, type=edge_type)
-        
-        self.selected_node = None
-        self.redraw()
-
-    # Drawing Logic
-
-    def redraw(self):
-        self.canvas.delete("all")
-        
-        # 1. Background Layers
-        if self.view_mode == config.VIEW_MODE_JSAT:
-            self._draw_layer_lines()
-            
-        # 2. Highlights (Behind nodes)
-        self._draw_highlights()
-        
-        # 3. Graph Content
-        self._draw_edges()
-        self._draw_nodes()
-        
-        # 4. Refresh Dashboard (Consider optimizing this to not run on every drag)
-        if not self.is_dragging:
-            self.rebuild_dashboard()
-
-    def _draw_layer_lines(self):
-        for layer_name in config.LAYER_ORDER:
-            world_y = config.JSAT_LAYERS[layer_name]
-            _, screen_y = self.to_screen(0, world_y)
-            self.canvas.create_line(0, screen_y, 20000, screen_y, fill="#ddd", dash=(4, 4))
-            self.canvas.create_text(10, screen_y - 10, text=layer_name, anchor="w", fill="#888", font=("Arial", 8, "italic"))
+# --- Layout Construction ---
 
-    def _draw_highlights(self):
-        if not self.current_highlights: return
-        
-        edge_counts = {}
-        for h in self.current_highlights:
-            color = h.get('color', 'yellow')
-            width = h.get('width', 8) * self.zoom
-            
-            # Draw Nodes
-            for n in h.get('nodes', []):
-                wx, wy = self.get_draw_pos(n)
-                sx, sy = self.to_screen(wx, wy)
-                rad = (config.NODE_RADIUS * self.zoom) + (width/2)
-                self.canvas.create_oval(sx-rad, sy-rad, sx+rad, sy+rad, fill=color, outline=color)
-            
-            # Draw Edges (with offset for overlaps)
-            for u, v in h.get('edges', []):
-                edge_key = tuple(sorted((u, v)))
-                count = edge_counts.get(edge_key, 0)
-                edge_counts[edge_key] = count + 1
+with gr.Blocks(title="Interactive JSAT", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🕸️ Interactive JSAT Graph Builder")
+    
+    with gr.Row():
+        # LEFT COLUMN: Visualization
+        with gr.Column(scale=2):
+            plot_output = gr.Plot(label="Network Architecture")
+            log_output = gr.Textbox(label="System Log", value="Ready.", interactive=False)
+            
+            with gr.Row():
+                vis_mode = gr.Radio(["None", "Cycles", "Interdependence", "Modularity"], label="Visual Analytics Overlay", value="None")
+                edge_filter = gr.Radio(["ALL", "hard", "soft"], label="Show Edges", value="ALL")
+
+        # RIGHT COLUMN: Controls (Tabs)
+        with gr.Column(scale=1):
+            
+            # --- TAB 1: EDITOR ---
+            with gr.Tab("📝 Editor"):
+                gr.Markdown("### Add Node")
+                with gr.Row():
+                    n_lbl = gr.Textbox(label="Label", placeholder="F1")
+                    n_type = gr.Dropdown(["Function", "Resource"], label="Type", value="Function")
+                with gr.Row():
+                    n_layer = gr.Dropdown(config.LAYER_ORDER, label="Layer", value="Distributed Work")
+                    n_agent = gr.Dropdown(list(session.agents.keys()), label="Initial Agent", value="Unassigned")
+                btn_add_n = gr.Button("➕ Create Node", variant="primary")
                 
-                wx1, wy1 = self.get_draw_pos(u)
-                wx2, wy2 = self.get_draw_pos(v)
-                sx1, sy1 = self.to_screen(wx1, wy1)
-                sx2, sy2 = self.to_screen(wx2, wy2)
+                gr.Markdown("### Connections")
+                with gr.Row():
+                    # These dropdowns update dynamically
+                    src_drop = gr.Dropdown(label="Source", choices=[])
+                    tgt_drop = gr.Dropdown(label="Target", choices=[])
+                e_type = gr.Radio(["hard", "soft"], label="Constraint", value="hard")
+                btn_add_e = gr.Button("🔗 Connect", variant="secondary")
                 
-                # Offset logic
-                offset_step = width / 2
-                current_offset = (count * width) - offset_step
-                dx, dy = sx2 - sx1, sy2 - sy1
-                length = math.hypot(dx, dy)
-                if length == 0: continue
+                gr.Markdown("### Management")
+                del_node_drop = gr.Dropdown(label="Select Node to Delete", choices=[])
+                btn_del = gr.Button("🗑️ Delete Node", variant="stop")
+
+            # --- TAB 2: AGENTS ---
+            with gr.Tab("👥 Agents"):
+                gr.Markdown("### Create New Agent")
+                with gr.Row():
+                    new_ag_name = gr.Textbox(label="Name")
+                    new_ag_col = gr.ColorPicker(label="Color", value="#00ff00")
+                btn_create_ag = gr.Button("Save Agent")
                 
-                nx_vec, ny_vec = -dy / length, dx / length
-                os_x, os_y = nx_vec * current_offset, ny_vec * current_offset
+                gr.Markdown("### Assign to Node")
+                with gr.Row():
+                    node_assign_drop = gr.Dropdown(label="Node", choices=[])
+                    agent_assign_drop = gr.Dropdown(label="Agent", choices=list(session.agents.keys()))
+                btn_assign = gr.Button("Toggle Assignment")
+
+            # --- TAB 3: ANALYTICS ---
+            with gr.Tab("📊 Analytics"):
+                stats_box = gr.Markdown("Click 'Calculate' to see metrics...")
+                btn_stats = gr.Button("Calculate Metrics")
+
+            # --- TAB 4: COMPARE ---
+            with gr.Tab("⚖️ Compare"):
+                snap_name = gr.Textbox(label="Snapshot Name")
+                btn_snap = gr.Button("Save Snapshot")
                 
-                self.canvas.create_line(sx1+os_x, sy1+os_y, sx2+os_x, sy2+os_y, 
-                                        fill=color, width=width, capstyle=tk.ROUND)
-
-    def _draw_edges(self):
-        r = config.NODE_RADIUS * self.zoom
-        
-        for u, v, d in self.G.edges(data=True):
-            e_type = d.get('type', config.EDGE_TYPE_HARD)
-            
-            # Filter
-            if self.edge_view_mode != "ALL" and e_type != self.edge_view_mode:
-                continue
-
-            # Style
-            is_soft = (e_type == config.EDGE_TYPE_SOFT)
-            color = config.SOFT_EDGE_COLOR if is_soft else config.HARD_EDGE_COLOR
-            dash = config.SOFT_EDGE_DASH if is_soft else None
-            width = (1.5 if is_soft else 2.0) * self.zoom
-
-            # Coordinates
-            wx1, wy1 = self.get_draw_pos(u)
-            wx2, wy2 = self.get_draw_pos(v)
-            sx1, sy1 = self.to_screen(wx1, wy1)
-            sx2, sy2 = self.to_screen(wx2, wy2)
-            
-            dx, dy = sx2 - sx1, sy2 - sy1
-            dist = math.hypot(dx, dy)
-            if dist == 0: continue
-            
-            # Stop line at node edge
-            gap = r + 2
-            tx = sx2 - (dx/dist)*gap
-            ty = sy2 - (dy/dist)*gap
-            
-            self.canvas.create_line(sx1, sy1, tx, ty, arrow=tk.LAST, width=width, fill=color, dash=dash)
-
-    def _draw_nodes(self):
-        r = config.NODE_RADIUS * self.zoom
-        font_size = max(15, int(10 * self.zoom))
-        
-        for n, d in self.G.nodes(data=True):
-            wx, wy = self.get_draw_pos(n)
-            sx, sy = self.to_screen(wx, wy)
-            
-            ag_list = d.get('agent', ["Unassigned"])
-            if not isinstance(ag_list, list): ag_list = [ag_list]
-            
-            # Outline Style
-            outline, width = "black", 1
-            if n == self.selected_node:
-                outline, width = "blue", 3
-            elif n == self.inspected_node:
-                outline, width = "orange", 3
-            
-            # Shape Render
-            if d.get('type') == "Function":
-                self._draw_rect_node(sx, sy, r, ag_list, outline, width)
-            else:
-                self._draw_circle_node(sx, sy, r, ag_list, outline, width)
+                snap_select = gr.CheckboxGroup(label="Select Snapshots to Compare", choices=[])
+                btn_compare = gr.Button("Generate Comparison Table")
+                compare_table = gr.Dataframe(label="Comparison Matrix")
+
+            # --- TAB 5: I/O ---
+            with gr.Tab("💾 I/O"):
+                btn_export = gr.Button("Generate JSON")
+                json_out = gr.Textbox(label="JSON Output", lines=5, show_copy_button=True)
                 
-            # Label
-            label_offset = r + (5 * self.zoom)
-            self.canvas.create_text(sx, sy-label_offset, text=d.get('label',''), font=("Arial", font_size, "bold"), anchor="s")
-
-    def _draw_rect_node(self, sx, sy, r, agents, outline, width):
-        total_w = (r * 2)
-        strip_w = total_w / len(agents)
-        start_x = sx - r
-        
-        for i, ag in enumerate(agents):
-            fill = self.agents.get(ag, "white")
-            x1 = start_x + (i * strip_w)
-            x2 = start_x + ((i + 1) * strip_w)
-            self.canvas.create_rectangle(x1, sy-r, x2, sy+r, fill=fill, outline="")
-            
-        self.canvas.create_rectangle(sx-r, sy-r, sx+r, sy+r, fill="", outline=outline, width=width)
-
-    def _draw_circle_node(self, sx, sy, r, agents, outline, width):
-        if len(agents) == 1:
-            fill = self.agents.get(agents[0], "white")
-            self.canvas.create_oval(sx-r, sy-r, sx+r, sy+r, fill=fill, outline=outline, width=width)
-        else:
-            extent = 360 / len(agents)
-            start_angle = 90
-            for ag in agents:
-                fill = self.agents.get(ag, "white")
-                self.canvas.create_arc(sx-r, sy-r, sx+r, sy+r, start=start_angle, extent=extent, fill=fill, outline="")
-                start_angle += extent
-            self.canvas.create_oval(sx-r, sy-r, sx+r, sy+r, fill="", outline=outline, width=width)
-
-    # Dashboard Builders 
-
-    def rebuild_dashboard(self):
-        # Preserve Scroll
-        try: scroll_pos = self.scroll_canvas.yview()[0]
-        except: scroll_pos = 0.0
-
-        # Clear
-        for w in self.inspector_frame.winfo_children(): w.destroy()
-        for w in self.scrollable_content.winfo_children(): w.destroy()
-
-        # Build Sections
-        self._build_stats_section()
-        self._build_agent_section()
-        self._build_inspector_section()
-        
-        # Restore Scroll
-        self.scrollable_content.update_idletasks()
-        self.scroll_canvas.configure(scrollregion=self.scroll_canvas.bbox("all"))
-        self.scroll_canvas.yview_moveto(scroll_pos)
-
-    def _build_stats_section(self):
-        tk.Label(self.scrollable_content, text="Network Statistics", font=("Arial", 14, "bold"), bg="#f0f0f0").pack(fill=tk.X, pady=(10, 5))
-        stats_frame = tk.Frame(self.scrollable_content, bg="white", bd=1, relief=tk.SOLID)
-        stats_frame.pack(fill=tk.X, padx=5)
-
-        def add_row(text, color="black", callback=None, metric_key=None):
-            lbl = tk.Label(stats_frame, text=text, bg="white", fg=color)
-            if callback:
-                lbl.config(cursor="hand2")
-                lbl.bind("<Button-1>", lambda e: callback())
-            lbl.pack(anchor="w", padx=5)
-            if metric_key and metric_key in METRIC_DESCRIPTIONS:
-                CreateToolTip(lbl, METRIC_DESCRIPTIONS[metric_key])
-
-        # Standard Metrics
-        standard_metrics = [
-            ("Density", "Density"), 
-            ("Cyclomatic Number", "Cyclomatic Number"),
-            ("Global Efficiency", "Global Efficiency"), 
-            ("Supportive Gain", "Supportive Gain"),
-            ("Soft/Hard Ratio", "Brittleness Ratio"), 
-            ("Critical Vulnerability", "Critical Vulnerability"),
-            ("Func. Redundancy", "Functional Redundancy"),
-            ("Agent Criticality", "Agent Criticality"),
-            ("Collab. Ratio", "Collaboration Ratio")
-        ]
-        
-        for label, key in standard_metrics:
-            val = calculate_metric(self.G, key)
-            add_row(f"{label}: {val}", metric_key=key)
-
-        # Interactive Metrics
-        add_row(f"Interdependence: {calculate_metric(self.G, 'Interdependence')}", "blue", 
-                lambda: self.trigger_visual_analytics("interdependence"), "Interdependence")
-        
-        add_row(f"Total Cycles: {calculate_metric(self.G, 'Total Cycles')}", "blue", 
-                lambda: self.trigger_visual_analytics("cycles"), "Total Cycles")
-        
-        # Metric: Cycles List
-        cycles = list(nx.simple_cycles(self.G))
-        avg_len = sum(len(c) for c in cycles) / len(cycles) if cycles else 0.0
-        add_row(f"Avg Cycle Length: {avg_len:.2f}", metric_key="Avg Cycle Length")
-        
-        if cycles:
-            items = [{'label': len(c), 'tooltip': f"Cycle {i+1}:\n" + " -> ".join([str(self.G.nodes[n].get('label', n)) for n in c])} for i, c in enumerate(cycles)]
-            self._create_scrollable_list_ui(stats_frame, "", items, ["blue"], lambda idx: self.trigger_single_cycle_vis(idx)).pack(fill=tk.X, padx=5, pady=2)
-
-        # Metric: Modularity
-        try:
-            mod_val = calculate_metric(self.G, 'Modularity')
-            add_row(f"Modularity: {mod_val}", "blue", lambda: self.trigger_visual_analytics("modularity"), "Modularity")
-            
-            comms = sorted(nx.community.greedy_modularity_communities(self.G.to_undirected()), key=len, reverse=True)
-            if comms:
-                mod_items = [{'label': len(c), 'tooltip': f"Group {i+1}:\n" + ", ".join([str(self.G.nodes[n].get('label', n)) for n in c])} for i, c in enumerate(comms)]
-                self._create_scrollable_list_ui(stats_frame, "", mod_items, ["blue"], lambda idx: self.trigger_single_modularity_vis(idx)).pack(fill=tk.X, padx=5, pady=2)
-        except:
-            add_row("Modularity: Err")
-
-    def _build_agent_section(self):
-        tk.Label(self.scrollable_content, text="Agent Overview", font=("Arial", 14, "bold"), bg="#f0f0f0").pack(fill=tk.X, pady=(15, 2))
-        
-        ctrl = tk.Frame(self.scrollable_content, bg="#e0e0e0", bd=1, relief=tk.RAISED)
-        ctrl.pack(fill=tk.X, padx=5, pady=5)
-        tk.Button(ctrl, text="New Agent", command=self.create_agent, bg="white").pack(pady=5)
-
-        # Group Nodes by Agent
-        agent_map = {name: [] for name in self.agents}
-        for n, d in self.G.nodes(data=True):
-            ag_list = d.get('agent', ["Unassigned"])
-            if not isinstance(ag_list, list): ag_list = [ag_list]
-            for ag in ag_list:
-                target = ag if ag in agent_map else "Unassigned"
-                if target not in agent_map: agent_map[target] = []
-                agent_map[target].append(n)
-
-        # Create UI
-        for name, color in self.agents.items():
-            af = tk.Frame(self.scrollable_content, bg="#e0e0e0", bd=1, relief=tk.RAISED)
-            af.pack(fill=tk.X, pady=2, padx=5)
-            af.agent_name = name # For drag-n-drop
-            
-            # Header
-            hf = tk.Frame(af, bg="#e0e0e0"); hf.pack(fill=tk.X)
-            tk.Label(hf, bg=color, width=3).pack(side=tk.LEFT, padx=5, fill=tk.X)
-            lbl = tk.Label(hf, text=name, bg="#e0e0e0", font=("Arial", 10, "bold"))
-            lbl.pack(side=tk.LEFT, fill=tk.X)
-            lbl.bind("<Button-1>", lambda e, a=name: self.edit_agent(a))
+                gr.Markdown("---")
+                json_in = gr.Textbox(label="Paste JSON Here", lines=5)
+                btn_import = gr.Button("Load from JSON")
 
-            # Nodes
-            nodes = agent_map.get(name, [])
-            if nodes:
-                for nid in nodes:
-                    lbl_text = self.G.nodes[nid].get('label', str(nid))
-                    b = tk.Button(af, text=f"• {lbl_text}", anchor="w", bg="white", relief=tk.FLAT, font=("Arial", 9))
-                    b.config(command=lambda n=nid: self.handle_click(n))
-                    b.pack(fill=tk.X, padx=10, pady=1)
-                    
-                    # Sidebar Drag Logic
-                    b.bind("<Button-1>", lambda e, n=nid: self.on_sidebar_node_press(e, n))
-                    b.bind("<ButtonRelease-1>", self.on_sidebar_node_release)
-            else:
-                tk.Label(af, text="(Empty)", bg="#e0e0e0", fg="#666", font=("Arial", 8, "italic")).pack(anchor="w", padx=10)
-
-    def _build_inspector_section(self):
-        if self.inspected_node is None or not self.G.has_node(self.inspected_node):
-            tk.Label(self.inspector_frame, text="(Select a node to inspect)", bg="#fff8e1", fg="#888").pack(pady=5)
-            return
-
-        d = self.G.nodes[self.inspected_node]
-        tk.Label(self.inspector_frame, text="SELECTED NODE INSPECTOR", bg="#fff8e1", font=("Arial", 10, "bold")).pack(pady=2)
-
-        # Details
-        tk.Label(self.inspector_frame, text=f"ID: {self.inspected_node} | Lbl: {d.get('label')}", bg="#fff8e1", font=("Arial", 9, "bold")).pack(anchor="w", padx=5)
-
-        # Layer Control
-        r2 = tk.Frame(self.inspector_frame, bg="#fff8e1"); r2.pack(fill=tk.X, padx=5, pady=2)
-        tk.Label(r2, text="Layer:", bg="#fff8e1").pack(side=tk.LEFT)
-        
-        current_layer = self.get_node_layer(d)
-        layer_var = tk.StringVar(value=current_layer)
-        layer_box = ttk.Combobox(r2, textvariable=layer_var, values=config.LAYER_ORDER, state="readonly", width=18)
-        layer_box.pack(side=tk.LEFT, padx=5)
-        
-        def on_layer_change(event):
-            self.save_state()
-            self.G.nodes[self.inspected_node]['layer'] = layer_var.get()
-            self.redraw()
-        layer_box.bind("<<ComboboxSelected>>", on_layer_change)
-
-        # Metrics
-        def safe_metric(func, **kwargs):
-            try: return f"{func(self.G, **kwargs)[self.inspected_node]:.3f}"
-            except: return "0.000"
-
-        stats = (f"In-Degree:     {self.G.in_degree(self.inspected_node)}\n"
-                 f"Out-Degree:    {self.G.out_degree(self.inspected_node)}\n"
-                 f"Degree Cent.:  {safe_metric(nx.degree_centrality)}\n"
-                 f"Eigenvector:   {safe_metric(nx.eigenvector_centrality, max_iter=100, tol=1e-04)}\n"
-                 f"Betweenness:   {safe_metric(nx.betweenness_centrality)}")
-        
-        tk.Label(self.inspector_frame, text=stats, bg="#fff8e1", justify=tk.LEFT, font=("Consolas", 13)).pack(anchor="w", padx=5, pady=5)
-
-    def _create_scrollable_list_ui(self, parent, label_text, items, colors, click_callback, label_click_callback=None):
-        container = tk.Frame(parent, bg=parent.cget('bg'))
-        
-        if not items:
-             tk.Label(container, text=f"{label_text} (None)", bg=parent.cget('bg')).pack(anchor="w")
-             return container
-
-        lbl = tk.Label(container, text=f"{label_text} [", bg=parent.cget('bg'))
-        lbl.pack(side=tk.LEFT, anchor="n", pady=2)
-        
-        if label_click_callback:
-            lbl.config(fg="blue", cursor="hand2")
-            lbl.bind("<Button-1>", lambda e: label_click_callback())
-        
-        scroll_wrapper = tk.Frame(container, bg="white")
-        scroll_wrapper.pack(side=tk.LEFT, fill=tk.X, expand=True, anchor="n")
-
-        h_scroll = tk.Scrollbar(scroll_wrapper, orient=tk.HORIZONTAL)
-        h_scroll.pack(side=tk.BOTTOM, fill=tk.X)
-        
-        h_canvas = tk.Canvas(scroll_wrapper, height=25, bg="white", highlightthickness=0, xscrollcommand=h_scroll.set)
-        h_canvas.pack(side=tk.TOP, fill=tk.X, expand=True)
-        h_scroll.config(command=h_canvas.xview)
-        
-        inner_frame = tk.Frame(h_canvas, bg="white")
-        h_canvas.create_window((0, 0), window=inner_frame, anchor="nw")
-        
-        for i, item in enumerate(items):
-            txt_color = colors[i % len(colors)]
-            btn = tk.Label(inner_frame, text=str(item['label']), font=("Arial", 14, "bold"), 
-                           fg=txt_color, cursor="hand2", bg="white")
-            btn.pack(side=tk.LEFT)
-            btn.bind("<Button-1>", lambda e, idx=i: click_callback(idx))
-            
-            if item.get('tooltip'): CreateToolTip(btn, text=item['tooltip'])
-            if i < len(items) - 1: tk.Label(inner_frame, text=", ", bg="white").pack(side=tk.LEFT)
-        
-        tk.Label(inner_frame, text=" ]", bg="white").pack(side=tk.LEFT)
-        
-        inner_frame.update_idletasks()
-        h_canvas.config(scrollregion=h_canvas.bbox("all"))
-        
-        h_canvas.bind("<MouseWheel>", lambda e: h_canvas.xview_scroll(int(-1*(e.delta/120)), "units"))
-        return container
-
-    # Mode & Toolbar Logic 
-
-    def build_toolbar(self, parent):
-        r1 = tk.Frame(parent); r1.pack(fill=tk.X, pady=2)
-        
-        # History
-        tk.Button(r1, text="↶", command=self.undo, width=2).pack(side=tk.LEFT, padx=1)
-        tk.Button(r1, text="↷", command=self.redo, width=2).pack(side=tk.LEFT, padx=1)
-        
-        # View Filters
-        tk.Label(r1, text=" | Edges: ", fg="#555", font=("Arial", 15)).pack(side=tk.LEFT)
-        for name, mode in [("All", "ALL"), ("Required", config.EDGE_TYPE_HARD), ("Assistive", config.EDGE_TYPE_SOFT)]:
-             tk.Button(r1, text=name, command=lambda m=mode: self.set_edge_view(m), font=("Arial", 12)).pack(side=tk.LEFT, padx=1)
-        
-        self.view_btn = tk.Button(r1, text="👁 View: Free", command=self.toggle_view, bg="#e1bee7", font=("Arial", 12, "bold"))
-        self.view_btn.pack(side=tk.LEFT, padx=10)
-        
-        # Modes
-        for k, txt in [("SELECT", "➤ Select"), ("ADD_FUNC", "Add Func"), ("ADD_RES", "Add Res"), ("ADD_EDGE", "Connect"), ("DELETE", "Delete")]:
-            self.create_mode_button(r1, k, txt)
-        
-        # Row 2: File Ops
-        r2 = tk.Frame(parent); r2.pack(fill=tk.X, pady=2)
-        tk.Label(r2, text="| RAM:", fg="#888").pack(side=tk.LEFT, padx=5)
-        tk.Button(r2, text="Store Architecture", command=self.save_architecture_internal).pack(side=tk.LEFT, padx=2)
-        tk.Button(r2, text="Compare", command=self.open_comparison_dialog, bg="#ffd700").pack(side=tk.LEFT, padx=5)
-        
-        tk.Label(r2, text="| Disk:", fg="#888").pack(side=tk.LEFT, padx=5)
-        tk.Button(r2, text="Save JSON", command=self.initiate_save_json).pack(side=tk.LEFT, padx=2)
-        tk.Button(r2, text="Open JSON", command=self.load_from_json).pack(side=tk.LEFT, padx=2)
-        tk.Button(r2, text="📷 PNG", command=self.export_as_image, bg="#e0e0e0").pack(side=tk.LEFT, padx=2)
-        
-        self.update_mode_indicator()
-
-    def set_edge_view(self, mode):
-        self.edge_view_mode = mode
-        self.redraw()
-
-    def toggle_view(self):
-        is_free = (self.view_mode == config.VIEW_MODE_FREE)
-        self.view_mode = config.VIEW_MODE_JSAT if is_free else config.VIEW_MODE_FREE
-        self.view_btn.config(text="👁 View: JSAT Layers" if is_free else "👁 View: Free")
-        self.redraw()
-
-    def create_mode_button(self, parent, mode_key, text):
-        btn = tk.Button(parent, text=text, command=lambda: self.set_mode(mode_key))
-        btn.pack(side=tk.LEFT, padx=2)
-        self.mode_buttons[mode_key] = btn
-
-    def set_mode(self, m): 
-        self.mode = m
-        self.selected_node = None
-        self.status_label.config(text=f"Mode: {m}")
-        self.update_mode_indicator()
-        self.redraw()
-    
-    def update_mode_indicator(self):
-        for mode_key, btn in self.mode_buttons.items():
-            is_active = (mode_key == self.mode)
-            btn.config(bg="#87CEFA" if is_active else ("#ffcccc" if mode_key == "DELETE" else "#f0f0f0"), 
-                       relief=tk.SUNKEN if is_active else tk.RAISED)
-
-    # Node/Agent Helpers
-
-    def assign_agent_logic(self, node_id, agent_name):
-        current_data = self.G.nodes[node_id].get('agent', ["Unassigned"])
-        if not isinstance(current_data, list): current_data = [current_data]
-        
-        if "Unassigned" in current_data and agent_name != "Unassigned":
-            current_data.remove("Unassigned")
-            
-        if agent_name in current_data:
-            current_data.remove(agent_name)
-            if not current_data: current_data = ["Unassigned"]
-        else:
-            current_data.append(agent_name)
-            
-        self.G.nodes[node_id]['agent'] = current_data
-
-    def on_double_click(self, event):
-        # Check Node
-        node = self._get_node_at(event.x, event.y)
-        if node is not None:
-            self.open_node_editor(node)
-            return
-
-        # Check Edge
-        edge = self.find_edge_at(event.x, event.y)
-        if edge:
-            u, v = edge
-            curr = self.G.edges[u, v].get('type', config.EDGE_TYPE_HARD)
-            new_type = config.EDGE_TYPE_SOFT if curr == config.EDGE_TYPE_HARD else config.EDGE_TYPE_HARD
-            self.save_state()
-            self.G.edges[u, v]['type'] = new_type
-            self.redraw()
-
-    def _get_node_at(self, x, y):
-        r_screen = config.NODE_RADIUS * self.zoom
-        for n in self.G.nodes:
-            wx, wy = self.get_draw_pos(n)
-            sx, sy = self.to_screen(wx, wy)
-            if math.hypot(x - sx, y - sy) <= r_screen:
-                return n
-        return None
-
-    def open_node_editor(self, nid):
-        win = Toplevel(self.root)
-        win.title("Edit Node")
-        
-        tk.Label(win, text="Label:").pack()
-        e_lbl = tk.Entry(win)
-        e_lbl.insert(0, self.G.nodes[nid].get('label', ''))
-        e_lbl.pack()
-        
-        def save():
-            self.save_state()
-            self.G.nodes[nid]['label'] = e_lbl.get()
-            win.destroy()
-            self.redraw()
-            
-        tk.Button(win, text="Save", command=save).pack(pady=10)
-
-    def add_node(self, x, y):
-        nid = (max(self.G.nodes)+1) if self.G.nodes else 0
-        typ = "Function" if self.mode == "ADD_FUNC" else "Resource"
-        self.G.add_node(nid, pos=(x, y), type=typ, agent="Unassigned", 
-                        label=typ[0], layer=("Base Environment" if typ == "Resource" else "Distributed Work"))
-        self.redraw()
-
-    def create_agent(self):
-        n = simpledialog.askstring("Input", "Name:")
-        if n and n not in self.agents:
-            c = simpledialog.askstring("Input", "Color:") or "grey"
-            self.agents[n] = c
-            self.rebuild_dashboard()
-    
-    def edit_agent(self, agent_name):
-        win = Toplevel(self.root); win.title("Edit Agent"); win.geometry("250x220")
-        
-        tk.Label(win, text="Name:").pack(pady=(10, 0))
-        ne = tk.Entry(win); ne.insert(0, agent_name); ne.pack()
-        tk.Label(win, text="Color:").pack(pady=(10, 0))
-        ce = tk.Entry(win); ce.insert(0, self.agents[agent_name]); ce.pack()
-        
-        def save():
-            new_name, new_color = ne.get(), ce.get()
-            if new_name and new_color:
-                self.save_state()
-                del self.agents[agent_name]
-                self.agents[new_name] = new_color
-                
-                # Update nodes
-                for n, d in self.G.nodes(data=True): 
-                    ag = d.get('agent')
-                    if ag == agent_name: self.G.nodes[n]['agent'] = new_name # handle simple string
-                    elif isinstance(ag, list) and agent_name in ag: # handle list
-                        idx = ag.index(agent_name)
-                        ag[idx] = new_name
-                
-                self.redraw()
-                win.destroy()
-
-        def delete():
-            if agent_name == "Unassigned": return
-            if messagebox.askyesno("Delete", f"Delete '{agent_name}'?"):
-                self.save_state()
-                for n, d in self.G.nodes(data=True):
-                    ag = d.get('agent')
-                    if isinstance(ag, list):
-                        if agent_name in ag: ag.remove(agent_name)
-                        if not ag: self.G.nodes[n]['agent'] = ["Unassigned"]
-                del self.agents[agent_name]
-                self.redraw()
-                win.destroy()
-
-        tk.Button(win, text="Save", command=save, bg="#e1bee7").pack(pady=15, fill=tk.X, padx=20)
-        tk.Button(win, text="Delete", command=delete, bg="#ffcccc").pack(pady=5, fill=tk.X, padx=20)
-
-    # History & IO 
-
-    def save_state(self, state=None):
-        snapshot = state if state else self.G.copy()
-        self.undo_stack.append(snapshot)
-        if len(self.undo_stack) > config.HISTORY_LIMIT: self.undo_stack.pop(0)
-        self.redo_stack.clear()
+    # --- Event Wiring ---
     
-    def undo(self):
-        if self.undo_stack: 
-            self.redo_stack.append(self.G.copy())
-            self.G = self.undo_stack.pop()
-            self.redraw()
-            
-    def redo(self):
-        if self.redo_stack: 
-            self.undo_stack.append(self.G.copy())
-            self.G = self.redo_stack.pop()
-            self.redraw()
-
-    def export_as_image(self):
-        fp = filedialog.asksaveasfilename(defaultextension=".png", filetypes=[("PNG", "*.png")])
-        if not fp: return
-        try:
-            x, y = self.canvas.winfo_rootx(), self.canvas.winfo_rooty()
-            w, h = self.canvas.winfo_width(), self.canvas.winfo_height()
-            ImageGrab.grab(bbox=(x, y, x+w, y+h)).save(fp)
-            messagebox.showinfo("Success", f"Saved to {fp}")
-        except Exception as e:
-            messagebox.showerror("Error", str(e))
+    # Initialization
+    demo.load(render_plot, None, plot_output)
+    demo.load(update_node_dropdown, None, src_drop)
+    demo.load(update_node_dropdown, None, tgt_drop)
+    demo.load(update_node_dropdown, None, del_node_drop)
+    demo.load(update_node_dropdown, None, node_assign_drop)
+
+    # Visualization Triggers
+    vis_mode.change(render_plot, [vis_mode, edge_filter], plot_output)
+    edge_filter.change(render_plot, [vis_mode, edge_filter], plot_output)
+
+    # Editor Actions
+    btn_add_n.click(add_node_fn, [n_lbl, n_type, n_layer, n_agent], [plot_output, src_drop, log_output]) \
+        .then(update_node_dropdown, None, tgt_drop) \
+        .then(update_node_dropdown, None, del_node_drop) \
+        .then(update_node_dropdown, None, node_assign_drop)
+
+    btn_add_e.click(add_edge_fn, [src_drop, tgt_drop, e_type], [plot_output, src_drop, log_output])
     
-    def initiate_save_json(self):
-        fp = filedialog.asksaveasfilename(defaultextension=".json")
-        if not fp: return
-
-        # Prepare Data Structure
-        nodes_dict = {}
-        agent_authorities = {name: [] for name in self.agents}
-        
-        for nid, d in self.G.nodes(data=True):
-            lbl = d.get('label', f"Node_{nid}")
-            layer = d.get('layer', "Base Environment").replace(" ", "")
-            typ = d.get('type', "Function")
-            nodes_dict[lbl] = {"Type": f"{layer}{typ}", "UserData": lbl}
-            
-            ag_list = d.get('agent', ["Unassigned"])
-            if not isinstance(ag_list, list): ag_list = [ag_list]
-            for ag in ag_list:
-                if ag in agent_authorities: agent_authorities[ag].append(lbl)
-
-        edges_list = []
-        for u, v, d in self.G.edges(data=True): 
-            edges_list.append({
-                "Source": self.G.nodes[u].get('label', f"Node_{u}"),
-                "Target": self.G.nodes[v].get('label', f"Node_{v}"),
-                "UserData": {"type": d.get('type', config.EDGE_TYPE_HARD)}
-            })
-
-        final = {"GraphData": {
-            "Nodes": nodes_dict, 
-            "Edges": edges_list, 
-            "Agents": {name: {"Authority": auth} for name, auth in agent_authorities.items()}
-        }}
-
-        with open(fp, 'w') as f: json.dump(final, f, indent=4)
-
-    def load_from_json(self):
-        fp = filedialog.askopenfilename()
-        if not fp: return
-        try:
-            with open(fp, 'r', encoding='utf-8-sig') as f: data = json.load(f)["GraphData"]
-            
-            self.save_state()
-            self.G.clear()
-            self.agents = config.DEFAULT_AGENTS.copy()
-            
-            # 1. Load Agents
-            label_to_agents = {}
-            for ag_name, ag_data in data.get("Agents", {}).items():
-                if ag_name not in self.agents: 
-                    self.agents[ag_name] = "#" + ''.join([random.choice('ABCDEF89') for _ in range(6)])
-                for node_lbl in ag_data.get("Authority", []):
-                    label_to_agents.setdefault(node_lbl, []).append(ag_name)
-            
-            # 2. Load Nodes
-            label_to_id = {}
-            layer_counters = {l: 100 for l in config.LAYER_ORDER}
-            
-            for i, (lbl, props) in enumerate(data.get("Nodes", {}).items()):
-                n_type, n_layer = self._parse_node_attributes(props.get("Type", ""))
-                
-                # Position logic
-                pos_y = config.JSAT_LAYERS.get(n_layer, 550)
-                pos_x = layer_counters.get(n_layer, 100)
-                layer_counters[n_layer] = pos_x + 120
-                
-                assigned = label_to_agents.get(lbl, ["Unassigned"])
-                self.G.add_node(i, pos=(pos_x, pos_y), layer=n_layer, type=n_type, 
-                                label=props.get("UserData", lbl), agent=assigned)
-                label_to_id[lbl] = i
-
-            # 3. Load Edges
-            for e in data.get("Edges", []):
-                u, v = label_to_id.get(e["Source"]), label_to_id.get(e["Target"])
-                if u is not None and v is not None:
-                    self.G.add_edge(u, v, type=e.get("UserData", {}).get("type", config.EDGE_TYPE_HARD))
-            
-            self.redraw()
-        except Exception as e:
-            messagebox.showerror("Error", f"Failed to load: {e}")
-
-    def _parse_node_attributes(self, combined_string):
-        """Extracts (Type, Layer) from the specific JSON string format."""
-        n_type = "Resource"
-        layer = "Base Environment"
-        
-        if combined_string.endswith("Function"):
-            n_type = "Function"
-            prefix = combined_string.replace("Function", "")
-        elif combined_string.endswith("Resource"):
-            prefix = combined_string.replace("Resource", "")
-        else:
-            prefix = combined_string
-            
-        norm_prefix = prefix.lower().replace(" ", "")
-        for known in config.LAYER_ORDER:
-            if known.lower().replace(" ", "") == norm_prefix:
-                layer = known
-                break
-        return n_type, layer
+    btn_del.click(delete_node_fn, [del_node_drop], [plot_output, del_node_drop, log_output]) \
+        .then(update_node_dropdown, None, src_drop) \
+        .then(update_node_dropdown, None, tgt_drop)
 
-    # Comparative Analytics 
+    # Agent Actions
+    btn_create_ag.click(create_agent_fn, [new_ag_name, new_ag_col], [log_output, n_agent]) \
+        .then(lambda: gr.Dropdown(choices=list(session.agents.keys())), None, agent_assign_drop)
 
-    def save_architecture_internal(self):
-        n = simpledialog.askstring("Name", "Name:")
-        if n: self.saved_archs[n] = self.G.copy()
+    btn_assign.click(assign_agent_fn, [node_assign_drop, agent_assign_drop], [plot_output, log_output])
 
-    def open_comparison_dialog(self):
-        if not self.saved_archs: 
-            messagebox.showinfo("Info", "No saved architectures.")
-            return
+    # Analytics
+    btn_stats.click(calculate_stats_fn, None, stats_box)
 
-        w = Toplevel(self.root)
-        tk.Label(w, text="Select (Ctrl+Click)").pack()
-        lb = tk.Listbox(w, selectmode=tk.MULTIPLE)
-        lb.pack()
-        opts = ["Current"] + list(self.saved_archs.keys())
-        for o in opts: lb.insert(tk.END, o)
-        lb.selection_set(0)
+    # Comparison
+    btn_snap.click(snapshot_fn, snap_name, [log_output, snap_select])
+    btn_compare.click(compare_fn, snap_select, compare_table)
 
-        def go():
-            selected = [lb.get(i) for i in lb.curselection()]
-            graphs = [(n, self.G.copy() if n == "Current" else self.saved_archs[n].copy()) for n in selected]
-            w.destroy()
-            self.launch_compare_window(graphs)
-        tk.Button(w, text="Go", command=go).pack()
+    # I/O
+    btn_export.click(export_json_fn, None, json_out)
+    btn_import.click(load_json_fn, json_in, [plot_output, src_drop, log_output]) \
+        .then(update_node_dropdown, None, tgt_drop) \
+        .then(update_node_dropdown, None, del_node_drop)
 
-    def launch_compare_window(self, graph_list):
-        w = Toplevel(self.root)
-        w.title("Comparative Analytics")
-        w.geometry("1400x900")
-        
-        # UI Structure
-        top_frame = tk.Frame(w, bd=2, relief=tk.RAISED)
-        top_frame.pack(side=tk.TOP, fill=tk.X, padx=5, pady=5)
-        
-        # Header
-        h_row = tk.Frame(top_frame)
-        h_row.pack(fill=tk.X, pady=5)
-        tk.Label(h_row, text="Comparative Analytics", font=("Arial", 16, "bold")).pack(side=tk.LEFT, padx=10)
-        
-        paned = tk.PanedWindow(w, orient=tk.VERTICAL)
-        paned.pack(fill=tk.BOTH, expand=True, padx=5, pady=5)
-        
-        graph_container = tk.Frame(paned)
-        paned.add(graph_container, minsize=400)
-        
-        inspector_frame = tk.Frame(paned, bd=2, relief=tk.SUNKEN, bg="#f0f0f0")
-        paned.add(inspector_frame, minsize=200)
-
-        panels = []
-
-        # Helper: Highlight Trigger
-        def set_highlights(metric_name):
-            for _, panel in panels:
-                if metric_name == "Total Cycles":
-                    panel.set_highlights(metric_visualizations.get_cycle_highlights(panel.G))
-                elif metric_name == "Interdependence":
-                    panel.set_highlights(metric_visualizations.get_interdependence_highlights(panel.G))
-                elif metric_name == "Modularity":
-                    panel.set_highlights(metric_visualizations.get_modularity_highlights(panel.G))
-                else:
-                    panel.set_highlights([])
-
-        # Helper: Refresh Grid
-        def refresh_grid():
-            for child in top_frame.winfo_children(): 
-                if child != h_row: child.destroy()
-            
-            grid_f = tk.Frame(top_frame)
-            grid_f.pack(fill=tk.X, padx=10)
-            
-            # Headers
-            tk.Label(grid_f, text="Metric", font=("Arial", 12, "bold"), width=18, relief="solid", bd=1, bg="#e0e0e0").grid(row=0, column=0, sticky="nsew")
-            for i, (name, _) in enumerate(graph_list):
-                tk.Label(grid_f, text=name, font=("Arial", 12, "bold"), width=15, relief="solid", bd=1, bg="#e0e0e0").grid(row=0, column=i+1, sticky="nsew")
-            
-            metrics = ["Nodes", "Edges", "Density", "Cyclomatic Number", "Total Cycles", "Avg Cycle Length", "Interdependence", "Modularity", "Global Efficiency"]
-            
-            for r, m in enumerate(metrics):
-                # Row Header
-                lbl = tk.Label(grid_f, text=m, font=("Arial", 12), relief="solid", bd=1, anchor="w", padx=5)
-                lbl.grid(row=r+1, column=0, sticky="nsew")
-                if m in ["Total Cycles", "Interdependence", "Modularity"]:
-                    lbl.config(fg="blue", cursor="hand2")
-                    lbl.bind("<Button-1>", lambda e, name=m: set_highlights(name))
-
-                # Values
-                for c, (_, g) in enumerate(graph_list):
-                    val = calculate_metric(g, m)
-                    tk.Label(grid_f, text=str(val), font=("Arial", 12), relief="solid", bd=1).grid(row=r+1, column=c+1, sticky="nsew")
-
-        # Initialize Panels
-        for name, g in graph_list:
-            # We assume a dummy callback for inspector refresh as strict wiring isn't the focus of this refactor
-            p = InteractiveComparisonPanel(graph_container, g, name, config.NODE_RADIUS, self.agents, None, lambda x: None)
-            panels.append((name, p))
-            
-        refresh_grid()
-
-    # Utils 
-    
-    def get_layer_from_y(self, y):
-        closest, min_dist = None, 9999
-        for name, ly in config.JSAT_LAYERS.items():
-            dist = abs(y - ly)
-            if dist < min_dist:
-                min_dist, closest = dist, name
-        return closest
-
-    def on_sidebar_node_press(self, event, node_id):
-        self.sidebar_drag_data = node_id
-        self.root.config(cursor="hand2")
-
-    def on_sidebar_node_release(self, event):
-        self.root.config(cursor="")
-        if not self.sidebar_drag_data: return
-        
-        target = self.root.winfo_containing(event.x_root, event.y_root)
-        while target:
-            if hasattr(target, "agent_name"):
-                self.save_state()
-                self.assign_agent_logic(self.sidebar_drag_data, target.agent_name)
-                self.redraw()
-                break
-            target = target.master
-            if target == self.root: break
-        self.sidebar_drag_data = None
-
-    def find_edge_at(self, x, y):
-        threshold = 8 
-        for u, v in self.G.edges():
-            wx1, wy1 = self.get_draw_pos(u)
-            wx2, wy2 = self.get_draw_pos(v)
-            sx1, sy1 = self.to_screen(wx1, wy1)
-            sx2, sy2 = self.to_screen(wx2, wy2)
-            
-            # Distance from point to segment
-            dx, dy = sx2 - sx1, sy2 - sy1
-            if dx == 0 and dy == 0: dist = math.hypot(x - sx1, y - sy1)
-            else:
-                t = ((x - sx1) * dx + (y - sy1) * dy) / (dx*dx + dy*dy)
-                t = max(0, min(1, t))
-                dist = math.hypot(x - (sx1 + t * dx), y - (sy1 + t * dy))
-            
-            if dist < threshold: return (u, v)
-        return None
-
-    def trigger_visual_analytics(self, mode):
-        if self.active_vis_mode == mode:
-            self.current_highlights = []
-            self.active_vis_mode = None
-        else:
-            self.active_vis_mode = mode
-            if mode == "cycles":
-                self.current_highlights = metric_visualizations.get_cycle_highlights(self.G)
-            elif mode == "interdependence":
-                self.current_highlights = metric_visualizations.get_interdependence_highlights(self.G)
-            elif mode == "modularity":
-                self.current_highlights = metric_visualizations.get_modularity_highlights(self.G)
-        self.redraw()
-    
-    def trigger_single_cycle_vis(self, index, graph_source=None):
-        target = graph_source if graph_source else self.G
-        hl = metric_visualizations.get_single_cycle_highlight(target, index)
-        if graph_source: return hl
-        
-        self.current_highlights = hl
-        self.active_vis_mode = f"cycle_{index}"
-        self.redraw()
-
-    def trigger_single_modularity_vis(self, index, graph_source=None):
-        target = graph_source if graph_source else self.G
-        hl = metric_visualizations.get_single_modularity_highlight(target, index)
-        if graph_source: return hl
-        
-        self.current_highlights = hl
-        self.active_vis_mode = f"mod_group_{index}"
-        self.redraw()
+if __name__ == "__main__":
+    demo.launch()