npm - @phenx-inc/ctlsurf - Versions diffs - 0.5.1 → 0.6.0 - Mend

@phenx-inc/ctlsurf 0.5.1 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/out/renderer/assets/{tsMode-CRIrHuii.js → tsMode-CYd3NUkW.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-BOOvUI7u.js";
+import { c as createWebWorker, e as editor, U as Uri, a as MarkerTag, M as MarkerSeverity, l as languages, t as typescriptDefaults, R as Range } from "./index-B60JU1yI.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-DJ3C8Yly.js → typescript-rkc9lhpi.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BOOvUI7u.js";
+import { l as languages } from "./index-B60JU1yI.js";
 const conf = {
   wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
   comments: {

package/out/renderer/assets/{xml-CalvD5_C.js → xml-EsHEUps1.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BOOvUI7u.js";
+import { l as languages } from "./index-B60JU1yI.js";
 const conf = {
   comments: {
     blockComment: ["<!--", "-->"]

package/out/renderer/assets/{yaml-Cgs8pdVp.js → yaml-B9-nQ_s2.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-BOOvUI7u.js";
+import { l as languages } from "./index-B60JU1yI.js";
 const conf = {
   comments: {
     lineComment: "#"

package/out/renderer/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
-  <script type="module" crossorigin src="./assets/index-BOOvUI7u.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-ezC-iarf.css">
+  <script type="module" crossorigin src="./assets/index-B60JU1yI.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-DJFYmHjz.css">
 </head>
 <body>
   <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Agent-agnostic terminal and desktop app for ctlsurf — run Claude Code, Codex, or any coding agent with live session logging and remote control",
   "main": "out/main/index.js",
   "bin": {
@@ -43,6 +43,7 @@
     "node": ">=18"
   },
   "dependencies": {
+    "@huggingface/transformers": "^4.2.0",
     "@monaco-editor/react": "^4.7.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.14.0",

package/src/main/index.ts CHANGED Viewed

@@ -132,6 +132,13 @@ function createWindow(): void {
     }
   })
+  // Voice typing needs microphone access. Approve permission requests (there
+  // was no handler before, so the renderer already had the default-permissive
+  // behavior — this just ensures the mic request resolves to "allow").
+  mainWindow.webContents.session.setPermissionRequestHandler((_wc, _permission, callback) => {
+    callback(true)
+  })
   if (process.env.ELECTRON_RENDERER_URL) {
     mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
   } else {
@@ -300,12 +307,18 @@ ipcMain.handle('worker:createProject', async () => {
   }
 })
-ipcMain.handle('worker:getWebviewInfo', async () => {
+// Resolve the ctlsurf frontend URL (the origin the embedded webview loads from)
+// from the active profile, applying the dev localhost:8000 → :88 rewrite.
+function getCtlsurfFrontendUrl(): string {
   const profile = orchestrator.getActiveProfile()
   const baseUrl = profile.baseUrl || process.env.CTLSURF_BASE_URL || 'https://app.ctlsurf.com'
-  const frontendUrl = baseUrl.includes('localhost:8000')
+  return baseUrl.includes('localhost:8000')
     ? baseUrl.replace(':8000', ':88')
     : baseUrl
+}
+ipcMain.handle('worker:getWebviewInfo', async () => {
+  const frontendUrl = getCtlsurfFrontendUrl()
   if (!orchestrator.ctlsurfApi.getApiKey()) {
     return { frontendUrl: `${frontendUrl}?embed=1`, authenticated: false }
@@ -348,6 +361,40 @@ ipcMain.handle('worker:getWebviewInfo', async () => {
   }
 })
+// Given a URL the agent printed in the terminal, return an authenticated embed
+// URL if it points at the ctlsurf frontend, else null (so the caller opens it
+// in the default browser instead).
+ipcMain.handle('worker:getEmbedUrl', async (_event, targetUrl: string) => {
+  try {
+    if (!targetUrl) return null
+    const frontendUrl = getCtlsurfFrontendUrl()
+    const profile = orchestrator.getActiveProfile()
+    const rawBaseUrl = profile.baseUrl || process.env.CTLSURF_BASE_URL || 'https://app.ctlsurf.com'
+    const target = new URL(targetUrl)
+    const front = new URL(frontendUrl)
+    // Treat both the frontend origin and the raw (dev :8000) base as ctlsurf.
+    const origins = new Set<string>([front.origin])
+    try { origins.add(new URL(rawBaseUrl).origin) } catch { /* ignore */ }
+    if (!origins.has(target.origin)) return null
+    // Rebuild on the frontend origin (handles the dev :8000 → :88 case) so the
+    // webview loads from the same origin its auth code is valid for.
+    const out = new URL(target.pathname + target.search + target.hash, front.origin)
+    out.searchParams.set('embed', '1')
+    if (orchestrator.ctlsurfApi.getApiKey()) {
+      const { code } = await orchestrator.ctlsurfApi.getAuthCode()
+      out.searchParams.set('_code', code)
+    }
+    return out.toString()
+  } catch (err: any) {
+    log('[worker] getEmbedUrl failed:', err?.message)
+    return null
+  }
+})
 // ─── Profile IPC ──────────────────────────────────
 ipcMain.handle('profiles:list', () => orchestrator.listProfiles())

package/src/preload/index.ts CHANGED Viewed

@@ -129,6 +129,10 @@ const api = {
     pageUrl?: string;
     authenticated: boolean;
   }> => ipcRenderer.invoke('worker:getWebviewInfo'),
+  // Resolve a terminal-printed URL to an authenticated ctlsurf embed URL, or
+  // null if it isn't a ctlsurf link (caller opens those externally).
+  getEmbedUrl: (targetUrl: string): Promise<string | null> =>
+    ipcRenderer.invoke('worker:getEmbedUrl', targetUrl),
   onWorkerStatus: (callback: (status: string) => void) => {
     const listener = (_event: Electron.IpcRendererEvent, status: string) => callback(status)

package/src/renderer/App.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { TerminalPanel, destroyTerminal } from './components/TerminalPanel'
+import { TerminalPanel, destroyTerminal, focusTerminal } from './components/TerminalPanel'
+import { VoiceInput } from './components/VoiceInput'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
@@ -59,6 +60,7 @@ declare global {
       getWebviewInfo: () => Promise<{
         frontendUrl: string; pageUrl?: string; authenticated: boolean;
       }>
+      getEmbedUrl: (targetUrl: string) => Promise<string | null>
       getWorkerStatus: () => Promise<string>
       getWorkerId: () => Promise<string | null>
       onWorkerStatus: (callback: (status: string) => void) => () => void
@@ -117,6 +119,11 @@ export default function App() {
   const [cwd, setCwd] = useState<string | null>(null)
   const [projectName, setProjectName] = useState<string | null>(null)
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
+  // A ctlsurf link clicked in the terminal: the authenticated URL to load in
+  // the ctlsurf panel. `n` bumps on every request so re-clicking the same URL
+  // still triggers a navigation.
+  const [ctlsurfNav, setCtlsurfNav] = useState<{ url: string; n: number } | null>(null)
+  const ctlsurfNavCounter = useRef(0)
   // Multi-tab state
   const [tabs, setTabs] = useState<TabInfo[]>(() => {
@@ -200,6 +207,16 @@ export default function App() {
     }
   }, [trackingActive])
+  // Voice typing: inject the transcribed text into the active terminal exactly
+  // as if it were typed (no auto-submit), then refocus so the user can press
+  // Enter to send it.
+  const handleVoiceTranscript = useCallback((text: string) => {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    window.worker.writePty(activeTabId, trimmed)
+    focusTerminal(activeTabId)
+  }, [activeTabId])
   const cwdRef = useRef<string | null>(null)
   const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
@@ -349,6 +366,20 @@ export default function App() {
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [togglePane])
+  // A ctlsurf link was clicked in the terminal — reveal the ctlsurf pane if
+  // hidden and hand the authenticated URL to the panel to load.
+  useEffect(() => {
+    const onOpen = (e: Event) => {
+      const url = (e as CustomEvent).detail?.url as string | undefined
+      if (!url) return
+      if (!findPaneIds(layout).includes('ctlsurf')) togglePane('ctlsurf')
+      ctlsurfNavCounter.current += 1
+      setCtlsurfNav({ url, n: ctlsurfNavCounter.current })
+    }
+    window.addEventListener('ctlsurf-open-url', onOpen)
+    return () => window.removeEventListener('ctlsurf-open-url', onOpen)
+  }, [layout, togglePane])
   // Build pane contents (always rendered, layout controls visibility)
   const panes: PaneContent[] = [
     { id: 'editor', label: 'Editor', content: <EditorPanel cwd={cwd} /> },
@@ -409,7 +440,7 @@ export default function App() {
         </div>
       ),
     },
-    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel /> },
+    { id: 'ctlsurf', label: 'ctlsurf', content: <CtlsurfPanel navigate={ctlsurfNav} /> },
   ]
   return (
@@ -451,6 +482,7 @@ export default function App() {
             </svg>
             <span>Tickets</span>
           </button>
+          <VoiceInput onTranscript={handleVoiceTranscript} />
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)

package/src/renderer/components/CtlsurfPanel.tsx CHANGED Viewed

@@ -1,9 +1,15 @@
 import { useRef, useEffect, useState } from 'react'
-export function CtlsurfPanel() {
+interface CtlsurfPanelProps {
+  // An authenticated ctlsurf URL to load (e.g. from a terminal link click).
+  // `n` bumps per request so repeat navigations to the same URL still apply.
+  navigate?: { url: string; n: number } | null
+}
+export function CtlsurfPanel({ navigate }: CtlsurfPanelProps) {
   const webviewRef = useRef<HTMLWebViewElement>(null)
   const [url, setUrl] = useState<string | null>(null)
-  const [key, setKey] = useState(0) // force remount on cwd change
+  const [key, setKey] = useState(0) // force remount on cwd change / navigation
   const loadUrl = async () => {
     try {
@@ -15,7 +21,17 @@ export function CtlsurfPanel() {
     }
   }
-  useEffect(() => { loadUrl() }, [])
+  // Default-load the project page on mount, unless a navigation is already
+  // queued (e.g. the pane was just revealed to show a clicked link).
+  useEffect(() => { if (!navigate?.url) loadUrl() }, [])
+  // Navigate to a specific authenticated URL when requested.
+  useEffect(() => {
+    if (navigate?.url) {
+      setUrl(navigate.url)
+      setKey(k => k + 1)
+    }
+  }, [navigate?.n])
   // Reload webview when cwd changes
   useEffect(() => {

package/src/renderer/components/TerminalPanel.tsx CHANGED Viewed

@@ -22,6 +22,31 @@ function copySelectionAsEmailTable(terminal: Terminal): void {
   )
 }
+// Open a URL in the system browser, mirroring WebLinksAddon's safe default
+// (clear the opener so the new page can't reach back into this window).
+function openExternal(uri: string): void {
+  const win = window.open()
+  if (win) {
+    try { (win as { opener: unknown }).opener = null } catch { /* ignore */ }
+    win.location.href = uri
+  }
+}
+// Custom handler for links clicked in the terminal. ctlsurf page links are
+// routed into the embedded (authenticated) ctlsurf panel via a window event;
+// everything else opens in the default browser as before.
+function handleTerminalLink(_event: MouseEvent, uri: string): void {
+  window.worker.getEmbedUrl(uri)
+    .then((embedUrl) => {
+      if (embedUrl) {
+        window.dispatchEvent(new CustomEvent('ctlsurf-open-url', { detail: { url: embedUrl } }))
+      } else {
+        openExternal(uri)
+      }
+    })
+    .catch(() => openExternal(uri))
+}
 interface AgentConfig {
   id: string
   name: string
@@ -105,7 +130,7 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   const fitAddon = new FitAddon()
   terminal.loadAddon(fitAddon)
-  terminal.loadAddon(new WebLinksAddon())
+  terminal.loadAddon(new WebLinksAddon(handleTerminalLink))
   // ⌘/Ctrl+Shift+E → convert the current selection to an email table. Handled
   // here (not as a DOM listener) so it works even while a mouse-tracking TUI
@@ -160,6 +185,12 @@ function getOrCreateTerminal(tabId: string, onExit: (tabId: string) => void): {
   return { terminal, fitAddon }
 }
+// Return keyboard focus to a tab's terminal (e.g. after inserting voice text
+// so the user can immediately press Enter to submit).
+export function focusTerminal(tabId: string): void {
+  _terminals.get(tabId)?.terminal.focus()
+}
 export function destroyTerminal(tabId: string): void {
   const state = _terminals.get(tabId)
   if (!state) return

package/src/renderer/components/VoiceInput.tsx ADDED Viewed

@@ -0,0 +1,313 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { transcribeBlob, type ModelProgress } from '../lib/localWhisper'
+// ─── Minimal Web Speech API typings ──────────────────
+// webkitSpeechRecognition isn't in the standard DOM lib, so declare just the
+// surface we use. This API is frequently unavailable inside Electron (Chromium
+// ships without Google's speech backend); when it fails we fall back to a local
+// Whisper model (see ../lib/localWhisper).
+interface SpeechRecognitionResult {
+  isFinal: boolean
+  0: { transcript: string }
+}
+interface SpeechRecognitionEvent {
+  resultIndex: number
+  results: { length: number;[index: number]: SpeechRecognitionResult }
+}
+interface SpeechRecognitionErrorEvent { error: string }
+interface SpeechRecognitionLike {
+  lang: string
+  continuous: boolean
+  interimResults: boolean
+  start: () => void
+  stop: () => void
+  abort: () => void
+  onresult: ((e: SpeechRecognitionEvent) => void) | null
+  onerror: ((e: SpeechRecognitionErrorEvent) => void) | null
+  onend: (() => void) | null
+}
+type SpeechRecognitionCtor = new () => SpeechRecognitionLike
+function getRecognitionCtor(): SpeechRecognitionCtor | null {
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionCtor
+    webkitSpeechRecognition?: SpeechRecognitionCtor
+  }
+  return w.SpeechRecognition || w.webkitSpeechRecognition || null
+}
+// ─── Capabilities & engine selection ─────────────────
+type Engine = 'web-speech' | 'local'
+type Phase = 'idle' | 'listening' | 'transcribing'
+const ENGINE_KEY = 'ctlsurf.voiceEngine'
+const WEB_SPEECH_SUPPORTED = getRecognitionCtor() !== null
+const LOCAL_SUPPORTED =
+  typeof navigator !== 'undefined' &&
+  !!navigator.mediaDevices?.getUserMedia &&
+  typeof MediaRecorder !== 'undefined' &&
+  typeof OfflineAudioContext !== 'undefined'
+const ANY_SUPPORTED = WEB_SPEECH_SUPPORTED || LOCAL_SUPPORTED
+function loadInitialEngine(): Engine {
+  if (!WEB_SPEECH_SUPPORTED && LOCAL_SUPPORTED) return 'local'
+  try {
+    if (localStorage.getItem(ENGINE_KEY) === 'local' && LOCAL_SUPPORTED) return 'local'
+  } catch { /* ignore */ }
+  return WEB_SPEECH_SUPPORTED ? 'web-speech' : 'local'
+}
+// Web Speech errors that mean the engine itself is unreachable (vs. a mic
+// permission/hardware problem, which would also break the local fallback).
+function isEngineUnavailable(code: string): boolean {
+  return code === 'network' || code === 'service-not-allowed'
+}
+function describeMicError(err: unknown): string {
+  const name = (err as { name?: string })?.name
+  if (name === 'NotAllowedError' || name === 'SecurityError') return 'Microphone access denied'
+  if (name === 'NotFoundError') return 'No microphone found'
+  return 'Could not start microphone'
+}
+interface VoiceInputProps {
+  // Called once per push-to-talk session with the final transcribed text.
+  onTranscript: (text: string) => void
+}
+export function VoiceInput({ onTranscript }: VoiceInputProps) {
+  const [engine, setEngine] = useState<Engine>(loadInitialEngine)
+  const [phase, setPhase] = useState<Phase>('idle')
+  const [interim, setInterim] = useState('')
+  const [modelPct, setModelPct] = useState<number | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [notice, setNotice] = useState<string | null>(null)
+  // Web Speech refs
+  const recognitionRef = useRef<SpeechRecognitionLike | null>(null)
+  const finalRef = useRef('')
+  // Local (Whisper) refs
+  const streamRef = useRef<MediaStream | null>(null)
+  const recorderRef = useRef<MediaRecorder | null>(null)
+  const chunksRef = useRef<Blob[]>([])
+  // Set true when the user releases before getUserMedia resolves (quick tap).
+  const cancelGestureRef = useRef(false)
+  const engineRef = useRef(engine)
+  useEffect(() => { engineRef.current = engine }, [engine])
+  const onTranscriptRef = useRef(onTranscript)
+  useEffect(() => { onTranscriptRef.current = onTranscript }, [onTranscript])
+  // Auto-dismiss transient chips.
+  useEffect(() => {
+    if (!error) return
+    const t = setTimeout(() => setError(null), 4500)
+    return () => clearTimeout(t)
+  }, [error])
+  useEffect(() => {
+    if (!notice) return
+    const t = setTimeout(() => setNotice(null), 5000)
+    return () => clearTimeout(t)
+  }, [notice])
+  const switchToLocal = useCallback((reason: string) => {
+    try { localStorage.setItem(ENGINE_KEY, 'local') } catch { /* ignore */ }
+    setEngine('local')
+    setNotice(reason)
+  }, [])
+  const stopStream = useCallback(() => {
+    streamRef.current?.getTracks().forEach((t) => t.stop())
+    streamRef.current = null
+  }, [])
+  // ─── Web Speech engine ─────────────────────────────
+  const startWebSpeech = useCallback(() => {
+    const Ctor = getRecognitionCtor()
+    if (!Ctor || recognitionRef.current) return
+    setError(null); setNotice(null); setInterim('')
+    finalRef.current = ''
+    const rec = new Ctor()
+    rec.lang = navigator.language || 'en-US'
+    rec.continuous = true
+    rec.interimResults = true
+    rec.onresult = (event) => {
+      let finalText = ''
+      let interimText = ''
+      for (let i = 0; i < event.results.length; i++) {
+        const res = event.results[i]
+        if (res.isFinal) finalText += res[0].transcript
+        else interimText += res[0].transcript
+      }
+      finalRef.current = finalText
+      setInterim(interimText)
+    }
+    rec.onerror = (event) => {
+      if (isEngineUnavailable(event.error) && LOCAL_SUPPORTED) {
+        // The streamed audio is gone; switch engines and ask for a retry.
+        finalRef.current = ''
+        switchToLocal('Voice service unavailable — switched to on-device. Press again.')
+      } else if (event.error !== 'no-speech' && event.error !== 'aborted') {
+        setError(event.error === 'not-allowed' ? 'Microphone access denied' : `Voice error: ${event.error}`)
+      }
+    }
+    rec.onend = () => {
+      const text = finalRef.current.trim()
+      recognitionRef.current = null
+      setPhase('idle')
+      setInterim('')
+      if (text) onTranscriptRef.current(text)
+    }
+    recognitionRef.current = rec
+    try {
+      rec.start()
+      setPhase('listening')
+    } catch (err) {
+      recognitionRef.current = null
+      setPhase('idle')
+      setError('Could not start microphone')
+      console.error('[voice] web speech start failed', err)
+    }
+  }, [switchToLocal])
+  const stopWebSpeech = useCallback(() => {
+    try { recognitionRef.current?.stop() } catch { /* already stopped */ }
+  }, [])
+  // ─── Local (Whisper) engine ────────────────────────
+  const handleModelProgress = useCallback((p: ModelProgress) => {
+    if (p.status === 'progress' && typeof p.progress === 'number') {
+      setModelPct(Math.min(100, Math.round(p.progress)))
+    }
+  }, [])
+  const runLocalTranscription = useCallback(async (rec: MediaRecorder) => {
+    stopStream()
+    const blob = new Blob(chunksRef.current, { type: rec.mimeType || 'audio/webm' })
+    chunksRef.current = []
+    recorderRef.current = null
+    if (blob.size === 0) { setPhase('idle'); return }
+    setPhase('transcribing')
+    setInterim('')
+    try {
+      const text = await transcribeBlob(blob, handleModelProgress)
+      if (text) onTranscriptRef.current(text)
+    } catch (err) {
+      setError('On-device transcription failed')
+      console.error('[voice] local transcription failed', err)
+    } finally {
+      setPhase('idle')
+      setModelPct(null)
+    }
+  }, [stopStream, handleModelProgress])
+  const startLocal = useCallback(async () => {
+    setError(null); setNotice(null); setInterim('')
+    cancelGestureRef.current = false
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      // Released during the permission/await — don't record anything.
+      if (cancelGestureRef.current) {
+        stream.getTracks().forEach((t) => t.stop())
+        setPhase('idle')
+        return
+      }
+      streamRef.current = stream
+      chunksRef.current = []
+      const rec = new MediaRecorder(stream)
+      rec.ondataavailable = (e) => { if (e.data.size) chunksRef.current.push(e.data) }
+      rec.onstop = () => { void runLocalTranscription(rec) }
+      recorderRef.current = rec
+      rec.start()
+      setPhase('listening')
+    } catch (err) {
+      stopStream()
+      setPhase('idle')
+      setError(describeMicError(err))
+      console.error('[voice] getUserMedia failed', err)
+    }
+  }, [runLocalTranscription, stopStream])
+  const stopLocal = useCallback(() => {
+    cancelGestureRef.current = true
+    const rec = recorderRef.current
+    if (rec && rec.state !== 'inactive') {
+      try { rec.stop() } catch { /* ignore */ }
+    }
+  }, [])
+  // ─── Push-to-talk gesture ──────────────────────────
+  const handlePointerDown = (e: React.PointerEvent) => {
+    if (!ANY_SUPPORTED || phase !== 'idle') return
+    e.preventDefault()
+    e.currentTarget.setPointerCapture?.(e.pointerId)
+    if (engineRef.current === 'web-speech' && WEB_SPEECH_SUPPORTED) startWebSpeech()
+    else if (LOCAL_SUPPORTED) void startLocal()
+  }
+  const handlePointerUp = (e: React.PointerEvent) => {
+    e.currentTarget.releasePointerCapture?.(e.pointerId)
+    if (engineRef.current === 'web-speech') stopWebSpeech()
+    else stopLocal()
+  }
+  // Clean up on unmount.
+  useEffect(() => () => {
+    try { recognitionRef.current?.abort() } catch { /* ignore */ }
+    try { recorderRef.current?.stop() } catch { /* ignore */ }
+    streamRef.current?.getTracks().forEach((t) => t.stop())
+  }, [])
+  // ─── Render ────────────────────────────────────────
+  const listening = phase === 'listening'
+  const busy = phase === 'transcribing'
+  const title = !ANY_SUPPORTED
+    ? 'Voice typing not supported in this build'
+    : listening
+      ? 'Listening… release to insert'
+      : busy
+        ? 'Transcribing…'
+        : engine === 'local'
+          ? 'Hold to talk (on-device) — speech is typed into the terminal'
+          : 'Hold to talk — speech is typed into the terminal'
+  let chip: { kind: 'listening' | 'busy' | 'notice' | 'error'; text: string } | null = null
+  if (error && phase === 'idle') chip = { kind: 'error', text: error }
+  else if (notice && phase === 'idle') chip = { kind: 'notice', text: notice }
+  else if (listening) chip = { kind: 'listening', text: interim || (engine === 'local' ? 'Recording…' : 'Listening…') }
+  else if (busy) chip = { kind: 'busy', text: modelPct !== null ? `Downloading voice model… ${modelPct}%` : 'Transcribing…' }
+  return (
+    <div className="voice-input-wrap">
+      <button
+        type="button"
+        className={`titlebar-btn titlebar-icon-btn voice-btn ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`}
+        disabled={!ANY_SUPPORTED}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        onContextMenu={(e) => e.preventDefault()}
+        title={title}
+        aria-label="Voice typing (hold to talk)"
+      >
+        <span className="voice-icon" aria-hidden="true">🎤</span>
+        <span className={`voice-dot ${listening ? 'on' : busy ? 'busy' : 'off'}`} />
+      </button>
+      {chip && <div className={`voice-chip ${chip.kind}`}>{chip.text}</div>}
+    </div>
+  )
+}