From af5b8530169823331f592ee50b0424c5780d00ec Mon Sep 17 00:00:00 2001
From: zhixian <zhixian@bunker.local>
Date: Tue, 17 Feb 2026 02:22:28 +0900
Subject: [PATCH] feat: switch to shadcn light theme, improve Settings UX

- Replace custom dark navy color palette with shadcn default light theme
- Remove all custom --color-* CSS variables and use semantic classes
- Remove Chat Model section from Settings (no longer needed)
- Replace native <datalist> with Combobox (Popover + Command) for
  provider/model selection in Settings
- Add shadcn command, popover, and dialog components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package-lock.json             |  17 +++
 package.json                  |   1 +
 src/App.tsx                   |  28 ++--
 src/components/Chat.tsx       |  21 ++-
 src/components/DiffViewer.tsx |   4 +-
 src/components/ParamForm.tsx  |   5 +-
 src/components/RecipeCard.tsx |  10 +-
 src/components/ui/command.tsx | 182 +++++++++++++++++++++++++
 src/components/ui/dialog.tsx  | 158 ++++++++++++++++++++++
 src/components/ui/popover.tsx |  87 ++++++++++++
 src/pages/Doctor.tsx          |  14 +-
 src/pages/History.tsx         |   8 +-
 src/pages/Home.tsx            |  58 ++++----
 src/pages/Install.tsx         |  14 +-
 src/pages/Recipes.tsx         |   6 +-
 src/pages/Settings.tsx        | 244 ++++++++++++++++++++--------------
 src/styles.css                |  75 +++++------
 17 files changed, 702 insertions(+), 230 deletions(-)
 create mode 100644 src/components/ui/command.tsx
 create mode 100644 src/components/ui/dialog.tsx
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package-lock.json b/package-lock.json
index ab1c6ed..ffd9b06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@tauri-apps/api": "^2.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "json5": "^2.2.3",
         "lucide-react": "^0.564.0",
         "radix-ui": "^1.4.3",
@@ -3141,6 +3142,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
diff --git a/package.json b/package.json
index f40d66a..7d5026e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@tauri-apps/api": "^2.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "json5": "^2.2.3",
     "lucide-react": "^0.564.0",
     "radix-ui": "^1.4.3",
