npm - @phenx-inc/ctlsurf - Versions diffs - 0.5.2 → 0.7.0 - Mend

@phenx-inc/ctlsurf 0.5.2 → 0.7.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 (33) hide show

package/out/renderer/assets/{tsMode-EIuSGG42.js → tsMode-C7m6Kr5E.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-DBt_rov1.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-dRvutfbl.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-DQkV4kKA.js → typescript-DhPw4VVg.js} RENAMED Viewed

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

package/out/renderer/assets/{xml-DJ0OOQTu.js → xml-B0WLFJ2U.js} RENAMED Viewed

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

package/out/renderer/assets/{yaml-DxX26XLN.js → yaml-BWyn9Wd7.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-DBt_rov1.js";
+import { l as languages } from "./index-dRvutfbl.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-DBt_rov1.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-ezC-iarf.css">
+  <script type="module" crossorigin src="./assets/index-dRvutfbl.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-Cf-RsxoC.css">
 </head>
 <body>
   <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@phenx-inc/ctlsurf",
-  "version": "0.5.2",
+  "version": "0.7.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 {

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 { FloatingMic } from './components/FloatingMic'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
@@ -132,6 +133,14 @@ export default function App() {
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id)
   const [trackingActive, setTrackingActive] = useState(false)
   const [showTicketPanel, setShowTicketPanel] = useState(false)
+  // Draggable on-canvas push-to-talk mic; visibility persists across launches.
+  const [showFloatingMic, setShowFloatingMic] = useState<boolean>(() => {
+    try { return localStorage.getItem('ctlsurf.floatingMicVisible') !== 'false' } catch { return true }
+  })
+  const setFloatingMicVisible = useCallback((v: boolean) => {
+    setShowFloatingMic(v)
+    try { localStorage.setItem('ctlsurf.floatingMicVisible', String(v)) } catch { /* ignore */ }
+  }, [])
   // Agent picker state: which tab is being configured (null = initial picker for first tab)
   const [pickerTargetTabId, setPickerTargetTabId] = useState<string | null>(tabs[0].id)
@@ -206,6 +215,16 @@ export default function App() {
     }
   }, [trackingActive])
+  // Voice typing: inject the transcribed text into the active terminal as if it
+  // were typed, then send a carriage return to submit it (same as pressing Enter
+  // after typing), and refocus the terminal.
+  const handleVoiceTranscript = useCallback((text: string) => {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    window.worker.writePty(activeTabId, trimmed + '\r')
+    focusTerminal(activeTabId)
+  }, [activeTabId])
   const cwdRef = useRef<string | null>(null)
   const handleSpawn = useCallback(async (tabId: string, agent: AgentConfig) => {
@@ -471,6 +490,20 @@ export default function App() {
             </svg>
             <span>Tickets</span>
           </button>
+          <button
+            className={`titlebar-btn titlebar-icon-btn ${showFloatingMic ? 'active' : ''}`}
+            onClick={() => setFloatingMicVisible(!showFloatingMic)}
+            title={showFloatingMic ? 'Hide floating mic' : 'Show floating mic'}
+            aria-label="Toggle floating mic"
+          >
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor"
+              strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+              <line x1="12" y1="19" x2="12" y2="23" />
+              <line x1="8" y1="23" x2="16" y2="23" />
+            </svg>
+          </button>
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)
@@ -532,6 +565,13 @@ export default function App() {
           }}
         />
       )}
