style: UI and UX touches

Author: Bajahaw

frontend/src/components/ai-elements/thoughts-tools-group.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { BrainIcon, WrenchIcon, ClockIcon } from "lucide-react";
+import { BrainIcon, ClockIcon } from "lucide-react";
+import { getToolIcon } from "@/lib/toolIcons";
 import {
   Reasoning,
   ReasoningContent,
@@ -163,10 +164,12 @@ const ToolSummaryIcon = ({
     setImageError(false);
   }, [mcpUrl]);
 
+  const ToolIcon = getToolIcon(toolCall.name);
+
   if (!faviconUrl) {
     return (
       <span className={ICON_CHIP_CLASS} aria-hidden="true">
-        <WrenchIcon className="size-3 text-muted-foreground" />
+        <ToolIcon className="size-3 text-muted-foreground" />
       </span>
     );
   }

frontend/src/components/ai-elements/tool.tsx

@@ -5,11 +5,11 @@ import {
   ChevronDownIcon,
   CircleIcon,
   ClockIcon,
-  WrenchIcon,
   XCircleIcon,
   CheckIcon,
   XIcon,
 } from "lucide-react";
+import { getToolIcon } from "@/lib/toolIcons";
 import {
   type ComponentProps,
   type ReactNode,
@@ -94,6 +94,10 @@ export const ToolHeader = ({
     setImageError(false);
   }, [mcpUrl]);
 
+  // Extract tool name from "tool-<name>" format for built-in icon lookup
+  const toolName = type.startsWith("tool-") ? type.slice(5) : type;
+  const ToolIcon = getToolIcon(toolName);
+
   let faviconUrl: string | null = null;
   if (mcpUrl && !imageError) {
     try {
@@ -128,7 +132,7 @@ export const ToolHeader = ({
             alt="icon"
           />
         ) : (
-          <WrenchIcon className="size-4 text-muted-foreground" />
+          <ToolIcon className="size-4 text-muted-foreground" />
         )}
         <span className="font-sm text-muted-foreground text-sm">{type}</span>
         {getStatusBadge(state)}

frontend/src/components/file-manager/FileManagerDialog.tsx

@@ -225,7 +225,6 @@ export function FileManagerDialog({
       console.error("OCR extraction failed:", error);
     } finally {
       setExtracting(false);
-      setSelectedFileIds(new Set());
     }
   };
 

frontend/src/components/settings/ToolsSection.tsx

@@ -35,16 +35,28 @@ export const ToolsSection: React.FC = () => {
 
   const parentRef = useRef<HTMLDivElement>(null);
 
+  const mcpNameById = useMemo(() => {
+    const map: Record<string, string> = {};
+    data.mcpServers.forEach((s) => {
+      map[s.id] = s.name;
+    });
+    return map;
+  }, [data.mcpServers]);
+
   const filtered = useMemo(() => {
     if (!search.trim()) return data.tools;
     const q = search.toLowerCase();
     return data.tools.filter(
       (t) =>
         t.name.toLowerCase().includes(q) ||
         (t.description && t.description.toLowerCase().includes(q)) ||
-        (t.mcp_server_id && t.mcp_server_id.toLowerCase().includes(q)),
+        (t.mcp_server_id && t.mcp_server_id.toLowerCase().includes(q)) ||
+        (t.mcp_server_id &&
+          (mcpNameById[t.mcp_server_id] || "")
+            .toLowerCase()
+            .includes(q)),
     );
-  }, [data.tools, search]);
+  }, [data.tools, search, mcpNameById]);
 
   const enabledInFiltered = filtered.filter((t) => t.is_enabled).length;
   const approvalRequiredInFiltered = filtered.filter(
@@ -305,7 +317,7 @@ export const ToolsSection: React.FC = () => {
                           )}
                           {tool.mcp_server_id && (
                             <div className="text-[10px] text-muted-foreground/70 truncate max-w-[200px] sm:max-w-[300px]">
-                              MCP: {tool.mcp_server_id}
+                              {mcpNameById[tool.mcp_server_id] || tool.mcp_server_id}
                             </div>
                           )}
                         </div>

frontend/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

frontend/src/lib/toolIcons.ts

@@ -0,0 +1,36 @@
+import {
+  WrenchIcon,
+  SearchIcon,
+  ListIcon,
+  FileCodeIcon,
+  FilePlusIcon,
+  FileEditIcon,
+  FileXIcon,
+  ImageIcon,
+  type LucideIcon,
+  BookIcon,
+  CloudIcon,
+  Scan,
+} from "lucide-react";
+
+/**
+ * Maps built-in tool names to lucide-react icons.
+ * Falls back to WrenchIcon for unknown / MCP tools.
+ */
+const BUILT_IN_TOOL_ICONS: Record<string, LucideIcon> = {
+  search_ddgs: SearchIcon,
+  get_weather: CloudIcon,
+  search_document: SearchIcon,
+  read_document_page: BookIcon,
+  view_document_page: Scan,
+  list_document_parts: ListIcon,
+  read_document_part: FileCodeIcon,
+  create_document: FilePlusIcon,
+  write_document_part: FileEditIcon,
+  delete_document_part: FileXIcon,
+  generate_image: ImageIcon,
+};
+
+export const getToolIcon = (toolName: string): LucideIcon => {
+  return BUILT_IN_TOOL_ICONS[toolName] ?? WrenchIcon;
+};