From bd6fa898190aa8513c6754b380d976886e4cf85e Mon Sep 17 00:00:00 2001
From: Dominik Oswald <6849456+d-oit@users.noreply.github.com>
Date: Fri, 21 Aug 2026 14:54:37 +0000
Subject: [PATCH] feat(ux): add api key visibility toggles and fix label
 bindings

---
 web/app/components/Sidebar.tsx | 39 +++++++++++++++++++++++++++-------
 web/app/settings/page.tsx      | 39 +++++++++++++++++++++++++---------
 2 files changed, 60 insertions(+), 18 deletions(-)

diff --git a/web/app/components/Sidebar.tsx b/web/app/components/Sidebar.tsx
index 59313bbb..ee8d144e 100644
--- a/web/app/components/Sidebar.tsx
+++ b/web/app/components/Sidebar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import ProfileCombobox from "@/app/components/ProfileCombobox";
 import History, { HistoryEntry } from "@/app/components/History";
@@ -61,6 +62,12 @@ export default function Sidebar({
   handleHistoryLoad,
   isCustomSelection,
 }: SidebarProps) {
+  const [visibleKeys, setVisibleKeys] = useState<Record<string, boolean>>({});
+
+  const toggleKeyVisibility = (key: string) => {
+    setVisibleKeys((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
   return (
     <aside
       id="sidebar-navigation"
@@ -259,16 +266,32 @@ export default function Sidebar({
                   const value = apiKeys[key] || "";
                   const source = keySource[provider.sourceKey || provider.id];
                   const hasServer = source === "server";
+                  const isVisible = !!visibleKeys[key];
+                  const hasValue = !!value;
+
                   return (
                     <div key={provider.id} className="flex flex-col gap-1">
-                      <label className="text-[10px] text-text-muted">{provider.label} {hasServer && !value && "(server)"}</label>
-                      <input
-                        type="password"
-                        value={value}
-                        onChange={(e) => handleKeyChange(key, e.target.value)}
-                        placeholder={hasServer && !value ? "Using server key" : "sk-..."}
-                        className="bg-[#141414] border-2 border-border-muted px-2 py-2 text-[12px] text-foreground placeholder:text-text-dim focus:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 min-h-[44px]"
-                      />
+                      <label htmlFor={`input-${provider.id}`} className="text-[10px] text-text-muted">{provider.label} {hasServer && !value && "(server)"}</label>
+                      <div className="relative flex items-center">
+                        <input
+                          id={`input-${provider.id}`}
+                          type={isVisible ? "text" : "password"}
+                          value={value}
+                          onChange={(e) => handleKeyChange(key, e.target.value)}
+                          placeholder={hasServer && !value ? "Using server key" : "sk-..."}
+                          className="w-full bg-[#141414] border-2 border-border-muted pl-2 pr-12 py-2 text-[12px] text-foreground placeholder:text-text-dim focus:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 min-h-[44px]"
+                        />
+                        {hasValue && (
+                          <button
+                            type="button"
+                            onClick={() => toggleKeyVisibility(key)}
+                            className="absolute right-2 px-2 py-1 text-[10px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+                            aria-label={isVisible ? "Hide key" : "Show key"}
+                          >
+                            {isVisible ? "Hide" : "Show"}
+                          </button>
+                        )}
+                      </div>
                     </div>
                   );
                 })}
diff --git a/web/app/settings/page.tsx b/web/app/settings/page.tsx
index f714ee46..be785be9 100644
--- a/web/app/settings/page.tsx
+++ b/web/app/settings/page.tsx
@@ -42,6 +42,7 @@ export default function SettingsPage() {
   });
   const [keyStatus, setKeyStatus] = useState<KeyStatus>({});
   const [saved, setSaved] = useState(false);
+  const [visibleKeys, setVisibleKeys] = useState<Record<string, boolean>>({});
 
   useEffect(() => {
     fetch("/api/key-status")
@@ -79,11 +80,15 @@ export default function SettingsPage() {
     persistKeys(newKeys);
   };
 
+  const toggleKeyVisibility = (key: string) => {
+    setVisibleKeys((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
   return (
     <main className="min-h-screen bg-background text-foreground font-mono p-8">
       <div className="max-w-xl">
         <div className="mb-8">
-          <Link href="/" className="text-[11px] uppercase tracking-[0.1em] text-text-muted hover:text-accent">
+          <Link href="/" className="text-[11px] uppercase tracking-[0.1em] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
             ← Back
           </Link>
         </div>
@@ -98,11 +103,12 @@ export default function SettingsPage() {
             const value = apiKeys[field.key] || "";
             const localHasKey = !!value;
             const serverHasKey = !!keyStatus[field.provider];
+            const isVisible = !!visibleKeys[field.key];
 
             return (
               <div key={field.key} className="flex flex-col gap-2">
                 <div className="flex items-center justify-between">
-                  <label className="text-[13px]">{field.label}</label>
+                  <label htmlFor={`input-${field.key}`} className="text-[13px]">{field.label}</label>
                   <div className="flex items-center gap-2">
                     {localHasKey ? (
                       <span className="text-[11px] text-accent">Local key</span>
@@ -114,20 +120,33 @@ export default function SettingsPage() {
                     {localHasKey && (
                       <button
                         onClick={() => clearKey(field.key)}
-                        className="text-[11px] text-[#ff4444] hover:text-[#ff6666]"
+                        className="text-[11px] text-[#ff4444] hover:text-[#ff6666] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                       >
                         Remove
                       </button>
                     )}
                   </div>
                 </div>
-                <input
-                  type="password"
-                  value={value}
-                  onChange={(e) => handleKeyChange(field.key, e.target.value)}
-                  placeholder="sk-..."
-                  className="bg-[#141414] border-2 border-border-muted px-3 py-2 text-[13px] text-foreground placeholder:text-text-dim focus:border-accent focus:outline-none"
-                />
+                <div className="relative flex items-center">
+                  <input
+                    id={`input-${field.key}`}
+                    type={isVisible ? "text" : "password"}
+                    value={value}
+                    onChange={(e) => handleKeyChange(field.key, e.target.value)}
+                    placeholder="sk-..."
+                    className="w-full bg-[#141414] border-2 border-border-muted pl-3 pr-12 py-2 text-[13px] text-foreground placeholder:text-text-dim focus:border-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+                  />
+                  {localHasKey && (
+                    <button
+                      type="button"
+                      onClick={() => toggleKeyVisibility(field.key)}
+                      className="absolute right-2 px-2 py-1 text-[11px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
+                      aria-label={isVisible ? "Hide key" : "Show key"}
+                    >
+                      {isVisible ? "Hide" : "Show"}
+                    </button>
+                  )}
+                </div>
                 {serverHasKey && !localHasKey && (
                   <p className="text-[11px] text-text-muted">
                     Server key available. Enter your own to override.