conduit-mobile 0.1.0

package/src/client/app.js

@@ -0,0 +1,419 @@
+import { hasWebSpeech, startWebSpeech } from './speech.js';
+
+// ── State ─────────────────────────────────────────────────────────────────────
+let ws = null;
+let activeSessionId = null;
+
+// Map of sessionId -> { term: Terminal, fitAddon, container, tabEl }
+const sessions = new Map();
+
+// ── DOM refs ──────────────────────────────────────────────────────────────────
+const authScreen    = document.getElementById('auth-screen');
+const appScreen     = document.getElementById('app-screen');
+const tokenInput    = document.getElementById('token-input');
+const connectBtn    = document.getElementById('connect-btn');
+const authError     = document.getElementById('auth-error');
+const tabsEl        = document.getElementById('tabs');
+const newTabBtn     = document.getElementById('new-tab-btn');
+const viewport      = document.getElementById('terminal-viewport');
+const copyBtn       = document.getElementById('copy-btn');
+const msgInput      = document.getElementById('msg-input');
+const sendBtn       = document.getElementById('send-btn');
+const micBtn        = document.getElementById('mic-btn');
+
+// ── Auto-fill token from URL param ────────────────────────────────────────────
+const urlToken = new URLSearchParams(location.search).get('token');
+if (urlToken) tokenInput.value = urlToken;
+
+// ── Connect ───────────────────────────────────────────────────────────────────
+function connect(token) {
+  setAuthError('');
+  connectBtn.disabled = true;
+  connectBtn.textContent = 'Connecting…';
+
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+  ws = new WebSocket(`${proto}://${location.host}`);
+
+  ws.onopen = () => {
+    ws.send(JSON.stringify({ type: 'auth', token }));
+  };
+
+  ws.onmessage = (event) => {
+    const msg = JSON.parse(event.data);
+    handleMessage(msg);
+  };
+
+  ws.onerror = () => {
+    setAuthError('Connection failed. Make sure the server is running.');
+    resetConnectBtn();
+  };
+
+  ws.onclose = () => {
+    if (appScreen.classList.contains('active')) {
+      showOverlay('Disconnected. Reload to reconnect.');
+    } else {
+      setAuthError('Connection closed.');
+      resetConnectBtn();
+    }
+  };
+}
+
+function handleMessage(msg) {
+  switch (msg.type) {
+
+    case 'auth_ok':
+      showApp();
+      if (msg.sessions.length === 0) {
+        requestNewSession();
+      } else {
+        // Re-hydrate existing sessions
+        for (const s of msg.sessions) addTab(s.id, s.label, false);
+        if (msg.sessions.length > 0) switchTo(msg.sessions[0].id);
+      }
+      break;
+
+    case 'auth_fail':
+      setAuthError('Invalid token. Try again.');
+      resetConnectBtn();
+      ws.close();
+      break;
+
+    case 'session_created':
+      switchTo(msg.id);
+      break;
+
+    case 'sessions_updated':
+      syncTabs(msg.sessions);
+      break;
+
+    case 'history':
+    case 'output': {
+      const s = sessions.get(msg.sessionId);
+      if (s) {
+        s.term.write(msg.data);
+      }
+      break;
+    }
+
+    case 'exit': {
+      const s = sessions.get(msg.sessionId);
+      if (s) {
+        s.term.write(`\r\n\x1b[31m[process exited with code ${msg.exitCode}]\x1b[0m\r\n`);
+      }
+      break;
+    }
+
+    case 'error':
+      alert(`Server error: ${msg.message}`);
+      break;
+  }
+}
+
+// ── Session / tab management ──────────────────────────────────────────────────
+function requestNewSession(name) {
+  ws.send(JSON.stringify({ type: 'create_session', name: name || null }));
+}
+
+function addTab(id, label, subscribe = true) {
+  if (sessions.has(id)) return;
+
+  // Create xterm instance
+  const term = new Terminal({
+    theme: {
+      background: '#0d0d0d',
+      foreground: '#e8e8e8',
+      cursor: '#f97316',
+      selectionBackground: '#f9731644',
+    },
+    fontSize: 13,
+    fontFamily: '"Cascadia Code", "Fira Code", monospace',
+    cursorBlink: true,
+    scrollback: 2000,
+    convertEol: true,
+  });
+
+  const fitAddon = new FitAddon.FitAddon();
+  term.loadAddon(fitAddon);
+
+  // Container div
+  const container = document.createElement('div');
+  container.className = 'term-container';
+  container.dataset.sessionId = id;
+  viewport.appendChild(container);
+  term.open(container);
+  // Don't fit here — container is hidden. switchTo() handles fit once visible.
+
+  // Tab element
+  const tabEl = document.createElement('div');
+  tabEl.className = 'tab';
+  tabEl.dataset.sessionId = id;
+  tabEl.innerHTML = `<span class="tab-label">${label}</span><span class="close-tab">✕</span>`;
+  tabEl.querySelector('.tab-label').addEventListener('click', () => switchTo(id));
+  tabEl.querySelector('.close-tab').addEventListener('click', (e) => {
+    e.stopPropagation();
+    killSession(id);
+  });
+  tabsEl.appendChild(tabEl);
+
+  // Show/hide the copy button whenever the selection changes
+  term.onSelectionChange(() => {
+    if (id !== activeSessionId) return;
+    const has = term.getSelection().length > 0;
+    copyBtn.classList.toggle('hidden', !has);
+  });
+
+  sessions.set(id, { term, fitAddon, container, tabEl });
+
+  if (subscribe) {
+    ws.send(JSON.stringify({ type: 'subscribe', sessionId: id }));
+  }
+}
+
+function switchTo(id) {
+  if (!sessions.has(id)) return;
+
+  // Deactivate current
+  if (activeSessionId && sessions.has(activeSessionId)) {
+    const cur = sessions.get(activeSessionId);
+    cur.container.classList.remove('active');
+    cur.tabEl.classList.remove('active');
+  }
+
+  activeSessionId = id;
+  const s = sessions.get(id);
+  s.container.classList.add('active');
+  s.tabEl.classList.add('active');
+  copyBtn.classList.add('hidden'); // hide until a selection is made in this tab
+  s.tabEl.scrollIntoView({ inline: 'nearest', behavior: 'smooth' });
+
+  // Refit after becoming visible
+  requestAnimationFrame(() => {
+    s.fitAddon.fit();
+    sendResize(id, s.term);
+  });
+
+  msgInput.focus();
+}
+
+function syncTabs(serverSessions) {
+  // Remove tabs for sessions that no longer exist
+  for (const [id] of sessions) {
+    if (!serverSessions.find((s) => s.id === id)) removeTab(id);
+  }
+  // Add tabs for new sessions
+  for (const s of serverSessions) {
+    if (!sessions.has(s.id)) addTab(s.id, s.label);
+  }
+}
+
+function removeTab(id) {
+  const s = sessions.get(id);
+  if (!s) return;
+  s.term.dispose();
+  s.container.remove();
+  s.tabEl.remove();
+  sessions.delete(id);
+
+  if (activeSessionId === id) {
+    activeSessionId = null;
+    const remaining = [...sessions.keys()];
+    if (remaining.length > 0) switchTo(remaining[remaining.length - 1]);
+  }
+}
+
+function killSession(id) {
+  ws.send(JSON.stringify({ type: 'kill_session', sessionId: id }));
+  removeTab(id);
+}
+
+function sendResize(id, term) {
+  ws.send(JSON.stringify({ type: 'resize', sessionId: id, cols: term.cols, rows: term.rows }));
+}
+
+// ── Sending input ─────────────────────────────────────────────────────────────
+function sendInput() {
+  const text = msgInput.value.trim();
+  if (!text || !activeSessionId) return;
+  ws.send(JSON.stringify({ type: 'input', sessionId: activeSessionId, data: text }));
+  msgInput.value = '';
+  msgInput.style.height = 'auto';
+}
+
+sendBtn.addEventListener('click', sendInput);
+
+msgInput.addEventListener('keydown', (e) => {
+  // Ctrl+Enter or Shift+Enter = send; plain Enter = newline for multi-line editing
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendInput();
+  }
+});
+
+// Auto-grow textarea
+msgInput.addEventListener('input', () => {
+  msgInput.style.height = 'auto';
+  msgInput.style.height = Math.min(msgInput.scrollHeight, 120) + 'px';
+});
+
+// ── Speech to text ────────────────────────────────────────────────────────────
+// Strategy: tap mic → focus textarea → phone keyboard opens with its mic button.
+// The keyboard mic (Google/Apple STT) is more reliable than the Web Speech API.
+// Web Speech API is used as a fallback on desktop or if keyboard mic isn't available.
+
+let activeRecognition = null;
+
+function setMsgInputValue(text) {
+  msgInput.value = text;
+  msgInput.style.height = 'auto';
+  msgInput.style.height = Math.min(msgInput.scrollHeight, 120) + 'px';
+}
+
+function micDone() {
+  micBtn.classList.remove('listening');
+  micBtn.textContent = '🎤';
+  activeRecognition = null;
+}
+
+micBtn.addEventListener('click', (e) => {
+  e.preventDefault();
+
+  // If Web Speech API is running, stop it
+  if (activeRecognition) {
+    try { activeRecognition.stop(); } catch {}
+    micDone();
+    return;
+  }
+
+  // On mobile: just focus the textarea — the keyboard opens and the user
+  // can tap the mic key on their native keyboard (most reliable approach)
+  msgInput.focus();
+
+  // Also try Web Speech API — if it works in this browser it kicks in
+  // alongside; if it fires first and gives a clean result, great.
+  // If not (e.g. permission denied / not supported) we silently fall back
+  // to the native keyboard mic.
+  if (hasWebSpeech()) {
+    micBtn.classList.add('listening');
+    micBtn.textContent = '🔴';
+
+    activeRecognition = startWebSpeech({
+      onFinal(transcript) {
+        if (transcript) setMsgInputValue((msgInput.value + ' ' + transcript).trim());
+        micDone();
+      },
+      onError(msg) {
+        // Permission denied = tell the user; anything else = silent fallback
+        if (msg.includes('denied')) alert(msg);
+        micDone();
+      },
+    });
+  }
+});
+
+// ── Special keys toolbar ──────────────────────────────────────────────────────
+document.getElementById('keys-bar').addEventListener('click', (e) => {
+  const btn = e.target.closest('.key-btn');
+  if (!btn || !activeSessionId) return;
+  const raw = btn.dataset.raw;
+  if (!raw) return;
+  ws.send(JSON.stringify({ type: 'input', sessionId: activeSessionId, data: raw, raw: true }));
+});
+
+// ── Copy button ───────────────────────────────────────────────────────────────
+copyBtn.addEventListener('click', async () => {
+  if (!activeSessionId) return;
+  const s = sessions.get(activeSessionId);
+  if (!s) return;
+  const text = s.term.getSelection();
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    copyBtn.textContent = 'Copied!';
+    copyBtn.classList.add('copied');
+    setTimeout(() => {
+      copyBtn.textContent = 'Copy';
+      copyBtn.classList.remove('copied');
+      copyBtn.classList.add('hidden');
+      s.term.clearSelection();
+    }, 1500);
+  } catch {
+    // clipboard API blocked (non-https or permissions) — fall back to prompt
+    prompt('Copy this text:', text);
+  }
+});
+
+// ── New tab button ────────────────────────────────────────────────────────────
+newTabBtn.addEventListener('click', () => requestNewSession());
+
+// ── Resize handling ───────────────────────────────────────────────────────────
+const resizeObserver = new ResizeObserver(() => {
+  if (!activeSessionId) return;
+  const s = sessions.get(activeSessionId);
+  if (s) {
+    s.fitAddon.fit();
+    sendResize(activeSessionId, s.term);
+  }
+});
+resizeObserver.observe(viewport);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function showApp() {
+  authScreen.classList.remove('active');
+  appScreen.classList.add('active');
+}
+
+function setAuthError(msg) {
+  authError.textContent = msg;
+  authError.classList.toggle('hidden', !msg);
+}
+
+function resetConnectBtn() {
+  connectBtn.disabled = false;
+  connectBtn.textContent = 'Connect';
+}
+
+function showOverlay(msg) {
+  const el = document.createElement('div');
+  el.id = 'empty-state';
+  el.innerHTML = `<div class="big">⚡</div><div>${msg}</div>`;
+  viewport.appendChild(el);
+}
+
+// ── Visual Viewport (keyboard resize) ────────────────────────────────────────
+// When the on-screen keyboard opens, the visual viewport shrinks.
+// We pin #app-screen to the visual viewport so the terminal shrinks
+// and the input bar stays pinned above the keyboard.
+if (window.visualViewport) {
+  const appScreen = document.getElementById('app-screen');
+  const updateViewport = () => {
+    const vv = window.visualViewport;
+    appScreen.style.height = vv.height + 'px';
+    appScreen.style.top    = vv.offsetTop + 'px';
+    // Refit the active terminal so cols/rows match the new size
+    if (activeSessionId) {
+      const s = sessions.get(activeSessionId);
+      if (s) {
+        requestAnimationFrame(() => {
+          s.fitAddon.fit();
+          sendResize(activeSessionId, s.term);
+        });
+      }
+    }
+  };
+  window.visualViewport.addEventListener('resize', updateViewport);
+  window.visualViewport.addEventListener('scroll', updateViewport);
+}
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+connectBtn.addEventListener('click', () => {
+  const token = tokenInput.value.trim();
+  if (!token) { setAuthError('Please enter your token.'); return; }
+  connect(token);
+});
+
+tokenInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') connectBtn.click();
+});
+
+// Auto-connect if token in URL
+if (urlToken) connectBtn.click();

