[Due for payment 2026-06-08] [$250] Add copilot and edit prompt buttons to agent profile

[puneetlath]

Add two buttons when click on an agent's profile if you are the owner. One to see and edit the agent's prompt. Another to copilot into the agent's account. Prompt setting shown below.

The buttons should look the same as here in the edit agent dialog: #91343

The prompt one should be titled Custom instructions. And the copilot one should be a button row.

Issue Owner

Current Issue Owner: @ShridharGoel

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022057566036871827143
• Upwork Job ID: 2057566036871827143
• Last Price Increase: 2026-05-21

[NicolasBonet]

@MelvinBot investígate this

[MelvinBot]

Proposal

Problem: When viewing an agent's profile (via ProfilePage), there are no buttons to edit the agent's prompt or copilot into the agent's account, even if the viewer is the agent's owner.

Solution: In ProfilePage.tsx, detect when the viewed profile belongs to an agent owned by the current user, and conditionally render two new buttons:

1. "Custom instructions" — navigates to the existing EditPromptPage via ROUTES.SETTINGS_AGENTS_EDIT_PROMPT.getRoute(accountID)
2. Copilot button — calls the existing connect() delegate action to switch into the agent's account

Implementation details

Detecting agent ownership:

• The profile's login can be checked with isAgentEmail() (matches agent_\d+@expensify.ai)
• Ownership is determined by whether the agent's accountID exists in the current user's ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT collection (same pattern used in AgentsPage.tsx:55-74)
• Add a useOnyx call for SHARED_NVP_AGENT_PROMPT_{accountID} in ProfilePage — if it returns data, the current user owns this agent

Where to render the buttons:

• Below the PromotedActionsBar (around line 214-217), add a conditional block when isAgentEmail(login) && agentPrompt exists
• Style the buttons to match the edit agent dialog in [Due for payment 2026-06-08] [$250] Add buttons to chat and copilot with agents #91343 (same MenuItem / button row pattern used in EditAgentPage.tsx)

Copilot action:

• Reuse the connect() function from Delegate.ts:132, passing the agent's email and delegated access info

Files to modify:

• src/pages/ProfilePage.tsx — add agent detection, Onyx hook, and two new buttons
• Possibly src/CONST.ts or translation files if new translation keys are needed for "Custom instructions" button label

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[KJ21-ENG]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the owner opens one of their agent's profile pages, the profile only shows the generic profile actions/details. There is no way from that profile to view or edit the agent's custom instructions, and there is no row to copilot into the agent account.

What is the root cause of that problem?

The public profile screen is shared for normal users and agent accounts. It builds the profile around personal details, promoted report actions, and generic profile menu rows, but it never subscribes to the viewed account's agent prompt NVP or renders any agent-owner controls:

App/src/pages/ProfilePage.tsx

