put back gen files for now

- Deleted .gitkeep files from Generation, ServerSettings, VoiceProfiles, and hooks directories as they are no longer necessary.
- Updated the ProfileList component to increase bottom padding for improved layout consistency.

.bumpversion.cfg

@@ -0,0 +1,39 @@
+[bumpversion]
+current_version = 0.1.3
+commit = True
+tag = True
+tag_name = v{new_version}
+tag_message = Release v{new_version}
+message = Bump version: {current_version} → {new_version}
+
+[bumpversion:file:tauri/src-tauri/tauri.conf.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:tauri/src-tauri/Cargo.toml]
+search = version = "{current_version}"
+replace = version = "{new_version}"
+
+[bumpversion:file:package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:app/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:tauri/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:landing/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:web/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:backend/main.py]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"

CONTRIBUTING.md

@@ -321,11 +321,35 @@ Currently, testing is primarily manual. When adding tests:
 
 Releases are managed by maintainers:
 
-1. Version bump in `tauri.conf.json` and `Cargo.toml`
-2. Update CHANGELOG.md
-3. Create git tag: `git tag v0.2.0`
-4. Push tag: `git push --tags`
-5. GitHub Actions builds and releases
+1. **Bump version using bumpversion:**
+   ```bash
+   # Install bumpversion (if not already installed)
+   pip install bumpversion
+   
+   # Bump patch version (0.1.0 -> 0.1.1)
+   bumpversion patch
+   
+   # Or bump minor version (0.1.0 -> 0.2.0)
+   bumpversion minor
+   
+   # Or bump major version (0.1.0 -> 1.0.0)
+   bumpversion major
+   ```
+   
+   This automatically:
+   - Updates version numbers in all files (`tauri.conf.json`, `Cargo.toml`, all `package.json` files, `backend/main.py`)
+   - Creates a git commit with the version bump
+   - Creates a git tag (e.g., `v0.1.1`, `v0.2.0`)
+
+2. **Update CHANGELOG.md** with release notes
+
+3. **Push commits and tags:**
+   ```bash
+   git push
+   git push --tags
+   ```
+
+4. **GitHub Actions builds and releases** automatically when tags are pushed
 
 ## Troubleshooting
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/app",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": true,
   "type": "module",
   "scripts": {

app/src/App.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
-import { GenerationForm } from '@/components/Generation/GenerationForm';
+// import { GenerationForm } from '@/components/Generation/GenerationForm';
+import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
 import { HistoryTable } from '@/components/History/HistoryTable';
 import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
 import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
@@ -10,12 +11,19 @@ import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
 import ShinyText from '@/components/ShinyText';
 import { Sidebar } from '@/components/Sidebar';
 import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
-import { UpdateNotification } from '@/components/UpdateNotification';
 import { Toaster } from '@/components/ui/toaster';
 import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
-import { useRestoreActiveTasks, MODEL_DISPLAY_NAMES } from '@/lib/hooks/useRestoreActiveTasks';
-import { isMacOS, isTauri, setupWindowCloseHandler, startServer } from '@/lib/tauri';
+import { MODEL_DISPLAY_NAMES, useRestoreActiveTasks } from '@/lib/hooks/useRestoreActiveTasks';
+import {
+  isMacOS,
+  isTauri,
+  setKeepServerRunning,
+  setupWindowCloseHandler,
+  startServer,
+} from '@/lib/tauri';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
 
 // Track if server is starting to prevent duplicate starts
 let serverStarting = false;
@@ -47,10 +55,21 @@ function App() {
   const [activeTab, setActiveTab] = useState('main');
   const [serverReady, setServerReady] = useState(false);
   const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
 
   // Monitor active downloads/generations and show toasts for them
   const activeDownloads = useRestoreActiveTasks();
 
+  // Sync stored setting to Rust on startup
+  useEffect(() => {
+    if (isTauri()) {
+      const keepRunning = useServerStore.getState().keepServerRunningOnClose;
+      setKeepServerRunning(keepRunning).catch((error) => {
+        console.error('Failed to sync initial setting to Rust:', error);
+      });
+    }
+  }, []);
+
   // Setup window close handler and auto-start server when running in Tauri (production only)
   useEffect(() => {
     if (!isTauri()) {
@@ -83,8 +102,10 @@ function App() {
     console.log('Production mode: Starting bundled server...');
 
     startServer(false)
-      .then(() => {
-        console.log('Server is ready');
+      .then((serverUrl) => {
+        console.log('Server is ready at:', serverUrl);
+        // Update the server URL in the store with the dynamically assigned port
+        useServerStore.getState().setServerUrl(serverUrl);
         setServerReady(true);
         // Mark that we started the server (so we know to stop it on close)
         // @ts-expect-error - adding property to window
@@ -156,8 +177,6 @@ function App() {
 
         <main className="flex-1 ml-20 overflow-hidden flex flex-col">
           <div className="container mx-auto px-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
-            <UpdateNotification />
-
             {activeTab === 'settings' ? (
               <div className="space-y-4 overflow-y-auto flex flex-col">
                 <div className="grid gap-4 md:grid-cols-2">
@@ -180,7 +199,7 @@ function App() {
               </div>
             ) : (
               // Main view: Profiles top left, Generator bottom left, History right
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden relative">
                 {/* Left Column */}
                 <div className="flex flex-col gap-6 min-h-0 overflow-y-auto pb-32">
                   {/* Profiles - Top Left */}
@@ -189,15 +208,18 @@ function App() {
                   </div>
 
                   {/* Generator - Bottom Left */}
-                  <div className="shrink-0">
+                  {/* <div className="shrink-0">
                     <GenerationForm />
-                  </div>
+                  </div> */}
                 </div>
 
                 {/* Right Column - History */}
                 <div className="flex flex-col min-h-0 overflow-hidden">
                   <HistoryTable />
                 </div>
+
+                {/* Floating Generate Box */}
+                <FloatingGenerateBox isPlayerOpen={!!audioUrl} />
               </div>
             )}
           </div>

app/src/components/Generation/.gitkeep

@@ -1 +0,0 @@
-# Voice generation components

app/src/components/Generation/FloatingGenerateBox.tsx

@@ -0,0 +1,282 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader2, Sparkles } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { LANGUAGE_CODES, LANGUAGE_OPTIONS, type LanguageCode } from '@/lib/constants/languages';
+import { useGeneration } from '@/lib/hooks/useGeneration';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { useProfile } from '@/lib/hooks/useProfiles';
+import { useGenerationStore } from '@/stores/generationStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useUIStore } from '@/stores/uiStore';
+
+const generationSchema = z.object({
+  text: z.string().min(1, 'Text is required').max(5000),
+  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
+  modelSize: z.enum(['1.7B', '0.6B']).optional(),
+});
+
+type GenerationFormValues = z.infer<typeof generationSchema>;
+
+interface FloatingGenerateBoxProps {
+  isPlayerOpen: boolean;
+}
+
+export function FloatingGenerateBox({ isPlayerOpen }: FloatingGenerateBoxProps) {
+  const selectedProfileId = useUIStore((state) => state.selectedProfileId);
+  const { data: selectedProfile } = useProfile(selectedProfileId || '');
+  const generation = useGeneration();
+  const { toast } = useToast();
+  const setAudio = usePlayerStore((state) => state.setAudio);
+  const setIsGenerating = useGenerationStore((state) => state.setIsGenerating);
+  const [downloadingModelName, setDownloadingModelName] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useModelDownloadToast({
+    modelName: downloadingModelName || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModelName,
+  });
+
+  const form = useForm<GenerationFormValues>({
+    resolver: zodResolver(generationSchema),
+    defaultValues: {
+      text: '',
+      language: 'en',
+      modelSize: '1.7B',
+    },
+  });
+
+  // Click away handler to collapse the box
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as HTMLElement;
+
+      // Don't collapse if clicking inside the container
+      if (containerRef.current?.contains(target)) {
+        return;
+      }
+
+      // Don't collapse if clicking on a Select dropdown (which renders in a portal)
+      if (
+        target.closest('[role="listbox"]') ||
+        target.closest('[data-radix-popper-content-wrapper]')
+      ) {
+        return;
+      }
+
+      setIsExpanded(false);
+    }
+
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isExpanded]);
+
+  async function onSubmit(data: GenerationFormValues) {
+    if (!selectedProfileId) {
+      toast({
+        title: 'No profile selected',
+        description: 'Please select a voice profile from the cards above.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      setIsGenerating(true);
+
+      const modelName = `qwen-tts-${data.modelSize}`;
+      const displayName = data.modelSize === '1.7B' ? 'Qwen TTS 1.7B' : 'Qwen TTS 0.6B';
+
+      try {
+        const modelStatus = await apiClient.getModelStatus();
+        const model = modelStatus.models.find((m) => m.model_name === modelName);
+
+        if (model && !model.downloaded) {
+          setDownloadingModelName(modelName);
+          setDownloadingDisplayName(displayName);
+        }
+      } catch (error) {
+        console.error('Failed to check model status:', error);
+      }
+
+      const result = await generation.mutateAsync({
+        profile_id: selectedProfileId,
+        text: data.text,
+        language: data.language,
+        model_size: data.modelSize,
+      });
+
+      toast({
+        title: 'Generation complete!',
+        description: `Audio generated (${result.duration.toFixed(2)}s)`,
+      });
+
+      const audioUrl = apiClient.getAudioUrl(result.id);
+      setAudio(audioUrl, result.id, data.text.substring(0, 50));
+
+      form.reset();
+      setIsExpanded(false);
+    } catch (error) {
+      toast({
+        title: 'Generation failed',
+        description: error instanceof Error ? error.message : 'Failed to generate audio',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsGenerating(false);
+      setDownloadingModelName(null);
+      setDownloadingDisplayName(null);
+    }
+  }
+
+  return (
+    <motion.div
+      ref={containerRef}
+      className="fixed left-[calc(5rem+2rem)] right-auto w-[calc((100%-5rem-4rem)/2-1rem)]"
+      style={{
+        bottom: isPlayerOpen ? 'calc(7rem + 1.5rem)' : '1.5rem',
+      }}
+    >
+      <motion.div
+        className="bg-background/30 backdrop-blur-2xl border border-accent/20 rounded-[2rem] shadow-2xl hover:bg-background/40 hover:border-accent/20 transition-all duration-300 overflow-hidden p-3"
+        transition={{ duration: 0.6, ease: 'easeInOut' }}
+      >
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex gap-2">
+              <motion.div
+                className="flex-1"
+                // animate={{ marginBottom: isExpanded ? '0.75rem' : '0' }}
+                transition={{ duration: 0.3, ease: 'easeOut' }}
+              >
+                <FormField
+                  control={form.control}
+                  name="text"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Textarea
+                          placeholder={
+                            selectedProfile
+                              ? `Generate speech using ${selectedProfile.name}...`
+                              : 'Select a voice profile above...'
+                          }
+                          className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 overflow-hidden transition-all"
+                          style={{
+                            minHeight: isExpanded ? '100px' : '32px',
+                            height: isExpanded ? '100px' : '32px',
+                          }}
+                          disabled={!selectedProfileId}
+                          onClick={() => setIsExpanded(true)}
+                          onFocus={() => setIsExpanded(true)}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage className="text-xs" />
+                    </FormItem>
+                  )}
+                />
+              </motion.div>
+
+              <Button
+                type="submit"
+                disabled={generation.isPending || !selectedProfileId}
+                className="h-10 w-10 rounded-full bg-accent hover:bg-accent/90 hover:scale-105 text-accent-foreground shadow-lg hover:shadow-accent/50 shrink-0 transition-all duration-200"
+                size="icon"
+              >
+                {generation.isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Sparkles className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+
+            <AnimatePresence>
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.3, ease: 'easeOut' }}
+                className=" mt-3"
+              >
+                <div className="flex items-center gap-2">
+                  <FormField
+                    control={form.control}
+                    name="language"
+                    render={({ field }) => (
+                      <FormItem className="flex-1">
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <FormControl>
+                            <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            {LANGUAGE_OPTIONS.map((lang) => (
+                              <SelectItem key={lang.value} value={lang.value} className="text-xs">
+                                {lang.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <FormMessage className="text-xs" />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="modelSize"
+                    render={({ field }) => (
+                      <FormItem className="flex-1">
+                        <Select onValueChange={field.onChange} defaultValue={field.value}>
+                          <FormControl>
+                            <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
+                              <SelectValue />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value="1.7B" className="text-xs text-muted-foreground">
+                              Qwen3-TTS 1.7B
+                            </SelectItem>
+                            <SelectItem value="0.6B" className="text-xs text-muted-foreground">
+                              Qwen3-TTS 0.6B
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage className="text-xs" />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          </form>
+        </Form>
+      </motion.div>
+    </motion.div>
+  );
+}

app/src/components/ServerSettings/.gitkeep

@@ -1 +0,0 @@
-# Server settings and connection components

app/src/components/ServerSettings/ConnectionForm.tsx

@@ -17,6 +17,7 @@ import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
 import { useToast } from '@/components/ui/use-toast';
 import { useServerStore } from '@/stores/serverStore';
+import { setKeepServerRunning } from '@/lib/tauri';
 
 const connectionSchema = z.object({
   serverUrl: z.string().url('Please enter a valid URL'),
@@ -69,7 +70,7 @@ export function ConnectionForm() {
                 <FormItem>
                   <FormLabel>Server URL</FormLabel>
                   <FormControl>
-                    <Input placeholder="http://localhost:8000" {...field} />
+                    <Input placeholder="http://127.0.0.1:17493" {...field} />
                   </FormControl>
                   <FormDescription>Enter the URL of your voicebox backend server</FormDescription>
                   <FormMessage />
@@ -88,6 +89,9 @@ export function ConnectionForm() {
               checked={keepServerRunningOnClose}
               onCheckedChange={(checked: boolean) => {
                 setKeepServerRunningOnClose(checked);
+                setKeepServerRunning(checked).catch((error) => {
+                  console.error('Failed to sync setting to Rust:', error);
+                });
                 toast({
                   title: 'Setting updated',
                   description: checked

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -8,7 +8,7 @@ import { useAutoUpdater } from '@/hooks/useAutoUpdater';
 import { getVersion } from '@tauri-apps/api/app';
 
 export function UpdateStatus() {
-  const { status, checkForUpdates, downloadAndInstall } = useAutoUpdater(false);
+  const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
   const [currentVersion, setCurrentVersion] = useState<string>('');
 
   useEffect(() => {
@@ -30,7 +30,7 @@ export function UpdateStatus() {
           </div>
           <Button
             onClick={checkForUpdates}
-            disabled={status.checking || status.downloading || status.installing}
+            disabled={status.checking || status.downloading || status.readyToInstall}
             variant="outline"
             size="sm"
           >
@@ -53,7 +53,7 @@ export function UpdateStatus() {
           </div>
         )}
 
-        {status.available && !status.downloading && !status.installing && (
+        {status.available && !status.downloading && !status.readyToInstall && (
           <div className="space-y-3 p-4 border rounded-lg bg-primary/5">
             <div className="flex items-center justify-between">
               <div>
@@ -64,28 +64,49 @@ export function UpdateStatus() {
             </div>
             <Button onClick={downloadAndInstall} className="w-full" size="sm">
               <Download className="h-4 w-4 mr-2" />
-              Install Update
+              Download Update
             </Button>
           </div>
         )}
 
         {status.downloading && (
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm">
-              <Download className="h-4 w-4" />
-              Downloading update...
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <Download className="h-4 w-4" />
+                Downloading update...
+              </div>
+              {status.downloadProgress !== undefined && (
+                <span className="text-muted-foreground">
+                  {status.downloadProgress}%
+                </span>
+              )}
             </div>
-            <Progress />
+            <Progress value={status.downloadProgress} />
+            {status.downloadedBytes !== undefined && status.totalBytes !== undefined && status.totalBytes > 0 && (
+              <div className="text-xs text-muted-foreground">
+                {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB / {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+              </div>
+            )}
           </div>
         )}
 
-        {status.installing && (
-          <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm">
-              <RefreshCw className="h-4 w-4 animate-spin" />
-              Installing update...
+        {status.readyToInstall && (
+          <div className="space-y-3 p-4 border rounded-lg bg-green-500/10 border-green-500/20">
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-5 w-5 text-green-500" />
+              <div>
+                <div className="font-semibold">Update Ready to Install</div>
+                <div className="text-sm text-muted-foreground">Version {status.version} has been downloaded</div>
+              </div>
             </div>
-            <div className="text-xs text-muted-foreground">App will restart automatically</div>
+            <div className="text-sm text-muted-foreground">
+              The app needs to restart to complete the installation. You can do this now or later at your convenience.
+            </div>
+            <Button onClick={restartAndInstall} className="w-full" size="sm">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Restart Now
+            </Button>
           </div>
         )}
 

app/src/components/UpdateNotification.tsx

@@ -1,69 +0,0 @@
-import { useAutoUpdater } from '../hooks/useAutoUpdater';
-import { Button } from './ui/button';
-import { Card } from './ui/card';
-import { Progress } from './ui/progress';
-
-export function UpdateNotification() {
-  const { status, checkForUpdates, downloadAndInstall } = useAutoUpdater(true);
-
-  if (status.error) {
-    return null;
-  }
-
-  if (!status.available && !status.checking) {
-    return null;
-  }
-
-  if (status.checking) {
-    return (
-      <Card className="p-4 mb-4">
-        <div className="flex items-center gap-3">
-          <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" />
-          <span className="text-sm">Checking for updates...</span>
-        </div>
-      </Card>
-    );
-  }
-
-  if (status.available) {
-    return (
-      <Card className="p-4 mb-4 border-primary">
-        <div className="space-y-3">
-          <div>
-            <h3 className="font-semibold">Update Available</h3>
-            <p className="text-sm text-muted-foreground">
-              Version {status.version} is ready to install
-            </p>
-          </div>
-
-          {status.downloading && (
-            <div className="space-y-2">
-              <p className="text-sm">Downloading update...</p>
-              <Progress />
-            </div>
-          )}
-
-          {status.installing && (
-            <div className="space-y-2">
-              <p className="text-sm">Installing update...</p>
-              <p className="text-xs text-muted-foreground">App will restart automatically</p>
-            </div>
-          )}
-
-          {!status.downloading && !status.installing && (
-            <div className="flex gap-2">
-              <Button onClick={downloadAndInstall} size="sm">
-                Install Now
-              </Button>
-              <Button onClick={() => window.location.reload()} variant="outline" size="sm">
-                Later
-              </Button>
-            </div>
-          )}
-        </div>
-      </Card>
-    );
-  }
-
-  return null;
-}

app/src/components/VoiceProfiles/.gitkeep

@@ -1 +0,0 @@
-# Voice profile management components

app/src/components/VoiceProfiles/AudioSampleRecording.tsx

@@ -0,0 +1,110 @@
+import { Mic, Pause, Play, Square } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { formatAudioDuration } from '@/lib/utils/audio';
+
+interface AudioSampleRecordingProps {
+  file: File | null | undefined;
+  isRecording: boolean;
+  duration: number;
+  onStart: () => void;
+  onStop: () => void;
+  onCancel: () => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isTranscribing?: boolean;
+}
+
+export function AudioSampleRecording({
+  file,
+  isRecording,
+  duration,
+  onStart,
+  onStop,
+  onCancel,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isTranscribing = false,
+}: AudioSampleRecordingProps) {
+  return (
+    <FormItem>
+      <FormLabel>Record Audio</FormLabel>
+      <FormControl>
+        <div className="space-y-4">
+          {!isRecording && !file && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-dashed rounded-lg min-h-[180px]">
+              <Button type="button" onClick={onStart} size="lg" className="flex items-center gap-2">
+                <Mic className="h-5 w-5" />
+                Start Recording
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                Click to start recording. Maximum duration: 30 seconds.
+              </p>
+            </div>
+          )}
+
+          {isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5 min-h-[180px]">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
+                  <span className="text-lg font-mono font-semibold">
+                    {formatAudioDuration(duration)}
+                  </span>
+                </div>
+              </div>
+              <Button
+                type="button"
+                onClick={onStop}
+                variant="destructive"
+                className="flex items-center gap-2"
+              >
+                <Square className="h-4 w-4" />
+                Stop Recording
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                {formatAudioDuration(30 - duration)} remaining
+              </p>
+            </div>
+          )}
+
+          {file && !isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5 min-h-[180px]">
+              <div className="flex items-center gap-2">
+                <Mic className="h-5 w-5 text-primary" />
+                <span className="font-medium">Recording complete</span>
+              </div>
+              <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
+              <div className="flex gap-2">
+                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
+                  {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onTranscribe}
+                  disabled={isTranscribing}
+                  className="flex items-center gap-2"
+                >
+                  <Mic className="h-4 w-4" />
+                  {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  className="flex items-center gap-2"
+                >
+                  Record Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/AudioSampleSystem.tsx

@@ -0,0 +1,110 @@
+import { Mic, Monitor, Pause, Play, Square } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { formatAudioDuration } from '@/lib/utils/audio';
+
+interface AudioSampleSystemProps {
+  file: File | null | undefined;
+  isRecording: boolean;
+  duration: number;
+  onStart: () => void;
+  onStop: () => void;
+  onCancel: () => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isTranscribing?: boolean;
+}
+
+export function AudioSampleSystem({
+  file,
+  isRecording,
+  duration,
+  onStart,
+  onStop,
+  onCancel,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isTranscribing = false,
+}: AudioSampleSystemProps) {
+  return (
+    <FormItem>
+      <FormLabel>Capture System Audio</FormLabel>
+      <FormControl>
+        <div className="space-y-4">
+          {!isRecording && !file && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-dashed rounded-lg min-h-[180px]">
+              <Button type="button" onClick={onStart} size="lg" className="flex items-center gap-2">
+                <Monitor className="h-5 w-5" />
+                Start Capture
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                Capture audio from your system. Maximum duration: 30 seconds.
+              </p>
+            </div>
+          )}
+
+          {isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5 min-h-[180px]">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
+                  <span className="text-lg font-mono font-semibold">
+                    {formatAudioDuration(duration)}
+                  </span>
+                </div>
+              </div>
+              <Button
+                type="button"
+                onClick={onStop}
+                variant="destructive"
+                className="flex items-center gap-2"
+              >
+                <Square className="h-4 w-4" />
+                Stop Capture
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                {formatAudioDuration(30 - duration)} remaining
+              </p>
+            </div>
+          )}
+
+          {file && !isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5 min-h-[180px]">
+              <div className="flex items-center gap-2">
+                <Monitor className="h-5 w-5 text-primary" />
+                <span className="font-medium">Capture complete</span>
+              </div>
+              <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
+              <div className="flex gap-2">
+                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
+                  {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onTranscribe}
+                  disabled={isTranscribing}
+                  className="flex items-center gap-2"
+                >
+                  <Mic className="h-4 w-4" />
+                  {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  className="flex items-center gap-2"
+                >
+                  Capture Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/AudioSampleUpload.tsx

@@ -0,0 +1,148 @@
+import { Mic, Pause, Play, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+
+interface AudioSampleUploadProps {
+  file: File | null | undefined;
+  onFileChange: (file: File | undefined) => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isValidating?: boolean;
+  isTranscribing?: boolean;
+  isDisabled?: boolean;
+  fieldName: string;
+}
+
+export function AudioSampleUpload({
+  file,
+  onFileChange,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isValidating = false,
+  isTranscribing = false,
+  isDisabled = false,
+  fieldName,
+}: AudioSampleUploadProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FormItem>
+      <FormLabel>Audio File</FormLabel>
+      <FormControl>
+        <div className="flex flex-col gap-2">
+          <input
+            type="file"
+            accept="audio/*"
+            name={fieldName}
+            ref={fileInputRef}
+            onChange={(e) => {
+              const selectedFile = e.target.files?.[0];
+              if (selectedFile) {
+                onFileChange(selectedFile);
+              } else {
+                onFileChange(undefined);
+              }
+            }}
+            className="hidden"
+          />
+          <div
+            role="button"
+            tabIndex={0}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const droppedFile = e.dataTransfer.files?.[0];
+              if (droppedFile?.type.startsWith('audio/')) {
+                onFileChange(droppedFile);
+              }
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                fileInputRef.current?.click();
+              }
+            }}
+            className={`flex flex-col items-center justify-center gap-4 p-4 border-2 rounded-lg transition-colors min-h-[180px] ${
+              file
+                ? 'border-primary bg-primary/5'
+                : isDragging
+                  ? 'border-primary bg-primary/5'
+                  : 'border-dashed border-muted-foreground/25 hover:border-muted-foreground/50'
+            }`}
+          >
+            {!file ? (
+              <>
+                <Button
+                  type="button"
+                  size="lg"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="flex items-center gap-2"
+                >
+                  <Upload className="h-5 w-5" />
+                  Choose File
+                </Button>
+                <p className="text-sm text-muted-foreground text-center">
+                  Click to choose a file or drag and drop. Maximum duration: 30 seconds.
+                </p>
+              </>
+            ) : (
+              <>
+                <div className="flex items-center gap-2">
+                  <Upload className="h-5 w-5 text-primary" />
+                  <span className="font-medium">File uploaded</span>
+                </div>
+                <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="outline"
+                    onClick={onPlayPause}
+                    disabled={isValidating}
+                  >
+                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onTranscribe}
+                    disabled={isTranscribing || isValidating || isDisabled}
+                    className="flex items-center gap-2"
+                  >
+                    <Mic className="h-4 w-4" />
+                    {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      onFileChange(undefined);
+                      if (fileInputRef.current) {
+                        fileInputRef.current.value = '';
+                      }
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -1,4 +1,4 @@
-import { Download, Edit, Eye, Mic, Trash2 } from 'lucide-react';
+import { Download, Edit, Mic, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -16,14 +16,12 @@ import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useDeleteProfile, useExportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
 import { useUIStore } from '@/stores/uiStore';
-import { ProfileDetail } from './ProfileDetail';
 
 interface ProfileCardProps {
   profile: VoiceProfileResponse;
 }
 
 export function ProfileCard({ profile }: ProfileCardProps) {
-  const [detailOpen, setDetailOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const deleteProfile = useDeleteProfile();
   const exportProfile = useExportProfile();
@@ -85,14 +83,6 @@ export function ProfileCard({ profile }: ProfileCardProps) {
             </Badge>
           </div>
           <div className="flex gap-0.5 justify-end items-end mt-auto">
-            <CircleButton
-              icon={Eye}
-              onClick={(e) => {
-                e.stopPropagation();
-                setDetailOpen(true);
-              }}
-              aria-label="View details"
-            />
             <CircleButton
               icon={Download}
               onClick={handleExport}
@@ -117,8 +107,6 @@ export function ProfileCard({ profile }: ProfileCardProps) {
         </CardContent>
       </Card>
 
-      <ProfileDetail profileId={profile.id} open={detailOpen} onOpenChange={setDetailOpen} />
-
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent>
           <DialogHeader>

app/src/components/VoiceProfiles/ProfileDetail.tsx

@@ -1,66 +0,0 @@
-import { Badge } from '@/components/ui/badge';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useProfile } from '@/lib/hooks/useProfiles';
-import { formatDate } from '@/lib/utils/format';
-import { SampleList } from './SampleList';
-
-interface ProfileDetailProps {
-  profileId: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function ProfileDetail({ profileId, open, onOpenChange }: ProfileDetailProps) {
-  const { data: profile, isLoading } = useProfile(profileId);
-
-  if (isLoading) {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <div className="text-muted-foreground">Loading profile...</div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  if (!profile) {
-    return null;
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{profile.name}</DialogTitle>
-          <DialogDescription>Manage samples and view profile details</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          {profile.description && (
-            <div>
-              <h3 className="text-sm font-medium mb-1">Description</h3>
-              <p className="text-sm text-muted-foreground">{profile.description}</p>
-            </div>
-          )}
-
-          <div className="flex gap-2">
-            <Badge variant="outline">{profile.language}</Badge>
-            <span className="text-xs text-muted-foreground">
-              Created {formatDate(profile.created_at)}
-            </span>
-          </div>
-
-          <div className="border-t pt-4">
-            <SampleList profileId={profileId} />
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

app/src/components/VoiceProfiles/ProfileForm.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Mic, Monitor, Upload } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
@@ -13,7 +14,6 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -27,66 +27,83 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
 import { LANGUAGE_CODES, LANGUAGE_OPTIONS, type LanguageCode } from '@/lib/constants/languages';
+import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
+import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
 import {
+  useAddSample,
   useCreateProfile,
   useProfile,
   useUpdateProfile,
-  useAddSample,
 } from '@/lib/hooks/useProfiles';
+import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
 import { useTranscription } from '@/lib/hooks/useTranscription';
-import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
-import { useUIStore } from '@/stores/uiStore';
-import { Mic, Square, Upload } from 'lucide-react';
+import { isTauri } from '@/lib/tauri';
 import { formatAudioDuration } from '@/lib/utils/audio';
+import { useUIStore } from '@/stores/uiStore';
+import { AudioSampleRecording } from './AudioSampleRecording';
+import { AudioSampleSystem } from './AudioSampleSystem';
+import { AudioSampleUpload } from './AudioSampleUpload';
+import { SampleList } from './SampleList';
 
 // Helper function to get audio duration from File
-async function getAudioDuration(file: File): Promise<number> {
+async function getAudioDuration(file: File & { recordedDuration?: number }): Promise<number> {
+  // If the file has a recordedDuration property (from our recording hooks),
+  // use that instead of trying to read metadata. This fixes issues on Windows
+  // where WebM files from MediaRecorder don't have proper duration metadata.
+  if (file.recordedDuration !== undefined && Number.isFinite(file.recordedDuration)) {
+    return file.recordedDuration;
+  }
+
   return new Promise((resolve, reject) => {
     const audio = new Audio();
     const url = URL.createObjectURL(file);
-    
+
     audio.addEventListener('loadedmetadata', () => {
       URL.revokeObjectURL(url);
-      resolve(audio.duration);
+      // Check if duration is valid (not Infinity or NaN)
+      if (Number.isFinite(audio.duration) && audio.duration > 0) {
+        resolve(audio.duration);
+      } else {
+        reject(new Error('Audio file has invalid duration metadata'));
+      }
     });
-    
+
     audio.addEventListener('error', () => {
       URL.revokeObjectURL(url);
       reject(new Error('Failed to load audio file'));
     });
-    
+
     audio.src = url;
   });
 }
 
 const MAX_AUDIO_DURATION_SECONDS = 30;
 
-const profileSchema = z
-  .object({
-    name: z.string().min(1, 'Name is required').max(100),
-    description: z.string().max(500).optional(),
-    language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
-    // Sample fields - only required when creating (not editing)
-    sampleFile: z.instanceof(File).optional(),
-    referenceText: z.string().max(1000).optional(),
-  })
-  .refine(
-    (data) => {
-      // If sample file is provided, reference text is required
-      if (data.sampleFile && (!data.referenceText || data.referenceText.trim().length === 0)) {
-        return false;
-      }
-      return true;
-    },
-    {
-      message: 'Reference text is required when adding a sample',
-      path: ['referenceText'],
-    },
-  );
+const baseProfileSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100),
+  description: z.string().max(500).optional(),
+  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
+  sampleFile: z.instanceof(File).optional(),
+  referenceText: z.string().max(1000).optional(),
+});
+
+const profileSchema = baseProfileSchema.refine(
+  (data) => {
+    // If sample file is provided, reference text is required
+    if (data.sampleFile && (!data.referenceText || data.referenceText.trim().length === 0)) {
+      return false;
+    }
+    return true;
+  },
+  {
+    message: 'Reference text is required when adding a sample',
+    path: ['referenceText'],
+  },
+);
 
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
@@ -101,9 +118,10 @@ export function ProfileForm() {
   const addSample = useAddSample();
   const transcribe = useTranscription();
   const { toast } = useToast();
-  const [sampleMode, setSampleMode] = useState<'upload' | 'record'>('upload');
+  const [sampleMode, setSampleMode] = useState<'upload' | 'record' | 'system'>('upload');
   const [audioDuration, setAudioDuration] = useState<number | null>(null);
   const [isValidatingAudio, setIsValidatingAudio] = useState(false);
+  const { isPlaying, playPause, cleanup: cleanupAudio } = useAudioPlayer();
   const isCreating = !editingProfileId;
 
   const form = useForm<ProfileFormValues>({
@@ -112,6 +130,8 @@ export function ProfileForm() {
       name: '',
       description: '',
       language: 'en',
+      sampleFile: undefined,
+      referenceText: '',
     },
   });
 
@@ -121,7 +141,7 @@ export function ProfileForm() {
   useEffect(() => {
     if (selectedFile && selectedFile instanceof File) {
       setIsValidatingAudio(true);
-      getAudioDuration(selectedFile)
+      getAudioDuration(selectedFile as File & { recordedDuration?: number })
         .then((duration) => {
           setAudioDuration(duration);
           if (duration > MAX_AUDIO_DURATION_SECONDS) {
@@ -136,10 +156,19 @@ export function ProfileForm() {
         .catch((error) => {
           console.error('Failed to get audio duration:', error);
           setAudioDuration(null);
-          form.setError('sampleFile', {
-            type: 'manual',
-            message: 'Failed to validate audio file. Please try a different file.',
-          });
+          // For recordings, we auto-stop at max duration, so we can skip validation errors
+          const isRecordedFile =
+            selectedFile.name.startsWith('recording-') ||
+            selectedFile.name.startsWith('system-audio-');
+          if (!isRecordedFile) {
+            form.setError('sampleFile', {
+              type: 'manual',
+              message: 'Failed to validate audio file. Please try a different file.',
+            });
+          } else {
+            // Clear any existing errors for recorded files
+            form.clearErrors('sampleFile');
+          }
         })
         .finally(() => {
           setIsValidatingAudio(false);
@@ -159,10 +188,14 @@ export function ProfileForm() {
     cancelRecording,
   } = useAudioRecording({
     maxDurationSeconds: 30,
-    onRecordingComplete: (blob) => {
+    onRecordingComplete: (blob, recordedDuration) => {
       const file = new File([blob], `recording-${Date.now()}.webm`, {
         type: blob.type || 'audio/webm',
-      });
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
       form.setValue('sampleFile', file, { shouldValidate: true });
       toast({
         title: 'Recording complete',
@@ -171,6 +204,32 @@ export function ProfileForm() {
     },
   });
 
+  const {
+    isRecording: isSystemRecording,
+    duration: systemDuration,
+    error: systemRecordingError,
+    isSupported: isSystemAudioSupported,
+    startRecording: startSystemRecording,
+    stopRecording: stopSystemRecording,
+    cancelRecording: cancelSystemRecording,
+  } = useSystemAudioCapture({
+    maxDurationSeconds: 30,
+    onRecordingComplete: (blob, recordedDuration) => {
+      const file = new File([blob], `system-audio-${Date.now()}.wav`, {
+        type: blob.type || 'audio/wav',
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
+      form.setValue('sampleFile', file, { shouldValidate: true });
+      toast({
+        title: 'System audio captured',
+        description: 'Audio has been captured successfully.',
+      });
+    },
+  });
+
   // Show recording errors
   useEffect(() => {
     if (recordingError) {
@@ -182,6 +241,17 @@ export function ProfileForm() {
     }
   }, [recordingError, toast]);
 
+  // Show system audio recording errors
+  useEffect(() => {
+    if (systemRecordingError) {
+      toast({
+        title: 'System audio capture error',
+        description: systemRecordingError,
+        variant: 'destructive',
+      });
+    }
+  }, [systemRecordingError, toast]);
+
   useEffect(() => {
     if (editingProfile) {
       form.reset({
@@ -219,11 +289,6 @@ export function ProfileForm() {
       const result = await transcribe.mutateAsync({ file, language });
 
       form.setValue('referenceText', result.text, { shouldValidate: true });
-
-      toast({
-        title: 'Transcription complete',
-        description: 'Audio has been transcribed successfully.',
-      });
     } catch (error) {
       toast({
         title: 'Transcription failed',
@@ -234,8 +299,18 @@ export function ProfileForm() {
   }
 
   function handleCancelRecording() {
-    cancelRecording();
+    if (sampleMode === 'record') {
+      cancelRecording();
+    } else if (sampleMode === 'system') {
+      cancelSystemRecording();
+    }
     form.resetField('sampleFile');
+    cleanupAudio();
+  }
+
+  function handlePlayPause() {
+    const file = form.getValues('sampleFile');
+    playPause(file);
   }
 
   async function onSubmit(data: ProfileFormValues) {
@@ -251,75 +326,91 @@ export function ProfileForm() {
           },
         });
         toast({
-          title: 'Profile updated',
+          title: 'Voice updated',
           description: `"${data.name}" has been updated successfully.`,
         });
       } else {
-        // Get file and reference text directly from form state to ensure we have the values
+        // Creating: require sample file and reference text
         const sampleFile = form.getValues('sampleFile');
         const referenceText = form.getValues('referenceText');
 
+        if (!sampleFile) {
+          form.setError('sampleFile', {
+            type: 'manual',
+            message: 'Audio sample is required',
+          });
+          toast({
+            title: 'Audio sample required',
+            description: 'Please provide an audio sample to create the voice profile.',
+            variant: 'destructive',
+          });
+          return;
+        }
+
+        if (!referenceText || referenceText.trim().length === 0) {
+          form.setError('referenceText', {
+            type: 'manual',
+            message: 'Reference text is required',
+          });
+          toast({
+            title: 'Reference text required',
+            description: 'Please provide the reference text for the audio sample.',
+            variant: 'destructive',
+          });
+          return;
+        }
+
         // Validate audio duration before creating profile
-        if (sampleFile) {
-          try {
-            const duration = await getAudioDuration(sampleFile);
-            if (duration > MAX_AUDIO_DURATION_SECONDS) {
-              form.setError('sampleFile', {
-                type: 'manual',
-                message: `Audio is too long (${formatAudioDuration(duration)}). Maximum duration is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
-              });
-              toast({
-                title: 'Invalid audio file',
-                description: `Audio duration is ${formatAudioDuration(duration)}, but maximum is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
-                variant: 'destructive',
-              });
-              return; // Prevent form submission
-            }
-          } catch (error) {
+        try {
+          const duration = await getAudioDuration(sampleFile);
+          if (duration > MAX_AUDIO_DURATION_SECONDS) {
             form.setError('sampleFile', {
               type: 'manual',
-              message: 'Failed to validate audio file. Please try a different file.',
+              message: `Audio is too long (${formatAudioDuration(duration)}). Maximum duration is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
             });
             toast({
-              title: 'Validation error',
-              description: error instanceof Error ? error.message : 'Failed to validate audio file',
+              title: 'Invalid audio file',
+              description: `Audio duration is ${formatAudioDuration(duration)}, but maximum is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
               variant: 'destructive',
             });
             return; // Prevent form submission
           }
+        } catch (error) {
+          form.setError('sampleFile', {
+            type: 'manual',
+            message: 'Failed to validate audio file. Please try a different file.',
+          });
+          toast({
+            title: 'Validation error',
+            description: error instanceof Error ? error.message : 'Failed to validate audio file',
+            variant: 'destructive',
+          });
+          return; // Prevent form submission
         }
 
-        // Creating: create profile, then optionally add sample
+        // Creating: create profile, then add sample
         const profile = await createProfile.mutateAsync({
           name: data.name,
           description: data.description,
           language: data.language,
         });
 
-        // If sample file and reference text provided, add it
-        if (sampleFile && referenceText && referenceText.trim().length > 0) {
-          try {
-            await addSample.mutateAsync({
-              profileId: profile.id,
-              file: sampleFile,
-              referenceText: referenceText,
-            });
-            toast({
-              title: 'Profile created',
-              description: `"${data.name}" has been created with a sample.`,
-            });
-          } catch (sampleError) {
-            // Profile was created but sample failed - still show success for profile
-            toast({
-              title: 'Profile created',
-              description: `"${data.name}" has been created, but failed to add sample: ${sampleError instanceof Error ? sampleError.message : 'Unknown error'}`,
-              variant: 'destructive',
-            });
-          }
-        } else {
+        try {
+          await addSample.mutateAsync({
+            profileId: profile.id,
+            file: sampleFile,
+            referenceText: referenceText,
+          });
           toast({
             title: 'Profile created',
-            description: `"${data.name}" has been created successfully. You can add samples later.`,
+            description: `"${data.name}" has been created with a sample.`,
+          });
+        } catch (sampleError) {
+          // Profile was created but sample failed - still show error
+          toast({
+            title: 'Failed to add sample',
+            description: `Profile "${data.name}" was created, but failed to add sample: ${sampleError instanceof Error ? sampleError.message : 'Unknown error'}`,
+            variant: 'destructive',
           });
         }
       }
@@ -345,6 +436,10 @@ export function ProfileForm() {
       if (isRecording) {
         cancelRecording();
       }
+      if (isSystemRecording) {
+        cancelSystemRecording();
+      }
+      cleanupAudio();
     }
   }
 
@@ -352,17 +447,17 @@ export function ProfileForm() {
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="max-w-4xl">
         <DialogHeader>
-          <DialogTitle>{editingProfileId ? 'Edit Profile' : 'Create Voice Profile'}</DialogTitle>
+          <DialogTitle>{editingProfileId ? 'Edit Voice' : 'Create Voice Profile'}</DialogTitle>
           <DialogDescription>
             {editingProfileId
-              ? 'Update your voice profile details.'
-              : 'Create a new voice profile. You can add a sample now or later.'}
+              ? 'Update your voice profile details and manage samples.'
+              : 'Create a new voice profile with an audio sample to clone the voice.'}
           </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <div className={`grid gap-6 ${isCreating ? 'grid-cols-2' : 'grid-cols-1'}`}>
+            <div className="grid gap-6 grid-cols-2">
               {/* Left column: Profile info */}
               <div className="space-y-4">
                 <FormField
@@ -419,223 +514,144 @@ export function ProfileForm() {
                 />
               </div>
 
-              {/* Right column: Sample upload section - only show when creating */}
-              {isCreating && (
-                <div className="space-y-4 border-l pl-6">
-                  <div>
-                    <h3 className="text-sm font-medium mb-2">Add Sample (Optional)</h3>
-                    <p className="text-sm text-muted-foreground mb-4">
-                      Add an audio sample to get started immediately. You can add more samples
-                      later.
-                    </p>
-                  </div>
+              {/* Right column: Sample management */}
+              <div className="space-y-4 border-l pl-6">
+                {isCreating ? (
+                  <>
+                    <div>
+                      <h3 className="text-sm font-medium mb-2">Add Sample</h3>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        Provide an audio sample to clone the voice. You can add more samples later.
+                      </p>
+                    </div>
 
-                  <Tabs
-                    value={sampleMode}
-                    onValueChange={(v) => setSampleMode(v as 'upload' | 'record')}
-                  >
-                    <TabsList className="grid w-full grid-cols-2">
-                      <TabsTrigger value="upload" className="flex items-center gap-2">
-                        <Upload className="h-4 w-4" />
-                        Upload
-                      </TabsTrigger>
-                      <TabsTrigger value="record" className="flex items-center gap-2">
-                        <Mic className="h-4 w-4" />
-                        Record
-                      </TabsTrigger>
-                    </TabsList>
-
-                    <TabsContent value="upload" className="space-y-4">
-                      <FormField
-                        control={form.control}
-                        name="sampleFile"
-                        render={({ field: { onChange, name, ref } }) => (
-                          <FormItem>
-                            <FormLabel>Audio File</FormLabel>
-                            <FormControl>
-                              <div className="flex flex-col gap-2">
-                                <Input
-                                  type="file"
-                                  accept="audio/*"
-                                  name={name}
-                                  ref={ref}
-                                  onChange={(e) => {
-                                    const file = e.target.files?.[0];
-                                    if (file) {
-                                      onChange(file);
-                                    } else {
-                                      onChange(undefined);
-                                    }
-                                  }}
-                                />
-                                {selectedFile && (
-                                  <>
-                                    {isValidatingAudio && (
-                                      <p className="text-sm text-muted-foreground">
-                                        Validating audio...
-                                      </p>
-                                    )}
-                                    {!isValidatingAudio && audioDuration !== null && (
-                                      <div className="flex items-center gap-2 text-sm">
-                                        <span className="text-muted-foreground">Duration:</span>
-                                        <span
-                                          className={
-                                            audioDuration > MAX_AUDIO_DURATION_SECONDS
-                                              ? 'text-destructive font-medium'
-                                              : 'text-foreground'
-                                          }
-                                        >
-                                          {formatAudioDuration(audioDuration)}
-                                        </span>
-                                        <span className="text-muted-foreground">
-                                          / {formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)} max
-                                        </span>
-                                      </div>
-                                    )}
-                                    <Button
-                                      type="button"
-                                      variant="outline"
-                                      onClick={handleTranscribe}
-                                      disabled={transcribe.isPending || isValidatingAudio || (audioDuration !== null && audioDuration > MAX_AUDIO_DURATION_SECONDS)}
-                                      className="flex items-center gap-2 w-full"
-                                    >
-                                      <Mic className="h-4 w-4" />
-                                      {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                                    </Button>
-                                  </>
-                                )}
-                              </div>
-                            </FormControl>
-                            <FormDescription>
-                              Supported formats: WAV, MP3, M4A. Maximum duration:{' '}
-                              {formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}. Click "Transcribe"
-                              to automatically extract text from the audio.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
+                    <Tabs
+                      value={sampleMode}
+                      onValueChange={(v) => {
+                        const newMode = v as 'upload' | 'record' | 'system';
+                        // Cancel any active recordings when switching modes
+                        if (isRecording && newMode !== 'record') {
+                          cancelRecording();
+                        }
+                        if (isSystemRecording && newMode !== 'system') {
+                          cancelSystemRecording();
+                        }
+                        setSampleMode(newMode);
+                      }}
+                    >
+                      <TabsList
+                        className={`grid w-full ${isTauri() && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
+                      >
+                        <TabsTrigger value="upload" className="flex items-center gap-2">
+                          <Upload className="h-4 w-4 shrink-0" />
+                          Upload
+                        </TabsTrigger>
+                        <TabsTrigger value="record" className="flex items-center gap-2">
+                          <Mic className="h-4 w-4 shrink-0" />
+                          Record
+                        </TabsTrigger>
+                        {isTauri() && isSystemAudioSupported && (
+                          <TabsTrigger value="system" className="flex items-center gap-2">
+                            <Monitor className="h-4 w-4 shrink-0" />
+                            System Audio
+                          </TabsTrigger>
                         )}
-                      />
-                    </TabsContent>
+                      </TabsList>
 
-                    <TabsContent value="record" className="space-y-4">
-                      <FormField
-                        control={form.control}
-                        name="sampleFile"
-                        render={() => (
-                          <FormItem>
-                            <FormLabel>Record Audio</FormLabel>
-                            <FormControl>
-                              <div className="space-y-4">
-                                {!isRecording && !selectedFile && (
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-dashed rounded-lg">
-                                    <Button
-                                      type="button"
-                                      onClick={startRecording}
-                                      size="lg"
-                                      className="flex items-center gap-2"
-                                    >
-                                      <Mic className="h-5 w-5" />
-                                      Start Recording
-                                    </Button>
-                                    <p className="text-sm text-muted-foreground text-center">
-                                      Click to start recording. Maximum duration: 30 seconds.
-                                    </p>
-                                  </div>
-                                )}
+                      <TabsContent value="upload" className="space-y-4">
+                        <FormField
+                          control={form.control}
+                          name="sampleFile"
+                          render={({ field: { onChange, name } }) => (
+                            <AudioSampleUpload
+                              file={selectedFile}
+                              onFileChange={onChange}
+                              onTranscribe={handleTranscribe}
+                              onPlayPause={handlePlayPause}
+                              isPlaying={isPlaying}
+                              isValidating={isValidatingAudio}
+                              isTranscribing={transcribe.isPending}
+                              isDisabled={
+                                audioDuration !== null && audioDuration > MAX_AUDIO_DURATION_SECONDS
+                              }
+                              fieldName={name}
+                            />
+                          )}
+                        />
+                      </TabsContent>
 
-                                {isRecording && (
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5">
-                                    <div className="flex items-center gap-4">
-                                      <div className="flex items-center gap-2">
-                                        <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
-                                        <span className="text-lg font-mono font-semibold">
-                                          {formatAudioDuration(duration)}
-                                        </span>
-                                      </div>
-                                    </div>
-                                    <Button
-                                      type="button"
-                                      onClick={stopRecording}
-                                      variant="destructive"
-                                      className="flex items-center gap-2"
-                                    >
-                                      <Square className="h-4 w-4" />
-                                      Stop Recording
-                                    </Button>
-                                    <p className="text-sm text-muted-foreground text-center">
-                                      Recording in progress... ({formatAudioDuration(30 - duration)}{' '}
-                                      remaining)
-                                    </p>
-                                  </div>
-                                )}
+                      <TabsContent value="record" className="space-y-4">
+                        <FormField
+                          control={form.control}
+                          name="sampleFile"
+                          render={() => (
+                            <AudioSampleRecording
+                              file={selectedFile}
+                              isRecording={isRecording}
+                              duration={duration}
+                              onStart={startRecording}
+                              onStop={stopRecording}
+                              onCancel={handleCancelRecording}
+                              onTranscribe={handleTranscribe}
+                              onPlayPause={handlePlayPause}
+                              isPlaying={isPlaying}
+                              isTranscribing={transcribe.isPending}
+                            />
+                          )}
+                        />
+                      </TabsContent>
 
-                                {selectedFile && !isRecording && (
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5">
-                                    <div className="flex items-center gap-2">
-                                      <Mic className="h-5 w-5 text-primary" />
-                                      <span className="font-medium">Recording complete</span>
-                                    </div>
-                                    <p className="text-sm text-muted-foreground text-center">
-                                      File: {selectedFile.name}
-                                    </p>
-                                    <div className="flex gap-2">
-                                      <Button
-                                        type="button"
-                                        variant="outline"
-                                        onClick={handleTranscribe}
-                                        disabled={transcribe.isPending}
-                                        className="flex items-center gap-2"
-                                      >
-                                        <Mic className="h-4 w-4" />
-                                        {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                                      </Button>
-                                      <Button
-                                        type="button"
-                                        variant="outline"
-                                        onClick={handleCancelRecording}
-                                        className="flex items-center gap-2"
-                                      >
-                                        Record Again
-                                      </Button>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            </FormControl>
-                            <FormDescription>
-                              Record audio directly from your microphone. Maximum duration is 30
-                              seconds.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </TabsContent>
-                  </Tabs>
-
-                  <FormField
-                    control={form.control}
-                    name="referenceText"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Reference Text</FormLabel>
-                        <FormControl>
-                          <Textarea
-                            placeholder="Enter the exact text spoken in the audio..."
-                            className="min-h-[100px]"
-                            {...field}
+                      {isTauri() && isSystemAudioSupported && (
+                        <TabsContent value="system" className="space-y-4">
+                          <FormField
+                            control={form.control}
+                            name="sampleFile"
+                            render={() => (
+                              <AudioSampleSystem
+                                file={selectedFile}
+                                isRecording={isSystemRecording}
+                                duration={systemDuration}
+                                onStart={startSystemRecording}
+                                onStop={stopSystemRecording}
+                                onCancel={handleCancelRecording}
+                                onTranscribe={handleTranscribe}
+                                onPlayPause={handlePlayPause}
+                                isPlaying={isPlaying}
+                                isTranscribing={transcribe.isPending}
+                              />
+                            )}
                           />
-                        </FormControl>
-                        <FormDescription>
-                          This should match exactly what is spoken in the audio file. Required if
-                          you add a sample.
-                        </FormDescription>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-              )}
+                        </TabsContent>
+                      )}
+                    </Tabs>
+
+                    <FormField
+                      control={form.control}
+                      name="referenceText"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Reference Text</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              placeholder="Enter the exact text spoken in the audio..."
+                              className="min-h-[100px]"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </>
+                ) : (
+                  // Show sample list when editing
+                  editingProfileId && (
+                    <div>
+                      <SampleList profileId={editingProfileId} />
+                    </div>
+                  )
+                )}
+              </div>
             </div>
 
             <div className="flex gap-2 justify-end mt-6 pt-4 border-t">
@@ -649,7 +665,7 @@ export function ProfileForm() {
                 {createProfile.isPending || updateProfile.isPending || addSample.isPending
                   ? 'Saving...'
                   : editingProfileId
-                    ? 'Update Profile'
+                    ? 'Save Changes'
                     : 'Create Profile'}
               </Button>
             </div>

app/src/components/VoiceProfiles/ProfileList.tsx

@@ -109,7 +109,7 @@ export function ProfileList() {
             </CardContent>
           </Card>
         ) : (
-          <div className="grid gap-4 grid-cols-3 auto-rows-auto p-1">
+          <div className="grid gap-4 grid-cols-3 auto-rows-auto p-1 pb-[150px]">
             {allProfiles.map((profile) => (
               <ProfileCard key={profile.id} profile={profile} />
             ))}

app/src/components/VoiceProfiles/SampleList.tsx

@@ -37,7 +37,7 @@ export function SampleList({ profileId }: SampleListProps) {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-semibold">Audio Samples</h3>
-        <Button size="sm" onClick={() => setUploadOpen(true)}>
+        <Button type="button" size="sm" onClick={() => setUploadOpen(true)}>
           <Plus className="mr-2 h-4 w-4" />
           Add Sample
         </Button>
@@ -60,6 +60,7 @@ export function SampleList({ profileId }: SampleListProps) {
               </div>
               <div className="flex gap-2">
                 <Button
+                  type="button"
                   variant="ghost"
                   size="sm"
                   onClick={() => handlePlay(sample.reference_text, sample.id)}
@@ -69,6 +70,7 @@ export function SampleList({ profileId }: SampleListProps) {
                   Play
                 </Button>
                 <Button
+                  type="button"
                   variant="ghost"
                   size="sm"
                   onClick={() => handleDelete(sample.id)}

app/src/components/VoiceProfiles/SampleUpload.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { Mic, Monitor, Upload } from 'lucide-react';
 import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
 import {
@@ -13,21 +14,23 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
-import { useAddSample, useProfile } from '@/lib/hooks/useProfiles';
-import { useTranscription } from '@/lib/hooks/useTranscription';
+import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
 import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
-import { Mic, Square, Upload } from 'lucide-react';
-import { formatAudioDuration } from '@/lib/utils/audio';
+import { useAddSample, useProfile } from '@/lib/hooks/useProfiles';
+import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
+import { useTranscription } from '@/lib/hooks/useTranscription';
+import { isTauri } from '@/lib/tauri';
+import { AudioSampleRecording } from './AudioSampleRecording';
+import { AudioSampleSystem } from './AudioSampleSystem';
+import { AudioSampleUpload } from './AudioSampleUpload';
 
 const sampleSchema = z.object({
   file: z.instanceof(File, { message: 'Please select an audio file' }),
@@ -50,7 +53,8 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
   const transcribe = useTranscription();
   const { data: profile } = useProfile(profileId);
   const { toast } = useToast();
-  const [mode, setMode] = useState<'upload' | 'record'>('upload');
+  const [mode, setMode] = useState<'upload' | 'record' | 'system'>('upload');
+  const { isPlaying, playPause, cleanup: cleanupAudio } = useAudioPlayer();
 
   const form = useForm<SampleFormValues>({
     resolver: zodResolver(sampleSchema),
@@ -70,11 +74,15 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     cancelRecording,
   } = useAudioRecording({
     maxDurationSeconds: 30,
-    onRecordingComplete: (blob) => {
+    onRecordingComplete: (blob, recordedDuration) => {
       // Convert blob to File object
       const file = new File([blob], `recording-${Date.now()}.webm`, {
         type: blob.type || 'audio/webm',
-      });
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
       form.setValue('file', file, { shouldValidate: true });
       toast({
         title: 'Recording complete',
@@ -83,6 +91,33 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     },
   });
 
+  const {
+    isRecording: isSystemRecording,
+    duration: systemDuration,
+    error: systemRecordingError,
+    isSupported: isSystemAudioSupported,
+    startRecording: startSystemRecording,
+    stopRecording: stopSystemRecording,
+    cancelRecording: cancelSystemRecording,
+  } = useSystemAudioCapture({
+    maxDurationSeconds: 30,
+    onRecordingComplete: (blob, recordedDuration) => {
+      // Convert blob to File object
+      const file = new File([blob], `system-audio-${Date.now()}.wav`, {
+        type: blob.type || 'audio/wav',
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
+      form.setValue('file', file, { shouldValidate: true });
+      toast({
+        title: 'System audio captured',
+        description: 'Audio has been captured successfully.',
+      });
+    },
+  });
+
   // Show recording errors
   useEffect(() => {
     if (recordingError) {
@@ -94,6 +129,17 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     }
   }, [recordingError, toast]);
 
+  // Show system audio recording errors
+  useEffect(() => {
+    if (systemRecordingError) {
+      toast({
+        title: 'System audio capture error',
+        description: systemRecordingError,
+        variant: 'destructive',
+      });
+    }
+  }, [systemRecordingError, toast]);
+
   async function handleTranscribe() {
     const file = form.getValues('file');
     if (!file) {
@@ -110,11 +156,6 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
       const result = await transcribe.mutateAsync({ file, language });
 
       form.setValue('referenceText', result.text, { shouldValidate: true });
-
-      toast({
-        title: 'Transcription complete',
-        description: 'Audio has been transcribed successfully.',
-      });
     } catch (error) {
       toast({
         title: 'Transcription failed',
@@ -154,14 +195,27 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
       if (isRecording) {
         cancelRecording();
       }
+      if (isSystemRecording) {
+        cancelSystemRecording();
+      }
+      cleanupAudio();
     }
     onOpenChange(newOpen);
   }
 
   function handleCancelRecording() {
-    cancelRecording();
-    // Reset file field by clearing the input
+    if (mode === 'record') {
+      cancelRecording();
+    } else if (mode === 'system') {
+      cancelSystemRecording();
+    }
     form.resetField('file');
+    cleanupAudio();
+  }
+
+  function handlePlayPause() {
+    const file = form.getValues('file');
+    playPause(file);
   }
 
   return (
@@ -176,58 +230,40 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <Tabs value={mode} onValueChange={(v) => setMode(v as 'upload' | 'record')}>
-              <TabsList className="grid w-full grid-cols-2">
+            <Tabs value={mode} onValueChange={(v) => setMode(v as 'upload' | 'record' | 'system')}>
+              <TabsList
+                className={`grid w-full ${isTauri() && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
+              >
                 <TabsTrigger value="upload" className="flex items-center gap-2">
-                  <Upload className="h-4 w-4" />
+                  <Upload className="h-4 w-4 shrink-0" />
                   Upload
                 </TabsTrigger>
                 <TabsTrigger value="record" className="flex items-center gap-2">
-                  <Mic className="h-4 w-4" />
+                  <Mic className="h-4 w-4 shrink-0" />
                   Record
                 </TabsTrigger>
+                {isTauri() && isSystemAudioSupported && (
+                  <TabsTrigger value="system" className="flex items-center gap-2">
+                    <Monitor className="h-4 w-4 shrink-0" />
+                    System Audio
+                  </TabsTrigger>
+                )}
               </TabsList>
 
               <TabsContent value="upload" className="space-y-4">
                 <FormField
                   control={form.control}
                   name="file"
-                  render={({ field: { onChange, value, ...field } }) => (
-                    <FormItem>
-                      <FormLabel>Audio File</FormLabel>
-                      <FormControl>
-                        <div className="flex items-center gap-2">
-                          <Input
-                            type="file"
-                            accept="audio/*"
-                            onChange={(e) => {
-                              const file = e.target.files?.[0];
-                              if (file) {
-                                onChange(file);
-                              }
-                            }}
-                            {...field}
-                          />
-                          {selectedFile && (
-                            <Button
-                              type="button"
-                              variant="outline"
-                              onClick={handleTranscribe}
-                              disabled={transcribe.isPending}
-                              className="flex items-center gap-2"
-                            >
-                              <Mic className="h-4 w-4" />
-                              {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                            </Button>
-                          )}
-                        </div>
-                      </FormControl>
-                      <FormDescription>
-                        Supported formats: WAV, MP3, M4A. Click "Transcribe" to automatically
-                        extract text from the audio.
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
+                  render={({ field: { onChange, name } }) => (
+                    <AudioSampleUpload
+                      file={selectedFile}
+                      onFileChange={onChange}
+                      onTranscribe={handleTranscribe}
+                      onPlayPause={handlePlayPause}
+                      isPlaying={isPlaying}
+                      isTranscribing={transcribe.isPending}
+                      fieldName={name}
+                    />
                   )}
                 />
               </TabsContent>
@@ -237,94 +273,44 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
                   control={form.control}
                   name="file"
                   render={() => (
-                    <FormItem>
-                      <FormLabel>Record Audio</FormLabel>
-                      <FormControl>
-                        <div className="space-y-4">
-                          {!isRecording && !selectedFile && (
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-dashed rounded-lg">
-                              <Button
-                                type="button"
-                                onClick={startRecording}
-                                size="lg"
-                                className="flex items-center gap-2"
-                              >
-                                <Mic className="h-5 w-5" />
-                                Start Recording
-                              </Button>
-                              <p className="text-sm text-muted-foreground text-center">
-                                Click to start recording. Maximum duration: 30 seconds.
-                              </p>
-                            </div>
-                          )}
-
-                          {isRecording && (
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-destructive rounded-lg bg-destructive/5">
-                              <div className="flex items-center gap-4">
-                                <div className="flex items-center gap-2">
-                                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
-                                  <span className="text-lg font-mono font-semibold">
-                                    {formatAudioDuration(duration)}
-                                  </span>
-                                </div>
-                              </div>
-                              <Button
-                                type="button"
-                                onClick={stopRecording}
-                                variant="destructive"
-                                className="flex items-center gap-2"
-                              >
-                                <Square className="h-4 w-4" />
-                                Stop Recording
-                              </Button>
-                              <p className="text-sm text-muted-foreground text-center">
-                                Recording in progress... ({formatAudioDuration(30 - duration)}{' '}
-                                remaining)
-                              </p>
-                            </div>
-                          )}
-
-                          {selectedFile && !isRecording && (
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-primary rounded-lg bg-primary/5">
-                              <div className="flex items-center gap-2">
-                                <Mic className="h-5 w-5 text-primary" />
-                                <span className="font-medium">Recording complete</span>
-                              </div>
-                              <p className="text-sm text-muted-foreground">
-                                File: {selectedFile.name}
-                              </p>
-                              <div className="flex gap-2">
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleTranscribe}
-                                  disabled={transcribe.isPending}
-                                  className="flex items-center gap-2"
-                                >
-                                  <Mic className="h-4 w-4" />
-                                  {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                                </Button>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleCancelRecording}
-                                  className="flex items-center gap-2"
-                                >
-                                  Record Again
-                                </Button>
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      </FormControl>
-                      <FormDescription>
-                        Record audio directly from your microphone. Maximum duration is 30 seconds.
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
+                    <AudioSampleRecording
+                      file={selectedFile}
+                      isRecording={isRecording}
+                      duration={duration}
+                      onStart={startRecording}
+                      onStop={stopRecording}
+                      onCancel={handleCancelRecording}
+                      onTranscribe={handleTranscribe}
+                      onPlayPause={handlePlayPause}
+                      isPlaying={isPlaying}
+                      isTranscribing={transcribe.isPending}
+                    />
                   )}
                 />
               </TabsContent>
+
+              {isTauri() && isSystemAudioSupported && (
+                <TabsContent value="system" className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="file"
+                    render={() => (
+                      <AudioSampleSystem
+                        file={selectedFile}
+                        isRecording={isSystemRecording}
+                        duration={systemDuration}
+                        onStart={startSystemRecording}
+                        onStop={stopSystemRecording}
+                        onCancel={handleCancelRecording}
+                        onTranscribe={handleTranscribe}
+                        onPlayPause={handlePlayPause}
+                        isPlaying={isPlaying}
+                        isTranscribing={transcribe.isPending}
+                      />
+                    )}
+                  />
+                </TabsContent>
+              )}
             </Tabs>
 
             <FormField
@@ -340,9 +326,6 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
-                    This should match exactly what is spoken in the audio file.
-                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

app/src/components/VoicesTab/VoicesTab.tsx

@@ -0,0 +1,216 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Edit, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { apiClient } from '@/lib/api/client';
+import { useHistory } from '@/lib/hooks/useHistory';
+import { useDeleteProfile, useProfileSamples, useProfiles } from '@/lib/hooks/useProfiles';
+import { useUIStore } from '@/stores/uiStore';
+
+export function VoicesTab() {
+  const { data: profiles, isLoading } = useProfiles();
+  const { data: historyData } = useHistory({ limit: 1000 });
+  const queryClient = useQueryClient();
+  const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
+  const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
+  const deleteProfile = useDeleteProfile();
+
+  // Get generation counts per profile
+  const generationCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    if (historyData?.items) {
+      historyData.items.forEach((item) => {
+        counts[item.profile_id] = (counts[item.profile_id] || 0) + 1;
+      });
+    }
+    return counts;
+  }, [historyData]);
+
+  // Get channel assignments for each profile
+  const { data: channelAssignments } = useQuery({
+    queryKey: ['profile-channels'],
+    queryFn: async () => {
+      if (!profiles) return {};
+      const assignments: Record<string, string[]> = {};
+      for (const profile of profiles) {
+        try {
+          const result = await apiClient.getProfileChannels(profile.id);
+          assignments[profile.id] = result.channel_ids;
+        } catch {
+          assignments[profile.id] = [];
+        }
+      }
+      return assignments;
+    },
+    enabled: !!profiles,
+  });
+
+  // Get all channels
+  const { data: channels } = useQuery({
+    queryKey: ['channels'],
+    queryFn: () => apiClient.listChannels(),
+  });
+
+  const handleEdit = (profileId: string) => {
+    setEditingProfileId(profileId);
+    setDialogOpen(true);
+  };
+
+  const handleDelete = (profileId: string) => {
+    if (confirm('Are you sure you want to delete this profile?')) {
+      deleteProfile.mutate(profileId);
+    }
+  };
+
+  const handleChannelChange = async (profileId: string, channelIds: string[]) => {
+    try {
+      await apiClient.setProfileChannels(profileId, channelIds);
+      queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
+    } catch (error) {
+      console.error('Failed to update channels:', error);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading voices...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Voices</h1>
+        <Button onClick={() => setDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Voice
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Language</TableHead>
+              <TableHead>Generations</TableHead>
+              <TableHead>Samples</TableHead>
+              <TableHead>Channels</TableHead>
+              <TableHead className="w-[50px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {profiles?.map((profile) => (
+              <VoiceRow
+                key={profile.id}
+                profile={profile}
+                generationCount={generationCounts[profile.id] || 0}
+                channelIds={channelAssignments?.[profile.id] || []}
+                channels={channels || []}
+                onChannelChange={(channelIds) => handleChannelChange(profile.id, channelIds)}
+                onEdit={() => handleEdit(profile.id)}
+                onDelete={() => handleDelete(profile.id)}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+interface VoiceRowProps {
+  profile: {
+    id: string;
+    name: string;
+    description: string | null;
+    language: string;
+  };
+  generationCount: number;
+  channelIds: string[];
+  channels: Array<{ id: string; name: string; is_default: boolean }>;
+  onChannelChange: (channelIds: string[]) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function VoiceRow({
+  profile,
+  generationCount,
+  channelIds,
+  channels,
+  onChannelChange,
+  onEdit,
+  onDelete,
+}: VoiceRowProps) {
+  const { data: samples } = useProfileSamples(profile.id);
+
+  return (
+    <TableRow>
+      <TableCell>
+        <div>
+          <div className="font-medium">{profile.name}</div>
+          {profile.description && (
+            <div className="text-sm text-muted-foreground">{profile.description}</div>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>{profile.language}</TableCell>
+      <TableCell>{generationCount}</TableCell>
+      <TableCell>{samples?.length || 0}</TableCell>
+      <TableCell>
+        <select
+          multiple
+          value={channelIds}
+          onChange={(e) => {
+            const selected = Array.from(e.target.selectedOptions, (opt) => opt.value);
+            onChannelChange(selected);
+          }}
+          className="w-full min-w-[200px] border rounded px-2 py-1 text-sm"
+          size={Math.min(channels.length + 1, 5)}
+        >
+          {channels.map((ch) => (
+            <option key={ch.id} value={ch.id}>
+              {ch.name} {ch.is_default && '(Default)'}
+            </option>
+          ))}
+        </select>
+      </TableCell>
+      <TableCell>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={onEdit}>
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDelete} className="text-destructive">
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  );
+}

app/src/hooks/useAutoUpdater.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { check, type Update } from '@tauri-apps/plugin-updater';
 import { relaunch } from '@tauri-apps/plugin-process';
+import { check, type Update } from '@tauri-apps/plugin-updater';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface UpdateStatus {
   checking: boolean;
@@ -8,9 +8,18 @@ export interface UpdateStatus {
   version?: string;
   downloading: boolean;
   installing: boolean;
+  readyToInstall: boolean;
   error?: string;
+  downloadProgress?: number; // 0-100 percentage
+  downloadedBytes?: number;
+  totalBytes?: number;
 }
 
+// Check if we're on Windows (NSIS installer handles restart automatically)
+const isWindows = () => {
+  return navigator.userAgent.includes('Windows');
+};
+
 const isTauri = () => {
   return '__TAURI_INTERNALS__' in window;
 };
@@ -21,11 +30,12 @@ export function useAutoUpdater(checkOnMount = false) {
     available: false,
     downloading: false,
     installing: false,
+    readyToInstall: false,
   });
 
   const [update, setUpdate] = useState<Update | null>(null);
 
-  const checkForUpdates = async () => {
+  const checkForUpdates = useCallback(async () => {
     if (!isTauri()) {
       return;
     }
@@ -43,6 +53,7 @@ export function useAutoUpdater(checkOnMount = false) {
           version: foundUpdate.version,
           downloading: false,
           installing: false,
+          readyToInstall: false,
         });
       } else {
         setStatus({
@@ -50,6 +61,7 @@ export function useAutoUpdater(checkOnMount = false) {
           available: false,
           downloading: false,
           installing: false,
+          readyToInstall: false,
         });
       }
     } catch (error) {
@@ -58,41 +70,93 @@ export function useAutoUpdater(checkOnMount = false) {
         available: false,
         downloading: false,
         installing: false,
+        readyToInstall: false,
         error: error instanceof Error ? error.message : 'Failed to check for updates',
       });
     }
-  };
+  }, []);
 
+  // Download the update (but don't install yet)
   const downloadAndInstall = async () => {
     if (!update || !isTauri()) return;
 
     try {
       setStatus((prev) => ({ ...prev, downloading: true, error: undefined }));
 
-      await update.downloadAndInstall((event) => {
+      let downloadedBytes = 0;
+      let totalBytes = 0;
+
+      // Just download the update
+      await update.download((event) => {
         switch (event.event) {
           case 'Started':
-            setStatus((prev) => ({ ...prev, downloading: true }));
+            totalBytes = event.data.contentLength || 0;
+            downloadedBytes = 0;
+            setStatus((prev) => ({
+              ...prev,
+              downloading: true,
+              totalBytes,
+              downloadedBytes: 0,
+              downloadProgress: 0,
+            }));
             break;
-          case 'Progress':
-            console.log(`Downloaded ${event.data.chunkLength} bytes`);
+          case 'Progress': {
+            downloadedBytes += event.data.chunkLength;
+            const progress =
+              totalBytes > 0 ? Math.round((downloadedBytes / totalBytes) * 100) : undefined;
+            setStatus((prev) => ({
+              ...prev,
+              downloadedBytes,
+              downloadProgress: progress,
+            }));
             break;
+          }
           case 'Finished':
             setStatus((prev) => ({
               ...prev,
               downloading: false,
-              installing: true,
+              readyToInstall: true,
+              downloadProgress: 100,
             }));
             break;
         }
       });
-
-      await relaunch();
     } catch (error) {
       setStatus((prev) => ({
         ...prev,
         downloading: false,
         installing: false,
+        readyToInstall: false,
+        downloadProgress: undefined,
+        downloadedBytes: undefined,
+        totalBytes: undefined,
+        error: error instanceof Error ? error.message : 'Failed to download update',
+      }));
+    }
+  };
+
+  // Install the downloaded update and restart the app
+  const restartAndInstall = async () => {
+    if (!update || !isTauri()) return;
+
+    try {
+      setStatus((prev) => ({ ...prev, installing: true, error: undefined }));
+
+      // Install the update
+      await update.install();
+
+      // On Windows with NSIS, the installer handles the restart automatically.
+      // The process will be killed by the NSIS installer, so we won't reach here.
+      // On macOS/Linux, we need to manually relaunch.
+      if (!isWindows()) {
+        await relaunch();
+      }
+      // If we're on Windows and somehow still running, the NSIS installer
+      // should have already handled everything. Just wait for the process to end.
+    } catch (error) {
+      setStatus((prev) => ({
+        ...prev,
+        installing: false,
         error: error instanceof Error ? error.message : 'Failed to install update',
       }));
     }
@@ -102,11 +166,12 @@ export function useAutoUpdater(checkOnMount = false) {
     if (checkOnMount && isTauri()) {
       checkForUpdates();
     }
-  }, [checkOnMount]);
+  }, [checkOnMount, checkForUpdates]);
 
   return {
     status,
     checkForUpdates,
     downloadAndInstall,
+    restartAndInstall,
   };
 }

app/src/lib/hooks/.gitkeep

@@ -1 +0,0 @@
-# React Query hooks will be placed here

app/src/lib/hooks/useAudioPlayer.ts

@@ -0,0 +1,66 @@
+import { useRef, useState } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+
+export function useAudioPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { toast } = useToast();
+
+  const playPause = (file: File | null | undefined) => {
+    if (!file) return;
+
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        audioRef.current.play();
+        setIsPlaying(true);
+      }
+    } else {
+      const audio = new Audio(URL.createObjectURL(file));
+      audioRef.current = audio;
+
+      audio.addEventListener('ended', () => {
+        setIsPlaying(false);
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.addEventListener('error', () => {
+        setIsPlaying(false);
+        toast({
+          title: 'Playback error',
+          description: 'Failed to play audio file',
+          variant: 'destructive',
+        });
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const cleanup = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      if (audioRef.current.src.startsWith('blob:')) {
+        URL.revokeObjectURL(audioRef.current.src);
+      }
+      audioRef.current = null;
+    }
+    setIsPlaying(false);
+  };
+
+  return {
+    isPlaying,
+    playPause,
+    cleanup,
+  };
+}

app/src/lib/hooks/useAudioRecording.ts

@@ -1,9 +1,10 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { isTauri } from '@/lib/tauri';
+import { convertToWav } from '@/lib/utils/audio';
 
 interface UseAudioRecordingOptions {
   maxDurationSeconds?: number;
-  onRecordingComplete?: (blob: Blob) => void;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
 }
 
 export function useAudioRecording({
@@ -85,9 +86,26 @@ export function useAudioRecording({
         }
       };
 
-      mediaRecorder.onstop = () => {
-        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
-        onRecordingComplete?.(blob);
+      mediaRecorder.onstop = async () => {
+        const webmBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
+
+        // Convert to WAV format to avoid needing ffmpeg on backend
+        try {
+          const wavBlob = await convertToWav(webmBlob);
+
+          // Pass the actual recorded duration
+          const recordedDuration = startTimeRef.current
+            ? (Date.now() - startTimeRef.current) / 1000
+            : undefined;
+          onRecordingComplete?.(wavBlob, recordedDuration);
+        } catch (err) {
+          console.error('Error converting audio to WAV:', err);
+          // Fallback to original blob if conversion fails
+          const recordedDuration = startTimeRef.current
+            ? (Date.now() - startTimeRef.current) / 1000
+            : undefined;
+          onRecordingComplete?.(webmBlob, recordedDuration);
+        }
 
         // Stop all tracks
         streamRef.current?.getTracks().forEach((track) => {

app/src/lib/hooks/useSystemAudioCapture.ts

@@ -0,0 +1,177 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { isTauri } from '@/lib/tauri';
+
+interface UseSystemAudioCaptureOptions {
+  maxDurationSeconds?: number;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
+}
+
+/**
+ * Hook for native system audio capture using Tauri commands.
+ * Uses ScreenCaptureKit on macOS and WASAPI loopback on Windows.
+ */
+export function useSystemAudioCapture({
+  maxDurationSeconds = 30,
+  onRecordingComplete,
+}: UseSystemAudioCaptureOptions = {}) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const stopRecordingRef = useRef<(() => Promise<void>) | null>(null);
+  const isRecordingRef = useRef(false);
+
+  // Check if system audio capture is supported
+  useEffect(() => {
+    if (!isTauri()) {
+      setIsSupported(false);
+      return;
+    }
+
+    invoke<boolean>('is_system_audio_supported')
+      .then((supported) => {
+        setIsSupported(supported);
+      })
+      .catch(() => {
+        setIsSupported(false);
+      });
+  }, []);
+
+  const startRecording = useCallback(async () => {
+    if (!isTauri()) {
+      const errorMsg = 'System audio capture is only available in the desktop app.';
+      setError(errorMsg);
+      return;
+    }
+
+    if (!isSupported) {
+      const errorMsg = 'System audio capture is not supported on this platform.';
+      setError(errorMsg);
+      return;
+    }
+
+    try {
+      setError(null);
+      setDuration(0);
+
+      // Start native capture
+      await invoke('start_system_audio_capture', {
+        maxDurationSecs: maxDurationSeconds,
+      });
+
+      setIsRecording(true);
+      isRecordingRef.current = true;
+      startTimeRef.current = Date.now();
+
+      // Start timer
+      timerRef.current = window.setInterval(() => {
+        if (startTimeRef.current) {
+          const elapsed = (Date.now() - startTimeRef.current) / 1000;
+          setDuration(elapsed);
+
+          // Auto-stop at max duration
+          if (elapsed >= maxDurationSeconds && stopRecordingRef.current) {
+            void stopRecordingRef.current();
+          }
+        }
+      }, 100);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to start system audio capture. Please check permissions.';
+      setError(errorMessage);
+      setIsRecording(false);
+    }
+  }, [maxDurationSeconds, isSupported]);
+
+  const stopRecording = useCallback(async () => {
+    if (!isRecording || !isTauri()) {
+      return;
+    }
+
+    try {
+      setIsRecording(false);
+      isRecordingRef.current = false;
+
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Stop capture and get base64 WAV data
+      const base64Data = await invoke<string>('stop_system_audio_capture');
+
+      // Convert base64 to Blob
+      const binaryString = atob(base64Data);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+
+      const blob = new Blob([bytes], { type: 'audio/wav' });
+      // Pass the actual recorded duration
+      const recordedDuration = startTimeRef.current 
+        ? (Date.now() - startTimeRef.current) / 1000 
+        : undefined;
+      onRecordingComplete?.(blob, recordedDuration);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to stop system audio capture.';
+      setError(errorMessage);
+    }
+  }, [isRecording, onRecordingComplete]);
+
+  // Store stopRecording in ref for use in timer
+  useEffect(() => {
+    stopRecordingRef.current = stopRecording;
+  }, [stopRecording]);
+
+  const cancelRecording = useCallback(async () => {
+    if (isRecordingRef.current) {
+      await stopRecording();
+    }
+
+    setIsRecording(false);
+    isRecordingRef.current = false;
+    setDuration(0);
+
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [stopRecording]);
+
+  // Cleanup on unmount only
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      // Cancel recording on unmount if still recording
+      if (isRecordingRef.current && isTauri()) {
+        // Call stop directly without the callback to avoid stale closure
+        invoke('stop_system_audio_capture').catch((err) => {
+          console.error('Error stopping audio capture on unmount:', err);
+        });
+      }
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on unmount
+  }, []);
+
+  return {
+    isRecording,
+    duration,
+    error,
+    isSupported,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+  };
+}

app/src/lib/tauri.ts

@@ -54,6 +54,21 @@ export async function stopServer(): Promise<void> {
   }
 }
 
+/**
+ * Set whether the server should keep running when the app closes (Tauri only)
+ */
+export async function setKeepServerRunning(keepRunning: boolean): Promise<void> {
+  if (!isTauri()) {
+    return;
+  }
+
+  try {
+    await invoke('set_keep_server_running', { keepRunning });
+  } catch (error) {
+    console.error('Failed to set keep server running setting:', error);
+  }
+}
+
 /**
  * Setup window close handler to check setting and stop server if needed
  */

app/src/lib/utils/audio.ts

@@ -16,3 +16,104 @@ export function formatAudioDuration(seconds: number): string {
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
+
+/**
+ * Convert any audio blob to WAV format using Web Audio API.
+ * This ensures compatibility without requiring ffmpeg on the backend.
+ */
+export async function convertToWav(audioBlob: Blob): Promise<Blob> {
+  // Create audio context
+  const audioContext = new AudioContext();
+
+  // Read blob as array buffer
+  const arrayBuffer = await audioBlob.arrayBuffer();
+
+  // Decode audio data
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Convert to WAV
+  const wavBlob = audioBufferToWav(audioBuffer);
+
+  // Close audio context to free resources
+  await audioContext.close();
+
+  return wavBlob;
+}
+
+/**
+ * Convert AudioBuffer to WAV blob.
+ */
+function audioBufferToWav(buffer: AudioBuffer): Blob {
+  const numberOfChannels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const format = 1; // PCM
+  const bitDepth = 16;
+
+  const bytesPerSample = bitDepth / 8;
+  const blockAlign = numberOfChannels * bytesPerSample;
+
+  // Interleave channels
+  const interleaved = interleaveChannels(buffer);
+
+  // Create WAV file
+  const dataLength = interleaved.length * bytesPerSample;
+  const buffer2 = new ArrayBuffer(44 + dataLength);
+  const view = new DataView(buffer2);
+
+  // Write WAV header
+  writeString(view, 0, 'RIFF');
+  view.setUint32(4, 36 + dataLength, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, format, true); // audio format (PCM)
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true); // byte rate
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bitDepth, true);
+  writeString(view, 36, 'data');
+  view.setUint32(40, dataLength, true);
+
+  // Write audio data
+  floatTo16BitPCM(view, 44, interleaved);
+
+  return new Blob([buffer2], { type: 'audio/wav' });
+}
+
+/**
+ * Interleave multiple channels into a single array.
+ */
+function interleaveChannels(buffer: AudioBuffer): Float32Array {
+  const numberOfChannels = buffer.numberOfChannels;
+  const length = buffer.length;
+  const interleaved = new Float32Array(length * numberOfChannels);
+
+  for (let channel = 0; channel < numberOfChannels; channel++) {
+    const channelData = buffer.getChannelData(channel);
+    for (let i = 0; i < length; i++) {
+      interleaved[i * numberOfChannels + channel] = channelData[i];
+    }
+  }
+
+  return interleaved;
+}
+
+/**
+ * Write string to DataView.
+ */
+function writeString(view: DataView, offset: number, string: string): void {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+/**
+ * Convert float32 audio data to 16-bit PCM.
+ */
+function floatTo16BitPCM(view: DataView, offset: number, input: Float32Array): void {
+  for (let i = 0; i < input.length; i++, offset += 2) {
+    const s = Math.max(-1, Math.min(1, input[i]));
+    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+  }
+}

app/src/stores/audioChannelStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface AudioChannel {
+  id: string;
+  name: string;
+  is_default: boolean;
+  device_ids: string[];
+  created_at: string;
+}
+
+interface AudioChannelStore {
+  channels: AudioChannel[];
+  setChannels: (channels: AudioChannel[]) => void;
+  addChannel: (channel: AudioChannel) => void;
+  updateChannel: (id: string, channel: Partial<AudioChannel>) => void;
+  removeChannel: (id: string) => void;
+}
+
+export const useAudioChannelStore = create<AudioChannelStore>()(
+  persist(
+    (set) => ({
+      channels: [],
+      setChannels: (channels) => set({ channels }),
+      addChannel: (channel) =>
+        set((state) => ({
+          channels: [...state.channels, channel],
+        })),
+      updateChannel: (id, updates) =>
+        set((state) => ({
+          channels: state.channels.map((ch) => (ch.id === id ? { ...ch, ...updates } : ch)),
+        })),
+      removeChannel: (id) =>
+        set((state) => ({
+          channels: state.channels.filter((ch) => ch.id !== id),
+        })),
+    }),
+    {
+      name: 'voicebox-audio-channels',
+    },
+  ),
+);

app/src/stores/serverStore.ts

@@ -18,7 +18,7 @@ interface ServerStore {
 export const useServerStore = create<ServerStore>()(
   persist(
     (set) => ({
-      serverUrl: 'http://localhost:8000',
+      serverUrl: 'http://127.0.0.1:17493',
       setServerUrl: (url) => set({ serverUrl: url }),
 
       isConnected: false,

backend/channels.py

@@ -0,0 +1,263 @@
+"""
+Audio channel management module.
+"""
+
+from typing import List, Optional
+from datetime import datetime
+import uuid
+from sqlalchemy.orm import Session
+
+from .models import (
+    AudioChannelCreate,
+    AudioChannelUpdate,
+    AudioChannelResponse,
+    ChannelVoiceAssignment,
+    ProfileChannelAssignment,
+)
+from .database import (
+    AudioChannel as DBAudioChannel,
+    ChannelDeviceMapping as DBChannelDeviceMapping,
+    ProfileChannelMapping as DBProfileChannelMapping,
+    VoiceProfile as DBVoiceProfile,
+)
+
+
+async def list_channels(db: Session) -> List[AudioChannelResponse]:
+    """List all audio channels."""
+    channels = db.query(DBAudioChannel).all()
+    result = []
+    
+    for channel in channels:
+        # Get device IDs for this channel
+        device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+            channel_id=channel.id
+        ).all()
+        device_ids = [m.device_id for m in device_mappings]
+        
+        result.append(AudioChannelResponse(
+            id=channel.id,
+            name=channel.name,
+            is_default=channel.is_default,
+            device_ids=device_ids,
+            created_at=channel.created_at,
+        ))
+    
+    return result
+
+
+async def get_channel(channel_id: str, db: Session) -> Optional[AudioChannelResponse]:
+    """Get a channel by ID."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return None
+    
+    # Get device IDs
+    device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+        channel_id=channel.id
+    ).all()
+    device_ids = [m.device_id for m in device_mappings]
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def create_channel(
+    data: AudioChannelCreate,
+    db: Session,
+) -> AudioChannelResponse:
+    """Create a new audio channel."""
+    # Check if name already exists
+    existing = db.query(DBAudioChannel).filter_by(name=data.name).first()
+    if existing:
+        raise ValueError(f"Channel with name '{data.name}' already exists")
+    
+    # Create channel
+    channel = DBAudioChannel(
+        id=str(uuid.uuid4()),
+        name=data.name,
+        is_default=False,
+        created_at=datetime.utcnow(),
+    )
+    db.add(channel)
+    db.flush()
+    
+    # Add device mappings
+    for device_id in data.device_ids:
+        mapping = DBChannelDeviceMapping(
+            id=str(uuid.uuid4()),
+            channel_id=channel.id,
+            device_id=device_id,
+        )
+        db.add(mapping)
+    
+    db.commit()
+    db.refresh(channel)
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=data.device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def update_channel(
+    channel_id: str,
+    data: AudioChannelUpdate,
+    db: Session,
+) -> Optional[AudioChannelResponse]:
+    """Update an audio channel."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return None
+    
+    if channel.is_default:
+        raise ValueError("Cannot modify the default channel")
+    
+    # Update name if provided
+    if data.name is not None:
+        # Check if name already exists (excluding current channel)
+        existing = db.query(DBAudioChannel).filter(
+            DBAudioChannel.name == data.name,
+            DBAudioChannel.id != channel_id
+        ).first()
+        if existing:
+            raise ValueError(f"Channel with name '{data.name}' already exists")
+        channel.name = data.name
+    
+    # Update device mappings if provided
+    if data.device_ids is not None:
+        # Delete existing mappings
+        db.query(DBChannelDeviceMapping).filter_by(channel_id=channel_id).delete()
+        
+        # Add new mappings
+        for device_id in data.device_ids:
+            mapping = DBChannelDeviceMapping(
+                id=str(uuid.uuid4()),
+                channel_id=channel.id,
+                device_id=device_id,
+            )
+            db.add(mapping)
+    
+    db.commit()
+    db.refresh(channel)
+    
+    # Get updated device IDs
+    device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+        channel_id=channel.id
+    ).all()
+    device_ids = [m.device_id for m in device_mappings]
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def delete_channel(channel_id: str, db: Session) -> bool:
+    """Delete an audio channel."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return False
+    
+    if channel.is_default:
+        raise ValueError("Cannot delete the default channel")
+    
+    # Delete device mappings
+    db.query(DBChannelDeviceMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Delete profile-channel mappings
+    db.query(DBProfileChannelMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Delete channel
+    db.delete(channel)
+    db.commit()
+    
+    return True
+
+
+async def get_channel_voices(channel_id: str, db: Session) -> List[str]:
+    """Get list of profile IDs assigned to a channel."""
+    mappings = db.query(DBProfileChannelMapping).filter_by(
+        channel_id=channel_id
+    ).all()
+    return [m.profile_id for m in mappings]
+
+
+async def set_channel_voices(
+    channel_id: str,
+    data: ChannelVoiceAssignment,
+    db: Session,
+) -> None:
+    """Set which voices are assigned to a channel."""
+    # Verify channel exists
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        raise ValueError(f"Channel {channel_id} not found")
+    
+    # Verify all profiles exist
+    for profile_id in data.profile_ids:
+        profile = db.query(DBVoiceProfile).filter_by(id=profile_id).first()
+        if not profile:
+            raise ValueError(f"Profile {profile_id} not found")
+    
+    # Delete existing mappings for this channel
+    db.query(DBProfileChannelMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Add new mappings
+    for profile_id in data.profile_ids:
+        mapping = DBProfileChannelMapping(
+            profile_id=profile_id,
+            channel_id=channel_id,
+        )
+        db.add(mapping)
+    
+    db.commit()
+
+
+async def get_profile_channels(profile_id: str, db: Session) -> List[str]:
+    """Get list of channel IDs assigned to a profile."""
+    mappings = db.query(DBProfileChannelMapping).filter_by(
+        profile_id=profile_id
+    ).all()
+    return [m.channel_id for m in mappings]
+
+
+async def set_profile_channels(
+    profile_id: str,
+    data: ProfileChannelAssignment,
+    db: Session,
+) -> None:
+    """Set which channels a profile is assigned to."""
+    # Verify profile exists
+    profile = db.query(DBVoiceProfile).filter_by(id=profile_id).first()
+    if not profile:
+        raise ValueError(f"Profile {profile_id} not found")
+    
+    # Verify all channels exist
+    for channel_id in data.channel_ids:
+        channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+        if not channel:
+            raise ValueError(f"Channel {channel_id} not found")
+    
+    # Delete existing mappings for this profile
+    db.query(DBProfileChannelMapping).filter_by(profile_id=profile_id).delete()
+    
+    # Add new mappings
+    for channel_id in data.channel_ids:
+        mapping = DBProfileChannelMapping(
+            profile_id=profile_id,
+            channel_id=channel_id,
+        )
+        db.add(mapping)
+    
+    db.commit()

backend/main.py

@@ -47,7 +47,7 @@ app.add_middleware(
 @app.get("/")
 async def root():
     """Root endpoint."""
-    return {"message": "voicebox API", "version": "0.1.0"}
+    return {"message": "voicebox API", "version": "0.1.3"}
 
 
 @app.get("/health", response_model=models.HealthResponse)
@@ -58,10 +58,14 @@ async def health():
     import os
     
     tts_model = tts.get_tts_model()
-    gpu_available = torch.cuda.is_available()
-    
+
+    # Check for GPU availability (CUDA or MPS)
+    has_cuda = torch.cuda.is_available()
+    has_mps = hasattr(torch.backends, 'mps') and torch.backends.mps.is_available()
+    gpu_available = has_cuda or has_mps
+
     vram_used = None
-    if gpu_available:
+    if has_cuda:
         vram_used = torch.cuda.memory_allocated() / 1024 / 1024  # MB
     
     # Check if model is loaded - use the same logic as model status endpoint
@@ -1053,13 +1057,22 @@ async def get_active_tasks():
 # STARTUP & SHUTDOWN
 # ============================================
 
+def _get_gpu_status() -> str:
+    """Get GPU availability status."""
+    if torch.cuda.is_available():
+        return f"CUDA ({torch.cuda.get_device_name(0)})"
+    elif hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
+        return "MPS (Apple Silicon)"
+    return "None (CPU only)"
+
+
 @app.on_event("startup")
 async def startup_event():
     """Run on application startup."""
     print("voicebox API starting up...")
     database.init_db()
     print(f"Database initialized at {database._db_path}")
-    print(f"GPU available: {torch.cuda.is_available()}")
+    print(f"GPU available: {_get_gpu_status()}")
 
 
 @app.on_event("shutdown")

backend/voicebox-server.spec

@@ -4,15 +4,16 @@ from PyInstaller.utils.hooks import collect_submodules
 from PyInstaller.utils.hooks import copy_metadata
 
 datas = []
-hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli']
+hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli', 'pkg_resources.extern']
 datas += collect_data_files('qwen_tts')
 datas += copy_metadata('qwen-tts')
 hiddenimports += collect_submodules('qwen_tts')
+hiddenimports += collect_submodules('jaraco')
 
 
 a = Analysis(
     ['server.py'],
-    pathex=['/Users/jamespine/Projects/voice/Qwen3-TTS'],
+    pathex=['C:\\Users\\ijame\\Projects\\voice\\Qwen3-TTS'],
     binaries=[],
     datas=datas,
     hiddenimports=hiddenimports,

landing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/landing",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Landing page for voicebox.sh",
   "scripts": {
     "dev": "bun --bun next dev --turbo",

landing/src/app/page.tsx

@@ -151,11 +151,13 @@ export default function Home() {
                       <span className="flex-1 text-center px-4">Windows</span>
                     </a>
                   </Button>
-                  <Button asChild size="lg" className="w-full px-0">
+                  <Button asChild size="lg" className="w-full px-0" disabled>
                     <a
                       href={downloadLinks.linux}
-                      download
-                      className="flex items-center w-full relative"
+                      onClick={(e) => e.preventDefault()}
+                      className="flex items-center w-full relative opacity-50 cursor-not-allowed"
+                      title="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
+                      aria-label="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
                     >
                       <div className="flex items-center gap-2 flex-shrink-0 pl-4">
                         <LinuxIcon className="h-5 w-5" />

landing/src/components/DownloadSection.tsx

@@ -12,18 +12,21 @@ export function DownloadSection() {
       icon: Laptop,
       link: DOWNLOAD_LINKS.macArm,
       description: 'macOS (Intel + Apple Silicon)',
+      disabled: false,
     },
     {
       platform: 'Windows',
       icon: Monitor,
       link: DOWNLOAD_LINKS.windows,
       description: 'Windows x64',
+      disabled: false,
     },
     {
       platform: 'Linux',
       icon: Terminal,
       link: DOWNLOAD_LINKS.linux,
       description: 'Linux AppImage',
+      disabled: true,
     },
   ];
 
@@ -34,10 +37,14 @@ export function DownloadSection() {
         <p className="text-2xl font-bold">{LATEST_VERSION}</p>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6">
-        {downloads.map(({ platform, icon: Icon, link, description }) => (
+        {downloads.map(({ platform, icon: Icon, link, description, disabled }) => (
           <Card
             key={platform}
-            className="hover:border-primary/20 hover:shadow-lg hover:shadow-primary/3 transition-all duration-200 hover:-translate-y-0.5"
+            className={`transition-all duration-200 ${
+              disabled
+                ? 'opacity-50'
+                : 'hover:border-primary/20 hover:shadow-lg hover:shadow-primary/3 hover:-translate-y-0.5'
+            }`}
           >
             <CardContent className="p-6">
               <div className="flex flex-col items-center text-center space-y-4">
@@ -48,8 +55,8 @@ export function DownloadSection() {
                   <h3 className="text-lg font-semibold mb-1">{platform}</h3>
                   <p className="text-sm text-muted-foreground">{description}</p>
                 </div>
-                <Button asChild size="lg" className="w-full">
-                  <a href={link} download>
+                <Button asChild size="lg" className="w-full" disabled={disabled}>
+                  <a href={link} download className={disabled ? 'pointer-events-none' : ''}>
                     <Download className="h-4 w-4 mr-2" />
                     Download
                   </a>

landing/src/lib/releases.ts

@@ -52,13 +52,18 @@ export async function getLatestRelease(): Promise<ReleaseInfo> {
       const name = asset.name.toLowerCase();
       const url = asset.browser_download_url;
 
-      if (name.includes('aarch64') || name.includes('arm64')) {
+      // Skip signature files and other non-downloadable files
+      if (name.endsWith('.sig') || name.endsWith('.json') || name.endsWith('.txt')) {
+        continue;
+      }
+
+      if ((name.includes('aarch64') || name.includes('arm64')) && name.endsWith('.app.tar.gz')) {
         downloadLinks.macArm = url;
-      } else if (name.includes('x64') && name.includes('.dmg')) {
+      } else if (name.includes('x64') && name.endsWith('.app.tar.gz')) {
         downloadLinks.macIntel = url;
-      } else if (name.includes('.msi')) {
+      } else if (name.endsWith('.msi')) {
         downloadLinks.windows = url;
-      } else if (name.includes('.appimage') || name.includes('.deb')) {
+      } else if (name.endsWith('.appimage') || name.endsWith('.deb')) {
         downloadLinks.linux = url;
       }
     }
@@ -69,10 +74,8 @@ export async function getLatestRelease(): Promise<ReleaseInfo> {
     const releaseInfo: ReleaseInfo = {
       version,
       downloadLinks: {
-        macArm:
-          downloadLinks.macArm || `${baseUrl}/voicebox_${version.replace('v', '')}_aarch64.dmg`,
-        macIntel:
-          downloadLinks.macIntel || `${baseUrl}/voicebox_${version.replace('v', '')}_x64.dmg`,
+        macArm: downloadLinks.macArm || `${baseUrl}/voicebox_aarch64.app.tar.gz`,
+        macIntel: downloadLinks.macIntel || `${baseUrl}/voicebox_x64.app.tar.gz`,
         windows:
           downloadLinks.windows || `${baseUrl}/voicebox_${version.replace('v', '')}_x64_en-US.msi`,
         linux: downloadLinks.linux || `${baseUrl}/voicebox_x86_64-unknown-linux-gnu.AppImage`,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "voicebox",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "private": true,
   "workspaces": [
     "app",
@@ -12,7 +12,7 @@
     "dev": "cd tauri && bun run tauri dev",
     "dev:web": "cd web && bun run dev",
     "dev:landing": "cd landing && bun run dev",
-    "dev:server": "source backend/venv/bin/activate && uvicorn backend.main:app --reload --port 8000",
+    "dev:server": "uvicorn backend.main:app --reload --port 8000",
     "build": "cd tauri && bun run tauri build",
     "build:web": "cd web && bun run build",
     "build:landing": "cd landing && bun run build",

scripts/update-icons.sh

@@ -95,6 +95,25 @@ for size in 30 44 71 89 107 142 150 284 310; do
 done
 sips -s format png -z 50 50 "$SOURCE_ICON" --out "$ICONS_DIR/StoreLogo.png" 2>/dev/null
 
+# Windows icon.ico (multi-size ICO file)
+echo "Generating Windows icon.ico..."
+if command -v convert &> /dev/null; then
+  # Create temporary PNG files at different sizes for ICO
+  # Windows typically uses: 16x16, 32x32, 48x48, 256x256
+  sips -s format png -z 16 16 "$SOURCE_ICON" --out /tmp/icon-16.png 2>/dev/null
+  sips -s format png -z 32 32 "$SOURCE_ICON" --out /tmp/icon-32.png 2>/dev/null
+  sips -s format png -z 48 48 "$SOURCE_ICON" --out /tmp/icon-48.png 2>/dev/null
+  sips -s format png -z 256 256 "$SOURCE_ICON" --out /tmp/icon-256.png 2>/dev/null
+  # Combine into proper multi-size ICO file
+  convert /tmp/icon-16.png /tmp/icon-32.png /tmp/icon-48.png /tmp/icon-256.png "$ICONS_DIR/icon.ico" 2>/dev/null
+  rm -f /tmp/icon-16.png /tmp/icon-32.png /tmp/icon-48.png /tmp/icon-256.png 2>/dev/null
+  echo "  ✓ Generated Windows icon.ico"
+else
+  # Fallback: use sips to create a basic ICO (single size)
+  echo "  ⚠ ImageMagick not found - generating basic icon.ico (single size)"
+  sips -s format ico -z 256 256 "$SOURCE_ICON" --out "$ICONS_DIR/icon.ico" 2>/dev/null || echo "  ⚠ Failed to generate icon.ico (sips may not support ICO format)"
+fi
+
 # iOS Icons
 echo "Generating iOS icons..."
 mkdir -p "$ICONS_DIR/ios"
@@ -188,6 +207,7 @@ echo "Updated:"
 echo "  ✓ Liquid Glass icon bundle with all appearance variants"
 echo "  ✓ macOS/Desktop fallback icons"
 echo "  ✓ Windows Square logos"
+echo "  ✓ Windows icon.ico (multi-size)"
 echo "  ✓ iOS AppIcons (18 sizes)"
 echo "  ✓ Android mipmap icons (5 densities)"
 echo "  ✓ Landing page logo"

tauri/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@voicebox/tauri",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

tauri/src-tauri/Cargo.lock

@@ -103,6 +103,24 @@ version = "0.22.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
+[[package]]
+name = "bindgen"
+version = "0.72.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "993776b509cfb49c750f11b8f07a46fa23e0a1386ffc01fb1e7d343efc387895"
+dependencies = [
+ "bitflags 2.10.0",
+ "cexpr",
+ "clang-sys",
+ "itertools",
+ "proc-macro2",
+ "quote",
+ "regex",
+ "rustc-hash",
+ "shlex",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "bitflags"
 version = "1.3.2"
@@ -267,6 +285,15 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6d43a04d8753f35258c91f8ec639f792891f748a1edbd759cf1dcea3382ad83c"
 
+[[package]]
+name = "cexpr"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6fac387a98bb7c37292057cffc56d62ecb629900026402633ae9160df93a8766"
+dependencies = [
+ "nom",
+]
+
 [[package]]
 name = "cfb"
 version = "0.7.3"
@@ -312,6 +339,17 @@ dependencies = [
  "windows-link 0.2.1",
 ]
 
+[[package]]
+name = "clang-sys"
+version = "1.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b023947811758c97c59bf9d1c188fd619ad4718dcaa767947df1cadb14f39f4"
+dependencies = [
+ "glob",
+ "libc",
+ "libloading 0.8.9",
+]
+
 [[package]]
 name = "combine"
 version = "4.6.7"
@@ -378,6 +416,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "coreaudio-sys"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ceec7a6067e62d6f931a2baf6f3a751f4a892595bcec1461a3c94ef9949864b6"
+dependencies = [
+ "bindgen",
+]
+
 [[package]]
 name = "cpufeatures"
 version = "0.2.17"
@@ -646,6 +693,12 @@ version = "1.0.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d0881ea181b1df73ff77ffaaf9c7544ecc11e82fba9b5f27b262a3c73a332555"
 
+[[package]]
+name = "either"
+version = "1.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
+
 [[package]]
 name = "embed-resource"
 version = "3.0.6"
@@ -1212,6 +1265,12 @@ version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
 
+[[package]]
+name = "hound"
+version = "3.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62adaabb884c94955b19907d60019f4e145d091c75345379e70d1ee696f7854f"
+
 [[package]]
 name = "html5ever"
 version = "0.29.1"
@@ -1534,6 +1593,15 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "itertools"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "413ee7dfc52ee1a4949ceeb7dbc8a33f2d6c088194d9f922fb8318faf1f01186"
+dependencies = [
+ "either",
+]
+
 [[package]]
 name = "itoa"
 version = "1.0.17"
@@ -1666,7 +1734,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6e9ec52138abedcc58dc17a7c6c0c00a2bdb4f3427c7f63fa97fd0d859155caf"
 dependencies = [
  "gtk-sys",
- "libloading",
+ "libloading 0.7.4",
  "once_cell",
 ]
 
@@ -1686,6 +1754,16 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "libloading"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7c4b02199fee7c5d21a5ae7d8cfa79a6ef5bb2fc834d6e9058e89c825efdc55"
+dependencies = [
+ "cfg-if",
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "libredox"
 version = "0.1.12"
@@ -1736,6 +1814,15 @@ version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4"
 
+[[package]]
+name = "malloc_buf"
+version = "0.0.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62bb907fe88d54d8d9ce32a3cceab4218ed2f6b7d35617cafe9adf84e43919cb"
+dependencies = [
+ "libc",
+]
+
 [[package]]
 name = "markup5ever"
 version = "0.14.1"
@@ -1788,6 +1875,12 @@ version = "0.3.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
 
+[[package]]
+name = "minimal-lexical"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
+
 [[package]]
 name = "minisign-verify"
 version = "0.2.4"
@@ -1878,12 +1971,31 @@ version = "0.1.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 
+[[package]]
+name = "nom"
+version = "7.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d273983c5a657a70a3e8f2a01329822f3b8c8172b73826411a55751e404a0a4a"
+dependencies = [
+ "memchr",
+ "minimal-lexical",
+]
+
 [[package]]
 name = "num-conv"
 version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf97ec579c3c42f953ef76dbf8d55ac91fb219dde70e49aa4a6b7d74e9919050"
 
+[[package]]
+name = "num-integer"
+version = "0.1.46"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7969661fd2958a5cb096e56c8e1ad0444ac2bbcd0061bd28660485a44879858f"
+dependencies = [
+ "num-traits",
+]
+
 [[package]]
 name = "num-traits"
 version = "0.2.19"
@@ -1915,6 +2027,15 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "objc"
+version = "0.2.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "915b1b472bc21c53464d6c8461c9d3af805ba1ef837e1cac254428f4a77177b1"
+dependencies = [
+ "malloc_buf",
+]
+
 [[package]]
 name = "objc2"
 version = "0.6.3"
@@ -3016,6 +3137,12 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"
 
+[[package]]
+name = "screencapturekit"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ccf069cb109cf8e01ebdca0d55dfce45dbbf669e8c56ed5c62150b056d3ec9f"
+
 [[package]]
 name = "selectors"
 version = "0.24.0"
@@ -3504,7 +3631,7 @@ dependencies = [
  "tao-macros",
  "unicode-segmentation",
  "url",
- "windows",
+ "windows 0.61.3",
  "windows-core 0.61.2",
  "windows-version",
  "x11-dl",
@@ -3586,7 +3713,7 @@ dependencies = [
  "webkit2gtk",
  "webview2-com",
  "window-vibrancy",
- "windows",
+ "windows 0.61.3",
 ]
 
 [[package]]
@@ -3709,6 +3836,16 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "tauri-plugin-process"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d55511a7bf6cd70c8767b02c97bf8134fa434daf3926cfc1be0a0f94132d165a"
+dependencies = [
+ "tauri",
+ "tauri-plugin",
+]
+
 [[package]]
 name = "tauri-plugin-shell"
 version = "2.3.4"
@@ -3784,7 +3921,7 @@ dependencies = [
  "url",
  "webkit2gtk",
  "webview2-com",
- "windows",
+ "windows 0.61.3",
 ]
 
 [[package]]
@@ -3810,7 +3947,7 @@ dependencies = [
  "url",
  "webkit2gtk",
  "webview2-com",
- "windows",
+ "windows 0.61.3",
  "wry",
 ]
 
@@ -4356,17 +4493,27 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "voicebox"
-version = "0.1.0"
+version = "0.1.3"
 dependencies = [
+ "base64 0.22.1",
+ "core-foundation-sys",
+ "coreaudio-sys",
+ "hound",
+ "objc",
+ "scopeguard",
+ "screencapturekit",
  "serde",
  "serde_json",
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",
  "tauri-plugin-fs",
+ "tauri-plugin-process",
  "tauri-plugin-shell",
  "tauri-plugin-updater",
  "tokio",
+ "wasapi",
+ "windows 0.62.2",
 ]
 
 [[package]]
@@ -4408,6 +4555,19 @@ dependencies = [
  "try-lock",
 ]
 
+[[package]]
+name = "wasapi"
+version = "0.22.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7834ac561bea8a7413661fdda62180f9e054f99815269cd3572cf7e40d9c3191"
+dependencies = [
+ "log",
+ "num-integer",
+ "thiserror 2.0.18",
+ "windows 0.62.2",
+ "windows-core 0.62.2",
+]
+
 [[package]]
 name = "wasi"
 version = "0.9.0+wasi-snapshot-preview1"
@@ -4582,7 +4742,7 @@ checksum = "7130243a7a5b33c54a444e54842e6a9e133de08b5ad7b5861cd8ed9a6a5bc96a"
 dependencies = [
  "webview2-com-macros",
  "webview2-com-sys",
- "windows",
+ "windows 0.61.3",
  "windows-core 0.61.2",
  "windows-implement",
  "windows-interface",
@@ -4606,7 +4766,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "381336cfffd772377d291702245447a5251a2ffa5bad679c99e61bc48bacbf9c"
 dependencies = [
  "thiserror 2.0.18",
- "windows",
+ "windows 0.61.3",
  "windows-core 0.61.2",
 ]
 
@@ -4662,11 +4822,23 @@ version = "0.61.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
 dependencies = [
- "windows-collections",
+ "windows-collections 0.2.0",
  "windows-core 0.61.2",
- "windows-future",
+ "windows-future 0.2.1",
  "windows-link 0.1.3",
- "windows-numerics",
+ "windows-numerics 0.2.0",
+]
+
+[[package]]
+name = "windows"
+version = "0.62.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "527fadee13e0c05939a6a05d5bd6eec6cd2e3dbd648b9f8e447c6518133d8580"
+dependencies = [
+ "windows-collections 0.3.2",
+ "windows-core 0.62.2",
+ "windows-future 0.3.2",
+ "windows-numerics 0.3.1",
 ]
 
 [[package]]
@@ -4678,6 +4850,15 @@ dependencies = [
  "windows-core 0.61.2",
 ]
 
+[[package]]
+name = "windows-collections"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23b2d95af1a8a14a3c7367e1ed4fc9c20e0a26e79551b1454d72583c97cc6610"
+dependencies = [
+ "windows-core 0.62.2",
+]
+
 [[package]]
 name = "windows-core"
 version = "0.61.2"
@@ -4712,7 +4893,18 @@ checksum = "fc6a41e98427b19fe4b73c550f060b59fa592d7d686537eebf9385621bfbad8e"
 dependencies = [
  "windows-core 0.61.2",
  "windows-link 0.1.3",
- "windows-threading",
+ "windows-threading 0.1.0",
+]
+
+[[package]]
+name = "windows-future"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1d6f90251fe18a279739e78025bd6ddc52a7e22f921070ccdc67dde84c605cb"
+dependencies = [
+ "windows-core 0.62.2",
+ "windows-link 0.2.1",
+ "windows-threading 0.2.1",
 ]
 
 [[package]]
@@ -4759,6 +4951,16 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-numerics"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6e2e40844ac143cdb44aead537bbf727de9b044e107a0f1220392177d15b0f26"
+dependencies = [
+ "windows-core 0.62.2",
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "windows-result"
 version = "0.3.4"
@@ -4897,6 +5099,15 @@ dependencies = [
  "windows-link 0.1.3",
 ]
 
+[[package]]
+name = "windows-threading"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3949bd5b99cafdf1c7ca86b43ca564028dfe27d66958f2470940f73d86d75b37"
+dependencies = [
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "windows-version"
 version = "0.1.7"
@@ -5123,7 +5334,7 @@ dependencies = [
  "webkit2gtk",
  "webkit2gtk-sys",
  "webview2-com",
- "windows",
+ "windows 0.61.3",
  "windows-core 0.61.2",
  "windows-version",
  "x11-dl",

tauri/src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "voicebox"
-version = "0.1.0"
+version = "0.1.3"
 description = "A production-quality desktop app for Qwen3-TTS voice cloning and generation"
 authors = ["you"]
 license = ""
@@ -20,9 +20,23 @@ tauri-plugin-shell = "2.0"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 tokio = { version = "1", features = ["full"] }
+hound = "3.5"
+base64 = "0.22"
+scopeguard = "1.2.0"
+
+[target.'cfg(target_os = "macos")'.dependencies]
+screencapturekit = { version = "1", features = ["async"] }
+coreaudio-sys = "0.2"
+objc = "0.2"
+core-foundation-sys = "0.8"
+
+[target.'cfg(target_os = "windows")'.dependencies]
+wasapi = "0.22"
+windows = { version = "0.62", features = ["Win32_Foundation", "Win32_UI_WindowsAndMessaging", "Win32_System_Com"] }
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
 tauri-plugin-updater = "2.0"
+tauri-plugin-process = "2.0"
 
 [features]
 # This feature is used for production builds or when `devPath` points to the filesystem

tauri/src-tauri/Entitlements.plist

@@ -8,5 +8,7 @@
     <true/>
     <key>com.apple.security.cs.disable-library-validation</key>
     <true/>
+    <key>com.apple.security.device.audio-input</key>
+    <true/>
 </dict>
 </plist>

tauri/src-tauri/Info.plist

@@ -8,5 +8,7 @@
 	<string>voicebox</string>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>voicebox needs microphone access to record voice samples for voice cloning.</string>
+	<key>NSScreenCaptureUsageDescription</key>
+	<string>Voicebox needs screen capture access to record system audio for voice samples.</string>
 </dict>
 </plist>

tauri/src-tauri/build.rs

@@ -1,6 +1,28 @@
+#[cfg(target_os = "macos")]
 use std::process::Command;
 
 fn main() {
+    // Link Swift runtime libraries for screencapturekit crate
+    #[cfg(target_os = "macos")]
+    {
+        // Add Swift runtime library paths to RPATH
+        println!("cargo:rustc-link-arg=-Wl,-rpath,/usr/lib/swift");
+        println!("cargo:rustc-link-arg=-L/usr/lib/swift");
+
+        // Also try Xcode's Swift libraries
+        if let Ok(output) = Command::new("xcode-select").arg("-p").output() {
+            if output.status.success() {
+                let xcode_path = String::from_utf8_lossy(&output.stdout).trim().to_string();
+                let swift_lib_path = format!(
+                    "{}/Toolchains/XcodeDefault.xctoolchain/usr/lib/swift/macosx",
+                    xcode_path
+                );
+                println!("cargo:rustc-link-arg=-Wl,-rpath,{}", swift_lib_path);
+                println!("cargo:rustc-link-arg=-L{}", swift_lib_path);
+            }
+        }
+    }
+
     // Compile macOS Liquid Glass icon
     #[cfg(target_os = "macos")]
     {
@@ -20,14 +42,21 @@ fn main() {
             let output = Command::new("xcrun")
                 .args([
                     "actool",
-                    "--compile", &gen_dir,
-                    "--output-format", "human-readable-text",
-                    "--output-partial-info-plist", &partial_plist,
-                    "--app-icon", "voicebox",
+                    "--compile",
+                    &gen_dir,
+                    "--output-format",
+                    "human-readable-text",
+                    "--output-partial-info-plist",
+                    &partial_plist,
+                    "--app-icon",
+                    "voicebox",
                     "--include-all-app-icons",
-                    "--target-device", "mac",
-                    "--minimum-deployment-target", "11.0",
-                    "--platform", "macosx",
+                    "--target-device",
+                    "mac",
+                    "--minimum-deployment-target",
+                    "11.0",
+                    "--platform",
+                    "macosx",
                     &icon_source,
                 ])
                 .output();
@@ -48,7 +77,10 @@ fn main() {
                 }
             }
         } else {
-            println!("cargo:warning=Icon source not found at {}, skipping icon compilation", icon_source);
+            println!(
+                "cargo:warning=Icon source not found at {}, skipping icon compilation",
+                icon_source
+            );
         }
     }
 

tauri/src-tauri/capabilities/default.json

@@ -17,6 +17,7 @@
     "shell:allow-execute",
     "shell:allow-spawn",
     "updater:default",
+    "process:default",
     "dialog:default",
     "dialog:allow-save",
     "dialog:allow-open",

tauri/src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default permissions for voicebox","remote":{"urls":["http://localhost:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:window:default","core:window:allow-start-dragging","core:webview:default","core:webview:allow-internal-toggle-devtools","shell:allow-open","shell:allow-execute","shell:allow-spawn","updater:default","dialog:default","dialog:allow-save","dialog:allow-open","fs:default","fs:read-all","fs:write-all"],"platforms":["linux","macOS","windows"]}}
+{"default":{"identifier":"default","description":"Default permissions for voicebox","remote":{"urls":["http://localhost:*"]},"local":true,"windows":["main"],"permissions":["core:default","core:window:default","core:window:allow-start-dragging","core:webview:default","core:webview:allow-internal-toggle-devtools","shell:allow-open","shell:allow-execute","shell:allow-spawn","updater:default","process:default","dialog:default","dialog:allow-save","dialog:allow-open","fs:default","fs:read-all","fs:write-all"],"platforms":["linux","macOS","windows"]}}

tauri/src-tauri/gen/schemas/desktop-schema.json

@@ -5948,6 +5948,36 @@
           "const": "fs:write-files",
           "markdownDescription": "This enables all file write related commands without any pre-configured accessible paths."
         },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
         {
           "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
           "type": "string",

tauri/src-tauri/gen/schemas/macOS-schema.json

@@ -5948,6 +5948,36 @@
           "const": "fs:write-files",
           "markdownDescription": "This enables all file write related commands without any pre-configured accessible paths."
         },
+        {
+          "description": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`",
+          "type": "string",
+          "const": "process:default",
+          "markdownDescription": "This permission set configures which\nprocess features are by default exposed.\n\n#### Granted Permissions\n\nThis enables to quit via `allow-exit` and restart via `allow-restart`\nthe application.\n\n#### This default permission set includes:\n\n- `allow-exit`\n- `allow-restart`"
+        },
+        {
+          "description": "Enables the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-exit",
+          "markdownDescription": "Enables the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:allow-restart",
+          "markdownDescription": "Enables the restart command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the exit command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-exit",
+          "markdownDescription": "Denies the exit command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the restart command without any pre-configured scope.",
+          "type": "string",
+          "const": "process:deny-restart",
+          "markdownDescription": "Denies the restart command without any pre-configured scope."
+        },
         {
           "description": "This permission set configures which\nshell functionality is exposed by default.\n\n#### Granted Permissions\n\nIt allows to use the `open` functionality with a reasonable\nscope pre-configured. It will allow opening `http(s)://`,\n`tel:` and `mailto:` links.\n\n#### This default permission set includes:\n\n- `allow-open`",
           "type": "string",

tauri/src-tauri/src/audio_capture/macos.rs

@@ -0,0 +1,255 @@
+use crate::audio_capture::AudioCaptureState;
+use base64::{engine::general_purpose, Engine as _};
+use hound::{WavSpec, WavWriter};
+use screencapturekit::{
+    cm::CMSampleBuffer,
+    shareable_content::SCShareableContent,
+    stream::{
+        configuration::SCStreamConfiguration,
+        content_filter::SCContentFilter,
+        output_trait::SCStreamOutputTrait,
+        output_type::SCStreamOutputType,
+        sc_stream::SCStream,
+    },
+};
+use std::io::Cursor;
+use std::sync::{Arc, Mutex};
+use tokio::sync::mpsc;
+
+pub async fn start_capture(
+    state: &AudioCaptureState,
+    max_duration_secs: u32,
+) -> Result<(), String> {
+    // Reset previous samples
+    state.reset();
+
+    // Get shareable content
+    let content = SCShareableContent::get()
+        .map_err(|e| format!("Failed to get shareable content: {}", e))?;
+
+    // Get first display
+    let displays = content.displays();
+    if displays.is_empty() {
+        return Err("No displays available".to_string());
+    }
+    let display = &displays[0];
+
+    // Create content filter for desktop audio
+    let filter = SCContentFilter::create()
+        .with_display(display)
+        .with_excluding_windows(&[])
+        .build();
+
+    // Create stream configuration - audio only
+    let mut config = SCStreamConfiguration::default();
+    config.set_captures_audio(true);
+    config.set_excludes_current_process_audio(false);
+    config.set_sample_rate(48000); // Use i32 directly
+    config.set_channel_count(2); // Use i32 directly
+
+    // Create stream using builder
+    let (tx, mut rx) = mpsc::channel::<()>(1);
+    *state.stop_tx.lock().unwrap() = Some(tx);
+
+    let samples = state.samples.clone();
+    let sample_rate = state.sample_rate.clone();
+    let channels = state.channels.clone();
+
+    // Set sample rate and channels
+    *sample_rate.lock().unwrap() = 48000;
+    *channels.lock().unwrap() = 2;
+
+    // Create output handler struct
+    struct AudioHandler {
+        samples: Arc<Mutex<Vec<f32>>>,
+    }
+
+    impl SCStreamOutputTrait for AudioHandler {
+        fn did_output_sample_buffer(
+            &self,
+            sample: CMSampleBuffer,
+            _type: SCStreamOutputType,
+        ) {
+            if _type == SCStreamOutputType::Audio {
+                if let Ok(audio_samples) = extract_audio_samples(sample) {
+                    let mut samples_guard = self.samples.lock().unwrap();
+                    samples_guard.extend_from_slice(&audio_samples);
+                }
+            }
+        }
+    }
+
+    let handler = AudioHandler {
+        samples: samples.clone(),
+    };
+
+    // Create stream
+    let mut stream = SCStream::new(&filter, &config);
+    
+    // Add output handler for audio (order: handler, then output_type)
+    stream.add_output_handler(handler, SCStreamOutputType::Audio);
+
+    // Store stream reference
+    *state.stream.lock().unwrap() = Some(stream.clone());
+
+    stream.start_capture().map_err(|e| format!("Failed to start capture: {}", e))?;
+
+    // Spawn task to stop after max duration
+    let stream_clone = stream.clone();
+    tokio::spawn(async move {
+        tokio::select! {
+            _ = tokio::time::sleep(tokio::time::Duration::from_secs(max_duration_secs as u64)) => {
+                // Timeout reached
+            }
+            _ = rx.recv() => {
+                // Manual stop
+            }
+        }
+        let _ = stream_clone.stop_capture();
+    });
+
+    Ok(())
+}
+
+pub async fn stop_capture(state: &AudioCaptureState) -> Result<String, String> {
+    // Signal stop
+    if let Some(tx) = state.stop_tx.lock().unwrap().take() {
+        let _ = tx.send(());
+    }
+
+    // Stop stream if still active
+    if let Some(stream) = state.stream.lock().unwrap().take() {
+        let _ = stream.stop_capture();
+    }
+
+    // Wait a bit for capture to stop
+    tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+
+    // Get samples
+    let samples = state.samples.lock().unwrap().clone();
+    let sample_rate = *state.sample_rate.lock().unwrap();
+    let channels = *state.channels.lock().unwrap();
+
+    if samples.is_empty() {
+        return Err("No audio samples captured".to_string());
+    }
+
+    // Convert to WAV
+    let wav_data = samples_to_wav(&samples, sample_rate, channels)?;
+    
+    // Encode to base64
+    let base64_data = general_purpose::STANDARD.encode(&wav_data);
+    
+    Ok(base64_data)
+}
+
+pub fn is_supported() -> bool {
+    // ScreenCaptureKit requires macOS 12.3+
+    // Check if we're on a supported version
+    #[cfg(target_os = "macos")]
+    {
+        // Basic check - ScreenCaptureKit should be available on macOS 12.3+
+        true
+    }
+    #[cfg(not(target_os = "macos"))]
+    {
+        false
+    }
+}
+
+fn extract_audio_samples(sample_buffer: CMSampleBuffer) -> Result<Vec<f32>, String> {
+    // Use the crate's built-in method to get audio buffer list
+    let audio_buffer_list = sample_buffer
+        .audio_buffer_list()
+        .ok_or_else(|| "Failed to get audio buffer list".to_string())?;
+
+    let buffers: Vec<_> = audio_buffer_list.iter().collect();
+    let num_buffers = buffers.len();
+    
+    if num_buffers == 0 {
+        return Ok(Vec::new());
+    }
+
+    // ScreenCaptureKit on macOS provides audio in Float32 format
+    // The audio can be either:
+    // - Interleaved (1 buffer with L,R,L,R,... samples)
+    // - Planar (2 buffers, one for L channel, one for R channel)
+    
+    if num_buffers == 1 {
+        // Interleaved stereo or mono in a single buffer
+        let buffer = &buffers[0];
+        let data_bytes = buffer.data();
+        let num_samples = data_bytes.len() / std::mem::size_of::<f32>();
+        
+        if num_samples > 0 {
+            unsafe {
+                let data_ptr = data_bytes.as_ptr() as *const f32;
+                let data = std::slice::from_raw_parts(data_ptr, num_samples);
+                return Ok(data.to_vec());
+            }
+        }
+    } else {
+        // Planar format - separate buffer for each channel
+        // We need to interleave them: L0, R0, L1, R1, ...
+        let mut channel_data: Vec<Vec<f32>> = Vec::new();
+        let mut max_samples = 0;
+        
+        for buffer in &buffers {
+            let data_bytes = buffer.data();
+            let num_samples = data_bytes.len() / std::mem::size_of::<f32>();
+            
+            if num_samples > 0 {
+                unsafe {
+                    let data_ptr = data_bytes.as_ptr() as *const f32;
+                    let data = std::slice::from_raw_parts(data_ptr, num_samples);
+                    channel_data.push(data.to_vec());
+                    max_samples = max_samples.max(num_samples);
+                }
+            }
+        }
+        
+        // Interleave the channels
+        let mut interleaved = Vec::with_capacity(max_samples * num_buffers);
+        for i in 0..max_samples {
+            for channel in &channel_data {
+                if i < channel.len() {
+                    interleaved.push(channel[i]);
+                } else {
+                    interleaved.push(0.0); // Pad with silence if needed
+                }
+            }
+        }
+        
+        return Ok(interleaved);
+    }
+
+    Ok(Vec::new())
+}
+
+fn samples_to_wav(samples: &[f32], sample_rate: u32, channels: u16) -> Result<Vec<u8>, String> {
+    let mut buffer = Vec::new();
+    let cursor = Cursor::new(&mut buffer);
+    
+    let spec = WavSpec {
+        channels,
+        sample_rate,
+        bits_per_sample: 16,
+        sample_format: hound::SampleFormat::Int,
+    };
+
+    let mut writer = WavWriter::new(cursor, spec)
+        .map_err(|e| format!("Failed to create WAV writer: {}", e))?;
+
+    // Convert f32 samples to i16
+    for sample in samples {
+        let clamped = sample.clamp(-1.0, 1.0);
+        let i16_sample = (clamped * 32767.0) as i16;
+        writer.write_sample(i16_sample)
+            .map_err(|e| format!("Failed to write sample: {}", e))?;
+    }
+
+    writer.finalize()
+        .map_err(|e| format!("Failed to finalize WAV: {}", e))?;
+
+    Ok(buffer)
+}

tauri/src-tauri/src/audio_capture/mod.rs

@@ -0,0 +1,43 @@
+#[cfg(target_os = "macos")]
+mod macos;
+#[cfg(target_os = "windows")]
+mod windows;
+
+#[cfg(target_os = "macos")]
+pub use macos::*;
+#[cfg(target_os = "windows")]
+pub use windows::*;
+
+use std::sync::{Arc, Mutex};
+
+#[cfg(target_os = "macos")]
+use screencapturekit::stream::sc_stream::SCStream;
+
+pub struct AudioCaptureState {
+    pub samples: Arc<Mutex<Vec<f32>>>,
+    pub sample_rate: Arc<Mutex<u32>>,
+    pub channels: Arc<Mutex<u16>>,
+    pub stop_tx: Arc<Mutex<Option<tokio::sync::mpsc::Sender<()>>>>,
+    pub error: Arc<Mutex<Option<String>>>,
+    #[cfg(target_os = "macos")]
+    pub stream: Arc<Mutex<Option<SCStream>>>,
+}
+
+impl AudioCaptureState {
+    pub fn new() -> Self {
+        Self {
+            samples: Arc::new(Mutex::new(Vec::new())),
+            sample_rate: Arc::new(Mutex::new(44100)),
+            channels: Arc::new(Mutex::new(2)),
+            stop_tx: Arc::new(Mutex::new(None)),
+            error: Arc::new(Mutex::new(None)),
+            #[cfg(target_os = "macos")]
+            stream: Arc::new(Mutex::new(None)),
+        }
+    }
+
+    pub fn reset(&self) {
+        *self.samples.lock().unwrap() = Vec::new();
+        *self.error.lock().unwrap() = None;
+    }
+}

tauri/src-tauri/src/audio_capture/windows.rs

@@ -0,0 +1,288 @@
+use crate::audio_capture::AudioCaptureState;
+use base64::{engine::general_purpose, Engine as _};
+use hound::{WavSpec, WavWriter};
+use std::io::Cursor;
+use std::sync::Arc;
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::thread;
+use wasapi::*;
+use windows::Win32::System::Com::{CoInitializeEx, CoUninitialize, COINIT_MULTITHREADED};
+
+pub async fn start_capture(
+    state: &AudioCaptureState,
+    max_duration_secs: u32,
+) -> Result<(), String> {
+    // Reset previous samples
+    state.reset();
+
+    let samples = state.samples.clone();
+    let sample_rate_arc = state.sample_rate.clone();
+    let channels_arc = state.channels.clone();
+    let stop_tx = state.stop_tx.clone();
+    let error_arc = state.error.clone();
+
+    // Use AtomicBool for stop signal (works with non-Send types)
+    let stop_flag = Arc::new(AtomicBool::new(false));
+    let stop_flag_clone = stop_flag.clone();
+
+    // Create tokio channel and spawn a task to bridge it to the AtomicBool
+    let (tx, mut rx) = tokio::sync::mpsc::channel::<()>(1);
+    *stop_tx.lock().unwrap() = Some(tx);
+
+    tokio::spawn(async move {
+        rx.recv().await;
+        stop_flag_clone.store(true, Ordering::Relaxed);
+    });
+
+    // Spawn capture task on a dedicated thread (WASAPI COM objects are not Send)
+    // All WASAPI objects must be created and used on the same thread
+    thread::spawn(move || {
+        // Initialize COM for this thread
+        unsafe {
+            let hr = CoInitializeEx(None, COINIT_MULTITHREADED);
+            if hr.is_err() {
+                eprintln!("Failed to initialize COM: {:?}", hr);
+                return;
+            }
+        }
+
+        // Ensure COM is uninitialized when thread exits
+        let _com_guard = scopeguard::guard((), |_| unsafe {
+            CoUninitialize();
+        });
+
+        // Initialize WASAPI on this thread
+        let device = match DeviceEnumerator::new()
+            .and_then(|enumerator| enumerator.get_default_device(&Direction::Render))
+        {
+            Ok(d) => d,
+            Err(e) => {
+                let error_msg = format!("Failed to get audio device: {}", e);
+                eprintln!("{}", error_msg);
+                *error_arc.lock().unwrap() = Some(error_msg);
+                return;
+            }
+        };
+
+        let mut audio_client = match device.get_iaudioclient() {
+            Ok(client) => client,
+            Err(e) => {
+                let error_msg = format!("Failed to get audio client: {}", e);
+                eprintln!("{}", error_msg);
+                *error_arc.lock().unwrap() = Some(error_msg);
+                return;
+            }
+        };
+
+        let mix_format = match audio_client.get_mixformat() {
+            Ok(format) => format,
+            Err(e) => {
+                let error_msg = format!("Failed to get mix format: {}", e);
+                eprintln!("{}", error_msg);
+                *error_arc.lock().unwrap() = Some(error_msg);
+                return;
+            }
+        };
+
+        // Set sample rate and channels
+        let channels = mix_format.get_nchannels() as usize;
+        let bytes_per_sample = (mix_format.get_bitspersample() / 8) as usize;
+        *sample_rate_arc.lock().unwrap() = mix_format.get_samplespersec();
+        *channels_arc.lock().unwrap() = mix_format.get_nchannels();
+
+        // Get device period
+        let (_def_period, min_period) = match audio_client.get_device_period() {
+            Ok(periods) => periods,
+            Err(e) => {
+                eprintln!("Failed to get device period: {}", e);
+                return;
+            }
+        };
+
+        // Initialize audio client for loopback with StreamMode
+        // For loopback mode: get Render device, initialize with Capture direction
+        // This triggers AUDCLNT_STREAMFLAGS_LOOPBACK in the wasapi crate
+        let stream_mode = StreamMode::EventsShared {
+            autoconvert: true,  // Enable automatic format conversion
+            buffer_duration_hns: min_period, // Use minimum period
+        };
+
+        if let Err(e) = audio_client.initialize_client(&mix_format, &Direction::Capture, &stream_mode) {
+            let error_msg = format!("Failed to initialize audio client: {}", e);
+            eprintln!("{}", error_msg);
+            *error_arc.lock().unwrap() = Some(error_msg);
+            return;
+        }
+
+        // Set up event handle for EventsShared mode
+        let h_event = match audio_client.set_get_eventhandle() {
+            Ok(event) => event,
+            Err(e) => {
+                eprintln!("Failed to set event handle: {}", e);
+                return;
+            }
+        };
+
+        let capture_client = match audio_client.get_audiocaptureclient() {
+            Ok(client) => client,
+            Err(e) => {
+                let error_msg = format!("Failed to get capture client: {}", e);
+                eprintln!("{}", error_msg);
+                *error_arc.lock().unwrap() = Some(error_msg);
+                return;
+            }
+        };
+
+        if let Err(e) = audio_client.start_stream() {
+            let error_msg = format!("Failed to start stream: {}", e);
+            eprintln!("{}", error_msg);
+            *error_arc.lock().unwrap() = Some(error_msg);
+            return;
+        }
+
+        loop {
+            // Check if stop signal was received
+            if stop_flag.load(Ordering::Relaxed) {
+                break;
+            }
+
+            // Try to get available data
+            match capture_client.get_next_packet_size() {
+                Ok(Some(frames_available)) => {
+                    if frames_available > 0 {
+                        // Calculate buffer size needed (frames * channels * bytes_per_sample)
+                        let buffer_size = frames_available as usize * channels * bytes_per_sample;
+
+                        let mut buffer = vec![0u8; buffer_size];
+                        match capture_client.read_from_device(&mut buffer) {
+                            Ok((frames_read, _buffer_info)) => {
+                                if frames_read > 0 {
+                                    // Convert bytes to f32 samples
+                                    let samples_read = (frames_read as usize * channels) as usize;
+                                    let mut samples_guard = samples.lock().unwrap();
+
+                                    // Assuming 32-bit float format
+                                    if bytes_per_sample == 4 {
+                                        for i in 0..samples_read {
+                                            let byte_offset = i * 4;
+                                            if byte_offset + 4 <= buffer.len() {
+                                                let sample = f32::from_le_bytes([
+                                                    buffer[byte_offset],
+                                                    buffer[byte_offset + 1],
+                                                    buffer[byte_offset + 2],
+                                                    buffer[byte_offset + 3],
+                                                ]);
+                                                samples_guard.push(sample);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            Err(e) => {
+                                eprintln!("Error reading from device: {}", e);
+                            }
+                        }
+                    }
+                }
+                Ok(None) => {
+                    // Exclusive mode - handle differently if needed
+                }
+                Err(e) => {
+                    eprintln!("Error getting next packet size: {}", e);
+                }
+            }
+
+            // Wait for event signal (with timeout to allow checking stop flag)
+            if h_event.wait_for_event(100).is_err() {
+                // Timeout is expected - just continue to check stop flag
+            }
+        }
+
+        // Stop the stream when done
+        audio_client.stop_stream().ok();
+    });
+
+    // Spawn timeout task
+    let stop_tx_clone = state.stop_tx.clone();
+    tokio::spawn(async move {
+        tokio::time::sleep(tokio::time::Duration::from_secs(max_duration_secs as u64)).await;
+        // Take the sender out of the mutex before awaiting
+        let tx = stop_tx_clone.lock().unwrap().take();
+        if let Some(tx) = tx {
+            let _ = tx.send(()).await;
+        }
+    });
+
+    Ok(())
+}
+
+pub async fn stop_capture(state: &AudioCaptureState) -> Result<String, String> {
+    // Signal stop
+    if let Some(tx) = state.stop_tx.lock().unwrap().take() {
+        let _ = tx.send(());
+    }
+
+    // Wait a bit for capture to stop
+    tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+
+    // Check if there was an error during capture
+    if let Some(error) = state.error.lock().unwrap().as_ref() {
+        return Err(error.clone());
+    }
+
+    // Get samples
+    let samples = state.samples.lock().unwrap().clone();
+    let sample_rate = *state.sample_rate.lock().unwrap();
+    let channels = *state.channels.lock().unwrap();
+
+    if samples.is_empty() {
+        return Err("No audio samples captured. Make sure audio is playing on your system during recording.".to_string());
+    }
+
+    // Convert to WAV
+    let wav_data = samples_to_wav(&samples, sample_rate, channels)?;
+    
+    // Encode to base64
+    let base64_data = general_purpose::STANDARD.encode(&wav_data);
+    
+    Ok(base64_data)
+}
+
+pub fn is_supported() -> bool {
+    #[cfg(target_os = "windows")]
+    {
+        true
+    }
+    #[cfg(not(target_os = "windows"))]
+    {
+        false
+    }
+}
+
+fn samples_to_wav(samples: &[f32], sample_rate: u32, channels: u16) -> Result<Vec<u8>, String> {
+    let mut buffer = Vec::new();
+    let cursor = Cursor::new(&mut buffer);
+    
+    let spec = WavSpec {
+        channels,
+        sample_rate,
+        bits_per_sample: 16,
+        sample_format: hound::SampleFormat::Int,
+    };
+
+    let mut writer = WavWriter::new(cursor, spec)
+        .map_err(|e| format!("Failed to create WAV writer: {}", e))?;
+
+    // Convert f32 samples to i16
+    for sample in samples {
+        let clamped = sample.clamp(-1.0, 1.0);
+        let i16_sample = (clamped * 32767.0) as i16;
+        writer.write_sample(i16_sample)
+            .map_err(|e| format!("Failed to write sample: {}", e))?;
+    }
+
+    writer.finalize()
+        .map_err(|e| format!("Failed to finalize WAV: {}", e))?;
+
+    Ok(buffer)
+}

tauri/src-tauri/src/lib.rs

@@ -0,0 +1 @@
+pub mod audio_capture;

tauri/src-tauri/src/main.rs

@@ -1,13 +1,20 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+mod audio_capture;
+
 use std::sync::Mutex;
-use tauri::{command, State, Manager, WindowEvent, Emitter, Listener};
+use tauri::{command, State, Manager, WindowEvent, Emitter, Listener, RunEvent};
 use tauri_plugin_shell::ShellExt;
 use tokio::sync::mpsc;
 
+const LEGACY_PORT: u16 = 8000;
+const SERVER_PORT: u16 = 17493;
+
 struct ServerState {
     child: Mutex<Option<tauri_plugin_shell::process::CommandChild>>,
+    server_pid: Mutex<Option<u32>>,
+    keep_running_on_close: Mutex<bool>,
 }
 
 #[command]
@@ -16,11 +23,145 @@ async fn start_server(
     state: State<'_, ServerState>,
     remote: Option<bool>,
 ) -> Result<String, String> {
-    // Check if server is already running
+    // Check if server is already running (managed by this app instance)
     if state.child.lock().unwrap().is_some() {
-        return Ok("Server already running on http://localhost:8000".to_string());
+        return Ok(format!("http://127.0.0.1:{}", SERVER_PORT));
     }
 
+    // Check if a voicebox server is already running on our port (from previous session with keep_running=true)
+    #[cfg(unix)]
+    {
+        use std::process::Command;
+        if let Ok(output) = Command::new("lsof")
+            .args(["-i", &format!(":{}", SERVER_PORT), "-sTCP:LISTEN"])
+            .output()
+        {
+            let output_str = String::from_utf8_lossy(&output.stdout);
+            for line in output_str.lines().skip(1) {
+                let parts: Vec<&str> = line.split_whitespace().collect();
+                if parts.len() >= 2 {
+                    let command = parts[0];
+                    let pid_str = parts[1];
+                    if command.contains("voicebox") {
+                        if let Ok(pid) = pid_str.parse::<u32>() {
+                            println!("Found existing voicebox-server on port {} (PID: {}), reusing it", SERVER_PORT, pid);
+                            // Store the PID so we can kill it on exit if needed
+                            *state.server_pid.lock().unwrap() = Some(pid);
+                            return Ok(format!("http://127.0.0.1:{}", SERVER_PORT));
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    #[cfg(windows)]
+    {
+        use std::process::Command;
+        if let Ok(output) = Command::new("netstat")
+            .args(["-ano"])
+            .output()
+        {
+            let output_str = String::from_utf8_lossy(&output.stdout);
+            for line in output_str.lines() {
+                if line.contains(&format!(":{}", SERVER_PORT)) && line.contains("LISTENING") {
+                    if let Some(pid_str) = line.split_whitespace().last() {
+                        if let Ok(pid) = pid_str.parse::<u32>() {
+                            if let Ok(tasklist_output) = Command::new("tasklist")
+                                .args(["/FI", &format!("PID eq {}", pid), "/FO", "CSV", "/NH"])
+                                .output()
+                            {
+                                let tasklist_str = String::from_utf8_lossy(&tasklist_output.stdout);
+                                if tasklist_str.to_lowercase().contains("voicebox") {
+                                    println!("Found existing voicebox-server on port {} (PID: {}), reusing it", SERVER_PORT, pid);
+                                    // Store the PID so we can kill it on exit if needed
+                                    *state.server_pid.lock().unwrap() = Some(pid);
+                                    return Ok(format!("http://127.0.0.1:{}", SERVER_PORT));
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Kill any orphaned voicebox-server from previous session on legacy port 8000
+    // This handles upgrades from older versions that used a fixed port
+    #[cfg(unix)]
+    {
+        use std::process::Command;
+        // Find processes listening on legacy port 8000 with their command names
+        if let Ok(output) = Command::new("lsof")
+            .args(["-i", &format!(":{}", LEGACY_PORT), "-sTCP:LISTEN"])
+            .output()
+        {
+            let output_str = String::from_utf8_lossy(&output.stdout);
+            for line in output_str.lines().skip(1) { // Skip header line
+                // lsof output format: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
+                let parts: Vec<&str> = line.split_whitespace().collect();
+                if parts.len() >= 2 {
+                    let command = parts[0];
+                    let pid_str = parts[1];
+                    
+                    // Only kill if it's a voicebox-server process
+                    if command.contains("voicebox") {
+                        if let Ok(pid) = pid_str.parse::<i32>() {
+                            println!("Found orphaned voicebox-server on legacy port {} (PID: {}, CMD: {}), killing it...", LEGACY_PORT, pid, command);
+                            // Kill the process group
+                            let _ = Command::new("kill")
+                                .args(["-9", "--", &format!("-{}", pid)])
+                                .output();
+                            let _ = Command::new("kill")
+                                .args(["-9", &pid.to_string()])
+                                .output();
+                        }
+                    } else {
+                        println!("Legacy port {} is in use by non-voicebox process: {} (PID: {}), not killing", LEGACY_PORT, command, pid_str);
+                    }
+                }
+            }
+        }
+    }
+    
+    #[cfg(windows)]
+    {
+        use std::process::Command;
+        // On Windows, find PIDs on legacy port 8000, then check their names
+        if let Ok(output) = Command::new("netstat")
+            .args(["-ano"])
+            .output()
+        {
+            let output_str = String::from_utf8_lossy(&output.stdout);
+            for line in output_str.lines() {
+                if line.contains(&format!(":{}", LEGACY_PORT)) && line.contains("LISTENING") {
+                    if let Some(pid_str) = line.split_whitespace().last() {
+                        if let Ok(pid) = pid_str.parse::<u32>() {
+                            // Get process name for this PID
+                            if let Ok(tasklist_output) = Command::new("tasklist")
+                                .args(["/FI", &format!("PID eq {}", pid), "/FO", "CSV", "/NH"])
+                                .output()
+                            {
+                                let tasklist_str = String::from_utf8_lossy(&tasklist_output.stdout);
+                                if tasklist_str.to_lowercase().contains("voicebox") {
+                                    println!("Found orphaned voicebox-server on legacy port {} (PID: {}), killing it...", LEGACY_PORT, pid);
+                                    let _ = Command::new("taskkill")
+                                        .args(["/PID", &pid.to_string(), "/T", "/F"])
+                                        .output();
+                                } else {
+                                    println!("Legacy port {} is in use by non-voicebox process (PID: {}), not killing", LEGACY_PORT, pid);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    // Brief wait for port to be released
+    std::thread::sleep(std::time::Duration::from_millis(200));
+
     // Get app data directory
     let data_dir = app
         .path()
@@ -47,12 +188,14 @@ async fn start_server(
 
     println!("Sidecar command created successfully");
 
-    // Pass data directory to Python server
+    // Pass data directory and port to Python server
     sidecar = sidecar.args([
         "--data-dir",
         data_dir
             .to_str()
             .ok_or_else(|| "Invalid data dir path".to_string())?,
+        "--port",
+        &SERVER_PORT.to_string(),
     ]);
 
     if remote.unwrap_or(false) {
@@ -75,7 +218,9 @@ async fn start_server(
     println!("Server process spawned, waiting for ready signal...");
     println!("=================================================================");
 
-    // Store child process
+    // Store child process and PID
+    let process_pid = child.pid();
+    *state.server_pid.lock().unwrap() = Some(process_pid);
     *state.child.lock().unwrap() = Some(child);
 
     // Wait for server to be ready by listening for startup log
@@ -154,17 +299,75 @@ async fn start_server(
         }
     });
 
-    Ok("Server started on http://localhost:8000".to_string())
+    Ok(format!("http://127.0.0.1:{}", SERVER_PORT))
 }
 
 #[command]
 async fn stop_server(state: State<'_, ServerState>) -> Result<(), String> {
-    if let Some(child) = state.child.lock().unwrap().take() {
-        child.kill().map_err(|e| format!("Failed to kill: {}", e))?;
+    let pid = state.server_pid.lock().unwrap().take();
+    let _child = state.child.lock().unwrap().take();
+    
+    if let Some(pid) = pid {
+        println!("stop_server: Killing server process group with PID: {}", pid);
+        
+        #[cfg(unix)]
+        {
+            use std::process::Command;
+            // Kill process group with SIGTERM first
+            let _ = Command::new("kill")
+                .args(["-TERM", "--", &format!("-{}", pid)])
+                .output();
+            
+            // Brief wait then force kill
+            std::thread::sleep(std::time::Duration::from_millis(100));
+            
+            let _ = Command::new("kill")
+                .args(["-9", "--", &format!("-{}", pid)])
+                .output();
+            let _ = Command::new("kill")
+                .args(["-9", &pid.to_string()])
+                .output();
+        }
+        
+        #[cfg(windows)]
+        {
+            use std::process::Command;
+            let _ = Command::new("taskkill")
+                .args(["/PID", &pid.to_string(), "/T", "/F"])
+                .output();
+        }
+        
+        println!("stop_server: Process group kill completed");
     }
+    
     Ok(())
 }
 
+#[command]
+fn set_keep_server_running(state: State<'_, ServerState>, keep_running: bool) {
+    *state.keep_running_on_close.lock().unwrap() = keep_running;
+}
+
+#[command]
+async fn start_system_audio_capture(
+    state: State<'_, audio_capture::AudioCaptureState>,
+    max_duration_secs: u32,
+) -> Result<(), String> {
+    audio_capture::start_capture(&state, max_duration_secs).await
+}
+
+#[command]
+async fn stop_system_audio_capture(
+    state: State<'_, audio_capture::AudioCaptureState>,
+) -> Result<String, String> {
+    audio_capture::stop_capture(&state).await
+}
+
+#[command]
+fn is_system_audio_supported() -> bool {
+    audio_capture::is_supported()
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -173,10 +376,34 @@ pub fn run() {
         .plugin(tauri_plugin_shell::init())
         .manage(ServerState {
             child: Mutex::new(None),
+            server_pid: Mutex::new(None),
+            keep_running_on_close: Mutex::new(false),
         })
+        .manage(audio_capture::AudioCaptureState::new())
         .setup(|app| {
             #[cfg(desktop)]
-            app.handle().plugin(tauri_plugin_updater::Builder::new().build())?;
+            {
+                app.handle().plugin(tauri_plugin_updater::Builder::new().build())?;
+                app.handle().plugin(tauri_plugin_process::init())?;
+            }
+
+            // Hide title bar icon on Windows
+            #[cfg(windows)]
+            {
+                use windows::Win32::Foundation::HWND;
+                use windows::Win32::UI::WindowsAndMessaging::{SetClassLongPtrW, GCLP_HICON, GCLP_HICONSM};
+                
+                if let Some((_, window)) = app.webview_windows().iter().next() {
+                    if let Ok(hwnd) = window.hwnd() {
+                        let hwnd = HWND(hwnd.0);
+                        unsafe {
+                            // Set both small and regular icons to NULL to hide the title bar icon
+                            SetClassLongPtrW(hwnd, GCLP_HICON, 0);
+                            SetClassLongPtrW(hwnd, GCLP_HICONSM, 0);
+                        }
+                    }
+                }
+            }
 
             #[cfg(debug_assertions)]
             {
@@ -190,7 +417,14 @@ pub fn run() {
             }
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![start_server, stop_server])
+        .invoke_handler(tauri::generate_handler![
+            start_server,
+            stop_server,
+            set_keep_server_running,
+            start_system_audio_capture,
+            stop_system_audio_capture,
+            is_system_audio_supported
+        ])
         .on_window_event(|window, event| {
             if let WindowEvent::CloseRequested { api, .. } = event {
                 // Prevent automatic close
@@ -235,8 +469,92 @@ pub fn run() {
                 });
             }
         })
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
+        .build(tauri::generate_context!())
+        .expect("error while building tauri application")
+        .run(|app, event| {
+            match &event {
+                RunEvent::Exit => {
+                    println!("=================================================================");
+                    println!("RunEvent::Exit received - checking server cleanup");
+                    let state = app.state::<ServerState>();
+                    let keep_running = *state.keep_running_on_close.lock().unwrap();
+                    println!("keep_running_on_close = {}", keep_running);
+                    
+                    if !keep_running {
+                        // Get the stored PID for process group killing
+                        let pid = state.server_pid.lock().unwrap().take();
+                        // Also take the child to clean up
+                        let _child = state.child.lock().unwrap().take();
+                        
+                        if let Some(pid) = pid {
+                            println!("Killing server process group with PID: {}", pid);
+                            
+                            // Kill the entire process group on Unix systems
+                            // Using negative PID sends signal to all processes in the group
+                            #[cfg(unix)]
+                            {
+                                use std::process::Command;
+                                // First try SIGTERM to the process group
+                                let pgid_kill = Command::new("kill")
+                                    .args(["-TERM", "--", &format!("-{}", pid)])
+                                    .output();
+                                
+                                match pgid_kill {
+                                    Ok(output) => {
+                                        if output.status.success() {
+                                            println!("SIGTERM sent to process group -{}", pid);
+                                        } else {
+                                            // Process group kill failed, try direct kill
+                                            println!("Process group kill failed, trying direct kill");
+                                            let _ = Command::new("kill")
+                                                .args(["-TERM", &pid.to_string()])
+                                                .output();
+                                        }
+                                    }
+                                    Err(e) => {
+                                        eprintln!("Failed to execute kill command: {}", e);
+                                    }
+                                }
+                                
+                                // Give it a moment, then force kill if needed
+                                std::thread::sleep(std::time::Duration::from_millis(100));
+                                
+                                // Force kill with SIGKILL
+                                let _ = Command::new("kill")
+                                    .args(["-9", "--", &format!("-{}", pid)])
+                                    .output();
+                                let _ = Command::new("kill")
+                                    .args(["-9", &pid.to_string()])
+                                    .output();
+                                
+                                println!("Server process group kill completed");
+                            }
+                            
+                            #[cfg(windows)]
+                            {
+                                // On Windows, use taskkill with /T to kill child processes
+                                use std::process::Command;
+                                let _ = Command::new("taskkill")
+                                    .args(["/PID", &pid.to_string(), "/T", "/F"])
+                                    .output();
+                                println!("Server process tree kill completed");
+                            }
+                        } else {
+                            println!("No server PID found (already stopped or never started)");
+                        }
+                    } else {
+                        println!("Keeping server running per user setting");
+                    }
+                    println!("=================================================================");
+                }
+                RunEvent::ExitRequested { api, .. } => {
+                    println!("RunEvent::ExitRequested received");
+                    // Don't prevent exit, just log it
+                    let _ = api;
+                }
+                _ => {}
+            }
+        });
 }
 
 fn main() {

tauri/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
-  "productName": "voicebox",
-  "version": "0.1.0",
+  "productName": "Voicebox",
+  "version": "0.1.3",
   "identifier": "sh.voicebox.app",
   "build": {
     "beforeDevCommand": "bun run dev",

tauri/src-tauri/tests/audio_capture_test.rs

@@ -0,0 +1,59 @@
+// NOTE: This test requires system audio to be playing during execution.
+// To run this test successfully:
+//   1. Start playing audio (music, video, etc.)
+//   2. Run: cargo test --test audio_capture_test -- --nocapture
+//   3. The test will capture audio for 5 seconds and verify the output
+
+use voicebox::audio_capture::{AudioCaptureState, start_capture, stop_capture};
+use base64::Engine;
+
+#[tokio::test]
+async fn test_system_audio_capture() {
+    // Create AudioCaptureState
+    let state = AudioCaptureState::new();
+
+    println!("Starting system audio capture with 5 second max duration...");
+
+    // Start capture with 5 second max duration
+    let result = start_capture(&state, 5).await;
+
+    if let Err(e) = result {
+        panic!("Failed to start capture: {}", e);
+    }
+
+    println!("Capture started, waiting 5 seconds...");
+
+    // Wait 5 seconds for capture to complete
+    tokio::time::sleep(tokio::time::Duration::from_secs(5)).await;
+
+    println!("Stopping capture...");
+
+    // Stop capture and get the result
+    let audio_data = stop_capture(&state).await;
+
+    match audio_data {
+        Ok(base64_wav) => {
+            println!("Capture stopped successfully");
+
+            // Validate the returned base64 WAV data
+            println!("Validating base64 WAV data...");
+
+            // Decode base64 to bytes
+            let decoded_bytes = base64::engine::general_purpose::STANDARD
+                .decode(&base64_wav)
+                .expect("Failed to decode base64 data");
+
+            // Verify bytes array is not empty
+            assert!(!decoded_bytes.is_empty(), "Decoded bytes array is empty");
+
+            // Confirm data has content (length > 0)
+            println!("WAV data length: {} bytes", decoded_bytes.len());
+            assert!(decoded_bytes.len() > 0, "WAV data has no content");
+
+            println!("✓ Test passed: Audio capture produced valid WAV data");
+        }
+        Err(e) => {
+            panic!("Failed to stop capture or get audio data: {}", e);
+        }
+    }
+}

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@voicebox/web",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",