Voice module integration in noteviewer

.env.example

@@ -2,3 +2,6 @@ JWT_SECRET_KEY=change-me
 HF_OAUTH_CLIENT_ID=your-hf-client-id
 HF_OAUTH_CLIENT_SECRET=your-hf-client-secret
 VAULT_BASE_PATH=./data/vaults
+ELEVENLABS_API_KEY=your-elevenlabs-api-key
+ELEVENLABS_VOICE_ID=your-elevenlabs-voice-id
+ELEVENLABS_MODEL=eleven_multilingual_v2

backend/.env.example

@@ -1,4 +1,7 @@
 JWT_SECRET_KEY=your-secret-key-here
 HF_OAUTH_CLIENT_ID=your-hf-client-id
 HF_OAUTH_CLIENT_SECRET=your-hf-client-secret
-VAULT_BASE_PATH=./data/vaults
+VAULT_BASE_PATH=./data/vaults
+ELEVENLABS_API_KEY=your-elevenlabs-api-key
+ELEVENLABS_VOICE_ID=your-elevenlabs-voice-id
+ELEVENLABS_MODEL=eleven_multilingual_v2

backend/src/api/main.py

@@ -21,7 +21,7 @@ from starlette.responses import Response
 from fastmcp.server.http import StreamableHTTPSessionManager, set_http_request
 from fastapi.responses import FileResponse
 
-from .routes import auth, index, notes, search, graph, demo, system, rag
+from .routes import auth, index, notes, search, graph, demo, system, rag, tts
 from ..mcp.server import mcp
 from ..services.seed import init_and_seed
 from ..services.config import get_config
@@ -113,6 +113,7 @@ app.include_router(graph.router, tags=["graph"])
 app.include_router(demo.router, tags=["demo"])
 app.include_router(system.router, tags=["system"])
 app.include_router(rag.router, tags=["rag"])
+app.include_router(tts.router, tags=["tts"])
 
 
 @app.api_route("/mcp", methods=["GET", "POST", "DELETE"])

backend/src/api/routes/__init__.py

@@ -1,5 +1,5 @@
 """HTTP API route handlers."""
 
-from . import auth, index, notes, search, graph, demo
+from . import auth, index, notes, search, graph, demo, tts
 
-__all__ = ["auth", "notes", "search", "index", "graph", "demo"]
+__all__ = ["auth", "notes", "search", "index", "graph", "demo", "tts"]

backend/src/api/routes/tts.py

