claude-code-kanban 7.22.0 → 7.24.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(),
 };
@@ -12530,6 +12712,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 +12767,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 +12901,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 +12965,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 +15452,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 +15544,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 +15742,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 +16321,7 @@ async function openTerminal(sessionId, mode, attempt = 0) {
         effort: spec.effort,
         prompt: spec.prompt,
         edit: spec.edit,
+        extraArgs: spec.extraArgs,
         forkOf: spec.forkOf,
       }),
     },
@@ -16951,6 +17152,11 @@ function focusShowBody() {
 
 const SHOW_KEY_COMMANDS = { 'alt+Enter': 'expand', 'alt+shift+Enter': 'dock', 'alt+w': 'close' };
 
+// Docked, the card is a dock item, so it shares the dock's expand with the add-ons.
+const showExpanded = () => (showState.docked ? dockExpanded : showState.expanded);
+
+const expandTitle = (on, home) => (on ? `Back to the ${home} · Alt+Enter or Esc` : 'Fill the terminal · Alt+Enter');
+
 // The body keeps focus, because a render replaces an HTML card's frame.
 function showCardKey(e) {
   if (matchKey(e, '[', ']')) {
@@ -16960,8 +17166,7 @@ function showCardKey(e) {
   }
   const combo = ClaudeHub.comboOf(e);
   let cmd = SHOW_KEY_COMMANDS[combo];
-  if (combo === 'Escape') cmd = showState.expanded && !showState.docked ? 'expand' : 'collapse';
-  else if (cmd === 'expand' && showState.docked) cmd = null;
+  if (combo === 'Escape') cmd = showExpanded() ? 'expand' : 'collapse';
   if (cmd) {
     showCommand(cmd);
     if (cmd === 'expand' || cmd === 'dock') focusShowBody();
@@ -17126,16 +17331,11 @@ function showHeaderHtml(p) {
   const i = showState.idx;
   const key = p.key ? `<span class="show-sep">·</span><span class="show-key">${escapeHtml(p.key)}</span>` : '';
   const btn = (...args) => showBtnHtml('show', ...args);
-  const { collapsed, expanded, docked } = showState;
+  const { collapsed, docked } = showState;
+  const expanded = showExpanded();
   const dockTitle = docked ? 'Back to the overlay · Alt+Shift+Enter' : 'Dock beside the terminal · Alt+Shift+Enter';
   const dock = btn('dock', 'dock', dockTitle, false, docked);
-  const expand = docked
-    ? ''
-    : btn(
-        'expand',
-        expanded ? 'restore' : 'expand',
-        expanded ? 'Back to the card · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter',
-      );
+  const expand = btn('expand', expanded ? 'restore' : 'expand', expandTitle(expanded, docked ? 'dock' : 'card'));
   return `<span class="show-nav"><span class="show-title" title="${escapeHtml(p.title)}">${escapeHtml(p.title)}</span>${key}</span>
     <span class="show-pager">${btn('prev', 'prev', 'Previous post', i === 0)}<span class="show-pos">${i + 1}/${n}</span>${btn('next', 'next', 'Next post', i === n - 1)}</span>
     <span class="show-actions">${btn('pane', 'pane', 'Open in a pane of the session')}${dock}${btn('collapse', collapsed ? 'uncollapse' : 'collapse', collapsed ? 'Show the post' : 'Collapse to the header · Esc')}${expand}${btn('remove', 'clear', 'Remove this post · Ctrl+D · Shift+click clears every post')}${btn('close', 'close', 'Close until the next post · Alt+W')}</span>`;
@@ -17176,7 +17376,7 @@ function renderShow({ flash = false } = {}) {
   }
   const p = showState.posts[showState.idx];
   showState.marked.delete(p.id);
-  card.classList.toggle('expanded', showState.expanded && !showState.collapsed && !showState.docked);
+  card.classList.toggle('expanded', showExpanded() && !showState.collapsed);
   card.classList.toggle('collapsed', showState.collapsed);
   if (!card.firstChild) {
     card.innerHTML = `<header class="show-head"></header><div class="show-ticks"></div><div class="show-body" tabindex="-1"></div>
@@ -17575,8 +17775,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);
 }
 
@@ -17670,11 +17872,11 @@ function renderDockAddon(pane) {
     panel.classList.toggle('expanded', dockExpanded);
     panel.style.setProperty('--show-term-font', `${currentTerminalFontSize()}px`);
     const expand = panel.querySelector('[data-dock="expand"]');
-    const expandTitle = dockExpanded ? 'Back to the dock · Alt+Enter or Esc' : 'Fill the terminal · Alt+Enter';
-    if (expand.title !== expandTitle) {
+    const label = expandTitle(dockExpanded, 'dock');
+    if (expand.title !== label) {
       expand.innerHTML = showIcon(dockExpanded ? 'restore' : 'expand');
-      expand.title = expandTitle;
-      expand.setAttribute('aria-label', expandTitle);
+      expand.title = label;
+      expand.setAttribute('aria-label', label);
     }
     if (!dockFrames.has(pane.id)) {
       const view = createDockView(pane);
@@ -17769,7 +17971,7 @@ async function removeDockItem(item) {
 function setDockExpanded(on) {
   dockExpanded = on;
   store.setItem(DOCK_EXPANDED_KEY, on ? '1' : '');
-  renderDockAddon(dockActivePane());
+  renderShow();
 }
 
 // Alt+Enter toggles the full width and Esc goes back; Esc in the dock focuses the terminal.
@@ -17966,8 +18168,9 @@ function showCommand(cmd) {
     showState.docked = !showState.docked;
     showState.collapsed = false;
   } else if (cmd === 'expand') {
-    showState.expanded = !showState.expanded;
     showState.collapsed = false;
+    if (showState.docked) return setDockExpanded(!dockExpanded);
+    showState.expanded = !showState.expanded;
   } else if (cmd === 'close') showState.closed = true;
   else if (cmd === 'remove') {
     const id = showState.posts[showState.idx]?.id;
@@ -18083,7 +18286,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 +18504,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 +18522,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 +18534,16 @@ function openNewSession(folder, resume = false) {
 
 function closeNewSession() {
   hideModalOverlay('new-session-modal');
+  setNewSessionVoice(false);
   closeFolderList();
   closeImagePreview();
   clearNewSessionImages();
   promptVoice.rec?.abort();
+  if (promptVoice.hub) {
+    promptVoice.hub = null;
+    document.getElementById('ns-mic').setAttribute('aria-pressed', 'false');
+    hub.invoke(HUB_DICTATE, { op: 'cancel' });
+  }
 }
 
 function addNewSessionImages(files) {
@@ -18478,6 +18698,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 +18711,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 +18729,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 +18818,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,26 +18836,34 @@ async function startNewSessionInBackground(id, v) {
 }
 
 const SpeechRecognitionApi = window.SpeechRecognition || window.webkitSpeechRecognition;
-const promptVoice = { rec: null };
+const promptVoice = { rec: null, hub: null };
+const HUB_DICTATE = 'voice.dictate';
 
 // 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();
+function promptInserter() {
   const field = document.getElementById('ns-prompt');
-  const btn = document.getElementById('ns-mic');
   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);
+    renderNewSessionForm();
   };
+}
+
+function togglePromptVoice() {
+  if (hub.can(HUB_DICTATE)) return toggleHubDictation();
+  if (promptVoice.rec) return promptVoice.rec.stop();
+  const field = document.getElementById('ns-prompt');
+  const btn = document.getElementById('ns-mic');
+  const insert = promptInserter();
+  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.');
@@ -18644,6 +18879,23 @@ function togglePromptVoice() {
   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() {
+  const btn = document.getElementById('ns-mic');
+  const op = promptVoice.hub ? 'stop' : 'start';
+  const insert = promptVoice.hub ?? promptInserter();
+  promptVoice.hub = op === 'start' ? insert : null;
+  btn.setAttribute('aria-pressed', String(op === 'start'));
+  document.getElementById('ns-prompt').focus();
+  const r = await hub.invoke(HUB_DICTATE, { op });
+  if (!r.ok) {
+    promptVoice.hub = null;
+    btn.setAttribute('aria-pressed', 'false');
+    return setNewSessionError(`Dictation failed: ${r.reason}`);
+  }
+  if (op === 'stop' && r.text) insert(r.text);
+}
+
 function pickFolderOption(i) {
   const path = ns.matches[i];
   if (!path) return;
@@ -19135,6 +19387,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;