Lines 73 to 174 in eaaffe3

	function ProfilePage({route}: ProfilePageProps) {
	const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: reportsSelector});
	const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
	const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
	const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
	const [account] = useOnyx(ONYXKEYS.ACCOUNT);
	const [isDebugModeEnabled = false] = useOnyx(ONYXKEYS.IS_DEBUG_MODE_ENABLED);
	const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
	const [betas] = useOnyx(ONYXKEYS.BETAS);
	const [isSelfTourViewed] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
	const guideCalendarLink = account?.guideDetails?.calendarLink ?? '';
	const expensifyIcons = useMemoizedLazyExpensifyIcons(['Bug', 'Pencil', 'Phone']);
	const accountID = Number(route.params?.accountID ?? CONST.DEFAULT_NUMBER_ID);
	const isCurrentUser = currentUserAccountID === accountID;
	const reportID = isCurrentUser ? findSelfDMReportID() : getChatByParticipants(currentUserAccountID ? [accountID, currentUserAccountID] : [], reports)?.reportID;
	const reportKey = isAnonymousUserSession() || !reportID ? (`${ONYXKEYS.COLLECTION.REPORT}0` as const) : (`${ONYXKEYS.COLLECTION.REPORT}${reportID}` as const);
	const [report] = useOnyx(reportKey);
	const styles = useThemeStyles();
	const {translate, formatPhoneNumber} = useLocalize();
	const isValidAccountID = isValidAccountRoute(accountID);
	const loginParams = route.params?.login;
	let details: OnyxEntry<PersonalDetails>;
	// Check if we have the personal details already in Onyx
	if (personalDetails?.[accountID]) {
	details = personalDetails?.[accountID] ?? undefined;
	} else if (!loginParams) {
	// Check if we have the login param
	details = isValidAccountID ? undefined : {accountID: 0};
	} else {
	// Look up the personal details by login
	const foundDetails = Object.values(personalDetails ?? {}).find((personalDetail) => personalDetail?.login === loginParams?.toLowerCase());
	if (foundDetails) {
	details = foundDetails;
	} else {
	// If we don't have the personal details in Onyx, we can create an optimistic account
	const optimisticAccountID = generateAccountID(loginParams);
	details = {accountID: optimisticAccountID, login: loginParams, displayName: loginParams};
	}
	}
	const displayName = formatPhoneNumber(getDisplayNameOrDefault(details, undefined, undefined, isCurrentUser, translate('common.you').toLowerCase()));
	const fallbackIcon = details?.fallbackIcon ?? '';
	const login = details?.login ?? '';
	const timezone = details?.timezone;
	const reportRecipient = personalDetails?.[accountID];
	const isParticipantValidated = reportRecipient?.validated ?? false;
	// If we have a reportID param this means that we
	// arrived here via the ParticipantsPage and should be allowed to navigate back to it
	const shouldShowLocalTime = !hasAutomatedExpensifyAccountIDs([accountID]) && !isEmptyObject(timezone) && isParticipantValidated;
	let pronouns = details?.pronouns ?? '';
	if (pronouns?.startsWith(CONST.PRONOUNS.PREFIX)) {
	const localeKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
	pronouns = translate(`pronouns.${localeKey}` as TranslationPaths);
	}
	const isSMSLogin = Str.isSMSLogin(login);
	const phoneNumber = getPhoneNumber(details);
	const hasAvatar = !!details?.avatar;
	const isLoading = !!personalDetailsMetadata?.[accountID]?.isLoading || isEmptyObject(details);
	const shouldShowBlockingView = (!isValidAccountID && !isLoading) || CONST.RESTRICTED_ACCOUNT_IDS.includes(accountID);
	const statusEmojiCode = details?.status?.emojiCode ?? '';
	const statusText = details?.status?.text ?? '';
	const hasStatus = !!statusEmojiCode;
	const statusContent = `${statusEmojiCode} ${statusText}`;
	const navigateBackTo = route?.params?.backTo;
	const notificationPreferenceValue = getReportNotificationPreference(report);
	const shouldShowNotificationPreference = !isEmptyObject(report) && !isCurrentUser && !isReportHiddenForCurrentUser(notificationPreferenceValue);
	const notificationPreference = shouldShowNotificationPreference
	? translate(`notificationPreferencesPage.notificationPreferences.${notificationPreferenceValue}` as TranslationPaths)
	: '';
	const isConcierge = isConciergeChatReport(report);
	// eslint-disable-next-line rulesdir/prefer-early-return
	useEffect(() => {
	// Concierge's profile page information is already available in CONST.ts
	if (isValidAccountRoute(accountID) && !loginParams && !isConcierge) {
	openPublicProfilePage(accountID);
	}
	}, [accountID, loginParams, isConcierge]);
	const promotedActions: PromotedAction[] = [];
	if (report) {
	promotedActions.push(PromotedActions.pin(report));
	}
	// If it's a self DM, we only want to show the Message button if the self DM report exists because we don't want to optimistically create a report for self DM
	if ((!isCurrentUser || report) && !isAnonymousUserSession()) {
	promotedActions.push(
	PromotedActions.message({reportID: report?.reportID, personalDetails, accountID, login: loginParams, currentUserAccountID, introSelected, isSelfTourViewed, betas}),
	);
	}

The render path then only adds the current user's "Edit your profile" row, notification preferences, private notes, Concierge calendar, and debug rows:

App/src/pages/ProfilePage.tsx

