pi-mono icon indicating copy to clipboard operation
pi-mono copied to clipboard

Feat/tui overlay options

Open nicobailon opened this issue 5 days ago • 2 comments

Adds a proper OverlayOptions API for positioning and sizing overlays. Previously overlays just rendered at a fixed position with whatever width the component returned. Now you can anchor them to corners/edges/center, set percentage or absolute positions, add margins, and constrain dimensions.

image image

The API covers most use cases: width, widthPercent, minWidth, maxHeight, maxHeightPercent, anchor (9 positions like top-left, center, bottom-right), offsetX, offsetY, rowPercent, colPercent, row, col, and margin.

Also extended truncateToWidth() with an optional pad parameter - when true, it pads the result with spaces to exactly the target width. Handy for rendering fixed-width content like box interiors where you need consistent line lengths.

Fixed an edge case where overlay compositing would occasionally crash with "Rendered line exceeds terminal width" when content had complex ANSI/OSC sequences (was hitting this with subagent output containing hyperlinks). Added proper truncation and boundary checks throughout the compositing pipeline.

Extension API now supports overlayOptions in ctx.ui.custom() so extensions can position their overlay modals.

Tests

22 unit tests covering the various positioning and sizing options. Also added overlay-qa-tests.ts extension for manual testing - 7 commands to cycle through anchors, test margins, stack multiple overlays, stream content with overflow, etc. All overlays dismiss on Escape or Ctrl+C.

Manually tested all commands and made tweaks to ensure everything works as expected.

nicobailon avatar Jan 12 '26 18:01 nicobailon