anyagent-bridge 0.6.0 → 0.8.0

package/README.md

@@ -39,6 +39,8 @@ before exposing the bridge beyond localhost, and
 - Persistent sessions that survive reconnects, with automatic PTY respawn and backoff.
 - 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/client/index.html

@@ -146,6 +146,59 @@
   #onboard .warn { color: var(--yellow); }
   #onboard .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
   #onboard .muted { color: var(--muted); font-size: 12px; }
+
+  /* Projects — folder-browser picker */
+  #projModal { position: fixed; inset: 0; z-index: 60; background: rgba(13,17,23,.96); display: none; align-items: center; justify-content: center; padding: 18px; }
+  #projModal.open { display: flex; }
+  #projModal .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); }
+  #projModal h2 { margin: 0 0 2px; font-size: 17px; }
+  #projModal .sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
+  #projModal .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; }
+  #projModal .pm-close:hover { color: var(--fg); }
+  #projModal .pm-list { list-style: none; margin: 0 0 12px; padding: 0; }
+  #projModal .pm-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; }
+  #projModal .pm-nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
+  #projModal .pm-pa { font-size: 11px; color: var(--muted); word-break: break-all; flex: 1; }
+  #projModal .pm-del { background: transparent; border: none; color: var(--red); cursor: pointer; font-size: 14px; padding: 0 4px; }
+  #projModal .pm-empty { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }
+  #projModal .pm-add { border-top: 1px solid var(--border); padding-top: 12px; }
+  #projModal .pm-add h3 { margin: 0 0 8px; font-size: 13px; }
+  #projModal .pm-crumb { font-size: 12px; color: var(--accent); word-break: break-all; margin: 0 0 6px; }
+  #projModal .pm-browser { border: 1px solid var(--border); border-radius: 7px; max-height: 190px; overflow-y: auto; margin-bottom: 8px; background: #0d1117; }
+  #projModal .pm-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 13px; border-bottom: 1px solid rgba(48,54,61,.5); }
+  #projModal .pm-row:last-child { border-bottom: none; }
+  #projModal .pm-row:hover { background: #161b22; }
+  #projModal .pm-row.up { color: var(--muted); }
+  #projModal .pm-sel { font-size: 12px; color: var(--fg); margin: 0 0 8px; word-break: break-all; }
+  #projModal .pm-sel b { color: var(--green); }
+  #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>
@@ -156,6 +209,8 @@
     <button id="startBtn">Start</button>
     <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>
@@ -208,6 +263,52 @@
   </div>
 </div>
 
+<div id="projModal">
+  <div class="card">
+    <button class="pm-close" id="pmClose" aria-label="Close">×</button>
+    <h2>Projects</h2>
+    <p class="sub">A project scopes an agent session to a folder. Add one by browsing — no typing the full path.</p>
+    <ul class="pm-list" id="pmList"></ul>
+    <p class="pm-empty" id="pmEmpty" style="display:none">No projects yet.</p>
+    <div class="pm-add">
+      <h3>Add a project</h3>
+      <p class="pm-crumb" id="pmCrumb">…</p>
+      <div class="pm-browser" id="pmBrowser"></div>
+      <p class="pm-sel">Selected folder: <b id="pmSel">…</b></p>
+      <div class="pm-fields">
+        <input id="pmName" type="text" placeholder="project name" autocomplete="off" autocapitalize="off" spellcheck="false" />
+        <button class="primary" id="pmAdd">Add project</button>
+      </div>
+      <p class="pm-err" id="pmErr"></p>
+    </div>
+  </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>
@@ -649,6 +750,252 @@
   onboard.addEventListener("click", (e) => { if (e.target === onboard) closeOnboard(); });
   document.addEventListener("keydown", (e) => { if (e.key === "Escape" && onboard.classList.contains("open")) closeOnboard(); });
 
