From aebf726b5ce0c966c7140f068fd8276197e5fcf9 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Jun 2026 17:50:18 +0100
Subject: [PATCH 1/5] refac

---
 cptr/app.py                                   |   2 +
 .../lib/components/Admin/AudioSettings.svelte | 132 +++++++++
 .../src/lib/components/Admin/Settings.svelte  |  28 +-
 .../src/lib/components/GroupTabBar.svelte     |  24 +-
 cptr/frontend/src/lib/components/Icon.svelte  |   7 +
 .../src/lib/components/SettingsModal.svelte   |   5 +
 .../src/lib/components/VoiceNoteModal.svelte  | 266 ++++++++++++++++++
 cptr/frontend/src/lib/stores/audio.ts         |  21 ++
 cptr/frontend/src/lib/stores/keybindings.ts   |  14 +-
 cptr/frontend/src/routes/+layout.svelte       |  11 +
 cptr/routers/__init__.py                      |   2 +
 cptr/routers/audio.py                         |  73 +++++
 12 files changed, 567 insertions(+), 18 deletions(-)
 create mode 100644 cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
 create mode 100644 cptr/frontend/src/lib/components/VoiceNoteModal.svelte
 create mode 100644 cptr/frontend/src/lib/stores/audio.ts
 create mode 100644 cptr/routers/audio.py

