overhaul settings: split into routed sub-tabs, add server logs, changelog, reusable setting components

- Rename Server tab to Settings with horizontal sub-tab navigation (General, Generation, GPU, Logs, Changelog) - All sub-tabs are proper routes under /settings/* with /server redirect for backwards compat - General: connection settings, link cards (docs + discord), API reference card, app updates - Generation: auto-chunking, crossfade, normalize, autoplay as SettingRow components - GPU: info card with platform-aware icons (Apple logo for MPS), CUDA management, explainer text - Logs: real-time server log viewer piped from Tauri sidecar via event system (Tauri-only) - Changelog: parsed from CHANGELOG.md at build time via Vite virtual module plugin - New reusable SettingRow/SettingSection components for consistent settings layout - New Toggle (switch) UI component replacing checkboxes in settings - Toast viewport now offsets when audio player is open - Sidebar stays active on settings sub-routes (fuzzy matching)
2026-09-15 04:40:40 -07:00 · 2026-03-16 09:31:14 -07:00
parent e0a798dc0d
commit 2c63dfff25
30 changed files with 1879 additions and 60 deletions
@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+/** Vite plugin that exposes CHANGELOG.md as `virtual:changelog`. */
+export function changelogPlugin(repoRoot: string): Plugin {
+  const virtualId = 'virtual:changelog';
+  const resolvedId = '\0' + virtualId;
+  const changelogPath = path.resolve(repoRoot, 'CHANGELOG.md');
+
+  return {
+    name: 'changelog',
+    resolveId(id) {
+      if (id === virtualId) return resolvedId;
+    },
+    load(id) {
+      if (id === resolvedId) {
+        const raw = readFileSync(changelogPath, 'utf-8');
+        return `export default ${JSON.stringify(raw)};`;
+      }
+    },
+  };
+}
@@ -8,6 +8,7 @@ import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
 import { router } from '@/router';
+import { useLogStore } from '@/stores/logStore';
 import { useServerStore } from '@/stores/serverStore';

 const LOADING_MESSAGES = [
@@ -63,6 +64,14 @@ function App() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [platform.lifecycle]);

