@oddessentials/agent-guild 0.22.0 → 0.24.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 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 ----------------------------------------------------------------
@@ -751,6 +759,8 @@ let dealt = false;
 
 function renderProviders() {
   const list = $('providers');
+  const focused = document.activeElement;
+  const focusKey = focused?.dataset?.muxFocus;
   const tpl = $('provider-template');
   list.replaceChildren(...state.providers.map((provider) => {
     const node = tpl.content.firstElementChild.cloneNode(true);
@@ -790,11 +800,20 @@ function renderProviders() {
     renderVendorLinks(node, provider);
     renderAccounts(node, provider);
     renderShells(node, provider);
+    renderMultiplexers(node, provider);
     renderUsage(node, provider);
     renderReportingSetup(node, provider);
     renderModelStats(node, provider);
     return node;
   }));
+  if (focusKey) {
+    const controls = [...list.querySelectorAll('[data-mux-focus]')];
+    const fallback = focusKey.split(':').slice(0, 2).join(':') + ':copies';
+    const replacement = controls.find((node) => node.dataset.muxFocus === focusKey && !node.disabled)
+      || controls.find((node) => node.dataset.muxFocus === fallback && !node.closest('[hidden]'))
+      || controls.find((node) => node.dataset.muxFocus === focusKey.split(':')[0] + ':multiplexers');
+    replacement?.focus({ preventScroll: true });
+  }
   if (!dealt && state.providers.length) {
     dealt = true;
     if (!reducedMotion.matches) list.classList.add('deal');
@@ -803,19 +822,21 @@ function renderProviders() {
 
 const openCopies = new Set();
 
-function renderCopies(box, provider, card) {
+function renderCopies(box, provider, card, actions = null) {
   const installs = provider.installs || [];
   const warnings = provider.warnings || [];
-  box.hidden = warnings.length === 0 && !installs.some((i) => i.uninstall);
+  box.hidden = actions ? installs.length === 0 : warnings.length === 0 && !installs.some((i) => i.uninstall);
   if (box.hidden) return;
   box.classList.toggle('warned', warnings.length > 0);
   const inUse = installs.some((i) => i.active);
   const older = installs.some((i) => i.newer);
-  box.querySelector('summary').textContent = !inUse
+  box.querySelector('summary').textContent = installs.every((i) => i.partial) ? 'Incomplete installation' : !inUse
     ? 'A copy exists off PATH'
     : installs.length === 1 ? 'Installation' : `${installs.length} copies installed${older ? ' · older copy in use' : ''}`;
-  box.open = openCopies.has(provider.id);
-  box.addEventListener('toggle', () => (box.open ? openCopies.add(provider.id) : openCopies.delete(provider.id)));
+  const key = actions?.key || provider.id;
+  box.open = openCopies.has(key);
+  box.addEventListener('toggle', () => (box.open ? openCopies.add(key) : openCopies.delete(key)));
+  if (actions) box.querySelector('summary').dataset.muxFocus = key + ':copies';
   const line = (className, ...content) => {
     const span = document.createElement('span');
     span.className = className;
@@ -834,6 +855,17 @@ function renderCopies(box, provider, card) {
     const where = line('copy-path', install.displayPath);
     where.title = install.path;
     item.append(head, where);
+    if (actions && install.updateCommand && (install.updateAvailable || install.versionStatus === 'failed')) {
+      const update = document.createElement('button');
+      update.type = 'button';
+      update.className = 'btn copy-update';
+      update.textContent = 'Update';
+      update.title = `Run ${install.updateCommand}`;
+      update.disabled = actions.busy;
+      update.dataset.muxFocus = key + ':update:' + install.path;
+      update.addEventListener('click', () => actions.update(install));
+      head.append(update);
+    } else if (actions && install.updateGuidance) item.append(line('copy-remove', install.updateGuidance));
     if (install.uninstall) {
       const button = document.createElement('button');
       button.type = 'button';
@@ -843,7 +875,11 @@ function renderCopies(box, provider, card) {
       button.title = install.uninstall.command
         ? [`Runs ${install.uninstall.command}`, ...install.uninstall.remove.map((p) => `then deletes ${p}`)].join('\n')
         : ['Deletes', ...install.uninstall.remove].join('\n');
-      button.addEventListener('click', () => uninstallCopy(provider, card, install));
+      if (actions) {
+        button.disabled = actions.busy;
+        button.dataset.muxFocus = key + ':uninstall:' + install.path;
+      }
+      button.addEventListener('click', () => actions ? actions.uninstall(install) : uninstallCopy(provider, card, install));
       head.append(button);
     } else {
       item.append(line('copy-remove', install.uninstallGuidance));
@@ -852,6 +888,102 @@ function renderCopies(box, provider, card) {
   }));
 }
 
+const openMultiplexers = new Set();
+
+function renderMultiplexers(card, provider) {
+  const host = card.querySelector('.multiplexers');
+  const tools = provider.multiplexers || [];
+  host.hidden = tools.length === 0;
+  if (host.hidden) return;
+  host.open = openMultiplexers.has(provider.id);
+  host.querySelector('summary').dataset.muxFocus = provider.id + ':multiplexers';
+  host.addEventListener('toggle', () => host.open ? openMultiplexers.add(provider.id) : openMultiplexers.delete(provider.id));
+  const refresh = host.querySelector('.multiplexer-refresh');
+  refresh.dataset.muxFocus = provider.id + ':refresh';
+  refresh.addEventListener('click', async () => {
+    refresh.disabled = true;
+    try {
+      const result = await api('POST', '/providers/reload', {});
+      state.providers = result.providers;
+      renderProviders();
+    } catch (err) {
+      if (err instanceof AuthError) showAuth(err.message);
+      else toast(err.message, 10000);
+    } finally { refresh.disabled = false; }
+  });
+  host.querySelector('.multiplexer-list').replaceChildren(...tools.map((tool) => {
+    const row = document.createElement('section');
+    row.className = 'multiplexer-row';
+    const title = document.createElement('strong');
+    title.textContent = tool.tool;
+    row.append(title);
+    const key = provider.id + ':' + tool.id;
+    if (tool.installable) {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'btn primary';
+      button.textContent = 'Install';
+      button.disabled = tool.busy;
+      button.title = tool.installCommand || '';
+      button.dataset.muxFocus = key + ':install';
+      button.addEventListener('click', () => manageMultiplexer(provider, tool, 'install'));
+      row.append(button);
+    }
+    const note = document.createElement('p');
+    note.className = 'multiplexer-note';
+    note.textContent = [
+      tool.busy ? 'Installation operation in progress…' : tool.guidance,
+      tool.pendingCards ? `${tool.pendingCards} detached ${tool.tool} card(s) are waiting to be restored. Check the installation or remove finished cards, then Refresh.` : '',
+      installNote(tool),
+    ].filter(Boolean).join(' ');
+    if (note.textContent) row.append(note);
+    const copies = document.createElement('details');
+    copies.className = 'copies';
+    copies.append(document.createElement('summary'), document.createElement('ul'));
+    row.append(copies);
+    renderCopies(copies, { ...tool, id: key, warnings: [] }, card, {
+      key, busy: tool.busy,
+      update: (copy) => manageMultiplexer(provider, tool, 'update', copy),
+      uninstall: (copy) => {
+        const plan = copy.uninstall;
+        const lines = [
+          `Uninstall ${tool.tool} from ${copy.displayPath}?`,
+          plan.command && `Runs: ${plan.command}`,
+          ...plan.remove.map((p) => `Removes: ${p}`),
+          plan.pathEntries && 'Removes only this installation’s entries from your user PATH.',
+          'Your settings and session data are kept.',
+        ].filter(Boolean);
+        if (confirm(lines.join('\n'))) return manageMultiplexer(provider, tool, 'uninstall', copy);
+      },
+    });
+    return row;
+  }));
+}
+
+async function manageMultiplexer(provider, tool, kind, copy = null, force = false) {
+  // Busy state also comes from the manager, covering other tabs and refreshes.
+  tool.busy = true;
+  renderProviders();
+  try {
+    const { session } = await api('POST', `/providers/${provider.id}/multiplexers/${tool.id}/${kind}`, { path: copy?.path, force });
+    upsertSession(session);
+    openPanel(session.id);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    if (err.code === 'multiplexer_in_use' && !force) {
+      const waiting = err.pending ? ` ${err.pending} detached cards are also waiting for the tool.` : '';
+      if (confirm(`${err.message}${waiting} Continue anyway?`)) return manageMultiplexer(provider, tool, kind, copy, true);
+    } else toast(err.message, 10000);
+  } finally {
+    // A successful operation stays busy until the manager sends fresh state.
+    try {
+      const result = await api('GET', '/providers');
+      state.providers = result.providers;
+    } catch { tool.busy = false; }
+    renderProviders();
+  }
+}
+
 function renderHint(hint, provider) {
   let text = '';
   if (!provider.available) text = provider.installable ? '' : provider.install || `${provider.command} was not found on PATH.`;
@@ -1879,7 +2011,7 @@ function renderChangelog() {
 }
 
 const CHANNEL_LABELS = {
-  npm: 'npm', native: 'native', brew: 'Homebrew', winget: 'WinGet', legacy: 'legacy install', unknown: 'unknown install',
+  npm: 'npm', native: 'native', brew: 'Homebrew', winget: 'WinGet', system: 'system package', legacy: 'legacy install', unknown: 'unknown install',
 };
 
 function installNote(provider) {
@@ -3366,6 +3498,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 +3593,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 +3604,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 +3625,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 +4031,7 @@ let newsTimer;
 
 function showAuth(message = '') {
   managerLoss.cancel();
+  closePanel();
   closeModels();
   closeNews();
   closeChangelog();
@@ -3794,6 +4083,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 +4182,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 +4215,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 +4262,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 +4297,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">
@@ -297,6 +304,11 @@
         <summary></summary>
         <ul></ul>
       </details>
+      <details class="multiplexers" hidden>
+        <summary>Terminal multiplexers</summary>
+        <button class="btn multiplexer-refresh" type="button">Refresh</button>
+        <div class="multiplexer-list"></div>
+      </details>
       <div class="provider-actions">
         <button class="btn primary new" type="button">New</button>
         <button class="btn existing" type="button">Existing…</button>

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; }
 }
@@ -718,3 +736,13 @@ a.news-link:visited { color: var(--muted); }
   .history-row .session-id { grid-row: 2; justify-self: start; }
   .history-form { flex-wrap: wrap; }
 }
+/* Installation controls share each skin's card colors and button styles. */
+.multiplexers { margin: .6rem 0; }
+.multiplexers > summary { cursor: pointer; font-size: .85rem; }
+.multiplexer-refresh { margin: .5rem 0; }
+.multiplexer-row { padding: .65rem 0; border-top: 1px solid var(--border); }
+.multiplexer-row > strong { margin-right: .6rem; }
+.multiplexer-note { font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; margin: .4rem 0; }
+.multiplexer-row .copies { margin-top: .4rem; }
+.multiplexer-row .copy-head { flex-wrap: wrap; }
+.multiplexer-row .copy-name { flex: 1 0 100%; }