Create ui_flowstudio.py

app_02/ui_flowstudio.py

@@ -3,6 +3,7 @@ import gradio as gr
 from engine_03.flow.graph_models import table_to_flowgraph
 from engine_03.flow.mermaid_renderer import build_mermaid
 from engine_03.flow.simulator import simulate_flowgraph
+from engine_03.flow.sql_adapter import apply_command
 
 
 def build_flowstudio_tab():
@@ -10,34 +11,35 @@ def build_flowstudio_tab():
         """
         ## 🧩 MindsEye Flow Studio
 
-        - Define **nodes** (id, label, type).  
-        - Define **edges** (source, target, label).  
+        - Define **nodes** (id, label, type, style).  
+        - Define **edges** (source, target, label, style).  
         - Click **Update Diagram** to generate a Mermaid-style graph.  
-        - Click **Simulate Flow** to walk the graph and see an execution log.
+        - Click **Simulate Flow** to walk the graph and see an execution log.  
+        - Use the **Flow Command** box to modify the graph with a tiny SQL-like syntax.
         """
     )
 
     sample_nodes = [
-        ["event_in", "Incoming Event", "event"],
-        ["handler", "Handle Event / Transform", "function"],
-        ["log", "Log to Ledger (conceptual)", "function"],
-        ["out", "Emit Output", "output"],
+        ["event_in", "Incoming Event", "event", ""],
+        ["handler", "Handle Event / Transform", "function", ""],
+        ["log", "Log to Ledger (conceptual)", "function", ""],
+        ["out", "Emit Output", "output", ""],
     ]
     sample_edges = [
-        ["event_in", "handler", ""],
-        ["handler", "log", ""],
-        ["log", "out", ""],
+        ["event_in", "handler", "", ""],
+        ["handler", "log", "", ""],
+        ["log", "out", "", ""],
     ]
 
     with gr.Row():
         with gr.Column(scale=2):
             gr.Markdown("### Nodes")
             nodes_df = gr.Dataframe(
-                headers=["id", "label", "type"],
-                datatype=["str", "str", "str"],
+                headers=["id", "label", "type", "style"],
+                datatype=["str", "str", "str", "str"],
                 value=sample_nodes,
                 row_count=(4, "dynamic"),
-                col_count=3,
+                col_count=4,
                 interactive=True,
                 label="Nodes Table",
             )
@@ -45,11 +47,11 @@ def build_flowstudio_tab():
         with gr.Column(scale=2):
             gr.Markdown("### Edges")
             edges_df = gr.Dataframe(
-                headers=["source", "target", "label"],
-                datatype=["str", "str", "str"],
+                headers=["source", "target", "label", "style"],
+                datatype=["str", "str", "str", "str"],
                 value=sample_edges,
                 row_count=(3, "dynamic"),
-                col_count=3,
+                col_count=4,
                 interactive=True,
                 label="Edges Table",
             )
@@ -67,6 +69,31 @@ def build_flowstudio_tab():
         label="Execution Log",
     )
 
+    gr.Markdown("### Flow Command (SQL-ish)")
+
+    command_box = gr.Textbox(
+        label="Command",
+        placeholder=(
+            'Examples:\n'
+            '  ADD NODE id=event_in label="Incoming Event" type=event\n'
+            '  ADD EDGE source=event_in target=handler label="to handler"\n'
+            '  DELETE NODE id=log\n'
+            '  DELETE EDGE source=handler target=log\n'
+            '  STYLE NODE id=handler style="fill:#0ea5e9,stroke:#0369a1"\n'
+            '  STYLE EDGE source=handler target=log style="stroke:#f97316,stroke-width:2px"'
+        ),
+        lines=4,
+    )
+
+    run_cmd_btn = gr.Button("⚙️ Run Command")
+
+    command_output = gr.Markdown(
+        value="Command output will appear here.",
+        label="Command Output",
+    )
+
+    # Core functions
+
     def update_diagram(nodes, edges):
         flow = table_to_flowgraph(nodes, edges)
         return build_mermaid(flow)
@@ -75,5 +102,18 @@ def build_flowstudio_tab():
         flow = table_to_flowgraph(nodes, edges)
         return simulate_flowgraph(flow)
 
+    def run_command(cmd, nodes, edges):
+        new_nodes, new_edges, msg = apply_command(cmd, nodes, edges)
+        flow = table_to_flowgraph(new_nodes, new_edges)
+        new_diagram = build_mermaid(flow)
+        # Clear the command box after execution
+        return "", new_nodes, new_edges, msg, new_diagram
+
     update_btn.click(update_diagram, [nodes_df, edges_df], [diagram_md])
     simulate_btn.click(simulate, [nodes_df, edges_df], [sim_log])
+
+    run_cmd_btn.click(
+        run_command,
+        [command_box, nodes_df, edges_df],
+        [command_box, nodes_df, edges_df, command_output, diagram_md],
+    )