@phenx-inc/ctlsurf 0.8.0 → 0.10.0

package/src/renderer/index.html

@@ -4,9 +4,71 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ctlsurf-worker</title>
+  <!-- Boot splash styles are inlined here so they paint on the first frame,
+       before the JS bundle and styles.css have loaded. Without this the window
+       shows an empty dark pane while React mounts and the startup IPC runs. -->
+  <style>
+    #boot-splash {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      background: #1a1b26;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      transition: opacity 0.3s ease;
+      -webkit-app-region: drag; /* keep the frameless window draggable during load */
+    }
+    #boot-splash.boot-splash-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+    .boot-spinner {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      border: 3px solid rgba(122, 162, 247, 0.22);
+      border-top-color: #7aa2f7;
+      animation: boot-spin 0.8s linear infinite;
+    }
+    @keyframes boot-spin {
+      to { transform: rotate(360deg); }
+    }
+    .boot-splash-title {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+      color: #c0caf5;
+    }
+    .boot-splash-label {
+      font-size: 12px;
+      letter-spacing: 0.04em;
+      color: #565f89;
+    }
+  </style>
 </head>
 <body>
+  <div id="boot-splash">
+    <div class="boot-spinner"></div>
+    <div class="boot-splash-title">ctlsurf</div>
+    <div class="boot-splash-label">Starting up…</div>
+  </div>
   <div id="root"></div>
+  <script>
+    // Fades out and removes the boot splash. Called by the React app once its
+    // startup IPC has settled (see App.tsx). The timeout is a safety net so a
+    // hung startup never leaves the user stuck behind the splash forever.
+    window.__dismissSplash = function () {
+      var el = document.getElementById('boot-splash')
+      if (!el) return
+      el.classList.add('boot-splash-hidden')
+      setTimeout(function () { el.remove() }, 350)
+    }
+    setTimeout(function () { window.__dismissSplash() }, 10000)
+  </script>
   <script type="module" src="./main.tsx"></script>
 </body>
 </html>

package/src/renderer/lib/localWhisper.ts

@@ -107,7 +107,14 @@ async function blobToPcm16k(blob: Blob): Promise<Float32Array | null> {
   return rendered.getChannelData(0)
 }
 
