voxa-code 0.1.0__py3-none-any.whl

static/app.js

@@ -0,0 +1,388 @@
+/**
+ * app.js - Loop phone web client (ES module)
+ *
+ * Mic capture pipeline:
+ *   getUserMedia -> MediaStreamSource -> AudioWorkletNode (pcm-worklet.js)
+ *   -> postMessage (Int16 ArrayBuffer, 16 kHz) -> WebSocket binary frame
+ *
+ * Playback pipeline:
+ *   WebSocket binary frame (Int16 ArrayBuffer, 24 kHz)
+ *   -> Float32 conversion -> AudioBufferSourceNode scheduled on 24 kHz AudioContext
+ *   (jitter buffer via nextStartTime cursor)
+ *
+ * JSON control messages: {"type":"status","status":"..."} and friends update the UI.
+ */
+
+const PLAYBACK_SAMPLE_RATE = 24000;
+// Minimum ahead-of-time scheduling cushion (seconds). Keeps audio gapless.
+const SCHEDULE_AHEAD = 0.06;
+
+// --- State ---
+let ws = null;
+let micContext = null;   // AudioContext for capture (browser's native rate)
+let playCtx = null;      // AudioContext fixed at 24 kHz for playback
+let workletNode = null;
+let sourceNode = null;
+let stream = null;
+let muted = false;
+let nextStartTime = 0;   // jitter-buffer scheduling cursor (in playCtx.currentTime)
+
+// --- DOM refs (populated in init()) ---
+let tokenInput, folderInput, terminalSelect, connectBtn, muteBtn, stopBtn, terminalsBtn, terminalsEl, statusDot, statusText, infoText, transcriptEl;
+
+// Transcript state: coalesce consecutive same-role caption chunks into one line.
+let lastRole = null;
+let lastSaidEl = null;
+
+// ---- Token helpers ----
+
+function getTokenFromUrl() {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('token') || '';
+}
+
+function buildWsUrl(token) {
+  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${location.host}/ws?token=${encodeURIComponent(token)}`;
+}
+
+function wsOpen() {
+  return ws && ws.readyState === WebSocket.OPEN;
+}
+
+function sendTerminal() {
+  if (wsOpen()) {
+    ws.send(JSON.stringify({ type: 'set_terminal', app: terminalSelect.value }));
+  }
+}
+
+function sendFolder() {
+  const path = folderInput.value.trim();
+  if (path && wsOpen()) {
+    ws.send(JSON.stringify({ type: 'set_dir', path }));
+  }
+}
+
+// ---- UI helpers ----
+
+function setStatus(state, text) {
+  // state: 'disconnected' | 'connecting' | 'connected' | 'error'
+  statusDot.className = 'dot dot-' + state;
+  statusText.textContent = text;
+}
+
+function setInfo(text) {
+  infoText.textContent = text || '';
+}
+
+function updateConnectUI(connected) {
+  connectBtn.textContent = connected ? 'Disconnect' : 'Connect';
+  muteBtn.disabled = !connected;
+  stopBtn.disabled = !connected;
+  terminalsBtn.disabled = !connected;
+  tokenInput.disabled = connected;
+  if (!connected && terminalsEl) terminalsEl.innerHTML = '';
+}
+
+function sendStop() {
+  if (wsOpen()) ws.send(JSON.stringify({ type: 'stop' }));
+}
+
+function requestTerminals() {
+  if (wsOpen()) ws.send(JSON.stringify({ type: 'list_terminals' }));
+}
+
+function renderTerminals(items) {
+  terminalsEl.innerHTML = '';
+  if (!items || !items.length) {
+    const p = document.createElement('div');
+    p.className = 'term-item uncontrollable';
+    p.textContent = 'No open Claude terminals found.';
+    terminalsEl.appendChild(p);
+    return;
+  }
+  for (const it of items) {
+    const b = document.createElement('button');
+    b.className = 'term-item' + (it.controllable ? '' : ' uncontrollable');
+    b.disabled = !it.controllable;
+    // Build with textContent, never innerHTML: app/label/cwd/id come from the
+    // laptop's terminal enumeration (window titles, directory names) and could
+    // contain HTML, which innerHTML would execute (DOM XSS in the phone client).
+    const appSpan = document.createElement('span');
+    appSpan.className = 'app';
+    appSpan.textContent = it.app || '';
+    b.appendChild(appSpan);
+    b.appendChild(document.createElement('br'));
+    b.appendChild(document.createTextNode(
+      (it.label || it.cwd || it.id || '') + (it.controllable ? '' : ' (can’t control)')
+    ));
+    if (it.controllable) {
+      b.addEventListener('click', () => {
+        if (wsOpen()) ws.send(JSON.stringify({ type: 'attach_terminal', id: it.id }));
+      });
+    }
+    terminalsEl.appendChild(b);
+  }
+}
+
+// ---- WebSocket ----
+
+function openWebSocket(token) {
+  const url = buildWsUrl(token);
+  setStatus('connecting', 'Connecting...');
+  ws = new WebSocket(url);
+  ws.binaryType = 'arraybuffer';
+
+  ws.addEventListener('open', () => {
+    setStatus('connected', 'Connected');
+    updateConnectUI(true);
+    sendTerminal();        // choose terminal app before any session starts
+    sendFolder();          // optional: pre-set the project folder (else say it by voice)
+  });
+
+  ws.addEventListener('close', (ev) => {
+    const reason = ev.reason ? `: ${ev.reason}` : '';
+    setStatus('disconnected', `Disconnected (${ev.code}${reason})`);
+    teardown();
+  });
+
+  ws.addEventListener('error', () => {
+    setStatus('error', 'Connection error');
+    teardown();
+  });
+
+  ws.addEventListener('message', (ev) => {
+    if (ev.data instanceof ArrayBuffer) {
+      schedulePlayback(ev.data);
+    } else if (typeof ev.data === 'string') {
+      handleControlMessage(ev.data);
+    }
+  });
+}
+
+// ---- Control messages ----
+
+function handleControlMessage(raw) {
+  let msg;
+  try { msg = JSON.parse(raw); } catch { return; }
+
+  if (msg.type === 'transcript') {
+    appendTranscript(msg.role, msg.text);
+    return;
+  }
+  if (msg.type === 'terminals') {
+    renderTerminals(msg.items);
+    return;
+  }
+  if (msg.type === 'status') {
+    // e.g. {"type":"status","status":"finished"}
+    setStatus('connected', msg.status || 'Connected');
+  }
+  if (msg.working_dir) {
+    setInfo(`Dir: ${msg.working_dir}${msg.mode ? '  Mode: ' + msg.mode : ''}`);
+  }
+  if (msg.mode && !msg.working_dir) {
+    setInfo(`Mode: ${msg.mode}`);
+  }
+}
+
+// ---- Live transcript / captions ----
+
+function appendTranscript(role, text) {
+  if (!text) return;
+  role = role === 'user' ? 'user' : 'agent';
+
+  if (role !== lastRole || !lastSaidEl) {
+    const line = document.createElement('div');
+    line.className = 'line ' + role;
+    const who = document.createElement('span');
+    who.className = 'who';
+    who.textContent = role === 'user' ? 'You' : 'Voxa';
+    const said = document.createElement('span');
+    said.className = 'said';
+    line.appendChild(who);
+    line.appendChild(said);
+    transcriptEl.appendChild(line);
+    lastSaidEl = said;
+    lastRole = role;
+  }
+  lastSaidEl.textContent += text;
+  transcriptEl.scrollTop = transcriptEl.scrollHeight;
+}
+
+function clearTranscript() {
+  if (transcriptEl) transcriptEl.innerHTML = '';
+  lastRole = null;
+  lastSaidEl = null;
+}
+
+// ---- Mic capture pipeline ----
+
+async function startCapture() {
+  stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+
+  micContext = new AudioContext();
+  await micContext.audioWorklet.addModule('/static/pcm-worklet.js');
+
+  sourceNode = micContext.createMediaStreamSource(stream);
+  workletNode = new AudioWorkletNode(micContext, 'pcm-processor');
+
+  workletNode.port.onmessage = (ev) => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      // When muted, send silence (zero-filled, same size) instead of stopping the
+      // stream, so the realtime channel stays alive and Voxa keeps talking.
+      ws.send(muted ? new ArrayBuffer(ev.data.byteLength) : ev.data);
+    }
+  };
+
+  sourceNode.connect(workletNode);
+  // Do NOT connect workletNode to micContext.destination (no echo)
+}
+
+function stopCapture() {
+  if (workletNode) { workletNode.disconnect(); workletNode = null; }
+  if (sourceNode) { sourceNode.disconnect(); sourceNode = null; }
+  if (stream) { stream.getTracks().forEach(t => t.stop()); stream = null; }
+  if (micContext) { micContext.close(); micContext = null; }
+}
+
+// ---- Playback (24 kHz jitter buffer) ----
+
+function ensurePlayContext() {
+  if (!playCtx || playCtx.state === 'closed') {
+    playCtx = new AudioContext({ sampleRate: PLAYBACK_SAMPLE_RATE });
+    nextStartTime = 0;
+  }
+}
+
+function schedulePlayback(arrayBuffer) {
+  ensurePlayContext();
+
+  // Convert Int16 little-endian -> Float32
+  const int16 = new Int16Array(arrayBuffer);
+  const float32 = new Float32Array(int16.length);
+  for (let i = 0; i < int16.length; i++) {
+    float32[i] = int16[i] / 32768;
+  }
+
+  const audioBuffer = playCtx.createBuffer(1, float32.length, PLAYBACK_SAMPLE_RATE);
+  audioBuffer.copyToChannel(float32, 0);
+
+  const src = playCtx.createBufferSource();
+  src.buffer = audioBuffer;
+  src.connect(playCtx.destination);
+
+  // Jitter buffer: schedule at least SCHEDULE_AHEAD seconds ahead of playback head,
+  // but never in the past. Chain successive buffers end-to-end.
+  const now = playCtx.currentTime;
+  const earliest = now + SCHEDULE_AHEAD;
+  if (nextStartTime < earliest) nextStartTime = earliest;
+
+  src.start(nextStartTime);
+  nextStartTime += audioBuffer.duration;
+}
+
+function stopPlayback() {
+  if (playCtx) {
+    playCtx.close();
+    playCtx = null;
+    nextStartTime = 0;
+  }
+}
+
+// ---- Connect / Disconnect ----
+
+async function connect() {
+  const token = tokenInput.value.trim();
+  if (!token) {
+    setStatus('error', 'Enter a token first');
+    return;
+  }
+
+  connectBtn.disabled = true;
+  clearTranscript();
+
+  try {
+    // Start mic capture BEFORE opening WS so the two are ready together
+    await startCapture();
+    ensurePlayContext();
+    openWebSocket(token);
+  } catch (err) {
+    setStatus('error', `Failed: ${err.message}`);
+    stopCapture();
+    stopPlayback();
+    updateConnectUI(false);
+  } finally {
+    connectBtn.disabled = false;
+  }
+}
+
+function disconnect() {
+  if (ws) {
+    ws.close(1000, 'User disconnected');
+    ws = null;
+  }
+  teardown();
+}
+
+function teardown() {
+  stopCapture();
+  stopPlayback();
+  updateConnectUI(false);
+  muted = false;
+  muteBtn.textContent = 'Mute';
+  setInfo('');
+}
+
+// ---- Mute toggle ----
+
+function toggleMute() {
+  muted = !muted;
+  muteBtn.textContent = muted ? 'Unmute' : 'Mute';
+  muteBtn.classList.toggle('muted', muted);
+}
+
+// ---- Init ----
+
+function init() {
+  tokenInput = document.getElementById('token');
+  folderInput = document.getElementById('folder');
+  terminalSelect = document.getElementById('terminal');
+  connectBtn = document.getElementById('connect-btn');
+  muteBtn = document.getElementById('mute-btn');
+  stopBtn = document.getElementById('stop-btn');
+  terminalsBtn = document.getElementById('terminals-btn');
+  terminalsEl = document.getElementById('terminals');
+  statusDot = document.getElementById('status-dot');
+  statusText = document.getElementById('status-text');
+  infoText = document.getElementById('info-text');
+  transcriptEl = document.getElementById('transcript');
+
+  // Prefill token + folder from URL (?token=... &dir=...)
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('token')) tokenInput.value = params.get('token');
+  if (params.get('dir')) folderInput.value = params.get('dir');
+
+  if (params.get('terminal')) terminalSelect.value = params.get('terminal');
+
+  // Push changes to the server mid-call.
+  folderInput.addEventListener('change', sendFolder);
+  terminalSelect.addEventListener('change', sendTerminal);
+
+  connectBtn.addEventListener('click', () => {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      disconnect();
+    } else {
+      connect();
+    }
+  });
+
+  muteBtn.addEventListener('click', toggleMute);
+  stopBtn.addEventListener('click', sendStop);
+  terminalsBtn.addEventListener('click', requestTerminals);
+
+  setStatus('disconnected', 'Disconnected');
+  updateConnectUI(false);
+}
+
+document.addEventListener('DOMContentLoaded', init);

static/favicon.svg

@@ -0,0 +1 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" rx="116" fill="#0E0E10"/><g fill="#FFFFFF"><rect x="250.0" y="107.8" width="12" height="50.2" rx="6.0" transform="rotate(0.00 256 256)"/><rect x="250.0" y="86.5" width="12" height="71.5" rx="6.0" transform="rotate(12.00 256 256)"/><rect x="250.0" y="76.4" width="12" height="81.6" rx="6.0" transform="rotate(24.00 256 256)"/><rect x="250.0" y="80.1" width="12" height="77.9" rx="6.0" transform="rotate(36.00 256 256)"/><rect x="250.0" y="96.6" width="12" height="61.4" rx="6.0" transform="rotate(48.00 256 256)"/><rect x="250.0" y="121.6" width="12" height="36.4" rx="6.0" transform="rotate(60.00 256 256)"/><rect x="250.0" y="107.8" width="12" height="50.2" rx="6.0" transform="rotate(72.00 256 256)"/><rect x="250.0" y="86.5" width="12" height="71.5" rx="6.0" transform="rotate(84.00 256 256)"/><rect x="250.0" y="76.4" width="12" height="81.6" rx="6.0" transform="rotate(96.00 256 256)"/><rect x="250.0" y="80.1" width="12" height="77.9" rx="6.0" transform="rotate(108.00 256 256)"/><rect x="250.0" y="96.6" width="12" height="61.4" rx="6.0" transform="rotate(120.00 256 256)"/><rect x="250.0" y="121.6" width="12" height="36.4" rx="6.0" transform="rotate(132.00 256 256)"/><rect x="250.0" y="107.8" width="12" height="50.2" rx="6.0" transform="rotate(144.00 256 256)"/><rect x="250.0" y="86.5" width="12" height="71.5" rx="6.0" transform="rotate(156.00 256 256)"/><rect x="250.0" y="76.4" width="12" height="81.6" rx="6.0" transform="rotate(168.00 256 256)"/><rect x="250.0" y="80.1" width="12" height="77.9" rx="6.0" transform="rotate(180.00 256 256)"/><rect x="250.0" y="96.6" width="12" height="61.4" rx="6.0" transform="rotate(192.00 256 256)"/><rect x="250.0" y="121.6" width="12" height="36.4" rx="6.0" transform="rotate(204.00 256 256)"/><rect x="250.0" y="107.8" width="12" height="50.2" rx="6.0" transform="rotate(216.00 256 256)"/><rect x="250.0" y="86.5" width="12" height="71.5" rx="6.0" transform="rotate(228.00 256 256)"/><rect x="250.0" y="76.4" width="12" height="81.6" rx="6.0" transform="rotate(240.00 256 256)"/><rect x="250.0" y="80.1" width="12" height="77.9" rx="6.0" transform="rotate(252.00 256 256)"/><rect x="250.0" y="96.6" width="12" height="61.4" rx="6.0" transform="rotate(264.00 256 256)"/><rect x="250.0" y="121.6" width="12" height="36.4" rx="6.0" transform="rotate(276.00 256 256)"/><rect x="250.0" y="107.8" width="12" height="50.2" rx="6.0" transform="rotate(288.00 256 256)"/><rect x="250.0" y="86.5" width="12" height="71.5" rx="6.0" transform="rotate(300.00 256 256)"/><rect x="250.0" y="76.4" width="12" height="81.6" rx="6.0" transform="rotate(312.00 256 256)"/><rect x="250.0" y="80.1" width="12" height="77.9" rx="6.0" transform="rotate(324.00 256 256)"/><rect x="250.0" y="96.6" width="12" height="61.4" rx="6.0" transform="rotate(336.00 256 256)"/><rect x="250.0" y="121.6" width="12" height="36.4" rx="6.0" transform="rotate(348.00 256 256)"/><circle cx="256" cy="256" r="22"/></g></svg>

static/index.html

@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Voxa</title>
+  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: #0f0f0f;
+      color: #e8e8e8;
+      min-height: 100dvh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 1.5rem;
+      gap: 1.5rem;
+    }
+
+    h1 {
+      font-size: 2rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      color: #fff;
+    }
+
+    /* Status row */
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+      font-size: 0.95rem;
+      color: #aaa;
+    }
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .dot-disconnected { background: #555; }
+    .dot-connecting   { background: #f5a623; animation: pulse 1s infinite; }
+    .dot-connected    { background: #4caf50; }
+    .dot-error        { background: #f44336; }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50%       { opacity: 0.3; }
+    }
+
+    /* Token input */
+    .token-wrap {
+      width: 100%;
+      max-width: 360px;
+    }
+
+    .token-wrap label {
+      display: block;
+      font-size: 0.78rem;
+      color: #888;
+      margin-bottom: 0.4rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+
+    #token {
+      width: 100%;
+      padding: 0.65rem 0.9rem;
+      border: 1px solid #333;
+      border-radius: 8px;
+      background: #1a1a1a;
+      color: #e8e8e8;
+      font-size: 1rem;
+      font-family: monospace;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    #token:focus { border-color: #555; }
+    #token:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    #terminal {
+      width: 100%;
+      padding: 0.65rem 0.9rem;
+      border: 1px solid #333;
+      border-radius: 8px;
+      background: #1a1a1a;
+      color: #e8e8e8;
+      font-size: 1rem;
+      outline: none;
+    }
+
+    /* Buttons */
+    .btn-row {
+      display: flex;
+      gap: 0.75rem;
+    }
+
+    button {
+      padding: 0.75rem 1.75rem;
+      border: none;
+      border-radius: 10px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: opacity 0.15s, background 0.15s;
+    }
+    button:disabled { opacity: 0.35; cursor: not-allowed; }
+
+    #connect-btn {
+      background: #3a7bd5;
+      color: #fff;
+      min-width: 130px;
+    }
+    #connect-btn:hover:not(:disabled) { background: #2f6ac5; }
+
+    #mute-btn {
+      background: #2a2a2a;
+      color: #ccc;
+      border: 1px solid #444;
+    }
+    #mute-btn:hover:not(:disabled) { background: #333; }
+    #mute-btn.muted {
+      background: #7b3a3a;
+      color: #ffcdd2;
+      border-color: #7b3a3a;
+    }
+
+    #stop-btn {
+      background: #2a2a2a;
+      color: #ffb4b4;
+      border: 1px solid #5a3a3a;
+    }
+    #stop-btn:hover:not(:disabled) { background: #3a2a2a; }
+
+    #terminals-btn { background: #2a2a2a; color: #cfe3ff; border: 1px solid #3a4a5a; }
+    #terminals-btn:hover:not(:disabled) { background: #2f3a47; }
+
+    #terminals {
+      width: 100%;
+      max-width: 360px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+    }
+    .term-item {
+      text-align: left;
+      padding: 0.6rem 0.8rem;
+      border-radius: 8px;
+      background: #161616;
+      border: 1px solid #2a2a2a;
+      color: #e8e8e8;
+      font-size: 0.9rem;
+    }
+    .term-item:hover:not(:disabled) { background: #1f2a36; border-color: #3a4a5a; }
+    .term-item .app { color: #6ab0ff; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
+    .term-item.uncontrollable { opacity: 0.5; }
+
+    /* Info text (working dir / mode) */
+    #info-text {
+      font-size: 0.8rem;
+      color: #666;
+      min-height: 1.2em;
+      text-align: center;
+      max-width: 360px;
+      word-break: break-all;
+    }
+
+    /* Live transcript / captions */
+    #transcript {
+      width: 100%;
+      max-width: 360px;
+      flex: 1 1 auto;
+      min-height: 120px;
+      max-height: 45dvh;
+      overflow-y: auto;
+      background: #161616;
+      border: 1px solid #2a2a2a;
+      border-radius: 10px;
+      padding: 0.75rem 0.9rem;
+      font-size: 0.95rem;
+      line-height: 1.45;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    #transcript:empty::before {
+      content: "Captions will appear here…";
+      color: #555;
+      font-size: 0.85rem;
+    }
+    .line { display: flex; flex-direction: column; gap: 0.1rem; }
+    .line .who {
+      font-size: 0.68rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #777;
+    }
+    .line.agent .who { color: #6ab0ff; }
+    .line.user .who  { color: #7ed492; }
+    .line .said { color: #e8e8e8; word-break: break-word; }
+  </style>
+</head>
+<body>
+  <div style="display:flex;align-items:center;gap:.6rem">
+    <img src="/static/voxa-mark-white.svg" alt="Voxa" style="width:40px;height:40px">
+    <h1>Voxa</h1>
+  </div>
+
+  <div class="status-row">
+    <span id="status-dot" class="dot dot-disconnected"></span>
+    <span id="status-text">Disconnected</span>
+  </div>
+
+  <div class="token-wrap">
+    <label for="token">Auth token</label>
+    <input id="token" type="password" placeholder="paste token here" autocomplete="off" spellcheck="false">
+  </div>
+
+  <div class="token-wrap">
+    <label for="folder">Working folder (optional — or just say it out loud)</label>
+    <input id="folder" type="text" placeholder="/Users/you/path/to/project" autocomplete="off" spellcheck="false" autocapitalize="off">
+  </div>
+
+  <div class="token-wrap">
+    <label for="terminal">Terminal app</label>
+    <select id="terminal">
+      <option value="auto">Auto-detect</option>
+      <option value="iTerm">iTerm2</option>
+      <option value="Terminal">Terminal</option>
+    </select>
+  </div>
+
+  <div class="btn-row">
+    <button id="connect-btn">Connect</button>
+    <button id="mute-btn" disabled>Mute</button>
+    <button id="stop-btn" disabled>Stop</button>
+    <button id="terminals-btn" disabled>Terminals</button>
+  </div>
+
+  <div id="terminals"></div>
+
+  <p id="info-text"></p>
+
+  <div id="transcript"></div>
+
+  <script src="/static/app.js" type="module"></script>
+</body>
+</html>