@phenx-inc/ctlsurf 0.6.0 → 0.8.0

package/out/renderer/assets/{index-DJFYmHjz.css → index-B-iM7dFC.css}

@@ -8045,6 +8045,275 @@ 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;
+}
+
+/* Mic source picker (small caret badge on the round mic + dropdown) */
+.voice-source-btn {
+  position: absolute;
+  bottom: -3px;
+  right: -3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 10px;
+  line-height: 1;
+  background: #2a2b3d;
+  border: 1px solid #3b3d57;
+  color: #a9b1d6;
+  cursor: pointer;
+  z-index: 60;
+}
+.voice-source-btn:hover {
+  border-color: #7aa2f7;
+  color: #c0caf5;
+}
+.voice-source-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 10px;
+  min-width: 200px;
+  max-width: 280px;
+  padding: 4px;
+  background: #16161e;
+  border: 1px solid #3b3d57;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+  z-index: 300;
+}
+.voice-source-head {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #565f89;
+  padding: 4px 8px 6px;
+}
+.voice-source-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 8px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: #a9b1d6;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.voice-source-item:hover { background: #1f2335; }
+.voice-source-item.active { color: #7aa2f7; }
+.voice-source-check {
+  flex: 0 0 12px;
+  width: 12px;
+  color: #7aa2f7;
+  font-size: 11px;
+}
+.voice-source-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.voice-source-empty {
+  padding: 6px 8px;
+  font-size: 11px;
+  color: #565f89;
+}
+
+/* Spoken-replies titlebar control */
+.speak-controls {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.speak-btn.active {
+  color: #7aa2f7;
+  border-color: #7aa2f7;
+}
+.speak-pct {
+  font-size: 9px;
+  margin-left: 3px;
+  color: #e0af68;
+}
+.speak-caret {
+  padding: 0 3px;
+  font-size: 10px;
+  min-width: 0;
+}
+.speak-stop {
+  color: #f7768e;
+  border-color: #f7768e;
+}
+.speak-stop:hover { background: #2d2030; }
+.speak-error {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  max-width: 340px;
+  padding: 4px 9px;
+  border-radius: 5px;
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: normal;
+  word-break: break-word;
+  background: #2d2030;
+  color: #f7768e;
+  border: 1px solid #f7768e;
+  z-index: 60;
+}
+.speak-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  min-width: 220px;
+  max-width: 280px;
+  padding: 6px;
+  background: #16161e;
+  border: 1px solid #3b3d57;
+  border-radius: 8px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+  z-index: 300;
+}
+.speak-menu-head {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #565f89;
+  padding: 6px 6px 4px;
+}
+.speak-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 6px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: #a9b1d6;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.speak-menu-item:hover { background: #1f2335; }
+.speak-menu-item.active { color: #7aa2f7; }
+.speak-menu-check {
+  flex: 0 0 12px;
+  width: 12px;
+  color: #7aa2f7;
+  font-size: 11px;
+}
+.speak-select {
+  width: 100%;
+  margin: 2px 0 4px;
+  padding: 4px 6px;
+  background: #1f2335;
+  color: #a9b1d6;
+  border: 1px solid #3b3d57;
+  border-radius: 5px;
+  font-size: 12px;
+}
+.speak-rate {
+  width: 100%;
+  margin: 2px 0 6px;
+  accent-color: #7aa2f7;
+}
+.speak-menu-row {
+  display: flex;
+  gap: 6px;
+  padding: 2px 0 0;
+}
+.speak-menu-btn {
+  flex: 1;
+  padding: 5px 6px;
+  background: #2a2b3d;
+  color: #a9b1d6;
+  border: 1px solid #3b3d57;
+  border-radius: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.speak-menu-btn:hover { border-color: #7aa2f7; color: #c0caf5; }
+
 /* Editor panel */
 .editor-panel {
   display: flex;

package/out/renderer/assets/{javascript-CXqZcnvb.js → javascript-BO_ViZM5.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-rkc9lhpi.js";
-import "./index-B60JU1yI.js";
+import { conf as conf$1, language as language$1 } from "./typescript-BiJRCUcL.js";
+import "./index---H6cxNl.js";
 const conf = conf$1;
 const language = {
   // Set defaultToken to invalid to see what you do not tokenize yet

package/out/renderer/assets/{jsonMode-BuVr-eSl.js → jsonMode-CKp2zvZu.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-B60JU1yI.js";
-import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-Cjr_4HGs.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-Cjr_4HGs.js";
+import { c as createWebWorker, l as languages, e as editor } from "./index---H6cxNl.js";
+import { f as DocumentFormattingEditProvider, g as DocumentRangeFormattingEditProvider, C as CompletionAdapter, H as HoverAdapter, b as DocumentSymbolAdapter, d as DocumentColorAdapter, F as FoldingRangeAdapter, S as SelectionRangeAdapter, e as DiagnosticsAdapter } from "./lspLanguageFeatures-CHWJx_Tl.js";
+import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-CHWJx_Tl.js";
 const STOP_WHEN_IDLE_FOR = 2 * 60 * 1e3;
 class WorkerManager {
   constructor(defaults) {

package/out/renderer/assets/{liquid-LKu0Wd0B.js → liquid-C1eHcrht.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-B60JU1yI.js";
+import { l as languages } from "./index---H6cxNl.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{lspLanguageFeatures-Cjr_4HGs.js → lspLanguageFeatures-CHWJx_Tl.js}

@@ -1,4 +1,4 @@
-import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index-B60JU1yI.js";
+import { R as Range$1, l as languages, e as editor, U as Uri, M as MarkerSeverity } from "./index---H6cxNl.js";
 var DocumentUri;
 (function(DocumentUri2) {
   function is(value) {

package/out/renderer/assets/{mdx-Bl84ILla.js → mdx-Qqdtk7fL.js}

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

package/out/renderer/assets/{python-0sFd9G1k.js → python-DKu7rNbs.js}

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

package/out/renderer/assets/{razor-Cqcu1rLJ.js → razor-BOMpCo6z.js}

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-B60JU1yI.js";
+import { l as languages } from "./index---H6cxNl.js";
 const EMPTY_ELEMENTS = [
   "area",
   "base",

package/out/renderer/assets/{tsMode-CYd3NUkW.js → tsMode-yAjlPR-D.js}

@@ -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-B60JU1yI.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---H6cxNl.js";
 class WorkerManager {
   constructor(_modeId, _defaults) {
     this._modeId = _modeId;

package/out/renderer/assets/{typescript-rkc9lhpi.js → typescript-BiJRCUcL.js}

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

package/out/renderer/assets/{xml-EsHEUps1.js → xml-D4PvYeQq.js}

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

package/out/renderer/assets/{yaml-B9-nQ_s2.js → yaml-BeHVkmnS.js}

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

package/out/renderer/index.html

@@ -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-B60JU1yI.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-DJFYmHjz.css">
+  <script type="module" crossorigin src="./assets/index---H6cxNl.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-B-iM7dFC.css">
 </head>
 <body>
   <div id="root"></div>

package/package.json

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

package/src/main/index.ts

@@ -106,6 +106,7 @@ const orchestrator = new Orchestrator(
     onWorkerMessage: (message) => mainWindow?.webContents.send('worker:message', message),
     onWorkerRegistered: (data) => mainWindow?.webContents.send('worker:registered', data),
     onProjectChanged: (name) => mainWindow?.webContents.send('app:projectChanged', name),
+    onAgentMessage: (text) => mainWindow?.webContents.send('agent:message', text),
     onCwdChanged: () => {
       mainWindow?.webContents.send('app:cwdChanged')
       updateProjectBadge(orchestrator.cwd)
@@ -414,6 +415,12 @@ ipcMain.handle('logchat:set', (_event, enabled: boolean) => {
   return { enabled: orchestrator.logChatEnabled }
 })
 
+ipcMain.handle('speak:get', () => ({ enabled: orchestrator.speakRepliesEnabled }))
+ipcMain.handle('speak:set', (_event, enabled: boolean) => {
+  orchestrator.setSpeakReplies(!!enabled)
+  return { enabled: orchestrator.speakRepliesEnabled }
+})
+
 // ─── Tracking IPC ─────────────────────────────────
 
 ipcMain.handle('tracking:get', () => ({ active: orchestrator.isActiveTabTracking() }))

package/src/main/orchestrator.ts

@@ -32,6 +32,9 @@ export interface SettingsData {
   ctlsurfBaseUrl?: string
   ctlsurfDataspacePageId?: string
   logChat?: boolean
+  // Speak agent replies aloud (Electron desktop only). Drives the transcript
+  // tailer the same way logChat does, independent of chat logging.
+  speakReplies?: boolean
 }
 
 export interface OrchestratorEvents {
@@ -44,6 +47,10 @@ export interface OrchestratorEvents {
   // Human-readable name of the connected ctlsurf project (folder), or null
   // when no project is connected. Optional — only the desktop header uses it.
   onProjectChanged?: (name: string | null) => void
+  // A clean assistant reply from the active agent's transcript, forwarded for
+  // text-to-speech. Optional and wired only by the Electron entry — the
+  // headless build leaves it unset, so replies are never spoken in a terminal.
+  onAgentMessage?: (text: string) => void
 }
 
 interface TabState {
@@ -148,16 +155,30 @@ export class Orchestrator {
     return !!this.settings.logChat
   }
 
+  get speakRepliesEnabled(): boolean {
+    return !!this.settings.speakReplies
+  }
+
   setLogChat(enabled: boolean): void {
     this.settings.logChat = enabled
     this.saveSettings()
     this.bridge.setLoggingEnabled(enabled)
-    if (!enabled) {
-      this.stopChatLogging()
-    } else if (this.activeTabId) {
-      const tab = this.tabs.get(this.activeTabId)
-      if (tab) this.startChatLogging(tab.agent, tab.cwd)
-    }
+    this.restartActiveChatLogging()
+  }
+
+  setSpeakReplies(enabled: boolean): void {
+    this.settings.speakReplies = enabled
+    this.saveSettings()
+    this.restartActiveChatLogging()
+  }
+
+  // Re-evaluate the transcript tailer for the active tab against the current
+  // logChat / speakReplies flags. Both setters funnel through here.
+  private restartActiveChatLogging(): void {
+    this.stopChatLogging()
+    if (!this.activeTabId) return
+    const tab = this.tabs.get(this.activeTabId)
+    if (tab) this.startChatLogging(tab.agent, tab.cwd)
   }
 
   // Agents with native session transcripts (Claude Code, Codex) get exact
@@ -165,16 +186,24 @@ export class Orchestrator {
   // the terminal screen-scraper bridge.
   private startChatLogging(agent: AgentConfig, cwd: string): void {
     this.stopChatLogging()
-    if (!this.settings.logChat) return
+    if (!this.settings.logChat && !this.settings.speakReplies) return
 
     if (supportsTranscriptLogging(agent.id)) {
       this.transcriptTailer = new TranscriptTailer({
         agentId: agent.id,
         cwd,
-        sink: (entry) => this.workerWs.sendChatLog(entry),
+        sink: (entry) => {
+          if (this.settings.logChat) this.workerWs.sendChatLog(entry)
+          // Only assistant replies are spoken; user_input entries are skipped.
+          if (this.settings.speakReplies && entry.type === 'terminal_output') {
+            this.events.onAgentMessage?.(entry.content)
+          }
+        },
       })
       this.transcriptTailer.start()
-    } else {
+    } else if (this.settings.logChat) {
+      // The screen-scraper feeds ctlsurf chat logging only; TTS needs the clean
+      // transcript path, so non-transcript agents aren't spoken aloud.
       this.bridge.startSession()
     }
   }

package/src/preload/index.ts

@@ -109,6 +109,17 @@ const api = {
   setLogChat: (enabled: boolean): Promise<{ enabled: boolean }> =>
     ipcRenderer.invoke('logchat:set', enabled),
 
+  // Speak agent replies (global, Electron-only)
+  getSpeakReplies: (): Promise<{ enabled: boolean }> =>
+    ipcRenderer.invoke('speak:get'),
+  setSpeakReplies: (enabled: boolean): Promise<{ enabled: boolean }> =>
+    ipcRenderer.invoke('speak:set', enabled),
+  onAgentMessage: (callback: (text: string) => void) => {
+    const listener = (_event: Electron.IpcRendererEvent, text: string) => callback(text)
+    ipcRenderer.on('agent:message', listener)
+    return () => ipcRenderer.removeListener('agent:message', listener)
+  },
+
   // Filesystem
   readDir: (dirPath: string): Promise<Array<{ name: string; path: string; isDirectory: boolean }>> =>
     ipcRenderer.invoke('fs:readDir', dirPath),

package/src/renderer/App.tsx

@@ -1,6 +1,7 @@
 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 { SpeakControls } from './components/SpeakControls'
 import { CtlsurfPanel } from './components/CtlsurfPanel'
 import { EditorPanel } from './components/EditorPanel'
 import { AgentPicker } from './components/AgentPicker'
@@ -56,6 +57,9 @@ declare global {
       setTracking: (enabled: boolean) => Promise<{ active: boolean }>
       getLogChat: () => Promise<{ enabled: boolean }>
       setLogChat: (enabled: boolean) => Promise<{ enabled: boolean }>
+      getSpeakReplies: () => Promise<{ enabled: boolean }>
+      setSpeakReplies: (enabled: boolean) => Promise<{ enabled: boolean }>
+      onAgentMessage: (callback: (text: string) => void) => () => void
       createProject: () => Promise<{ ok: boolean; folder_id?: string; error?: string }>
       getWebviewInfo: () => Promise<{
         frontendUrl: string; pageUrl?: string; authenticated: boolean;
@@ -133,6 +137,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 +219,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 +494,21 @@ 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>
+          <SpeakControls />
           <span className="titlebar-separator" />
           {agents.map(a => {
             const activeTab = tabs.find(t => t.id === activeTabId)
@@ -544,6 +570,13 @@ export default function App() {
           }}
         />
       )}
+
+      {showFloatingMic && (
+        <FloatingMic
+          onTranscript={handleVoiceTranscript}
+          onHide={() => setFloatingMicVisible(false)}
+        />
+      )}
     </div>
   )
 }