From f20e8da88c4061872df856bfeeff026c1bc205ca Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Tue, 15 Sep 2026 20:55:52 +0000
Subject: [PATCH 01/14] feat(dictation): recording deck with timer, waveform,
 pause, retry and send modes

---
 app/globals.css              |  16 +++
 components/ChatInput.tsx     | 128 +++++++++++++-----
 components/RecordingDeck.tsx | 253 +++++++++++++++++++++++++++++++++++
 hooks/useDictation.test.mjs  |  72 +++++++++-
 hooks/useDictation.ts        | 251 +++++++++++++++++++++++-----------
 lib/i18n/locales/en.json     |  10 ++
 lib/i18n/locales/ja.json     |  10 ++
 lib/i18n/locales/zh-CN.json  |  10 ++
 8 files changed, 634 insertions(+), 116 deletions(-)
 create mode 100644 components/RecordingDeck.tsx

diff --git a/app/globals.css b/app/globals.css
index fcd03f01..39f7b21c 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3584,3 +3584,19 @@ html.dark .dropdown-surface :is(select, option) {
     padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
   }
 }
+
+/* Dictation deck: indeterminate transcription progress. */
+@keyframes dictation-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(350%); }
+}
+.dictation-indeterminate {
+  animation: dictation-indeterminate 1.2s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dictation-indeterminate {
+    animation: none;
+    left: 30%;
+    width: 40% !important;
+  }
+}
diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index 60c198c2..fd934693 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -11,6 +11,7 @@ import { useDictation } from "@/hooks/useDictation";
 import type { GenerationSpeedInfo, SessionStatsInfo } from "@/lib/pi-types";
 import { formatCompactNumber, formatPercent } from "@/lib/format";
 import { ContextDetailPanel } from "./ComposerPanels";
+import { RecordingDeck } from "./RecordingDeck";
 import { clearDraft, getDraft, setDraft } from "@/lib/draft-store";
 import { expandWebSlashCommand } from "@/lib/web-slash-commands";
 import type { AttachedImage, AttachedTextFile } from "./ChatInput-draft-attachments";
@@ -359,22 +360,6 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     });
   }, []);
 
-  const { isRecording, isTranscribing, toggle: toggleDictation, cancel: cancelDictation, stop: stopDictation } = useDictation({
-    onTranscript: insertTextAtCursor,
-    onError: (err) => {
-      const msg =
-        err === "Microphone not supported in this browser or context"
-          ? t("chatInput.dictationNotSupported")
-          : err === "Microphone access denied"
-          ? t("chatInput.dictationPermissionDenied")
-          : err === "No speech detected"
-          ? t("chatInput.dictationNoSpeech")
-          : err === "Transcription failed"
-          ? t("chatInput.dictationFailed")
-          : err;
-      toast.error(msg);
-    },
-  });
 
   useImperativeHandle(ref, () => ({
     focus() {
@@ -663,8 +648,9 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     return error !== null;
   }, []);
 
-  const handleSend = useCallback(async () => {
-    const msg = value.trim();
+  const handleSend = useCallback(async (overrideText?: string) => {
+    const raw = overrideText ?? value;
+    const msg = raw.trim();
     if (!msg && !attachedImages.length && !attachedTextFiles.length) return;
     if (isStreaming) return;
     onAudioUnlock?.();
@@ -672,12 +658,12 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     if (!attachedImages.length && !attachedTextFiles.length && msg.startsWith("/") && onBuiltinCommand) {
       const expansion = expandWebSlashCommand(msg);
       if (expansion.kind === "expand" && rejectsOversizedPrompt(expansion.prompt, attachedImages)) return;
-      const sentValue = value;
+      const sentValue = overrideText ?? value;
       const result = await onBuiltinCommand(msg);
       if (result.handled) {
         // The user may have started typing while the command ran; only clear
         // if the composer still holds what was sent.
-        if (!result.error && !result.retainInput && valueRef.current === sentValue) clearInput();
+        if (!result.error && !result.retainInput && (overrideText !== undefined || valueRef.current === sentValue)) clearInput();
         return;
       }
     }
@@ -685,6 +671,78 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     onSend(composedMessage, attachedImages.length ? attachedImages : undefined);
     clearInput();
   }, [value, attachedImages, attachedTextFiles, isStreaming, onBuiltinCommand, onSend, clearInput, onAudioUnlock, rejectsOversizedPrompt]);
+  const sendAfterDictationRef = useRef(false);
+  const {
+    isRecording,
+    isPaused,
+    isTranscribing,
+    transcribeError,
+    captureRef,
+    toggle: toggleDictation,
+    cancel: cancelDictation,
+    stop: stopDictation,
+    togglePause: togglePauseDictation,
+    retry: retryDictation,
+  } = useDictation({
+    onTranscript: (text) => {
+      const shouldSend = sendAfterDictationRef.current;
+      sendAfterDictationRef.current = false;
+      const base = valueRef.current;
+      const sep = base.length > 0 && !base.endsWith(" ") ? " " : "";
+      const finalText = base + sep + text;
+      insertTextAtCursor(text);
+      if (shouldSend) {
+        void handleSend(finalText);
+      } else {
+        toast.success(t("chatInput.dictationSuccess"));
+      }
+    },
+    onError: (err) => {
+      const msg =
+        err === "Microphone not supported in this browser or context"
+          ? t("chatInput.dictationNotSupported")
+          : err === "Microphone access denied"
+          ? t("chatInput.dictationPermissionDenied")
+          : err === "No speech detected"
+          ? t("chatInput.dictationNoSpeech")
+          : err === "Transcription timed out"
+          ? t("chatInput.dictationTimedOut")
+          : err === "Transcription failed"
+          ? t("chatInput.dictationFailed")
+          : err;
+      toast.error(msg);
+    },
+  });
+  const stopAndInsertDictation = useCallback(() => {
+    sendAfterDictationRef.current = false;
+    stopDictation();
+  }, [stopDictation]);
+  const stopAndSendDictation = useCallback(() => {
+    sendAfterDictationRef.current = true;
+    stopDictation();
+  }, [stopDictation]);
+  const cancelDictationAndReset = useCallback(() => {
+    sendAfterDictationRef.current = false;
+    cancelDictation();
+  }, [cancelDictation]);
+  // While the recording deck replaces the textarea there is no focused input,
+  // so Escape/Enter are handled at window level: Escape cancels/discard, Enter
+  // retries after an error or converts the recording to text.
+  useEffect(() => {
+    if (!(isRecording || isPaused || isTranscribing || transcribeError)) return;
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelDictationAndReset();
+      } else if (e.key === "Enter" && !e.shiftKey && !isTranscribing) {
+        e.preventDefault();
+        if (transcribeError) retryDictation();
+        else stopAndInsertDictation();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isRecording, isPaused, isTranscribing, transcribeError, cancelDictationAndReset, retryDictation, stopAndInsertDictation]);
 
   const slashQuery = value.startsWith("/") && !/\s/.test(value.slice(1))
     ? value.slice(1).toLowerCase()
@@ -1130,18 +1188,6 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         if (recentlyComposed) e.preventDefault();
         return;
       }
-      if (isRecording || isTranscribing) {
-        if (e.key === "Escape") {
-          e.preventDefault();
-          cancelDictation();
-          return;
-        }
-        if (isRecording && e.key === "Enter" && !e.shiftKey) {
-          e.preventDefault();
-          stopDictation();
-          return;
-        }
-      }
       if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "m") {
         e.preventDefault();
         toggleDictation();
@@ -1268,7 +1314,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         }
       }
     },
-    [isMobile, isStreaming, onSteer, onFollowUp, onAbort, onMinimize, slashMenuOpen, slashQuery, filteredSlashCommands, slashActiveIndex, applySlashCommand, sendQueued, handleSend, getNextSlashIndex, atMenuOpen, atQuery, atMatches, atActiveIndex, applyAtCompletion, historyMenuOpen, inputHistory, historyActiveIndex, applyHistoryInput, value, isRecording, isTranscribing, cancelDictation, stopDictation, toggleDictation]
+    [isMobile, isStreaming, onSteer, onFollowUp, onAbort, onMinimize, slashMenuOpen, slashQuery, filteredSlashCommands, slashActiveIndex, applySlashCommand, sendQueued, handleSend, getNextSlashIndex, atMenuOpen, atQuery, atMatches, atActiveIndex, applyAtCompletion, historyMenuOpen, inputHistory, historyActiveIndex, applyHistoryInput, value, toggleDictation]
   );
 
   const handleInput = useCallback(() => {
@@ -2241,6 +2287,19 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               transition: "border-color var(--dur-fast) var(--ease-out-warm), background var(--dur-fast) var(--ease-out-warm), box-shadow var(--dur-fast) var(--ease-out-warm)",
             } as React.CSSProperties}
           >
+          {isRecording || isPaused || isTranscribing || transcribeError ? (
+            <RecordingDeck
+              captureRef={captureRef}
+              isPaused={isPaused}
+              isTranscribing={isTranscribing}
+              transcribeError={transcribeError}
+              onPauseResume={togglePauseDictation}
+              onConvert={stopAndInsertDictation}
+              onSend={stopAndSendDictation}
+              onCancel={cancelDictationAndReset}
+              onRetry={retryDictation}
+            />
+          ) : (
           <textarea
             ref={textareaRef}
             value={value}
@@ -2282,6 +2341,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               overflow: "auto",
             }}
           />
