llmapi-v2 2.1.0

package/views/pages/remote.ejs

@@ -0,0 +1,334 @@
+<%- include('../partials/header', { pageTitle: 'Remote Terminal' }) %>
+
+<style>
+  html, body { height: 100%; margin: 0; }
+  body.terminal-active { overflow: hidden; }
+  body.terminal-active nav { display: none; }
+
+  .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+  .status-dot.ready { background: #22c55e; box-shadow: 0 0 6px #22c55e80; }
+  .status-dot.error { background: #ef4444; box-shadow: 0 0 6px #ef444480; }
+  .status-dot.connecting { background: #eab308; box-shadow: 0 0 6px #eab30880; }
+  .status-dot.waiting { background: #eab308; box-shadow: 0 0 6px #eab30880; animation: pulse-dot 1.5s infinite; }
+  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+  #terminal-container {
+    flex: 1;
+    overflow: hidden;
+    background: #1A1915;
+  }
+
+  #terminal-container .xterm {
+    height: 100%;
+    padding: 4px;
+  }
+
+  .top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: #232019;
+    border-bottom: 1px solid #3a362e;
+    min-height: 40px;
+    flex-shrink: 0;
+  }
+  .top-bar .left { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .top-bar .title { color: #e8e4de; font-size: 13px; font-weight: 600; }
+  .top-bar .session-id { color: #8a8578; font-size: 11px; font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
+  .top-bar .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
+  .top-bar .status-label { color: #8a8578; font-size: 11px; }
+  .top-bar .disconnect-btn {
+    font-size: 11px; padding: 4px 10px; border-radius: 6px;
+    background: #3a362e; color: #e8e4de; border: none; cursor: pointer;
+    font-weight: 500; transition: background 0.15s;
+  }
+  .top-bar .disconnect-btn:hover { background: #4a4639; }
+</style>
+
+<%- include('../partials/nav') %>
+
+<!-- ==================== SESSION INPUT VIEW ==================== -->
+<div id="session-select-view" class="hidden">
+  <div class="min-h-[calc(100vh-64px)] flex items-center justify-center px-4">
+    <div class="w-full max-w-md">
+      <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-8">
+        <div class="flex justify-center mb-6">
+          <div class="w-14 h-14 rounded-xl bg-claude-orange/10 flex items-center justify-center">
+            <svg class="w-7 h-7 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+            </svg>
+          </div>
+        </div>
+
+        <h1 class="text-xl font-bold text-claude-dark text-center mb-2">Remote Terminal</h1>
+        <p class="text-sm text-gray-500 text-center mb-6">Enter a session ID to connect to your Claude Code terminal</p>
+
+        <form id="session-form" onsubmit="connectToSession(event)">
+          <div class="mb-4">
+            <label for="session-id-input" class="block text-sm font-medium text-gray-700 mb-1.5">Session ID</label>
+            <input
+              type="text"
+              id="session-id-input"
+              placeholder="e.g. abc123-def456"
+              autocomplete="off"
+              spellcheck="false"
+              class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-all font-mono"
+            >
+          </div>
+          <button
+            type="submit"
+            class="w-full py-3 px-4 bg-claude-orange text-white text-sm font-medium rounded-xl hover:bg-claude-orange-hover transition-all shadow-sm hover:shadow"
+          >Connect</button>
+        </form>
+
+        <p class="text-xs text-gray-400 text-center mt-5">
+          Get a session ID by typing <code class="text-claude-orange font-mono bg-claude-orange/5 px-1.5 py-0.5 rounded">remote control</code> in Claude Code
+        </p>
+      </div>
+
+      <p class="text-center text-xs text-gray-400 mt-4">
+        Need help? See the <a href="/docs" class="text-claude-orange hover:underline">documentation</a>
+      </p>
+    </div>
+  </div>
+</div>
+
+<!-- ==================== TERMINAL VIEW ==================== -->
+<div id="terminal-view" class="hidden" style="display: none; flex-direction: column; height: 100vh; height: 100dvh;">
+  <div class="top-bar">
+    <div class="left">
+      <span id="status-dot" class="status-dot connecting"></span>
+      <span class="title">Remote Terminal</span>
+      <span id="session-id-display" class="session-id"></span>
+    </div>
+    <div class="right">
+      <span id="status-text" class="status-label">Connecting...</span>
+      <button class="disconnect-btn" onclick="disconnectSession()">Disconnect</button>
+    </div>
+  </div>
+  <div id="terminal-container"></div>
+</div>
+
+<script>
+  // Session selection handler (global scope)
+  function connectToSession(e) {
+    e.preventDefault();
+    var id = document.getElementById('session-id-input').value.trim();
+    if (!id) return;
+    window.location.href = '/remote?s=' + encodeURIComponent(id);
+  }
+
+  function disconnectSession() {
+    window.location.href = '/remote';
+  }
+</script>
+
+<script>
+(function() {
+  var sessionId = new URLSearchParams(window.location.search).get('s');
+
+  if (!sessionId) {
+    document.getElementById('session-select-view').classList.remove('hidden');
+    setTimeout(function() {
+      var inp = document.getElementById('session-id-input');
+      if (inp) inp.focus();
+    }, 100);
+    return;
+  }
+
+  // Show terminal view
+  var termView = document.getElementById('terminal-view');
+  termView.classList.remove('hidden');
+  termView.style.display = 'flex';
+  document.body.classList.add('terminal-active');
+
+  // Show session ID
+  var display = document.getElementById('session-id-display');
+  display.textContent = sessionId.length > 24 ? sessionId.slice(0, 8) + '...' + sessionId.slice(-8) : sessionId;
+  display.title = sessionId;
+
+  // Load xterm.js from CDN
+  var cssLink = document.createElement('link');
+  cssLink.rel = 'stylesheet';
+  cssLink.href = 'https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css';
+  document.head.appendChild(cssLink);
+
+  function loadScript(src, cb) {
+    var s = document.createElement('script');
+    s.src = src;
+    s.onload = cb;
+    document.head.appendChild(s);
+  }
+
+  loadScript('https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js', function() {
+    loadScript('https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js', function() {
+      initTerminal();
+    });
+  });
+
+  var term, fitAddon, ws;
+  var reconnectAttempts = 0;
+  var maxReconnects = 5;
+  var reconnectInterval = 3000;
+  var reconnectTimer = null;
+  var bridgeConnected = false;
+
+  function setStatus(state, text) {
+    var dot = document.getElementById('status-dot');
+    var label = document.getElementById('status-text');
+    dot.className = 'status-dot ' + state;
+    label.textContent = text;
+  }
+
+  function initTerminal() {
+    term = new Terminal({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
+      theme: {
+        background: '#1A1915',
+        foreground: '#e8e4de',
+        cursor: '#D97757',
+        cursorAccent: '#1A1915',
+        selectionBackground: '#D9775740',
+        black: '#1A1915',
+        red: '#ef4444',
+        green: '#22c55e',
+        yellow: '#eab308',
+        blue: '#3b82f6',
+        magenta: '#a855f7',
+        cyan: '#06b6d4',
+        white: '#e8e4de',
+        brightBlack: '#6b7280',
+        brightRed: '#f87171',
+        brightGreen: '#4ade80',
+        brightYellow: '#facc15',
+        brightBlue: '#60a5fa',
+        brightMagenta: '#c084fc',
+        brightCyan: '#22d3ee',
+        brightWhite: '#ffffff'
+      },
+      allowProposedApi: true,
+      scrollback: 5000
+    });
+
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+
+    var container = document.getElementById('terminal-container');
+    term.open(container);
+    fitAddon.fit();
+
+    window.addEventListener('resize', function() {
+      if (fitAddon) fitAddon.fit();
+    });
+
+    // Resize observer for container
+    if (window.ResizeObserver) {
+      new ResizeObserver(function() {
+        if (fitAddon) fitAddon.fit();
+      }).observe(container);
+    }
+
+    term.write('\x1b[1;33m Connecting to remote session...\x1b[0m\r\n');
+    connectWebSocket();
+  }
+
+  function connectWebSocket() {
+    var proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    var wsUrl = proto + '//' + window.location.host + '/remote-ws?session=' + encodeURIComponent(sessionId) + '&role=browser';
+
+    setStatus('connecting', 'Connecting...');
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = function() {
+      reconnectAttempts = 0;
+      if (bridgeConnected) {
+        setStatus('ready', 'Connected');
+        term.write('\x1b[1;32m Reconnected!\x1b[0m\r\n');
+      } else {
+        setStatus('waiting', 'Waiting for bridge...');
+        term.write('\x1b[1;33m Waiting for bridge daemon to connect...\x1b[0m\r\n');
+        term.write('\x1b[90m The bridge should start automatically from Claude Code.\x1b[0m\r\n');
+        term.write('\x1b[90m If it doesn\'t, run: llmapi-remote start --session ' + sessionId.slice(0, 8) + '...\x1b[0m\r\n\r\n');
+      }
+    };
+
+    ws.onmessage = function(evt) {
+      try {
+        var msg = JSON.parse(evt.data);
+        if (msg.type === 'output') {
+          term.write(atob(msg.data));
+        } else if (msg.type === 'bridge_connected') {
+          bridgeConnected = true;
+          setStatus('ready', 'Connected');
+          term.write('\r\n\x1b[1;32m Bridge connected! Starting Claude Code...\x1b[0m\r\n\r\n');
+        } else if (msg.type === 'bridge_disconnected') {
+          bridgeConnected = false;
+          setStatus('error', 'Bridge disconnected');
+          term.write('\r\n\x1b[1;31m Bridge disconnected.\x1b[0m\r\n');
+        }
+      } catch (e) {
+        // Non-JSON message: write raw
+        term.write(evt.data);
+      }
+    };
+
+    ws.onclose = function(evt) {
+      if (evt.code === 4003) {
+        setStatus('error', 'Auth failed');
+        term.write('\r\n\x1b[1;31m Authentication failed. Session may have expired.\x1b[0m\r\n');
+        return;
+      }
+      if (evt.code === 4001) {
+        setStatus('error', 'Invalid params');
+        term.write('\r\n\x1b[1;31m Connection rejected: invalid parameters.\x1b[0m\r\n');
+        return;
+      }
+
+      bridgeConnected = false;
+      setStatus('error', 'Disconnected');
+      term.write('\r\n\x1b[1;31m Connection lost.\x1b[0m');
+
+      if (reconnectAttempts < maxReconnects) {
+        reconnectAttempts++;
+        term.write(' \x1b[33mReconnecting (' + reconnectAttempts + '/' + maxReconnects + ')...\x1b[0m\r\n');
+        reconnectTimer = setTimeout(function() {
+          connectWebSocket();
+        }, reconnectInterval);
+      } else {
+        term.write(' \x1b[31mMax reconnection attempts reached. Refresh to try again.\x1b[0m\r\n');
+      }
+    };
+
+    ws.onerror = function() {
+      // onclose will handle reconnection
+    };
+
+    // Terminal input -> WebSocket
+    term.onData(function(data) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'input', data: btoa(data) }));
+      }
+    });
+
+    // Terminal resize -> WebSocket
+    term.onResize(function(size) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'resize', cols: size.cols, rows: size.rows }));
+      }
+    });
+  }
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', function() {
+    if (reconnectTimer) clearTimeout(reconnectTimer);
+    maxReconnects = 0; // prevent reconnect
+    if (ws) ws.close();
+  });
+})();
+</script>
+
+</body>
+</html>