esque-bridge 0.6.0 → 0.6.2

package/index.js

@@ -584,14 +584,103 @@ function openPreviewTunnel(port) {
   });
 }
 
+// Strip ANSI color codes bundlers embed in their error output.
+function stripAnsi(s) {
+  return String(s).replace(/\[[0-9;]*m/g, '');
+}
+
+// Reduce a bundler error (Metro's JSON payload, or raw stderr text) to a
+// short, human-readable summary: the first few meaningful lines, no stack
+// trace, no code frame, no ANSI, project paths shortened. This is what the
+// phone shows in place of a white screen, so keep it tight.
+function summarizeBuildError(status, body) {
+  let msg = '';
+  try {
+    const j = JSON.parse(body);
+    msg = j.message || (j.errors && j.errors[0] && j.errors[0].description) || '';
+  } catch {
+    msg = body;
+  }
+  msg = stripAnsi(msg).trim();
+  const head = [];
+  for (const l of msg.split('\n').map((x) => x.trimEnd()).filter(Boolean)) {
+    if (/^\s*at\s/.test(l)) break; // stack trace
+    if (/^\s*>?\s*\d+\s*\|/.test(l)) break; // code frame ("> 1 |")
+    head.push(l);
+    if (head.length >= 5) break;
+  }
+  let out = head.join('\n').split(`${WORKDIR}/`).join('').trim();
+  if (out.length > 600) out = out.slice(0, 600) + '…';
+  return out || `Build failed (HTTP ${status}).`;
+}
+
+// Fallback for compile errors an HTTP probe can't see (e.g. Vite/Next inject
+// an in-page overlay but still log the failure to stderr): scan the captured
+// dev-server output for a known failure signature.
+function scanOutputForError(out) {
+  if (!out) return null;
+  const lines = stripAnsi(out).split('\n');
+  const sig =
+    /(unable to resolve|cannot find module|module not found|failed to compile|could not resolve|\bERROR in\b|SyntaxError|Transform failed|\[ERROR\])/i;
+  for (let i = 0; i < lines.length; i++) {
+    if (sig.test(lines[i])) {
+      let s = lines.slice(i, i + 4).map((l) => l.trim()).filter(Boolean).join('\n');
+      if (s.length > 600) s = s.slice(0, 600) + '…';
+      return s.split(`${WORKDIR}/`).join('');
+    }
+  }
+  return null;
+}
+
+// Fetch a path on the local dev server with a hard timeout.
+async function fetchLocal(port, path, ms) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), ms);
+  try {
+    const r = await fetch(`http://127.0.0.1:${port}${path}`, { signal: ctrl.signal });
+    return { status: r.status, body: await r.text() };
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+// Probe a freshly-started dev server for a build failure that would otherwise
+// render as a blank screen on the phone. Metro builds the web bundle lazily,
+// so we trigger it ourselves and catch fast failures (missing deps, syntax
+// errors return in <2s) with a short timeout — we deliberately DON'T wait out
+// a slow-but-healthy compile. Returns a short error string, or null if it
+// looks fine / is still compiling.
+async function probeBuildError(port) {
+  const root = await fetchLocal(port, '/', 5000);
+  if (!root) return null; // couldn't reach it — don't cry wolf
+  if (root.status >= 500) return summarizeBuildError(root.status, root.body);
+
+  // Expo/Metro: the HTML points at a *.bundle script. Fetching it forces the
+  // compile and surfaces the react-native-web class of error as a 500.
+  const m = root.body.match(/<script[^>]+src="([^"]*\.bundle[^"]*)"/i);
+  if (m) {
+    const b = await fetchLocal(port, m[1].replace(/&amp;/g, '&'), 5000);
+    if (b && b.status >= 500) return summarizeBuildError(b.status, b.body);
+  }
+
+  return scanOutputForError(preview && preview.output);
+}
+
 async function startPreview(cmd, port) {
   killPreview();
   console.log(`[preview] starting: ${cmd}  (port ${port})`);
   const proc = spawn('sh', ['-c', cmd], { cwd: WORKDIR, env: process.env, stdio: ['ignore', 'pipe', 'pipe'] });
-  proc.stdout.on('data', (d) => process.stdout.write(`[preview] ${d}`));
-  proc.stderr.on('data', (d) => process.stdout.write(`[preview] ${d}`));
+  preview = { port, proc, kind: null, url: null, tunnel: null, tunnelProc: null, output: '', buildError: null };
+  // Keep a rolling tail of output so the error scanner has something to read.
+  const capture = (d) => {
+    process.stdout.write(`[preview] ${d}`);
+    if (preview) preview.output = (preview.output + d).slice(-16000);
+  };
+  proc.stdout.on('data', capture);
+  proc.stderr.on('data', capture);
   proc.on('exit', (code) => console.log(`[preview] dev server exited (${code})`));
-  preview = { port, proc, kind: null, url: null, tunnel: null, tunnelProc: null };
 
   const up = await waitForPort(port, 60000);
   if (!up) { console.log('[preview] dev server never opened the port'); return null; }
@@ -603,7 +692,14 @@ async function startPreview(cmd, port) {
   preview.tunnel = t.tunnel || null;
   preview.tunnelProc = t.tunnelProc || null;
   console.log(`[preview] live at ${t.url}  (${t.kind})`);
-  return t.url;
+
+  // Before handing the URL to the phone, make sure the page will actually
+  // render — a dev server can be "up" while its bundle fails to compile.
+  const buildError = await probeBuildError(port);
+  if (preview) preview.buildError = buildError;
+  if (buildError) console.error(`[preview] ⚠ web build is failing:\n${buildError}`);
+
+  return { url: t.url, buildError };
 }
 
 // Tolerate leading markdown punctuation / code-fence backticks the agent
@@ -619,11 +715,23 @@ async function applyPreview(text) {
   if (!m) return text;
   const cmd = m[1].trim();
   const port = Number(m[2]);
-  let url = null;
-  try { url = await startPreview(cmd, port); } catch (e) { console.error('[preview] error:', e.message); }
-  const replacement = url
-    ? `🔗 Live preview: ${url}`
-    : `(Couldn't auto-start the preview — run \`${cmd}\` in ${WORKDIR} yourself.)`;
+  let result = null;
+  try { result = await startPreview(cmd, port); } catch (e) { console.error('[preview] error:', e.message); }
+  let replacement;
+  if (!result) {
+    replacement = `(Couldn't auto-start the preview — run \`${cmd}\` in ${WORKDIR} yourself.)`;
+  } else if (result.buildError) {
+    // Surface the failure as plain text WITHOUT the URL — the app turns any
+    // URL in a message into a "Preview Build" pill, and we don't want a pill
+    // that just opens a blank page. The error tells the user (and the agent,
+    // who sees this reply) exactly what to fix.
+    replacement =
+      `⚠️ Preview build failed — the web bundle didn't compile:\n\n` +
+      `${result.buildError}\n\n` +
+      `Fix that and I'll preview again. (Dev server is still running locally on port ${port}.)`;
+  } else {
+    replacement = `🔗 Live preview: ${result.url}`;
+  }
   return text.replace(PREVIEW_RE, replacement);
 }
 
@@ -778,6 +886,43 @@ function confirmWorkdir(dir) {
   });
 }
 
