From 405646fafad65216afec3cc41a521db4c863e432 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Fri, 15 May 2026 23:46:42 -0400
Subject: [PATCH] UX v2: larger touch targets, quick actions on device cards,
 filter chips, bottom sheet confirms, improved terminal with kb shortcuts +
 history

---
 meshcentral-mobile.html | 1485 +++++++++------------------------------
 1 file changed, 339 insertions(+), 1146 deletions(-)

diff --git a/meshcentral-mobile.html b/meshcentral-mobile.html
index 5f959c4..3e3e40a 100644
--- a/meshcentral-mobile.html
+++ b/meshcentral-mobile.html
@@ -7,1177 +7,370 @@
 <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="theme-color" content="#080d14">
 <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">
+<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='%23080d14'/><rect x='28' y='28' width='124' height='124' rx='26' stroke='%2300d4ff' stroke-width='6' fill='none'/><circle cx='90' cy='76' r='20' stroke='%2300d4ff' stroke-width='5' fill='none'/><path d='M58 136c0-17.673 14.327-32 32-32s32 14.327 32 32' stroke='%2300d4ff' 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='%23080d14'/><rect x='4' y='4' width='24' height='24' rx='5' stroke='%2300d4ff' stroke-width='2' fill='none'/><circle cx='16' cy='13' r='4' stroke='%2300d4ff' stroke-width='1.5' fill='none'/><path d='M10 24c0-3.314 2.686-6 6-6s6 2.686 6 6' stroke='%2300d4ff' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>">
+<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%23080d14%22%2C%22theme_color%22%3A%22%23080d14%22%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;
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
+:root{
+  --bg:#080d14;--bg1:#0d1520;--bg2:#121e2e;--bg3:#1a2840;--bg4:#223050;
+  --line:rgba(255,255,255,0.07);--line2:rgba(255,255,255,0.12);
+  --t0:#f0f6ff;--t1:#8da3bc;--t2:#5a7a99;--t3:#3a5470;
+  --cyan:#00d4ff;--cyan2:#00a8cc;--cyan-bg:rgba(0,212,255,0.1);--cyan-bdr:rgba(0,212,255,0.25);
+  --green:#00e676;--green-bg:rgba(0,230,118,0.1);
+  --red:#ff5370;--red-bg:rgba(255,83,112,0.12);--red-bdr:rgba(255,83,112,0.3);
+  --amber:#ffb300;--amber-bg:rgba(255,179,0,0.1);
+  --r:12px;--r-sm:8px;--nav-h:64px;--hdr-h:54px;
+  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
+  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
+  -webkit-font-smoothing:antialiased;
 }