diff --git a/cptr/app.py b/cptr/app.py
index 53dbea3..52bf426 100644
--- a/cptr/app.py
+++ b/cptr/app.py
@@ -7,6 +7,7 @@
 
 from cptr.routers import (
     admin_router,
+    audio_router,
     auth_router,
     automations_router,
     bridge_router,
@@ -209,6 +210,7 @@ async def get_config():
 
 # Routers
 app.include_router(admin_router)
+app.include_router(audio_router)
 app.include_router(auth_router)
 app.include_router(automations_router)
 app.include_router(bridge_router)
diff --git a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
new file mode 100644
index 0000000..d98c05f
--- /dev/null
+++ b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import ToggleSwitch from '../common/ToggleSwitch.svelte';
+	import Spinner from '../common/Spinner.svelte';
+	import { onMount } from 'svelte';
+	import { getAdminConfig, updateConfig } from '$lib/apis/admin';
+	import { t } from '$lib/i18n';
+	import { refreshAudioState } from '$lib/stores/audio';
+
+	let loading = $state(true);
+	let saving = $state(false);
+
+	// Config state
+	let voiceNotesEnabled = $state(false);
+	let transcribeEnabled = $state(true);
+	let sttBaseUrl = $state('https://api.openai.com/v1');
+	let sttApiKey = $state('');
+	let sttModel = $state('whisper-1');
+	let hasExistingKey = $state(false);
+
+	onMount(async () => {
+		try {
+			const config = await getAdminConfig();
+			voiceNotesEnabled = config['audio.voice_notes_enabled'] === true;
+			transcribeEnabled = config['audio.transcribe_enabled'] !== false;
+			sttBaseUrl = (config['audio.stt_base_url'] as string) || 'https://api.openai.com/v1';
+			sttModel = (config['audio.stt_model'] as string) || 'whisper-1';
+			hasExistingKey = !!config['audio.stt_api_key'];
+		} catch {}
+		loading = false;
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			const cfg: Record<string, unknown> = {
+				'audio.voice_notes_enabled': voiceNotesEnabled,
+				'audio.transcribe_enabled': transcribeEnabled,
+				'audio.stt_base_url': sttBaseUrl,
+				'audio.stt_model': sttModel
+			};
+			if (sttApiKey) {
+				cfg['audio.stt_api_key'] = sttApiKey;
+			}
+			await updateConfig(cfg);
+			if (sttApiKey) hasExistingKey = true;
+			toast.success($t('settings.saved'));
+			refreshAudioState();
+		} catch {
+			toast.error('Failed to save audio settings');
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+<div class="flex flex-col min-h-full">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Audio</h2>
+
+	{#if loading}
+		<div class="flex justify-center py-8"><Spinner size={16} /></div>
+	{:else}
+		<!-- Voice Notes -->
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">Voice Notes</h3>
+
+		<div class="flex flex-col gap-2.5">
+			<label class="flex items-center justify-between cursor-pointer">
+				<span class="text-xs text-gray-600 dark:text-gray-400">Enable Voice Notes</span>
+				<ToggleSwitch value={voiceNotesEnabled} onchange={(v) => { voiceNotesEnabled = v; }} />
+			</label>
+			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				Record voice memos from the "+" menu.
+			</p>
+
+			<label class="flex items-center justify-between cursor-pointer">
+				<span class="text-xs text-gray-600 dark:text-gray-400">Auto-transcribe</span>
+				<ToggleSwitch value={transcribeEnabled} onchange={(v) => { transcribeEnabled = v; }} />
+			</label>
+			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				{transcribeEnabled ? 'Recordings are transcribed to markdown via STT.' : 'Recordings are saved as audio only.'}
+			</p>
+		</div>
+
+		<!-- Speech-to-Text -->
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2 mt-5">Speech-to-Text</h3>
+
+		<div class="flex flex-col gap-2.5">
+			<div>
+				<label class="text-xs text-gray-600 dark:text-gray-400" for="stt-base-url">Base URL</label>
+				<input
+					id="stt-base-url"
+					type="text"
+					bind:value={sttBaseUrl}
+					placeholder="https://api.openai.com/v1"
+					class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+				/>
+			</div>
+			<div>
+				<label class="text-xs text-gray-600 dark:text-gray-400" for="stt-api-key">API Key</label>
+				<input
+					id="stt-api-key"
+					type="password"
+					bind:value={sttApiKey}
+					placeholder={hasExistingKey ? '••••••••' : 'sk-...'}
+					class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+				/>
+			</div>
+			<div>
+				<label class="text-xs text-gray-600 dark:text-gray-400" for="stt-model">Model</label>
+				<input
+					id="stt-model"
+					type="text"
+					bind:value={sttModel}
+					placeholder="whisper-1"
+					class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
+				/>
+			</div>
+			<p class="text-[11px] text-gray-400 dark:text-gray-600">
+				Compatible with OpenAI's audio/transcriptions API.
+			</p>
+		</div>
+
+		<!-- Save -->
+		<div class="mt-auto pt-6 flex justify-end">
+			<button
+				class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-50"
+				onclick={() => save()}
+				disabled={saving}
+			>{$t('settings.save')}</button>
+		</div>
+	{/if}
+</div>
diff --git a/cptr/frontend/src/lib/components/Admin/Settings.svelte b/cptr/frontend/src/lib/components/Admin/Settings.svelte
index bafd500..592f7c5 100644
--- a/cptr/frontend/src/lib/components/Admin/Settings.svelte
+++ b/cptr/frontend/src/lib/components/Admin/Settings.svelte
@@ -127,12 +127,12 @@
 				<p class="text-[11px] text-gray-400 dark:text-gray-600 mt-2">{$t('admin.webAutoHint')}</p>
 			{:else if provider === 'exa'}
 				<div class="mt-3">
-					<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+					<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 						>{$t('admin.webExaKey')}</label
 					>
 					<input
 						type="password"
-						class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+						class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 						placeholder="exa-..."
 						bind:value={exaKey}
 						onblur={() => saveKey('web.exa_api_key', exaKey)}
@@ -144,12 +144,12 @@
 				</div>
 			{:else if provider === 'tavily'}
 				<div class="mt-3">
-					<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+					<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 						>{$t('admin.webTavilyKey')}</label
 					>
 					<input
 						type="password"
-						class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+						class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 						placeholder="tvly-..."
 						bind:value={tavilyKey}
 						onblur={() => saveKey('web.tavily_api_key', tavilyKey)}
@@ -161,12 +161,12 @@
 				</div>
 			{:else if provider === 'brave'}
 				<div class="mt-3">
-					<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+					<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 						>{$t('admin.webBraveKey')}</label
 					>
 					<input
 						type="password"
-						class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+						class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 						placeholder="BSA..."
 						bind:value={braveKey}
 						onblur={() => saveKey('web.brave_api_key', braveKey)}
@@ -182,12 +182,12 @@
 				</p>
 			{:else if provider === 'perplexity'}
 				<div class="mt-3">
-					<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+					<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 						>{$t('admin.webPerplexityKey')}</label
 					>
 					<input
 						type="password"
-						class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+						class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 						placeholder="pplx-..."
 						bind:value={perplexityKey}
 						onblur={() => saveKey('web.perplexity_api_key', perplexityKey)}
@@ -200,12 +200,12 @@
 			{:else if provider === 'chat_completions'}
 				<div class="mt-3 space-y-3">
 					<div>
-						<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+						<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 							>{$t('admin.webCcBaseUrl')}</label
 						>
 						<input
 							type="text"
-							class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 							placeholder="https://api.perplexity.ai/v1"
 							bind:value={ccBaseUrl}
 							onblur={() => saveKey('web.chat_completions_base_url', ccBaseUrl)}
@@ -213,12 +213,12 @@
 						/>
 					</div>
 					<div>
-						<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+						<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 							>{$t('admin.webCcKey')}</label
 						>
 						<input
 							type="password"
-							class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 							placeholder="sk-..."
 							bind:value={ccKey}
 							onblur={() => saveKey('web.chat_completions_api_key', ccKey)}
@@ -226,12 +226,12 @@
 						/>
 					</div>
 					<div>
-						<label class="block text-[13px] text-gray-700 dark:text-gray-300 mb-1"
+						<label class="text-xs text-gray-600 dark:text-gray-400 mb-1"
 							>{$t('admin.webCcModel')}</label
 						>
 						<input
 							type="text"
-							class="w-full text-[13px] bg-gray-50 dark:bg-white/4 border border-gray-200 dark:border-white/8 rounded-lg px-2.5 py-1.5 outline-none text-gray-700 dark:text-gray-300 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+							class="w-full mt-1 h-7 px-2 rounded-lg text-xs bg-gray-100 dark:bg-white/6 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-white/8 outline-none focus:border-blue-400 dark:focus:border-blue-500 transition-colors"
 							placeholder="sonar-pro"
 							bind:value={ccModel}
 							onblur={() => saveKey('web.chat_completions_model', ccModel)}
diff --git a/cptr/frontend/src/lib/components/GroupTabBar.svelte b/cptr/frontend/src/lib/components/GroupTabBar.svelte
index 3db0391..546a8c4 100644
--- a/cptr/frontend/src/lib/components/GroupTabBar.svelte
+++ b/cptr/frontend/src/lib/components/GroupTabBar.svelte
@@ -21,12 +21,14 @@
 	} from '$lib/stores';
 	import { openChatTab } from '$lib/stores';
 	import { chatEnabled, streamingChatTabs } from '$lib/stores/chat';
+	import { voiceNotesEnabled, showVoiceNote } from '$lib/stores/audio';
 	import { keybindings, formatChord } from '$lib/stores/keybindings';
 	import Icon from './Icon.svelte';
 	import Spinner from './common/Spinner.svelte';
 	import DropdownMenu from './DropdownMenu.svelte';
 	import { tooltip } from '$lib/tooltip';
 	import { t } from '$lib/i18n';
+	import VoiceNoteModal from './VoiceNoteModal.svelte';
 
 	interface Props {
 		group: EditorGroup;
@@ -159,7 +161,19 @@
 			onclick: () => {
 				openTerminalTab(group.id);
 			}
-		}
+		},
+		...($voiceNotesEnabled
+			? [
+					{
+						label: 'Voice Note',
+						icon: 'microphone',
+						shortcut: formatChord($keybindings.voiceNote),
+						onclick: () => {
+							showVoiceNote.set(true);
+						}
+					}
+				]
+			: [])
 	]);
 
 	const contextMenuItems = $derived.by(() => {
@@ -391,6 +405,14 @@
 	/>
 {/if}
 
+{#if $showVoiceNote}
+	<VoiceNoteModal
+		workspace={$activeWorkspace?.path ?? ''}
+		directory={$activeWorkspace?.fileBrowserCwd ?? $activeWorkspace?.path ?? ''}
+		onclose={() => showVoiceNote.set(false)}
+	/>
+{/if}
+
 <style>
 	@reference "../../app.css";
 
diff --git a/cptr/frontend/src/lib/components/Icon.svelte b/cptr/frontend/src/lib/components/Icon.svelte
index 71b7c15..9d5f231 100644
--- a/cptr/frontend/src/lib/components/Icon.svelte
+++ b/cptr/frontend/src/lib/components/Icon.svelte
@@ -338,5 +338,12 @@
 		<path d="M13 2.04932C13 2.04932 16 6 16 12C16 18 13 21.9507 13 21.9507" />
 		<path d="M11 21.9507C11 21.9507 8 18 8 12C8 6 11 2.04932 11 2.04932" />
 		<path d="M2 12H22" />
+	{:else if name === 'microphone'}
+		<path d="M12 1C10.3431 1 9 2.34315 9 4V12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12V4C15 2.34315 13.6569 1 12 1Z" />
+		<path d="M5 10V12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12V10" />
+		<line x1="12" y1="19" x2="12" y2="23" />
+		<line x1="8" y1="23" x2="16" y2="23" />
+	{:else if name === 'stop'}
+		<rect x="6" y="6" width="12" height="12" rx="1" fill="currentColor" />
 	{/if}
 </svg>
diff --git a/cptr/frontend/src/lib/components/SettingsModal.svelte b/cptr/frontend/src/lib/components/SettingsModal.svelte
index 4dc97fa..6b96a6a 100644
--- a/cptr/frontend/src/lib/components/SettingsModal.svelte
+++ b/cptr/frontend/src/lib/components/SettingsModal.svelte
@@ -10,6 +10,7 @@
 	import Connections from './Admin/Connections.svelte';
 	import Models from './Admin/Models.svelte';
 	import Messaging from './Admin/Messaging.svelte';
+	import AudioSettings from './Admin/AudioSettings.svelte';
 	import AdminSettings from './Admin/Settings.svelte';
 	import { session } from '$lib/session';
 	import { t } from '$lib/i18n';
@@ -24,6 +25,7 @@
 		| 'connections'
 		| 'models'
 		| 'messaging'
+		| 'audio'
 		| 'admin_settings';
 
 	interface Props {
@@ -49,6 +51,7 @@
 		{ id: 'connections', label: $t('admin.connections'), icon: 'plug' },
 		{ id: 'models', label: $t('admin.models'), icon: 'cube' },
 		{ id: 'messaging', label: $t('admin.messaging'), icon: 'chat-bubble' },
+		{ id: 'audio', label: 'Audio', icon: 'microphone' },
 		{ id: 'browser', label: 'Browser', icon: 'browser' },
 		{ id: 'admin_settings', label: $t('settings.configuration'), icon: 'shield' }
 	]);
@@ -123,6 +126,8 @@
 			<Models />
 		{:else if activeTab === 'messaging'}
 			<Messaging />
+		{:else if activeTab === 'audio'}
+			<AudioSettings />
 		{:else if activeTab === 'admin_settings'}
 			<AdminSettings />
 		{/if}
diff --git a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
new file mode 100644
index 0000000..92b78c0
--- /dev/null
+++ b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import { toast } from 'svelte-sonner';
+	import Modal from './Modal.svelte';
+	import Spinner from './common/Spinner.svelte';
+	import Icon from './Icon.svelte';
+	import { writeFile } from '$lib/apis/files';
+	import { fetchJSON } from '$lib/apis';
+	import { transcribeEnabled } from '$lib/stores/audio';
+
+	interface Props {
+		workspace: string;
+		directory: string;
+		onclose: () => void;
+	}
+
+	let { workspace, directory, onclose }: Props = $props();
+
+	type Phase = 'recording' | 'processing' | 'naming' | 'done';
+	let phase = $state<Phase>('recording');
+	let elapsed = $state(0);
+	let transcript = $state('');
+	let fileName = $state('');
+	let audioBlob = $state<Blob | null>(null);
+
+	let waveformBars = $state<number[]>(new Array(24).fill(2));
+
+	let mediaRecorder: MediaRecorder | null = null;
+	let audioContext: AudioContext | null = null;
+	let analyser: AnalyserNode | null = null;
+	let animFrame = 0;
+	let timerInterval = 0;
+	let chunks: Blob[] = [];
+	let filenameInput: HTMLInputElement | undefined = $state();
+
+	// ── IndexedDB ───────────────────────────────────────────────
+
+	const IDB_NAME = 'cptr-voice-notes';
+	const IDB_STORE = 'pending';
+
+	function openIDB(): Promise<IDBDatabase> {
+		return new Promise((resolve, reject) => {
+			const req = indexedDB.open(IDB_NAME, 1);
+			req.onupgradeneeded = () => req.result.createObjectStore(IDB_STORE, { keyPath: 'id' });
+			req.onsuccess = () => resolve(req.result);
+			req.onerror = () => reject(req.error);
+		});
+	}
+
+	async function saveToIDB(id: string, blob: Blob) {
+		const db = await openIDB();
+		const tx = db.transaction(IDB_STORE, 'readwrite');
+		tx.objectStore(IDB_STORE).put({ id, blob, directory, createdAt: Date.now() });
+		return new Promise<void>((r, j) => { tx.oncomplete = () => r(); tx.onerror = () => j(tx.error); });
+	}
+
+	async function clearFromIDB(id: string) {
+		const db = await openIDB();
+		db.transaction(IDB_STORE, 'readwrite').objectStore(IDB_STORE).delete(id);
+	}
+
+	// ── Helpers ──────────────────────────────────────────────────
+
+	function generateId(): string {
+		const d = new Date();
+		const p = (n: number) => n.toString().padStart(2, '0');
+		return `recording-${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`;
+	}
+
+	function fmt(s: number): string {
+		return `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+	}
+
+	function mimeType(): string {
+		for (const t of ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg'])
+			if (MediaRecorder.isTypeSupported(t)) return t;
+		return 'audio/webm';
+	}
+
+	function ext(blob: Blob): string {
+		return blob.type.includes('mp4') ? 'mp4' : blob.type.includes('ogg') ? 'ogg' : 'webm';
+	}
+
+	// ── Recording ───────────────────────────────────────────────
+
+	async function startRecording() {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+			audioContext = new AudioContext();
+			analyser = audioContext.createAnalyser();
+			analyser.fftSize = 64;
+			audioContext.createMediaStreamSource(stream).connect(analyser);
+
+			const buf = new Uint8Array(analyser.frequencyBinCount);
+			const tick = () => {
+				if (!analyser) return;
+				analyser.getByteFrequencyData(buf);
+				waveformBars = Array.from({ length: 24 }, (_, i) =>
+					Math.max(2, (buf[Math.floor((i / 24) * buf.length)] / 255) * 24)
+				);
+				animFrame = requestAnimationFrame(tick);
+			};
+			tick();
+
+			chunks = [];
+			mediaRecorder = new MediaRecorder(stream, { mimeType: mimeType() });
+			mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
+			mediaRecorder.onstop = () => {
+				audioBlob = new Blob(chunks, { type: mediaRecorder?.mimeType || 'audio/webm' });
+				stream.getTracks().forEach((t) => t.stop());
+				cancelAnimationFrame(animFrame);
+				audioContext?.close();
+				handleComplete();
+			};
+			mediaRecorder.start(250);
+			elapsed = 0;
+			timerInterval = window.setInterval(() => elapsed++, 1000);
+		} catch {
+			toast.error('Could not access microphone');
+			onclose();
+		}
+	}
+
+	function stop() {
+		if (timerInterval) clearInterval(timerInterval);
+		if (mediaRecorder?.state !== 'inactive') mediaRecorder?.stop();
+	}
+
+	function cancel() { stop(); onclose(); }
+
+	// ── Save-first flow ─────────────────────────────────────────
+
+	async function handleComplete() {
+		if (!audioBlob) return;
+		const id = generateId();
+		fileName = id;
+		phase = 'processing';
+
+		// 1. IndexedDB safety
+		try { await saveToIDB(id, audioBlob); } catch {}
+
+		// 2. Upload audio
+		const audioName = `${id}.${ext(audioBlob)}`;
+		const form = new FormData();
+		form.append('directory', directory);
+		form.append('file', new File([audioBlob], audioName, { type: audioBlob.type }));
+		try {
+			await fetchJSON('/api/workspace/files/upload', { method: 'POST', body: form });
+			await clearFromIDB(id).catch(() => {});
+		} catch {
+			toast.error('Audio saved locally. Server upload failed.');
+		}
+
+		// 3. Transcribe (if enabled)
+		if (get(transcribeEnabled)) {
+			try {
+				const tf = new FormData();
+				tf.append('file', new File([audioBlob], audioName, { type: audioBlob.type }));
+				const res = await fetchJSON<{ text: string }>('/api/audio/transcribe', { method: 'POST', body: tf });
+				transcript = res.text || '';
+			} catch (err: any) {
+				transcript = '';
+				const msg = err?.message || '';
+				if (msg.includes('not configured')) {
+					toast.error('STT not configured. Set up in Settings → Audio.');
+				}
+			}
+		}
+
+		phase = 'naming';
+		await new Promise((r) => setTimeout(r, 50));
+		filenameInput?.focus();
+		filenameInput?.select();
+	}
+
+	async function save() {
+		if (!fileName.trim()) return;
+		const n = fileName.trim();
+		const audioFile = `${n}.${ext(audioBlob!)}`;
+		const mdPath = `${directory}/${n}.md`;
+		const date = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+		let md = `# ${date}\n\n*${fmt(elapsed)}*\n\n`;
+		if (transcript) md += `${transcript}\n\n`;
+		md += `---\n[🔊 ${audioFile}](${audioFile})\n`;
+
+		try {
+			await writeFile(mdPath, md);
+			phase = 'done';
+			setTimeout(onclose, 500);
+		} catch {
+			toast.error('Failed to write transcript. Audio is safe.');
+		}
+	}
+
+	onMount(() => {
+		startRecording();
+		return () => {
+			if (timerInterval) clearInterval(timerInterval);
+			cancelAnimationFrame(animFrame);
+			if (mediaRecorder?.state !== 'inactive') mediaRecorder?.stop();
+			audioContext?.close().catch(() => {});
+		};
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<Modal onclose={phase === 'recording' ? cancel : onclose} class="w-full max-w-xs mx-4">
+	<div
+		class="p-4"
+		onkeydown={(e) => { if (phase === 'naming' && e.key === 'Enter') { e.preventDefault(); save(); } }}
+	>
+		{#if phase === 'recording'}
+			<div class="flex items-end justify-center gap-[2px] h-6">
+				{#each waveformBars as h}
+					<div class="w-[3px] rounded-full bg-gray-400 dark:bg-gray-500 transition-all duration-75" style="height: {h}px"></div>
+				{/each}
+			</div>
+
+			<div class="flex items-center justify-between mt-3">
+				<span class="text-[13px] font-mono text-gray-600 dark:text-gray-400 tabular-nums">{fmt(elapsed)}</span>
+				<div class="flex items-center gap-3">
+					<button class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors" onclick={cancel}>Cancel</button>
+					<button class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" onclick={stop}>Stop →</button>
+				</div>
+			</div>
+
+		{:else if phase === 'processing'}
+			<div class="flex items-center gap-2">
+				<Spinner size={12} />
+				<span class="text-[13px] text-gray-500 dark:text-gray-400">Processing…</span>
+			</div>
+
+		{:else if phase === 'naming'}
+			{#if transcript}
+				<p class="text-[13px] text-gray-500 dark:text-gray-400 line-clamp-2 mb-2">
+					{transcript.slice(0, 160)}{transcript.length > 160 ? '…' : ''}
+				</p>
+			{/if}
+
+			<label class="text-[10px] text-gray-400 dark:text-gray-600">Filename</label>
+			<input
+				bind:this={filenameInput}
+				type="text"
+				bind:value={fileName}
+				placeholder="recording-name"
+				autocomplete="off"
+				spellcheck="false"
+				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
+			/>
+			<p class="text-[10px] text-gray-300 dark:text-gray-700 mt-0.5">{directory.split('/').pop()}</p>
+
+			<div class="flex items-center justify-end mt-3">
+				<button
+					onclick={save}
+					disabled={!fileName.trim()}
+					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
+				>Save →</button>
+			</div>
+
+		{:else if phase === 'done'}
+			<p class="text-[13px] text-gray-500 dark:text-gray-400">Saved ✓</p>
+		{/if}
+	</div>
+</Modal>
diff --git a/cptr/frontend/src/lib/stores/audio.ts b/cptr/frontend/src/lib/stores/audio.ts
new file mode 100644
index 0000000..75a9966
--- /dev/null
+++ b/cptr/frontend/src/lib/stores/audio.ts
@@ -0,0 +1,21 @@
+/**
+ * Audio state: voice notes feature flag, transcription toggle, and modal visibility.
+ */
+import { writable } from 'svelte/store';
+import { fetchJSON } from '$lib/apis';
+
+export const voiceNotesEnabled = writable<boolean>(false);
+export const transcribeEnabled = writable<boolean>(true);
+export const showVoiceNote = writable<boolean>(false);
+
+export async function refreshAudioState() {
+	try {
+		const data = await fetchJSON<{ config: Record<string, unknown> }>(
+			'/api/admin/config/audio'
+		);
+		voiceNotesEnabled.set(data.config?.['audio.voice_notes_enabled'] === true);
+		transcribeEnabled.set(data.config?.['audio.transcribe_enabled'] !== false);
+	} catch {
+		voiceNotesEnabled.set(false);
+	}
+}
diff --git a/cptr/frontend/src/lib/stores/keybindings.ts b/cptr/frontend/src/lib/stores/keybindings.ts
index 7fa7dac..befe833 100644
--- a/cptr/frontend/src/lib/stores/keybindings.ts
+++ b/cptr/frontend/src/lib/stores/keybindings.ts
@@ -38,7 +38,8 @@ export const ACTION_IDS = [
 	'searchAll',
 	'openSettings',
 	'toggleSplit',
-	'toggleSidebar'
+	'toggleSidebar',
+	'voiceNote'
 ] as const;
 
 export type ActionId = (typeof ACTION_IDS)[number];
@@ -56,7 +57,8 @@ export const ACTION_LABELS: Record<ActionId, string> = {
 	searchAll: 'Search',
 	openSettings: 'Open Settings',
 	toggleSplit: 'Toggle Split',
-	toggleSidebar: 'Toggle Sidebar'
+	toggleSidebar: 'Toggle Sidebar',
+	voiceNote: 'Voice Note'
 };
 
 // ── Default bindings (browser-safe) ─────────────────────────────
@@ -72,7 +74,8 @@ export const DEFAULT_KEYBINDINGS: Record<ActionId, string> = {
 	searchAll: 'Cmd+Shift+F',
 	openSettings: 'Cmd+.',
 	toggleSplit: 'Cmd+\\',
-	toggleSidebar: 'Cmd+Shift+S'
+	toggleSidebar: 'Cmd+Shift+S',
+	voiceNote: 'Alt+R'
 };
 
 // ── Store ───────────────────────────────────────────────────────
@@ -235,6 +238,7 @@ export function executeAction(
 		toggleQuickOpen?: () => void;
 		toggleSettings?: () => void;
 		toggleSearch?: () => void;
+		toggleVoiceNote?: () => void;
 	}
 ): boolean {
 	switch (action) {
@@ -301,6 +305,10 @@ export function executeAction(
 			sidebarOpen.update((v) => !v);
 			return true;
 
+		case 'voiceNote':
+			callbacks?.toggleVoiceNote?.();
+			return true;
+
 		default:
 			return false;
 	}
diff --git a/cptr/frontend/src/routes/+layout.svelte b/cptr/frontend/src/routes/+layout.svelte
index 9c0ae91..58b17d7 100644
--- a/cptr/frontend/src/routes/+layout.svelte
+++ b/cptr/frontend/src/routes/+layout.svelte
@@ -42,6 +42,7 @@
 	import { gitStatusStore } from '$lib/stores/gitStatus.svelte';
 	import { t } from '$lib/i18n';
 	import { refreshChatState, bindGlobalChatListener } from '$lib/stores/chat';
+	import { refreshAudioState } from '$lib/stores/audio';
 
 	let { children } = $props();
 	let showSettings = $state(false);
@@ -147,6 +148,7 @@
 				authState = 'authenticated';
 				initState();
 				refreshChatState();
+				refreshAudioState();
 
 				// Check for version updates (admin only, after session is set)
 				checkForUpdates();
@@ -160,6 +162,7 @@
 			authState = 'authenticated';
 			initState();
 			refreshChatState();
+			refreshAudioState();
 		}
 	}
 
@@ -177,6 +180,7 @@
 				authState = 'authenticated';
 				initState();
 				refreshChatState();
+				refreshAudioState();
 				return;
 			}
 		} catch {}
@@ -220,6 +224,13 @@
 			},
 			toggleSearch: () => {
 				showSearch.update((v) => !v);
+			},
+			toggleVoiceNote: () => {
+				import('$lib/stores/audio').then(({ voiceNotesEnabled, showVoiceNote }) => {
+					import('svelte/store').then(({ get }) => {
+						if (get(voiceNotesEnabled)) showVoiceNote.update((v) => !v);
+					});
+				});
 			}
 		});
 	}