+// Bind the local HTTP server to the first free port at/after `startPort`.
+// EADDRINUSE on the default port almost always means a previous esque-bridge
+// is still running (or another app grabbed 3030). Rather than crash with a raw
+// Node stack trace, we step to the next port and tell the user. The pairing
+// URL travels over the tunnel, so the exact local port doesn't matter to the
+// app. Returns { server, port } for the port we actually bound.
+function listenOnFreePort(app, startPort, maxTries = 25) {
+  return new Promise((resolve, reject) => {
+    let attempts = 0;
+    const attempt = (port) => {
+      const server = app.listen(port);
+      const onError = (err) => {
+        server.removeListener('listening', onListening);
+        if (err && err.code === 'EADDRINUSE' && attempts < maxTries) {
+          if (attempts === 0) {
+            console.error(
+              `\n  Port ${startPort} is busy — another Esque bridge may already be running.`,
+            );
+            console.error('  Stepping to the next free port…');
+          }
+          attempts += 1;
+          attempt(port + 1);
+        } else {
+          reject(err);
+        }
+      };
+      const onListening = () => {
+        server.removeListener('error', onError);
+        resolve({ server, port });
+      };
+      server.once('error', onError);
+      server.once('listening', onListening);
+    };
+    attempt(startPort);
+  });
+}
+
 async function main() {
   if (!fs.existsSync(WORKDIR) || !fs.statSync(WORKDIR).isDirectory()) {
     console.error(`workdir does not exist: ${WORKDIR}`);
@@ -812,15 +957,18 @@ async function main() {
     process.exit(1);
   }
 
-  await new Promise((resolve) => app.listen(PORT, resolve));
+  const { port: boundPort } = await listenOnFreePort(app, PORT);
+  if (boundPort !== PORT) {
+    console.log(`  ✓ Using port ${boundPort} instead (${PORT} was taken).`);
+  }
 
   let tunnel;
   try {
-    tunnel = await localtunnel({ port: PORT, subdomain: LT_SUBDOMAIN });
+    tunnel = await localtunnel({ port: boundPort, subdomain: LT_SUBDOMAIN });
   } catch (err) {
     console.error('Failed to open localtunnel:', err.message);
     console.error('If localtunnel.me is blocked, try cloudflared:');
-    console.error(`  cloudflared tunnel --url http://localhost:${PORT}`);
+    console.error(`  cloudflared tunnel --url http://localhost:${boundPort}`);
     process.exit(1);
   }
 
@@ -836,7 +984,7 @@ async function main() {
   qrcode.generate(pairUrl, { small: true });
   console.log('');
   console.log(`  Agent        ${adapter.label} (${AGENT_TYPE})`);
-  console.log(`  Local        http://localhost:${PORT}`);
+  console.log(`  Local        http://localhost:${boundPort}`);
   console.log(`  Tunnel       ${tunnel.url}`);
   console.log(`  Workdir      ${WORKDIR}`);
   console.log(`  Binary       ${AGENT_BIN ?? '(custom)'}`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "esque-bridge",
-  "version": "0.6.0",
-  "description": "Desktop-side receiver for the Esque Agent mobile app. Pairs your phone with a local coding-agent CLI (Claude Code, Aider, or any custom command) via a tunnel + QR code, so prompts run through your subscription instead of per-token API billing.",
+  "version": "0.6.2",
+  "description": "Desktop-side receiver for the Esque Agent mobile app. Pairs your phone with a local coding-agent CLI (Claude Code, Codex, Aider, or any custom command) via a tunnel + QR code, so prompts run through your subscription instead of per-token API billing.",
   "bin": {
     "esque-bridge": "index.js"
   },