diff --git a/ui/admin/app/components/tools/ToolCatalog.tsx b/ui/admin/app/components/tools/ToolCatalog.tsx
index b85b29ae2..cb7894895 100644
--- a/ui/admin/app/components/tools/ToolCatalog.tsx
+++ b/ui/admin/app/components/tools/ToolCatalog.tsx
@@ -1,4 +1,5 @@
import { AlertTriangleIcon, PlusIcon } from "lucide-react";
+import { useMemo } from "react";
import useSWR from "swr";
import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
@@ -41,6 +42,19 @@ export function ToolCatalog({
{ fallbackData: {} }
);
+ const sortedCategories = useMemo(() => {
+ return Object.entries(toolCategories).sort(
+ ([nameA, categoryA], [nameB, categoryB]): number => {
+ const aHasBundle = categoryA.bundleTool ? 1 : 0;
+ const bHasBundle = categoryB.bundleTool ? 1 : 0;
+
+ if (aHasBundle !== bHasBundle) return bHasBundle - aHasBundle;
+
+ return nameA.localeCompare(nameB);
+ }
+ );
+ }, [toolCategories]);
+
if (isLoading) return ;
return (
@@ -68,17 +82,15 @@ export function ToolCatalog({
No results found.
{" "}
- {Object.entries(toolCategories).map(
- ([category, categoryTools]) => (
-
- )
- )}
+ {sortedCategories.map(([category, categoryTools]) => (
+
+ ))}
);