@oddessentials/agent-guild 0.26.0 → 0.28.0

package/web/index.html

@@ -35,6 +35,7 @@
         <button id="notes-open" class="btn notes-open" type="button" aria-controls="dock" aria-pressed="false">Notes</button>
         <button id="settings" class="btn settings menu-button" type="button" popovertarget="settings-menu" aria-haspopup="dialog">Settings</button>
         <div id="settings-menu" class="settings-menu menu" popover role="dialog" aria-label="Settings">
+          <button id="remote-access-open" class="btn" type="button" aria-haspopup="dialog" hidden>Remote access</button>
           <fieldset id="skin-choices"><legend>Skin</legend></fieldset>
           <fieldset>
             <legend>Mode</legend>
@@ -68,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">
@@ -233,7 +235,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>
@@ -259,6 +271,70 @@
     </div>
   </dialog>
 
+  <dialog id="remote-access" class="models remote-access" aria-labelledby="remote-access-title">
+    <div class="models-bar">
+      <div class="models-heading">
+        <h2 id="remote-access-title">Remote access</h2>
+        <p class="sub">Use Agent Guild on another device</p>
+      </div>
+      <button id="remote-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="models-body remote-body">
+      <p>Access your running terminals through your Tailscale network. Your computer must be awake with Agent Guild and Tailscale running.</p>
+      <div class="remote-status" role="status" aria-live="polite" aria-atomic="true">
+        <strong id="remote-status-title">Checking connection…</strong>
+        <p id="remote-status-text"></p>
+      </div>
+      <p id="remote-error" class="remote-error" role="alert" hidden></p>
+      <div id="remote-address-row" hidden>
+        <label for="remote-address">Your remote address</label>
+        <input id="remote-address" class="remote-address" readonly spellcheck="false">
+        <div class="remote-actions">
+          <button id="remote-connect" class="btn primary" type="button" aria-expanded="false" aria-controls="remote-share">Connect another device</button>
+          <button id="remote-copy-address" class="btn" type="button">Copy address</button>
+          <a id="remote-open-address" class="btn" target="_blank" rel="noopener noreferrer">Open</a>
+        </div>
+      </div>
+      <div id="remote-share" class="remote-share" hidden>
+        <p>Connect the other device to Tailscale, then scan this code or open the sign-in link.</p>
+        <canvas id="remote-qr" role="img" aria-label="QR code to sign into Agent Guild" hidden></canvas>
+        <p id="remote-qr-note" class="sub"></p>
+        <label for="remote-signin">Anyone with this code or link can use your terminals.</label>
+        <input id="remote-signin" class="remote-address" readonly spellcheck="false" autocomplete="off">
+        <button id="remote-copy-signin" class="btn" type="button">Copy sign-in link</button>
+      </div>
+      <div class="remote-actions">
+        <button id="remote-primary" class="btn primary" type="button">Enable remote access</button>
+        <a id="remote-help" class="btn primary" target="_blank" rel="noopener noreferrer" hidden></a>
+        <button id="remote-check" class="btn" type="button">Check connection</button>
+        <button id="remote-disable" class="btn danger" type="button" hidden>Disable remote access</button>
+      </div>
+      <div id="remote-disable-confirm" class="remote-confirm" hidden>
+        <p>Disconnect remote browsers? Your terminals will keep running. Local access stays available.</p>
+        <div class="remote-actions">
+          <button id="remote-disable-yes" class="btn danger" type="button">Disable remote access</button>
+          <button id="remote-disable-no" class="btn" type="button">Keep enabled</button>
+        </div>
+      </div>
+      <details id="remote-details">
+        <summary>Connection details</summary>
+        <p id="remote-diagnostics" class="sub"></p>
+        <button id="remote-forget" class="btn" type="button" hidden>Leave the changed route in Tailscale</button>
+      </details>
+      <details id="remote-advanced">
+        <summary>Use another reverse proxy</summary>
+        <p id="remote-custom-note">Configure your proxy separately, then enter the hosts and browser origins it uses. Saving applies immediately and replaces environment settings.</p>
+        <form id="remote-custom-form">
+          <label for="remote-hosts">Allowed hosts, separated by commas</label>
+          <input id="remote-hosts" placeholder="guild.example.com" spellcheck="false" autocomplete="off" maxlength="16384">
+          <label for="remote-origins">Allowed origins, separated by commas</label>
+          <input id="remote-origins" placeholder="https://guild.example.com" spellcheck="false" autocomplete="off" maxlength="16384">
+          <button id="remote-custom-save" class="btn" type="submit">Save proxy settings</button>
+        </form>
+      </details>
+    </div>
+  </dialog>
+
   <dialog id="models" class="models" aria-labelledby="models-title">
     <div class="models-bar">
       <span id="models-icon" class="provider-icon small"></span>
