From ba95e13b369d13e9bc1013ca30c0046ce23f98d2 Mon Sep 17 00:00:00 2001
From: yangyaofei <yangyaofei@gmail.com>
Date: Tue, 9 Jun 2026 00:31:21 +0800
Subject: [PATCH] feat(tts): add TTS buttons to PlanView and FilesView markdown
 preview with configurable input mode (#1443)

Add TTS controls to markdown preview surfaces so users can listen to plans
and markdown files directly from the preview toolbar.

Changes:
- Add read-aloud / stop buttons to PlanView markdown preview.
- Add read-aloud / stop buttons to FilesView markdown preview for markdown files.
- Respect the existing showMessageTTSButtons preference in both preview views.
- Add a persisted ttsInputMode setting with sanitized/raw modes.
- Keep sanitized mode as the default for backward compatibility.
- Allow raw markdown only for server TTS providers that can handle markdown.
- Always use sanitized text for browser and macOS say fallback paths.
- Add Voice Settings controls for TTS input mode.
- Add i18n keys for the new preview buttons and setting labels.
- Merge latest main and preserve newer FilesView toolbar/editor changes.

Validation:
- bun test packages/ui/src/stores/useConfigStore.test.ts packages/ui/src/components/chat/message/parts/ToolPart.test.ts packages/web/server/lib/tts/routes.test.js
- bun run type-check
- bun run lint
- git diff --check

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
---
 .../sections/openchamber/VoiceSettings.tsx    | 32 +++++++++
 .../ui/src/components/views/FilesView.tsx     | 65 ++++++++++++++-----
 packages/ui/src/components/views/PlanView.tsx | 31 +++++++++
 packages/ui/src/hooks/useMessageTTS.ts        | 10 ++-
 .../ui/src/lib/i18n/messages/en.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/en.ts       |  4 ++
 .../ui/src/lib/i18n/messages/es.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/es.ts       |  4 ++
 .../ui/src/lib/i18n/messages/ko.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/ko.ts       |  4 ++
 .../ui/src/lib/i18n/messages/pl.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/pl.ts       |  4 ++
 .../src/lib/i18n/messages/pt-BR.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/pt-BR.ts    |  4 ++
 .../ui/src/lib/i18n/messages/uk.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/uk.ts       |  4 ++
 .../src/lib/i18n/messages/zh-CN.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/zh-CN.ts    |  4 ++
 .../src/lib/i18n/messages/zh-TW.settings.ts   |  3 +
 packages/ui/src/lib/i18n/messages/zh-TW.ts    |  4 ++
 packages/ui/src/stores/useConfigStore.ts      | 16 +++++
 21 files changed, 191 insertions(+), 19 deletions(-)

diff --git a/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx b/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
index 8b1bf656..33b2a0b8 100644
--- a/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
@@ -161,6 +161,8 @@ export const VoiceSettings: React.FC = () => {
     const openaiCompatibleTtsModel = useConfigStore((state) => state.openaiCompatibleTtsModel);
     const setOpenaiCompatibleTtsModel = useConfigStore((state) => state.setOpenaiCompatibleTtsModel);
     const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+    const ttsInputMode = useConfigStore((state) => state.ttsInputMode);
+    const setTtsInputMode = useConfigStore((state) => state.setTtsInputMode);
     // STT settings
     const sttProvider = useConfigStore((state) => state.sttProvider);
     const setSttProvider = useConfigStore((state) => state.setSttProvider);
@@ -1053,6 +1055,36 @@ export const VoiceSettings: React.FC = () => {
                         <span className="typography-ui-label text-foreground">{t('settings.voice.page.field.messageReadAloudButton')}</span>
                     </div>
 
+                    <div className="pb-1.5 pt-0.5">
+                        <div className="flex min-w-0 flex-col gap-1.5">
+                            <div className="flex items-center gap-1.5">
+                                <span className="typography-ui-label text-foreground">
+                                    {t('settings.voice.page.field.ttsInputMode')}
+                                </span>
+                            </div>
+                            <div className="flex flex-wrap items-center gap-1">
+                                <Button
+                                    variant="chip"
+                                    size="xs"
+                                    aria-pressed={ttsInputMode === 'sanitized'}
+                                    onClick={() => setTtsInputMode('sanitized')}
+                                    className="!font-normal"
+                                >
+                                    {t('settings.voice.page.field.ttsInputModeSanitized')}
+                                </Button>
+                                <Button
+                                    variant="chip"
+                                    size="xs"
+                                    aria-pressed={ttsInputMode === 'raw'}
+                                    onClick={() => setTtsInputMode('raw')}
+                                    className="!font-normal"
+                                >
+                                    {t('settings.voice.page.field.ttsInputModeRaw')}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
                 </section>
 
                 {voiceModeEnabled && isSupported && (
diff --git a/packages/ui/src/components/views/FilesView.tsx b/packages/ui/src/components/views/FilesView.tsx
index 2014df0f..f8bf1385 100644
--- a/packages/ui/src/components/views/FilesView.tsx
+++ b/packages/ui/src/components/views/FilesView.tsx
@@ -54,9 +54,10 @@ import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
 import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
 import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
-import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
-import { Icon } from "@/components/icon/Icon";
-import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
+import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
+import { Icon } from "@/components/icon/Icon";
+import { useMessageTTS } from '@/hooks/useMessageTTS';
+import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
 import { getDefaultTheme } from '@/lib/theme/themes';
 import { openDesktopFileInApp, openDesktopPath } from '@/lib/desktop';
 import { useOpenInAppsStore } from '@/stores/useOpenInAppsStore';
@@ -785,11 +786,12 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const activeDirectoryLoadIdsRef = React.useRef<Map<string, number>>(new Map());
   const nextDirectoryLoadIdRef = React.useRef(0);
 
-  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
-  const [searching, setSearching] = React.useState(false);
-
-  const [fileContent, setFileContent] = React.useState<string>('');
-  const [fileLoading, setFileLoading] = React.useState(false);
+  const [searchResults, setSearchResults] = React.useState<FileNode[]>([]);
+  const [searching, setSearching] = React.useState(false);
+
+  const [fileContent, setFileContent] = React.useState<string>('');
+  const { isPlaying: isTTSPlaying, play: playTTS, stop: stopTTS } = useMessageTTS();
+  const [fileLoading, setFileLoading] = React.useState(false);
   const [fileError, setFileError] = React.useState<string | null>(null);
   const [desktopImageSrc, setDesktopImageSrc] = React.useState<string>('');
   const [imageAssetAuthReadyKey, setImageAssetAuthReadyKey] = React.useState('');
@@ -911,6 +913,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
   const shortcutOverrides = useUIStore((state) => state.shortcutOverrides);
   const fileEditorKeymap = useUIStore((state) => state.fileEditorKeymap);
   const settingsDefaultFileViewerPreview = useConfigStore((state) => state.settingsDefaultFileViewerPreview);
+  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
 
   // Global mouseup to end drag selection
   React.useEffect(() => {
@@ -3065,20 +3068,50 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
           />
         )}
 
-        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
-          <PreviewToggleButton
-            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
+        {(isMarkdown || isHtmlFile(selectedFile?.path ?? '')) && (
+          <PreviewToggleButton
+            currentMode={isMarkdown ? getMdViewMode() : getHtmlViewMode()}
             onToggle={() => {
               if (isHtmlFile(selectedFile?.path ?? '')) {
                 saveHtmlViewMode(getHtmlViewMode() === 'preview' ? 'edit' : 'preview');
               } else {
                 saveMdViewMode(getMdViewMode() === 'preview' ? 'edit' : 'preview');
               }
-            }}
-          />
-        )}
-        {isDrawio && (
-          <>
+            }}
+          />
+        )}
+
+        {isMarkdown && getMdViewMode() === 'preview' && showMessageTTSButtons && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="size-6 p-0 text-muted-foreground opacity-65 hover:bg-transparent hover:opacity-100 focus-visible:bg-transparent active:bg-transparent"
+                aria-label={isTTSPlaying ? t('filesView.tts.stopSpeaking') : t('filesView.tts.readAloud')}
+                onClick={() => {
+                  if (isTTSPlaying) {
+                    stopTTS();
+                  } else if (fileContent.trim()) {
+                    void playTTS(fileContent);
+                  }
+                }}
+              >
+                {isTTSPlaying ? (
+                  <Icon name="stop" className="size-4 text-[color:var(--status-success)]" />
+                ) : (
+                  <Icon name="volume-up" className="size-4" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent sideOffset={8}>
+              {isTTSPlaying ? t('filesView.tts.stopSpeaking') : t('filesView.tts.readAloud')}
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {isDrawio && (
+          <>
             <PreviewToggleButton
               currentMode={drawioViewMode}
               onToggle={() => saveDrawioViewMode(drawioViewMode === 'preview' ? 'edit' : 'preview')}
diff --git a/packages/ui/src/components/views/PlanView.tsx b/packages/ui/src/components/views/PlanView.tsx
index c621c1c5..7d7a820a 100644
--- a/packages/ui/src/components/views/PlanView.tsx
+++ b/packages/ui/src/components/views/PlanView.tsx
@@ -40,6 +40,7 @@ import { parseProjectPlanMarkdown } from '@/lib/openchamberConfig';
 import { createWorktreeSessionForNewBranch } from '@/lib/worktreeSessionCreator';
 import { TodoSendDialog, type TodoSendExecution } from '@/components/session/TodoSendDialog';
 import { Icon } from "@/components/icon/Icon";
+import { useMessageTTS } from '@/hooks/useMessageTTS';
 import { renderMagicPrompt } from '@/lib/magicPrompts';
 import { useI18n } from '@/lib/i18n';
 
@@ -197,6 +198,8 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
     return toDisplayPath(resolvedPath, { currentDirectory: sessionDirectory, homeDirectory });
   }, [resolvedPath, sessionDirectory, homeDirectory]);
   const [content, setContent] = React.useState<string>('');
+  const { isPlaying: isTTSPlaying, play: playTTS, stop: stopTTS } = useMessageTTS();
+  const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
   const [saveError, setSaveError] = React.useState<string | null>(null);
   const planFileLabel = React.useMemo(() => {
     return displayPath ? displayPath.split('/').pop() || t('planView.file.defaultName') : t('planView.file.defaultName');
@@ -689,6 +692,34 @@ export const PlanView: React.FC<PlanViewProps> = ({ targetPath = null }) => {
               currentMode={mdViewMode}
               onToggle={() => saveMdViewMode(mdViewMode === 'preview' ? 'edit' : 'preview')}
             />
+            {mdViewMode === 'preview' && showMessageTTSButtons && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0"
+                    aria-label={isTTSPlaying ? t('planView.tts.stopSpeaking') : t('planView.tts.readAloud')}
+                    onClick={() => {
+                      if (isTTSPlaying) {
+                        stopTTS();
+                      } else if (content.trim()) {
+                        void playTTS(content);
+                      }
+                    }}
+                  >
+                    {isTTSPlaying ? (
+                      <Icon name="stop" className="h-4 w-4 text-[color:var(--status-success)]" />
+                    ) : (
+                      <Icon name="volume-up" className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent sideOffset={8}>
+                  {isTTSPlaying ? t('planView.tts.stopSpeaking') : t('planView.tts.readAloud')}
+                </TooltipContent>
+              </Tooltip>
+            )}
             <Button
               variant="ghost"
               size="sm"
diff --git a/packages/ui/src/hooks/useMessageTTS.ts b/packages/ui/src/hooks/useMessageTTS.ts
index 39b2b9db..c6d67638 100644
--- a/packages/ui/src/hooks/useMessageTTS.ts
+++ b/packages/ui/src/hooks/useMessageTTS.ts
@@ -35,6 +35,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
     const openaiCompatibleUrl = useConfigStore((state) => state.openaiCompatibleUrl);
     const openaiCompatibleTtsModel = useConfigStore((state) => state.openaiCompatibleTtsModel);
     const showMessageTTSButtons = useConfigStore((state) => state.showMessageTTSButtons);
+    const ttsInputMode = useConfigStore((state) => state.ttsInputMode);
 
     const isServerProvider = voiceProvider === 'openai' || voiceProvider === 'openai-compatible';
     const shouldCheckOpenAIAvailability = showMessageTTSButtons && isServerProvider;
@@ -64,7 +65,9 @@ export function useMessageTTS(): UseMessageTTSReturn {
         setIsPlaying(true);
         
         try {
-            const textToSpeak = sanitizeForTTS(text);
+            const shouldUseRaw = ttsInputMode === 'raw' && isServerProvider;
+            const sanitizedText = sanitizeForTTS(text);
+            const textToSpeak = shouldUseRaw ? text : sanitizedText;
             
             if (isServerProvider && isServerTTSAvailable) {
                 const voice = voiceProvider === 'openai-compatible' ? openaiCompatibleVoice : openaiVoice;
@@ -83,7 +86,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
                 });
             } else if (voiceProvider === 'say' && isSayTTSAvailable) {
                 const wordsPerMinute = Math.round(100 + (speechRate - 0.5) * 200);
-                await speakSayTTS(textToSpeak, {
+                await speakSayTTS(sanitizedText, {
                     voice: sayVoice,
                     rate: wordsPerMinute,
                     onEnd: () => setIsPlaying(false),
@@ -94,7 +97,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
                 await browserVoiceService.waitForVoices();
                 await browserVoiceService.resumeAudioContext();
                 await browserVoiceService.speakText(
-                    textToSpeak,
+                    sanitizedText,
                     navigator.language || 'en-US',
                     () => setIsPlaying(false),
                     {
@@ -123,6 +126,7 @@ export function useMessageTTS(): UseMessageTTSReturn {
         openaiCompatibleTtsModel,
         isServerTTSAvailable,
         isSayTTSAvailable,
+        ttsInputMode,
         speakServerTTS,
         speakSayTTS,
         stop,
diff --git a/packages/ui/src/lib/i18n/messages/en.settings.ts b/packages/ui/src/lib/i18n/messages/en.settings.ts
index 804094d4..39a22a55 100644
--- a/packages/ui/src/lib/i18n/messages/en.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/en.settings.ts
@@ -1537,6 +1537,9 @@ export const settingsDict = {
   'settings.voice.page.preview.browserVoiceFallback': 'your browser voice',
   'settings.voice.page.preview.voiceLine': 'Hello! I\'m {voiceName}. This is how I sound.',
   'settings.voice.page.preview.customServerLine': 'Hello! This is a preview of the custom TTS server.',
+  'settings.voice.page.field.ttsInputMode': 'TTS Input Mode',
+  'settings.voice.page.field.ttsInputModeSanitized': 'Sanitized',
+  'settings.voice.page.field.ttsInputModeRaw': 'Raw Markdown',
   'settings.openchamber.visual.section.colorMode': 'Color Mode',
   'settings.openchamber.visual.section.mobileLayout': 'Mobile Layout',
   'settings.openchamber.visual.option.mobileLayout.default': 'Old',
diff --git a/packages/ui/src/lib/i18n/messages/en.ts b/packages/ui/src/lib/i18n/messages/en.ts
index 5b4b4ded..f835a133 100644
--- a/packages/ui/src/lib/i18n/messages/en.ts
+++ b/packages/ui/src/lib/i18n/messages/en.ts
@@ -1741,6 +1741,10 @@ export const dict = {
   'chat.messageBody.tts.stopSpeaking': 'Stop speaking',
   'chat.messageBody.tts.readAloud': 'Read aloud',
   'chat.messageBody.tts.readAloudWithProvider': 'Read aloud ({provider} voice)',
+  'planView.tts.readAloud': 'Read plan aloud',
+  'planView.tts.stopSpeaking': 'Stop speaking',
+  'filesView.tts.readAloud': 'Read file aloud',
+  'filesView.tts.stopSpeaking': 'Stop speaking',
   'chat.messageBody.toast.noProject': 'No project found for this session',
   'chat.messageBody.toast.savePlanFailed': 'Failed to save plan',
   'chat.messageBody.toast.planSaved': 'Plan saved',
diff --git a/packages/ui/src/lib/i18n/messages/es.settings.ts b/packages/ui/src/lib/i18n/messages/es.settings.ts
index e8cdaf6c..a22f52c5 100644
--- a/packages/ui/src/lib/i18n/messages/es.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/es.settings.ts
@@ -1504,6 +1504,9 @@ export const settingsDict = {
   "settings.voice.page.preview.browserVoiceFallback": "voz del navegador",
   "settings.voice.page.preview.voiceLine": "¡Hola! Soy {voiceName}. Así suena mi voz.",
   "settings.voice.page.preview.customServerLine": "¡Hola! Esta es una previsualización del servidor TTS personalizado.",
+  "settings.voice.page.field.ttsInputMode": "Modo de entrada TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Texto limpio",
+  "settings.voice.page.field.ttsInputModeRaw": "Markdown sin procesar",
   "settings.openchamber.visual.section.colorMode": "Modo de color",
   "settings.openchamber.visual.section.mobileLayout": "Diseño móvil",
   "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
diff --git a/packages/ui/src/lib/i18n/messages/es.ts b/packages/ui/src/lib/i18n/messages/es.ts
index 450decc3..2e57faf2 100644
--- a/packages/ui/src/lib/i18n/messages/es.ts
+++ b/packages/ui/src/lib/i18n/messages/es.ts
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
   "chat.messageBody.tts.stopSpeaking": "Dejar de hablar",
   "chat.messageBody.tts.readAloud": "Leer en voz alta",
   "chat.messageBody.tts.readAloudWithProvider": "Leer en voz alta ({provider} voz)",
+  "planView.tts.readAloud": "Leer plan en voz alta",
+  "planView.tts.stopSpeaking": "Detener lectura",
+  "filesView.tts.readAloud": "Leer archivo en voz alta",
+  "filesView.tts.stopSpeaking": "Detener lectura",
   "chat.messageBody.toast.noProject": "No se encontró proyecto para esta sesión",
   "chat.messageBody.toast.savePlanFailed": "No se pudo guardar el plan",
   "chat.messageBody.toast.planSaved": "Plan guardado",
diff --git a/packages/ui/src/lib/i18n/messages/ko.settings.ts b/packages/ui/src/lib/i18n/messages/ko.settings.ts
index 5efd9569..4b983732 100644
--- a/packages/ui/src/lib/i18n/messages/ko.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.settings.ts
@@ -1504,6 +1504,9 @@ export const settingsDict = {
   'settings.voice.page.preview.browserVoiceFallback': '브라우저 음성',
   'settings.voice.page.preview.voiceLine': '안녕하세요! 저는 {voiceName}입니다. 이렇게 들립니다.',
   'settings.voice.page.preview.customServerLine': '안녕하세요! 사용자 정의 TTS 서버 미리보기입니다.',
+  'settings.voice.page.field.ttsInputMode': 'TTS 입력 모드',
+  'settings.voice.page.field.ttsInputModeSanitized': '정제된 텍스트',
+  'settings.voice.page.field.ttsInputModeRaw': '원본 Markdown',
   'settings.openchamber.visual.section.colorMode': '색상 모드',
   'settings.openchamber.visual.section.mobileLayout': '모바일 레이아웃',
   'settings.openchamber.visual.option.mobileLayout.default': '이전',
diff --git a/packages/ui/src/lib/i18n/messages/ko.ts b/packages/ui/src/lib/i18n/messages/ko.ts
index 4745aa61..66b6bc37 100644
--- a/packages/ui/src/lib/i18n/messages/ko.ts
+++ b/packages/ui/src/lib/i18n/messages/ko.ts
@@ -1741,6 +1741,10 @@ export const dict: Record<I18nKey, string> = {
   'chat.messageBody.tts.stopSpeaking': '읽기 중지',
   'chat.messageBody.tts.readAloud': '소리 내어 읽기',
   'chat.messageBody.tts.readAloudWithProvider': '소리 내어 읽기({provider} 음성)',
+  'planView.tts.readAloud': '계획 소리 내어 읽기',
+  'planView.tts.stopSpeaking': '읽기 중지',
+  'filesView.tts.readAloud': '파일 소리 내어 읽기',
+  'filesView.tts.stopSpeaking': '읽기 중지',
   'chat.messageBody.toast.noProject': '이 세션의 프로젝트를 찾을 수 없음',
   'chat.messageBody.toast.savePlanFailed': '플랜 저장 실패',
   'chat.messageBody.toast.planSaved': '플랜이 저장되었습니다',
diff --git a/packages/ui/src/lib/i18n/messages/pl.settings.ts b/packages/ui/src/lib/i18n/messages/pl.settings.ts
index b417b792..fdaf8b49 100644
--- a/packages/ui/src/lib/i18n/messages/pl.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.settings.ts
@@ -1749,5 +1749,8 @@ export const settingsDict = {
   'settings.voice.page.tooltip.say': 'Natywne dla macOS. Szybkie, darmowe, offline.',
   'settings.voice.page.tooltip.sttBrowser': 'Web Speech API (Chrome/Edge). Darmowe, bez konfiguracji.',
   'settings.voice.page.tooltip.sttServer': 'Serwer Whisper zgodny z OpenAI. Lepsza dokładność, dowolny język.',
+  'settings.voice.page.field.ttsInputMode': 'Tryb wejścia TTS',
+  'settings.voice.page.field.ttsInputModeSanitized': 'Oczyszczony tekst',
+  'settings.voice.page.field.ttsInputModeRaw': 'Surowy Markdown',
   'settings.window.description': 'Okno ustawień OpenChamber.',
 };
diff --git a/packages/ui/src/lib/i18n/messages/pl.ts b/packages/ui/src/lib/i18n/messages/pl.ts
index 03de9766..f913ef6d 100644
--- a/packages/ui/src/lib/i18n/messages/pl.ts
+++ b/packages/ui/src/lib/i18n/messages/pl.ts
@@ -714,6 +714,10 @@ export const dict: Record<I18nKey, string> = {
   'chat.messageBody.tts.stopSpeaking': 'Przestań mówić',
   'chat.messageBody.tts.readAloud': 'Czytaj na głos',
   'chat.messageBody.tts.readAloudWithProvider': 'Czytaj na głos ({provider} voice)',
+  'planView.tts.readAloud': 'Czytaj plan na głos',
+  'planView.tts.stopSpeaking': 'Zatrzymaj czytanie',
+  'filesView.tts.readAloud': 'Czytaj plik na głos',
+  'filesView.tts.stopSpeaking': 'Zatrzymaj czytanie',
   'chat.messageBody.toast.noProject': 'Nie znaleziono projektu dla tej sesji',
   'chat.messageBody.toast.savePlanFailed': 'Nie udało się zapisać planu',
   'chat.messageBody.toast.planSaved': 'Plan zapisany',
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts b/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
index 45844c38..d2cf9d59 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.settings.ts
@@ -1504,6 +1504,9 @@ export const settingsDict = {
   "settings.voice.page.preview.browserVoiceFallback": "voz do navegador",
   "settings.voice.page.preview.voiceLine": "Olá! Sou {voiceName}. É assim que minha voz soa.",
   "settings.voice.page.preview.customServerLine": "Olá! Esta é uma prévia do servidor TTS personalizado.",
+  "settings.voice.page.field.ttsInputMode": "Modo de entrada TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Texto limpo",
+  "settings.voice.page.field.ttsInputModeRaw": "Markdown bruto",
   "settings.openchamber.visual.section.colorMode": "Modo de cor",
   "settings.openchamber.visual.section.mobileLayout": "Layout móvel",
   "settings.openchamber.visual.option.mobileLayout.default": "Anterior",
diff --git a/packages/ui/src/lib/i18n/messages/pt-BR.ts b/packages/ui/src/lib/i18n/messages/pt-BR.ts
index 73aa786d..4f382a37 100644
--- a/packages/ui/src/lib/i18n/messages/pt-BR.ts
+++ b/packages/ui/src/lib/i18n/messages/pt-BR.ts
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
   "chat.messageBody.tts.stopSpeaking": "Parar de falar",
   "chat.messageBody.tts.readAloud": "Ler em voz alta",
   "chat.messageBody.tts.readAloudWithProvider": "Ler em voz alta (voz {provider})",
+  "planView.tts.readAloud": "Ler plano em voz alta",
+  "planView.tts.stopSpeaking": "Parar de falar",
+  "filesView.tts.readAloud": "Ler arquivo em voz alta",
+  "filesView.tts.stopSpeaking": "Parar de falar",
   "chat.messageBody.toast.noProject": "Não foi encontrado projeto para esta sessão",
   "chat.messageBody.toast.savePlanFailed": "Não foi possível salvar o plano",
   "chat.messageBody.toast.planSaved": "Plano salvo",
diff --git a/packages/ui/src/lib/i18n/messages/uk.settings.ts b/packages/ui/src/lib/i18n/messages/uk.settings.ts
index ef7f5100..8d6a58d0 100644
--- a/packages/ui/src/lib/i18n/messages/uk.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.settings.ts
@@ -1504,6 +1504,9 @@ export const settingsDict = {
   "settings.voice.page.preview.browserVoiceFallback": "голос вашого браузера",
   "settings.voice.page.preview.voiceLine": "Привіт! Я {voiceName}. Ось як я звучу.",
   "settings.voice.page.preview.customServerLine": "Привіт! Це попередній перегляд спеціального сервера TTS.",
+  "settings.voice.page.field.ttsInputMode": "Режим вводу TTS",
+  "settings.voice.page.field.ttsInputModeSanitized": "Очищений текст",
+  "settings.voice.page.field.ttsInputModeRaw": "Сирий Markdown",
   "settings.openchamber.visual.section.colorMode": "Режим теми",
   "settings.openchamber.visual.section.mobileLayout": "Мобільний макет",
   "settings.openchamber.visual.option.mobileLayout.default": "Попередній",
diff --git a/packages/ui/src/lib/i18n/messages/uk.ts b/packages/ui/src/lib/i18n/messages/uk.ts
index 396be6ff..90ea40b0 100644
--- a/packages/ui/src/lib/i18n/messages/uk.ts
+++ b/packages/ui/src/lib/i18n/messages/uk.ts
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
   "chat.messageBody.tts.stopSpeaking": "Зупинити озвучення",
   "chat.messageBody.tts.readAloud": "Прочитати вголос",
   "chat.messageBody.tts.readAloudWithProvider": "Прочитати вголос (голос {provider})",
+  "planView.tts.readAloud": "Прочитати план вголос",
+  "planView.tts.stopSpeaking": "Зупинити читання",
+  "filesView.tts.readAloud": "Прочитати файл вголос",
+  "filesView.tts.stopSpeaking": "Зупинити читання",
   "chat.messageBody.toast.noProject": "Для цієї сесії не знайдено жодного проєкту",
   "chat.messageBody.toast.savePlanFailed": "Не вдалося зберегти план",
   "chat.messageBody.toast.planSaved": "План збережено",
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts b/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
index 264bd711..6d3caf3e 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.settings.ts
@@ -1504,6 +1504,9 @@ export const settingsDict = {
   'settings.voice.page.preview.browserVoiceFallback': '你的浏览器声音',
   'settings.voice.page.preview.voiceLine': '你好！我是 {voiceName}。这是我的声音效果。',
   'settings.voice.page.preview.customServerLine': '你好！这是自定义 TTS 服务器的预览。',
+  'settings.voice.page.field.ttsInputMode': 'TTS 输入模式',
+  'settings.voice.page.field.ttsInputModeSanitized': '清理后文本',
+  'settings.voice.page.field.ttsInputModeRaw': '原始 Markdown',
   'settings.openchamber.visual.section.colorMode': '颜色模式',
   'settings.openchamber.visual.section.mobileLayout': '移动端布局',
   'settings.openchamber.visual.option.mobileLayout.default': '旧版',
diff --git a/packages/ui/src/lib/i18n/messages/zh-CN.ts b/packages/ui/src/lib/i18n/messages/zh-CN.ts
index 54c5b387..2f59924a 100644
--- a/packages/ui/src/lib/i18n/messages/zh-CN.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-CN.ts
@@ -1707,6 +1707,10 @@ export const dict: Record<I18nKey, string> = {
   'chat.messageBody.tts.stopSpeaking': '停止朗读',
   'chat.messageBody.tts.readAloud': '朗读',
   'chat.messageBody.tts.readAloudWithProvider': '朗读（{provider} 语音）',
+  'planView.tts.readAloud': '朗读计划',
+  'planView.tts.stopSpeaking': '停止朗读',
+  'filesView.tts.readAloud': '朗读文件',
+  'filesView.tts.stopSpeaking': '停止朗读',
   'chat.messageBody.toast.noProject': '未找到此会话对应的项目',
   'chat.messageBody.toast.savePlanFailed': '保存计划失败',
   'chat.messageBody.toast.planSaved': '计划已保存',
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts b/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
index 47c91da5..905acf5a 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.settings.ts
@@ -1425,6 +1425,9 @@
   'settings.voice.page.preview.browserVoiceFallback': '你的瀏覽器聲音',
   'settings.voice.page.preview.voiceLine': '你好！我是 {voiceName}。這是我的聲音效果。',
   'settings.voice.page.preview.customServerLine': '你好！這是自訂 TTS 伺服器的預覽。',
+  'settings.voice.page.field.ttsInputMode': 'TTS 輸入模式',
+  'settings.voice.page.field.ttsInputModeSanitized': '清理後文字',
+  'settings.voice.page.field.ttsInputModeRaw': '原始 Markdown',
   'settings.openchamber.visual.section.colorMode': '顏色模式',
   'settings.openchamber.visual.section.localization': '在地化',
   'settings.openchamber.visual.section.spacingAndLayout': '間距與佈局',
diff --git a/packages/ui/src/lib/i18n/messages/zh-TW.ts b/packages/ui/src/lib/i18n/messages/zh-TW.ts
index eddea77f..796d7201 100644
--- a/packages/ui/src/lib/i18n/messages/zh-TW.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-TW.ts
@@ -1711,6 +1711,10 @@ export const dict: Record<I18nKey, string> = {
   'chat.messageBody.tts.stopSpeaking': '停止朗讀',
   'chat.messageBody.tts.readAloud': '朗讀',
   'chat.messageBody.tts.readAloudWithProvider': '朗讀（{provider} 語音）',
+  'planView.tts.readAloud': '朗讀計畫',
+  'planView.tts.stopSpeaking': '停止朗讀',
+  'filesView.tts.readAloud': '朗讀檔案',
+  'filesView.tts.stopSpeaking': '停止朗讀',
   'chat.messageBody.toast.noProject': '找不到此會話對應的專案',
   'chat.messageBody.toast.savePlanFailed': '儲存計畫失敗',
   'chat.messageBody.toast.planSaved': '計畫已儲存',
diff --git a/packages/ui/src/stores/useConfigStore.ts b/packages/ui/src/stores/useConfigStore.ts
index eb4243cf..16061e26 100644
--- a/packages/ui/src/stores/useConfigStore.ts
+++ b/packages/ui/src/stores/useConfigStore.ts
@@ -683,6 +683,7 @@ interface ConfigStore {
     sttSilenceHoldMs: number;
     sttTranscribeOnStop: boolean;
     showMessageTTSButtons: boolean;
+    ttsInputMode: 'sanitized' | 'raw';
     voiceModeEnabled: boolean;
     // Summarization settings
     summarizeMessageTTS: boolean;
@@ -710,6 +711,7 @@ interface ConfigStore {
     setSttSilenceHoldMs: (ms: number) => void;
     setSttTranscribeOnStop: (enabled: boolean) => void;
     setShowMessageTTSButtons: (show: boolean) => void;
+    setTtsInputMode: (mode: 'sanitized' | 'raw') => void;
     setVoiceModeEnabled: (enabled: boolean) => void;
     setSummarizeMessageTTS: (enabled: boolean) => void;
     setSummarizeVoiceConversation: (enabled: boolean) => void;
@@ -978,6 +980,13 @@ export const useConfigStore = create<ConfigStore>()(
                     }
                     return false;
                 })(),
+                ttsInputMode: (() => {
+                    if (typeof window !== 'undefined') {
+                        const saved = localStorage.getItem('ttsInputMode');
+                        if (saved === 'raw') return 'raw' as const;
+                    }
+                    return 'sanitized' as const;
+                })(),
                 // Voice mode enabled - load from localStorage or default to false
                 voiceModeEnabled: (() => {
                     if (typeof window !== 'undefined') {
@@ -2286,6 +2295,13 @@ export const useConfigStore = create<ConfigStore>()(
                     }
                 },
 
+                setTtsInputMode: (mode: 'sanitized' | 'raw') => {
+                    set({ ttsInputMode: mode });
+                    if (typeof window !== 'undefined') {
+                        localStorage.setItem('ttsInputMode', mode);
+                    }
+                },
+
                 setVoiceModeEnabled: (enabled: boolean) => {
                     set({ voiceModeEnabled: enabled });
                     if (typeof window !== 'undefined') {