package/src/client/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<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="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <title>Conduit</title>
+  <link rel="manifest" href="/manifest.json" />
+  <link rel="stylesheet" href="/style.css" />
+  <!-- xterm.js -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+</head>
+<body>
+
+<!-- ── Auth Screen ──────────────────────────────────────────────────────── -->
+<div id="auth-screen" class="screen active">
+  <div class="auth-box">
+    <div class="logo">
+      <span class="logo-icon">⬡</span>
+      <span class="logo-text">Conduit</span>
+    </div>
+    <p class="auth-hint">Enter the token shown on your laptop</p>
+    <input id="token-input" type="text" placeholder="xxxx-xxxx-xxxx" autocomplete="off" spellcheck="false" />
+    <button id="connect-btn">Connect</button>
+    <p id="auth-error" class="error hidden"></p>
+  </div>
+</div>
+
+<!-- ── Main App ──────────────────────────────────────────────────────────── -->
+<div id="app-screen" class="screen">
+
+  <!-- Tab bar -->
+  <div id="tab-bar">
+    <div id="tabs"></div>
+    <button id="new-tab-btn" title="New terminal">+</button>
+  </div>
+
+  <!-- Terminal viewport -->
+  <div id="terminal-viewport">
+    <!-- xterm instances are injected here -->
+    <button id="copy-btn" class="hidden" aria-label="Copy selection">Copy</button>
+  </div>
+
+  <!-- Special keys toolbar -->
+  <div id="keys-bar">
+    <button class="key-btn" data-raw="&#x1b;">Esc</button>
+    <button class="key-btn" data-raw="&#x09;">Tab</button>
+    <div class="key-sep"></div>
+    <button class="key-btn" data-raw="&#x1b;[A">↑</button>
+    <button class="key-btn" data-raw="&#x1b;[B">↓</button>
+    <button class="key-btn" data-raw="&#x1b;[D">←</button>
+    <button class="key-btn" data-raw="&#x1b;[C">→</button>
+    <div class="key-sep"></div>
+    <button class="key-btn" data-raw="&#x0d;">↵</button>
+    <button class="key-btn key-danger" data-raw="&#x03;">Ctrl+C</button>
+    <div class="key-sep"></div>
+    <button class="key-btn key-confirm" data-raw="y&#x0d;">y</button>
+    <button class="key-btn key-danger"  data-raw="n&#x0d;">n</button>
+  </div>
+
+  <!-- Input bar -->
+  <div id="input-bar">
+    <button id="mic-btn" title="Speech to text">🎤</button>
+    <textarea id="msg-input" placeholder="Type a command..." rows="1"></textarea>
+    <button id="send-btn">Send</button>
+  </div>
+
+</div>
+
+<script type="module" src="/app.js"></script>
+</body>
+</html>

