@dinko_abdic/claude-code-remote 0.1.1

package/ecosystem.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  apps: [
+    {
+      name: 'claude-code-remote',
+      script: 'src/index.js',
+      exec_mode: 'fork', // node-pty requires main thread
+      watch: false,
+      autorestart: true,
+      max_restarts: 10,
+      restart_delay: 1000,
+      log_date_format: 'YYYY-MM-DD HH:mm:ss',
+      error_file: './logs/error.log',
+      out_file: './logs/out.log',
+      merge_logs: true,
+    },
+  ],
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@dinko_abdic/claude-code-remote",
+  "version": "0.1.1",
+  "description": "WebSocket daemon that relays terminal sessions for Claude Code Remote",
+  "main": "src/index.js",
+  "bin": {
+    "claude-code-remote": "src/index.js"
+  },
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js",
+    "pm2:start": "pm2 start ecosystem.config.js",
+    "pm2:stop": "pm2 stop claude-code-remote",
+    "pm2:logs": "pm2 logs claude-code-remote"
+  },
+  "dependencies": {
+    "node-pty": "^1.0.0",
+    "qrcode": "^1.5.4",
+    "uuid": "^11.1.0",
+    "ws": "^8.18.0"
+  }
+}

package/src/auth.js

@@ -0,0 +1,43 @@
+const crypto = require('crypto');
+const { URL } = require('url');
+const logger = require('./logger');
+
+/**
+ * Authenticate a WebSocket upgrade request.
+ * Checks Authorization header first, then ?token= query param.
+ * Uses timing-safe comparison to prevent timing attacks.
+ */
+function authenticate(req, expectedToken) {
+  const tokenBuffer = Buffer.from(expectedToken, 'utf-8');
+
+  // Check Authorization: Bearer <token>
+  const authHeader = req.headers['authorization'];
+  if (authHeader) {
+    const match = authHeader.match(/^Bearer\s+(.+)$/i);
+    if (match) {
+      const provided = Buffer.from(match[1], 'utf-8');
+      if (provided.length === tokenBuffer.length && crypto.timingSafeEqual(provided, tokenBuffer)) {
+        return true;
+      }
+    }
+  }
+
+  // Check ?token= query param (for React Native — no custom header support)
+  try {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const queryToken = url.searchParams.get('token');
+    if (queryToken) {
+      const provided = Buffer.from(queryToken, 'utf-8');
+      if (provided.length === tokenBuffer.length && crypto.timingSafeEqual(provided, tokenBuffer)) {
+        return true;
+      }
+    }
+  } catch {
+    // malformed URL, ignore
+  }
+
+  logger.warn(`Auth failed from ${req.socket.remoteAddress}`);
+  return false;
+}
+
+module.exports = { authenticate };

package/src/config.js

@@ -0,0 +1,58 @@
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const { execSync } = require('child_process');
+const logger = require('./logger');
+
+const CONFIG_DIR = path.join(process.env.APPDATA || path.join(require('os').homedir(), '.config'), 'claude-code-remote');
+const CONFIG_PATH = path.join(CONFIG_DIR, 'config.json');
+
+function detectShell() {
+  const candidates = ['pwsh.exe', 'powershell.exe', 'cmd.exe'];
+  for (const shell of candidates) {
+    try {
+      execSync(`where ${shell}`, { stdio: 'ignore' });
+      logger.info(`Detected shell: ${shell}`);
+      return shell;
+    } catch {
+      // not found, try next
+    }
+  }
+  return 'cmd.exe'; // fallback
+}
+
+function loadOrCreate() {
+  // Ensure config directory exists
+  if (!fs.existsSync(CONFIG_DIR)) {
+    fs.mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+
+  if (fs.existsSync(CONFIG_PATH)) {
+    const raw = fs.readFileSync(CONFIG_PATH, 'utf-8');
+    const config = JSON.parse(raw);
+    logger.info(`Config loaded from ${CONFIG_PATH}`);
+    return config;
+  }
+
+  // First run — generate config
+  const config = {
+    token: crypto.randomBytes(32).toString('hex'),
+    port: 8485,
+    sandboxRoot: null,
+    shell: detectShell(),
+    defaultCwd: null,
+    sessionKeepAliveMinutes: 30,
+  };
+
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2), 'utf-8');
+  logger.info(`Config created at ${CONFIG_PATH}`);
+  logger.info('Auth token generated \u2014 see config file');
+  return config;
+}
+
+function saveConfig(config) {
+  fs.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2), 'utf-8');
+  logger.info('Config saved');
+}
+
+module.exports = { loadOrCreate, saveConfig, CONFIG_PATH };

package/src/dashboard.js

