[$250] Add react-native-live-markdown to the Custom Agent Instructions input

[roryabraham]

Problem

Agent instructions (the "prompt") are stored and rendered as Markdown everywhere they're displayed — e.g. the agent's own Account > Profile > AI Prompt view and any chat messages the agent posts — but the inputs used to write those instructions are plain TextInput components with no live markdown formatting:

• src/pages/settings/Agents/Fields/EditPromptPage.tsx (Edit agent > Write custom instructions)
• src/pages/settings/Agents/AddAgentPage.tsx (Create agent)
• src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx (Workspace > Rules > Add agent rule > Write your own)

This means the user gets no visual feedback (bold, headers, lists, etc.) while authoring instructions, even though what they type is later parsed and rendered as Markdown.

Solution

Swap the plain TextInput InputComponent in the pages above for @expensify/react-native-live-markdown's MarkdownTextInput, consistent with how the chat composer (Composer) already uses it, so formatting renders live as the admin/user types their instructions.

Manual Test Steps

1. Go to Account > Agents > Create agent, or edit an existing agent's instructions.
2. Type Markdown syntax (e.g. *bold*, # heading, - list item) into the instructions input.
3. Verify the formatting is rendered live in the input, matching the chat composer's behavior.
4. Repeat for Workspace > Rules > Add agent rule > Write your own tab.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022080369860454201517
• Upwork Job ID: 2080369860454201517
• Last Price Increase: 2026-07-23

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)

[melvin-bot]

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

[godzillaxbox19982014-lgtm]

Proposal

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

[$250] Add react-native-live-markdown to the Custom Agent Instructions input

What is the root cause of that problem?

I traced this to the path that handles TextInput, EditPromptPage, AddAgentPage:

