+
+ {visibleScopes.length === 1 ? (
+
+ {scopeLabel(visibleScopes[0])}
+
+ {scopeCounts[visibleScopes[0]]}
+
+
+ ) : (
+
+ {visibleScopes.map((scope) => (
+
+ ))}
+
+ )}
+
+ {t('agents.apiToolsSelected', {
+ count: selectedCount,
+ })}
+
+
+
+
+
+ setQuery(event.target.value)}
+ placeholder={t('agents.apiToolsSearch')}
+ className="pl-9"
+ />
+
+
+ {!catalogAvailable && (
+
+ {activeScope === 'event' || activeScope === 'platform'
+ ? t('agents.apiToolsCatalogUnavailable')
+ : t('agents.hostToolsCatalogUnavailable')}
+
+ )}
+ {catalogAvailable && !filteredEntries.length && (
+
+ {t('agents.apiToolsNoResults')}
+
+ )}
+ {catalogAvailable && filteredEntries.length > 0 && (
+
+ {groupedEntries.map(([group, groupTools], groupIndex) => (
+
0 && 'border-t')}>
+
+ {groupLabel(group)}
+
+
+ {groupTools.map((tool) => {
+ const checked =
+ tool.kind === 'platform'
+ ? selectedPlatform.has(tool.name)
+ : selectedHost.has(tool.name);
+ const expanded = expandedTool === tool.key;
+ const parameterNames = Object.keys(
+ (tool.parameters.properties as
+ | Record
+ | undefined) ?? {},
+ );
+ return (
+
+
+
+ {expanded && (
+
+
+ {tool.name}
+
+ {tool.api &&
API: {tool.api}
}
+ {tool.kind === 'host' && (
+
+ {t('agents.apiToolSource')}:{' '}
+ {groupLabel(tool.group)}
+
+ )}
+ {tool.eventPatterns && (
+
+ {t('agents.apiToolEvents')}:{' '}
+ {tool.eventPatterns.join(', ')}
+
+ )}
+
+ {t('agents.apiToolParameters')}:{' '}
+ {parameterNames.length
+ ? parameterNames.join(', ')
+ : t('agents.apiToolNoParameters')}
+
+
+ )}
+
+ );
+ })}
+
+
+ ))}
+
+ )}
+
+ );
+}
diff --git a/web/src/app/home/agents/components/AgentCreateContent.tsx b/web/src/app/home/agents/components/AgentCreateContent.tsx
new file mode 100644
index 000000000..9c5fcf852
--- /dev/null
+++ b/web/src/app/home/agents/components/AgentCreateContent.tsx
@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Bot, Workflow, Puzzle } from 'lucide-react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { AgentKind } from '@/app/infra/entities/api';
+import { Button } from '@/components/ui/button';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import EmojiPicker from '@/components/ui/emoji-picker';
+import ProcessorTypeDiagram from './ProcessorTypeDiagram';
+
+export default function AgentCreateContent({
+ onCreated,
+}: {
+ onCreated: (agentId: string) => void;
+}) {
+ const { t } = useTranslation();
+ const [kind, setKind] = useState