Merge pull request #89409 from Expensify/feat/89299-list-agents

puneetlath · web-flow · commit 053ec53a312c · 2026-05-04T11:28:49.000-04:00
feat: list agents
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -786,6 +786,9 @@ const ONYXKEYS = {
         SNAPSHOT: 'snapshot_',
 
         // Shared NVPs
+        /** Collection of agent prompts keyed by agent accountID, representing agents owned by the current user */
+        SHARED_NVP_AGENT_PROMPT: 'sharedNVP_agentPrompt_',
+
         /** Collection of objects where each object represents the owner of the workspace that is past due billing AND the user is a member of. */
         SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END: 'sharedNVP_private_billingGracePeriodEnd_',
 
@@ -1308,6 +1311,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.POLICY_JOIN_MEMBER]: OnyxTypes.PolicyJoinMember;
     [ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS]: OnyxTypes.PolicyConnectionSyncProgress;
     [ONYXKEYS.COLLECTION.SNAPSHOT]: OnyxTypes.SearchResults;
+    [ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT]: OnyxTypes.AgentPrompt;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
     [ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER]: OnyxTypes.CardFeeds;
     [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -2730,9 +2730,9 @@ ${amount} für ${merchant} – ${date}`,
     },
     agentsPage: {
         title: 'Agenten',
-        subtitle: 'Automatisiere Aufgaben mit benutzerdefinierten Agenten.',
-        newAgent: 'Neue*r Agent*in',
-        emptyAgents: {title: 'Keine Agenten erstellt', subtitle: 'Hör auf, Dinge manuell zu erledigen. Weise stattdessen einen Agenten an und spare dir jede Menge Zeit.'},
+        subtitle: 'Erstelle Agents, die deinen Workflow übernehmen. Spare dir die manuelle Arbeit und gewinne stundenweise Zeit im Alltag zurück.',
+        newAgent: 'Neue:r Agent:in',
+        emptyAgents: {title: 'Keine Agenten erstellt', subtitle: 'Hör auf, Dinge manuell zu erledigen. Weise stattdessen eine:n Agent:in an und spare dir eine Menge Zeit.'},
     },
     expenseRulesPage: {
         title: 'Ausgabenregeln',
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2783,7 +2783,7 @@ const translations = {
     },
     agentsPage: {
         title: 'Agents',
-        subtitle: 'Automate tasks with custom agents.',
+        subtitle: 'Create agents to handle your workflow. Skip the manual work and get hours back in your day.',
         newAgent: 'New agent',
         emptyAgents: {
             title: 'No agents created',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -2735,10 +2735,10 @@ ${amount} pour ${merchant} - ${date}`,
         bankAccountLastFour: (lastFour: string) => `Compte bancaire • ${lastFour}`,
     },
     agentsPage: {
-        title: 'Agent·e·s',
-        subtitle: 'Automatisez les tâches avec des agents personnalisés.',
+        title: 'Agents',
+        subtitle: 'Créez des agents pour gérer votre flux de travail. Évitez le travail manuel et gagnez des heures dans votre journée.',
         newAgent: 'Nouvel agent',
-        emptyAgents: {title: 'Aucun agent créé', subtitle: 'Arrêtez de tout faire manuellement. Donnez plutôt des instructions à un agent et gagnez beaucoup de temps.'},
+        emptyAgents: {title: 'Aucun agent créé', subtitle: 'Arrêtez de faire les choses manuellement. Donnez plutôt des instructions à un agent et gagnez beaucoup de temps.'},
     },
     expenseRulesPage: {
         title: 'Règles de dépenses',
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -2725,9 +2725,9 @@ ${amount} per ${merchant} - ${date}`,
     },
     agentsPage: {
         title: 'Agenti',
-        subtitle: 'Automatizza le attività con agenti personalizzati.',
+        subtitle: 'Crea agenti per gestire il tuo flusso di lavoro. Elimina il lavoro manuale e recupera ore della tua giornata.',
         newAgent: 'Nuovo agente',
-        emptyAgents: {title: 'Nessun agente creato', subtitle: 'Smetti di fare le cose manualmente. Dai invece istruzioni a un agente e risparmia un sacco di tempo.'},
+        emptyAgents: {title: 'Nessun agente creato', subtitle: 'Smetti di fare le cose manualmente. Dai istruzioni a un agente e risparmia un sacco di tempo.'},
     },
     expenseRulesPage: {
         title: 'Regole spese',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -2697,8 +2697,8 @@ ${date} の ${merchant} への ${amount}`,
         bankAccountLastFour: (lastFour: string) => `銀行口座・${lastFour}`,
     },
     agentsPage: {
-        title: 'エージェント',
-        subtitle: 'カスタムエージェントでタスクを自動化。',
+        title: '担当者',
+        subtitle: 'ワークフローを処理するエージェントを作成しましょう。手作業を省いて、1日の時間を何時間も取り戻せます。',
         newAgent: '新しいエージェント',
         emptyAgents: {title: 'エージェントは作成されていません', subtitle: '手作業はやめて、代わりにエージェントに指示を出して、時間を大幅に節約しましょう。'},
     },
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -95,7 +95,7 @@ const translations: TranslationDeepObject<typeof en> = {
         optional: 'Optioneel',
         new: 'Nieuw',
         newFeature: 'Nieuwe functie',
-        beta: 'Beta',
+        beta: 'Bèta',
         search: 'Zoeken',
         reports: 'Rapporten',
         spend: 'Uitgaven',
@@ -2723,7 +2723,7 @@ ${amount} voor ${merchant} - ${date}`,
     },
     agentsPage: {
         title: 'Agenten',
-        subtitle: 'Automatiseer taken met aangepaste agents.',
+        subtitle: 'Maak agents aan om je workflow af te handelen. Sla het handmatige werk over en krijg uren van je dag terug.',
         newAgent: 'Nieuwe medewerker',
         emptyAgents: {title: 'Geen agents aangemaakt', subtitle: 'Stop met dingen handmatig doen. Geef in plaats daarvan een opdracht aan een agent en bespaar jezelf veel tijd.'},
     },
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -2716,9 +2716,9 @@ ${amount} dla ${merchant} - ${date}`,
     },
     agentsPage: {
         title: 'Agenci',
-        subtitle: 'Automatyzuj zadania za pomocą niestandardowych agentów.',
+        subtitle: 'Twórz agentów do obsługi swojego przepływu pracy. Pomiń ręczną pracę i odzyskaj godziny w ciągu dnia.',
         newAgent: 'Nowy agent',
-        emptyAgents: {title: 'Nie utworzono agentów', subtitle: 'Przestań robić wszystko ręcznie. Wydaj instrukcje agentowi i zaoszczędź mnóstwo czasu.'},
+        emptyAgents: {title: 'Nie utworzono agentów', subtitle: 'Przestań robić wszystko ręcznie. Zamiast tego wydaj polecenia agentowi i zaoszczędź mnóstwo czasu.'},
     },
     expenseRulesPage: {
         title: 'Reguły wydatków',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -2716,7 +2716,7 @@ ${amount} para ${merchant} - ${date}`,
     },
     agentsPage: {
         title: 'Agentes',
-        subtitle: 'Automatize tarefas com agentes personalizados.',
+        subtitle: 'Crie agentes para gerenciar seu fluxo de trabalho. Pule o trabalho manual e ganhe horas de volta no seu dia.',
         newAgent: 'Novo agente',
         emptyAgents: {title: 'Nenhum agente criado', subtitle: 'Pare de fazer tudo manualmente. Instrua um agente e economize muito tempo.'},
     },
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -2648,9 +2648,9 @@ ${amount}，商户：${merchant} - 日期：${date}`,
     },
     agentsPage: {
         title: '代理人',
-        subtitle: '使用自定义代理自动化任务。',
-        newAgent: '新代理',
-        emptyAgents: {title: '未创建代理', subtitle: '别再手动处理这些事情了。交给智能助理去执行，帮你节省大量时间。'},
+        subtitle: '通过自定义智能体自动化处理任务。',
+        newAgent: '新代理人',
+        emptyAgents: {title: '尚未创建代理', subtitle: '别再手动处理这些事情了。交给智能代理去执行，为自己节省大量时间。'},
     },
     expenseRulesPage: {
         title: '报销规则',
diff --git a/src/pages/settings/Agents/AgentsListRow.tsx b/src/pages/settings/Agents/AgentsListRow.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {View} from 'react-native';
+import ReportActionAvatars from '@components/ReportActionAvatars';
+import Text from '@components/Text';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+
+type AgentsListRowProps = {
+    /** Account ID of the agent */
+    accountID: number;
+
+    /** Display name of the agent */
+    displayName: string;
+
+    /** Login email of the agent */
+    login: string;
+};
+
+function AgentsListRow({accountID, displayName, login}: AgentsListRowProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+
+    return (
+        <View style={[styles.selectionListPressableItemWrapper, styles.mb2, styles.gap3]}>
+            <ReportActionAvatars
+                accountIDs={[accountID]}
+                size={CONST.AVATAR_SIZE.LARGE_NORMAL}
+                shouldShowTooltip={false}
+                singleAvatarContainerStyle={[StyleUtils.getWidthAndHeightStyle(variables.avatarSizeLargeNormal)]}
+            />
+            <View style={[styles.flex1, styles.gap1]}>
+                <Text
+                    numberOfLines={1}
+                    style={styles.textStrong}
+                >
+                    {displayName}
+                </Text>
+                <Text
+                    numberOfLines={1}
+                    style={styles.mutedNormalTextLabel}
+                >
+                    {login}
+                </Text>
+            </View>
+            {/* Action buttons are deferred to R1.3 per phased rollout plan */}
+        </View>
+    );
+}
+
+export default AgentsListRow;
diff --git a/src/pages/settings/Agents/AgentsPage.tsx b/src/pages/settings/Agents/AgentsPage.tsx
@@ -1,18 +1,31 @@
 import React, {useEffect} from 'react';
+import {FlatList, View} from 'react-native';
+import Button from '@components/Button';
 import GenericEmptyStateComponent from '@components/EmptyStateComponent/GenericEmptyStateComponent';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
 import useDocumentTitle from '@hooks/useDocumentTitle';
 import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import {openAgentsPage} from '@userActions/Agent';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import AgentsListRow from './AgentsListRow';
+
+type AgentItem = {
+    accountID: number;
+    displayName: string;
+    login: string;
+};
 
 function AgentsPage() {
     const {translate} = useLocalize();
@@ -24,13 +37,52 @@ function AgentsPage() {
     const isCustomAgentEnabled = isBetaEnabled(CONST.BETAS.CUSTOM_AGENT);
     useDocumentTitle(translate('agentsPage.title'));
 
+    const [agentPrompts] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT);
+    const personalDetailsList = usePersonalDetails();
+
     useEffect(() => {
         if (!isCustomAgentEnabled) {
             return;
         }
         openAgentsPage();
     }, [isCustomAgentEnabled]);
 
+    const agentItems: AgentItem[] = Object.keys(agentPrompts ?? {})
+        .map((key) => {
+            const accountID = Number(key.slice(ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT.length));
+            const details = personalDetailsList?.[accountID];
+            if (!details) {
+                return null;
+            }
+            return {
+                accountID,
+                displayName: details.displayName ?? details.login ?? '',
+                login: details.login ?? '',
+            };
+        })
+        .filter((item): item is AgentItem => item !== null);
+
+    const renderItem = ({item}: {item: AgentItem}) => (
+        <AgentsListRow
+            accountID={item.accountID}
+            displayName={item.displayName}
+            login={item.login}
+        />
+    );
+
+    const keyExtractor = (item: AgentItem) => String(item.accountID);
+
+    const hasAgents = agentItems.length > 0;
+
+    const newAgentButton = (
+        <Button
+            success
+            icon={icons.Plus}
+            text={translate('agentsPage.newAgent')}
+            onPress={() => {}}
+        />
+    );
+
     if (!isCustomAgentEnabled) {
         return <NotFoundPage />;
     }
@@ -41,33 +93,42 @@ function AgentsPage() {
             style={[styles.defaultModalContainer]}
             testID={AgentsPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
+            shouldMobileOfflineIndicatorStickToBottom={false}
             offlineIndicatorStyle={styles.mtAuto}
         >
             <HeaderWithBackButton
                 icon={illustrations.AiBot}
                 onBackButtonPress={() => Navigation.goBack()}
                 shouldShowBackButton={shouldUseNarrowLayout}
                 shouldUseHeadlineHeader
+                shouldDisplaySearchRouter
+                shouldDisplayHelpButton
                 title={translate('agentsPage.title')}
-            />
-            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}>
-                <GenericEmptyStateComponent
-                    headerMedia={illustrations.TvScreenRobot}
-                    title={translate('agentsPage.emptyAgents.title')}
-                    subtitle={translate('agentsPage.emptyAgents.subtitle')}
-                    subtitleStyles={styles.agentsPageEmptyStateSubtitle}
-                    headerStyles={styles.emptyStateCardIllustrationContainer}
-                    headerContentStyles={styles.agentsPageEmptyStateIllustration}
-                    buttons={[
-                        {
-                            success: true,
-                            buttonAction: () => {},
-                            icon: icons.Plus,
-                            buttonText: translate('agentsPage.newAgent'),
-                        },
-                    ]}
-                />
-            </ScrollView>
+            >
+                {!shouldUseNarrowLayout && newAgentButton}
+            </HeaderWithBackButton>
+            {shouldUseNarrowLayout && <View style={[styles.ph5, styles.pb3]}>{newAgentButton}</View>}
+            {hasAgents ? (
+                <>
+                    <Text style={[styles.textSupporting, styles.ph5, styles.pb3, styles.pt3]}>{translate('agentsPage.subtitle')}</Text>
+                    <FlatList
+                        data={agentItems}
+                        renderItem={renderItem}
+                        keyExtractor={keyExtractor}
+                    />
+                </>
+            ) : (
+                <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}>
+                    <GenericEmptyStateComponent
+                        headerMedia={illustrations.TvScreenRobot}
+                        title={translate('agentsPage.emptyAgents.title')}
+                        subtitle={translate('agentsPage.emptyAgents.subtitle')}
+                        subtitleStyles={styles.agentsPageEmptyStateSubtitle}
+                        headerStyles={styles.emptyStateCardIllustrationContainer}
+                        headerContentStyles={styles.agentsPageEmptyStateIllustration}
+                    />
+                </ScrollView>
+            )}
         </ScreenWrapper>
     );
 }
diff --git a/src/types/onyx/AgentPrompt.ts b/src/types/onyx/AgentPrompt.ts
@@ -0,0 +1,7 @@
+/** Model of an agent's prompt data stored as a shared NVP */
+type AgentPrompt = {
+    /** The system prompt defining the agent's behavior */
+    prompt: string;
+};
+
+export default AgentPrompt;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
@@ -2,6 +2,7 @@ import type {OnboardingPurpose} from '@libs/actions/Welcome/OnboardingFlow';
 import type {FileObject} from '@src/types/utils/Attachment';
 import type Account from './Account';
 import type AccountData from './AccountData';
+import type AgentPrompt from './AgentPrompt';
 import type AppReview from './AppReview';
 import type {ApprovalWorkflowOnyx} from './ApprovalWorkflow';
 import type {AssignCard, AssignCardData} from './AssignCard';
@@ -399,4 +400,5 @@ export type {
     DeviceBiometrics,
     LocallyProcessed3DSChallengeReviews,
     InitiatingBankAccountUnlock,
+    AgentPrompt,
 };
diff --git a/tests/unit/pages/settings/AgentsPageTest.tsx b/tests/unit/pages/settings/AgentsPageTest.tsx
