From c8504686d184e82d2bfcee7f7aee434594091caa Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 15 Aug 2025 13:57:48 +0530
Subject: [PATCH 01/12] improved Data Tab and added non working backend this
 commit have lots of issues, heavily used LLM code, just saving code

---
 DoodleBUGS/.gitignore                         |   1 +
 DoodleBUGS/public/examples/rats/data.json     | 280 ++++--------------
 DoodleBUGS/runtime/Project.toml               |   9 +
 DoodleBUGS/runtime/server.jl                  | 208 +++++++++++++
 .../src/components/layouts/MainLayout.vue     | 266 ++++++++++++-----
 .../src/components/layouts/TheNavbar.vue      |  52 +++-
 .../left-sidebar/ExecutionSettingsPanel.vue   |  98 ++++++
 .../src/components/panels/DataInputPanel.vue  | 226 ++++++++++----
 .../right-sidebar/ExecutionPanel.vue          | 271 +++++++++++++++++
 .../src/composables/useGraphValidator.ts      |   2 +
 DoodleBUGS/src/stores/dataStore.ts            | 271 +++++++++++++----
 DoodleBUGS/src/stores/executionStore.ts       |  86 ++++++
 DoodleBUGS/src/stores/uiStore.ts              |  17 +-
 13 files changed, 1363 insertions(+), 424 deletions(-)
 create mode 100644 DoodleBUGS/runtime/Project.toml
 create mode 100644 DoodleBUGS/runtime/server.jl
 create mode 100644 DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
 create mode 100644 DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
 create mode 100644 DoodleBUGS/src/stores/executionStore.ts

diff --git a/DoodleBUGS/.gitignore b/DoodleBUGS/.gitignore
index 4aa60c007..e02a85b6d 100644
--- a/DoodleBUGS/.gitignore
+++ b/DoodleBUGS/.gitignore
@@ -10,6 +10,7 @@ digest.txt
 root.txt
 src.txt
 public.txt
+runtime.txt
 
 node_modules
 .DS_Store
diff --git a/DoodleBUGS/public/examples/rats/data.json b/DoodleBUGS/public/examples/rats/data.json
index c91f4cac4..268812441 100644
--- a/DoodleBUGS/public/examples/rats/data.json
+++ b/DoodleBUGS/public/examples/rats/data.json
@@ -1,227 +1,57 @@
 {
-    "data": {
-        "N": 30,
-        "T": 5,
-        "x": [
-            8.0,
-            15.0,
-            22.0,
-            29.0,
-            36.0
-        ],
-        "xbar": 22,
-        "Y": [
-            [
-                151,
-                199,
-                246,
-                283,
-                320
-            ],
-            [
-                145,
-                199,
-                249,
-                293,
-                354
-            ],
-            [
-                147,
-                214,
-                263,
-                312,
-                328
-            ],
-            [
-                155,
-                200,
-                237,
-                272,
-                297
-            ],
-            [
-                135,
-                188,
-                230,
-                280,
-                323
-            ],
-            [
-                159,
-                210,
-                252,
-                298,
-                331
-            ],
-            [
-                141,
-                189,
-                231,
-                275,
-                305
-            ],
-            [
-                159,
-                201,
-                248,
-                297,
-                338
-            ],
-            [
-                177,
-                220,
-                260,
-                309,
-                331
-            ],
-            [
-                134,
-                182,
-                220,
-                260,
-                295
-            ],
-            [
-                160,
-                208,
-                261,
-                313,
-                352
-            ],
-            [
-                143,
-                188,
-                220,
-                273,
-                314
-            ],
-            [
-                154,
-                200,
-                244,
-                289,
-                325
-            ],
-            [
-                161,
-                218,
-                266,
-                304,
-                340
-            ],
-            [
-                142,
-                184,
-                223,
-                262,
-                298
-            ],
-            [
-                156,
-                203,
-                243,
-                283,
-                317
-            ],
-            [
-                157,
-                212,
-                259,
-                307,
-                336
-            ],
-            [
-                152,
-                203,
-                245,
-                286,
-                324
-            ],
-            [
-                154,
-                205,
-                253,
-                298,
-                334
-            ],
-            [
-                139,
-                190,
-                225,
-                267,
-                302
-            ],
-            [
-                146,
-                196,
-                247,
-                289,
-                321
-            ],
-            [
-                161,
-                215,
-                254,
-                293,
-                332
-            ],
-            [
-                153,
-                207,
-                256,
-                303,
-                345
-            ],
-            [
-                149,
-                198,
-                245,
-                287,
-                324
-            ],
-            [
-                144,
-                192,
-                242,
-                289,
-                326
-            ],
-            [
-                162,
-                211,
-                262,
-                315,
-                357
-            ],
-            [
-                157,
-                202,
-                242,
-                281,
-                316
-            ],
-            [
-                150,
-                204,
-                256,
-                298,
-                335
-            ],
-            [
-                151,
-                202,
-                248,
-                290,
-                325
-            ],
-            [
-                163,
-                216,
-                265,
-                307,
-                342
-            ]
-        ]
-    },
-    "inits": {}
+  "data": {
+    "N": 30,
+    "T": 5,
+    "x": [8.0, 15.0, 22.0, 29.0, 36.0],
+    "xbar": 22,
+    "Y": [
+      [151, 199, 246, 283, 320],
+      [145, 199, 249, 293, 354],
+      [147, 214, 263, 312, 328],
+      [155, 200, 237, 272, 297],
+      [135, 188, 230, 280, 323],
+      [159, 210, 252, 298, 331],
+      [141, 189, 231, 275, 305],
+      [159, 201, 248, 297, 338],
+      [177, 236, 285, 350, 376],
+      [134, 182, 220, 260, 296],
+      [160, 208, 261, 313, 352],
+      [143, 188, 220, 273, 314],
+      [154, 200, 244, 289, 325],
+      [171, 221, 270, 326, 358],
+      [163, 216, 242, 281, 312],
+      [160, 207, 248, 288, 324],
+      [142, 187, 234, 280, 316],
+      [156, 203, 243, 283, 317],
+      [157, 212, 259, 307, 336],
+      [152, 203, 246, 286, 321],
+      [154, 205, 253, 298, 334],
+      [139, 190, 225, 267, 302],
+      [146, 191, 229, 272, 302],
+      [157, 211, 250, 285, 323],
+      [132, 185, 237, 286, 331],
+      [160, 207, 257, 303, 345],
+      [169, 216, 261, 295, 333],
+      [157, 205, 248, 289, 316],
+      [137, 180, 219, 258, 291],
+      [153, 200, 244, 286, 324]
+    ]
+  },
+  "inits": {
+    "alpha": [
+      250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0,
+      250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0,
+      250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0, 250.0
+    ],
+    "beta": [
+      6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0,
+      6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0,
+      6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0, 6.0
+    ],
+    "alpha.c": 150.0,
+    "beta.c": 10.0,
+    "tau.c": 1.0,
+    "alpha.tau": 1.0,
+    "beta.tau": 1.0
+  }
 }
\ No newline at end of file
diff --git a/DoodleBUGS/runtime/Project.toml b/DoodleBUGS/runtime/Project.toml
new file mode 100644
index 000000000..4fe501085
--- /dev/null
+++ b/DoodleBUGS/runtime/Project.toml
@@ -0,0 +1,9 @@
+[deps]
+AdvancedHMC = "0bf59076-c3b1-5ca4-86bd-e02cd72cde3d"
+HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
+JSON3 = "0f8b85d8-7281-11e9-16c2-39a750bddbf1"
+JuliaBUGS = "ba9fb4c0-828e-4473-b6a1-cd2560fee5bf"
+LogDensityProblemsAD = "996a588d-648d-4e1f-a8f0-a84b347e47b1"
+MCMCChains = "c7f686f2-ff18-58e9-bc7b-31028e88f75d"
+Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
+Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
new file mode 100644
index 000000000..d8be77ad5
--- /dev/null
+++ b/DoodleBUGS/runtime/server.jl
@@ -0,0 +1,208 @@
+# File: server.jl
+# This server is designed to be a generic executor.
+# It creates a temporary, sandboxed Julia environment for each request,
+# installs specified dependencies, and runs the BUGS model.
+
+using HTTP
+using JSON3
+using Pkg
+
+# Define CORS headers to allow cross-origin requests from the web app.
+const CORS_HEADERS = [
+    "Access-Control-Allow-Origin" => "*",
+    "Access-Control-Allow-Headers" => "Content-Type",
+    "Access-Control-Allow-Methods" => "POST, GET, OPTIONS",
+]
+
+# A simple middleware to handle CORS preflight (OPTIONS) requests and add headers to all responses.
+function cors_handler(handler)
+    return function(req::HTTP.Request)
+        if HTTP.method(req) == "OPTIONS"
+            return HTTP.Response(200, CORS_HEADERS)
+        else
+            response = handler(req)
+            append!(response.headers, CORS_HEADERS)
+            return response
+        end
+    end
+end
+
+# A simple handler for the health check endpoint.
+function health_check_handler(req::HTTP.Request)
+    return HTTP.Response(200, ["Content-Type" => "application/json"], JSON3.write(Dict("status" => "ok")))
+end
+
+
+# The main handler for processing model execution requests.
+function run_model_handler(req::HTTP.Request)
+    logs = String[]
+    push!(logs, "Backend processing started.")
+    
+    # Create a temporary, sandboxed environment for this run
+    tmp_dir = mktempdir()
+    push!(logs, "Created temporary sandbox environment at: $(tmp_dir)")
+
+    try
+        # Activate the sandbox project environment
+        Pkg.activate(tmp_dir)
+        
+        # Parse the JSON body from the request
+        body = JSON3.read(String(req.body))
+        model_code = body.model_code
+        data_string = body.data_string
+        inits_string = body.inits_string
+        dependencies = body.dependencies
+        settings = get(body, :settings, JSON3.Object())
+
+        push!(logs, "Request body parsed successfully.")
+
+        # Add specified dependencies to the sandbox environment
+        push!(logs, "Adding $(length(dependencies)) dependencies to sandbox...")
+        for dep in dependencies
+            if isempty(dep.version)
+                Pkg.add(dep.name)
+            else
+                Pkg.add(name=dep.name, version=dep.version)
+            end
+        end
+        push!(logs, "All dependencies installed in sandbox.")
+
+        # Write the user's BUGS model code to a file in the sandbox
+        model_path = joinpath(tmp_dir, "model.bugs")
+        write(model_path, model_code)
+        
+        # The core logic will be executed in a separate, sandboxed Julia process
+        # to ensure isolation and use the correct project environment.
+        script_path = joinpath(tmp_dir, "run_script.jl")
+        
+        # This script contains the actual model compilation and sampling logic.
+        # It will be executed by the sandboxed Julia process.
+        run_script_content = """
+        using JuliaBUGS
+        using LogDensityProblemsAD
+        using AdvancedHMC
+        using MCMCChains
+        using Random
+        using JSON3
+
+        try
+            # Define the model from the string
+            model_def = JuliaBUGS.@bugs_str(\"\"\"
+            $(model_code)
+            \"\"\", true, false)
+
+            # Parse data and inits from strings into NamedTuples
+            data_nt = eval(Meta.parse(\"\"\"
+            $(data_string)
+            \"\"\"))
+            inits_nt = eval(Meta.parse(\"\"\"
+            $(inits_string)
+            \"\"\"))
+
+            # Compile the model
+            model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
+
+            # Wrap for AD
+            ad_model = ADgradient(:ReverseDiff, model; compile=Val(true))
+
+            # Sampler settings
+            n_samples = $(get(settings, :n_samples, 1000))
+            n_adapts = $(get(settings, :n_adapts, 1000))
+            
+            # Run sampler
+            D = LogDensityProblems.dimension(model)
+            initial_θ = rand(D)
+            samples = AbstractMCMC.sample(
+                ad_model,
+                NUTS(0.8),
+                n_samples;
+                n_adapts=n_adapts,
+                chain_type=Chains,
+                init_params=initial_θ,
+                discard_initial=n_adapts
+            )
+
+            # Format results
+            summary_stats = summary(samples)
+            results_json = [Dict(pairs(row)) for row in eachrow(summary_stats)]
+            
+            # Write results to a file
+            open("results.json", "w") do f
+                JSON3.write(f, Dict("success" => true, "results" => results_json))
+            end
+
+        catch e
+            open("results.json", "w") do f
+                JSON3.write(f, Dict("success" => false, "error" => sprint(showerror, e)))
+            end
+        end
+        """
+        write(script_path, run_script_content)
+        push!(logs, "Generated execution script in sandbox.")
+
+        # Execute the script in the sandboxed environment
+        # --project points to the sandbox, ensuring it uses the correct dependencies.
+        julia_executable = joinpath(Sys.BINDIR, "julia")
+        cmd = `$(julia_executable) --project=$(tmp_dir) $(script_path)`
+        
+        push!(logs, "Executing script in sandboxed process...")
+        run(cmd)
+        push!(logs, "Script execution finished.")
+
+        # Read the results generated by the script
+        results_path = joinpath(tmp_dir, "results.json")
+        results_content = JSON3.read(read(results_path, String))
+
+        # Check if the script execution was successful
+        if !results_content.success
+            throw(ErrorException(results_content.error))
+        end
+
+        # Read generated project files to send back to the user
+        project_toml_content = read(joinpath(tmp_dir, "Project.toml"), String)
+        manifest_toml_content = read(joinpath(tmp_dir, "Manifest.toml"), String)
+        push!(logs, "Successfully retrieved results and project files.")
+
+        # Prepare the final successful response
+        response_body = Dict(
+            "success" => true,
+            "results" => results_content.results,
+            "logs" => logs,
+            "files" => [
+                Dict("name" => "model.bugs", "content" => model_code),
+                Dict("name" => "run_script.jl", "content" => run_script_content),
+                Dict("name" => "Project.toml", "content" => project_toml_content),
+                Dict("name" => "Manifest.toml", "content" => manifest_toml_content)
+            ]
+        )
+        return HTTP.Response(200, ["Content-Type" => "application/json"], JSON3.write(response_body))
+
+    catch e
+        # If any error occurs during the process, capture and return it
+        push!(logs, "An error occurred: $(sprint(showerror, e))")
+        @error "Error during model execution" exception=(e, catch_backtrace())
+
+        error_response = Dict(
+            "success" => false,
+            "error" => sprint(showerror, e),
+            "logs" => logs
+        )
+        return HTTP.Response(500, ["Content-Type" => "application/json"], JSON3.write(error_response))
+    
+    finally
+        # Clean up the temporary directory
+        rm(tmp_dir, recursive=true)
+        # It's good practice to reactivate the main project environment
+        Pkg.activate()
+    end
+end
+
+# Define the router and register the endpoints
+const ROUTER = HTTP.Router()
+HTTP.register!(ROUTER, "GET", "/api/health", health_check_handler)
+HTTP.register!(ROUTER, "POST", "/api/run_model", run_model_handler)
+
+# Start the server with the CORS handler
+port = 8081
+println("Starting JuliaBUGS backend server on http://localhost:$(port)...")
+HTTP.serve(cors_handler(ROUTER), "0.0.0.0", port)
diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index 02fb4c5c0..01459104e 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -1,14 +1,18 @@
+<!-- src/components/layouts/MainLayout.vue -->
 <script setup lang="ts">
 import { ref, computed, onUnmounted, watch, onMounted, nextTick } from 'vue';
 import type { StyleValue } from 'vue';
 import { storeToRefs } from 'pinia';
+import type { Core, LayoutOptions } from 'cytoscape';
 import GraphEditor from '../canvas/GraphEditor.vue';
 import ProjectManager from '../left-sidebar/ProjectManager.vue';
 import NodePalette from '../left-sidebar/NodePalette.vue';
+import ExecutionSettingsPanel from '../left-sidebar/ExecutionSettingsPanel.vue';
 import DataInputPanel from '../panels/DataInputPanel.vue';
 import NodePropertiesPanel from '../right-sidebar/NodePropertiesPanel.vue';
 import CodePreviewPanel from '../panels/CodePreviewPanel.vue';
 import JsonEditorPanel from '../right-sidebar/JsonEditorPanel.vue';
+import ExecutionPanel from '../right-sidebar/ExecutionPanel.vue';
 import TheNavbar from './TheNavbar.vue';
 import BaseModal from '../common/BaseModal.vue';
 import BaseInput from '../ui/BaseInput.vue';
@@ -21,8 +25,10 @@ import { useProjectStore } from '../../stores/projectStore';
 import { useGraphStore } from '../../stores/graphStore';
 import { useUiStore } from '../../stores/uiStore';
 import { useDataStore } from '../../stores/dataStore';
+import { useExecutionStore } from '../../stores/executionStore';
 import { useGraphInstance } from '../../composables/useGraphInstance';
 import { useGraphValidator } from '../../composables/useGraphValidator';