diff --git a/src/App.tsx b/src/App.tsx
index 1414c24..a6f9ec2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,14 +27,14 @@ export function App() {
 
   return (
     <div className="flex h-screen">
-      <aside className="w-[200px] min-w-[200px] bg-panel border-r border-border-subtle flex flex-col py-4">
-        <h1 className="px-4 text-lg font-bold text-text-main mb-4">ClawPal</h1>
+      <aside className="w-[200px] min-w-[200px] bg-muted border-r border-border flex flex-col py-4">
+        <h1 className="px-4 text-lg font-bold mb-4">ClawPal</h1>
         <nav className="flex flex-col gap-1 px-2">
           <Button
             variant="ghost"
             className={cn(
-              "justify-start text-text-main hover:bg-accent-blue/10",
-              (route === "home") && "bg-accent-blue/15 text-accent-blue border-l-[3px] border-accent-blue"
+              "justify-start hover:bg-accent",
+              (route === "home") && "bg-accent text-accent-foreground border-l-[3px] border-primary"
             )}
             onClick={() => setRoute("home")}
           >
@@ -43,8 +43,8 @@ export function App() {
           <Button
             variant="ghost"
             className={cn(
-              "justify-start text-text-main hover:bg-accent-blue/10",
-              (route === "recipes" || route === "install") && "bg-accent-blue/15 text-accent-blue border-l-[3px] border-accent-blue"
+              "justify-start hover:bg-accent",
+              (route === "recipes" || route === "install") && "bg-accent text-accent-foreground border-l-[3px] border-primary"
             )}
             onClick={() => setRoute("recipes")}
           >
@@ -53,8 +53,8 @@ export function App() {
           <Button
             variant="ghost"
             className={cn(
-              "justify-start text-text-main hover:bg-accent-blue/10",
-              (route === "history") && "bg-accent-blue/15 text-accent-blue border-l-[3px] border-accent-blue"
+              "justify-start hover:bg-accent",
+              (route === "history") && "bg-accent text-accent-foreground border-l-[3px] border-primary"
             )}
             onClick={() => setRoute("history")}
           >
@@ -63,19 +63,19 @@ export function App() {
           <Button
             variant="ghost"
             className={cn(
-              "justify-start text-text-main hover:bg-accent-blue/10",
-              (route === "doctor") && "bg-accent-blue/15 text-accent-blue border-l-[3px] border-accent-blue"
+              "justify-start hover:bg-accent",
+              (route === "doctor") && "bg-accent text-accent-foreground border-l-[3px] border-primary"
             )}
             onClick={() => setRoute("doctor")}
           >
             Doctor
           </Button>
-          <Separator className="my-2 bg-border-subtle" />
+          <Separator className="my-2" />
           <Button
             variant="ghost"
             className={cn(
-              "justify-start text-text-main hover:bg-accent-blue/10",
-              (route === "settings") && "bg-accent-blue/15 text-accent-blue border-l-[3px] border-accent-blue"
+              "justify-start hover:bg-accent",
+              (route === "settings") && "bg-accent text-accent-foreground border-l-[3px] border-primary"
             )}
             onClick={() => setRoute("settings")}
           >
@@ -110,7 +110,7 @@ export function App() {
         {route === "install" && (
           <Button
             variant="ghost"
-            className="mt-3 text-text-main hover:bg-accent-blue/10"
+            className="mt-3 hover:bg-accent"
             onClick={() => setRoute("recipes")}
           >
             ← Recipes
diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 960f903..0fecc51 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -87,23 +87,23 @@ export function Chat() {
   }, [input, loading, agentId, sessionId]);
 
   return (
-    <div className="w-[340px] min-w-[300px] flex flex-col border-l border-border-subtle pl-4">
+    <div className="w-[340px] min-w-[300px] flex flex-col border-l border-border pl-4">
       <div className="flex items-center gap-2 mb-2">
-        <h3 className="text-lg font-semibold text-text-main m-0">Chat</h3>
+        <h3 className="text-lg font-semibold m-0">Chat</h3>
         <Select value={agentId} onValueChange={(a) => { setAgentId(a); setSessionId(loadSessionId(a)); setMessages([]); }}>
-          <SelectTrigger className="w-auto h-7 text-xs bg-panel border-border-subtle text-text-main">
+          <SelectTrigger className="w-auto h-7 text-xs">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent className="bg-panel border-border-subtle">
+          <SelectContent>
             {agents.map((a) => (
-              <SelectItem key={a} value={a} className="text-text-main">{a}</SelectItem>
+              <SelectItem key={a} value={a}>{a}</SelectItem>
             ))}
           </SelectContent>
         </Select>
         <Button
           variant="ghost"
           size="sm"
-          className="text-xs opacity-70 text-text-main"
+          className="text-xs opacity-70"
           onClick={() => { clearSessionId(agentId); setSessionId(undefined); setMessages([]); }}
         >
           New
@@ -113,10 +113,10 @@ export function Chat() {
         {messages.map((msg, i) => (
           <div key={i} className={cn("mb-2", msg.role === "user" ? "text-right" : "text-left")}>
             <div className={cn(
-              "inline-block px-3 py-2 rounded-lg max-w-[90%] text-left border border-border-subtle",
-              msg.role === "user" ? "bg-btn-border" : "bg-panel"
+              "inline-block px-3 py-2 rounded-lg max-w-[90%] text-left border border-border",
+              msg.role === "user" ? "bg-muted" : "bg-card"
             )}>
-              <div className="whitespace-pre-wrap text-sm text-text-main">{msg.content}</div>
+              <div className="whitespace-pre-wrap text-sm">{msg.content}</div>
             </div>
           </div>
         ))}
@@ -129,10 +129,9 @@ export function Chat() {
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
           placeholder="Ask your OpenClaw agent..."
-          className="flex-1 bg-panel border-border-subtle text-text-main"
+          className="flex-1"
         />
         <Button
-          className="bg-btn-bg border border-btn-border text-text-main hover:bg-accent-blue/15"
           onClick={send}
           disabled={loading}
         >
diff --git a/src/components/DiffViewer.tsx b/src/components/DiffViewer.tsx
index ea02a73..bfd5814 100644
--- a/src/components/DiffViewer.tsx
+++ b/src/components/DiffViewer.tsx
@@ -2,8 +2,8 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 
 export function DiffViewer({ value }: { value: string }) {
   return (
-    <ScrollArea className="max-h-[260px] rounded-lg bg-[#0b0f20] p-3">
-      <pre className="text-sm text-text-main whitespace-pre-wrap">{value}</pre>
+    <ScrollArea className="max-h-[260px] rounded-lg bg-muted p-3">
+      <pre className="text-sm whitespace-pre-wrap">{value}</pre>
     </ScrollArea>
   );
 }
diff --git a/src/components/ParamForm.tsx b/src/components/ParamForm.tsx
index 4525a62..b9f6aa4 100644
--- a/src/components/ParamForm.tsx
+++ b/src/components/ParamForm.tsx
@@ -66,7 +66,6 @@ export function ParamForm({
           {param.type === "textarea" ? (
             <Textarea
               id={param.id}
-              className="bg-panel border-border-subtle text-text-main"
               value={values[param.id] || ""}
               placeholder={param.placeholder}
               onBlur={() => setTouched((prev) => ({ ...prev, [param.id]: true }))}
@@ -78,7 +77,6 @@ export function ParamForm({
           ) : (
             <Input
               id={param.id}
-              className="bg-panel border-border-subtle text-text-main"
               value={values[param.id] || ""}
               placeholder={param.placeholder}
               required={param.required}
@@ -90,14 +88,13 @@ export function ParamForm({
             />
           )}
           {touched[param.id] && errors[param.id] ? (
-            <p className="text-sm text-destructive-red">{errors[param.id]}</p>
+            <p className="text-sm text-destructive">{errors[param.id]}</p>
           ) : null}
         </div>
       ))}
       <Button
         type="submit"
         disabled={hasError}
-        className="bg-btn-bg border border-btn-border text-text-main hover:bg-accent-blue/15"
       >
         Preview
       </Button>
diff --git a/src/components/RecipeCard.tsx b/src/components/RecipeCard.tsx
index c18d68b..924edd8 100644
--- a/src/components/RecipeCard.tsx
+++ b/src/components/RecipeCard.tsx
@@ -5,23 +5,23 @@ import { Button } from "@/components/ui/button";
 
 export function RecipeCard({ recipe, onInstall }: { recipe: Recipe; onInstall: (id: string) => void }) {
   return (
-    <Card className="bg-panel border-border-subtle">
+    <Card>
       <CardHeader>
-        <CardTitle className="text-text-main">{recipe.name}</CardTitle>
+        <CardTitle>{recipe.name}</CardTitle>
         <CardDescription>{recipe.description}</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap gap-1.5 mb-2">
           {recipe.tags.map((t) => (
-            <Badge key={t} variant="secondary" className="bg-btn-bg border-btn-border text-text-main/80">
+            <Badge key={t} variant="secondary">
               {t}
             </Badge>
           ))}
         </div>
-        <p className="text-sm text-text-main/70">Impact: {recipe.impactCategory}</p>
+        <p className="text-sm text-muted-foreground">Impact: {recipe.impactCategory}</p>
       </CardContent>
       <CardFooter>
-        <Button onClick={() => onInstall(recipe.id)} className="bg-btn-bg border border-btn-border text-text-main hover:bg-accent-blue/15">
+        <Button onClick={() => onInstall(recipe.id)}>
           Install
         </Button>
       </CardFooter>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..e5bd56b
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,182 @@
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..80d7ad6
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..103bec3
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}
diff --git a/src/pages/Doctor.tsx b/src/pages/Doctor.tsx
index a70b01a..e496883 100644
--- a/src/pages/Doctor.tsx
+++ b/src/pages/Doctor.tsx
@@ -83,12 +83,12 @@ export function Doctor() {
 
   return (
     <section>
-      <h2 className="text-2xl font-bold text-text-main mb-4">Doctor</h2>
+      <h2 className="text-2xl font-bold mb-4">Doctor</h2>
 
       {/* Config Diagnostics */}
       {state.doctor && (
         <div>
-          <p className="text-sm text-text-main/70 mb-3">
+          <p className="text-sm text-muted-foreground mb-3">
             Health score: {state.doctor.score}
           </p>
           <div className="space-y-2">
@@ -186,19 +186,19 @@ export function Doctor() {
           Run Doctor
         </Button>
       ) : null}
-      <p className="text-sm text-text-main/70 mt-2">{state.message}</p>
+      <p className="text-sm text-muted-foreground mt-2">{state.message}</p>
 
       {/* Data Cleanup */}
-      <h3 className="text-lg font-semibold text-text-main mt-6 mb-3">
+      <h3 className="text-lg font-semibold mt-6 mb-3">
         Data Cleanup
       </h3>
       {dataMessage && (
-        <p className="text-sm text-text-main/70 mt-2">{dataMessage}</p>
+        <p className="text-sm text-muted-foreground mt-2">{dataMessage}</p>
       )}
 
       <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3">
         {/* Memory */}
-        <Card className="bg-panel border-border-subtle">
+        <Card>
           <CardHeader>
             <CardTitle>Memory</CardTitle>
           </CardHeader>
@@ -225,7 +225,7 @@ export function Doctor() {
         </Card>
 
         {/* Sessions */}
-        <Card className="bg-panel border-border-subtle">
+        <Card>
           <CardHeader>
             <CardTitle>Sessions</CardTitle>
           </CardHeader>
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index 30f1e6d..12d6056 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -19,12 +19,12 @@ export function History() {
 
   return (
     <section>
-      <h2 className="text-2xl font-bold text-text-main mb-4">History</h2>
+      <h2 className="text-2xl font-bold mb-4">History</h2>
       <div className="space-y-3">
         {state.history.map((item) => (
-          <Card key={item.id} className="bg-panel border-border-subtle">
+          <Card key={item.id}>
             <CardContent>
-              <p className="text-sm text-text-main">
+              <p className="text-sm">
                 {item.createdAt} · {item.recipeId || "manual"} · {item.source}
                 {!item.canRollback && (
                   <Badge variant="outline" className="ml-2">not rollbackable</Badge>
@@ -78,7 +78,7 @@ export function History() {
       <Button variant="outline" onClick={refreshHistory} className="mt-3">
         Refresh
       </Button>
-      <p className="text-sm text-text-main/70 mt-2">{state.message}</p>
+      <p className="text-sm text-muted-foreground mt-2">{state.message}</p>
     </section>
   );
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index d69201e..e70b64c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -50,28 +50,28 @@ export function Home() {
   return (
     <div className="flex gap-4 h-full">
       <div className="flex-1 overflow-y-auto">
-        <h2 className="text-2xl font-bold text-text-main mb-4">Home</h2>
+        <h2 className="text-2xl font-bold mb-4">Home</h2>
 
         {/* Status Summary */}
-        <h3 className="text-lg font-semibold text-text-main mt-6 mb-3">Status</h3>
+        <h3 className="text-lg font-semibold mt-6 mb-3">Status</h3>
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3">
-          <Card className="bg-panel border-border-subtle">
+          <Card>
             <CardContent>
-              <div className="text-sm text-text-main/70">Health</div>
-              <div className="text-lg mt-1 text-text-main">
+              <div className="text-sm text-muted-foreground">Health</div>
+              <div className="text-lg mt-1">
                 {status ? (status.healthy ? "Healthy" : "Unhealthy") : "..."}
               </div>
             </CardContent>
           </Card>
-          <Card className="bg-panel border-border-subtle">
+          <Card>
             <CardContent>
-              <div className="text-sm text-text-main/70">OpenClaw Version</div>
-              <div className="text-lg mt-1 text-text-main">
+              <div className="text-sm text-muted-foreground">OpenClaw Version</div>
+              <div className="text-lg mt-1">
                 {version || "..."}
               </div>
               {updateInfo?.available && (
                 <div className="mt-1">
-                  <div className="text-sm text-accent-blue mt-1">
+                  <div className="text-sm text-primary mt-1">
                     Update available: {updateInfo.latest}
                   </div>
                   <Button
@@ -85,10 +85,10 @@ export function Home() {
               )}
             </CardContent>
           </Card>
-          <Card className="bg-panel border-border-subtle">
+          <Card>
             <CardContent>
-              <div className="text-sm text-text-main/70">Default Model</div>
-              <div className="text-lg mt-1 text-text-main">
+              <div className="text-sm text-muted-foreground">Default Model</div>
+              <div className="text-lg mt-1">
                 {status ? (status.globalDefaultModel || "not set") : "..."}
               </div>
             </CardContent>
@@ -96,23 +96,23 @@ export function Home() {
         </div>
 
         {/* Agents Overview */}
-        <h3 className="text-lg font-semibold text-text-main mt-6 mb-3">Agents</h3>
+        <h3 className="text-lg font-semibold mt-6 mb-3">Agents</h3>
         {agents.length === 0 ? (
-          <p className="text-text-main/60">No agents found.</p>
+          <p className="text-muted-foreground">No agents found.</p>
         ) : (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3">
             {agents.map((agent) => (
-              <Card className="bg-panel border-border-subtle" key={agent.id}>
+              <Card key={agent.id}>
                 <CardContent>
                   <div className="flex justify-between items-center">
                     <strong>{agent.id}</strong>
                     {agent.online ? (
-                      <Badge className="bg-success-green/20 text-success-green border-0">online</Badge>
+                      <Badge className="bg-green-100 text-green-700 border-0">online</Badge>
                     ) : (
-                      <Badge className="bg-destructive-red/15 text-destructive-red border-0">offline</Badge>
+                      <Badge className="bg-red-100 text-red-700 border-0">offline</Badge>
                     )}
                   </div>
-                  <div className="text-sm text-text-main/70 mt-1.5">
+                  <div className="text-sm text-muted-foreground mt-1.5">
                     Model: {agent.model || "default"}
                   </div>
                 </CardContent>
@@ -122,19 +122,19 @@ export function Home() {
         )}
 
         {/* Recommended Recipes */}
-        <h3 className="text-lg font-semibold text-text-main mt-6 mb-3">Recommended Recipes</h3>
+        <h3 className="text-lg font-semibold mt-6 mb-3">Recommended Recipes</h3>
         {recipes.length === 0 ? (
-          <p className="text-text-main/60">No recipes available.</p>
+          <p className="text-muted-foreground">No recipes available.</p>
         ) : (
           <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3">
             {recipes.map((recipe) => (
-              <Card className="bg-panel border-border-subtle" key={recipe.id}>
+              <Card key={recipe.id}>
                 <CardContent>
                   <strong>{recipe.name}</strong>
-                  <div className="text-sm text-text-main/80 mt-1.5">
+                  <div className="text-sm text-muted-foreground mt-1.5">
                     {recipe.description}
                   </div>
-                  <div className="text-xs text-text-main/60 mt-2">
+                  <div className="text-xs text-muted-foreground mt-2">
                     {recipe.difficulty} &middot; {recipe.impactCategory}
                   </div>
                 </CardContent>
@@ -144,25 +144,25 @@ export function Home() {
         )}
 
         {/* Recent Activity */}
-        <h3 className="text-lg font-semibold text-text-main mt-6 mb-3">Recent Activity</h3>
+        <h3 className="text-lg font-semibold mt-6 mb-3">Recent Activity</h3>
         {history.length === 0 ? (
-          <p className="text-text-main/60">No recent activity.</p>
+          <p className="text-muted-foreground">No recent activity.</p>
         ) : (
           <div className="flex flex-col gap-2">
             {history.map((item) => (
-              <Card className="bg-panel border-border-subtle" key={item.id}>
+              <Card key={item.id}>
                 <CardContent className="flex justify-between items-center">
                   <div>
                     <span className="font-medium">{item.recipeId || "manual change"}</span>
-                    <span className="text-sm text-text-main/60 ml-2.5">
+                    <span className="text-sm text-muted-foreground ml-2.5">
                       {item.source}
                     </span>
                   </div>
                   <div className="flex items-center gap-2.5">
                     {item.canRollback && (
-                      <span className="text-xs text-text-main/60">rollback available</span>
+                      <span className="text-xs text-muted-foreground">rollback available</span>
                     )}
-                    <span className="text-sm text-text-main/50">
+                    <span className="text-sm text-muted-foreground">
                       {item.createdAt}
                     </span>
                   </div>
diff --git a/src/pages/Install.tsx b/src/pages/Install.tsx
index 4bb7785..db32c21 100644
--- a/src/pages/Install.tsx
+++ b/src/pages/Install.tsx
@@ -35,11 +35,11 @@ export function Install({
 
   const recipe = state.recipes.find((r) => r.id === recipeId);
 
-  if (!recipe) return <div className="text-text-main">Recipe not found</div>;
+  if (!recipe) return <div>Recipe not found</div>;
 
   return (
     <section>
-      <h2 className="text-2xl font-bold text-text-main mb-4">
+      <h2 className="text-2xl font-bold mb-4">
         Install {recipe.name}
       </h2>
       <ParamForm
@@ -55,9 +55,9 @@ export function Install({
         }}
       />
       {state.lastPreview && (
-        <Card className="mt-4 bg-panel border-border-subtle">
+        <Card className="mt-4">
           <CardHeader>
-            <CardTitle className="text-lg font-semibold text-text-main mb-2">
+            <CardTitle className="text-lg font-semibold mb-2">
               Preview
             </CardTitle>
           </CardHeader>
@@ -91,13 +91,13 @@ export function Install({
               >
                 Apply
               </Button>
-              {isPreviewing ? <span className="text-sm text-text-main/60 ml-2">...previewing</span> : null}
-              {isApplying ? <span className="text-sm text-text-main/60 ml-2">...applying</span> : null}
+              {isPreviewing ? <span className="text-sm text-muted-foreground ml-2">...previewing</span> : null}
+              {isApplying ? <span className="text-sm text-muted-foreground ml-2">...applying</span> : null}
             </div>
           </CardContent>
         </Card>
       )}
-      <p className="text-sm text-text-main/70 mt-2">{state.message}</p>
+      <p className="text-sm text-muted-foreground mt-2">{state.message}</p>
     </section>
   );
 }
diff --git a/src/pages/Recipes.tsx b/src/pages/Recipes.tsx
index 0a8cf5a..e9dc379 100644
--- a/src/pages/Recipes.tsx
+++ b/src/pages/Recipes.tsx
@@ -42,20 +42,20 @@ export function Recipes({
 
   return (
     <section>
-      <h2 className="text-2xl font-bold text-text-main mb-4">Recipes</h2>
+      <h2 className="text-2xl font-bold mb-4">Recipes</h2>
       <form onSubmit={onLoadSource} className="mb-2 flex items-center gap-2">
         <Label>Recipe source (file path or URL)</Label>
         <Input
           value={source}
           onChange={(event) => setSource(event.target.value)}
           placeholder="/path/recipes.json or https://example.com/recipes.json"
-          className="w-[380px] bg-panel border-border-subtle text-text-main"
+          className="w-[380px]"
         />
         <Button type="submit" className="ml-2">
           {isLoading ? "Loading..." : "Load"}
         </Button>
       </form>
-      <p className="text-sm text-text-main/80 mt-0">
+      <p className="text-sm text-muted-foreground mt-0">
         Loaded from: {loadedSource || "builtin / clawpal recipes"}
       </p>
       <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 21deb36..611fff5 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,20 +1,24 @@
 import { useEffect, useMemo, useState } from "react";
 import type { FormEvent } from "react";
-import { api } from "../lib/api";
-import type { ModelCatalogProvider, ModelProfile, ResolvedApiKey } from "../lib/types";
+import { api } from "@/lib/api";
+import type { ModelCatalogProvider, ModelProfile, ResolvedApiKey } from "@/lib/types";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "@/components/ui/command";
+import { ChevronsUpDown, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 type ProfileForm = {
   id: string;
@@ -38,7 +42,109 @@ function emptyForm(): ProfileForm {
   };
 }
 
-const CHAT_PROFILE_KEY = "clawpal_chat_profile";
+function ComboboxField({
+  value,
+  onChange,
+  onOpen,
+  options,
+  placeholder,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  onOpen?: () => void;
+  options: { value: string; label: string }[];
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(o) => {
+        setOpen(o);
+        if (o && onOpen) onOpen();
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between font-normal"
+        >
+          {value || (
+            <span className="text-muted-foreground">{placeholder}</span>
+          )}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[--radix-popover-trigger-width] p-0"
+        align="start"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={`Search ${placeholder.replace("e.g. ", "")}...`}
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {/* Show typed value as option if it doesn't match any existing option */}
+              {search &&
+                !options.some(
+                  (o) => o.value.toLowerCase() === search.toLowerCase(),
+                ) && (
+                  <CommandItem
+                    onSelect={() => {
+                      onChange(search);
+                      setOpen(false);
+                      setSearch("");
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === search ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    Use "{search}"
+                  </CommandItem>
+                )}
+              {options
+                .filter(
+                  (o) =>
+                    !search ||
+                    o.value.toLowerCase().includes(search.toLowerCase()) ||
+                    o.label.toLowerCase().includes(search.toLowerCase()),
+                )
+                .map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      onChange(option.value);
+                      setOpen(false);
+                      setSearch("");
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === option.value ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    {option.label}
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
 
 export function Settings() {
   const [profiles, setProfiles] = useState<ModelProfile[]>([]);
@@ -46,9 +152,6 @@ export function Settings() {
   const [apiKeys, setApiKeys] = useState<ResolvedApiKey[]>([]);
   const [form, setForm] = useState<ProfileForm>(emptyForm());
   const [message, setMessage] = useState("");
-  const [chatProfileId, setChatProfileId] = useState(
-    () => localStorage.getItem(CHAT_PROFILE_KEY) || "",
-  );
 
   const [catalogRefreshed, setCatalogRefreshed] = useState(false);
 
@@ -135,32 +238,19 @@ export function Settings() {
         if (form.id === id) {
           setForm(emptyForm());
         }
-        if (chatProfileId === id) {
-          setChatProfileId("");
-          localStorage.removeItem(CHAT_PROFILE_KEY);
-        }
         refreshProfiles();
       })
       .catch(() => setMessage("Delete failed"));
   };
 
-  const handleChatProfileChange = (value: string) => {
-    setChatProfileId(value);
-    if (value) {
-      localStorage.setItem(CHAT_PROFILE_KEY, value);
-    } else {
-      localStorage.removeItem(CHAT_PROFILE_KEY);
-    }
-  };
-
   return (
     <section>
-      <h2 className="text-2xl font-bold text-text-main mb-4">Settings</h2>
+      <h2 className="text-2xl font-bold mb-4">Settings</h2>
 
       {/* ---- Model Profiles ---- */}
       <div className="grid grid-cols-2 gap-3 items-start">
         {/* Create / Edit form */}
-        <Card className="bg-panel border-border-subtle">
+        <Card>
           <CardHeader>
             <CardTitle>{form.id ? "Edit Profile" : "Add Profile"}</CardTitle>
           </CardHeader>
@@ -168,44 +258,34 @@ export function Settings() {
             <form onSubmit={upsert} className="space-y-4">
               <div className="space-y-1.5">
                 <Label>Provider</Label>
-                <Input
-                  placeholder="e.g. openai"
+                <ComboboxField
                   value={form.provider}
-                  onChange={(e) =>
-                    setForm((p) => ({ ...p, provider: e.target.value, model: "" }))
+                  onChange={(val) =>
+                    setForm((p) => ({ ...p, provider: val, model: "" }))
                   }
-                  onFocus={ensureCatalog}
-                  list="settings-provider-list"
-                  className="bg-panel border-border-subtle text-text-main"
+                  onOpen={ensureCatalog}
+                  options={catalog.map((c) => ({
+                    value: c.provider,
+                    label: c.provider,
+                  }))}
+                  placeholder="e.g. openai"
                 />
-                <datalist id="settings-provider-list">
-                  {catalog.map((c) => (
-                    <option key={c.provider} value={c.provider} />
-                  ))}
-                </datalist>
               </div>
 
               <div className="space-y-1.5">
                 <Label>Model</Label>
-                <Input
-                  placeholder="e.g. gpt-4o"
+                <ComboboxField
                   value={form.model}
-                  onChange={(e) =>
-                    setForm((p) => ({ ...p, model: e.target.value }))
+                  onChange={(val) =>
+                    setForm((p) => ({ ...p, model: val }))
                   }
-                  onFocus={ensureCatalog}
-                  list="settings-model-list"
-                  className="bg-panel border-border-subtle text-text-main"
+                  onOpen={ensureCatalog}
+                  options={modelCandidates.map((m) => ({
+                    value: m.id,
+                    label: m.name || m.id,
+                  }))}
+                  placeholder="e.g. gpt-4o"
                 />
-                <datalist id="settings-model-list">
-                  {modelCandidates.map((m) => (
-                    <option
-                      key={m.id}
-                      value={m.id}
-                      label={m.name || m.id}
-                    />
-                  ))}
-                </datalist>
               </div>
 
               <div className="space-y-1.5">
@@ -217,7 +297,6 @@ export function Settings() {
                   onChange={(e) =>
                     setForm((p) => ({ ...p, apiKey: e.target.value }))
                   }
-                  className="bg-panel border-border-subtle text-text-main"
                 />
               </div>
 
@@ -241,7 +320,6 @@ export function Settings() {
                     onChange={(e) =>
                       setForm((p) => ({ ...p, baseUrl: e.target.value }))
                     }
-                    className="bg-panel border-border-subtle text-text-main"
                   />
                 </div>
               )}
@@ -272,37 +350,37 @@ export function Settings() {
         </Card>
 
         {/* Profiles list */}
-        <Card className="bg-panel border-border-subtle">
+        <Card>
           <CardHeader>
             <CardTitle>Model Profiles</CardTitle>
           </CardHeader>
           <CardContent>
             {profiles.length === 0 && (
-              <p className="text-text-main/60">No model profiles yet.</p>
+              <p className="text-muted-foreground">No model profiles yet.</p>
             )}
             <div className="grid gap-2">
               {profiles.map((profile) => (
                 <div
                   key={profile.id}
-                  className="border border-btn-border p-2.5 rounded-lg"
+                  className="border border-border p-2.5 rounded-lg"
                 >
                   <div className="flex justify-between items-center">
                     <strong>{profile.provider}/{profile.model}</strong>
                     {profile.enabled ? (
-                      <Badge className="bg-accent-blue/15 text-accent-blue border-0">
+                      <Badge className="bg-blue-100 text-blue-700 border-0">
                         enabled
                       </Badge>
                     ) : (
-                      <Badge className="bg-destructive-red/15 text-destructive-red border-0">
+                      <Badge className="bg-red-100 text-red-700 border-0">
                         disabled
                       </Badge>
                     )}
                   </div>
-                  <div className="text-sm text-text-main/70 mt-1">
+                  <div className="text-sm text-muted-foreground mt-1">
                     API Key: {maskedKeyMap.get(profile.id) || "..."}
                   </div>
                   {profile.baseUrl && (
-                    <div className="text-sm text-text-main/70 mt-0.5">
+                    <div className="text-sm text-muted-foreground mt-0.5">
                       URL: {profile.baseUrl}
                     </div>
                   )}
@@ -331,42 +409,8 @@ export function Settings() {
         </Card>
       </div>
 
-      {/* ---- Chat Model ---- */}
-      <Card className="bg-panel border-border-subtle mt-4">
-        <CardHeader>
-          <CardTitle>Chat Model</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-text-main/75 mt-1 mb-2">
-            Select which model profile to use for the Chat feature.
-          </p>
-          <Select
-            value={chatProfileId || "__none__"}
-            onValueChange={(v) =>
-              handleChatProfileChange(v === "__none__" ? "" : v)
-            }
-          >
-            <SelectTrigger className="w-[260px] bg-panel border-border-subtle text-text-main">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent className="bg-panel border-border-subtle">
-              <SelectItem value="__none__" className="text-text-main">
-                (none selected)
-              </SelectItem>
-              {profiles
-                .filter((p) => p.enabled)
-                .map((p) => (
-                  <SelectItem key={p.id} value={p.id} className="text-text-main">
-                    {p.provider}/{p.model}
-                  </SelectItem>
-                ))}
-            </SelectContent>
-          </Select>
-        </CardContent>
-      </Card>
-
       {message && (
-        <p className="text-sm text-text-main/70 mt-3">{message}</p>
+        <p className="text-sm text-muted-foreground mt-3">{message}</p>
       )}
     </section>
   );
diff --git a/src/styles.css b/src/styles.css
index d8a45e1..4fc10a3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,38 +2,38 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 @theme inline {
@@ -70,22 +70,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --radius: var(--radius);
-
-  /* Custom app theme colors */
-  --color-bg: #0f1220;
-  --color-bg-gradient: #151935;
-  --color-panel: #171b2f;
-  --color-text-main: #e6ebff;
-  --color-accent-blue: #6dd0ff;
-  --color-border-subtle: #29325a;
-  --color-btn-bg: #1f2750;
-  --color-btn-border: #2d3560;
-  --color-destructive-red: #ff6b6b;
-  --color-success-green: #50c878;
 }
 
 body {
   margin: 0;
   font-family: ui-sans-serif, -apple-system, sans-serif;
-  background: linear-gradient(120deg, var(--color-bg), var(--color-bg-gradient));
 }