@@ -337,6 +413,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/remote-access.js

@@ -0,0 +1,236 @@
+export function remotePresentation(data) {
+  if (!data) return { title: 'Checking connection…', text: 'Looking for Tailscale on this computer.', label: 'Enable remote access' };
+  const problem = data.problem;
+  if (data.busy && problem?.code !== 'approval_required') return {
+    title: data.busy === 'checking' ? 'Checking connection…' : data.busy === 'disabling' ? 'Disabling remote access…' : 'Preparing remote access…',
+    text: 'Your terminal sessions keep running.', label: 'Please wait…',
+  };
+  if (data.pending === 'disable') return { title: 'Tailscale cleanup needed', text: problem?.code === 'permission_required'
+    ? 'Remote access is blocked. Run the cleanup command in Connection details from a terminal with permission to manage Tailscale, then retry cleanup.'
+    : problem?.message || 'Access through the saved address is blocked. Retry to remove its Serve route.', label: 'Retry cleanup', action: 'disable',
+    ...(['not_installed', 'update_required'].includes(problem?.code) ? { help: 'https://tailscale.com/download', helpLabel: 'Get Tailscale' } : {}) };
+  if (problem?.approvalUrl) return { title: 'One step needed in Tailscale', text: problem.message, help: problem.approvalUrl, helpLabel: 'Open Tailscale approval', label: 'Continue setup' };
+  if (problem?.code === 'not_installed') return { title: 'Connect this computer to Tailscale', text: problem.message, help: 'https://tailscale.com/download', helpLabel: 'Install Tailscale', label: 'Continue setup' };
+  if (problem?.code === 'update_required') return { title: 'Update Tailscale', text: problem.message, help: 'https://tailscale.com/download', helpLabel: 'Get Tailscale', label: 'Continue setup' };
+  if (problem?.code === 'not_connected' || problem?.code === 'address_unavailable') return { title: 'Connect Tailscale', text: problem.message, label: 'Continue setup' };
+  if (problem?.code === 'permission_required') return { title: 'Tailscale needs permission', text: 'Open a terminal on this computer with permission to manage Tailscale. The connection details below show the command to run, then choose Continue setup.', label: 'Continue setup' };
+  if (problem) return { title: data.pending === 'enable' ? 'Finish setting up remote access' : 'Connection needs attention', text: problem.message, label: data.mode === 'tailscale' ? 'Repair connection' : data.candidate?.existing ? 'Use existing route' : 'Continue setup' };
+  if (data.mode === 'tailscale') return {
+    title: 'Remote access enabled', text: data.connection?.ok ? 'The secure address reaches this manager. Connect another device to start using it.'
+      : data.connection ? 'The route is configured, but this computer could not verify the secure connection. Check Tailscale, then try the address on your other device.' : 'Your saved Tailscale address is ready to check.',
+    label: 'Repair connection', hidePrimary: true,
+  };
+  if (data.candidate?.existing) return { title: 'Your Tailscale route is ready', text: 'A private route already points to this manager. Use it to let Agent Guild save and manage this connection.', label: 'Use existing route' };
+  if (data.mode === 'custom') return { title: 'Custom proxy access configured', text: data.source === 'environment' ? 'These settings came from the launch environment. Save them below to keep them across launches.' : 'Your proxy settings are saved and active.', label: 'Set up Tailscale' };
+  if (!data.tailscale) return { title: 'Set up remote access', text: 'Check this computer’s Tailscale connection to get started.', label: 'Enable remote access' };
+  return { title: 'Tailscale connected', text: 'Enable a private address for your running terminals. Your settings will be saved for future launches.', label: 'Enable remote access' };
+}
+
+export function createRemoteAccessUI({ api, getToken, isConnected, onAuthError }) {
+  const $ = (id) => document.getElementById(id);
+  const dialog = $('remote-access');
+  let data = null, request = 0, loading = false, posting = false, timer = null, sharing = false, shareGeneration = 0, editRevision = null, dirty = false;
+  let available = false, waitingForApproval = false;
+
+  function clearShare() {
+    sharing = false;
+    shareGeneration++;
+    $('remote-share').hidden = true;
+    $('remote-connect').setAttribute('aria-expanded', 'false');
+    $('remote-signin').value = '';
+    const canvas = $('remote-qr');
+    canvas.getContext('2d')?.clearRect(0, 0, canvas.width, canvas.height);
+    canvas.hidden = true;
+  }
+
+  function render() {
+    const presentation = remotePresentation(data);
+    const busy = loading || posting || Boolean(data?.busy) || !isConnected();
+    $('remote-status-title').textContent = presentation.title;
+    $('remote-status-text').textContent = isConnected() ? presentation.text : 'Reconnect to the manager to change remote access.';
+    $('remote-status-title').parentElement.dataset.ready = String(data?.mode === 'tailscale' && !data.problem && !data.busy && Boolean(data.connection?.ok));
+    $('remote-primary').textContent = presentation.label;
+    $('remote-primary').hidden = Boolean(presentation.hidePrimary || (presentation.help && !presentation.action));
+    $('remote-primary').disabled = busy || !data;
+    $('remote-check').disabled = busy || !data;
+    $('remote-disable').disabled = busy || !data;
+    $('remote-disable').hidden = !data || (data.mode === 'off' && !data.pending);
+    $('remote-disable-yes').disabled = busy;
+    $('remote-custom-save').disabled = busy || !data || data.mode === 'tailscale' || Boolean(data.pending);
+    for (const id of ['remote-hosts', 'remote-origins']) $(id).disabled = !data || data.mode === 'tailscale' || Boolean(data.pending);
+    $('remote-custom-note').textContent = data?.mode === 'tailscale' || data?.pending
+      ? 'Disable Tailscale remote access and finish any cleanup before switching to another proxy.'
+      : 'Configure your proxy separately, then enter the hosts and browser origins it uses. Saving applies immediately and replaces environment settings.';
+    $('remote-help').hidden = !presentation.help;
+    if (presentation.help) { $('remote-help').href = presentation.help; $('remote-help').textContent = presentation.helpLabel; }
+    $('remote-address-row').hidden = !data?.url;
+    $('remote-address').value = data?.url || '';
+    $('remote-open-address').href = data?.url || '#';
+    $('remote-connect').disabled = busy;
+    $('remote-copy-address').disabled = busy;
+    $('remote-copy-signin').disabled = busy;
+    if (!data?.url || !isConnected() || data.busy === 'disabling') clearShare();
+    $('remote-forget').hidden = data?.pending !== 'disable' || !['route_changed', 'network_changed'].includes(data.problem?.code);
+    $('remote-forget').disabled = busy;
+    const diagnostics = [data?.tailscale ? `Tailscale ${data.tailscale.version} · ${data.tailscale.hostname}` : '',
+      data?.source === 'saved' ? 'Settings are saved on the manager computer.' : data?.source === 'environment' ? 'Settings currently come from the launch environment.' : '',
+      data?.connection?.checkedAt ? `Last connection check: ${new Date(data.connection.checkedAt).toLocaleString()}` : '',
+      data?.command ? `On the manager computer: ${data.command}` : '',
+    ].filter(Boolean);
+    $('remote-diagnostics').textContent = diagnostics.join('\n');
+    if (data && !dirty) {
+      $('remote-hosts').value = data.hosts.join(', ');
+      $('remote-origins').value = data.origins.join(', ');
+      editRevision = data.revision;
+    }
+    if (data?.problem?.approvalUrl) waitingForApproval = true;
+  }
+
+  function showError(error) {
+    if (error.name === 'AuthError' || error.message === 'The access token was rejected.') { close(); onAuthError(error.message); return; }
+    $('remote-error').textContent = error.message || 'Could not change remote access. Try again.';
+    $('remote-error').hidden = false;
+  }
+
+  function schedule() {
+    clearTimeout(timer);
+    if (dialog.open && available && isConnected()) timer = setTimeout(() => refresh(!data?.busy), data?.busy ? 800 : 30000);
+  }
+
+  async function refresh(check = false) {
+    if (!dialog.open || !available || !isConnected() || loading || posting) return;
+    const generation = ++request;
+    loading = true;
+    if (check) $('remote-error').hidden = true;
+    render();
+    try {
+      const result = await api(check ? 'POST' : 'GET', check ? '/remote-access/check' : '/remote-access');
+      if (generation !== request || !dialog.open) return;
+      if (data?.url !== result.remoteAccess.url) clearShare();
+      data = result.remoteAccess;
+    } catch (error) { if (generation === request && dialog.open) showError(error); }
+    finally { if (generation === request) { loading = false; render(); schedule(); } }
+    if (waitingForApproval && !data?.busy && data?.pending === 'enable' && data?.tailscale?.httpsReady && dialog.open) {
+      waitingForApproval = false;
+      await change('enable');
+    }
+  }
+
+  async function change(action, extra = {}) {
+    if (!data || posting || data.busy || !isConnected()) return;
+    posting = true;
+    const generation = ++request;
+    $('remote-error').hidden = true;
+    $('remote-disable-confirm').hidden = true;
+    if (action !== 'enable') clearShare();
+    render();
+    try {
+      const result = await api('PUT', '/remote-access', { revision: data.revision, action, adopt: Boolean(data.candidate?.existing), ...extra });
+      if (generation !== request || !dialog.open) return;
+      data = result.remoteAccess;
+      if (action === 'custom') dirty = false;
+    } catch (error) {
+      if (generation === request && dialog.open) {
+        showError(error);
+        if (error.code === 'stale_settings') {
+          dirty = false;
+          try { data = (await api('GET', '/remote-access')).remoteAccess; } catch (refreshError) { showError(refreshError); }
+        }
+      }
+    } finally { if (generation === request) { posting = false; render(); schedule(); } }
+  }
+
+  async function copy(input, button) {
+    try {
+      if (!navigator.clipboard) throw new Error('Clipboard unavailable');
+      await navigator.clipboard.writeText(input.value);
+      const label = button.textContent;
+      button.textContent = 'Copied';
+      setTimeout(() => { button.textContent = label; }, 1600);
+    } catch {
+      input.focus(); input.select();
+      $('remote-error').textContent = 'The link is selected. Use your browser’s Copy command.';
+      $('remote-error').hidden = false;
+    }
+  }
+
+  async function toggleShare() {
+    if (sharing) { clearShare(); return; }
+    if (!data?.url || !getToken() || !isConnected()) return;
+    sharing = true;
+    const generation = ++shareGeneration;
+    const url = new URL(data.url);
+    url.hash = new URLSearchParams({ token: getToken() }).toString();
+    $('remote-signin').value = url.href;
+    $('remote-share').hidden = false;
+    $('remote-connect').setAttribute('aria-expanded', 'true');
+    $('remote-qr-note').textContent = 'Preparing QR code…';
+    try {
+      const { default: qrcode } = await import('./vendor/qrcode.mjs');
+      if (!sharing || generation !== shareGeneration || !dialog.open) return;
+      const code = qrcode(0, 'M');
+      code.addData(url.href, 'Byte');
+      code.make();
+      const count = code.getModuleCount(), scale = 5, border = 4;
+      const canvas = $('remote-qr');
+      canvas.width = canvas.height = (count + border * 2) * scale;
+      const context = canvas.getContext('2d');
+      context.fillStyle = '#ffffff'; context.fillRect(0, 0, canvas.width, canvas.height);
+      context.fillStyle = '#000000';
+      for (let row = 0; row < count; row++) for (let col = 0; col < count; col++) {
+        if (code.isDark(row, col)) context.fillRect((col + border) * scale, (row + border) * scale, scale, scale);
+      }
+      canvas.hidden = false;
+      $('remote-qr-note').textContent = '';
+    } catch { if (generation === shareGeneration) $('remote-qr-note').textContent = 'The QR code could not load. Use the sign-in link below.'; }
+  }
+
+  function close() {
+    request++; loading = false; posting = false;
+    clearTimeout(timer); clearShare();
+    $('remote-disable-confirm').hidden = true;
+    if (dialog.open) dialog.close();
+  }
+
+  $('remote-access-open').addEventListener('click', async () => {
+    $('settings-menu').hidePopover?.();
+    $('topbar-menu').hidePopover?.();
+    if (!dialog.open) dialog.showModal();
+    $('remote-error').hidden = true;
+    dirty = false;
+    await refresh(false);
+    await refresh(true);
+  });
+  $('remote-close').addEventListener('click', close);
+  dialog.addEventListener('click', (event) => { if (event.target === dialog && event.clientX !== 0) {
+    const rect = dialog.getBoundingClientRect();
+    if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) close();
+  } });
+  dialog.addEventListener('close', () => { close(); ($('settings').checkVisibility() ? $('settings') : $('menu-toggle')).focus(); });
+  $('remote-primary').addEventListener('click', () => change(remotePresentation(data).action || 'enable'));
+  $('remote-check').addEventListener('click', () => refresh(true));
+  $('remote-disable').addEventListener('click', () => { $('remote-disable-confirm').hidden = false; $('remote-disable-yes').focus(); });
+  $('remote-disable-yes').addEventListener('click', () => change('disable'));
+  $('remote-disable-no').addEventListener('click', () => { $('remote-disable-confirm').hidden = true; $('remote-disable').focus(); });
+  $('remote-forget').addEventListener('click', () => change('forget'));
+  $('remote-connect').addEventListener('click', toggleShare);
+  $('remote-copy-address').addEventListener('click', () => copy($('remote-address'), $('remote-copy-address')));
+  $('remote-copy-signin').addEventListener('click', () => copy($('remote-signin'), $('remote-copy-signin')));
+  for (const id of ['remote-hosts', 'remote-origins']) $(id).addEventListener('input', () => { dirty = true; });
+  $('remote-custom-form').addEventListener('submit', (event) => {
+    event.preventDefault();
+    const list = (id) => $(id).value.split(',').map((value) => value.trim()).filter(Boolean);
+    change('custom', { revision: editRevision, hosts: list('remote-hosts'), origins: list('remote-origins') });
+  });
+  addEventListener('focus', () => { if (dialog.open && !data?.busy) refresh(true); });
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'hidden') clearShare();
+    else if (dialog.open && !data?.busy) refresh(true);
+  });
+  return {
+    setAvailable(capability) { available = Boolean(capability?.available); $('remote-access-open').hidden = !available; if (!available) close(); },
+    updated() { if (dialog.open) refresh(false); },
+    connectionChanged() { render(); if (!isConnected()) { clearTimeout(timer); clearShare(); } else schedule(); },
+    close,
+  };
+}

