diff --git a/DoodleBUGS/.gitignore b/DoodleBUGS/.gitignore
index 4aa60c007..438771e2d 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
@@ -18,6 +19,7 @@ dist-ssr
 coverage
 *.local
 ztest
+tmp
 
 /cypress/videos/
 /cypress/screenshots/
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/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/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
diff --git a/DoodleBUGS/runtime/Project.toml b/DoodleBUGS/runtime/Project.toml
new file mode 100644
index 000000000..8dbd2c8c7
--- /dev/null
+++ b/DoodleBUGS/runtime/Project.toml
@@ -0,0 +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
new file mode 100644
index 000000000..cd3cf5e41
--- /dev/null
+++ b/DoodleBUGS/runtime/server.jl
@@ -0,0 +1,357 @@
+# This server is designed to be a generic executor.
+# It creates a temporary, sandboxed Julia environment for each request,
+
+using HTTP
+using JSON3
+using Logging
+
+const CORS_HEADERS = [
+    "Access-Control-Allow-Origin" => "*",
+    "Access-Control-Allow-Headers" => "Content-Type",
+    "Access-Control-Allow-Methods" => "POST, GET, OPTIONS",
+]
+
+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
+
+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
+
+
+function run_model_handler(req::HTTP.Request)
+    logs = String[]
+    log!(logs, "Received /api/run request")
+    log!(logs, "Backend processing started.")
+    
+    tmp_dir = mktempdir()
+    log!(logs, "Created temporary working directory at: $(tmp_dir)")
+
+    try
+        body = JSON3.read(String(req.body))
+        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())
+
+        log!(logs, "Request body parsed successfully.")
+
+        model_path = joinpath(tmp_dir, "model.bugs")
+        write(model_path, model_code)
+        log!(logs, "Wrote BUGS model to: $(model_path)")
+
+        model_literal = repr(String(model_code))
+
+        results_path = joinpath(tmp_dir, "results.json")
+
+        payload_path = joinpath(tmp_dir, "payload.json")
+        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),
+                "timeout_s" => get(settings, :timeout_s, nothing),
+            ),
+        )
+        open(payload_path, "w") do f
+            JSON3.write(f, payload_obj)
+        end
+        log!(logs, "Wrote payload to: $(payload_path)")
+
+        script_path = joinpath(tmp_dir, "run_script.jl")
+        run_script_content = """
+        using JuliaBUGS, AbstractMCMC, AdvancedHMC, LogDensityProblems, LogDensityProblemsAD, MCMCChains, ReverseDiff, Random, JSON3, DataFrames, StatsBase, Statistics
+
+        try
+            # Read payload
+            payload = JSON3.read(read($(repr(String(payload_path))), String))
+            settings = payload.settings
+
+            # 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
+
+            # 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
+            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
+
+            # Define and compile model
+            model_def = JuliaBUGS.@bugs($(model_literal), true, false)
+            model = JuliaBUGS.compile(model_def, data_nt, inits_nt)
+
+            # Wrap for AD (ReverseDiff by default)
+            ad_model = ADgradient(:ReverseDiff, model)
+            ld_model = AbstractMCMC.LogDensityModel(ad_model)
+
+            # Settings
+            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)
+
+            # 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(ad_model)
+            initial_theta = rand(rng, D)
+
+            # Sample
+            if n_chains > 1 && Threads.nthreads() > 1
+                samples = AbstractMCMC.sample(
+                    rng,
+                    ld_model,
+                    NUTS(0.8),
+                    AbstractMCMC.MCMCThreads(),
+                    n_samples,
+                    n_chains;
+                    n_adapts=n_adapts,
+                    chain_type=Chains,
+                    init_params=initial_theta,
+                    discard_initial=n_adapts,
+                    progress=false,
+                )
+            else
+                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
+
+            # Summaries
+            summary_df = DataFrame(MCMCChains.summarystats(samples))
+            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
+        catch e
+            open($(repr(String(results_path))), "w") do f
+                JSON3.write(f, Dict("success" => false, "error" => sprint(showerror, e)))
+            end
+        end
+        """
+        write(script_path, run_script_content)
+        log!(logs, "Generated execution script: $(script_path)")
+
+        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...")
+        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))
+
+        log!(logs, "Preparing response...")
+
+        if !results_content.success
+            throw(ErrorException(results_content.error))
+        end
+
+        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
+
+        # 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" => (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,
+        )
+
+        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
+        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(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 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
+
+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)
+
+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..c192d4927 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,9 +25,12 @@ 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, generateStandaloneScript } from '../../composables/useBugsCodeGenerator';
 import type { GraphElement, NodeType, PaletteItemType, ExampleModel } from '../../types';
