Skip to content

Add visual scrollbar indicator to StreamingTextNode #135

@Aaronontheweb

Description

@Aaronontheweb

Problem

When a StreamingTextNode has more content than fits in the viewport, there is no visual indication that:

  1. More content exists above or below the visible area
  2. Where the current scroll position is relative to the total content
  3. How to scroll (users may not discover PageUp/PageDown)

Expected Behavior

Add an optional vertical scrollbar to StreamingTextNode (and potentially other scrollable nodes):

  1. Scrollbar track — thin column (1 char wide) on the right edge of the node
  2. Scrollbar thumb — indicates current position within the total content
  3. Visual style — configurable characters (e.g., for track, or for thumb) and colors
  4. Proportional sizing — thumb size reflects viewport/content ratio
  5. Auto-hide — only show scrollbar when content exceeds viewport height

API

var chatHistory = StreamingTextNode.Create()
    .WithScrollbar()  // Enable scrollbar with defaults
    // OR
    .WithScrollbar(new ScrollbarOptions
    {
        TrackChar = '│',
        ThumbChar = '█',
        TrackColor = Color.BrightBlack,
        ThumbColor = Color.White,
        AutoHide = true  // Only show when scrollable
    });

Existing Scroll Infrastructure

StreamingTextNode already has full scroll support via PersistedStreamBuffer:

  • ScrollOffset property tracks position
  • CanScrollUp / CanScrollDown properties
  • MaxScroll computed from content vs viewport
  • HandleInput() handles PageUp/PageDown/Ctrl+Home/Ctrl+End

The scrollbar would simply visualize this existing state during Render().

Reference

Terminal UIs like lazygit, btop, and k9s all use scrollbar indicators. The most common pattern is a single-character-wide track on the right edge.

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