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>

src/tui/components/FilePicker.tsx

@@ -0,0 +1,273 @@
+/**
+ * Terminal file picker for browsing directories and selecting files.
+ *
+ * This component does not include a dialog wrapper — consumers wrap it in
+ * {@link DialogWrapper} when needed. When used inside a dialog overlay, pass
+ * `layerId` so keyboard input is routed through the input-layer stack instead
+ * of conflicting with background {@link ScrollableList} handlers.
+ */
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Box, Text } from "ink";
+
+import { ScrollableList, type ListItemData } from "./List.js";
+import { useLayeredInput } from "../hooks/useInputLayer.js";
+import { colors } from "../theme.js";
+import {
+  listDirectoryEntries,
+  type DirectoryEntry,
+} from "../utils/list-directory-entries.js";
+
+/**
+ * Props for {@link FilePicker}.
+ */
+export interface FilePickerProps {
+  /** Starting directory. Defaults to `process.cwd()`. */
+  initialDirectory?: string;
+  /**
+   * Allowed file extensions without a leading dot (e.g. `['json']`).
+   * Omit to show all files. Directories are always shown.
+   */
+  extensions?: string[];
+  /**
+   * Input-layer id for dialog use. When set, this component handles ↑↓/Enter
+   * via {@link useLayeredInput} and disables {@link ScrollableList} focus.
+   */
+  layerId?: string;
+  /** Whether the list receives keyboard focus when `layerId` is not set. */
+  focus?: boolean;
+  /** Maximum visible rows in the scroll window. */
+  maxVisible?: number;
+  /** Called when the user confirms a file with Enter. */
+  onSelectFile: (absolutePath: string) => void;
+  /** Optional callback whenever the browsed directory changes. */
+  onDirectoryChange?: (absolutePath: string) => void;
+}
+
+/**
+ * Truncates a long path for display, keeping the end visible.
+ */
+function formatDirectoryPath(directoryPath: string, maxLength = 56): string {
+  if (directoryPath.length <= maxLength) {
+    return directoryPath;
+  }
+
+  return `...${directoryPath.slice(-(maxLength - 3))}`;
+}
+
+/**
+ * Builds list row metadata for a directory entry.
+ */
+function toListItem(entry: DirectoryEntry): ListItemData<DirectoryEntry> {
+  if (entry.kind === "parent") {
+    return {
+      key: "__parent__",
+      label: "..",
+      description: "Parent directory",
+      value: entry,
+    };
+  }
+
+  if (entry.kind === "directory") {
+    return {
+      key: `dir:${entry.absolutePath}`,
+      label: entry.name,
+      description: "Directory",
+      value: entry,
+    };
+  }
+
+  return {
+    key: `file:${entry.absolutePath}`,
+    label: entry.name,
+    value: entry,
+  };
+}
+
+/**
+ * Generic terminal file picker with optional extension filtering.
+ */
+export function FilePicker({
+  initialDirectory = process.cwd(),
+  extensions,
+  layerId,
+  focus = true,
+  maxVisible = 10,
+  onSelectFile,
+  onDirectoryChange,
+}: FilePickerProps): React.ReactElement {
+  const [currentDirectory, setCurrentDirectory] = useState(() =>
+    initialDirectory,
+  );
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [loadError, setLoadError] = useState<string | undefined>();
+
+  const { entries, error } = useMemo(
+    () => listDirectoryEntries(currentDirectory, { extensions }),
+    [currentDirectory, extensions],
+  );
+
+  useEffect(() => {
+    setLoadError(error);
+  }, [error]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [currentDirectory, extensions]);
+
+  useEffect(() => {
+    if (entries.length === 0) {
+      setSelectedIndex(0);
+      return;
+    }
+
+    if (selectedIndex >= entries.length) {
+      setSelectedIndex(entries.length - 1);
+    }
+  }, [entries, selectedIndex]);
+
+  const listItems = useMemo(
+    (): ListItemData<DirectoryEntry>[] => entries.map(toListItem),
+    [entries],
+  );
+
+  /**
+   * Moves selection to the previous visible row, wrapping at the top.
+   */
+  const selectPrevious = useCallback((): void => {
+    setSelectedIndex((previous) =>
+      previous <= 0 ? Math.max(entries.length - 1, 0) : previous - 1,
+    );
+  }, [entries.length]);
+
+  /**
+   * Moves selection to the next visible row, wrapping at the bottom.
+   */
+  const selectNext = useCallback((): void => {
+    setSelectedIndex((previous) =>
+      entries.length === 0
+        ? 0
+        : previous >= entries.length - 1
+          ? 0
+          : previous + 1,
+    );
+  }, [entries.length]);
+
+  /**
+   * Applies the current row: navigate for parent/directory, select for files.
+   */
+  const activateSelectedEntry = useCallback((): void => {
+    const entry = entries[selectedIndex];
+    if (!entry) {
+      return;
+    }
+
+    if (entry.kind === "parent" || entry.kind === "directory") {
+      setCurrentDirectory(entry.absolutePath);
+      onDirectoryChange?.(entry.absolutePath);
+      return;
+    }
+
+    onSelectFile(entry.absolutePath);
+  }, [entries, onDirectoryChange, onSelectFile, selectedIndex]);
+
+  /**
+   * Dialog overlays must pass `layerId` because ScrollableList uses raw ink
+   * `useInput`, which does not respect the input capture stack.
+   */
+  useLayeredInput(
+    layerId ?? "file-picker-standalone",
+    (_input, key) => {
+      if (!layerId) {
+        return;
+      }
+
+      if (key.upArrow) {
+        selectPrevious();
+        return;
+      }
+
+      if (key.downArrow) {
+        selectNext();
+        return;
+      }
+
+      if (key.return) {
+        activateSelectedEntry();
+      }
+    },
+    { isActive: Boolean(layerId) },
+  );
+
+  const renderItem = useCallback(
+    (
+      item: ListItemData<DirectoryEntry>,
+      isSelected: boolean,
+      isFocused: boolean,
+    ): React.ReactNode => {
+      const entry = item.value;
+      /**
+       * Inside dialogs, ScrollableList focus is disabled (input comes from layerId).
+       * Treat the selected row as highlighted so it matches other focused lists.
+       */
+      const isHighlighted = layerId ? isSelected : isFocused;
+      const textColor = isHighlighted ? colors.focus : colors.text;
+      const indicator = isHighlighted ? "▸ " : "  ";
+
+      if (entry?.kind === "parent") {
+        return (
+          <Text color={textColor} bold={isSelected}>
+            {indicator}
+            ⬆ ..
+          </Text>
+        );
+      }
+
+      if (entry?.kind === "directory") {
+        return (
+          <Text color={textColor} bold={isSelected}>
+            {indicator}
+            📁 {item.label}/
+          </Text>
+        );
+      }
+
+      return (
+        <Text color={textColor} bold={isSelected}>
+          {indicator}
+          {item.label}
+        </Text>
+      );
+    },
+    [layerId],
+  );
+
+  const listFocus = layerId ? false : focus;
+
+  return (
+    <Box flexDirection="column">
+      <Text color={colors.textMuted}>
+        Directory: {formatDirectoryPath(currentDirectory)}
+      </Text>
+
+      {loadError ? (
+        <Box marginTop={1}>
+          <Text color={colors.error}>{loadError}</Text>
+        </Box>
+      ) : null}
+
+      <Box marginTop={1} flexDirection="column">
+        <ScrollableList
+          items={listItems}
+          selectedIndex={selectedIndex}
+          onSelect={setSelectedIndex}
+          onActivate={() => activateSelectedEntry()}
+          focus={listFocus}
+          maxVisible={maxVisible}
+          emptyMessage="No matching files or folders"
+          renderItem={renderItem}
+        />
+      </Box>
+    </Box>
+  );
+}

