capabilitys/listeners use name from the BE (#7)

src/routes/agent/components/Capabilities/ApplyTag/ApplyTag.tsx

@@ -8,6 +8,7 @@ import { cn } from '@ui/utils/cn.ts';
 import { Icon } from '@ui/media/Icon';
 import { Combobox } from '@ui/form/Combobox';
 import { Plus } from '@ui/media/icons/Plus.tsx';
+import { CapabilityType } from '@graphql/types';
 import { useStore } from '@shared/hooks/useStore';
 import { Tooltip } from '@ui/overlay/Tooltip/Tooltip.tsx';
 import { Tag, TagLabel, TagRightButton } from '@ui/presentation/Tag';
@@ -21,9 +22,15 @@ export const ApplyTag = observer(() => {
     ? store.tags.getById(usecase.selectedTag.value)
     : null;
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   return (
     <div className='flex flex-col gap-4'>
-      <p className='font-semibold text-sm'>Apply a tag to company</p>
+      <p className='font-semibold text-sm'>
+        {agent?.getCapabilityName(CapabilityType.ApplyTagToCompany)}
+      </p>
 
       {usecase.listenerErrors && (
         <div className='bg-error-50 text-error-700 px-2 py-1 rounded-[4px] mb-4'>

src/routes/agent/components/Capabilities/DetectSupportWebVisit/DetectSupportWebVisit.tsx

@@ -9,7 +9,10 @@ import { Input } from '@ui/form/Input';
 import { Button } from '@ui/form/Button/Button';
 import { IconButton } from '@ui/form/IconButton';
 import { useStore } from '@shared/hooks/useStore';
-import { AgentType } from '@shared/types/__generated__/graphql.types';
+import {
+  AgentType,
+  CapabilityType,
+} from '@shared/types/__generated__/graphql.types';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -42,11 +45,17 @@ export const DetectSupportWebVisit = observer(() => {
     }
   };
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   return (
     <>
       <div className='flex flex-col gap-4'>
         <div>
-          <p className='font-semibold text-sm'>Detect support web visit</p>
+          <p className='font-semibold text-sm'>
+            {agent.getCapabilityName(CapabilityType.IdentifyWebVisitor)}
+          </p>
 
           {usecase.listenerErrors && (
             <div className='bg-error-50 text-error-700 px-2 py-1 rounded-[4px] mb-4'>

src/routes/agent/components/Capabilities/EvaluateCompanyIcpFit/EvaluateCompanyICPFit.tsx

@@ -8,7 +8,9 @@ import { EditIcpDisqualificationCriteriaUsecase } from '@domain/usecases/agents/
 
 import { Icon } from '@ui/media/Icon';
 import { Button } from '@ui/form/Button/Button';
+import { CapabilityType } from '@graphql/types';
 import { IconButton } from '@ui/form/IconButton';
+import { useStore } from '@shared/hooks/useStore';
 import { Textarea } from '@ui/form/Textarea/Textarea';
 import { getFormattedLink } from '@utils/getExternalLink.ts';
 import { Menu, MenuItem, MenuList, MenuButton } from '@ui/overlay/Menu/Menu';
@@ -20,16 +22,20 @@ import {
 } from '@ui/utils/ScrollArea';
 
 import { IdealCustomersModal } from './IdealCustomersModal';
-
 const disqualificationCriteriaUsecase =
   new EditIcpDisqualificationCriteriaUsecase();
 const qualificationCriteriaUsecase = new EditIcpQualificationCriteriaUsecase();
 const editIcpDomainsUsecase = new EditIcpDomainsUsecase();
 
 export const EvaluateCompanyIcpFit = observer(() => {
+  const store = useStore();
   const { id } = useParams<{ id: string }>();
   const [isOpen, setIsOpen] = useState(false);
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   useEffect(() => {
     if (!id) return;
     disqualificationCriteriaUsecase.init(id);
@@ -39,7 +45,9 @@ export const EvaluateCompanyIcpFit = observer(() => {
 
   return (
     <article className='flex flex-col gap-4 -mr-4'>
-      <h1 className='text-sm font-medium pr-4'>Evaluate company ICP fit</h1>
+      <h1 className='text-sm font-medium pr-4'>
+        {agent.getCapabilityName(CapabilityType.IcpQualify)}
+      </h1>
       <ScrollAreaRoot>
         <ScrollAreaViewport className=''>
           <div className='h-[90vh] pr-4 flex flex-col gap-4'>

src/routes/agent/components/Capabilities/SendSlackNotificationCapability/SendSlackNotificationCapability.tsx

@@ -13,23 +13,31 @@ import { Switch } from '@ui/form/Switch';
 import { Combobox } from '@ui/form/Combobox';
 import { Slack } from '@ui/media/logos/Slack';
 import { Button } from '@ui/form/Button/Button';
+import { CapabilityType } from '@graphql/types';
+import { useStore } from '@shared/hooks/useStore';
 import { Tag, TagLabel } from '@ui/presentation/Tag';
 import { Popover, PopoverTrigger, PopoverContent } from '@ui/overlay/Popover';
 
-import { DisconnectSlackMenu } from './DisconnectSlackMenu.tsx';
+import { DisconnectSlackMenu } from './DisconnectSlackMenu';
 
 export const SendSlackNotificationCapability = observer(() => {
+  const store = useStore();
   const { id } = useParams<{ id: string }>();
 
   const usecase = useMemo(() => new AddSlackChannelUsecase(id!), [id]);
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   if (!usecase.isSlackEnabled) {
     return (
       <div>
         <div className='flex items-center justify-between mb-4'>
           <h2 className='text-sm font-medium '>
-            Send Slack notification{` `}
-            <span className='text-grayModern-500'>(optional)</span>
+            {agent.getCapabilityName(
+              CapabilityType.WebVisitorSendSlackNotification,
+            )}
           </h2>
           <Switch
             size='sm'
@@ -71,8 +79,9 @@ export const SendSlackNotificationCapability = observer(() => {
     <div>
       <div className='flex items-center justify-between mb-4'>
         <h2 className='text-sm font-medium '>
-          Send Slack notification{` `}
-          <span className='text-grayModern-500'>(optional)</span>
+          {agent.getCapabilityName(
+            CapabilityType.WebVisitorSendSlackNotification,
+          )}
         </h2>
         <Switch
           size='sm'

src/routes/agent/components/Listeners/NewMeetingRecording.tsx

@@ -15,6 +15,7 @@ import { useStore } from '@shared/hooks/useStore';
 import { getOptionClassNames } from '@ui/form/Select';
 import logoCustomerOs from '@shared/assets/customer-os-small.png';
 import { Popover, PopoverContent, PopoverTrigger } from '@ui/overlay/Popover';
+import { AgentListenerEvent } from '@shared/types/__generated__/graphql.types';
 
 const usecase = new NewMeetingRecordingUsecase();
 
@@ -30,9 +31,15 @@ export const NewMeetingRecording = observer(() => {
     };
   }, [id]);
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   return (
     <div>
-      <h2 className='text-sm font-medium mb-4'>Detect new meeting recording</h2>
+      <h2 className='text-sm font-medium mb-4'>
+        {agent.getListenerName(AgentListenerEvent.NewMeetingRecording)}
+      </h2>
 
       {usecase.listenerErrors && (
         <div className='bg-error-50 text-error-700 px-2 py-1 rounded-[4px] mb-4'>

src/routes/agent/components/Listeners/NewWebSessionListener.tsx

@@ -9,8 +9,10 @@ import { Icon } from '@ui/media/Icon';
 import { Input } from '@ui/form/Input';
 import { Button } from '@ui/form/Button/Button';
 import { IconButton } from '@ui/form/IconButton';
+import { useStore } from '@shared/hooks/useStore';
 import { useCopyToClipboard } from '@shared/hooks/useCopyToClipboard';
 import { Menu, MenuList, MenuItem, MenuButton } from '@ui/overlay/Menu/Menu';
+import { AgentListenerEvent } from '@shared/types/__generated__/graphql.types';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -30,13 +32,18 @@ const SCRIPT = `<script id="customeros-tracker" type="text/javascript">
 })(window, "https://app.customeros.ai/analytics-0.1.js", "script");</script>`;
 
 export const NewWebSessionListener = observer(() => {
+  const store = useStore();
   const { id } = useParams<{ id: string }>();
 
   const usecase = useMemo(() => new AddWebsiteToTrackUsecase(id!), [id]);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [_, copyToClipboard] = useCopyToClipboard();
 
+  const agent = store.agents.getById(id ?? '');
+
+  if (!agent) return null;
+
   useKey('Escape', usecase.close, {
     when: usecase.isOpen,
   });
@@ -45,7 +52,7 @@ export const NewWebSessionListener = observer(() => {
     <>
       <div>
         <h2 className='text-sm font-medium mb-4'>
-          Track and identify website visitors
+          {agent.getListenerName(AgentListenerEvent.NewWebSession)}
         </h2>
 
         {usecase.listenerErrors && (

src/store/Agents/Agent.dto.ts

@@ -82,6 +82,14 @@ export class Agent extends Entity<AgentDatum> {
     this.commit({ syncOnly: true });
   }
 
+  public getCapabilityName(type: CapabilityType) {
+    return this.value.capabilities.find((c) => c.type === type)?.name;
+  }
+
+  public getListenerName(type: AgentListenerEvent) {
+    return this.value.listeners.find((l) => l.type === type)?.name;
+  }
+
   @action
   public setListenerConfig(
     listenerType: AgentListenerEvent,