@oddessentials/agent-guild 0.21.0 → 0.23.0

package/README.md

@@ -124,6 +124,11 @@ vX.Y.Z** switches over when you are ready. The version badge opens
 
 <img src="docs/images/whats-new.webp" alt="The What's new panel listing the release notes of each version">
 
+**Keep notes at hand.** **Notes** in the top bar opens a notepad for prompts,
+commands and to-dos, even while a terminal is open. 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.
+
 **Appearance.** The Appearance menu in the top bar picks a skin and light or
 dark mode, without a reload. **Guild** is the default fantasy look;
 **Professional** is a plain business look with no characters; **Orbital**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.21.0",
+  "version": "0.23.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/web/app.js

@@ -16,6 +16,8 @@ const GITHUB_ACCOUNT_KEY = 'agentGuild.githubAccount';
 const CLONE_PARENT_KEY = 'agentGuild.cloneParent';
 const SESSION_ORDER_KEY = 'agentGuild.sessionOrder';
 const SOUND_KEY = 'agentGuild.sound';
+const VOICE_KEY = 'agentGuild.voice';
+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 +65,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 +89,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}`;
@@ -290,8 +298,108 @@ function placeAppearanceMenu() {
   const menu = $('appearance-menu');
   if (!menu.matches(':popover-open')) return;
   const box = $('appearance').getBoundingClientRect();
-  menu.style.top = `${Math.round(box.bottom + 6)}px`;
+  const top = Math.round(box.bottom + 6);
+  menu.style.top = `${top}px`;
+  menu.style.maxHeight = `${innerHeight - top - 8}px`;
+  menu.style.left = 'auto';
   menu.style.right = `${Math.max(8, Math.round(innerWidth - box.right))}px`;
+  if (menu.getBoundingClientRect().left < 8) {
+    menu.style.right = 'auto';
+    menu.style.left = `${Math.max(8, Math.round(box.left))}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 ------------------------------------------------
@@ -2858,7 +2966,9 @@ 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);
 }
 
