@phenx-inc/ctlsurf 0.6.0 → 0.7.0

package/src/renderer/App.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { TerminalPanel, destroyTerminal, focusTerminal } from './components/TerminalPanel'
-import { VoiceInput } from './components/VoiceInput'
+import { FloatingMic } from './components/FloatingMic'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
@@ -133,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)
@@ -207,13 +215,13 @@ 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.
+  // 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)
+    window.worker.writePty(activeTabId, trimmed + '\r')
     focusTerminal(activeTabId)
   }, [activeTabId])
 
@@ -482,7 +490,20 @@ export default function App() {
             </svg>
             <span>Tickets</span>
           </button>
-          <VoiceInput onTranscript={handleVoiceTranscript} />
+          <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)
@@ -544,6 +565,13 @@ export default function App() {
           }}
         />
       )}
+
+      {showFloatingMic && (
+        <FloatingMic
+          onTranscript={handleVoiceTranscript}
+          onHide={() => setFloatingMicVisible(false)}
+        />
+      )}
     </div>
   )
 }

package/src/renderer/components/FloatingMic.tsx

@@ -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/VoiceInput.tsx

@@ -76,9 +76,12 @@ function describeMicError(err: unknown): string {
 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 }: VoiceInputProps) {
+export function VoiceInput({ onTranscript, variant = 'titlebar' }: VoiceInputProps) {
   const [engine, setEngine] = useState<Engine>(loadInitialEngine)
   const [phase, setPhase] = useState<Phase>('idle')
   const [interim, setInterim] = useState('')
@@ -291,11 +294,16 @@ export function VoiceInput({ onTranscript }: VoiceInputProps) {
   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={`titlebar-btn titlebar-icon-btn voice-btn ${listening ? 'listening' : ''} ${busy ? 'busy' : ''}`}
+        className={btnClass}
         disabled={!ANY_SUPPORTED}
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
@@ -307,7 +315,7 @@ export function VoiceInput({ onTranscript }: VoiceInputProps) {
         <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>}
+      {chip && <div className={`voice-chip ${chip.kind} ${floating ? 'voice-chip-floating' : ''}`}>{chip.text}</div>}
     </div>
   )
 }

package/src/renderer/styles.css

@@ -659,6 +659,80 @@ html, body, #root {
   white-space: normal;
 }
 
+/* Floating push-to-talk mic (draggable, dismissable FAB) */
+.floating-mic {
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 4px 6px;
+  background: #16161e;
+  border: 1px solid #3b3d57;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.floating-mic-handle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+.floating-mic-handle:active { cursor: grabbing; }
+.floating-mic-grip {
+  color: #565f89;
+  font-size: 12px;
+  line-height: 1;
+  padding: 0 2px;
+}
+.floating-mic-hide {
+  background: transparent;
+  border: none;
+  color: #565f89;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.floating-mic-hide:hover { color: #f7768e; }
+
+.voice-btn-floating {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #2a2b3d;
+  border: 1px solid #3b3d57;
+  color: #a9b1d6;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.15s;
+}
+.voice-btn-floating:hover { border-color: #565f89; }
+.voice-btn-floating .voice-icon { font-size: 22px; }
+.voice-btn-floating .voice-dot {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
+/* Floating chip sits above the round button rather than below it. */
+.voice-chip-floating {
+  top: auto;
+  bottom: 100%;
+  right: auto;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0;
+  margin-bottom: 8px;
+}
+
 /* Editor panel */
 .editor-panel {
   display: flex;