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 };
+}