+import type { ExecutionResult, GeneratedFile } from '../../stores/executionStore';
 
 interface ExportOptions {
   bg: string;
@@ -38,12 +45,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, samplerSettings } = storeToRefs(executionStore);
 const { activeLeftTab, isLeftSidebarOpen, leftSidebarWidth, isRightSidebarOpen, rightSidebarWidth } = storeToRefs(uiStore);
 
 const currentMode = ref<string>('select');
@@ -60,6 +69,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 +79,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');
@@ -86,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(
@@ -157,7 +190,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 +245,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 +289,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 +304,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 +313,346 @@ 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);
+
+// Inline navbar connect handler
+const connectToBackendUrl = async (url: string) => {
+  tempBackendUrl.value = url?.trim() || '';
+  await connectToBackend();
+};
+
+const connectToBackend = async () => {
+  isConnecting.value = true;
+  isConnected.value = false;
+  executionStore.setBackendUrl(tempBackendUrl.value);
+  uiStore.setActiveRightTab('connection');
+  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;
+    isRightSidebarOpen.value = true;
+  } catch (error: unknown) {
+    const errorMessage = (error as Error).message;
+    executionStore.executionLogs.push(`Connection failed: ${errorMessage}`);
+    isConnected.value = false;
+  } finally {
+    isConnecting.value = false;
+  }
+};
+
+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('connection');
+  executionStore.resetExecutionState();
+  executionStore.setExecutionPanelTab('logs');
+
+  // Reset abort flag each run
+  abortedByUser = false;
+
+  try {
+    // Ensure any previous in-flight request is cancelled
+    if (currentRunController) {
+      currentRunController.abort();
+      currentRunController = null;
+    }
+    currentRunController = new AbortController();
+
+    // 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));
+
+    const payload = {
+      model_code: generatedCode.value,
+      data: dataPayload,
+      inits: initsPayload,
+      data_string: dataString,
+      inits_string: initsString,
+      settings: { ...samplerSettings.value }
+    };
+
+    // 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),
+      signal: currentRunController.signal
+    });
+    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' },
+        body: JSON.stringify({
+          model_code: payload.model_code,
+          data_string: dataString,
+          inits_string: initsString,
+          settings: samplerSettings.value
+        }),
+        signal: currentRunController.signal
+      });
+    }
+
+    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()) as RunApiResponse;
+      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}`);
+
+    // 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 };
+    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
+    executionStore.setExecutionPanelTab('results');
+
+  } catch (error: unknown) {
+    const err = error as Error & { name?: string };
+    if (err?.name === 'AbortError') {
+      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.message;
+    }
+  } finally {
+    isExecuting.value = false;
+    if (currentRunController) {
+      currentRunController = null;
+    }
+    abortedByUser = false;
+  }
+};
+
+// 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);
+    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 "()";
+  }
+};
+
+const handleGenerateStandalone = () => {
+  try {
+    // 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,
+      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;
+    // 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}`);
+  }
+};
 </script>
 
 <template>
@@ -377,7 +666,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-url="connectToBackendUrl" @run-model="runModel" @abort-run="abortRun" @generate-standalone="handleGenerateStandalone" />
 
     <div class="content-area">
       <aside class="left-sidebar" :style="leftSidebarStyle">
@@ -394,6 +684,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 +699,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 +725,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 === 'connection' }"
+              @click="uiStore.setActiveRightTab('connection')">Connection</button>
           </div>
           <button @click="uiStore.toggleRightTabPinned()" class="pin-button"
             :class="{ 'pinned': uiStore.isRightTabPinned }" title="Pin Tab">
