From 3778e7e628d2d67b09ae91d037ec8f325ba94974 Mon Sep 17 00:00:00 2001
From: chengyongru <2755839590@qq.com>
Date: Tue, 11 Aug 2026 00:00:22 +0800
Subject: [PATCH] fix(webui): soften form control focus rings

---
 webui/src/App.tsx                             |  2 +-
 .../settings/shared/SettingsControls.tsx      |  1 -
 .../settings/system/AutomationsSettings.tsx   |  6 ++++-
 .../src/components/thread/PromptNavigator.tsx |  4 ++-
 .../components/thread/WorkspaceControls.tsx   |  5 +---
 webui/src/components/ui/form-control.ts       |  2 ++
 webui/src/components/ui/input.tsx             |  4 ++-
 webui/src/components/ui/textarea.tsx          |  4 ++-
 webui/src/tests/form-controls.test.tsx        | 26 +++++++++++++++++++
 webui/src/tests/settings-channels.test.tsx    |  5 ++--
 10 files changed, 47 insertions(+), 12 deletions(-)
 create mode 100644 webui/src/components/ui/form-control.ts
 create mode 100644 webui/src/tests/form-controls.test.tsx

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index d655d4f05..316d373e6 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -362,7 +362,7 @@ function AuthForm({
               disabled={submitting}
               aria-invalid={validationError ? true : undefined}
               aria-describedby={validationError ? "webui-auth-error" : undefined}
-              className="pr-10 focus-visible:ring-1 focus-visible:ring-ring/30 focus-visible:ring-offset-0"
+              className="pr-10"
               autoFocus
             />
             <Button
diff --git a/webui/src/components/settings/shared/SettingsControls.tsx b/webui/src/components/settings/shared/SettingsControls.tsx
index 383c31442..d7d7e4c3d 100644
--- a/webui/src/components/settings/shared/SettingsControls.tsx
+++ b/webui/src/components/settings/shared/SettingsControls.tsx
@@ -19,7 +19,6 @@ import { cn } from "@/lib/utils";
 export const SETTINGS_SEARCH_INPUT_CLASS = cn(
   "border-border/45 bg-settings-surface transition-colors hover:border-border/70",
   "focus-visible:border-border/70 focus-visible:bg-background",
-  "focus-visible:ring-0 focus-visible:ring-offset-0",
 );
 
 export function CapabilityInstallNotice({
diff --git a/webui/src/components/settings/system/AutomationsSettings.tsx b/webui/src/components/settings/system/AutomationsSettings.tsx
index af54c505e..9d00b0d8c 100644
--- a/webui/src/components/settings/system/AutomationsSettings.tsx
+++ b/webui/src/components/settings/system/AutomationsSettings.tsx
@@ -35,6 +35,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { formControlFocusClassName } from "@/components/ui/form-control";
 import { Input } from "@/components/ui/input";
 import { SegmentedControl } from "@/components/ui/segmented-control";
 import { Textarea } from "@/components/ui/textarea";
@@ -835,7 +836,10 @@ export function AutomationEditDialog({
                           everyUnit: event.target.value as AutomationEveryUnit,
                         }))
                       }
-                      className="h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                      className={cn(
+                        "h-10 w-full rounded-[12px] border border-input bg-background px-3 text-[13px] text-foreground transition-colors",
+                        formControlFocusClassName,
+                      )}
                     >
                       {AUTOMATION_EVERY_UNITS.map((unit) => (
                         <option key={unit.value} value={unit.value}>
diff --git a/webui/src/components/thread/PromptNavigator.tsx b/webui/src/components/thread/PromptNavigator.tsx
index fb2c312e7..d0a02cfff 100644
--- a/webui/src/components/thread/PromptNavigator.tsx
+++ b/webui/src/components/thread/PromptNavigator.tsx
@@ -3,6 +3,7 @@ import { ListTree, Search } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
+import { formControlFocusClassName } from "@/components/ui/form-control";
 import {
   Sheet,
   SheetContent,
@@ -83,7 +84,8 @@ export function PromptNavigator({
                 placeholder={t("thread.promptNavigator.search")}
                 className={cn(
                   "h-10 w-full rounded-full border border-border bg-background pl-9 pr-3 text-sm",
-                  "outline-none transition focus:border-ring focus:ring-2 focus:ring-ring/20",
+                  "transition-colors",
+                  formControlFocusClassName,
                 )}
               />
             </div>
diff --git a/webui/src/components/thread/WorkspaceControls.tsx b/webui/src/components/thread/WorkspaceControls.tsx
index bd102c0b8..60f587f5d 100644
--- a/webui/src/components/thread/WorkspaceControls.tsx
+++ b/webui/src/components/thread/WorkspaceControls.tsx
@@ -256,10 +256,7 @@ export function WorkspaceProjectPicker({
                 aria-label={t("workspace.dialog.manual")}
                 aria-invalid={pathError || error ? true : undefined}
                 aria-describedby={pathError || error ? pathErrorId : undefined}
-                className={cn(
-                  "h-9 rounded-full border-border/55 bg-background/80 px-3 text-[12.5px]",
-                  "focus-visible:ring-1 focus-visible:ring-foreground/10 focus-visible:ring-offset-0",
-                )}
+                className="h-9 rounded-full border-border/55 bg-background/80 px-3 text-[12.5px]"
               />
               <Button
                 type="submit"
diff --git a/webui/src/components/ui/form-control.ts b/webui/src/components/ui/form-control.ts
new file mode 100644
index 000000000..72144a4c1
--- /dev/null
+++ b/webui/src/components/ui/form-control.ts
@@ -0,0 +1,2 @@
+export const formControlFocusClassName =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50";
diff --git a/webui/src/components/ui/input.tsx b/webui/src/components/ui/input.tsx
index 7de2a032f..7ddded8fd 100644
--- a/webui/src/components/ui/input.tsx
+++ b/webui/src/components/ui/input.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { formControlFocusClassName } from "@/components/ui/form-control";
 import { cn } from "@/lib/utils";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
@@ -10,7 +11,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          formControlFocusClassName,
           className,
         )}
         ref={ref}
diff --git a/webui/src/components/ui/textarea.tsx b/webui/src/components/ui/textarea.tsx
index fd57c06b1..218c0ff4e 100644
--- a/webui/src/components/ui/textarea.tsx
+++ b/webui/src/components/ui/textarea.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { formControlFocusClassName } from "@/components/ui/form-control";
 import { cn } from "@/lib/utils";
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
@@ -9,7 +10,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          formControlFocusClassName,
           className,
         )}
         ref={ref}
diff --git a/webui/src/tests/form-controls.test.tsx b/webui/src/tests/form-controls.test.tsx
new file mode 100644
index 000000000..4d482d116
--- /dev/null
+++ b/webui/src/tests/form-controls.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+describe("form control focus styles", () => {
+  it.each([
+    ["input", <Input aria-label="input" />],
+    ["textarea", <Textarea aria-label="textarea" />],
+  ])("uses a subdued inset focus ring for the %s", (label, control) => {
+    render(control);
+
+    const element = screen.getByLabelText(label);
+    expect(element).toHaveClass(
+      "focus-visible:ring-2",
+      "focus-visible:ring-inset",
+      "focus-visible:ring-ring/50",
+    );
+    expect(element).not.toHaveClass(
+      "ring-offset-background",
+      "focus-visible:ring-ring",
+      "focus-visible:ring-offset-2",
+    );
+  });
+});
diff --git a/webui/src/tests/settings-channels.test.tsx b/webui/src/tests/settings-channels.test.tsx
index 3f2dbdb2a..b34a60256 100644
--- a/webui/src/tests/settings-channels.test.tsx
+++ b/webui/src/tests/settings-channels.test.tsx
@@ -834,8 +834,9 @@ describe("Settings channels", () => {
 
     const emailRow = await screen.findByRole("button", { name: "View Email settings" });
     expect(screen.getByPlaceholderText("Search channels")).toHaveClass(
-      "focus-visible:ring-0",
-      "focus-visible:ring-offset-0",
+      "focus-visible:ring-2",
+      "focus-visible:ring-inset",
+      "focus-visible:ring-ring/50",
     );
     expect(screen.queryByRole("switch", { name: "Email channel" })).not.toBeInTheDocument();