Lines 254 to 300 in eaaffe3

	{isCurrentUser && (
	<MenuItem
	shouldShowRightIcon
	title={translate('common.editYourProfile')}
	icon={expensifyIcons.Pencil}
	onPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE.getRoute(Navigation.getActiveRoute()))}
	/>
	)}
	{shouldShowNotificationPreference && (
	<MenuItemWithTopDescription
	shouldShowRightIcon
	title={notificationPreference}
	description={translate('notificationPreferencesPage.label')}
	onPress={() => {
	Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.NOTIFICATION_PREFERENCES.getRoute(report.reportID)));
	}}
	/>
	)}
	{Permissions.canUsePrivateNotes() && !isEmptyObject(report) && !!report.reportID && !isCurrentUser && (
	<MenuItem
	title={`${translate('privateNotes.title')}`}
	titleStyle={styles.flex1}
	icon={expensifyIcons.Pencil}
	onPress={() => navigateToPrivateNotes(report, currentUserAccountID, navigateBackTo)}
	wrapperStyle={styles.breakAll}
	shouldShowRightIcon
	brickRoadIndicator={hasErrorInPrivateNotes(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
	/>
	)}
	{isConcierge && !!guideCalendarLink && (
	<MenuItem
	title={translate('videoChatButtonAndMenu.tooltip')}
	icon={expensifyIcons.Phone}
	isAnonymousAction={false}
	onPress={callFunctionIfActionIsAllowed(() => {
	openExternalLink(guideCalendarLink);
	})}
	/>
	)}
	{!!report?.reportID && !!isDebugModeEnabled && (
	<MenuItem
	title={translate('debug.debug')}
	icon={expensifyIcons.Bug}
	shouldShowRightIcon
	onPress={() => Navigation.navigate(ROUTES.DEBUG_REPORT.getRoute(report.reportID))}
	/>
	)}

The agent prompt data and prompt editor already exist, but they are only used from the agent settings/edit flow. EditAgentPage reads SHARED_NVP_AGENT_PROMPT{accountID} and navigates to SETTINGS_AGENTS_EDIT_PROMPT:

App/src/pages/settings/Agents/EditAgentPage.tsx

Lines 31 to 39 in eaaffe3

	const accountID = route.params.accountID;
	const [agent] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`);
	const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {selector: (list) => list?.[accountID]});
	const {showConfirmModal} = useConfirmModal();
	const handleBackPress = () => Navigation.goBack();
	const handleEditAvatarPress = () => Navigation.navigate(ROUTES.SETTINGS_AGENTS_EDIT_AVATAR.getRoute(accountID));
	const handleEditNamePress = () => Navigation.navigate(ROUTES.SETTINGS_AGENTS_EDIT_NAME.getRoute(accountID));
	const handleEditPromptPress = () => Navigation.navigate(ROUTES.SETTINGS_AGENTS_EDIT_PROMPT.getRoute(accountID));

App/src/pages/settings/Agents/EditAgentPage.tsx

Lines 96 to 107 in eaaffe3

	<OfflineWithFeedback
	errors={agent?.promptErrors}
	errorRowStyles={[styles.mh5, styles.mb2]}
	onClose={() => clearAgentPromptUpdateError(accountID)}
	>
	<MenuItemWithTopDescription
	description={translate('editAgentPage.instructions')}
	title={agent?.prompt?.trim() ?? ''}
	shouldShowRightIcon
	onPress={handleEditPromptPress}
	numberOfLinesTitle={10}
	/>

The prompt editor itself can edit any agent account ID passed through the existing route:

App/src/pages/settings/Agents/Fields/EditPromptPage.tsx

Lines 25 to 42 in eaaffe3

	function EditPromptPage({route}: EditPromptPageProps) {
	const {translate} = useLocalize();
	const styles = useThemeStyles();
	const accountID = route.params.accountID;
	const [agentPrompt] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`);
	const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM> => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM> = {};
	if (!values[INPUT_IDS.PROMPT].trim()) {
	errors[INPUT_IDS.PROMPT] = translate('editAgentPromptPage.error.emptyPrompt');
	}
	return errors;
	};
	const handleSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM>) => {
	updateAgentPrompt(accountID, values[INPUT_IDS.PROMPT].trim(), agentPrompt?.prompt ?? '');
	Navigation.goBack(ROUTES.SETTINGS_AGENTS_EDIT.getRoute(accountID));
	};

So the missing behavior is not a missing prompt editor. The profile screen has no branch that recognizes "this viewed account is one of my agents" and surfaces the existing prompt and copilot actions there.

What changes do you think we should make in order to solve the problem?

In src/pages/ProfilePage.tsx, subscribe to ${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID} for the viewed profile and treat a non-empty entry as the owner-only signal that the current user owns this agent. Use that to render two rows below the top profile/header action area and before the generic profile detail rows:

