From 288c6ad6a357fd5a4a50d49a8a4eb700a90f940c Mon Sep 17 00:00:00 2001
From: Developer <dev@local-transcription.local>
Date: Tue, 7 Apr 2026 06:39:24 -0700
Subject: [PATCH] Fix BYOK settings: show Deepgram API key instead of server
 URL

BYOK mode connects directly to Deepgram (wss://api.deepgram.com),
so the server URL field was incorrect. Now:
- BYOK shows a Deepgram API Key field with link to console.deepgram.com
- Managed shows the Server URL field (for the transcription proxy)
- Local shows neither
- API key is saved as remote.byok_api_key in config

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Settings.svelte | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 7cb7162..b06ad37 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -37,6 +37,7 @@
   let syncPassphrase = $state("");
   let remoteMode = $state("local");
   let remoteServerUrl = $state("");
+  let byokApiKey = $state("");
   let managedEmail = $state("");
   let managedPassword = $state("");
   let autoCheckUpdates = $state(true);
@@ -107,6 +108,7 @@
     syncPassphrase = cfg.server_sync.passphrase;
     remoteMode = cfg.remote.mode;
     remoteServerUrl = cfg.remote.server_url;
+    byokApiKey = cfg.remote.byok_api_key ?? "";
     autoCheckUpdates = cfg.updates.auto_check;
   });
 
@@ -183,6 +185,7 @@
       remote: {
         mode: remoteMode,
         server_url: remoteServerUrl,
+        byok_api_key: byokApiKey,
       },
       updates: {
         auto_check: autoCheckUpdates,
@@ -572,7 +575,7 @@
             BYOK (Bring Your Own Key)
           </label>
         </div>
-        {#if remoteMode !== "local"}
+        {#if remoteMode === "managed"}
           <div class="field">
             <label for="remote-url">Server URL</label>
             <input
@@ -583,6 +586,20 @@
             />
           </div>
         {/if}
+        {#if remoteMode === "byok"}
+          <div class="field">
+            <label for="byok-key">Deepgram API Key</label>
+            <input
+              id="byok-key"
+              type="password"
+              bind:value={byokApiKey}
+              placeholder="Enter your Deepgram API key"
+            />
+            <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">
+              Get a key at <a href="https://console.deepgram.com" target="_blank" rel="noopener" style="color: var(--accent-blue);">console.deepgram.com</a>
+            </p>
+          </div>
+        {/if}
         {#if remoteMode === "managed"}
           <div class="managed-auth">
             <div class="field">