From e9c7c88b9aef7292be823d1e39b19ad09a774bf1 Mon Sep 17 00:00:00 2001
From: Stefan Krawczyk <stefank@cs.stanford.edu>
Date: Sun, 1 Mar 2026 08:23:29 -0800
Subject: [PATCH 01/10] feat: add visual Graph Builder tool to Burr UI

This takes work from @jaeyow and https://github.com/apache/burr/pull/572.

Adds a drag-and-drop graph editor for designing Burr application graphs
visually and exporting as Python code or JSON.

Key changes:
- New /graph-builder route with full visual editor (ReactFlow v12)
- Migrate existing GraphView from reactflow v11 to @xyflow/react v12
- Remove reactflow and @tisoap/react-flow-smart-edge dependencies
- Per-node async/streaming toggles matching Burr's 4 action variants
- Python code generation with correct decorators and signatures
- 3 pre-built example graphs (MultiModal Chatbot, CRAG, Streaming)
- localStorage auto-save/restore of graph state
- Empty-state onboarding overlay and structured help sidebar
- Fix appcontainer layout for full-height content
---
 telemetry/ui/package-lock.json                |  363 +----
 telemetry/ui/package.json                     |    3 +-
 telemetry/ui/src/App.tsx                      |    2 +
 .../ui/src/components/nav/appcontainer.tsx    |   16 +-
 .../src/components/routes/app/GraphView.tsx   |   45 +-
 .../components/ConfirmLoadExampleDialog.tsx   |   81 +
 .../graph-builder/components/CustomEdge.tsx   |  161 ++
 .../graph-builder/components/CustomNode.tsx   |  230 +++
 .../components/ExampleGallery.tsx             |   71 +
 .../graph-builder/components/GraphBuilder.tsx | 1307 +++++++++++++++++
 .../routes/graph-builder/data/examples.ts     |  564 +++++++
 .../graph-builder/utils/BurrCodeGenerator.ts  |  321 ++++
 .../graph-builder/utils/ExampleLoader.ts      |   93 ++
 .../graph-builder/utils/GraphExporter.ts      |   83 ++
 14 files changed, 2974 insertions(+), 366 deletions(-)
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/components/ConfirmLoadExampleDialog.tsx
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/data/examples.ts
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/utils/ExampleLoader.ts
 create mode 100644 telemetry/ui/src/components/routes/graph-builder/utils/GraphExporter.ts

diff --git a/telemetry/ui/package-lock.json b/telemetry/ui/package-lock.json
index 21461ed4e..dfd25da4c 100644
--- a/telemetry/ui/package-lock.json
+++ b/telemetry/ui/package-lock.json
@@ -14,7 +14,6 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "@tisoap/react-flow-smart-edge": "^3.0.0",
         "@types/fuse": "^2.6.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.82",
@@ -23,6 +22,7 @@
         "@types/react-select": "^5.0.1",
         "@types/react-syntax-highlighter": "^15.5.11",
         "@uiw/react-json-view": "^2.0.0-alpha.12",
+        "@xyflow/react": "^12.0.0",
         "clsx": "^2.1.0",
         "dagre": "^0.8.5",
         "es-abstract": "^1.22.4",
@@ -37,7 +37,6 @@
         "react-scripts": "5.0.1",
         "react-select": "^5.8.1",
         "react-syntax-highlighter": "^15.5.0",
-        "reactflow": "^11.10.4",
         "remark-gfm": "^4.0.0",
         "string.prototype.matchall": "^4.0.10",
         "tailwindcss-question-mark": "^0.4.0",
@@ -6105,102 +6104,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/@reactflow/background": {
-      "version": "11.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/core": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
-      "dependencies": {
-        "@types/d3": "^7.4.0",
-        "@types/d3-drag": "^3.0.1",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.4",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
-      "dependencies": {
-        "@reactflow/core": "11.10.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
     "node_modules/@remix-run/router": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
@@ -7162,24 +7065,6 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
-    "node_modules/@tisoap/react-flow-smart-edge": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@tisoap/react-flow-smart-edge/-/react-flow-smart-edge-3.0.0.tgz",
-      "integrity": "sha512-XtEQT0IrOqPwJvCzgEoj3Y16/EK4SOcjZO7FmOPU+qJWmgYjeTyv7J35CGm6dFeJYdZ2gHDrvQ1zwaXuo23/8g==",
-      "dependencies": {
-        "pathfinding": "0.4.18"
-      },
-      "engines": {
-        "node": ">=16",
-        "npm": "^8.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17",
-        "reactflow": ">=11",
-        "typescript": ">=4.6"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -7278,93 +7163,11 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/d3": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
-      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
-    },
-    "node_modules/@types/d3-axis": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
-      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-brush": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
-      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-chord": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
-      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
     },
-    "node_modules/@types/d3-contour": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
-      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
-    },
-    "node_modules/@types/d3-dispatch": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
-      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ=="
-    },
     "node_modules/@types/d3-drag": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -7373,47 +7176,6 @@
         "@types/d3-selection": "*"
       }
     },
-    "node_modules/@types/d3-dsv": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
-      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
-    },
-    "node_modules/@types/d3-fetch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
-      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
-      "dependencies": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "node_modules/@types/d3-force": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.9.tgz",
-      "integrity": "sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA=="
-    },
-    "node_modules/@types/d3-format": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
-      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
-    },
-    "node_modules/@types/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz",
-      "integrity": "sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw=="
-    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -7422,67 +7184,11 @@
         "@types/d3-color": "*"
       }
     },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
-    },
-    "node_modules/@types/d3-polygon": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
-      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="
-    },
-    "node_modules/@types/d3-quadtree": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
-      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
-    },
-    "node_modules/@types/d3-random": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
-      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
-      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-      "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
-    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
       "integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg=="
     },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
-      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
-      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
-    },
-    "node_modules/@types/d3-time-format": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
-      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
-    },
     "node_modules/@types/d3-transition": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
@@ -7577,11 +7283,6 @@
         "fuse": "*"
       }
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
-    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
@@ -8715,6 +8416,38 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -15058,11 +14791,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/heap": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.5.tgz",
-      "integrity": "sha512-G7HLD+WKcrOyJP5VQwYZNC3Z6FcQ7YYjEFiFoIj8PfEr73mu421o8B1N5DKUcc8K37EsJ2XXWA8DtrDz/2dReg=="
-    },
     "node_modules/heroicons": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.1.1.tgz",
@@ -21519,14 +21247,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/pathfinding": {
-      "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/pathfinding/-/pathfinding-0.4.18.tgz",
-      "integrity": "sha512-R0TGEQ9GRcFCDvAWlJAWC+KGJ9SLbW4c0nuZRcioVlXVTlw+F5RvXQ8SQgSqI9KXWC1ew95vgmIiyaWTlCe9Ag==",
-      "dependencies": {
-        "heap": "0.2.5"
-      }
-    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -23634,23 +23354,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/reactflow": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
-      "dependencies": {
-        "@reactflow/background": "11.3.9",
-        "@reactflow/controls": "11.2.9",
-        "@reactflow/core": "11.10.4",
-        "@reactflow/minimap": "11.7.9",
-        "@reactflow/node-resizer": "2.2.9",
-        "@reactflow/node-toolbar": "1.3.9"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/telemetry/ui/package.json b/telemetry/ui/package.json
index 1a391fcc0..2145236c5 100644
--- a/telemetry/ui/package.json
+++ b/telemetry/ui/package.json
@@ -9,7 +9,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@tisoap/react-flow-smart-edge": "^3.0.0",
+    "@xyflow/react": "^12.0.0",
     "@types/fuse": "^2.6.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
@@ -32,7 +32,6 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.8.1",
     "react-syntax-highlighter": "^15.5.0",
-    "reactflow": "^11.10.4",
     "remark-gfm": "^4.0.0",
     "string.prototype.matchall": "^4.0.10",
     "tailwindcss-question-mark": "^0.4.0",
diff --git a/telemetry/ui/src/App.tsx b/telemetry/ui/src/App.tsx
index 4b80c5bd8..fd0f1445e 100644
--- a/telemetry/ui/src/App.tsx
+++ b/telemetry/ui/src/App.tsx
@@ -31,6 +31,7 @@ import { StreamingChatbotWithTelemetry } from './examples/StreamingChatbot';
 import { AdminView } from './components/routes/AdminView';
 import { AnnotationsViewContainer } from './components/routes/app/AnnotationsView';
 import { DeepResearcherWithTelemetry } from './examples/DeepResearcher';
+import GraphBuilder from './components/routes/graph-builder/components/GraphBuilder';
 
 /**
  * Basic application. We have an AppContainer -- this has a breadcrumb and a sidebar.
@@ -65,6 +66,7 @@ const App = () => {
             <Route path="/demos/email-assistant" element={<EmailAssistantWithTelemetry />} />
             <Route path="/demos/deep-researcher" element={<DeepResearcherWithTelemetry />} />
             <Route path="/admin" element={<AdminView />} />
+            <Route path="/graph-builder" element={<GraphBuilder />} />
             <Route path="*" element={<Navigate to="/projects" />} />
           </Routes>
         </AppContainer>
diff --git a/telemetry/ui/src/components/nav/appcontainer.tsx b/telemetry/ui/src/components/nav/appcontainer.tsx
index edcce3f2c..7277ac556 100644
--- a/telemetry/ui/src/components/nav/appcontainer.tsx
+++ b/telemetry/ui/src/components/nav/appcontainer.tsx
@@ -22,6 +22,7 @@ import { Dialog, Disclosure, Transition } from '@headlessui/react';
 import {
   ComputerDesktopIcon,
   Square2StackIcon,
+  SquaresPlusIcon,
   QuestionMarkCircleIcon,
   XMarkIcon,
   ChatBubbleLeftEllipsisIcon,
@@ -100,6 +101,12 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
       icon: Square2StackIcon,
       linkType: 'internal'
     },
+    {
+      name: 'Graph Builder',
+      href: '/graph-builder',
+      icon: SquaresPlusIcon,
+      linkType: 'internal'
+    },
     {
       name: 'Examples',
       href: 'https://github.com/DAGWorks-Inc/burr/tree/main/examples',
@@ -384,13 +391,12 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
           <ToggleOpenButton open={sidebarOpen} toggleSidebar={toggleSidebar} />
         </div>
 
-        {/* This is a bit hacky -- just quickly prototyping and these margins were the ones that worked! */}
-        <main className={`py-14 -my-1 ${sidebarOpen ? 'lg:pl-72' : 'lg:pl-5'} h-full`}>
-          <div className="flex items-center px-5 sm:px-7 lg:px-9 pb-8 -my-4">
+        <main className={`${sidebarOpen ? 'lg:pl-72' : 'lg:pl-5'} h-full flex flex-col`}>
+          <div className="flex items-center px-5 sm:px-7 lg:px-9 h-14 flex-shrink-0">
             <BreadCrumb />
           </div>
-          <div className="flex h-full flex-col">
-            <div className="px-4 sm:px-6 lg:px-2 max-h-full h-full flex-1"> {props.children}</div>
+          <div className="flex-1 flex flex-col min-h-0">
+            <div className="px-4 sm:px-6 lg:px-2 h-full flex-1 min-h-0">{props.children}</div>
           </div>
         </main>
       </div>
diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx b/telemetry/ui/src/components/routes/app/GraphView.tsx
index 31a5f37e3..baa0b0610 100644
--- a/telemetry/ui/src/components/routes/app/GraphView.tsx
+++ b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -20,8 +20,9 @@
 import { ActionModel, ApplicationModel, Step } from '../../../api';
 
 import dagre from 'dagre';
-import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
-import ReactFlow, {
+import React, { createContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import {
+  ReactFlow,
   BaseEdge,
   Controls,
   EdgeProps,
@@ -30,14 +31,12 @@ import ReactFlow, {
   Position,
   ReactFlowProvider,
   getBezierPath,
-  useNodes,
   useReactFlow
-} from 'reactflow';
+} from '@xyflow/react';
 
-import 'reactflow/dist/style.css';
+import '@xyflow/react/dist/style.css';
 import { backgroundColorsForIndex } from './AppView';
 import { getActionStatus } from '../../../utils';
-import { getSmartEdge } from '@tisoap/react-flow-smart-edge';
 
 const dagreGraph = new dagre.graphlib.Graph();
 
@@ -149,38 +148,26 @@ export const ActionActionEdge = ({
   markerEnd,
   data
 }: EdgeProps) => {
-  const nodes = useNodes();
-  data = data as EdgeData;
+  const edgeData = data as EdgeData | undefined;
   const { highlightedActions: previousActions, currentAction } =
     React.useContext(NodeStateProvider);
   const allActionsInPath = [...(previousActions || []), ...(currentAction ? [currentAction] : [])];
   const containsFrom = allActionsInPath.some(
-    (action) => action.step_start_log.action === data.from
+    (action) => action.step_start_log.action === edgeData?.from
+  );
+  const containsTo = allActionsInPath.some(
+    (action) => action.step_start_log.action === edgeData?.to
   );
-  const containsTo = allActionsInPath.some((action) => action.step_start_log.action === data.to);
   const shouldHighlight = containsFrom && containsTo;
-  const getSmartEdgeResponse = getSmartEdge({
-    sourcePosition,
-    targetPosition,
+
+  const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
+    sourcePosition,
     targetX,
     targetY,
-    nodes
+    targetPosition
   });
-  let edgePath = null;
-  if (getSmartEdgeResponse !== null) {
-    edgePath = getSmartEdgeResponse.svgPathString;
-  } else {
-    edgePath = getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition
-    })[0];
-  }
 
   const style = {
     markerColor: shouldHighlight ? 'black' : 'gray',
@@ -188,7 +175,7 @@ export const ActionActionEdge = ({
   };
   return (
     <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} label={'test'} />
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
     </>
   );
 };
@@ -359,7 +346,7 @@ export const _Graph = (props: {
         <ReactFlow
           nodes={nodes}
           edges={edges}
-          edgesUpdatable={false}
+          edgesReconnectable={false}
           nodesDraggable={false}
           nodeTypes={nodeTypes}
           edgeTypes={edgeTypes}
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/ConfirmLoadExampleDialog.tsx b/telemetry/ui/src/components/routes/graph-builder/components/ConfirmLoadExampleDialog.tsx
new file mode 100644
index 000000000..e1a0cf56d
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/ConfirmLoadExampleDialog.tsx
@@ -0,0 +1,81 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Button } from '../../../common/button';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+interface ConfirmLoadExampleDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  exampleTitle: string;
+  hasExistingContent: boolean;
+}
+
+const ConfirmLoadExampleDialog: React.FC<ConfirmLoadExampleDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  exampleTitle,
+  hasExistingContent
+}) => {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
+        <div className="flex items-center gap-2 mb-4">
+          <ExclamationTriangleIcon className="w-6 h-6 text-amber-500" />
+          <h2 className="text-lg font-semibold">Load Example Graph</h2>
+        </div>
+
+        <div className="space-y-4">
+          <p className="text-gray-700">
+            Are you sure you want to load the &quot;{exampleTitle}&quot; example?
+          </p>
+
+          {hasExistingContent && (
+            <div className="bg-amber-50 border border-amber-200 rounded-md p-3">
+              <p className="text-sm text-amber-800">
+                This will replace your current graph. Any unsaved changes will be lost.
+              </p>
+            </div>
+          )}
+
+          <div className="text-sm text-gray-500">
+            You can always export your current work as JSON or Python code before loading the
+            example.
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2 mt-6">
+          <Button onClick={onClose} outline>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} color={hasExistingContent ? 'amber' : 'blue'}>
+            {hasExistingContent ? 'Replace Graph' : 'Load Example'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmLoadExampleDialog;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx b/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx
new file mode 100644
index 000000000..f6e2447ba
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/CustomEdge.tsx
@@ -0,0 +1,161 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+  MarkerType,
+  Edge
+} from '@xyflow/react';
+
+export interface CustomEdgeData extends Record<string, unknown> {
+  condition?: string;
+  isConditional?: boolean;
+  label?: string;
+  onLabelChange?: (edgeId: string, newLabel: string) => void;
+}
+
+type CustomEdgeType = Edge<CustomEdgeData>;
+
+const CustomEdge: React.FC<EdgeProps<CustomEdgeType>> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  data,
+  markerEnd,
+  selected
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+
+  const isConditional = data?.isConditional || (data?.condition && data.condition !== 'default');
+  const displayLabel = isConditional ? data?.label || 'condition' : '';
+  const [labelValue, setLabelValue] = useState(displayLabel);
+
+  React.useEffect(() => {
+    const newDisplayLabel = isConditional ? data?.label || 'condition' : '';
+    setLabelValue(newDisplayLabel);
+  }, [data?.label, data?.condition, isConditional]);
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+
+  const edgeStyle: React.CSSProperties = {
+    strokeWidth: selected ? 4 : 2,
+    stroke:
+      (style as React.CSSProperties)?.stroke ||
+      (data?.condition === 'default' ? '#94a3b8' : '#429dbce6'),
+    ...(style as React.CSSProperties)
+  };
+
+  if (isConditional) {
+    edgeStyle.strokeDasharray = '8,4';
+    edgeStyle.animation = 'dash 2s linear infinite';
+  }
+
+  const handleLabelClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsEditing(true);
+  }, []);
+
+  const handleLabelChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setLabelValue(event.target.value);
+  }, []);
+
+  const handleLabelBlur = useCallback(() => {
+    setIsEditing(false);
+    if (data?.onLabelChange) {
+      data.onLabelChange(id, labelValue);
+    }
+  }, [data, id, labelValue]);
+
+  const handleLabelKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      event.stopPropagation();
+
+      if (event.key === 'Enter') {
+        handleLabelBlur();
+      } else if (event.key === 'Escape') {
+        setLabelValue(data?.label || data?.condition || '');
+        setIsEditing(false);
+      }
+    },
+    [data?.label, data?.condition, handleLabelBlur]
+  );
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes dash {
+            to {
+              stroke-dashoffset: -12;
+            }
+          }
+        `}
+      </style>
+
+      <BaseEdge path={edgePath} markerEnd={markerEnd || MarkerType.ArrowClosed} style={edgeStyle} />
+      <EdgeLabelRenderer>
+        {isConditional && (
+          <div
+            className="absolute text-xs pointer-events-auto"
+            style={{
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`
+            }}
+          >
+            {isEditing ? (
+              <input
+                value={labelValue}
+                onChange={handleLabelChange}
+                onBlur={handleLabelBlur}
+                onKeyDown={handleLabelKeyDown}
+                onClick={(e) => e.stopPropagation()}
+                autoFocus
+                className="border border-gray-300 rounded-xl px-2 py-1 text-xs bg-white min-w-16 text-center focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            ) : (
+              <button
+                onClick={handleLabelClick}
+                className="bg-white border border-gray-300 rounded-xl px-2 py-1 text-xs cursor-pointer hover:bg-gray-50 transition-colors min-h-5 flex items-center"
+              >
+                {data?.label ?? data?.condition ?? ''}
+              </button>
+            )}
+          </div>
+        )}
+      </EdgeLabelRenderer>
+    </>
+  );
+};
+
+export default CustomEdge;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx b/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx
new file mode 100644
index 000000000..c78661108
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/CustomNode.tsx
@@ -0,0 +1,230 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
+import { Handle, Position, NodeProps, Node } from '@xyflow/react';
+
+const pastelColors = [
+  { border: '#FF6B6B', background: '#FFE5E5' },
+  { border: '#4ECDC4', background: '#E5F9F6' },
+  { border: '#45B7D1', background: '#E5F4FD' },
+  { border: '#96CEB4', background: '#F0F9F4' },
+  { border: '#FFEAA7', background: '#FFFCF0' },
+  { border: '#DDA0DD', background: '#F5F0F5' },
+  { border: '#98D8C8', background: '#F0FAF7' },
+  { border: '#F7DC6F', background: '#FEFBF0' },
+  { border: '#BB8FCE', background: '#F4F1F7' },
+  { border: '#85C1E9', background: '#F0F8FF' }
+];
+
+export interface CustomNodeData extends Record<string, unknown> {
+  label: string;
+  description?: string;
+  nodeType: string;
+  isAsync?: boolean;
+  isStreaming?: boolean;
+  icon: string;
+  colorIndex?: number;
+  onDelete?: (nodeId: string) => void;
+  onLabelChange?: (nodeId: string, newLabel: string) => void;
+  onToggleProperty?: (nodeId: string, property: 'isAsync' | 'isStreaming') => void;
+}
+
+type CustomNodeType = Node<CustomNodeData>;
+
+const CustomNode: React.FC<NodeProps<CustomNodeType>> = ({ id, data, selected }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [labelValue, setLabelValue] = useState(data.label);
+  const [fixedWidth, setFixedWidth] = useState<number | null>(null);
+  const [fixedHeight, setFixedHeight] = useState<number | null>(null);
+  const paperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setLabelValue(data.label);
+  }, [data.label]);
+
+  const colorIndex = data.colorIndex ?? parseInt(id.replace(/\D/g, '')) % pastelColors.length;
+  const colors = pastelColors[colorIndex];
+
+  const handleLabelClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (paperRef.current) {
+      setFixedWidth(paperRef.current.offsetWidth);
+      setFixedHeight(paperRef.current.offsetHeight);
+    }
+    setIsEditing(true);
+  }, []);
+
+  const handleLabelChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setLabelValue(event.target.value);
+  }, []);
+
+  const handleLabelBlur = useCallback(() => {
+    setIsEditing(false);
+    setFixedWidth(null);
+    setFixedHeight(null);
+    if (data.onLabelChange && labelValue.trim() !== data.label) {
+      data.onLabelChange(id, labelValue.trim() || data.label);
+    }
+  }, [data, id, labelValue]);
+
+  const handleLabelKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      event.stopPropagation();
+
+      if (event.key === 'Enter') {
+        handleLabelBlur();
+      } else if (event.key === 'Escape') {
+        setLabelValue(data.label);
+        setIsEditing(false);
+        setFixedWidth(null);
+        setFixedHeight(null);
+      }
+    },
+    [data.label, handleLabelBlur]
+  );
+
+  const isInputNode = data.nodeType === 'input';
+
+  return (
+    <div
+      ref={paperRef}
+      className={`
+        min-w-40 max-w-60 relative overflow-visible transition-all duration-200 ease-in-out
+        ${selected ? 'shadow-lg scale-105' : 'shadow-sm'}
+        ${isInputNode ? 'border-2 border-dashed border-gray-600 bg-white' : 'border-2 border-solid bg-opacity-90'}
+        rounded-lg
+      `}
+      style={{
+        width: fixedWidth ? `${fixedWidth}px` : 'fit-content',
+        height: fixedHeight ? `${fixedHeight}px` : 'auto',
+        borderColor: isInputNode ? '#666' : colors.border,
+        backgroundColor: isInputNode ? '#fff' : colors.background
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{
+          background: 'white',
+          border: `2px solid ${isInputNode ? '#666' : colors.border}`,
+          width: 12,
+          height: 12
+        }}
+      />
+
+      <div
+        className={`
+        p-3 relative
+        ${isInputNode ? 'flex flex-col items-center justify-center h-full text-center' : ''}
+      `}
+      >
+        {selected && !isInputNode && (
+          <div className="absolute top-0 right-0 flex gap-px">
+            <button
+              onClick={() => data.onToggleProperty?.(id, 'isAsync')}
+              className="px-1.5 py-0.5 text-[10px] font-semibold transition-opacity rounded-bl"
+              style={{
+                color: data.isAsync ? 'white' : colors.border,
+                backgroundColor: data.isAsync ? colors.border : `${colors.border}22`,
+                opacity: data.isAsync ? 1 : 0.6
+              }}
+              title={data.isAsync ? 'Click to make synchronous' : 'Click to make async'}
+            >
+              async
+            </button>
+            <button
+              onClick={() => data.onToggleProperty?.(id, 'isStreaming')}
+              className="px-1.5 py-0.5 text-[10px] font-semibold transition-opacity rounded-tr-lg"
+              style={{
+                color: data.isStreaming ? 'white' : colors.border,
+                backgroundColor: data.isStreaming ? colors.border : `${colors.border}22`,
+                opacity: data.isStreaming ? 1 : 0.6
+              }}
+              title={data.isStreaming ? 'Click to make regular action' : 'Click to make streaming'}
+            >
+              stream
+            </button>
+          </div>
+        )}
+
+        {isEditing ? (
+          <input
+            value={labelValue}
+            onChange={handleLabelChange}
+            onBlur={handleLabelBlur}
+            onKeyDown={handleLabelKeyDown}
+            onClick={(e) => e.stopPropagation()}
+            autoFocus
+            className={`
+              border-none outline-none bg-transparent text-sm font-bold font-inherit
+              w-full box-border p-0 m-0 leading-normal block
+              ${isInputNode ? 'text-center text-gray-600' : 'text-left'}
+            `}
+            style={{
+              color: isInputNode ? '#666' : colors.border,
+              marginBottom: data.description ? '8px' : 0,
+              paddingRight: selected ? '24px' : 0
+            }}
+          />
+        ) : (
+          <div
+            onClick={handleLabelClick}
+            className={`
+              font-bold cursor-pointer hover:opacity-80 break-words min-h-5 min-w-16
+              ${isInputNode ? 'text-center text-gray-600' : 'text-left'}
+              ${data.description ? 'mb-2' : ''}
+            `}
+            style={{
+              color: isInputNode ? '#666' : colors.border,
+              paddingRight: selected ? '12px' : 0
+            }}
+          >
+            {labelValue || <span className="opacity-40 italic font-normal">click to name</span>}
+          </div>
+        )}
+
+        {data.description && (
+          <div
+            className={`
+              text-xs opacity-80 block break-words
+              ${isInputNode ? 'text-center text-gray-600' : 'text-left'}
+            `}
+            style={{ color: isInputNode ? '#666' : colors.border }}
+          >
+            {data.description}
+          </div>
+        )}
+      </div>
+
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{
+          background: 'white',
+          border: `2px solid ${isInputNode ? '#666' : colors.border}`,
+          width: 12,
+          height: 12
+        }}
+      />
+    </div>
+  );
+};
+
+export default memo(CustomNode);
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx b/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx
new file mode 100644
index 000000000..89d49cd71
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/ExampleGallery.tsx
@@ -0,0 +1,71 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { PlayIcon } from '@heroicons/react/24/outline';
+import { Button } from '../../../common/button';
+import { ExampleGraph } from '../data/examples';
+
+interface ExampleGalleryProps {
+  examples: ExampleGraph[];
+  onLoadExample: (example: ExampleGraph) => void;
+}
+
+const ExampleGallery: React.FC<ExampleGalleryProps> = ({ examples, onLoadExample }) => {
+  return (
+    <div className="mt-6 pt-4 border-t border-gray-200">
+      <h3 className="text-lg font-semibold text-gray-900 mb-1">Example Graphs</h3>
+      <p className="text-sm text-gray-600 mb-4">
+        Load pre-built examples to explore the graph builder
+      </p>
+
+      {examples.map((example) => (
+        <div
+          key={example.id}
+          className="mb-4 border border-gray-200 rounded-lg hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 ease-in-out"
+        >
+          <div className="p-4 pb-2">
+            <h4 className="text-base font-medium text-gray-900 mb-2">{example.title}</h4>
+            <p className="text-sm text-gray-600 mb-3">{example.description}</p>
+            <div className="flex gap-2 mb-2">
+              <span className="inline-flex items-center px-2 py-1 rounded text-xs border border-gray-300 bg-gray-50 text-gray-700">
+                {example.nodes.length} nodes
+              </span>
+              <span className="inline-flex items-center px-2 py-1 rounded text-xs border border-gray-300 bg-gray-50 text-gray-700">
+                {example.edges.length} edges
+              </span>
+            </div>
+          </div>
+          <div className="px-4 pb-4 pt-0 flex gap-2">
+            <Button onClick={() => onLoadExample(example)} className="text-xs cursor-pointer">
+              <PlayIcon className="w-3 h-3 mr-1" />
+              Load Example
+            </Button>
+          </div>
+        </div>
+      ))}
+
+      {examples.length === 0 && (
+        <p className="text-sm text-gray-500 italic">No examples available yet.</p>
+      )}
+    </div>
+  );
+};
+
+export default ExampleGallery;
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
new file mode 100644
index 000000000..9d94afecc
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
@@ -0,0 +1,1307 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Controls,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  NodeTypes,
+  EdgeTypes,
+  ReactFlowInstance,
+  MarkerType
+} from '@xyflow/react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Button } from '../../../common/button';
+import {
+  PlusIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ClipboardDocumentIcon,
+  QuestionMarkCircleIcon,
+  TrashIcon
+} from '@heroicons/react/24/outline';
+
+import '@xyflow/react/dist/style.css';
+import CustomNode from './CustomNode';
+import CustomEdge from './CustomEdge';
+import ExampleGallery from './ExampleGallery';
+import ConfirmLoadExampleDialog from './ConfirmLoadExampleDialog';
+import { GraphExporter, BurrGraphJSON } from '../utils/GraphExporter';
+import { BurrGraphCodeGenerator } from '../utils/BurrCodeGenerator';
+import { ExampleLoader } from '../utils/ExampleLoader';
+import { examples } from '../data/examples';
+import type { ExampleGraph } from '../data/examples';
+
+const nodeTypes: NodeTypes = {
+  custom: CustomNode as NodeTypes['custom']
+};
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge as EdgeTypes['custom']
+};
+
+const defaultEdgeOptions = {
+  type: 'custom',
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 15,
+    height: 15,
+    color: '#429dbce6'
+  }
+};
+
+const STORAGE_KEY = 'burr-graph-builder-state';
+
+const nodeTemplates = [
+  { type: 'action', label: 'Action' },
+  { type: 'input', label: 'Input' }
+];
+
+interface NodeDialogData {
+  label: string;
+  description: string;
+  nodeType: string;
+  icon: string;
+}
+
+/**
+ * Visual graph builder for Burr applications.
+ *
+ * Accepts an optional initialGraph to pre-populate the canvas - this enables
+ * future flows like loading from the tracking API or from Pyodide-based
+ * Python AST parsing.
+ */
+interface GraphBuilderProps {
+  initialGraph?: BurrGraphJSON;
+}
+
+const GraphBuilder: React.FC<GraphBuilderProps> = ({ initialGraph }) => {
+  const nodeIdCounter = useRef(0);
+  const [leftOpen, setLeftOpen] = useState(true);
+  const [rightOpen, setRightOpen] = useState(true);
+  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance | null>(null);
+  const [nodeDialog, setNodeDialog] = useState(false);
+  const [selectedEdge, setSelectedEdge] = useState<string | null>(null);
+  const [selectedNode, setSelectedNode] = useState<string | null>(null);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [colorPickerAnchor, setColorPickerAnchor] = useState<HTMLElement | null>(null);
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+  const [selectedExample, setSelectedExample] = useState<ExampleGraph | null>(null);
+  const [nodeDialogData, setNodeDialogData] = useState<NodeDialogData>({
+    label: '',
+    description: '',
+    nodeType: 'action',
+    icon: 'settings'
+  });
+  const [tabIndex, setTabIndex] = useState(0);
+  const [copied, setCopied] = useState<'python' | 'json' | null>(null);
+  const [showExamplePicker, setShowExamplePicker] = useState(false);
+
+  const edgeColors = [
+    '#429dbce6',
+    '#ef4444',
+    '#10b981',
+    '#f59e0b',
+    '#8b5cf6',
+    '#ec4899',
+    '#6b7280'
+  ];
+
+  const handleDeleteNode = useCallback(
+    (nodeId: string) => {
+      setNodes((nds) => nds.filter((node) => node.id !== nodeId));
+      setEdges((eds) => eds.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
+      setSelectedNode(null);
+    },
+    [setNodes, setEdges]
+  );
+
+  const handleLabelChange = useCallback(
+    (nodeId: string, newLabel: string) => {
+      setNodes((nds) =>
+        nds.map((node) =>
+          node.id === nodeId ? { ...node, data: { ...node.data, label: newLabel } } : node
+        )
+      );
+    },
+    [setNodes]
+  );
+
+  const handleToggleProperty = useCallback(
+    (nodeId: string, property: 'isAsync' | 'isStreaming') => {
+      setNodes((nds) =>
+        nds.map((node) =>
+          node.id === nodeId
+            ? { ...node, data: { ...node.data, [property]: !node.data[property] } }
+            : node
+        )
+      );
+    },
+    [setNodes]
+  );
+
+  const handleEdgeLabelChange = useCallback(
+    (edgeId: string, newLabel: string) => {
+      setEdges((eds) =>
+        eds.map((edge) =>
+          edge.id === edgeId
+            ? { ...edge, data: { ...edge.data, label: newLabel, condition: newLabel } }
+            : edge
+        )
+      );
+    },
+    [setEdges]
+  );
+
+  // Shared helper: convert BurrGraphJSON into ReactFlow nodes/edges and load them
+  const loadGraphIntoCanvas = useCallback(
+    (graphJson: BurrGraphJSON) => {
+      const newNodes: Node[] = graphJson.nodes.map((n, i) => ({
+        id: n.id,
+        type: 'custom',
+        position: n.position,
+        data: {
+          label: n.label,
+          description: n.description || '',
+          nodeType: n.nodeType,
+          isAsync: n.isAsync || false,
+          isStreaming: n.isStreaming || false,
+          icon: 'settings',
+          colorIndex: i % 10,
+          onDelete: handleDeleteNode,
+          onLabelChange: handleLabelChange,
+          onToggleProperty: handleToggleProperty
+        }
+      }));
+
+      const newEdges: Edge[] = graphJson.edges.map((e) => ({
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        type: 'custom',
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 15,
+          height: 15,
+          color: '#429dbce6'
+        },
+        data: {
+          condition: e.condition,
+          isConditional: e.isConditional,
+          label: e.condition,
+          onLabelChange: handleEdgeLabelChange
+        }
+      }));
+
+      // Update nodeIdCounter to be higher than any existing node's numeric suffix
+      const maxId = graphJson.nodes.reduce((max, n) => {
+        const match = n.id.match(/(\d+)$/);
+        return match ? Math.max(max, parseInt(match[1], 10)) : max;
+      }, 0);
+      nodeIdCounter.current = Math.max(nodeIdCounter.current, maxId);
+
+      setNodes(newNodes);
+      setEdges(newEdges);
+    },
+    [
+      handleDeleteNode,
+      handleLabelChange,
+      handleToggleProperty,
+      handleEdgeLabelChange,
+      setNodes,
+      setEdges
+    ]
+  );
+
+  // Load initialGraph prop if provided, otherwise restore from localStorage
+  useEffect(() => {
+    if (initialGraph) {
+      loadGraphIntoCanvas(initialGraph);
+      return;
+    }
+
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved) as BurrGraphJSON;
+        if (parsed.nodes && parsed.nodes.length > 0) {
+          loadGraphIntoCanvas(parsed);
+        }
+      }
+    } catch {
+      // Corrupted data — ignore and start fresh
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onPaneClick = useCallback(
+    (event: React.MouseEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        const isRightClick = event.button === 2 || event.type === 'contextmenu';
+        const nodeType = isRightClick ? 'input' : 'action';
+        const nodeLabel = isRightClick ? `Input ${nodes.length + 1}` : `Node ${nodes.length + 1}`;
+
+        let position;
+        if (reactFlowInstance) {
+          position = reactFlowInstance.screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+        } else {
+          const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+          position = {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+          };
+        }
+
+        const newNode: Node = {
+          id: `node_${++nodeIdCounter.current}`,
+          type: 'custom',
+          position,
+          data: {
+            label: nodeLabel,
+            description: '',
+            nodeType: nodeType,
+            isAsync: false,
+            isStreaming: false,
+            icon: 'settings',
+            colorIndex: nodes.length % 10,
+            onDelete: handleDeleteNode,
+            onLabelChange: handleLabelChange,
+            onToggleProperty: handleToggleProperty
+          }
+        };
+
+        setNodes((nds) => [...nds, newNode]);
+
+        if (isRightClick) {
+          event.preventDefault();
+        }
+      }
+    },
+    [
+      nodes.length,
+      setNodes,
+      handleDeleteNode,
+      handleLabelChange,
+      handleToggleProperty,
+      reactFlowInstance
+    ]
+  );
+
+  const onPaneContextMenu = useCallback(
+    (event: React.MouseEvent | MouseEvent) => {
+      const reactEvent = event as React.MouseEvent;
+      if (reactEvent.metaKey || reactEvent.ctrlKey) {
+        onPaneClick(reactEvent);
+      }
+    },
+    [onPaneClick]
+  );
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      const isInputFocused =
+        target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+
+      if ((event.key === 'Backspace' || event.key === 'Delete') && !isInputFocused) {
+        if (selectedNode) {
+          setNodes((nds) => nds.filter((node) => node.id !== selectedNode));
+          setEdges((eds) =>
+            eds.filter((edge) => edge.source !== selectedNode && edge.target !== selectedNode)
+          );
+          setSelectedNode(null);
+        } else if (selectedEdge) {
+          setEdges((eds) => {
+            const filteredEdges = eds.filter((edge) => edge.id !== selectedEdge);
+
+            const deletedEdge = eds.find((edge) => edge.id === selectedEdge);
+            if (deletedEdge) {
+              const sourceEdges = filteredEdges.filter(
+                (edge) => edge.source === deletedEdge.source
+              );
+              const shouldBeConditional = sourceEdges.length > 1;
+
+              return filteredEdges.map((edge) => {
+                if (edge.source === deletedEdge.source) {
+                  const preservedLabel = shouldBeConditional
+                    ? deletedEdge.data?.label || edge.data?.label || 'condition'
+                    : undefined;
+                  return {
+                    ...edge,
+                    data: {
+                      ...edge.data,
+                      isConditional: shouldBeConditional,
+                      label: preservedLabel,
+                      onLabelChange: handleEdgeLabelChange
+                    }
+                  };
+                }
+                return edge;
+              });
+            }
+
+            return filteredEdges;
+          });
+          setSelectedEdge(null);
+        }
+      }
+    },
+    [selectedNode, selectedEdge, setNodes, setEdges, handleEdgeLabelChange]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [onKeyDown]);
+
+  const onConnect = useCallback(
+    (params: Connection) => {
+      const sourceEdges = edges.filter((edge) => edge.source === params.source);
+      const willBeConditional = sourceEdges.length > 0;
+
+      const targetNode = nodes.find((node) => node.id === params.target);
+      const targetLabel = targetNode?.data?.label || params.target;
+      const conditionString = `condition="${targetLabel}"`;
+
+      const newEdge = {
+        ...params,
+        type: 'custom',
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 15,
+          height: 15,
+          color: '#429dbce6'
+        },
+        data: {
+          condition: willBeConditional ? conditionString : undefined,
+          isConditional: willBeConditional,
+          label: willBeConditional ? conditionString : undefined,
+          onLabelChange: handleEdgeLabelChange
+        }
+      };
+
+      setEdges((eds) => addEdge(newEdge, eds));
+    },
+    [setEdges, edges, nodes, handleEdgeLabelChange]
+  );
+
+  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
+    setSelectedNode(node.id);
+    setSelectedEdge(null);
+    setColorPickerOpen(false);
+    setColorPickerAnchor(null);
+  }, []);
+
+  const onEdgeClick = useCallback((_event: React.MouseEvent, edge: Edge) => {
+    setSelectedEdge(edge.id);
+    setSelectedNode(null);
+    setColorPickerAnchor(_event.currentTarget as HTMLElement);
+    setColorPickerOpen(true);
+  }, []);
+
+  const handleEdgeColorChange = useCallback(
+    (color: string) => {
+      if (selectedEdge) {
+        setEdges((eds) =>
+          eds.map((edge) =>
+            edge.id === selectedEdge ? { ...edge, style: { ...edge.style, stroke: color } } : edge
+          )
+        );
+      }
+      setColorPickerOpen(false);
+      setColorPickerAnchor(null);
+    },
+    [selectedEdge, setEdges]
+  );
+
+  const handleToggleConditional = useCallback(() => {
+    if (!selectedEdge) return;
+    setEdges((eds) => {
+      const targetEdge = eds.find((e) => e.id === selectedEdge);
+      if (!targetEdge) return eds;
+      const source = targetEdge.source;
+      const target = targetEdge.target;
+      const groupEdges = eds.filter((e) => e.source === source);
+      const toggledIsConditional = !targetEdge.data?.isConditional;
+
+      const targetNode = nodes.find((node) => node.id === target);
+      const targetLabel = targetNode?.data?.label || target;
+      const conditionString = `condition="${targetLabel}"`;
+
+      return eds.map((edge) => {
+        if (edge.id === selectedEdge) {
+          return {
+            ...edge,
+            data: {
+              ...edge.data,
+              isConditional: toggledIsConditional,
+              condition: toggledIsConditional ? conditionString : undefined,
+              label: toggledIsConditional ? conditionString : undefined
+            }
+          };
+        }
+        if (edge.source === source && edge.id !== selectedEdge) {
+          if (!toggledIsConditional) {
+            const stillConditional =
+              groupEdges.filter((e) => e.id !== selectedEdge && e.data?.isConditional).length > 1;
+            return {
+              ...edge,
+              data: {
+                ...edge.data,
+                isConditional: stillConditional
+              }
+            };
+          }
+        }
+        return edge;
+      });
+    });
+    setColorPickerOpen(false);
+    setColorPickerAnchor(null);
+  }, [selectedEdge, setEdges, nodes]);
+
+  const handleAddNode = useCallback(() => {
+    setNodeDialog(true);
+  }, []);
+
+  const [confirmClearOpen, setConfirmClearOpen] = useState(false);
+  const handleClearCanvas = useCallback(() => {
+    setNodes([]);
+    setEdges([]);
+    setSelectedNode(null);
+    setSelectedEdge(null);
+    nodeIdCounter.current = 0;
+    setConfirmClearOpen(false);
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      // ignore
+    }
+  }, [setNodes, setEdges]);
+
+  const handleCreateNode = useCallback(() => {
+    const newNode: Node = {
+      id: `node_${++nodeIdCounter.current}`,
+      type: 'custom',
+      position: { x: Math.random() * 500 + 100, y: Math.random() * 500 + 100 },
+      data: {
+        label: nodeDialogData.label,
+        description: nodeDialogData.description,
+        nodeType: nodeDialogData.nodeType,
+        isAsync: false,
+        isStreaming: false,
+        icon: nodeDialogData.icon,
+        colorIndex: nodes.length % 10,
+        onDelete: handleDeleteNode,
+        onLabelChange: handleLabelChange,
+        onToggleProperty: handleToggleProperty
+      }
+    };
+
+    setNodes((nds) => [...nds, newNode]);
+    setNodeDialog(false);
+    setNodeDialogData({
+      label: '',
+      description: '',
+      nodeType: 'action',
+      icon: 'settings'
+    });
+  }, [
+    nodeDialogData,
+    setNodes,
+    nodes.length,
+    handleDeleteNode,
+    handleLabelChange,
+    handleToggleProperty
+  ]);
+
+  const graphData = useMemo(() => GraphExporter.exportToJSON(nodes, edges), [nodes, edges]);
+  const pythonCode = useMemo(
+    () => BurrGraphCodeGenerator.generatePythonCode(graphData),
+    [graphData]
+  );
+  const jsonCode = useMemo(() => JSON.stringify(graphData, null, 2), [graphData]);
+
+  // Auto-save graph to localStorage (debounced to avoid writing on every drag frame)
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+    }
+    saveTimerRef.current = setTimeout(() => {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(graphData));
+      } catch {
+        // Storage full or unavailable — silently skip
+      }
+    }, 500);
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+      }
+    };
+  }, [graphData]);
+
+  const hasExistingContent = nodes.length > 0 || edges.length > 0;
+
+  const handleLoadExample = useCallback((example: ExampleGraph) => {
+    setSelectedExample(example);
+    setConfirmDialogOpen(true);
+  }, []);
+
+  const handleConfirmLoadExample = useCallback(() => {
+    if (!selectedExample) return;
+
+    const errors = ExampleLoader.validateExample(selectedExample);
+    if (errors.length > 0) {
+      console.error('Example validation failed:', errors);
+      return;
+    }
+
+    const { nodes: newNodes, edges: newEdges } = ExampleLoader.convertToReactFlow(selectedExample);
+
+    const nodesWithHandlers = newNodes.map((node) => ({
+      ...node,
+      data: {
+        ...node.data,
+        onDelete: handleDeleteNode,
+        onLabelChange: handleLabelChange,
+        onToggleProperty: handleToggleProperty
+      }
+    }));
+
+    const edgesWithHandlers = newEdges.map((edge) => ({
+      ...edge,
+      data: {
+        ...edge.data,
+        onLabelChange: handleEdgeLabelChange
+      }
+    }));
+
+    setNodes(nodesWithHandlers);
+    setEdges(edgesWithHandlers);
+    setConfirmDialogOpen(false);
+    setSelectedExample(null);
+
+    setTimeout(() => {
+      if (reactFlowInstance) {
+        reactFlowInstance.fitView({ padding: 0.1 });
+      }
+    }, 100);
+  }, [
+    selectedExample,
+    handleDeleteNode,
+    handleLabelChange,
+    handleToggleProperty,
+    handleEdgeLabelChange,
+    setNodes,
+    setEdges,
+    reactFlowInstance
+  ]);
+
+  const handleCancelLoadExample = useCallback(() => {
+    setConfirmDialogOpen(false);
+    setSelectedExample(null);
+  }, []);
+
+  return (
+    <div className="flex h-full overflow-hidden border-t">
+      {/* Left sidebar with help & instructions */}
+      <div
+        className={`${leftOpen ? 'w-72' : 'w-12'} flex-shrink-0 bg-white border-r border-gray-200 transition-all duration-200 overflow-hidden`}
+      >
+        <div className="flex flex-col h-full">
+          {leftOpen ? (
+            <div className="flex-1 overflow-auto p-4">
+              {/* Intro */}
+              <div className="mb-5">
+                <h3 className="text-lg font-semibold mb-1">Graph Builder</h3>
+                <p className="text-sm text-gray-500">
+                  Visually design Burr application graphs, then export as Python code or JSON.
+                </p>
+              </div>
+
+              {/* Quick Start */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Quick Start
+                </h4>
+                <ol className="text-sm text-gray-600 space-y-2 list-decimal list-inside">
+                  <li>Add action nodes to the canvas</li>
+                  <li>Connect them by dragging between handles</li>
+                  <li>
+                    Switch to the <span className="font-medium">Python</span> tab to see generated
+                    code
+                  </li>
+                </ol>
+              </div>
+
+              {/* Creating */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Creating
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <kbd className="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 border border-gray-300 text-xs font-mono text-gray-700">
+                        {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Click
+                      </kbd>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      Add an action node at that position
+                    </span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <kbd className="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 border border-gray-300 text-xs font-mono text-gray-700">
+                        {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Right-click
+                      </kbd>
+                    </div>
+                    <span className="text-sm text-gray-600">Add an input node</span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <kbd className="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 border border-gray-300 text-xs font-mono text-gray-700">
+                        Drag
+                      </kbd>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      From bottom handle to top handle to create an edge (transition)
+                    </span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <kbd className="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 border border-gray-300 text-xs font-mono text-gray-700">
+                        +
+                      </kbd>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      Use the button at the bottom-right to add a node via dialog
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Editing */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Editing
+                </h4>
+                <div className="space-y-3">
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <span className="text-sm text-gray-500">Click label</span>
+                    </div>
+                    <span className="text-sm text-gray-600">Edit a node&apos;s name inline</span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <span className="text-sm text-gray-500">Click edge label</span>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      Edit a conditional edge&apos;s condition text
+                    </span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <span className="text-sm text-gray-500">Select node</span>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      Toggle action/streaming type via the badge in the top-right corner
+                    </span>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <div className="flex-shrink-0 mt-0.5">
+                      <span className="text-sm text-gray-500">Click edge</span>
+                    </div>
+                    <span className="text-sm text-gray-600">
+                      Pick a color or toggle conditional/default
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Deleting */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Deleting
+                </h4>
+                <div className="flex items-start gap-2">
+                  <div className="flex-shrink-0 mt-0.5">
+                    <kbd className="inline-flex items-center px-1.5 py-0.5 rounded bg-gray-100 border border-gray-300 text-xs font-mono text-gray-700">
+                      {navigator.platform?.includes('Mac') ? '\u232b' : 'Backspace'}
+                    </kbd>
+                  </div>
+                  <span className="text-sm text-gray-600">Delete the selected node or edge</span>
+                </div>
+              </div>
+
+              {/* Concepts */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Node Types
+                </h4>
+                <div className="space-y-2">
+                  <div className="flex items-start gap-2">
+                    <span className="inline-block w-3 h-3 rounded bg-blue-200 border border-blue-400 flex-shrink-0 mt-1" />
+                    <div>
+                      <span className="text-sm font-medium text-gray-700">Action</span>
+                      <p className="text-xs text-gray-500">
+                        A step decorated with{' '}
+                        <code className="bg-gray-100 px-1 rounded">@action</code>
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="inline-block w-3 h-3 rounded border-2 border-dashed border-gray-400 flex-shrink-0 mt-1 w-3 h-3" />
+                    <div>
+                      <span className="text-sm font-medium text-gray-700">Input</span>
+                      <p className="text-xs text-gray-500">
+                        External input passed into an action at runtime
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Node Flags */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Action Flags
+                </h4>
+                <p className="text-xs text-gray-500 mb-2">
+                  Select a node to toggle these independently:
+                </p>
+                <div className="space-y-2">
+                  <div className="flex items-start gap-2">
+                    <span className="inline-flex px-1.5 py-0.5 rounded bg-blue-500 text-white text-[10px] font-semibold flex-shrink-0 mt-0.5">
+                      async
+                    </span>
+                    <p className="text-xs text-gray-500">
+                      Makes the function <code className="bg-gray-100 px-1 rounded">async def</code>
+                    </p>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="inline-flex px-1.5 py-0.5 rounded bg-blue-500 text-white text-[10px] font-semibold flex-shrink-0 mt-0.5">
+                      stream
+                    </span>
+                    <p className="text-xs text-gray-500">
+                      Uses <code className="bg-gray-100 px-1 rounded">@streaming_action</code> and
+                      yields results
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Edge Types */}
+              <div className="mb-5">
+                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+                  Edge Types
+                </h4>
+                <div className="space-y-2">
+                  <div className="flex items-start gap-2">
+                    <span className="inline-block w-6 border-t-2 border-blue-400 flex-shrink-0 mt-2" />
+                    <div>
+                      <span className="text-sm font-medium text-gray-700">Default</span>
+                      <p className="text-xs text-gray-500">
+                        Unconditional transition (uses{' '}
+                        <code className="bg-gray-100 px-1 rounded">default</code>)
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-2">
+                    <span className="inline-block w-6 border-t-2 border-dashed border-blue-400 flex-shrink-0 mt-2" />
+                    <div>
+                      <span className="text-sm font-medium text-gray-700">Conditional</span>
+                      <p className="text-xs text-gray-500">
+                        Guarded transition (uses{' '}
+                        <code className="bg-gray-100 px-1 rounded">when()</code>). Created
+                        automatically when a node has multiple outgoing edges.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-start justify-center pt-4">
+              <QuestionMarkCircleIcon className="w-5 h-5 text-gray-400" />
+            </div>
+          )}
+          <div className={`flex items-center ${leftOpen ? 'justify-start' : 'justify-center'} p-2`}>
+            <button
+              onClick={() => setLeftOpen(!leftOpen)}
+              className="p-1 rounded hover:bg-gray-100"
+              title={leftOpen ? 'Collapse help panel' : 'Expand help panel'}
+            >
+              {leftOpen ? (
+                <ChevronLeftIcon className="w-5 h-5 text-gray-400" />
+              ) : (
+                <ChevronRightIcon className="w-5 h-5 text-gray-400" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="flex flex-col flex-1 min-w-0">
+        {/* Tab navigation */}
+        <div className="border-b border-gray-200 flex-shrink-0">
+          <nav className="flex space-x-8 px-4">
+            {[
+              { label: 'Canvas', title: 'Visual graph editor' },
+              { label: 'Python', title: 'Generated Burr Python code' },
+              { label: 'JSON', title: 'Graph data as JSON (importable)' }
+            ].map((tab, idx) => (
+              <button
+                key={tab.label}
+                onClick={() => setTabIndex(idx)}
+                title={tab.title}
+                className={`py-2 px-1 border-b-2 font-medium text-sm ${
+                  tabIndex === idx
+                    ? 'border-blue-500 text-blue-600'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Tab content */}
+        <div className="flex-1 min-h-0 relative">
+          {tabIndex === 0 && (
+            <div className="h-full w-full relative">
+              <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                onNodeClick={onNodeClick}
+                onEdgeClick={onEdgeClick}
+                onPaneClick={onPaneClick}
+                onPaneContextMenu={onPaneContextMenu}
+                onInit={setReactFlowInstance}
+                nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
+                defaultEdgeOptions={defaultEdgeOptions}
+                defaultViewport={{ x: 0, y: 0, zoom: 1.0 }}
+                attributionPosition="bottom-left"
+                deleteKeyCode={null}
+                style={{ width: '100%', height: '100%' }}
+              >
+                <Controls />
+                <MiniMap />
+                <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+              </ReactFlow>
+
+              {/* Empty state overlay */}
+              {nodes.length === 0 && (
+                <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
+                  <div className="bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 p-8 max-w-md text-center pointer-events-auto">
+                    <h3 className="text-xl font-semibold text-gray-800 mb-2">
+                      Design your Burr graph
+                    </h3>
+                    <p className="text-sm text-gray-500 mb-6">
+                      Build application graphs visually and export as Python code.
+                    </p>
+
+                    <div className="text-left space-y-3 mb-6">
+                      <div className="flex items-center gap-3 bg-gray-50 rounded-lg px-4 py-2.5">
+                        <kbd className="inline-flex items-center px-2 py-1 rounded bg-white border border-gray-300 text-xs font-mono text-gray-700 shadow-sm flex-shrink-0">
+                          {navigator.platform?.includes('Mac') ? '\u2318' : 'Ctrl'}+Click
+                        </kbd>
+                        <span className="text-sm text-gray-600">Add an action node</span>
+                      </div>
+                      <div className="flex items-center gap-3 bg-gray-50 rounded-lg px-4 py-2.5">
+                        <kbd className="inline-flex items-center px-2 py-1 rounded bg-white border border-gray-300 text-xs font-mono text-gray-700 shadow-sm flex-shrink-0">
+                          Drag handle
+                        </kbd>
+                        <span className="text-sm text-gray-600">Connect nodes with edges</span>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-3 justify-center">
+                      <button
+                        className="inline-flex items-center px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors"
+                        onClick={handleAddNode}
+                      >
+                        <PlusIcon className="w-4 h-4 mr-1.5" />
+                        Add First Node
+                      </button>
+                      <button
+                        className="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors"
+                        onClick={() => setShowExamplePicker(true)}
+                      >
+                        Load Example
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              <div className="absolute bottom-4 right-4 flex gap-2">
+                {hasExistingContent && (
+                  <button
+                    className="bg-white hover:bg-red-50 text-red-500 border border-red-200 rounded-full w-14 h-14 flex items-center justify-center shadow-lg transition-colors"
+                    onClick={() => setConfirmClearOpen(true)}
+                    title="Clear canvas"
+                    aria-label="Clear canvas"
+                  >
+                    <TrashIcon className="w-6 h-6" />
+                  </button>
+                )}
+                <button
+                  className="bg-blue-500 hover:bg-blue-600 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg transition-colors"
+                  onClick={handleAddNode}
+                  title="Add a new node via dialog"
+                  aria-label="Add a new node"
+                >
+                  <PlusIcon className="w-6 h-6" />
+                </button>
+              </div>
+            </div>
+          )}
+          {tabIndex === 1 && (
+            <div className="h-full flex flex-col bg-gray-900 relative">
+              <div className="absolute top-2 right-5 z-10 bg-white bg-opacity-85 rounded">
+                <button
+                  className={`p-2 rounded ${
+                    copied === 'python' ? 'text-green-600' : 'text-blue-600'
+                  } hover:bg-gray-100`}
+                  onClick={() => {
+                    navigator.clipboard
+                      .writeText(pythonCode)
+                      .then(() => {
+                        setCopied('python');
+                        setTimeout(() => setCopied(null), 1200);
+                      })
+                      .catch(() => {
+                        /* clipboard not available */
+                      });
+                  }}
+                  title={copied === 'python' ? 'Copied!' : 'Copy Python code to clipboard'}
+                  aria-label="Copy Python code"
+                >
+                  <ClipboardDocumentIcon className="w-5 h-5" />
+                </button>
+              </div>
+              <div className="flex-1 overflow-auto">
+                <SyntaxHighlighter
+                  language="python"
+                  style={vscDarkPlus}
+                  customStyle={{
+                    margin: 0,
+                    padding: 16,
+                    fontSize: 14,
+                    borderRadius: 0,
+                    minHeight: '100%'
+                  }}
+                >
+                  {pythonCode}
+                </SyntaxHighlighter>
+              </div>
+            </div>
+          )}
+          {tabIndex === 2 && (
+            <div className="h-full flex flex-col bg-gray-900 relative">
+              <div className="absolute top-2 right-5 z-10 bg-white bg-opacity-85 rounded">
+                <button
+                  className={`p-2 rounded ${
+                    copied === 'json' ? 'text-green-600' : 'text-blue-600'
+                  } hover:bg-gray-100`}
+                  onClick={() => {
+                    navigator.clipboard
+                      .writeText(jsonCode)
+                      .then(() => {
+                        setCopied('json');
+                        setTimeout(() => setCopied(null), 1200);
+                      })
+                      .catch(() => {
+                        /* clipboard not available */
+                      });
+                  }}
+                  title={copied === 'json' ? 'Copied!' : 'Copy JSON to clipboard'}
+                  aria-label="Copy JSON code"
+                >
+                  <ClipboardDocumentIcon className="w-5 h-5" />
+                </button>
+              </div>
+              <div className="flex-1 overflow-auto">
+                <SyntaxHighlighter
+                  language="json"
+                  style={vscDarkPlus}
+                  customStyle={{
+                    margin: 0,
+                    padding: 16,
+                    fontSize: 14,
+                    borderRadius: 0,
+                    minHeight: '100%'
+                  }}
+                >
+                  {jsonCode}
+                </SyntaxHighlighter>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Right panel: ExampleGallery */}
+      <div
+        className={`${rightOpen ? 'w-72' : 'w-12'} flex-shrink-0 bg-white shadow-lg z-10 transition-all duration-200`}
+      >
+        <div className="flex flex-col h-full">
+          {rightOpen ? (
+            <div className="flex-1 overflow-y-auto p-4">
+              <ExampleGallery examples={examples} onLoadExample={handleLoadExample} />
+            </div>
+          ) : (
+            <div className="flex-1" />
+          )}
+          <div
+            className={`flex items-center ${rightOpen ? 'justify-start' : 'justify-center'} p-2 border-t border-gray-200 bg-white flex-shrink-0`}
+          >
+            <button
+              onClick={() => setRightOpen(!rightOpen)}
+              className="p-1 rounded hover:bg-gray-100"
+              title={rightOpen ? 'Collapse examples panel' : 'Expand examples panel'}
+            >
+              {rightOpen ? (
+                <ChevronRightIcon className="w-5 h-5 text-gray-400" />
+              ) : (
+                <ChevronLeftIcon className="w-5 h-5 text-gray-400" />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Add Node Dialog */}
+      {nodeDialog && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+          onClick={() => setNodeDialog(false)}
+        >
+          <div
+            className="bg-white rounded-lg p-6 w-full max-w-md"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-lg font-semibold mb-4">Add New Node</h2>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Node Label</label>
+                <input
+                  type="text"
+                  value={nodeDialogData.label}
+                  onChange={(e) => setNodeDialogData({ ...nodeDialogData, label: e.target.value })}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                <textarea
+                  value={nodeDialogData.description}
+                  onChange={(e) =>
+                    setNodeDialogData({ ...nodeDialogData, description: e.target.value })
+                  }
+                  rows={3}
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Node Type</label>
+                <select
+                  value={nodeDialogData.nodeType}
+                  onChange={(e) =>
+                    setNodeDialogData({ ...nodeDialogData, nodeType: e.target.value })
+                  }
+                  className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                >
+                  {nodeTemplates.map((template) => (
+                    <option key={template.type} value={template.type}>
+                      {template.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <div className="flex justify-end space-x-2 mt-6">
+              <Button onClick={() => setNodeDialog(false)} outline>
+                Cancel
+              </Button>
+              <Button onClick={handleCreateNode}>Create Node</Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Color Picker Popover for Edges */}
+      {colorPickerOpen && colorPickerAnchor && (
+        <div
+          className="fixed z-50 bg-white rounded-lg shadow-lg border border-gray-200 p-4"
+          style={{
+            top: colorPickerAnchor.getBoundingClientRect().bottom + 8,
+            left: colorPickerAnchor.getBoundingClientRect().left
+          }}
+        >
+          <h3 className="text-sm font-medium mb-3">Select Edge Color</h3>
+          <div className="grid grid-cols-4 gap-2">
+            {edgeColors.map((color) => (
+              <button
+                key={color}
+                className="w-8 h-8 rounded border-2 border-transparent hover:border-black transition-colors"
+                style={{ backgroundColor: color }}
+                onClick={() => handleEdgeColorChange(color)}
+              />
+            ))}
+          </div>
+          {(() => {
+            if (!selectedEdge) return null;
+            const selected = edges.find((e) => e.id === selectedEdge);
+            if (!selected) return null;
+            const groupEdges = edges.filter((e) => e.source === selected.source);
+            if (groupEdges.length > 1) {
+              return (
+                <div className="mt-4">
+                  {selected.data?.isConditional ? (
+                    <Button className="w-full" color="blue" onClick={handleToggleConditional}>
+                      Make Default
+                    </Button>
+                  ) : (
+                    <Button className="w-full" outline onClick={handleToggleConditional}>
+                      Make Conditional
+                    </Button>
+                  )}
+                </div>
+              );
+            }
+            return null;
+          })()}
+        </div>
+      )}
+
+      {/* Example Picker Modal (from empty state) */}
+      {showExamplePicker && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+          onClick={() => setShowExamplePicker(false)}
+        >
+          <div
+            className="bg-white rounded-lg p-6 w-full max-w-lg max-h-[80vh] overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-lg font-semibold mb-1">Load an Example</h2>
+            <p className="text-sm text-gray-500 mb-4">
+              Pick a pre-built graph to explore the builder.
+            </p>
+            <div className="space-y-3">
+              {examples.map((example) => (
+                <button
+                  key={example.id}
+                  className="w-full text-left border border-gray-200 rounded-lg p-4 hover:shadow-md hover:border-blue-300 transition-all"
+                  onClick={() => {
+                    setShowExamplePicker(false);
+                    handleLoadExample(example);
+                  }}
+                >
+                  <h4 className="font-medium text-gray-900">{example.title}</h4>
+                  <p className="text-sm text-gray-600 mt-1">{example.description}</p>
+                  <div className="flex gap-2 mt-2">
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs border border-gray-300 bg-gray-50 text-gray-600">
+                      {example.nodes.length} nodes
+                    </span>
+                    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs border border-gray-300 bg-gray-50 text-gray-600">
+                      {example.edges.length} edges
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="mt-4 flex justify-end">
+              <button
+                className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800"
+                onClick={() => setShowExamplePicker(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Confirm Clear Dialog */}
+      {confirmClearOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+          onClick={() => setConfirmClearOpen(false)}
+        >
+          <div
+            className="bg-white rounded-lg p-6 w-full max-w-sm"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-lg font-semibold mb-2">Clear canvas?</h2>
+            <p className="text-sm text-gray-600 mb-6">
+              This will remove all nodes and edges. This cannot be undone.
+            </p>
+            <div className="flex justify-end gap-2">
+              <Button outline onClick={() => setConfirmClearOpen(false)}>
+                Cancel
+              </Button>
+              <Button color="red" onClick={handleClearCanvas}>
+                Clear
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Confirm Load Example Dialog */}
+      <ConfirmLoadExampleDialog
+        open={confirmDialogOpen}
+        onClose={handleCancelLoadExample}
+        onConfirm={handleConfirmLoadExample}
+        exampleTitle={selectedExample?.title || ''}
+        hasExistingContent={hasExistingContent}
+      />
+    </div>
+  );
+};
+
+export default GraphBuilder;
diff --git a/telemetry/ui/src/components/routes/graph-builder/data/examples.ts b/telemetry/ui/src/components/routes/graph-builder/data/examples.ts
new file mode 100644
index 000000000..528600dc9
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/data/examples.ts
@@ -0,0 +1,564 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface ExampleGraph {
+  id: string;
+  title: string;
+  description: string;
+  nodes: Array<{
+    id: string;
+    label: string;
+    nodeType: 'input' | 'action';
+    isAsync?: boolean;
+    isStreaming?: boolean;
+    position: { x: number; y: number };
+    description?: string;
+  }>;
+  edges: Array<{
+    id: string;
+    source: string;
+    target: string;
+    condition?: string;
+    isConditional: boolean;
+  }>;
+}
+
+export const multiModalChatbotWorkflow: ExampleGraph = {
+  id: 'multi-modal-chatbot',
+  title: 'MultiModal Chatbot',
+  description: 'A ChatGPT-like bot which supports multiple response modes, with regular actions.',
+  nodes: [
+    {
+      id: 'node_prompt',
+      label: 'prompt',
+      nodeType: 'action',
+      position: { x: 761, y: 91 }
+    },
+    {
+      id: 'node_check_openai_key',
+      label: 'check_openai_key',
+      nodeType: 'action',
+      position: { x: 591, y: 193 }
+    },
+    {
+      id: 'node_check_safety',
+      label: 'check_safety',
+      nodeType: 'action',
+      position: { x: 384, y: 342 }
+    },
+    {
+      id: 'node_decide_mode',
+      label: 'decide_mode',
+      nodeType: 'action',
+      position: { x: 245, y: 441 }
+    },
+    {
+      id: 'node_prompt_for_more',
+      label: 'prompt_for_more',
+      nodeType: 'action',
+      position: { x: 25, y: 640 }
+    },
+    {
+      id: 'node_generate_image',
+      label: 'generate_image',
+      nodeType: 'action',
+      position: { x: 237, y: 673 }
+    },
+    {
+      id: 'node_generate_code',
+      label: 'generate_code',
+      nodeType: 'action',
+      position: { x: 470, y: 747 }
+    },
+    {
+      id: 'node_answer_question',
+      label: 'answer_question',
+      nodeType: 'action',
+      position: { x: 1019, y: 724 }
+    },
+    {
+      id: 'node_response',
+      label: 'response',
+      nodeType: 'action',
+      position: { x: 883, y: 909 }
+    },
+    {
+      id: 'input_prompt',
+      label: 'input: prompt',
+      nodeType: 'input',
+      position: { x: 790, y: -29 }
+    },
+    {
+      id: 'input_model',
+      label: 'input: model',
+      nodeType: 'input',
+      position: { x: 884, y: 549 }
+    },
+    {
+      id: 'input_display_type',
+      label: 'input: display_type',
+      nodeType: 'input',
+      position: { x: 1086, y: 551 }
+    }
+  ],
+  edges: [
+    {
+      id: 'e-input_prompt-node_prompt',
+      source: 'input_prompt',
+      target: 'node_prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-node_prompt-node_check_openai_key',
+      source: 'node_prompt',
+      target: 'node_check_openai_key',
+      isConditional: false
+    },
+    {
+      id: 'e-node_check_openai_key-node_response',
+      source: 'node_check_openai_key',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_check_openai_key-node_check_safety',
+      source: 'node_check_openai_key',
+      target: 'node_check_safety',
+      condition: 'has_openai_key=True',
+      isConditional: true
+    },
+    {
+      id: 'e-node_check_safety-node_decide_mode',
+      source: 'node_check_safety',
+      target: 'node_decide_mode',
+      condition: 'safe=True',
+      isConditional: true
+    },
+    {
+      id: 'e-node_check_safety-node_response',
+      source: 'node_check_safety',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_decide_mode-node_prompt_for_more',
+      source: 'node_decide_mode',
+      target: 'node_prompt_for_more',
+      isConditional: false
+    },
+    {
+      id: 'e-node_decide_mode-node_generate_image',
+      source: 'node_decide_mode',
+      target: 'node_generate_image',
+      condition: 'mode="generate_image"',
+      isConditional: true
+    },
+    {
+      id: 'e-node_decide_mode-node_generate_code',
+      source: 'node_decide_mode',
+      target: 'node_generate_code',
+      condition: 'mode="generate_code"',
+      isConditional: true
+    },
+    {
+      id: 'e-node_decide_mode-node_answer_question',
+      source: 'node_decide_mode',
+      target: 'node_answer_question',
+      condition: 'mode="answer_question"',
+      isConditional: true
+    },
+    {
+      id: 'e-node_answer_question-node_response',
+      source: 'node_answer_question',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_generate_code-node_response',
+      source: 'node_generate_code',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_generate_image-node_response',
+      source: 'node_generate_image',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_prompt_for_more-node_response',
+      source: 'node_prompt_for_more',
+      target: 'node_response',
+      isConditional: false
+    },
+    {
+      id: 'e-node_response-node_prompt',
+      source: 'node_response',
+      target: 'node_prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-node_generate_code',
+      source: 'input_model',
+      target: 'node_generate_code',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-node_answer_question',
+      source: 'input_model',
+      target: 'node_answer_question',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-node_generate_image',
+      source: 'input_model',
+      target: 'node_generate_image',
+      isConditional: false
+    },
+    {
+      id: 'e-input_display_type-node_answer_question',
+      source: 'input_display_type',
+      target: 'node_answer_question',
+      isConditional: false
+    },
+    {
+      id: 'e-input_display_type-node_generate_code',
+      source: 'input_display_type',
+      target: 'node_generate_code',
+      isConditional: false
+    }
+  ]
+};
+
+export const streamingChatbotWorkflow: ExampleGraph = {
+  id: 'streaming-chatbot',
+  title: 'Streaming Chatbot',
+  description: 'A ChatGPT-like bot which supports multiple response modes, with streaming actions.',
+  nodes: [
+    {
+      id: 'input_prompt',
+      label: 'input: prompt',
+      nodeType: 'input',
+      position: { x: 500, y: 50 }
+    },
+    {
+      id: 'input_model',
+      label: 'input: model',
+      nodeType: 'input',
+      position: { x: 84, y: 436 }
+    },
+    {
+      id: 'prompt',
+      label: 'prompt',
+      nodeType: 'action',
+      position: { x: 500, y: 200 }
+    },
+    {
+      id: 'check_safety',
+      label: 'check_safety',
+      nodeType: 'action',
+      position: { x: 500, y: 350 }
+    },
+    {
+      id: 'decide_mode',
+      label: 'decide_mode',
+      nodeType: 'action',
+      position: { x: 400, y: 500 }
+    },
+    {
+      id: 'unsafe_response',
+      label: 'unsafe_response',
+      nodeType: 'action',
+      isAsync: true,
+      isStreaming: true,
+      position: { x: 761, y: 496 }
+    },
+    {
+      id: 'generate_code',
+      label: 'generate_code',
+      nodeType: 'action',
+      isAsync: true,
+      isStreaming: true,
+      position: { x: 90, y: 635 }
+    },
+    {
+      id: 'answer_question',
+      label: 'answer_question',
+      nodeType: 'action',
+      isAsync: true,
+      isStreaming: true,
+      position: { x: 299, y: 713 }
+    },
+    {
+      id: 'generate_poem',
+      label: 'generate_poem',
+      nodeType: 'action',
+      isAsync: true,
+      isStreaming: true,
+      position: { x: 565, y: 780 }
+    },
+    {
+      id: 'prompt_for_more',
+      label: 'prompt_for_more',
+      nodeType: 'action',
+      isAsync: true,
+      isStreaming: true,
+      position: { x: 730, y: 677 }
+    }
+  ],
+  edges: [
+    {
+      id: 'e-input_prompt-prompt',
+      source: 'input_prompt',
+      target: 'prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-generate_code',
+      source: 'input_model',
+      target: 'generate_code',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-answer_question',
+      source: 'input_model',
+      target: 'answer_question',
+      isConditional: false
+    },
+    {
+      id: 'e-input_model-generate_poem',
+      source: 'input_model',
+      target: 'generate_poem',
+      isConditional: false
+    },
+    {
+      id: 'e-prompt-check_safety',
+      source: 'prompt',
+      target: 'check_safety',
+      isConditional: false
+    },
+    {
+      id: 'e-check_safety-decide_mode',
+      source: 'check_safety',
+      target: 'decide_mode',
+      condition: 'safe=True',
+      isConditional: true
+    },
+    {
+      id: 'e-check_safety-unsafe_response',
+      source: 'check_safety',
+      target: 'unsafe_response',
+      isConditional: false
+    },
+    {
+      id: 'e-decide_mode-generate_code',
+      source: 'decide_mode',
+      target: 'generate_code',
+      condition: 'mode="generate_code"',
+      isConditional: true
+    },
+    {
+      id: 'e-decide_mode-answer_question',
+      source: 'decide_mode',
+      target: 'answer_question',
+      condition: 'mode="answer_question"',
+      isConditional: true
+    },
+    {
+      id: 'e-decide_mode-generate_poem',
+      source: 'decide_mode',
+      target: 'generate_poem',
+      condition: 'mode="generate_poem"',
+      isConditional: true
+    },
+    {
+      id: 'e-decide_mode-prompt_for_more',
+      source: 'decide_mode',
+      target: 'prompt_for_more',
+      isConditional: false
+    },
+    {
+      id: 'e-generate_code-prompt',
+      source: 'generate_code',
+      target: 'prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-answer_question-prompt',
+      source: 'answer_question',
+      target: 'prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-generate_poem-prompt',
+      source: 'generate_poem',
+      target: 'prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-unsafe_response-prompt',
+      source: 'unsafe_response',
+      target: 'prompt',
+      isConditional: false
+    },
+    {
+      id: 'e-prompt_for_more-prompt',
+      source: 'prompt_for_more',
+      target: 'prompt',
+      isConditional: false
+    }
+  ]
+};
+
+export const adaptiveCRAGWorkflow: ExampleGraph = {
+  id: 'adaptive-crag',
+  title: 'Adaptive CRAG',
+  description:
+    'A system that dynamically selects the most suitable route for a given user query and self-reflects on retrieved documents to improve response quality.',
+  nodes: [
+    {
+      id: 'node_router',
+      label: 'router',
+      nodeType: 'action',
+      position: { x: 821, y: 177 }
+    },
+    {
+      id: 'node_terminate',
+      label: 'terminate',
+      nodeType: 'action',
+      position: { x: 1115, y: 339 }
+    },
+    {
+      id: 'node_rewrite_query',
+      label: 'rewrite_query_for_lancedb',
+      nodeType: 'action',
+      position: { x: 570, y: 343 }
+    },
+    {
+      id: 'node_search_lancedb',
+      label: 'search_lancedb',
+      nodeType: 'action',
+      position: { x: 395, y: 474 }
+    },
+    {
+      id: 'node_remove_irrelevant',
+      label: 'remove_irrelevant_lancedb_results',
+      nodeType: 'action',
+      position: { x: 222, y: 598 }
+    },
+    {
+      id: 'node_extract_keywords',
+      label: 'extract_keywords_for_exa_search',
+      nodeType: 'action',
+      position: { x: 862, y: 755 }
+    },
+    {
+      id: 'node_search_exa',
+      label: 'search_exa',
+      nodeType: 'action',
+      position: { x: 1014, y: 900 }
+    },
+    {
+      id: 'node_ask_assistant',
+      label: 'ask_assistant',
+      nodeType: 'action',
+      position: { x: 664, y: 1050 }
+    },
+    {
+      id: 'input_query',
+      label: 'input: query',
+      nodeType: 'input',
+      position: { x: 822, y: 26 }
+    }
+  ],
+  edges: [
+    {
+      id: 'e-input_query-node_router',
+      source: 'input_query',
+      target: 'node_router',
+      isConditional: false
+    },
+    {
+      id: 'e-node_router-node_rewrite_query',
+      source: 'node_router',
+      target: 'node_rewrite_query',
+      isConditional: false
+    },
+    {
+      id: 'e-node_rewrite_query-node_search_lancedb',
+      source: 'node_rewrite_query',
+      target: 'node_search_lancedb',
+      isConditional: false
+    },
+    {
+      id: 'e-node_search_lancedb-node_remove_irrelevant',
+      source: 'node_search_lancedb',
+      target: 'node_remove_irrelevant',
+      isConditional: false
+    },
+    {
+      id: 'e-node_remove_irrelevant-node_ask_assistant',
+      source: 'node_remove_irrelevant',
+      target: 'node_ask_assistant',
+      isConditional: false
+    },
+    {
+      id: 'e-node_remove_irrelevant-node_extract_keywords',
+      source: 'node_remove_irrelevant',
+      target: 'node_extract_keywords',
+      condition: 'len(lancedb_results) < docs_limit',
+      isConditional: true
+    },
+    {
+      id: 'e-node_extract_keywords-node_search_exa',
+      source: 'node_extract_keywords',
+      target: 'node_search_exa',
+      isConditional: false
+    },
+    {
+      id: 'e-node_search_exa-node_ask_assistant',
+      source: 'node_search_exa',
+      target: 'node_ask_assistant',
+      isConditional: false
+    },
+    {
+      id: 'e-node_router-node_ask_assistant',
+      source: 'node_router',
+      target: 'node_ask_assistant',
+      condition: 'route="assistant"',
+      isConditional: true
+    },
+    {
+      id: 'e-node_router-node_extract_keywords',
+      source: 'node_router',
+      target: 'node_extract_keywords',
+      condition: 'route="web_search"',
+      isConditional: true
+    },
+    {
+      id: 'e-node_router-node_terminate',
+      source: 'node_router',
+      target: 'node_terminate',
+      condition: 'route="terminate"',
+      isConditional: true
+    }
+  ]
+};
+
+export const examples = [multiModalChatbotWorkflow, adaptiveCRAGWorkflow, streamingChatbotWorkflow];
diff --git a/telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts b/telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts
new file mode 100644
index 000000000..16004ce42
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/utils/BurrCodeGenerator.ts
@@ -0,0 +1,321 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BurrGraphJSON } from './GraphExporter';
+
+type NodeRef = BurrGraphJSON['nodes'][0];
+
+export class BurrGraphCodeGenerator {
+  static generatePythonCode(graphData: BurrGraphJSON): string {
+    const actionNodes = graphData.nodes.filter((n) => n.nodeType !== 'input');
+    const hasAsync = actionNodes.some((n) => n.isAsync);
+    const hasStreaming = actionNodes.some((n) => n.isStreaming);
+
+    const imports = this.generateImports(actionNodes, hasAsync, hasStreaming);
+    const actions = this.generateActions(graphData.nodes, graphData.edges);
+    const graphFunction = this.generateGraphFunction(graphData);
+    const main = this.generateMain(hasAsync, hasStreaming);
+
+    return [imports, actions, graphFunction, main].join('\n\n');
+  }
+
+  private static generateImports(
+    actionNodes: NodeRef[],
+    hasAsync: boolean,
+    hasStreaming: boolean
+  ): string {
+    // Decorator imports
+    const decorators: string[] = ['action'];
+    if (hasStreaming) decorators.push('streaming_action');
+    const actionImports = `from burr.core.action import ${decorators.join(', ')}`;
+
+    // Typing imports
+    const typingParts: string[] = ['Tuple'];
+    if (hasStreaming) {
+      typingParts.push('Optional');
+      if (hasAsync) typingParts.push('AsyncGenerator');
+      else typingParts.push('Generator');
+    }
+    const typingImports = `from typing import ${typingParts.join(', ')}`;
+
+    const asyncioImport = hasAsync ? '\nimport asyncio' : '';
+
+    return `${typingImports}
+from burr.core import State, default, when
+${actionImports}
+from burr.core.graph import GraphBuilder${asyncioImport}`;
+  }
+
+  private static generateActions(
+    nodes: BurrGraphJSON['nodes'],
+    edges: BurrGraphJSON['edges']
+  ): string {
+    const processNodes = nodes.filter((node) => node.nodeType !== 'input');
+
+    const actionFunctions = processNodes.map((node) => {
+      return this.generateAction(node, nodes, edges);
+    });
+
+    return actionFunctions.join('\n\n');
+  }
+
+  private static generateAction(
+    node: NodeRef,
+    nodes: BurrGraphJSON['nodes'],
+    edges: BurrGraphJSON['edges']
+  ): string {
+    const functionName = this.sanitizeNodeName(node.label);
+    const inputParams = this.getInputParameters(node.id, nodes, edges);
+    const paramString =
+      inputParams.length > 0 ? `state: State, ${inputParams.join(', ')}` : 'state: State';
+
+    const isAsync = node.isAsync || false;
+    const isStreaming = node.isStreaming || false;
+
+    const decorator = isStreaming
+      ? '@streaming_action(reads=[], writes=[])'
+      : '@action(reads=[], writes=[])';
+    const asyncKeyword = isAsync ? 'async ' : '';
+
+    let returnType: string;
+    let body: string;
+    let docKind: string;
+
+    if (isStreaming && isAsync) {
+      returnType = 'AsyncGenerator[Tuple[dict, Optional[State]], None]';
+      body = '    yield {}, state';
+      docKind = 'async streaming action';
+    } else if (isStreaming) {
+      returnType = 'Generator[Tuple[dict, Optional[State]], None, None]';
+      body = '    yield {}, state';
+      docKind = 'streaming action';
+    } else if (isAsync) {
+      returnType = 'Tuple[dict, State]';
+      body = '    return {}, state';
+      docKind = 'async action';
+    } else {
+      returnType = 'Tuple[dict, State]';
+      body = '    return {}, state';
+      docKind = 'action';
+    }
+
+    const docstring = node.description
+      ? `\n    """${node.description}\n\n    This is a stub ${docKind}. Please complete with your business logic.\n    """`
+      : `\n    """Stub ${docKind}. Please complete with your business logic."""`;
+
+    return `${decorator}
+${asyncKeyword}def ${functionName}(${paramString}) -> ${returnType}:${docstring}
+${body}`;
+  }
+
+  private static getInputParameters(
+    nodeId: string,
+    nodes: BurrGraphJSON['nodes'],
+    edges: BurrGraphJSON['edges']
+  ): string[] {
+    const inputParams: string[] = [];
+
+    edges.forEach((edge) => {
+      if (edge.target === nodeId) {
+        const sourceNode = nodes.find((n) => n.id === edge.source);
+        if (sourceNode && sourceNode.nodeType === 'input') {
+          const paramName = sourceNode.label.replace(/^input:\s*/, '').trim();
+          const sanitizedParam = this.sanitizeParameterName(paramName);
+          inputParams.push(`${sanitizedParam}: str`);
+        }
+      }
+    });
+
+    return inputParams;
+  }
+
+  private static sanitizeParameterName(name: string): string {
+    return (
+      name
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, '_')
+        .replace(/_+/g, '_')
+        .replace(/^_|_$/g, '') || 'param'
+    );
+  }
+
+  private static deduplicateNames(names: string[]): string[] {
+    const seen = new Map<string, number>();
+    return names.map((name) => {
+      const count = seen.get(name) || 0;
+      seen.set(name, count + 1);
+      return count > 0 ? `${name}_${count}` : name;
+    });
+  }
+
+  private static generateGraphFunction(graphData: BurrGraphJSON): string {
+    const processNodes = graphData.nodes.filter((node) => node.nodeType !== 'input');
+    const actionNames = this.deduplicateNames(
+      processNodes.map((node) => this.sanitizeNodeName(node.label))
+    );
+    const transitions = this.generateTransitions(graphData);
+
+    const actionsString = actionNames.map((name) => `          ${name},`).join('\n');
+
+    return `def create_burr_graph():
+    """Create the Burr graph for the project."""
+    return (
+        GraphBuilder()
+        .with_actions(
+${actionsString}
+        )
+        .with_transitions(
+${transitions}
+        )
+        .build()
+    )`;
+  }
+
+  private static generateTransitions(graphData: BurrGraphJSON): string {
+    const transitions: string[] = [];
+
+    const processEdges = graphData.edges.filter((edge) => {
+      const sourceNode = graphData.nodes.find((n) => n.id === edge.source);
+      const targetNode = graphData.nodes.find((n) => n.id === edge.target);
+      return sourceNode?.nodeType !== 'input' && targetNode?.nodeType !== 'input';
+    });
+
+    const edgesBySource = new Map<string, typeof processEdges>();
+    processEdges.forEach((edge) => {
+      if (!edgesBySource.has(edge.source)) {
+        edgesBySource.set(edge.source, []);
+      }
+      edgesBySource.get(edge.source)!.push(edge);
+    });
+
+    const allTransitions: Array<{ source: string; target: string; condition: string }> = [];
+
+    edgesBySource.forEach((edges, sourceId) => {
+      const sourceNode = graphData.nodes.find((n) => n.id === sourceId);
+      if (!sourceNode || sourceNode.nodeType === 'input') return;
+
+      const sourceName = this.sanitizeNodeName(sourceNode.label);
+
+      if (edges.length === 1) {
+        const edge = edges[0];
+        const targetNode = graphData.nodes.find((n) => n.id === edge.target);
+        if (targetNode && targetNode.nodeType !== 'input') {
+          const targetName = this.sanitizeNodeName(targetNode.label);
+          allTransitions.push({ source: sourceName, target: targetName, condition: 'default' });
+        }
+      } else {
+        const conditionalEdges = edges.filter((e) => e.isConditional && e.condition);
+        const defaultEdges = edges.filter((e) => !e.isConditional || !e.condition);
+
+        conditionalEdges.forEach((edge) => {
+          const targetNode = graphData.nodes.find((n) => n.id === edge.target);
+          if (targetNode && targetNode.nodeType !== 'input' && edge.condition) {
+            const targetName = this.sanitizeNodeName(targetNode.label);
+            allTransitions.push({
+              source: sourceName,
+              target: targetName,
+              condition: `when(${edge.condition})`
+            });
+          }
+        });
+
+        if (defaultEdges.length > 0) {
+          const defaultEdge = defaultEdges[0];
+          const targetNode = graphData.nodes.find((n) => n.id === defaultEdge.target);
+          if (targetNode && targetNode.nodeType !== 'input') {
+            const targetName = this.sanitizeNodeName(targetNode.label);
+            allTransitions.push({ source: sourceName, target: targetName, condition: 'default' });
+          }
+        }
+      }
+    });
+
+    // Group default transitions by target so multiple sources going to the same
+    // target can be collapsed into a single list-form transition.
+    const defaultsByTarget = new Map<string, string[]>();
+    const conditionalTransitions: Array<{ source: string; target: string; condition: string }> = [];
+
+    allTransitions.forEach(({ source, target, condition }) => {
+      if (condition === 'default') {
+        if (!defaultsByTarget.has(target)) {
+          defaultsByTarget.set(target, []);
+        }
+        defaultsByTarget.get(target)!.push(source);
+      } else {
+        conditionalTransitions.push({ source, target, condition });
+      }
+    });
+
+    // Emit conditional transitions first
+    conditionalTransitions.forEach(({ source, target, condition }) => {
+      transitions.push(`            ("${source}", "${target}", ${condition}),`);
+    });
+
+    // Emit default transitions (possibly grouped)
+    defaultsByTarget.forEach((sources, target) => {
+      if (sources.length === 1) {
+        transitions.push(`            ("${sources[0]}", "${target}", default),`);
+      } else {
+        const sourceList = sources.map((s) => `                    "${s}"`).join(',\n');
+        transitions.push(
+          `            (\n                [\n${sourceList}\n                ],\n                "${target}",\n            ),`
+        );
+      }
+    });
+
+    return transitions.join('\n');
+  }
+
+  private static generateMain(hasAsync: boolean, hasStreaming: boolean): string {
+    const needsAsyncMain = hasAsync || hasStreaming;
+    if (needsAsyncMain) {
+      return `graph = create_burr_graph()
+
+
+async def main():
+    """Run the Burr application.
+
+    Uses async execution which handles both sync and async actions seamlessly.
+    """
+    # action_, result, state = await app.arun(halt_after=[...])
+    print("Burr graph created successfully.")
+    print(graph)
+
+
+if __name__ == "__main__":
+    asyncio.run(main())`;
+    }
+    return `graph = create_burr_graph()
+
+if __name__ == "__main__":
+    print("Burr graph created successfully.")
+    print(graph)
+    # You can now use \`graph\` in your Burr application.`;
+  }
+
+  private static sanitizeNodeName(label: string): string {
+    return (
+      label
+        .toLowerCase()
+        .replace(/[^a-z0-9]/g, '_')
+        .replace(/_+/g, '_')
+        .replace(/^_|_$/g, '') || 'unnamed_node'
+    );
+  }
+}
diff --git a/telemetry/ui/src/components/routes/graph-builder/utils/ExampleLoader.ts b/telemetry/ui/src/components/routes/graph-builder/utils/ExampleLoader.ts
new file mode 100644
index 000000000..0492c47bd
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/utils/ExampleLoader.ts
@@ -0,0 +1,93 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Node, Edge, MarkerType } from '@xyflow/react';
+import { ExampleGraph } from '../data/examples';
+
+export class ExampleLoader {
+  static convertToReactFlow(example: ExampleGraph): { nodes: Node[]; edges: Edge[] } {
+    const nodes: Node[] = example.nodes.map((node, index) => ({
+      id: node.id,
+      type: 'custom',
+      position: node.position,
+      data: {
+        label: node.label,
+        description: node.description || '',
+        nodeType: node.nodeType,
+        isAsync: node.isAsync || false,
+        isStreaming: node.isStreaming || false,
+        icon: 'settings',
+        colorIndex: index % 10
+      }
+    }));
+
+    const edges: Edge[] = example.edges.map((edge) => ({
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: 'custom',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 15,
+        height: 15,
+        color: '#429dbce6'
+      },
+      data: {
+        condition: edge.condition,
+        isConditional: edge.isConditional,
+        label: edge.condition
+      }
+    }));
+
+    return { nodes, edges };
+  }
+
+  static validateExample(example: ExampleGraph): string[] {
+    const errors: string[] = [];
+
+    const nodeIds = new Set(example.nodes.map((n) => n.id));
+
+    example.edges.forEach((edge) => {
+      if (!nodeIds.has(edge.source)) {
+        errors.push(`Edge ${edge.id} references non-existent source node: ${edge.source}`);
+      }
+      if (!nodeIds.has(edge.target)) {
+        errors.push(`Edge ${edge.id} references non-existent target node: ${edge.target}`);
+      }
+    });
+
+    const uniqueNodeIds = new Set<string>();
+    example.nodes.forEach((node) => {
+      if (uniqueNodeIds.has(node.id)) {
+        errors.push(`Duplicate node ID: ${node.id}`);
+      }
+      uniqueNodeIds.add(node.id);
+    });
+
+    const uniqueEdgeIds = new Set<string>();
+    example.edges.forEach((edge) => {
+      if (uniqueEdgeIds.has(edge.id)) {
+        errors.push(`Duplicate edge ID: ${edge.id}`);
+      }
+      uniqueEdgeIds.add(edge.id);
+    });
+
+    return errors;
+  }
+}
diff --git a/telemetry/ui/src/components/routes/graph-builder/utils/GraphExporter.ts b/telemetry/ui/src/components/routes/graph-builder/utils/GraphExporter.ts
new file mode 100644
index 000000000..0959b3d6b
--- /dev/null
+++ b/telemetry/ui/src/components/routes/graph-builder/utils/GraphExporter.ts
@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Node, Edge } from '@xyflow/react';
+
+/**
+ * Interchange format for Burr graphs. This is the central data model that connects:
+ * - Visual graph editing (Graph Builder canvas)
+ * - Python code generation (BurrCodeGenerator)
+ * - Example loading (ExampleLoader)
+ * - Future: Pyodide-based Python AST parsing (code -> visual)
+ * - Future: Tracking API import (ApplicationModel -> BurrGraphJSON)
+ */
+export interface BurrGraphJSON {
+  version: string;
+  metadata: {
+    created: string;
+    title?: string;
+    description?: string;
+  };
+  nodes: Array<{
+    id: string;
+    label: string;
+    description?: string;
+    nodeType: 'input' | 'action';
+    isAsync?: boolean;
+    isStreaming?: boolean;
+    position: { x: number; y: number };
+  }>;
+  edges: Array<{
+    id: string;
+    source: string;
+    target: string;
+    condition?: string;
+    isConditional: boolean;
+  }>;
+}
+
+export class GraphExporter {
+  static exportToJSON(nodes: Node[], edges: Edge[]): BurrGraphJSON {
+    return {
+      version: '1.0.0',
+      metadata: {
+        created: new Date().toISOString(),
+        title: 'Burr Graph',
+        description: 'Generated from Burr Graph Builder'
+      },
+      nodes: nodes.map((node) => ({
+        id: node.id,
+        label: (node.data.label as string) || 'Unnamed Node',
+        description: (node.data.description as string) || undefined,
+        nodeType:
+          (node.data.nodeType as string) === 'input' ? ('input' as const) : ('action' as const),
+        isAsync: Boolean(node.data.isAsync) || undefined,
+        isStreaming: Boolean(node.data.isStreaming) || undefined,
+        position: node.position
+      })),
+      edges: edges.map((edge) => ({
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        condition: (edge.data?.label as string) || (edge.data?.condition as string) || undefined,
+        isConditional: Boolean(edge.data?.isConditional) || false
+      }))
+    };
+  }
+}

From b71f7154fccdf2ac5d1a2717b2a773f2fbb595a3 Mon Sep 17 00:00:00 2001
From: Stefan Krawczyk <stefank@cs.stanford.edu>
Date: Sun, 1 Mar 2026 09:33:11 -0800
Subject: [PATCH 02/10] fix: remove unused useCallback import and console.error

---
 telemetry/ui/src/components/routes/app/GraphView.tsx            | 2 +-
 .../components/routes/graph-builder/components/GraphBuilder.tsx | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx b/telemetry/ui/src/components/routes/app/GraphView.tsx
index baa0b0610..e2ecf5ab1 100644
--- a/telemetry/ui/src/components/routes/app/GraphView.tsx
+++ b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -20,7 +20,7 @@
 import { ActionModel, ApplicationModel, Step } from '../../../api';
 
 import dagre from 'dagre';
-import React, { createContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
 import {
   ReactFlow,
   BaseEdge,
diff --git a/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
index 9d94afecc..08c921cea 100644
--- a/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
+++ b/telemetry/ui/src/components/routes/graph-builder/components/GraphBuilder.tsx
@@ -586,7 +586,6 @@ const GraphBuilder: React.FC<GraphBuilderProps> = ({ initialGraph }) => {
 
     const errors = ExampleLoader.validateExample(selectedExample);
     if (errors.length > 0) {
-      console.error('Example validation failed:', errors);
       return;
     }
 

From 5edd0936c2cef54bbcd54a9a820c6056fbe385ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Mon, 23 Mar 2026 02:12:09 -0300
Subject: [PATCH 03/10] feat: add visual builder + workspace mode to Burr UI

Adds a low-code visual builder with split-view Monaco editor,
workspace file browsing, and project persistence.

Builder features:
- 9 node types (Action, Input, Result, LLM Call, API Call, Code,
  Streaming, Loop, Router) with specialized property editors
- Inline + buttons on edges for inserting nodes (Activepieces-style)
- Recursive layout algorithm supporting loop arcs and router fan-out
- Monaco Editor with multi-file code generation (actions.py, app.py,
  run.py, requirements.txt)
- Bidirectional sync between graph and code
- Searchable node type picker with categories
- File menu with save/load projects, Ctrl+S support
- Undo/redo (50-state history), copy/paste, delete shortcuts
- Code generation with sanitized identifiers and proper imports

Workspace features:
- Backend router for file browsing, code viewing, script execution
  (SSE streaming), process management, and workspace-project linking
- Builder project persistence in ~/.burr/builder_projects/
- Path traversal protection with workspace validation

New dependencies (all MIT, ASF Category A):
- @monaco-editor/react
- @tanstack/react-query
- @xyflow/react
- react-joyride
---
 burr/tracking/server/run.py                   |   4 +
 burr/tracking/server/schema.py                |   1 +
 burr/tracking/server/workspace.py             | 583 ++++++++++++++++++
 telemetry/ui/package-lock.json                | 275 ++++++++-
 telemetry/ui/package.json                     |   4 +
 telemetry/ui/src/App.tsx                      |   5 +
 telemetry/ui/src/api/models/BackendSpec.ts    |   1 +
 telemetry/ui/src/api/workspaceApi.ts          | 185 ++++++
 .../components/routes/builder/BuilderEdge.tsx |  57 ++
 .../routes/builder/BuilderGraph.tsx           | 132 ++++
 .../components/routes/builder/BuilderNode.tsx | 111 ++++
 .../routes/builder/BuilderToolbar.tsx         | 222 +++++++
 .../components/routes/builder/BuilderView.tsx | 512 +++++++++++++++
 .../components/routes/builder/CodePreview.tsx |  52 ++
 .../components/routes/builder/NodeEditor.tsx  | 359 +++++++++++
 .../routes/builder/NodeTypePicker.tsx         | 213 +++++++
 .../routes/builder/edges/InlineAddButton.tsx  |  65 ++
 .../routes/builder/edges/LoopReturnEdge.tsx   |  68 ++
 .../routes/builder/edges/LoopStartEdge.tsx    |  60 ++
 .../routes/builder/edges/RouterEndEdge.tsx    |  83 +++
 .../routes/builder/edges/RouterStartEdge.tsx  |  92 +++
 .../routes/builder/edges/StraightLineEdge.tsx |  56 ++
 .../routes/builder/nodes/BigAddButton.tsx     |  77 +++
 .../routes/builder/nodes/GraphEndWidget.tsx   |  35 ++
 .../routes/builder/nodes/LoopReturnNode.tsx   |  35 ++
 .../routes/builder/nodes/StepNode.tsx         | 104 ++++
 .../components/routes/project/ActivityBar.tsx |  74 +++
 .../routes/project/LinkWorkspacePrompt.tsx    |  80 +++
 .../project/ProjectWorkspaceContext.tsx       | 134 ++++
 .../routes/project/ProjectWorkspaceView.tsx   | 146 +++++
 .../components/routes/project/SidePanel.tsx   | 118 ++++
 .../src/components/routes/project/TabBar.tsx  |  64 ++
 .../routes/project/TrackingSidePanel.tsx      |  76 +++
 .../routes/workspace/CodeViewer.tsx           | 101 +++
 .../routes/workspace/FileExplorer.tsx         | 148 +++++
 .../routes/workspace/RunTerminal.tsx          | 181 ++++++
 .../routes/workspace/WorkspaceSelector.tsx    | 128 ++++
 .../routes/workspace/WorkspaceView.tsx        | 108 ++++
 telemetry/ui/src/hooks/useBuilderState.ts     | 397 ++++++++++++
 telemetry/ui/src/hooks/useSearch.ts           |  94 +++
 telemetry/ui/src/utils/builderTypes.ts        | 159 +++++
 telemetry/ui/src/utils/codeGenerator.ts       | 373 +++++++++++
 telemetry/ui/src/utils/codeParser.ts          | 201 ++++++
 telemetry/ui/src/utils/flowLayout.ts          | 384 ++++++++++++
 telemetry/ui/src/utils/stateFlow.ts           |  78 +++
 telemetry/ui/src/utils/treeUtils.ts           | 305 +++++++++
 46 files changed, 6724 insertions(+), 16 deletions(-)
 create mode 100644 burr/tracking/server/workspace.py
 create mode 100644 telemetry/ui/src/api/workspaceApi.ts
 create mode 100644 telemetry/ui/src/components/routes/builder/BuilderEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/BuilderNode.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/BuilderToolbar.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/BuilderView.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/CodePreview.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/NodeEditor.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/InlineAddButton.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/nodes/GraphEndWidget.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/nodes/LoopReturnNode.tsx
 create mode 100644 telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/ActivityBar.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/LinkWorkspacePrompt.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/ProjectWorkspaceContext.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/ProjectWorkspaceView.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/SidePanel.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/TabBar.tsx
 create mode 100644 telemetry/ui/src/components/routes/project/TrackingSidePanel.tsx
 create mode 100644 telemetry/ui/src/components/routes/workspace/CodeViewer.tsx
 create mode 100644 telemetry/ui/src/components/routes/workspace/FileExplorer.tsx
 create mode 100644 telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
 create mode 100644 telemetry/ui/src/components/routes/workspace/WorkspaceSelector.tsx
 create mode 100644 telemetry/ui/src/components/routes/workspace/WorkspaceView.tsx
 create mode 100644 telemetry/ui/src/hooks/useBuilderState.ts
 create mode 100644 telemetry/ui/src/hooks/useSearch.ts
 create mode 100644 telemetry/ui/src/utils/builderTypes.ts
 create mode 100644 telemetry/ui/src/utils/codeGenerator.ts
 create mode 100644 telemetry/ui/src/utils/codeParser.ts
 create mode 100644 telemetry/ui/src/utils/flowLayout.ts
 create mode 100644 telemetry/ui/src/utils/stateFlow.ts
 create mode 100644 telemetry/ui/src/utils/treeUtils.ts

diff --git a/burr/tracking/server/run.py b/burr/tracking/server/run.py
index 2e9759659..45938ebbf 100644
--- a/burr/tracking/server/run.py
+++ b/burr/tracking/server/run.py
@@ -32,6 +32,7 @@
     IndexingBackendMixin,
     SnapshottingBackendMixin,
 )
+from burr.tracking.server import workspace
 
 setup_logging(logging.INFO)
 
@@ -137,6 +138,7 @@ async def lifespan(app: FastAPI):
     global initialized
     initialized = True
     yield
+    await workspace.cleanup_processes()
     await backend.lifespan(app).__anext__()
 
 
@@ -151,6 +153,7 @@ def _get_app_spec() -> BackendSpec:
         snapshotting=is_snapshotting_backend,
         supports_demos=supports_demos,
         supports_annotations=is_annotations_backend,
+        supports_workspace=True,
     )
 
 
@@ -342,6 +345,7 @@ async def version() -> dict:
                 burr_version = "unknown"
         return {"version": burr_version}
 
+    ui_app.include_router(workspace.router, prefix="/api/v0/workspace")
     # Examples -- todo -- put them behind `if` statements
     ui_app.include_router(chatbot.router, prefix="/api/v0/chatbot")
     ui_app.include_router(email_assistant.router, prefix="/api/v0/email_assistant")
diff --git a/burr/tracking/server/schema.py b/burr/tracking/server/schema.py
index 749f1e3a2..78b277f8d 100644
--- a/burr/tracking/server/schema.py
+++ b/burr/tracking/server/schema.py
@@ -200,6 +200,7 @@ class BackendSpec(pydantic.BaseModel):
     snapshotting: bool
     supports_demos: bool
     supports_annotations: bool
+    supports_workspace: bool
 
 
 class AnnotationDataPointer(pydantic.BaseModel):
diff --git a/burr/tracking/server/workspace.py b/burr/tracking/server/workspace.py
new file mode 100644
index 000000000..9d3f5c945
--- /dev/null
+++ b/burr/tracking/server/workspace.py
@@ -0,0 +1,583 @@
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements.  See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership.  The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License.  You may obtain a copy of the License at
+#
+#   http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied.  See the License for the
+# specific language governing permissions and limitations
+# under the License.
+
+import asyncio
+import json as json_module
+import logging
+import os
+import re
+import signal
+import time
+from typing import Dict, List, Optional
+
+from fastapi import APIRouter, HTTPException, Query
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter()
+
+MAX_FILE_SIZE = 1_048_576  # 1MB
+
+LANGUAGE_MAP = {
+    ".py": "python",
+    ".js": "javascript",
+    ".ts": "typescript",
+    ".tsx": "tsx",
+    ".jsx": "jsx",
+    ".json": "json",
+    ".yaml": "yaml",
+    ".yml": "yaml",
+    ".toml": "toml",
+    ".md": "markdown",
+    ".html": "html",
+    ".css": "css",
+    ".sql": "sql",
+    ".sh": "bash",
+    ".txt": "text",
+}
+
+BURR_APP_PATTERN = re.compile(r"ApplicationBuilder")
+
+
+# --- Pydantic Models ---
+
+
+class WorkspaceLinkRequest(BaseModel):
+    project_id: str
+    workspace_path: str
+
+
+class WorkspaceLinkInfo(BaseModel):
+    project_id: str
+    workspace_path: Optional[str]
+
+
+class BuilderProjectSave(BaseModel):
+    name: str
+    graph_json: str  # JSON-serialized tree
+
+
+class BuilderProjectSummary(BaseModel):
+    id: str
+    name: str
+    updated_at: float
+
+
+class BuilderProjectFull(BaseModel):
+    id: str
+    name: str
+    graph_json: str
+    updated_at: float
+
+
+class WorkspaceOpenRequest(BaseModel):
+    path: str
+
+
+class WorkspaceInfo(BaseModel):
+    path: str
+    name: str
+
+
+class FileEntry(BaseModel):
+    name: str
+    path: str
+    is_dir: bool
+    size: int
+    modified: float
+    is_python: bool
+    has_burr_app: bool
+
+
+class FileContent(BaseModel):
+    path: str
+    content: str
+    language: str
+    size: int
+
+
+class ProcessInfo(BaseModel):
+    pid: int
+    script_path: str
+    started_at: float
+    status: str  # "running" | "stopped" | "exited"
+    exit_code: Optional[int]
+
+
+class RunRequest(BaseModel):
+    workspace: str
+    script: str
+
+
+# --- Security ---
+
+
+def _validate_path(workspace: str, relative: str) -> str:
+    workspace_real = os.path.realpath(workspace)
+    if relative:
+        target = os.path.realpath(os.path.join(workspace_real, relative))
+    else:
+        target = workspace_real
+    # Use os.sep suffix to prevent /foo matching /foobar
+    if target != workspace_real and not target.startswith(workspace_real + os.sep):
+        raise HTTPException(status_code=403, detail="Path traversal detected")
+    return target
+
+
+def _validate_workspace(workspace: str) -> str:
+    """Validate workspace is a registered link or the open endpoint validated it."""
+    workspace_real = os.path.realpath(workspace)
+    if not os.path.isdir(workspace_real):
+        raise HTTPException(status_code=400, detail="Workspace directory does not exist")
+    links = _read_links()
+    allowed = {os.path.realpath(p) for p in links.values()}
+    if workspace_real not in allowed:
+        raise HTTPException(status_code=403, detail="Workspace not registered")
+    return workspace_real
+
+
+def _is_binary(file_path: str) -> bool:
+    try:
+        with open(file_path, "rb") as f:
+            chunk = f.read(8192)
+            return b"\x00" in chunk
+    except OSError:
+        return True
+
+
+# --- Workspace Links ---
+
+_LINKS_PATH = os.path.join(os.path.expanduser("~/.burr"), "workspace_links.json")
+
+
+def _read_links() -> dict:
+    if os.path.exists(_LINKS_PATH):
+        with open(_LINKS_PATH, "r") as f:
+            return json_module.load(f)
+    return {}
+
+
+def _write_links(data: dict):
+    os.makedirs(os.path.dirname(_LINKS_PATH), exist_ok=True)
+    with open(_LINKS_PATH, "w") as f:
+        json_module.dump(data, f, indent=2)
+
+
+# --- Process Management ---
+# Uses asyncio.create_subprocess_exec which takes explicit argv (no shell injection).
+
+_processes: Dict[int, dict] = {}
+
+
+async def cleanup_processes():
+    for pid, info in list(_processes.items()):
+        proc = info.get("process")
+        if proc and proc.returncode is None:
+            try:
+                proc.terminate()
+                await asyncio.wait_for(proc.wait(), timeout=5)
+            except (ProcessLookupError, asyncio.TimeoutError):
+                try:
+                    proc.kill()
+                except ProcessLookupError:
+                    pass
+    _processes.clear()
+
+
+# --- Endpoints ---
+
+
+@router.post("/open", response_model=WorkspaceInfo)
+async def open_workspace(request: WorkspaceOpenRequest):
+    path = os.path.realpath(request.path)
+    if not os.path.isdir(path):
+        raise HTTPException(status_code=400, detail="Directory does not exist")
+    return WorkspaceInfo(path=path, name=os.path.basename(path))
+
+
+@router.get("/link", response_model=WorkspaceLinkInfo)
+async def get_workspace_link(project_id: str = Query(...)):
+    links = _read_links()
+    return WorkspaceLinkInfo(
+        project_id=project_id,
+        workspace_path=links.get(project_id),
+    )
+
+
+@router.post("/link", response_model=WorkspaceLinkInfo)
+async def set_workspace_link(request: WorkspaceLinkRequest):
+    path = os.path.realpath(request.workspace_path)
+    if not os.path.isdir(path):
+        raise HTTPException(status_code=400, detail="Directory does not exist")
+    links = _read_links()
+    links[request.project_id] = path
+    _write_links(links)
+    return WorkspaceLinkInfo(project_id=request.project_id, workspace_path=path)
+
+
+@router.delete("/link")
+async def remove_workspace_link(project_id: str = Query(...)):
+    links = _read_links()
+    links.pop(project_id, None)
+    _write_links(links)
+    return {"ok": True}
+
+
+@router.get("/tree", response_model=List[FileEntry])
+async def get_tree(
+    workspace: str = Query(...),
+    relative_path: str = Query(""),
+):
+    _validate_workspace(workspace)
+    target = _validate_path(workspace, relative_path)
+    if not os.path.isdir(target):
+        raise HTTPException(status_code=400, detail="Not a directory")
+
+    entries = []
+    try:
+        for item in sorted(os.listdir(target)):
+            if item.startswith("."):
+                continue
+            full_path = os.path.join(target, item)
+            rel = os.path.relpath(full_path, os.path.realpath(workspace))
+            try:
+                stat = os.stat(full_path)
+            except OSError:
+                continue
+            is_dir = os.path.isdir(full_path)
+            is_python = item.endswith(".py")
+            has_burr = False
+            if is_python and not is_dir:
+                try:
+                    with open(full_path, "r", errors="ignore") as f:
+                        content = f.read(65536)
+                        has_burr = bool(BURR_APP_PATTERN.search(content))
+                except OSError:
+                    pass
+            entries.append(
+                FileEntry(
+                    name=item,
+                    path=rel,
+                    is_dir=is_dir,
+                    size=stat.st_size if not is_dir else 0,
+                    modified=stat.st_mtime,
+                    is_python=is_python,
+                    has_burr_app=has_burr,
+                )
+            )
+    except PermissionError:
+        raise HTTPException(status_code=403, detail="Permission denied")
+    return entries
+
+
+@router.get("/file", response_model=FileContent)
+async def get_file(
+    workspace: str = Query(...),
+    relative_path: str = Query(...),
+):
+    _validate_workspace(workspace)
+    target = _validate_path(workspace, relative_path)
+    if not os.path.isfile(target):
+        raise HTTPException(status_code=404, detail="File not found")
+    size = os.path.getsize(target)
+    if size > MAX_FILE_SIZE:
+        raise HTTPException(status_code=413, detail="File too large (max 1MB)")
+    if _is_binary(target):
+        raise HTTPException(status_code=415, detail="Binary file not supported")
+
+    ext = os.path.splitext(target)[1].lower()
+    language = LANGUAGE_MAP.get(ext, "text")
+
+    with open(target, "r", errors="replace") as f:
+        content = f.read()
+
+    return FileContent(
+        path=relative_path,
+        content=content,
+        language=language,
+        size=size,
+    )
+
+
+@router.post("/run", response_model=ProcessInfo)
+async def run_script(request: RunRequest):
+    _validate_workspace(request.workspace)
+    target = _validate_path(request.workspace, request.script)
+    if not os.path.isfile(target):
+        raise HTTPException(status_code=404, detail="Script not found")
+    if not target.endswith(".py"):
+        raise HTTPException(status_code=400, detail="Only Python scripts supported")
+
+    # asyncio.create_subprocess_exec takes an explicit argv list,
+    # so there is no shell interpretation and no injection risk.
+    proc = await asyncio.create_subprocess_exec(
+        "python",
+        target,
+        stdout=asyncio.subprocess.PIPE,
+        stderr=asyncio.subprocess.PIPE,
+        cwd=os.path.realpath(request.workspace),
+    )
+
+    started_at = time.time()
+    info = {
+        "process": proc,
+        "script_path": request.script,
+        "started_at": started_at,
+        "workspace": request.workspace,
+    }
+    _processes[proc.pid] = info
+
+    return ProcessInfo(
+        pid=proc.pid,
+        script_path=request.script,
+        started_at=started_at,
+        status="running",
+        exit_code=None,
+    )
+
+
+@router.get("/run/{pid}/output")
+async def stream_output(pid: int):
+    if pid not in _processes:
+        raise HTTPException(status_code=404, detail="Process not found")
+
+    proc = _processes[pid]["process"]
+
+    async def event_generator():
+        async def read_stream(stream, stream_type):
+            while True:
+                line = await stream.readline()
+                if not line:
+                    break
+                text = line.decode("utf-8", errors="replace")
+                yield f'data: {{"type": "{stream_type}", "data": {_json_escape(text)}}}\n\n'
+
+        stdout_gen = read_stream(proc.stdout, "stdout")
+        stderr_gen = read_stream(proc.stderr, "stderr")
+
+        stdout_done = False
+        stderr_done = False
+
+        while not stdout_done or not stderr_done:
+            tasks = []
+            if not stdout_done:
+                tasks.append(("stdout", stdout_gen))
+            if not stderr_done:
+                tasks.append(("stderr", stderr_gen))
+
+            for name, gen in tasks:
+                try:
+                    line = await asyncio.wait_for(gen.__anext__(), timeout=0.1)
+                    yield line
+                except StopAsyncIteration:
+                    if name == "stdout":
+                        stdout_done = True
+                    else:
+                        stderr_done = True
+                except asyncio.TimeoutError:
+                    continue
+
+        exit_code = await proc.wait()
+        yield f'data: {{"type": "exit", "data": "{exit_code}"}}\n\n'
+
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no",
+        },
+    )
+
+
+@router.post("/run/{pid}/stop", response_model=ProcessInfo)
+async def stop_process(pid: int):
+    if pid not in _processes:
+        raise HTTPException(status_code=404, detail="Process not found")
+
+    info = _processes[pid]
+    proc = info["process"]
+
+    if proc.returncode is None:
+        try:
+            proc.send_signal(signal.SIGTERM)
+            await asyncio.wait_for(proc.wait(), timeout=5)
+        except (ProcessLookupError, asyncio.TimeoutError):
+            try:
+                proc.kill()
+            except ProcessLookupError:
+                pass
+
+    return ProcessInfo(
+        pid=pid,
+        script_path=info["script_path"],
+        started_at=info["started_at"],
+        status="stopped" if proc.returncode is None else "exited",
+        exit_code=proc.returncode,
+    )
+
+
+@router.get("/processes", response_model=List[ProcessInfo])
+async def list_processes(workspace: str = Query(...)):
+    _validate_workspace(workspace)
+    result = []
+    for pid, info in _processes.items():
+        if info["workspace"] != workspace:
+            continue
+        proc = info["process"]
+        if proc.returncode is None:
+            status = "running"
+        else:
+            status = "exited"
+        result.append(
+            ProcessInfo(
+                pid=pid,
+                script_path=info["script_path"],
+                started_at=info["started_at"],
+                status=status,
+                exit_code=proc.returncode,
+            )
+        )
+    return result
+
+
+@router.get("/scan", response_model=List[FileEntry])
+async def scan_burr_apps(workspace: str = Query(...)):
+    _validate_workspace(workspace)
+    workspace_real = os.path.realpath(workspace)
+    if not os.path.isdir(workspace_real):
+        raise HTTPException(status_code=400, detail="Workspace not found")
+
+    results = []
+    for root, dirs, filenames in os.walk(workspace_real):
+        dirs[:] = [
+            d
+            for d in dirs
+            if not d.startswith(".") and d != "__pycache__" and d != "node_modules"
+        ]
+        for fname in filenames:
+            if not fname.endswith(".py"):
+                continue
+            full_path = os.path.join(root, fname)
+            rel = os.path.relpath(full_path, workspace_real)
+            try:
+                with open(full_path, "r", errors="ignore") as f:
+                    content = f.read(65536)
+                if BURR_APP_PATTERN.search(content):
+                    stat = os.stat(full_path)
+                    results.append(
+                        FileEntry(
+                            name=fname,
+                            path=rel,
+                            is_dir=False,
+                            size=stat.st_size,
+                            modified=stat.st_mtime,
+                            is_python=True,
+                            has_burr_app=True,
+                        )
+                    )
+            except OSError:
+                continue
+    return results
+
+
+def _json_escape(s: str) -> str:
+    import json
+
+    return json.dumps(s)
+
+
+# --- Builder Projects ---
+
+_BUILDER_DIR = os.path.join(os.path.expanduser("~/.burr"), "builder_projects")
+
+
+def _ensure_builder_dir():
+    os.makedirs(_BUILDER_DIR, exist_ok=True)
+
+
+@router.get("/builder/projects", response_model=List[BuilderProjectSummary])
+async def list_builder_projects():
+    _ensure_builder_dir()
+    projects = []
+    for fname in sorted(os.listdir(_BUILDER_DIR)):
+        if not fname.endswith(".json"):
+            continue
+        fpath = os.path.join(_BUILDER_DIR, fname)
+        try:
+            with open(fpath, "r") as f:
+                data = json_module.load(f)
+            projects.append(
+                BuilderProjectSummary(
+                    id=fname.replace(".json", ""),
+                    name=data.get("name", fname),
+                    updated_at=os.path.getmtime(fpath),
+                )
+            )
+        except (OSError, json_module.JSONDecodeError):
+            continue
+    return sorted(projects, key=lambda p: p.updated_at, reverse=True)
+
+
+@router.post("/builder/projects", response_model=BuilderProjectFull)
+async def save_builder_project(request: BuilderProjectSave):
+    _ensure_builder_dir()
+    # Generate ID from name
+    project_id = re.sub(r"[^a-zA-Z0-9_-]", "_", request.name).lower()
+    if not project_id:
+        project_id = "untitled"
+    fpath = os.path.join(_BUILDER_DIR, f"{project_id}.json")
+    data = {
+        "name": request.name,
+        "graph_json": request.graph_json,
+    }
+    with open(fpath, "w") as f:
+        json_module.dump(data, f, indent=2)
+    return BuilderProjectFull(
+        id=project_id,
+        name=request.name,
+        graph_json=request.graph_json,
+        updated_at=time.time(),
+    )
+
+
+@router.get("/builder/projects/{project_id}", response_model=BuilderProjectFull)
+async def get_builder_project(project_id: str):
+    safe_id = re.sub(r"[^a-zA-Z0-9_-]", "", project_id)
+    fpath = os.path.join(_BUILDER_DIR, f"{safe_id}.json")
+    if not os.path.isfile(fpath):
+        raise HTTPException(status_code=404, detail="Project not found")
+    with open(fpath, "r") as f:
+        data = json_module.load(f)
+    return BuilderProjectFull(
+        id=safe_id,
+        name=data.get("name", safe_id),
+        graph_json=data.get("graph_json", "{}"),
+        updated_at=os.path.getmtime(fpath),
+    )
+
+
+@router.delete("/builder/projects/{project_id}")
+async def delete_builder_project(project_id: str):
+    safe_id = re.sub(r"[^a-zA-Z0-9_-]", "", project_id)
+    fpath = os.path.join(_BUILDER_DIR, f"{safe_id}.json")
+    if os.path.isfile(fpath):
+        os.remove(fpath)
+    return {"ok": True}
diff --git a/telemetry/ui/package-lock.json b/telemetry/ui/package-lock.json
index 95f8310a7..05a6868bd 100644
--- a/telemetry/ui/package-lock.json
+++ b/telemetry/ui/package-lock.json
@@ -11,6 +11,8 @@
         "@headlessui/react": "^2.1.9",
         "@heroicons/react": "^2.1.1",
         "@microsoft/fetch-event-source": "^2.0.1",
+        "@monaco-editor/react": "^4.7.0",
+        "@tanstack/react-query": "^5.95.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -23,6 +25,7 @@
         "@types/react-select": "^5.0.1",
         "@types/react-syntax-highlighter": "^15.5.11",
         "@uiw/react-json-view": "^2.0.0-alpha.12",
+        "@xyflow/react": "^12.10.1",
         "clsx": "^2.1.0",
         "dagre": "^0.8.5",
         "es-abstract": "^1.22.4",
@@ -31,6 +34,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
+        "react-joyride": "^3.0.0",
         "react-markdown": "^9.0.1",
         "react-query": "^3.39.3",
         "react-router-dom": "^6.22.1",
@@ -3244,21 +3248,39 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/deepmerge": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@fastify/deepmerge/-/deepmerge-3.2.1.tgz",
+      "integrity": "sha512-N5Oqvltoa2r9z1tbx4xjky0oRR60v+T47Ic4J1ukoVQcptLOrIdRnCSdTGmOmajZuHVKlTnfcmrjyqsGEW1ztA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
-      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.1"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
-      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/react": {
@@ -3276,11 +3298,12 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
+        "@floating-ui/dom": "^1.7.6"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -3288,9 +3311,49 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@gilbarbara/deep-equal": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.4.1.tgz",
+      "integrity": "sha512-QF2BGeQjsa59T59XvFdR3is5jrl28Eg0J6giXAC5919bcqvR8XP4B+07tpbs6Y6/IQd4FBncaL2WVXIBgSxt4w==",
+      "license": "MIT"
+    },
+    "node_modules/@gilbarbara/hooks": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/hooks/-/hooks-0.11.0.tgz",
+      "integrity": "sha512-CIVazdxqFRplUfm9wZL3/0X1TURJekhPMWGFdWzEmyJrGPiotX2yxA1KiB8N7VnhawIaMtb2Apnda4Y6DRwi2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.4.1"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 19"
+      }
+    },
+    "node_modules/@gilbarbara/types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/types/-/types-0.2.2.tgz",
+      "integrity": "sha512-QuQDBRRcm1Q8AbSac2W1YElurOhprj3Iko/o+P1fJxUWS4rOGKMVli98OXS7uo4z+cKAif6a+L9bcZFSyauQpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^4.1.0"
+      }
+    },
+    "node_modules/@gilbarbara/types/node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/@graphql-codegen/add": {
       "version": "5.0.3",
@@ -5560,6 +5623,29 @@
       "resolved": "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
       "integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA=="
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.14",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz",
@@ -6988,6 +7074,32 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.95.0.tgz",
+      "integrity": "sha512-H1/CWCe8tGL3YIVeo770Z6kPbt0B3M1d/iQXIIK1qlFiFt6G2neYdkHgLapOC8uMYNt9DmHjmGukEKgdMk1P+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.95.0.tgz",
+      "integrity": "sha512-EMP8B+BK9zvnAemT8M/y3z/WO0NjZ7fIUY3T3wnHYK6AA3qK/k33i7tPgCXCejhX0cd4I6bJIXN2GmjrHjDBzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.95.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.10.8",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.8.tgz",
@@ -8868,6 +8980,38 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -11863,6 +12007,16 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -16092,6 +16246,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-lite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-2.0.0.tgz",
+      "integrity": "sha512-70f2BMIQlbSUXVKaZUd9a9fJH3IH1PDckV0m4BIIO4LjnNYvOh4Ng7vXIXEwpA0KDZknRq+7fHwGTu0jIdx28g==",
+      "license": "MIT"
+    },
     "node_modules/is-lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-2.0.2.tgz",
@@ -19526,6 +19686,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/match-sorter": {
       "version": "6.3.4",
       "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
@@ -20730,6 +20903,17 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -23549,11 +23733,52 @@
         "react": "*"
       }
     },
+    "node_modules/react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": ">=0.0.0 <=99",
+        "react": ">=0.0.0 <=99"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-joyride": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-3.0.0.tgz",
+      "integrity": "sha512-ut5kZEu0fZauOVW0JnX0s6Vcia/mAFxSLUIV7nu8025U47PktqN1fnLtMqE+IzgGac8F3id9IPd/U9APmWYvkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fastify/deepmerge": "^3.2.1",
+        "@floating-ui/react-dom": "^2.1.8",
+        "@gilbarbara/deep-equal": "^0.4.1",
+        "@gilbarbara/hooks": "^0.11.0",
+        "@gilbarbara/types": "^0.2.2",
+        "is-lite": "^2.0.0",
+        "react-innertext": "^1.1.5",
+        "scroll": "^3.0.1",
+        "scrollparent": "^2.1.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "16.8 - 19",
+        "react-dom": "16.8 - 19"
+      }
+    },
+    "node_modules/react-joyride/node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-json-tree": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.18.0.tgz",
@@ -24550,6 +24775,18 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/scroll": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
+      "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==",
+      "license": "MIT"
+    },
+    "node_modules/scrollparent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
+      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==",
+      "license": "ISC"
+    },
     "node_modules/scuid": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz",
@@ -25138,6 +25375,12 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
       "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/static-eval": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
diff --git a/telemetry/ui/package.json b/telemetry/ui/package.json
index 1a391fcc0..0d96dce48 100644
--- a/telemetry/ui/package.json
+++ b/telemetry/ui/package.json
@@ -6,6 +6,8 @@
     "@headlessui/react": "^2.1.9",
     "@heroicons/react": "^2.1.1",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@tanstack/react-query": "^5.95.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -18,6 +20,7 @@
     "@types/react-select": "^5.0.1",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@uiw/react-json-view": "^2.0.0-alpha.12",
+    "@xyflow/react": "^12.10.1",
     "clsx": "^2.1.0",
     "dagre": "^0.8.5",
     "es-abstract": "^1.22.4",
@@ -26,6 +29,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-joyride": "^3.0.0",
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.22.1",
diff --git a/telemetry/ui/src/App.tsx b/telemetry/ui/src/App.tsx
index 121337ae3..f5a03b256 100644
--- a/telemetry/ui/src/App.tsx
+++ b/telemetry/ui/src/App.tsx
@@ -31,6 +31,8 @@ import { StreamingChatbotWithTelemetry } from './examples/StreamingChatbot';
 import { AdminView } from './components/routes/AdminView';
 import { AnnotationsViewContainer } from './components/routes/app/AnnotationsView';
 import { DeepResearcherWithTelemetry } from './examples/DeepResearcher';
+import { BuilderView } from './components/routes/builder/BuilderView';
+import { WorkspaceSelector } from './components/routes/workspace/WorkspaceSelector';
 
 /**
  * Basic application. We have an AppContainer -- this has a breadcrumb and a sidebar.
@@ -65,6 +67,9 @@ const App = () => {
             <Route path="/demos/email-assistant" element={<EmailAssistantWithTelemetry />} />
             <Route path="/demos/deep-researcher" element={<DeepResearcherWithTelemetry />} />
             <Route path="/admin" element={<AdminView />} />
+            <Route path="/builder" element={<BuilderView />} />
+            <Route path="/builder/:projectId/:appId" element={<BuilderView />} />
+            <Route path="/workspace" element={<WorkspaceSelector />} />
             <Route path="*" element={<Navigate to="/projects" />} />
           </Routes>
         </AppContainer>
diff --git a/telemetry/ui/src/api/models/BackendSpec.ts b/telemetry/ui/src/api/models/BackendSpec.ts
index b9fd7ede6..61a3ce163 100644
--- a/telemetry/ui/src/api/models/BackendSpec.ts
+++ b/telemetry/ui/src/api/models/BackendSpec.ts
@@ -29,4 +29,5 @@ export type BackendSpec = {
   snapshotting: boolean;
   supports_demos: boolean;
   supports_annotations: boolean;
+  supports_workspace: boolean;
 };
diff --git a/telemetry/ui/src/api/workspaceApi.ts b/telemetry/ui/src/api/workspaceApi.ts
new file mode 100644
index 000000000..36be4826d
--- /dev/null
+++ b/telemetry/ui/src/api/workspaceApi.ts
@@ -0,0 +1,185 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+
+const BASE = '/api/v0/workspace';
+
+export interface WorkspaceInfo {
+  path: string;
+  name: string;
+}
+
+export interface FileEntry {
+  name: string;
+  path: string;
+  is_dir: boolean;
+  size: number;
+  modified: number;
+  is_python: boolean;
+  has_burr_app: boolean;
+}
+
+export interface FileContent {
+  path: string;
+  content: string;
+  language: string;
+  size: number;
+}
+
+export interface ProcessInfo {
+  pid: number;
+  script_path: string;
+  started_at: number;
+  status: string;
+  exit_code: number | null;
+}
+
+export interface ProcessOutputEvent {
+  type: 'stdout' | 'stderr' | 'exit';
+  data: string;
+}
+
+export interface WorkspaceLinkInfo {
+  project_id: string;
+  workspace_path: string | null;
+}
+
+export interface BuilderProjectSummary {
+  id: string;
+  name: string;
+  updated_at: number;
+}
+
+export interface BuilderProjectFull {
+  id: string;
+  name: string;
+  graph_json: string;
+  updated_at: number;
+}
+
+async function apiPost<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) {
+    const detail = await res.json().catch(() => ({ detail: res.statusText }));
+    throw new Error(detail.detail || res.statusText);
+  }
+  return res.json();
+}
+
+async function apiGet<T>(path: string, params?: Record<string, string>): Promise<T> {
+  const url = new URL(`${BASE}${path}`, window.location.origin);
+  if (params) {
+    Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
+  }
+  const res = await fetch(url.toString());
+  if (!res.ok) {
+    const detail = await res.json().catch(() => ({ detail: res.statusText }));
+    throw new Error(detail.detail || res.statusText);
+  }
+  return res.json();
+}
+
+export const workspaceApi = {
+  getWorkspaceLink(projectId: string): Promise<WorkspaceLinkInfo> {
+    return apiGet('/link', { project_id: projectId });
+  },
+
+  setWorkspaceLink(projectId: string, workspacePath: string): Promise<WorkspaceLinkInfo> {
+    return apiPost('/link', { project_id: projectId, workspace_path: workspacePath });
+  },
+
+  removeWorkspaceLink(projectId: string): Promise<void> {
+    const url = new URL(`${BASE}/link`, window.location.origin);
+    url.searchParams.set('project_id', projectId);
+    return fetch(url.toString(), { method: 'DELETE' }).then(() => undefined);
+  },
+
+  openWorkspace(path: string): Promise<WorkspaceInfo> {
+    return apiPost('/open', { path });
+  },
+
+  getFileTree(workspace: string, relativePath = ''): Promise<FileEntry[]> {
+    return apiGet('/tree', { workspace, relative_path: relativePath });
+  },
+
+  getFileContent(workspace: string, relativePath: string): Promise<FileContent> {
+    return apiGet('/file', { workspace, relative_path: relativePath });
+  },
+
+  runScript(workspace: string, script: string): Promise<ProcessInfo> {
+    return apiPost('/run', { workspace, script });
+  },
+
+  stopProcess(pid: number): Promise<ProcessInfo> {
+    return apiPost(`/run/${pid}/stop`, {});
+  },
+
+  getProcesses(workspace: string): Promise<ProcessInfo[]> {
+    return apiGet('/processes', { workspace });
+  },
+
+  scanBurrApps(workspace: string): Promise<FileEntry[]> {
+    return apiGet('/scan', { workspace });
+  },
+
+  listBuilderProjects(): Promise<BuilderProjectSummary[]> {
+    return apiGet('/builder/projects');
+  },
+
+  saveBuilderProject(name: string, graphJson: string): Promise<BuilderProjectFull> {
+    return apiPost('/builder/projects', { name, graph_json: graphJson });
+  },
+
+  getBuilderProject(id: string): Promise<BuilderProjectFull> {
+    return apiGet(`/builder/projects/${id}`);
+  },
+
+  deleteBuilderProject(id: string): Promise<void> {
+    return fetch(`${BASE}/builder/projects/${id}`, { method: 'DELETE' }).then(() => undefined);
+  },
+
+  streamProcessOutput(
+    pid: number,
+    onEvent: (event: ProcessOutputEvent) => void,
+    onError: (err: Error) => void
+  ): AbortController {
+    const ctrl = new AbortController();
+    fetchEventSource(`${BASE}/run/${pid}/output`, {
+      signal: ctrl.signal,
+      onmessage(ev) {
+        try {
+          const parsed: ProcessOutputEvent = JSON.parse(ev.data);
+          onEvent(parsed);
+        } catch {
+          // ignore parse errors
+        }
+      },
+      onerror(err) {
+        onError(err instanceof Error ? err : new Error(String(err)));
+      },
+      openWhenHidden: true
+    });
+    return ctrl;
+  }
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx b/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx
new file mode 100644
index 000000000..6637a1022
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderEdge.tsx
@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps, getBezierPath } from '@xyflow/react';
+
+type BuilderEdgeData = {
+  condition: string;
+  onConditionChange: (condition: string) => void;
+};
+
+export const BuilderEdgeComponent = ({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  data
+}: EdgeProps) => {
+  const edgeData = data as BuilderEdgeData;
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+
+  const label = edgeData?.condition === 'default' ? '' : edgeData?.condition || '';
+
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={markerEnd}
+      style={{ strokeWidth: 1.5 }}
+      label={label}
+    />
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx b/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
new file mode 100644
index 000000000..250b5d5ba
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
@@ -0,0 +1,132 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useMemo } from 'react';
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  ReactFlowProvider,
+  useReactFlow
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { BurrNodeType, BurrEdgeType, BurrGraph, InsertContext } from '../../../utils/builderTypes';
+import { NodeType } from '../../../utils/codeGenerator';
+
+import { StepNodeComponent } from './nodes/StepNode';
+import { BigAddButtonComponent } from './nodes/BigAddButton';
+import { GraphEndWidgetComponent } from './nodes/GraphEndWidget';
+import { LoopReturnNodeComponent } from './nodes/LoopReturnNode';
+
+import { StraightLineEdgeComponent } from './edges/StraightLineEdge';
+import { LoopStartEdgeComponent } from './edges/LoopStartEdge';
+import { LoopReturnEdgeComponent } from './edges/LoopReturnEdge';
+import { RouterStartEdgeComponent } from './edges/RouterStartEdge';
+import { RouterEndEdgeComponent } from './edges/RouterEndEdge';
+
+const nodeTypes = {
+  [BurrNodeType.STEP]: StepNodeComponent,
+  [BurrNodeType.BIG_ADD_BUTTON]: BigAddButtonComponent,
+  [BurrNodeType.GRAPH_END]: GraphEndWidgetComponent,
+  [BurrNodeType.LOOP_RETURN]: LoopReturnNodeComponent
+};
+
+const edgeTypes = {
+  [BurrEdgeType.STRAIGHT_LINE]: StraightLineEdgeComponent,
+  [BurrEdgeType.LOOP_START]: LoopStartEdgeComponent,
+  [BurrEdgeType.LOOP_RETURN]: LoopReturnEdgeComponent,
+  [BurrEdgeType.ROUTER_START]: RouterStartEdgeComponent,
+  [BurrEdgeType.ROUTER_END]: RouterEndEdgeComponent
+};
+
+type BuilderGraphProps = {
+  layoutGraph: BurrGraph;
+  selectedNodeId: string | null;
+  onSelectNode: (id: string | null) => void;
+  onInsert: (nodeType: NodeType, ctx: InsertContext) => void;
+  unresolvedReads: Map<string, string[]>;
+};
+
+const BuilderGraphInner = (props: BuilderGraphProps) => {
+  const { fitView } = useReactFlow();
+
+  useEffect(() => {
+    const timer = setTimeout(() => fitView({ padding: 0.3 }), 50);
+    return () => clearTimeout(timer);
+  }, [props.layoutGraph, fitView]);
+
+  const flowNodes = useMemo(() => {
+    return props.layoutGraph.nodes.map((node) => {
+      if (node.type === BurrNodeType.STEP) {
+        const stepData = node.data as any;
+        return {
+          ...node,
+          data: {
+            ...stepData,
+            isSelected: stepData.stepId === props.selectedNodeId,
+            unresolvedReads: props.unresolvedReads.get(stepData.name) || [],
+            onSelect: () => props.onSelectNode(stepData.stepId)
+          }
+        };
+      }
+      if (node.type === BurrNodeType.BIG_ADD_BUTTON) {
+        return {
+          ...node,
+          data: { ...node.data, onInsert: props.onInsert }
+        };
+      }
+      return node;
+    });
+  }, [props.layoutGraph.nodes, props.selectedNodeId, props.unresolvedReads, props.onSelectNode]);
+
+  const flowEdges = useMemo(() => {
+    return props.layoutGraph.edges.map((edge) => ({
+      ...edge,
+      data: { ...edge.data, onInsert: props.onInsert }
+    }));
+  }, [props.layoutGraph.edges, props.onInsert]);
+
+  return (
+    <ReactFlow
+      nodes={flowNodes}
+      edges={flowEdges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      nodesDraggable={false}
+      nodesConnectable={false}
+      elementsSelectable={true}
+      onPaneClick={() => props.onSelectNode(null)}
+      fitView
+      maxZoom={2}
+      minZoom={0.1}
+    >
+      <Background />
+      <Controls position="bottom-right" />
+    </ReactFlow>
+  );
+};
+
+export const BuilderGraph = (props: BuilderGraphProps) => {
+  return (
+    <ReactFlowProvider>
+      <BuilderGraphInner {...props} />
+    </ReactFlowProvider>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderNode.tsx b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
new file mode 100644
index 000000000..bad27c95d
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
@@ -0,0 +1,111 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Handle, Position } from '@xyflow/react';
+import { Chip } from '../../common/chip';
+import {
+  ExclamationTriangleIcon,
+  BoltIcon,
+  ArrowDownTrayIcon,
+  FlagIcon,
+  SparklesIcon,
+  GlobeAltIcon,
+  CodeBracketIcon,
+  SignalIcon,
+  ArrowPathIcon,
+  ArrowsRightLeftIcon
+} from '@heroicons/react/24/outline';
+import { NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
+
+const NODE_ICONS: Record<NodeType, React.ComponentType<any>> = {
+  action: BoltIcon,
+  input: ArrowDownTrayIcon,
+  result: FlagIcon,
+  llm_call: SparklesIcon,
+  api_call: GlobeAltIcon,
+  code: CodeBracketIcon,
+  streaming: SignalIcon,
+  loop: ArrowPathIcon,
+  router: ArrowsRightLeftIcon
+};
+
+type BuilderNodeData = {
+  label: string;
+  nodeType: NodeType;
+  reads: string[];
+  writes: string[];
+  inputs: string[];
+  isSelected: boolean;
+  unresolvedReads: string[];
+  onSelect: () => void;
+};
+
+export const BuilderNodeComponent = (props: { data: BuilderNodeData }) => {
+  const { label, nodeType, reads, writes, inputs, isSelected, unresolvedReads, onSelect } =
+    props.data;
+  const meta = NODE_TYPE_META[nodeType];
+  const Icon = NODE_ICONS[nodeType];
+
+  return (
+    <>
+      <Handle type="target" position={Position.Top} />
+      <div
+        className={`p-3 rounded-lg border-2 cursor-pointer min-w-[160px] shadow-sm ${meta.color} ${
+          isSelected ? 'border-purple-500 ring-2 ring-purple-200' : meta.borderColor
+        }`}
+        onClick={onSelect}
+      >
+        <div className="flex items-center gap-1.5 mb-1">
+          <Icon className="h-4 w-4 text-gray-500 shrink-0" />
+          <span className="font-semibold text-sm">{label}</span>
+          <span className="text-[9px] text-gray-400 ml-auto">{meta.label}</span>
+          {unresolvedReads.length > 0 && (
+            <ExclamationTriangleIcon
+              className="h-4 w-4 text-yellow-500"
+              title={`Unresolved: ${unresolvedReads.join(', ')}`}
+            />
+          )}
+        </div>
+
+        {reads.length > 0 && (
+          <div className="flex flex-wrap gap-0.5 mb-0.5">
+            {reads.map((r) => (
+              <Chip key={r} label={r} chipType="stateRead" className="!text-[8px] !p-0.5 !px-1" />
+            ))}
+          </div>
+        )}
+        {writes.length > 0 && (
+          <div className="flex flex-wrap gap-0.5 mb-0.5">
+            {writes.map((w) => (
+              <Chip key={w} label={w} chipType="stateWrite" className="!text-[8px] !p-0.5 !px-1" />
+            ))}
+          </div>
+        )}
+        {inputs.length > 0 && (
+          <div className="flex flex-wrap gap-0.5">
+            {inputs.map((i) => (
+              <Chip key={i} label={i} chipType="input" className="!text-[8px] !p-0.5 !px-1" />
+            ))}
+          </div>
+        )}
+      </div>
+      <Handle type="source" position={Position.Bottom} id="a" />
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderToolbar.tsx b/telemetry/ui/src/components/routes/builder/BuilderToolbar.tsx
new file mode 100644
index 000000000..896abb3b9
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderToolbar.tsx
@@ -0,0 +1,222 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  PlusIcon,
+  ShieldCheckIcon,
+  ArrowDownTrayIcon,
+  FolderOpenIcon,
+  DocumentArrowDownIcon,
+  TrashIcon
+} from '@heroicons/react/24/outline';
+import { NodeType } from '../../../utils/codeGenerator';
+import { NodeTypePicker } from './NodeTypePicker';
+import {
+  workspaceApi,
+  BuilderProjectSummary
+} from '../../../api/workspaceApi';
+
+export const BuilderToolbar = (props: {
+  onAddNode: (nodeType: NodeType) => void;
+  onValidate: () => void;
+  validationCount: number;
+  projectName: string;
+  onProjectNameChange: (name: string) => void;
+  onSave: () => void;
+  onLoad: (graphJson: string) => void;
+  onNew: () => void;
+}) => {
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const [fileMenuOpen, setFileMenuOpen] = useState(false);
+  const [savedProjects, setSavedProjects] = useState<BuilderProjectSummary[]>([]);
+  const [showOpenDialog, setShowOpenDialog] = useState(false);
+  const addBtnRef = useRef<HTMLButtonElement>(null);
+  const fileMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (fileMenuRef.current && !fileMenuRef.current.contains(e.target as Node)) {
+        setFileMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const loadProjects = async () => {
+    const projects = await workspaceApi.listBuilderProjects();
+    setSavedProjects(projects);
+    setShowOpenDialog(true);
+    setFileMenuOpen(false);
+  };
+
+  const handleOpen = async (id: string) => {
+    const project = await workspaceApi.getBuilderProject(id);
+    props.onProjectNameChange(project.name);
+    props.onLoad(project.graph_json);
+    setShowOpenDialog(false);
+  };
+
+  const handleDelete = async (id: string) => {
+    await workspaceApi.deleteBuilderProject(id);
+    setSavedProjects((prev) => prev.filter((p) => p.id !== id));
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2 px-3 py-2 bg-white border-b">
+        {/* File menu */}
+        <div className="relative" ref={fileMenuRef}>
+          <button
+            onClick={() => setFileMenuOpen(!fileMenuOpen)}
+            className="px-2.5 py-1.5 text-sm text-gray-700 hover:bg-gray-100 rounded-md"
+          >
+            File
+          </button>
+          {fileMenuOpen && (
+            <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-48 py-1">
+              <button
+                onClick={() => { props.onNew(); setFileMenuOpen(false); }}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <PlusIcon className="h-4 w-4" /> New Project
+              </button>
+              <button
+                onClick={() => { props.onSave(); setFileMenuOpen(false); }}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <DocumentArrowDownIcon className="h-4 w-4" /> Save
+              </button>
+              <button
+                onClick={loadProjects}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <FolderOpenIcon className="h-4 w-4" /> Open...
+              </button>
+              <hr className="my-1 border-gray-100" />
+              <button
+                onClick={() => {
+                  const code = document.querySelector('.monaco-editor')?.textContent || '';
+                  const blob = new Blob([code], { type: 'text/plain' });
+                  const url = URL.createObjectURL(blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = `${props.projectName || 'burr_project'}.py`;
+                  a.click();
+                  URL.revokeObjectURL(url);
+                  setFileMenuOpen(false);
+                }}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <ArrowDownTrayIcon className="h-4 w-4" /> Download .py
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="h-4 w-px bg-gray-200" />
+
+        {/* Project name */}
+        <input
+          type="text"
+          value={props.projectName}
+          onChange={(e) => props.onProjectNameChange(e.target.value)}
+          className="px-2 py-1 text-sm font-medium text-gray-700 bg-transparent border-b border-transparent hover:border-gray-300 focus:border-blue-500 outline-none w-40"
+          placeholder="Untitled Project"
+        />
+
+        <div className="h-4 w-px bg-gray-200" />
+
+        {/* Add Node */}
+        <div className="relative">
+          <button
+            ref={addBtnRef}
+            onClick={() => setPickerOpen(!pickerOpen)}
+            className="flex items-center gap-1 px-3 py-1.5 bg-dwlightblue text-white rounded-md text-sm hover:opacity-90"
+          >
+            <PlusIcon className="h-4 w-4" />
+            Add Node
+          </button>
+          {pickerOpen && (
+            <NodeTypePicker
+              anchorRef={addBtnRef as React.RefObject<HTMLElement>}
+              onSelect={(type) => props.onAddNode(type)}
+              onClose={() => setPickerOpen(false)}
+            />
+          )}
+        </div>
+
+        {/* Validation */}
+        <button
+          onClick={props.onValidate}
+          className={`flex items-center gap-1 px-3 py-1.5 rounded-md text-sm border ${
+            props.validationCount > 0
+              ? 'border-yellow-300 text-yellow-700 bg-yellow-50'
+              : 'border-green-300 text-green-700 bg-green-50'
+          }`}
+        >
+          <ShieldCheckIcon className="h-4 w-4" />
+          {props.validationCount > 0 ? `${props.validationCount} warnings` : 'Valid'}
+        </button>
+      </div>
+
+      {/* Open Project Dialog */}
+      {showOpenDialog && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
+          <div className="bg-white rounded-xl shadow-2xl w-96 max-h-[70vh] flex flex-col">
+            <div className="flex items-center justify-between px-4 py-3 border-b">
+              <h2 className="text-sm font-semibold text-gray-800">Open Project</h2>
+              <button onClick={() => setShowOpenDialog(false)} className="text-gray-400 hover:text-gray-600 text-lg">
+                x
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+              {savedProjects.length === 0 && (
+                <div className="px-4 py-8 text-sm text-gray-400 text-center">No saved projects</div>
+              )}
+              {savedProjects.map((p) => (
+                <div
+                  key={p.id}
+                  className="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 border-b border-gray-100"
+                >
+                  <button
+                    onClick={() => handleOpen(p.id)}
+                    className="flex-1 text-left"
+                  >
+                    <div className="text-sm font-medium text-gray-700">{p.name}</div>
+                    <div className="text-xs text-gray-400">
+                      {new Date(p.updated_at * 1000).toLocaleString()}
+                    </div>
+                  </button>
+                  <button
+                    onClick={() => handleDelete(p.id)}
+                    className="p-1 text-gray-300 hover:text-red-500"
+                  >
+                    <TrashIcon className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/BuilderView.tsx b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
new file mode 100644
index 000000000..397e7ac64
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
@@ -0,0 +1,512 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import Editor, { OnMount } from '@monaco-editor/react';
+import {
+  DocumentTextIcon,
+  XMarkIcon,
+  ChevronRightIcon,
+  FolderIcon,
+  FolderOpenIcon
+} from '@heroicons/react/24/outline';
+import { DefaultService } from '../../../api';
+import { useBuilderState } from '../../../hooks/useBuilderState';
+import { BuilderGraph } from './BuilderGraph';
+import { BuilderToolbar } from './BuilderToolbar';
+import { NodeEditor } from './NodeEditor';
+import { NodeType, ProjectFile } from '../../../utils/codeGenerator';
+import { parsePythonCode, buildTreeFromParsed } from '../../../utils/codeParser';
+import { FileEntry, workspaceApi } from '../../../api/workspaceApi';
+
+type OpenTab = {
+  name: string;
+  language: string;
+  content: string;
+  source: 'generated' | 'workspace';
+  path?: string; // workspace relative path
+  modified?: boolean;
+};
+
+// Mini file explorer for the editor sidebar
+const EditorFileExplorer = (props: {
+  generatedFiles: ProjectFile[];
+  workspacePath: string | null;
+  onOpenFile: (tab: OpenTab) => void;
+}) => {
+  const [expanded, setExpanded] = useState(true);
+  const [wsExpanded, setWsExpanded] = useState(false);
+  const [wsFiles, setWsFiles] = useState<FileEntry[]>([]);
+  const [wsSubFiles, setWsSubFiles] = useState<Record<string, FileEntry[]>>({});
+
+  useEffect(() => {
+    if (props.workspacePath && wsExpanded) {
+      workspaceApi.getFileTree(props.workspacePath).then(setWsFiles);
+    }
+  }, [props.workspacePath, wsExpanded]);
+
+  const loadSubDir = async (path: string) => {
+    if (!props.workspacePath || wsSubFiles[path]) return;
+    const entries = await workspaceApi.getFileTree(props.workspacePath, path);
+    setWsSubFiles((prev) => ({ ...prev, [path]: entries }));
+  };
+
+  const openWsFile = async (entry: FileEntry) => {
+    if (!props.workspacePath || entry.is_dir) return;
+    const data = await workspaceApi.getFileContent(props.workspacePath, entry.path);
+    props.onOpenFile({
+      name: entry.name,
+      language: data.language,
+      content: data.content,
+      source: 'workspace',
+      path: entry.path
+    });
+  };
+
+  const langMap: Record<string, string> = {
+    py: 'python', js: 'javascript', ts: 'typescript', json: 'json',
+    yaml: 'yaml', yml: 'yaml', toml: 'toml', md: 'markdown', txt: 'plaintext'
+  };
+
+  return (
+    <div className="w-48 shrink-0 border-r border-gray-200 bg-gray-50 text-xs overflow-y-auto">
+      {/* Generated files */}
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 w-full px-2 py-1.5 text-[10px] font-bold text-gray-500 uppercase tracking-wider hover:bg-gray-100"
+      >
+        <ChevronRightIcon className={`h-3 w-3 transition-transform ${expanded ? 'rotate-90' : ''}`} />
+        Generated
+      </button>
+      {expanded &&
+        props.generatedFiles.map((f) => (
+          <button
+            key={f.name}
+            onClick={() =>
+              props.onOpenFile({ name: f.name, language: f.language, content: f.content, source: 'generated' })
+            }
+            className="flex items-center gap-1.5 w-full px-4 py-1 text-gray-600 hover:bg-gray-100 truncate"
+          >
+            <DocumentTextIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+            {f.name}
+          </button>
+        ))}
+
+      {/* Workspace files */}
+      {props.workspacePath && (
+        <>
+          <button
+            onClick={() => setWsExpanded(!wsExpanded)}
+            className="flex items-center gap-1 w-full px-2 py-1.5 text-[10px] font-bold text-gray-500 uppercase tracking-wider hover:bg-gray-100 mt-1"
+          >
+            <ChevronRightIcon className={`h-3 w-3 transition-transform ${wsExpanded ? 'rotate-90' : ''}`} />
+            Workspace
+          </button>
+          {wsExpanded &&
+            wsFiles.map((entry) =>
+              entry.is_dir ? (
+                <div key={entry.path}>
+                  <button
+                    onClick={() => {
+                      if (wsSubFiles[entry.path]) {
+                        setWsSubFiles((prev) => {
+                          const next = { ...prev };
+                          delete next[entry.path];
+                          return next;
+                        });
+                      } else {
+                        loadSubDir(entry.path);
+                      }
+                    }}
+                    className="flex items-center gap-1.5 w-full px-4 py-1 text-gray-600 hover:bg-gray-100 truncate"
+                  >
+                    {wsSubFiles[entry.path] ? (
+                      <FolderOpenIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                    ) : (
+                      <FolderIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                    )}
+                    {entry.name}
+                  </button>
+                  {wsSubFiles[entry.path]?.map((sub) =>
+                    !sub.is_dir ? (
+                      <button
+                        key={sub.path}
+                        onClick={() => openWsFile(sub)}
+                        className="flex items-center gap-1.5 w-full px-7 py-1 text-gray-500 hover:bg-gray-100 truncate"
+                      >
+                        <DocumentTextIcon className="h-3 w-3 text-gray-400 shrink-0" />
+                        {sub.name}
+                      </button>
+                    ) : null
+                  )}
+                </div>
+              ) : (
+                <button
+                  key={entry.path}
+                  onClick={() => openWsFile(entry)}
+                  className="flex items-center gap-1.5 w-full px-4 py-1 text-gray-600 hover:bg-gray-100 truncate"
+                >
+                  <DocumentTextIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                  {entry.name}
+                </button>
+              )
+            )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export const BuilderView = () => {
+  const { projectId, appId } = useParams<{ projectId?: string; appId?: string }>();
+  const [projectName, setProjectName] = useState('Untitled Project');
+
+  const builder = useBuilderState();
+
+  const editSourceRef = useRef<'graph' | 'editor'>('graph');
+  const [editorOverrides, setEditorOverrides] = useState<Record<string, string>>({});
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  // Open tabs
+  const [openTabs, setOpenTabs] = useState<OpenTab[]>([]);
+  const [activeTabName, setActiveTabName] = useState<string | null>(null);
+
+  // Workspace link
+  const { data: linkInfo } = useQuery({
+    queryKey: ['workspace-link', projectId],
+    queryFn: () => workspaceApi.getWorkspaceLink(projectId!),
+    enabled: !!projectId
+  });
+  const workspacePath = linkInfo?.workspace_path || null;
+
+  const { data: appData } = useQuery({
+    queryKey: ['steps', appId],
+    queryFn: () =>
+      DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(projectId!, appId!, '__none__'),
+    enabled: !!projectId && !!appId
+  });
+
+  const [imported, setImported] = useState(false);
+  useEffect(() => {
+    if (appData && !imported) {
+      builder.importFromApplication(appData.application);
+      setImported(true);
+    }
+  }, [appData, imported, builder]);
+
+  // Auto-open actions.py on first load
+  useEffect(() => {
+    if (builder.projectFiles.length > 0 && openTabs.length === 0) {
+      const actionsFile = builder.projectFiles[0];
+      const tab: OpenTab = {
+        name: actionsFile.name,
+        language: actionsFile.language,
+        content: actionsFile.content,
+        source: 'generated'
+      };
+      setOpenTabs([tab]);
+      setActiveTabName(tab.name);
+    }
+  }, [builder.projectFiles]);
+
+  const handleAddNode = useCallback(
+    (nodeType: NodeType) => {
+      editSourceRef.current = 'graph';
+      setEditorOverrides({});
+      builder.addNode({ x: 0, y: 0 }, nodeType);
+    },
+    [builder]
+  );
+
+  const handleSave = useCallback(async () => {
+    const graphJson = JSON.stringify(builder.rootNode);
+    await workspaceApi.saveBuilderProject(projectName, graphJson);
+  }, [builder.rootNode, projectName]);
+
+  const handleLoad = useCallback(
+    (graphJson: string) => {
+      try {
+        const parsed = JSON.parse(graphJson);
+        builder.setRootNode(parsed);
+        editSourceRef.current = 'graph';
+        setEditorOverrides({});
+        setOpenTabs([]);
+        setActiveTabName(null);
+      } catch {
+        // invalid JSON
+      }
+    },
+    [builder]
+  );
+
+  const handleNew = useCallback(() => {
+    builder.setRootNode(null);
+    setProjectName('Untitled Project');
+    editSourceRef.current = 'graph';
+    setEditorOverrides({});
+    setOpenTabs([]);
+    setActiveTabName(null);
+  }, [builder]);
+
+  // Ctrl+S to save
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [handleSave]);
+
+  const getTabKey = (t: OpenTab) => t.path || t.name;
+
+  const openFile = useCallback((tab: OpenTab) => {
+    const key = getTabKey(tab);
+    setOpenTabs((prev) => {
+      const exists = prev.find((t) => getTabKey(t) === key);
+      if (exists) return prev;
+      return [...prev, tab];
+    });
+    setActiveTabName(key);
+  }, []);
+
+  const closeTab = useCallback(
+    (key: string) => {
+      setOpenTabs((prev) => {
+        const filtered = prev.filter((t) => getTabKey(t) !== key);
+        if (activeTabName === key) {
+          setActiveTabName(filtered.length > 0 ? getTabKey(filtered[filtered.length - 1]) : null);
+        }
+        return filtered;
+      });
+    },
+    [activeTabName]
+  );
+
+  const activeTab = openTabs.find((t) => getTabKey(t) === activeTabName);
+
+  // Get content for active tab (generated files update from graph)
+  const getTabContent = (tab: OpenTab): string => {
+    if (tab.source === 'generated') {
+      if (editSourceRef.current === 'editor' && editorOverrides[tab.name] !== undefined) {
+        return editorOverrides[tab.name];
+      }
+      const gen = builder.projectFiles.find((f) => f.name === tab.name);
+      return gen?.content || tab.content;
+    }
+    return editorOverrides[getTabKey(tab)] ?? tab.content;
+  };
+
+  const getTabLanguage = (tab: OpenTab): string => {
+    if (tab.source === 'generated') {
+      return builder.projectFiles.find((f) => f.name === tab.name)?.language || tab.language;
+    }
+    return tab.language;
+  };
+
+  const handleEditorChange = useCallback(
+    (value: string | undefined) => {
+      if (!value || !activeTabName) return;
+      editSourceRef.current = 'editor';
+      setEditorOverrides((prev) => ({ ...prev, [activeTabName]: value }));
+
+      // Parse for graph sync only on generated Python files
+      const tab = openTabs.find((t) => t.name === activeTabName);
+      if (!tab || tab.source !== 'generated') return;
+      if (activeTabName !== 'actions.py' && activeTabName !== 'app.py') return;
+
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const actionsCode =
+          activeTabName === 'actions.py'
+            ? value
+            : editorOverrides['actions.py'] ||
+              builder.projectFiles.find((f) => f.name === 'actions.py')?.content ||
+              '';
+        const appCode =
+          activeTabName === 'app.py'
+            ? value
+            : editorOverrides['app.py'] ||
+              builder.projectFiles.find((f) => f.name === 'app.py')?.content ||
+              '';
+
+        const parsed = parsePythonCode(actionsCode + '\n\n' + appCode);
+        if (parsed.error || parsed.actions.length === 0) {
+          setParseError(parsed.error || null);
+          return;
+        }
+        setParseError(null);
+        const tree = buildTreeFromParsed(parsed);
+        if (tree) builder.setRootFromCode(tree);
+      }, 1000);
+    },
+    [activeTabName, builder, editorOverrides, openTabs]
+  );
+
+  const handleEditorMount: OnMount = (editor) => {
+    editor.onDidFocusEditorText(() => {
+      editSourceRef.current = 'editor';
+    });
+    editor.onDidBlurEditorText(() => {
+      editSourceRef.current = 'graph';
+      setEditorOverrides({});
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <BuilderToolbar
+        onAddNode={handleAddNode}
+        onValidate={() => {}}
+        validationCount={builder.validationErrors.size}
+        projectName={projectName}
+        onProjectNameChange={setProjectName}
+        onSave={handleSave}
+        onLoad={handleLoad}
+        onNew={handleNew}
+      />
+
+      <div className="flex flex-1 min-h-0">
+        {/* Left: Visual Builder */}
+        <div className="w-1/2 flex border-r border-gray-200">
+          <div className="flex-1">
+            <BuilderGraph
+              layoutGraph={builder.layoutGraph}
+              selectedNodeId={builder.selectedNodeId}
+              onSelectNode={(id) => {
+                editSourceRef.current = 'graph';
+                setEditorOverrides({});
+                builder.setSelectedNodeId(id);
+              }}
+              onInsert={(nodeType, ctx) => {
+                editSourceRef.current = 'graph';
+                setEditorOverrides({});
+                builder.handleInsert(nodeType, ctx);
+              }}
+              unresolvedReads={builder.validationErrors}
+            />
+          </div>
+
+          {builder.selectedNode && (
+            <NodeEditor
+              node={builder.selectedNode}
+              onUpdate={(updates) => {
+                editSourceRef.current = 'graph';
+                setEditorOverrides({});
+                builder.updateNode(builder.selectedNode!.id, updates);
+              }}
+              onDelete={() => {
+                editSourceRef.current = 'graph';
+                setEditorOverrides({});
+                builder.removeNode(builder.selectedNode!.id);
+              }}
+              unresolvedReads={builder.validationErrors.get(builder.selectedNode.name) || []}
+            />
+          )}
+        </div>
+
+        {/* Right: VS Code-style editor */}
+        <div className="w-1/2 flex">
+          {/* Mini file explorer */}
+          <EditorFileExplorer
+            generatedFiles={builder.projectFiles}
+            workspacePath={workspacePath}
+            onOpenFile={openFile}
+          />
+
+          {/* Editor area */}
+          <div className="flex-1 flex flex-col min-w-0">
+            {/* Tabs */}
+            <div className="flex items-center bg-gray-50 border-b border-gray-200 overflow-x-auto shrink-0">
+              {openTabs.map((tab) => {
+                const key = getTabKey(tab);
+                return (
+                  <div
+                    key={key}
+                    onClick={() => setActiveTabName(key)}
+                    className={`flex items-center gap-1 px-3 py-1.5 text-xs cursor-pointer border-r border-gray-200 shrink-0 select-none ${
+                      key === activeTabName
+                        ? 'bg-white text-gray-900 font-medium border-b-2 border-b-blue-500'
+                        : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
+                    }`}
+                  >
+                    <DocumentTextIcon className="h-3 w-3 shrink-0" />
+                    <span className="truncate max-w-[100px]">{tab.name}</span>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        closeTab(key);
+                      }}
+                      className="ml-1 p-0.5 rounded hover:bg-gray-200"
+                    >
+                      <XMarkIcon className="h-3 w-3" />
+                    </button>
+                  </div>
+                );
+              })}
+              <div className="flex-1" />
+              {parseError && <span className="text-[10px] text-red-500 px-2">Parse error</span>}
+            </div>
+
+            {/* Monaco Editor */}
+            <div className="flex-1">
+              {activeTab ? (
+                <Editor
+                  key={activeTab.name}
+                  defaultLanguage={getTabLanguage(activeTab)}
+                  value={getTabContent(activeTab)}
+                  theme="vs-light"
+                  onChange={handleEditorChange}
+                  onMount={handleEditorMount}
+                  options={{
+                    minimap: { enabled: true },
+                    fontSize: 13,
+                    lineNumbers: 'on',
+                    scrollBeyondLastLine: false,
+                    wordWrap: 'on',
+                    automaticLayout: true,
+                    folding: true,
+                    renderLineHighlight: 'all',
+                    tabSize: 4
+                  }}
+                />
+              ) : (
+                <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+                  Open a file from the explorer
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/CodePreview.tsx b/telemetry/ui/src/components/routes/builder/CodePreview.tsx
new file mode 100644
index 000000000..ae759b418
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/CodePreview.tsx
@@ -0,0 +1,52 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { base16AteliersulphurpoolLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export const CodePreview = (props: { code: string }) => {
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(props.code);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-2 bg-gray-100 border-b">
+        <span className="text-sm font-semibold text-gray-600">Generated Python</span>
+        <button
+          onClick={copyToClipboard}
+          className="text-xs text-dwlightblue hover:underline"
+        >
+          Copy
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <SyntaxHighlighter
+          language="python"
+          style={base16AteliersulphurpoolLight}
+          wrapLines={true}
+          wrapLongLines={true}
+          className="!m-0 !text-sm"
+        >
+          {props.code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/NodeEditor.tsx b/telemetry/ui/src/components/routes/builder/NodeEditor.tsx
new file mode 100644
index 000000000..c572f2761
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/NodeEditor.tsx
@@ -0,0 +1,359 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState } from 'react';
+import { BuilderNode, NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
+import { TrashIcon } from '@heroicons/react/24/outline';
+
+const TagInput = (props: {
+  label: string;
+  values: string[];
+  onChange: (values: string[]) => void;
+  colorClass: string;
+}) => {
+  const [input, setInput] = useState('');
+
+  const addTag = () => {
+    const trimmed = input.trim();
+    if (trimmed && !props.values.includes(trimmed)) {
+      props.onChange([...props.values, trimmed]);
+      setInput('');
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-xs font-semibold text-gray-500">{props.label}</label>
+      <div className="flex flex-wrap gap-1 mb-1">
+        {props.values.map((v) => (
+          <span
+            key={v}
+            className={`${props.colorClass} text-white text-xs px-2 py-0.5 rounded-md flex items-center gap-1`}
+          >
+            {v}
+            <button
+              className="hover:text-red-200 text-[10px]"
+              onClick={() => props.onChange(props.values.filter((x) => x !== v))}
+            >
+              x
+            </button>
+          </span>
+        ))}
+      </div>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            addTag();
+          }
+        }}
+        placeholder={`Add ${props.label.toLowerCase()}...`}
+        className="border border-gray-200 rounded px-2 py-1 text-sm"
+      />
+    </div>
+  );
+};
+
+const TextInput = (props: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  mono?: boolean;
+}) => (
+  <div className="flex flex-col gap-1">
+    <label className="text-xs font-semibold text-gray-500">{props.label}</label>
+    <input
+      type="text"
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+      placeholder={props.placeholder}
+      className={`border border-gray-200 rounded px-2 py-1 text-sm ${props.mono ? 'font-mono' : ''}`}
+    />
+  </div>
+);
+
+const SelectInput = (props: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  options: { value: string; label: string }[];
+}) => (
+  <div className="flex flex-col gap-1">
+    <label className="text-xs font-semibold text-gray-500">{props.label}</label>
+    <select
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+      className="border border-gray-200 rounded px-2 py-1 text-sm bg-white"
+    >
+      {props.options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  </div>
+);
+
+const CodeInput = (props: { label: string; value: string; onChange: (v: string) => void }) => (
+  <div className="flex flex-col gap-1">
+    <label className="text-xs font-semibold text-gray-500">{props.label}</label>
+    <textarea
+      value={props.value}
+      onChange={(e) => props.onChange(e.target.value)}
+      rows={8}
+      placeholder="# Python code here..."
+      className="border border-gray-200 rounded px-2 py-1 text-sm font-mono bg-gray-50"
+      spellCheck={false}
+    />
+  </div>
+);
+
+const TypeSpecificEditor = (props: {
+  node: BuilderNode;
+  onUpdate: (updates: Partial<BuilderNode>) => void;
+}) => {
+  const { node, onUpdate } = props;
+
+  switch (node.nodeType) {
+    case 'llm_call':
+      return (
+        <>
+          <SelectInput
+            label="Provider"
+            value={node.llmProvider || 'openai'}
+            onChange={(v) => onUpdate({ llmProvider: v })}
+            options={[
+              { value: 'openai', label: 'OpenAI' },
+              { value: 'anthropic', label: 'Anthropic' },
+              { value: 'google', label: 'Google' },
+              { value: 'local', label: 'Local / Ollama' }
+            ]}
+          />
+          <TextInput
+            label="Model"
+            value={node.llmModel || ''}
+            onChange={(v) => onUpdate({ llmModel: v })}
+            placeholder="gpt-4, claude-3, etc."
+          />
+        </>
+      );
+
+    case 'api_call':
+      return (
+        <>
+          <TextInput
+            label="URL"
+            value={node.apiUrl || ''}
+            onChange={(v) => onUpdate({ apiUrl: v })}
+            placeholder="https://api.example.com/endpoint"
+            mono
+          />
+          <SelectInput
+            label="Method"
+            value={node.apiMethod || 'GET'}
+            onChange={(v) => onUpdate({ apiMethod: v })}
+            options={[
+              { value: 'GET', label: 'GET' },
+              { value: 'POST', label: 'POST' },
+              { value: 'PUT', label: 'PUT' },
+              { value: 'DELETE', label: 'DELETE' },
+              { value: 'PATCH', label: 'PATCH' }
+            ]}
+          />
+        </>
+      );
+
+    case 'code':
+      return (
+        <CodeInput
+          label="Implementation"
+          value={node.codeBody || ''}
+          onChange={(v) => onUpdate({ codeBody: v })}
+        />
+      );
+
+    case 'loop':
+      return (
+        <>
+          <TextInput
+            label="Loop Variable (state key)"
+            value={node.loopVariable || ''}
+            onChange={(v) => onUpdate({ loopVariable: v })}
+            placeholder="items"
+            mono
+          />
+          <TextInput
+            label="Item Variable"
+            value={node.itemVariable || ''}
+            onChange={(v) => onUpdate({ itemVariable: v })}
+            placeholder="current_item"
+            mono
+          />
+        </>
+      );
+
+    case 'router':
+      return (
+        <div className="flex flex-col gap-2">
+          <label className="text-xs font-semibold text-gray-500">Branches</label>
+          {(node.branches || []).map((branch, i) => (
+            <div key={i} className="flex flex-col gap-1 p-2 bg-gray-50 rounded border border-gray-200">
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-gray-600">{branch.name}</span>
+                <button
+                  className="text-[10px] text-red-400 hover:text-red-600"
+                  onClick={() => {
+                    const branches = [...(node.branches || [])];
+                    branches.splice(i, 1);
+                    onUpdate({ branches });
+                  }}
+                >
+                  remove
+                </button>
+              </div>
+              <input
+                type="text"
+                value={branch.name}
+                onChange={(e) => {
+                  const branches = [...(node.branches || [])];
+                  branches[i] = { ...branches[i], name: e.target.value };
+                  onUpdate({ branches });
+                }}
+                className="border border-gray-200 rounded px-2 py-0.5 text-xs"
+                placeholder="Branch name"
+              />
+              <input
+                type="text"
+                value={branch.condition}
+                onChange={(e) => {
+                  const branches = [...(node.branches || [])];
+                  branches[i] = { ...branches[i], condition: e.target.value };
+                  onUpdate({ branches });
+                }}
+                className="border border-gray-200 rounded px-2 py-0.5 text-xs font-mono"
+                placeholder='default, when(status="ok"), expr("x > 5")'
+              />
+            </div>
+          ))}
+          <button
+            onClick={() => {
+              const branches = [...(node.branches || [])];
+              branches.push({ name: `Branch ${branches.length + 1}`, condition: 'default', firstAction: undefined });
+              onUpdate({ branches });
+            }}
+            className="text-xs text-blue-600 hover:text-blue-800 self-start"
+          >
+            + Add Branch
+          </button>
+        </div>
+      );
+
+    default:
+      return null;
+  }
+};
+
+export const NodeEditor = (props: {
+  node: BuilderNode;
+  onUpdate: (updates: Partial<BuilderNode>) => void;
+  onDelete: () => void;
+  unresolvedReads: string[];
+}) => {
+  const meta = NODE_TYPE_META[props.node.nodeType];
+
+  return (
+    <div className="flex flex-col gap-3 p-4 border-l bg-white h-full overflow-y-auto w-80">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span
+            className={`text-xs font-medium px-2 py-0.5 rounded ${meta.color} ${meta.borderColor} border`}
+          >
+            {meta.label}
+          </span>
+          <h3 className="text-sm font-semibold text-gray-700">Edit Node</h3>
+        </div>
+        <button
+          onClick={props.onDelete}
+          className="p-1 text-red-400 hover:text-red-600 rounded"
+          title="Delete node"
+        >
+          <TrashIcon className="h-4 w-4" />
+        </button>
+      </div>
+
+      <TextInput
+        label="Name"
+        value={props.node.name}
+        onChange={(v) => props.onUpdate({ name: v })}
+        placeholder="action_name"
+        mono
+      />
+
+      <SelectInput
+        label="Type"
+        value={props.node.nodeType}
+        onChange={(v) => props.onUpdate({ nodeType: v as NodeType })}
+        options={Object.entries(NODE_TYPE_META).map(([key, m]) => ({
+          value: key,
+          label: `${m.label} - ${m.description}`
+        }))}
+      />
+
+      <hr className="border-gray-100" />
+
+      <TypeSpecificEditor node={props.node} onUpdate={props.onUpdate} />
+
+      <TagInput
+        label="Reads"
+        values={props.node.reads}
+        onChange={(reads) => props.onUpdate({ reads })}
+        colorClass="bg-dwdarkblue"
+      />
+
+      <TagInput
+        label="Writes"
+        values={props.node.writes}
+        onChange={(writes) => props.onUpdate({ writes })}
+        colorClass="bg-dwred"
+      />
+
+      {(props.node.nodeType === 'action' ||
+        props.node.nodeType === 'input' ||
+        props.node.nodeType === 'code') && (
+        <TagInput
+          label="Inputs"
+          values={props.node.inputs}
+          onChange={(inputs) => props.onUpdate({ inputs })}
+          colorClass="bg-yellow-500"
+        />
+      )}
+
+      {props.unresolvedReads.length > 0 && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded p-2 text-xs text-yellow-700">
+          <strong>Warning:</strong> No upstream node writes:{' '}
+          {props.unresolvedReads.join(', ')}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx b/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
new file mode 100644
index 000000000..df8df1bf5
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
@@ -0,0 +1,213 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef, useState, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  BoltIcon,
+  ArrowDownTrayIcon,
+  FlagIcon,
+  SparklesIcon,
+  GlobeAltIcon,
+  CodeBracketIcon,
+  SignalIcon,
+  ArrowPathIcon,
+  ArrowsRightLeftIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline';
+import { NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
+
+const NODE_TYPE_ICONS: Record<NodeType, React.ComponentType<any>> = {
+  action: BoltIcon,
+  input: ArrowDownTrayIcon,
+  result: FlagIcon,
+  llm_call: SparklesIcon,
+  api_call: GlobeAltIcon,
+  code: CodeBracketIcon,
+  streaming: SignalIcon,
+  loop: ArrowPathIcon,
+  router: ArrowsRightLeftIcon
+};
+
+type Category = 'all' | 'io' | 'logic' | 'integrations';
+
+const CATEGORIES: { id: Category; label: string; types: NodeType[] }[] = [
+  { id: 'all', label: 'All', types: [] },
+  { id: 'io', label: 'I/O', types: ['input', 'result', 'code'] },
+  { id: 'logic', label: 'Logic', types: ['action', 'loop', 'router'] },
+  { id: 'integrations', label: 'Integrations', types: ['llm_call', 'api_call', 'streaming'] }
+];
+
+export const NodeTypePicker = (props: {
+  onSelect: (nodeType: NodeType) => void;
+  onClose: () => void;
+  anchorRef?: React.RefObject<HTMLElement>;
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [search, setSearch] = useState('');
+  const [activeCategory, setActiveCategory] = useState<Category>('all');
+  const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+  // Continuously track anchor position so picker follows during pan/zoom
+  useEffect(() => {
+    let rafId: number;
+    const update = () => {
+      if (props.anchorRef?.current) {
+        const rect = props.anchorRef.current.getBoundingClientRect();
+        setPos((prev) => {
+          const newTop = rect.bottom + 4;
+          const newLeft = rect.left + rect.width / 2 - 144;
+          if (Math.abs(prev.top - newTop) < 0.5 && Math.abs(prev.left - newLeft) < 0.5) return prev;
+          return { top: newTop, left: newLeft };
+        });
+      }
+      rafId = requestAnimationFrame(update);
+    };
+    rafId = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(rafId);
+  }, [props.anchorRef]);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        props.onClose();
+      }
+    };
+    // Use setTimeout to avoid the opening click triggering close
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', handler);
+    }, 10);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', handler);
+    };
+  }, [props.onClose]);
+
+  useEffect(() => {
+    setTimeout(() => searchRef.current?.focus(), 50);
+  }, []);
+
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') props.onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [props.onClose]);
+
+  const filteredTypes = useMemo(() => {
+    const allTypes = Object.entries(NODE_TYPE_META) as [NodeType, (typeof NODE_TYPE_META)[NodeType]][];
+
+    return allTypes.filter(([type, meta]) => {
+      const matchesSearch =
+        !search ||
+        meta.label.toLowerCase().includes(search.toLowerCase()) ||
+        meta.description.toLowerCase().includes(search.toLowerCase()) ||
+        type.toLowerCase().includes(search.toLowerCase());
+
+      const matchesCategory =
+        activeCategory === 'all' ||
+        CATEGORIES.find((c) => c.id === activeCategory)?.types.includes(type);
+
+      return matchesSearch && matchesCategory;
+    });
+  }, [search, activeCategory]);
+
+  const content = (
+    <div
+      ref={ref}
+      className="fixed z-[9999] bg-white border border-gray-200 rounded-xl shadow-2xl w-72 overflow-hidden"
+      style={{ top: pos.top, left: Math.max(8, pos.left) }}
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      {/* Search */}
+      <div className="p-2 border-b border-gray-100">
+        <div className="flex items-center gap-2 bg-gray-50 rounded-lg px-2.5 py-1.5">
+          <MagnifyingGlassIcon className="h-4 w-4 text-gray-400 shrink-0" />
+          <input
+            ref={searchRef}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search steps..."
+            className="flex-1 bg-transparent text-sm outline-none placeholder-gray-400"
+          />
+        </div>
+      </div>
+
+      {/* Category tabs */}
+      {!search && (
+        <div className="flex px-2 pt-1.5 gap-0.5 border-b border-gray-100">
+          {CATEGORIES.map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setActiveCategory(cat.id)}
+              className={`px-2.5 py-1 text-xs rounded-t-md transition-colors ${
+                activeCategory === cat.id
+                  ? 'bg-gray-100 text-gray-900 font-medium'
+                  : 'text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Results */}
+      <div className="max-h-[280px] overflow-y-auto py-1">
+        {filteredTypes.length === 0 && (
+          <div className="px-3 py-4 text-xs text-gray-400 text-center">No matching steps</div>
+        )}
+        {filteredTypes.map(([type, meta]) => {
+          const Icon = NODE_TYPE_ICONS[type];
+          return (
+            <button
+              key={type}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                props.onSelect(type);
+                props.onClose();
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+              className="flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors"
+            >
+              <div
+                className={`w-8 h-8 rounded-lg flex items-center justify-center ${meta.color} ${meta.borderColor} border shrink-0`}
+              >
+                <Icon className="h-4 w-4 text-gray-600" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-gray-800">{meta.label}</div>
+                <div className="text-[11px] text-gray-400 truncate">{meta.description}</div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+};
diff --git a/telemetry/ui/src/components/routes/builder/edges/InlineAddButton.tsx b/telemetry/ui/src/components/routes/builder/edges/InlineAddButton.tsx
new file mode 100644
index 000000000..5f86b2dda
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/InlineAddButton.tsx
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useRef, useState } from 'react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { InsertContext } from '../../../../utils/builderTypes';
+import { NodeType } from '../../../../utils/codeGenerator';
+import { NodeTypePicker } from '../NodeTypePicker';
+
+export const InlineAddButton = React.memo(
+  (props: { context: InsertContext; onInsert: (nodeType: NodeType, ctx: InsertContext) => void }) => {
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const btnRef = useRef<HTMLButtonElement>(null);
+
+    return (
+      <div
+        className="relative flex items-center justify-center"
+        style={{ width: 20, height: 20, pointerEvents: 'all' }}
+      >
+        <button
+          ref={btnRef}
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            setPickerOpen(!pickerOpen);
+          }}
+          onMouseDown={(e) => e.stopPropagation()}
+          style={{ pointerEvents: 'all' }}
+          className={`w-[20px] h-[20px] rounded-md border bg-white flex items-center justify-center cursor-pointer transition-all z-10 ${
+            pickerOpen
+              ? 'border-blue-500 bg-blue-50 shadow-md'
+              : 'border-gray-300 hover:border-blue-400 hover:shadow-sm hover:bg-blue-50'
+          }`}
+        >
+          {!pickerOpen && <PlusIcon className="w-3 h-3 stroke-[3px] text-gray-500" />}
+        </button>
+        {pickerOpen && (
+          <NodeTypePicker
+            anchorRef={btnRef as React.RefObject<HTMLElement>}
+            onSelect={(nodeType) => props.onInsert(nodeType, props.context)}
+            onClose={() => setPickerOpen(false)}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+InlineAddButton.displayName = 'InlineAddButton';
diff --git a/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
new file mode 100644
index 000000000..9fb68e89a
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
@@ -0,0 +1,68 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps } from '@xyflow/react';
+import { CANVAS, ARC_LEFT_DOWN, ARC_RIGHT_UP, ARROW_DOWN } from '../../../../utils/flowLayout';
+import { BurrLoopReturnEdge, InsertLocation } from '../../../../utils/builderTypes';
+import { InlineAddButton } from './InlineAddButton';
+
+export const LoopReturnEdgeComponent = ({
+  sourceX,
+  sourceY,
+  targetX,
+  data,
+  id
+}: EdgeProps & BurrLoopReturnEdge) => {
+  const hLength = Math.abs(sourceX - targetX) - 2 * CANVAS.ARC;
+  const vReturn = data.verticalSpaceBetweenReturnNodeStartAndEnd;
+  const endLineLength = CANVAS.VSPACE - 2 * CANVAS.STEP_LINE_GAP + 8;
+
+  const path = `
+    M ${sourceX - 0.5} ${sourceY - CANVAS.STEP_LINE_GAP}
+    v 1
+    ${ARC_LEFT_DOWN} h -${hLength}
+    ${ARC_RIGHT_UP} v -${vReturn}
+    a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 ${CANVAS.ARC},-${CANVAS.ARC}
+    h ${hLength / 2 - 2 * CANVAS.ARC}
+    m-5 -6 l6 6 m-6 0 m6 0 l-6 6 m3 -6
+    M ${sourceX - CANVAS.ARC - hLength / 2} ${sourceY + CANVAS.STEP_LINE_GAP + CANVAS.ARC / 2}
+    v${endLineLength} ${data.drawArrowHeadAfterEnd ? ARROW_DOWN : ''}
+  `;
+
+  const buttonX = sourceX - hLength / 2 - CANVAS.ARC - CANVAS.ADD_BUTTON_SIZE / 2;
+  const buttonY = sourceY + endLineLength / 2;
+
+  return (
+    <>
+      <BaseEdge path={path} style={{ strokeWidth: `${CANVAS.LINE_WIDTH}px` }} />
+      <foreignObject
+        x={buttonX}
+        y={buttonY}
+        width={CANVAS.ADD_BUTTON_SIZE}
+        height={CANVAS.ADD_BUTTON_SIZE}
+        className="overflow-visible"
+      >
+        <InlineAddButton
+          context={{ location: InsertLocation.AFTER, parentStepId: data.parentStepId }}
+          onInsert={(data as any).onInsert || (() => {})}
+        />
+      </foreignObject>
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
new file mode 100644
index 000000000..af4b5aa01
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
@@ -0,0 +1,60 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps } from '@xyflow/react';
+import { CANVAS, ARC_RIGHT_DOWN, ARC_RIGHT, ARROW_DOWN } from '../../../../utils/flowLayout';
+import { BurrLoopStartEdge, InsertLocation } from '../../../../utils/builderTypes';
+import { InlineAddButton } from './InlineAddButton';
+
+export const LoopStartEdgeComponent = ({
+  sourceX,
+  sourceY,
+  targetX,
+  data,
+  id
+}: EdgeProps & BurrLoopStartEdge) => {
+  const startY = sourceY + CANVAS.STEP_LINE_GAP;
+  const vHalf = (CANVAS.VSPACE - 2 * CANVAS.STEP_LINE_GAP) / 2;
+  const hLength = Math.abs(targetX - sourceX) - 2 * CANVAS.ARC;
+
+  const path = `M ${sourceX} ${startY} v${vHalf} ${ARC_RIGHT_DOWN} h${hLength} ${ARC_RIGHT} v${CANVAS.VSPACE} ${!data.isLoopEmpty ? ARROW_DOWN : ''}`;
+
+  const buttonX = sourceX - CANVAS.ADD_BUTTON_SIZE / 2 + hLength + CANVAS.ARC * 2;
+  const buttonY = startY + vHalf + CANVAS.ARC;
+
+  return (
+    <>
+      <BaseEdge path={path} style={{ strokeWidth: `${CANVAS.LINE_WIDTH}px` }} />
+      {!data.isLoopEmpty && (
+        <foreignObject
+          x={buttonX}
+          y={buttonY}
+          width={CANVAS.ADD_BUTTON_SIZE}
+          height={CANVAS.ADD_BUTTON_SIZE}
+          className="overflow-visible cursor-default"
+        >
+          <InlineAddButton
+            context={{ location: InsertLocation.INSIDE_LOOP, loopStepId: data.parentStepId }}
+            onInsert={(data as any).onInsert || (() => {})}
+          />
+        </foreignObject>
+      )}
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
new file mode 100644
index 000000000..6dd5b2adf
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
@@ -0,0 +1,83 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps } from '@xyflow/react';
+import {
+  CANVAS,
+  ARC_RIGHT_DOWN,
+  ARC_LEFT_DOWN,
+  ARC_RIGHT,
+  ARC_LEFT,
+  ARROW_DOWN
+} from '../../../../utils/flowLayout';
+import { BurrRouterEndEdge, InsertLocation } from '../../../../utils/builderTypes';
+import { InlineAddButton } from './InlineAddButton';
+
+export const RouterEndEdgeComponent = ({
+  sourceX,
+  targetX,
+  targetY,
+  sourceY,
+  data,
+  id
+}: EdgeProps & BurrRouterEndEdge) => {
+  const vLine = CANVAS.VSPACE - 2 * CANVAS.STEP_LINE_GAP;
+  const hLength =
+    (Math.abs(targetX - sourceX) - 2 * CANVAS.ARC) * (targetX > sourceX ? 1 : -1);
+  const dist = Math.abs(targetX - sourceX);
+
+  let path = `M ${sourceX - 0.5} ${sourceY - CANVAS.STEP_LINE_GAP}`;
+  path += ` v ${data.verticalSpaceBetweenLastNodeInBranchAndEndLine}`;
+
+  if (dist >= CANVAS.ARC) {
+    path += targetX > sourceX ? ` ${ARC_RIGHT_DOWN}` : ` ${ARC_LEFT_DOWN}`;
+  } else {
+    path += ` v ${CANVAS.ARC + CANVAS.STEP_LINE_GAP + 2}`;
+  }
+
+  if (data.drawHorizontalLine) {
+    path += ` h ${hLength}`;
+    path += targetX > sourceX ? ` ${ARC_RIGHT}` : ` ${ARC_LEFT}`;
+  }
+
+  if (data.drawEndingVerticalLine) {
+    path += ` v${vLine}`;
+    if (!data.isNextStepEmpty) path += ` ${ARROW_DOWN}`;
+  }
+
+  return (
+    <>
+      <BaseEdge path={path} style={{ strokeWidth: `${CANVAS.LINE_WIDTH}px` }} />
+      {data.drawEndingVerticalLine && data.routerStepId && (
+        <foreignObject
+          x={targetX - CANVAS.ADD_BUTTON_SIZE / 2 - CANVAS.LINE_WIDTH / 2}
+          y={targetY - vLine}
+          width={CANVAS.ADD_BUTTON_SIZE}
+          height={CANVAS.ADD_BUTTON_SIZE}
+          className="overflow-visible"
+        >
+          <InlineAddButton
+            context={{ location: InsertLocation.AFTER, parentStepId: data.routerStepId }}
+            onInsert={(data as any).onInsert || (() => {})}
+          />
+        </foreignObject>
+      )}
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
new file mode 100644
index 000000000..f5f572b49
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
@@ -0,0 +1,92 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps } from '@xyflow/react';
+import { CANVAS, ARC_LEFT_UP, ARC_RIGHT_UP, ARROW_DOWN } from '../../../../utils/flowLayout';
+import { BurrRouterStartEdge, InsertLocation } from '../../../../utils/builderTypes';
+import { InlineAddButton } from './InlineAddButton';
+
+export const RouterStartEdgeComponent = ({
+  sourceX,
+  targetX,
+  targetY,
+  data,
+  id
+}: EdgeProps & BurrRouterStartEdge) => {
+  const vLine = CANVAS.VSPACE - CANVAS.STEP_LINE_GAP + 30;
+  const dist = Math.abs(targetX - sourceX);
+
+  let path = `M ${targetX} ${targetY - CANVAS.STEP_LINE_GAP}`;
+  if (!data.isBranchEmpty) path += ` ${ARROW_DOWN}`;
+  path += ` v -${vLine}`;
+
+  if (dist >= CANVAS.ARC) {
+    path += sourceX > targetX ? ' a12,12 0 0,1 12,-12' : ' a-12,-12 0 0,0 -12,-12';
+    if (data.drawHorizontalLine) {
+      const hLen = (dist + 3 - 2 * CANVAS.ARC) * (sourceX > targetX ? 1 : -1);
+      path += ` h ${hLen}`;
+      path += sourceX > targetX ? ` ${ARC_LEFT_UP}` : ` ${ARC_RIGHT_UP}`;
+    }
+    if (data.drawStartingVerticalLine) {
+      const finalV = CANVAS.VSPACE / 2 - 2 * CANVAS.STEP_LINE_GAP;
+      path += ` v -${finalV}`;
+    }
+  } else {
+    path += ` v -${CANVAS.ARC + CANVAS.STEP_LINE_GAP}`;
+  }
+
+  const labelWidth = CANVAS.STEP_WIDTH - 10;
+  const labelX = targetX - labelWidth / 2;
+  const labelY = targetY - vLine / 2 - CANVAS.ADD_BUTTON_SIZE - 30;
+
+  return (
+    <>
+      <BaseEdge path={path} style={{ strokeWidth: `${CANVAS.LINE_WIDTH}px` }} />
+      {!data.isBranchEmpty && (
+        <foreignObject
+          x={targetX - CANVAS.ADD_BUTTON_SIZE / 2}
+          y={targetY - vLine / 2}
+          width={CANVAS.ADD_BUTTON_SIZE}
+          height={CANVAS.ADD_BUTTON_SIZE}
+          className="overflow-visible"
+        >
+          <InlineAddButton
+            context={{
+              location: InsertLocation.INSIDE_BRANCH,
+              routerStepId: data.parentStepId,
+              branchIndex: data.branchIndex
+            }}
+            onInsert={(data as any).onInsert || (() => {})}
+          />
+        </foreignObject>
+      )}
+      <foreignObject
+        width={labelWidth}
+        height={42}
+        x={labelX}
+        y={labelY}
+        className="flex items-center"
+      >
+        <div className="text-center text-xs font-medium text-gray-500 bg-white px-2 py-1 rounded border border-gray-200 truncate">
+          {data.label}
+        </div>
+      </foreignObject>
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
new file mode 100644
index 000000000..5fdd419a2
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BaseEdge, EdgeProps } from '@xyflow/react';
+import { CANVAS, ARROW_DOWN } from '../../../../utils/flowLayout';
+import { BurrStraightLineEdge, InsertLocation } from '../../../../utils/builderTypes';
+import { InlineAddButton } from './InlineAddButton';
+
+export const StraightLineEdgeComponent = ({
+  sourceX,
+  sourceY,
+  targetY,
+  data,
+  id
+}: EdgeProps & BurrStraightLineEdge) => {
+  const lineLength = targetY - sourceY;
+  const path = `M ${sourceX} ${sourceY} v${lineLength} ${data.drawArrowHead ? ARROW_DOWN : ''}`;
+  const midY = sourceY + lineLength / 2 - CANVAS.ADD_BUTTON_SIZE / 2;
+
+  return (
+    <>
+      <BaseEdge path={path} style={{ strokeWidth: `${CANVAS.LINE_WIDTH}px` }} />
+      {!data.hideAddButton && (
+        <foreignObject
+          x={sourceX - CANVAS.ADD_BUTTON_SIZE / 2}
+          y={midY}
+          width={CANVAS.ADD_BUTTON_SIZE}
+          height={CANVAS.ADD_BUTTON_SIZE}
+          className="overflow-visible"
+          style={{ pointerEvents: 'all' }}
+        >
+          <InlineAddButton
+            context={{ location: InsertLocation.AFTER, parentStepId: data.parentStepId }}
+            onInsert={(data as any).onInsert || (() => {})}
+          />
+        </foreignObject>
+      )}
+    </>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx b/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
new file mode 100644
index 000000000..ffa31b90d
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
@@ -0,0 +1,77 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useRef, useState } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+import { CANVAS } from '../../../../utils/flowLayout';
+import { BurrBigAddButtonNode, InsertContext } from '../../../../utils/builderTypes';
+import { NodeType } from '../../../../utils/codeGenerator';
+import { NodeTypePicker } from '../NodeTypePicker';
+
+const HANDLE_STYLE = { opacity: 0, cursor: 'default' };
+
+const BigAddButtonComponent = React.memo(
+  ({ data, id }: { data: BurrBigAddButtonNode['data'] & { onInsert?: (nodeType: NodeType, ctx: InsertContext) => void }; id: string }) => {
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const btnRef = useRef<HTMLButtonElement>(null);
+
+    return (
+      <>
+        <div
+          style={{ width: CANVAS.STEP_WIDTH, height: CANVAS.STEP_HEIGHT }}
+          className="flex items-center justify-center"
+        >
+          <div className="relative">
+            <button
+              ref={btnRef}
+              onClick={(e) => {
+                e.stopPropagation();
+                setPickerOpen(!pickerOpen);
+              }}
+              onMouseDown={(e) => e.stopPropagation()}
+              style={{ width: CANVAS.BIG_ADD_BUTTON_SIZE, height: CANVAS.BIG_ADD_BUTTON_SIZE }}
+              className={`rounded-lg border bg-white flex items-center justify-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-all ${
+                pickerOpen ? 'border-blue-500 bg-blue-50 shadow-md' : 'border-gray-300'
+              }`}
+            >
+              <PlusIcon className="w-6 h-6 text-gray-400" />
+            </button>
+            {pickerOpen && (
+              <NodeTypePicker
+                anchorRef={btnRef as React.RefObject<HTMLElement>}
+                onSelect={(nodeType) => {
+                  if (data.onInsert) {
+                    data.onInsert(nodeType, data as InsertContext);
+                  }
+                }}
+                onClose={() => setPickerOpen(false)}
+              />
+            )}
+          </div>
+        </div>
+        <Handle type="target" position={Position.Top} style={HANDLE_STYLE} />
+        <Handle type="source" position={Position.Bottom} style={HANDLE_STYLE} />
+      </>
+    );
+  }
+);
+
+BigAddButtonComponent.displayName = 'BigAddButtonComponent';
+export { BigAddButtonComponent };
diff --git a/telemetry/ui/src/components/routes/builder/nodes/GraphEndWidget.tsx b/telemetry/ui/src/components/routes/builder/nodes/GraphEndWidget.tsx
new file mode 100644
index 000000000..7073d5de0
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/nodes/GraphEndWidget.tsx
@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Handle, Position } from '@xyflow/react';
+
+const HANDLE_STYLE = { opacity: 0, cursor: 'default' };
+
+const GraphEndWidgetComponent = () => {
+  return (
+    <>
+      <div className="h-px w-px" />
+      <Handle type="target" position={Position.Top} style={HANDLE_STYLE} />
+      <Handle type="source" position={Position.Bottom} style={HANDLE_STYLE} />
+    </>
+  );
+};
+
+GraphEndWidgetComponent.displayName = 'GraphEndWidgetComponent';
+export { GraphEndWidgetComponent };
diff --git a/telemetry/ui/src/components/routes/builder/nodes/LoopReturnNode.tsx b/telemetry/ui/src/components/routes/builder/nodes/LoopReturnNode.tsx
new file mode 100644
index 000000000..b4005e3f5
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/nodes/LoopReturnNode.tsx
@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Handle, Position } from '@xyflow/react';
+
+const HANDLE_STYLE = { opacity: 0, cursor: 'default' };
+
+const LoopReturnNodeComponent = () => {
+  return (
+    <>
+      <div className="h-px w-px" />
+      <Handle type="target" position={Position.Top} style={HANDLE_STYLE} />
+      <Handle type="source" position={Position.Bottom} style={HANDLE_STYLE} />
+    </>
+  );
+};
+
+LoopReturnNodeComponent.displayName = 'LoopReturnNodeComponent';
+export { LoopReturnNodeComponent };
diff --git a/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx b/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
new file mode 100644
index 000000000..9ee4f23d5
--- /dev/null
+++ b/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
@@ -0,0 +1,104 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import {
+  BoltIcon,
+  ArrowDownTrayIcon,
+  FlagIcon,
+  SparklesIcon,
+  GlobeAltIcon,
+  CodeBracketIcon,
+  SignalIcon,
+  ArrowPathIcon,
+  ArrowsRightLeftIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/react/24/outline';
+import { NodeType, NODE_TYPE_META } from '../../../../utils/codeGenerator';
+import { CANVAS } from '../../../../utils/flowLayout';
+import { BurrStepNode } from '../../../../utils/builderTypes';
+import { Chip } from '../../../common/chip';
+
+const NODE_ICONS: Record<NodeType, React.ComponentType<any>> = {
+  action: BoltIcon,
+  input: ArrowDownTrayIcon,
+  result: FlagIcon,
+  llm_call: SparklesIcon,
+  api_call: GlobeAltIcon,
+  code: CodeBracketIcon,
+  streaming: SignalIcon,
+  loop: ArrowPathIcon,
+  router: ArrowsRightLeftIcon
+};
+
+const HANDLE_STYLE = { opacity: 0, cursor: 'default' };
+
+const StepNodeComponent = React.memo(
+  ({ data }: { data: BurrStepNode['data'] }) => {
+    const meta = NODE_TYPE_META[data.nodeType as NodeType] || NODE_TYPE_META.action;
+    const Icon = NODE_ICONS[data.nodeType as NodeType] || BoltIcon;
+
+    return (
+      <div
+        style={{ width: CANVAS.STEP_WIDTH, height: CANVAS.STEP_HEIGHT }}
+        className={`rounded-lg border-2 cursor-pointer overflow-hidden transition-all ${meta.color} ${
+          data.isSelected ? 'border-purple-500 ring-2 ring-purple-200' : meta.borderColor
+        } hover:border-purple-300`}
+        onClick={data.onSelect}
+      >
+        <div className="flex items-center gap-2 h-full px-3">
+          <div className={`w-9 h-9 rounded-md flex items-center justify-center shrink-0 ${meta.color} border ${meta.borderColor}`}>
+            <Icon className="h-5 w-5 text-gray-600" />
+          </div>
+          <div className="flex-1 min-w-0 overflow-hidden">
+            <div className="flex items-center gap-1">
+              <span className="text-sm font-semibold text-gray-800 truncate">{data.name}</span>
+              {data.unresolvedReads.length > 0 && (
+                <ExclamationTriangleIcon
+                  className="h-3.5 w-3.5 text-yellow-500 shrink-0"
+                  title={`Unresolved: ${data.unresolvedReads.join(', ')}`}
+                />
+              )}
+            </div>
+            <div className="text-[10px] text-gray-400">{meta.label}</div>
+            {(data.reads.length > 0 || data.writes.length > 0) && (
+              <div className="flex flex-wrap gap-0.5 mt-0.5">
+                {data.reads.slice(0, 2).map((r) => (
+                  <Chip key={r} label={r} chipType="stateRead" className="!text-[7px] !p-0 !px-1" />
+                ))}
+                {data.writes.slice(0, 2).map((w) => (
+                  <Chip key={w} label={w} chipType="stateWrite" className="!text-[7px] !p-0 !px-1" />
+                ))}
+                {data.reads.length + data.writes.length > 4 && (
+                  <span className="text-[8px] text-gray-400">+{data.reads.length + data.writes.length - 4}</span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+        <Handle type="target" position={Position.Top} style={HANDLE_STYLE} />
+        <Handle type="source" position={Position.Bottom} style={HANDLE_STYLE} />
+      </div>
+    );
+  }
+);
+
+StepNodeComponent.displayName = 'StepNodeComponent';
+export { StepNodeComponent };
diff --git a/telemetry/ui/src/components/routes/project/ActivityBar.tsx b/telemetry/ui/src/components/routes/project/ActivityBar.tsx
new file mode 100644
index 000000000..f7b789860
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/ActivityBar.tsx
@@ -0,0 +1,74 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  DocumentTextIcon,
+  Square2StackIcon,
+  MagnifyingGlassIcon,
+  CommandLineIcon
+} from '@heroicons/react/24/outline';
+import { classNames } from '../../../utils/tailwind';
+import { ActivityPanel, useProjectWorkspace } from './ProjectWorkspaceContext';
+
+const items: { id: ActivityPanel | 'terminal'; icon: React.ComponentType<any>; label: string }[] = [
+  { id: 'files', icon: DocumentTextIcon, label: 'Files' },
+  { id: 'tracking', icon: Square2StackIcon, label: 'Tracking' },
+  { id: 'search', icon: MagnifyingGlassIcon, label: 'Search' },
+  { id: 'terminal', icon: CommandLineIcon, label: 'Terminal' }
+];
+
+export const ActivityBar = () => {
+  const { activePanel, setActivePanel, sidePanelOpen, setSidePanelOpen, terminalVisible, setTerminalVisible } =
+    useProjectWorkspace();
+
+  return (
+    <div className="w-12 shrink-0 bg-gray-50 border-r border-gray-200 flex flex-col items-center py-2 gap-1">
+      {items.map((item) => {
+        const isTerminal = item.id === 'terminal';
+        const isActive = isTerminal ? terminalVisible : activePanel === item.id && sidePanelOpen;
+        return (
+          <button
+            key={item.id}
+            onClick={() => {
+              if (isTerminal) {
+                setTerminalVisible(!terminalVisible);
+              } else {
+                if (activePanel === item.id && sidePanelOpen) {
+                  setSidePanelOpen(false);
+                } else {
+                  setActivePanel(item.id as ActivityPanel);
+                  setSidePanelOpen(true);
+                }
+              }
+            }}
+            className={classNames(
+              'w-10 h-10 flex items-center justify-center rounded-md transition-colors',
+              isActive
+                ? 'text-gray-900 bg-white shadow-sm border border-gray-200'
+                : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'
+            )}
+            title={item.label}
+          >
+            <item.icon className="h-5 w-5" />
+          </button>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/LinkWorkspacePrompt.tsx b/telemetry/ui/src/components/routes/project/LinkWorkspacePrompt.tsx
new file mode 100644
index 000000000..448332485
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/LinkWorkspacePrompt.tsx
@@ -0,0 +1,80 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState } from 'react';
+import { FolderIcon } from '@heroicons/react/24/outline';
+import { workspaceApi } from '../../../api/workspaceApi';
+import { useProjectWorkspace } from './ProjectWorkspaceContext';
+
+export const LinkWorkspacePrompt = () => {
+  const { projectId, setWorkspacePath } = useProjectWorkspace();
+  const [path, setPath] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleLink = async () => {
+    if (!path) return;
+    setError('');
+    setLoading(true);
+    try {
+      const info = await workspaceApi.setWorkspaceLink(projectId, path);
+      if (info.workspace_path) {
+        setWorkspacePath(info.workspace_path);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to link workspace');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="max-w-md w-full p-8">
+        <div className="flex items-center gap-3 mb-4">
+          <FolderIcon className="h-8 w-8 text-gray-400" />
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">Link a workspace</h2>
+            <p className="text-sm text-gray-500">
+              Connect a code directory to browse files and run scripts.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-2 mt-4">
+          <input
+            type="text"
+            value={path}
+            onChange={(e) => setPath(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleLink()}
+            placeholder="/absolute/path/to/project"
+            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
+          />
+          <button
+            onClick={handleLink}
+            disabled={!path || loading}
+            className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {loading ? '...' : 'Link'}
+          </button>
+        </div>
+        {error && <p className="text-sm text-red-600 mt-2">{error}</p>}
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/ProjectWorkspaceContext.tsx b/telemetry/ui/src/components/routes/project/ProjectWorkspaceContext.tsx
new file mode 100644
index 000000000..107a53a08
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/ProjectWorkspaceContext.tsx
@@ -0,0 +1,134 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export type TabType = 'file' | 'tracking';
+
+export type Tab = {
+  id: string;
+  type: TabType;
+  label: string;
+  filePath?: string;
+  appId?: string;
+  partitionKey?: string;
+};
+
+export type ActivityPanel = 'files' | 'tracking' | 'search';
+
+type ProjectWorkspaceState = {
+  projectId: string;
+  workspacePath: string | null;
+  setWorkspacePath: (p: string | null) => void;
+  tabs: Tab[];
+  activeTabId: string | null;
+  openTab: (tab: Tab) => void;
+  closeTab: (id: string) => void;
+  setActiveTab: (id: string) => void;
+  activePanel: ActivityPanel;
+  setActivePanel: (p: ActivityPanel) => void;
+  terminalVisible: boolean;
+  setTerminalVisible: (v: boolean) => void;
+  sidePanelOpen: boolean;
+  setSidePanelOpen: (v: boolean) => void;
+};
+
+const ProjectWorkspaceCtx = createContext<ProjectWorkspaceState>(null!);
+
+export const useProjectWorkspace = () => useContext(ProjectWorkspaceCtx);
+
+export const ProjectWorkspaceProvider = (props: {
+  projectId: string;
+  initialWorkspacePath: string | null;
+  initialPartitionKey?: string;
+  initialAppId?: string;
+  children: ReactNode;
+}) => {
+  const [workspacePath, setWorkspacePath] = useState<string | null>(props.initialWorkspacePath);
+  const [tabs, setTabs] = useState<Tab[]>(() => {
+    if (props.initialAppId && props.initialPartitionKey) {
+      return [
+        {
+          id: `tracking:${props.initialAppId}`,
+          type: 'tracking' as TabType,
+          label: props.initialAppId,
+          appId: props.initialAppId,
+          partitionKey: props.initialPartitionKey
+        }
+      ];
+    }
+    return [];
+  });
+  const [activeTabId, setActiveTabId] = useState<string | null>(
+    props.initialAppId ? `tracking:${props.initialAppId}` : null
+  );
+  const [activePanel, setActivePanel] = useState<ActivityPanel>(
+    props.initialAppId ? 'tracking' : 'files'
+  );
+  const [terminalVisible, setTerminalVisible] = useState(false);
+  const [sidePanelOpen, setSidePanelOpen] = useState(true);
+
+  const openTab = useCallback(
+    (tab: Tab) => {
+      setTabs((prev) => {
+        const existing = prev.find((t) => t.id === tab.id);
+        if (existing) return prev;
+        return [...prev, tab];
+      });
+      setActiveTabId(tab.id);
+    },
+    []
+  );
+
+  const closeTab = useCallback(
+    (id: string) => {
+      setTabs((prev) => {
+        const filtered = prev.filter((t) => t.id !== id);
+        if (activeTabId === id) {
+          setActiveTabId(filtered.length > 0 ? filtered[filtered.length - 1].id : null);
+        }
+        return filtered;
+      });
+    },
+    [activeTabId]
+  );
+
+  return (
+    <ProjectWorkspaceCtx.Provider
+      value={{
+        projectId: props.projectId,
+        workspacePath,
+        setWorkspacePath,
+        tabs,
+        activeTabId,
+        openTab,
+        closeTab,
+        setActiveTab: setActiveTabId,
+        activePanel,
+        setActivePanel,
+        terminalVisible,
+        setTerminalVisible,
+        sidePanelOpen,
+        setSidePanelOpen
+      }}
+    >
+      {props.children}
+    </ProjectWorkspaceCtx.Provider>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/ProjectWorkspaceView.tsx b/telemetry/ui/src/components/routes/project/ProjectWorkspaceView.tsx
new file mode 100644
index 000000000..5c0375bd6
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/ProjectWorkspaceView.tsx
@@ -0,0 +1,146 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { workspaceApi, ProcessInfo } from '../../../api/workspaceApi';
+import { ProjectWorkspaceProvider, useProjectWorkspace } from './ProjectWorkspaceContext';
+import { ActivityBar } from './ActivityBar';
+import { SidePanel } from './SidePanel';
+import { TabBar } from './TabBar';
+import { LinkWorkspacePrompt } from './LinkWorkspacePrompt';
+import { CodeViewer } from '../workspace/CodeViewer';
+import { RunTerminal } from '../workspace/RunTerminal';
+import { AppView } from '../app/AppView';
+import { Loading } from '../../common/loading';
+
+const EditorContent = () => {
+  const { projectId, tabs, activeTabId, workspacePath } = useProjectWorkspace();
+  const activeTab = tabs.find((t) => t.id === activeTabId);
+
+  if (!activeTab) {
+    if (!workspacePath) {
+      return <LinkWorkspacePrompt />;
+    }
+    return (
+      <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+        Open a file or select a run from the sidebar
+      </div>
+    );
+  }
+
+  if (activeTab.type === 'file' && activeTab.filePath && workspacePath) {
+    return <CodeViewer workspace={workspacePath} filePath={activeTab.filePath} />;
+  }
+
+  if (activeTab.type === 'tracking' && activeTab.appId) {
+    return (
+      <div className="h-full overflow-auto">
+        <AppView
+          projectId={projectId}
+          appId={activeTab.appId}
+          partitionKey={activeTab.partitionKey || null}
+          orientation="stacked_vertical"
+          defaultAutoRefresh={false}
+          enableFullScreenStepView={true}
+          enableMinimizedStepView={true}
+          allowAnnotations={true}
+        />
+      </div>
+    );
+  }
+
+  return null;
+};
+
+const TerminalPanel = () => {
+  const { terminalVisible, setTerminalVisible } = useProjectWorkspace();
+  const [activeProcess, setActiveProcess] = useState<ProcessInfo | null>(null);
+
+  useEffect(() => {
+    const handler = () => {
+      const stored = sessionStorage.getItem('burr:active_process');
+      if (stored) {
+        setActiveProcess(JSON.parse(stored));
+        sessionStorage.removeItem('burr:active_process');
+      }
+    };
+    window.addEventListener('burr:process_started', handler);
+    return () => window.removeEventListener('burr:process_started', handler);
+  }, []);
+
+  if (!terminalVisible || !activeProcess) return null;
+
+  return (
+    <div className="h-64 border-t border-gray-200 shrink-0">
+      <RunTerminal
+        process={activeProcess}
+        onStopped={() => {
+          setActiveProcess(null);
+          setTerminalVisible(false);
+        }}
+      />
+    </div>
+  );
+};
+
+const ProjectWorkspaceInner = () => {
+  return (
+    <div className="flex h-full">
+      <ActivityBar />
+      <SidePanel />
+      <div className="flex-1 flex flex-col min-w-0">
+        <TabBar />
+        <div className="flex-1 min-h-0 overflow-hidden">
+          <EditorContent />
+        </div>
+        <TerminalPanel />
+      </div>
+    </div>
+  );
+};
+
+export const ProjectWorkspaceView = () => {
+  const { projectId, partitionKey, appId } = useParams<{
+    projectId: string;
+    partitionKey?: string;
+    appId?: string;
+  }>();
+
+  const { data: linkInfo, isLoading } = useQuery({
+    queryKey: ['workspace-link', projectId],
+    queryFn: () => workspaceApi.getWorkspaceLink(projectId!),
+    enabled: !!projectId
+  });
+
+  if (!projectId) return null;
+  if (isLoading) return <Loading />;
+
+  return (
+    <ProjectWorkspaceProvider
+      projectId={projectId}
+      initialWorkspacePath={linkInfo?.workspace_path || null}
+      initialPartitionKey={partitionKey}
+      initialAppId={appId}
+    >
+      <ProjectWorkspaceInner />
+    </ProjectWorkspaceProvider>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/SidePanel.tsx b/telemetry/ui/src/components/routes/project/SidePanel.tsx
new file mode 100644
index 000000000..2cc189ed9
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/SidePanel.tsx
@@ -0,0 +1,118 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useProjectWorkspace } from './ProjectWorkspaceContext';
+import { FileExplorer } from '../workspace/FileExplorer';
+import { TrackingSidePanel } from './TrackingSidePanel';
+import { FileEntry, workspaceApi } from '../../../api/workspaceApi';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+
+const FilesSidePanel = () => {
+  const { workspacePath, openTab, terminalVisible, setTerminalVisible } = useProjectWorkspace();
+  const [rootEntries, setRootEntries] = useState<FileEntry[]>([]);
+
+  useEffect(() => {
+    if (workspacePath) {
+      workspaceApi.getFileTree(workspacePath).then(setRootEntries);
+    }
+  }, [workspacePath]);
+
+  if (!workspacePath) {
+    return <div className="px-3 py-4 text-xs text-gray-400">No workspace linked</div>;
+  }
+
+  return (
+    <FileExplorer
+      workspace={workspacePath}
+      rootEntries={rootEntries}
+      onSelectFile={(path) => {
+        const name = path.split('/').pop() || path;
+        openTab({ id: `file:${path}`, type: 'file', label: name, filePath: path });
+      }}
+      onRunScript={async (path) => {
+        try {
+          const proc = await workspaceApi.runScript(workspacePath, path);
+          setTerminalVisible(true);
+          // Store process info in sessionStorage for the terminal to pick up
+          sessionStorage.setItem('burr:active_process', JSON.stringify(proc));
+          window.dispatchEvent(new Event('burr:process_started'));
+        } catch (err) {
+          alert(err instanceof Error ? err.message : 'Failed to run script');
+        }
+      }}
+    />
+  );
+};
+
+const SearchSidePanel = () => {
+  const { workspacePath } = useProjectWorkspace();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<FileEntry[]>([]);
+  const { openTab } = useProjectWorkspace();
+
+  const doSearch = async () => {
+    if (!workspacePath || !query) return;
+    const apps = await workspaceApi.scanBurrApps(workspacePath);
+    setResults(apps.filter((f) => f.name.toLowerCase().includes(query.toLowerCase())));
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 py-2 border-b border-gray-200">
+        <div className="flex items-center gap-1 bg-gray-100 rounded-md px-2 py-1">
+          <MagnifyingGlassIcon className="h-4 w-4 text-gray-400 shrink-0" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && doSearch()}
+            placeholder="Search files..."
+            className="flex-1 bg-transparent text-sm outline-none"
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {results.map((f) => (
+          <button
+            key={f.path}
+            onClick={() => openTab({ id: `file:${f.path}`, type: 'file', label: f.name, filePath: f.path })}
+            className="w-full text-left px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 truncate"
+          >
+            {f.path}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const SidePanel = () => {
+  const { activePanel, sidePanelOpen } = useProjectWorkspace();
+
+  if (!sidePanelOpen) return null;
+
+  return (
+    <div className="w-64 shrink-0 border-r border-gray-200 flex flex-col overflow-hidden bg-white">
+      {activePanel === 'files' && <FilesSidePanel />}
+      {activePanel === 'tracking' && <TrackingSidePanel />}
+      {activePanel === 'search' && <SearchSidePanel />}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/TabBar.tsx b/telemetry/ui/src/components/routes/project/TabBar.tsx
new file mode 100644
index 000000000..7963220cb
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/TabBar.tsx
@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { XMarkIcon, DocumentTextIcon, Square2StackIcon } from '@heroicons/react/24/outline';
+import { classNames } from '../../../utils/tailwind';
+import { useProjectWorkspace } from './ProjectWorkspaceContext';
+
+export const TabBar = () => {
+  const { tabs, activeTabId, setActiveTab, closeTab } = useProjectWorkspace();
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className="flex items-center bg-gray-50 border-b border-gray-200 overflow-x-auto shrink-0">
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeTabId;
+        const Icon = tab.type === 'file' ? DocumentTextIcon : Square2StackIcon;
+        return (
+          <div
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            onAuxClick={(e) => {
+              if (e.button === 1) closeTab(tab.id);
+            }}
+            className={classNames(
+              'flex items-center gap-1.5 px-3 py-1.5 text-xs cursor-pointer border-r border-gray-200 select-none shrink-0',
+              isActive
+                ? 'bg-white text-gray-900 border-b-2 border-b-blue-500'
+                : 'text-gray-500 hover:bg-gray-100'
+            )}
+          >
+            <Icon className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate max-w-[140px]">{tab.label}</span>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                closeTab(tab.id);
+              }}
+              className="ml-1 p-0.5 rounded hover:bg-gray-200"
+            >
+              <XMarkIcon className="h-3 w-3" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/project/TrackingSidePanel.tsx b/telemetry/ui/src/components/routes/project/TrackingSidePanel.tsx
new file mode 100644
index 000000000..8eb81f34c
--- /dev/null
+++ b/telemetry/ui/src/components/routes/project/TrackingSidePanel.tsx
@@ -0,0 +1,76 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { DefaultService } from '../../../api';
+import { useProjectWorkspace } from './ProjectWorkspaceContext';
+import { Loading } from '../../common/loading';
+import { DateTimeDisplay } from '../../common/dates';
+
+const SENTINEL = '__none__';
+
+export const TrackingSidePanel = () => {
+  const { projectId, openTab } = useProjectWorkspace();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['apps', projectId, SENTINEL, 0, 100],
+    queryFn: () =>
+      DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(projectId, SENTINEL, 100, 0)
+  });
+
+  if (isLoading) return <Loading />;
+
+  const apps = data?.applications || [];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-3 py-2 border-b border-gray-200">
+        <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wide">Runs</h3>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {apps.length === 0 && (
+          <div className="px-3 py-4 text-xs text-gray-400">No runs yet</div>
+        )}
+        {apps.map((app) => (
+          <button
+            key={app.app_id}
+            onClick={() =>
+              openTab({
+                id: `tracking:${app.app_id}`,
+                type: 'tracking',
+                label: app.app_id,
+                appId: app.app_id,
+                partitionKey: app.partition_key || undefined
+              })
+            }
+            className="w-full text-left px-3 py-2 hover:bg-gray-50 border-b border-gray-100 transition-colors"
+          >
+            <div className="text-sm text-gray-700 truncate font-mono">{app.app_id}</div>
+            <div className="flex items-center gap-2 mt-0.5">
+              <span className="text-xs text-gray-400">{app.num_steps} steps</span>
+              <span className="text-xs text-gray-400">
+                <DateTimeDisplay date={app.last_written} mode="short" />
+              </span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/workspace/CodeViewer.tsx b/telemetry/ui/src/components/routes/workspace/CodeViewer.tsx
new file mode 100644
index 000000000..733db6ee7
--- /dev/null
+++ b/telemetry/ui/src/components/routes/workspace/CodeViewer.tsx
@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { base16AteliersulphurpoolLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { ClipboardIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { workspaceApi } from '../../../api/workspaceApi';
+
+interface CodeViewerProps {
+  workspace: string;
+  filePath: string;
+}
+
+export const CodeViewer = ({ workspace, filePath }: CodeViewerProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['workspace-file', workspace, filePath],
+    queryFn: () => workspaceApi.getFileContent(workspace, filePath),
+    enabled: !!filePath
+  });
+
+  const copyToClipboard = () => {
+    if (data?.content) {
+      navigator.clipboard.writeText(data.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full text-red-500 text-sm">
+        {error instanceof Error ? error.message : 'Failed to load file'}
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+        Select a file to view
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b border-gray-200">
+        <span className="text-sm text-gray-600 font-mono truncate">{filePath}</span>
+        <button
+          onClick={copyToClipboard}
+          className="p-1 rounded hover:bg-gray-200"
+          title="Copy to clipboard"
+        >
+          {copied ? (
+            <CheckIcon className="h-4 w-4 text-green-500" />
+          ) : (
+            <ClipboardIcon className="h-4 w-4 text-gray-400" />
+          )}
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <SyntaxHighlighter
+          language={data.language}
+          style={base16AteliersulphurpoolLight}
+          showLineNumbers
+          customStyle={{ margin: 0, minHeight: '100%', fontSize: '13px' }}
+        >
+          {data.content}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/workspace/FileExplorer.tsx b/telemetry/ui/src/components/routes/workspace/FileExplorer.tsx
new file mode 100644
index 000000000..3a46c690a
--- /dev/null
+++ b/telemetry/ui/src/components/routes/workspace/FileExplorer.tsx
@@ -0,0 +1,148 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState, useCallback } from 'react';
+import {
+  FolderIcon,
+  FolderOpenIcon,
+  DocumentIcon,
+  DocumentTextIcon,
+  ChevronRightIcon,
+  PlayIcon
+} from '@heroicons/react/24/outline';
+import { FileEntry, workspaceApi } from '../../../api/workspaceApi';
+
+interface FileExplorerProps {
+  workspace: string;
+  rootEntries: FileEntry[];
+  onSelectFile: (relativePath: string) => void;
+  onRunScript: (relativePath: string) => void;
+}
+
+interface TreeNodeProps {
+  entry: FileEntry;
+  workspace: string;
+  onSelectFile: (path: string) => void;
+  onRunScript: (path: string) => void;
+  depth: number;
+}
+
+const TreeNode = ({ entry, workspace, onSelectFile, onRunScript, depth }: TreeNodeProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const [children, setChildren] = useState<FileEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const toggle = useCallback(async () => {
+    if (!entry.is_dir) {
+      onSelectFile(entry.path);
+      return;
+    }
+    if (!expanded && children.length === 0) {
+      setLoading(true);
+      try {
+        const entries = await workspaceApi.getFileTree(workspace, entry.path);
+        setChildren(entries);
+      } catch {
+        // silently fail
+      }
+      setLoading(false);
+    }
+    setExpanded(!expanded);
+  }, [entry, workspace, expanded, children.length, onSelectFile]);
+
+  const Icon = entry.is_dir ? (expanded ? FolderOpenIcon : FolderIcon) : getFileIcon(entry);
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-1 py-0.5 px-1 rounded hover:bg-gray-100 cursor-pointer group"
+        style={{ paddingLeft: `${depth * 16 + 4}px` }}
+        onClick={toggle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        {entry.is_dir && (
+          <ChevronRightIcon
+            className={`h-3 w-3 text-gray-400 shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}
+          />
+        )}
+        {!entry.is_dir && <span className="w-3" />}
+        <Icon className="h-4 w-4 text-gray-500 shrink-0" />
+        <span className="text-sm text-gray-700 truncate">{entry.name}</span>
+        {entry.has_burr_app && (
+          <span className="text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded font-medium ml-1">
+            Burr
+          </span>
+        )}
+        {loading && <span className="text-xs text-gray-400 ml-auto">...</span>}
+        {hovered && entry.is_python && !entry.is_dir && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onRunScript(entry.path);
+            }}
+            className="ml-auto p-0.5 rounded hover:bg-green-100"
+            title="Run script"
+          >
+            <PlayIcon className="h-3.5 w-3.5 text-green-600" />
+          </button>
+        )}
+      </div>
+      {expanded &&
+        children.map((child) => (
+          <TreeNode
+            key={child.path}
+            entry={child}
+            workspace={workspace}
+            onSelectFile={onSelectFile}
+            onRunScript={onRunScript}
+            depth={depth + 1}
+          />
+        ))}
+    </div>
+  );
+};
+
+function getFileIcon(entry: FileEntry) {
+  if (entry.is_python) return DocumentTextIcon;
+  return DocumentIcon;
+}
+
+export const FileExplorer = ({
+  workspace,
+  rootEntries,
+  onSelectFile,
+  onRunScript
+}: FileExplorerProps) => {
+  return (
+    <div className="h-full overflow-y-auto py-2">
+      {rootEntries.map((entry) => (
+        <TreeNode
+          key={entry.path}
+          entry={entry}
+          workspace={workspace}
+          onSelectFile={onSelectFile}
+          onRunScript={onRunScript}
+          depth={0}
+        />
+      ))}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
new file mode 100644
index 000000000..23c2dc409
--- /dev/null
+++ b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
@@ -0,0 +1,181 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { StopIcon } from '@heroicons/react/24/outline';
+import { ProcessInfo, ProcessOutputEvent, workspaceApi } from '../../../api/workspaceApi';
+
+interface RunTerminalProps {
+  process: ProcessInfo;
+  onStopped: () => void;
+}
+
+interface OutputLine {
+  type: 'stdout' | 'stderr' | 'exit';
+  text: string;
+}
+
+// Basic ANSI color codes to CSS classes
+function ansiToSpans(text: string): JSX.Element[] {
+  const parts: JSX.Element[] = [];
+  // Match ANSI escape sequences
+  const ansiRegex = /\x1b\[([0-9;]*)m/g;
+  let lastIndex = 0;
+  let currentClass = '';
+  let ansiMatch;
+  let key = 0;
+
+  while ((ansiMatch = ansiRegex.exec(text)) !== null) {
+    if (ansiMatch.index > lastIndex) {
+      parts.push(
+        <span key={key++} className={currentClass}>
+          {text.slice(lastIndex, ansiMatch.index)}
+        </span>
+      );
+    }
+    const codes = ansiMatch[1].split(';').map(Number);
+    for (const code of codes) {
+      if (code === 0) currentClass = '';
+      else if (code === 1) currentClass = 'font-bold';
+      else if (code >= 30 && code <= 37) currentClass = ansiColorClass(code - 30);
+      else if (code >= 90 && code <= 97) currentClass = ansiColorClass(code - 90, true);
+    }
+    lastIndex = ansiRegex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(
+      <span key={key++} className={currentClass}>
+        {text.slice(lastIndex)}
+      </span>
+    );
+  }
+  return parts.length > 0 ? parts : [<span key={0}>{text}</span>];
+}
+
+function ansiColorClass(index: number, bright = false): string {
+  const colors = [
+    'text-gray-900',
+    'text-red-600',
+    'text-green-600',
+    'text-yellow-600',
+    'text-blue-600',
+    'text-purple-600',
+    'text-cyan-600',
+    'text-gray-100'
+  ];
+  const brightColors = [
+    'text-gray-600',
+    'text-red-400',
+    'text-green-400',
+    'text-yellow-400',
+    'text-blue-400',
+    'text-purple-400',
+    'text-cyan-400',
+    'text-white'
+  ];
+  return (bright ? brightColors : colors)[index] || '';
+}
+
+export const RunTerminal = ({ process: proc, onStopped }: RunTerminalProps) => {
+  const [lines, setLines] = useState<OutputLine[]>([]);
+  const [exited, setExited] = useState(false);
+  const [exitCode, setExitCode] = useState<number | null>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    setLines([]);
+    setExited(false);
+    setExitCode(null);
+
+    const ctrl = workspaceApi.streamProcessOutput(
+      proc.pid,
+      (event: ProcessOutputEvent) => {
+        if (event.type === 'exit') {
+          setExited(true);
+          setExitCode(parseInt(event.data, 10));
+        } else {
+          setLines((prev) => [...prev, { type: event.type, text: event.data }]);
+        }
+      },
+      () => {
+        // SSE connection error, mark as exited
+        setExited(true);
+      }
+    );
+    abortRef.current = ctrl;
+
+    return () => {
+      ctrl.abort();
+    };
+  }, [proc.pid]);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [lines, exited]);
+
+  const handleStop = async () => {
+    try {
+      await workspaceApi.stopProcess(proc.pid);
+    } catch {
+      // process may have already exited
+    }
+    onStopped();
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-gray-900">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700">
+        <span className="text-xs text-gray-300 font-mono truncate">{proc.script_path}</span>
+        <div className="flex items-center gap-2">
+          {exited && exitCode !== null && (
+            <span
+              className={`text-xs px-1.5 py-0.5 rounded ${exitCode === 0 ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'}`}
+            >
+              exit {exitCode}
+            </span>
+          )}
+          {exited && (
+            <Link to="/projects" className="text-xs text-blue-400 hover:text-blue-300 underline">
+              View runs in Projects
+            </Link>
+          )}
+          {!exited && (
+            <button
+              onClick={handleStop}
+              className="p-1 rounded hover:bg-gray-700"
+              title="Stop process"
+            >
+              <StopIcon className="h-4 w-4 text-red-400" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed">
+        {lines.map((line, i) => (
+          <div key={i} className={line.type === 'stderr' ? 'text-red-400' : 'text-gray-100'}>
+            {ansiToSpans(line.text)}
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/workspace/WorkspaceSelector.tsx b/telemetry/ui/src/components/routes/workspace/WorkspaceSelector.tsx
new file mode 100644
index 000000000..ccebbaeca
--- /dev/null
+++ b/telemetry/ui/src/components/routes/workspace/WorkspaceSelector.tsx
@@ -0,0 +1,128 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FolderIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { workspaceApi } from '../../../api/workspaceApi';
+
+const STORAGE_KEY = 'burr:recent_workspaces';
+
+function getRecentWorkspaces(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+function addRecentWorkspace(path: string) {
+  const recent = getRecentWorkspaces().filter((p) => p !== path);
+  recent.unshift(path);
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(recent.slice(0, 10)));
+}
+
+function removeRecentWorkspace(path: string) {
+  const recent = getRecentWorkspaces().filter((p) => p !== path);
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(recent));
+}
+
+function encodePath(path: string): string {
+  return btoa(path).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+export const WorkspaceSelector = () => {
+  const [path, setPath] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const recentWorkspaces = getRecentWorkspaces();
+
+  const openWorkspace = async (workspacePath: string) => {
+    setError('');
+    setLoading(true);
+    try {
+      const info = await workspaceApi.openWorkspace(workspacePath);
+      addRecentWorkspace(info.path);
+      navigate(`/workspace/${encodePath(info.path)}`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to open workspace');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto py-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Open Workspace</h1>
+
+      <div className="flex gap-3 mb-4">
+        <input
+          type="text"
+          value={path}
+          onChange={(e) => setPath(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && path && openWorkspace(path)}
+          placeholder="/absolute/path/to/project"
+          className="flex-1 rounded-md border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none"
+        />
+        <button
+          onClick={() => openWorkspace(path)}
+          disabled={!path || loading}
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Opening...' : 'Open'}
+        </button>
+      </div>
+
+      {error && <p className="text-sm text-red-600 mb-4">{error}</p>}
+
+      {recentWorkspaces.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">
+            Recent Workspaces
+          </h2>
+          <ul className="divide-y divide-gray-100 rounded-md border border-gray-200">
+            {recentWorkspaces.map((ws) => (
+              <li key={ws} className="flex items-center justify-between px-4 py-3 hover:bg-gray-50">
+                <button
+                  onClick={() => openWorkspace(ws)}
+                  className="flex items-center gap-3 text-left flex-1 min-w-0"
+                >
+                  <FolderIcon className="h-5 w-5 text-gray-400 shrink-0" />
+                  <span className="text-sm text-gray-700 truncate">{ws}</span>
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeRecentWorkspace(ws);
+                    // Force re-render by navigating to same page
+                    navigate('/workspace', { replace: true });
+                  }}
+                  className="ml-2 text-gray-400 hover:text-gray-600"
+                >
+                  <XMarkIcon className="h-4 w-4" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/components/routes/workspace/WorkspaceView.tsx b/telemetry/ui/src/components/routes/workspace/WorkspaceView.tsx
new file mode 100644
index 000000000..07b980fa1
--- /dev/null
+++ b/telemetry/ui/src/components/routes/workspace/WorkspaceView.tsx
@@ -0,0 +1,108 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { FileExplorer } from './FileExplorer';
+import { CodeViewer } from './CodeViewer';
+import { RunTerminal } from './RunTerminal';
+import { FileEntry, ProcessInfo, workspaceApi } from '../../../api/workspaceApi';
+
+function decodePath(encoded: string): string {
+  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+  // Add padding if needed
+  const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+  return atob(padded);
+}
+
+export const WorkspaceView = () => {
+  const { encodedPath } = useParams<{ encodedPath: string }>();
+  const workspace = decodePath(encodedPath || '');
+
+  const [rootEntries, setRootEntries] = useState<FileEntry[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [activeProcess, setActiveProcess] = useState<ProcessInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!workspace) return;
+    setLoading(true);
+    workspaceApi
+      .getFileTree(workspace)
+      .then(setRootEntries)
+      .finally(() => setLoading(false));
+  }, [workspace]);
+
+  const handleRunScript = async (relativePath: string) => {
+    try {
+      const proc = await workspaceApi.runScript(workspace, relativePath);
+      setActiveProcess(proc);
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to run script');
+    }
+  };
+
+  if (!workspace) {
+    return <div className="text-red-500 p-4">Invalid workspace path</div>;
+  }
+
+  if (loading) {
+    return <div className="flex items-center justify-center h-full text-gray-400">Loading...</div>;
+  }
+
+  return (
+    <div className="flex h-full" style={{ height: 'calc(100vh - 120px)' }}>
+      {/* File Explorer sidebar */}
+      <div className="w-64 shrink-0 border-r border-gray-200 overflow-hidden">
+        <div className="px-3 py-2 border-b border-gray-200">
+          <h2 className="text-sm font-semibold text-gray-700 truncate" title={workspace}>
+            {workspace.split('/').pop()}
+          </h2>
+        </div>
+        <FileExplorer
+          workspace={workspace}
+          rootEntries={rootEntries}
+          onSelectFile={setSelectedFile}
+          onRunScript={handleRunScript}
+        />
+      </div>
+
+      {/* Main content area */}
+      <div className="flex-1 flex flex-col min-w-0">
+        {/* Code viewer */}
+        <div className={`${activeProcess ? 'h-3/5' : 'h-full'} border-b border-gray-200`}>
+          {selectedFile ? (
+            <CodeViewer workspace={workspace} filePath={selectedFile} />
+          ) : (
+            <div className="flex items-center justify-center h-full text-gray-400 text-sm">
+              Select a file to view
+            </div>
+          )}
+        </div>
+
+        {/* Terminal */}
+        {activeProcess && (
+          <div className="h-2/5">
+            <RunTerminal process={activeProcess} onStopped={() => setActiveProcess(null)} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/telemetry/ui/src/hooks/useBuilderState.ts b/telemetry/ui/src/hooks/useBuilderState.ts
new file mode 100644
index 000000000..40deec934
--- /dev/null
+++ b/telemetry/ui/src/hooks/useBuilderState.ts
@@ -0,0 +1,397 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BuilderNode, NodeType, generatePythonCode, generateProjectFiles, ProjectFile } from '../utils/codeGenerator';
+import { getUnresolvedReads } from '../utils/stateFlow';
+import { ActionModel, ApplicationModel, TransitionModel } from '../api';
+import {
+  createDefaultNode,
+  mapNode,
+  insertAfter,
+  appendToEnd,
+  removeFromTree,
+  flattenTree,
+  resetNodeIdCounter
+} from '../utils/treeUtils';
+import { buildFlowGraph } from '../utils/flowLayout';
+import { InsertContext, InsertLocation, BurrGraph } from '../utils/builderTypes';
+import { parsePythonCode, buildTreeFromParsed } from '../utils/codeParser';
+
+export const useBuilderState = () => {
+  const [rootNode, setRootNode] = useState<BuilderNode | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+
+  // Undo/Redo history
+  const undoStack = useRef<(BuilderNode | null)[]>([]);
+  const redoStack = useRef<(BuilderNode | null)[]>([]);
+  const clipboardRef = useRef<BuilderNode | null>(null);
+
+  const pushUndo = useCallback((state: BuilderNode | null) => {
+    undoStack.current.push(state ? JSON.parse(JSON.stringify(state)) : null);
+    if (undoStack.current.length > 50) undoStack.current.shift();
+    redoStack.current = [];
+  }, []);
+
+  const undo = useCallback(() => {
+    if (undoStack.current.length === 0) return;
+    redoStack.current.push(rootNode ? JSON.parse(JSON.stringify(rootNode)) : null);
+    const prev = undoStack.current.pop()!;
+    setRootNode(prev);
+  }, [rootNode]);
+
+  const redo = useCallback(() => {
+    if (redoStack.current.length === 0) return;
+    undoStack.current.push(rootNode ? JSON.parse(JSON.stringify(rootNode)) : null);
+    const next = redoStack.current.pop()!;
+    setRootNode(next);
+  }, [rootNode]);
+
+  const copyNode = useCallback(() => {
+    if (!selectedNodeId || !rootNode) return;
+    const node = flattenTree(rootNode).nodes.find((n) => n.id === selectedNodeId);
+    if (node) clipboardRef.current = JSON.parse(JSON.stringify({ ...node, nextAction: undefined }));
+  }, [selectedNodeId, rootNode]);
+
+  const pasteNode = useCallback(() => {
+    if (!clipboardRef.current || !rootNode) return;
+    const pasted = createDefaultNode(clipboardRef.current.nodeType);
+    pasted.name = `${clipboardRef.current.name}_copy`;
+    pasted.reads = [...clipboardRef.current.reads];
+    pasted.writes = [...clipboardRef.current.writes];
+    pasted.inputs = [...clipboardRef.current.inputs];
+    pasted.codeBody = clipboardRef.current.codeBody;
+    pasted.llmProvider = clipboardRef.current.llmProvider;
+    pasted.llmModel = clipboardRef.current.llmModel;
+    pasted.apiUrl = clipboardRef.current.apiUrl;
+    pasted.apiMethod = clipboardRef.current.apiMethod;
+    pushUndo(rootNode);
+    setRootNode((prev) => (prev ? appendToEnd(prev, pasted) : pasted));
+  }, [rootNode, pushUndo]);
+
+  // Keyboard shortcuts (only when Monaco editor is NOT focused)
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // Let Monaco handle its own keyboard events
+      const active = document.activeElement;
+      const isInEditor =
+        active?.closest('.monaco-editor') !== null ||
+        active?.tagName === 'TEXTAREA' ||
+        active?.tagName === 'INPUT';
+      if (isInEditor) return;
+
+      // Delete/Backspace without modifier
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        if (selectedNodeId) {
+          e.preventDefault();
+          pushUndo(rootNode);
+          setRootNode((prev) => (prev ? removeFromTree(prev, selectedNodeId) ?? null : null));
+          setSelectedNodeId(null);
+        }
+        return;
+      }
+
+      const isMod = e.ctrlKey || e.metaKey;
+      if (!isMod) return;
+
+      if (e.key === 'z' && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
+        e.preventDefault();
+        redo();
+      } else if (e.key === 'c') {
+        copyNode();
+      } else if (e.key === 'v') {
+        e.preventDefault();
+        pasteNode();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [undo, redo, copyNode, pasteNode, selectedNodeId, rootNode, pushUndo]);
+
+  // Derived flat arrays for code gen and validation
+  const { nodes: flatNodes, edges: flatEdges } = useMemo(
+    () => flattenTree(rootNode ?? undefined),
+    [rootNode]
+  );
+
+  const entrypoint = rootNode?.name || '';
+
+  // Derived layout graph for ReactFlow
+  const layoutGraph: BurrGraph = useMemo(
+    () => (rootNode ? buildFlowGraph(rootNode) : { nodes: [], edges: [] }),
+    [rootNode]
+  );
+
+  // Tree mutation helper (with undo)
+  const updateTree = useCallback(
+    (updater: (root: BuilderNode) => BuilderNode | undefined) => {
+      setRootNode((prev) => {
+        if (!prev) return null;
+        pushUndo(prev);
+        return updater(prev) ?? null;
+      });
+    },
+    [pushUndo]
+  );
+
+  // Add node to end of main chain (toolbar action)
+  const addNode = useCallback(
+    (_position: { x: number; y: number }, nodeType: NodeType = 'action') => {
+      const newNode = createDefaultNode(nodeType);
+      setRootNode((prev) => {
+        pushUndo(prev);
+        return prev ? appendToEnd(prev, newNode) : newNode;
+      });
+      return newNode.id;
+    },
+    [pushUndo]
+  );
+
+  // Insert node after a specific parent (from + button)
+  const insertNodeAfter = useCallback(
+    (parentId: string, nodeType: NodeType) => {
+      const newNode = createDefaultNode(nodeType);
+      setRootNode((prev) => {
+        if (!prev) return prev;
+        pushUndo(prev);
+        return insertAfter(prev, parentId, newNode) ?? prev;
+      });
+    },
+    [pushUndo]
+  );
+
+  // Insert into loop body (prepend to loop chain)
+  const insertIntoLoop = useCallback(
+    (loopId: string, nodeType: NodeType) => {
+      const newNode = createDefaultNode(nodeType);
+      updateTree((root) =>
+        mapNode(root, loopId, (loop) => ({
+          ...loop,
+          firstLoopAction: { ...newNode, nextAction: loop.firstLoopAction }
+        }))
+      );
+    },
+    [updateTree]
+  );
+
+  // Insert into router branch
+  const insertIntoBranch = useCallback(
+    (routerId: string, branchIndex: number, nodeType: NodeType) => {
+      const newNode = createDefaultNode(nodeType);
+      updateTree((root) =>
+        mapNode(root, routerId, (router) => {
+          const branches = [...(router.branches || [])];
+          if (branches[branchIndex]) {
+            branches[branchIndex] = {
+              ...branches[branchIndex],
+              firstAction: { ...newNode, nextAction: branches[branchIndex].firstAction }
+            };
+          }
+          return { ...router, branches };
+        })
+      );
+    },
+    [updateTree]
+  );
+
+  // Handle insert from any context (used by InlineAddButton)
+  const handleInsert = useCallback(
+    (nodeType: NodeType, ctx: InsertContext) => {
+      switch (ctx.location) {
+        case InsertLocation.AFTER:
+          insertNodeAfter(ctx.parentStepId, nodeType);
+          break;
+        case InsertLocation.INSIDE_LOOP:
+          insertIntoLoop(ctx.loopStepId, nodeType);
+          break;
+        case InsertLocation.INSIDE_BRANCH:
+          insertIntoBranch(ctx.routerStepId, ctx.branchIndex, nodeType);
+          break;
+      }
+    },
+    [insertNodeAfter, insertIntoLoop, insertIntoBranch]
+  );
+
+  const updateNode = useCallback(
+    (id: string, updates: Partial<BuilderNode>) => {
+      updateTree((root) => mapNode(root, id, (node) => ({ ...node, ...updates })));
+    },
+    [updateTree]
+  );
+
+  const removeNode = useCallback(
+    (id: string) => {
+      setRootNode((prev) => {
+        if (!prev) return null;
+        pushUndo(prev);
+        return removeFromTree(prev, id) ?? null;
+      });
+      if (selectedNodeId === id) setSelectedNodeId(null);
+    },
+    [selectedNodeId, pushUndo]
+  );
+
+  const addBranch = useCallback(
+    (routerId: string, name: string, condition: string) => {
+      updateTree((root) =>
+        mapNode(root, routerId, (router) => ({
+          ...router,
+          branches: [...(router.branches || []), { name, condition, firstAction: undefined }]
+        }))
+      );
+    },
+    [updateTree]
+  );
+
+  const removeBranch = useCallback(
+    (routerId: string, branchIndex: number) => {
+      updateTree((root) =>
+        mapNode(root, routerId, (router) => ({
+          ...router,
+          branches: (router.branches || []).filter((_, i) => i !== branchIndex)
+        }))
+      );
+    },
+    [updateTree]
+  );
+
+  // Validation
+  const asActions: ActionModel[] = useMemo(
+    () =>
+      flatNodes.map((n) => ({
+        name: n.name || '',
+        reads: n.reads || [],
+        writes: n.writes || [],
+        code: '',
+        inputs: n.inputs || [],
+        optional_inputs: []
+      })),
+    [flatNodes]
+  );
+
+  const asTransitions: TransitionModel[] = useMemo(
+    () =>
+      flatEdges.map((e) => ({
+        from_: e.source,
+        to: e.target,
+        condition: e.condition
+      })),
+    [flatEdges]
+  );
+
+  const validationErrors = useMemo(
+    () => getUnresolvedReads(asActions, asTransitions),
+    [asActions, asTransitions]
+  );
+
+  // Code generation
+  const generatedCode = useMemo(
+    () => generatePythonCode(flatNodes, flatEdges, entrypoint),
+    [flatNodes, flatEdges, entrypoint]
+  );
+
+  // Multi-file project generation
+  const projectFiles: ProjectFile[] = useMemo(
+    () => generateProjectFiles(flatNodes, flatEdges, entrypoint),
+    [flatNodes, flatEdges, entrypoint]
+  );
+
+  // Import from existing application
+  const importFromApplication = useCallback((app: ApplicationModel) => {
+    resetNodeIdCounter();
+    // Build flat nodes first, then chain them linearly
+    const nodeMap = new Map<string, BuilderNode>();
+    app.actions.forEach((action) => {
+      const node = createDefaultNode('action');
+      node.name = action.name;
+      node.reads = action.reads;
+      node.writes = action.writes;
+      node.inputs = action.inputs || [];
+      nodeMap.set(action.name, node);
+    });
+
+    // Chain via transitions immutably
+    if (app.entrypoint && nodeMap.has(app.entrypoint)) {
+      const visited = new Set<string>();
+      const buildChain = (name: string): BuilderNode | undefined => {
+        if (visited.has(name) || !nodeMap.has(name)) return undefined;
+        visited.add(name);
+        const node = { ...nodeMap.get(name)! };
+        const nextTransition = app.transitions.find((t) => t.from_ === name && !visited.has(t.to));
+        if (nextTransition) {
+          node.nextAction = buildChain(nextTransition.to);
+        }
+        return node;
+      };
+      const root = buildChain(app.entrypoint);
+      if (root) setRootNode(root);
+    }
+    setSelectedNodeId(null);
+  }, []);
+
+  // Set root from code parser (bidirectional sync)
+  const setRootFromCode = useCallback(
+    (newRoot: BuilderNode) => {
+      pushUndo(rootNode);
+      setRootNode(newRoot);
+    },
+    [rootNode, pushUndo]
+  );
+
+  // Find selected node in tree
+  const selectedNode = useMemo(() => {
+    if (!selectedNodeId || !rootNode) return undefined;
+    return flatNodes.find((n) => n.id === selectedNodeId);
+  }, [selectedNodeId, flatNodes, rootNode]);
+
+  return {
+    rootNode,
+    setRootNode,
+    nodes: flatNodes,
+    edges: flatEdges,
+    layoutGraph,
+    selectedNodeId,
+    setSelectedNodeId,
+    selectedNode,
+    entrypoint,
+    addNode,
+    insertNodeAfter,
+    insertIntoLoop,
+    insertIntoBranch,
+    handleInsert,
+    updateNode,
+    removeNode,
+    addBranch,
+    removeBranch,
+    validationErrors,
+    generatedCode,
+    importFromApplication,
+    asActions,
+    asTransitions,
+    projectFiles,
+    setRootFromCode,
+    undo,
+    redo,
+    copyNode,
+    pasteNode
+  };
+};
diff --git a/telemetry/ui/src/hooks/useSearch.ts b/telemetry/ui/src/hooks/useSearch.ts
new file mode 100644
index 000000000..41510e85e
--- /dev/null
+++ b/telemetry/ui/src/hooks/useSearch.ts
@@ -0,0 +1,94 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useMemo, useState } from 'react';
+import Fuse from 'fuse.js';
+import { ApplicationModel } from '../api';
+
+export type SearchableItem = {
+  type: 'action' | 'state_key' | 'condition';
+  name: string;
+  context: string;
+  projectId: string;
+  appId?: string;
+};
+
+export const buildSearchIndex = (
+  projectId: string,
+  applications: Map<string, ApplicationModel>
+): SearchableItem[] => {
+  const items: SearchableItem[] = [];
+
+  applications.forEach((app, appId) => {
+    for (const action of app.actions) {
+      items.push({
+        type: 'action',
+        name: action.name,
+        context: `reads: ${action.reads.join(', ')} | writes: ${action.writes.join(', ')}`,
+        projectId,
+        appId
+      });
+
+      for (const key of [...action.reads, ...action.writes]) {
+        items.push({
+          type: 'state_key',
+          name: key,
+          context: `Used by action: ${action.name}`,
+          projectId,
+          appId
+        });
+      }
+    }
+
+    for (const transition of app.transitions) {
+      if (transition.condition && transition.condition !== 'default') {
+        items.push({
+          type: 'condition',
+          name: transition.condition,
+          context: `${transition.from_} -> ${transition.to}`,
+          projectId,
+          appId
+        });
+      }
+    }
+  });
+
+  return items;
+};
+
+export const useSearch = (items: SearchableItem[]) => {
+  const [query, setQuery] = useState('');
+
+  const fuse = useMemo(
+    () =>
+      new Fuse(items, {
+        keys: ['name', 'context'],
+        threshold: 0.3,
+        includeScore: true
+      }),
+    [items]
+  );
+
+  const results = useMemo(() => {
+    if (!query.trim()) return [];
+    return fuse.search(query, { limit: 50 }).map((r) => r.item);
+  }, [query, fuse]);
+
+  return { query, setQuery, results };
+};
diff --git a/telemetry/ui/src/utils/builderTypes.ts b/telemetry/ui/src/utils/builderTypes.ts
new file mode 100644
index 000000000..e369287a7
--- /dev/null
+++ b/telemetry/ui/src/utils/builderTypes.ts
@@ -0,0 +1,159 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Edge } from '@xyflow/react';
+
+export enum BurrNodeType {
+  STEP = 'STEP',
+  BIG_ADD_BUTTON = 'BIG_ADD_BUTTON',
+  GRAPH_END = 'GRAPH_END',
+  LOOP_RETURN = 'LOOP_RETURN',
+}
+
+export enum BurrEdgeType {
+  STRAIGHT_LINE = 'BurrStraightLine',
+  LOOP_START = 'BurrLoopStart',
+  LOOP_RETURN = 'BurrLoopReturn',
+  ROUTER_START = 'BurrRouterStart',
+  ROUTER_END = 'BurrRouterEnd',
+}
+
+export enum InsertLocation {
+  AFTER = 'AFTER',
+  INSIDE_LOOP = 'INSIDE_LOOP',
+  INSIDE_BRANCH = 'INSIDE_BRANCH',
+}
+
+export type InsertContext =
+  | { location: InsertLocation.AFTER; parentStepId: string }
+  | { location: InsertLocation.INSIDE_LOOP; loopStepId: string }
+  | { location: InsertLocation.INSIDE_BRANCH; routerStepId: string; branchIndex: number };
+
+// Layout graph types (output of flowLayout, input to ReactFlow)
+
+export type BurrStepNode = {
+  id: string;
+  type: BurrNodeType.STEP;
+  position: { x: number; y: number };
+  data: {
+    stepId: string;
+    name: string;
+    nodeType: string;
+    reads: string[];
+    writes: string[];
+    inputs: string[];
+    unresolvedReads: string[];
+    isSelected: boolean;
+    onSelect: () => void;
+  };
+  selectable?: boolean;
+  draggable?: boolean;
+};
+
+export type BurrBigAddButtonNode = {
+  id: string;
+  type: BurrNodeType.BIG_ADD_BUTTON;
+  position: { x: number; y: number };
+  data: InsertContext & { edgeId: string };
+  selectable?: boolean;
+};
+
+export type BurrGraphEndNode = {
+  id: string;
+  type: BurrNodeType.GRAPH_END;
+  position: { x: number; y: number };
+  data: { showWidget?: boolean };
+  selectable?: boolean;
+};
+
+export type BurrLoopReturnNode = {
+  id: string;
+  type: BurrNodeType.LOOP_RETURN;
+  position: { x: number; y: number };
+  data: Record<string, never>;
+  selectable?: boolean;
+};
+
+export type BurrNode =
+  | BurrStepNode
+  | BurrBigAddButtonNode
+  | BurrGraphEndNode
+  | BurrLoopReturnNode;
+
+export type BurrStraightLineEdge = Edge & {
+  type: BurrEdgeType.STRAIGHT_LINE;
+  data: {
+    drawArrowHead: boolean;
+    hideAddButton?: boolean;
+    parentStepId: string;
+  };
+};
+
+export type BurrLoopStartEdge = Edge & {
+  type: BurrEdgeType.LOOP_START;
+  data: {
+    isLoopEmpty: boolean;
+    parentStepId: string;
+  };
+};
+
+export type BurrLoopReturnEdge = Edge & {
+  type: BurrEdgeType.LOOP_RETURN;
+  data: {
+    parentStepId: string;
+    isLoopEmpty: boolean;
+    drawArrowHeadAfterEnd: boolean;
+    verticalSpaceBetweenReturnNodeStartAndEnd: number;
+  };
+};
+
+export type BurrRouterStartEdge = Edge & {
+  type: BurrEdgeType.ROUTER_START;
+  data: {
+    isBranchEmpty: boolean;
+    label: string;
+    branchIndex: number;
+    drawHorizontalLine: boolean;
+    drawStartingVerticalLine: boolean;
+    parentStepId: string;
+  };
+};
+
+export type BurrRouterEndEdge = Edge & {
+  type: BurrEdgeType.ROUTER_END;
+  data: {
+    drawHorizontalLine: boolean;
+    verticalSpaceBetweenLastNodeInBranchAndEndLine: number;
+    drawEndingVerticalLine: boolean;
+    routerStepId?: string;
+    isNextStepEmpty?: boolean;
+  };
+};
+
+export type BurrEdge =
+  | BurrStraightLineEdge
+  | BurrLoopStartEdge
+  | BurrLoopReturnEdge
+  | BurrRouterStartEdge
+  | BurrRouterEndEdge;
+
+export type BurrGraph = {
+  nodes: BurrNode[];
+  edges: BurrEdge[];
+};
diff --git a/telemetry/ui/src/utils/codeGenerator.ts b/telemetry/ui/src/utils/codeGenerator.ts
new file mode 100644
index 000000000..d2c1c1206
--- /dev/null
+++ b/telemetry/ui/src/utils/codeGenerator.ts
@@ -0,0 +1,373 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type NodeType = 'action' | 'input' | 'result' | 'llm_call' | 'api_call' | 'code' | 'streaming' | 'loop' | 'router';
+
+export const NODE_TYPE_META: Record<
+  NodeType,
+  { label: string; color: string; borderColor: string; description: string }
+> = {
+  action: {
+    label: 'Action',
+    color: 'bg-white',
+    borderColor: 'border-gray-300',
+    description: 'Generic action with reads/writes'
+  },
+  input: {
+    label: 'Input',
+    color: 'bg-green-50',
+    borderColor: 'border-green-400',
+    description: 'Receives external data into state'
+  },
+  result: {
+    label: 'Result',
+    color: 'bg-blue-50',
+    borderColor: 'border-blue-400',
+    description: 'Extracts output from state'
+  },
+  llm_call: {
+    label: 'LLM Call',
+    color: 'bg-purple-50',
+    borderColor: 'border-purple-400',
+    description: 'Call an LLM with prompt/response'
+  },
+  api_call: {
+    label: 'API Call',
+    color: 'bg-orange-50',
+    borderColor: 'border-orange-400',
+    description: 'HTTP request to external API'
+  },
+  code: {
+    label: 'Code',
+    color: 'bg-gray-50',
+    borderColor: 'border-gray-500',
+    description: 'Custom Python code block'
+  },
+  streaming: {
+    label: 'Streaming',
+    color: 'bg-cyan-50',
+    borderColor: 'border-cyan-400',
+    description: 'Yields results progressively'
+  },
+  loop: {
+    label: 'Loop',
+    color: 'bg-amber-50',
+    borderColor: 'border-amber-400',
+    description: 'Iterate over items in state'
+  },
+  router: {
+    label: 'Router',
+    color: 'bg-rose-50',
+    borderColor: 'border-rose-400',
+    description: 'Branch based on conditions'
+  }
+};
+
+export type BuilderNode = {
+  id: string;
+  name: string;
+  nodeType: NodeType;
+  reads: string[];
+  writes: string[];
+  inputs: string[];
+  position: { x: number; y: number };
+  codeBody?: string;
+  llmProvider?: string;
+  llmModel?: string;
+  apiUrl?: string;
+  apiMethod?: string;
+  // Tree structure
+  nextAction?: BuilderNode;
+  firstLoopAction?: BuilderNode;
+  branches?: BuilderBranch[];
+  // Loop config
+  loopVariable?: string;
+  itemVariable?: string;
+};
+
+export type BuilderBranch = {
+  name: string;
+  condition: string;
+  firstAction?: BuilderNode;
+};
+
+export type BuilderEdge = {
+  id: string;
+  source: string;
+  target: string;
+  condition: string;
+};
+
+// Sanitize a string for use as a Python identifier (a-z, 0-9, _)
+function sanitizeName(name: string): string {
+  return name.replace(/[^a-zA-Z0-9_]/g, '_').replace(/^[0-9]/, '_$&') || 'unnamed';
+}
+
+// Escape a string for embedding in Python string literal
+function escapePyString(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
+}
+
+const generateActionCode = (node: BuilderNode): string[] => {
+  const lines: string[] = [];
+  const safeName = sanitizeName(node.name);
+  const readsStr = node.reads.map((r) => `"${escapePyString(r)}"`).join(', ');
+  const writesStr = node.writes.map((w) => `"${escapePyString(w)}"`).join(', ');
+
+  switch (node.nodeType) {
+    case 'input': {
+      lines.push(`@action(reads=[], writes=[${writesStr}])`);
+      const params = ['state: State', ...node.inputs.map((i) => `${sanitizeName(i)}: str`)];
+      lines.push(`def ${safeName}(${params.join(', ')}) -> State:`);
+      if (node.writes.length > 0) {
+        const updates = node.writes.map((w, i) => `${w}=${node.inputs[i] || 'None'}`).join(', ');
+        lines.push(`    return state.update(${updates})`);
+      } else {
+        lines.push('    return state');
+      }
+      break;
+    }
+    case 'result': {
+      lines.push(`@action(reads=[${readsStr}], writes=[])`);
+      lines.push(`def ${safeName}(state: State) -> State:`);
+      if (node.reads.length > 0) {
+        lines.push(`    # Output: ${node.reads.join(', ')}`);
+      }
+      lines.push('    return state');
+      break;
+    }
+    case 'llm_call': {
+      const provider = node.llmProvider || 'openai';
+      const model = node.llmModel || 'gpt-4';
+      lines.push(`@action(reads=[${readsStr}], writes=[${writesStr}])`);
+      lines.push(`def ${safeName}(state: State) -> State:`);
+      const promptKey = node.reads[0] || 'prompt';
+      const responseKey = node.writes[0] || 'response';
+      lines.push(`    prompt = state["${promptKey}"]`);
+      lines.push(`    # TODO: call ${provider} with model="${model}"`);
+      lines.push(`    response = ""`);
+      lines.push(`    return state.update(${responseKey}=response)`);
+      break;
+    }
+    case 'api_call': {
+      const method = node.apiMethod || 'GET';
+      const url = node.apiUrl || 'https://api.example.com';
+      lines.push(`@action(reads=[${readsStr}], writes=[${writesStr}])`);
+      lines.push(`def ${safeName}(state: State) -> State:`);
+      lines.push(`    import requests`);
+      lines.push(`    response = requests.${sanitizeName(method).toLowerCase()}("${escapePyString(url)}")`);
+      const responseKey = sanitizeName(node.writes[0] || 'response');
+      lines.push(`    return state.update(${responseKey}=response.json())`);
+      break;
+    }
+    case 'streaming': {
+      lines.push(`@streaming_action(reads=[${readsStr}], writes=[${writesStr}])`);
+      lines.push(`def ${safeName}(state: State) -> Generator:`);
+      const outKey = node.writes[0] || 'output';
+      lines.push(`    result = ""`);
+      lines.push(`    for chunk in generate_chunks(state):`);
+      lines.push(`        result += chunk`);
+      lines.push(`        yield {"${outKey}": chunk}, None`);
+      lines.push(`    yield {"${outKey}": result}, state.update(${outKey}=result)`);
+      break;
+    }
+    case 'code': {
+      lines.push(`@action(reads=[${readsStr}], writes=[${writesStr}])`);
+      const params = ['state: State', ...node.inputs.map((i) => `${i}: str`)];
+      lines.push(`def ${safeName}(${params.join(', ')}) -> State:`);
+      if (node.codeBody) {
+        node.codeBody.split('\n').forEach((line) => lines.push(`    ${line}`));
+      } else if (node.writes.length > 0) {
+        const updates = node.writes.map((w) => `${w}=None`).join(', ');
+        lines.push(`    return state.update(${updates})`);
+      } else {
+        lines.push('    return state');
+      }
+      break;
+    }
+    default: {
+      lines.push(`@action(reads=[${readsStr}], writes=[${writesStr}])`);
+      const params = ['state: State', ...node.inputs.map((i) => `${i}: str`)];
+      lines.push(`def ${safeName}(${params.join(', ')}) -> State:`);
+      if (node.writes.length > 0) {
+        const updates = node.writes.map((w) => `${w}=None`).join(', ');
+        lines.push(`    return state.update(${updates})`);
+      } else {
+        lines.push('    return state');
+      }
+    }
+  }
+  return lines;
+};
+
+export const generatePythonCode = (
+  nodes: BuilderNode[],
+  edges: BuilderEdge[],
+  entrypoint: string
+): string => {
+  const lines: string[] = [];
+  const hasStreaming = nodes.some((n) => n.nodeType === 'streaming');
+  const hasWhen = edges.some((e) => e.condition.startsWith('when('));
+  const hasExpr = edges.some((e) => e.condition.startsWith('expr('));
+
+  const coreImports = ['ApplicationBuilder', 'State', 'action'];
+  if (hasStreaming) coreImports.push('streaming_action');
+  lines.push(`from burr.core import ${coreImports.join(', ')}`);
+  if (hasWhen || hasExpr) {
+    const extras = [];
+    if (hasWhen) extras.push('when');
+    if (hasExpr) extras.push('expr');
+    lines.push(`from burr.core import ${extras.join(', ')}`);
+  }
+  lines.push('');
+  lines.push('');
+
+  for (const node of nodes) {
+    lines.push(...generateActionCode(node));
+    lines.push('');
+    lines.push('');
+  }
+
+  lines.push('app = (');
+  lines.push('    ApplicationBuilder()');
+
+  const actionNames = nodes.map((n) => `${n.name}=${n.name}`).join(', ');
+  lines.push(`    .with_actions(${actionNames})`);
+
+  const transitions = edges.map((e) => {
+    const cond = !e.condition || e.condition === 'default' ? 'default' : e.condition;
+    return `("${e.source}", "${e.target}", ${cond})`;
+  });
+  if (transitions.length > 0) {
+    lines.push(`    .with_transitions(`);
+    transitions.forEach((t, i) => {
+      lines.push(`        ${t}${i < transitions.length - 1 ? ',' : ''}`);
+    });
+    lines.push(`    )`);
+  }
+
+  lines.push(`    .with_entrypoint("${entrypoint}")`);
+
+  const allKeys = [...new Set(nodes.flatMap((n) => [...n.reads, ...n.writes]))];
+  if (allKeys.length > 0) {
+    const stateInit = allKeys.map((k) => `${k}=None`).join(', ');
+    lines.push(`    .with_state(${stateInit})`);
+  }
+
+  lines.push('    .with_tracker(project="my_app")');
+  lines.push('    .build()');
+  lines.push(')');
+  lines.push('');
+
+  return lines.join('\n');
+};
+
+export type ProjectFile = {
+  name: string;
+  language: string;
+  content: string;
+};
+
+export const generateProjectFiles = (
+  nodes: BuilderNode[],
+  edges: BuilderEdge[],
+  entrypoint: string
+): ProjectFile[] => {
+  const hasStreaming = nodes.some((n) => n.nodeType === 'streaming');
+  const hasApi = nodes.some((n) => n.nodeType === 'api_call');
+
+  // actions.py
+  const actionsLines: string[] = [];
+  const actionsImports = ['State', 'action'];
+  if (hasStreaming) actionsImports.push('streaming_action');
+  actionsLines.push(`from burr.core import ${actionsImports.join(', ')}`);
+  actionsLines.push('');
+  actionsLines.push('');
+  for (const node of nodes) {
+    actionsLines.push(...generateActionCode(node));
+    actionsLines.push('');
+    actionsLines.push('');
+  }
+
+  // app.py
+  const hasWhen = edges.some((e) => e.condition.startsWith('when('));
+  const hasExpr = edges.some((e) => e.condition.startsWith('expr('));
+  const appLines: string[] = [];
+  appLines.push('from burr.core import ApplicationBuilder, default');
+  if (hasWhen || hasExpr) {
+    const extras = [];
+    if (hasWhen) extras.push('when');
+    if (hasExpr) extras.push('expr');
+    appLines.push(`from burr.core import ${extras.join(', ')}`);
+  }
+  appLines.push(`from actions import ${nodes.map((n) => n.name).join(', ')}`);
+  appLines.push('');
+  appLines.push('');
+  appLines.push('def build_app():');
+  appLines.push('    app = (');
+  appLines.push('        ApplicationBuilder()');
+  const actionNames = nodes.map((n) => `${n.name}=${n.name}`).join(', ');
+  appLines.push(`        .with_actions(${actionNames})`);
+  const transitions = edges.map((e) => {
+    const cond = !e.condition || e.condition === 'default' ? 'default' : e.condition;
+    return `("${e.source}", "${e.target}", ${cond})`;
+  });
+  if (transitions.length > 0) {
+    appLines.push('        .with_transitions(');
+    transitions.forEach((t, i) => {
+      appLines.push(`            ${t}${i < transitions.length - 1 ? ',' : ''}`);
+    });
+    appLines.push('        )');
+  }
+  appLines.push(`        .with_entrypoint("${entrypoint}")`);
+  const allKeys = [...new Set(nodes.flatMap((n) => [...n.reads, ...n.writes]))];
+  if (allKeys.length > 0) {
+    const stateInit = allKeys.map((k) => `${k}=None`).join(', ');
+    appLines.push(`        .with_state(${stateInit})`);
+  }
+  appLines.push('        .with_tracker(project="my_app")');
+  appLines.push('        .build()');
+  appLines.push('    )');
+  appLines.push('    return app');
+  appLines.push('');
+
+  // run.py
+  const runLines = [
+    'from app import build_app',
+    '',
+    '',
+    'if __name__ == "__main__":',
+    '    app = build_app()',
+    '    app.run(halt_after=["result_1"])',
+    '    print("Done! Check the Burr UI for tracking.")',
+    ''
+  ];
+
+  // requirements.txt
+  const deps = ['apache-burr[tracking]'];
+  if (hasApi) deps.push('requests');
+  const reqContent = deps.join('\n') + '\n';
+
+  return [
+    { name: 'actions.py', language: 'python', content: actionsLines.join('\n') },
+    { name: 'app.py', language: 'python', content: appLines.join('\n') },
+    { name: 'run.py', language: 'python', content: runLines.join('\n') },
+    { name: 'requirements.txt', language: 'plaintext', content: reqContent }
+  ];
+};
diff --git a/telemetry/ui/src/utils/codeParser.ts b/telemetry/ui/src/utils/codeParser.ts
new file mode 100644
index 000000000..69dcc1003
--- /dev/null
+++ b/telemetry/ui/src/utils/codeParser.ts
@@ -0,0 +1,201 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BuilderNode, NodeType } from './codeGenerator';
+import { createDefaultNode, resetNodeIdCounter, appendToEnd } from './treeUtils';
+
+type ParsedAction = {
+  name: string;
+  reads: string[];
+  writes: string[];
+  inputs: string[];
+  nodeType: NodeType;
+  body: string;
+};
+
+type ParsedTransition = {
+  from: string;
+  to: string;
+  condition: string;
+};
+
+type ParseResult = {
+  actions: ParsedAction[];
+  transitions: ParsedTransition[];
+  entrypoint: string;
+  error?: string;
+};
+
+function parseStringList(raw: string): string[] {
+  const matches = raw.match(/"([^"]+)"|'([^']+)'/g);
+  if (!matches) return [];
+  return matches.map((m) => m.replace(/['"]/g, ''));
+}
+
+function detectNodeType(
+  name: string,
+  reads: string[],
+  writes: string[],
+  decoratorLine: string,
+  body: string
+): NodeType {
+  if (decoratorLine.includes('streaming_action')) return 'streaming';
+  if (name.startsWith('input') || (reads.length === 0 && writes.length > 0 && body.includes('user_input')))
+    return 'input';
+  if (name.startsWith('result') || (writes.length === 0 && reads.length > 0)) return 'result';
+  if (name.includes('llm') || body.includes('openai') || body.includes('anthropic') || body.includes('gpt'))
+    return 'llm_call';
+  if (name.includes('api') || body.includes('requests.')) return 'api_call';
+  if (name.includes('loop')) return 'loop';
+  if (name.includes('router') || name.includes('branch')) return 'router';
+  return 'action';
+}
+
+export function parsePythonCode(code: string): ParseResult {
+  const actions: ParsedAction[] = [];
+  const transitions: ParsedTransition[] = [];
+  let entrypoint = '';
+
+  try {
+    const lines = code.split('\n');
+
+    // Parse @action / @streaming_action decorated functions
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      const decoratorMatch = line.match(
+        /^@(?:streaming_)?action\s*\(\s*reads\s*=\s*\[([^\]]*)\]\s*,\s*writes\s*=\s*\[([^\]]*)\]\s*\)/
+      );
+      if (!decoratorMatch) continue;
+
+      const reads = parseStringList(decoratorMatch[1]);
+      const writes = parseStringList(decoratorMatch[2]);
+
+      // Next line should be def
+      const defLine = lines[i + 1]?.trim() || '';
+      const defMatch = defLine.match(/^def\s+(\w+)\s*\(([^)]*)\)/);
+      if (!defMatch) continue;
+
+      const name = defMatch[1];
+      const paramsRaw = defMatch[2];
+
+      // Extract inputs (parameters after state: State)
+      const inputs: string[] = [];
+      const params = paramsRaw.split(',').map((p) => p.trim());
+      for (const param of params) {
+        if (param.startsWith('state') || param === '') continue;
+        const paramName = param.split(':')[0].split('=')[0].trim();
+        if (paramName && paramName !== 'state') inputs.push(paramName);
+      }
+
+      // Collect function body
+      let body = '';
+      for (let j = i + 2; j < lines.length; j++) {
+        const bodyLine = lines[j];
+        if (bodyLine.trim() === '' && lines[j + 1]?.trim() === '') break;
+        if (/^[^\s]/.test(bodyLine) && bodyLine.trim() !== '') break;
+        body += bodyLine + '\n';
+      }
+
+      const nodeType = detectNodeType(name, reads, writes, line, body);
+      actions.push({ name, reads, writes, inputs, nodeType, body: body.trim() });
+    }
+
+    // Parse .with_transitions(...)
+    const transitionPattern = /\(\s*"(\w+)"\s*,\s*"(\w+)"\s*,\s*([^)]+)\)/g;
+    let tMatch;
+    while ((tMatch = transitionPattern.exec(code)) !== null) {
+      transitions.push({
+        from: tMatch[1],
+        to: tMatch[2],
+        condition: tMatch[3].trim()
+      });
+    }
+
+    // Parse .with_entrypoint("...")
+    const entryMatch = code.match(/\.with_entrypoint\(\s*"(\w+)"\s*\)/);
+    if (entryMatch) {
+      entrypoint = entryMatch[1];
+    } else if (actions.length > 0) {
+      entrypoint = actions[0].name;
+    }
+  } catch (e) {
+    return { actions: [], transitions: [], entrypoint: '', error: String(e) };
+  }
+
+  return { actions, transitions, entrypoint };
+}
+
+export function buildTreeFromParsed(parsed: ParseResult): BuilderNode | null {
+  if (parsed.actions.length === 0) return null;
+
+  resetNodeIdCounter();
+
+  const nodeMap = new Map<string, BuilderNode>();
+  for (const action of parsed.actions) {
+    const node = createDefaultNode(action.nodeType);
+    node.name = action.name;
+    node.reads = action.reads;
+    node.writes = action.writes;
+    node.inputs = action.inputs;
+    if (action.body && action.nodeType === 'code') {
+      node.codeBody = action.body
+        .split('\n')
+        .map((l) => l.replace(/^ {4}/, ''))
+        .join('\n');
+    }
+    nodeMap.set(action.name, node);
+  }
+
+  // Build chain from transitions, starting at entrypoint
+  const startName = parsed.entrypoint || parsed.actions[0].name;
+  if (!nodeMap.has(startName)) return null;
+
+  // Build adjacency from transitions (only forward edges, skip self-loops)
+  const forwardEdges = new Map<string, string>();
+  for (const t of parsed.transitions) {
+    if (!forwardEdges.has(t.from) && t.from !== t.to) {
+      forwardEdges.set(t.from, t.to);
+    }
+  }
+
+  // Chain nodes following transitions
+  let root: BuilderNode | null = null;
+  const visited = new Set<string>();
+  let currentName: string | undefined = startName;
+
+  while (currentName && !visited.has(currentName)) {
+    visited.add(currentName);
+    const node = nodeMap.get(currentName);
+    if (!node) break;
+    node.nextAction = undefined;
+    root = root ? appendToEnd(root, node) : node;
+    currentName = forwardEdges.get(currentName);
+  }
+
+  // Append any unvisited nodes at the end
+  for (const action of parsed.actions) {
+    if (!visited.has(action.name) && nodeMap.has(action.name)) {
+      const node = nodeMap.get(action.name)!;
+      node.nextAction = undefined;
+      root = root ? appendToEnd(root, node) : node;
+    }
+  }
+
+  return root;
+}
diff --git a/telemetry/ui/src/utils/flowLayout.ts b/telemetry/ui/src/utils/flowLayout.ts
new file mode 100644
index 000000000..34b4a063c
--- /dev/null
+++ b/telemetry/ui/src/utils/flowLayout.ts
@@ -0,0 +1,384 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BuilderNode } from './codeGenerator';
+import {
+  BurrNodeType,
+  BurrEdgeType,
+  BurrGraph,
+  BurrNode,
+  BurrEdge,
+  BurrStepNode,
+  BurrGraphEndNode,
+  BurrStraightLineEdge,
+  BurrBigAddButtonNode,
+  BurrLoopReturnNode,
+  InsertLocation
+} from './builderTypes';
+
+// Canvas constants (matching Activepieces proportions)
+export const CANVAS = {
+  STEP_WIDTH: 220,
+  STEP_HEIGHT: 80,
+  VSPACE: 60,
+  HSPACE: 80,
+  ARC: 15,
+  ADD_BUTTON_SIZE: 20,
+  BIG_ADD_BUTTON_SIZE: 50,
+  LOOP_VOFFSET: 120,
+  ROUTER_VOFFSET: 150,
+  LINE_WIDTH: 1.5,
+  STEP_LINE_GAP: 7
+} as const;
+
+// SVG arc path segments
+export const ARC_LEFT = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,0 -${CANVAS.ARC},${CANVAS.ARC}`;
+export const ARC_RIGHT = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 ${CANVAS.ARC},${CANVAS.ARC}`;
+export const ARC_LEFT_DOWN = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 -${CANVAS.ARC},${CANVAS.ARC}`;
+export const ARC_RIGHT_DOWN = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,0 ${CANVAS.ARC},${CANVAS.ARC}`;
+export const ARC_RIGHT_UP = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 -${CANVAS.ARC},-${CANVAS.ARC}`;
+export const ARC_LEFT_UP = `a-${CANVAS.ARC},-${CANVAS.ARC} 0 0,0 ${CANVAS.ARC},-${CANVAS.ARC}`;
+export const ARROW_DOWN = 'm6 -6 l-6 6 m-6 -6 l6 6';
+
+type BoundingBox = {
+  width: number;
+  height: number;
+  left: number;
+  right: number;
+};
+
+function doesAffectBoundingBox(type: string): boolean {
+  return (
+    type === BurrNodeType.STEP ||
+    type === BurrNodeType.BIG_ADD_BUTTON ||
+    type === BurrNodeType.LOOP_RETURN
+  );
+}
+
+export function calculateBoundingBox(graph: BurrGraph): BoundingBox {
+  if (graph.nodes.length === 0) {
+    return { width: CANVAS.STEP_WIDTH, height: 0, left: CANVAS.STEP_WIDTH / 2, right: CANVAS.STEP_WIDTH / 2 };
+  }
+  const affectingNodes = graph.nodes.filter((n) => doesAffectBoundingBox(n.type));
+  if (affectingNodes.length === 0) {
+    // Only GRAPH_END nodes exist; use all nodes for bounds
+    const ys = graph.nodes.map((n) => n.position.y);
+    return {
+      width: CANVAS.STEP_WIDTH,
+      height: Math.max(...ys) - Math.min(...ys),
+      left: CANVAS.STEP_WIDTH / 2,
+      right: CANVAS.STEP_WIDTH / 2
+    };
+  }
+  const minX = Math.min(...affectingNodes.map((n) => n.position.x));
+  const maxX = Math.max(...affectingNodes.map((n) => n.position.x + CANVAS.STEP_WIDTH));
+  const allYs = graph.nodes.map((n) => n.position.y);
+  const maxY = Math.max(...allYs);
+  const minY = Math.min(...allYs);
+  return {
+    width: maxX - minX,
+    height: maxY - minY,
+    left: -minX + CANVAS.STEP_WIDTH / 2,
+    right: maxX - CANVAS.STEP_WIDTH / 2
+  };
+}
+
+export function offsetGraph(graph: BurrGraph, offset: { x: number; y: number }): BurrGraph {
+  return {
+    nodes: graph.nodes.map((node) => ({
+      ...node,
+      position: { x: node.position.x + offset.x, y: node.position.y + offset.y }
+    })),
+    edges: [...graph.edges]
+  };
+}
+
+export function mergeGraph(g1: BurrGraph, g2: BurrGraph): BurrGraph {
+  return {
+    nodes: [...g1.nodes, ...g2.nodes],
+    edges: [...g1.edges, ...g2.edges]
+  };
+}
+
+function createStepGraph(step: BuilderNode, graphHeight: number): BurrGraph {
+  const stepNode: BurrStepNode = {
+    id: step.id,
+    type: BurrNodeType.STEP,
+    position: { x: 0, y: 0 },
+    data: {
+      stepId: step.id,
+      name: step.name,
+      nodeType: step.nodeType,
+      reads: step.reads,
+      writes: step.writes,
+      inputs: step.inputs,
+      unresolvedReads: [],
+      isSelected: false,
+      onSelect: () => {}
+    },
+    selectable: true,
+    draggable: false
+  };
+
+  const graphEndNode: BurrGraphEndNode = {
+    id: `${step.id}-subgraph-end`,
+    type: BurrNodeType.GRAPH_END,
+    position: { x: CANVAS.STEP_WIDTH / 2, y: graphHeight },
+    data: {},
+    selectable: false
+  };
+
+  const isCompound = step.nodeType === 'loop' || step.nodeType === 'router';
+
+  const edges: BurrEdge[] = isCompound
+    ? []
+    : [
+        {
+          id: `${step.id}-to-end`,
+          source: step.id,
+          target: `${step.id}-subgraph-end`,
+          type: BurrEdgeType.STRAIGHT_LINE,
+          data: {
+            drawArrowHead: !!step.nextAction,
+            parentStepId: step.id
+          }
+        } as BurrStraightLineEdge
+      ];
+
+  return { nodes: [stepNode, graphEndNode], edges };
+}
+
+function createBigAddButtonGraph(
+  parentStep: BuilderNode,
+  insertCtx: BurrBigAddButtonNode['data']
+): BurrGraph {
+  const bigButton: BurrBigAddButtonNode = {
+    id: `${parentStep.id}-big-add-${insertCtx.edgeId}`,
+    type: BurrNodeType.BIG_ADD_BUTTON,
+    position: { x: 0, y: 0 },
+    data: insertCtx,
+    selectable: false
+  };
+
+  const endNode: BurrGraphEndNode = {
+    id: `${parentStep.id}-subgraph-bigadd-end-${insertCtx.edgeId}`,
+    type: BurrNodeType.GRAPH_END,
+    position: { x: CANVAS.STEP_WIDTH / 2, y: CANVAS.STEP_HEIGHT + CANVAS.VSPACE },
+    data: {},
+    selectable: false
+  };
+
+  const edge: BurrStraightLineEdge = {
+    id: `big-button-line-${insertCtx.edgeId}`,
+    source: bigButton.id,
+    target: endNode.id,
+    type: BurrEdgeType.STRAIGHT_LINE,
+    data: { drawArrowHead: false, hideAddButton: true, parentStepId: parentStep.id }
+  };
+
+  return { nodes: [bigButton, endNode], edges: [edge] };
+}
+
+function buildLoopChildGraph(step: BuilderNode): BurrGraph {
+  const childGraph = step.firstLoopAction
+    ? buildFlowGraph(step.firstLoopAction)
+    : createBigAddButtonGraph(step, {
+        location: InsertLocation.INSIDE_LOOP,
+        loopStepId: step.id,
+        edgeId: `${step.id}-loop-start-edge`
+      });
+
+  const childBBox = calculateBoundingBox(childGraph);
+  const deltaLeftX =
+    -(childBBox.width + CANVAS.STEP_WIDTH + CANVAS.HSPACE - CANVAS.STEP_WIDTH / 2 - childBBox.right) / 2 -
+    CANVAS.STEP_WIDTH / 2;
+
+  const loopReturnNode: BurrLoopReturnNode = {
+    id: `${step.id}-loop-return-node`,
+    type: BurrNodeType.LOOP_RETURN,
+    position: {
+      x: deltaLeftX + CANVAS.STEP_WIDTH / 2,
+      y: CANVAS.STEP_HEIGHT + CANVAS.LOOP_VOFFSET + childBBox.height / 2
+    },
+    data: {},
+    selectable: false
+  };
+
+  const childGraphOffset = offsetGraph(childGraph, {
+    x: deltaLeftX + CANVAS.STEP_WIDTH + CANVAS.HSPACE + childBBox.left,
+    y: CANVAS.LOOP_VOFFSET + CANVAS.STEP_HEIGHT
+  });
+
+  const edges: BurrEdge[] = [
+    {
+      id: `${step.id}-loop-start-edge`,
+      source: step.id,
+      target: childGraph.nodes[0].id,
+      type: BurrEdgeType.LOOP_START,
+      data: {
+        isLoopEmpty: !step.firstLoopAction,
+        parentStepId: step.id
+      }
+    },
+    {
+      id: `${step.id}-loop-return-edge`,
+      source: childGraph.nodes[childGraph.nodes.length - 1].id,
+      target: `${step.id}-loop-return-node`,
+      type: BurrEdgeType.LOOP_RETURN,
+      data: {
+        parentStepId: step.id,
+        isLoopEmpty: !step.firstLoopAction,
+        drawArrowHeadAfterEnd: !!step.nextAction,
+        verticalSpaceBetweenReturnNodeStartAndEnd: childBBox.height + CANVAS.VSPACE
+      }
+    }
+  ];
+
+  const subgraphEnd: BurrGraphEndNode = {
+    id: `${step.id}-loop-subgraph-end`,
+    type: BurrNodeType.GRAPH_END,
+    position: {
+      x: CANVAS.STEP_WIDTH / 2,
+      y: CANVAS.STEP_HEIGHT + CANVAS.LOOP_VOFFSET + childBBox.height + CANVAS.ARC + CANVAS.VSPACE
+    },
+    data: {},
+    selectable: false
+  };
+
+  return {
+    nodes: [loopReturnNode, ...childGraphOffset.nodes, subgraphEnd],
+    edges: [...edges, ...childGraphOffset.edges]
+  };
+}
+
+function buildRouterChildGraph(step: BuilderNode): BurrGraph {
+  const branches = step.branches || [];
+
+  const childGraphs = branches.map((branch, index) => {
+    return branch.firstAction
+      ? buildFlowGraph(branch.firstAction)
+      : createBigAddButtonGraph(step, {
+          location: InsertLocation.INSIDE_BRANCH,
+          routerStepId: step.id,
+          branchIndex: index,
+          edgeId: `${step.id}-branch-${index}-start-edge`
+        });
+  });
+
+  if (childGraphs.length === 0) {
+    return { nodes: [], edges: [] };
+  }
+
+  const childGraphsOffset = offsetRouterChildSteps(childGraphs);
+
+  const maxHeight = Math.max(...childGraphsOffset.map((cg) => calculateBoundingBox(cg).height));
+
+  const subgraphEnd: BurrGraphEndNode = {
+    id: `${step.id}-branch-subgraph-end`,
+    type: BurrNodeType.GRAPH_END,
+    position: {
+      x: CANVAS.STEP_WIDTH / 2,
+      y: CANVAS.STEP_HEIGHT + CANVAS.ROUTER_VOFFSET + maxHeight + CANVAS.ARC + CANVAS.VSPACE
+    },
+    data: {},
+    selectable: false
+  };
+
+  const edges: BurrEdge[] = childGraphsOffset
+    .map((childGraph, branchIndex) => {
+      const branchData = branches[branchIndex];
+      return [
+        {
+          id: `${step.id}-branch-${branchIndex}-start-edge`,
+          source: step.id,
+          target: childGraph.nodes[0].id,
+          type: BurrEdgeType.ROUTER_START,
+          data: {
+            isBranchEmpty: !branchData.firstAction,
+            label: branchData.name,
+            branchIndex,
+            drawHorizontalLine: branchIndex === 0 || branchIndex === childGraphsOffset.length - 1,
+            drawStartingVerticalLine: branchIndex === 0,
+            parentStepId: step.id
+          }
+        },
+        {
+          id: `${step.id}-branch-${branchIndex}-end-edge`,
+          source: childGraph.nodes[childGraph.nodes.length - 1].id,
+          target: subgraphEnd.id,
+          type: BurrEdgeType.ROUTER_END,
+          data: {
+            drawEndingVerticalLine: branchIndex === 0,
+            verticalSpaceBetweenLastNodeInBranchAndEndLine:
+              subgraphEnd.position.y -
+              childGraph.nodes[childGraph.nodes.length - 1].position.y -
+              CANVAS.VSPACE -
+              CANVAS.ARC,
+            drawHorizontalLine: branchIndex === 0 || branchIndex === childGraphsOffset.length - 1,
+            routerStepId: step.id,
+            isNextStepEmpty: !step.nextAction
+          }
+        }
+      ];
+    })
+    .flat() as BurrEdge[];
+
+  return {
+    nodes: [...childGraphsOffset.flatMap((cg) => cg.nodes), subgraphEnd],
+    edges: [...childGraphsOffset.flatMap((cg) => cg.edges), ...edges]
+  };
+}
+
+function offsetRouterChildSteps(childGraphs: BurrGraph[]): BurrGraph[] {
+  const bboxes = childGraphs.map((g) => calculateBoundingBox(g));
+  const totalWidth =
+    bboxes.reduce((acc, b) => acc + b.width, 0) + CANVAS.HSPACE * (childGraphs.length - 1);
+
+  let deltaLeftX = -(totalWidth - bboxes[0].left - bboxes[bboxes.length - 1].right) / 2 - bboxes[0].left;
+
+  return bboxes.map((bbox, index) => {
+    const x = deltaLeftX + bbox.left;
+    deltaLeftX += bbox.width + CANVAS.HSPACE;
+    return offsetGraph(childGraphs[index], {
+      x,
+      y: CANVAS.STEP_HEIGHT + CANVAS.ROUTER_VOFFSET
+    });
+  });
+}
+
+export function buildFlowGraph(step: BuilderNode | undefined): BurrGraph {
+  if (!step) return { nodes: [], edges: [] };
+
+  const graph = createStepGraph(step, CANVAS.STEP_HEIGHT + CANVAS.VSPACE);
+
+  const childGraph =
+    step.nodeType === 'loop'
+      ? buildLoopChildGraph(step)
+      : step.nodeType === 'router'
+        ? buildRouterChildGraph(step)
+        : null;
+
+  const graphWithChild = childGraph ? mergeGraph(graph, childGraph) : graph;
+
+  const nextStepGraph = buildFlowGraph(step.nextAction);
+  return mergeGraph(
+    graphWithChild,
+    offsetGraph(nextStepGraph, { x: 0, y: calculateBoundingBox(graphWithChild).height })
+  );
+}
diff --git a/telemetry/ui/src/utils/stateFlow.ts b/telemetry/ui/src/utils/stateFlow.ts
new file mode 100644
index 000000000..58d74516b
--- /dev/null
+++ b/telemetry/ui/src/utils/stateFlow.ts
@@ -0,0 +1,78 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ActionModel, TransitionModel } from '../api';
+
+/**
+ * Returns action names whose writes[] intersect with the given action's reads[].
+ * These are the upstream nodes that produce state keys this action consumes.
+ */
+export const getUpstreamWriters = (
+  actionName: string,
+  actions: ActionModel[],
+  _transitions: TransitionModel[]
+): string[] => {
+  const target = actions.find((a) => a.name === actionName);
+  if (!target || !target.reads || target.reads.length === 0) return [];
+
+  const readsSet = new Set(target.reads);
+  return actions
+    .filter((a) => a.name !== actionName && (a.writes || []).some((w) => readsSet.has(w)))
+    .map((a) => a.name);
+};
+
+/**
+ * Returns action names whose reads[] intersect with the given action's writes[].
+ * These are the downstream nodes that consume state keys this action produces.
+ */
+export const getDownstreamReaders = (
+  actionName: string,
+  actions: ActionModel[],
+  _transitions: TransitionModel[]
+): string[] => {
+  const target = actions.find((a) => a.name === actionName);
+  if (!target || !target.writes || target.writes.length === 0) return [];
+
+  const writesSet = new Set(target.writes);
+  return actions
+    .filter((a) => a.name !== actionName && (a.reads || []).some((r) => writesSet.has(r)))
+    .map((a) => a.name);
+};
+
+/**
+ * Returns a map of action name to unresolved read keys.
+ * A read is "unresolved" if no other action in the graph writes that key.
+ */
+export const getUnresolvedReads = (
+  actions: ActionModel[],
+  _transitions: TransitionModel[]
+): Map<string, string[]> => {
+  const allWrites = new Set(actions.flatMap((a) => a.writes || []));
+  const result = new Map<string, string[]>();
+
+  for (const action of actions) {
+    const reads = action.reads || [];
+    const unresolved = reads.filter((r) => !allWrites.has(r));
+    if (unresolved.length > 0) {
+      result.set(action.name, unresolved);
+    }
+  }
+
+  return result;
+};
diff --git a/telemetry/ui/src/utils/treeUtils.ts b/telemetry/ui/src/utils/treeUtils.ts
new file mode 100644
index 000000000..47ee1c368
--- /dev/null
+++ b/telemetry/ui/src/utils/treeUtils.ts
@@ -0,0 +1,305 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { BuilderNode, BuilderEdge, BuilderBranch, NodeType, NODE_TYPE_META } from './codeGenerator';
+
+let _nodeIdCounter = 0;
+
+export function resetNodeIdCounter() {
+  _nodeIdCounter = 0;
+}
+
+export function createDefaultNode(nodeType: NodeType): BuilderNode {
+  const id = `node_${++_nodeIdCounter}`;
+  const prefixes: Record<NodeType, string> = {
+    action: 'action',
+    input: 'input',
+    result: 'result',
+    llm_call: 'llm_call',
+    api_call: 'api_call',
+    code: 'code_block',
+    streaming: 'stream',
+    loop: 'loop',
+    router: 'router'
+  };
+  const name = `${prefixes[nodeType]}_${_nodeIdCounter}`;
+
+  const node: BuilderNode = {
+    id,
+    name,
+    nodeType,
+    reads: [],
+    writes: [],
+    inputs: [],
+    position: { x: 0, y: 0 }
+  };
+
+  switch (nodeType) {
+    case 'input':
+      node.inputs = ['user_input'];
+      node.writes = ['user_input'];
+      break;
+    case 'result':
+      node.reads = ['output'];
+      break;
+    case 'llm_call':
+      node.reads = ['prompt'];
+      node.writes = ['response'];
+      node.llmProvider = 'openai';
+      node.llmModel = 'gpt-4';
+      break;
+    case 'api_call':
+      node.writes = ['api_response'];
+      node.apiMethod = 'GET';
+      node.apiUrl = 'https://api.example.com';
+      break;
+    case 'streaming':
+      node.reads = ['prompt'];
+      node.writes = ['output'];
+      break;
+    case 'loop':
+      node.reads = ['items'];
+      node.writes = ['current_item', 'loop_index'];
+      node.loopVariable = 'items';
+      node.itemVariable = 'current_item';
+      node.branches = [];
+      break;
+    case 'router':
+      node.reads = ['status'];
+      node.branches = [
+        { name: 'Branch 1', condition: 'default', firstAction: undefined },
+        { name: 'Branch 2', condition: 'default', firstAction: undefined }
+      ];
+      break;
+  }
+
+  return node;
+}
+
+export function findNodeById(root: BuilderNode | undefined, id: string): BuilderNode | undefined {
+  if (!root) return undefined;
+  if (root.id === id) return root;
+
+  // Search in nextAction chain
+  const inNext = findNodeById(root.nextAction, id);
+  if (inNext) return inNext;
+
+  // Search in loop children
+  if (root.firstLoopAction) {
+    const inLoop = findNodeById(root.firstLoopAction, id);
+    if (inLoop) return inLoop;
+  }
+
+  // Search in router branches
+  if (root.branches) {
+    for (const branch of root.branches) {
+      const inBranch = findNodeById(branch.firstAction, id);
+      if (inBranch) return inBranch;
+    }
+  }
+
+  return undefined;
+}
+
+export function mapNode(
+  root: BuilderNode | undefined,
+  id: string,
+  fn: (node: BuilderNode) => BuilderNode
+): BuilderNode | undefined {
+  if (!root) return undefined;
+
+  let updated = root.id === id ? fn(root) : { ...root };
+
+  if (root.nextAction) {
+    updated = { ...updated, nextAction: mapNode(root.nextAction, id, fn) };
+  }
+  if (root.firstLoopAction) {
+    updated = { ...updated, firstLoopAction: mapNode(root.firstLoopAction, id, fn) };
+  }
+  if (root.branches) {
+    updated = {
+      ...updated,
+      branches: root.branches.map((b) => ({
+        ...b,
+        firstAction: mapNode(b.firstAction, id, fn)
+      }))
+    };
+  }
+
+  return updated;
+}
+
+export function insertAfter(
+  root: BuilderNode | undefined,
+  parentId: string,
+  newNode: BuilderNode
+): BuilderNode | undefined {
+  if (!root) return undefined;
+
+  if (root.id === parentId) {
+    return {
+      ...root,
+      nextAction: { ...newNode, nextAction: root.nextAction }
+    };
+  }
+
+  return {
+    ...root,
+    nextAction: insertAfter(root.nextAction, parentId, newNode),
+    firstLoopAction: root.firstLoopAction
+      ? insertAfter(root.firstLoopAction, parentId, newNode)
+      : undefined,
+    branches: root.branches?.map((b) => ({
+      ...b,
+      firstAction: insertAfter(b.firstAction, parentId, newNode)
+    }))
+  };
+}
+
+export function prependToChain(
+  newNode: BuilderNode,
+  existingHead: BuilderNode | undefined
+): BuilderNode {
+  return { ...newNode, nextAction: existingHead };
+}
+
+export function appendToEnd(
+  root: BuilderNode | undefined,
+  newNode: BuilderNode
+): BuilderNode {
+  if (!root) return newNode;
+  if (!root.nextAction) {
+    return { ...root, nextAction: newNode };
+  }
+  return { ...root, nextAction: appendToEnd(root.nextAction, newNode) };
+}
+
+export function removeFromTree(
+  root: BuilderNode | undefined,
+  id: string
+): BuilderNode | undefined {
+  if (!root) return undefined;
+
+  // If root itself is the target, splice it out but preserve its nextAction
+  // (loop children and branch children belong to the node, so they are removed with it)
+  if (root.id === id) {
+    return root.nextAction;
+  }
+
+  return {
+    ...root,
+    nextAction: removeFromTree(root.nextAction, id),
+    firstLoopAction: root.firstLoopAction
+      ? removeFromTree(root.firstLoopAction, id)
+      : undefined,
+    branches: root.branches?.map((b) => ({
+      ...b,
+      firstAction: removeFromTree(b.firstAction, id)
+    }))
+  };
+}
+
+function collectChain(node: BuilderNode | undefined): BuilderNode[] {
+  if (!node) return [];
+  return [node, ...collectChain(node.nextAction)];
+}
+
+export function flattenTree(
+  root: BuilderNode | undefined
+): { nodes: BuilderNode[]; edges: BuilderEdge[] } {
+  if (!root) return { nodes: [], edges: [] };
+
+  const nodes: BuilderNode[] = [];
+  const edges: BuilderEdge[] = [];
+  let edgeCounter = 0;
+
+  function walk(node: BuilderNode | undefined) {
+    if (!node) return;
+    nodes.push(node);
+
+    // nextAction edge (skip for router nodes since branches handle convergence)
+    if (node.nextAction) {
+      const hasRouterBranches = node.branches && node.branches.length > 0;
+      if (!hasRouterBranches) {
+        edges.push({
+          id: `edge_${++edgeCounter}`,
+          source: node.name,
+          target: node.nextAction.name,
+          condition: 'default'
+        });
+      }
+      walk(node.nextAction);
+    }
+
+    // Loop children
+    if (node.firstLoopAction) {
+      edges.push({
+        id: `edge_${++edgeCounter}`,
+        source: node.name,
+        target: node.firstLoopAction.name,
+        condition: node.loopVariable
+          ? `expr("${node.loopVariable}_index < len(${node.loopVariable})")`
+          : 'default'
+      });
+      walk(node.firstLoopAction);
+
+      // Return edge from last child back to loop (for code gen)
+      const chain = collectChain(node.firstLoopAction);
+      const lastChild = chain[chain.length - 1];
+      if (lastChild) {
+        edges.push({
+          id: `edge_${++edgeCounter}`,
+          source: lastChild.name,
+          target: node.name,
+          condition: 'default'
+        });
+      }
+    }
+
+    // Router branches
+    if (node.branches) {
+      for (const branch of node.branches) {
+        if (branch.firstAction) {
+          edges.push({
+            id: `edge_${++edgeCounter}`,
+            source: node.name,
+            target: branch.firstAction.name,
+            condition: branch.condition
+          });
+          walk(branch.firstAction);
+
+          // Edge from last in branch to node.nextAction (if exists)
+          const chain = collectChain(branch.firstAction);
+          const lastInBranch = chain[chain.length - 1];
+          if (lastInBranch && node.nextAction) {
+            edges.push({
+              id: `edge_${++edgeCounter}`,
+              source: lastInBranch.name,
+              target: node.nextAction.name,
+              condition: 'default'
+            });
+          }
+        }
+      }
+    }
+  }
+
+  walk(root);
+  return { nodes, edges };
+}

From 90e52cee3a5335df3356b3b37a6ac60bf02c62a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 16:12:16 -0300
Subject: [PATCH 04/10] fix: resolve CI lint errors

- Remove unused imports/variables flagged by ESLint
- Replace regex literal with RegExp constructor to avoid no-control-regex
- Format workspace.py with black and isort
---
 burr/tracking/server/workspace.py                           | 4 +++-
 telemetry/ui/src/components/routes/project/SidePanel.tsx    | 2 +-
 .../ui/src/components/routes/workspace/RunTerminal.tsx      | 4 ++--
 telemetry/ui/src/hooks/useBuilderState.ts                   | 2 +-
 telemetry/ui/src/utils/flowLayout.ts                        | 1 -
 telemetry/ui/src/utils/stateFlow.ts                         | 6 +++---
 telemetry/ui/src/utils/treeUtils.ts                         | 2 +-
 7 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/burr/tracking/server/workspace.py b/burr/tracking/server/workspace.py
index 9d3f5c945..dc29c628a 100644
--- a/burr/tracking/server/workspace.py
+++ b/burr/tracking/server/workspace.py
@@ -144,7 +144,9 @@ def _validate_workspace(workspace: str) -> str:
     """Validate workspace is a registered link or the open endpoint validated it."""
     workspace_real = os.path.realpath(workspace)
     if not os.path.isdir(workspace_real):
-        raise HTTPException(status_code=400, detail="Workspace directory does not exist")
+        raise HTTPException(
+            status_code=400, detail="Workspace directory does not exist"
+        )
     links = _read_links()
     allowed = {os.path.realpath(p) for p in links.values()}
     if workspace_real not in allowed:
diff --git a/telemetry/ui/src/components/routes/project/SidePanel.tsx b/telemetry/ui/src/components/routes/project/SidePanel.tsx
index 2cc189ed9..1b94ca7bf 100644
--- a/telemetry/ui/src/components/routes/project/SidePanel.tsx
+++ b/telemetry/ui/src/components/routes/project/SidePanel.tsx
@@ -25,7 +25,7 @@ import { FileEntry, workspaceApi } from '../../../api/workspaceApi';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
 const FilesSidePanel = () => {
-  const { workspacePath, openTab, terminalVisible, setTerminalVisible } = useProjectWorkspace();
+  const { workspacePath, openTab, setTerminalVisible } = useProjectWorkspace();
   const [rootEntries, setRootEntries] = useState<FileEntry[]>([]);
 
   useEffect(() => {
diff --git a/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
index 23c2dc409..64f2938ff 100644
--- a/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
+++ b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
@@ -35,8 +35,8 @@ interface OutputLine {
 // Basic ANSI color codes to CSS classes
 function ansiToSpans(text: string): JSX.Element[] {
   const parts: JSX.Element[] = [];
-  // Match ANSI escape sequences
-  const ansiRegex = /\x1b\[([0-9;]*)m/g;
+  // Match ANSI escape sequences - eslint-disable-next-line no-control-regex
+  const ansiRegex = new RegExp('\\x1b\\[([0-9;]*)m', 'g');
   let lastIndex = 0;
   let currentClass = '';
   let ansiMatch;
diff --git a/telemetry/ui/src/hooks/useBuilderState.ts b/telemetry/ui/src/hooks/useBuilderState.ts
index 40deec934..fed1080b1 100644
--- a/telemetry/ui/src/hooks/useBuilderState.ts
+++ b/telemetry/ui/src/hooks/useBuilderState.ts
@@ -32,7 +32,7 @@ import {
 } from '../utils/treeUtils';
 import { buildFlowGraph } from '../utils/flowLayout';
 import { InsertContext, InsertLocation, BurrGraph } from '../utils/builderTypes';
-import { parsePythonCode, buildTreeFromParsed } from '../utils/codeParser';
+// codeParser is used by BuilderView for bidirectional sync
 
 export const useBuilderState = () => {
   const [rootNode, setRootNode] = useState<BuilderNode | null>(null);
diff --git a/telemetry/ui/src/utils/flowLayout.ts b/telemetry/ui/src/utils/flowLayout.ts
index 34b4a063c..26391e1c1 100644
--- a/telemetry/ui/src/utils/flowLayout.ts
+++ b/telemetry/ui/src/utils/flowLayout.ts
@@ -22,7 +22,6 @@ import {
   BurrNodeType,
   BurrEdgeType,
   BurrGraph,
-  BurrNode,
   BurrEdge,
   BurrStepNode,
   BurrGraphEndNode,
diff --git a/telemetry/ui/src/utils/stateFlow.ts b/telemetry/ui/src/utils/stateFlow.ts
index 58d74516b..845c9efa0 100644
--- a/telemetry/ui/src/utils/stateFlow.ts
+++ b/telemetry/ui/src/utils/stateFlow.ts
@@ -26,7 +26,7 @@ import { ActionModel, TransitionModel } from '../api';
 export const getUpstreamWriters = (
   actionName: string,
   actions: ActionModel[],
-  _transitions: TransitionModel[]
+  _transitions: TransitionModel[] // eslint-disable-line @typescript-eslint/no-unused-vars
 ): string[] => {
   const target = actions.find((a) => a.name === actionName);
   if (!target || !target.reads || target.reads.length === 0) return [];
@@ -44,7 +44,7 @@ export const getUpstreamWriters = (
 export const getDownstreamReaders = (
   actionName: string,
   actions: ActionModel[],
-  _transitions: TransitionModel[]
+  _transitions: TransitionModel[] // eslint-disable-line @typescript-eslint/no-unused-vars
 ): string[] => {
   const target = actions.find((a) => a.name === actionName);
   if (!target || !target.writes || target.writes.length === 0) return [];
@@ -61,7 +61,7 @@ export const getDownstreamReaders = (
  */
 export const getUnresolvedReads = (
   actions: ActionModel[],
-  _transitions: TransitionModel[]
+  _transitions: TransitionModel[] // eslint-disable-line @typescript-eslint/no-unused-vars
 ): Map<string, string[]> => {
   const allWrites = new Set(actions.flatMap((a) => a.writes || []));
   const result = new Map<string, string[]>();
diff --git a/telemetry/ui/src/utils/treeUtils.ts b/telemetry/ui/src/utils/treeUtils.ts
index 47ee1c368..8deabb4df 100644
--- a/telemetry/ui/src/utils/treeUtils.ts
+++ b/telemetry/ui/src/utils/treeUtils.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { BuilderNode, BuilderEdge, BuilderBranch, NodeType, NODE_TYPE_META } from './codeGenerator';
+import { BuilderNode, BuilderEdge, NodeType } from './codeGenerator';
 
 let _nodeIdCounter = 0;
 

From a2e79831fdd3e6aadab0d949947f9490e3807e3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 16:15:36 -0300
Subject: [PATCH 05/10] fix: format workspace.py with black --line-length=100

---
 burr/tracking/server/workspace.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/burr/tracking/server/workspace.py b/burr/tracking/server/workspace.py
index dc29c628a..1494936b3 100644
--- a/burr/tracking/server/workspace.py
+++ b/burr/tracking/server/workspace.py
@@ -144,9 +144,7 @@ def _validate_workspace(workspace: str) -> str:
     """Validate workspace is a registered link or the open endpoint validated it."""
     workspace_real = os.path.realpath(workspace)
     if not os.path.isdir(workspace_real):
-        raise HTTPException(
-            status_code=400, detail="Workspace directory does not exist"
-        )
+        raise HTTPException(status_code=400, detail="Workspace directory does not exist")
     links = _read_links()
     allowed = {os.path.realpath(p) for p in links.values()}
     if workspace_real not in allowed:
@@ -470,9 +468,7 @@ async def scan_burr_apps(workspace: str = Query(...)):
     results = []
     for root, dirs, filenames in os.walk(workspace_real):
         dirs[:] = [
-            d
-            for d in dirs
-            if not d.startswith(".") and d != "__pycache__" and d != "node_modules"
+            d for d in dirs if not d.startswith(".") and d != "__pycache__" and d != "node_modules"
         ]
         for fname in filenames:
             if not fname.endswith(".py"):

From 3d1ff295230ccb35362203d121938fbf156d088d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 16:18:42 -0300
Subject: [PATCH 06/10] fix: sort imports in run.py for isort

---
 burr/tracking/server/run.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/burr/tracking/server/run.py b/burr/tracking/server/run.py
index 45938ebbf..b9c85d531 100644
--- a/burr/tracking/server/run.py
+++ b/burr/tracking/server/run.py
@@ -26,13 +26,13 @@
 
 # TODO -- remove this, just for testing
 from burr.log_setup import setup_logging
+from burr.tracking.server import workspace
 from burr.tracking.server.backend import (
     AnnotationsBackendMixin,
     BackendBase,
     IndexingBackendMixin,
     SnapshottingBackendMixin,
 )
-from burr.tracking.server import workspace
 
 setup_logging(logging.INFO)
 

From 13d11091d64e08fe72f5159ee90ca1ff598ecb0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 16:25:19 -0300
Subject: [PATCH 07/10] fix: resolve ESLint no-explicit-any and no-unused-vars
 errors

- Replace `as any` with proper types where possible
- Add eslint-disable comments for icon type maps (heroicons ForwardRef)
- Remove unused `id` from edge component destructures
- Remove unused `langMap` variable from BuilderView
---
 telemetry/ui/src/components/routes/builder/BuilderGraph.tsx  | 4 ++--
 telemetry/ui/src/components/routes/builder/BuilderNode.tsx   | 1 +
 telemetry/ui/src/components/routes/builder/BuilderView.tsx   | 5 -----
 .../ui/src/components/routes/builder/NodeTypePicker.tsx      | 1 +
 .../src/components/routes/builder/edges/LoopReturnEdge.tsx   | 4 ++--
 .../ui/src/components/routes/builder/edges/LoopStartEdge.tsx | 4 ++--
 .../ui/src/components/routes/builder/edges/RouterEndEdge.tsx | 4 ++--
 .../src/components/routes/builder/edges/RouterStartEdge.tsx  | 4 ++--
 .../src/components/routes/builder/edges/StraightLineEdge.tsx | 4 ++--
 .../ui/src/components/routes/builder/nodes/BigAddButton.tsx  | 2 +-
 .../ui/src/components/routes/builder/nodes/StepNode.tsx      | 1 +
 telemetry/ui/src/components/routes/project/ActivityBar.tsx   | 1 +
 12 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx b/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
index 250b5d5ba..ed4e36246 100644
--- a/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
+++ b/telemetry/ui/src/components/routes/builder/BuilderGraph.tsx
@@ -27,7 +27,7 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
-import { BurrNodeType, BurrEdgeType, BurrGraph, InsertContext } from '../../../utils/builderTypes';
+import { BurrNodeType, BurrEdgeType, BurrGraph, BurrStepNode, InsertContext } from '../../../utils/builderTypes';
 import { NodeType } from '../../../utils/codeGenerator';
 
 import { StepNodeComponent } from './nodes/StepNode';
@@ -75,7 +75,7 @@ const BuilderGraphInner = (props: BuilderGraphProps) => {
   const flowNodes = useMemo(() => {
     return props.layoutGraph.nodes.map((node) => {
       if (node.type === BurrNodeType.STEP) {
-        const stepData = node.data as any;
+        const stepData = node.data as BurrStepNode['data'];
         return {
           ...node,
           data: {
diff --git a/telemetry/ui/src/components/routes/builder/BuilderNode.tsx b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
index bad27c95d..1ab7d568d 100644
--- a/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
+++ b/telemetry/ui/src/components/routes/builder/BuilderNode.tsx
@@ -33,6 +33,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NODE_ICONS: Record<NodeType, React.ComponentType<any>> = {
   action: BoltIcon,
   input: ArrowDownTrayIcon,
diff --git a/telemetry/ui/src/components/routes/builder/BuilderView.tsx b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
index 397e7ac64..d6bd98161 100644
--- a/telemetry/ui/src/components/routes/builder/BuilderView.tsx
+++ b/telemetry/ui/src/components/routes/builder/BuilderView.tsx
@@ -81,11 +81,6 @@ const EditorFileExplorer = (props: {
     });
   };
 
-  const langMap: Record<string, string> = {
-    py: 'python', js: 'javascript', ts: 'typescript', json: 'json',
-    yaml: 'yaml', yml: 'yaml', toml: 'toml', md: 'markdown', txt: 'plaintext'
-  };
-
   return (
     <div className="w-48 shrink-0 border-r border-gray-200 bg-gray-50 text-xs overflow-y-auto">
       {/* Generated files */}
diff --git a/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx b/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
index df8df1bf5..12344ab89 100644
--- a/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
+++ b/telemetry/ui/src/components/routes/builder/NodeTypePicker.tsx
@@ -33,6 +33,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { NodeType, NODE_TYPE_META } from '../../../utils/codeGenerator';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NODE_TYPE_ICONS: Record<NodeType, React.ComponentType<any>> = {
   action: BoltIcon,
   input: ArrowDownTrayIcon,
diff --git a/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
index 9fb68e89a..34b114dd5 100644
--- a/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
+++ b/telemetry/ui/src/components/routes/builder/edges/LoopReturnEdge.tsx
@@ -26,8 +26,7 @@ export const LoopReturnEdgeComponent = ({
   sourceX,
   sourceY,
   targetX,
-  data,
-  id
+  data
 }: EdgeProps & BurrLoopReturnEdge) => {
   const hLength = Math.abs(sourceX - targetX) - 2 * CANVAS.ARC;
   const vReturn = data.verticalSpaceBetweenReturnNodeStartAndEnd;
@@ -60,6 +59,7 @@ export const LoopReturnEdgeComponent = ({
       >
         <InlineAddButton
           context={{ location: InsertLocation.AFTER, parentStepId: data.parentStepId }}
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           onInsert={(data as any).onInsert || (() => {})}
         />
       </foreignObject>
diff --git a/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
index af4b5aa01..aa8a8da94 100644
--- a/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
+++ b/telemetry/ui/src/components/routes/builder/edges/LoopStartEdge.tsx
@@ -26,8 +26,7 @@ export const LoopStartEdgeComponent = ({
   sourceX,
   sourceY,
   targetX,
-  data,
-  id
+  data
 }: EdgeProps & BurrLoopStartEdge) => {
   const startY = sourceY + CANVAS.STEP_LINE_GAP;
   const vHalf = (CANVAS.VSPACE - 2 * CANVAS.STEP_LINE_GAP) / 2;
@@ -51,6 +50,7 @@ export const LoopStartEdgeComponent = ({
         >
           <InlineAddButton
             context={{ location: InsertLocation.INSIDE_LOOP, loopStepId: data.parentStepId }}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onInsert={(data as any).onInsert || (() => {})}
           />
         </foreignObject>
diff --git a/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
index 6dd5b2adf..8f1fc5285 100644
--- a/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
+++ b/telemetry/ui/src/components/routes/builder/edges/RouterEndEdge.tsx
@@ -34,8 +34,7 @@ export const RouterEndEdgeComponent = ({
   targetX,
   targetY,
   sourceY,
-  data,
-  id
+  data
 }: EdgeProps & BurrRouterEndEdge) => {
   const vLine = CANVAS.VSPACE - 2 * CANVAS.STEP_LINE_GAP;
   const hLength =
@@ -74,6 +73,7 @@ export const RouterEndEdgeComponent = ({
         >
           <InlineAddButton
             context={{ location: InsertLocation.AFTER, parentStepId: data.routerStepId }}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onInsert={(data as any).onInsert || (() => {})}
           />
         </foreignObject>
diff --git a/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
index f5f572b49..600c6a0ae 100644
--- a/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
+++ b/telemetry/ui/src/components/routes/builder/edges/RouterStartEdge.tsx
@@ -26,8 +26,7 @@ export const RouterStartEdgeComponent = ({
   sourceX,
   targetX,
   targetY,
-  data,
-  id
+  data
 }: EdgeProps & BurrRouterStartEdge) => {
   const vLine = CANVAS.VSPACE - CANVAS.STEP_LINE_GAP + 30;
   const dist = Math.abs(targetX - sourceX);
@@ -72,6 +71,7 @@ export const RouterStartEdgeComponent = ({
               routerStepId: data.parentStepId,
               branchIndex: data.branchIndex
             }}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onInsert={(data as any).onInsert || (() => {})}
           />
         </foreignObject>
diff --git a/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx b/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
index 5fdd419a2..b976cddd2 100644
--- a/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
+++ b/telemetry/ui/src/components/routes/builder/edges/StraightLineEdge.tsx
@@ -26,8 +26,7 @@ export const StraightLineEdgeComponent = ({
   sourceX,
   sourceY,
   targetY,
-  data,
-  id
+  data
 }: EdgeProps & BurrStraightLineEdge) => {
   const lineLength = targetY - sourceY;
   const path = `M ${sourceX} ${sourceY} v${lineLength} ${data.drawArrowHead ? ARROW_DOWN : ''}`;
@@ -47,6 +46,7 @@ export const StraightLineEdgeComponent = ({
         >
           <InlineAddButton
             context={{ location: InsertLocation.AFTER, parentStepId: data.parentStepId }}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             onInsert={(data as any).onInsert || (() => {})}
           />
         </foreignObject>
diff --git a/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx b/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
index ffa31b90d..6eddbcdf8 100644
--- a/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
+++ b/telemetry/ui/src/components/routes/builder/nodes/BigAddButton.tsx
@@ -28,7 +28,7 @@ import { NodeTypePicker } from '../NodeTypePicker';
 const HANDLE_STYLE = { opacity: 0, cursor: 'default' };
 
 const BigAddButtonComponent = React.memo(
-  ({ data, id }: { data: BurrBigAddButtonNode['data'] & { onInsert?: (nodeType: NodeType, ctx: InsertContext) => void }; id: string }) => {
+  ({ data }: { data: BurrBigAddButtonNode['data'] & { onInsert?: (nodeType: NodeType, ctx: InsertContext) => void }; id: string }) => {
     const [pickerOpen, setPickerOpen] = useState(false);
     const btnRef = useRef<HTMLButtonElement>(null);
 
diff --git a/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx b/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
index 9ee4f23d5..05a6ea0fa 100644
--- a/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
+++ b/telemetry/ui/src/components/routes/builder/nodes/StepNode.tsx
@@ -36,6 +36,7 @@ import { CANVAS } from '../../../../utils/flowLayout';
 import { BurrStepNode } from '../../../../utils/builderTypes';
 import { Chip } from '../../../common/chip';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const NODE_ICONS: Record<NodeType, React.ComponentType<any>> = {
   action: BoltIcon,
   input: ArrowDownTrayIcon,
diff --git a/telemetry/ui/src/components/routes/project/ActivityBar.tsx b/telemetry/ui/src/components/routes/project/ActivityBar.tsx
index f7b789860..7ad5de983 100644
--- a/telemetry/ui/src/components/routes/project/ActivityBar.tsx
+++ b/telemetry/ui/src/components/routes/project/ActivityBar.tsx
@@ -26,6 +26,7 @@ import {
 import { classNames } from '../../../utils/tailwind';
 import { ActivityPanel, useProjectWorkspace } from './ProjectWorkspaceContext';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const items: { id: ActivityPanel | 'terminal'; icon: React.ComponentType<any>; label: string }[] = [
   { id: 'files', icon: DocumentTextIcon, label: 'Files' },
   { id: 'tracking', icon: Square2StackIcon, label: 'Tracking' },

From d8e3e41db27cb4da6809632e41fa9c6afba54d05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 16:35:53 -0300
Subject: [PATCH 08/10] fix: add eslint-disable for ANSI regex control
 character

---
 telemetry/ui/src/components/routes/workspace/RunTerminal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
index 64f2938ff..076a9b2d8 100644
--- a/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
+++ b/telemetry/ui/src/components/routes/workspace/RunTerminal.tsx
@@ -35,7 +35,7 @@ interface OutputLine {
 // Basic ANSI color codes to CSS classes
 function ansiToSpans(text: string): JSX.Element[] {
   const parts: JSX.Element[] = [];
-  // Match ANSI escape sequences - eslint-disable-next-line no-control-regex
+  // eslint-disable-next-line no-control-regex
   const ansiRegex = new RegExp('\\x1b\\[([0-9;]*)m', 'g');
   let lastIndex = 0;
   let currentClass = '';

From 78b927c0ae0b7bea53cc5a65e8b4cb8ba7abd7dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Ahlert?= <andre@aex.partners>
Date: Sat, 28 Mar 2026 18:07:59 -0300
Subject: [PATCH 09/10] docs: add docstrings and JSDoc to workspace and builder
 modules

Python (workspace.py):
- Module-level docstring describing all capabilities
- Docstrings on all Pydantic models, endpoints, and helper functions
- Documented security functions with Args/Returns/Raises

TypeScript:
- JSDoc on all exported types in builderTypes, codeGenerator, codeParser
- JSDoc on all tree operation functions in treeUtils
- JSDoc on layout algorithm functions in flowLayout
- JSDoc on useBuilderState hook
---
 burr/tracking/server/workspace.py         | 87 ++++++++++++++++++++++-
 telemetry/ui/src/hooks/useBuilderState.ts |  1 +
 telemetry/ui/src/utils/builderTypes.ts    |  5 ++
 telemetry/ui/src/utils/codeGenerator.ts   | 12 +++-
 telemetry/ui/src/utils/codeParser.ts      |  2 +
 telemetry/ui/src/utils/flowLayout.ts      |  8 ++-
 telemetry/ui/src/utils/treeUtils.ts       |  9 +++
 7 files changed, 118 insertions(+), 6 deletions(-)

diff --git a/burr/tracking/server/workspace.py b/burr/tracking/server/workspace.py
index 1494936b3..4ab11de3b 100644
--- a/burr/tracking/server/workspace.py
+++ b/burr/tracking/server/workspace.py
@@ -15,6 +15,17 @@
 # specific language governing permissions and limitations
 # under the License.
 
+"""Workspace API router for the Burr tracking server.
+
+Provides endpoints for:
+- File browsing and content reading within a workspace directory
+- Python script execution with SSE output streaming
+- Process lifecycle management (start, stop, list)
+- Workspace-to-project linking (stored in ~/.burr/workspace_links.json)
+- Builder project persistence (stored in ~/.burr/builder_projects/)
+- Burr ApplicationBuilder usage scanning across .py files
+"""
+
 import asyncio
 import json as json_module
 import logging
@@ -59,27 +70,37 @@
 
 
 class WorkspaceLinkRequest(BaseModel):
+    """Request body for linking a workspace directory to a project."""
+
     project_id: str
     workspace_path: str
 
 
 class WorkspaceLinkInfo(BaseModel):
+    """Response for workspace link queries. workspace_path is None if not linked."""
+
     project_id: str
     workspace_path: Optional[str]
 
 
 class BuilderProjectSave(BaseModel):
+    """Request body for saving a builder project."""
+
     name: str
     graph_json: str  # JSON-serialized tree
 
 
 class BuilderProjectSummary(BaseModel):
+    """Summary of a saved builder project (used in list responses)."""
+
     id: str
     name: str
     updated_at: float
 
 
 class BuilderProjectFull(BaseModel):
+    """Full builder project including the serialized graph."""
+
     id: str
     name: str
     graph_json: str
@@ -87,17 +108,23 @@ class BuilderProjectFull(BaseModel):
 
 
 class WorkspaceOpenRequest(BaseModel):
+    """Request body for opening/validating a workspace directory."""
+
     path: str
 
 
 class WorkspaceInfo(BaseModel):
+    """Basic info about an opened workspace."""
+
     path: str
     name: str
 
 
 class FileEntry(BaseModel):
+    """A single file or directory entry in a workspace listing."""
+
     name: str
-    path: str
+    path: str  # relative to workspace root
     is_dir: bool
     size: int
     modified: float
@@ -106,6 +133,8 @@ class FileEntry(BaseModel):
 
 
 class FileContent(BaseModel):
+    """Contents of a single file with detected language."""
+
     path: str
     content: str
     language: str
@@ -113,6 +142,8 @@ class FileContent(BaseModel):
 
 
 class ProcessInfo(BaseModel):
+    """Status of a running or completed Python process."""
+
     pid: int
     script_path: str
     started_at: float
@@ -121,6 +152,8 @@ class ProcessInfo(BaseModel):
 
 
 class RunRequest(BaseModel):
+    """Request body to start a Python script."""
+
     workspace: str
     script: str
 
@@ -129,6 +162,22 @@ class RunRequest(BaseModel):
 
 
 def _validate_path(workspace: str, relative: str) -> str:
+    """Resolve and validate a file path within a workspace.
+
+    Prevents path traversal by ensuring the resolved target stays within
+    the workspace directory. Uses os.sep suffix check to prevent /foo
+    matching /foobar.
+
+    Args:
+        workspace: Absolute path to the workspace root.
+        relative: Relative path within the workspace (may be empty).
+
+    Returns:
+        The resolved absolute path to the target.
+
+    Raises:
+        HTTPException: 403 if path traversal is detected.
+    """
     workspace_real = os.path.realpath(workspace)
     if relative:
         target = os.path.realpath(os.path.join(workspace_real, relative))
@@ -141,7 +190,20 @@ def _validate_path(workspace: str, relative: str) -> str:
 
 
 def _validate_workspace(workspace: str) -> str:
-    """Validate workspace is a registered link or the open endpoint validated it."""
+    """Validate that a workspace path is registered via the /link endpoint.
+
+    Checks the workspace against ~/.burr/workspace_links.json to ensure
+    only explicitly linked directories can be accessed.
+
+    Args:
+        workspace: Absolute path to validate.
+
+    Returns:
+        The resolved absolute path.
+
+    Raises:
+        HTTPException: 400 if directory doesn't exist, 403 if not registered.
+    """
     workspace_real = os.path.realpath(workspace)
     if not os.path.isdir(workspace_real):
         raise HTTPException(status_code=400, detail="Workspace directory does not exist")
@@ -153,6 +215,7 @@ def _validate_workspace(workspace: str) -> str:
 
 
 def _is_binary(file_path: str) -> bool:
+    """Detect if a file is binary by checking for null bytes in the first 8KB."""
     try:
         with open(file_path, "rb") as f:
             chunk = f.read(8192)
@@ -167,6 +230,7 @@ def _is_binary(file_path: str) -> bool:
 
 
 def _read_links() -> dict:
+    """Read workspace-to-project links from ~/.burr/workspace_links.json."""
     if os.path.exists(_LINKS_PATH):
         with open(_LINKS_PATH, "r") as f:
             return json_module.load(f)
@@ -174,6 +238,7 @@ def _read_links() -> dict:
 
 
 def _write_links(data: dict):
+    """Write workspace-to-project links to ~/.burr/workspace_links.json."""
     os.makedirs(os.path.dirname(_LINKS_PATH), exist_ok=True)
     with open(_LINKS_PATH, "w") as f:
         json_module.dump(data, f, indent=2)
@@ -186,6 +251,7 @@ def _write_links(data: dict):
 
 
 async def cleanup_processes():
+    """Terminate all tracked subprocesses. Called during FastAPI lifespan shutdown."""
     for pid, info in list(_processes.items()):
         proc = info.get("process")
         if proc and proc.returncode is None:
@@ -205,6 +271,7 @@ async def cleanup_processes():
 
 @router.post("/open", response_model=WorkspaceInfo)
 async def open_workspace(request: WorkspaceOpenRequest):
+    """Validate and return info about a workspace directory."""
     path = os.path.realpath(request.path)
     if not os.path.isdir(path):
         raise HTTPException(status_code=400, detail="Directory does not exist")
@@ -213,6 +280,7 @@ async def open_workspace(request: WorkspaceOpenRequest):
 
 @router.get("/link", response_model=WorkspaceLinkInfo)
 async def get_workspace_link(project_id: str = Query(...)):
+    """Get the linked workspace path for a project, or null if not linked."""
     links = _read_links()
     return WorkspaceLinkInfo(
         project_id=project_id,
@@ -222,6 +290,7 @@ async def get_workspace_link(project_id: str = Query(...)):
 
 @router.post("/link", response_model=WorkspaceLinkInfo)
 async def set_workspace_link(request: WorkspaceLinkRequest):
+    """Link a workspace directory to a project."""
     path = os.path.realpath(request.workspace_path)
     if not os.path.isdir(path):
         raise HTTPException(status_code=400, detail="Directory does not exist")
@@ -233,6 +302,7 @@ async def set_workspace_link(request: WorkspaceLinkRequest):
 
 @router.delete("/link")
 async def remove_workspace_link(project_id: str = Query(...)):
+    """Remove the workspace link for a project."""
     links = _read_links()
     links.pop(project_id, None)
     _write_links(links)
@@ -244,6 +314,7 @@ async def get_tree(
     workspace: str = Query(...),
     relative_path: str = Query(""),
 ):
+    """List one level of a directory within a workspace."""
     _validate_workspace(workspace)
     target = _validate_path(workspace, relative_path)
     if not os.path.isdir(target):
@@ -291,6 +362,7 @@ async def get_file(
     workspace: str = Query(...),
     relative_path: str = Query(...),
 ):
+    """Read the contents of a file within a workspace. Max 1MB, no binaries."""
     _validate_workspace(workspace)
     target = _validate_path(workspace, relative_path)
     if not os.path.isfile(target):
@@ -317,6 +389,7 @@ async def get_file(
 
 @router.post("/run", response_model=ProcessInfo)
 async def run_script(request: RunRequest):
+    """Start a Python script as a subprocess within a workspace."""
     _validate_workspace(request.workspace)
     target = _validate_path(request.workspace, request.script)
     if not os.path.isfile(target):
@@ -354,6 +427,7 @@ async def run_script(request: RunRequest):
 
 @router.get("/run/{pid}/output")
 async def stream_output(pid: int):
+    """Stream stdout/stderr from a running process via Server-Sent Events."""
     if pid not in _processes:
         raise HTTPException(status_code=404, detail="Process not found")
 
@@ -409,6 +483,7 @@ async def read_stream(stream, stream_type):
 
 @router.post("/run/{pid}/stop", response_model=ProcessInfo)
 async def stop_process(pid: int):
+    """Send SIGTERM to a running process."""
     if pid not in _processes:
         raise HTTPException(status_code=404, detail="Process not found")
 
@@ -436,6 +511,7 @@ async def stop_process(pid: int):
 
 @router.get("/processes", response_model=List[ProcessInfo])
 async def list_processes(workspace: str = Query(...)):
+    """List all tracked processes for a workspace."""
     _validate_workspace(workspace)
     result = []
     for pid, info in _processes.items():
@@ -460,6 +536,7 @@ async def list_processes(workspace: str = Query(...)):
 
 @router.get("/scan", response_model=List[FileEntry])
 async def scan_burr_apps(workspace: str = Query(...)):
+    """Scan a workspace for .py files containing ApplicationBuilder usage."""
     _validate_workspace(workspace)
     workspace_real = os.path.realpath(workspace)
     if not os.path.isdir(workspace_real):
@@ -497,6 +574,7 @@ async def scan_burr_apps(workspace: str = Query(...)):
 
 
 def _json_escape(s: str) -> str:
+    """Escape a string for embedding in SSE JSON data."""
     import json
 
     return json.dumps(s)
@@ -508,11 +586,13 @@ def _json_escape(s: str) -> str:
 
 
 def _ensure_builder_dir():
+    """Create the builder projects directory if it doesn't exist."""
     os.makedirs(_BUILDER_DIR, exist_ok=True)
 
 
 @router.get("/builder/projects", response_model=List[BuilderProjectSummary])
 async def list_builder_projects():
+    """List all saved builder projects from ~/.burr/builder_projects/."""
     _ensure_builder_dir()
     projects = []
     for fname in sorted(os.listdir(_BUILDER_DIR)):
@@ -536,6 +616,7 @@ async def list_builder_projects():
 
 @router.post("/builder/projects", response_model=BuilderProjectFull)
 async def save_builder_project(request: BuilderProjectSave):
+    """Save a builder project graph to ~/.burr/builder_projects/."""
     _ensure_builder_dir()
     # Generate ID from name
     project_id = re.sub(r"[^a-zA-Z0-9_-]", "_", request.name).lower()
@@ -558,6 +639,7 @@ async def save_builder_project(request: BuilderProjectSave):
 
 @router.get("/builder/projects/{project_id}", response_model=BuilderProjectFull)
 async def get_builder_project(project_id: str):
+    """Load a saved builder project by ID."""
     safe_id = re.sub(r"[^a-zA-Z0-9_-]", "", project_id)
     fpath = os.path.join(_BUILDER_DIR, f"{safe_id}.json")
     if not os.path.isfile(fpath):
@@ -574,6 +656,7 @@ async def get_builder_project(project_id: str):
 
 @router.delete("/builder/projects/{project_id}")
 async def delete_builder_project(project_id: str):
+    """Delete a saved builder project by ID."""
     safe_id = re.sub(r"[^a-zA-Z0-9_-]", "", project_id)
     fpath = os.path.join(_BUILDER_DIR, f"{safe_id}.json")
     if os.path.isfile(fpath):
diff --git a/telemetry/ui/src/hooks/useBuilderState.ts b/telemetry/ui/src/hooks/useBuilderState.ts
index d1da32af6..24e7d99eb 100644
--- a/telemetry/ui/src/hooks/useBuilderState.ts
+++ b/telemetry/ui/src/hooks/useBuilderState.ts
@@ -40,6 +40,7 @@ import { buildFlowGraph } from '../utils/flowLayout';
 import { InsertContext, InsertLocation, BurrGraph } from '../utils/builderTypes';
 // codeParser is used by BuilderView for bidirectional sync
 
+/** React hook managing the complete builder state. Provides tree-based graph management, undo/redo history, keyboard shortcuts, code generation, validation, and project save/load. */
 export const useBuilderState = () => {
   const [rootNode, setRootNode] = useState<BuilderNode | null>(null);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
diff --git a/telemetry/ui/src/utils/builderTypes.ts b/telemetry/ui/src/utils/builderTypes.ts
index cbfe0f8d7..df24e9d95 100644
--- a/telemetry/ui/src/utils/builderTypes.ts
+++ b/telemetry/ui/src/utils/builderTypes.ts
@@ -19,6 +19,7 @@
 
 import { Edge } from '@xyflow/react';
 
+/** ReactFlow node types used in the builder canvas. */
 export enum BurrNodeType {
   STEP = 'STEP',
   BIG_ADD_BUTTON = 'BIG_ADD_BUTTON',
@@ -26,6 +27,7 @@ export enum BurrNodeType {
   LOOP_RETURN = 'LOOP_RETURN'
 }
 
+/** ReactFlow edge types used in the builder canvas. */
 export enum BurrEdgeType {
   STRAIGHT_LINE = 'BurrStraightLine',
   LOOP_START = 'BurrLoopStart',
@@ -34,12 +36,14 @@ export enum BurrEdgeType {
   ROUTER_END = 'BurrRouterEnd'
 }
 
+/** Where a new node should be inserted relative to existing nodes. */
 export enum InsertLocation {
   AFTER = 'AFTER',
   INSIDE_LOOP = 'INSIDE_LOOP',
   INSIDE_BRANCH = 'INSIDE_BRANCH'
 }
 
+/** Context passed to the inline add button, describing where to insert a new node. */
 export type InsertContext =
   | { location: InsertLocation.AFTER; parentStepId: string }
   | { location: InsertLocation.INSIDE_LOOP; loopStepId: string }
@@ -149,6 +153,7 @@ export type BurrEdge =
   | BurrRouterStartEdge
   | BurrRouterEndEdge;
 
+/** A complete layout graph with positioned nodes and typed edges, ready for ReactFlow. */
 export type BurrGraph = {
   nodes: BurrNode[];
   edges: BurrEdge[];
diff --git a/telemetry/ui/src/utils/codeGenerator.ts b/telemetry/ui/src/utils/codeGenerator.ts
index c33bbb18b..aa73b5123 100644
--- a/telemetry/ui/src/utils/codeGenerator.ts
+++ b/telemetry/ui/src/utils/codeGenerator.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+/** Union type of all available node types in the builder. */
 export type NodeType =
   | 'action'
   | 'input'
@@ -28,6 +29,7 @@ export type NodeType =
   | 'loop'
   | 'router';
 
+/** Visual metadata (label, color, border, description) for each node type. */
 export const NODE_TYPE_META: Record<
   NodeType,
   { label: string; color: string; borderColor: string; description: string }
@@ -88,6 +90,7 @@ export const NODE_TYPE_META: Record<
   }
 };
 
+/** Represents a single node in the builder graph tree. Supports compound nodes (loop, router) via nextAction, firstLoopAction, and branches fields. */
 export type BuilderNode = {
   id: string;
   name: string;
@@ -110,12 +113,14 @@ export type BuilderNode = {
   itemVariable?: string;
 };
 
+/** A single branch within a router node, with a name, condition, and optional child action chain. */
 export type BuilderBranch = {
   name: string;
   condition: string;
   firstAction?: BuilderNode;
 };
 
+/** A transition edge between two nodes, used for code generation. */
 export type BuilderEdge = {
   id: string;
   source: string;
@@ -123,12 +128,12 @@ export type BuilderEdge = {
   condition: string;
 };
 
-// Sanitize a string for use as a Python identifier (a-z, 0-9, _)
+/** Sanitize a string for use as a Python identifier. */
 function sanitizeName(name: string): string {
   return name.replace(/[^a-zA-Z0-9_]/g, '_').replace(/^[0-9]/, '_$&') || 'unnamed';
 }
 
-// Escape a string for embedding in Python string literal
+/** Escape a string for safe embedding in a Python string literal. */
 function escapePyString(s: string): string {
   return s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n');
 }
@@ -227,6 +232,7 @@ const generateActionCode = (node: BuilderNode): string[] => {
   return lines;
 };
 
+/** Generate a single Python file from builder nodes and edges. */
 export const generatePythonCode = (
   nodes: BuilderNode[],
   edges: BuilderEdge[],
@@ -289,12 +295,14 @@ export const generatePythonCode = (
   return lines.join('\n');
 };
 
+/** A generated project file with name, language, and content. */
 export type ProjectFile = {
   name: string;
   language: string;
   content: string;
 };
 
+/** Generate a multi-file Python project (actions.py, app.py, run.py, requirements.txt). */
 export const generateProjectFiles = (
   nodes: BuilderNode[],
   edges: BuilderEdge[],
diff --git a/telemetry/ui/src/utils/codeParser.ts b/telemetry/ui/src/utils/codeParser.ts
index 84033dd04..de8fa6d6f 100644
--- a/telemetry/ui/src/utils/codeParser.ts
+++ b/telemetry/ui/src/utils/codeParser.ts
@@ -75,6 +75,7 @@ function detectNodeType(
   return 'action';
 }
 
+/** Parse Python source code to extract Burr actions, transitions, and entrypoint using regex. */
 export function parsePythonCode(code: string): ParseResult {
   const actions: ParsedAction[] = [];
   const transitions: ParsedTransition[] = [];
@@ -149,6 +150,7 @@ export function parsePythonCode(code: string): ParseResult {
   return { actions, transitions, entrypoint };
 }
 
+/** Build a BuilderNode tree from parsed Python code results. */
 export function buildTreeFromParsed(parsed: ParseResult): BuilderNode | null {
   if (parsed.actions.length === 0) return null;
 
diff --git a/telemetry/ui/src/utils/flowLayout.ts b/telemetry/ui/src/utils/flowLayout.ts
index 02049bab1..00f9cc090 100644
--- a/telemetry/ui/src/utils/flowLayout.ts
+++ b/telemetry/ui/src/utils/flowLayout.ts
@@ -31,7 +31,7 @@ import {
   InsertLocation
 } from './builderTypes';
 
-// Canvas constants (matching Activepieces proportions)
+/** Canvas dimension constants for node sizes, spacing, and arc radii. */
 export const CANVAS = {
   STEP_WIDTH: 220,
   STEP_HEIGHT: 80,
@@ -46,7 +46,7 @@ export const CANVAS = {
   STEP_LINE_GAP: 7
 } as const;
 
-// SVG arc path segments
+/** SVG arc path segments for drawing curved connections between nodes. */
 export const ARC_LEFT = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,0 -${CANVAS.ARC},${CANVAS.ARC}`;
 export const ARC_RIGHT = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 ${CANVAS.ARC},${CANVAS.ARC}`;
 export const ARC_LEFT_DOWN = `a${CANVAS.ARC},${CANVAS.ARC} 0 0,1 -${CANVAS.ARC},${CANVAS.ARC}`;
@@ -70,6 +70,7 @@ function doesAffectBoundingBox(type: string): boolean {
   );
 }
 
+/** Calculate the bounding box of a layout graph. */
 export function calculateBoundingBox(graph: BurrGraph): BoundingBox {
   if (graph.nodes.length === 0) {
     return {
@@ -103,6 +104,7 @@ export function calculateBoundingBox(graph: BurrGraph): BoundingBox {
   };
 }
 
+/** Offset all node positions in a graph by a given x,y delta. */
 export function offsetGraph(graph: BurrGraph, offset: { x: number; y: number }): BurrGraph {
   return {
     nodes: graph.nodes.map((node) => ({
@@ -113,6 +115,7 @@ export function offsetGraph(graph: BurrGraph, offset: { x: number; y: number }):
   };
 }
 
+/** Merge two graphs into one by concatenating their nodes and edges. */
 export function mergeGraph(g1: BurrGraph, g2: BurrGraph): BurrGraph {
   return {
     nodes: [...g1.nodes, ...g2.nodes],
@@ -374,6 +377,7 @@ function offsetRouterChildSteps(childGraphs: BurrGraph[]): BurrGraph[] {
   });
 }
 
+/** Recursively build a layout graph from a BuilderNode tree. This is the main entry point for the layout algorithm. */
 export function buildFlowGraph(step: BuilderNode | undefined): BurrGraph {
   if (!step) return { nodes: [], edges: [] };
 
diff --git a/telemetry/ui/src/utils/treeUtils.ts b/telemetry/ui/src/utils/treeUtils.ts
index ed078d0e3..f2bb66a00 100644
--- a/telemetry/ui/src/utils/treeUtils.ts
+++ b/telemetry/ui/src/utils/treeUtils.ts
@@ -21,10 +21,12 @@ import { BuilderNode, BuilderEdge, NodeType } from './codeGenerator';
 
 let _nodeIdCounter = 0;
 
+/** Reset the auto-increment node ID counter. Used when importing. */
 export function resetNodeIdCounter() {
   _nodeIdCounter = 0;
 }
 
+/** Create a new BuilderNode with sensible defaults for the given type. */
 export function createDefaultNode(nodeType: NodeType): BuilderNode {
   const id = `node_${++_nodeIdCounter}`;
   const prefixes: Record<NodeType, string> = {
@@ -92,6 +94,7 @@ export function createDefaultNode(nodeType: NodeType): BuilderNode {
   return node;
 }
 
+/** Recursively search the tree for a node by ID. */
 export function findNodeById(root: BuilderNode | undefined, id: string): BuilderNode | undefined {
   if (!root) return undefined;
   if (root.id === id) return root;
@@ -117,6 +120,7 @@ export function findNodeById(root: BuilderNode | undefined, id: string): Builder
   return undefined;
 }
 
+/** Immutably update a node in the tree by ID, returning a new tree. */
 export function mapNode(
   root: BuilderNode | undefined,
   id: string,
@@ -145,6 +149,7 @@ export function mapNode(
   return updated;
 }
 
+/** Insert a new node after a parent node in the tree. */
 export function insertAfter(
   root: BuilderNode | undefined,
   parentId: string,
@@ -172,6 +177,7 @@ export function insertAfter(
   };
 }
 
+/** Prepend a node to the beginning of a chain. */
 export function prependToChain(
   newNode: BuilderNode,
   existingHead: BuilderNode | undefined
@@ -179,6 +185,7 @@ export function prependToChain(
   return { ...newNode, nextAction: existingHead };
 }
 
+/** Append a node to the end of a chain. */
 export function appendToEnd(root: BuilderNode | undefined, newNode: BuilderNode): BuilderNode {
   if (!root) return newNode;
   if (!root.nextAction) {
@@ -187,6 +194,7 @@ export function appendToEnd(root: BuilderNode | undefined, newNode: BuilderNode)
   return { ...root, nextAction: appendToEnd(root.nextAction, newNode) };
 }
 
+/** Remove a node from the tree, re-linking parent to the removed node's nextAction. */
 export function removeFromTree(root: BuilderNode | undefined, id: string): BuilderNode | undefined {
   if (!root) return undefined;
 
@@ -212,6 +220,7 @@ function collectChain(node: BuilderNode | undefined): BuilderNode[] {
   return [node, ...collectChain(node.nextAction)];
 }
 
+/** Convert a tree-structured graph into flat arrays of nodes and edges for code generation. */
 export function flattenTree(root: BuilderNode | undefined): {
   nodes: BuilderNode[];
   edges: BuilderEdge[];

From 898f6beb28a3f00a63850612677f8bfb155d0b29 Mon Sep 17 00:00:00 2001
From: Stefan Krawczyk <stefank@cs.stanford.edu>
Date: Sun, 29 Mar 2026 09:23:21 -0700
Subject: [PATCH 10/10] fix: migrate from react-query v3 to
 @tanstack/react-query v5

Remove the legacy react-query v3 package and standardize on
@tanstack/react-query v5 across all components. This fixes the
"No QueryClient set" error in BuilderView which was caused by
two separate QueryClient providers from different packages.
---
 telemetry/ui/package-lock.json                | 104 +-------------
 telemetry/ui/package.json                     |   1 -
 telemetry/ui/src/App.tsx                      |   2 +-
 .../ui/src/components/nav/appcontainer.tsx    |  47 ++++---
 .../ui/src/components/routes/AdminView.tsx    |  21 +--
 .../ui/src/components/routes/AppList.tsx      |  26 ++--
 .../ui/src/components/routes/ProjectList.tsx  |  25 ++--
 .../components/routes/app/AnnotationsView.tsx |  92 +++++++------
 .../ui/src/components/routes/app/AppView.tsx  |  96 +++++++------
 .../ui/src/components/routes/app/StepList.tsx |  76 ++++++-----
 telemetry/ui/src/examples/Chatbot.tsx         |  47 ++++---
 telemetry/ui/src/examples/Common.tsx          |  40 +++---
 telemetry/ui/src/examples/Counter.tsx         |  40 +++---
 telemetry/ui/src/examples/DeepResearcher.tsx  |  30 ++--
 telemetry/ui/src/examples/EmailAssistant.tsx  | 129 +++++++++---------
 .../ui/src/examples/StreamingChatbot.tsx      |  57 ++++----
 16 files changed, 400 insertions(+), 433 deletions(-)

diff --git a/telemetry/ui/package-lock.json b/telemetry/ui/package-lock.json
index e0093c0d7..1656fa1e5 100644
--- a/telemetry/ui/package-lock.json
+++ b/telemetry/ui/package-lock.json
@@ -35,7 +35,6 @@
         "react-icons": "^5.0.1",
         "react-joyride": "^2.9.3",
         "react-markdown": "^9.0.1",
-        "react-query": "^3.39.3",
         "react-router-dom": "^6.22.1",
         "react-scripts": "5.0.1",
         "react-select": "^5.8.1",
@@ -9660,14 +9659,6 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/big-integer": {
-      "version": "1.6.52",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
-      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -9811,21 +9802,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/broadcast-channel": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
-      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "detect-node": "^2.1.0",
-        "js-sha3": "0.8.0",
-        "microseconds": "0.2.0",
-        "nano-time": "1.0.0",
-        "oblivious-set": "1.0.0",
-        "rimraf": "3.0.2",
-        "unload": "2.2.0"
-      }
-    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -10013,9 +9989,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001587",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001587.tgz",
-      "integrity": "sha512-HMFNotUmLXn71BQxg8cijvqxnIAofforZOwGsxyXJ0qugTdspUF4sPSJ2vhgprHCB996tIDzEq1ubumPDV8ULA==",
+      "version": "1.0.30001781",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001781.tgz",
+      "integrity": "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==",
       "funding": [
         {
           "type": "opencollective",
@@ -10029,7 +10005,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/capital-case": {
       "version": "1.0.4",
@@ -18329,11 +18306,6 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
-    "node_modules/js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -19352,15 +19324,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/match-sorter": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz",
-      "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "remove-accents": "0.5.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -20394,11 +20357,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/microseconds": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
-      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
-    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -20607,14 +20565,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nano-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
-      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
-      "dependencies": {
-        "big-integer": "^1.6.16"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -21026,11 +20976,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/oblivious-set": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
-      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
-    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -23532,31 +23477,6 @@
         "@types/unist": "*"
       }
     },
-    "node_modules/react-query": {
-      "version": "3.39.3",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
-      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -23996,11 +23916,6 @@
         "node": "*"
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
-    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -26572,15 +26487,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/unload": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
-      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.2",
-        "detect-node": "^2.0.4"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/telemetry/ui/package.json b/telemetry/ui/package.json
index d40bf6f5c..36fcd5269 100644
--- a/telemetry/ui/package.json
+++ b/telemetry/ui/package.json
@@ -30,7 +30,6 @@
     "react-icons": "^5.0.1",
     "react-joyride": "^2.9.3",
     "react-markdown": "^9.0.1",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.1",
diff --git a/telemetry/ui/src/App.tsx b/telemetry/ui/src/App.tsx
index f5a03b256..c3978561c 100644
--- a/telemetry/ui/src/App.tsx
+++ b/telemetry/ui/src/App.tsx
@@ -22,7 +22,7 @@ import './App.css';
 import { ProjectList } from './components/routes/ProjectList';
 import { AppList } from './components/routes/AppList';
 import { AppViewContainer } from './components/routes/app/AppView';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { AppContainer } from './components/nav/appcontainer';
 import { ChatbotWithTelemetry } from './examples/Chatbot';
 import { Counter } from './examples/Counter';
diff --git a/telemetry/ui/src/components/nav/appcontainer.tsx b/telemetry/ui/src/components/nav/appcontainer.tsx
index d82bc8d5f..4d296efb5 100644
--- a/telemetry/ui/src/components/nav/appcontainer.tsx
+++ b/telemetry/ui/src/components/nav/appcontainer.tsx
@@ -37,7 +37,7 @@ import { Link } from 'react-router-dom';
 import { classNames } from '../../utils/tailwind';
 import React from 'react';
 import { DefaultService } from '../../api';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 // Define your GitHub logo SVG as a React component
 const GithubLogo = () => (
@@ -46,7 +46,8 @@ const GithubLogo = () => (
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 22 22"
-    stroke="currentColor">
+    stroke="currentColor"
+  >
     {/* SVG path for GitHub logo */}
     <path
       strokeLinecap="round"
@@ -85,11 +86,13 @@ const ToggleOpenButton = (props: { open: boolean; toggleSidebar: () => void }) =
 export const AppContainer = (props: { children: React.ReactNode }) => {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [smallSidebarOpen, setSmallSidebarOpen] = useState(false);
-  const { data: backendSpec } = useQuery(['backendSpec'], () =>
-    DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
-      return response;
-    })
-  );
+  const { data: backendSpec } = useQuery({
+    queryKey: ['backendSpec'],
+    queryFn: () =>
+      DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
+        return response;
+      })
+  });
   const toggleSidebar = () => {
     setSidebarOpen(!sidebarOpen);
   };
@@ -198,7 +201,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
               enterTo="opacity-100"
               leave="transition-opacity ease-linear duration-300"
               leaveFrom="opacity-100"
-              leaveTo="opacity-0">
+              leaveTo="opacity-0"
+            >
               <div className="fixed inset-0 bg-gray-900/80" />
             </Transition.Child>
 
@@ -210,7 +214,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                 enterTo="translate-x-0"
                 leave="transition ease-in-out duration-300 transform"
                 leaveFrom="translate-x-0"
-                leaveTo="-translate-x-full">
+                leaveTo="-translate-x-full"
+              >
                 <Dialog.Panel className="relative mr-16 flex w-full max-w-xs flex-1">
                   <Transition.Child
                     as={Fragment}
@@ -219,12 +224,14 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                     enterTo="opacity-100"
                     leave="ease-in-out duration-300"
                     leaveFrom="opacity-100"
-                    leaveTo="opacity-0">
+                    leaveTo="opacity-0"
+                  >
                     <div className="absolute left-full top-0 flex w-16 justify-center pt-5">
                       <button
                         type="button"
                         className="-m-2.5 p-2.5"
-                        onClick={() => setSmallSidebarOpen(false)}>
+                        onClick={() => setSmallSidebarOpen(false)}
+                      >
                         <span className="sr-only">Close sidebar</span>
                         <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
                       </button>
@@ -256,7 +263,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                                     'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
                                   )}
                                   target={item.linkType === 'external' ? '_blank' : undefined}
-                                  rel={item.linkType === 'external' ? 'noreferrer' : undefined}>
+                                  rel={item.linkType === 'external' ? 'noreferrer' : undefined}
+                                >
                                   <item.icon
                                     className={classNames(
                                       isCurrent(item.href, item.linkType)
@@ -285,7 +293,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
         <div
           className={`hidden ${
             sidebarOpen ? 'h-screen lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col' : ''
-          }`}>
+          }`}
+        >
           {/* Sidebar component, swap this element with another sidebar if you like */}
           <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 py-2">
             <div className="flex h-16 shrink-0 items-center">
@@ -311,7 +320,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                               'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700'
                             )}
                             target={item.linkType === 'external' ? '_blank' : undefined}
-                            rel={item.linkType === 'external' ? 'noreferrer' : undefined}>
+                            rel={item.linkType === 'external' ? 'noreferrer' : undefined}
+                          >
                             <item.icon
                               className="h-6 w-6 shrink-0 text-gray-400"
                               aria-hidden="true"
@@ -328,7 +338,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                                       ? 'bg-gray-50'
                                       : 'hover:bg-gray-50',
                                     'flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700'
-                                  )}>
+                                  )}
+                                >
                                   <item.icon
                                     className="h-6 w-6 shrink-0 text-gray-400"
                                     aria-hidden="true"
@@ -358,7 +369,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
                                         }
                                         rel={
                                           subItem.linkType === 'external' ? 'noreferrer' : undefined
-                                        }>
+                                        }
+                                      >
                                         {subItem.name}
                                       </Link>
                                     </li>
@@ -384,7 +396,8 @@ export const AppContainer = (props: { children: React.ReactNode }) => {
             !sidebarOpen
               ? 'lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-8 lg:flex-col justify-end lg:py-2 lg:px-1'
               : ''
-          }`}>
+          }`}
+        >
           <ToggleOpenButton open={sidebarOpen} toggleSidebar={toggleSidebar} />
         </div>
 
diff --git a/telemetry/ui/src/components/routes/AdminView.tsx b/telemetry/ui/src/components/routes/AdminView.tsx
index ed7ee6332..950f57c65 100644
--- a/telemetry/ui/src/components/routes/AdminView.tsx
+++ b/telemetry/ui/src/components/routes/AdminView.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../common/table';
 import { DefaultService } from '../../api';
 import { Loading } from '../common/loading';
@@ -53,13 +53,15 @@ const RecordsHeader = (props: {
 export const AdminView = () => {
   const [displayZeroCount, setDisplayZeroCount] = useState(false);
 
-  const { data, isLoading } = useQuery(['indexingJobs', displayZeroCount], () =>
-    DefaultService.getIndexingJobsApiV0IndexingJobsGet(
-      0, // TODO -- add pagination
-      100,
-      !displayZeroCount
-    )
-  );
+  const { data, isLoading } = useQuery({
+    queryKey: ['indexingJobs', displayZeroCount],
+    queryFn: () =>
+      DefaultService.getIndexingJobsApiV0IndexingJobsGet(
+        0, // TODO -- add pagination
+        100,
+        !displayZeroCount
+      )
+  });
   if (isLoading) {
     return <Loading />;
   }
@@ -93,7 +95,8 @@ export const AdminView = () => {
                 {job.end_time ? (
                   <DurationDisplay
                     startDate={job.start_time}
-                    endDate={job.end_time}></DurationDisplay>
+                    endDate={job.end_time}
+                  ></DurationDisplay>
                 ) : (
                   <></>
                 )}
diff --git a/telemetry/ui/src/components/routes/AppList.tsx b/telemetry/ui/src/components/routes/AppList.tsx
index 4128b33b8..9023ca064 100644
--- a/telemetry/ui/src/components/routes/AppList.tsx
+++ b/telemetry/ui/src/components/routes/AppList.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Navigate, useParams } from 'react-router';
 import { Loading } from '../common/loading';
 import { ApplicationSummary, DefaultService } from '../../api';
@@ -108,7 +108,8 @@ const AppSubList = (props: {
         className={`cursor-pointer ${isHighlighted ? 'bg-gray-50' : ''}`}
         onClick={() => {
           props.navigate(`/project/${props.projectId}/${app.partition_key}/${app.app_id}`);
-        }}>
+        }}
+      >
         {props.displayPartitionKey && (
           <TableCell className="text-gray-600 font-sans">
             {isNullPartitionKey(app.partition_key) ? (
@@ -120,7 +121,8 @@ const AppSubList = (props: {
                 onClick={(e) => {
                   props.navigate(`/project/${props.projectId}/${app.partition_key}`);
                   e.stopPropagation();
-                }}>
+                }}
+              >
                 {app.partition_key}
               </Link>
             )}
@@ -131,7 +133,8 @@ const AppSubList = (props: {
             {[...Array(depth).keys()].map((i) => (
               <RiCornerDownRightLine
                 key={i}
-                className={`${i === depth - 1 ? 'opacity-100' : 'opacity-0'} text-lg text-gray-600`}></RiCornerDownRightLine>
+                className={`${i === depth - 1 ? 'opacity-100' : 'opacity-0'} text-lg text-gray-600`}
+              ></RiCornerDownRightLine>
             ))}
             {app.app_id}
           </div>
@@ -306,17 +309,17 @@ export const AppList = () => {
   const [searchParams] = useSearchParams();
   const currentOffset = searchParams.get('offset') ? parseInt(searchParams.get('offset')!) : 0;
   const pageSize = DEFAULT_LIMIT;
-  const { data, error } = useQuery(
-    ['apps', projectId, partitionKey, pageSize, currentOffset],
-    () =>
+  const { data, error } = useQuery({
+    queryKey: ['apps', projectId, partitionKey, pageSize, currentOffset],
+    queryFn: () =>
       DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(
         projectId as string,
         partitionKey ? partitionKey : '__none__',
         pageSize,
         currentOffset
       ),
-    { enabled: projectId !== undefined }
-  );
+    enabled: projectId !== undefined
+  });
 
   const [queriedData, setQueriedData] = useState(data);
 
@@ -349,9 +352,8 @@ export const AppList = () => {
             }}
             totalPages={queriedData ? Math.ceil(queriedData?.total / pageSize) : undefined}
             // TODO -- add query result back
-            hasNextPage={
-              queriedData ? currentOffset + pageSize < queriedData.total : false
-            }></Paginator>
+            hasNextPage={queriedData ? currentOffset + pageSize < queriedData.total : false}
+          ></Paginator>
         )}
       </div>
     </div>
diff --git a/telemetry/ui/src/components/routes/ProjectList.tsx b/telemetry/ui/src/components/routes/ProjectList.tsx
index 78a546d81..cb96f0b3a 100644
--- a/telemetry/ui/src/components/routes/ProjectList.tsx
+++ b/telemetry/ui/src/components/routes/ProjectList.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { DefaultService, Project } from '../../api';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../common/table';
 import { Loading } from '../common/loading';
@@ -67,7 +67,8 @@ export const ProjectListTable = (props: { projects: Project[]; includeAnnotation
             <TableRow
               key={project.id}
               className="hover:bg-gray-50 cursor-pointer"
-              onClick={() => navigate(`/project/${project.id}`)}>
+              onClick={() => navigate(`/project/${project.id}`)}
+            >
               <TableCell className="font-semibold text-gray-700">
                 <div className="flex flex-row gap-2">
                   {chipType !== undefined && <Chip label={chipType} chipType={chipType}></Chip>}
@@ -96,7 +97,8 @@ export const ProjectListTable = (props: { projects: Project[]; includeAnnotation
                         navigate(`/annotations/${project.id}`);
                         e.stopPropagation();
                         e.preventDefault();
-                      }}></FaRegEdit>
+                      }}
+                    ></FaRegEdit>
                   </Link>
                 </TableCell>
               )}
@@ -112,12 +114,17 @@ export const ProjectListTable = (props: { projects: Project[]; includeAnnotation
  * Container for the table -- fetches the data and passes it to the table
  */
 export const ProjectList = () => {
-  const { data, error } = useQuery('projects', DefaultService.getProjectsApiV0ProjectsGet);
-  const { data: backendSpec } = useQuery(['backendSpec'], () =>
-    DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
-      return response;
-    })
-  );
+  const { data, error } = useQuery({
+    queryKey: ['projects'],
+    queryFn: DefaultService.getProjectsApiV0ProjectsGet
+  });
+  const { data: backendSpec } = useQuery({
+    queryKey: ['backendSpec'],
+    queryFn: () =>
+      DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
+        return response;
+      })
+  });
   if (error) return <div>Error loading projects</div>;
   if (data === undefined || backendSpec === undefined) return <Loading />;
   return (
diff --git a/telemetry/ui/src/components/routes/app/AnnotationsView.tsx b/telemetry/ui/src/components/routes/app/AnnotationsView.tsx
index 8d59964e1..50c65ae9c 100644
--- a/telemetry/ui/src/components/routes/app/AnnotationsView.tsx
+++ b/telemetry/ui/src/components/routes/app/AnnotationsView.tsx
@@ -35,7 +35,7 @@ import { FaClipboardList, FaExternalLinkAlt, FaThumbsDown, FaThumbsUp } from 're
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../common/table';
 import { Chip } from '../../common/chip';
 import { Link } from 'react-router-dom';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loading } from '../../common/loading';
 import {
   ChevronDownIcon,
@@ -307,7 +307,8 @@ const DownloadAnnotationsButton: React.FC<DownloadButtonProps> = ({ data, fileNa
   return (
     <button
       onClick={handleDownload}
-      className="px-4 py-2 h-10 text-sm bg-dwlightblue text-white rounded-md hover:bg-dwlightblue/70 cursor-pointer">
+      className="px-4 py-2 h-10 text-sm bg-dwlightblue text-white rounded-md hover:bg-dwlightblue/70 cursor-pointer"
+    >
       Download
     </button>
   );
@@ -346,14 +347,16 @@ const ObservationsView = (props: { observations: AnnotationObservation[] }) => {
       onClick={(e) => {
         setIsExpanded((expanded) => !expanded);
         e.preventDefault();
-      }}>
+      }}
+    >
       {observationsToShow.map((observation, i) => {
         const Icon = observation.thumbs_up_thumbs_down ? FaThumbsUp : FaThumbsDown;
         const iconColor = observation.thumbs_up_thumbs_down ? 'text-green-500' : 'text-dwred';
         return (
           <div
             key={i}
-            className={`flex flex-col gap-1 ${i === observationsToShow.length - 1 ? '' : 'border-b-2'}  border-gray-100`}>
+            className={`flex flex-col gap-1 ${i === observationsToShow.length - 1 ? '' : 'border-b-2'}  border-gray-100`}
+          >
             <div className={`flex flex-row gap-2 max-w-full items-baseline `}>
               {observation.thumbs_up_thumbs_down !== null && (
                 <div className="translate-y-1">
@@ -532,20 +535,18 @@ export const AnnotationsTable = (props: {
   refetchAnnotations?: () => void;
 }) => {
   // Just in case we want to do live-updating, we need to pass it into the form...
-  const updateAnnotationMutation = useMutation(
-    (data: { annotationID: number; annotationData: AnnotationUpdate }) =>
+  const updateAnnotationMutation = useMutation({
+    mutationFn: (data: { annotationID: number; annotationData: AnnotationUpdate }) =>
       DefaultService.updateAnnotationApiV0ProjectIdAnnotationIdUpdateAnnotationsPut(
         props.projectId,
         data.annotationID,
         data.annotationData
       ),
-    {
-      onSuccess: () => {
-        props.refetchAnnotations && props.refetchAnnotations();
-        setCurrentlyEditingAnnotation(null); // We have to reset it somehow
-      }
+    onSuccess: () => {
+      props.refetchAnnotations && props.refetchAnnotations();
+      setCurrentlyEditingAnnotation(null); // We have to reset it somehow
     }
-  );
+  });
   const anyHavePartitionKey = props.annotations.some(
     (annotation) => annotation.partition_key !== null
   );
@@ -569,18 +570,16 @@ export const AnnotationsTable = (props: {
     actionName: currentlyEditingAnnotation?.step_name || '',
     spanId: currentlyEditingAnnotation?.span_id || null
   };
-  const { data: appData } = useQuery(
-    ['steps', currentlyEditingAnnotation?.app_id],
-    () =>
+  const { data: appData } = useQuery({
+    queryKey: ['steps', currentlyEditingAnnotation?.app_id],
+    queryFn: () =>
       DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(
         props.projectId,
         currentlyEditingAnnotation?.app_id as string,
         currentlyEditingAnnotation?.partition_key as string
       ),
-    {
-      enabled: currentlyEditingAnnotation !== null
-    }
-  );
+    enabled: currentlyEditingAnnotation !== null
+  });
   // Either we're editing one that exists, or we're creating a new one...
   // TODO -- simplify the logic here, we should have one path...
   const annotationStep = currentlyEditingAnnotation
@@ -599,7 +598,8 @@ export const AnnotationsTable = (props: {
         open={currentlyEditingAnnotation !== null}
         close={() => {
           setCurrentlyEditingAnnotation(null);
-        }}>
+        }}
+      >
         {/* gate for type-checking, really this won't be open unless there is one */}
         {currentlyEditingAnnotation && (
           <AnnotationEditCreateForm
@@ -677,7 +677,8 @@ export const AnnotationsTable = (props: {
                     if (props.onHover) {
                       props.onHover(annotation);
                     }
-                  }}>
+                  }}
+                >
                   {props.displayInlineAppView && (
                     <TableCell className="w-6 align-top">
                       {' '}
@@ -702,7 +703,8 @@ export const AnnotationsTable = (props: {
                     <TableCell>
                       <Link
                         className="hover:underline text-dwlightblue cursor-pointer"
-                        to={`/project/${props.projectId}/${annotation.partition_key}`}>
+                        to={`/project/${props.projectId}/${annotation.partition_key}`}
+                      >
                         {annotation.partition_key}
                       </Link>
                     </TableCell>
@@ -711,7 +713,8 @@ export const AnnotationsTable = (props: {
                     <TableCell className="align-top">
                       <Link
                         className="hover:underline text-dwlightblue cursor-pointer"
-                        to={`/project/${props.projectId}/${annotation.partition_key}/${annotation.app_id}`}>
+                        to={`/project/${props.projectId}/${annotation.partition_key}/${annotation.app_id}`}
+                      >
                         {annotation.app_id}
                       </Link>
                     </TableCell>
@@ -721,7 +724,8 @@ export const AnnotationsTable = (props: {
                       <Chip label={`action: ${annotation.step_sequence_id}`} chipType="action" />
                       <Link
                         className="flex flex-row gap-1 hover:underline text-dwlightblue cursor-pointer"
-                        to={`/project/${props.projectId}/${annotation.partition_key}/${annotation.app_id}?sequence_id=${annotation.step_sequence_id}&tab=annotations`}>
+                        to={`/project/${props.projectId}/${annotation.partition_key}/${annotation.app_id}?sequence_id=${annotation.step_sequence_id}&tab=annotations`}
+                      >
                         {/* <span>{annotation.step_sequence_id}</span> */}
                         {annotation.span_id !== null && <span>{`:${annotation.span_id}`}</span>}
                         <span>({annotation.step_name})</span>
@@ -764,7 +768,8 @@ export const AnnotationsTable = (props: {
                           projectId={props.projectId}
                           partitionKey={annotation.partition_key}
                           appId={annotation.app_id}
-                          sequenceID={annotation.step_sequence_id}></InlineAppView>
+                          sequenceID={annotation.step_sequence_id}
+                        ></InlineAppView>
                       </div>
                     </TableCell>
                   )}
@@ -919,7 +924,8 @@ const ObservationForm = (props: {
           disabled={observation.data_fields['ground_truth']}
           onClick={() => {
             setShowGroundTruth((show) => !show);
-          }}>
+          }}
+        >
           <FaClipboardList className="h-4 w-4" />
         </button>
 
@@ -928,7 +934,8 @@ const ObservationForm = (props: {
             className="w-10 inline-flex justify-center items-center rounded-md bg-dwred/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700/70"
             onClick={() => {
               props.removeObservation();
-            }}>
+            }}
+          >
             <XMarkIcon className="h-6 w-6" />
           </button>
         )}
@@ -936,7 +943,8 @@ const ObservationForm = (props: {
           className="w-10 inline-flex justify-center items-center rounded-md bg-dwdarkblue/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-600/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700/70"
           onClick={() => {
             props.addObservation();
-          }}>
+          }}
+        >
           {'+'}
         </button>
       </div>
@@ -977,7 +985,8 @@ const ObservationForm = (props: {
             onChange={(e) => {
               observation.data_fields['ground_truth'] = e.target.value;
               props.setObservation(observation);
-            }}></textarea>
+            }}
+          ></textarea>
         </div>
       )}
     </div>
@@ -1178,7 +1187,8 @@ const AnnotationEditCreateForm = (props: {
         <div className="flex flex-row gap-2">
           <button
             onClick={props.resetAnnotationContext}
-            className="w-fullinline-flex items-center rounded-md bg-dwred/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-dwred/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dwred/70">
+            className="w-fullinline-flex items-center rounded-md bg-dwred/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-dwred/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dwred/70"
+          >
             {'Cancel'}
           </button>
           <button
@@ -1200,7 +1210,8 @@ const AnnotationEditCreateForm = (props: {
               }
             }}
             type="submit"
-            className="w-fullinline-flex items-center rounded-md bg-dwlightblue/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-dwlightblue/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dwlightblue/30">
+            className="w-fullinline-flex items-center rounded-md bg-dwlightblue/80 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-dwlightblue/30 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dwlightblue/30"
+          >
             {mode === 'edit' ? 'Update' : 'Create'}
           </button>
         </div>
@@ -1214,16 +1225,19 @@ const AnnotationEditCreateForm = (props: {
  */
 export const AnnotationsViewContainer = () => {
   const { projectId } = useLocationParams();
-  const { data: backendSpec } = useQuery(['backendSpec'], () =>
-    DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
-      return response;
-    })
-  );
+  const { data: backendSpec } = useQuery({
+    queryKey: ['backendSpec'],
+    queryFn: () =>
+      DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
+        return response;
+      })
+  });
 
   // TODO -- use a skiptoken to bypass annotation loading if we don't need them
-  const { data, refetch } = useQuery(['annotations', projectId], () =>
-    DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(projectId as string)
-  );
+  const { data, refetch } = useQuery({
+    queryKey: ['annotations', projectId],
+    queryFn: () => DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(projectId as string)
+  });
   // dummy value as this will not be linked to if annotations are not supported
 
   if (data === undefined || backendSpec === undefined) return <Loading />;
diff --git a/telemetry/ui/src/components/routes/app/AppView.tsx b/telemetry/ui/src/components/routes/app/AppView.tsx
index 5a30d4da0..3608b3e15 100644
--- a/telemetry/ui/src/components/routes/app/AppView.tsx
+++ b/telemetry/ui/src/components/routes/app/AppView.tsx
@@ -25,7 +25,7 @@ import {
   AttributeModel,
   DefaultService
 } from '../../../api';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loading } from '../../common/loading';
 import { ApplicationTable } from './StepList';
 import { TwoColumnLayout, TwoRowLayout } from '../../common/layout';
@@ -250,73 +250,67 @@ export const AppView = (props: {
   const [currentEditingAnnotationContext, setCurrentEditingAnnotationContext] = useState<
     AnnotationEditingContext | undefined
   >(undefined);
-  const { data: backendSpec } = useQuery(['backendSpec'], () =>
-    DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
-      return response;
-    })
-  );
-  const { data, error } = useQuery(
-    ['steps', appID, partitionKey],
-    () =>
+  const { data: backendSpec } = useQuery({
+    queryKey: ['backendSpec'],
+    queryFn: () =>
+      DefaultService.getAppSpecApiV0MetadataAppSpecGet().then((response) => {
+        return response;
+      })
+  });
+  const { data, error } = useQuery({
+    queryKey: ['steps', appID, partitionKey],
+    queryFn: () =>
       DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(
         projectId as string,
         appID as string,
         props.partitionKey !== null ? props.partitionKey : '__none__'
       ),
-    {
-      refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
-      enabled: shouldQuery
-    }
-  );
+    refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
+    enabled: shouldQuery
+  });
 
-  const { data: currentFocusStepsData } = useQuery(
-    ['steps', currentFocusAppID, currentFocusPartitionKey],
-    () =>
+  const { data: currentFocusStepsData } = useQuery({
+    queryKey: ['steps', currentFocusAppID, currentFocusPartitionKey],
+    queryFn: () =>
       DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(
         projectId as string,
         currentFocusAppID as string,
         currentFocusPartitionKey !== null ? currentFocusPartitionKey : '__none__'
       ),
-    {
-      refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
-      enabled: currentFocusAppID !== appID && currentFocusAppID !== undefined
-    }
-  );
+    refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
+    enabled: currentFocusAppID !== appID && currentFocusAppID !== undefined
+  });
   // TODO -- use a skiptoken to bypass annotation loading if we don't need them
-  const { data: annotationsData, refetch: refetchAnnotationsData } = useQuery(
-    ['annotations', appID, partitionKey],
-    () =>
+  const { data: annotationsData, refetch: refetchAnnotationsData } = useQuery({
+    queryKey: ['annotations', appID, partitionKey],
+    queryFn: () =>
       DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(
         projectId as string,
         appID as string,
         partitionKey !== null ? partitionKey : '__none__'
       ),
-    {
-      refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
-      enabled: shouldQuery && props.allowAnnotations && backendSpec?.supports_annotations
-    }
-  );
+    refetchInterval: autoRefresh ? REFRESH_INTERVAL : false,
+    enabled: shouldQuery && props.allowAnnotations && backendSpec?.supports_annotations
+  });
 
-  const { data: currentFocusAnnotationsData } = useQuery(
-    ['annotations', currentFocusAppID, currentFocusPartitionKey],
-    () =>
+  const { data: currentFocusAnnotationsData } = useQuery({
+    queryKey: ['annotations', currentFocusAppID, currentFocusPartitionKey],
+    queryFn: () =>
       DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(
         projectId as string,
         currentFocusAppID as string,
         currentFocusPartitionKey !== null ? partitionKey : '__none__'
       ),
-    {
-      enabled:
-        shouldQuery &&
-        props.allowAnnotations &&
-        backendSpec?.supports_annotations &&
-        currentFocusAppID !== appID &&
-        currentFocusAppID !== undefined
-    }
-  );
+    enabled:
+      shouldQuery &&
+      props.allowAnnotations &&
+      backendSpec?.supports_annotations &&
+      currentFocusAppID !== appID &&
+      currentFocusAppID !== undefined
+  });
 
-  const createAnnotationMutation = useMutation(
-    (data: {
+  const createAnnotationMutation = useMutation({
+    mutationFn: (data: {
       projectId: string;
       annotationData: AnnotationCreate;
       appID: string;
@@ -330,16 +324,16 @@ export const AppView = (props: {
         data.sequenceID,
         data.annotationData
       )
-  );
+  });
 
-  const updateAnnotationMutation = useMutation(
-    (data: { annotationID: number; annotationData: AnnotationUpdate }) =>
+  const updateAnnotationMutation = useMutation({
+    mutationFn: (data: { annotationID: number; annotationData: AnnotationUpdate }) =>
       DefaultService.updateAnnotationApiV0ProjectIdAnnotationIdUpdateAnnotationsPut(
         projectId,
         data.annotationID,
         data.annotationData
       )
-  );
+  });
 
   useEffect(() => {
     const steps = data?.steps || [];
@@ -503,13 +497,15 @@ export const AppView = (props: {
           return response;
         },
         refreshAnnotationData: refetchAnnotationsData
-      }}>
+      }}
+    >
       <Layout
         mode={fullScreen ? 'expanding-second' : minimizedTable ? 'first-minimal' : 'half'}
         firstItem={
           <div className="w-full h-full flex flex-col">
             <div
-              className={`w-full ${fullScreen ? 'h-full' : props.orientation === 'stacked_vertical' ? 'h-full' : 'h-1/2'}`}>
+              className={`w-full ${fullScreen ? 'h-full' : props.orientation === 'stacked_vertical' ? 'h-full' : 'h-1/2'}`}
+            >
               <ApplicationTable
                 steps={stepsSorted}
                 appID={appID}
diff --git a/telemetry/ui/src/components/routes/app/StepList.tsx b/telemetry/ui/src/components/routes/app/StepList.tsx
index 590ceb0fb..2ed9c91b6 100644
--- a/telemetry/ui/src/components/routes/app/StepList.tsx
+++ b/telemetry/ui/src/components/routes/app/StepList.tsx
@@ -70,7 +70,7 @@ import { RxActivityLog } from 'react-icons/rx';
 import { RenderedField } from './DataView';
 import { FaPencilAlt } from 'react-icons/fa';
 import { AnnotateButton } from './AnnotationsView';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 const StatusChip = (props: { status: Status }) => {
   return (
@@ -177,7 +177,8 @@ const CommonTableRow = (props: {
           });
         }
         e.stopPropagation();
-      }}>
+      }}
+    >
       {props.children}
     </TableRow>
   );
@@ -252,7 +253,8 @@ const ActionTableRow = (props: {
       setCurrentHoverIndex={setCurrentHoverIndex}
       setCurrentSelectedIndex={setCurrentSelectedIndex}
       appID={props.appID}
-      partitionKey={props.partitionKey}>
+      partitionKey={props.partitionKey}
+    >
       <TableCell className="text-gray-500 w-12 max-w-12 min-w-12">
         <div className="flex flex-row items-center">
           <RecursionDepthPadding depth={props.depth}>
@@ -270,7 +272,8 @@ const ActionTableRow = (props: {
             />
           </div>
           <div
-            className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}>
+            className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}
+          >
             <Chip
               label={isStreaming ? 'stream' : 'action'}
               chipType={isStreaming ? 'stream' : 'action'}
@@ -379,31 +382,29 @@ const SelfLoadingSubApplicationContainer = (props: {
   autoRefresh: boolean;
   depth: number;
 }) => {
-  const { data } = useQuery(
-    ['steps', props.projectID, props.appID, props.partitionKey],
-    () =>
+  const { data } = useQuery({
+    queryKey: ['steps', props.projectID, props.appID, props.partitionKey],
+    queryFn: () =>
       DefaultService.getApplicationLogsApiV0ProjectIdAppIdPartitionKeyAppsGet(
         props.projectId as string,
         props.appID as string,
         props.partitionKey !== null ? props.partitionKey : '__none__'
       ),
-    {
-      // TODO -- decide how we want to auto-refresh with lots of nested stuff?
-      // Really, we'll want a bulk API but this is OK for now...
-      refetchInterval: props.autoRefresh ? REFRESH_INTERVAL : false,
-      enabled: true
-    }
-  );
+    // TODO -- decide how we want to auto-refresh with lots of nested stuff?
+    // Really, we'll want a bulk API but this is OK for now...
+    refetchInterval: props.autoRefresh ? REFRESH_INTERVAL : false,
+    enabled: true
+  });
   // TODO -- use a skiptoken to bypass annotation loading if we don't need them
-  const { data: annotationsData } = useQuery(
-    ['annotations', props.projectID, props.appID, props.partitionKey],
-    () =>
+  const { data: annotationsData } = useQuery({
+    queryKey: ['annotations', props.projectID, props.appID, props.partitionKey],
+    queryFn: () =>
       DefaultService.getAnnotationsApiV0ProjectIdAnnotationsGet(
         props.projectId as string,
         props.appID as string,
         props.partitionKey !== null ? props.partitionKey : '__none__'
       )
-  );
+  });
   const [traceExpandedActions, setTraceExpandedActions] = useState<number[]>([]);
   const [linksExpandedActions, setLinksExpandedActions] = useState<number[]>([]);
 
@@ -520,7 +521,8 @@ const LinkSubTable = (props: {
               currentSelectedIndex={currentSelectedIndex}
               step={props.step}
               setCurrentHoverIndex={setCurrentHoverIndex}
-              setCurrentSelectedIndex={setCurrentSelectedIndex}>
+              setCurrentSelectedIndex={setCurrentSelectedIndex}
+            >
               <TableCell colSpan={1} className="">
                 <RecursionDepthPadding depth={props.depth}>
                   <Icon className={`h-5 w-5 ${iconColor} -ml-1`} />
@@ -528,7 +530,8 @@ const LinkSubTable = (props: {
               </TableCell>
               <TableCell
                 colSpan={1}
-                className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}>
+                className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}
+              >
                 <div
                   className="z-50 truncate"
                   onClick={(e) => {
@@ -536,7 +539,8 @@ const LinkSubTable = (props: {
                       `/project/${props.projectId}/${subApp.child.partition_key || 'null'}/${subApp.child.app_id}`
                     );
                     e.stopPropagation();
-                  }}>
+                  }}
+                >
                   <span className="hover:underline">{subApp.child.app_id}</span>
                 </div>
               </TableCell>
@@ -663,9 +667,11 @@ const StepSubTableRow = (props: {
       currentSelectedIndex={currentSelectedIndex}
       step={props.step}
       setCurrentHoverIndex={setCurrentHoverIndex}
-      setCurrentSelectedIndex={setCurrentSelectedIndex}>
+      setCurrentSelectedIndex={setCurrentSelectedIndex}
+    >
       <TableCell
-        className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}>
+        className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}
+      >
         <RecursionDepthPadding depth={props.depth}>
           <span>{spanIDUniqueToAction}</span>
         </RecursionDepthPadding>
@@ -674,12 +680,14 @@ const StepSubTableRow = (props: {
         <>
           <TableCell
             onClick={onClick}
-            className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}>
+            className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}
+          >
             <div className="flex flex-row gap-1 items-center">
               {[...Array(depth).keys()].map((i) => (
                 <Icon
                   key={i}
-                  className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}></Icon>
+                  className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}
+                ></Icon>
               ))}
               <Chip
                 label={
@@ -735,7 +743,8 @@ const StepSubTableRow = (props: {
                 className="flex justify-start overflow-hidden pl-20"
                 onClick={(e) => {
                   e.stopPropagation();
-                }}>
+                }}
+              >
                 <RenderedField
                   value={(props.model as AttributeModel).value}
                   defaultExpanded={true} // no real need for default expanded
@@ -1131,11 +1140,13 @@ const WaterfallPiece: React.FC<{
                   onClick={(e) => {
                     props.setSubActionExpanded?.(!props.isSubActionExpanded);
                     e.stopPropagation();
-                  }}>
+                  }}
+                >
                   <div
                     className={`${props.isHighlighted ? 'bg-transparent' : props.bgColor} opacity-50 h-1 px-0 rounded-sm flex flex-row justify-center items-center`}
                     onMouseEnter={() => setIsHovered(true)}
-                    onMouseLeave={() => setIsHovered(false)}>
+                    onMouseLeave={() => setIsHovered(false)}
+                  >
                     <SubActionIcon
                       className={`hover:scale-125 transform-none cursor-pointer h-4 w-4 rounded-full text-gray-700 ${props.isHighlighted ? props.bgColor : 'bg-white'}`}
                     />
@@ -1152,7 +1163,8 @@ const WaterfallPiece: React.FC<{
               style={{
                 left: `calc(${leftPositionPercentage}% - 20px)`,
                 width: `calc(${widthPercentage}% + 40px)` // 20px buffer on each side
-              }}></div>
+              }}
+            ></div>
 
             {
               <div
@@ -1166,7 +1178,8 @@ const WaterfallPiece: React.FC<{
                   left: isCloseToEnd
                     ? `auto`
                     : `calc(${leftPositionPercentage}% + ${widthPercentage}%)`
-                }}>
+                }}
+              >
                 {hoverItem}
               </div>
             }
@@ -1823,7 +1836,8 @@ const ParentLink = (props: {
       <TableCell colSpan={2} className="text-gray-500">
         <div className="flex flex-row gap-1 items-center pl-5">
           <Link
-            to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}>
+            to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}
+          >
             <span className="hover:underline">{props.parentPointer.app_id}</span>
           </Link>
           <span>@</span>
diff --git a/telemetry/ui/src/examples/Chatbot.tsx b/telemetry/ui/src/examples/Chatbot.tsx
index 8f63cbfeb..cfa84b4be 100644
--- a/telemetry/ui/src/examples/Chatbot.tsx
+++ b/telemetry/ui/src/examples/Chatbot.tsx
@@ -23,7 +23,7 @@ import { Button } from '../components/common/button';
 import { TwoColumnLayout } from '../components/common/layout';
 import { ApplicationSummary, ChatItem, DefaultService } from '../api';
 import { KeyboardEvent, useEffect, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loading } from '../components/common/loading';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -99,7 +99,8 @@ const ChatMessage = (props: { message: ChatItem; id?: string }) => {
               a: ({ ...props }) => <a className="text-dwlightblue hover:underline" {...props} />
             }}
             remarkPlugins={[remarkGfm]}
-            className={`whitespace-pre-wrap break-lines max-w-full ${props.message.type === ChatItem.type.ERROR ? 'bg-dwred/10' : ''} p-0.5`}>
+            className={`whitespace-pre-wrap break-lines max-w-full ${props.message.type === ChatItem.type.ERROR ? 'bg-dwred/10' : ''} p-0.5`}
+          >
             {props.message.content}
           </Markdown>
         ) : (
@@ -128,41 +129,40 @@ const scrollToLatest = () => {
 export const Chatbot = (props: { projectId: string; appId: string | undefined }) => {
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
   const [displayedChatHistory, setDisplayedChatHistory] = useState(DEFAULT_CHAT_HISTORY);
-  const { isLoading } = useQuery(
+  const { data: chatHistoryData, isLoading } = useQuery({
     // TODO -- handle errors
-    ['chat', props.projectId, props.appId],
-    () =>
+    queryKey: ['chat', props.projectId, props.appId],
+    queryFn: () =>
       DefaultService.chatHistoryApiV0ChatbotResponseProjectIdAppIdGet(
         props.projectId,
         props.appId || '' // TODO -- find a cleaner way of doing a skip-token like thing here
       ),
-    {
-      enabled: props.appId !== undefined,
-      onSuccess: (data) => {
-        setDisplayedChatHistory(data); // when its succesful we want to set the displayed chat history
-      }
+    enabled: props.appId !== undefined
+  });
+
+  useEffect(() => {
+    if (chatHistoryData) {
+      setDisplayedChatHistory(chatHistoryData);
     }
-  );
+  }, [chatHistoryData]);
 
   // Scroll to the latest message when the chat history changes
   useEffect(() => {
     scrollToLatest();
   }, [displayedChatHistory]);
 
-  const mutation = useMutation(
-    (message: string) => {
+  const mutation = useMutation({
+    mutationFn: (message: string) => {
       return DefaultService.chatResponseApiV0ChatbotResponseProjectIdAppIdPost(
         props.projectId,
         props.appId || '',
         message
       );
     },
-    {
-      onSuccess: (data) => {
-        setDisplayedChatHistory(data);
-      }
+    onSuccess: (data) => {
+      setDisplayedChatHistory(data);
     }
-  );
+  });
 
   if (isLoading) {
     return <Loading />;
@@ -181,7 +181,7 @@ export const Chatbot = (props: { projectId: string; appId: string | undefined })
       ]);
     }
   };
-  const isChatWaiting = mutation.isLoading;
+  const isChatWaiting = mutation.isPending;
   return (
     <div className="mr-4 bg-white  w-full flex flex-col h-full">
       <h1 className="text-2xl font-bold px-4 text-gray-600">{'Learn Burr '}</h1>
@@ -194,7 +194,8 @@ export const Chatbot = (props: { projectId: string; appId: string | undefined })
           <ChatMessage
             message={message}
             key={i}
-            id={i === displayedChatHistory.length - 1 ? LAST_MESSAGE_ID : undefined}></ChatMessage>
+            id={i === displayedChatHistory.length - 1 ? LAST_MESSAGE_ID : undefined}
+          ></ChatMessage>
         ))}
       </div>
       <div className="flex items-center pt-4 gap-2">
@@ -217,7 +218,8 @@ export const Chatbot = (props: { projectId: string; appId: string | undefined })
           disabled={isChatWaiting || props.appId === undefined}
           onClick={() => {
             sendPrompt();
-          }}>
+          }}
+        >
           Send
         </Button>
       </div>
@@ -240,6 +242,7 @@ export const ChatbotWithTelemetry = () => {
           createNewApp={DefaultService.createNewApplicationApiV0ChatbotCreateProjectIdAppIdPost}
         />
       }
-      mode={'third'}></TwoColumnLayout>
+      mode={'third'}
+    ></TwoColumnLayout>
   );
 };
diff --git a/telemetry/ui/src/examples/Common.tsx b/telemetry/ui/src/examples/Common.tsx
index 4993a6d4f..da1d3bcca 100644
--- a/telemetry/ui/src/examples/Common.tsx
+++ b/telemetry/ui/src/examples/Common.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { ApplicationSummary } from '../api/models/ApplicationSummary';
 import { DateTimeDisplay } from '../components/common/dates';
 import { MiniTelemetry } from './MiniTelemetry';
@@ -46,7 +46,8 @@ export const TelemetryWithSelector = (props: {
       <MiniTelemetry
         projectId={props.projectId}
         appId={props.currentApp?.app_id}
-        partitionKey={null}></MiniTelemetry>
+        partitionKey={null}
+      ></MiniTelemetry>
     </div>
   );
 };
@@ -71,26 +72,25 @@ export const ChatbotAppSelector = (props: {
   createNewApp: CreateNewApp;
 }) => {
   const { projectId, setApp } = props;
-  const { data, refetch } = useQuery(
-    ['apps', projectId],
+  const { data, refetch } = useQuery({
+    queryKey: ['apps', projectId],
     // TODO - use the right partition key
-    () => DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(projectId as string, '__none__'),
-    { enabled: projectId !== undefined }
-  );
-  const createAndUpdateMutation = useMutation(
-    (app_id: string) => props.createNewApp(projectId, app_id),
-    {
-      onSuccess: (appID) => {
-        refetch().then((data) => {
-          const appSummaries = data.data?.applications || [];
-          const app = appSummaries.find((app) => app.app_id === appID);
-          if (app) {
-            setApp(app);
-          }
-        });
-      }
+    queryFn: () =>
+      DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(projectId as string, '__none__'),
+    enabled: projectId !== undefined
+  });
+  const createAndUpdateMutation = useMutation({
+    mutationFn: (app_id: string) => props.createNewApp(projectId, app_id),
+    onSuccess: (appID) => {
+      refetch().then((data) => {
+        const appSummaries = data.data?.applications || [];
+        const app = appSummaries.find((app) => app.app_id === appID);
+        if (app) {
+          setApp(app);
+        }
+      });
     }
-  );
+  });
   const appSummaries = data?.applications || [];
   const appSetter = (appID: string) => createAndUpdateMutation.mutate(appID);
   const dataOrEmpty = Array.from(appSummaries || []);
diff --git a/telemetry/ui/src/examples/Counter.tsx b/telemetry/ui/src/examples/Counter.tsx
index 63ca5916d..3bea40775 100644
--- a/telemetry/ui/src/examples/Counter.tsx
+++ b/telemetry/ui/src/examples/Counter.tsx
@@ -20,48 +20,47 @@
 import { Button } from '../components/common/button';
 import { TwoColumnLayout } from '../components/common/layout';
 import { ApplicationSummary, DefaultService } from '../api';
-import { useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
+import { useEffect, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loading } from '../components/common/loading';
 import { TelemetryWithSelector } from './Common';
 
 const CounterApp = (props: { projectId: string; appId: string | undefined }) => {
   const [counterValue, setCounterValue] = useState<number>(0);
 
-  const { isLoading } = useQuery(
-    ['counter-state', props.projectId, props.appId],
-    () =>
+  const { data: counterData, isLoading } = useQuery({
+    queryKey: ['counter-state', props.projectId, props.appId],
+    queryFn: () =>
       DefaultService.getCounterStateApiV0CounterStateProjectIdAppIdGet(
         props.projectId,
         props.appId || ''
       ),
-    {
-      enabled: props.appId !== undefined,
-      onSuccess: (data) => {
-        setCounterValue(data.counter);
-      }
+    enabled: props.appId !== undefined
+  });
+
+  useEffect(() => {
+    if (counterData) {
+      setCounterValue(counterData.counter);
     }
-  );
+  }, [counterData]);
 
-  const mutation = useMutation(
-    () => {
+  const mutation = useMutation({
+    mutationFn: () => {
       return DefaultService.countApiV0CounterCountProjectIdAppIdPost(
         props.projectId,
         props.appId || ''
       );
     },
-    {
-      onSuccess: (data) => {
-        setCounterValue(data.counter);
-      }
+    onSuccess: (data) => {
+      setCounterValue(data.counter);
     }
-  );
+  });
 
   if (isLoading) {
     return <Loading />;
   }
 
-  const isWaiting = mutation.isLoading;
+  const isWaiting = mutation.isPending;
 
   return (
     <div className="mr-4 bg-white w-full flex flex-col h-full">
@@ -76,7 +75,8 @@ const CounterApp = (props: { projectId: string; appId: string | undefined }) =>
           className="w-40 cursor-pointer text-lg"
           color="dark"
           disabled={isWaiting || props.appId === undefined}
-          onClick={() => mutation.mutate()}>
+          onClick={() => mutation.mutate()}
+        >
           {isWaiting ? 'Counting...' : 'Count +1'}
         </Button>
         {props.appId === undefined && (
diff --git a/telemetry/ui/src/examples/DeepResearcher.tsx b/telemetry/ui/src/examples/DeepResearcher.tsx
index a9c0ecd07..94e0c8f0a 100644
--- a/telemetry/ui/src/examples/DeepResearcher.tsx
+++ b/telemetry/ui/src/examples/DeepResearcher.tsx
@@ -22,7 +22,7 @@ import { ApplicationSummary, DefaultService, ResearchSummary } from '../api';
 import { TwoColumnLayout } from '../components/common/layout';
 import { TelemetryWithSelector } from './Common';
 import { Button } from '../components/common/button';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Text } from '../components/common/text';
 import { Field, Label } from '../components/common/fieldset';
 
@@ -43,25 +43,23 @@ export const ResearchSummaryView = (props: { summary: string }) => {
 export const DeepResearcher = (props: { projectId: string; appId: string | undefined }) => {
   const [currentTopic, setCurrentTopic] = useState<string>('');
   const [displayedReport, setDisplayedReport] = useState(DEFAULT_RESEARCH_SUMMARY);
-  const { data: validationData, isLoading: isValidationLoading } = useQuery(
-    ['valid'],
-    DefaultService.validateEnvironmentApiV0DeepResearcherValidateGet
-  );
+  const { data: validationData, isLoading: isValidationLoading } = useQuery({
+    queryKey: ['valid'],
+    queryFn: DefaultService.validateEnvironmentApiV0DeepResearcherValidateGet
+  });
 
-  const mutation = useMutation(
-    (topic: string) => {
+  const mutation = useMutation({
+    mutationFn: (topic: string) => {
       return DefaultService.researchResponseApiV0DeepResearcherResponseProjectIdAppIdPost(
         props.projectId,
         props.appId || '',
         topic
       );
     },
-    {
-      onSuccess: (data) => {
-        setDisplayedReport(data);
-      }
+    onSuccess: (data) => {
+      setDisplayedReport(data);
     }
-  );
+  });
   const sendTopic = () => {
     if (currentTopic !== '') {
       mutation.mutate(currentTopic);
@@ -69,7 +67,7 @@ export const DeepResearcher = (props: { projectId: string; appId: string | undef
       setDisplayedReport(DEFAULT_RESEARCH_SUMMARY);
     }
   };
-  const isResearcherWaiting = mutation.isLoading || isValidationLoading;
+  const isResearcherWaiting = mutation.isPending || isValidationLoading;
   const displayValidationError = validationData !== null;
 
   return (
@@ -110,7 +108,8 @@ export const DeepResearcher = (props: { projectId: string; appId: string | undef
           disabled={isResearcherWaiting || props.appId === undefined || displayValidationError}
           onClick={() => {
             sendTopic();
-          }}>
+          }}
+        >
           Send
         </Button>
       </div>
@@ -134,6 +133,7 @@ export const DeepResearcherWithTelemetry = () => {
           }
         />
       }
-      mode={'third'}></TwoColumnLayout>
+      mode={'third'}
+    ></TwoColumnLayout>
   );
 };
diff --git a/telemetry/ui/src/examples/EmailAssistant.tsx b/telemetry/ui/src/examples/EmailAssistant.tsx
index 5aa801a97..08b853555 100644
--- a/telemetry/ui/src/examples/EmailAssistant.tsx
+++ b/telemetry/ui/src/examples/EmailAssistant.tsx
@@ -28,7 +28,7 @@ import {
   QuestionAnswers
 } from '../api';
 import { useEffect, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { Loading } from '../components/common/loading';
 import { Field, Label } from '../components/common/fieldset';
 import { Textarea } from '../components/common/textarea';
@@ -86,7 +86,8 @@ export const InitialDraftView = (props: {
               email_to_respond: userProvidedEmailToRespond,
               response_instructions: userProvidedResponseInstructions
             })
-          }>
+          }
+        >
           {'Submit'}
         </Button>
       )}
@@ -129,7 +130,8 @@ export const SubmitAnswersView = (props: {
           color="white"
           className="cursor-pointer w-full"
           disabled={props.isLoading}
-          onClick={() => props.submitAnswers({ answers: answers })}>
+          onClick={() => props.submitAnswers({ answers: answers })}
+        >
           {'Submit'}
         </Button>
       )}
@@ -181,14 +183,16 @@ export const SubmitFeedbackView = (props: {
               disabled={props.isLoading}
               onClick={() => {
                 props.submitFeedback({ feedback: feedback }), setFeedback('');
-              }}>
+              }}
+            >
               {'Submit Feedback'}
             </Button>
             <Button
               color="white"
               className="cursor-pointer w-full"
               disabled={props.isLoading}
-              onClick={() => props.submitFeedback({ feedback: '' })}>
+              onClick={() => props.submitFeedback({ feedback: '' })}
+            >
               {'Looks good!'}
             </Button>
           </div>
@@ -201,10 +205,10 @@ export const SubmitFeedbackView = (props: {
 export const EmailAssistant = (props: { projectId: string; appId: string | undefined }) => {
   // starts off as null
   const [emailAssistantState, setEmailAssistantState] = useState<EmailAssistantState | null>(null);
-  const { data: validationData, isLoading: isValidationLoading } = useQuery(
-    ['valid', props.projectId, props.appId],
-    DefaultService.validateEnvironmentApiV0EmailAssistantValidateProjectIdAppIdGet
-  );
+  const { data: validationData, isLoading: isValidationLoading } = useQuery({
+    queryKey: ['valid', props.projectId, props.appId],
+    queryFn: DefaultService.validateEnvironmentApiV0EmailAssistantValidateProjectIdAppIdGet
+  });
 
   useEffect(() => {
     if (props.appId !== undefined) {
@@ -220,69 +224,64 @@ export const EmailAssistant = (props: { projectId: string; appId: string | undef
     }
   }, [props.appId, props.projectId]); // This will only get called when the appID or projectID changes, which will be at the beginning
 
-  const { isLoading: isGetInitialStateLoading } = useQuery(
+  const { data: initialStateData, isLoading: isGetInitialStateLoading } = useQuery({
     // TODO -- handle errors
-    ['emailAssistant', props.projectId, props.appId],
-    () =>
+    queryKey: ['emailAssistant', props.projectId, props.appId],
+    queryFn: () =>
       DefaultService.getStateApiV0EmailAssistantStateProjectIdAppIdGet(
         props.projectId,
         props.appId || '' // TODO -- find a cleaner way of doing a skip-token like thing here
         // This is skipped if the appId is undefined so this is just to make the type-checker happy
       ),
-    {
-      enabled: props.appId !== undefined,
-      onSuccess: (data) => {
-        setEmailAssistantState(data); // when its succesful we want to set the displayed chat history
-      }
+    enabled: props.appId !== undefined
+  });
+
+  useEffect(() => {
+    if (initialStateData) {
+      setEmailAssistantState(initialStateData);
     }
-  );
+  }, [initialStateData]);
 
-  const submitInitialMutation = useMutation(
-    (draftData: DraftInit) =>
+  const submitInitialMutation = useMutation({
+    mutationFn: (draftData: DraftInit) =>
       DefaultService.initializeDraftApiV0EmailAssistantCreateProjectIdAppIdPost(
         props.projectId,
         props.appId || 'create_new',
         draftData
       ),
-    {
-      onSuccess: (data) => {
-        setEmailAssistantState(data);
-      }
+    onSuccess: (data) => {
+      setEmailAssistantState(data);
     }
-  );
+  });
 
-  const submitAnswersMutation = useMutation(
-    (answers: QuestionAnswers) =>
+  const submitAnswersMutation = useMutation({
+    mutationFn: (answers: QuestionAnswers) =>
       DefaultService.answerQuestionsApiV0EmailAssistantAnswerQuestionsProjectIdAppIdPost(
         props.projectId,
         props.appId || '',
         answers
       ),
-    {
-      onSuccess: (data) => {
-        setEmailAssistantState(data);
-      }
+    onSuccess: (data) => {
+      setEmailAssistantState(data);
     }
-  );
-  const submitFeedbackMutation = useMutation(
-    (feedbacks: Feedback) =>
+  });
+  const submitFeedbackMutation = useMutation({
+    mutationFn: (feedbacks: Feedback) =>
       DefaultService.provideFeedbackApiV0EmailAssistantProvideFeedbackProjectIdAppIdPost(
         props.projectId,
         props.appId || '',
         feedbacks
       ),
-    {
-      onSuccess: (data) => {
-        setEmailAssistantState(data);
-      }
+    onSuccess: (data) => {
+      setEmailAssistantState(data);
     }
-  );
+  });
 
   const isLoading = isGetInitialStateLoading;
   const anyMutationLoading =
-    submitInitialMutation.isLoading ||
-    submitAnswersMutation.isLoading ||
-    submitFeedbackMutation.isLoading;
+    submitInitialMutation.isPending ||
+    submitAnswersMutation.isPending ||
+    submitFeedbackMutation.isPending;
 
   if (isLoading || isValidationLoading) {
     return <Loading />;
@@ -371,14 +370,14 @@ export const TelemetryWithSelector = (props: {
           projectId={props.projectId}
           setApp={props.setCurrentApp}
           currentApp={props.currentApp}
-          placeholder={
-            'Select a conversation or create a new one by typing...'
-          }></EmailAssistantAppSelector>
+          placeholder={'Select a conversation or create a new one by typing...'}
+        ></EmailAssistantAppSelector>
       </div>
       <MiniTelemetry
         projectId={props.projectId}
         appId={props.currentApp?.app_id}
-        partitionKey={null}></MiniTelemetry>
+        partitionKey={null}
+      ></MiniTelemetry>
     </div>
   );
 };
@@ -402,29 +401,28 @@ export const EmailAssistantAppSelector = (props: {
   placeholder: string;
 }) => {
   const { projectId, setApp } = props;
-  const { data, refetch } = useQuery(
-    ['apps', projectId],
-    () => DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(projectId as string, '__none__'),
-    { enabled: projectId !== undefined }
-  );
-  const createAndUpdateMutation = useMutation(
-    (app_id: string) =>
+  const { data, refetch } = useQuery({
+    queryKey: ['apps', projectId],
+    queryFn: () =>
+      DefaultService.getAppsApiV0ProjectIdPartitionKeyAppsGet(projectId as string, '__none__'),
+    enabled: projectId !== undefined
+  });
+  const createAndUpdateMutation = useMutation({
+    mutationFn: (app_id: string) =>
       DefaultService.createNewApplicationApiV0EmailAssistantCreateNewProjectIdAppIdPost(
         projectId,
         app_id
       ),
-    {
-      onSuccess: (appID) => {
-        refetch().then((data) => {
-          const appSummaries = data.data?.applications || [];
-          const app = appSummaries.find((app) => app.app_id === appID);
-          if (app) {
-            setApp(app);
-          }
-        });
-      }
+    onSuccess: (appID) => {
+      refetch().then((data) => {
+        const appSummaries = data.data?.applications || [];
+        const app = appSummaries.find((app) => app.app_id === appID);
+        if (app) {
+          setApp(app);
+        }
+      });
     }
-  );
+  });
   const appSetter = (appID: string) => createAndUpdateMutation.mutate(appID);
   const dataOrEmpty = Array.from(data?.applications || []);
   const options = dataOrEmpty
@@ -468,6 +466,7 @@ export const EmailAssistantWithTelemetry = () => {
           setCurrentApp={setCurrentApp}
         />
       }
-      mode={'third'}></TwoColumnLayout>
+      mode={'third'}
+    ></TwoColumnLayout>
   );
 };
diff --git a/telemetry/ui/src/examples/StreamingChatbot.tsx b/telemetry/ui/src/examples/StreamingChatbot.tsx
index e006ab019..28fc6f648 100644
--- a/telemetry/ui/src/examples/StreamingChatbot.tsx
+++ b/telemetry/ui/src/examples/StreamingChatbot.tsx
@@ -23,7 +23,7 @@ import { Button } from '../components/common/button';
 import { TwoColumnLayout } from '../components/common/layout';
 import { ApplicationSummary, ChatItem, DefaultService } from '../api';
 import { KeyboardEvent, useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Loading } from '../components/common/loading';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -95,7 +95,8 @@ const ChatMessage = (props: { message: ChatItem; id?: string }) => {
               a: ({ ...props }) => <a className="text-dwlightblue hover:underline" {...props} />
             }}
             remarkPlugins={[remarkGfm]}
-            className={`whitespace-pre-wrap break-lines max-w-full ${props.message.type === ChatItem.type.ERROR ? 'bg-dwred/10' : ''} p-0.5`}>
+            className={`whitespace-pre-wrap break-lines max-w-full ${props.message.type === ChatItem.type.ERROR ? 'bg-dwred/10' : ''} p-0.5`}
+          >
             {props.message.content}
           </Markdown>
         ) : (
@@ -150,31 +151,39 @@ export const StreamingChatbot = (props: { projectId: string; appId: string | und
   const [currentResponse, setCurrentResponse] = useState<string>('');
   const [isChatWaiting, setIsChatWaiting] = useState<boolean>(false);
 
-  const { isLoading: isInitialLoading } = useQuery(
+  const {
+    data: chatHistoryData,
+    error: chatHistoryError,
+    isLoading: isInitialLoading
+  } = useQuery({
     // TODO -- handle errors
-    ['chat', props.projectId, props.appId],
-    () =>
+    queryKey: ['chat', props.projectId, props.appId],
+    queryFn: () =>
       DefaultService.chatHistoryApiV0StreamingChatbotHistoryProjectIdAppIdGet(
         props.projectId,
         props.appId || '' // TODO -- find a cleaner way of doing a skip-token like thing here
       ),
-    {
-      enabled: props.appId !== undefined,
-      onSuccess: (data) => {
-        setDisplayedChatHistory(data); // when its succesful we want to set the displayed chat history
-      },
-      onError: (error: Error) => {
-        setDisplayedChatHistory([
-          ...DEFAULT_CHAT_HISTORY,
-          {
-            content: `Unable to load from server: ${error.message}`,
-            role: ChatItem.role.ASSISTANT,
-            type: ChatItem.type.ERROR
-          }
-        ]);
-      }
+    enabled: props.appId !== undefined
+  });
+
+  useEffect(() => {
+    if (chatHistoryData) {
+      setDisplayedChatHistory(chatHistoryData);
     }
-  );
+  }, [chatHistoryData]);
+
+  useEffect(() => {
+    if (chatHistoryError) {
+      setDisplayedChatHistory([
+        ...DEFAULT_CHAT_HISTORY,
+        {
+          content: `Unable to load from server: ${(chatHistoryError as Error).message}`,
+          role: ChatItem.role.ASSISTANT,
+          type: ChatItem.type.ERROR
+        }
+      ]);
+    }
+  }, [chatHistoryError]);
 
   const submitPrompt = async () => {
     setCurrentResponse(''); // Reset it
@@ -292,7 +301,8 @@ export const StreamingChatbot = (props: { projectId: string; appId: string | und
           disabled={isChatWaiting || props.appId === undefined}
           onClick={() => {
             submitPrompt();
-          }}>
+          }}
+        >
           Send
         </Button>
       </div>
@@ -317,6 +327,7 @@ export const StreamingChatbotWithTelemetry = () => {
           }
         />
       }
-      mode={'third'}></TwoColumnLayout>
+      mode={'third'}
+    ></TwoColumnLayout>
   );
 };