From 7fe86c4b7390f8237d676dcb5ca89900d058c5f9 Mon Sep 17 00:00:00 2001
From: Sulthan Nauval Abdillah <sulthannauval2@gmail.com>
Date: Mon, 10 Aug 2026 05:36:43 +0000
Subject: [PATCH] fix(providers): clear the base-URL field when the gateway
 stops returning one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two problems in the same form, both of which kept an API key on screen.

The effect that mirrors `GET /secrets` into the base-URL field was guarded
on truthiness:

    if (secrets.data?.api_url) setUrl(secrets.data.api_url);

so it only ever filled the field and never emptied it. A value the
gateway stopped returning stayed rendered until a page reload. That is
exactly what happens the moment the gateway starts withholding an
`api_url` that holds an API key: the server returns null, the effect
re-runs because the dependency changed, the guard skips the write, and
the key remains visible in the console.

Verified against a live gateway, with the panel's own Refresh button and
no page reload. Before: the field still showed the value the server had
already stopped returning. After: it clears. Same sequence, same server,
same browser.

Both inputs were also placeholder-only. They sit next to each other, one
takes a URL and one takes a credential, and a placeholder disappears the
moment either is focused — so the field that has just been cleared is
also the one whose purpose is least visible while typing into it. Pasting
a key into the base-URL field is what put a credential into config.toml
in plaintext in the first place. Give both a real `<label htmlFor>` using
the pattern already used in the channels panel, name the base URL as
"not your API key", and move the "leave blank to keep current" hint into
the key field's placeholder where it is not competing with a label.
---
 src/components/ops/providers-panel.tsx | 44 +++++++++++++++++++-------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/ops/providers-panel.tsx b/src/components/ops/providers-panel.tsx
index 80219e5..0b0e7b1 100644
--- a/src/components/ops/providers-panel.tsx
+++ b/src/components/ops/providers-panel.tsx
@@ -26,7 +26,11 @@ export function ProvidersPanel() {
 
   React.useEffect(() => {
     if (secrets.data?.provider) setProvider(secrets.data.provider);
-    if (secrets.data?.api_url) setUrl(secrets.data.api_url);
+    // Mirror the server's value even when it is absent. A truthy guard here only
+    // ever filled the field and never emptied it, so a base URL that the gateway
+    // stopped returning — including one it now withholds because it held an API
+    // key — stayed on screen until a page reload.
+    setUrl(secrets.data?.api_url ?? "");
   }, [secrets.data?.provider, secrets.data?.api_url]);
   React.useEffect(() => {
     if (info.data?.model) setModel(info.data.model);
@@ -107,17 +111,33 @@ export function ProvidersPanel() {
             defaultModel={info.data?.model}
           />
         </div>
-        <Input
-          value={url}
-          onChange={(e) => setUrl(e.target.value)}
-          placeholder="API base URL (optional)"
-        />
-        <Input
-          value={key}
-          onChange={(e) => setKey(e.target.value)}
-          type="password"
-          placeholder="API key for this provider (leave blank to keep current)"
-        />
+        {/* Labelled, not placeholder-only: these two fields sit next to each
+            other, one takes a URL and one takes a credential, and a placeholder
+            disappears the moment either is focused. Pasting a key into the base
+            URL field put it in config.toml in plaintext. */}
+        <div className="space-y-1">
+          <label htmlFor="provider-api-url" className="text-xs text-muted-foreground">
+            API base URL — optional, not your API key
+          </label>
+          <Input
+            id="provider-api-url"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            placeholder="https://api.example.com/v1"
+          />
+        </div>
+        <div className="space-y-1">
+          <label htmlFor="provider-api-key" className="text-xs text-muted-foreground">
+            API key for this provider
+          </label>
+          <Input
+            id="provider-api-key"
+            value={key}
+            onChange={(e) => setKey(e.target.value)}
+            type="password"
+            placeholder="Leave blank to keep the current key"
+          />
+        </div>
         <div className="flex flex-wrap items-center gap-2">
           <Button size="sm" onClick={save} disabled={busy || !provider}>
             <KeyRound className="size-4" /> Save provider &amp; key