diff --git a/packages/pi-coding-agent/src/modes/interactive/components/extension-input.ts b/packages/pi-coding-agent/src/modes/interactive/components/extension-input.ts index 4c0e816bd..06d7ee933 100644 --- a/packages/pi-coding-agent/src/modes/interactive/components/extension-input.ts +++ b/packages/pi-coding-agent/src/modes/interactive/components/extension-input.ts @@ -33,7 +33,7 @@ export class ExtensionInputComponent extends Container implements Focusable { constructor( title: string, - _placeholder: string | undefined, + placeholder: string | undefined, onSubmit: (value: string) => void, onCancel: () => void, opts?: ExtensionInputOptions, @@ -61,6 +61,9 @@ export class ExtensionInputComponent extends Container implements Focusable { } this.input = new Input(); + if (placeholder) { + this.input.placeholder = placeholder; + } this.addChild(this.input); this.addChild(new Spacer(1)); this.addChild(new Text(`${keyHint("selectConfirm", "submit")} ${keyHint("selectCancel", "cancel")}`, 1, 0)); diff --git a/packages/pi-tui/src/components/input.ts b/packages/pi-tui/src/components/input.ts index e5c3b4f7f..13714b138 100644 --- a/packages/pi-tui/src/components/input.ts +++ b/packages/pi-tui/src/components/input.ts @@ -20,6 +20,7 @@ export class Input implements Component, Focusable { private cursor: number = 0; // Cursor position in the value public onSubmit?: (value: string) => void; public onEscape?: () => void; + public placeholder: string = ""; /** Focusable interface - set by TUI when focus changes */ focused: boolean = false; @@ -440,6 +441,16 @@ export class Input implements Component, Focusable { return [prompt]; } + // Show placeholder when value is empty + if (this.value === "" && this.placeholder) { + const placeholderText = this.placeholder.slice(0, availableWidth - 1); + const marker = this.focused ? CURSOR_MARKER : ""; + const cursorChar = "\x1b[7m \x1b[27m"; // inverse space for cursor + const dimPlaceholder = `\x1b[2m${placeholderText}\x1b[22m`; // dim text + const padding = " ".repeat(Math.max(0, availableWidth - visibleWidth(placeholderText) - 1)); + return [prompt + marker + cursorChar + dimPlaceholder + padding]; + } + let visibleText = ""; let cursorDisplay = this.cursor;