fix(tui): preserved prefixes in completed tool cards

- Wrapped answered Ask labels at the card content width for single and grouped questions.

- Applied hover code-rail wrapping to collapsed as well as expanded LSP cards.

Fixes #15677

Author: roboomp

packages/tui/CHANGELOG.md

@@ -10,14 +10,14 @@
 ### Fixed
 
 - SVG fences in CRLF or CR-only assistant Markdown now render as figures instead of source code ([#15663](https://github.com/can1357/oh-my-pi/issues/15663)).
-- Tool-card continuations stay aligned beneath line numbers, tree connectors, and option or code rails in Write, Read, Edit, Todo, Ask, and LSP previews ([#15677](https://github.com/can1357/oh-my-pi/issues/15677)).
 - Fixed clipboard-image and image-path pastes being dropped while the composer draft is edited beneath an ask or approval dialog ([#15642](https://github.com/can1357/oh-my-pi/pull/15642) by [@H4vC](https://github.com/H4vC))
 - Fixed inline images inside tmux assuming Kitty graphics from the pane's `TERM`; the attached client is identified from tmux's terminal-type reply or its `TERM` (e.g. `xterm-kitty`), and unrecognized clients go to the SIXEL probe ([#15524](https://github.com/can1357/oh-my-pi/issues/15524)).
 - Fixed ```svg fences rendering as their source code instead of a drawing when no theme was installed yet, e.g. in an extension rendering a message that opens with the fence ([#15660](https://github.com/can1357/oh-my-pi/issues/15660))
 - Fixed pastes inside tmux 3.5a and older submitting line by line after another program turned bracketed paste off on the pane; omp now re-enables it on the next render or keypress ([#15596](https://github.com/can1357/oh-my-pi/issues/15596))
 - Fixed assistant replies containing a table (on image-capable terminals with table charts on) publishing still-streaming rows to native scrollback, which froze the block's append-only retirement and could leave overwritten reply rows in scrollback ([#15693](https://github.com/can1357/oh-my-pi/issues/15693))
 - Fixed streamed thinking publishing a line to native scrollback just before a code fence or `<!-- -->` sentinel split across deltas rewrote it with the prose-fold ellipsis ([#15693](https://github.com/can1357/oh-my-pi/issues/15693))
 - Fixed streamed assistant text or thinking containing a tab stopping all later rows of the reply from retiring into native scrollback until the turn ended ([#15693](https://github.com/can1357/oh-my-pi/issues/15693))
+- Fixed wrapped lines in Write, Read, Edit, Todo, Ask and LSP tool cards losing their alignment under line numbers, tree connectors, and option or code rails ([#15677](https://github.com/can1357/oh-my-pi/issues/15677))
 
 ## [18.10.4] - 2026-10-13
 

packages/tui/src/tools/ask.ts

@@ -203,6 +203,11 @@ export function optionMarker(uiTheme: Theme, multi: boolean | undefined, selecte
 	return selected ? uiTheme.radio.selected : uiTheme.radio.unselected;
 }
 
+function wrapOptionLabel(marker: string, label: string, width: number): string[] {
+	const prefix = ` ${marker} `;
+	return wrapPrefixedLine(prefix, " ".repeat(visibleWidth(prefix)), label, width);
+}
+
 /** Render the offered options for a question form as flat marker bullets (no tree guides). */
 function renderQuestionOptionLines(
 	uiTheme: Theme,
@@ -214,8 +219,7 @@ function renderQuestionOptionLines(
 	const out: string[] = [];
 	for (const opt of options) {
 		const optLabel = renderInlineMarkdown(opt.label, mdTheme, t => uiTheme.fg("muted", t));
-		const marker = ` ${uiTheme.fg("dim", optionMarker(uiTheme, multi, false))} `;
-		out.push(...wrapPrefixedLine(marker, " ".repeat(visibleWidth(marker)), optLabel, width));
+		out.push(...wrapOptionLabel(uiTheme.fg("dim", optionMarker(uiTheme, multi, false)), optLabel, width));
 		if (opt.description?.trim()) {
 			const description = renderInlineMarkdown(opt.description.trim(), mdTheme, t => uiTheme.fg("dim", t));
 			const prefix = `   ${uiTheme.fg("dim", "↳")} `;
@@ -264,6 +268,7 @@ function renderAnswerOptionLines(
 	customInput: string | undefined,
 	note: string | undefined,
 	width: number,
+	contentWidth: number,
 	selectedIndices?: ReadonlySet<number>,
 ): string[] {
 	const selected = new Set(selectedOptions ?? []);
@@ -284,7 +289,7 @@ function renderAnswerOptionLines(
 		const labelStyled = renderInlineMarkdown(label, mdTheme, t =>
 			isSelected ? uiTheme.fg("toolOutput", t) : uiTheme.fg("muted", t),
 		);
-		out.push(` ${markerStyled} ${labelStyled}`);
+		out.push(...wrapOptionLabel(markerStyled, labelStyled, contentWidth));
 	}
 	if (customInput !== undefined) out.push(...renderCustomInputLines(uiTheme, customInput));
 	if (note !== undefined) out.push(...renderNoteLines(uiTheme, note, width));
@@ -556,7 +561,7 @@ export const askToolRenderer = {
 				},
 				uiTheme,
 			);
-			return framedToolCard(uiTheme, ({ width }) => {
+			return framedToolCard(uiTheme, ({ width, contentWidth }) => {
 				const rawResults = rawDetails.results ?? [];
 				const sections = results.map((r, index) => {
 					// Sanitizing preserves order and length, so raw indices align with `r`.
@@ -573,6 +578,7 @@ export const askToolRenderer = {
 							r.customInput,
 							r.note,
 							width,
+							contentWidth,
 							selectedIndicesFor(raw?.options, raw?.selectedOptions),
 						),
 					];
@@ -611,7 +617,7 @@ export const askToolRenderer = {
 		const dCustom = details.customInput;
 		const dNote = details.note;
 		const dTimedOut = details.timedOut;
-		return framedToolCard(uiTheme, ({ width }) => {
+		return framedToolCard(uiTheme, ({ width, contentWidth }) => {
 			// md() returns a shared cached array (module-level Markdown LRU) — copy before appending.
 			const bodyLines = [
 				...md(question, width),
@@ -624,6 +630,7 @@ export const askToolRenderer = {
 					dCustom,
 					dNote,
 					width,
+					contentWidth,
 					selectedIndicesFor(rawDetails.options, rawDetails.selectedOptions),
 				),
 			];

packages/tui/src/tools/lsp.ts

@@ -265,12 +265,11 @@ export function renderResult(
 		const header = `${icon} LSP ${actionLabel}`;
 
 		const rail = ` ${theme.fg("mdCodeBlockBorder", theme.boxRound.vertical)} `;
-		const contentLines =
-			codeBlockMatch && expanded
-				? bodyLines.flatMap(line =>
-						line.startsWith(rail) ? wrapPrefixedLine(rail, rail, line.slice(rail.length), contentWidth) : [line],
-					)
-				: bodyLines;
+		const contentLines = codeBlockMatch
+			? bodyLines.flatMap(line =>
+					line.startsWith(rail) ? wrapPrefixedLine(rail, rail, line.slice(rail.length), contentWidth) : [line],
+				)
+			: bodyLines;
 		return {
 			header,
 			phase: isPartial ? "partial" : state,

packages/tui/test/tool-hanging-wrap.test.ts

@@ -116,6 +116,32 @@ describe("prefixed tool rows", () => {
 		expect(rows[branch + 1]).toContain("remaining details");
 	});
 
+	it("keeps long Ask answers beneath their markers after submission, including grouped questions", async () => {
+		const theme = (await getThemeByName("dark"))!;
+		const chosen = "Choose the longer alternative because it contains information important at the end of its label";
+		const other = "Leave the other longer alternative visible so its ending still distinguishes the choices";
+		const answers = { question: "Pick?", options: [chosen, other], selectedOptions: [chosen] };
+		const cards = [
+			askToolRenderer.renderResult({ content: [], details: answers }, { expanded: false, isPartial: false }, theme),
+			askToolRenderer.renderResult(
+				{ content: [], details: { results: [{ id: "choice", multi: false, ...answers }] } },
+				{ expanded: false, isPartial: false },
+				theme,
+			),
+		];
+		for (const card of cards) {
+			const rows = plain(card.render(width));
+			const chosenRow = rows.findIndex(row => row.includes("◉ Choose"));
+			const otherRow = rows.findIndex(row => row.includes("○ Leave"));
+			expect(chosenRow).toBeGreaterThan(0);
+			expect(rows[chosenRow + 1]).toStartWith("│    ");
+			expect(rows[chosenRow + 1]).toContain("information important");
+			expect(otherRow).toBeGreaterThan(0);
+			expect(rows[otherRow + 1]).toStartWith("│    ");
+			expect(rows[otherRow + 1]).toContain("ending still");
+		}
+	});
+
 	it("hangs Ask option descriptions and LSP hover code beneath their prefix", async () => {
 		const theme = (await getThemeByName("dark"))!;
 		const ask = plain(
@@ -141,15 +167,18 @@ describe("prefixed tool rows", () => {
 		expect(ask[description + 1]).toStartWith("│     ");
 		expect(ask[description + 1]).toContain("card.");
 
-		const hover = plain(
-			renderLspResult(
-				{ content: [{ type: "text", text: `\`\`\`ts\nconst note = "${"long text ".repeat(12)}";\n\`\`\`` }] },
-				{ expanded: true, isPartial: false },
-				theme,
-			).render(width),
-		);
-		const codeRow = hover.findIndex(row => row.startsWith("│  │ "));
-		expect(codeRow).toBeGreaterThan(0);
-		expect(hover[codeRow + 1]).toStartWith("│  │ ");
+		for (const expanded of [true, false]) {
+			const hover = plain(
+				renderLspResult(
+					{ content: [{ type: "text", text: `\`\`\`ts\nconst note = "${"long text ".repeat(12)}";\n\`\`\`` }] },
+					{ expanded, isPartial: false },
+					theme,
+				).render(width),
+			);
+			const codeRow = hover.findIndex(row => row.startsWith("│  │ "));
+			expect(codeRow).toBeGreaterThan(0);
+			expect(hover[codeRow + 1]).toStartWith("│  │ ");
+			expect(hover[codeRow + 1]).toContain("long text");
+		}
 	});
 });