claude-code-kanban 7.23.0 → 7.25.0

package/public/app.js

@@ -4672,7 +4672,7 @@ function renderKanban() {
   // away mid-typing -- leave the column alone until the input is gone.
   if (!addingTask) {
     const addTile = canAddTask()
-      ? `<button type="button" class="column-add${pending.length ? '' : ' empty'}" onclick="startAddTask(this)" title="You can also ask the agent to add tasks with its TaskCreate tool. Make sure CLAUDE_CODE_ENABLE_TASKS is set in its environment.">${plusIcon}<span>Add task</span></button>`
+      ? `<button type="button" class="column-add${pending.length ? '' : ' empty'}" onclick="startAddTask(this, event)" title="Ctrl+Click opens the dialog with a description. You can also ask the agent to add tasks with its TaskCreate tool. Make sure CLAUDE_CODE_ENABLE_TASKS is set in its environment.">${plusIcon}<span>Add task</span></button>`
       : '';
     writes.push([
       pendingTasks,
@@ -4732,9 +4732,196 @@ function canAddTask() {
   return viewMode === 'session' && !!currentSessionId;
 }
 
+async function postTask(subject, description = '', sessionId = currentSessionId) {
+  const res = await api(apiPath`/api/tasks/${sessionId}`, { method: 'POST', body: { subject, description } });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  // The response carries the finished task, and the watcher will resend it within the
+  // SSE debounce anyway -- so show it now rather than paying a session refetch for it.
+  const { task } = await res.json();
+  if (sessionId === currentSessionId) currentTasks.push({ ...task, sessionId });
+}
+
+// task.add from the hub: the subject goes on the board on screen; with none, the Add task dialog opens.
+async function addTaskFromHub({ subject, description }) {
+  if (!canAddTask()) return showToast('Open a session to add a task', 'info');
+  const text = subject?.trim();
+  if (!text) return openTaskDialog(true);
+  try {
+    await postTask(text, description?.trim());
+    if (!addingTask) renderKanban();
+  } catch (error) {
+    console.error('Failed to create task:', error);
+    showToast('Failed to create task', 'error');
+  }
+}
+
+// The Add task dialog: the hub opens it by voice and fills it as the user speaks. The task goes to
+// the session that was on screen when it opened.
+let taskDialogSession = null;
+const taskDialogOpen = () => document.getElementById('task-modal').classList.contains('visible');
+
+function openTaskDialog(focus = false) {
+  if (terminalPaneFocused()) leaveTerminalPane();
+  taskDialogSession = currentSessionId;
+  const session = sessions.find((s) => s.id === currentSessionId);
+  document.getElementById('task-modal-session').textContent = session ? sessionDisplayName(session) : '';
+  document.getElementById('task-subject').value = '';
+  document.getElementById('task-description').value = '';
+  setFormError('task-error', '');
+  renderTaskDialog();
+  document.getElementById('task-modal').classList.add('visible');
+  if (focus) document.getElementById('task-subject').focus();
+}
+
+function closeTaskDialog() {
+  hideModalOverlay('task-modal');
+  taskDialogSession = null;
+  taskDialogVoice = false;
+  setTaskVoiceState('');
+}
+
+function renderTaskDialog() {
+  const subject = document.getElementById('task-subject');
+  document.getElementById('task-save').disabled = subject.readOnly || !subject.value.trim();
+}
+
+function fillTaskDialog(subject, description) {
+  fillTaskField('task-subject', subject);
+  fillTaskField('task-description', description);
+  renderTaskDialog();
+}
+
+// Voice fills a field: it flashes, and a long text shows its newest words.
+function fillTaskField(id, value) {
+  const field = document.getElementById(id);
+  if (field.value === value) return;
+  field.value = value;
+  field.scrollTop = field.scrollHeight;
+  if (value) flashTaskField(field, 'task-filled');
+}
+
+function flashTaskField(field, cls) {
+  field.classList.remove('task-filled', 'task-moved');
+  void field.offsetWidth;
+  field.classList.add(cls);
+}
+
+async function saveTaskDialog() {
+  const subject = document.getElementById('task-subject').value.trim();
+  if (!subject || !taskDialogSession) return;
+  const save = document.getElementById('task-save');
+  save.disabled = true;
+  try {
+    await postTask(subject, document.getElementById('task-description').value.trim(), taskDialogSession);
+    closeTaskDialog();
+    if (!addingTask) renderKanban();
+  } catch (error) {
+    console.error('Failed to create task:', error);
+    setFormError('task-error', 'Failed to create task');
+    renderTaskDialog();
+  }
+}
+
+// The title can take a model call after the release; a quick answer shows no loading at all.
+const TASK_TITLING_DELAY_MS = 300;
+let taskTitlingTimer = null;
+
+// A hold fills a dialog: it glows, shows the badge, and its fields are read-only, so typing cannot
+// race the voice. A hold whose last call never comes (the hub page reloaded) runs `onStale` after
+// VOICE_STALE_MS, longer than a task title's model call.
+const VOICE_STALE_MS = 20_000;
+const voiceStale = new Map();
+
+function setModalVoice(modal, fields, state, onStale) {
+  clearTimeout(voiceStale.get(modal));
+  if (state) voiceStale.set(modal, setTimeout(onStale, VOICE_STALE_MS));
+  if ((modal.dataset.voice ?? '') === state) return;
+  if (state) modal.dataset.voice = state;
+  else delete modal.dataset.voice;
+  for (const field of fields) field.readOnly = !!state;
+  modal.querySelector('.voice-mic').hidden = !state;
+}
+
+// 'listening' while the user speaks, 'titling' while the title is on its way, '' when the dialog is
+// the user's.
+function setTaskVoiceState(state) {
+  clearTimeout(taskTitlingTimer);
+  if (state === 'titling') {
+    taskTitlingTimer = setTimeout(() => applyTaskVoiceState(state), TASK_TITLING_DELAY_MS);
+    return;
+  }
+  applyTaskVoiceState(state);
+}
+
+function applyTaskVoiceState(state) {
+  const subject = document.getElementById('task-subject');
+  const fields = [subject, document.getElementById('task-description')];
+  setModalVoice(document.querySelector('.task-modal'), fields, state, () => {
+    taskDialogVoice = false;
+    setTaskVoiceState('');
+  });
+  subject.classList.toggle('task-titling', state === 'titling');
+  subject.placeholder = state === 'titling' ? 'Writing a title…' : 'What to do';
+  document.getElementById('task-modal-mic-label').textContent = state === 'titling' ? 'Writing a title' : 'Listening';
+  renderTaskDialog();
+}
+
+// Set from a hold's first task.live until its last call or a close, so a final call that lands
+// after the user closed the dialog does not open it again.
+let taskDialogVoice = false;
+
+// task.live from the hub: while the user speaks, the words so far as the description; `pending` on
+// release; then `final` with the title and the description. A short task moves up into the title.
+function liveTaskFromHub(p) {
+  if (p.cancel === 'true') return taskDialogVoice && closeTaskDialog();
+  const last = p.final === 'true';
+  if (!taskDialogVoice && !last && p.pending !== 'true' && canAddTask()) {
+    if (!taskDialogOpen()) openTaskDialog();
+    taskDialogVoice = true;
+    setTaskVoiceState('listening');
+  }
+  if (!taskDialogVoice) return last && !canAddTask() && showToast('Open a session to add a task', 'info');
+  if (p.pending === 'true') return setTaskVoiceState('titling');
+  if (!last) {
+    setTaskVoiceState('listening');
+    return fillTaskField('task-description', p.description ?? '');
+  }
+  const subject = document.getElementById('task-subject');
+  taskDialogVoice = false;
+  setTaskVoiceState('');
+  if (p.subject !== undefined) {
+    const moved = !p.description && p.subject === document.getElementById('task-description').value.trim();
+    fillTaskDialog(p.subject, p.description ?? '');
+    if (moved) flashTaskField(subject, 'task-moved');
+  }
+  if (p.submit === 'true') return saveTaskDialog();
+  const save = document.getElementById('task-save');
+  (save.disabled ? subject : save).focus();
+}
+
+function initTaskDialog() {
+  const subject = document.getElementById('task-subject');
+  const description = document.getElementById('task-description');
+  subject.addEventListener('input', renderTaskDialog);
+  document.querySelector('.task-modal').addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      return closeTaskDialog();
+    }
+    if (e.key !== 'Enter' || e.shiftKey || e.isComposing) return;
+    if (e.target !== subject && e.target !== description) return;
+    e.preventDefault();
+    e.stopPropagation();
+    saveTaskDialog();
+  });
+}
+initTaskDialog();
+
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
-function startAddTask(tile) {
+function startAddTask(tile, e) {
   if (addingTask) return;
+  if (e?.ctrlKey || e?.metaKey) return openTaskDialog(true);
   addingTask = true;
 
   const input = document.createElement('input');
@@ -4761,14 +4948,8 @@ function startAddTask(tile) {
     const subject = input.value.trim();
     if (!subject) return reset();
     input.disabled = true;
-    const sessionId = currentSessionId;
     try {
-      const res = await api(apiPath`/api/tasks/${sessionId}`, { method: 'POST', body: { subject } });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      // The response carries the finished task, and the watcher will resend it within the
-      // SSE debounce anyway -- so show it now rather than paying a session refetch for it.
-      const { task } = await res.json();
-      currentTasks.push({ ...task, sessionId });
+      await postTask(subject);
       addingTask = false;
       renderKanban();
     } catch (error) {
@@ -7831,6 +8012,7 @@ const MODAL_CLOSERS = {
   'project-picker-modal': () => closeProjectPicker(),
   'terminal-manager-modal': () => closeTerminalManager(),
   'new-session-modal': () => closeNewSession(),
+  'task-modal': () => closeTaskDialog(),
   'confirm-modal': () => closeConfirmModal?.(false),
   'pane-pop': () => closePanePop(),
 };
@@ -8377,6 +8559,7 @@ function stopReview() {
   if (!activeReview) return;
   const { ctl, panelEl, hostEl } = activeReview;
   ctl.abort();
+  cancelDictationIn(panelEl);
   for (const c of reviewItems()) {
     c.range = null;
     c.frameId = 0;
@@ -8867,6 +9050,7 @@ function closeReviewPop() {
   }
   reviewPopMode = null;
   const el = reviewPopEl();
+  cancelDictationIn(el);
   el.className = '';
   el.replaceChildren();
 }
@@ -8920,10 +9104,11 @@ function openReviewEditor(picked, text = '') {
     reviewPendingHighlight?.add(picked.range);
   } else if (picked.inFrame) postToReviewFrame('pend');
   activeReview.picked = picked;
-  el.innerHTML = `<textarea rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea>
+  el.innerHTML = `<div class="mic-field"><textarea class="review-pop-input" rows="3" placeholder="Comment (Ctrl+Enter to add)"></textarea></div>
     <div class="review-pop-actions"><button type="button" data-act="cancel">Cancel</button><button type="button" data-act="add" class="primary">Add</button></div>`;
   const ta = el.querySelector('textarea');
   ta.value = text;
+  addMic(ta);
   const add = (comment) => addReviewComment(picked, comment);
   ta.addEventListener('keydown', (e) => onReviewEditorKey(e, add, closeReviewPop));
   el.querySelector('[data-act="cancel"]').addEventListener('click', closeReviewPop);
@@ -9079,6 +9264,7 @@ function renderReviewPanel() {
   syncReviewSendClaims();
   if (!activeReview) return;
   const { panelEl, hostEl } = activeReview;
+  cancelDictationIn(panelEl);
   const items = reviewItems();
   panelEl.hidden = !items.length;
   hostEl?.classList.toggle('has-review', items.length > 0);
@@ -9092,7 +9278,7 @@ function renderReviewPanel() {
       .map((c, i) => {
         const body =
           c === activeReview.editing?.c
-            ? `<textarea class="review-card-edit" rows="3" aria-label="Edit comment" placeholder="Ctrl+Enter to save, Esc to cancel">${escapeHtml(activeReview.editing.draft)}</textarea>`
+            ? `<div class="mic-field"><textarea class="review-card-edit" rows="3" aria-label="Edit comment" placeholder="Ctrl+Enter to save, Esc to cancel">${escapeHtml(activeReview.editing.draft)}</textarea></div>`
             : `<div class="review-card-comment" title="Double-click to edit">${escapeHtml(c.comment)}</div>`;
         return `<li class="review-card${c === activeReview.hot ? ' hot' : ''}" data-i="${i}" title="Show in the document">
         <button type="button" class="review-edit" title="Edit" aria-label="Edit">${DETAIL_EDIT_SVG}</button>
@@ -9101,6 +9287,8 @@ function renderReviewPanel() {
         ${body}</li>`;
       })
       .join('')}</ol>`;
+  const edit = panelEl.querySelector('.review-card-edit');
+  if (edit) addMic(edit);
 }
 
 async function toastDelivery({ delivered, markdown }, noun) {
@@ -12530,6 +12718,8 @@ let spPeekToken = 0;
 let spPeekedId = null;
 let spFromTerminal = false;
 let spRenderedQuery = null;
+// Rows ranked by the caller for the query the picker opened with; the first edit drops them.
+let spRanked = null;
 // Per-open cache: spSource is frozen while the picker is up, so a fetched log stays valid.
 const spPeekCache = new Map();
 // 'board' offers the sidebar's sessions plus a short tail of the newest others; 'all' offers
@@ -12583,10 +12773,11 @@ const spSearch = sessionSearch(() => {
   if (document.getElementById('session-picker-modal').classList.contains('visible')) renderSessionPicker();
 });
 
-function openSessionPicker() {
+function openSessionPicker({ query = '', ranked = null } = {}) {
   spFromTerminal = terminalPaneFocused();
   const input = document.getElementById('session-picker-input');
-  input.value = '';
+  input.value = query;
+  spRanked = ranked;
   spSource = getFilteredSessions().sort((a, b) => Date.parse(b.modifiedAt) - Date.parse(a.modifiedAt));
   spPeekCache.clear();
   spRenderedQuery = null;
@@ -12716,7 +12907,7 @@ function renderSessionPicker() {
   spRenderedQuery = renderKey;
   const all = spScope === 'all';
   const board = new Set(spSource.map((s) => s.id));
-  const local = (all ? spRecent.rows : spSource).filter((s) => spMatches(s, query));
+  const local = spRanked && !all ? spRanked : (all ? spRecent.rows : spSource).filter((s) => spMatches(s, query));
   const found = spSearch.rows(query, local);
   const tail = !all && !query ? spRecent.rows.filter((s) => !board.has(s.id)).slice(0, SP_RECENT_TAIL) : [];
   const extra = [...found.rows, ...tail];
@@ -12780,7 +12971,10 @@ async function spOpen(idx) {
 
 function initSessionPicker() {
   const input = document.getElementById('session-picker-input');
-  input.addEventListener('input', renderSessionPicker);
+  input.addEventListener('input', () => {
+    spRanked = null;
+    renderSessionPicker();
+  });
   // Bound on the input: the global handler returns early on INPUT targets.
   input.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') closeSessionPicker();
@@ -15264,6 +15458,7 @@ panePop.addEventListener('keydown', (e) => {
 const TERMINAL_TOKEN_KEY = 'terminal-token';
 const TERMINAL_TOKEN_RE = /^[0-9a-f]{64}$/;
 const TERMINAL_MODES_KEY = 'terminal-sessions';
+const TERMINAL_SEEN_KEY = 'terminal-seen-sessions';
 const TERMINAL_FONT_KEY = 'terminal-font-size';
 const TERMINAL_FONT_MIN = 8;
 const TERMINAL_FONT_MAX = 32;
@@ -15355,6 +15550,16 @@ function setTerminalMode(sessionId, on) {
   store.writeJson(TERMINAL_MODES_KEY, [...modes].slice(-50));
 }
 
+// A session started elsewhere (dispatch, another board) runs in a terminal this board never turned on,
+// so its first open shows the terminal. Later opens keep what the user chose.
+function defaultToTerminalOnFirstOpen(sessionId) {
+  if (!runningTerminals.has(sessionId)) return;
+  const seen = readStoredList(TERMINAL_SEEN_KEY);
+  if (seen.includes(sessionId)) return;
+  store.writeJson(TERMINAL_SEEN_KEY, [...seen, sessionId].slice(-200));
+  setTerminalMode(sessionId, true);
+}
+
 function wantsTerminal() {
   return viewMode === 'session' && wantsTerminalFor(currentSessionId);
 }
@@ -15543,6 +15748,7 @@ async function openSession(sessionId) {
   setSessionDismissed(sessionId, false);
   // Awaited only when missing, so opening a loaded session stays synchronous up to fetchTasks.
   if (!sessions.some((s) => s.id === sessionId)) await ensureSessionLoaded(sessionId);
+  defaultToTerminalOnFirstOpen(sessionId);
   const alreadyOpen = sessionId === currentSessionId && viewMode === 'session' && termState.shown;
   if (!alreadyOpen) termState.openedByUser = sessionId;
   else if (termState.attached && promptAwaitsUser(sessionId)) focusTerminalPane();
@@ -16121,6 +16327,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         effort: spec.effort,
         prompt: spec.prompt,
         edit: spec.edit,
+        extraArgs: spec.extraArgs,
         forkOf: spec.forkOf,
       }),
     },
@@ -17574,8 +17781,10 @@ function dockOnScreen(active = dockActivePane()) {
 function setDockAddon(id) {
   const tid = showState.terminalId;
   if (!tid || (dockAddons[tid] ?? null) === id) return;
-  if (id) dockAddons[tid] = id;
-  else delete dockAddons[tid];
+  if (id) {
+    dockAddons[tid] = id;
+    showState.closed = true;
+  } else delete dockAddons[tid];
   store.writeJson(DOCK_ADDON_KEY, dockAddons);
 }
 
@@ -18083,7 +18292,17 @@ const newSpecs = new Map();
 // Sessions another session started (`dispatch start`), shown where they will stay until
 // their transcript appears. Kept apart from newSpecs: their prompt is already sent.
 const dispatchSpecs = new Map();
-const ns = { projects: [], picked: [], matches: [], idx: -1, folder: '', busy: false, resume: false, images: [] };
+const ns = {
+  projects: [],
+  picked: [],
+  matches: [],
+  idx: -1,
+  folder: '',
+  busy: false,
+  resume: false,
+  images: [],
+  extraArgs: [],
+};
 // Must match ATTACHMENT_TYPES and the upload limit in server.js.
 const NS_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 const NS_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
@@ -18291,6 +18510,7 @@ function openNewSession(folder, resume = false) {
   if (!terminalAvailable() || document.getElementById('new-session-modal').classList.contains('visible')) return;
   if (terminalPaneFocused()) leaveTerminalPane();
   ns.resume = resume;
+  ns.extraArgs = [];
   document.querySelector('.new-session-modal').classList.toggle('ns-resume', resume);
   document.getElementById('ns-title').textContent = resume ? 'Resume session' : 'New session';
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt']) document.getElementById(id).value = '';
@@ -18308,7 +18528,7 @@ function openNewSession(folder, resume = false) {
   const input = document.getElementById('ns-folder');
   input.focus();
   input.select();
-  loadProjects().then((list) => {
+  return loadProjects().then((list) => {
     ns.projects = list
       .filter((p) => !p.temp)
       .sort((a, b) => (b.modifiedAt || '').localeCompare(a.modifiedAt || ''))
@@ -18320,10 +18540,11 @@ function openNewSession(folder, resume = false) {
 
 function closeNewSession() {
   hideModalOverlay('new-session-modal');
+  setNewSessionVoice(false);
   closeFolderList();
   closeImagePreview();
   clearNewSessionImages();
-  promptVoice.rec?.abort();
+  cancelDictationIn(document.getElementById('new-session-modal'));
 }
 
 function addNewSessionImages(files) {
@@ -18478,6 +18699,7 @@ function newSessionValues() {
     prompt: document.getElementById('ns-prompt').value.trim() || null,
     edit,
     stay: !ns.resume && !edit && document.getElementById('ns-stay').checked,
+    extraArgs: ns.resume ? [] : ns.extraArgs,
   };
 }
 
@@ -18490,7 +18712,11 @@ function newSessionProblem(v) {
 }
 
 function setNewSessionError(text) {
-  const el = document.getElementById('ns-error');
+  setFormError('ns-error', text);
+}
+
+function setFormError(id, text) {
+  const el = document.getElementById(id);
   el.textContent = text;
   el.hidden = !text;
 }
@@ -18504,6 +18730,8 @@ function renderNewSessionForm() {
   hint.hidden = !wtOn;
   hint.textContent = `.claude/worktrees/${typeof v.worktree === 'string' ? v.worktree : '<name chosen by Claude>'}`;
   document.getElementById('ns-stay').disabled = v.edit;
+  document.getElementById('ns-args-row').hidden = !v.extraArgs.length;
+  document.getElementById('ns-args').textContent = v.extraArgs.join(' ');
   const problem = newSessionProblem(v);
   setNewSessionError(problem);
   const start = document.getElementById('ns-start');
@@ -18591,7 +18819,7 @@ function forkSession(parentId) {
 async function startNewSessionInBackground(id, v) {
   refreshPlaceholders();
   setNewSessionBusy(true);
-  const r = await newSessionPost('/api/terminal/start', { id, ...v }, 'Start failed');
+  const r = await newSessionPost('/api/terminal/start', { id, ...v, claudeArgs: v.extraArgs }, 'Start failed');
   setNewSessionBusy(false);
   if (r.error) {
     dropPlaceholder(id);
@@ -18609,41 +18837,93 @@ async function startNewSessionInBackground(id, v) {
 }
 
 const SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
-const promptVoice = { rec: null };
+// One dictation at a time: { btn, rec } in the browser, { btn, insert } under the hub.
+let dictation = null;
+const HUB_DICTATE = 'voice.dictate';
+const MIC_HTML = `<button type="button" class="mic-btn" title="Dictate" aria-label="Dictate" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg></button>`;
+
+// Puts a mic after a textarea that sits in a `.mic-field`. No browser speech input, no mic.
+function addMic(field, onError = (msg) => showToast(msg, 'error')) {
+  if (!SpeechRecognitionApi) return;
+  field.insertAdjacentHTML('afterend', MIC_HTML);
+  const btn = field.nextElementSibling;
+  // mousedown would blur the textarea and lose the caret the dictation inserts at.
+  btn.addEventListener('mousedown', (e) => e.preventDefault());
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleDictation(field, btn, onError);
+  });
+}
 
 // Replaces the selection the field had when dictation began, so interim results rewrite
-// themselves in place instead of piling up.
-function togglePromptVoice() {
-  if (promptVoice.rec) return promptVoice.rec.stop();
-  const field = document.getElementById('ns-prompt');
-  const btn = document.getElementById('ns-mic');
+// themselves in place instead of piling up. Fires `input`, as typing would.
+function fieldInserter(field) {
   const before = field.value.slice(0, field.selectionStart);
   const after = field.value.slice(field.selectionEnd);
   const lead = before && !/\s$/.test(before) ? ' ' : '';
-  const rec = new SpeechRecognitionApi();
-  rec.lang = navigator.language;
-  rec.interimResults = true;
-  rec.onresult = (e) => {
-    const text = Array.from(e.results, (r) => r[0].transcript).join('');
+  return (text) => {
     field.value = before + lead + text + after;
     const caret = before.length + lead.length + text.length;
     field.setSelectionRange(caret, caret);
+    field.dispatchEvent(new Event('input', { bubbles: true }));
   };
+}
+
+function toggleDictation(field, btn, onError) {
+  if (dictation?.btn !== btn) cancelDictation();
+  if (hub.can(HUB_DICTATE)) return toggleHubDictation(field, btn, onError);
+  if (dictation) return dictation.rec.stop();
+  const insert = fieldInserter(field);
+  const rec = new SpeechRecognitionApi();
+  rec.lang = navigator.language;
+  rec.interimResults = true;
+  rec.onresult = (e) => insert(Array.from(e.results, (r) => r[0].transcript).join(''));
   rec.onerror = (e) => {
     if (e.error === 'not-allowed' || e.error === 'service-not-allowed')
-      setNewSessionError('Microphone access is blocked for this page.');
-    else if (e.error !== 'no-speech' && e.error !== 'aborted') setNewSessionError(`Dictation failed: ${e.error}`);
+      onError('Microphone access is blocked for this page.');
+    else if (e.error !== 'no-speech' && e.error !== 'aborted') onError(`Dictation failed: ${e.error}`);
   };
   rec.onend = () => {
-    promptVoice.rec = null;
     btn.setAttribute('aria-pressed', 'false');
+    if (dictation?.rec === rec) dictation = null;
   };
-  promptVoice.rec = rec;
+  dictation = { btn, rec };
   btn.setAttribute('aria-pressed', 'true');
   field.focus();
   rec.start();
 }
 
+// Under a hub with voice on, the mic uses the hub's speech provider: the text arrives once, on the second click.
+async function toggleHubDictation(field, btn, onError) {
+  const running = dictation?.insert;
+  const insert = running ?? fieldInserter(field);
+  dictation = running ? null : { btn, insert };
+  btn.setAttribute('aria-pressed', String(!running));
+  field.focus();
+  const r = await hub.invoke(HUB_DICTATE, { op: running ? 'stop' : 'start' });
+  if (!r.ok) {
+    if (dictation?.insert === insert) dictation = null;
+    btn.setAttribute('aria-pressed', 'false');
+    return onError(`Dictation failed: ${r.reason}`);
+  }
+  if (running && r.text && field.isConnected) insert(r.text);
+}
+
+// Drops the running dictation without inserting text.
+function cancelDictation() {
+  if (!dictation) return;
+  const { btn, rec } = dictation;
+  dictation = null;
+  btn.setAttribute('aria-pressed', 'false');
+  if (rec) rec.abort();
+  else hub.invoke(HUB_DICTATE, { op: 'cancel' });
+}
+
+// For a field about to close or render again.
+function cancelDictationIn(root) {
+  if (dictation && root.contains(dictation.btn)) cancelDictation();
+}
+
 function pickFolderOption(i) {
   const path = ns.matches[i];
   if (!path) return;
@@ -18693,14 +18973,8 @@ function initNewSession() {
   for (const id of ['ns-name', 'ns-wt-name', 'ns-prompt', 'ns-model', 'ns-effort']) {
     document.getElementById(id).addEventListener('input', renderNewSessionForm);
   }
-  if (SpeechRecognitionApi) {
-    const mic = document.getElementById('ns-mic');
-    mic.hidden = false;
-    // mousedown would blur the textarea and lose the caret the dictation inserts at.
-    mic.addEventListener('mousedown', (e) => e.preventDefault());
-    mic.addEventListener('click', togglePromptVoice);
-  }
   const prompt = document.getElementById('ns-prompt');
+  addMic(prompt, setNewSessionError);
   const promptField = prompt.closest('.ns-prompt-field');
   prompt.addEventListener('paste', (e) => {
     const files = [...(e.clipboardData?.files || [])].filter((f) => f.type.startsWith('image/'));
@@ -19135,6 +19409,179 @@ hub.onActive((active) => {
 hub.onStatus(pushTerminalClaims);
 hub.onSettings(applyHubSettings);
 hub.handle('session.open', (p) => p.session && openSessionFromOutside(p.session));
+hub.handle('session.find', (p) => findSessionFromHub(p));
+hub.handle('session.paste', (p) => pasteFromHub(p));
+hub.handle('task.add', (p) => addTaskFromHub(p));
+hub.handle('task.live', (p) => liveTaskFromHub(p));
+// After pending session.live calls, so the hub's clear of words typed into the terminal lands there, not in the dialog.
+hub.handle('session.new', (p) => {
+  hubNewSession = liveChain.then(() => newSessionFromHub(p)).catch(() => {});
+});
+hub.handle('session.live', (p) => {
+  liveChain = liveChain.then(() => liveFromHub(p)).catch(() => {});
+});
+
+// Action params are strings, so flags come as "true" and `args` as claude args split on spaces
+// (the terminal refuses quotes in them anyway).
+function hubNewSessionValues(p) {
+  const onScreen = viewMode === 'session' ? sessions.find((s) => s.id === currentSessionId)?.project : null;
+  const filtered = filterProject && filterProject !== '__recent__' ? filterProject : null;
+  const wt = p.worktree?.trim();
+  const edit = p.edit === 'true';
+  return {
+    cwd: p.cwd || onScreen || filtered || '',
+    name: p.name?.trim() || null,
+    worktree: wt === 'true' ? true : wt && wt !== 'false' ? wt : false,
+    model: p.model || null,
+    effort: p.effort || null,
+    prompt: p.prompt?.trim() || null,
+    edit,
+    stay: !edit && p.stay === 'true',
+    extraArgs: p.args?.trim() ? p.args.trim().split(/\s+/) : [],
+  };
+}
+
+function newSessionFromHub(p) {
+  if (!terminalAvailable()) return showToast('The embedded terminal is off', 'error');
+  const v = hubNewSessionValues(p);
+  const problem = newSessionProblem(v);
+  if (problem) return showToast(problem, 'error');
+  return newSessionDialogFromHub(v);
+}
+
+// The dialog with the hub's values filled in, a folder picked (else the most recent project) and Start focused,
+// so the user sees what starts and one Enter starts it.
+async function newSessionDialogFromHub(v) {
+  const opened = openNewSession(v.cwd);
+  if (!opened) return;
+  const set = (id, value) => {
+    document.getElementById(id).value = value ?? '';
+  };
+  set('ns-name', v.name);
+  set('ns-prompt', v.prompt);
+  set('ns-model', v.model);
+  set('ns-effort', v.effort);
+  set('ns-wt-name', typeof v.worktree === 'string' ? v.worktree : '');
+  document.getElementById('ns-wt').checked = v.worktree !== false;
+  if (v.edit) document.getElementById('ns-edit').checked = true;
+  if (v.stay) document.getElementById('ns-stay').checked = true;
+  ns.extraArgs = v.extraArgs;
+  renderNewSessionForm();
+  await opened;
+  if (!ns.folder && ns.projects[0]) setNewSessionFolder(ns.projects[0]);
+  if (ns.folder) document.getElementById('ns-start').focus();
+}
+
+// session.find from the hub: spoken words name a session in the list. Each session scores the share
+// of the words found in its name, project and branch; a clear best opens at once, else a toast
+// offers the closest.
+const FIND_MIN_SCORE = 0.6;
+const FIND_MIN_LEAD = 0.25;
+const FIND_SKIP = new Set(['the', 'an', 'my', 'session', 'on', 'in', 'of', 'for', 'to', 'and', 'with', 'about']);
+const findWords = (s) =>
+  String(s ?? '')
+    .toLowerCase()
+    .split(/[^\p{L}\p{N}]+/u)
+    .filter((w) => w.length > 1 && !FIND_SKIP.has(w));
+// Speech drops or adds endings ("test" for "tests"), so words of 4+ letters match on a shared start.
+const wordFound = (w, words) =>
+  words.some((x) => x === w || (Math.min(x.length, w.length) >= 4 && (x.startsWith(w) || w.startsWith(x))));
+
+function rankSessions(name) {
+  const said = findWords(name);
+  if (!said.length) return [];
+  return sessions
+    .filter((s) => !s.placeholder)
+    .map((s) => {
+      const words = findWords(
+        `${sessionDisplayName(s)} ${s.project ? pathBasename(s.project) : ''} ${s.gitBranch ?? ''}`,
+      );
+      return { s, score: said.filter((w) => wordFound(w, words)).length / said.length };
+    })
+    .filter((r) => r.score > 0)
+    .sort((a, b) => b.score - a.score || Date.parse(b.s.modifiedAt) - Date.parse(a.s.modifiedAt));
+}
+
+function findSessionFromHub({ name }) {
+  const ranked = rankSessions(name ?? '');
+  const [best, next] = ranked;
+  if (best && best.score >= FIND_MIN_SCORE && (!next || best.score - next.score >= FIND_MIN_LEAD)) {
+    return revealSession(best.s.id);
+  }
+  if (isSessionPickerOpen()) closeSessionPicker({ refocus: false });
+  openSessionPicker({ query: name?.trim() ?? '', ranked: ranked.length ? ranked.map((r) => r.s) : null });
+}
+
+// Voice while the New session dialog is open is dictation into its prompt; Enter on Start sends it.
+function voiceIntoNewSession(text) {
+  promptInserter()(text.trim());
+  if (ns.folder) document.getElementById('ns-start').focus();
+}
+
+// The hub's voice control sends dictated text here; with no session named, it goes to the one on screen.
+const newSessionOpen = () => document.getElementById('new-session-modal').classList.contains('visible');
+const hubTargetSession = (session) => session || (viewMode === 'session' && termState.shown && termState.sessionId);
+const noSessionToast = (text) =>
+  showToast('No session on screen', 'info', { label: 'Copy', onClick: () => copyText(text, 'text') }, text);
+
+async function pasteFromHub({ session, text, submit }) {
+  if (!text) return;
+  if (!session && newSessionOpen()) return voiceIntoNewSession(text);
+  const id = hubTargetSession(session);
+  if (!id) return noSessionToast(text);
+  const res = await terminalFetch(`/api/terminal/paste/${encodeURIComponent(id)}`, 'POST', {
+    text,
+    submit: submit === 'true',
+  });
+  if (!res.ok) showToast((await res.json().catch(() => ({}))).error || `Paste failed (${res.status})`, 'error');
+}
+
+// session.live: one key hold sends the words so far many times, then once with final. Calls run in
+// order, after a session.new sent just before them has opened its dialog.
+let hubNewSession = Promise.resolve();
+let liveChain = Promise.resolve();
+let liveText = { insert: null, typed: '', at: 0 };
+// A hold sends text about once a second, so a longer gap means the last hold ended without its
+// final call (the hub page reloaded) and its typed words are not this hold's to erase.
+const LIVE_GAP_MS = 10_000;
+
+function setNewSessionVoice(on) {
+  const modal = document.querySelector('.new-session-modal');
+  setModalVoice(modal, [document.getElementById('ns-prompt')], on ? 'listening' : '', () => setNewSessionVoice(false));
+}
+
+// `cancel` comes with an empty final text, which removes what the hold typed; "close" also closes
+// the New session dialog that the hold opened.
+async function liveFromHub({ session, text, final, submit, cancel }) {
+  await hubNewSession;
+  const done = final === 'true';
+  if (Date.now() - liveText.at > LIVE_GAP_MS) liveText = { insert: null, typed: '', at: 0 };
+  liveText.at = Date.now();
+  const hold = liveText;
+  if (done) liveText = { insert: null, typed: '', at: 0 };
+  if (!session && newSessionOpen()) {
+    hold.insert ??= promptInserter();
+    hold.insert(text.trim());
+    const prompt = document.getElementById('ns-prompt');
+    prompt.scrollTop = prompt.scrollHeight;
+    setNewSessionVoice(!done);
+    if (cancel === 'close') closeNewSession();
+    else if (done && !cancel && ns.folder) document.getElementById('ns-start').focus();
+    return;
+  }
+  const id = hubTargetSession(session);
+  if (!id) {
+    if (done && text) noSessionToast(text);
+    return;
+  }
+  const res = await terminalFetch(`/api/terminal/type/${encodeURIComponent(id)}`, 'POST', {
+    from: hold.typed,
+    text,
+    submit: done && submit === 'true',
+  });
+  if (res.ok) hold.typed = text;
+  else if (done) showToast((await res.json().catch(() => ({}))).error || `Typing failed (${res.status})`, 'error');
+}
 
 // session.changed goes out once the switch settles, so arrowing through the list sends one event.
 let publishTimer = 0;