@oddessentials/agent-guild 0.20.0 → 0.22.0

package/web/app.js

@@ -16,6 +16,7 @@ const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
 const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
 const SOUND_KEY = 'agentGuild.sound';
+const NOTES_KEY = 'agentGuild.notes';
 const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
@@ -63,7 +64,7 @@ const state = {
 // ---- storage (may be unavailable, e.g. blocked site data) -----------------
 
 function load(key) { try { return localStorage.getItem(key); } catch { return null; } }
-function save(key, value) { try { value === null ? localStorage.removeItem(key) : localStorage.setItem(key, value); } catch { /* ignore */ } }
+function save(key, value) { try { value === null ? localStorage.removeItem(key) : localStorage.setItem(key, value); return true; } catch { return false; } }
 
 // ---- helpers --------------------------------------------------------------
 
@@ -87,6 +88,12 @@ function toast(message, ms = 5000, action = null) {
   toastTimer = setTimeout(() => { el.hidden = true; }, ms);
 }
 
+/**
+ * Handles a click, but not the second click of a double-click, which lands on whatever the first one
+ * opened or uncovered: Close over Notes, or Stop manager under a panel's Close.
+ */
+const firstClick = (run) => (e) => { if (e.detail < 2) run(); };
+
 function setConnection(kind, label) {
   const el = $('connection');
   el.className = `connection ${kind}`;
@@ -294,6 +301,99 @@ function placeAppearanceMenu() {
   menu.style.right = `${Math.max(8, Math.round(innerWidth - box.right))}px`;
 }
 
+// ---- notes ----------------------------------------------------------------
+
+/** 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',
+  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.',
+};
+/**
+ * `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.
+ * `pressedOutside`: the last press on the panel was on its backdrop.
+ */
+const notesView = { saved: '', status: 'saved', shown: 'saved', pressedOutside: false };
+
+/** 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;
+  renderNotesStatus();
+  guardLeaving();
+}
+
+/** Saves the notes on every change; emptying them removes the saved copy. */
+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 {
+    notesView.status = 'saved';
+    notesView.saved = text;
+  }
+  renderNotesStatus();
+  guardLeaving();
+}
+
+/** 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;
+  const sub = $('notes-sub');
+  sub.textContent = NOTES_STATUS[notesView.status];
+  sub.classList.toggle('warn', notesView.status !== 'saved');
+}
+
+/** Another tab saved the notes, or cleared this page's storage. */
+function notesStored(e) {
+  if (e.key === NOTES_KEY || e.key === null) refreshNotes();
+}
+
+function openNotes() {
+  hideTip();
+  refreshNotes();
+  // Saving an empty note changes nothing, but shows at once when the browser keeps nothing.
+  if (notesView.status === 'saved' && !$('notes-text').value) saveNotes();
+  const dialog = $('notes');
+  if (!dialog.open) dialog.showModal();
+  $('notes-text').focus();
+}
+
+function closeNotes() {
+  if ($('notes').open) $('notes').close();
+}
+
+/** Focus goes back to the Notes button in every browser, never to the page itself. */
+function notesClosed() {
+  $('notes-open').focus();
+}
+
+/** The second press of a double-click on Notes lands in the panel, where it must not take the focus from the text. */
+const keepFocus = (e) => { if (e.detail > 1 && e.target !== $('notes-text')) e.preventDefault(); };
+
+/** Whether a press or click on the panel was on its backdrop, outside the sheet. */
+function isOutsideNotes(e) {
+  const box = e.currentTarget.getBoundingClientRect();
+  return e.target === e.currentTarget && (e.clientX < box.left || e.clientX >= box.right || e.clientY < box.top || e.clientY >= box.bottom);
+}
+
+function notesPressed(e) {
+  notesView.pressedOutside = isOutsideNotes(e);
+}
+
+/** Only a press and a release both outside close the notes: a drag into or out of them selects text. */
+function notesClicked(e) {
+  if (notesView.pressedOutside && isOutsideNotes(e)) closeNotes();
+}
+
 // ---- upgrading the manager ------------------------------------------------
 
 function renderUpgrade() {
@@ -580,7 +680,9 @@ function renderShells(card, provider) {
     const chip = host.children[i];
     chip.setAttribute('aria-selected', String(shell.id === selected));
     chip.textContent = shell.label;
-    chip.title = `Start new sessions in ${shell.label}${shell.id === provider.defaultShell ? ', used unless you pick another' : ''}\n${shell.path}`;
+    chip.title = shell.multiplexer
+      ? `Start new sessions inside ${shell.label}. Stopping or closing one detaches it; it keeps running in ${shell.label}.\n${shell.path}`
+      : `Start new sessions in ${shell.label}${shell.id === provider.defaultShell ? ', used unless you pick another' : ''}\n${shell.path}`;
   });
 }
 