package/src/client/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "Conduit",
+  "short_name": "Conduit",
+  "description": "Run Claude Code from your phone",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0d0d0d",
+  "theme_color": "#0d0d0d",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/src/client/speech.js

@@ -0,0 +1,39 @@
+// Speech input — two strategies:
+//
+// 1. NATIVE (preferred): focus the textarea so the keyboard opens.
+//    The user taps the mic on their phone keyboard (Google/Apple STT).
+//    Zero bugs, best accuracy, works everywhere.
+//
+// 2. WEB SPEECH API (fallback): single-shot, no interim results.
+//    Avoids the duplication bug caused by continuous + interim mode.
+
+export function hasWebSpeech() {
+  return !!(window.SpeechRecognition || window.webkitSpeechRecognition);
+}
+
+// Single-shot Web Speech API — start, speak, auto-stops on silence, fires onFinal once.
+export function startWebSpeech({ onFinal, onError }) {
+  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+  if (!SR) { onError('Not supported'); return null; }
+
+  const r = new SR();
+  r.continuous = false;
+  r.interimResults = false;  // final result only — eliminates duplication
+  r.lang = navigator.language || 'en-US';
+
+  r.onresult = (event) => {
+    const transcript = event.results[0]?.[0]?.transcript?.trim() ?? '';
+    if (transcript) onFinal(transcript);
+  };
+
+  r.onerror = (e) => {
+    if (e.error === 'not-allowed') onError('Microphone permission denied.');
+    else if (e.error !== 'no-speech' && e.error !== 'aborted') onError(`Speech error: ${e.error}`);
+    else onFinal('');  // no-speech / aborted = silent, not an error
+  };
+
+  r.onend = () => {};  // handled via onresult / onerror
+
+  try { r.start(); } catch {}
+  return r;
+}