• src/libs/actions/Agent.ts:273 (params): const params = isCustomExpensifyAvatar ? {agentAccountID: accountID, customExpensifyAvatarID: update.customExpensifyAvatarID} : {agentAccountID: accountID, file: update.file};
• src/libs/actions/Agent.ts:352 (set): return Onyx.set(ONYXKEYS.AGENT_NEW_AVATAR_DRAFT, {customExpensifyAvatarID});
• src/components/AIFeaturesPromoModal.tsx:54 (translate): confirmText: canUseCustomAgent ? translate('common.next') : translate('aiFeaturesPromoModal.confirmText'),
• src/libs/actions/Agent.ts:49 (if): if (customExpensifyAvatarID) {
• src/libs/actions/Agent.ts:273 is the first concrete decision that matches TextInput, EditPromptPage, AddAgentPage, and src/libs/actions/Agent.ts:352 is the next matching consumer/mutation. The failing behavior is introduced at this handoff: the second path does not preserve the condition/state established by the first path for the repro case.

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

• Change the issue-matching decision at src/libs/actions/Agent.ts:273 so the TextInput, EditPromptPage, AddAgentPage repro state is represented before src/libs/actions/Agent.ts:352 consumes it.
• Keep the patch at this first decision/consumer boundary (add a local hasEverLoaded/hasInteracted guard) instead of masking the downstream UI symptom.
• Keep the change inside the UI, Forms, Lists, Accessibility surface and avoid changing platform-specific variants, screen reader behaviour.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Add or update a regression in tests/components/**/*.ts for the exact issue flow: [$250] Add react-native-live-markdown to the Custom Agent Instructions input.
2. Cover the counter-case near src/libs/actions/Agent.ts:273 so valid existing TextInput, EditPromptPage, AddAgentPage behavior still works.
3. Manually repeat the issue steps after the patch and confirm the visible state/action is no longer stale.

What alternative solutions did you explore? (Optional)

• I would not add a broad new condition outside these referenced paths; the safer fix is to keep TextInput, EditPromptPage, AddAgentPage consistent at the first read/write boundary shown above.

[abbasifaizan70]

Proposal

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

Agent instructions ("prompt") are parsed and rendered as Markdown everywhere they're displayed (e.g. Account > Profile > AI Prompt, chat messages the agent posts), but the three inputs used to author those instructions render as plain text with no live formatting:

• src/pages/settings/Agents/Fields/EditPromptPage.tsx (Edit agent instructions)
• src/pages/settings/Agents/AddAgentPage.tsx (Create agent)
• src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx (Workspace > Rules > Add agent rule > Write your own)

We need these inputs to render bold/headers/lists live as the admin types, consistent with the chat composer.

What is the root cause of that problem?

All three pages pass the shared TextInput component to InputWrapper as InputComponent={TextInput} without opting into markdown rendering:

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

Lines 95 to 107 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

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

Lines 162 to 174 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

App/src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

Lines 86 to 100 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={describeRuleLabel}
	accessibilityLabel={describeRuleLabel}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={submitFormOnModEnter}
	multiline
	shouldSaveDraft
	shouldLabelStayOnSingleLine
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

TextInput's underlying BaseTextInput already has built-in support for live markdown: it accepts a type prop, and when type === 'markdown' it swaps its internal input implementation to RNMarkdownTextInput (the same @expensify/react-native-live-markdown-backed component the chat Composer uses), instead of the plain native input:

App/src/components/TextInput/BaseTextInput/implementations.ts

Lines 1 to 13 in ea855a7

	import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
	import RNMaskedTextInput from '@components/RNMaskedTextInput';
	import RNTextInput from '@components/RNTextInput';
	import type {BaseTextInputProps, InputType} from './types';
	type InputComponentType = React.ComponentType<BaseTextInputProps>;
	const InputComponentMap = new Map<InputType, InputComponentType>([
	['default', RNTextInput as InputComponentType],
	['mask', RNMaskedTextInput as InputComponentType],
	['markdown', RNMarkdownTextInput as InputComponentType],
	]);

Since none of the three pages pass type="markdown", BaseTextInput falls back to its default (non-markdown) implementation, so no live formatting is shown even though the exact same shared component supports it. This markdown mode is already proven out elsewhere in the app — Rule/TextBase.tsx enables it for merchant/category rule descriptions by passing type, autoGrowHeight, maxAutoGrowHeight, and shouldSubmitForm together:

App/src/components/Rule/TextBase.tsx

Lines 99 to 113 in ea855a7

	<InputWrapper
	hint={hint}
	InputComponent={TextInput}
	inputID={fieldID}
	name={fieldID}
	defaultValue={typeof currentValue === 'string' ? currentValue : undefined}
	label={label}
	accessibilityLabel={title}
	role={CONST.ROLE.PRESENTATION}
	ref={inputCallbackRef}
	type={isMarkdownEnabled ? 'markdown' : undefined}
	autoGrowHeight={isMarkdownEnabled}
	maxAutoGrowHeight={isMarkdownEnabled ? variables.textInputAutoGrowMaxHeight : undefined}
	shouldSubmitForm={isMarkdownEnabled}
	/>

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

Rather than introducing a new MarkdownTextInput InputComponent (which would require re-deriving all the Form/InputWrapper plumbing that BaseTextInput already handles for markdown), reuse the existing type="markdown" support on the shared TextInput in all three places, mirroring the pattern already used in Rule/TextBase.tsx.

For EditPromptPage.tsx:

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

Lines 95 to 107 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

Add type="markdown" to the InputWrapper:

InputComponent={TextInput}
inputID={INPUT_IDS.PROMPT}
label={translate('editAgentPage.instructions')}
accessibilityLabel={translate('editAgentPage.instructions')}
role={CONST.ROLE.PRESENTATION}
type="markdown"
defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}

For AddAgentPage.tsx, the same change to the prompt InputWrapper (leave the FIRST_NAME input untouched):

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

Lines 162 to 174 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

InputComponent={TextInput}
inputID={INPUT_IDS.PROMPT}
label={translate('addAgentPage.instructions')}
accessibilityLabel={translate('addAgentPage.instructions')}
role={CONST.ROLE.PRESENTATION}
type="markdown"
defaultValue={defaultPrompt}

For AddAgentRuleWriteTab.tsx:

App/src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

Lines 86 to 100 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={describeRuleLabel}
	accessibilityLabel={describeRuleLabel}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={submitFormOnModEnter}
	multiline
	shouldSaveDraft
	shouldLabelStayOnSingleLine
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

