overengineeringstudio / overengineeringstudio/effect-utils
tui-react: add reusable pager support for long text output
Nobody has claimed this yet.
- 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,PAGERenvironment 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:
-
External pager integration
- respect
GH_PAGER-style /PAGER-style env configuration - default to
lesswhen appropriate - hand off plain text/markdown output to the pager
- respect
-
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
-
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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