esque-bridge 0.6.1 → 0.6.3

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
@@ -613,23 +709,62 @@ const PREVIEW_RE = /^[ \t>*`-]*ESQUE_PREVIEW:\s*(.+?)\s*@\s*(\d+)\s*`?[ \t]*$/im
 
 // If the agent's reply declares a preview, start it (bridge-owned) and
 // swap the marker line for the public URL the phone can open.
+// Returns { text, buildError }. `buildError` is the short failure summary when
+// the declared preview started but its web bundle didn't compile (else null) —
+// the caller uses it to drive the auto-fix loop.
 async function applyPreview(text) {
-  if (!text) return text;
+  if (!text) return { text, buildError: null };
   const m = text.match(PREVIEW_RE);
-  if (!m) return text;
+  if (!m) return { text, buildError: null };
   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.)`;
-  return text.replace(PREVIEW_RE, replacement);
+  let result = null;
+  try { result = await startPreview(cmd, port); } catch (e) { console.error('[preview] error:', e.message); }
+  let replacement;
+  let buildError = null;
+  if (!result) {
+    replacement = `(Couldn't auto-start the preview — run \`${cmd}\` in ${WORKDIR} yourself.)`;
+  } else if (result.buildError) {
+    buildError = 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.
+    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: text.replace(PREVIEW_RE, replacement), buildError };
 }
 
 async function runAgentWithPreview(prompt, sessionId) {
   const result = await runAgent(prompt, sessionId);
-  if (result && result.text) result.text = await applyPreview(result.text);
+  if (!result || !result.text) return result;
+
+  const applied = await applyPreview(result.text);
+  result.text = applied.text;
+
+  // Auto-fix (one retry): the agent's own session history never saw our
+  // rewritten reply, so if the preview failed to build we hand the error back
+  // to the agent — same session (--resume), so it has full context — and let
+  // it fix the cause and re-emit the marker. Bounded at a single retry so a
+  // stubborn error can't loop.
+  if (applied.buildError) {
+    console.log('[preview] build failed — handing the error back to the agent (1 retry)');
+    const fixPrompt =
+      `The live preview you just started failed to build with this error:\n\n` +
+      `${applied.buildError}\n\n` +
+      `Fix the root cause in the code, then re-emit the ESQUE_PREVIEW marker on ` +
+      `its own line. Keep the explanation brief — make the fix and output the marker.`;
+    let fix = null;
+    try { fix = await runAgent(fixPrompt, sessionId); } catch (e) { console.error('[preview] auto-fix run failed:', e.message); }
+    if (fix && fix.text) {
+      const fixApplied = await applyPreview(fix.text);
+      result.text = `${applied.text}\n\n— Auto-fix attempt —\n${fixApplied.text}`;
+    }
+  }
   return result;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "esque-bridge",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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"