From f249c8b49b5b536b78f6ebe98146282eedf120c0 Mon Sep 17 00:00:00 2001
From: Timur Gordon <31495328+timurgordon@users.noreply.github.com>
Date: Tue, 28 Oct 2025 03:32:25 +0100
Subject: [PATCH] Implement comprehensive admin UI with job management and API
 key display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admin UI Features:
- Complete job lifecycle: create, run, view status, view output, delete
- Job table with sorting, filtering, and real-time status updates
- Status polling with countdown timers for running jobs
- Job output modal with result/error display
- API keys management: create keys, list keys with secrets visible
- Sidebar toggle between runners and keys views
- Toast notifications for errors
- Modern dark theme UI with responsive design

Supervisor Improvements:
- Fixed job status persistence using client methods
- Refactored get_job_result to use client.get_status, get_result, get_error
- Changed runner_rust dependency from git to local path
- Authentication system with API key scopes (admin, user, register)
- Job listing with status fetching from Redis
- Services module for job and auth operations

OpenRPC Client:
- Added auth_list_keys method for fetching API keys
- WASM bindings for browser usage
- Proper error handling and type conversions

Build Status: ✅ All components build successfully
---
 Cargo.lock                                    |  168 +-
 Cargo.toml                                    |    4 +-
 clients/admin-ui/Cargo.lock                   |  159 +-
 clients/admin-ui/Cargo.toml                   |    4 +
 clients/admin-ui/src/app.rs                   | 2621 +++++++++++------
 clients/admin-ui/src/app.rs.backup            | 1099 -------
 clients/admin-ui/src/components/add_runner.rs |  296 --
 clients/admin-ui/src/components/dashboard.rs  |  294 --
 clients/admin-ui/src/components/mod.rs        |    7 -
 clients/admin-ui/src/components/navbar.rs     |   67 -
 .../admin-ui/src/components/runner_card.rs    |  191 --
 .../admin-ui/src/components/runner_detail.rs  |  437 ---
 clients/admin-ui/src/components/runners.rs    |  278 --
 .../admin-ui/src/components/status_badge.rs   |   30 -
 clients/admin-ui/src/jobs.rs                  |  177 --
 clients/admin-ui/src/lib.rs                   |    4 -
 clients/admin-ui/src/runners.rs               |  205 --
 clients/admin-ui/src/services.rs              |  145 -
 clients/admin-ui/src/sidebar.rs               |  525 ----
 clients/admin-ui/src/sidebar_old.rs           |  639 ----
 clients/admin-ui/src/toast.rs                 |  165 --
 clients/admin-ui/src/types.rs                 |   61 -
 clients/admin-ui/src/wasm_client.rs           |  378 ---
 clients/admin-ui/styles.css                   | 1419 +++++++--
 clients/openrpc/Cargo.lock                    |  267 +-
 clients/openrpc/Cargo.toml                    |    5 +
 clients/openrpc/src/lib.rs                    |   21 +-
 clients/openrpc/src/wasm.rs                   |  326 +-
 cmd/supervisor.rs                             |   18 +
 docs/AUTH.md                                  |  146 +
 scripts/run.sh                                |   71 +-
 src/auth.rs                                   |  134 +
 src/lib.rs                                    |    2 +
 src/openrpc.rs                                |  262 +-
 src/services.rs                               |  312 ++
 src/supervisor.rs                             |  295 +-
 36 files changed, 4811 insertions(+), 6421 deletions(-)
 delete mode 100644 clients/admin-ui/src/app.rs.backup
 delete mode 100644 clients/admin-ui/src/components/add_runner.rs
 delete mode 100644 clients/admin-ui/src/components/dashboard.rs
 delete mode 100644 clients/admin-ui/src/components/mod.rs
 delete mode 100644 clients/admin-ui/src/components/navbar.rs
 delete mode 100644 clients/admin-ui/src/components/runner_card.rs
 delete mode 100644 clients/admin-ui/src/components/runner_detail.rs
 delete mode 100644 clients/admin-ui/src/components/runners.rs
 delete mode 100644 clients/admin-ui/src/components/status_badge.rs
 delete mode 100644 clients/admin-ui/src/jobs.rs
 delete mode 100644 clients/admin-ui/src/runners.rs
 delete mode 100644 clients/admin-ui/src/services.rs
 delete mode 100644 clients/admin-ui/src/sidebar.rs
 delete mode 100644 clients/admin-ui/src/sidebar_old.rs
 delete mode 100644 clients/admin-ui/src/toast.rs
 delete mode 100644 clients/admin-ui/src/types.rs
 delete mode 100644 clients/admin-ui/src/wasm_client.rs
 create mode 100644 docs/AUTH.md
 create mode 100644 src/auth.rs
 create mode 100644 src/services.rs

diff --git a/Cargo.lock b/Cargo.lock
index 6eed54b..07177d8 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1377,12 +1377,14 @@ dependencies = [
  "env_logger 0.10.2",
  "escargot",
  "hero-supervisor-openrpc-client",
+ "hyper 1.7.0",
+ "hyper-util",
  "jsonrpsee",
  "log",
  "rand 0.8.5",
  "redis 0.25.4",
  "reqwest 0.12.24",
- "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git)",
+ "runner_rust 0.1.0",
  "serde",
  "serde_json",
  "thiserror 1.0.69",
@@ -1403,13 +1405,17 @@ dependencies = [
  "env_logger 0.11.8",
  "getrandom 0.2.16",
  "hero-supervisor",
+ "hex",
  "indexmap",
  "js-sys",
  "jsonrpsee",
  "log",
  "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git?branch=main)",
+ "secp256k1 0.29.1",
  "serde",
+ "serde-wasm-bindgen",
  "serde_json",
+ "sha2",
  "thiserror 1.0.69",
  "tokio",
  "uuid",
@@ -2639,6 +2645,26 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "osiris"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "clap",
+ "env_logger 0.10.2",
+ "osiris_derive 0.1.0",
+ "redis 0.24.0",
+ "rhai",
+ "serde",
+ "serde_json",
+ "time",
+ "tokio",
+ "toml",
+ "tracing",
+ "tracing-subscriber",
+ "uuid",
+]
+
 [[package]]
 name = "osiris"
 version = "0.1.0"
@@ -2647,7 +2673,7 @@ dependencies = [
  "anyhow",
  "clap",
  "env_logger 0.10.2",
- "osiris_derive",
+ "osiris_derive 0.1.0 (git+https://git.ourworld.tf/herocode/osiris.git)",
  "redis 0.24.0",
  "serde",
  "serde_json",
@@ -2659,6 +2685,15 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "osiris_derive"
+version = "0.1.0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.108",
+]
+
 [[package]]
 name = "osiris_derive"
 version = "0.1.0"
@@ -3531,6 +3566,52 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
 
+[[package]]
+name = "runner_rust"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "async-trait",
+ "chrono",
+ "clap",
+ "crossterm",
+ "env_logger 0.10.2",
+ "hero_logger",
+ "heromodels",
+ "heromodels-derive",
+ "heromodels_core",
+ "hex",
+ "log",
+ "osiris 0.1.0",
+ "rand 0.8.5",
+ "ratatui",
+ "redis 0.25.4",
+ "rhai",
+ "rhailib_dsl",
+ "sal-git",
+ "sal-hetzner",
+ "sal-kubernetes",
+ "sal-mycelium",
+ "sal-net",
+ "sal-os",
+ "sal-postgresclient",
+ "sal-process",
+ "sal-redisclient",
+ "sal-text",
+ "sal-vault",
+ "sal-virt",
+ "sal-zinit-client",
+ "secp256k1 0.28.2",
+ "serde",
+ "serde_json",
+ "sha2",
+ "thiserror 1.0.69",
+ "tokio",
+ "toml",
+ "tracing",
+ "uuid",
+]
+
 [[package]]
 name = "runner_rust"
 version = "0.1.0"
@@ -3548,7 +3629,7 @@ dependencies = [
  "heromodels_core",
  "hex",
  "log",
- "osiris",
+ "osiris 0.1.0 (git+https://git.ourworld.tf/herocode/osiris.git)",
  "rand 0.8.5",
  "ratatui",
  "redis 0.25.4",
@@ -3567,54 +3648,7 @@ dependencies = [
  "sal-vault",
  "sal-virt",
  "sal-zinit-client",
- "secp256k1",
- "serde",
- "serde_json",
- "sha2",
- "thiserror 1.0.69",
- "tokio",
- "toml",
- "tracing",
- "uuid",
-]
-
-[[package]]
-name = "runner_rust"
-version = "0.1.0"
-source = "git+https://git.ourworld.tf/herocode/runner_rust.git#268128f7fd53e9586288efd95f9288595c4a74e9"
-dependencies = [
- "anyhow",
- "async-trait",
- "chrono",
- "clap",
- "crossterm",
- "env_logger 0.10.2",
- "hero_logger",
- "heromodels",
- "heromodels-derive",
- "heromodels_core",
- "hex",
- "log",
- "osiris",
- "rand 0.8.5",
- "ratatui",
- "redis 0.25.4",
- "rhai",
- "rhailib_dsl",
- "sal-git",
- "sal-hetzner",
- "sal-kubernetes",
- "sal-mycelium",
- "sal-net",
- "sal-os",
- "sal-postgresclient",
- "sal-process",
- "sal-redisclient",
- "sal-text",
- "sal-vault",
- "sal-virt",
- "sal-zinit-client",
- "secp256k1",
+ "secp256k1 0.28.2",
  "serde",
  "serde_json",
  "sha2",
@@ -4063,7 +4097,17 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d24b59d129cdadea20aea4fb2352fa053712e5d713eee47d700cd4b2bc002f10"
 dependencies = [
  "rand 0.8.5",
- "secp256k1-sys",
+ "secp256k1-sys 0.9.2",
+]
+
+[[package]]
+name = "secp256k1"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9465315bc9d4566e1724f0fffcbcc446268cb522e60f9a27bcded6b19c108113"
+dependencies = [
+ "rand 0.8.5",
+ "secp256k1-sys 0.10.1",
 ]
 
 [[package]]
@@ -4075,6 +4119,15 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "secp256k1-sys"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4387882333d3aa8cb20530a17c69a3752e97837832f34f6dccc760e715001d9"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "secrecy"
 version = "0.8.0"
@@ -4141,6 +4194,17 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_core"
 version = "1.0.228"
diff --git a/Cargo.toml b/Cargo.toml
index 01c663c..c350466 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,7 +5,7 @@ edition = "2021"
 
 [dependencies]
 # Runner crate with integrated job module
-runner_rust = { git = "https://git.ourworld.tf/herocode/runner_rust.git" }
+runner_rust = { path = "../runner_rust" }
 # Async runtime
 tokio = { version = "1.0", features = ["full"] }
 
@@ -37,6 +37,8 @@ anyhow = "1.0"
 # CORS support for OpenRPC server
 tower-http = { version = "0.5", features = ["cors"] }
 tower = "0.4"
+hyper = { version = "1.0", features = ["full"] }
+hyper-util = { version = "0.1", features = ["tokio"] }
 
 # Mycelium integration (optional)
 base64 = { version = "0.22", optional = true }
diff --git a/clients/admin-ui/Cargo.lock b/clients/admin-ui/Cargo.lock
index 8cfbac1..22f8aa1 100644
--- a/clients/admin-ui/Cargo.lock
+++ b/clients/admin-ui/Cargo.lock
@@ -1833,10 +1833,12 @@ dependencies = [
  "chrono",
  "clap",
  "env_logger 0.10.2",
+ "hyper 1.7.0",
+ "hyper-util",
  "jsonrpsee",
  "log",
  "redis 0.25.4",
- "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git)",
+ "runner_rust 0.1.0",
  "serde",
  "serde_json",
  "thiserror 1.0.69",
@@ -1856,13 +1858,17 @@ dependencies = [
  "env_logger 0.11.8",
  "getrandom 0.2.16",
  "hero-supervisor",
+ "hex",
  "indexmap",
  "js-sys",
  "jsonrpsee",
  "log",
  "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git?branch=main)",
+ "secp256k1 0.29.1",
  "serde",
+ "serde-wasm-bindgen 0.6.5",
  "serde_json",
+ "sha2",
  "thiserror 1.0.69",
  "tokio",
  "uuid",
@@ -3149,6 +3155,26 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "osiris"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "clap",
+ "env_logger 0.10.2",
+ "osiris_derive 0.1.0",
+ "redis 0.24.0",
+ "rhai",
+ "serde",
+ "serde_json",
+ "time",
+ "tokio",
+ "toml",
+ "tracing",
+ "tracing-subscriber",
+ "uuid",
+]
+
 [[package]]
 name = "osiris"
 version = "0.1.0"
@@ -3157,7 +3183,7 @@ dependencies = [
  "anyhow",
  "clap",
  "env_logger 0.10.2",
- "osiris_derive",
+ "osiris_derive 0.1.0 (git+https://git.ourworld.tf/herocode/osiris.git)",
  "redis 0.24.0",
  "serde",
  "serde_json",
@@ -3169,6 +3195,15 @@ dependencies = [
  "uuid",
 ]
 
+[[package]]
+name = "osiris_derive"
+version = "0.1.0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "osiris_derive"
 version = "0.1.0"
@@ -4095,6 +4130,52 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
 
+[[package]]
+name = "runner_rust"
+version = "0.1.0"
+dependencies = [
+ "anyhow",
+ "async-trait",
+ "chrono",
+ "clap",
+ "crossterm",
+ "env_logger 0.10.2",
+ "hero_logger",
+ "heromodels",
+ "heromodels-derive",
+ "heromodels_core",
+ "hex",
+ "log",
+ "osiris 0.1.0",
+ "rand 0.8.5",
+ "ratatui",
+ "redis 0.25.4",
+ "rhai",
+ "rhailib_dsl",
+ "sal-git",
+ "sal-hetzner",
+ "sal-kubernetes",
+ "sal-mycelium",
+ "sal-net",
+ "sal-os",
+ "sal-postgresclient",
+ "sal-process",
+ "sal-redisclient",
+ "sal-text",
+ "sal-vault",
+ "sal-virt",
+ "sal-zinit-client",
+ "secp256k1 0.28.2",
+ "serde",
+ "serde_json",
+ "sha2",
+ "thiserror 1.0.69",
+ "tokio",
+ "toml",
+ "tracing",
+ "uuid",
+]
+
 [[package]]
 name = "runner_rust"
 version = "0.1.0"
@@ -4112,7 +4193,7 @@ dependencies = [
  "heromodels_core",
  "hex",
  "log",
- "osiris",
+ "osiris 0.1.0 (git+https://git.ourworld.tf/herocode/osiris.git)",
  "rand 0.8.5",
  "ratatui",
  "redis 0.25.4",
@@ -4131,54 +4212,7 @@ dependencies = [
  "sal-vault",
  "sal-virt",
  "sal-zinit-client",
- "secp256k1",
- "serde",
- "serde_json",
- "sha2",
- "thiserror 1.0.69",
- "tokio",
- "toml",
- "tracing",
- "uuid",
-]
-
-[[package]]
-name = "runner_rust"
-version = "0.1.0"
-source = "git+https://git.ourworld.tf/herocode/runner_rust.git#268128f7fd53e9586288efd95f9288595c4a74e9"
-dependencies = [
- "anyhow",
- "async-trait",
- "chrono",
- "clap",
- "crossterm",
- "env_logger 0.10.2",
- "hero_logger",
- "heromodels",
- "heromodels-derive",
- "heromodels_core",
- "hex",
- "log",
- "osiris",
- "rand 0.8.5",
- "ratatui",
- "redis 0.25.4",
- "rhai",
- "rhailib_dsl",
- "sal-git",
- "sal-hetzner",
- "sal-kubernetes",
- "sal-mycelium",
- "sal-net",
- "sal-os",
- "sal-postgresclient",
- "sal-process",
- "sal-redisclient",
- "sal-text",
- "sal-vault",
- "sal-virt",
- "sal-zinit-client",
- "secp256k1",
+ "secp256k1 0.28.2",
  "serde",
  "serde_json",
  "sha2",
@@ -4633,7 +4667,17 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d24b59d129cdadea20aea4fb2352fa053712e5d713eee47d700cd4b2bc002f10"
 dependencies = [
  "rand 0.8.5",
- "secp256k1-sys",
+ "secp256k1-sys 0.9.2",
+]
+
+[[package]]
+name = "secp256k1"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9465315bc9d4566e1724f0fffcbcc446268cb522e60f9a27bcded6b19c108113"
+dependencies = [
+ "rand 0.8.5",
+ "secp256k1-sys 0.10.1",
 ]
 
 [[package]]
@@ -4645,6 +4689,15 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "secp256k1-sys"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4387882333d3aa8cb20530a17c69a3752e97837832f34f6dccc760e715001d9"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "secrecy"
 version = "0.8.0"
@@ -5065,11 +5118,13 @@ checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
 name = "supervisor-admin-ui"
 version = "0.1.0"
 dependencies = [
+ "chrono",
  "gloo 0.11.0",
  "hero-supervisor-openrpc-client",
  "js-sys",
  "log",
  "serde",
+ "serde-wasm-bindgen 0.6.5",
  "serde_json",
  "uuid",
  "wasm-bindgen",
diff --git a/clients/admin-ui/Cargo.toml b/clients/admin-ui/Cargo.toml
index 35a3378..1503ff5 100644
--- a/clients/admin-ui/Cargo.toml
+++ b/clients/admin-ui/Cargo.toml
@@ -15,11 +15,15 @@ web-sys = { version = "0.3", features = [
   "Document",
   "Element",
   "HtmlElement",
+  "HtmlSelectElement",
+  "HtmlTextAreaElement",
   "Window",
 ] }
 js-sys = "0.3"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
+serde-wasm-bindgen = "0.6"
+chrono = { version = "0.4", features = ["wasmbind"] }
 gloo = { version = "0.11", features = ["console", "timers", "futures"] }
 log = "0.4"
 wasm-logger = "0.2"
diff --git a/clients/admin-ui/src/app.rs b/clients/admin-ui/src/app.rs
index 3d061ed..17f746d 100644
--- a/clients/admin-ui/src/app.rs
+++ b/clients/admin-ui/src/app.rs
@@ -1,906 +1,1799 @@
+//! Main application component with authentication
+
 use yew::prelude::*;
-use gloo::console;
-use gloo::timers::callback::Interval;
-use gloo::storage::{LocalStorage, Storage};
+use web_sys::HtmlInputElement;
+use hero_supervisor_openrpc_client::wasm::WasmSupervisorClient;
 use wasm_bindgen_futures::spawn_local;
-use hero_supervisor_openrpc_client::wasm::{WasmSupervisorClient, WasmJob};
-use crate::sidebar::{Sidebar, SupervisorInfo, SessionSecretType, SessionData, SESSION_STORAGE_KEY};
-use crate::runners::{Runners, RegisterForm};
-use crate::jobs::Jobs;
-use crate::toast::{Toast, ToastContainer};
+use gloo::timers::callback::Timeout;
 
-/// Generate a unique job ID client-side using UUID v4
-fn generate_job_id() -> String {
-    uuid::Uuid::new_v4().to_string()
+#[derive(Clone, PartialEq)]
+enum AppState {
+    Login,
+    Dashboard,
 }
 
-#[derive(Clone, Default)]
-pub struct JobForm {
-    pub payload: String,
-    pub runner: String,
-    pub executor: String,
+#[derive(Clone, PartialEq)]
+enum SidebarView {
+    Runners,
+    Keys,
 }
 
-#[derive(Clone, Debug, PartialEq)]
-pub enum PingState {
-    Idle,
-    Waiting,
-    Success(String), // Result message
-    Error(String),   // Error message
+pub struct App {
+    state: AppState,
+    secret: String,
+    server_url: String,
+    client: Option<WasmSupervisorClient>,
+    error: Option<String>,
+    runners: Vec<String>,
+    jobs: Vec<serde_json::Value>,
+    keys: Vec<serde_json::Value>,
+    loading: bool,
+    connected: bool,
+    // Add runner form
+    new_runner_name: String,
+    adding_runner: bool,
+    // Add key form
+    new_key_name: String,
+    new_key_scope: String,
+    adding_key: bool,
+    // Create job form
+    show_job_form: bool,
+    job_id: String,
+    job_payload: String,
+    job_runner: String,
+    job_timeout: String,
+    job_signatures: Vec<(String, String)>, // Vec of (public_key, signature)
+    job_private_key: String, // For signing
+    creating_job: bool,
+    // Toast auto-dismiss
+    _toast_timeout: Option<Timeout>,
+    // Job status polling
+    _status_poll_timeout: Option<Timeout>,
+    polling_jobs: std::collections::HashSet<String>,
+    // Job output viewing
+    viewing_job_output: Option<String>, // job_id of job whose output is being viewed
+    job_output: Option<String>, // The actual output/result
+    // Auth info
+    user_name: String,
+    user_scope: String,
+    // Sidebar view toggle
+    sidebar_view: SidebarView,
+    selected_runner: Option<String>,
+    selected_key: Option<String>,
+    // Job table state
+    job_sort_column: String,
+    job_sort_ascending: bool,
+    job_filter: String,
 }
 
-impl Default for PingState {
-    fn default() -> Self {
-        PingState::Idle
-    }
+pub enum Msg {
+    UpdateSecret(String),
+    UpdateServerUrl(String),
+    Login,
+    AuthVerified(Result<(String, String), String>), // (name, scope)
+    Logout,
+    SetError(String),
+    ClearError,
+    LoadRunners,
+    RunnersLoaded(Result<Vec<String>, String>),
+    LoadJobs,
+    JobsLoaded(Result<Vec<serde_json::Value>, String>),
+    LoadKeys,
+    KeysLoaded(Result<Vec<serde_json::Value>, String>),
+    SortJobs(String),
+    FilterJobs(String),
+    RunJob(String),
+    JobRan(Result<String, String>),
+    DeleteJob(String),
+    JobDeleted(Result<String, String>),
+    ViewJobLogs(String),
+    PollJobStatus,
+    JobStatusUpdated(String, String), // (job_id, status)
+    JobStatusError(String, String), // (job_id, error)
+    ViewJobOutput(String), // job_id
+    JobOutputLoaded(Result<String, String>),
+    CloseJobOutput,
+    UpdateNewRunnerName(String),
+    AddRunner,
+    RunnerAdded(Result<(), String>),
+    UpdateNewKeyName(String),
+    UpdateNewKeyScope(String),
+    AddKey,
+    KeyAdded(Result<(), String>),
+    ShowJobForm,
+    HideJobForm,
+    UpdateJobId(String),
+    UpdateJobPayload(String),
+    UpdateJobRunner(String),
+    UpdateJobTimeout(String),
+    UpdateJobPrivateKey(String),
+    SignJob,
+    RemoveSignature(usize),
+    CreateJob,
+    JobCreated(Result<String, String>),
+    ToggleSidebarView(SidebarView),
+    SelectRunner(Option<String>),
+    SelectKey(Option<String>),
 }
 
-#[derive(Clone)]
-pub struct AppState {
-    pub server_url: String,
-    pub runners: Vec<(String, String)>, // (name, status)
-    pub jobs: Vec<WasmJob>,
-    pub ongoing_jobs: Vec<String>, // Job IDs being polled
-    pub loading: bool,
-    pub register_form: RegisterForm,
-    pub job_form: JobForm,
-    pub supervisor_info: Option<SupervisorInfo>,
-    pub admin_secret: String,
-    pub session_secret: String,
-    pub session_secret_type: SessionSecretType,
-    pub ping_states: std::collections::HashMap<String, PingState>, // runner -> ping_state
-    pub toasts: Vec<Toast>, // Toast notifications
-}
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
 
-
-
-
-
-#[function_component(App)]
-pub fn app() -> Html {
-    let state = use_state(|| {
-        // Try to load session from localStorage
-        let (session_secret, session_secret_type) = if let Ok(session_data) = LocalStorage::get::<SessionData>(SESSION_STORAGE_KEY) {
-            (session_data.secret, session_data.secret_type)
-        } else {
-            (String::new(), SessionSecretType::None)
-        };
-        
-        AppState {
-            server_url: "http://localhost:3030".to_string(),
-            runners: vec![],
-            jobs: vec![],
-            ongoing_jobs: vec![],
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            state: AppState::Login,
+            secret: String::new(),
+            server_url: "http://127.0.0.1:3030".to_string(),
+            client: None,
+            error: None,
+            runners: Vec::new(),
+            jobs: Vec::new(),
+            keys: Vec::new(),
             loading: false,
-            register_form: RegisterForm {
-                name: String::new(),
-                secret: String::new(),
-            },
-            job_form: JobForm {
-                payload: String::new(),
-                runner: String::new(),
-                executor: String::new(),
-            },
-            supervisor_info: None,
-            admin_secret: String::new(),
-            session_secret,
-            session_secret_type,
-            ping_states: std::collections::HashMap::new(),
-            toasts: vec![],
+            connected: false,
+            new_runner_name: String::new(),
+            adding_runner: false,
+            new_key_name: String::new(),
+            new_key_scope: "user".to_string(),
+            adding_key: false,
+            show_job_form: false,
+            job_id: String::new(),
+            job_payload: String::new(),
+            job_runner: String::new(),
+            job_timeout: "30".to_string(),
+            job_signatures: Vec::new(),
+            job_private_key: String::new(),
+            creating_job: false,
+            _toast_timeout: None,
+            _status_poll_timeout: None,
+            polling_jobs: std::collections::HashSet::new(),
+            viewing_job_output: None,
+            job_output: None,
+            user_name: String::new(),
+            user_scope: String::new(),
+            sidebar_view: SidebarView::Runners,
+            selected_runner: None,
+            selected_key: None,
+            job_sort_column: "created_at".to_string(),
+            job_sort_ascending: false,
+            job_filter: String::new(),
         }
-    });
-
-    // Set up polling for ongoing jobs every 2 seconds
-    {
-        let state = state.clone();
-        use_effect_with((), move |_| {
-            let state = state.clone();
-            
-            let poll_jobs = {
-                let state = state.clone();
-                Callback::from(move |_| {
-                    let current_state = (*state).clone();
-                    if !current_state.ongoing_jobs.is_empty() {
-                        let client = WasmSupervisorClient::new(current_state.server_url.clone());
-                        let state_clone = state.clone();
-                        
-                        spawn_local(async move {
-                            console::log!("Polling ongoing jobs:", format!("{:?}", current_state.ongoing_jobs));
-                            let mut updated_state = (*state_clone).clone();
-                            let mut jobs_to_remove = Vec::new();
-                            
-                            // Poll each ongoing job
-                            for job_id in &current_state.ongoing_jobs {
-                                match client.get_job(job_id).await {
-                                    Ok(updated_job) => {
-                                        // Find and update the job in the jobs list
-                                        if let Some(job_index) = updated_state.jobs.iter().position(|j| j.id() == *job_id) {
-                                            updated_state.jobs[job_index] = updated_job.clone();
-                                            console::log!("Updated job status for:", job_id);
-                                        }
-                                    }
-                                    Err(e) => {
-                                        console::error!("Failed to poll job:", job_id, format!("{:?}", e));
-                                        // Remove failed jobs from ongoing list
-                                        jobs_to_remove.push(job_id.clone());
-                                    }
-                                }
-                            }
-                            
-                            // Remove completed/failed jobs from ongoing list
-                            for job_id in jobs_to_remove {
-                                updated_state.ongoing_jobs.retain(|id| id != &job_id);
-                            }
-                            
-                            state_clone.set(updated_state);
-                        });
-                    }
-                })
-            };
-            
-            let interval = Interval::new(2000, move || {
-                poll_jobs.emit(());
-            });
-            
-            move || drop(interval)
-        });
     }
 
-    // Check server connection status periodically
-    {
-        let state = state.clone();
-        use_effect_with((), move |_| {
-            let state = state.clone();
-            let client_url = state.server_url.clone();
-            
-            let check_connection = {
-                let state = state.clone();
-                let client_url = client_url.clone();
-                Callback::from(move |_| {
-                    let state = state.clone();
-                    let client_url = client_url.clone();
-                    let client = WasmSupervisorClient::new(client_url.clone());
-                    spawn_local(async move {
-                        let mut current_state = (*state).clone();
-                        
-                        // Try to ping the server to check connection
-                        match client.list_runners().await {
-                            Ok(_) => {
-                                // Server is reachable, now try to load secrets if we have a session secret
-                                let mut admin_secrets = vec![];
-                                let mut user_secrets = vec![];
-                                let mut register_secrets = vec![];
-                                
-                                // Try to load secrets based on current session secret
-                                if !current_state.session_secret.is_empty() {
-                                    match current_state.session_secret_type {
-                                        SessionSecretType::Admin => {
-                                            if let Ok(secrets) = client.list_admin_secrets(&current_state.session_secret).await {
-                                                admin_secrets = secrets;
-                                            }
-                                            if let Ok(secrets) = client.list_user_secrets(&current_state.session_secret).await {
-                                                user_secrets = secrets;
-                                            }
-                                            if let Ok(secrets) = client.list_register_secrets(&current_state.session_secret).await {
-                                                register_secrets = secrets;
-                                            }
-                                        }
-                                        SessionSecretType::User => {
-                                            if let Ok(secrets) = client.list_user_secrets(&current_state.session_secret).await {
-                                                user_secrets = secrets;
-                                            }
-                                        }
-                                        SessionSecretType::Register => {
-                                            if let Ok(secrets) = client.list_register_secrets(&current_state.session_secret).await {
-                                                register_secrets = secrets;
-                                            }
-                                        }
-                                        SessionSecretType::None => {}
-                                    }
-                                }
-                                
-                                current_state.supervisor_info = Some(SupervisorInfo {
-                                    server_url: client_url.clone(),
-                                    runners_count: 0,
-                                    admin_secrets,
-                                    user_secrets,
-                                    register_secrets,
-                                });
-                            }
-                            Err(_) => {
-                                // Server is not reachable
-                                current_state.supervisor_info = None;
-                            }
-                        }
-                        
-                        state.set(current_state);
-                    });
-                })
-            };
-            
-            // Check connection immediately
-            check_connection.emit(());
-            
-            // Set up interval to check connection every 5 seconds
-            let interval = Interval::new(5000, move || {
-                check_connection.emit(());
-            });
-            
-            move || drop(interval)
-        });
-    }
-
-    // Load initial data when component mounts
-    let load_initial_data = {
-        let state = state.clone();
-        let client_url = state.server_url.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new(client_url.clone());
-            spawn_local(async move {
-                console::log!("Loading initial data...");
-                let mut current_state = (*state).clone();
-                current_state.loading = true;
-                state.set(current_state.clone());
-                
-                // Load runners and jobs in parallel
-                let runners_result = client.list_runners().await;
-                let jobs_result = client.list_jobs().await;
-                
-                match (runners_result, jobs_result) {
-                    (Ok(runner_names), Ok(job_ids)) => {
-                        console::log!("Successfully loaded runners:", format!("{:?}", runner_names));
-                        console::log!("Successfully loaded jobs:", format!("{:?}", job_ids));
-                        
-                        let runners_with_status: Vec<(String, String)> = runner_names
-                            .into_iter()
-                            .map(|name| (name, "Running".to_string()))
-                            .collect();
-                        
-                        // Fetch full job details for each job ID and identify unfinished jobs
-                        let mut jobs = Vec::new();
-                        let mut ongoing_jobs = Vec::new();
-                        
-                        for job_id in job_ids {
-                            match client.get_job(&job_id).await {
-                                Ok(job) => {
-                                    // Check if job is unfinished (you may need to adjust this logic based on your job status field)
-                                    // For now, we'll assume all jobs are ongoing until we have proper status checking
-                                    ongoing_jobs.push(job_id.clone());
-                                    jobs.push(job);
-                                }
-                                Err(e) => {
-                                    console::error!("Failed to fetch job details for:", &job_id, format!("{:?}", e));
-                                    // Create placeholder job if fetch fails
-                                    jobs.push(WasmJob::new(job_id.clone(), "Loading...".to_string(), "Unknown".to_string(), "Unknown".to_string()));
-                                }
-                            }
-                        }
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.runners = runners_with_status;
-                        updated_state.jobs = jobs;
-                        updated_state.ongoing_jobs = ongoing_jobs.clone();
-                        updated_state.loading = false;
-                        console::log!("Added ongoing jobs to polling:", format!("{:?}", ongoing_jobs));
-                        state.set(updated_state);
-                    }
-                    (Ok(runner_names), Err(jobs_err)) => {
-                        console::log!("Successfully loaded runners:", format!("{:?}", runner_names));
-                        console::error!("Failed to load jobs:", format!("{:?}", jobs_err));
-                        
-                        let runners_with_status: Vec<(String, String)> = runner_names
-                            .into_iter()
-                            .map(|name| (name, "Running".to_string()))
-                            .collect();
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.runners = runners_with_status;
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                    (Err(runners_err), Ok(job_ids)) => {
-                        console::error!("Failed to load runners:", format!("{:?}", runners_err));
-                        console::log!("Successfully loaded jobs:", format!("{:?}", job_ids));
-                        
-                        // Convert job IDs to WasmJob objects
-                        let jobs: Vec<WasmJob> = job_ids
-                            .into_iter()
-                            .map(|id| {
-                                WasmJob::new(id.clone(), "Loading...".to_string(), "Unknown".to_string(), "Unknown".to_string())
-                            })
-                            .collect();
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.jobs = jobs;
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                    (Err(runners_err), Err(jobs_err)) => {
-                        console::error!("Failed to load runners:", format!("{:?}", runners_err));
-                        console::error!("Failed to load jobs:", format!("{:?}", jobs_err));
-                        let mut updated_state = (*state).clone();
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                }
-            });
-        })
-    };
-
-    use_effect_with((), move |_| {
-        load_initial_data.emit(());
-        || ()
-    });
-
-    let on_load_runners = {
-        let state = state.clone();
-        let client_url = state.server_url.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new(client_url.clone());
-            spawn_local(async move {
-                console::log!("Loading runners...");
-                let mut current_state = (*state).clone();
-                current_state.loading = true;
-                state.set(current_state.clone());
-                
-                match client.list_runners().await {
-                    Ok(runner_names) => {
-                        console::log!("Successfully loaded runners:", format!("{:?}", runner_names));
-                        // For now, assume all runners are "Running" - we'd need a separate status call
-                        let runners_with_status: Vec<(String, String)> = runner_names
-                            .into_iter()
-                            .map(|name| (name, "Running".to_string()))
-                            .collect();
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.runners = runners_with_status;
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to load runners:", format!("{:?}", e));
-                        let mut error_state = (*state).clone();
-                        error_state.loading = false;
-                        error_state.toasts.push(Toast::error(format!("Failed to load runners: {:?}", e)));
-                        state.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-
-
-
-
-
-    let on_register_form_change = {
-        let state = state.clone();
-        Callback::from(move |(field, value): (String, String)| {
-            let mut new_form = state.register_form.clone();
-            match field.as_str() {
-                "name" => new_form.name = value,
-                "secret" => new_form.secret = value,
-                _ => {}
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::UpdateSecret(secret) => {
+                self.secret = secret;
+                true
             }
-            let new_state = AppState {
-                server_url: state.server_url.clone(),
-                runners: state.runners.clone(),
-                jobs: state.jobs.clone(),
-                ongoing_jobs: state.ongoing_jobs.clone(),
-                loading: state.loading,
-                register_form: new_form,
-                job_form: state.job_form.clone(),
-                supervisor_info: state.supervisor_info.clone(),
-                admin_secret: state.admin_secret.clone(),
-                session_secret: state.session_secret.clone(),
-                session_secret_type: state.session_secret_type.clone(),
-                ping_states: state.ping_states.clone(),
-                toasts: state.toasts.clone(),
-            };
-            state.set(new_state);
-        })
-    };
-
-    let on_register_runner = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let current_state = (*state).clone();
-            
-            // Add runner to UI immediately with "Registering" status
-            let new_runner = (
-                current_state.register_form.name.clone(),
-                "Registering".to_string(),
-            );
-            
-            let mut updated_runners = current_state.runners.clone();
-            updated_runners.push(new_runner);
-            
-            let mut temp_state = current_state.clone();
-            temp_state.runners = updated_runners;
-            
-            // Clear form and update status to "Running"
-            temp_state.register_form = RegisterForm {
-                name: String::new(),
-                secret: String::new(),
-            };
-            
-            // Update the newly added runner status to "Running"
-            if let Some(runner) = temp_state.runners.iter_mut()
-                .find(|(name, _)| name == &current_state.register_form.name) {
-                runner.1 = "Running".to_string();
+            Msg::UpdateServerUrl(url) => {
+                self.server_url = url;
+                true
             }
-            
-            state.set(temp_state);
-        })
-    };
-
-
-
-    // Admin secret change callback
-    let on_admin_secret_change = {
-        let state = state.clone();
-        Callback::from(move |(admin_secret, _secret_type): (String, SessionSecretType)| {
-            let mut new_state = (*state).clone();
-            new_state.admin_secret = admin_secret;
-            state.set(new_state);
-        })
-    };
-
-    // Job form change callback
-    let on_job_form_change = {
-        let state = state.clone();
-        Callback::from(move |(field, value): (String, String)| {
-            let mut new_form = state.job_form.clone();
-            match field.as_str() {
-                "payload" => new_form.payload = value,
-                "runner" => new_form.runner = value,
-                "executor" => new_form.executor = value,
-                _ => {}
-            }
-            let mut new_state = (*state).clone();
-            new_state.job_form = new_form;
-            state.set(new_state);
-        })
-    };
-
-    // Run job callback - now uses create_job for immediate display and polling
-    let on_run_job = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let current_state = (*state).clone();
-            let client = WasmSupervisorClient::new(current_state.server_url.clone());
-            let job_form = current_state.job_form.clone();
-            let state_clone = state.clone();
-            
-            spawn_local(async move {
-                console::log!("Creating job...");
-                
-                // Generate unique job ID client-side
-                let job_id = generate_job_id();
-                
-                // Create WasmJob from form data with client-generated ID
-                let job = WasmJob::new(
-                    job_id.clone(),
-                    job_form.payload.clone(),
-                    job_form.executor.clone(),
-                    job_form.runner.clone(),
-                );
-                
-                // Immediately add job to the list with "pending" status
-                let mut updated_state = (*state_clone).clone();
-                updated_state.jobs.push(job.clone());
-                updated_state.ongoing_jobs.push(job_id.clone());
-                // Clear the job form
-                updated_state.job_form = JobForm::default();
-                state_clone.set(updated_state);
-                console::log!("Job added to list immediately with ID:", &job_id);
-                
-                // Create the job using fire-and-forget create_job method
-                match client.create_job(current_state.session_secret.clone(), job).await {
-                    Ok(returned_job_id) => {
-                        console::log!("Job created successfully with ID:", &returned_job_id);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to create job:", format!("{:?}", e));
-                        // Remove job from ongoing jobs if creation failed
-                        let mut error_state = (*state_clone).clone();
-                        error_state.ongoing_jobs.retain(|id| id != &job_id);
-                        state_clone.set(error_state);
-                    }
+            Msg::Login => {
+                if self.secret.is_empty() {
+                    self.error = Some("API key cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
                 }
-            });
-        })
-    };
-
-    // Supervisor info loaded callback
-    let on_supervisor_info_loaded = {
-        let state = state.clone();
-        Callback::from(move |info: SupervisorInfo| {
-            let mut current_state = (*state).clone();
-            current_state.supervisor_info = Some(info);
-            state.set(current_state);
-        })
-    };
-
-    let on_add_secret = {
-        let state = state.clone();
-        Callback::from(move |(secret_type, _secret): (SessionSecretType, String)| {
-            let mut current_state = (*state).clone();
-            if let Some(ref mut info) = current_state.supervisor_info {
-                // Prompt for a new secret
-                if let Some(window) = web_sys::window() {
-                    if let Ok(Some(new_secret)) = window.prompt_with_message("Enter new secret:") {
-                        if !new_secret.is_empty() {
-                            match secret_type {
-                                SessionSecretType::Admin => {
-                                    if !info.admin_secrets.contains(&new_secret) {
-                                        info.admin_secrets.push(new_secret);
-                                    }
-                                }
-                                SessionSecretType::User => {
-                                    if !info.user_secrets.contains(&new_secret) {
-                                        info.user_secrets.push(new_secret);
-                                    }
-                                }
-                                SessionSecretType::Register => {
-                                    if !info.register_secrets.contains(&new_secret) {
-                                        info.register_secrets.push(new_secret);
-                                    }
-                                }
-                                SessionSecretType::None => {
-                                    // Do nothing for None type
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            state.set(current_state);
-        })
-    };
-
-    let on_remove_secret = {
-        let state = state.clone();
-        Callback::from(move |(secret_type, secret): (SessionSecretType, String)| {
-            let mut current_state = (*state).clone();
-            if let Some(ref mut info) = current_state.supervisor_info {
-                match secret_type {
-                    SessionSecretType::Admin => {
-                        info.admin_secrets.retain(|s| s != &secret);
-                    }
-                    SessionSecretType::User => {
-                        info.user_secrets.retain(|s| s != &secret);
-                    }
-                    SessionSecretType::Register => {
-                        info.register_secrets.retain(|s| s != &secret);
-                    }
-                    SessionSecretType::None => {
-                        // Do nothing for None type
-                    }
-                }
-            }
-            state.set(current_state);
-        })
-    };
-
-    // Remove runner callback
-    let on_remove_runner = {
-        let state = state.clone();
-        Callback::from(move |runner_id: String| {
-            let current_state = (*state).clone();
-            let client = WasmSupervisorClient::new(current_state.server_url.clone());
-            let state_clone = state.clone();
-            
-            spawn_local(async move {
-                console::log!("Removing runner:", &runner_id);
                 
-                match client.remove_runner(&runner_id).await {
-                    Ok(_) => {
-                        console::log!("Runner removed successfully");
-                        // Remove runner from the list
-                        let mut updated_state = (*state_clone).clone();
-                        updated_state.runners.retain(|(name, _)| name != &runner_id);
-                        updated_state.toasts.push(Toast::success("Runner removed successfully".to_string()));
-                        state_clone.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to remove runner:", format!("{:?}", e));
-                        let mut error_state = (*state_clone).clone();
-                        error_state.toasts.push(Toast::error(format!("Failed to remove runner: {:?}", e)));
-                        state_clone.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-
-    // Stop job callback
-    let on_stop_job = {
-        let state = state.clone();
-        Callback::from(move |job_id: String| {
-            let current_state = (*state).clone();
-            let client = WasmSupervisorClient::new(current_state.server_url.clone());
-            let state_clone = state.clone();
-            
-            spawn_local(async move {
-                console::log!("Stopping job:", &job_id);
-                
-                match client.stop_job(&job_id).await {
-                    Ok(_) => {
-                        console::log!("Job stopped successfully");
-                        // Remove job from ongoing jobs list
-                        let mut updated_state = (*state_clone).clone();
-                        updated_state.ongoing_jobs.retain(|id| id != &job_id);
-                        state_clone.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to stop job:", format!("{:?}", e));
-                        let mut error_state = (*state_clone).clone();
-                        error_state.toasts.push(Toast::error(format!("Failed to stop job: {:?}", e)));
-                        state_clone.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-
-    // Delete job callback
-    let on_delete_job = {
-        let state = state.clone();
-        Callback::from(move |job_id: String| {
-            let current_state = (*state).clone();
-            let client = WasmSupervisorClient::new(current_state.server_url.clone());
-            let state_clone = state.clone();
-            
-            spawn_local(async move {
-                console::log!("Deleting job:", &job_id);
-                
-                match client.delete_job(&job_id).await {
-                    Ok(_) => {
-                        console::log!("Job deleted successfully");
-                        // Remove job from both jobs list and ongoing jobs list
-                        let mut updated_state = (*state_clone).clone();
-                        updated_state.jobs.retain(|job| job.id() != job_id);
-                        updated_state.ongoing_jobs.retain(|id| id != &job_id);
-                        state_clone.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to delete job:", format!("{:?}", e));
-                        let mut error_state = (*state_clone).clone();
-                        error_state.toasts.push(Toast::error(format!("Failed to delete job: {:?}", e)));
-                        state_clone.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-
-    // Toast dismiss callback
-    let on_toast_dismiss = {
-        let state = state.clone();
-        Callback::from(move |toast_id: String| {
-            let mut current_state = (*state).clone();
-            current_state.toasts.retain(|t| t.id != toast_id);
-            state.set(current_state);
-        })
-    };
-
-    // Add toast callback
-    let add_toast = {
-        let state = state.clone();
-        Callback::from(move |toast: Toast| {
-            let mut current_state = (*state).clone();
-            current_state.toasts.push(toast);
-            state.set(current_state);
-        })
-    };
-
-    // Session secret change callback
-    let on_session_secret_change = {
-        let state = state.clone();
-        Callback::from(move |(secret, secret_type): (String, SessionSecretType)| {
-            let mut current_state = (*state).clone();
-            current_state.session_secret = secret.clone();
-            current_state.session_secret_type = secret_type.clone();
-            
-            // If we have a session secret, trigger API call to load secrets
-            if !secret.is_empty() {
-                let client = WasmSupervisorClient::new(current_state.server_url.clone());
-                let state_clone = state.clone();
+                // Create client and verify auth
+                let client = WasmSupervisorClient::new(self.server_url.clone());
+                let key = self.secret.clone();
+                let link = ctx.link().clone();
                 
                 spawn_local(async move {
-                    let mut updated_state = (*state_clone).clone();
-                    
-                    // Try to load secrets from API based on secret type
-                    match client.list_runners().await {
-                        Ok(_) => {
-                            let mut admin_secrets = vec![];
-                            let mut user_secrets = vec![];
-                            let mut register_secrets = vec![];
+                    match client.auth_verify(key).await {
+                        Ok(js_value) => {
+                            // Parse JsValue to get auth response fields
+                            let valid = js_sys::Reflect::get(&js_value, &"valid".into())
+                                .ok()
+                                .and_then(|v| v.as_bool())
+                                .unwrap_or(false);
                             
-                            // Load secrets based on secret type
-                            match secret_type {
-                                SessionSecretType::Admin => {
-                                    if let Ok(secrets) = client.list_admin_secrets(&secret).await {
-                                        admin_secrets = secrets;
-                                    }
-                                    if let Ok(secrets) = client.list_user_secrets(&secret).await {
-                                        user_secrets = secrets;
-                                    }
-                                    if let Ok(secrets) = client.list_register_secrets(&secret).await {
-                                        register_secrets = secrets;
-                                    }
-                                }
-                                SessionSecretType::User => {
-                                    if let Ok(secrets) = client.list_user_secrets(&secret).await {
-                                        user_secrets = secrets;
-                                    }
-                                }
-                                SessionSecretType::Register => {
-                                    if let Ok(secrets) = client.list_register_secrets(&secret).await {
-                                        register_secrets = secrets;
-                                    }
-                                }
-                                SessionSecretType::None => {}
+                            if valid {
+                                let name = js_sys::Reflect::get(&js_value, &"name".into())
+                                    .ok()
+                                    .and_then(|v| v.as_string())
+                                    .unwrap_or_default();
+                                let scope = js_sys::Reflect::get(&js_value, &"scope".into())
+                                    .ok()
+                                    .and_then(|v| v.as_string())
+                                    .unwrap_or_default();
+                                
+                                link.send_message(Msg::AuthVerified(Ok((name, scope))));
+                            } else {
+                                link.send_message(Msg::AuthVerified(Err("Invalid API key".to_string())));
                             }
-                            
-                            updated_state.supervisor_info = Some(SupervisorInfo {
-                                server_url: updated_state.server_url.clone(),
-                                runners_count: 0,
-                                admin_secrets,
-                                user_secrets,
-                                register_secrets,
-                            });
                         }
                         Err(e) => {
-                            updated_state.supervisor_info = None;
-                            // Add error toast
-                            let error_msg = format!("Failed to connect to supervisor: {:?}", e);
-                            updated_state.toasts.push(Toast::error(error_msg));
+                            link.send_message(Msg::AuthVerified(Err(format!("Auth failed: {:?}", e))));
                         }
                     }
-                    
-                    state_clone.set(updated_state);
                 });
-            }
-            
-            state.set(current_state);
-        })
-    };
-
-    // Run job callback
-    let on_run_job = {
-        let state = state.clone();
-        Callback::from(move |(runner_id, payload): (String, String)| {
-            let current_state = (*state).clone();
-            let client = WasmSupervisorClient::new(current_state.server_url.clone());
-            let state_clone = state.clone();
-            
-            // Set ping state to waiting
-            {
-                let mut updated_state = (*state_clone).clone();
-                updated_state.ping_states.insert(runner_id.clone(), PingState::Waiting);
-                state_clone.set(updated_state);
-            }
-            
-            spawn_local(async move {
-                console::log!("Running job on runner:", &runner_id, "with payload:", &payload);
                 
-                // Use session secret to create job with payload
-                let job = WasmJob::new(
-                    generate_job_id(),
-                    payload.clone(),
-                    "default".to_string(),
-                    runner_id.clone()
-                );
-                
-                match client.run_job(current_state.session_secret, job).await {
-                    Ok(job_id) => {
-                        console::log!("Job created successfully:", &job_id);
-                        // Set ping state to success with job ID
-                        let mut success_state = (*state_clone).clone();
-                        success_state.ping_states.insert(runner_id.clone(), PingState::Success(format!("Job created: {}", job_id)));
-                        state_clone.set(success_state);
+                self.loading = true;
+                true
+            }
+            Msg::AuthVerified(result) => {
+                self.loading = false;
+                match result {
+                    Ok((name, scope)) => {
+                        let client = WasmSupervisorClient::with_secret(
+                            self.server_url.clone(),
+                            self.secret.clone(),
+                        );
                         
-                        // Reset to idle after 3 seconds
-                        let state_reset = state_clone.clone();
-                        let runner_id_reset = runner_id.clone();
-                        spawn_local(async move {
-                            gloo::timers::future::TimeoutFuture::new(3000).await;
-                            let mut reset_state = (*state_reset).clone();
-                            reset_state.ping_states.insert(runner_id_reset, PingState::Idle);
-                            state_reset.set(reset_state);
-                        });
+                        self.client = Some(client);
+                        self.user_name = name;
+                        self.user_scope = scope;
+                        self.state = AppState::Dashboard;
+                        self.error = None;
+                        self.connected = true;
+                        
+                        // Load runners, jobs, and keys after login
+                        ctx.link().send_message(Msg::LoadRunners);
+                        ctx.link().send_message(Msg::LoadJobs);
+                        ctx.link().send_message(Msg::LoadKeys);
                     }
                     Err(e) => {
-                        console::error!("Failed to create job:", format!("{:?}", e));
-                        // Set ping state to error
-                        let mut error_state = (*state_clone).clone();
-                        let error_msg = format!("Error: {:?}", e);
-                        error_state.ping_states.insert(runner_id.clone(), PingState::Error(error_msg));
-                        state_clone.set(error_state);
+                        self.error = Some(e);
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::Logout => {
+                self.client = None;
+                self.secret.clear();
+                self.state = AppState::Login;
+                self.error = None;
+                self.runners.clear();
+                self.connected = false;
+                true
+            }
+            Msg::SetError(error) => {
+                self.error = Some(error);
+                self.loading = false;
+                self.connected = false;
+                true
+            }
+            Msg::ClearError => {
+                self.error = None;
+                self._toast_timeout = None;
+                true
+            }
+            Msg::LoadRunners => {
+                if let Some(client) = &self.client {
+                    self.loading = true;
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    
+                    spawn_local(async move {
+                        match client.list_runners().await {
+                            Ok(runners) => {
+                                link.send_message(Msg::RunnersLoaded(Ok(runners)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::RunnersLoaded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::RunnersLoaded(result) => {
+                self.loading = false;
+                match result {
+                    Ok(runners) => {
+                        self.runners = runners;
+                        self.error = None;
+                        self.connected = true;
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to load runners: {}", e));
+                        self.connected = false;
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::LoadJobs => {
+                if let Some(client) = &self.client {
+                    self.loading = true;
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    
+                    spawn_local(async move {
+                        match client.list_jobs().await {
+                            Ok(mut jobs) => {
+                                // Fetch status for each job from Redis
+                                for job in &mut jobs {
+                                    if let Some(job_id) = job.get("id").and_then(|v| v.as_str()) {
+                                        match client.get_job_status(job_id).await {
+                                            Ok(status_response) => {
+                                                if let Some(status) = status_response.get("status").and_then(|v| v.as_str()) {
+                                                    if let Some(obj) = job.as_object_mut() {
+                                                        obj.insert("status".to_string(), serde_json::Value::String(status.to_string()));
+                                                    }
+                                                }
+                                            }
+                                            Err(_) => {
+                                                // Job not found in Redis, likely not started yet
+                                                if let Some(obj) = job.as_object_mut() {
+                                                    obj.insert("status".to_string(), serde_json::Value::String("queued".to_string()));
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                                link.send_message(Msg::JobsLoaded(Ok(jobs)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::JobsLoaded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::JobsLoaded(result) => {
+                self.loading = false;
+                match result {
+                    Ok(jobs) => {
+                        self.jobs = jobs;
+                        // Don't clear error if it starts with ❌ (job status error)
+                        // This allows the error toast to display even after reload
+                        if let Some(ref err) = self.error {
+                            if !err.starts_with("❌") {
+                                self.error = None;
+                            }
+                        } else {
+                            self.error = None;
+                        }
+                        self.connected = true;
+                        
+                        // Check polling jobs and remove those that reached terminal state
+                        let mut jobs_to_remove = Vec::new();
+                        for job_id in &self.polling_jobs {
+                            if let Some(job) = self.jobs.iter().find(|j| {
+                                j.get("id").and_then(|v| v.as_str()).unwrap_or("") == job_id
+                            }) {
+                                let status = job.get("status").and_then(|v| v.as_str()).unwrap_or("queued");
+                                if Self::is_terminal_status(status) {
+                                    jobs_to_remove.push(job_id.clone());
+                                }
+                            }
+                        }
+                        for job_id in jobs_to_remove {
+                            self.polling_jobs.remove(&job_id);
+                        }
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to load jobs: {}", e));
+                        self.connected = false;
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::LoadKeys => {
+                if let Some(client) = &self.client {
+                    self.loading = true;
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    
+                    spawn_local(async move {
+                        match client.auth_list_keys().await {
+                            Ok(keys_value) => {
+                                // Convert JsValue to Vec<serde_json::Value>
+                                let keys: Vec<serde_json::Value> = serde_wasm_bindgen::from_value(keys_value)
+                                    .unwrap_or_else(|_| Vec::new());
+                                link.send_message(Msg::KeysLoaded(Ok(keys)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::KeysLoaded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::KeysLoaded(result) => {
+                self.loading = false;
+                match result {
+                    Ok(keys) => {
+                        self.keys = keys;
+                        self.connected = true;
+                    }
+                    Err(e) => {
+                        log::warn!("Failed to load keys: {}", e);
+                        // Don't show error toast for keys - might not have permission
+                    }
+                }
+                true
+            }
+            Msg::UpdateNewRunnerName(name) => {
+                self.new_runner_name = name;
+                true
+            }
+            Msg::AddRunner => {
+                if self.new_runner_name.is_empty() {
+                    self.error = Some("Runner name cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                
+                if let Some(client) = &self.client {
+                    self.adding_runner = true;
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    let name = self.new_runner_name.clone();
+                    
+                    spawn_local(async move {
+                        match client.register_runner(name).await {
+                            Ok(_) => {
+                                link.send_message(Msg::RunnerAdded(Ok(())));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::RunnerAdded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::RunnerAdded(result) => {
+                self.adding_runner = false;
+                match result {
+                    Ok(_) => {
+                        self.new_runner_name.clear();
+                        self.error = None;
+                        // Reload runners
+                        ctx.link().send_message(Msg::LoadRunners);
+                    }
+                    Err(e) => {
+                        let error_msg = format!("Failed to add runner: {}", e);
+                        log::error!("Setting error: {}", error_msg);
+                        self.error = Some(error_msg);
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::ToggleSidebarView(view) => {
+                match view {
+                    SidebarView::Runners => {
+                        ctx.link().send_message(Msg::LoadRunners);
+                    }
+                    SidebarView::Keys => {}
+                }
+                self.sidebar_view = view;
+                // Clear selections when switching views
+                self.selected_runner = None;
+                self.selected_key = None;
+                true
+            }
+            Msg::SelectRunner(runner) => {
+                self.selected_runner = runner;
+                self.selected_key = None; // Clear key selection
+                true
+            }
+            Msg::SelectKey(key) => {
+                self.selected_key = key;
+                self.selected_runner = None; // Clear runner selection
+                true
+            }
+            Msg::UpdateNewKeyName(name) => {
+                self.new_key_name = name;
+                true
+            }
+            Msg::UpdateNewKeyScope(scope) => {
+                self.new_key_scope = scope;
+                true
+            }
+            Msg::AddKey => {
+                if self.new_key_name.is_empty() {
+                    self.error = Some("Key name cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                
+                self.adding_key = true;
+                
+                if let Some(client) = &self.client {
+                    let client = client.clone();
+                    let name = self.new_key_name.clone();
+                    let scope = self.new_key_scope.clone();
+                    let link = ctx.link().clone();
+                    
+                    spawn_local(async move {
+                        match client.auth_create_key(name, scope).await {
+                            Ok(_) => {
+                                link.send_message(Msg::KeyAdded(Ok(())));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::KeyAdded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::KeyAdded(result) => {
+                self.adding_key = false;
+                match result {
+                    Ok(_) => {
+                        self.new_key_name.clear();
+                        self.error = None;
+                        // Reload keys list
+                        ctx.link().send_message(Msg::LoadKeys);
+                    }
+                    Err(e) => {
+                        let error_msg = format!("Failed to create key: {}", e);
+                        log::error!("Setting error: {}", error_msg);
+                        self.error = Some(error_msg);
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::ShowJobForm => {
+                self.show_job_form = true;
+                // Generate a new job ID
+                self.job_id = format!("job-{}", uuid::Uuid::new_v4());
+                // Pre-select runner if one is selected
+                if let Some(ref runner) = self.selected_runner {
+                    self.job_runner = runner.clone();
+                } else if !self.runners.is_empty() {
+                    self.job_runner = self.runners[0].clone();
+                }
+                true
+            }
+            Msg::HideJobForm => {
+                self.show_job_form = false;
+                self.job_id.clear();
+                self.job_payload.clear();
+                self.job_runner.clear();
+                self.job_timeout = "30".to_string();
+                self.job_signatures.clear();
+                self.job_private_key.clear();
+                true
+            }
+            Msg::UpdateJobId(id) => {
+                self.job_id = id;
+                true
+            }
+            Msg::UpdateJobPayload(payload) => {
+                self.job_payload = payload;
+                true
+            }
+            Msg::UpdateJobRunner(runner) => {
+                self.job_runner = runner;
+                true
+            }
+            Msg::UpdateJobTimeout(timeout) => {
+                self.job_timeout = timeout;
+                true
+            }
+            Msg::UpdateJobPrivateKey(key) => {
+                self.job_private_key = key;
+                true
+            }
+            Msg::SignJob => {
+                // Validate fields needed for signing
+                if self.job_id.is_empty() || self.job_payload.is_empty() || self.job_runner.is_empty() {
+                    self.error = Some("Please fill in Job ID, Payload, and Runner before signing".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                
+                if self.job_private_key.is_empty() {
+                    self.error = Some("Please enter a private key to sign".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                
+                // Parse timeout
+                let timeout = match self.job_timeout.parse::<u64>() {
+                    Ok(t) => t,
+                    Err(_) => {
+                        self.error = Some("Timeout must be a valid number".to_string());
+                        self.start_toast_timeout(ctx);
+                        return true;
+                    }
+                };
+                
+                // Create canonical representation using the WASM utility
+                use hero_supervisor_openrpc_client::create_job_canonical_repr;
+                
+                match create_job_canonical_repr(
+                    self.job_id.clone(),
+                    "admin-ui".to_string(),
+                    "web".to_string(),
+                    self.job_payload.clone(),
+                    self.job_runner.clone(),
+                    "osis".to_string(),
+                    timeout,
+                    "{}".to_string(),
+                ) {
+                    Ok(canonical) => {
+                        // Sign the canonical representation
+                        use hero_supervisor_openrpc_client::sign_job_canonical;
+                        
+                        match sign_job_canonical(canonical, self.job_private_key.clone()) {
+                            Ok(sig_js) => {
+                                // Convert JsValue to Rust types
+                                if let Ok(sig_obj) = serde_wasm_bindgen::from_value::<serde_json::Value>(sig_js) {
+                                    if let (Some(pubkey), Some(signature)) = (
+                                        sig_obj.get("public_key").and_then(|v| v.as_str()),
+                                        sig_obj.get("signature").and_then(|v| v.as_str())
+                                    ) {
+                                        self.job_signatures.push((pubkey.to_string(), signature.to_string()));
+                                        self.job_private_key.clear(); // Clear the private key after signing
+                                        self.error = Some(format!("✅ Signature added (pubkey: {}...)", &pubkey[..8]));
+                                        self.start_toast_timeout(ctx);
+                                    }
+                                }
+                            }
+                            Err(e) => {
+                                self.error = Some(format!("Failed to sign: {:?}", e));
+                                self.start_toast_timeout(ctx);
+                            }
+                        }
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to create canonical representation: {:?}", e));
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                
+                true
+            }
+            Msg::RemoveSignature(index) => {
+                if index < self.job_signatures.len() {
+                    self.job_signatures.remove(index);
+                }
+                true
+            }
+            Msg::CreateJob => {
+                // Validate required fields
+                if self.job_id.is_empty() {
+                    self.error = Some("Job ID cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                if self.job_runner.is_empty() {
+                    self.error = Some("Runner cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                if self.job_payload.is_empty() {
+                    self.error = Some("Payload cannot be empty".to_string());
+                    self.start_toast_timeout(ctx);
+                    return true;
+                }
+                
+                // Parse timeout
+                let timeout = match self.job_timeout.parse::<u64>() {
+                    Ok(t) => t,
+                    Err(_) => {
+                        self.error = Some("Timeout must be a valid number".to_string());
+                        self.start_toast_timeout(ctx);
+                        return true;
+                    }
+                };
+                
+                self.creating_job = true;
+                
+                if let Some(client) = &self.client {
+                    let client = client.clone();
+                    let job_id = self.job_id.clone();
+                    let payload = self.job_payload.clone();
+                    let runner = self.job_runner.clone();
+                    let signatures = self.job_signatures.clone();
+                    let link = ctx.link().clone();
+                    
+                    spawn_local(async move {
+                        // Convert signatures to JSON format
+                        let signatures_json: Vec<serde_json::Value> = signatures.iter().map(|(pubkey, sig)| {
+                            serde_json::json!({
+                                "public_key": pubkey,
+                                "signature": sig
+                            })
+                        }).collect();
+                        
+                        // Build the job object
+                        let job = serde_json::json!({
+                            "id": job_id,
+                            "caller_id": "admin-ui",
+                            "context_id": "web",
+                            "payload": payload,
+                            "runner": runner,
+                            "executor": "osis",
+                            "timeout": timeout,
+                            "env_vars": {},
+                            "created_at": chrono::Utc::now().to_rfc3339(),
+                            "updated_at": chrono::Utc::now().to_rfc3339(),
+                            "signatures": signatures_json
+                        });
+                        
+                        // Convert to JsValue and call create_job
+                        let job_js = serde_wasm_bindgen::to_value(&job).unwrap();
+                        
+                        match client.create_job(job_js).await {
+                            Ok(job_id) => {
+                                link.send_message(Msg::JobCreated(Ok(job_id)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::JobCreated(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::JobCreated(result) => {
+                self.creating_job = false;
+                match result {
+                    Ok(job_id) => {
+                        self.show_job_form = false;
+                        // Clear all form fields
+                        self.job_id.clear();
+                        self.job_payload.clear();
+                        self.job_runner.clear();
+                        self.job_timeout = "30".to_string();
+                        self.job_signatures.clear();
+                        self.job_private_key.clear();
+                        self.error = Some(format!("✅ Job created successfully: {}", job_id));
+                        self.start_toast_timeout(ctx);
+                        // Reload jobs to show the new one
+                        ctx.link().send_message(Msg::LoadJobs);
+                    }
+                    Err(e) => {
+                        let error_msg = format!("Failed to create job: {}", e);
+                        log::error!("Setting error: {}", error_msg);
+                        self.error = Some(error_msg);
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::SortJobs(column) => {
+                if self.job_sort_column == column {
+                    self.job_sort_ascending = !self.job_sort_ascending;
+                } else {
+                    self.job_sort_column = column;
+                    self.job_sort_ascending = true;
+                }
+                true
+            }
+            Msg::FilterJobs(filter) => {
+                self.job_filter = filter;
+                true
+            }
+            Msg::RunJob(job_id) => {
+                if let Some(client) = &self.client {
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    let job_id_clone = job_id.clone();
+                    
+                    spawn_local(async move {
+                        // Call job.start endpoint to queue the job
+                        match client.start_job(&job_id_clone).await {
+                            Ok(_) => {
+                                link.send_message(Msg::JobRan(Ok(job_id_clone)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::JobRan(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::JobRan(result) => {
+                match result {
+                    Ok(job_id) => {
+                        self.error = Some(format!("✅ Job {} started successfully", job_id));
+                        self.start_toast_timeout(ctx);
+                        // Add job to polling list
+                        self.polling_jobs.insert(job_id);
+                        // Start polling
+                        self.start_status_polling(ctx);
+                        // Reload jobs to update status
+                        ctx.link().send_message(Msg::LoadJobs);
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to run job: {}", e));
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::DeleteJob(job_id) => {
+                if let Some(client) = &self.client {
+                    let client = client.clone();
+                    let link = ctx.link().clone();
+                    let job_id_clone = job_id.clone();
+                    
+                    spawn_local(async move {
+                        match client.delete_job(&job_id_clone).await {
+                            Ok(_) => {
+                                link.send_message(Msg::JobDeleted(Ok(job_id_clone)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::JobDeleted(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::JobDeleted(result) => {
+                match result {
+                    Ok(job_id) => {
+                        self.error = Some(format!("✅ Job {} deleted successfully", job_id));
+                        self.start_toast_timeout(ctx);
+                        // Reload jobs to remove deleted job
+                        ctx.link().send_message(Msg::LoadJobs);
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to delete job: {}", e));
+                        self.start_toast_timeout(ctx);
+                    }
+                }
+                true
+            }
+            Msg::ViewJobLogs(job_id) => {
+                log::info!("View logs for job: {}", job_id);
+                // TODO: Implement view logs
+                self.error = Some(format!("View logs for {} - Not implemented yet", job_id));
+                self.start_toast_timeout(ctx);
+                true
+            }
+            Msg::PollJobStatus => {
+                if self.polling_jobs.is_empty() {
+                    log::info!("No jobs to poll, stopping");
+                    return false;
+                }
+                
+                log::info!("Polling status for {} jobs", self.polling_jobs.len());
+                
+                // Poll status for each job being tracked
+                if let Some(client) = &self.client {
+                    for job_id in self.polling_jobs.clone() {
+                        let client = client.clone();
+                        let link = ctx.link().clone();
+                        let job_id_clone = job_id.clone();
                         
-                        // Reset to idle after 3 seconds
-                        let state_reset = state_clone.clone();
-                        let runner_id_reset = runner_id.clone();
                         spawn_local(async move {
-                            gloo::timers::future::TimeoutFuture::new(3000).await;
-                            let mut reset_state = (*state_reset).clone();
-                            reset_state.ping_states.insert(runner_id_reset, PingState::Idle);
-                            state_reset.set(reset_state);
+                            match client.get_job_status(&job_id_clone).await {
+                                Ok(status_response) => {
+                                    if let Some(status) = status_response.get("status").and_then(|v| v.as_str()) {
+                                        link.send_message(Msg::JobStatusUpdated(job_id_clone, status.to_string()));
+                                    }
+                                }
+                                Err(e) => {
+                                    let error_msg = format!("{:?}", e);
+                                    link.send_message(Msg::JobStatusError(job_id_clone, error_msg));
+                                }
+                            }
                         });
                     }
                 }
-            });
-        })
-    };
-
-    // Load initial data
-    use_effect_with((), {
-        let on_load_runners = on_load_runners.clone();
-        move |_| {
-            on_load_runners.emit(());
-            || ()
-        }
-    });
-
-    html! {
-        <div class="bg-dark min-vh-100">
-            <div class="container-fluid h-100">
-                <div class="row g-0 h-100">
-                    <Sidebar 
-                        server_url={state.server_url.clone()}
-                        supervisor_info={state.supervisor_info.clone()}
-                        session_secret={state.session_secret.clone()}
-                        session_secret_type={state.session_secret_type.clone()}
-                        on_session_secret_change={on_session_secret_change}
-                        on_supervisor_info_loaded={on_supervisor_info_loaded}
-                        on_add_secret={on_add_secret}
-                        on_remove_secret={on_remove_secret}
-                    />
+                
+                // Don't schedule next poll here - let JobStatusUpdated handle it
+                // This prevents polling from stopping prematurely
+                true
+            }
+            Msg::JobStatusUpdated(job_id, status) => {
+                log::info!("Job status updated: {} -> {}", job_id, status);
+                
+                // Update the job status in the jobs list
+                let mut found = false;
+                if let Some(job) = self.jobs.iter_mut().find(|j| {
+                    j.get("id").and_then(|v| v.as_str()).unwrap_or("") == job_id
+                }) {
+                    if let Some(obj) = job.as_object_mut() {
+                        let old_status = obj.get("status").and_then(|v| v.as_str()).unwrap_or("unknown").to_string();
+                        obj.insert("status".to_string(), serde_json::Value::String(status.clone()));
+                        found = true;
+                        log::info!("Updated job {} status: {} -> {}", job_id, old_status, status);
+                    }
+                }
+                
+                if !found {
+                    log::warn!("Job {} not found in jobs list for status update", job_id);
+                    // Job might not be in list yet, reload to get it
+                    ctx.link().send_message(Msg::LoadJobs);
+                }
+                
+                // If job reached terminal state, remove from polling list
+                if Self::is_terminal_status(&status) {
+                    log::info!("Job {} reached terminal state: {}", job_id, status);
+                    self.polling_jobs.remove(&job_id);
+                    // Don't reload jobs here - the status update above is sufficient
+                    // jobs.list returns from DB which doesn't have status anyway
+                }
+                
+                // Always schedule next poll if there are still jobs to poll
+                // This ensures continuous polling regardless of which job updated
+                if !self.polling_jobs.is_empty() {
+                    self.start_status_polling(ctx);
+                }
+                
+                true
+            }
+            Msg::JobStatusError(job_id, error) => {
+                // Stop polling this job
+                self.polling_jobs.remove(&job_id);
+                
+                // Show error toast (starts with ❌ so it won't be cleared by JobsLoaded)
+                self.error = Some(format!("❌ Job {}: {}", 
+                    &job_id[..8.min(job_id.len())], 
+                    error
+                ));
+                self.start_toast_timeout(ctx);
+                
+                // Reload jobs list to sync state (error will be preserved)
+                ctx.link().send_message(Msg::LoadJobs);
+                true
+            }
+            Msg::ViewJobOutput(job_id) => {
+                log::info!("Viewing output for job: {}", job_id);
+                self.viewing_job_output = Some(job_id.clone());
+                self.job_output = None; // Clear previous output
+                
+                if let Some(client) = &self.client {
+                    let client = client.clone();
+                    let link = ctx.link().clone();
                     
-                    <main class="col-md-9 col-lg-10 overflow-auto h-100">
-                    <div class="p-4 main-content">
-                        <Runners 
-                            server_url={state.server_url.clone()}
-                            runners={state.runners.clone()}
-                            register_form={state.register_form.clone()}
-                            ping_states={state.ping_states.clone()}
-                            on_register_form_change={on_register_form_change}
-                            on_register_runner={on_register_runner}
-                            on_load_runners={on_load_runners.clone()}
-                            on_remove_runner={on_remove_runner}
-                            session_secret={state.session_secret.clone()}
-                            on_run_job={on_run_job.clone()}
-                        />
-                        
-                        <Jobs 
-                            jobs={state.jobs.clone()}
-                            server_url={state.server_url.clone()}
-                            job_form={state.job_form.clone()}
-                            runners={state.runners.clone()}
-                            on_job_form_change={on_job_form_change}
-                            on_run_job={on_run_job}
-                            on_stop_job={on_stop_job}
-                            on_delete_job={on_delete_job}
-                        />
-                        
-                        // Floating refresh button
-                        <button class="btn btn-primary position-fixed" style="bottom: 20px; right: 20px; z-index: 1000;" onclick={on_load_runners.reform(|_| ())}>
-                            {"↻"}
-                        </button>
-                    </div>
-                    </main>
-                </div>
+                    spawn_local(async move {
+                        match client.get_job_result(&job_id).await {
+                            Ok(result) => {
+                                // Extract the result string from the response
+                                let output = if let Some(result_str) = result.get("result").and_then(|v| v.as_str()) {
+                                    result_str.to_string()
+                                } else {
+                                    format!("{}", result)
+                                };
+                                link.send_message(Msg::JobOutputLoaded(Ok(output)));
+                            }
+                            Err(e) => {
+                                link.send_message(Msg::JobOutputLoaded(Err(format!("{:?}", e))));
+                            }
+                        }
+                    });
+                }
+                true
+            }
+            Msg::JobOutputLoaded(result) => {
+                match result {
+                    Ok(output) => {
+                        self.job_output = Some(output);
+                    }
+                    Err(e) => {
+                        self.error = Some(format!("Failed to load job output: {}", e));
+                        self.start_toast_timeout(ctx);
+                        self.viewing_job_output = None;
+                    }
+                }
+                true
+            }
+            Msg::CloseJobOutput => {
+                self.viewing_job_output = None;
+                self.job_output = None;
+                true
+            }
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="app">
+                {
+                    if self.state == AppState::Dashboard {
+                        self.view_header(ctx)
+                    } else {
+                        html! {}
+                    }
+                }
+                
+                <main class="app-main">
+                    {
+                        match self.state {
+                            AppState::Login => self.view_login(ctx),
+                            AppState::Dashboard => self.view_dashboard(ctx),
+                        }
+                    }
+                </main>
+                
+                // Toast at bottom
+                {
+                    if let Some(error) = &self.error {
+                        log::info!("Rendering toast with error: {}", error);
+                        html! {
+                            <div class="toast-container">
+                                <div class="toast error-toast show">
+                                    <span>{ error }</span>
+                                    <button onclick={ctx.link().callback(|_| Msg::ClearError)}>{ "×" }</button>
+                                </div>
+                            </div>
+                        }
+                    } else {
+                        html! {}
+                    }
+                }
+                
+                // Job output modal
+                {
+                    if let Some(job_id) = &self.viewing_job_output {
+                        html! {
+                            <div class="modal-overlay" onclick={ctx.link().callback(|_| Msg::CloseJobOutput)}>
+                                <div class="modal-content" onclick={|e: MouseEvent| e.stop_propagation()}>
+                                    <div class="modal-header">
+                                        <h3>{ format!("Job Output: {}", &job_id[..12.min(job_id.len())]) }</h3>
+                                        <button class="modal-close" onclick={ctx.link().callback(|_| Msg::CloseJobOutput)}>{ "×" }</button>
+                                    </div>
+                                    <div class="modal-body">
+                                        {
+                                            if let Some(output) = &self.job_output {
+                                                html! {
+                                                    <pre class="job-output">{ output }</pre>
+                                                }
+                                            } else {
+                                                html! {
+                                                    <div class="loading-spinner">{ "Loading output..." }</div>
+                                                }
+                                            }
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+                        }
+                    } else {
+                        html! {}
+                    }
+                }
             </div>
-            
-            // Toast notifications
-            <ToastContainer 
-                toasts={state.toasts.clone()}
-                on_dismiss={on_toast_dismiss}
-            />
-        </div>
+        }
+    }
+}
+
+impl App {
+    fn start_toast_timeout(&mut self, ctx: &Context<Self>) {
+        let link = ctx.link().clone();
+        self._toast_timeout = Some(Timeout::new(5000, move || {
+            link.send_message(Msg::ClearError);
+        }));
+    }
+    
+    fn is_terminal_status(status: &str) -> bool {
+        matches!(status, "finished" | "error" | "stopped")
+    }
+    
+    fn start_status_polling(&mut self, ctx: &Context<Self>) {
+        let link = ctx.link().clone();
+        self._status_poll_timeout = Some(Timeout::new(2000, move || {
+            link.send_message(Msg::PollJobStatus);
+        }));
+    }
+    
+    fn view_header(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <header class="app-header">
+                <div class="header-island">
+                    <div class="server-info">
+                        <span class="server-label">{ "Server" }</span>
+                        <span class="server-url">{ &self.server_url }</span>
+                        <span class={classes!("status-dot", if self.connected { "connected" } else { "disconnected" })}>
+                        </span>
+                    </div>
+                </div>
+                
+                <div class="header-island">
+                    <div class="user-info">
+                        <span class="user-name">{ &self.user_name }</span>
+                        <span class="user-scope">{ &self.user_scope }</span>
+                    </div>
+                    <button onclick={ctx.link().callback(|_| Msg::Logout)} class="logout-btn">
+                        { "⎋" }
+                    </button>
+                </div>
+            </header>
+        }
+    }
+    
+    fn view_login(&self, ctx: &Context<Self>) -> Html {
+        let on_secret_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateSecret(input.value())
+        });
+        
+        let on_url_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateServerUrl(input.value())
+        });
+        
+        let on_submit = ctx.link().callback(|e: SubmitEvent| {
+            e.prevent_default();
+            Msg::Login
+        });
+        
+        html! {
+            <div class="login-container">
+                <div class="login-card">
+                    <h2>{ "Admin Login" }</h2>
+                    <form onsubmit={on_submit}>
+                        <div class="form-group">
+                            <label for="server-url">{ "Server URL" }</label>
+                            <input
+                                type="text"
+                                id="server-url"
+                                value={self.server_url.clone()}
+                                oninput={on_url_input}
+                                placeholder="http://127.0.0.1:3030"
+                            />
+                        </div>
+                        
+                        <div class="form-group">
+                            <label for="secret">{ "API Key" }</label>
+                            <input
+                                type="password"
+                                id="secret"
+                                value={self.secret.clone()}
+                                oninput={on_secret_input}
+                                placeholder="Enter your API key"
+                                autofocus=true
+                                disabled={self.loading}
+                            />
+                        </div>
+                        
+                        <button type="submit" class="btn-primary" disabled={self.loading}>
+                            { if self.loading { "Verifying..." } else { "Login" } }
+                        </button>
+                    </form>
+                </div>
+            </div>
+        }
+    }
+    
+    fn view_dashboard(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="dashboard">
+                // Sidebar Island with Toggle
+                <div class="sidebar-island">
+                    // Toggle buttons at top
+                    <div class="sidebar-toggle">
+                        <button 
+                            class={if self.sidebar_view == SidebarView::Runners { "toggle-btn active" } else { "toggle-btn" }}
+                            onclick={ctx.link().callback(|_| Msg::ToggleSidebarView(SidebarView::Runners))}
+                        >
+                            { "Runners" }
+                        </button>
+                        <button 
+                            class={if self.sidebar_view == SidebarView::Keys { "toggle-btn active" } else { "toggle-btn" }}
+                            onclick={ctx.link().callback(|_| Msg::ToggleSidebarView(SidebarView::Keys))}
+                        >
+                            { "Keys" }
+                        </button>
+                    </div>
+                    
+                    // Content based on selected view
+                    {
+                        match self.sidebar_view {
+                            SidebarView::Runners => self.view_runners_sidebar(ctx),
+                            SidebarView::Keys => self.view_keys_sidebar(ctx),
+                        }
+                    }
+                </div>
+                
+                // Main Content Island - Jobs
+                <div class="content-island">
+                    <div class="content-header">
+                        <h2>{ "Jobs" }</h2>
+                        <input 
+                            type="text"
+                            placeholder="Filter jobs..."
+                            class="filter-input"
+                            value={self.job_filter.clone()}
+                            oninput={ctx.link().callback(|e: InputEvent| {
+                                let input: HtmlInputElement = e.target_unchecked_into();
+                                Msg::FilterJobs(input.value())
+                            })}
+                        />
+                        <button 
+                            class="btn-primary" 
+                            style="margin-left: auto;" 
+                            onclick={ctx.link().callback(|_| Msg::ShowJobForm)}
+                        >
+                            { "+ Create Job" }
+                        </button>
+                    </div>
+                    
+                    {
+                        if self.loading {
+                            html! {
+                                <div class="empty-state">
+                                    { "Loading jobs..." }
+                                </div>
+                            }
+                        } else if self.jobs.is_empty() {
+                            html! {
+                                <div class="empty-state">
+                                    { "No jobs yet" }
+                                </div>
+                            }
+                        } else {
+                            self.view_jobs_table(ctx)
+                        }
+                    }
+                </div>
+                
+                // Job Creation Modal
+                {
+                    if self.show_job_form {
+                        self.view_job_form(ctx)
+                    } else {
+                        html! {}
+                    }
+                }
+            </div>
+        }
+    }
+    
+    fn view_job_form(&self, ctx: &Context<Self>) -> Html {
+        let on_id_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateJobId(input.value())
+        });
+        
+        let on_payload_input = ctx.link().callback(|e: InputEvent| {
+            let textarea: web_sys::HtmlTextAreaElement = e.target_unchecked_into();
+            Msg::UpdateJobPayload(textarea.value())
+        });
+        
+        let on_runner_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateJobRunner(input.value())
+        });
+        
+        let on_timeout_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateJobTimeout(input.value())
+        });
+        
+        let on_private_key_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateJobPrivateKey(input.value())
+        });
+        
+        let on_sign = ctx.link().callback(|e: MouseEvent| {
+            e.prevent_default();
+            Msg::SignJob
+        });
+        
+        let on_submit = ctx.link().callback(|e: SubmitEvent| {
+            e.prevent_default();
+            Msg::CreateJob
+        });
+        
+        let on_cancel = ctx.link().callback(|_| Msg::HideJobForm);
+        let on_cancel_overlay = on_cancel.clone();
+        
+        html! {
+            <div class="modal-overlay" onclick={on_cancel_overlay}>
+                <div class="modal-content" onclick={|e: MouseEvent| e.stop_propagation()}>
+                    <div class="modal-header">
+                        <h3>{ "Create Job" }</h3>
+                        <button class="modal-close" onclick={on_cancel.clone()}>{ "×" }</button>
+                    </div>
+                    
+                    <form onsubmit={on_submit}>
+                        <div class="form-group">
+                            <label>{ "Job ID" }</label>
+                            <input 
+                                type="text"
+                                class="add-input"
+                                placeholder="job-xxxxx"
+                                value={self.job_id.clone()}
+                                oninput={on_id_input}
+                                disabled={self.creating_job}
+                            />
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>{ "Payload" }</label>
+                            <textarea 
+                                class="add-input"
+                                rows="5"
+                                placeholder="Enter job payload..."
+                                value={self.job_payload.clone()}
+                                oninput={on_payload_input}
+                                disabled={self.creating_job}
+                            />
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>{ "Runner" }</label>
+                            <input 
+                                type="text"
+                                class="add-input"
+                                placeholder="runner-name"
+                                value={self.job_runner.clone()}
+                                oninput={on_runner_input}
+                                disabled={self.creating_job}
+                                list="runners-list"
+                            />
+                            <datalist id="runners-list">
+                                {
+                                    self.runners.iter().map(|runner| {
+                                        html! {
+                                            <option value={runner.clone()} />
+                                        }
+                                    }).collect::<Html>()
+                                }
+                            </datalist>
+                        </div>
+                        
+                        <div class="form-group">
+                            <label>{ "Timeout (seconds)" }</label>
+                            <input 
+                                type="number"
+                                class="add-input"
+                                placeholder="30"
+                                value={self.job_timeout.clone()}
+                                oninput={on_timeout_input}
+                                disabled={self.creating_job}
+                            />
+                        </div>
+                        
+                        // Signatures section
+                        <div class="form-group">
+                            <label>{ "Signatures" }</label>
+                            {
+                                if self.job_signatures.is_empty() {
+                                    html! {
+                                        <div class="empty-state" style="padding: 1rem; margin-bottom: 0.5rem;">
+                                            { "No signatures yet" }
+                                        </div>
+                                    }
+                                } else {
+                                    html! {
+                                        <div class="signatures-list">
+                                            {
+                                                self.job_signatures.iter().enumerate().map(|(idx, (pubkey, _sig))| {
+                                                    let on_remove = ctx.link().callback(move |_| Msg::RemoveSignature(idx));
+                                                    html! {
+                                                        <div class="signature-item">
+                                                            <span class="signature-pubkey">{ format!("{}...", &pubkey[..16]) }</span>
+                                                            <button 
+                                                                type="button"
+                                                                class="btn-remove"
+                                                                onclick={on_remove}
+                                                                disabled={self.creating_job}
+                                                            >
+                                                                { "×" }
+                                                            </button>
+                                                        </div>
+                                                    }
+                                                }).collect::<Html>()
+                                            }
+                                        </div>
+                                    }
+                                }
+                            }
+                            
+                            <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+                                <input 
+                                    type="password"
+                                    class="add-input"
+                                    placeholder="Private key (hex)"
+                                    value={self.job_private_key.clone()}
+                                    oninput={on_private_key_input}
+                                    disabled={self.creating_job}
+                                    style="flex: 1;"
+                                />
+                                <button 
+                                    type="button"
+                                    class="btn-secondary"
+                                    onclick={on_sign}
+                                    disabled={self.creating_job || self.job_private_key.is_empty()}
+                                >
+                                    { "Sign" }
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div class="modal-actions">
+                            <button 
+                                type="button"
+                                class="btn-secondary" 
+                                onclick={on_cancel}
+                                disabled={self.creating_job}
+                            >
+                                { "Cancel" }
+                            </button>
+                            <button 
+                                type="submit"
+                                class="btn-primary"
+                                disabled={self.creating_job}
+                            >
+                                { if self.creating_job { "Creating..." } else { "Create Job" } }
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        }
+    }
+    
+    fn view_runners_sidebar(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <>
+                // Add Runner Card
+                { self.view_add_runner_card(ctx) }
+                
+                // Runners List
+                {
+                    if self.runners.is_empty() {
+                        html! {
+                            <p class="empty-state">{ "No runners" }</p>
+                        }
+                    } else {
+                        html! {
+                            <ul class="runners-list">
+                                {
+                                    self.runners.iter().map(|runner| {
+                                        let is_selected = self.selected_runner.as_ref() == Some(runner);
+                                        let runner_clone = runner.clone();
+                                        let onclick = ctx.link().callback(move |_| {
+                                            if is_selected {
+                                                Msg::SelectRunner(None)
+                                            } else {
+                                                Msg::SelectRunner(Some(runner_clone.clone()))
+                                            }
+                                        });
+                                        
+                                        html! {
+                                            <li 
+                                                class={if is_selected { "runner-card selected" } else { "runner-card" }}
+                                                onclick={onclick}
+                                            >
+                                                <div class="runner-card-header">
+                                                    <span class="runner-name">{ runner }</span>
+                                                    <span class="runner-status">{ "Active" }</span>
+                                                </div>
+                                            </li>
+                                        }
+                                    }).collect::<Html>()
+                                }
+                            </ul>
+                        }
+                    }
+                }
+            </>
+        }
+    }
+    
+    fn view_keys_sidebar(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <>
+                // Add Key Card
+                { self.view_add_key_card(ctx) }
+                
+                // Keys List
+                {
+                    if self.keys.is_empty() {
+                        html! {
+                            <div class="empty-state">
+                                { "No keys yet" }
+                            </div>
+                        }
+                    } else {
+                        html! {
+                            <div class="keys-list">
+                                {
+                                    self.keys.iter().map(|key| {
+                                        let name = key.get("name").and_then(|v| v.as_str()).unwrap_or("unknown");
+                                        let scope = key.get("scope").and_then(|v| v.as_str()).unwrap_or("unknown");
+                                        let secret = key.get("secret").and_then(|v| v.as_str()).unwrap_or("");
+                                        let created_at = key.get("created_at").and_then(|v| v.as_str()).unwrap_or("");
+                                        
+                                        let is_selected = self.selected_key.as_ref().map(|s| s == name).unwrap_or(false);
+                                        let key_name = name.to_string();
+                                        
+                                        html! {
+                                            <div 
+                                                class={if is_selected { "key-card selected" } else { "key-card" }}
+                                                onclick={ctx.link().callback(move |_| Msg::SelectKey(Some(key_name.clone())))}
+                                            >
+                                                <div class="key-header">
+                                                    <span class="key-name">{ name }</span>
+                                                    <span class={format!("key-scope scope-{}", scope)}>{ scope }</span>
+                                                </div>
+                                                <div class="key-secret">
+                                                    <code>{ secret }</code>
+                                                </div>
+                                                {
+                                                    if !created_at.is_empty() {
+                                                        html! {
+                                                            <div class="key-meta">
+                                                                <span>{ format!("Created: {}", created_at) }</span>
+                                                            </div>
+                                                        }
+                                                    } else {
+                                                        html! {}
+                                                    }
+                                                }
+                                            </div>
+                                        }
+                                    }).collect::<Html>()
+                                }
+                            </div>
+                        }
+                    }
+                }
+            </>
+        }
+    }
+    
+    fn view_jobs_table(&self, ctx: &Context<Self>) -> Html {
+        // Filter jobs
+        let filter_lower = self.job_filter.to_lowercase();
+        let mut filtered_jobs: Vec<_> = self.jobs.iter()
+            .filter(|job| {
+                if filter_lower.is_empty() {
+                    return true;
+                }
+                let job_id = job.get("id").and_then(|v| v.as_str()).unwrap_or("");
+                let runner = job.get("runner").and_then(|v| v.as_str()).unwrap_or("");
+                let payload = job.get("payload").and_then(|v| v.as_str()).unwrap_or("");
+                
+                job_id.to_lowercase().contains(&filter_lower) ||
+                runner.to_lowercase().contains(&filter_lower) ||
+                payload.to_lowercase().contains(&filter_lower)
+            })
+            .collect();
+        
+        // Sort jobs
+        filtered_jobs.sort_by(|a, b| {
+            let a_val = a.get(&self.job_sort_column);
+            let b_val = b.get(&self.job_sort_column);
+            
+            let cmp = match (&a_val, &b_val) {
+                (Some(a), Some(b)) => {
+                    // Try as string first
+                    if let (Some(a_str), Some(b_str)) = (a.as_str(), b.as_str()) {
+                        a_str.cmp(b_str)
+                    } else if let (Some(a_num), Some(b_num)) = (a.as_u64(), b.as_u64()) {
+                        a_num.cmp(&b_num)
+                    } else {
+                        std::cmp::Ordering::Equal
+                    }
+                }
+                (Some(_), None) => std::cmp::Ordering::Less,
+                (None, Some(_)) => std::cmp::Ordering::Greater,
+                (None, None) => std::cmp::Ordering::Equal,
+            };
+            
+            if self.job_sort_ascending { cmp } else { cmp.reverse() }
+        });
+        
+        let sort_icon = |column: &str| {
+            if self.job_sort_column == column {
+                if self.job_sort_ascending { " ▲" } else { " ▼" }
+            } else {
+                ""
+            }
+        };
+        
+        html! {
+            <div class="table-container">
+                <table class="jobs-table">
+                    <thead>
+                        <tr>
+                            <th onclick={ctx.link().callback(|_| Msg::SortJobs("status".to_string()))} class="sortable">
+                                { format!("Status{}", sort_icon("status")) }
+                            </th>
+                            <th onclick={ctx.link().callback(|_| Msg::SortJobs("id".to_string()))} class="sortable">
+                                { format!("Job ID{}", sort_icon("id")) }
+                            </th>
+                            <th onclick={ctx.link().callback(|_| Msg::SortJobs("runner".to_string()))} class="sortable">
+                                { format!("Runner{}", sort_icon("runner")) }
+                            </th>
+                            <th>{ "Payload" }</th>
+                            <th>{ "Sigs" }</th>
+                            <th onclick={ctx.link().callback(|_| Msg::SortJobs("created_at".to_string()))} class="sortable">
+                                { format!("Created{}", sort_icon("created_at")) }
+                            </th>
+                            <th>{ "Actions" }</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            filtered_jobs.iter().map(|job| {
+                                let job_id = job.get("id").and_then(|v| v.as_str()).unwrap_or("unknown");
+                                let runner = job.get("runner").and_then(|v| v.as_str()).unwrap_or("unknown");
+                                let payload = job.get("payload").and_then(|v| v.as_str()).unwrap_or("");
+                                let timeout = job.get("timeout").and_then(|v| v.as_u64()).unwrap_or(0);
+                                let signatures = job.get("signatures")
+                                    .and_then(|v| v.as_array())
+                                    .map(|arr| arr.len())
+                                    .unwrap_or(0);
+                                let created_at = job.get("created_at")
+                                    .and_then(|v| v.as_str())
+                                    .unwrap_or("");
+                                
+                                // Get status from job object
+                                let status = job.get("status").and_then(|v| v.as_str()).unwrap_or("queued");
+                                let status_class = match status {
+                                    "dispatched" | "queued" => "status-queued",
+                                    "started" => "status-running",
+                                    "finished" => "status-completed",
+                                    "error" => "status-failed",
+                                    "stopped" | "stopping" => "status-failed",
+                                    _ => "status-unknown",
+                                };
+                                
+                                // Check if this job is being polled
+                                let is_polling = self.polling_jobs.contains(job_id);
+                                
+                                // Check if job is complete (can view output)
+                                let is_complete = matches!(status, "finished" | "error");
+                                
+                                // Format status display with timeout for running jobs
+                                let status_display = if status == "started" {
+                                    format!("{} ({}s)", status, timeout)
+                                } else {
+                                    status.to_string()
+                                };
+                                
+                                let payload_preview = if payload.len() > 40 {
+                                    format!("{}...", &payload[..40])
+                                } else {
+                                    payload.to_string()
+                                };
+                                
+                                let job_id_run = job_id.to_string();
+                                let job_id_logs = job_id.to_string();
+                                let job_id_delete = job_id.to_string();
+                                let job_id_output = job_id.to_string();
+                                
+                                html! {
+                                    <tr class={if is_polling { "polling-row" } else { "" }}>
+                                        <td>
+                                            {
+                                                if is_complete {
+                                                    html! {
+                                                        <span 
+                                                            class={format!("status-badge {}{} clickable", status_class, if is_polling { " pulsing" } else { "" })}
+                                                            onclick={ctx.link().callback(move |_| Msg::ViewJobOutput(job_id_output.clone()))}
+                                                            title="Click to view output"
+                                                        >
+                                                            { status_display }
+                                                        </span>
+                                                    }
+                                                } else {
+                                                    html! {
+                                                        <span class={format!("status-badge {}{}", status_class, if is_polling { " pulsing" } else { "" })}>
+                                                            { status_display }
+                                                        </span>
+                                                    }
+                                                }
+                                            }
+                                        </td>
+                                        <td class="job-id-cell">{ job_id }</td>
+                                        <td>{ runner }</td>
+                                        <td class="payload-cell">{ payload_preview }</td>
+                                        <td>{ signatures }</td>
+                                        <td class="timestamp-cell">{ created_at }</td>
+                                        <td class="actions-cell">
+                                            <button 
+                                                class="action-btn action-run"
+                                                title="Run Job"
+                                                onclick={ctx.link().callback(move |_| Msg::RunJob(job_id_run.clone()))}
+                                            />
+                                            <button 
+                                                class="action-btn action-logs"
+                                                title="View Logs"
+                                                onclick={ctx.link().callback(move |_| Msg::ViewJobLogs(job_id_logs.clone()))}
+                                            />
+                                            <button 
+                                                class="action-btn action-delete"
+                                                title="Delete Job"
+                                                onclick={ctx.link().callback(move |_| Msg::DeleteJob(job_id_delete.clone()))}
+                                            />
+                                        </td>
+                                    </tr>
+                                }
+                            }).collect::<Html>()
+                        }
+                    </tbody>
+                </table>
+            </div>
+        }
+    }
+    
+    fn view_add_key_card(&self, ctx: &Context<Self>) -> Html {
+        let on_name_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateNewKeyName(input.value())
+        });
+        
+        let on_scope_change = ctx.link().callback(|e: Event| {
+            let select: web_sys::HtmlSelectElement = e.target_unchecked_into();
+            Msg::UpdateNewKeyScope(select.value())
+        });
+        
+        let on_submit = ctx.link().callback(|_| Msg::AddKey);
+        
+        html! {
+            <div class="add-card">
+                <input 
+                    type="text"
+                    placeholder="Key name"
+                    class="add-input"
+                    value={self.new_key_name.clone()}
+                    oninput={on_name_input}
+                    disabled={self.adding_key}
+                />
+                <select 
+                    class="add-select"
+                    value={self.new_key_scope.clone()}
+                    onchange={on_scope_change}
+                    disabled={self.adding_key}
+                >
+                    <option value="admin">{ "admin" }</option>
+                    <option value="registrar">{ "registrar" }</option>
+                    <option value="user" selected={self.new_key_scope == "user"}>{ "user" }</option>
+                </select>
+                <button 
+                    class="btn-primary" 
+                    onclick={on_submit}
+                    disabled={self.adding_key || self.new_key_name.is_empty()}
+                >
+                    { if self.adding_key { "Creating..." } else { "Create Key" } }
+                </button>
+            </div>
+        }
+    }
+    
+    fn view_add_runner_card(&self, ctx: &Context<Self>) -> Html {
+        let on_name_input = ctx.link().callback(|e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            Msg::UpdateNewRunnerName(input.value())
+        });
+        
+        let on_submit = ctx.link().callback(|e: SubmitEvent| {
+            e.prevent_default();
+            Msg::AddRunner
+        });
+        
+        html! {
+            <div class="add-runner-card">
+                <h4>{ "Add Runner" }</h4>
+                <form onsubmit={on_submit}>
+                    <div class="form-group-inline">
+                        <input
+                            type="text"
+                            value={self.new_runner_name.clone()}
+                            oninput={on_name_input}
+                            placeholder="Runner name"
+                            disabled={self.adding_runner}
+                        />
+                        <button 
+                            type="submit" 
+                            class="btn-primary"
+                            disabled={self.adding_runner}
+                        >
+                            { if self.adding_runner { "..." } else { "+" } }
+                        </button>
+                    </div>
+                </form>
+            </div>
+        }
     }
 }
diff --git a/clients/admin-ui/src/app.rs.backup b/clients/admin-ui/src/app.rs.backup
deleted file mode 100644
index e2ea211..0000000
--- a/clients/admin-ui/src/app.rs.backup
+++ /dev/null
@@ -1,1099 +0,0 @@
-use yew::prelude::*;
-use wasm_bindgen_futures::spawn_local;
-use gloo::console;
-use hero_supervisor_openrpc_client::wasm::{WasmSupervisorClient, WasmJob};
-use wasm_bindgen::JsCast;
-
-#[derive(Clone, PartialEq)]
-pub struct RunnerStatus {
-    pub name: String,
-    pub status: String,
-}
-
-#[derive(Clone, PartialEq)]
-pub struct Job {
-    pub id: String,
-    pub command: String,
-    pub type_: String,
-    pub runner: String,
-}
-
-#[derive(Clone, PartialEq)]
-pub struct RegisterForm {
-    pub name: String,
-    pub secret: String,
-    pub queue: String,
-}
-
-#[derive(Clone, PartialEq)]
-pub struct SupervisorInfo {
-    pub server_url: String,
-    pub admin_secrets_count: usize,
-    pub user_secrets_count: usize,
-    pub register_secrets_count: usize,
-    pub runners_count: usize,
-}
-
-#[derive(Clone, PartialEq)]
-pub struct AppState {
-    pub runners: Vec<RunnerStatus>,
-    pub jobs: Vec<Job>,
-    pub register_form: RegisterForm,
-    pub loading: bool,
-    pub error: Option<String>,
-    pub supervisor_info: Option<SupervisorInfo>,
-    // Secret management fields
-    pub add_admin_secret: String,
-    pub remove_admin_secret: String,
-    pub add_user_secret: String,
-    pub remove_user_secret: String,
-    pub add_register_secret: String,
-    pub remove_register_secret: String,
-    pub admin_secret_for_changes: String,
-}
-
-impl Default for AppState {
-    fn default() -> Self {
-        Self {
-            runners: Vec::new(),
-            jobs: Vec::new(),
-            register_form: RegisterForm {
-                name: String::new(),
-                secret: String::new(),
-                queue: String::new(),
-            },
-            loading: false,
-            error: None,
-            supervisor_info: None,
-            add_admin_secret: String::new(),
-            remove_admin_secret: String::new(),
-            add_user_secret: String::new(),
-            remove_user_secret: String::new(),
-            add_register_secret: String::new(),
-            remove_register_secret: String::new(),
-            admin_secret_for_changes: String::new(),
-        }
-    }
-}
-
-#[function_component(App)]
-pub fn app() -> Html {
-    let state = use_state(AppState::default);
-
-    // Load initial data
-    let load_initial_data = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new("http://localhost:3030".to_string());
-            spawn_local(async move {
-                console::log!("Loading initial data...");
-                let mut current_state = (*state).clone();
-                current_state.loading = true;
-                state.set(current_state.clone());
-
-                // Load runners
-                match client.list_runners().await {
-                    Ok(runner_names) => {
-                        console::log!("Successfully loaded runners:", format!("{:?}", runner_names));
-                        let runners_with_status: Vec<RunnerStatus> = runner_names
-                            .into_iter()
-                            .map(|name| RunnerStatus { name, status: "Running".to_string() })
-                            .collect();
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.runners = runners_with_status;
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to load runners:", format!("{:?}", e));
-                        let mut updated_state = (*state).clone();
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                }
-
-                // Load mock jobs for now
-                let mock_jobs = vec![
-                    Job {
-                        id: "job-1".to_string(),
-                        command: "echo 'Hello World'".to_string(),
-                        type_: "script".to_string(),
-                        runner: "runner-1".to_string(),
-                    },
-                    Job {
-                        id: "job-2".to_string(),
-                        command: "ls -la".to_string(),
-                        type_: "command".to_string(),
-                        runner: "runner-2".to_string(),
-                    },
-                ];
-                
-                let mut final_state = (*state).clone();
-                final_state.jobs = mock_jobs;
-                state.set(final_state);
-            });
-        })
-    };
-
-    use_effect_with((), move |_| {
-        load_initial_data.emit(());
-        || ()
-    });
-
-    // Register form change handler
-    let on_register_form_change = {
-        let state = state.clone();
-        Callback::from(move |(field, value): (String, String)| {
-            let mut new_state = (*state).clone();
-            match field.as_str() {
-                "name" => new_state.register_form.name = value,
-                "secret" => new_state.register_form.secret = value,
-                "queue" => new_state.register_form.queue = value,
-                _ => {}
-            }
-            state.set(new_state);
-        })
-    };
-
-    // Register runner handler
-    let on_register_runner = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new("http://localhost:3030".to_string());
-            spawn_local(async move {
-                console::log!("Registering runner...");
-                let current_state = (*state).clone();
-                
-                // Validate form data
-                if current_state.register_form.name.is_empty() {
-                    console::error!("Runner name is required");
-                    return;
-                }
-                if current_state.register_form.secret.is_empty() {
-                    console::error!("Secret is required");
-                    return;
-                }
-                if current_state.register_form.queue.is_empty() {
-                    console::error!("Queue name is required");
-                    return;
-                }
-                
-                // Add runner to UI immediately with "Registering" status
-                let new_runner = RunnerStatus {
-                    name: current_state.register_form.name.clone(),
-                    status: "Registering".to_string(),
-                };
-                
-                let mut updated_runners = current_state.runners.clone();
-                updated_runners.push(new_runner);
-                
-                let mut temp_state = current_state.clone();
-                temp_state.runners = updated_runners;
-                state.set(temp_state);
-                
-                // Make actual registration call
-                match client.register_runner(
-                    &current_state.register_form.secret,
-                    &current_state.register_form.name,
-                    &current_state.register_form.queue,
-                ).await {
-                    Ok(_) => {
-                        console::log!("Runner registered successfully!");
-                        
-                        // Update status to "Running" and clear form
-                        let mut final_state = (*state).clone();
-                        if let Some(runner) = final_state.runners.iter_mut()
-                            .find(|r| r.name == current_state.register_form.name) {
-                            runner.status = "Running".to_string();
-                        }
-                        final_state.register_form = RegisterForm {
-                            name: String::new(),
-                            secret: String::new(),
-                            queue: String::new(),
-                        };
-                        state.set(final_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to register runner:", format!("{:?}", e));
-                        
-                        // Remove the failed runner from the list
-                        let mut error_state = (*state).clone();
-                        error_state.runners.retain(|r| r.name != current_state.register_form.name);
-                        state.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-
-    html! {
-        <div class="app-layout">
-            // Persistent Island Column Sidebar
-            <div class="sidebar">
-                <div class="sidebar-header">
-                    <h2>{"Supervisor"}</h2>
-                </div>
-                <div class="sidebar-content">
-                    // Server Status Section
-                    <div class="sidebar-section">
-                        <h4>{"Server Status"}</h4>
-                        if let Some(ref info) = state.supervisor_info {
-                            <div class="status-grid">
-                                <div class="status-item">
-                                    <span class="status-label">{"URL"}</span>
-                                    <span class="status-value">{&info.server_url}</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label">{"Runners"}</span>
-                                    <span class="status-badge">{info.runners_count}</span>
-                                </div>
-                            </div>
-                        } else {
-                            <div class="status-grid">
-                                <div class="status-item">
-                                    <span class="status-label">{"URL"}</span>
-                                    <span class="status-value">{"http://localhost:3030"}</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label">{"Runners"}</span>
-                                    <span class="status-badge">{state.runners.len()}</span>
-                                </div>
-                            </div>
-                        }
-                    </div>
-
-                    // Secrets Management Section with Input Fields
-                    <div class="sidebar-section">
-                        <h4>{"Secrets Management"}</h4>
-                        
-                        // Admin Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"Admin Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.admin_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add admin secret"
-                                        value={state.add_admin_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_admin_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove admin secret"
-                                        value={state.remove_admin_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_admin_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // User Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"User Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.user_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add user secret"
-                                        value={state.add_user_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_user_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove user secret"
-                                        value={state.remove_user_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_user_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // Register Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"Register Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.register_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add register secret"
-                                        value={state.add_register_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_register_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove register secret"
-                                        value={state.remove_register_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_register_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // Admin Secret and Save Changes Button
-                        <div class="save-changes-section">
-                            <div class="form-group">
-                                <input 
-                                    type="password" 
-                                    class="form-control"
-                                    placeholder="Admin secret (required to save changes)"
-                                    value={state.admin_secret_for_changes.clone()}
-                                    onchange={Callback::from({
-                                        let state = state.clone();
-                                        move |e: web_sys::Event| {
-                                            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                            let mut new_state = (*state).clone();
-                                            new_state.admin_secret_for_changes = input.value();
-                                            state.set(new_state);
-                                        }
-                                    })}
-                                />
-                            </div>
-                            <button 
-                                class="btn btn-primary btn-block"
-                                disabled={state.admin_secret_for_changes.is_empty()}
-                                onclick={Callback::from({
-                                    let state = state.clone();
-                                    move |_: web_sys::MouseEvent| {
-                                        let state = state.clone();
-                                        let client = WasmSupervisorClient::new("http://localhost:3030".to_string());
-                                        spawn_local(async move {
-                                            console::log!("Saving secret changes...");
-                                            let current_state = (*state).clone();
-                                            
-                                            // TODO: Implement actual secret management RPC calls
-                                            // This is where we'll add/remove secrets using the admin secret
-                                            console::log!("Secret changes would be applied here");
-                                        });
-                                    }
-                                })}
-                            >
-                                {"Save Changes"}
-                            </button>
-                        </div>
-                    </div>
-
-                    // Documentation Links
-                    <div class="sidebar-section">
-                        <h4>{"Documentation"}</h4>
-                        <div class="docs-links">
-                            <a href="#" class="doc-link">{"API Reference"}</a>
-                            <a href="#" class="doc-link">{"User Guide"}</a>
-                            <a href="#" class="doc-link">{"Support"}</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            // Main Content Area
-            <div class="main-content">
-                // Runners Section
-                <div class="content-section">
-                    <h3>{"Runners"}</h3>
-                    <div class="runners-grid">
-                        // Registration Card (First Card)
-                        <div class="runner-card registration-card">
-                            <div class="card-header">
-                                <h5>{"Register New Runner"}</h5>
-                            </div>
-                            <div class="card-body">
-                                <div class="form-group">
-                                    <input 
-                                        type="text" 
-                                        class="form-control" 
-                                        placeholder="Runner name"
-                                        value={state.register_form.name.clone()}
-                                        onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                            ("name".to_string(), input.value())
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control" 
-                                        placeholder="Secret"
-                                        value={state.register_form.secret.clone()}
-                                        onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                            ("secret".to_string(), input.value())
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="text" 
-                                        class="form-control" 
-                                        placeholder="Queue name"
-                                        value={state.register_form.queue.clone()}
-                                        onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                            ("queue".to_string(), input.value())
-                                        })}
-                                    />
-                                </div>
-                                <button 
-                                    class="btn btn-primary btn-block" 
-                                    onclick={on_register_runner}
-                                    disabled={state.register_form.name.is_empty() || state.register_form.secret.is_empty() || state.register_form.queue.is_empty()}
-                                >
-                                    {"Register Runner"}
-                                </button>
-                            </div>
-                        </div>
-
-                        // Existing Runners
-                        {for state.runners.iter().map(|runner| {
-                            html! {
-                                <div class="runner-card">
-                                    <div class="card-header">
-                                        <h5>{&runner.name}</h5>
-                                        <span class={format!("status-badge status-{}", runner.status.to_lowercase())}>
-                                            {&runner.status}
-                                        </span>
-                                    </div>
-                                    <div class="card-body">
-                                        <p class="runner-info">{"Status: "}{&runner.status}</p>
-                                    </div>
-                                </div>
-                            }
-                        })}
-                    </div>
-                </div>
-
-                // Jobs Section
-                <div class="content-section">
-                    <h3>{"Jobs"}</h3>
-                    <div class="jobs-table-container">
-                        <table class="table table-dark table-striped">
-                            <thead>
-                                <tr>
-                                    <th>{"ID"}</th>
-                                    <th>{"Command"}</th>
-                                    <th>{"Type"}</th>
-                                    <th>{"Runner"}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {for state.jobs.iter().map(|job| {
-                                    html! {
-                                        <tr>
-                                            <td>{&job.id}</td>
-                                            <td class="command-cell">{&job.command}</td>
-                                            <td>{&job.type_}</td>
-                                            <td>{&job.runner}</td>
-                                        </tr>
-                                    }
-                                })}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-    }
-}
-        supervisor_info: None,
-        add_admin_secret: String::new(),
-        remove_admin_secret: String::new(),
-        add_user_secret: String::new(),
-        remove_user_secret: String::new(),
-        add_register_secret: String::new(),
-        remove_register_secret: String::new(),
-        admin_secret_for_changes: String::new(),
-    });
-
-    // Load initial data when component mounts
-    let load_initial_data = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new("http://localhost:3030".to_string());
-            spawn_local(async move {
-                console::log!("Loading initial data...");
-                let mut current_state = (*state).clone();
-                current_state.loading = true;
-                state.set(current_state.clone());
-                
-                // Load supervisor info
-                match client.get_supervisor_info("".to_string()).await {
-                    Ok(info) => {
-                        console::log!("Successfully loaded supervisor info");
-                        let mut updated_state = (*state).clone();
-                        updated_state.supervisor_info = Some(SupervisorInfo {
-                            server_url: "http://localhost:3030".to_string(),
-                            admin_secrets_count: info.admin_secrets_count,
-                            user_secrets_count: info.user_secrets_count,
-                            register_secrets_count: info.register_secrets_count,
-                            runners_count: info.runners_count,
-                        });
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to load supervisor info:", format!("{:?}", e));
-                        let mut updated_state = (*state).clone();
-                        updated_state.loading = false;
-                        state.set(updated_state);
-                    }
-                }
-                
-                // Load runners
-                match client.list_runners().await {
-                    Ok(runner_names) => {
-                        console::log!("Successfully loaded runners:", format!("{:?}", runner_names));
-                        let runners_with_status: Vec<RunnerStatus> = runner_names
-                            .into_iter()
-                            .map(|name| RunnerStatus { name, status: "Running".to_string() })
-                            .collect();
-                        
-                        let mut updated_state = (*state).clone();
-                        updated_state.runners = runners_with_status;
-                        state.set(updated_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to load runners:", format!("{:?}", e));
-                    }
-                }
-            });
-        })
-    };
-
-    use_effect_with((), move |_| {
-        load_initial_data.emit(());
-        || ()
-    });
-
-    // Register form change handler
-    let on_register_form_change = {
-        let state = state.clone();
-        Callback::from(move |(field, value): (String, String)| {
-            let mut new_state = (*state).clone();
-            match field.as_str() {
-                "name" => new_state.register_form.name = value,
-                "secret" => new_state.register_form.secret = value,
-                "queue" => new_state.register_form.queue = value,
-                _ => {}
-            }
-            state.set(new_state);
-        })
-    };
-
-
-    // Register runner handler
-    let on_register_runner = {
-        let state = state.clone();
-        Callback::from(move |_: ()| {
-            let state = state.clone();
-            let client = WasmSupervisorClient::new("http://localhost:3030".to_string());
-            spawn_local(async move {
-                console::log!("Registering runner...");
-                let current_state = (*state).clone();
-                
-                // Validate form data
-                if current_state.register_form.name.is_empty() {
-                    console::error!("Runner name is required");
-                    return;
-                }
-                if current_state.register_form.secret.is_empty() {
-                    console::error!("Secret is required");
-                    return;
-                }
-                if current_state.register_form.queue.is_empty() {
-                    console::error!("Queue name is required");
-                    return;
-                }
-                
-                // Add runner to UI immediately with "Registering" status
-                let new_runner = RunnerStatus {
-                    name: current_state.register_form.name.clone(),
-                    status: "Registering".to_string(),
-                };
-                
-                let mut updated_runners = current_state.runners.clone();
-                updated_runners.push(new_runner);
-                
-                let mut temp_state = current_state.clone();
-                temp_state.runners = updated_runners;
-                state.set(temp_state);
-                
-                // Make actual registration call
-                match client.register_runner(
-                    &current_state.register_form.secret,
-                    &current_state.register_form.name,
-                    &current_state.register_form.queue,
-                ).await {
-                    Ok(_) => {
-                        console::log!("Runner registered successfully!");
-                        
-                        // Update status to "Running" and clear form
-                        let mut final_state = (*state).clone();
-                        if let Some(runner) = final_state.runners.iter_mut()
-                            .find(|r| r.name == current_state.register_form.name) {
-                            runner.status = "Running".to_string();
-                        }
-                        final_state.register_form = RegisterForm {
-                            name: String::new(),
-                            secret: String::new(),
-                            queue: String::new(),
-                        };
-                        state.set(final_state);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to register runner:", format!("{:?}", e));
-                        
-                        // Remove the failed runner from the list
-                        let mut error_state = (*state).clone();
-                        error_state.runners.retain(|r| r.name != current_state.register_form.name);
-                        state.set(error_state);
-                    }
-                }
-            });
-        })
-    };
-                    }
-                    Err(e) => {
-                        console::error!("Failed to load supervisor info:", format!("{:?}", e));
-                    }
-                }
-            });
-        })
-    };
-
-    // Load initial data
-    use_effect_with((), {
-        let on_load_runners = on_load_runners.clone();
-        move |_| {
-            on_load_runners.emit(());
-            || ()
-        }
-    });
-
-    html! {
-        <div class="app-layout">
-            // Persistent Island Column Sidebar
-            <div class="sidebar">
-                <div class="sidebar-header">
-                    <h2>{"Supervisor"}</h2>
-                </div>
-                <div class="sidebar-content">
-                    // Server Status Section
-                    <div class="sidebar-section">
-                        <h4>{"Server Status"}</h4>
-                        if let Some(ref info) = state.supervisor_info {
-                            <div class="status-grid">
-                                <div class="status-item">
-                                    <span class="status-label">{"URL"}</span>
-                                    <span class="status-value">{&info.server_url}</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label">{"Runners"}</span>
-                                    <span class="status-badge">{info.runners_count}</span>
-                                </div>
-                            </div>
-                        } else {
-                            <div class="status-grid">
-                                <div class="status-item">
-                                    <span class="status-label">{"URL"}</span>
-                                    <span class="status-value">{"http://localhost:3030"}</span>
-                                </div>
-                                <div class="status-item">
-                                    <span class="status-label">{"Runners"}</span>
-                                    <span class="status-badge">{state.runners.len()}</span>
-                                </div>
-                            </div>
-                        }
-                    </div>
-
-                    // Secrets Management Section with Input Fields
-                    <div class="sidebar-section">
-                        <h4>{"Secrets Management"}</h4>
-                        
-                        // Admin Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"Admin Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.admin_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add admin secret"
-                                        value={state.add_admin_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_admin_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove admin secret"
-                                        value={state.remove_admin_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_admin_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // User Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"User Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.user_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add user secret"
-                                        value={state.add_user_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_user_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove user secret"
-                                        value={state.remove_user_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_user_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // Register Secrets
-                        <div class="secret-management-group">
-                            <div class="secret-type-header">
-                                <span class="secret-label">{"Register Secrets"}</span>
-                                if let Some(ref info) = state.supervisor_info {
-                                    <span class="secret-count">{info.register_secrets_count}</span>
-                                } else {
-                                    <span class="secret-count">{"0"}</span>
-                                }
-                            </div>
-                            <div class="secret-inputs">
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Add register secret"
-                                        value={state.add_register_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.add_register_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <input 
-                                        type="password" 
-                                        class="form-control form-control-sm"
-                                        placeholder="Remove register secret"
-                                        value={state.remove_register_secret.clone()}
-                                        onchange={Callback::from({
-                                            let state = state.clone();
-                                            move |e: web_sys::Event| {
-                                                let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                                let mut new_state = (*state).clone();
-                                                new_state.remove_register_secret = input.value();
-                                                state.set(new_state);
-                                            }
-                                        })}
-                                    />
-                                </div>
-                            </div>
-                        </div>
-
-                        // Admin Secret and Save Changes Button
-                        <div class="save-changes-section">
-                            <div class="form-group">
-                                <input 
-                                    type="password" 
-                                    class="form-control"
-                                    placeholder="Admin secret (required to save changes)"
-                                    value={state.admin_secret_for_changes.clone()}
-                                    onchange={Callback::from({
-                                        let state = state.clone();
-                                        move |e: web_sys::Event| {
-                                            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                            let mut new_state = (*state).clone();
-                                            new_state.admin_secret_for_changes = input.value();
-                                            state.set(new_state);
-                                        }
-                                    })}
-                                />
-                            </div>
-                            <button 
-                                class="btn btn-primary btn-block"
-                                disabled={state.admin_secret_for_changes.is_empty()}
-                            >
-                                {"Save Changes"}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                
-                // Documentation Links at Bottom
-                <div class="sidebar-footer">
-                    <div class="docs-section">
-                        <h5>{"Documentation"}</h5>
-                        <div class="docs-links">
-                            <a href="https://github.com/herocode/supervisor" target="_blank" class="doc-link">
-                                {"📖 User Guide"}
-                            </a>
-                            <a href="https://github.com/herocode/supervisor/blob/main/README.md" target="_blank" class="doc-link">
-                                {"🚀 Getting Started"}
-                            </a>
-                            <a href="https://github.com/herocode/supervisor/issues" target="_blank" class="doc-link">
-                                {"🐛 Report Issues"}
-                            </a>
-                            <a href="https://github.com/herocode/supervisor/wiki" target="_blank" class="doc-link">
-                                {"📚 API Reference"}
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            // Main Content Area (no navbar)
-            <div class="main-content with-sidebar">
-            
-            // Runners section
-            <div class="runners-grid">
-                // Registration card (first card)
-                <div class="card register-card">
-                    <div class="card-title">{"+ Register Runner"}</div>
-                    <form onsubmit={on_register_runner.reform(|e: web_sys::SubmitEvent| {
-                        e.prevent_default();
-                        ()
-                    })}>
-                        <div class="form-group">
-                            <input 
-                                type="text" 
-                                class="form-control"
-                                placeholder="Runner name"
-                                value={state.register_form.name.clone()}
-                                onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                    let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                    ("name".to_string(), input.value())
-                                })}
-                            />
-                        </div>
-                        <div class="form-group">
-                            <input 
-                                type="password" 
-                                class="form-control"
-                                placeholder="Secret"
-                                value={state.register_form.secret.clone()}
-                                onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                    let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                    ("secret".to_string(), input.value())
-                                })}
-                            />
-                        </div>
-                        <div class="form-group">
-                            <input 
-                                type="text" 
-                                class="form-control"
-                                placeholder="Queue"
-                                value={state.register_form.queue.clone()}
-                                onchange={on_register_form_change.reform(|e: web_sys::Event| {
-                                    let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                    ("queue".to_string(), input.value())
-                                })}
-                            />
-                        </div>
-                        <button type="submit" class="btn btn-primary">
-                            {"Register"}
-                        </button>
-                    </form>
-                </div>
-                
-                // Existing runner cards
-                {for state.runners.iter().map(|runner| {
-                    let status_class = match runner.status.as_str() {
-                        "Running" => "status-running",
-                        "Stopped" => "status-stopped",
-                        "Starting" => "status-starting",
-                        "Stopping" => "status-starting",
-                        "Registering" => "status-registering",
-                        _ => "status-stopped",
-                    };
-                    html! {
-                        <div class="card">
-                            <div class="card-title">{&runner.name}</div>
-                            <span class={format!("status {}", status_class)}>{&runner.status}</span>
-                        </div>
-                    }
-                })}
-            </div>
-            
-                // Jobs section
-                <h2>{"Jobs"}</h2>
-                <div class="table-container">
-                    <table class="table">
-                        <thead>
-                            <tr>
-                                <th>{"ID"}</th>
-                                <th>{"Type"}</th>
-                                <th>{"Runner"}</th>
-                                <th>{"Command"}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {for state.jobs.iter().map(|job| {
-                                html! {
-                                    <tr>
-                                        <td>{&job.id}</td>
-                                        <td>{&job.type_}</td>
-                                        <td>{&job.runner}</td>
-                                        <td><code class="code">{&job.command}</code></td>
-                                    </tr>
-                                }
-                            })}
-                        </tbody>
-                    </table>
-                </div>
-                
-                // Floating refresh button
-                <button class="refresh-btn" onclick={load_initial_data.reform(|_| ())}>
-                    {"↻"}
-                </button>
-            </div>
-        </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/add_runner.rs b/clients/admin-ui/src/components/add_runner.rs
deleted file mode 100644
index 6f3503e..0000000
--- a/clients/admin-ui/src/components/add_runner.rs
+++ /dev/null
@@ -1,296 +0,0 @@
-use yew::prelude::*;
-use yew_router::prelude::*;
-use gloo::console;
-use wasm_bindgen_futures::spawn_local;
-use web_sys::HtmlInputElement;
-use std::collections::HashMap;
-
-use crate::app::Route;
-use crate::types::{AddRunnerForm, RunnerType, ProcessManagerType};
-use crate::services::{SupervisorService, use_supervisor_service};
-
-#[function_component(AddRunner)]
-pub fn add_runner() -> Html {
-    let navigator = use_navigator().unwrap();
-    let server_url = "http://localhost:8081";
-    let (service, service_error) = use_supervisor_service(server_url);
-    
-    let form = use_state(|| AddRunnerForm::default());
-    let loading = use_state(|| false);
-    let error = use_state(|| None::<String>);
-    let success = use_state(|| false);
-
-    let on_actor_id_change = {
-        let form = form.clone();
-        Callback::from(move |e: Event| {
-            let input: HtmlInputElement = e.target_unchecked_into();
-            let mut new_form = (*form).clone();
-            new_form.actor_id = input.value();
-            form.set(new_form);
-        })
-    };
-
-    let on_runner_type_change = {
-        let form = form.clone();
-        Callback::from(move |e: Event| {
-            let select: web_sys::HtmlSelectElement = e.target_unchecked_into();
-            let mut new_form = (*form).clone();
-            new_form.runner_type = match select.value().as_str() {
-                "SALRunner" => RunnerType::SALRunner,
-                "OSISRunner" => RunnerType::OSISRunner,
-                "VRunner" => RunnerType::VRunner,
-                _ => RunnerType::SALRunner,
-            };
-            form.set(new_form);
-        })
-    };
-
-    let on_binary_path_change = {
-        let form = form.clone();
-        Callback::from(move |e: Event| {
-            let input: HtmlInputElement = e.target_unchecked_into();
-            let mut new_form = (*form).clone();
-            new_form.binary_path = input.value();
-            form.set(new_form);
-        })
-    };
-
-    let on_script_type_change = {
-        let form = form.clone();
-        Callback::from(move |e: Event| {
-            let input: HtmlInputElement = e.target_unchecked_into();
-            let mut new_form = (*form).clone();
-            new_form.script_type = input.value();
-            form.set(new_form);
-        })
-    };
-
-    let on_process_manager_change = {
-        let form = form.clone();
-        Callback::from(move |e: Event| {
-            let select: web_sys::HtmlSelectElement = e.target_unchecked_into();
-            let mut new_form = (*form).clone();
-            new_form.process_manager_type = match select.value().as_str() {
-                "Tmux" => ProcessManagerType::Tmux,
-                "Simple" => ProcessManagerType::Simple,
-                _ => ProcessManagerType::Simple,
-            };
-            form.set(new_form);
-        })
-    };
-
-    let on_submit = {
-        let form = form.clone();
-        let service = service.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let success = success.clone();
-        let navigator = navigator.clone();
-
-        Callback::from(move |e: SubmitEvent| {
-            e.prevent_default();
-            
-            if let Some(service) = &service {
-                let form = form.clone();
-                let service = service.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let success = success.clone();
-                let navigator = navigator.clone();
-
-                loading.set(true);
-                error.set(None);
-                success.set(false);
-
-                spawn_local(async move {
-                    let config = form.to_runner_config();
-                    match service.add_runner(config, form.process_manager_type.clone()).await {
-                        Ok(_) => {
-                            console::log!("Runner added successfully");
-                            success.set(true);
-                            // Navigate back to runners list after a short delay
-                            gloo::timers::callback::Timeout::new(1500, move || {
-                                navigator.push(&Route::Runners);
-                            }).forget();
-                        }
-                        Err(e) => {
-                            console::error!("Failed to add runner:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_cancel = {
-        let navigator = navigator.clone();
-        Callback::from(move |_| navigator.push(&Route::Runners))
-    };
-
-    html! {
-        <div class="container-fluid">
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <h1 class="h3 mb-0">
-                            <i class="bi bi-plus-circle me-2"></i>
-                            {"Add New Runner"}
-                        </h1>
-                        <button class="btn btn-outline-secondary" onclick={on_cancel.clone()}>
-                            <i class="bi bi-arrow-left me-1"></i>
-                            {"Back to Runners"}
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            // Error display
-            if let Some(err) = service_error {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-danger">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Service Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            if let Some(err) = error.as_ref() {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-danger">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            if *success {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-success">
-                            <i class="bi bi-check-circle-fill me-2"></i>
-                            {"Runner added successfully! Redirecting..."}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            <div class="row">
-                <div class="col-lg-8 mx-auto">
-                    <div class="card">
-                        <div class="card-header">
-                            <h5 class="mb-0">{"Runner Configuration"}</h5>
-                        </div>
-                        <div class="card-body">
-                            <form onsubmit={on_submit}>
-                                <div class="row mb-3">
-                                    <div class="col-md-6">
-                                        <label for="actor_id" class="form-label">{"Actor ID"}</label>
-                                        <input 
-                                            type="text" 
-                                            class="form-control" 
-                                            id="actor_id"
-                                            value={form.actor_id.clone()}
-                                            onchange={on_actor_id_change}
-                                            required=true
-                                            placeholder="e.g., sal_runner_1"
-                                        />
-                                        <div class="form-text">{"Unique identifier for this runner"}</div>
-                                    </div>
-                                    <div class="col-md-6">
-                                        <label for="runner_type" class="form-label">{"Runner Type"}</label>
-                                        <select 
-                                            class="form-select" 
-                                            id="runner_type"
-                                            onchange={on_runner_type_change}
-                                        >
-                                            <option value="SALRunner" selected={matches!(form.runner_type, RunnerType::SALRunner)}>
-                                                {"SAL Runner"}
-                                            </option>
-                                            <option value="OSISRunner" selected={matches!(form.runner_type, RunnerType::OSISRunner)}>
-                                                {"OSIS Runner"}
-                                            </option>
-                                            <option value="VRunner" selected={matches!(form.runner_type, RunnerType::VRunner)}>
-                                                {"V Runner"}
-                                            </option>
-                                        </select>
-                                    </div>
-                                </div>
-
-                                <div class="row mb-3">
-                                    <div class="col-md-6">
-                                        <label for="binary_path" class="form-label">{"Binary Path"}</label>
-                                        <input 
-                                            type="text" 
-                                            class="form-control" 
-                                            id="binary_path"
-                                            value={form.binary_path.clone()}
-                                            onchange={on_binary_path_change}
-                                            required=true
-                                            placeholder="/path/to/runner/binary"
-                                        />
-                                        <div class="form-text">{"Full path to the runner executable"}</div>
-                                    </div>
-                                    <div class="col-md-6">
-                                        <label for="script_type" class="form-label">{"Script Type"}</label>
-                                        <input 
-                                            type="text" 
-                                            class="form-control" 
-                                            id="script_type"
-                                            value={form.script_type.clone()}
-                                            onchange={on_script_type_change}
-                                            required=true
-                                            placeholder="e.g., rhai, bash, python"
-                                        />
-                                        <div class="form-text">{"Type of scripts this runner will execute"}</div>
-                                    </div>
-                                </div>
-
-                                <div class="row mb-3">
-                                    <div class="col-md-6">
-                                        <label for="process_manager" class="form-label">{"Process Manager"}</label>
-                                        <select 
-                                            class="form-select" 
-                                            id="process_manager"
-                                            onchange={on_process_manager_change}
-                                        >
-                                            <option value="Simple" selected={matches!(form.process_manager_type, ProcessManagerType::Simple)}>
-                                                {"Simple"}
-                                            </option>
-                                            <option value="Tmux" selected={matches!(form.process_manager_type, ProcessManagerType::Tmux)}>
-                                                {"Tmux"}
-                                            </option>
-                                        </select>
-                                        <div class="form-text">{"Process management system to use"}</div>
-                                    </div>
-                                </div>
-
-                                <div class="d-flex justify-content-end gap-2">
-                                    <button type="button" class="btn btn-outline-secondary" onclick={on_cancel.clone()}>
-                                        {"Cancel"}
-                                    </button>
-                                    <button type="submit" class="btn btn-primary" disabled={*loading}>
-                                        if *loading {
-                                            <div class="spinner-border spinner-border-sm me-2" role="status">
-                                                <span class="visually-hidden">{"Loading..."}</span>
-                                            </div>
-                                            {"Adding Runner..."}
-                                        } else {
-                                            <i class="bi bi-plus-circle me-1"></i>
-                                            {"Add Runner"}
-                                        }
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/dashboard.rs b/clients/admin-ui/src/components/dashboard.rs
deleted file mode 100644
index 7d9dc8d..0000000
--- a/clients/admin-ui/src/components/dashboard.rs
+++ /dev/null
@@ -1,294 +0,0 @@
-use yew::prelude::*;
-use gloo::console;
-use wasm_bindgen_futures::spawn_local;
-
-use crate::types::{RunnerInfo, ProcessStatus};
-use crate::components::{status_badge::StatusBadge, runner_card::RunnerCard};
-use crate::services::{SupervisorService, use_supervisor_service};
-
-#[function_component(Dashboard)]
-pub fn dashboard() -> Html {
-    let server_url = "http://localhost:8081"; // Default supervisor server URL
-    let (service, service_error) = use_supervisor_service(server_url);
-    let runners = use_state(|| Vec::<RunnerInfo>::new());
-    let loading = use_state(|| false);
-    let error = use_state(|| None::<String>);
-
-    // Load runners on component mount and when service is available
-    {
-        let runners = runners.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let service = service.clone();
-
-        use_effect_with(service.clone(), move |service| {
-            if let Some(service) = service {
-                let runners = runners.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let service = service.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.get_all_runners().await {
-                        Ok(runner_list) => {
-                            runners.set(runner_list);
-                            error.set(None);
-                        }
-                        Err(e) => {
-                            console::error!("Failed to load runners:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        });
-    }
-
-    let on_refresh = {
-        let runners = runners.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let service = service.clone();
-
-        Callback::from(move |_: MouseEvent| {
-            if let Some(service) = &service {
-                let runners = runners.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let service = service.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.get_all_runners().await {
-                        Ok(runner_list) => {
-                            runners.set(runner_list);
-                            error.set(None);
-                        }
-                        Err(e) => {
-                            console::error!("Failed to refresh runners:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_start_all = {
-        let service = service.clone();
-        let on_refresh = on_refresh.clone();
-        let loading = loading.clone();
-
-        Callback::from(move |_: MouseEvent| {
-            if let Some(service) = &service {
-                let service = service.clone();
-                let on_refresh = on_refresh.clone();
-                let loading = loading.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.start_all().await {
-                        Ok(results) => {
-                            console::log!("Start all results:", format!("{:?}", results));
-                            on_refresh.emit(web_sys::MouseEvent::new("click").unwrap());
-                        }
-                        Err(e) => {
-                            console::error!("Failed to start all runners:", e.to_string());
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_stop_all = {
-        let service = service.clone();
-        let on_refresh = on_refresh.clone();
-        let loading = loading.clone();
-
-        Callback::from(move |_: MouseEvent| {
-            if let Some(service) = &service {
-                if gloo::dialogs::confirm("Are you sure you want to stop all runners?") {
-                    let service = service.clone();
-                    let on_refresh = on_refresh.clone();
-                    let loading = loading.clone();
-
-                    loading.set(true);
-                    spawn_local(async move {
-                        match service.stop_all(false).await {
-                            Ok(results) => {
-                                console::log!("Stop all results:", format!("{:?}", results));
-                                on_refresh.emit(web_sys::MouseEvent::new("click").unwrap());
-                            }
-                            Err(e) => {
-                                console::error!("Failed to stop all runners:", e.to_string());
-                            }
-                        }
-                        loading.set(false);
-                    });
-                }
-            }
-        })
-    };
-
-    // Create a proper on_update callback for RunnerCard
-    let on_runner_update = {
-        let on_refresh = on_refresh.clone();
-        Callback::from(move |_: ()| {
-            on_refresh.emit(web_sys::MouseEvent::new("click").unwrap());
-        })
-    };
-
-    // Calculate statistics
-    let total_runners = runners.len();
-    let running_count = runners.iter().filter(|r| r.status == ProcessStatus::Running).count();
-    let stopped_count = runners.iter().filter(|r| r.status == ProcessStatus::Stopped).count();
-    let failed_count = runners.iter().filter(|r| r.status == ProcessStatus::Failed).count();
-
-    html! {
-        <div class="container-fluid">
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <h1 class="h3 mb-0">
-                            <i class="bi bi-speedometer2 me-2"></i>
-                            {"Dashboard"}
-                        </h1>
-                        <div class="btn-group">
-                            <button class="btn btn-outline-primary" onclick={on_refresh} disabled={*loading}>
-                                <i class="bi bi-arrow-clockwise me-1"></i>
-                                {"Refresh"}
-                            </button>
-                            <button class="btn btn-outline-success" onclick={on_start_all} disabled={*loading || total_runners == 0}>
-                                <i class="bi bi-play-fill me-1"></i>
-                                {"Start All"}
-                            </button>
-                            <button class="btn btn-outline-warning" onclick={on_stop_all} disabled={*loading || total_runners == 0}>
-                                <i class="bi bi-stop-fill me-1"></i>
-                                {"Stop All"}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            // Error display
-            if let Some(err) = service_error {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-danger">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Service Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            if let Some(err) = error.as_ref() {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-warning">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            // Statistics cards
-            <div class="row mb-4">
-                <div class="col-md-3 mb-3">
-                    <div class="card text-center">
-                        <div class="card-body">
-                            <h2 class="card-title text-primary">{total_runners}</h2>
-                            <p class="card-text">{"Total Runners"}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-3">
-                    <div class="card text-center">
-                        <div class="card-body">
-                            <h2 class="card-title text-success">{running_count}</h2>
-                            <p class="card-text">{"Running"}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-3">
-                    <div class="card text-center">
-                        <div class="card-body">
-                            <h2 class="card-title text-warning">{stopped_count}</h2>
-                            <p class="card-text">{"Stopped"}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-3">
-                    <div class="card text-center">
-                        <div class="card-body">
-                            <h2 class="card-title text-danger">{failed_count}</h2>
-                            <p class="card-text">{"Failed"}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            // Loading state
-            if *loading {
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <div class="spinner-border text-primary" role="status">
-                            <span class="visually-hidden">{"Loading..."}</span>
-                        </div>
-                        <p class="mt-2">{"Loading runners..."}</p>
-                    </div>
-                </div>
-            }
-
-            // Runners grid
-            if !*loading && total_runners > 0 {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <h4>{"Active Runners"}</h4>
-                    </div>
-                </div>
-                <div class="row">
-                    {for runners.iter().map(|runner| {
-                        if let Some(service) = &service {
-                            html! {
-                                <RunnerCard 
-                                    runner={runner.clone()} 
-                                    service={service.clone()}
-                                    on_update={on_runner_update.clone()}
-                                />
-                            }
-                        } else {
-                            html! {}
-                        }
-                    })}
-                </div>
-            }
-
-            // Empty state
-            if !*loading && total_runners == 0 && service.is_some() {
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <div class="card">
-                            <div class="card-body py-5">
-                                <i class="bi bi-cpu display-1 text-muted mb-3"></i>
-                                <h4 class="text-muted">{"No Runners Found"}</h4>
-                                <p class="text-muted">{"Get started by adding your first runner."}</p>
-                                <a href="/runners/add" class="btn btn-primary">
-                                    <i class="bi bi-plus-circle me-1"></i>
-                                    {"Add Runner"}
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/mod.rs b/clients/admin-ui/src/components/mod.rs
deleted file mode 100644
index bc6a435..0000000
--- a/clients/admin-ui/src/components/mod.rs
+++ /dev/null
@@ -1,7 +0,0 @@
-pub mod navbar;
-pub mod dashboard;
-pub mod runners;
-pub mod runner_detail;
-pub mod add_runner;
-pub mod runner_card;
-pub mod status_badge;
diff --git a/clients/admin-ui/src/components/navbar.rs b/clients/admin-ui/src/components/navbar.rs
deleted file mode 100644
index bc5bb41..0000000
--- a/clients/admin-ui/src/components/navbar.rs
+++ /dev/null
@@ -1,67 +0,0 @@
-use yew::prelude::*;
-use yew_router::prelude::*;
-use crate::app::Route;
-
-#[function_component(Navbar)]
-pub fn navbar() -> Html {
-    let navigator = use_navigator().unwrap();
-
-    let on_dashboard_click = {
-        let navigator = navigator.clone();
-        Callback::from(move |_| navigator.push(&Route::Dashboard))
-    };
-
-    let on_runners_click = {
-        let navigator = navigator.clone();
-        Callback::from(move |_| navigator.push(&Route::Runners))
-    };
-
-    let on_add_runner_click = {
-        let navigator = navigator.clone();
-        Callback::from(move |_| navigator.push(&Route::AddRunner))
-    };
-
-    html! {
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-            <div class="container-fluid">
-                <a class="navbar-brand" href="#">
-                    <i class="bi bi-gear-fill me-2"></i>
-                    {"Hero Supervisor Admin"}
-                </a>
-                
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
-                        data-bs-target="#navbarNav" aria-controls="navbarNav" 
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
-                
-                <div class="collapse navbar-collapse" id="navbarNav">
-                    <ul class="navbar-nav me-auto">
-                        <li class="nav-item">
-                            <button class="nav-link btn btn-link" onclick={on_dashboard_click}>
-                                <i class="bi bi-speedometer2 me-1"></i>
-                                {"Dashboard"}
-                            </button>
-                        </li>
-                        <li class="nav-item">
-                            <button class="nav-link btn btn-link" onclick={on_runners_click}>
-                                <i class="bi bi-cpu me-1"></i>
-                                {"Runners"}
-                            </button>
-                        </li>
-                        <li class="nav-item">
-                            <button class="nav-link btn btn-link" onclick={on_add_runner_click}>
-                                <i class="bi bi-plus-circle me-1"></i>
-                                {"Add Runner"}
-                            </button>
-                        </li>
-                    </ul>
-                    
-                    <div class="navbar-text">
-                        <small class="text-muted">{"Connected to Supervisor"}</small>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    }
-}
diff --git a/clients/admin-ui/src/components/runner_card.rs b/clients/admin-ui/src/components/runner_card.rs
deleted file mode 100644
index e287dd2..0000000
--- a/clients/admin-ui/src/components/runner_card.rs
+++ /dev/null
@@ -1,191 +0,0 @@
-use yew::prelude::*;
-use yew_router::prelude::*;
-use gloo::console;
-use wasm_bindgen_futures::spawn_local;
-
-use crate::app::Route;
-use crate::types::{RunnerInfo, ProcessStatus};
-use crate::components::status_badge::StatusBadge;
-use crate::services::SupervisorService;
-
-#[derive(Properties, PartialEq)]
-pub struct RunnerCardProps {
-    pub runner: RunnerInfo,
-    pub service: SupervisorService,
-    pub on_update: Callback<()>,
-}
-
-#[function_component(RunnerCard)]
-pub fn runner_card(props: &RunnerCardProps) -> Html {
-    let navigator = use_navigator().unwrap();
-    let loading = use_state(|| false);
-
-    let runner_id = props.runner.id.clone();
-    let on_view_details = {
-        let navigator = navigator.clone();
-        let runner_id = runner_id.clone();
-        Callback::from(move |_| {
-            navigator.push(&Route::RunnerDetail { id: runner_id.clone() });
-        })
-    };
-
-    let on_start = {
-        let service = props.service.clone();
-        let runner_id = runner_id.clone();
-        let loading = loading.clone();
-        let on_update = props.on_update.clone();
-        Callback::from(move |_| {
-            let service = service.clone();
-            let runner_id = runner_id.clone();
-            let loading = loading.clone();
-            let on_update = on_update.clone();
-            
-            loading.set(true);
-            spawn_local(async move {
-                match service.start_runner(&runner_id).await {
-                    Ok(_) => {
-                        console::log!("Runner started successfully");
-                        on_update.emit(());
-                    }
-                    Err(e) => {
-                        console::error!("Failed to start runner:", e.to_string());
-                    }
-                }
-                loading.set(false);
-            });
-        })
-    };
-
-    let on_stop = {
-        let service = props.service.clone();
-        let runner_id = runner_id.clone();
-        let loading = loading.clone();
-        let on_update = props.on_update.clone();
-        Callback::from(move |_| {
-            let service = service.clone();
-            let runner_id = runner_id.clone();
-            let loading = loading.clone();
-            let on_update = on_update.clone();
-            
-            loading.set(true);
-            spawn_local(async move {
-                match service.stop_runner(&runner_id, false).await {
-                    Ok(_) => {
-                        console::log!("Runner stopped successfully");
-                        on_update.emit(());
-                    }
-                    Err(e) => {
-                        console::error!("Failed to stop runner:", e.to_string());
-                    }
-                }
-                loading.set(false);
-            });
-        })
-    };
-
-    let on_remove = {
-        let service = props.service.clone();
-        let runner_id = runner_id.clone();
-        let loading = loading.clone();
-        let on_update = props.on_update.clone();
-        Callback::from(move |_| {
-            if gloo::dialogs::confirm("Are you sure you want to remove this runner?") {
-                let service = service.clone();
-                let runner_id = runner_id.clone();
-                let loading = loading.clone();
-                let on_update = on_update.clone();
-                
-                loading.set(true);
-                spawn_local(async move {
-                    match service.remove_runner(&runner_id).await {
-                        Ok(_) => {
-                            console::log!("Runner removed successfully");
-                            on_update.emit(());
-                        }
-                        Err(e) => {
-                            console::error!("Failed to remove runner:", e.to_string());
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let is_loading = *loading;
-    let can_start = matches!(props.runner.status, ProcessStatus::Stopped | ProcessStatus::Failed);
-    let can_stop = matches!(props.runner.status, ProcessStatus::Running);
-
-    html! {
-        <div class="col-md-6 col-lg-4 mb-4">
-            <div class="card h-100">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h6 class="mb-0">
-                        <i class="bi bi-cpu me-2"></i>
-                        {&props.runner.id}
-                    </h6>
-                    <StatusBadge status={props.runner.status.clone()} />
-                </div>
-                <div class="card-body">
-                    <div class="mb-2">
-                        <small class="text-muted">{"Type: "}</small>
-                        <span class="badge bg-info">
-                            {format!("{:?}", props.runner.config.runner_type)}
-                        </span>
-                    </div>
-                    <div class="mb-2">
-                        <small class="text-muted">{"Script: "}</small>
-                        <code class="small">{&props.runner.config.script_type}</code>
-                    </div>
-                    <div class="mb-3">
-                        <small class="text-muted">{"Binary: "}</small>
-                        <code class="small">{props.runner.config.binary_path.to_string_lossy()}</code>
-                    </div>
-                    
-                    if !props.runner.logs.is_empty() {
-                        <div class="mb-3">
-                            <small class="text-muted">{"Recent logs: "}</small>
-                            <div class="log-container p-2 rounded small">
-                                {for props.runner.logs.iter().take(3).map(|log| html! {
-                                    <div>{&log.message}</div>
-                                })}
-                            </div>
-                        </div>
-                    }
-                </div>
-                <div class="card-footer">
-                    <div class="btn-group w-100" role="group">
-                        if can_start && !is_loading {
-                            <button class="btn btn-outline-success btn-sm" onclick={on_start}>
-                                <i class="bi bi-play-fill me-1"></i>
-                                {"Start"}
-                            </button>
-                        }
-                        if can_stop && !is_loading {
-                            <button class="btn btn-outline-warning btn-sm" onclick={on_stop}>
-                                <i class="bi bi-stop-fill me-1"></i>
-                                {"Stop"}
-                            </button>
-                        }
-                        if is_loading {
-                            <button class="btn btn-outline-secondary btn-sm" disabled=true>
-                                <div class="spinner-border spinner-border-sm me-1" role="status">
-                                    <span class="visually-hidden">{"Loading..."}</span>
-                                </div>
-                                {"Working..."}
-                            </button>
-                        }
-                        <button class="btn btn-outline-primary btn-sm" onclick={on_view_details}>
-                            <i class="bi bi-eye me-1"></i>
-                            {"Details"}
-                        </button>
-                        <button class="btn btn-outline-danger btn-sm" onclick={on_remove} disabled={is_loading}>
-                            <i class="bi bi-trash me-1"></i>
-                            {"Remove"}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/runner_detail.rs b/clients/admin-ui/src/components/runner_detail.rs
deleted file mode 100644
index 27a2ad8..0000000
--- a/clients/admin-ui/src/components/runner_detail.rs
+++ /dev/null
@@ -1,437 +0,0 @@
-use yew::prelude::*;
-use yew_router::prelude::*;
-use gloo::console;
-use wasm_bindgen_futures::spawn_local;
-use web_sys::HtmlTextAreaElement;
-
-use crate::app::Route;
-use crate::types::{RunnerInfo, ProcessStatus, JobBuilder, JobType};
-use crate::components::status_badge::StatusBadge;
-use crate::services::{SupervisorService, use_supervisor_service};
-
-#[derive(Properties, PartialEq)]
-pub struct RunnerDetailProps {
-    pub runner_id: String,
-}
-
-#[function_component(RunnerDetail)]
-pub fn runner_detail(props: &RunnerDetailProps) -> Html {
-    let navigator = use_navigator().unwrap();
-    let server_url = "http://localhost:8081";
-    let (service, service_error) = use_supervisor_service(server_url);
-    
-    let runner = use_state(|| None::<RunnerInfo>);
-    let loading = use_state(|| false);
-    let error = use_state(|| None::<String>);
-    let logs_loading = use_state(|| false);
-    let job_script = use_state(|| String::new());
-    let job_loading = use_state(|| false);
-    let job_result = use_state(|| None::<String>);
-
-    // Load runner details
-    {
-        let runner = runner.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let service = service.clone();
-        let runner_id = props.runner_id.clone();
-
-        use_effect_with((service.clone(), runner_id.clone()), move |(service, runner_id)| {
-            if let Some(service) = service {
-                let runner = runner.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let service = service.clone();
-                let runner_id = runner_id.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.get_all_runners().await {
-                        Ok(runners) => {
-                            if let Some(found_runner) = runners.into_iter().find(|r| r.id == runner_id) {
-                                runner.set(Some(found_runner));
-                                error.set(None);
-                            } else {
-                                error.set(Some("Runner not found".to_string()));
-                            }
-                        }
-                        Err(e) => {
-                            console::error!("Failed to load runner:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        });
-    }
-
-    let on_back = {
-        let navigator = navigator.clone();
-        Callback::from(move |_| navigator.push(&Route::Runners))
-    };
-
-    let on_start = {
-        let service = service.clone();
-        let runner_id = props.runner_id.clone();
-        let runner = runner.clone();
-        let loading = loading.clone();
-
-        Callback::from(move |_| {
-            if let Some(service) = &service {
-                let service = service.clone();
-                let runner_id = runner_id.clone();
-                let runner = runner.clone();
-                let loading = loading.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.start_runner(&runner_id).await {
-                        Ok(_) => {
-                            console::log!("Runner started successfully");
-                            // Refresh runner status
-                            if let Ok(status) = service.get_runner_status(&runner_id).await {
-                                if let Some(mut current_runner) = (*runner).clone() {
-                                    current_runner.status = status;
-                                    runner.set(Some(current_runner));
-                                }
-                            }
-                        }
-                        Err(e) => {
-                            console::error!("Failed to start runner:", e.to_string());
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_stop = {
-        let service = service.clone();
-        let runner_id = props.runner_id.clone();
-        let runner = runner.clone();
-        let loading = loading.clone();
-
-        Callback::from(move |_| {
-            if let Some(service) = &service {
-                let service = service.clone();
-                let runner_id = runner_id.clone();
-                let runner = runner.clone();
-                let loading = loading.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.stop_runner(&runner_id, false).await {
-                        Ok(_) => {
-                            console::log!("Runner stopped successfully");
-                            // Refresh runner status
-                            if let Ok(status) = service.get_runner_status(&runner_id).await {
-                                if let Some(mut current_runner) = (*runner).clone() {
-                                    current_runner.status = status;
-                                    runner.set(Some(current_runner));
-                                }
-                            }
-                        }
-                        Err(e) => {
-                            console::error!("Failed to stop runner:", e.to_string());
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_refresh_logs = {
-        let service = service.clone();
-        let runner_id = props.runner_id.clone();
-        let runner = runner.clone();
-        let logs_loading = logs_loading.clone();
-
-        Callback::from(move |_| {
-            if let Some(service) = &service {
-                let service = service.clone();
-                let runner_id = runner_id.clone();
-                let runner = runner.clone();
-                let logs_loading = logs_loading.clone();
-
-                logs_loading.set(true);
-                spawn_local(async move {
-                    match service.get_runner_logs(&runner_id, Some(100), false).await {
-                        Ok(logs) => {
-                            if let Some(mut current_runner) = (*runner).clone() {
-                                current_runner.logs = logs;
-                                runner.set(Some(current_runner));
-                            }
-                        }
-                        Err(e) => {
-                            console::error!("Failed to refresh logs:", e.to_string());
-                        }
-                    }
-                    logs_loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_script_change = {
-        let job_script = job_script.clone();
-        Callback::from(move |e: Event| {
-            let textarea: HtmlTextAreaElement = e.target_unchecked_into();
-            job_script.set(textarea.value());
-        })
-    };
-
-    let on_run_job = {
-        let service = service.clone();
-        let runner_id = props.runner_id.clone();
-        let job_script = job_script.clone();
-        let job_loading = job_loading.clone();
-        let job_result = job_result.clone();
-
-        Callback::from(move |_| {
-            if let Some(service) = &service {
-                let script = (*job_script).clone();
-                if !script.trim().is_empty() {
-                    let service = service.clone();
-                    let runner_id = runner_id.clone();
-                    let job_loading = job_loading.clone();
-                    let job_result = job_result.clone();
-
-                    job_loading.set(true);
-                    job_result.set(None);
-                    spawn_local(async move {
-                        let job = JobBuilder::new()
-                            .caller_id("admin-ui")
-                            .context_id("test-job")
-                            .payload(script)
-                            .job_type(JobType::SAL)
-                            .runner(&runner_id)
-                            .build();
-
-                        match job {
-                            Ok(job) => {
-                                match service.queue_and_wait(&runner_id, job, 30).await {
-                                    Ok(result) => {
-                                        job_result.set(result);
-                                    }
-                                    Err(e) => {
-                                        job_result.set(Some(format!("Error: {}", e)));
-                                    }
-                                }
-                            }
-                            Err(e) => {
-                                job_result.set(Some(format!("Job creation error: {}", e)));
-                            }
-                        }
-                        job_loading.set(false);
-                    });
-                }
-            }
-        })
-    };
-
-    html! {
-        <div class="container-fluid">
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <h1 class="h3 mb-0">
-                            <i class="bi bi-cpu me-2"></i>
-                            {"Runner Details: "}{&props.runner_id}
-                        </h1>
-                        <button class="btn btn-outline-secondary" onclick={on_back}>
-                            <i class="bi bi-arrow-left me-1"></i>
-                            {"Back to Runners"}
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            // Error display
-            if let Some(err) = service_error {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-danger">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Service Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            if let Some(err) = error.as_ref() {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-warning">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            // Loading state
-            if *loading {
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <div class="spinner-border text-primary" role="status">
-                            <span class="visually-hidden">{"Loading..."}</span>
-                        </div>
-                        <p class="mt-2">{"Loading runner details..."}</p>
-                    </div>
-                </div>
-            }
-
-            // Runner details
-            if let Some(runner_info) = runner.as_ref() {
-                <div class="row">
-                    // Left column - Runner info and controls
-                    <div class="col-lg-6 mb-4">
-                        <div class="card h-100">
-                            <div class="card-header d-flex justify-content-between align-items-center">
-                                <h5 class="mb-0">{"Runner Information"}</h5>
-                                <StatusBadge status={runner_info.status.clone()} />
-                            </div>
-                            <div class="card-body">
-                                <div class="row mb-3">
-                                    <div class="col-sm-4"><strong>{"ID:"}</strong></div>
-                                    <div class="col-sm-8"><code>{&runner_info.id}</code></div>
-                                </div>
-                                <div class="row mb-3">
-                                    <div class="col-sm-4"><strong>{"Type:"}</strong></div>
-                                    <div class="col-sm-8">
-                                        <span class="badge bg-info">
-                                            {format!("{:?}", runner_info.config.runner_type)}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div class="row mb-3">
-                                    <div class="col-sm-4"><strong>{"Script Type:"}</strong></div>
-                                    <div class="col-sm-8"><code>{&runner_info.config.script_type}</code></div>
-                                </div>
-                                <div class="row mb-3">
-                                    <div class="col-sm-4"><strong>{"Binary Path:"}</strong></div>
-                                    <div class="col-sm-8"><code class="small">{runner_info.config.binary_path.to_string_lossy()}</code></div>
-                                </div>
-                                <div class="row mb-3">
-                                    <div class="col-sm-4"><strong>{"Restart Policy:"}</strong></div>
-                                    <div class="col-sm-8">{&runner_info.config.restart_policy}</div>
-                                </div>
-                            </div>
-                            <div class="card-footer">
-                                <div class="btn-group w-100">
-                                    if matches!(runner_info.status, ProcessStatus::Stopped | ProcessStatus::Failed) && !*loading {
-                                        <button class="btn btn-outline-success" onclick={on_start}>
-                                            <i class="bi bi-play-fill me-1"></i>
-                                            {"Start"}
-                                        </button>
-                                    }
-                                    if matches!(runner_info.status, ProcessStatus::Running) && !*loading {
-                                        <button class="btn btn-outline-warning" onclick={on_stop}>
-                                            <i class="bi bi-stop-fill me-1"></i>
-                                            {"Stop"}
-                                        </button>
-                                    }
-                                    if *loading {
-                                        <button class="btn btn-outline-secondary" disabled=true>
-                                            <div class="spinner-border spinner-border-sm me-1" role="status">
-                                                <span class="visually-hidden">{"Loading..."}</span>
-                                            </div>
-                                            {"Working..."}
-                                        </button>
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    // Right column - Job execution
-                    <div class="col-lg-6 mb-4">
-                        <div class="card h-100">
-                            <div class="card-header">
-                                <h5 class="mb-0">{"Test Job Execution"}</h5>
-                            </div>
-                            <div class="card-body">
-                                <div class="mb-3">
-                                    <label for="job_script" class="form-label">{"Script Content"}</label>
-                                    <textarea 
-                                        class="form-control" 
-                                        id="job_script"
-                                        rows="6"
-                                        value={(*job_script).clone()}
-                                        onchange={on_script_change}
-                                        placeholder="Enter script content to execute..."
-                                    ></textarea>
-                                </div>
-                                <button 
-                                    class="btn btn-primary w-100 mb-3" 
-                                    onclick={on_run_job}
-                                    disabled={*job_loading || job_script.trim().is_empty()}
-                                >
-                                    if *job_loading {
-                                        <div class="spinner-border spinner-border-sm me-2" role="status">
-                                            <span class="visually-hidden">{"Loading..."}</span>
-                                        </div>
-                                        {"Running Job..."}
-                                    } else {
-                                        <i class="bi bi-play-circle me-1"></i>
-                                        {"Run Job"}
-                                    }
-                                </button>
-                                
-                                if let Some(result) = job_result.as_ref() {
-                                    <div class="mb-3">
-                                        <label class="form-label">{"Job Result"}</label>
-                                        <div class="log-container p-3 rounded">
-                                            <pre class="mb-0">{result}</pre>
-                                        </div>
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                // Logs section
-                <div class="row">
-                    <div class="col-12">
-                        <div class="card">
-                            <div class="card-header d-flex justify-content-between align-items-center">
-                                <h5 class="mb-0">{"Logs"}</h5>
-                                <button class="btn btn-outline-primary btn-sm" onclick={on_refresh_logs} disabled={*logs_loading}>
-                                    if *logs_loading {
-                                        <div class="spinner-border spinner-border-sm me-1" role="status">
-                                            <span class="visually-hidden">{"Loading..."}</span>
-                                        </div>
-                                        {"Refreshing..."}
-                                    } else {
-                                        <i class="bi bi-arrow-clockwise me-1"></i>
-                                        {"Refresh Logs"}
-                                    }
-                                </button>
-                            </div>
-                            <div class="card-body p-0">
-                                if runner_info.logs.is_empty() {
-                                    <div class="p-4 text-center text-muted">
-                                        {"No logs available"}
-                                    </div>
-                                } else {
-                                    <div class="log-container p-3" style="max-height: 400px; overflow-y: auto;">
-                                        {for runner_info.logs.iter().map(|log| html! {
-                                            <div class="mb-1">
-                                                <small class="text-muted me-2">{&log.timestamp}</small>
-                                                {&log.message}
-                                            </div>
-                                        })}
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/runners.rs b/clients/admin-ui/src/components/runners.rs
deleted file mode 100644
index a39d33b..0000000
--- a/clients/admin-ui/src/components/runners.rs
+++ /dev/null
@@ -1,278 +0,0 @@
-use yew::prelude::*;
-use yew_router::prelude::*;
-use gloo::console;
-use wasm_bindgen_futures::spawn_local;
-
-use crate::app::Route;
-use crate::types::{RunnerInfo, ProcessStatus};
-use crate::components::{status_badge::StatusBadge, runner_card::RunnerCard};
-use crate::services::{SupervisorService, use_supervisor_service};
-
-#[function_component(RunnersList)]
-pub fn runners_list() -> Html {
-    let navigator = use_navigator().unwrap();
-    let server_url = "http://localhost:8081"; // Default supervisor server URL
-    let (service, service_error) = use_supervisor_service(server_url);
-    let runners = use_state(|| Vec::<RunnerInfo>::new());
-    let loading = use_state(|| false);
-    let error = use_state(|| None::<String>);
-    let view_mode = use_state(|| "grid"); // "grid" or "table"
-
-    // Load runners on component mount and when service is available
-    {
-        let runners = runners.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let service = service.clone();
-
-        use_effect_with(service.clone(), move |service| {
-            if let Some(service) = service {
-                let runners = runners.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let service = service.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.get_all_runners().await {
-                        Ok(runner_list) => {
-                            runners.set(runner_list);
-                            error.set(None);
-                        }
-                        Err(e) => {
-                            console::error!("Failed to load runners:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        });
-    }
-
-    let on_refresh = {
-        let runners = runners.clone();
-        let loading = loading.clone();
-        let error = error.clone();
-        let service = service.clone();
-
-        Callback::from(move |_: MouseEvent| {
-            if let Some(service) = &service {
-                let runners = runners.clone();
-                let loading = loading.clone();
-                let error = error.clone();
-                let service = service.clone();
-
-                loading.set(true);
-                spawn_local(async move {
-                    match service.get_all_runners().await {
-                        Ok(runner_list) => {
-                            runners.set(runner_list);
-                            error.set(None);
-                        }
-                        Err(e) => {
-                            console::error!("Failed to refresh runners:", e.to_string());
-                            error.set(Some(e.to_string()));
-                        }
-                    }
-                    loading.set(false);
-                });
-            }
-        })
-    };
-
-    let on_add_runner = {
-        let navigator = navigator.clone();
-        Callback::from(move |_: MouseEvent| navigator.push(&Route::AddRunner))
-    };
-
-    let on_toggle_view = {
-        let view_mode = view_mode.clone();
-        Callback::from(move |_: MouseEvent| {
-            let current: &str = view_mode.as_ref();
-            view_mode.set(if current == "grid" { "table" } else { "grid" });
-        })
-    };
-
-    // Create a separate callback for runner updates that matches the expected signature
-    let on_runner_update = {
-        let on_refresh = on_refresh.clone();
-        Callback::from(move |_: ()| {
-            on_refresh.emit(web_sys::MouseEvent::new("click").unwrap());
-        })
-    };
-
-    html! {
-        <div class="container-fluid">
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <h1 class="h3 mb-0">
-                            <i class="bi bi-cpu me-2"></i>
-                            {"Runners"}
-                        </h1>
-                        <div class="btn-group">
-                            <button class="btn btn-outline-secondary" onclick={on_toggle_view}>
-                                if *view_mode == "grid" {
-                                    <i class="bi bi-table me-1"></i>
-                                    {"Table View"}
-                                } else {
-                                    <i class="bi bi-grid-3x3-gap me-1"></i>
-                                    {"Grid View"}
-                                }
-                            </button>
-                            <button class="btn btn-outline-primary" onclick={on_refresh} disabled={*loading}>
-                                <i class="bi bi-arrow-clockwise me-1"></i>
-                                {"Refresh"}
-                            </button>
-                            <button class="btn btn-primary" onclick={on_add_runner.clone()}>
-                                <i class="bi bi-plus-circle me-1"></i>
-                                {"Add Runner"}
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            // Error display
-            if let Some(err) = service_error {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-danger">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Service Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            if let Some(err) = error.as_ref() {
-                <div class="row mb-4">
-                    <div class="col-12">
-                        <div class="alert alert-warning">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            {"Error: "}{err}
-                        </div>
-                    </div>
-                </div>
-            }
-
-            // Loading state
-            if *loading {
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <div class="spinner-border text-primary" role="status">
-                            <span class="visually-hidden">{"Loading..."}</span>
-                        </div>
-                        <p class="mt-2">{"Loading runners..."}</p>
-                    </div>
-                </div>
-            }
-
-            // Content based on view mode
-            if !*loading && !runners.is_empty() {
-                if *view_mode == "grid" {
-                    // Grid view
-                    <div class="row">
-                        {for runners.iter().map(|runner| {
-                            if let Some(service) = &service {
-                                html! {
-                                    <RunnerCard 
-                                        runner={runner.clone()} 
-                                        service={service.clone()}
-                                        on_update={on_runner_update.clone()}
-                                    />
-                                }
-                            } else {
-                                html! {}
-                            }
-                        })}
-                    </div>
-                } else {
-                    // Table view
-                    <div class="row">
-                        <div class="col-12">
-                            <div class="card">
-                                <div class="card-body">
-                                    <div class="table-responsive">
-                                        <table class="table table-dark table-hover">
-                                            <thead>
-                                                <tr>
-                                                    <th>{"ID"}</th>
-                                                    <th>{"Type"}</th>
-                                                    <th>{"Status"}</th>
-                                                    <th>{"Script Type"}</th>
-                                                    <th>{"Binary Path"}</th>
-                                                    <th>{"Actions"}</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                {for runners.iter().map(|runner| {
-                                                    let runner_id = runner.id.clone();
-                                                    let on_view_details = {
-                                                        let navigator = navigator.clone();
-                                                        let runner_id = runner_id.clone();
-                                                        Callback::from(move |_| {
-                                                            navigator.push(&Route::RunnerDetail { id: runner_id.clone() });
-                                                        })
-                                                    };
-
-                                                    html! {
-                                                        <tr>
-                                                            <td>
-                                                                <code>{&runner.id}</code>
-                                                            </td>
-                                                            <td>
-                                                                <span class="badge bg-info">
-                                                                    {format!("{:?}", runner.config.runner_type)}
-                                                                </span>
-                                                            </td>
-                                                            <td>
-                                                                <StatusBadge status={runner.status.clone()} />
-                                                            </td>
-                                                            <td>
-                                                                <code class="small">{&runner.config.script_type}</code>
-                                                            </td>
-                                                            <td>
-                                                                <code class="small">{runner.config.binary_path.to_string_lossy()}</code>
-                                                            </td>
-                                                            <td>
-                                                                <button class="btn btn-outline-primary btn-sm" onclick={on_view_details}>
-                                                                    <i class="bi bi-eye me-1"></i>
-                                                                    {"Details"}
-                                                                </button>
-                                                            </td>
-                                                        </tr>
-                                                    }
-                                                })}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                }
-            }
-
-            // Empty state
-            if !*loading && runners.is_empty() && service.is_some() {
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <div class="card">
-                            <div class="card-body py-5">
-                                <i class="bi bi-cpu display-1 text-muted mb-3"></i>
-                                <h4 class="text-muted">{"No Runners Found"}</h4>
-                                <p class="text-muted">{"Get started by adding your first runner."}</p>
-                                <button class="btn btn-primary" onclick={on_add_runner.clone()}>
-                                    <i class="bi bi-plus-circle me-1"></i>
-                                    {"Add Runner"}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/components/status_badge.rs b/clients/admin-ui/src/components/status_badge.rs
deleted file mode 100644
index 895bf73..0000000
--- a/clients/admin-ui/src/components/status_badge.rs
+++ /dev/null
@@ -1,30 +0,0 @@
-use yew::prelude::*;
-use crate::types::ProcessStatus;
-
-#[derive(Properties, PartialEq)]
-pub struct StatusBadgeProps {
-    pub status: ProcessStatus,
-    #[prop_or_default]
-    pub size: Option<String>,
-}
-
-#[function_component(StatusBadge)]
-pub fn status_badge(props: &StatusBadgeProps) -> Html {
-    let (badge_class, icon, text) = match props.status {
-        ProcessStatus::Running => ("badge bg-success", "bi-play-circle-fill", "Running"),
-        ProcessStatus::Stopped => ("badge bg-danger", "bi-stop-circle-fill", "Stopped"),
-        ProcessStatus::Starting => ("badge bg-warning", "bi-hourglass-split", "Starting"),
-        ProcessStatus::Stopping => ("badge bg-warning", "bi-hourglass-split", "Stopping"),
-        ProcessStatus::Failed => ("badge bg-danger", "bi-exclamation-triangle-fill", "Failed"),
-        ProcessStatus::Unknown => ("badge bg-secondary", "bi-question-circle-fill", "Unknown"),
-    };
-
-    let size_class = props.size.as_deref().unwrap_or("");
-
-    html! {
-        <span class={format!("{} {}", badge_class, size_class)}>
-            <i class={format!("{} me-1", icon)}></i>
-            {text}
-        </span>
-    }
-}
diff --git a/clients/admin-ui/src/jobs.rs b/clients/admin-ui/src/jobs.rs
deleted file mode 100644
index e1d1af9..0000000
--- a/clients/admin-ui/src/jobs.rs
+++ /dev/null
@@ -1,177 +0,0 @@
-use yew::prelude::*;
-use hero_supervisor_openrpc_client::wasm::WasmJob;
-use crate::app::JobForm;
-use web_sys::{Event, HtmlInputElement, MouseEvent};
-
-
-#[derive(Properties)]
-pub struct JobsProps {
-    pub jobs: Vec<WasmJob>,
-    pub server_url: String,
-    pub job_form: JobForm,
-    pub runners: Vec<(String, String)>, // (name, status) - list of registered runners
-    pub on_job_form_change: Callback<(String, String)>,
-    pub on_run_job: Callback<(String, String)>, // (runner, payload)
-    pub on_stop_job: Callback<String>,
-    pub on_delete_job: Callback<String>,
-}
-
-impl PartialEq for JobsProps {
-    fn eq(&self, other: &Self) -> bool {
-        // Since WasmJob doesn't implement PartialEq, we'll compare by length
-        // This is a simple comparison that will trigger re-renders when the job list changes
-        self.jobs.len() == other.jobs.len() && 
-        self.server_url == other.server_url &&
-        self.job_form.payload == other.job_form.payload &&
-        self.job_form.runner == other.job_form.runner &&
-        self.job_form.executor == other.job_form.executor &&
-        self.runners.len() == other.runners.len()
-        // Note: Callbacks don't implement PartialEq, so we skip them
-    }
-}
-
-#[function_component(Jobs)]
-pub fn jobs(props: &JobsProps) -> Html {
-    let on_payload_change = {
-        let on_change = props.on_job_form_change.clone();
-        Callback::from(move |e: Event| {
-            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-            on_change.emit(("payload".to_string(), input.value()));
-        })
-    };
-
-    let on_runner_name_change = {
-        let on_change = props.on_job_form_change.clone();
-        Callback::from(move |e: Event| {
-            let input: HtmlInputElement = e.target_unchecked_into();
-            on_change.emit(("runner".to_string(), input.value()));
-        })
-    };
-
-    let on_executor_change = {
-        let on_change = props.on_job_form_change.clone();
-        Callback::from(move |e: Event| {
-            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-            on_change.emit(("executor".to_string(), input.value()));
-        })
-    };
-
-
-    let on_run_click = {
-        let on_run = props.on_run_job.clone();
-        let job_form = props.job_form.clone();
-        Callback::from(move |_: MouseEvent| {
-            on_run.emit((job_form.runner.clone(), job_form.payload.clone()));
-        })
-    };
-
-    html! {
-        <div class="jobs-section">
-            <h2>{"Jobs"}</h2>
-            <div class="table-container">
-                <table class="table">
-                    <thead>
-                        <tr>
-                            <th>{"Job ID"}</th>
-                            <th>{"Payload"}</th>
-                            <th>{"Runner"}</th>
-                            <th>{"Executor"}</th>
-                            <th>{"Status"}</th>
-                            <th>{"Actions"}</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        // Job creation form as first row
-                        <tr class="job-form-row">
-                            <td>
-                                <span class="text-muted">{"New Job"}</span>
-                            </td>
-                            <td>
-                                <input 
-                                    type="text" 
-                                    class="form-control table-input" 
-                                    placeholder="Script content"
-                                    value={props.job_form.payload.clone()}
-                                    onchange={on_payload_change}
-                                />
-                            </td>
-                            <td>
-                                <select 
-                                    class="form-control table-input" 
-                                    value={props.job_form.runner.clone()}
-                                    onchange={on_runner_name_change}
-                                >
-                                    <option value="" disabled=true>{"-Select Runner-"}</option>
-                                    { for props.runners.iter().map(|(name, _status)| {
-                                        html! {
-                                            <option value={name.clone()} selected={name == &props.job_form.runner}>
-                                                {name}
-                                            </option>
-                                        }
-                                    })}
-                                </select>
-                            </td>
-                            <td>
-                                <input 
-                                    type="text" 
-                                    class="form-control table-input" 
-                                    placeholder="Executor"
-                                    value={props.job_form.executor.clone()}
-                                    onchange={on_executor_change}
-                                />
-                            </td>
-                            <td>
-                                <span class="status-badge status-not-started">{"Not Started"}</span>
-                            </td>
-                            <td class="action-cell">
-                                <button 
-                                    class="btn btn-primary btn-sm"
-                                    onclick={on_run_click}
-                                >
-                                    {"Run"}
-                                </button>
-                            </td>
-                        </tr>
-                        
-                        // Existing jobs
-                        {for props.jobs.iter().map(|job| {
-                            let job_id = job.id();
-                            let on_stop = props.on_stop_job.clone();
-                            let on_delete = props.on_delete_job.clone();
-                            let job_id_stop = job_id.clone();
-                            let job_id_delete = job_id.clone();
-                            
-                            html! {
-                                <tr>
-                                    <td><small class="text-muted">{job_id}</small></td>
-                                    <td><code class="code">{job.payload()}</code></td>
-                                    <td>{job.runner()}</td>
-                                    <td>{job.executor()}</td>
-                                    <td>
-                                        <span class="status-badge status-pending">{"Pending"}</span>
-                                    </td>
-                                    <td class="action-cell">
-                                        <button 
-                                            class="btn-icon btn-stop"
-                                            title="Stop Job"
-                                            onclick={Callback::from(move |_| on_stop.emit(job_id_stop.clone()))}
-                                        >
-                                            {"⏹"}
-                                        </button>
-                                        <button 
-                                            class="btn-icon btn-delete"
-                                            title="Delete Job"
-                                            onclick={Callback::from(move |_| on_delete.emit(job_id_delete.clone()))}
-                                        >
-                                            {"🗑"}
-                                        </button>
-                                    </td>
-                                </tr>
-                            }
-                        })}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/lib.rs b/clients/admin-ui/src/lib.rs
index a255c17..f1a2e72 100644
--- a/clients/admin-ui/src/lib.rs
+++ b/clients/admin-ui/src/lib.rs
@@ -1,10 +1,6 @@
 use wasm_bindgen::prelude::*;
 
 pub mod app;
-pub mod sidebar;
-pub mod runners;
-pub mod jobs;
-pub mod toast;
 
 #[wasm_bindgen(start)]
 pub fn main() {
diff --git a/clients/admin-ui/src/runners.rs b/clients/admin-ui/src/runners.rs
deleted file mode 100644
index a28d1c8..0000000
--- a/clients/admin-ui/src/runners.rs
+++ /dev/null
@@ -1,205 +0,0 @@
-use yew::prelude::*;
-use wasm_bindgen_futures::spawn_local;
-use gloo::console;
-use hero_supervisor_openrpc_client::wasm::WasmSupervisorClient;
-use wasm_bindgen::JsCast;
-use crate::app::PingState;
-use std::collections::HashMap;
-
-#[derive(Clone, PartialEq)]
-pub struct RegisterForm {
-    pub name: String,
-    pub secret: String,
-}
-
-#[derive(Properties, PartialEq)]
-pub struct RunnersProps {
-    pub server_url: String,
-    pub runners: Vec<(String, String)>, // (name, status)
-    pub register_form: RegisterForm,
-    pub ping_states: HashMap<String, PingState>, // runner -> ping_state
-    pub session_secret: String,
-    pub on_register_form_change: Callback<(String, String)>,
-    pub on_register_runner: Callback<()>,
-    pub on_load_runners: Callback<()>,
-    pub on_remove_runner: Callback<String>,
-    pub on_run_job: Callback<(String, String)>, // (runner, payload)
-}
-
-#[function_component(Runners)]
-pub fn runners(props: &RunnersProps) -> Html {
-    let on_register_runner = {
-        let server_url = props.server_url.clone();
-        let register_form = props.register_form.clone();
-        let on_register_runner = props.on_register_runner.clone();
-        Callback::from(move |_: ()| {
-            let server_url = server_url.clone();
-            let register_form = register_form.clone();
-            let on_register_runner = on_register_runner.clone();
-            let client = WasmSupervisorClient::new(server_url);
-            spawn_local(async move {
-                console::log!("Registering runner...");
-                
-                // Validate form data
-                if register_form.name.is_empty() {
-                    console::error!("Runner name is required");
-                    return;
-                }
-                if register_form.secret.is_empty() {
-                    console::error!("Secret is required");
-                    return;
-                }
-                
-                // Make actual registration call (use name as queue)
-                match client.register_runner(
-                    &register_form.secret,
-                    &register_form.name,
-                    &register_form.name, // queue = name
-                ).await {
-                    Ok(runner) => {
-                        console::log!("Runner registered successfully:", runner);
-                        on_register_runner.emit(());
-                    }
-                    Err(e) => {
-                        console::error!("Failed to register runner:", format!("{:?}", e));
-                    }
-                }
-            });
-        })
-    };
-
-    html! {
-        <div class="mb-5">
-            <h2 class="mb-4">{"Runners"}</h2>
-            
-            // All cards in same row - registration card first, then runner cards
-            <div class="d-flex flex-column gap-3">
-                // Registration card as first item
-                <div class="card bg-dark border-secondary">
-                    <div class="card-header bg-transparent border-secondary">
-                        <div class="d-flex align-items-center">
-                            <i class="fas fa-plus-circle me-2 text-success"></i>
-                            <h6 class="mb-0 text-white">{"Add New Runner"}</h6>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <form onsubmit={on_register_runner.reform(|e: SubmitEvent| e.prevent_default())}>
-                            <div class="mb-3">
-                                <label class="form-label text-muted small">{"Runner Name"}</label>
-                                <input
-                                    type="text"
-                                    class="form-control bg-secondary border-0 text-white"
-                                    placeholder="e.g., worker-01"
-                                    value={props.register_form.name.clone()}
-                                    oninput={props.on_register_form_change.reform(|e: InputEvent| {
-                                        let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                        ("name".to_string(), input.value())
-                                    })}
-                                />
-                            </div>
-                            <div class="mb-3">
-                                <label class="form-label text-muted small">{"Registration Secret"}</label>
-                                <input
-                                    type="password"
-                                    class="form-control bg-secondary border-0 text-white"
-                                    placeholder="Enter secret key"
-                                    value={props.register_form.secret.clone()}
-                                    oninput={props.on_register_form_change.reform(|e: InputEvent| {
-                                        let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-                                        ("secret".to_string(), input.value())
-                                    })}
-                                />
-                            </div>
-                            <button type="submit" class="btn btn-success w-100">
-                                <i class="fas fa-plus me-1"></i>
-                                {"Register Runner"}
-                            </button>
-                        </form>
-                    </div>
-                </div>
-                
-                {for props.runners.iter().map(|(name, status)| {
-                    let badge_class = match status.as_str() {
-                        "Running" => "status-running",
-                        "Stopped" => "status-stopped", 
-                        "Starting" => "status-starting",
-                        "Stopping" => "status-starting",
-                        "Registering" => "status-registering",
-                        _ => "bg-secondary",
-                    };
-                    
-                    let name_clone = name.clone();
-                    let name_clone2 = name.clone();
-                    let on_remove = props.on_remove_runner.clone();
-                    let on_run = props.on_run_job.clone();
-                    
-                    html! {
-                        <div class="card bg-dark border-secondary mb-3">
-                            <div class="card-body d-flex align-items-center justify-content-between p-3">
-                                <div class="d-flex align-items-center flex-grow-1">
-                                    <div class="me-3">
-                                        <span class={classes!("badge", "rounded-pill", badge_class)}>{"●"}</span>
-                                    </div>
-                                    <div class="flex-grow-1">
-                                        <h6 class="text-white mb-1">{name}</h6>
-                                        <small class="text-muted">{format!("Queue: {}", name)}</small>
-                                    </div>
-                                    <div class="me-3">
-                                        <span class={classes!("badge", badge_class)}>
-                                            {status}
-                                        </span>
-                                    </div>
-                                </div>
-                                
-                                <div class="d-flex gap-2">
-                                    <button 
-                                        class="btn btn-sm btn-outline-primary"
-                                        title="Run Job"
-                                        onclick={Callback::from(move |_| on_run.emit((name_clone.clone(), "test".to_string())))}
-                                    >
-                                        <i class="fas fa-play"></i>
-                                    </button>
-                                    <button 
-                                        class="btn btn-sm btn-outline-danger"
-                                        title="Remove Runner"
-                                        onclick={Callback::from(move |_| on_remove.emit(name_clone2.clone()))}
-                                    >
-                                        <i class="fas fa-trash"></i>
-                                    </button>
-                                </div>
-                                
-                                <div class="ms-3">
-                                    {
-                                        match props.ping_states.get(name).cloned().unwrap_or(PingState::Idle) {
-                                            PingState::Idle => html! {
-                                                <small class="text-muted">{"Ready"}</small>
-                                            },
-                                            PingState::Waiting => html! {
-                                                <small class="text-info">
-                                                    <i class="fas fa-spinner fa-spin me-1"></i>
-                                                    {"Working..."}
-                                                </small>
-                                            },
-                                            PingState::Success(ref msg) => html! {
-                                                <small class="text-success">
-                                                    <i class="fas fa-check me-1"></i>
-                                                    {msg}
-                                                </small>
-                                            },
-                                            PingState::Error(ref msg) => html! {
-                                                <small class="text-danger">
-                                                    <i class="fas fa-times me-1"></i>
-                                                    {msg}
-                                                </small>
-                                            },
-                                        }
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                    }
-                })}
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/services.rs b/clients/admin-ui/src/services.rs
deleted file mode 100644
index c27e3d5..0000000
--- a/clients/admin-ui/src/services.rs
+++ /dev/null
@@ -1,145 +0,0 @@
-use gloo::console;
-use std::rc::Rc;
-use std::cell::RefCell;
-use crate::wasm_client::{WasmSupervisorClient, WasmClientResult as ClientResult, RunnerConfig, ProcessManagerType, ProcessStatus, LogInfo, Job, RunnerType};
-use wasm_bindgen_futures::spawn_local;
-use yew::prelude::*;
-
-use crate::types::{RunnerInfo, AppState};
-
-/// Service for managing supervisor client operations
-#[derive(Clone)]
-pub struct SupervisorService {
-    client: Rc<RefCell<WasmSupervisorClient>>,
-}
-
-impl PartialEq for SupervisorService {
-    fn eq(&self, other: &Self) -> bool {
-        // Compare by server URL since that's the main identifier
-        self.client.borrow().server_url() == other.client.borrow().server_url()
-    }
-}
-
-impl SupervisorService {
-    pub fn new(server_url: &str) -> ClientResult<Self> {
-        let client = WasmSupervisorClient::new(server_url);
-        Ok(Self {
-            client: Rc::new(RefCell::new(client)),
-        })
-    }
-
-    /// Get all runners with their status and basic info
-    pub async fn get_all_runners(&self) -> ClientResult<Vec<RunnerInfo>> {
-        let runner_ids = self.client.borrow_mut().list_runners().await?;
-        let mut runners = Vec::new();
-
-        for id in runner_ids {
-            let status = self.client.borrow_mut().get_runner_status(&id).await.unwrap_or(ProcessStatus::Unknown);
-            let logs = self.client.borrow_mut().get_runner_logs(&id, Some(50), false).await.unwrap_or_default();
-            
-            // Create a basic runner config since we don't have a get_runner_config method
-            let config = RunnerConfig {
-                actor_id: id.clone(),
-                runner_type: RunnerType::SALRunner, // Default
-                binary_path: std::path::PathBuf::from("unknown"),
-                script_type: "unknown".to_string(),
-                args: vec![],
-                env_vars: std::collections::HashMap::new(),
-                working_dir: None,
-                restart_policy: "always".to_string(),
-                health_check_command: None,
-                dependencies: vec![],
-            };
-
-            runners.push(RunnerInfo {
-                id,
-                config,
-                status,
-                logs,
-            });
-        }
-
-        Ok(runners)
-    }
-
-    /// Add a new runner
-    pub async fn add_runner(&self, config: RunnerConfig, process_manager_type: ProcessManagerType) -> ClientResult<()> {
-        self.client.borrow_mut().add_runner(config, process_manager_type).await
-    }
-
-    /// Remove a runner
-    pub async fn remove_runner(&self, actor_id: &str) -> ClientResult<()> {
-        self.client.borrow_mut().remove_runner(actor_id).await
-    }
-
-    /// Start a runner
-    pub async fn start_runner(&self, actor_id: &str) -> ClientResult<()> {
-        self.client.borrow_mut().start_runner(actor_id).await
-    }
-
-    /// Stop a runner
-    pub async fn stop_runner(&self, actor_id: &str, force: bool) -> ClientResult<()> {
-        self.client.borrow_mut().stop_runner(actor_id, force).await
-    }
-
-    /// Get runner status
-    pub async fn get_runner_status(&self, actor_id: &str) -> ClientResult<ProcessStatus> {
-        self.client.borrow_mut().get_runner_status(actor_id).await
-    }
-
-    /// Get runner logs
-    pub async fn get_runner_logs(&self, actor_id: &str, lines: Option<usize>, follow: bool) -> ClientResult<Vec<LogInfo>> {
-        self.client.borrow_mut().get_runner_logs(actor_id, lines, follow).await
-    }
-
-    /// Start all runners
-    pub async fn start_all(&self) -> ClientResult<Vec<(String, bool)>> {
-        self.client.borrow_mut().start_all().await
-    }
-
-    /// Stop all runners
-    pub async fn stop_all(&self, force: bool) -> ClientResult<Vec<(String, bool)>> {
-        self.client.borrow_mut().stop_all(force).await
-    }
-
-    /// Queue a job to a runner
-    pub async fn queue_job(&self, runner: &str, job: Job) -> ClientResult<()> {
-        self.client.borrow_mut().queue_job_to_runner(runner, job).await
-    }
-
-    /// Queue a job and wait for result
-    pub async fn queue_and_wait(&self, runner: &str, job: Job, timeout_secs: u64) -> ClientResult<Option<String>> {
-        self.client.borrow_mut().queue_and_wait(runner, job, timeout_secs).await
-    }
-}
-
-/// Hook for managing supervisor service state
-#[hook]
-pub fn use_supervisor_service(server_url: &str) -> (Option<SupervisorService>, Option<String>) {
-    let server_url = server_url.to_string();
-    let service_state = use_state(|| None);
-    let error_state = use_state(|| None);
-
-    {
-        let service_state = service_state.clone();
-        let error_state = error_state.clone();
-        let server_url = server_url.clone();
-        
-        use_effect_with(server_url.clone(), move |_| {
-            spawn_local(async move {
-                match SupervisorService::new(&server_url) {
-                    Ok(service) => {
-                        service_state.set(Some(service));
-                        error_state.set(None);
-                    }
-                    Err(e) => {
-                        console::error!("Failed to create supervisor service:", e.to_string());
-                        error_state.set(Some(e.to_string()));
-                    }
-                }
-            });
-        });
-    }
-
-    ((*service_state).clone(), (*error_state).clone())
-}
diff --git a/clients/admin-ui/src/sidebar.rs b/clients/admin-ui/src/sidebar.rs
deleted file mode 100644
index 5c3947a..0000000
--- a/clients/admin-ui/src/sidebar.rs
+++ /dev/null
@@ -1,525 +0,0 @@
-use yew::prelude::*;
-use wasm_bindgen::JsCast;
-use wasm_bindgen_futures::spawn_local;
-use gloo::console;
-use gloo::storage::{LocalStorage, Storage};
-use hero_supervisor_openrpc_client::wasm::WasmSupervisorClient;
-use serde::{Deserialize, Serialize};
-
-#[derive(Clone, PartialEq)]
-pub struct SupervisorInfo {
-    pub server_url: String,
-    pub admin_secrets: Vec<String>,
-    pub user_secrets: Vec<String>,
-    pub register_secrets: Vec<String>,
-    pub runners_count: usize,
-}
-
-#[derive(Clone, PartialEq, Debug, Serialize, Deserialize)]
-pub enum SessionSecretType {
-    None,
-    User,
-    Admin,
-    Register,
-}
-
-#[derive(Serialize, Deserialize, Clone)]
-pub struct SessionData {
-    pub secret: String,
-    pub secret_type: SessionSecretType,
-}
-
-#[derive(Serialize, Deserialize, Clone, Default)]
-pub struct StoredSecrets {
-    pub admin_secrets: Vec<String>,
-    pub user_secrets: Vec<String>,
-    pub register_secrets: Vec<String>,
-}
-
-pub const STORED_SECRETS_KEY: &str = "supervisor_stored_secrets";
-
-pub const SESSION_STORAGE_KEY: &str = "supervisor_session";
-
-#[derive(Properties, PartialEq)]
-pub struct SidebarProps {
-    pub server_url: String,
-    pub supervisor_info: Option<SupervisorInfo>,
-    pub session_secret: String,
-    pub session_secret_type: SessionSecretType,
-    pub on_session_secret_change: Callback<(String, SessionSecretType)>,
-    pub on_supervisor_info_loaded: Callback<SupervisorInfo>,
-    pub on_add_secret: Callback<(SessionSecretType, String)>,
-    pub on_remove_secret: Callback<(SessionSecretType, String)>,
-}
-
-#[function_component(Sidebar)]
-pub fn sidebar(props: &SidebarProps) -> Html {
-    let session_secret_input = use_state(|| String::new());
-    let selected_secret_type = use_state(|| SessionSecretType::Admin);
-    let is_loading = use_state(|| false);
-
-    // Load session from localStorage on component mount
-    {
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        use_effect_with((), move |_| {
-            if let Ok(session_data) = LocalStorage::get::<SessionData>(SESSION_STORAGE_KEY) {
-                on_session_secret_change.emit((session_data.secret, session_data.secret_type));
-            }
-            || ()
-        });
-    }
-
-    let on_session_secret_change = {
-        let session_secret_input = session_secret_input.clone();
-        Callback::from(move |e: web_sys::Event| {
-            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-            session_secret_input.set(input.value());
-        })
-    };
-
-    let on_session_secret_submit = {
-        let session_secret_input = session_secret_input.clone();
-        let selected_secret_type = selected_secret_type.clone();
-        let is_loading = is_loading.clone();
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        let on_supervisor_info_loaded = props.on_supervisor_info_loaded.clone();
-        let server_url = props.server_url.clone();
-        
-        Callback::from(move |_: web_sys::MouseEvent| {
-            let secret = (*session_secret_input).clone();
-            if secret.is_empty() {
-                return;
-            }
-            
-            is_loading.set(true);
-            let is_loading = is_loading.clone();
-            let on_session_secret_change = on_session_secret_change.clone();
-            let on_supervisor_info_loaded = on_supervisor_info_loaded.clone();
-            let server_url = server_url.clone();
-            let session_secret_input = session_secret_input.clone();
-            let selected_secret_type = selected_secret_type.clone();
-            
-            spawn_local(async move {
-                let client = WasmSupervisorClient::new(server_url.clone());
-                
-                match client.discover().await {
-                    Ok(_) => {
-                        console::log!("Connected to supervisor successfully");
-                        
-                        let secret_type = (*selected_secret_type).clone();
-                        
-                        // Don't store secrets in localStorage - use API only
-                        
-                        // Save to localStorage
-                        let session_data = SessionData {
-                            secret: secret.clone(),
-                            secret_type: secret_type.clone(),
-                        };
-                        let _ = LocalStorage::set(SESSION_STORAGE_KEY, &session_data);
-                        
-                        // Create supervisor info with empty secrets initially
-                        let mut supervisor_info = SupervisorInfo {
-                            server_url: server_url.clone(),
-                            admin_secrets: vec![],
-                            user_secrets: vec![],
-                            register_secrets: vec![],
-                            runners_count: 0,
-                        };
-                        
-                        // Only fetch secrets if this is an admin secret
-                        if secret_type == SessionSecretType::Admin {
-                            console::log!("Attempting to fetch secrets with admin secret");
-                            
-                            // Try to fetch admin secrets
-                            match client.list_admin_secrets(&secret).await {
-                                Ok(admin_secrets) => {
-                                    console::log!("✅ Fetched admin secrets:", format!("{:?}", admin_secrets));
-                                    supervisor_info.admin_secrets = admin_secrets;
-                                },
-                                Err(e) => {
-                                    console::error!("❌ Failed to fetch admin secrets:", format!("{:?}", e));
-                                    // If admin secret fetch fails, this might not be a valid admin secret
-                                    supervisor_info.admin_secrets = vec![secret.clone()];
-                                }
-                            }
-                            
-                            // Try to fetch user secrets
-                            match client.list_user_secrets(&secret).await {
-                                Ok(user_secrets) => {
-                                    console::log!("✅ Fetched user secrets:", format!("{:?}", user_secrets));
-                                    supervisor_info.user_secrets = user_secrets;
-                                },
-                                Err(e) => {
-                                    console::error!("❌ Failed to fetch user secrets:", format!("{:?}", e));
-                                }
-                            }
-                            
-                            // Try to fetch register secrets
-                            match client.list_register_secrets(&secret).await {
-                                Ok(register_secrets) => {
-                                    console::log!("✅ Fetched register secrets:", format!("{:?}", register_secrets));
-                                    supervisor_info.register_secrets = register_secrets;
-                                },
-                                Err(e) => {
-                                    console::error!("❌ Failed to fetch register secrets:", format!("{:?}", e));
-                                }
-                            }
-                        } else {
-                            console::log!("Non-admin secret - showing only current secret");
-                            // For non-admin secrets, only show the current secret
-                            match secret_type {
-                                SessionSecretType::User => {
-                                    supervisor_info.user_secrets = vec![secret.clone()];
-                                },
-                                SessionSecretType::Register => {
-                                    supervisor_info.register_secrets = vec![secret.clone()];
-                                },
-                                _ => {}
-                            }
-                        }
-                        
-                        on_session_secret_change.emit((secret.clone(), secret_type.clone()));
-                        on_supervisor_info_loaded.emit(supervisor_info);
-                        session_secret_input.set(String::new());
-                    }
-                    Err(e) => {
-                        console::error!("Failed to connect to supervisor:", format!("{:?}", e));
-                    }
-                }
-                
-                is_loading.set(false);
-            });
-        })
-    };
-
-    let on_logout = {
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        Callback::from(move |_: web_sys::MouseEvent| {
-            // Clear localStorage
-            let _ = LocalStorage::delete(SESSION_STORAGE_KEY);
-            on_session_secret_change.emit((String::new(), SessionSecretType::None));
-        })
-    };
-
-    let on_add_admin_secret = {
-        let on_add_secret = props.on_add_secret.clone();
-        Callback::from(move |_| {
-            on_add_secret.emit((SessionSecretType::Admin, String::new()));
-        })
-    };
-
-    let on_add_user_secret = {
-        let on_add_secret = props.on_add_secret.clone();
-        Callback::from(move |_| {
-            on_add_secret.emit((SessionSecretType::User, String::new()));
-        })
-    };
-
-    let on_add_register_secret = {
-        let on_add_secret = props.on_add_secret.clone();
-        Callback::from(move |_| {
-            on_add_secret.emit((SessionSecretType::User, String::new()));
-        })
-    };
-
-    let on_session_input = {
-        let session_secret_input = session_secret_input.clone();
-        Callback::from(move |e: InputEvent| {
-            let input: web_sys::HtmlInputElement = e.target_unchecked_into();
-            session_secret_input.set(input.value());
-        })
-    };
-
-    let on_session_keypress = {
-        let on_session_secret_submit = on_session_secret_submit.clone();
-        Callback::from(move |e: KeyboardEvent| {
-            if e.key() == "Enter" {
-                e.prevent_default();
-                // Create a dummy MouseEvent to trigger the submit handler
-                let dummy_event = web_sys::MouseEvent::new("click").unwrap();
-                on_session_secret_submit.emit(dummy_event);
-            }
-        })
-    };
-
-    let on_session_toggle = {
-        let on_session_secret_submit = on_session_secret_submit.clone();
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        let session_secret = props.session_secret.clone();
-        Callback::from(move |e: web_sys::MouseEvent| {
-            if session_secret.is_empty() {
-                // Try to login with current input
-                on_session_secret_submit.emit(e);
-            } else {
-                // Logout - clear localStorage and session
-                let _ = LocalStorage::delete(SESSION_STORAGE_KEY);
-                on_session_secret_change.emit((String::new(), SessionSecretType::None));
-            }
-        })
-    };
-
-    // Function to refresh secrets from API when switching to an admin secret
-    let refresh_secrets_from_api = {
-        let server_url = props.server_url.clone();
-        let on_supervisor_info_loaded = props.on_supervisor_info_loaded.clone();
-        Callback::from(move |(secret, secret_type): (String, SessionSecretType)| {
-            if secret_type == SessionSecretType::Admin {
-                let client = WasmSupervisorClient::new(server_url.clone());
-                let on_supervisor_info_loaded = on_supervisor_info_loaded.clone();
-                let server_url = server_url.clone();
-                
-                spawn_local(async move {
-                    let mut supervisor_info = SupervisorInfo {
-                        server_url: server_url.clone(),
-                        admin_secrets: vec![],
-                        user_secrets: vec![],
-                        register_secrets: vec![],
-                        runners_count: 0,
-                    };
-                    
-                    // Fetch real secrets from the API
-                    match client.list_admin_secrets(&secret).await {
-                        Ok(admin_secrets) => {
-                            console::log!("Refreshed admin secrets from API:", format!("{:?}", admin_secrets));
-                            supervisor_info.admin_secrets = admin_secrets;
-                        },
-                        Err(e) => console::error!("Failed to refresh admin secrets:", format!("{:?}", e))
-                    }
-                    
-                    match client.list_user_secrets(&secret).await {
-                        Ok(user_secrets) => {
-                            console::log!("Refreshed user secrets from API:", format!("{:?}", user_secrets));
-                            supervisor_info.user_secrets = user_secrets;
-                        },
-                        Err(e) => console::error!("Failed to refresh user secrets:", format!("{:?}", e))
-                    }
-                    
-                    match client.list_register_secrets(&secret).await {
-                        Ok(register_secrets) => {
-                            console::log!("Refreshed register secrets from API:", format!("{:?}", register_secrets));
-                            supervisor_info.register_secrets = register_secrets;
-                        },
-                        Err(e) => console::error!("Failed to refresh register secrets:", format!("{:?}", e))
-                    }
-                    
-                    on_supervisor_info_loaded.emit(supervisor_info);
-                });
-            }
-        })
-    };
-
-    html! {
-        <div class="col-md-3 col-lg-2 d-md-block sidebar">
-            <div class="bg-dark rounded m-2 h-100 d-flex flex-column p-3 sidebar-island">
-                // Header section
-                <div class="pb-3 border-bottom border-secondary">
-                    <h5 class="text-white mb-1">{"Supervisor"}</h5>
-                    <small class="text-muted">{"Admin interface for managing jobs and secrets"}</small>
-                </div>
-
-                // Session login section
-                <div class="py-3 border-bottom border-secondary">
-                    <div class="mb-2">
-                        <select 
-                            class="form-select form-select-sm bg-secondary text-white border-0"
-                            onchange={{
-                                let selected_secret_type = selected_secret_type.clone();
-                                Callback::from(move |e: Event| {
-                                    let select: web_sys::HtmlInputElement = e.target_unchecked_into();
-                                    let secret_type = match select.value().as_str() {
-                                        "Admin" => SessionSecretType::Admin,
-                                        "User" => SessionSecretType::User,
-                                        "Register" => SessionSecretType::Register,
-                                        _ => SessionSecretType::Admin,
-                                    };
-                                    selected_secret_type.set(secret_type);
-                                })
-                            }}
-                        >
-                            <option value="Admin" selected={*selected_secret_type == SessionSecretType::Admin}>{"Admin Secret"}</option>
-                            <option value="User" selected={*selected_secret_type == SessionSecretType::User}>{"User Secret"}</option>
-                            <option value="Register" selected={*selected_secret_type == SessionSecretType::Register}>{"Register Secret"}</option>
-                        </select>
-                    </div>
-                    <div class="input-group input-group-sm">
-                        <input
-                            type="password"
-                            class="form-control bg-secondary text-white border-0"
-                            placeholder={format!("Enter {} secret...", match *selected_secret_type {
-                                SessionSecretType::Admin => "admin",
-                                SessionSecretType::User => "user",
-                                SessionSecretType::Register => "register",
-                                _ => "session"
-                            })}
-                            value={(*session_secret_input).clone()}
-                            oninput={on_session_input}
-                            onkeypress={on_session_keypress}
-                        />
-                        <button 
-                            class={classes!("btn", if props.session_secret.is_empty() { "btn-outline-secondary" } else { "btn-outline-success" })}
-                            onclick={on_session_toggle}
-                        >
-                            if props.session_secret.is_empty() {
-                                {"🔒"}
-                            } else {
-                                {"🔓"}
-                            }
-                        </button>
-                    </div>
-                </div>
-
-                // Secret management section (only show when logged in)
-                if !props.session_secret.is_empty() {
-                    <div class="flex-grow-1 overflow-auto">
-                        <div class="py-3">
-                            <h6 class="text-white text-uppercase fw-bold mb-3">{"Secret Management"}</h6>
-                            
-                            // Admin Secrets
-                            <div class="mb-4">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <small class="text-muted text-uppercase fw-bold">{"Admin Secrets"}</small>
-                                    <button class="btn btn-sm btn-outline-secondary border-0" onclick={on_add_admin_secret.clone()}>
-                                        {"➕"}
-                                    </button>
-                                </div>
-                                <div class="list-group list-group-flush">
-                                    {for props.supervisor_info.as_ref().map(|info| &info.admin_secrets).unwrap_or(&Vec::new()).iter().map(|secret| {
-                                        let is_current = secret == &props.session_secret && props.session_secret_type == SessionSecretType::Admin;
-                                        let on_select = {
-                                            let on_change = props.on_session_secret_change.clone();
-                                            let refresh_secrets = refresh_secrets_from_api.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_change.emit((secret.clone(), SessionSecretType::Admin));
-                                                refresh_secrets.emit((secret.clone(), SessionSecretType::Admin));
-                                            })
-                                        };
-                                        let on_remove = {
-                                            let on_remove = props.on_remove_secret.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_remove.emit((SessionSecretType::Admin, secret.clone()));
-                                            })
-                                        };
-                                        html! {
-                                            <div class={classes!("list-group-item", "d-flex", "justify-content-between", "align-items-center", "bg-secondary", "border-0", "mb-1", if is_current { "border-success" } else { "" })}>
-                                                <code class={classes!("text-white", "small", "cursor-pointer", if is_current { "text-success" } else { "" })} onclick={on_select}>
-                                                    {format!("{}...{}", &secret[..4.min(secret.len())], if secret.len() > 8 { &secret[secret.len()-4..] } else { "" })}
-                                                </code>
-                                                <button class="btn btn-sm text-danger border-0 p-0" onclick={on_remove}>
-                                                    {"❌"}
-                                                </button>
-                                            </div>
-                                        }
-                                    })}
-                                </div>
-                            </div>
-                            
-                            // User Secrets
-                            <div class="mb-4">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <small class="text-muted text-uppercase fw-bold">{"User Secrets"}</small>
-                                    <button class="btn btn-sm btn-outline-secondary border-0" onclick={on_add_user_secret.clone()}>
-                                        {"➕"}
-                                    </button>
-                                </div>
-                                <div class="list-group list-group-flush">
-                                    {for props.supervisor_info.as_ref().map(|info| &info.user_secrets).unwrap_or(&Vec::new()).iter().map(|secret| {
-                                        let is_current = secret == &props.session_secret && props.session_secret_type == SessionSecretType::User;
-                                        let on_select = {
-                                            let on_change = props.on_session_secret_change.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_change.emit((secret.clone(), SessionSecretType::User));
-                                            })
-                                        };
-                                        let on_remove = {
-                                            let on_remove = props.on_remove_secret.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_remove.emit((SessionSecretType::User, secret.clone()));
-                                            })
-                                        };
-                                        html! {
-                                            <div class={classes!("list-group-item", "d-flex", "justify-content-between", "align-items-center", "bg-secondary", "border-0", "mb-1", if is_current { "border-success" } else { "" })}>
-                                                <code class={classes!("text-white", "small", "cursor-pointer", if is_current { "text-success" } else { "" })} onclick={on_select}>
-                                                    {format!("{}...{}", &secret[..4.min(secret.len())], if secret.len() > 8 { &secret[secret.len()-4..] } else { "" })}
-                                                </code>
-                                                <button class="btn btn-sm text-danger border-0 p-0" onclick={on_remove}>
-                                                    {"❌"}
-                                                </button>
-                                            </div>
-                                        }
-                                    })}
-                                </div>
-                            </div>
-                            
-                            // Register Secrets
-                            <div class="mb-4">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <small class="text-muted text-uppercase fw-bold">{"Register Secrets"}</small>
-                                    <button class="btn btn-sm btn-outline-secondary border-0" onclick={on_add_register_secret.clone()}>
-                                        {"➕"}
-                                    </button>
-                                </div>
-                                <div class="list-group list-group-flush">
-                                    {for props.supervisor_info.as_ref().map(|info| &info.register_secrets).unwrap_or(&Vec::new()).iter().map(|secret| {
-                                        let is_current = secret == &props.session_secret;
-                                        let on_select = {
-                                            let on_change = props.on_session_secret_change.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_change.emit((secret.clone(), SessionSecretType::Register));
-                                            })
-                                        };
-                                        let on_remove = {
-                                            let on_remove = props.on_remove_secret.clone();
-                                            let secret = secret.clone();
-                                            Callback::from(move |_| {
-                                                on_remove.emit((SessionSecretType::Register, secret.clone()));
-                                            })
-                                        };
-                                        html! {
-                                            <div class={classes!("list-group-item", "d-flex", "justify-content-between", "align-items-center", "bg-secondary", "border-0", "mb-1", if is_current { "border-success" } else { "" })}>
-                                                <code class={classes!("text-white", "small", "cursor-pointer", if is_current { "text-success" } else { "" })} onclick={on_select}>
-                                                    {format!("{}...{}", &secret[..4.min(secret.len())], if secret.len() > 8 { &secret[secret.len()-4..] } else { "" })}
-                                                </code>
-                                                <button class="btn btn-sm text-danger border-0 p-0" onclick={on_remove}>
-                                                    {"❌"}
-                                                </button>
-                                            </div>
-                                        }
-                                    })}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                }
-
-                // Navigation and status at bottom
-                <div class="mt-auto">
-                    // Navigation links
-                    <div class="py-2 border-top border-secondary">
-                        <div class="nav nav-pills flex-column">
-                            <a href="#runners" class="nav-link text-muted small">{"Runners"}</a>
-                            <a href="#jobs" class="nav-link text-muted small">{"Jobs"}</a>
-                            <a href="#logs" class="nav-link text-muted small">{"Logs"}</a>
-                        </div>
-                    </div>
-
-                    // Server status
-                    <div class="py-2 border-top border-secondary">
-                        <div class="d-flex align-items-center">
-                            <span class={classes!("badge", "me-2", if props.supervisor_info.is_some() { "bg-success" } else { "bg-danger" })}>
-                                {"●"}
-                            </span>
-                            <small class="text-muted">
-                                {if props.supervisor_info.is_some() { "Connected" } else { "Disconnected" }}
-                            </small>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/sidebar_old.rs b/clients/admin-ui/src/sidebar_old.rs
deleted file mode 100644
index 7f123ed..0000000
--- a/clients/admin-ui/src/sidebar_old.rs
+++ /dev/null
@@ -1,639 +0,0 @@
-use yew::prelude::*;
-use wasm_bindgen::JsCast;
-use wasm_bindgen_futures::spawn_local;
-use gloo::console;
-use gloo::storage::{LocalStorage, Storage};
-use hero_supervisor_openrpc_client::wasm::{WasmSupervisorClient, WasmJob};
-use serde::{Deserialize, Serialize};
-
-#[derive(Clone, PartialEq)]
-pub struct SupervisorInfo {
-    pub server_url: String,
-    pub admin_secrets_count: usize,
-    pub user_secrets_count: usize,
-    pub register_secrets_count: usize,
-    pub runners_count: usize,
-}
-
-#[derive(Clone, PartialEq, Debug, Serialize, Deserialize)]
-pub enum SessionSecretType {
-    None,
-    User,
-    Admin,
-}
-
-#[derive(Serialize, Deserialize)]
-struct SessionData {
-    secret: String,
-    secret_type: SessionSecretType,
-}
-
-const SESSION_STORAGE_KEY: &str = "supervisor_session";
-
-#[derive(Properties, PartialEq)]
-pub struct SidebarProps {
-    pub server_url: String,
-    pub supervisor_info: Option<SupervisorInfo>,
-    pub session_secret: String,
-    pub session_secret_type: SessionSecretType,
-    pub on_session_secret_change: Callback<(String, SessionSecretType)>,
-    pub on_supervisor_info_loaded: Callback<SupervisorInfo>,
-}
-
-#[function_component(Sidebar)]
-pub fn sidebar(props: &SidebarProps) -> Html {
-    let session_secret_input = use_state(|| String::new());
-    let is_loading = use_state(|| false);
-
-    // Load session from localStorage on component mount
-    {
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        use_effect_with((), move |_| {
-            if let Ok(session_data) = LocalStorage::get::<SessionData>(SESSION_STORAGE_KEY) {
-                on_session_secret_change.emit((session_data.secret, session_data.secret_type));
-            }
-            || ()
-        });
-    }
-
-    let on_session_secret_change = {
-        let session_secret_input = session_secret_input.clone();
-        Callback::from(move |e: web_sys::Event| {
-            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-            session_secret_input.set(input.value());
-        })
-    };
-
-    let on_session_secret_submit = {
-        let session_secret_input = session_secret_input.clone();
-        let is_loading = is_loading.clone();
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        let on_supervisor_info_loaded = props.on_supervisor_info_loaded.clone();
-        let server_url = props.server_url.clone();
-        
-        Callback::from(move |_: web_sys::MouseEvent| {
-            let secret = (*session_secret_input).clone();
-            if secret.is_empty() {
-                return;
-            }
-            
-            is_loading.set(true);
-            let is_loading = is_loading.clone();
-            let on_session_secret_change = on_session_secret_change.clone();
-            let on_supervisor_info_loaded = on_supervisor_info_loaded.clone();
-            let server_url = server_url.clone();
-            let session_secret_input = session_secret_input.clone();
-            
-            spawn_local(async move {
-                let client = WasmSupervisorClient::new(server_url.clone());
-                
-                match client.discover().await {
-                    Ok(_) => {
-                        console::log!("Connected to supervisor successfully");
-                        
-                        let secret_type = if secret.starts_with("admin_") {
-                            SessionSecretType::Admin
-                        } else if secret.starts_with("user_") {
-                            SessionSecretType::User
-                        } else {
-                            SessionSecretType::User
-                        };
-                        
-                        // Save to localStorage
-                        let session_data = SessionData {
-                            secret: secret.clone(),
-                            secret_type: secret_type.clone(),
-                        };
-                        let _ = LocalStorage::set(SESSION_STORAGE_KEY, &session_data);
-                        
-                        let supervisor_info = SupervisorInfo {
-                            server_url: server_url.clone(),
-                            admin_secrets_count: if secret_type == SessionSecretType::Admin { 1 } else { 0 },
-                            user_secrets_count: 1,
-                            register_secrets_count: 0,
-                            runners_count: 0,
-                        };
-                        
-                        on_session_secret_change.emit((secret.clone(), secret_type.clone()));
-                        on_supervisor_info_loaded.emit(supervisor_info);
-                        session_secret_input.set(String::new());
-                    }
-                    Err(e) => {
-                        console::error!("Failed to connect to supervisor:", format!("{:?}", e));
-                    }
-                }
-                
-                is_loading.set(false);
-            });
-        })
-    };
-
-    let on_logout = {
-        let on_session_secret_change = props.on_session_secret_change.clone();
-        Callback::from(move |_: web_sys::MouseEvent| {
-            // Clear localStorage
-            let _ = LocalStorage::delete(SESSION_STORAGE_KEY);
-            on_session_secret_change.emit((String::new(), SessionSecretType::None));
-        })
-    };
-
-    html! {
-        <div class="sidebar">
-            // Header with logo and title
-            <div class="sidebar-header">
-                <div class="logo-section">
-                    <div class="logo">{"⚡"}</div>
-                    <h1 class="title">{"Supervisor"}</h1>
-                </div>
-            </div>
-            
-            // Main control island
-            <div class="control-island">
-                // Session Login Section
-                <div class="session-section">
-                    <h3 class="section-title">{"Session Login"}</h3>
-                    
-                    if props.session_secret.is_empty() {
-                        <div class="login-form">
-                            <div class="input-group">
-                                <input 
-                                    type="password" 
-                                    class="secret-input" 
-                                    placeholder="Enter session secret"
-                                    value={(*session_secret_input).clone()}
-                                    onchange={on_session_secret_change}
-                                />
-                                <button 
-                                    class="connect-btn"
-                                    onclick={on_session_secret_submit}
-                                    disabled={*is_loading}
-                                >
-                                    if *is_loading {
-                                        <span class="loading-spinner"></span>
-                                        {"Connecting"}
-                                    } else {
-                                        {"🔐 Connect"}
-                                    }
-                                </button>
-                            </div>
-                            <div class="login-hint">
-                                {"Use admin_ or user_ prefixed secrets"}
-                            </div>
-                        </div>
-                    } else {
-                        <div class="session-active">
-                            <div class="session-status">
-                                <div class="status-indicator"></div>
-                                <div class="status-info">
-                                    <span class="status-text">{"Connected"}</span>
-                                    <span class="session-badge">{
-                                        match props.session_secret_type {
-                                            SessionSecretType::Admin => "Admin",
-                                            SessionSecretType::User => "User",
-                                            SessionSecretType::None => "None",
-                                        }
-                                    }</span>
-                                </div>
-                            </div>
-                            <button 
-                                class="logout-btn"
-                                onclick={on_logout}
-                            >
-                                {"🚪 Logout"}
-                            </button>
-                        </div>
-                    }
-                </div>
-                
-                // Secret Management Section (Admin only)
-                if props.session_secret_type == SessionSecretType::Admin && !props.session_secret.is_empty() {
-                    <div class="secrets-section">
-                        <h3 class="section-title">{"Secret Management"}</h3>
-                        <div class="secret-display">
-                            <div class="secret-item">
-                                <label class="secret-label">{"Current Session Secret"}</label>
-                                <div class="secret-value">
-                                    <code>{&props.session_secret}</code>
-                                    <button class="copy-btn" title="Copy to clipboard">{"📋"}</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                }
-                
-                // Server Info Section
-                if let Some(info) = &props.supervisor_info {
-                    <div class="server-info-section">
-                        <h3 class="section-title">{"Server Status"}</h3>
-                        <div class="info-cards">
-                            <div class="info-card">
-                                <div class="info-icon">{"🏃"}</div>
-                                <div class="info-content">
-                                    <div class="info-number">{info.runners_count}</div>
-                                    <div class="info-label">{"Runners"}</div>
-                                </div>
-                            </div>
-                            <div class="info-card">
-                                <div class="info-icon">{"🔗"}</div>
-                                <div class="info-content">
-                                    <div class="info-text">{&info.server_url.replace("http://", "").replace("https://", "")}</div>
-                                    <div class="info-label">{"Server"}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                }
-            </div>
-            
-            // Footer with navigation links
-            <div class="sidebar-footer">
-                <div class="nav-links">
-                    <a href="https://github.com/herocode/supervisor" target="_blank" class="nav-link">
-                        <span class="nav-icon">{"📖"}</span>
-                        <span class="nav-text">{"Documentation"}</span>
-                    </a>
-                    <a href="https://github.com/herocode/supervisor/issues" target="_blank" class="nav-link">
-                        <span class="nav-icon">{"🐛"}</span>
-                        <span class="nav-text">{"Report Issue"}</span>
-                    </a>
-                    <a href="#" class="nav-link">
-                        <span class="nav-icon">{"⚙️"}</span>
-                        <span class="nav-text">{"Settings"}</span>
-                    </a>
-                </div>
-                <div class="version-info">
-                    {"Hero Supervisor v0.1.0"}
-    }
-    
-    is_loading.set(true);
-    let is_loading = is_loading.clone();
-    let on_session_secret_change = on_session_secret_change.clone();
-    let on_supervisor_info_loaded = on_supervisor_info_loaded.clone();
-    let server_url = server_url.clone();
-    let session_secret_input = session_secret_input.clone();
-    
-    spawn_local(async move {
-        let client = WasmSupervisorClient::new(server_url.clone());
-        
-        match client.discover().await {
-            Ok(_) => {
-                console::log!("Connected to supervisor successfully");
-                
-                let secret_type = if secret.starts_with("admin_") {
-                    SessionSecretType::Admin
-                } else if secret.starts_with("user_") {
-                    SessionSecretType::User
-                } else {
-                    SessionSecretType::User
-                };
-                
-                // Save to localStorage
-                let session_data = SessionData {
-                    secret: secret.clone(),
-                    secret_type: secret_type.clone(),
-                };
-                let _ = LocalStorage::set(SESSION_STORAGE_KEY, &session_data);
-                
-                let supervisor_info = SupervisorInfo {
-                    server_url: server_url.clone(),
-                    admin_secrets_count: if secret_type == SessionSecretType::Admin { 1 } else { 0 },
-                    user_secrets_count: 1,
-                    register_secrets_count: 0,
-                    runners_count: 0,
-                };
-                
-                on_session_secret_change.emit((secret.clone(), secret_type.clone()));
-                on_supervisor_info_loaded.emit(supervisor_info);
-                session_secret_input.set(String::new());
-            }
-            Err(e) => {
-                console::error!("Failed to connect to supervisor:", format!("{:?}", e));
-            }
-        }
-        
-        is_loading.set(false);
-    });
-})
-};
-
-let on_logout = {
-    let on_session_secret_change = props.on_session_secret_change.clone();
-    Callback::from(move |_: web_sys::MouseEvent| {
-        // Clear localStorage
-        let _ = LocalStorage::delete(SESSION_STORAGE_KEY);
-        on_session_secret_change.emit((String::new(), SessionSecretType::None));
-    })
-};
-
-html! {
-    <div class="sidebar">
-        // Header with logo and title
-        <div class="sidebar-header">
-            <div class="logo-section">
-                <div class="logo">{"⚡"}</div>
-                <h1 class="title">{"Supervisor"}</h1>
-            </div>
-        </div>
-        
-        // Main control island
-        <div class="control-island">
-            // Session Login Section
-            <div class="session-section">
-                <h3 class="section-title">{"Session Login"}</h3>
-                
-                if props.session_secret.is_empty() {
-                    <div class="login-form">
-                        <div class="input-group">
-                            <input 
-                                type="password" 
-                                class="secret-input" 
-                                placeholder="Enter session secret"
-                                value={(*session_secret_input).clone()}
-                                onchange={on_session_secret_change}
-                            />
-                            <button 
-                                class="connect-btn"
-                                onclick={on_session_secret_submit}
-                                disabled={*is_loading}
-                            >
-                                if *is_loading {
-                                    <span class="loading-spinner"></span>
-                                    {"Connecting"}
-                                } else {
-                                    {"🔐 Connect"}
-                                }
-                            </button>
-                        </div>
-                        <div class="login-hint">
-                            {"Use admin_ or user_ prefixed secrets"}
-                        </div>
-                    </div>
-                } else {
-                    <div class="session-active">
-                        <div class="session-status">
-                            <div class="status-indicator"></div>
-                            <div class="status-info">
-                                <span class="status-text">{"Connected"}</span>
-                                <span class="session-badge">{
-                                    match props.session_secret_type {
-                                        SessionSecretType::Admin => "Admin",
-                                        SessionSecretType::User => "User",
-                                        SessionSecretType::None => "None",
-                                    }
-                                }</span>
-                            </div>
-                        </div>
-                        <button 
-                            class="logout-btn"
-                            onclick={on_logout}
-                        >
-                            {"🚪 Logout"}
-                        </button>
-                    </div>
-                }
-            </div>
-            
-            // Secret Management Section (Admin only)
-            if props.session_secret_type == SessionSecretType::Admin && !props.session_secret.is_empty() {
-                <div class="secrets-section">
-                    <h3 class="section-title">{"Secret Management"}</h3>
-                    <div class="secret-display">
-                        <div class="secret-item">
-                            <label class="secret-label">{"Current Session Secret"}</label>
-                            <div class="secret-value">
-                                <code>{&props.session_secret}</code>
-                                <button class="copy-btn" title="Copy to clipboard">{"📋"}</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-            
-            // Server Info Section
-            if let Some(info) = &props.supervisor_info {
-                <div class="server-info-section">
-                    <h3 class="section-title">{"Server Status"}</h3>
-                    <div class="info-cards">
-                        <div class="info-card">
-                            <div class="info-icon">{"🏃"}</div>
-                            <div class="info-content">
-                                <div class="info-number">{info.runners_count}</div>
-                                <div class="info-label">{"Runners"}</div>
-                            </div>
-                        </div>
-                        <div class="info-card">
-                            <div class="info-icon">{"🔗"}</div>
-                            <div class="info-content">
-                                <div class="info-text">{&info.server_url.replace("http://", "").replace("https://", "")}</div>
-                                <div class="info-label">{"Server"}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-        
-        // Footer with navigation links
-        <div class="sidebar-footer">
-            <div class="nav-links">
-                <a href="https://github.com/herocode/supervisor" target="_blank" class="nav-link">
-                    <span class="nav-icon">{"📖"}</span>
-                    <span class="nav-text">{"Documentation"}</span>
-                </a>
-                <a href="https://github.com/herocode/supervisor/issues" target="_blank" class="nav-link">
-                    <span class="nav-icon">{"🐛"}</span>
-                    <span class="nav-text">{"Report Issue"}</span>
-                </a>
-                <a href="#" class="nav-link">
-                    <span class="nav-icon">{"⚙️"}</span>
-                    <span class="nav-text">{"Settings"}</span>
-                </a>
-            </div>
-            <div class="version-info">
-                {"Hero Supervisor v0.1.0"}
-            </div>
-        </div>
-    </div>
-}
-
-let on_session_secret_change = {
-    let session_secret_input = session_secret_input.clone();
-    Callback::from(move |e: web_sys::Event| {
-        let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
-        session_secret_input.set(input.value());
-    })
-};
-
-let on_session_secret_submit = {
-    let session_secret_input = session_secret_input.clone();
-    let is_loading = is_loading.clone();
-    let on_session_secret_change = props.on_session_secret_change.clone();
-    let on_supervisor_info_loaded = props.on_supervisor_info_loaded.clone();
-    let server_url = props.server_url.clone();
-    
-    Callback::from(move |_: web_sys::MouseEvent| {
-        let secret = (*session_secret_input).clone();
-        if secret.is_empty() {
-            return;
-        }
-        
-        is_loading.set(true);
-        let is_loading = is_loading.clone();
-        let on_session_secret_change = on_session_secret_change.clone();
-        let on_supervisor_info_loaded = on_supervisor_info_loaded.clone();
-        let server_url = server_url.clone();
-        let session_secret_input = session_secret_input.clone();
-        
-        spawn_local(async move {
-            let client = WasmSupervisorClient::new(server_url.clone());
-            
-            match client.discover().await {
-                Ok(_) => {
-                    console::log!("Connected to supervisor successfully");
-                    
-                    let secret_type = if secret.starts_with("admin_") {
-                        SessionSecretType::Admin
-                    } else if secret.starts_with("user_") {
-                        SessionSecretType::User
-                    } else {
-                        SessionSecretType::User
-                    };
-                    
-                    // Save to localStorage
-                    let session_data = SessionData {
-                        secret: secret.clone(),
-                        secret_type: secret_type.clone(),
-                    };
-                    let _ = LocalStorage::set(SESSION_STORAGE_KEY, &session_data);
-                    
-                    let supervisor_info = SupervisorInfo {
-                        server_url: server_url.clone(),
-                        admin_secrets_count: if secret_type == SessionSecretType::Admin { 1 } else { 0 },
-                        user_secrets_count: 1,
-                        register_secrets_count: 0,
-                        runners_count: 0,
-                    };
-                    
-                    on_session_secret_change.emit((secret.clone(), secret_type.clone()));
-                    on_supervisor_info_loaded.emit(supervisor_info);
-                    session_secret_input.set(String::new());
-                }
-                Err(e) => {
-                    console::error!("Failed to connect to supervisor:", format!("{:?}", e));
-                }
-            }
-            
-            is_loading.set(false);
-        });
-    })
-};
-
-let on_logout = {
-    let on_session_secret_change = props.on_session_secret_change.clone();
-    Callback::from(move |_: web_sys::MouseEvent| {
-        // Clear localStorage
-        let _ = LocalStorage::delete(SESSION_STORAGE_KEY);
-        on_session_secret_change.emit((String::new(), SessionSecretType::None));
-    })
-};
-
-html! {
-    <div class="sidebar">
-        <div class="sidebar-header">
-            <div class="logo-section">
-                <div class="logo">{"⚡"}</div>
-                <h1 class="title">{"Supervisor"}</h1>
-            </div>
-        </div>
-        
-        <div class="control-island">
-            <div class="session-section">
-                <h3 class="section-title">{"Session Login"}</h3>
-                
-                if props.session_secret.is_empty() {
-                    <div class="login-form">
-                        <div class="input-group">
-                            <input 
-                                type="password" 
-                                class="secret-input" 
-                                placeholder="Enter session secret"
-                                value={(*session_secret_input).clone()}
-                                onchange={on_session_secret_change}
-                            />
-                            <button 
-                                class="connect-btn"
-                                onclick={on_session_secret_submit}
-                                disabled={*is_loading}
-                            >
-                                if *is_loading {
-                                    <span class="loading-spinner"></span>
-                                    {"Connecting"}
-                                } else {
-                                    {"🔐 Connect"}
-                                }
-                            </button>
-                        </div>
-                        <div class="login-hint">
-                            {"Use admin_ or user_ prefixed secrets"}
-                        </div>
-                    </div>
-                } else {
-                    <div class="session-active">
-                        <div class="session-status">
-                            <div class="status-indicator"></div>
-                            <div class="status-info">
-                                <span class="status-text">{"Connected"}</span>
-                                <span class="session-badge">{
-                                    match props.session_secret_type {
-                                        SessionSecretType::Admin => "Admin",
-                                        SessionSecretType::User => "User",
-                                        SessionSecretType::None => "None",
-                                    }
-                                }</span>
-                            </div>
-                        </div>
-                        <button 
-                            class="logout-btn"
-                            onclick={on_logout}
-                        >
-                            {"🚪 Logout"}
-                        </button>
-                    </div>
-                }
-            </div>
-            
-            // Supervisor Info Section
-            if let Some(info) = &props.supervisor_info {
-                <div class="supervisor-info">
-                    <div class="supervisor-info-header">
-                        <span class="supervisor-info-title">{"Supervisor Info"}</span>
-                    </div>
-                    <div class="supervisor-info-content">
-                        <div class="info-item">
-                            <span class="info-label">{"Admin secrets:"}</span>
-                            <span class="info-value">{info.admin_secrets_count}</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-label">{"User secrets:"}</span>
-                            <span class="info-value">{info.user_secrets_count}</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-label">{"Register secrets:"}</span>
-                            <span class="info-value">{info.register_secrets_count}</span>
-                        </div>
-                        <div class="info-item">
-                            <span class="info-label">{"Runners:"}</span>
-                            <span class="info-value">{info.runners_count}</span>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-    </div>
-    
-    {{ ... }}
-                </div>
-            </div>
-        </div>
-    }
-}
diff --git a/clients/admin-ui/src/toast.rs b/clients/admin-ui/src/toast.rs
deleted file mode 100644
index f89900b..0000000
--- a/clients/admin-ui/src/toast.rs
+++ /dev/null
@@ -1,165 +0,0 @@
-//! Toast notification component for displaying errors, warnings, and info messages
-
-use yew::prelude::*;
-use std::collections::HashMap;
-use gloo::timers::callback::Timeout;
-use uuid::Uuid;
-
-#[derive(Debug, Clone, PartialEq)]
-pub enum ToastType {
-    Error,
-    Warning,
-    Info,
-    Success,
-}
-
-impl ToastType {
-    pub fn css_class(&self) -> &'static str {
-        match self {
-            ToastType::Error => "toast-error",
-            ToastType::Warning => "toast-warning", 
-            ToastType::Info => "toast-info",
-            ToastType::Success => "toast-success",
-        }
-    }
-
-    pub fn icon(&self) -> &'static str {
-        match self {
-            ToastType::Error => "❌",
-            ToastType::Warning => "⚠️",
-            ToastType::Info => "ℹ️",
-            ToastType::Success => "✅",
-        }
-    }
-
-    pub fn bg_class(&self) -> &'static str {
-        match self {
-            ToastType::Error => "bg-danger",
-            ToastType::Warning => "bg-warning",
-            ToastType::Info => "bg-info", 
-            ToastType::Success => "bg-success",
-        }
-    }
-}
-
-#[derive(Debug, Clone, PartialEq)]
-pub struct Toast {
-    pub id: String,
-    pub message: String,
-    pub toast_type: ToastType,
-    pub timestamp: f64,
-    pub auto_dismiss: bool,
-}
-
-impl Toast {
-    pub fn new(message: String, toast_type: ToastType) -> Self {
-        Self {
-            id: Uuid::new_v4().to_string(),
-            message,
-            toast_type,
-            timestamp: js_sys::Date::now(),
-            auto_dismiss: true,
-        }
-    }
-
-    pub fn error(message: String) -> Self {
-        Self::new(message, ToastType::Error)
-    }
-
-    pub fn warning(message: String) -> Self {
-        Self::new(message, ToastType::Warning)
-    }
-
-    pub fn info(message: String) -> Self {
-        Self::new(message, ToastType::Info)
-    }
-
-    pub fn success(message: String) -> Self {
-        Self::new(message, ToastType::Success)
-    }
-
-    pub fn persistent(mut self) -> Self {
-        self.auto_dismiss = false;
-        self
-    }
-}
-
-#[derive(Properties, PartialEq)]
-pub struct ToastContainerProps {
-    pub toasts: Vec<Toast>,
-    pub on_dismiss: Callback<String>,
-}
-
-#[function_component(ToastContainer)]
-pub fn toast_container(props: &ToastContainerProps) -> Html {
-    let timeouts = use_mut_ref(HashMap::<String, Timeout>::new);
-
-    // Auto-dismiss toasts after 5 seconds
-    use_effect_with(props.toasts.clone(), {
-        let on_dismiss = props.on_dismiss.clone();
-        let timeouts = timeouts.clone();
-        move |toasts| {
-            for toast in toasts {
-                if toast.auto_dismiss {
-                    let toast_id = toast.id.clone();
-                    let on_dismiss = on_dismiss.clone();
-                    let timeout = Timeout::new(5000, move || {
-                        on_dismiss.emit(toast_id);
-                    });
-                    timeouts.borrow_mut().insert(toast.id.clone(), timeout);
-                }
-            }
-            move || {
-                timeouts.borrow_mut().clear();
-            }
-        }
-    });
-
-    html! {
-        <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1055;">
-            {for props.toasts.iter().map(|toast| {
-                let on_dismiss = {
-                    let on_dismiss = props.on_dismiss.clone();
-                    let toast_id = toast.id.clone();
-                    Callback::from(move |_| {
-                        on_dismiss.emit(toast_id.clone());
-                    })
-                };
-
-                html! {
-                    <div key={toast.id.clone()} class={classes!("toast", "show", "mb-2")} role="alert">
-                        <div class={classes!("toast-header", toast.toast_type.bg_class(), "text-white")}>
-                            <span class="me-2">{toast.toast_type.icon()}</span>
-                            <strong class="me-auto">{
-                                match toast.toast_type {
-                                    ToastType::Error => "Error",
-                                    ToastType::Warning => "Warning", 
-                                    ToastType::Info => "Info",
-                                    ToastType::Success => "Success",
-                                }
-                            }</strong>
-                            <small class="text-white-50">{format_timestamp(toast.timestamp)}</small>
-                            <button type="button" class="btn-close btn-close-white ms-2" onclick={on_dismiss}></button>
-                        </div>
-                        <div class="toast-body bg-dark text-white">
-                            {toast.message.clone()}
-                        </div>
-                    </div>
-                }
-            })}
-        </div>
-    }
-}
-
-fn format_timestamp(timestamp: f64) -> String {
-    let now = js_sys::Date::now();
-    let diff = (now - timestamp) / 1000.0; // seconds
-    
-    if diff < 60.0 {
-        "now".to_string()
-    } else if diff < 3600.0 {
-        format!("{}m ago", (diff / 60.0) as u32)
-    } else {
-        format!("{}h ago", (diff / 3600.0) as u32)
-    }
-}
diff --git a/clients/admin-ui/src/types.rs b/clients/admin-ui/src/types.rs
deleted file mode 100644
index 7a4ebfe..0000000
--- a/clients/admin-ui/src/types.rs
+++ /dev/null
@@ -1,61 +0,0 @@
-use serde::{Deserialize, Serialize};
-use std::collections::HashMap;
-use std::path::PathBuf;
-use std::time::Duration;
-
-// Re-export types from the WASM client
-pub use crate::wasm_client::{
-    WasmClientError as ClientError, WasmClientResult as ClientResult, JobType, ProcessStatus, 
-    RunnerType, RunnerConfig, ProcessManagerType, LogInfo, Job, JobBuilder
-};
-
-/// UI-specific runner information combining config and status
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub struct RunnerInfo {
-    pub id: String,
-    pub config: RunnerConfig,
-    pub status: ProcessStatus,
-    pub logs: Vec<LogInfo>,
-}
-
-/// Form data for adding a new runner
-#[derive(Debug, Clone, Default)]
-pub struct AddRunnerForm {
-    pub actor_id: String,
-    pub runner_type: RunnerType,
-    pub binary_path: String,
-    pub script_type: String,
-    pub args: Vec<String>,
-    pub env_vars: HashMap<String, String>,
-    pub working_dir: Option<PathBuf>,
-    pub restart_policy: String,
-    pub health_check_command: Option<String>,
-    pub dependencies: Vec<String>,
-    pub process_manager_type: ProcessManagerType,
-}
-
-impl AddRunnerForm {
-    pub fn to_runner_config(&self) -> RunnerConfig {
-        RunnerConfig {
-            actor_id: self.actor_id.clone(),
-            runner_type: self.runner_type.clone(),
-            binary_path: PathBuf::from(&self.binary_path),
-            script_type: self.script_type.clone(),
-            args: self.args.clone(),
-            env_vars: self.env_vars.clone(),
-            working_dir: self.working_dir.clone(),
-            restart_policy: self.restart_policy.clone(),
-            health_check_command: self.health_check_command.clone(),
-            dependencies: self.dependencies.clone(),
-        }
-    }
-}
-
-/// Application state for managing runners
-#[derive(Debug, Clone, Default)]
-pub struct AppState {
-    pub runners: Vec<RunnerInfo>,
-    pub loading: bool,
-    pub error: Option<String>,
-    pub server_url: String,
-}
diff --git a/clients/admin-ui/src/wasm_client.rs b/clients/admin-ui/src/wasm_client.rs
deleted file mode 100644
index 01195b9..0000000
--- a/clients/admin-ui/src/wasm_client.rs
+++ /dev/null
@@ -1,378 +0,0 @@
-use gloo::net::http::Request;
-use serde::{Deserialize, Serialize};
-use serde_json::{json, Value};
-use std::collections::HashMap;
-use std::path::PathBuf;
-use thiserror::Error;
-use uuid::Uuid;
-
-/// WASM-compatible client for Hero Supervisor OpenRPC server
-#[derive(Clone)]
-pub struct WasmSupervisorClient {
-    server_url: String,
-    request_id: u64,
-}
-
-/// Error types for client operations
-#[derive(Error, Debug)]
-pub enum WasmClientError {
-    #[error("HTTP request error: {0}")]
-    Http(String),
-    
-    #[error("JSON serialization error: {0}")]
-    Serialization(#[from] serde_json::Error),
-    
-    #[error("Server error: {message}")]
-    Server { message: String },
-}
-
-/// Result type for client operations
-pub type WasmClientResult<T> = Result<T, WasmClientError>;
-
-/// Types of runners supported by the supervisor
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub enum RunnerType {
-    SALRunner,
-    OSISRunner,
-    VRunner,
-}
-
-impl Default for RunnerType {
-    fn default() -> Self {
-        RunnerType::SALRunner
-    }
-}
-
-/// Process manager types
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub enum ProcessManagerType {
-    Simple,
-    Tmux,
-}
-
-impl Default for ProcessManagerType {
-    fn default() -> Self {
-        ProcessManagerType::Simple
-    }
-}
-
-/// Configuration for an actor runner
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub struct RunnerConfig {
-    pub actor_id: String,
-    pub runner_type: RunnerType,
-    pub binary_path: PathBuf,
-    pub script_type: String,
-    pub args: Vec<String>,
-    pub env_vars: HashMap<String, String>,
-    pub working_dir: Option<PathBuf>,
-    pub restart_policy: String,
-    pub health_check_command: Option<String>,
-    pub dependencies: Vec<String>,
-}
-
-/// Job type enumeration
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub enum JobType {
-    SAL,
-    OSIS,
-    V,
-}
-
-/// Job structure for creating and managing jobs
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub struct Job {
-    pub id: String,
-    pub caller_id: String,
-    pub context_id: String,
-    pub payload: String,
-    pub job_type: JobType,
-    pub runner: String,
-    pub timeout: Option<u64>,
-    pub env_vars: HashMap<String, String>,
-}
-
-/// Process status information
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub enum ProcessStatus {
-    Running,
-    Stopped,
-    Starting,
-    Stopping,
-    Failed,
-    Unknown,
-}
-
-/// Log information structure
-#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
-pub struct LogInfo {
-    pub timestamp: String,
-    pub level: String,
-    pub message: String,
-}
-
-impl WasmSupervisorClient {
-    /// Create a new supervisor client
-    pub fn new(server_url: impl Into<String>) -> Self {
-        Self {
-            server_url: server_url.into(),
-            request_id: 0,
-        }
-    }
-
-    /// Get the server URL
-    pub fn server_url(&self) -> &str {
-        &self.server_url
-    }
-
-    /// Make a JSON-RPC request
-    async fn make_request<T>(&mut self, method: &str, params: Value) -> WasmClientResult<T>
-    where
-        T: for<'de> Deserialize<'de>,
-    {
-        self.request_id += 1;
-        
-        let request_body = json!({
-            "jsonrpc": "2.0",
-            "method": method,
-            "params": params,
-            "id": self.request_id
-        });
-
-        let response = Request::post(&self.server_url)
-            .header("Content-Type", "application/json")
-            .json(&request_body)
-            .map_err(|e| WasmClientError::Http(e.to_string()))?
-            .send()
-            .await
-            .map_err(|e| WasmClientError::Http(e.to_string()))?;
-
-        if !response.ok() {
-            return Err(WasmClientError::Http(format!(
-                "HTTP error: {} {}",
-                response.status(),
-                response.status_text()
-            )));
-        }
-
-        let response_text = response
-            .text()
-            .await
-            .map_err(|e| WasmClientError::Http(e.to_string()))?;
-
-        let response_json: Value = serde_json::from_str(&response_text)?;
-
-        if let Some(error) = response_json.get("error") {
-            return Err(WasmClientError::Server {
-                message: error.get("message")
-                    .and_then(|m| m.as_str())
-                    .unwrap_or("Unknown server error")
-                    .to_string(),
-            });
-        }
-
-        let result = response_json
-            .get("result")
-            .ok_or_else(|| WasmClientError::Server {
-                message: "No result in response".to_string(),
-            })?;
-
-        serde_json::from_value(result.clone()).map_err(Into::into)
-    }
-
-    /// Add a new runner to the supervisor
-    pub async fn add_runner(
-        &mut self,
-        config: RunnerConfig,
-        process_manager_type: ProcessManagerType,
-    ) -> WasmClientResult<()> {
-        let params = json!({
-            "config": config,
-            "process_manager_type": process_manager_type
-        });
-        
-        self.make_request("add_runner", params).await
-    }
-
-    /// Remove a runner from the supervisor
-    pub async fn remove_runner(&mut self, actor_id: &str) -> WasmClientResult<()> {
-        let params = json!({ "actor_id": actor_id });
-        self.make_request("remove_runner", params).await
-    }
-
-    /// List all runner IDs
-    pub async fn list_runners(&mut self) -> WasmClientResult<Vec<String>> {
-        self.make_request("list_runners", json!({})).await
-    }
-
-    /// Start a specific runner
-    pub async fn start_runner(&mut self, actor_id: &str) -> WasmClientResult<()> {
-        let params = json!({ "actor_id": actor_id });
-        self.make_request("start_runner", params).await
-    }
-
-    /// Stop a specific runner
-    pub async fn stop_runner(&mut self, actor_id: &str, force: bool) -> WasmClientResult<()> {
-        let params = json!({ "actor_id": actor_id, "force": force });
-        self.make_request("stop_runner", params).await
-    }
-
-    /// Get status of a specific runner
-    pub async fn get_runner_status(&mut self, actor_id: &str) -> WasmClientResult<ProcessStatus> {
-        let params = json!({ "actor_id": actor_id });
-        self.make_request("get_runner_status", params).await
-    }
-
-    /// Get logs for a specific runner
-    pub async fn get_runner_logs(
-        &mut self,
-        actor_id: &str,
-        lines: Option<usize>,
-        follow: bool,
-    ) -> WasmClientResult<Vec<LogInfo>> {
-        let params = json!({
-            "actor_id": actor_id,
-            "lines": lines,
-            "follow": follow
-        });
-        self.make_request("get_runner_logs", params).await
-    }
-
-    /// Queue a job to a specific runner
-    pub async fn queue_job_to_runner(&mut self, runner: &str, job: Job) -> WasmClientResult<()> {
-        let params = json!({
-            "runner": runner,
-            "job": job
-        });
-        self.make_request("queue_job_to_runner", params).await
-    }
-
-    /// Queue a job to a specific runner and wait for the result
-    pub async fn queue_and_wait(
-        &mut self,
-        runner: &str,
-        job: Job,
-        timeout_secs: u64,
-    ) -> WasmClientResult<Option<String>> {
-        let params = json!({
-            "runner": runner,
-            "job": job,
-            "timeout_secs": timeout_secs
-        });
-        self.make_request("queue_and_wait", params).await
-    }
-
-    /// Get job result by job ID
-    pub async fn get_job_result(&mut self, job_id: &str) -> WasmClientResult<Option<String>> {
-        let params = json!({ "job_id": job_id });
-        self.make_request("get_job_result", params).await
-    }
-
-    /// Get status of all runners
-    pub async fn get_all_runner_status(&mut self) -> WasmClientResult<Vec<(String, ProcessStatus)>> {
-        self.make_request("get_all_runner_status", json!({})).await
-    }
-
-    /// Start all runners
-    pub async fn start_all(&mut self) -> WasmClientResult<Vec<(String, bool)>> {
-        self.make_request("start_all", json!({})).await
-    }
-
-    /// Stop all runners
-    pub async fn stop_all(&mut self, force: bool) -> WasmClientResult<Vec<(String, bool)>> {
-        let params = json!({ "force": force });
-        self.make_request("stop_all", params).await
-    }
-}
-
-/// Builder for creating jobs with a fluent API
-#[derive(Debug, Clone, Default)]
-pub struct JobBuilder {
-    id: Option<String>,
-    caller_id: Option<String>,
-    context_id: Option<String>,
-    payload: Option<String>,
-    job_type: Option<JobType>,
-    runner: Option<String>,
-    timeout: Option<u64>,
-    env_vars: HashMap<String, String>,
-}
-
-impl JobBuilder {
-    /// Create a new job builder
-    pub fn new() -> Self {
-        Self::default()
-    }
-
-    /// Set the caller ID for this job
-    pub fn caller_id(mut self, caller_id: impl Into<String>) -> Self {
-        self.caller_id = Some(caller_id.into());
-        self
-    }
-
-    /// Set the context ID for this job
-    pub fn context_id(mut self, context_id: impl Into<String>) -> Self {
-        self.context_id = Some(context_id.into());
-        self
-    }
-
-    /// Set the payload (script content) for this job
-    pub fn payload(mut self, payload: impl Into<String>) -> Self {
-        self.payload = Some(payload.into());
-        self
-    }
-
-    /// Set the job type
-    pub fn job_type(mut self, job_type: JobType) -> Self {
-        self.job_type = Some(job_type);
-        self
-    }
-
-    /// Set the runner name for this job
-    pub fn runner(mut self, runner: impl Into<String>) -> Self {
-        self.runner = Some(runner.into());
-        self
-    }
-
-    /// Set the timeout for job execution
-    pub fn timeout(mut self, timeout_secs: u64) -> Self {
-        self.timeout = Some(timeout_secs);
-        self
-    }
-
-    /// Set a single environment variable
-    pub fn env_var(mut self, key: impl Into<String>, value: impl Into<String>) -> Self {
-        self.env_vars.insert(key.into(), value.into());
-        self
-    }
-
-    /// Set multiple environment variables from a HashMap
-    pub fn env_vars(mut self, env_vars: HashMap<String, String>) -> Self {
-        self.env_vars = env_vars;
-        self
-    }
-
-    /// Build the job
-    pub fn build(self) -> WasmClientResult<Job> {
-        Ok(Job {
-            id: self.id.unwrap_or_else(|| Uuid::new_v4().to_string()),
-            caller_id: self.caller_id.ok_or_else(|| WasmClientError::Server {
-                message: "caller_id is required".to_string(),
-            })?,
-            context_id: self.context_id.ok_or_else(|| WasmClientError::Server {
-                message: "context_id is required".to_string(),
-            })?,
-            payload: self.payload.ok_or_else(|| WasmClientError::Server {
-                message: "payload is required".to_string(),
-            })?,
-            job_type: self.job_type.ok_or_else(|| WasmClientError::Server {
-                message: "job_type is required".to_string(),
-            })?,
-            runner: self.runner.ok_or_else(|| WasmClientError::Server {
-                message: "runner is required".to_string(),
-            })?,
-            timeout: self.timeout,
-            env_vars: self.env_vars,
-        })
-    }
-}
diff --git a/clients/admin-ui/styles.css b/clients/admin-ui/styles.css
index de4c7eb..e41d80a 100644
--- a/clients/admin-ui/styles.css
+++ b/clients/admin-ui/styles.css
@@ -1,259 +1,1240 @@
-/* Hero Supervisor Admin UI - Minimal Dark Theme */
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Dark theme colors */
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #64748b;
+  --border: #334155;
+  --accent: #3b82f6;
+  --accent-hover: #2563eb;
+  --success: #10b981;
+  --error: #ef4444;
+  --warning: #f59e0b;
+  --selected: #1e40af;
+  --selected-bg: #1e3a8a;
+}
 
 body {
-    background: #0a0a0a;
-    color: #e8e8e8;
-    font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
 }
 
-/* Main container background */
-.main-content {
-    background: #1a1a1a !important;
-    border-radius: 12px;
-    padding: 1.5rem;
-    margin: 0.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Container backgrounds */
-.container-fluid {
-    background: #111111 !important;
+.app-header h1 {
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
-
-/* Bootstrap dark theme overrides */
-.bg-dark { background-color: #111111 !important; }
-.bg-secondary { background-color: #222222 !important; }
-.text-muted { color: #888888 !important; }
-.border-secondary { border-color: #333333 !important; }
-
-/* Cards - Enhanced visibility */
-.card {
-    background-color: #2a2a2a !important;
-    border: 1px solid #444444 !important;
-    transition: all 0.2s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-    border-radius: 8px !important;
-}
-.card:hover {
-    border-color: #666666 !important;
-    background-color: #333333 !important;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
-}
-.card-header {
-    background-color: rgba(255, 255, 255, 0.05) !important;
-    border-bottom: 1px solid #444444 !important;
+/* Main Content */
+.app-main {
+  flex: 1;
+  padding: 0;
 }
 
+/* Login - Centered Card */
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  padding: 2rem;
+}
 
-/* Forms - Enhanced visibility */
-.form-control {
-    background-color: #2a2a2a !important;
-    border: 1px solid #444444 !important;
-    color: #ffffff !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
+.login-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 400px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
-.form-control:focus {
-    background-color: #333333 !important;
-    border-color: #666666 !important;
-    color: #ffffff !important;
-    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
+
+.login-card h2 {
+  margin-bottom: 2rem;
+  color: var(--text-primary);
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
-.form-control::placeholder {
-    color: #999999 !important;
+
+.form-group {
+  margin-bottom: 1.25rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-group input::placeholder {
+  color: var(--text-muted);
 }
 
 /* Buttons */
-.btn-outline-secondary {
-    color: #888888 !important;
-    border-color: #333333 !important;
-}
-.btn-outline-secondary:hover {
-    background-color: #333333 !important;
-    border-color: #555555 !important;
-    color: #ffffff !important;
-}
-.btn-outline-success {
-    color: #4ade80 !important;
-    border-color: #4ade80 !important;
-}
-.btn-outline-success:hover {
-    background-color: #4ade80 !important;
-    border-color: #4ade80 !important;
-    color: #111111 !important;
+button {
+  cursor: pointer;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  font-family: inherit;
 }
 
-/* Status badges */
-.status-running { background: #1a4d3a; color: #4ade80; }
-.status-stopped { background: #4d1a1a; color: #f87171; }
-.status-starting { background: #4d3d1a; color: #fbbf24; }
-.status-registering { background: #1a3a4d; color: #60a5fa; }
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
-/* Sidebar island - Full height */
+.btn-primary {
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--accent);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn-secondary {
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--bg-secondary);
+}
+
+.logout-btn {
+  padding: 0.5rem 1rem;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.logout-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+/* Dashboard Layout */
+.dashboard {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  height: calc(100vh - 60px);
+}
+
+/* Sidebar Island */
 .sidebar-island {
-    border-radius: 12px !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-    background: #1a1a1a !important;
-    min-height: calc(100vh - 1rem) !important;
-    max-height: calc(100vh - 1rem) !important;
-    overflow-y: auto !important;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  overflow-y: auto;
 }
 
-/* Connection indicators */
-.connection-indicator {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #4ade80;
-    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
-}
-.connection-indicator.disconnected {
-    background: #f87171;
-    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
+.sidebar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
 }
 
-/* Status dots */
-.connection-dot {
-    font-size: 10px;
-    width: 10px;
-    height: 10px;
-    display: inline-block;
-}
-.connection-dot.status-running { color: #22c55e; }
-.connection-dot.status-stopped { color: #ef4444; }
-.connection-dot.status-starting { color: #f59e0b; }
-.connection-dot.status-registering { color: #3b82f6; }
-
-/* Navigation and text improvements */
-.navbar-nav .nav-link {
-    color: #e8e8e8 !important;
-    background-color: rgba(255, 255, 255, 0.05) !important;
-    border-radius: 6px;
-    margin: 2px 0;
-    transition: all 0.2s ease;
-}
-.navbar-nav .nav-link:hover {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-    color: #ffffff !important;
+.sidebar-header h3 {
+  color: var(--text-primary);
+  font-size: 1.125rem;
+  font-weight: 600;
 }
 
-/* Animations */
-.ping-spinner {
-    animation: spin 1s linear infinite;
-}
-@keyframes spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+/* Runner Cards */
+.runners-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-/* Icon buttons */
-.btn-icon {
-    background: none;
-    border: none;
-    font-size: 14px;
-    cursor: pointer;
-    padding: 2px 4px;
-    border-radius: 3px;
-    transition: background-color 0.2s ease;
-}
-.btn-icon:hover { background-color: rgba(255, 255, 255, 0.1); }
-.btn-ping:hover { background-color: rgba(59, 130, 246, 0.2); }
-.btn-remove:hover { background-color: rgba(239, 68, 68, 0.2); }
-
-/* Tables */
-.table-input {
-    width: 100%;
-    padding: 8px 12px;
-    background: #1a1a1a;
-    border: 1px solid #333;
-    border-radius: 6px;
-    color: #e8e8e8;
-    font-size: 13px;
-    transition: all 0.2s ease;
-}
-.table-input:focus {
-    outline: none;
-    border-color: #007acc;
-    background: #222;
-    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
-}
-.table-input::placeholder { color: #666; }
-
-/* Job form */
-.job-form-row {
-    background: #0d0d0d;
-    border-bottom: 2px solid #333;
-}
-.action-cell {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    min-width: 200px;
+.runner-card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.2s;
+  cursor: pointer;
 }
 
-/* Secrets */
-.secret-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 0.75rem;
-    background: #0a0a0a;
-    border: 1px solid #2a2a2a;
-    border-radius: 4px;
-}
-.secret-value {
-    flex: 1;
-    font-family: 'SF Mono', Monaco, monospace;
-    font-size: 0.75rem;
-    color: #e8e8e8;
+.runner-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-tertiary);
 }
 
-/* Session login */
-.session-input {
-    flex: 1;
-    padding: 0.5rem 0.75rem;
-    background: #0a0a0a;
-    border: 1px solid #333333;
-    border-radius: 6px;
-    color: #e8e8e8;
-    font-size: 0.875rem;
-    transition: border-color 0.2s ease;
-}
-.session-input:focus {
-    outline: none;
-    border-color: #ff6b5a;
+.runner-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
 }
 
-/* Lock button */
-.lock-btn {
-    width: 32px;
-    height: 32px;
-    background: transparent;
-    border: 1px solid #333333;
-    border-radius: 6px;
-    color: #888888;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.runner-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
 }
-.lock-btn:hover {
-    border-color: #555555;
-    color: #e8e8e8;
+
+.runner-status {
+  padding: 0.25rem 0.625rem;
+  background: var(--success);
+  color: white;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
 }
-.lock-btn.locked {
-    border-color: #ff6b5a;
-    color: #ff6b5a;
+
+.runner-status.stopped {
+  background: var(--text-muted);
+}
+
+.runner-status.error {
+  background: var(--error);
+}
+
+/* Main Content Island */
+.content-island {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.content-header h2 {
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Jobs Table */
+.jobs-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.jobs-table thead {
+  border-bottom: 1px solid var(--border);
+}
+
+.jobs-table th {
+  text-align: left;
+  padding: 0.75rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.jobs-table td {
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+}
+
+.jobs-table tbody tr {
+  transition: background 0.2s;
+}
+
+.jobs-table tbody tr:hover {
+  background: var(--bg-primary);
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 4rem 2rem;
+  font-size: 1rem;
+}
+
+/* Error Banner */
+.error-banner {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--error);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--error);
+  font-weight: 500;
+}
+
+.error-banner button {
+  background: none;
+  color: var(--error);
+  font-size: 1.25rem;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.error-banner button:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border);
 }
 
 /* Responsive */
-@media (max-width: 768px) {
-    .runners-grid {
-        flex-direction: column;
-    }
-    .runner-card {
-        flex-direction: column;
-        align-items: flex-start;
-    }
+@media (max-width: 1024px) {
+  .dashboard {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+  
+  .sidebar-island {
+    max-height: 400px;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-header {
+    padding: 1rem;
+  }
+  
+  .dashboard {
+    padding: 1rem;
+    gap: 1rem;
+  }
+  
+  .login-card {
+    padding: 2rem;
+  }
+}
+
+/* Header Islands */
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.header-island {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  margin-right: 0.5rem;
+}
+
+.user-name {
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.user-scope {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.server-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.server-label {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+
+.server-url {
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.status-dot.connected {
+  background: var(--success);
+  box-shadow: 0 0 8px var(--success);
+  animation: pulse 2s infinite;
+}
+
+.status-dot.disconnected {
+  background: var(--error);
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Add Runner Card */
+.add-runner-card {
+  background: var(--bg-primary);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.add-runner-card h4 {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.form-group-inline {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.form-group-inline input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.form-group-inline input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.form-group-inline button {
+  padding: 0.5rem 1rem;
+  min-width: 40px;
+}
+
+/* Update logout button for icon */
+.logout-btn {
+  padding: 0.5rem 0.75rem;
+  font-size: 1.125rem;
+  min-width: 40px;
+}
+
+/* Toast Container - Bottom Island */
+.toast-container {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.toast {
+  width: 100%;
+  pointer-events: auto;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 1.25rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  animation: slideUp 0.3s ease-out;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.error-toast {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: var(--error);
+  color: #fca5a5;
+}
+
+.toast span {
+  flex: 1;
+  font-weight: 500;
+}
+
+.toast button {
+  background: none;
+  color: inherit;
+  font-size: 1.5rem;
+  padding: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-left: 1rem;
+}
+
+.toast button:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Sidebar Toggle */
+.sidebar-toggle {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  background: var(--bg-tertiary);
+  padding: 0.25rem;
+  border-radius: 8px;
+}
+
+.toggle-btn {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.toggle-btn.active {
+  background: var(--accent);
+  color: white;
+}
+
+/* Selected Runner/Key Card */
+.runner-card.selected,
+.key-card.selected {
+  background: var(--selected-bg);
+  border-color: var(--selected);
+  box-shadow: 0 0 0 2px var(--selected);
+}
+
+.runner-card {
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.runner-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Filter Badge */
+.filter-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  background: var(--accent);
+  color: white;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 1rem;
+}
+
+/* Add Card (for creating runners/keys) */
+.add-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.add-input {
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.add-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.add-input::placeholder {
+  color: var(--text-muted);
+}
+
+.add-select {
+  padding: 0.5rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.add-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 2rem;
+  min-width: 500px;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: 1.25rem;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 2rem;
+  cursor: pointer;
+  padding: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.modal-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.form-group textarea {
+  width: 100%;
+  resize: vertical;
+  font-family: inherit;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+/* Signature List Styles */
+.signatures-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.signature-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.signature-pubkey {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}
+
+.btn-remove {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.btn-remove:hover {
+  background: var(--bg-primary);
+  color: #ef4444;
+}
+
+.btn-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Filter Input */
+.filter-input {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  margin-left: 1rem;
+  min-width: 250px;
+}
+
+.filter-input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+/* Jobs Table Styles */
+.table-container {
+  overflow-x: auto;
+  margin-top: 1rem;
+}
+
+.jobs-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.jobs-table thead {
+  background: var(--bg-tertiary);
+  border-bottom: 2px solid var(--border);
+}
+
+.jobs-table th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+}
+
+.jobs-table th.sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s;
+}
+
+.jobs-table th.sortable:hover {
+  color: var(--primary);
+}
+
+.jobs-table tbody tr {
+  border-bottom: 1px solid var(--border);
+  transition: background 0.2s;
+}
+
+.jobs-table tbody tr:hover {
+  background: var(--bg-tertiary);
+}
+
+.jobs-table td {
+  padding: 1rem;
+  color: var(--text-primary);
+}
+
+.job-id-cell {
+  font-family: monospace;
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.payload-cell {
+  font-family: monospace;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.timestamp-cell {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+/* Status Badges */
+.status-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: opacity 0.3s;
+}
+
+.status-badge.pulsing {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.status-queued {
+  background: #3b82f6;
+  color: white;
+}
+
+.status-running {
+  background: #f59e0b;
+  color: white;
+}
+
+.status-completed {
+  background: #10b981;
+  color: white;
+}
+
+.status-failed {
+  background: #ef4444;
+  color: white;
+}
+
+.status-unknown {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+/* Action Buttons */
+.actions-cell {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.action-btn {
+  background: none;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 6px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.action-btn:active {
+  transform: translateY(0);
+}
+
+.action-btn::before {
+  content: '';
+  display: block;
+  width: 16px;
+  height: 16px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.action-run {
+  border-color: #10b981;
+  color: #10b981;
+}
+
+.action-run:hover {
+  background: #10b98110;
+  border-color: #10b981;
+}
+
+.action-run::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'%3E%3C/polygon%3E%3C/svg%3E");
+}
+
+.action-logs {
+  border-color: #3b82f6;
+  color: #3b82f6;
+}
+
+.action-logs:hover {
+  background: #3b82f610;
+  border-color: #3b82f6;
+}
+
+.action-logs::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+.action-delete {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.action-delete:hover {
+  background: #ef444410;
+  border-color: #ef4444;
+}
+
+.action-delete::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
+}
+
+/* Clickable status badge */
+.status-badge.clickable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.status-badge.clickable:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
+}
+
+/* Modal styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(4px);
+}
+
+.modal-content {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  max-width: 800px;
+  width: 90%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  color: var(--text-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 2rem;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.job-output {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1rem;
+  color: var(--text-primary);
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.loading-spinner {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-secondary);
+}
+
+/* Keys list */
+.keys-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.key-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.key-card:hover {
+  border-color: var(--accent);
+  background: var(--bg-tertiary);
+}
+
+.key-card.selected {
+  border-color: var(--accent);
+  background: var(--selected-bg);
+}
+
+.key-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.key-name {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+}
+
+.key-scope {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.scope-admin {
+  background: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.scope-user {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.scope-register {
+  background: rgba(16, 185, 129, 0.2);
+  color: #6ee7b7;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.key-secret {
+  background: var(--bg-primary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
+  overflow-x: auto;
+}
+
+.key-secret code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.85rem;
+  color: var(--accent);
+  word-break: break-all;
+}
+
+.key-meta {
+  font-size: 0.75rem;
+  color: var(--text-muted);
 }
diff --git a/clients/openrpc/Cargo.lock b/clients/openrpc/Cargo.lock
index 438bec4..46ef32b 100644
--- a/clients/openrpc/Cargo.lock
+++ b/clients/openrpc/Cargo.lock
@@ -666,22 +666,6 @@ version = "0.8.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d0a5c400df2834b80a4c3327b3aad3a4c4cd4de0629063962b03235697506a28"
 
-[[package]]
-name = "crossterm"
-version = "0.27.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f476fe445d41c9e991fd07515a6f463074b782242ccf4a5b7b1d1012e70824df"
-dependencies = [
- "bitflags 2.9.3",
- "crossterm_winapi",
- "libc",
- "mio 0.8.11",
- "parking_lot",
- "signal-hook",
- "signal-hook-mio",
- "winapi",
-]
-
 [[package]]
 name = "crossterm"
 version = "0.28.1"
@@ -690,7 +674,7 @@ checksum = "829d955a0bb380ef178a640b91779e3987da38c9aea133b20614cfed8cdea9c6"
 dependencies = [
  "bitflags 2.9.3",
  "crossterm_winapi",
- "mio 1.0.4",
+ "mio",
  "parking_lot",
  "rustix 0.38.44",
  "signal-hook",
@@ -822,6 +806,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d630bccd429a5bb5a64b5e94f693bfc48c9f8566418fda4c494cc94f911f87cc"
 dependencies = [
  "powerfmt",
+ "serde",
 ]
 
 [[package]]
@@ -1405,16 +1390,15 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "async-trait",
- "base64 0.22.1",
  "chrono",
  "clap",
  "env_logger 0.10.2",
+ "hyper 1.7.0",
+ "hyper-util",
  "jsonrpsee",
  "log",
- "rand 0.8.5",
  "redis 0.25.4",
- "reqwest 0.12.23",
- "runner_rust",
+ "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git)",
  "serde",
  "serde_json",
  "thiserror 1.0.69",
@@ -1430,19 +1414,21 @@ name = "hero-supervisor-openrpc-client"
 version = "0.1.0"
 dependencies = [
  "chrono",
- "clap",
  "console_log",
- "crossterm 0.27.0",
  "env_logger 0.11.8",
  "getrandom 0.2.16",
  "hero-supervisor",
+ "hex",
+ "indexmap",
  "js-sys",
  "jsonrpsee",
  "log",
- "ratatui",
- "runner_rust",
+ "runner_rust 0.1.0 (git+https://git.ourworld.tf/herocode/runner_rust.git?branch=main)",
+ "secp256k1 0.29.1",
  "serde",
+ "serde-wasm-bindgen",
  "serde_json",
+ "sha2",
  "thiserror 1.0.69",
  "tokio",
  "tokio-test",
@@ -1514,6 +1500,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "hex"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
+
 [[package]]
 name = "hkdf"
 version = "0.12.4"
@@ -2499,18 +2491,6 @@ dependencies = [
  "adler2",
 ]
 
-[[package]]
-name = "mio"
-version = "0.8.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4a650543ca06a924e8b371db273b2756685faae30f8487da1b56505a8f78b0c"
-dependencies = [
- "libc",
- "log",
- "wasi 0.11.1+wasi-snapshot-preview1",
- "windows-sys 0.48.0",
-]
-
 [[package]]
 name = "mio"
 version = "1.0.4"
@@ -2717,6 +2697,36 @@ dependencies = [
  "num-traits",
 ]
 
+[[package]]
+name = "osiris"
+version = "0.1.0"
+source = "git+https://git.ourworld.tf/herocode/osiris.git#097360ad12d2ea73ac4d38552889d97702d9a889"
+dependencies = [
+ "anyhow",
+ "clap",
+ "env_logger 0.10.2",
+ "osiris_derive",
+ "redis 0.24.0",
+ "serde",
+ "serde_json",
+ "time",
+ "tokio",
+ "toml",
+ "tracing",
+ "tracing-subscriber",
+ "uuid",
+]
+
+[[package]]
+name = "osiris_derive"
+version = "0.1.0"
+source = "git+https://git.ourworld.tf/herocode/osiris.git#097360ad12d2ea73ac4d38552889d97702d9a889"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.106",
+]
+
 [[package]]
 name = "ourdb"
 version = "0.1.0"
@@ -2922,19 +2932,6 @@ version = "0.3.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7edddbd0b52d732b21ad9a5fab5c704c14cd949e5e9a1ec5929a24fded1b904c"
 
-[[package]]
-name = "plist"
-version = "1.7.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3af6b589e163c5a788fab00ce0c0366f6efbb9959c2f9874b224936af7fce7e1"
-dependencies = [
- "base64 0.22.1",
- "indexmap",
- "quick-xml",
- "serde",
- "time",
-]
-
 [[package]]
 name = "poly1305"
 version = "0.8.0"
@@ -3097,15 +3094,6 @@ dependencies = [
  "winapi",
 ]
 
-[[package]]
-name = "quick-xml"
-version = "0.38.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "42a232e7487fc2ef313d96dde7948e7a3c05101870d8985e4fd8d26aedd27b89"
-dependencies = [
- "memchr",
-]
-
 [[package]]
 name = "quote"
 version = "1.0.40"
@@ -3216,7 +3204,7 @@ dependencies = [
  "bitflags 2.9.3",
  "cassowary",
  "compact_str",
- "crossterm 0.28.1",
+ "crossterm",
  "instability",
  "itertools",
  "lru",
@@ -3237,6 +3225,27 @@ dependencies = [
  "bitflags 2.9.3",
 ]
 
+[[package]]
+name = "redis"
+version = "0.24.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c580d9cbbe1d1b479e8d67cf9daf6a62c957e6846048408b80b43ac3f6af84cd"
+dependencies = [
+ "async-trait",
+ "bytes",
+ "combine",
+ "futures-util",
+ "itoa",
+ "percent-encoding",
+ "pin-project-lite",
+ "ryu",
+ "sha1_smol",
+ "socket2 0.4.10",
+ "tokio",
+ "tokio-util",
+ "url",
+]
+
 [[package]]
 name = "redis"
 version = "0.25.4"
@@ -3565,18 +3574,22 @@ checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
 [[package]]
 name = "runner_rust"
 version = "0.1.0"
+source = "git+https://git.ourworld.tf/herocode/runner_rust.git?branch=main#268128f7fd53e9586288efd95f9288595c4a74e9"
 dependencies = [
  "anyhow",
  "async-trait",
  "chrono",
  "clap",
- "crossterm 0.28.1",
+ "crossterm",
  "env_logger 0.10.2",
  "hero_logger",
  "heromodels",
  "heromodels-derive",
  "heromodels_core",
+ "hex",
  "log",
+ "osiris",
+ "rand 0.8.5",
  "ratatui",
  "redis 0.25.4",
  "rhai",
@@ -3590,13 +3603,61 @@ dependencies = [
  "sal-postgresclient",
  "sal-process",
  "sal-redisclient",
- "sal-service-manager",
  "sal-text",
  "sal-vault",
  "sal-virt",
  "sal-zinit-client",
+ "secp256k1 0.28.2",
  "serde",
  "serde_json",
+ "sha2",
+ "thiserror 1.0.69",
+ "tokio",
+ "toml",
+ "tracing",
+ "uuid",
+]
+
+[[package]]
+name = "runner_rust"
+version = "0.1.0"
+source = "git+https://git.ourworld.tf/herocode/runner_rust.git#268128f7fd53e9586288efd95f9288595c4a74e9"
+dependencies = [
+ "anyhow",
+ "async-trait",
+ "chrono",
+ "clap",
+ "crossterm",
+ "env_logger 0.10.2",
+ "hero_logger",
+ "heromodels",
+ "heromodels-derive",
+ "heromodels_core",
+ "hex",
+ "log",
+ "osiris",
+ "rand 0.8.5",
+ "ratatui",
+ "redis 0.25.4",
+ "rhai",
+ "rhailib_dsl",
+ "sal-git",
+ "sal-hetzner",
+ "sal-kubernetes",
+ "sal-mycelium",
+ "sal-net",
+ "sal-os",
+ "sal-postgresclient",
+ "sal-process",
+ "sal-redisclient",
+ "sal-text",
+ "sal-vault",
+ "sal-virt",
+ "sal-zinit-client",
+ "secp256k1 0.28.2",
+ "serde",
+ "serde_json",
+ "sha2",
  "thiserror 1.0.69",
  "tokio",
  "toml",
@@ -3906,24 +3967,6 @@ dependencies = [
  "rhai",
 ]
 
-[[package]]
-name = "sal-service-manager"
-version = "0.1.0"
-source = "git+https://git.ourworld.tf/herocode/herolib_rust.git#7afa5ea1c0d9bb240fd2a96e5a0a01b04372fa1c"
-dependencies = [
- "async-trait",
- "chrono",
- "futures",
- "log",
- "once_cell",
- "plist",
- "serde",
- "serde_json",
- "thiserror 1.0.69",
- "tokio",
- "zinit-client",
-]
-
 [[package]]
 name = "sal-text"
 version = "0.1.0"
@@ -4059,6 +4102,44 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "secp256k1"
+version = "0.28.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d24b59d129cdadea20aea4fb2352fa053712e5d713eee47d700cd4b2bc002f10"
+dependencies = [
+ "rand 0.8.5",
+ "secp256k1-sys 0.9.2",
+]
+
+[[package]]
+name = "secp256k1"
+version = "0.29.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9465315bc9d4566e1724f0fffcbcc446268cb522e60f9a27bcded6b19c108113"
+dependencies = [
+ "rand 0.8.5",
+ "secp256k1-sys 0.10.1",
+]
+
+[[package]]
+name = "secp256k1-sys"
+version = "0.9.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e5d1746aae42c19d583c3c1a8c646bfad910498e2051c551a7f2e3c0c9fbb7eb"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "secp256k1-sys"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4387882333d3aa8cb20530a17c69a3752e97837832f34f6dccc760e715001d9"
+dependencies = [
+ "cc",
+]
+
 [[package]]
 name = "secrecy"
 version = "0.8.0"
@@ -4124,6 +4205,17 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde-wasm-bindgen"
+version = "0.6.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8302e169f0eddcc139c70f139d19d6467353af16f9fce27e8c30158036a1e16b"
+dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "serde_derive"
 version = "1.0.219"
@@ -4253,8 +4345,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "34db1a06d485c9142248b7a054f034b349b212551f3dfd19c94d45a754a217cd"
 dependencies = [
  "libc",
- "mio 0.8.11",
- "mio 1.0.4",
+ "mio",
  "signal-hook",
 ]
 
@@ -4326,6 +4417,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "socket2"
+version = "0.4.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f7916fc008ca5542385b89a3d3ce689953c143e9304a9bf8beec1de48994c0d"
+dependencies = [
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "socket2"
 version = "0.5.10"
@@ -4727,7 +4828,7 @@ dependencies = [
  "bytes",
  "io-uring",
  "libc",
- "mio 1.0.4",
+ "mio",
  "parking_lot",
  "pin-project-lite",
  "signal-hook-registry",
diff --git a/clients/openrpc/Cargo.toml b/clients/openrpc/Cargo.toml
index 8d73f55..3def8f9 100644
--- a/clients/openrpc/Cargo.toml
+++ b/clients/openrpc/Cargo.toml
@@ -34,6 +34,7 @@ env_logger = "0.11"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 js-sys = "0.3"
+serde-wasm-bindgen = "0.6"
 web-sys = { version = "0.3", features = [
   "console",
   "Request",
@@ -45,6 +46,10 @@ web-sys = { version = "0.3", features = [
 ] }
 console_log = "1.0"
 getrandom = { version = "0.2", features = ["js"] }
+# Crypto for signing
+secp256k1 = { version = "0.29", features = ["rand", "global-context"] }
+sha2 = "0.10"
+hex = "0.4"
 
 [target.'cfg(target_arch = "wasm32")'.dev-dependencies]
 wasm-bindgen-test = "0.3"
diff --git a/clients/openrpc/src/lib.rs b/clients/openrpc/src/lib.rs
index a15af7a..3eeaf0e 100644
--- a/clients/openrpc/src/lib.rs
+++ b/clients/openrpc/src/lib.rs
@@ -39,7 +39,7 @@ pub mod wasm;
 
 // Re-export WASM types for convenience
 #[cfg(target_arch = "wasm32")]
-pub use wasm::{WasmSupervisorClient, WasmJob, WasmJobType, WasmRunnerType};
+pub use wasm::{WasmSupervisorClient, WasmJob, WasmJobType, WasmRunnerType, create_job_canonical_repr, sign_job_canonical};
 
 // Native client dependencies
 #[cfg(not(target_arch = "wasm32"))]
@@ -57,6 +57,7 @@ use std::path::PathBuf;
 pub struct SupervisorClient {
     client: HttpClient,
     server_url: String,
+    secret: Option<String>,
 }
 
 /// Error types for client operations
@@ -225,6 +226,24 @@ impl SupervisorClient {
         Ok(Self {
             client,
             server_url,
+            secret: None,
+        })
+    }
+    
+    /// Create a new supervisor client with authentication secret
+    pub fn with_secret(server_url: impl Into<String>, secret: impl Into<String>) -> ClientResult<Self> {
+        let server_url = server_url.into();
+        let secret = secret.into();
+        
+        let client = HttpClientBuilder::default()
+            .request_timeout(std::time::Duration::from_secs(30))
+            .build(&server_url)
+            .map_err(|e| ClientError::Http(e.to_string()))?;
+        
+        Ok(Self {
+            client,
+            server_url,
+            secret: Some(secret),
         })
     }
     
diff --git a/clients/openrpc/src/wasm.rs b/clients/openrpc/src/wasm.rs
index b9d2c5d..65748f7 100644
--- a/clients/openrpc/src/wasm.rs
+++ b/clients/openrpc/src/wasm.rs
@@ -5,15 +5,20 @@
 
 use wasm_bindgen::prelude::*;
 use wasm_bindgen_futures::JsFuture;
-use web_sys::{Request, RequestInit, RequestMode, Response, Headers};
+use web_sys::{Headers, Request, RequestInit, RequestMode, Response};
+use serde_json::json;
+use secp256k1::{Message, PublicKey, Secp256k1, SecretKey, ecdsa::Signature};
+use sha2::{Sha256, Digest};
 use serde::{Deserialize, Serialize};
 use thiserror::Error;
 use uuid::Uuid;
 
 /// WASM-compatible client for communicating with Hero Supervisor OpenRPC server
 #[wasm_bindgen]
+#[derive(Clone)]
 pub struct WasmSupervisorClient {
     server_url: String,
+    secret: Option<String>,
 }
 
 /// Error types for WASM client operations
@@ -38,6 +43,14 @@ pub enum WasmClientError {
 /// Result type for WASM client operations
 pub type WasmClientResult<T> = Result<T, WasmClientError>;
 
+/// Auth verification response
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AuthVerifyResponse {
+    pub valid: bool,
+    pub name: String,
+    pub scope: String,
+}
+
 /// JSON-RPC request structure
 #[derive(Serialize)]
 struct JsonRpcRequest {
@@ -199,11 +212,24 @@ pub struct WasmJob {
 
 #[wasm_bindgen]
 impl WasmSupervisorClient {
-    /// Create a new WASM supervisor client
+    /// Create a new WASM supervisor client without authentication
     #[wasm_bindgen(constructor)]
     pub fn new(server_url: String) -> Self {
         console_log::init_with_level(log::Level::Info).ok();
-        Self { server_url }
+        Self { 
+            server_url,
+            secret: None,
+        }
+    }
+
+    /// Create a new WASM supervisor client with authentication secret
+    #[wasm_bindgen]
+    pub fn with_secret(server_url: String, secret: String) -> Self {
+        console_log::init_with_level(log::Level::Info).ok();
+        Self { 
+            server_url,
+            secret: Some(secret),
+        }
     }
 
     /// Get the server URL
@@ -221,13 +247,88 @@ impl WasmSupervisorClient {
         }
     }
 
-    /// Register a new runner to the supervisor with secret authentication
-    pub async fn register_runner(&self, secret: &str, name: &str, queue: &str) -> Result<String, JsValue> {
-        let params = serde_json::json!([{
-            "secret": secret,
+    /// Verify an API key and return its metadata as JSON
+    /// The key is sent via Authorization header (Bearer token)
+    pub async fn auth_verify(&self, key: String) -> Result<JsValue, JsValue> {
+        // Create a temporary client with the key to verify
+        let temp_client = WasmSupervisorClient::with_secret(self.server_url.clone(), key);
+        
+        // Send empty object as params - the key is in the Authorization header
+        let params = serde_json::json!({});
+        
+        match temp_client.call_method("auth.verify", params).await {
+            Ok(result) => {
+                // Parse to AuthVerifyResponse to validate, then convert to JsValue
+                let auth_response: AuthVerifyResponse = serde_json::from_value(result)
+                    .map_err(|e| JsValue::from_str(&format!("Failed to parse auth response: {}", e)))?;
+                
+                // Convert to JsValue
+                serde_wasm_bindgen::to_value(&auth_response)
+                    .map_err(|e| JsValue::from_str(&format!("Failed to convert to JsValue: {}", e)))
+            }
+            Err(e) => Err(JsValue::from_str(&format!("Failed to verify auth: {}", e))),
+        }
+    }
+    
+    /// Verify the client's stored API key
+    /// Uses the secret that was set when creating the client with with_secret()
+    pub async fn auth_verify_self(&self) -> Result<JsValue, JsValue> {
+        let key = self.secret.as_ref()
+            .ok_or_else(|| JsValue::from_str("Client not authenticated - use with_secret() to create authenticated client"))?;
+        
+        self.auth_verify(key.clone()).await
+    }
+
+    /// Create a new API key (admin only)
+    /// Returns the created API key with its key string
+    pub async fn auth_create_key(&self, name: String, scope: String) -> Result<JsValue, JsValue> {
+        let params = serde_json::json!({
             "name": name,
-            "queue": queue
-        }]);
+            "scope": scope
+        });
+        
+        match self.call_method("auth.create_key", params).await {
+            Ok(result) => Ok(serde_wasm_bindgen::to_value(&result)
+                .map_err(|e| JsValue::from_str(&format!("Failed to convert result: {}", e)))?),
+            Err(e) => Err(JsValue::from_str(&format!("Failed to create key: {}", e))),
+        }
+    }
+
+    /// List all API keys (admin only)
+    pub async fn auth_list_keys(&self) -> Result<JsValue, JsValue> {
+        match self.call_method("auth.list_keys", serde_json::Value::Null).await {
+            Ok(result) => Ok(serde_wasm_bindgen::to_value(&result)
+                .map_err(|e| JsValue::from_str(&format!("Failed to convert result: {}", e)))?),
+            Err(e) => Err(JsValue::from_str(&format!("Failed to list keys: {}", e))),
+        }
+    }
+
+    /// Remove an API key (admin only)
+    pub async fn auth_remove_key(&self, key: String) -> Result<bool, JsValue> {
+        let params = serde_json::json!({
+            "key": key
+        });
+        
+        match self.call_method("auth.remove_key", params).await {
+            Ok(result) => {
+                if let Some(success) = result.as_bool() {
+                    Ok(success)
+                } else {
+                    Err(JsValue::from_str("Invalid response format: expected boolean"))
+                }
+            },
+            Err(e) => Err(JsValue::from_str(&format!("Failed to remove key: {}", e))),
+        }
+    }
+
+    /// Register a new runner to the supervisor
+    /// The queue name is automatically set to match the runner name
+    /// Authentication uses the secret from Authorization header (set during client creation)
+    pub async fn register_runner(&self, name: String) -> Result<String, JsValue> {
+        // Secret is sent via Authorization header, not in params
+        let params = serde_json::json!({
+            "name": name
+        });
         
         match self.call_method("register_runner", params).await {
             Ok(result) => {
@@ -238,13 +339,13 @@ impl WasmSupervisorClient {
                     Err(JsValue::from_str("Invalid response format: expected runner name"))
                 }
             },
-            Err(e) => Err(JsValue::from_str(&e.to_string())),
+            Err(e) => Err(JsValue::from_str(&format!("Failed to register runner: {}", e))),
         }
     }
 
-    /// Create a job (fire-and-forget, non-blocking)
+    /// Create a job (fire-and-forget, non-blocking) - DEPRECATED: Use create_job with API key auth
     #[wasm_bindgen]
-    pub async fn create_job(&self, secret: String, job: WasmJob) -> Result<String, JsValue> {
+    pub async fn create_job_with_secret(&self, secret: String, job: WasmJob) -> Result<String, JsValue> {
         // Backend expects RunJobParams struct with secret and job fields - wrap in array like register_runner
         let params = serde_json::json!([{
             "secret": secret,
@@ -326,17 +427,65 @@ impl WasmSupervisorClient {
         }
     }
 
-    /// List all job IDs from Redis
-    pub async fn list_jobs(&self) -> Result<Vec<String>, JsValue> {
-        match self.call_method("jobs.list", serde_json::Value::Null).await {
+    /// Create a job from a JsValue (full Job object)
+    pub async fn create_job(&self, job: JsValue) -> Result<String, JsValue> {
+        // Convert JsValue to serde_json::Value
+        let job_value: serde_json::Value = serde_wasm_bindgen::from_value(job)
+            .map_err(|e| JsValue::from_str(&format!("Failed to parse job: {}", e)))?;
+        
+        // Wrap in RunJobParams structure and pass as positional parameter
+        let params = serde_json::json!([{
+            "job": job_value
+        }]);
+        
+        match self.call_method("jobs.create", params).await {
             Ok(result) => {
-                if let Ok(jobs) = serde_json::from_value::<Vec<String>>(result) {
-                    Ok(jobs)
+                if let Some(job_id) = result.as_str() {
+                    Ok(job_id.to_string())
                 } else {
-                    Err(JsValue::from_str("Invalid response format for list_jobs"))
+                    Err(JsValue::from_str("Invalid response format: expected job ID"))
                 }
             },
-            Err(e) => Err(JsValue::from_str(&e.to_string())),
+            Err(e) => Err(JsValue::from_str(&format!("Failed to create job: {}", e))),
+        }
+    }
+
+    /// Create a job with basic parameters (simplified version)
+    pub async fn create_simple_job(
+        &self,
+        runner: String,
+        caller_id: String,
+        context_id: String,
+        payload: String,
+        executor: String,
+    ) -> Result<String, JsValue> {
+        // Generate a unique job ID
+        let job_id = format!("job-{}", uuid::Uuid::new_v4());
+        
+        let job = serde_json::json!({
+            "id": job_id,
+            "runner": runner,
+            "caller_id": caller_id,
+            "context_id": context_id,
+            "payload": payload,
+            "executor": executor,
+            "timeout": 30,
+            "env": {}
+        });
+        
+        let params = serde_json::json!({
+            "job": job
+        });
+        
+        match self.call_method("jobs.create", params).await {
+            Ok(result) => {
+                if let Some(job_id) = result.as_str() {
+                    Ok(job_id.to_string())
+                } else {
+                    Err(JsValue::from_str("Invalid response format: expected job ID"))
+                }
+            },
+            Err(e) => Err(JsValue::from_str(&format!("Failed to create job: {}", e))),
         }
     }
 
@@ -410,9 +559,11 @@ impl WasmSupervisorClient {
     /// Delete a job by ID
     #[wasm_bindgen]
     pub async fn delete_job(&self, job_id: &str) -> Result<(), JsValue> {
-        let params = serde_json::json!([job_id]);
+        let params = serde_json::json!([{
+            "job_id": job_id
+        }]);
         
-        match self.call_method("delete_job", params).await {
+        match self.call_method("job.delete", params).await {
             Ok(_) => Ok(()),
             Err(e) => Err(JsValue::from_str(&format!("Failed to delete job: {:?}", e)))
         }
@@ -679,6 +830,54 @@ impl WasmJob {
 }
 
 impl WasmSupervisorClient {
+    /// List all jobs (returns full job objects as Vec<serde_json::Value>)
+    /// This is not exposed to WASM directly due to type limitations
+    pub async fn list_jobs(&self) -> Result<Vec<serde_json::Value>, JsValue> {
+        let params = serde_json::json!([]);
+        match self.call_method("jobs.list", params).await {
+            Ok(result) => {
+                if let Ok(jobs) = serde_json::from_value::<Vec<serde_json::Value>>(result) {
+                    Ok(jobs)
+                } else {
+                    Err(JsValue::from_str("Invalid response format for jobs.list"))
+                }
+            },
+            Err(e) => Err(JsValue::from_str(&e.to_string())),
+        }
+    }
+    
+    /// Start a previously created job by queuing it to its assigned runner
+    pub async fn start_job(&self, job_id: &str) -> Result<(), JsValue> {
+        let params = serde_json::json!([{
+            "job_id": job_id
+        }]);
+        
+        match self.call_method("job.start", params).await {
+            Ok(_) => Ok(()),
+            Err(e) => Err(JsValue::from_str(&e.to_string())),
+        }
+    }
+    
+    /// Get the status of a job
+    pub async fn get_job_status(&self, job_id: &str) -> Result<serde_json::Value, JsValue> {
+        let params = serde_json::json!([job_id]);
+        
+        match self.call_method("job.status", params).await {
+            Ok(result) => Ok(result),
+            Err(e) => Err(JsValue::from_str(&e.to_string())),
+        }
+    }
+    
+    /// Get the result of a completed job
+    pub async fn get_job_result(&self, job_id: &str) -> Result<serde_json::Value, JsValue> {
+        let params = serde_json::json!([job_id]);
+        
+        match self.call_method("job.result", params).await {
+            Ok(result) => Ok(result),
+            Err(e) => Err(JsValue::from_str(&e.to_string())),
+        }
+    }
+    
     /// Internal method to make JSON-RPC calls
     async fn call_method(&self, method: &str, params: serde_json::Value) -> WasmClientResult<serde_json::Value> {
         let request = JsonRpcRequest {
@@ -694,6 +893,12 @@ impl WasmSupervisorClient {
         let headers = Headers::new().map_err(|e| WasmClientError::JavaScript(format!("{:?}", e)))?;
         headers.set("Content-Type", "application/json")
             .map_err(|e| WasmClientError::JavaScript(format!("{:?}", e)))?;
+        
+        // Add Authorization header if secret is present
+        if let Some(secret) = &self.secret {
+            headers.set("Authorization", &format!("Bearer {}", secret))
+                .map_err(|e| WasmClientError::JavaScript(format!("{:?}", e)))?;
+        }
 
         // Create request init
         let opts = RequestInit::new();
@@ -760,3 +965,82 @@ pub fn create_job(id: String, payload: String, executor: String, runner: String)
 pub fn create_client(server_url: String) -> WasmSupervisorClient {
     WasmSupervisorClient::new(server_url)
 }
+
+/// Sign a job's canonical representation with a private key
+/// Returns a tuple of (public_key_hex, signature_hex)
+#[wasm_bindgen]
+pub fn sign_job_canonical(
+    canonical_repr: String,
+    private_key_hex: String,
+) -> Result<JsValue, JsValue> {
+    // Decode private key from hex
+    let secret_bytes = hex::decode(&private_key_hex)
+        .map_err(|e| JsValue::from_str(&format!("Invalid private key hex: {}", e)))?;
+    
+    let secret_key = SecretKey::from_slice(&secret_bytes)
+        .map_err(|e| JsValue::from_str(&format!("Invalid private key: {}", e)))?;
+    
+    // Get the public key
+    let secp = Secp256k1::new();
+    let public_key = PublicKey::from_secret_key(&secp, &secret_key);
+    let public_key_hex = hex::encode(public_key.serialize());
+    
+    // Hash the canonical representation
+    let mut hasher = Sha256::new();
+    hasher.update(canonical_repr.as_bytes());
+    let hash = hasher.finalize();
+    
+    // Create message from hash
+    let message = Message::from_digest_slice(&hash)
+        .map_err(|e| JsValue::from_str(&format!("Invalid message: {}", e)))?;
+    
+    // Sign the message
+    let signature = secp.sign_ecdsa(&message, &secret_key);
+    let signature_hex = hex::encode(signature.serialize_compact());
+    
+    // Return as JS object
+    let result = serde_json::json!({
+        "public_key": public_key_hex,
+        "signature": signature_hex
+    });
+    
+    serde_wasm_bindgen::to_value(&result)
+        .map_err(|e| JsValue::from_str(&format!("Failed to serialize result: {}", e)))
+}
+
+/// Create canonical representation of a job for signing
+/// This matches the format used in runner_rust Job::canonical_representation
+#[wasm_bindgen]
+pub fn create_job_canonical_repr(
+    id: String,
+    caller_id: String,
+    context_id: String,
+    payload: String,
+    runner: String,
+    executor: String,
+    timeout: u64,
+    env_vars_json: String,
+) -> Result<String, JsValue> {
+    // Parse env_vars from JSON
+    let env_vars: std::collections::HashMap<String, String> = serde_json::from_str(&env_vars_json)
+        .map_err(|e| JsValue::from_str(&format!("Invalid env_vars JSON: {}", e)))?;
+    
+    // Sort env_vars keys for deterministic ordering
+    let mut env_vars_sorted: Vec<_> = env_vars.iter().collect();
+    env_vars_sorted.sort_by_key(|&(k, _)| k);
+    
+    // Create canonical representation (matches Job::canonical_representation in runner_rust)
+    let canonical = format!(
+        "{}:{}:{}:{}:{}:{}:{}:{:?}",
+        id,
+        caller_id,
+        context_id,
+        payload,
+        runner,
+        executor,
+        timeout,
+        env_vars_sorted
+    );
+    
+    Ok(canonical)
+}
diff --git a/cmd/supervisor.rs b/cmd/supervisor.rs
index 7ad86ca..f9c608c 100644
--- a/cmd/supervisor.rs
+++ b/cmd/supervisor.rs
@@ -58,6 +58,10 @@ struct Args {
     /// Bind address for OpenRPC HTTP server
     #[arg(long, default_value = "127.0.0.1")]
     bind_address: String,
+    
+    /// Bootstrap an initial admin API key with the given name
+    #[arg(long = "bootstrap-admin-key", value_name = "NAME")]
+    bootstrap_admin_key: Option<String>,
 }
 
 #[tokio::main]
@@ -105,6 +109,20 @@ async fn main() -> Result<(), Box<dyn std::error::Error>> {
         }
     };
     
+    // Bootstrap admin key if requested
+    if let Some(admin_key_name) = args.bootstrap_admin_key {
+        info!("Bootstrapping admin API key: {}", admin_key_name);
+        let admin_key = supervisor.bootstrap_admin_key(admin_key_name).await;
+        println!("\n╔════════════════════════════════════════════════════════════╗");
+        println!("║  🔑 Admin API Key Created                                  ║");
+        println!("╚════════════════════════════════════════════════════════════╝");
+        println!("  Name:  {}", admin_key.name);
+        println!("  Key:   {}", admin_key.key);
+        println!("  Scope: {}", admin_key.scope.as_str());
+        println!("  ⚠️  SAVE THIS KEY - IT WILL NOT BE SHOWN AGAIN!");
+        println!("╚════════════════════════════════════════════════════════════╝\n");
+    }
+    
     // Print startup information
     let server_url = format!("http://{}:{}", args.bind_address, args.port);
     println!("\n╔════════════════════════════════════════════════════════════╗");
diff --git a/docs/AUTH.md b/docs/AUTH.md
new file mode 100644
index 0000000..1e6fcf7
--- /dev/null
+++ b/docs/AUTH.md
@@ -0,0 +1,146 @@
+# Hero Supervisor Authentication
+
+The Hero Supervisor now supports API key-based authentication with three permission scopes:
+
+## Permission Scopes
+
+1. **Admin** - Full access to all operations including key management
+2. **Registrar** - Can register new runners
+3. **User** - Can create and manage jobs
+
+## Starting the Supervisor with an Admin Key
+
+Bootstrap an initial admin key when starting the supervisor:
+
+```bash
+cargo run --bin supervisor -- --bootstrap-admin-key "my-admin"
+```
+
+This will output:
+
+```
+╔════════════════════════════════════════════════════════════╗
+║  🔑 Admin API Key Created                                  ║
+╚════════════════════════════════════════════════════════════╝
+  Name:  my-admin
+  Key:   xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+  Scope: admin
+  ⚠️  SAVE THIS KEY - IT WILL NOT BE SHOWN AGAIN!
+╚════════════════════════════════════════════════════════════╝
+```
+
+**IMPORTANT:** Save this key securely - it will not be displayed again!
+
+## API Endpoints
+
+### Verify API Key
+
+Verify a key and get its metadata:
+
+```bash
+curl -X POST http://127.0.0.1:3030 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "auth.verify",
+    "params": {
+      "key": "your-api-key-here"
+    },
+    "id": 1
+  }'
+```
+
+Response:
+
+```json
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "valid": true,
+    "name": "my-admin",
+    "scope": "admin"
+  },
+  "id": 1
+}
+```
+
+### Create New API Key (Admin Only)
+
+```bash
+curl -X POST http://127.0.0.1:3030 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "auth.create_key",
+    "params": {
+      "admin_key": "your-admin-key",
+      "name": "runner-bot",
+      "scope": "registrar"
+    },
+    "id": 1
+  }'
+```
+
+Response:
+
+```json
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "key": "new-generated-uuid",
+    "name": "runner-bot",
+    "scope": "registrar",
+    "created_at": "2025-10-27T15:00:00Z",
+    "expires_at": null
+  },
+  "id": 1
+}
+```
+
+### List All API Keys (Admin Only)
+
+```bash
+curl -X POST http://127.0.0.1:3030 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "auth.list_keys",
+    "params": {
+      "admin_key": "your-admin-key"
+    },
+    "id": 1
+  }'
+```
+
+### Remove API Key (Admin Only)
+
+```bash
+curl -X POST http://127.0.0.1:3030 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "jsonrpc": "2.0",
+    "method": "auth.remove_key",
+    "params": {
+      "admin_key": "your-admin-key",
+      "key": "key-to-remove"
+    },
+    "id": 1
+  }'
+```
+
+## Using Keys in the Admin UI
+
+The admin UI will use the `auth.verify` endpoint during login to:
+1. Validate the provided API key
+2. Retrieve the key's name and scope
+3. Display the user's name and permissions in the header
+4. Show/hide UI elements based on scope
+
+## Migration from Legacy Secrets
+
+The supervisor still supports the legacy secret-based authentication for backward compatibility:
+- `--admin-secret` - Legacy admin secrets
+- `--user-secret` - Legacy user secrets  
+- `--register-secret` - Legacy register secrets
+
+However, the new API key system is recommended for better management and auditability.
diff --git a/scripts/run.sh b/scripts/run.sh
index 0f4c3cf..88aeb70 100755
--- a/scripts/run.sh
+++ b/scripts/run.sh
@@ -1 +1,70 @@
-cargo run
\ No newline at end of file
+#!/bin/bash
+
+# Hero Supervisor Development Runner
+# Runs both the supervisor backend and admin UI frontend
+
+set -e
+
+# Colors for output
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+echo -e "${BLUE}╔════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${BLUE}║  Starting Hero Supervisor Development Environment         ║${NC}"
+echo -e "${BLUE}╚════════════════════════════════════════════════════════════╝${NC}"
+
+# Function to cleanup background processes on exit
+cleanup() {
+    echo -e "\n${YELLOW}Shutting down...${NC}"
+    kill $(jobs -p) 2>/dev/null || true
+    exit 0
+}
+
+trap cleanup SIGINT SIGTERM
+
+# Check if Redis is running
+if ! pgrep -x "redis-server" > /dev/null; then
+    echo -e "${YELLOW}⚠️  Redis not detected. Starting Redis...${NC}"
+    redis-server --daemonize yes
+    sleep 1
+fi
+
+# Start the supervisor with bootstrap admin key
+echo -e "${GREEN}🚀 Starting Hero Supervisor...${NC}"
+cargo run --bin supervisor -- \
+    --bootstrap-admin-key "admin" \
+    --redis-url "redis://localhost:6379" \
+    --port 3030 \
+    --bind-address "127.0.0.1" &
+
+SUPERVISOR_PID=$!
+
+# Wait for supervisor to start
+echo -e "${BLUE}⏳ Waiting for supervisor to initialize...${NC}"
+sleep 3
+
+# Start the admin UI
+echo -e "${GREEN}🎨 Starting Admin UI...${NC}"
+cd clients/admin-ui
+trunk serve --port 8080 &
+
+ADMIN_UI_PID=$!
+
+# Wait a bit for trunk to start
+sleep 2
+
+echo -e "\n${GREEN}╔════════════════════════════════════════════════════════════╗${NC}"
+echo -e "${GREEN}║  ✅ Development Environment Ready!                         ║${NC}"
+echo -e "${GREEN}╚════════════════════════════════════════════════════════════╝${NC}"
+echo -e "${BLUE}  📡 Supervisor API:${NC} http://127.0.0.1:3030"
+echo -e "${BLUE}  🎨 Admin UI:${NC}       http://127.0.0.1:8080"
+echo -e "${BLUE}  🔗 Redis:${NC}          redis://localhost:6379"
+echo -e "${GREEN}╚════════════════════════════════════════════════════════════╝${NC}"
+echo -e "\n${YELLOW}💡 Check the supervisor output above for your admin API key!${NC}"
+echo -e "${YELLOW}   Use it to login to the Admin UI at http://127.0.0.1:8080${NC}\n"
+echo -e "${YELLOW}Press Ctrl+C to stop all services${NC}\n"
+
+# Wait for both processes
+wait
\ No newline at end of file
diff --git a/src/auth.rs b/src/auth.rs
new file mode 100644
index 0000000..838da32
--- /dev/null
+++ b/src/auth.rs
@@ -0,0 +1,134 @@
+//! Authentication and API key management
+
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use uuid::Uuid;
+
+/// API key scope/permission level
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum ApiKeyScope {
+    /// Full access - can manage keys, runners, jobs
+    Admin,
+    /// Can register new runners
+    Registrar,
+    /// Can create and manage jobs
+    User,
+}
+
+impl ApiKeyScope {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            ApiKeyScope::Admin => "admin",
+            ApiKeyScope::Registrar => "registrar",
+            ApiKeyScope::User => "user",
+        }
+    }
+}
+
+/// An API key with metadata
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ApiKey {
+    /// The actual key value (UUID or custom string)
+    pub key: String,
+    /// Human-readable name for the key
+    pub name: String,
+    /// Permission scope
+    pub scope: ApiKeyScope,
+    /// When the key was created
+    pub created_at: String,
+    /// Optional expiration timestamp
+    pub expires_at: Option<String>,
+}
+
+impl ApiKey {
+    /// Create a new API key with a generated UUID
+    pub fn new(name: String, scope: ApiKeyScope) -> Self {
+        Self {
+            key: Uuid::new_v4().to_string(),
+            name,
+            scope,
+            created_at: chrono::Utc::now().to_rfc3339(),
+            expires_at: None,
+        }
+    }
+
+    /// Create a new API key with a specific key value
+    pub fn with_key(key: String, name: String, scope: ApiKeyScope) -> Self {
+        Self {
+            key,
+            name,
+            scope,
+            created_at: chrono::Utc::now().to_rfc3339(),
+            expires_at: None,
+        }
+    }
+}
+
+/// API key store
+#[derive(Debug, Clone, Default)]
+pub struct ApiKeyStore {
+    /// Map of key -> ApiKey
+    keys: HashMap<String, ApiKey>,
+}
+
+impl ApiKeyStore {
+    pub fn new() -> Self {
+        Self {
+            keys: HashMap::new(),
+        }
+    }
+
+    /// Add a new API key
+    pub fn add_key(&mut self, key: ApiKey) {
+        self.keys.insert(key.key.clone(), key);
+    }
+
+    /// Remove an API key by its key value
+    pub fn remove_key(&mut self, key: &str) -> Option<ApiKey> {
+        self.keys.remove(key)
+    }
+
+    /// Get an API key by its key value
+    pub fn get_key(&self, key: &str) -> Option<&ApiKey> {
+        self.keys.get(key)
+    }
+
+    /// Verify a key and return its metadata if valid
+    pub fn verify_key(&self, key: &str) -> Option<&ApiKey> {
+        self.get_key(key)
+    }
+
+    /// List all keys with a specific scope
+    pub fn list_keys_by_scope(&self, scope: ApiKeyScope) -> Vec<&ApiKey> {
+        self.keys
+            .values()
+            .filter(|k| k.scope == scope)
+            .collect()
+    }
+
+    /// List all keys
+    pub fn list_all_keys(&self) -> Vec<&ApiKey> {
+        self.keys.values().collect()
+    }
+
+    /// Count keys by scope
+    pub fn count_by_scope(&self, scope: ApiKeyScope) -> usize {
+        self.keys.values().filter(|k| k.scope == scope).count()
+    }
+
+    /// Bootstrap with an initial admin key
+    pub fn bootstrap_admin_key(&mut self, name: String) -> ApiKey {
+        let key = ApiKey::new(name, ApiKeyScope::Admin);
+        self.add_key(key.clone());
+        key
+    }
+}
+
+/// Response for auth verification
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct AuthVerifyResponse {
+    pub valid: bool,
+    pub name: String,
+    pub scope: String,
+}
diff --git a/src/lib.rs b/src/lib.rs
index c3b0dc2..8116069 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -7,6 +7,8 @@ pub mod job;
 pub mod supervisor;
 pub mod app;
 pub mod openrpc;
+pub mod auth;
+pub mod services;
 
 #[cfg(feature = "mycelium")]
 pub mod mycelium;
diff --git a/src/openrpc.rs b/src/openrpc.rs
index ed3e70e..6db3613 100644
--- a/src/openrpc.rs
+++ b/src/openrpc.rs
@@ -13,7 +13,7 @@ use log::{debug, info, error};
 
 use crate::supervisor::Supervisor;
 use crate::runner::{Runner, RunnerError};
-use crate::runner::{ProcessManagerError, ProcessStatus, LogInfo};
+use crate::runner::{ProcessStatus, LogInfo};
 use crate::job::Job;
 use crate::ProcessManagerType;
 use serde::{Deserialize, Serialize};
@@ -69,12 +69,10 @@ fn invalid_params_error(msg: &str) -> ErrorObject<'static> {
 }
 
 /// Request parameters for registering a new runner
-/// TODO: Move secret to HTTP Authorization header for better security
-#[derive(Debug, Deserialize, Serialize)]
+/// The secret is extracted from Authorization header
+#[derive(Debug, Deserialize, Serialize, Clone)]
 pub struct RegisterRunnerParams {
-    pub secret: String,
     pub name: String,
-    // Note: queue is derived from name (name = queue)
 }
 
 /// Request parameters for runner management operations
@@ -112,17 +110,15 @@ pub struct RunnerConfig {
 }
 
 /// Request parameters for running a job
-/// TODO: Move secret to HTTP Authorization header for better security
+/// The secret is extracted from Authorization header
 #[derive(Debug, Deserialize, Serialize)]
 pub struct RunJobParams {
-    pub secret: String,
     pub job: Job,
 }
 
 /// Request parameters for starting a job
 #[derive(Debug, Deserialize, Serialize)]
 pub struct StartJobParams {
-    pub secret: String,
     pub job_id: String,
 }
 
@@ -139,9 +135,6 @@ pub enum JobResult {
 pub struct JobStatusResponse {
     pub job_id: String,
     pub status: String,
-    pub created_at: String,
-    pub started_at: Option<String>,
-    pub completed_at: Option<String>,
 }
 
 /// Request parameters for queuing a job
@@ -169,7 +162,6 @@ pub struct StopJobParams {
 /// Request parameters for deleting a job
 #[derive(Debug, Deserialize, Serialize)]
 pub struct DeleteJobParams {
-    pub secret: String,
     pub job_id: String,
 }
 
@@ -257,6 +249,23 @@ pub struct LogInfoWrapper {
     pub message: String,
 }
 
+/// Thread-local storage for the current request's API key
+thread_local! {
+    static CURRENT_API_KEY: std::cell::RefCell<Option<String>> = std::cell::RefCell::new(None);
+}
+
+/// Set the current API key for this request
+pub fn set_current_api_key(key: Option<String>) {
+    CURRENT_API_KEY.with(|k| {
+        *k.borrow_mut() = key;
+    });
+}
+
+/// Get the current API key for this request
+pub fn get_current_api_key() -> Option<String> {
+    CURRENT_API_KEY.with(|k| k.borrow().clone())
+}
+
 impl From<LogInfo> for LogInfoWrapper {
     fn from(log: crate::runner::LogInfo) -> Self {
         LogInfoWrapper {
@@ -284,12 +293,34 @@ pub struct SupervisorInfoResponse {
     pub runners_count: usize,
 }
 
+/// Request parameters for auth verification
+/// Empty - the key is extracted from Authorization header
+#[derive(Debug, Deserialize, Serialize, Default)]
+pub struct AuthVerifyParams {}
+
+/// Request parameters for creating API keys
+#[derive(Debug, Deserialize, Serialize)]
+pub struct CreateApiKeyParams {
+    pub name: String,
+    pub scope: String, // "admin", "registrar", or "user"
+}
+
+/// Request parameters for removing API keys
+#[derive(Debug, Deserialize, Serialize)]
+pub struct RemoveApiKeyParams {
+    pub key: String,
+}
+
+/// Request parameters for listing API keys - empty, uses header auth
+#[derive(Debug, Deserialize, Serialize, Default)]
+pub struct ListApiKeysParams {}
+
 /// OpenRPC trait defining all supervisor methods
 #[rpc(server)]
 pub trait SupervisorRpc {
     /// Register a new runner with secret-based authentication
     #[method(name = "register_runner")]
-    async fn register_runner(&self, params: RegisterRunnerParams) -> RpcResult<String>;
+    async fn register_runner(&self, name: String) -> RpcResult<String>;
 
     /// Create a job without queuing it to a runner
     #[method(name = "jobs.create")]
@@ -423,6 +454,22 @@ pub trait SupervisorRpc {
     #[method(name = "get_supervisor_info")]
     async fn get_supervisor_info(&self, admin_secret: String) -> RpcResult<SupervisorInfoResponse>;
     
+    /// Verify an API key and return its metadata
+    #[method(name = "auth.verify")]
+    async fn auth_verify(&self) -> RpcResult<crate::auth::AuthVerifyResponse>;
+    
+    /// Create a new API key (admin only)
+    #[method(name = "auth.create_key")]
+    async fn auth_create_key(&self, name: String, scope: String) -> RpcResult<crate::auth::ApiKey>;
+    
+    /// Remove an API key (admin only)
+    #[method(name = "auth.remove_key")]
+    async fn auth_remove_key(&self, key: String) -> RpcResult<bool>;
+    
+    /// List all API keys (admin only)
+    #[method(name = "auth.list_keys")]
+    async fn auth_list_keys(&self) -> RpcResult<Vec<crate::auth::ApiKey>>;
+    
     /// OpenRPC discovery method - returns the OpenRPC document describing this API
     #[method(name = "rpc.discover")]
     async fn rpc_discover(&self) -> RpcResult<serde_json::Value>;
@@ -447,26 +494,35 @@ fn parse_process_manager_type(pm_type: &str, session_name: Option<String>) -> Re
 /// This eliminates the need for a wrapper struct
 #[async_trait]
 impl SupervisorRpcServer for Arc<Mutex<Supervisor>> {
-    async fn register_runner(&self, params: RegisterRunnerParams) -> RpcResult<String> {
-        debug!("OpenRPC request: register_runner with params: {:?}", params);
+    async fn register_runner(&self, name: String) -> RpcResult<String> {
+        debug!("OpenRPC request: register_runner with name: {}", name);
+        
+        // Get API key from Authorization header
+        let key = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
         
         let mut supervisor = self.lock().await;
-        // Queue name is the same as runner name
+        
+        // register_runner now handles API key verification internally
         supervisor
-            .register_runner(&params.secret, &params.name, &params.name)
+            .register_runner(&key, &name, &name)
             .await
             .map_err(runner_error_to_rpc_error)?;
         
         // Return the runner name that was registered
-        Ok(params.name)
+        Ok(name)
     }
 
     async fn jobs_create(&self, params: RunJobParams) -> RpcResult<String> {
         debug!("OpenRPC request: jobs.create with params: {:?}", params);
         
+        // Get secret from Authorization header
+        let secret = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
         let mut supervisor = self.lock().await;
         let job_id = supervisor
-            .create_job(&params.secret, params.job)
+            .create_job(&secret, params.job)
             .await
             .map_err(runner_error_to_rpc_error)?;
         
@@ -485,9 +541,13 @@ impl SupervisorRpcServer for Arc<Mutex<Supervisor>> {
     async fn job_run(&self, params: RunJobParams) -> RpcResult<JobResult> {
         debug!("OpenRPC request: job.run with params: {:?}", params);
         
+        // Get secret from Authorization header
+        let secret = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
         let mut supervisor = self.lock().await;
         match supervisor
-            .run_job(&params.secret, params.job)
+            .run_job(&secret, params.job)
             .await
             .map_err(runner_error_to_rpc_error)? {
             Some(output) => Ok(JobResult::Success { success: output }),
@@ -498,9 +558,13 @@ impl SupervisorRpcServer for Arc<Mutex<Supervisor>> {
     async fn job_start(&self, params: StartJobParams) -> RpcResult<()> {
         debug!("OpenRPC request: job.start with params: {:?}", params);
         
+        // Get secret from Authorization header
+        let secret = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
         let mut supervisor = self.lock().await;
         supervisor
-            .start_job(&params.secret, &params.job_id)
+            .start_job(&secret, &params.job_id)
             .await
             .map_err(runner_error_to_rpc_error)
     }
@@ -549,9 +613,13 @@ impl SupervisorRpcServer for Arc<Mutex<Supervisor>> {
     async fn job_delete(&self, params: DeleteJobParams) -> RpcResult<()> {
         debug!("OpenRPC request: job.delete with params: {:?}", params);
         
+        // Get secret from Authorization header
+        let secret = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
         let mut supervisor = self.lock().await;
         supervisor
-            .delete_job(&params.job_id)
+            .delete_job_with_auth(&secret, &params.job_id)
             .await
             .map_err(runner_error_to_rpc_error)
     }
@@ -875,6 +943,92 @@ impl SupervisorRpcServer for Arc<Mutex<Supervisor>> {
         })
     }
     
+    async fn auth_verify(&self) -> RpcResult<crate::auth::AuthVerifyResponse> {
+        debug!("OpenRPC request: auth.verify");
+        let supervisor = self.lock().await;
+        
+        // Get key from thread-local (set by middleware from Authorization header)
+        let key = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
+        match supervisor.verify_api_key(&key).await {
+            Some(api_key) => {
+                Ok(crate::auth::AuthVerifyResponse {
+                    valid: true,
+                    name: api_key.name,
+                    scope: api_key.scope.as_str().to_string(),
+                })
+            }
+            None => {
+                Ok(crate::auth::AuthVerifyResponse {
+                    valid: false,
+                    name: String::new(),
+                    scope: String::new(),
+                })
+            }
+        }
+    }
+    
+    async fn auth_create_key(&self, name: String, scope: String) -> RpcResult<crate::auth::ApiKey> {
+        debug!("OpenRPC request: auth.create_key");
+        
+        // Get API key from Authorization header
+        let key = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
+        let supervisor = self.lock().await;
+        
+        // Verify admin key
+        if !supervisor.is_admin_key(&key).await {
+            return Err(ErrorObject::owned(-32603, "Admin permissions required", None::<()>));
+        }
+        
+        // Parse scope
+        let api_scope = match scope.to_lowercase().as_str() {
+            "admin" => crate::auth::ApiKeyScope::Admin,
+            "registrar" => crate::auth::ApiKeyScope::Registrar,
+            "user" => crate::auth::ApiKeyScope::User,
+            _ => return Err(ErrorObject::owned(-32602, "Invalid scope. Must be 'admin', 'registrar', or 'user'", None::<()>)),
+        };
+        
+        let api_key = supervisor.create_api_key(name, api_scope).await;
+        Ok(api_key)
+    }
+    
+    async fn auth_remove_key(&self, key_to_remove: String) -> RpcResult<bool> {
+        debug!("OpenRPC request: auth.remove_key");
+        
+        // Get API key from Authorization header
+        let key = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
+        let supervisor = self.lock().await;
+        
+        // Verify admin key
+        if !supervisor.is_admin_key(&key).await {
+            return Err(ErrorObject::owned(-32603, "Admin permissions required", None::<()>));
+        }
+        
+        Ok(supervisor.remove_api_key(&key_to_remove).await.is_some())
+    }
+    
+    async fn auth_list_keys(&self) -> RpcResult<Vec<crate::auth::ApiKey>> {
+        debug!("OpenRPC request: auth.list_keys");
+        
+        // Get API key from Authorization header
+        let key = get_current_api_key()
+            .ok_or_else(|| ErrorObject::owned(-32602, "Missing Authorization header", None::<()>))?;
+        
+        let supervisor = self.lock().await;
+        
+        // Verify admin key
+        if !supervisor.is_admin_key(&key).await {
+            return Err(ErrorObject::owned(-32603, "Admin permissions required", None::<()>));
+        }
+        
+        Ok(supervisor.list_api_keys().await)
+    }
+    
     async fn rpc_discover(&self) -> RpcResult<serde_json::Value> {
         debug!("OpenRPC request: rpc.discover");
         
@@ -915,6 +1069,55 @@ pub async fn start_server_with_supervisor(
     Ok(handle)
 }
 
+/// HTTP middleware layer to extract Authorization header
+#[derive(Clone)]
+struct AuthExtractLayer;
+
+impl<S> tower::Layer<S> for AuthExtractLayer {
+    type Service = AuthExtractService<S>;
+
+    fn layer(&self, inner: S) -> Self::Service {
+        AuthExtractService { inner }
+    }
+}
+
+#[derive(Clone)]
+struct AuthExtractService<S> {
+    inner: S,
+}
+
+impl<S, B> tower::Service<hyper::Request<B>> for AuthExtractService<S>
+where
+    S: tower::Service<hyper::Request<B>> + Clone + Send + 'static,
+    S::Future: Send + 'static,
+    B: Send + 'static,
+{
+    type Response = S::Response;
+    type Error = S::Error;
+    type Future = std::pin::Pin<Box<dyn std::future::Future<Output = Result<Self::Response, Self::Error>> + Send>>;
+
+    fn poll_ready(&mut self, cx: &mut std::task::Context<'_>) -> std::task::Poll<Result<(), Self::Error>> {
+        self.inner.poll_ready(cx)
+    }
+
+    fn call(&mut self, req: hyper::Request<B>) -> Self::Future {
+        // Extract Authorization header
+        let api_key = req.headers()
+            .get("authorization")
+            .and_then(|h| h.to_str().ok())
+            .and_then(|h| h.strip_prefix("Bearer "))
+            .map(|s| s.to_string());
+        
+        // Store in thread-local
+        set_current_api_key(api_key);
+        
+        let mut inner = self.inner.clone();
+        Box::pin(async move {
+            inner.call(req).await
+        })
+    }
+}
+
 /// Start HTTP OpenRPC server (Unix socket support would require additional dependencies)
 pub async fn start_http_openrpc_server(
     supervisor: Arc<Mutex<Supervisor>>,
@@ -929,9 +1132,14 @@ pub async fn start_http_openrpc_server(
         .allow_headers(Any)
         .allow_methods(Any);
     
-    // Start HTTP server with CORS
+    // Build HTTP middleware stack with auth extraction
+    let http_middleware = tower::ServiceBuilder::new()
+        .layer(AuthExtractLayer)
+        .layer(cors);
+    
+    // Start HTTP server with middleware
     let http_server = Server::builder()
-        .set_http_middleware(tower::ServiceBuilder::new().layer(cors))
+        .set_http_middleware(http_middleware)
         .build(http_addr)
         .await?;
     let http_handle = http_server.start(supervisor.into_rpc());
@@ -1015,9 +1223,11 @@ mod tests {
             .unwrap();
 
         let params = RunJobParams {
-            secret: "test-secret".to_string(),
             job: job.clone(),
         };
+        
+        // Set the API key in thread-local for the test
+        set_current_api_key(Some("test-secret".to_string()));
 
         let result = supervisor.jobs_create(params).await;
         // Should work or fail gracefully without Redis
@@ -1025,7 +1235,6 @@ mod tests {
 
         // Test job.start
         let start_params = StartJobParams {
-            secret: "test-secret".to_string(),
             job_id: "test-job".to_string(),
         };
 
@@ -1035,7 +1244,6 @@ mod tests {
 
         // Test invalid secret
         let invalid_params = StartJobParams {
-            secret: "invalid".to_string(),
             job_id: "test-job".to_string(),
         };
 
diff --git a/src/services.rs b/src/services.rs
new file mode 100644
index 0000000..ab9bd0f
--- /dev/null
+++ b/src/services.rs
@@ -0,0 +1,312 @@
+//! Service layer for persistent storage of keys, runners, and jobs
+//! 
+//! This module provides database/storage services for the supervisor.
+//! Currently uses in-memory storage, but designed to be easily extended
+//! to use Redis, PostgreSQL, or other persistent storage backends.
+
+use crate::auth::{ApiKey, ApiKeyScope};
+use crate::job::Job;
+use crate::runner::Runner;
+use std::collections::HashMap;
+use std::sync::Arc;
+use tokio::sync::Mutex;
+use serde::{Deserialize, Serialize};
+
+/// Service for managing API keys
+#[derive(Debug, Clone)]
+pub struct ApiKeyService {
+    store: Arc<Mutex<HashMap<String, ApiKey>>>,
+}
+
+impl ApiKeyService {
+    /// Create a new API key service
+    pub fn new() -> Self {
+        Self {
+            store: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+
+    /// Store an API key
+    pub async fn store(&self, key: ApiKey) -> Result<(), String> {
+        let mut store = self.store.lock().await;
+        store.insert(key.key.clone(), key);
+        Ok(())
+    }
+
+    /// Get an API key by its key string
+    pub async fn get(&self, key: &str) -> Option<ApiKey> {
+        let store = self.store.lock().await;
+        store.get(key).cloned()
+    }
+
+    /// List all API keys
+    pub async fn list(&self) -> Vec<ApiKey> {
+        let store = self.store.lock().await;
+        store.values().cloned().collect()
+    }
+
+    /// Remove an API key
+    pub async fn remove(&self, key: &str) -> Option<ApiKey> {
+        let mut store = self.store.lock().await;
+        store.remove(key)
+    }
+
+    /// Count API keys by scope
+    pub async fn count_by_scope(&self, scope: ApiKeyScope) -> usize {
+        let store = self.store.lock().await;
+        store.values().filter(|k| k.scope == scope).count()
+    }
+
+    /// Clear all API keys (for testing)
+    pub async fn clear(&self) {
+        let mut store = self.store.lock().await;
+        store.clear();
+    }
+}
+
+impl Default for ApiKeyService {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Service for managing runners
+#[derive(Debug, Clone)]
+pub struct RunnerService {
+    store: Arc<Mutex<HashMap<String, RunnerMetadata>>>,
+}
+
+/// Metadata about a runner for storage
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RunnerMetadata {
+    pub id: String,
+    pub name: String,
+    pub queue: String,
+    pub registered_at: String,
+    pub registered_by: String, // API key name that registered this runner
+}
+
+impl RunnerService {
+    /// Create a new runner service
+    pub fn new() -> Self {
+        Self {
+            store: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+
+    /// Store runner metadata
+    pub async fn store(&self, metadata: RunnerMetadata) -> Result<(), String> {
+        let mut store = self.store.lock().await;
+        store.insert(metadata.id.clone(), metadata);
+        Ok(())
+    }
+
+    /// Get runner metadata by ID
+    pub async fn get(&self, id: &str) -> Option<RunnerMetadata> {
+        let store = self.store.lock().await;
+        store.get(id).cloned()
+    }
+
+    /// List all runners
+    pub async fn list(&self) -> Vec<RunnerMetadata> {
+        let store = self.store.lock().await;
+        store.values().cloned().collect()
+    }
+
+    /// Remove a runner
+    pub async fn remove(&self, id: &str) -> Option<RunnerMetadata> {
+        let mut store = self.store.lock().await;
+        store.remove(id)
+    }
+
+    /// Count total runners
+    pub async fn count(&self) -> usize {
+        let store = self.store.lock().await;
+        store.len()
+    }
+
+    /// Clear all runners (for testing)
+    pub async fn clear(&self) {
+        let mut store = self.store.lock().await;
+        store.clear();
+    }
+}
+
+impl Default for RunnerService {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Service for managing jobs
+#[derive(Debug, Clone)]
+pub struct JobService {
+    store: Arc<Mutex<HashMap<String, JobMetadata>>>,
+}
+
+/// Metadata about a job for storage
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct JobMetadata {
+    pub job_id: String,
+    pub runner: String,
+    pub created_at: String,
+    pub created_by: String, // API key name that created this job
+    pub status: String,
+    pub job: Job,
+}
+
+impl JobService {
+    /// Create a new job service
+    pub fn new() -> Self {
+        Self {
+            store: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+
+    /// Store job metadata
+    pub async fn store(&self, metadata: JobMetadata) -> Result<(), String> {
+        let mut store = self.store.lock().await;
+        store.insert(metadata.job_id.clone(), metadata);
+        Ok(())
+    }
+
+    /// Get job metadata by ID
+    pub async fn get(&self, job_id: &str) -> Option<JobMetadata> {
+        let store = self.store.lock().await;
+        store.get(job_id).cloned()
+    }
+
+    /// List all jobs
+    pub async fn list(&self) -> Vec<JobMetadata> {
+        let store = self.store.lock().await;
+        store.values().cloned().collect()
+    }
+
+    /// List jobs by runner
+    pub async fn list_by_runner(&self, runner: &str) -> Vec<JobMetadata> {
+        let store = self.store.lock().await;
+        store.values()
+            .filter(|j| j.runner == runner)
+            .cloned()
+            .collect()
+    }
+
+    /// List jobs by creator (API key name)
+    pub async fn list_by_creator(&self, creator: &str) -> Vec<JobMetadata> {
+        let store = self.store.lock().await;
+        store.values()
+            .filter(|j| j.created_by == creator)
+            .cloned()
+            .collect()
+    }
+
+    /// Update job status
+    pub async fn update_status(&self, job_id: &str, status: String) -> Result<(), String> {
+        let mut store = self.store.lock().await;
+        if let Some(metadata) = store.get_mut(job_id) {
+            metadata.status = status;
+            Ok(())
+        } else {
+            Err(format!("Job not found: {}", job_id))
+        }
+    }
+
+    /// Remove a job
+    pub async fn remove(&self, job_id: &str) -> Option<JobMetadata> {
+        let mut store = self.store.lock().await;
+        store.remove(job_id)
+    }
+
+    /// Count total jobs
+    pub async fn count(&self) -> usize {
+        let store = self.store.lock().await;
+        store.len()
+    }
+
+    /// Clear all jobs (for testing)
+    pub async fn clear(&self) {
+        let mut store = self.store.lock().await;
+        store.clear();
+    }
+}
+
+impl Default for JobService {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Combined service container for all storage services
+#[derive(Debug, Clone)]
+pub struct Services {
+    pub api_keys: ApiKeyService,
+    pub runners: RunnerService,
+    pub jobs: JobService,
+}
+
+impl Services {
+    /// Create a new services container
+    pub fn new() -> Self {
+        Self {
+            api_keys: ApiKeyService::new(),
+            runners: RunnerService::new(),
+            jobs: JobService::new(),
+        }
+    }
+
+    /// Clear all data (for testing)
+    pub async fn clear_all(&self) {
+        self.api_keys.clear().await;
+        self.runners.clear().await;
+        self.jobs.clear().await;
+    }
+}
+
+impl Default for Services {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[tokio::test]
+    async fn test_api_key_service() {
+        let service = ApiKeyService::new();
+        
+        let key = ApiKey {
+            key: "test-key".to_string(),
+            name: "test".to_string(),
+            scope: ApiKeyScope::User,
+        };
+        
+        service.store(key.clone()).await.unwrap();
+        assert_eq!(service.get("test-key").await.unwrap().name, "test");
+        assert_eq!(service.list().await.len(), 1);
+        
+        service.remove("test-key").await;
+        assert!(service.get("test-key").await.is_none());
+    }
+
+    #[tokio::test]
+    async fn test_runner_service() {
+        let service = RunnerService::new();
+        
+        let metadata = RunnerMetadata {
+            id: "runner1".to_string(),
+            name: "runner1".to_string(),
+            queue: "queue1".to_string(),
+            registered_at: "2024-01-01".to_string(),
+            registered_by: "admin".to_string(),
+        };
+        
+        service.store(metadata.clone()).await.unwrap();
+        assert_eq!(service.get("runner1").await.unwrap().name, "runner1");
+        assert_eq!(service.count().await, 1);
+        
+        service.remove("runner1").await;
+        assert!(service.get("runner1").await.is_none());
+    }
+}
diff --git a/src/supervisor.rs b/src/supervisor.rs
index e4eafc7..5b10de6 100644
--- a/src/supervisor.rs
+++ b/src/supervisor.rs
@@ -98,12 +98,16 @@ pub struct Supervisor {
     redis_client: redis::Client,
     /// Namespace for queue keys
     namespace: String,
-    /// Admin secrets for full access
+    /// Admin secrets for full access (deprecated - use api_keys)
     admin_secrets: Vec<String>,
-    /// User secrets for limited access
+    /// User secrets for limited access (deprecated - use api_keys)
     user_secrets: Vec<String>,
-    /// Register secrets for runner registration
+    /// Register secrets for runner registration (deprecated - use api_keys)
     register_secrets: Vec<String>,
+    /// API key store for named key management
+    api_keys: Arc<Mutex<crate::auth::ApiKeyStore>>,
+    /// Services for persistent storage
+    services: crate::services::Services,
     client: Client,
 }
 
@@ -243,6 +247,8 @@ impl SupervisorBuilder {
             admin_secrets: self.admin_secrets,
             user_secrets: self.user_secrets,
             register_secrets: self.register_secrets,
+            api_keys: Arc::new(Mutex::new(crate::auth::ApiKeyStore::new())),
+            services: crate::services::Services::new(),
         })
     }
 }
@@ -265,12 +271,16 @@ impl Supervisor {
         Ok(())
     }
 
-    /// Register a new runner with secret-based authentication
-    pub async fn register_runner(&mut self, secret: &str, name: &str, _queue: &str) -> RunnerResult<()> {
-        // Check if the secret is valid (admin or register secret)
-        if !self.admin_secrets.contains(&secret.to_string()) && 
-           !self.register_secrets.contains(&secret.to_string()) {
-            return Err(RunnerError::InvalidSecret("Invalid secret for runner registration".to_string()));
+    /// Register a new runner with API key authentication
+    pub async fn register_runner(&mut self, key: &str, name: &str, _queue: &str) -> RunnerResult<()> {
+        // Verify API key and check scope
+        let api_key = self.verify_api_key(key).await
+            .ok_or_else(|| RunnerError::InvalidSecret("Invalid API key".to_string()))?;
+        
+        // Check if key has admin or registrar scope
+        if api_key.scope != crate::auth::ApiKeyScope::Admin && 
+           api_key.scope != crate::auth::ApiKeyScope::Registrar {
+            return Err(RunnerError::InvalidSecret("Insufficient permissions. Requires admin or registrar scope".to_string()));
         }
 
         // Create a basic runner config for the named runner
@@ -287,18 +297,36 @@ impl Supervisor {
         self.add_runner(config).await
     }
 
-    /// Create a job (fire-and-forget, non-blocking) with secret-based authentication
-    pub async fn create_job(&mut self, secret: &str, job: crate::job::Job) -> RunnerResult<String> {
-        // Check if the secret is valid (admin or user secret)
-        if !self.admin_secrets.contains(&secret.to_string()) && 
-           !self.user_secrets.contains(&secret.to_string()) {
-            return Err(RunnerError::InvalidSecret("Invalid secret for job creation".to_string()));
+    /// Create a job (fire-and-forget, non-blocking) with API key authentication
+    pub async fn create_job(&mut self, key: &str, job: crate::job::Job) -> RunnerResult<String> {
+        // Verify API key and check scope
+        let api_key = self.verify_api_key(key).await
+            .ok_or_else(|| RunnerError::InvalidSecret("Invalid API key".to_string()))?;
+        
+        // Check if key has admin or user scope
+        if api_key.scope != crate::auth::ApiKeyScope::Admin && 
+           api_key.scope != crate::auth::ApiKeyScope::User {
+            return Err(RunnerError::InvalidSecret("Insufficient permissions. Requires admin or user scope".to_string()));
         }
 
         // Find the runner by name
         let runner = job.runner.clone();
         let job_id = job.id.clone(); // Store job ID before moving job
+        
         if let Some(_runner) = self.runners.get(&runner) {
+            // Store job metadata in the database
+            let job_metadata = crate::services::JobMetadata {
+                job_id: job_id.clone(),
+                runner: runner.clone(),
+                created_at: chrono::Utc::now().to_rfc3339(),
+                created_by: api_key.name.clone(),
+                status: "queued".to_string(),
+                job: job.clone(),
+            };
+            
+            self.services.jobs.store(job_metadata).await
+                .map_err(|e| RunnerError::ConfigError { reason: format!("Failed to store job: {}", e) })?;
+            
             // Use the supervisor's queue_job_to_runner method (fire-and-forget)
             self.queue_job_to_runner(&runner, job).await?;
             Ok(job_id) // Return the job ID immediately
@@ -309,13 +337,17 @@ impl Supervisor {
         }
     }
 
-    /// Run a job on the appropriate runner with secret-based authentication
+    /// Run a job on the appropriate runner with API key authentication
     /// This is a synchronous operation that queues the job, waits for the result, and returns it
-    pub async fn run_job(&mut self, secret: &str, job: crate::job::Job) -> RunnerResult<Option<String>> {
-        // Check if the secret is valid (admin or user secret)
-        if !self.admin_secrets.contains(&secret.to_string()) && 
-           !self.user_secrets.contains(&secret.to_string()) {
-            return Err(RunnerError::InvalidSecret("Invalid secret for job execution".to_string()));
+    pub async fn run_job(&mut self, key: &str, job: crate::job::Job) -> RunnerResult<Option<String>> {
+        // Verify API key and check scope
+        let api_key = self.verify_api_key(key).await
+            .ok_or_else(|| RunnerError::InvalidSecret("Invalid API key".to_string()))?;
+        
+        // Check if key has admin or user scope
+        if api_key.scope != crate::auth::ApiKeyScope::Admin && 
+           api_key.scope != crate::auth::ApiKeyScope::User {
+            return Err(RunnerError::InvalidSecret("Insufficient permissions. Requires admin or user scope".to_string()));
         }
 
         // Find the runner by name
@@ -405,10 +437,25 @@ impl Supervisor {
         Ok(())
     }
 
-    /// Delete a job by ID
+    /// Delete a job by ID (no authentication - should be called from authenticated endpoints)
     pub async fn delete_job(&mut self, job_id: &str) -> RunnerResult<()> {
         self.client.delete_job(&job_id).await.map_err(RunnerError::from)
     }
+    
+    /// Delete a job by ID with authentication
+    pub async fn delete_job_with_auth(&mut self, secret: &str, job_id: &str) -> RunnerResult<()> {
+        // Verify API key and check scope
+        let api_key = self.verify_api_key(secret).await
+            .ok_or_else(|| RunnerError::InvalidSecret("Invalid API key".to_string()))?;
+        
+        // Check if key has admin or user scope
+        if api_key.scope != crate::auth::ApiKeyScope::Admin && 
+           api_key.scope != crate::auth::ApiKeyScope::User {
+            return Err(RunnerError::InvalidSecret("Insufficient permissions. Requires admin or user scope".to_string()));
+        }
+        
+        self.delete_job(job_id).await
+    }
 
     /// List all managed runners
     pub fn list_runners(&self) -> Vec<&str> {
@@ -664,6 +711,11 @@ impl Supervisor {
         self.admin_secrets.len()
     }
 
+    /// Get admin secrets (returns cloned vector for security)
+    pub fn get_admin_secrets(&self) -> Vec<String> {
+        self.admin_secrets.clone()
+    }
+
     /// Add a user secret
     pub fn add_user_secret(&mut self, secret: String) {
         if !self.user_secrets.contains(&secret) {
@@ -723,28 +775,43 @@ impl Supervisor {
         self.client.list_jobs().await.map_err(RunnerError::from)
     }
 
-    /// List all jobs with full details from Redis
+    /// List all jobs from the database
+    pub async fn list_jobs_from_db(&self) -> Vec<crate::services::JobMetadata> {
+        self.services.jobs.list().await
+    }
+    
+    /// List jobs by runner from the database
+    pub async fn list_jobs_by_runner(&self, runner: &str) -> Vec<crate::services::JobMetadata> {
+        self.services.jobs.list_by_runner(runner).await
+    }
+    
+    /// List jobs by creator (API key name) from the database
+    pub async fn list_jobs_by_creator(&self, creator: &str) -> Vec<crate::services::JobMetadata> {
+        self.services.jobs.list_by_creator(creator).await
+    }
+    
+    /// Get a specific job from the database
+    pub async fn get_job_from_db(&self, job_id: &str) -> Option<crate::services::JobMetadata> {
+        self.services.jobs.get(job_id).await
+    }
+
+    /// List all jobs with full details from the database
     pub async fn list_all_jobs(&self) -> RunnerResult<Vec<crate::job::Job>> {
-        let job_ids = self.client.list_jobs().await?;
-        let mut jobs = Vec::new();
-        
-        for job_id in job_ids {
-            if let Ok(job) = self.client.get_job(&job_id).await {
-                jobs.push(job);
-            }
-        }
-        
+        let job_metadata_list = self.services.jobs.list().await;
+        let jobs = job_metadata_list.into_iter().map(|metadata| metadata.job).collect();
         Ok(jobs)
     }
 
     /// Start a previously created job by queuing it to its assigned runner
     pub async fn start_job(&mut self, secret: &str, job_id: &str) -> RunnerResult<()> {
-        // Check if the secret is valid (admin or user secret)
-        if !self.admin_secrets.contains(&secret.to_string()) && 
-           !self.user_secrets.contains(&secret.to_string()) {
-            return Err(RunnerError::AuthenticationError { 
-                message: "Invalid secret for job operations".to_string() 
-            });
+        // Verify API key and check scope
+        let api_key = self.verify_api_key(secret).await
+            .ok_or_else(|| RunnerError::InvalidSecret("Invalid API key".to_string()))?;
+        
+        // Check if key has admin or user scope
+        if api_key.scope != crate::auth::ApiKeyScope::Admin && 
+           api_key.scope != crate::auth::ApiKeyScope::User {
+            return Err(RunnerError::InvalidSecret("Insufficient permissions. Requires admin or user scope".to_string()));
         }
 
         // Get the job from Redis
@@ -757,81 +824,41 @@ impl Supervisor {
 
     /// Get the status of a job
     pub async fn get_job_status(&self, job_id: &str) -> RunnerResult<crate::openrpc::JobStatusResponse> {
-        use redis::AsyncCommands;
-        
-        let mut conn = self.redis_client.get_multiplexed_async_connection().await
-            .map_err(|e| RunnerError::RedisError { source: e })?;
-        
-        // Get job data from Redis hash
-        let job_data: std::collections::HashMap<String, String> = conn.hgetall(format!("{}:job:{}", self.namespace, job_id)).await
-            .map_err(|e| RunnerError::RedisError { source: e })?;
-        
-        if job_data.is_empty() {
-            return Err(RunnerError::JobNotFound { job_id: job_id.to_string() });
-        }
-        
-        let status = job_data.get("status").unwrap_or(&"unknown".to_string()).clone();
-        let created_at = job_data.get("created_at").unwrap_or(&"".to_string()).clone();
-        let started_at = job_data.get("started_at").cloned();
-        let completed_at = job_data.get("completed_at").cloned();
+        // Use the client's get_status method
+        let status = self.client.get_status(job_id).await
+            .map_err(|e| match e {
+                crate::job::JobError::NotFound(_) => RunnerError::JobNotFound { job_id: job_id.to_string() },
+                _ => RunnerError::from(e)
+            })?;
         
         Ok(crate::openrpc::JobStatusResponse {
             job_id: job_id.to_string(),
-            status,
-            created_at,
-            started_at,
-            completed_at,
+            status: status.as_str().to_string(),
         })
     }
 
-    /// Get the result of a job (blocks until result is available)
+    /// Get the result of a job (returns immediately with current result or error)
     pub async fn get_job_result(&self, job_id: &str) -> RunnerResult<Option<String>> {
-        use redis::AsyncCommands;
-        use tokio::time::{sleep, Duration};
+        // Use client's get_status to check if job exists and get its status
+        let status = self.client.get_status(job_id).await
+            .map_err(|e| match e {
+                crate::job::JobError::NotFound(_) => RunnerError::JobNotFound { job_id: job_id.to_string() },
+                _ => RunnerError::from(e)
+            })?;
         
-        let mut conn = self.redis_client.get_multiplexed_async_connection().await
-            .map_err(|e| RunnerError::RedisError { source: e })?;
-        
-        // Poll for job completion with timeout
-        for _ in 0..300 { // 5 minutes timeout (300 * 1 second)
-            let job_data: std::collections::HashMap<String, String> = conn.hgetall(format!("{}:job:{}", self.namespace, job_id)).await
-                .map_err(|e| RunnerError::RedisError { source: e })?;
+        // If job has error status, get the error message using client method
+        if status.as_str() == "error" {
+            let error_msg = self.client.get_error(job_id).await
+                .map_err(|e| RunnerError::from(e))?;
             
-            if job_data.is_empty() {
-                return Err(RunnerError::JobNotFound { job_id: job_id.to_string() });
-            }
-            
-            let status_str = "unknown".to_string();
-            let status = job_data.get("status").unwrap_or(&status_str);
-            
-            match status.as_str() {
-                "completed" => {
-                    return Ok(job_data.get("result").cloned());
-                },
-                "failed" | "timeout" => {
-                    let default_error = "Job failed".to_string();
-                    let error_msg = job_data.get("error").unwrap_or(&default_error).clone();
-                    return Ok(Some(format!("Error: {}", error_msg)));
-                },
-                _ => {
-                    // Job still running, wait and check again
-                    tokio::time::sleep(tokio::time::Duration::from_secs(1)).await;
-                }
-            }
+            return Ok(Some(format!("Error: {}", error_msg.unwrap_or_else(|| "Unknown error".to_string()))));
         }
         
-        // Timeout reached
-        Ok(Some("Error: Timeout waiting for job result".to_string()))
-    }
-
-    /// Get runners count
-    pub fn runners_count(&self) -> usize {
-        self.runners.len()
-    }
-
-    /// Get admin secrets (returns cloned vector for security)
-    pub fn get_admin_secrets(&self) -> Vec<String> {
-        self.admin_secrets.clone()
+        // Use client's get_result to get the result
+        let result = self.client.get_result(job_id).await
+            .map_err(|e| RunnerError::from(e))?;
+        
+        Ok(result)
     }
 
     /// Get user secrets (returns cloned vector for security)
@@ -843,6 +870,68 @@ impl Supervisor {
     pub fn get_register_secrets(&self) -> Vec<String> {
         self.register_secrets.clone()
     }
+
+    /// Get runners count
+    pub fn runners_count(&self) -> usize {
+        self.runners.len()
+    }
+
+    // API Key Management Methods
+
+    /// Create a new API key
+    pub async fn create_api_key(&self, name: String, scope: crate::auth::ApiKeyScope) -> crate::auth::ApiKey {
+        let mut store = self.api_keys.lock().await;
+        let key = crate::auth::ApiKey::new(name, scope);
+        store.add_key(key.clone());
+        key
+    }
+
+    /// Create an API key with a specific key value
+    pub async fn create_api_key_with_value(&self, key_value: String, name: String, scope: crate::auth::ApiKeyScope) -> crate::auth::ApiKey {
+        let mut store = self.api_keys.lock().await;
+        let key = crate::auth::ApiKey::with_key(key_value, name, scope);
+        store.add_key(key.clone());
+        key
+    }
+
+    /// Remove an API key
+    pub async fn remove_api_key(&self, key: &str) -> Option<crate::auth::ApiKey> {
+        let mut store = self.api_keys.lock().await;
+        store.remove_key(key)
+    }
+
+    /// Verify an API key and return its metadata
+    pub async fn verify_api_key(&self, key: &str) -> Option<crate::auth::ApiKey> {
+        let store = self.api_keys.lock().await;
+        store.verify_key(key).cloned()
+    }
+
+    /// List all API keys
+    pub async fn list_api_keys(&self) -> Vec<crate::auth::ApiKey> {
+        let store = self.api_keys.lock().await;
+        store.list_all_keys().into_iter().cloned().collect()
+    }
+
+    /// List API keys by scope
+    pub async fn list_api_keys_by_scope(&self, scope: crate::auth::ApiKeyScope) -> Vec<crate::auth::ApiKey> {
+        let store = self.api_keys.lock().await;
+        store.list_keys_by_scope(scope).into_iter().cloned().collect()
+    }
+
+    /// Bootstrap an initial admin key (useful for first-time setup)
+    pub async fn bootstrap_admin_key(&self, name: String) -> crate::auth::ApiKey {
+        let mut store = self.api_keys.lock().await;
+        store.bootstrap_admin_key(name)
+    }
+
+    /// Check if a key has admin scope
+    pub async fn is_admin_key(&self, key: &str) -> bool {
+        if let Some(api_key) = self.verify_api_key(key).await {
+            api_key.scope == crate::auth::ApiKeyScope::Admin
+        } else {
+            false
+        }
+    }
 }
 
 impl Default for Supervisor {
@@ -857,6 +946,8 @@ impl Default for Supervisor {
             admin_secrets: Vec::new(),
             user_secrets: Vec::new(),
             register_secrets: Vec::new(),
+            api_keys: Arc::new(Mutex::new(crate::auth::ApiKeyStore::new())),
+            services: crate::services::Services::new(),
             client: Client::default(),
         }
     }