InputComponent={TextInput}
inputID={INPUT_IDS.PROMPT}
label={describeRuleLabel}
accessibilityLabel={describeRuleLabel}
role={CONST.ROLE.PRESENTATION}
type="markdown"
onKeyPress={submitFormOnModEnter}

Since all three inputs already use multiline with an explicit flex1 container (they fill a fixed-height region rather than auto-growing with content), there's no need to add autoGrowHeight/maxAutoGrowHeight like TextBase.tsx does — those two props only matter for auto-growing inputs. shouldSubmitForm also isn't needed here since none of these three inputs submit the form on Enter (the Ctrl/Cmd+Enter submission in EditPromptPage.tsx and AddAgentRuleWriteTab.tsx is handled separately via useKeyboardShortcut/onKeyPress).

This keeps the fix minimal, reuses the existing, already-tested BaseTextInput markdown code path (no new component or bespoke wiring), and matches how Composer and Rule/TextBase.tsx already render live Markdown.

[lorretheboy]

Proposal

What is the root cause of that problem?

This is a feature gap, not a regression. Our shared TextInput already supports live markdown — BaseTextInput accepts a type prop ('default' | 'mask' | 'markdown') and switches its inner input to RNMarkdownTextInput (which wraps @expensify/react-native-live-markdown's MarkdownTextInput) when type === 'markdown':

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Line 103 in b444723

const isMarkdownEnabled = type === 'markdown';

The three agent-instruction forms never pass that prop, so type falls back to 'default' and a plain RNTextInput is rendered — no live formatting while typing, even though the saved prompt is later rendered as Markdown:

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

Lines 95 to 107 in b444723

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

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

Lines 162 to 174 in b444723

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

App/src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

Lines 86 to 100 in b444723

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={describeRuleLabel}
	accessibilityLabel={describeRuleLabel}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={submitFormOnModEnter}
	multiline
	shouldSaveDraft
	shouldLabelStayOnSingleLine
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

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

No need to swap in MarkdownTextInput directly — just add type="markdown" to the prompt InputWrapper in each of the three pages above, exactly how other markdown-authoring fields already do it, e.g. private notes:

App/src/pages/PrivateNotes/PrivateNotesEditPage.tsx

Lines 190 to 193 in b444723

	privateNotesInput.current = el;
	}}
	type="markdown"
	/>

<InputWrapper
    InputComponent={TextInput}
    inputID={INPUT_IDS.PROMPT}
    type="markdown"
    ...
/>

This keeps the form validation, draft saving, and styling untouched, and gives us the same live-markdown behavior (styles, paste handling) the rest of the app gets from BaseTextInput. The agent-name field in AddAgentPage stays a plain input.

What alternative solutions did you explore? (Optional)

Replacing the inputs with the chat Composer component — rejected because Composer carries chat-specific behavior (suggestions, attachments, keyboard handling) and doesn't integrate with FormProvider/InputWrapper, while TextInput's built-in type="markdown" is the established pattern for markdown form fields (task descriptions, room descriptions, private notes).

[MelvinBot]

Issue Analysis

Root Cause: This is a feature gap, not a regression. The shared TextInput (BaseTextInput) already supports live markdown — when it receives type="markdown" it swaps its inner input to RNMarkdownTextInput, which is backed by @expensify/react-native-live-markdown (the same library the chat Composer uses). See BaseTextInput/implementation/index.tsx:103 (const isMarkdownEnabled = type === 'markdown';). The three agent-instruction inputs pass InputComponent={TextInput} but never pass type="markdown", so they fall back to the plain (default) implementation and show no live formatting.

Recommended Fix: Add type="markdown" to the prompt InputWrapper in all three pages — no new component needed. This mirrors the established pattern already used for private notes (PrivateNotesEditPage.tsx:192):

• EditPromptPage.tsx:96
• AddAgentPage.tsx:163 (the prompt input — leave the agent-name input at L152 as a plain input)
• AddAgentRuleWriteTab.tsx:87

Investigation details

Why not swap in MarkdownTextInput directly (as the issue body suggests)? Doing so would require re-deriving all the FormProvider/InputWrapper plumbing that BaseTextInput already handles. The type="markdown" path is the app's established, already-tested way to get markdown form fields (private notes, task/room descriptions, Rule/TextBase.tsx), so it's the minimal change.

