diff --git a/.gitignore b/.gitignore
index ba5db9c..4447151 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ vendor/
 
 # Generated files
 *.generated.*
+
+# Built SPA (Vite build output served by the server; rebuilt from dashboard/)
+/server/static/app/
diff --git a/dashboard/README.md b/dashboard/README.md
index ecc94ed..b269800 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -89,21 +89,50 @@ same-origin requests reach the backend with no CORS setup.
 To develop the UI against a *remote* backend instead, set `VITE_API_URL`
 (see `.env.example`).
 
-## Production serving — follow-up (NOT wired in this pass)
+## Production serving — WIRED
 
-The build uses `base: "./"` so emitted assets use relative paths. Production
-serving means copying `dist/` into the GC server's static directory and adding a
-catch-all route that returns `index.html` for non-API, non-asset paths (so deep
-links like `/machines` survive a hard reload under the `BrowserRouter`).
+The SPA is served by the GC Axum server from the server root. No manual copy
+step: `vite.config.ts` sets `build.outDir` to `../server/static/app/`, so the
+build lands exactly where the server serves it.
 
-That Rust-side wiring is a **deploy concern** and is intentionally left for a
-later step:
+### Build & deploy flow
 
-1. Copy `dist/` → `server/static/` (or serve `dist/` directly).
-2. Add an Axum fallback route serving `index.html` for unmatched GET paths,
-   *after* the `/api/*`, `/ws/*`, and static-asset routes.
-3. If the dashboard is mounted under a sub-path rather than the server root,
-   switch Vite `base` to that path and pass the same `basename` to
-   `<BrowserRouter>`.
+```bash
+# from dashboard/
+npm run build      # tsc -b && vite build  ->  ../server/static/app/
+```
 
