Fixed terminal rendering bug and cleaned test helper

Summary

Closed, Completed

Understand
Reviewed GitHub issue and image.
Understand
Understand
Examined terminal UI editor code.
Understand
Build
Fixed screen corruption bug.
Build
Edit
Removed unnecessary test helper file.
Edit
Cleanup
Merged fix and cleaned branch.
Cleanup

Analyze GitHub issue(s): https://github.com/badlogic/pi-mono/issues/732 you will have to pull downt he image and read it as well to understand.

For each issue:

Read the issue in full, including all comments and linked issues/PRs.
For bugs:
- Ignore any root cause analysis in the issue (likely wrong)
- Read all related code files in full (no truncation)
- Trace the code path and identify the actual root cause
- Propose a fix
For feature requests:
- Read all related code files in full (no truncation)
- Propose the most concise implementation approach
- List affected files and changes needed

Do NOT implement unless explicitly asked. Analyze and propose only.

Let me download and view that image to understand the visual issue:

The image shows severe screen corruption with doubled/overlapping lines. This is a classic terminal rendering issue where content overflows the visible area. Let me examine the TUI editor code:

Now let me examine the main TUI rendering system:

Now let me look at how the editor is used in the interactive mode:

The file is large. Let me search for the key methods related to setEditorText and the editor layout:

Let me check how the TUI's doRender manages screen overflow:

Now let me check the CustomEditor component that's used in interactive mode:

Let me check the TUI documentation:

Now I have a complete understanding of the issue.

Issue #732 Analysis: "Prompts larger than the screen fuck up everything"

Summary

When setEditorText loads text that produces more lines than fit in the terminal, the TUI rendering breaks completely, causing visual corruption (doubled/overlapping lines) and ESC stops working.

Root Cause

The Editor component has no height constraint. It renders ALL layout lines regardless of terminal size:

In packages/tui/src/components/editor.ts (lines 318-390):

typescript