Why no extra props? Rule/TextBase.tsx also passes autoGrowHeight/maxAutoGrowHeight, but those only matter for auto-growing inputs. All three agent inputs already use multiline inside a fixed flex1 container, so those aren't needed. shouldSubmitForm also isn't required — Ctrl/Cmd+Enter submission in EditPromptPage and AddAgentRuleWriteTab is handled separately.

Type support: InputType = 'markdown' | 'mask' | 'default' in BaseTextInput/types.ts:14.

On the existing proposals: abbasifaizan70 and lorretheboy both correctly identify the root cause and the type="markdown" fix — their analysis matches mine. The godzillaxbox19982014-lgtm proposal is off-base (it references unrelated avatar-upload code in Agent.ts and does not touch any of the three inputs).

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/96902#issuecomment-5062345311) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[wildan-m]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-23 19:20:03 UTC.

Proposal

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

The three inputs used to author agent instructions are plain multiline TextInput components, so the admin/user gets no live Markdown formatting (bold, headings, lists, etc.) while typing — even though the same text is later parsed and rendered as Markdown in the agent's Account > Profile > AI Prompt view and in the messages the agent posts. The affected inputs are:

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

Lines 95 to 107 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

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

Lines 162 to 174 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

App/src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

Lines 86 to 100 in ea855a7

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={describeRuleLabel}
	accessibilityLabel={describeRuleLabel}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={submitFormOnModEnter}
	multiline
	shouldSaveDraft
	shouldLabelStayOnSingleLine
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

What is the root cause of that problem?

Each of these inputs renders TextInput (@components/TextInput) as its InputComponent without opting into Markdown mode. TextInput/BaseTextInput already supports live Markdown: passing type="markdown" makes it use RNMarkdownTextInput (which wraps @expensify/react-native-live-markdown's MarkdownTextInput) instead of the plain RN TextInput, and applies the shared useMarkdownStyle styling.

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 102 to 109 in ea855a7

	const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
	const isMarkdownEnabled = type === 'markdown';
	const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight;
	const helpMessageId = useId();
	const theme = useTheme();
	const styles = useThemeStyles();
	const markdownStyle = useMarkdownStyle(false, excludedMarkdownStyles);

App/src/components/TextInput/BaseTextInput/implementations.ts

Line 12 in ea855a7

['markdown', RNMarkdownTextInput as InputComponentType],

Because none of the three agent-instruction inputs pass type="markdown", they fall back to the plain text input and render no live formatting.

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

For each of the three InputWrappers listed above (in EditPromptPage.tsx, AddAgentPage.tsx, and AddAgentRuleWriteTab.tsx), enable Markdown mode by adding type="markdown". This is the exact pattern the codebase already uses for the workspace rule description inputs, where TextBase toggles Markdown via type={isMarkdownEnabled ? 'markdown' : undefined} together with autoGrowHeight:

App/src/components/Rule/TextBase.tsx

Lines 99 to 112 in ea855a7

	<InputWrapper
	hint={hint}
	InputComponent={TextInput}
	inputID={fieldID}
	name={fieldID}
	defaultValue={typeof currentValue === 'string' ? currentValue : undefined}
	label={label}
	accessibilityLabel={title}
	role={CONST.ROLE.PRESENTATION}
	ref={inputCallbackRef}
	type={isMarkdownEnabled ? 'markdown' : undefined}
	autoGrowHeight={isMarkdownEnabled}
	maxAutoGrowHeight={isMarkdownEnabled ? variables.textInputAutoGrowMaxHeight : undefined}
	shouldSubmitForm={isMarkdownEnabled}

Concretely, on each of the three agent-instruction InputWrapper blocks, add type="markdown" and switch the sizing to the established Markdown-input layout: autoGrowHeight with maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight} (the same combination used by every other Markdown authoring input, e.g. the money-request and room-description editors). The current flex1 full-height container/input styles should be dropped in favour of autoGrowHeight, because BaseTextInput itself omits flex1 on the inner input once Markdown is enabled, and no Markdown input in the app uses flex1 full-height sizing:

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Line 435 in ea855a7

