@oddessentials/agent-guild 0.29.0 → 0.30.0

package/README.md

@@ -160,8 +160,10 @@ vX.Y.Z** switches over when you are ready. The version badge opens
 
 **Keep notes at hand.** **Notes** in the top bar opens a notepad for prompts,
 commands and to-dos in the side panel, next to your terminals. It saves up to
-100,000 characters as you type and keeps them in this browser, never on the
-manager; every tab of the page shows the same notes.
+100,000 characters as you type. The same notes follow every browser signed in
+to this manager, including one opened through remote access. This browser
+keeps a copy too: if the manager is unreachable, the line under the title
+says the notes are saved in this browser only, and they sync when it is back.
 
 **GitHub beside your work.** **GitHub** in the top bar opens the side panel.
 Sign in to one or more GitHub accounts, then search the repositories of all

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "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/config.mjs

@@ -45,6 +45,8 @@ export const paths = {
   get accounts() { return path.join(dataDir(), 'accounts'); },
   get github() { return path.join(dataDir(), 'github'); },
   get remoteAccess() { return path.join(dataDir(), 'remote-access.json'); },
+  /** The shared notepad. A missing file means it was never stored. */
+  get notes() { return path.join(dataDir(), 'notes.json'); },
   get log() { return path.join(dataDir(), 'manager.log'); },
   /** Launchers for agent-guild-report, put first on every session's PATH. */
   get shims() { return path.join(dataDir(), 'bin'); },

package/src/manager/main.mjs

@@ -13,6 +13,7 @@ import { NewsFeed } from './news.mjs';
 import { Changelog } from './changelog.mjs';
 import { GitHub } from './github.mjs';
 import { createManagerServer } from './server.mjs';
+import { createNotesStore } from './notes.mjs';
 import { RemoteAccess, loadRemoteAccess } from './remote-access.mjs';
 import { SelfUpdate } from './self-update.mjs';
 import { resolveBaseEnv, pathReader } from './shell-env.mjs';
@@ -138,6 +139,7 @@ export async function startManager({ port = resolvePort(), host = DEFAULT_HOST,
     extraHosts: remoteSettings.config.access.hosts,
     extraOrigins: remoteSettings.config.access.origins,
     remoteAccess,
+    notes: createNotesStore(paths.notes),
     launcher: launcherPath(),
     onShutdownRequest: ({ restart = false } = {}) => shutdown('requested via API', { restart }).then(() => process.exit(0)),
   });

package/src/manager/notes.mjs

@@ -0,0 +1,120 @@
+// One notepad for every browser signed in to this manager.
+// A missing file means notes were never stored. An empty string is a notepad
+// the user cleared; those two must stay distinct so an old browser cannot
+// put cleared notes back.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { randomUUID } from 'node:crypto';
+
+export const NOTES_LIMIT = 100000;
+/** Larger than the API's usual 64 KiB body, and enough for a full notepad after JSON escaping. */
+export const NOTES_BODY_LIMIT = 1024 * 1024;
+const NOTES_FILE_LIMIT = 2 * 1024 * 1024;
+
+function notesError(code, message, status, notes) {
+  // The store reports an unreadable file once, so the server does not log every request that hits it.
+  const error = Object.assign(new Error(message), { code, status, logged: code === 'notes_unreadable' });
+  if (notes) error.notes = notes;
+  return error;
+}
+
+/** @returns {{ revision: string, text: string } | null} null when the file is not there yet */
+function readNotes(file) {
+  let stat;
+  try { stat = fs.statSync(file); } catch (error) {
+    if (error.code === 'ENOENT') return null;
+    throw notesError('notes_unreadable', 'Notes could not be read.', 500);
+  }
+  if (!stat.isFile() || stat.size > NOTES_FILE_LIMIT) throw notesError('notes_unreadable', 'Notes could not be read.', 500);
+  let value;
+  try { value = JSON.parse(fs.readFileSync(file, 'utf8')); } catch {
+    throw notesError('notes_unreadable', 'Notes could not be read.', 500);
+  }
+  if (!value || value.version !== 1 || typeof value.revision !== 'string' || !value.revision || value.revision.length > 100
+    || typeof value.text !== 'string' || value.text.length > NOTES_LIMIT) {
+    throw notesError('notes_unreadable', 'Notes could not be read.', 500);
+  }
+  return { revision: value.revision, text: value.text };
+}
+
+function writeNotes(file, notes) {
+  const contents = `${JSON.stringify({ version: 1, revision: notes.revision, text: notes.text }, null, 2)}\n`;
+  fs.mkdirSync(path.dirname(file), { recursive: true, mode: 0o700 });
+  const next = `${file}.${randomUUID()}.tmp`;
+  let descriptor;
+  try {
+    descriptor = fs.openSync(next, 'wx', 0o600);
+    fs.writeFileSync(descriptor, contents);
+    fs.fsyncSync(descriptor);
+    fs.closeSync(descriptor);
+    descriptor = undefined;
+    fs.renameSync(next, file);
+  } finally {
+    if (descriptor !== undefined) fs.closeSync(descriptor);
+    try { fs.unlinkSync(next); } catch { /* renamed, or never created */ }
+  }
+  try { fs.chmodSync(file, 0o600); } catch { /* not supported on Windows */ }
+}
+
+/**
+ * @param {string} [file] omit for an in-memory store (tests). The real manager passes its notes file.
+ * @param {{ warn?: (message: string) => void }} [options] where the one line about an unreadable file goes
+ */
+export function createNotesStore(file, { warn = (message) => console.warn(message) } = {}) {
+  let current = { revision: null, text: '' };
+  let loaded = !file;
+  let warned = false;
+
+  /** An unreadable file is read again next time, so fixing or removing it needs no restart. */
+  function ensure() {
+    if (loaded) return;
+    let read;
+    try { read = readNotes(file); } catch (error) {
+      if (!warned) warn(`[notes] ${file} cannot be read, so notes are not shared until it is fixed or removed.`);
+      warned = true;
+      throw error;
+    }
+    warned = false;
+    current = read ?? { revision: null, text: '' };
+    loaded = true;
+  }
+
+  function snapshot() {
+    ensure();
+    return { revision: current.revision, text: current.text };
+  }
+
+  function save(body) {
+    ensure();
+    if (!body || typeof body.text !== 'string') throw notesError('bad_notes', 'Notes must be text.', 400);
+    if (body.text.length > NOTES_LIMIT) {
+      throw notesError('notes_too_long', `Notes hold up to ${NOTES_LIMIT.toLocaleString('en-US')} characters.`, 400);
+    }
+    const revision = body.revision ?? null;
+    if (revision !== null && (typeof revision !== 'string' || !revision || revision.length > 100)) {
+      throw notesError('bad_notes', 'Notes must be text.', 400);
+    }
+    if (revision !== current.revision) {
+      throw notesError('stale_notes', 'Notes changed in another browser.', 409, { revision: current.revision, text: current.text });
+    }
+    const next = { revision: randomUUID(), text: body.text };
+    if (file) writeNotes(file, next);
+    current = next;
+    loaded = true;
+    return { revision: next.revision, text: next.text };
+  }
+
+  return {
+    snapshot,
+    save,
+    /** `{ known: false }` when the file cannot be read, so a client does not treat that as an empty notepad. */
+    helloRevision() {
+      try {
+        return { known: true, revision: snapshot().revision };
+      } catch {
+        return { known: false };
+      }
+    },
+  };
+}

package/src/manager/server.mjs

@@ -12,6 +12,7 @@ import { createViews } from './github-views.mjs';
 import { createFolderOpener } from './folder-opener.mjs';
 import { createFolderBrowser } from './folder-browser.mjs';
 import { normalizeAccess } from './access-policy.mjs';
+import { NOTES_BODY_LIMIT, createNotesStore } from './notes.mjs';
 
 const require = createRequire(import.meta.url);
 const API = '/api/v1';
@@ -63,7 +64,7 @@ class HttpError extends Error {
   }
 }
 
