conduit-mobile 0.1.0

package/src/client/style.css

@@ -0,0 +1,320 @@
+/* ── Reset & base ─────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:        #0d0d0d;
+  --surface:   #161616;
+  --border:    #2a2a2a;
+  --accent:    #f97316;   /* orange — Claude-ish */
+  --accent-dim:#7c3910;
+  --text:      #e8e8e8;
+  --text-dim:  #666;
+  --tab-h:     48px;
+  --input-h:   64px;
+  --safe-b:    env(safe-area-inset-bottom, 0px);
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ── Screens ──────────────────────────────────────────────────────────────── */
+.screen { display: none; width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
+.screen.active { display: flex; }
+
+/* ── Auth ─────────────────────────────────────────────────────────────────── */
+#auth-screen {
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+}
+
+.auth-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 90%;
+  max-width: 360px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+.logo-icon { font-size: 2rem; }
+.logo-text  { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; }
+
+.auth-hint { color: var(--text-dim); font-size: 0.875rem; text-align: center; }
+
+#token-input {
+  width: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font-size: 1.1rem;
+  letter-spacing: 2px;
+  padding: 14px 16px;
+  text-align: center;
+  outline: none;
+}
+#token-input:focus { border-color: var(--accent); }
+
+#connect-btn {
+  width: 100%;
+  background: var(--accent);
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 14px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+#connect-btn:active { opacity: 0.8; }
+
+.error { color: #f87171; font-size: 0.85rem; }
+.hidden { display: none !important; }
+
+/* ── App layout ───────────────────────────────────────────────────────────── */
+#app-screen {
+  flex-direction: column;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+/* ── Tab bar ──────────────────────────────────────────────────────────────── */
+#tab-bar {
+  display: flex;
+  align-items: center;
+  height: var(--tab-h);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  padding-left: 4px;
+  overflow: hidden;
+}
+
+#tabs {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+  flex: 1;
+  scrollbar-width: none;
+}
+#tabs::-webkit-scrollbar { display: none; }
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 36px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--text-dim);
+  border: 1px solid transparent;
+  flex-shrink: 0;
+  transition: background 0.1s;
+}
+.tab:hover { background: var(--border); color: var(--text); }
+.tab.active {
+  background: var(--bg);
+  border-color: var(--border);
+  color: var(--text);
+}
+.tab .close-tab {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  padding: 2px 4px;
+  border-radius: 4px;
+  line-height: 1;
+}
+.tab .close-tab:hover { background: #ff444444; color: #f87171; }
+
+#new-tab-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 1.4rem;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 8px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.1s;
+}
+#new-tab-btn:hover { background: var(--border); color: var(--text); }
+
+/* ── Terminal viewport ────────────────────────────────────────────────────── */
+#terminal-viewport {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-height: 0; /* required: lets flex child shrink below content size */
+}
+
+.term-container {
+  position: absolute;
+  inset: 0;
+  padding: 4px;
+  display: none;
+}
+.term-container.active { display: block; }
+
+/* ── Floating copy button ─────────────────────────────────────────────────── */
+#copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+  background: var(--accent);
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 7px 14px;
+  cursor: pointer;
+  box-shadow: 0 2px 10px #0008;
+  transition: opacity 0.15s, transform 0.1s;
+}
+#copy-btn:active  { transform: scale(0.94); }
+#copy-btn.hidden  { display: none; }
+#copy-btn.copied  { background: #16a34a; }
+
+/* xterm overrides */
+.xterm { height: 100%; }
+.xterm-viewport { border-radius: 4px; }
+
+/* ── Special keys toolbar ────────────────────────────────────────────────── */
+#keys-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 8px;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  overflow-x: auto;
+  flex-shrink: 0;
+  scrollbar-width: none;
+}
+#keys-bar::-webkit-scrollbar { display: none; }
+
+.key-btn {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 0.78rem;
+  font-weight: 500;
+  padding: 5px 10px;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  height: 30px;
+  transition: background 0.1s, transform 0.08s;
+  font-family: inherit;
+}
+.key-btn:active { background: var(--border); transform: scale(0.93); }
+.key-confirm    { border-color: #16a34a; color: #4ade80; }
+.key-danger     { border-color: #7f1d1d; color: #f87171; }
+.key-sep        { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; margin: 0 2px; }
+
+/* ── Input bar ────────────────────────────────────────────────────────────── */
+#input-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 8px 10px calc(8px + var(--safe-b));
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+#mic-btn {
+  background: var(--border);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 1.1rem;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+#mic-btn.listening {
+  background: #7f1d1d;
+  border: 2px solid #f87171;
+  animation: mic-pulse 0.8s ease-in-out infinite;
+}
+
+@keyframes mic-pulse {
+  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 #f8717144; }
+  50%       { transform: scale(1.12); box-shadow: 0 0 0 6px #f8717100; }
+}
+
+#msg-input {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  font-size: 0.95rem;
+  line-height: 1.4;
+  padding: 10px 12px;
+  resize: none;
+  outline: none;
+  max-height: 120px;
+  overflow-y: auto;
+  font-family: inherit;
+}
+#msg-input:focus { border-color: var(--accent); }
+
+#send-btn {
+  background: var(--accent);
+  border: none;
+  border-radius: 10px;
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 10px 16px;
+  cursor: pointer;
+  flex-shrink: 0;
+  height: 40px;
+  transition: opacity 0.15s;
+}
+#send-btn:active { opacity: 0.8; }
+#send-btn:disabled { background: var(--accent-dim); cursor: not-allowed; }
+
+/* ── Empty state ──────────────────────────────────────────────────────────── */
+#empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+}
+#empty-state .big { font-size: 2.5rem; }