src/tui/screens/TemplateList.tsx

@@ -8,10 +8,12 @@
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Box, Text } from 'ink';
+import path from 'node:path';
 import { ScrollableList, type ListItemData } from '../components/List.js';
+import { FilePicker } from '../components/FilePicker.js';
 import { useNavigation } from '../hooks/useNavigation.js';
 import { useAppContext, useStatus } from '../hooks/useAppContext.js';
-import { useBlockableInput } from '../hooks/useInputLayer.js';
+import { useBlockableInput, useInputLayer, useIsInputCaptured, useLayeredInput } from '../hooks/useInputLayer.js';
 import { colors, logoSmall } from '../theme.js';
 
 // XO Imports
@@ -25,6 +27,8 @@ import {
   getTemplateRoles,
 } from '../../utils/template-utils.js';
 import { buildScriptHashDataMap } from '../../utils/utxo-metadata.js';
+import { loadTemplateFromFile } from '../../utils/load-template-from-file.js';
+import { ConfirmDialog, DialogWrapper } from '../components/Dialog.js';
 
 /**
  * Template item with metadata.
@@ -53,6 +57,55 @@ interface TemplateActionItem {
   source: 'starting' | 'next' | 'starting+next';
 }
 
+/** List item key for the synthetic import row. */
+const IMPORT_TEMPLATE_KEY = 'import-template';
+
+/** Input layer id shared by the import dialog and its file picker. */
+const IMPORT_TEMPLATE_DIALOG_LAYER_ID = 'import-template-dialog';
+
+/**
+ * Import template dialog overlay.
+ * Captures keyboard input and wraps the generic {@link FilePicker}.
+ */
+function ImportTemplateDialogOverlay({
+  onClose,
+  onSelectFile,
+}: {
+  onClose: () => void;
+  onSelectFile: (filePath: string) => void;
+}): React.ReactElement {
+  useInputLayer(IMPORT_TEMPLATE_DIALOG_LAYER_ID);
+
+  useLayeredInput(IMPORT_TEMPLATE_DIALOG_LAYER_ID, (_input, key) => {
+    if (key.escape) {
+      onClose();
+    }
+  });
+
+  return (
+    <DialogWrapper title="Import Template" borderColor={colors.primary} width={72}>
+      <Text color={colors.textMuted}>
+        Select a JSON, JavaScript, or TypeScript template file from disk.
+      </Text>
+
+      <Box marginTop={1}>
+        <FilePicker
+          layerId={IMPORT_TEMPLATE_DIALOG_LAYER_ID}
+          extensions={['json', 'js', 'mjs', 'cjs', 'ts', 'mts', 'cts']}
+          onSelectFile={onSelectFile}
+          maxVisible={8}
+        />
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color={colors.textMuted}>
+          ↑↓ navigate • Enter open/select • Esc cancel
+        </Text>
+      </Box>
+    </DialogWrapper>
+  );
+}
+
 /**
  * Template List Screen Component.
  * Displays templates and their starting actions.
@@ -68,6 +121,10 @@ export function TemplateListScreen(): React.ReactElement {
   const [selectedActionIndex, setSelectedActionIndex] = useState(0);
   const [focusedPanel, setFocusedPanel] = useState<'templates' | 'actions'>('templates');
   const [isLoading, setIsLoading] = useState(true);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [templateToDelete, setTemplateToDelete] = useState<TemplateItem | null>(null);
+  const isCaptured = useIsInputCaptured();
 
   /**
    * Loads templates from the engine.
@@ -196,15 +253,23 @@ export function TemplateListScreen(): React.ReactElement {
     loadTemplates();
   }, [loadTemplates]);
 
-  // Get current template and its actions
-  const currentTemplate = templates[selectedTemplateIndex];
-  const currentActions = currentTemplate?.availableActions ?? [];
-
   /**
    * Build template list items for ScrollableList.
    */
   const templateListItems = useMemo((): TemplateListItem[] => {
-    return templates.map((item, index) => {
+    const importTemplateItem: TemplateListItem = {
+      key: IMPORT_TEMPLATE_KEY,
+      label: 'Import Template',
+      description: 'Import a template from a file',
+      value: {
+        templateIdentifier: IMPORT_TEMPLATE_KEY,
+        template: {} as XOTemplate,
+        availableActions: [],
+      },
+      hidden: false,
+    };
+
+    return [...templates.map((item, index) => {
       const formatted = formatTemplateListItem(item.template, index);
       return {
         key: item.templateIdentifier,
@@ -213,9 +278,16 @@ export function TemplateListScreen(): React.ReactElement {
         value: item,
         hidden: !formatted.isValid,
       };
-    });
+    }), importTemplateItem];
   }, [templates]);
 
+  const selectedTemplateListItem = templateListItems[selectedTemplateIndex];
+  const isImportRowSelected = selectedTemplateListItem?.key === IMPORT_TEMPLATE_KEY;
+  const currentTemplate = isImportRowSelected
+    ? undefined
+    : selectedTemplateListItem?.value;
+  const currentActions = currentTemplate?.availableActions ?? [];
+
   /**
    * Build action list items for ScrollableList.
    */
@@ -246,6 +318,86 @@ export function TemplateListScreen(): React.ReactElement {
     setSelectedActionIndex(0); // Reset action selection when template changes
   }, []);
 
