anyagent-bridge 0.7.0 → 0.8.1

package/README.md

@@ -6,6 +6,8 @@ Control your local computer's terminal — and **any** CLI AI coding agent you'v
 
 ## Quick start
 
+First install **Node.js 18+** (the LTS build from <https://nodejs.org>) — `npx` needs it. Then:
+
 ```bash
 # New here? A guided, first-timer setup (checks prerequisites, helps you go mobile):
 npx anyagent-bridge setup
@@ -40,6 +42,7 @@ before exposing the bridge beyond localhost, and
 - Heartbeat + dead-connection detection so stale viewers get cleaned up.
 - File management API: browse, read, write, rename, move, delete, upload, download — all behind a path whitelist.
 - Add projects by **browsing folders** in the UI (the 📁 Projects button) — no typing full paths.
+- Save API keys / tokens into a project's `.env.local` from the UI (the 🔑 Secrets button) — never paste them into the chat or hand-edit files.
 - Crash guards (uncaught exceptions, signals) so the server stays up.
 - Constant-time token comparison and basic rate limiting.
 - Optional **login**: Google/GitHub OAuth, TOTP 2FA, and signed expiring sessions on top of the token (Stage 3).

package/bin/setup.js

@@ -18,6 +18,7 @@ const fs = require('fs');
 const os = require('os');
 const crypto = require('crypto');
 const readline = require('readline');
+const { spawnSync } = require('child_process');
 const pkg = require('../package.json');
 
 // ── tiny ANSI helpers (no dependency) ─────────────────────────────────────────
@@ -114,8 +115,17 @@ async function confirm(question, def = true) {
   if (!agents.some((a) => a.found)) {
     out();
     out(yellow('  No AI agent CLI was found. The bridge still runs (you get a plain shell),'));
-    out(yellow('  but to launch an agent install one first, e.g. Claude Code:'));
-    out('    ' + cyan('npm install -g @anthropic-ai/claude-code') + dim('   then run `claude` once to log in.'));
+    out(yellow('  but to launch an agent you need one installed.'));
+    const wantClaude = await confirm('  Install Claude Code now (npm i -g @anthropic-ai/claude-code)?', false);
+    if (wantClaude) {
+      out(dim('  Installing via npm — this may take a minute…'));
+      const r = spawnSync('npm', ['install', '-g', '@anthropic-ai/claude-code'],
+        { stdio: 'inherit', shell: process.platform === 'win32' });
+      if (r.status === 0) out(green('  ✓ Installed. Run `claude` once in a terminal to log in, then it shows up here.'));
+      else out(yellow('  Install didn\'t finish — do it manually: ') + cyan('npm install -g @anthropic-ai/claude-code'));
+    } else {
+      out('  Install one yourself, e.g.: ' + cyan('npm install -g @anthropic-ai/claude-code') + dim('   then run `claude` once to log in.'));
+    }
     out(dim('  (Any CLI works — register it under "agents" in config.json.)'));
   }
 
@@ -145,6 +155,7 @@ async function confirm(question, def = true) {
       : `Find this computer's local IP (e.g. ${dim('System Settings → Network')}), then visit ${cyan(`http://<that-ip>:${port}/`)} on the other device.`);
     nextSteps.push(`${yellow('Heads up:')} on your Wi-Fi the access token is the only lock. Keep it private; only people on your network can even reach the page.`);
     nextSteps.push(`Easiest on a phone: open the page on this computer, click ${bold('"Connect a device" → Phone')}, and scan the QR.`);
+    if (process.platform === 'win32') nextSteps.push(`${yellow('Windows:')} the first time another device connects, Windows pops a Firewall prompt — click ${bold('Allow')} (at least Private networks) or the page won't load.`);
   } else {
     host = '127.0.0.1'; // the tunnel reaches in; we don't bind to the network directly
     out();
@@ -160,9 +171,15 @@ async function confirm(question, def = true) {
       tunnelProvider = prov.key === '2' ? 'cloudflare-quick' : 'devtunnel';
       const cli = tunnelProvider === 'cloudflare-quick' ? 'cloudflared' : 'devtunnel';
       if (!onPath(cli)) {
-        out(yellow(`   The "${cli}" command isn't installed yet.`));
-        out(`   Install it, then re-run setup. Docs: ${cyan('docs/INSTALL.md')} (Remote access).`);
-        out(dim('   Continuing anyway — the server will fall back to localhost-only if the tunnel cannot start.'));
+        out(yellow(`   The "${cli}" command isn't installed yet — install it, then re-run setup:`));
+        if (cli === 'cloudflared') {
+          if (process.platform === 'darwin') out('     ' + cyan('brew install cloudflared'));
+          else if (process.platform === 'win32') out('     ' + cyan('winget install --id Cloudflare.cloudflared') + dim('   (or grab it from github.com/cloudflare/cloudflared/releases)'));
+          else out('     ' + cyan('https://pkg.cloudflare.com') + dim('   (apt/yum) or github.com/cloudflare/cloudflared/releases'));
+        } else {
+          out('     ' + cyan('https://aka.ms/devtunnels/download') + dim('   then run `devtunnel user login` once'));
+        }
+        out(dim('   Continuing anyway — the server falls back to localhost-only if the tunnel cannot start.'));
       }
       nextSteps.push(`When the tunnel connects, its public ${bold('https://…')} URL prints in the banner below and shows in the UI.`);
       nextSteps.push(`Open that URL on your phone, or use ${bold('"Connect a device" → Phone')} in the UI to scan a QR.`);

package/client/index.html

@@ -174,6 +174,31 @@
   #projModal .pm-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
   #projModal .pm-fields input { flex: 1; min-width: 150px; }
   #projModal .pm-err { color: var(--red); font-size: 12px; min-height: 15px; margin: 6px 0 0; }
+
+  /* Secrets — per-project .env.local editor */
+  #secModal { position: fixed; inset: 0; z-index: 60; background: rgba(13,17,23,.96); display: none; align-items: center; justify-content: center; padding: 18px; }
+  #secModal.open { display: flex; }
+  #secModal .card { position: relative; background: var(--bar); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 20px 22px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
+  #secModal h2 { margin: 0 0 2px; font-size: 17px; }
+  #secModal h2 .dim { color: var(--muted); font-weight: 400; font-size: 14px; }
+  #secModal .sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
+  #secModal .pm-close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; }
+  #secModal .pm-close:hover { color: var(--fg); }
+  #secModal .pm-empty { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
+  #secModal .sec-field { margin-bottom: 8px; }
+  #secModal .sec-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
+  #secModal .sec-field select { width: 100%; }
+  #secModal .sec-target { font-size: 12px; color: var(--muted); margin: 0 0 10px; word-break: break-all; }
+  #secModal .sec-list { list-style: none; margin: 0 0 10px; padding: 0; }
+  #secModal .sec-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; }
+  #secModal .sec-k { font-size: 12.5px; font-weight: 600; word-break: break-all; }
+  #secModal .sec-v { font-size: 12px; color: var(--muted); flex: 1; font-family: Menlo, Monaco, monospace; word-break: break-all; }
+  #secModal .sec-eye, #secModal .sec-del { background: transparent; border: none; cursor: pointer; font-size: 13px; padding: 0 3px; }
+  #secModal .sec-del { color: var(--red); }
+  #secModal .sec-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  #secModal .sec-add input { flex: 1; min-width: 130px; }
+  #secModal .pm-err { color: var(--red); font-size: 12px; min-height: 15px; margin: 6px 0 0; }
+  #secModal .sec-note { font-size: 11px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
 </style>
 </head>
 <body>
@@ -185,6 +210,7 @@
     <button id="connectBtn" title="Open on a phone or another device">📱 Connect a device</button>
     <select id="projectSel" title="Project" style="display:none"></select>
     <button id="projBtn" title="Add or manage projects by browsing folders">📁 Projects</button>
+    <button id="secBtn" title="Save API keys / tokens into a project's .env.local">🔑 Secrets</button>
     <span class="spacer"></span>
     <span id="status" class="disconnected"><span class="led"></span><span id="statusText">disconnected</span></span>
   </div>
@@ -258,6 +284,31 @@
   </div>
 </div>
 
+<div id="secModal">
+  <div class="card">
+    <button class="pm-close" id="secClose" aria-label="Close">×</button>
+    <h2>Secrets <span class="dim">(.env.local)</span></h2>
+    <p class="sub">Save API keys and tokens into a project's <code>.env.local</code> — the agent you launch there reads them. They go straight to a file, never through the chat or terminal.</p>
+    <p class="pm-empty" id="secNoProj" style="display:none">Add a project first with the <b>📁 Projects</b> button — secrets are saved into a project folder.</p>
+    <div id="secEditor">
+      <div class="sec-field">
+        <label for="secProj">Project folder</label>
+        <select id="secProj"></select>
+      </div>
+      <p class="sec-target">Writes to <code id="secTarget">…</code></p>
+      <ul class="sec-list" id="secList"></ul>
+      <p class="pm-empty" id="secEmpty" style="display:none">No keys yet.</p>
+      <div class="sec-add">
+        <input id="secKey" type="text" placeholder="KEY (e.g. OPENAI_API_KEY)" autocomplete="off" autocapitalize="characters" spellcheck="false" />
+        <input id="secVal" type="password" placeholder="value" autocomplete="off" spellcheck="false" />
+        <button class="primary" id="secAdd">Save</button>
+      </div>
+      <p class="pm-err" id="secErr"></p>
+      <p class="sec-note">Stored unencrypted in the project folder, like any <code>.env</code> — anyone who can read that folder can read these.</p>
+    </div>
+  </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
 <script>
@@ -800,6 +851,151 @@
   $("pmAdd").addEventListener("click", pmAddProject);
   document.addEventListener("keydown", (e) => { if (e.key === "Escape" && projModal.classList.contains("open")) closeProjects(); });
 
+  // ---------- Secrets: write API keys into a project's .env.local ----------
+  const secBtn = $("secBtn"), secModal = $("secModal"), secClose = $("secClose");
+  let secRaw = "";      // current raw .env.local text for the selected project
+  let secPath = null;   // absolute path of that .env.local
+  let secLoadFailed = false;  // true when the existing file couldn't be read → block writes so we never clobber it
+  const VALID_KEY = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+  function secStripQuotes(v) {
+    v = v.trim();
+    if (v.length >= 2 && ((v[0] === '"' && v.endsWith('"')) || (v[0] === "'" && v.endsWith("'")))) return v.slice(1, -1);
+    return v;
+  }
+  function secParse(raw) {
+    const out = [];
+    for (const line of raw.split(/\r?\n/)) {
+      const m = line.match(/^\s*([A-Za-z_][A-Za-z0-9_]*)\s*=(.*)$/);
+      if (m) out.push({ key: m[1], value: secStripQuotes(m[2]) });
+    }
+    return out;
+  }
+  function secFormatValue(v) {
+    // bare when safe, else double-quote with escaping — so a value can never inject a new line/var
+    return /^[A-Za-z0-9_./:@+-]*$/.test(v) ? v : '"' + v.replace(/(["\\])/g, "\\$1") + '"';
+  }
+  function secSetLine(raw, key, value) {
+    const lines = raw.split(/\r?\n/);
+    const re = new RegExp("^\\s*" + key + "\\s*=");   // key is VALID_KEY-checked → no regex injection
+    const newLine = key + "=" + secFormatValue(value);
+    let replaced = false;
+    for (let i = 0; i < lines.length; i++) { if (re.test(lines[i])) { lines[i] = newLine; replaced = true; break; } }
+    if (!replaced) {
+      if (lines.length && lines[lines.length - 1].trim() === "") lines[lines.length - 1] = newLine;
+      else lines.push(newLine);
+    }
+    return lines.join("\n").replace(/\n*$/, "\n");
+  }
+  function secDelLine(raw, key) {
+    const re = new RegExp("^\\s*" + key + "\\s*=");
+    return raw.split(/\r?\n/).filter((l) => !re.test(l)).join("\n").replace(/\n*$/, "\n");
+  }
+
+  async function secLoadProjects() {
+    const sel = $("secProj");
+    sel.innerHTML = "";
+    let list = [];
+    try { const d = await api("/api/projects"); list = d.projects || []; } catch (_) {}
+    if (!list.length) { $("secNoProj").style.display = ""; $("secEditor").style.display = "none"; return; }
+    $("secNoProj").style.display = "none"; $("secEditor").style.display = "";
+    for (const p of list) {
+      const o = document.createElement("option");
+      o.value = p.path; o.textContent = p.name + "  (" + p.path + ")";
+      sel.appendChild(o);
+    }
+    if (projectSel && projectSel.value && [...sel.options].some((o) => o.value === projectSel.value)) sel.value = projectSel.value;
+    await secLoadEnv();
+  }
+  function secSetEnabled(on) {
+    $("secKey").disabled = !on; $("secVal").disabled = !on; $("secAdd").disabled = !on;
+  }
+  async function secLoadEnv() {
+    secPath = $("secProj").value.replace(/[\/\\]+$/, "") + "/.env.local";
+    $("secTarget").textContent = secPath;
+    $("secErr").textContent = "";
+    secRaw = "";
+    secLoadFailed = false;
+    // Distinguish "no file yet" (404 → a fresh file is fine) from a real read failure.
+    // On any other error we do NOT know the current contents, so we block editing —
+    // otherwise the next Save would write only the new key and wipe the rest.
+    let res;
+    try {
+      res = await fetch("/api/explorer/read?path=" + encodeURIComponent(secPath),
+        { credentials: "include", headers: token ? { Authorization: "Bearer " + token } : {} });
+    } catch (e) {
+      secLoadFailed = true;
+      $("secErr").textContent = "Couldn't reach the server — editing disabled so existing keys stay safe.";
+      secSetEnabled(false); secRender(); return;
+    }
+    if (res.status === 404) {
+      secRaw = "";                       // no .env.local yet
+    } else if (res.ok) {
+      const data = await res.json().catch(() => ({}));
+      secRaw = typeof data.content === "string" ? data.content : "";
+    } else {
+      secLoadFailed = true;
+      $("secErr").textContent = res.status === 401
+        ? "Session expired — reload to log in again."
+        : "Couldn't read this folder's .env.local — editing disabled so existing keys aren't overwritten.";
+      secSetEnabled(false); secRender(); return;
+    }
+    secSetEnabled(true);
+    secRender();
+  }
+  function secRender() {
+    const ul = $("secList");
+    ul.innerHTML = "";
+    const entries = secParse(secRaw);
+    $("secEmpty").style.display = entries.length ? "none" : "";
+    for (const e of entries) {
+      const li = document.createElement("li");
+      const k = document.createElement("span"); k.className = "sec-k"; k.textContent = e.key;
+      const v = document.createElement("span"); v.className = "sec-v"; v.textContent = "••••••••"; v.dataset.real = e.value; v.dataset.shown = "0";
+      const eye = document.createElement("button"); eye.className = "sec-eye"; eye.textContent = "👁"; eye.title = "Show / hide";
+      eye.addEventListener("click", () => { const sh = v.dataset.shown === "1"; v.textContent = sh ? "••••••••" : (v.dataset.real || "(empty)"); v.dataset.shown = sh ? "0" : "1"; });
+      const del = document.createElement("button"); del.className = "sec-del"; del.textContent = "✕"; del.title = "Remove";
+      del.addEventListener("click", () => secRemove(e.key));
+      li.appendChild(k); li.appendChild(v); li.appendChild(eye); li.appendChild(del);
+      ul.appendChild(li);
+    }
+  }
+  async function secWrite() {
+    const res = await fetch("/api/explorer/write", { method: "POST", credentials: "include",
+      headers: Object.assign({ "Content-Type": "application/json" }, token ? { Authorization: "Bearer " + token } : {}),
+      body: JSON.stringify({ path: secPath, content: secRaw }) });
+    if (res.status === 401) { closeSecrets(); showGate("Session expired — please log in again."); throw new Error("session expired"); }
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok || data.error) throw new Error(data.error || ("HTTP " + res.status));
+  }
+  async function secAdd() {
+    const err = $("secErr"), key = $("secKey").value.trim();
+    if (secLoadFailed) { err.textContent = "Can't save — the current .env.local couldn't be read. Re-open Secrets and try again."; return; }
+    if (!VALID_KEY.test(key)) { err.textContent = "Key must be letters/digits/underscores, e.g. OPENAI_API_KEY."; return; }
+    const val = $("secVal").value.replace(/[\r\n]+/g, "");   // a secret is single-line
+    err.textContent = "";
+    const prev = secRaw;
+    secRaw = secSetLine(secRaw, key, val);
+    try { await secWrite(); } catch (e) { secRaw = prev; err.textContent = "Could not save: " + e.message; return; }
+    $("secKey").value = ""; $("secVal").value = "";
+    secRender();
+  }
+  async function secRemove(key) {
+    const prev = secRaw;
+    secRaw = secDelLine(secRaw, key);
+    try { await secWrite(); } catch (e) { secRaw = prev; $("secErr").textContent = "Could not save: " + e.message; return; }
+    secRender();
+  }
+  function openSecrets() { secModal.classList.add("open"); $("secErr").textContent = ""; $("secKey").value = ""; $("secVal").value = ""; secLoadProjects(); }
+  function closeSecrets() { secModal.classList.remove("open"); }
+  secBtn.addEventListener("click", openSecrets);
+  secClose.addEventListener("click", closeSecrets);
+  secModal.addEventListener("click", (e) => { if (e.target === secModal) closeSecrets(); });
+  $("secProj").addEventListener("change", secLoadEnv);
+  $("secAdd").addEventListener("click", secAdd);
+  $("secVal").addEventListener("keydown", (e) => { if (e.key === "Enter") secAdd(); });
+  document.addEventListener("keydown", (e) => { if (e.key === "Escape" && secModal.classList.contains("open")) closeSecrets(); });
+
   // ---------- Bootstrap ----------
   (async function boot() {
     const params = new URLSearchParams(location.search);

package/docs/GETTING-STARTED.md

@@ -86,6 +86,10 @@ To run the agent inside a specific **project folder**, click **📁 Projects** i
 top bar and *browse* to the folder — no typing the full path. It's saved and shows
 up in the toolbar's project dropdown; pick one before launching.
 
+If the agent needs API keys (e.g. `OPENAI_API_KEY`), click **🔑 Secrets**, pick the
+project, and add `KEY` + value — it's written to that project's `.env.local` for you,
+so you never paste keys into the chat or hand-edit dotfiles.
+
 ## If something goes wrong
 
 - **`node -v` says command not found** — install Node.js (above), then reopen the
@@ -99,6 +103,13 @@ up in the toolbar's project dropdown; pick one before launching.
   tunnel at all — use the "same Wi-Fi" address instead.
 - **Lost the token** — it's printed in the terminal banner; scroll up, or stop and
   re-run. You can also pin your own with `--token`.
+- **Windows: another device can't reach it on Wi-Fi** — the first inbound connection
+  triggers a Windows Firewall prompt; click **Allow** (at least for Private networks).
+  If you dismissed it, allow `node` in Windows Defender Firewall settings.
+- **Windows: a red `'...cmd_autorun.bat' is not recognized…` line at the top of the
+  terminal** — that's not an anyagent-bridge error. It's a stale `cmd.exe` AutoRun
+  registry key on your machine (`HKCU\Software\Microsoft\Command Processor\AutoRun`);
+  the shell still works. Clear that key if you want the line gone.
 
 ## Where to go next
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anyagent-bridge",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Control your local terminal and any CLI AI coding agent from a browser, anywhere.",
   "license": "MIT",
   "author": "elon-choo",

package/server/index.js

@@ -744,7 +744,10 @@ class TerminalSession {
       console.warn(`[Session ${this.sessionId}] startAgent: invalid agent`);
       return;
     }
-    this.write(`${agent.command}\n`);
+    // Submit with CR, not LF: a real Enter key sends "\r" to a PTY. On Unix the line
+    // discipline maps CR→NL (ICRNL) so the command still runs; on Windows ConPTY,
+    // cmd.exe only executes a line ended with "\r" ("\n" types it but never runs it).
+    this.write(`${agent.command}\r`);
     this.activeAgentId = agent.id;
     console.log(`[Session ${this.sessionId}] Started agent '${agent.id}' (${agent.command})`);
   }
@@ -752,7 +755,7 @@ class TerminalSession {
   /** Send a line of text to whatever is currently running in the PTY. */
   sendToAgent(text) {
     if (text == null) return;
-    this.write(String(text) + '\n');
+    this.write(String(text) + '\r'); // CR submits on both Unix PTYs and Windows ConPTY (see startAgent)
   }
 
   destroy() {

package/test/stage4-smoke.js

@@ -132,7 +132,9 @@ t('buildDockerArgs has run --rm -it, name, mount, limits, image, shell', () => {
   const j = args.join(' ');
   assert(args[0] === 'run' && args.includes('--rm') && args.includes('-it'), j);
   assert(j.includes('--name aab-x-sess-1-ab'), j);
-  assert(j.includes('-v /tmp/proj:/workspace') && j.includes('-w /workspace'), j);
+  // OS-aware: buildDockerArgs maps the host path via dockerMountPath (e.g. on Windows
+  // C:\tmp\proj → //c/tmp/proj), so derive the expected mount the same way.
+  assert(j.includes('-v ' + sandbox.dockerMountPath('/tmp/proj') + ':/workspace') && j.includes('-w /workspace'), j);
   assert(j.includes('--network bridge') && j.includes('--memory 2g') && j.includes('--pids-limit 512'), j);
   assert(j.includes('--security-opt no-new-privileges'), j);
   assert(args[args.length - 2] === 'demo:latest' || args.includes('demo:latest'), j);