package/src/server/auth.js

@@ -0,0 +1,14 @@
+import { randomBytes } from 'crypto';
+
+let sessionToken = null;
+
+export function generateToken() {
+  const raw = randomBytes(12).toString('hex');
+  // Format as XXX-XXX-XXX for readability
+  sessionToken = `${raw.slice(0, 4)}-${raw.slice(4, 8)}-${raw.slice(8, 12)}`;
+  return sessionToken;
+}
+
+export function validateToken(token) {
+  return token === sessionToken;
+}

package/src/server/index.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+import express from 'express';
+import { createServer } from 'http';
+import { WebSocketServer } from 'ws';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { networkInterfaces } from 'os';
+import qrcode from 'qrcode-terminal';
+
+import { generateToken, validateToken } from './auth.js';
+import * as terminals from './terminals.js';
+import { startTunnel } from './tunnel.js';
+import { acquireWakeLock } from './wakelock.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT || 3131;
+
+// ── Express ──────────────────────────────────────────────────────────────────
+const app = express();
+app.use(express.json());
+app.use(express.static(join(__dirname, '../../src/client')));
+
+// Health check
+app.get('/health', (_req, res) => res.json({ ok: true }));
+
+// ── HTTP server ───────────────────────────────────────────────────────────────
+const server = createServer(app);
+
+// ── WebSocket ─────────────────────────────────────────────────────────────────
+const wss = new WebSocketServer({ server });
+
+wss.on('connection', (ws, req) => {
+  let authenticated = false;
+
+  ws.on('message', (raw) => {
+    let msg;
+    try { msg = JSON.parse(raw); } catch { return; }
+
+    // ── Auth handshake ──────────────────────────────────────────────────────
+    if (!authenticated) {
+      if (msg.type === 'auth' && validateToken(msg.token)) {
+        authenticated = true;
+        ws.send(JSON.stringify({ type: 'auth_ok', sessions: terminals.listSessions() }));
+      } else {
+        ws.send(JSON.stringify({ type: 'auth_fail' }));
+        ws.close();
+      }
+      return;
+    }
+
+    // ── Authenticated messages ──────────────────────────────────────────────
+    switch (msg.type) {
+
+      case 'create_session': {
+        try {
+          const { id, label } = terminals.createSession(msg.name);
+          const sessions = terminals.listSessions();
+          broadcast({ type: 'sessions_updated', sessions });
+          terminals.subscribe(id, ws);
+          ws.send(JSON.stringify({ type: 'session_created', id, label }));
+        } catch (err) {
+          console.error('Failed to create session:', err.message);
+          ws.send(JSON.stringify({ type: 'error', message: `Could not spawn terminal: ${err.message}` }));
+        }
+        break;
+      }
+
+      case 'subscribe': {
+        const ok = terminals.subscribe(msg.sessionId, ws);
+        if (!ok) ws.send(JSON.stringify({ type: 'error', message: 'Session not found' }));
+        break;
+      }
+
+      case 'unsubscribe': {
+        // handled on close; explicit unsubscribe from a single session not needed for MVP
+        break;
+      }
+
+      case 'input': {
+        // raw=true means the data is an escape sequence — send as-is
+        // otherwise it's a typed command — ensure it ends with \r to execute
+        let toSend = msg.data;
+        if (!msg.raw) {
+          toSend = toSend.replace(/\n/g, '\r');
+          if (!toSend.endsWith('\r')) toSend += '\r';
+        }
+        terminals.sendInput(msg.sessionId, toSend);
+        break;
+      }
+
+      case 'resize': {
+        terminals.resizeSession(msg.sessionId, msg.cols, msg.rows);
+        break;
+      }
+
+      case 'kill_session': {
+        const killed = terminals.killSession(msg.sessionId);
+        if (killed) broadcast({ type: 'sessions_updated', sessions: terminals.listSessions() });
+        break;
+      }
+
+      case 'list_sessions': {
+        ws.send(JSON.stringify({ type: 'sessions_updated', sessions: terminals.listSessions() }));
+        break;
+      }
+    }
+  });
+
+  ws.on('close', () => {
+    terminals.unsubscribe(ws);
+  });
+});
+
+function broadcast(msg) {
+  const data = JSON.stringify(msg);
+  for (const client of wss.clients) {
+    if (client.readyState === 1) client.send(data);
+  }
+}
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+server.listen(PORT, async () => {
+  await acquireWakeLock();
+  const token = generateToken();
+
+  console.clear();
+  console.log('\n  ╔══════════════════════════════════════════╗');
+  console.log('  ║            Conduit  v0.1.0               ║');
+  console.log('  ╚══════════════════════════════════════════╝\n');
+  console.log(`  Local:  http://localhost:${PORT}`);
+  console.log(`  Token:  ${token}\n`);
+
+  // Try to start Cloudflare tunnel
+  console.log('  Starting Cloudflare tunnel...');
+  const tunnelUrl = await startTunnel(PORT);
+
+  if (tunnelUrl) {
+    const connectUrl = `${tunnelUrl}?token=${token}`;
+    console.log(`\n  Remote: ${tunnelUrl}`);
+    console.log('\n  ┌─ Scan with phone ──────────────────────────┐\n');
+    qrcode.generate(connectUrl, { small: true }, (qr) => {
+      qr.split('\n').forEach((line) => console.log('  ' + line));
+    });
+    console.log('\n  └────────────────────────────────────────────┘\n');
+    console.log(`  Or open: ${connectUrl}\n`);
+  } else {
+    console.log('\n  ⚠  Remote access unavailable (cloudflared could not be downloaded).\n');
+    console.log('  ┌─ Local network QR ─────────────────────────┐\n');
+    const localIp = getLocalIp();
+    const localUrl = `http://${localIp}:${PORT}?token=${token}`;
+    qrcode.generate(localUrl, { small: true }, (qr) => {
+      qr.split('\n').forEach((line) => console.log('  ' + line));
+    });
+    console.log('\n  └────────────────────────────────────────────┘\n');
+    console.log(`  Or open: ${localUrl}\n`);
+  }
+
+  console.log('  Press Ctrl+C to stop.\n');
+});
+
+function getLocalIp() {
+  const nets = networkInterfaces();
+  for (const iface of Object.values(nets)) {
+    for (const net of iface) {
+      if (net.family === 'IPv4' && !net.internal) return net.address;
+    }
+  }
+  return 'localhost';
+}