+  /**
+   * Opens the import file picker.
+   */
+  const openImportDialog = useCallback(() => {
+    setIsImportDialogOpen(true);
+  }, []);
+
+  /**
+   * Opens the import file picker when the synthetic import row is activated.
+   */
+  const handleTemplateActivate = useCallback((item: TemplateListItem) => {
+    if (item.key === IMPORT_TEMPLATE_KEY) {
+      openImportDialog();
+    }
+  }, [openImportDialog]);
+
+  /**
+   * Opens delete confirmation for the currently selected template.
+   */
+  const openDeleteDialog = useCallback(() => {
+    if (!currentTemplate) {
+      return;
+    }
+
+    setTemplateToDelete(currentTemplate);
+    setIsDeleteDialogOpen(true);
+  }, [currentTemplate]);
+
+  /**
+   * Deletes the confirmed template from local storage.
+   */
+  const handleConfirmDelete = useCallback(async () => {
+    if (!appService || !templateToDelete) {
+      return;
+    }
+
+    const deletedName =
+      templateToDelete.template.name || templateToDelete.templateIdentifier;
+
+    try {
+      setStatus('Deleting template...');
+      await appService.engine.DANGEROUS_deleteImportedTemplate(
+        templateToDelete.templateIdentifier,
+      );
+      setIsDeleteDialogOpen(false);
+      setTemplateToDelete(null);
+      await loadTemplates();
+      setStatus(`Deleted ${deletedName}`);
+    } catch (error) {
+      setIsDeleteDialogOpen(false);
+      setTemplateToDelete(null);
+      showError(
+        `Failed to delete template: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, [appService, loadTemplates, setStatus, showError, templateToDelete]);
+
+  /**
+   * Loads the selected template file and imports it through the engine.
+   */
+  const handleImportFile = useCallback(async (filePath: string) => {
+    if (!appService) {
+      showError('AppService not initialized');
+      return;
+    }
+
+    try {
+      setStatus('Importing template...');
+      const content = await loadTemplateFromFile(filePath);
+      await appService.engine.importTemplate(content);
+      await loadTemplates();
+      setIsImportDialogOpen(false);
+      setStatus(`Imported ${path.basename(filePath)}`);
+    } catch (error) {
+      showError(
+        `Failed to import template: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }, [appService, loadTemplates, setStatus, showError]);
+
   /**
    * Handles action selection.
    * Navigates to the Action Wizard where the user will choose their role.
@@ -264,12 +416,25 @@ export function TemplateListScreen(): React.ReactElement {
     });
   }, [currentTemplate, navigate]);
 
-  // Handle keyboard navigation
-  useBlockableInput((_input, key) => {
+  // Handle keyboard navigation and template shortcuts
+  useBlockableInput((input, key) => {
     if (key.tab) {
       setFocusedPanel(prev => prev === 'templates' ? 'actions' : 'templates');
       return;
     }
+
+    if (isLoading || focusedPanel !== 'templates') {
+      return;
+    }
+
+    if (input === 'a' || input === 'A') {
+      openImportDialog();
+      return;
+    }
+
+    if ((input === 'd' || input === 'D') && currentTemplate) {
+      openDeleteDialog();
+    }
   });
 
   /**
@@ -338,7 +503,8 @@ export function TemplateListScreen(): React.ReactElement {
                 items={templateListItems}
                 selectedIndex={selectedTemplateIndex}
                 onSelect={handleTemplateSelect}
-                focus={focusedPanel === 'templates'}
+                onActivate={handleTemplateActivate}
+                focus={focusedPanel === 'templates' && !isCaptured}
                 emptyMessage="No templates imported"
                 renderItem={renderTemplateItem}
               />
@@ -360,6 +526,12 @@ export function TemplateListScreen(): React.ReactElement {
               <Box marginTop={1}>
                 <Text color={colors.textMuted}>Loading...</Text>
               </Box>
+            ) : isImportRowSelected ? (
+              <Box marginTop={1}>
+                <Text color={colors.textMuted}>
+                  Import a template to see available actions
+                </Text>
+              </Box>
             ) : !currentTemplate ? (
               <Box marginTop={1}>
                 <Text color={colors.textMuted}>Select a template...</Text>
@@ -370,7 +542,7 @@ export function TemplateListScreen(): React.ReactElement {
                 selectedIndex={selectedActionIndex}
                 onSelect={setSelectedActionIndex}
                 onActivate={handleActionActivate}
-                focus={focusedPanel === 'actions'}
+                focus={focusedPanel === 'actions' && !isCaptured}
                 emptyMessage="No actions available"
                 renderItem={renderActionItem}
               />
@@ -392,7 +564,15 @@ export function TemplateListScreen(): React.ReactElement {
           <Text color={colors.primary} bold> Description </Text>
           
           {/* Show template description when templates panel is focused */}
-          {focusedPanel === 'templates' && currentTemplate ? (
+          {focusedPanel === 'templates' && isImportRowSelected ? (
+            <Box marginTop={1} flexDirection="column">
+              <Text color={colors.text} bold>Import Template</Text>
+              <Text color={colors.textMuted}>
+                Import a template file (JSON, JavaScript, or TypeScript) from the directory where the TUI was launched.
+                Press Enter or a to open the file picker.
+              </Text>
+            </Box>
+          ) : focusedPanel === 'templates' && currentTemplate ? (
             <Box marginTop={1} flexDirection="column">
               <Text color={colors.text} bold>
                 {currentTemplate.template.name || 'Unnamed Template'}
@@ -471,9 +651,57 @@ export function TemplateListScreen(): React.ReactElement {
       {/* Help text */}
       <Box marginTop={1}>
         <Text color={colors.textMuted} dimColor>
-          Tab: Switch list • Enter: Select action • ↑↓: Navigate • Esc: Back
+          {focusedPanel === 'templates' && isImportRowSelected
+            ? 'Tab: Switch list • a/Enter: Import • ↑↓: Navigate • Esc: Back'
+            : focusedPanel === 'templates' && currentTemplate
+              ? 'Tab: Switch list • a: Import • d: Delete • ↑↓: Navigate • Esc: Back'
+              : 'Tab: Switch list • Enter: Select action • ↑↓: Navigate • Esc: Back'}
         </Text>
       </Box>
+
+      {/* Import template dialog overlay */}
+      {isImportDialogOpen && (
+        <Box
+          position="absolute"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+          height="100%"
+        >
+          <ImportTemplateDialogOverlay
+            onClose={() => setIsImportDialogOpen(false)}
+            onSelectFile={handleImportFile}
+          />
+        </Box>
+      )}
+
+      {/* Delete template confirmation dialog */}
+      {isDeleteDialogOpen && templateToDelete && (
+        <Box
+          position="absolute"
+          flexDirection="column"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+          height="100%"
+        >
+          <ConfirmDialog
+            title="Delete Template"
+            message={
+              `Delete "${templateToDelete.template.name || templateToDelete.templateIdentifier}"?\n\n` +
+              'This removes the template from local storage. Invitations that use it may become unusable.'
+            }
+            confirmLabel="Delete"
+            cancelLabel="Cancel"
+            onConfirm={handleConfirmDelete}
+            onCancel={() => {
+              setIsDeleteDialogOpen(false);
+              setTemplateToDelete(null);
+            }}
+          />
+        </Box>
+      )}
     </Box>
   );
 }

src/tui/utils/format-dialog-message.ts

@@ -0,0 +1,121 @@
+/**
+ * Formats multi-line dialog messages for readable terminal display.
+ *
+ * Ink's `wrap="wrap"` breaks long lines mid-word, which looks broken for
+ * dot-separated template validation paths. We pre-split on newlines and break
+ * long lines at `.` segment boundaries instead.
+ */
+
+/**
+ * Hard-wraps text when a single segment still exceeds the maximum width.
+ */
+function hardWrapLine(line: string, maxWidth: number): string[] {
+  if (line.length <= maxWidth) {
+    return [line];
+  }
+
+  const wrapped: string[] = [];
+  let remaining = line;
+
+  while (remaining.length > maxWidth) {
+    wrapped.push(remaining.slice(0, maxWidth));
+    remaining = `  ${remaining.slice(maxWidth)}`;
+  }
+
+  if (remaining.length > 0) {
+    wrapped.push(remaining);
+  }
+
+  return wrapped;
+}
+
+/**
+ * Breaks a long line at dot-separated segments, indenting continuations.
+ */
+function breakLongLineAtDots(line: string, maxWidth: number): string[] {
+  const segments: string[] = [];
+  let segmentStart = 0;
+
+  for (let index = 0; index < line.length; index += 1) {
+    if (line[index] === "." && index > 0) {
+      segments.push(line.slice(segmentStart, index + 1));
+      segmentStart = index + 1;
+    }
+  }
+
+  if (segmentStart < line.length) {
+    segments.push(line.slice(segmentStart));
+  }
+
+  if (segments.length === 0) {
+    return hardWrapLine(line, maxWidth);
+  }
+
+  const lines: string[] = [];
+  let current = "";
+
+  for (const segment of segments) {
+    const candidate = current + segment;
+
+    if (candidate.length > maxWidth && current.length > 0) {
+      lines.push(current);
+      current = `  ${segment}`;
+      continue;
+    }
+
+    if (candidate.length > maxWidth) {
+      lines.push(...hardWrapLine(segment, maxWidth));
+      current = "";
+      continue;
+    }
+
+    current = candidate;
+  }
+
+  if (current.length > 0) {
+    lines.push(current);
+  }
+
+  return lines;
+}
+
+/**
+ * Splits a dialog message into display lines that fit the available width.
+ */
+export function formatDialogMessageLines(
+  message: string,
+  contentWidth: number,
+): string[] {
+  const output: string[] = [];
+
+  for (const rawLine of message.split("\n")) {
+    const line = rawLine.trimEnd();
+    if (line.length === 0) {
+      continue;
+    }
+
+    if (line.length <= contentWidth) {
+      output.push(line);
+      continue;
+    }
+
+    output.push(...breakLongLineAtDots(line, contentWidth));
+  }
+
+  return output;
+}
+
+/**
+ * Computes dialog width from the terminal size.
+ */
+export function getMessageDialogWidth(terminalColumns: number): number {
+  return Math.min(Math.max(terminalColumns - 4, 60), 100);
+}
+
+/** Inner text width after dialog border and horizontal padding. */
+export function getMessageContentWidth(dialogWidth: number): number {
+  return Math.max(dialogWidth - 6, 40);
+}
+
+/** Maximum number of body lines shown before truncating with a summary. */
+export const MAX_MESSAGE_DIALOG_LINES = 24;

src/tui/utils/list-directory-entries.ts

@@ -0,0 +1,170 @@
+/**
+ * Directory listing helpers for terminal file pickers.
+ *
+ * Uses synchronous filesystem APIs to match other TUI screens (e.g. SeedInput).
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+/**
+ * Kind of entry shown in a file picker list.
+ */
+export type DirectoryEntryKind = "parent" | "directory" | "file";
+
+/**
+ * A single row in a directory listing.
+ */
+export interface DirectoryEntry {
+  /** Display name (e.g. ".." or "foo.json"). */
+  name: string;
+  /** Absolute path on disk. */
+  absolutePath: string;
+  /** Whether this row navigates up, into a folder, or selects a file. */
+  kind: DirectoryEntryKind;
+}
+
+/**
+ * Options for {@link listDirectoryEntries}.
+ */
+export interface ListDirectoryEntriesOptions {
+  /**
+   * Allowed file extensions without a leading dot (e.g. `['json']`).
+   * When omitted or empty, all non-hidden files are included.
+   * Directories are always included regardless of this filter.
+   */
+  extensions?: string[];
+}
+
+/**
+ * Result of listing a directory for the file picker.
+ */
+export interface ListDirectoryEntriesResult {
+  entries: DirectoryEntry[];
+  /** Set when the directory could not be read. */
+  error?: string;
+}
+
+/**
+ * Returns true when the file extension matches one of the allowed extensions.
+ * Comparison is case-insensitive; extensions may be passed with or without a dot.
+ */
+function matchesExtension(
+  filename: string,
+  extensions: string[] | undefined,
+): boolean {
+  if (extensions === undefined || extensions.length === 0) {
+    return true;
+  }
+
+  const fileExtension = path.extname(filename).slice(1).toLowerCase();
+  if (fileExtension.length === 0) {
+    return false;
+  }
+
+  return extensions.some((extension) => {
+    const normalized = extension.startsWith(".")
+      ? extension.slice(1)
+      : extension;
+    return normalized.toLowerCase() === fileExtension;
+  });
+}
+
+/**
+ * Lists files and folders in `directory` for display in a terminal file picker.
+ *
+ * - Prepends `..` when not at the filesystem root.
+ * - Always shows subdirectories (except `.` and `..` from readdir).
+ * - Filters files by optional `extensions`.
+ * - Sort order: parent link first, then directories A→Z, then files A→Z.
+ * - Returns an empty list and `error` instead of throwing on permission or missing paths.
+ */
+export function listDirectoryEntries(
+  directory: string,
+  options: ListDirectoryEntriesOptions = {},
+): ListDirectoryEntriesResult {
+  const resolvedDirectory = path.resolve(directory);
+  const { extensions } = options;
+
+  try {
+    if (!fs.existsSync(resolvedDirectory)) {
+      return {
+        entries: [],
+        error: `Directory does not exist: ${resolvedDirectory}`,
+      };
+    }
+
+    const directoryStat = fs.statSync(resolvedDirectory);
+    if (!directoryStat.isDirectory()) {
+      return {
+        entries: [],
+        error: `Not a directory: ${resolvedDirectory}`,
+      };
+    }
+
+    const entries: DirectoryEntry[] = [];
+    const parentDirectory = path.dirname(resolvedDirectory);
+
+    if (parentDirectory !== resolvedDirectory) {
+      entries.push({
+        name: "..",
+        absolutePath: parentDirectory,
+        kind: "parent",
+      });
+    }
+
+    const childNames = fs.readdirSync(resolvedDirectory);
+    const directories: DirectoryEntry[] = [];
+    const files: DirectoryEntry[] = [];
+
+    for (const name of childNames) {
+      if (name === "." || name === "..") {
+        continue;
+      }
+
+      const absolutePath = path.join(resolvedDirectory, name);
+
+      let childStat: fs.Stats;
+      try {
+        childStat = fs.statSync(absolutePath);
+      } catch {
+        // Skip broken symlinks or entries we cannot stat.
+        continue;
+      }
+
+      if (childStat.isDirectory()) {
+        directories.push({
+          name,
+          absolutePath,
+          kind: "directory",
+        });
+        continue;
+      }
+
+      if (childStat.isFile() && matchesExtension(name, extensions)) {
+        files.push({
+          name,
+          absolutePath,
+          kind: "file",
+        });
+      }
+    }
+
+    const sortByName = (a: DirectoryEntry, b: DirectoryEntry): number =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: "base" });
+
+    directories.sort(sortByName);
+    files.sort(sortByName);
+
+    return {
+      entries: [...entries, ...directories, ...files],
+    };
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : String(error);
+    return {
+      entries: [],
+      error: `Unable to read directory: ${message}`,
+    };
+  }
+}