+  // ---------- Projects: folder-browser picker (reuses GET /api/browse) ----------
+  const projBtn = $("projBtn"), projModal = $("projModal"), pmClose = $("pmClose");
+  let pmCurrent = null;
+  function pmBasename(p) { return p.replace(/[\/\\]+$/, "").split(/[\/\\]/).pop() || p; }
+  async function pmBrowse(p) {
+    const browser = $("pmBrowser"), err = $("pmErr");
+    err.textContent = "";
+    // Raw fetch (not api()) so the server's own message survives a 403 — e.g. a
+    // folder outside the configured allowedPaths returns "Access denied", which is
+    // far more useful than a generic "unauthorized".
+    let res, data;
+    try {
+      res = await fetch("/api/browse" + (p ? "?path=" + encodeURIComponent(p) : ""),
+        { credentials: "include", headers: token ? { Authorization: "Bearer " + token } : {} });
+      data = await res.json().catch(() => ({}));
+    } catch (e) { err.textContent = "Could not reach the server."; return; }
+    if (res.status === 401) { err.textContent = "Session expired — reload to log in again."; return; }
+    if (!res.ok || data.error) { err.textContent = data.error || ("Could not open that folder (HTTP " + res.status + ")."); return; }
+    pmCurrent = data.current;
+    $("pmCrumb").textContent = data.current;
+    $("pmSel").textContent = data.current;
+    // keep the name field in sync with the folder until the user types their own
+    if ($("pmName").dataset.auto !== "0") {
+      $("pmName").value = pmBasename(data.current);
+      $("pmName").dataset.auto = "1";
+    }
+    browser.innerHTML = "";
+    if (data.parent) {
+      const up = document.createElement("div");
+      up.className = "pm-row up"; up.textContent = "⬆  ..";
+      up.addEventListener("click", () => pmBrowse(data.parent));
+      browser.appendChild(up);
+    }
+    if (!data.folders.length) {
+      const none = document.createElement("div");
+      none.className = "pm-row"; none.style.cursor = "default"; none.textContent = "(no subfolders here)";
+      browser.appendChild(none);
+    }
+    for (const f of data.folders) {
+      const row = document.createElement("div");
+      row.className = "pm-row"; row.textContent = "📁  " + f.name;
+      row.addEventListener("click", () => pmBrowse(f.path));
+      browser.appendChild(row);
+    }
+  }
+  async function pmLoadList() {
+    const ul = $("pmList");
+    ul.innerHTML = "";
+    let list = [];
+    try { const d = await api("/api/projects"); list = d.projects || []; } catch (_) {}
+    $("pmEmpty").style.display = list.length ? "none" : "";
+    for (const p of list) {
+      const li = document.createElement("li");
+      const nm = document.createElement("span"); nm.className = "pm-nm"; nm.textContent = p.name;
+      const pa = document.createElement("span"); pa.className = "pm-pa"; pa.textContent = p.path;
+      const del = document.createElement("button"); del.className = "pm-del"; del.textContent = "✕"; del.title = "Remove";
+      del.addEventListener("click", () => pmDelete(p.name));
+      li.appendChild(nm); li.appendChild(pa); li.appendChild(del);
+      ul.appendChild(li);
+    }
+  }
+  async function pmAddProject() {
+    const err = $("pmErr"), name = $("pmName").value.trim();
+    if (!pmCurrent) { err.textContent = "Pick a folder first."; return; }
+    if (!name) { err.textContent = "Give the project a name."; return; }
+    err.textContent = "";
+    let res, data;
+    try {
+      res = await fetch("/api/projects", { method: "POST", credentials: "include",
+        headers: Object.assign({ "Content-Type": "application/json" }, token ? { Authorization: "Bearer " + token } : {}),
+        body: JSON.stringify({ name: name, path: pmCurrent }) });
+      data = await res.json().catch(() => ({}));
+    } catch (e) { err.textContent = "Network error."; return; }
+    if (!res.ok || data.error) { err.textContent = data.error || ("HTTP " + res.status); return; }
+    $("pmName").value = ""; $("pmName").dataset.auto = "1";
+    await pmLoadList();
+    try { await loadProjects(); } catch (_) {}   // refresh the toolbar dropdown
+  }
+  async function pmDelete(name) {
+    try {
+      await fetch("/api/projects/" + encodeURIComponent(name), { method: "DELETE", credentials: "include",
+        headers: token ? { Authorization: "Bearer " + token } : {} });
+    } catch (_) {}
+    await pmLoadList();
+    try { await loadProjects(); } catch (_) {}
+  }
+  function openProjects() {
+    projModal.classList.add("open");
+    $("pmErr").textContent = "";
+    $("pmName").value = ""; $("pmName").dataset.auto = "1";
+    pmLoadList();
+    pmBrowse(null);   // start at the server's home / first allowed base
+  }
+  function closeProjects() { projModal.classList.remove("open"); }
+  $("pmName").addEventListener("input", () => { $("pmName").dataset.auto = "0"; });
+  projBtn.addEventListener("click", openProjects);
+  pmClose.addEventListener("click", closeProjects);
+  projModal.addEventListener("click", (e) => { if (e.target === projModal) closeProjects(); });
+  $("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

@@ -82,6 +82,14 @@ dropdown in the top bar (e.g. **Claude Code**) and click **Start** — it runs i
 the session, streamed live to your browser. Detaching the browser keeps it alive;
 reconnect and you're back with full scrollback.
 
+To run the agent inside a specific **project folder**, click **📁 Projects** in the
+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

package/docs/WALKTHROUGH.md

@@ -46,6 +46,10 @@ as you would in your own terminal — streamed live to the browser. Type prompts
 send keys, and watch output in real time. Detaching the browser keeps the session
 alive; reconnecting reattaches with full scrollback.
 
+To scope a session to a folder, click **📁 Projects** in the top bar and *browse* to
+it — no typing the path. Saved projects appear in the toolbar dropdown; pick one
+before you launch the agent.
+
 ![Claude Code running inside a bridge session](screenshots/03-agent-running.png)
 
 ## 4. Browse and edit files

package/package.json

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