@oddessentials/agent-guild 0.26.0 → 0.28.0

package/src/manager/tailscale.mjs

@@ -0,0 +1,201 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { execFile } from 'node:child_process';
+import { resolveCommand } from './command-resolver.mjs';
+import { parseAllowedHosts } from './access-policy.mjs';
+
+const object = (value) => value && typeof value === 'object' && !Array.isArray(value);
+export const remoteError = (code, message, status = 409) => Object.assign(new Error(message), { code, status });
+
+export function findTailscale(env = process.env, platform = process.platform, exists = fs.existsSync) {
+  const onPath = resolveCommand(platform === 'win32' ? 'tailscale.exe' : 'tailscale', env, platform);
+  const candidates = [onPath];
+  if (platform === 'win32') {
+    for (const dir of [env.ProgramFiles, env['ProgramFiles(x86)'], 'C:\\Program Files']) {
+      if (dir) candidates.push(path.win32.join(dir, 'Tailscale', 'tailscale.exe'));
+    }
+  } else if (platform === 'darwin') {
+    candidates.push('/Applications/Tailscale.app/Contents/MacOS/Tailscale', '/usr/local/bin/tailscale', '/opt/homebrew/bin/tailscale');
+  } else candidates.push('/usr/bin/tailscale', '/usr/local/bin/tailscale');
+  return candidates.find((file) => file && (platform !== 'win32' || /\.exe$/i.test(file)) && exists(file)) || null;
+}
+
+export function approvalLink(output) {
+  for (const match of output.matchAll(/https:\/\/[^\s<>"']+/g)) {
+    try {
+      const url = new URL(match[0]);
+      if (url.hostname === 'login.tailscale.com' && !url.username && !url.password && !url.port) return url.href;
+    } catch {}
+  }
+  return null;
+}
+
+export function runTailscale(file, args, { env = process.env, signal, onApproval, timeout = 15000 } = {}) {
+  return new Promise((resolve, reject) => {
+    let output = '';
+    const child = execFile(file, args, {
+      env: { ...env, TAILSCALE_BE_CLI: '1' }, windowsHide: true, timeout, maxBuffer: 1024 * 1024, encoding: 'utf8', signal,
+    }, (error, stdout, stderr) => {
+      if (!error) return resolve(stdout);
+      const detail = `${stderr || ''}\n${stdout || ''}`.trim().slice(-2000);
+      const url = approvalLink(detail || output);
+      if (url) return reject(Object.assign(remoteError('approval_required', 'Approve HTTPS in Tailscale, then continue setup.'), { approvalUrl: url }));
+      if (/access denied|permission denied|must be.*(?:root|admin)|sudo tailscale|not permitted|serve config denied/i.test(detail)) {
+        return reject(remoteError('permission_required', 'Tailscale needs permission to configure remote access.'));
+      }
+      if (error.killed || error.code === 'ABORT_ERR') return reject(remoteError('tailscale_timeout', 'Tailscale did not finish. Check its connection and try again.'));
+      reject(remoteError('tailscale_error', detail || 'Could not communicate with Tailscale. Open Tailscale and check its connection.'));
+    });
+    const collect = (chunk) => {
+      output = (output + chunk).slice(-8192);
+      const url = approvalLink(output);
+      if (url) onApproval?.(url);
+    };
+    child.stdout?.on('data', collect);
+    child.stderr?.on('data', collect);
+  });
+}
+
+function parseJson(raw) {
+  let value;
+  try { value = JSON.parse(raw); } catch {}
+  if (value === null) return {};
+  if (!object(value)) throw remoteError('tailscale_response', 'Tailscale returned an unreadable status. Update Tailscale and try again.');
+  return value;
+}
+
+export function validateServeConfig(config) {
+  if (!object(config)) throw remoteError('tailscale_response', 'Tailscale returned an unreadable Serve configuration.');
+  for (const key of ['TCP', 'Web', 'AllowFunnel', 'Foreground', 'Services']) {
+    if (config[key] !== undefined && config[key] !== null && !object(config[key])) {
+      throw remoteError('tailscale_response', 'Tailscale returned an unsupported Serve configuration.');
+    }
+  }
+  for (const [port, value] of Object.entries(config.TCP || {})) {
+    if (!/^[1-9]\d{0,4}$/.test(port) || Number(port) > 65535 || !object(value)) {
+      throw remoteError('tailscale_response', 'Tailscale returned an unsupported TCP configuration.');
+    }
+  }
+  for (const value of Object.values(config.Web || {})) {
+    if (!object(value) || !object(value.Handlers) || Object.values(value.Handlers).some((handler) => !object(handler))) {
+      throw remoteError('tailscale_response', 'Tailscale returned an unsupported web configuration.');
+    }
+  }
+  if (Object.values(config.AllowFunnel || {}).some((value) => typeof value !== 'boolean')) {
+    throw remoteError('tailscale_response', 'Tailscale returned an unsupported Funnel configuration.');
+  }
+  for (const value of Object.values(config.Foreground || {})) {
+    if (!object(value) || value.Foreground) throw remoteError('tailscale_response', 'Tailscale returned an unsupported foreground configuration.');
+    validateServeConfig(value);
+  }
+  return config;
+}
+
+const ordered = (value) => Array.isArray(value) ? value.map(ordered)
+  : object(value) ? Object.fromEntries(Object.keys(value).sort().map((key) => [key, ordered(value[key])])) : value;
+export const sameConfig = (a, b) => JSON.stringify(ordered(a)) === JSON.stringify(ordered(b));
+export const routeAuthority = (route) => `${route.host}:${route.port}`;
+export const routeUrl = (route) => `https://${route.host}${route.port === 443 ? '' : `:${route.port}`}`;
+
+function foregroundPort(config, port) {
+  return Object.values(config.Foreground || {}).some((entry) => entry.TCP?.[port] || Object.keys(entry.Web || {}).some((key) => key.endsWith(`:${port}`)));
+}
+
+export function portOccupied(config, port) {
+  return Boolean(config.TCP?.[port] || Object.keys(config.Web || {}).some((key) => key.endsWith(`:${port}`))
+    || Object.keys(config.AllowFunnel || {}).some((key) => key.endsWith(`:${port}`)) || foregroundPort(config, port));
+}
+
+export function routeMatches(config, route) {
+  const authority = routeAuthority(route);
+  const web = config.Web?.[authority];
+  const handler = web?.Handlers?.['/'];
+  if (!sameConfig(config.TCP?.[route.port], { HTTPS: true }) || !object(web) || !object(handler)
+    || Object.entries(config.AllowFunnel || {}).some(([key, value]) => value && key.endsWith(`:${route.port}`)) || foregroundPort(config, route.port)
+    || Object.keys(web.Handlers).length !== 1 || Object.keys(web).some((key) => key !== 'Handlers')
+    || Object.keys(handler).some((key) => key !== 'Proxy')
+    || Object.keys(config.Web || {}).some((key) => key !== authority && key.endsWith(`:${route.port}`))) return false;
+  try {
+    const target = new URL(handler.Proxy);
+    return target.origin === new URL(route.target).origin && target.pathname === '/' && !target.search && !target.hash && !target.username && !target.password;
+  } catch { return false; }
+}
+
+export function chooseRoute(info, target, previous = null) {
+  if (previous) {
+    if (previous.nodeId !== info.nodeId || previous.host !== info.host) {
+      throw remoteError('network_changed', 'This computer’s Tailscale identity or address changed. Disable the saved connection before setting up the new address.');
+    }
+    if (portOccupied(info.config, previous.port) && !routeMatches(info.config, previous)) {
+      throw remoteError('route_changed', 'The saved Tailscale route was changed outside Agent Guild. Review it in Tailscale before continuing.');
+    }
+    return { ...previous, target };
+  }
+  for (const key of Object.keys(info.config.TCP || {})) {
+    const port = Number(key);
+    const route = { nodeId: info.nodeId, host: info.host, port, target };
+    if (Number.isInteger(port) && port > 0 && port <= 65535 && routeMatches(info.config, route)) return route;
+  }
+  const port = [443, ...Array.from({ length: 32 }, (_, i) => 8443 + i)].find((candidate) => !portOccupied(info.config, candidate));
+  if (!port) throw remoteError('no_port', 'No available HTTPS port was found. Free a Serve port in Tailscale and try again.');
+  return { nodeId: info.nodeId, host: info.host, port, target };
+}
+
+export class Tailscale {
+  constructor({ env = process.env, platform = process.platform, find = findTailscale, run = runTailscale } = {}) {
+    Object.assign(this, { env, platform, find, run });
+  }
+
+  async command(args, options = {}) {
+    const file = this.find(this.env, this.platform);
+    if (!file) throw remoteError('not_installed', 'Install Tailscale on this computer to connect it to your network.');
+    return this.run(file, args, { env: this.env, ...options });
+  }
+
+  async inspect(options = {}) {
+    const version = (await this.command(['version'], options)).trim().split(/\s/)[0];
+    const match = /^(\d+)\.(\d+)\.(\d+)/.exec(version);
+    if (!match || Number(match[1]) < 1 || (Number(match[1]) === 1 && Number(match[2]) < 52)) {
+      throw remoteError('update_required', 'Update Tailscale to version 1.52 or later to set up remote access.');
+    }
+    const status = parseJson(await this.command(['status', '--json', '--peers=false'], options));
+    if (!['Running', 'Starting'].includes(status.BackendState)) {
+      throw remoteError('not_connected', 'Open Tailscale and connect this computer to your network, then continue.');
+    }
+    const host = typeof status.Self?.DNSName === 'string' ? status.Self.DNSName.replace(/\.$/, '').toLowerCase() : null;
+    const nodeId = status.Self?.ID;
+    if (!host || typeof nodeId !== 'string' || !nodeId || !host.endsWith('.ts.net')) {
+      throw remoteError('address_unavailable', 'Tailscale has not assigned this computer an HTTPS address yet. Check its connection and MagicDNS settings.');
+    }
+    try { parseAllowedHosts(host); } catch { throw remoteError('address_unavailable', 'Tailscale returned an invalid HTTPS address.'); }
+    const config = validateServeConfig(parseJson(await this.command(['serve', 'status', '--json'], options)));
+    return { version, host, nodeId, config, httpsReady: Array.isArray(status.CertDomains) && status.CertDomains.includes(host) };
+  }
+
+  async enable(route, previous, options = {}) {
+    const before = await this.inspect(options);
+    if (before.nodeId !== route.nodeId || before.host !== route.host) throw remoteError('network_changed', 'Tailscale changed networks during setup. Check the connection and try again.');
+    if (routeMatches(before.config, route)) return;
+    if (portOccupied(before.config, route.port) && !(previous && routeMatches(before.config, previous))) {
+      throw remoteError('route_changed', 'The selected HTTPS port is now in use. Check the connection and try again.');
+    }
+    await this.command(['serve', '--bg', `--https=${route.port}`, '--set-path=/', route.target], { ...options, timeout: 30000 });
+    const after = await this.inspect(options);
+    if (after.nodeId !== route.nodeId || after.host !== route.host || !routeMatches(after.config, route)) {
+      throw remoteError('setup_incomplete', 'Tailscale has not finished setting up the private HTTPS route. Complete any approval, then continue.');
+    }
+  }
+
+  async remove(route, options = {}) {
+    const info = await this.inspect(options);
+    if (info.nodeId !== route.nodeId || info.host !== route.host) throw remoteError('network_changed', 'Connect Tailscale to the original network to remove its saved route.');
+    if (!portOccupied(info.config, route.port)) return info;
+    if (!routeMatches(info.config, route)) throw remoteError('route_changed', 'This Serve route was changed outside Agent Guild. It has been left in place; review it in Tailscale.');
+    await this.command(['serve', '--bg', `--https=${route.port}`, '--set-path=/', 'off'], options);
+    const after = await this.inspect(options);
+    if (after.nodeId !== route.nodeId || after.host !== route.host || portOccupied(after.config, route.port)) {
+      throw remoteError('cleanup_incomplete', 'The Serve route is still present. Check Tailscale and retry cleanup.');
+    }
+    return after;
+  }
+}

package/web/app.js

@@ -6,6 +6,8 @@ import { TerminalCopy } from './terminal-copy.js';
 import { topbarInline, dockMode, clampDockWidth, stageBesideDock, splitMode, clampRatio, bindSplitter, DOCK_MIN, SPLIT_RATIO_MIN } from './layout.js';
 import { highlightParts, rankRepos, recentFirst, remember, repoForOrigin, repoKey } from './repo-search.js';
 import { createActivityFavicon, isSessionWorking } from './activity-favicon.js';
+import { createRemoteAccessUI } from './remote-access.js';
+import { matchFolders, readRecentFolders, rememberFolder } from './folders.js';
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
@@ -18,6 +20,8 @@ const NEWS_FILTER_KEY = 'agentGuild.newsFilter';
 const CHANGELOG_SEEN_KEY = 'agentGuild.changelogSeen';
 const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
+const HIDDEN_FOLDERS_KEY = 'agentGuild.showHiddenFolders';
+const RECENT_CWDS_KEY = 'agentGuild.recentCwds';
 const GITHUB_REPO_KEY = 'agentGuild.githubRepo';
 const GITHUB_RECENT_KEY = 'agentGuild.githubRecent';
 const GITHUB_VIEW_KEY = 'agentGuild.githubView';
@@ -61,8 +65,8 @@ const state = {
   connected: false,
   folderOpener: null,
   folderOpening: false,
-  folderPicker: null,
-  folderPicking: false,
+  /** The manager's operating system, from `hello`. */
+  platform: null,
   /** The manager's own version check, from `hello` and `manager.upgrade`. */
   upgrade: null,
   /** The running manager's version and pid, from `hello`. */
@@ -120,6 +124,7 @@ function setConnection(kind, label) {
   el.title = label;
   // The manager can only be stopped, restarted or upgraded while the page can reach it.
   state.connected = kind === 'ok';
+  state.remoteAccessUI?.connectionChanged();
   $('manager').hidden = !state.connected;
   if (!state.connected) closeMenu($('manager-menu'));
   renderFolderTools();
@@ -735,11 +740,9 @@ function renderFolderTools() {
         : !feature?.available ? feature?.reason || text.missing
           : label;
   };
-  paint('cwd-pick', state.folderPicker, state.folderPicking, 'Choose a folder…', {
-    offline: 'Connect to the session manager to choose folders',
-    busy: 'Choosing a folder…',
-    missing: 'Choosing folders is unavailable with this manager',
-  });
+  for (const id of ['cwd-pick', 'github-parent-pick']) {
+    paint(id, { available: true }, false, 'Choose a folder…', { offline: 'Connect to the session manager to choose folders' });
+  }
   paint('cwd-open', state.folderOpener, state.folderOpening, `Open working folder in ${state.folderOpener?.label || 'file manager'}`, {
     offline: 'Connect to the session manager to open folders',
     busy: 'Opening working folder…',
@@ -747,22 +750,6 @@ function renderFolderTools() {
   });
 }
 
-async function pickWorkingFolder() {
-  if (!state.connected || !state.folderPicker?.available || state.folderPicking) return;
-  state.folderPicking = true;
-  renderFolderTools();
-  try {
-    const { path } = await api('POST', '/pick-folder', { cwd: $('cwd').value.trim() });
-    if (path) useFolder(path);
-  } catch (err) {
-    if (err instanceof AuthError) showAuth(err.message);
-    else toast(err.message || 'Could not choose a folder.');
-  } finally {
-    state.folderPicking = false;
-    renderFolderTools();
-  }
-}
-
 async function openWorkingFolder() {
   if (!state.connected || !state.folderOpener?.available || state.folderOpening) return;
   state.folderOpening = true;
@@ -778,6 +765,186 @@ async function openWorkingFolder() {
   }
 }
 
+// ---- recent working folders -----------------------------------------------
+
+const recentView = { open: false, typed: false, active: -1 };
+
+function recentCwds() {
+  return readRecentFolders(load(RECENT_CWDS_KEY));
+}
+
+function rememberCwd(dir) {
+  if (dir) save(RECENT_CWDS_KEY, JSON.stringify(rememberFolder(recentCwds(), dir, { caseless: state.platform === 'win32' })));
+}
+
+function renderRecentCwds() {
+  const input = $('cwd'), list = $('cwd-recent');
+  const shown = recentView.open ? matchFolders(recentCwds(), recentView.typed ? input.value : '') : [];
+  recentView.active = Math.min(recentView.active, shown.length - 1);
+  list.replaceChildren(...shown.map((dir, i) => {
+    const option = el('li', 'cwd-recent-option', dir);
+    option.id = `cwd-recent-${i}`;
+    option.setAttribute('role', 'option');
+    option.setAttribute('aria-selected', String(i === recentView.active));
+    option.addEventListener('pointerdown', (e) => e.preventDefault());
+    option.addEventListener('click', () => pickRecentCwd(dir));
+    return option;
+  }));
+  list.hidden = !shown.length;
+  input.setAttribute('aria-expanded', String(!list.hidden));
+  if (recentView.active >= 0) input.setAttribute('aria-activedescendant', `cwd-recent-${recentView.active}`);
+  else input.removeAttribute('aria-activedescendant');
+}
+
+function showRecentCwds(typed = false) {
+  Object.assign(recentView, { open: true, typed, active: -1 });
+  renderRecentCwds();
+}
+
+function hideRecentCwds() {
+  Object.assign(recentView, { open: false, active: -1 });
+  renderRecentCwds();
+}
+
+function pickRecentCwd(dir) {
+  hideRecentCwds();
+  useFolder(dir);
+}
+
+function recentCwdKeys(e) {
+  const options = $('cwd-recent').hidden ? [] : [...$('cwd-recent').children];
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    if (!recentView.open) showRecentCwds();
+    const count = $('cwd-recent').children.length;
+    if (!count) return;
+    recentView.active = e.key === 'ArrowDown' ? (recentView.active + 1) % count : recentView.active <= 0 ? count - 1 : recentView.active - 1;
+    renderRecentCwds();
+    $(`cwd-recent-${recentView.active}`).scrollIntoView?.({ block: 'nearest' });
+  } else if (e.key === 'Enter' && recentView.active >= 0 && options[recentView.active]) {
+    e.preventDefault();
+    pickRecentCwd(options[recentView.active].textContent);
+  } else if (e.key === 'Escape' && options.length) {
+    e.preventDefault();
+    hideRecentCwds();
+  }
+}
+
+// ---- folder browser -------------------------------------------------------
+
+const FOLDER_FIELDS = {
+  cwd: { title: 'Choose working folder', input: 'cwd' },
+  clone: { title: 'Choose clone folder', input: 'github-parent' },
+};
+const folderView = { field: null, listing: null, loading: false, error: null, request: 0, opener: null };
+
+function chooseFolder(field) {
+  if (!state.connected) return;
+  const dialog = $('folder-browser');
+  Object.assign(folderView, { field, listing: null, loading: false, error: null });
+  $('folder-title').textContent = FOLDER_FIELDS[field].title;
+  $('folder-filter').value = '';
+  $('folder-hidden').checked = load(HIDDEN_FOLDERS_KEY) === '1';
+  if (!dialog.open) {
+    folderView.opener = document.activeElement;
+    dialog.showModal();
+  }
+  browseTo($(FOLDER_FIELDS[field].input).value.trim());
+}
+
+async function browseTo(dir) {
+  const request = ++folderView.request;
+  folderView.loading = true;
+  folderView.error = null;
+  renderFolderBrowser();
+  try {
+    const listing = await api('GET', `/folders?path=${encodeURIComponent(dir)}`);
+    if (request !== folderView.request) return;
+    folderView.listing = listing;
+    $('folder-filter').value = '';
+  } catch (err) {
+    if (request !== folderView.request) return;
+    if (err instanceof AuthError) {
+      $('folder-browser').close();
+      return showAuth(err.message);
+    }
+    folderView.error = err.message || 'Could not list this folder.';
+  }
+  folderView.loading = false;
+  renderFolderBrowser();
+  if ($('folder-browser').open) ($('folder-list').querySelector('.folder-row') ?? $('folder-use')).focus();
+}
+
+function renderFolderBrowser() {
+  const { listing, loading, error } = folderView;
+  const query = $('folder-filter').value.trim().toLowerCase();
+  const showHidden = $('folder-hidden').checked;
+  $('folder-path').replaceChildren(...(listing?.segments ?? []).map((segment, i, all) => {
+    const crumb = button(segment.name, () => browseTo(segment.path), 'folder-crumb');
+    if (i === all.length - 1) crumb.setAttribute('aria-current', 'location');
+    return crumb;
+  }));
+  $('folder-roots').replaceChildren(...(listing?.roots ?? []).map((root) => button(root.name, () => browseTo(root.path), 'btn folder-chip')));
+  $('folder-up').disabled = loading || !listing?.parent;
+  $('folder-home').disabled = loading;
+  const note = $('folder-note');
+  note.hidden = !listing?.note;
+  note.textContent = listing?.note ? `${listing.note} was not found, so this shows the nearest folder that exists.` : '';
+  const entries = (listing?.entries ?? []).filter((entry) => (showHidden || !entry.hidden) && (!query || entry.name.toLowerCase().includes(query)));
+  $('folder-list').replaceChildren(...entries.map((entry) => {
+    const row = button(entry.name, () => browseTo(entry.path), 'folder-row');
+    row.classList.toggle('hidden-folder', entry.hidden);
+    row.title = entry.path;
+    return row;
+  }));
+  const status = $('folder-status');
+  status.textContent = loading ? 'Loading folders…'
+    : error ? error
+      : !listing ? ''
+        : !entries.length ? (listing.entries.length ? 'No folders match.' : 'No folders here.')
+          : listing.truncated ? `Showing the first ${listing.entries.length.toLocaleString()} folders.` : '';
+  status.classList.toggle('error', Boolean(error));
+  $('folder-current').textContent = listing?.path ?? '';
+  $('folder-use').disabled = loading || !listing;
+}
+
+function folderBrowserClosed() {
+  if (!$('folder-browser').open && folderView.opener?.isConnected) folderView.opener.focus();
+}
+
+function setCloneParent(dir) {
+  $('github-parent').value = dir;
+  save(CLONE_PARENT_KEY, dir);
+  loadRepos();
+}
+
+function useBrowsedFolder() {
+  const dir = folderView.listing?.path;
+  if (!dir || folderView.loading) return;
+  const field = folderView.field;
+  $('folder-browser').close();
+  if (field === 'clone') setCloneParent(dir);
+  else {
+    rememberCwd(dir);
+    useFolder(dir);
+  }
+}
+
+function moveInFolders(e) {
+  const rows = [...$('folder-list').querySelectorAll('.folder-row')];
+  const at = rows.indexOf(document.activeElement);
+  const next = { ArrowDown: at + 1, ArrowUp: at - 1, Home: 0, End: rows.length - 1 }[e.key];
+  if (at === -1 || next === undefined) return;
+  e.preventDefault();
+  rows[Math.max(0, Math.min(rows.length - 1, next))].focus();
+}
+
+function folderBrowserKeys(e) {
+  if (e.key !== 'Backspace' || e.target.matches('input') || !folderView.listing?.parent || folderView.loading) return;
+  e.preventDefault();
+  browseTo(folderView.listing.parent);
+}
+
 function wsUrl(path) {
   const proto = location.protocol === 'https:' ? 'wss' : 'ws';
   return `${proto}://${location.host}/api/v1${path}?token=${encodeURIComponent(state.token)}`;
@@ -2249,6 +2416,7 @@ async function startSession(provider, card, { resume, cwd, account = selectedAcc
       ({ session } = await api('POST', '/sessions', { ...body, cwd: working || undefined }));
     }
     upsertSession(session);
+    rememberCwd(session.cwd);
     closeHistory({ focusOpener: false });
     openPanel(session.id);
   } catch (err) {
@@ -4257,13 +4425,13 @@ class TerminalView {
   }
 
   connect() {
-    if (this.disposed) return;
+    if (this.disposed || state.remoteRevoked) return;
     const ws = new WebSocket(wsUrl(`/sessions/${this.id}/terminal`));
     this.ws = ws;
     ws.onopen = () => { this.retry = 0; this.sent = { cols: 0, rows: 0 }; this.sendSize(); };
     ws.onmessage = (event) => this.onMessage(JSON.parse(event.data));
     ws.onclose = (event) => {
-      if (this.disposed || event.code === 4404 || event.code === 4410) return;
+      if (this.disposed || event.code === 4403 || event.code === 4404 || event.code === 4410) return;
       const delay = Math.min(5000, 300 * 2 ** this.retry++);
       setTimeout(() => this.connect(), delay);
     };
@@ -4860,7 +5028,7 @@ function showManagerUnavailable() {
 }
 
 function connectEvents() {
-  if (state.pageAway) return;
+  if (state.pageAway || state.remoteRevoked) return;
   const ws = new WebSocket(wsUrl('/events'));
   state.eventsSocket = ws;
   ws.onopen = () => {
@@ -4880,7 +5048,8 @@ function connectEvents() {
       state.restartable = typeof msg.pid === 'number';
       state.launcher = typeof msg.launcher === 'string' ? msg.launcher : null;
       state.folderOpener = msg.folderOpener || null;
-      state.folderPicker = msg.folderPicker || null;
+      state.platform = msg.platform || null;
+      state.remoteAccessUI?.setAvailable(msg.remoteAccess);
       renderVersion();
       setConnection('ok', 'Connected to session manager');
       state.sessions = new Map(msg.sessions.map((s) => [s.id, s]));
@@ -4895,6 +5064,8 @@ function connectEvents() {
       // A changelog.updated sent while the socket was down is lost; catch up the open panel.
       if ($('changelog').open) loadChangelog();
       if (dockShows('github')) loadGitHub();
+    } else if (msg.type === 'remote-access.updated') {
+      state.remoteAccessUI?.updated();
     } else if (msg.type === 'news.updated') {
       loadNews();
     } else if (msg.type === 'github.updated') {
@@ -4921,8 +5092,15 @@ function connectEvents() {
       scheduleStats();
     }
   };
-  ws.onclose = () => {
+  ws.onclose = (event) => {
     if (state.pageAway || state.eventsSocket !== ws) return;
+    if (event?.code === 4403) {
+      state.remoteRevoked = true;
+      managerLoss.cancel();
+      state.remoteAccessUI?.close();
+      setConnection('down', 'Remote access changed. Your terminals are still running. Reopen an enabled address to reconnect.');
+      return;
+    }
     if (state.managerUnavailable) {
       showManagerUnavailable();
     } else if (state.stopping && state.stopRemaining !== null) {
@@ -4964,6 +5142,7 @@ let statsInterval;
 let newsTimer;
 
 function showAuth(message = '') {
+  state.remoteAccessUI?.setAvailable(null);
   managerLoss.cancel();
   closePanel();
   closeModels();
@@ -5132,10 +5311,8 @@ $('github-views').addEventListener('click', (e) => {
   if (view) switchGitHubView(view);
 });
 $('github-views').addEventListener('keydown', moveGitHubView);
-$('github-parent').addEventListener('change', () => {
-  save(CLONE_PARENT_KEY, cloneParent());
-  loadRepos();
-});
+$('github-parent').addEventListener('change', () => setCloneParent(cloneParent()));
+$('github-parent-pick').addEventListener('click', firstClick(() => chooseFolder('clone')));
 $('history-here').addEventListener('change', renderHistory);
 $('history-form').addEventListener('submit', resumeById);
 $('models').addEventListener('click', (e) => { if (e.target === $('models')) closeModels(); });
@@ -5358,7 +5535,25 @@ $('panel-stop').addEventListener('click', () => {
   else removeSession(s.id);
 });
 $('cwd').value = load(CWD_KEY) || '';
-$('cwd-pick').addEventListener('click', firstClick(pickWorkingFolder));
+$('cwd-pick').addEventListener('click', firstClick(() => chooseFolder('cwd')));
+$('cwd').addEventListener('focus', () => showRecentCwds());
+$('cwd').addEventListener('click', () => { if (!recentView.open) showRecentCwds(); });
+$('cwd').addEventListener('input', () => showRecentCwds(true));
+$('cwd').addEventListener('blur', hideRecentCwds);
+$('cwd').addEventListener('keydown', recentCwdKeys);
+$('folder-cancel').addEventListener('click', () => $('folder-browser').close());
+$('folder-browser').addEventListener('click', (e) => { if (e.target === $('folder-browser')) $('folder-browser').close(); });
+$('folder-browser').addEventListener('close', folderBrowserClosed);
+$('folder-browser').addEventListener('keydown', folderBrowserKeys);
+$('folder-list').addEventListener('keydown', moveInFolders);
+$('folder-up').addEventListener('click', () => browseTo(folderView.listing.parent));
+$('folder-home').addEventListener('click', () => browseTo('~'));
+$('folder-filter').addEventListener('input', renderFolderBrowser);
+$('folder-hidden').addEventListener('change', (e) => {
+  save(HIDDEN_FOLDERS_KEY, e.target.checked ? '1' : null);
+  renderFolderBrowser();
+});
+$('folder-use').addEventListener('click', useBrowsedFolder);
 $('cwd-open').addEventListener('click', firstClick(openWorkingFolder));
 try { state.accounts = JSON.parse(load(ACCOUNTS_KEY)) || {}; } catch { state.accounts = {}; }
 try { state.shellPicks = JSON.parse(load(SHELLS_KEY)) || {}; } catch { state.shellPicks = {}; }
@@ -5380,5 +5575,6 @@ addEventListener('scroll', publishTopbarHeight, { passive: true });
 publishTopbarHeight();
 applyDockLayout();
 
+state.remoteAccessUI = createRemoteAccessUI({ api, getToken: () => state.token, isConnected: () => state.connected, onAuthError: showAuth });
 state.token = readTokenFromHash() || load(TOKEN_KEY);
 boot();

package/web/folders.js

@@ -0,0 +1,17 @@
+export const RECENT_FOLDERS_MAX = 5;
+
+export function readRecentFolders(text) {
+  let list;
+  try { list = JSON.parse(text); } catch { return []; }
+  return Array.isArray(list) ? list.filter((dir) => typeof dir === 'string' && dir.trim()).slice(0, RECENT_FOLDERS_MAX) : [];
+}
+
+export function rememberFolder(list, dir, { caseless = false } = {}) {
+  const key = (value) => (caseless ? value.toLowerCase() : value);
+  return [dir, ...list.filter((known) => key(known) !== key(dir))].slice(0, RECENT_FOLDERS_MAX);
+}
+
+export function matchFolders(list, query) {
+  const wanted = query.trim().toLowerCase();
+  return wanted ? list.filter((dir) => dir.toLowerCase().includes(wanted)) : list;
+}