@@ -3264,6 +3374,7 @@ class TerminalView {
         this.term.write(msg.data);
         break;
       case 'exit':
+        if (dictation?.id === this.id) stopDictation();
         this.term.write(`\r\n\x1b[2m${exitLine(state.sessions.get(this.id), msg)}\x1b[0m\r\n`);
         break;
       default:
@@ -3358,6 +3469,7 @@ class TerminalView {
 
 function openPanel(id) {
   if (!state.sessions.has(id)) return;
+  if (dictation && dictation.id !== id) stopDictation();
   if (state.activeId && state.activeId !== id) state.views.get(state.activeId)?.unmount();
   state.activeId = id;
   let view = state.views.get(id);
@@ -3368,12 +3480,15 @@ function openPanel(id) {
 }
 
 function closePanel() {
+  stopDictation();
   if (state.activeId) state.views.get(state.activeId)?.unmount();
   state.activeId = null;
   $('terminal-panel').hidden = true;
+  renderVoice();
 }
 
 function updatePanel() {
+  renderVoice();
   const s = state.sessions.get(state.activeId);
   if (!s) return;
   paintProviderIcon($('panel-icon'), s.provider);
@@ -3386,6 +3501,157 @@ function updatePanel() {
   stop.textContent = s.status !== 'running' ? 'Remove' : s.multiplexer ? 'Detach' : 'Stop';
 }
 
+// ---- voice input ----------------------------------------------------------
+
+const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const VOICE_RETRY_DELAYS = [250, 500, 1000];
+let dictation = null;
+
+function voiceOn() {
+  return Boolean(Recognition) && load(VOICE_KEY) === 'on';
+}
+
+function renderVoice() {
+  if (dictation) keepDictating(dictation);
+  $('voice-choice').hidden = !Recognition;
+  $('voice').checked = voiceOn();
+  $('panel-voice').hidden = !voiceOn() || state.sessions.get(state.activeId)?.status !== 'running';
+  $('panel-voice').setAttribute('aria-pressed', String(Boolean(dictation)));
+}
+
+function changeVoice(input) {
+  save(VOICE_KEY, input.checked ? 'on' : null);
+  renderVoice();
+}
+
+/** Dictated words as terminal input: one line of text, no control characters, so nothing is ever submitted. */
+function dictatedText(text, first) {
+  const clean = text.replace(/[\x00-\x1f\x7f-\x9f]+/g, ' ').replace(/\s+/g, ' ').trim();
+  return clean && (first ? clean : ` ${clean}`);
+}
+
+function canDictate(current) {
+  const session = state.sessions.get(current.id);
+  return voiceOn() && state.activeId === current.id && session?.status === 'running'
+    && session.startedAt === current.startedAt && state.views.has(current.id)
+    && !state.pageAway && !state.stopping && document.visibilityState === 'visible'
+    && !$('app').hidden && !$('terminal-panel').hidden;
+}
+
+/** Every async continuation belongs to one explicit click and one run of the session. */
+function keepDictating(current) {
+  if (dictation !== current) return false;
+  if (canDictate(current)) return true;
+  stopDictation();
+  return false;
+}
+
+async function startDictation() {
+  const id = state.activeId;
+  const session = state.sessions.get(id);
+  if (!session || dictation) return;
+  const current = {
+    id, startedAt: session.startedAt, lang: navigator.language || 'en-US',
+    android: /Android/i.test(navigator.userAgent || ''), processLocally: false,
+    rec: null, timer: null, first: true, emptyRetries: 0,
+  };
+  if (!canDictate(current)) return;
+  // Register before awaiting availability so another click or leaving the terminal cancels startup too.
+  dictation = current;
+  renderVoice();
+  state.views.get(id)?.term.focus();
+  try {
+    // Browsers without this API start in the click handler, without an unnecessary await.
+    if (typeof Recognition.available === 'function') {
+      current.processLocally = await Recognition.available({ langs: [current.lang], processLocally: true }) === 'available';
+    }
+  } catch { /* cloud recognition */ }
+  listenForDictation(current);
+}
+
+function listenForDictation(current) {
+  if (!keepDictating(current)) return;
+  let rec;
+  try {
+    rec = new Recognition();
+    current.rec = rec;
+    rec.lang = current.lang;
+    rec.continuous = !current.android;
+    rec.interimResults = true;
+    if (current.processLocally) rec.processLocally = true;
+  } catch {
+    stopDictation();
+    toast('Voice input could not start.');
+    return;
+  }
+  // A new recognizer per Android phrase avoids cumulative transcripts from continuous mode.
+  let committed = 0;
+  let heard = false;
+  const preview = $('voice-preview');
+  rec.onresult = (e) => {
+    if (current.rec !== rec || !keepDictating(current)) return;
+    let interim = '';
+    for (let i = Math.max(e.resultIndex, committed); i < e.results.length; i += 1) {
+      const result = e.results[i];
+      if (!result.isFinal) { interim += result[0].transcript; continue; }
+      committed = i + 1;
+      const text = dictatedText(result[0].transcript, current.first);
+      if (!text) continue;
+      state.views.get(current.id)?.term.paste(text);
+      current.first = false;
+      current.emptyRetries = 0;
+      heard = true;
+    }
+    preview.textContent = interim.trim();
+    preview.hidden = !preview.textContent;
+  };
+  rec.onerror = (e) => {
+    if (current.rec !== rec || !keepDictating(current)) return;
+    if (current.android && e.error === 'no-speech') return; // bounded retry after end
+    stopDictation();
+    if (e.error === 'not-allowed' || e.error === 'service-not-allowed') toast('Voice input needs permission to use the microphone.');
+    else if (e.error === 'network') toast('Voice input could not reach the speech service. Check your connection.');
+    else if (e.error === 'audio-capture') toast('No microphone was found.');
+    else if (e.error === 'language-not-supported') toast(`Voice input does not support ${current.lang}.`);
+    else if (e.error !== 'aborted' && e.error !== 'no-speech') toast('Voice input stopped. Press Dictate to try again.');
+  };
+  rec.onend = () => {
+    if (current.rec !== rec || !keepDictating(current)) return;
+    current.rec = null;
+    preview.hidden = true;
+    preview.textContent = '';
+    if (!current.android) return stopDictation();
+    if (!heard && current.emptyRetries >= VOICE_RETRY_DELAYS.length) {
+      stopDictation();
+      toast('Voice input stopped after repeated silence. Press Dictate to try again.');
+      return;
+    }
+    const delay = heard ? VOICE_RETRY_DELAYS[0] : VOICE_RETRY_DELAYS[current.emptyRetries++];
+    current.timer = setTimeout(() => {
+      current.timer = null;
+      listenForDictation(current);
+    }, delay);
+  };
+  try {
+    rec.start();
+  } catch {
+    if (current.rec !== rec || !keepDictating(current)) return;
+    stopDictation();
+    toast('Voice input could not start.');
+  }
+}
+
+function stopDictation() {
+  const current = dictation;
+  if (!current) return;
+  dictation = null;
+  clearTimeout(current.timer);
+  try { current.rec?.abort(); } catch { /* already ended */ }
+  $('voice-preview').hidden = true;
+  $('voice-preview').textContent = '';
+  $('panel-voice').setAttribute('aria-pressed', 'false');
+}
+
 // ---- stopping the manager -------------------------------------------------
 
 /**
@@ -3641,6 +3907,7 @@ let newsTimer;
 
 function showAuth(message = '') {
   managerLoss.cancel();
+  closePanel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3692,6 +3959,13 @@ $('auth-form').addEventListener('submit', (e) => {
   boot();
 });
 $('panel-close').addEventListener('click', closePanel);
+$('panel-voice').addEventListener('click', () => {
+  if (dictation) {
+    const { id } = dictation;
+    stopDictation();
+    state.views.get(id)?.term.focus();
+  } else startDictation();
+});
 $('models-close').addEventListener('click', closeModels);
 $('history-close').addEventListener('click', closeHistory);
 $('history').addEventListener('click', (e) => { if (e.target === $('history')) closeHistory(); });
@@ -3761,6 +4035,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);
@@ -3774,10 +4058,12 @@ $('news').addEventListener('close', () => {
   newsView.opener = null;
 });
 document.addEventListener('visibilitychange', () => {
+  if (document.visibilityState !== 'visible') stopDictation();
   if (document.visibilityState === 'visible' && state.connected && Date.now() - newsLoadedAt > 60000) loadNews();
 });
 addEventListener('pagehide', () => {
   state.pageAway = true;
+  stopDictation();
   managerLoss.cancel();
   state.eventsSocket?.close();
 });
@@ -3805,6 +4091,7 @@ $('changelog-restart').addEventListener('click', () => {
 addEventListener('storage', (e) => {
   if (e.key === CHANGELOG_SEEN_KEY) renderVersion();
   else if (e.key === SOUND_KEY) { $('sound').checked = soundOn(); prepareSounds(); }
+  else if (e.key === VOICE_KEY) renderVoice();
   // Another tab reordered the cards.
   else if (e.key === SESSION_ORDER_KEY && !drag) arrange(parseOrder(e.newValue));
 });
@@ -3843,14 +4130,15 @@ $('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) => {
   if (e.target.name === 'skin') changeSkin(e.target);
   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);
 });
 $('appearance-menu').addEventListener('toggle', (e) => {
   if (e.newState !== 'open') return;
@@ -3885,6 +4173,7 @@ $('providers').addEventListener('pointerout', (e) => {
 applyTheme(currentTheme());
 renderSkinChoices();
 $('sound').checked = soundOn();
+renderVoice();
 // Follow the system setting until the user picks a theme.
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
   if (!load(THEME_KEY)) applyTheme(e.matches ? 'dark' : 'light');

package/web/index.html

@@ -40,7 +40,13 @@
           <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="voice-choice" hidden>
+          <legend>Voice</legend>
+          <label class="choice"><input id="voice" type="checkbox" name="voice"><span class="voice-input">Voice input</span></label>
+          <p class="voice-note">Adds a Dictate button to terminals. Your browser may send the audio to its maker, such as Google or Microsoft, to turn it into text. Nothing is heard until you press Dictate, and Enter is never pressed for you.</p>
+        </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>
@@ -118,11 +124,13 @@
         <div id="panel-agents" class="agents"></div>
       </div>
       <div class="panel-actions">
+        <button id="panel-voice" class="btn voice" type="button" hidden aria-pressed="false" title="Speak into this terminal. Review the text, then press Enter yourself.">Dictate</button>
         <button id="panel-stop" class="btn danger" type="button">Stop</button>
         <button id="panel-close" class="btn" type="button" title="Hide the terminal. The session keeps running.">Hide</button>
       </div>
     </div>
     <div id="terminal-host" class="terminal-host"></div>
+    <div id="voice-preview" class="voice-preview" hidden aria-live="polite"></div>
   </div>
 
   <dialog id="models" class="models" aria-labelledby="models-title">
@@ -179,6 +187,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

@@ -22,6 +22,7 @@
   --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
   --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-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");
@@ -29,6 +30,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,19 +338,22 @@ 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); }
+.appearance-menu .choice > .voice-input::before { mask-image: var(--icon-mic); }
+.voice-note { margin: 0 8px 6px; max-width: 26ch; color: var(--muted); font-size: 0.75rem; line-height: 1.35; }
+.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 {
   position: fixed; inset: auto; margin: 0; min-width: 190px; padding: 6px; display: none;
   border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); font-size: 0.85rem;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); font-size: 0.85rem; overflow-y: auto;
 }
 .appearance-menu:popover-open { display: grid; gap: 4px; animation: fade-in 0.12s var(--ease); }
 .appearance-menu fieldset { margin: 0; padding: 0; border: 0; display: grid; }
@@ -393,10 +398,24 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
   display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
   background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap;
 }
-.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
+.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 16rem; }
 .panel-title .title { font-weight: 600; }
 .panel-title .sub { color: var(--muted); font-size: 0.78rem; }
 .panel-actions { display: flex; gap: 8px; }
+.btn.voice { white-space: nowrap; }
+.btn.voice::before {
+  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.35em; vertical-align: -0.15em;
+  background: currentColor; mask: var(--icon-mic) center / contain no-repeat;
+}
+.btn.voice[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); }
+.btn.voice[aria-pressed="true"]::before { animation: voice-pulse 1.2s ease-in-out infinite; }
+@keyframes voice-pulse { 50% { opacity: 0.35; } }
+.voice-preview {
+  position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: 30%; overflow-y: auto; z-index: 1;
+  padding: 8px 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
+  background: var(--surface); color: var(--muted); font-size: clamp(0.8rem, 1.6vw, 0.95rem); font-style: italic;
+  overflow-wrap: anywhere; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); pointer-events: none;
+}
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
 @media (pointer: coarse) {
@@ -547,6 +566,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);
@@ -674,6 +707,7 @@ a.news-link:visited { color: var(--muted); }
   .model-name::before, .provider .copies summary::before, .appearance::after, .btn, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
   .github-waiting::before, body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after { animation: none; }
   .btn:active:not(:disabled) { transform: none; }
+  .btn.voice[aria-pressed="true"]::before { animation: none; }
   .drag-handle, .session-grid::before, .session-grid.reordering::before,
   .session-grid > .session-card.dragging, .session-grid > .session-card.settling { transition: none; }
 }