Save the role as an input when accepting

src/tui/App.tsx

@@ -18,6 +18,8 @@ import { ActionWizardScreen } from './screens/action-wizard/ActionWizardScreen.j
 import { InvitationScreen } from './screens/Invitation.js';
 import { TransactionScreen } from './screens/Transaction.js';
 
+import { MessageDialog } from './components/Dialog.js';
+
 /**
  * Props for the App component.
  */
@@ -107,28 +109,14 @@ function DialogOverlay(): React.ReactElement | null {
       width="100%"
       height="100%"
     >
-      <Box
-        flexDirection="column"
-        borderStyle="double"
-        borderColor={borderColor}
-        paddingX={2}
-        paddingY={1}
-        width={60}
-      >
-        <Text color={borderColor} bold>
-          {dialog.type === 'error' ? '✗ Error' : 
-           dialog.type === 'confirm' ? '? Confirm' : 
-           'ℹ Info'}
-        </Text>
-        <Box marginY={1}>
-          <Text wrap="wrap">{dialog.message}</Text>
-        </Box>
-        <Text color={colors.textMuted}>
-          {dialog.type === 'confirm' 
-            ? 'Press Y to confirm, N or ESC to cancel'
-            : 'Press Enter or ESC to close'}
-        </Text>
-      </Box>
+      <MessageDialog
+        title={dialog.type === 'error' ? '✗ Error' : 
+          dialog.type === 'confirm' ? '? Confirm' : 
+          'ℹ Info'}
+        message={dialog.message}
+        onClose={dialog.onCancel ?? (() => {})}
+        type={dialog.type as 'error' | 'info' | 'success'}
+      />
     </Box>
   );
 }