Add import template into tui. Fix tests that fail on macos. Fix some updates.

src/tui/components/Dialog.tsx

@@ -2,11 +2,17 @@
  * Dialog components for modals, confirmations, and input dialogs.
  */
 
-import React, { useId, useRef, useState } from 'react';
-import { Box, Text, measureElement } from 'ink';
+import React, { useId, useMemo, useRef, useState } from 'react';
+import { Box, Text, measureElement, useStdout } from 'ink';
 import TextInput from './TextInput.js';
 import { colors } from '../theme.js';
 import { useInputLayer, useLayeredInput } from '../hooks/useInputLayer.js';
+import {
+  formatDialogMessageLines,
+  getMessageContentWidth,
+  getMessageDialogWidth,
+  MAX_MESSAGE_DIALOG_LINES,
+} from '../utils/format-dialog-message.js';
 
 /**
  * Base dialog wrapper props.
@@ -261,6 +267,23 @@ export function MessageDialog({
   isActive = true,
 }: MessageDialogProps): React.ReactElement {
   const layerId = useId();
+  const { stdout } = useStdout();
+  const dialogWidth = getMessageDialogWidth(stdout.columns ?? 80);
+  const contentWidth = getMessageContentWidth(dialogWidth);
+
+  const messageLines = useMemo(() => {
+    const formattedLines = formatDialogMessageLines(message, contentWidth);
+
+    if (formattedLines.length <= MAX_MESSAGE_DIALOG_LINES) {
+      return formattedLines;
+    }
+
+    const hiddenLineCount = formattedLines.length - MAX_MESSAGE_DIALOG_LINES;
+    return [
+      ...formattedLines.slice(0, MAX_MESSAGE_DIALOG_LINES),
+      `... and ${hiddenLineCount} more line(s)`,
+    ];
+  }, [contentWidth, message]);
 
   // Auto-capture input when this dialog is mounted.
   useInputLayer(layerId);
@@ -269,7 +292,7 @@ export function MessageDialog({
     if (key.return || key.escape) {
       onClose();
     }
-  });
+  }, { isActive });
 
   const borderColor = type === 'error' ? colors.error :
                       type === 'success' ? colors.success :
@@ -280,8 +303,16 @@ export function MessageDialog({
                'ℹ';
 
   return (
-    <DialogWrapper title={`${icon} ${title}`} borderColor={borderColor}>
-      <Text wrap="wrap">{message}</Text>
+    <DialogWrapper
+      title={`${icon} ${title}`}
+      borderColor={borderColor}
+      width={dialogWidth}
+    >
+      <Box flexDirection="column">
+        {messageLines.map((line, index) => (
+          <Text key={`${index}-${line.slice(0, 24)}`}>{line}</Text>
+        ))}
+      </Box>
       <Box marginTop={1}>
         <Text color={colors.textMuted}>Press Enter or Esc to close</Text>
       </Box>