diff --git a/README.md b/README.md
index bf50932..1d40166 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ NullTickets).
 - **One-click updates** -- download, migrate config, rollback on failure
 - **Multi-instance** -- run multiple instances of the same component side by side
 - **Web UI + CLI** -- browser dashboard for humans, CLI for automation
+- **Orchestration UI** -- workflow editor, poll-based run monitoring, checkpoint forking, encoded workflow/run/store links, and key-value store browser (proxied to NullTickets through NullHub)
 
 ## Quick Start
 
@@ -103,6 +104,12 @@ UI modules. NullHub is a generic engine that interprets manifests.
 **Storage** -- all state lives under `~/.nullhub/` (config, instances, binaries,
 logs, cached manifests).
 
+**Orchestration proxy** -- requests to `/api/orchestration/*` are reverse-proxied
+to the local orchestration stack. Most routes go to NullBoiler's REST API via
+`NULLBOILER_URL` (e.g. `http://localhost:8080`) and optional `NULLBOILER_TOKEN`.
+`/api/orchestration/store/*` is proxied to NullTickets via `NULLTICKETS_URL` and
+optional `NULLTICKETS_TOKEN`.
+
 ## Development
 
 Backend:
@@ -127,7 +134,9 @@ End-to-end:
 
 - Zig 0.15.2
 - Svelte 5 + SvelteKit (static adapter)
-- JSON over HTTP/1.1, SSE for streaming
+- JSON over HTTP/1.1
+- SSE for instance log streaming
+- Poll-based orchestration run updates over the `/orchestration/runs/{id}/stream` API
 
 ## Project Layout
 
@@ -138,15 +147,17 @@ src/
   server.zig            # HTTP server (API + static UI)
   auth.zig              # Optional bearer token auth
   api/                  # REST endpoints (components, instances, wizard, ...)
+    orchestration.zig   # Reverse proxy to NullBoiler orchestration API
   core/                 # Manifest parser, state, platform, paths
   installer/            # Download, build, UI module fetching
   supervisor/           # Process spawn, health checks, manager
-  wizard/               # Manifest wizard engine, config writer
 ui/src/
-  routes/               # SvelteKit pages (dashboard, install, instances, settings)
+  routes/               # SvelteKit pages
+    orchestration/      # Orchestration pages (dashboard, workflows, runs, store)
   lib/components/       # Reusable Svelte components
+    orchestration/      # GraphViewer, StateInspector, RunEventLog, InterruptPanel,
+                        # CheckpointTimeline, WorkflowJsonEditor, NodeCard, SendProgressBar
   lib/api/              # Typed API client
