Add missing Svelte components and stores, fix .gitignore lib/ pattern

The src/lib/ directory was being excluded by a Python .gitignore rule
for lib/ (meant for Python's build output). Changed to /lib/ so it
only matches root-level lib/ and doesn't block src/lib/.

Adds 8 files that were created but missed in the initial commit:
- 5 Svelte components (Header, StatusBar, Controls, TranscriptionDisplay, Settings)
- 3 TypeScript stores (backend, config, transcriptions)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitignore

@@ -10,8 +10,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
+/lib/
-lib64/
+/lib64/
 parts/
 sdist/
 var/

src/lib/components/Controls.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { backendStore } from "$lib/stores/backend";
+  import { transcriptionStore } from "$lib/stores/transcriptions";
+
+  let isTranscribing = $derived(backendStore.appState === "transcribing");
+  let isReady = $derived(
+    backendStore.appState === "ready" || backendStore.appState === "transcribing"
+  );
+  let isLoading = $state(false);
+
+  async function toggleTranscription() {
+    if (isLoading) return;
+    isLoading = true;
+    try {
+      if (isTranscribing) {
+        await backendStore.apiPost("/api/stop");
+      } else {
+        await backendStore.apiPost("/api/start");
+      }
+    } catch (err) {
+      console.error("Failed to toggle transcription:", err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function clearTranscriptions() {
+    try {
+      await backendStore.apiPost("/api/clear");
+      transcriptionStore.clearAll();
+    } catch (err) {
+      console.error("Failed to clear:", err);
+    }
+  }
+
+  async function saveTranscriptions() {
+    try {
+      // Get transcription text from backend or local store
+      let text: string;
+      try {
+        const data = await backendStore.apiGet<{ text: string }>("/api/transcriptions");
+        text = data.text || transcriptionStore.getPlainText();
+      } catch {
+        text = transcriptionStore.getPlainText();
+      }
+
+      if (!text.trim()) {
+        console.warn("No transcriptions to save");
+        return;
+      }
+
+      // Try Tauri dialog for native save, fall back to browser download
+      try {
+        const { save } = await import("@tauri-apps/plugin-dialog");
+        const filePath = await save({
+          defaultPath: "transcription.txt",
+          filters: [
+            { name: "Text Files", extensions: ["txt"] },
+            { name: "All Files", extensions: ["*"] },
+          ],
+        });
+        if (filePath) {
+          // Write via backend API
+          await backendStore.apiPost("/api/save-file", { path: filePath, text });
+        }
+      } catch {
+        // Fallback: browser-style download
+        const blob = new Blob([text], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "transcription.txt";
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error("Failed to save:", err);
+    }
+  }
+</script>
+
+<div class="controls">
+  <button
+    class={isTranscribing ? "danger" : "primary"}
+    onclick={toggleTranscription}
+    disabled={!isReady || isLoading}
+  >
+    {#if isLoading}
+      ...
+    {:else if isTranscribing}
+      Stop Transcription
+    {:else}
+      Start Transcription
+    {/if}
+  </button>
+
+  <button onclick={clearTranscriptions} disabled={!backendStore.connected}>
+    Clear
+  </button>
+
+  <button onclick={saveTranscriptions} disabled={!backendStore.connected}>
+    Save
+  </button>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background-color: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  interface Props {
+    onSettingsClick: () => void;
+  }
+
+  let { onSettingsClick }: Props = $props();
+</script>
+
+<header class="app-header">
+  <h1 class="app-title">Local Transcription</h1>
+  <button class="settings-btn" onclick={onSettingsClick} title="Settings">
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="3"></circle>
+      <path
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1
+        0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0
+        0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2
+        2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65
+        1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2
+        0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68
+        15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0
+        0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0
+        0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1
+        2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0
+        0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2
+        2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0
+        1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
+        2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65
+        0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0
+        1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+      ></path>
+    </svg>
+  </button>
+</header>
+
+<style>
+  .app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 20px;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+
+  .app-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.5px;
+  }
+
+  .settings-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+  }
+
+  .settings-btn:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-tertiary);
+  }
+</style>

src/lib/components/Settings.svelte

@@ -0,0 +1,780 @@
+<script lang="ts">
+  import { configStore } from "$lib/stores/config";
+  import { backendStore } from "$lib/stores/backend";
+
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
+
+  // Local copies of config values for editing
+  let userName = $state("");
+  let audioDevice = $state("default");
+  let model = $state("base.en");
+  let language = $state("en");
+  let computeDevice = $state("auto");
+  let computeType = $state("default");
+  let enableRealtime = $state(false);
+  let realtimeModel = $state("tiny.en");
+  let realtimeProcessingPause = $state(0.1);
+  let sileroSensitivity = $state(0.4);
+  let webrtcSensitivity = $state(3);
+  let postSpeechSilence = $state(0.3);
+  let minRecordingLength = $state(0.5);
+  let minGapBetween = $state(0);
+  let continuousMode = $state(false);
+  let showTimestamps = $state(true);
+  let fadeSeconds = $state(10);
+  let maxLines = $state(100);
+  let fontSize = $state(12);
+  let userColor = $state("#4CAF50");
+  let textColor = $state("#FFFFFF");
+  let backgroundColor = $state("#000000");
+  let syncEnabled = $state(false);
+  let syncUrl = $state("");
+  let syncRoom = $state("default");
+  let syncPassphrase = $state("");
+  let remoteMode = $state("local");
+  let remoteServerUrl = $state("");
+  let managedEmail = $state("");
+  let managedPassword = $state("");
+  let autoCheckUpdates = $state(true);
+
+  // Fetched device lists
+  let audioDevices = $state<{ id: string; name: string }[]>([]);
+  let computeDevices = $state<{ id: string; name: string }[]>([]);
+
+  // Model options
+  const modelOptions = [
+    "tiny",
+    "tiny.en",
+    "base",
+    "base.en",
+    "small",
+    "small.en",
+    "medium",
+    "medium.en",
+    "large-v1",
+    "large-v2",
+    "large-v3",
+  ];
+
+  const computeTypeOptions = [
+    { value: "default", label: "Default" },
+    { value: "int8", label: "int8 (Fastest)" },
+    { value: "float16", label: "float16 (GPU)" },
+    { value: "float32", label: "float32 (Best Quality)" },
+  ];
+
+  const webrtcOptions = [
+    { value: 0, label: "0 (Most Sensitive)" },
+    { value: 1, label: "1" },
+    { value: 2, label: "2" },
+    { value: 3, label: "3 (Least Sensitive)" },
+  ];
+
+  // Load config values on mount
+  $effect(() => {
+    const cfg = configStore.config;
+    userName = cfg.user.name;
+    audioDevice = cfg.audio.input_device;
+    model = cfg.transcription.model;
+    language = cfg.transcription.language;
+    computeDevice = cfg.transcription.device;
+    computeType = cfg.transcription.compute_type;
+    enableRealtime = cfg.transcription.enable_realtime_transcription;
+    realtimeModel = cfg.transcription.realtime_model;
+    realtimeProcessingPause = cfg.transcription.realtime_processing_pause;
+    sileroSensitivity = cfg.transcription.silero_sensitivity;
+    webrtcSensitivity = cfg.transcription.webrtc_sensitivity;
+    postSpeechSilence = cfg.transcription.post_speech_silence_duration;
+    minRecordingLength = cfg.transcription.min_length_of_recording;
+    minGapBetween = cfg.transcription.min_gap_between_recordings;
+    continuousMode = cfg.transcription.continuous_mode;
+    showTimestamps = cfg.display.show_timestamps;
+    fadeSeconds = cfg.display.fade_after_seconds;
+    maxLines = cfg.display.max_lines;
+    fontSize = cfg.display.font_size;
+    userColor = cfg.display.user_color;
+    textColor = cfg.display.text_color;
+    // Strip alpha from background color for the color picker (only supports 6-char hex)
+    const bgHex = cfg.display.background_color.replace("#", "");
+    backgroundColor = "#" + bgHex.substring(0, 6);
+    syncEnabled = cfg.server_sync.enabled;
+    syncUrl = cfg.server_sync.url;
+    syncRoom = cfg.server_sync.room;
+    syncPassphrase = cfg.server_sync.passphrase;
+    remoteMode = cfg.remote.mode;
+    remoteServerUrl = cfg.remote.server_url;
+    autoCheckUpdates = cfg.updates.auto_check;
+  });
+
+  // Fetch audio devices and compute devices on mount
+  $effect(() => {
+    fetchAudioDevices();
+    fetchComputeDevices();
+  });
+
+  async function fetchAudioDevices() {
+    try {
+      const data = await backendStore.apiGet<{
+        devices: { id: string; name: string }[];
+      }>("/api/audio-devices");
+      audioDevices = data.devices ?? [];
+    } catch {
+      audioDevices = [];
+    }
+  }
+
+  async function fetchComputeDevices() {
+    try {
+      const data = await backendStore.apiGet<{
+        devices: { id: string; name: string }[];
+      }>("/api/compute-devices");
+      computeDevices = data.devices ?? [];
+    } catch {
+      computeDevices = [
+        { id: "auto", name: "Auto" },
+        { id: "cpu", name: "CPU" },
+        { id: "cuda", name: "CUDA (GPU)" },
+      ];
+    }
+  }
+
+  async function handleSave() {
+    const updates = {
+      user: {
+        name: userName,
+      },
+      audio: {
+        input_device: audioDevice,
+      },
+      transcription: {
+        model,
+        device: computeDevice,
+        language,
+        compute_type: computeType,
+        enable_realtime_transcription: enableRealtime,
+        realtime_model: realtimeModel,
+        realtime_processing_pause: realtimeProcessingPause,
+        silero_sensitivity: sileroSensitivity,
+        webrtc_sensitivity: webrtcSensitivity,
+        post_speech_silence_duration: postSpeechSilence,
+        min_length_of_recording: minRecordingLength,
+        min_gap_between_recordings: minGapBetween,
+        continuous_mode: continuousMode,
+      },
+      display: {
+        show_timestamps: showTimestamps,
+        fade_after_seconds: fadeSeconds,
+        max_lines: maxLines,
+        font_size: fontSize,
+        user_color: userColor,
+        text_color: textColor,
+        background_color: backgroundColor,
+      },
+      server_sync: {
+        enabled: syncEnabled,
+        url: syncUrl,
+        room: syncRoom,
+        passphrase: syncPassphrase,
+      },
+      remote: {
+        mode: remoteMode,
+        server_url: remoteServerUrl,
+      },
+      updates: {
+        auto_check: autoCheckUpdates,
+      },
+    };
+
+    try {
+      await configStore.saveConfig(updates);
+      onClose();
+    } catch (err) {
+      console.error("Failed to save settings:", err);
+    }
+  }
+
+  function handleCancel() {
+    onClose();
+  }
+
+  async function handleCheckUpdates() {
+    try {
+      await backendStore.apiPost("/api/check-updates");
+    } catch (err) {
+      console.error("Failed to check for updates:", err);
+    }
+  }
+
+  async function handleManagedLogin() {
+    try {
+      await backendStore.apiPost("/api/remote/login", {
+        email: managedEmail,
+        password: managedPassword,
+      });
+    } catch (err) {
+      console.error("Login failed:", err);
+    }
+  }
+
+  async function handleManagedRegister() {
+    try {
+      await backendStore.apiPost("/api/remote/register", {
+        email: managedEmail,
+        password: managedPassword,
+      });
+    } catch (err) {
+      console.error("Register failed:", err);
+    }
+  }
+
+  function handleOverlayClick(e: MouseEvent) {
+    if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
+      handleCancel();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      handleCancel();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="settings-overlay" role="presentation" onclick={handleOverlayClick}>
+  <div class="settings-panel">
+    <div class="settings-header">
+      <h2>Settings</h2>
+      <button class="close-btn" aria-label="Close settings" onclick={handleCancel}>
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <div class="settings-content">
+      <!-- User Settings -->
+      <section class="settings-section">
+        <h3>User Settings</h3>
+        <div class="field">
+          <label for="user-name">Display Name</label>
+          <input id="user-name" type="text" bind:value={userName} />
+        </div>
+      </section>
+
+      <!-- Audio Settings -->
+      <section class="settings-section">
+        <h3>Audio Settings</h3>
+        <div class="field">
+          <label for="audio-device">Audio Device</label>
+          <select id="audio-device" bind:value={audioDevice}>
+            <option value="default">Default</option>
+            {#each audioDevices as device}
+              <option value={device.id}>{device.name}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Transcription Settings -->
+      <section class="settings-section">
+        <h3>Transcription Settings</h3>
+        <div class="field">
+          <label for="model">Model</label>
+          <select id="model" bind:value={model}>
+            {#each modelOptions as opt}
+              <option value={opt}>{opt}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="field">
+          <label for="language">Language</label>
+          <input id="language" type="text" bind:value={language} placeholder="en" />
+        </div>
+        <div class="field">
+          <label for="compute-device">Compute Device</label>
+          <select id="compute-device" bind:value={computeDevice}>
+            {#each computeDevices as dev}
+              <option value={dev.id}>{dev.name}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="field">
+          <label for="compute-type">Compute Type</label>
+          <select id="compute-type" bind:value={computeType}>
+            {#each computeTypeOptions as opt}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Realtime Preview -->
+      <section class="settings-section">
+        <h3>Realtime Preview</h3>
+        <div class="field-row">
+          <label for="enable-realtime">Enable Realtime Preview</label>
+          <input
+            id="enable-realtime"
+            type="checkbox"
+            bind:checked={enableRealtime}
+          />
+        </div>
+        {#if enableRealtime}
+          <div class="field">
+            <label for="realtime-model">Realtime Model</label>
+            <select id="realtime-model" bind:value={realtimeModel}>
+              {#each modelOptions as opt}
+                <option value={opt}>{opt}</option>
+              {/each}
+            </select>
+          </div>
+          <div class="field">
+            <label for="realtime-pause"
+              >Processing Pause: {realtimeProcessingPause.toFixed(2)}s</label
+            >
+            <input
+              id="realtime-pause"
+              type="range"
+              min="0.01"
+              max="1.0"
+              step="0.01"
+              bind:value={realtimeProcessingPause}
+            />
+          </div>
+        {/if}
+      </section>
+
+      <!-- VAD Settings -->
+      <section class="settings-section">
+        <h3>VAD Settings</h3>
+        <div class="field">
+          <label for="silero-sensitivity"
+            >Silero Sensitivity: {sileroSensitivity.toFixed(2)}</label
+          >
+          <input
+            id="silero-sensitivity"
+            type="range"
+            min="0.0"
+            max="1.0"
+            step="0.05"
+            bind:value={sileroSensitivity}
+          />
+        </div>
+        <div class="field">
+          <label for="webrtc-sensitivity">WebRTC Sensitivity</label>
+          <select id="webrtc-sensitivity" bind:value={webrtcSensitivity}>
+            {#each webrtcOptions as opt}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Timing -->
+      <section class="settings-section">
+        <h3>Timing</h3>
+        <div class="field">
+          <label for="post-speech-silence"
+            >Post-Speech Silence: {postSpeechSilence.toFixed(2)}s</label
+          >
+          <input
+            id="post-speech-silence"
+            type="range"
+            min="0.1"
+            max="3.0"
+            step="0.1"
+            bind:value={postSpeechSilence}
+          />
+        </div>
+        <div class="field">
+          <label for="min-recording"
+            >Min Recording Length: {minRecordingLength.toFixed(2)}s</label
+          >
+          <input
+            id="min-recording"
+            type="range"
+            min="0.1"
+            max="5.0"
+            step="0.1"
+            bind:value={minRecordingLength}
+          />
+        </div>
+        <div class="field">
+          <label for="min-gap"
+            >Min Gap Between Recordings: {minGapBetween.toFixed(2)}s</label
+          >
+          <input
+            id="min-gap"
+            type="range"
+            min="0"
+            max="3.0"
+            step="0.1"
+            bind:value={minGapBetween}
+          />
+        </div>
+        <div class="field-row">
+          <label for="continuous-mode">Continuous Mode</label>
+          <input
+            id="continuous-mode"
+            type="checkbox"
+            bind:checked={continuousMode}
+          />
+        </div>
+      </section>
+
+      <!-- Display Settings -->
+      <section class="settings-section">
+        <h3>Display Settings</h3>
+        <div class="field-row">
+          <label for="show-timestamps">Show Timestamps</label>
+          <input
+            id="show-timestamps"
+            type="checkbox"
+            bind:checked={showTimestamps}
+          />
+        </div>
+        <div class="field">
+          <label for="fade-seconds"
+            >Fade After Seconds: {fadeSeconds} (0 = never)</label
+          >
+          <input
+            id="fade-seconds"
+            type="range"
+            min="0"
+            max="60"
+            step="1"
+            bind:value={fadeSeconds}
+          />
+        </div>
+        <div class="field">
+          <label for="max-lines">Max Lines: {maxLines}</label>
+          <input
+            id="max-lines"
+            type="range"
+            min="10"
+            max="500"
+            step="10"
+            bind:value={maxLines}
+          />
+        </div>
+        <div class="field">
+          <label for="font-size">Font Size: {fontSize}px</label>
+          <input
+            id="font-size"
+            type="range"
+            min="8"
+            max="32"
+            step="1"
+            bind:value={fontSize}
+          />
+        </div>
+      </section>
+
+      <!-- Color Settings -->
+      <section class="settings-section">
+        <h3>Color Settings</h3>
+        <div class="field-row">
+          <label for="user-color">User Color</label>
+          <input id="user-color" type="color" bind:value={userColor} />
+        </div>
+        <div class="field-row">
+          <label for="text-color">Text Color</label>
+          <input id="text-color" type="color" bind:value={textColor} />
+        </div>
+        <div class="field-row">
+          <label for="bg-color">Background Color</label>
+          <input id="bg-color" type="color" bind:value={backgroundColor} />
+        </div>
+      </section>
+
+      <!-- Server Sync -->
+      <section class="settings-section">
+        <h3>Server Sync</h3>
+        <div class="field-row">
+          <label for="sync-enabled">Enable Server Sync</label>
+          <input
+            id="sync-enabled"
+            type="checkbox"
+            bind:checked={syncEnabled}
+          />
+        </div>
+        {#if syncEnabled}
+          <div class="field">
+            <label for="sync-url">Server URL</label>
+            <input
+              id="sync-url"
+              type="url"
+              bind:value={syncUrl}
+              placeholder="http://localhost:3000/api/send"
+            />
+          </div>
+          <div class="field">
+            <label for="sync-room">Room</label>
+            <input id="sync-room" type="text" bind:value={syncRoom} />
+          </div>
+          <div class="field">
+            <label for="sync-passphrase">Passphrase</label>
+            <input
+              id="sync-passphrase"
+              type="password"
+              bind:value={syncPassphrase}
+            />
+          </div>
+        {/if}
+      </section>
+
+      <!-- Remote Transcription -->
+      <section class="settings-section">
+        <h3>Remote Transcription</h3>
+        <div class="radio-group">
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="local"
+              bind:group={remoteMode}
+            />
+            Local
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="managed"
+              bind:group={remoteMode}
+            />
+            Managed
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="byok"
+              bind:group={remoteMode}
+            />
+            BYOK (Bring Your Own Key)
+          </label>
+        </div>
+        {#if remoteMode !== "local"}
+          <div class="field">
+            <label for="remote-url">Server URL</label>
+            <input
+              id="remote-url"
+              type="url"
+              bind:value={remoteServerUrl}
+              placeholder="wss://your-proxy.com"
+            />
+          </div>
+        {/if}
+        {#if remoteMode === "managed"}
+          <div class="managed-auth">
+            <div class="field">
+              <label for="managed-email">Email</label>
+              <input
+                id="managed-email"
+                type="email"
+                bind:value={managedEmail}
+                placeholder="email@example.com"
+              />
+            </div>
+            <div class="field">
+              <label for="managed-password">Password</label>
+              <input
+                id="managed-password"
+                type="password"
+                bind:value={managedPassword}
+              />
+            </div>
+            <div class="auth-buttons">
+              <button onclick={handleManagedLogin}>Login</button>
+              <button onclick={handleManagedRegister}>Register</button>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- Updates -->
+      <section class="settings-section">
+        <h3>Updates</h3>
+        <div class="field-row">
+          <label for="auto-check-updates">Auto-Check for Updates</label>
+          <input
+            id="auto-check-updates"
+            type="checkbox"
+            bind:checked={autoCheckUpdates}
+          />
+        </div>
+        <button onclick={handleCheckUpdates}>Check Now</button>
+      </section>
+    </div>
+
+    <div class="settings-footer">
+      <button onclick={handleCancel}>Cancel</button>
+      <button class="primary" onclick={handleSave}>Save</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .settings-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .settings-panel {
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    width: 560px;
+    max-width: 95vw;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+
+  .settings-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+
+  .settings-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  .close-btn:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .settings-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 20px;
+  }
+
+  .settings-section {
+    margin-bottom: 24px;
+  }
+
+  .settings-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .settings-section h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .field {
+    margin-bottom: 12px;
+  }
+
+  .field label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+
+  .field-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .field-row label {
+    font-size: 13px;
+    color: var(--text-primary);
+  }
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .radio-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .managed-auth {
+    margin-top: 8px;
+    padding: 12px;
+    background-color: var(--bg-secondary);
+    border-radius: 8px;
+  }
+
+  .auth-buttons {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .settings-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+</style>

src/lib/components/StatusBar.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { backendStore } from "$lib/stores/backend";
+  import { configStore } from "$lib/stores/config";
+
+  let statusColor = $derived.by(() => {
+    switch (backendStore.appState) {
+      case "initializing":
+        return "#ff9800";
+      case "ready":
+        return "#4caf50";
+      case "transcribing":
+        return "#f44336";
+      case "error":
+        return "#f44336";
+      default:
+        return "#888";
+    }
+  });
+
+  let isPulsing = $derived(backendStore.appState === "transcribing");
+  let userName = $derived(configStore.config.user.name);
+</script>
+
+<div class="status-bar">
+  <div class="status-left">
+    <span
+      class="status-indicator"
+      class:pulsing={isPulsing}
+      style="background-color: {statusColor}"
+    ></span>
+    <span class="state-message">{backendStore.stateMessage}</span>
+  </div>
+  <div class="status-right">
+    {#if backendStore.deviceInfo}
+      <span class="device-info">{backendStore.deviceInfo}</span>
+      <span class="separator">|</span>
+    {/if}
+    <span class="user-name">{userName}</span>
+  </div>
+</div>
+
+<style>
+  .status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 20px;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+
+  .status-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+  }
+
+  .status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .status-indicator.pulsing {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
+    }
+    50% {
+      opacity: 0.7;
+      box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
+    }
+  }
+
+  .state-message {
+    color: var(--text-primary);
+  }
+
+  .device-info {
+    color: var(--text-secondary);
+  }
+
+  .separator {
+    color: var(--text-muted);
+  }
+
+  .user-name {
+    color: var(--accent-green);
+    font-weight: 500;
+  }
+</style>

src/lib/components/TranscriptionDisplay.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { transcriptionStore } from "$lib/stores/transcriptions";
+  import { configStore } from "$lib/stores/config";
+
+  let container: HTMLDivElement | undefined = $state();
+  let showTimestamps = $derived(configStore.config.display.show_timestamps);
+  let items = $derived(transcriptionStore.items);
+
+  $effect(() => {
+    // Trigger on items length change to auto-scroll
+    const _len = items.length;
+    if (container) {
+      requestAnimationFrame(() => {
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      });
+    }
+  });
+</script>
+
+<div class="transcription-display" bind:this={container}>
+  {#each items as item (item.id)}
+    <div class="transcription-item" class:preview={item.isPreview}>
+      {#if showTimestamps && item.timestamp}
+        <span class="timestamp">[{item.timestamp}]</span>
+      {/if}
+      {#if item.userName}
+        <span class="user-name">{item.userName}:</span>
+      {/if}
+      {#if item.isPreview}
+        <span class="preview-indicator">[...]</span>
+      {/if}
+      <span class="text">{item.text}</span>
+    </div>
+  {:else}
+    <div class="empty-state">
+      Transcriptions will appear here...
+    </div>
+  {/each}
+</div>
+
+<style>
+  .transcription-display {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .transcription-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.03);
+    animation: fadeIn 0.2s ease-out;
+    line-height: 1.6;
+    word-wrap: break-word;
+  }
+
+  .transcription-item.preview {
+    font-style: italic;
+    opacity: 0.7;
+  }
+
+  .timestamp {
+    color: #888;
+    font-size: 0.85em;
+    margin-right: 8px;
+    font-family: monospace;
+  }
+
+  .user-name {
+    color: #4caf50;
+    font-weight: 700;
+    margin-right: 6px;
+  }
+
+  .preview-indicator {
+    color: #888;
+    font-size: 0.85em;
+    margin-right: 4px;
+  }
+
+  .text {
+    color: #ffffff;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    font-size: 15px;
+    font-style: italic;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

src/lib/stores/backend.ts

@@ -0,0 +1,266 @@
+/**
+ * Backend store - manages WebSocket connection and REST API communication
+ * with the Python backend server running on localhost.
+ *
+ * The backend port defaults to 8081 but can be updated at runtime via
+ * `setPort()`. The WebSocket connects to /ws/control for real-time push
+ * of transcriptions, previews, and state changes.
+ */
+
+export type ConnectionState = "connecting" | "connected" | "disconnected" | "error";
+export type AppState = "initializing" | "ready" | "transcribing" | "reloading" | "error";
+
+interface BackendState {
+  port: number;
+  connectionState: ConnectionState;
+  appState: AppState;
+  stateMessage: string;
+  deviceInfo: string;
+  wsConnection: WebSocket | null;
+  version: string;
+  lastError: string;
+}
+
+let state = $state<BackendState>({
+  port: 8081,
+  connectionState: "disconnected",
+  appState: "initializing",
+  stateMessage: "Connecting to backend...",
+  deviceInfo: "",
+  wsConnection: null,
+  version: "1.4.0",
+  lastError: "",
+});
+
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let reconnectAttempts = 0;
+const MAX_RECONNECT_DELAY_MS = 30_000;
+const BASE_RECONNECT_DELAY_MS = 1_000;
+
+// ── URL helpers ──────────────────────────────────────────────────────
+
+function apiUrl(path: string): string {
+  const normalised = path.startsWith("/") ? path : `/${path}`;
+  return `http://localhost:${state.port}${normalised}`;
+}
+
+async function apiFetch(path: string, options?: RequestInit): Promise<Response> {
+  const url = apiUrl(path);
+  const method = options?.method?.toUpperCase() ?? "GET";
+  const headers = new Headers(options?.headers);
+  if (method !== "GET" && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+  return fetch(url, { ...options, headers });
+}
+
+// ── WebSocket management ─────────────────────────────────────────────
+
+function connectWebSocket() {
+  // Tear down any existing connection
+  disconnect();
+
+  state.connectionState = "connecting";
+  reconnectAttempts = 0;
+
+  _openSocket();
+}
+
+function _openSocket() {
+  const wsUrl = `ws://localhost:${state.port}/ws/control`;
+
+  try {
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      state.connectionState = "connected";
+      state.lastError = "";
+      reconnectAttempts = 0;
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        handleWebSocketMessage(data);
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    ws.onclose = () => {
+      state.wsConnection = null;
+      if (state.connectionState !== "disconnected") {
+        state.connectionState = "error";
+        state.stateMessage = "Disconnected from backend";
+        _scheduleReconnect();
+      }
+    };
+
+    ws.onerror = () => {
+      state.lastError = "WebSocket error";
+      // onclose fires after this, which handles reconnect
+    };
+
+    state.wsConnection = ws;
+  } catch {
+    state.connectionState = "error";
+    state.stateMessage = "Failed to connect";
+    _scheduleReconnect();
+  }
+}
+
+function _scheduleReconnect() {
+  if (reconnectTimer) return;
+
+  const delay = Math.min(
+    BASE_RECONNECT_DELAY_MS * Math.pow(2, reconnectAttempts),
+    MAX_RECONNECT_DELAY_MS,
+  );
+  reconnectAttempts++;
+
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    if (state.connectionState !== "disconnected") {
+      state.connectionState = "connecting";
+      _openSocket();
+    }
+  }, delay);
+}
+
+function disconnect() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  state.connectionState = "disconnected";
+  if (state.wsConnection) {
+    const ws = state.wsConnection;
+    ws.onclose = null;
+    ws.onerror = null;
+    ws.close();
+    state.wsConnection = null;
+  }
+}
+
+// ── WebSocket message handling ───────────────────────────────────────
+
+function handleWebSocketMessage(data: Record<string, unknown>) {
+  // Handle state changes locally
+  if (data.type === "state_changed") {
+    if (data.state) {
+      state.appState = data.state as AppState;
+    }
+    if (data.message) {
+      state.stateMessage = data.message as string;
+    }
+  }
+
+  if (data.type === "error") {
+    state.lastError = (data.message as string) ?? "Unknown error";
+  }
+
+  // Dispatch to window for other stores (transcriptions, etc.)
+  if (data.type === "transcription") {
+    window.dispatchEvent(
+      new CustomEvent("backend:transcription", { detail: data })
+    );
+  } else if (data.type === "preview") {
+    window.dispatchEvent(
+      new CustomEvent("backend:preview", { detail: data })
+    );
+  } else if (data.type === "credits_low") {
+    window.dispatchEvent(
+      new CustomEvent("backend:credits_low", { detail: data })
+    );
+  }
+}
+
+// ── Port management ──────────────────────────────────────────────────
+
+function setPort(newPort: number) {
+  if (newPort === state.port) return;
+  state.port = newPort;
+  // Reconnect with new port if we had a connection
+  if (state.connectionState !== "disconnected") {
+    connectWebSocket();
+  }
+}
+
+// ── Typed REST helpers ───────────────────────────────────────────────
+
+async function apiGet<T = unknown>(path: string): Promise<T> {
+  const resp = await apiFetch(path);
+  if (!resp.ok) throw new Error(`GET ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+async function apiPost<T = unknown>(
+  path: string,
+  body?: unknown
+): Promise<T> {
+  const resp = await apiFetch(path, {
+    method: "POST",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  if (!resp.ok) throw new Error(`POST ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+async function apiPut<T = unknown>(
+  path: string,
+  body?: unknown
+): Promise<T> {
+  const resp = await apiFetch(path, {
+    method: "PUT",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  if (!resp.ok) throw new Error(`PUT ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+// ── Public API ───────────────────────────────────────────────────────
+
+export const backendStore = {
+  get port() {
+    return state.port;
+  },
+  get connectionState() {
+    return state.connectionState;
+  },
+  get connected() {
+    return state.connectionState === "connected";
+  },
+  get appState() {
+    return state.appState;
+  },
+  get stateMessage() {
+    return state.stateMessage;
+  },
+  get deviceInfo() {
+    return state.deviceInfo;
+  },
+  get version() {
+    return state.version;
+  },
+  get lastError() {
+    return state.lastError;
+  },
+  get apiBaseUrl() {
+    return `http://localhost:${state.port}`;
+  },
+  get wsUrl() {
+    return `ws://localhost:${state.port}/ws/control`;
+  },
+  setPort,
+  connect: connectWebSocket,
+  disconnect,
+  apiUrl,
+  apiFetch,
+  apiGet,
+  apiPost,
+  apiPut,
+};

src/lib/stores/config.ts

@@ -0,0 +1,243 @@
+/**
+ * Config store - manages application configuration loaded from
+ * and saved to the Python backend via the backend store's API helpers.
+ *
+ * The backend accepts PUT /api/config with `{ settings: { "dot.key": value } }`.
+ */
+
+import { backendStore } from "$lib/stores/backend";
+
+export interface AppConfig {
+  user: {
+    name: string;
+    id: string;
+  };
+  audio: {
+    input_device: string;
+    sample_rate: number;
+  };
+  transcription: {
+    model: string;
+    device: string;
+    language: string;
+    compute_type: string;
+    enable_realtime_transcription: boolean;
+    realtime_model: string;
+    realtime_processing_pause: number;
+    silero_sensitivity: number;
+    silero_use_onnx: boolean;
+    webrtc_sensitivity: number;
+    post_speech_silence_duration: number;
+    min_length_of_recording: number;
+    min_gap_between_recordings: number;
+    pre_recording_buffer_duration: number;
+    beam_size: number;
+    initial_prompt: string;
+    no_log_file: boolean;
+    continuous_mode: boolean;
+  };
+  server_sync: {
+    enabled: boolean;
+    url: string;
+    room: string;
+    passphrase: string;
+  };
+  display: {
+    show_timestamps: boolean;
+    max_lines: number;
+    font_source: string;
+    font_family: string;
+    websafe_font: string;
+    google_font: string;
+    custom_font_file: string;
+    font_size: number;
+    theme: string;
+    fade_after_seconds: number;
+    user_color: string;
+    text_color: string;
+    background_color: string;
+  };
+  web_server: {
+    port: number;
+    host: string;
+  };
+  remote: {
+    mode: string;
+    server_url: string;
+    auth_token: string;
+    byok_api_key: string;
+    deepgram_model: string;
+    language: string;
+    fallback_to_local: boolean;
+  };
+  updates: {
+    auto_check: boolean;
+    gitea_url: string;
+    owner: string;
+    repo: string;
+    skipped_versions: string[];
+    last_check: string;
+    check_interval_hours: number;
+  };
+}
+
+function getDefaultConfig(): AppConfig {
+  return {
+    user: { name: "User", id: "" },
+    audio: { input_device: "default", sample_rate: 16000 },
+    transcription: {
+      model: "base.en",
+      device: "auto",
+      language: "en",
+      compute_type: "default",
+      enable_realtime_transcription: false,
+      realtime_model: "tiny.en",
+      realtime_processing_pause: 0.1,
+      silero_sensitivity: 0.4,
+      silero_use_onnx: true,
+      webrtc_sensitivity: 3,
+      post_speech_silence_duration: 0.3,
+      min_length_of_recording: 0.5,
+      min_gap_between_recordings: 0,
+      pre_recording_buffer_duration: 0.2,
+      beam_size: 5,
+      initial_prompt: "",
+      no_log_file: true,
+      continuous_mode: false,
+    },
+    server_sync: {
+      enabled: false,
+      url: "http://localhost:3000/api/send",
+      room: "default",
+      passphrase: "",
+    },
+    display: {
+      show_timestamps: true,
+      max_lines: 100,
+      font_source: "System Font",
+      font_family: "Courier",
+      websafe_font: "Arial",
+      google_font: "Roboto",
+      custom_font_file: "",
+      font_size: 12,
+      theme: "dark",
+      fade_after_seconds: 10,
+      user_color: "#4CAF50",
+      text_color: "#FFFFFF",
+      background_color: "#000000B3",
+    },
+    web_server: { port: 8080, host: "127.0.0.1" },
+    remote: {
+      mode: "local",
+      server_url: "",
+      auth_token: "",
+      byok_api_key: "",
+      deepgram_model: "nova-2",
+      language: "en-US",
+      fallback_to_local: true,
+    },
+    updates: {
+      auto_check: true,
+      gitea_url: "https://repo.anhonesthost.net",
+      owner: "streamer-tools",
+      repo: "local-transcription",
+      skipped_versions: [],
+      last_check: "",
+      check_interval_hours: 24,
+    },
+  };
+}
+
+let config = $state<AppConfig>(getDefaultConfig());
+let loading = $state(false);
+let error = $state("");
+
+/**
+ * Fetch the full configuration tree from the backend.
+ * GET /api/config
+ */
+async function fetchConfig(): Promise<void> {
+  loading = true;
+  error = "";
+
+  try {
+    const data = await backendStore.apiGet<Record<string, unknown>>("/api/config");
+    // Deep merge with defaults to ensure all keys exist
+    config = deepMerge(getDefaultConfig(), data) as AppConfig;
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+    console.error("[config] fetchConfig failed:", error);
+  } finally {
+    loading = false;
+  }
+}
+
+function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (
+      source[key] &&
+      typeof source[key] === "object" &&
+      !Array.isArray(source[key]) &&
+      target[key] &&
+      typeof target[key] === "object" &&
+      !Array.isArray(target[key])
+    ) {
+      result[key] = deepMerge(
+        target[key] as Record<string, unknown>,
+        source[key] as Record<string, unknown>
+      );
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Send a batch of setting updates to the backend.
+ * PUT /api/config with body `{ settings: { "dot.key": value, ... } }`
+ *
+ * Keys use dot-notation, e.g. `{ "transcription.model": "small.en" }`.
+ *
+ * Returns the response payload on success, or throws on failure.
+ */
+async function updateConfig(
+  settings: Record<string, unknown>,
+): Promise<{ status: string; message: string; engine_reloaded: boolean }> {
+  loading = true;
+  error = "";
+
+  try {
+    const result = await backendStore.apiPut<{
+      status: string;
+      message: string;
+      engine_reloaded: boolean;
+    }>("/api/config", { settings });
+
+    // Refresh the local config tree so the UI stays in sync
+    await fetchConfig();
+
+    return result;
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+    console.error("[config] updateConfig failed:", error);
+    throw err;
+  } finally {
+    loading = false;
+  }
+}
+
+export const configStore = {
+  get config() {
+    return config;
+  },
+  get loading() {
+    return loading;
+  },
+  get error() {
+    return error;
+  },
+  fetchConfig,
+  updateConfig,
+};

src/lib/stores/transcriptions.ts

@@ -0,0 +1,109 @@
+/**
+ * Transcriptions store - manages the list of transcription items
+ * received from the backend via WebSocket.
+ */
+
+export interface TranscriptionItem {
+  id: string;
+  text: string;
+  userName: string;
+  timestamp: string;
+  isPreview: boolean;
+}
+
+let items = $state<TranscriptionItem[]>([]);
+let nextId = 0;
+
+function generateId(): string {
+  return `t-${Date.now()}-${nextId++}`;
+}
+
+function addTranscription(data: {
+  text?: string;
+  user_name?: string;
+  timestamp?: string;
+}) {
+  // When a final transcription arrives, remove any existing preview
+  const previewIndex = items.findIndex((item) => item.isPreview);
+  if (previewIndex !== -1) {
+    items.splice(previewIndex, 1);
+  }
+
+  items.push({
+    id: generateId(),
+    text: data.text ?? "",
+    userName: data.user_name ?? "",
+    timestamp: data.timestamp ?? "",
+    isPreview: false,
+  });
+
+  // Keep a reasonable limit
+  if (items.length > 500) {
+    items.splice(0, items.length - 500);
+  }
+}
+
+function setPreview(data: {
+  text?: string;
+  user_name?: string;
+  timestamp?: string;
+}) {
+  const existingIndex = items.findIndex((item) => item.isPreview);
+  const previewItem: TranscriptionItem = {
+    id: existingIndex !== -1 ? items[existingIndex].id : generateId(),
+    text: data.text ?? "",
+    userName: data.user_name ?? "",
+    timestamp: data.timestamp ?? "",
+    isPreview: true,
+  };
+
+  if (existingIndex !== -1) {
+    items[existingIndex] = previewItem;
+  } else {
+    items.push(previewItem);
+  }
+}
+
+function clearAll() {
+  items.length = 0;
+}
+
+function getPlainText(): string {
+  return items
+    .filter((item) => !item.isPreview)
+    .map((item) => {
+      let line = "";
+      if (item.timestamp) line += `[${item.timestamp}] `;
+      if (item.userName) line += `${item.userName}: `;
+      line += item.text;
+      return line;
+    })
+    .join("\n");
+}
+
+// Listen for backend events
+if (typeof window !== "undefined") {
+  window.addEventListener("backend:transcription", ((e: CustomEvent) => {
+    addTranscription(e.detail);
+  }) as EventListener);
+
+  window.addEventListener("backend:preview", ((e: CustomEvent) => {
+    setPreview(e.detail);
+  }) as EventListener);
+}
+
+export const transcriptionStore = {
+  get items() {
+    return items;
+  },
+  get currentPreview(): TranscriptionItem | null {
+    return items.find((item) => item.isPreview) ?? null;
+  },
+  get transcriptions(): TranscriptionItem[] {
+    return items.filter((item) => !item.isPreview);
+  },
+  addTranscription,
+  setPreview,
+  clearAll,
+  getPlainText,
+};