-No server/Rust changes were made in this pass.
+That single command refreshes the served SPA. `emptyOutDir` clears only
+`server/static/app/` (the dedicated SPA subdir), so the v1 portal files in the
+static root are never touched.
+
+### How the server serves it (`server/src/main.rs`)
+
+- `base` is **`/`** (absolute asset paths). The SPA uses `BrowserRouter`, so a
+  hard reload of a deep link (`/machines`) must still load `/assets/*`; relative
+  (`./`) paths would resolve against the deep-link path and 404. Absolute is
+  required.
+- The Router's `fallback_service` is `ServeDir::new("static/app")` with
+  `.fallback(ServeFile::new("static/app/index.html"))`. Real files under
+  `/assets/*` are served from disk; any other unmatched path returns
+  `index.html` (HTTP **200**) so React Router resolves the route.
+- **Precedence / safety:** the fallback runs only after every explicit
+  `/api/*`, `/ws/*`, `/health`, `/metrics` route and the `/downloads` nest. Two
+  catch-all routes — `/api/*rest` and `/ws/*rest` — return a JSON **404** for
+  unrouted API/WS paths, so the SPA fallback never answers an API/WS path with
+  HTML (which would break this client's error-envelope parsing).
+- **Caching:** `/assets/*` (content-hashed) → `immutable`, one year;
+  `index.html` and everything else → `no-cache, must-revalidate`.
+
+### Build output in git
+
+`server/static/app/` is a build artifact. Whether to commit it or `.gitignore`
+it depends on the deploy model (server-side `npm run build` vs shipping the
+repo's static dir). Decide at commit time. The old `dashboard/dist/` path is no
+longer used.
+
+### Sub-path mounting (not used)
+
+The dashboard is mounted at the server root. If it is ever moved under a
+sub-path, switch Vite `base` to that path and pass the same `basename` to
+`<BrowserRouter>`.
diff --git a/dashboard/vite.config.ts b/dashboard/vite.config.ts
index 9340c8a..b35db76 100644
--- a/dashboard/vite.config.ts
+++ b/dashboard/vite.config.ts
@@ -5,14 +5,23 @@ import react from "@vitejs/plugin-react";
 // forwarded to the Rust server on :3002 so `npm run dev` works against a real
 // backend without CORS gymnastics.
 //
-// `base` is "./" so the built assets reference relative paths — production
-// serving copies `dist/` into the server's static dir and a catch-all route
-// serves index.html. Wiring that catch-all in the Rust server is a DEPLOY
-// concern (see README), not done in this pass.
+// PRODUCTION SERVING (wired in the GC server):
+//   - `base` is "/" (absolute asset paths). The SPA is served from the server
+//     root and uses `BrowserRouter`, so a hard reload of a deep link such as
+//     `/machines` must still resolve `/assets/*` correctly. Relative ("./")
+//     asset paths would break here: the browser would resolve them against the
+//     deep-link path (`/machines/assets/...`) and 404. Absolute "/" is required.
+//   - `build.outDir` points straight into the server's static tree at
+//     `server/static/app/`, so `npm run build` lands the SPA exactly where the
+//     Axum `fallback_service` serves it — no manual copy step at deploy time.
+//   - `emptyOutDir` is true, which is SAFE because the target is the dedicated
+//     `app/` SUBDIR. It wipes only `server/static/app/`, never the static root,
+//     so the v1 portal files (login.html, dashboard.html, viewer.html,
+//     downloads/) are untouched.
 const GC_SERVER = "http://localhost:3002";
 
 export default defineConfig({
-  base: "./",
+  base: "/",
   plugins: [react()],
   server: {
     port: 5273,
@@ -29,7 +38,11 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: "dist",
+    // Emit directly into the server's static tree. The Axum server serves this
+    // directory as its SPA fallback (see server/src/main.rs). Dedicated subdir,
+    // so emptyOutDir only clears the SPA build — not the v1 portal files.
+    outDir: "../server/static/app",
+    emptyOutDir: true,
     sourcemap: true,
   },
 });
diff --git a/server/src/main.rs b/server/src/main.rs
index b104ad3..c973b6b 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -24,20 +24,36 @@ use axum::{
     extract::{ConnectInfo, Json, Path, Query, Request, State},
     http::StatusCode,
     middleware::{self as axum_middleware, Next},
-    response::{Html, IntoResponse},
-    routing::{delete, get, post, put},
+    response::IntoResponse,
+    routing::{any, delete, get, post, put},
     Router,
 };
 use serde::Deserialize;
 use std::net::SocketAddr;
 use std::sync::Arc;
 use tower_http::cors::CorsLayer;
-use tower_http::services::ServeDir;
+use tower_http::services::{ServeDir, ServeFile};
 use tower_http::trace::TraceLayer;
 use tracing::{info, Level};
 use tracing_subscriber::FmtSubscriber;
 
 use auth::{generate_random_password, hash_password, AuthenticatedUser, JwtConfig, TokenBlacklist};
+
+/// Root of the static asset tree, relative to the server's working directory.
+/// Holds the agent `downloads/` tree AND the v2 SPA build under `app/`.
+const STATIC_DIR: &str = "static";
+
+/// Directory the React/Vite SPA is built into (`dashboard/` Vite `build.outDir`
+/// points here). The Axum `fallback_service` serves this tree at the server
+/// root, so `npm run build` lands the SPA exactly where it is served — no copy
+/// step. A dedicated subdir so the Vite build's `emptyOutDir` clears only the
+/// SPA, never the agent downloads tree in the static root.
+const SPA_DIR: &str = "static/app";
+
+/// The SPA entry document. Returned (with 200) for any unmatched, non-API,
+/// non-WS, non-asset GET so `BrowserRouter` deep links (`/machines`,
+/// `/sessions`, `/login`) survive a hard reload.
+const SPA_INDEX: &str = "static/app/index.html";
 use metrics::SharedMetrics;
 use prometheus_client::registry::Registry;
 use support_codes::{CodeValidation, CreateCodeRequest, SupportCode, SupportCodeManager};
@@ -413,15 +429,43 @@ async fn main() -> Result<()> {
             get(api::downloads::download_support),
         )
         .route("/api/download/agent", get(api::downloads::download_agent))
-        // HTML page routes (clean URLs)
-        .route("/login", get(serve_login))
-        .route("/dashboard", get(serve_dashboard))
-        .route("/users", get(serve_users))
+        // Namespace 404 guards. These wildcard routes catch any /api/* or /ws/*
+        // path that no explicit route above matched, returning a JSON 404 so the
+        // SPA fallback_service never answers an API/WS path with index.html. They
+        // are intentionally the LEAST specific routes in each namespace: matchit
+        // (axum 0.7) prefers a static segment over a `*` capture, so every real
+        // route above still wins. `any(...)` covers every method (a bad WS path
+        // is a GET, but POST/PUT/etc. to a dead /api/* path must 404 too, not 405).
+        .route("/api/*rest", any(api_not_found))
+        .route("/ws/*rest", any(api_not_found))
+        // Public agent download tree (e.g. /downloads/guruconnect.exe). Mounted
+        // explicitly so it keeps working after the v2 SPA takes over the root
+        // fallback below — CLAUDE.md documents this as the public download URL.
+        // `nest_service` is matched BEFORE `fallback_service`, so these binaries
+        // are served from disk and never fall through to the SPA index.html.
+        .nest_service("/downloads", ServeDir::new(format!("{STATIC_DIR}/downloads")))
+        // NOTE: there are intentionally no /login, /dashboard, /users routes.
+        // The v2 SPA (BrowserRouter) owns those paths and resolves them via the
+        // fallback_service below; registering server-side handlers for them would
+        // shadow the SPA on a hard reload.
         // State and middleware
         .with_state(state.clone())
         .layer(axum_middleware::from_fn_with_state(state, auth_layer))
-        // Serve static files for portal (fallback)
-        .fallback_service(ServeDir::new("static").append_index_html_on_directories(true))
+        // SPA fallback: serve the React/Vite build from SPA_DIR and, for any
+        // unmatched path, return the SPA index.html WITH 200 (via `.fallback`,
+        // not `.not_found_service` which would force a 404) so BrowserRouter
+        // deep links resolve. This is the Router's `fallback_service`, so it runs
+        // ONLY after every explicit /api/*, /ws/*, /health, /metrics route and
+        // the /downloads nest fail to match. An unknown /api/... path therefore
+        // never reaches here — it hits the per-router 404 and returns the normal
+        // (non-HTML) 404 the typed client expects. Real assets under /assets/*
+        // are served from disk by ServeDir with correct content-types; only
+        // genuinely missing files fall through to index.html.
+        .fallback_service(
+            ServeDir::new(SPA_DIR)
+                .append_index_html_on_directories(true)
+                .fallback(ServeFile::new(SPA_INDEX)),
+        )
         // Middleware
         .layer(axum_middleware::from_fn(middleware::add_security_headers)) // SEC-7 & SEC-12
         .layer(TraceLayer::new_for_http())
@@ -474,6 +518,23 @@ async fn health() -> &'static str {
     "OK"
 }
 
+/// Explicit 404 for unmatched paths under the `/api` and `/ws` namespaces.
+///
+/// CRITICAL: without these catch-all routes, an unknown `/api/...` or `/ws/...`
+/// path would fall through to the SPA `fallback_service` and be answered with
+/// `index.html` (HTTP 200, text/html). That would mask real 404s and break the
+/// dashboard's typed client, which parses a JSON error envelope from API 404s.
+/// These routes are LESS specific than every real `/api/...` / `/ws/...` route
+/// (matchit matches a static segment before a `*` capture), so they only catch
+/// genuinely-unrouted API/WS paths and return a proper JSON 404 — never HTML.
+async fn api_not_found() -> impl IntoResponse {
+    (
+        StatusCode::NOT_FOUND,
+        [(axum::http::header::CONTENT_TYPE, "application/json")],
+        r#"{"error":"Not Found","status_code":404}"#,
+    )
+}
+
 /// Prometheus metrics endpoint
 async fn prometheus_metrics(State(state): State<AppState>) -> String {
     use prometheus_client::encoding::text::encode;
@@ -849,24 +910,3 @@ async fn trigger_machine_update(
     }
 }
 
-// Static page handlers
-async fn serve_login() -> impl IntoResponse {
-    match tokio::fs::read_to_string("static/login.html").await {
-        Ok(content) => Html(content).into_response(),
-        Err(_) => (StatusCode::NOT_FOUND, "Page not found").into_response(),
-    }
-}
-
-async fn serve_dashboard() -> impl IntoResponse {
-    match tokio::fs::read_to_string("static/dashboard.html").await {
-        Ok(content) => Html(content).into_response(),
-        Err(_) => (StatusCode::NOT_FOUND, "Page not found").into_response(),
-    }
-}
-
-async fn serve_users() -> impl IntoResponse {
-    match tokio::fs::read_to_string("static/users.html").await {
-        Ok(content) => Html(content).into_response(),
-        Err(_) => (StatusCode::NOT_FOUND, "Page not found").into_response(),
-    }
-}
diff --git a/server/src/middleware/security_headers.rs b/server/src/middleware/security_headers.rs
index 13afbcd..58ec4b3 100644
--- a/server/src/middleware/security_headers.rs
+++ b/server/src/middleware/security_headers.rs
@@ -7,9 +7,33 @@ use axum::{extract::Request, middleware::Next, response::Response};
 
 /// Add security headers to all responses
 pub async fn add_security_headers(request: Request, next: Next) -> Response {
+    // Capture the path before the request is consumed downstream, so we can pick
+    // the right Cache-Control for the SPA: hashed assets are immutable and can be
+    // cached forever; everything else (index.html for `/`, deep links, and API
+    // JSON) must revalidate so a fresh deploy is picked up immediately.
+    let path = request.uri().path().to_owned();
+
     let mut response = next.run(request).await;
     let headers = response.headers_mut();
 
+    // Cache-Control. Vite emits content-hashed filenames under `/assets/`, so
+    // those are safe to cache aggressively (`immutable`); a new build changes the
+    // hash and therefore the URL. The SPA shell (index.html), served for `/` and
+    // every BrowserRouter deep link, must NOT be cached stale or clients would
+    // load an old shell pointing at assets that no longer exist after a deploy —
+    // hence `no-cache, must-revalidate`. Only set this when a downstream handler
+    // hasn't already chosen its own caching policy.
+    if !headers.contains_key(axum::http::header::CACHE_CONTROL) {
+        let cache_value = if path.starts_with("/assets/") {
+            "public, max-age=31536000, immutable"
+        } else {
+            "no-cache, must-revalidate"
+        };
+        if let Ok(v) = cache_value.parse() {
+            headers.insert(axum::http::header::CACHE_CONTROL, v);
+        }
+    }
+
     // SEC-7: Content Security Policy (XSS Prevention)
     // This CSP allows inline scripts/styles (needed for dashboard) but blocks external resources
     headers.insert(
diff --git a/server/static/dashboard.html b/server/static/dashboard.html
deleted file mode 100644
index 8942b30..0000000
--- a/server/static/dashboard.html
+++ /dev/null
@@ -1,1436 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GuruConnect - Dashboard</title>
-    <style>
-        :root {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --primary: 217.2 91.2% 59.8%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 224.3 76.3% 48%;
-            --accent: 217.2 32.6% 17.5%;
-            --destructive: 0 62.8% 30.6%;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-            min-height: 100vh;
-        }
-
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 24px;
-            border-bottom: 1px solid hsl(var(--border));
-            background: hsl(var(--card));
-        }
-
-        .header-left { display: flex; align-items: center; gap: 24px; }
-
-        .logo { font-size: 20px; font-weight: 700; color: hsl(var(--foreground)); }
-
-        .header-right { display: flex; align-items: center; gap: 16px; }
-
-        .user-info { font-size: 14px; color: hsl(var(--muted-foreground)); }
-
-        .logout-btn {
-            padding: 8px 16px;
-            font-size: 14px;
-            background: transparent;
-            color: hsl(var(--muted-foreground));
-            border: 1px solid hsl(var(--border));
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .logout-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
-
-        .tabs {
-            display: flex;
-            gap: 4px;
-            padding: 0 24px;
-            border-bottom: 1px solid hsl(var(--border));
-            background: hsl(var(--card));
-        }
-
-        .tab {
-            padding: 12px 20px;
-            font-size: 14px;
-            font-weight: 500;
-            color: hsl(var(--muted-foreground));
-            background: transparent;
-            border: none;
-            border-bottom: 2px solid transparent;
-            cursor: pointer;
-            transition: all 0.2s;
-            margin-bottom: -1px;
-        }
-
-        .tab:hover { color: hsl(var(--foreground)); }
-        .tab.active { color: hsl(var(--primary)); border-bottom-color: hsl(var(--primary)); }
-
-        .content { padding: 24px; max-width: 1400px; margin: 0 auto; }
-
-        .tab-panel { display: none; }
-        .tab-panel.active { display: block; }
-
-        .card {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 16px;
-        }
-
-        .card-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 16px;
-        }
-
-        .card-title { font-size: 18px; font-weight: 600; }
-        .card-description { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 4px; }
-
-        .btn {
-            padding: 10px 20px;
-            font-size: 14px;
-            font-weight: 500;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-            border: none;
-        }
-
-        .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
-        .btn-primary:hover { opacity: 0.9; }
-        .btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
-        .btn-outline:hover { background: hsl(var(--accent)); }
-
-        .table-container { overflow-x: auto; }
-
-        table { width: 100%; border-collapse: collapse; }
-
-        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
-
-        th { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
-        td { font-size: 14px; }
-        tr:hover { background: hsla(var(--muted), 0.3); }
-
-        .empty-state { text-align: center; padding: 48px 24px; color: hsl(var(--muted-foreground)); }
-        .empty-state h3 { font-size: 16px; margin-bottom: 8px; color: hsl(var(--foreground)); }
-
-        .badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 9999px; }
-        .badge-success { background: hsla(142, 76%, 36%, 0.2); color: hsl(142, 76%, 50%); }
-        .badge-warning { background: hsla(45, 93%, 47%, 0.2); color: hsl(45, 93%, 55%); }
-        .badge-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
-
-        .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
-
-        .form-group { display: flex; flex-direction: column; gap: 8px; }
-        .form-group label { font-size: 14px; font-weight: 500; }
-
-        .form-group input, .form-group select {
-            padding: 10px 14px;
-            font-size: 14px;
-            background: hsl(var(--input));
-            border: 1px solid hsl(var(--border));
-            border-radius: 6px;
-            color: hsl(var(--foreground));
-            outline: none;
-        }
-
-        .form-group input:focus, .form-group select:focus {
-            border-color: hsl(var(--ring));
-            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
-        }
-
-        .access-layout {
-            display: grid;
-            grid-template-columns: 250px 1fr 350px;
-            gap: 16px;
-            height: calc(100vh - 180px);
-        }
-
-        .sidebar-panel {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            overflow-y: auto;
-        }
-
-        .sidebar-section { padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); }
-        .sidebar-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 8px; }
-
-        .sidebar-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 8px 12px;
-            font-size: 14px;
-            color: hsl(var(--foreground));
-            border-radius: 6px;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-
-        .sidebar-item:hover { background: hsl(var(--accent)); }
-        .sidebar-item.active { background: hsl(var(--accent)); color: hsl(var(--primary)); }
-        .sidebar-count { font-size: 12px; color: hsl(var(--muted-foreground)); }
-
-        .main-panel, .detail-panel {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            overflow-y: auto;
-        }
-
-        .detail-panel { padding: 20px; }
-        .detail-section { margin-bottom: 20px; }
-        .detail-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 12px; }
-        .detail-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid hsl(var(--border)); }
-        .detail-label { color: hsl(var(--muted-foreground)); }
-        .detail-value { color: hsl(var(--foreground)); text-align: right; }
-
-        /* Chat Modal */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.7);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-overlay.active { display: flex; }
-
-        .modal {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 12px;
-            width: 90%;
-            max-width: 500px;
-            max-height: 80vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px 20px;
-            border-bottom: 1px solid hsl(var(--border));
-        }
-
-        .modal-title { font-size: 18px; font-weight: 600; }
-
-        .modal-close {
-            background: transparent;
-            border: none;
-            color: hsl(var(--muted-foreground));
-            font-size: 24px;
-            cursor: pointer;
-            padding: 4px;
-        }
-        .modal-close:hover { color: hsl(var(--foreground)); }
-
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 16px 20px;
-            min-height: 300px;
-            max-height: 400px;
-        }
-
-        .chat-message {
-            margin-bottom: 12px;
-            padding: 10px 14px;
-            border-radius: 8px;
-            max-width: 80%;
-        }
-
-        .chat-message.technician {
-            background: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-            margin-left: auto;
-        }
-
-        .chat-message.client {
-            background: hsl(var(--muted));
-            color: hsl(var(--foreground));
-        }
-
-        .chat-message-sender {
-            font-size: 11px;
-            font-weight: 600;
-            text-transform: uppercase;
-            opacity: 0.8;
-            margin-bottom: 4px;
-        }
-
-        .chat-message-content { font-size: 14px; line-height: 1.4; }
-
-        .chat-empty {
-            text-align: center;
-            color: hsl(var(--muted-foreground));
-            padding: 40px 20px;
-        }
-
-        .chat-input-container {
-            display: flex;
-            gap: 8px;
-            padding: 16px 20px;
-            border-top: 1px solid hsl(var(--border));
-        }
-
-        .chat-input {
-            flex: 1;
-            padding: 10px 14px;
-            font-size: 14px;
-            background: hsl(var(--input));
-            border: 1px solid hsl(var(--border));
-            border-radius: 6px;
-            color: hsl(var(--foreground));
-            outline: none;
-        }
-
-        .chat-input:focus {
-            border-color: hsl(var(--ring));
-            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
-        }
-
-        .chat-send {
-            padding: 10px 20px;
-            font-size: 14px;
-            font-weight: 500;
-            background: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-        .chat-send:hover { opacity: 0.9; }
-        .chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
-
-        /* Connect Options Modal */
-        .connect-options { padding: 20px; }
-        .connect-option {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            padding: 16px;
-            margin-bottom: 12px;
-            background: hsl(var(--muted));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .connect-option:hover { border-color: hsl(var(--primary)); background: hsla(var(--primary), 0.1); }
-        .connect-option-icon { font-size: 24px; width: 40px; text-align: center; }
-        .connect-option-info { flex: 1; }
-        .connect-option-title { font-weight: 600; margin-bottom: 4px; }
-        .connect-option-desc { font-size: 12px; color: hsl(var(--muted-foreground)); }
-
-        .native-command {
-            margin-top: 16px;
-            padding: 12px;
-            background: hsl(222.2 84% 2%);
-            border: 1px solid hsl(var(--border));
-            border-radius: 6px;
-            font-family: monospace;
-            font-size: 12px;
-            word-break: break-all;
-            position: relative;
-        }
-        .native-command code { color: hsl(142, 76%, 50%); }
-        .copy-btn {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            padding: 4px 8px;
-            font-size: 11px;
-            background: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        .copy-btn:hover { opacity: 0.9; }
-    </style>
-</head>
-<body>
-    <header class="header">
-        <div class="header-left">
-            <div class="logo">GuruConnect</div>
-        </div>
-        <div class="header-right">
-            <span class="user-info" id="userInfo">Loading...</span>
-            <button class="logout-btn" id="logoutBtn">Sign Out</button>
-        </div>
-    </header>
-
-    <nav class="tabs">
-        <button class="tab active" data-tab="support">Support</button>
-        <button class="tab" data-tab="access">Access</button>
-        <button class="tab" data-tab="build">Build</button>
-        <button class="tab" data-tab="settings">Settings</button>
-        <button class="tab admin-only" data-tab="users" style="display: none;">Users</button>
-    </nav>
-
-    <main class="content">
-        <!-- Support Tab -->
-        <div class="tab-panel active" id="support-panel">
-            <div class="card">
-                <div class="card-header">
-                    <div>
-                        <h2 class="card-title">Active Support Sessions</h2>
-                        <p class="card-description">Temporary sessions initiated by support codes</p>
-                    </div>
-                    <button class="btn btn-primary" id="generateCodeBtn">Generate Code</button>
-                </div>
-                <div class="table-container">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Code</th>
-                                <th>Status</th>
-                                <th>Created</th>
-                                <th>Technician</th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody id="sessionsTable">
-                            <tr>
-                                <td colspan="5">
-                                    <div class="empty-state">
-                                        <h3>No active sessions</h3>
-                                        <p>Generate a code to start a support session</p>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-        <!-- Access Tab -->
-        <div class="tab-panel" id="access-panel">
-            <div class="access-layout">
-                <div class="sidebar-panel">
-                    <div class="sidebar-section">
-                        <div class="sidebar-section-title">Status</div>
-                        <div class="sidebar-item active" data-filter="all">
-                            <span>All Machines</span>
-                            <span class="sidebar-count" id="countAll">0</span>
-                        </div>
-                        <div class="sidebar-item" data-filter="online">
-                            <span>Online</span>
-                            <span class="sidebar-count" id="countOnline">0</span>
-                        </div>
-                        <div class="sidebar-item" data-filter="offline">
-                            <span>Offline</span>
-                            <span class="sidebar-count" id="countOffline">0</span>
-                        </div>
-                    </div>
-                    <div class="sidebar-section">
-                        <div class="sidebar-section-title">By Company</div>
-                        <div class="empty-state" style="padding: 16px;">
-                            <p style="font-size: 12px;">No machines installed</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="main-panel" id="machinesList">
-                    <div class="empty-state">
-                        <h3>No machines</h3>
-                        <p>Install the agent on a machine to see it here</p>
-                    </div>
-                </div>
-                <div class="detail-panel" id="machineDetail">
-                    <div class="empty-state">
-                        <h3>Select a machine</h3>
-                        <p>Click a machine to view details</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Build Tab -->
-        <div class="tab-panel" id="build-panel">
-            <!-- Quick Downloads -->
-            <div class="card">
-                <div class="card-header">
-                    <div>
-                        <h2 class="card-title">Quick Downloads</h2>
-                        <p class="card-description">Download viewer or create temp support sessions</p>
-                    </div>
-                </div>
-                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
-                    <div style="padding: 20px; background: hsl(var(--muted)); border-radius: 8px;">
-                        <h3 style="font-size: 16px; margin-bottom: 8px;">Viewer Only</h3>
-                        <p style="font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 16px;">
-                            Installs the protocol handler for connecting to remote sessions. No agent functionality.
-                        </p>
-                        <a href="/api/download/viewer" class="btn btn-primary" style="text-decoration: none;">Download Viewer</a>
-                    </div>
-                    <div style="padding: 20px; background: hsl(var(--muted)); border-radius: 8px;">
-                        <h3 style="font-size: 16px; margin-bottom: 8px;">Temp Support Session</h3>
-                        <p style="font-size: 13px; color: hsl(var(--muted-foreground)); margin-bottom: 12px;">
-                            Generate a support code first, then create a download link with that code embedded.
-                        </p>
-                        <div style="display: flex; gap: 8px; align-items: center;">
-                            <input type="text" id="supportCodeInput" placeholder="6-digit code" maxlength="6"
-                                   style="width: 120px; padding: 8px 12px; font-size: 14px; background: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: 6px; color: hsl(var(--foreground));">
-                            <button class="btn btn-outline" onclick="downloadSupportAgent()">Generate Link</button>
-                        </div>
-                        <div id="supportDownloadLink" style="margin-top: 12px; display: none;">
-                            <a href="#" id="supportDownloadAnchor" class="btn btn-primary" style="text-decoration: none;">Download Support Agent</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Permanent Agent Builder -->
-            <div class="card">
-                <div class="card-header">
-                    <div>
-                        <h2 class="card-title">Permanent Agent Builder</h2>
-                        <p class="card-description">Create customized agent installers for unattended access</p>
-                    </div>
-                </div>
-                <div class="form-grid">
-                    <div class="form-group">
-                        <label for="buildCompany">Company *</label>
-                        <input type="text" id="buildCompany" placeholder="Client organization">
-                    </div>
-                    <div class="form-group">
-                        <label for="buildSite">Site</label>
-                        <input type="text" id="buildSite" placeholder="Physical location">
-                    </div>
-                    <div class="form-group">
-                        <label for="buildTags">Tags</label>
-                        <input type="text" id="buildTags" placeholder="Comma-separated (e.g., workstation, finance)">
-                    </div>
-                    <div class="form-group">
-                        <label for="buildApiKey">API Key</label>
-                        <input type="text" id="buildApiKey" placeholder="Optional (uses default if blank)">
-                    </div>
-                </div>
-                <div style="margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
-                    <button class="btn btn-primary" onclick="buildPermanentAgent()">Download Configured Agent</button>
-                </div>
-                <p style="margin-top: 16px; font-size: 13px; color: hsl(var(--muted-foreground));">
-                    The downloaded agent will have company/site/tags embedded. It will auto-register when run.
-                </p>
-            </div>
-        </div>
-
-        <!-- Settings Tab -->
-        <div class="tab-panel" id="settings-panel">
-            <div class="card">
-                <div class="card-header">
-                    <div>
-                        <h2 class="card-title">Settings</h2>
-                        <p class="card-description">Configure your GuruConnect preferences</p>
-                    </div>
-                </div>
-                <div class="form-grid">
-                    <div class="form-group">
-                        <label>Theme</label>
-                        <select disabled>
-                            <option>Dark (Default)</option>
-                            <option>Light</option>
-                            <option>System</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>Notifications</label>
-                        <select disabled>
-                            <option>All notifications</option>
-                            <option>Important only</option>
-                            <option>None</option>
-                        </select>
-                    </div>
-                </div>
-                <p style="margin-top: 24px; font-size: 13px; color: hsl(var(--muted-foreground));">
-                    Additional settings coming soon.
-                </p>
-            </div>
-        </div>
-
-        <!-- Users Tab (Admin Only) -->
-        <div class="tab-panel" id="users-panel">
-            <div class="card">
-                <div class="card-header">
-                    <div>
-                        <h2 class="card-title">User Management</h2>
-                        <p class="card-description">Manage user accounts and permissions</p>
-                    </div>
-                </div>
-                <p style="color: hsl(var(--muted-foreground));">
-                    <a href="/users" style="color: hsl(var(--primary));">Open User Management</a>
-                </p>
-            </div>
-        </div>
-    </main>
-
-    <!-- Connect Options Modal -->
-    <div class="modal-overlay" id="connectModal">
-        <div class="modal" style="max-width: 450px;">
-            <div class="modal-header">
-                <div class="modal-title">Connect to <span id="connectMachineName">Machine</span></div>
-                <button class="modal-close" id="connectClose">&times;</button>
-            </div>
-            <div class="connect-options">
-                <div class="connect-option" id="connectWeb">
-                    <div class="connect-option-icon">🌐</div>
-                    <div class="connect-option-info">
-                        <div class="connect-option-title">Web Viewer</div>
-                        <div class="connect-option-desc">Opens in browser. Most keys work, but Win key and Alt+Tab are captured by your OS.</div>
-                    </div>
-                </div>
-                <div class="connect-option" id="connectNative">
-                    <div class="connect-option-icon">🖥️</div>
-                    <div class="connect-option-info">
-                        <div class="connect-option-title">Native Viewer</div>
-                        <div class="connect-option-desc">Full keyboard capture including Win key, Alt+Tab, and Ctrl+Alt+Del.</div>
-                    </div>
-                </div>
-                <div id="nativeNotInstalled" style="display: none; margin-top: 16px; padding: 16px; background: hsla(45, 93%, 47%, 0.1); border: 1px solid hsla(45, 93%, 47%, 0.3); border-radius: 8px;">
-                    <p style="margin-bottom: 12px; color: hsl(45, 93%, 55%);">
-                        <strong>Native viewer not installed</strong>
-                    </p>
-                    <p style="font-size: 13px; margin-bottom: 12px; color: hsl(var(--muted-foreground));">
-                        Download and run GuruConnect to register the protocol handler, then click "Try Again".
-                    </p>
-                    <div style="display: flex; gap: 8px;">
-                        <a href="/downloads/guruconnect.exe" class="btn btn-primary" style="text-decoration: none;">Download GuruConnect</a>
-                        <button class="btn btn-outline" onclick="retryNativeViewer()">Try Again</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Chat Modal -->
-    <div class="modal-overlay" id="chatModal">
-        <div class="modal">
-            <div class="modal-header">
-                <div class="modal-title">Chat with <span id="chatClientName">Client</span></div>
-                <button class="modal-close" id="chatClose">&times;</button>
-            </div>
-            <div class="chat-messages" id="chatMessages">
-                <div class="chat-empty">No messages yet. Start the conversation!</div>
-            </div>
-            <div class="chat-input-container">
-                <input type="text" class="chat-input" id="chatInput" placeholder="Type a message..." />
-                <button class="chat-send" id="chatSend">Send</button>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // Chat state
-        let chatSocket = null;
-        let chatSessionId = null;
-        let chatMessages = [];
-
-        // Tab switching
-        document.querySelectorAll(".tab").forEach(tab => {
-            tab.addEventListener("click", () => {
-                document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
-                document.querySelectorAll(".tab-panel").forEach(p => p.classList.remove("active"));
-                tab.classList.add("active");
-                document.getElementById(tab.dataset.tab + "-panel").classList.add("active");
-            });
-        });
-
-        // Check auth
-        const token = localStorage.getItem("guruconnect_token");
-        const user = JSON.parse(localStorage.getItem("guruconnect_user") || "null");
-
-        // Verify authentication
-        async function checkAuth() {
-            if (!token) {
-                window.location.href = "/login";
-                return;
-            }
-
-            try {
-                const response = await fetch("/api/auth/me", {
-                    headers: { "Authorization": `Bearer ${token}` }
-                });
-
-                if (!response.ok) {
-                    localStorage.removeItem("guruconnect_token");
-                    localStorage.removeItem("guruconnect_user");
-                    window.location.href = "/login";
-                    return;
-                }
-
-                const userData = await response.json();
-
-                // Update user display
-                document.getElementById("userInfo").textContent = userData.username + " (" + userData.role + ")";
-
-                // Show admin-only elements
-                if (userData.role === "admin") {
-                    document.querySelectorAll(".admin-only").forEach(el => {
-                        el.style.display = "";
-                    });
-                }
-            } catch (err) {
-                console.error("Auth check failed:", err);
-                // Don't redirect on network error, just show what we have
-                if (user) {
-                    document.getElementById("userInfo").textContent = user.username || "User";
-                    if (user.role === "admin") {
-                        document.querySelectorAll(".admin-only").forEach(el => {
-                            el.style.display = "";
-                        });
-                    }
-                }
-            }
-        }
-
-        checkAuth();
-
-        // Logout
-        document.getElementById("logoutBtn").addEventListener("click", () => {
-            localStorage.removeItem("guruconnect_token");
-            localStorage.removeItem("guruconnect_user");
-            window.location.href = "/login";
-        });
-
-        // Generate code
-        document.getElementById("generateCodeBtn").addEventListener("click", async () => {
-            try {
-                const response = await fetch("/api/codes", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ technician_name: user?.name || "Technician" })
-                });
-                const data = await response.json();
-                if (response.ok) {
-                    alert("Support Code Generated: " + data.code + "\n\nShare this with the customer.");
-                    loadSessions();
-                } else {
-                    alert("Error: " + (data.error || "Failed to generate code"));
-                }
-            } catch (err) {
-                alert("Connection error");
-            }
-        });
-
-        // Load sessions
-        async function loadSessions() {
-            try {
-                const response = await fetch("/api/codes");
-                const codes = await response.json();
-                const tbody = document.getElementById("sessionsTable");
-
-                if (codes.length === 0) {
-                    tbody.innerHTML = '<tr><td colspan="5"><div class="empty-state"><h3>No active sessions</h3><p>Generate a code to start a support session</p></div></td></tr>';
-                    return;
-                }
-
-                tbody.innerHTML = codes.map(code => {
-                    const created = new Date(code.created_at).toLocaleString();
-                    const statusClass = code.status === "pending" ? "badge-warning" :
-                                       code.status === "connected" ? "badge-success" : "badge-muted";
-                    const clientInfo = code.status === "connected" && code.client_name
-                        ? '<div style="font-size: 12px; color: hsl(var(--muted-foreground));">' + code.client_name + '</div>'
-                        : '';
-                    const actionBtn = code.status === "connected"
-                        ? '<button class="btn btn-primary" onclick="joinSession(\'' + code.session_id + '\')">Join</button>' +
-                          '<button class="btn btn-outline" style="margin-left: 8px;" onclick="openChat(\'' + code.session_id + '\', \'' + (code.client_name || 'Client').replace(/'/g, "\\'") + '\')">Chat</button>' +
-                          '<button class="btn btn-outline" style="margin-left: 8px;" onclick="cancelCode(\'' + code.code + '\')">End</button>'
-                        : '<button class="btn btn-outline" onclick="cancelCode(\'' + code.code + '\')">Cancel</button>';
-                    return '<tr>' +
-                        '<td><strong>' + code.code + '</strong>' + clientInfo + '</td>' +
-                        '<td><span class="badge ' + statusClass + '">' + code.status + '</span></td>' +
-                        '<td>' + created + '</td>' +
-                        '<td>' + (code.created_by || "Unknown") + '</td>' +
-                        '<td>' + actionBtn + '</td>' +
-                    '</tr>';
-                }).join("");
-            } catch (err) {
-                console.error("Failed to load sessions:", err);
-            }
-        }
-
-        async function cancelCode(code) {
-            if (!confirm("Cancel code " + code + "?")) return;
-            try {
-                await fetch("/api/codes/" + code + "/cancel", { method: "POST" });
-                loadSessions();
-            } catch (err) {
-                alert("Error cancelling code");
-            }
-        }
-
-        function joinSession(sessionId) {
-            // Open viewer in new window
-            const viewerUrl = "/viewer.html?session_id=" + sessionId;
-            window.open(viewerUrl, "viewer_" + sessionId, "width=1280,height=800,menubar=no,toolbar=no,location=no,status=no");
-        }
-
-        // Initial load and auto-refresh every 3 seconds
-        loadSessions();
-        setInterval(loadSessions, 3000);
-
-        // Load connected machines (Access tab)
-        let machines = [];
-        let selectedMachine = null;
-        let currentFilter = 'all'; // 'all', 'online', 'offline'
-
-        // Setup filter click handlers
-        document.querySelectorAll('.sidebar-item[data-filter]').forEach(item => {
-            item.addEventListener('click', () => {
-                currentFilter = item.dataset.filter;
-                // Update active state
-                document.querySelectorAll('.sidebar-item[data-filter]').forEach(i => i.classList.remove('active'));
-                item.classList.add('active');
-                renderMachinesList();
-            });
-        });
-
-        async function loadMachines() {
-            try {
-                const response = await fetch("/api/sessions");
-                machines = await response.json();
-
-                // Update counts based on is_online status
-                const onlineCount = machines.filter(m => m.is_online).length;
-                const offlineCount = machines.filter(m => !m.is_online).length;
-                document.getElementById("countAll").textContent = machines.length;
-                document.getElementById("countOnline").textContent = onlineCount;
-                document.getElementById("countOffline").textContent = offlineCount;
-
-                renderMachinesList();
-            } catch (err) {
-                console.error("Failed to load machines:", err);
-            }
-        }
-
-        // Format duration since connection
-        function formatDuration(connectedAt) {
-            const now = new Date();
-            const connected = new Date(connectedAt);
-            const diffMs = now - connected;
-            const diffMins = Math.floor(diffMs / 60000);
-            const diffHours = Math.floor(diffMins / 60);
-
-            if (diffMins < 1) return 'just now';
-            if (diffMins < 60) return diffMins + ' min';
-            if (diffHours < 24) return diffHours + ' hr';
-            return Math.floor(diffHours / 24) + ' day';
-        }
-
-        // Format connected technicians display
-        function formatViewers(viewers) {
-            if (!viewers || viewers.length === 0) return '';
-
-            // Get names (filter out default "Technician" if there's a real name)
-            const names = viewers.map(v => v.name || 'Technician');
-
-            // Find earliest connection for duration
-            const earliest = viewers.reduce((min, v) => {
-                const t = new Date(v.connected_at);
-                return t < min ? t : min;
-            }, new Date(viewers[0].connected_at));
-
-            const duration = formatDuration(earliest);
-            const nameList = names.join(', ');
-
-            return nameList + ' Connected (' + duration + ')';
-        }
-
-        function renderMachinesList() {
-            const container = document.getElementById("machinesList");
-
-            // Filter machines based on current filter
-            let filteredMachines = machines;
-            if (currentFilter === 'online') {
-                filteredMachines = machines.filter(m => m.is_online);
-            } else if (currentFilter === 'offline') {
-                filteredMachines = machines.filter(m => !m.is_online);
-            }
-
-            if (filteredMachines.length === 0) {
-                const msg = currentFilter === 'all' ? 'Install the agent on a machine to see it here' :
-                           currentFilter === 'online' ? 'No machines are currently online' :
-                           'No machines are currently offline';
-                container.innerHTML = '<div class="empty-state"><h3>No machines</h3><p>' + msg + '</p></div>';
-                return;
-            }
-
-            container.innerHTML = '<div style="padding: 12px;">' + filteredMachines.map(m => {
-                const started = new Date(m.started_at).toLocaleString();
-                const isSelected = selectedMachine?.id === m.id;
-                const statusColor = m.is_online ? 'hsl(142, 76%, 50%)' : 'hsl(0, 0%, 50%)';
-                const statusText = m.is_online ? 'Online' : 'Offline';
-                const viewersText = formatViewers(m.viewers);
-                const viewersHtml = viewersText
-                    ? '<div style="font-size: 11px; color: hsl(142, 76%, 50%); margin-left: auto; white-space: nowrap;">' + escapeHtml(viewersText) + '</div>'
-                    : '';
-
-                return '<div class="sidebar-item' + (isSelected ? ' active' : '') + '" onclick="selectMachine(\'' + m.id + '\')" style="margin-bottom: 8px; padding: 12px;">' +
-                    '<div style="display: flex; align-items: center; gap: 12px; width: 100%;">' +
-                        '<div style="width: 10px; height: 10px; border-radius: 50%; background: ' + statusColor + '; flex-shrink: 0;"></div>' +
-                        '<div style="flex: 1; min-width: 0;">' +
-                            '<div style="font-weight: 500;">' + (m.agent_name || m.agent_id.slice(0,8)) + '</div>' +
-                            '<div style="font-size: 12px; color: hsl(var(--muted-foreground));">' + statusText + ' • ' + started + '</div>' +
-                        '</div>' +
-                        viewersHtml +
-                    '</div>' +
-                '</div>';
-            }).join("") + '</div>';
-        }
-
-        function selectMachine(id) {
-            selectedMachine = machines.find(m => m.id === id);
-            renderMachinesList();
-            renderMachineDetail();
-        }
-
-        function renderMachineDetail() {
-            const container = document.getElementById("machineDetail");
-
-            if (!selectedMachine) {
-                container.innerHTML = '<div class="empty-state"><h3>Select a machine</h3><p>Click a machine to view details</p></div>';
-                return;
-            }
-
-            const m = selectedMachine;
-            const started = new Date(m.started_at).toLocaleString();
-            const statusColor = m.is_online ? 'hsl(142, 76%, 50%)' : 'hsl(0, 0%, 50%)';
-            const statusText = m.is_online ? 'Online' : 'Offline';
-            const connectDisabled = m.is_online ? '' : 'disabled';
-            const connectTitle = m.is_online ? '' : 'title="Agent is offline"';
-            const versionText = m.agent_version || 'Unknown';
-
-            container.innerHTML =
-                '<div class="detail-section">' +
-                    '<div class="detail-section-title">Machine Info</div>' +
-                    '<div class="detail-row"><span class="detail-label">Status</span><span class="detail-value" style="color: ' + statusColor + ';">' + statusText + '</span></div>' +
-                    '<div class="detail-row"><span class="detail-label">Agent ID</span><span class="detail-value">' + m.agent_id.slice(0,8) + '...</span></div>' +
-                    '<div class="detail-row"><span class="detail-label">Session ID</span><span class="detail-value">' + m.id.slice(0,8) + '...</span></div>' +
-                    '<div class="detail-row"><span class="detail-label">Version</span><span class="detail-value">' + escapeHtml(versionText) + '</span></div>' +
-                    '<div class="detail-row"><span class="detail-label">Connected</span><span class="detail-value">' + started + '</span></div>' +
-                    '<div class="detail-row"><span class="detail-label">Viewers</span><span class="detail-value">' + m.viewer_count + '</span></div>' +
-                '</div>' +
-                '<div class="detail-section">' +
-                    '<div class="detail-section-title">Actions</div>' +
-                    '<button class="btn btn-primary" style="width: 100%; margin-bottom: 8px;" onclick="connectToMachine(\'' + m.id + '\')" ' + connectDisabled + ' ' + connectTitle + '>Connect</button>' +
-                    '<button class="btn btn-outline" style="width: 100%; margin-bottom: 8px;" onclick="openChat(\'' + m.id + '\', \'' + (m.agent_name || 'Client').replace(/'/g, "\\'") + '\')" ' + connectDisabled + '>Chat</button>' +
-                    '<button class="btn btn-outline" style="width: 100%; margin-bottom: 8px;" disabled>Transfer Files</button>' +
-                    '<button class="btn btn-outline" style="width: 100%; margin-bottom: 8px;" onclick="triggerUpdate(\'' + m.agent_id + '\', \'' + (m.agent_name || m.agent_id).replace(/'/g, "\\'") + '\')" ' + connectDisabled + '>Update Agent</button>' +
-                    '<button class="btn btn-outline" style="width: 100%; color: hsl(0, 62.8%, 50%);" onclick="disconnectMachine(\'' + m.id + '\', \'' + (m.agent_name || m.agent_id).replace(/'/g, "\\'") + '\')">Disconnect</button>' +
-                '</div>';
-        }
-
-        // Connect modal state
-        let connectSessionId = null;
-        let connectMachineName = null;
-        let protocolCheckTimeout = null;
-
-        const connectModal = document.getElementById("connectModal");
-        const connectClose = document.getElementById("connectClose");
-        const connectWeb = document.getElementById("connectWeb");
-        const connectNative = document.getElementById("connectNative");
-        const nativeNotInstalled = document.getElementById("nativeNotInstalled");
-        const connectMachineNameEl = document.getElementById("connectMachineName");
-
-        connectClose.addEventListener("click", () => {
-            connectModal.classList.remove("active");
-            nativeNotInstalled.style.display = "none";
-            if (protocolCheckTimeout) clearTimeout(protocolCheckTimeout);
-        });
-
-        connectModal.addEventListener("click", (e) => {
-            if (e.target === connectModal) {
-                connectModal.classList.remove("active");
-                nativeNotInstalled.style.display = "none";
-                if (protocolCheckTimeout) clearTimeout(protocolCheckTimeout);
-            }
-        });
-
-        connectWeb.addEventListener("click", () => {
-            if (connectSessionId) {
-                const viewerUrl = "/viewer.html?session_id=" + connectSessionId;
-                window.open(viewerUrl, "viewer_" + connectSessionId, "width=1280,height=800,menubar=no,toolbar=no,location=no,status=no");
-                connectModal.classList.remove("active");
-                nativeNotInstalled.style.display = "none";
-            }
-        });
-
-        connectNative.addEventListener("click", () => {
-            launchNativeViewer();
-        });
-
-        function launchNativeViewer() {
-            if (!connectSessionId) return;
-
-            const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-            const serverUrl = encodeURIComponent(protocol + "//" + window.location.host + "/ws/viewer");
-            const token = localStorage.getItem("authToken");
-            const protocolUrl = `guruconnect://view/${connectSessionId}?server=${serverUrl}&token=${encodeURIComponent(token)}`;
-
-            // Try to launch the protocol handler
-            // We use a hidden iframe to avoid navigation issues
-            const iframe = document.createElement("iframe");
-            iframe.style.display = "none";
-            document.body.appendChild(iframe);
-
-            // Set up timeout to detect if protocol handler didn't work
-            let launched = false;
-            const startTime = Date.now();
-
-            // If window loses focus quickly, protocol likely worked
-            const blurHandler = () => {
-                if (Date.now() - startTime < 2000) {
-                    launched = true;
-                    connectModal.classList.remove("active");
-                    nativeNotInstalled.style.display = "none";
-                }
-            };
-            window.addEventListener("blur", blurHandler, { once: true });
-
-            // Try to launch
-            try {
-                iframe.contentWindow.location.href = protocolUrl;
-            } catch (e) {
-                // Some browsers throw on custom protocols
-            }
-
-            // Fallback: also try window.location for browsers that block iframe protocols
-            protocolCheckTimeout = setTimeout(() => {
-                window.removeEventListener("blur", blurHandler);
-                document.body.removeChild(iframe);
-
-                if (!launched) {
-                    // Protocol handler probably not installed, show download option
-                    nativeNotInstalled.style.display = "block";
-                }
-            }, 1500);
-        }
-
-        function retryNativeViewer() {
-            nativeNotInstalled.style.display = "none";
-            launchNativeViewer();
-        }
-
-        function connectToMachine(sessionId) {
-            const machine = machines.find(m => m.id === sessionId);
-            connectSessionId = sessionId;
-            connectMachineName = machine?.agent_name || sessionId.slice(0, 8);
-            connectMachineNameEl.textContent = connectMachineName;
-            nativeNotInstalled.style.display = "none";
-            connectModal.classList.add("active");
-        }
-
-        async function disconnectMachine(sessionId, machineName) {
-            if (!confirm("Disconnect " + machineName + "?\n\nThis will end the remote session.")) return;
-            try {
-                const response = await fetch("/api/sessions/" + sessionId, { method: "DELETE" });
-                if (response.ok) {
-                    selectedMachine = null;
-                    renderMachineDetail();
-                    loadMachines();
-                } else {
-                    alert("Failed to disconnect: " + await response.text());
-                }
-            } catch (err) {
-                alert("Error disconnecting machine");
-            }
-        }
-
-        async function triggerUpdate(agentId, machineName) {
-            if (!confirm("Send update command to " + machineName + "?\n\nThe agent will download and install the latest version, then restart.")) return;
-            try {
-                const response = await fetch("/api/machines/" + agentId + "/update", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" }
-                });
-                if (response.ok) {
-                    const result = await response.json();
-                    alert("Update command sent to " + machineName + ".\n\n" + (result.message || "Agent will update shortly."));
-                } else {
-                    const errorText = await response.text();
-                    alert("Failed to trigger update: " + errorText);
-                }
-            } catch (err) {
-                alert("Error triggering update: " + err.message);
-            }
-        }
-
-        // Refresh machines every 5 seconds
-        loadMachines();
-        setInterval(loadMachines, 5000);
-
-        // ========== Chat Functions ==========
-
-        // Chat modal elements
-        const chatModal = document.getElementById("chatModal");
-        const chatMessagesEl = document.getElementById("chatMessages");
-        const chatInput = document.getElementById("chatInput");
-        const chatSend = document.getElementById("chatSend");
-        const chatClose = document.getElementById("chatClose");
-        const chatClientName = document.getElementById("chatClientName");
-
-        // Close chat modal
-        chatClose.addEventListener("click", () => {
-            closeChat();
-        });
-
-        // Click outside to close
-        chatModal.addEventListener("click", (e) => {
-            if (e.target === chatModal) {
-                closeChat();
-            }
-        });
-
-        // Send message on button click
-        chatSend.addEventListener("click", () => {
-            sendChatMessage();
-        });
-
-        // Send message on Enter key
-        chatInput.addEventListener("keypress", (e) => {
-            if (e.key === "Enter") {
-                sendChatMessage();
-            }
-        });
-
-        function openChat(sessionId, clientName) {
-            chatSessionId = sessionId;
-            chatMessages = [];
-            chatClientName.textContent = clientName || "Client";
-            renderChatMessages();
-            chatModal.classList.add("active");
-            chatInput.focus();
-
-            // Connect to viewer WebSocket
-            connectChatSocket(sessionId);
-        }
-
-        function closeChat() {
-            chatModal.classList.remove("active");
-            chatSessionId = null;
-
-            if (chatSocket) {
-                chatSocket.close();
-                chatSocket = null;
-            }
-        }
-
-        function connectChatSocket(sessionId) {
-            if (chatSocket) {
-                chatSocket.close();
-            }
-
-            const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-            const viewerName = user?.name || user?.email || "Technician";
-            const token = localStorage.getItem("authToken");
-            const wsUrl = `${protocol}//${window.location.host}/ws/viewer?session_id=${sessionId}&viewer_name=${encodeURIComponent(viewerName)}&token=${encodeURIComponent(token)}`;
-
-            console.log("Connecting chat to:", wsUrl);
-            chatSocket = new WebSocket(wsUrl);
-
-            chatSocket.onopen = () => {
-                console.log("Chat WebSocket connected");
-                addSystemMessage("Connected to session");
-            };
-
-            chatSocket.onclose = () => {
-                console.log("Chat WebSocket closed");
-                addSystemMessage("Disconnected from session");
-            };
-
-            chatSocket.onerror = (err) => {
-                console.error("Chat WebSocket error:", err);
-                addSystemMessage("Connection error");
-            };
-
-            chatSocket.onmessage = async (event) => {
-                try {
-                    // Messages are binary protobuf
-                    const data = await event.data.arrayBuffer();
-                    handleChatMessage(new Uint8Array(data));
-                } catch (err) {
-                    console.error("Failed to process message:", err);
-                }
-            };
-        }
-
-        function handleChatMessage(data) {
-            // Simple protobuf parsing for ChatMessage
-            // The Message wrapper has payload oneof, ChatMessage is field 60
-            // For now, we'll try to extract chat content from the binary data
-            // This is a simplified approach - full protobuf.js would be better
-
-            // Look for string content in the message
-            // ChatMessage structure: id(1), sender(2), content(3), timestamp(4)
-            try {
-                // Try to decode as text to find message content
-                const text = new TextDecoder().decode(data);
-
-                // Check if this contains chat data (look for "client" or "technician" sender)
-                if (text.includes("client") || text.includes("technician")) {
-                    // Parse protobuf manually (simplified)
-                    const parsed = parseSimpleProtobuf(data);
-                    if (parsed && parsed.content) {
-                        addReceivedMessage(parsed.sender || "Client", parsed.content);
-                    }
-                }
-                // Other message types (video frames, etc.) are ignored for chat
-            } catch (err) {
-                // Not a chat message, ignore
-            }
-        }
-
-        // Simplified protobuf parser for ChatMessage
-        function parseSimpleProtobuf(data) {
-            // This is a very basic parser - just extracts string fields
-            // For production, use protobuf.js library
-            let result = {};
-            let i = 0;
-
-            while (i < data.length) {
-                const tag = data[i];
-                const fieldNum = tag >> 3;
-                const wireType = tag & 0x07;
-
-                i++;
-
-                if (wireType === 2) { // Length-delimited (string)
-                    let len = 0;
-                    let shift = 0;
-                    while (i < data.length && data[i] & 0x80) {
-                        len |= (data[i] & 0x7f) << shift;
-                        shift += 7;
-                        i++;
-                    }
-                    if (i < data.length) {
-                        len |= data[i] << shift;
-                        i++;
-                    }
-
-                    if (i + len <= data.length) {
-                        const strBytes = data.slice(i, i + len);
-                        const str = new TextDecoder().decode(strBytes);
-                        i += len;
-
-                        // Map field numbers to ChatMessage fields
-                        // Within the ChatMessage (nested in Message.payload):
-                        // 1=id, 2=sender, 3=content
-                        if (fieldNum === 2) result.sender = str;
-                        else if (fieldNum === 3) result.content = str;
-                        else if (str.length < 50) result.id = str; // id is short
-                    }
-                } else if (wireType === 0) { // Varint
-                    while (i < data.length && data[i] & 0x80) i++;
-                    i++;
-                } else {
-                    // Unknown wire type, skip
-                    break;
-                }
-            }
-
-            return result.content ? result : null;
-        }
-
-        function sendChatMessage() {
-            const content = chatInput.value.trim();
-            if (!content || !chatSocket || chatSocket.readyState !== WebSocket.OPEN) {
-                return;
-            }
-
-            // Create ChatMessage protobuf
-            const chatMsg = encodeChatMessage({
-                id: generateId(),
-                sender: "technician",
-                content: content,
-                timestamp: Date.now()
-            });
-
-            chatSocket.send(chatMsg);
-            addSentMessage(content);
-            chatInput.value = "";
-        }
-
-        // Simple protobuf encoder for ChatMessage wrapped in Message
-        function encodeChatMessage(msg) {
-            const encoder = new TextEncoder();
-
-            // Encode ChatMessage fields
-            const id = encoder.encode(msg.id);
-            const sender = encoder.encode(msg.sender);
-            const content = encoder.encode(msg.content);
-
-            // ChatMessage: id(1), sender(2), content(3), timestamp(4)
-            const chatMsgBytes = [];
-
-            // Field 1: id (string)
-            chatMsgBytes.push(0x0a); // field 1, wire type 2
-            chatMsgBytes.push(id.length);
-            chatMsgBytes.push(...id);
-
-            // Field 2: sender (string)
-            chatMsgBytes.push(0x12); // field 2, wire type 2
-            chatMsgBytes.push(sender.length);
-            chatMsgBytes.push(...sender);
-
-            // Field 3: content (string)
-            chatMsgBytes.push(0x1a); // field 3, wire type 2
-            chatMsgBytes.push(content.length);
-            chatMsgBytes.push(...content);
-
-            // Field 4: timestamp (int64) - simplified varint encoding
-            chatMsgBytes.push(0x20); // field 4, wire type 0
-            let ts = msg.timestamp;
-            while (ts > 0x7f) {
-                chatMsgBytes.push((ts & 0x7f) | 0x80);
-                ts >>>= 7;
-            }
-            chatMsgBytes.push(ts);
-
-            // Wrap in Message with payload field 60 (ChatMessage)
-            const wrapper = [];
-            const fieldTag = (60 << 3) | 2; // field 60, wire type 2
-
-            // Encode tag as varint (60 = 0x3c, which fits in 2 bytes as varint)
-            wrapper.push((fieldTag & 0x7f) | 0x80);
-            wrapper.push(fieldTag >> 7);
-
-            // Length of ChatMessage
-            wrapper.push(chatMsgBytes.length);
-
-            // ChatMessage bytes
-            wrapper.push(...chatMsgBytes);
-
-            return new Uint8Array(wrapper);
-        }
-
-        function generateId() {
-            return 'msg_' + Math.random().toString(36).substr(2, 9);
-        }
-
-        function addSentMessage(content) {
-            chatMessages.push({
-                sender: "technician",
-                content: content,
-                timestamp: Date.now()
-            });
-            renderChatMessages();
-        }
-
-        function addReceivedMessage(sender, content) {
-            chatMessages.push({
-                sender: sender,
-                content: content,
-                timestamp: Date.now()
-            });
-            renderChatMessages();
-        }
-
-        function addSystemMessage(content) {
-            chatMessages.push({
-                sender: "system",
-                content: content,
-                timestamp: Date.now()
-            });
-            renderChatMessages();
-        }
-
-        function renderChatMessages() {
-            if (chatMessages.length === 0) {
-                chatMessagesEl.innerHTML = '<div class="chat-empty">No messages yet. Start the conversation!</div>';
-                return;
-            }
-
-            chatMessagesEl.innerHTML = chatMessages.map(msg => {
-                if (msg.sender === "system") {
-                    return '<div style="text-align: center; padding: 8px; color: hsl(var(--muted-foreground)); font-size: 12px;">' + escapeHtml(msg.content) + '</div>';
-                }
-                const msgClass = msg.sender === "technician" ? "technician" : "client";
-                const senderName = msg.sender === "technician" ? "You" : msg.sender;
-                return '<div class="chat-message ' + msgClass + '">' +
-                    '<div class="chat-message-sender">' + escapeHtml(senderName) + '</div>' +
-                    '<div class="chat-message-content">' + escapeHtml(msg.content) + '</div>' +
-                '</div>';
-            }).join("");
-
-            // Scroll to bottom
-            chatMessagesEl.scrollTop = chatMessagesEl.scrollHeight;
-        }
-
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-
-        // ========== Download Functions ==========
-
-        function downloadSupportAgent() {
-            const code = document.getElementById("supportCodeInput").value.trim();
-            if (!code || code.length !== 6 || !/^\d{6}$/.test(code)) {
-                alert("Please enter a valid 6-digit support code.");
-                return;
-            }
-
-            const downloadUrl = "/api/download/support?code=" + code;
-            const anchor = document.getElementById("supportDownloadAnchor");
-            anchor.href = downloadUrl;
-            anchor.textContent = "Download GuruConnect-" + code + ".exe";
-            document.getElementById("supportDownloadLink").style.display = "block";
-
-            // Automatically start download
-            window.location.href = downloadUrl;
-        }
-
-        function buildPermanentAgent() {
-            const company = document.getElementById("buildCompany").value.trim();
-            const site = document.getElementById("buildSite").value.trim();
-            const tags = document.getElementById("buildTags").value.trim();
-            const apiKey = document.getElementById("buildApiKey").value.trim();
-
-            if (!company) {
-                alert("Company name is required for permanent agent builds.");
-                return;
-            }
-
-            // Build URL with query parameters
-            let url = "/api/download/agent?company=" + encodeURIComponent(company);
-            if (site) url += "&site=" + encodeURIComponent(site);
-            if (tags) url += "&tags=" + encodeURIComponent(tags);
-            if (apiKey) url += "&api_key=" + encodeURIComponent(apiKey);
-
-            // Start download
-            window.location.href = url;
-        }
-    </script>
-</body>
-</html>
diff --git a/server/static/index.html b/server/static/index.html
deleted file mode 100644
index e56a3f2..0000000
--- a/server/static/index.html
+++ /dev/null
@@ -1,425 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GuruConnect - Remote Support</title>
-    <style>
-        :root {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --primary: 217.2 91.2% 59.8%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 224.3 76.3% 48%;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            width: 100%;
-            max-width: 440px;
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 12px;
-            padding: 40px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-        }
-
-        .logo {
-            text-align: center;
-            margin-bottom: 32px;
-        }
-
-        .logo h1 {
-            font-size: 28px;
-            font-weight: 700;
-            color: hsl(var(--foreground));
-        }
-
-        .logo p {
-            color: hsl(var(--muted-foreground));
-            margin-top: 8px;
-            font-size: 14px;
-        }
-
-        .code-form {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-        }
-
-        label {
-            font-size: 14px;
-            font-weight: 500;
-            color: hsl(var(--foreground));
-        }
-
-        .code-input-wrapper {
-            position: relative;
-        }
-
-        .code-input {
-            width: 100%;
-            padding: 16px 20px;
-            font-size: 32px;
-            font-weight: 600;
-            letter-spacing: 8px;
-            text-align: center;
-            background: hsl(var(--input));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            color: hsl(var(--foreground));
-            outline: none;
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
-
-        .code-input:focus {
-            border-color: hsl(var(--ring));
-            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
-        }
-
-        .code-input::placeholder {
-            color: hsl(var(--muted-foreground));
-            letter-spacing: 4px;
-        }
-
-        .connect-btn {
-            width: 100%;
-            padding: 14px 24px;
-            font-size: 16px;
-            font-weight: 600;
-            background: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: opacity 0.2s, transform 0.1s;
-        }
-
-        .connect-btn:hover {
-            opacity: 0.9;
-        }
-
-        .connect-btn:active {
-            transform: scale(0.98);
-        }
-
-        .connect-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .error-message {
-            background: hsla(0, 70%, 50%, 0.1);
-            border: 1px solid hsla(0, 70%, 50%, 0.3);
-            color: hsl(0, 70%, 70%);
-            padding: 12px 16px;
-            border-radius: 8px;
-            font-size: 14px;
-            display: none;
-        }
-
-        .error-message.visible {
-            display: block;
-        }
-
-        .divider {
-            border-top: 1px solid hsl(var(--border));
-            margin: 24px 0;
-        }
-
-        .instructions {
-            display: none;
-            text-align: left;
-        }
-
-        .instructions.visible {
-            display: block;
-        }
-
-        .instructions h3 {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 12px;
-            color: hsl(var(--foreground));
-        }
-
-        .instructions ol {
-            padding-left: 20px;
-            color: hsl(var(--muted-foreground));
-            font-size: 14px;
-            line-height: 1.8;
-        }
-
-        .instructions li {
-            margin-bottom: 8px;
-        }
-
-        .footer {
-            margin-top: 24px;
-            text-align: center;
-            color: hsl(var(--muted-foreground));
-            font-size: 12px;
-        }
-
-        .footer a {
-            color: hsl(var(--primary));
-            text-decoration: none;
-        }
-
-        .spinner {
-            display: none;
-            width: 20px;
-            height: 20px;
-            border: 2px solid transparent;
-            border-top-color: currentColor;
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-            margin-right: 8px;
-            vertical-align: middle;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        .loading .spinner {
-            display: inline-block;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="logo">
-            <h1>GuruConnect</h1>
-            <p>Remote Support Portal</p>
-        </div>
-
-        <form class="code-form" id="codeForm">
-            <label for="codeInput">Enter your support code:</label>
-            <div class="code-input-wrapper">
-                <input
-                    type="text"
-                    id="codeInput"
-                    class="code-input"
-                    placeholder="000000"
-                    maxlength="6"
-                    pattern="[0-9]{6}"
-                    inputmode="numeric"
-                    autocomplete="off"
-                    required
-                >
-            </div>
-
-            <div class="error-message" id="errorMessage"></div>
-
-            <button type="submit" class="connect-btn" id="connectBtn">
-                <span class="spinner"></span>
-                <span class="btn-text">Connect</span>
-            </button>
-        </form>
-
-        <div class="divider"></div>
-
-        <div class="instructions" id="instructions">
-            <h3>How to connect:</h3>
-            <ol id="instructionsList">
-                <li>Enter the 6-digit code provided by your technician</li>
-                <li>Click "Connect" to start the session</li>
-                <li>If prompted, allow the download and run the file</li>
-            </ol>
-        </div>
-
-        <div class="footer">
-            <p>Need help? Contact <a href="mailto:support@azcomputerguru.com">support@azcomputerguru.com</a></p>
-            <p style="margin-top: 12px;"><a href="/login" style="color: hsl(var(--muted-foreground)); font-size: 11px;">Technician Login</a></p>
-        </div>
-    </div>
-
-    <script>
-        const form = document.getElementById('codeForm');
-        const codeInput = document.getElementById('codeInput');
-        const connectBtn = document.getElementById('connectBtn');
-        const errorMessage = document.getElementById('errorMessage');
-        const instructions = document.getElementById('instructions');
-        const instructionsList = document.getElementById('instructionsList');
-
-        // Auto-format input (numbers only)
-        codeInput.addEventListener('input', (e) => {
-            e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 6);
-            errorMessage.classList.remove('visible');
-        });
-
-        // Detect browser
-        function detectBrowser() {
-            const ua = navigator.userAgent;
-            if (ua.includes('Edg/')) return 'edge';
-            if (ua.includes('Chrome/')) return 'chrome';
-            if (ua.includes('Firefox/')) return 'firefox';
-            if (ua.includes('Safari/') && !ua.includes('Chrome')) return 'safari';
-            return 'unknown';
-        }
-
-        // Browser-specific instructions
-        function getBrowserInstructions(browser) {
-            const instrs = {
-                chrome: [
-                    'Click the download in the <strong>bottom-left corner</strong> of your screen',
-                    'Click <strong>"Open"</strong> or <strong>"Keep"</strong> if prompted',
-                    'The support session will start automatically'
-                ],
-                firefox: [
-                    'Click <strong>"Save File"</strong> in the download dialog',
-                    'Open your <strong>Downloads folder</strong>',
-                    'Double-click <strong>GuruConnect.exe</strong> to start'
-                ],
-                edge: [
-                    'Click <strong>"Open file"</strong> in the download notification at the top',
-                    'If you see "Keep" button, click it first, then "Open file"',
-                    'The support session will start automatically'
-                ],
-                safari: [
-                    'Click the <strong>download icon</strong> in the toolbar',
-                    'Double-click the downloaded file',
-                    'Click <strong>"Open"</strong> if macOS asks for confirmation'
-                ],
-                unknown: [
-                    'Your download should start automatically',
-                    'Look for the file in your <strong>Downloads folder</strong>',
-                    'Double-click the file to start the support session'
-                ]
-            };
-            return instrs[browser] || instrs.unknown;
-        }
-
-        // Show browser-specific instructions
-        function showInstructions() {
-            const browser = detectBrowser();
-            const steps = getBrowserInstructions(browser);
-
-            instructionsList.innerHTML = steps.map(step => '<li>' + step + '</li>').join('');
-            instructions.classList.add('visible');
-        }
-
-        // Handle form submission
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-
-            const code = codeInput.value.trim();
-
-            if (code.length !== 6) {
-                showError('Please enter a 6-digit code');
-                return;
-            }
-
-            setLoading(true);
-
-            try {
-                // Validate code with server
-                const response = await fetch('/api/codes/' + code + '/validate');
-                const data = await response.json();
-
-                if (!data.valid) {
-                    showError(data.error || 'Invalid code');
-                    setLoading(false);
-                    return;
-                }
-
-                // Try to launch via custom protocol
-                const protocolUrl = 'guruconnect://session/' + code;
-
-                // Attempt protocol launch with timeout fallback
-                let protocolLaunched = false;
-
-                const protocolTimeout = setTimeout(() => {
-                    if (!protocolLaunched) {
-                        // Protocol didn't work, trigger download
-                        triggerDownload(code, data.session_id);
-                    }
-                }, 2500);
-
-                // Try the protocol
-                window.location.href = protocolUrl;
-
-                // Check if we're still here after a moment
-                setTimeout(() => {
-                    protocolLaunched = document.hidden;
-                    if (protocolLaunched) {
-                        clearTimeout(protocolTimeout);
-                    }
-                }, 500);
-
-            } catch (err) {
-                showError('Connection error. Please try again.');
-                setLoading(false);
-            }
-        });
-
-        function triggerDownload(code, sessionId) {
-            // Show instructions
-            showInstructions();
-
-            setLoading(false);
-            connectBtn.querySelector('.btn-text').textContent = 'Download Starting...';
-
-            // Create a temporary link to download the agent
-            // The agent will be run with the code as argument
-            const downloadLink = document.createElement('a');
-            downloadLink.href = '/guruconnect-agent.exe';
-            downloadLink.download = 'GuruConnect-' + code + '.exe';
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-
-            // Show instructions with the code reminder
-            setTimeout(() => {
-                connectBtn.querySelector('.btn-text').textContent = 'Run the Downloaded File';
-
-                // Update instructions to include the code
-                instructionsList.innerHTML = getBrowserInstructions(detectBrowser()).map(step => '<li>' + step + '</li>').join('') +
-                    '<li><strong>Important:</strong> When prompted, enter code: <strong style="color: hsl(var(--primary)); font-size: 18px;">' + code + '</strong></li>';
-            }, 500);
-        }
-
-        function showError(message) {
-            errorMessage.textContent = message;
-            errorMessage.classList.add('visible');
-        }
-
-        function setLoading(loading) {
-            connectBtn.disabled = loading;
-            connectBtn.classList.toggle('loading', loading);
-            if (loading) {
-                connectBtn.querySelector('.btn-text').textContent = 'Connecting...';
-            } else if (!instructions.classList.contains('visible')) {
-                connectBtn.querySelector('.btn-text').textContent = 'Connect';
-            }
-        }
-
-        // Focus input on load
-        codeInput.focus();
-    </script>
-</body>
-</html>
diff --git a/server/static/login.html b/server/static/login.html
deleted file mode 100644
index 34ad38c..0000000
--- a/server/static/login.html
+++ /dev/null
@@ -1,229 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GuruConnect - Login</title>
-    <style>
-        :root {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --primary: 217.2 91.2% 59.8%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 224.3 76.3% 48%;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .container {
-            width: 100%;
-            max-width: 400px;
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 12px;
-            padding: 40px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-        }
-
-        .logo { text-align: center; margin-bottom: 32px; }
-        .logo h1 { font-size: 28px; font-weight: 700; color: hsl(var(--foreground)); }
-        .logo p { color: hsl(var(--muted-foreground)); margin-top: 8px; font-size: 14px; }
-
-        .login-form { display: flex; flex-direction: column; gap: 20px; }
-
-        .form-group { display: flex; flex-direction: column; gap: 8px; }
-
-        label { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
-
-        input[type="text"], input[type="password"] {
-            width: 100%;
-            padding: 12px 16px;
-            font-size: 14px;
-            background: hsl(var(--input));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            color: hsl(var(--foreground));
-            outline: none;
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
-
-        input:focus {
-            border-color: hsl(var(--ring));
-            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
-        }
-
-        input::placeholder { color: hsl(var(--muted-foreground)); }
-
-        .login-btn {
-            width: 100%;
-            padding: 12px 24px;
-            font-size: 16px;
-            font-weight: 600;
-            background: hsl(var(--primary));
-            color: hsl(var(--primary-foreground));
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: opacity 0.2s, transform 0.1s;
-            margin-top: 8px;
-        }
-
-        .login-btn:hover { opacity: 0.9; }
-        .login-btn:active { transform: scale(0.98); }
-        .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-        .error-message {
-            background: hsla(0, 70%, 50%, 0.1);
-            border: 1px solid hsla(0, 70%, 50%, 0.3);
-            color: hsl(0, 70%, 70%);
-            padding: 12px 16px;
-            border-radius: 8px;
-            font-size: 14px;
-            display: none;
-        }
-
-        .error-message.visible { display: block; }
-
-        .footer { margin-top: 24px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 12px; }
-        .footer a { color: hsl(var(--primary)); text-decoration: none; }
-
-        .spinner {
-            display: none;
-            width: 18px;
-            height: 18px;
-            border: 2px solid transparent;
-            border-top-color: currentColor;
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-            margin-right: 8px;
-            vertical-align: middle;
-        }
-
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .loading .spinner { display: inline-block; }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="logo">
-            <h1>GuruConnect</h1>
-            <p>Sign in to your account</p>
-        </div>
-
-        <form class="login-form" id="loginForm">
-            <div class="form-group">
-                <label for="username">Username</label>
-                <input type="text" id="username" placeholder="Enter your username" autocomplete="username" required>
-            </div>
-
-            <div class="form-group">
-                <label for="password">Password</label>
-                <input type="password" id="password" placeholder="Enter your password" autocomplete="current-password" required>
-            </div>
-
-            <div class="error-message" id="errorMessage"></div>
-
-            <button type="submit" class="login-btn" id="loginBtn">
-                <span class="spinner"></span>
-                <span class="btn-text">Sign In</span>
-            </button>
-        </form>
-
-        <div class="footer">
-            <p><a href="/">Back to Support Portal</a></p>
-        </div>
-    </div>
-
-    <script>
-        const form = document.getElementById("loginForm");
-        const loginBtn = document.getElementById("loginBtn");
-        const errorMessage = document.getElementById("errorMessage");
-
-        // Check if already logged in
-        const token = localStorage.getItem("guruconnect_token");
-        if (token) {
-            // Verify token is still valid
-            fetch('/api/auth/me', {
-                headers: { 'Authorization': `Bearer ${token}` }
-            }).then(res => {
-                if (res.ok) {
-                    window.location.href = '/dashboard';
-                } else {
-                    localStorage.removeItem('guruconnect_token');
-                    localStorage.removeItem('guruconnect_user');
-                }
-            }).catch(() => {
-                localStorage.removeItem('guruconnect_token');
-                localStorage.removeItem('guruconnect_user');
-            });
-        }
-
-        form.addEventListener("submit", async (e) => {
-            e.preventDefault();
-
-            const username = document.getElementById("username").value;
-            const password = document.getElementById("password").value;
-
-            setLoading(true);
-            errorMessage.classList.remove("visible");
-
-            try {
-                const response = await fetch("/api/auth/login", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ username, password })
-                });
-
-                const data = await response.json();
-
-                if (!response.ok) {
-                    showError(data.error || "Login failed");
-                    setLoading(false);
-                    return;
-                }
-
-                // Store token and user info
-                localStorage.setItem("guruconnect_token", data.token);
-                localStorage.setItem("guruconnect_user", JSON.stringify(data.user));
-                window.location.href = "/dashboard";
-
-            } catch (err) {
-                showError("Connection error. Please try again.");
-                setLoading(false);
-            }
-        });
-
-        function showError(message) {
-            errorMessage.textContent = message;
-            errorMessage.classList.add("visible");
-        }
-
-        function setLoading(loading) {
-            loginBtn.disabled = loading;
-            loginBtn.classList.toggle("loading", loading);
-            loginBtn.querySelector(".btn-text").textContent = loading ? "Signing in..." : "Sign In";
-        }
-
-        // Focus username field
-        document.getElementById("username").focus();
-    </script>
-</body>
-</html>
diff --git a/server/static/users.html b/server/static/users.html
deleted file mode 100644
index 08bb946..0000000
--- a/server/static/users.html
+++ /dev/null
@@ -1,602 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GuruConnect - User Management</title>
-    <style>
-        :root {
-            --background: 222.2 84% 4.9%;
-            --foreground: 210 40% 98%;
-            --card: 222.2 84% 4.9%;
-            --card-foreground: 210 40% 98%;
-            --primary: 217.2 91.2% 59.8%;
-            --primary-foreground: 222.2 47.4% 11.2%;
-            --muted: 217.2 32.6% 17.5%;
-            --muted-foreground: 215 20.2% 65.1%;
-            --border: 217.2 32.6% 17.5%;
-            --input: 217.2 32.6% 17.5%;
-            --ring: 224.3 76.3% 48%;
-            --accent: 217.2 32.6% 17.5%;
-            --destructive: 0 62.8% 30.6%;
-        }
-
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
-            background-color: hsl(var(--background));
-            color: hsl(var(--foreground));
-            min-height: 100vh;
-        }
-
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 24px;
-            border-bottom: 1px solid hsl(var(--border));
-            background: hsl(var(--card));
-        }
-
-        .header-left { display: flex; align-items: center; gap: 24px; }
-        .logo { font-size: 20px; font-weight: 700; color: hsl(var(--foreground)); }
-        .back-link { color: hsl(var(--muted-foreground)); text-decoration: none; font-size: 14px; }
-        .back-link:hover { color: hsl(var(--foreground)); }
-
-        .content { padding: 24px; max-width: 1200px; margin: 0 auto; }
-
-        .card {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 8px;
-            padding: 24px;
-            margin-bottom: 16px;
-        }
-
-        .card-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 16px;
-        }
-
-        .card-title { font-size: 18px; font-weight: 600; }
-        .card-description { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 4px; }
-
-        .btn {
-            padding: 10px 20px;
-            font-size: 14px;
-            font-weight: 500;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: all 0.2s;
-            border: none;
-        }
-
-        .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
-        .btn-primary:hover { opacity: 0.9; }
-        .btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
-        .btn-outline:hover { background: hsl(var(--accent)); }
-        .btn-danger { background: hsl(var(--destructive)); color: white; }
-        .btn-danger:hover { opacity: 0.9; }
-        .btn-sm { padding: 6px 12px; font-size: 12px; }
-
-        table { width: 100%; border-collapse: collapse; }
-        th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
-        th { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
-        td { font-size: 14px; }
-        tr:hover { background: hsla(var(--muted), 0.3); }
-
-        .badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 9999px; }
-        .badge-admin { background: hsla(270, 76%, 50%, 0.2); color: hsl(270, 76%, 60%); }
-        .badge-operator { background: hsla(45, 93%, 47%, 0.2); color: hsl(45, 93%, 55%); }
-        .badge-viewer { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
-        .badge-enabled { background: hsla(142, 76%, 36%, 0.2); color: hsl(142, 76%, 50%); }
-        .badge-disabled { background: hsla(0, 70%, 50%, 0.2); color: hsl(0, 70%, 60%); }
-
-        .empty-state { text-align: center; padding: 48px 24px; color: hsl(var(--muted-foreground)); }
-        .empty-state h3 { font-size: 16px; margin-bottom: 8px; color: hsl(var(--foreground)); }
-
-        /* Modal */
-        .modal-overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.7);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-overlay.active { display: flex; }
-
-        .modal {
-            background: hsl(var(--card));
-            border: 1px solid hsl(var(--border));
-            border-radius: 12px;
-            width: 90%;
-            max-width: 500px;
-            max-height: 90vh;
-            overflow-y: auto;
-        }
-
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px 20px;
-            border-bottom: 1px solid hsl(var(--border));
-        }
-
-        .modal-title { font-size: 18px; font-weight: 600; }
-
-        .modal-close {
-            background: transparent;
-            border: none;
-            color: hsl(var(--muted-foreground));
-            font-size: 24px;
-            cursor: pointer;
-            padding: 4px;
-        }
-        .modal-close:hover { color: hsl(var(--foreground)); }
-
-        .modal-body { padding: 20px; }
-        .modal-footer { padding: 16px 20px; border-top: 1px solid hsl(var(--border)); display: flex; gap: 12px; justify-content: flex-end; }
-
-        .form-group { margin-bottom: 16px; }
-        .form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
-        .form-group input, .form-group select {
-            width: 100%;
-            padding: 10px 14px;
-            font-size: 14px;
-            background: hsl(var(--input));
-            border: 1px solid hsl(var(--border));
-            border-radius: 6px;
-            color: hsl(var(--foreground));
-            outline: none;
-        }
-        .form-group input:focus, .form-group select:focus {
-            border-color: hsl(var(--ring));
-            box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
-        }
-
-        .permissions-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 8px;
-        }
-        .permission-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px;
-            background: hsl(var(--muted));
-            border-radius: 6px;
-            font-size: 13px;
-        }
-        .permission-item input[type="checkbox"] {
-            width: auto;
-        }
-
-        .error-message {
-            background: hsla(0, 70%, 50%, 0.1);
-            border: 1px solid hsla(0, 70%, 50%, 0.3);
-            color: hsl(0, 70%, 70%);
-            padding: 12px 16px;
-            border-radius: 8px;
-            font-size: 14px;
-            margin-bottom: 16px;
-            display: none;
-        }
-        .error-message.visible { display: block; }
-
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            display: none;
-            justify-content: center;
-            align-items: center;
-            z-index: 2000;
-        }
-        .loading-overlay.active { display: flex; }
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid hsl(var(--muted));
-            border-top-color: hsl(var(--primary));
-            border-radius: 50%;
-            animation: spin 0.8s linear infinite;
-        }
-        @keyframes spin { to { transform: rotate(360deg); } }
-    </style>
-</head>
-<body>
-    <header class="header">
-        <div class="header-left">
-            <div class="logo">GuruConnect</div>
-            <a href="/dashboard" class="back-link">&larr; Back to Dashboard</a>
-        </div>
-    </header>
-
-    <main class="content">
-        <div class="card">
-            <div class="card-header">
-                <div>
-                    <h2 class="card-title">User Management</h2>
-                    <p class="card-description">Create and manage user accounts</p>
-                </div>
-                <button class="btn btn-primary" onclick="openCreateModal()">Create User</button>
-            </div>
-
-            <div class="error-message" id="errorMessage"></div>
-
-            <table>
-                <thead>
-                    <tr>
-                        <th>Username</th>
-                        <th>Email</th>
-                        <th>Role</th>
-                        <th>Status</th>
-                        <th>Last Login</th>
-                        <th>Actions</th>
-                    </tr>
-                </thead>
-                <tbody id="usersTable">
-                    <tr>
-                        <td colspan="6">
-                            <div class="empty-state">
-                                <h3>Loading users...</h3>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </main>
-
-    <!-- Create/Edit User Modal -->
-    <div class="modal-overlay" id="userModal">
-        <div class="modal">
-            <div class="modal-header">
-                <div class="modal-title" id="modalTitle">Create User</div>
-                <button class="modal-close" onclick="closeModal()">&times;</button>
-            </div>
-            <div class="modal-body">
-                <form id="userForm">
-                    <input type="hidden" id="userId">
-
-                    <div class="form-group">
-                        <label for="username">Username</label>
-                        <input type="text" id="username" required minlength="3">
-                    </div>
-
-                    <div class="form-group" id="passwordGroup">
-                        <label for="password">Password</label>
-                        <input type="password" id="password" minlength="8">
-                        <small style="color: hsl(var(--muted-foreground)); font-size: 12px;">Minimum 8 characters. Leave blank to keep existing password.</small>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="email">Email (optional)</label>
-                        <input type="email" id="email">
-                    </div>
-
-                    <div class="form-group">
-                        <label for="role">Role</label>
-                        <select id="role">
-                            <option value="viewer">Viewer - View only access</option>
-                            <option value="operator">Operator - Can control machines</option>
-                            <option value="admin">Admin - Full access</option>
-                        </select>
-                    </div>
-
-                    <div class="form-group">
-                        <label>
-                            <input type="checkbox" id="enabled" checked style="width: auto; margin-right: 8px;">
-                            Account Enabled
-                        </label>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Permissions</label>
-                        <div class="permissions-grid">
-                            <label class="permission-item">
-                                <input type="checkbox" id="perm-view" checked>
-                                View
-                            </label>
-                            <label class="permission-item">
-                                <input type="checkbox" id="perm-control">
-                                Control
-                            </label>
-                            <label class="permission-item">
-                                <input type="checkbox" id="perm-transfer">
-                                Transfer
-                            </label>
-                            <label class="permission-item">
-                                <input type="checkbox" id="perm-manage_users">
-                                Manage Users
-                            </label>
-                            <label class="permission-item">
-                                <input type="checkbox" id="perm-manage_clients">
-                                Manage Clients
-                            </label>
-                        </div>
-                    </div>
-
-                    <div class="error-message" id="formError"></div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-outline" onclick="closeModal()">Cancel</button>
-                <button class="btn btn-primary" onclick="saveUser()">Save</button>
-            </div>
-        </div>
-    </div>
-
-    <div class="loading-overlay" id="loadingOverlay">
-        <div class="spinner"></div>
-    </div>
-
-    <script>
-        const token = localStorage.getItem("guruconnect_token");
-        let users = [];
-        let editingUser = null;
-
-        // Check auth
-        if (!token) {
-            window.location.href = "/login";
-        }
-
-        // Verify admin access
-        async function checkAdmin() {
-            try {
-                const response = await fetch("/api/auth/me", {
-                    headers: { "Authorization": `Bearer ${token}` }
-                });
-
-                if (!response.ok) {
-                    window.location.href = "/login";
-                    return;
-                }
-
-                const user = await response.json();
-                if (user.role !== "admin") {
-                    alert("Admin access required");
-                    window.location.href = "/dashboard";
-                    return;
-                }
-
-                loadUsers();
-            } catch (err) {
-                console.error("Auth check failed:", err);
-                window.location.href = "/login";
-            }
-        }
-
-        checkAdmin();
-
-        async function loadUsers() {
-            try {
-                const response = await fetch("/api/users", {
-                    headers: { "Authorization": `Bearer ${token}` }
-                });
-
-                if (!response.ok) {
-                    throw new Error("Failed to load users");
-                }
-
-                users = await response.json();
-                renderUsers();
-            } catch (err) {
-                showError(err.message);
-            }
-        }
-
-        function renderUsers() {
-            const tbody = document.getElementById("usersTable");
-
-            if (users.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="6"><div class="empty-state"><h3>No users found</h3></div></td></tr>';
-                return;
-            }
-
-            tbody.innerHTML = users.map(user => {
-                const roleClass = user.role === "admin" ? "badge-admin" :
-                                 user.role === "operator" ? "badge-operator" : "badge-viewer";
-                const statusClass = user.enabled ? "badge-enabled" : "badge-disabled";
-                const lastLogin = user.last_login ? new Date(user.last_login).toLocaleString() : "Never";
-
-                return `<tr>
-                    <td><strong>${escapeHtml(user.username)}</strong></td>
-                    <td>${escapeHtml(user.email || "-")}</td>
-                    <td><span class="badge ${roleClass}">${user.role}</span></td>
-                    <td><span class="badge ${statusClass}">${user.enabled ? "Enabled" : "Disabled"}</span></td>
-                    <td>${lastLogin}</td>
-                    <td>
-                        <button class="btn btn-outline btn-sm" onclick="editUser('${user.id}')">Edit</button>
-                        <button class="btn btn-danger btn-sm" onclick="deleteUser('${user.id}', '${escapeHtml(user.username)}')" style="margin-left: 4px;">Delete</button>
-                    </td>
-                </tr>`;
-            }).join("");
-        }
-
-        function openCreateModal() {
-            editingUser = null;
-            document.getElementById("modalTitle").textContent = "Create User";
-            document.getElementById("userForm").reset();
-            document.getElementById("userId").value = "";
-            document.getElementById("username").disabled = false;
-            document.getElementById("password").required = true;
-            document.getElementById("perm-view").checked = true;
-            document.getElementById("formError").classList.remove("visible");
-            document.getElementById("userModal").classList.add("active");
-        }
-
-        function editUser(id) {
-            editingUser = users.find(u => u.id === id);
-            if (!editingUser) return;
-
-            document.getElementById("modalTitle").textContent = "Edit User";
-            document.getElementById("userId").value = editingUser.id;
-            document.getElementById("username").value = editingUser.username;
-            document.getElementById("username").disabled = true;
-            document.getElementById("password").value = "";
-            document.getElementById("password").required = false;
-            document.getElementById("email").value = editingUser.email || "";
-            document.getElementById("role").value = editingUser.role;
-            document.getElementById("enabled").checked = editingUser.enabled;
-
-            // Set permissions
-            ["view", "control", "transfer", "manage_users", "manage_clients"].forEach(perm => {
-                document.getElementById("perm-" + perm).checked = editingUser.permissions.includes(perm);
-            });
-
-            document.getElementById("formError").classList.remove("visible");
-            document.getElementById("userModal").classList.add("active");
-        }
-
-        function closeModal() {
-            document.getElementById("userModal").classList.remove("active");
-            editingUser = null;
-        }
-
-        async function saveUser() {
-            const userId = document.getElementById("userId").value;
-            const username = document.getElementById("username").value;
-            const password = document.getElementById("password").value;
-            const email = document.getElementById("email").value || null;
-            const role = document.getElementById("role").value;
-            const enabled = document.getElementById("enabled").checked;
-
-            const permissions = [];
-            ["view", "control", "transfer", "manage_users", "manage_clients"].forEach(perm => {
-                if (document.getElementById("perm-" + perm).checked) {
-                    permissions.push(perm);
-                }
-            });
-
-            // Validation
-            if (!username || username.length < 3) {
-                showFormError("Username must be at least 3 characters");
-                return;
-            }
-
-            if (!userId && (!password || password.length < 8)) {
-                showFormError("Password must be at least 8 characters");
-                return;
-            }
-
-            showLoading(true);
-
-            try {
-                let response;
-
-                if (userId) {
-                    // Update existing user
-                    const updateData = { email, role, enabled };
-                    if (password) updateData.password = password;
-
-                    response = await fetch("/api/users/" + userId, {
-                        method: "PUT",
-                        headers: {
-                            "Authorization": `Bearer ${token}`,
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify(updateData)
-                    });
-
-                    if (response.ok && permissions.length > 0) {
-                        // Update permissions separately
-                        await fetch("/api/users/" + userId + "/permissions", {
-                            method: "PUT",
-                            headers: {
-                                "Authorization": `Bearer ${token}`,
-                                "Content-Type": "application/json"
-                            },
-                            body: JSON.stringify({ permissions })
-                        });
-                    }
-                } else {
-                    // Create new user
-                    response = await fetch("/api/users", {
-                        method: "POST",
-                        headers: {
-                            "Authorization": `Bearer ${token}`,
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify({ username, password, email, role, permissions })
-                    });
-                }
-
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.error || "Operation failed");
-                }
-
-                closeModal();
-                loadUsers();
-            } catch (err) {
-                showFormError(err.message);
-            } finally {
-                showLoading(false);
-            }
-        }
-
-        async function deleteUser(id, username) {
-            if (!confirm(`Delete user "${username}"?\n\nThis action cannot be undone.`)) {
-                return;
-            }
-
-            showLoading(true);
-
-            try {
-                const response = await fetch("/api/users/" + id, {
-                    method: "DELETE",
-                    headers: { "Authorization": `Bearer ${token}` }
-                });
-
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.error || "Delete failed");
-                }
-
-                loadUsers();
-            } catch (err) {
-                showError(err.message);
-            } finally {
-                showLoading(false);
-            }
-        }
-
-        function showError(message) {
-            const el = document.getElementById("errorMessage");
-            el.textContent = message;
-            el.classList.add("visible");
-        }
-
-        function showFormError(message) {
-            const el = document.getElementById("formError");
-            el.textContent = message;
-            el.classList.add("visible");
-        }
-
-        function showLoading(show) {
-            document.getElementById("loadingOverlay").classList.toggle("active", show);
-        }
-
-        function escapeHtml(text) {
-            if (!text) return "";
-            const div = document.createElement("div");
-            div.textContent = text;
-            return div.innerHTML;
-        }
-    </script>
-</body>
-</html>
diff --git a/server/static/viewer.html b/server/static/viewer.html
deleted file mode 100644
index 1383a6b..0000000
--- a/server/static/viewer.html
+++ /dev/null
@@ -1,694 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GuruConnect Viewer</title>
-    <script src="https://cdn.jsdelivr.net/npm/fzstd@0.1.1/umd/index.min.js"></script>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            background: #1a1a2e;
-            color: #eee;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            overflow: hidden;
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .toolbar {
-            background: #16213e;
-            padding: 8px 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            border-bottom: 1px solid #0f3460;
-            flex-shrink: 0;
-        }
-
-        .toolbar button {
-            background: #0f3460;
-            color: #eee;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background 0.2s;
-        }
-
-        .toolbar button:hover {
-            background: #1a4a7a;
-        }
-
-        .toolbar button.danger {
-            background: #e74c3c;
-        }
-
-        .toolbar button.danger:hover {
-            background: #c0392b;
-        }
-
-        .toolbar .spacer {
-            flex: 1;
-        }
-
-        .toolbar .status {
-            font-size: 13px;
-            color: #aaa;
-        }
-
-        .toolbar .status.connected {
-            color: #4caf50;
-        }
-
-        .toolbar .status.connecting {
-            color: #ff9800;
-        }
-
-        .toolbar .status.error {
-            color: #e74c3c;
-        }
-
-        .canvas-container {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #000;
-            overflow: hidden;
-        }
-
-        #viewer-canvas {
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-        }
-
-        .overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 100;
-        }
-
-        .overlay.hidden {
-            display: none;
-        }
-
-        .overlay-content {
-            text-align: center;
-            color: #fff;
-        }
-
-        .overlay-content .spinner {
-            width: 48px;
-            height: 48px;
-            border: 4px solid #333;
-            border-top-color: #4caf50;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 16px;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        .stats {
-            font-size: 12px;
-            color: #888;
-            display: flex;
-            gap: 16px;
-        }
-
-        .stats span {
-            color: #aaa;
-        }
-    </style>
-</head>
-<body>
-    <div class="toolbar">
-        <button class="danger" onclick="disconnect()">Disconnect</button>
-        <button onclick="toggleFullscreen()">Fullscreen</button>
-        <button onclick="sendCtrlAltDel()">Ctrl+Alt+Del</button>
-        <div class="spacer"></div>
-        <div class="stats">
-            <div>FPS: <span id="fps">0</span></div>
-            <div>Resolution: <span id="resolution">-</span></div>
-            <div>Frames: <span id="frame-count">0</span></div>
-        </div>
-        <div class="status connecting" id="status">Connecting...</div>
-    </div>
-
-    <div class="canvas-container" id="canvas-container">
-        <canvas id="viewer-canvas"></canvas>
-    </div>
-
-    <div class="overlay" id="overlay">
-        <div class="overlay-content">
-            <div class="spinner"></div>
-            <div id="overlay-text">Connecting to remote desktop...</div>
-        </div>
-    </div>
-
-    <script>
-        // Get session ID from URL
-        const urlParams = new URLSearchParams(window.location.search);
-        const sessionId = urlParams.get('session_id');
-
-        if (!sessionId) {
-            alert('No session ID provided');
-            window.close();
-        }
-
-        // Get viewer name from localStorage (same as dashboard)
-        const user = JSON.parse(localStorage.getItem('user') || 'null');
-        const viewerName = user?.name || user?.email || 'Technician';
-
-        // State
-        let ws = null;
-        let canvas = document.getElementById('viewer-canvas');
-        let ctx = canvas.getContext('2d');
-        let imageData = null;
-        let frameCount = 0;
-        let lastFpsTime = Date.now();
-        let fpsFrames = 0;
-        let remoteWidth = 0;
-        let remoteHeight = 0;
-
-        // ============================================================
-        // Protobuf Parsing Utilities
-        // ============================================================
-
-        function parseVarint(buffer, offset) {
-            let result = 0;
-            let shift = 0;
-            while (offset < buffer.length) {
-                const byte = buffer[offset++];
-                result |= (byte & 0x7f) << shift;
-                if ((byte & 0x80) === 0) break;
-                shift += 7;
-            }
-            return { value: result, offset };
-        }
-
-        function parseSignedVarint(buffer, offset) {
-            const { value, offset: newOffset } = parseVarint(buffer, offset);
-            // ZigZag decode
-            return { value: (value >>> 1) ^ -(value & 1), offset: newOffset };
-        }
-
-        function parseField(buffer, offset) {
-            if (offset >= buffer.length) return null;
-            const { value: tag, offset: newOffset } = parseVarint(buffer, offset);
-            const fieldNumber = tag >>> 3;
-            const wireType = tag & 0x7;
-            return { fieldNumber, wireType, offset: newOffset };
-        }
-
-        function skipField(buffer, offset, wireType) {
-            switch (wireType) {
-                case 0: // Varint
-                    while (offset < buffer.length && (buffer[offset++] & 0x80)) {}
-                    return offset;
-                case 1: // 64-bit
-                    return offset + 8;
-                case 2: // Length-delimited
-                    const { value: len, offset: newOffset } = parseVarint(buffer, offset);
-                    return newOffset + len;
-                case 5: // 32-bit
-                    return offset + 4;
-                default:
-                    throw new Error(`Unknown wire type: ${wireType}`);
-            }
-        }
-
-        function parseLengthDelimited(buffer, offset) {
-            const { value: len, offset: dataStart } = parseVarint(buffer, offset);
-            const data = buffer.slice(dataStart, dataStart + len);
-            return { data, offset: dataStart + len };
-        }
-
-        // ============================================================
-        // VideoFrame Parsing
-        // ============================================================
-
-        function parseVideoFrame(data) {
-            const buffer = new Uint8Array(data);
-            let offset = 0;
-
-            // Parse Message wrapper
-            let videoFrameData = null;
-
-            while (offset < buffer.length) {
-                const field = parseField(buffer, offset);
-                if (!field) break;
-                offset = field.offset;
-
-                if (field.fieldNumber === 10 && field.wireType === 2) {
-                    // video_frame field
-                    const { data: vfData, offset: newOffset } = parseLengthDelimited(buffer, offset);
-                    videoFrameData = vfData;
-                    offset = newOffset;
-                } else {
-                    offset = skipField(buffer, offset, field.wireType);
-                }
-            }
-
-            if (!videoFrameData) return null;
-
-            // Parse VideoFrame
-            let rawFrameData = null;
-            offset = 0;
-
-            while (offset < videoFrameData.length) {
-                const field = parseField(videoFrameData, offset);
-                if (!field) break;
-                offset = field.offset;
-
-                if (field.fieldNumber === 10 && field.wireType === 2) {
-                    // raw frame (oneof encoding = 10)
-                    const { data: rfData, offset: newOffset } = parseLengthDelimited(videoFrameData, offset);
-                    rawFrameData = rfData;
-                    offset = newOffset;
-                } else {
-                    offset = skipField(videoFrameData, offset, field.wireType);
-                }
-            }
-
-            if (!rawFrameData) return null;
-
-            // Parse RawFrame
-            let width = 0, height = 0, compressedData = null, isKeyframe = true;
-            offset = 0;
-
-            while (offset < rawFrameData.length) {
-                const field = parseField(rawFrameData, offset);
-                if (!field) break;
-                offset = field.offset;
-
-                switch (field.fieldNumber) {
-                    case 1: // width
-                        const w = parseVarint(rawFrameData, offset);
-                        width = w.value;
-                        offset = w.offset;
-                        break;
-                    case 2: // height
-                        const h = parseVarint(rawFrameData, offset);
-                        height = h.value;
-                        offset = h.offset;
-                        break;
-                    case 3: // data (compressed BGRA)
-                        const d = parseLengthDelimited(rawFrameData, offset);
-                        compressedData = d.data;
-                        offset = d.offset;
-                        break;
-                    case 6: // is_keyframe
-                        const k = parseVarint(rawFrameData, offset);
-                        isKeyframe = k.value !== 0;
-                        offset = k.offset;
-                        break;
-                    default:
-                        offset = skipField(rawFrameData, offset, field.wireType);
-                }
-            }
-
-            return { width, height, compressedData, isKeyframe };
-        }
-
-        // ============================================================
-        // Frame Rendering
-        // ============================================================
-
-        function renderFrame(frame) {
-            if (!frame || !frame.compressedData || frame.width === 0 || frame.height === 0) {
-                return;
-            }
-
-            try {
-                // Decompress using fzstd
-                const decompressed = fzstd.decompress(frame.compressedData);
-
-                // Resize canvas if needed
-                if (canvas.width !== frame.width || canvas.height !== frame.height) {
-                    canvas.width = frame.width;
-                    canvas.height = frame.height;
-                    remoteWidth = frame.width;
-                    remoteHeight = frame.height;
-                    imageData = ctx.createImageData(frame.width, frame.height);
-                    document.getElementById('resolution').textContent = `${frame.width}x${frame.height}`;
-                }
-
-                // Convert BGRA to RGBA
-                const pixels = imageData.data;
-                for (let i = 0; i < decompressed.length; i += 4) {
-                    pixels[i] = decompressed[i + 2];     // R <- B
-                    pixels[i + 1] = decompressed[i + 1]; // G
-                    pixels[i + 2] = decompressed[i];     // B <- R
-                    pixels[i + 3] = 255;                 // A (force opaque)
-                }
-
-                // Draw to canvas
-                ctx.putImageData(imageData, 0, 0);
-
-                // Update stats
-                frameCount++;
-                fpsFrames++;
-                document.getElementById('frame-count').textContent = frameCount;
-
-                const now = Date.now();
-                if (now - lastFpsTime >= 1000) {
-                    document.getElementById('fps').textContent = fpsFrames;
-                    fpsFrames = 0;
-                    lastFpsTime = now;
-                }
-
-            } catch (e) {
-                console.error('Frame render error:', e);
-            }
-        }
-
-        // ============================================================
-        // Input Event Encoding
-        // ============================================================
-
-        function encodeVarint(value) {
-            const bytes = [];
-            while (value > 0x7f) {
-                bytes.push((value & 0x7f) | 0x80);
-                value >>>= 7;
-            }
-            bytes.push(value & 0x7f);
-            return bytes;
-        }
-
-        function encodeSignedVarint(value) {
-            // ZigZag encode
-            const zigzag = (value << 1) ^ (value >> 31);
-            return encodeVarint(zigzag >>> 0);
-        }
-
-        function encodeMouseEvent(x, y, buttons, eventType, wheelDeltaX = 0, wheelDeltaY = 0) {
-            // Build MouseEvent message
-            const mouseEvent = [];
-
-            // Field 1: x (varint)
-            mouseEvent.push(0x08); // field 1, wire type 0
-            mouseEvent.push(...encodeVarint(Math.round(x)));
-
-            // Field 2: y (varint)
-            mouseEvent.push(0x10); // field 2, wire type 0
-            mouseEvent.push(...encodeVarint(Math.round(y)));
-
-            // Field 3: buttons (embedded message)
-            if (buttons) {
-                const buttonsMsg = [];
-                if (buttons.left) { buttonsMsg.push(0x08, 0x01); } // field 1 = true
-                if (buttons.right) { buttonsMsg.push(0x10, 0x01); } // field 2 = true
-                if (buttons.middle) { buttonsMsg.push(0x18, 0x01); } // field 3 = true
-
-                if (buttonsMsg.length > 0) {
-                    mouseEvent.push(0x1a); // field 3, wire type 2
-                    mouseEvent.push(...encodeVarint(buttonsMsg.length));
-                    mouseEvent.push(...buttonsMsg);
-                }
-            }
-
-            // Field 4: wheel_delta_x (sint32)
-            if (wheelDeltaX !== 0) {
-                mouseEvent.push(0x20); // field 4, wire type 0
-                mouseEvent.push(...encodeSignedVarint(wheelDeltaX));
-            }
-
-            // Field 5: wheel_delta_y (sint32)
-            if (wheelDeltaY !== 0) {
-                mouseEvent.push(0x28); // field 5, wire type 0
-                mouseEvent.push(...encodeSignedVarint(wheelDeltaY));
-            }
-
-            // Field 6: event_type (enum)
-            mouseEvent.push(0x30); // field 6, wire type 0
-            mouseEvent.push(eventType);
-
-            // Wrap in Message with field 20
-            const message = [];
-            message.push(0xa2, 0x01); // field 20, wire type 2 (20 << 3 | 2 = 162 = 0xa2, then 0x01)
-            message.push(...encodeVarint(mouseEvent.length));
-            message.push(...mouseEvent);
-
-            return new Uint8Array(message);
-        }
-
-        function encodeKeyEvent(vkCode, down) {
-            // Build KeyEvent message
-            const keyEvent = [];
-
-            // Field 1: down (bool)
-            keyEvent.push(0x08); // field 1, wire type 0
-            keyEvent.push(down ? 0x01 : 0x00);
-
-            // Field 3: vk_code (uint32)
-            keyEvent.push(0x18); // field 3, wire type 0
-            keyEvent.push(...encodeVarint(vkCode));
-
-            // Wrap in Message with field 21
-            const message = [];
-            message.push(0xaa, 0x01); // field 21, wire type 2 (21 << 3 | 2 = 170 = 0xaa, then 0x01)
-            message.push(...encodeVarint(keyEvent.length));
-            message.push(...keyEvent);
-
-            return new Uint8Array(message);
-        }
-
-        function encodeSpecialKey(keyType) {
-            // Build SpecialKeyEvent message
-            const specialKey = [];
-            specialKey.push(0x08); // field 1, wire type 0
-            specialKey.push(keyType); // 0 = CTRL_ALT_DEL
-
-            // Wrap in Message with field 22
-            const message = [];
-            message.push(0xb2, 0x01); // field 22, wire type 2
-            message.push(...encodeVarint(specialKey.length));
-            message.push(...specialKey);
-
-            return new Uint8Array(message);
-        }
-
-        // ============================================================
-        // Mouse/Keyboard Event Handlers
-        // ============================================================
-
-        const MOUSE_MOVE = 0;
-        const MOUSE_DOWN = 1;
-        const MOUSE_UP = 2;
-        const MOUSE_WHEEL = 3;
-
-        let lastMouseX = 0;
-        let lastMouseY = 0;
-        let mouseThrottle = 0;
-
-        function getMousePosition(e) {
-            const rect = canvas.getBoundingClientRect();
-            const scaleX = remoteWidth / rect.width;
-            const scaleY = remoteHeight / rect.height;
-            return {
-                x: (e.clientX - rect.left) * scaleX,
-                y: (e.clientY - rect.top) * scaleY
-            };
-        }
-
-        function getButtons(e) {
-            return {
-                left: (e.buttons & 1) !== 0,
-                right: (e.buttons & 2) !== 0,
-                middle: (e.buttons & 4) !== 0
-            };
-        }
-
-        canvas.addEventListener('mousemove', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            if (remoteWidth === 0) return;
-
-            // Throttle to ~60 events/sec
-            const now = Date.now();
-            if (now - mouseThrottle < 16) return;
-            mouseThrottle = now;
-
-            const pos = getMousePosition(e);
-            const msg = encodeMouseEvent(pos.x, pos.y, getButtons(e), MOUSE_MOVE);
-            ws.send(msg);
-        });
-
-        canvas.addEventListener('mousedown', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            e.preventDefault();
-            canvas.focus();
-
-            const pos = getMousePosition(e);
-            const buttons = { left: e.button === 0, right: e.button === 2, middle: e.button === 1 };
-            const msg = encodeMouseEvent(pos.x, pos.y, buttons, MOUSE_DOWN);
-            ws.send(msg);
-        });
-
-        canvas.addEventListener('mouseup', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            e.preventDefault();
-
-            const pos = getMousePosition(e);
-            const buttons = { left: e.button === 0, right: e.button === 2, middle: e.button === 1 };
-            const msg = encodeMouseEvent(pos.x, pos.y, buttons, MOUSE_UP);
-            ws.send(msg);
-        });
-
-        canvas.addEventListener('wheel', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            e.preventDefault();
-
-            const pos = getMousePosition(e);
-            const msg = encodeMouseEvent(pos.x, pos.y, null, MOUSE_WHEEL,
-                Math.round(-e.deltaX), Math.round(-e.deltaY));
-            ws.send(msg);
-        }, { passive: false });
-
-        canvas.addEventListener('contextmenu', (e) => e.preventDefault());
-
-        // Keyboard events
-        canvas.setAttribute('tabindex', '0');
-
-        canvas.addEventListener('keydown', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            e.preventDefault();
-
-            // Use keyCode for virtual key mapping
-            const vkCode = e.keyCode;
-            const msg = encodeKeyEvent(vkCode, true);
-            ws.send(msg);
-        });
-
-        canvas.addEventListener('keyup', (e) => {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            e.preventDefault();
-
-            const vkCode = e.keyCode;
-            const msg = encodeKeyEvent(vkCode, false);
-            ws.send(msg);
-        });
-
-        // Focus canvas on click
-        canvas.addEventListener('click', () => canvas.focus());
-
-        // ============================================================
-        // WebSocket Connection
-        // ============================================================
-
-        function connect() {
-            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const token = localStorage.getItem('authToken');
-            if (!token) {
-                updateStatus('error', 'Not authenticated');
-                document.getElementById('overlay-text').textContent = 'Not logged in. Please log in first.';
-                return;
-            }
-            const wsUrl = `${protocol}//${window.location.host}/ws/viewer?session_id=${sessionId}&viewer_name=${encodeURIComponent(viewerName)}&token=${encodeURIComponent(token)}`;
-
-            console.log('Connecting to:', wsUrl);
-            updateStatus('connecting', 'Connecting...');
-
-            ws = new WebSocket(wsUrl);
-            ws.binaryType = 'arraybuffer';
-
-            ws.onopen = () => {
-                console.log('WebSocket connected');
-                updateStatus('connected', 'Connected');
-                document.getElementById('overlay').classList.add('hidden');
-                canvas.focus();
-            };
-
-            ws.onmessage = (event) => {
-                if (event.data instanceof ArrayBuffer) {
-                    const frame = parseVideoFrame(event.data);
-                    if (frame) {
-                        renderFrame(frame);
-                    }
-                }
-            };
-
-            ws.onclose = (event) => {
-                console.log('WebSocket closed:', event.code, event.reason);
-                updateStatus('error', 'Disconnected');
-                document.getElementById('overlay').classList.remove('hidden');
-                document.getElementById('overlay-text').textContent = 'Connection closed. Reconnecting...';
-
-                // Reconnect after 2 seconds
-                setTimeout(connect, 2000);
-            };
-
-            ws.onerror = (error) => {
-                console.error('WebSocket error:', error);
-                updateStatus('error', 'Connection error');
-            };
-        }
-
-        function updateStatus(state, text) {
-            const status = document.getElementById('status');
-            status.className = 'status ' + state;
-            status.textContent = text;
-        }
-
-        // ============================================================
-        // Toolbar Actions
-        // ============================================================
-
-        function disconnect() {
-            if (ws) {
-                ws.close();
-                ws = null;
-            }
-            window.close();
-        }
-
-        function toggleFullscreen() {
-            if (!document.fullscreenElement) {
-                document.documentElement.requestFullscreen();
-            } else {
-                document.exitFullscreen();
-            }
-        }
-
-        function sendCtrlAltDel() {
-            if (!ws || ws.readyState !== WebSocket.OPEN) return;
-            const msg = encodeSpecialKey(0); // CTRL_ALT_DEL = 0
-            ws.send(msg);
-        }
-
-        // ============================================================
-        // Initialization
-        // ============================================================
-
-        // Set window title
-        document.title = `GuruConnect - Session ${sessionId.substring(0, 8)}`;
-
-        // Connect on load
-        connect();
-
-        // Handle window close
-        window.addEventListener('beforeunload', () => {
-            if (ws) ws.close();
-        });
-    </script>
-</body>
-</html>