!isMarkdownEnabled && styles.flex1,

No new component is needed — this reuses the existing TextInput Markdown support, so the authoring inputs render the same live formatting as the chat composer.

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/96902-agent-instructions-markdown?expand=1

What alternative solutions did you explore? (Optional)

Directly importing MarkdownTextInput from @expensify/react-native-live-markdown and passing it as the InputComponent. This was rejected because it bypasses BaseTextInput's existing Markdown wiring (RNMarkdownTextInput + useMarkdownStyle + HTML-paste handling), duplicating styling logic and diverging from the established type="markdown" convention already used elsewhere in the app.

[dilshodmackbook-sketch]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-23 19:17:53 UTC.

Proposal

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

Agent instructions (the "prompt") are parsed and rendered as Markdown everywhere they're displayed, but the three inputs used to author those instructions render as plain text with no live formatting, so the user gets no visual feedback while writing:

• src/pages/settings/Agents/Fields/EditPromptPage.tsx (Edit agent instructions)
• src/pages/settings/Agents/AddAgentPage.tsx (Create agent)
• src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx (Workspace > Rules > Add agent rule > Write your own)

What is the root cause of that problem?

Not a defect — the three instruction inputs simply never opt into the markdown input variant, even though the App's own TextInput already supports it. All three render the plain variant with InputComponent={TextInput}, multiline, and no type:

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

Lines 95 to 107 in d21dd3d

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('editAgentPage.instructions')}
	accessibilityLabel={translate('editAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

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

Lines 162 to 174 in d21dd3d

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={translate('addAgentPage.instructions')}
	accessibilityLabel={translate('addAgentPage.instructions')}
	role={CONST.ROLE.PRESENTATION}
	defaultValue={defaultPrompt}
	multiline
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

App/src/pages/workspace/rules/AgentRules/AddAgentRuleWriteTab.tsx

Lines 86 to 100 in d21dd3d

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PROMPT}
	label={describeRuleLabel}
	accessibilityLabel={describeRuleLabel}
	role={CONST.ROLE.PRESENTATION}
	onKeyPress={submitFormOnModEnter}
	multiline
	shouldSaveDraft
	shouldLabelStayOnSingleLine
	containerStyles={[styles.flex1]}
	touchableInputWrapperStyle={[styles.flex1]}
	textInputContainerStyles={[styles.flex1]}
	inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
	/>

BaseTextInput selects its underlying input from the type prop:

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Lines 102 to 109 in d21dd3d

	const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
	const isMarkdownEnabled = type === 'markdown';
	const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight;
	const helpMessageId = useId();
	const theme = useTheme();
	const styles = useThemeStyles();
	const markdownStyle = useMarkdownStyle(false, excludedMarkdownStyles);

const InputComponent = InputComponentMap.get(type) ?? RNTextInput;
const isMarkdownEnabled = type === 'markdown';
const isAutoGrowHeightMarkdown = isMarkdownEnabled && autoGrowHeight;
...
const markdownStyle = useMarkdownStyle(false, excludedMarkdownStyles);

and 'markdown' maps to RNMarkdownTextInput (which wraps MarkdownTextInput from @expensify/react-native-live-markdown):

App/src/components/TextInput/BaseTextInput/implementations.ts

Lines 1 to 13 in d21dd3d

	import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
	import RNMaskedTextInput from '@components/RNMaskedTextInput';
	import RNTextInput from '@components/RNTextInput';
	import type {BaseTextInputProps, InputType} from './types';
	type InputComponentType = React.ComponentType<BaseTextInputProps>;
	const InputComponentMap = new Map<InputType, InputComponentType>([
	['default', RNTextInput as InputComponentType],
	['mask', RNMaskedTextInput as InputComponentType],
	['markdown', RNMarkdownTextInput as InputComponentType],
	]);

Since type defaults to 'default', these three inputs get RNTextInput and no live formatting.

One note for the implementation: the issue's phrasing ("swap the plain TextInput InputComponent for MarkdownTextInput") shouldn't be taken literally — replacing InputComponent would drop the label, container styling, error display, and form wiring that TextInput provides. The established pattern is to keep InputComponent={TextInput} and add type="markdown", exactly as Rule/TextBase.tsx and TaskDescriptionPage/RoomDescriptionPage already do.

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

Opt each of the three inputs into the markdown variant by adding type="markdown" to the prompt InputWrapper (leave the FIRST_NAME input in AddAgentPage untouched). For EditPromptPage.tsx:

<InputWrapper
    InputComponent={TextInput}
    inputID={INPUT_IDS.PROMPT}
    label={translate('editAgentPage.instructions')}
    accessibilityLabel={translate('editAgentPage.instructions')}
    role={CONST.ROLE.PRESENTATION}
    type="markdown"
    defaultValue={Str.htmlDecode(agentPrompt?.prompt ?? '')}
    multiline
    containerStyles={[styles.flex1]}
    touchableInputWrapperStyle={[styles.flex1]}
    textInputContainerStyles={[styles.flex1]}
    inputStyle={[styles.flex1, styles.textAlignVerticalTop]}
/>

with the identical one-line addition on the prompt InputWrapper in AddAgentPage.tsx (~L162-L174) and AddAgentRuleWriteTab.tsx (~L86-L100).

Three things the implementer needs to handle beyond the prop:

1. The Ctrl+Enter submit handler in EditPromptPage reads the raw DOM node:

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

   Lines 50 to 67 in d21dd3d

   	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, (e) => {
   	if (Platform.OS !== 'web') {
   	return;
   	}
   	const textarea = e?.target as HTMLTextAreaElement;
   	if (!textarea) {
   	return;
   	}
   	const errors = validate({[INPUT_IDS.PROMPT]: textarea.value.trim()});
   	if (Object.keys(errors).length > 0) {
   	return;
   	}
   	handleSubmit({[INPUT_IDS.PROMPT]: textarea.value.trim()});
   	});

   const textarea = e?.target as HTMLTextAreaElement;
   ...
   handleSubmit({[INPUT_IDS.PROMPT]: textarea.value.trim()});

   MarkdownTextInput doesn't render a <textarea> on web, so textarea.value will be undefined and the shortcut silently breaks. This should read the current form value (via the form draft / useOnyx on EDIT_AGENT_PROMPT_FORM) or an input ref's value instead of the event target. AddAgentRuleWriteTab's submitFormOnModEnter submits through formRef so it's fine, but should be re-verified.

