@oddessentials/agent-guild 0.27.0 → 0.28.1

package/README.md

@@ -68,6 +68,12 @@ session name in the header switches the focused terminal to another session.
 On a phone one terminal shows at a time, with a button to switch to the
 other. This browser reopens the terminals you had open after a reload.
 
+On phones and tablets, a strip below the terminal provides **← ↑ ↓ → Enter
+Esc**. Tap once to move through a prompt, confirm a choice or send Escape.
+The keys act on the focused terminal and leave the on-screen keyboard as
+it is. They are disabled while the terminal reconnects or after it exits;
+taps made while disconnected are never replayed.
+
 On a touchscreen, **Copy…** opens a still copy of the terminal text. Touch and
 hold to select, then use **Copy selection** or the browser's Copy menu. **Done**
 returns to the live terminal; the session keeps running while you copy. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/src/manager/folder-browser.mjs

@@ -0,0 +1,85 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const failure = (status, code, message) => Object.assign(new Error(message), { status, code });
+const byName = (a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base', numeric: true }) || (a.name < b.name ? -1 : 1);
+
+export function folderSegments(dir, paths = path) {
+  const root = paths.parse(dir).root;
+  const segments = [{ name: root, path: root }];
+  let current = root;
+  for (const part of dir.slice(root.length).split(paths.sep).filter(Boolean)) {
+    current = paths.join(current, part);
+    segments.push({ name: part, path: current });
+  }
+  return segments;
+}
+
+export function createFolderBrowser({ platform = process.platform, home = os.homedir(), limit = 2000, driveTimeoutMs = 500, fsp = fs.promises } = {}) {
+  const paths = platform === 'win32' ? path.win32 : path.posix;
+
+  async function roots() {
+    if (platform !== 'win32') return [{ name: '/', path: '/' }];
+    const letters = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
+    const found = await Promise.all(letters.map((letter) => {
+      let timer;
+      const probe = fsp.stat(`${letter}:\\`).then((stat) => stat.isDirectory(), () => false);
+      const late = new Promise((resolve) => { timer = setTimeout(resolve, driveTimeoutMs, false); });
+      return Promise.race([probe, late]).finally(() => clearTimeout(timer));
+    }));
+    return letters.filter((_, i) => found[i]).map((letter) => ({ name: `${letter}:`, path: `${letter}:\\` }));
+  }
+
+  async function nearestFolder(dir) {
+    for (;;) {
+      try {
+        if ((await fsp.stat(dir)).isDirectory()) return dir;
+      } catch (error) {
+        if (error.code !== 'ENOENT' && error.code !== 'ENOTDIR') throw failure(409, 'folder_unreadable', `Agent Guild cannot read ${dir}.`);
+      }
+      const parent = paths.dirname(dir);
+      if (parent === dir) return home;
+      dir = parent;
+    }
+  }
+
+  async function entries(dir) {
+    let listed;
+    try {
+      listed = await fsp.readdir(dir, { withFileTypes: true });
+    } catch {
+      throw failure(409, 'folder_unreadable', `Agent Guild cannot read ${dir}.`);
+    }
+    const folders = await Promise.all(listed.map(async (entry) => {
+      let folder = entry.isDirectory();
+      if (!folder && entry.isSymbolicLink()) folder = await fsp.stat(paths.join(dir, entry.name)).then((stat) => stat.isDirectory(), () => false);
+      return folder ? { name: entry.name, path: paths.join(dir, entry.name), hidden: entry.name.startsWith('.') } : null;
+    }));
+    return folders.filter(Boolean).sort(byName);
+  }
+
+  return {
+    async list(raw) {
+      if (raw !== undefined && raw !== null && (typeof raw !== 'string' || raw.includes('\0'))) {
+        throw failure(400, 'bad_path', 'The folder must be a path.');
+      }
+      let asked = String(raw ?? '').trim();
+      if (asked === '~' || asked.startsWith('~/') || asked.startsWith('~\\')) asked = paths.join(home, asked.slice(1));
+      const wanted = asked ? paths.resolve(asked) : home;
+      const dir = await nearestFolder(wanted);
+      const [folders, drives] = await Promise.all([entries(dir), roots()]);
+      const parent = paths.dirname(dir);
+      return {
+        path: dir,
+        parent: parent === dir ? null : parent,
+        home,
+        segments: folderSegments(dir, paths),
+        roots: drives,
+        entries: folders.slice(0, limit),
+        truncated: folders.length > limit,
+        note: dir === wanted ? null : wanted,
+      };
+    },
+  };
+}

package/src/manager/server.mjs

@@ -10,7 +10,7 @@ import { timingSafeEqualString } from './session-manager.mjs';
 import { folderOrigin } from './github.mjs';
 import { createViews } from './github-views.mjs';
 import { createFolderOpener } from './folder-opener.mjs';
-import { createFolderPicker } from './folder-picker.mjs';
+import { createFolderBrowser } from './folder-browser.mjs';
 import { normalizeAccess } from './access-policy.mjs';
 
 const require = createRequire(import.meta.url);
@@ -114,7 +114,7 @@ export function createManagerServer({
   extraOrigins = [],
   remoteAccess = null,
   folderOpener = createFolderOpener({ resolveCwd: (cwd) => manager.resolveCwd(cwd) }),
-  folderPicker = createFolderPicker({ resolveCwd: (cwd) => manager.resolveCwd(cwd) }),
+  folderBrowser = createFolderBrowser(),
   /** The double-click launcher file for this platform, or null when the package carries none. */
   launcher = null,
   /** @type {(opts: { restart: boolean }) => void} */
@@ -133,7 +133,13 @@ export function createManagerServer({
   const vendor = vendorFiles();
   let boundPort = port;
 
-  const allowedHosts = () => new Set([`127.0.0.1:${boundPort}`, `localhost:${boundPort}`, `[::1]:${boundPort}`, ...access.hosts]);
+  const localHosts = () => [`127.0.0.1:${boundPort}`, `localhost:${boundPort}`, `[::1]:${boundPort}`];
+  const allowedHosts = () => new Set([...localHosts(), ...access.hosts]);
+  const isLocalClient = (req) => localHosts().includes(String(req.headers.host || '').toLowerCase());
+  const folderOpenerFor = (req) => {
+    const opener = folderOpener.describe();
+    return isLocalClient(req) ? opener : { ...opener, available: false, reason: 'Only available on the computer running Agent Guild.' };
+  };
   const allowedOrigins = () =>
     new Set([`http://127.0.0.1:${boundPort}`, `http://localhost:${boundPort}`, `http://[::1]:${boundPort}`, ...access.origins]);
 
@@ -268,21 +274,18 @@ export function createManagerServer({
         warnings: registry.warnings,
         upgrade: upgradeInfo(),
         launcher,
-        folderOpener: folderOpener.describe(),
-        folderPicker: folderPicker.describe(),
+        folderOpener: folderOpenerFor(req),
         remoteAccess: remoteAccess ? { available: true } : null,
       });
     }
     if (route === '/open-folder' && method === 'POST') {
       const { cwd } = await readJsonBody(req);
+      if (!isLocalClient(req)) throw new HttpError(403, 'Only available on the computer running Agent Guild.', 'local_only');
       await folderOpener.open(cwd);
       return sendJson(res, 200, { ok: true });
     }
-    if (route === '/pick-folder' && method === 'POST') {
-      const { cwd } = await readJsonBody(req);
-      const gone = new AbortController();
-      res.once('close', () => gone.abort());
-      return sendJson(res, 200, { path: await folderPicker.pick(cwd, { signal: gone.signal }) });
+    if (route === '/folders' && method === 'GET') {
+      return sendJson(res, 200, await folderBrowser.list(url.searchParams.get('path') ?? undefined));
     }
     if (route === '/upgrade' && method === 'POST') {
       const session = await manager.upgrade();
@@ -530,9 +533,9 @@ export function createManagerServer({
   github?.on('updated', () => broadcast({ type: 'github.updated' }));
   remoteAccess?.on('updated', () => broadcast({ type: 'remote-access.updated' }));
 
-  function handleEvents(ws) {
+  function handleEvents(ws, req) {
     eventClients.add(ws);
-    safeSend(ws, { type: 'hello', version, pid: process.pid, startedAt, launcher, folderOpener: folderOpener.describe(), folderPicker: folderPicker.describe(), remoteAccess: remoteAccess ? { available: true } : null, upgrade: upgradeInfo(), sessions: manager.list() });
+    safeSend(ws, { type: 'hello', version, pid: process.pid, platform: process.platform, startedAt, launcher, folderOpener: folderOpenerFor(req), remoteAccess: remoteAccess ? { available: true } : null, upgrade: upgradeInfo(), sessions: manager.list() });
     ws.on('close', () => eventClients.delete(ws));
     ws.on('message', () => { /* events socket is server -> client only */ });
   }
@@ -582,7 +585,7 @@ export function createManagerServer({
       ws.on('pong', () => { ws.isAlive = true; });
       ws.on('error', () => {});
       if (termMatch) handleTerminal(ws, termMatch[1]);
-      else handleEvents(ws);
+      else handleEvents(ws, req);
     });
   });
 

package/web/app.js

@@ -3,10 +3,12 @@
 
 import { SOUNDS, MAX_ALERT_AGE_MS, playOnce, rearmSound, managerLossWatcher, stopWatcher, updateWatcher } from './alerts.js';
 import { TerminalCopy } from './terminal-copy.js';
+import { TerminalControls, bindTerminalViewport } from './terminal-controls.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';
@@ -19,6 +21,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';
@@ -62,8 +66,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`. */
@@ -121,6 +125,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';
+  terminalControls.refresh();
   state.remoteAccessUI?.connectionChanged();
   $('manager').hidden = !state.connected;
   if (!state.connected) closeMenu($('manager-menu'));
@@ -737,11 +742,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…',
@@ -749,22 +752,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;
@@ -780,6 +767,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)}`;
@@ -2251,6 +2418,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) {
@@ -4260,11 +4428,18 @@ class TerminalView {
 
   connect() {
     if (this.disposed || state.remoteRevoked) return;
+    this.inputReady = false;
+    this.inputSnapshot = null;
+    terminalControls.refresh();
     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.onmessage = (event) => { if (!this.disposed && this.ws === ws) this.onMessage(JSON.parse(event.data)); };
     ws.onclose = (event) => {
+      if (this.ws !== ws) return;
+      this.inputReady = false;
+      this.inputSnapshot = null;
+      terminalControls.refresh();
       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);
@@ -4274,14 +4449,31 @@ class TerminalView {
   onMessage(msg) {
     switch (msg.type) {
       case 'snapshot':
+        this.inputReady = false;
+        this.inputSnapshot = msg;
+        this.inputRun = msg.session.startedAt;
+        terminalControls.refresh();
         this.term.reset();
         this.term.resize(msg.cols, msg.rows);
-        this.term.write(msg.data, () => { this.sent = { cols: 0, rows: 0 }; this.refit(); });
+        {
+          const ws = this.ws;
+          this.term.write(msg.data, () => {
+            if (this.disposed || this.ws !== ws || ws.readyState !== WebSocket.OPEN || this.inputSnapshot !== msg) return;
+            this.inputReady = msg.session.status === 'running';
+            this.inputSnapshot = null;
+            this.sent = { cols: 0, rows: 0 };
+            this.refit();
+            terminalControls.refresh();
+          });
+        }
         break;
       case 'data':
         this.term.write(msg.data);
         break;
       case 'exit':
+        this.inputReady = false;
+        this.inputSnapshot = null;
+        terminalControls.refresh();
         if (dictation?.id === this.id) stopDictation();
         this.term.write(`\r\n\x1b[2m${exitLine(state.sessions.get(this.id), msg)}\x1b[0m\r\n`);
         break;
@@ -4366,6 +4558,9 @@ class TerminalView {
 
   dispose() {
     this.disposed = true;
+    this.inputReady = false;
+    this.inputSnapshot = null;
+    terminalControls.refresh();
     this.resizeObserver.disconnect();
     this.ws?.close();
     this.term.dispose();
@@ -4375,6 +4570,20 @@ class TerminalView {
 
 // ---- terminal panel -------------------------------------------------------
 
+const terminalControls = new TerminalControls({
+  element: $('terminal-controls'), panel: $('terminal-panel'),
+  getCurrent: () => {
+    const session = state.sessions.get(state.activeId);
+    const view = state.views.get(state.activeId);
+    if (!session || session.status !== 'running' || !view?.inputReady || view.disposed
+      || session.startedAt !== view.inputRun || view.ws?.readyState !== WebSocket.OPEN
+      || !state.connected || state.pageAway || state.remoteRevoked || state.stopping
+      || $('app').hidden || $('terminal-panel').hidden || !view.el.isConnected) return null;
+    return { term: view.term, socket: view.ws, run: session.startedAt, name: session.name };
+  },
+});
+bindTerminalViewport($('terminal-panel'), $('terminal-controls'));
+
 const terminalCopy = new TerminalCopy({
   opener: $('panel-copy'), dialog: $('terminal-copy'),
   getCurrent: () => {
@@ -4412,7 +4621,7 @@ function openPanel(id, { beside = false, restoring = false } = {}) {
 function focusPane(index, { focusTerminal = true } = {}) {
   const id = state.panes[index];
   if (!id) return;
-  if (state.activeId !== id) terminalCopy.close();
+  if (state.activeId !== id) { terminalCopy.close(); terminalControls.cancel(); }
   if (dictation && dictation.id !== id) stopDictation();
   state.focusedPane = index;
   state.activeId = id;
@@ -4433,6 +4642,7 @@ function closePane(index, { focusTerminal = true } = {}) {
 }
 
 function closePanel() {
+  terminalControls.cancel();
   terminalCopy.close();
   stopDictation();
   for (const id of state.panes) state.views.get(id)?.unmount();
@@ -4447,7 +4657,8 @@ function closePanel() {
 
 function stageSplit() {
   const box = $('terminal-panel').getBoundingClientRect();
-  return splitMode(box.width, box.height);
+  const controls = $('terminal-controls');
+  return splitMode(box.width, box.height - (controls.hidden ? 0 : controls.offsetHeight));
 }
 
 function layoutPanes() {
@@ -4543,6 +4754,7 @@ function restorePanes() {
 }
 
 function updatePanel() {
+  terminalControls.refresh();
   renderVoice();
   const s = state.sessions.get(state.activeId);
   if (!s) return;
@@ -4882,7 +5094,7 @@ 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');
@@ -5056,7 +5268,12 @@ bindSplitter($('pane-splitter'), {
   home: () => setSplitRatio(SPLIT_RATIO_MIN),
   endKey: () => setSplitRatio(1 - SPLIT_RATIO_MIN),
 });
-new ResizeObserver(layoutPanes).observe($('terminal-panel'));
+let terminalLayoutFrame;
+const terminalLayoutObserver = new ResizeObserver(() => {
+  cancelAnimationFrame(terminalLayoutFrame);
+  terminalLayoutFrame = requestAnimationFrame(layoutPanes);
+});
+for (const node of [$('terminal-panel'), $('terminal-controls')]) terminalLayoutObserver.observe(node);
 $('panel-voice').addEventListener('click', () => {
   if (dictation) {
     const { id } = dictation;
@@ -5145,10 +5362,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(); });
@@ -5371,7 +5586,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 = {}; }
@@ -5388,8 +5621,13 @@ setInterval(() => { if (dockShows('github') && state.github) renderGitHub(); },
 // The terminal panel and the dock sit below the top bar; publish where it ends so they never cover its controls.
 const topbar = document.querySelector('.topbar');
 const publishTopbarHeight = () => document.documentElement.style.setProperty('--topbar-h', `${Math.max(0, Math.round(topbar.getBoundingClientRect().bottom))}px`);
-new ResizeObserver(publishTopbarHeight).observe(topbar);
-addEventListener('scroll', publishTopbarHeight, { passive: true });
+let topbarFrame;
+const scheduleTopbarHeight = () => {
+  cancelAnimationFrame(topbarFrame);
+  topbarFrame = requestAnimationFrame(publishTopbarHeight);
+};
+new ResizeObserver(scheduleTopbarHeight).observe(topbar);
+addEventListener('scroll', scheduleTopbarHeight, { passive: true });
 publishTopbarHeight();
 applyDockLayout();
 

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;
+}

package/web/index.html

@@ -69,7 +69,8 @@
           <div class="cwd">
             <label for="cwd">Working folder</label>
             <div class="cwd-field">
-              <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder">
+              <input id="cwd" type="text" spellcheck="false" autocomplete="off" placeholder="Home folder" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="cwd-recent">
+              <ul id="cwd-recent" class="cwd-recent" role="listbox" aria-label="Recent working folders" hidden></ul>
               <div class="cwd-tools">
                 <button id="cwd-pick" class="cwd-tool" type="button" aria-label="Choose a folder…" title="Connect to the session manager to choose folders" disabled>
                   <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
@@ -168,6 +169,14 @@
         <div class="terminal-host"></div>
       </section>
     </div>
+    <div id="terminal-controls" class="terminal-controls" role="group" aria-label="Terminal keys" hidden>
+      <button class="btn terminal-key" type="button" data-key="ArrowLeft" aria-label="Left arrow" title="Left arrow" disabled>←</button>
+      <button class="btn terminal-key" type="button" data-key="ArrowUp" aria-label="Up arrow" title="Up arrow" disabled>↑</button>
+      <button class="btn terminal-key" type="button" data-key="ArrowDown" aria-label="Down arrow" title="Down arrow" disabled>↓</button>
+      <button class="btn terminal-key" type="button" data-key="ArrowRight" aria-label="Right arrow" title="Right arrow" disabled>→</button>
+      <button class="btn terminal-key" type="button" data-key="Enter" title="Send Enter to the terminal" disabled>Enter</button>
+      <button class="btn terminal-key" type="button" data-key="Escape" aria-label="Escape" title="Send Escape to the terminal" disabled>Esc</button>
+    </div>
     <div id="voice-preview" class="voice-preview" hidden aria-live="polite"></div>
   </div>
 
@@ -234,7 +243,17 @@
       <div id="github-pulls" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-pulls" hidden></div>
       <div id="github-clone-into" class="history-form github-form">
         <label for="github-parent">Clone into</label>
-        <input id="github-parent" type="text" placeholder="Folder that holds your clones" spellcheck="false" autocomplete="off">
+        <div class="cwd-field single">
+          <input id="github-parent" type="text" placeholder="Folder that holds your clones" spellcheck="false" autocomplete="off">
+          <div class="cwd-tools">
+            <button id="github-parent-pick" class="cwd-tool" type="button" aria-label="Choose a folder…" title="Connect to the session manager to choose folders" disabled>
+              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                <path d="M3.5 9V6.5A1.5 1.5 0 0 1 5 5h4l2 2h7.5A1.5 1.5 0 0 1 20 8.5V10"/>
+                <path d="M3.5 10.5H21l-2.5 8H5.5z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
     </section>
     <section id="notes" class="dock-panel notes-panel" role="tabpanel" aria-labelledby="notes-title" hidden>
@@ -402,6 +421,35 @@
     </form>
   </dialog>
 
+  <dialog id="folder-browser" class="models folder-browser" aria-labelledby="folder-title">
+    <div class="models-bar">
+      <div class="models-heading">
+        <h2 id="folder-title">Choose working folder</h2>
+        <p class="sub">Folders on the computer running Agent Guild</p>
+      </div>
+      <button id="folder-cancel" class="btn" type="button">Cancel</button>
+    </div>
+    <nav id="folder-path" class="history-tools folder-path" aria-label="Current folder"></nav>
+    <div class="history-tools folder-places">
+      <button id="folder-up" class="btn" type="button">Up</button>
+      <button id="folder-home" class="btn folder-chip" type="button">Home</button>
+      <div id="folder-roots" class="folder-roots"></div>
+    </div>
+    <div class="history-tools">
+      <input id="folder-filter" type="search" placeholder="Filter folders" aria-label="Filter folders" spellcheck="false" autocomplete="off">
+      <label class="history-here"><input id="folder-hidden" type="checkbox"><span>Show hidden</span></label>
+    </div>
+    <div class="models-body">
+      <p id="folder-note" class="models-note" hidden></p>
+      <div id="folder-list" class="folder-list" role="group" aria-label="Folders"></div>
+      <p id="folder-status" class="models-note" aria-live="polite"></p>
+    </div>
+    <div class="history-form folder-footer">
+      <span id="folder-current" class="folder-current"></span>
+      <button id="folder-use" class="btn primary" type="button">Use this folder</button>
+    </div>
+  </dialog>
+
   <div id="tip" class="tip" aria-hidden="true" hidden><strong id="tip-title"></strong><span id="tip-source"></span><p id="tip-text"></p></div>
 
   <div id="toast" class="toast" role="alert" hidden></div>

package/web/styles.css

@@ -443,7 +443,7 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 
 .terminal-panel {
   /* Below the top bar, whose bottom edge the page publishes as --topbar-h. */
-  position: fixed; inset: calc(var(--topbar-h, 52px) + 12px) calc(16px + var(--dock-stage-space, 0px)) 16px 16px; z-index: 10; display: flex; flex-direction: column;
+  position: fixed; inset: max(calc(var(--topbar-h, 52px) + 12px), var(--terminal-viewport-top, 0px)) calc(16px + var(--dock-stage-space, 0px)) calc(16px + var(--terminal-viewport-bottom, 0px)) 16px; z-index: 10; display: flex; flex-direction: column;
   background: var(--term-bg); border: 1px solid var(--border); border-radius: var(--radius);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); overflow: hidden;
 }
@@ -518,6 +518,30 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 }
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
+.terminal-controls {
+  flex: none; display: flex; justify-content: center; gap: 4px;
+  padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
+  border-top: 1px solid var(--border); background: var(--surface);
+  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
+}
+.terminal-controls .terminal-key {
+  flex: 1 1 0; min-width: 44px; max-width: 64px; min-height: 48px; padding: 4px;
+  font: 600 0.85rem var(--font-mono); touch-action: manipulation;
+}
+.terminal-key[data-key^="Arrow"] { font-size: 1.3rem; }
+.terminal-key[data-key="Enter"] { flex-grow: 1.25; max-width: 80px; }
+.terminal-key.pressed:not(:disabled) { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-text); transform: translateY(1px); }
+.terminal-key:disabled { cursor: default; }
+.terminal-panel:has(.terminal-controls:not([hidden])) .voice-preview { bottom: calc(72px + env(safe-area-inset-bottom)); }
+/* A docked keyboard in landscape leaves little height. Keep the session and actions
+   available in one header row; Hide still returns to the normal page. */
+.terminal-panel[data-compact] { top: var(--terminal-viewport-top, 0px); }
+.terminal-panel[data-compact] .panel-bar { flex-wrap: nowrap; gap: 6px; padding: 6px 8px; }
+.terminal-panel[data-compact] .panel-title { flex: 1 1 0; }
+.terminal-panel[data-compact] :is(.panel-title .sub, .panel-title .agents, .panel-title .provider-icon) { display: none; }
+.terminal-panel[data-compact] .panel-actions { flex-wrap: nowrap; gap: 4px; max-width: 65%; overflow-x: auto; }
+.terminal-panel[data-compact] .panel-actions .btn { flex: none; }
+.terminal-panel[data-compact] #panel-close { position: sticky; right: 0; z-index: 1; box-shadow: -4px 0 0 var(--surface); }
 .terminal-copy {
   width: min(880px, calc(100vw - 24px)); height: min(720px, calc(100dvh - 24px));
   max-width: none; max-height: none; padding: 0; overflow: hidden;
@@ -545,7 +569,7 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 }
 @media (pointer: coarse) and (max-width: 900px) {
   /* Tablets in portrait are wider than the phone layout but still want the whole width. */
-  .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
+  .terminal-panel { inset: max(var(--topbar-h, 56px), var(--terminal-viewport-top, 0px)) 0 var(--terminal-viewport-bottom, 0px); border-radius: 0; }
 }
 
 .models {
@@ -558,7 +582,8 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 .models-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
 .models-heading { flex: 1; min-width: 0; }
 .models-heading .sub { margin: 2px 0 0; color: var(--muted); font-size: 0.78rem; }
-.models-body { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 14px; }
+/* Content supplies the basis for auto-height dialogs; a zero basis collapses in Safari. */
+.models-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 14px 14px; }
 .remote-access { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
 .remote-body { padding: 4px 20px 20px; font-size: 0.9rem; }
 .remote-body > p { color: var(--muted); line-height: 1.6; }
@@ -968,7 +993,7 @@ a.btn.github-out::after {
 @media (max-width: 640px) {
   .topbar { padding: 10px 16px; }
   .connection .label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
-  .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
+  .terminal-panel { inset: max(var(--topbar-h, 56px), var(--terminal-viewport-top, 0px)) 0 var(--terminal-viewport-bottom, 0px); border-radius: 0; }
   .session-grid { grid-template-columns: 1fr; }
   .cwd { flex-basis: 100%; }
   .launch-tools { flex-basis: 100%; justify-content: stretch; }
@@ -998,3 +1023,37 @@ a.btn.github-out::after {
 .multiplexer-row .copies { margin-top: .4rem; }
 .multiplexer-row .copy-head { flex-wrap: wrap; }
 .multiplexer-row .copy-name { flex: 1 0 100%; }
+
+.cwd-field.single input { padding-right: 40px; }
+@media (pointer: coarse) { .cwd-field.single input { min-height: 46px; padding-right: 50px; } }
+.folder-browser { width: min(640px, calc(100vw - 32px)); height: min(720px, calc(100dvh - 48px)); }
+@media (max-width: 640px) { .folder-browser { width: 100vw; height: 100dvh; } }
+.folder-path { gap: 2px 0; font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; }
+.folder-crumb { min-height: 32px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
+.folder-crumb:not(:first-child)::before { content: "›"; margin-right: 6px; color: var(--muted); }
+.folder-crumb:hover, .folder-crumb[aria-current] { color: var(--text); }
+.folder-crumb:focus-visible, .folder-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.folder-places, .folder-roots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.folder-places .btn { min-height: 36px; }
+.folder-list { display: flex; flex-direction: column; }
+.folder-row {
+  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; border: 0; border-bottom: 1px solid var(--border);
+  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere;
+}
+.folder-row::before { content: ""; flex: none; width: 18px; height: 14px; border: 1.6px solid var(--muted); border-radius: 2px 4px 3px 3px; }
+.folder-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.folder-row.hidden-folder { color: var(--muted); }
+#folder-status.error { color: var(--danger); }
+.folder-footer { justify-content: space-between; }
+.folder-current { flex: 1; min-width: 0; font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
+.folder-footer .btn { min-height: 42px; }
+.cwd-recent {
+  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; margin: 0; padding: 4px; list-style: none;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
+}
+.cwd-recent-option {
+  display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: max(3px, calc(var(--radius) - 3px));
+  color: var(--text); font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; overflow-wrap: anywhere; cursor: pointer;
+}
+.cwd-recent-option:hover, .cwd-recent-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
+@media (pointer: coarse) { .cwd-recent-option { min-height: 46px; } }

package/web/terminal-controls.js

@@ -0,0 +1,130 @@
+const ARROWS = { ArrowUp: 'A', ArrowDown: 'B', ArrowRight: 'C', ArrowLeft: 'D' };
+
+/** Use the same cursor mode as a physical keyboard, including inside full-screen tools. */
+export function terminalKey(key, modes) {
+  if (Object.hasOwn(ARROWS, key)) return `\x1b${modes.applicationCursorKeysMode ? 'O' : '['}${ARROWS[key]}`;
+  if (key === 'Enter') return '\r';
+  if (key === 'Escape') return '\x1b';
+  return null;
+}
+
+const sameTarget = (a, b) => Boolean(a && b && a.term === b.term && a.socket === b.socket && a.run === b.run);
+
+/** Six ordinary buttons. A gesture belongs to the session and connection where it began. */
+export class TerminalControls {
+  constructor({ element, panel, getCurrent }) {
+    this.element = element;
+    this.getCurrent = getCurrent;
+    this.buttons = [...element.querySelectorAll('button')];
+    const touch = matchMedia('(any-pointer: coarse)');
+    const availability = () => {
+      element.hidden = !touch.matches && !navigator.maxTouchPoints;
+      this.refresh();
+    };
+    touch.addEventListener('change', availability);
+    for (const button of this.buttons) {
+      button.addEventListener('pointerdown', (event) => {
+        this.cancel();
+        if (!event.isPrimary || event.button !== 0 || button.disabled) return;
+        // Retain xterm's focus if typing, and leave the keyboard closed if it is closed.
+        event.preventDefault();
+        const target = this.current();
+        if (!target) return;
+        this.press = { button, target, pointer: event.pointerId };
+        button.setPointerCapture(event.pointerId);
+        button.classList.add('pressed');
+      });
+      button.addEventListener('pointermove', (event) => {
+        if (this.press?.pointer === event.pointerId && document.elementFromPoint(event.clientX, event.clientY) !== button) this.cancel();
+      });
+      button.addEventListener('pointerup', (event) => {
+        const press = this.press;
+        if (press?.pointer !== event.pointerId) return;
+        this.cancel();
+        if (document.elementFromPoint(event.clientX, event.clientY) === button) this.activate(button, press.target);
+      });
+      for (const type of ['pointercancel', 'lostpointercapture', 'blur']) button.addEventListener(type, () => this.cancel());
+      button.addEventListener('keydown', (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        if (event.repeat) return;
+        this.cancel();
+        this.press = { button, target: this.current(), key: event.key };
+        button.classList.add('pressed');
+      });
+      button.addEventListener('keyup', (event) => {
+        const press = this.press;
+        if (!press || press.key !== event.key || press.button !== button) return;
+        event.preventDefault();
+        this.cancel();
+        this.activate(button, press.target);
+      });
+      // Pointer and keyboard releases were handled above. Keep assistive-technology
+      // activation working without sending a second key for the following click.
+      button.addEventListener('click', (event) => {
+        if (event.detail === 0 && !event.pointerType) this.activate(button, this.current());
+      });
+    }
+    addEventListener('blur', () => this.cancel());
+    addEventListener('pagehide', () => this.cancel());
+    document.addEventListener('visibilitychange', () => { this.cancel(); this.refresh(); });
+    // Modal Copy (and other dialogs) must cancel a press even if it closes before release.
+    new MutationObserver(() => { this.cancel(); this.refresh(); }).observe(document.body, {
+      subtree: true, attributes: true, attributeFilter: ['open'],
+    });
+    new MutationObserver(() => this.refresh()).observe(panel, { attributes: true, attributeFilter: ['hidden'] });
+    availability();
+  }
+
+  current() {
+    if (this.element.hidden || document.visibilityState !== 'visible' || document.querySelector('dialog[open]')) return null;
+    return this.getCurrent();
+  }
+
+  refresh() {
+    const target = this.current();
+    if (!sameTarget(this.press?.target, target)) this.cancel();
+    for (const button of this.buttons) button.disabled = !target;
+    this.element.setAttribute('aria-label', target ? `Terminal keys for ${target.name}` : 'Terminal keys unavailable');
+  }
+
+  cancel() {
+    this.press?.button.classList.remove('pressed');
+    this.press = null;
+  }
+
+  activate(button, target) {
+    if (!sameTarget(target, this.current())) return;
+    const data = terminalKey(button.dataset.key, target.term.modes);
+    if (data !== null) target.term.input(data);
+  }
+}
+
+/** Fit the touch panel to a docked keyboard without changing global page layout. */
+export function bindTerminalViewport(panel, controls) {
+  const viewport = window.visualViewport;
+  let frame;
+  const update = () => {
+    if (panel.hidden || controls.hidden) {
+      panel.style.removeProperty('--terminal-viewport-top');
+      panel.style.removeProperty('--terminal-viewport-bottom');
+      delete panel.dataset.compact;
+      return;
+    }
+    // Magnification belongs to the browser; it must not resize the shared PTY.
+    if (viewport && Math.abs(viewport.scale - 1) > 0.01) return;
+    const top = viewport?.offsetTop || 0;
+    const height = viewport?.height ?? innerHeight;
+    panel.style.setProperty('--terminal-viewport-top', `${top}px`);
+    panel.style.setProperty('--terminal-viewport-bottom', `${Math.max(0, innerHeight - top - height)}px`);
+    panel.toggleAttribute('data-compact', height < 420);
+  };
+  const schedule = () => { cancelAnimationFrame(frame); frame = requestAnimationFrame(update); };
+  viewport?.addEventListener('resize', schedule);
+  viewport?.addEventListener('scroll', schedule);
+  addEventListener('resize', schedule);
+  addEventListener('pageshow', schedule);
+  const observer = new MutationObserver(schedule);
+  for (const element of [panel, controls]) observer.observe(element, { attributes: true, attributeFilter: ['hidden'] });
+  schedule();
+}

package/src/manager/folder-picker.mjs

@@ -1,116 +0,0 @@
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { spawn } from 'node:child_process';
-
-const TITLE = 'Choose a working folder';
-const failure = (status, code, message) => Object.assign(new Error(message), { status, code });
-const isFile = (file) => { try { return fs.statSync(file).isFile(); } catch { return false; } };
-const isFolder = (dir) => { try { return fs.statSync(dir).isDirectory(); } catch { return false; } };
-
-const APPLESCRIPT = [
-  'on run argv',
-  'activate',
-  'try',
-  `return POSIX path of (choose folder with prompt "${TITLE}" default location (POSIX file (item 1 of argv)))`,
-  'on error number -128',
-  'return ""',
-  'end try',
-  'end run',
-];
-
-let windowsScript;
-function encodedWindowsScript() {
-  windowsScript ??= Buffer.from(fs.readFileSync(new URL('./folder-picker.ps1', import.meta.url), 'utf8'), 'utf16le').toString('base64');
-  return windowsScript;
-}
-
-export function folderPickTarget({ platform = process.platform, env = process.env, release = os.release(), fileExists = isFile } = {}) {
-  const onPath = (name) => (env.PATH || '').split(':').filter((dir) => path.posix.isAbsolute(dir))
-    .map((dir) => path.posix.join(dir, name)).find(fileExists);
-  let command, kind, translate, reason;
-  if (platform === 'win32') {
-    kind = 'windows';
-    command = path.win32.join(env.SystemRoot || env.WINDIR || 'C:\\Windows', 'System32', 'WindowsPowerShell', 'v1.0', 'powershell.exe');
-  } else if (platform === 'darwin') {
-    kind = 'mac';
-    command = '/usr/bin/osascript';
-  } else if (platform === 'linux' && (env.WSL_DISTRO_NAME || /microsoft|wsl/i.test(release))) {
-    kind = 'windows';
-    translate = onPath('wslpath');
-    command = translate && onPath('powershell.exe');
-    reason = 'Windows PowerShell is unavailable. Enable Windows interoperability in WSL to choose folders.';
-  } else if (platform === 'linux') {
-    if (env.DISPLAY || env.WAYLAND_DISPLAY) {
-      command = onPath('zenity');
-      kind = command ? 'zenity' : 'kdialog';
-      command ||= onPath('kdialog');
-      reason = 'Install zenity or kdialog to choose folders.';
-    } else reason = 'Choosing folders requires a desktop session on the computer running Agent Guild.';
-  } else reason = 'Choosing folders is unavailable on this operating system.';
-  const available = Boolean(command && fileExists(command));
-  return { command, kind, translate, available, reason: available ? null : reason || 'The folder dialog is unavailable on the computer running Agent Guild.' };
-}
-
-export function createFolderPicker({ resolveCwd, spawnImpl = spawn, env = process.env, ...targetOptions }) {
-  let pending = false;
-
-  const run = (command, args, { signal, env: childEnv = env } = {}) => new Promise((resolve, reject) => {
-    let child, out = '';
-    try {
-      child = spawnImpl(command, args, { env: childEnv, shell: false, windowsHide: true, stdio: ['ignore', 'pipe', 'ignore'] });
-    } catch (error) { return reject(error); }
-    const stop = () => child.kill();
-    if (signal?.aborted) stop();
-    else signal?.addEventListener('abort', stop, { once: true });
-    child.stdout.setEncoding('utf8').on('data', (chunk) => { out += chunk; });
-    child.once('error', reject);
-    child.once('close', (code) => {
-      signal?.removeEventListener('abort', stop);
-      resolve({ code, out: out.replace(/[\r\n]+$/, '') });
-    });
-  });
-
-  function dialog(target, start, signal) {
-    if (target.kind === 'windows') {
-      const vars = { AGENT_GUILD_PICK_START: start, AGENT_GUILD_PICK_TITLE: TITLE };
-      if (target.translate) vars.WSLENV = [env.WSLENV, 'AGENT_GUILD_PICK_START/p', 'AGENT_GUILD_PICK_TITLE'].filter(Boolean).join(':');
-      return run(target.command, ['-NoLogo', '-NoProfile', '-NonInteractive', '-ExecutionPolicy', 'Bypass', '-EncodedCommand', encodedWindowsScript()], { signal, env: { ...env, ...vars } });
-    }
-    if (target.kind === 'mac') return run(target.command, [...APPLESCRIPT.flatMap((line) => ['-e', line]), start], { signal });
-    if (target.kind === 'zenity') return run(target.command, ['--file-selection', '--directory', `--title=${TITLE}`, `--filename=${path.join(start, path.sep)}`], { signal });
-    return run(target.command, ['--title', TITLE, '--getexistingdirectory', start], { signal });
-  }
-
-  return {
-    describe() {
-      const { available, reason } = folderPickTarget({ env, ...targetOptions });
-      return { available, reason };
-    },
-    async pick(cwd, { signal } = {}) {
-      if (cwd !== undefined && (typeof cwd !== 'string' || /[\0\r\n]/.test(cwd))) {
-        throw failure(400, 'bad_cwd', 'The working folder must be a directory path.');
-      }
-      if (pending) throw failure(409, 'folder_pick_busy', 'A folder dialog is already open on the computer running Agent Guild.');
-      const target = folderPickTarget({ env, ...targetOptions });
-      if (!target.available) throw failure(409, 'folder_pick_unavailable', target.reason);
-      let start;
-      try { start = resolveCwd(cwd); } catch { start = os.homedir(); }
-      pending = true;
-      try {
-        const broken = () => failure(409, 'folder_pick_failed', 'Could not show the folder dialog. Check that a desktop session is available on the computer running Agent Guild.');
-        let result = await dialog(target, start, signal).catch(() => { throw broken(); });
-        const cancelled = result.code === 0 || (result.code === 1 && target.kind !== 'windows' && target.kind !== 'mac');
-        if (signal?.aborted || (!result.out && cancelled)) return null;
-        if (result.code !== 0) throw broken();
-        if (target.translate) {
-          result = await run(target.translate, ['-u', result.out], { signal }).catch(() => ({ code: 1 }));
-          if (result.code !== 0) throw failure(409, 'folder_pick_failed', 'The chosen folder cannot be reached from WSL.');
-        }
-        const dir = path.resolve(result.out);
-        if (!isFolder(dir)) throw failure(409, 'folder_pick_failed', 'The chosen folder cannot be used as a working folder.');
-        return dir;
-      } finally { pending = false; }
-    },
-  };
-}

package/src/manager/folder-picker.ps1

@@ -1,84 +0,0 @@
-$ErrorActionPreference = 'Stop'
-[Console]::OutputEncoding = New-Object System.Text.UTF8Encoding $false
-Add-Type -AssemblyName System.Windows.Forms
-Add-Type -ReferencedAssemblies System.Windows.Forms -TypeDefinition @'
-using System;
-using System.Runtime.InteropServices;
-using System.Windows.Forms;
-public static class GuildFolderPicker {
-  [ComImport, Guid("DC1C5A9C-E88A-4dde-A5A1-60F82A20AEF7")] class FileOpenDialog {}
-  [ComImport, Guid("42f85136-db7e-439c-85f1-e4075d135fc8"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
-  interface IFileDialog {
-    [PreserveSig] int Show(IntPtr owner);
-    void SetFileTypes(uint count, IntPtr specs);
-    void SetFileTypeIndex(uint index);
-    void GetFileTypeIndex(out uint index);
-    void Advise(IntPtr events, out uint cookie);
-    void Unadvise(uint cookie);
-    void SetOptions(uint options);
-    void GetOptions(out uint options);
-    void SetDefaultFolder(IShellItem item);
-    void SetFolder(IShellItem item);
-    void GetFolder(out IShellItem item);
-    void GetCurrentSelection(out IShellItem item);
-    void SetFileName([MarshalAs(UnmanagedType.LPWStr)] string name);
-    void GetFileName([MarshalAs(UnmanagedType.LPWStr)] out string name);
-    void SetTitle([MarshalAs(UnmanagedType.LPWStr)] string title);
-    void SetOkButtonLabel([MarshalAs(UnmanagedType.LPWStr)] string text);
-    void SetFileNameLabel([MarshalAs(UnmanagedType.LPWStr)] string text);
-    void GetResult(out IShellItem item);
-  }
-  [ComImport, Guid("43826D1E-E718-42EE-BC55-A1E261C37BFE"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
-  interface IShellItem {
-    void BindToHandler(IntPtr context, ref Guid handler, ref Guid iid, out IntPtr result);
-    void GetParent(out IShellItem parent);
-    void GetDisplayName(uint form, [MarshalAs(UnmanagedType.LPWStr)] out string name);
-  }
-  [StructLayout(LayoutKind.Sequential)] struct RECT { public int L, T, R, B; }
-  [DllImport("shell32.dll", CharSet = CharSet.Unicode, PreserveSig = false)]
-  static extern void SHCreateItemFromParsingName(string path, IntPtr context, ref Guid iid, out IShellItem item);
-  [DllImport("user32.dll")] static extern bool GetWindowRect(IntPtr window, out RECT rect);
-  [DllImport("user32.dll")] static extern IntPtr GetForegroundWindow();
-  [DllImport("user32.dll")] static extern uint GetWindowThreadProcessId(IntPtr window, IntPtr process);
-  [DllImport("kernel32.dll")] static extern uint GetCurrentThreadId();
-  [DllImport("user32.dll")] static extern bool AttachThreadInput(uint from, uint to, bool attach);
-  [DllImport("user32.dll")] static extern bool SetForegroundWindow(IntPtr window);
-
-  public static string Pick(string start, string title) {
-    var dialog = (IFileDialog)new FileOpenDialog();
-    uint options;
-    dialog.GetOptions(out options);
-    dialog.SetOptions(options | 0x20 | 0x40 | 0x800);
-    dialog.SetTitle(title);
-    if (!string.IsNullOrEmpty(start)) {
-      try {
-        IShellItem folder;
-        Guid iid = typeof(IShellItem).GUID;
-        SHCreateItemFromParsingName(start, IntPtr.Zero, ref iid, out folder);
-        dialog.SetFolder(folder);
-      } catch {}
-    }
-    // A dialog from a background process opens behind the browser. An invisible owner that takes
-    // the foreground brings it to the front, just inside the window that asked.
-    using (var owner = new Form { TopMost = true, ShowInTaskbar = false, FormBorderStyle = FormBorderStyle.None, Opacity = 0, StartPosition = FormStartPosition.Manual }) {
-      IntPtr asking = GetForegroundWindow();
-      RECT r;
-      if (GetWindowRect(asking, out r)) owner.SetBounds(r.L + 48, r.T + 48, 1, 1);
-      else owner.StartPosition = FormStartPosition.CenterScreen;
-      owner.Show();
-      uint front = GetWindowThreadProcessId(asking, IntPtr.Zero), self = GetCurrentThreadId();
-      AttachThreadInput(self, front, true);
-      SetForegroundWindow(owner.Handle);
-      AttachThreadInput(self, front, false);
-      if (dialog.Show(owner.Handle) != 0) return null;
-    }
-    IShellItem picked;
-    dialog.GetResult(out picked);
-    string path;
-    picked.GetDisplayName(0x80058000, out path);
-    return path;
-  }
-}
-'@
-$picked = [GuildFolderPicker]::Pick($env:AGENT_GUILD_PICK_START, $env:AGENT_GUILD_PICK_TITLE)
-if ($picked) { [Console]::Out.Write($picked) }