package/src/server/terminals.js

@@ -0,0 +1,91 @@
+import * as pty from 'node-pty';
+import { randomBytes } from 'crypto';
+
+// Map of sessionId -> { pty, name, subscribers: Set<ws> }
+const sessions = new Map();
+
+function defaultShell() {
+  return process.platform === 'win32' ? 'powershell.exe' : (process.env.SHELL || 'bash');
+}
+
+export function createSession(name) {
+  const id = randomBytes(4).toString('hex');
+  const label = name || `terminal-${sessions.size + 1}`;
+
+  const term = pty.spawn(defaultShell(), [], {
+    name: 'xterm-color',
+    cols: 220,
+    rows: 50,
+    cwd: process.env.HOME || process.cwd(),
+    env: process.env,
+  });
+
+  const session = { id, label, pty: term, subscribers: new Set(), history: [] };
+  sessions.set(id, session);
+
+  term.onData((data) => {
+    // Keep a scrollback buffer (last 2000 lines worth)
+    session.history.push(data);
+    if (session.history.length > 500) session.history.shift();
+
+    // Broadcast to all subscribers of this session
+    for (const ws of session.subscribers) {
+      if (ws.readyState === 1 /* OPEN */) {
+        ws.send(JSON.stringify({ type: 'output', sessionId: id, data }));
+      }
+    }
+  });
+
+  term.onExit(({ exitCode }) => {
+    for (const ws of session.subscribers) {
+      if (ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: 'exit', sessionId: id, exitCode }));
+      }
+    }
+    sessions.delete(id);
+  });
+
+  return { id, label };
+}
+
+export function listSessions() {
+  return [...sessions.values()].map(({ id, label }) => ({ id, label }));
+}
+
+export function sendInput(sessionId, data) {
+  const session = sessions.get(sessionId);
+  if (!session) return false;
+  session.pty.write(data);
+  return true;
+}
+
+export function resizeSession(sessionId, cols, rows) {
+  const session = sessions.get(sessionId);
+  if (!session) return;
+  session.pty.resize(cols, rows);
+}
+
+export function subscribe(sessionId, ws) {
+  const session = sessions.get(sessionId);
+  if (!session) return false;
+  session.subscribers.add(ws);
+  // Send scrollback history so the client sees existing output on connect
+  if (session.history.length > 0) {
+    ws.send(JSON.stringify({ type: 'history', sessionId, data: session.history.join('') }));
+  }
+  return true;
+}
+
+export function unsubscribe(ws) {
+  for (const session of sessions.values()) {
+    session.subscribers.delete(ws);
+  }
+}
+
+export function killSession(sessionId) {
+  const session = sessions.get(sessionId);
+  if (!session) return false;
+  session.pty.kill();
+  sessions.delete(sessionId);
+  return true;
+}