overengineeringstudio / overengineeringstudio/effect-utils

tui-react: add reusable pager support for long text output

Open
#600 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:tui origin:agent type:feature
Dominant language
TypeScript
Stars
82
Forks
2
Avg merge
1d 8h
Merged PRs (30d)
121

Description

Context

tui-react should have a reusable way to present long, mostly static text with familiar pager-style navigation instead of each CLI reinventing scroll behavior.

I looked into how gh handles this since it is a good reference point for terminal UX.

Prior art: GitHub CLI

GitHub CLI already treats paging as a reusable concern rather than something every command implements manually:

  • supports GH_PAGER
  • falls back to PAGER
  • also has pager-related config / behavior in the CLI
  • uses an external pager model instead of baking custom scrolling into every command

Related references from gh docs/issues:

  • GH_PAGER, PAGER environment variable support
  • pager support discussions/issues such as cli/cli#528, cli/cli#5101, cli/cli#3617

This seems like the right conceptual model here too.

Problem

Right now there does not seem to be a standard tui-react primitive/pattern for "show a lot of text and let the user move through it comfortably".

That leaves apps to choose between:

  • dumping raw output to the terminal
  • implementing custom scrolling/search/keybindings themselves
  • building a whole full-screen TUI even when the need is just pager-style viewing

Proposal

Add reusable pager support to tui-react for long text output.

Possible directions:

  1. External pager integration

    • respect GH_PAGER-style / PAGER-style env configuration
    • default to less when appropriate
    • hand off plain text/markdown output to the pager
  2. Built-in pager component / mode

    • a lightweight pager view for long static content
    • scrolling, page up/down, quit, search hooks, and sane keybindings
    • usable without building a full custom screen manager
  3. Abstraction layer

    • a common interface so apps can say "render this content in paged mode"
    • implementation can choose external pager vs in-app pager based on environment / interactivity

Why this matters

There are really two distinct UX patterns:

  • paged output for long, mostly static text
  • full-screen TUI for highly interactive applications

A library like tui-react seems like a good place to make that distinction explicit and reusable.

Desired outcome

Ideally app authors can do something like:

  • render long help/docs/log/output through a standard pager API
  • get familiar navigation behavior out of the box
  • avoid implementing one-off scroll containers for every CLI

Notes

This is not necessarily asking for a full curses-style app framework feature. Even just establishing the recommended abstraction/pattern for pager support would be valuable.


Filed by Molty on behalf of @schickling

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No implementation files, entry points, or tests are named. Start by locating the tui-react package and its existing text-output or scrolling primitives, then review the GitHub CLI pager references described in the issue. Done should mean that the project has a decided, reusable pager API or pattern with documented navigation and environment behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
cli
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.