+import { useBugsCodeGenerator } from '../../composables/useBugsCodeGenerator';
 import type { GraphElement, NodeType, PaletteItemType, ExampleModel } from '../../types';
 
 interface ExportOptions {
@@ -38,12 +44,14 @@ const projectStore = useProjectStore();
 const graphStore = useGraphStore();
 const uiStore = useUiStore();
 const dataStore = useDataStore();
+const executionStore = useExecutionStore();
 
 const { parsedGraphData } = storeToRefs(dataStore);
 const { elements, selectedElement, updateElement, deleteElement } = useGraphElements();
+const { generatedCode } = useBugsCodeGenerator(elements);
 const { getCyInstance } = useGraphInstance();
 const { validateGraph, validationErrors } = useGraphValidator(elements, parsedGraphData);
-
+const { backendUrl, isConnected, isConnecting, isExecuting, dependencies, samplerSettings } = storeToRefs(executionStore);
 const { activeLeftTab, isLeftSidebarOpen, leftSidebarWidth, isRightSidebarOpen, rightSidebarWidth } = storeToRefs(uiStore);
 
 const currentMode = ref<string>('select');
@@ -60,6 +68,8 @@ const showNewGraphModal = ref(false);
 const newGraphName = ref('');
 const showAboutModal = ref(false);
 const showValidationModal = ref(false);
+const showConnectModal = ref(false);
+const tempBackendUrl = ref(backendUrl.value || 'http://localhost:8081');
 
 const showExportModal = ref(false);
 const currentExportType = ref<'png' | 'jpg' | 'svg' | null>(null);
@@ -68,7 +78,6 @@ onMounted(async () => {
   projectStore.loadProjects();
 
   if (projectStore.projects.length === 0) {
-    // If no projects exist, create a default one and load the 'rats' example
     projectStore.createProject('Default Project');
     if (projectStore.currentProjectId) {
       await handleLoadExample('rats');
@@ -157,7 +166,7 @@ const startResizeRight = () => {
 const doResizeRight = (event: MouseEvent) => {
   if (isResizingRight.value) {
     const newWidth = window.innerWidth - event.clientX;
-    rightSidebarWidth.value = Math.max(280, Math.min(newWidth, 600));
+    rightSidebarWidth.value = Math.max(400, Math.min(newWidth, 800));
   }
 };
 
@@ -212,19 +221,15 @@ const handleDeleteElement = (elementId: string) => {
 const handleGraphLayout = (layoutName: string) => {
   const cy = getCyInstance();
   if (!cy) return;
-
-  // The 'any' type is used here because each layout extension (dagre, fcose, etc.)
-  // has its own specific options that are not part of the base Cytoscape 'LayoutOptions' type.
-  // Using a more specific type would require creating complex union types for all possible layout options.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layoutOptionsMap: Record<string, any> = {
-    dagre: { name: 'dagre', animate: true, animationDuration: 500, fit: true, padding: 30 },
-    fcose: { name: 'fcose', animate: true, animationDuration: 500, fit: true, padding: 30, randomize: false, quality: 'proof' },
-    cola: { name: 'cola', animate: true, fit: true, padding: 30, refresh: 1, avoidOverlap: true, infinite: false, centerGraph: true, flow: { axis: 'y', minSeparation: 30 }, handleDisconnected: false, randomize: false },
-    klay: { name: 'klay', animate: true, animationDuration: 500, fit: true, padding: 30, klay: { direction: 'RIGHT', edgeRouting: 'SPLINES', nodePlacement: 'LINEAR_SEGMENTS' } },
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  const layoutOptionsMap: Record<string, LayoutOptions> = {
+    dagre: { name: 'dagre', animate: true, animationDuration: 500, fit: true, padding: 30 } as any,
+    fcose: { name: 'fcose', animate: true, animationDuration: 500, fit: true, padding: 30, randomize: false, quality: 'proof' } as any,
+    cola: { name: 'cola', animate: true, fit: true, padding: 30, refresh: 1, avoidOverlap: true, infinite: false, centerGraph: true, flow: { axis: 'y', minSeparation: 30 }, handleDisconnected: false, randomize: false } as any,
+    klay: { name: 'klay', animate: true, animationDuration: 500, fit: true, padding: 30, klay: { direction: 'RIGHT', edgeRouting: 'SPLINES', nodePlacement: 'LINEAR_SEGMENTS' } } as any,
     preset: { name: 'preset' }
   };
-
+  /* eslint-enable @typescript-eslint/no-explicit-any */
   const options = layoutOptionsMap[layoutName] || layoutOptionsMap.preset;
   cy.layout(options).run();
 };
@@ -260,8 +265,6 @@ const createNewGraph = () => {
 const saveCurrentGraph = () => {
   if (graphStore.currentGraphId) {
     graphStore.saveGraph(graphStore.currentGraphId, graphStore.graphContents.get(graphStore.currentGraphId)!);
-  } else {
-    console.warn("No graph currently selected to save.");
   }
 };
 
@@ -277,10 +280,7 @@ const triggerDownload = (blob: Blob, fileName: string) => {
 }
 
 const handleExportJson = () => {
-  if (!graphStore.currentGraphId) {
-    alert("Please select a graph to export.");
-    return;
-  }
+  if (!graphStore.currentGraphId) return;
   const elementsToExport = graphStore.currentGraphElements;
   const jsonString = JSON.stringify(elementsToExport, null, 2);
   const blob = new Blob([jsonString], { type: 'application/json' });
@@ -289,81 +289,157 @@ const handleExportJson = () => {
 };
 
 const openExportModal = (format: 'png' | 'jpg' | 'svg') => {
-  if (!graphStore.currentGraphId) {
-    alert("Please select a graph to export.");
-    return;
-  }
+  if (!graphStore.currentGraphId) return;
   currentExportType.value = format;
   showExportModal.value = true;
 };
 
 const handleConfirmExport = (options: ExportOptions) => {
-  const cy = getCyInstance();
+  const cy = getCyInstance() as Core & { svg: (options: object) => string; jpg: (options: object) => Blob; png: (options: object) => Blob; };
   if (!cy || !currentExportType.value) return;
-
   const fileName = `${activeGraphName.value || 'graph'}.${currentExportType.value}`;
-
   try {
     let blob: Blob;
     if (currentExportType.value === 'svg') {
       const svgOptions = { bg: options.bg, full: options.full, scale: options.scale };
-      const svgContent = cy.svg(svgOptions);
-      blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
-    } else if (currentExportType.value === 'jpg') {
-      const jpgOptions = { ...options, output: 'blob' as const };
-      blob = cy.jpg(jpgOptions);
+      blob = new Blob([cy.svg(svgOptions)], { type: 'image/svg+xml;charset=utf-8' });
     } else {
-      const pngOptions = { ...options, output: 'blob' as const };
-      blob = cy.png(pngOptions);
+      blob = cy[currentExportType.value]({ ...options, output: 'blob' });
     }
     triggerDownload(blob, fileName);
   } catch (err) {
     console.error(`Failed to export ${currentExportType.value}:`, err);
-    alert(`An error occurred while exporting the graph. Please check the console.`);
   }
 };
 
 const handleLoadExample = async (exampleKey: string) => {
-  if (!projectStore.currentProjectId) {
-    alert("Please create or select a project before loading an example.");
-    return;
-  }
-
+  if (!projectStore.currentProjectId) return;
   try {
     const baseUrl = import.meta.env.BASE_URL;
-    const modelUrl = `${baseUrl}examples/${exampleKey}/model.json`;
-    const dataUrl = `${baseUrl}examples/${exampleKey}/data.json`;
-
-    const [modelResponse, dataResponse] = await Promise.all([
-      fetch(modelUrl),
-      fetch(dataUrl)
-    ]);
 
-    if (!modelResponse.ok) {
-      throw new Error(`Could not fetch example model: ${modelResponse.statusText}`);
-    }
+    const modelResponse = await fetch(`${baseUrl}examples/${exampleKey}/model.json`);
+    if (!modelResponse.ok) throw new Error(`Could not fetch example model: ${modelResponse.statusText}`);
     const modelData: ExampleModel = await modelResponse.json();
 
     const newGraphMeta = projectStore.addGraphToProject(projectStore.currentProjectId, modelData.name);
+    if (!newGraphMeta) return;
+
+    graphStore.updateGraphElements(newGraphMeta.id, modelData.graphJSON);
+    
+    const jsonDataResponse = await fetch(`${baseUrl}examples/${exampleKey}/data.json`);
+    if (jsonDataResponse.ok) {
+      const fullData = await jsonDataResponse.json();
+      
+      // Temporarily set mode to json to ensure correct data ingestion
+      dataStore.inputMode = 'json';
+      dataStore.dataString = JSON.stringify(fullData.data || {}, null, 2);
+      dataStore.initsString = JSON.stringify(fullData.inits || {}, null, 2);
 
-    if (newGraphMeta) {
-      graphStore.updateGraphElements(newGraphMeta.id, modelData.graphJSON);
-      if (dataResponse.ok) {
-        const data = await dataResponse.json();
-        dataStore.currentGraphDataString = JSON.stringify(data, null, 2);
-      } else {
-        console.error(`Failed to load example data: ${dataResponse.statusText}`);
-        alert("Failed to load the example data. See console for details.");
+    } else {
+      const juliaDataResponse = await fetch(`${baseUrl}examples/${exampleKey}/data.jl`);
+      if (juliaDataResponse.ok) {
+        const juliaText = await juliaDataResponse.text();
+        const dataMatch = juliaText.match(/data\s*=\s*(\([\s\S]*?\))\s*/m);
+        const initsMatch = juliaText.match(/inits\s*=\s*(\([\s\S]*?\))\s*/m);
+        
+        // Set the mode to julia before assigning julia strings
+        dataStore.inputMode = 'julia';
+        dataStore.dataString = dataMatch ? dataMatch[1] : '()';
+        dataStore.initsString = initsMatch ? initsMatch[1] : '()';
       }
     }
+    
+    // Set the default view to Julia and save the final state
+    dataStore.inputMode = 'julia';
+    dataStore.updateGraphData(newGraphMeta.id, dataStore.getGraphData(newGraphMeta.id));
 
   } catch (error) {
     console.error("Failed to load example model:", error);
-    alert("Failed to load the example model. See console for details.");
   }
 };
 
 const isModelValid = computed(() => validationErrors.value.size === 0);
+
+const connectToBackend = async () => {
+  isConnecting.value = true;
+  isConnected.value = false;
+  executionStore.setBackendUrl(tempBackendUrl.value);
+  uiStore.setActiveRightTab('execution');
+  executionStore.executionLogs.push(`Attempting to connect to backend at ${tempBackendUrl.value}...`);
+  
+  try {
+    const response = await fetch(`${tempBackendUrl.value}/api/health`);
+    if (!response.ok) {
+      throw new Error(`Health check failed with status: ${response.status}`);
+    }
+    const result = await response.json();
+    if (result.status !== 'ok') {
+      throw new Error('Backend returned an invalid health status.');
+    }
+    isConnected.value = true;
+    executionStore.executionLogs.push("Connection successful.");
+    showConnectModal.value = false;
+  } catch (error: unknown) {
+    const errorMessage = (error as Error).message;
+    executionStore.executionLogs.push(`Connection failed: ${errorMessage}`);
+    isConnected.value = false;
+  } finally {
+    isConnecting.value = false;
+  }
+};
+
+const runModel = async () => {
+  if (!isConnected.value || !backendUrl.value || isExecuting.value) return;
+
+  uiStore.setActiveRightTab('execution');
+  executionStore.resetExecutionState();
+
+  try {
+    const payload = {
+      model_code: generatedCode.value,
+      data_string: dataStore.inputMode === 'julia' ? dataStore.dataString : jsonToJulia(dataStore.dataString),
+      inits_string: dataStore.inputMode === 'julia' ? dataStore.initsString : jsonToJulia(dataStore.initsString),
+      dependencies: dependencies.value.filter(d => d.name),
+      settings: samplerSettings.value
+    };
+    const response = await fetch(`${backendUrl.value}/api/run_model`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    const result = await response.json();
+    executionStore.executionLogs = result.logs || [];
+    if (!response.ok) throw new Error(result.error || `HTTP error! status: ${response.status}`);
+    executionStore.executionResults = result.results;
+    executionStore.generatedFiles = result.files;
+    executionStore.executionError = null;
+
+  } catch (error: unknown) {
+    executionStore.executionError = (error as Error).message;
+  } finally {
+    isExecuting.value = false;
+  }
+};
+
+const jsonToJulia = (jsonString: string): string => {
+  try {
+    const obj = JSON.parse(jsonString);
+    if (Object.keys(obj).length === 0) return "()";
+    const formatValue = (value: unknown): string => {
+      if (Array.isArray(value)) {
+        if (Array.isArray(value[0])) {
+          return `[\n    ${value.map(row => (row as unknown[]).join(' ')).join(';\n    ')}\n]`;
+        }
+        return `[${value.join(', ')}]`;
+      }
+      return JSON.stringify(value);
+    };
+    const entries = Object.entries(obj).map(([key, value]) => `${key} = ${formatValue(value)}`);
+    return `(\n  ${entries.join(',\n  ')}\n)`;
+  } catch {
+    return "()";
+  }
+};
 </script>
 
 <template>
@@ -377,7 +453,8 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
       @new-graph="showNewGraphModal = true" @save-current-graph="saveCurrentGraph"
       @open-about-modal="showAboutModal = true" @export-json="handleExportJson" @open-export-modal="openExportModal"
       @apply-layout="handleGraphLayout" @load-example="handleLoadExample" @validate-model="validateGraph"
-      :is-model-valid="isModelValid" @show-validation-issues="showValidationModal = true" />
+      :is-model-valid="isModelValid" @show-validation-issues="showValidationModal = true"
+      @connect-to-backend="showConnectModal = true" @run-model="runModel" />
 
     <div class="content-area">
       <aside class="left-sidebar" :style="leftSidebarStyle">
@@ -394,6 +471,10 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
             title="Data Input">
             <i class="fas fa-database"></i> <span v-show="isLeftSidebarOpen">Data</span>
           </button>
+          <button :class="{ active: activeLeftTab === 'settings' }" @click="uiStore.handleLeftTabClick('settings')"
+            title="Execution Settings">
+            <i class="fas fa-cog"></i> <span v-show="isLeftSidebarOpen">Settings</span>
+          </button>
         </div>
         <div class="left-sidebar-content" :style="leftSidebarContentStyle">
           <div v-show="activeLeftTab === 'project'">
@@ -405,6 +486,9 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
           <div v-show="activeLeftTab === 'data'" class="fill-height">
             <DataInputPanel :is-active="activeLeftTab === 'data'" />
           </div>
+          <div v-show="activeLeftTab === 'settings'" class="fill-height">
+            <ExecutionSettingsPanel />
+          </div>
         </div>
       </aside>
 
@@ -428,6 +512,8 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
               @click="uiStore.setActiveRightTab('code')">Code</button>
             <button :class="{ active: uiStore.activeRightTab === 'json' }"
               @click="uiStore.setActiveRightTab('json')">JSON</button>
+            <button :class="{ active: uiStore.activeRightTab === 'execution' }"
+              @click="uiStore.setActiveRightTab('execution')">Execution</button>
           </div>
           <button @click="uiStore.toggleRightTabPinned()" class="pin-button"
             :class="{ 'pinned': uiStore.isRightTabPinned }" title="Pin Tab">
@@ -445,39 +531,69 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
           <div v-show="uiStore.activeRightTab === 'json'" class="tab-pane fill-height">
             <JsonEditorPanel :is-active="uiStore.activeRightTab === 'json'" />
           </div>
+          <div v-show="uiStore.activeRightTab === 'execution'" class="tab-pane fill-height">
+            <ExecutionPanel />
+          </div>
         </div>
       </aside>
     </div>
 
+    <!-- Modals -->
     <BaseModal :is-open="showNewProjectModal" @close="showNewProjectModal = false">
       <template #header>
         <h3>Create New Project</h3>
       </template>
       <template #body>
-        <label for="new-project-name" style="display: block; margin-bottom: 8px; font-weight: 500;">Project
-          Name:</label>
-        <BaseInput id="new-project-name" v-model="newProjectName" placeholder="Enter project name"
-          @keyup.enter="createNewProject" />
+        <div class="modal-body-content">
+          <label for="new-project-name">Project Name:</label>
+          <BaseInput id="new-project-name" v-model="newProjectName" placeholder="Enter project name"
+            @keyup.enter="createNewProject" />
+        </div>
       </template>
       <template #footer>
         <BaseButton @click="showNewProjectModal = false" type="secondary">Cancel</BaseButton>
         <BaseButton @click="createNewProject" type="primary">Create</BaseButton>
       </template>
     </BaseModal>
+
     <BaseModal :is-open="showNewGraphModal" @close="showNewGraphModal = false">
       <template #header>
         <h3>Create New Graph</h3>
       </template>
       <template #body>
-        <label for="new-graph-name" style="display: block; margin-bottom: 8px; font-weight: 500;">Graph Name:</label>
-        <BaseInput id="new-graph-name" v-model="newGraphName" placeholder="Enter graph name"
-          @keyup.enter="createNewGraph" />
+        <div class="modal-body-content">
+          <label for="new-graph-name">Graph Name:</label>
+          <BaseInput id="new-graph-name" v-model="newGraphName" placeholder="Enter graph name"
+            @keyup.enter="createNewGraph" />
+        </div>
       </template>
       <template #footer>
         <BaseButton @click="showNewGraphModal = false" type="secondary">Cancel</BaseButton>
         <BaseButton @click="createNewGraph" type="primary">Create</BaseButton>
       </template>
     </BaseModal>
+
+    <BaseModal :is-open="showConnectModal" @close="showConnectModal = false">
+      <template #header>
+        <h3>Connect to Backend</h3>
+      </template>
+      <template #body>
+        <div class="modal-body-content">
+          <label for="backend-url">Backend Server URL:</label>
+          <BaseInput id="backend-url" v-model="tempBackendUrl" placeholder="http://localhost:8081"
+            @keyup.enter="connectToBackend" />
+          <small>The URL of your running JuliaBUGS backend server.</small>
+        </div>
+      </template>
+      <template #footer>
+        <BaseButton @click="showConnectModal = false" type="secondary">Cancel</BaseButton>
+        <BaseButton @click="connectToBackend" type="primary" :disabled="isConnecting">
+          <span v-if="isConnecting">Connecting...</span>
+          <span v-else>Connect</span>
+        </BaseButton>
+      </template>
+    </BaseModal>
+
     <AboutModal :is-open="showAboutModal" @close="showAboutModal = false" />
     <ExportModal :is-open="showExportModal" :export-type="currentExportType" @close="showExportModal = false"
       @confirm-export="handleConfirmExport" />
@@ -686,4 +802,20 @@ const isModelValid = computed(() => validationErrors.value.size === 0);
 .resizer-right {
   border-left: 1px solid var(--color-border);
 }
+
+.modal-body-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.modal-body-content label {
+  font-weight: 500;
+}
+
+.modal-body-content small {
+  display: block;
+  margin-top: 4px;
+  color: var(--color-secondary);
+}
 </style>
diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index 65ef266a2..1aca3db5c 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -1,10 +1,13 @@
+<!-- src/components/layouts/TheNavbar.vue -->
 <script setup lang="ts">
 import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
 import type { NodeType } from '../../types';
 import BaseButton from '../ui/BaseButton.vue';
 import BaseInput from '../ui/BaseInput.vue';
 import DropdownMenu from '../common/DropdownMenu.vue';
 import { nodeDefinitions, exampleModels } from '../../config/nodeDefinitions';
+import { useExecutionStore } from '../../stores/executionStore';
 
 const props = defineProps<{
   projectName: string | null;
@@ -34,8 +37,13 @@ const emit = defineEmits<{
   (e: 'load-example', exampleKey: string): void;
   (e: 'validate-model'): void;
   (e: 'show-validation-issues'): void;
+  (e: 'connect-to-backend'): void;
+  (e: 'run-model'): void;
 }>();
 
+const executionStore = useExecutionStore();
+const { isConnected, isExecuting } = storeToRefs(executionStore);
+
 const displayTitle = computed(() => {
   if (props.projectName && props.activeGraphName) {
     return `${props.projectName} — ${props.activeGraphName}`;
@@ -131,7 +139,7 @@ const handleGridSizeInput = (event: Event) => {
             </div>
           </template>
         </DropdownMenu>
-        
+
         <DropdownMenu>
           <template #trigger>
             <BaseButton type="ghost" size="small">Examples</BaseButton>
@@ -143,6 +151,15 @@ const handleGridSizeInput = (event: Event) => {
           </template>
         </DropdownMenu>
 
+        <DropdownMenu>
+          <template #trigger>
+            <BaseButton type="ghost" size="small">Execution</BaseButton>
+          </template>
+          <template #content>
+            <a href="#" @click.prevent="emit('connect-to-backend')">Connect to Backend...</a>
+          </template>
+        </DropdownMenu>
+
         <DropdownMenu>
           <template #trigger>
             <BaseButton type="ghost" size="small">Help</BaseButton>
@@ -160,17 +177,25 @@ const handleGridSizeInput = (event: Event) => {
     </div>
 
     <div class="navbar-center">
+        <div class="backend-status" :class="{ 'connected': isConnected, 'disconnected': !isConnected }" :title="isConnected ? 'Connected to backend' : 'Disconnected from backend'">
+            <i class="fas fa-circle"></i>
+        </div>
         <BaseButton @click="emit('validate-model')" type="ghost" size="small" title="Re-run model validation">
             <i class="fas fa-sync-alt"></i> Validate
         </BaseButton>
-        <div 
-            @click="emit('show-validation-issues')" 
-            class="validation-status" 
-            :class="isModelValid ? 'valid' : 'invalid'" 
+        <div
+            @click="emit('show-validation-issues')"
+            class="validation-status"
+            :class="isModelValid ? 'valid' : 'invalid'"
             :title="isModelValid ? 'Model is valid' : 'Model has errors. Click to see details.'"
         >
             <i :class="isModelValid ? 'fas fa-check-circle' : 'fas fa-exclamation-triangle'"></i>
         </div>
+        <BaseButton @click="emit('run-model')" type="primary" size="small" title="Run Model on Backend" :disabled="!isConnected || isExecuting">
+            <i v-if="isExecuting" class="fas fa-spinner fa-spin"></i>
+            <i v-else class="fas fa-play"></i>
+            Run
+        </BaseButton>
     </div>
 
     <div class="navbar-right">
@@ -348,6 +373,17 @@ const handleGridSizeInput = (event: Event) => {
   height: 18px;
 }
 
+.backend-status {
+    font-size: 0.7em;
+    padding: 5px;
+}
+.backend-status.connected {
+    color: var(--color-success);
+}
+.backend-status.disconnected {
+    color: var(--color-danger);
+}
+
 .validation-status {
     font-size: 1.2em;
     padding: 5px;
@@ -370,4 +406,10 @@ const handleGridSizeInput = (event: Event) => {
 .validation-status.invalid {
     color: var(--color-danger);
 }
+
+.navbar-center .base-button {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
 </style>
diff --git a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
new file mode 100644
index 000000000..0a8f85528
--- /dev/null
+++ b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
@@ -0,0 +1,98 @@
+<!-- src/components/left-sidebar/ExecutionSettingsPanel.vue -->
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useExecutionStore } from '../../stores/executionStore';
+import BaseInput from '../ui/BaseInput.vue';
+import BaseButton from '../ui/BaseButton.vue';
+
+const executionStore = useExecutionStore();
+const { dependencies, samplerSettings } = storeToRefs(executionStore);
+
+const addDependency = () => {
+  dependencies.value.push({ name: '', version: '' });
+};
+
+const removeDependency = (index: number) => {
+  dependencies.value.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="execution-settings-panel">
+    <div class="settings-section">
+      <h4>Sampler Settings</h4>
+      <div class="form-group">
+        <label for="n_samples">Samples</label>
+        <BaseInput id="n_samples" type="number" v-model.number="samplerSettings.n_samples" />
+      </div>
+      <div class="form-group">
+        <label for="n_adapts">Adaptation Steps</label>
+        <BaseInput id="n_adapts" type="number" v-model.number="samplerSettings.n_adapts" />
+      </div>
+      <div class="form-group">
+        <label for="n_chains">Chains</label>
+        <BaseInput id="n_chains" type="number" v-model.number="samplerSettings.n_chains" />
+      </div>
+    </div>
+
+    <div class="settings-section">
+      <h4>Dependencies</h4>
+      <div v-for="(dep, index) in dependencies" :key="index" class="dependency-item">
+        <BaseInput v-model="dep.name" placeholder="Package Name" class="dep-input" />
+        <BaseInput v-model="dep.version" placeholder="Version (e.g., 1.0)" class="dep-input" />
+        <BaseButton @click="removeDependency(index)" type="danger" size="small" class="remove-btn">-</BaseButton>
+      </div>
+      <BaseButton @click="addDependency" type="secondary" size="small" class="add-btn">
+        Add Dependency
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.execution-settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100%;
+}
+.settings-section {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  border: 1px solid var(--color-border-light);
+  padding: 15px;
+  border-radius: 8px;
+}
+h4 {
+  margin: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--color-border-light);
+  color: var(--color-heading);
+  font-weight: 600;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.form-group label {
+  font-size: 0.9em;
+  font-weight: 500;
+}
+.dependency-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.dep-input {
+  flex-grow: 1;
+}
+.remove-btn {
+  padding: 5px 10px;
+}
+.add-btn {
+  align-self: flex-start;
+  margin-top: 10px;
+}
+</style>
diff --git a/DoodleBUGS/src/components/panels/DataInputPanel.vue b/DoodleBUGS/src/components/panels/DataInputPanel.vue
index 20a6e79f3..641d5f57d 100644
--- a/DoodleBUGS/src/components/panels/DataInputPanel.vue
+++ b/DoodleBUGS/src/components/panels/DataInputPanel.vue
@@ -1,32 +1,34 @@
+<!-- src/components/panels/DataInputPanel.vue -->
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useDataStore } from '../../stores/dataStore';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material-darker.css';
 import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/julia/julia.js';
 import 'codemirror/addon/scroll/simplescrollbars.css';
 import 'codemirror/addon/scroll/simplescrollbars.js';
 import 'codemirror/addon/fold/foldgutter.css';
 import 'codemirror/addon/fold/foldgutter.js';
 import 'codemirror/addon/fold/brace-fold.js';
 import CodeMirror from 'codemirror';
-import type { Editor } from 'codemirror';
+import type { Editor, EditorConfiguration } from 'codemirror';
+import BaseButton from '../ui/BaseButton.vue';
 
 const props = defineProps<{
   isActive: boolean;
 }>();
 
 const dataStore = useDataStore();
-const editorContainer = ref<HTMLDivElement | null>(null);
-let cmInstance: Editor | null = null;
+const dataEditorContainer = ref<HTMLDivElement | null>(null);
+const initsEditorContainer = ref<HTMLDivElement | null>(null);
+
+let dataCm: Editor | null = null;
+let initsCm: Editor | null = null;
 let isUpdatingFromSource = false;
 
 const jsonError = ref<string | null>(null);
 
-/**
- * Validates a string to see if it is valid JSON.
- * @param jsonString The string to validate.
- */
 const validateJson = (jsonString: string) => {
   try {
     JSON.parse(jsonString);
@@ -36,57 +38,95 @@ const validateJson = (jsonString: string) => {
   }
 };
 
-onMounted(async () => {
-  await nextTick();
-  if (editorContainer.value) {
-    cmInstance = CodeMirror(editorContainer.value, {
-      value: dataStore.currentGraphDataString,
-      mode: { name: "javascript", json: true },
-      theme: 'material-darker',
-      lineNumbers: true,
-      tabSize: 2,
-      scrollbarStyle: "simple",
-      lineWrapping: false,
-      foldGutter: true,
-      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
-    });
-
-    cmInstance.on('change', (instance: Editor) => {
-      if (isUpdatingFromSource) return;
-      const currentValue = instance.getValue();
-      dataStore.currentGraphDataString = currentValue;
-      validateJson(currentValue);
-    });
-    
-    validateJson(dataStore.currentGraphDataString);
+const setupCodeMirror = () => {
+  // Destroy existing instances
+  [dataCm, initsCm].forEach(cm => {
+    if (cm) {
+      const wrapper = cm.getWrapperElement();
+      wrapper.parentNode?.removeChild(wrapper);
+    }
+  });
+  dataCm = null;
+  initsCm = null;
 
-    if (props.isActive) {
-      nextTick(() => cmInstance?.refresh());
+  nextTick(() => {
+    if (dataStore.inputMode === 'julia') {
+      if (dataEditorContainer.value) {
+        dataCm = createCmInstance(dataEditorContainer.value, `data = ${dataStore.dataString}\n\ninits = ${dataStore.initsString}`, 'julia');
+        dataCm.on('change', (instance) => {
+          if (isUpdatingFromSource) return;
+          const combinedValue = instance.getValue();
+          const dataMatch = combinedValue.match(/data\s*=\s*(\([\s\S]*?\))\s*/m);
+          const initsMatch = combinedValue.match(/inits\s*=\s*(\([\s\S]*?\))\s*/m);
+          dataStore.dataString = dataMatch ? dataMatch[1] : '()';
+          dataStore.initsString = initsMatch ? initsMatch[1] : '()';
+        });
+      }
+    } else { // JSON mode
+      if (dataEditorContainer.value) {
+        dataCm = createCmInstance(dataEditorContainer.value, dataStore.dataString, { name: "javascript", json: true });
+        dataCm.on('change', (instance) => {
+          if (isUpdatingFromSource) return;
+          dataStore.dataString = instance.getValue();
+          validateJson(instance.getValue());
+        });
+      }
+      if (initsEditorContainer.value) {
+        initsCm = createCmInstance(initsEditorContainer.value, dataStore.initsString, { name: "javascript", json: true });
+        initsCm.on('change', (instance) => {
+          if (isUpdatingFromSource) return;
+          dataStore.initsString = instance.getValue();
+        });
+      }
     }
-  }
-});
+  });
+};
 
+const createCmInstance = (container: HTMLElement, value: string, mode: string | EditorConfiguration["mode"]): Editor => {
+  return CodeMirror(container, {
+    value,
+    mode,
+    theme: 'material-darker',
+    lineNumbers: true,
+    tabSize: 2,
+    scrollbarStyle: "simple",
+    lineWrapping: false,
+    foldGutter: true,
+    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+  });
+};
+
+onMounted(setupCodeMirror);
 onUnmounted(() => {
-  if (cmInstance) {
-    const editorElement = cmInstance.getWrapperElement();
-    editorElement.parentNode?.removeChild(editorElement);
-    cmInstance = null;
-  }
+  [dataCm, initsCm].forEach(cm => {
+    if (cm) {
+      const wrapper = cm.getWrapperElement();
+      wrapper.parentNode?.removeChild(wrapper);
+    }
+  });
 });
 
-watch(() => dataStore.currentGraphDataString, (newData) => {
-  if (cmInstance && cmInstance.getValue() !== newData) {
-    isUpdatingFromSource = true;
-    cmInstance.setValue(newData);
-    isUpdatingFromSource = false;
-    validateJson(newData);
+watch(() => dataStore.inputMode, setupCodeMirror);
+
+watch([() => dataStore.dataString, () => dataStore.initsString], () => {
+  if (!dataCm) return;
+  isUpdatingFromSource = true;
+  if (dataStore.inputMode === 'julia') {
+    const combined = `data = ${dataStore.dataString}\n\ninits = ${dataStore.initsString}`;
+    if (dataCm.getValue() !== combined) dataCm.setValue(combined);
+  } else {
+    if (dataCm.getValue() !== dataStore.dataString) dataCm.setValue(dataStore.dataString);
+    if (initsCm && initsCm.getValue() !== dataStore.initsString) initsCm.setValue(dataStore.initsString);
+    validateJson(dataStore.dataString);
   }
-});
+  isUpdatingFromSource = false;
+}, { deep: true });
 
 watch(() => props.isActive, (newVal) => {
-  if (newVal && cmInstance) {
+  if (newVal) {
     nextTick(() => {
-      cmInstance?.refresh();
+      dataCm?.refresh();
+      initsCm?.refresh();
     });
   }
 });
@@ -94,19 +134,43 @@ watch(() => props.isActive, (newVal) => {
 
 <template>
   <div class="data-input-panel">
-    <h4>Model Data & Inits</h4>
+    <div class="header-controls">
+        <h4>Model Data & Inits</h4>
+        <div class="mode-switcher">
+            <BaseButton :class="{active: dataStore.inputMode === 'json'}" @click="dataStore.inputMode = 'json'" size="small">JSON</BaseButton>
+            <BaseButton :class="{active: dataStore.inputMode === 'julia'}" @click="dataStore.inputMode = 'julia'" size="small">Julia</BaseButton>
+        </div>
+    </div>
     <p class="description">
-      Define observed data and initial values for your model in JSON format.
+      Define observed data and initial values for your model.
     </p>
-    <div class="editor-wrapper">
-      <div ref="editorContainer" class="editor-container"></div>
+
+    <div v-if="dataStore.inputMode === 'julia'" class="editor-wrapper flex-grow">
+      <div ref="dataEditorContainer" class="editor-container"></div>
+    </div>
+
+    <div v-else class="json-editors-container">
+        <div class="editor-wrapper">
+            <label>Data</label>
+            <div ref="dataEditorContainer" class="editor-container"></div>
+        </div>
+        <div class="editor-wrapper">
+            <label>Inits</label>
+            <div ref="initsEditorContainer" class="editor-container"></div>
+        </div>
     </div>
+
     <div class="footer-status">
-      <div v-if="jsonError" class="status-message error">
-        <i class="fas fa-times-circle"></i> {{ jsonError }}
+      <div v-if="dataStore.inputMode === 'json'">
+        <div v-if="jsonError" class="status-message error">
+            <i class="fas fa-times-circle"></i> {{ jsonError }}
+        </div>
+        <div v-else class="status-message success">
+            <i class="fas fa-check-circle"></i> Valid JSON
+        </div>
       </div>
-      <div v-else class="status-message success">
-        <i class="fas fa-check-circle"></i> Valid JSON
+      <div v-else class="status-message info">
+        <i class="fas fa-info-circle"></i> Editing in Julia syntax mode.
       </div>
     </div>
   </div>
@@ -140,12 +204,31 @@ watch(() => props.isActive, (newVal) => {
   flex-direction: column;
   gap: 10px;
 }
+.header-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--color-border-light);
+    padding-bottom: 10px;
+}
 h4 {
   margin: 0;
   color: var(--color-heading);
-  text-align: center;
-  border-bottom: 1px solid var(--color-border-light);
-  padding-bottom: 10px;
+}
+.mode-switcher {
+    display: flex;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    overflow: hidden;
+}
+.mode-switcher .base-button {
+    border: none;
+    border-radius: 0;
+    background-color: var(--color-background-soft);
+}
+.mode-switcher .base-button.active {
+    background-color: var(--color-primary);
+    color: white;
 }
 .description {
   font-size: 0.85em;
@@ -154,14 +237,34 @@ h4 {
   margin: 0 0 5px 0;
   line-height: 1.4;
 }
+.json-editors-container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-height: 0;
+}
 .editor-wrapper {
-  flex-grow: 1;
+  flex: 1;
   border: 1px solid var(--color-border);
   border-radius: 8px;
   display: flex;
+  flex-direction: column;
   position: relative;
   min-height: 0;
 }
+.editor-wrapper.flex-grow {
+    flex-grow: 1;
+}
+.editor-wrapper label {
+    font-size: 0.8em;
+    font-weight: 500;
+    padding: 4px 8px;
+    background-color: var(--color-background-mute);
+    border-bottom: 1px solid var(--color-border);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
 .editor-container {
   flex-grow: 1;
   position: relative;
@@ -191,4 +294,7 @@ h4 {
   white-space: normal;
   word-break: break-word;
 }
+.status-message.info {
+    color: var(--color-info);
+}
 </style>
diff --git a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
new file mode 100644
index 000000000..906ddf620
--- /dev/null
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -0,0 +1,271 @@
+<!-- src/components/right-sidebar/ExecutionPanel.vue -->
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useExecutionStore } from '../../stores/executionStore';
+import BaseButton from '../ui/BaseButton.vue';
+
+const executionStore = useExecutionStore();
+const {
+  isExecuting,
+  executionResults,
+  executionLogs,
+  executionError,
+  generatedFiles
+} = storeToRefs(executionStore);
+
+const activeTab = ref<'results' | 'logs' | 'files'>('results');
+const copySuccessStates = ref<{ [key: string]: boolean }>({});
+
+const resultHeaders = computed(() => {
+  if (!executionResults.value || executionResults.value.length === 0) {
+    return [];
+  }
+  // All objects should have the same keys, so we can take them from the first object.
+  return Object.keys(executionResults.value[0]);
+});
+
+const copyFileContent = (fileName: string, content: string) => {
+  navigator.clipboard.writeText(content).then(() => {
+    copySuccessStates.value[fileName] = true;
+    setTimeout(() => {
+      copySuccessStates.value[fileName] = false;
+    }, 2000);
+  }).catch(err => {
+    console.error(`Failed to copy ${fileName}:`, err);
+    alert('Failed to copy content to clipboard.');
+  });
+};
+</script>
+
+<template>
+  <div class="execution-panel">
+    <div v-if="isExecuting" class="loading-overlay">
+      <div class="spinner"></div>
+      <p>Executing model on backend...</p>
+    </div>
+
+    <div class="panel-tabs">
+      <BaseButton
+        :class="{ active: activeTab === 'results' }"
+        @click="activeTab = 'results'"
+        size="small"
+      >
+        Results
+      </BaseButton>
+      <BaseButton
+        :class="{ active: activeTab === 'logs' }"
+        @click="activeTab = 'logs'"
+        size="small"
+      >
+        Logs
+      </BaseButton>
+      <BaseButton
+        :class="{ active: activeTab === 'files' }"
+        @click="activeTab = 'files'"
+        size="small"
+      >
+        Files
+      </BaseButton>
+    </div>
+
+    <div class="panel-content">
+      <div v-if="executionError" class="error-display">
+        <h4>Execution Failed</h4>
+        <pre>{{ executionError }}</pre>
+      </div>
+
+      <div v-show="activeTab === 'results'" class="tab-pane">
+        <div v-if="!executionResults" class="placeholder">
+          <p>Execution results will appear here.</p>
+        </div>
+        <div v-else class="results-table-container">
+          <table class="results-table">
+            <thead>
+              <tr>
+                <th v-for="header in resultHeaders" :key="header">{{ header }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in executionResults" :key="index">
+                <td v-for="header in resultHeaders" :key="header">
+                  {{ typeof row[header] === 'number' ? row[header].toFixed(4) : row[header] }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'logs'" class="tab-pane">
+        <pre class="logs-display">{{ executionLogs.join('\n') }}</pre>
+      </div>
+
+      <div v-show="activeTab === 'files'" class="tab-pane">
+        <div v-if="generatedFiles.length === 0" class="placeholder">
+          <p>Generated files from the sandbox will appear here.</p>
+        </div>
+        <div v-else class="files-container">
+          <div v-for="file in generatedFiles" :key="file.name" class="file-item">
+            <div class="file-header">
+              <strong>{{ file.name }}</strong>
+              <BaseButton @click="copyFileContent(file.name, file.content)" size="small">
+                <i v-if="copySuccessStates[file.name]" class="fas fa-check"></i>
+                <span v-else>Copy</span>
+              </BaseButton>
+            </div>
+            <pre class="file-content">{{ file.content }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.execution-panel {
+  padding: 15px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  color: var(--color-heading);
+}
+
+.spinner {
+  border: 4px solid var(--color-border-light);
+  border-top: 4px solid var(--color-primary);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin-bottom: 15px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.panel-tabs {
+  display: flex;
+  gap: 5px;
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  flex-shrink: 0;
+}
+
+.panel-tabs .base-button {
+  flex-grow: 1;
+  background-color: var(--color-background-mute);
+}
+
+.panel-tabs .base-button.active {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.panel-content {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.error-display {
+  background-color: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-left: 4px solid var(--color-danger);
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.error-display h4 {
+  margin: 0 0 10px 0;
+  color: var(--color-danger);
+}
+
+.error-display pre, .logs-display, .file-content {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background-color: var(--color-background-dark);
+  color: var(--color-text-light);
+  padding: 10px;
+  border-radius: 4px;
+  font-family: 'Fira Code', monospace;
+  font-size: 0.8em;
+}
+
+.placeholder {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--color-secondary);
+  font-style: italic;
+}
+
+.results-table-container {
+  overflow-x: auto;
+}
+
+.results-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85em;
+}
+
+.results-table th, .results-table td {
+  border: 1px solid var(--color-border);
+  padding: 8px;
+  text-align: left;
+}
+
+.results-table th {
+  background-color: var(--color-background-mute);
+  font-weight: 600;
+}
+
+.results-table tbody tr:nth-child(even) {
+  background-color: var(--color-background-soft);
+}
+
+.files-container {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.file-item {
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+
+.file-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-background-mute);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.file-content {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+</style>
diff --git a/DoodleBUGS/src/composables/useGraphValidator.ts b/DoodleBUGS/src/composables/useGraphValidator.ts
index 72a0e2874..79e6f516c 100644
--- a/DoodleBUGS/src/composables/useGraphValidator.ts
+++ b/DoodleBUGS/src/composables/useGraphValidator.ts
@@ -1,3 +1,5 @@
+// src/composables/useGraphValidator.ts
+
 import { ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { GraphElement, GraphNode, GraphEdge, ValidationError, ModelData } from '../types';
diff --git a/DoodleBUGS/src/stores/dataStore.ts b/DoodleBUGS/src/stores/dataStore.ts
index ae03de918..f94e2c754 100644
--- a/DoodleBUGS/src/stores/dataStore.ts
+++ b/DoodleBUGS/src/stores/dataStore.ts
@@ -1,74 +1,225 @@
+// src/stores/dataStore.ts
+
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useGraphStore } from './graphStore';
 import type { ModelData } from '../types';
 
-const defaultData = 
-`{
-  "data": {},
-  "inits": {}
-}`;
+const defaultJson = `{}`;
+const defaultJulia = `()`;
 
-export const useDataStore = defineStore('data', () => {
-  const graphStore = useGraphStore();
-  const dataContents = ref<Map<string, string>>(new Map());
+/**
+ * A robust utility to convert a Julia NamedTuple string to a JSON string.
+ * This version correctly handles Julia's matrix syntax.
+ * @param juliaString - The string representing a Julia NamedTuple.
+ * @returns A JSON string representation.
+ */
+function juliaStringToJson(juliaString: string): string {
+    if (!juliaString || !juliaString.trim() || juliaString.trim() === '()') {
+        return defaultJson;
+    }
+    try {
+        let jsonCompatString = juliaString.trim();
 
-  const currentGraphDataString = computed({
-    get: () => {
-      const graphId = graphStore.currentGraphId;
-      if (graphId && dataContents.value.has(graphId)) {
-        return dataContents.value.get(graphId)!;
-      }
-      if (graphId) {
-        const storedData = localStorage.getItem(`doodlebugs-data-${graphId}`);
-        if (storedData) {
-          dataContents.value.set(graphId, storedData);
-          return storedData;
+        // 1. Remove outer parentheses if they exist
+        if (jsonCompatString.startsWith('(') && jsonCompatString.endsWith(')')) {
+            jsonCompatString = jsonCompatString.slice(1, -1).trim();
         }
-        dataContents.value.set(graphId, defaultData);
-        return defaultData;
-      }
-      return defaultData;
-    },
-    set: (newData: string) => {
-      const graphId = graphStore.currentGraphId;
-      if (graphId) {
-        updateGraphData(graphId, newData);
-      }
+
+        // 2. Handle matrices: [1 2; 3 4] -> [[1,2],[3,4]]
+        jsonCompatString = jsonCompatString.replace(
+            /\[([\s\S]*?)\]/g,
+            (match, content) => {
+                const trimmedContent = content.trim();
+                // If it contains ';', it's a matrix
+                if (trimmedContent.includes(';')) {
+                    const rows = trimmedContent.split(';')
+                        .map((row: string) => row.trim().split(/\s+/).join(', '));
+                    return `[${rows.map((row: string) => `[${row}]`).join(', ')}]`;
+                }
+                // Otherwise, it's a vector or already JSON-like, return as is
+                return match;
+            }
+        );
+
+        // 3. Add quotes around keys
+        jsonCompatString = jsonCompatString.replace(/([a-zA-Z_][a-zA-Z0-9_.]*)\s*=/g, '"$1":');
+
+        // 4. Wrap in braces and parse
+        const parsed = JSON.parse(`{${jsonCompatString}}`);
+        return JSON.stringify(parsed, null, 2);
+    } catch (e) {
+        console.error("Failed to convert Julia string to JSON:", e, "Input:", juliaString);
+        return defaultJson;
     }
-  });
+}
 
-  const parsedGraphData = computed<ModelData>(() => {
+
+/**
+ * Converts a JSON string to a beautifully formatted Julia NamedTuple string.
+ * @param jsonString - The JSON string to convert.
+ * @returns A string representing a Julia NamedTuple.
+ */
+function jsonStringToJuliaString(jsonString: string): string {
     try {
-      const parsed = JSON.parse(currentGraphDataString.value);
-      return {
-        data: parsed.data || {},
-        inits: parsed.inits || {}
-      };
+        const obj = JSON.parse(jsonString);
+        if (Object.keys(obj).length === 0) return defaultJulia;
+
+        const formatValue = (value: unknown, indentLevel = 1): string => {
+            const indent = '  '.repeat(indentLevel);
+            if (Array.isArray(value)) {
+                // Check if it's a matrix (array of arrays of numbers)
+                if (Array.isArray(value[0]) && typeof value[0][0] === 'number') {
+                    const formattedRows = value.map(row => `${indent}  ${(row as unknown[]).join(' ')}`);
+                    return `[\n${formattedRows.join(';\n')}\n${indent}]`;
+                }
+                // Handle simple arrays (vectors)
+                return `[${value.join(', ')}]`;
+            }
+            // For scalars, JSON.stringify is fine as it won't add .0 to integers.
+            return JSON.stringify(value);
+        };
+
+        const entries = Object.entries(obj).map(([key, value]) => {
+            const formattedValue = formatValue(value, 1);
+            return `  ${key} = ${formattedValue}`;
+        });
+        return `(\n${entries.join(',\n')}\n)`;
     } catch {
-      return { data: {}, inits: {} };
+        return defaultJulia;
     }
-  });
-
-
-  const updateGraphData = (graphId: string, newData: string) => {
-    dataContents.value.set(graphId, newData);
-    localStorage.setItem(`doodlebugs-data-${graphId}`, newData);
-  };
-  
-  const createNewGraphData = (graphId: string) => {
-    updateGraphData(graphId, defaultData);
-  };
-
-  const deleteGraphData = (graphId: string) => {
-    dataContents.value.delete(graphId);
-    localStorage.removeItem(`doodlebugs-data-${graphId}`);
-  };
-
-  return {
-    currentGraphDataString,
-    parsedGraphData,
-    createNewGraphData,
-    deleteGraphData,
-  };
+}
+
+interface DataState {
+    mode: 'json' | 'julia';
+    jsonData: string;
+    jsonInits: string;
+    juliaData: string;
+    juliaInits: string;
+}
+
+export const useDataStore = defineStore('data', () => {
+    const graphStore = useGraphStore();
+    const dataContents = ref<Map<string, DataState>>(new Map());
+
+    const getGraphData = (graphId: string): DataState => {
+        if (!dataContents.value.has(graphId)) {
+            const storedData = localStorage.getItem(`doodlebugs-data-${graphId}`);
+            if (storedData) {
+                const loadedState: DataState = JSON.parse(storedData);
+                // If reloading in Julia mode, ensure JSON versions are correctly hydrated.
+                if (loadedState.mode === 'julia') {
+                    loadedState.jsonData = juliaStringToJson(loadedState.juliaData);
+                    loadedState.jsonInits = juliaStringToJson(loadedState.juliaInits);
+                }
+                dataContents.value.set(graphId, loadedState);
+            } else {
+                // Default to Julia mode for new/uninitialized graphs.
+                dataContents.value.set(graphId, {
+                    mode: 'julia',
+                    jsonData: defaultJson,
+                    jsonInits: defaultJson,
+                    juliaData: defaultJulia,
+                    juliaInits: defaultJulia
+                });
+            }
+        }
+        return dataContents.value.get(graphId)!;
+    };
+
+    const currentGraphState = computed(() => {
+        const graphId = graphStore.currentGraphId;
+        return graphId ? getGraphData(graphId) : null;
+    });
+
+    const inputMode = computed({
+        get: () => currentGraphState.value?.mode || 'julia',
+        set: (newMode) => {
+            if (currentGraphState.value && currentGraphState.value.mode !== newMode) {
+                currentGraphState.value.mode = newMode;
+                updateGraphData(graphStore.currentGraphId!, currentGraphState.value);
+            }
+        }
+    });
+
+    const dataString = computed({
+        get: () => {
+            if (!currentGraphState.value) return '';
+            return inputMode.value === 'json' ? currentGraphState.value.jsonData : currentGraphState.value.juliaData;
+        },
+        set: (newData) => {
+            if (currentGraphState.value) {
+                if (inputMode.value === 'json') {
+                    currentGraphState.value.jsonData = newData;
+                    currentGraphState.value.juliaData = jsonStringToJuliaString(newData);
+                } else {
+                    currentGraphState.value.juliaData = newData;
+                    currentGraphState.value.jsonData = juliaStringToJson(newData);
+                }
+                updateGraphData(graphStore.currentGraphId!, currentGraphState.value);
+            }
+        }
+    });
+
+    const initsString = computed({
+        get: () => {
+            if (!currentGraphState.value) return '';
+            return inputMode.value === 'json' ? currentGraphState.value.jsonInits : currentGraphState.value.juliaInits;
+        },
+        set: (newInits) => {
+            if (currentGraphState.value) {
+                if (inputMode.value === 'json') {
+                    currentGraphState.value.jsonInits = newInits;
+                    currentGraphState.value.juliaInits = jsonStringToJuliaString(newInits);
+                } else {
+                    currentGraphState.value.juliaInits = newInits;
+                    currentGraphState.value.jsonInits = juliaStringToJson(newInits);
+                }
+                updateGraphData(graphStore.currentGraphId!, currentGraphState.value);
+            }
+        }
+    });
+
+    const parsedGraphData = computed<ModelData>(() => {
+        try {
+            const data = JSON.parse(currentGraphState.value?.jsonData || defaultJson);
+            const inits = JSON.parse(currentGraphState.value?.jsonInits || defaultJson);
+            return { data, inits };
+        } catch {
+            return { data: {}, inits: {} };
+        }
+    });
+
+    const updateGraphData = (graphId: string, newState: DataState) => {
+        dataContents.value.set(graphId, newState);
+        localStorage.setItem(`doodlebugs-data-${graphId}`, JSON.stringify(newState));
+    };
+
+    const createNewGraphData = (graphId: string) => {
+        const newState: DataState = {
+            mode: 'julia', // Default to Julia for new graphs
+            jsonData: defaultJson,
+            jsonInits: defaultJson,
+            juliaData: defaultJulia,
+            juliaInits: defaultJulia
+        };
+        dataContents.value.set(graphId, newState);
+        updateGraphData(graphId, newState);
+    };
+
+    const deleteGraphData = (graphId: string) => {
+        dataContents.value.delete(graphId);
+        localStorage.removeItem(`doodlebugs-data-${graphId}`);
+    };
+
+    return {
+        inputMode,
+        dataString,
+        initsString,
+        parsedGraphData,
+        createNewGraphData,
+        deleteGraphData,
+        getGraphData,
+        updateGraphData
+    };
 });
diff --git a/DoodleBUGS/src/stores/executionStore.ts b/DoodleBUGS/src/stores/executionStore.ts
new file mode 100644
index 000000000..71964d7be
--- /dev/null
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -0,0 +1,86 @@
+// src/stores/executionStore.ts
+
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export interface ExecutionResult {
+  [key: string]: string | number;
+}
+
+export interface GeneratedFile {
+  name: string;
+  content: string;
+}
+
+export interface Dependency {
+    name: string;
+    version: string;
+}
+
+export interface SamplerSettings {
+    n_samples: number;
+    n_adapts: number;
+    n_chains: number;
+}
+
+export const useExecutionStore = defineStore('execution', () => {
+  // State for backend connection
+  const backendUrl = ref<string | null>(localStorage.getItem('doodlebugs-backendUrl') || null);
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+
+  // State for model execution
+  const isExecuting = ref(false);
+  const executionResults = ref<ExecutionResult[] | null>(null);
+  const executionLogs = ref<string[]>([]);
+  const executionError = ref<string | null>(null);
+  const generatedFiles = ref<GeneratedFile[]>([]);
+
+  // State for settings
+  const dependencies = ref<Dependency[]>([
+      { name: 'JuliaBUGS', version: '' },
+      { name: 'LogDensityProblemsAD', version: '' },
+      { name: 'AdvancedHMC', version: '' },
+      { name: 'MCMCChains', version: '' },
+      { name: 'ReverseDiff', version: '' },
+      { name: 'JSON3', version: '' }, // Added to ensure the sandbox can write results
+  ]);
+  const samplerSettings = ref<SamplerSettings>({
+      n_samples: 1000,
+      n_adapts: 1000,
+      n_chains: 1
+  });
+
+  const setBackendUrl = (url: string | null) => {
+    if (url) {
+      backendUrl.value = url;
+      localStorage.setItem('doodlebugs-backendUrl', url);
+    } else {
+      backendUrl.value = null;
+      localStorage.removeItem('doodlebugs-backendUrl');
+    }
+  };
+
+  const resetExecutionState = () => {
+    isExecuting.value = true;
+    executionResults.value = null;
+    executionLogs.value = [];
+    executionError.value = null;
+    generatedFiles.value = [];
+  };
+
+  return {
+    backendUrl,
+    isConnected,
+    isConnecting,
+    isExecuting,
+    executionResults,
+    executionLogs,
+    executionError,
+    generatedFiles,
+    dependencies,
+    samplerSettings,
+    setBackendUrl,
+    resetExecutionState,
+  };
+});
diff --git a/DoodleBUGS/src/stores/uiStore.ts b/DoodleBUGS/src/stores/uiStore.ts
index e21e04818..76d84100f 100644
--- a/DoodleBUGS/src/stores/uiStore.ts
+++ b/DoodleBUGS/src/stores/uiStore.ts
@@ -1,8 +1,10 @@
+// src/stores/uiStore.ts
+
 import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 
-export type RightSidebarTab = 'properties' | 'code' | 'json';
-export type LeftSidebarTab = 'project' | 'palette' | 'data';
+export type RightSidebarTab = 'properties' | 'code' | 'json' | 'execution';
+export type LeftSidebarTab = 'project' | 'palette' | 'data' | 'settings';
 
 export const useUiStore = defineStore('ui', () => {
   // Right Sidebar State
@@ -13,10 +15,10 @@ export const useUiStore = defineStore('ui', () => {
     localStorage.getItem('doodlebugs-isRightTabPinned') === 'true'
   );
   const isRightSidebarOpen = ref<boolean>(
-    localStorage.getItem('doodlebugs-isRightSidebarOpen') !== 'false' // Default to true
+    localStorage.getItem('doodlebugs-isRightSidebarOpen') !== 'false'
   );
   const rightSidebarWidth = ref<number>(
-    parseInt(localStorage.getItem('doodlebugs-rightSidebarWidth') || '320')
+    parseInt(localStorage.getItem('doodlebugs-rightSidebarWidth') || '400') // Increased default width
   );
 
   // Left Sidebar State
@@ -24,7 +26,7 @@ export const useUiStore = defineStore('ui', () => {
     (localStorage.getItem('doodlebugs-activeLeftTab') as LeftSidebarTab) || 'project'
   );
   const isLeftSidebarOpen = ref<boolean>(
-    localStorage.getItem('doodlebugs-isLeftSidebarOpen') !== 'false' // Default to true
+    localStorage.getItem('doodlebugs-isLeftSidebarOpen') !== 'false'
   );
   const leftSidebarWidth = ref<number>(
     parseInt(localStorage.getItem('doodlebugs-leftSidebarWidth') || '330')
@@ -56,6 +58,9 @@ export const useUiStore = defineStore('ui', () => {
   // Actions
   const setActiveRightTab = (tab: RightSidebarTab) => {
     activeRightTab.value = tab;
+    if (!isRightSidebarOpen.value) {
+        isRightSidebarOpen.value = true;
+    }
   };
   const toggleRightTabPinned = () => {
     isRightTabPinned.value = !isRightTabPinned.value;
@@ -78,7 +83,6 @@ export const useUiStore = defineStore('ui', () => {
   };
 
   return {
-    // Right Sidebar
     activeRightTab,
     isRightTabPinned,
     isRightSidebarOpen,
@@ -86,7 +90,6 @@ export const useUiStore = defineStore('ui', () => {
     setActiveRightTab,
     toggleRightTabPinned,
     toggleRightSidebar,
-    // Left Sidebar
     activeLeftTab,
     isLeftSidebarOpen,
     leftSidebarWidth,

From eeac13c735cb2f40fc3fe50822f9eae322371ee5 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 22 Aug 2025 15:00:40 +0530
Subject: [PATCH 02/12] .

---
 DoodleBUGS/runtime/server.jl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
index d8be77ad5..7531c7f87 100644
--- a/DoodleBUGS/runtime/server.jl
+++ b/DoodleBUGS/runtime/server.jl
@@ -87,7 +87,7 @@ function run_model_handler(req::HTTP.Request)
 
         try
             # Define the model from the string
-            model_def = JuliaBUGS.@bugs_str(\"\"\"
+            model_def = JuliaBUGS.@bugs(\"\"\"
             $(model_code)
             \"\"\", true, false)
 

From ca1d6bed75db5209dabc0b4f5c8563153174297d Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Wed, 27 Aug 2025 10:00:24 +0530
Subject: [PATCH 03/12] Add backend for DoodleBUGS

---
 DoodleBUGS/runtime/Project.toml               |   5 +
 DoodleBUGS/runtime/server.jl                  | 252 +++++++++++-------
 .../src/components/layouts/MainLayout.vue     |  60 ++++-
 .../left-sidebar/ExecutionSettingsPanel.vue   |  40 +--
 DoodleBUGS/src/stores/executionStore.ts       |  20 +-
 5 files changed, 229 insertions(+), 148 deletions(-)

diff --git a/DoodleBUGS/runtime/Project.toml b/DoodleBUGS/runtime/Project.toml
index 4fe501085..8dbd2c8c7 100644
--- a/DoodleBUGS/runtime/Project.toml
+++ b/DoodleBUGS/runtime/Project.toml
@@ -1,9 +1,14 @@
 [deps]
+AbstractMCMC = "80f14c24-f653-4e6a-9b94-39d6b0f70001"
 AdvancedHMC = "0bf59076-c3b1-5ca4-86bd-e02cd72cde3d"
+DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
 HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
 JSON3 = "0f8b85d8-7281-11e9-16c2-39a750bddbf1"
 JuliaBUGS = "ba9fb4c0-828e-4473-b6a1-cd2560fee5bf"
+LogDensityProblems = "6fdf6af0-433a-55f7-b3ed-c6c6e0b8df7c"
 LogDensityProblemsAD = "996a588d-648d-4e1f-a8f0-a84b347e47b1"
 MCMCChains = "c7f686f2-ff18-58e9-bc7b-31028e88f75d"
 Pkg = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
 Random = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"
+ReverseDiff = "37e2e3b7-166d-5795-8a7a-e32c996b4267"
+StatsBase = "2913bbd2-ae8a-5f71-8c99-4fb6c76f3a91"
diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
index 7531c7f87..0ee35e663 100644
--- a/DoodleBUGS/runtime/server.jl
+++ b/DoodleBUGS/runtime/server.jl
@@ -5,7 +5,6 @@
 
 using HTTP
 using JSON3
-using Pkg
 
 # Define CORS headers to allow cross-origin requests from the web app.
 const CORS_HEADERS = [
@@ -38,132 +37,208 @@ function run_model_handler(req::HTTP.Request)
     logs = String[]
     push!(logs, "Backend processing started.")
     
-    # Create a temporary, sandboxed environment for this run
+    # Create a temporary working directory for this run (no env activation)
     tmp_dir = mktempdir()
-    push!(logs, "Created temporary sandbox environment at: $(tmp_dir)")
+    push!(logs, "Created temporary working directory at: $(tmp_dir)")
 
     try
-        # Activate the sandbox project environment
-        Pkg.activate(tmp_dir)
-        
         # Parse the JSON body from the request
         body = JSON3.read(String(req.body))
-        model_code = body.model_code
-        data_string = body.data_string
-        inits_string = body.inits_string
-        dependencies = body.dependencies
+        model_code = get(body, :model_code, "")
+        data_json = haskey(body, :data) ? body[:data] : JSON3.Object()
+        inits_json = haskey(body, :inits) ? body[:inits] : JSON3.Object()
+        data_string = get(body, :data_string, "")
+        inits_string = get(body, :inits_string, "")
         settings = get(body, :settings, JSON3.Object())
 
         push!(logs, "Request body parsed successfully.")
 
-        # Add specified dependencies to the sandbox environment
-        push!(logs, "Adding $(length(dependencies)) dependencies to sandbox...")
-        for dep in dependencies
-            if isempty(dep.version)
-                Pkg.add(dep.name)
-            else
-                Pkg.add(name=dep.name, version=dep.version)
-            end
-        end
-        push!(logs, "All dependencies installed in sandbox.")
-
-        # Write the user's BUGS model code to a file in the sandbox
+        # Write the BUGS model code to a file for the worker script to read
         model_path = joinpath(tmp_dir, "model.bugs")
         write(model_path, model_code)
         
-        # The core logic will be executed in a separate, sandboxed Julia process
-        # to ensure isolation and use the correct project environment.
+        # Add a Julia-literal representation of the model code for embedding into the worker script
+        model_literal = repr(String(model_code))
+
+        # Compute absolute paths and their Julia-literal forms for safe embedding in worker script
+        results_path = joinpath(tmp_dir, "results.json")
+        payload_path = joinpath(tmp_dir, "payload.json")
+        payload_literal = repr(String(payload_path))
+        results_literal = repr(String(results_path))
+
+        # Prepare payload for the worker script (prefer JSON data/inits if provided)
+        payload_obj = Dict(
+            "model_path" => model_path,
+            "data" => data_json,
+            "inits" => inits_json,
+            "data_string" => data_string,
+            "inits_string" => inits_string,
+            "settings" => Dict(
+                "n_samples" => get(settings, :n_samples, 1000),
+                "n_adapts" => get(settings, :n_adapts, 1000),
+                "n_chains" => get(settings, :n_chains, 1),
+                "seed" => get(settings, :seed, nothing),
+            ),
+        )
+        open(payload_path, "w") do f
+            JSON3.write(f, payload_obj)
+        end
+
+        # Generate worker script content
         script_path = joinpath(tmp_dir, "run_script.jl")
-        
-        # This script contains the actual model compilation and sampling logic.
-        # It will be executed by the sandboxed Julia process.
         run_script_content = """
         using JuliaBUGS
         using LogDensityProblemsAD
+        using LogDensityProblems
         using AdvancedHMC
+        using AbstractMCMC
         using MCMCChains
         using Random
         using JSON3
+        using StatsBase
+        using DataFrames
+        using Statistics
+
+        # Recursively convert JSON3 structures to Julia NamedTuples/Arrays
+        to_julia(x) = x
+        function to_julia(x::JSON3.Object)
+            ks = collect(keys(x))
+            keys_sym = Symbol.(ks)
+            vals = map(k -> to_julia(x[k]), ks)
+            return NamedTuple{Tuple(keys_sym)}(vals)
+        end
+        function to_julia(x::AbstractDict)
+            keys_sym = Symbol.(collect(keys(x)))
+            vals = map(k -> to_julia(x[k]), collect(keys(x)))
+            return NamedTuple{Tuple(keys_sym)}(vals)
+        end
+        function to_julia(x::AbstractVector)
+            xs = map(to_julia, x)
+            # If this is a rectangular vector-of-vectors of numbers, convert to a Matrix
+            try
+                if !isempty(xs) && all(y -> y isa AbstractVector, xs)
+                    ncols = length(xs[1])
+                    if all(y -> length(y) == ncols, xs) && all(y -> all(z -> z isa Real, y), xs)
+                        has_float = any(y -> any(z -> z isa AbstractFloat, y), xs)
+                        T = has_float ? Float64 : Int
+                        m = Matrix{T}(undef, length(xs), ncols)
+                        @inbounds for i in 1:length(xs), j in 1:ncols
+                            m[i, j] = T(xs[i][j])
+                        end
+                        return m
+                    end
+                end
+            catch
+                # fall through to returning xs
+            end
+            return xs
+        end
 
         try
-            # Define the model from the string
-            model_def = JuliaBUGS.@bugs(\"\"\"
-            $(model_code)
-            \"\"\", true, false)
-
-            # Parse data and inits from strings into NamedTuples
-            data_nt = eval(Meta.parse(\"\"\"
-            $(data_string)
-            \"\"\"))
-            inits_nt = eval(Meta.parse(\"\"\"
-            $(inits_string)
-            \"\"\"))
-
-            # Compile the model
+            # Read payload
+            payload = JSON3.read(read($(payload_literal), String))
+            settings = payload.settings
+
+            # Build data/inits
+            has_json_data = length(collect(keys(payload.data))) > 0
+            has_json_inits = length(collect(keys(payload.inits))) > 0
+
+            if has_json_data
+                data_nt = to_julia(payload.data)
+            else
+                # Fallback: parse Julia tuple string
+                data_nt = isempty(payload.data_string) ? (;) : eval(Meta.parse(payload.data_string))
+            end
+            if has_json_inits
+                inits_nt = to_julia(payload.inits)
+            else
+                inits_nt = isempty(payload.inits_string) ? (;) : eval(Meta.parse(payload.inits_string))
+            end
+
+            # Define and compile model
+            model_def = JuliaBUGS.@bugs($(model_literal), true, false)
             model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
 
-            # Wrap for AD
+            # Wrap for AD (ReverseDiff by default)
             ad_model = ADgradient(:ReverseDiff, model; compile=Val(true))
 
-            # Sampler settings
-            n_samples = $(get(settings, :n_samples, 1000))
-            n_adapts = $(get(settings, :n_adapts, 1000))
-            
-            # Run sampler
+            # Settings
+            n_samples = Int(get(settings, :n_samples, 1000))
+            n_adapts = Int(get(settings, :n_adapts, 1000))
+            n_chains = Int(get(settings, :n_chains, 1))
+            seed = get(settings, :seed, nothing)
+
+            # RNG
+            has_seed = !(seed === nothing || seed === JSON3.Null() || seed === missing)
+            rng = has_seed ? Random.MersenneTwister(Int(seed)) : Random.MersenneTwister()
+
+            # Initial params
             D = LogDensityProblems.dimension(model)
-            initial_θ = rand(D)
-            samples = AbstractMCMC.sample(
-                ad_model,
-                NUTS(0.8),
-                n_samples;
-                n_adapts=n_adapts,
-                chain_type=Chains,
-                init_params=initial_θ,
-                discard_initial=n_adapts
-            )
-
-            # Format results
-            summary_stats = summary(samples)
-            results_json = [Dict(pairs(row)) for row in eachrow(summary_stats)]
-            
-            # Write results to a file
-            open("results.json", "w") do f
-                JSON3.write(f, Dict("success" => true, "results" => results_json))
+            initial_theta = rand(rng, D)
+
+            # Sample (use threading if available and n_chains > 1)
+            if n_chains > 1 && Threads.nthreads() > 1
+                samples = AbstractMCMC.sample(
+                    rng,
+                    ad_model,
+                    NUTS(0.8),
+                    AbstractMCMC.MCMCThreads(),
+                    n_samples;
+                    n_adapts=n_adapts,
+                    n_chains=n_chains,
+                    chain_type=Chains,
+                    init_params=initial_theta,
+                    discard_initial=n_adapts,
+                    progress=false,
+                )
+            else
+                samples = AbstractMCMC.sample(
+                    rng,
+                    ad_model,
+                    NUTS(0.8),
+                    n_samples;
+                    n_adapts=n_adapts,
+                    n_chains=n_chains,
+                    chain_type=Chains,
+                    init_params=initial_theta,
+                    discard_initial=n_adapts,
+                    progress=false,
+                )
             end
 
+            # Summarize
+            summary_df = MCMCChains.summarystats(samples)
+            results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
+
+            open($(results_literal), "w") do f
+                JSON3.write(f, Dict("success" => true, "results" => results_json))
+            end
         catch e
-            open("results.json", "w") do f
+            open($(results_literal), "w") do f
                 JSON3.write(f, Dict("success" => false, "error" => sprint(showerror, e)))
             end
         end
         """
         write(script_path, run_script_content)
-        push!(logs, "Generated execution script in sandbox.")
+        push!(logs, "Generated execution script in working directory.")
 
-        # Execute the script in the sandboxed environment
-        # --project points to the sandbox, ensuring it uses the correct dependencies.
+        # Execute the script using the fixed DoodleBUGS runtime project
         julia_executable = joinpath(Sys.BINDIR, "julia")
-        cmd = `$(julia_executable) --project=$(tmp_dir) $(script_path)`
-        
-        push!(logs, "Executing script in sandboxed process...")
+        project_dir = abspath(@__DIR__) # runtime directory contains Project.toml
+        cmd = `$(julia_executable) --project=$(project_dir) --threads=auto $(script_path)`
+
+        push!(logs, "Executing script in worker process...")
         run(cmd)
         push!(logs, "Script execution finished.")
 
-        # Read the results generated by the script
-        results_path = joinpath(tmp_dir, "results.json")
+        # Read results
         results_content = JSON3.read(read(results_path, String))
 
-        # Check if the script execution was successful
         if !results_content.success
             throw(ErrorException(results_content.error))
         end
 
-        # Read generated project files to send back to the user
-        project_toml_content = read(joinpath(tmp_dir, "Project.toml"), String)
-        manifest_toml_content = read(joinpath(tmp_dir, "Manifest.toml"), String)
-        push!(logs, "Successfully retrieved results and project files.")
-
-        # Prepare the final successful response
+        # Prepare response
         response_body = Dict(
             "success" => true,
             "results" => results_content.results,
@@ -171,36 +246,31 @@ function run_model_handler(req::HTTP.Request)
             "files" => [
                 Dict("name" => "model.bugs", "content" => model_code),
                 Dict("name" => "run_script.jl", "content" => run_script_content),
-                Dict("name" => "Project.toml", "content" => project_toml_content),
-                Dict("name" => "Manifest.toml", "content" => manifest_toml_content)
-            ]
+            ],
         )
         return HTTP.Response(200, ["Content-Type" => "application/json"], JSON3.write(response_body))
 
     catch e
-        # If any error occurs during the process, capture and return it
         push!(logs, "An error occurred: $(sprint(showerror, e))")
         @error "Error during model execution" exception=(e, catch_backtrace())
 
         error_response = Dict(
             "success" => false,
             "error" => sprint(showerror, e),
-            "logs" => logs
+            "logs" => logs,
         )
         return HTTP.Response(500, ["Content-Type" => "application/json"], JSON3.write(error_response))
-    
     finally
-        # Clean up the temporary directory
+        # Clean up
         rm(tmp_dir, recursive=true)
-        # It's good practice to reactivate the main project environment
-        Pkg.activate()
     end
 end
 
 # Define the router and register the endpoints
 const ROUTER = HTTP.Router()
 HTTP.register!(ROUTER, "GET", "/api/health", health_check_handler)
-HTTP.register!(ROUTER, "POST", "/api/run_model", run_model_handler)
+HTTP.register!(ROUTER, "POST", "/api/run", run_model_handler)
+HTTP.register!(ROUTER, "POST", "/api/run_model", run_model_handler) # backward compatibility
 
 # Start the server with the CORS handler
 port = 8081
diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index 01459104e..c90036a40 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -51,7 +51,7 @@ const { elements, selectedElement, updateElement, deleteElement } = useGraphElem
 const { generatedCode } = useBugsCodeGenerator(elements);
 const { getCyInstance } = useGraphInstance();
 const { validateGraph, validationErrors } = useGraphValidator(elements, parsedGraphData);
-const { backendUrl, isConnected, isConnecting, isExecuting, dependencies, samplerSettings } = storeToRefs(executionStore);
+const { backendUrl, isConnected, isConnecting, isExecuting, samplerSettings } = storeToRefs(executionStore);
 const { activeLeftTab, isLeftSidebarOpen, leftSidebarWidth, isRightSidebarOpen, rightSidebarWidth } = storeToRefs(uiStore);
 
 const currentMode = ref<string>('select');
@@ -395,18 +395,37 @@ const runModel = async () => {
   executionStore.resetExecutionState();
 
   try {
+    // Build payload with JSON-first approach
+    const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
+    const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
+
     const payload = {
       model_code: generatedCode.value,
-      data_string: dataStore.inputMode === 'julia' ? dataStore.dataString : jsonToJulia(dataStore.dataString),
-      inits_string: dataStore.inputMode === 'julia' ? dataStore.initsString : jsonToJulia(dataStore.initsString),
-      dependencies: dependencies.value.filter(d => d.name),
+      data: dataPayload,
+      inits: initsPayload,
       settings: samplerSettings.value
     };
-    const response = await fetch(`${backendUrl.value}/api/run_model`, {
+
+    // Prefer new /api/run endpoint; fallback to legacy /api/run_model
+    let response = await fetch(`${backendUrl.value}/api/run`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload)
     });
+
+    if (response.status === 404) {
+      response = await fetch(`${backendUrl.value}/api/run_model`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model_code: payload.model_code,
+          data_string: dataStore.inputMode === 'julia' ? dataStore.dataString : jsonToJulia(JSON.stringify(dataPayload)),
+          inits_string: dataStore.inputMode === 'julia' ? dataStore.initsString : jsonToJulia(JSON.stringify(initsPayload)),
+          settings: samplerSettings.value
+        })
+      });
+    }
+
     const result = await response.json();
     executionStore.executionLogs = result.logs || [];
     if (!response.ok) throw new Error(result.error || `HTTP error! status: ${response.status}`);
@@ -421,6 +440,37 @@ const runModel = async () => {
   }
 };
 
+// Convert a Julia NamedTuple-like string to a JSON-friendly object (best-effort)
+function juliaTupleToJsonObject(juliaString: string): Record<string, unknown> {
+  try {
+    // Very conservative: if it's already JSON, return parsed
+    try { return JSON.parse(juliaString); } catch { /* ignore */ }
+    // Minimal parser for patterns like: (a = 1, b = [1,2], c = [ [..]; [..] ])
+    // We will transform into JSON by replacing Julia syntax tokens carefully.
+    let s = juliaString.trim();
+    if (!s || s === '()') return {};
+    // Replace tuple parens with braces
+    s = s.replace(/^\(/, '{').replace(/\)$/, '}');
+    // Replace "key =" with ""key":"
+    s = s.replace(/(\w+)\s*=\s*/g, '"$1": ');
+    // Replace Julia matrix [a b; c d] with array of arrays [[a,b],[c,d]] (best-effort)
+    s = s.replace(/\[\s*([\s\S]*?)\s*\]/g, (match, content) => {
+      // If it contains semicolons, treat as rows
+      if (content.includes(';')) {
+        const rows = content.split(';').map((row: string) => `[${row.trim().replace(/\s+/g, ', ')}]`);
+        return `[${rows.join(',')}]`;
+      }
+      // Otherwise keep commas
+      return `[${content.replace(/\s+/g, ' ')}]`;
+    });
+    // Remove trailing commas if any
+    s = s.replace(/,\s*}/g, '}');
+    return JSON.parse(s);
+  } catch {
+    return {};
+  }
+}
+
 const jsonToJulia = (jsonString: string): string => {
   try {
     const obj = JSON.parse(jsonString);
diff --git a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
index 0a8f85528..b3d9cf398 100644
--- a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
+++ b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
@@ -3,18 +3,9 @@
 import { storeToRefs } from 'pinia';
 import { useExecutionStore } from '../../stores/executionStore';
 import BaseInput from '../ui/BaseInput.vue';
-import BaseButton from '../ui/BaseButton.vue';
 
 const executionStore = useExecutionStore();
-const { dependencies, samplerSettings } = storeToRefs(executionStore);
-
-const addDependency = () => {
-  dependencies.value.push({ name: '', version: '' });
-};
-
-const removeDependency = (index: number) => {
-  dependencies.value.splice(index, 1);
-};
+const { samplerSettings } = storeToRefs(executionStore);
 </script>
 
 <template>
@@ -33,18 +24,10 @@ const removeDependency = (index: number) => {
         <label for="n_chains">Chains</label>
         <BaseInput id="n_chains" type="number" v-model.number="samplerSettings.n_chains" />
       </div>
-    </div>
-
-    <div class="settings-section">
-      <h4>Dependencies</h4>
-      <div v-for="(dep, index) in dependencies" :key="index" class="dependency-item">
-        <BaseInput v-model="dep.name" placeholder="Package Name" class="dep-input" />
-        <BaseInput v-model="dep.version" placeholder="Version (e.g., 1.0)" class="dep-input" />
-        <BaseButton @click="removeDependency(index)" type="danger" size="small" class="remove-btn">-</BaseButton>
+      <div class="form-group">
+        <label for="seed">Seed (optional)</label>
+        <BaseInput id="seed" type="number" v-model.number="samplerSettings.seed" placeholder="Leave blank for random" />
       </div>
-      <BaseButton @click="addDependency" type="secondary" size="small" class="add-btn">
-        Add Dependency
-      </BaseButton>
     </div>
   </div>
 </template>
@@ -80,19 +63,4 @@ h4 {
   font-size: 0.9em;
   font-weight: 500;
 }
-.dependency-item {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-.dep-input {
-  flex-grow: 1;
-}
-.remove-btn {
-  padding: 5px 10px;
-}
-.add-btn {
-  align-self: flex-start;
-  margin-top: 10px;
-}
 </style>
diff --git a/DoodleBUGS/src/stores/executionStore.ts b/DoodleBUGS/src/stores/executionStore.ts
index 71964d7be..9e205aec3 100644
--- a/DoodleBUGS/src/stores/executionStore.ts
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -12,15 +12,11 @@ export interface GeneratedFile {
   content: string;
 }
 
-export interface Dependency {
-    name: string;
-    version: string;
-}
-
 export interface SamplerSettings {
     n_samples: number;
     n_adapts: number;
     n_chains: number;
+    seed?: number | null;
 }
 
 export const useExecutionStore = defineStore('execution', () => {
@@ -36,19 +32,12 @@ export const useExecutionStore = defineStore('execution', () => {
   const executionError = ref<string | null>(null);
   const generatedFiles = ref<GeneratedFile[]>([]);
 
-  // State for settings
-  const dependencies = ref<Dependency[]>([
-      { name: 'JuliaBUGS', version: '' },
-      { name: 'LogDensityProblemsAD', version: '' },
-      { name: 'AdvancedHMC', version: '' },
-      { name: 'MCMCChains', version: '' },
-      { name: 'ReverseDiff', version: '' },
-      { name: 'JSON3', version: '' }, // Added to ensure the sandbox can write results
-  ]);
+  // Sampler settings (backend uses fixed environment; no per-request dependencies)
   const samplerSettings = ref<SamplerSettings>({
       n_samples: 1000,
       n_adapts: 1000,
-      n_chains: 1
+      n_chains: 1,
+      seed: null,
   });
 
   const setBackendUrl = (url: string | null) => {
@@ -78,7 +67,6 @@ export const useExecutionStore = defineStore('execution', () => {
     executionLogs,
     executionError,
     generatedFiles,
-    dependencies,
     samplerSettings,
     setBackendUrl,
     resetExecutionState,

From 150f7b2ca2205b8297abd05a5d93ff011daa2938 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Wed, 27 Aug 2025 10:32:02 +0530
Subject: [PATCH 04/12] fixed code generation BUGS and working backend

---
 DoodleBUGS/.gitignore                         |  1 +
 DoodleBUGS/runtime/server.jl                  | 21 ++++++++-------
 .../src/composables/useBugsCodeGenerator.ts   | 27 ++++++++++++++++++-
 3 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/DoodleBUGS/.gitignore b/DoodleBUGS/.gitignore
index e02a85b6d..438771e2d 100644
--- a/DoodleBUGS/.gitignore
+++ b/DoodleBUGS/.gitignore
@@ -19,6 +19,7 @@ dist-ssr
 coverage
 *.local
 ztest
+tmp
 
 /cypress/videos/
 /cypress/screenshots/
diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
index 0ee35e663..d0e61a4d4 100644
--- a/DoodleBUGS/runtime/server.jl
+++ b/DoodleBUGS/runtime/server.jl
@@ -98,22 +98,25 @@ function run_model_handler(req::HTTP.Request)
         using StatsBase
         using DataFrames
         using Statistics
+        using ReverseDiff
 
         # Recursively convert JSON3 structures to Julia NamedTuples/Arrays
         to_julia(x) = x
+        # Map JSON null-like values to Julia missing without depending on JSON3.Null type
+        map_null(v) = (isdefined(JSON3, :Null) && v isa getproperty(JSON3, :Null)) ? missing : (v === nothing ? missing : v)
         function to_julia(x::JSON3.Object)
             ks = collect(keys(x))
             keys_sym = Symbol.(ks)
-            vals = map(k -> to_julia(x[k]), ks)
+            vals = map(k -> to_julia(map_null(x[k])), ks)
             return NamedTuple{Tuple(keys_sym)}(vals)
         end
         function to_julia(x::AbstractDict)
             keys_sym = Symbol.(collect(keys(x)))
-            vals = map(k -> to_julia(x[k]), collect(keys(x)))
+            vals = map(k -> to_julia(map_null(x[k])), collect(keys(x)))
             return NamedTuple{Tuple(keys_sym)}(vals)
         end
         function to_julia(x::AbstractVector)
-            xs = map(to_julia, x)
+            xs = map(y -> to_julia(map_null(y)), x)
             # If this is a rectangular vector-of-vectors of numbers, convert to a Matrix
             try
                 if !isempty(xs) && all(y -> y isa AbstractVector, xs)
@@ -160,7 +163,7 @@ function run_model_handler(req::HTTP.Request)
             model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
 
             # Wrap for AD (ReverseDiff by default)
-            ad_model = ADgradient(:ReverseDiff, model; compile=Val(true))
+            ad_model = ADgradient(:ReverseDiff, model)
 
             # Settings
             n_samples = Int(get(settings, :n_samples, 1000))
@@ -168,9 +171,9 @@ function run_model_handler(req::HTTP.Request)
             n_chains = Int(get(settings, :n_chains, 1))
             seed = get(settings, :seed, nothing)
 
-            # RNG
-            has_seed = !(seed === nothing || seed === JSON3.Null() || seed === missing)
-            rng = has_seed ? Random.MersenneTwister(Int(seed)) : Random.MersenneTwister()
+            # RNG (robust to various JSON null representations)
+            seed_val = seed isa Integer ? Int(seed) : tryparse(Int, string(seed))
+            rng = seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val)
 
             # Initial params
             D = LogDensityProblems.dimension(model)
@@ -206,8 +209,8 @@ function run_model_handler(req::HTTP.Request)
                 )
             end
 
-            # Summarize
-            summary_df = MCMCChains.summarystats(samples)
+            # Summarize (convert ChainDataFrame -> DataFrame for row iteration)
+            summary_df = DataFrame(MCMCChains.summarystats(samples))
             results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
 
             open($(results_literal), "w") do f
diff --git a/DoodleBUGS/src/composables/useBugsCodeGenerator.ts b/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
index 2187e2f1f..17f5b360d 100644
--- a/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
+++ b/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
@@ -11,6 +11,7 @@ export function useBugsCodeGenerator(elements: Ref<GraphElement[]>) {
     const nodes = elements.value.filter(el => el.type === 'node') as GraphNode[];
     const edges = elements.value.filter(el => el.type === 'edge') as GraphEdge[];
     const nodeMap = new Map(nodes.map(n => [n.id, n]));
+    const nameToNode = new Map(nodes.map(n => [n.name, n]));
 
     if (nodes.length === 0) {
       return 'model {\n  # Your model will appear here...\n}';
@@ -65,11 +66,35 @@ export function useBugsCodeGenerator(elements: Ref<GraphElement[]>) {
       }
     });
 
+    const formatParam = (raw: string): string => {
+      const p = String(raw).trim();
+      if (!p) return p;
+      // If already indexed (e.g., foo[i,j]) leave as-is
+      if (/\[[^\]]+\]\s*$/.test(p)) return p;
+      // If numeric literal or contains parentheses (function/expression), leave as-is
+      if (/^[+-]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][+-]?\d+)?$/.test(p) || /[()]/.test(p)) return p;
+      const ref = nameToNode.get(p);
+      if (ref && ref.indices && String(ref.indices).trim() !== '') {
+        return `${p}[${ref.indices}]`;
+      }
+      return p;
+    };
+
     const generateCodeRecursive = (member: TreeMember, indentLevel: number): string[] => {
       const lines: string[] = [];
       const indent = '  '.repeat(indentLevel);
 
       const sortedChildren = member.children.sort((a, b) => {
+        // Plates first
+        if (a.type === 'plate' && b.type !== 'plate') return -1;
+        if (b.type === 'plate' && a.type !== 'plate') return 1;
+        // Among nodes: observed/stochastic before deterministic
+        const na = a.type === 'node' ? nodeMap.get(a.id) : undefined;
+        const nb = b.type === 'node' ? nodeMap.get(b.id) : undefined;
+        const pa = na ? (na.nodeType === 'deterministic' ? 1 : 0) : 0;
+        const pb = nb ? (nb.nodeType === 'deterministic' ? 1 : 0) : 0;
+        if (pa !== pb) return pa - pb;
+        // Tiebreaker: topological order
         return sortedNodeIds.indexOf(a.id) - sortedNodeIds.indexOf(b.id);
       });
 
@@ -87,7 +112,7 @@ export function useBugsCodeGenerator(elements: Ref<GraphElement[]>) {
           if (childNode.nodeType === 'stochastic' || childNode.nodeType === 'observed') {
             const params = Object.keys(childNode)
               .filter(key => key.startsWith('param') && childNode[key as keyof GraphNode] && String(childNode[key as keyof GraphNode]).trim() !== '')
-              .map(key => String(childNode[key as keyof GraphNode]))
+              .map(key => formatParam(String(childNode[key as keyof GraphNode])))
               .join(', ');
             lines.push(`${indent}${nodeName} ~ ${childNode.distribution}(${params})`);
           } else if (childNode.nodeType === 'deterministic' && childNode.equation) {

From 5a4647ab1501fdad84c5494801f47491c046aa19 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Wed, 27 Aug 2025 16:15:11 +0530
Subject: [PATCH 05/12] backend bug fixes

---
 DoodleBUGS/runtime/server.jl                  | 260 +++++++++++++++---
 .../src/components/layouts/MainLayout.vue     |  18 +-
 2 files changed, 241 insertions(+), 37 deletions(-)

diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
index d0e61a4d4..4f433b6b3 100644
--- a/DoodleBUGS/runtime/server.jl
+++ b/DoodleBUGS/runtime/server.jl
@@ -1,19 +1,16 @@
-# File: server.jl
 # This server is designed to be a generic executor.
 # It creates a temporary, sandboxed Julia environment for each request,
-# installs specified dependencies, and runs the BUGS model.
 
 using HTTP
 using JSON3
+using Logging
 
-# Define CORS headers to allow cross-origin requests from the web app.
 const CORS_HEADERS = [
     "Access-Control-Allow-Origin" => "*",
     "Access-Control-Allow-Headers" => "Content-Type",
     "Access-Control-Allow-Methods" => "POST, GET, OPTIONS",
 ]
 
-# A simple middleware to handle CORS preflight (OPTIONS) requests and add headers to all responses.
 function cors_handler(handler)
     return function(req::HTTP.Request)
         if HTTP.method(req) == "OPTIONS"
@@ -26,23 +23,21 @@ function cors_handler(handler)
     end
 end
 
-# A simple handler for the health check endpoint.
 function health_check_handler(req::HTTP.Request)
+    @info "Health check ping (backend reachable)"
     return HTTP.Response(200, ["Content-Type" => "application/json"], JSON3.write(Dict("status" => "ok")))
 end
 
 
-# The main handler for processing model execution requests.
 function run_model_handler(req::HTTP.Request)
     logs = String[]
-    push!(logs, "Backend processing started.")
+    log!(logs, "Received /api/run request")
+    log!(logs, "Backend processing started.")
     
-    # Create a temporary working directory for this run (no env activation)
     tmp_dir = mktempdir()
-    push!(logs, "Created temporary working directory at: $(tmp_dir)")
+    log!(logs, "Created temporary working directory at: $(tmp_dir)")
 
     try
-        # Parse the JSON body from the request
         body = JSON3.read(String(req.body))
         model_code = get(body, :model_code, "")
         data_json = haskey(body, :data) ? body[:data] : JSON3.Object()
@@ -51,22 +46,19 @@ function run_model_handler(req::HTTP.Request)
         inits_string = get(body, :inits_string, "")
         settings = get(body, :settings, JSON3.Object())
 
-        push!(logs, "Request body parsed successfully.")
+        log!(logs, "Request body parsed successfully.")
 
-        # Write the BUGS model code to a file for the worker script to read
         model_path = joinpath(tmp_dir, "model.bugs")
         write(model_path, model_code)
-        
-        # Add a Julia-literal representation of the model code for embedding into the worker script
+        log!(logs, "Wrote BUGS model to: $(model_path)")
+
         model_literal = repr(String(model_code))
 
-        # Compute absolute paths and their Julia-literal forms for safe embedding in worker script
         results_path = joinpath(tmp_dir, "results.json")
         payload_path = joinpath(tmp_dir, "payload.json")
         payload_literal = repr(String(payload_path))
         results_literal = repr(String(results_path))
 
-        # Prepare payload for the worker script (prefer JSON data/inits if provided)
         payload_obj = Dict(
             "model_path" => model_path,
             "data" => data_json,
@@ -83,8 +75,11 @@ function run_model_handler(req::HTTP.Request)
         open(payload_path, "w") do f
             JSON3.write(f, payload_obj)
         end
+        log!(logs, "Wrote payload to: $(payload_path)")
 
-        # Generate worker script content
+        buf = IOBuffer()
+        JSON3.write(buf, payload_obj)
+        payload_json_literal = repr(String(take!(buf)))
         script_path = joinpath(tmp_dir, "run_script.jl")
         run_script_content = """
         using JuliaBUGS
@@ -141,6 +136,7 @@ function run_model_handler(req::HTTP.Request)
             # Read payload
             payload = JSON3.read(read($(payload_literal), String))
             settings = payload.settings
+            @info "Worker: payload read"
 
             # Build data/inits
             has_json_data = length(collect(keys(payload.data))) > 0
@@ -157,30 +153,37 @@ function run_model_handler(req::HTTP.Request)
             else
                 inits_nt = isempty(payload.inits_string) ? (;) : eval(Meta.parse(payload.inits_string))
             end
+            @info "Worker: data and inits built"
 
             # Define and compile model
             model_def = JuliaBUGS.@bugs($(model_literal), true, false)
             model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
+            @info "Worker: model compiled"
 
             # Wrap for AD (ReverseDiff by default)
             ad_model = ADgradient(:ReverseDiff, model)
+            @info "Worker: AD gradient wrapper created (ReverseDiff)"
 
             # Settings
             n_samples = Int(get(settings, :n_samples, 1000))
             n_adapts = Int(get(settings, :n_adapts, 1000))
             n_chains = Int(get(settings, :n_chains, 1))
             seed = get(settings, :seed, nothing)
+            @info "Worker: settings parsed"
 
             # RNG (robust to various JSON null representations)
             seed_val = seed isa Integer ? Int(seed) : tryparse(Int, string(seed))
             rng = seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val)
+            @info "Worker: RNG initialized"
 
             # Initial params
             D = LogDensityProblems.dimension(model)
             initial_theta = rand(rng, D)
+            @info "Worker: initial parameters generated" D=D
 
             # Sample (use threading if available and n_chains > 1)
             if n_chains > 1 && Threads.nthreads() > 1
+                @info "Worker: starting sampling with threads"
                 samples = AbstractMCMC.sample(
                     rng,
                     ad_model,
@@ -195,6 +198,7 @@ function run_model_handler(req::HTTP.Request)
                     progress=false,
                 )
             else
+                @info "Worker: starting sampling (single-thread)"
                 samples = AbstractMCMC.sample(
                     rng,
                     ad_model,
@@ -208,74 +212,260 @@ function run_model_handler(req::HTTP.Request)
                     progress=false,
                 )
             end
+            @info "Worker: sampling finished"
 
             # Summarize (convert ChainDataFrame -> DataFrame for row iteration)
             summary_df = DataFrame(MCMCChains.summarystats(samples))
             results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
+            @info "Worker: summarystats computed"
 
             open($(results_literal), "w") do f
                 JSON3.write(f, Dict("success" => true, "results" => results_json))
             end
+            @info "Worker: results written"
         catch e
             open($(results_literal), "w") do f
                 JSON3.write(f, Dict("success" => false, "error" => sprint(showerror, e)))
             end
+            @info "Worker: error captured and written to results"
         end
         """
         write(script_path, run_script_content)
-        push!(logs, "Generated execution script in working directory.")
+        log!(logs, "Generated execution script: $(script_path)")
+
+        standalone_script_content = """
+        using JuliaBUGS
+        using LogDensityProblemsAD
+        using LogDensityProblems
+        using AdvancedHMC
+        using AbstractMCMC
+        using MCMCChains
+        using Random
+        using JSON3
+        using StatsBase
+        using DataFrames
+        using Statistics
+        using ReverseDiff
+
+        # Optional: uncomment to auto-install dependencies if missing
+        # import Pkg; Pkg.activate(temp=true); Pkg.add([
+        #     "JuliaBUGS","LogDensityProblemsAD","LogDensityProblems","AdvancedHMC","AbstractMCMC",
+        #     "MCMCChains","JSON3","StatsBase","DataFrames","Statistics","ReverseDiff"
+        # ])
+
+        # Helpers to convert JSON payload to Julia types
+        to_julia(x) = x
+        map_null(v) = (isdefined(JSON3, :Null) && v isa getproperty(JSON3, :Null)) ? missing : (v === nothing ? missing : v)
+        function to_julia(x::JSON3.Object)
+            ks = collect(keys(x))
+            keys_sym = Symbol.(ks)
+            vals = map(k -> to_julia(map_null(x[k])), ks)
+            return NamedTuple{Tuple(keys_sym)}(vals)
+        end
+        function to_julia(x::AbstractDict)
+            keys_sym = Symbol.(collect(keys(x)))
+            vals = map(k -> to_julia(map_null(x[k])), collect(keys(x)))
+            return NamedTuple{Tuple(keys_sym)}(vals)
+        end
+        function to_julia(x::AbstractVector)
+            xs = map(y -> to_julia(map_null(y)), x)
+            try
+                if !isempty(xs) && all(y -> y isa AbstractVector, xs)
+                    ncols = length(xs[1])
+                    if all(y -> length(y) == ncols, xs) && all(y -> all(z -> z isa Real, y), xs)
+                        has_float = any(y -> any(z -> z isa AbstractFloat, y), xs)
+                        T = has_float ? Float64 : Int
+                        m = Matrix{T}(undef, length(xs), ncols)
+                        @inbounds for i in 1:length(xs), j in 1:ncols
+                            m[i, j] = T(xs[i][j])
+                        end
+                        return m
+                    end
+                end
+            catch
+            end
+            return xs
+        end
+
+        # Embedded payload and model for standalone execution
+        payload = JSON3.read($(payload_json_literal))
+        model_def = JuliaBUGS.@bugs($(model_literal), true, false)
+
+        # Build data/inits
+        has_json_data = length(collect(keys(payload.data))) > 0
+        has_json_inits = length(collect(keys(payload.inits))) > 0
+        data_nt = has_json_data ? to_julia(payload.data) : (isempty(payload.data_string) ? (;) : eval(Meta.parse(payload.data_string)))
+        inits_nt = has_json_inits ? to_julia(payload.inits) : (isempty(payload.inits_string) ? (;) : eval(Meta.parse(payload.inits_string)))
+        settings = payload.settings
+
+        # Compile and wrap
+        model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
+        ad_model = ADgradient(:ReverseDiff, model)
+
+        # Settings
+        n_samples = Int(get(settings, :n_samples, 1000))
+        n_adapts = Int(get(settings, :n_adapts, 1000))
+        n_chains = Int(get(settings, :n_chains, 1))
+        seed = get(settings, :seed, nothing)
+
+        # RNG
+        seed_val = seed isa Integer ? Int(seed) : tryparse(Int, string(seed))
+        rng = seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val)
+
+        # Initial params
+        D = LogDensityProblems.dimension(model)
+        initial_theta = rand(rng, D)
+
+        # Sample
+        sampler = NUTS(0.8)
+        if n_chains > 1 && Threads.nthreads() > 1
+            samples = AbstractMCMC.sample(rng, ad_model, sampler, AbstractMCMC.MCMCThreads(), n_samples;
+                n_adapts=n_adapts, n_chains=n_chains, chain_type=Chains, init_params=initial_theta,
+                discard_initial=n_adapts, progress=false)
+        else
+            samples = AbstractMCMC.sample(rng, ad_model, sampler, n_samples;
+                n_adapts=n_adapts, n_chains=n_chains, chain_type=Chains, init_params=initial_theta,
+                discard_initial=n_adapts, progress=false)
+        end
+
+        # Summarize and write results.json to current directory
+        summary_df = DataFrame(MCMCChains.summarystats(samples))
+        results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
+        open("results.json", "w") do f
+            JSON3.write(f, Dict("success" => true, "results" => results_json))
+        end
+        """
 
-        # Execute the script using the fixed DoodleBUGS runtime project
         julia_executable = joinpath(Sys.BINDIR, "julia")
-        project_dir = abspath(@__DIR__) # runtime directory contains Project.toml
+        project_dir = abspath(@__DIR__)
         cmd = `$(julia_executable) --project=$(project_dir) --threads=auto $(script_path)`
 
-        push!(logs, "Executing script in worker process...")
+        log!(logs, "Executing script in worker process...")
         run(cmd)
-        push!(logs, "Script execution finished.")
+        log!(logs, "Script execution finished.")
 
-        # Read results
+        log!(logs, "Reading results from: $(results_path)")
         results_content = JSON3.read(read(results_path, String))
 
+        log!(logs, "Preparing response...")
+
         if !results_content.success
             throw(ErrorException(results_content.error))
         end
 
-        # Prepare response
+        # Control whether to attach the standalone script; default is false to keep responses small
+        attach_standalone = get(settings, :attach_standalone, false)
+        max_attach_bytes = 2_000_000  # 2 MB
+
+        files_arr = Any[
+            Dict("name" => "model.bugs", "content" => model_code),
+            Dict("name" => "run_script.jl", "content" => run_script_content),
+            Dict("name" => "payload.json", "content" => read(payload_path, String)),
+        ]
+        if isfile(results_path)
+            push!(files_arr, Dict("name" => "results.json", "content" => read(results_path, String)))
+        end
+
+        if attach_standalone
+            if sizeof(standalone_script_content) <= max_attach_bytes
+                push!(files_arr, Dict("name" => "standalone_run.jl", "content" => standalone_script_content))
+            else
+                log!(logs, "Skipping standalone_run.jl (size=$(sizeof(standalone_script_content)) bytes exceeds limit $(max_attach_bytes))")
+            end
+        end
+
+        # Diagnostics: log attachment sizes
+        sizes = String[]
+        for f in files_arr
+            push!(sizes, string(f["name"], "=", sizeof(f["content"])) )
+        end
+        log!(logs, "Attaching $(length(files_arr)) files; sizes(bytes): $(join(sizes, ", "))")
+
         response_body = Dict(
             "success" => true,
             "results" => results_content.results,
             "logs" => logs,
-            "files" => [
-                Dict("name" => "model.bugs", "content" => model_code),
-                Dict("name" => "run_script.jl", "content" => run_script_content),
-            ],
+            "files" => files_arr,
         )
-        return HTTP.Response(200, ["Content-Type" => "application/json"], JSON3.write(response_body))
 
+        log!(logs, "Serializing response...")
+        buf = IOBuffer()
+        JSON3.write(buf, response_body)
+        resp_json = String(take!(buf))
+        log!(logs, "Serialization complete. Response bytes=$(sizeof(resp_json))")
+        log!(logs, "Completed backend execution.")
+        return HTTP.Response(200, ["Content-Type" => "application/json"], resp_json)
     catch e
-        push!(logs, "An error occurred: $(sprint(showerror, e))")
+        log!(logs, "An error occurred: $(sprint(showerror, e))")
         @error "Error during model execution" exception=(e, catch_backtrace())
 
+        files_arr = Any[]
+        if @isdefined(model_code)
+            push!(files_arr, Dict("name" => "model.bugs", "content" => model_code))
+        end
+        if @isdefined(run_script_content)
+            push!(files_arr, Dict("name" => "run_script.jl", "content" => run_script_content))
+        end
+        if @isdefined(standalone_script_content)
+            push!(files_arr, Dict("name" => "standalone_run.jl", "content" => standalone_script_content))
+        end
+        if @isdefined(payload_path) && isfile(payload_path)
+            push!(files_arr, Dict("name" => "payload.json", "content" => read(payload_path, String)))
+        end
+        if @isdefined(results_path) && isfile(results_path)
+            push!(files_arr, Dict("name" => "results.json", "content" => read(results_path, String)))
+        end
         error_response = Dict(
             "success" => false,
             "error" => sprint(showerror, e),
             "logs" => logs,
+            "files" => files_arr,
         )
         return HTTP.Response(500, ["Content-Type" => "application/json"], JSON3.write(error_response))
     finally
-        # Clean up
-        rm(tmp_dir, recursive=true)
+        # Clean up temp directory in background with retries to avoid EBUSY on Windows
+        @async safe_rmdir(tmp_dir)
+    end
+end
+
+"""
+Log a message to both the in-memory logs (returned to the client) and the terminal.
+UI logs are kept clean (no timestamps); terminal logging can include timestamps via the logger formatter.
+"""
+function log!(logs::Vector{String}, msg::AbstractString)
+    push!(logs, msg)
+    @info msg
+end
+
+"""
+Remove directory tree with retries and backoff. Resilient to transient EBUSY on Windows.
+Intended to be called in a background task.
+"""
+function safe_rmdir(path::AbstractString; retries::Int=6, sleep_s::Float64=0.25)
+    for _ in 1:retries
+        try
+            GC.gc()
+            rm(path; recursive=true, force=true)
+            return
+        catch e
+            msg = sprint(showerror, e)
+            if occursin("EBUSY", msg) || e isa IOError
+                sleep(sleep_s)
+                continue
+            else
+                @warn "Unexpected error removing temp dir" path error=e
+                return
+            end
+        end
     end
+    @warn "Failed to remove temp dir after retries; leaving it on disk" path
 end
 
-# Define the router and register the endpoints
 const ROUTER = HTTP.Router()
 HTTP.register!(ROUTER, "GET", "/api/health", health_check_handler)
 HTTP.register!(ROUTER, "POST", "/api/run", run_model_handler)
-HTTP.register!(ROUTER, "POST", "/api/run_model", run_model_handler) # backward compatibility
+HTTP.register!(ROUTER, "POST", "/api/run_model", run_model_handler)
 
-# Start the server with the CORS handler
 port = 8081
 println("Starting JuliaBUGS backend server on http://localhost:$(port)...")
 HTTP.serve(cors_handler(ROUTER), "0.0.0.0", port)
diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index c90036a40..63d7bb6f1 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -403,17 +403,21 @@ const runModel = async () => {
       model_code: generatedCode.value,
       data: dataPayload,
       inits: initsPayload,
-      settings: samplerSettings.value
+      settings: { ...samplerSettings.value, attach_standalone: false }
     };
 
     // Prefer new /api/run endpoint; fallback to legacy /api/run_model
+    const started = performance.now();
     let response = await fetch(`${backendUrl.value}/api/run`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload)
     });
+    const tFetch = performance.now();
+    executionStore.executionLogs.push(`HTTP ${response.status} from /api/run in ${Math.round(tFetch - started)}ms`);
 
     if (response.status === 404) {
+      executionStore.executionLogs.push(`Falling back to /api/run_model`);
       response = await fetch(`${backendUrl.value}/api/run_model`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -426,7 +430,17 @@ const runModel = async () => {
       });
     }
 
-    const result = await response.json();
+    let result: any;
+    try {
+      result = await response.json();
+      executionStore.executionLogs.push(`Parsed JSON response in ${Math.round(performance.now() - tFetch)}ms`);
+    } catch (e) {
+      const text = await response.text().catch(() => '');
+      executionStore.executionError = `Failed to parse JSON: ${(e as Error).message}`;
+      executionStore.executionLogs.push(`Response text (truncated): ${text.slice(0, 400)}...`);
+      throw e;
+    }
+
     executionStore.executionLogs = result.logs || [];
     if (!response.ok) throw new Error(result.error || `HTTP error! status: ${response.status}`);
     executionStore.executionResults = result.results;

From 9b4ac082e7fa40587ff21d0351510194e559c307 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Wed, 27 Aug 2025 16:55:45 +0530
Subject: [PATCH 06/12] committing for draft PR

---
 .../src/components/layouts/MainLayout.vue     | 44 +++++++---
 .../src/components/layouts/TheNavbar.vue      | 53 +++++++++++-
 .../right-sidebar/ExecutionPanel.vue          | 80 ++++++++++++++++---
 3 files changed, 152 insertions(+), 25 deletions(-)

diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index 63d7bb6f1..7e6272d00 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -360,6 +360,12 @@ const handleLoadExample = async (exampleKey: string) => {
 
 const isModelValid = computed(() => validationErrors.value.size === 0);
 
+// Inline navbar connect handler
+const connectToBackendUrl = async (url: string) => {
+  tempBackendUrl.value = url?.trim() || '';
+  await connectToBackend();
+};
+
 const connectToBackend = async () => {
   isConnecting.value = true;
   isConnected.value = false;
@@ -369,13 +375,9 @@ const connectToBackend = async () => {
   
   try {
     const response = await fetch(`${tempBackendUrl.value}/api/health`);
-    if (!response.ok) {
-      throw new Error(`Health check failed with status: ${response.status}`);
-    }
+    if (!response.ok) throw new Error(`Health check failed with status: ${response.status}`);
     const result = await response.json();
-    if (result.status !== 'ok') {
-      throw new Error('Backend returned an invalid health status.');
-    }
+    if (result.status !== 'ok') throw new Error('Backend returned an invalid health status.');
     isConnected.value = true;
     executionStore.executionLogs.push("Connection successful.");
     showConnectModal.value = false;
@@ -388,6 +390,7 @@ const connectToBackend = async () => {
   }
 };
 
+let currentRunController: AbortController | null = null;
 const runModel = async () => {
   if (!isConnected.value || !backendUrl.value || isExecuting.value) return;
 
@@ -395,6 +398,13 @@ const runModel = async () => {
   executionStore.resetExecutionState();
 
   try {
+    // Ensure any previous in-flight request is cancelled
+    if (currentRunController) {
+      currentRunController.abort();
+      currentRunController = null;
+    }
+    currentRunController = new AbortController();
+
     // Build payload with JSON-first approach
     const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
     const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
@@ -411,7 +421,8 @@ const runModel = async () => {
     let response = await fetch(`${backendUrl.value}/api/run`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(payload)
+      body: JSON.stringify(payload),
+      signal: currentRunController.signal
     });
     const tFetch = performance.now();
     executionStore.executionLogs.push(`HTTP ${response.status} from /api/run in ${Math.round(tFetch - started)}ms`);
@@ -426,7 +437,8 @@ const runModel = async () => {
           data_string: dataStore.inputMode === 'julia' ? dataStore.dataString : jsonToJulia(JSON.stringify(dataPayload)),
           inits_string: dataStore.inputMode === 'julia' ? dataStore.initsString : jsonToJulia(JSON.stringify(initsPayload)),
           settings: samplerSettings.value
-        })
+        }),
+        signal: currentRunController.signal
       });
     }
 
@@ -448,9 +460,21 @@ const runModel = async () => {
     executionStore.executionError = null;
 
   } catch (error: unknown) {
-    executionStore.executionError = (error as Error).message;
+    const err = error as any;
+    if (err?.name === 'AbortError') {
+      executionStore.executionError = 'Request was aborted. If this was unintentional, avoid editing or reloading during a run, or try a production preview build.';
+      executionStore.executionLogs.push('Fetch aborted by the browser or app environment.');
+    } else if (err instanceof TypeError) {
+      executionStore.executionError = `Network error during fetch: ${err.message}. This can happen if the request was interrupted (HMR/navigation).`;
+      executionStore.executionLogs.push('Network error likely due to request interruption.');
+    } else {
+      executionStore.executionError = (err as Error).message;
+    }
   } finally {
     isExecuting.value = false;
+    if (currentRunController) {
+      currentRunController = null;
+    }
   }
 };
 
@@ -518,7 +542,7 @@ const jsonToJulia = (jsonString: string): string => {
       @open-about-modal="showAboutModal = true" @export-json="handleExportJson" @open-export-modal="openExportModal"
       @apply-layout="handleGraphLayout" @load-example="handleLoadExample" @validate-model="validateGraph"
       :is-model-valid="isModelValid" @show-validation-issues="showValidationModal = true"
-      @connect-to-backend="showConnectModal = true" @run-model="runModel" />
+      @connect-to-backend-url="connectToBackendUrl" @run-model="runModel" />
 
     <div class="content-area">
       <aside class="left-sidebar" :style="leftSidebarStyle">
diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index 1aca3db5c..f9302eff7 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -1,6 +1,6 @@
 <!-- src/components/layouts/TheNavbar.vue -->
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import type { NodeType } from '../../types';
 import BaseButton from '../ui/BaseButton.vue';
@@ -37,12 +37,13 @@ const emit = defineEmits<{
   (e: 'load-example', exampleKey: string): void;
   (e: 'validate-model'): void;
   (e: 'show-validation-issues'): void;
-  (e: 'connect-to-backend'): void;
+  (e: 'connect-to-backend-url', url: string): void;
   (e: 'run-model'): void;
 }>();
 
 const executionStore = useExecutionStore();
-const { isConnected, isExecuting } = storeToRefs(executionStore);
+const { isConnected, isExecuting, isConnecting, backendUrl } = storeToRefs(executionStore);
+const navBackendUrl = ref(backendUrl.value || 'http://localhost:8081');
 
 const displayTitle = computed(() => {
   if (props.projectName && props.activeGraphName) {
@@ -156,7 +157,22 @@ const handleGridSizeInput = (event: Event) => {
             <BaseButton type="ghost" size="small">Execution</BaseButton>
           </template>
           <template #content>
-            <a href="#" @click.prevent="emit('connect-to-backend')">Connect to Backend...</a>
+            <div class="execution-dropdown" @click.stop>
+              <div class="dropdown-section-title">Backend</div>
+              <div class="dropdown-input-group">
+                <label for="backend-url-nav">URL:</label>
+                <BaseInput id="backend-url-nav" v-model="navBackendUrl" placeholder="http://localhost:8081" class="backend-url-input" />
+              </div>
+              <div class="dropdown-actions">
+                <span class="connection-status" :class="{ connected: isConnected }">
+                  <strong>{{ isConnected ? 'Connected' : 'Disconnected' }}</strong>
+                </span>
+                <BaseButton @click="emit('connect-to-backend-url', navBackendUrl)" :disabled="isConnecting" size="small" type="primary">
+                  <span v-if="isConnecting">Connecting...</span>
+                  <span v-else>Connect</span>
+                </BaseButton>
+              </div>
+            </div>
           </template>
         </DropdownMenu>
 
@@ -412,4 +428,33 @@ const handleGridSizeInput = (event: Event) => {
     align-items: center;
     gap: 5px;
 }
+
+.execution-dropdown {
+  width: 250px;
+  padding: 4px 10px 8px;
+}
+
+.dropdown-input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 8px;
+}
+
+.backend-url-input {
+  flex: 1 1 auto;
+  width: 90%;
+}
+
+.dropdown-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.connection-status {
+  opacity: 0.7;
+  color: rgb(228, 15, 15);
+}
+.connection-status.connected { opacity: 1; color: green }
 </style>
diff --git a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
index 906ddf620..fd529e99f 100644
--- a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -1,6 +1,5 @@
-<!-- src/components/right-sidebar/ExecutionPanel.vue -->
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useExecutionStore } from '../../stores/executionStore';
 import BaseButton from '../ui/BaseButton.vue';
@@ -17,6 +16,24 @@ const {
 const activeTab = ref<'results' | 'logs' | 'files'>('results');
 const copySuccessStates = ref<{ [key: string]: boolean }>({});
 
+// Active file tab state
+const activeFileName = ref<string | null>(null);
+watch(generatedFiles, (files) => {
+  if (files.length === 0) {
+    activeFileName.value = null;
+    return;
+  }
+  if (!activeFileName.value || !files.some(f => f.name === activeFileName.value)) {
+    activeFileName.value = files[0].name;
+  }
+}, { immediate: true });
+
+const activeFileContent = computed(() => {
+  if (!activeFileName.value) return '';
+  const f = generatedFiles.value.find(f => f.name === activeFileName.value);
+  return f?.content ?? '';
+});
+
 const resultHeaders = computed(() => {
   if (!executionResults.value || executionResults.value.length === 0) {
     return [];
@@ -105,16 +122,24 @@ const copyFileContent = (fileName: string, content: string) => {
         <div v-if="generatedFiles.length === 0" class="placeholder">
           <p>Generated files from the sandbox will appear here.</p>
         </div>
-        <div v-else class="files-container">
-          <div v-for="file in generatedFiles" :key="file.name" class="file-item">
+        <div v-else class="files-tabbed">
+          <div class="file-tabs">
+            <button v-for="file in generatedFiles" :key="file.name"
+                    class="file-tab"
+                    :class="{ active: file.name === activeFileName }"
+                    @click="activeFileName = file.name">
+              {{ file.name }}
+            </button>
+          </div>
+          <div class="file-view" v-if="activeFileName">
             <div class="file-header">
-              <strong>{{ file.name }}</strong>
-              <BaseButton @click="copyFileContent(file.name, file.content)" size="small">
-                <i v-if="copySuccessStates[file.name]" class="fas fa-check"></i>
+              <strong>{{ activeFileName }}</strong>
+              <BaseButton @click="copyFileContent(activeFileName, activeFileContent)" size="small">
+                <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
                 <span v-else>Copy</span>
               </BaseButton>
             </div>
-            <pre class="file-content">{{ file.content }}</pre>
+            <pre class="file-content">{{ activeFileContent }}</pre>
           </div>
         </div>
       </div>
@@ -244,13 +269,46 @@ const copyFileContent = (fileName: string, content: string) => {
   background-color: var(--color-background-soft);
 }
 
-.files-container {
+.files-tabbed {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 6px;
+}
+
+.file-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--color-border);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  padding-bottom: 2px;
+  scrollbar-width: thin;
+  overscroll-behavior-x: contain; /* prevent horizontal scroll chaining to content */
+}
+
+.file-tab {
+  padding: 3px 8px;
+  font-size: 12px;
+  line-height: 1.2;
+  border: 1px solid var(--color-border);
+  border-bottom: none;
+  background: var(--color-background-mute);
+  color: var(--color-text);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  cursor: pointer;
+  flex: 0 0 auto; /* prevent tabs from stretching */
+}
+
+.file-tab.active {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
 }
 
-.file-item {
+.file-view {
   border: 1px solid var(--color-border);
   border-radius: 4px;
 }

From 60e40eb43c5d629c8629e5c5f7c647895d87c389 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Wed, 27 Aug 2025 17:04:38 +0530
Subject: [PATCH 07/12] formatting

---
 DoodleBUGS/src/components/layouts/TheNavbar.vue                 | 1 -
 .../src/components/left-sidebar/ExecutionSettingsPanel.vue      | 1 -
 DoodleBUGS/src/components/panels/DataInputPanel.vue             | 1 -
 DoodleBUGS/src/composables/useGraphValidator.ts                 | 2 --
 DoodleBUGS/src/stores/dataStore.ts                              | 2 --
 DoodleBUGS/src/stores/executionStore.ts                         | 2 --
 DoodleBUGS/src/stores/uiStore.ts                                | 2 --
 7 files changed, 11 deletions(-)

diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index f9302eff7..29553e678 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -1,4 +1,3 @@
-<!-- src/components/layouts/TheNavbar.vue -->
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
diff --git a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
index b3d9cf398..61c413f94 100644
--- a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
+++ b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
@@ -1,4 +1,3 @@
-<!-- src/components/left-sidebar/ExecutionSettingsPanel.vue -->
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useExecutionStore } from '../../stores/executionStore';
diff --git a/DoodleBUGS/src/components/panels/DataInputPanel.vue b/DoodleBUGS/src/components/panels/DataInputPanel.vue
index 641d5f57d..c0ae5c2ed 100644
--- a/DoodleBUGS/src/components/panels/DataInputPanel.vue
+++ b/DoodleBUGS/src/components/panels/DataInputPanel.vue
@@ -1,4 +1,3 @@
-<!-- src/components/panels/DataInputPanel.vue -->
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useDataStore } from '../../stores/dataStore';
diff --git a/DoodleBUGS/src/composables/useGraphValidator.ts b/DoodleBUGS/src/composables/useGraphValidator.ts
index 79e6f516c..72a0e2874 100644
--- a/DoodleBUGS/src/composables/useGraphValidator.ts
+++ b/DoodleBUGS/src/composables/useGraphValidator.ts
@@ -1,5 +1,3 @@
-// src/composables/useGraphValidator.ts
-
 import { ref, watch } from 'vue';
 import type { Ref } from 'vue';
 import type { GraphElement, GraphNode, GraphEdge, ValidationError, ModelData } from '../types';
diff --git a/DoodleBUGS/src/stores/dataStore.ts b/DoodleBUGS/src/stores/dataStore.ts
index f94e2c754..fe35d2db0 100644
--- a/DoodleBUGS/src/stores/dataStore.ts
+++ b/DoodleBUGS/src/stores/dataStore.ts
@@ -1,5 +1,3 @@
-// src/stores/dataStore.ts
-
 import { defineStore } from 'pinia';
 import { ref, computed } from 'vue';
 import { useGraphStore } from './graphStore';
diff --git a/DoodleBUGS/src/stores/executionStore.ts b/DoodleBUGS/src/stores/executionStore.ts
index 9e205aec3..3a5a62f4b 100644
--- a/DoodleBUGS/src/stores/executionStore.ts
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -1,5 +1,3 @@
-// src/stores/executionStore.ts
-
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
diff --git a/DoodleBUGS/src/stores/uiStore.ts b/DoodleBUGS/src/stores/uiStore.ts
index 76d84100f..9f15706df 100644
--- a/DoodleBUGS/src/stores/uiStore.ts
+++ b/DoodleBUGS/src/stores/uiStore.ts
@@ -1,5 +1,3 @@
-// src/stores/uiStore.ts
-
 import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 

From 7319f815753c2d17f42113cc0323530f182909f4 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Thu, 28 Aug 2025 03:38:04 +0530
Subject: [PATCH 08/12] updated backend anc improved lot of things

---
 DoodleBUGS/runtime/server.jl                  | 344 +++++---------
 .../src/components/layouts/MainLayout.vue     | 137 +++++-
 .../src/components/layouts/TheNavbar.vue      |  11 +-
 .../left-sidebar/ExecutionSettingsPanel.vue   |   1 +
 .../right-sidebar/ExecutionPanel.vue          | 419 ++++++++++++++++--
 .../src/composables/useBugsCodeGenerator.ts   | 162 +++++++
 DoodleBUGS/src/stores/executionStore.ts       |  22 +
 DoodleBUGS/src/stores/uiStore.ts              |   9 +-
 8 files changed, 820 insertions(+), 285 deletions(-)

diff --git a/DoodleBUGS/runtime/server.jl b/DoodleBUGS/runtime/server.jl
index 4f433b6b3..cd3cf5e41 100644
--- a/DoodleBUGS/runtime/server.jl
+++ b/DoodleBUGS/runtime/server.jl
@@ -55,10 +55,8 @@ function run_model_handler(req::HTTP.Request)
         model_literal = repr(String(model_code))
 
         results_path = joinpath(tmp_dir, "results.json")
-        payload_path = joinpath(tmp_dir, "payload.json")
-        payload_literal = repr(String(payload_path))
-        results_literal = repr(String(results_path))
 
+        payload_path = joinpath(tmp_dir, "payload.json")
         payload_obj = Dict(
             "model_path" => model_path,
             "data" => data_json,
@@ -70,6 +68,7 @@ function run_model_handler(req::HTTP.Request)
                 "n_adapts" => get(settings, :n_adapts, 1000),
                 "n_chains" => get(settings, :n_chains, 1),
                 "seed" => get(settings, :seed, nothing),
+                "timeout_s" => get(settings, :timeout_s, nothing),
             ),
         )
         open(payload_path, "w") do f
@@ -77,272 +76,172 @@ function run_model_handler(req::HTTP.Request)
         end
         log!(logs, "Wrote payload to: $(payload_path)")
 
-        buf = IOBuffer()
-        JSON3.write(buf, payload_obj)
-        payload_json_literal = repr(String(take!(buf)))
         script_path = joinpath(tmp_dir, "run_script.jl")
         run_script_content = """
-        using JuliaBUGS
-        using LogDensityProblemsAD
-        using LogDensityProblems
-        using AdvancedHMC
-        using AbstractMCMC
-        using MCMCChains
-        using Random
-        using JSON3
-        using StatsBase
-        using DataFrames
-        using Statistics
-        using ReverseDiff
-
-        # Recursively convert JSON3 structures to Julia NamedTuples/Arrays
-        to_julia(x) = x
-        # Map JSON null-like values to Julia missing without depending on JSON3.Null type
-        map_null(v) = (isdefined(JSON3, :Null) && v isa getproperty(JSON3, :Null)) ? missing : (v === nothing ? missing : v)
-        function to_julia(x::JSON3.Object)
-            ks = collect(keys(x))
-            keys_sym = Symbol.(ks)
-            vals = map(k -> to_julia(map_null(x[k])), ks)
-            return NamedTuple{Tuple(keys_sym)}(vals)
-        end
-        function to_julia(x::AbstractDict)
-            keys_sym = Symbol.(collect(keys(x)))
-            vals = map(k -> to_julia(map_null(x[k])), collect(keys(x)))
-            return NamedTuple{Tuple(keys_sym)}(vals)
-        end
-        function to_julia(x::AbstractVector)
-            xs = map(y -> to_julia(map_null(y)), x)
-            # If this is a rectangular vector-of-vectors of numbers, convert to a Matrix
-            try
-                if !isempty(xs) && all(y -> y isa AbstractVector, xs)
-                    ncols = length(xs[1])
-                    if all(y -> length(y) == ncols, xs) && all(y -> all(z -> z isa Real, y), xs)
-                        has_float = any(y -> any(z -> z isa AbstractFloat, y), xs)
-                        T = has_float ? Float64 : Int
-                        m = Matrix{T}(undef, length(xs), ncols)
-                        @inbounds for i in 1:length(xs), j in 1:ncols
-                            m[i, j] = T(xs[i][j])
-                        end
-                        return m
-                    end
-                end
-            catch
-                # fall through to returning xs
-            end
-            return xs
-        end
+        using JuliaBUGS, AbstractMCMC, AdvancedHMC, LogDensityProblems, LogDensityProblemsAD, MCMCChains, ReverseDiff, Random, JSON3, DataFrames, StatsBase, Statistics
 
         try
             # Read payload
-            payload = JSON3.read(read($(payload_literal), String))
+            payload = JSON3.read(read($(repr(String(payload_path))), String))
             settings = payload.settings
-            @info "Worker: payload read"
 
-            # Build data/inits
-            has_json_data = length(collect(keys(payload.data))) > 0
-            has_json_inits = length(collect(keys(payload.inits))) > 0
+            # Robust integer parsing for settings that may arrive as numbers or strings
+            to_int(x, default) = begin
+                xv = x
+                if xv isa Integer
+                    return Int(xv)
+                else
+                    p = tryparse(Int, string(xv))
+                    return p === nothing ? default : p
+                end
+            end
 
-            if has_json_data
-                data_nt = to_julia(payload.data)
-            else
-                # Fallback: parse Julia tuple string
-                data_nt = isempty(payload.data_string) ? (;) : eval(Meta.parse(payload.data_string))
+            # Build data/inits as NamedTuples; prefer strings when valid, else JSON fallback that supports keys like "alpha.c"
+            to_nt(obj) = (; (Symbol(String(k)) => v for (k, v) in pairs(obj))...)
+            data_nt = begin
+                if !isempty(payload.data_string)
+                    try
+                        eval(Meta.parse(payload.data_string))
+                    catch
+                        to_nt(payload.data)
+                    end
+                else
+                    to_nt(payload.data)
+                end
             end
-            if has_json_inits
-                inits_nt = to_julia(payload.inits)
-            else
-                inits_nt = isempty(payload.inits_string) ? (;) : eval(Meta.parse(payload.inits_string))
+            inits_nt = begin
+                if !isempty(payload.inits_string)
+                    try
+                        eval(Meta.parse(payload.inits_string))
+                    catch
+                        to_nt(payload.inits)
+                    end
+                else
+                    to_nt(payload.inits)
+                end
             end
-            @info "Worker: data and inits built"
 
             # Define and compile model
             model_def = JuliaBUGS.@bugs($(model_literal), true, false)
             model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
-            @info "Worker: model compiled"
 
             # Wrap for AD (ReverseDiff by default)
             ad_model = ADgradient(:ReverseDiff, model)
-            @info "Worker: AD gradient wrapper created (ReverseDiff)"
+            ld_model = AbstractMCMC.LogDensityModel(ad_model)
 
             # Settings
-            n_samples = Int(get(settings, :n_samples, 1000))
-            n_adapts = Int(get(settings, :n_adapts, 1000))
-            n_chains = Int(get(settings, :n_chains, 1))
+            n_samples = to_int(get(settings, :n_samples, 1000), 1000)
+            n_adapts = to_int(get(settings, :n_adapts, 1000), 1000)
+            n_chains = to_int(get(settings, :n_chains, 1), 1)
             seed = get(settings, :seed, nothing)
-            @info "Worker: settings parsed"
 
-            # RNG (robust to various JSON null representations)
+            # RNG
             seed_val = seed isa Integer ? Int(seed) : tryparse(Int, string(seed))
             rng = seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val)
-            @info "Worker: RNG initialized"
 
             # Initial params
-            D = LogDensityProblems.dimension(model)
+            D = LogDensityProblems.dimension(ad_model)
             initial_theta = rand(rng, D)
-            @info "Worker: initial parameters generated" D=D
 
-            # Sample (use threading if available and n_chains > 1)
+            # Sample
             if n_chains > 1 && Threads.nthreads() > 1
-                @info "Worker: starting sampling with threads"
                 samples = AbstractMCMC.sample(
                     rng,
-                    ad_model,
+                    ld_model,
                     NUTS(0.8),
                     AbstractMCMC.MCMCThreads(),
-                    n_samples;
+                    n_samples,
+                    n_chains;
                     n_adapts=n_adapts,
-                    n_chains=n_chains,
                     chain_type=Chains,
                     init_params=initial_theta,
                     discard_initial=n_adapts,
                     progress=false,
                 )
             else
-                @info "Worker: starting sampling (single-thread)"
-                samples = AbstractMCMC.sample(
-                    rng,
-                    ad_model,
-                    NUTS(0.8),
-                    n_samples;
-                    n_adapts=n_adapts,
-                    n_chains=n_chains,
-                    chain_type=Chains,
-                    init_params=initial_theta,
-                    discard_initial=n_adapts,
-                    progress=false,
-                )
+                if n_chains > 1
+                    samples = AbstractMCMC.sample(
+                        rng,
+                        ld_model,
+                        NUTS(0.8),
+                        AbstractMCMC.MCMCSerial(),
+                        n_samples,
+                        n_chains;
+                        n_adapts=n_adapts,
+                        chain_type=Chains,
+                        init_params=initial_theta,
+                        discard_initial=n_adapts,
+                        progress=false,
+                    )
+                else
+                    samples = AbstractMCMC.sample(
+                        rng,
+                        ld_model,
+                        NUTS(0.8),
+                        n_samples;
+                        n_adapts=n_adapts,
+                        chain_type=Chains,
+                        init_params=initial_theta,
+                        discard_initial=n_adapts,
+                        progress=false,
+                    )
+                end
             end
-            @info "Worker: sampling finished"
 
-            # Summarize (convert ChainDataFrame -> DataFrame for row iteration)
+            # Summaries
             summary_df = DataFrame(MCMCChains.summarystats(samples))
-            results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
-            @info "Worker: summarystats computed"
-
-            open($(results_literal), "w") do f
-                JSON3.write(f, Dict("success" => true, "results" => results_json))
+            summary_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
+
+            q = [0.025, 0.25, 0.5, 0.75, 0.975]
+            quant_df = DataFrame(MCMCChains.quantile(samples; q=q))
+            quant_json = [Dict(pairs(row)) for row in eachrow(quant_df)]
+
+            open($(repr(String(results_path))), "w") do f
+                JSON3.write(f, Dict(
+                    "success" => true,
+                    "summary" => summary_json,
+                    "quantiles" => quant_json,
+                ))
             end
-            @info "Worker: results written"
         catch e
-            open($(results_literal), "w") do f
+            open($(repr(String(results_path))), "w") do f
                 JSON3.write(f, Dict("success" => false, "error" => sprint(showerror, e)))
             end
-            @info "Worker: error captured and written to results"
         end
         """
         write(script_path, run_script_content)
         log!(logs, "Generated execution script: $(script_path)")
 
-        standalone_script_content = """
-        using JuliaBUGS
-        using LogDensityProblemsAD
-        using LogDensityProblems
-        using AdvancedHMC
-        using AbstractMCMC
-        using MCMCChains
-        using Random
-        using JSON3
-        using StatsBase
-        using DataFrames
-        using Statistics
-        using ReverseDiff
-
-        # Optional: uncomment to auto-install dependencies if missing
-        # import Pkg; Pkg.activate(temp=true); Pkg.add([
-        #     "JuliaBUGS","LogDensityProblemsAD","LogDensityProblems","AdvancedHMC","AbstractMCMC",
-        #     "MCMCChains","JSON3","StatsBase","DataFrames","Statistics","ReverseDiff"
-        # ])
-
-        # Helpers to convert JSON payload to Julia types
-        to_julia(x) = x
-        map_null(v) = (isdefined(JSON3, :Null) && v isa getproperty(JSON3, :Null)) ? missing : (v === nothing ? missing : v)
-        function to_julia(x::JSON3.Object)
-            ks = collect(keys(x))
-            keys_sym = Symbol.(ks)
-            vals = map(k -> to_julia(map_null(x[k])), ks)
-            return NamedTuple{Tuple(keys_sym)}(vals)
-        end
-        function to_julia(x::AbstractDict)
-            keys_sym = Symbol.(collect(keys(x)))
-            vals = map(k -> to_julia(map_null(x[k])), collect(keys(x)))
-            return NamedTuple{Tuple(keys_sym)}(vals)
-        end
-        function to_julia(x::AbstractVector)
-            xs = map(y -> to_julia(map_null(y)), x)
-            try
-                if !isempty(xs) && all(y -> y isa AbstractVector, xs)
-                    ncols = length(xs[1])
-                    if all(y -> length(y) == ncols, xs) && all(y -> all(z -> z isa Real, y), xs)
-                        has_float = any(y -> any(z -> z isa AbstractFloat, y), xs)
-                        T = has_float ? Float64 : Int
-                        m = Matrix{T}(undef, length(xs), ncols)
-                        @inbounds for i in 1:length(xs), j in 1:ncols
-                            m[i, j] = T(xs[i][j])
-                        end
-                        return m
-                    end
-                end
-            catch
-            end
-            return xs
-        end
-
-        # Embedded payload and model for standalone execution
-        payload = JSON3.read($(payload_json_literal))
-        model_def = JuliaBUGS.@bugs($(model_literal), true, false)
-
-        # Build data/inits
-        has_json_data = length(collect(keys(payload.data))) > 0
-        has_json_inits = length(collect(keys(payload.inits))) > 0
-        data_nt = has_json_data ? to_julia(payload.data) : (isempty(payload.data_string) ? (;) : eval(Meta.parse(payload.data_string)))
-        inits_nt = has_json_inits ? to_julia(payload.inits) : (isempty(payload.inits_string) ? (;) : eval(Meta.parse(payload.inits_string)))
-        settings = payload.settings
-
-        # Compile and wrap
-        model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
-        ad_model = ADgradient(:ReverseDiff, model)
-
-        # Settings
-        n_samples = Int(get(settings, :n_samples, 1000))
-        n_adapts = Int(get(settings, :n_adapts, 1000))
-        n_chains = Int(get(settings, :n_chains, 1))
-        seed = get(settings, :seed, nothing)
-
-        # RNG
-        seed_val = seed isa Integer ? Int(seed) : tryparse(Int, string(seed))
-        rng = seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val)
-
-        # Initial params
-        D = LogDensityProblems.dimension(model)
-        initial_theta = rand(rng, D)
-
-        # Sample
-        sampler = NUTS(0.8)
-        if n_chains > 1 && Threads.nthreads() > 1
-            samples = AbstractMCMC.sample(rng, ad_model, sampler, AbstractMCMC.MCMCThreads(), n_samples;
-                n_adapts=n_adapts, n_chains=n_chains, chain_type=Chains, init_params=initial_theta,
-                discard_initial=n_adapts, progress=false)
-        else
-            samples = AbstractMCMC.sample(rng, ad_model, sampler, n_samples;
-                n_adapts=n_adapts, n_chains=n_chains, chain_type=Chains, init_params=initial_theta,
-                discard_initial=n_adapts, progress=false)
-        end
-
-        # Summarize and write results.json to current directory
-        summary_df = DataFrame(MCMCChains.summarystats(samples))
-        results_json = [Dict(pairs(row)) for row in eachrow(summary_df)]
-        open("results.json", "w") do f
-            JSON3.write(f, Dict("success" => true, "results" => results_json))
-        end
-        """
-
         julia_executable = joinpath(Sys.BINDIR, "julia")
         project_dir = abspath(@__DIR__)
         cmd = `$(julia_executable) --project=$(project_dir) --threads=auto $(script_path)`
 
         log!(logs, "Executing script in worker process...")
-        run(cmd)
-        log!(logs, "Script execution finished.")
+        timeout_s = try Int(get(settings, :timeout_s, 0)) catch; 0 end
+        if timeout_s <= 0
+            run(cmd)
+            log!(logs, "Script execution finished.")
+        else
+            proc = run(cmd; wait=false)
+            log!(logs, "Worker process started; enforcing timeout of $(timeout_s)s")
+            deadline = time() + timeout_s
+            while process_running(proc) && time() < deadline
+                sleep(0.1)
+            end
+            if process_running(proc)
+                log!(logs, "Timeout reached; killing worker process...")
+                try
+                    kill(proc)
+                    log!(logs, "Worker process killed due to timeout.")
+                catch e
+                    log!(logs, "Failed to kill worker process: $(sprint(showerror, e)))")
+                end
+                throw(ErrorException("Execution timed out after $(timeout_s) seconds"))
+            else
+                wait(proc)
+                log!(logs, "Script execution finished within timeout.")
+            end
+        end
 
         log!(logs, "Reading results from: $(results_path)")
         results_content = JSON3.read(read(results_path, String))
@@ -353,10 +252,6 @@ function run_model_handler(req::HTTP.Request)
             throw(ErrorException(results_content.error))
         end
 
-        # Control whether to attach the standalone script; default is false to keep responses small
-        attach_standalone = get(settings, :attach_standalone, false)
-        max_attach_bytes = 2_000_000  # 2 MB
-
         files_arr = Any[
             Dict("name" => "model.bugs", "content" => model_code),
             Dict("name" => "run_script.jl", "content" => run_script_content),
@@ -366,14 +261,6 @@ function run_model_handler(req::HTTP.Request)
             push!(files_arr, Dict("name" => "results.json", "content" => read(results_path, String)))
         end
 
-        if attach_standalone
-            if sizeof(standalone_script_content) <= max_attach_bytes
-                push!(files_arr, Dict("name" => "standalone_run.jl", "content" => standalone_script_content))
-            else
-                log!(logs, "Skipping standalone_run.jl (size=$(sizeof(standalone_script_content)) bytes exceeds limit $(max_attach_bytes))")
-            end
-        end
-
         # Diagnostics: log attachment sizes
         sizes = String[]
         for f in files_arr
@@ -383,7 +270,9 @@ function run_model_handler(req::HTTP.Request)
 
         response_body = Dict(
             "success" => true,
-            "results" => results_content.results,
+            "results" => (haskey(results_content, :summary) ? results_content[:summary] : (haskey(results_content, :results) ? results_content[:results] : Any[])),
+            "summary" => (haskey(results_content, :summary) ? results_content[:summary] : Any[]),
+            "quantiles" => (haskey(results_content, :quantiles) ? results_content[:quantiles] : Any[]),
             "logs" => logs,
             "files" => files_arr,
         )
@@ -406,9 +295,6 @@ function run_model_handler(req::HTTP.Request)
         if @isdefined(run_script_content)
             push!(files_arr, Dict("name" => "run_script.jl", "content" => run_script_content))
         end
-        if @isdefined(standalone_script_content)
-            push!(files_arr, Dict("name" => "standalone_run.jl", "content" => standalone_script_content))
-        end
         if @isdefined(payload_path) && isfile(payload_path)
             push!(files_arr, Dict("name" => "payload.json", "content" => read(payload_path, String)))
         end
diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index 7e6272d00..534849d4f 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -28,8 +28,9 @@ import { useDataStore } from '../../stores/dataStore';
 import { useExecutionStore } from '../../stores/executionStore';
 import { useGraphInstance } from '../../composables/useGraphInstance';
 import { useGraphValidator } from '../../composables/useGraphValidator';
-import { useBugsCodeGenerator } from '../../composables/useBugsCodeGenerator';
+import { useBugsCodeGenerator, generateStandaloneScript } from '../../composables/useBugsCodeGenerator';
 import type { GraphElement, NodeType, PaletteItemType, ExampleModel } from '../../types';
+import type { ExecutionResult, GeneratedFile } from '../../stores/executionStore';
 
 interface ExportOptions {
   bg: string;
@@ -370,7 +371,7 @@ const connectToBackend = async () => {
   isConnecting.value = true;
   isConnected.value = false;
   executionStore.setBackendUrl(tempBackendUrl.value);
-  uiStore.setActiveRightTab('execution');
+  uiStore.setActiveRightTab('connection');
   executionStore.executionLogs.push(`Attempting to connect to backend at ${tempBackendUrl.value}...`);
   
   try {
@@ -381,6 +382,7 @@ const connectToBackend = async () => {
     isConnected.value = true;
     executionStore.executionLogs.push("Connection successful.");
     showConnectModal.value = false;
+    isRightSidebarOpen.value = true;
   } catch (error: unknown) {
     const errorMessage = (error as Error).message;
     executionStore.executionLogs.push(`Connection failed: ${errorMessage}`);
@@ -391,11 +393,24 @@ const connectToBackend = async () => {
 };
 
 let currentRunController: AbortController | null = null;
+let abortedByUser = false;
+const abortRun = () => {
+  if (currentRunController) {
+    abortedByUser = true;
+    executionStore.executionLogs.push('Abort requested by user...');
+    currentRunController.abort();
+  }
+};
+
 const runModel = async () => {
   if (!isConnected.value || !backendUrl.value || isExecuting.value) return;
 
-  uiStore.setActiveRightTab('execution');
+  uiStore.setActiveRightTab('connection');
   executionStore.resetExecutionState();
+  executionStore.setExecutionPanelTab('logs');
+
+  // Reset abort flag each run
+  abortedByUser = false;
 
   try {
     // Ensure any previous in-flight request is cancelled
@@ -405,15 +420,20 @@ const runModel = async () => {
     }
     currentRunController = new AbortController();
 
-    // Build payload with JSON-first approach
+    // Build payload with JSON-first approach AND include Julia literals for backend
     const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
     const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
 
+    const dataString = dataStore.inputMode === 'julia' ? (dataStore.dataString || '') : jsonToJulia(JSON.stringify(dataPayload));
+    const initsString = dataStore.inputMode === 'julia' ? (dataStore.initsString || '') : jsonToJulia(JSON.stringify(initsPayload));
+
     const payload = {
       model_code: generatedCode.value,
       data: dataPayload,
       inits: initsPayload,
-      settings: { ...samplerSettings.value, attach_standalone: false }
+      data_string: dataString,
+      inits_string: initsString,
+      settings: { ...samplerSettings.value }
     };
 
     // Prefer new /api/run endpoint; fallback to legacy /api/run_model
@@ -434,17 +454,25 @@ const runModel = async () => {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           model_code: payload.model_code,
-          data_string: dataStore.inputMode === 'julia' ? dataStore.dataString : jsonToJulia(JSON.stringify(dataPayload)),
-          inits_string: dataStore.inputMode === 'julia' ? dataStore.initsString : jsonToJulia(JSON.stringify(initsPayload)),
+          data_string: dataString,
+          inits_string: initsString,
           settings: samplerSettings.value
         }),
         signal: currentRunController.signal
       });
     }
 
-    let result: any;
+    type RunApiResponse = {
+      logs?: string[];
+      error?: string;
+      results?: ExecutionResult[] | null;
+      summary?: ExecutionResult[] | null;
+      quantiles?: ExecutionResult[] | null;
+      files?: GeneratedFile[];
+    };
+    let result: RunApiResponse;
     try {
-      result = await response.json();
+      result = (await response.json()) as RunApiResponse;
       executionStore.executionLogs.push(`Parsed JSON response in ${Math.round(performance.now() - tFetch)}ms`);
     } catch (e) {
       const text = await response.text().catch(() => '');
@@ -453,28 +481,54 @@ const runModel = async () => {
       throw e;
     }
 
-    executionStore.executionLogs = result.logs || [];
+    executionStore.executionLogs = result.logs ?? [];
     if (!response.ok) throw new Error(result.error || `HTTP error! status: ${response.status}`);
-    executionStore.executionResults = result.results;
-    executionStore.generatedFiles = result.files;
+
+    // Maintain backward-compat; prefer summary if present
+    executionStore.executionResults = result.results ?? result.summary ?? null;
+    executionStore.summaryResults = result.summary ?? null;
+    executionStore.quantileResults = result.quantiles ?? null;
+
+    const frontendStandaloneScript = generateStandaloneScript({
+      modelCode: generatedCode.value,
+      data: dataPayload,
+      inits: initsPayload,
+      settings: {
+        n_samples: samplerSettings.value.n_samples,
+        n_adapts: samplerSettings.value.n_adapts,
+        n_chains: samplerSettings.value.n_chains,
+        seed: samplerSettings.value.seed ?? undefined,
+      }
+    });
+    const frontendStandaloneFile: GeneratedFile = { name: 'standalone.jl', content: frontendStandaloneScript };
+    executionStore.generatedFiles = (result.files ?? []).filter(file => file.name !== 'standalone.jl').concat(frontendStandaloneFile);
     executionStore.executionError = null;
 
+    // Switch to Results on successful completion
+    executionStore.setExecutionPanelTab('results');
+
   } catch (error: unknown) {
-    const err = error as any;
+    const err = error as Error & { name?: string };
     if (err?.name === 'AbortError') {
-      executionStore.executionError = 'Request was aborted. If this was unintentional, avoid editing or reloading during a run, or try a production preview build.';
-      executionStore.executionLogs.push('Fetch aborted by the browser or app environment.');
+      if (abortedByUser) {
+        executionStore.executionError = 'Execution aborted by user.';
+        executionStore.executionLogs.push('Fetch aborted by user.');
+      } else {
+        executionStore.executionError = 'Request was aborted. If this was unintentional, avoid editing or reloading during a run, or try a production preview build.';
+        executionStore.executionLogs.push('Fetch aborted by the browser or app environment.');
+      }
     } else if (err instanceof TypeError) {
       executionStore.executionError = `Network error during fetch: ${err.message}. This can happen if the request was interrupted (HMR/navigation).`;
       executionStore.executionLogs.push('Network error likely due to request interruption.');
     } else {
-      executionStore.executionError = (err as Error).message;
+      executionStore.executionError = err.message;
     }
   } finally {
     isExecuting.value = false;
     if (currentRunController) {
       currentRunController = null;
     }
+    abortedByUser = false;
   }
 };
 
@@ -528,6 +582,49 @@ const jsonToJulia = (jsonString: string): string => {
     return "()";
   }
 };
+
+const handleGenerateStandalone = () => {
+  try {
+    // Build JSON-first payloads similar to runModel
+    const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
+    const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
+
+    const script = generateStandaloneScript({
+      modelCode: generatedCode.value,
+      data: dataPayload,
+      inits: initsPayload,
+      settings: {
+        n_samples: samplerSettings.value.n_samples,
+        n_adapts: samplerSettings.value.n_adapts,
+        n_chains: samplerSettings.value.n_chains,
+        seed: samplerSettings.value.seed ?? undefined,
+      },
+    });
+
+    // Update files list (replace existing standalone.jl if present)
+    const files = executionStore.generatedFiles.filter(f => f.name !== 'standalone.jl');
+    files.unshift({ name: 'standalone.jl', content: script });
+    executionStore.generatedFiles = files;
+    executionStore.executionLogs.push('Generated standalone Julia script (frontend).');
+
+    // Focus Execution panel and open right sidebar
+    uiStore.setActiveRightTab('connection');
+    isRightSidebarOpen.value = true;
+
+    // Trigger immediate download
+    const blob = new Blob([script], { type: 'text/x-julia' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${activeGraphName.value || 'model'}-standalone.jl`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    executionStore.executionLogs.push(`Failed to generate standalone script: ${(err as Error).message}`);
+  }
+};
 </script>
 
 <template>
@@ -542,7 +639,7 @@ const jsonToJulia = (jsonString: string): string => {
       @open-about-modal="showAboutModal = true" @export-json="handleExportJson" @open-export-modal="openExportModal"
       @apply-layout="handleGraphLayout" @load-example="handleLoadExample" @validate-model="validateGraph"
       :is-model-valid="isModelValid" @show-validation-issues="showValidationModal = true"
-      @connect-to-backend-url="connectToBackendUrl" @run-model="runModel" />
+      @connect-to-backend-url="connectToBackendUrl" @run-model="runModel" @abort-run="abortRun" @generate-standalone="handleGenerateStandalone" />
 
     <div class="content-area">
       <aside class="left-sidebar" :style="leftSidebarStyle">
@@ -600,8 +697,8 @@ const jsonToJulia = (jsonString: string): string => {
               @click="uiStore.setActiveRightTab('code')">Code</button>
             <button :class="{ active: uiStore.activeRightTab === 'json' }"
               @click="uiStore.setActiveRightTab('json')">JSON</button>
-            <button :class="{ active: uiStore.activeRightTab === 'execution' }"
-              @click="uiStore.setActiveRightTab('execution')">Execution</button>
+            <button :class="{ active: uiStore.activeRightTab === 'connection' }"
+              @click="uiStore.setActiveRightTab('connection')">Connection</button>
           </div>
           <button @click="uiStore.toggleRightTabPinned()" class="pin-button"
             :class="{ 'pinned': uiStore.isRightTabPinned }" title="Pin Tab">
@@ -619,7 +716,7 @@ const jsonToJulia = (jsonString: string): string => {
           <div v-show="uiStore.activeRightTab === 'json'" class="tab-pane fill-height">
             <JsonEditorPanel :is-active="uiStore.activeRightTab === 'json'" />
           </div>
-          <div v-show="uiStore.activeRightTab === 'execution'" class="tab-pane fill-height">
+          <div v-show="uiStore.activeRightTab === 'connection'" class="tab-pane fill-height">
             <ExecutionPanel />
           </div>
         </div>
diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index 29553e678..fc5807615 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -38,6 +38,8 @@ const emit = defineEmits<{
   (e: 'show-validation-issues'): void;
   (e: 'connect-to-backend-url', url: string): void;
   (e: 'run-model'): void;
+  (e: 'abort-run'): void;
+  (e: 'generate-standalone'): void;
 }>();
 
 const executionStore = useExecutionStore();
@@ -153,7 +155,7 @@ const handleGridSizeInput = (event: Event) => {
 
         <DropdownMenu>
           <template #trigger>
-            <BaseButton type="ghost" size="small">Execution</BaseButton>
+            <BaseButton type="ghost" size="small">Connection</BaseButton>
           </template>
           <template #content>
             <div class="execution-dropdown" @click.stop>
@@ -171,6 +173,9 @@ const handleGridSizeInput = (event: Event) => {
                   <span v-else>Connect</span>
                 </BaseButton>
               </div>
+              <div class="dropdown-divider"></div>
+              <div class="dropdown-section-title">Standalone</div>
+              <a href="#" @click.prevent="emit('generate-standalone')">Generate Standalone Julia Script</a>
             </div>
           </template>
         </DropdownMenu>
@@ -211,6 +216,10 @@ const handleGridSizeInput = (event: Event) => {
             <i v-else class="fas fa-play"></i>
             Run
         </BaseButton>
+        <BaseButton v-if="isExecuting" @click="emit('abort-run')" type="danger" size="small" title="Abort current run">
+            <i class="fas fa-stop"></i>
+            Abort
+        </BaseButton>
     </div>
 
     <div class="navbar-right">
diff --git a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
index 61c413f94..1d8cf57c1 100644
--- a/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
+++ b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
@@ -27,6 +27,7 @@ const { samplerSettings } = storeToRefs(executionStore);
         <label for="seed">Seed (optional)</label>
         <BaseInput id="seed" type="number" v-model.number="samplerSettings.seed" placeholder="Leave blank for random" />
       </div>
+      <!-- Frontend timeout removed; backend may still enforce if configured server-side -->
     </div>
   </div>
 </template>
diff --git a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
index fd529e99f..18c4a1250 100644
--- a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -1,21 +1,49 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useExecutionStore } from '../../stores/executionStore';
+import type { ExecutionPanelTab } from '../../stores/executionStore';
 import BaseButton from '../ui/BaseButton.vue';
 
+// CodeMirror for file viewing
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/material-darker.css';
+import 'codemirror/mode/julia/julia.js';
+import 'codemirror/addon/scroll/simplescrollbars.css';
+import 'codemirror/addon/scroll/simplescrollbars.js';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/fold/brace-fold.js';
+import CodeMirror from 'codemirror';
+import type { Editor } from 'codemirror';
+
 const executionStore = useExecutionStore();
 const {
   isExecuting,
   executionResults,
   executionLogs,
   executionError,
-  generatedFiles
+  generatedFiles,
+  // New richer result slices
+  summaryResults,
+  quantileResults,
+  executionPanelTab,
 } = storeToRefs(executionStore);
 
-const activeTab = ref<'results' | 'logs' | 'files'>('results');
+const activeTab = computed<ExecutionPanelTab>({
+  get: () => executionPanelTab.value,
+  set: (val) => executionStore.setExecutionPanelTab(val),
+});
 const copySuccessStates = ref<{ [key: string]: boolean }>({});
 
+// Results datasets
+const hasSummary = computed(() => (summaryResults.value ?? executionResults.value ?? []).length > 0);
+const hasQuantiles = computed(() => (quantileResults.value ?? []).length > 0);
+
+// Collapsible sections
+const showSummary = ref(true);
+const showQuantiles = ref(true);
+
 // Active file tab state
 const activeFileName = ref<string | null>(null);
 watch(generatedFiles, (files) => {
@@ -34,14 +62,202 @@ const activeFileContent = computed(() => {
   return f?.content ?? '';
 });
 
-const resultHeaders = computed(() => {
-  if (!executionResults.value || executionResults.value.length === 0) {
-    return [];
+// CodeMirror instance for file content
+const fileEditorContainer = ref<HTMLDivElement | null>(null);
+let cmInstance: Editor | null = null;
+
+function pickModeByExt(name: string | null): string | undefined {
+  if (!name) return undefined;
+  const lower = name.toLowerCase();
+  if (lower.endsWith('.jl')) return 'julia';
+  if (lower.endsWith('.json')) return 'application/json';
+  if (lower.endsWith('.csv') || lower.endsWith('.txt') || lower.endsWith('.log')) return undefined; // plain text
+  return undefined;
+}
+
+function ensureEditor() {
+  if (!fileEditorContainer.value) return;
+  if (!cmInstance) {
+    cmInstance = CodeMirror(fileEditorContainer.value, {
+      value: activeFileContent.value,
+      mode: pickModeByExt(activeFileName.value),
+      theme: 'material-darker',
+      lineNumbers: true,
+      readOnly: true,
+      tabSize: 2,
+      scrollbarStyle: 'simple',
+      foldGutter: true,
+      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+    });
+  } else {
+    // Update mode and value to match current file
+    const cm = cmInstance as Editor & { setOption: (option: string, value: unknown) => void };
+    cm.setOption('mode', pickModeByExt(activeFileName.value));
+    if (cmInstance.getValue() !== activeFileContent.value) cmInstance.setValue(activeFileContent.value);
+  }
+  nextTick(() => cmInstance?.refresh());
+}
+
+onMounted(() => {
+  if (activeTab.value === 'files') {
+    nextTick(() => ensureEditor());
+  }
+});
+
+onUnmounted(() => {
+  if (cmInstance) {
+    const el = cmInstance.getWrapperElement();
+    el.parentNode?.removeChild(el);
+    cmInstance = null;
+  }
+});
+
+watch([activeTab, activeFileName], ([tab]) => {
+  if (tab === 'files') nextTick(() => ensureEditor());
+});
+
+watch(activeFileContent, (content) => {
+  if (cmInstance && activeTab.value === 'files') {
+    if (cmInstance.getValue() !== content) cmInstance.setValue(content);
+  }
+});
+
+// Per-table headers
+const summaryHeaders = computed(() => {
+  const rows = summaryResults.value ?? executionResults.value ?? [];
+  return rows.length ? Object.keys(rows[0]) : ([] as string[]);
+});
+const quantileHeaders = computed(() => {
+  const rows = quantileResults.value ?? [];
+  return rows.length ? Object.keys(rows[0]) : ([] as string[]);
+});
+
+// Interactive results helpers
+const filterText = ref('');
+const rhatThreshold = 1.1;
+
+// Independent sort state per table
+const summarySortKey = ref<string | null>(null);
+const summarySortDir = ref<'asc' | 'desc'>('asc');
+const quantSortKey = ref<string | null>(null);
+const quantSortDir = ref<'asc' | 'desc'>('asc');
+
+const isRhatHeader = (h: string) => /(^rhat$|r_hat|rhat)/i.test(h);
+
+const filteredSortedSummary = computed(() => {
+  const rows = (summaryResults.value ?? executionResults.value ?? []) as Array<Record<string, unknown>>;
+  const ft = filterText.value.trim().toLowerCase();
+  const filtered = ft
+    ? rows.filter(row => {
+        const keys = Object.keys(row);
+        const paramKey = keys.find(k => /^(param|parameter|parameters|name)$/i.test(k)) || keys[0];
+        const str = String(row[paramKey] ?? '');
+        return str.toLowerCase().includes(ft);
+      })
+    : rows.slice();
+
+  if (summarySortKey.value) {
+    const key = summarySortKey.value as string;
+    const dir = summarySortDir.value === 'asc' ? 1 : -1;
+    filtered.sort((a, b) => {
+      const av = (a as Record<string, unknown>)[key];
+      const bv = (b as Record<string, unknown>)[key];
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+      return String(av).localeCompare(String(bv)) * dir;
+    });
   }
-  // All objects should have the same keys, so we can take them from the first object.
-  return Object.keys(executionResults.value[0]);
+  return filtered;
 });
 
+const filteredSortedQuantiles = computed(() => {
+  const rows = (quantileResults.value ?? []) as Array<Record<string, unknown>>;
+  const ft = filterText.value.trim().toLowerCase();
+  const filtered = ft
+    ? rows.filter(row => {
+        const keys = Object.keys(row);
+        const paramKey = keys.find(k => /^(param|parameter|parameters|name)$/i.test(k)) || keys[0];
+        const str = String(row[paramKey] ?? '');
+        return str.toLowerCase().includes(ft);
+      })
+    : rows.slice();
+
+  if (quantSortKey.value) {
+    const key = quantSortKey.value as string;
+    const dir = quantSortDir.value === 'asc' ? 1 : -1;
+    filtered.sort((a, b) => {
+      const av = (a as Record<string, unknown>)[key];
+      const bv = (b as Record<string, unknown>)[key];
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * dir;
+      return String(av).localeCompare(String(bv)) * dir;
+    });
+  }
+  return filtered;
+});
+
+function toggleSummarySort(header: string) {
+  if (summarySortKey.value === header) {
+    summarySortDir.value = summarySortDir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    summarySortKey.value = header;
+    summarySortDir.value = 'asc';
+  }
+}
+
+function toggleQuantSort(header: string) {
+  if (quantSortKey.value === header) {
+    quantSortDir.value = quantSortDir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    quantSortKey.value = header;
+    quantSortDir.value = 'asc';
+  }
+}
+
+function downloadSummaryCsv() {
+  const rows = filteredSortedSummary.value;
+  if (!rows || rows.length === 0) return;
+  const headers = summaryHeaders.value;
+  const esc = (v: unknown) => {
+    const s = typeof v === 'number' ? v.toString() : String(v ?? '');
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const csv = [headers.join(','), ...rows.map(r => headers.map(h => esc((r as Record<string, unknown>)[h])).join(','))].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'summary.csv';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+function downloadQuantilesCsv() {
+  const rows = filteredSortedQuantiles.value;
+  if (!rows || rows.length === 0) return;
+  const headers = quantileHeaders.value;
+  const esc = (v: unknown) => {
+    const s = typeof v === 'number' ? v.toString() : String(v ?? '');
+    return /[",\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
+  };
+  const csv = [headers.join(','), ...rows.map(r => headers.map(h => esc((r as Record<string, unknown>)[h])).join(','))].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'quantiles.csv';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
 const copyFileContent = (fileName: string, content: string) => {
   navigator.clipboard.writeText(content).then(() => {
     copySuccessStates.value[fileName] = true;
@@ -53,6 +269,23 @@ const copyFileContent = (fileName: string, content: string) => {
     alert('Failed to copy content to clipboard.');
   });
 };
+
+const downloadFileContent = (fileName: string, content: string) => {
+  try {
+    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    console.error(`Failed to download ${fileName}:`, err);
+    alert('Failed to trigger download.');
+  }
+};
 </script>
 
 <template>
@@ -63,13 +296,6 @@ const copyFileContent = (fileName: string, content: string) => {
     </div>
 
     <div class="panel-tabs">
-      <BaseButton
-        :class="{ active: activeTab === 'results' }"
-        @click="activeTab = 'results'"
-        size="small"
-      >
-        Results
-      </BaseButton>
       <BaseButton
         :class="{ active: activeTab === 'logs' }"
         @click="activeTab = 'logs'"
@@ -84,6 +310,13 @@ const copyFileContent = (fileName: string, content: string) => {
       >
         Files
       </BaseButton>
+      <BaseButton
+        :class="{ active: activeTab === 'results' }"
+        @click="activeTab = 'results'"
+        size="small"
+      >
+        Results
+      </BaseButton>
     </div>
 
     <div class="panel-content">
@@ -93,24 +326,76 @@ const copyFileContent = (fileName: string, content: string) => {
       </div>
 
       <div v-show="activeTab === 'results'" class="tab-pane">
-        <div v-if="!executionResults" class="placeholder">
+        <div v-if="!hasSummary && !hasQuantiles" class="placeholder">
           <p>Execution results will appear here.</p>
         </div>
         <div v-else class="results-table-container">
-          <table class="results-table">
-            <thead>
-              <tr>
-                <th v-for="header in resultHeaders" :key="header">{{ header }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in executionResults" :key="index">
-                <td v-for="header in resultHeaders" :key="header">
-                  {{ typeof row[header] === 'number' ? row[header].toFixed(4) : row[header] }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="results-toolbar">
+            <input class="filter-input" v-model="filterText" type="text" placeholder="Filter parameters..." />
+          </div>
+
+          <div>
+            <div class="table-header" @click="showSummary = !showSummary" style="cursor: pointer;">
+              <div class="table-title"><strong>Summary</strong> <span style="opacity:.7; margin-left:6px;">{{ showSummary ? '▾' : '▸' }}</span></div>
+              <div class="table-actions">
+                <BaseButton size="small" type="secondary" @click.stop="downloadSummaryCsv" :disabled="!hasSummary">Download CSV</BaseButton>
+              </div>
+            </div>
+            <div v-if="!hasSummary" class="placeholder"><p>No summary available.</p></div>
+            <div v-else v-show="showSummary">
+              <table class="results-table">
+                <thead>
+                  <tr>
+                    <th v-for="header in summaryHeaders" :key="header"
+                        @click="toggleSummarySort(header)"
+                        :class="['sortable', { sorted: summarySortKey === header, desc: summarySortKey === header && summarySortDir === 'desc' }]">
+                      {{ header }}
+                      <span class="sort-indicator" v-if="summarySortKey === header">{{ summarySortDir === 'asc' ? '▲' : '▼' }}</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in filteredSortedSummary" :key="index">
+                    <td v-for="header in summaryHeaders" :key="header"
+                        :class="{ 'rhat-bad': isRhatHeader(header) && typeof row[header] === 'number' && row[header] > rhatThreshold }">
+                      {{ typeof row[header] === 'number' ? row[header].toFixed(4) : row[header] }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div style="margin-top: 16px;">
+            <div class="table-header" @click="showQuantiles = !showQuantiles" style="cursor: pointer;">
+              <div class="table-title"><strong>Quantiles</strong> <span style="opacity:.7; margin-left:6px;">{{ showQuantiles ? '▾' : '▸' }}</span></div>
+              <div class="table-actions">
+                <BaseButton size="small" type="secondary" @click.stop="downloadQuantilesCsv" :disabled="!hasQuantiles">Download CSV</BaseButton>
+              </div>
+            </div>
+            <div v-if="!hasQuantiles" class="placeholder"><p>No quantiles available.</p></div>
+            <div v-else v-show="showQuantiles">
+              <table class="results-table">
+                <thead>
+                  <tr>
+                    <th v-for="header in quantileHeaders" :key="header"
+                        @click="toggleQuantSort(header)"
+                        :class="['sortable', { sorted: quantSortKey === header, desc: quantSortKey === header && quantSortDir === 'desc' }]">
+                      {{ header }}
+                      <span class="sort-indicator" v-if="quantSortKey === header">{{ quantSortDir === 'asc' ? '▲' : '▼' }}</span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, index) in filteredSortedQuantiles" :key="index">
+                    <td v-for="header in quantileHeaders" :key="header">
+                      {{ typeof row[header] === 'number' ? row[header].toFixed(4) : row[header] }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -138,8 +423,11 @@ const copyFileContent = (fileName: string, content: string) => {
                 <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
                 <span v-else>Copy</span>
               </BaseButton>
+              <BaseButton @click="downloadFileContent(activeFileName, activeFileContent)" size="small" type="secondary">
+                Download
+              </BaseButton>
             </div>
-            <pre class="file-content">{{ activeFileContent }}</pre>
+            <div ref="fileEditorContainer" class="cm-file-viewer"></div>
           </div>
         </div>
       </div>
@@ -326,4 +614,73 @@ const copyFileContent = (fileName: string, content: string) => {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+
+.results-toolbar {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.results-toolbar .toolbar-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.filter-input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 0.9em;
+}
+
+.results-table th.sortable { cursor: pointer; user-select: none; }
+.results-table th.sorted { color: var(--color-primary); }
+.results-table th.desc .sort-indicator { transform: rotate(180deg); }
+.sort-indicator { margin-left: 4px; font-size: 0.8em; }
+
+.rhat-bad {
+  background: rgba(255, 99, 71, 0.15);
+  color: #b00020;
+  font-weight: 600;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 6px 0;
+}
+
+.table-title { font-size: 0.95em; }
+.table-actions { display: flex; gap: 8px; }
+
+.cm-file-viewer {
+  width: 100%;
+  min-height: 260px;
+  max-height: 50vh;
+}
 </style>
+
+<style>
+/* Make CodeMirror read-only look consistent */
+.execution-panel .CodeMirror,
+.execution-panel .CodeMirror-scroll,
+.execution-panel .CodeMirror-gutters,
+.execution-panel .CodeMirror textarea,
+.execution-panel .CodeMirror pre,
+.execution-panel .CodeMirror-line,
+.execution-panel .CodeMirror-code {
+  cursor: not-allowed !important;
+}
+
+.execution-panel .CodeMirror-readonly .CodeMirror-cursors { display: none !important; }
+.execution-panel .CodeMirror-scroll { overflow: auto !important; white-space: pre !important; }
+.execution-panel .CodeMirror-simplescroll-horizontal div,
+.execution-panel .CodeMirror-simplescroll-vertical div { background: #666; border-radius: 3px; }
+.execution-panel .CodeMirror-foldgutter-open,
+.execution-panel .CodeMirror-foldgutter-folded { color: #999; }
+</style>
\ No newline at end of file
diff --git a/DoodleBUGS/src/composables/useBugsCodeGenerator.ts b/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
index 17f5b360d..56a85acf8 100644
--- a/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
+++ b/DoodleBUGS/src/composables/useBugsCodeGenerator.ts
@@ -132,3 +132,165 @@ export function useBugsCodeGenerator(elements: Ref<GraphElement[]>) {
     generatedCode,
   };
 }
+
+// Helpers to format JavaScript values as Julia literals for embedding
+// Render a Julia NamedTuple field name: either bare identifier or var"..."
+function juliaFieldLiteral(name: string): string {
+  const s = String(name);
+  const idok = /^[A-Za-z_][A-Za-z0-9_]*$/.test(s);
+  if (idok) return s;
+  const escaped = s.replace(/"/g, '\\"');
+  return `var"${escaped}"`;
+}
+
+function isVectorOfNumbers(v: unknown): v is number[] {
+  return Array.isArray(v) && v.every(x => typeof x === 'number');
+}
+
+function isMatrixLike(v: unknown): v is number[][] {
+  if (!Array.isArray(v) || v.length === 0) return false;
+  const rows = v as unknown[];
+  const firstRow = rows[0];
+  if (!Array.isArray(firstRow)) return false;
+  const cols = (firstRow as unknown[]).length;
+  return rows.every(r => Array.isArray(r)
+    && (r as unknown[]).length === cols
+    && (r as unknown[]).every(x => typeof x === 'number'));
+}
+
+function formatNumber(n: number): string {
+  if (Number.isNaN(n)) return 'NaN';
+  if (!Number.isFinite(n)) return n > 0 ? 'Inf' : '-Inf';
+  return `${n}`;
+}
+
+function formatVector(arr: number[]): string {
+  return `[${arr.map(formatNumber).join(', ')}]`;
+}
+
+function formatMatrix(mat: number[][]): string {
+  const rows = mat.map(row => row.map(formatNumber).join(' ')).join('\n        ');
+  return `[\n        ${rows}\n    ]`;
+}
+
+function formatValue(v: unknown): string {
+  if (v === null) return 'missing';
+  if (typeof v === 'number') return formatNumber(v);
+  if (typeof v === 'boolean') return v ? 'true' : 'false';
+  if (typeof v === 'string') return JSON.stringify(v);
+  if (isMatrixLike(v)) return formatMatrix(v as number[][]);
+  if (isVectorOfNumbers(v)) return formatVector(v as number[]);
+  if (Array.isArray(v)) return JSON.stringify(v);
+  if (v && typeof v === 'object') return JSON.stringify(v);
+  return 'nothing';
+}
+
+function buildNamedTupleLiteral(obj: Record<string, unknown>): string {
+  const entries = Object.entries(obj).map(([k, val]) => `  ${juliaFieldLiteral(k)} = ${formatValue(val)}`);
+  return entries.length ? `(\n${entries.join(',\n')}\n)` : '()';
+}
+
+// Standalone script generator: builds a Julia script matching the backend's standalone template
+export interface StandaloneGeneratorSettings {
+  n_samples: number;
+  n_adapts: number;
+  n_chains: number;
+  seed?: number | null;
+}
+
+export interface StandaloneScriptInput {
+  modelCode: string;
+  data: Record<string, unknown>;
+  inits: Record<string, unknown>;
+  settings: StandaloneGeneratorSettings;
+}
+
+export function generateStandaloneScript(input: StandaloneScriptInput): string {
+  const { modelCode, data, inits, settings } = input;
+
+  // Build literal NamedTuples
+  const dataLiteral = buildNamedTupleLiteral(data as Record<string, unknown>);
+  const initsLiteral = buildNamedTupleLiteral(inits as Record<string, unknown>);
+
+  const nSamples = settings?.n_samples ?? 1000;
+  const nAdapts = settings?.n_adapts ?? 1000;
+  const nChains = settings?.n_chains ?? 1;
+  const seed = settings?.seed;
+  const seedLiteral = typeof seed === 'number' ? String(seed) : (seed == null ? 'nothing' : JSON.stringify(seed));
+
+  const script = `using JuliaBUGS, AbstractMCMC, AdvancedHMC, LogDensityProblems, LogDensityProblemsAD, MCMCChains, ReverseDiff, Random
+
+data = ${dataLiteral}
+
+inits = ${initsLiteral}
+
+# Model definition using a string literal
+model_def = JuliaBUGS.@bugs("""
+${String(modelCode)}
+""", true, false)
+
+# Compile the model
+model = JuliaBUGS.compile(model_def, data, inits)
+
+# Wrap the model for automatic differentiation with ReverseDiff
+ad_model = ADgradient(:ReverseDiff, model)
+ld_model = AbstractMCMC.LogDensityModel(ad_model)
+
+# Define sampling parameters
+n_samples, n_adapts = ${nSamples}, ${nAdapts}
+n_chains = ${nChains}
+seed = ${seedLiteral}
+
+seed_val = tryparse(Int, string(seed))
+rng = seed === nothing ? Random.MersenneTwister() : (seed_val === nothing ? Random.MersenneTwister() : Random.MersenneTwister(seed_val))
+
+D = LogDensityProblems.dimension(ad_model); initial_θ = rand(rng, D)
+
+# Sample the model using AbstractMCMC
+if n_chains > 1 && Threads.nthreads() > 1
+    chain = AbstractMCMC.sample(
+        rng,
+        ld_model,
+        AdvancedHMC.NUTS(0.8),
+        AbstractMCMC.MCMCThreads(),
+        n_samples,
+        n_chains;
+        chain_type = Chains,
+        n_adapts = n_adapts,
+        init_params = initial_θ,
+        discard_initial = n_adapts,
+        progress = false,
+    )
+elseif n_chains > 1
+    chain = AbstractMCMC.sample(
+        rng,
+        ld_model,
+        AdvancedHMC.NUTS(0.8),
+        AbstractMCMC.MCMCSerial(),
+        n_samples,
+        n_chains;
+        chain_type = Chains,
+        n_adapts = n_adapts,
+        init_params = initial_θ,
+        discard_initial = n_adapts,
+        progress = false,
+    )
+else
+    chain = AbstractMCMC.sample(
+        rng,
+        ld_model,
+        AdvancedHMC.NUTS(0.8),
+        n_samples;
+        chain_type = Chains,
+        n_adapts = n_adapts,
+        init_params = initial_θ,
+        discard_initial = n_adapts,
+        progress = false,
+    )
+end
+
+describe(chain)
+`;
+
+  return script;
+}
diff --git a/DoodleBUGS/src/stores/executionStore.ts b/DoodleBUGS/src/stores/executionStore.ts
index 3a5a62f4b..46d391442 100644
--- a/DoodleBUGS/src/stores/executionStore.ts
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -15,8 +15,11 @@ export interface SamplerSettings {
     n_adapts: number;
     n_chains: number;
     seed?: number | null;
+    timeout_s?: number | null;
 }
 
+export type ExecutionPanelTab = 'logs' | 'files' | 'results';
+
 export const useExecutionStore = defineStore('execution', () => {
   // State for backend connection
   const backendUrl = ref<string | null>(localStorage.getItem('doodlebugs-backendUrl') || null);
@@ -30,12 +33,20 @@ export const useExecutionStore = defineStore('execution', () => {
   const executionError = ref<string | null>(null);
   const generatedFiles = ref<GeneratedFile[]>([]);
 
+  // Separate fields for richer result types
+  const summaryResults = ref<ExecutionResult[] | null>(null);
+  const quantileResults = ref<ExecutionResult[] | null>(null);
+
+  // UI state for ExecutionPanel tab selection (for auto-switching between Logs/Results/Files)
+  const executionPanelTab = ref<ExecutionPanelTab>('results');
+
   // Sampler settings (backend uses fixed environment; no per-request dependencies)
   const samplerSettings = ref<SamplerSettings>({
       n_samples: 1000,
       n_adapts: 1000,
       n_chains: 1,
       seed: null,
+      timeout_s: 0, // default to no frontend timeout; backend may ignore or enforce separately
   });
 
   const setBackendUrl = (url: string | null) => {
@@ -51,9 +62,16 @@ export const useExecutionStore = defineStore('execution', () => {
   const resetExecutionState = () => {
     isExecuting.value = true;
     executionResults.value = null;
+    summaryResults.value = null;
+    quantileResults.value = null;
     executionLogs.value = [];
     executionError.value = null;
     generatedFiles.value = [];
+    executionPanelTab.value = 'logs';
+  };
+
+  const setExecutionPanelTab = (tab: ExecutionPanelTab) => {
+    executionPanelTab.value = tab;
   };
 
   return {
@@ -62,11 +80,15 @@ export const useExecutionStore = defineStore('execution', () => {
     isConnecting,
     isExecuting,
     executionResults,
+    summaryResults,
+    quantileResults,
     executionLogs,
     executionError,
     generatedFiles,
     samplerSettings,
+    executionPanelTab,
     setBackendUrl,
     resetExecutionState,
+    setExecutionPanelTab,
   };
 });
diff --git a/DoodleBUGS/src/stores/uiStore.ts b/DoodleBUGS/src/stores/uiStore.ts
index 9f15706df..6b0a47381 100644
--- a/DoodleBUGS/src/stores/uiStore.ts
+++ b/DoodleBUGS/src/stores/uiStore.ts
@@ -1,14 +1,15 @@
 import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 
-export type RightSidebarTab = 'properties' | 'code' | 'json' | 'execution';
+export type RightSidebarTab = 'properties' | 'code' | 'json' | 'connection';
 export type LeftSidebarTab = 'project' | 'palette' | 'data' | 'settings';
 
 export const useUiStore = defineStore('ui', () => {
   // Right Sidebar State
-  const activeRightTab = ref<RightSidebarTab>(
-    (localStorage.getItem('doodlebugs-activeRightTab') as RightSidebarTab) || 'code'
-  );
+  // Normalize legacy stored value 'execution' to 'connection'
+  const storedRight = localStorage.getItem('doodlebugs-activeRightTab') as RightSidebarTab | 'execution' | null;
+  const initialRightTab: RightSidebarTab = storedRight === 'execution' ? 'connection' : (storedRight as RightSidebarTab) || 'code';
+  const activeRightTab = ref<RightSidebarTab>(initialRightTab);
   const isRightTabPinned = ref<boolean>(
     localStorage.getItem('doodlebugs-isRightTabPinned') === 'true'
   );

From 27c4b05efe878102014a78e8bac34e9a028607f5 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 29 Aug 2025 17:25:34 +0530
Subject: [PATCH 09/12] update REAMDE, improve backend

---
 DoodleBUGS/README.md                          | 32 ++++++++
 .../src/components/layouts/MainLayout.vue     | 64 +++++++++++-----
 .../src/components/layouts/TheNavbar.vue      | 73 +++++++++++++++++++
 .../src/components/panels/DataInputPanel.vue  | 22 +++++-
 .../right-sidebar/ExecutionPanel.vue          | 61 +++++++++++++++-
 DoodleBUGS/src/stores/executionStore.ts       | 53 ++++++++++++--
 6 files changed, 275 insertions(+), 30 deletions(-)

diff --git a/DoodleBUGS/README.md b/DoodleBUGS/README.md
index ceb144105..013d91282 100644
--- a/DoodleBUGS/README.md
+++ b/DoodleBUGS/README.md
@@ -43,3 +43,35 @@ npm run preview
 ```
 
 For more information, questions, or to get involved, please contact [@shravanngoswamii](https://github.com/shravanngoswamii) (Ping me on [Julia Slack](https://julialang.slack.com/archives/CCYDC34A0)).
+
+> [!TIP]
+> You can generate a standalone Julia script directly from the app: open the navbar → `Connection` → `Generate Standalone Julia Script`.
+> The script opens in the right sidebar's Execution panel under the Files tab, where you can copy or download it.
+
+## Backend (Julia) Quick Start
+
+The DoodleBUGS app can connect to a local Julia backend for running models.
+
+1. Clone this repository and open a terminal at the repo root.
+2. Instantiate backend dependencies (first time only):
+
+```bash
+julia --project=DoodleBUGS/runtime -e "using Pkg; Pkg.instantiate()"
+```
+
+3. Start the backend server (defaults to http://localhost:8081):
+
+```bash
+julia --project=DoodleBUGS/runtime DoodleBUGS/runtime/server.jl
+```
+
+4. In the DoodleBUGS app, open the navbar → `Connection` → set URL to `http://localhost:8081` → `Connect`.
+
+Notes:
+- Keep the backend terminal open while using the app.
+- If the port is in use or blocked by a firewall, change the port in `DoodleBUGS/runtime/server.jl` and reconnect (the port is currently set to 8081 at the end of the file).
+
+#### Troubleshooting
+
+- To verify connectivity, open your browser at `http://localhost:8081/api/health` (replace 8081 if you changed the port). A healthy server returns `{ "status": "ok" }`.
+- If the health check fails, ensure the server is running, the URL/port are correct, and no firewall or VPN is blocking the port. Check the backend terminal output for errors.
diff --git a/DoodleBUGS/src/components/layouts/MainLayout.vue b/DoodleBUGS/src/components/layouts/MainLayout.vue
index 534849d4f..c192d4927 100644
--- a/DoodleBUGS/src/components/layouts/MainLayout.vue
+++ b/DoodleBUGS/src/components/layouts/MainLayout.vue
@@ -96,6 +96,29 @@ onMounted(async () => {
   }
 
   validateGraph();
+  
+  // Attempt silent reconnect to saved backend after reloads
+  if (backendUrl.value) {
+    try {
+      const resp = await fetch(`${backendUrl.value}/api/health`);
+      if (resp.ok) {
+        const j = await resp.json().catch(() => ({}));
+        if (j && j.status === 'ok') {
+          isConnected.value = true;
+          executionStore.executionLogs.push(`Reconnected to backend at ${backendUrl.value}.`);
+        } else {
+          isConnected.value = false;
+          executionStore.executionLogs.push(`Saved backend URL present but health check returned invalid payload.`);
+        }
+      } else {
+        isConnected.value = false;
+        executionStore.executionLogs.push(`Saved backend URL present but health check failed with ${resp.status}.`);
+      }
+    } catch (e) {
+      isConnected.value = false;
+      executionStore.executionLogs.push(`Saved backend URL present but health check errored: ${(e as Error).message}`);
+    }
+  }
 });
 
 watch(
@@ -420,9 +443,9 @@ const runModel = async () => {
     }
     currentRunController = new AbortController();
 
-    // Build payload with JSON-first approach AND include Julia literals for backend
-    const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
-    const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
+    // Build payload from parsedGraphData to ensure consistency across modes
+    const dataPayload = parsedGraphData.value.data || {};
+    const initsPayload = parsedGraphData.value.inits || {};
 
     const dataString = dataStore.inputMode === 'julia' ? (dataStore.dataString || '') : jsonToJulia(JSON.stringify(dataPayload));
     const initsString = dataStore.inputMode === 'julia' ? (dataStore.initsString || '') : jsonToJulia(JSON.stringify(initsPayload));
@@ -501,7 +524,21 @@ const runModel = async () => {
       }
     });
     const frontendStandaloneFile: GeneratedFile = { name: 'standalone.jl', content: frontendStandaloneScript };
-    executionStore.generatedFiles = (result.files ?? []).filter(file => file.name !== 'standalone.jl').concat(frontendStandaloneFile);
+    const backendFiles = (result.files ?? [])
+      .filter(file => file.name !== 'standalone.jl')
+      .map(file => ({
+        name: file.name,
+        content: typeof (file as any).content === 'string'
+          ? (file as any).content
+          : ((file as any).content == null ? '' : JSON.stringify((file as any).content)),
+      }));
+    // Put standalone first so users see a guaranteed non-empty file
+    executionStore.generatedFiles = [frontendStandaloneFile, ...backendFiles];
+    // Debug log: show file sizes to help diagnose empty content
+    try {
+      const sizes = executionStore.generatedFiles.map(f => `${f.name} (${(f.content || '').length})`).join(', ');
+      executionStore.executionLogs.push(`Generated files: ${sizes}`);
+    } catch { /* ignore logging errors */ }
     executionStore.executionError = null;
 
     // Switch to Results on successful completion
@@ -585,9 +622,9 @@ const jsonToJulia = (jsonString: string): string => {
 
 const handleGenerateStandalone = () => {
   try {
-    // Build JSON-first payloads similar to runModel
-    const dataPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.dataString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.dataString)));
-    const initsPayload = dataStore.inputMode === 'json' ? JSON.parse(dataStore.initsString || '{}') : JSON.parse(JSON.stringify(juliaTupleToJsonObject(dataStore.initsString)));
+    // Build payloads from parsedGraphData to ensure consistency across modes
+    const dataPayload = parsedGraphData.value.data || {};
+    const initsPayload = parsedGraphData.value.inits || {};
 
     const script = generateStandaloneScript({
       modelCode: generatedCode.value,
@@ -610,17 +647,8 @@ const handleGenerateStandalone = () => {
     // Focus Execution panel and open right sidebar
     uiStore.setActiveRightTab('connection');
     isRightSidebarOpen.value = true;
-
-    // Trigger immediate download
-    const blob = new Blob([script], { type: 'text/x-julia' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${activeGraphName.value || 'model'}-standalone.jl`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
+    // Switch the ExecutionPanel to the Files tab so the script is visible
+    executionStore.setExecutionPanelTab('files');
   } catch (err) {
     executionStore.executionLogs.push(`Failed to generate standalone script: ${(err as Error).message}`);
   }
diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index fc5807615..f63f689d2 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -45,6 +45,24 @@ const emit = defineEmits<{
 const executionStore = useExecutionStore();
 const { isConnected, isExecuting, isConnecting, backendUrl } = storeToRefs(executionStore);
 const navBackendUrl = ref(backendUrl.value || 'http://localhost:8081');
+const startCmd = 'julia --project=DoodleBUGS/runtime DoodleBUGS/runtime/server.jl';
+const instantiateCmd = 'julia --project=DoodleBUGS/runtime -e "using Pkg; Pkg.instantiate()"';
+
+// Copy helpers with brief feedback
+const copiedBackendUrl = ref(false);
+const copiedStartCmd = ref(false);
+const copiedInstantiateCmd = ref(false);
+
+function copyWithFeedback(text: string, flag: typeof copiedBackendUrl) {
+  navigator.clipboard.writeText(text).then(() => {
+    flag.value = true;
+    setTimeout(() => (flag.value = false), 1500);
+  }).catch(err => console.error('Clipboard copy failed:', err));
+}
+
+const copyBackendUrl = () => copyWithFeedback(navBackendUrl.value, copiedBackendUrl);
+const copyStartCmd = () => copyWithFeedback(startCmd, copiedStartCmd);
+const copyInstantiateCmd = () => copyWithFeedback(instantiateCmd, copiedInstantiateCmd);
 
 const displayTitle = computed(() => {
   if (props.projectName && props.activeGraphName) {
@@ -163,6 +181,29 @@ const handleGridSizeInput = (event: Event) => {
               <div class="dropdown-input-group">
                 <label for="backend-url-nav">URL:</label>
                 <BaseInput id="backend-url-nav" v-model="navBackendUrl" placeholder="http://localhost:8081" class="backend-url-input" />
+                <BaseButton size="small" type="secondary" class="copy-btn" title="Copy URL" @click.stop="copyBackendUrl">
+                  <i v-if="copiedBackendUrl" class="fas fa-check"></i>
+                  <i v-else class="fas fa-copy"></i>
+                </BaseButton>
+              </div>
+              <div class="dropdown-hint">
+                <div>First time only (instantiate deps):</div>
+                <div class="copy-row">
+                  <div class="code-inline">{{ instantiateCmd }}</div>
+                  <BaseButton size="small" type="ghost" class="copy-btn" title="Copy command" @click.stop="copyInstantiateCmd">
+                    <i v-if="copiedInstantiateCmd" class="fas fa-check"></i>
+                    <i v-else class="fas fa-copy"></i>
+                  </BaseButton>
+                </div>
+                <div style="height:6px;"></div>
+                <div>Start backend from repo root:</div>
+                <div class="copy-row">
+                  <div class="code-inline">{{ startCmd }}</div>
+                  <BaseButton size="small" type="ghost" class="copy-btn" title="Copy command" @click.stop="copyStartCmd">
+                    <i v-if="copiedStartCmd" class="fas fa-check"></i>
+                    <i v-else class="fas fa-copy"></i>
+                  </BaseButton>
+                </div>
               </div>
               <div class="dropdown-actions">
                 <span class="connection-status" :class="{ connected: isConnected }">
@@ -465,4 +506,36 @@ const handleGridSizeInput = (event: Event) => {
   color: rgb(228, 15, 15);
 }
 .connection-status.connected { opacity: 1; color: green }
+
+.dropdown-hint {
+  padding: 0 15px 8px;
+  font-size: 0.8em;
+  color: var(--color-secondary);
+}
+.dropdown-hint .code-inline {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9em;
+  opacity: 0.9;
+  overflow-x: auto;
+  white-space: pre;
+  flex: 1 1 auto;
+  line-height: 1.25;
+  padding-bottom: 4px; /* avoid scrollbar overlap on some platforms */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-gutter: stable both-edges; /* reserve space for scrollbar */
+}
+.copy-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  min-width: 0;
+}
+.dropdown-hint .code-inline::-webkit-scrollbar { height: 6px; }
+.dropdown-hint .code-inline::-webkit-scrollbar-track { background: transparent; }
+.dropdown-hint .code-inline::-webkit-scrollbar-thumb { background-color: var(--color-border); border-radius: 3px; }
+.copy-btn {
+  padding: 2px 6px;
+}
 </style>
diff --git a/DoodleBUGS/src/components/panels/DataInputPanel.vue b/DoodleBUGS/src/components/panels/DataInputPanel.vue
index c0ae5c2ed..badcfc2a2 100644
--- a/DoodleBUGS/src/components/panels/DataInputPanel.vue
+++ b/DoodleBUGS/src/components/panels/DataInputPanel.vue
@@ -27,6 +27,7 @@ let initsCm: Editor | null = null;
 let isUpdatingFromSource = false;
 
 const jsonError = ref<string | null>(null);
+const jsonInitsError = ref<string | null>(null);
 
 const validateJson = (jsonString: string) => {
   try {
@@ -37,6 +38,15 @@ const validateJson = (jsonString: string) => {
   }
 };
 
+const validateJsonInits = (jsonString: string) => {
+  try {
+    JSON.parse(jsonString);
+    jsonInitsError.value = null;
+  } catch (e: unknown) {
+    jsonInitsError.value = e instanceof Error ? e.message : String(e);
+  }
+};
+
 const setupCodeMirror = () => {
   // Destroy existing instances
   [dataCm, initsCm].forEach(cm => {
@@ -75,6 +85,7 @@ const setupCodeMirror = () => {
         initsCm.on('change', (instance) => {
           if (isUpdatingFromSource) return;
           dataStore.initsString = instance.getValue();
+          validateJsonInits(instance.getValue());
         });
       }
     }
@@ -117,6 +128,7 @@ watch([() => dataStore.dataString, () => dataStore.initsString], () => {
     if (dataCm.getValue() !== dataStore.dataString) dataCm.setValue(dataStore.dataString);
     if (initsCm && initsCm.getValue() !== dataStore.initsString) initsCm.setValue(dataStore.initsString);
     validateJson(dataStore.dataString);
+    validateJsonInits(dataStore.initsString);
   }
   isUpdatingFromSource = false;
 }, { deep: true });
@@ -162,10 +174,16 @@ watch(() => props.isActive, (newVal) => {
     <div class="footer-status">
       <div v-if="dataStore.inputMode === 'json'">
         <div v-if="jsonError" class="status-message error">
-            <i class="fas fa-times-circle"></i> {{ jsonError }}
+            <i class="fas fa-times-circle"></i> <strong>Data:</strong> {{ jsonError }}
+        </div>
+        <div v-else class="status-message success">
+            <i class="fas fa-check-circle"></i> <strong>Data:</strong> Valid JSON
+        </div>
+        <div v-if="jsonInitsError" class="status-message error">
+            <i class="fas fa-times-circle"></i> <strong>Inits:</strong> {{ jsonInitsError }}
         </div>
         <div v-else class="status-message success">
-            <i class="fas fa-check-circle"></i> Valid JSON
+            <i class="fas fa-check-circle"></i> <strong>Inits:</strong> Valid JSON
         </div>
       </div>
       <div v-else class="status-message info">
diff --git a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
index 18c4a1250..9d1bbee3b 100644
--- a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -62,9 +62,13 @@ const activeFileContent = computed(() => {
   return f?.content ?? '';
 });
 
+// Show overlay copy button only for standalone.jl
+const isStandaloneActive = computed(() => (activeFileName.value ?? '').toLowerCase() === 'standalone.jl');
+
 // CodeMirror instance for file content
 const fileEditorContainer = ref<HTMLDivElement | null>(null);
 let cmInstance: Editor | null = null;
+const editorReady = ref(false);
 
 function pickModeByExt(name: string | null): string | undefined {
   if (!name) return undefined;
@@ -89,6 +93,7 @@ function ensureEditor() {
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     });
+    editorReady.value = true;
   } else {
     // Update mode and value to match current file
     const cm = cmInstance as Editor & { setOption: (option: string, value: unknown) => void };
@@ -110,12 +115,22 @@ onUnmounted(() => {
     el.parentNode?.removeChild(el);
     cmInstance = null;
   }
+  editorReady.value = false;
 });
 
 watch([activeTab, activeFileName], ([tab]) => {
   if (tab === 'files') nextTick(() => ensureEditor());
 });
 
+// Ensure editor also initializes when files arrive or container appears
+watch(generatedFiles, () => {
+  if (activeTab.value === 'files') nextTick(() => ensureEditor());
+});
+
+watch(fileEditorContainer, () => {
+  if (activeTab.value === 'files') nextTick(() => ensureEditor());
+});
+
 watch(activeFileContent, (content) => {
   if (cmInstance && activeTab.value === 'files') {
     if (cmInstance.getValue() !== content) cmInstance.setValue(content);
@@ -419,7 +434,7 @@ const downloadFileContent = (fileName: string, content: string) => {
           <div class="file-view" v-if="activeFileName">
             <div class="file-header">
               <strong>{{ activeFileName }}</strong>
-              <BaseButton @click="copyFileContent(activeFileName, activeFileContent)" size="small">
+              <BaseButton v-if="!isStandaloneActive" @click="copyFileContent(activeFileName, activeFileContent)" size="small">
                 <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
                 <span v-else>Copy</span>
               </BaseButton>
@@ -427,7 +442,15 @@ const downloadFileContent = (fileName: string, content: string) => {
                 Download
               </BaseButton>
             </div>
-            <div ref="fileEditorContainer" class="cm-file-viewer"></div>
+            <div ref="fileEditorContainer" class="cm-file-viewer">
+              <div v-if="isStandaloneActive" class="cm-copy-overlay">
+                <BaseButton size="small" type="secondary" title="Copy code" @click="copyFileContent(activeFileName, activeFileContent)">
+                  <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
+                  <i v-else class="fas fa-copy"></i>
+                </BaseButton>
+              </div>
+              <pre v-if="!editorReady" class="file-content">{{ activeFileContent }}</pre>
+            </div>
           </div>
         </div>
       </div>
@@ -599,6 +622,7 @@ const downloadFileContent = (fileName: string, content: string) => {
 .file-view {
   border: 1px solid var(--color-border);
   border-radius: 4px;
+  position: relative;
 }
 
 .file-header {
@@ -662,6 +686,39 @@ const downloadFileContent = (fileName: string, content: string) => {
   width: 100%;
   min-height: 260px;
   max-height: 50vh;
+  position: relative;
+}
+
+.cm-copy-overlay {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 2;
+}
+
+/* Match CodePreviewPanel floating copy button visuals */
+.cm-copy-overlay .base-button {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: var(--color-secondary);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  opacity: 0.9;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+
+.cm-copy-overlay .base-button:hover {
+  background-color: var(--color-secondary-hover);
+  opacity: 1;
+}
+
+.cm-copy-overlay .fa-copy,
+.cm-copy-overlay .fa-check {
+  font-size: 1.1rem;
 }
 </style>
 
diff --git a/DoodleBUGS/src/stores/executionStore.ts b/DoodleBUGS/src/stores/executionStore.ts
index 46d391442..84471b762 100644
--- a/DoodleBUGS/src/stores/executionStore.ts
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 export interface ExecutionResult {
   [key: string]: string | number;
@@ -28,17 +28,45 @@ export const useExecutionStore = defineStore('execution', () => {
 
   // State for model execution
   const isExecuting = ref(false);
-  const executionResults = ref<ExecutionResult[] | null>(null);
-  const executionLogs = ref<string[]>([]);
-  const executionError = ref<string | null>(null);
-  const generatedFiles = ref<GeneratedFile[]>([]);
+  // LocalStorage keys
+  const LS_KEYS = {
+    logs: 'doodlebugs-executionLogs',
+    error: 'doodlebugs-executionError',
+    files: 'doodlebugs-generatedFiles',
+    results: 'doodlebugs-executionResults',
+    summary: 'doodlebugs-summaryResults',
+    quantiles: 'doodlebugs-quantileResults',
+    panelTab: 'doodlebugs-executionPanelTab',
+  } as const;
+
+  const safeParse = <T>(key: string, fallback: T): T => {
+    try {
+      const raw = localStorage.getItem(key);
+      if (raw == null) return fallback;
+      return JSON.parse(raw) as T;
+    } catch {
+      return fallback;
+    }
+  };
+
+  const isValidTab = (v: unknown): v is ExecutionPanelTab => v === 'logs' || v === 'files' || v === 'results';
+
+  const executionResults = ref<ExecutionResult[] | null>(safeParse<ExecutionResult[] | null>(LS_KEYS.results, null));
+  const executionLogs = ref<string[]>(safeParse<string[]>(LS_KEYS.logs, []));
+  const executionError = ref<string | null>(safeParse<string | null>(LS_KEYS.error, null));
+  const generatedFiles = ref<GeneratedFile[]>(safeParse<GeneratedFile[]>(LS_KEYS.files, []));
 
   // Separate fields for richer result types
-  const summaryResults = ref<ExecutionResult[] | null>(null);
-  const quantileResults = ref<ExecutionResult[] | null>(null);
+  const summaryResults = ref<ExecutionResult[] | null>(safeParse<ExecutionResult[] | null>(LS_KEYS.summary, null));
+  const quantileResults = ref<ExecutionResult[] | null>(safeParse<ExecutionResult[] | null>(LS_KEYS.quantiles, null));
 
   // UI state for ExecutionPanel tab selection (for auto-switching between Logs/Results/Files)
-  const executionPanelTab = ref<ExecutionPanelTab>('results');
+  const executionPanelTab = ref<ExecutionPanelTab>(
+    (() => {
+      const persisted = safeParse<unknown>(LS_KEYS.panelTab, 'results');
+      return isValidTab(persisted) ? persisted : 'results';
+    })()
+  );
 
   // Sampler settings (backend uses fixed environment; no per-request dependencies)
   const samplerSettings = ref<SamplerSettings>({
@@ -74,6 +102,15 @@ export const useExecutionStore = defineStore('execution', () => {
     executionPanelTab.value = tab;
   };
 
+  // Persist to localStorage whenever these pieces change
+  watch(executionLogs, (v) => localStorage.setItem(LS_KEYS.logs, JSON.stringify(v)), { deep: true });
+  watch(executionError, (v) => localStorage.setItem(LS_KEYS.error, JSON.stringify(v)));
+  watch(generatedFiles, (v) => localStorage.setItem(LS_KEYS.files, JSON.stringify(v)), { deep: true });
+  watch(executionResults, (v) => localStorage.setItem(LS_KEYS.results, JSON.stringify(v)));
+  watch(summaryResults, (v) => localStorage.setItem(LS_KEYS.summary, JSON.stringify(v)));
+  watch(quantileResults, (v) => localStorage.setItem(LS_KEYS.quantiles, JSON.stringify(v)));
+  watch(executionPanelTab, (v) => localStorage.setItem(LS_KEYS.panelTab, JSON.stringify(v)));
+
   return {
     backendUrl,
     isConnected,

From d38d81f1b6d2e95de8aa0a4f1a78320f0562a0c9 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 29 Aug 2025 18:18:40 +0530
Subject: [PATCH 10/12] improve backend

---
 .../right-sidebar/ExecutionPanel.vue          | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
index 9d1bbee3b..233ef9271 100644
--- a/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -62,9 +62,6 @@ const activeFileContent = computed(() => {
   return f?.content ?? '';
 });
 
-// Show overlay copy button only for standalone.jl
-const isStandaloneActive = computed(() => (activeFileName.value ?? '').toLowerCase() === 'standalone.jl');
-
 // CodeMirror instance for file content
 const fileEditorContainer = ref<HTMLDivElement | null>(null);
 let cmInstance: Editor | null = null;
@@ -434,22 +431,16 @@ const downloadFileContent = (fileName: string, content: string) => {
           <div class="file-view" v-if="activeFileName">
             <div class="file-header">
               <strong>{{ activeFileName }}</strong>
-              <BaseButton v-if="!isStandaloneActive" @click="copyFileContent(activeFileName, activeFileContent)" size="small">
-                <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
-                <span v-else>Copy</span>
-              </BaseButton>
               <BaseButton @click="downloadFileContent(activeFileName, activeFileContent)" size="small" type="secondary">
                 Download
               </BaseButton>
             </div>
-            <div ref="fileEditorContainer" class="cm-file-viewer">
-              <div v-if="isStandaloneActive" class="cm-copy-overlay">
-                <BaseButton size="small" type="secondary" title="Copy code" @click="copyFileContent(activeFileName, activeFileContent)">
-                  <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
-                  <i v-else class="fas fa-copy"></i>
-                </BaseButton>
-              </div>
-              <pre v-if="!editorReady" class="file-content">{{ activeFileContent }}</pre>
+            <div class="editor-wrapper">
+              <div ref="fileEditorContainer" class="editor-container"></div>
+              <BaseButton size="small" type="secondary" class="copy-button" title="Copy code" @click="copyFileContent(activeFileName, activeFileContent)">
+                <i v-if="copySuccessStates[activeFileName]" class="fas fa-check"></i>
+                <i v-else class="fas fa-copy"></i>
+              </BaseButton>
             </div>
           </div>
         </div>
@@ -623,6 +614,8 @@ const downloadFileContent = (fileName: string, content: string) => {
   border: 1px solid var(--color-border);
   border-radius: 4px;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .file-header {
@@ -682,22 +675,29 @@ const downloadFileContent = (fileName: string, content: string) => {
 .table-title { font-size: 0.95em; }
 .table-actions { display: flex; gap: 8px; }
 
-.cm-file-viewer {
-  width: 100%;
-  min-height: 260px;
-  max-height: 50vh;
+.editor-wrapper {
   position: relative;
+  flex-grow: 1;
+  background-color: #282c34;
+  border-radius: 8px;
+  overflow: hidden;
+  height: 67vh; /* provide a consistent viewer height like a panel */
 }
 
-.cm-copy-overlay {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  z-index: 2;
+.editor-container {
+  width: 100%;
+  height: 100%;
 }
 
-/* Match CodePreviewPanel floating copy button visuals */
-.cm-copy-overlay .base-button {
+/* Ensure CodeMirror fills the editor container so the internal scrollbar shows */
+.editor-container .CodeMirror { height: 100% !important; }
+.editor-container .CodeMirror-scroll { height: 100% !important; }
+
+.copy-button {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 3;
   width: 36px;
   height: 36px;
   border-radius: 50%;
@@ -707,17 +707,18 @@ const downloadFileContent = (fileName: string, content: string) => {
   align-items: center;
   justify-content: center;
   padding: 0;
+  cursor: pointer;
   opacity: 0.9;
   transition: background-color 0.2s, opacity 0.2s;
 }
 
-.cm-copy-overlay .base-button:hover {
+.copy-button:hover {
   background-color: var(--color-secondary-hover);
   opacity: 1;
 }
 
-.cm-copy-overlay .fa-copy,
-.cm-copy-overlay .fa-check {
+.copy-button .fa-copy,
+.copy-button .fa-check {
   font-size: 1.1rem;
 }
 </style>

From d5b100f9da1404902ca4cfaca9e8cacb079dd619 Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 29 Aug 2025 18:24:19 +0530
Subject: [PATCH 11/12] fix RATS example by moving x[j] inside inner plate

---
 DoodleBUGS/public/examples/rats/model.json | 290 +++++++++++++++++----
 1 file changed, 246 insertions(+), 44 deletions(-)

diff --git a/DoodleBUGS/public/examples/rats/model.json b/DoodleBUGS/public/examples/rats/model.json
index 7dd76f50d..199a3afb3 100644
--- a/DoodleBUGS/public/examples/rats/model.json
+++ b/DoodleBUGS/public/examples/rats/model.json
@@ -2,79 +2,281 @@
   "name": "Rats: A Normal Hierarchical Model",
   "graphJSON": [
     {
-      "id": "plate_i", "name": "Plate.i", "type": "node", "nodeType": "plate", "position": { "x": 450, "y": 400 },
-      "loopVariable": "i", "loopRange": "1:N"
+      "id": "plate_i",
+      "name": "Plate.i",
+      "type": "node",
+      "nodeType": "plate",
+      "position": {
+        "x": 342.5,
+        "y": 350
+      },
+      "loopVariable": "i",
+      "loopRange": "1:N"
     },
     {
-      "id": "plate_j", "name": "Plate.j", "type": "node", "nodeType": "plate", "position": { "x": 450, "y": 350 },
-      "parent": "plate_i", "loopVariable": "j", "loopRange": "1:T"
+      "id": "plate_j",
+      "name": "Plate.j",
+      "type": "node",
+      "nodeType": "plate",
+      "position": {
+        "x": 514,
+        "y": 355
+      },
+      "parent": "plate_i",
+      "loopVariable": "j",
+      "loopRange": "1:T"
     },
     {
-      "id": "node_Y", "name": "Y", "type": "node", "nodeType": "observed", "position": { "x": 450, "y": 250 },
-      "parent": "plate_j", "distribution": "dnorm", "indices": "i,j", "observed": true,
-      "param1": "mu", "param2": "tau.c"
+      "id": "node_Y",
+      "name": "Y",
+      "type": "node",
+      "nodeType": "observed",
+      "position": {
+        "x": 513,
+        "y": 487
+      },
+      "parent": "plate_j",
+      "distribution": "dnorm",
+      "indices": "i,j",
+      "observed": true,
+      "param1": "mu",
+      "param2": "tau.c"
     },
     {
-      "id": "node_mu", "name": "mu", "type": "node", "nodeType": "deterministic", "position": { "x": 450, "y": 350 },
-      "parent": "plate_j", "equation": "alpha[i] + beta[i] * (x[j] - xbar)", "indices": "i,j"
+      "id": "node_mu",
+      "name": "mu",
+      "type": "node",
+      "nodeType": "deterministic",
+      "position": {
+        "x": 513,
+        "y": 355
+      },
+      "parent": "plate_j",
+      "equation": "alpha[i] + beta[i] * (x[j] - xbar)",
+      "indices": "i,j"
     },
     {
-      "id": "node_alpha", "name": "alpha", "type": "node", "nodeType": "stochastic", "position": { "x": 350, "y": 450 },
-      "parent": "plate_i", "distribution": "dnorm", "indices": "i",
-      "param1": "alpha.c", "param2": "alpha.tau"
+      "id": "node_alpha",
+      "name": "alpha",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 153,
+        "y": 223
+      },
+      "parent": "plate_i",
+      "distribution": "dnorm",
+      "indices": "i",
+      "param1": "alpha.c",
+      "param2": "alpha.tau"
     },
     {
-      "id": "node_beta", "name": "beta", "type": "node", "nodeType": "stochastic", "position": { "x": 550, "y": 450 },
-      "parent": "plate_i", "distribution": "dnorm", "indices": "i",
-      "param1": "beta.c", "param2": "beta.tau"
+      "id": "node_beta",
+      "name": "beta",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 343,
+        "y": 223
+      },
+      "parent": "plate_i",
+      "distribution": "dnorm",
+      "indices": "i",
+      "param1": "beta.c",
+      "param2": "beta.tau"
     },
     {
-      "id": "node_tau.c", "name": "tau.c", "type": "node", "nodeType": "stochastic", "position": { "x": 200, "y": 200 },
-      "distribution": "dgamma", "param1": "0.001", "param2": "0.001"
+      "id": "node_tau.c",
+      "name": "tau.c",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 735,
+        "y": 355
+      },
+      "distribution": "dgamma",
+      "param1": "0.001",
+      "param2": "0.001"
     },
     {
-      "id": "node_sigma", "name": "sigma", "type": "node", "nodeType": "deterministic", "position": { "x": 200, "y": 100 },
+      "id": "node_sigma",
+      "name": "sigma",
+      "type": "node",
+      "nodeType": "deterministic",
+      "position": {
+        "x": 735,
+        "y": 487
+      },
       "equation": "1 / sqrt(tau.c)"
     },
     {
-      "id": "node_alpha.c", "name": "alpha.c", "type": "node", "nodeType": "stochastic", "position": { "x": 250, "y": 550 },
-      "distribution": "dnorm", "param1": "0.0", "param2": "1.0E-6"
+      "id": "node_alpha.c",
+      "name": "alpha.c",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 317,
+        "y": 41
+      },
+      "distribution": "dnorm",
+      "param1": "0.0",
+      "param2": "1.0E-6"
     },
     {
-      "id": "node_alpha.tau", "name": "alpha.tau", "type": "node", "nodeType": "stochastic", "position": { "x": 150, "y": 550 },
-      "distribution": "dgamma", "param1": "0.001", "param2": "0.001"
+      "id": "node_alpha.tau",
+      "name": "alpha.tau",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 41,
+        "y": 41
+      },
+      "distribution": "dgamma",
+      "param1": "0.001",
+      "param2": "0.001"
     },
     {
-      "id": "node_beta.c", "name": "beta.c", "type": "node", "nodeType": "stochastic", "position": { "x": 650, "y": 550 },
-      "distribution": "dnorm", "param1": "0.0", "param2": "1.0E-6"
+      "id": "node_beta.c",
+      "name": "beta.c",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 581,
+        "y": 41
+      },
+      "distribution": "dnorm",
+      "param1": "0.0",
+      "param2": "1.0E-6"
     },
     {
-      "id": "node_beta.tau", "name": "beta.tau", "type": "node", "nodeType": "stochastic", "position": { "x": 750, "y": 550 },
-      "distribution": "dgamma", "param1": "0.001", "param2": "0.001"
+      "id": "node_beta.tau",
+      "name": "beta.tau",
+      "type": "node",
+      "nodeType": "stochastic",
+      "position": {
+        "x": 449,
+        "y": 41
+      },
+      "distribution": "dgamma",
+      "param1": "0.001",
+      "param2": "0.001"
     },
     {
-      "id": "node_alpha0", "name": "alpha0", "type": "node", "nodeType": "deterministic", "position": { "x": 450, "y": 650 },
+      "id": "node_alpha0",
+      "name": "alpha0",
+      "type": "node",
+      "nodeType": "deterministic",
+      "position": {
+        "x": 735,
+        "y": 223
+      },
       "equation": "alpha.c - xbar * beta.c"
     },
     {
-      "id": "node_x", "name": "x", "type": "node", "nodeType": "constant", "position": { "x": 650, "y": 350 }, "indices": "j"
+      "id": "node_x",
+      "name": "x",
+      "type": "node",
+      "nodeType": "constant",
+      "position": {
+        "x": 515,
+        "y": 223
+      },
+      "indices": "j",
+      "parent": "plate_j"
     },
     {
-      "id": "node_xbar", "name": "xbar", "type": "node", "nodeType": "constant", "position": { "x": 550, "y": 700 }
+      "id": "node_xbar",
+      "name": "xbar",
+      "type": "node",
+      "nodeType": "constant",
+      "position": {
+        "x": 821,
+        "y": 41
+      }
     },
-    { "id": "edge_mu_to_y", "type": "edge", "source": "node_mu", "target": "node_Y" },
-    { "id": "edge_tauc_to_y", "type": "edge", "source": "node_tau.c", "target": "node_Y" },
-    { "id": "edge_alphai_to_mu", "type": "edge", "source": "node_alpha", "target": "node_mu" },
-    { "id": "edge_betai_to_mu", "type": "edge", "source": "node_beta", "target": "node_mu" },
-    { "id": "edge_x_to_mu", "type": "edge", "source": "node_x", "target": "node_mu" },
-    { "id": "edge_xbar_to_mu", "type": "edge", "source": "node_xbar", "target": "node_mu" },
-    { "id": "edge_alphac_to_alphai", "type": "edge", "source": "node_alpha.c", "target": "node_alpha" },
-    { "id": "edge_alphatau_to_alphai", "type": "edge", "source": "node_alpha.tau", "target": "node_alpha" },
-    { "id": "edge_betac_to_betai", "type": "edge", "source": "node_beta.c", "target": "node_beta" },
-    { "id": "edge_betatau_to_betai", "type": "edge", "source": "node_beta.tau", "target": "node_beta" },
-    { "id": "edge_tauc_to_sigma", "type": "edge", "source": "node_tau.c", "target": "node_sigma" },
-    { "id": "edge_alphac_to_alpha0", "type": "edge", "source": "node_alpha.c", "target": "node_alpha0" },
-    { "id": "edge_xbar_to_alpha0", "type": "edge", "source": "node_xbar", "target": "node_alpha0" },
-    { "id": "edge_betac_to_alpha0", "type": "edge", "source": "node_beta.c", "target": "node_alpha0" }
+    {
+      "id": "edge_mu_to_y",
+      "type": "edge",
+      "source": "node_mu",
+      "target": "node_Y"
+    },
+    {
+      "id": "edge_tauc_to_y",
+      "type": "edge",
+      "source": "node_tau.c",
+      "target": "node_Y"
+    },
+    {
+      "id": "edge_alphai_to_mu",
+      "type": "edge",
+      "source": "node_alpha",
+      "target": "node_mu"
+    },
+    {
+      "id": "edge_betai_to_mu",
+      "type": "edge",
+      "source": "node_beta",
+      "target": "node_mu"
+    },
+    {
+      "id": "edge_x_to_mu",
+      "type": "edge",
+      "source": "node_x",
+      "target": "node_mu"
+    },
+    {
+      "id": "edge_xbar_to_mu",
+      "type": "edge",
+      "source": "node_xbar",
+      "target": "node_mu"
+    },
+    {
+      "id": "edge_alphac_to_alphai",
+      "type": "edge",
+      "source": "node_alpha.c",
+      "target": "node_alpha"
+    },
+    {
+      "id": "edge_alphatau_to_alphai",
+      "type": "edge",
+      "source": "node_alpha.tau",
+      "target": "node_alpha"
+    },
+    {
+      "id": "edge_betac_to_betai",
+      "type": "edge",
+      "source": "node_beta.c",
+      "target": "node_beta"
+    },
+    {
+      "id": "edge_betatau_to_betai",
+      "type": "edge",
+      "source": "node_beta.tau",
+      "target": "node_beta"
+    },
+    {
+      "id": "edge_tauc_to_sigma",
+      "type": "edge",
+      "source": "node_tau.c",
+      "target": "node_sigma"
+    },
+    {
+      "id": "edge_alphac_to_alpha0",
+      "type": "edge",
+      "source": "node_alpha.c",
+      "target": "node_alpha0"
+    },
+    {
+      "id": "edge_xbar_to_alpha0",
+      "type": "edge",
+      "source": "node_xbar",
+      "target": "node_alpha0"
+    },
+    {
+      "id": "edge_betac_to_alpha0",
+      "type": "edge",
+      "source": "node_beta.c",
+      "target": "node_alpha0"
+    }
   ]
-}
+}
\ No newline at end of file

From eaec6a47050d8482cd164270d7ee8374233eefbc Mon Sep 17 00:00:00 2001
From: Shravan Goswami <shravanngoswamii@gmail.com>
Date: Fri, 29 Aug 2025 18:38:29 +0530
Subject: [PATCH 12/12] update Connection menu dropdown docs

---
 DoodleBUGS/src/components/layouts/TheNavbar.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/DoodleBUGS/src/components/layouts/TheNavbar.vue b/DoodleBUGS/src/components/layouts/TheNavbar.vue
index f63f689d2..6a8c349ae 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -47,11 +47,13 @@ const { isConnected, isExecuting, isConnecting, backendUrl } = storeToRefs(execu
 const navBackendUrl = ref(backendUrl.value || 'http://localhost:8081');
 const startCmd = 'julia --project=DoodleBUGS/runtime DoodleBUGS/runtime/server.jl';
 const instantiateCmd = 'julia --project=DoodleBUGS/runtime -e "using Pkg; Pkg.instantiate()"';
+const cloneCmd = 'git clone https://github.com/TuringLang/JuliaBUGS.jl.git';
 
 // Copy helpers with brief feedback
 const copiedBackendUrl = ref(false);
 const copiedStartCmd = ref(false);
 const copiedInstantiateCmd = ref(false);
+const copiedCloneCmd = ref(false);
 
 function copyWithFeedback(text: string, flag: typeof copiedBackendUrl) {
   navigator.clipboard.writeText(text).then(() => {
@@ -63,6 +65,7 @@ function copyWithFeedback(text: string, flag: typeof copiedBackendUrl) {
 const copyBackendUrl = () => copyWithFeedback(navBackendUrl.value, copiedBackendUrl);
 const copyStartCmd = () => copyWithFeedback(startCmd, copiedStartCmd);
 const copyInstantiateCmd = () => copyWithFeedback(instantiateCmd, copiedInstantiateCmd);
+const copyCloneCmd = () => copyWithFeedback(cloneCmd, copiedCloneCmd);
 
 const displayTitle = computed(() => {
   if (props.projectName && props.activeGraphName) {
@@ -187,7 +190,16 @@ const handleGridSizeInput = (event: Event) => {
                 </BaseButton>
               </div>
               <div class="dropdown-hint">
-                <div>First time only (instantiate deps):</div>
+                <div>1) Clone repository:</div>
+                <div class="copy-row">
+                  <div class="code-inline">{{ cloneCmd }}</div>
+                  <BaseButton size="small" type="ghost" class="copy-btn" title="Copy command" @click.stop="copyCloneCmd">
+                    <i v-if="copiedCloneCmd" class="fas fa-check"></i>
+                    <i v-else class="fas fa-copy"></i>
+                  </BaseButton>
+                </div>
+                <div style="height:6px;"></div>
+                <div>2) From repo root, first time only (instantiate deps):</div>
                 <div class="copy-row">
                   <div class="code-inline">{{ instantiateCmd }}</div>
                   <BaseButton size="small" type="ghost" class="copy-btn" title="Copy command" @click.stop="copyInstantiateCmd">
@@ -196,7 +208,7 @@ const handleGridSizeInput = (event: Event) => {
                   </BaseButton>
                 </div>
                 <div style="height:6px;"></div>
-                <div>Start backend from repo root:</div>
+                <div>3) From repo root, start backend:</div>
                 <div class="copy-row">
                   <div class="code-inline">{{ startCmd }}</div>
                   <BaseButton size="small" type="ghost" class="copy-btn" title="Copy command" @click.stop="copyStartCmd">