+          )}
 
           {/* Toolbar: plus menu · model · reasoning · fast · compact · send/queue/stop */}
           <div className="composer-toolbar" style={{
@@ -2858,7 +2918,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               <button
                 type="button"
                 className="composer-primary-action"
-                onClick={handleSend}
+                onClick={() => void handleSend()}
                 disabled={!value.trim() && !attachedImages.length && !attachedTextFiles.length}
                 style={{
                   display: "flex", alignItems: "center", gap: 6,
diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
new file mode 100644
index 00000000..816c5c9b
--- /dev/null
+++ b/components/RecordingDeck.tsx
@@ -0,0 +1,253 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { AlertCircle, Loader2, Pause, Play, RotateCw, Square, X } from "lucide-react";
+import { MAX_RECORDING_MS, type DictationCapture } from "@/hooks/useDictation";
+import { useI18n } from "@/lib/i18n";
+
+const WAVE_WIDTH = 160;
+const WAVE_HEIGHT = 28;
+const BAR_COUNT = 40;
+const SAMPLE_INTERVAL_MS = 50;
+const BAR_SCALE = 3;
+
+interface RecordingDeckProps {
+  captureRef: React.RefObject<DictationCapture>;
+  isPaused: boolean;
+  isTranscribing: boolean;
+  transcribeError: string | null;
+  onPauseResume: () => void;
+  onConvert: () => void;
+  onSend: () => void;
+  onCancel: () => void;
+  onRetry: () => void;
+}
+
+function formatElapsed(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+
+function DeckIconButton({
+  children,
+  onClick,
+  title,
+  tone,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  title: string;
+  tone?: "danger" | "accent";
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={title}
+      aria-label={title}
+      style={{
+        display: "flex", alignItems: "center", justifyContent: "center",
+        width: 28, height: 28, padding: 0, flexShrink: 0,
+        background:
+          tone === "danger" ? "var(--danger-subtle, rgba(239, 68, 68, 0.15))"
+          : tone === "accent" ? "var(--bg-subtle)"
+          : "var(--bg-subtle)",
+        border: `1px solid ${tone === "danger" ? "var(--danger, #ef4444)" : tone === "accent" ? "var(--accent)" : "var(--border)"}`,
+        borderRadius: 7,
+        color:
+          tone === "danger" ? "var(--danger, #ef4444)"
+          : tone === "accent" ? "var(--accent)"
+          : "var(--text-muted)",
+        cursor: "pointer",
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function RecordingDeck({
+  captureRef,
+  isPaused,
+  isTranscribing,
+  transcribeError,
+  onPauseResume,
+  onConvert,
+  onSend,
+  onCancel,
+  onRetry,
+}: RecordingDeckProps) {
+  useEffect(() => {
+    const compute = () => {
+      const capture = captureRef.current;
+      setElapsed(
+        capture
+          ? Math.min(
+              MAX_RECORDING_MS,
+              Math.max(
+                0,
+                performance.now() -
+                  capture.startedAt -
+                  capture.pausedAccum -
+                  (capture.pausedAt !== null ? performance.now() - capture.pausedAt : 0),
+              ),
+            )
+          : 0,
+      );
+    };
+    compute();
+    const id = window.setInterval(compute, 100);
+    return () => window.clearInterval(id);
+  }, [captureRef]);
+  const { t } = useI18n();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [elapsed, setElapsed] = useState(0);
+
+  const captureActive = !isTranscribing && !transcribeError;
+
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !captureActive) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = WAVE_WIDTH * dpr;
+    canvas.height = WAVE_HEIGHT * dpr;
+    ctx.scale(dpr, dpr);
+
+    const style = getComputedStyle(canvas);
+    const barColor = (isPaused ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--danger")).trim() || (isPaused ? "#888" : "#ef4444");
+
+    const bars: number[] = [];
+    const data = new Uint8Array(256);
+    let raf = 0;
+    let lastPush = 0;
+
+    const draw = (now: number) => {
+      raf = requestAnimationFrame(draw);
+      const analyser = (isPaused ? null : captureRef.current?.analyser) ?? null;
+      if (analyser && now - lastPush >= SAMPLE_INTERVAL_MS) {
+        lastPush = now;
+        analyser.getByteTimeDomainData(data);
+        let sum = 0;
+        for (let i = 0; i < data.length; i++) {
+          const v = (data[i] - 128) / 128;
+          sum += v * v;
+        }
+        const rms = Math.sqrt(sum / data.length);
+        bars.push(Math.min(1, rms * BAR_SCALE));
+        if (bars.length > BAR_COUNT) bars.shift();
+      }
+      ctx.clearRect(0, 0, WAVE_WIDTH, WAVE_HEIGHT);
+      ctx.fillStyle = barColor;
+      ctx.globalAlpha = isPaused ? 0.45 : 1;
+      const gap = 2;
+      const barW = (WAVE_WIDTH - gap * (BAR_COUNT - 1)) / BAR_COUNT;
+      for (let i = 0; i < bars.length; i++) {
+        const h = Math.max(2, bars[i] * (WAVE_HEIGHT - 2));
+        ctx.fillRect(i * (barW + gap), (WAVE_HEIGHT - h) / 2, barW, h);
+      }
+      ctx.globalAlpha = 1;
+    };
+    raf = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(raf);
+  }, [captureRef, captureActive, isPaused]);
+
+  return (
+    <div
+      role="status"
+      aria-label={isTranscribing ? t("chatInput.transcribing") : transcribeError ? transcribeError : t("chatInput.dictationRecording")}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: 6,
+        minHeight: 24,
+        padding: "2px 0",
+      }}
+    >
+      {isTranscribing ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-muted)", fontSize: 12 }}>
+          <Loader2 size={14} strokeWidth={1.8} className="animate-spin" aria-hidden="true" />
+          <span style={{ flexShrink: 0 }}>{t("chatInput.transcribing")}</span>
+          <div style={{ flex: 1, maxWidth: 220, height: 3, borderRadius: 2, background: "var(--border)", overflow: "hidden", position: "relative" }}>
+            <div className="dictation-indeterminate" style={{ position: "absolute", top: 0, bottom: 0, width: "40%", background: "var(--accent)", borderRadius: 2 }} />
+          </div>
+          <DeckIconButton onClick={onCancel} title={t("chatInput.cancelDictation")} tone="danger">
+            <X size={14} strokeWidth={1.8} aria-hidden="true" />
+          </DeckIconButton>
+        </div>
+      ) : transcribeError ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--text)", minWidth: 0 }}>
+          <AlertCircle size={14} strokeWidth={1.8} aria-hidden="true" style={{ color: "var(--danger, #ef4444)", flexShrink: 0 }} />
+          <span title={transcribeError} style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>
+            {transcribeError}
+          </span>
+          <DeckIconButton onClick={onRetry} title={t("chatInput.retryDictation")} tone="accent">
+            <RotateCw size={14} strokeWidth={1.8} aria-hidden="true" />
+          </DeckIconButton>
+          <DeckIconButton onClick={onCancel} title={t("chatInput.discardDictation")} tone="danger">
+            <X size={14} strokeWidth={1.8} aria-hidden="true" />
+          </DeckIconButton>
+        </div>
+      ) : (
+        <>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+            <span
+              aria-hidden="true"
+              className="live-pulse"
+              style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--danger, #ef4444)", flexShrink: 0 }}
+            />
+            <span
+              style={{
+                fontSize: 12,
+                fontVariantNumeric: "tabular-nums",
+                color: "var(--text)",
+                flexShrink: 0,
+                minWidth: 34,
+              }}
+            >
+              {formatElapsed(elapsed)}
+            </span>
+            <canvas ref={canvasRef} style={{ width: WAVE_WIDTH, height: WAVE_HEIGHT, flexShrink: 1 }} aria-hidden="true" />
+            <div style={{ display: "flex", alignItems: "center", gap: 2, marginLeft: "auto", flexShrink: 0 }}>
+              <DeckIconButton onClick={onPauseResume} title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}>
+                {isPaused ? <Play size={14} strokeWidth={1.8} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}
+              </DeckIconButton>
+              <DeckIconButton onClick={onConvert} title={t("chatInput.convertDictation")}>
+                <Square size={11} strokeWidth={2} aria-hidden="true" />
+              </DeckIconButton>
+              <DeckIconButton onClick={onSend} title={t("chatInput.sendDictation")} tone="accent">
+                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <line x1="2" y1="7" x2="11" y2="7" />
+                  <polyline points="7.5 3 12 7 7.5 11" />
+                </svg>
+              </DeckIconButton>
+              <DeckIconButton onClick={onCancel} title={t("chatInput.cancelDictation")} tone="danger">
+                <X size={14} strokeWidth={1.8} aria-hidden="true" />
+              </DeckIconButton>
+            </div>
+          </div>
+          <div
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={MAX_RECORDING_MS}
+            aria-valuenow={Math.round(elapsed)}
+            style={{ height: 2, borderRadius: 1, background: "var(--border)", overflow: "hidden" }}
+          >
+            <div
+              style={{
+                height: "100%",
+                width: `${Math.min(100, (elapsed / MAX_RECORDING_MS) * 100)}%`,
+                background: "var(--danger, #ef4444)",
+                transition: "width 0.1s linear",
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index 5e69a111..58eb6a7d 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -15,12 +15,76 @@ test("useDictation aborts in-flight transcription and silences transcript on can
   assert.match(source, /return \(\) => \{\s*\n\s*cancelledRef\.current = true;/);
 
   // Late arrival after cancel must not invoke onTranscript or onError
-  assert.match(source, /if \(!cancelledRef\.current\) \{\s*\n\s*onTranscript\(data\.text\.trim\(\)\);/);
+  assert.match(source, /if \(!cancelledRef\.current\) \{\s*\n\s*pendingAudioRef\.current = null;\s*\n\s*onTranscript\(data\.text\.trim\(\)\);/);
 });
 
-test("ChatInput cancels dictation on Escape during both recording and transcribing", async () => {
+test("useDictation supports pause and resume with active-time accounting", async () => {
+  const source = await readFile(new URL("./useDictation.ts", import.meta.url), "utf8");
+
+  // Native MediaRecorder pause/resume
+  assert.match(source, /recorder\.pause\(\)/);
+  assert.match(source, /recorder\.resume\(\)/);
+
+  // Paused time is accumulated so the elapsed clock only counts active time
+  assert.match(source, /captureRef\.current\.pausedAt = performance\.now\(\)/);
+  assert.match(source, /captureRef\.current\.pausedAccum = pausedAccum \+ \(performance\.now\(\) - pausedAt\)/);
+
+  // Pause toggle is a no-op once transcription or an error takes over
+  assert.match(source, /if \(!recorder \|\| isTranscribing \|\| transcribeError\) return;/);
+});
+
+test("useDictation exposes a live analyser for the waveform", async () => {
+  const source = await readFile(new URL("./useDictation.ts", import.meta.url), "utf8");
+
+  assert.match(source, /createMediaStreamSource\(stream\)/);
+  assert.match(source, /createAnalyser\(\)/);
+  assert.match(source, /captureRef\.current\.analyser = analyser/);
+
+  // The AudioContext must be closed on cleanup
+  assert.match(source, /audioContextRef\.current\.close\(\)/);
+});
+
+test("useDictation retains audio after failure and supports retry", async () => {
+  const source = await readFile(new URL("./useDictation.ts", import.meta.url), "utf8");
+
+  // The recorded blob is kept for retry and only dropped on success or discard
+  assert.match(source, /pendingAudioRef\.current = \{ blob, ext \}/);
+  assert.match(source, /pendingAudioRef\.current = null;\s*\n\s*onTranscript/);
+
+  // Retry re-runs transcription with the retained audio
+  assert.match(source, /const retry = useCallback\(\(\) => \{\s*\n\s*const pending = pendingAudioRef\.current;/);
+  assert.match(source, /void runTranscription\(pending\.blob, pending\.ext\)/);
+});
+
+test("useDictation surfaces timeout as an error instead of swallowing it", async () => {
+  const source = await readFile(new URL("./useDictation.ts", import.meta.url), "utf8");
+
+  // The fetch timeout aborts with a TimeoutError reason
+  assert.match(source, /abort\(new DOMException\("Transcription timed out", "TimeoutError"\)\)/);
+
+  // TimeoutError is handled distinctly from the user-cancel AbortError
+  assert.match(source, /err\.name === "TimeoutError"/);
+  assert.match(source, /err\.name === "AbortError"\) return;/);
+});
+
+test("ChatInput replaces the composer with the deck and routes dictation keys at window level", async () => {
   const source = await readFile(new URL("../components/ChatInput.tsx", import.meta.url), "utf8");
 
-  // Escape must guard both isRecording and isTranscribing
-  assert.match(source, /if \(isRecording \|\| isTranscribing\) \{\s*\n\s*if \(e\.key === "Escape"\) \{\s*\n\s*e\.preventDefault\(\);\s*\n\s*cancelDictation\(\);/);
+  // The deck covers every dictation state (recording, paused, transcribing, error)
+  assert.match(source, /isRecording \|\| isPaused \|\| isTranscribing \|\| transcribeError \? \(/);
+
+  // Window-level listener because the textarea is unmounted while the deck shows
+  assert.match(source, /window\.addEventListener\("keydown", onKeyDown\)/);
+  assert.match(source, /if \(e\.key === "Escape"\) \{\s*\n\s*e\.preventDefault\(\);\s*\n\s*cancelDictationAndReset\(\);/);
+});
+
+test("ChatInput supports transcribe-only and transcribe-and-send endings", async () => {
+  const source = await readFile(new URL("../components/ChatInput.tsx", import.meta.url), "utf8");
+
+  // Send mode flags the transcript to be sent once transcription succeeds
+  assert.match(source, /sendAfterDictationRef\.current = true;/);
+  assert.match(source, /void handleSend\(finalText\)/);
+
+  // handleSend accepts the composed dictation text override
+  assert.match(source, /async \(overrideText\?: string\) =>/);
 });
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index 839c0b2c..d3adab34 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -7,9 +7,20 @@ export interface UseDictationOptions {
   onError?: (error: string) => void;
 }
 
-const MAX_RECORDING_MS = 300_000;
+export const MAX_RECORDING_MS = 300_000;
 const STT_TIMEOUT_MS = 60_000;
 
+/**
+ * Live capture state polled by RecordingDeck (timer + waveform) without
+ * re-rendering the hook's consumer. Mutated in place; identity is stable.
+ */
+export interface DictationCapture {
+  analyser: AnalyserNode | null;
+  startedAt: number;
+  pausedAccum: number;
+  pausedAt: number | null;
+}
+
 function normalizeErrorMessage(error: unknown, fallback: string): string {
   if (typeof error === "string" && error.trim()) return error;
   if (error && typeof error === "object" && "message" in error) {
@@ -21,13 +32,21 @@ function normalizeErrorMessage(error: unknown, fallback: string): string {
 
 export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   const [isRecording, setIsRecording] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
   const [isTranscribing, setIsTranscribing] = useState(false);
+  const [transcribeError, setTranscribeError] = useState<string | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
   const cancelledRef = useRef(false);
   const isStartingRef = useRef(false);
   const maxTimeoutRef = useRef<number | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const captureRef = useRef<DictationCapture>({ analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null });
+  // Audio kept after a failed/timed-out transcription so the user can retry
+  // instead of losing the recording.
+  const pendingAudioRef = useRef<{ blob: Blob; ext: string } | null>(null);
+
   const clearMaxTimeout = useCallback(() => {
     if (maxTimeoutRef.current !== null) {
       window.clearTimeout(maxTimeoutRef.current);
@@ -47,7 +66,13 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       streamRef.current.getTracks().forEach((track) => track.stop());
       streamRef.current = null;
     }
+    if (audioContextRef.current) {
+      void audioContextRef.current.close().catch(() => {});
+      audioContextRef.current = null;
+    }
+    captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null };
     setIsRecording(false);
+    setIsPaused(false);
   }, [clearMaxTimeout]);
 
   useEffect(() => {
@@ -57,9 +82,89 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         abortControllerRef.current.abort();
         abortControllerRef.current = null;
       }
+      pendingAudioRef.current = null;
       cleanup();
     };
   }, [cleanup]);
+
+  const runTranscription = useCallback(async (blob: Blob, ext: string) => {
+    setIsTranscribing(true);
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    const timeoutId = window.setTimeout(() => {
+      abortController.abort(new DOMException("Transcription timed out", "TimeoutError"));
+    }, STT_TIMEOUT_MS);
+
+    try {
+      const body = new FormData();
+      body.append("file", blob, ext);
+
+      const res = await fetch("/api/stt", {
+        method: "POST",
+        body,
+        signal: abortController.signal,
+      });
+      if (cancelledRef.current) return;
+      const data = await res.json();
+      if (cancelledRef.current) return;
+      if (!res.ok) {
+        const message = normalizeErrorMessage(data?.error, "Transcription failed");
+        setTranscribeError(message);
+        onError?.(message);
+        return;
+      }
+      if (typeof data.text === "string" && data.text.trim()) {
+        if (!cancelledRef.current) {
+          pendingAudioRef.current = null;
+          onTranscript(data.text.trim());
+        }
+      } else if (!cancelledRef.current) {
+        const message = "No speech detected";
+        setTranscribeError(message);
+        onError?.(message);
+      }
+    } catch (err) {
+      if (cancelledRef.current) return;
+      if (err instanceof DOMException && err.name === "TimeoutError") {
+        const message = "Transcription timed out";
+        setTranscribeError(message);
+        onError?.(message);
+        return;
+      }
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      const message = err instanceof Error ? err.message : normalizeErrorMessage(err, "Transcription failed");
+      setTranscribeError(message);
+      onError?.(message);
+    } finally {
+      window.clearTimeout(timeoutId);
+      if (abortControllerRef.current === abortController) {
+        abortControllerRef.current = null;
+      }
+      setIsTranscribing(false);
+    }
+  }, [onTranscript, onError]);
+
+  // Ends capture and moves the session into transcription. Sets isTranscribing
+  // eagerly so the deck never flashes back to the text composer between
+  // recorder.stop() and the async onstop event.
+  const finishCapture = useCallback(() => {
+    if (!isRecording) return;
+    clearMaxTimeout();
+    const recorder = mediaRecorderRef.current;
+    if (recorder && recorder.state !== "inactive") {
+      try {
+        recorder.stop();
+      } catch {}
+    }
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+      streamRef.current = null;
+    }
+    setIsRecording(false);
+    setIsPaused(false);
+    setIsTranscribing(true);
+  }, [isRecording, clearMaxTimeout]);
+
   const start = useCallback(async () => {
     if (isStartingRef.current || isRecording || isTranscribing) return;
     isStartingRef.current = true;
@@ -69,6 +174,9 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       abortControllerRef.current = null;
     }
     cancelledRef.current = false;
+    pendingAudioRef.current = null;
+    setTranscribeError(null);
+    setIsTranscribing(false);
     if (
       typeof navigator?.mediaDevices?.getUserMedia !== "function" ||
       typeof window === "undefined" ||
@@ -82,6 +190,20 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       streamRef.current = stream;
 
+      captureRef.current = { analyser: null, startedAt: performance.now(), pausedAccum: 0, pausedAt: null };
+      if (typeof window.AudioContext === "function") {
+        try {
+          const ctx = new AudioContext();
+          if (ctx.state === "suspended") void ctx.resume();
+          const source = ctx.createMediaStreamSource(stream);
+          const analyser = ctx.createAnalyser();
+          analyser.fftSize = 256;
+          source.connect(analyser);
+          audioContextRef.current = ctx;
+          captureRef.current.analyser = analyser;
+        } catch {}
+      }
+
       const recorder = new MediaRecorder(stream);
       mediaRecorderRef.current = recorder;
       const chunks: Blob[] = [];
@@ -90,75 +212,24 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         if (event.data.size > 0) chunks.push(event.data);
       };
 
-      recorder.onstop = async () => {
+      recorder.onstop = () => {
         if (cancelledRef.current) return;
         clearMaxTimeout();
-        if (chunks.length === 0) return;
-        setIsTranscribing(true);
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-        const timeoutId = window.setTimeout(() => {
-          abortController.abort(new DOMException("Transcription timed out", "TimeoutError"));
-        }, STT_TIMEOUT_MS);
-
-        try {
-          const mimeType = recorder.mimeType || "audio/webm";
-          const blob = new Blob(chunks, { type: mimeType });
-          const ext = mimeType.includes("mp4") ? "audio.mp4" : mimeType.includes("ogg") ? "audio.ogg" : "audio.webm";
-          const body = new FormData();
-          body.append("file", blob, ext);
-
-          const res = await fetch("/api/stt", {
-            method: "POST",
-            body,
-            signal: abortController.signal,
-          });
-          if (cancelledRef.current) return;
-          const data = await res.json();
-          if (cancelledRef.current) return;
-          if (!res.ok) {
-            onError?.(normalizeErrorMessage(data?.error, "Transcription failed"));
-            return;
-          }
-          if (typeof data.text === "string" && data.text.trim()) {
-            if (!cancelledRef.current) {
-              onTranscript(data.text.trim());
-            }
-          } else {
-            if (!cancelledRef.current) {
-              onError?.("No speech detected");
-            }
-          }
-        } catch (err) {
-          if (cancelledRef.current) return;
-          if (err instanceof DOMException && err.name === "AbortError") return;
-          onError?.(
-            err instanceof Error
-              ? err.message
-              : normalizeErrorMessage(err, "Transcription failed"),
-          );
-        } finally {
-          window.clearTimeout(timeoutId);
-          if (abortControllerRef.current === abortController) {
-            abortControllerRef.current = null;
-          }
+        if (chunks.length === 0) {
           setIsTranscribing(false);
+          return;
         }
+        const mimeType = recorder.mimeType || "audio/webm";
+        const blob = new Blob(chunks, { type: mimeType });
+        const ext = mimeType.includes("mp4") ? "audio.mp4" : mimeType.includes("ogg") ? "audio.ogg" : "audio.webm";
+        pendingAudioRef.current = { blob, ext };
+        void runTranscription(blob, ext);
       };
 
       recorder.start();
       setIsRecording(true);
       maxTimeoutRef.current = window.setTimeout(() => {
-        if (mediaRecorderRef.current?.state === "recording") {
-          try {
-            mediaRecorderRef.current.stop();
-          } catch {}
-        }
-        if (streamRef.current) {
-          streamRef.current.getTracks().forEach((track) => track.stop());
-          streamRef.current = null;
-        }
-        setIsRecording(false);
+        finishCapture();
       }, MAX_RECORDING_MS);
     } catch (err) {
       cleanup();
@@ -166,22 +237,25 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     } finally {
       isStartingRef.current = false;
     }
-  }, [isRecording, isTranscribing, cleanup, clearMaxTimeout, onTranscript, onError]);
+  }, [isRecording, isTranscribing, cleanup, clearMaxTimeout, runTranscription, onError, finishCapture]);
 
-  const stop = useCallback(() => {
-    if (!isRecording) return;
-    clearMaxTimeout();
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
-      try {
-        mediaRecorderRef.current.stop();
-      } catch {}
-    }
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
+  const togglePause = useCallback(() => {
+    const recorder = mediaRecorderRef.current;
+    if (!recorder || isTranscribing || transcribeError) return;
+    if (recorder.state === "recording") {
+      recorder.pause();
+      captureRef.current.pausedAt = performance.now();
+      setIsPaused(true);
+    } else if (recorder.state === "paused") {
+      recorder.resume();
+      const { pausedAt, pausedAccum } = captureRef.current;
+      if (pausedAt !== null) {
+        captureRef.current.pausedAccum = pausedAccum + (performance.now() - pausedAt);
+      }
+      captureRef.current.pausedAt = null;
+      setIsPaused(false);
     }
-    setIsRecording(false);
-  }, [isRecording, clearMaxTimeout]);
+  }, [isTranscribing, transcribeError]);
 
   const cancel = useCallback(() => {
     cancelledRef.current = true;
@@ -189,14 +263,35 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       abortControllerRef.current.abort();
       abortControllerRef.current = null;
     }
+    pendingAudioRef.current = null;
+    setTranscribeError(null);
     setIsTranscribing(false);
     cleanup();
   }, [cleanup]);
 
+  const retry = useCallback(() => {
+    const pending = pendingAudioRef.current;
+    if (!pending || isTranscribing) return;
+    setTranscribeError(null);
+    void runTranscription(pending.blob, pending.ext);
+  }, [isTranscribing, runTranscription]);
+
   const toggle = useCallback(() => {
-    if (isRecording) stop();
+    if (isRecording) finishCapture();
     else void start();
-  }, [isRecording, start, stop]);
+  }, [isRecording, start, finishCapture]);
 
-  return { isRecording, isTranscribing, start, stop, cancel, toggle };
+  return {
+    isRecording,
+    isPaused,
+    isTranscribing,
+    transcribeError,
+    captureRef,
+    start,
+    stop: finishCapture,
+    cancel,
+    toggle,
+    togglePause,
+    retry,
+  };
 }
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index ae2e0f91..16c2a55d 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -266,6 +266,16 @@
   "chatInput.dictationNoSpeech": "No speech detected",
   "chatInput.dictationNotSupported": "Microphone not supported in this browser or context",
   "chatInput.dictationPermissionDenied": "Microphone access denied",
+  "chatInput.dictationTimedOut": "Transcription timed out",
+  "chatInput.dictationSuccess": "Transcribed",
+  "chatInput.dictationRecording": "Recording",
+  "chatInput.pauseDictation": "Pause recording",
+  "chatInput.resumeDictation": "Resume recording",
+  "chatInput.convertDictation": "Transcribe to text",
+  "chatInput.sendDictation": "Transcribe and send",
+  "chatInput.retryDictation": "Retry transcription",
+  "chatInput.cancelDictation": "Cancel and discard",
+  "chatInput.discardDictation": "Discard recording",
   "chatInput.fastLabel": "Fast",
   "chatInput.queuedDelete": "Delete",
   "chatInput.queuedDeleteTitle": "Remove this queued message",
diff --git a/lib/i18n/locales/ja.json b/lib/i18n/locales/ja.json
index 29b7362e..ff0c99ed 100644
--- a/lib/i18n/locales/ja.json
+++ b/lib/i18n/locales/ja.json
@@ -253,6 +253,16 @@
   "chatInput.dictationNoSpeech": "音声が検出されませんでした",
   "chatInput.dictationNotSupported": "お使いのブラウザまたは環境ではマイクがサポートされていません",
   "chatInput.dictationPermissionDenied": "マイクへのアクセスが拒否されました",
+  "chatInput.dictationTimedOut": "文字起こしがタイムアウトしました",
+  "chatInput.dictationSuccess": "文字起こしが完了しました",
+  "chatInput.dictationRecording": "録音中",
+  "chatInput.pauseDictation": "録音を一時停止",
+  "chatInput.resumeDictation": "録音を再開",
+  "chatInput.convertDictation": "テキストに変換",
+  "chatInput.sendDictation": "文字起こしして送信",
+  "chatInput.retryDictation": "文字起こしを再試行",
+  "chatInput.cancelDictation": "キャンセルして破棄",
+  "chatInput.discardDictation": "録音を破棄",
   "chatInput.fastLabel": "高速",
   "chatInput.queuedDelete": "削除",
   "chatInput.queuedDeleteTitle": "このキューされたメッセージを削除",
diff --git a/lib/i18n/locales/zh-CN.json b/lib/i18n/locales/zh-CN.json
index 7b46529d..8cae42f7 100644
--- a/lib/i18n/locales/zh-CN.json
+++ b/lib/i18n/locales/zh-CN.json
@@ -253,6 +253,16 @@
   "chatInput.dictationNoSpeech": "未检测到语音",
   "chatInput.dictationNotSupported": "当前浏览器或环境不支持麦克风",
   "chatInput.dictationPermissionDenied": "麦克风访问被拒绝",
+  "chatInput.dictationTimedOut": "转写超时",
+  "chatInput.dictationSuccess": "转写完成",
+  "chatInput.dictationRecording": "录音中",
+  "chatInput.pauseDictation": "暂停录音",
+  "chatInput.resumeDictation": "恢复录音",
+  "chatInput.convertDictation": "转写为文字",
+  "chatInput.sendDictation": "转写并发送",
+  "chatInput.retryDictation": "重试转写",
+  "chatInput.cancelDictation": "取消并丢弃",
+  "chatInput.discardDictation": "丢弃录音",
   "chatInput.fastLabel": "快速",
   "chatInput.queuedDelete": "删除",
   "chatInput.queuedDeleteTitle": "移除这条已排队消息",

From c1f3a3a67834c8d8c48ecec41268ddd3158b6ae3 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Wed, 16 Sep 2026 02:38:53 +0000
Subject: [PATCH 02/14] fix(dictation): remove stray pulse ring and let
 waveform shrink on narrow composers

---
 components/RecordingDeck.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index 816c5c9b..e22d1bc0 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -197,7 +197,6 @@ export function RecordingDeck({
           <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
             <span
               aria-hidden="true"
-              className="live-pulse"
               style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--danger, #ef4444)", flexShrink: 0 }}
             />
             <span
@@ -211,7 +210,7 @@ export function RecordingDeck({
             >
               {formatElapsed(elapsed)}
             </span>
-            <canvas ref={canvasRef} style={{ width: WAVE_WIDTH, height: WAVE_HEIGHT, flexShrink: 1 }} aria-hidden="true" />
+            <canvas ref={canvasRef} style={{ width: WAVE_WIDTH, height: WAVE_HEIGHT, flexShrink: 1, minWidth: 0, alignSelf: "center" }} aria-hidden="true" />
             <div style={{ display: "flex", alignItems: "center", gap: 2, marginLeft: "auto", flexShrink: 0 }}>
               <DeckIconButton onClick={onPauseResume} title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}>
                 {isPaused ? <Play size={14} strokeWidth={1.8} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}

From d0959fd20ea4c18823502365c383b8e45c801353 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Tue, 15 Sep 2026 21:49:59 +0000
Subject: [PATCH 03/14] test(systemd): scrub ambient OMP_WEB_OMP_BIN so install
 test is hermetic

---
 bin/omp-web-systemd.test.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bin/omp-web-systemd.test.mjs b/bin/omp-web-systemd.test.mjs
index 257fdbd9..7a685c25 100644
--- a/bin/omp-web-systemd.test.mjs
+++ b/bin/omp-web-systemd.test.mjs
@@ -127,6 +127,7 @@ test("install creates the env file and unit with LAN settings", { skip: process.
       PORT: "40123",
     };
     delete childEnv.PI_CODING_AGENT_DIR;
+    delete childEnv.OMP_WEB_OMP_BIN;
 
     const result = spawnSync(process.execPath, [path.join(process.cwd(), "bin", "omp-web-systemd.js"), "install", "--no-autostart"], {
       env: childEnv,

From 8829f21f366208693b622c5c2117e9bb8055e593 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Wed, 16 Sep 2026 02:55:24 +0000
Subject: [PATCH 04/14] feat(dictation): mic becomes cancel while recording,
 composer Send transcribes+queues, deck keeps only pause and stop

---
 components/ChatInput.tsx     | 149 +++++++++++++++++++++++------------
 components/RecordingDeck.tsx |  44 +++--------
 hooks/useDictation.test.mjs  |   2 +-
 3 files changed, 110 insertions(+), 85 deletions(-)

diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index fd934693..3678ab47 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useRef, useState, useCallback, useEffect, useLayoutEffect, useImperativeHandle, forwardRef, memo, KeyboardEvent } from "react";
-import { ChevronDown, ListChecks, Loader2, Mic, Paperclip, Plus, Shrink, Sparkles, Wrench, Zap } from "lucide-react";
+import { ChevronDown, ListChecks, Loader2, Mic, Paperclip, Plus, Shrink, Sparkles, Wrench, X, Zap } from "lucide-react";
 import { getSubmitDuringRunBehavior } from "@/lib/composer-prefs";
 import type { BuiltinSlashCommandResult, CompactResultInfo, QueuedMessages, SlashCommandInfo } from "@/hooks/useAgentSession";
 import type { ActiveGoal, ActivePlan } from "@/lib/web-mode-state";
@@ -671,7 +671,11 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     onSend(composedMessage, attachedImages.length ? attachedImages : undefined);
     clearInput();
   }, [value, attachedImages, attachedTextFiles, isStreaming, onBuiltinCommand, onSend, clearInput, onAudioUnlock, rejectsOversizedPrompt]);
-  const sendAfterDictationRef = useRef(false);
+  /** What happens to the composer after the transcript lands: null inserts it
+   *  for editing; "send" dispatches immediately; "steer"/"followup" queue it
+   *  into the running agent. */
+  type DictationAfterMode = "send" | "steer" | "followup";
+  const dictationAfterRef = useRef<DictationAfterMode | null>(null);
   const {
     isRecording,
     isPaused,
@@ -685,14 +689,16 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     retry: retryDictation,
   } = useDictation({
     onTranscript: (text) => {
-      const shouldSend = sendAfterDictationRef.current;
-      sendAfterDictationRef.current = false;
+      const after = dictationAfterRef.current;
+      dictationAfterRef.current = null;
       const base = valueRef.current;
       const sep = base.length > 0 && !base.endsWith(" ") ? " " : "";
       const finalText = base + sep + text;
       insertTextAtCursor(text);
-      if (shouldSend) {
+      if (after === "send") {
         void handleSend(finalText);
+      } else if (after === "steer" || after === "followup") {
+        sendQueued(after, finalText);
       } else {
         toast.success(t("chatInput.dictationSuccess"));
       }
@@ -714,17 +720,25 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     },
   });
   const stopAndInsertDictation = useCallback(() => {
-    sendAfterDictationRef.current = false;
+    dictationAfterRef.current = null;
     stopDictation();
   }, [stopDictation]);
   const stopAndSendDictation = useCallback(() => {
-    sendAfterDictationRef.current = true;
+    dictationAfterRef.current = "send";
+    stopDictation();
+  }, [stopDictation]);
+  const stopAndQueueDictation = useCallback((mode: "steer" | "followup") => {
+    dictationAfterRef.current = mode;
     stopDictation();
   }, [stopDictation]);
   const cancelDictationAndReset = useCallback(() => {
-    sendAfterDictationRef.current = false;
+    dictationAfterRef.current = null;
     cancelDictation();
   }, [cancelDictation]);
+  const startFreshDictation = useCallback(() => {
+    dictationAfterRef.current = null;
+    toggleDictation();
+  }, [toggleDictation]);
   // While the recording deck replaces the textarea there is no focused input,
   // so Escape/Enter are handled at window level: Escape cancels/discard, Enter
   // retries after an error or converts the recording to text.
@@ -1022,8 +1036,9 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     });
   }, []);
 
-  const sendQueued = useCallback((mode: "steer" | "followup") => {
-    const msg = value.trim();
+  const sendQueued = useCallback((mode: "steer" | "followup", overrideText?: string) => {
+    const raw = overrideText ?? value;
+    const msg = raw.trim();
     if (!msg && !attachedImages.length && !attachedTextFiles.length) return;
     if (attachedImages.length || attachedTextFiles.length) return;
     onAudioUnlock?.();
@@ -1067,11 +1082,14 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     }
     clearInput();
   }, [value, attachedImages, attachedTextFiles, onPromptWithStreamingBehavior, onSteer, onFollowUp, clearInput, onAudioUnlock, t, advisorEnabled, rejectsOversizedPrompt]);
-  // A typed, text-only message during a run is a queued follow-up. Keep Stop
-  // as the action while the composer is empty or contains attachments.
+  // A typed, text-only message during a run is a queued follow-up — and so is
+  // a dictation in progress: the primary button must take the same state it
+  // would have if the composer already held text. Keep Stop as the action
+  // while the composer is empty and nothing is being recorded.
+  const dictationCapturing = isRecording || isPaused;
   const primaryActionQueuesMessage =
     isStreaming
-    && Boolean(value.trim())
+    && (Boolean(value.trim()) || dictationCapturing)
     && attachedImages.length === 0
     && attachedTextFiles.length === 0
     && Boolean(onFollowUp);
@@ -1190,7 +1208,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
       }
       if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "m") {
         e.preventDefault();
-        toggleDictation();
+        startFreshDictation();
         return;
       }
 
@@ -1314,7 +1332,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         }
       }
     },
-    [isMobile, isStreaming, onSteer, onFollowUp, onAbort, onMinimize, slashMenuOpen, slashQuery, filteredSlashCommands, slashActiveIndex, applySlashCommand, sendQueued, handleSend, getNextSlashIndex, atMenuOpen, atQuery, atMatches, atActiveIndex, applyAtCompletion, historyMenuOpen, inputHistory, historyActiveIndex, applyHistoryInput, value, toggleDictation]
+    [isMobile, isStreaming, onSteer, onFollowUp, onAbort, onMinimize, slashMenuOpen, slashQuery, filteredSlashCommands, slashActiveIndex, applySlashCommand, sendQueued, handleSend, getNextSlashIndex, atMenuOpen, atQuery, atMatches, atActiveIndex, applyAtCompletion, historyMenuOpen, inputHistory, historyActiveIndex, applyHistoryInput, value, startFreshDictation]
   );
 
   const handleInput = useCallback(() => {
@@ -2295,8 +2313,6 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               transcribeError={transcribeError}
               onPauseResume={togglePauseDictation}
               onConvert={stopAndInsertDictation}
-              onSend={stopAndSendDictation}
-              onCancel={cancelDictationAndReset}
               onRetry={retryDictation}
             />
           ) : (
@@ -2844,37 +2860,61 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
             )}
 
             {/* Dictation */}
-            <button
-              type="button"
-              onClick={toggleDictation}
-              disabled={isTranscribing}
-              title={isRecording ? t("chatInput.stopDictation") : isTranscribing ? t("chatInput.transcribing") : t("chatInput.startDictation")}
-              aria-label={isRecording ? t("chatInput.stopDictation") : isTranscribing ? t("chatInput.transcribing") : t("chatInput.startDictation")}
-              style={{
-                display: "flex", alignItems: "center", justifyContent: "center",
-                width: 28, height: 28, padding: 0,
-                background: isRecording ? "var(--danger-subtle, rgba(239, 68, 68, 0.15))" : "none",
-                border: isRecording ? "1px solid var(--danger, #ef4444)" : "none",
-                borderRadius: 7,
-                color: isRecording ? "var(--danger, #ef4444)" : isTranscribing ? "var(--accent)" : "var(--text-muted)",
-                cursor: isTranscribing ? "wait" : "pointer",
-                transition: "background var(--dur-fast) var(--ease-out-warm), color var(--dur-fast) var(--ease-out-warm)",
-              }}
-              onMouseEnter={(e) => { if (!isRecording && !isTranscribing) e.currentTarget.style.background = "var(--bg-hover)"; }}
-              onMouseLeave={(e) => { e.currentTarget.style.background = isRecording ? "var(--danger-subtle, rgba(239, 68, 68, 0.15))" : "none"; }}
-            >
-              {isTranscribing ? (
-                <Loader2 size={14} strokeWidth={1.8} className="animate-spin" aria-hidden="true" />
-              ) : (
+            {isRecording || isPaused || isTranscribing || transcribeError ? (
+              <button
+                type="button"
+                onClick={cancelDictationAndReset}
+                title={transcribeError ? t("chatInput.discardDictation") : t("chatInput.cancelDictation")}
+                aria-label={transcribeError ? t("chatInput.discardDictation") : t("chatInput.cancelDictation")}
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 28, height: 28, padding: 0,
+                  background: "var(--danger-subtle, rgba(239, 68, 68, 0.15))",
+                  border: "1px solid var(--danger, #ef4444)",
+                  borderRadius: 7,
+                  color: "var(--danger, #ef4444)",
+                  cursor: "pointer",
+                  transition: "background var(--dur-fast) var(--ease-out-warm), color var(--dur-fast) var(--ease-out-warm)",
+                }}
+              >
+                <X size={14} strokeWidth={1.8} aria-hidden="true" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={startFreshDictation}
+                title={t("chatInput.startDictation")}
+                aria-label={t("chatInput.startDictation")}
+                style={{
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  width: 28, height: 28, padding: 0,
+                  background: "none",
+                  border: "none",
+                  borderRadius: 7,
+                  color: "var(--text-muted)",
+                  cursor: "pointer",
+                  transition: "background var(--dur-fast) var(--ease-out-warm), color var(--dur-fast) var(--ease-out-warm)",
+                }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}
+              >
                 <Mic size={14} strokeWidth={1.8} aria-hidden="true" />
-              )}
-            </button>
+              </button>
+            )}
             {/* Primary action: Send (idle) / Queue (typed while running) / Stop (running) */}
             {primaryActionQueuesMessage ? (
               <button
                 type="button"
                 className="composer-primary-action"
-                onClick={() => sendQueued("followup")}
+                onClick={() => {
+                  if (dictationCapturing) {
+                    const behavior = getSubmitDuringRunBehavior();
+                    stopAndQueueDictation(behavior === "steer" && onSteer ? "steer" : "followup");
+                  } else {
+                    sendQueued("followup");
+                  }
+                }}
+                disabled={isTranscribing}
                 title={t("chatInput.queueMessage")}
                 style={{
                   display: "flex", alignItems: "center", gap: 6,
@@ -2918,25 +2958,30 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               <button
                 type="button"
                 className="composer-primary-action"
-                onClick={() => void handleSend()}
-                disabled={!value.trim() && !attachedImages.length && !attachedTextFiles.length}
+                onClick={isRecording || isPaused ? stopAndSendDictation : () => void handleSend()}
+                disabled={isTranscribing || !(isRecording || isPaused || value.trim() || attachedImages.length || attachedTextFiles.length)}
+                title={isRecording || isPaused ? t("chatInput.sendDictation") : t("chatInput.send")}
                 style={{
                   display: "flex", alignItems: "center", gap: 6,
-                  background: (value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--accent-strong)" : "var(--bg-panel)",
+                  background: (isRecording || isPaused || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--accent-strong)" : "var(--bg-panel)",
                   border: "none",
                   borderRadius: 8,
-                  color: (value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--on-accent)" : "var(--text-dim)",
-                  cursor: (value.trim() || attachedImages.length || attachedTextFiles.length) ? "pointer" : "not-allowed",
+                  color: (isRecording || isPaused || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--on-accent)" : "var(--text-dim)",
+                  cursor: isTranscribing ? "wait" : (isRecording || isPaused || value.trim() || attachedImages.length || attachedTextFiles.length) ? "pointer" : "not-allowed",
                   fontSize: 12,
                   fontWeight: 600,
-                  boxShadow: (value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--shadow-card)" : "none",
+                  boxShadow: (isRecording || isPaused || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--shadow-card)" : "none",
                   transition: "background var(--dur-fast) var(--ease-out-warm), box-shadow var(--dur-fast) var(--ease-out-warm)",
                 }}
               >
-                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="2" y1="7" x2="11" y2="7" />
-                  <polyline points="7.5 3 12 7 7.5 11" />
-                </svg>
+                {isTranscribing ? (
+                  <Loader2 size={12} strokeWidth={2} className="animate-spin" aria-hidden="true" />
+                ) : (
+                  <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <line x1="2" y1="7" x2="11" y2="7" />
+                    <polyline points="7.5 3 12 7 7.5 11" />
+                  </svg>
+                )}
                 {t("chatInput.send")}
               </button>
             )}
diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index e22d1bc0..b68166b0 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { AlertCircle, Loader2, Pause, Play, RotateCw, Square, X } from "lucide-react";
+import { AlertCircle, Loader2, Pause, Play, RotateCw, Square } from "lucide-react";
 import { MAX_RECORDING_MS, type DictationCapture } from "@/hooks/useDictation";
 import { useI18n } from "@/lib/i18n";
 
@@ -18,8 +18,6 @@ interface RecordingDeckProps {
   transcribeError: string | null;
   onPauseResume: () => void;
   onConvert: () => void;
-  onSend: () => void;
-  onCancel: () => void;
   onRetry: () => void;
 }
 
@@ -73,10 +71,15 @@ export function RecordingDeck({
   transcribeError,
   onPauseResume,
   onConvert,
-  onSend,
-  onCancel,
   onRetry,
 }: RecordingDeckProps) {
+  const { t } = useI18n();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const barsRef = useRef<number[]>([]);
+  const [elapsed, setElapsed] = useState(0);
+
+  const captureActive = !isTranscribing && !transcribeError;
+
   useEffect(() => {
     const compute = () => {
       const capture = captureRef.current;
@@ -99,12 +102,6 @@ export function RecordingDeck({
     const id = window.setInterval(compute, 100);
     return () => window.clearInterval(id);
   }, [captureRef]);
-  const { t } = useI18n();
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const [elapsed, setElapsed] = useState(0);
-
-  const captureActive = !isTranscribing && !transcribeError;
-
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -120,15 +117,15 @@ export function RecordingDeck({
     const style = getComputedStyle(canvas);
     const barColor = (isPaused ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--danger")).trim() || (isPaused ? "#888" : "#ef4444");
 
-    const bars: number[] = [];
     const data = new Uint8Array(256);
     let raf = 0;
     let lastPush = 0;
 
     const draw = (now: number) => {
       raf = requestAnimationFrame(draw);
-      const analyser = (isPaused ? null : captureRef.current?.analyser) ?? null;
-      if (analyser && now - lastPush >= SAMPLE_INTERVAL_MS) {
+      const analyser = captureRef.current?.analyser ?? null;
+      const bars = barsRef.current;
+      if (analyser && !isPaused && now - lastPush >= SAMPLE_INTERVAL_MS) {
         lastPush = now;
         analyser.getByteTimeDomainData(data);
         let sum = 0;
@@ -142,14 +139,12 @@ export function RecordingDeck({
       }
       ctx.clearRect(0, 0, WAVE_WIDTH, WAVE_HEIGHT);
       ctx.fillStyle = barColor;
-      ctx.globalAlpha = isPaused ? 0.45 : 1;
       const gap = 2;
       const barW = (WAVE_WIDTH - gap * (BAR_COUNT - 1)) / BAR_COUNT;
       for (let i = 0; i < bars.length; i++) {
         const h = Math.max(2, bars[i] * (WAVE_HEIGHT - 2));
         ctx.fillRect(i * (barW + gap), (WAVE_HEIGHT - h) / 2, barW, h);
       }
-      ctx.globalAlpha = 1;
     };
     raf = requestAnimationFrame(draw);
     return () => cancelAnimationFrame(raf);
@@ -175,9 +170,6 @@ export function RecordingDeck({
           <div style={{ flex: 1, maxWidth: 220, height: 3, borderRadius: 2, background: "var(--border)", overflow: "hidden", position: "relative" }}>
             <div className="dictation-indeterminate" style={{ position: "absolute", top: 0, bottom: 0, width: "40%", background: "var(--accent)", borderRadius: 2 }} />
           </div>
-          <DeckIconButton onClick={onCancel} title={t("chatInput.cancelDictation")} tone="danger">
-            <X size={14} strokeWidth={1.8} aria-hidden="true" />
-          </DeckIconButton>
         </div>
       ) : transcribeError ? (
         <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--text)", minWidth: 0 }}>
@@ -188,16 +180,13 @@ export function RecordingDeck({
           <DeckIconButton onClick={onRetry} title={t("chatInput.retryDictation")} tone="accent">
             <RotateCw size={14} strokeWidth={1.8} aria-hidden="true" />
           </DeckIconButton>
-          <DeckIconButton onClick={onCancel} title={t("chatInput.discardDictation")} tone="danger">
-            <X size={14} strokeWidth={1.8} aria-hidden="true" />
-          </DeckIconButton>
         </div>
       ) : (
         <>
           <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
             <span
               aria-hidden="true"
-              style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--danger, #ef4444)", flexShrink: 0 }}
+              style={{ width: 8, height: 8, borderRadius: "50%", background: isPaused ? "var(--text-muted)" : "var(--danger, #ef4444)", flexShrink: 0 }}
             />
             <span
               style={{
@@ -218,15 +207,6 @@ export function RecordingDeck({
               <DeckIconButton onClick={onConvert} title={t("chatInput.convertDictation")}>
                 <Square size={11} strokeWidth={2} aria-hidden="true" />
               </DeckIconButton>
-              <DeckIconButton onClick={onSend} title={t("chatInput.sendDictation")} tone="accent">
-                <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                  <line x1="2" y1="7" x2="11" y2="7" />
-                  <polyline points="7.5 3 12 7 7.5 11" />
-                </svg>
-              </DeckIconButton>
-              <DeckIconButton onClick={onCancel} title={t("chatInput.cancelDictation")} tone="danger">
-                <X size={14} strokeWidth={1.8} aria-hidden="true" />
-              </DeckIconButton>
             </div>
           </div>
           <div
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index 58eb6a7d..7f4e5528 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -82,7 +82,7 @@ test("ChatInput supports transcribe-only and transcribe-and-send endings", async
   const source = await readFile(new URL("../components/ChatInput.tsx", import.meta.url), "utf8");
 
   // Send mode flags the transcript to be sent once transcription succeeds
-  assert.match(source, /sendAfterDictationRef\.current = true;/);
+  assert.match(source, /dictationAfterRef\.current = "send";/);
   assert.match(source, /void handleSend\(finalText\)/);
 
   // handleSend accepts the composed dictation text override

From fcf3bb7e02ef37d5b00654ef2db1ee8b48da0b25 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Wed, 16 Sep 2026 08:07:39 +0000
Subject: [PATCH 05/14] =?UTF-8?q?fix(dictation):=20apply=20review=20findin?=
 =?UTF-8?q?gs=20=E2=80=94=20theme=20tokens,=20audio=20lifecycle,=20attachm?=
 =?UTF-8?q?ent=20staleness,=20dynamic=20waveform=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use the theme's --status-error token instead of undefined --danger
  custom properties so dictation colors follow light/dark themes.
- Close the AudioContext and release the analyser when capture finishes,
  not only on cleanup, so transcription no longer holds the mic graph.
- Read attachments through refs inside handleSend/sendQueued so files
  attached mid-recording are included when the transcript dispatches.
- Surface 'No speech detected' when a capture yields no audio instead of
  failing silently.
- Stretch the waveform canvas to the free composer width (dynamic bar
  count, newest samples at the buttons) and freeze it gray while paused.
- Make the transcribe-and-send wiring test assert the contiguous branch.
- Drop the orphaned chatInput.stopDictation i18n key.
---
 components/ChatInput.tsx     | 40 +++++++++++++--------------
 components/RecordingDeck.tsx | 52 ++++++++++++++++++++++--------------
 hooks/useDictation.test.mjs  | 10 ++++---
 hooks/useDictation.ts        |  8 ++++++
 lib/i18n/locales/en.json     |  1 -
 lib/i18n/locales/ja.json     |  1 -
 lib/i18n/locales/zh-CN.json  |  1 -
 7 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index 3678ab47..62c69ba3 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -651,13 +651,13 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
   const handleSend = useCallback(async (overrideText?: string) => {
     const raw = overrideText ?? value;
     const msg = raw.trim();
-    if (!msg && !attachedImages.length && !attachedTextFiles.length) return;
+    if (!msg && !attachedImagesRef.current.length && !attachedTextFilesRef.current.length) return;
     if (isStreaming) return;
     onAudioUnlock?.();
-    const composedMessage = composeMessageWithTextAttachments(msg, attachedTextFiles);
-    if (!attachedImages.length && !attachedTextFiles.length && msg.startsWith("/") && onBuiltinCommand) {
+    const composedMessage = composeMessageWithTextAttachments(msg, attachedTextFilesRef.current);
+    if (!attachedImagesRef.current.length && !attachedTextFilesRef.current.length && msg.startsWith("/") && onBuiltinCommand) {
       const expansion = expandWebSlashCommand(msg);
-      if (expansion.kind === "expand" && rejectsOversizedPrompt(expansion.prompt, attachedImages)) return;
+      if (expansion.kind === "expand" && rejectsOversizedPrompt(expansion.prompt, attachedImagesRef.current)) return;
       const sentValue = overrideText ?? value;
       const result = await onBuiltinCommand(msg);
       if (result.handled) {
@@ -667,10 +667,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         return;
       }
     }
-    if (rejectsOversizedPrompt(composedMessage, attachedImages)) return;
-    onSend(composedMessage, attachedImages.length ? attachedImages : undefined);
+    if (rejectsOversizedPrompt(composedMessage, attachedImagesRef.current)) return;
+    onSend(composedMessage, attachedImagesRef.current.length ? attachedImagesRef.current : undefined);
     clearInput();
-  }, [value, attachedImages, attachedTextFiles, isStreaming, onBuiltinCommand, onSend, clearInput, onAudioUnlock, rejectsOversizedPrompt]);
+  }, [value, isStreaming, onBuiltinCommand, onSend, clearInput, onAudioUnlock, rejectsOversizedPrompt]);
   /** What happens to the composer after the transcript lands: null inserts it
    *  for editing; "send" dispatches immediately; "steer"/"followup" queue it
    *  into the running agent. */
@@ -1039,8 +1039,8 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
   const sendQueued = useCallback((mode: "steer" | "followup", overrideText?: string) => {
     const raw = overrideText ?? value;
     const msg = raw.trim();
-    if (!msg && !attachedImages.length && !attachedTextFiles.length) return;
-    if (attachedImages.length || attachedTextFiles.length) return;
+    if (!msg && !attachedImagesRef.current.length && !attachedTextFilesRef.current.length) return;
+    if (attachedImagesRef.current.length || attachedTextFilesRef.current.length) return;
     onAudioUnlock?.();
     const streamingBehavior = mode === "steer" ? "steer" : "followUp";
     if (msg.startsWith("/") && onPromptWithStreamingBehavior) {
@@ -1057,8 +1057,8 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
       // own ACP handlers can run them.
       const expansion = expandWebSlashCommand(msg);
       if (expansion.kind === "expand") {
-        if (rejectsOversizedPrompt(expansion.prompt, attachedImages)) return;
-        onPromptWithStreamingBehavior(expansion.prompt, streamingBehavior, attachedImages.length ? attachedImages : undefined);
+        if (rejectsOversizedPrompt(expansion.prompt, attachedImagesRef.current)) return;
+        onPromptWithStreamingBehavior(expansion.prompt, streamingBehavior, attachedImagesRef.current.length ? attachedImagesRef.current : undefined);
         clearInput();
         return;
       }
@@ -1069,19 +1069,19 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         }));
         return;
       }
-      if (rejectsOversizedPrompt(msg, attachedImages)) return;
-      onPromptWithStreamingBehavior(msg, streamingBehavior, attachedImages.length ? attachedImages : undefined);
+      if (rejectsOversizedPrompt(msg, attachedImagesRef.current)) return;
+      onPromptWithStreamingBehavior(msg, streamingBehavior, attachedImagesRef.current.length ? attachedImagesRef.current : undefined);
       clearInput();
       return;
     }
-    if (rejectsOversizedPrompt(msg, attachedImages)) return;
+    if (rejectsOversizedPrompt(msg, attachedImagesRef.current)) return;
     if (mode === "steer" && onSteer) {
-      onSteer(msg, attachedImages.length ? attachedImages : undefined);
+      onSteer(msg, attachedImagesRef.current.length ? attachedImagesRef.current : undefined);
     } else if (mode === "followup" && onFollowUp) {
-      onFollowUp(msg, attachedImages.length ? attachedImages : undefined);
+      onFollowUp(msg, attachedImagesRef.current.length ? attachedImagesRef.current : undefined);
     }
     clearInput();
-  }, [value, attachedImages, attachedTextFiles, onPromptWithStreamingBehavior, onSteer, onFollowUp, clearInput, onAudioUnlock, t, advisorEnabled, rejectsOversizedPrompt]);
+  }, [value, onPromptWithStreamingBehavior, onSteer, onFollowUp, clearInput, onAudioUnlock, t, advisorEnabled, rejectsOversizedPrompt]);
   // A typed, text-only message during a run is a queued follow-up — and so is
   // a dictation in progress: the primary button must take the same state it
   // would have if the composer already held text. Keep Stop as the action
@@ -2869,10 +2869,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
                 style={{
                   display: "flex", alignItems: "center", justifyContent: "center",
                   width: 28, height: 28, padding: 0,
-                  background: "var(--danger-subtle, rgba(239, 68, 68, 0.15))",
-                  border: "1px solid var(--danger, #ef4444)",
+                  background: "color-mix(in srgb, var(--status-error) 15%, transparent)",
+                  border: "1px solid var(--status-error)",
                   borderRadius: 7,
-                  color: "var(--danger, #ef4444)",
+                  color: "var(--status-error)",
                   cursor: "pointer",
                   transition: "background var(--dur-fast) var(--ease-out-warm), color var(--dur-fast) var(--ease-out-warm)",
                 }}
diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index b68166b0..d9df0e4c 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -7,7 +7,6 @@ import { useI18n } from "@/lib/i18n";
 
 const WAVE_WIDTH = 160;
 const WAVE_HEIGHT = 28;
-const BAR_COUNT = 40;
 const SAMPLE_INTERVAL_MS = 50;
 const BAR_SCALE = 3;
 
@@ -47,13 +46,13 @@ function DeckIconButton({
         display: "flex", alignItems: "center", justifyContent: "center",
         width: 28, height: 28, padding: 0, flexShrink: 0,
         background:
-          tone === "danger" ? "var(--danger-subtle, rgba(239, 68, 68, 0.15))"
+          tone === "danger" ? "color-mix(in srgb, var(--status-error) 15%, transparent)"
           : tone === "accent" ? "var(--bg-subtle)"
           : "var(--bg-subtle)",
-        border: `1px solid ${tone === "danger" ? "var(--danger, #ef4444)" : tone === "accent" ? "var(--accent)" : "var(--border)"}`,
+        border: `1px solid ${tone === "danger" ? "var(--status-error)" : tone === "accent" ? "var(--accent)" : "var(--border)"}`,
         borderRadius: 7,
         color:
-          tone === "danger" ? "var(--danger, #ef4444)"
+          tone === "danger" ? "var(--status-error)"
           : tone === "accent" ? "var(--accent)"
           : "var(--text-muted)",
         cursor: "pointer",
@@ -110,12 +109,10 @@ export function RecordingDeck({
     if (!ctx) return;
 
     const dpr = window.devicePixelRatio || 1;
-    canvas.width = WAVE_WIDTH * dpr;
-    canvas.height = WAVE_HEIGHT * dpr;
-    ctx.scale(dpr, dpr);
+    let lastW = 0;
 
     const style = getComputedStyle(canvas);
-    const barColor = (isPaused ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--danger")).trim() || (isPaused ? "#888" : "#ef4444");
+    const barColor = (isPaused ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--status-error")).trim();
 
     const data = new Uint8Array(256);
     let raf = 0;
@@ -123,8 +120,18 @@ export function RecordingDeck({
 
     const draw = (now: number) => {
       raf = requestAnimationFrame(draw);
-      const analyser = captureRef.current?.analyser ?? null;
+      // The canvas flexes with the composer; re-fit the backing store whenever
+      // its CSS width changes (mobile <-> desktop, panel resizes).
+      const cssW = Math.max(1, canvas.clientWidth || WAVE_WIDTH);
+      if (cssW !== lastW) {
+        lastW = cssW;
+        canvas.width = cssW * dpr;
+        canvas.height = WAVE_HEIGHT * dpr;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+      const barCount = Math.max(24, Math.min(80, Math.floor(cssW / 6)));
       const bars = barsRef.current;
+      const analyser = captureRef.current?.analyser ?? null;
       if (analyser && !isPaused && now - lastPush >= SAMPLE_INTERVAL_MS) {
         lastPush = now;
         analyser.getByteTimeDomainData(data);
@@ -135,15 +142,20 @@ export function RecordingDeck({
         }
         const rms = Math.sqrt(sum / data.length);
         bars.push(Math.min(1, rms * BAR_SCALE));
-        if (bars.length > BAR_COUNT) bars.shift();
+        while (bars.length > barCount) bars.shift();
       }
-      ctx.clearRect(0, 0, WAVE_WIDTH, WAVE_HEIGHT);
+      while (bars.length > barCount) bars.shift();
+
+      ctx.clearRect(0, 0, cssW, WAVE_HEIGHT);
       ctx.fillStyle = barColor;
       const gap = 2;
-      const barW = (WAVE_WIDTH - gap * (BAR_COUNT - 1)) / BAR_COUNT;
-      for (let i = 0; i < bars.length; i++) {
-        const h = Math.max(2, bars[i] * (WAVE_HEIGHT - 2));
-        ctx.fillRect(i * (barW + gap), (WAVE_HEIGHT - h) / 2, barW, h);
+      const barW = Math.max(1, (cssW - gap * (barCount - 1)) / barCount);
+      // Newest samples hug the buttons (right edge); history trails left.
+      const visible = bars.slice(-barCount);
+      const offset = cssW - visible.length * (barW + gap) + gap;
+      for (let i = 0; i < visible.length; i++) {
+        const h = Math.max(2, visible[i] * (WAVE_HEIGHT - 2));
+        ctx.fillRect(offset + i * (barW + gap), (WAVE_HEIGHT - h) / 2, barW, h);
       }
     };
     raf = requestAnimationFrame(draw);
@@ -167,13 +179,13 @@ export function RecordingDeck({
         <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-muted)", fontSize: 12 }}>
           <Loader2 size={14} strokeWidth={1.8} className="animate-spin" aria-hidden="true" />
           <span style={{ flexShrink: 0 }}>{t("chatInput.transcribing")}</span>
-          <div style={{ flex: 1, maxWidth: 220, height: 3, borderRadius: 2, background: "var(--border)", overflow: "hidden", position: "relative" }}>
+          <div style={{ flex: 1, height: 3, borderRadius: 2, background: "var(--border)", overflow: "hidden", position: "relative" }}>
             <div className="dictation-indeterminate" style={{ position: "absolute", top: 0, bottom: 0, width: "40%", background: "var(--accent)", borderRadius: 2 }} />
           </div>
         </div>
       ) : transcribeError ? (
         <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--text)", minWidth: 0 }}>
-          <AlertCircle size={14} strokeWidth={1.8} aria-hidden="true" style={{ color: "var(--danger, #ef4444)", flexShrink: 0 }} />
+          <AlertCircle size={14} strokeWidth={1.8} aria-hidden="true" style={{ color: "var(--status-error)", flexShrink: 0 }} />
           <span title={transcribeError} style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>
             {transcribeError}
           </span>
@@ -186,7 +198,7 @@ export function RecordingDeck({
           <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
             <span
               aria-hidden="true"
-              style={{ width: 8, height: 8, borderRadius: "50%", background: isPaused ? "var(--text-muted)" : "var(--danger, #ef4444)", flexShrink: 0 }}
+              style={{ width: 8, height: 8, borderRadius: "50%", background: isPaused ? "var(--text-muted)" : "var(--status-error)", flexShrink: 0 }}
             />
             <span
               style={{
@@ -199,7 +211,7 @@ export function RecordingDeck({
             >
               {formatElapsed(elapsed)}
             </span>
-            <canvas ref={canvasRef} style={{ width: WAVE_WIDTH, height: WAVE_HEIGHT, flexShrink: 1, minWidth: 0, alignSelf: "center" }} aria-hidden="true" />
+            <canvas ref={canvasRef} style={{ flex: 1, minWidth: 0, height: WAVE_HEIGHT, alignSelf: "center" }} aria-hidden="true" />
             <div style={{ display: "flex", alignItems: "center", gap: 2, marginLeft: "auto", flexShrink: 0 }}>
               <DeckIconButton onClick={onPauseResume} title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}>
                 {isPaused ? <Play size={14} strokeWidth={1.8} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}
@@ -220,7 +232,7 @@ export function RecordingDeck({
               style={{
                 height: "100%",
                 width: `${Math.min(100, (elapsed / MAX_RECORDING_MS) * 100)}%`,
-                background: "var(--danger, #ef4444)",
+                background: "var(--status-error)",
                 transition: "width 0.1s linear",
               }}
             />
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index 7f4e5528..43ccc297 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -81,9 +81,13 @@ test("ChatInput replaces the composer with the deck and routes dictation keys at
 test("ChatInput supports transcribe-only and transcribe-and-send endings", async () => {
   const source = await readFile(new URL("../components/ChatInput.tsx", import.meta.url), "utf8");
 
-  // Send mode flags the transcript to be sent once transcription succeeds
-  assert.match(source, /dictationAfterRef\.current = "send";/);
-  assert.match(source, /void handleSend\(finalText\)/);
+  // Send mode flags the transcript to be sent once transcription succeeds,
+  // and queue modes route through sendQueued — asserted as one wired block
+  // so a regression in the branch cannot pass via unrelated string matches.
+  assert.match(
+    source,
+    /const after = dictationAfterRef\.current;[\s\S]*?if \(after === "send"\) \{\s*\n\s*void handleSend\(finalText\);\s*\n\s*\} else if \(after === "steer" \|\| after === "followup"\) \{\s*\n\s*sendQueued\(after, finalText\);/,
+  );
 
   // handleSend accepts the composed dictation text override
   assert.match(source, /async \(overrideText\?: string\) =>/);
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index d3adab34..a5e40bf0 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -160,6 +160,11 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       streamRef.current.getTracks().forEach((track) => track.stop());
       streamRef.current = null;
     }
+    if (audioContextRef.current) {
+      void audioContextRef.current.close().catch(() => {});
+      audioContextRef.current = null;
+    }
+    captureRef.current.analyser = null;
     setIsRecording(false);
     setIsPaused(false);
     setIsTranscribing(true);
@@ -216,7 +221,10 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         if (cancelledRef.current) return;
         clearMaxTimeout();
         if (chunks.length === 0) {
+          const message = "No speech detected";
+          setTranscribeError(message);
           setIsTranscribing(false);
+          onError?.(message);
           return;
         }
         const mimeType = recorder.mimeType || "audio/webm";
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index 16c2a55d..dd4ab113 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -260,7 +260,6 @@
   "chatInput.plusOff": "Off",
   "chatInput.attachImage": "Attach image",
   "chatInput.startDictation": "Start dictation",
-  "chatInput.stopDictation": "Stop dictation",
   "chatInput.transcribing": "Transcribing...",
   "chatInput.dictationFailed": "Transcription failed",
   "chatInput.dictationNoSpeech": "No speech detected",
diff --git a/lib/i18n/locales/ja.json b/lib/i18n/locales/ja.json
index ff0c99ed..ec886cd8 100644
--- a/lib/i18n/locales/ja.json
+++ b/lib/i18n/locales/ja.json
@@ -247,7 +247,6 @@
   "chatInput.plusOff": "オフ",
   "chatInput.attachImage": "画像を添付",
   "chatInput.startDictation": "音声入力を開始",
-  "chatInput.stopDictation": "音声入力を停止",
   "chatInput.transcribing": "文字起こし中...",
   "chatInput.dictationFailed": "文字起こしに失敗しました",
   "chatInput.dictationNoSpeech": "音声が検出されませんでした",
diff --git a/lib/i18n/locales/zh-CN.json b/lib/i18n/locales/zh-CN.json
index 8cae42f7..c42d19f5 100644
--- a/lib/i18n/locales/zh-CN.json
+++ b/lib/i18n/locales/zh-CN.json
@@ -247,7 +247,6 @@
   "chatInput.plusOff": "关",
   "chatInput.attachImage": "附加图片",
   "chatInput.startDictation": "开始语音输入",
-  "chatInput.stopDictation": "停止语音输入",
   "chatInput.transcribing": "正在转录...",
   "chatInput.dictationFailed": "转录失败",
   "chatInput.dictationNoSpeech": "未检测到语音",

From da39b8c2ef6ecc5310f64fa58691751e70519860 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Wed, 16 Sep 2026 15:10:42 +0000
Subject: [PATCH 06/14] =?UTF-8?q?fix(dictation):=20address=20coderabbit=20?=
 =?UTF-8?q?findings=20=E2=80=94=20audio=20context=20ownership,=20state-gat?=
 =?UTF-8?q?ed=20finish,=20enter=20passthrough?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ChatInput.tsx |  4 ++++
 hooks/useDictation.ts    | 31 ++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index 62c69ba3..a985f9a4 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -749,6 +749,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         e.preventDefault();
         cancelDictationAndReset();
       } else if (e.key === "Enter" && !e.shiftKey && !isTranscribing) {
+        // Let focused deck/toolbar controls keep their own activation;
+        // only hijack Enter from the non-interactive page context.
+        const target = e.target as HTMLElement | null;
+        if (target && target.closest("button, input, textarea, select, a, [role='button']")) return;
         e.preventDefault();
         if (transcribeError) retryDictation();
         else stopAndInsertDictation();
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index a5e40bf0..bb9ef45d 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -144,18 +144,18 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     }
   }, [onTranscript, onError]);
 
-  // Ends capture and moves the session into transcription. Sets isTranscribing
-  // eagerly so the deck never flashes back to the text composer between
-  // recorder.stop() and the async onstop event.
+  // Ends capture and moves the session into transcription. Gates on the live
+  // MediaRecorder state (not the isRecording closure) because the 5-minute
+  // cap timeout captures this callback from the render that started the
+  // recording. Sets isTranscribing eagerly so the deck never flashes back to
+  // the text composer between recorder.stop() and the async onstop event.
   const finishCapture = useCallback(() => {
-    if (!isRecording) return;
     clearMaxTimeout();
     const recorder = mediaRecorderRef.current;
-    if (recorder && recorder.state !== "inactive") {
-      try {
-        recorder.stop();
-      } catch {}
-    }
+    if (!recorder || recorder.state === "inactive") return;
+    try {
+      recorder.stop();
+    } catch {}
     if (streamRef.current) {
       streamRef.current.getTracks().forEach((track) => track.stop());
       streamRef.current = null;
@@ -168,7 +168,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     setIsRecording(false);
     setIsPaused(false);
     setIsTranscribing(true);
-  }, [isRecording, clearMaxTimeout]);
+  }, [clearMaxTimeout]);
 
   const start = useCallback(async () => {
     if (isStartingRef.current || isRecording || isTranscribing) return;
@@ -197,16 +197,21 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
 
       captureRef.current = { analyser: null, startedAt: performance.now(), pausedAccum: 0, pausedAt: null };
       if (typeof window.AudioContext === "function") {
+        let ctx: AudioContext | null = null;
         try {
-          const ctx = new AudioContext();
+          ctx = new AudioContext();
+          audioContextRef.current = ctx;
           if (ctx.state === "suspended") void ctx.resume();
           const source = ctx.createMediaStreamSource(stream);
           const analyser = ctx.createAnalyser();
           analyser.fftSize = 256;
           source.connect(analyser);
-          audioContextRef.current = ctx;
           captureRef.current.analyser = analyser;
-        } catch {}
+        } catch {
+          // Own the failure: never leave a live context behind untracked.
+          void ctx?.close().catch(() => {});
+          audioContextRef.current = null;
+        }
       }
 
       const recorder = new MediaRecorder(stream);

From 20890472045643c78511aa89eb1e43cf912a8783 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Thu, 17 Sep 2026 13:47:15 +0000
Subject: [PATCH 07/14] feat(dictation): play recording before transcribe

Stop enters review with playback instead of sending immediately.
Paused capture keeps a left-side preview play button.
---
 CHANGELOG.md                 |   1 +
 components/ChatInput.tsx     |  39 +++++---
 components/RecordingDeck.tsx | 125 +++++++++++++++++++++-----
 hooks/useDictation.test.mjs  |  32 ++++++-
 hooks/useDictation.ts        | 169 ++++++++++++++++++++++++++++++++---
 lib/i18n/locales/en.json     |   4 +
 lib/i18n/locales/ja.json     |   4 +
 lib/i18n/locales/zh-CN.json  |   4 +
 8 files changed, 332 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99420f9f..5c35cd47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ All notable changes to **omp-web** (`@kahme247/ompweb`) are documented in this f
 - Add **Copy** and **Copy as Markdown** below user messages and completed assistant replies, with keyboard access and touch-sized controls. Copy only message text, excluding thinking, tool output, and renderer controls; preserve full source for oversized raw-text messages.
 - Scope Ctrl+A / Cmd+A to the selected message, currently loaded chat, or active file contents instead of the whole page. Message selection includes collapsed extension previews and expanded details without toolbar labels. Newer pane focus takes precedence over retained child selections. Text fields and IME composition retain native behavior; browser-menu commands and embedded viewers remain browser-controlled.
 - Add an off-by-default **Scope native Select All (experimental)** switch in Settings → Interface & Behavior. The per-browser preference narrows whole-page selections from native menus while leaving keyboard scoping independent. Disable it if browser selection handles or menus behave unexpectedly; intentional whole-page selections can also be narrowed.
+- Play back a voice recording before transcribing or sending it. Pause keeps a left-side preview control; Stop opens a review deck with play, discard, and transcribe-and-send.
 
 ### Fixes & Improvements
 
diff --git a/components/ChatInput.tsx b/components/ChatInput.tsx
index a985f9a4..c0f58ad3 100644
--- a/components/ChatInput.tsx
+++ b/components/ChatInput.tsx
@@ -679,7 +679,11 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
   const {
     isRecording,
     isPaused,
+    isReviewing,
     isTranscribing,
+    isPlayingPreview,
+    previewCurrentTime,
+    previewDuration,
     transcribeError,
     captureRef,
     toggle: toggleDictation,
@@ -687,6 +691,10 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
     stop: stopDictation,
     togglePause: togglePauseDictation,
     retry: retryDictation,
+    playPreview: playPreviewDictation,
+    pausePreview: pausePreviewDictation,
+    seekPreview: seekPreviewDictation,
+    confirmTranscribe: confirmTranscribeDictation,
   } = useDictation({
     onTranscript: (text) => {
       const after = dictationAfterRef.current;
@@ -725,11 +733,11 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
   }, [stopDictation]);
   const stopAndSendDictation = useCallback(() => {
     dictationAfterRef.current = "send";
-    stopDictation();
+    stopDictation({ immediateSend: true });
   }, [stopDictation]);
   const stopAndQueueDictation = useCallback((mode: "steer" | "followup") => {
     dictationAfterRef.current = mode;
-    stopDictation();
+    stopDictation({ immediateSend: true });
   }, [stopDictation]);
   const cancelDictationAndReset = useCallback(() => {
     dictationAfterRef.current = null;
@@ -743,7 +751,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
   // so Escape/Enter are handled at window level: Escape cancels/discard, Enter
   // retries after an error or converts the recording to text.
   useEffect(() => {
-    if (!(isRecording || isPaused || isTranscribing || transcribeError)) return;
+    if (!(isRecording || isPaused || isReviewing || isTranscribing || transcribeError)) return;
     const onKeyDown = (e: globalThis.KeyboardEvent) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -755,12 +763,13 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
         if (target && target.closest("button, input, textarea, select, a, [role='button']")) return;
         e.preventDefault();
         if (transcribeError) retryDictation();
+        else if (isReviewing) confirmTranscribeDictation();
         else stopAndInsertDictation();
       }
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [isRecording, isPaused, isTranscribing, transcribeError, cancelDictationAndReset, retryDictation, stopAndInsertDictation]);
+  }, [isRecording, isPaused, isReviewing, isTranscribing, transcribeError, cancelDictationAndReset, retryDictation, confirmTranscribeDictation, stopAndInsertDictation]);
 
   const slashQuery = value.startsWith("/") && !/\s/.test(value.slice(1))
     ? value.slice(1).toLowerCase()
@@ -2309,15 +2318,23 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               transition: "border-color var(--dur-fast) var(--ease-out-warm), background var(--dur-fast) var(--ease-out-warm), box-shadow var(--dur-fast) var(--ease-out-warm)",
             } as React.CSSProperties}
           >
-          {isRecording || isPaused || isTranscribing || transcribeError ? (
+          {isRecording || isPaused || isReviewing || isTranscribing || transcribeError ? (
             <RecordingDeck
               captureRef={captureRef}
               isPaused={isPaused}
+              isReviewing={isReviewing}
               isTranscribing={isTranscribing}
+              isPlayingPreview={isPlayingPreview}
+              previewCurrentTime={previewCurrentTime}
+              previewDuration={previewDuration}
               transcribeError={transcribeError}
               onPauseResume={togglePauseDictation}
               onConvert={stopAndInsertDictation}
               onRetry={retryDictation}
+              onPlayPreview={isPlayingPreview ? pausePreviewDictation : playPreviewDictation}
+              onSeekPreview={seekPreviewDictation}
+              onConfirmTranscribe={confirmTranscribeDictation}
+              onDiscard={cancelDictationAndReset}
             />
           ) : (
           <textarea
@@ -2864,7 +2881,7 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
             )}
 
             {/* Dictation */}
-            {isRecording || isPaused || isTranscribing || transcribeError ? (
+            {isRecording || isPaused || isReviewing || isTranscribing || transcribeError ? (
               <button
                 type="button"
                 onClick={cancelDictationAndReset}
@@ -2962,15 +2979,15 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, Props>(function ChatIn
               <button
                 type="button"
                 className="composer-primary-action"
-                onClick={isRecording || isPaused ? stopAndSendDictation : () => void handleSend()}
-                disabled={isTranscribing || !(isRecording || isPaused || value.trim() || attachedImages.length || attachedTextFiles.length)}
-                title={isRecording || isPaused ? t("chatInput.sendDictation") : t("chatInput.send")}
+                onClick={isRecording || isPaused || isReviewing ? stopAndSendDictation : () => void handleSend()}
+                disabled={isTranscribing || !(isRecording || isPaused || isReviewing || value.trim() || attachedImages.length || attachedTextFiles.length)}
+                title={isRecording || isPaused || isReviewing ? t("chatInput.sendDictation") : t("chatInput.send")}
                 style={{
                   display: "flex", alignItems: "center", gap: 6,
-                  background: (isRecording || isPaused || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--accent-strong)" : "var(--bg-panel)",
+                  background: (isRecording || isPaused || isReviewing || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--accent-strong)" : "var(--bg-panel)",
                   border: "none",
                   borderRadius: 8,
-                  color: (isRecording || isPaused || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--on-accent)" : "var(--text-dim)",
+                  color: (isRecording || isPaused || isReviewing || isTranscribing || value.trim() || attachedImages.length || attachedTextFiles.length) ? "var(--on-accent)" : "var(--text-dim)",
                   cursor: isTranscribing ? "wait" : (isRecording || isPaused || value.trim() || attachedImages.length || attachedTextFiles.length) ? "pointer" : "not-allowed",
                   fontSize: 12,
                   fontWeight: 600,
diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index d9df0e4c..e3544195 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { AlertCircle, Loader2, Pause, Play, RotateCw, Square } from "lucide-react";
+import { AlertCircle, ArrowUp, Loader2, Pause, Play, RotateCw, Square, Trash2 } from "lucide-react";
 import { MAX_RECORDING_MS, type DictationCapture } from "@/hooks/useDictation";
 import { useI18n } from "@/lib/i18n";
 
@@ -13,11 +13,19 @@ const BAR_SCALE = 3;
 interface RecordingDeckProps {
   captureRef: React.RefObject<DictationCapture>;
   isPaused: boolean;
+  isReviewing?: boolean;
   isTranscribing: boolean;
+  isPlayingPreview?: boolean;
+  previewCurrentTime?: number;
+  previewDuration?: number;
   transcribeError: string | null;
   onPauseResume: () => void;
   onConvert: () => void;
   onRetry: () => void;
+  onPlayPreview?: () => void;
+  onSeekPreview?: (seconds: number) => void;
+  onConfirmTranscribe?: () => void;
+  onDiscard?: () => void;
 }
 
 function formatElapsed(ms: number): string {
@@ -66,18 +74,26 @@ function DeckIconButton({
 export function RecordingDeck({
   captureRef,
   isPaused,
+  isReviewing = false,
   isTranscribing,
+  isPlayingPreview = false,
+  previewCurrentTime = 0,
+  previewDuration = 0,
   transcribeError,
   onPauseResume,
   onConvert,
   onRetry,
+  onPlayPreview,
+  onSeekPreview,
+  onConfirmTranscribe,
+  onDiscard,
 }: RecordingDeckProps) {
   const { t } = useI18n();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const barsRef = useRef<number[]>([]);
   const [elapsed, setElapsed] = useState(0);
 
-  const captureActive = !isTranscribing && !transcribeError;
+  const captureActive = !isTranscribing && !transcribeError && !isReviewing;
 
   useEffect(() => {
     const compute = () => {
@@ -112,7 +128,7 @@ export function RecordingDeck({
     let lastW = 0;
 
     const style = getComputedStyle(canvas);
-    const barColor = (isPaused ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--status-error")).trim();
+    const barColor = (isPaused || isReviewing ? style.getPropertyValue("--text-muted") : style.getPropertyValue("--status-error")).trim();
 
     const data = new Uint8Array(256);
     let raf = 0;
@@ -147,20 +163,34 @@ export function RecordingDeck({
       while (bars.length > barCount) bars.shift();
 
       ctx.clearRect(0, 0, cssW, WAVE_HEIGHT);
-      ctx.fillStyle = barColor;
       const gap = 2;
       const barW = Math.max(1, (cssW - gap * (barCount - 1)) / barCount);
-      // Newest samples hug the buttons (right edge); history trails left.
       const visible = bars.slice(-barCount);
       const offset = cssW - visible.length * (barW + gap) + gap;
+
+      // Determine playback progress ratio if previewing or reviewing
+      const isPreviewActive = isReviewing || (isPaused && isPlayingPreview);
+      const activeDuration = previewDuration > 0 ? previewDuration : Math.max(1, elapsed / 1000);
+      const progressRatio = isPreviewActive ? Math.min(1, Math.max(0, previewCurrentTime / activeDuration)) : 0;
+      const progressCutoff = isPreviewActive ? offset + progressRatio * (cssW - offset) : -1;
+
+      const accentColor = style.getPropertyValue("--accent").trim() || "var(--accent)";
+
       for (let i = 0; i < visible.length; i++) {
         const h = Math.max(2, visible[i] * (WAVE_HEIGHT - 2));
-        ctx.fillRect(offset + i * (barW + gap), (WAVE_HEIGHT - h) / 2, barW, h);
+        const x = offset + i * (barW + gap);
+        ctx.fillStyle = isPreviewActive && x <= progressCutoff ? accentColor : barColor;
+        ctx.fillRect(x, (WAVE_HEIGHT - h) / 2, barW, h);
+      }
+
+      if (isPreviewActive && progressCutoff >= offset) {
+        ctx.fillStyle = accentColor;
+        ctx.fillRect(Math.min(cssW - 2, progressCutoff), 2, 2, WAVE_HEIGHT - 4);
       }
     };
     raf = requestAnimationFrame(draw);
     return () => cancelAnimationFrame(raf);
-  }, [captureRef, captureActive, isPaused]);
+  }, [captureRef, captureActive, isPaused, isReviewing, isPlayingPreview, previewCurrentTime, previewDuration]);
 
   return (
     <div
@@ -196,29 +226,78 @@ export function RecordingDeck({
       ) : (
         <>
           <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
-            <span
-              aria-hidden="true"
-              style={{ width: 8, height: 8, borderRadius: "50%", background: isPaused ? "var(--text-muted)" : "var(--status-error)", flexShrink: 0 }}
-            />
+            {isReviewing ? (
+              <DeckIconButton
+                onClick={onPlayPreview ?? (() => {})}
+                title={isPlayingPreview ? t("chatInput.pausePreview") : t("chatInput.playPreview")}
+                tone="accent"
+              >
+                {isPlayingPreview ? <Pause size={14} strokeWidth={1.8} aria-hidden="true" /> : <Play size={14} strokeWidth={1.8} aria-hidden="true" style={{ marginLeft: 1 }} />}
+              </DeckIconButton>
+            ) : isPaused ? (
+              <DeckIconButton
+                onClick={onPlayPreview ?? (() => {})}
+                title={isPlayingPreview ? t("chatInput.pausePreview") : t("chatInput.playPreview")}
+              >
+                {isPlayingPreview ? <Pause size={12} strokeWidth={2} aria-hidden="true" /> : <Play size={12} strokeWidth={2} aria-hidden="true" style={{ marginLeft: 1 }} />}
+              </DeckIconButton>
+            ) : (
+              <span
+                aria-hidden="true"
+                style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--status-error)", flexShrink: 0 }}
+              />
+            )}
             <span
               style={{
                 fontSize: 12,
                 fontVariantNumeric: "tabular-nums",
                 color: "var(--text)",
                 flexShrink: 0,
-                minWidth: 34,
+                minWidth: isReviewing ? 70 : 34,
               }}
             >
-              {formatElapsed(elapsed)}
+              {isReviewing
+                ? `${formatElapsed(previewCurrentTime * 1000)} / ${formatElapsed((previewDuration || elapsed / 1000) * 1000)}`
+                : isPlayingPreview
+                ? `${formatElapsed(previewCurrentTime * 1000)} / ${formatElapsed(elapsed)}`
+                : formatElapsed(elapsed)}
             </span>
-            <canvas ref={canvasRef} style={{ flex: 1, minWidth: 0, height: WAVE_HEIGHT, alignSelf: "center" }} aria-hidden="true" />
-            <div style={{ display: "flex", alignItems: "center", gap: 2, marginLeft: "auto", flexShrink: 0 }}>
-              <DeckIconButton onClick={onPauseResume} title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}>
-                {isPaused ? <Play size={14} strokeWidth={1.8} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}
-              </DeckIconButton>
-              <DeckIconButton onClick={onConvert} title={t("chatInput.convertDictation")}>
-                <Square size={11} strokeWidth={2} aria-hidden="true" />
-              </DeckIconButton>
+            <canvas
+              ref={canvasRef}
+              style={{ flex: 1, minWidth: 0, height: WAVE_HEIGHT, alignSelf: "center", cursor: isReviewing || isPaused ? "pointer" : "default" }}
+              aria-hidden="true"
+              onClick={(e) => {
+                if (!isReviewing && !isPaused) return;
+                const rect = e.currentTarget.getBoundingClientRect();
+                const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+                const totalSec = previewDuration > 0 ? previewDuration : elapsed / 1000;
+                onSeekPreview?.(ratio * totalSec);
+              }}
+            />
+            <div style={{ display: "flex", alignItems: "center", gap: 4, marginLeft: "auto", flexShrink: 0 }}>
+              {isReviewing ? (
+                <>
+                  <DeckIconButton onClick={onDiscard ?? onConvert} title={t("chatInput.discardDictation")} tone="danger">
+                    <Trash2 size={14} strokeWidth={1.8} aria-hidden="true" />
+                  </DeckIconButton>
+                  <DeckIconButton onClick={onConfirmTranscribe ?? onConvert} title={t("chatInput.transcribeDictation")} tone="accent">
+                    <ArrowUp size={14} strokeWidth={2} aria-hidden="true" />
+                  </DeckIconButton>
+                </>
+              ) : (
+                <>
+                  <DeckIconButton
+                    onClick={onPauseResume}
+                    title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}
+                    tone={isPaused ? "accent" : undefined}
+                  >
+                    {isPaused ? <Pause size={14} strokeWidth={2} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}
+                  </DeckIconButton>
+                  <DeckIconButton onClick={onConvert} title={t("chatInput.stopDictation")}>
+                    <Square size={11} strokeWidth={2} aria-hidden="true" />
+                  </DeckIconButton>
+                </>
+              )}
             </div>
           </div>
           <div
@@ -231,8 +310,8 @@ export function RecordingDeck({
             <div
               style={{
                 height: "100%",
-                width: `${Math.min(100, (elapsed / MAX_RECORDING_MS) * 100)}%`,
-                background: "var(--status-error)",
+                width: isReviewing ? "100%" : `${Math.min(100, (elapsed / MAX_RECORDING_MS) * 100)}%`,
+                background: isReviewing ? "var(--accent)" : isPaused ? "var(--text-muted)" : "var(--status-error)",
                 transition: "width 0.1s linear",
               }}
             />
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index 43ccc297..8d1e051a 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -71,7 +71,7 @@ test("ChatInput replaces the composer with the deck and routes dictation keys at
   const source = await readFile(new URL("../components/ChatInput.tsx", import.meta.url), "utf8");
 
   // The deck covers every dictation state (recording, paused, transcribing, error)
-  assert.match(source, /isRecording \|\| isPaused \|\| isTranscribing \|\| transcribeError \? \(/);
+  assert.match(source, /isRecording \|\| isPaused \|\| (?:isReviewing \|\| )?isTranscribing \|\| transcribeError \? \(/);
 
   // Window-level listener because the textarea is unmounted while the deck shows
   assert.match(source, /window\.addEventListener\("keydown", onKeyDown\)/);
@@ -92,3 +92,33 @@ test("ChatInput supports transcribe-only and transcribe-and-send endings", async
   // handleSend accepts the composed dictation text override
   assert.match(source, /async \(overrideText\?: string\) =>/);
 });
+
+test("useDictation supports playback preview while paused and review mode upon stop", async () => {
+  const source = await readFile(new URL("./useDictation.ts", import.meta.url), "utf8");
+
+  // Request data on pause to accumulate chunks for preview
+  assert.match(source, /recorder\.requestData\(\)/);
+
+  // Exposes preview playback and review states
+  assert.match(source, /isReviewing/);
+  assert.match(source, /isPlayingPreview/);
+  assert.match(source, /playPreview/);
+  assert.match(source, /pausePreview/);
+  assert.match(source, /seekPreview/);
+  assert.match(source, /confirmTranscribe/);
+
+  // Stopping capture transitions to review state instead of immediately transcribing
+  assert.match(source, /setIsReviewing\(true\)/);
+});
+
+test("RecordingDeck renders left preview play button when paused and in review mode", async () => {
+  const deckSource = await readFile(new URL("../components/RecordingDeck.tsx", import.meta.url), "utf8");
+
+  // Left play preview button when paused or in review mode
+  assert.match(deckSource, /onPlayPreview/);
+  assert.match(deckSource, /isPlayingPreview/);
+
+  // Review mode renders discard and confirm buttons
+  assert.match(deckSource, /isReviewing/);
+  assert.match(deckSource, /onConfirmTranscribe/);
+});
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index bb9ef45d..ef82bbfc 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -33,6 +33,10 @@ function normalizeErrorMessage(error: unknown, fallback: string): string {
 export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
+  const [isReviewing, setIsReviewing] = useState(false);
+  const [isPlayingPreview, setIsPlayingPreview] = useState(false);
+  const [previewCurrentTime, setPreviewCurrentTime] = useState(0);
+  const [previewDuration, setPreviewDuration] = useState(0);
   const [isTranscribing, setIsTranscribing] = useState(false);
   const [transcribeError, setTranscribeError] = useState<string | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
@@ -43,10 +47,31 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   const maxTimeoutRef = useRef<number | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
   const captureRef = useRef<DictationCapture>({ analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null });
+  const previewAudioRef = useRef<HTMLAudioElement | null>(null);
+  const previewUrlRef = useRef<string | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const immediateSendRef = useRef(false);
   // Audio kept after a failed/timed-out transcription so the user can retry
   // instead of losing the recording.
   const pendingAudioRef = useRef<{ blob: Blob; ext: string } | null>(null);
 
+  const teardownPreview = useCallback(() => {
+    if (previewAudioRef.current) {
+      try {
+        previewAudioRef.current.pause();
+        previewAudioRef.current.src = "";
+      } catch {}
+      previewAudioRef.current = null;
+    }
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    setIsPlayingPreview(false);
+    setPreviewCurrentTime(0);
+    setPreviewDuration(0);
+  }, []);
+
   const clearMaxTimeout = useCallback(() => {
     if (maxTimeoutRef.current !== null) {
       window.clearTimeout(maxTimeoutRef.current);
@@ -71,9 +96,11 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       audioContextRef.current = null;
     }
     captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null };
+    teardownPreview();
     setIsRecording(false);
     setIsPaused(false);
-  }, [clearMaxTimeout]);
+    setIsReviewing(false);
+  }, [clearMaxTimeout, teardownPreview]);
 
   useEffect(() => {
     return () => {
@@ -83,9 +110,10 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         abortControllerRef.current = null;
       }
       pendingAudioRef.current = null;
+      teardownPreview();
       cleanup();
     };
-  }, [cleanup]);
+  }, [cleanup, teardownPreview]);
 
   const runTranscription = useCallback(async (blob: Blob, ext: string) => {
     setIsTranscribing(true);
@@ -149,8 +177,85 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   // cap timeout captures this callback from the render that started the
   // recording. Sets isTranscribing eagerly so the deck never flashes back to
   // the text composer between recorder.stop() and the async onstop event.
-  const finishCapture = useCallback(() => {
+  const getCapturedBlob = useCallback(() => {
+    if (pendingAudioRef.current) return pendingAudioRef.current;
+    if (chunksRef.current.length === 0) return null;
+    const recorder = mediaRecorderRef.current;
+    const mimeType = recorder?.mimeType || "audio/webm";
+    const blob = new Blob(chunksRef.current, { type: mimeType });
+    const ext = mimeType.includes("mp4") ? "audio.mp4" : mimeType.includes("ogg") ? "audio.ogg" : "audio.webm";
+    return { blob, ext };
+  }, []);
+
+  const setupPreviewAudio = useCallback((blob: Blob) => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current);
+      previewUrlRef.current = null;
+    }
+    try {
+      const url = URL.createObjectURL(blob);
+      previewUrlRef.current = url;
+      const audio = new Audio(url);
+      previewAudioRef.current = audio;
+      audio.ontimeupdate = () => {
+        setPreviewCurrentTime(audio.currentTime);
+      };
+      audio.onloadedmetadata = () => {
+        if (Number.isFinite(audio.duration)) {
+          setPreviewDuration(audio.duration);
+        }
+      };
+      audio.onended = () => {
+        setIsPlayingPreview(false);
+        setPreviewCurrentTime(0);
+      };
+      audio.onpause = () => {
+        setIsPlayingPreview(false);
+      };
+      audio.onplay = () => {
+        setIsPlayingPreview(true);
+      };
+      return audio;
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const playPreview = useCallback(() => {
+    let audio = previewAudioRef.current;
+    if (!audio) {
+      const captured = getCapturedBlob();
+      if (!captured) return;
+      audio = setupPreviewAudio(captured.blob);
+    }
+    if (audio) {
+      audio.play().catch(() => {
+        setIsPlayingPreview(false);
+      });
+    }
+  }, [getCapturedBlob, setupPreviewAudio]);
+
+  const pausePreview = useCallback(() => {
+    if (previewAudioRef.current) {
+      previewAudioRef.current.pause();
+    }
+    setIsPlayingPreview(false);
+  }, []);
+
+  const seekPreview = useCallback((seconds: number) => {
+    if (previewAudioRef.current) {
+      previewAudioRef.current.currentTime = Math.max(0, seconds);
+      setPreviewCurrentTime(Math.max(0, seconds));
+    }
+  }, []);
+
+  // Ends capture and moves the session into transcription or review. Gates on the live
+  // MediaRecorder state (not the isRecording closure) because the 5-minute
+  // cap timeout captures this callback from the render that started the
+  // recording.
+  const finishCapture = useCallback((options?: { immediateSend?: boolean }) => {
     clearMaxTimeout();
+    immediateSendRef.current = options?.immediateSend ?? false;
     const recorder = mediaRecorderRef.current;
     if (!recorder || recorder.state === "inactive") return;
     try {
@@ -167,7 +272,11 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     captureRef.current.analyser = null;
     setIsRecording(false);
     setIsPaused(false);
-    setIsTranscribing(true);
+    if (options?.immediateSend) {
+      setIsTranscribing(true);
+    } else {
+      setIsReviewing(true);
+    }
   }, [clearMaxTimeout]);
 
   const start = useCallback(async () => {
@@ -179,9 +288,13 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       abortControllerRef.current = null;
     }
     cancelledRef.current = false;
+    chunksRef.current = [];
+    immediateSendRef.current = false;
     pendingAudioRef.current = null;
+    teardownPreview();
     setTranscribeError(null);
     setIsTranscribing(false);
+    setIsReviewing(false);
     if (
       typeof navigator?.mediaDevices?.getUserMedia !== "function" ||
       typeof window === "undefined" ||
@@ -216,27 +329,33 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
 
       const recorder = new MediaRecorder(stream);
       mediaRecorderRef.current = recorder;
-      const chunks: Blob[] = [];
+      chunksRef.current = [];
 
       recorder.ondataavailable = (event) => {
-        if (event.data.size > 0) chunks.push(event.data);
+        if (event.data.size > 0) chunksRef.current.push(event.data);
       };
 
       recorder.onstop = () => {
         if (cancelledRef.current) return;
         clearMaxTimeout();
-        if (chunks.length === 0) {
+        if (chunksRef.current.length === 0) {
           const message = "No speech detected";
           setTranscribeError(message);
           setIsTranscribing(false);
+          setIsReviewing(false);
           onError?.(message);
           return;
         }
         const mimeType = recorder.mimeType || "audio/webm";
-        const blob = new Blob(chunks, { type: mimeType });
+        const blob = new Blob(chunksRef.current, { type: mimeType });
         const ext = mimeType.includes("mp4") ? "audio.mp4" : mimeType.includes("ogg") ? "audio.ogg" : "audio.webm";
         pendingAudioRef.current = { blob, ext };
-        void runTranscription(blob, ext);
+        if (immediateSendRef.current) {
+          void runTranscription(blob, ext);
+        } else {
+          setIsReviewing(true);
+          setupPreviewAudio(blob);
+        }
       };
 
       recorder.start();
@@ -256,10 +375,19 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     const recorder = mediaRecorderRef.current;
     if (!recorder || isTranscribing || transcribeError) return;
     if (recorder.state === "recording") {
+      try {
+        recorder.requestData();
+      } catch {}
       recorder.pause();
       captureRef.current.pausedAt = performance.now();
       setIsPaused(true);
+      setTimeout(() => {
+        const captured = getCapturedBlob();
+        if (captured) setupPreviewAudio(captured.blob);
+      }, 0);
     } else if (recorder.state === "paused") {
+      pausePreview();
+      teardownPreview();
       recorder.resume();
       const { pausedAt, pausedAccum } = captureRef.current;
       if (pausedAt !== null) {
@@ -268,7 +396,16 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       captureRef.current.pausedAt = null;
       setIsPaused(false);
     }
-  }, [isTranscribing, transcribeError]);
+  }, [isTranscribing, transcribeError, getCapturedBlob, setupPreviewAudio, pausePreview, teardownPreview]);
+
+  const confirmTranscribe = useCallback(() => {
+    const pending = pendingAudioRef.current || getCapturedBlob();
+    if (!pending || isTranscribing) return;
+    pausePreview();
+    setIsReviewing(false);
+    setTranscribeError(null);
+    void runTranscription(pending.blob, pending.ext);
+  }, [getCapturedBlob, isTranscribing, pausePreview, runTranscription]);
 
   const cancel = useCallback(() => {
     cancelledRef.current = true;
@@ -279,8 +416,10 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     pendingAudioRef.current = null;
     setTranscribeError(null);
     setIsTranscribing(false);
+    setIsReviewing(false);
+    teardownPreview();
     cleanup();
-  }, [cleanup]);
+  }, [cleanup, teardownPreview]);
 
   const retry = useCallback(() => {
     const pending = pendingAudioRef.current;
@@ -297,7 +436,11 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   return {
     isRecording,
     isPaused,
+    isReviewing,
     isTranscribing,
+    isPlayingPreview,
+    previewCurrentTime,
+    previewDuration,
     transcribeError,
     captureRef,
     start,
@@ -306,5 +449,9 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     toggle,
     togglePause,
     retry,
+    playPreview,
+    pausePreview,
+    seekPreview,
+    confirmTranscribe,
   };
 }
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index dd4ab113..229ede41 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -275,6 +275,10 @@
   "chatInput.retryDictation": "Retry transcription",
   "chatInput.cancelDictation": "Cancel and discard",
   "chatInput.discardDictation": "Discard recording",
+  "chatInput.playPreview": "Play preview",
+  "chatInput.pausePreview": "Pause preview",
+  "chatInput.stopDictation": "Stop recording",
+  "chatInput.transcribeDictation": "Transcribe and send",
   "chatInput.fastLabel": "Fast",
   "chatInput.queuedDelete": "Delete",
   "chatInput.queuedDeleteTitle": "Remove this queued message",
diff --git a/lib/i18n/locales/ja.json b/lib/i18n/locales/ja.json
index ec886cd8..64ab2424 100644
--- a/lib/i18n/locales/ja.json
+++ b/lib/i18n/locales/ja.json
@@ -262,6 +262,10 @@
   "chatInput.retryDictation": "文字起こしを再試行",
   "chatInput.cancelDictation": "キャンセルして破棄",
   "chatInput.discardDictation": "録音を破棄",
+  "chatInput.playPreview": "プレビューを再生",
+  "chatInput.pausePreview": "プレビューを一時停止",
+  "chatInput.stopDictation": "録音を停止",
+  "chatInput.transcribeDictation": "文字起こしして送信",
   "chatInput.fastLabel": "高速",
   "chatInput.queuedDelete": "削除",
   "chatInput.queuedDeleteTitle": "このキューされたメッセージを削除",
diff --git a/lib/i18n/locales/zh-CN.json b/lib/i18n/locales/zh-CN.json
index c42d19f5..fdef0f1a 100644
--- a/lib/i18n/locales/zh-CN.json
+++ b/lib/i18n/locales/zh-CN.json
@@ -262,6 +262,10 @@
   "chatInput.retryDictation": "重试转写",
   "chatInput.cancelDictation": "取消并丢弃",
   "chatInput.discardDictation": "丢弃录音",
+  "chatInput.playPreview": "播放预览",
+  "chatInput.pausePreview": "暂停预览",
+  "chatInput.stopDictation": "停止录音",
+  "chatInput.transcribeDictation": "转写并发送",
   "chatInput.fastLabel": "快速",
   "chatInput.queuedDelete": "删除",
   "chatInput.queuedDeleteTitle": "移除这条已排队消息",

From 3ba77da51a5c86fd6508b7e2a32a97b491448e62 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Thu, 17 Sep 2026 19:14:47 +0000
Subject: [PATCH 08/14] feat(dictation): fix audio playback lifecycle,
 timeslice, and replay reset

---
 hooks/useDictation.ts | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index ef82bbfc..a7f5c900 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -19,6 +19,7 @@ export interface DictationCapture {
   startedAt: number;
   pausedAccum: number;
   pausedAt: number | null;
+  finalDurationMs?: number | null;
 }
 
 function normalizeErrorMessage(error: unknown, fallback: string): string {
@@ -46,7 +47,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   const isStartingRef = useRef(false);
   const maxTimeoutRef = useRef<number | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
-  const captureRef = useRef<DictationCapture>({ analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null });
+  const captureRef = useRef<DictationCapture>({ analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null, finalDurationMs: null });
   const previewAudioRef = useRef<HTMLAudioElement | null>(null);
   const previewUrlRef = useRef<string | null>(null);
   const chunksRef = useRef<Blob[]>([]);
@@ -68,7 +69,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       previewUrlRef.current = null;
     }
     setIsPlayingPreview(false);
-    setPreviewCurrentTime(0);
+    captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null, finalDurationMs: null };
     setPreviewDuration(0);
   }, []);
 
@@ -196,6 +197,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       const url = URL.createObjectURL(blob);
       previewUrlRef.current = url;
       const audio = new Audio(url);
+      audio.preload = "auto";
       previewAudioRef.current = audio;
       audio.ontimeupdate = () => {
         setPreviewCurrentTime(audio.currentTime);
@@ -215,6 +217,9 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       audio.onplay = () => {
         setIsPlayingPreview(true);
       };
+      audio.onerror = () => {
+        setIsPlayingPreview(false);
+      };
       return audio;
     } catch {
       return null;
@@ -229,6 +234,9 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       audio = setupPreviewAudio(captured.blob);
     }
     if (audio) {
+      if (audio.ended || (Number.isFinite(audio.duration) && audio.currentTime >= audio.duration)) {
+        audio.currentTime = 0;
+      }
       audio.play().catch(() => {
         setIsPlayingPreview(false);
       });
@@ -258,13 +266,15 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     immediateSendRef.current = options?.immediateSend ?? false;
     const recorder = mediaRecorderRef.current;
     if (!recorder || recorder.state === "inactive") return;
+    const capture = captureRef.current;
+    const finalMs = Math.max(
+      0,
+      performance.now() - capture.startedAt - (capture.pausedAccum + (capture.pausedAt !== null ? performance.now() - capture.pausedAt : 0)),
+    );
+    capture.finalDurationMs = finalMs;
     try {
       recorder.stop();
     } catch {}
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-      streamRef.current = null;
-    }
     if (audioContextRef.current) {
       void audioContextRef.current.close().catch(() => {});
       audioContextRef.current = null;
@@ -336,6 +346,10 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       };
 
       recorder.onstop = () => {
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach((track) => track.stop());
+          streamRef.current = null;
+        }
         if (cancelledRef.current) return;
         clearMaxTimeout();
         if (chunksRef.current.length === 0) {
@@ -358,8 +372,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         }
       };
 
-      recorder.start();
-      setIsRecording(true);
+      recorder.start(100);
       maxTimeoutRef.current = window.setTimeout(() => {
         finishCapture();
       }, MAX_RECORDING_MS);

From 48c68f1aea286a3a1ec55dbb325fe59ed59d6845 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Thu, 17 Sep 2026 23:07:06 +0000
Subject: [PATCH 09/14] fix(dictation): address review findings (timer
 corruption, audio leak, icon, test honesty)

---
 components/RecordingDeck.tsx | 24 +++++++++--
 hooks/useDictation.test.mjs  | 78 ++++++++++++++++++++++++++++++++++++
 hooks/useDictation.ts        | 55 ++++++++++++++++---------
 lib/i18n/locales/en.json     |  1 -
 lib/i18n/locales/ja.json     |  1 -
 lib/i18n/locales/zh-CN.json  |  1 -
 6 files changed, 136 insertions(+), 24 deletions(-)

diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index e3544195..244830ed 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -98,6 +98,10 @@ export function RecordingDeck({
   useEffect(() => {
     const compute = () => {
       const capture = captureRef.current;
+      if (isReviewing && capture?.finalDurationMs != null) {
+        setElapsed(capture.finalDurationMs);
+        return;
+      }
       setElapsed(
         capture
           ? Math.min(
@@ -116,7 +120,7 @@ export function RecordingDeck({
     compute();
     const id = window.setInterval(compute, 100);
     return () => window.clearInterval(id);
-  }, [captureRef]);
+  }, [captureRef, isReviewing]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -195,7 +199,17 @@ export function RecordingDeck({
   return (
     <div
       role="status"
-      aria-label={isTranscribing ? t("chatInput.transcribing") : transcribeError ? transcribeError : t("chatInput.dictationRecording")}
+      aria-label={
+        isTranscribing
+          ? t("chatInput.transcribing")
+          : transcribeError
+          ? transcribeError
+          : isReviewing
+          ? t("chatInput.discardDictation")
+          : isPaused
+          ? t("chatInput.resumeDictation")
+          : t("chatInput.dictationRecording")
+      }
       style={{
         display: "flex",
         flexDirection: "column",
@@ -291,7 +305,11 @@ export function RecordingDeck({
                     title={isPaused ? t("chatInput.resumeDictation") : t("chatInput.pauseDictation")}
                     tone={isPaused ? "accent" : undefined}
                   >
-                    {isPaused ? <Pause size={14} strokeWidth={2} aria-hidden="true" /> : <Pause size={14} strokeWidth={1.8} aria-hidden="true" />}
+                    {isPaused ? (
+                      <Play size={14} strokeWidth={2} aria-hidden="true" style={{ marginLeft: 1 }} />
+                    ) : (
+                      <Pause size={14} strokeWidth={1.8} aria-hidden="true" />
+                    )}
                   </DeckIconButton>
                   <DeckIconButton onClick={onConvert} title={t("chatInput.stopDictation")}>
                     <Square size={11} strokeWidth={2} aria-hidden="true" />
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index 8d1e051a..fbf2249d 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -122,3 +122,81 @@ test("RecordingDeck renders left preview play button when paused and in review m
   assert.match(deckSource, /isReviewing/);
   assert.match(deckSource, /onConfirmTranscribe/);
 });
+
+test("behavioral: pause and resume accounting retains startedAt, accumulates paused time, and preserves analyser", () => {
+  const fakeAnalyser = { getByteFrequencyData: () => {} };
+  const capture = {
+    analyser: fakeAnalyser,
+    startedAt: 1000,
+    pausedAccum: 0,
+    pausedAt: null,
+    finalDurationMs: null,
+  };
+
+  // Simulate pause at t=4000ms
+  capture.pausedAt = 4000;
+  assert.equal(capture.pausedAt, 4000);
+  assert.equal(capture.analyser, fakeAnalyser);
+
+  // Simulate teardownPreviewAudio does NOT touch captureRef
+  let previewRevoked = false;
+  const teardownPreviewAudio = () => {
+    previewRevoked = true;
+  };
+  teardownPreviewAudio();
+  assert.equal(previewRevoked, true);
+  assert.equal(capture.startedAt, 1000); // startedAt NOT wiped
+  assert.equal(capture.analyser, fakeAnalyser); // analyser NOT nulled
+
+  // Simulate resume at t=9000ms (5000ms pause)
+  const resumeTime = 9000;
+  const { pausedAt, pausedAccum } = capture;
+  assert.notEqual(pausedAt, null);
+  if (pausedAt !== null) {
+    capture.pausedAccum = pausedAccum + (resumeTime - pausedAt);
+  }
+  capture.pausedAt = null;
+
+  assert.equal(capture.pausedAccum, 5000);
+  assert.equal(capture.pausedAt, null);
+  assert.equal(capture.startedAt, 1000);
+  assert.equal(capture.analyser, fakeAnalyser);
+
+  // At t=10000ms, active elapsed time must be 10000 - 1000 - 5000 = 4000ms
+  const now = 10000;
+  const elapsed = now - capture.startedAt - capture.pausedAccum - (capture.pausedAt !== null ? now - capture.pausedAt : 0);
+  assert.equal(elapsed, 4000);
+});
+
+test("behavioral: teardownPreviewAudio revokes object URL and pauses audio element", () => {
+  let revokedUrl = null;
+  let paused = false;
+
+  const fakeAudio = {
+    pause: () => { paused = true; },
+    src: "blob:http://localhost/test",
+  };
+  const fakeUrl = "blob:http://localhost/test";
+  const fakeUrlApi = {
+    revokeObjectURL: (url) => { revokedUrl = url; },
+  };
+
+  // Simulated teardownPreviewAudio
+  const teardown = () => {
+    fakeAudio.pause();
+    fakeAudio.src = "";
+    fakeUrlApi.revokeObjectURL(fakeUrl);
+  };
+
+  teardown();
+  assert.equal(paused, true);
+  assert.equal(fakeAudio.src, "");
+  assert.equal(revokedUrl, fakeUrl);
+});
+
+test("behavioral: RecordingDeck pause button renders Play when paused and Pause when active", async () => {
+  const deckSource = await readFile(new URL("../components/RecordingDeck.tsx", import.meta.url), "utf8");
+
+  // Assert that isPaused renders Play icon, not Pause in both branches
+  assert.match(deckSource, /isPaused \?\s*\(\s*<Play/);
+});
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index a7f5c900..ea9d8a3f 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -46,6 +46,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   const cancelledRef = useRef(false);
   const isStartingRef = useRef(false);
   const maxTimeoutRef = useRef<number | null>(null);
+  const pausePreviewTimeoutRef = useRef<number | null>(null);
   const audioContextRef = useRef<AudioContext | null>(null);
   const captureRef = useRef<DictationCapture>({ analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null, finalDurationMs: null });
   const previewAudioRef = useRef<HTMLAudioElement | null>(null);
@@ -56,7 +57,11 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   // instead of losing the recording.
   const pendingAudioRef = useRef<{ blob: Blob; ext: string } | null>(null);
 
-  const teardownPreview = useCallback(() => {
+  const teardownPreviewAudio = useCallback(() => {
+    if (pausePreviewTimeoutRef.current !== null) {
+      window.clearTimeout(pausePreviewTimeoutRef.current);
+      pausePreviewTimeoutRef.current = null;
+    }
     if (previewAudioRef.current) {
       try {
         previewAudioRef.current.pause();
@@ -69,10 +74,13 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       previewUrlRef.current = null;
     }
     setIsPlayingPreview(false);
-    captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null, finalDurationMs: null };
+    setPreviewCurrentTime(0);
     setPreviewDuration(0);
   }, []);
 
+  const resetCaptureState = useCallback(() => {
+    captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null, finalDurationMs: null };
+  }, []);
   const clearMaxTimeout = useCallback(() => {
     if (maxTimeoutRef.current !== null) {
       window.clearTimeout(maxTimeoutRef.current);
@@ -96,12 +104,13 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       void audioContextRef.current.close().catch(() => {});
       audioContextRef.current = null;
     }
-    captureRef.current = { analyser: null, startedAt: 0, pausedAccum: 0, pausedAt: null };
-    teardownPreview();
+    teardownPreviewAudio();
+    resetCaptureState();
     setIsRecording(false);
     setIsPaused(false);
     setIsReviewing(false);
-  }, [clearMaxTimeout, teardownPreview]);
+    setIsTranscribing(false);
+  }, [clearMaxTimeout, teardownPreviewAudio, resetCaptureState]);
 
   useEffect(() => {
     return () => {
@@ -111,10 +120,10 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
         abortControllerRef.current = null;
       }
       pendingAudioRef.current = null;
-      teardownPreview();
+      teardownPreviewAudio();
       cleanup();
     };
-  }, [cleanup, teardownPreview]);
+  }, [cleanup, teardownPreviewAudio]);
 
   const runTranscription = useCallback(async (blob: Blob, ext: string) => {
     setIsTranscribing(true);
@@ -301,7 +310,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     chunksRef.current = [];
     immediateSendRef.current = false;
     pendingAudioRef.current = null;
-    teardownPreview();
+    teardownPreviewAudio();
     setTranscribeError(null);
     setIsTranscribing(false);
     setIsReviewing(false);
@@ -394,32 +403,40 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       recorder.pause();
       captureRef.current.pausedAt = performance.now();
       setIsPaused(true);
-      setTimeout(() => {
+      if (pausePreviewTimeoutRef.current !== null) {
+        window.clearTimeout(pausePreviewTimeoutRef.current);
+      }
+      pausePreviewTimeoutRef.current = window.setTimeout(() => {
+        pausePreviewTimeoutRef.current = null;
         const captured = getCapturedBlob();
         if (captured) setupPreviewAudio(captured.blob);
       }, 0);
     } else if (recorder.state === "paused") {
+      if (pausePreviewTimeoutRef.current !== null) {
+        window.clearTimeout(pausePreviewTimeoutRef.current);
+        pausePreviewTimeoutRef.current = null;
+      }
       pausePreview();
-      teardownPreview();
-      recorder.resume();
+      teardownPreviewAudio();
       const { pausedAt, pausedAccum } = captureRef.current;
       if (pausedAt !== null) {
         captureRef.current.pausedAccum = pausedAccum + (performance.now() - pausedAt);
       }
       captureRef.current.pausedAt = null;
+      recorder.resume();
       setIsPaused(false);
     }
-  }, [isTranscribing, transcribeError, getCapturedBlob, setupPreviewAudio, pausePreview, teardownPreview]);
+  }, [isTranscribing, transcribeError, getCapturedBlob, setupPreviewAudio, pausePreview, teardownPreviewAudio]);
 
   const confirmTranscribe = useCallback(() => {
     const pending = pendingAudioRef.current || getCapturedBlob();
     if (!pending || isTranscribing) return;
     pausePreview();
+    teardownPreviewAudio();
     setIsReviewing(false);
     setTranscribeError(null);
     void runTranscription(pending.blob, pending.ext);
-  }, [getCapturedBlob, isTranscribing, pausePreview, runTranscription]);
-
+  }, [getCapturedBlob, isTranscribing, pausePreview, teardownPreviewAudio, runTranscription]);
   const cancel = useCallback(() => {
     cancelledRef.current = true;
     if (abortControllerRef.current) {
@@ -430,17 +447,19 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     setTranscribeError(null);
     setIsTranscribing(false);
     setIsReviewing(false);
-    teardownPreview();
+    teardownPreviewAudio();
+    resetCaptureState();
     cleanup();
-  }, [cleanup, teardownPreview]);
+  }, [cleanup, teardownPreviewAudio, resetCaptureState]);
 
   const retry = useCallback(() => {
     const pending = pendingAudioRef.current;
     if (!pending || isTranscribing) return;
+    pausePreview();
+    teardownPreviewAudio();
     setTranscribeError(null);
     void runTranscription(pending.blob, pending.ext);
-  }, [isTranscribing, runTranscription]);
-
+  }, [isTranscribing, pausePreview, teardownPreviewAudio, runTranscription]);
   const toggle = useCallback(() => {
     if (isRecording) finishCapture();
     else void start();
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index 229ede41..9f26b789 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -270,7 +270,6 @@
   "chatInput.dictationRecording": "Recording",
   "chatInput.pauseDictation": "Pause recording",
   "chatInput.resumeDictation": "Resume recording",
-  "chatInput.convertDictation": "Transcribe to text",
   "chatInput.sendDictation": "Transcribe and send",
   "chatInput.retryDictation": "Retry transcription",
   "chatInput.cancelDictation": "Cancel and discard",
diff --git a/lib/i18n/locales/ja.json b/lib/i18n/locales/ja.json
index 64ab2424..85cd3061 100644
--- a/lib/i18n/locales/ja.json
+++ b/lib/i18n/locales/ja.json
@@ -257,7 +257,6 @@
   "chatInput.dictationRecording": "録音中",
   "chatInput.pauseDictation": "録音を一時停止",
   "chatInput.resumeDictation": "録音を再開",
-  "chatInput.convertDictation": "テキストに変換",
   "chatInput.sendDictation": "文字起こしして送信",
   "chatInput.retryDictation": "文字起こしを再試行",
   "chatInput.cancelDictation": "キャンセルして破棄",
diff --git a/lib/i18n/locales/zh-CN.json b/lib/i18n/locales/zh-CN.json
index fdef0f1a..391f8027 100644
--- a/lib/i18n/locales/zh-CN.json
+++ b/lib/i18n/locales/zh-CN.json
@@ -257,7 +257,6 @@
   "chatInput.dictationRecording": "录音中",
   "chatInput.pauseDictation": "暂停录音",
   "chatInput.resumeDictation": "恢复录音",
-  "chatInput.convertDictation": "转写为文字",
   "chatInput.sendDictation": "转写并发送",
   "chatInput.retryDictation": "重试转写",
   "chatInput.cancelDictation": "取消并丢弃",

From e0a12338149bca994779c1de31589c12e20d3d6d Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Fri, 18 Sep 2026 12:12:10 +0000
Subject: [PATCH 10/14] fix(dictation): restore setIsRecording(true) on capture
 start and add behavioral test suite

---
 hooks/useDictation.behavior.test.mjs | 274 +++++++++++++++++++++++++++
 hooks/useDictation.test.mjs          |  78 --------
 hooks/useDictation.ts                |   1 +
 3 files changed, 275 insertions(+), 78 deletions(-)
 create mode 100644 hooks/useDictation.behavior.test.mjs

diff --git a/hooks/useDictation.behavior.test.mjs b/hooks/useDictation.behavior.test.mjs
new file mode 100644
index 00000000..0edaf6e3
--- /dev/null
+++ b/hooks/useDictation.behavior.test.mjs
@@ -0,0 +1,274 @@
+import "../tests/setup-dom.mjs";
+import assert from "node:assert/strict";
+import test, { afterEach, beforeEach } from "node:test";
+import { fileURLToPath } from "node:url";
+import { createJiti } from "jiti";
+import { act, cleanup, renderHook } from "@testing-library/react/pure.js";
+
+// These tests execute the dictation state machine against fake
+// getUserMedia/MediaRecorder/AudioContext implementations. They assert the
+// observable hook state a consumer renders from (isRecording/isPaused/
+// isReviewing, live analyser, active-time accounting, blob-URL lifetime) —
+// the states the composer and RecordingDeck actually read.
+
+const jiti = createJiti(import.meta.url, {
+  tryNative: false,
+  alias: { "@/": fileURLToPath(new URL("../", import.meta.url)) },
+});
+const { useDictation } = await jiti.import("../hooks/useDictation.ts");
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+async function settle(ms = 20) {
+  await act(async () => {
+    await sleep(ms);
+  });
+}
+
+let world;
+
+class FakeTrack {
+  constructor() {
+    this.stopped = false;
+  }
+  stop() {
+    this.stopped = true;
+  }
+}
+
+class FakeMediaRecorder {
+  constructor(stream) {
+    this.stream = stream;
+    this.state = "inactive";
+    this.mimeType = "audio/webm";
+    this.timeslice = null;
+    this.ondataavailable = null;
+    this.onstop = null;
+    world.recorders.push(this);
+  }
+  start(timeslice) {
+    this.state = "recording";
+    this.timeslice = timeslice ?? null;
+  }
+  requestData() {
+    this.ondataavailable?.({ data: new Blob(["chunk"], { type: this.mimeType }) });
+  }
+  pause() {
+    this.state = "paused";
+  }
+  resume() {
+    this.state = "recording";
+  }
+  stop() {
+    this.state = "inactive";
+    this.ondataavailable?.({ data: new Blob(["chunk"], { type: this.mimeType }) });
+    this.onstop?.();
+  }
+}
+
+class FakeAudioContext {
+  constructor() {
+    this.state = "running";
+    this.closed = false;
+  }
+  createMediaStreamSource() {
+    return { connect: () => {} };
+  }
+  createAnalyser() {
+    return {
+      fftSize: 2048,
+      frequencyBinCount: 128,
+      getByteFrequencyData: () => {},
+      connect: () => {},
+    };
+  }
+  resume() {
+    return Promise.resolve();
+  }
+  close() {
+    this.closed = true;
+    return Promise.resolve();
+  }
+}
+
+class FakePreviewAudio {
+  constructor(src) {
+    this.src = src;
+    this.currentTime = 0;
+    this.duration = 1;
+    this.ended = false;
+    this.paused = true;
+  }
+  play() {
+    this.paused = false;
+    this.onplay?.();
+    return Promise.resolve();
+  }
+  pause() {
+    this.paused = true;
+    this.onpause?.();
+  }
+}
+
+const overrides = [];
+function override(target, key, replacement) {
+  overrides.push({ target, key, original: Object.getOwnPropertyDescriptor(target, key) });
+  Object.defineProperty(target, key, { configurable: true, writable: true, value: replacement });
+}
+
+beforeEach(() => {
+  world = { recorders: [], createdUrls: [], revokedUrls: [], tracks: [] };
+  const track = new FakeTrack();
+  world.tracks.push(track);
+  override(navigator, "mediaDevices", {
+    getUserMedia: async () => ({ getTracks: () => [track] }),
+  });
+  override(window, "MediaRecorder", FakeMediaRecorder);
+  override(globalThis, "MediaRecorder", FakeMediaRecorder);
+  override(window, "AudioContext", FakeAudioContext);
+  override(globalThis, "AudioContext", FakeAudioContext);
+  override(window, "Audio", FakePreviewAudio);
+  override(globalThis, "Audio", FakePreviewAudio);
+  override(URL, "createObjectURL", (blob) => {
+    const url = `blob:fake/${world.createdUrls.length}`;
+    world.createdUrls.push({ url, blob });
+    return url;
+  });
+  override(URL, "revokeObjectURL", (url) => {
+    world.revokedUrls.push(url);
+  });
+  override(globalThis, "fetch", async () => ({
+    ok: true,
+    json: async () => ({ text: "transcribed words" }),
+  }));
+});
+
+afterEach(() => {
+  try {
+    cleanup();
+  } finally {
+    while (overrides.length) {
+      const { target, key, original } = overrides.pop();
+      if (original) Object.defineProperty(target, key, original);
+      else delete target[key];
+    }
+  }
+});
+
+function mountDictation() {
+  const transcripts = [];
+  const errors = [];
+  const view = renderHook(() =>
+    useDictation({
+      onTranscript: (text) => transcripts.push(text),
+      onError: (message) => errors.push(message),
+    }),
+  );
+  return { view, transcripts, errors };
+}
+
+test("starting capture puts the hook in the recording state with a live analyser", async () => {
+  const { view, errors } = mountDictation();
+
+  await act(async () => {
+    view.result.current.toggle();
+  });
+  await settle();
+
+  assert.equal(errors.length, 0, `unexpected dictation errors: ${errors.join(" | ")}`);
+  assert.equal(view.result.current.isRecording, true, "consumer must see isRecording after start");
+  assert.equal(view.result.current.isPaused, false);
+  assert.equal(view.result.current.isReviewing, false);
+  assert.equal(world.recorders.length, 1);
+  assert.equal(world.recorders[0].state, "recording");
+  assert.equal(world.recorders[0].timeslice, 100, "timeslice keeps chunks flowing for preview");
+  assert.notEqual(view.result.current.captureRef.current.analyser, null, "waveform needs a live analyser");
+  assert.ok(view.result.current.captureRef.current.startedAt > 0, "timer needs a start stamp");
+});
+
+test("pause then resume keeps the timer base and analyser while accumulating paused time", async () => {
+  const { view } = mountDictation();
+
+  await act(async () => {
+    view.result.current.toggle();
+  });
+  await settle();
+
+  const { startedAt, analyser } = view.result.current.captureRef.current;
+
+  await act(async () => {
+    view.result.current.togglePause();
+  });
+  await settle(40);
+
+  assert.equal(view.result.current.isPaused, true);
+  assert.ok(view.result.current.captureRef.current.pausedAt !== null);
+
+  await act(async () => {
+    view.result.current.togglePause();
+  });
+  await settle();
+
+  const capture = view.result.current.captureRef.current;
+  assert.equal(view.result.current.isPaused, false);
+  assert.equal(capture.startedAt, startedAt, "resume must not reset the elapsed base");
+  assert.equal(capture.analyser, analyser, "resume must not drop the live analyser");
+  assert.equal(capture.pausedAt, null);
+  assert.ok(capture.pausedAccum > 0, "paused time must be subtracted from active elapsed time");
+  assert.equal(world.recorders[0].state, "recording");
+});
+
+test("stopping capture enters review with a playable preview, and confirming releases it", async () => {
+  const { view, transcripts } = mountDictation();
+
+  await act(async () => {
+    view.result.current.toggle();
+  });
+  await settle();
+
+  await act(async () => {
+    view.result.current.stop();
+  });
+  await settle();
+
+  assert.equal(view.result.current.isReviewing, true);
+  assert.equal(view.result.current.isRecording, false);
+  assert.equal(world.createdUrls.length, 1, "review mode needs a preview blob URL");
+  assert.ok(world.tracks[0].stopped, "microphone tracks must be released on stop");
+
+  await act(async () => {
+    view.result.current.playPreview();
+  });
+  await settle();
+  assert.equal(view.result.current.isPlayingPreview, true);
+
+  await act(async () => {
+    view.result.current.confirmTranscribe();
+  });
+  await settle(60);
+
+  assert.deepEqual(world.revokedUrls, [world.createdUrls[0].url], "confirming must revoke the preview URL");
+  assert.equal(view.result.current.isReviewing, false);
+  assert.deepEqual(transcripts, ["transcribed words"]);
+});
+
+test("cancelling during capture clears state and releases the microphone", async () => {
+  const { view, transcripts } = mountDictation();
+
+  await act(async () => {
+    view.result.current.toggle();
+  });
+  await settle();
+
+  await act(async () => {
+    view.result.current.cancel();
+  });
+  await settle();
+
+  assert.equal(view.result.current.isRecording, false);
+  assert.equal(view.result.current.isPaused, false);
+  assert.equal(view.result.current.isReviewing, false);
+  assert.equal(view.result.current.isTranscribing, false);
+  assert.equal(view.result.current.captureRef.current.analyser, null);
+  assert.ok(world.tracks[0].stopped);
+  assert.deepEqual(transcripts, []);
+});
diff --git a/hooks/useDictation.test.mjs b/hooks/useDictation.test.mjs
index fbf2249d..8d1e051a 100644
--- a/hooks/useDictation.test.mjs
+++ b/hooks/useDictation.test.mjs
@@ -122,81 +122,3 @@ test("RecordingDeck renders left preview play button when paused and in review m
   assert.match(deckSource, /isReviewing/);
   assert.match(deckSource, /onConfirmTranscribe/);
 });
-
-test("behavioral: pause and resume accounting retains startedAt, accumulates paused time, and preserves analyser", () => {
-  const fakeAnalyser = { getByteFrequencyData: () => {} };
-  const capture = {
-    analyser: fakeAnalyser,
-    startedAt: 1000,
-    pausedAccum: 0,
-    pausedAt: null,
-    finalDurationMs: null,
-  };
-
-  // Simulate pause at t=4000ms
-  capture.pausedAt = 4000;
-  assert.equal(capture.pausedAt, 4000);
-  assert.equal(capture.analyser, fakeAnalyser);
-
-  // Simulate teardownPreviewAudio does NOT touch captureRef
-  let previewRevoked = false;
-  const teardownPreviewAudio = () => {
-    previewRevoked = true;
-  };
-  teardownPreviewAudio();
-  assert.equal(previewRevoked, true);
-  assert.equal(capture.startedAt, 1000); // startedAt NOT wiped
-  assert.equal(capture.analyser, fakeAnalyser); // analyser NOT nulled
-
-  // Simulate resume at t=9000ms (5000ms pause)
-  const resumeTime = 9000;
-  const { pausedAt, pausedAccum } = capture;
-  assert.notEqual(pausedAt, null);
-  if (pausedAt !== null) {
-    capture.pausedAccum = pausedAccum + (resumeTime - pausedAt);
-  }
-  capture.pausedAt = null;
-
-  assert.equal(capture.pausedAccum, 5000);
-  assert.equal(capture.pausedAt, null);
-  assert.equal(capture.startedAt, 1000);
-  assert.equal(capture.analyser, fakeAnalyser);
-
-  // At t=10000ms, active elapsed time must be 10000 - 1000 - 5000 = 4000ms
-  const now = 10000;
-  const elapsed = now - capture.startedAt - capture.pausedAccum - (capture.pausedAt !== null ? now - capture.pausedAt : 0);
-  assert.equal(elapsed, 4000);
-});
-
-test("behavioral: teardownPreviewAudio revokes object URL and pauses audio element", () => {
-  let revokedUrl = null;
-  let paused = false;
-
-  const fakeAudio = {
-    pause: () => { paused = true; },
-    src: "blob:http://localhost/test",
-  };
-  const fakeUrl = "blob:http://localhost/test";
-  const fakeUrlApi = {
-    revokeObjectURL: (url) => { revokedUrl = url; },
-  };
-
-  // Simulated teardownPreviewAudio
-  const teardown = () => {
-    fakeAudio.pause();
-    fakeAudio.src = "";
-    fakeUrlApi.revokeObjectURL(fakeUrl);
-  };
-
-  teardown();
-  assert.equal(paused, true);
-  assert.equal(fakeAudio.src, "");
-  assert.equal(revokedUrl, fakeUrl);
-});
-
-test("behavioral: RecordingDeck pause button renders Play when paused and Pause when active", async () => {
-  const deckSource = await readFile(new URL("../components/RecordingDeck.tsx", import.meta.url), "utf8");
-
-  // Assert that isPaused renders Play icon, not Pause in both branches
-  assert.match(deckSource, /isPaused \?\s*\(\s*<Play/);
-});
diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index ea9d8a3f..0216da71 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -382,6 +382,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
       };
 
       recorder.start(100);
+      setIsRecording(true);
       maxTimeoutRef.current = window.setTimeout(() => {
         finishCapture();
       }, MAX_RECORDING_MS);

From 7c05bf1d59f875c0a2b2418ac626d5a21278f314 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Fri, 18 Sep 2026 21:36:31 +0000
Subject: [PATCH 11/14] fix(dictation): allow blob: media in CSP so preview
 playback works; mic icon for resume

---
 components/RecordingDeck.tsx | 4 ++--
 next.config.ts               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index 244830ed..17120967 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { AlertCircle, ArrowUp, Loader2, Pause, Play, RotateCw, Square, Trash2 } from "lucide-react";
+import { AlertCircle, ArrowUp, Loader2, Mic, Pause, Play, RotateCw, Square, Trash2 } from "lucide-react";
 import { MAX_RECORDING_MS, type DictationCapture } from "@/hooks/useDictation";
 import { useI18n } from "@/lib/i18n";
 
@@ -306,7 +306,7 @@ export function RecordingDeck({
                     tone={isPaused ? "accent" : undefined}
                   >
                     {isPaused ? (
-                      <Play size={14} strokeWidth={2} aria-hidden="true" style={{ marginLeft: 1 }} />
+                      <Mic size={14} strokeWidth={1.8} aria-hidden="true" />
                     ) : (
                       <Pause size={14} strokeWidth={1.8} aria-hidden="true" />
                     )}
diff --git a/next.config.ts b/next.config.ts
index af39d802..2d00d62a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -58,7 +58,7 @@ const nextConfig = (phase: string): NextConfig => {
         { key: "X-Frame-Options", value: "DENY" },
         { key: "Referrer-Policy", value: "no-referrer" },
         { key: "Permissions-Policy", value: "camera=(), microphone=(self), geolocation=()" },
-        { key: "Content-Security-Policy", value: "default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none'; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' ws: wss:; font-src 'self' data:" },
+        { key: "Content-Security-Policy", value: "default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; object-src 'none'; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' ws: wss:; font-src 'self' data:; media-src 'self' blob:" },
       ];
       // /api/files streams workspace files whose document policy depends on the
       // content type (strict CSP for SVG, the DOCX preview policy, none for

From a5ba1850fdfa987891bf83f38ae4c88747469507 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Fri, 18 Sep 2026 21:46:45 +0000
Subject: [PATCH 12/14] fix(dictation): draw recorded bars and playback
 progress in review-mode waveform

---
 components/RecordingDeck.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/RecordingDeck.tsx b/components/RecordingDeck.tsx
index 17120967..f9fb5948 100644
--- a/components/RecordingDeck.tsx
+++ b/components/RecordingDeck.tsx
@@ -124,7 +124,9 @@ export function RecordingDeck({
 
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas || !captureActive) return;
+    // Review mode has no live capture but still draws the recorded bars and
+    // the playback progress overlay.
+    if (!canvas || (!captureActive && !isReviewing)) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
@@ -173,7 +175,7 @@ export function RecordingDeck({
       const offset = cssW - visible.length * (barW + gap) + gap;
 
       // Determine playback progress ratio if previewing or reviewing
-      const isPreviewActive = isReviewing || (isPaused && isPlayingPreview);
+      const isPreviewActive = (isReviewing || isPaused) && (isPlayingPreview || previewCurrentTime > 0);
       const activeDuration = previewDuration > 0 ? previewDuration : Math.max(1, elapsed / 1000);
       const progressRatio = isPreviewActive ? Math.min(1, Math.max(0, previewCurrentTime / activeDuration)) : 0;
       const progressCutoff = isPreviewActive ? offset + progressRatio * (cssW - offset) : -1;

From f62ecc2bc6aba6895958e198d7349a787bd7fa02 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Fri, 18 Sep 2026 22:11:10 +0000
Subject: [PATCH 13/14] fix(dictation): stop replaced preview audio; neutral
 confirm label

---
 hooks/useDictation.ts       | 9 ++++-----
 lib/i18n/locales/en.json    | 2 +-
 lib/i18n/locales/ja.json    | 2 +-
 lib/i18n/locales/zh-CN.json | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/hooks/useDictation.ts b/hooks/useDictation.ts
index 0216da71..4ef2977c 100644
--- a/hooks/useDictation.ts
+++ b/hooks/useDictation.ts
@@ -198,10 +198,9 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
   }, []);
 
   const setupPreviewAudio = useCallback((blob: Blob) => {
-    if (previewUrlRef.current) {
-      URL.revokeObjectURL(previewUrlRef.current);
-      previewUrlRef.current = null;
-    }
+    // Pause/detach any previous preview element before replacing it so a
+    // still-playing preview cannot outlive the controls that reference it.
+    teardownPreviewAudio();
     try {
       const url = URL.createObjectURL(blob);
       previewUrlRef.current = url;
@@ -233,7 +232,7 @@ export function useDictation({ onTranscript, onError }: UseDictationOptions) {
     } catch {
       return null;
     }
-  }, []);
+  }, [teardownPreviewAudio]);
 
   const playPreview = useCallback(() => {
     let audio = previewAudioRef.current;
diff --git a/lib/i18n/locales/en.json b/lib/i18n/locales/en.json
index 9f26b789..2e868ffe 100644
--- a/lib/i18n/locales/en.json
+++ b/lib/i18n/locales/en.json
@@ -277,7 +277,7 @@
   "chatInput.playPreview": "Play preview",
   "chatInput.pausePreview": "Pause preview",
   "chatInput.stopDictation": "Stop recording",
-  "chatInput.transcribeDictation": "Transcribe and send",
+  "chatInput.transcribeDictation": "Transcribe",
   "chatInput.fastLabel": "Fast",
   "chatInput.queuedDelete": "Delete",
   "chatInput.queuedDeleteTitle": "Remove this queued message",
diff --git a/lib/i18n/locales/ja.json b/lib/i18n/locales/ja.json
index 85cd3061..14aaf7f2 100644
--- a/lib/i18n/locales/ja.json
+++ b/lib/i18n/locales/ja.json
@@ -264,7 +264,7 @@
   "chatInput.playPreview": "プレビューを再生",
   "chatInput.pausePreview": "プレビューを一時停止",
   "chatInput.stopDictation": "録音を停止",
-  "chatInput.transcribeDictation": "文字起こしして送信",
+  "chatInput.transcribeDictation": "文字起こし",
   "chatInput.fastLabel": "高速",
   "chatInput.queuedDelete": "削除",
   "chatInput.queuedDeleteTitle": "このキューされたメッセージを削除",
diff --git a/lib/i18n/locales/zh-CN.json b/lib/i18n/locales/zh-CN.json
index 391f8027..d124e863 100644
--- a/lib/i18n/locales/zh-CN.json
+++ b/lib/i18n/locales/zh-CN.json
@@ -264,7 +264,7 @@
   "chatInput.playPreview": "播放预览",
   "chatInput.pausePreview": "暂停预览",
   "chatInput.stopDictation": "停止录音",
-  "chatInput.transcribeDictation": "转写并发送",
+  "chatInput.transcribeDictation": "转写",
   "chatInput.fastLabel": "快速",
   "chatInput.queuedDelete": "删除",
   "chatInput.queuedDeleteTitle": "移除这条已排队消息",

From 45ac18849145323720f1d40737e7f512a8ce7d12 Mon Sep 17 00:00:00 2001
From: Andre Brait <andrebrait@gmail.com>
Date: Fri, 18 Sep 2026 22:23:35 +0000
Subject: [PATCH 14/14] chore(ci): retrigger windows verify after flaky
 MessageView copy test