Save the role as an input when accepting

src/tui/components/Dialog.tsx

@@ -2,8 +2,8 @@
  * Dialog components for modals, confirmations, and input dialogs.
  */
 
-import React, { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import React, { useRef, useState } from 'react';
+import { Box, Text, useInput, measureElement } from 'ink';
 import TextInput from 'ink-text-input';
 import { colors } from '../theme.js';
 
@@ -23,31 +23,60 @@ interface DialogWrapperProps {
   backgroundColor?: string;
 }
 
-/**
- * Base dialog wrapper component.
- */
+
 function DialogWrapper({
   title,
   borderColor = colors.primary,
   children,
   width = 60,
-  backgroundColor = colors.bg,
 }: DialogWrapperProps): React.ReactElement {
+  const ref = useRef<any>(null);
+  const [height, setHeight] = useState<number | null>(null);
+
+  // measure after render
+  React.useLayoutEffect(() => {
+    if (ref.current) {
+      const { height } = measureElement(ref.current);
+      setHeight(height);
+    }
+  }, [children, title, width]);
+
   return (
-    <Box
-      flexDirection="column"
-      borderStyle="double"
-      borderColor={borderColor}
-      // backgroundColor={backgroundColor || 'white'}
-      backgroundColor="white"
-      paddingX={2}
-      paddingY={1}
-      width={width}
-    >
-      <Text color={borderColor} bold>{title}</Text>
-      <Box marginY={1} flexDirection="column">
-        {children}
+    <Box flexDirection="column">
+
+      {/* Opaque backing layer */}
+      {height !== null && (
+        <Box
+          position="absolute"
+          flexDirection="column"
+          width={width}
+          height={height}
+        >
+          {Array.from({ length: height }).map((_, i) => (
+            <Text key={i}>{' '.repeat(width)}</Text>
+          ))}
+        </Box>
+      )}
+
+      {/* Actual dialog */}
+      <Box
+        ref={ref}
+        flexDirection="column"
+        borderStyle="double"
+        borderColor={borderColor}
+        paddingX={2}
+        paddingY={1}
+        width={width}
+      >
+        <Text color={borderColor} bold>
+          {title}
+        </Text>
+
+        <Box marginY={1} flexDirection="column">
+          {children}
+        </Box>
       </Box>
+
     </Box>
   );
 }