From 9be55bc773bc1dffad307dd7cd130d949b336a0b Mon Sep 17 00:00:00 2001 From: Mario Zechner Date: Tue, 30 Jun 2026 11:55:40 +0200 Subject: [PATCH] fix(coding-agent): apply output padding to user messages closes #6168 --- packages/coding-agent/CHANGELOG.md | 2 +- packages/coding-agent/docs/settings.md | 2 +- .../coding-agent/src/core/settings-manager.ts | 2 +- .../components/assistant-message.ts | 8 ++--- .../components/settings-selector.ts | 2 +- .../interactive/components/user-message.ts | 29 ++++++++++++++----- .../src/modes/interactive/interactive-mode.ts | 25 +++++++++++----- .../test/assistant-message.test.ts | 13 +++++++++ 8 files changed, 60 insertions(+), 23 deletions(-) diff --git a/packages/coding-agent/CHANGELOG.md b/packages/coding-agent/CHANGELOG.md index c7563adc0..b69f609d7 100644 --- a/packages/coding-agent/CHANGELOG.md +++ b/packages/coding-agent/CHANGELOG.md @@ -5,7 +5,7 @@ ### Added - Added an `externalEditor` settings.json override for Ctrl+G external editor commands, with default fallbacks to Notepad on Windows and `nano` elsewhere ([#6122](https://github.com/earendil-works/pi/issues/6122)). -- Added an `outputPad` setting for assistant message and thinking horizontal padding. +- Added an `outputPad` setting for user message, assistant message, and thinking horizontal padding ([#6168](https://github.com/earendil-works/pi/issues/6168)). ### Fixed diff --git a/packages/coding-agent/docs/settings.md b/packages/coding-agent/docs/settings.md index e93ea1e4e..d1a49fc71 100644 --- a/packages/coding-agent/docs/settings.md +++ b/packages/coding-agent/docs/settings.md @@ -61,7 +61,7 @@ Use `/trust` in interactive mode to save a project trust decision for future ses | `doubleEscapeAction` | string | `"tree"` | Action for double-escape: `"tree"`, `"fork"`, or `"none"` | | `treeFilterMode` | string | `"default"` | Default filter for `/tree`: `"default"`, `"no-tools"`, `"user-only"`, `"labeled-only"`, `"all"` | | `editorPaddingX` | number | `0` | Horizontal padding for input editor (0-3) | -| `outputPad` | number | `1` | Horizontal padding for assistant messages and thinking (0 or 1) | +| `outputPad` | number | `1` | Horizontal padding for user messages, assistant messages, and thinking (0 or 1) | | `autocompleteMaxVisible` | number | `5` | Max visible items in autocomplete dropdown (3-20) | | `showHardwareCursor` | boolean | `false` | Show the terminal cursor while TUI positions it for IME support | diff --git a/packages/coding-agent/src/core/settings-manager.ts b/packages/coding-agent/src/core/settings-manager.ts index 44b489ab2..6add0810c 100644 --- a/packages/coding-agent/src/core/settings-manager.ts +++ b/packages/coding-agent/src/core/settings-manager.ts @@ -113,7 +113,7 @@ export interface Settings { treeFilterMode?: "default" | "no-tools" | "user-only" | "labeled-only" | "all"; // Default filter when opening /tree thinkingBudgets?: ThinkingBudgetsSettings; // Custom token budgets for thinking levels editorPaddingX?: number; // Horizontal padding for input editor (default: 0) - outputPad?: 0 | 1; // Horizontal padding for assistant output (default: 1) + outputPad?: 0 | 1; // Horizontal padding for chat message output (default: 1) autocompleteMaxVisible?: number; // Max visible items in autocomplete dropdown (default: 5) showHardwareCursor?: boolean; // Show terminal cursor while still positioning it for IME markdown?: MarkdownSettings; diff --git a/packages/coding-agent/src/modes/interactive/components/assistant-message.ts b/packages/coding-agent/src/modes/interactive/components/assistant-message.ts index f849b2bcb..d6b17d37d 100644 --- a/packages/coding-agent/src/modes/interactive/components/assistant-message.ts +++ b/packages/coding-agent/src/modes/interactive/components/assistant-message.ts @@ -111,7 +111,7 @@ export class AssistantMessageComponent extends Container { if (this.hideThinkingBlock) { // Show static thinking label when hidden this.contentContainer.addChild( - new Text(theme.italic(theme.fg("thinkingText", this.hiddenThinkingLabel)), 1, 0), + new Text(theme.italic(theme.fg("thinkingText", this.hiddenThinkingLabel)), this.outputPad, 0), ); if (hasVisibleContentAfter) { this.contentContainer.addChild(new Spacer(1)); @@ -144,7 +144,7 @@ export class AssistantMessageComponent extends Container { "error", "Error: Model stopped because it reached the maximum output token limit. The response may be incomplete.", ), - 1, + this.outputPad, 0, ), ); @@ -155,11 +155,11 @@ export class AssistantMessageComponent extends Container { ? message.errorMessage : "Operation aborted"; this.contentContainer.addChild(new Spacer(1)); - this.contentContainer.addChild(new Text(theme.fg("error", abortMessage), 1, 0)); + this.contentContainer.addChild(new Text(theme.fg("error", abortMessage), this.outputPad, 0)); } else if (message.stopReason === "error") { const errorMsg = message.errorMessage || "Unknown error"; this.contentContainer.addChild(new Spacer(1)); - this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), 1, 0)); + this.contentContainer.addChild(new Text(theme.fg("error", `Error: ${errorMsg}`), this.outputPad, 0)); } } } diff --git a/packages/coding-agent/src/modes/interactive/components/settings-selector.ts b/packages/coding-agent/src/modes/interactive/components/settings-selector.ts index e67e335a3..81f7cceab 100644 --- a/packages/coding-agent/src/modes/interactive/components/settings-selector.ts +++ b/packages/coding-agent/src/modes/interactive/components/settings-selector.ts @@ -683,7 +683,7 @@ export class SettingsSelectorComponent extends Container { items.splice(editorPaddingIndex + 1, 0, { id: "output-padding", label: "Output padding", - description: "Horizontal padding for assistant messages and thinking", + description: "Horizontal padding for user messages, assistant messages, and thinking", currentValue: String(config.outputPad), values: ["0", "1"], }); diff --git a/packages/coding-agent/src/modes/interactive/components/user-message.ts b/packages/coding-agent/src/modes/interactive/components/user-message.ts index d1b393430..74b54fd76 100644 --- a/packages/coding-agent/src/modes/interactive/components/user-message.ts +++ b/packages/coding-agent/src/modes/interactive/components/user-message.ts @@ -9,24 +9,39 @@ const OSC133_ZONE_FINAL = "\x1b]133;C\x07"; * Component that renders a user message */ export class UserMessageComponent extends Container { - private contentBox: Box; + private text: string; + private markdownTheme: MarkdownTheme; + private outputPad: number; - constructor(text: string, markdownTheme: MarkdownTheme = getMarkdownTheme()) { + constructor(text: string, markdownTheme: MarkdownTheme = getMarkdownTheme(), outputPad = 1) { super(); - this.contentBox = new Box(1, 1, (content: string) => theme.bg("userMessageBg", content)); - this.contentBox.addChild( + this.text = text; + this.markdownTheme = markdownTheme; + this.outputPad = outputPad; + this.rebuild(); + } + + setOutputPad(padding: number): void { + this.outputPad = padding; + this.rebuild(); + } + + private rebuild(): void { + this.clear(); + const contentBox = new Box(this.outputPad, 1, (content: string) => theme.bg("userMessageBg", content)); + contentBox.addChild( new Markdown( - text, + this.text, 0, 0, - markdownTheme, + this.markdownTheme, { color: (content: string) => theme.fg("userMessageText", content), }, { preserveOrderedListMarkers: true, preserveBackslashEscapes: true }, ), ); - this.addChild(this.contentBox); + this.addChild(contentBox); } override render(width: number): string[] { diff --git a/packages/coding-agent/src/modes/interactive/interactive-mode.ts b/packages/coding-agent/src/modes/interactive/interactive-mode.ts index a9f0f8152..8fa18546f 100644 --- a/packages/coding-agent/src/modes/interactive/interactive-mode.ts +++ b/packages/coding-agent/src/modes/interactive/interactive-mode.ts @@ -3128,11 +3128,16 @@ export class InteractiveMode { const userComponent = new UserMessageComponent( skillBlock.userMessage, this.getMarkdownThemeWithSettings(), + this.outputPad, ); this.chatContainer.addChild(userComponent); } } else { - const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings()); + const userComponent = new UserMessageComponent( + textContent, + this.getMarkdownThemeWithSettings(), + this.outputPad, + ); this.chatContainer.addChild(userComponent); } if (options?.populateHistory) { @@ -4070,15 +4075,19 @@ export class InteractiveMode { onOutputPadChange: (padding) => { this.settingsManager.setOutputPad(padding); this.outputPad = padding; - for (const child of this.chatContainer.children) { - if (child instanceof AssistantMessageComponent) { - child.setOutputPad(padding); + if (this.streamingComponent || this.session.isStreaming) { + for (const child of this.chatContainer.children) { + if (child instanceof AssistantMessageComponent || child instanceof UserMessageComponent) { + child.setOutputPad(padding); + } } + if (this.streamingComponent) { + this.streamingComponent.setOutputPad(padding); + } + this.ui.requestRender(); + return; } - if (this.streamingComponent) { - this.streamingComponent.setOutputPad(padding); - } - this.ui.requestRender(); + this.rebuildChatFromMessages(); }, onAutocompleteMaxVisibleChange: (maxVisible) => { this.settingsManager.setAutocompleteMaxVisible(maxVisible); diff --git a/packages/coding-agent/test/assistant-message.test.ts b/packages/coding-agent/test/assistant-message.test.ts index 5ad1cc632..2244df999 100644 --- a/packages/coding-agent/test/assistant-message.test.ts +++ b/packages/coding-agent/test/assistant-message.test.ts @@ -1,6 +1,7 @@ import type { AssistantMessage } from "@earendil-works/pi-ai"; import { describe, expect, test } from "vitest"; import { AssistantMessageComponent } from "../src/modes/interactive/components/assistant-message.ts"; +import { UserMessageComponent } from "../src/modes/interactive/components/user-message.ts"; import { initTheme } from "../src/modes/interactive/theme/theme.ts"; import { stripAnsi } from "../src/utils/ansi.ts"; @@ -96,4 +97,16 @@ describe("AssistantMessageComponent", () => { expect(updatedLines.some((line) => line.startsWith("hello"))).toBe(true); expect(updatedLines.some((line) => line.startsWith("reasoning"))).toBe(true); }); + + test("uses configured output padding for user messages", () => { + initTheme("dark"); + + const paddedComponent = new UserMessageComponent("hello", undefined, 1); + const paddedLines = paddedComponent.render(40).map((line) => stripAnsi(line)); + expect(paddedLines.some((line) => line.startsWith(" hello"))).toBe(true); + + const unpaddedComponent = new UserMessageComponent("hello", undefined, 0); + const unpaddedLines = unpaddedComponent.render(40).map((line) => stripAnsi(line)); + expect(unpaddedLines.some((line) => line.startsWith("hello"))).toBe(true); + }); });