package/web/styles.css

@@ -559,6 +559,29 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 .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; }
+.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; }
+.remote-status { padding: 16px; margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
+.remote-status[data-ready="true"] { border-color: var(--ok); }
+.remote-status strong { font-size: 1rem; }
+.remote-status p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
+.remote-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
+.remote-body .btn { min-height: 42px; }
+.remote-body a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
+.remote-body label { display: block; margin: 12px 0 6px; font-size: 0.8rem; }
+.remote-body input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.8rem; }
+.remote-body input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.remote-body details { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
+.remote-body summary { cursor: pointer; color: var(--muted); }
+.remote-body .sub { font-size: 0.8rem; color: var(--muted); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
+.remote-body form .btn { margin-top: 12px; }
+.remote-body .remote-error { color: var(--danger); overflow-wrap: anywhere; }
+.remote-share, .remote-confirm { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0; }
+.remote-share p { margin-top: 0; line-height: 1.5; }
+.remote-share canvas { display: block; width: min(100%, 260px); height: auto; margin: 16px auto; image-rendering: pixelated; }
+.remote-share canvas[hidden] { display: none; }
+.remote-share .btn { margin-top: 12px; }
 .model-columns, .model-toggle { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 6.5rem) 4.5rem; align-items: center; gap: 8px; }
 .model-columns {
   position: sticky; top: 0; z-index: 1; padding: 10px 8px 6px; background: var(--surface);
@@ -975,3 +998,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/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; }
-    },
-  };
-}