@phenx-inc/ctlsurf 0.7.0 → 0.8.0

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

@@ -8119,6 +8119,201 @@ html, body, #root {
   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-n_iZZzDX.js → javascript-BO_ViZM5.js}

@@ -1,5 +1,5 @@
-import { conf as conf$1, language as language$1 } from "./typescript-DhPw4VVg.js";
-import "./index-dRvutfbl.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-DXDczSNu.js → jsonMode-CKp2zvZu.js}

@@ -1,6 +1,6 @@
-import { c as createWebWorker, l as languages, e as editor } from "./index-dRvutfbl.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-DqzMqkRk.js";
-import { a, D, h, R, c, i, j, t, k } from "./lspLanguageFeatures-DqzMqkRk.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-B1QweUh7.js → liquid-C1eHcrht.js}

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

package/out/renderer/assets/{lspLanguageFeatures-DqzMqkRk.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-dRvutfbl.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-BCv8lm5e.js → mdx-Qqdtk7fL.js}

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

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

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

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

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

package/out/renderer/assets/{tsMode-C7m6Kr5E.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-dRvutfbl.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-DhPw4VVg.js → typescript-BiJRCUcL.js}

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

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

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

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

@@ -1,4 +1,4 @@
-import { l as languages } from "./index-dRvutfbl.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-dRvutfbl.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-Cf-RsxoC.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.7.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 { 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;
@@ -504,6 +508,7 @@ export default function App() {
               <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)