-  lib/stores/           # Reactive state (instances, hub config)
 tests/
   test_e2e.sh           # End-to-end test script
 ```
diff --git a/src/api/orchestration.zig b/src/api/orchestration.zig
new file mode 100644
index 0000000..eac4857
--- /dev/null
+++ b/src/api/orchestration.zig
@@ -0,0 +1,194 @@
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const Response = struct {
+    status: []const u8,
+    content_type: []const u8,
+    body: []const u8,
+};
+
+const prefix = "/api/orchestration";
+const store_prefix = "/api/orchestration/store";
+
+pub const Config = struct {
+    boiler_url: ?[]const u8 = null,
+    boiler_token: ?[]const u8 = null,
+    tickets_url: ?[]const u8 = null,
+    tickets_token: ?[]const u8 = null,
+};
+
+const Backend = enum {
+    boiler,
+    tickets,
+
+    fn notConfiguredBody(self: Backend) []const u8 {
+        return switch (self) {
+            .boiler => "{\"error\":\"NullBoiler not configured\"}",
+            .tickets => "{\"error\":\"NullTickets not configured\"}",
+        };
+    }
+
+    fn unreachableBody(self: Backend) []const u8 {
+        return switch (self) {
+            .boiler => "{\"error\":\"NullBoiler unreachable\"}",
+            .tickets => "{\"error\":\"NullTickets unreachable\"}",
+        };
+    }
+};
+
+pub fn isProxyPath(target: []const u8) bool {
+    return std.mem.eql(u8, target, prefix) or std.mem.startsWith(u8, target, prefix ++ "/");
+}
+
+fn isStorePath(target: []const u8) bool {
+    return std.mem.eql(u8, target, store_prefix) or std.mem.startsWith(u8, target, store_prefix ++ "/");
+}
+
+const ProxyTarget = struct {
+    backend: Backend,
+    base_url: []const u8,
+    token: ?[]const u8,
+};
+
+fn backendForPath(target: []const u8) ?Backend {
+    if (!isProxyPath(target)) return null;
+    return if (isStorePath(target)) .tickets else .boiler;
+}
+
+fn resolveProxyTarget(target: []const u8, cfg: Config) ?ProxyTarget {
+    const backend = backendForPath(target) orelse return null;
+    return switch (backend) {
+        .tickets => blk: {
+            const base_url = cfg.tickets_url orelse return null;
+            break :blk .{
+                .backend = .tickets,
+                .base_url = base_url,
+                .token = cfg.tickets_token,
+            };
+        },
+        .boiler => blk: {
+            const base_url = cfg.boiler_url orelse return null;
+            break :blk .{
+                .backend = .boiler,
+                .base_url = base_url,
+                .token = cfg.boiler_token,
+            };
+        },
+    };
+}
+
+/// Proxies orchestration API requests to the local orchestration stack.
+/// `/api/orchestration/store/*` goes to NullTickets; all other orchestration
+/// routes go to NullBoiler. The shared prefix is stripped before forwarding.
+pub fn handle(allocator: Allocator, method: []const u8, target: []const u8, body: []const u8, cfg: Config) Response {
+    if (!isProxyPath(target)) {
+        return .{ .status = "404 Not Found", .content_type = "application/json", .body = "{\"error\":\"not found\"}" };
+    }
+    const backend = backendForPath(target) orelse
+        return .{ .status = "404 Not Found", .content_type = "application/json", .body = "{\"error\":\"not found\"}" };
+    const resolved = resolveProxyTarget(target, cfg) orelse
+        return .{ .status = "503 Service Unavailable", .content_type = "application/json", .body = backend.notConfiguredBody() };
+
+    const proxied_path = target[prefix.len..];
+    const path = if (proxied_path.len == 0) "/" else proxied_path;
+
+    const url = std.fmt.allocPrint(allocator, "{s}{s}", .{ resolved.base_url, path }) catch
+        return .{ .status = "500 Internal Server Error", .content_type = "application/json", .body = "{\"error\":\"internal error\"}" };
+
+    const http_method = parseMethod(method) orelse
+        return .{ .status = "405 Method Not Allowed", .content_type = "application/json", .body = "{\"error\":\"method not allowed\"}" };
+
+    var auth_header: ?[]const u8 = null;
+    defer if (auth_header) |value| allocator.free(value);
+    var header_buf: [1]std.http.Header = undefined;
+    const extra_headers: []const std.http.Header = if (resolved.token) |token| blk: {
+        auth_header = std.fmt.allocPrint(allocator, "Bearer {s}", .{token}) catch
+            return .{ .status = "500 Internal Server Error", .content_type = "application/json", .body = "{\"error\":\"internal error\"}" };
+        header_buf[0] = .{ .name = "Authorization", .value = auth_header.? };
+        break :blk header_buf[0..1];
+    } else &.{};
+
+    var client: std.http.Client = .{ .allocator = allocator };
+    defer client.deinit();
+
+    var response_body: std.io.Writer.Allocating = .init(allocator);
+    defer response_body.deinit();
+
+    const result = client.fetch(.{
+        .location = .{ .url = url },
+        .method = http_method,
+        .payload = if (body.len > 0) body else null,
+        .response_writer = &response_body.writer,
+        .extra_headers = extra_headers,
+    }) catch {
+        return .{ .status = "502 Bad Gateway", .content_type = "application/json", .body = resolved.backend.unreachableBody() };
+    };
+
+    const status_code: u10 = @intFromEnum(result.status);
+    const resp_body = response_body.toOwnedSlice() catch
+        return .{ .status = "500 Internal Server Error", .content_type = "application/json", .body = "{\"error\":\"internal error\"}" };
+
+    const status = mapStatus(status_code);
+
+    return .{
+        .status = status,
+        .content_type = "application/json",
+        .body = resp_body,
+    };
+}
+
+fn parseMethod(method: []const u8) ?std.http.Method {
+    if (std.mem.eql(u8, method, "GET")) return .GET;
+    if (std.mem.eql(u8, method, "POST")) return .POST;
+    if (std.mem.eql(u8, method, "PUT")) return .PUT;
+    if (std.mem.eql(u8, method, "DELETE")) return .DELETE;
+    if (std.mem.eql(u8, method, "PATCH")) return .PATCH;
+    return null;
+}
+
+fn mapStatus(code: u10) []const u8 {
+    return switch (code) {
+        200 => "200 OK",
+        201 => "201 Created",
+        204 => "204 No Content",
+        400 => "400 Bad Request",
+        401 => "401 Unauthorized",
+        403 => "403 Forbidden",
+        404 => "404 Not Found",
+        405 => "405 Method Not Allowed",
+        409 => "409 Conflict",
+        422 => "422 Unprocessable Entity",
+        500 => "500 Internal Server Error",
+        502 => "502 Bad Gateway",
+        503 => "503 Service Unavailable",
+        else => if (code >= 200 and code < 300) "200 OK" else if (code >= 400 and code < 500) "400 Bad Request" else "500 Internal Server Error",
+    };
+}
+
+test "isProxyPath matches orchestration namespace" {
+    try std.testing.expect(isProxyPath("/api/orchestration"));
+    try std.testing.expect(isProxyPath("/api/orchestration/runs"));
+    try std.testing.expect(isProxyPath("/api/orchestration/store/search"));
+    try std.testing.expect(!isProxyPath("/api/instances"));
+}
+
+test "backendForPath routes store requests to tickets backend" {
+    try std.testing.expectEqual(Backend.tickets, backendForPath("/api/orchestration/store/search").?);
+    try std.testing.expectEqual(Backend.boiler, backendForPath("/api/orchestration/runs").?);
+}
+
+test "handle routes store paths to NullTickets config" {
+    const resp = handle(std.testing.allocator, "GET", "/api/orchestration/store/search", "", .{
+        .boiler_url = "http://127.0.0.1:8080",
+    });
+    try std.testing.expectEqualStrings("503 Service Unavailable", resp.status);
+    try std.testing.expectEqualStrings("{\"error\":\"NullTickets not configured\"}", resp.body);
+}
+
+test "handle routes non-store paths to NullBoiler config" {
+    const resp = handle(std.testing.allocator, "GET", "/api/orchestration/runs", "", .{
+        .tickets_url = "http://127.0.0.1:7711",
+    });
+    try std.testing.expectEqualStrings("503 Service Unavailable", resp.status);
+    try std.testing.expectEqualStrings("{\"error\":\"NullBoiler not configured\"}", resp.body);
+}
diff --git a/src/server.zig b/src/server.zig
index cc2dc9c..5f30e85 100644
--- a/src/server.zig
+++ b/src/server.zig
@@ -17,6 +17,7 @@ const wizard_api = @import("api/wizard.zig");
 const providers_api = @import("api/providers.zig");
 const channels_api = @import("api/channels.zig");
 const usage_api = @import("api/usage.zig");
+const orchestration_api = @import("api/orchestration.zig");
 const ui_modules = @import("installer/ui_modules.zig");
 const orchestrator = @import("installer/orchestrator.zig");
 const registry = @import("installer/registry.zig");
@@ -348,11 +349,20 @@ pub const Server = struct {
         if (std.mem.eql(u8, method, "GET") or std.mem.eql(u8, method, "HEAD")) {
             if (try self.redirectLocationForAliasHost(alloc, raw, target)) |location| {
                 defer alloc.free(location);
-                try sendRedirect(conn.stream, location);
+                try sendRedirect(conn.stream, location, raw, self.host, self.port);
                 return;
             }
         }
 
+        if (!requestOriginAllowed(raw, target, self.host, self.port)) {
+            try sendResponse(conn.stream, .{
+                .status = "403 Forbidden",
+                .content_type = "application/json",
+                .body = "{\"error\":\"forbidden origin\"}",
+            }, raw, self.host, self.port);
+            return;
+        }
+
         // Read remaining body if Content-Length indicates more data
         const body = readBody(raw, n, conn.stream, alloc) catch return;
 
@@ -362,7 +372,7 @@ pub const Server = struct {
                 .status = "204 No Content",
                 .content_type = "text/plain",
                 .body = "",
-            });
+            }, raw, self.host, self.port);
             return;
         }
 
@@ -373,20 +383,20 @@ pub const Server = struct {
                     .status = "401 Unauthorized",
                     .content_type = "application/json",
                     .body = "{\"error\":\"unauthorized\"}",
-                });
+                }, raw, self.host, self.port);
                 return;
             }
         }
 
         // Route dispatch (lock mutex so supervisor thread doesn't race)
-        const response = if (instances_api.isIntegrationPath(target))
+        const response = if (routeWithoutServerMutex(target))
             self.route(alloc, method, target, body)
         else blk: {
             self.mutex.lock();
             defer self.mutex.unlock();
             break :blk self.route(alloc, method, target, body);
         };
-        try sendResponse(conn.stream, response);
+        try sendResponse(conn.stream, response, raw, self.host, self.port);
     }
 
     fn redirectLocationForAliasHost(self: *const Server, allocator: std.mem.Allocator, raw: []const u8, target: []const u8) !?[]u8 {
@@ -403,6 +413,38 @@ pub const Server = struct {
         });
     }
 
+    // std.posix.getenv is unavailable on Windows (WTF-16 encoding).
+    // Orchestration proxy requires Unix — returns null on Windows.
+    fn getEnv(name: []const u8) ?[]const u8 {
+        const native = @import("builtin").os.tag;
+        if (native == .windows) return null;
+        return std.posix.getenv(name);
+    }
+
+    fn getBoilerUrl(self: *Server) ?[]const u8 {
+        _ = self;
+        return getEnv("NULLBOILER_URL");
+    }
+
+    fn getBoilerToken(self: *Server) ?[]const u8 {
+        _ = self;
+        return getEnv("NULLBOILER_TOKEN");
+    }
+
+    fn getTicketsUrl(self: *Server) ?[]const u8 {
+        _ = self;
+        return getEnv("NULLTICKETS_URL");
+    }
+
+    fn getTicketsToken(self: *Server) ?[]const u8 {
+        _ = self;
+        return getEnv("NULLTICKETS_TOKEN");
+    }
+
+    fn routeWithoutServerMutex(target: []const u8) bool {
+        return instances_api.isIntegrationPath(target) or orchestration_api.isProxyPath(target);
+    }
+
     fn route(self: *Server, allocator: std.mem.Allocator, method: []const u8, target: []const u8, body: []const u8) Response {
         if (std.mem.eql(u8, method, "GET")) {
             if (std.mem.eql(u8, target, "/health")) {
@@ -932,6 +974,16 @@ pub const Server = struct {
             }
         }
 
+        if (orchestration_api.isProxyPath(target)) {
+            const resp = orchestration_api.handle(allocator, method, target, body, .{
+                .boiler_url = self.getBoilerUrl(),
+                .boiler_token = self.getBoilerToken(),
+                .tickets_url = self.getTicketsUrl(),
+                .tickets_token = self.getTicketsToken(),
+            });
+            return .{ .status = resp.status, .content_type = resp.content_type, .body = resp.body };
+        }
+
         // Serve UI module files from data directory (~/.nullhub/ui/{name}@{version}/...)
         if (!std.mem.startsWith(u8, target, "/api/") and std.mem.startsWith(u8, target, "/ui/")) {
             // Check if this looks like a module path: /ui/{name}@{version}/...
@@ -993,39 +1045,35 @@ fn readBody(raw: []const u8, n: usize, stream: std.net.Stream, alloc: std.mem.Al
     return extractBody(raw);
 }
 
-fn sendResponse(stream: std.net.Stream, response: Response) !void {
+fn sendResponse(stream: std.net.Stream, response: Response, raw_request: []const u8, bind_host: []const u8, port: u16) !void {
     var buf: [4096]u8 = undefined;
-    const header = try std.fmt.bufPrint(
-        &buf,
-        "HTTP/1.1 {s}\r\n" ++
-            "Content-Type: {s}\r\n" ++
-            "Content-Length: {d}\r\n" ++
-            "Access-Control-Allow-Origin: *\r\n" ++
-            "Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS\r\n" ++
-            "Access-Control-Allow-Headers: Content-Type, Authorization\r\n" ++
-            "Connection: close\r\n\r\n",
-        .{ response.status, response.content_type, response.body.len },
-    );
-    _ = try stream.write(header);
+    var header_stream = std.io.fixedBufferStream(&buf);
+    const writer = header_stream.writer();
+
+    try writer.print("HTTP/1.1 {s}\r\n", .{response.status});
+    try writer.print("Content-Type: {s}\r\n", .{response.content_type});
+    try writer.print("Content-Length: {d}\r\n", .{response.body.len});
+    try appendCorsHeaders(writer, raw_request, bind_host, port);
+    try writer.writeAll("Connection: close\r\n\r\n");
+
+    _ = try stream.write(header_stream.getWritten());
     if (response.body.len > 0) {
         _ = try stream.write(response.body);
     }
 }
 
-fn sendRedirect(stream: std.net.Stream, location: []const u8) !void {
+fn sendRedirect(stream: std.net.Stream, location: []const u8, raw_request: []const u8, bind_host: []const u8, port: u16) !void {
     var buf: [4096]u8 = undefined;
-    const header = try std.fmt.bufPrint(
-        &buf,
-        "HTTP/1.1 308 Permanent Redirect\r\n" ++
-            "Location: {s}\r\n" ++
-            "Content-Length: 0\r\n" ++
-            "Access-Control-Allow-Origin: *\r\n" ++
-            "Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS\r\n" ++
-            "Access-Control-Allow-Headers: Content-Type, Authorization\r\n" ++
-            "Connection: close\r\n\r\n",
-        .{location},
-    );
-    _ = try stream.write(header);
+    var header_stream = std.io.fixedBufferStream(&buf);
+    const writer = header_stream.writer();
+
+    try writer.writeAll("HTTP/1.1 308 Permanent Redirect\r\n");
+    try writer.print("Location: {s}\r\n", .{location});
+    try writer.writeAll("Content-Length: 0\r\n");
+    try appendCorsHeaders(writer, raw_request, bind_host, port);
+    try writer.writeAll("Connection: close\r\n\r\n");
+
+    _ = try stream.write(header_stream.getWritten());
 }
 
 pub fn extractBody(raw: []const u8) []const u8 {
@@ -1055,6 +1103,48 @@ pub fn extractHeader(raw: []const u8, name: []const u8) ?[]const u8 {
     return null;
 }
 
+fn requestOriginAllowed(raw_request: []const u8, target: []const u8, bind_host: []const u8, port: u16) bool {
+    if (!std.mem.startsWith(u8, target, "/api/")) return true;
+    const origin = extractHeader(raw_request, "Origin") orelse return true;
+    return isAllowedCorsOrigin(origin, bind_host, port);
+}
+
+fn appendCorsHeaders(writer: anytype, raw_request: []const u8, bind_host: []const u8, port: u16) !void {
+    const origin = allowedCorsOrigin(raw_request, bind_host, port) orelse return;
+    try writer.print("Access-Control-Allow-Origin: {s}\r\n", .{origin});
+    try writer.writeAll("Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS\r\n");
+    try writer.writeAll("Access-Control-Allow-Headers: Content-Type, Authorization\r\n");
+    try writer.writeAll("Vary: Origin\r\n");
+}
+
+fn allowedCorsOrigin(raw_request: []const u8, bind_host: []const u8, port: u16) ?[]const u8 {
+    const origin = extractHeader(raw_request, "Origin") orelse return null;
+    if (!isAllowedCorsOrigin(origin, bind_host, port)) return null;
+    return origin;
+}
+
+fn isAllowedCorsOrigin(origin: []const u8, bind_host: []const u8, port: u16) bool {
+    if (originMatchesHost(origin, bind_host, port)) return true;
+    if (!access.isLocalBindHost(bind_host)) return false;
+
+    inline for (&[_][]const u8{
+        "127.0.0.1",
+        "localhost",
+        "[::1]",
+        access.canonical_local_host,
+        access.public_alias_host,
+    }) |host| {
+        if (originMatchesHost(origin, host, port)) return true;
+    }
+    return false;
+}
+
+fn originMatchesHost(origin: []const u8, host: []const u8, port: u16) bool {
+    var buf: [256]u8 = undefined;
+    const expected = std.fmt.bufPrint(&buf, "http://{s}:{d}", .{ host, port }) catch return false;
+    return std.ascii.eqlIgnoreCase(origin, expected);
+}
+
 fn hostMatchesAliasHost(host_header: []const u8, alias_host: []const u8) bool {
     const trimmed = std.mem.trim(u8, host_header, " \t");
     if (std.ascii.eqlIgnoreCase(trimmed, alias_host)) return true;
@@ -1271,6 +1361,39 @@ test "hostMatchesAliasHost matches bare host and host with port" {
     try std.testing.expect(!hostMatchesAliasHost("nullhub.localhost:19800", "nullhub.local"));
 }
 
+test "isAllowedCorsOrigin allows local aliases for loopback binds" {
+    try std.testing.expect(isAllowedCorsOrigin("http://127.0.0.1:19800", "127.0.0.1", 19800));
+    try std.testing.expect(isAllowedCorsOrigin("http://nullhub.localhost:19800", "127.0.0.1", 19800));
+    try std.testing.expect(isAllowedCorsOrigin("http://nullhub.local:19800", "127.0.0.1", 19800));
+}
+
+test "isAllowedCorsOrigin rejects foreign or mismatched origins" {
+    try std.testing.expect(!isAllowedCorsOrigin("http://evil.example:19800", "127.0.0.1", 19800));
+    try std.testing.expect(!isAllowedCorsOrigin("http://127.0.0.1:19801", "127.0.0.1", 19800));
+}
+
+test "requestOriginAllowed rejects foreign API origins" {
+    const evil_raw =
+        "GET /api/status HTTP/1.1\r\n" ++
+        "Host: 127.0.0.1:19800\r\n" ++
+        "Origin: http://evil.example:19800\r\n\r\n";
+    try std.testing.expect(!requestOriginAllowed(evil_raw, "/api/status", "127.0.0.1", 19800));
+
+    const local_raw =
+        "GET /api/status HTTP/1.1\r\n" ++
+        "Host: 127.0.0.1:19800\r\n" ++
+        "Origin: http://nullhub.localhost:19800\r\n\r\n";
+    try std.testing.expect(requestOriginAllowed(local_raw, "/api/status", "127.0.0.1", 19800));
+}
+
+test "routeWithoutServerMutex keeps orchestration proxy requests off global lock" {
+    try std.testing.expect(Server.routeWithoutServerMutex("/api/orchestration"));
+    try std.testing.expect(Server.routeWithoutServerMutex("/api/orchestration/runs"));
+    try std.testing.expect(Server.routeWithoutServerMutex("/api/orchestration/store/search"));
+    try std.testing.expect(Server.routeWithoutServerMutex("/api/instances/nullclaw/demo/logs"));
+    try std.testing.expect(!Server.routeWithoutServerMutex("/api/components"));
+}
+
 test "extractBody returns body after headers" {
     const raw = "GET / HTTP/1.1\r\nHost: localhost\r\n\r\nhello world";
     try std.testing.expectEqualStrings("hello world", extractBody(raw));
diff --git a/ui/src/lib/api/client.ts b/ui/src/lib/api/client.ts
index 9b027b5..a663ba9 100644
--- a/ui/src/lib/api/client.ts
+++ b/ui/src/lib/api/client.ts
@@ -1,3 +1,5 @@
+import { createOrchestrationApi } from '$lib/api/orchestration';
+
 const BASE = '/api';
 
 function withQuery(path: string, params: Record<string, string | number | boolean | null | undefined>): string {
@@ -10,6 +12,8 @@ function withQuery(path: string, params: Record<string, string | number | boolea
   return query ? `${path}?${query}` : path;
 }
 
+export { encodePathSegment } from '$lib/orchestration/routes';
+
 export type LogSource = 'instance' | 'nullhub';
 type InstanceStartOptions = {
   launch_mode?: string;
@@ -23,9 +27,13 @@ async function request<T>(path: string, options?: RequestInit): Promise<T> {
   });
   if (!res.ok) {
     const body = await res.json().catch(() => null);
-    throw new Error(body?.error || `HTTP ${res.status}`);
+    const errMsg = typeof body?.error === 'string' ? body.error : body?.error?.message || `HTTP ${res.status}`;
+    throw new Error(errMsg);
   }
-  return res.json();
+  if (res.status === 204) return undefined as T;
+  const text = await res.text();
+  if (!text) return undefined as T;
+  return JSON.parse(text);
 }
 
 export const api = {
@@ -174,4 +182,5 @@ export const api = {
     request<any>(`/channels/${id.replace('sc_', '')}`, { method: 'DELETE' }),
   revalidateSavedChannel: (id: string) =>
     request<any>(`/channels/${id.replace('sc_', '')}/validate`, { method: 'POST' }),
+  ...createOrchestrationApi(request, withQuery),
 };
diff --git a/ui/src/lib/api/orchestration.ts b/ui/src/lib/api/orchestration.ts
new file mode 100644
index 0000000..bc8139c
--- /dev/null
+++ b/ui/src/lib/api/orchestration.ts
@@ -0,0 +1,175 @@
+import { orchestrationApiPaths } from '$lib/orchestration/routes';
+
+type RequestFn = <T>(path: string, options?: RequestInit) => Promise<T>;
+type WithQueryFn = (
+  path: string,
+  params: Record<string, string | number | boolean | null | undefined>,
+) => string;
+
+function msToIso(ms: number | undefined | null): string | undefined {
+  if (ms == null) return undefined;
+  return new Date(ms).toISOString();
+}
+
+function tryParseJson(val: string | undefined | null): any {
+  if (!val) return undefined;
+  try { return JSON.parse(val); } catch { return val; }
+}
+
+function normalizeWorkflow(raw: any): any {
+  if (!raw) return raw;
+  const def = raw.definition ? tryParseJson(raw.definition) : null;
+  return {
+    ...raw,
+    nodes: raw.nodes ?? def?.nodes ?? {},
+    edges: raw.edges ?? def?.edges ?? [],
+    state_schema: raw.state_schema ?? def?.state_schema,
+    created_at: raw.created_at ?? msToIso(raw.created_at_ms),
+    updated_at: raw.updated_at ?? msToIso(raw.updated_at_ms),
+  };
+}
+
+function normalizeStep(step: any): any {
+  if (!step) return step;
+  return {
+    ...step,
+    node_id: step.node_id ?? step.def_step_id ?? step.step,
+  };
+}
+
+function normalizeRun(raw: any): any {
+  if (!raw) return raw;
+  const steps = raw.steps ? raw.steps.map(normalizeStep) : raw.steps;
+  return {
+    ...raw,
+    steps,
+    state: raw.state ?? tryParseJson(raw.state_json),
+    workflow: raw.workflow ?? tryParseJson(raw.workflow_json),
+    input: raw.input ?? tryParseJson(raw.input_json),
+    config: raw.config ?? tryParseJson(raw.config_json),
+    created_at: raw.created_at ?? msToIso(raw.created_at_ms),
+    completed_at: raw.completed_at ?? raw.ended_at ?? msToIso(raw.ended_at_ms),
+    updated_at: raw.updated_at ?? msToIso(raw.updated_at_ms),
+    started_at: raw.started_at ?? msToIso(raw.started_at_ms),
+    interrupt_message: raw.interrupt_message ?? raw.error_text,
+  };
+}
+
+function normalizeCheckpoint(raw: any): any {
+  if (!raw) return raw;
+  return {
+    ...raw,
+    state: raw.state ?? tryParseJson(raw.state_json),
+    completed_nodes: raw.completed_nodes ?? tryParseJson(raw.completed_nodes_json),
+    metadata: raw.metadata ?? tryParseJson(raw.metadata_json),
+    created_at: raw.created_at ?? msToIso(raw.created_at_ms),
+    step_name: raw.step_name ?? raw.step_id,
+    after_step: raw.after_step ?? raw.step_id,
+  };
+}
+
+function normalizeValidation(raw: any): any {
+  if (!raw) return raw;
+  if (raw.errors && Array.isArray(raw.errors) && raw.errors.length > 0 && typeof raw.errors[0] === 'object') {
+    return { ...raw, errors: raw.errors.map((e: any) => e.message || `${e.type || e.err_type}: ${e.key || e.node || 'unknown'}`) };
+  }
+  return raw;
+}
+
+function normalizeEventType(type: string | undefined): string {
+  if (!type) return 'message';
+  if (type === 'run.interrupted') return 'interrupted';
+  return type.replaceAll('.', '_');
+}
+
+function normalizeStreamEvent(raw: any): { type: string; data: any; timestamp?: number } {
+  const timestampMs = typeof raw?.ts_ms === 'number'
+    ? raw.ts_ms
+    : typeof raw?.timestamp_ms === 'number'
+      ? raw.timestamp_ms
+      : undefined;
+
+  return {
+    type: normalizeEventType(raw?.event || raw?.type || raw?.kind),
+    data: raw?.data ?? raw,
+    timestamp: timestampMs != null ? timestampMs / 1000 : undefined,
+  };
+}
+
+export function createOrchestrationApi(request: RequestFn, withQuery: WithQueryFn) {
+  return {
+    listWorkflows: async () => {
+      const raw = await request<any>(orchestrationApiPaths.workflows());
+      const list = Array.isArray(raw) ? raw : raw?.items ?? [];
+      return list.map(normalizeWorkflow);
+    },
+    getWorkflow: async (id: string) => normalizeWorkflow(await request<any>(orchestrationApiPaths.workflow(id))),
+    createWorkflow: (data: any) => request<any>(orchestrationApiPaths.workflows(), { method: 'POST', body: JSON.stringify(data) }),
+    updateWorkflow: (id: string, data: any) => request<any>(orchestrationApiPaths.workflow(id), { method: 'PUT', body: JSON.stringify(data) }),
+    deleteWorkflow: (id: string) => request<any>(orchestrationApiPaths.workflow(id), { method: 'DELETE' }),
+    validateWorkflow: async (id: string) => normalizeValidation(await request<any>(orchestrationApiPaths.workflowValidate(id), { method: 'POST' })),
+    runWorkflow: (id: string, input: any) => request<any>(orchestrationApiPaths.workflowRun(id), { method: 'POST', body: JSON.stringify(input) }),
+    listRuns: async (params?: { status?: string; workflow_id?: string }) => {
+      const raw = await request<any>(withQuery(orchestrationApiPaths.runs(), params ?? {}));
+      const list = Array.isArray(raw) ? raw : raw?.items ?? [];
+      return list.map(normalizeRun);
+    },
+    getRun: async (id: string) => normalizeRun(await request<any>(orchestrationApiPaths.run(id))),
+    cancelRun: (id: string) => request<any>(orchestrationApiPaths.runCancel(id), { method: 'POST' }),
+    resumeRun: (id: string, updates: any) => request<any>(orchestrationApiPaths.runResume(id), { method: 'POST', body: JSON.stringify({ state_updates: updates }) }),
+    forkRun: (checkpointId: string, overrides?: any) => request<any>(orchestrationApiPaths.runsFork(), { method: 'POST', body: JSON.stringify({ checkpoint_id: checkpointId, state_overrides: overrides }) }),
+    replayRun: (id: string, checkpointId: string) => request<any>(orchestrationApiPaths.runReplay(id), { method: 'POST', body: JSON.stringify({ from_checkpoint_id: checkpointId }) }),
+    injectState: (id: string, updates: any, afterStep?: string) => request<any>(orchestrationApiPaths.runState(id), { method: 'POST', body: JSON.stringify({ updates, apply_after_step: afterStep }) }),
+    listCheckpoints: async (runId: string) => {
+      const cps = await request<any[]>(orchestrationApiPaths.runCheckpoints(runId));
+      return (cps || []).map(normalizeCheckpoint);
+    },
+    getCheckpoint: async (runId: string, cpId: string) => normalizeCheckpoint(await request<any>(orchestrationApiPaths.runCheckpoint(runId, cpId))),
+    storeList: (namespace: string) => request<any[]>(orchestrationApiPaths.storeNamespace(namespace)),
+    storeGet: (namespace: string, key: string) => request<any>(orchestrationApiPaths.storeEntry(namespace, key)),
+    storePut: (namespace: string, key: string, value: any) => request<void>(orchestrationApiPaths.storeEntry(namespace, key), { method: 'PUT', body: JSON.stringify({ value }) }),
+    storeDelete: (namespace: string, key: string) => request<void>(orchestrationApiPaths.storeEntry(namespace, key), { method: 'DELETE' }),
+    streamRun: (runId: string, onEvent: (event: { type: string; data: any; timestamp?: number }) => void) => {
+      let active = true;
+      let deliveredInitialSnapshot = false;
+      let afterSeq = 0;
+
+      const emitEvent = (ev: any) => {
+        if (!active) return;
+        onEvent(normalizeStreamEvent(ev));
+      };
+
+      const poll = async () => {
+        while (active) {
+          try {
+            const res = await request<any>(withQuery(orchestrationApiPaths.runStream(runId), {
+              after_seq: afterSeq > 0 ? afterSeq : undefined,
+            }));
+            if (!active) break;
+            if (res?.stream_events) {
+              for (const ev of res.stream_events) emitEvent(ev);
+            }
+            if (!deliveredInitialSnapshot && res?.events) {
+              for (const ev of res.events) emitEvent(ev);
+              deliveredInitialSnapshot = true;
+            }
+            if (typeof res?.next_stream_seq === 'number') {
+              afterSeq = Math.max(afterSeq, res.next_stream_seq);
+            }
+            if (res?.status && ['completed', 'failed', 'cancelled'].includes(res.status)) {
+              break;
+            }
+          } catch {
+            if (!active) break;
+            // Ignore poll errors, will retry.
+          }
+          if (!active) break;
+          await new Promise(r => setTimeout(r, 1000));
+        }
+      };
+
+      void poll();
+      return { close: () => { active = false; } } as EventSource;
+    },
+  };
+}
diff --git a/ui/src/lib/components/Sidebar.svelte b/ui/src/lib/components/Sidebar.svelte
index e5c0225..e66b77d 100644
--- a/ui/src/lib/components/Sidebar.svelte
+++ b/ui/src/lib/components/Sidebar.svelte
@@ -2,6 +2,7 @@
   import { page } from "$app/stores";
   import { onMount } from "svelte";
   import { api } from "$lib/api/client";
+  import { orchestrationUiRoutes } from "$lib/orchestration/routes";
 
   let instances = $state<Record<string, any>>({});
   let currentPath = $derived($page.url.pathname);
@@ -52,6 +53,14 @@
     {/each}
   </div>
 
+  <div class="nav-section">
+    <h3>Orchestration</h3>
+    <a href={orchestrationUiRoutes.dashboard()} class:active={currentPath === orchestrationUiRoutes.dashboard()}>Dashboard</a>
+    <a href={orchestrationUiRoutes.workflows()} class:active={currentPath.startsWith(orchestrationUiRoutes.workflows())}>Workflows</a>
+    <a href={orchestrationUiRoutes.runs()} class:active={currentPath.startsWith(orchestrationUiRoutes.runs())}>Runs</a>
+    <a href={orchestrationUiRoutes.store()} class:active={currentPath.startsWith(orchestrationUiRoutes.store())}>Store</a>
+  </div>
+
   <div class="nav-section">
     <a href="/providers" class:active={currentPath === "/providers"}>Providers</a>
   </div>
diff --git a/ui/src/lib/components/orchestration/CheckpointTimeline.svelte b/ui/src/lib/components/orchestration/CheckpointTimeline.svelte
new file mode 100644
index 0000000..9b50f33
--- /dev/null
+++ b/ui/src/lib/components/orchestration/CheckpointTimeline.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  let { checkpoints = [], selected = '', onSelect = (_id: string) => {} } = $props();
+
+  function formatTime(ts: string | number) {
+    if (!ts) return '';
+    const d = typeof ts === 'number' ? new Date(ts * 1000) : new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+</script>
+
+<div class="timeline">
+  {#if checkpoints.length === 0}
+    <div class="empty">No checkpoints</div>
+  {/if}
+  {#each checkpoints as cp, i}
+    <button
+      class="checkpoint"
+      class:selected={cp.id === selected}
+      onclick={() => onSelect(cp.id)}
+    >
+      <div class="dot-col">
+        <span class="dot" class:selected={cp.id === selected}></span>
+        {#if i < checkpoints.length - 1}
+          <span class="line"></span>
+        {/if}
+      </div>
+      <div class="cp-info">
+        <span class="cp-version">v{cp.version ?? i + 1}</span>
+        <span class="cp-step">{cp.step_name || cp.after_step || 'start'}</span>
+        <span class="cp-time">{formatTime(cp.created_at)}</span>
+      </div>
+    </button>
+  {/each}
+</div>
+
+<style>
+  .timeline {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0;
+  }
+  .empty {
+    padding: 2rem;
+    text-align: center;
+    color: var(--fg-dim);
+    font-size: 0.8125rem;
+    font-family: var(--font-mono);
+  }
+  .checkpoint {
+    display: flex;
+    align-items: stretch;
+    gap: 0.75rem;
+    padding: 0;
+    background: none;
+    border: none;
+    color: var(--fg);
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease;
+  }
+  .checkpoint:hover {
+    background: var(--bg-hover);
+  }
+  .checkpoint.selected {
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+  }
+  .dot-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 20px;
+    padding-top: 0.75rem;
+    flex-shrink: 0;
+    margin-left: 0.5rem;
+  }
+  .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--border);
+    border: 2px solid var(--fg-dim);
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+  }
+  .dot.selected {
+    background: var(--accent);
+    border-color: var(--accent);
+    box-shadow: 0 0 8px var(--accent);
+  }
+  .line {
+    flex: 1;
+    width: 2px;
+    background: var(--border);
+    min-height: 12px;
+  }
+  .cp-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0.625rem 0.75rem 0.625rem 0;
+    min-width: 0;
+  }
+  .cp-version {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--accent);
+    text-shadow: var(--text-glow);
+  }
+  .cp-step {
+    font-size: 0.8125rem;
+    color: var(--fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cp-time {
+    font-size: 0.6875rem;
+    font-family: var(--font-mono);
+    color: var(--fg-dim);
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/GraphViewer.svelte b/ui/src/lib/components/orchestration/GraphViewer.svelte
new file mode 100644
index 0000000..97180a4
--- /dev/null
+++ b/ui/src/lib/components/orchestration/GraphViewer.svelte
@@ -0,0 +1,258 @@
+<script lang="ts">
+  let { workflow = { nodes: {}, edges: [] }, nodeStatus = {} } = $props<{
+    workflow: { nodes: Record<string, any>; edges: { from: string; to: string; condition?: string }[] };
+    nodeStatus: Record<string, string>;
+  }>();
+
+  const NODE_W = 140;
+  const NODE_H = 40;
+  const LAYER_GAP = 80;
+  const NODE_GAP = 60;
+  const PAD = 40;
+  const CIRCLE_R = 16;
+
+  const typeLabels: Record<string, string> = {
+    task: 'T', route: 'R', interrupt: 'I', agent: 'A', send: 'S', transform: 'X', subgraph: 'G',
+  };
+
+  const statusColors: Record<string, string> = {
+    pending: 'var(--fg-dim)',
+    running: 'var(--accent)',
+    completed: 'var(--success)',
+    failed: 'var(--error)',
+    interrupted: 'var(--warning)',
+  };
+
+  interface LayoutNode {
+    id: string;
+    x: number;
+    y: number;
+    type: string;
+    label: string;
+    isTerminal: boolean;
+  }
+
+  function layout(nodes: Record<string, any>, edges: { from: string; to: string }[]): {
+    lnodes: LayoutNode[];
+    ledges: { x1: number; y1: number; x2: number; y2: number }[];
+    width: number;
+    height: number;
+  } {
+    const allIds = new Set<string>();
+    allIds.add('__start__');
+    allIds.add('__end__');
+    for (const id of Object.keys(nodes || {})) allIds.add(id);
+    for (const e of edges || []) { allIds.add(e.from); allIds.add(e.to); }
+
+    // BFS layering
+    const adj = new Map<string, string[]>();
+    for (const id of allIds) adj.set(id, []);
+    for (const e of edges || []) {
+      adj.get(e.from)?.push(e.to);
+    }
+
+    const layers = new Map<string, number>();
+    const queue: string[] = ['__start__'];
+    layers.set('__start__', 0);
+
+    // Guard against cycles: limit total iterations to n * e
+    const maxIter = allIds.size * (edges?.length || 1) + allIds.size;
+    let iter = 0;
+    while (queue.length > 0 && iter < maxIter) {
+      iter++;
+      const cur = queue.shift()!;
+      const cl = layers.get(cur)!;
+      for (const next of adj.get(cur) || []) {
+        if (!layers.has(next) || layers.get(next)! < cl + 1) {
+          layers.set(next, cl + 1);
+          queue.push(next);
+        }
+      }
+    }
+
+    // Assign unvisited nodes to layer 1
+    for (const id of allIds) {
+      if (!layers.has(id)) layers.set(id, 1);
+    }
+
+    // Group by layer
+    const byLayer = new Map<number, string[]>();
+    for (const [id, layer] of layers) {
+      if (!byLayer.has(layer)) byLayer.set(layer, []);
+      byLayer.get(layer)!.push(id);
+    }
+
+    const maxLayer = Math.max(...byLayer.keys(), 0);
+
+    // Position nodes
+    const positions = new Map<string, { x: number; y: number }>();
+    let maxWidth = 0;
+    for (let l = 0; l <= maxLayer; l++) {
+      const ids = byLayer.get(l) || [];
+      const count = ids.length;
+      const totalWidth = count * NODE_W + (count - 1) * NODE_GAP;
+      if (totalWidth > maxWidth) maxWidth = totalWidth;
+      for (let i = 0; i < count; i++) {
+        positions.set(ids[i], {
+          x: PAD + i * (NODE_W + NODE_GAP) + NODE_W / 2,
+          y: PAD + l * (NODE_H + LAYER_GAP) + NODE_H / 2,
+        });
+      }
+    }
+
+    // Center each layer relative to widest
+    const viewW = maxWidth + PAD * 2;
+    for (let l = 0; l <= maxLayer; l++) {
+      const ids = byLayer.get(l) || [];
+      const count = ids.length;
+      const layerWidth = count * NODE_W + (count - 1) * NODE_GAP;
+      const offset = (viewW - layerWidth) / 2 - PAD;
+      for (const id of ids) {
+        const p = positions.get(id)!;
+        p.x += offset;
+      }
+    }
+
+    const viewH = (maxLayer + 1) * (NODE_H + LAYER_GAP) + PAD;
+
+    const lnodes: LayoutNode[] = [];
+    for (const id of allIds) {
+      const pos = positions.get(id)!;
+      const isTerminal = id === '__start__' || id === '__end__';
+      lnodes.push({
+        id,
+        x: pos.x,
+        y: pos.y,
+        type: nodes?.[id]?.type || 'task',
+        label: isTerminal ? id.replace(/__/g, '') : id,
+        isTerminal,
+      });
+    }
+
+    const ledges: { x1: number; y1: number; x2: number; y2: number }[] = [];
+    for (const e of edges || []) {
+      const from = positions.get(e.from);
+      const to = positions.get(e.to);
+      if (from && to) {
+        ledges.push({
+          x1: from.x,
+          y1: from.y + (allIds.has(e.from) && (e.from === '__start__' || e.from === '__end__') ? CIRCLE_R : NODE_H / 2),
+          x2: to.x,
+          y2: to.y - (allIds.has(e.to) && (e.to === '__start__' || e.to === '__end__') ? CIRCLE_R : NODE_H / 2),
+        });
+      }
+    }
+
+    return { lnodes, ledges, width: viewW, height: viewH };
+  }
+
+  let graph = $derived(layout(workflow.nodes || {}, workflow.edges || []));
+</script>
+
+<div class="graph-viewer">
+  <svg viewBox="0 0 {Math.max(graph.width, 200)} {Math.max(graph.height, 100)}" class="dag-svg">
+    <defs>
+      <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+        <polygon points="0 0, 8 3, 0 6" fill="var(--fg-dim)" />
+      </marker>
+    </defs>
+
+    {#each graph.ledges as edge}
+      <line
+        x1={edge.x1}
+        y1={edge.y1}
+        x2={edge.x2}
+        y2={edge.y2}
+        class="edge-line"
+        marker-end="url(#arrowhead)"
+      />
+    {/each}
+
+    {#each graph.lnodes as node}
+      {#if node.isTerminal}
+        <circle
+          cx={node.x}
+          cy={node.y}
+          r={CIRCLE_R}
+          class="terminal-node"
+          style="--node-fill: {statusColors[nodeStatus[node.id] || 'pending']}"
+        />
+        <text x={node.x} y={node.y + 4} class="terminal-label">{node.label}</text>
+      {:else}
+        {@const color = statusColors[nodeStatus[node.id] || 'pending']}
+        <rect
+          x={node.x - NODE_W / 2}
+          y={node.y - NODE_H / 2}
+          width={NODE_W}
+          height={NODE_H}
+          rx="6"
+          class="node-rect"
+          style="--node-stroke: {color}"
+        />
+        <text
+          x={node.x - NODE_W / 2 + 10}
+          y={node.y + 1}
+          class="type-label"
+          style="fill: {color}"
+        >{typeLabels[node.type] || '?'}</text>
+        <text
+          x={node.x - NODE_W / 2 + 26}
+          y={node.y + 1}
+          class="node-label"
+        >{node.label.length > 12 ? node.label.slice(0, 11) + '...' : node.label}</text>
+      {/if}
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .graph-viewer {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+  .dag-svg {
+    width: 100%;
+    height: auto;
+    min-height: 200px;
+  }
+  .edge-line {
+    stroke: var(--fg-dim);
+    stroke-width: 1.5;
+    opacity: 0.6;
+  }
+  .terminal-node {
+    fill: color-mix(in srgb, var(--node-fill) 25%, var(--bg-surface));
+    stroke: var(--node-fill);
+    stroke-width: 2;
+  }
+  .terminal-label {
+    fill: var(--fg-dim);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    text-anchor: middle;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .node-rect {
+    fill: var(--bg-surface);
+    stroke: var(--node-stroke);
+    stroke-width: 2;
+    transition: stroke 0.3s ease;
+  }
+  .type-label {
+    font-size: 11px;
+    font-family: var(--font-mono);
+    font-weight: 700;
+    dominant-baseline: middle;
+  }
+  .node-label {
+    fill: var(--fg);
+    font-size: 11px;
+    font-family: var(--font-mono);
+    dominant-baseline: middle;
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/InterruptPanel.svelte b/ui/src/lib/components/orchestration/InterruptPanel.svelte
new file mode 100644
index 0000000..136bcd5
--- /dev/null
+++ b/ui/src/lib/components/orchestration/InterruptPanel.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  let {
+    message = '',
+    onResume = (_updates: any) => {},
+    onCancel = () => {},
+  } = $props();
+
+  let stateJson = $state('{}');
+  let jsonValid = $state(true);
+
+  function handleInput(e: Event) {
+    stateJson = (e.target as HTMLTextAreaElement).value;
+    try {
+      JSON.parse(stateJson);
+      jsonValid = true;
+    } catch {
+      jsonValid = false;
+    }
+  }
+
+  function approve() {
+    try {
+      const updates = JSON.parse(stateJson);
+      onResume(updates);
+    } catch { /* ignore */ }
+  }
+
+  function reject() {
+    onCancel();
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div class="overlay" role="button" tabindex="-1" onclick={reject}>
+  <div class="panel" role="dialog" aria-label="Run interrupted" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') reject(); }}>
+    <div class="panel-header">
+      <span class="panel-title">Run Interrupted</span>
+    </div>
+
+    <div class="panel-body">
+      <div class="message">
+        <span class="msg-label">Message:</span>
+        <p>{message || 'This run requires approval to continue.'}</p>
+      </div>
+
+      <div class="state-section">
+        <label class="state-label" for="state-updates">State Updates (JSON)</label>
+        <textarea
+          id="state-updates"
+          class="state-editor"
+          class:invalid={!jsonValid}
+          spellcheck="false"
+          value={stateJson}
+          oninput={handleInput}
+        ></textarea>
+        {#if !jsonValid}
+          <span class="json-err">Invalid JSON</span>
+        {/if}
+      </div>
+    </div>
+
+    <div class="panel-actions">
+      <button class="btn-reject" onclick={reject}>Reject</button>
+      <button class="btn-approve" onclick={approve} disabled={!jsonValid}>Approve & Resume</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(2px);
+  }
+  .panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--warning);
+    border-radius: 4px;
+    width: 90%;
+    max-width: 520px;
+    box-shadow: 0 0 30px color-mix(in srgb, var(--warning) 20%, transparent);
+  }
+  .panel-header {
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .panel-title {
+    font-size: 1rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--warning);
+    text-shadow: 0 0 6px var(--warning);
+  }
+  .panel-body {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .message {
+    padding: 0.75rem;
+    background: color-mix(in srgb, var(--warning) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
+    border-radius: 4px;
+  }
+  .msg-label {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    display: block;
+    margin-bottom: 0.375rem;
+  }
+  .message p {
+    font-size: 0.875rem;
+    color: var(--fg);
+    margin: 0;
+  }
+  .state-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .state-label {
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+  }
+  .state-editor {
+    width: 100%;
+    min-height: 100px;
+    padding: 0.75rem;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+  }
+  .state-editor:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 6px var(--border-glow);
+  }
+  .state-editor.invalid {
+    border-color: var(--error);
+  }
+  .json-err {
+    font-size: 0.6875rem;
+    color: var(--error);
+    font-family: var(--font-mono);
+  }
+  .panel-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-top: 1px solid var(--border);
+  }
+  .btn-reject,
+  .btn-approve {
+    padding: 0.5rem 1rem;
+    border-radius: 2px;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .btn-reject {
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
+  }
+  .btn-reject:hover {
+    background: color-mix(in srgb, var(--error) 20%, transparent);
+    border-color: var(--error);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--error) 30%, transparent);
+    text-shadow: 0 0 4px var(--error);
+  }
+  .btn-approve {
+    background: color-mix(in srgb, var(--success) 10%, transparent);
+    color: var(--success);
+    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
+  }
+  .btn-approve:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--success) 20%, transparent);
+    border-color: var(--success);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--success) 30%, transparent);
+    text-shadow: 0 0 4px var(--success);
+  }
+  .btn-approve:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/NodeCard.svelte b/ui/src/lib/components/orchestration/NodeCard.svelte
new file mode 100644
index 0000000..84656b5
--- /dev/null
+++ b/ui/src/lib/components/orchestration/NodeCard.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  let { name = '', type = 'task', status = 'pending' } = $props();
+
+  const typeLabels: Record<string, string> = {
+    task: 'T',
+    route: 'R',
+    interrupt: 'I',
+    agent: 'A',
+    send: 'S',
+    transform: 'X',
+    subgraph: 'G',
+  };
+
+  const statusColors: Record<string, string> = {
+    pending: 'var(--fg-dim)',
+    running: 'var(--accent)',
+    completed: 'var(--success)',
+    failed: 'var(--error)',
+    interrupted: 'var(--warning)',
+  };
+</script>
+
+<div
+  class="node-card"
+  style="--node-color: {statusColors[status] || 'var(--fg-dim)'}"
+>
+  <span class="type-badge">{typeLabels[type] || '?'}</span>
+  <span class="node-name">{name}</span>
+</div>
+
+<style>
+  .node-card {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    background: color-mix(in srgb, var(--node-color) 10%, var(--bg-surface));
+    border: 1px solid color-mix(in srgb, var(--node-color) 40%, transparent);
+    border-radius: 4px;
+    font-size: 0.6875rem;
+    color: var(--fg);
+    box-shadow: 0 0 4px color-mix(in srgb, var(--node-color) 15%, transparent);
+  }
+  .type-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    background: color-mix(in srgb, var(--node-color) 25%, transparent);
+    color: var(--node-color);
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-shadow: 0 0 4px var(--node-color);
+  }
+  .node-name {
+    font-family: var(--font-mono);
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100px;
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/RunEventLog.svelte b/ui/src/lib/components/orchestration/RunEventLog.svelte
new file mode 100644
index 0000000..715cc03
--- /dev/null
+++ b/ui/src/lib/components/orchestration/RunEventLog.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+
+  let { events = [] } = $props<{ events: { type: string; data: any; timestamp?: string | number }[] }>();
+  let container: HTMLElement;
+  let autoScroll = $state(true);
+
+  const typeColors: Record<string, string> = {
+    // NullBoiler event types
+    values: 'var(--accent)',
+    updates: 'var(--accent)',
+    task_start: 'var(--accent)',
+    task_result: 'var(--success)',
+    debug: 'var(--fg-dim)',
+    ui_message: 'var(--accent)',
+    ui_message_delete: 'var(--warning)',
+    // UI-friendly aliases
+    state_update: 'var(--accent)',
+    step_started: 'var(--accent)',
+    step_completed: 'var(--success)',
+    step_failed: 'var(--error)',
+    agent_event: 'var(--accent)',
+    interrupted: 'var(--warning)',
+    run_completed: 'var(--success)',
+    run_failed: 'var(--error)',
+    send_progress: 'var(--accent)',
+    message: 'var(--fg-dim)',
+  };
+
+  function formatTime(ts: string | number | undefined) {
+    if (!ts) return '';
+    const d = typeof ts === 'number' ? new Date(ts * 1000) : new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+
+  function summarize(data: any): string {
+    if (!data) return '';
+    if (typeof data === 'string') return data;
+    if (data.step) return `step: ${data.step}`;
+    if (data.node_id) return `node: ${data.node_id}`;
+    if (data.message) return data.message;
+    const str = JSON.stringify(data);
+    return str.length > 80 ? str.slice(0, 80) + '...' : str;
+  }
+
+  $effect(() => {
+    events.length;
+    if (autoScroll && container) {
+      void tick().then(() => {
+        container.scrollTop = container.scrollHeight;
+      });
+    }
+  });
+</script>
+
+<div class="event-log">
+  <div class="log-header">
+    <span>Event Log</span>
+    <label class="auto-scroll">
+      <input type="checkbox" bind:checked={autoScroll} />
+      Auto-scroll
+    </label>
+  </div>
+  <div class="log-content" bind:this={container}>
+    {#if events.length === 0}
+      <div class="log-empty">No events yet</div>
+    {/if}
+    {#each events as ev}
+      <div class="event-row">
+        <span class="ev-time">{formatTime(ev.timestamp)}</span>
+        <span
+          class="ev-type"
+          style="--type-color: {typeColors[ev.type] || 'var(--fg-dim)'}"
+        >{ev.type}</span>
+        <span class="ev-summary">{summarize(ev.data)}</span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .event-log {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 200px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    box-shadow: inset 0 0 10px color-mix(in srgb, var(--bg) 50%, transparent);
+  }
+  .log-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 700;
+  }
+  .log-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+  .log-empty {
+    color: var(--fg-dim);
+    text-align: center;
+    padding: 2rem;
+    font-style: italic;
+    opacity: 0.7;
+  }
+  .event-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.625rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 2px;
+  }
+  .event-row:hover {
+    background: color-mix(in srgb, var(--fg) 5%, transparent);
+  }
+  .ev-time {
+    color: var(--fg-dim);
+    white-space: nowrap;
+    font-size: 0.6875rem;
+    min-width: 5em;
+  }
+  .ev-type {
+    display: inline-block;
+    padding: 0.125rem 0.375rem;
+    border-radius: 2px;
+    font-size: 0.625rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    color: var(--type-color);
+    background: color-mix(in srgb, var(--type-color) 12%, transparent);
+    box-shadow: inset 0 0 4px color-mix(in srgb, var(--type-color) 15%, transparent);
+  }
+  .ev-summary {
+    color: var(--fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+  .auto-scroll {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--fg-dim);
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 400;
+  }
+  .auto-scroll input[type="checkbox"] {
+    appearance: none;
+    width: 12px;
+    height: 12px;
+    border: 1px solid var(--border);
+    background: var(--bg-surface);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+  }
+  .auto-scroll input[type="checkbox"]:checked {
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
+    border-color: var(--accent);
+    box-shadow: inset 0 0 4px var(--accent);
+  }
+  .auto-scroll input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 8px;
+    height: 8px;
+    background: var(--accent);
+    border-radius: 1px;
+    box-shadow: 0 0 3px var(--border-glow);
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/SendProgressBar.svelte b/ui/src/lib/components/orchestration/SendProgressBar.svelte
new file mode 100644
index 0000000..d4d24a4
--- /dev/null
+++ b/ui/src/lib/components/orchestration/SendProgressBar.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  let { current = 0, total = 0, label = '' } = $props();
+  let pct = $derived(total > 0 ? Math.round((current / total) * 100) : 0);
+</script>
+
+<div class="progress-wrap">
+  {#if label}
+    <span class="progress-label">{label}</span>
+  {/if}
+  <div class="progress-track">
+    <div class="progress-fill" style="width: {pct}%"></div>
+  </div>
+  <span class="progress-text">{current}/{total}</span>
+</div>
+
+<style>
+  .progress-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    font-family: var(--font-mono);
+    color: var(--fg-dim);
+  }
+  .progress-label {
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+  }
+  .progress-track {
+    flex: 1;
+    min-width: 40px;
+    height: 6px;
+    background: var(--bg-hover);
+    border-radius: 2px;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  }
+  .progress-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: 1px;
+    transition: width 0.3s ease;
+    box-shadow: 0 0 4px var(--accent);
+  }
+  .progress-text {
+    white-space: nowrap;
+    min-width: 2.5em;
+    text-align: right;
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/StateInspector.svelte b/ui/src/lib/components/orchestration/StateInspector.svelte
new file mode 100644
index 0000000..e2c4a44
--- /dev/null
+++ b/ui/src/lib/components/orchestration/StateInspector.svelte
@@ -0,0 +1,205 @@
+<script lang="ts">
+  let { currentState = null, previousState = null } = $props<{ currentState: any; previousState?: any }>();
+
+  let diffMode = $state(false);
+
+  function escapeHtml(value: string): string {
+    return value
+      .replaceAll('&', '&amp;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;');
+  }
+
+  function syntaxHighlight(json: string): string {
+    return json.replace(
+      /("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+      (match) => {
+        let cls = 'json-number';
+        if (/^"/.test(match)) {
+          cls = /:$/.test(match) ? 'json-key' : 'json-string';
+        } else if (/true|false/.test(match)) {
+          cls = 'json-boolean';
+        } else if (/null/.test(match)) {
+          cls = 'json-null';
+        }
+        return `<span class="${cls}">${escapeHtml(match)}</span>`;
+      }
+    );
+  }
+
+  function getDiff(curr: any, prev: any): { added: Set<string>; removed: Set<string>; changed: Set<string> } {
+    const added = new Set<string>();
+    const removed = new Set<string>();
+    const changed = new Set<string>();
+    if (!curr || !prev) return { added, removed, changed };
+    const currKeys = Object.keys(curr);
+    const prevKeys = Object.keys(prev);
+    for (const k of currKeys) {
+      if (!(k in prev)) added.add(k);
+      else if (JSON.stringify(curr[k]) !== JSON.stringify(prev[k])) changed.add(k);
+    }
+    for (const k of prevKeys) {
+      if (!(k in curr)) removed.add(k);
+    }
+    return { added, removed, changed };
+  }
+
+  let diff = $derived(getDiff(currentState, previousState));
+  let formatted = $derived(currentState ? JSON.stringify(currentState, null, 2) : 'null');
+  let highlighted = $derived(syntaxHighlight(formatted));
+</script>
+
+<div class="inspector">
+  <div class="inspector-header">
+    <span>State</span>
+    {#if previousState}
+      <button
+        class="diff-toggle"
+        class:active={diffMode}
+        onclick={() => diffMode = !diffMode}
+      >Diff</button>
+    {/if}
+  </div>
+  <div class="inspector-body">
+    {#if diffMode && previousState}
+      <div class="diff-view">
+        {#if diff.added.size > 0}
+          <div class="diff-section added">
+            <span class="diff-label">Added</span>
+            {#each [...diff.added] as key}
+              <div class="diff-line">+ {key}: {JSON.stringify(currentState[key])}</div>
+            {/each}
+          </div>
+        {/if}
+        {#if diff.changed.size > 0}
+          <div class="diff-section changed">
+            <span class="diff-label">Changed</span>
+            {#each [...diff.changed] as key}
+              <div class="diff-line old">- {key}: {JSON.stringify(previousState[key])}</div>
+              <div class="diff-line new">+ {key}: {JSON.stringify(currentState[key])}</div>
+            {/each}
+          </div>
+        {/if}
+        {#if diff.removed.size > 0}
+          <div class="diff-section removed">
+            <span class="diff-label">Removed</span>
+            {#each [...diff.removed] as key}
+              <div class="diff-line">- {key}: {JSON.stringify(previousState[key])}</div>
+            {/each}
+          </div>
+        {/if}
+        {#if diff.added.size === 0 && diff.changed.size === 0 && diff.removed.size === 0}
+          <div class="no-diff">No changes</div>
+        {/if}
+      </div>
+    {:else}
+      <pre class="json-pre">{@html highlighted}</pre>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .inspector {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+  .inspector-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.625rem 1rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 700;
+  }
+  .diff-toggle {
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    background: transparent;
+    color: var(--fg-dim);
+    font-size: 0.6875rem;
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .diff-toggle:hover {
+    background: var(--bg-hover);
+    color: var(--fg);
+  }
+  .diff-toggle.active {
+    color: var(--accent);
+    border-color: var(--accent-dim);
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    text-shadow: var(--text-glow);
+  }
+  .inspector-body {
+    flex: 1;
+    overflow: auto;
+    padding: 1rem;
+  }
+  .json-pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    color: var(--fg);
+  }
+  :global(.json-key) { color: var(--accent); }
+  :global(.json-string) { color: var(--success); }
+  :global(.json-number) { color: var(--warning); }
+  :global(.json-boolean) { color: var(--accent); }
+  :global(.json-null) { color: var(--fg-dim); }
+
+  .diff-view {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+  .diff-section {
+    margin-bottom: 0.75rem;
+  }
+  .diff-label {
+    display: block;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    margin-bottom: 0.25rem;
+    font-weight: 700;
+  }
+  .diff-line {
+    padding: 0.125rem 0.5rem;
+    border-radius: 2px;
+  }
+  .diff-section.added .diff-line,
+  .diff-line.new {
+    color: var(--success);
+    background: color-mix(in srgb, var(--success) 8%, transparent);
+    border-left: 2px solid var(--success);
+  }
+  .diff-section.removed .diff-line,
+  .diff-line.old {
+    color: var(--error);
+    background: color-mix(in srgb, var(--error) 8%, transparent);
+    border-left: 2px solid var(--error);
+  }
+  .diff-section.changed .diff-label { color: var(--warning); }
+  .no-diff {
+    color: var(--fg-dim);
+    text-align: center;
+    padding: 2rem;
+    font-style: italic;
+  }
+</style>
diff --git a/ui/src/lib/components/orchestration/WorkflowJsonEditor.svelte b/ui/src/lib/components/orchestration/WorkflowJsonEditor.svelte
new file mode 100644
index 0000000..be3f86a
--- /dev/null
+++ b/ui/src/lib/components/orchestration/WorkflowJsonEditor.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  let { value = $bindable(''), onerror = (_msg: string) => {} } = $props();
+  let valid = $state(true);
+  let errorMsg = $state('');
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    value = target.value;
+    try {
+      JSON.parse(value);
+      valid = true;
+      errorMsg = '';
+      onerror('');
+    } catch (err) {
+      valid = false;
+      errorMsg = (err as Error).message;
+      onerror(errorMsg);
+    }
+  }
+</script>
+
+<div class="editor-wrap">
+  <textarea
+    class="json-editor"
+    class:invalid={!valid}
+    spellcheck="false"
+    {value}
+    oninput={handleInput}
+  ></textarea>
+  {#if !valid}
+    <div class="error-line">{errorMsg}</div>
+  {/if}
+</div>
+
+<style>
+  .editor-wrap {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .json-editor {
+    flex: 1;
+    width: 100%;
+    min-height: 300px;
+    padding: 1rem;
+    background: var(--bg-surface);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.2s ease;
+    tab-size: 2;
+  }
+  .json-editor:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 8px var(--border-glow);
+  }
+  .json-editor.invalid {
+    border-color: var(--error);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--error) 30%, transparent);
+  }
+  .error-line {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+    color: var(--error);
+    background: color-mix(in srgb, var(--error) 8%, transparent);
+    border: 1px solid color-mix(in srgb, var(--error) 30%, transparent);
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    text-shadow: 0 0 4px var(--error);
+  }
+</style>
diff --git a/ui/src/lib/orchestration/routes.ts b/ui/src/lib/orchestration/routes.ts
new file mode 100644
index 0000000..9816ef3
--- /dev/null
+++ b/ui/src/lib/orchestration/routes.ts
@@ -0,0 +1,39 @@
+export function encodePathSegment(value: string): string {
+  return encodeURIComponent(value);
+}
+
+const uiRoot = '/orchestration';
+const apiRoot = '/orchestration';
+const workflowsBase = `${uiRoot}/workflows`;
+const runsBase = `${uiRoot}/runs`;
+const storeBase = `${apiRoot}/store`;
+
+export const orchestrationUiRoutes = {
+  dashboard: () => uiRoot,
+  workflows: () => workflowsBase,
+  newWorkflow: () => `${workflowsBase}/new`,
+  workflow: (id: string) => `${workflowsBase}/${encodePathSegment(id)}`,
+  runs: () => runsBase,
+  run: (id: string) => `${runsBase}/${encodePathSegment(id)}`,
+  runFork: (id: string) => `${runsBase}/${encodePathSegment(id)}/fork`,
+  store: () => `${uiRoot}/store`,
+};
+
+export const orchestrationApiPaths = {
+  workflows: () => `${apiRoot}/workflows`,
+  workflow: (id: string) => `${apiRoot}/workflows/${encodePathSegment(id)}`,
+  workflowValidate: (id: string) => `${apiRoot}/workflows/${encodePathSegment(id)}/validate`,
+  workflowRun: (id: string) => `${apiRoot}/workflows/${encodePathSegment(id)}/run`,
+  runs: () => `${apiRoot}/runs`,
+  run: (id: string) => `${apiRoot}/runs/${encodePathSegment(id)}`,
+  runCancel: (id: string) => `${apiRoot}/runs/${encodePathSegment(id)}/cancel`,
+  runResume: (id: string) => `${apiRoot}/runs/${encodePathSegment(id)}/resume`,
+  runReplay: (id: string) => `${apiRoot}/runs/${encodePathSegment(id)}/replay`,
+  runState: (id: string) => `${apiRoot}/runs/${encodePathSegment(id)}/state`,
+  runsFork: () => `${apiRoot}/runs/fork`,
+  runCheckpoints: (runId: string) => `${apiRoot}/runs/${encodePathSegment(runId)}/checkpoints`,
+  runCheckpoint: (runId: string, checkpointId: string) => `${apiRoot}/runs/${encodePathSegment(runId)}/checkpoints/${encodePathSegment(checkpointId)}`,
+  runStream: (runId: string) => `${apiRoot}/runs/${encodePathSegment(runId)}/stream`,
+  storeNamespace: (namespace: string) => `${storeBase}/${encodePathSegment(namespace)}`,
+  storeEntry: (namespace: string, key: string) => `${storeBase}/${encodePathSegment(namespace)}/${encodePathSegment(key)}`,
+};
diff --git a/ui/src/routes/orchestration/+page.svelte b/ui/src/routes/orchestration/+page.svelte
new file mode 100644
index 0000000..58b313f
--- /dev/null
+++ b/ui/src/routes/orchestration/+page.svelte
@@ -0,0 +1,346 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+
+  let runs = $state<any[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let stats = $state({ active: 0, completed: 0, failed: 0, interrupted: 0 });
+
+  async function loadRuns() {
+    try {
+      runs = await api.listRuns() || [];
+      stats = {
+        active: runs.filter((r: any) => r.status === 'running' || r.status === 'pending').length,
+        completed: runs.filter((r: any) => r.status === 'completed').length,
+        failed: runs.filter((r: any) => r.status === 'failed').length,
+        interrupted: runs.filter((r: any) => r.status === 'interrupted').length,
+      };
+      error = null;
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  let interval: ReturnType<typeof setInterval>;
+  onMount(() => {
+    void loadRuns();
+    interval = setInterval(loadRuns, 5000);
+  });
+  onDestroy(() => clearInterval(interval));
+
+  const statusColors: Record<string, string> = {
+    running: 'var(--accent)',
+    pending: 'var(--accent)',
+    completed: 'var(--success)',
+    failed: 'var(--error)',
+    interrupted: 'var(--warning)',
+    cancelled: 'var(--fg-dim)',
+  };
+
+  function formatDuration(run: any): string {
+    if (!run.created_at) return '-';
+    const start = new Date(run.created_at).getTime();
+    const end = run.completed_at ? new Date(run.completed_at).getTime() : Date.now();
+    const secs = Math.floor((end - start) / 1000);
+    if (secs < 60) return `${secs}s`;
+    if (secs < 3600) return `${Math.floor(secs / 60)}m ${secs % 60}s`;
+    return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`;
+  }
+
+  function formatTime(ts: string): string {
+    if (!ts) return '-';
+    return new Date(ts).toLocaleString();
+  }
+
+  function runHref(id: string): string {
+    return orchestrationUiRoutes.run(id);
+  }
+</script>
+
+<div class="dashboard">
+  <div class="header">
+    <h1>Orchestration</h1>
+    <a href={orchestrationUiRoutes.workflows()} class="action-btn">New Run</a>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  <div class="cards">
+    <div class="card">
+      <div class="card-label">Active</div>
+      <div class="card-value" style="color: var(--accent); text-shadow: 0 0 8px var(--accent);">{stats.active}</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Completed</div>
+      <div class="card-value" style="color: var(--success); text-shadow: 0 0 8px var(--success);">{stats.completed}</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Failed</div>
+      <div class="card-value" style="color: var(--error); text-shadow: 0 0 8px var(--error);">{stats.failed}</div>
+    </div>
+    <div class="card">
+      <div class="card-label">Interrupted</div>
+      <div class="card-value" style="color: var(--warning); text-shadow: 0 0 8px var(--warning);">{stats.interrupted}</div>
+    </div>
+  </div>
+
+  {#if loading && runs.length === 0}
+    <div class="loading">Loading runs...</div>
+  {:else if runs.length === 0}
+    <div class="empty-state">
+      <p>> No orchestration runs yet.</p>
+      <a href={orchestrationUiRoutes.workflows()} class="btn">Create a Workflow</a>
+    </div>
+  {:else}
+    <div class="table-section">
+      <h2>Recent Runs</h2>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Workflow</th>
+              <th>Status</th>
+              <th>Duration</th>
+              <th>Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each runs.slice(0, 20) as run}
+              <tr onclick={() => goto(runHref(run.id))} class="clickable">
+                <td class="mono">{(run.id || '').slice(0, 8)}</td>
+                <td>{run.workflow_name || run.workflow_id || '-'}</td>
+                <td>
+                  <span
+                    class="status-badge"
+                    style="--badge-color: {statusColors[run.status] || 'var(--fg-dim)'}"
+                  >{run.status}</span>
+                </td>
+                <td class="mono">{formatDuration(run)}</td>
+                <td>{formatTime(run.created_at)}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+      {#if runs.length > 20}
+        <div class="more-link">
+          <a href={orchestrationUiRoutes.runs()}>View all {runs.length} runs</a>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dashboard {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-shadow: var(--text-glow);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  h2 {
+    font-size: 1rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 1rem;
+    color: var(--fg-dim);
+  }
+  .action-btn {
+    padding: 0.5rem 1rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .action-btn:hover {
+    text-decoration: none;
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--border-glow);
+    text-shadow: 0 0 8px var(--accent);
+  }
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+  .card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1.25rem;
+  }
+  .card-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    margin-bottom: 0.5rem;
+  }
+  .card-value {
+    font-size: 2rem;
+    font-weight: 700;
+    font-family: var(--font-mono);
+  }
+  .table-section {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1.5rem;
+  }
+  .table-wrap {
+    overflow-x: auto;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+  }
+  th {
+    text-align: left;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+  }
+  td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    color: var(--fg);
+  }
+  td.mono {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+  }
+  tr.clickable {
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+  tr.clickable:hover td {
+    background: var(--bg-hover);
+  }
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 2px;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--badge-color);
+    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
+    box-shadow: inset 0 0 5px color-mix(in srgb, var(--badge-color) 20%, transparent);
+    text-shadow: 0 0 4px var(--badge-color);
+  }
+  .status-badge::before {
+    content: '';
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--badge-color);
+    box-shadow: 0 0 4px var(--badge-color);
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+    font-size: 1rem;
+  }
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+    border: 1px dashed var(--border);
+    background: var(--bg-surface);
+    border-radius: 4px;
+  }
+  .empty-state p {
+    margin-bottom: 1.5rem;
+    font-size: 1.125rem;
+    font-family: var(--font-mono);
+  }
+  .empty-state .btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .empty-state .btn:hover {
+    text-decoration: none;
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--border-glow);
+    text-shadow: 0 0 8px var(--accent);
+  }
+  .more-link {
+    text-align: center;
+    padding: 0.75rem;
+  }
+  .more-link a {
+    color: var(--accent);
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .more-link a:hover {
+    text-shadow: var(--text-glow);
+  }
+  @media (max-width: 900px) {
+    .cards { grid-template-columns: repeat(2, 1fr); }
+  }
+</style>
diff --git a/ui/src/routes/orchestration/runs/+page.svelte b/ui/src/routes/orchestration/runs/+page.svelte
new file mode 100644
index 0000000..e2c9863
--- /dev/null
+++ b/ui/src/routes/orchestration/runs/+page.svelte
@@ -0,0 +1,286 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+
+  let runs = $state<any[]>([]);
+  let workflows = $state<any[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  let filterStatus = $state('');
+  let filterWorkflow = $state('');
+
+  const statuses = ['', 'running', 'pending', 'completed', 'failed', 'interrupted', 'cancelled'];
+
+  async function loadData() {
+    try {
+      const [r, w] = await Promise.all([
+        api.listRuns({ status: filterStatus || undefined, workflow_id: filterWorkflow || undefined }),
+        api.listWorkflows(),
+      ]);
+      runs = r || [];
+      workflows = w || [];
+      error = null;
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    // Re-load when filters change (also runs on initial mount)
+    filterStatus;
+    filterWorkflow;
+    void loadData();
+  });
+
+  const statusColors: Record<string, string> = {
+    running: 'var(--accent)',
+    pending: 'var(--accent)',
+    completed: 'var(--success)',
+    failed: 'var(--error)',
+    interrupted: 'var(--warning)',
+    cancelled: 'var(--fg-dim)',
+  };
+
+  function formatDuration(run: any): string {
+    if (!run.created_at) return '-';
+    const start = new Date(run.created_at).getTime();
+    const end = run.completed_at ? new Date(run.completed_at).getTime() : Date.now();
+    const secs = Math.floor((end - start) / 1000);
+    if (secs < 60) return `${secs}s`;
+    if (secs < 3600) return `${Math.floor(secs / 60)}m ${secs % 60}s`;
+    return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`;
+  }
+
+  function formatTime(ts: string): string {
+    if (!ts) return '-';
+    return new Date(ts).toLocaleString();
+  }
+
+  function runHref(id: string): string {
+    return orchestrationUiRoutes.run(id);
+  }
+</script>
+
+<div class="page">
+  <div class="header">
+    <h1>Runs</h1>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  <div class="filter-bar">
+    <div class="filter-group">
+      <label class="filter-label" for="status-filter">Status</label>
+      <select id="status-filter" class="filter-select" bind:value={filterStatus}>
+        {#each statuses as s}
+          <option value={s}>{s || 'All'}</option>
+        {/each}
+      </select>
+    </div>
+    <div class="filter-group">
+      <label class="filter-label" for="workflow-filter">Workflow</label>
+      <select id="workflow-filter" class="filter-select" bind:value={filterWorkflow}>
+        <option value="">All</option>
+        {#each workflows as wf}
+          <option value={wf.id}>{wf.name || wf.id}</option>
+        {/each}
+      </select>
+    </div>
+  </div>
+
+  {#if loading}
+    <div class="loading">Loading runs...</div>
+  {:else if runs.length === 0}
+    <div class="empty-state">
+      <p>> No runs match the current filter.</p>
+    </div>
+  {:else}
+    <div class="table-section">
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Workflow</th>
+              <th>Status</th>
+              <th>Duration</th>
+              <th>Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each runs as run}
+              <tr onclick={() => goto(runHref(run.id))} class="clickable">
+                <td class="mono">{(run.id || '').slice(0, 8)}</td>
+                <td>{run.workflow_name || run.workflow_id || '-'}</td>
+                <td>
+                  <span
+                    class="status-badge"
+                    style="--badge-color: {statusColors[run.status] || 'var(--fg-dim)'}"
+                  >{run.status}</span>
+                </td>
+                <td class="mono">{formatDuration(run)}</td>
+                <td>{formatTime(run.created_at)}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-shadow: var(--text-glow);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  .filter-bar {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .filter-label {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+  }
+  .filter-select {
+    padding: 0.375rem 0.625rem;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    font-size: 0.8125rem;
+    font-family: var(--font-mono);
+    outline: none;
+    cursor: pointer;
+  }
+  .filter-select:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 4px var(--border-glow);
+  }
+  .table-section {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .table-wrap {
+    overflow-x: auto;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+  }
+  th {
+    text-align: left;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+  }
+  td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    color: var(--fg);
+  }
+  td.mono {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+  }
+  tr.clickable {
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+  tr.clickable:hover td {
+    background: var(--bg-hover);
+  }
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 2px;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--badge-color);
+    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
+    box-shadow: inset 0 0 5px color-mix(in srgb, var(--badge-color) 20%, transparent);
+    text-shadow: 0 0 4px var(--badge-color);
+  }
+  .status-badge::before {
+    content: '';
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--badge-color);
+    box-shadow: 0 0 4px var(--badge-color);
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+    border: 1px dashed var(--border);
+    background: var(--bg-surface);
+    border-radius: 4px;
+  }
+  .empty-state p {
+    font-family: var(--font-mono);
+  }
+</style>
diff --git a/ui/src/routes/orchestration/runs/[id]/+page.svelte b/ui/src/routes/orchestration/runs/[id]/+page.svelte
new file mode 100644
index 0000000..5025523
--- /dev/null
+++ b/ui/src/routes/orchestration/runs/[id]/+page.svelte
@@ -0,0 +1,301 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { page } from '$app/stores';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+  import GraphViewer from '$lib/components/orchestration/GraphViewer.svelte';
+  import StateInspector from '$lib/components/orchestration/StateInspector.svelte';
+  import RunEventLog from '$lib/components/orchestration/RunEventLog.svelte';
+  import InterruptPanel from '$lib/components/orchestration/InterruptPanel.svelte';
+
+  let id = $derived($page.params.id);
+
+  let run = $state<any>(null);
+  let workflow = $state<any>({ nodes: {}, edges: [] });
+  let events = $state<any[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let nodeStatus = $state<Record<string, string>>({});
+  let previousState = $state<any>(null);
+  let eventSource: EventSource | null = null;
+  let pollInterval: ReturnType<typeof setInterval>;
+
+  async function loadRun() {
+    try {
+      const data = await api.getRun(id);
+      previousState = run?.state || null;
+      run = data;
+      if (data.workflow) {
+        workflow = data.workflow;
+      } else if (data.workflow_id) {
+        try {
+          workflow = await api.getWorkflow(data.workflow_id);
+        } catch { /* keep current */ }
+      }
+      // Build node status map
+      const ns: Record<string, string> = {};
+      if (data.steps) {
+        for (const step of data.steps) {
+          ns[step.node_id || step.step] = step.status;
+        }
+      }
+      nodeStatus = ns;
+      error = null;
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function connectStream() {
+    try {
+      eventSource = api.streamRun(id, (event) => {
+        events = [...events, { ...event, timestamp: event.timestamp ?? Date.now() / 1000 }];
+        // On significant events, refresh run data
+        if (['step_completed', 'step_failed', 'run_completed', 'run_failed', 'interrupted', 'state_update', 'values', 'updates', 'task_result'].includes(event.type)) {
+          void loadRun();
+        }
+      });
+    } catch {
+      // SSE not available, rely on polling
+    }
+  }
+
+  onMount(() => {
+    void loadRun();
+    connectStream();
+    pollInterval = setInterval(loadRun, 3000);
+  });
+
+  onDestroy(() => {
+    clearInterval(pollInterval);
+    eventSource?.close();
+  });
+
+  let isInterrupted = $derived(run?.status === 'interrupted');
+  let isActive = $derived(run?.status === 'running' || run?.status === 'pending');
+
+  async function cancelRun() {
+    try {
+      await api.cancelRun(id);
+      await loadRun();
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+
+  async function resumeRun(updates: any) {
+    try {
+      await api.resumeRun(id, updates);
+      await loadRun();
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+
+  const statusColors: Record<string, string> = {
+    running: 'var(--accent)',
+    pending: 'var(--accent)',
+    completed: 'var(--success)',
+    failed: 'var(--error)',
+    interrupted: 'var(--warning)',
+    cancelled: 'var(--fg-dim)',
+  };
+
+  function runForkHref(runId: string): string {
+    return orchestrationUiRoutes.runFork(runId);
+  }
+</script>
+
+<div class="run-detail">
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <a href={orchestrationUiRoutes.runs()} class="back-link">Runs</a>
+      <span class="sep">/</span>
+      <span class="run-id">{(id || '').slice(0, 8)}</span>
+      {#if run}
+        <span
+          class="status-badge"
+          style="--badge-color: {statusColors[run.status] || 'var(--fg-dim)'}"
+        >{run.status}</span>
+      {/if}
+    </div>
+    <div class="toolbar-actions">
+      {#if isActive}
+        <button class="tool-btn cancel" onclick={cancelRun}>Cancel</button>
+      {/if}
+      <a href={runForkHref(id)} class="tool-btn">Fork</a>
+    </div>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading run...</div>
+  {:else if run}
+    <div class="panels">
+      <div class="panel-left">
+        <GraphViewer {workflow} {nodeStatus} />
+      </div>
+      <div class="panel-right">
+        <StateInspector currentState={run.state} {previousState} />
+      </div>
+    </div>
+    <div class="panel-bottom">
+      <RunEventLog {events} />
+    </div>
+
+    {#if isInterrupted}
+      <InterruptPanel
+        message={run.interrupt_message || ''}
+        onResume={resumeRun}
+        onCancel={cancelRun}
+      />
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .run-detail {
+    padding: 1.5rem;
+    max-width: 1600px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: calc(100vh - 3rem);
+  }
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .back-link {
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .back-link:hover {
+    text-shadow: var(--text-glow);
+  }
+  .sep {
+    color: var(--fg-dim);
+    font-size: 0.8125rem;
+  }
+  .run-id {
+    font-size: 0.875rem;
+    font-weight: 700;
+    font-family: var(--font-mono);
+    color: var(--fg);
+  }
+  .toolbar-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .tool-btn {
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: 2px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+    text-decoration: none;
+  }
+  .tool-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 8px var(--border-glow);
+    text-decoration: none;
+  }
+  .tool-btn.cancel {
+    color: var(--error);
+    border-color: color-mix(in srgb, var(--error) 40%, transparent);
+    text-shadow: 0 0 4px var(--error);
+  }
+  .tool-btn.cancel:hover {
+    border-color: var(--error);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--error) 30%, transparent);
+  }
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 2px;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--badge-color);
+    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
+    box-shadow: inset 0 0 5px color-mix(in srgb, var(--badge-color) 20%, transparent);
+    text-shadow: 0 0 4px var(--badge-color);
+  }
+  .status-badge::before {
+    content: '';
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--badge-color);
+    box-shadow: 0 0 4px var(--badge-color);
+  }
+  .panels {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    flex: 1;
+    min-height: 0;
+  }
+  .panel-left,
+  .panel-right {
+    min-height: 0;
+    overflow: auto;
+  }
+  .panel-bottom {
+    height: 250px;
+    flex-shrink: 0;
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+    flex-shrink: 0;
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  @media (max-width: 900px) {
+    .panels {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/ui/src/routes/orchestration/runs/[id]/fork/+page.svelte b/ui/src/routes/orchestration/runs/[id]/fork/+page.svelte
new file mode 100644
index 0000000..b7d9f58
--- /dev/null
+++ b/ui/src/routes/orchestration/runs/[id]/fork/+page.svelte
@@ -0,0 +1,301 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+  import CheckpointTimeline from '$lib/components/orchestration/CheckpointTimeline.svelte';
+  import StateInspector from '$lib/components/orchestration/StateInspector.svelte';
+
+  let runId = $derived($page.params.id);
+
+  let checkpoints = $state<any[]>([]);
+  let selectedCp = $state('');
+  let selectedState = $state<any>(null);
+  let overridesJson = $state('{}');
+  let overridesValid = $state(true);
+  let loading = $state(true);
+  let forking = $state(false);
+  let error = $state<string | null>(null);
+
+  onMount(async () => {
+    try {
+      checkpoints = await api.listCheckpoints(runId) || [];
+      if (checkpoints.length > 0) {
+        selectCheckpoint(checkpoints[checkpoints.length - 1].id);
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  });
+
+  async function selectCheckpoint(cpId: string) {
+    selectedCp = cpId;
+    try {
+      const cp = await api.getCheckpoint(runId, cpId);
+      selectedState = cp?.state || cp;
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+
+  function handleOverridesInput(e: Event) {
+    overridesJson = (e.target as HTMLTextAreaElement).value;
+    try {
+      JSON.parse(overridesJson);
+      overridesValid = true;
+    } catch {
+      overridesValid = false;
+    }
+  }
+
+  async function forkRun() {
+    if (!selectedCp || !overridesValid) return;
+    forking = true;
+    error = null;
+    try {
+      const overrides = JSON.parse(overridesJson);
+      const result = await api.forkRun(selectedCp, Object.keys(overrides).length > 0 ? overrides : undefined);
+      if (result?.id) {
+        await goto(orchestrationUiRoutes.run(result.id));
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      forking = false;
+    }
+  }
+
+  function runHref(id: string): string {
+    return orchestrationUiRoutes.run(id);
+  }
+</script>
+
+<div class="fork-page">
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <a href={runHref(runId)} class="back-link">Run {(runId || '').slice(0, 8)}</a>
+      <span class="sep">/</span>
+      <span class="page-title">Fork</span>
+    </div>
+    <div class="toolbar-actions">
+      <button
+        class="fork-btn"
+        onclick={forkRun}
+        disabled={!selectedCp || !overridesValid || forking}
+      >
+        {forking ? 'Forking...' : 'Fork Run'}
+      </button>
+    </div>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading checkpoints...</div>
+  {:else}
+    <div class="fork-panels">
+      <div class="panel-timeline">
+        <div class="panel-label">Checkpoints</div>
+        <CheckpointTimeline
+          {checkpoints}
+          selected={selectedCp}
+          onSelect={selectCheckpoint}
+        />
+      </div>
+      <div class="panel-state">
+        <div class="state-top">
+          <StateInspector currentState={selectedState} />
+        </div>
+        <div class="state-bottom">
+          <label class="override-label" for="overrides">State Overrides (JSON)</label>
+          <textarea
+            id="overrides"
+            class="override-editor"
+            class:invalid={!overridesValid}
+            spellcheck="false"
+            value={overridesJson}
+            oninput={handleOverridesInput}
+          ></textarea>
+          {#if !overridesValid}
+            <span class="json-err">Invalid JSON</span>
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fork-page {
+    padding: 1.5rem;
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: calc(100vh - 3rem);
+  }
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .back-link {
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .back-link:hover {
+    text-shadow: var(--text-glow);
+  }
+  .sep {
+    color: var(--fg-dim);
+    font-size: 0.8125rem;
+  }
+  .page-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg);
+  }
+  .toolbar-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .fork-btn {
+    padding: 0.5rem 1rem;
+    background: color-mix(in srgb, var(--accent) 10%, transparent);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: 2px;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .fork-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--accent) 20%, transparent);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--border-glow);
+    text-shadow: 0 0 8px var(--accent);
+  }
+  .fork-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .fork-panels {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 1rem;
+    flex: 1;
+    min-height: 0;
+  }
+  .panel-timeline {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    overflow-y: auto;
+  }
+  .panel-label {
+    padding: 0.625rem 1rem;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--accent);
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  }
+  .panel-state {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-height: 0;
+  }
+  .state-top {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  .state-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    flex-shrink: 0;
+  }
+  .override-label {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+  }
+  .override-editor {
+    width: 100%;
+    min-height: 120px;
+    padding: 0.75rem;
+    background: var(--bg-surface);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+  }
+  .override-editor:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 6px var(--border-glow);
+  }
+  .override-editor.invalid {
+    border-color: var(--error);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--error) 30%, transparent);
+  }
+  .json-err {
+    font-size: 0.6875rem;
+    color: var(--error);
+    font-family: var(--font-mono);
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+    flex-shrink: 0;
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  @media (max-width: 900px) {
+    .fork-panels {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/ui/src/routes/orchestration/store/+page.svelte b/ui/src/routes/orchestration/store/+page.svelte
new file mode 100644
index 0000000..7ab7261
--- /dev/null
+++ b/ui/src/routes/orchestration/store/+page.svelte
@@ -0,0 +1,567 @@
+<script lang="ts">
+  import { api } from '$lib/api/client';
+
+  let namespace = $state('');
+  let browsedNamespace = $state('');
+  let entries = $state<any[]>([]);
+  let loading = $state(false);
+  let error = $state<string | null>(null);
+
+  // Selected entry detail modal
+  let selectedEntry = $state<{ key: string; value: any } | null>(null);
+
+  // Add entry form
+  let addNamespace = $state('');
+  let addKey = $state('');
+  let addValue = $state('');
+  let addError = $state<string | null>(null);
+  let addSuccess = $state(false);
+  let addLoading = $state(false);
+
+  async function browse() {
+    if (!namespace.trim()) return;
+    browsedNamespace = namespace.trim();
+    loading = true;
+    error = null;
+    entries = [];
+    try {
+      const result = await api.storeList(browsedNamespace);
+      entries = result || [];
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function deleteEntry(key: string) {
+    if (!confirm(`Delete key "${key}" from namespace "${browsedNamespace}"?`)) return;
+    try {
+      await api.storeDelete(browsedNamespace, key);
+      entries = entries.filter((e) => e.key !== key);
+      if (selectedEntry?.key === key) selectedEntry = null;
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+
+  async function viewEntry(entry: any) {
+    try {
+      const full = await api.storeGet(browsedNamespace, entry.key);
+      // nulltickets returns a StoreEntry {namespace, key, value, ...} — extract .value
+      selectedEntry = { key: entry.key, value: full?.value ?? full };
+    } catch (e) {
+      // fall back to inline value
+      selectedEntry = { key: entry.key, value: entry.value ?? entry };
+    }
+  }
+
+  async function saveEntry() {
+    addError = null;
+    addSuccess = false;
+    if (!addNamespace.trim() || !addKey.trim() || !addValue.trim()) {
+      addError = 'All fields are required.';
+      return;
+    }
+    let parsed: any;
+    try {
+      parsed = JSON.parse(addValue);
+    } catch {
+      addError = 'Value must be valid JSON.';
+      return;
+    }
+    addLoading = true;
+    try {
+      await api.storePut(addNamespace.trim(), addKey.trim(), parsed);
+      addSuccess = true;
+      addKey = '';
+      addValue = '';
+      // Refresh if we browsed the same namespace
+      if (browsedNamespace === addNamespace.trim()) {
+        await browse();
+      }
+    } catch (e) {
+      addError = (e as Error).message;
+    } finally {
+      addLoading = false;
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) browse();
+  }
+
+  function closeModal() {
+    selectedEntry = null;
+  }
+
+  function formatValue(val: any): string {
+    try {
+      return JSON.stringify(val, null, 2);
+    } catch {
+      return String(val);
+    }
+  }
+</script>
+
+<div class="page">
+  <div class="header">
+    <h1>Store</h1>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  <div class="layout">
+    <!-- Left panel: namespace browser -->
+    <div class="left-panel">
+      <div class="panel-section">
+        <h2 class="panel-title">Browse Namespace</h2>
+        <div class="input-row">
+          <input
+            class="ns-input"
+            type="text"
+            placeholder="namespace"
+            bind:value={namespace}
+            onkeydown={handleKeydown}
+          />
+          <button class="btn-primary" onclick={browse} disabled={loading || !namespace.trim()}>
+            {loading ? '...' : 'Browse'}
+          </button>
+        </div>
+      </div>
+
+      <div class="panel-section add-section">
+        <h2 class="panel-title">Add Entry</h2>
+        <div class="form-field">
+          <label class="form-label" for="add-ns">Namespace</label>
+          <input
+            id="add-ns"
+            class="form-input"
+            type="text"
+            placeholder="namespace"
+            bind:value={addNamespace}
+          />
+        </div>
+        <div class="form-field">
+          <label class="form-label" for="add-key">Key</label>
+          <input
+            id="add-key"
+            class="form-input"
+            type="text"
+            placeholder="key"
+            bind:value={addKey}
+          />
+        </div>
+        <div class="form-field">
+          <label class="form-label" for="add-value">Value (JSON)</label>
+          <textarea
+            id="add-value"
+            class="form-textarea"
+            placeholder="JSON value"
+            bind:value={addValue}
+            rows={5}
+          ></textarea>
+        </div>
+        {#if addError}
+          <div class="form-error">{addError}</div>
+        {/if}
+        {#if addSuccess}
+          <div class="form-success">Saved.</div>
+        {/if}
+        <button class="btn-primary" onclick={saveEntry} disabled={addLoading}>
+          {addLoading ? 'Saving...' : 'Save'}
+        </button>
+      </div>
+    </div>
+
+    <!-- Main area: entries table -->
+    <div class="main-area">
+      {#if !browsedNamespace}
+        <div class="empty-state">
+          <p>> Enter a namespace and press Browse.</p>
+        </div>
+      {:else if loading}
+        <div class="loading">Loading entries...</div>
+      {:else if entries.length === 0}
+        <div class="empty-state">
+          <p>> No entries in namespace "{browsedNamespace}".</p>
+        </div>
+      {:else}
+        <div class="table-section">
+          <div class="table-header">
+            <span class="ns-label">/{browsedNamespace}</span>
+            <span class="entry-count">{entries.length} entries</span>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>Key</th>
+                  <th>Value Preview</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each entries as entry}
+                  <tr class="clickable" onclick={() => viewEntry(entry)}>
+                    <td class="mono">{entry.key ?? entry}</td>
+                    <td class="mono value-preview">
+                      {#if entry.value !== undefined}
+                        {typeof entry.value === 'string'
+                          ? entry.value.slice(0, 80)
+                          : JSON.stringify(entry.value).slice(0, 80)}
+                      {:else}
+                        -
+                      {/if}
+                    </td>
+                    <td class="actions-cell" onclick={(e) => e.stopPropagation()}>
+                      <button
+                        class="btn-danger-sm"
+                        onclick={() => deleteEntry(entry.key ?? entry)}
+                      >Delete</button>
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<!-- Entry detail modal -->
+{#if selectedEntry}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div class="modal-backdrop" role="button" tabindex="-1" onclick={closeModal}>
+    <div class="modal" role="dialog" aria-label="Entry detail" tabindex="-1" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') closeModal(); }}>
+      <div class="modal-header">
+        <span class="modal-title mono">{selectedEntry.key}</span>
+        <button class="modal-close" onclick={closeModal} aria-label="Close">&#x2715;</button>
+      </div>
+      <div class="modal-body">
+        <pre class="json-view">{formatValue(selectedEntry.value)}</pre>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .page {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-shadow: var(--text-glow);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  .layout {
+    display: flex;
+    gap: 1.5rem;
+    align-items: flex-start;
+  }
+  .left-panel {
+    width: 280px;
+    min-width: 240px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .panel-section {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .panel-title {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--fg-dim);
+    margin-bottom: 0.75rem;
+  }
+  .input-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .ns-input {
+    flex: 1;
+    padding: 0.4rem 0.6rem;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    font-size: 0.8125rem;
+    font-family: var(--font-mono);
+    outline: none;
+    min-width: 0;
+  }
+  .ns-input:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 4px var(--border-glow);
+  }
+  .btn-primary {
+    padding: 0.4rem 0.875rem;
+    background: color-mix(in srgb, var(--accent) 15%, transparent);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: 2px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.15s ease;
+  }
+  .btn-primary:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--accent) 25%, transparent);
+    box-shadow: 0 0 6px var(--accent-dim);
+  }
+  .btn-primary:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .add-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .form-label {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+  }
+  .form-input,
+  .form-textarea {
+    padding: 0.375rem 0.5rem;
+    background: var(--bg);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    font-size: 0.8125rem;
+    font-family: var(--font-mono);
+    outline: none;
+    resize: vertical;
+  }
+  .form-input:focus,
+  .form-textarea:focus {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 4px var(--border-glow);
+  }
+  .form-error {
+    font-size: 0.75rem;
+    color: var(--error);
+    text-shadow: 0 0 4px var(--error);
+  }
+  .form-success {
+    font-size: 0.75rem;
+    color: var(--success);
+    text-shadow: 0 0 4px var(--success);
+  }
+  .main-area {
+    flex: 1;
+    min-width: 0;
+  }
+  .table-section {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .ns-label {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-shadow: var(--text-glow);
+  }
+  .entry-count {
+    font-size: 0.6875rem;
+    color: var(--fg-dim);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .table-wrap {
+    overflow-x: auto;
+  }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+  }
+  th {
+    text-align: left;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg-dim);
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+  }
+  td {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+    color: var(--fg);
+  }
+  td.mono {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+  }
+  td.value-preview {
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--fg-dim);
+  }
+  td.actions-cell {
+    white-space: nowrap;
+    width: 80px;
+  }
+  tr.clickable {
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+  tr.clickable:hover td {
+    background: var(--bg-hover);
+  }
+  .btn-danger-sm {
+    padding: 0.25rem 0.5rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
+    border-radius: 2px;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .btn-danger-sm:hover {
+    background: color-mix(in srgb, var(--error) 20%, transparent);
+    box-shadow: 0 0 5px color-mix(in srgb, var(--error) 30%, transparent);
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+    border: 1px dashed var(--border);
+    background: var(--bg-surface);
+    border-radius: 4px;
+  }
+  .empty-state p {
+    font-family: var(--font-mono);
+  }
+
+  /* Modal */
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.65);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    backdrop-filter: blur(2px);
+  }
+  .modal {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    width: 640px;
+    max-width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent);
+  }
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.875rem 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  .modal-title {
+    font-size: 0.875rem;
+    color: var(--accent);
+    text-shadow: var(--text-glow);
+  }
+  .modal-close {
+    background: none;
+    border: none;
+    color: var(--fg-dim);
+    font-size: 1rem;
+    cursor: pointer;
+    padding: 0.25rem;
+    line-height: 1;
+    transition: color 0.15s ease;
+  }
+  .modal-close:hover {
+    color: var(--fg);
+  }
+  .modal-body {
+    padding: 1rem;
+    overflow-y: auto;
+    flex: 1;
+  }
+  .json-view {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--fg);
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>
diff --git a/ui/src/routes/orchestration/workflows/+page.svelte b/ui/src/routes/orchestration/workflows/+page.svelte
new file mode 100644
index 0000000..dd29aa7
--- /dev/null
+++ b/ui/src/routes/orchestration/workflows/+page.svelte
@@ -0,0 +1,294 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+
+  let workflows = $state<any[]>([]);
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let deleteConfirm = $state<string | null>(null);
+
+  async function loadWorkflows() {
+    try {
+      workflows = await api.listWorkflows() || [];
+      error = null;
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => { void loadWorkflows(); });
+
+  async function deleteWorkflow(id: string) {
+    try {
+      await api.deleteWorkflow(id);
+      deleteConfirm = null;
+      await loadWorkflows();
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+
+  function nodeCount(wf: any): number {
+    if (!wf.nodes) return 0;
+    return Object.keys(wf.nodes).length;
+  }
+
+  function workflowHref(id: string): string {
+    return orchestrationUiRoutes.workflow(id);
+  }
+</script>
+
+<div class="page">
+  <div class="header">
+    <h1>Workflows</h1>
+    <a href={orchestrationUiRoutes.newWorkflow()} class="action-btn">+ New Workflow</a>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading workflows...</div>
+  {:else if workflows.length === 0}
+    <div class="empty-state">
+      <p>> No workflows defined yet.</p>
+      <a href={orchestrationUiRoutes.newWorkflow()} class="btn">Create Workflow</a>
+    </div>
+  {:else}
+    <div class="workflow-grid">
+      {#each workflows as wf}
+        <div class="wf-card">
+          <div class="wf-header">
+            <span class="wf-name">{wf.name || wf.id}</span>
+            <span class="wf-nodes">{nodeCount(wf)} nodes</span>
+          </div>
+          {#if wf.id}
+            <div class="wf-id">{wf.id}</div>
+          {/if}
+          <div class="wf-actions">
+            <a href={workflowHref(wf.id)} class="btn-edit">Edit</a>
+            <button class="btn-run" onclick={() => goto(workflowHref(wf.id))}>Run</button>
+            {#if deleteConfirm === wf.id}
+              <button class="btn-confirm-delete" onclick={() => deleteWorkflow(wf.id)}>Confirm</button>
+              <button class="btn-cancel" onclick={() => deleteConfirm = null}>Cancel</button>
+            {:else}
+              <button class="btn-delete" onclick={() => deleteConfirm = wf.id}>Delete</button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+  }
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-shadow: var(--text-glow);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+  .action-btn {
+    padding: 0.5rem 1rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .action-btn:hover {
+    text-decoration: none;
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--border-glow);
+    text-shadow: 0 0 8px var(--accent);
+  }
+  .workflow-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+  .wf-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+  }
+  .wf-card:hover {
+    border-color: var(--accent-dim);
+    box-shadow: 0 0 12px var(--border-glow);
+  }
+  .wf-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+  }
+  .wf-name {
+    font-weight: 700;
+    font-size: 1.125rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--accent);
+    text-shadow: var(--text-glow);
+  }
+  .wf-nodes {
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+    color: var(--fg-dim);
+    padding: 0.2rem 0.5rem;
+    background: color-mix(in srgb, var(--border) 20%, transparent);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+  }
+  .wf-id {
+    font-size: 0.6875rem;
+    font-family: var(--font-mono);
+    color: var(--fg-dim);
+    opacity: 0.7;
+  }
+  .wf-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+  }
+  .btn-edit,
+  .btn-run,
+  .btn-delete,
+  .btn-confirm-delete,
+  .btn-cancel {
+    padding: 0.375rem 0.75rem;
+    border-radius: 2px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  .btn-edit {
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    text-shadow: var(--text-glow);
+  }
+  .btn-edit:hover {
+    text-decoration: none;
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 8px var(--border-glow);
+  }
+  .btn-run {
+    background: color-mix(in srgb, var(--success) 10%, transparent);
+    color: var(--success);
+    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
+  }
+  .btn-run:hover {
+    background: color-mix(in srgb, var(--success) 20%, transparent);
+    border-color: var(--success);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--success) 30%, transparent);
+  }
+  .btn-delete {
+    background: transparent;
+    color: var(--fg-dim);
+    border: 1px solid var(--border);
+    margin-left: auto;
+  }
+  .btn-delete:hover {
+    color: var(--error);
+    border-color: var(--error);
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+  }
+  .btn-confirm-delete {
+    background: color-mix(in srgb, var(--error) 15%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    margin-left: auto;
+    text-shadow: 0 0 4px var(--error);
+  }
+  .btn-cancel {
+    background: transparent;
+    color: var(--fg-dim);
+    border: 1px solid var(--border);
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+    border: 1px dashed var(--border);
+    background: var(--bg-surface);
+    border-radius: 4px;
+  }
+  .empty-state p {
+    margin-bottom: 1.5rem;
+    font-size: 1.125rem;
+    font-family: var(--font-mono);
+  }
+  .empty-state .btn {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .empty-state .btn:hover {
+    text-decoration: none;
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 10px var(--border-glow);
+    text-shadow: 0 0 8px var(--accent);
+  }
+</style>
diff --git a/ui/src/routes/orchestration/workflows/[id]/+page.svelte b/ui/src/routes/orchestration/workflows/[id]/+page.svelte
new file mode 100644
index 0000000..82e83c2
--- /dev/null
+++ b/ui/src/routes/orchestration/workflows/[id]/+page.svelte
@@ -0,0 +1,297 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import { api } from '$lib/api/client';
+  import { orchestrationUiRoutes } from '$lib/orchestration/routes';
+  import GraphViewer from '$lib/components/orchestration/GraphViewer.svelte';
+  import WorkflowJsonEditor from '$lib/components/orchestration/WorkflowJsonEditor.svelte';
+
+  let id = $derived($page.params.id);
+  let isNew = $derived(id === 'new');
+
+  const emptyWorkflow = {
+    id: '',
+    name: '',
+    state_schema: {},
+    nodes: {},
+    edges: [],
+  };
+
+  let jsonValue = $state(JSON.stringify(emptyWorkflow, null, 2));
+  let parsedWorkflow = $state<any>(emptyWorkflow);
+  let parseError = $state('');
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let saving = $state(false);
+  let validating = $state(false);
+  let validationResult = $state<{ valid: boolean; errors?: string[] } | null>(null);
+
+  onMount(async () => {
+    if (!isNew) {
+      try {
+        const wf = await api.getWorkflow(id);
+        parsedWorkflow = wf;
+        jsonValue = JSON.stringify(wf, null, 2);
+        error = null;
+      } catch (e) {
+        error = (e as Error).message;
+      }
+    }
+    loading = false;
+  });
+
+  function onJsonChange() {
+    try {
+      parsedWorkflow = JSON.parse(jsonValue);
+      parseError = '';
+    } catch (e) {
+      parseError = (e as Error).message;
+    }
+  }
+
+  $effect(() => {
+    jsonValue;
+    onJsonChange();
+  });
+
+  async function validate() {
+    if (isNew) return;
+    validating = true;
+    validationResult = null;
+    try {
+      const result = await api.validateWorkflow(id);
+      validationResult = result;
+    } catch (e) {
+      validationResult = { valid: false, errors: [(e as Error).message] };
+    } finally {
+      validating = false;
+    }
+  }
+
+  async function save() {
+    if (parseError) return;
+    saving = true;
+    error = null;
+    try {
+      if (isNew) {
+        const result = await api.createWorkflow(parsedWorkflow);
+        await goto(orchestrationUiRoutes.workflow(result.id || parsedWorkflow.id));
+      } else {
+        await api.updateWorkflow(id, parsedWorkflow);
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function run() {
+    if (parseError || isNew) return;
+    try {
+      const result = await api.runWorkflow(id, {});
+      if (result?.id) {
+        await goto(orchestrationUiRoutes.run(result.id));
+      }
+    } catch (e) {
+      error = (e as Error).message;
+    }
+  }
+</script>
+
+<div class="editor-page">
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <a href={orchestrationUiRoutes.workflows()} class="back-link">Workflows</a>
+      <span class="sep">/</span>
+      <span class="page-title">{isNew ? 'New Workflow' : (parsedWorkflow?.name || id)}</span>
+    </div>
+    <div class="toolbar-actions">
+      {#if !isNew}
+        <button class="tool-btn" onclick={validate} disabled={validating || !!parseError}>
+          {validating ? 'Validating...' : 'Validate'}
+        </button>
+      {/if}
+      <button class="tool-btn" onclick={save} disabled={saving || !!parseError}>
+        {saving ? 'Saving...' : 'Save'}
+      </button>
+      {#if !isNew}
+        <button class="tool-btn run" onclick={run} disabled={!!parseError}>Run</button>
+      {/if}
+    </div>
+  </div>
+
+  {#if error}
+    <div class="error-banner">ERR: {error}</div>
+  {/if}
+
+  {#if validationResult}
+    <div class="validation-result" class:valid={validationResult.valid} class:invalid={!validationResult.valid}>
+      {#if validationResult.valid}
+        Workflow is valid.
+      {:else}
+        <strong>Validation errors:</strong>
+        {#each validationResult.errors || [] as err}
+          <div class="val-err">{err}</div>
+        {/each}
+      {/if}
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="loading">Loading workflow...</div>
+  {:else}
+    <div class="editor-panels">
+      <div class="panel-graph">
+        <GraphViewer workflow={parsedWorkflow} nodeStatus={{}} />
+      </div>
+      <div class="panel-json">
+        <WorkflowJsonEditor bind:value={jsonValue} onerror={(msg) => parseError = msg} />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .editor-page {
+    padding: 1.5rem;
+    max-width: 1600px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: calc(100vh - 3rem);
+  }
+  .toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+  .toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .back-link {
+    font-size: 0.8125rem;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  .back-link:hover {
+    text-shadow: var(--text-glow);
+  }
+  .sep {
+    color: var(--fg-dim);
+    font-size: 0.8125rem;
+  }
+  .page-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .toolbar-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .tool-btn {
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-surface);
+    color: var(--accent);
+    border: 1px solid var(--accent-dim);
+    border-radius: 2px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-shadow: var(--text-glow);
+  }
+  .tool-btn:hover:not(:disabled) {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    box-shadow: 0 0 8px var(--border-glow);
+  }
+  .tool-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .tool-btn.run {
+    color: var(--success);
+    border-color: color-mix(in srgb, var(--success) 40%, transparent);
+    text-shadow: 0 0 4px var(--success);
+  }
+  .tool-btn.run:hover:not(:disabled) {
+    border-color: var(--success);
+    box-shadow: 0 0 8px color-mix(in srgb, var(--success) 30%, transparent);
+  }
+  .editor-panels {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    flex: 1;
+    min-height: 0;
+  }
+  .panel-graph {
+    overflow: auto;
+    min-height: 0;
+  }
+  .panel-json {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .error-banner {
+    padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-shadow: 0 0 5px var(--error);
+    box-shadow: 0 0 10px color-mix(in srgb, var(--error) 20%, transparent);
+  }
+  .validation-result {
+    padding: 0.625rem 1rem;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    font-family: var(--font-mono);
+  }
+  .validation-result.valid {
+    background: color-mix(in srgb, var(--success) 10%, transparent);
+    color: var(--success);
+    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
+  }
+  .validation-result.invalid {
+    background: color-mix(in srgb, var(--error) 10%, transparent);
+    color: var(--error);
+    border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
+  }
+  .val-err {
+    margin-top: 0.25rem;
+    padding-left: 1rem;
+  }
+  .loading {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--fg-dim);
+  }
+  @media (max-width: 900px) {
+    .editor-panels {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>