@oh-my-pi/pi-coding-agent 16.1.17 → 16.1.19

package/src/modes/components/custom-editor.test.ts

@@ -93,15 +93,17 @@ describe("CustomEditor bracketed path paste", () => {
 		expect(extractBracketedImagePastePaths(bracketedPaste("/tmp/report.csv"))).toBeUndefined();
 	});
 
-	it("routes non-image path pastes through the file-path hook", async () => {
+	it("inserts non-image path pastes as literal text instead of attaching them", () => {
 		const { editor } = makeEditor();
-		const pasted = Promise.withResolvers<string>();
-		editor.onPasteFilePath = path => pasted.resolve(path);
+		let imagePathCalls = 0;
+		editor.onPasteImagePath = () => {
+			imagePathCalls++;
+		};
 
 		editor.handleInput(bracketedPaste("/tmp/report.csv"));
 
-		expect(await pasted.promise).toBe("/tmp/report.csv");
-		expect(editor.getText()).toBe("");
+		expect(editor.getText()).toBe("/tmp/report.csv");
+		expect(imagePathCalls).toBe(0);
 	});
 });
 

package/src/modes/components/custom-editor.ts

@@ -318,8 +318,6 @@ export class CustomEditor extends Editor {
 	onPasteImage?: () => Promise<boolean>;
 	/** Called when a bracketed paste contains one or more image-file paths. */
 	onPasteImagePath?: (path: string) => void | Promise<void>;
-	/** Called when a bracketed paste contains one or more non-image file paths. */
-	onPasteFilePath?: (path: string) => void | Promise<void>;
 	/** Called when the configured raw text-paste shortcut is pressed. */
 	onPasteTextRaw?: () => void;
 	/** Called when the configured dequeue shortcut is pressed. */
@@ -505,20 +503,12 @@ export class CustomEditor extends Editor {
 			return;
 		}
 
-		const pastedPaths = extractBracketedPastePaths(data);
-		if (pastedPaths) {
-			const canHandlePaths = pastedPaths.every(path =>
-				isImagePath(path) ? this.onPasteImagePath !== undefined : this.onPasteFilePath !== undefined,
-			);
-			if (canHandlePaths) {
-				void (async () => {
-					for (const path of pastedPaths) {
-						if (isImagePath(path)) await this.onPasteImagePath?.(path);
-						else await this.onPasteFilePath?.(path);
-					}
-				})();
-				return;
-			}
+		const pastedImagePaths = extractBracketedImagePastePaths(data);
+		if (pastedImagePaths && this.onPasteImagePath) {
+			void (async () => {
+				for (const path of pastedImagePaths) await this.onPasteImagePath?.(path);
+			})();
+			return;
 		}
 
 		const parsedKey = parseKey(data);

package/src/modes/components/extensions/extension-dashboard.ts

@@ -1,32 +1,34 @@
 /**
- * ExtensionDashboard - Tabbed layout for the Extension Control Center.
+ * ExtensionDashboard - Fullscreen alternate-screen control center for extensions.
  *
- * Layout:
- * - Top: Horizontal tab bar for provider selection
- * - Body: 2-column grid (inventory list | preview panel)
+ * Chrome mirrors the `/settings` overlay: a titled rounded box, a shared
+ * {@link TabBar} for provider selection, and a two-column body (inventory list |
+ * inspector). Both panes are mouse-aware — wheel scrolls, hover highlights, and
+ * clicks select/activate — routed from a single SGR-mouse handler.
  *
  * Navigation:
- * - TAB/Shift+TAB: Cycle through provider tabs
- * - Up/Down/j/k: Navigate list
- * - Space: Toggle selected item (or master switch)
- * - Esc: Close dashboard (clears search first if active)
+ * - Tab/Shift+Tab or ←/→: switch provider tab
+ * - Up/Down/j/k or wheel: move list selection
+ * - Space/Enter or click: toggle selected item (or provider master switch)
+ * - Wheel over the inspector: scroll the detail pane
+ * - Esc: clear search (if active) then close
  */
 import {
 	type Component,
-	Container,
 	matchesKey,
 	padding,
-	Spacer,
-	Text,
+	parseSgrMouse,
+	ScrollView,
+	type Tab,
+	TabBar,
 	truncateToWidth,
 	visibleWidth,
-	wrapTextWithAnsi,
 } from "@oh-my-pi/pi-tui";
 import { Settings } from "../../../config/settings";
-import { DynamicBorder } from "../../../modes/components/dynamic-border";
+import { getTabBarTheme } from "../../../modes/shared";
 import { theme } from "../../../modes/theme/theme";
 import { matchesAppInterrupt } from "../../../modes/utils/keybinding-matchers";
-import { handleTabSwitchKey, padLinesToHeight } from "../selector-helpers";
+import { bottomBorder, divider, row, topBorder } from "../overlay-box";
 import { ExtensionList } from "./extension-list";
 import { InspectorPanel } from "./inspector-panel";
 import {
@@ -37,17 +39,41 @@ import {
 	refreshState,
 	toggleProvider,
 } from "./state-manager";
-import type { DashboardState } from "./types";
+import type { DashboardState, ProviderTab } from "./types";
 
-const EXT_FOOTER = " ↑/↓: navigate  Space: toggle  ←/→: provider  Esc: close";
+const EXT_FOOTER = " ↑/↓: navigate · Space: toggle · ←/→: provider · Esc: close";
 
-export class ExtensionDashboard extends Container {
+/**
+ * Map dashboard provider tabs to {@link TabBar} tabs. Empty *enabled* providers
+ * are muted — skipped by keyboard nav and unclickable; disabled providers stay
+ * selectable (with a leading disabled glyph) so their master switch can be
+ * re-enabled from the list. The "all" tab is never muted or marked.
+ */
+export function buildTabBarTabs(tabs: ProviderTab[]): Tab[] {
+	return tabs.map(tab => {
+		const isAll = tab.id === "all";
+		const isEmptyEnabled = tab.count === 0 && tab.enabled && !isAll;
+		const isDisabled = !tab.enabled && !isAll;
+		let label = tab.label;
+		if (tab.count > 0) label += ` (${tab.count})`;
+		if (isDisabled) label = `${theme.status.disabled} ${label}`;
+		return { id: tab.id, label, short: tab.label, muted: isEmptyEnabled };
+	});
+}
+
+export class ExtensionDashboard implements Component {
 	#state!: DashboardState;
 	#mainList!: ExtensionList;
 	#inspector!: InspectorPanel;
+	#tabBar!: TabBar;
+	#body!: TwoColumnBody;
 	#refreshToken = 0;
-	#builtRows = -1;
-	#builtCols = -1;
+	// Frame geometry from the last render, for SGR mouse hit-testing. The
+	// fullscreen overlay paints from screen row 0, so mouse rows map 1:1.
+	#tabRowStart = 0;
+	#tabRowCount = 0;
+	#bodyRowStart = 0;
+	#bodyRowCount = 0;
 
 	onClose?: () => void;
 	onRequestRender?: () => void;
@@ -56,9 +82,7 @@ export class ExtensionDashboard extends Container {
 		private readonly cwd: string,
 		private readonly settings: Settings | null,
 		private readonly terminalHeight: number,
-	) {
-		super();
-	}
+	) {}
 
 	static async create(
 		cwd: string,
@@ -75,37 +99,36 @@ export class ExtensionDashboard extends Container {
 		const disabledIds = sm ? ((sm.get("disabledExtensions") as string[]) ?? []) : [];
 		this.#state = await createInitialState(this.cwd, disabledIds);
 
-		// Calculate max visible items based on terminal height
-		// Reserve ~10 lines for header, tabs, help text, borders
-		const maxVisible = this.#maxVisibleItems();
-
-		// Create main list - always focused
+		const initialMaxVisible = Math.max(3, this.terminalHeight - 9);
 		this.#mainList = new ExtensionList(
 			this.#state.searchFiltered,
 			{
 				onSelectionChange: ext => {
 					this.#state.selected = ext;
 					this.#inspector.setExtension(ext);
+					// A fresh selection resets the inspector to the top.
+					this.#body.resetInspectorScroll();
 				},
-				onToggle: (extensionId, enabled) => {
-					this.#handleExtensionToggle(extensionId, enabled);
-				},
-				onMasterToggle: providerId => {
-					this.#handleProviderToggle(providerId);
-				},
+				onToggle: (extensionId, enabled) => this.#handleExtensionToggle(extensionId, enabled),
+				onMasterToggle: providerId => this.#handleProviderToggle(providerId),
 				masterSwitchProvider: this.#getActiveProviderId(),
 			},
-			maxVisible,
+			initialMaxVisible,
 		);
 		this.#mainList.setFocused(true);
 
-		// Create inspector
 		this.#inspector = new InspectorPanel();
 		if (this.#state.selected) {
 			this.#inspector.setExtension(this.#state.selected);
 		}
 
-		this.#buildLayout();
+		this.#body = new TwoColumnBody(this.#mainList, this.#inspector, this.terminalHeight);
+
+		this.#tabBar = new TabBar("", buildTabBarTabs(this.#state.tabs), getTabBarTheme());
+		this.#tabBar.showHint = false;
+		this.#tabBar.onTabChange = tab => this.#selectProviderById(tab.id);
+		const activeId = this.#state.tabs[this.#state.activeTabIndex]?.id;
+		if (activeId) this.#tabBar.setActiveById(activeId);
 	}
 
 	#getActiveProviderId(): string | null {
@@ -118,98 +141,117 @@ export class ExtensionDashboard extends Container {
 		return process.stdout.rows || this.terminalHeight || 24;
 	}
 
-	#uiWidth(): number {
-		return Math.max(20, process.stdout.columns || 80);
-	}
-
-	#footerLines(): number {
-		return Math.max(1, wrapTextWithAnsi(theme.fg("dim", EXT_FOOTER), this.#uiWidth()).length);
-	}
-
-	/** Height budget for the two-column body, sized to the live terminal. */
-	#computeBodyHeight(): number {
-		// Chrome: top border + title + tab bar + spacer (4), then spacer + footer + bottom border.
-		const chrome = 4 + 1 + this.#footerLines() + 1;
-		return Math.max(5, this.#terminalRows() - chrome);
+	/**
+	 * Fullscreen frame: titled top border, the tab row(s), a divider, the
+	 * two-column body sized to fill the viewport, a divider, the footer hint, and
+	 * the bottom border. Records row geometry for mouse hit-testing.
+	 */
+	render(width: number): readonly string[] {
+		const height = Math.max(14, this.#terminalRows());
+		const innerWidth = Math.max(1, width - 4);
+
+		const tabLines = this.#tabBar.render(innerWidth);
+		// Fixed chrome: top border + tab rows + divider + divider + footer + bottom border.
+		const fixedRows = 1 + tabLines.length + 1 + 1 + 1 + 1;
+		const contentRows = Math.max(5, height - fixedRows);
+
+		this.#mainList.setMaxVisible(Math.max(3, contentRows - 2));
+		this.#body.setMaxHeight(contentRows);
+		const bodyLines = this.#body.render(innerWidth);
+
+		const out: string[] = [];
+		out.push(topBorder(width, "Extension Control Center"));
+		this.#tabRowStart = out.length;
+		this.#tabRowCount = tabLines.length;
+		for (const line of tabLines) out.push(row(line, width));
+		out.push(divider(width));
+		this.#bodyRowStart = out.length;
+		this.#bodyRowCount = contentRows;
+		for (let i = 0; i < contentRows; i++) out.push(row(bodyLines[i] ?? "", width));
+		out.push(divider(width));
+		out.push(row(theme.fg("dim", EXT_FOOTER), width));
+		out.push(bottomBorder(width));
+		return out;
 	}
 
-	#maxVisibleItems(): number {
-		// List chrome inside the body: search line, blank line, scroll indicator.
-		return Math.max(3, this.#computeBodyHeight() - 3);
+	invalidate(): void {
+		this.#tabBar.invalidate();
+		this.#mainList.invalidate();
+		this.#inspector.invalidate();
 	}
 
-	override render(width: number): readonly string[] {
-		// Rebuild when terminal geometry changes so the full-screen overlay
-		// re-fits on resize.
-		if (this.#terminalRows() !== this.#builtRows || this.#uiWidth() !== this.#builtCols) {
-			this.#buildLayout();
+	/**
+	 * Route an SGR mouse report against the last render's geometry. Wheel scrolls
+	 * the pane under the pointer, motion drives hover highlights (tabs + rows),
+	 * and a left click switches tabs or selects/activates a list row.
+	 */
+	#handleMouse(data: string): void {
+		const event = parseSgrMouse(data);
+		if (!event) return;
+
+		// row() insets content by two columns (border + space).
+		const innerCol = event.col - 2;
+		const tabLine = event.row - this.#tabRowStart;
+		const overTabs = tabLine >= 0 && tabLine < this.#tabRowCount;
+		const bodyLine = event.row - this.#bodyRowStart;
+		const overBody = bodyLine >= 0 && bodyLine < this.#bodyRowCount;
+		const leftWidth = this.#body.leftWidth;
+		const overList = overBody && innerCol < leftWidth;
+		const overInspector = overBody && innerCol >= leftWidth + 3;
+
+		if (event.wheel !== null) {
+			if (overList) {
+				this.#mainList.handleWheel(event.wheel);
+				this.onRequestRender?.();
+			} else if (overInspector) {
+				this.#body.scrollInspector(event.wheel);
+				this.onRequestRender?.();
+			}
+			return;
 		}
-		const lines = super.render(width);
-		// Pad to the full viewport so the dashboard covers the screen instead of
-		// letting the transcript peek through below it.
-		return padLinesToHeight(lines, this.#terminalRows());
-	}
 
-	#buildLayout(): void {
-		this.clear();
-
-		// Top border
-		this.addChild(new DynamicBorder());
-
-		// Title
-		this.addChild(new Text(theme.bold(theme.fg("accent", " Extension Control Center")), 0, 0));
-
-		// Tab bar
-		this.addChild(new Text(this.#renderTabBar(), 0, 0));
-		this.addChild(new Spacer(1));
-
-		// 2-column body sized to fill the live terminal viewport.
-		const bodyMaxHeight = this.#computeBodyHeight();
-		this.#mainList.setMaxVisible(this.#maxVisibleItems());
-		this.addChild(new TwoColumnBody(this.#mainList, this.#inspector, bodyMaxHeight));
+		if (event.motion) {
+			const hoveredTab = overTabs ? this.#tabBar.tabAt(tabLine, innerCol) : undefined;
+			this.#tabBar.setHoverTab(hoveredTab && !hoveredTab.muted ? hoveredTab.id : null);
+			this.#mainList.setHoverIndex(overList ? this.#mainList.hitTest(bodyLine) : null);
+			this.onRequestRender?.();
+			return;
+		}
 
-		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("dim", EXT_FOOTER), 0, 0));
+		if (!event.leftClick) return;
 
-		// Bottom border
-		this.addChild(new DynamicBorder());
-		this.#builtRows = this.#terminalRows();
-		this.#builtCols = this.#uiWidth();
+		if (overTabs) {
+			const tab = this.#tabBar.tabAt(tabLine, innerCol);
+			if (tab) this.#tabBar.selectTab(tab.id);
+			return;
+		}
+		if (overList) {
+			this.#mainList.handleClick(bodyLine);
+			this.onRequestRender?.();
+		}
 	}
 
-	#renderTabBar(): string {
-		const parts: string[] = [" "];
-
-		for (let i = 0; i < this.#state.tabs.length; i++) {
-			const tab = this.#state.tabs[i];
-			const isActive = i === this.#state.activeTabIndex;
-			const isEmpty = tab.count === 0 && tab.id !== "all";
-			const isDisabled = !tab.enabled && tab.id !== "all";
+	/** Switch to the provider tab with `id`, re-filtering the list around it. */
+	#selectProviderById(id: string): void {
+		const index = this.#state.tabs.findIndex(t => t.id === id);
+		if (index < 0) return;
+		this.#state.activeTabIndex = index;
 
-			// Build label with count
-			let label = tab.label;
-			if (tab.count > 0) {
-				label += ` (${tab.count})`;
-			}
+		const tab = this.#state.tabs[index];
+		this.#state.tabFiltered = filterByProvider(this.#state.extensions, tab.id);
+		this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, this.#state.searchQuery);
+		this.#state.listIndex = 0;
+		this.#state.scrollOffset = 0;
+		this.#state.selected = this.#state.searchFiltered[0] ?? null;
 
-			const displayLabel = isDisabled ? `${theme.status.disabled} ${label}` : label;
-
-			if (isActive) {
-				// Active tab: background highlight
-				parts.push(theme.bg("selectedBg", ` ${displayLabel} `));
-			} else if (isDisabled) {
-				// Disabled provider: dim
-				parts.push(theme.fg("dim", ` ${displayLabel} `));
-			} else if (isEmpty) {
-				// Empty enabled provider: very dim, unselectable
-				parts.push(theme.fg("dim", ` ${label} `));
-			} else {
-				// Normal enabled provider
-				parts.push(theme.fg("muted", ` ${label} `));
-			}
+		this.#mainList.setExtensions(this.#state.searchFiltered);
+		this.#mainList.setMasterSwitchProvider(this.#getActiveProviderId());
+		this.#mainList.resetSelection();
+		if (this.#state.selected) {
+			this.#inspector.setExtension(this.#state.selected);
 		}
-
-		return parts.join("");
+		this.#body.resetInspectorScroll();
+		this.onRequestRender?.();
 	}
 
 	#handleProviderToggle(providerId: string): void {
@@ -241,7 +283,7 @@ export class ExtensionDashboard extends Container {
 
 	async #refreshFromState(): Promise<void> {
 		const refreshToken = ++this.#refreshToken;
-		// Remember current tab ID before refresh
+		// Remember the current tab so it survives the re-sort.
 		const currentTabId = this.#state.tabs[this.#state.activeTabIndex]?.id;
 
 		const sm = this.settings ?? Settings.instance;
@@ -250,7 +292,7 @@ export class ExtensionDashboard extends Container {
 		if (refreshToken !== this.#refreshToken) return;
 		this.#state = nextState;
 
-		// Find the same tab in the new (re-sorted) list
+		// Re-anchor on the same tab id in the (re-sorted) list.
 		if (currentTabId) {
 			const newIndex = this.#state.tabs.findIndex(t => t.id === currentTabId);
 			if (newIndex >= 0) {
@@ -260,12 +302,11 @@ export class ExtensionDashboard extends Container {
 
 		this.#mainList.setExtensions(this.#state.searchFiltered);
 		this.#mainList.setMasterSwitchProvider(this.#getActiveProviderId());
-
 		if (this.#state.selected) {
 			this.#inspector.setExtension(this.#state.selected);
 		}
 
-		this.#buildLayout();
+		this.#tabBar.setTabs(buildTabBarTabs(this.#state.tabs), currentTabId);
 		this.onRequestRender?.();
 	}
 
@@ -275,45 +316,17 @@ export class ExtensionDashboard extends Container {
 		if (this.#state.selected) {
 			this.#inspector.setExtension(this.#state.selected);
 		}
-		this.#buildLayout();
+		this.#tabBar.setTabs(buildTabBarTabs(this.#state.tabs), this.#state.tabs[this.#state.activeTabIndex]?.id);
 		this.onRequestRender?.();
 	}
 
-	#switchTab(direction: 1 | -1): void {
-		const numTabs = this.#state.tabs.length;
-		if (numTabs === 0) return;
-
-		// Find next selectable tab (skip empty+enabled providers)
-		let nextIndex = this.#state.activeTabIndex;
-		for (let i = 0; i < numTabs; i++) {
-			nextIndex = (nextIndex + direction + numTabs) % numTabs;
-			const tab = this.#state.tabs[nextIndex];
-			const isEmptyEnabled = tab.count === 0 && tab.enabled && tab.id !== "all";
-			if (!isEmptyEnabled) break;
-		}
-		this.#state.activeTabIndex = nextIndex;
-
-		// Re-filter for new tab
-		const tab = this.#state.tabs[this.#state.activeTabIndex];
-		this.#state.tabFiltered = filterByProvider(this.#state.extensions, tab.id);
-		this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, this.#state.searchQuery);
-		this.#state.listIndex = 0;
-		this.#state.scrollOffset = 0;
-		this.#state.selected = this.#state.searchFiltered[0] ?? null;
-
-		// Update list
-		this.#mainList.setExtensions(this.#state.searchFiltered);
-		this.#mainList.setMasterSwitchProvider(this.#getActiveProviderId());
-		this.#mainList.resetSelection();
-
-		if (this.#state.selected) {
-			this.#inspector.setExtension(this.#state.selected);
+	handleInput(data: string): void {
+		// SGR mouse reports (the fullscreen overlay enables tracking).
+		if (data.startsWith("\x1b[<")) {
+			this.#handleMouse(data);
+			return;
 		}
 
-		this.#buildLayout();
-	}
-
-	handleInput(data: string): void {
 		// Ctrl+C - close immediately
 		if (matchesKey(data, "ctrl+c")) {
 			this.onClose?.();
@@ -327,56 +340,99 @@ export class ExtensionDashboard extends Container {
 				this.#state.searchFiltered = this.#state.tabFiltered;
 				this.#mainList.setExtensions(this.#state.searchFiltered);
 				this.#mainList.clearSearch();
-				this.#buildLayout();
+				this.onRequestRender?.();
 				return;
 			}
 			this.onClose?.();
 			return;
 		}
 
-		// Tab/Shift+Tab or Left/Right: Cycle through tabs
-		if (handleTabSwitchKey(data, direction => this.#switchTab(direction))) {
+		// Tab/Shift+Tab or ←/→: switch provider tabs (fires onTabChange).
+		if (this.#tabBar.handleInput(data)) {
 			return;
 		}
 
-		// All other input goes to the list
+		// All other input goes to the list.
 		this.#mainList.handleInput(data);
 
-		// Sync search query back to state
+		// Sync search query back to state.
 		const query = this.#mainList.getSearchQuery();
 		if (query !== this.#state.searchQuery) {
 			this.#state.searchQuery = query;
 			this.#state.searchFiltered = applyFilter(this.#state.tabFiltered, query);
 		}
+		this.onRequestRender?.();
 	}
 }
 
 /**
- * Two-column body component for side-by-side rendering.
+ * Two-column body: inventory list on the left, inspector on the right, split by
+ * a vertical rule. The inspector is a {@link ScrollView} viewport so long detail
+ * panes scroll (wheel) with an auto scrollbar; the left list manages its own
+ * windowing. Records the left-column width so the host can hit-test panes.
  */
 class TwoColumnBody implements Component {
+	#maxHeight: number;
+	#rightScroll = 0;
+	#rightTotal = 0;
+	#leftWidth = 0;
+
 	constructor(
 		private readonly leftPane: ExtensionList,
 		private readonly rightPane: InspectorPanel,
-		private readonly maxHeight: number,
-	) {}
+		maxHeight: number,
+	) {
+		this.#maxHeight = maxHeight;
+	}
+
+	setMaxHeight(maxHeight: number): void {
+		this.#maxHeight = maxHeight;
+	}
+
+	/** Content width of the left (list) column from the last render. */
+	get leftWidth(): number {
+		return this.#leftWidth;
+	}
+
+	resetInspectorScroll(): void {
+		this.#rightScroll = 0;
+	}
+
+	/** Wheel notch over the inspector pane: scroll its content, clamped. */
+	scrollInspector(delta: -1 | 1): void {
+		const max = Math.max(0, this.#rightTotal - this.#maxHeight);
+		this.#rightScroll = Math.max(0, Math.min(this.#rightScroll + delta, max));
+	}
 
 	render(width: number): readonly string[] {
 		const leftWidth = Math.floor(width * 0.5);
+		this.#leftWidth = leftWidth;
 		const rightWidth = Math.max(0, width - leftWidth - 3);
+		const numLines = this.#maxHeight;
 
 		const leftLines = this.leftPane.render(leftWidth);
 		const rightLines = this.rightPane.render(rightWidth);
+		this.#rightTotal = rightLines.length;
+		const maxScroll = Math.max(0, this.#rightTotal - numLines);
+		if (this.#rightScroll > maxScroll) this.#rightScroll = maxScroll;
+
+		// `totalRows` omitted so the ScrollView windows `rightLines` by the scroll
+		// offset (rather than treating them as a pre-windowed slice) and pads short
+		// content to exactly `numLines`.
+		const rightView = new ScrollView(rightLines, {
+			height: numLines,
+			scrollbar: "auto",
+			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+		});
+		rightView.setScrollOffset(this.#rightScroll);
+		const rightRendered = rightView.render(rightWidth);
 
-		// Fill the full body height so the dashboard reads as a full-screen view.
-		const numLines = this.maxHeight;
 		const combined: string[] = [];
 		const separator = theme.fg("dim", ` ${theme.boxRound.vertical} `);
-
 		for (let i = 0; i < numLines; i++) {
 			const left = truncateToWidth(leftLines[i] ?? "", leftWidth);
 			const leftPadded = left + padding(Math.max(0, leftWidth - visibleWidth(left)));
-			const right = truncateToWidth(rightLines[i] ?? "", rightWidth);
+			const right = rightRendered[i] ?? "";
 			combined.push(leftPadded + separator + right);
 		}