feat: add icon and friendly name for tools

Signed-off-by: tylerslaton <[email protected]>

ui/admin/app/components/agent/ToolForm.tsx

@@ -1,13 +1,16 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon, TrashIcon } from "lucide-react";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Agent } from "~/lib/model/agents";
+import { ToolReference } from "~/lib/model/toolReferences";
+import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 import { noop } from "~/lib/utils";
 
 import { ToolCatalog } from "~/components/tools/ToolCatalog";
+import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Button } from "~/components/ui/button";
 import {
     Form,
@@ -38,6 +41,9 @@ export function ToolForm({
     onSubmit?: (values: ToolFormValues) => void;
     onChange?: (values: ToolFormValues) => void;
 }) {
+    const [namedTools, setNamedTools] = useState<Record<string, ToolReference>>(
+        {}
+    );
     const form = useForm<ToolFormValues>({
         resolver: zodResolver(formSchema),
         defaultValues: { tools: agent.tools || [] },
@@ -47,6 +53,30 @@ export function ToolForm({
 
     const toolValues = form.watch("tools");
 
+    const fetchNamedTools = useCallback(async () => {
+        if (toolValues.length === 0) return {};
+        const toolReferences = await Promise.all(
+            toolValues.map((toolId) =>
+                ToolReferenceService.getToolReferenceById(toolId)
+            )
+        );
+        return toolReferences.reduce(
+            (acc, toolReference) => {
+                if (toolReference) {
+                    acc[toolReference.id] = toolReference;
+                }
+                return acc;
+            },
+            {} as Record<string, ToolReference>
+        );
+    }, [toolValues]);
+
+    useEffect(() => {
+        fetchNamedTools().then((namedTools) => {
+            setNamedTools(namedTools);
+        });
+    }, [toolValues, fetchNamedTools]);
+
     useEffect(() => {
         return form.watch((values) => {
             const { data, success } = formSchema.safeParse(values);
@@ -87,12 +117,23 @@ export function ToolForm({
                                         key={index}
                                         className="flex items-center space-x-2 justify-between mt-1"
                                     >
-                                        <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full">
-                                            {tool}
+                                        <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full flex items-center gap-2">
+                                            <ToolIcon
+                                                className="w-4 h-4"
+                                                name={
+                                                    namedTools?.[tool]?.name ||
+                                                    tool
+                                                }
+                                                icon={
+                                                    namedTools?.[tool]?.metadata
+                                                        ?.icon
+                                                }
+                                            />
+                                            {namedTools?.[tool]?.name || tool}
                                         </div>
                                         <Button
                                             type="button"
-                                            variant="destructive"
+                                            variant="secondary"
                                             size="icon"
                                             onClick={() => {
                                                 const newTools =