From 31935fe317dab57d182b259e34b102b7f7dba891 Mon Sep 17 00:00:00 2001
From: d-oit <do-it@ik.me>
Date: Mon, 10 Aug 2026 11:34:49 +0200
Subject: [PATCH 1/3] feat(ux): implement consistent visual focus indicators
 across all web UI components

Replace focus:outline-none focus:ring-2 with the focus-visible outline pattern
across History, KeyboardShortcutsModal, MainHeader, MetadataBar,
ProfileCombobox, ResultCard, SearchSection and Sidebar so keyboard users
get a consistent visible focus ring while mouse users keep a clean UI.
---
 web/app/components/History.tsx                | 10 +++++-----
 web/app/components/KeyboardShortcutsModal.tsx |  2 +-
 web/app/components/MainHeader.tsx             |  6 +++---
 web/app/components/MetadataBar.tsx            |  6 +++---
 web/app/components/ProfileCombobox.tsx        |  4 ++--
 web/app/components/ResultCard.tsx             |  8 ++++----
 web/app/components/SearchSection.tsx          |  8 ++++----
 web/app/components/Sidebar.tsx                | 20 +++++++++----------
 8 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/web/app/components/History.tsx b/web/app/components/History.tsx
index 265d283c..b30cf522 100644
--- a/web/app/components/History.tsx
+++ b/web/app/components/History.tsx
@@ -106,7 +106,7 @@ export default function History({ onLoad }: HistoryProps) {
     <div className="border-t-2 border-border-muted">
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="w-full p-4 flex items-center justify-between hover:bg-[#141414] transition-colors text-[11px] text-text-muted min-h-[44px]"
+        className="w-full p-4 flex items-center justify-between hover:bg-[#141414] transition-colors text-[11px] text-text-muted min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-expanded={isOpen}
         aria-controls="history-panel"
       >
@@ -124,7 +124,7 @@ export default function History({ onLoad }: HistoryProps) {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="Search history..."
-              className="w-full bg-[#141414] border-2 border-border-muted px-2 py-2 text-[11px] text-foreground placeholder:text-text-dim focus:border-accent focus:outline-none min-h-[44px] pr-10"
+              className="w-full bg-[#141414] border-2 border-border-muted px-2 py-2 text-[11px] text-foreground placeholder:text-text-dim focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 min-h-[44px] pr-10"
             />
             {search && (
               <button
@@ -132,7 +132,7 @@ export default function History({ onLoad }: HistoryProps) {
                   setSearch("");
                   searchInputRef.current?.focus();
                 }}
-                className="absolute right-0 top-0 h-full px-3 text-text-dim hover:text-foreground transition-colors"
+                className="absolute right-0 top-0 h-full px-3 text-text-dim hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                 aria-label="Clear search"
               >
                 ×
@@ -152,13 +152,13 @@ export default function History({ onLoad }: HistoryProps) {
                   <div className="flex items-start justify-between gap-2">
                     <button
                       onClick={() => handleLoad(entry)}
-                      className="text-left text-[11px] text-foreground hover:text-accent flex-1"
+                      className="text-left text-[11px] text-foreground hover:text-accent flex-1 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                     >
                       {entry.query}
                     </button>
                     <button
                       onClick={() => handleDelete(entry.id)}
-                      className={`text-[10px] min-h-[32px] min-w-[32px] flex items-center justify-center transition-all ${
+                      className={`text-[10px] min-h-[32px] min-w-[32px] flex items-center justify-center transition-all focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${
                         confirmDeleteId === entry.id
                           ? "text-[#ff4444] font-bold"
                           : "text-text-muted hover:text-[#ff4444] opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
diff --git a/web/app/components/KeyboardShortcutsModal.tsx b/web/app/components/KeyboardShortcutsModal.tsx
index 9fdeb5fc..5e9e9506 100644
--- a/web/app/components/KeyboardShortcutsModal.tsx
+++ b/web/app/components/KeyboardShortcutsModal.tsx
@@ -106,7 +106,7 @@ export function KeyboardShortcutsModal({ onClose }: KeyboardShortcutsModalProps)
             ref={closeButtonRef}
             type="button"
             onClick={onClose}
-            className="text-text-muted hover:text-foreground text-[18px] leading-none focus:outline-none focus:text-accent focus:ring-2 focus:ring-accent"
+            className="text-text-muted hover:text-foreground text-[18px] leading-none focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
             aria-label="Close shortcuts"
           >
             ×
diff --git a/web/app/components/MainHeader.tsx b/web/app/components/MainHeader.tsx
index e2b8cb18..4899d77a 100644
--- a/web/app/components/MainHeader.tsx
+++ b/web/app/components/MainHeader.tsx
@@ -19,7 +19,7 @@ export function MainHeader(props: MainHeaderProps) {
         {/* Hamburger menu - mobile only */}
         <button
           onClick={handleMenuOpen}
-          className="lg:hidden p-2 text-text-muted hover:text-foreground min-h-[44px] min-w-[44px] flex items-center justify-center"
+          className="lg:hidden p-2 text-text-muted hover:text-foreground min-h-[44px] min-w-[44px] flex items-center justify-center focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-label="Open menu"
           aria-expanded={props.mobileMenuOpen}
           aria-controls="sidebar-navigation"
@@ -33,12 +33,12 @@ export function MainHeader(props: MainHeaderProps) {
       <div className="flex items-center gap-2">
         <button
           onClick={props.onShowShortcuts}
-          className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent"
+          className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-label="Show keyboard shortcuts"
         >
           Shortcuts
         </button>
-        <Link href="/help" className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus:outline-none focus:text-accent">
+        <Link href="/help" className="text-[11px] text-text-muted hover:text-accent min-h-[44px] flex items-center px-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
           Help
         </Link>
       </div>
diff --git a/web/app/components/MetadataBar.tsx b/web/app/components/MetadataBar.tsx
index c218f90b..cfa493b3 100644
--- a/web/app/components/MetadataBar.tsx
+++ b/web/app/components/MetadataBar.tsx
@@ -53,7 +53,7 @@ export function MetadataBar({
       <div className="flex items-center gap-2">
         <button
           onClick={handleCardsClick}
-          className={`px-3 py-1 border border-border-muted ${!viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
+          className={`px-3 py-1 border border-border-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${!viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
           aria-pressed={!viewRaw}
           title="View results as individual structured cards"
         >
@@ -61,7 +61,7 @@ export function MetadataBar({
         </button>
         <button
           onClick={handleRawClick}
-          className={`px-3 py-1 border border-border-muted ${viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
+          className={`px-3 py-1 border border-border-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${viewRaw ? "text-accent border-accent" : "text-text-muted"}`}
           aria-pressed={viewRaw}
           title="View results as raw markdown text"
         >
@@ -71,7 +71,7 @@ export function MetadataBar({
           onClick={handleCopyResult}
           aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
           aria-live="polite"
-          className="hover:text-foreground transition-colors min-h-[36px] px-2"
+          className="hover:text-foreground transition-colors min-h-[36px] px-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         >
           {copied ? "Copied" : "Copy"}
         </button>
diff --git a/web/app/components/ProfileCombobox.tsx b/web/app/components/ProfileCombobox.tsx
index fa0e4ee9..cedc6e30 100644
--- a/web/app/components/ProfileCombobox.tsx
+++ b/web/app/components/ProfileCombobox.tsx
@@ -118,7 +118,7 @@ export default function ProfileCombobox({ id: providedId, value, onChange, optio
         ref={triggerRef}
         onClick={() => (open ? handleClose() : handleOpen())}
         onKeyDown={handleKeyDown}
-        className="w-full bg-[#141414] border-2 border-border-muted px-3 py-2 text-left flex items-center justify-between text-[12px] min-h-[44px] hover:border-border-strong focus:border-accent"
+        className="w-full bg-[#141414] border-2 border-border-muted px-3 py-2 text-left flex items-center justify-between text-[12px] min-h-[44px] hover:border-border-strong focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-haspopup="listbox"
         aria-expanded={open}
         aria-controls={open ? listboxId : undefined}
@@ -143,7 +143,7 @@ export default function ProfileCombobox({ id: providedId, value, onChange, optio
               id={`${listboxId}-option-${option.id}`}
               onClick={() => handleSelect(option.id)}
               onKeyDown={handleKeyDown}
-              className={`w-full px-3 py-2 text-left hover:bg-accent hover:text-background transition-colors flex flex-col focus:outline-none focus:bg-accent focus:text-background ${
+              className={`w-full px-3 py-2 text-left hover:bg-accent hover:text-background transition-colors flex flex-col focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 focus:bg-accent focus:text-background ${
                 option.id === value ? "bg-[#222] text-accent" : "text-foreground"
               } ${index === activeIndex ? "ring-inset ring-2 ring-accent" : ""}`}
               role="option"
diff --git a/web/app/components/ResultCard.tsx b/web/app/components/ResultCard.tsx
index a32403f3..8820cceb 100644
--- a/web/app/components/ResultCard.tsx
+++ b/web/app/components/ResultCard.tsx
@@ -20,7 +20,7 @@ const ResultHeader = ({ id, title, url, normalizedUrl }: { id: string; title: st
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="text-accent text-[15px] hover:underline"
+        className="text-accent text-[15px] hover:underline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
       >
         {title}
       </a>
@@ -76,7 +76,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
       <footer className="flex flex-wrap gap-2 text-[11px]">
         <button
           onClick={handleCopy}
-          className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted"
+          className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           aria-live="polite"
         >
           {copying ? "Copied" : "Copy markdown"}
@@ -86,7 +86,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
             href={result.url}
             target="_blank"
             rel="noreferrer"
-            className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted"
+            className="px-3 py-2 border-2 border-border-muted hover:border-accent text-text-muted focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           >
             Open
           </a>
@@ -94,7 +94,7 @@ export default function ResultCard({ result, onCopy, onHelpfulToggle, helpful }:
         {onHelpfulToggle && (
           <button
             onClick={() => onHelpfulToggle(result.id)}
-            className={`px-3 py-2 border-2 ${
+            className={`px-3 py-2 border-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ${
               helpful ? "border-accent text-accent" : "border-border-muted text-text-dim"
             }`}
             aria-pressed={helpful}
diff --git a/web/app/components/SearchSection.tsx b/web/app/components/SearchSection.tsx
index c5553cf4..52e3bacd 100644
--- a/web/app/components/SearchSection.tsx
+++ b/web/app/components/SearchSection.tsx
@@ -38,7 +38,7 @@ const SearchActions = ({
           disabled={loading}
           aria-label={loading ? "Fetching results..." : "Fetch results"}
           title="Fetch results"
-          className="bg-accent text-background px-4 py-2 text-[13px] font-bold hover:bg-[#00cc33] disabled:opacity-50 min-w-[60px] min-h-[44px]"
+          className="bg-accent text-background px-4 py-2 text-[13px] font-bold hover:bg-[#00cc33] disabled:opacity-50 min-w-[60px] min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         >
           {loading ? "..." : "Fetch"}
         </button>
@@ -46,7 +46,7 @@ const SearchActions = ({
       <button
         onClick={onClear}
         aria-label="Clear input and results"
-        className="bg-transparent text-text-dim px-4 py-2 text-[13px] border-2 border-border-muted hover:border-accent hover:text-accent min-h-[44px]"
+        className="bg-transparent text-text-dim px-4 py-2 text-[13px] border-2 border-border-muted hover:border-accent hover:text-accent min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
       >
         Clear
       </button>
@@ -122,13 +122,13 @@ export function SearchSection({
             aria-invalid={Boolean(error)}
             aria-errormessage={error ? "search-error" : undefined}
             enterKeyHint="search"
-            className="w-full bg-transparent text-[20px] sm:text-[24px] text-foreground placeholder:text-text-dim tracking-tight pr-10"
+            className="w-full bg-transparent text-[20px] sm:text-[24px] text-foreground placeholder:text-text-dim tracking-tight pr-10 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
           />
           {query && (
             <button
               type="button"
               onClick={handleClearQuery}
-              className="absolute right-0 top-1/2 -translate-y-1/2 p-2 text-text-dim hover:text-accent transition-colors"
+              className="absolute right-0 top-1/2 -translate-y-1/2 p-2 text-text-dim hover:text-accent transition-colors focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
               aria-label="Clear query"
             >
               ×
diff --git a/web/app/components/Sidebar.tsx b/web/app/components/Sidebar.tsx
index 47731989..59313bbb 100644
--- a/web/app/components/Sidebar.tsx
+++ b/web/app/components/Sidebar.tsx
@@ -74,7 +74,7 @@ export default function Sidebar({
       <button
         data-testid="sidebar-toggle"
         onClick={() => setSidebarOpen(!sidebarOpen)}
-        className="hidden lg:flex w-full p-4 items-center justify-between hover:bg-[#141414] transition-colors min-h-[44px]"
+        className="hidden lg:flex w-full p-4 items-center justify-between hover:bg-[#141414] transition-colors min-h-[44px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
         aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
         aria-expanded={sidebarOpen}
         aria-controls="sidebar-navigation"
@@ -85,7 +85,7 @@ export default function Sidebar({
               Configuration
             </span>
             <div className="flex items-center gap-2">
-              <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent">
+              <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
                 Keys
               </Link>
               <span className="text-[10px] text-text-dim">Hide</span>
@@ -102,12 +102,12 @@ export default function Sidebar({
           Configuration
         </span>
         <div className="flex items-center gap-3">
-          <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent">
+          <Link href="/settings" className="text-[11px] text-text-muted hover:text-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2">
             Keys
           </Link>
           <button
             onClick={() => { setMobileMenuOpen(false); }}
-            className="text-[11.5px] text-text-muted hover:text-[#ff4444] focus:text-[#ff4444] font-bold min-h-[30px] px-2 flex items-center focus:outline-none"
+            className="text-[11.5px] text-text-muted hover:text-[#ff4444] focus:text-[#ff4444] font-bold min-h-[30px] px-2 flex items-center focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
             aria-label="Close configuration"
           >
             Close
@@ -149,7 +149,7 @@ export default function Sidebar({
                 step="1000"
                 value={maxChars}
                 onChange={(e) => setMaxChars(parseInt(e.target.value))}
-                className="w-full h-1 bg-border-muted accent-accent appearance-none cursor-pointer"
+                className="w-full h-1 bg-border-muted accent-accent appearance-none cursor-pointer focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
               />
             </div>
           </div>
@@ -167,7 +167,7 @@ export default function Sidebar({
                 const tooltipId = `provider-hint-${provider.id}`;
                 const showHint = needsKey || (provider.id === "duckduckgo" && mistralActive);
 
-                let buttonClasses = "px-2 py-1 text-[10px] border-2 transition-colors min-h-[36px] ";
+                let buttonClasses = "px-2 py-1 text-[10px] border-2 transition-colors min-h-[36px] focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 ";
                 if (isActive) {
                   if (isManual) {
                     buttonClasses += "bg-accent text-background border-accent font-bold";
@@ -227,7 +227,7 @@ export default function Sidebar({
               onClick={() => setApiKeysOpen(!apiKeysOpen)}
               aria-expanded={apiKeysOpen}
               aria-controls="api-keys-panel"
-              className="text-[11px] text-text-muted hover:text-foreground text-left min-h-[44px] py-2"
+              className="text-[11px] text-text-muted hover:text-foreground text-left min-h-[44px] py-2 focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
             >
               <span aria-hidden="true">{apiKeysOpen ? "▼" : "▶"}</span> API Keys
             </button>
@@ -239,7 +239,7 @@ export default function Sidebar({
                     type="checkbox"
                     checked={skipCache}
                     onChange={(e) => setSkipCache(e.target.checked)}
-                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent"
+                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                   />
                   Skip cache
                 </label>
@@ -249,7 +249,7 @@ export default function Sidebar({
                     type="checkbox"
                     checked={deepResearch}
                     onChange={(e) => setDeepResearch(e.target.checked)}
-                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent"
+                    className="w-5 h-5 bg-[#141414] border-2 border-border-muted accent-accent focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2"
                   />
                   Deep research
                 </label>
@@ -267,7 +267,7 @@ export default function Sidebar({
                         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 min-h-[44px]"
+                        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]"
                       />
                     </div>
                   );

From 4570bcc0308644622ad3b64038d30bf24b13b006 Mon Sep 17 00:00:00 2001
From: d-oit <do-it@ik.me>
Date: Mon, 10 Aug 2026 12:11:57 +0200
Subject: [PATCH 2/3] chore(ux): no-op to refresh DeepSource analysis with
 config ignore


From bda98311b00eb043ba1eef1535e08da87c39f07a Mon Sep 17 00:00:00 2001
From: d-oit <do-it@ik.me>
Date: Mon, 10 Aug 2026 12:17:51 +0200
Subject: [PATCH 3/3] chore(ux): refresh DeepSource after baseline config merge