@@ -445,39 +744,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 === 'connection'" 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 +1015,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..6a8c349ae 100644
--- a/DoodleBUGS/src/components/layouts/TheNavbar.vue
+++ b/DoodleBUGS/src/components/layouts/TheNavbar.vue
@@ -1,10 +1,12 @@
 <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';
 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 +36,37 @@ const emit = defineEmits<{
   (e: 'load-example', exampleKey: string): void;
   (e: 'validate-model'): void;
   (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();
+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()"';
+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(() => {
+    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 copyCloneCmd = () => copyWithFeedback(cloneCmd, copiedCloneCmd);
+
 const displayTitle = computed(() => {
   if (props.projectName && props.activeGraphName) {
     return `${props.projectName} — ${props.activeGraphName}`;
@@ -131,7 +162,7 @@ const handleGridSizeInput = (event: Event) => {
             </div>
           </template>
         </DropdownMenu>
-        
+
         <DropdownMenu>
           <template #trigger>
             <BaseButton type="ghost" size="small">Examples</BaseButton>
@@ -143,6 +174,65 @@ const handleGridSizeInput = (event: Event) => {
           </template>
         </DropdownMenu>
 
+        <DropdownMenu>
+          <template #trigger>
+            <BaseButton type="ghost" size="small">Connection</BaseButton>
+          </template>
+          <template #content>
+            <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" />
+                <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>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">
+                    <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>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">
+                    <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 }">
+                  <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 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>
+
         <DropdownMenu>
           <template #trigger>
             <BaseButton type="ghost" size="small">Help</BaseButton>
@@ -160,17 +250,29 @@ 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>
+        <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">
@@ -348,6 +450,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 +483,71 @@ const handleGridSizeInput = (event: Event) => {
 .validation-status.invalid {
     color: var(--color-danger);
 }
+
+.navbar-center .base-button {
+    display: flex;
+    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 }
+
+.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/left-sidebar/ExecutionSettingsPanel.vue b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
new file mode 100644
index 000000000..1d8cf57c1
--- /dev/null
+++ b/DoodleBUGS/src/components/left-sidebar/ExecutionSettingsPanel.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useExecutionStore } from '../../stores/executionStore';
+import BaseInput from '../ui/BaseInput.vue';
+
+const executionStore = useExecutionStore();
+const { samplerSettings } = storeToRefs(executionStore);
+</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 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>
+      <!-- Frontend timeout removed; backend may still enforce if configured server-side -->
+    </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;
+}
+</style>
diff --git a/DoodleBUGS/src/components/panels/DataInputPanel.vue b/DoodleBUGS/src/components/panels/DataInputPanel.vue
index 20a6e79f3..badcfc2a2 100644
--- a/DoodleBUGS/src/components/panels/DataInputPanel.vue
+++ b/DoodleBUGS/src/components/panels/DataInputPanel.vue
@@ -4,29 +4,31 @@ 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);
+const jsonInitsError = 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,106 @@ 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"]
-    });
+const validateJsonInits = (jsonString: string) => {
+  try {
+    JSON.parse(jsonString);
+    jsonInitsError.value = null;
+  } catch (e: unknown) {
+    jsonInitsError.value = e instanceof Error ? e.message : String(e);
+  }
+};
 
-    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();
+          validateJsonInits(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);
+    validateJsonInits(dataStore.initsString);
   }
-});
+  isUpdatingFromSource = false;
+}, { deep: true });
 
 watch(() => props.isActive, (newVal) => {
-  if (newVal && cmInstance) {
+  if (newVal) {
     nextTick(() => {
-      cmInstance?.refresh();
+      dataCm?.refresh();
+      initsCm?.refresh();
     });
   }
 });
@@ -94,19 +145,49 @@ 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> <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> <strong>Inits:</strong> 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 +221,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 +254,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 +311,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..233ef9271
--- /dev/null
+++ b/DoodleBUGS/src/components/right-sidebar/ExecutionPanel.vue
@@ -0,0 +1,744 @@
+<script setup lang="ts">
+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,
+  // New richer result slices
+  summaryResults,
+  quantileResults,
+  executionPanelTab,
+} = storeToRefs(executionStore);
+
+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) => {
+  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 ?? '';
+});
+
+// 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;
+  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'],
+    });
+    editorReady.value = true;
+  } 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;
+  }
+  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);
+  }
+});
+
+// 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;
+    });
+  }
+  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;
+    setTimeout(() => {
+      copySuccessStates.value[fileName] = false;
+    }, 2000);
+  }).catch(err => {
+    console.error(`Failed to copy ${fileName}:`, err);
+    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>
+  <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 === 'logs' }"
+        @click="activeTab = 'logs'"
+        size="small"
+      >
+        Logs
+      </BaseButton>
+      <BaseButton
+        :class="{ active: activeTab === 'files' }"
+        @click="activeTab = 'files'"
+        size="small"
+      >
+        Files
+      </BaseButton>
+      <BaseButton
+        :class="{ active: activeTab === 'results' }"
+        @click="activeTab = 'results'"
+        size="small"
+      >
+        Results
+      </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="!hasSummary && !hasQuantiles" class="placeholder">
+          <p>Execution results will appear here.</p>
+        </div>
+        <div v-else class="results-table-container">
+          <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>
+
+      <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-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>{{ activeFileName }}</strong>
+              <BaseButton @click="downloadFileContent(activeFileName, activeFileContent)" size="small" type="secondary">
+                Download
+              </BaseButton>
+            </div>
+            <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>
+      </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-tabbed {
+  display: flex;
+  flex-direction: column;
+  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-view {
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.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;
+}
+
+.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; }
+
+.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 */
+}
+
+.editor-container {
+  width: 100%;
+  height: 100%;
+}
+
+/* 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%;
+  background-color: var(--color-secondary);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: background-color 0.2s, opacity 0.2s;
+}
+
+.copy-button:hover {
+  background-color: var(--color-secondary-hover);
+  opacity: 1;
+}
+
+.copy-button .fa-copy,
+.copy-button .fa-check {
+  font-size: 1.1rem;
+}
+</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 2187e2f1f..56a85acf8 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) {
@@ -107,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/dataStore.ts b/DoodleBUGS/src/stores/dataStore.ts
index ae03de918..fe35d2db0 100644
--- a/DoodleBUGS/src/stores/dataStore.ts
+++ b/DoodleBUGS/src/stores/dataStore.ts
@@ -3,72 +3,221 @@ 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..84471b762
--- /dev/null
+++ b/DoodleBUGS/src/stores/executionStore.ts
@@ -0,0 +1,131 @@
+import { defineStore } from 'pinia';
+import { ref, watch } from 'vue';
+
+export interface ExecutionResult {
+  [key: string]: string | number;
+}
+
+export interface GeneratedFile {
+  name: string;
+  content: string;
+}
+
+export interface SamplerSettings {
+    n_samples: number;
+    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);
+  const isConnected = ref(false);
+  const isConnecting = ref(false);
+
+  // State for model execution
+  const isExecuting = ref(false);
+  // 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>(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>(
+    (() => {
+      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>({
+      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) => {
+    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;
+    summaryResults.value = null;
+    quantileResults.value = null;
+    executionLogs.value = [];
+    executionError.value = null;
+    generatedFiles.value = [];
+    executionPanelTab.value = 'logs';
+  };
+
+  const setExecutionPanelTab = (tab: ExecutionPanelTab) => {
+    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,
+    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 e21e04818..6b0a47381 100644
--- a/DoodleBUGS/src/stores/uiStore.ts
+++ b/DoodleBUGS/src/stores/uiStore.ts
@@ -1,22 +1,23 @@
 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' | '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'
   );
   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 +25,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 +57,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 +82,6 @@ export const useUiStore = defineStore('ui', () => {
   };
 
   return {
-    // Right Sidebar
     activeRightTab,
     isRightTabPinned,
     isRightSidebarOpen,
@@ -86,7 +89,6 @@ export const useUiStore = defineStore('ui', () => {
     setActiveRightTab,
     toggleRightTabPinned,
     toggleRightSidebar,
-    // Left Sidebar
     activeLeftTab,
     isLeftSidebarOpen,
     leftSidebarWidth,