diff --git a/cptr/routers/__init__.py b/cptr/routers/__init__.py
index 9967f61..954a058 100644
--- a/cptr/routers/__init__.py
+++ b/cptr/routers/__init__.py
@@ -1,6 +1,7 @@
 """cptr API routers."""
 
 from cptr.routers.admin import router as admin_router
+from cptr.routers.audio import router as audio_router
 from cptr.routers.auth import router as auth_router
 from cptr.routers.automations import router as automations_router
 from cptr.routers.bridge import router as bridge_router
@@ -18,6 +19,7 @@
 
 __all__ = [
     "admin_router",
+    "audio_router",
     "auth_router",
     "automations_router",
     "bridge_router",
diff --git a/cptr/routers/audio.py b/cptr/routers/audio.py
new file mode 100644
index 0000000..fe53248
--- /dev/null
+++ b/cptr/routers/audio.py
@@ -0,0 +1,73 @@
+"""Audio router: STT transcription via Whisper-compatible API."""
+
+from __future__ import annotations
+
+import logging
+
+import httpx
+from fastapi import APIRouter, HTTPException, Request, UploadFile
+
+from cptr.models import Config
+from cptr.utils.config import _get_jwt_secret, check_access
+from cptr.utils.crypto import decrypt_key
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/api/audio", tags=["audio"])
+
+COOKIE_NAME = "cptr_session"
+
+
+def _get_user(request: Request) -> str:
+    """Extract user_id from cookie, raise 401 if not authenticated."""
+    token = request.cookies.get(COOKIE_NAME)
+    client_host = request.client.host if request.client else "127.0.0.1"
+    auth = check_access(client_host=client_host, jwt_token=token)
+    if not auth or not auth.user_id:
+        raise HTTPException(401, "authentication required")
+    return auth.user_id
+
+
+@router.post("/transcribe")
+async def transcribe(file: UploadFile, request: Request):
+    """Send audio to a Whisper-compatible STT API, return transcript text.
+
+    Reads credentials from audio.stt_* config keys (set in Admin → Audio).
+    """
+    _get_user(request)
+
+    api_key_encrypted = await Config.get("audio.stt_api_key")
+    if not api_key_encrypted:
+        raise HTTPException(
+            400,
+            "Speech-to-text not configured. Set up in Settings → Audio.",
+        )
+
+    api_key = decrypt_key(api_key_encrypted, _get_jwt_secret())
+    base_url = (await Config.get("audio.stt_base_url")) or "https://api.openai.com/v1"
+    model = (await Config.get("audio.stt_model")) or "whisper-1"
+
+    data = await file.read()
+    filename = file.filename or "audio.webm"
+    content_type = file.content_type or "audio/webm"
+
+    try:
+        async with httpx.AsyncClient(timeout=httpx.Timeout(60)) as client:
+            resp = await client.post(
+                f"{base_url}/audio/transcriptions",
+                headers={"Authorization": f"Bearer {api_key}"},
+                files={"file": (filename, data, content_type)},
+                data={"model": model},
+            )
+            resp.raise_for_status()
+    except httpx.HTTPStatusError as exc:
+        logger.warning(
+            "[transcribe] STT API error %s: %s",
+            exc.response.status_code,
+            exc.response.text[:500],
+        )
+        raise HTTPException(502, f"STT API error: {exc.response.status_code}")
+    except httpx.ConnectError:
+        raise HTTPException(502, "Could not connect to STT API")
+
+    return {"text": resp.json().get("text", "")}

From 2376583431686a50f2a7e98533c8ae0b56d75e28 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Jun 2026 17:55:28 +0100
Subject: [PATCH 2/5] refac

---
 .../src/lib/components/VoiceNoteModal.svelte  | 105 ++++++++++++------
 cptr/frontend/src/lib/stores/keybindings.ts   |   2 +-
 2 files changed, 72 insertions(+), 35 deletions(-)

diff --git a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
index 92b78c0..97944ce 100644
--- a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
+++ b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
@@ -4,7 +4,6 @@
 	import { toast } from 'svelte-sonner';
 	import Modal from './Modal.svelte';
 	import Spinner from './common/Spinner.svelte';
-	import Icon from './Icon.svelte';
 	import { writeFile } from '$lib/apis/files';
 	import { fetchJSON } from '$lib/apis';
 	import { transcribeEnabled } from '$lib/stores/audio';
@@ -24,7 +23,7 @@
 	let fileName = $state('');
 	let audioBlob = $state<Blob | null>(null);
 
-	let waveformBars = $state<number[]>(new Array(24).fill(2));
+	let waveformBars = $state<number[]>(new Array(40).fill(2));
 
 	let mediaRecorder: MediaRecorder | null = null;
 	let audioContext: AudioContext | null = null;
@@ -32,6 +31,7 @@
 	let animFrame = 0;
 	let timerInterval = 0;
 	let chunks: Blob[] = [];
+	let cancelled = false;
 	let filenameInput: HTMLInputElement | undefined = $state();
 
 	// ── IndexedDB ───────────────────────────────────────────────
@@ -52,7 +52,10 @@
 		const db = await openIDB();
 		const tx = db.transaction(IDB_STORE, 'readwrite');
 		tx.objectStore(IDB_STORE).put({ id, blob, directory, createdAt: Date.now() });
-		return new Promise<void>((r, j) => { tx.oncomplete = () => r(); tx.onerror = () => j(tx.error); });
+		return new Promise<void>((r, j) => {
+			tx.oncomplete = () => r();
+			tx.onerror = () => j(tx.error);
+		});
 	}
 
 	async function clearFromIDB(id: string) {
@@ -96,8 +99,8 @@
 			const tick = () => {
 				if (!analyser) return;
 				analyser.getByteFrequencyData(buf);
-				waveformBars = Array.from({ length: 24 }, (_, i) =>
-					Math.max(2, (buf[Math.floor((i / 24) * buf.length)] / 255) * 24)
+				waveformBars = Array.from({ length: 40 }, (_, i) =>
+					Math.max(2, (buf[Math.floor((i / 40) * buf.length)] / 255) * 20)
 				);
 				animFrame = requestAnimationFrame(tick);
 			};
@@ -105,12 +108,15 @@
 
 			chunks = [];
 			mediaRecorder = new MediaRecorder(stream, { mimeType: mimeType() });
-			mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
+			mediaRecorder.ondataavailable = (e) => {
+				if (e.data.size > 0) chunks.push(e.data);
+			};
 			mediaRecorder.onstop = () => {
-				audioBlob = new Blob(chunks, { type: mediaRecorder?.mimeType || 'audio/webm' });
 				stream.getTracks().forEach((t) => t.stop());
 				cancelAnimationFrame(animFrame);
 				audioContext?.close();
+				if (cancelled) return;
+				audioBlob = new Blob(chunks, { type: mediaRecorder?.mimeType || 'audio/webm' });
 				handleComplete();
 			};
 			mediaRecorder.start(250);
@@ -127,7 +133,11 @@
 		if (mediaRecorder?.state !== 'inactive') mediaRecorder?.stop();
 	}
 
-	function cancel() { stop(); onclose(); }
+	function cancel() {
+		cancelled = true;
+		stop();
+		onclose();
+	}
 
 	// ── Save-first flow ─────────────────────────────────────────
 
@@ -138,7 +148,9 @@
 		phase = 'processing';
 
 		// 1. IndexedDB safety
-		try { await saveToIDB(id, audioBlob); } catch {}
+		try {
+			await saveToIDB(id, audioBlob);
+		} catch {}
 
 		// 2. Upload audio
 		const audioName = `${id}.${ext(audioBlob)}`;
@@ -157,7 +169,10 @@
 			try {
 				const tf = new FormData();
 				tf.append('file', new File([audioBlob], audioName, { type: audioBlob.type }));
-				const res = await fetchJSON<{ text: string }>('/api/audio/transcribe', { method: 'POST', body: tf });
+				const res = await fetchJSON<{ text: string }>('/api/audio/transcribe', {
+					method: 'POST',
+					body: tf
+				});
 				transcript = res.text || '';
 			} catch (err: any) {
 				transcript = '';
@@ -179,7 +194,13 @@
 		const n = fileName.trim();
 		const audioFile = `${n}.${ext(audioBlob!)}`;
 		const mdPath = `${directory}/${n}.md`;
-		const date = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+		const date = new Date().toLocaleDateString('en-US', {
+			month: 'short',
+			day: 'numeric',
+			year: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit'
+		});
 
 		let md = `# ${date}\n\n*${fmt(elapsed)}*\n\n`;
 		if (transcript) md += `${transcript}\n\n`;
@@ -206,36 +227,50 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<Modal onclose={phase === 'recording' ? cancel : onclose} class="w-full max-w-xs mx-4">
+<Modal onclose={phase === 'recording' ? cancel : onclose} class="w-full max-w-[260px] mx-4">
 	<div
-		class="p-4"
-		onkeydown={(e) => { if (phase === 'naming' && e.key === 'Enter') { e.preventDefault(); save(); } }}
+		class="px-4 py-3.5"
+		onkeydown={(e) => {
+			if (phase === 'naming' && e.key === 'Enter') {
+				e.preventDefault();
+				save();
+			}
+		}}
 	>
 		{#if phase === 'recording'}
-			<div class="flex items-end justify-center gap-[2px] h-6">
-				{#each waveformBars as h}
-					<div class="w-[3px] rounded-full bg-gray-400 dark:bg-gray-500 transition-all duration-75" style="height: {h}px"></div>
-				{/each}
-			</div>
-
-			<div class="flex items-center justify-between mt-3">
-				<span class="text-[13px] font-mono text-gray-600 dark:text-gray-400 tabular-nums">{fmt(elapsed)}</span>
-				<div class="flex items-center gap-3">
-					<button class="text-[11px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors" onclick={cancel}>Cancel</button>
-					<button class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors" onclick={stop}>Stop →</button>
+			<div class="flex items-center gap-2.5">
+				<div class="flex items-end gap-px h-4 flex-1">
+					{#each waveformBars as h}
+						<div
+							class="flex-1 rounded-full bg-gray-300 dark:bg-gray-700 transition-all duration-75"
+							style="height: {h}px"
+						></div>
+					{/each}
 				</div>
+				<span class="text-xs font-mono text-gray-400 dark:text-gray-600 tabular-nums shrink-0"
+					>{fmt(elapsed)}</span
+				>
 			</div>
 
+			<div class="flex items-center justify-end gap-3 mt-3">
+				<button
+					class="text-[13px] text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
+					onclick={cancel}>Cancel</button
+				>
+				<button
+					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100"
+					onclick={stop}>Done →</button
+				>
+			</div>
 		{:else if phase === 'processing'}
 			<div class="flex items-center gap-2">
 				<Spinner size={12} />
-				<span class="text-[13px] text-gray-500 dark:text-gray-400">Processing…</span>
+				<span class="text-xs text-gray-400 dark:text-gray-600">Processing…</span>
 			</div>
-
 		{:else if phase === 'naming'}
 			{#if transcript}
-				<p class="text-[13px] text-gray-500 dark:text-gray-400 line-clamp-2 mb-2">
-					{transcript.slice(0, 160)}{transcript.length > 160 ? '…' : ''}
+				<p class="text-xs text-gray-400 dark:text-gray-600 line-clamp-2 mb-2">
+					{transcript.slice(0, 140)}{transcript.length > 140 ? '…' : ''}
 				</p>
 			{/if}
 
@@ -249,18 +284,20 @@
 				spellcheck="false"
 				class="block w-full bg-transparent text-[13px] text-gray-700 dark:text-gray-300 placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none py-0.5"
 			/>
-			<p class="text-[10px] text-gray-300 dark:text-gray-700 mt-0.5">{directory.split('/').pop()}</p>
+			<p class="text-[10px] text-gray-300 dark:text-gray-700 mt-0.5">
+				{directory.split('/').pop()}
+			</p>
 
-			<div class="flex items-center justify-end mt-3">
+			<div class="flex justify-end mt-3">
 				<button
 					onclick={save}
 					disabled={!fileName.trim()}
 					class="text-[13px] text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-100 disabled:opacity-30 disabled:pointer-events-none"
-				>Save →</button>
+					>Save →</button
+				>
 			</div>
-
 		{:else if phase === 'done'}
-			<p class="text-[13px] text-gray-500 dark:text-gray-400">Saved ✓</p>
+			<p class="text-xs text-gray-400 dark:text-gray-600">Saved ✓</p>
 		{/if}
 	</div>
 </Modal>
diff --git a/cptr/frontend/src/lib/stores/keybindings.ts b/cptr/frontend/src/lib/stores/keybindings.ts
index befe833..47dccdd 100644
--- a/cptr/frontend/src/lib/stores/keybindings.ts
+++ b/cptr/frontend/src/lib/stores/keybindings.ts
@@ -75,7 +75,7 @@ export const DEFAULT_KEYBINDINGS: Record<ActionId, string> = {
 	openSettings: 'Cmd+.',
 	toggleSplit: 'Cmd+\\',
 	toggleSidebar: 'Cmd+Shift+S',
-	voiceNote: 'Alt+R'
+	voiceNote: 'Cmd+Shift+M'
 };
 
 // ── Store ───────────────────────────────────────────────────────

From daa5554c0efdc5320d64babc37f8d0322075e1aa Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Jun 2026 17:56:46 +0100
Subject: [PATCH 3/5] refac

---
 cptr/frontend/src/lib/components/VoiceNoteModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
index 97944ce..bf5c448 100644
--- a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
+++ b/cptr/frontend/src/lib/components/VoiceNoteModal.svelte
@@ -238,7 +238,7 @@
 		}}
 	>
 		{#if phase === 'recording'}
-			<div class="flex items-center gap-2.5">
+			<div class="flex items-center gap-2.5 mt-0.5">
 				<div class="flex items-end gap-px h-4 flex-1">
 					{#each waveformBars as h}
 						<div

From 7f4a05373ddb09bfc71e195fe0d3a1f5e276511d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Jun 2026 18:07:24 +0100
Subject: [PATCH 4/5] refac

---
 CHANGELOG.md                                  |  11 ++
 cptr/frontend/package.json                    |   2 +-
 .../lib/components/Admin/AudioSettings.svelte |  12 +-
 .../src/lib/components/GroupTabBar.svelte     |  18 +-
 ...NoteModal.svelte => VoiceMemoModal.svelte} |   0
 cptr/frontend/src/lib/stores/audio.ts         |  10 +-
 cptr/frontend/src/lib/stores/keybindings.ts   |  12 +-
 cptr/frontend/src/routes/+layout.svelte       |   6 +-
 cptr/routers/audio.py                         | 183 ++++++++++++++++--
 pyproject.toml                                |   2 +-
 10 files changed, 207 insertions(+), 49 deletions(-)
 rename cptr/frontend/src/lib/components/{VoiceNoteModal.svelte => VoiceMemoModal.svelte} (100%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 326725b..3a7f618 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.2] - 2026-06-12
+
+### Added
+
+- 🎙️ **Voice memos.** Record audio memos directly from the "+" menu or ⌘⇧M. Recordings are saved to your workspace as audio files with an auto-generated markdown transcript. Uses a save-first architecture with IndexedDB backup so your recording is never lost, even if the network drops. Transcription is powered by any OpenAI-compatible STT API (Whisper, etc.), configurable in Settings > Audio.
+- 🔊 **Audio admin settings.** New Audio tab in admin settings with separate controls for enabling voice memos, toggling auto-transcription, and configuring STT credentials (base URL, API key, model).
+
+### Changed
+
+- 🎨 **Consistent admin input styling.** Standardized all input fields in the Configuration admin panel to match the Browser settings design. Uniform height, background, focus states, and label sizing across all admin tabs.
+
 ## [0.3.1] - 2026-06-12
 
 ### Added
diff --git a/cptr/frontend/package.json b/cptr/frontend/package.json
index 923b45b..3b44424 100644
--- a/cptr/frontend/package.json
+++ b/cptr/frontend/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "frontend",
 	"private": true,
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
diff --git a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
index d98c05f..c102200 100644
--- a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
+++ b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
@@ -11,7 +11,7 @@
 	let saving = $state(false);
 
 	// Config state
-	let voiceNotesEnabled = $state(false);
+	let voiceMemosEnabled = $state(false);
 	let transcribeEnabled = $state(true);
 	let sttBaseUrl = $state('https://api.openai.com/v1');
 	let sttApiKey = $state('');
@@ -21,7 +21,7 @@
 	onMount(async () => {
 		try {
 			const config = await getAdminConfig();
-			voiceNotesEnabled = config['audio.voice_notes_enabled'] === true;
+			voiceMemosEnabled = config['audio.voice_memos_enabled'] === true;
 			transcribeEnabled = config['audio.transcribe_enabled'] !== false;
 			sttBaseUrl = (config['audio.stt_base_url'] as string) || 'https://api.openai.com/v1';
 			sttModel = (config['audio.stt_model'] as string) || 'whisper-1';
@@ -34,7 +34,7 @@
 		saving = true;
 		try {
 			const cfg: Record<string, unknown> = {
-				'audio.voice_notes_enabled': voiceNotesEnabled,
+				'audio.voice_memos_enabled': voiceMemosEnabled,
 				'audio.transcribe_enabled': transcribeEnabled,
 				'audio.stt_base_url': sttBaseUrl,
 				'audio.stt_model': sttModel
@@ -61,12 +61,12 @@
 		<div class="flex justify-center py-8"><Spinner size={16} /></div>
 	{:else}
 		<!-- Voice Notes -->
-		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">Voice Notes</h3>
+		<h3 class="text-xs text-gray-400 dark:text-gray-600 mb-2">Voice Memos</h3>
 
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between cursor-pointer">
-				<span class="text-xs text-gray-600 dark:text-gray-400">Enable Voice Notes</span>
-				<ToggleSwitch value={voiceNotesEnabled} onchange={(v) => { voiceNotesEnabled = v; }} />
+				<span class="text-xs text-gray-600 dark:text-gray-400">Enable Voice Memos</span>
+				<ToggleSwitch value={voiceMemosEnabled} onchange={(v) => { voiceMemosEnabled = v; }} />
 			</label>
 			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
 				Record voice memos from the "+" menu.
diff --git a/cptr/frontend/src/lib/components/GroupTabBar.svelte b/cptr/frontend/src/lib/components/GroupTabBar.svelte
index 546a8c4..cf4e553 100644
--- a/cptr/frontend/src/lib/components/GroupTabBar.svelte
+++ b/cptr/frontend/src/lib/components/GroupTabBar.svelte
@@ -21,14 +21,14 @@
 	} from '$lib/stores';
 	import { openChatTab } from '$lib/stores';
 	import { chatEnabled, streamingChatTabs } from '$lib/stores/chat';
-	import { voiceNotesEnabled, showVoiceNote } from '$lib/stores/audio';
+	import { voiceMemosEnabled, showVoiceMemo } from '$lib/stores/audio';
 	import { keybindings, formatChord } from '$lib/stores/keybindings';
 	import Icon from './Icon.svelte';
 	import Spinner from './common/Spinner.svelte';
 	import DropdownMenu from './DropdownMenu.svelte';
 	import { tooltip } from '$lib/tooltip';
 	import { t } from '$lib/i18n';
-	import VoiceNoteModal from './VoiceNoteModal.svelte';
+	import VoiceMemoModal from './VoiceMemoModal.svelte';
 
 	interface Props {
 		group: EditorGroup;
@@ -162,14 +162,14 @@
 				openTerminalTab(group.id);
 			}
 		},
-		...($voiceNotesEnabled
+		...($voiceMemosEnabled
 			? [
 					{
-						label: 'Voice Note',
+						label: 'Voice Memo',
 						icon: 'microphone',
-						shortcut: formatChord($keybindings.voiceNote),
+						shortcut: formatChord($keybindings.voiceMemo),
 						onclick: () => {
-							showVoiceNote.set(true);
+							showVoiceMemo.set(true);
 						}
 					}
 				]
@@ -405,11 +405,11 @@
 	/>
 {/if}
 
-{#if $showVoiceNote}
-	<VoiceNoteModal
+{#if $showVoiceMemo}
+	<VoiceMemoModal
 		workspace={$activeWorkspace?.path ?? ''}
 		directory={$activeWorkspace?.fileBrowserCwd ?? $activeWorkspace?.path ?? ''}
-		onclose={() => showVoiceNote.set(false)}
+		onclose={() => showVoiceMemo.set(false)}
 	/>
 {/if}
 
diff --git a/cptr/frontend/src/lib/components/VoiceNoteModal.svelte b/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
similarity index 100%
rename from cptr/frontend/src/lib/components/VoiceNoteModal.svelte
rename to cptr/frontend/src/lib/components/VoiceMemoModal.svelte
diff --git a/cptr/frontend/src/lib/stores/audio.ts b/cptr/frontend/src/lib/stores/audio.ts
index 75a9966..2a1f268 100644
--- a/cptr/frontend/src/lib/stores/audio.ts
+++ b/cptr/frontend/src/lib/stores/audio.ts
@@ -1,21 +1,21 @@
 /**
- * Audio state: voice notes feature flag, transcription toggle, and modal visibility.
+ * Audio state: voice memos feature flag, transcription toggle, and modal visibility.
  */
 import { writable } from 'svelte/store';
 import { fetchJSON } from '$lib/apis';
 
-export const voiceNotesEnabled = writable<boolean>(false);
+export const voiceMemosEnabled = writable<boolean>(false);
 export const transcribeEnabled = writable<boolean>(true);
-export const showVoiceNote = writable<boolean>(false);
+export const showVoiceMemo = writable<boolean>(false);
 
 export async function refreshAudioState() {
 	try {
 		const data = await fetchJSON<{ config: Record<string, unknown> }>(
 			'/api/admin/config/audio'
 		);
-		voiceNotesEnabled.set(data.config?.['audio.voice_notes_enabled'] === true);
+		voiceMemosEnabled.set(data.config?.['audio.voice_memos_enabled'] === true);
 		transcribeEnabled.set(data.config?.['audio.transcribe_enabled'] !== false);
 	} catch {
-		voiceNotesEnabled.set(false);
+		voiceMemosEnabled.set(false);
 	}
 }
diff --git a/cptr/frontend/src/lib/stores/keybindings.ts b/cptr/frontend/src/lib/stores/keybindings.ts
index 47dccdd..b09a04b 100644
--- a/cptr/frontend/src/lib/stores/keybindings.ts
+++ b/cptr/frontend/src/lib/stores/keybindings.ts
@@ -39,7 +39,7 @@ export const ACTION_IDS = [
 	'openSettings',
 	'toggleSplit',
 	'toggleSidebar',
-	'voiceNote'
+	'voiceMemo'
 ] as const;
 
 export type ActionId = (typeof ACTION_IDS)[number];
@@ -58,7 +58,7 @@ export const ACTION_LABELS: Record<ActionId, string> = {
 	openSettings: 'Open Settings',
 	toggleSplit: 'Toggle Split',
 	toggleSidebar: 'Toggle Sidebar',
-	voiceNote: 'Voice Note'
+	voiceMemo: 'Voice Memo'
 };
 
 // ── Default bindings (browser-safe) ─────────────────────────────
@@ -75,7 +75,7 @@ export const DEFAULT_KEYBINDINGS: Record<ActionId, string> = {
 	openSettings: 'Cmd+.',
 	toggleSplit: 'Cmd+\\',
 	toggleSidebar: 'Cmd+Shift+S',
-	voiceNote: 'Cmd+Shift+M'
+	voiceMemo: 'Cmd+Shift+M'
 };
 
 // ── Store ───────────────────────────────────────────────────────
@@ -238,7 +238,7 @@ export function executeAction(
 		toggleQuickOpen?: () => void;
 		toggleSettings?: () => void;
 		toggleSearch?: () => void;
-		toggleVoiceNote?: () => void;
+		toggleVoiceMemo?: () => void;
 	}
 ): boolean {
 	switch (action) {
@@ -305,8 +305,8 @@ export function executeAction(
 			sidebarOpen.update((v) => !v);
 			return true;
 
-		case 'voiceNote':
-			callbacks?.toggleVoiceNote?.();
+		case 'voiceMemo':
+			callbacks?.toggleVoiceMemo?.();
 			return true;
 
 		default:
diff --git a/cptr/frontend/src/routes/+layout.svelte b/cptr/frontend/src/routes/+layout.svelte
index 58b17d7..9573a42 100644
--- a/cptr/frontend/src/routes/+layout.svelte
+++ b/cptr/frontend/src/routes/+layout.svelte
@@ -225,10 +225,10 @@
 			toggleSearch: () => {
 				showSearch.update((v) => !v);
 			},
-			toggleVoiceNote: () => {
-				import('$lib/stores/audio').then(({ voiceNotesEnabled, showVoiceNote }) => {
+			toggleVoiceMemo: () => {
+				import('$lib/stores/audio').then(({ voiceMemosEnabled, showVoiceMemo }) => {
 					import('svelte/store').then(({ get }) => {
-						if (get(voiceNotesEnabled)) showVoiceNote.update((v) => !v);
+						if (get(voiceMemosEnabled)) showVoiceMemo.update((v) => !v);
 					});
 				});
 			}
diff --git a/cptr/routers/audio.py b/cptr/routers/audio.py
index fe53248..7f4e914 100644
--- a/cptr/routers/audio.py
+++ b/cptr/routers/audio.py
@@ -1,8 +1,16 @@
-"""Audio router: STT transcription via Whisper-compatible API."""
+"""Audio router: STT transcription via Whisper-compatible API.
+
+Supports optional pydub/ffmpeg for compressing and splitting long recordings.
+If pydub is not installed, raw audio is sent directly (works for < 25MB files).
+"""
 
 from __future__ import annotations
 
+import asyncio
 import logging
+import os
+import tempfile
+from pathlib import Path
 
 import httpx
 from fastapi import APIRouter, HTTPException, Request, UploadFile
@@ -13,9 +21,18 @@
 
 logger = logging.getLogger(__name__)
 
+# Optional pydub for long audio handling
+try:
+    from pydub import AudioSegment  # type: ignore[import-untyped]
+
+    HAS_PYDUB = True
+except ImportError:
+    HAS_PYDUB = False
+
 router = APIRouter(prefix="/api/audio", tags=["audio"])
 
 COOKIE_NAME = "cptr_session"
+MAX_FILE_SIZE = 25 * 1024 * 1024  # 25MB Whisper API limit
 
 
 def _get_user(request: Request) -> str:
@@ -28,11 +45,96 @@ def _get_user(request: Request) -> str:
     return auth.user_id
 
 
+# ── Audio processing (optional, requires pydub + ffmpeg) ─────────
+
+
+def compress_audio(file_path: str) -> str:
+    """Compress audio to 16kHz mono 32kbps MP3 if larger than MAX_FILE_SIZE."""
+    if not HAS_PYDUB or os.path.getsize(file_path) <= MAX_FILE_SIZE:
+        return file_path
+
+    audio = AudioSegment.from_file(file_path)
+    audio = audio.set_frame_rate(16000).set_channels(1)
+
+    base, _ = os.path.splitext(file_path)
+    compressed_path = f"{base}_compressed.mp3"
+    audio.export(compressed_path, format="mp3", bitrate="32k")
+    return compressed_path
+
+
+def split_audio(file_path: str, max_bytes: int) -> list[str]:
+    """Split audio into chunks not exceeding max_bytes.
+
+    Returns a list of chunk file paths. If audio fits, returns [file_path].
+    """
+    file_size = os.path.getsize(file_path)
+    if file_size <= max_bytes:
+        return [file_path]
+
+    if not HAS_PYDUB:
+        return [file_path]  # Can't split without pydub
+
+    audio = AudioSegment.from_file(file_path)
+    duration_ms = len(audio)
+
+    approx_chunk_ms = max(int(duration_ms * (max_bytes / file_size)) - 1000, 1000)
+    chunks: list[str] = []
+    start = 0
+    i = 0
+    base, _ = os.path.splitext(file_path)
+
+    while start < duration_ms:
+        end = min(start + approx_chunk_ms, duration_ms)
+        chunk = audio[start:end]
+        chunk_path = f"{base}_chunk_{i}.mp3"
+        chunk.export(chunk_path, format="mp3", bitrate="32k")
+
+        # Halve chunk duration if still too large
+        while os.path.getsize(chunk_path) > max_bytes and (end - start) > 5000:
+            end = start + ((end - start) // 2)
+            chunk = audio[start:end]
+            chunk.export(chunk_path, format="mp3", bitrate="32k")
+
+        if os.path.getsize(chunk_path) > max_bytes:
+            os.remove(chunk_path)
+            raise RuntimeError("Audio chunk cannot be reduced below max file size.")
+
+        chunks.append(chunk_path)
+        start = end
+        i += 1
+
+    return chunks
+
+
+# ── Transcription ────────────────────────────────────────────────
+
+
+async def _transcribe_chunk(
+    data: bytes,
+    filename: str,
+    content_type: str,
+    base_url: str,
+    api_key: str,
+    model: str,
+) -> str:
+    """Send a single audio chunk to the STT API."""
+    async with httpx.AsyncClient(timeout=httpx.Timeout(120)) as client:
+        resp = await client.post(
+            f"{base_url}/audio/transcriptions",
+            headers={"Authorization": f"Bearer {api_key}"},
+            files={"file": (filename, data, content_type)},
+            data={"model": model},
+        )
+        resp.raise_for_status()
+    return resp.json().get("text", "")
+
+
 @router.post("/transcribe")
 async def transcribe(file: UploadFile, request: Request):
     """Send audio to a Whisper-compatible STT API, return transcript text.
 
-    Reads credentials from audio.stt_* config keys (set in Admin → Audio).
+    If pydub + ffmpeg are available and the file is large, it will be
+    compressed and split into chunks that are transcribed concurrently.
     """
     _get_user(request)
 
@@ -47,27 +149,72 @@ async def transcribe(file: UploadFile, request: Request):
     base_url = (await Config.get("audio.stt_base_url")) or "https://api.openai.com/v1"
     model = (await Config.get("audio.stt_model")) or "whisper-1"
 
-    data = await file.read()
+    raw_data = await file.read()
     filename = file.filename or "audio.webm"
     content_type = file.content_type or "audio/webm"
 
+    # Small file: send directly, no temp files needed
+    if len(raw_data) <= MAX_FILE_SIZE or not HAS_PYDUB:
+        try:
+            text = await _transcribe_chunk(raw_data, filename, content_type, base_url, api_key, model)
+            return {"text": text}
+        except httpx.HTTPStatusError as exc:
+            detail = f"STT API error: {exc.response.status_code}"
+            if len(raw_data) > MAX_FILE_SIZE and not HAS_PYDUB:
+                detail += ". Recording is too large. Install ffmpeg and pydub for automatic splitting."
+            logger.warning("[transcribe] %s: %s", detail, exc.response.text[:500])
+            raise HTTPException(502, detail)
+        except httpx.ConnectError:
+            raise HTTPException(502, "Could not connect to STT API")
+
+    # Large file: compress → split → transcribe chunks concurrently
+    tmp_dir = tempfile.mkdtemp(prefix="cptr-stt-")
+    file_path = os.path.join(tmp_dir, filename)
+    Path(file_path).write_bytes(raw_data)
+
+    chunk_paths: list[str] = []
     try:
-        async with httpx.AsyncClient(timeout=httpx.Timeout(60)) as client:
-            resp = await client.post(
-                f"{base_url}/audio/transcriptions",
-                headers={"Authorization": f"Bearer {api_key}"},
-                files={"file": (filename, data, content_type)},
-                data={"model": model},
-            )
-            resp.raise_for_status()
+        # Compress
+        compressed = await asyncio.to_thread(compress_audio, file_path)
+
+        # Split
+        chunk_paths = await asyncio.to_thread(split_audio, compressed, MAX_FILE_SIZE)
+
+        # Transcribe all chunks concurrently
+        async def _do_chunk(path: str) -> str:
+            chunk_data = await asyncio.to_thread(Path(path).read_bytes)
+            chunk_name = os.path.basename(path)
+            return await _transcribe_chunk(chunk_data, chunk_name, "audio/mpeg", base_url, api_key, model)
+
+        tasks = [_do_chunk(p) for p in chunk_paths]
+        # Use gather to preserve order (as_completed doesn't guarantee it)
+        results = await asyncio.gather(*tasks)
+
+        return {"text": " ".join(r for r in results if r)}
+
     except httpx.HTTPStatusError as exc:
-        logger.warning(
-            "[transcribe] STT API error %s: %s",
-            exc.response.status_code,
-            exc.response.text[:500],
-        )
+        logger.warning("[transcribe] STT API error %s: %s", exc.response.status_code, exc.response.text[:500])
         raise HTTPException(502, f"STT API error: {exc.response.status_code}")
     except httpx.ConnectError:
         raise HTTPException(502, "Could not connect to STT API")
-
-    return {"text": resp.json().get("text", "")}
+    except RuntimeError as exc:
+        raise HTTPException(400, str(exc))
+    finally:
+        # Clean up temp files
+        for p in chunk_paths:
+            if p != file_path and os.path.isfile(p):
+                try:
+                    os.remove(p)
+                except OSError:
+                    pass
+        # Clean up compressed file if different from original
+        if "compressed" in locals() and compressed != file_path and os.path.isfile(compressed):
+            try:
+                os.remove(compressed)
+            except OSError:
+                pass
+        try:
+            os.remove(file_path)
+            os.rmdir(tmp_dir)
+        except OSError:
+            pass
diff --git a/pyproject.toml b/pyproject.toml
index fc5c4c4..197ccec 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "cptr"
-version = "0.3.1"
+version = "0.3.2"
 description = "Your computer, from anywhere. Code, manage, and control your machine from the web."
 license = {file = "LICENSE"}
 readme = "README.md"

From f90c8594d28cce36089f0d23ee962653f530b3d0 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 12 Jun 2026 18:11:40 +0100
Subject: [PATCH 5/5] refac

---
 .../lib/components/Admin/AudioSettings.svelte | 20 +++++++++++++++++++
 .../src/lib/components/VoiceMemoModal.svelte  |  7 +++++--
 cptr/frontend/src/lib/stores/audio.ts         | 14 ++++++++++++-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
index c102200..8ae2435 100644
--- a/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
+++ b/cptr/frontend/src/lib/components/Admin/AudioSettings.svelte
@@ -13,6 +13,7 @@
 	// Config state
 	let voiceMemosEnabled = $state(false);
 	let transcribeEnabled = $state(true);
+	let quality = $state<'high' | 'medium' | 'low'>('high');
 	let sttBaseUrl = $state('https://api.openai.com/v1');
 	let sttApiKey = $state('');
 	let sttModel = $state('whisper-1');
@@ -23,6 +24,9 @@
 			const config = await getAdminConfig();
 			voiceMemosEnabled = config['audio.voice_memos_enabled'] === true;
 			transcribeEnabled = config['audio.transcribe_enabled'] !== false;
+			const q = config['audio.recording_quality'];
+			if (q === 'medium' || q === 'low') quality = q;
+			else quality = 'high';
 			sttBaseUrl = (config['audio.stt_base_url'] as string) || 'https://api.openai.com/v1';
 			sttModel = (config['audio.stt_model'] as string) || 'whisper-1';
 			hasExistingKey = !!config['audio.stt_api_key'];
@@ -36,6 +40,7 @@
 			const cfg: Record<string, unknown> = {
 				'audio.voice_memos_enabled': voiceMemosEnabled,
 				'audio.transcribe_enabled': transcribeEnabled,
+				'audio.recording_quality': quality,
 				'audio.stt_base_url': sttBaseUrl,
 				'audio.stt_model': sttModel
 			};
@@ -79,6 +84,21 @@
 			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
 				{transcribeEnabled ? 'Recordings are transcribed to markdown via STT.' : 'Recordings are saved as audio only.'}
 			</p>
+
+			<div class="flex items-center justify-between">
+				<span class="text-xs text-gray-600 dark:text-gray-400">Recording quality</span>
+				<select
+					bind:value={quality}
+					class="bg-transparent text-xs text-gray-600 dark:text-gray-400 outline-none cursor-pointer"
+				>
+					<option value="high">High (128kbps)</option>
+					<option value="medium">Medium (64kbps)</option>
+					<option value="low">Low (32kbps)</option>
+				</select>
+			</div>
+			<p class="text-[11px] text-gray-400 dark:text-gray-600 -mt-1">
+				{quality === 'high' ? 'Best quality, larger files.' : quality === 'medium' ? 'Balanced quality and size.' : 'Smallest files, optimized for speech.'}
+			</p>
 		</div>
 
 		<!-- Speech-to-Text -->
diff --git a/cptr/frontend/src/lib/components/VoiceMemoModal.svelte b/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
index bf5c448..5be2c0c 100644
--- a/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
+++ b/cptr/frontend/src/lib/components/VoiceMemoModal.svelte
@@ -6,7 +6,7 @@
 	import Spinner from './common/Spinner.svelte';
 	import { writeFile } from '$lib/apis/files';
 	import { fetchJSON } from '$lib/apis';
-	import { transcribeEnabled } from '$lib/stores/audio';
+	import { transcribeEnabled, recordingQuality, QUALITY_BITRATES } from '$lib/stores/audio';
 
 	interface Props {
 		workspace: string;
@@ -107,7 +107,10 @@
 			tick();
 
 			chunks = [];
-			mediaRecorder = new MediaRecorder(stream, { mimeType: mimeType() });
+			mediaRecorder = new MediaRecorder(stream, {
+				mimeType: mimeType(),
+				audioBitsPerSecond: QUALITY_BITRATES[get(recordingQuality)]
+			});
 			mediaRecorder.ondataavailable = (e) => {
 				if (e.data.size > 0) chunks.push(e.data);
 			};
diff --git a/cptr/frontend/src/lib/stores/audio.ts b/cptr/frontend/src/lib/stores/audio.ts
index 2a1f268..80dc57a 100644
--- a/cptr/frontend/src/lib/stores/audio.ts
+++ b/cptr/frontend/src/lib/stores/audio.ts
@@ -1,11 +1,20 @@
 /**
- * Audio state: voice memos feature flag, transcription toggle, and modal visibility.
+ * Audio state: voice memos feature flag, transcription toggle, recording quality, and modal visibility.
  */
 import { writable } from 'svelte/store';
 import { fetchJSON } from '$lib/apis';
 
+export type RecordingQuality = 'high' | 'medium' | 'low';
+
+export const QUALITY_BITRATES: Record<RecordingQuality, number> = {
+	high: 128000,
+	medium: 64000,
+	low: 32000
+};
+
 export const voiceMemosEnabled = writable<boolean>(false);
 export const transcribeEnabled = writable<boolean>(true);
+export const recordingQuality = writable<RecordingQuality>('high');
 export const showVoiceMemo = writable<boolean>(false);
 
 export async function refreshAudioState() {
@@ -15,6 +24,9 @@ export async function refreshAudioState() {
 		);
 		voiceMemosEnabled.set(data.config?.['audio.voice_memos_enabled'] === true);
 		transcribeEnabled.set(data.config?.['audio.transcribe_enabled'] !== false);
+		const q = data.config?.['audio.recording_quality'];
+		if (q === 'medium' || q === 'low') recordingQuality.set(q);
+		else recordingQuality.set('high');
 	} catch {
 		voiceMemosEnabled.set(false);
 	}