+      {showFloatingMic && (
+        <FloatingMic
+          onTranscript={handleVoiceTranscript}
+          onHide={() => setFloatingMicVisible(false)}
+        />
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { VoiceInput } from './VoiceInput'
+// A draggable, dismissable push-to-talk mic that floats over the panes. It wraps
+// the same <VoiceInput> push-to-talk logic used in the titlebar; only the chrome
+// (drag handle + hide button) and positioning live here.
+const POS_KEY = 'ctlsurf.floatingMicPos'
+interface Pos { x: number; y: number }
+interface FloatingMicProps {
+  onTranscript: (text: string) => void
+  onHide: () => void
+}
+// Keep the button clear of the 38px titlebar and 24px status bar.
+const EDGE = 20
+const TOP_MIN = 46
+const BOTTOM_GAP = 36
+function loadPos(): Pos | null {
+  try {
+    const raw = localStorage.getItem(POS_KEY)
+    if (raw) {
+      const p = JSON.parse(raw) as Partial<Pos>
+      if (typeof p.x === 'number' && typeof p.y === 'number') return { x: p.x, y: p.y }
+    }
+  } catch { /* ignore */ }
+  return null
+}
+export function FloatingMic({ onTranscript, onHide }: FloatingMicProps) {
+  const [pos, setPos] = useState<Pos | null>(loadPos)
+  const elRef = useRef<HTMLDivElement>(null)
+  // Pointer-to-element offset captured at drag start; null when not dragging.
+  const dragRef = useRef<{ dx: number; dy: number } | null>(null)
+  // Keep the button fully inside the viewport (used on drag, mount, and resize).
+  const clamp = useCallback((x: number, y: number): Pos => {
+    const el = elRef.current
+    const w = el?.offsetWidth ?? 64
+    const h = el?.offsetHeight ?? 90
+    return {
+      x: Math.max(EDGE, Math.min(x, window.innerWidth - w - EDGE)),
+      y: Math.max(TOP_MIN, Math.min(y, window.innerHeight - h - BOTTOM_GAP)),
+    }
+  }, [])
+  // First mount with no saved position: default to bottom-right.
+  useEffect(() => {
+    if (pos) return
+    const el = elRef.current
+    const w = el?.offsetWidth ?? 64
+    const h = el?.offsetHeight ?? 90
+    setPos({
+      x: window.innerWidth - w - EDGE,
+      y: window.innerHeight - h - BOTTOM_GAP,
+    })
+  }, [pos])
+  // Keep it reachable if the window shrinks.
+  useEffect(() => {
+    const onResize = () => setPos((p) => (p ? clamp(p.x, p.y) : p))
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [clamp])
+  const onHandleDown = useCallback((e: React.PointerEvent) => {
+    const el = elRef.current
+    if (!el) return
+    e.preventDefault()
+    const rect = el.getBoundingClientRect()
+    dragRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top }
+    e.currentTarget.setPointerCapture?.(e.pointerId)
+  }, [])
+  const onHandleMove = useCallback((e: React.PointerEvent) => {
+    const d = dragRef.current
+    if (!d) return
+    setPos(clamp(e.clientX - d.dx, e.clientY - d.dy))
+  }, [clamp])
+  const onHandleUp = useCallback((e: React.PointerEvent) => {
+    if (!dragRef.current) return
+    dragRef.current = null
+    e.currentTarget.releasePointerCapture?.(e.pointerId)
+    setPos((p) => {
+      if (p) {
+        try { localStorage.setItem(POS_KEY, JSON.stringify(p)) } catch { /* ignore */ }
+      }
+      return p
+    })
+  }, [])
+  // Render off-screen+hidden until the first position is computed (no flash).
+  const style: React.CSSProperties = pos
+    ? { left: pos.x, top: pos.y }
+    : { left: -9999, top: -9999, visibility: 'hidden' }
+  return (
+    <div ref={elRef} className="floating-mic" style={style}>
+      <div
+        className="floating-mic-handle"
+        onPointerDown={onHandleDown}
+        onPointerMove={onHandleMove}
+        onPointerUp={onHandleUp}
+        onPointerCancel={onHandleUp}
+        title="Drag to move"
+        aria-label="Drag floating mic"
+      >
+        <span className="floating-mic-grip" aria-hidden="true">⠿</span>
+        <button
+          type="button"
+          className="floating-mic-hide"
+          // Don't let a click on the hide button start a drag.
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={onHide}
+          title="Hide floating mic"
+          aria-label="Hide floating mic"
+        >
+          ×
+        </button>
+      </div>
+      <VoiceInput variant="floating" onTranscript={onTranscript} />
+    </div>
+  )
+}

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

@@ -185,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,321 @@
+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
+  // 'titlebar' (default) renders the compact titlebar pill; 'floating' renders
+  // a round FAB used by the draggable on-canvas mic (see FloatingMic).
+  variant?: 'titlebar' | 'floating'
+}
+export function VoiceInput({ onTranscript, variant = 'titlebar' }: 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…' }
+  const floating = variant === 'floating'
+  const btnClass = floating
+    ? `voice-btn voice-btn-floating ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`
+    : `titlebar-btn titlebar-icon-btn voice-btn ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`
+  return (
+    <div className="voice-input-wrap">
+      <button
+        type="button"
+        className={btnClass}
+        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} ${floating ? 'voice-chip-floating' : ''}`}>{chip.text}</div>}
+    </div>
+  )
+}