nikcli-remote 1.0.2 → 1.0.4

package/dist/{chunk-DRL7JX54.js → chunk-ONRUR3Z7.js}

@@ -1665,6 +1665,7 @@ function getWebClient() {
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>NikCLI Remote</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -1682,7 +1683,7 @@ function getWebClient() {
       display: flex;
       flex-direction: column;
     }
-    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); }
+    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); padding: 8px; }
     #input-area {
       background: var(--bg-secondary);
       border-top: 1px solid var(--border);
@@ -1797,10 +1798,10 @@ function getWebClient() {
     </form>
   </div>
 
-  <!-- hterm from Google's Chromium -->
-  <script src="https://cdn.jsdelivr.net/npm/hterm@1.1.1/lib/hterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
   <script>
-    let ws = null, term = null, connected = false, reconnectAttempts = 0;
+    let ws = null, term = null, fitAddon = null, connected = false, reconnectAttempts = 0;
     const token = new URLSearchParams(location.search).get('t') || '';
     const sessionId = new URLSearchParams(location.search).get('s') || '';
 
@@ -1812,40 +1813,57 @@ function getWebClient() {
     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);
+    // Initialize xterm.js
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"SF Mono", Monaco, Consolas, monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#3fb950',
+        selectionBackground: '#264f78',
+        black: '#484f58',
+        red: '#f85149',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#a371f7',
+        cyan: '#39c5cf',
+        white: '#e6edf3',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#7ee787',
+        brightYellow: '#f0883e',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4db',
+        brightWhite: '#f0f6fc'
+      },
+      convertEol: 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();
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById('terminal'));
+    fitAddon.fit();
+    term.writeln('\x1B[32mInitializing NikCLI Remote...\x1B[0m');
+    term.writeln('\x1B[90mType commands below\x1B[0m');
 
     // Resize handler
     window.addEventListener('resize', () => {
-      const el = document.getElementById('terminal');
-      if (term && el) {
-        term.setHeightAndWidth(el.clientHeight / 17, el.clientWidth / 8.53);
-      }
+      clearTimeout(window.resizeTimer);
+      window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
     });
 
