From a669239a2a17c24f3b7148dbe291fc84997c9c67 Mon Sep 17 00:00:00 2001
From: zgaetano <zgaetano@wilddragon.net>
Date: Tue, 31 Mar 2026 15:29:54 -0400
Subject: [PATCH] Add meshcentral-mobile.html

---
 meshcentral-mobile.html | 1184 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 1184 insertions(+)
 create mode 100644 meshcentral-mobile.html
diff --git a/meshcentral-mobile.html b/meshcentral-mobile.html
new file mode 100644
index 0000000..5f959c4
--- /dev/null
+++ b/meshcentral-mobile.html
@@ -0,0 +1,1184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="MeshCtrl">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#0f172a">
+<meta name="color-scheme" content="dark">
+<!-- iOS Home Screen Icons (inline SVG-based) -->
+<link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><rect width='180' height='180' rx='40' fill='%230f172a'/><rect x='30' y='30' width='120' height='120' rx='24' stroke='%2338bdf8' stroke-width='6' fill='none'/><circle cx='90' cy='78' r='18' stroke='%2338bdf8' stroke-width='5' fill='none'/><path d='M60 132c0-16.569 13.431-30 30-30s30 13.431 30 30' stroke='%2338bdf8' stroke-width='5' fill='none' stroke-linecap='round'/></svg>">
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%230f172a'/><rect x='5' y='5' width='22' height='22' rx='5' stroke='%2338bdf8' stroke-width='2' fill='none'/><circle cx='16' cy='13' r='4' stroke='%2338bdf8' stroke-width='1.5' fill='none'/><path d='M10 24c0-3.314 2.686-6 6-6s6 2.686 6 6' stroke='%2338bdf8' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>">
+<!-- PWA Manifest (inline) -->
+<link rel="manifest" href="data:application/manifest+json,%7B%22name%22%3A%22MeshCtrl%20Mobile%22%2C%22short_name%22%3A%22MeshCtrl%22%2C%22start_url%22%3A%22.%22%2C%22display%22%3A%22standalone%22%2C%22background_color%22%3A%22%230f172a%22%2C%22theme_color%22%3A%22%230f172a%22%2C%22description%22%3A%22Mobile%20client%20for%20MeshCentral%22%2C%22icons%22%3A%5B%7B%22src%22%3A%22data%3Aimage%2Fsvg%2Bxml%2C%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20512%20512'%3E%3Crect%20width%3D'512'%20height%3D'512'%20rx%3D'100'%20fill%3D'%25230f172a'%2F%3E%3Crect%20x%3D'80'%20y%3D'80'%20width%3D'352'%20height%3D'352'%20rx%3D'60'%20stroke%3D'%252338bdf8'%20stroke-width%3D'16'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'256'%20cy%3D'220'%20r%3D'50'%20stroke%3D'%252338bdf8'%20stroke-width%3D'14'%20fill%3D'none'%2F%3E%3Cpath%20d%3D'M170%20380c0-47.5%2038.5-86%2086-86s86%2038.5%2086%2086'%20stroke%3D'%252338bdf8'%20stroke-width%3D'14'%20fill%3D'none'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E%22%2C%22sizes%22%3A%22512x512%22%2C%22type%22%3A%22image%2Fsvg%2Bxml%22%7D%5D%7D">
+<title>MeshCtrl</title>
+<style>
+/* ========== RESET & BASE ========== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #0f172a; --bg-card: #1e293b; --bg-input: #334155;
+  --bg-hover: #334155; --bg-active: #475569;
+  --text: #f1f5f9; --text-dim: #94a3b8; --text-muted: #64748b;
+  --accent: #38bdf8; --accent-dim: #0ea5e9; --accent-bg: rgba(56,189,248,0.1);
+  --green: #4ade80; --green-bg: rgba(74,222,128,0.12);
+  --red: #f87171; --red-bg: rgba(248,113,113,0.12);
+  --orange: #fb923c; --orange-bg: rgba(251,146,60,0.12);
+  --yellow: #fbbf24; --yellow-bg: rgba(251,191,36,0.12);
+  --border: #334155; --radius: 10px;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --nav-h: 56px;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+}
+html, body { height: 100%; background: var(--bg); color: var(--text); overflow: hidden; -webkit-text-size-adjust: 100%; }
+body { display: flex; flex-direction: column; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
+input, button, textarea, select { font: inherit; color: inherit; }
+a { color: var(--accent); text-decoration: none; }
+
+/* ========== SCROLLABLE ========== */
+.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
+
+/* ========== HEADER ========== */
+.header {
+  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  background: var(--bg); border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 100;
+}
+.header h1 { font-size: 18px; font-weight: 700; flex: 1; }
+.header-btn {
+  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
+}
+.header-btn:active { background: var(--bg-hover); }
+.header-btn svg { width: 18px; height: 18px; stroke: var(--text-dim); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ========== CONNECTION DOT ========== */
+.conn-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; }
+.conn-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.conn-dot.offline { background: var(--red); }
+.conn-dot.connecting { background: var(--yellow); animation: pulse 1.5s infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* ========== BOTTOM NAV ========== */
+.nav {
+  display: flex; background: var(--bg-card); border-top: 1px solid var(--border);
+  padding-bottom: var(--safe-bottom); height: calc(var(--nav-h) + var(--safe-bottom));
+}
+.nav-item {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 2px; padding: 6px 0; cursor: pointer; color: var(--text-muted);
+  transition: color 0.15s; -webkit-tap-highlight-color: transparent; border: none; background: none;
+}
+.nav-item.active { color: var(--accent); }
+.nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.nav-item span { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; }
+
+/* ========== LOGIN SCREEN ========== */
+.login-screen {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
+}
+.login-logo { width: 64px; height: 64px; margin-bottom: 16px; }
+.login-logo svg { width: 100%; height: 100%; }
+.login-title { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+.login-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 32px; }
+.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
+.field { display: flex; flex-direction: column; gap: 4px; }
+.field label { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
+.field input {
+  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px 14px; font-size: 16px; outline: none; transition: border-color 0.15s;
+}
+.field input:focus { border-color: var(--accent); }
+.field input::placeholder { color: var(--text-muted); }
+.btn {
+  padding: 14px; border-radius: var(--radius); font-size: 15px; font-weight: 600;
+  border: none; cursor: pointer; transition: all 0.15s; text-align: center;
+}
+.btn-primary { background: var(--accent); color: #0f172a; }
+.btn-primary:active { background: var(--accent-dim); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
+.btn-secondary:active { background: var(--bg-hover); }
+.btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid rgba(248,113,113,0.3); }
+.btn-danger:active { opacity: 0.7; }
+.login-error { background: var(--red-bg); color: var(--red); padding: 10px 12px; border-radius: var(--radius); font-size: 13px; text-align: center; }
+.login-saved { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-bottom: 16px; }
+.saved-server {
+  display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
+}
+.saved-server:active { background: var(--bg-hover); }
+.saved-server .info { flex: 1; }
+.saved-server .info .url { font-size: 14px; font-weight: 600; }
+.saved-server .info .user { font-size: 12px; color: var(--text-dim); }
+.saved-server .remove-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: none; background: var(--red-bg); cursor: pointer; }
+.saved-server .remove-btn svg { width: 14px; height: 14px; stroke: var(--red); fill: none; stroke-width: 2; }
+
+/* ========== DASHBOARD ========== */
+.dashboard { padding: 16px; }
+.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
+.stat-card {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 14px; text-align: center;
+}
+.stat-val { font-size: 28px; font-weight: 700; line-height: 1.1; }
+.stat-val.green { color: var(--green); }
+.stat-val.red { color: var(--red); }
+.stat-label { font-size: 11px; color: var(--text-dim); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
+.section-title { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
+
+/* ========== SEARCH BAR ========== */
+.search-bar {
+  display: flex; align-items: center; gap: 8px; background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: var(--radius); padding: 0 12px; margin-bottom: 12px;
+}
+.search-bar svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
+.search-bar input { flex: 1; background: none; border: none; padding: 10px 0; font-size: 15px; outline: none; }
+.search-bar input::placeholder { color: var(--text-muted); }
+
+/* ========== DEVICE LIST ========== */
+.device-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
+.device-card {
+  display: flex; align-items: center; gap: 12px; padding: 14px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.1s;
+}
+.device-card:active { background: var(--bg-hover); }
+.device-icon {
+  width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.device-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
+.device-icon.windows { background: var(--accent-bg); color: var(--accent); }
+.device-icon.linux { background: var(--orange-bg); color: var(--orange); }
+.device-icon.mac { background: var(--green-bg); color: var(--green); }
+.device-icon.other { background: rgba(148,163,184,0.12); color: var(--text-dim); }
+.device-info { flex: 1; min-width: 0; }
+.device-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.device-meta { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.device-status { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.status-badge {
+  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
+}
+.status-badge.online { background: var(--green-bg); color: var(--green); }
+.status-badge.offline { background: rgba(100,116,139,0.2); color: var(--text-muted); }
+
+/* ========== DEVICE DETAIL ========== */
+.detail-screen { display: flex; flex-direction: column; height: 100%; }
+.detail-header {
+  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50;
+}
+.back-btn {
+  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+  background: none; border: none; cursor: pointer;
+}
+.back-btn svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.detail-title { flex: 1; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.detail-body { padding: 16px; }
+.detail-status-banner {
+  display: flex; align-items: center; gap: 10px; padding: 14px;
+  border-radius: var(--radius); margin-bottom: 16px;
+}
+.detail-status-banner.online { background: var(--green-bg); border: 1px solid rgba(74,222,128,0.25); }
+.detail-status-banner.offline { background: rgba(100,116,139,0.12); border: 1px solid var(--border); }
+.detail-status-banner .status-text { font-size: 14px; font-weight: 600; }
+.detail-status-banner.online .status-text { color: var(--green); }
+.detail-status-banner.offline .status-text { color: var(--text-muted); }
+.detail-status-banner .status-sub { font-size: 12px; color: var(--text-dim); }
+
+.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
+.info-item {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
+}
+.info-item.full { grid-column: 1 / -1; }
+.info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+.info-value { font-size: 14px; font-weight: 500; word-break: break-all; }
+
+/* ========== POWER ACTIONS ========== */
+.actions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
+.action-btn {
+  display: flex; align-items: center; gap: 10px; padding: 14px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.1s;
+}
+.action-btn:active { background: var(--bg-hover); transform: scale(0.98); }
+.action-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+.action-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.action-btn .action-label { font-size: 13px; font-weight: 600; }
+.action-btn.danger { border-color: rgba(248,113,113,0.3); }
+.action-btn.danger svg { stroke: var(--red); }
+
+/* ========== TERMINAL ========== */
+.terminal-screen { display: flex; flex-direction: column; height: 100%; }
+.terminal-toolbar {
+  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
+  background: var(--bg); border-bottom: 1px solid var(--border);
+}
+.terminal-select {
+  flex: 1; background: var(--bg-input); border: 1px solid var(--border);
+  border-radius: 6px; padding: 8px 10px; font-size: 13px; color: var(--text);
+  appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat; background-position: right 10px center;
+}
+.terminal-container {
+  flex: 1; background: #0c0c0c; font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
+  font-size: 13px; line-height: 1.4; padding: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch;
+  white-space: pre-wrap; word-break: break-all; color: #d4d4d4;
+}
+.terminal-input-row {
+  display: flex; gap: 8px; padding: 8px 12px; background: #0c0c0c; border-top: 1px solid #333;
+}
+.terminal-input-row input {
+  flex: 1; background: #1a1a1a; border: 1px solid #444; border-radius: 6px;
+  padding: 10px 12px; font-family: monospace; font-size: 14px; color: #d4d4d4; outline: none;
+}
+.terminal-input-row input:focus { border-color: var(--accent); }
+.terminal-input-row button {
+  padding: 10px 16px; background: var(--accent); color: #0f172a; border: none;
+  border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer;
+}
+
+/* ========== GROUPS VIEW ========== */
+.group-card {
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  margin-bottom: 10px; overflow: hidden;
+}
+.group-header {
+  display: flex; align-items: center; gap: 10px; padding: 14px;
+  cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.group-header:active { background: var(--bg-hover); }
+.group-header svg { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 2; transition: transform 0.2s; }
+.group-header.expanded svg { transform: rotate(90deg); }
+.group-name { flex: 1; font-size: 15px; font-weight: 600; }
+.group-count { font-size: 12px; color: var(--text-dim); background: var(--bg-input); padding: 2px 8px; border-radius: 10px; }
+.group-devices { border-top: 1px solid var(--border); }
+
+/* ========== SETTINGS ========== */
+.settings-section { margin-bottom: 24px; }
+.settings-item {
+  display: flex; align-items: center; gap: 12px; padding: 14px;
+  background: var(--bg-card); border: 1px solid var(--border);
+}
+.settings-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
+.settings-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
+.settings-item:only-child { border-radius: var(--radius); }
+.settings-item + .settings-item { border-top: none; }
+.settings-item svg { width: 20px; height: 20px; stroke: var(--text-dim); fill: none; stroke-width: 2; flex-shrink: 0; }
+.settings-item .label { flex: 1; font-size: 15px; }
+.settings-item .val { font-size: 13px; color: var(--text-dim); }
+
+/* ========== TOAST ========== */
+.toast {
+  position: fixed; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); left: 16px; right: 16px;
+  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 12px 16px; font-size: 14px; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+  transform: translateY(120%); transition: transform 0.3s ease;
+}
+.toast.show { transform: translateY(0); }
+.toast.success { border-color: rgba(74,222,128,0.4); }
+.toast.error { border-color: rgba(248,113,113,0.4); }
+
+/* ========== CONFIRM DIALOG ========== */
+.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 300; display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
+.confirm-dialog { background: var(--bg-card); border-radius: 16px; width: 100%; max-width: 400px; padding: 24px; margin-bottom: var(--safe-bottom); }
+.confirm-dialog h3 { font-size: 17px; margin-bottom: 8px; }
+.confirm-dialog p { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
+.confirm-dialog .actions { display: flex; gap: 10px; }
+.confirm-dialog .actions .btn { flex: 1; }
+
+/* ========== EMPTY STATE ========== */
+.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
+.empty-state svg { width: 48px; height: 48px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; margin-bottom: 16px; }
+.empty-state h3 { font-size: 16px; margin-bottom: 4px; }
+.empty-state p { font-size: 13px; color: var(--text-dim); }
+
+/* ========== LOADING ========== */
+.spinner { width: 24px; height: 24px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.loading-overlay { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
+.loading-overlay p { font-size: 14px; color: var(--text-dim); }
+
+/* ========== UTILITIES ========== */
+.hidden { display: none !important; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-1 { flex: 1; }
+</style>
+</head>
+<body>
+<!-- ========== APP ROOT ========== -->
+<div id="app" class="flex-col" style="height:100%"></div>
+
+<!-- ========== TOAST ========== -->
+<div id="toast" class="toast"></div>
+
+<!-- ========== CONFIRM DIALOG ========== -->
+<div id="confirm-overlay" class="overlay hidden" onclick="if(event.target===this)closeConfirm()">
+  <div class="confirm-dialog">
+    <h3 id="confirm-title"></h3>
+    <p id="confirm-msg"></p>
+    <div class="actions">
+      <button class="btn btn-secondary" onclick="closeConfirm()">Cancel</button>
+      <button class="btn btn-danger" id="confirm-action" onclick="confirmAction()">Confirm</button>
+    </div>
+  </div>
+</div>
+
+<script>
+// ============================================================
+//  MeshCtrl Mobile PWA — MeshCentral WebSocket Client
+// ============================================================
+
+// ---------- State ----------
+const S = {
+  view: 'login',       // login | main
+  tab: 'dashboard',    // dashboard | devices | terminal | settings
+  ws: null,
+  connected: false,
+  connecting: false,
+  serverUrl: 'https://mesh.wilddragon.net',
+  username: '',
+  password: '',
+  loginToken: '',
+  authMode: 'credentials', // credentials | token
+  devices: [],
+  meshes: {},
+  selectedDevice: null,
+  searchQuery: '',
+  expandedGroups: {},
+  terminalNodeId: null,
+  terminalOutput: '',
+  terminalWs: null,
+};
+
+// ---------- Saved servers (in-memory, persisted via IndexedDB if available) ----------
+let savedServers = [];
+try {
+  const raw = window.indexedDB ? null : null; // We'll use a simpler approach
+} catch(e) {}
+
+function loadSaved() {
+  try { savedServers = JSON.parse(localStorage.getItem('mc_servers') || '[]'); } catch(e) { savedServers = []; }
+}
+function saveSaved() {
+  try { localStorage.setItem('mc_servers', JSON.stringify(savedServers)); } catch(e) {}
+}
+loadSaved();
+
+// ---------- Icons (SVG strings) ----------
+const IC = {
+  monitor: '<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>',
+  server: '<svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="6" cy="18" r="1" fill="currentColor" stroke="none"/></svg>',
+  terminal: '<svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>',
+  settings: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>',
+  grid: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>',
+  list: '<svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/></svg>',
+  search: '<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
+  chevLeft: '<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>',
+  chevRight: '<svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg>',
+  power: '<svg viewBox="0 0 24 24"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>',
+  refresh: '<svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>',
+  moon: '<svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>',
+  wifi: '<svg viewBox="0 0 24 24"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg>',
+  wifiOff: '<svg viewBox="0 0 24 24"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.56 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg>',
+  cpu: '<svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>',
+  hdd: '<svg viewBox="0 0 24 24"><line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"/><circle cx="6" cy="16" r="1" fill="currentColor" stroke="none"/><circle cx="10" cy="16" r="1" fill="currentColor" stroke="none"/></svg>',
+  zap: '<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
+  wake: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
+  sleep: '<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
+  x: '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+  logout: '<svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>',
+  folder: '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>',
+  shield: '<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
+  key: '<svg viewBox="0 0 24 24"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>',
+};
+
+// ---------- Helpers ----------
+const $ = (id) => document.getElementById(id);
+function toast(msg, type = 'info') {
+  const t = $('toast');
+  t.textContent = msg;
+  t.className = 'toast show ' + type;
+  clearTimeout(t._t);
+  t._t = setTimeout(() => t.className = 'toast', 3000);
+}
+
+let _confirmCb = null;
+function showConfirm(title, msg, btnText, cb) {
+  $('confirm-title').textContent = title;
+  $('confirm-msg').textContent = msg;
+  $('confirm-action').textContent = btnText;
+  _confirmCb = cb;
+  $('confirm-overlay').classList.remove('hidden');
+}
+function closeConfirm() { $('confirm-overlay').classList.add('hidden'); _confirmCb = null; }
+function confirmAction() { if (_confirmCb) _confirmCb(); closeConfirm(); }
+
+function getOsClass(device) {
+  if (!device || !device.osdesc) return 'other';
+  const os = device.osdesc.toLowerCase();
+  if (os.includes('windows')) return 'windows';
+  if (os.includes('linux') || os.includes('ubuntu') || os.includes('debian') || os.includes('centos') || os.includes('fedora')) return 'linux';
+  if (os.includes('mac') || os.includes('darwin') || os.includes('apple')) return 'mac';
+  return 'other';
+}
+
+function getOsIcon(device) {
+  const cls = getOsClass(device);
+  if (cls === 'windows' || cls === 'mac') return IC.monitor;
+  if (cls === 'linux') return IC.server;
+  return IC.cpu;
+}
+
+function isOnline(device) {
+  return device && (device.conn & 1) !== 0;
+}
+
+function lastSeenText(device) {
+  if (!device.lastconnect) return 'Never connected';
+  const d = new Date(device.lastconnect * 1000);
+  const now = new Date();
+  const diff = (now - d) / 1000;
+  if (diff < 60) return 'Just now';
+  if (diff < 3600) return Math.floor(diff/60) + 'm ago';
+  if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
+  return Math.floor(diff/86400) + 'd ago';
+}
+
+// ---------- WebSocket ----------
+function wsConnect() {
+  if (S.ws) { try { S.ws.close(); } catch(e) {} }
+  S.connecting = true;
+  S.connected = false;
+  render();
+
+  let url = S.serverUrl.replace(/\/$/, '');
+  url = url.replace(/^http/, 'ws') + '/control.ashx';
+
+  if (S.authMode === 'credentials' && S.username && S.password) {
+    url += '?user=' + encodeURIComponent(S.username) + '&pass=' + encodeURIComponent(S.password);
+  } else if (S.authMode === 'token' && S.loginToken) {
+    url += '?token=' + encodeURIComponent(S.loginToken);
+  }
+
+  try {
+    S.ws = new WebSocket(url);
+  } catch(e) {
+    S.connecting = false;
+    toast('Failed to connect: ' + e.message, 'error');
+    render();
+    return;
+  }
+
+  S.ws.onopen = () => {
+    S.connecting = false;
+    S.connected = true;
+    S.view = 'main';
+    // Save server
+    const existing = savedServers.find(s => s.url === S.serverUrl && s.username === S.username);
+    if (!existing) {
+      savedServers.push({ url: S.serverUrl, username: S.username || '(token)' });
+      saveSaved();
+    }
+    toast('Connected to MeshCentral', 'success');
+    // Request data
+    wsSend({ action: 'meshes' });
+    wsSend({ action: 'nodes' });
+    render();
+  };
+
+  S.ws.onmessage = (ev) => {
+    try {
+      const msg = JSON.parse(ev.data);
+      handleMsg(msg);
+    } catch(e) {}
+  };
+
+  S.ws.onerror = () => {
+    S.connecting = false;
+    toast('WebSocket error', 'error');
+    render();
+  };
+
+  S.ws.onclose = (ev) => {
+    S.connected = false;
+    S.connecting = false;
+    if (S.view === 'main') {
+      toast('Disconnected from server', 'error');
+    } else if (ev.code === 1000 || ev.reason) {
+      toast('Connection closed: ' + (ev.reason || 'Authentication failed'), 'error');
+    }
+    render();
+  };
+}
+
+function wsSend(obj) {
+  if (S.ws && S.ws.readyState === WebSocket.OPEN) {
+    S.ws.send(JSON.stringify(obj));
+  }
+}
+
+function handleMsg(msg) {
+  if (!msg.action) {
+    // Could be server info or event
+    if (msg.meshes) {
+      S.meshes = {};
+      for (const m of msg.meshes) {
+        S.meshes[m._id] = m;
+      }
+      render();
+    }
+    return;
+  }
+
+  switch(msg.action) {
+    case 'meshes':
+      if (msg.meshes) {
+        S.meshes = {};
+        for (const m of msg.meshes) {
+          S.meshes[m._id] = m;
+        }
+      }
+      render();
+      break;
+
+    case 'nodes':
+      if (msg.nodes) {
+        S.devices = [];
+        for (const meshId in msg.nodes) {
+          for (const node of msg.nodes[meshId]) {
+            node._meshId = meshId;
+            S.devices.push(node);
+          }
+        }
+        S.devices.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+      }
+      render();
+      break;
+
+    case 'changenode':
+      if (msg.node) {
+        const idx = S.devices.findIndex(d => d._id === msg.node._id);
+        if (idx >= 0) {
+          Object.assign(S.devices[idx], msg.node);
+        } else {
+          S.devices.push(msg.node);
+        }
+        render();
+      }
+      break;
+
+    case 'nodeconnect':
+      if (msg.nodeid) {
+        const dev = S.devices.find(d => d._id === msg.nodeid);
+        if (dev) {
+          if (msg.conn !== undefined) dev.conn = msg.conn;
+          render();
+        }
+      }
+      break;
+
+    case 'event':
+      // Various events
+      if (msg.event && msg.event.nodeid) {
+        const dev = S.devices.find(d => d._id === msg.event.nodeid);
+        if (dev && msg.event.conn !== undefined) {
+          dev.conn = msg.event.conn;
+          render();
+        }
+      }
+      break;
+
+    case 'close':
+      toast(msg.msg || 'Connection closed by server', 'error');
+      break;
+
+    case 'msg':
+      if (msg.type === 'console' && msg.value) {
+        S.terminalOutput += msg.value;
+        render();
+      }
+      break;
+  }
+}
+
+function disconnect() {
+  if (S.ws) { try { S.ws.close(); } catch(e) {} S.ws = null; }
+  if (S.terminalWs) { try { S.terminalWs.close(); } catch(e) {} S.terminalWs = null; }
+  S.connected = false;
+  S.connecting = false;
+  S.devices = [];
+  S.meshes = {};
+  S.selectedDevice = null;
+  S.view = 'login';
+  S.tab = 'dashboard';
+  render();
+}
+
+// ---------- Device Power Actions ----------
+function devicePower(nodeId, powerAction) {
+  wsSend({ action: 'poweraction', nodeids: [nodeId], actiontype: powerAction });
+  const labels = { 2: 'Shutdown', 3: 'Reboot', 4: 'Sleep', 100: 'Wake-on-LAN' };
+  toast((labels[powerAction] || 'Power') + ' command sent', 'success');
+}
+
+function sendConsoleCmd(nodeId, cmd) {
+  wsSend({ action: 'msg', type: 'console', nodeid: nodeId, value: cmd });
+}
+
+// ---------- Render Engine ----------
+function render() {
+  const app = $('app');
+  if (S.view === 'login') {
+    app.innerHTML = renderLogin();
+  } else {
+    if (S.selectedDevice) {
+      app.innerHTML = renderDeviceDetail();
+    } else {
+      app.innerHTML = renderMain();
+    }
+  }
+  bindEvents();
+}
+
+function renderLogin() {
+  const savedHtml = savedServers.map((s, i) => `
+    <div class="saved-server" data-saved="${i}">
+      <div class="info">
+        <div class="url">${escHtml(s.url.replace(/^https?:\/\//, ''))}</div>
+        <div class="user">${escHtml(s.username)}</div>
+      </div>
+      <button class="remove-btn" data-remove="${i}" onclick="event.stopPropagation(); removeSaved(${i})">${IC.x}</button>
+    </div>
+  `).join('');
+
+  return `
+    <div class="login-screen">
+      <div class="login-logo">
+        <svg viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="48" height="48" rx="12" stroke="${'var(--accent)'}" stroke-width="3"/><circle cx="32" cy="28" r="8" stroke="var(--accent)" stroke-width="2.5"/><path d="M20 48c0-6.627 5.373-12 12-12s12 5.373 12 12" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"/></svg>
+      </div>
+      <div class="login-title">MeshCtrl</div>
+      <div class="login-sub">Mobile client for MeshCentral</div>
+
+      ${savedServers.length > 0 ? `
+        <div class="section-title" style="width:100%;max-width:360px;">Recent Servers</div>
+        <div class="login-saved">${savedHtml}</div>
+        <div class="section-title" style="width:100%;max-width:360px;margin-top:8px;">New Connection</div>
+      ` : ''}
+
+      <div class="login-form" id="login-form">
+        <div class="field">
+          <label>Server URL</label>
+          <input id="inp-url" type="url" placeholder="https://mesh.example.com" value="${escHtml(S.serverUrl)}" autocapitalize="none" autocorrect="off">
+        </div>
+
+        <div style="display:flex;gap:8px;margin-bottom:4px;">
+          <button class="btn btn-secondary" style="flex:1;font-size:13px;padding:8px;${S.authMode==='credentials'?'background:var(--accent-bg);border-color:var(--accent);color:var(--accent)':''}" onclick="S.authMode='credentials';render()">Credentials</button>
+          <button class="btn btn-secondary" style="flex:1;font-size:13px;padding:8px;${S.authMode==='token'?'background:var(--accent-bg);border-color:var(--accent);color:var(--accent)':''}" onclick="S.authMode='token';render()">Login Token</button>
+        </div>
+
+        ${S.authMode === 'credentials' ? `
+          <div class="field">
+            <label>Username</label>
+            <input id="inp-user" type="text" placeholder="admin" value="${escHtml(S.username)}" autocapitalize="none" autocorrect="off">
+          </div>
+          <div class="field">
+            <label>Password</label>
+            <input id="inp-pass" type="password" placeholder="••••••••" value="${escHtml(S.password)}">
+          </div>
+        ` : `
+          <div class="field">
+            <label>Login Token</label>
+            <input id="inp-token" type="text" placeholder="Paste your login token" value="${escHtml(S.loginToken)}" autocapitalize="none" autocorrect="off">
+          </div>
+        `}
+
+        <button class="btn btn-primary" id="btn-connect" ${S.connecting ? 'disabled' : ''}>
+          ${S.connecting ? '<div class="spinner" style="width:18px;height:18px;margin:0 auto;border-width:2px;"></div>' : 'Connect'}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+function renderMain() {
+  const onlineCount = S.devices.filter(d => isOnline(d)).length;
+  const offlineCount = S.devices.length - onlineCount;
+
+  return `
+    <div class="header">
+      <span class="conn-dot ${S.connected ? 'online' : S.connecting ? 'connecting' : 'offline'}"></span>
+      <h1>MeshCtrl</h1>
+      <button class="header-btn" onclick="refreshDevices()" title="Refresh">${IC.refresh}</button>
+    </div>
+    <div class="scroll flex-1" id="main-scroll">
+      ${S.tab === 'dashboard' ? renderDashboard(onlineCount, offlineCount) : ''}
+      ${S.tab === 'devices' ? renderDevices() : ''}
+      ${S.tab === 'terminal' ? renderTerminal() : ''}
+      ${S.tab === 'settings' ? renderSettings() : ''}
+    </div>
+    <nav class="nav">
+      <button class="nav-item ${S.tab==='dashboard'?'active':''}" onclick="switchTab('dashboard')">
+        ${IC.grid}<span>Dashboard</span>
+      </button>
+      <button class="nav-item ${S.tab==='devices'?'active':''}" onclick="switchTab('devices')">
+        ${IC.monitor}<span>Devices</span>
+      </button>
+      <button class="nav-item ${S.tab==='terminal'?'active':''}" onclick="switchTab('terminal')">
+        ${IC.terminal}<span>Terminal</span>
+      </button>
+      <button class="nav-item ${S.tab==='settings'?'active':''}" onclick="switchTab('settings')">
+        ${IC.settings}<span>Settings</span>
+      </button>
+    </nav>
+  `;
+}
+
+function renderDashboard(onlineCount, offlineCount) {
+  const recentOnline = S.devices.filter(d => isOnline(d)).slice(0, 5);
+  const recentOffline = S.devices.filter(d => !isOnline(d)).slice(0, 3);
+
+  return `
+    <div class="dashboard">
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-val">${S.devices.length}</div>
+          <div class="stat-label">Total</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-val green">${onlineCount}</div>
+          <div class="stat-label">Online</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-val red">${offlineCount}</div>
+          <div class="stat-label">Offline</div>
+        </div>
+      </div>
+
+      ${Object.keys(S.meshes).length > 0 ? `
+        <div class="section-title">Device Groups</div>
+        ${Object.values(S.meshes).map(mesh => {
+          const meshDevices = S.devices.filter(d => d.meshid === mesh._id);
+          const meshOnline = meshDevices.filter(d => isOnline(d)).length;
+          return `
+            <div class="group-card">
+              <div class="group-header ${S.expandedGroups[mesh._id]?'expanded':''}" onclick="toggleGroup('${mesh._id}')">
+                ${IC.chevRight}
+                <div class="group-name">${escHtml(mesh.name || 'Unnamed Group')}</div>
+                <div class="group-count">${meshOnline}/${meshDevices.length}</div>
+              </div>
+              ${S.expandedGroups[mesh._id] ? `
+                <div class="group-devices">
+                  ${meshDevices.length === 0 ? '<div style="padding:12px;font-size:13px;color:var(--text-muted);">No devices in this group</div>' :
+                    meshDevices.map(d => renderDeviceRow(d)).join('')}
+                </div>
+              ` : ''}
+            </div>
+          `;
+        }).join('')}
+      ` : ''}
+
+      ${recentOnline.length > 0 ? `
+        <div class="section-title" style="margin-top:16px;">Online Devices</div>
+        <div class="device-list">
+          ${recentOnline.map(d => renderDeviceRow(d)).join('')}
+          ${onlineCount > 5 ? `<div style="text-align:center;padding:8px;font-size:13px;color:var(--text-dim);">+ ${onlineCount - 5} more online</div>` : ''}
+        </div>
+      ` : ''}
+
+      ${S.devices.length === 0 && !S.connecting ? `
+        <div class="empty-state">
+          ${IC.wifiOff}
+          <h3>No devices found</h3>
+          <p>Devices will appear here once agents connect to your MeshCentral server.</p>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+function renderDeviceRow(device) {
+  const online = isOnline(device);
+  const osClass = getOsClass(device);
+  return `
+    <div class="device-card" onclick="selectDevice('${device._id}')">
+      <div class="device-icon ${osClass}">${getOsIcon(device)}</div>
+      <div class="device-info">
+        <div class="device-name">${escHtml(device.name || 'Unknown')}</div>
+        <div class="device-meta">${escHtml(device.osdesc || 'Unknown OS')}</div>
+      </div>
+      <div class="device-status">
+        <span class="status-badge ${online ? 'online' : 'offline'}">${online ? 'Online' : 'Offline'}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderDevices() {
+  const q = S.searchQuery.toLowerCase();
+  let filtered = S.devices;
+  if (q) {
+    filtered = S.devices.filter(d =>
+      (d.name || '').toLowerCase().includes(q) ||
+      (d.osdesc || '').toLowerCase().includes(q) ||
+      (d.host || '').toLowerCase().includes(q)
+    );
+  }
+
+  // Sort: online first, then alphabetical
+  filtered.sort((a, b) => {
+    const aOn = isOnline(a) ? 0 : 1;
+    const bOn = isOnline(b) ? 0 : 1;
+    if (aOn !== bOn) return aOn - bOn;
+    return (a.name || '').localeCompare(b.name || '');
+  });
+
+  return `
+    <div style="padding:12px 16px 0;">
+      <div class="search-bar">
+        ${IC.search}
+        <input id="search-input" type="text" placeholder="Search devices..." value="${escHtml(S.searchQuery)}" oninput="S.searchQuery=this.value;render();refocusSearch();">
+      </div>
+    </div>
+    <div style="padding:0 16px 16px;">
+      ${filtered.length === 0 ? `
+        <div class="empty-state">
+          ${IC.search}
+          <h3>No devices found</h3>
+          <p>${q ? 'Try a different search term' : 'No devices connected to this server'}</p>
+        </div>
+      ` : `
+        <div style="font-size:12px;color:var(--text-muted);margin-bottom:8px;">${filtered.length} device${filtered.length !== 1 ? 's' : ''}</div>
+        <div class="device-list">
+          ${filtered.map(d => renderDeviceRow(d)).join('')}
+        </div>
+      `}
+    </div>
+  `;
+}
+
+function renderDeviceDetail() {
+  const d = S.selectedDevice;
+  if (!d) return '';
+  const online = isOnline(d);
+  const meshName = S.meshes[d.meshid] ? S.meshes[d.meshid].name : 'Unknown Group';
+
+  // Extract IP addresses
+  let ipAddr = 'Unknown';
+  if (d.ip) ipAddr = d.ip;
+  else if (d.host) ipAddr = d.host;
+
+  return `
+    <div class="detail-screen">
+      <div class="detail-header">
+        <button class="back-btn" onclick="S.selectedDevice=null;render();">${IC.chevLeft}</button>
+        <div class="detail-title">${escHtml(d.name || 'Unknown')}</div>
+        <button class="header-btn" onclick="refreshDevices()" title="Refresh">${IC.refresh}</button>
+      </div>
+      <div class="scroll flex-1">
+        <div class="detail-body">
+          <div class="detail-status-banner ${online ? 'online' : 'offline'}">
+            <span class="conn-dot ${online ? 'online' : 'offline'}"></span>
+            <div>
+              <div class="status-text">${online ? 'Online' : 'Offline'}</div>
+              <div class="status-sub">${online ? 'Connected and responding' : 'Last seen: ' + lastSeenText(d)}</div>
+            </div>
+          </div>
+
+          <div class="section-title">System Information</div>
+          <div class="info-grid">
+            <div class="info-item">
+              <div class="info-label">Operating System</div>
+              <div class="info-value">${escHtml(d.osdesc || 'Unknown')}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">Device Group</div>
+              <div class="info-value">${escHtml(meshName)}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">IP Address</div>
+              <div class="info-value">${escHtml(ipAddr)}</div>
+            </div>
+            <div class="info-item">
+              <div class="info-label">Agent ID</div>
+              <div class="info-value" style="font-size:11px;">${escHtml((d._id || '').replace('node//', '').substring(0, 24))}...</div>
+            </div>
+            ${d.agent ? `
+              <div class="info-item full">
+                <div class="info-label">Agent Version</div>
+                <div class="info-value">v${d.agent.ver || 'Unknown'}${d.agent.core ? ' (Core: ' + d.agent.core + ')' : ''}</div>
+              </div>
+            ` : ''}
+          </div>
+
+          <div class="section-title">Power Actions</div>
+          <div class="actions-grid">
+            <button class="action-btn" onclick="confirmPower('${d._id}', 100, 'Wake on LAN', 'Send a Wake-on-LAN packet to this device?')" ${!online ? '' : ''}>
+              ${IC.wake}
+              <span class="action-label">Wake</span>
+            </button>
+            <button class="action-btn" onclick="confirmPower('${d._id}', 4, 'Sleep', 'Put this device to sleep?')" ${!online ? 'disabled' : ''}>
+              ${IC.sleep}
+              <span class="action-label">Sleep</span>
+            </button>
+            <button class="action-btn danger" onclick="confirmPower('${d._id}', 3, 'Reboot', 'Are you sure you want to reboot this device?')" ${!online ? 'disabled' : ''}>
+              ${IC.refresh}
+              <span class="action-label">Reboot</span>
+            </button>
+            <button class="action-btn danger" onclick="confirmPower('${d._id}', 2, 'Shutdown', 'Are you sure you want to shut down this device?')" ${!online ? 'disabled' : ''}>
+              ${IC.power}
+              <span class="action-label">Shutdown</span>
+            </button>
+          </div>
+
+          ${online ? `
+            <div class="section-title">Remote Access</div>
+            <button class="action-btn" style="width:100%;margin-bottom:10px;" onclick="openTerminalFor('${d._id}', '${escHtml(d.name || 'Device')}')">
+              ${IC.terminal}
+              <span class="action-label">Open Terminal</span>
+            </button>
+            <button class="action-btn" style="width:100%;margin-bottom:10px;" onclick="openDesktopLink('${d._id}')">
+              ${IC.monitor}
+              <span class="action-label">Open Remote Desktop (in MeshCentral)</span>
+            </button>
+          ` : ''}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+function renderTerminal() {
+  const onlineDevices = S.devices.filter(d => isOnline(d));
+
+  if (onlineDevices.length === 0) {
+    return `
+      <div class="empty-state" style="flex:1;">
+        ${IC.terminal}
+        <h3>No online devices</h3>
+        <p>Terminal requires at least one online device.</p>
+      </div>
+    `;
+  }
+
+  return `
+    <div style="display:flex;flex-direction:column;flex:1;">
+      <div class="terminal-toolbar">
+        <select class="terminal-select" id="term-device" onchange="S.terminalNodeId=this.value;S.terminalOutput='';render();">
+          <option value="">Select a device...</option>
+          ${onlineDevices.map(d => `<option value="${d._id}" ${S.terminalNodeId === d._id ? 'selected' : ''}>${escHtml(d.name || 'Unknown')}</option>`).join('')}
+        </select>
+      </div>
+      <div class="terminal-container" id="term-output">${escHtml(S.terminalOutput) || '<span style="color:#666;">Select a device and type a command below.\nCommands are sent via the MeshCentral agent console.</span>'}</div>
+      <div class="terminal-input-row">
+        <input id="term-input" type="text" placeholder="${S.terminalNodeId ? 'Type a command...' : 'Select a device first'}" ${!S.terminalNodeId ? 'disabled' : ''} autocapitalize="none" autocorrect="off" spellcheck="false">
+        <button onclick="sendTermCmd()" ${!S.terminalNodeId ? 'disabled' : ''}>Send</button>
+      </div>
+    </div>
+  `;
+}
+
+function renderSettings() {
+  const serverHost = S.serverUrl.replace(/^https?:\/\//, '');
+  return `
+    <div style="padding:16px;">
+      <div class="section-title">Connection</div>
+      <div class="settings-section">
+        <div class="settings-item">
+          ${IC.wifi}
+          <span class="label">Server</span>
+          <span class="val">${escHtml(serverHost)}</span>
+        </div>
+        <div class="settings-item">
+          ${IC.shield}
+          <span class="label">Status</span>
+          <span class="val" style="color:${S.connected ? 'var(--green)' : 'var(--red)'};">${S.connected ? 'Connected' : 'Disconnected'}</span>
+        </div>
+        <div class="settings-item">
+          ${IC.key}
+          <span class="label">Auth Mode</span>
+          <span class="val">${S.authMode === 'credentials' ? 'Credentials' : 'Token'}</span>
+        </div>
+      </div>
+
+      <div class="section-title">Actions</div>
+      <div class="settings-section">
+        <div class="settings-item" style="cursor:pointer;" onclick="refreshDevices()">
+          ${IC.refresh}
+          <span class="label">Refresh Devices</span>
+          ${IC.chevRight}
+        </div>
+        <div class="settings-item" style="cursor:pointer;" onclick="openMeshCentral()">
+          ${IC.monitor}
+          <span class="label">Open MeshCentral Web UI</span>
+          ${IC.chevRight}
+        </div>
+      </div>
+
+      <div class="section-title">Account</div>
+      <div class="settings-section">
+        <div class="settings-item" style="cursor:pointer;" onclick="confirmDisconnect()">
+          ${IC.logout}
+          <span class="label" style="color:var(--red);">Disconnect</span>
+        </div>
+      </div>
+
+      <div style="text-align:center;padding:24px 0;color:var(--text-muted);font-size:12px;">
+        MeshCtrl Mobile v1.0<br>
+        Built for MeshCentral
+      </div>
+    </div>
+  `;
+}
+
+// ---------- Event Binding ----------
+function bindEvents() {
+  // Login form
+  const btnConnect = $('btn-connect');
+  if (btnConnect) {
+    btnConnect.onclick = () => {
+      S.serverUrl = ($('inp-url')?.value || '').trim();
+      if (S.authMode === 'credentials') {
+        S.username = ($('inp-user')?.value || '').trim();
+        S.password = ($('inp-pass')?.value || '').trim();
+      } else {
+        S.loginToken = ($('inp-token')?.value || '').trim();
+      }
+      if (!S.serverUrl) { toast('Please enter a server URL', 'error'); return; }
+      wsConnect();
+    };
+  }
+
+  // Terminal input
+  const termInput = $('term-input');
+  if (termInput) {
+    termInput.onkeydown = (e) => {
+      if (e.key === 'Enter') sendTermCmd();
+    };
+  }
+
+  // Auto-scroll terminal
+  const termOut = $('term-output');
+  if (termOut) termOut.scrollTop = termOut.scrollHeight;
+
+  // Saved server clicks
+  document.querySelectorAll('[data-saved]').forEach(el => {
+    el.onclick = (e) => {
+      if (e.target.closest('.remove-btn')) return;
+      const idx = parseInt(el.dataset.saved);
+      const s = savedServers[idx];
+      if (s) {
+        S.serverUrl = s.url;
+        S.username = s.username !== '(token)' ? s.username : '';
+        render();
+      }
+    };
+  });
+}
+
+// ---------- Actions ----------
+function switchTab(tab) { S.tab = tab; render(); }
+function selectDevice(id) { S.selectedDevice = S.devices.find(d => d._id === id); render(); }
+function toggleGroup(id) { S.expandedGroups[id] = !S.expandedGroups[id]; render(); }
+function refreshDevices() { wsSend({ action: 'meshes' }); wsSend({ action: 'nodes' }); toast('Refreshing...'); }
+
+function removeSaved(idx) {
+  savedServers.splice(idx, 1);
+  saveSaved();
+  render();
+}
+
+function confirmPower(nodeId, action, label, msg) {
+  showConfirm(label, msg, label, () => devicePower(nodeId, action));
+}
+
+function confirmDisconnect() {
+  showConfirm('Disconnect', 'Are you sure you want to disconnect from the server?', 'Disconnect', disconnect);
+}
+
+function openTerminalFor(nodeId, name) {
+  S.terminalNodeId = nodeId;
+  S.terminalOutput = '';
+  S.tab = 'terminal';
+  S.selectedDevice = null;
+  render();
+}
+
+function openDesktopLink(nodeId) {
+  // Open in MeshCentral web UI for full remote desktop
+  const url = S.serverUrl + '/?node=' + encodeURIComponent(nodeId);
+  window.open(url, '_blank');
+}
+
+function openMeshCentral() {
+  window.open(S.serverUrl, '_blank');
+}
+
+function sendTermCmd() {
+  const input = $('term-input');
+  if (!input || !input.value.trim() || !S.terminalNodeId) return;
+  const cmd = input.value.trim();
+  S.terminalOutput += '\n> ' + cmd + '\n';
+  sendConsoleCmd(S.terminalNodeId, cmd);
+  input.value = '';
+  render();
+  // Re-focus input after render
+  setTimeout(() => { const i = $('term-input'); if (i) i.focus(); }, 50);
+}
+
+function refocusSearch() {
+  setTimeout(() => {
+    const i = $('search-input');
+    if (i) { i.focus(); i.setSelectionRange(i.value.length, i.value.length); }
+  }, 10);
+}
+
+function escHtml(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// ---------- Service Worker (inline, for PWA installability) ----------
+if ('serviceWorker' in navigator) {
+  const swCode = `self.addEventListener('install', e => self.skipWaiting());
+self.addEventListener('activate', e => e.waitUntil(clients.claim()));
+self.addEventListener('fetch', e => {
+  if (e.request.url.includes('control.ashx')) return;
+  e.respondWith(
+    caches.match(e.request).then(r => r || fetch(e.request).then(res => {
+      if (res.ok && e.request.method === 'GET') {
+        const c = res.clone();
+        caches.open('meshctrl-v1').then(cache => cache.put(e.request, c));
+      }
+      return res;
+    }).catch(() => caches.match(e.request))
+    )
+  );
+});`;
+  const blob = new Blob([swCode], { type: 'application/javascript' });
+  const swUrl = URL.createObjectURL(blob);
+  navigator.serviceWorker.register(swUrl).catch(() => {});
+}
+
+// ---------- Pull-to-refresh (Dashboard) ----------
+let _pullStart = 0;
+document.addEventListener('touchstart', e => {
+  const scroll = document.getElementById('main-scroll');
+  if (scroll && scroll.scrollTop === 0) _pullStart = e.touches[0].clientY;
+  else _pullStart = 0;
+}, { passive: true });
+document.addEventListener('touchend', e => {
+  if (_pullStart && e.changedTouches[0].clientY - _pullStart > 80) {
+    if (S.connected && S.view === 'main') refreshDevices();
+  }
+  _pullStart = 0;
+}, { passive: true });
+
+// ---------- Init ----------
+render();
+</script>
+</body>
+</html>
