feat(webui): redesign settings and BYOK configuration

Co-authored-by: Cursor <cursoragent@cursor.com>

webui/src/components/thread/AskUserPrompt.tsx

@@ -49,7 +49,7 @@ export function AskUserPrompt({
         <div className="mt-0.5 rounded-full bg-primary/10 p-1.5 text-primary">
           <MessageSquareText className="h-3.5 w-3.5" aria-hidden />
         </div>
-        <p className="min-w-0 flex-1 text-sm font-medium leading-5 text-foreground">
+        <p className="min-w-0 flex-1 text-[13.5px] font-medium leading-5 text-foreground">
           {question}
         </p>
       </div>
@@ -94,7 +94,7 @@ export function AskUserPrompt({
             placeholder="Type your own answer..."
             className={cn(
               "min-h-9 flex-1 resize-none rounded-[10px] border border-border/70 bg-background",
-              "px-3 py-2 text-sm leading-5 outline-none placeholder:text-muted-foreground",
+              "px-3 py-2 text-[13.5px] leading-5 outline-none placeholder:text-muted-foreground",
               "focus-visible:ring-1 focus-visible:ring-primary/40",
             )}
           />

webui/src/components/thread/ThreadComposer.tsx

@@ -473,8 +473,8 @@ export function ThreadComposer({
           className={cn(
             "w-full resize-none bg-transparent",
             isHero
-              ? "min-h-[78px] px-5 pb-2 pt-5 text-[16px] leading-6"
-              : "min-h-[50px] px-4 pb-1.5 pt-3 text-sm",
+              ? "min-h-[78px] px-5 pb-2 pt-5 text-[15px] leading-6"
+              : "min-h-[50px] px-4 pb-1.5 pt-3 text-[13.5px] leading-5",
             "placeholder:text-muted-foreground/70",
             "focus:outline-none focus-visible:outline-none",
             "disabled:cursor-not-allowed",

webui/src/components/thread/ThreadHeader.tsx

@@ -1,4 +1,4 @@
-import { Menu, Moon, Settings, Sun } from "lucide-react";
+import { Menu, Moon, Sun } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
@@ -9,7 +9,6 @@ interface ThreadHeaderProps {
   onToggleSidebar: () => void;
   theme: "light" | "dark";
   onToggleTheme: () => void;
-  onOpenSettings: () => void;
   hideSidebarToggleOnDesktop?: boolean;
   minimal?: boolean;
 }
@@ -19,7 +18,6 @@ export function ThreadHeader({
   onToggleSidebar,
   theme,
   onToggleTheme,
-  onOpenSettings,
   hideSidebarToggleOnDesktop = false,
   minimal = false,
 }: ThreadHeaderProps) {
@@ -39,30 +37,7 @@ export function ThreadHeader({
         >
           <Menu className="h-3.5 w-3.5" />
         </Button>
-        <div className="flex items-center gap-0.5">
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label={t("thread.header.toggleTheme")}
-            onClick={onToggleTheme}
-            className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
-          >
-            {theme === "dark" ? (
-              <Sun className="h-4 w-4" />
-            ) : (
-              <Moon className="h-4 w-4" />
-            )}
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label={t("thread.header.settings")}
-            onClick={onOpenSettings}
-            className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
-          >
-            <Settings className="h-4 w-4" />
-          </Button>
-        </div>
+        <ThemeButton theme={theme} onToggleTheme={onToggleTheme} label={t("thread.header.toggleTheme")} />
       </div>
     );
   }
@@ -87,32 +62,35 @@ export function ThreadHeader({
         </div>
       </div>
 
-      <div className="flex items-center gap-0.5">
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={t("thread.header.toggleTheme")}
-          onClick={onToggleTheme}
-          className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
-        >
-          {theme === "dark" ? (
-            <Sun className="h-4 w-4" />
-          ) : (
-            <Moon className="h-4 w-4" />
-          )}
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          aria-label={t("thread.header.settings")}
-          onClick={onOpenSettings}
-          className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
-        >
-          <Settings className="h-4 w-4" />
-        </Button>
-      </div>
+      <ThemeButton theme={theme} onToggleTheme={onToggleTheme} label={t("thread.header.toggleTheme")} />
 
       <div aria-hidden className="pointer-events-none absolute inset-x-0 top-full h-4" />
     </div>
   );
 }
+
+function ThemeButton({
+  theme,
+  onToggleTheme,
+  label,
+}: {
+  theme: "light" | "dark";
+  onToggleTheme: () => void;
+  label: string;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={label}
+      onClick={onToggleTheme}
+      className="h-8 w-8 rounded-full text-muted-foreground/85 hover:bg-accent/40 hover:text-foreground"
+    >
+      {theme === "dark" ? (
+        <Sun className="h-4 w-4" />
+      ) : (
+        <Moon className="h-4 w-4" />
+      )}
+    </Button>
+  );
+}

webui/src/components/thread/ThreadShell.tsx

@@ -34,7 +34,6 @@ interface ThreadShellProps {
   onTurnEnd?: () => void;
   theme?: "light" | "dark";
   onToggleTheme?: () => void;
-  onOpenSettings?: () => void;
   hideSidebarToggleOnDesktop?: boolean;
 }
 
@@ -78,7 +77,6 @@ export function ThreadShell({
   onTurnEnd,
   theme = "light",
   onToggleTheme = () => {},
-  onOpenSettings = () => {},
   hideSidebarToggleOnDesktop = false,
 }: ThreadShellProps) {
   const { t } = useTranslation();
@@ -312,7 +310,6 @@ export function ThreadShell({
         onToggleSidebar={onToggleSidebar}
         theme={theme}
         onToggleTheme={onToggleTheme}
-        onOpenSettings={onOpenSettings}
         hideSidebarToggleOnDesktop={hideSidebarToggleOnDesktop}
         minimal={!session && !loading}
       />