Fix tool icons (#2510)

* feat: add model id on token usage

* fix: tool icons

Author: dartpain

frontend/public/toolIcons/tool_cryptoprice.svg

@@ -33,6 +33,7 @@ import {
   type MultiSelectPopoverItem,
 } from '../components/MultiSelectPopover';
 import Spinner from '../components/Spinner';
+import ToolIcon from '../components/ToolIcon';
 import AgentDetailsModal from '../modals/AgentDetailsModal';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState, Doc, Prompt } from '../models/misc';
@@ -487,7 +488,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
           const base: MultiSelectPopoverItem = {
             id: tool.id,
             label: getToolDisplayName(tool),
-            icon: `/toolIcons/tool_${tool.name}.svg`,
+            icon: <ToolIcon name={tool.name} className="h-5 w-5" />,
             group: groupFor(tool),
           };
           if (tool.name === 'remote_device') {

frontend/public/toolIcons/tool_notes.svg

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import EditIcon from '../assets/edit.svg';
+import ToolIcon from '../components/ToolIcon';
 import { Avatar } from '../components/ui/avatar';
 import { Button } from '../components/ui/button';
 import { getToolDisplayName } from '../utils/toolUtils';
@@ -87,9 +88,9 @@ export default function SharedAgentCard({
                 key={index}
                 className="bg-accent text-foreground dark:bg-card flex items-center gap-1 rounded-full px-3 py-1 text-xs font-light"
               >
-                <img
-                  src={`/toolIcons/tool_${tool.name}.svg`}
-                  alt={`${getToolDisplayName(tool)} icon`}
+                <ToolIcon
+                  name={tool.name}
+                  title={`${getToolDisplayName(tool)} icon`}
                   className="h-3 w-3"
                 />{' '}
                 {getToolDisplayName(tool)}