feat(agentflow): enhance ExpandTextDialog to handle value updates correctly

- Added tests to ensure the dialog displays the current value when opened after changes while closed.
- Implemented logic to reset the dialog's value to the original when reopened after cancellation.
- Updated state management in ExpandTextDialog to synchronize local value immediately upon opening.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jocelynlin-wd

packages/agentflow/src/atoms/ExpandTextDialog.test.tsx

@@ -82,6 +82,41 @@ describe('ExpandTextDialog', () => {
         expect(textarea).toHaveAttribute('placeholder', 'Type here...')
     })
 
+    it('should show current value when opened after value changed while closed', () => {
+        const { rerender } = render(
+            <ExpandTextDialog open={false} value='' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+        )
+
+        // Simulate value changing while dialog is closed (user typing in inline editor)
+        rerender(<ExpandTextDialog open={false} value='Updated text' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+        // Open the dialog — it should show the updated value, not the initial empty value
+        rerender(<ExpandTextDialog open={true} value='Updated text' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+        const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
+        expect(textarea).toHaveValue('Updated text')
+    })
+
+    it('should reset to current value when re-opened after cancel', () => {
+        const { rerender } = render(
+            <ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />
+        )
+
+        // User types in the dialog then cancels
+        const textarea = screen.getByTestId('expand-content-input').querySelector('textarea')!
+        fireEvent.change(textarea, { target: { value: 'Unsaved edits' } })
+        fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+
+        // Close the dialog
+        rerender(<ExpandTextDialog open={false} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+        // Re-open — should show the original value, not the unsaved edits
+        rerender(<ExpandTextDialog open={true} value='Original' inputType='code' onConfirm={mockOnConfirm} onCancel={mockOnCancel} />)
+
+        const textarea2 = screen.getByTestId('expand-content-input').querySelector('textarea')!
+        expect(textarea2).toHaveValue('Original')
+    })
+
     // --- Rich text mode ---
 
     describe('inputType="string" (richtext)', () => {

packages/agentflow/src/atoms/ExpandTextDialog.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 
 import { Box, Button, Dialog, DialogActions, DialogContent, TextField, Typography } from '@mui/material'
 
@@ -32,13 +32,17 @@ export function ExpandTextDialog({
     onCancel
 }: ExpandTextDialogProps) {
     const [localValue, setLocalValue] = useState(value)
+    const [prevOpen, setPrevOpen] = useState(open)
 
-    // Sync local state when the value prop changes while dialog is open
-    useEffect(() => {
-        if (open) {
-            setLocalValue(value)
-        }
-    }, [open, value])
+    // Sync localValue synchronously when the dialog opens so the TipTap editor
+    // initialises with the correct content (useEffect would leave a one-render
+    // gap where localValue is stale, causing the editor to show empty/old text).
+    if (open && !prevOpen) {
+        setLocalValue(value)
+        setPrevOpen(true)
+    } else if (!open && prevOpen) {
+        setPrevOpen(false)
+    }
 
     const handleConfirm = useCallback(() => {
         onConfirm(localValue)

packages/agentflow/src/atoms/NodeInputHandler.test.tsx

@@ -145,6 +145,24 @@ describe('NodeInputHandler – expand dialog', () => {
         })
     })
 
+    it('should reflect updated data prop in expand dialog after rerender', () => {
+        const param = makeParam({ type: 'string', rows: 4 })
+        const initialData = { ...baseNodeData, inputValues: { myField: '' } }
+
+        const { rerender } = render(
+            <NodeInputHandler inputParam={param} data={initialData} isAdditionalParams onDataChange={mockOnDataChange} />
+        )
+
+        // Simulate parent updating data after user types in inline editor
+        const updatedData = { ...baseNodeData, inputValues: { myField: '<p>Updated instructions</p>' } }
+        rerender(<NodeInputHandler inputParam={param} data={updatedData} isAdditionalParams onDataChange={mockOnDataChange} />)
+
+        // Open expand dialog — it should show the updated value, not the initial empty value
+        fireEvent.click(screen.getByTitle('Expand'))
+        const editors = screen.getAllByTestId('rich-text-editor')
+        expect(editors[1]).toHaveValue('<p>Updated instructions</p>')
+    })
+
     it('should not show expand icon for non-multiline string fields', () => {
         render(
             <NodeInputHandler