+    // Visual viewport for mobile keyboard
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', () => {
+        clearTimeout(window.resizeTimer);
+        window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
+      });
+    }
+
     function connect() {
       const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
       ws = new WebSocket(protocol + '//' + location.host + '/ws');
@@ -1880,8 +1898,8 @@ function getWebClient() {
           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
+          term.writeln('
+\x1B[32m\u2713 Connected to NikCLI\x1B[0m
 ');
           break;
         case 'auth:failed':
@@ -1889,11 +1907,11 @@ function getWebClient() {
           authText.textContent = 'Authentication failed';
           break;
         case 'terminal:output':
-          if (msg.payload?.data) term.io.writeUTF8(msg.payload.data);
+          if (msg.payload?.data) term.write(msg.payload.data);
           break;
         case 'terminal:exit':
-          term.io.writeUTF8('\r
-\x1B[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1B[0m\r
+          term.writeln('
+\x1B[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1B[0m
 ');
           break;
       }
@@ -1909,7 +1927,7 @@ function getWebClient() {
       const value = cmdInput.value.trim();
       if (!value || !connected) return;
       cmdInput.value = '';
-      term.io.writeUTF8('$ ' + value + '\r
+      term.write('$ ' + value + '\r
 ');
       ws.send(JSON.stringify({ type: 'terminal:input', data: value + '\r' }));
       setTimeout(() => cmdInput.focus(), 50);
@@ -1918,7 +1936,7 @@ function getWebClient() {
 
     function send(cmd) {
       if (!connected) return;
-      term.io.writeUTF8('$ ' + cmd + '\r
+      term.write('$ ' + cmd + '\r
 ');
       ws.send(JSON.stringify({ type: 'terminal:input', data: cmd + '\r' }));
     }
@@ -1933,6 +1951,8 @@ function getWebClient() {
     document.getElementById('terminal')?.addEventListener('click', () => {
       if (connected) cmdInput.focus();
     });
+
+    connect();
   </script>
 </body>
 </html>`;

package/dist/index.cjs

@@ -5507,6 +5507,7 @@ function getWebClient() {
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>NikCLI Remote</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -5524,7 +5525,7 @@ function getWebClient() {
       display: flex;
       flex-direction: column;
     }
-    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); }
+    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); padding: 8px; }
     #input-area {
       background: var(--bg-secondary);
       border-top: 1px solid var(--border);
@@ -5639,10 +5640,10 @@ function getWebClient() {
     </form>
   </div>
 
-  <!-- hterm from Google's Chromium -->
-  <script src="https://cdn.jsdelivr.net/npm/hterm@1.1.1/lib/hterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
   <script>
-    let ws = null, term = null, connected = false, reconnectAttempts = 0;
+    let ws = null, term = null, fitAddon = null, connected = false, reconnectAttempts = 0;
     const token = new URLSearchParams(location.search).get('t') || '';
     const sessionId = new URLSearchParams(location.search).get('s') || '';
 
@@ -5654,40 +5655,57 @@ function getWebClient() {
     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);
+    // Initialize xterm.js
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"SF Mono", Monaco, Consolas, monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#3fb950',
+        selectionBackground: '#264f78',
+        black: '#484f58',
+        red: '#f85149',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#a371f7',
+        cyan: '#39c5cf',
+        white: '#e6edf3',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#7ee787',
+        brightYellow: '#f0883e',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4db',
+        brightWhite: '#f0f6fc'
+      },
+      convertEol: 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();
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById('terminal'));
+    fitAddon.fit();
+    term.writeln('\x1B[32mInitializing NikCLI Remote...\x1B[0m');
+    term.writeln('\x1B[90mType commands below\x1B[0m');
 
     // Resize handler
     window.addEventListener('resize', () => {
-      const el = document.getElementById('terminal');
-      if (term && el) {
-        term.setHeightAndWidth(el.clientHeight / 17, el.clientWidth / 8.53);
-      }
+      clearTimeout(window.resizeTimer);
+      window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
     });
 
+    // Visual viewport for mobile keyboard
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', () => {
+        clearTimeout(window.resizeTimer);
+        window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
+      });
+    }
+
     function connect() {
       const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
       ws = new WebSocket(protocol + '//' + location.host + '/ws');
@@ -5722,8 +5740,8 @@ function getWebClient() {
           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
+          term.writeln('
+\x1B[32m\u2713 Connected to NikCLI\x1B[0m
 ');
           break;
         case 'auth:failed':
@@ -5731,11 +5749,11 @@ function getWebClient() {
           authText.textContent = 'Authentication failed';
           break;
         case 'terminal:output':
-          if (msg.payload?.data) term.io.writeUTF8(msg.payload.data);
+          if (msg.payload?.data) term.write(msg.payload.data);
           break;
         case 'terminal:exit':
-          term.io.writeUTF8('\r
-\x1B[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1B[0m\r
+          term.writeln('
+\x1B[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1B[0m
 ');
           break;
       }
@@ -5751,7 +5769,7 @@ function getWebClient() {
       const value = cmdInput.value.trim();
       if (!value || !connected) return;
       cmdInput.value = '';
-      term.io.writeUTF8('$ ' + value + '\r
+      term.write('$ ' + value + '\r
 ');
       ws.send(JSON.stringify({ type: 'terminal:input', data: value + '\r' }));
       setTimeout(() => cmdInput.focus(), 50);
@@ -5760,7 +5778,7 @@ function getWebClient() {
 
     function send(cmd) {
       if (!connected) return;
-      term.io.writeUTF8('$ ' + cmd + '\r
+      term.write('$ ' + cmd + '\r
 ');
       ws.send(JSON.stringify({ type: 'terminal:input', data: cmd + '\r' }));
     }
@@ -5775,6 +5793,8 @@ function getWebClient() {
     document.getElementById('terminal')?.addEventListener('click', () => {
       if (connected) cmdInput.focus();
     });
+
+    connect();
   </script>
 </body>
 </html>`;

package/dist/index.d.cts

@@ -285,7 +285,7 @@ declare class TerminalManager extends EventEmitter {
 
 /**
  * @nikcli/remote - Ghostty-web Style Terminal Client
- * Uses hterm for full terminal emulation
+ * Uses xterm.js with full terminal emulation
  */
 declare function getWebClient(): string;
 

package/dist/index.d.ts

@@ -285,7 +285,7 @@ declare class TerminalManager extends EventEmitter {
 
 /**
  * @nikcli/remote - Ghostty-web Style Terminal Client
- * Uses hterm for full terminal emulation
+ * Uses xterm.js with full terminal emulation
  */
 declare function getWebClient(): string;
 

package/dist/index.js

@@ -4,12 +4,12 @@ import {
   RemoteServer,
   TerminalManager,
   getWebClient
-} from "./chunk-DRL7JX54.js";
+} from "./chunk-ONRUR3Z7.js";
 import "./chunk-MCKGQKYU.js";
 
 // src/index.ts
 async function createRemoteServer(config = {}) {
-  const { RemoteServer: RemoteServer2 } = await import("./server-J7SPDGZO.js");
+  const { RemoteServer: RemoteServer2 } = await import("./server-MURDBK6L.js");
   const server = new RemoteServer2(config);
   const session = await server.start();
   return { server, session };

package/dist/{server-J7SPDGZO.js → server-MURDBK6L.js}

@@ -1,6 +1,6 @@
 import {
   RemoteServer
-} from "./chunk-DRL7JX54.js";
+} from "./chunk-ONRUR3Z7.js";
 import "./chunk-MCKGQKYU.js";
 export {
   RemoteServer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nikcli-remote",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Native remote terminal server for NikCLI - Mobile control via WebSocket",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/web-client.ts

@@ -1,6 +1,6 @@
 /**
  * @nikcli/remote - Ghostty-web Style Terminal Client
- * Uses hterm for full terminal emulation
+ * Uses xterm.js with full terminal emulation
  */
 
 export function getWebClient(): string {
@@ -12,6 +12,7 @@ export function getWebClient(): string {
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>NikCLI Remote</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" />
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -29,7 +30,7 @@ export function getWebClient(): string {
       display: flex;
       flex-direction: column;
     }
-    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); }
+    #terminal { flex: 1; overflow: hidden; background: var(--bg-primary); padding: 8px; }
     #input-area {
       background: var(--bg-secondary);
       border-top: 1px solid var(--border);
@@ -144,10 +145,10 @@ export function getWebClient(): string {
     </form>
   </div>
 
-  <!-- hterm from Google's Chromium -->
-  <script src="https://cdn.jsdelivr.net/npm/hterm@1.1.1/lib/hterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
   <script>
-    let ws = null, term = null, connected = false, reconnectAttempts = 0;
+    let ws = null, term = null, fitAddon = null, connected = false, reconnectAttempts = 0;
     const token = new URLSearchParams(location.search).get('t') || '';
     const sessionId = new URLSearchParams(location.search).get('s') || '';
 
@@ -159,38 +160,57 @@ export function getWebClient(): string {
     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);
+    // Initialize xterm.js
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"SF Mono", Monaco, Consolas, monospace',
+      theme: {
+        background: '#0d1117',
+        foreground: '#e6edf3',
+        cursor: '#3fb950',
+        selectionBackground: '#264f78',
+        black: '#484f58',
+        red: '#f85149',
+        green: '#3fb950',
+        yellow: '#d29922',
+        blue: '#58a6ff',
+        magenta: '#a371f7',
+        cyan: '#39c5cf',
+        white: '#e6edf3',
+        brightBlack: '#6e7681',
+        brightRed: '#ffa198',
+        brightGreen: '#7ee787',
+        brightYellow: '#f0883e',
+        brightBlue: '#79c0ff',
+        brightMagenta: '#d2a8ff',
+        brightCyan: '#56d4db',
+        brightWhite: '#f0f6fc'
+      },
+      convertEol: true
+    });
 
-    term = new hterm.Terminal(storage, prefs);
-    term.onTerminalReady = function() {
-      term.io.writeUTF8('\x1b[32mInitializing NikCLI Remote...\x1b[0m\r\n');
-      term.io.writeUTF8('\x1b[90mType commands below\x1b[0m\r\n');
-      connect();
-    };
-    term.decorate(document.getElementById('terminal'));
-    term.start();
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById('terminal'));
+    fitAddon.fit();
+    term.writeln('\x1b[32mInitializing NikCLI Remote...\x1b[0m');
+    term.writeln('\x1b[90mType commands below\x1b[0m');
 
     // Resize handler
     window.addEventListener('resize', () => {
-      const el = document.getElementById('terminal');
-      if (term && el) {
-        term.setHeightAndWidth(el.clientHeight / 17, el.clientWidth / 8.53);
-      }
+      clearTimeout(window.resizeTimer);
+      window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
     });
 
+    // Visual viewport for mobile keyboard
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', () => {
+        clearTimeout(window.resizeTimer);
+        window.resizeTimer = setTimeout(() => fitAddon.fit(), 100);
+      });
+    }
+
     function connect() {
       const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
       ws = new WebSocket(protocol + '//' + location.host + '/ws');
@@ -225,17 +245,17 @@ export function getWebClient(): string {
           authOverlay.classList.add('hidden');
           setStatus('connected', 'Connected');
           sessionSpan.textContent = sessionId ? 'Session: ' + sessionId : '';
-          term.io.writeUTF8('\r\n\x1b[32m✓ Connected to NikCLI\x1b[0m\r\n');
+          term.writeln('\n\x1b[32m✓ Connected to NikCLI\x1b[0m\n');
           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);
+          if (msg.payload?.data) term.write(msg.payload.data);
           break;
         case 'terminal:exit':
-          term.io.writeUTF8('\r\n\x1b[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1b[0m\r\n');
+          term.writeln('\n\x1b[33m[Process exited: ' + (msg.payload?.code || 0) + ']\x1b[0m\n');
           break;
       }
     }
@@ -250,7 +270,7 @@ export function getWebClient(): string {
       const value = cmdInput.value.trim();
       if (!value || !connected) return;
       cmdInput.value = '';
-      term.io.writeUTF8('$ ' + value + '\r\n');
+      term.write('$ ' + value + '\r\n');
       ws.send(JSON.stringify({ type: 'terminal:input', data: value + '\r' }));
       setTimeout(() => cmdInput.focus(), 50);
       return false;
@@ -258,7 +278,7 @@ export function getWebClient(): string {
 
     function send(cmd) {
       if (!connected) return;
-      term.io.writeUTF8('$ ' + cmd + '\r\n');
+      term.write('$ ' + cmd + '\r\n');
       ws.send(JSON.stringify({ type: 'terminal:input', data: cmd + '\r' }));
     }
 
@@ -272,6 +292,8 @@ export function getWebClient(): string {
     document.getElementById('terminal')?.addEventListener('click', () => {
       if (connected) cmdInput.focus();
     });
+
+    connect();
   </script>
 </body>
 </html>`;