npm - rms-devremote - Versions diffs - 3.0.0 - Mend

rms-devremote 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/README.md +154 -0
package/dist/commands/attach.d.ts +2 -0
package/dist/commands/attach.js +10 -0
package/dist/commands/check.d.ts +2 -0
package/dist/commands/check.js +210 -0
package/dist/commands/clean.d.ts +2 -0
package/dist/commands/clean.js +177 -0
package/dist/commands/dashboard.d.ts +2 -0
package/dist/commands/dashboard.js +57 -0
package/dist/commands/link.d.ts +2 -0
package/dist/commands/link.js +112 -0
package/dist/commands/ping.d.ts +2 -0
package/dist/commands/ping.js +21 -0
package/dist/commands/setup.d.ts +2 -0
package/dist/commands/setup.js +54 -0
package/dist/commands/status.d.ts +2 -0
package/dist/commands/status.js +65 -0
package/dist/commands/unlink.d.ts +2 -0
package/dist/commands/unlink.js +53 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +55 -0
package/dist/server/auth.d.ts +6 -0
package/dist/server/auth.js +32 -0
package/dist/server/frontend.d.ts +4 -0
package/dist/server/frontend.js +886 -0
package/dist/server/index.d.ts +1 -0
package/dist/server/index.js +283 -0
package/dist/server/terminal.d.ts +14 -0
package/dist/server/terminal.js +43 -0
package/dist/services/battery-worker.d.ts +1 -0
package/dist/services/battery-worker.js +2 -0
package/dist/services/battery.d.ts +27 -0
package/dist/services/battery.js +152 -0
package/dist/services/config.d.ts +63 -0
package/dist/services/config.js +84 -0
package/dist/services/docker.d.ts +25 -0
package/dist/services/docker.js +75 -0
package/dist/services/hooks.d.ts +15 -0
package/dist/services/hooks.js +111 -0
package/dist/services/ntfy.d.ts +19 -0
package/dist/services/ntfy.js +63 -0
package/dist/services/process.d.ts +30 -0
package/dist/services/process.js +90 -0
package/dist/services/proxy-worker.d.ts +1 -0
package/dist/services/proxy-worker.js +12 -0
package/dist/services/proxy.d.ts +4 -0
package/dist/services/proxy.js +195 -0
package/dist/services/shell.d.ts +22 -0
package/dist/services/shell.js +47 -0
package/dist/services/tmux.d.ts +30 -0
package/dist/services/tmux.js +74 -0
package/dist/services/ttyd.d.ts +28 -0
package/dist/services/ttyd.js +71 -0
package/dist/setup-server/routes.d.ts +4 -0
package/dist/setup-server/routes.js +177 -0
package/dist/setup-server/server.d.ts +4 -0
package/dist/setup-server/server.js +32 -0
package/docker/docker-compose.yml +24 -0
package/docker/ntfy/server.yml +6 -0
package/package.json +61 -0
package/scripts/claude-remote.sh +583 -0
package/scripts/hooks/notify.sh +68 -0
package/scripts/notify.sh +54 -0
package/scripts/startup.sh +29 -0
package/scripts/update-check.sh +25 -0
package/src/setup-server/public/index.html +21 -0
package/src/setup-server/public/setup.css +475 -0
package/src/setup-server/public/setup.js +687 -0

package/dist/server/frontend.js ADDED Viewed

@@ -0,0 +1,886 @@
+/**
+ * Generates the complete frontend HTML for the devremote terminal PWA.
+ */
+export function buildFrontendHTML() {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="theme-color" content="#000000">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="manifest" href="/manifest.json">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.svg">
+  <title>devremote</title>
+  <link rel="stylesheet" href="/xterm.css">
+  <style>${CSS}</style>
+</head>
+<body>
+  <!-- Loading screen -->
+  <div id="loading">
+    <div class="ld-logo">&gt;_</div>
+    <div class="ld-text">devremote</div>
+  </div>
+  <!-- Header -->
+  <header id="header" class="hidden">
+    <div class="h-left">
+      <span class="h-dot" id="status-dot"></span>
+      <span class="h-title">devremote</span>
+      <span class="h-status" id="status-text">connecting</span>
+    </div>
+    <div class="h-right">
+      <button class="h-btn" id="btn-kb" title="Keyboard">&#x2328;</button>
+      <button class="h-btn" id="btn-toggle" title="Toolbar">&#x2699;</button>
+    </div>
+  </header>
+  <!-- Info panel (slides down from header) -->
+  <div id="info-panel" class="hidden">
+    <div class="info-row"><span class="info-label">Status</span><span class="info-value" id="info-status">--</span></div>
+    <div class="info-row"><span class="info-label">Path</span><span class="info-value info-path" id="info-path">--</span></div>
+    <div class="info-row"><span class="info-label">tmux</span><span class="info-value" id="info-tmux">--</span></div>
+    <div class="info-row"><span class="info-label">Domain</span><span class="info-value" id="info-domain">--</span></div>
+    <div class="info-row"><span class="info-label">Uptime</span><span class="info-value" id="info-uptime">--</span></div>
+  </div>
+  <!-- Terminal -->
+  <div id="terminal-container" class="hidden"></div>
+  <!-- Disconnect screen -->
+  <div id="disconnect" class="hidden">
+    <div class="dc-card">
+      <div class="dc-icon">&gt;_</div>
+      <div class="dc-title" id="dc-title">No Terminal Connected</div>
+      <div class="dc-reason" id="dc-reason">Waiting for connection...</div>
+      <button class="dc-retry" id="dc-retry">Retry</button>
+      <div class="dc-hint">Run <code>rms-devremote link</code> on the host machine.</div>
+    </div>
+  </div>
+  <!-- Gesture hint (one-time) -->
+  <div id="gesture-hint" class="hidden">
+    <span>Swipe: &#x2191;&#x2193; arrows &bull; &#x2190; Esc &bull; &#x2192; Tab &bull; Double-tap: Enter</span>
+  </div>
+  <!-- Input bar -->
+  <div id="input-bar" class="hidden">
+    <input type="text" id="input-field" placeholder="command..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+    <button id="input-send" title="Send">&#x27A4;</button>
+  </div>
+  <!-- Normal toolbar -->
+  <div id="toolbar" class="hidden">
+    <div class="tb-row">
+      <button class="tb" data-key="ArrowLeft" data-repeat="true">&#x25C0;</button>
+      <button class="tb" data-key="ArrowUp" data-repeat="true">&#x25B2;</button>
+      <button class="tb" data-key="ArrowDown" data-repeat="true">&#x25BC;</button>
+      <button class="tb" data-key="ArrowRight" data-repeat="true">&#x25B6;</button>
+      <button class="tb accent" data-key="Enter">Enter</button>
+      <button class="tb" id="btn-bksp" data-repeat="true">&#x232B;</button>
+    </div>
+    <div class="tb-row">
+      <button class="tb" data-key="Escape">Esc</button>
+      <button class="tb" data-key="Tab">Tab</button>
+      <button class="tb" id="btn-y">Y</button>
+      <button class="tb" id="btn-n">N</button>
+      <button class="tb" data-ctrl="c">^C</button>
+      <button class="tb" id="btn-scroll">Scroll</button>
+    </div>
+  </div>
+  <!-- Scroll toolbar (shown in tmux copy-mode) -->
+  <div id="toolbar-scroll" class="hidden">
+    <div class="tb-row">
+      <button class="tb" id="scroll-up">&#x25B2; Up</button>
+      <button class="tb" id="scroll-down">&#x25BC; Down</button>
+      <button class="tb scroll-active" id="btn-scroll-exit">Exit</button>
+    </div>
+  </div>
+  <script src="/xterm.js"></script>
+  <script src="/xterm-addon-fit.js"></script>
+  <script src="/xterm-addon-web-links.js"></script>
+  <script>${JS}</script>
+</body>
+</html>`;
+}
+// ---------------------------------------------------------------------------
+// CSS
+// ---------------------------------------------------------------------------
+const CSS = `
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #000000;
+  --surface: #0a0a0a;
+  --surface2: #151515;
+  --accent: #00ffaa;
+  --accent-dim: #00cc88;
+  --danger: #ff3355;
+  --text: #e8e8e8;
+  --text-bright: #ffffff;
+  --muted: #888888;
+  --border: #333333;
+  --header-h: 44px;
+  --input-h: 48px;
+  --toolbar-h: 104px;
+  --safe-t: env(safe-area-inset-top, 0px);
+  --safe-b: env(safe-area-inset-bottom, 0px);
+  --safe-l: env(safe-area-inset-left, 0px);
+  --safe-r: env(safe-area-inset-right, 0px);
+}
+html, body {
+  height: 100%; width: 100%;
+  background: var(--bg); color: var(--text);
+  font-family: -apple-system, system-ui, sans-serif;
+  overflow: hidden;
+  -webkit-text-size-adjust: 100%;
+}
+body { touch-action: none; }
+.hidden { display: none !important; }
+/* ── Loading ────────────────────────────── */
+#loading {
+  position: fixed; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  background: var(--bg); z-index: 999;
+  animation: fadeOut 0.4s 1.2s forwards;
+}
+.ld-logo {
+  font-family: monospace; font-size: 56px; font-weight: 700;
+  color: var(--accent); text-shadow: 0 0 20px rgba(0,255,170,0.3);
+}
+.ld-text {
+  font-size: 15px; font-weight: 600; letter-spacing: 0.12em;
+  color: var(--muted); margin-top: 14px; text-transform: uppercase;
+}
+@keyframes fadeOut { to { opacity: 0; pointer-events: none; } }
+/* ── Header ─────────────────────────────── */
+#header {
+  position: fixed; top: 0; left: 0; right: 0;
+  height: calc(var(--header-h) + var(--safe-t));
+  padding-top: var(--safe-t);
+  padding-left: calc(14px + var(--safe-l));
+  padding-right: calc(14px + var(--safe-r));
+  background: var(--surface);
+  border-bottom: 2px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  z-index: 100;
+}
+.h-left { display: flex; align-items: center; gap: 10px; }
+.h-right { display: flex; align-items: center; gap: 8px; }
+.h-dot {
+  width: 10px; height: 10px; border-radius: 50%;
+  background: var(--danger); transition: background 0.3s, box-shadow 0.3s;
+  border: 1px solid rgba(255,255,255,0.1);
+}
+.h-dot.ok { background: var(--accent); box-shadow: 0 0 10px rgba(0,255,170,0.6); animation: pulse 2s infinite; }
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 10px rgba(0,255,170,0.5); }
+  50% { box-shadow: 0 0 18px rgba(0,255,170,0.9); }
+}
+.h-title { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-bright); }
+.h-status { font-size: 12px; color: var(--muted); font-weight: 500; }
+.h-btn {
+  background: var(--surface2); border: 2px solid var(--border); border-radius: 8px;
+  width: 36px; height: 36px;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--muted); font-size: 18px; cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.h-btn:active, .h-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(0,255,170,0.08); }
+/* ── Info panel ──────────────────────────── */
+#info-panel {
+  position: fixed;
+  top: calc(var(--header-h) + var(--safe-t));
+  left: 0; right: 0;
+  background: var(--surface);
+  border-bottom: 2px solid var(--border);
+  padding: 12px calc(14px + var(--safe-l)) 14px calc(14px + var(--safe-r));
+  z-index: 90;
+  display: flex; flex-direction: column; gap: 8px;
+  animation: slideDown 0.2s ease-out;
+}
+@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+#info-panel.hidden { display: none !important; }
+.info-row {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 4px 0;
+}
+.info-label { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
+.info-value { font-size: 14px; color: var(--text-bright); font-weight: 500; font-family: 'JetBrains Mono', monospace; }
+.info-value.ok { color: var(--accent); }
+.info-value.err { color: var(--danger); }
+.info-value.info-path { font-size: 12px; max-width: 60%; text-align: right; word-break: break-all; }
+/* ── Terminal ───────────────────────────── */
+#terminal-container {
+  position: fixed;
+  top: calc(var(--header-h) + var(--safe-t)); left: 0; right: 0;
+  bottom: calc(var(--input-h) + var(--toolbar-h) + var(--safe-b));
+  background: var(--bg);
+  opacity: 0; animation: fadeIn 0.3s 0.2s forwards;
+  overflow: hidden;
+}
+@keyframes fadeIn { to { opacity: 1; } }
+#terminal-container.no-input { bottom: calc(var(--toolbar-h) + var(--safe-b)); }
+#terminal-container.no-toolbar { bottom: calc(var(--input-h) + var(--safe-b)); }
+#terminal-container.no-input.no-toolbar { bottom: var(--safe-b); }
+.xterm { height: 100%; }
+.xterm-helper-textarea {
+  opacity: 0 !important;
+  position: absolute !important; left: -9999px !important; top: -9999px !important;
+}
+/* Auto-hide toolbar when keyboard is open */
+body.keyboard-open #toolbar { display: none !important; }
+body.keyboard-open #terminal-container { bottom: calc(var(--input-h) + var(--safe-b)) !important; }
+/* ── Disconnect screen ──────────────────── */
+#disconnect {
+  position: fixed; inset: 0;
+  background: var(--bg);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 150; animation: fadeIn 0.3s;
+}
+.dc-card {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 20px; padding: 40px 32px; max-width: 340px; text-align: center;
+}
+.dc-icon {
+  font-family: monospace; font-size: 64px; font-weight: 700;
+  color: var(--muted); opacity: 0.4;
+}
+.dc-icon.error { color: var(--danger); opacity: 0.7; }
+.dc-icon.loading { animation: pulse-icon 1.5s infinite; }
+@keyframes pulse-icon {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 0.6; }
+}
+.dc-title { font-size: 20px; font-weight: 700; color: var(--text-bright); }
+.dc-reason { font-size: 14px; color: var(--muted); line-height: 1.5; }
+.dc-retry {
+  padding: 14px 36px;
+  background: var(--accent); border: none; border-radius: 10px;
+  color: var(--bg); font-size: 16px; font-weight: 700;
+  cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background 0.15s; text-transform: uppercase; letter-spacing: 0.05em;
+}
+.dc-retry:active { background: var(--accent-dim); }
+.dc-hint { font-size: 13px; color: var(--muted); line-height: 1.6; }
+.dc-hint code {
+  background: var(--surface2); padding: 3px 8px; border-radius: 5px;
+  font-size: 12px; color: var(--accent); border: 1px solid var(--border);
+}
+/* ── Gesture hint ───────────────────────── */
+#gesture-hint {
+  position: fixed; bottom: calc(var(--input-h) + var(--toolbar-h) + var(--safe-b) + 10px);
+  left: 50%; transform: translateX(-50%);
+  background: var(--surface2); border: 1px solid var(--border);
+  border-radius: 10px; padding: 10px 18px;
+  font-size: 12px; color: var(--muted); white-space: nowrap;
+  z-index: 110; animation: fadeIn 0.3s, fadeOut 0.5s 4s forwards;
+}
+/* ── Input bar ──────────────────────────── */
+#input-bar {
+  position: fixed; left: 0; right: 0;
+  bottom: calc(var(--toolbar-h) + var(--safe-b));
+  height: var(--input-h);
+  background: var(--surface);
+  border-top: 2px solid var(--accent);
+  display: flex; align-items: center;
+  padding: 0 calc(10px + var(--safe-l)) 0 calc(10px + var(--safe-r));
+  gap: 8px; z-index: 100;
+}
+#input-field {
+  flex: 1; height: 38px;
+  background: #111111; border: 2px solid #444444;
+  border-radius: 8px; padding: 0 14px;
+  color: #ffffff; font-size: 17px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  outline: none; caret-color: var(--accent);
+}
+#input-field:focus { border-color: var(--accent); background: #1a1a1a; box-shadow: 0 0 8px rgba(0,255,170,0.15); }
+#input-field::placeholder { color: #999999; font-family: -apple-system, system-ui, sans-serif; font-size: 15px; }
+#input-send {
+  width: 48px; height: 38px;
+  background: var(--accent); border: none; border-radius: 8px;
+  color: var(--bg); font-size: 20px; font-weight: 700; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+}
+#input-send:active { background: var(--accent-dim); }
+/* ── Toolbar ────────────────────────────── */
+#toolbar {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  height: calc(var(--toolbar-h) + var(--safe-b));
+  padding: 6px calc(6px + var(--safe-l)) calc(6px + var(--safe-b)) calc(6px + var(--safe-r));
+  background: var(--surface);
+  border-top: 2px solid var(--border);
+  display: flex; flex-direction: column;
+  justify-content: center; gap: 6px; z-index: 100;
+}
+.tb-row { display: flex; gap: 5px; justify-content: center; }
+.tb {
+  display: flex; align-items: center; justify-content: center;
+  flex: 1; max-width: 72px; height: 44px;
+  background: var(--surface2); border: 2px solid var(--border);
+  border-radius: 10px; font-size: 15px; font-weight: 600;
+  color: var(--text-bright); cursor: pointer; user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background 0.08s, transform 0.06s;
+}
+.tb:active { background: #222222; transform: scale(0.92); border-color: var(--accent); }
+.tb.accent {
+  background: var(--accent); color: var(--bg);
+  font-weight: 800; border-color: var(--accent);
+}
+.tb.accent:active { background: var(--accent-dim); }
+.tb.scroll-active { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 800; }
+/* ── Scroll toolbar ─────────────────────── */
+#toolbar-scroll {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  height: calc(56px + var(--safe-b));
+  padding: 6px calc(8px + var(--safe-l)) calc(6px + var(--safe-b)) calc(8px + var(--safe-r));
+  background: var(--surface);
+  border-top: 3px solid var(--danger);
+  display: flex; flex-direction: column;
+  justify-content: center; z-index: 100;
+}
+#toolbar-scroll .tb { flex: 1; max-width: 140px; height: 44px; font-size: 16px; font-weight: 700; }
+#toolbar-scroll.hidden { display: none !important; }
+/* ── Landscape mode ─────────────────────── */
+@media (orientation: landscape) {
+  :root {
+    --header-h: 36px;
+    --input-h: 40px;
+    --toolbar-h: 52px;
+  }
+  .tb { height: 38px; font-size: 14px; max-width: 80px; }
+  .tb-row { gap: 4px; }
+  #toolbar { gap: 0; }
+  #toolbar .tb-row:last-child { display: none; }
+  .h-title { font-size: 13px; }
+  .h-btn { width: 32px; height: 32px; }
+  #input-field { height: 32px; font-size: 14px; }
+  #input-send { width: 38px; height: 32px; }
+  #toolbar-scroll { height: calc(46px + var(--safe-b)); }
+  #toolbar-scroll .tb { height: 38px; }
+}
+`;
+// ---------------------------------------------------------------------------
+// JS
+// ---------------------------------------------------------------------------
+const JS = `
+(function() {
+  'use strict';
+  var RECONNECT_DELAY = 2000;
+  var MAX_RECONNECT = 10;
+  var DOUBLE_TAP_MS = 300;
+  var VIBRATE = 10;
+  // ── Elements ─────────────────────────────────────────────
+  var loading = document.getElementById('loading');
+  var header = document.getElementById('header');
+  var container = document.getElementById('terminal-container');
+  var statusDot = document.getElementById('status-dot');
+  var statusText = document.getElementById('status-text');
+  var toolbar = document.getElementById('toolbar');
+  var inputBar = document.getElementById('input-bar');
+  var inputField = document.getElementById('input-field');
+  var inputSend = document.getElementById('input-send');
+  var btnToggle = document.getElementById('btn-toggle');
+  var btnKb = document.getElementById('btn-kb');
+  var disconnect = document.getElementById('disconnect');
+  var dcTitle = document.getElementById('dc-title');
+  var dcReason = document.getElementById('dc-reason');
+  var dcRetry = document.getElementById('dc-retry');
+  var dcIcon = document.querySelector('.dc-icon');
+  var gestureHint = document.getElementById('gesture-hint');
+  // ── Block zoom (but allow 2-finger scroll on terminal) ──
+  document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, { passive: false });
+  document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, { passive: false });
+  document.addEventListener('touchmove', function(e) {
+    if (e.touches.length > 1 && !container.contains(e.target)) e.preventDefault();
+  }, { passive: false });
+  // ── Terminal setup ───────────────────────────────────────
+  var term = new Terminal({
+    cursorBlink: true,
+    fontSize: 16,
+    fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace",
+    theme: {
+      background: '#000000',
+      foreground: '#e8e8e8',
+      cursor: '#00ffaa',
+      cursorAccent: '#000000',
+      selectionBackground: 'rgba(0, 255, 170, 0.2)',
+      black: '#151515', red: '#ff3355', green: '#00ffaa', yellow: '#ffcc00',
+      blue: '#4499ff', magenta: '#cc66ff', cyan: '#00ddff', white: '#e8e8e8',
+      brightBlack: '#666666', brightRed: '#ff6680', brightGreen: '#66ffcc',
+      brightYellow: '#ffdd55', brightBlue: '#77bbff', brightMagenta: '#dd88ff',
+      brightCyan: '#66eeff', brightWhite: '#ffffff'
+    },
+    allowProposedApi: true,
+    scrollback: 5000,
+    convertEol: true,
+    disableStdin: false
+  });
+  var fitAddon = new FitAddon.FitAddon();
+  var webLinksAddon = new WebLinksAddon.WebLinksAddon();
+  term.loadAddon(fitAddon);
+  term.loadAddon(webLinksAddon);
+  term.open(container);
+  setTimeout(function() { fitAddon.fit(); }, 100);
+  // ── Show app after loading ───────────────────────────────
+  setTimeout(function() {
+    loading.classList.add('hidden');
+    header.classList.remove('hidden');
+  }, 1600);
+  // ── WebSocket ────────────────────────────────────────────
+  var ws = null;
+  var reconnectAttempts = 0;
+  var reconnectTimer = null;
+  var connected = false;
+  function getWsUrl() {
+    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return proto + '//' + location.host + '/ws';
+  }
+  function showTerminal() {
+    disconnect.classList.add('hidden');
+    container.classList.remove('hidden');
+    inputBar.classList.remove('hidden');
+    toolbar.classList.remove('hidden');
+    connected = true;
+    setTimeout(doResize, 50);
+    showGestureHint();
+  }
+  function showDisconnect(title, reason, iconClass) {
+    container.classList.add('hidden');
+    inputBar.classList.add('hidden');
+    toolbar.classList.add('hidden');
+    disconnect.classList.remove('hidden');
+    dcTitle.textContent = title;
+    dcReason.textContent = reason;
+    dcIcon.className = 'dc-icon' + (iconClass ? ' ' + iconClass : '');
+    connected = false;
+  }
+  function connect() {
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return;
+    ws = new WebSocket(getWsUrl());
+    ws.onopen = function() {
+      reconnectAttempts = 0;
+      setStatus('connected', true);
+      showTerminal();
+      var dims = fitAddon.proposeDimensions();
+      ws.send(JSON.stringify({
+        type: 'init',
+        cols: dims ? dims.cols : 80,
+        rows: dims ? dims.rows : 24
+      }));
+    };
+    ws.onmessage = function(evt) {
+      try {
+        var msg = JSON.parse(evt.data);
+        if (msg.type === 'output') term.write(msg.data);
+        else if (msg.type === 'exit') {
+          showDisconnect('Session Ended', 'The tmux session has ended.', 'error');
+          setStatus('session ended', false);
+        }
+      } catch(e) {}
+    };
+    ws.onclose = function(evt) {
+      setStatus('disconnected', false);
+      if (evt.code === 1008 || evt.code === 4409) {
+        showDisconnect('Already Connected', 'Another client is already connected to this terminal.', 'error');
+      } else {
+        scheduleReconnect();
+      }
+    };
+    ws.onerror = function() {};
+  }
+  function scheduleReconnect() {
+    if (reconnectAttempts >= MAX_RECONNECT) {
+      showDisconnect('Connection Failed', 'Could not reach the server after ' + MAX_RECONNECT + ' attempts.', 'error');
+      setStatus('connection failed', false);
+      return;
+    }
+    reconnectAttempts++;
+    showDisconnect('Reconnecting...', 'Attempt ' + reconnectAttempts + ' of ' + MAX_RECONNECT, 'loading');
+    setStatus('reconnecting', false);
+    clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connect, RECONNECT_DELAY);
+  }
+  function setStatus(text, ok) {
+    statusText.textContent = text;
+    statusDot.classList.toggle('ok', ok);
+  }
+  function sendInput(data) {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data: data }));
+    }
+  }
+  // Retry button
+  dcRetry.addEventListener('click', function() {
+    reconnectAttempts = 0;
+    connect();
+  });
+  // Terminal keyboard input (desktop)
+  term.onData(function(data) { sendInput(data); });
+  // ── Input bar ────────────────────────────────────────────
+  // Input: use InputEvent.data to capture each keystroke.
+  // Don't clear the field (breaks mobile keyboards).
+  // The field shows what you typed — it's visual feedback.
+  inputField.addEventListener('input', function(e) {
+    if (e.inputType === 'insertText' && e.data) {
+      sendInput(e.data);
+    } else if (e.inputType === 'deleteContentBackward') {
+      sendInput('\\x7f');
+    } else if (e.inputType === 'insertLineBreak') {
+      sendInput('\\r');
+      inputField.value = '';
+      inputField.blur();
+    }
+  });
+  inputField.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      sendInput('\\r');
+      inputField.value = '';
+      inputField.blur();
+    }
+  });
+  inputSend.addEventListener('click', function() {
+    sendInput('\\r');
+    inputField.value = '';
+    inputField.blur();
+  });
+  // ── Keyboard toggle ──────────────────────────────────────
+  var kbVisible = true;
+  btnKb.addEventListener('click', function() {
+    kbVisible = !kbVisible;
+    inputBar.classList.toggle('hidden', !kbVisible);
+    container.classList.toggle('no-input', !kbVisible);
+    btnKb.classList.toggle('active', kbVisible);
+    if (kbVisible) inputField.focus();
+    setTimeout(doResize, 100);
+  });
+  // ── Virtual keyboard detection ───────────────────────────
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', function() {
+      var ratio = window.visualViewport.height / window.innerHeight;
+      document.body.classList.toggle('keyboard-open', ratio < 0.75);
+      setTimeout(doResize, 50);
+    });
+  }
+  // ── Resize ───────────────────────────────────────────────
+  function doResize() {
+    if (!connected) return;
+    fitAddon.fit();
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      var dims = fitAddon.proposeDimensions();
+      if (dims) ws.send(JSON.stringify({ type: 'resize', cols: dims.cols, rows: dims.rows }));
+    }
+  }
+  window.addEventListener('resize', function() { setTimeout(doResize, 150); });
+  window.addEventListener('orientationchange', function() { setTimeout(doResize, 300); });
+  // ── Toolbar buttons ──────────────────────────────────────
+  var KEY_MAP = {
+    ArrowUp: '\\x1b[A', ArrowDown: '\\x1b[B',
+    ArrowLeft: '\\x1b[D', ArrowRight: '\\x1b[C',
+    Enter: '\\r', Escape: '\\x1b', Tab: '\\t'
+  };
+  var holdTimer = null, holdInterval = null;
+  function handleButton(btn) {
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    btn.blur();
+    if (btn.id === 'btn-bksp') { sendInput('\\x7f'); return; }
+    var ctrlKey = btn.getAttribute('data-ctrl');
+    if (ctrlKey) { sendInput(String.fromCharCode(ctrlKey.toUpperCase().charCodeAt(0) - 64)); return; }
+    var key = btn.getAttribute('data-key');
+    if (key && KEY_MAP[key]) sendInput(KEY_MAP[key]);
+  }
+  // Prevent all toolbar/header buttons from taking focus (opens keyboard on mobile)
+  document.querySelectorAll('button').forEach(function(btn) {
+    btn.setAttribute('tabindex', '-1');
+  });
+  var buttons = document.querySelectorAll('#toolbar .tb');
+  for (var i = 0; i < buttons.length; i++) {
+    (function(btn) {
+      var canRepeat = btn.getAttribute('data-repeat') === 'true';
+      function start(e) {
+        e.preventDefault();
+        handleButton(btn);
+        if (canRepeat) {
+          holdTimer = setTimeout(function() {
+            holdInterval = setInterval(function() { handleButton(btn); }, 80);
+          }, 400);
+        }
+      }
+      function stop(e) {
+        e.preventDefault();
+        clearTimeout(holdTimer); clearInterval(holdInterval);
+      }
+      btn.addEventListener('touchstart', start, { passive: false });
+      btn.addEventListener('touchend', stop, { passive: false });
+      btn.addEventListener('touchcancel', stop, { passive: false });
+      btn.addEventListener('mousedown', start);
+      btn.addEventListener('mouseup', stop);
+      btn.addEventListener('mouseleave', stop);
+      btn.addEventListener('contextmenu', function(e) { e.preventDefault(); });
+    })(buttons[i]);
+  }
+  // ── Y / N buttons ────────────────────────────────────────
+  document.getElementById('btn-y').addEventListener('click', function(e) {
+    e.preventDefault();
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendInput('y');
+    sendInput('\\r');
+  });
+  document.getElementById('btn-n').addEventListener('click', function(e) {
+    e.preventDefault();
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendInput('n');
+    sendInput('\\r');
+  });
+  // ── Scroll via tmux copy-mode ─────────────────────────────
+  var scrollActive = false;
+  var scrollBtn = document.getElementById('btn-scroll');
+  var scrollExitBtn = document.getElementById('btn-scroll-exit');
+  var toolbarNormal = document.getElementById('toolbar');
+  var toolbarScroll = document.getElementById('toolbar-scroll');
+  var scrollUpBtn = document.getElementById('scroll-up');
+  var scrollDownBtn = document.getElementById('scroll-down');
+  function enterScrollMode() {
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendInput('\\x02['); // Ctrl-B [ = tmux copy-mode
+    scrollActive = true;
+    toolbarNormal.classList.add('hidden');
+    inputBar.classList.add('hidden');
+    toolbarScroll.classList.remove('hidden');
+    container.style.bottom = 'calc(50px + var(--safe-b))';
+    setTimeout(doResize, 100);
+  }
+  function exitScrollMode() {
+    if (navigator.vibrate) navigator.vibrate(VIBRATE);
+    sendInput('q'); // exit copy-mode
+    scrollActive = false;
+    toolbarScroll.classList.add('hidden');
+    toolbarNormal.classList.remove('hidden');
+    if (kbVisible) inputBar.classList.remove('hidden');
+    container.style.bottom = '';
+    setTimeout(doResize, 100);
+  }
+  scrollBtn.addEventListener('touchstart', function(e) { e.preventDefault(); enterScrollMode(); }, { passive: false });
+  scrollBtn.addEventListener('mousedown', function(e) { e.preventDefault(); enterScrollMode(); });
+  scrollExitBtn.addEventListener('touchstart', function(e) { e.preventDefault(); exitScrollMode(); }, { passive: false });
+  scrollExitBtn.addEventListener('mousedown', function(e) { e.preventDefault(); exitScrollMode(); });
+  // Scroll up/down with progressive acceleration
+  function bindScrollBtn(btn, direction) {
+    var ht = null, hi = null;
+    var speed = 1; // lines per tick, increases over time
+    function sendScrollKey() {
+      // Send multiple arrow keys based on current speed
+      var key = direction === 'up' ? '\\x1b[A' : '\\x1b[B';
+      for (var s = 0; s < Math.floor(speed); s++) sendInput(key);
+      speed = Math.min(speed * 1.15, 20); // accelerate up to 20 lines/tick
+    }
+    function start(e) {
+      e.preventDefault();
+      if (navigator.vibrate) navigator.vibrate(VIBRATE);
+      speed = 1;
+      sendScrollKey();
+      ht = setTimeout(function() {
+        hi = setInterval(sendScrollKey, 60);
+      }, 300);
+    }
+    function stop(e) {
+      e.preventDefault();
+      clearTimeout(ht);
+      clearInterval(hi);
+      speed = 1;
+    }
+    btn.addEventListener('touchstart', start, { passive: false });
+    btn.addEventListener('touchend', stop, { passive: false });
+    btn.addEventListener('touchcancel', stop, { passive: false });
+    btn.addEventListener('mousedown', start);
+    btn.addEventListener('mouseup', stop);
+    btn.addEventListener('mouseleave', stop);
+  }
+  bindScrollBtn(scrollUpBtn, 'up');
+  bindScrollBtn(scrollDownBtn, 'down');
+  // Double tap on terminal = Enter
+  var lastTapTime = 0;
+  var touchStartX = 0, touchStartY = 0;
+  container.addEventListener('touchstart', function(e) {
+    if (e.touches.length === 1) {
+      touchStartX = e.touches[0].clientX;
+      touchStartY = e.touches[0].clientY;
+    }
+  }, { passive: true });
+  container.addEventListener('touchend', function(e) {
+    if (e.changedTouches.length !== 1) return;
+    var dx = Math.abs(e.changedTouches[0].clientX - touchStartX);
+    var dy = Math.abs(e.changedTouches[0].clientY - touchStartY);
+    // Only count as tap if finger didn't move
+    if (dx > 15 || dy > 15) return;
+    var now = Date.now();
+    if (now - lastTapTime < DOUBLE_TAP_MS) {
+      sendInput('\\r');
+      if (navigator.vibrate) navigator.vibrate(VIBRATE);
+      lastTapTime = 0;
+      e.preventDefault();
+    } else {
+      lastTapTime = now;
+    }
+  }, { passive: false });
+  // ── Toolbar toggle ───────────────────────────────────────
+  btnToggle.addEventListener('click', function() {
+    toolbar.classList.toggle('hidden');
+    container.classList.toggle('no-toolbar');
+    setTimeout(doResize, 100);
+  });
+  // ── Prevent xterm textarea focus ─────────────────────────
+  function blockXtermFocus() {
+    var ta = document.querySelector('.xterm-helper-textarea');
+    if (ta && !ta.hasAttribute('readonly')) {
+      ta.setAttribute('readonly', 'true');
+      ta.setAttribute('tabindex', '-1');
+      ta.addEventListener('focus', function() { ta.blur(); });
+    }
+  }
+  blockXtermFocus();
+  new MutationObserver(blockXtermFocus).observe(container, { childList: true, subtree: true });
+  // ── Gesture hint (one-time) ──────────────────────────────
+  function showGestureHint() {
+    if (localStorage.getItem('dr-hint')) return;
+    gestureHint.classList.remove('hidden');
+    localStorage.setItem('dr-hint', '1');
+    setTimeout(function() { gestureHint.classList.add('hidden'); }, 5000);
+  }
+  // ── Service Worker ───────────────────────────────────────
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js').catch(function() {});
+  }
+  // ── Info panel ────────────────────────────────────────────
+  var infoPanel = document.getElementById('info-panel');
+  var infoOpen = false;
+  var hTitle = document.querySelector('.h-title');
+  hTitle.style.cursor = 'pointer';
+  hTitle.addEventListener('touchstart', function(e) { e.preventDefault(); toggleInfo(); }, { passive: false });
+  hTitle.addEventListener('click', toggleInfo);
+  function toggleInfo() {
+    infoOpen = !infoOpen;
+    infoPanel.classList.toggle('hidden', !infoOpen);
+    if (infoOpen) fetchInfo();
+  }
+  function fetchInfo() {
+    document.getElementById('info-domain').textContent = location.host;
+    fetch('/status', { credentials: 'same-origin' })
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        var tmuxEl = document.getElementById('info-tmux');
+        tmuxEl.textContent = d.tmux ? 'active' : 'not found';
+        tmuxEl.className = 'info-value ' + (d.tmux ? 'ok' : 'err');
+        document.getElementById('info-path').textContent = d.cwd || 'unknown';
+        var st = d.tmux ? 'online' : 'offline';
+        document.getElementById('info-status').textContent = st;
+        document.getElementById('info-status').className = 'info-value ' + (d.tmux ? 'ok' : 'err');
+      })
+      .catch(function() {
+        document.getElementById('info-status').textContent = 'unreachable';
+        document.getElementById('info-status').className = 'info-value err';
+      });
+    fetch('/health', { credentials: 'same-origin' })
+      .then(function(r) { return r.json(); })
+      .then(function(d) {
+        var mins = Math.floor(d.uptime / 60);
+        var hrs = Math.floor(mins / 60);
+        document.getElementById('info-uptime').textContent = hrs > 0 ? hrs + 'h ' + (mins % 60) + 'm' : mins + 'm';
+      })
+      .catch(function() {});
+  }
+  // ── Start ────────────────────────────────────────────────
+  // Wait for loading screen to finish
+  setTimeout(function() {
+    showDisconnect('Connecting...', 'Establishing connection to terminal...', 'loading');
+    connect();
+  }, 1700);
+})();
+`;