@@ -2689,6 +2791,8 @@ function accountLabel(s) {
 
 function statusText(s) {
   if (s.status === 'exited') {
+    // A multiplexer's client exits 1 when detached by Stop: its exit code tells the user nothing.
+    if (s.multiplexer) return 'Closed';
     if (s.signal) return `Exited (${s.signal})`;
     return s.exitCode === 0 || s.exitCode === null ? 'Exited' : `Exited (${s.exitCode})`;
   }
@@ -2732,8 +2836,24 @@ function resumable(s) {
     && !runningOn(s.provider.id, s.account?.id ?? 'default', id));
 }
 
+/** A stopped tmux or herdr card whose multiplexer still has its session. */
+function reattachable(s) {
+  return Boolean(s.status === 'exited' && s.multiplexer?.reattachable);
+}
+
+async function reattachSession(id) {
+  try {
+    upsertSession((await api('POST', `/sessions/${id}/reattach`)).session);
+    openPanel(id);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    toast(err.message, 8000);
+  }
+}
+
 function resumeCard(id) {
   const s = state.sessions.get(id);
+  if (s && reattachable(s)) return reattachSession(id);
   if (!s || !resumable(s)) return;
   const provider = state.providers.find((p) => p.id === s.provider.id);
   const account = provider.accounts?.find((a) => a.id === s.account?.id)?.id;
@@ -2778,14 +2898,20 @@ function updateCard(node, s) {
   renderAgents(node.querySelector('.agents'), s.agents, s.shells || []);
   paintReporting(node.querySelector('.agents-row'), s);
   node.classList.toggle('exited', s.status === 'exited');
-  node.querySelector('.stop').hidden = s.status !== 'running';
+  const stop = node.querySelector('.stop');
+  stop.hidden = s.status !== 'running';
+  stop.textContent = s.multiplexer ? 'Detach' : 'Stop';
+  stop.title = s.multiplexer ? `Detach from ${s.multiplexer.label}; it keeps running. Reattach with: ${s.multiplexer.attach}` : '';
   node.querySelector('.remove').hidden = s.status === 'running';
   const useButton = node.querySelector('.use-folder');
   useButton.hidden = !clonedPath(s);
   useButton.title = clonedPath(s) ? `Make ${s.clone.path} the working folder, so new sessions start there` : '';
   const resume = node.querySelector('.resume');
-  resume.hidden = !resumable(s);
-  resume.title = `Start ${s.provider.tool} again on this session${id ? ` (${id})` : ''} in ${s.cwd}`;
+  resume.hidden = !resumable(s) && !reattachable(s);
+  resume.textContent = s.multiplexer ? 'Reattach' : 'Resume';
+  resume.title = s.multiplexer
+    ? `Attach this card to its ${s.multiplexer.label} session again, as ${s.multiplexer.attach} would`
+    : `Start ${s.provider.tool} again on this session${id ? ` (${id})` : ''} in ${s.cwd}`;
   const modelLabel = s.model ? `, model ${modelText(s)}` : '';
   const accountName = accountLabel(s) ? `, ${accountLabel(s)} account` : '';
   const shellCount = (s.shells || []).length;
@@ -2832,11 +2958,18 @@ function confirmLeaving(event) {
 
 function guardLeaving() {
   const running = state.connected && [...state.sessions.values()].some((s) => s.status === 'running');
-  if (running) addEventListener('beforeunload', confirmLeaving);
+  // Notes that could not be saved are lost with the page.
+  const unsaved = notesView.status !== 'saved' && $('notes-text').value !== '';
+  if (running || unsaved) addEventListener('beforeunload', confirmLeaving);
   else removeEventListener('beforeunload', confirmLeaving);
 }
 
 function upsertSession(session) {
+  // An exit is final for the process it ended. A reply sent before it, such as Stop's, can
+  // arrive after the exit was announced and must not show the session running again; a
+  // reattached tmux or herdr session runs a newer process, started after that exit.
+  const known = state.sessions.get(session.id);
+  if (known?.status === 'exited' && session.status !== 'exited' && !(Date.parse(session.startedAt) > Date.parse(known.exitedAt))) return;
   state.sessions.set(session.id, session);
   renderSessions();
   noticeClone(session);
@@ -2850,17 +2983,25 @@ function dropSession(id) {
   renderSessions();
 }
 
+/** What happens to a running session when it is stopped, for the confirmation. */
+function stopNote(s) {
+  const mux = s.multiplexer;
+  return mux ? `${mux.label} keeps running it. Reattach it from its card, or in a terminal with: ${mux.attach}` : `The ${s.provider.tool} process will be ended.`;
+}
+
 async function stopSession(id) {
   const s = state.sessions.get(id);
   if (!s || s.status !== 'running') return;
-  if (!confirm(`Stop "${s.name}"? The ${s.provider.tool} process will be ended.`)) return;
+  if (!confirm(`${s.multiplexer ? 'Detach' : 'Stop'} "${s.name}"? ${stopNote(s)}`)) return;
   try { upsertSession((await api('POST', `/sessions/${id}/stop`)).session); } catch (err) { toast(err.message); }
 }
 
 async function removeSession(id) {
   const s = state.sessions.get(id);
   if (!s) return;
-  if (s.status === 'running' && !confirm(`"${s.name}" is still running. End it and remove it?`)) return;
+  // The card goes, so only the terminal can reattach it.
+  const question = s.multiplexer ? `Detach it and remove it? ${s.multiplexer.label} keeps running it. Reattach it in a terminal with: ${s.multiplexer.attach}` : 'End it and remove it?';
+  if (s.status === 'running' && !confirm(`"${s.name}" is still running. ${question}`)) return;
   try { await api('DELETE', `/sessions/${id}`); dropSession(id); } catch (err) { toast(err.message); }
 }
 
@@ -3131,6 +3272,23 @@ function suppressQueryReplies(term) {
   }
 }
 
+/** The text an OSC 52 sequence ("c;<base64>") asks to copy, or null for a clipboard query or anything unreadable. */
+function osc52Text(data) {
+  const payload = data.slice(data.indexOf(';') + 1);
+  if (!data.includes(';') || !payload || payload === '?' || payload.length > 4 * 1024 * 1024) return null;
+  try {
+    return new TextDecoder().decode(Uint8Array.from(atob(payload), (c) => c.charCodeAt(0)));
+  } catch {
+    return null;
+  }
+}
+
+/** The line a terminal shows when its process ends. A tmux or herdr client's exit code says nothing about the session it showed. */
+function exitLine(s, { exitCode, signal }) {
+  if (s?.multiplexer) return '[closed]';
+  return `[process exited with ${signal ? `signal ${signal}` : `code ${exitCode ?? 0}`}]`;
+}
+
 class TerminalView {
   constructor(sessionId) {
     this.id = sessionId;
@@ -3141,6 +3299,8 @@ class TerminalView {
       fontSize: coarsePointer.matches ? 14 : 13,
       scrollback: 5000,
       macOptionIsMeta: true,
+      // Option-drag selects text even while a program reads the mouse, as Shift-drag does elsewhere.
+      macOptionClickForcesSelection: true,
       theme: TERMINAL_THEME,
     });
     this.fit = new window.FitAddon.FitAddon();
@@ -3148,6 +3308,13 @@ class TerminalView {
     this.term.loadAddon(new window.WebLinksAddon.WebLinksAddon((_e, uri) => window.open(uri, '_blank', 'noopener,noreferrer')));
     this.term.attachCustomKeyEventHandler((e) => this.handleKey(e));
     suppressQueryReplies(this.term);
+    // Programs copy with OSC 52: tmux's copy mode, and herdr where it cannot reach the
+    // system clipboard itself. Only the open terminal may write it; nothing reads it.
+    this.term.parser.registerOscHandler(52, (data) => {
+      const text = osc52Text(data);
+      if (text !== null && state.activeId === this.id) navigator.clipboard?.writeText(text).catch(() => {});
+      return true;
+    });
     this.term.onData((data) => {
       this.send({ type: 'input', data });
     });
@@ -3198,11 +3365,9 @@ class TerminalView {
       case 'data':
         this.term.write(msg.data);
         break;
-      case 'exit': {
-        const how = msg.signal ? `signal ${msg.signal}` : `code ${msg.exitCode ?? 0}`;
-        this.term.write(`\r\n\x1b[2m[process exited with ${how}]\x1b[0m\r\n`);
+      case 'exit':
+        this.term.write(`\r\n\x1b[2m${exitLine(state.sessions.get(this.id), msg)}\x1b[0m\r\n`);
         break;
-      }
       default:
         break;
     }
@@ -3320,7 +3485,7 @@ function updatePanel() {
   $('panel-sub').title = modelTitle(s);
   renderAgents($('panel-agents'), s.agents, s.shells || []);
   const stop = $('panel-stop');
-  stop.textContent = s.status === 'running' ? 'Stop' : 'Remove';
+  stop.textContent = s.status !== 'running' ? 'Remove' : s.multiplexer ? 'Detach' : 'Stop';
 }
 
 // ---- stopping the manager -------------------------------------------------
@@ -3698,6 +3863,16 @@ document.addEventListener('keydown', (e) => {
 }, true);
 addEventListener('scroll', () => { if (tipFor) hideTip(); }, true);
 addEventListener('resize', () => { if (tipFor) hideTip(); });
+$('notes-open').addEventListener('click', firstClick(openNotes));
+$('notes-close').addEventListener('click', firstClick(closeNotes));
+$('notes').addEventListener('mousedown', keepFocus);
+$('notes').addEventListener('pointerdown', notesPressed);
+$('notes').addEventListener('click', notesClicked);
+$('notes').addEventListener('close', notesClosed);
+$('notes-text').addEventListener('input', saveNotes);
+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);
 $('news-all').addEventListener('click', openNews);
 $('news-close').addEventListener('click', closeNews);
 $('news-fresh').addEventListener('click', showFreshNews);
@@ -3780,8 +3955,8 @@ $('models-more').addEventListener('click', () => {
   renderModels();
   $('models-list').children[before]?.querySelector('.model-toggle')?.focus();
 });
-$('stop-manager').addEventListener('click', () => stopManager());
-$('restart-manager').addEventListener('click', () => stopManager({ restart: true }));
+$('stop-manager').addEventListener('click', firstClick(() => stopManager()));
+$('restart-manager').addEventListener('click', firstClick(() => stopManager({ restart: true })));
 $('copy-command').addEventListener('click', copyCommand);
 $('upgrade').addEventListener('click', upgradeManager);
 $('appearance-menu').addEventListener('change', (e) => {

package/web/index.html

@@ -41,6 +41,7 @@
           <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>
       </div>
+      <button id="notes-open" class="btn notes-open" type="button" aria-haspopup="dialog">Notes</button>
       <button id="restart-manager" class="btn restart-manager" type="button" hidden>Restart manager</button>
       <button id="stop-manager" class="btn danger stop-manager" type="button" hidden title="Stop the session manager. This ends every session.">Stop manager</button>
     </div>
@@ -179,6 +180,19 @@
     <p id="changelog-status" class="news-status" hidden></p>
   </dialog>
 
+  <dialog id="notes" class="news-panel notes-panel" aria-labelledby="notes-title">
+    <div class="news-bar">
+      <div class="news-heading">
+        <h2 id="notes-title">Notes</h2>
+        <p id="notes-sub" class="sub" aria-live="polite">Saved in this browser as you type</p>
+      </div>
+      <button id="notes-close" class="btn" type="button">Close</button>
+    </div>
+    <div class="news-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>
+  </dialog>
+
   <dialog id="history" class="models history" aria-labelledby="history-title">
     <div class="models-bar">
       <span id="history-icon" class="provider-icon small"></span>

package/web/skins/gnomeland/skin.css

@@ -243,7 +243,7 @@
   }
   .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(233, 196, 122, 0.6), 0 5px 16px rgba(40, 70, 30, 0.35); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--panel-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--panel-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--panel-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -362,7 +362,7 @@
   .btn.primary { border-color: #6a8f3a; background: linear-gradient(#55924a, #35662f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(233, 196, 122, 0.3), 0 0 16px rgba(110, 170, 80, 0.3); }
   .btn.danger { color: #f59a8c; }
   .btn.danger:hover { border-color: #b8402f; box-shadow: 0 0 12px rgba(240, 123, 106, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #4a3824; background: rgba(10, 7, 4, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #4a3824; background: rgba(10, 7, 4, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(6, 4, 2, 0.66); }
   .terminal-panel { border-color: #5a4226; box-shadow: 0 0 0 1px rgba(233, 196, 122, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/skins/grove/skin.css

@@ -244,7 +244,7 @@
   }
   .btn.primary:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(45, 107, 69, 0.36); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--paper-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--paper-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--paper-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -371,7 +371,7 @@
   .btn.primary { background: linear-gradient(135deg, #4a8c5e, #2a6340); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 18px rgba(80, 160, 105, 0.35); }
   .btn.danger { color: #ff9a8e; }
   .btn.danger:hover { border-color: #b8443a; box-shadow: 0 0 12px rgba(240, 122, 108, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #2e4a3d; background: rgba(4, 10, 8, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #2e4a3d; background: rgba(4, 10, 8, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(2, 6, 5, 0.66); }
   .terminal-panel { border-color: #2e4a3d; box-shadow: 0 0 0 1px rgba(140, 210, 160, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/skins/guild/skin.css

@@ -376,7 +376,7 @@
   .btn.primary:hover { border-color: var(--gold); filter: brightness(1.08); }
   .btn.danger { color: #ff9a94; }
   .btn.danger:hover { border-color: #b8524d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(239, 107, 102, 0.3); }
-  .cwd input, .auth input { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
+  .cwd input, .auth input, .notes-text { border-color: #4a3d25; background: rgba(12, 13, 17, 0.8); }
   .auth {
     background: var(--card-bg);
     border: 1px solid #4a3d25; box-shadow: inset 0 0 0 1px rgba(232, 196, 124, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35);
@@ -480,7 +480,7 @@
   }
   .btn.primary:hover { border-color: #b8892f; filter: brightness(1.08); }
   .btn.danger:hover { border-color: #c4625d; }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input {
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .notes-text {
     border-color: #dccba5; background: #fffdf8; box-shadow: inset 0 1px 2px rgba(70, 48, 12, 0.06);
   }
   .auth { border-color: #e4d6b6; box-shadow: var(--card-shadow); }

package/web/skins/orbital/skin.css

@@ -246,7 +246,7 @@
   }
   .btn.primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 20px rgba(122, 79, 232, 0.4); }
   .btn.danger:hover { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { background: var(--glass-strong); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { background: var(--glass-strong); }
 
   .models, .news-panel, .auth, .news-latest, .appearance-menu { background: var(--glass-strong); backdrop-filter: blur(16px); }
   .models, .news-panel { box-shadow: var(--dialog-shadow); }
@@ -367,7 +367,7 @@
   .btn.primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 18px rgba(106, 92, 240, 0.45); }
   .btn.danger { color: #ff8c9c; }
   .btn.danger:hover { border-color: #c23a52; box-shadow: 0 0 12px rgba(255, 107, 129, 0.3); }
-  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select { border-color: #26355c; background: rgba(4, 7, 16, 0.7); }
+  .cwd input, .auth input, .history-tools input[type="search"], .history-form input, .github-fields input, .github-fields select, .notes-text { border-color: #26355c; background: rgba(4, 7, 16, 0.7); }
 
   .models::backdrop, .news-panel::backdrop { background: rgba(2, 4, 10, 0.66); }
   .terminal-panel { border-color: #2a3a66; box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.7); }

package/web/styles.css

@@ -29,6 +29,7 @@
   --icon-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'/%3E%3C/svg%3E");
   --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 10.8v6.2' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='7.3' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
   --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9' cy='5.5' r='1.9'/%3E%3Ccircle cx='15' cy='5.5' r='1.9'/%3E%3Ccircle cx='9' cy='12' r='1.9'/%3E%3Ccircle cx='15' cy='12' r='1.9'/%3E%3Ccircle cx='9' cy='18.5' r='1.9'/%3E%3Ccircle cx='15' cy='18.5' r='1.9'/%3E%3C/svg%3E");
+  --icon-notes: 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='M5 4.5h14v9.5l-5.5 5.5H5z'/%3E%3Cpath d='M13.5 19.5V14H19M8.5 9h7M8.5 12.5h4'/%3E%3C/svg%3E");
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-size: 15px;
   color-scheme: light;
@@ -336,13 +337,14 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 .btn.danger { color: var(--danger); }
 .btn.danger:hover { border-color: var(--danger); }
 .btn:disabled { opacity: 0.6; cursor: progress; }
-.stop-manager, .restart-manager, .appearance, .upgrade { white-space: nowrap; }
-.appearance::before, .appearance-menu .choice > span::before {
+.stop-manager, .restart-manager, .appearance, .notes-open, .upgrade { white-space: nowrap; }
+.appearance::before, .notes-open::before, .appearance-menu .choice > span::before {
   content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em;
   background: currentColor; mask: var(--icon-sun) center / contain no-repeat;
 }
 :root[data-theme="dark"] .appearance::before, .appearance-menu .choice > .mode-dark::before { mask-image: var(--icon-moon); }
 .appearance-menu .choice > .sound-alerts::before { mask-image: var(--icon-sound); }
+.notes-open::before { mask-image: var(--icon-notes); }
 .appearance::after { margin-left: 0.45em; transform: rotate(90deg); transition: transform 0.15s var(--ease); }
 .appearance:has(+ :popover-open)::after { transform: rotate(-90deg); }
 .appearance-menu {
@@ -547,6 +549,20 @@ a.news-link:visited { color: var(--muted); }
 .changelog-changes li::marker { color: var(--muted); }
 .changelog-changes code { font-size: 0.8rem; padding: 0 4px; border-radius: 4px; background: var(--surface-2); }
 
+/* Notes: the News side sheet, holding one text field that skins style with their other fields. */
+.notes-panel .news-body { display: flex; flex-direction: column; padding-top: 12px; }
+.notes-text {
+  flex: 1; min-height: 8em; margin: 0; padding: 10px 12px; resize: none;
+  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
+  font: inherit; font-size: 0.9rem; line-height: 1.55;
+}
+.notes-text:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
+.notes-panel .sub.warn { color: var(--warn); }
+@media (pointer: coarse) {
+  /* iOS zooms in on a field with smaller text when it takes focus. */
+  .notes-text { font-size: 16px; }
+}
+
 .history-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px 0; }
 .history-tools input[type="search"] {
   flex: 1 1 220px; min-width: 0; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--border);