@@ -0,0 +1,141 @@
+"""HTTP API routes for ElevenLabs text-to-speech."""
+
+from __future__ import annotations
+
+import os
+
+import httpx
+from fastapi import APIRouter, Depends, HTTPException
+from fastapi.responses import Response
+from pydantic import BaseModel, Field
+
+from ..middleware import AuthContext, get_auth_context
+
+router = APIRouter()
+
+ELEVENLABS_API_URL = "https://api.elevenlabs.io/v1/text-to-speech"
+DEFAULT_MODEL = "eleven_multilingual_v2"
+# ElevenLabs docs mention a hard limit; keep a conservative cap for safety.
+MAX_TEXT_LENGTH = 4800
+
+
+class TtsRequest(BaseModel):
+    """Payload for synthesizing speech."""
+
+    text: str = Field(..., min_length=1, description="Plaintext to convert to speech")
+    voice_id: str | None = Field(
+        default=None,
+        description="Override voice id; falls back to ELEVENLABS_VOICE_ID",
+    )
+    model: str | None = Field(
+        default=None,
+        description="Model override; defaults to ELEVENLABS_MODEL or a safe default",
+    )
+
+
+async def _call_elevenlabs(
+    api_key: str, voice_id: str, model: str, text: str
+) -> httpx.Response:
+    """Invoke ElevenLabs TTS API and return the raw response."""
+    headers = {
+        "xi-api-key": api_key,
+        "Accept": "audio/mpeg",
+    }
+    payload = {
+        "text": text,
+        "model_id": model,
+    }
+    async with httpx.AsyncClient(timeout=30.0) as client:
+        return await client.post(
+            f"{ELEVENLABS_API_URL}/{voice_id}",
+            headers=headers,
+            json=payload,
+        )
+
+
+@router.post("/api/tts")
+async def synthesize_tts(
+    payload: TtsRequest, auth: AuthContext = Depends(get_auth_context)
+):
+    """Synthesize speech for the provided text using ElevenLabs."""
+    api_key = os.getenv("ELEVENLABS_API_KEY")
+    default_voice = os.getenv("ELEVENLABS_VOICE_ID")
+    default_model = os.getenv("ELEVENLABS_MODEL") or DEFAULT_MODEL
+
+    if not api_key:
+        raise HTTPException(
+            status_code=500,
+            detail={
+                "error": "tts_not_configured",
+                "message": "ELEVENLABS_API_KEY is not set on the server.",
+            },
+        )
+
+    voice_id = payload.voice_id or default_voice
+    if not voice_id:
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "error": "voice_required",
+                "message": "Voice ID is required. Set ELEVENLABS_VOICE_ID or pass voice_id in the request.",
+            },
+        )
+
+    text = (payload.text or "").strip()
+    if not text:
+        raise HTTPException(
+            status_code=400,
+            detail={
+                "error": "empty_text",
+                "message": "Text is empty.",
+            },
+        )
+
+    if len(text) > MAX_TEXT_LENGTH:
+        text = text[:MAX_TEXT_LENGTH]
+
+    try:
+        response = await _call_elevenlabs(
+            api_key, voice_id, payload.model or default_model, text
+        )
+    except httpx.TimeoutException as exc:
+        raise HTTPException(
+            status_code=504,
+            detail={
+                "error": "tts_timeout",
+                "message": "ElevenLabs request timed out.",
+            },
+        ) from exc
+    except httpx.HTTPError as exc:
+        raise HTTPException(
+            status_code=502,
+            detail={
+                "error": "tts_http_error",
+                "message": f"ElevenLabs request failed: {str(exc)}",
+            },
+        ) from exc
+
+    if response.status_code >= 400:
+        try:
+            error_payload = response.json()
+            message = (
+                error_payload.get("detail")
+                or error_payload.get("message")
+                or "Failed to synthesize speech."
+            )
+        except Exception:
+            message = response.text[:200] or "Failed to synthesize speech."
+
+        raise HTTPException(
+            status_code=response.status_code,
+            detail={
+                "error": "tts_failed",
+                "message": message,
+            },
+        )
+
+    return Response(
+        content=response.content,
+        media_type="audio/mpeg",
+        headers={"Cache-Control": "no-store"},
+    )

frontend/package-lock.json

