Skip to content

Feature Request: Modal/Overlay component for selection prompts #43

@Aaronontheweb

Description

@Aaronontheweb

Problem

When displaying selection prompts inline in a chat-style application, the selection list can visually overlap or transpose over the main content area, making it difficult to read both the selections and the underlying content.

Current behavior:

  • Inline selection nodes are rendered within the normal vertical layout flow
  • When there are many selection options, they push or overlap with content above/below
  • The visual separation between the selection UI and the rest of the application isn't clear

Proposed Solution

Add a Modal or Overlay component to Termina that:

  1. Pops over existing content rather than being inserted inline
  2. Centers (or positions) itself within the terminal viewport
  3. Dims or obscures the background content to focus attention on the modal
  4. Has clear visual boundaries (border, background color) to distinguish it from underlying content
  5. Captures input while active (keyboard events go to modal, not underlying UI)

Use Cases

  • Selection prompts (choose from a list of options)
  • Confirmation dialogs (yes/no)
  • Clarification prompts (question with options or free text input)
  • Error/warning messages that require acknowledgment

Example API (suggestion)

// Option 1: Declarative in layout
.WithModal(
    ViewModel.ShowModalChanged
        .Select(show => show 
            ? new ModalNode()
                .WithTitle("Select an option")
                .WithContent(new SelectionListNode(...))
                .WithBorder(BorderStyle.Double)
                .WithBackdrop(Color.BrightBlack) // dims background
            : null)
        .AsLayout())

// Option 2: Imperative from ViewModel
ViewModel.ShowModal(new ModalOptions
{
    Title = "Select an option",
    Content = selectionNode,
    DismissOnEscape = true
});

Context

This came up while building a chat application with Memorizer.Agent where we need to show selection prompts for search results, clarification questions, and confirmations. The inline approach causes visual confusion when the selection list appears in the middle of streaming chat content.

Screenshots

The selection list (items 1-9) overlaps with the chat content area, making both hard to read:

╭─ Chat ───────────────────────────────────────────────────────────────────────╮
│  1. Memory item one                                                          │
│  2. Memory item two                                                          │
│► 3. Memory item three                                                        │
│  4. Memory item four                                                         │
│[↑/↓] Navigate  [Enter] Confirm  [Esc] Cancel                                 │
│                                                                              │
│Assistant: 💭 Thinking...                                                     │
│[Executing tool: search_memories]                                             │
│[Tool search_memories completed]                                              │
│                                                                              │
│Here's the analysis of the retrieved memories...                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Ideally the modal would pop over this cleanly with a distinct visual boundary.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions