npm - nikcli-remote - Versions diffs - 1.0.1 → 1.0.2 - Mend

nikcli-remote 1.0.1 → 1.0.2

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 (11) hide show

package/dist/{chunk-QLGPGAPC.js → chunk-DRL7JX54.js} +225 -639
package/dist/index.cjs +225 -772
package/dist/index.d.cts +3 -78
package/dist/index.d.ts +3 -78
package/dist/index.js +4 -135
package/dist/{server-ISK4MDQQ.js → server-J7SPDGZO.js} +1 -1
package/package.json +1 -1
package/src/index.ts +4 -61
package/src/server.ts +3 -6
package/src/tunnel.ts +11 -7
package/src/web-client.ts +214 -593

package/dist/index.cjs CHANGED Viewed

@@ -5318,40 +5318,6 @@ var require_localtunnel = __commonJS({
 });
 // src/tunnel.ts
-async function checkTunnelAvailability(provider) {
-  try {
-    const { execSync } = await import("child_process");
-    switch (provider) {
-      case "localtunnel":
-        try {
-          await Promise.resolve().then(() => __toESM(require_localtunnel(), 1));
-          return true;
-        } catch {
-          execSync("npx localtunnel --version", { stdio: "pipe" });
-          return true;
-        }
-      case "cloudflared":
-        execSync("cloudflared --version", { stdio: "pipe" });
-        return true;
-      case "ngrok":
-        execSync("ngrok version", { stdio: "pipe" });
-        return true;
-      default:
-        return false;
-    }
-  } catch {
-    return false;
-  }
-}
-async function findAvailableTunnel() {
-  const providers = ["localtunnel", "cloudflared", "ngrok"];
-  for (const provider of providers) {
-    if (await checkTunnelAvailability(provider)) {
-      return provider;
-    }
-  }
-  return null;
-}
 var import_node_child_process2, TunnelManager;
 var init_tunnel = __esm({
   "src/tunnel.ts"() {
@@ -5422,7 +5388,7 @@ var init_tunnel = __esm({
        */
       createLocaltunnelCli(port) {
         return new Promise((resolve, reject) => {
-          this.process = (0, import_node_child_process2.spawn)("npx", ["localtunnel", "--port", port.toString()], {
+          this.process = (0, import_node_child_process2.spawn)("npx", ["localtunnel", "--port", port.toString(), "--print-requests", "false"], {
             stdio: ["pipe", "pipe", "pipe"],
             shell: true
           });
@@ -5439,8 +5405,7 @@ var init_tunnel = __esm({
               resolve(match[1]);
             }
           });
-          this.process.stderr?.on("data", (data) => {
-            output += data.toString();
+          this.process.stderr?.on("data", () => {
           });
           this.process.on("error", (error) => {
             clearTimeout(timeout);
@@ -5461,7 +5426,7 @@ var init_tunnel = __esm({
         return new Promise((resolve, reject) => {
           this.process = (0, import_node_child_process2.spawn)(
             "cloudflared",
-            ["tunnel", "--url", `http://localhost:${port}`],
+            ["tunnel", "--url", `http://localhost:${port}`, "--metrics", "localhost:0"],
             {
               stdio: ["pipe", "pipe", "pipe"]
             }
@@ -5498,7 +5463,7 @@ var init_tunnel = __esm({
        */
       createNgrok(port) {
         return new Promise((resolve, reject) => {
-          this.process = (0, import_node_child_process2.spawn)("ngrok", ["http", port.toString(), "--log=stdout"], {
+          this.process = (0, import_node_child_process2.spawn)("ngrok", ["http", port.toString(), "--log=stdout", "--log-level=info"], {
             stdio: ["pipe", "pipe", "pipe"]
           });
           let output = "";
@@ -5514,8 +5479,7 @@ var init_tunnel = __esm({
               resolve(match[1]);
             }
           });
-          this.process.stderr?.on("data", (data) => {
-            output += data.toString();
+          this.process.stderr?.on("data", () => {
           });
           this.process.on("error", (error) => {
             clearTimeout(timeout);
@@ -5539,649 +5503,278 @@ function getWebClient() {
 <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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="theme-color" content="#0d1117">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>NikCLI Remote</title>
   <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg: #0d1117;
+      --bg-primary: #0d1117;
       --bg-secondary: #161b22;
-      --fg: #e6edf3;
-      --fg-muted: #8b949e;
       --accent: #58a6ff;
       --success: #3fb950;
-      --warning: #d29922;
-      --error: #f85149;
       --border: #30363d;
-      --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
     }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      -webkit-tap-highlight-color: transparent;
-    }
-    html, body {
-      height: 100%;
-      background: var(--bg);
-      color: var(--fg);
-      font-family: var(--font-mono);
-      font-size: 14px;
-      overflow: hidden;
-      touch-action: manipulation;
-    }
-    #app {
+    html, body { height: 100%; overflow: hidden; touch-action: manipulation; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: #e6edf3;
       display: flex;
       flex-direction: column;
-      height: 100%;
-      height: 100dvh;
     }
-    /* Header */
-    #header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px 16px;
-      background: var(--bg-secondary);
-      border-bottom: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    #header h1 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--accent);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    #header h1::before {
-      content: '';
-      width: 10px;
-      height: 10px;
-      background: var(--accent);
-      border-radius: 2px;
-    }
-    #status {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      color: var(--fg-muted);
-    }
-    #status-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--error);
-      transition: background 0.3s;
-    }
-    #status-dot.connected {
-      background: var(--success);
-    }
-    #status-dot.connecting {
-      background: var(--warning);
-      animation: pulse 1s infinite;
-    }
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-    /* Terminal */
-    #terminal-container {
-      flex: 1;
-      overflow: hidden;
-      position: relative;
-    }
-    #terminal {
-      height: 100%;
-      padding: 12px;
-      overflow-y: auto;
-      overflow-x: hidden;
-      font-size: 13px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-      word-break: break-all;
-      -webkit-overflow-scrolling: touch;
-    }
-    #terminal::-webkit-scrollbar {
-      width: 6px;
-    }
-    #terminal::-webkit-scrollbar-track {
-      background: var(--bg);
-    }
-    #terminal::-webkit-scrollbar-thumb {
-      background: var(--border);
-      border-radius: 3px;
-    }
-    .cursor {
-      display: inline-block;
-      width: 8px;
-      height: 16px;
-      background: var(--fg);
-      animation: blink 1s step-end infinite;
-      vertical-align: text-bottom;
-    }
-    @keyframes blink {
-      50% { opacity: 0; }
-    }
-    /* Notifications */
-    #notifications {
-      position: fixed;
-      top: 60px;
-      left: 12px;
-      right: 12px;
-      z-index: 1000;
-      pointer-events: none;
-    }
-    .notification {
-      background: var(--bg-secondary);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 12px 16px;
-      margin-bottom: 8px;
-      animation: slideIn 0.3s ease;
-      pointer-events: auto;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-    }
-    .notification.success { border-left: 3px solid var(--success); }
-    .notification.error { border-left: 3px solid var(--error); }
-    .notification.warning { border-left: 3px solid var(--warning); }
-    .notification.info { border-left: 3px solid var(--accent); }
-    .notification h4 {
-      font-size: 14px;
-      font-weight: 600;
-      margin-bottom: 4px;
-    }
-    .notification p {
-      font-size: 12px;
-      color: var(--fg-muted);
-    }
-    @keyframes slideIn {
-      from { transform: translateY(-20px); opacity: 0; }
-      to { transform: translateY(0); opacity: 1; }
-    }
-    /* Quick Keys */
-    #quickkeys {
-      display: grid;
-      grid-template-columns: repeat(6, 1fr);
-      gap: 6px;
-      padding: 8px 12px;
-      background: var(--bg-secondary);
-      border-top: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    .qkey {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 6px;
-      padding: 10px 4px;
-      color: var(--fg);
-      font-size: 11px;
-      font-family: var(--font-mono);
-      text-align: center;
-      cursor: pointer;
-      user-select: none;
-      transition: background 0.1s, transform 0.1s;
-    }
-    .qkey:active {
-      background: var(--border);
-      transform: scale(0.95);
-    }
-    .qkey.wide {
-      grid-column: span 2;
-    }
-    .qkey.accent {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
-    }
-    /* Input */
-    #input-container {
-      padding: 12px;
+    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); }
+    #input-area {
       background: var(--bg-secondary);
       border-top: 1px solid var(--border);
+      padding: 12px 16px;
       flex-shrink: 0;
+      padding-bottom: env(safe-area-inset-bottom, 12px);
     }
-    #input-row {
-      display: flex;
-      gap: 8px;
-    }
-    #input {
+    .input-row { display: flex; gap: 8px; align-items: center; }
+    .prompt { color: var(--success); font-family: 'SF Mono', Monaco, monospace; font-size: 14px; white-space: nowrap; }
+    #cmd-input {
       flex: 1;
-      background: var(--bg);
+      background: #21262d;
       border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 12px 14px;
-      color: var(--fg);
-      font-family: var(--font-mono);
+      border-radius: 12px;
+      padding: 12px 16px;
+      color: #e6edf3;
       font-size: 16px;
+      font-family: 'SF Mono', Monaco, monospace;
       outline: none;
-      transition: border-color 0.2s;
-    }
-    #input:focus {
-      border-color: var(--accent);
-    }
-    #input::placeholder {
-      color: var(--fg-muted);
+      -webkit-appearance: none;
     }
-    #send {
+    #cmd-input:focus { border-color: var(--accent); }
+    #send-btn {
       background: var(--accent);
-      color: #fff;
+      color: white;
       border: none;
-      border-radius: 8px;
-      padding: 12px 20px;
-      font-size: 14px;
+      border-radius: 12px;
+      padding: 12px 24px;
+      font-size: 16px;
       font-weight: 600;
-      font-family: var(--font-mono);
       cursor: pointer;
-      transition: opacity 0.2s, transform 0.1s;
-    }
-    #send:active {
-      opacity: 0.8;
-      transform: scale(0.98);
+      -webkit-tap-highlight-color: transparent;
     }
-    /* Auth Screen */
-    #auth-screen {
-      position: fixed;
-      inset: 0;
-      background: var(--bg);
+    #send-btn:active { opacity: 0.7; }
+    #status-bar {
+      background: var(--bg-secondary);
+      border-bottom: 1px solid var(--border);
+      padding: 8px 16px;
       display: flex;
-      flex-direction: column;
+      justify-content: space-between;
       align-items: center;
-      justify-content: center;
-      gap: 20px;
-      z-index: 2000;
-    }
-    #auth-screen.hidden {
-      display: none;
-    }
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 3px solid var(--border);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    #auth-screen p {
-      color: var(--fg-muted);
-      font-size: 14px;
-    }
-    #auth-screen .error {
-      color: var(--error);
-    }
-    /* Safe area padding for notched devices */
-    @supports (padding: env(safe-area-inset-bottom)) {
-      #input-container {
-        padding-bottom: calc(12px + env(safe-area-inset-bottom));
-      }
-    }
-    /* Landscape adjustments */
-    @media (max-height: 500px) {
-      #quickkeys {
-        grid-template-columns: repeat(12, 1fr);
-        padding: 6px 8px;
-      }
-      .qkey {
-        padding: 8px 2px;
-        font-size: 10px;
-      }
-      #terminal {
-        font-size: 12px;
-      }
+      font-size: 12px;
+      padding-top: env(safe-area-inset-top, 8px);
+    }
+    .status-row { display: flex; align-items: center; gap: 8px; }
+    .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8b949e; }
+    .status-dot.connected { background: var(--success); box-shadow: 0 0 8px var(--success); }
+    .status-dot.connecting { background: var(--accent); animation: pulse 1s infinite; }
+    .status-dot.disconnected { background: #f85149; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    #auth-overlay {
+      position: fixed; inset: 0; background: var(--bg-primary);
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      padding: 20px; z-index: 100;
+    }
+    #auth-overlay.hidden { display: none; }
+    .auth-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
+    .auth-subtitle { color: #8b949e; font-size: 16px; margin-bottom: 24px; }
+    .auth-msg {
+      background: var(--bg-secondary); padding: 20px 28px;
+      border-radius: 16px; border: 1px solid var(--border); text-align: center;
+    }
+    .auth-msg.error { color: #f85149; border-color: #f85149; }
+    .quick-btns {
+      display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center;
+    }
+    .quick-btn {
+      background: #21262d; border: 1px solid var(--border); color: #e6edf3;
+      padding: 10px 16px; border-radius: 8px; font-size: 14px;
+      font-family: 'SF Mono', Monaco, monospace; cursor: pointer;
+    }
+    .quick-btn:active { background: #30363d; }
+    .hint { font-size: 12px; color: #8b949e; margin-top: 12px; }
+    @media (max-width: 600px) {
+      #input-area { padding: 10px 12px; }
+      .quick-btn { padding: 8px 12px; font-size: 12px; }
     }
   </style>
 </head>
 <body>
-  <div id="app">
-    <div id="auth-screen">
-      <div class="spinner"></div>
-      <p id="auth-status">Connecting to NikCLI...</p>
-    </div>
-    <header id="header">
-      <h1>NikCLI Remote</h1>
-      <div id="status">
-        <span id="status-dot" class="connecting"></span>
-        <span id="status-text">Connecting</span>
-      </div>
-    </header>
-    <div id="terminal-container">
-      <div id="terminal"></div>
+  <div id="auth-overlay">
+    <div class="auth-title">\u{1F4F1} NikCLI Remote</div>
+    <div class="auth-subtitle">Full terminal emulation</div>
+    <div id="auth-msg" class="auth-msg">
+      <div id="auth-text">Connecting...</div>
     </div>
-    <div id="notifications"></div>
-    <div id="quickkeys">
-      <button class="qkey" data-key="\\t">Tab</button>
-      <button class="qkey" data-key="\\x1b[A">\u2191</button>
-      <button class="qkey" data-key="\\x1b[B">\u2193</button>
-      <button class="qkey" data-key="\\x1b[D">\u2190</button>
-      <button class="qkey" data-key="\\x1b[C">\u2192</button>
-      <button class="qkey" data-key="\\x1b">Esc</button>
-      <button class="qkey" data-key="\\x03">^C</button>
-      <button class="qkey" data-key="\\x04">^D</button>
-      <button class="qkey" data-key="\\x1a">^Z</button>
-      <button class="qkey" data-key="\\x0c">^L</button>
-      <button class="qkey wide accent" data-key="\\r">Enter \u23CE</button>
+    <div class="quick-btns">
+      <button class="quick-btn" onclick="send('help')">/help</button>
+      <button class="quick-btn" onclick="send('ls -la')">ls -la</button>
+      <button class="quick-btn" onclick="send('pwd')">pwd</button>
+      <button class="quick-btn" onclick="send('whoami')">whoami</button>
+      <button class="quick-btn" onclick="send('clear')">clear</button>
     </div>
+    <div class="hint">Mobile keyboard to type commands</div>
+  </div>
-    <div id="input-container">
-      <div id="input-row">
-        <input type="text" id="input" placeholder="Type command..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
-        <button id="send">Send</button>
-      </div>
+  <div id="status-bar">
+    <div class="status-row">
+      <span class="status-dot" id="status-dot"></span>
+      <span id="status-text">Disconnected</span>
     </div>
+    <span id="session-id" style="color: #8b949e;"></span>
   </div>
-  <script>
-    (function() {
-      'use strict';
-      // Parse URL params
-      const params = new URLSearchParams(location.search);
-      const token = params.get('t');
-      const sessionId = params.get('s');
-      // DOM elements
-      const terminal = document.getElementById('terminal');
-      const input = document.getElementById('input');
-      const sendBtn = document.getElementById('send');
-      const statusDot = document.getElementById('status-dot');
-      const statusText = document.getElementById('status-text');
-      const authScreen = document.getElementById('auth-screen');
-      const authStatus = document.getElementById('auth-status');
-      const notifications = document.getElementById('notifications');
-      // State
-      let ws = null;
-      let reconnectAttempts = 0;
-      const maxReconnectAttempts = 5;
-      let terminalEnabled = true;
-      // Connect to WebSocket
-      function connect() {
-        const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        ws = new WebSocket(protocol + '//' + location.host);
+  <div id="terminal"></div>
-        ws.onopen = function() {
-          setStatus('connecting', 'Authenticating...');
-          ws.send(JSON.stringify({ type: 'auth', token: token }));
-        };
-        ws.onmessage = function(event) {
-          try {
-            const msg = JSON.parse(event.data);
-            handleMessage(msg);
-          } catch (e) {
-            console.error('Parse error:', e);
-          }
-        };
-        ws.onclose = function() {
-          setStatus('disconnected', 'Disconnected');
-          if (reconnectAttempts < maxReconnectAttempts) {
-            reconnectAttempts++;
-            const delay = Math.min(2000 * reconnectAttempts, 10000);
-            setTimeout(connect, delay);
-          } else {
-            authStatus.textContent = 'Connection failed. Refresh to retry.';
-            authStatus.classList.add('error');
-            authScreen.classList.remove('hidden');
-          }
-        };
-        ws.onerror = function() {
-          console.error('WebSocket error');
-        };
-      }
-      // Handle incoming message
-      function handleMessage(msg) {
-        switch (msg.type) {
-          case 'auth:required':
-            // Already sent auth on open
-            break;
-          case 'auth:success':
-            authScreen.classList.add('hidden');
-            setStatus('connected', 'Connected');
-            reconnectAttempts = 0;
-            terminalEnabled = msg.payload?.terminalEnabled !== false;
-            if (terminalEnabled) {
-              appendOutput('\\x1b[32mConnected to NikCLI\\x1b[0m\\n\\n');
-            }
-            break;
-          case 'auth:failed':
-            authStatus.textContent = 'Authentication failed';
-            authStatus.classList.add('error');
-            break;
-          case 'terminal:output':
-            if (msg.payload?.data) {
-              appendOutput(msg.payload.data);
-            }
-            break;
-          case 'terminal:exit':
-            appendOutput('\\n\\x1b[33m[Process exited with code ' + (msg.payload?.code || 0) + ']\\x1b[0m\\n');
-            break;
-          case 'notification':
-            showNotification(msg.payload);
-            break;
-          case 'session:end':
-            appendOutput('\\n\\x1b[31m[Session ended]\\x1b[0m\\n');
-            setStatus('disconnected', 'Session ended');
-            break;
-          case 'pong':
-            // Heartbeat response
-            break;
+  <div id="input-area">
+    <form class="input-row" onsubmit="return handleSubmit(event)">
+      <span class="prompt">$</span>
+      <input type="text" id="cmd-input" placeholder="Type command..." autocomplete="off" enterkeyhint="send" inputmode="text">
+      <button type="submit" id="send-btn">Send</button>
+    </form>
+  </div>
-          default:
-            console.log('Unknown message:', msg.type);
-        }
-      }
+  <!-- hterm from Google's Chromium -->
+  <script src="https://cdn.jsdelivr.net/npm/hterm@1.1.1/lib/hterm.js"></script>
+  <script>
+    let ws = null, term = null, connected = false, reconnectAttempts = 0;
+    const token = new URLSearchParams(location.search).get('t') || '';
+    const sessionId = new URLSearchParams(location.search).get('s') || '';
+    const authOverlay = document.getElementById('auth-overlay');
+    const authMsg = document.getElementById('auth-msg');
+    const authText = document.getElementById('auth-text');
+    const statusDot = document.getElementById('status-dot');
+    const statusText = document.getElementById('status-text');
+    const sessionSpan = document.getElementById('session-id');
+    const cmdInput = document.getElementById('cmd-input');
+    // Initialize hterm
+    hterm.DefaultCharWidth = 8.53;
+    hterm.DefaultRowHeight = 17;
+    const storage = new hterm.Storage.Memory();
+    const prefs = new hterm.Preferences(storage);
+    prefs.set('font-size', 14);
+    prefs.set('font-family', '"SF Mono", Monaco, Consolas, monospace');
+    prefs.set('background-color', '#0d1117');
+    prefs.set('foreground-color', '#e6edf3');
+    prefs.set('cursor-color', '#3fb950');
+    prefs.set('selection-color', '#264f78');
+    prefs.set('scrollbar-visible', false);
+    prefs.set('cursor-blink', true);
+    term = new hterm.Terminal(storage, prefs);
+    term.onTerminalReady = function() {
+      term.io.writeUTF8('\x1B[32mInitializing NikCLI Remote...\x1B[0m\r
+');
+      term.io.writeUTF8('\x1B[90mType commands below\x1B[0m\r
+');
+      connect();
+    };
+    term.decorate(document.getElementById('terminal'));
+    term.start();
-      // Append text to terminal with ANSI support
-      function appendOutput(text) {
-        // Simple ANSI to HTML conversion
-        const html = ansiToHtml(text);
-        terminal.innerHTML += html;
-        terminal.scrollTop = terminal.scrollHeight;
+    // Resize handler
+    window.addEventListener('resize', () => {
+      const el = document.getElementById('terminal');
+      if (term && el) {
+        term.setHeightAndWidth(el.clientHeight / 17, el.clientWidth / 8.53);
       }
+    });
-      // Basic ANSI to HTML
-      function ansiToHtml(text) {
-        const ansiColors = {
-          '30': '#6e7681', '31': '#f85149', '32': '#3fb950', '33': '#d29922',
-          '34': '#58a6ff', '35': '#bc8cff', '36': '#76e3ea', '37': '#e6edf3',
-          '90': '#6e7681', '91': '#f85149', '92': '#3fb950', '93': '#d29922',
-          '94': '#58a6ff', '95': '#bc8cff', '96': '#76e3ea', '97': '#ffffff'
-        };
-        let result = '';
-        let currentStyle = '';
-        const parts = text.split(/\\x1b\\[([0-9;]+)m/);
-        for (let i = 0; i < parts.length; i++) {
-          if (i % 2 === 0) {
-            // Text content
-            result += escapeHtml(parts[i]);
-          } else {
-            // ANSI code
-            const codes = parts[i].split(';');
-            for (const code of codes) {
-              if (code === '0') {
-                if (currentStyle) {
-                  result += '</span>';
-                  currentStyle = '';
-                }
-              } else if (code === '1') {
-                currentStyle = 'font-weight:bold;';
-                result += '<span style="' + currentStyle + '">';
-              } else if (ansiColors[code]) {
-                if (currentStyle) result += '</span>';
-                currentStyle = 'color:' + ansiColors[code] + ';';
-                result += '<span style="' + currentStyle + '">';
-              }
-            }
-          }
-        }
+    function connect() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(protocol + '//' + location.host + '/ws');
-        if (currentStyle) result += '</span>';
-        return result;
-      }
+      ws.onopen = () => {
+        setStatus('connecting', 'Authenticating...');
+        ws.send(JSON.stringify({ type: 'auth', token }));
+        reconnectAttempts = 0;
+      };
-      // Escape HTML
-      function escapeHtml(text) {
-        return text
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/\\n/g, '<br>')
-          .replace(/ /g, '&nbsp;');
-      }
+      ws.onmessage = (e) => {
+        try { handleMessage(JSON.parse(e.data)); } catch (err) { console.error(err); }
+      };
-      // Set connection status
-      function setStatus(state, text) {
-        statusDot.className = state === 'connected' ? 'connected' :
-                              state === 'connecting' ? 'connecting' : '';
-        statusText.textContent = text;
-      }
+      ws.onclose = () => {
+        setStatus('disconnected', 'Disconnected');
+        connected = false;
+        reconnectAttempts++;
+        setTimeout(connect, Math.min(3000, reconnectAttempts * 500));
+      };
-      // Send data to terminal
-      function send(data) {
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'terminal:input', data: data }));
-        }
-      }
+      ws.onerror = () => setStatus('disconnected', 'Connection error');
+    }
-      // Show notification
-      function showNotification(n) {
-        if (!n) return;
-        const el = document.createElement('div');
-        el.className = 'notification ' + (n.type || 'info');
-        el.innerHTML = '<h4>' + escapeHtml(n.title || 'Notification') + '</h4>' +
-                       '<p>' + escapeHtml(n.body || '') + '</p>';
-        notifications.appendChild(el);
-        setTimeout(function() { el.remove(); }, 5000);
+    function handleMessage(msg) {
+      switch (msg.type) {
+        case 'auth:required':
+          ws.send(JSON.stringify({ type: 'auth', token }));
+          break;
+        case 'auth:success':
+          connected = true;
+          authOverlay.classList.add('hidden');
+          setStatus('connected', 'Connected');
+          sessionSpan.textContent = sessionId ? 'Session: ' + sessionId : '';
+          term.io.writeUTF8('\r
+\x1B[32m\u2713 Connected to NikCLI\x1B[0m\r
+');
+          break;
+        case 'auth:failed':
+          authMsg.classList.add('error');
+          authText.textContent = 'Authentication failed';
+          break;
+        case 'terminal:output':
+          if (msg.payload?.data) term.io.writeUTF8(msg.payload.data);
+          break;
+        case 'terminal:exit':
+          term.io.writeUTF8('\r
+\x1B[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1B[0m\r
+');
+          break;
       }
+    }
-      // Event: Send button
-      sendBtn.onclick = function() {
-        if (input.value) {
-          send(input.value + '\\r');
-          input.value = '';
-        }
-        input.focus();
-      };
-      // Event: Enter key in input
-      input.onkeydown = function(e) {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          sendBtn.click();
-        }
-      };
+    function setStatus(state, text) {
+      statusDot.className = 'status-dot ' + state;
+      statusText.textContent = text;
+    }
-      // Event: Quick keys
-      document.querySelectorAll('.qkey').forEach(function(btn) {
-        btn.onclick = function() {
-          const key = btn.dataset.key;
-          const decoded = key
-            .replace(/\\\\x([0-9a-f]{2})/gi, function(_, hex) {
-              return String.fromCharCode(parseInt(hex, 16));
-            })
-            .replace(/\\\\t/g, '\\t')
-            .replace(/\\\\r/g, '\\r')
-            .replace(/\\\\n/g, '\\n');
-          send(decoded);
-          input.focus();
-        };
-      });
+    function handleSubmit(e) {
+      e?.preventDefault();
+      const value = cmdInput.value.trim();
+      if (!value || !connected) return;
+      cmdInput.value = '';
+      term.io.writeUTF8('$ ' + value + '\r
+');
+      ws.send(JSON.stringify({ type: 'terminal:input', data: value + '\r' }));
+      setTimeout(() => cmdInput.focus(), 50);
+      return false;
+    }
-      // Heartbeat
-      setInterval(function() {
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          ws.send(JSON.stringify({ type: 'ping' }));
-        }
-      }, 25000);
+    function send(cmd) {
+      if (!connected) return;
+      term.io.writeUTF8('$ ' + cmd + '\r
+');
+      ws.send(JSON.stringify({ type: 'terminal:input', data: cmd + '\r' }));
+    }
-      // Handle resize
-      function sendResize() {
-        if (ws && ws.readyState === WebSocket.OPEN) {
-          const cols = Math.floor(terminal.clientWidth / 8);
-          const rows = Math.floor(terminal.clientHeight / 18);
-          ws.send(JSON.stringify({ type: 'terminal:resize', cols: cols, rows: rows }));
-        }
+    cmdInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
       }
+    });
-      window.addEventListener('resize', sendResize);
-      setTimeout(sendResize, 1000);
-      // Start connection
-      if (token) {
-        connect();
-      } else {
-        authStatus.textContent = 'Invalid session URL';
-        authStatus.classList.add('error');
-      }
-    })();
+    document.getElementById('terminal')?.addEventListener('click', () => {
+      if (connected) cmdInput.focus();
+    });
   </script>
 </body>
 </html>`;
@@ -6283,6 +5876,7 @@ var init_server = __esm({
           });
           this.terminal.on("data", (data) => {
             this.broadcast({ type: MessageTypes.TERMINAL_OUTPUT, payload: { data } });
+            this.emit("terminal:output", data);
           });
           this.terminal.on("exit", (code) => {
             this.broadcast({ type: MessageTypes.TERMINAL_EXIT, payload: { code } });
@@ -6499,9 +6093,6 @@ var init_server = __esm({
        * Handle authentication
        */
       handleAuth(client, token) {
-        console.log(`[Tunnel] Auth attempt from ${client.id}, token length: ${token?.length || 0}`);
-        console.log(`[Tunnel] Expected secret: ${this.sessionSecret?.substring(0, 8)}...`);
-        console.log(`[Tunnel] Received token: ${token?.substring(0, 8)}...`);
         if (token === this.sessionSecret) {
           client.authenticated = true;
           if (this.session) {
@@ -6522,9 +6113,7 @@ var init_server = __esm({
             this.terminal?.start();
           }
           this.emit("client:connected", client.device);
-          console.log(`[Tunnel] Auth success for ${client.id}`);
         } else {
-          console.log(`[Tunnel] Auth failed for ${client.id}`);
           client.ws.send(JSON.stringify({ type: MessageTypes.AUTH_FAILED, timestamp: Date.now() }));
           setTimeout(() => client.ws.close(1008, "Authentication failed"), 100);
         }
@@ -6648,141 +6237,12 @@ __export(index_exports, {
   MessageTypes: () => MessageTypes,
   RemoteServer: () => RemoteServer,
   TerminalManager: () => TerminalManager,
-  TunnelManager: () => TunnelManager,
-  checkTunnelAvailability: () => checkTunnelAvailability,
   createRemoteServer: () => createRemoteServer,
-  findAvailableTunnel: () => findAvailableTunnel,
-  generateQR: () => generateQR,
-  generateQRDataURL: () => generateQRDataURL,
-  getWebClient: () => getWebClient,
-  progressBar: () => progressBar,
-  renderSessionCard: () => renderSessionCard
+  getWebClient: () => getWebClient
 });
 module.exports = __toCommonJS(index_exports);
 init_server();
 init_terminal();
-init_tunnel();
-// src/qrcode.ts
-var QRCode = null;
-try {
-  QRCode = require("qrcode");
-} catch {
-}
-async function generateQR(url, options = {}) {
-  if (!QRCode) {
-    return generateFallbackQR(url);
-  }
-  try {
-    const qrString = await QRCode.toString(url, {
-      type: "terminal",
-      small: options.small ?? true,
-      margin: options.margin ?? 1
-    });
-    return qrString;
-  } catch {
-    return generateFallbackQR(url);
-  }
-}
-async function generateQRDataURL(url) {
-  if (!QRCode) return null;
-  try {
-    return await QRCode.toDataURL(url, {
-      margin: 2,
-      width: 256,
-      color: {
-        dark: "#000000",
-        light: "#ffffff"
-      }
-    });
-  } catch {
-    return null;
-  }
-}
-function generateFallbackQR(url) {
-  return `
-\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
-\u2502                                     \u2502
-\u2502   QR Code generation unavailable    \u2502
-\u2502                                     \u2502
-\u2502   Install 'qrcode' package or       \u2502
-\u2502   visit the URL directly:           \u2502
-\u2502                                     \u2502
-\u2502   ${url.substring(0, 35)}${url.length > 35 ? "..." : ""}
-\u2502                                     \u2502
-\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518
-`;
-}
-async function renderSessionCard(session) {
-  const qr = await generateQR(session.qrUrl);
-  const statusIcon = getStatusIcon(session.status);
-  const statusColor = getStatusColor(session.status);
-  const lines = [
-    "",
-    "\u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E",
-    "\u2502           NikCLI Remote Session             \u2502",
-    "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F",
-    ""
-  ];
-  const qrLines = qr.split("\n").filter((l) => l.trim());
-  for (const line of qrLines) {
-    lines.push("  " + line);
-  }
-  lines.push("");
-  lines.push("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
-  lines.push("");
-  lines.push(`  Session:  ${session.id}`);
-  lines.push(`  Status:   ${statusColor}${statusIcon} ${session.status}\x1B[0m`);
-  lines.push(`  Devices:  ${session.connectedDevices.length} connected`);
-  lines.push("");
-  if (session.tunnelUrl) {
-    lines.push(`  \x1B[36mPublic URL:\x1B[0m`);
-    lines.push(`  ${session.tunnelUrl}`);
-  } else {
-    lines.push(`  \x1B[36mLocal URL:\x1B[0m`);
-    lines.push(`  ${session.localUrl}`);
-  }
-  lines.push("");
-  lines.push(`  \x1B[90mScan QR code or open URL on your phone\x1B[0m`);
-  lines.push("");
-  lines.push("\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500");
-  lines.push("  [q] Stop  [r] Refresh  [c] Copy URL");
-  lines.push("");
-  return lines.join("\n");
-}
-function getStatusIcon(status) {
-  const icons = {
-    starting: "\u25EF",
-    waiting: "\u25C9",
-    connected: "\u25CF",
-    stopped: "\u25CB",
-    error: "\u2716"
-  };
-  return icons[status] || "?";
-}
-function getStatusColor(status) {
-  const colors = {
-    starting: "\x1B[33m",
-    // Yellow
-    waiting: "\x1B[33m",
-    // Yellow
-    connected: "\x1B[32m",
-    // Green
-    stopped: "\x1B[90m",
-    // Gray
-    error: "\x1B[31m"
-    // Red
-  };
-  return colors[status] || "";
-}
-function progressBar(current, total, width = 30) {
-  const percent = Math.round(current / total * 100);
-  const filled = Math.round(current / total * width);
-  const empty = width - filled;
-  return `[${"\u2588".repeat(filled)}${"\u2591".repeat(empty)}] ${percent}%`;
-}
-// src/index.ts
 init_web_client();
 init_types();
 async function createRemoteServer(config = {}) {
@@ -6797,13 +6257,6 @@ async function createRemoteServer(config = {}) {
   MessageTypes,
   RemoteServer,
   TerminalManager,
-  TunnelManager,
-  checkTunnelAvailability,
   createRemoteServer,
-  findAvailableTunnel,
-  generateQR,
-  generateQRDataURL,
-  getWebClient,
-  progressBar,
-  renderSessionCard
+  getWebClient
 });