@@ -0,0 +1,357 @@
+const QRCode = require('qrcode');
+
+function escapeHtml(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+async function generateDashboard(config, tailscaleStatus, sessionCount, connectedDevices, showQr = true) {
+  let qrHtml = '';
+
+  if (!showQr) {
+    qrHtml = `
+      <div class="qr-section">
+        <div class="no-qr">
+          <p>QR code hidden</p>
+          <p class="qr-hint">Open dashboard from your PC (localhost) to see the setup QR code</p>
+        </div>
+      </div>`;
+  } else if (tailscaleStatus.ip) {
+    const payload = JSON.stringify({
+      type: 'ccr',
+      version: 1,
+      host: tailscaleStatus.ip,
+      port: config.port,
+      token: config.token,
+    });
+
+    try {
+      const dataUrl = await QRCode.toDataURL(payload, {
+        width: 280,
+        margin: 2,
+        color: { dark: '#d4d4d4', light: '#1e1e1e' },
+        errorCorrectionLevel: 'M',
+      });
+      qrHtml = `
+        <div class="qr-section">
+          <img src="${dataUrl}" alt="Setup QR Code" width="280" height="280" />
+          <p class="qr-hint">Scan with the Claude Code Remote app</p>
+        </div>`;
+    } catch {
+      qrHtml = '<p class="warning">Failed to generate QR code</p>';
+    }
+  } else {
+    qrHtml = `
+      <div class="qr-section">
+        <div class="no-qr">
+          <p>QR code unavailable</p>
+          <p class="qr-hint">${tailscaleStatus.error || 'Tailscale not connected'}</p>
+        </div>
+      </div>`;
+  }
+
+  const tsStatusClass = tailscaleStatus.running ? 'ok' : 'warn';
+  const tsStatusText = tailscaleStatus.running
+    ? `Connected — ${tailscaleStatus.ip}`
+    : tailscaleStatus.installed
+      ? 'Installed but not running'
+      : 'Not installed';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Claude Code Remote</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #1e1e1e;
+      color: #d4d4d4;
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .card {
+      background: #252526;
+      border: 1px solid #3c3c3c;
+      border-radius: 12px;
+      padding: 32px;
+      max-width: 400px;
+      width: 90%;
+      text-align: center;
+    }
+    h1 {
+      font-size: 22px;
+      font-weight: 700;
+      margin-bottom: 4px;
+    }
+    .subtitle {
+      color: #808080;
+      font-size: 13px;
+      margin-bottom: 24px;
+    }
+    .status-grid {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px 12px;
+      text-align: left;
+      margin-bottom: 24px;
+      font-size: 14px;
+    }
+    .status-label { color: #808080; }
+    .status-value { font-weight: 500; }
+    .ok { color: #4caf50; }
+    .warn { color: #ff9800; }
+    .qr-section { margin: 16px 0; }
+    .qr-section img {
+      border-radius: 8px;
+      border: 1px solid #3c3c3c;
+    }
+    .qr-hint {
+      color: #808080;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+    .no-qr {
+      background: #2d2d2d;
+      border: 1px dashed #3c3c3c;
+      border-radius: 8px;
+      padding: 40px 20px;
+      color: #808080;
+    }
+    .warning { color: #ff9800; }
+    .settings {
+      margin-top: 24px;
+      border-top: 1px solid #3c3c3c;
+      padding-top: 20px;
+      text-align: left;
+    }
+    .settings h2 {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+    .settings label {
+      display: block;
+      color: #808080;
+      font-size: 13px;
+      margin-bottom: 4px;
+    }
+    .settings input {
+      width: 100%;
+      background: #2d2d2d;
+      color: #d4d4d4;
+      border: 1px solid #3c3c3c;
+      border-radius: 6px;
+      padding: 8px 10px;
+      font-size: 14px;
+      font-family: monospace;
+      outline: none;
+    }
+    .devices-section {
+      margin-top: 16px;
+      margin-bottom: 24px;
+      text-align: left;
+    }
+    .devices-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+    .devices-header h2 {
+      font-size: 14px;
+      font-weight: 600;
+      color: #808080;
+    }
+    .devices-count {
+      font-size: 12px;
+      color: #808080;
+    }
+    .device-list {
+      list-style: none;
+    }
+    .device-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      background: #2d2d2d;
+      border-radius: 6px;
+      margin-bottom: 4px;
+      font-size: 13px;
+    }
+    .device-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #4caf50;
+      flex-shrink: 0;
+    }
+    .device-name {
+      font-weight: 500;
+      color: #d4d4d4;
+    }
+    .device-session {
+      color: #808080;
+      font-size: 12px;
+      margin-left: auto;
+    }
+    .no-devices {
+      color: #808080;
+      font-size: 13px;
+      padding: 12px 10px;
+      background: #2d2d2d;
+      border-radius: 6px;
+      border: 1px dashed #3c3c3c;
+    }
+    .settings input:focus { border-color: #da7756; }
+    .settings .save-btn {
+      margin-top: 10px;
+      background: #da7756;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+    .settings .save-btn:hover { background: #c5654a; }
+    .settings .save-msg {
+      display: inline-block;
+      margin-left: 10px;
+      font-size: 13px;
+      color: #4caf50;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Claude Code Remote</h1>
+    <p class="subtitle">Daemon Dashboard</p>
+
+    <div class="status-grid">
+      <span class="status-label">Tailscale</span>
+      <span class="status-value ${tsStatusClass}">${tsStatusText}</span>
+
+      <span class="status-label">Daemon Port</span>
+      <span class="status-value">${config.port}</span>
+
+      <span class="status-label">Sessions</span>
+      <span class="status-value" id="sessionCount">${sessionCount}</span>
+    </div>
+
+    <div class="devices-section" id="devicesSection">
+      <div class="devices-header">
+        <h2>Connected Devices</h2>
+      </div>
+      ${(connectedDevices && connectedDevices.length > 0)
+        ? `<ul class="device-list" id="deviceList">${connectedDevices.map(d =>
+            `<li class="device-item"><span class="device-dot"></span><span class="device-name">${escapeHtml(d.deviceName || 'Unknown device')}</span><span class="device-session">${escapeHtml(d.name)}</span></li>`
+          ).join('')}</ul>`
+        : '<p class="no-devices" id="deviceList">No devices connected</p>'
+      }
+    </div>
+
+    ${qrHtml}
+
+    <div class="settings">
+      <h2>Settings</h2>
+      <label>Default Directory</label>
+      <div style="display: flex; gap: 8px; align-items: center; margin-top: 4px">
+        <input type="text" id="defaultCwd" value="${(config.defaultCwd || '').replace(/"/g, '&quot;')}" placeholder="None (uses daemon working dir)" readonly style="flex:1; cursor: default; opacity: 0.8" />
+        <button class="save-btn" onclick="browseDir()" id="browseBtn" style="margin:0; white-space: nowrap">Browse...</button>
+      </div>
+      <div style="margin-top: 8px; display: flex; gap: 8px; align-items: center">
+        <button class="save-btn" onclick="saveSettings()">Save</button>
+        <button class="save-btn" onclick="clearDir()" style="background: #3c3c3c">Clear</button>
+        <span class="save-msg" id="saveMsg">Saved!</span>
+      </div>
+    </div>
+  </div>
+  <script>
+    async function browseDir() {
+      const btn = document.getElementById('browseBtn');
+      btn.textContent = 'Opening...';
+      btn.disabled = true;
+      try {
+        const res = await fetch('/api/pick-directory', { method: 'POST' });
+        const data = await res.json();
+        if (data.path) {
+          document.getElementById('defaultCwd').value = data.path;
+        }
+      } catch (err) {
+        alert('Failed to open folder picker: ' + err.message);
+      }
+      btn.textContent = 'Browse...';
+      btn.disabled = false;
+    }
+
+    function clearDir() {
+      document.getElementById('defaultCwd').value = '';
+    }
+
+    async function saveSettings() {
+      const defaultCwd = document.getElementById('defaultCwd').value.trim();
+      try {
+        const res = await fetch('/api/settings', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ defaultCwd }),
+        });
+        if (res.ok) {
+          const msg = document.getElementById('saveMsg');
+          msg.style.opacity = '1';
+          setTimeout(() => { msg.style.opacity = '0'; }, 2000);
+        }
+      } catch (err) {
+        alert('Failed to save: ' + err.message);
+      }
+    }
+
+    function esc(s) {
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    function renderDevices(devices) {
+      const section = document.getElementById('devicesSection');
+      if (!section) return;
+      let html = '<div class="devices-header"><h2>Connected Devices</h2></div>';
+      if (devices && devices.length > 0) {
+        html += '<ul class="device-list" id="deviceList">';
+        for (const d of devices) {
+          html += '<li class="device-item"><span class="device-dot"></span>'
+            + '<span class="device-name">' + esc(d.deviceName || 'Unknown device') + '</span>'
+            + '<span class="device-session">' + esc(d.name) + '</span></li>';
+        }
+        html += '</ul>';
+      } else {
+        html += '<p class="no-devices" id="deviceList">No devices connected</p>';
+      }
+      section.innerHTML = html;
+    }
+
+    // Poll status every 3 seconds
+    setInterval(async () => {
+      try {
+        const res = await fetch('/api/status');
+        if (res.ok) {
+          const data = await res.json();
+          document.getElementById('sessionCount').textContent = data.sessions;
+          renderDevices(data.connectedDevices);
+        }
+      } catch {}
+    }, 3000);
+  </script>
+</body>
+</html>`;
+}
+
+module.exports = { generateDashboard };