-export async function transcribeBlob(blob: Blob, onProgress?: (p: ModelProgress) => void): Promise<string> {
+export async function transcribeBlob(
+  blob: Blob,
+  onProgress?: (p: ModelProgress) => void,
+  // Optional live preview: called with the transcript-so-far as the model
+  // decodes, for progressive on-screen feedback. The return value (below) is
+  // still the authoritative, de-duplicated text used for the actual insert.
+  onPartial?: (text: string) => void,
+): Promise<string> {
   // Decode first so a silent clip never triggers the (one-time, ~75MB) model
   // download just to be thrown away below.
   const pcm = await blobToPcm16k(blob)
@@ -119,7 +126,44 @@ export async function transcribeBlob(blob: Blob, onProgress?: (p: ModelProgress)
   }
 
   const transcriber = await loadTranscriber(onProgress)
-  const result = await transcriber(pcm)
+
+  // Stream decoded text to onPartial as it's generated. `committed` holds text
+  // from finished chunks; `current` is the in-progress chunk — keeping them
+  // separate avoids the stride overlap duplicating words across 30s boundaries
+  // in the preview. Best-effort: if the streamer can't be built we just skip the
+  // preview and still return the final text.
+  let streamer: unknown
+  if (onPartial) {
+    try {
+      const { WhisperTextStreamer } = await import('@huggingface/transformers')
+      const tokenizer = (transcriber as unknown as {
+        tokenizer: ConstructorParameters<typeof WhisperTextStreamer>[0]
+      }).tokenizer
+      let committed = ''
+      let current = ''
+      streamer = new WhisperTextStreamer(tokenizer, {
+        on_chunk_start: () => { current = '' },
+        callback_function: (delta: string) => {
+          current += delta
+          onPartial((committed + current).replace(/\s+/g, ' ').trim())
+        },
+        on_chunk_end: () => { committed = (committed + current).trim() + ' '; current = '' },
+      })
+    } catch (err) {
+      console.warn('[voice] streaming preview unavailable', err)
+    }
+  }
+
+  // Whisper only attends to a 30s window at a time. Without chunk_length_s the
+  // pipeline truncates to that first window, silently dropping anything spoken
+  // past ~30s. Chunking transcribes the full clip in overlapping 30s windows
+  // (stride gives overlap so words aren't lost at the seams) so long speeches
+  // are captured in full.
+  const result = await transcriber(pcm, {
+    chunk_length_s: 30,
+    stride_length_s: 5,
+    ...(streamer ? { streamer } : {}),
+  })
   const text = (Array.isArray(result)
     ? result.map((r) => r.text).join(' ')
     : result?.text || '').trim()

package/src/renderer/lib/speech.ts

@@ -164,6 +164,23 @@ class SpeechController {
   onActivityChange: ((active: boolean) => void) | null = null
   onError: ((message: string) => void) | null = null
 
+  // Multiple UI surfaces (titlebar SpeakControls + floating read button) need
+  // the speaking state at once, so beyond the single onActivityChange slot we
+  // also keep a listener set.
+  private activityListeners = new Set<(active: boolean) => void>()
+
+  get isActive(): boolean {
+    return this.active
+  }
+
+  // Subscribe to speaking-state changes. Fires immediately with the current
+  // state so a late subscriber syncs. Returns an unsubscribe function.
+  onActivity(fn: (active: boolean) => void): () => void {
+    this.activityListeners.add(fn)
+    fn(this.active)
+    return () => { this.activityListeners.delete(fn) }
+  }
+
   // Prime/resume the AudioContext from a user gesture so neural playback isn't
   // blocked by the browser autoplay policy (the System engine is unaffected).
   unlock(): void {
@@ -216,6 +233,7 @@ class SpeechController {
     if (this.active === a) return
     this.active = a
     this.onActivityChange?.(a)
+    this.activityListeners.forEach((fn) => fn(a))
   }
 
   private async drain(): Promise<void> {

package/src/renderer/styles.css

@@ -202,6 +202,24 @@ html, body, #root {
   background: #565f89;
 }
 
+/* Agent is waiting on the user — pulse to draw the eye across tabs. */
+.terminal-tab-dot.awaiting {
+  background: #e0af68; /* amber: waiting for next prompt */
+  color: #e0af68;      /* drives the box-shadow glow via currentColor */
+  animation: tab-dot-pulse 1.1s ease-in-out infinite;
+}
+
+.terminal-tab-dot.decision {
+  background: #f7768e; /* red: blocked on an approval/permission prompt */
+  color: #f7768e;
+  animation: tab-dot-pulse 1.1s ease-in-out infinite;
+}
+
+@keyframes tab-dot-pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+  50% { opacity: 0.35; box-shadow: 0 0 4px 1px currentColor; }
+}
+
 .terminal-tab-close {
   background: none;
   border: none;
@@ -701,6 +719,40 @@ html, body, #root {
 }
 .floating-mic-hide:hover { color: #f7768e; }
 
+/* Smaller sibling of the round mic: read the last agent reply aloud. */
+.floating-mic-read {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #2a2b3d;
+  border: 1px solid #3b3d57;
+  color: #a9b1d6;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.floating-mic-read:hover { border-color: #565f89; color: #c0caf5; }
+.floating-mic-read.speaking {
+  color: #7aa2f7;
+  border-color: #7aa2f7;
+}
+.floating-mic-note {
+  position: absolute;
+  bottom: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-size: 11px;
+  color: #565f89;
+  background: #16161e;
+  border: 1px solid #3b3d57;
+  border-radius: 6px;
+  padding: 2px 6px;
+  pointer-events: none;
+}
+
 .voice-btn-floating {
   width: 48px;
   height: 48px;