2. The flex-fill layout — BaseTextInput branches on !isMarkdownEnabled && styles.flex1 for the inner input wrapper, so the full-height flex-fill layout these inputs rely on behaves differently under markdown, and the markdown branch only constrains height via getMarkdownMaxHeight when autoGrowHeight is set:

   App/src/components/TextInput/BaseTextInput/implementation/index.tsx

   Lines 433 to 435 in d21dd3d

   	<View
   	style={[
   	!isMarkdownEnabled && styles.flex1,

   The proven markdown-in-a-form pattern (Rule/TextBase.tsx) pairs type="markdown" with autoGrowHeight + maxAutoGrowHeight. The agent pages should be checked in both portrait and landscape (they already branch on useIsInLandscapeMode) so the input still fills the screen and doesn't collapse to a single line.

3. Which styles to render — excludedMarkdownStyles on BaseTextInput lets specific markdown styles be suppressed. Since instructions are prose, mention/emoji styling may not be desirable; worth confirming with the assignees whether the composer's full style set is intended or a subset should be excluded.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Render each of the three pages and assert the prompt input mounts the markdown variant (RNMarkdownTextInput) rather than the default RNTextInput.
2. Seed EditPromptPage with a stored prompt containing markdown and assert the defaultValue loads with formatting already applied.
3. Assert Ctrl/Cmd+Enter still submits the form on web from both EditPromptPage and the Add agent rule write tab after the switch to MarkdownTextInput.
4. Manually repeat the issue's steps and confirm formatting renders live in all three inputs, matching the chat composer.

What alternative solutions did you explore? (Optional)

Rendering a separate live-preview pane beside the plain input rather than formatting in place, which sidesteps the layout and Ctrl+Enter concerns entirely — but it diverges from how every other markdown-authored field in the app behaves and doubles the vertical space on a screen that's already full-height, so I'd keep the in-place type="markdown" approach.