render(width: number): string[] {    const layoutLines = this.layoutText(width);  // Can be unlimited lines    const result: string[] = [];        result.push(horizontal.repeat(width));  // top border        // ❌ PROBLEM: Renders ALL layout lines without any limit    for (const layoutLine of layoutLines) {        // ... render each line        result.push(displayText + padding);    }        result.push(horizontal.repeat(width));  // bottom border    return result;}

render(width: number): string[] {    const layoutLines = this.layoutText(width);  // Can be unlimited lines    const result: string[] = [];        result.push(horizontal.repeat(width));  // top border        // ❌ PROBLEM: Renders ALL layout lines without any limit    for (const layoutLine of layoutLines) {        // ... render each line        result.push(displayText + padding);    }        result.push(horizontal.repeat(width));  // bottom border    return result;}

When the total rendered lines exceed terminal height:

The TUI writes lines sequentially with \r\n, causing terminal scrolling
The cursor position tracking (cursorRow in TUI) becomes desynchronized
Differential rendering then writes to wrong positions, creating the ghosting/corruption seen in the screenshot
Input handling breaks because the TUI state is inconsistent

Why ESC Stops Working

The TUI's input forwarding depends on consistent state. When rendering breaks, the component may not receive or correctly process input. Ctrl+C still works because it triggers SIGINT at the OS level.

Proposed Fix

Add vertical scrolling with a max height constraint to the Editor, following the same pattern as SelectList which already has maxVisible:

Changes to packages/tui/src/components/editor.ts:

Add new state:

typescript

private maxLines: number = Infinity;  // Max visible content linesprivate scrollOffset: number = 0;     // First visible line index

private maxLines: number = Infinity;  // Max visible content linesprivate scrollOffset: number = 0;     // First visible line index

Add setter method:

Add scroll adjustment method:

typescript

private ensureCursorVisible(visualLines: LayoutLine[]): void {    // Find which visual line has the cursor    const cursorVisualLine = visualLines.findIndex(vl => vl.hasCursor);    if (cursorVisualLine === -1) return;        // Adjust scroll if cursor is out of view    if (cursorVisualLine < this.scrollOffset) {        this.scrollOffset = cursorVisualLine;    } else if (cursorVisualLine >= this.scrollOffset + this.maxLines) {        this.scrollOffset = cursorVisualLine - this.maxLines + 1;    }}

private ensureCursorVisible(visualLines: LayoutLine[]): void {    // Find which visual line has the cursor    const cursorVisualLine = visualLines.findIndex(vl => vl.hasCursor);    if (cursorVisualLine === -1) return;        // Adjust scroll if cursor is out of view    if (cursorVisualLine < this.scrollOffset) {        this.scrollOffset = cursorVisualLine;    } else if (cursorVisualLine >= this.scrollOffset + this.maxLines) {        this.scrollOffset = cursorVisualLine - this.maxLines + 1;    }}

Modify render() to slice visible lines:

typescript

render(width: number): string[] {    const layoutLines = this.layoutText(width);        // Ensure cursor is visible before slicing    this.ensureCursorVisible(layoutLines);        // Slice to visible range    const visibleLines = this.maxLines === Infinity         ? layoutLines         : layoutLines.slice(this.scrollOffset, this.scrollOffset + this.maxLines);        const result: string[] = [];    result.push(horizontal.repeat(width));        for (const layoutLine of visibleLines) {  // Only visible lines        // ... existing rendering logic    }        result.push(horizontal.repeat(width));    // ... autocomplete rendering    return result;}

render(width: number): string[] {    const layoutLines = this.layoutText(width);        // Ensure cursor is visible before slicing    this.ensureCursorVisible(layoutLines);        // Slice to visible range    const visibleLines = this.maxLines === Infinity         ? layoutLines         : layoutLines.slice(this.scrollOffset, this.scrollOffset + this.maxLines);        const result: string[] = [];    result.push(horizontal.repeat(width));        for (const layoutLine of visibleLines) {  // Only visible lines        // ... existing rendering logic    }        result.push(horizontal.repeat(width));    // ... autocomplete rendering    return result;}

Call ensureCursorVisible() after cursor movements (or just let render() handle it)

Changes to packages/coding-agent/src/modes/interactive/interactive-mode.ts:

In init() or wherever the editor is configured, calculate and set a reasonable max height based on terminal dimensions minus other UI elements (header, footer, status, etc.).

Alternative Consideration

A more invasive fix would change the Component interface to pass both width and height:

However, this is a breaking change and affects all components. The maxLines approach is self-contained to the Editor.

Files Affected

packages/tui/src/components/editor.ts - Add scrolling logic (~30-40 lines)
packages/coding-agent/src/modes/interactive/interactive-mode.ts - Set editor max height (optional, could use a sensible default like terminal height - 10)

editor has access to tui, which has access to terminal, which tells us rows and cols, no?

You're right, let me check:

Currently, Editor doesn't receive TUI or Terminal:

typescript

// Editor constructor - only gets themeconstructor(theme: EditorTheme) {    this.theme = theme;    this.borderColor = theme.borderColor;}
// CustomEditor - gets theme + keybindings, no TUIconstructor(theme: EditorTheme, keybindings: KeybindingsManager) {    super(theme);    this.keybindings = keybindings;}

// Editor constructor - only gets themeconstructor(theme: EditorTheme) {    this.theme = theme;    this.borderColor = theme.borderColor;}
// CustomEditor - gets theme + keybindings, no TUIconstructor(theme: EditorTheme, keybindings: KeybindingsManager) {    super(theme);    this.keybindings = keybindings;}

But you're right, it would be cleaner to pass a reference. Two options:

Option A: Pass Terminal to Editor

typescript

constructor(theme: EditorTheme, terminal?: Terminal) {    // In render(), use terminal?.rows to auto-limit}

constructor(theme: EditorTheme, terminal?: Terminal) {    // In render(), use terminal?.rows to auto-limit}

Option B: Pass a height getter (more decoupled)

typescript

constructor(theme: EditorTheme, options?: { getAvailableHeight?: () => number }) {    // In render(), call getAvailableHeight?.() }

constructor(theme: EditorTheme, options?: { getAvailableHeight?: () => number }) {    // In render(), call getAvailableHeight?.() }

Option B is nice because the caller can account for other UI elements (header, footer, status) when computing available height. The Editor doesn't need to know about the full layout.

In interactive-mode.ts, it would be:

ok, then lets have the editor (and customeditor) receive Tui as a parameter to the constructor (first parameter)

Let me find all places where Editor/CustomEditor is instantiated:

There are many usages, mostly in tests. I'll make TUI the first parameter but allow undefined for backward compatibility in tests. When undefined, the editor won't limit height (current behavior).

Here's the proposed fix:

Files to modify:

packages/tui/src/components/editor.ts - Add TUI param, implement scrolling
packages/coding-agent/src/modes/interactive/components/custom-editor.ts - Add TUI param
packages/coding-agent/src/modes/interactive/interactive-mode.ts - Pass TUI
packages/coding-agent/src/modes/interactive/components/extension-editor.ts - Pass TUI
packages/coding-agent/examples/extensions/question.ts - Pass TUI
packages/coding-agent/examples/extensions/questionnaire.ts - Pass TUI
packages/tui/test/editor.test.ts - Pass undefined as first arg
packages/tui/test/chat-simple.ts - Pass TUI

Should I implement this now?

no backward compatibility

Got it. TUI is required, all call sites must be updated.

Summary of changes:

packages/tui/src/components/editor.ts
- Constructor: constructor(tui: TUI, theme: EditorTheme)
- Add scroll offset tracking
- In render(): limit visible lines based on this.tui.terminal.rows, keep cursor in view
packages/coding-agent/src/modes/interactive/components/custom-editor.ts
- Constructor: constructor(tui: TUI, theme: EditorTheme, keybindings: KeybindingsManager)
packages/coding-agent/src/modes/interactive/interactive-mode.ts
- Pass this.ui to CustomEditor
packages/coding-agent/src/modes/interactive/components/extension-editor.ts
- Pass TUI to Editor
packages/coding-agent/examples/extensions/question.ts
- Pass TUI to Editor
packages/coding-agent/examples/extensions/questionnaire.ts
- Pass TUI to Editor
packages/tui/test/editor.test.ts
- Create TUI with mock/virtual terminal for each test
packages/tui/test/chat-simple.ts
- Pass TUI to Editor

Should I implement?

create a feature branch, then go to town

you still there?

Yes, on it!

Now let me implement the changes. First, update the Editor:

Now update the CustomEditor:

Now update interactive-mode.ts:

Now update the test file:

Now let's run the type check:

The issue is that tui is private in Editor but RainbowEditor tries to declare its own. I need to make tui protected in Editor:

Type check passes. Let me run the editor tests to verify:

All tests pass. Let me verify a few lines in the test file to make sure the changes look right:

Now let me update the TUI README to reflect the new API:

Loading more messages…