1. A MenuItemWithTopDescription matching the edit-agent dialog style, titled/described as Custom instructions, showing agentPrompt.prompt.trim(), with a right icon and onPress={() => Navigation.navigate(ROUTES.SETTINGS_AGENTS_EDIT_PROMPT.getRoute(accountID))}.
2. A button-style MenuItem row for copilot access, using the same visual pattern introduced for the agent rows/edit-agent dialog in [Due for payment 2026-06-08] [$250] Add buttons to chat and copilot with agents #91343. The row should call the existing delegated-access connect action with the agent login, account?.delegatedAccess, current credentials/session, and active policy ID, matching existing copilot account-switcher behavior.

Add the needed translations in src/languages/en.ts, e.g. agentProfile.customInstructions: 'Custom instructions' and a copilot row title if no existing delegate.copilot / #91343 translation fits. Reuse ROUTES.SETTINGS_AGENTS_EDIT_PROMPT; do not create a second prompt screen.

Add a focused unit/UI test around ProfilePage that seeds personal details plus SHARED_NVP_AGENT_PROMPT{agentAccountID} and verifies the owner sees the Custom instructions and copilot rows, then clears that NVP and verifies the rows are hidden for a non-owner/non-agent profile.

Scope boundaries: files touched should be src/pages/ProfilePage.tsx, src/languages/en.ts plus generated translation/type updates as required, and a focused ProfilePage test. Platforms affected are all platforms through the shared profile page. This should not touch src/pages/settings/Agents/Fields/EditPromptPage.tsx, src/pages/settings/Agents/EditAgentPage.tsx, src/libs/actions/Agent.ts, server API contracts, or backend permission logic.

What alternative solutions did you explore? (Optional)

I considered routing the profile's Custom instructions row to ROUTES.SETTINGS_AGENTS_EDIT instead of directly to SETTINGS_AGENTS_EDIT_PROMPT, but the issue asks for a profile button to see and edit the prompt specifically, and the prompt editor already supports direct account-ID routing. Opening the prompt page directly is the narrower path.

I also considered adding an explicit ownerAccountID or isOwnedByCurrentUser field to AgentPrompt, but the client already receives SHARED_NVP_AGENT_PROMPT for the owner's agents and the backend should remain the permission source. The profile UI can stay narrow by rendering these rows only when that owner-scoped NVP is present.

[melvin-bot]

Current assignee @ShridharGoel is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022057566036871827143

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

The agent profile view currently lacks "Custom instructions" and "Copilot" action buttons that are available in the edit agent dialog. The profile screen for agents owned by the current user needs these two interactive elements added.

What changes do you think we should make in order to solve the problem?

I'd look at the agent profile page (likely around src/pages/ProfilePage.tsx or a similar agent-specific profile component) and the edit agent dialog (from issue #91343) to reuse the same button components.

The changes would be:

1. Identify the owner check — where the profile already checks isOwner (or equivalent), add the two buttons in that conditional block.

2. Add "Custom instructions" button — rendered as a menu item / settings row (matching the edit dialog style), navigating to the prompt editing screen:

+ {isOwner && (
+   <MenuItem
+     title={translate('agent.customInstructions')}
+     icon={Expensicons.Pencil}
+     onPress={() => Navigation.navigate(ROUTES.AGENT_CUSTOM_INSTRUCTIONS.getRoute(accountID))}
+   />
+ )}

3. Add "Copilot" button row — rendered as a MenuItemWithTopDescription or a button row (matching the edit dialog):

+ {isOwner && (
+   <MenuItem
+     title={translate('agent.copilot')}
+     icon={Expensicons.Copilot}
+     onPress={() => Navigation.navigate(ROUTES.AGENT_COPILOT.getRoute(accountID))}
+   />
+ )}

4. Add translation keys in src/languages/en.ts and src/languages/es.ts for agent.customInstructions and agent.copilot.

5. Add routes in src/ROUTES.ts for AGENT_CUSTOM_INSTRUCTIONS and AGENT_COPILOT if they don't already exist (mirroring what was done for issue [Due for payment 2026-06-08] [$250] Add buttons to chat and copilot with agents #91343).

Both buttons should visually match the edit agent dialog — same icon size, same row style, same spacing — so I'd extract them into a shared component if the edit dialog uses inline JSX.

What alternative solutions did you explore?

I considered adding these as a floating action button or top-right header icons, but matching the edit agent dialog's row/button style keeps the UI consistent and is the explicitly requested approach.

[github-actions]

⚠️ @yusufdeveloper2903 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).