@oddessentials/agent-guild 0.31.0 → 0.33.0

package/web/app.js

@@ -4,7 +4,7 @@
 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 { topbarInline, dockMode, clampDockWidth, stageBesideDock, splitMode, clampRatio, bindSplitter, bindVisibleViewport, 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';
@@ -299,6 +299,69 @@ function alertSound(name, key, at = Date.now(), fresh = () => true, related = []
   });
 }
 
+const AUTOSTART_NOTE = 'Starts the session manager in the background when you sign in to the computer running Agent Guild. The page does not open.';
+let autostartRequest = 0;
+let autostartChanging = false;
+
+/** What the entry did at the last sign-in it ran at, or '' while it is off. */
+function autostartRun(autostart) {
+  if (!autostart?.available || !autostart.enabled) return '';
+  const run = autostart.lastRun;
+  if (!run) return 'Has not run at a sign-in yet.';
+  const at = new Date(run.at).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' });
+  if (run.outcome === 'started') return `Last ran at sign-in on ${at} and started the session manager.`;
+  if (run.outcome === 'running') return `Last ran at sign-in on ${at}; the session manager was already running.`;
+  if (run.outcome === 'starting') return `Starting the session manager for the sign-in on ${at}…`;
+  return `Last ran at sign-in on ${at}, but the session manager did not start.${autostart.log ? ` See ${autostart.log}.` : ''}`;
+}
+
+/** The manager's sign-in setting; hidden when the manager has none. */
+function renderAutostart(autostart) {
+  $('autostart-choice').hidden = !autostart;
+  $('autostart').checked = Boolean(autostart?.enabled);
+  $('autostart').disabled = !autostart?.available;
+  $('autostart-note').textContent = autostart?.reason || autostart?.note || AUTOSTART_NOTE;
+  const run = autostartRun(autostart);
+  $('autostart-run').textContent = run;
+  $('autostart-run').hidden = !run;
+  $('autostart-run').dataset.outcome = autostart?.enabled ? autostart.lastRun?.outcome ?? 'none' : '';
+}
+
+async function loadAutostart({ afterChange = false } = {}) {
+  if (!state.connected || (autostartChanging && !afterChange)) return;
+  const request = ++autostartRequest;
+  $('autostart').disabled = true;
+  try {
+    const { autostart } = await api('GET', '/autostart');
+    if (request === autostartRequest) renderAutostart(autostart);
+  } catch (err) {
+    if (request !== autostartRequest) return;
+    if (err instanceof AuthError) showAuth(err.message);
+    else if (err.code === 'not_found') renderAutostart(null);
+    else renderAutostart({ available: false, enabled: false, reason: `Could not read the startup setting: ${err.message}` });
+  }
+}
+
+async function changeAutostart(input) {
+  if (autostartChanging) return;
+  autostartChanging = true;
+  ++autostartRequest;
+  const enabled = input.checked;
+  input.disabled = true;
+  try {
+    renderAutostart((await api('PUT', '/autostart', { enabled })).autostart);
+  } catch (err) {
+    if (err instanceof AuthError) showAuth(err.message);
+    else {
+      toast(err.message);
+      // An OS operation can partly succeed. Read back what actually happened.
+      await loadAutostart({ afterChange: true });
+    }
+  } finally {
+    autostartChanging = false;
+  }
+}
+
 function changeSound(input) {
   save(SOUND_KEY, input.checked ? 'on' : null);
   prepareSounds();
@@ -2967,6 +3030,13 @@ function loadGitHub() {
 function setGitHub(github) {
   const before = state.github?.signIn;
   state.github = github;
+  const branches = githubPick.data.branches;
+  if (branches && !github.accounts.some((a) => a.id === branches.repo.accountId && !a.needsSignIn)) {
+    // Replace the generation even while the dock is closed; signing in again must
+    // never make an earlier account's pending answer current.
+    githubPick.data.branches = { ...branches, value: null, loading: false, nextPage: null,
+      error: `Sign in as @${branches.repo.login} in Repositories to see its branches.` };
+  }
   const done = github.signIn?.status === 'done' && before?.status === 'pending' ? github.signIn : null;
   if (done) {
     selectGitHubAccount(done.accountId);
@@ -3086,7 +3156,7 @@ function openGitHub({ focus = true } = {}) {
   loadGitHub();
   if (githubPick.repo) {
     loadView('actions');
-    if (githubShownView() === 'issues' || githubShownView() === 'pulls') loadView(githubShownView());
+    if (['issues', 'pulls', 'branches'].includes(githubShownView())) loadView(githubShownView());
   }
   followTerminal();
   if (focus) ($('github-card').querySelector('.btn.primary') ?? $('dock-close')).focus();
@@ -3497,7 +3567,7 @@ function useFolder(dir) {
 
 // ---- GitHub repository views ------------------------------------------------
 
-const GITHUB_VIEWS = ['repos', 'issues', 'actions', 'pulls'];
+const GITHUB_VIEWS = ['repos', 'issues', 'actions', 'pulls', 'branches'];
 const RUNS_POLL_MS = 6000;
 const RUNS_IDLE_POLL_MS = 30000;
 const BODY_LIMIT = 48000;
@@ -3592,7 +3662,11 @@ function pickRepo(repo, { chosen = false } = {}) {
     githubPick.recent = remember(githubPick.recent, repo);
     save(GITHUB_RECENT_KEY, JSON.stringify(githubPick.recent));
   }
-  if (!same) Object.assign(githubPick, { data: {}, editing: null });
+  if (!same) {
+    Object.assign(githubPick, { data: {}, editing: null });
+    $('github-branches-filter').value = '';
+    $('github-branches').scrollTop = 0;
+  }
   if ((!same || chosen) && githubView.accountId !== repo.accountId && state.github?.accounts.some((a) => a.id === repo.accountId)) {
     selectGitHubAccount(repo.accountId);
     githubView.card = null;
@@ -3605,7 +3679,7 @@ function pickRepo(repo, { chosen = false } = {}) {
   renderGitHubViews();
   if (!dockShows('github')) return;
   loadView('actions');
-  if (githubShownView() === 'issues' || githubShownView() === 'pulls') loadView(githubShownView());
+  if (['issues', 'pulls', 'branches'].includes(githubShownView())) loadView(githubShownView());
 }
 
 /** Picks the repository whose clone holds the focused terminal's folder, once for each terminal focused. */
@@ -3628,6 +3702,7 @@ async function followTerminal() {
 }
 
 async function loadView(view) {
+  if (view === 'branches') return loadBranches();
   const repo = githubPick.repo;
   if (!repo || view === 'repos') return;
   const query = view === 'issues' ? `?state=${githubPick.issueState}` : '';
@@ -3652,6 +3727,175 @@ async function loadView(view) {
   if (view === 'actions') scheduleRuns();
 }
 
+// Each object is a listing generation, scoped to the selected account/repository.
+// A retry continues that generation; Refresh replaces it and starts at page one.
+function branchesCurrent(request) {
+  return githubPick.data.branches === request && githubPick.repo && repoKey(githubPick.repo) === request.key
+    && state.github?.accounts.some((a) => a.id === request.repo.accountId && !a.needsSignIn);
+}
+
+function branchesVisible() {
+  return dockShows('github') && githubShownView() === 'branches' && document.visibilityState === 'visible';
+}
+
+async function loadBranches({ resume = false } = {}) {
+  const repo = githubPick.repo;
+  if (!repo || !state.github?.accounts.some((a) => a.id === repo.accountId && !a.needsSignIn)) return;
+  const before = viewData('branches');
+  if (resume && (!before || before.loading || before.nextPage === null)) return;
+  const request = resume ? before : {
+    key: repoKey(repo), repo, value: before?.value ?? null, loading: false, error: null,
+    nextPage: 1, received: false, rows: new Map(), defaultBranch: null, metadataError: null,
+  };
+  githubPick.data.branches = request;
+  request.loading = true;
+  request.error = null;
+  renderGitHubViews();
+  try {
+    while (request.nextPage !== null && branchesVisible() && branchesCurrent(request)) {
+      const page = request.nextPage;
+      const result = await api('GET', `${repoPath(repo)}/branches?page=${page}`);
+      if (!branchesCurrent(request)) return;
+      // A malformed response must not masquerade as a complete, empty list.
+      if (!Array.isArray(result.branches) || (result.nextPage !== null
+        && (!Number.isSafeInteger(result.nextPage) || result.nextPage <= page))) {
+        throw new Error('Could not read the next page of branches. Try again.');
+      }
+      if (page === 1) {
+        request.defaultBranch = result.defaultBranch;
+        request.metadataError = result.metadataError;
+      }
+      for (const branch of result.branches) request.rows.set(branch.name, branch);
+      request.nextPage = result.nextPage;
+      // First loads display each page. A refresh keeps the previous list until
+      // every page arrives, so later-page rows and the reading position survive.
+      // `received` means the displayed value belongs to this listing generation.
+      if (!request.value || request.received || request.nextPage === null) {
+        request.received = true;
+        request.value = { ...result, branches: [...request.rows.values()],
+          defaultBranch: request.defaultBranch, metadataError: request.metadataError };
+      }
+      renderGitHubViews();
+    }
+  } catch (err) {
+    if (!branchesCurrent(request)) return;
+    if (err instanceof AuthError) { showAuth(err.message); return; }
+    request.error = err.message;
+  } finally {
+    if (branchesCurrent(request)) {
+      request.loading = false;
+      renderGitHubViews();
+    }
+  }
+}
+
+/** Keep the first visible branch at the same pixel offset when earlier rows arrive. */
+function branchAnchor(panel, list) {
+  const { top, bottom } = panel.getBoundingClientRect();
+  const row = [...list.children].find((node) => {
+    const rect = node.getBoundingClientRect();
+    return rect.bottom > top && rect.top < bottom;
+  });
+  return row ? { name: row.dataset.branch, offset: row.getBoundingClientRect().top - top } : null;
+}
+
+async function copyBranch(name, control) {
+  const request = viewData('branches');
+  control.disabled = true;
+  let message;
+  try {
+    if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+    await navigator.clipboard.writeText(name);
+    message = `Copied branch name: ${name}`;
+  } catch {
+    message = 'Could not copy. Select the branch name and copy it using your browser.';
+  } finally {
+    control.disabled = false;
+  }
+  if (request === viewData('branches') && branchesVisible() && control.isConnected) toast(message);
+}
+
+function renderBranches({ preserveAnchor = true } = {}) {
+  const panel = $('github-branches');
+  const list = $('github-branches-list');
+  const repo = githubPick.repo;
+  const key = repo ? repoKey(repo) : '';
+  const same = panel.dataset.repo === key;
+  const anchor = same && preserveAnchor ? branchAnchor(panel, list) : null;
+  const focused = list.contains(document.activeElement) ? document.activeElement : null;
+  const oldScroll = same ? panel.scrollTop : 0;
+  if (!same) { list.replaceChildren(); panel.dataset.repo = key; }
+  $('github-branches-pick').hidden = Boolean(repo);
+  $('github-branches-content').hidden = !repo;
+  if (!repo) return;
+  const slot = viewData('branches');
+  const value = slot?.value;
+  const query = $('github-branches-filter').value.trim().toLocaleLowerCase();
+  $('github-branches-clear').disabled = !$('github-branches-filter').value;
+  const refresh = $('github-branches-refresh');
+  const usable = state.github?.accounts.some((a) => a.id === repo.accountId && !a.needsSignIn);
+  refresh.disabled = Boolean(slot?.loading) || !usable;
+  refresh.textContent = slot?.loading ? (value ? 'Refreshing…' : 'Loading…') : 'Refresh';
+  const out = $('github-branches-out');
+  out.href = value?.url ?? `https://github.com/${repo.fullName}/branches`;
+  out.title = `Open ${repo.fullName} branches on GitHub`;
+  const branches = (value?.branches ?? []).filter((b) => b.name.toLocaleLowerCase().includes(query)).sort((a, b) =>
+    Number(b.name === value.defaultBranch) - Number(a.name === value.defaultBranch)
+      || a.name.localeCompare(b.name) || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+  const complete = Boolean(slot?.received && value?.nextPage === null);
+  const count = value?.branches.length ?? 0;
+  let status = !value ? (slot?.error ? 'Branches could not be loaded.' : 'Loading branches…')
+    : query ? `${branches.length} of ${count} loaded branches match.`
+      : `${count} ${count === 1 ? 'branch' : 'branches'}${complete ? '' : ' loaded'}.`;
+  if (value && !slot.received) status += slot.loading ? ' Refreshing…' : ' Showing previous results.';
+  else if (!complete && value) status += slot.loading ? ' Loading more…' : ' Listing incomplete.';
+  if (complete && !branches.length) status = query ? `No branches match “${$('github-branches-filter').value.trim()}”.` : 'No remote branches yet.';
+  const statusNode = $('github-branches-status');
+  if (statusNode.textContent !== status) statusNode.textContent = status;
+  const failure = $('github-branches-error');
+  failure.hidden = !slot?.error;
+  failure.querySelector('span').textContent = slot?.error ?? '';
+  $('github-branches-retry').disabled = Boolean(slot?.loading) || slot?.nextPage === null || !usable;
+  const metadata = $('github-branches-metadata');
+  metadata.hidden = !value?.metadataError;
+  metadata.textContent = value?.metadataError ? 'Branches loaded, but the default branch could not be identified. Refresh to try again.' : '';
+  const existing = new Map([...list.children].map((row) => [row.dataset.branch, row]));
+  const wanted = new Set(branches.map((branch) => branch.name));
+  let cursor = list.firstElementChild;
+  for (const branch of branches) {
+    let row = existing.get(branch.name);
+    if (!row) {
+      const copy = button('Copy name', () => copyBranch(branch.name, copy));
+      copy.setAttribute('aria-label', `Copy branch name ${branch.name}`);
+      row = recordRow(`branch:${branch.name}`, branch.name, '', copy, branch.url);
+      row.classList.add('github-branch');
+      row.dataset.branch = branch.name;
+      row.setAttribute('role', 'listitem');
+      row.querySelector('.history-title').append(el('span', 'github-branch-badges'));
+    }
+    const badges = row.querySelector('.github-branch-badges');
+    const badgeState = `${branch.name === value.defaultBranch}:${branch.protected}`;
+    if (badges.dataset.state !== badgeState) {
+      badges.dataset.state = badgeState;
+      badges.replaceChildren(...[
+        branch.name === value.defaultBranch ? badge('', 'Default', 'Default branch') : null,
+        branch.protected ? badge('', 'Protected', 'Protected by branch protection or rulesets') : null,
+      ].filter(Boolean));
+    }
+    row.querySelector('.history-meta').textContent = branch.sha ? branch.sha.slice(0, 7) : '';
+    row.querySelector('.history-meta').title = branch.sha ?? '';
+    if (row === cursor) cursor = cursor.nextElementSibling;
+    else list.insertBefore(row, cursor);
+  }
+  for (const row of [...list.children]) if (!wanted.has(row.dataset.branch)) row.remove();
+  if (focused?.isConnected && document.activeElement !== focused) focused.focus({ preventScroll: true });
+  panel.scrollTop = oldScroll;
+  if (anchor) {
+    const row = [...list.children].find((node) => node.dataset.branch === anchor.name);
+    if (row) panel.scrollTop += row.getBoundingClientRect().top - panel.getBoundingClientRect().top - anchor.offset;
+  }
+}
+
 function viewData(view) {
   const slot = githubPick.data[view];
   const repo = githubPick.repo;
@@ -3703,7 +3947,17 @@ function setPickerOpen(open) {
   input.setAttribute('aria-expanded', String(open));
   $('github-repo-list').hidden = !open;
   if (!open) input.removeAttribute('aria-activedescendant');
-  else renderPickerList();
+  else {
+    fitPickerList();
+    renderPickerList();
+  }
+}
+
+// The list stays inside the visible part of the dock, so no option sits under an on-screen keyboard.
+function fitPickerList() {
+  if (!githubPick.open) return;
+  const room = $('dock').getBoundingClientRect().bottom - $('github-repo').getBoundingClientRect().bottom - 12;
+  $('github-repo-list').style.setProperty('--picker-room', `${Math.max(120, Math.floor(room))}px`);
 }
 
 function highlighted(text, query) {
@@ -3824,6 +4078,7 @@ function renderGitHubViews() {
   $('github-issues').hidden = shown !== 'issues';
   $('github-runs').hidden = shown !== 'actions';
   $('github-pulls').hidden = shown !== 'pulls';
+  $('github-branches').hidden = shown !== 'branches';
   const ready = Boolean(state.github && githubAccount() && !githubAccount().needsSignIn);
   $('github-clone-into').hidden = !ready || shown !== 'repos';
   const running = Boolean(viewData('actions')?.value?.running);
@@ -3833,6 +4088,7 @@ function renderGitHubViews() {
   if (shown === 'issues') renderIssues();
   else if (shown === 'actions') renderRuns();
   else if (shown === 'pulls') renderPulls();
+  else if (shown === 'branches') renderBranches();
 }
 
 /** Rebuilds a panel and puts the focus back on the control with the same `data-key`. */
@@ -4863,6 +5119,7 @@ const terminalControls = new TerminalControls({
   },
 });
 bindTerminalViewport($('terminal-panel'), $('terminal-controls'));
+bindVisibleViewport($('dock'), 'dock', { fitted: fitPickerList });
 
 const terminalCopy = new TerminalCopy({
   opener: $('panel-copy'), dialog: $('terminal-copy'),
@@ -5650,6 +5907,18 @@ $('github-views').addEventListener('click', (e) => {
   if (view) switchGitHubView(view);
 });
 $('github-views').addEventListener('keydown', moveGitHubView);
+$('github-branches-refresh').addEventListener('click', () => loadView('branches'));
+$('github-branches-retry').addEventListener('click', () => loadBranches({ resume: true }));
+$('github-branches-filter').addEventListener('input', () => {
+  $('github-branches').scrollTop = 0;
+  renderBranches({ preserveAnchor: false });
+});
+$('github-branches-clear').addEventListener('click', () => {
+  $('github-branches-filter').value = '';
+  $('github-branches').scrollTop = 0;
+  renderBranches({ preserveAnchor: false });
+  $('github-branches-filter').focus();
+});
 $('github-parent').addEventListener('change', () => setCloneParent(cloneParent()));
 $('github-parent-pick').addEventListener('click', firstClick(() => chooseFolder('clone')));
 $('history-here').addEventListener('change', renderHistory);
@@ -5710,6 +5979,7 @@ document.addEventListener('visibilitychange', () => {
   if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
   if (document.visibilityState === 'visible' && dockShows('github') && githubShownView() === 'actions') loadView('actions');
   else scheduleRuns();
+  if (branchesVisible() && !viewData('branches')?.error) loadBranches({ resume: true });
 });
 addEventListener('pagehide', () => {
   flushNotes();
@@ -5793,6 +6063,7 @@ $('settings-menu').addEventListener('change', (e) => {
   else if (e.target.name === 'theme') changeTheme(e.target);
   else if (e.target.name === 'sound') changeSound(e.target);
   else if (e.target.name === 'voice') changeVoice(e.target);
+  else if (e.target.name === 'autostart') changeAutostart(e.target);
 });
 /**
  * Runs `opened` once a menu shows and `closed` once it hides. Chrome skips the toggle event of a menu
@@ -5812,6 +6083,7 @@ function returnFocus(menu, invoker) {
   if ((!at || at === document.body || menu.contains(at)) && invoker?.checkVisibility?.()) invoker.focus();
 }
 onMenu($('settings-menu'), (menu) => {
+  loadAutostart();
   placeMenu(menu, $('settings'));
   menu.querySelector('input:checked')?.focus();
 }, (menu) => returnFocus(menu, $('settings')));

package/web/environment.js

@@ -92,6 +92,8 @@ export function createEnvironmentUI({ api, onAuthError, isAuthError = () => fals
   $('environment-refresh').addEventListener('click', () => load(true));
   dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close(); });
   dialog.addEventListener('close', () => {
+    // A queued close from an earlier opening must not clear the current opener.
+    if (dialog.open) return;
     if (openerId) document.querySelector(`.provider[data-id="${openerId}"] .environment-open`)?.focus();
     openerId = null;
   });

package/web/index.html

@@ -46,6 +46,12 @@
             <legend>Sound</legend>
             <label class="choice" title="Plays when the session manager stops, remains unavailable after a brief recovery check, or a new Agent Guild update is discovered. Click or type on this page to allow playback."><input id="sound" type="checkbox" name="sound"><span class="sound-alerts">Alert sounds</span></label>
           </fieldset>
+          <fieldset id="autostart-choice" hidden>
+            <legend>Startup</legend>
+            <label class="choice"><input id="autostart" type="checkbox" name="autostart"><span class="autostart">Launch at sign-in</span></label>
+            <p id="autostart-note" class="voice-note"></p>
+            <p id="autostart-run" class="voice-note autostart-run" role="status" hidden></p>
+          </fieldset>
           <fieldset id="voice-choice" hidden>
             <legend>Voice</legend>
             <label class="choice"><input id="voice" type="checkbox" name="voice"><span class="voice-input">Voice input</span></label>
@@ -208,6 +214,7 @@
         <button id="github-view-issues" class="github-view" type="button" role="tab" aria-controls="github-issues" aria-selected="false" data-view="issues" tabindex="-1">Issues</button>
         <button id="github-view-actions" class="github-view" type="button" role="tab" aria-controls="github-runs" aria-selected="false" data-view="actions" tabindex="-1" aria-label="Actions">Actions<span id="github-running" class="github-running" hidden></span></button>
         <button id="github-view-pulls" class="github-view" type="button" role="tab" aria-controls="github-pulls" aria-selected="false" data-view="pulls" tabindex="-1" aria-label="Pull requests"><span class="long">Pull requests</span><span class="short" aria-hidden="true">PRs</span></button>
+        <button id="github-view-branches" class="github-view" type="button" role="tab" aria-controls="github-branches" aria-selected="false" data-view="branches" tabindex="-1">Branches</button>
       </div>
       <div id="github-repos" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-repos">
         <section id="github-card" class="github-card" aria-live="polite" hidden></section>
@@ -241,6 +248,27 @@
       <div id="github-issues" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-issues" hidden></div>
       <div id="github-runs" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-actions" hidden></div>
       <div id="github-pulls" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-pulls" hidden></div>
+      <div id="github-branches" class="models-body github-body" role="tabpanel" aria-labelledby="github-view-branches" hidden>
+        <p id="github-branches-pick" class="github-view-note">Pick a repository above to see its branches.</p>
+        <div id="github-branches-content" hidden>
+          <div class="github-view-tools">
+            <button id="github-branches-refresh" class="btn" type="button">Refresh</button>
+            <span class="github-spacer"></span>
+            <a id="github-branches-out" class="btn github-out" target="_blank" rel="noopener noreferrer" aria-description="Opens in a new tab">GitHub</a>
+          </div>
+          <div class="github-branch-filter">
+            <input id="github-branches-filter" type="search" placeholder="Filter branches" aria-label="Filter branches" spellcheck="false" autocomplete="off">
+            <button id="github-branches-clear" class="btn" type="button" disabled>Clear</button>
+          </div>
+          <p id="github-branches-status" class="github-view-note" role="status" aria-live="polite" aria-atomic="true"></p>
+          <div id="github-branches-error" class="github-error" hidden>
+            <span role="alert"></span>
+            <button id="github-branches-retry" class="btn" type="button">Retry</button>
+          </div>
+          <p id="github-branches-metadata" class="github-view-note" hidden></p>
+          <div id="github-branches-list" class="history-list" role="list" aria-label="Remote branches"></div>
+        </div>
+      </div>
       <div id="github-clone-into" class="history-form github-form">
         <label for="github-parent">Clone into</label>
         <div class="cwd-field single">

package/web/layout.js

@@ -73,3 +73,39 @@ export function bindSplitter(handle, { axis = () => 'x', start, move, end, step
     end();
   });
 }
+
+/**
+ * Publishes the part of the window an on-screen keyboard leaves visible as
+ * `--<name>-viewport-top`, `--<name>-viewport-bottom` and `--<name>-viewport-height`
+ * on `element` while `shown()` holds. iOS Safari keeps fixed elements at their full
+ * height under its keyboard and pans the page beneath them, so they must fit themselves.
+ * `fitted(height)` runs after each update, with null while the element is not shown.
+ */
+export function bindVisibleViewport(element, name, { shown = () => !element.hidden, watch = [element], fitted = () => {} } = {}) {
+  const viewport = window.visualViewport;
+  const props = ['top', 'bottom', 'height'].map((edge) => `--${name}-viewport-${edge}`);
+  let frame;
+  const update = () => {
+    if (!shown()) {
+      for (const prop of props) element.style.removeProperty(prop);
+      return fitted(null);
+    }
+    // Magnification belongs to the browser; it must not resize the layout.
+    if (viewport && Math.abs(viewport.scale - 1) > 0.01) return;
+    const top = viewport?.offsetTop || 0;
+    const height = viewport?.height ?? innerHeight;
+    element.style.setProperty(props[0], `${top}px`);
+    element.style.setProperty(props[1], `${Math.max(0, innerHeight - top - height)}px`);
+    element.style.setProperty(props[2], `${height}px`);
+    fitted(height);
+  };
+  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 watched of watch) observer.observe(watched, { attributes: true, attributeFilter: ['hidden'] });
+  schedule();
+  return schedule;
+}

package/web/styles.css

@@ -23,6 +23,7 @@
   --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E");
   --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.6A8 8 0 0 1 9.4 4.5a8 8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E");
   --icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E");
+  --icon-power: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v8.5'/%3E%3Cpath d='M7 6.2a7.5 7.5 0 1 0 10 0'/%3E%3C/svg%3E");
   --icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4.2 4.2 0 0 1 0 6M18.3 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E");
   --icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
   --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 18.5h10.5a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.5 9.6 4.5 4.5 0 0 0 7 18.5z'/%3E%3C/svg%3E");
@@ -392,7 +393,10 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
 .settings-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
 .settings-menu .choice > .sound-alerts::before { mask-image: var(--icon-sound); }
 .settings-menu .choice > .voice-input::before { mask-image: var(--icon-mic); }
+.settings-menu .choice > .autostart::before { mask-image: var(--icon-power); }
 .voice-note { margin: 0 8px 6px; max-width: 26ch; color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
+.autostart-run { overflow-wrap: anywhere; }
+.autostart-run[data-outcome="failed"] { color: var(--danger); }
 .notes-open::before { mask-image: var(--icon-notes); }
 .notes-open[aria-pressed="true"], .github-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
 .menu-button::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
@@ -872,7 +876,7 @@ a.news-link:visited { color: var(--muted); }
 .github-combo input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
 .github-combo input::placeholder { font-weight: 400; }
 .github-repo-list {
-  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: min(26rem, 60dvh); overflow: auto;
+  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: min(26rem, 60dvh, var(--picker-room, 26rem)); overflow: auto;
   margin: 0; padding: 4px; list-style: none; background: var(--surface); color: var(--text);
   border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
 }
@@ -898,10 +902,27 @@ a.news-link:visited { color: var(--muted); }
 .github-view[aria-selected="true"] { color: var(--heading); background: var(--surface-2); border-color: var(--border); border-bottom-color: var(--surface-2); }
 .github-view:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
 .github-view .short { display: none; }
-@container (max-width: 340px) {
+@container (max-width: 440px) {
   .github-view .long { display: none; }
   .github-view .short { display: inline; }
 }
+#github-branches { overflow-anchor: none; }
+.github-branch-filter { display: flex; align-items: center; gap: 6px; }
+.github-branch-filter input {
+  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--surface); color: var(--text); font: inherit; font-size: 0.85rem;
+}
+.github-branch-filter input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.github-branch .history-title { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
+.github-branch .github-record-title { min-width: 0; overflow-wrap: anywhere; }
+.github-branch-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.github-branch .history-meta { font-family: var(--font-mono, monospace); }
+.github-branch > .btn { align-self: start; }
+#github-branches-error .btn { margin-left: 6px; }
+@media (pointer: coarse) {
+  .github-branch-filter input { font-size: 16px; }
+  .github-branch > .btn, #github-branches .github-view-tools .btn, .github-branch-filter .btn { min-height: 36px; }
+}
 .github-running { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); animation: pulse 1.4s ease-in-out infinite; }
 .github-body[hidden] { display: none; }
 .github-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; }
@@ -944,7 +965,8 @@ a.btn.github-out::after {
 .toast .toast-action { margin-left: 12px; padding: 2px 10px; background: transparent; box-shadow: none; color: inherit; border-color: currentColor; }
 
 .dock {
-  position: fixed; top: var(--topbar-h, 56px); right: 0; bottom: 0; z-index: 12; width: var(--dock-w, 420px); max-width: 100vw;
+  /* Above an on-screen keyboard, which the page publishes as --dock-viewport-*. */
+  position: fixed; top: max(var(--topbar-h, 56px), var(--dock-viewport-top, 0px)); right: 0; bottom: var(--dock-viewport-bottom, 0px); z-index: 12; width: var(--dock-w, 420px); max-width: 100vw;
   display: flex; flex-direction: column; background: var(--surface); color: var(--text);
   border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(0, 0, 0, 0.25);
 }

package/web/terminal-controls.js

@@ -1,3 +1,5 @@
+import { bindVisibleViewport } from './layout.js';
+
 const ARROWS = { ArrowUp: 'A', ArrowDown: 'B', ArrowRight: 'C', ArrowLeft: 'D' };
 
 /** Use the same cursor mode as a physical keyboard, including inside full-screen tools. */
@@ -102,29 +104,9 @@ export class TerminalControls {
 
 /** 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();
+  bindVisibleViewport(panel, 'terminal', {
+    shown: () => !panel.hidden && !controls.hidden,
+    watch: [panel, controls],
+    fitted: (height) => panel.toggleAttribute('data-compact', height !== null && height < 420),
+  });
 }