@agent-native/core 0.84.12 → 0.84.14

package/corpus/templates/clips/chrome-extension/src/offscreen.ts

@@ -17,7 +17,11 @@
 // app recorder via @shared/recording-core so the server contract can't drift.
 
 import { scheduleReadyChime } from "@shared/recording-audio";
-import { chunkUploadUrl, pickMimeType } from "@shared/recording-core";
+import {
+  chunkUploadUrl,
+  pickMimeType,
+  type UploadMode,
+} from "@shared/recording-core";
 import { MAX_UPLOAD_BYTES } from "@shared/upload-limits";
 
 import { waitForReadyRecordingAfterFinalizeError } from "./finalize-recovery";
@@ -63,6 +67,7 @@ type BeginMessage = {
   sessionId: string;
   recordingId: string;
   uploadUrl: string;
+  uploadMode?: UploadMode;
   hasCamera?: boolean;
   // Pre-roll countdown delay, owned here in the offscreen document (a reliable
   // context) rather than the service worker (which can suspend and drop timers).
@@ -114,6 +119,7 @@ type ActiveRecording = {
   sessionId: string;
   recordingId: string;
   uploadUrl: string;
+  uploadMode: UploadMode;
   authToken: string | null;
   mode: CaptureMode;
   startedAtMs: number;
@@ -134,6 +140,8 @@ type ActiveRecording = {
   // Set if the recording grew past the buffer ceiling and we stopped retaining
   // — at that point a local save can't be guaranteed, so we don't promise one.
   localBufferOverflow: boolean;
+  pendingStreamBlobs: Blob[];
+  pendingStreamBytes: number;
   cancelled: boolean;
   // Set when the recorder is being torn down to start over on the same source
   // streams, so the stop handler skips the usual track cleanup.
@@ -155,6 +163,8 @@ type ActiveRecording = {
   rejectStopped: (error: Error) => void;
 };
 
+const GCS_CHUNK_ALIGN_BYTES = 256 * 1024;
+const STREAM_CHUNK_BYTES = 15 * GCS_CHUNK_ALIGN_BYTES; // 3.75 MiB
 const UPLOAD_SLICE_BYTES = 3 * 1024 * 1024;
 
 // Don't retain more than the upload ceiling — past it the server rejects the
@@ -578,6 +588,32 @@ async function uploadBlobInSlices(
   }
 }
 
+async function uploadStreamingBlob(
+  recording: ActiveRecording,
+  blob: Blob,
+): Promise<void> {
+  if (blob.size === 0) return;
+  recording.pendingStreamBlobs.push(blob);
+  recording.pendingStreamBytes += blob.size;
+
+  while (recording.pendingStreamBytes >= STREAM_CHUNK_BYTES) {
+    if (recording.cancelled || recording.uploadFailure) return;
+    const combined = new Blob(recording.pendingStreamBlobs, {
+      type: recording.mimeType,
+    });
+    const head = combined.slice(0, STREAM_CHUNK_BYTES, recording.mimeType);
+    const tail = combined.slice(
+      STREAM_CHUNK_BYTES,
+      undefined,
+      recording.mimeType,
+    );
+    recording.pendingStreamBlobs = tail.size > 0 ? [tail] : [];
+    recording.pendingStreamBytes = tail.size;
+    const index = recording.chunkIndex++;
+    await uploadChunk(recording, head, index);
+  }
+}
+
 function stopStreams(streams: (MediaStream | null)[]): void {
   for (const stream of streams) {
     if (!stream) continue;
@@ -744,6 +780,7 @@ async function begin(message: BeginMessage): Promise<{
     sessionId: ready.sessionId,
     recordingId: message.recordingId,
     uploadUrl: message.uploadUrl,
+    uploadMode: message.uploadMode ?? "buffered",
     authToken: message.authToken ?? null,
     mode: ready.mode,
     startedAtMs: 0,
@@ -763,6 +800,8 @@ async function begin(message: BeginMessage): Promise<{
     recordedBlobs: [],
     recordedBytes: 0,
     localBufferOverflow: false,
+    pendingStreamBlobs: [],
+    pendingStreamBytes: 0,
     cancelled: false,
     restarting: false,
     startTimer: null,
@@ -798,7 +837,11 @@ async function begin(message: BeginMessage): Promise<{
     // rejected promise that surfaces as an "Uncaught (in promise)" error (bad
     // look in a Chrome Web Store review). finalizeStop reads recording.upload-
     // Failure and surfaces it through the normal error path instead.
-    const upload = uploadBlobInSlices(recording, event.data).catch((err) => {
+    const upload = (
+      recording.uploadMode === "streaming"
+        ? uploadStreamingBlob(recording, event.data)
+        : uploadBlobInSlices(recording, event.data)
+    ).catch((err) => {
       recording.uploadFailure =
         err instanceof Error ? err : new Error(String(err));
       captureExtensionError(recording.uploadFailure, {
@@ -1001,20 +1044,22 @@ async function finalizeStop(recording: ActiveRecording): Promise<void> {
     }
     let result: UploadResult;
     try {
-      result = await uploadChunk(
-        recording,
-        new Blob([], { type: recording.mimeType }),
-        recording.chunkIndex,
-        {
-          isFinal: true,
-          total: recording.chunkIndex,
-          durationMs,
-          width: recording.dimensions.width,
-          height: recording.dimensions.height,
-          hasAudio: recording.hasAudio,
-          hasCamera: recording.hasCamera,
-        },
-      );
+      const finalBlob =
+        recording.uploadMode === "streaming"
+          ? new Blob(recording.pendingStreamBlobs, { type: recording.mimeType })
+          : new Blob([], { type: recording.mimeType });
+      recording.pendingStreamBlobs = [];
+      recording.pendingStreamBytes = 0;
+      const finalIndex = recording.chunkIndex;
+      result = await uploadChunk(recording, finalBlob, finalIndex, {
+        isFinal: true,
+        total: finalIndex + (finalBlob.size > 0 ? 1 : 0),
+        durationMs,
+        width: recording.dimensions.width,
+        height: recording.dimensions.height,
+        hasAudio: recording.hasAudio,
+        hasCamera: recording.hasCamera,
+      });
     } catch (err) {
       const error = err instanceof Error ? err : new Error(String(err));
       (error as { finalUpload?: boolean }).finalUpload = true;

package/corpus/templates/clips/desktop/src/lib/recorder.ts

@@ -1278,6 +1278,18 @@ async function trashRecording(
   }
 }
 
+async function cleanupCancelledRemoteRecording(
+  serverUrl: string,
+  recordingId: string,
+): Promise<void> {
+  await abortRecordingUpload(
+    serverUrl,
+    recordingId,
+    "Recording cancelled by user",
+  );
+  await trashRecording(serverUrl, recordingId);
+}
+
 class CountdownCancelledError extends Error {
   constructor() {
     super("Recording cancelled during countdown");
@@ -2029,7 +2041,12 @@ async function startNativeFullscreenRecording(
         }
         stateUnlistens.forEach((u) => u());
         stateUnlistens = [];
-        await transcriptionCapture?.cancel().catch(() => {});
+        void transcriptionCapture?.cancel().catch((err) => {
+          console.warn(
+            "[clips-recorder] native transcription cancel failed:",
+            err,
+          );
+        });
         await localCameraExport?.cancel().catch(() => {});
         await invoke("native_fullscreen_recording_cancel").catch((err) =>
           console.warn(
@@ -2049,12 +2066,14 @@ async function startNativeFullscreenRecording(
         streamCleanups.forEach((cleanup) => cleanup());
         await invoke("hide_overlays").catch(() => {});
         if (!localOnly && id) {
-          await abortRecordingUpload(
-            params.serverUrl,
-            id,
-            "Recording cancelled by user",
+          void cleanupCancelledRemoteRecording(params.serverUrl, id).catch(
+            (err) => {
+              console.warn(
+                "[clips-recorder] cancelled recording cleanup failed:",
+                err,
+              );
+            },
           );
-          await trashRecording(params.serverUrl, id);
         }
       })();
       return cancelPromise;
@@ -3244,7 +3263,9 @@ async function startRecordingInner(
       if (tickHandle) clearInterval(tickHandle);
       stateUnlistens.forEach((u) => u());
       stateUnlistens = [];
-      transcriptionCapture?.cancel().catch(() => {});
+      void transcriptionCapture?.cancel().catch((err) => {
+        console.warn("[clips-recorder] transcription cancel failed:", err);
+      });
       // Remove MediaRecorder's data handler so any final `ondataavailable`
       // from the stop() below doesn't push a new Blob into `inflight`
       // after we've decided to discard everything.
@@ -3282,18 +3303,15 @@ async function startRecordingInner(
       inflight.clear();
       await invoke("hide_recording_chrome").catch(() => {});
       // Tell the server to abort the partial recording (drops chunks from
-      // application_state, flips the recording row to 'failed'). Fire and
-      // forget with a short-circuit on failure — we don't want to keep the
-      // user waiting on a network call to a dev server that may be down.
-      try {
-        await abortRecordingUpload(
-          params.serverUrl,
-          id,
-          "Recording cancelled by user",
+      // application_state, flips the recording row to 'failed'), then trash
+      // it. This is best-effort background cleanup: redo/cancel must release
+      // the desktop chrome immediately even if the server is slow or offline.
+      if (id) {
+        void cleanupCancelledRemoteRecording(params.serverUrl, id).catch(
+          (err) => {
+            console.warn("[clips-recorder] abort failed (non-fatal):", err);
+          },
         );
-        await trashRecording(params.serverUrl, id);
-      } catch (err) {
-        console.warn("[clips-recorder] abort failed (non-fatal):", err);
       }
       await deleteBrowserRecordingBackup(id).catch((err) => {
         console.warn("[clips-recorder] local backup cleanup failed:", err);

package/corpus/templates/clips/desktop/src/lib/voice-dictation.ts

@@ -102,6 +102,11 @@ interface VoiceSession {
   // Accumulated final transcript from interim webkit results, in case
   // the recognition session ends before we ask it to stop.
   browserTranscript: string;
+  // Native / Whisper engines can emit one final segment per pause. Keep
+  // committed segments separate from the current partial so long dictations
+  // survive natural pauses.
+  finalTranscriptParts: string[];
+  interimTranscript: string;
   // browser-only: monotonic timestamp of the most recent
   // recognition.onresult event. stop() reads this to decide whether
   // the user was actively speaking up to Fn release (worth a tail-
@@ -229,6 +234,73 @@ function setFlowState(state: FlowState): void {
   emit("voice:state-change", { state }).catch(() => {});
 }
 
+let lastStartPingAt = 0;
+
+function playStartPing(): void {
+  const now = Date.now();
+  if (now - lastStartPingAt < 250) return;
+  lastStartPingAt = now;
+  try {
+    const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+    if (!AudioCtx) return;
+    const ctx = new AudioCtx();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    const start = ctx.currentTime;
+    osc.type = "sine";
+    osc.frequency.setValueAtTime(880, start);
+    osc.frequency.exponentialRampToValueAtTime(1174.66, start + 0.08);
+    gain.gain.setValueAtTime(0.0001, start);
+    gain.gain.exponentialRampToValueAtTime(0.08, start + 0.015);
+    gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.13);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start(start);
+    osc.stop(start + 0.14);
+    window.setTimeout(() => {
+      ctx.close().catch(() => {});
+    }, 250);
+  } catch {
+    // Sound feedback is best-effort; the moving bars remain the visual cue.
+  }
+}
+
+function enterRecordingState(): void {
+  setFlowState("recording");
+  playStartPing();
+}
+
+function joinedTranscript(parts: string[], interim: string): string {
+  return [...parts, interim].filter(Boolean).join(" ").trim();
+}
+
+function appendFinalTranscript(session: VoiceSession, text: string): void {
+  const clean = text.trim();
+  if (!clean) return;
+  const committed = joinedTranscript(session.finalTranscriptParts, "");
+  if (!committed) {
+    session.finalTranscriptParts = [clean];
+  } else if (clean === committed || clean.startsWith(`${committed} `)) {
+    // Some recognizers send the whole dictation as their final result.
+    session.finalTranscriptParts = [clean];
+  } else if (session.finalTranscriptParts.at(-1) !== clean) {
+    session.finalTranscriptParts.push(clean);
+  }
+  session.interimTranscript = "";
+  session.browserTranscript = joinedTranscript(
+    session.finalTranscriptParts,
+    "",
+  );
+}
+
+function setInterimTranscript(session: VoiceSession, text: string): void {
+  session.interimTranscript = text.trim();
+  session.browserTranscript = joinedTranscript(
+    session.finalTranscriptParts,
+    session.interimTranscript,
+  );
+}
+
 function stopMeter(session: VoiceSession): void {
   if (session.raf != null) {
     cancelAnimationFrame(session.raf);
@@ -698,7 +770,6 @@ export function installDesktopVoiceDictation(
     } catch (err) {
       console.warn("[voice-dictation] vocab learn-monitor failed:", err);
     }
-    emit("voice:partial-transcript", { text }).catch(() => {});
     if (target.cleanupProvider) setFlowState("idle");
     return text;
   };
@@ -808,7 +879,7 @@ export function installDesktopVoiceDictation(
         abortPendingStart();
         return;
       }
-      setFlowState("recording");
+      enterRecordingState();
       const mimeType = pickMimeType();
       const recorder = new MediaRecorder(stream, { mimeType });
       const next: VoiceSession = {
@@ -822,6 +893,8 @@ export function installDesktopVoiceDictation(
         mimeType: recorder.mimeType || mimeType,
         recognition: null,
         browserTranscript: "",
+        finalTranscriptParts: [],
+        interimTranscript: "",
         lastResultAt: 0,
         startedAt: Date.now(),
         stopping: false,
@@ -948,7 +1021,7 @@ export function installDesktopVoiceDictation(
         abortPendingStart();
         return;
       }
-      setFlowState("recording");
+      enterRecordingState();
       // Reset any prior partial transcript display in the flow-bar.
       emit("voice:partial-transcript", { text: "" }).catch(() => {});
       const next: VoiceSession = {
@@ -962,6 +1035,8 @@ export function installDesktopVoiceDictation(
         mimeType: "",
         recognition: null,
         browserTranscript: "",
+        finalTranscriptParts: [],
+        interimTranscript: "",
         lastResultAt: 0,
         startedAt: Date.now(),
         stopping: false,
@@ -1043,7 +1118,7 @@ export function installDesktopVoiceDictation(
         abortPendingStart();
         return;
       }
-      setFlowState("recording");
+      enterRecordingState();
       emit("voice:partial-transcript", { text: "" }).catch(() => {});
       const next: VoiceSession = {
         kind: "whisper",
@@ -1056,6 +1131,8 @@ export function installDesktopVoiceDictation(
         mimeType: "",
         recognition: null,
         browserTranscript: "",
+        finalTranscriptParts: [],
+        interimTranscript: "",
         lastResultAt: 0,
         startedAt: Date.now(),
         stopping: false,
@@ -1112,7 +1189,7 @@ export function installDesktopVoiceDictation(
         abortPendingStart();
         return;
       }
-      setFlowState("recording");
+      enterRecordingState();
       // Reset any prior partial transcript display in the flow-bar.
       emit("voice:partial-transcript", { text: "" }).catch(() => {});
       const recognition = new Ctor();
@@ -1131,6 +1208,8 @@ export function installDesktopVoiceDictation(
         mimeType: "",
         recognition,
         browserTranscript: "",
+        finalTranscriptParts: [],
+        interimTranscript: "",
         lastResultAt: 0,
         startedAt: Date.now(),
         stopping: false,
@@ -1203,10 +1282,6 @@ export function installDesktopVoiceDictation(
         // the tail because Web Speech only marks a segment as `isFinal`
         // after a confidence-threshold pass.
         next.browserTranscript = (finalSoFar + interim).trim();
-        // Stream the live transcript to the flow-bar.
-        emit("voice:partial-transcript", {
-          text: next.browserTranscript,
-        }).catch(() => {});
       };
       recognition.onerror = (ev) => {
         if (ev.error !== "no-speech" && ev.error !== "aborted") {
@@ -1732,31 +1807,28 @@ export function installDesktopVoiceDictation(
     if (!current || (current.kind !== "native" && current.kind !== "whisper"))
       return;
     if (current.cancelled || current.stopping) return;
-    current.browserTranscript = text.trim();
+    setInterimTranscript(current, text);
   })
     .then((u) => unlistens.push(u))
     .catch(() => {});
   onFinalTranscript(({ text }) => {
-    // Final transcripts are ONLY emitted by Rust after `endAudio()`,
-    // which we call in stop(). At that point the session has been
-    // moved from `session` to `lingeringSession`, so route there
-    // exclusively. Do NOT fall back to the active `session`: a
-    // late-arriving final from the previous session would otherwise
-    // overwrite the new session's transcript with stale text.
-    const current =
-      lingeringSession &&
-      (lingeringSession.kind === "native" ||
-        lingeringSession.kind === "whisper")
-        ? lingeringSession
+    // Whisper emits final segments throughout a long dictation whenever the
+    // speaker pauses. Native speech emits its final after stop, when the
+    // stopped session is parked in lingeringSession. Native final events do not
+    // carry a session id, so never fall back to an active native session here:
+    // a late final from the previous stop could otherwise be appended to a new
+    // dictation.
+    const current = lingeringSession
+      ? lingeringSession
+      : session && session.kind === "whisper" && !session.stopping
+        ? session
         : null;
     if (!current) return;
     if (current.cancelled) return;
-    // Final beats partial — overwrite so a `complete_voice_dictation`
-    // from a late stop() picks up the better text.
-    current.browserTranscript = text.trim();
-    // If stop() is waiting on this event before lingering, trigger the
-    // finalize sequence now (paste → 1s linger → dismiss).
-    current.onNativeFinalize?.();
+    appendFinalTranscript(current, text);
+    if (current === lingeringSession) {
+      current.onNativeFinalize?.();
+    }
   })
     .then((u) => unlistens.push(u))
     .catch(() => {});

package/corpus/templates/clips/desktop/src/overlays/flow-bar.tsx

@@ -3,11 +3,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { emit, listen } from "@tauri-apps/api/event";
 import { useEffect, useRef, useState } from "react";
 
-import {
-  onAudioLevel,
-  onFinalTranscript,
-  onPartialTranscript,
-} from "../lib/transcription-engine";
+import { onAudioLevel } from "../lib/transcription-engine";
 
 type FlowState = "idle" | "recording" | "processing" | "complete" | "error";
 
@@ -28,7 +24,6 @@ export function FlowBar() {
   // "idle" caused the bar to flash an "EN" language pill that never went
   // away if the start event was missed.
   const [state, setState] = useState<FlowState>("recording");
-  const [partialTranscript, setPartialTranscript] = useState("");
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const levelRef = useRef(0);
   const rafRef = useRef<number | null>(null);
@@ -63,23 +58,6 @@ export function FlowBar() {
       }),
     );
 
-    trackListen(
-      onPartialTranscript(({ text }) => {
-        // Live transcript as the user speaks — rendered above the pill.
-        // Empty payload clears the display (sent at session start/end).
-        setPartialTranscript(text);
-      }),
-    );
-
-    trackListen(
-      onFinalTranscript(({ text }) => {
-        // Final result from the recognizer (only fires after stop is
-        // requested). Show it on the bar — the last word lingers there
-        // for ~1s before voice-dictation.ts dismisses everything.
-        if (text) setPartialTranscript(text);
-      }),
-    );
-
     return () => {
       stopped = true;
       unlistens.forEach((u) => {
@@ -166,29 +144,12 @@ export function FlowBar() {
     }, 250);
   };
 
-  // The transcript chip is independent of the pill — it can linger on
-  // its own after Fn release while the pill dismisses snappily. Voice-
-  // dictation.ts emits an empty payload to clear it once the linger
-  // window expires.
-  const showTranscript = partialTranscript.length > 0;
-
   return (
     <div className="flow-bar-root">
-      {showTranscript && (
-        <div className="flow-bar-transcript">
-          {/* <bdi> + unicode-bidi: plaintext (in CSS) keeps Latin text
-              in its natural LTR order while the parent's direction:rtl
-              clips overflow from the visual left. Without this, the
-              last few characters of the newest words were being pushed
-              past the visible right edge by bidi reordering. */}
-          <bdi>{partialTranscript}</bdi>
-        </div>
-      )}
       {/* Pill is ALWAYS mounted — when state goes idle we fade the
-          opacity to 0 (see CSS) instead of removing it from the DOM,
-          so the transcript chip above doesn't reflow when the pill
-          "goes away". Inner content keeps its last frame rendered
-          during the fade so the canvas doesn't pop. */}
+          opacity to 0 (see CSS) instead of removing it from the DOM.
+          Inner content keeps its last frame rendered during the fade
+          so the canvas doesn't pop. */}
       <div className={`flow-bar flow-bar-${state}`}>
         {(state === "recording" || state === "idle") && (
           <div className="flow-bar-recording">

package/corpus/templates/clips/desktop/src/overlays/toolbar.tsx

@@ -98,8 +98,11 @@ export function Toolbar() {
     trackListen(
       listen<boolean>("clips:toolbar-enabled", (ev) => {
         setEnabled(!!ev.payload);
+        setPendingAction(null);
         if (!ev.payload) {
           setDiskSpaceLevel("ok");
+          setPaused(false);
+          setElapsed(0);
         }
       }),
     );

package/corpus/templates/clips/desktop/src/styles.css

@@ -3663,57 +3663,18 @@ body[data-clips-route="recording-pill"] #root {
 
 /* Wispr Flow-style dictation pill: small capsule anchored to the bottom
    of its (transparent) overlay window. The window itself is positioned
-   bottom-center on the primary display by show_flow_bar in Rust. We
-   stack the live transcript above the pill in a column so the user sees
-   the words being recognized in real time. */
+   bottom-center on the primary display by show_flow_bar in Rust. */
 .flow-bar-root {
   position: fixed;
   inset: var(--overlay-shadow-gutter);
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   padding-bottom: 8px;
-  gap: 6px;
   background: transparent;
   pointer-events: none;
 }
 
-/* Live partial-transcript chip floating above the pill. Same dark glass
-   look as the pill, smaller, only there when transcript is non-empty.
-   Caps width and clips from the left so the newest words stay visible
-   when a long sentence reaches the edge of the transparent window. */
-.flow-bar-transcript {
-  max-width: 360px;
-  padding: 4px 10px;
-  border-radius: 12px;
-  background: rgba(18, 18, 20, 0.92);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  font-size: 12px;
-  line-height: 1.35;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  /* RTL on the OUTER box so overflow clips from the visual left
-     (older text), keeping the newest characters pinned to the right.
-     `unicode-bidi: plaintext` on the inner <bdi> makes the actual
-     transcript text follow its own (LTR) direction — without it,
-     bidi reordering pushes the last few Latin characters past the
-     visible right edge and they get clipped a few chars short. */
-  direction: rtl;
-  pointer-events: none;
-  animation: flow-bar-in 100ms ease-out;
-}
-
-.flow-bar-transcript > bdi {
-  unicode-bidi: plaintext;
-  direction: ltr;
-}
-
 .flow-bar {
   display: flex;
   align-items: center;
@@ -3729,17 +3690,13 @@ body[data-clips-route="recording-pill"] #root {
   /* Subtle fade-in so the pill doesn't hard-pop on appear. */
   animation: flow-bar-in 140ms ease-out;
   /* Fade out to opacity 0 when state goes idle (after Fn release).
-     Keeping the pill in the DOM means the transcript chip above
-     doesn't reflow when the pill "goes away" — important for the
-     linger UX where the chip stays put while the pill dissolves. */
+     Keeping the pill in the DOM lets the waveform fade instead of pop. */
   transition: opacity 220ms ease-out;
 }
 
-/* When the dictation engine reports idle (e.g. mid-linger after Fn
-   release on the browser path), fade the pill out without unmounting
-   it. The canvas keeps its last-frame so the user sees the waveform
-   smoothly fade rather than pop into nothing. Pointer-events go off
-   so the now-invisible chip can't catch clicks. */
+/* When the dictation engine reports idle, fade the pill out without
+   unmounting it. Pointer-events go off so the invisible pill cannot
+   catch clicks. */
 .flow-bar-idle {
   opacity: 0;
   pointer-events: none;

package/corpus/templates/clips/desktop/src-tauri/src/clips/mod.rs

@@ -1210,11 +1210,10 @@ pub async fn show_flow_bar(app: AppHandle) -> Result<(), String> {
 
     let (mx, my, mw, mh) = tray_monitor_physical_rect(&app);
     let scale = overlay_scale_factor(&app);
-    // Wider + taller than the pill alone so the live transcript chip
-    // can stack above it. Height accommodates: bottom-anchored 32px pill
-    // + 6px gap + ~28px transcript chip + transparent window margin.
-    let content_w: u32 = (420.0 * scale).round() as u32;
-    let content_h: u32 = (120.0 * scale).round() as u32;
+    // Compact Wispr-style pill window: just enough transparent canvas for
+    // the bottom-centered waveform bar and its shadow gutter.
+    let content_w: u32 = (160.0 * scale).round() as u32;
+    let content_h: u32 = (56.0 * scale).round() as u32;
     let bottom_margin: i32 = (14.0 * scale).round() as i32;
     let gutter = overlay_shadow_gutter_physical(&app);
     let w: u32 = content_w + gutter * 2;