[eric-engberg]

Demo

Opening the picker after the last widget, browsing the full list (note the ↓ 72 more marker), and applying the highlighted widget. Each highlighted widget appears in the preview at the top, and Enter leaves the line exactly as previewed.

Powerline

Plain

Summary

Finding out what a widget looks like used to take several key presses: add it, look at the preview, then delete it. Repeating that across the catalog took a long time.

Now, while the add, insert, or change-type picker highlights a widget, the status line preview at the top of the TUI shows the line exactly as pressing Enter would leave it.

• Add/insert: the highlighted widget appears where it would be placed.
• Change type: the selected widget is shown with its type swapped.
• Arrowing through the list, or through top-level search results, updates the preview live.
• ESC, or browsing the category list where no widget is highlighted, restores the line. Nothing is saved until Enter.
• In powerline mode, the new widget's background color is picked once when the picker opens. It doesn't change on every keypress, and Enter adds the same color that was previewed. Previously the color was picked at random when Enter was pressed.
• Widgets render with the existing TUI sample data, so the preview runs nothing new.

Windowed picker lists

The picker used to render every entry. The All category has about 90 widgets, so it, and broad searches, ran past the bottom of the terminal and scrolled the status line preview off the top. Picker lists now show only the entries around the selection, with ↑ N more / ↓ N more markers.

• The number of entries shown depends on the terminal height and the number of status lines: 7 on a standard 80×24 terminal with one line, more on taller terminals.
• Entry numbers are still counted across the full list, so you can see your position in it.

Implementation

• items-editor/picker-selection.ts: placePickerSelection() builds the resulting line for add, insert, or change. The preview and the final Enter both use it, so they can't drift apart.
• items-editor/list-window.ts: getListWindow() keeps the selection centered once the list scrolls. getPickerMaxVisible() sizes the list to fit the terminal.
• ItemsEditor: the picker reports its candidate line, or null, through the existing onPreviewChange prop that label drafts already use, so App swaps it into what StatusLinePreview renders with no changes of its own. Picker lists render through the windowed list.

Testing

• New unit tests for placePickerSelection, getListWindow, and getPickerMaxVisible.
• New Ink render tests:
  • category browsing shows no preview
  • search highlights a widget, and the preview shows it in place
  • change-type swaps the widget in place
  • ESC restores the line
  • Enter applies exactly the previewed line, including the powerline background
  • unmounting clears the preview
  • a long list is windowed, and the shown entries plus the hidden count add up to the total
  • the window follows the selection when it wraps to the end
• bun test: 2380 pass. bun run lint: clean.
• Manual run in tmux:
  • preview: add via search updates live, ESC restores the line, change-type works, and Enter applies the previewed widget
  • powerline: the new widget keeps the same background while arrowing
  • windowing at 80×24 and 120×45: the preview stays on screen; with a long --config path wrapping onto two extra lines, only the title scrolls off
• Rebuilt as one commit on today's main, after feat(tui): opt-in dev reload that restarts the TUI in place #700 merged: bun test 3276 pass, 0 fail; bun run lint clean. Built CLI under Bun 1.4.2 and Node 26.10.0: piped renders match main in plain and Powerline modes, and the TUI opens and exits cleanly under both.