-function readJsonBody(req) {
+function readJsonBody(req, max = MAX_BODY) {
   return new Promise((resolve, reject) => {
     let size = 0;
     const chunks = [];
@@ -71,7 +72,7 @@ function readJsonBody(req) {
     req.on('data', (chunk) => {
       if (tooLarge) return; // drain the rest so the 413 response can be read
       size += chunk.length;
-      if (size > MAX_BODY) {
+      if (size > max) {
         tooLarge = true;
         chunks.length = 0;
         reject(new HttpError(413, 'request body too large', 'too_large'));
@@ -113,6 +114,8 @@ export function createManagerServer({
   extraHosts = [],
   extraOrigins = [],
   remoteAccess = null,
+  /** In-memory when omitted, so a test server never reads the user's notes file. */
+  notes = createNotesStore(),
   folderOpener = createFolderOpener({ resolveCwd: (cwd) => manager.resolveCwd(cwd) }),
   folderBrowser = createFolderBrowser(),
   /** The double-click launcher file for this platform, or null when the package carries none. */
@@ -252,6 +255,15 @@ export function createManagerServer({
 
     requireAuth(req, url);
 
+    if (route === '/notes' && method === 'GET') {
+      return sendJson(res, 200, { notes: notes.snapshot() });
+    }
+    if (route === '/notes' && method === 'PUT') {
+      const saved = notes.save(await readJsonBody(req, NOTES_BODY_LIMIT));
+      broadcast({ type: 'notes.updated', notes: saved });
+      return sendJson(res, 200, { notes: saved });
+    }
+
     if (remoteAccess && route === '/remote-access' && method === 'GET') {
       return sendJson(res, 200, { remoteAccess: remoteAccess.snapshot() });
     }
@@ -486,12 +498,13 @@ export function createManagerServer({
       else serveStatic(req, res, url.pathname);
     } catch (err) {
       const status = err.status || 500;
-      if (status >= 500) console.error('[server]', err);
+      if (status >= 500 && !err.logged) console.error('[server]', err);
       if (!res.headersSent) {
         const error = { code: err.code || 'error', message: err.message };
         if (err.running !== undefined) error.running = err.running;
         if (err.pending !== undefined) error.pending = err.pending;
         if (err.target !== undefined) error.target = err.target;
+        if (err.notes !== undefined) error.notes = err.notes;
         sendJson(res, status, { error });
       }
     }
@@ -539,7 +552,11 @@ export function createManagerServer({
 
   function handleEvents(ws, req) {
     eventClients.add(ws);
-    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() });
+    const hello = { type: 'hello', version, pid: process.pid, platform: process.platform, startedAt, launcher, folderOpener: folderOpenerFor(req), remoteAccess: remoteAccess ? { available: true } : null, upgrade: upgradeInfo(), sessions: manager.list() };
+    const notesHello = notes.helloRevision();
+    if (notesHello.known) hello.notesRevision = notesHello.revision;
+    else hello.notesUnreadable = true;
+    safeSend(ws, hello);
     ws.on('close', () => eventClients.delete(ws));
     ws.on('message', () => { /* events socket is server -> client only */ });
   }

package/web/app.js

@@ -31,6 +31,7 @@ const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
 const SOUND_KEY = 'agentGuild.sound';
 const VOICE_KEY = 'agentGuild.voice';
 const NOTES_KEY = 'agentGuild.notes';
+const NOTES_REV_KEY = 'agentGuild.notesRevision';
 const DOCK_KEY = 'agentGuild.dock';
 const DOCK_WIDTH_KEY = 'agentGuild.dockWidth';
 const PANES_KEY = 'agentGuild.panes';
@@ -366,35 +367,63 @@ function moveInMenu(e) {
 /** Notes share the page's storage with every other setting, so they stay far below the browser's limit for it. */
 const NOTES_LIMIT = 100000;
 const NOTES_STATUS = {
-  saved: 'Saved in this browser as you type',
+  saved: 'Saved and synced across your browsers',
+  local: 'Saved in this browser only. Syncs when the manager is back.',
+  damaged: 'Not syncing: the manager’s notes file is damaged. Saved in this browser only.',
   long: `Not saved: notes hold up to ${NOTES_LIMIT.toLocaleString('en-US')} characters. Shorten them to save.`,
   refused: 'Not saved: the browser’s storage for this page is full or turned off. Copy what you need before you close the page.',
 };
+/** How long a burst of typing waits before one save to the manager. */
+const NOTES_PUSH_MS = 400;
+/** Browsers drop a keepalive request larger than 64 KiB, so a bigger notepad waits for the next open. */
+const NOTES_KEEPALIVE_BYTES = 60 * 1024;
 /**
  * `saved`: the notes as this page last read or wrote them in storage. `status`: whether the text in the
- * panel is saved, too `long` or `refused`; `shown`: the status the line under the title shows.
+ * panel is saved, too `long` or `refused`; `sync`: whether the manager has it (`ok`), could not be reached
+ * (`local`) or cannot read its notes file (`damaged`); `shown`: the status the line under the title shows.
+ * `base`: the manager revision this page last saved from. `acked`: the text of that revision.
+ * `flight`: the save to the manager under way. Text typed meanwhile is sent when it finishes.
  */
-const notesView = { saved: '', status: 'saved', shown: 'saved' };
+const notesView = { saved: '', status: 'saved', sync: 'ok', shown: 'saved', base: null, acked: null, timer: 0, flight: null };
 
 /** Shows notes another tab saved since this page last read or wrote them. Saved notes win over text this page could not save. */
 function refreshNotes() {
   let text;
   // Unlike load(), a read that fails is not taken for empty notes.
   try { text = localStorage.getItem(NOTES_KEY) ?? ''; } catch { return; }
-  if (text === notesView.saved) return;
-  notesView.saved = text;
-  notesView.status = 'saved';
-  $('notes-text').value = text;
+  const revision = load(NOTES_REV_KEY);
+  if (text === notesView.saved && revision === notesView.base) return;
+  if (text !== notesView.saved) {
+    notesView.saved = text;
+    notesView.status = 'saved';
+    $('notes-text').value = text;
+  }
+  // The revision is kept only while the stored text is the one it names, so that text is on the manager.
+  if (revision) notesView.acked = text;
+  if (revision !== notesView.base) notesView.base = revision;
   renderNotesStatus();
   guardLeaving();
 }
 
-/** Saves the notes on every change; emptying them removes the saved copy. */
+/** Saves the notes on every change; emptying them removes the saved copy. This stays in the browser. */
 function saveNotes() {
   const text = $('notes-text').value;
-  if (text.length > NOTES_LIMIT) notesView.status = 'long';
-  else if (!save(NOTES_KEY, text || null)) notesView.status = 'refused';
-  else {
+  if (text.length > NOTES_LIMIT) {
+    notesView.status = 'long';
+    renderNotesStatus();
+    guardLeaving();
+    return;
+  }
+  // A reload can tell these keystrokes have not reached the manager: the stored revision goes first, so
+  // stored text never sits beside a revision it does not match. The revision in memory stays, for the save.
+  // An empty panel is probed with the same text, and that must not look like a new edit.
+  const revision = text !== notesView.saved ? load(NOTES_REV_KEY) : null;
+  if (revision) save(NOTES_REV_KEY, null);
+  if (!save(NOTES_KEY, text || null)) {
+    // The stored text did not change, so it still matches its revision.
+    if (revision) save(NOTES_REV_KEY, revision);
+    notesView.status = 'refused';
+  } else {
     notesView.status = 'saved';
     notesView.saved = text;
   }
@@ -404,16 +433,30 @@ function saveNotes() {
 
 /** The line under the title is a live region, so it is rewritten only when the status changes. */
 function renderNotesStatus() {
-  if (notesView.shown === notesView.status) return;
-  notesView.shown = notesView.status;
+  // A problem saving in this browser outranks one reaching the manager.
+  const shown = notesView.status === 'saved' && notesView.sync !== 'ok' ? notesView.sync : notesView.status;
+  if (notesView.shown === shown) return;
+  notesView.shown = shown;
   const sub = $('notes-sub');
-  sub.textContent = NOTES_STATUS[notesView.status];
-  sub.classList.toggle('warn', notesView.status !== 'saved');
+  sub.textContent = NOTES_STATUS[shown];
+  sub.classList.toggle('warn', shown !== 'saved');
+}
+
+/** Whether the manager has the notes. Typing never changes this, so the line does not flicker. */
+function setNotesSync(sync) {
+  if (notesView.sync === sync) return;
+  notesView.sync = sync;
+  renderNotesStatus();
+}
+
+/** A save or read that failed. A file the manager cannot read is reported as such; anything else is unreachable. */
+function notesFailed(error) {
+  setNotesSync(error?.code === 'notes_unreadable' ? 'damaged' : 'local');
 }
 
 /** Another tab saved the notes, or cleared this page's storage. */
 function notesStored(e) {
-  if (e.key === NOTES_KEY || e.key === null) refreshNotes();
+  if (e.key === NOTES_KEY || e.key === NOTES_REV_KEY || e.key === null) refreshNotes();
 }
 
 function openNotes({ focus = true } = {}) {
@@ -430,6 +473,181 @@ function toggleNotes() {
   else openNotes();
 }
 
+function sharedPrefix(left, right) {
+  const end = Math.min(left.length, right.length);
+  let i = 0;
+  while (i < end && left.charCodeAt(i) === right.charCodeAt(i)) i += 1;
+  return i;
+}
+
+/** Takes the manager's notes. A selection that still sits in the unchanged prefix stays put. */
+function adoptNotes(notes) {
+  const area = $('notes-text');
+  const next = notes.text;
+  if (typeof next !== 'string') return;
+  if (next !== area.value) {
+    const start = area.selectionStart;
+    const end = area.selectionEnd;
+    const previous = area.value;
+    const focused = document.activeElement === area;
+    area.value = next;
+    if (focused) {
+      const keep = sharedPrefix(previous, next);
+      if (start <= keep && end <= keep) area.setSelectionRange(start, end);
+    }
+  }
+  notesView.saved = next;
+  notesView.acked = next;
+  notesView.base = notes.revision ?? null;
+  notesView.status = 'saved';
+  notesView.sync = 'ok';
+  // Revision last, and only over text that was stored: a stored revision always names the stored text.
+  save(NOTES_REV_KEY, null);
+  if (save(NOTES_KEY, next || null)) save(NOTES_REV_KEY, notes.revision || null);
+  renderNotesStatus();
+  guardLeaving();
+}
+
+function notesPushable() {
+  const text = $('notes-text').value;
+  if (notesView.status !== 'saved' || text.length > NOTES_LIMIT) return false;
+  if (text === notesView.acked) return false;
+  if (notesView.base == null && text === '') return false;
+  return true;
+}
+
+function scheduleNotesPush(delay = NOTES_PUSH_MS) {
+  clearTimeout(notesView.timer);
+  notesView.timer = 0;
+  if (!notesPushable()) return Promise.resolve();
+  if (delay === 0) return pushNotes();
+  notesView.timer = setTimeout(() => { notesView.timer = 0; void pushNotes(); }, delay);
+  return Promise.resolve();
+}
+
+/** The page is being hidden or closed: send what the debounce still holds. */
+function flushNotes() {
+  void scheduleNotesPush(0);
+}
+
+/**
+ * One save to the manager at a time, so two of this page's own saves can never race each other. Text typed
+ * while a save is under way follows it. A conflict sends this page's text once more at the manager's revision:
+ * the latest typing wins, and the text on screen is never replaced by an older copy.
+ */
+function pushNotes() {
+  // The save under way checks for newer text when it finishes.
+  if (notesView.flight) return notesView.flight;
+  const run = (async () => {
+    let resent = false;
+    for (;;) {
+      if (!notesPushable()) return;
+      const outcome = await sendNotes($('notes-text').value);
+      if (outcome === 'stale' && !resent) resent = true;
+      else if (outcome !== 'ok') return;
+    }
+  })();
+  notesView.flight = run;
+  return run.finally(() => { notesView.flight = null; });
+}
+
+/** @returns {Promise<'ok'|'stale'|'failed'>} `stale`: the manager moved on, and `base` now names its revision. */
+async function sendNotes(text) {
+  const body = { revision: notesView.base, text };
+  // A hidden page may be closing: keepalive lets the save outlive it, for bodies the browser allows.
+  const keepalive = document.visibilityState === 'hidden'
+    && new TextEncoder().encode(JSON.stringify(body)).length <= NOTES_KEEPALIVE_BYTES;
+  let payload;
+  try {
+    payload = (await api('PUT', '/notes', body, { keepalive })).notes;
+  } catch (error) {
+    if (error instanceof AuthError) {
+      showAuth(error.message);
+      return 'failed';
+    }
+    if (error.code !== 'stale_notes' || !error.notes || typeof error.notes.text !== 'string') {
+      notesFailed(error);
+      return 'failed';
+    }
+    // The manager already holds exactly this text, saved by another tab or an earlier request.
+    if (error.notes.text === $('notes-text').value) {
+      adoptNotes(error.notes);
+      return 'ok';
+    }
+    notesView.base = error.notes.revision ?? null;
+    return 'stale';
+  }
+  if (!payload || typeof payload.text !== 'string') {
+    notesFailed();
+    return 'failed';
+  }
+  if ($('notes-text').value === text) adoptNotes(payload);
+  else {
+    // Typing went on during the save: the newer text follows from this revision.
+    notesView.base = payload.revision ?? notesView.base;
+    setNotesSync('ok');
+  }
+  return 'ok';
+}
+
+/** Another browser's save. Our own echo matches the text already on screen and only adopts the revision. */
+function applyServerNotes(notes) {
+  if (!notes || typeof notes.text !== 'string') return;
+  const area = $('notes-text');
+  if (notes.text === area.value) {
+    adoptNotes(notes);
+    return;
+  }
+  if (notesView.acked !== null && area.value !== notesView.acked) {
+    notesView.base = notes.revision ?? notesView.base;
+    return;
+  }
+  adoptNotes(notes);
+}
+
+/** The notes part of hello. A missing revision means this manager cannot share notes. */
+async function catchUpNotes(revision, unreadable) {
+  if (unreadable) {
+    setNotesSync('damaged');
+    return;
+  }
+  if (revision === undefined) return;
+  // Hello can arrive before the first read. Load this browser's copy before deciding, unless typing has started.
+  if (notesView.saved === '' && $('notes-text').value === '' && notesView.acked === null) refreshNotes();
+  const local = $('notes-text').value;
+  // No file yet, or it was removed. Text this browser has is the first copy. An empty panel writes nothing.
+  if (revision === null) notesView.acked = local ? null : '';
+  if (revision === null || revision === notesView.base) {
+    if (notesPushable()) await scheduleNotesPush(0);
+    else setNotesSync('ok');
+    return;
+  }
+  await pullNotes();
+}
+
+/** The manager moved on while this page was away. Its copy wins unless this browser has edits it never sent. */
+async function pullNotes() {
+  let notes;
+  try {
+    notes = (await api('GET', '/notes')).notes;
+  } catch (error) {
+    if (error instanceof AuthError) showAuth(error.message);
+    else notesFailed(error);
+    return;
+  }
+  if (!notes || typeof notes.text !== 'string') return;
+  const local = $('notes-text').value;
+  // `acked` is unknown only when this browser holds text no revision names: an edit that never reached the manager.
+  const unsent = local !== notes.text && (notesView.acked === null ? local !== '' : local !== notesView.acked);
+  if (!unsent) {
+    adoptNotes(notes);
+    return;
+  }
+  notesView.base = notes.revision ?? null;
+  setNotesSync('ok');
+  await scheduleNotesPush(0);
+}
+
 // ---- dock -----------------------------------------------------------------
 
 const DOCK_PANELS = ['github', 'notes'];
@@ -717,9 +935,10 @@ function renderAgents(container, agents, shells = []) {
 
 class AuthError extends Error {}
 
-async function api(method, path, body) {
+async function api(method, path, body, options = {}) {
   const res = await fetch(`/api/v1${path}`, {
     method,
+    keepalive: options.keepalive === true,
     headers: {
       Authorization: `Bearer ${state.token}`,
       ...(body ? { 'Content-Type': 'application/json' } : {}),
@@ -5169,6 +5388,9 @@ function connectEvents() {
       // A changelog.updated sent while the socket was down is lost; catch up the open panel.
       if ($('changelog').open) loadChangelog();
       if (dockShows('github')) loadGitHub();
+      catchUpNotes(msg.notesRevision, msg.notesUnreadable === true);
+    } else if (msg.type === 'notes.updated') {
+      applyServerNotes(msg.notes);
     } else if (msg.type === 'remote-access.updated') {
       state.remoteAccessUI?.updated();
     } else if (msg.type === 'news.updated') {
@@ -5457,7 +5679,7 @@ document.addEventListener('keydown', (e) => {
 addEventListener('scroll', () => { if (tipFor) hideTip(); }, true);
 addEventListener('resize', () => { if (tipFor) hideTip(); });
 $('notes-open').addEventListener('click', firstClick(toggleNotes));
-$('notes-text').addEventListener('input', saveNotes);
+$('notes-text').addEventListener('input', () => { saveNotes(); void scheduleNotesPush(); });
 addEventListener('storage', notesStored);
 // On load, and again for a page back from the back/forward cache, which may have missed another tab's notes.
 addEventListener('pageshow', refreshNotes);
@@ -5474,12 +5696,16 @@ $('news').addEventListener('close', () => {
   newsView.opener = null;
 });
 document.addEventListener('visibilitychange', () => {
-  if (document.visibilityState !== 'visible') stopDictation();
+  if (document.visibilityState !== 'visible') {
+    stopDictation();
+    flushNotes();
+  }
   if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
   if (document.visibilityState === 'visible' && dockShows('github') && githubShownView() === 'actions') loadView('actions');
   else scheduleRuns();
 });
 addEventListener('pagehide', () => {
+  flushNotes();
   state.pageAway = true;
   activityFavicon.setPaused(true);
   terminalCopy.close();

package/web/index.html

@@ -258,7 +258,7 @@
       </div>
     </section>
     <section id="notes" class="dock-panel notes-panel" role="tabpanel" aria-labelledby="notes-title" hidden>
-      <p id="notes-sub" class="dock-sub sub" aria-live="polite">Saved in this browser as you type</p>
+      <p id="notes-sub" class="dock-sub sub" aria-live="polite">Saved and synced across your browsers</p>
       <div class="dock-body">
         <textarea id="notes-text" class="notes-text" aria-labelledby="notes-title" aria-describedby="notes-sub" autocomplete="off" placeholder="Prompts, commands, to-dos: anything you want to keep at hand"></textarea>
       </div>

package/web/styles.css

@@ -743,6 +743,8 @@ a.news-link:visited { color: var(--muted); }
 }
 .notes-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
 .notes-panel .sub.warn { color: var(--warn); }
+/* Room below the status line for the field's focus ring, and for a warning that wraps to two lines. */
+.notes-panel .dock-sub { flex-shrink: 0; padding-bottom: 8px; line-height: 1.4; }
 @media (pointer: coarse) {
   /* iOS zooms in on a field with smaller text when it takes focus. */
   .notes-text { font-size: 16px; }