@@ -1,12 +1,13 @@
 {
-  "name": "frontend",
-  "version": "0.0.0",
+  "name": "document-mcp-frontend",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
-      "version": "0.0.0",
+      "name": "document-mcp-frontend",
+      "version": "0.1.0",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -122,7 +123,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -714,7 +714,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1740,7 +1739,6 @@
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -3341,7 +3339,6 @@
       "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -3351,7 +3348,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.5.tgz",
       "integrity": "sha512-keKxkZMqnDicuvFoJbzrhbtdLSPhj/rZThDlKWCDbgXmUg0rEUFtRssDXKYmtXluZlIqiC5VqkCgRwzuyLHKHw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3362,7 +3358,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -3426,7 +3421,6 @@
       "integrity": "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.46.4",
         "@typescript-eslint/types": "8.46.4",
@@ -3708,7 +3702,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3976,24 +3969,28 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "bytes": "^3.1.2",
         "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
         "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
         "on-finished": "^2.4.1",
         "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
       },
       "engines": {
         "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/brace-expansion": {
@@ -4039,7 +4036,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4739,7 +4735,6 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -5157,7 +5152,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5426,7 +5420,6 @@
       "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.0",
@@ -6215,9 +6208,9 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
+      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6225,6 +6218,10 @@
       },
       "engines": {
         "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/ignore": {
@@ -6548,7 +6545,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8418,7 +8414,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -8729,29 +8724,11 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
-      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8761,7 +8738,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -9852,7 +9828,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
       "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -9990,7 +9965,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10170,7 +10144,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -10573,7 +10546,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -10764,7 +10736,6 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
       "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
-      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },
@@ -10891,7 +10862,6 @@
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

frontend/src/components/NoteViewer.tsx

@@ -5,7 +5,7 @@
 import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Edit, Trash2, Calendar, Tag as TagIcon, ArrowLeft } from 'lucide-react';
+import { Edit, Trash2, Calendar, Tag as TagIcon, ArrowLeft, Volume2, Pause, Play, Square } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -20,6 +20,10 @@ interface NoteViewerProps {
   onEdit?: () => void;
   onDelete?: () => void;
   onWikilinkClick: (linkText: string) => void;
+  ttsStatus?: 'idle' | 'loading' | 'playing' | 'paused' | 'error';
+  onTtsToggle?: () => void;
+  onTtsStop?: () => void;
+  ttsDisabledReason?: string;
 }
 
 export function NoteViewer({
@@ -28,6 +32,10 @@ export function NoteViewer({
   onEdit,
   onDelete,
   onWikilinkClick,
+  ttsStatus = 'idle',
+  onTtsToggle,
+  onTtsStop,
+  ttsDisabledReason,
 }: NoteViewerProps) {
   // Create custom markdown components with wikilink handler
   const markdownComponents = useMemo(
@@ -70,6 +78,37 @@ export function NoteViewer({
             <p className="text-sm text-muted-foreground mt-1 animate-fade-in" style={{ animationDelay: '0.2s' }}>{note.note_path}</p>
           </div>
           <div className="flex gap-2 animate-fade-in" style={{ animationDelay: '0.15s' }}>
+            {onTtsToggle && (
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onTtsToggle}
+                  disabled={Boolean(ttsDisabledReason) || ttsStatus === 'loading'}
+                  title={ttsDisabledReason || undefined}
+                >
+                  {ttsStatus === 'playing' ? (
+                    <Pause className="h-4 w-4 mr-2" />
+                  ) : ttsStatus === 'paused' ? (
+                    <Play className="h-4 w-4 mr-2" />
+                  ) : (
+                    <Volume2 className="h-4 w-4 mr-2" />
+                  )}
+                  {ttsStatus === 'playing'
+                    ? 'Pause TTS'
+                    : ttsStatus === 'paused'
+                    ? 'Resume TTS'
+                    : ttsStatus === 'loading'
+                    ? 'Loading...'
+                    : 'TTS Mode'}
+                </Button>
+                {(ttsStatus === 'playing' || ttsStatus === 'paused' || ttsStatus === 'error') && onTtsStop && (
+                  <Button variant="ghost" size="sm" onClick={onTtsStop} title="Stop TTS">
+                    <Square className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            )}
             {onEdit && (
               <Button variant="outline" size="sm" onClick={onEdit}>
                 <Edit className="h-4 w-4 mr-2" />

frontend/src/hooks/useAudioPlayer.ts

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+
+type PlayerStatus = 'idle' | 'loading' | 'playing' | 'paused' | 'error';
+
+interface AudioPlayer {
+  status: PlayerStatus;
+  error: string | null;
+  play: (src: string) => void;
+  pause: () => void;
+  resume: () => void;
+  stop: () => void;
+}
+
+/**
+ * Lightweight audio controller for blob URLs returned by the TTS service.
+ */
+export function useAudioPlayer(): AudioPlayer {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [status, setStatus] = useState<PlayerStatus>('idle');
+  const [error, setError] = useState<string | null>(null);
+
+  const cleanup = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+      audio.src = '';
+      audioRef.current = null;
+    }
+  };
+
+  const stop = () => {
+    cleanup();
+    setStatus('idle');
+  };
+
+  const play = (src: string) => {
+    setError(null);
+    cleanup();
+    setStatus('loading');
+    const audio = new Audio(src);
+    audioRef.current = audio;
+
+    audio.oncanplay = () => {
+      audio.play().catch((err) => {
+        setError(err?.message || 'Failed to play audio.');
+        setStatus('error');
+      });
+    };
+    audio.onplay = () => setStatus('playing');
+    audio.onpause = () => setStatus((prev) => (prev === 'loading' ? 'loading' : 'paused'));
+    audio.onended = () => setStatus('idle');
+    audio.onerror = () => {
+      setError('Audio playback error.');
+      setStatus('error');
+    };
+  };
+
+  const pause = () => {
+    const audio = audioRef.current;
+    if (audio && !audio.paused) {
+      audio.pause();
+    }
+  };
+
+  const resume = () => {
+    const audio = audioRef.current;
+    if (audio && audio.paused) {
+      audio.play().catch((err) => {
+        setError(err?.message || 'Failed to resume audio.');
+        setStatus('error');
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return { status, error, play, pause, resume, stop };
+}

frontend/src/lib/markdownToText.ts

@@ -0,0 +1,26 @@
+/**
+ * Convert markdown content into a plaintext string suitable for TTS.
+ * Strips code blocks, images, and excess whitespace.
+ */
+export function markdownToPlainText(markdown: string): string {
+  if (!markdown) return '';
+
+  let text = markdown;
+
+  // Remove fenced code blocks
+  text = text.replace(/```[\\s\\S]*?```/g, '');
+  // Remove inline code
+  text = text.replace(/`([^`]*)`/g, '$1');
+  // Remove images: ![alt](url)
+  text = text.replace(/!\[[^\]]*\]\([^)]+\)/g, '');
+  // Replace markdown links with link text
+  text = text.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+  // Replace headings with emphasized text
+  text = text.replace(/^(#{1,6})\s*(.*)$/gm, '$2');
+  // Replace list markers with dash
+  text = text.replace(/^\s*[-*+]\s+/gm, '- ');
+  // Normalize whitespace
+  text = text.replace(/\\s+\\n/g, '\\n').replace(/\\n{3,}/g, '\\n\\n');
+
+  return text.trim();
+}

frontend/src/pages/MainApp.tsx

@@ -2,7 +2,7 @@
  * T080, T083-T084: Main application layout with two-pane design
  * Loads directory tree on mount and note + backlinks when path changes
  */
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Plus, Settings as SettingsIcon, FolderPlus, MessageCircle } from 'lucide-react';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
@@ -43,6 +43,9 @@ import type { Note, NoteSummary } from '@/types/note';
 import { normalizeSlug } from '@/lib/wikilink';
 import { Network } from 'lucide-react';
 import { AUTH_TOKEN_CHANGED_EVENT, isDemoSession, login } from '@/services/auth';
+import { synthesizeTts } from '@/services/tts';
+import { markdownToPlainText } from '@/lib/markdownToText';
+import { useAudioPlayer } from '@/hooks/useAudioPlayer';
 
 export function MainApp() {
   const navigate = useNavigate();
@@ -65,6 +68,29 @@ export function MainApp() {
   const [isCreatingFolder, setIsCreatingFolder] = useState(false);
   const [isDemoMode, setIsDemoMode] = useState<boolean>(isDemoSession());
   const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isSynthesizingTts, setIsSynthesizingTts] = useState(false);
+  const ttsUrlRef = useRef<string | null>(null);
+  const ttsAbortRef = useRef<AbortController | null>(null);
+  const {
+    status: ttsPlayerStatus,
+    error: ttsPlayerError,
+    play: playAudio,
+    pause: pauseAudio,
+    resume: resumeAudio,
+    stop: stopAudio,
+  } = useAudioPlayer();
+  const stopTts = () => {
+    if (ttsAbortRef.current) {
+      ttsAbortRef.current.abort();
+      ttsAbortRef.current = null;
+    }
+    stopAudio();
+    if (ttsUrlRef.current) {
+      URL.revokeObjectURL(ttsUrlRef.current);
+      ttsUrlRef.current = null;
+    }
+    setIsSynthesizingTts(false);
+  };
 
   useEffect(() => {
     const handleAuthChange = () => {
@@ -80,6 +106,12 @@ export function MainApp() {
     };
   }, []);
 
+  useEffect(() => {
+    if (ttsPlayerError) {
+      toast.error(ttsPlayerError);
+    }
+  }, [ttsPlayerError, toast]);
+
   // T083: Load directory tree on mount
   // T119: Load index health
   useEffect(() => {
@@ -115,6 +147,17 @@ export function MainApp() {
     loadData();
   }, []);
 
+  useEffect(() => {
+    // Stop TTS when switching notes
+    stopTts();
+  }, [selectedPath]);
+
+  useEffect(() => {
+    return () => {
+      stopTts();
+    };
+  }, []);
+
   // T084: Load note and backlinks when path changes
   useEffect(() => {
     if (!selectedPath) {
@@ -179,6 +222,57 @@ export function MainApp() {
     }
   };
 
+  const handleTtsToggle = async () => {
+    if (!currentNote || isSynthesizingTts) {
+      return;
+    }
+
+    if (ttsPlayerStatus === 'playing') {
+      pauseAudio();
+      return;
+    }
+
+    if (ttsPlayerStatus === 'paused') {
+      resumeAudio();
+      return;
+    }
+
+    const plainText = markdownToPlainText(currentNote.body);
+    if (!plainText) {
+      toast.error('No readable content in this note.');
+      return;
+    }
+
+    if (ttsAbortRef.current) {
+      ttsAbortRef.current.abort();
+    }
+    const controller = new AbortController();
+    ttsAbortRef.current = controller;
+    setIsSynthesizingTts(true);
+    try {
+      const blob = await synthesizeTts(plainText, { signal: controller.signal });
+      if (ttsUrlRef.current) {
+        URL.revokeObjectURL(ttsUrlRef.current);
+      }
+      const url = URL.createObjectURL(blob);
+      ttsUrlRef.current = url;
+      playAudio(url);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === 'AbortError') {
+        return;
+      }
+      const message = err instanceof Error ? err.message : 'Failed to generate speech.';
+      toast.error(message);
+    } finally {
+      ttsAbortRef.current = null;
+      setIsSynthesizingTts(false);
+    }
+  };
+
+  const handleTtsStop = () => {
+    stopTts();
+  };
+
   const handleSelectNote = (path: string) => {
     setSelectedPath(path);
     setError(null);
@@ -391,6 +485,9 @@ export function MainApp() {
     }
   };
 
+  const ttsStatus = isSynthesizingTts ? 'loading' : ttsPlayerStatus;
+  const ttsDisabledReason = undefined;
+
   return (
     <div className="h-screen flex flex-col">
       {/* Demo warning banner */}
@@ -608,6 +705,10 @@ export function MainApp() {
                       backlinks={backlinks}
                       onEdit={isDemoMode ? undefined : handleEdit}
                       onWikilinkClick={handleWikilinkClick}
+                      ttsStatus={ttsStatus}
+                      onTtsToggle={handleTtsToggle}
+                      onTtsStop={handleTtsStop}
+                      ttsDisabledReason={ttsDisabledReason}
                     />
                   )
                 ) : (

frontend/src/services/tts.ts

@@ -0,0 +1,39 @@
+/**
+ * ElevenLabs TTS client hitting the backend proxy.
+ */
+
+export interface TtsOptions {
+  voiceId?: string;
+  model?: string;
+  signal?: AbortSignal;
+}
+
+export async function synthesizeTts(text: string, options: TtsOptions = {}): Promise<Blob> {
+  const token = localStorage.getItem('auth_token');
+  const response = await fetch('/api/tts', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+    },
+    signal: options.signal,
+    body: JSON.stringify({
+      text,
+      voice_id: options.voiceId,
+      model: options.model,
+    }),
+  });
+
+  if (!response.ok) {
+    let message = `TTS failed (HTTP ${response.status})`;
+    try {
+      const data = await response.json();
+      message = data?.message || data?.detail?.message || message;
+    } catch {
+      // ignore parse errors
+    }
+    throw new Error(message);
+  }
+
+  return response.blob();
+}