@oddessentials/agent-guild 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.22.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,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 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);
@@ -297,8 +298,15 @@ 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 ----------------------------------------------------------------
@@ -3366,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:
@@ -3460,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);
@@ -3470,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);
@@ -3488,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 -------------------------------------------------
 
 /**
@@ -3743,6 +3907,7 @@ let newsTimer;
 
 function showAuth(message = '') {
   managerLoss.cancel();
+  closePanel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3794,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(); });
@@ -3886,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();
 });
@@ -3917,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));
 });
@@ -3963,6 +4138,7 @@ $('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;
@@ -3997,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,6 +40,11 @@
           <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>
@@ -119,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">

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");
@@ -344,13 +345,15 @@ main { max-width: 1200px; margin: 0 auto; padding: 26px 16px 56px; display: grid
 }
 :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; }
@@ -395,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) {
@@ -690,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; }
 }