@sayknow-cli/coding-agent 0.6.4 → 0.6.5

package/src/modes/components/user-message-selector.ts

@@ -14,9 +14,10 @@ interface UserMessageItem {
  */
 class UserMessageList implements Component {
 	#selectedIndex: number = 0;
+	#selectionInFlight = false;
 	onSelect?: (entryId: string) => void;
 	onCancel?: () => void;
-	#maxVisible: number = 10; // Max messages visible
+	#availableRows = Number.POSITIVE_INFINITY;
 
 	constructor(private readonly messages: UserMessageItem[]) {
 		// Store messages in chronological order (oldest to newest)
@@ -24,6 +25,10 @@ class UserMessageList implements Component {
 		this.#selectedIndex = Math.max(0, this.messages.length - 1);
 	}
 
+	setAvailableRows(rows: number): void {
+		this.#availableRows = Math.max(3, rows);
+	}
+
 	invalidate(): void {
 		// No cached state to invalidate currently
 	}
@@ -36,12 +41,15 @@ class UserMessageList implements Component {
 			return lines;
 		}
 
-		// Calculate visible range with scrolling
+		// Each entry uses two content rows plus a separator. Leave one row for
+		// the scroll position whenever the full history does not fit.
+		const needsScrollIndicator = this.messages.length * 3 > this.#availableRows;
+		const maxVisible = Math.max(1, Math.floor((this.#availableRows - (needsScrollIndicator ? 1 : 0)) / 3));
 		const startIndex = Math.max(
 			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.messages.length - this.#maxVisible),
+			Math.min(this.#selectedIndex - Math.floor(maxVisible / 2), this.messages.length - maxVisible),
 		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, this.messages.length);
+		const endIndex = Math.min(startIndex + maxVisible, this.messages.length);
 
 		// Render visible messages (2 lines per message + blank line)
 		for (let i = startIndex; i < endIndex; i++) {
@@ -77,6 +85,7 @@ class UserMessageList implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		if (this.#selectionInFlight) return;
 		// Up arrow - go to previous (older) message, wrap to bottom when at top
 		if (matchesKey(keyData, "up")) {
 			this.#selectedIndex = this.#selectedIndex === 0 ? this.messages.length - 1 : this.#selectedIndex - 1;
@@ -89,6 +98,7 @@ class UserMessageList implements Component {
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.messages[this.#selectedIndex];
 			if (selected && this.onSelect) {
+				this.#selectionInFlight = true;
 				this.onSelect(selected.id);
 			}
 		}
@@ -102,21 +112,43 @@ class UserMessageList implements Component {
 }
 
 /**
- * Component that renders a user message selector for branching
+ * Component that renders a prompt selector for creating a new session
  */
 export class UserMessageSelectorComponent extends Container {
 	#messageList: UserMessageList;
-
-	constructor(messages: UserMessageItem[], onSelect: (entryId: string) => void, onCancel: () => void) {
+	#header: Container;
+	#footer: Container;
+
+	constructor(
+		messages: UserMessageItem[],
+		onSelect: (entryId: string) => void,
+		onCancel: () => void,
+		private readonly getViewportRows: () => number,
+	) {
 		super();
 
 		// Add header
-		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.bold("Branch from Message"), 1, 0));
-		this.addChild(new Text(theme.fg("muted", "Select a message to create a new branch from that point"), 1, 0));
-		this.addChild(new Spacer(1));
-		this.addChild(new DynamicBorder());
-		this.addChild(new Spacer(1));
+		this.#header = new Container();
+		this.#header.addChild(new Spacer(1));
+		this.#header.addChild(new Text(theme.bold("Fork from Prompt"), 1, 0));
+		this.#header.addChild(
+			new Text(
+				theme.fg(
+					"muted",
+					"Creates a new session with history before the prompt; shared files stay in the same cwd.",
+				),
+				1,
+				0,
+			),
+		);
+		this.#header.addChild(
+			new Text(theme.fg("muted", "The selected prompt is restored for editing, not submitted."), 1, 0),
+		);
+		this.#header.addChild(new Text(theme.fg("muted", "↑/↓ move · Enter select · Esc cancel"), 1, 0));
+		this.#header.addChild(new Spacer(1));
+		this.#header.addChild(new DynamicBorder());
+		this.#header.addChild(new Spacer(1));
+		this.addChild(this.#header);
 
 		// Create message list
 		this.#messageList = new UserMessageList(messages);
@@ -126,8 +158,10 @@ export class UserMessageSelectorComponent extends Container {
 		this.addChild(this.#messageList);
 
 		// Add bottom border
-		this.addChild(new Spacer(1));
-		this.addChild(new DynamicBorder());
+		this.#footer = new Container();
+		this.#footer.addChild(new Spacer(1));
+		this.#footer.addChild(new DynamicBorder());
+		this.addChild(this.#footer);
 
 		// Auto-cancel if no messages
 		if (messages.length === 0) {
@@ -135,6 +169,14 @@ export class UserMessageSelectorComponent extends Container {
 		}
 	}
 
+	render(width: number): string[] {
+		const chromeRows = this.#header.render(width).length + this.#footer.render(width).length;
+		// Reserve the pinned status/composer rows outside the overlay. Recompute
+		// against current terminal rows and wrapped header height on every render.
+		this.#messageList.setAvailableRows(this.getViewportRows() - chromeRows - 2);
+		return super.render(width);
+	}
+
 	getMessageList(): UserMessageList {
 		return this.#messageList;
 	}

package/src/modes/components/user-message.ts

@@ -14,8 +14,13 @@ const OSC133_ZONE_START = "\x1b]133;A\x07";
 const OSC133_ZONE_END = "\x1b]133;B\x07";
 const OSC133_ZONE_FINAL = "\x1b]133;C\x07";
 
+/** Columns taken by the rail glyph plus the gap before the prompt text. */
+const RAIL_WIDTH = 2;
+
 /**
- * Component that renders a user message
+ * Component that renders a user message: the prompt sits on the transcript
+ * background behind an accent rail instead of inside a filled bubble, so the
+ * user's turns read as margin notes rather than cards.
  */
 export class UserMessageComponent extends Container {
 	#viewportAnchorSource?: ViewportAnchorSource;
@@ -23,14 +28,15 @@ export class UserMessageComponent extends Container {
 	constructor(text: string, synthetic = false, viewportAnchorId?: string) {
 		super();
 		if (viewportAnchorId) this.#viewportAnchorSource = { id: viewportAnchorId };
-		const bgColor = (value: string) => theme.bg("userMessageBg", value);
 		const color = synthetic
 			? (value: string) => theme.fg("dim", value)
 			: (value: string) => theme.fg("userMessageText", value);
+		// Resolved per render so a /theme switch recolors prompts already in the transcript.
+		const rail = () => theme.fg(synthetic ? "dim" : "accent", theme.rail.user);
 		this.addChild(new Spacer(1));
-		const label = synthetic ? "replay" : "user";
-		this.addChild(new Text(theme.bold(theme.fg("accent", label)), 1, 0));
-		const prompt = new PromptZoneMarkdown(text, bgColor, color);
+		// A replayed prompt is not something the user just typed; say so once, quietly.
+		if (synthetic) this.addChild(new Text(`${rail()} ${theme.fg("dim", "replay")}`, 0, 0));
+		const prompt = new PromptZoneMarkdown(text, color, rail);
 		this.addChild(prompt);
 		if (this.#viewportAnchorSource) this.setViewportAnchorSource(prompt, this.#viewportAnchorSource);
 	}
@@ -38,31 +44,35 @@ export class UserMessageComponent extends Container {
 
 class PromptZoneMarkdown implements Component {
 	#markdown: Markdown;
+	#rail: () => string;
 
-	constructor(text: string, bgColor: (value: string) => string, color: (value: string) => string) {
-		this.#markdown = new Markdown(text, 1, 1, getMarkdownTheme(), {
-			bgColor,
-			color,
-		});
+	constructor(text: string, color: (value: string) => string, rail: () => string) {
+		this.#markdown = new Markdown(text, 0, 0, getMarkdownTheme(), { color });
+		this.#rail = rail;
 	}
 
 	invalidate(): void {
 		this.#markdown.invalidate();
 	}
 
-	#withPromptZone(lines: string[]): string[] {
+	#withRailAndPromptZone(lines: string[]): string[] {
 		if (lines.length === 0) return lines;
-		const zoned = [...lines];
+		const rail = this.#rail();
+		const zoned = lines.map(line => `${rail} ${line}`);
 		zoned[0] = OSC133_ZONE_START + zoned[0];
 		zoned[zoned.length - 1] = `${zoned[zoned.length - 1]}${OSC133_ZONE_END}${OSC133_ZONE_FINAL}`;
 		return zoned;
 	}
 
+	#innerWidth(width: number): number {
+		return Math.max(1, width - RAIL_WIDTH);
+	}
+
 	renderWithViewportAnchorSource(width: number, source: ViewportAnchorSource): ViewportAnchorRender {
-		const rendered = this.#markdown.renderWithViewportAnchorSource(width, source);
-		return { lines: this.#withPromptZone(rendered.lines), anchors: rendered.anchors };
+		const rendered = this.#markdown.renderWithViewportAnchorSource(this.#innerWidth(width), source);
+		return { lines: this.#withRailAndPromptZone(rendered.lines), anchors: rendered.anchors };
 	}
 	render(width: number): string[] {
-		return this.#withPromptZone(this.#markdown.render(width));
+		return this.#withRailAndPromptZone(this.#markdown.render(this.#innerWidth(width)));
 	}
 }