-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; }
+html,body{height:100%;background:var(--bg);color:var(--t0);overflow:hidden}
+body{display:flex;flex-direction:column;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
+input,button,textarea,select{font:inherit;color:inherit;-webkit-appearance:none}
+button{background:none;border:none;cursor:pointer}
+.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
+.scroll::-webkit-scrollbar{display:none}
+.hdr{display:flex;align-items:center;gap:8px;padding:0 16px;height:var(--hdr-h);background:rgba(8,13,20,0.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
+.hdr-title{font-size:17px;font-weight:700;flex:1;letter-spacing:-0.3px}
+.hdr-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);transition:background 0.1s;flex-shrink:0}
+.hdr-btn:active{background:var(--bg3)}
+.hdr-btn svg{width:18px;height:18px;stroke:var(--t1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
+.dot.off{background:var(--t3)}
+.dot.ing{background:var(--amber);animation:blink 1.2s ease infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
+.nav{display:flex;background:var(--bg1);border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--nav-h) + var(--safe-b))}
+.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 0;color:var(--t3);transition:color 0.15s}
+.nav-btn.active{color:var(--cyan)}
+.nav-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.nav-btn span{font-size:10px;font-weight:600;letter-spacing:0.2px}
+.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px}
+.login-mark{margin-bottom:18px}
+.login-mark svg{width:60px;height:60px}
+.login-h1{font-size:26px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px}
+.login-sub{font-size:14px;color:var(--t1);margin-bottom:28px}
+.login-form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
+.saved-list{width:100%;max-width:380px;margin-bottom:16px}
+.saved-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;margin-bottom:8px;transition:background 0.1s}
+.saved-item:active{background:var(--bg3)}
+.saved-url{font-size:14px;font-weight:600}
+.saved-user{font-size:12px;color:var(--t2);margin-top:2px}
+.saved-del{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--red-bg);border-radius:8px;flex-shrink:0}
+.saved-del svg{width:14px;height:14px;stroke:var(--red);fill:none;stroke-width:2}
+.field{display:flex;flex-direction:column;gap:5px}
+.field label{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:0.6px;padding-left:2px}
+.field input{background:var(--bg2);border:1.5px solid var(--line2);border-radius:var(--r-sm);padding:13px 14px;font-size:16px;outline:none;transition:border-color 0.15s;color:var(--t0)}
+.field input:focus{border-color:var(--cyan)}
+.field input::placeholder{color:var(--t3)}
+.btn{padding:15px;border-radius:var(--r-sm);font-size:15px;font-weight:700;border:none;cursor:pointer;transition:all 0.12s;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}
+.btn-primary{background:var(--cyan);color:#000}
+.btn-primary:active{background:var(--cyan2)}
+.btn-primary:disabled{opacity:0.45;cursor:not-allowed}
+.btn-ghost{background:var(--bg2);border:1.5px solid var(--line2);color:var(--t0)}
+.btn-ghost:active{background:var(--bg3)}
+.btn-danger{background:var(--red-bg);color:var(--red);border:1.5px solid var(--red-bdr)}
+.btn-danger:active{opacity:0.7}
+.divider-text{display:flex;align-items:center;gap:10px;margin:6px 0}
+.divider-text span{font-size:12px;color:var(--t3);flex-shrink:0}
+.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--line)}
+.search-bar{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1.5px solid var(--line2);border-radius:var(--r-sm);padding:0 14px;margin-bottom:14px;transition:border-color 0.15s}
+.search-bar:focus-within{border-color:var(--cyan)}
+.search-bar svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0}
+.search-bar input{flex:1;background:none;border:none;padding:12px 0;font-size:15px;outline:none;color:var(--t0)}
+.search-bar input::placeholder{color:var(--t3)}
+.search-clear{width:20px;height:20px;background:var(--t3);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
+.search-clear svg{width:10px;height:10px;stroke:#000;fill:none;stroke-width:2.5}
+.chips{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}
+.chips::-webkit-scrollbar{display:none}
+.chip{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1.5px solid var(--line2);background:var(--bg2);color:var(--t2);white-space:nowrap;flex-shrink:0;transition:all 0.12s}
+.chip.active{background:var(--cyan-bg);border-color:var(--cyan-bdr);color:var(--cyan)}
+.device-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:background 0.1s;margin-bottom:8px;position:relative;overflow:hidden}
+.device-card:active{background:var(--bg2)}
+.device-card.online{border-left:3px solid var(--green)}
+.device-card.offline{border-left:3px solid var(--t3)}
+.dev-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.dev-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
+.dev-icon.win{background:rgba(0,120,215,0.15);color:#4da6ff}
+.dev-icon.lin{background:rgba(255,140,0,0.12);color:#ffaa44}
+.dev-icon.mac{background:rgba(0,200,130,0.12);color:#00c882}
+.dev-icon.unk{background:var(--bg3);color:var(--t2)}
+.dev-body{flex:1;min-width:0}
+.dev-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.dev-meta{font-size:12px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.dev-actions{display:flex;gap:6px;flex-shrink:0}
+.dev-qbtn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg3);border:1px solid var(--line2);transition:all 0.1s}
+.dev-qbtn:active{background:var(--bg4);transform:scale(0.92)}
+.dev-qbtn svg{width:16px;height:16px;stroke:var(--t1);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.dev-qbtn.warn svg{stroke:var(--amber)}
+.dev-qbtn.danger svg{stroke:var(--red)}
+.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;flex-shrink:0}
+.badge.on{background:var(--green-bg);color:var(--green)}
+.badge.off{background:rgba(90,120,153,0.15);color:var(--t2)}
+.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px}
+.sec-title{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:0.8px}
+.sec-link{font-size:12px;color:var(--cyan);font-weight:600}
+.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
+.stat-card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;text-align:center}
+.stat-n{font-size:30px;font-weight:800;line-height:1;letter-spacing:-1px}
+.stat-n.green{color:var(--green)}
+.stat-n.red{color:var(--red)}
+.stat-n.blue{color:var(--cyan)}
+.stat-lbl{font-size:11px;color:var(--t2);margin-top:4px;font-weight:500}
+.detail-wrap{display:flex;flex-direction:column;height:100%}
+.detail-hdr{display:flex;align-items:center;gap:10px;padding:0 16px;height:var(--hdr-h);background:rgba(8,13,20,0.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
+.back-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;margin-left:-8px}
+.back-btn svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
+.detail-title{flex:1;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.status-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);margin-bottom:18px}
+.status-banner.on{background:var(--green-bg);border:1px solid rgba(0,230,118,0.2)}
+.status-banner.off{background:var(--bg2);border:1px solid var(--line)}
+.sb-text{font-size:14px;font-weight:700}
+.on .sb-text{color:var(--green)}
+.off .sb-text{color:var(--t2)}
+.sb-sub{font-size:12px;color:var(--t2);margin-top:1px}
+.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
+.info-cell{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px}
+.info-cell.full{grid-column:1/-1}
+.info-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:4px}
+.info-val{font-size:13px;font-weight:500;word-break:break-all;line-height:1.4}
+.power-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
+.pow-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:all 0.12s}
+.pow-btn:active{background:var(--bg3);transform:scale(0.96)}
+.pow-btn:disabled{opacity:0.35;cursor:not-allowed;transform:none}
+.pow-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.pow-btn span{font-size:13px;font-weight:600;color:var(--t1)}
+.pow-btn.wake{color:var(--cyan)}
+.pow-btn.sleep{color:var(--amber)}
+.pow-btn.reboot{color:var(--amber)}
+.pow-btn.shut{color:var(--red);border-color:var(--red-bdr)}
+.pow-btn.term-btn{grid-column:1/-1;flex-direction:row;color:var(--cyan);padding:16px}
+.pow-btn.term-btn span{font-size:14px}
+.group-card{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
+.group-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;transition:background 0.1s}
+.group-hdr:active{background:var(--bg2)}
+.group-hdr svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:2;transition:transform 0.2s;flex-shrink:0}
+.group-hdr.open svg.chev{transform:rotate(90deg)}
+.group-hdr-name{flex:1;font-size:15px;font-weight:600}
+.group-hdr-pills{display:flex;gap:5px}
+.gpill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
+.gpill.on{background:var(--green-bg);color:var(--green)}
+.gpill.off{background:var(--bg3);color:var(--t2)}
+.group-devices{border-top:1px solid var(--line)}
+.group-dev-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line);transition:background 0.1s}
+.group-dev-item:last-child{border-bottom:none}
+.group-dev-item:active{background:var(--bg2)}
+.term-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
+.term-dev-sel{padding:10px 16px;border-bottom:1px solid var(--line)}
+.term-dev-pick{width:100%;background:var(--bg2);border:1.5px solid var(--line2);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;color:var(--t0);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='%235a7a99' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;appearance:none}
+.term-out{flex:1;background:#060a10;font-family:'SF Mono','Menlo','Monaco',Consolas,monospace;font-size:13px;line-height:1.5;padding:12px 14px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;color:#cdd9e5;-webkit-overflow-scrolling:touch}
+.term-out::-webkit-scrollbar{width:3px}
+.term-out::-webkit-scrollbar-track{background:transparent}
+.term-out::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
+.term-prompt{color:var(--cyan)}
+.term-kb-bar{display:flex;gap:6px;padding:8px 12px;background:#090e16;border-top:1px solid rgba(255,255,255,0.06);overflow-x:auto}
+.term-kb-bar::-webkit-scrollbar{display:none}
+.kb-key{padding:6px 12px;background:#1a2540;border:1px solid rgba(255,255,255,0.1);border-radius:6px;font-family:monospace;font-size:12px;color:#8da3bc;white-space:nowrap;flex-shrink:0}
+.kb-key:active{background:var(--bg4);color:var(--t0)}
+.term-in-row{display:flex;gap:8px;padding:10px 12px;background:#060a10;border-top:1px solid rgba(255,255,255,0.08)}
+.term-in{flex:1;background:#0d1520;border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:11px 14px;font-family:monospace;font-size:14px;color:#cdd9e5;outline:none}
+.term-in:focus{border-color:var(--cyan)}
+.term-send{padding:11px 18px;background:var(--cyan);color:#000;border-radius:8px;font-weight:700;font-size:13px;flex-shrink:0}
+.term-send:active{background:var(--cyan2)}
+.term-send:disabled{opacity:0.4}
+.settings-wrap{padding:16px}
+.settings-group{margin-bottom:24px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
+.settings-row{display:flex;align-items:center;gap:12px;padding:15px 16px;background:var(--bg1);cursor:pointer;border-bottom:1px solid var(--line);transition:background 0.1s}
+.settings-row:last-child{border-bottom:none}
+.settings-row:active{background:var(--bg2)}
+.settings-row svg{width:20px;height:20px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0}
+.settings-row .lbl{flex:1;font-size:15px}
+.settings-row .val{font-size:13px;color:var(--t2)}
+.settings-row .val.on{color:var(--green)}
+.settings-row .val.off{color:var(--red)}
+.spinner{width:22px;height:22px;border:2.5px solid var(--line2);border-top-color:var(--cyan);border-radius:50%;animation:spin 0.75s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 24px;text-align:center}
+.empty svg{width:48px;height:48px;stroke:var(--t3);fill:none;stroke-width:1.5;margin-bottom:16px}
+.empty h3{font-size:16px;font-weight:700;margin-bottom:6px}
+.empty p{font-size:13px;color:var(--t2);line-height:1.5}
+.toast{position:fixed;bottom:calc(var(--nav-h) + var(--safe-b) + 14px);left:16px;right:16px;padding:13px 16px;border-radius:var(--r);font-size:14px;font-weight:500;background:var(--bg2);border:1px solid var(--line2);box-shadow:0 10px 40px rgba(0,0,0,0.6);z-index:500;transform:translateY(120%);opacity:0;transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),opacity 0.28s ease}
+.toast.in{transform:translateY(0);opacity:1}
+.toast.success{border-color:rgba(0,230,118,0.35)}
+.toast.error{border-color:var(--red-bdr)}
+.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:400;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity 0.2s;pointer-events:none}
+.sheet-overlay.open{opacity:1;pointer-events:all}
+.sheet{background:var(--bg1);border-radius:20px 20px 0 0;width:100%;max-width:460px;padding:0 0 calc(16px + var(--safe-b));transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.32,0.72,0,1)}
+.sheet-overlay.open .sheet{transform:translateY(0)}
+.sheet-handle{width:36px;height:4px;background:var(--t3);border-radius:2px;margin:12px auto 6px}
+.sheet-title{font-size:15px;font-weight:700;text-align:center;padding:8px 16px 16px}
+.sheet-msg{font-size:14px;color:var(--t1);text-align:center;padding:0 20px 18px;line-height:1.5}
+.sheet-actions{padding:0 16px;display:flex;flex-direction:column;gap:8px}
+.sheet-cancel{color:var(--t2);text-align:center;padding:14px;font-size:15px;font-weight:600;margin-top:4px}
+.sheet-cancel:active{color:var(--t1)}
+.pad{padding:16px}
+.hidden{display:none!important}
 </style>
 </head>
 <body>
-<!-- ========== APP ROOT ========== -->
-<div id="app" class="flex-col" style="height:100%"></div>
-
-<!-- ========== TOAST ========== -->
+<div id="app" style="height:100%;display:flex;flex-direction:column"></div>
 <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 id="sheet-overlay" class="sheet-overlay" onclick="if(event.target===this)closeSheet()">
+  <div class="sheet">
+    <div class="sheet-handle"></div>
+    <div id="sheet-title" class="sheet-title"></div>
+    <div id="sheet-msg" class="sheet-msg"></div>
+    <div id="sheet-actions" class="sheet-actions"></div>
+    <button id="sheet-cancel" class="sheet-cancel" onclick="closeSheet()">Cancel</button>
   </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) {}
-}
+const S={view:'login',tab:'dashboard',ws:null,connected:false,connecting:false,serverUrl:'https://mesh.wilddragon.net',username:'',password:'',loginToken:'',authMode:'credentials',devices:[],meshes:{},selectedDevice:null,searchQuery:'',filterStatus:'all',expandedGroups:{},termNodeId:null,termLines:[],termHistory:[],termHistIdx:-1};
+let savedServers=[];
+function loadSaved(){try{savedServers=JSON.parse(localStorage.getItem('mc_srv2')||'[]');}catch(e){savedServers=[];}}
+function saveSaved(){try{localStorage.setItem('mc_srv2',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>',
+const I={
+  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.2" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1.2" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1.2" 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>`,
+  back:`<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>`,
+  chev:`<svg class="chev" viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></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>`,
+  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>`,
+  reboot:`<svg viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4"/></svg>`,
+  wake:`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  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>`,
+  globe:`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></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);
+const $id=id=>document.getElementById(id);
+const esc=s=>!s?'':String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+const online=d=>d&&(d.conn&1)!==0;
+const osClass=d=>{if(!d?.osdesc)return'unk';const o=d.osdesc.toLowerCase();return o.includes('windows')?'win':(o.includes('linux')||o.includes('ubuntu')||o.includes('debian'))?'lin':(o.includes('mac')||o.includes('darwin'))?'mac':'unk';};
+const osIcon=d=>{const c=osClass(d);return c==='win'?I.monitor:c==='lin'?I.server:c==='mac'?I.monitor:I.cpu;};
+const lastSeen=d=>{if(!d.lastconnect)return'Never';const diff=(Date.now()-d.lastconnect*1000)/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';};
+let _toastT;
+function toast(msg,type='info'){const t=$id('toast');t.textContent=msg;t.className='toast '+type;requestAnimationFrame(()=>{t.classList.add('in');});clearTimeout(_toastT);_toastT=setTimeout(()=>t.classList.remove('in'),3000);}
+let _sheetCb=null;
+function openSheet(title,msg,actions){$id('sheet-title').textContent=title;$id('sheet-msg').textContent=msg;$id('sheet-actions').innerHTML=actions.map(a=>`<button class="btn ${a.danger?'btn-danger':'btn-ghost'}" onclick="sheetAction(${a.idx})">${a.label}</button>`).join('');_sheetCb=actions;$id('sheet-overlay').classList.add('open');}
+function closeSheet(){$id('sheet-overlay').classList.remove('open');_sheetCb=null;}
+function sheetAction(idx){if(_sheetCb&&_sheetCb[idx]?.cb)_sheetCb[idx].cb();closeSheet();}
+function wsConnect(){
+  if(S.ws){try{S.ws.close();}catch(e){}}
+  S.connecting=true;S.connected=false;render();
+  let url=S.serverUrl.replace(/\/$/,'').replace(/^http/,'ws')+'/control.ashx';
+  if(S.authMode==='credentials'&&S.username)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('Connection failed: '+e.message,'error');render();return;}
+  S.ws.onopen=()=>{S.connecting=false;S.connected=true;S.view='main';const key=S.serverUrl+'|'+(S.username||'(token)');if(!savedServers.find(s=>s.key===key)){savedServers.unshift({key,url:S.serverUrl,username:S.username||'(token)'});if(savedServers.length>5)savedServers.pop();saveSaved();}toast('Connected','success');wsSend({action:'meshes'});wsSend({action:'nodes'});render();};
+  S.ws.onmessage=ev=>{try{handleMsg(JSON.parse(ev.data));}catch(e){}};
+  S.ws.onerror=()=>{S.connecting=false;toast('WebSocket error','error');render();};
+  S.ws.onclose=()=>{S.connected=false;S.connecting=false;if(S.view==='main')toast('Disconnected','error');render();};
 }
-
-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 wsSend(obj){if(S.ws?.readyState===WebSocket.OPEN)S.ws.send(JSON.stringify(obj));}
+function handleMsg(msg){
+  if(!msg.action){if(msg.meshes){S.meshes={};msg.meshes.forEach(m=>S.meshes[m._id]=m);render();}return;}
+  switch(msg.action){
+    case'meshes':if(msg.meshes){S.meshes={};msg.meshes.forEach(m=>S.meshes[m._id]=m);}render();break;
+    case'nodes':if(msg.nodes){S.devices=[];for(const mid in msg.nodes)msg.nodes[mid].forEach(n=>{n._meshId=mid;S.devices.push(n);});S.devices.sort((a,b)=>(a.name||'').localeCompare(b.name||''));}render();break;
+    case'changenode':if(msg.node){const i=S.devices.findIndex(d=>d._id===msg.node._id);if(i>=0)Object.assign(S.devices[i],msg.node);else S.devices.push(msg.node);if(S.selectedDevice?._id===msg.node._id)Object.assign(S.selectedDevice,msg.node);render();}break;
+    case'nodeconnect':if(msg.nodeid){const d=S.devices.find(d=>d._id===msg.nodeid);if(d&&msg.conn!==undefined){d.conn=msg.conn;render();}}break;
+    case'event':if(msg.event?.nodeid){const d=S.devices.find(d=>d._id===msg.event.nodeid);if(d&&msg.event.conn!==undefined){d.conn=msg.event.conn;render();}}break;
+    case'msg':if(msg.type==='console'&&msg.value){S.termLines.push({type:'out',text:msg.value});if(S.tab==='terminal')renderTermOutput();}break;
   }
 }
-
-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;}Object.assign(S,{connected:false,connecting:false,devices:[],meshes:{},selectedDevice:null,view:'login',tab:'dashboard',termLines:[],termHistory:[],termHistIdx:-1});render();}
+const POWER_LABELS={2:'Shutdown',3:'Reboot',4:'Sleep',100:'Wake on LAN'};
+function powerAction(nodeId,action){wsSend({action:'poweraction',nodeids:[nodeId],actiontype:action});toast(POWER_LABELS[action]+' sent','success');}
+function render(){const app=$id('app');if(S.view==='login'){app.innerHTML=tLogin();}else if(S.selectedDevice){app.innerHTML=tDeviceDetail();}else{app.innerHTML=tMain();}bindEvents();}
+function tLogin(){
+  const recentHtml=savedServers.map((s,i)=>`<div class="saved-item" onclick="loadSavedIdx(${i})"><div style="flex:1"><div class="saved-url">${esc(s.url.replace(/^https?:\/\//,''))}</div><div class="saved-user">${esc(s.username)}</div></div><button class="saved-del" onclick="event.stopPropagation();removeSaved(${i})">${I.x}</button></div>`).join('');
+  return`<div class="login-wrap"><div class="login-mark"><svg viewBox="0 0 60 60" fill="none"><rect x="4" y="4" width="52" height="52" rx="14" stroke="#00d4ff" stroke-width="3"/><circle cx="30" cy="25" r="9" stroke="#00d4ff" stroke-width="2.5"/><path d="M16 48c0-7.732 6.268-14 14-14s14 6.268 14 14" stroke="#00d4ff" stroke-width="2.5" stroke-linecap="round"/></svg></div><div class="login-h1">MeshCtrl</div><div class="login-sub">MeshCentral mobile client</div>${savedServers.length?`<div style="width:100%;max-width:380px"><div style="font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:8px;padding-left:2px">Recent</div><div class="saved-list">${recentHtml}</div></div><div class="divider-text" style="width:100%;max-width:380px"><span>or new</span></div>`:''}<div class="login-form"><div class="field"><label>Server URL</label><input id="f-url" type="url" placeholder="https://mesh.example.com" value="${esc(S.serverUrl)}" autocapitalize="none" autocorrect="off" spellcheck="false"></div><div style="display:flex;gap:6px"><button class="btn btn-ghost" style="flex:1;padding:10px;font-size:13px;${S.authMode==='credentials'?'background:var(--cyan-bg);border-color:var(--cyan-bdr);color:var(--cyan)':''}" onclick="S.authMode='credentials';render()">Password</button><button class="btn btn-ghost" style="flex:1;padding:10px;font-size:13px;${S.authMode==='token'?'background:var(--cyan-bg);border-color:var(--cyan-bdr);color:var(--cyan)':''}" onclick="S.authMode='token';render()">Token</button></div>${S.authMode==='credentials'?`<div class="field"><label>Username</label><input id="f-user" type="text" placeholder="admin" value="${esc(S.username)}" autocapitalize="none" autocorrect="off"></div><div class="field"><label>Password</label><input id="f-pass" type="password" placeholder="••••••••" value="${esc(S.password)}"></div>`:`<div class="field"><label>Login Token</label><input id="f-token" type="text" placeholder="Paste login token" value="${esc(S.loginToken)}" autocapitalize="none" autocorrect="off" spellcheck="false"></div>`}<button class="btn btn-primary" id="btn-connect" ${S.connecting?'disabled':''} style="margin-top:4px">${S.connecting?'<div class="spinner" style="width:18px;height:18px;border-width:2px;border-color:rgba(0,0,0,0.2);border-top-color:#000"></div>':'Connect'}</button></div></div>`;
 }
-
-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();
+function tMain(){
+  let content;
+  if(S.tab==='dashboard')content=tDashboard();
+  else if(S.tab==='devices')content=tDevices();
+  else if(S.tab==='terminal')content=tTerminal();
+  else content=tSettings();
+  const dotCls=S.connected?'on':S.connecting?'ing':'off';
+  const isTerm=S.tab==='terminal';
+  return`<div class="hdr"><span class="dot ${dotCls}"></span><div><div class="hdr-title">MeshCtrl</div></div><button class="hdr-btn" onclick="doRefresh()" style="margin-left:auto">${I.refresh}</button></div><div class="scroll" id="main-scroll" style="${isTerm?'display:none':''}">${isTerm?'':content}</div>${isTerm?`<div style="flex:1;display:flex;flex-direction:column;min-height:0">${content}</div>`:''}<nav class="nav"><button class="nav-btn ${S.tab==='dashboard'?'active':''}" onclick="setTab('dashboard')">${I.grid}<span>Dashboard</span></button><button class="nav-btn ${S.tab==='devices'?'active':''}" onclick="setTab('devices')">${I.list}<span>Devices</span></button><button class="nav-btn ${S.tab==='terminal'?'active':''}" onclick="setTab('terminal')">${I.terminal}<span>Terminal</span></button><button class="nav-btn ${S.tab==='settings'?'active':''}" onclick="setTab('settings')">${I.settings}<span>Settings</span></button></nav>`;
 }
-
-// ---------- 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 tDashboard(){
+  const onlineDevs=S.devices.filter(d=>online(d));
+  const meshList=Object.values(S.meshes);
+  return`<div class="pad" style="padding-bottom:20px"><div class="stats-row"><div class="stat-card"><div class="stat-n blue">${S.devices.length}</div><div class="stat-lbl">Total</div></div><div class="stat-card"><div class="stat-n green">${onlineDevs.length}</div><div class="stat-lbl">Online</div></div><div class="stat-card"><div class="stat-n red">${S.devices.length-onlineDevs.length}</div><div class="stat-lbl">Offline</div></div></div>${meshList.length>0?`<div class="sec-hdr"><div class="sec-title">Device Groups</div><span style="font-size:12px;color:var(--t2)">${meshList.length} group${meshList.length!==1?'s':''}</span></div>${meshList.map(mesh=>{const mDevs=S.devices.filter(d=>d.meshid===mesh._id);const mOn=mDevs.filter(d=>online(d)).length;const expanded=S.expandedGroups[mesh._id];return`<div class="group-card"><div class="group-hdr${expanded?' open':''}" onclick="toggleGroup('${mesh._id}')"><svg class="chev" viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg><div class="group-hdr-name">${esc(mesh.name||'Unnamed')}</div><div class="group-hdr-pills">${mOn>0?`<span class="gpill on">${mOn} on</span>`:''} ${mDevs.length-mOn>0?`<span class="gpill off">${mDevs.length-mOn} off</span>`:''}</div></div>${expanded?`<div class="group-devices">${mDevs.length===0?'<div style="padding:12px 16px;font-size:13px;color:var(--t3)">No devices</div>':mDevs.map(d=>`<div class="group-dev-item" onclick="selectDev('${d._id}')"><div class="dev-icon ${osClass(d)}" style="width:32px;height:32px;border-radius:8px">${osIcon(d)}</div><div style="flex:1;min-width:0"><div class="dev-name" style="font-size:14px">${esc(d.name||'Unknown')}</div><div class="dev-meta">${esc(d.osdesc||'')}</div></div><span class="badge ${online(d)?'on':'off'}">${online(d)?'●\u00a0On':'Off'}</span></div>`).join('')}</div>`:''}</div>`;}).join('')}`:''} ${onlineDevs.length>0?`<div class="sec-hdr" style="margin-top:16px"><div class="sec-title">Online Now</div><button class="sec-link" onclick="setTab('devices')">All →</button></div>${onlineDevs.slice(0,6).map(d=>tDeviceCard(d)).join('')}${onlineDevs.length>6?`<div style="text-align:center;padding:8px;font-size:13px;color:var(--t2)">+${onlineDevs.length-6} more</div>`:''}`:S.devices.length===0?`<div class="empty">${I.wifi}<h3>No devices</h3><p>Agents will appear here once connected.</p></div>`:''}</div>`;
 }
-
-function sendConsoleCmd(nodeId, cmd) {
-  wsSend({ action: 'msg', type: 'console', nodeid: nodeId, value: cmd });
+function tDeviceCard(d){
+  const isOn=online(d);
+  return`<div class="device-card ${isOn?'online':'offline'}" onclick="selectDev('${d._id}')"><div class="dev-icon ${osClass(d)}">${osIcon(d)}</div><div class="dev-body"><div class="dev-name">${esc(d.name||'Unknown')}</div><div class="dev-meta">${esc(d.osdesc||'Unknown OS')}</div></div><div class="dev-actions" onclick="event.stopPropagation()">${isOn?`<button class="dev-qbtn" title="Terminal" onclick="quickTerminal('${d._id}')">${I.terminal}</button><button class="dev-qbtn warn" title="Reboot" onclick="quickReboot('${d._id}','${esc(d.name||'device')}')">${I.reboot}</button>`:`<button class="dev-qbtn" title="Wake on LAN" onclick="powerAction('${d._id}',100)">${I.wake}</button>`}</div></div>`;
 }
-
-// ---------- 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 tDevices(){
+  const q=S.searchQuery.toLowerCase();
+  let list=S.devices;
+  if(S.filterStatus==='online')list=list.filter(d=>online(d));
+  else if(S.filterStatus==='offline')list=list.filter(d=>!online(d));
+  if(q)list=list.filter(d=>(d.name||'').toLowerCase().includes(q)||(d.osdesc||'').toLowerCase().includes(q)||(d.host||'').toLowerCase().includes(q));
+  list=[...list].sort((a,b)=>{const aOn=online(a)?0:1,bOn=online(b)?0:1;if(aOn!==bOn)return aOn-bOn;return(a.name||'').localeCompare(b.name||'');});
+  return`<div class="pad" style="padding-bottom:20px"><div class="search-bar">${I.search}<input id="si" type="text" placeholder="Search devices…" value="${esc(S.searchQuery)}" oninput="S.searchQuery=this.value;renderDevicesOnly()" autocapitalize="none" autocorrect="off">${S.searchQuery?`<button class="search-clear" onclick="S.searchQuery='';render()">${I.x}</button>`:''}</div><div class="chips"><button class="chip${S.filterStatus==='all'?' active':''}" onclick="S.filterStatus='all';render()">All (${S.devices.length})</button><button class="chip${S.filterStatus==='online'?' active':''}" onclick="S.filterStatus='online';render()">Online (${S.devices.filter(d=>online(d)).length})</button><button class="chip${S.filterStatus==='offline'?' active':''}" onclick="S.filterStatus='offline';render()">Offline (${S.devices.filter(d=>!online(d)).length})</button></div><div id="device-list-inner">${list.length===0?`<div class="empty">${I.search}<h3>No results</h3><p>Try adjusting your search or filter.</p></div>`:list.map(d=>tDeviceCard(d)).join('')}</div></div>`;
 }
-
-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 tDeviceDetail(){
+  const d=S.selectedDevice;if(!d)return'';
+  const isOn=online(d);
+  const meshName=S.meshes[d.meshid]?.name||'Unknown group';
+  const ipAddr=d.ip||d.host||'—';
+  return`<div class="detail-wrap"><div class="detail-hdr"><button class="back-btn" onclick="S.selectedDevice=null;render()">${I.back}</button><div style="flex:1;min-width:0"><div class="detail-title">${esc(d.name||'Unknown')}</div></div><button class="hdr-btn" onclick="doRefresh()" style="flex-shrink:0">${I.refresh}</button></div><div class="scroll"><div class="pad" style="padding-bottom:24px"><div class="status-banner ${isOn?'on':'off'}"><span class="dot ${isOn?'on':'off'}"></span><div><div class="sb-text">${isOn?'Online':'Offline'}</div><div class="sb-sub">${isOn?esc(ipAddr):'Last seen: '+lastSeen(d)}</div></div></div><div class="sec-title" style="margin-bottom:10px">System Info</div><div class="info-grid"><div class="info-cell"><div class="info-lbl">OS</div><div class="info-val">${esc(d.osdesc||'Unknown')}</div></div><div class="info-cell"><div class="info-lbl">Group</div><div class="info-val">${esc(meshName)}</div></div><div class="info-cell"><div class="info-lbl">IP / Host</div><div class="info-val">${esc(ipAddr)}</div></div><div class="info-cell"><div class="info-lbl">Agent</div><div class="info-val">${d.agent?'v'+(d.agent.ver||'?'):'—'}</div></div><div class="info-cell full"><div class="info-lbl">Node ID</div><div class="info-val" style="font-size:11px;font-family:monospace">${esc(d._id||'')}</div></div></div><div class="sec-title" style="margin-bottom:10px">Power</div><div class="power-grid"><button class="pow-btn wake" onclick="powerAction('${d._id}',100)">${I.wake}<span>Wake</span></button><button class="pow-btn sleep" ${!isOn?'disabled':''} onclick="openSheet('Sleep','Put ${esc(d.name||'device')} to sleep?',[{idx:0,label:'Sleep',danger:false,cb:()=>powerAction('${d._id}',4)}])">${I.moon}<span>Sleep</span></button><button class="pow-btn reboot" ${!isOn?'disabled':''} onclick="openSheet('Reboot','Reboot ${esc(d.name||'device')}?',[{idx:0,label:'Reboot',danger:true,cb:()=>powerAction('${d._id}',3)}])">${I.reboot}<span>Reboot</span></button><button class="pow-btn shut" ${!isOn?'disabled':''} onclick="openSheet('Shutdown','Shut down ${esc(d.name||'device')}?',[{idx:0,label:'Shutdown',danger:true,cb:()=>powerAction('${d._id}',2)}])">${I.power}<span>Shutdown</span></button></div>${isOn?`<div class="sec-title" style="margin-bottom:10px">Remote Access</div><button class="pow-btn term-btn" onclick="openTerminalFor('${d._id}')">${I.terminal}<span>Open Terminal</span></button><button class="pow-btn term-btn" style="margin-top:8px;color:var(--t1);border-color:var(--line)" onclick="window.open(S.serverUrl+'/?node='+encodeURIComponent('${d._id}'),'_blank')">${I.globe}<span>MeshCentral Web UI</span></button>`:''}</div></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 tTerminal(){
+  const onlineDevs=S.devices.filter(d=>online(d));
+  return`<div class="term-wrap"><div class="term-dev-sel"><select class="term-dev-pick" id="term-sel" onchange="S.termNodeId=this.value;S.termLines=[];renderTermOutput()"><option value="">— Select online device —</option>${onlineDevs.map(d=>`<option value="${d._id}" ${S.termNodeId===d._id?'selected':''}>${esc(d.name||'Unknown')}</option>`).join('')}</select></div><div class="term-out" id="term-out">${S.termLines.length===0?'<span style="color:#3a5470"># Select an online device above\n# Commands sent via MeshCentral agent console</span>':S.termLines.map(l=>l.type==='cmd'?`<span class="term-prompt">$ ${esc(l.text)}</span>`:`<span>${esc(l.text)}</span>`).join('\n')}</div><div class="term-kb-bar"><button class="kb-key" onclick="termKey('Ctrl+C')">^C</button><button class="kb-key" onclick="termKey('Ctrl+D')">^D</button><button class="kb-key" onclick="termHistNav(1)">▲ Prev</button><button class="kb-key" onclick="termHistNav(-1)">▼ Next</button><button class="kb-key" onclick="termInsert('ls -la')">ls -la</button><button class="kb-key" onclick="termInsert('pwd')">pwd</button><button class="kb-key" onclick="termInsert('df -h')">df -h</button><button class="kb-key" onclick="termInsert('top')">top</button><button class="kb-key" onclick="termInsert('docker ps')">docker ps</button><button class="kb-key" onclick="termInsert('systemctl status')">systemctl</button></div><div class="term-in-row"><input class="term-in" id="term-in" type="text" placeholder="${S.termNodeId?'Enter command…':'Select a device first'}" ${!S.termNodeId?'disabled':''} autocapitalize="none" autocorrect="off" autocomplete="off" spellcheck="false"><button class="term-send" id="term-send" ${!S.termNodeId?'disabled':''} onclick="sendTermCmd()">↵</button></div></div>`;
 }
-
-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 tSettings(){
+  const host=S.serverUrl.replace(/^https?:\/\//,'');
+  return`<div class="settings-wrap"><div class="sec-title" style="margin-bottom:8px">Connection</div><div class="settings-group"><div class="settings-row" style="cursor:default">${I.wifi}<span class="lbl">Server</span><span class="val">${esc(host)}</span></div><div class="settings-row" style="cursor:default">${I.key}<span class="lbl">Auth</span><span class="val">${S.authMode==='credentials'?'Credentials':'Token'}</span></div><div class="settings-row" style="cursor:default">${I.wifi}<span class="lbl">Status</span><span class="val ${S.connected?'on':'off'}">${S.connected?'Connected':'Disconnected'}</span></div></div><div class="sec-title" style="margin-bottom:8px">Actions</div><div class="settings-group"><div class="settings-row" onclick="doRefresh()">${I.refresh}<span class="lbl">Refresh Devices</span><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div><div class="settings-row" onclick="window.open(S.serverUrl,'_blank')">${I.globe}<span class="lbl">Open MeshCentral Web UI</span><svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg></div></div><div class="sec-title" style="margin-bottom:8px">Session</div><div class="settings-group"><div class="settings-row" onclick="doDisconnect()">${I.logout}<span class="lbl" style="color:var(--red)">Disconnect</span></div></div><div style="text-align:center;padding:28px 0 8px;color:var(--t3);font-size:12px">MeshCtrl Mobile v2.0</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 renderTermOutput(){const el=$id('term-out');if(!el)return;if(S.termLines.length===0){el.innerHTML='<span style="color:#3a5470"># Select an online device above\n# Commands sent via MeshCentral agent console</span>';}else{el.innerHTML=S.termLines.map(l=>l.type==='cmd'?`<span class="term-prompt">$ ${esc(l.text)}</span>`:`<span>${esc(l.text)}</span>`).join('\n');}el.scrollTop=el.scrollHeight;}
+function renderDevicesOnly(){const inner=$id('device-list-inner');if(!inner){render();return;}const q=S.searchQuery.toLowerCase();let list=S.devices;if(S.filterStatus==='online')list=list.filter(d=>online(d));else if(S.filterStatus==='offline')list=list.filter(d=>!online(d));if(q)list=list.filter(d=>(d.name||'').toLowerCase().includes(q)||(d.osdesc||'').toLowerCase().includes(q)||(d.host||'').toLowerCase().includes(q));list=[...list].sort((a,b)=>{const aOn=online(a)?0:1,bOn=online(b)?0:1;if(aOn!==bOn)return aOn-bOn;return(a.name||'').localeCompare(b.name||'');});inner.innerHTML=list.length===0?`<div class="empty">${I.search}<h3>No results</h3><p>Try adjusting your search or filter.</p></div>`:list.map(d=>tDeviceCard(d)).join('');}
+function bindEvents(){
+  const bc=$id('btn-connect');
+  if(bc)bc.onclick=()=>{S.serverUrl=($id('f-url')?.value||'').trim();if(S.authMode==='credentials'){S.username=($id('f-user')?.value||'').trim();S.password=($id('f-pass')?.value||'').trim();}else{S.loginToken=($id('f-token')?.value||'').trim();}if(!S.serverUrl){toast('Enter a server URL','error');return;}wsConnect();};
+  ['f-url','f-user','f-pass','f-token'].forEach(id=>{const el=$id(id);if(el)el.onkeydown=e=>{if(e.key==='Enter')bc?.click();};});
+  const ti=$id('term-in');
+  if(ti){ti.onkeydown=e=>{if(e.key==='Enter')sendTermCmd();else if(e.key==='ArrowUp')termHistNav(1);else if(e.key==='ArrowDown')termHistNav(-1);};}
+  setTimeout(()=>{const to=$id('term-out');if(to)to.scrollTop=to.scrollHeight;},0);
 }
-
-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 ----------
+function setTab(t){S.tab=t;S.selectedDevice=null;render();}
+function selectDev(id){S.selectedDevice=S.devices.find(d=>d._id===id);render();}
+function toggleGroup(id){S.expandedGroups[id]=!S.expandedGroups[id];render();}
+function doRefresh(){wsSend({action:'meshes'});wsSend({action:'nodes'});toast('Refreshing…');}
+function removeSaved(i){savedServers.splice(i,1);saveSaved();render();}
+function loadSavedIdx(i){const s=savedServers[i];if(s){S.serverUrl=s.url;S.username=s.username!=='(token)'?s.username:'';render();}}
+function quickTerminal(id){openTerminalFor(id);}
+function quickReboot(id,name){openSheet('Reboot',`Reboot ${name}?`,[{idx:0,label:'Reboot',danger:true,cb:()=>powerAction(id,3)}]);}
+function openTerminalFor(id){S.termNodeId=id;S.termLines=[];S.tab='terminal';S.selectedDevice=null;render();setTimeout(()=>$id('term-in')?.focus(),150);}
+function doDisconnect(){openSheet('Disconnect','Disconnect from the server?',[{idx:0,label:'Disconnect',danger:true,cb:disconnect}]);}
+function sendTermCmd(){const inp=$id('term-in');if(!inp?.value?.trim()||!S.termNodeId)return;const cmd=inp.value.trim();S.termHistory.unshift(cmd);if(S.termHistory.length>50)S.termHistory.pop();S.termHistIdx=-1;S.termLines.push({type:'cmd',text:cmd});wsSend({action:'msg',type:'console',nodeid:S.termNodeId,value:cmd});inp.value='';renderTermOutput();}
+function termHistNav(dir){const inp=$id('term-in');if(!inp)return;S.termHistIdx=Math.max(-1,Math.min(S.termHistory.length-1,S.termHistIdx+dir));inp.value=S.termHistIdx>=0?S.termHistory[S.termHistIdx]:'';}
+function termKey(k){const inp=$id('term-in');if(!inp||!S.termNodeId)return;if(k==='Ctrl+C'){S.termLines.push({type:'cmd',text:'^C'});wsSend({action:'msg',type:'console',nodeid:S.termNodeId,value:'\x03'});renderTermOutput();}else if(k==='Ctrl+D'){wsSend({action:'msg',type:'console',nodeid:S.termNodeId,value:'\x04'});}}
+function termInsert(text){const inp=$id('term-in');if(!inp)return;inp.value=text;inp.focus();}
+let _pt0=0;
+document.addEventListener('touchstart',e=>{const s=$id('main-scroll');_pt0=(s&&s.scrollTop===0)?e.touches[0].clientY:0;},{passive:true});
+document.addEventListener('touchend',e=>{if(_pt0&&e.changedTouches[0].clientY-_pt0>80&&S.connected&&S.view==='main')doRefresh();_pt0=0;},{passive:true});
+if('serviceWorker'in navigator){const sw=`self.addEventListener('install',()=>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)));});`;const blob=new Blob([sw],{type:'application/javascript'});navigator.serviceWorker.register(URL.createObjectURL(blob)).catch(()=>{});}
 render();
 </script>
 </body>