+  // Subscribe to server logs
+  useEffect(() => {
+    const unsubscribe = platform.lifecycle.subscribeToServerLogs((entry) => {
+      useLogStore.getState().addEntry(entry);
+    });
+    return unsubscribe;
+  }, [platform.lifecycle]);
+
  // Setup window close handler and auto-start server when running in Tauri (production only)
  useEffect(() => {
    if (!platform.metadata.isTauri) {
@@ -15,7 +15,7 @@ import {
  Wand2,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import Loader from 'react-loaders';
+
 import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
 import {
@@ -56,8 +56,35 @@ import { formatDate, formatDuration, formatEngineName } from '@/lib/utils/format
 import { useGenerationStore } from '@/stores/generationStore';
 import { usePlayerStore } from '@/stores/playerStore';

-// OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
-// This is the new alternate history view with fixed height rows
+// ─── Audio Bars ─────────────────────────────────────────────────────────────
+
+function AudioBars({ mode }: { mode: 'idle' | 'generating' | 'playing' }) {
+  const barColor = mode !== 'idle' ? 'bg-accent' : 'bg-muted-foreground/40';
+  return (
+    <div className="flex items-center gap-[2px] h-5">
+      {[0, 1, 2, 3, 4].map((i) => (
+        <motion.div
+          key={i}
+          className={`w-[3px] rounded-full ${barColor}`}
+          animate={
+            mode === 'generating'
+              ? { height: ['6px', '16px', '6px'] }
+              : mode === 'playing'
+                ? { height: ['8px', '14px', '4px', '12px', '8px'] }
+                : { height: '8px' }
+          }
+          transition={
+            mode === 'generating'
+              ? { duration: 0.6, repeat: Infinity, delay: i * 0.08, ease: 'easeInOut' }
+              : mode === 'playing'
+                ? { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: 'easeInOut' }
+                : { duration: 0.4, ease: 'easeOut' }
+          }
+        />
+      ))}
+    </div>
+  );
+}

 // NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS WITH INFINITE SCROLL
 export function HistoryTable() {
@@ -446,12 +473,9 @@ export function HistoryTable() {
                  >
                    {/* Status icon */}
                    <div className="flex items-center shrink-0 w-10 justify-center overflow-hidden">
-                      <div className="scale-50">
-                        <Loader
-                          type={isGenerating ? 'line-scale' : 'line-scale-pulse-out-rapid'}
-                          active={isGenerating || isCurrentlyPlaying}
-                        />
-                      </div>
+                      <AudioBars
+                        mode={isGenerating ? 'generating' : isCurrentlyPlaying ? 'playing' : 'idle'}
+                      />
                    </div>

                    {/* Left side - Meta information */}
@@ -0,0 +1,220 @@
+import changelogRaw from 'virtual:changelog';
+import { useMemo, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { type ChangelogEntry, parseChangelog } from '@/lib/utils/parseChangelog';
+
+function renderMarkdown(md: string): React.ReactNode[] {
+  const lines = md.split('\n');
+  const elements: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Skip empty lines
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    // Tables — collect all lines starting with |
+    if (line.trim().startsWith('|')) {
+      const tableLines: string[] = [];
+      while (i < lines.length && lines[i].trim().startsWith('|')) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+      elements.push(renderTable(tableLines, elements.length));
+      continue;
+    }
+
+    // Headings
+    if (line.startsWith('#### ')) {
+      elements.push(
+        <h5 key={elements.length} className="text-sm font-medium mt-5 mb-1">
+          {inlineMarkdown(line.slice(5))}
+        </h5>,
+      );
+      i++;
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      elements.push(
+        <h4 key={elements.length} className="text-sm font-medium mt-6 mb-2">
+          {inlineMarkdown(line.slice(4))}
+        </h4>,
+      );
+      i++;
+      continue;
+    }
+
+    // List items — collect consecutive
+    if (line.startsWith('- ')) {
+      const items: string[] = [];
+      while (i < lines.length && lines[i].startsWith('- ')) {
+        items.push(lines[i].slice(2));
+        i++;
+      }
+      elements.push(
+        <ul key={elements.length} className="space-y-1 my-2">
+          {items.map((item) => (
+            <li key={item} className="text-sm text-muted-foreground flex gap-2">
+              <span className="text-muted-foreground/50 select-none shrink-0">&bull;</span>
+              <span>{inlineMarkdown(item)}</span>
+            </li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    // Paragraph
+    elements.push(
+      <p key={elements.length} className="text-sm text-muted-foreground my-2">
+        {inlineMarkdown(line)}
+      </p>,
+    );
+    i++;
+  }
+
+  return elements;
+}
+
+function renderTable(tableLines: string[], keyBase: number): React.ReactNode {
+  const parseRow = (line: string) =>
+    line
+      .split('|')
+      .slice(1, -1)
+      .map((c) => c.trim());
+
+  const headers = parseRow(tableLines[0]);
+  // Skip separator line (index 1)
+  const rows = tableLines.slice(2).map(parseRow);
+
+  return (
+    <div key={keyBase} className="overflow-x-auto my-3">
+      <table className="text-sm w-full">
+        <thead>
+          <tr className="border-b">
+            {headers.map((h) => (
+              <th
+                key={h}
+                className="text-left py-1.5 pr-4 text-muted-foreground font-medium text-xs"
+              >
+                {inlineMarkdown(h)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => (
+            <tr key={row.join('|')} className="border-b border-border/50">
+              {row.map((cell) => (
+                <td key={cell} className="py-1.5 pr-4 text-muted-foreground">
+                  {inlineMarkdown(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function inlineMarkdown(text: string): React.ReactNode {
+  // Process inline markdown: bold, code, links
+  const parts: React.ReactNode[] = [];
+  // Regex matches: **bold**, `code`, [text](url)
+  const inlineRe = /\*\*(.+?)\*\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = inlineRe.exec(text);
+
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    if (match[1] !== undefined) {
+      // Bold
+      parts.push(
+        <strong key={parts.length} className="font-medium text-foreground">
+          {match[1]}
+        </strong>,
+      );
+    } else if (match[2] !== undefined) {
+      // Code
+      parts.push(
+        <code key={parts.length} className="px-1 py-0.5 rounded bg-muted text-xs font-mono">
+          {match[2]}
+        </code>,
+      );
+    } else if (match[3] !== undefined && match[4] !== undefined) {
+      // Link
+      parts.push(
+        <a
+          key={parts.length}
+          href={match[4]}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent hover:underline"
+        >
+          {match[3]}
+        </a>,
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+    match = inlineRe.exec(text);
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length === 1 ? parts[0] : parts;
+}
+
+function ChangelogEntryCard({ entry }: { entry: ChangelogEntry }) {
+  const [expanded, setExpanded] = useState(false);
+  const content = useMemo(() => renderMarkdown(entry.body), [entry.body]);
+  const isLong = entry.body.split('\n').length > 12;
+
+  return (
+    <div className="border-b border-border/50 pb-6">
+      <div className="flex items-baseline gap-3 mb-1">
+        <h3 className="text-sm font-medium">{entry.version}</h3>
+        {entry.date && <span className="text-xs text-muted-foreground">{entry.date}</span>}
+        {entry.version === 'Unreleased' && <Badge variant="outline">dev</Badge>}
+      </div>
+
+      <div className={isLong && !expanded ? 'max-h-48 overflow-hidden relative' : ''}>
+        {content}
+        {isLong && !expanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent" />
+        )}
+      </div>
+
+      {isLong && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-xs text-accent hover:underline mt-2"
+        >
+          {expanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ChangelogPage() {
+  const entries = useMemo(() => parseChangelog(changelogRaw), []);
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {entries.map((entry) => (
+        <ChangelogEntryCard key={entry.version} entry={entry} />
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,372 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AlertCircle, ArrowUpRight, Book, Download, Loader2, RefreshCw } from 'lucide-react';
+import { useEffect, 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 { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import { Toggle } from '@/components/ui/toggle';
+import { useToast } from '@/components/ui/use-toast';
+import { useAutoUpdater } from '@/hooks/useAutoUpdater';
+import { useServerHealth } from '@/lib/hooks/useServer';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+const connectionSchema = z.object({
+  serverUrl: z.string().url('Please enter a valid URL'),
+});
+
+type ConnectionFormValues = z.infer<typeof connectionSchema>;
+
+export function GeneralPage() {
+  const platform = usePlatform();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const setServerUrl = useServerStore((state) => state.setServerUrl);
+  const keepServerRunningOnClose = useServerStore((state) => state.keepServerRunningOnClose);
+  const setKeepServerRunningOnClose = useServerStore((state) => state.setKeepServerRunningOnClose);
+  const mode = useServerStore((state) => state.mode);
+  const setMode = useServerStore((state) => state.setMode);
+  const { toast } = useToast();
+  const { data: health, isLoading, error: healthError } = useServerHealth();
+
+  const form = useForm<ConnectionFormValues>({
+    resolver: zodResolver(connectionSchema),
+    defaultValues: { serverUrl },
+  });
+
+  useEffect(() => {
+    form.reset({ serverUrl });
+  }, [serverUrl, form]);
+
+  const { isDirty } = form.formState;
+
+  function onSubmit(data: ConnectionFormValues) {
+    setServerUrl(data.serverUrl);
+    form.reset(data);
+    toast({
+      title: 'Server URL updated',
+      description: `Connected to ${data.serverUrl}`,
+    });
+  }
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <div className="grid grid-cols-2 gap-3">
+        <a
+          href="https://docs.voicebox.sh"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex items-center gap-3 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/50"
+        >
+          <Book className="h-5 w-5 shrink-0 text-accent" strokeWidth={2.5} />
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium">Read the Docs</div>
+            <div className="text-xs text-muted-foreground">docs.voicebox.sh</div>
+          </div>
+          <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+        </a>
+        <a
+          href="https://discord.gg/StkzQasqPS"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex items-center gap-3 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/50"
+        >
+          <svg
+            className="h-5 w-5 shrink-0 text-accent"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+          </svg>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium">Join the Discord</div>
+            <div className="text-xs text-muted-foreground">Get help & share voices</div>
+          </div>
+          <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+        </a>
+      </div>
+
+      <SettingSection>
+        <SettingRow
+          title="Server URL"
+          description="The address of your voicebox backend server."
+          action={
+            <ConnectionStatus health={health} isLoading={isLoading} healthError={healthError} />
+          }
+        >
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-2">
+              <FormField
+                control={form.control}
+                name="serverUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <Input placeholder="http://127.0.0.1:17493" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {isDirty && (
+                <Button type="submit" size="sm">
+                  Save
+                </Button>
+              )}
+            </form>
+          </Form>
+        </SettingRow>
+
+        <SettingRow
+          title="Keep server running when app closes"
+          description="The server will continue running in the background after closing the app."
+          htmlFor="keepServerRunning"
+          action={
+            <Toggle
+              id="keepServerRunning"
+              checked={keepServerRunningOnClose}
+              onCheckedChange={(checked: boolean) => {
+                setKeepServerRunningOnClose(checked);
+                platform.lifecycle.setKeepServerRunning(checked).catch((error) => {
+                  console.error('Failed to sync setting to Rust:', error);
+                });
+                toast({
+                  title: 'Setting updated',
+                  description: checked
+                    ? 'Server will continue running when app closes'
+                    : 'Server will stop when app closes',
+                });
+              }}
+            />
+          }
+        />
+
+        {platform.metadata.isTauri && (
+          <SettingRow
+            title="Allow network access"
+            description="Makes the server accessible from other devices on your network. Restart the app after changing."
+            htmlFor="allowNetworkAccess"
+            action={
+              <Toggle
+                id="allowNetworkAccess"
+                checked={mode === 'remote'}
+                onCheckedChange={(checked: boolean) => {
+                  setMode(checked ? 'remote' : 'local');
+                  toast({
+                    title: 'Setting updated',
+                    description: checked
+                      ? 'Network access enabled. Restart the app to apply.'
+                      : 'Network access disabled. Restart the app to apply.',
+                  });
+                }}
+              />
+            }
+          />
+        )}
+      </SettingSection>
+
+      <ApiReferenceCard serverUrl={serverUrl} />
+
+      {platform.metadata.isTauri && <UpdatesSection />}
+    </div>
+  );
+}
+
+function ConnectionStatus({
+  health,
+  isLoading,
+  healthError,
+}: {
+  health: ReturnType<typeof useServerHealth>['data'];
+  isLoading: boolean;
+  healthError: ReturnType<typeof useServerHealth>['error'];
+}) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-border/60 px-3 py-1">
+        <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+        <span className="text-xs text-muted-foreground">Connecting</span>
+      </div>
+    );
+  }
+  if (healthError) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-destructive/30 px-3 py-1">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full rounded-full bg-destructive/40" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-destructive" />
+        </span>
+        <span className="text-xs text-destructive">Offline</span>
+      </div>
+    );
+  }
+  if (health) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-accent/30 px-3 py-1">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/60" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-accent shadow-[0_0_6px_1px_hsl(var(--accent)/0.5)]" />
+        </span>
+        <span className="text-xs text-muted-foreground">Online</span>
+      </div>
+    );
+  }
+  return null;
+}
+
+function UpdatesSection() {
+  const platform = usePlatform();
+  const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
+  const [currentVersion, setCurrentVersion] = useState<string>('');
+  const isDev = !import.meta.env?.PROD;
+
+  useEffect(() => {
+    platform.metadata
+      .getVersion()
+      .then(setCurrentVersion)
+      .catch(() => setCurrentVersion('Unknown'));
+  }, [platform]);
+
+  return (
+    <SettingSection title="App Updates" description={`v${currentVersion}${isDev ? ' (dev)' : ''}`}>
+      {isDev ? (
+        <SettingRow
+          title="Development mode"
+          description="Auto-updates are disabled in development mode."
+        />
+      ) : (
+        <>
+          <SettingRow
+            title="Check for updates"
+            description={
+              status.available
+                ? `Version ${status.version} available`
+                : status.checking
+                  ? 'Checking...'
+                  : "You're up to date"
+            }
+            action={
+              <Button
+                onClick={checkForUpdates}
+                disabled={status.checking || status.downloading || status.readyToInstall}
+                variant="outline"
+                size="sm"
+              >
+                <RefreshCw
+                  className={`h-3.5 w-3.5 mr-1.5 ${status.checking ? 'animate-spin' : ''}`}
+                />
+                Check
+              </Button>
+            }
+          />
+
+          {status.error && (
+            <SettingRow title="Update error">
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4" />
+                {status.error}
+              </div>
+            </SettingRow>
+          )}
+
+          {status.available && !status.downloading && !status.readyToInstall && (
+            <SettingRow
+              title={`Update to ${status.version}`}
+              description="Download and install the latest version."
+              action={
+                <Button onClick={downloadAndInstall} size="sm">
+                  <Download className="h-3.5 w-3.5 mr-1.5" />
+                  Download
+                </Button>
+              }
+            />
+          )}
+
+          {status.downloading && (
+            <SettingRow title="Downloading update...">
+              <div className="space-y-1.5">
+                <Progress value={status.downloadProgress} />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  {status.downloadedBytes !== undefined &&
+                  status.totalBytes !== undefined &&
+                  status.totalBytes > 0 ? (
+                    <span>
+                      {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
+                      {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+                    </span>
+                  ) : (
+                    <span />
+                  )}
+                  {status.downloadProgress !== undefined && <span>{status.downloadProgress}%</span>}
+                </div>
+              </div>
+            </SettingRow>
+          )}
+
+          {status.readyToInstall && (
+            <SettingRow
+              title="Update ready to install"
+              description={`Version ${status.version} has been downloaded. Restart to complete.`}
+              action={
+                <Button onClick={restartAndInstall} size="sm">
+                  <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+                  Restart Now
+                </Button>
+              }
+            />
+          )}
+        </>
+      )}
+    </SettingSection>
+  );
+}
+
+const API_ENDPOINTS = [
+  { method: 'POST', path: '/generate', label: 'Generate speech' },
+  { method: 'GET', path: '/health', label: 'Server status' },
+  { method: 'GET', path: '/profiles', label: 'List voices' },
+  { method: 'GET', path: '/history', label: 'Past generations' },
+];
+
+function ApiReferenceCard({ serverUrl }: { serverUrl: string }) {
+  return (
+    <div className="rounded-lg border border-border/60 p-4 space-y-3">
+      <div>
+        <h3 className="text-sm font-medium">API Access</h3>
+        <p className="text-sm text-muted-foreground">
+          Integrate Voicebox into your workflow via the REST API at{' '}
+          <code className="text-xs bg-muted px-1 py-0.5 rounded font-mono">{serverUrl}</code>
+        </p>
+      </div>
+      <div className="space-y-1">
+        {API_ENDPOINTS.map((ep) => (
+          <div key={ep.path} className="flex items-center gap-2.5 py-1">
+            <span
+              className={`text-[10px] font-mono font-semibold w-9 text-center rounded px-1 py-px ${
+                ep.method === 'POST' ? 'bg-accent/10 text-accent' : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {ep.method}
+            </span>
+            <code className="text-xs font-mono text-muted-foreground">{ep.path}</code>
+            <span className="text-xs text-muted-foreground/50 ml-auto">{ep.label}</span>
+          </div>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        <a
+          href={`${serverUrl}/docs`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent hover:underline"
+        >
+          View the full API reference
+        </a>
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,90 @@
+import { Slider } from '@/components/ui/slider';
+import { Toggle } from '@/components/ui/toggle';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+export function GenerationPage() {
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const setMaxChunkChars = useServerStore((state) => state.setMaxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const setCrossfadeMs = useServerStore((state) => state.setCrossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const setNormalizeAudio = useServerStore((state) => state.setNormalizeAudio);
+  const autoplayOnGenerate = useServerStore((state) => state.autoplayOnGenerate);
+  const setAutoplayOnGenerate = useServerStore((state) => state.setAutoplayOnGenerate);
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <SettingSection
+        title="Generation"
+        description="Controls for long text generation. These settings apply to all engines."
+      >
+        <SettingRow
+          title="Auto-chunking limit"
+          description="Long text is split into chunks at sentence boundaries. Lower values can improve quality for long outputs."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {maxChunkChars} chars
+            </span>
+          }
+        >
+          <Slider
+            id="maxChunkChars"
+            value={[maxChunkChars]}
+            onValueChange={([value]) => setMaxChunkChars(value)}
+            min={100}
+            max={5000}
+            step={50}
+            aria-label="Auto-chunking character limit"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Chunk crossfade"
+          description="Blends audio between chunks to smooth transitions. Set to 0 for a hard cut."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {crossfadeMs === 0 ? 'Cut' : `${crossfadeMs}ms`}
+            </span>
+          }
+        >
+          <Slider
+            id="crossfadeMs"
+            value={[crossfadeMs]}
+            onValueChange={([value]) => setCrossfadeMs(value)}
+            min={0}
+            max={200}
+            step={10}
+            aria-label="Chunk crossfade duration"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Normalize audio"
+          description="Adjusts output volume to a consistent level across generations."
+          htmlFor="normalizeAudio"
+          action={
+            <Toggle
+              id="normalizeAudio"
+              checked={normalizeAudio}
+              onCheckedChange={setNormalizeAudio}
+            />
+          }
+        />
+
+        <SettingRow
+          title="Autoplay on generate"
+          description="Automatically play audio when a generation completes."
+          htmlFor="autoplayOnGenerate"
+          action={
+            <Toggle
+              id="autoplayOnGenerate"
+              checked={autoplayOnGenerate}
+              onCheckedChange={setAutoplayOnGenerate}
+            />
+          }
+        />
+      </SettingSection>
+    </div>
+  );
+}
@@ -0,0 +1,414 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertCircle, Cpu, Download, Loader2, RotateCw, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { apiClient } from '@/lib/api/client';
+import type { CudaDownloadProgress, HealthResponse } from '@/lib/api/types';
+import { useServerHealth } from '@/lib/hooks/useServer';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+type RestartPhase = 'idle' | 'stopping' | 'waiting' | 'ready';
+
+function AppleLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+    </svg>
+  );
+}
+
+function GpuIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="4" y="6" width="16" height="12" rx="2" />
+      <path d="M2 10h2M2 14h2M20 10h2M20 14h2" />
+      <path d="M9 10h6M9 14h4" />
+    </svg>
+  );
+}
+
+function GpuInfoCard({ health }: { health: HealthResponse }) {
+  const hasGpu = health.gpu_available && health.gpu_type;
+
+  // Parse GPU name from type string like "CUDA (NVIDIA RTX 4090)" or "MPS (Apple M2 Pro)"
+  const gpuName = hasGpu
+    ? health.gpu_type!.replace(/^(CUDA|ROCm|MPS|Metal|XPU|DirectML)\s*\((.+)\)$/, '$2') ||
+      health.gpu_type!
+    : null;
+  const gpuBackend = hasGpu ? health.gpu_type!.replace(/\s*\(.+\)$/, '') : null;
+  const isApple = gpuBackend === 'MPS' || gpuBackend === 'Metal';
+  const showBackendVariant = health.backend_variant && health.backend_variant !== 'cpu';
+
+  return (
+    <div className="rounded-lg border border-border/60 p-4">
+      <div className="flex items-center gap-3">
+        {hasGpu ? (
+          isApple ? (
+            <AppleLogo className="h-5 w-5 shrink-0 text-muted-foreground" />
+          ) : (
+            <GpuIcon className="h-5 w-5 shrink-0 text-accent" />
+          )
+        ) : (
+          <Cpu className="h-5 w-5 shrink-0 text-muted-foreground" />
+        )}
+        <div className="flex-1 min-w-0 space-y-0.5">
+          <div className="text-sm font-medium">{hasGpu ? gpuName : 'CPU Only'}</div>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+            {hasGpu ? (
+              <>
+                <span>{gpuBackend}</span>
+                {showBackendVariant && (
+                  <>
+                    <span className="text-border">|</span>
+                    <span className="uppercase">{health.backend_variant}</span>
+                  </>
+                )}
+                {health.vram_used_mb != null && health.vram_used_mb > 0 && (
+                  <>
+                    <span className="text-border">|</span>
+                    <span>{health.vram_used_mb.toFixed(0)} MB VRAM</span>
+                  </>
+                )}
+              </>
+            ) : (
+              <span>No GPU acceleration detected</span>
+            )}
+          </div>
+        </div>
+        {hasGpu && (
+          <div className="flex items-center gap-2 rounded-full border border-accent/30 px-2.5 py-0.5">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/60" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_4px_1px_hsl(var(--accent)/0.4)]" />
+            </span>
+            <span className="text-[10px] font-medium text-muted-foreground">Active</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function GpuPage() {
+  const platform = usePlatform();
+  const queryClient = useQueryClient();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const { data: health } = useServerHealth();
+
+  const [restartPhase, setRestartPhase] = useState<RestartPhase>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState<CudaDownloadProgress | null>(null);
+  const healthPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const {
+    data: cudaStatus,
+    isLoading: _cudaStatusLoading,
+    refetch: refetchCudaStatus,
+  } = useQuery({
+    queryKey: ['cuda-status', serverUrl],
+    queryFn: () => apiClient.getCudaStatus(),
+    refetchInterval: (query) => (query.state.status === 'pending' ? false : 10000),
+    retry: 1,
+    enabled: !!health,
+  });
+
+  const isCurrentlyCuda = health?.backend_variant === 'cuda';
+  const cudaAvailable = cudaStatus?.available ?? false;
+  const cudaDownloading = cudaStatus?.downloading ?? false;
+
+  useEffect(() => {
+    return () => {
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!cudaDownloading || !serverUrl) return;
+
+    const eventSource = new EventSource(`${serverUrl}/backend/cuda-progress`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as CudaDownloadProgress;
+        setDownloadProgress(data);
+
+        if (data.status === 'complete') {
+          eventSource.close();
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        } else if (data.status === 'error') {
+          eventSource.close();
+          setError(data.error || 'Download failed');
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        }
+      } catch (e) {
+        console.error('Error parsing CUDA progress event:', e);
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [cudaDownloading, serverUrl, refetchCudaStatus]);
+
+  const startHealthPolling = useCallback(() => {
+    if (healthPollRef.current) return;
+
+    healthPollRef.current = setInterval(async () => {
+      try {
+        const result = await apiClient.getHealth();
+        if (result.status === 'healthy') {
+          if (healthPollRef.current) {
+            clearInterval(healthPollRef.current);
+            healthPollRef.current = null;
+          }
+          setRestartPhase('ready');
+          queryClient.invalidateQueries();
+          setTimeout(() => setRestartPhase('idle'), 2000);
+        }
+      } catch {
+        // Server still down, keep polling
+      }
+    }, 1000);
+  }, [queryClient]);
+
+  const handleDownload = async () => {
+    setError(null);
+    try {
+      await apiClient.downloadCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to start download';
+      if (msg.includes('already downloaded')) {
+        refetchCudaStatus();
+      } else {
+        setError(msg);
+      }
+    }
+  };
+
+  const handleRestart = async () => {
+    setError(null);
+    setRestartPhase('stopping');
+    try {
+      setRestartPhase('waiting');
+      startHealthPolling();
+      await platform.lifecycle.restartServer();
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setRestartPhase('ready');
+      queryClient.invalidateQueries();
+      setTimeout(() => setRestartPhase('idle'), 2000);
+    } catch (e: unknown) {
+      setRestartPhase('idle');
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setError(e instanceof Error ? e.message : 'Restart failed');
+    }
+  };
+
+  const handleSwitchToCpu = async () => {
+    setError(null);
+    setRestartPhase('stopping');
+    try {
+      await apiClient.deleteCudaBackend();
+      setRestartPhase('waiting');
+      startHealthPolling();
+      await platform.lifecycle.restartServer();
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setRestartPhase('ready');
+      queryClient.invalidateQueries();
+      setTimeout(() => setRestartPhase('idle'), 2000);
+    } catch (e: unknown) {
+      setRestartPhase('idle');
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setError(e instanceof Error ? e.message : 'Failed to switch to CPU');
+      refetchCudaStatus();
+    }
+  };
+
+  const handleDelete = async () => {
+    setError(null);
+    try {
+      await apiClient.deleteCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to delete CUDA backend');
+    }
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+  };
+
+  if (!health) return null;
+
+  const hasNativeGpu =
+    health.gpu_available &&
+    !isCurrentlyCuda &&
+    health.gpu_type &&
+    !health.gpu_type.includes('CUDA');
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <GpuInfoCard health={health} />
+
+      {/* CUDA section — only when no native GPU and not already on CUDA */}
+      {!hasNativeGpu && !isCurrentlyCuda && (
+        <SettingSection
+          title="CUDA Backend"
+          description="NVIDIA GPU acceleration via a downloadable CUDA backend."
+        >
+          {/* Download progress */}
+          {cudaDownloading && downloadProgress && (
+            <SettingRow title="Downloading CUDA backend...">
+              <div className="space-y-1.5">
+                <Progress value={downloadProgress.progress} className="h-2" />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {downloadProgress.filename ||
+                      (cudaAvailable ? 'Updating...' : 'Downloading...')}
+                  </span>
+                  <span>
+                    {downloadProgress.total > 0
+                      ? `${formatBytes(downloadProgress.current)} / ${formatBytes(downloadProgress.total)}`
+                      : `${downloadProgress.progress.toFixed(1)}%`}
+                  </span>
+                </div>
+              </div>
+            </SettingRow>
+          )}
+
+          {/* Restart in progress */}
+          {restartPhase !== 'idle' && (
+            <SettingRow
+              title={
+                restartPhase === 'ready'
+                  ? 'Server restarted successfully'
+                  : restartPhase === 'waiting'
+                    ? 'Restarting server...'
+                    : 'Stopping server...'
+              }
+              action={<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
+            />
+          )}
+
+          {/* Error */}
+          {error && (
+            <SettingRow title="Error">
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            </SettingRow>
+          )}
+
+          {/* Actions */}
+          {restartPhase === 'idle' && !cudaDownloading && (
+            <>
+              {!cudaAvailable && !isCurrentlyCuda && (
+                <SettingRow
+                  title="Download CUDA backend"
+                  description="~2.4 GB download. Requires an NVIDIA GPU with CUDA support."
+                  action={
+                    <Button onClick={handleDownload} size="sm">
+                      <Download className="h-3.5 w-3.5 mr-1.5" />
+                      Download
+                    </Button>
+                  }
+                />
+              )}
+
+              {cudaAvailable && !isCurrentlyCuda && platform.metadata.isTauri && (
+                <SettingRow
+                  title="Switch to CUDA backend"
+                  description="CUDA backend is downloaded and ready. Restart to enable."
+                  action={
+                    <Button onClick={handleRestart} size="sm">
+                      <RotateCw className="h-3.5 w-3.5 mr-1.5" />
+                      Restart
+                    </Button>
+                  }
+                />
+              )}
+
+              {isCurrentlyCuda && platform.metadata.isTauri && (
+                <SettingRow
+                  title="Switch to CPU backend"
+                  description="Disable GPU acceleration. You can re-download CUDA later."
+                  action={
+                    <Button onClick={handleSwitchToCpu} variant="outline" size="sm">
+                      <RotateCw className="h-3.5 w-3.5 mr-1.5" />
+                      Switch
+                    </Button>
+                  }
+                />
+              )}
+
+              {cudaAvailable && !isCurrentlyCuda && (
+                <SettingRow
+                  title="Remove CUDA backend"
+                  description="Delete the downloaded CUDA binary to free disk space."
+                  action={
+                    <Button
+                      onClick={handleDelete}
+                      variant="ghost"
+                      size="sm"
+                      className="text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+                      Remove
+                    </Button>
+                  }
+                />
+              )}
+            </>
+          )}
+        </SettingSection>
+      )}
+
+      <p className="text-xs text-muted-foreground/60 leading-relaxed">
+        Voicebox automatically detects and uses the best available GPU on your system. On Apple
+        Silicon Macs, the MLX backend runs natively on the Neural Engine and GPU via Metal
+        Performance Shaders (MPS), with no additional setup required. On Windows and Linux with
+        NVIDIA GPUs, you can download an optional CUDA backend for hardware-accelerated inference.
+        AMD ROCm, Intel XPU, and DirectML are also supported where available through PyTorch. When
+        no GPU is detected, Voicebox falls back to CPU — all engines still work, just slower.
+      </p>
+    </div>
+  );
+}
@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
+import { type LogEntry, useLogStore } from '@/stores/logStore';
+
+function formatTime(timestamp: number): string {
+  const d = new Date(timestamp);
+  return d.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function LogLine({ entry }: { entry: LogEntry }) {
+  return (
+    <div className="flex gap-3 font-mono text-xs leading-5 hover:bg-muted/30">
+      <span className="text-muted-foreground/50 select-none shrink-0">
+        {formatTime(entry.timestamp)}
+      </span>
+      <span
+        className={cn(
+          'whitespace-pre-wrap break-all',
+          entry.stream === 'stderr' ? 'text-orange-400/80' : 'text-muted-foreground',
+        )}
+      >
+        {entry.line}
+      </span>
+    </div>
+  );
+}
+
+export function LogsPage() {
+  const entries = useLogStore((s) => s.entries);
+  const clear = useLogStore((s) => s.clear);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [entries.length, autoScroll]);
+
+  // Detect manual scroll to disable auto-scroll
+  const handleScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    setAutoScroll(atBottom);
+  };
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="flex items-center justify-between mb-3">
+        <div>
+          <h3 className="text-sm font-medium">Server Logs</h3>
+          <p className="text-sm text-muted-foreground">
+            {entries.length} {entries.length === 1 ? 'line' : 'lines'}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {!autoScroll && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setAutoScroll(true);
+                containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight });
+              }}
+            >
+              Scroll to bottom
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={clear}>
+            Clear
+          </Button>
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 min-h-0 overflow-y-auto rounded-md border bg-black/20 p-3"
+      >
+        {entries.length === 0 ? (
+          <div className="text-sm text-muted-foreground/50 font-mono space-y-1">
+            <p>No log output yet.</p>
+            {!import.meta.env?.PROD && (
+              <p>
+                Server logs are only captured when the app manages the server process (production
+                builds).
+              </p>
+            )}
+          </div>
+        ) : (
+          entries.map((entry, i) => <LogLine key={`${entry.timestamp}-${i}`} entry={entry} />)
+        )}
+      </div>
+    </div>
+  );
+}
@@ -1,35 +1,68 @@
-import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
-import { GenerationSettings } from '@/components/ServerSettings/GenerationSettings';
-import { GpuAcceleration } from '@/components/ServerSettings/GpuAcceleration';
-import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { Link, Outlet, useMatchRoute } from '@tanstack/react-router';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
 import { usePlayerStore } from '@/stores/playerStore';

-export function ServerTab() {
+interface SettingsTab {
+  label: string;
+  path:
+    | '/settings'
+    | '/settings/generation'
+    | '/settings/gpu'
+    | '/settings/logs'
+    | '/settings/changelog';
+  tauriOnly?: boolean;
+}
+
+const tabs: SettingsTab[] = [
+  { label: 'General', path: '/settings' },
+  { label: 'Generation', path: '/settings/generation' },
+  { label: 'GPU', path: '/settings/gpu', tauriOnly: true },
+  { label: 'Logs', path: '/settings/logs', tauriOnly: true },
+  { label: 'Changelog', path: '/settings/changelog' },
+];
+
+export function SettingsLayout() {
  const platform = usePlatform();
  const isPlayerVisible = !!usePlayerStore((state) => state.audioUrl);
+  const matchRoute = useMatchRoute();
+
  return (
-    <div
-      className={cn('overflow-y-auto flex flex-col', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}
-    >
-      <div className="grid gap-4 md:grid-cols-2">
-        <ConnectionForm />
-        <GenerationSettings />
-        {platform.metadata.isTauri && <GpuAcceleration />}
-        {platform.metadata.isTauri && <UpdateStatus />}
-      </div>
-      <div className="py-8 text-center text-sm text-muted-foreground">
-        Created by{' '}
-        <a
-          href="https://github.com/jamiepine"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-accent hover:underline"
-        >
-          Jamie Pine
-        </a>
+    <div className="flex flex-col h-full min-h-0">
+      <nav className="flex gap-1 border-b shrink-0">
+        {tabs.map((tab) => {
+          if (tab.tauriOnly && !platform.metadata.isTauri) return null;
+
+          const isActive =
+            tab.path === '/settings'
+              ? matchRoute({ to: tab.path, fuzzy: false })
+              : matchRoute({ to: tab.path });
+
+          return (
+            <Link
+              key={tab.path}
+              to={tab.path}
+              className={cn(
+                'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+                isActive
+                  ? 'border-accent text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30',
+              )}
+            >
+              {tab.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div
+        className={cn(
+          'flex-1 overflow-y-auto pt-6 pb-6 px-2 -mx-2',
+          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+        )}
+      >
+        <Outlet />
      </div>
    </div>
  );
@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+
+/**
+ * A section header with title and optional description, separated by a border.
+ */
+export function SettingSection({
+  title,
+  description,
+  children,
+}: {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="space-y-1">
+      {title && <h3 className="text-sm font-medium">{title}</h3>}
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      <div className={`${title || description ? 'pt-3' : ''} space-y-0 divide-y divide-border/60`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A single settings row: label+description on the left, action on the right.
+ * Use for toggles, inputs, buttons, badges — any control type.
+ */
+export function SettingRow({
+  title,
+  description,
+  htmlFor,
+  action,
+  children,
+}: {
+  title: string;
+  description?: string;
+  htmlFor?: string;
+  /** Right-aligned control (checkbox, button, badge, etc.) */
+  action?: ReactNode;
+  /** Full-width content rendered below the label row (for sliders, inputs, etc.) */
+  children?: ReactNode;
+}) {
+  return (
+    <div className="py-3">
+      <div className="flex items-center justify-between gap-8">
+        <div className="min-w-0">
+          <label
+            htmlFor={htmlFor}
+            className="text-sm font-medium leading-none cursor-pointer select-none"
+          >
+            {title}
+          </label>
+          {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </div>
+      {children && <div className="mt-3">{children}</div>}
+    </div>
+  );
+}
@@ -1,5 +1,5 @@
 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { AudioLines, Box, Mic, Server, Speaker, Volume2, Wand2 } from 'lucide-react';
+import { AudioLines, Box, Mic, Settings, Speaker, Volume2, Wand2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { cn } from '@/lib/utils/cn';
@@ -19,7 +19,7 @@ const tabs = [
  { id: 'effects', path: '/effects', icon: Wand2, label: 'Effects' },
  { id: 'audio', path: '/audio', icon: Speaker, label: 'Audio' },
  { id: 'models', path: '/models', icon: Box, label: 'Models' },
-  { id: 'server', path: '/server', icon: Server, label: 'Server' },
+  { id: 'settings', path: '/settings', icon: Settings, label: 'Settings' },
 ];

 export function Sidebar({ isMacOS }: SidebarProps) {
@@ -54,9 +54,10 @@ export function Sidebar({ isMacOS }: SidebarProps) {
      <div className="flex flex-col gap-3">
        {tabs.map((tab, index) => {
          const Icon = tab.icon;
-          // For index route, use exact match; for others, use default matching
          const isActive =
-            tab.path === '/' ? matchRoute({ to: '/', exact: true }) : matchRoute({ to: tab.path });
+            tab.path === '/'
+              ? matchRoute({ to: '/', fuzzy: false })
+              : matchRoute({ to: tab.path, fuzzy: true });

          // Accent fades as buttons get further from the logo
          const accentOpacity = Math.max(0.08, 0.5 - index * 0.07);
@@ -98,7 +99,7 @@ export function Sidebar({ isMacOS }: SidebarProps) {
        <span className="text-[10px] text-muted-foreground/50">v{version}</span>
        {updateStatus.available && (
          <Link
-            to="/server"
+            to="/settings"
            className="text-[9px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-accent/15 text-accent hover:bg-accent/25 transition-colors"
          >
            Update
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
 import { cn } from '@/lib/utils/cn';

 const Slider = React.forwardRef<
@@ -14,7 +14,7 @@ const Slider = React.forwardRef<
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 translate-x-0.5" />
+    <SliderPrimitive.Thumb className="block h-0 w-0 outline-none disabled:pointer-events-none disabled:opacity-50 after:block after:h-5 after:w-5 after:rounded-full after:border-2 after:border-primary after:bg-background after:ring-offset-background after:transition-colors after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-offset-2" />
  </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
@@ -1,3 +1,4 @@
+import { usePlayerStore } from '@/stores/playerStore';
 import {
  Toast,
  ToastClose,
@@ -10,6 +11,7 @@ import { useToast } from './use-toast';

 export function Toaster() {
  const { toasts } = useToast();
+  const isPlayerOpen = !!usePlayerStore((s) => s.audioUrl);

  return (
    <ToastProvider>
@@ -23,7 +25,7 @@ export function Toaster() {
          <ToastClose />
        </Toast>
      ))}
-      <ToastViewport />
+      <ToastViewport className={isPlayerOpen ? 'sm:bottom-32' : ''} />
    </ToastProvider>
  );
 }
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface ToggleProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ checked = false, onCheckedChange, disabled = false, className, id, ...props }, ref) => {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && onCheckedChange) {
+            onCheckedChange(!checked);
+          }
+        }}
+        className={cn(
+          'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors',
+          checked ? 'bg-accent' : 'bg-muted-foreground/25',
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform',
+            checked ? 'translate-x-[18px]' : 'translate-x-[2px]',
+          )}
+        />
+      </button>
+    );
+  },
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };
@@ -1,3 +1,8 @@
 interface Window {
  __voiceboxServerStartedByApp?: boolean;
 }
+
+declare module 'virtual:changelog' {
+  const raw: string;
+  export default raw;
+}
@@ -0,0 +1,37 @@
+export interface ChangelogEntry {
+  version: string;
+  date: string | null;
+  body: string;
+}
+
+/**
+ * Parses a Keep-a-Changelog style markdown string into structured entries.
+ *
+ * Splits on `## [version]` headings and extracts the version + date from each.
+ * The body is the raw markdown between headings (trimmed), with the leading
+ * `# Changelog` title and trailing link references stripped.
+ */
+export function parseChangelog(raw: string): ChangelogEntry[] {
+  const entries: ChangelogEntry[] = [];
+
+  // Strip trailing link reference definitions (e.g. [0.1.0]: https://...)
+  const cleaned = raw.replace(/^\[[\w.]+\]:.*$/gm, '').trimEnd();
+
+  // Match `## [version]` or `## [version] - date`
+  const headingRe = /^## \[(.+?)\](?:\s*-\s*(.+))?$/gm;
+  const matches = [...cleaned.matchAll(headingRe)];
+
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i];
+    const version = match[1];
+    const date = match[2]?.trim() || null;
+
+    const start = match.index! + match[0].length;
+    const end = i + 1 < matches.length ? matches[i + 1].index! : cleaned.length;
+    const body = cleaned.slice(start, end).trim();
+
+    entries.push({ version, date, body });
+  }
+
+  return entries;
+}
@@ -50,12 +50,18 @@ export interface PlatformAudio {
  stopPlayback(): void;
 }

+export interface ServerLogEntry {
+  stream: 'stdout' | 'stderr';
+  line: string;
+}
+
 export interface PlatformLifecycle {
  startServer(remote?: boolean, modelsDir?: string | null): Promise<string>;
  stopServer(): Promise<void>;
  restartServer(modelsDir?: string | null): Promise<string>;
  setKeepServerRunning(keep: boolean): Promise<void>;
  setupWindowCloseHandler(): Promise<void>;
+  subscribeToServerLogs(callback: (entry: ServerLogEntry) => void): () => void;
  onServerReady?: () => void;
 }

@@ -1,10 +1,21 @@
-import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  redirect,
+} from '@tanstack/react-router';
 import { AppFrame } from '@/components/AppFrame/AppFrame';
 import { AudioTab } from '@/components/AudioTab/AudioTab';
 import { EffectsTab } from '@/components/EffectsTab/EffectsTab';
 import { MainEditor } from '@/components/MainEditor/MainEditor';
 import { ModelsTab } from '@/components/ModelsTab/ModelsTab';
-import { ServerTab } from '@/components/ServerTab/ServerTab';
+import { ChangelogPage } from '@/components/ServerTab/ChangelogPage';
+import { GeneralPage } from '@/components/ServerTab/GeneralPage';
+import { GenerationPage } from '@/components/ServerTab/GenerationPage';
+import { GpuPage } from '@/components/ServerTab/GpuPage';
+import { LogsPage } from '@/components/ServerTab/LogsPage';
+import { SettingsLayout } from '@/components/ServerTab/ServerTab';
 import { Sidebar } from '@/components/Sidebar';
 import { StoriesTab } from '@/components/StoriesTab/StoriesTab';
 import { Toaster } from '@/components/ui/toaster';
@@ -120,11 +131,51 @@ const modelsRoute = createRoute({
  component: ModelsTab,
 });

-// Server route
-const serverRoute = createRoute({
+// Settings layout route (parent for sub-tabs)
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/settings',
+  component: SettingsLayout,
+});
+
+// Settings sub-routes
+const settingsGeneralRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/',
+  component: GeneralPage,
+});
+
+const settingsGenerationRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/generation',
+  component: GenerationPage,
+});
+
+const settingsGpuRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/gpu',
+  component: GpuPage,
+});
+
+const settingsChangelogRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/changelog',
+  component: ChangelogPage,
+});
+
+const settingsLogsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/logs',
+  component: LogsPage,
+});
+
+// Redirect old /server path to /settings
+const serverRedirectRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/server',
-  component: ServerTab,
+  beforeLoad: () => {
+    throw redirect({ to: '/settings' });
+  },
 });

 // Route tree
@@ -135,7 +186,14 @@ const routeTree = rootRoute.addChildren([
  audioRoute,
  effectsRoute,
  modelsRoute,
-  serverRoute,
+  settingsRoute.addChildren([
+    settingsGeneralRoute,
+    settingsGenerationRoute,
+    settingsGpuRoute,
+    settingsLogsRoute,
+    settingsChangelogRoute,
+  ]),
+  serverRedirectRoute,
 ]);

 // Create router
@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import type { ServerLogEntry } from '@/platform/types';
+
+const MAX_LOG_ENTRIES = 2000;
+
+export interface LogEntry extends ServerLogEntry {
+  timestamp: number;
+}
+
+interface LogStore {
+  entries: LogEntry[];
+  addEntry: (entry: ServerLogEntry) => void;
+  clear: () => void;
+}
+
+export const useLogStore = create<LogStore>((set) => ({
+  entries: [],
+  addEntry: (entry) =>
+    set((state) => {
+      const newEntry: LogEntry = { ...entry, timestamp: Date.now() };
+      const entries = [...state.entries, newEntry];
+      // Cap buffer size
+      if (entries.length > MAX_LOG_ENTRIES) {
+        return { entries: entries.slice(entries.length - MAX_LOG_ENTRIES) };
+      }
+      return { entries };
+    }),
+  clear: () => set({ entries: [] }),
+}));
@@ -6,5 +6,5 @@
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "plugins/**/*.ts"]
 }
@@ -2,9 +2,10 @@ import path from 'node:path';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import { changelogPlugin } from './plugins/changelog';

 export default defineConfig({
-  plugins: [tailwindcss(), react()],
+  plugins: [tailwindcss(), react(), changelogPlugin(path.resolve(__dirname, '..'))],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),