fix(tui): Fix garbled output when content exceeds viewport

- Implemented new renderLineBased method that properly handles scrollback boundaries
- Fixed ANSI code preservation in MarkdownComponent line wrapping
- Added comprehensive test to reproduce and verify the fix
- Root cause: PARTIAL rendering strategy couldn't position cursor in scrollback
- Solution: Component-agnostic line comparison with proper viewport boundary handling
This commit is contained in:
Mario Zechner 2025-08-11 14:17:46 +02:00
parent 1d9b77298c
commit 6e40c5d761
6 changed files with 485 additions and 106 deletions

View file

@ -1,102 +1,3 @@
- agent/tui: interrupting requests to model via ESC doesn't work. Interrupting bash tool works.
- agent/tui: "read all README.md files except in node_modules", gpt-5. wait for completion, then send a new message. Getting garbled output. this happens for both of the renderDifferential and renderDifferentialSurgical methods. We need to emiulate this in a test and get to the bottom of it.
```markdown
>> pi interactive chat <<<
Press Escape to interrupt while processing
Press CTRL+C to clear the text editorM deployments and building AI agents.peScript API)
Press CTRL+C twice quickly to exitdeterministic programs (via JSON mode in any language or the
## PackagesAPI)
[user]iding your own system prompts and tools
read all README.md files except in node_modulesrminal UI library with differential rendering
- **[@mariozechner/pi-agent](packages/agent)** - General-purpose agent with tool calling and session
[assistant]re lines)
[tool] glob({"pattern":"**/README.md"}) - CLI for managing vLLM deployments on GPU pods
README.mdad({"path": "packages/pods/README.md"})
node_modules/@biomejs/biome/README.md
node_modules/@esbuild/darwin-arm64/README.md
node_modules/@types/node/README.mdnt/README.md"}) vLLM configuration for agentic workloads.
node_modules/@xterm/headless/README.md
node_modules/@xterm/xterm/README.md
node_modules/chalk/readme.md tool calling and session persistence, modeled after Claude Code but
node_modules/esbuild/README.md. It comes with a built-in TUI (also modeled after Claude Code) for
node_modules/fsevents/README.md
node_modules/get-tsconfig/README.md
... (59 more lines)ned to be easy:
- Writing custom UIs on top of it (via JSON mode in any language or the TypeScript API)
[tool] read({"path": "README.md"})deterministic programs (via JSON mode in any language or the
# Pi MonorepoI)ath": "packages/tui/README.md"})
- Providing your own system prompts and tools
A collection of tools for managing LLM deployments and building AI agents.
Terminal UI framework with surgical differential rendering for building flicker-free interactive CLI
## Packagesre lines)
- **[@mariozechner/pi-tui](packages/tui)** - Terminal UI library with differential rendering
- **[@mariozechner/pi-agent](packages/agent)** - General-purpose agent with tool calling and session
persistencel Differential Rendering**: Three-strategy system that minimizes redraws to 1-2 lines for
- **[@mariozechner/pi](packages/pods)** - CLI for managing vLLM deployments on GPU podsads.
- **Scrollback Buffer Preservation**: Correctly maintains terminal history when content exceeds
... (76 more lines)
- **Zero Flicker**: Components like text editors remain perfectly still while other parts update
[tool] read({"path": "packages/agent/README.md"})tocomplete, selection lists, markdown rendering
# pi-agentl -g @mariozechner/pi
```
A general-purpose agent with tool calling and session persistence, modeled after Claude Code but
extremely hackable and minimal. It comes with a built-in TUI (also modeled after Claude Code) for────╮
interactive use. │
[tool] read({"path": "packages/tui/README.md"})──────────────────────────────────────────────────────╯
Everything is designed to be easy:
- Writing custom UIs on top of it (via JSON mode in any language or the TypeScript API)
- Using it for inference steps in deterministic programs (via JSON mode in any language or theve CLI
TypeScript API)
- Providing your own system prompts and tools
- Working with various LLM providers or self-hosted LLMs
... (422 more lines)ntial Rendering**: Three-strategy system that minimizes redraws to 1-2 lines for
typical updates
[tool] read({"path": "packages/pods/README.md"})maintains terminal history when content exceeds
# piport
- **Zero Flicker**: Components like text editors remain perfectly still while other parts update
Deploy and manage LLMs on GPU pods with automatic vLLM configuration for agentic workloads.ering
... (570 more lines)
## Installation
[user]
```bash
npm install -g @mariozechner/pi
```sistant]
⠴ Thinking...
... (501 more lines)
[tool] read({"path": "packages/tui/README.md"})──────────────────────────────────────────────────────╮
# @mariozechner/pi-tui │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
Terminal UI framework with surgical differential rendering for building flicker-free interactive CLI
applications.
## Features
- **Surgical Differential Rendering**: Three-strategy system that minimizes redraws to 1-2 lines for
typical updates
- **Scrollback Buffer Preservation**: Correctly maintains terminal history when content exceeds
viewport
- **Zero Flicker**: Components like text editors remain perfectly still while other parts update
- **Interactive Components**: Text editor with autocomplete, selection lists, markdown rendering
... (570 more lines)
[user]
l
[assistant]
Do you want me to list the current directory contents? If yes, should I include hidden files and subdir
ectories?
╭────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
↑14,783 ↓160 ⚡128 ⚒ 5
```
- pods: pi start outputs all models that can be run on the pod. however, it doesn't check the vllm version. e.g. gpt-oss can only run via vllm+gpt-oss. glm4.5 can only run on vllm nightly.
- agent: improve reasoning section in README.md