@sayknow-cli/coding-agent 0.3.11 → 0.3.13

package/src/modes/utils/ui-helpers.ts

@@ -1,6 +1,6 @@
 import type { AgentMessage } from "@sayknow-cli/agent-core";
 import type { AssistantMessage, ImageContent, Message } from "@sayknow-cli/ai";
-import { type Component, Spacer, Text, TruncatedText } from "@sayknow-cli/tui";
+import { type Component, Spacer, Text, TruncatedText, type TUI, truncateToWidth } from "@sayknow-cli/tui";
 import { settings } from "../../config/settings";
 import { resolveSubskillActivationForSkillInvocation } from "../../extensibility/skc-plugins";
 import { buildSkillPromptMessage, parseSkillInvocations } from "../../extensibility/skills";
@@ -21,17 +21,69 @@ import { SkillMessageComponent } from "../../modes/components/skill-message";
 import { ToolExecutionComponent } from "../../modes/components/tool-execution";
 import { UserMessageComponent } from "../../modes/components/user-message";
 import { theme } from "../../modes/theme/theme";
-import type { CompactionQueuedMessage, InteractiveModeContext } from "../../modes/types";
+import type {
+	CompactionQueuedMessage,
+	InteractiveModeContext,
+	IrcArrivalSnapshot,
+	TranscriptRebuildPolicy,
+} from "../../modes/types";
 import {
 	type CustomMessage,
 	isSilentAbort,
 	SKILL_PROMPT_MESSAGE_TYPE,
 	type SkillPromptDetails,
 } from "../../session/messages";
-import type { SessionContext } from "../../session/session-manager";
+import {
+	associateSessionMessageViewportAnchorId,
+	getSessionMessageEntryId,
+	getSessionMessageViewportAnchorId,
+	type SessionContext,
+} from "../../session/session-manager";
 import { formatBytes, formatDuration } from "../../tools/render-utils";
 import { buildAbortDisplayMessage } from "./abort-message";
+import {
+	formatIrcMessageBlock,
+	isIrcCustomType,
+	type ParsedIrcMessage,
+	parseIrcMessage,
+	projectIrcText,
+} from "./irc-message";
+
+export type { TranscriptRebuildPolicy } from "../../modes/types";
+
+const IRC_INLINE_MAX_RENDER_ROWS = 2_048;
+const IRC_INLINE_MAX_SOURCE_UTF8_BYTES = 64 * 1_024;
+const IRC_INLINE_ELISION = "  … message elided …";
+
+class BoundedIrcTextComponent implements Component {
+	#text: Text;
+	#sourceTruncated: boolean;
+
+	constructor(text: string, sourceTruncated: boolean) {
+		this.#text = new Text(text, 0, 0);
+		this.#sourceTruncated = sourceTruncated;
+	}
 
+	render(width: number): string[] {
+		const rendered = this.#text.render(width);
+		if (!this.#sourceTruncated && rendered.length <= IRC_INLINE_MAX_RENDER_ROWS) return rendered;
+		const lines = rendered.slice(0, IRC_INLINE_MAX_RENDER_ROWS);
+		const marker = truncateToWidth(theme.fg("dim", IRC_INLINE_ELISION), width);
+		if (lines.length === 0) return [marker];
+		if (this.#sourceTruncated && rendered.length < IRC_INLINE_MAX_RENDER_ROWS) lines.push(marker);
+		else lines[lines.length - 1] = marker;
+		return lines;
+	}
+
+	invalidate(): void {
+		this.#text.invalidate();
+	}
+}
+
+export function prepareTranscriptRebuild(ui: TUI, policy: TranscriptRebuildPolicy): void {
+	if (policy === "replace-identity") ui.resetViewportAnchorIntent();
+	else ui.prepareViewportAnchorForTranscriptRebuild();
+}
 type TextBlock = { type: "text"; text: string };
 interface RenderInitialMessagesOptions {
 	preserveExistingChat?: boolean;
@@ -65,9 +117,246 @@ type QueuedMessages = {
 	followUp: string[];
 };
 
+const CHAT_CHILD_CAP = 400;
+const CHAT_COLLAPSE_BATCH_SIZE = 300;
+
+const chatChildAddedAt = new WeakMap<Component, number>();
+
+export class CollapsedChatHistoryComponent implements Component {
+	readonly isCollapsedChatHistory = true;
+	count: number;
+	startTime: number;
+	endTime: number;
+
+	constructor(count: number, startTime: number, endTime: number) {
+		this.count = count;
+		this.startTime = startTime;
+		this.endTime = endTime;
+	}
+
+	merge(count: number, startTime: number, endTime: number): void {
+		this.count += count;
+		this.startTime = Math.min(this.startTime, startTime);
+		this.endTime = Math.max(this.endTime, endTime);
+	}
+
+	render(_width: number): string[] {
+		const label = `[${this.count} earlier messages collapsed — ${formatChatCollapseTime(this.startTime)} to ${formatChatCollapseTime(this.endTime)}]`;
+		return [theme.fg("dim", label)];
+	}
+
+	invalidate(): void {}
+}
+
+function formatChatCollapseTime(timestamp: number): string {
+	return new Date(timestamp).toLocaleTimeString(undefined, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false,
+	});
+}
+
+function isCollapsedChatHistory(component: Component): component is CollapsedChatHistoryComponent {
+	return component instanceof CollapsedChatHistoryComponent;
+}
+
+function isActiveChatChild(ctx: InteractiveModeContext, component: Component): boolean {
+	if ([...ctx.pendingTools.values()].includes(component as never)) return true;
+	if (ctx.pendingBashComponents.includes(component as never)) return true;
+	if (ctx.pendingPythonComponents.includes(component as never)) return true;
+	return component === ctx.bashComponent || component === ctx.pythonComponent || component === ctx.streamingComponent;
+}
+
+function getChatChildTime(component: Component): number {
+	return chatChildAddedAt.get(component) ?? Date.now();
+}
+
+function stableSemanticIdPart(value: string): string {
+	let hash = 0xcbf29ce484222325n;
+	for (const char of value) {
+		hash ^= BigInt(char.codePointAt(0)!);
+		hash = BigInt.asUintN(64, hash * 0x100000001b3n);
+	}
+	return hash.toString(36);
+}
+
+export function addChatChild(ctx: InteractiveModeContext, component: Component): void {
+	ctx.chatContainer.addChild(component);
+
+	chatChildAddedAt.set(component, Date.now());
+	trimChatChildren(ctx);
+}
+
+export function trimChatChildren(ctx: InteractiveModeContext): void {
+	const children = ctx.chatContainer.children;
+
+	// Collapse the oldest completed children into history placeholders until the cap is
+	// satisfied or no further reduction is structurally possible. Active (pending/running)
+	// children and existing placeholders are never collapsed, so a conversation whose
+	// top-level children are dominated by active components may legitimately exceed the cap.
+	let scanFrom = 0;
+	while (children.length > CHAT_CHILD_CAP) {
+		// Advance to the oldest collapsible completed child, skipping active children and
+		// existing placeholders so the cap is enforced even when the oldest child is active.
+		while (
+			scanFrom < children.length &&
+			(isActiveChatChild(ctx, children[scanFrom]) || isCollapsedChatHistory(children[scanFrom]))
+		) {
+			scanFrom++;
+		}
+		if (scanFrom >= children.length) return; // only active/placeholder children remain
+
+		// Extend over the oldest contiguous run of completed children (up to the batch size).
+		let collapseEndExclusive = scanFrom;
+		const maxEnd = Math.min(children.length, scanFrom + CHAT_COLLAPSE_BATCH_SIZE);
+		while (
+			collapseEndExclusive < maxEnd &&
+			!isActiveChatChild(ctx, children[collapseEndExclusive]) &&
+			!isCollapsedChatHistory(children[collapseEndExclusive])
+		) {
+			collapseEndExclusive++;
+		}
+		const collapseCount = collapseEndExclusive - scanFrom;
+
+		const prev = scanFrom > 0 ? children[scanFrom - 1] : undefined;
+		const mergeTarget = prev && isCollapsedChatHistory(prev) ? prev : undefined;
+		// A lone completed child with no adjacent placeholder to merge into cannot reduce
+		// the child count (collapsing it yields a 1-count placeholder). Skip past it.
+		if (!mergeTarget && collapseCount <= 1) {
+			scanFrom += Math.max(collapseCount, 1);
+			continue;
+		}
+
+		const collapsed = children.slice(scanFrom, collapseEndExclusive);
+		const startTime = getChatChildTime(collapsed[0]);
+		const endTime = getChatChildTime(collapsed[collapsed.length - 1]);
+		for (const child of collapsed) {
+			child.dispose?.();
+		}
+
+		if (mergeTarget) {
+			mergeTarget.merge(collapseCount, startTime, endTime);
+			children.splice(scanFrom, collapseCount);
+			chatChildAddedAt.set(mergeTarget, mergeTarget.startTime);
+			// scanFrom stays; whatever follows the merged run is next.
+		} else {
+			const placeholder = new CollapsedChatHistoryComponent(collapseCount, startTime, endTime);
+			children.splice(scanFrom, collapseCount, placeholder);
+			chatChildAddedAt.set(placeholder, startTime);
+			scanFrom++; // step past the freshly created placeholder
+		}
+	}
+}
+
 export class UiHelpers {
+	#renderedIrcInlineComponents = new Map<string, readonly Component[]>();
+	#viewportAnchorOccurrences = new WeakMap<object, { base: string; epoch: number; id: string }>();
+	#nextViewportAnchorOccurrence = new Map<string, number>();
+	#viewportAnchorOccurrenceEpoch = 0;
+	#ircSidebarHintShown = false;
+
 	constructor(private ctx: InteractiveModeContext) {}
 
+	#resetViewportAnchorOccurrencePass(): void {
+		this.#viewportAnchorOccurrenceEpoch += 1;
+		this.#nextViewportAnchorOccurrence.clear();
+	}
+
+	#viewportAnchorOccurrenceId(message: object, base: string): string {
+		const existing = this.#viewportAnchorOccurrences.get(message);
+		if (existing?.base === base && existing.epoch === this.#viewportAnchorOccurrenceEpoch) return existing.id;
+		const occurrence = this.#nextViewportAnchorOccurrence.get(base) ?? 0;
+		this.#nextViewportAnchorOccurrence.set(base, occurrence + 1);
+		const id = `${base}:occurrence:${occurrence}`;
+		this.#viewportAnchorOccurrences.set(message, {
+			base,
+			epoch: this.#viewportAnchorOccurrenceEpoch,
+			id,
+		});
+		return id;
+	}
+
+	assistantViewportAnchorId(message: AssistantMessage): string {
+		const semanticId = getSessionMessageViewportAnchorId(message);
+		if (semanticId) return semanticId;
+		const entryId = getSessionMessageEntryId(message);
+		if (entryId) return `assistant:entry:${entryId}`;
+		const base = `assistant:${message.api}:${message.provider}:${message.model}:${message.timestamp}`;
+		const id = this.#viewportAnchorOccurrenceId(message, base);
+		associateSessionMessageViewportAnchorId(message, id);
+		return id;
+	}
+
+	#userViewportAnchorId(message: Extract<Message, { role: "user" }>): string {
+		const semanticId = getSessionMessageViewportAnchorId(message);
+		if (semanticId) return semanticId;
+		const entryId = getSessionMessageEntryId(message);
+		if (entryId) return `user:entry:${entryId}`;
+		const base = `user:local:${message.timestamp}:${stableSemanticIdPart(JSON.stringify(message.content))}`;
+		const id = this.#viewportAnchorOccurrenceId(message, base);
+		associateSessionMessageViewportAnchorId(message, id);
+		return id;
+	}
+
+	getRenderedIrcInlineComponents(): Map<string, readonly Component[]> {
+		return this.#renderedIrcInlineComponents;
+	}
+
+	removeRenderedIrcInlineComponents(observationId: string): readonly Component[] | undefined {
+		const components = this.#renderedIrcInlineComponents.get(observationId);
+		this.#renderedIrcInlineComponents.delete(observationId);
+		return components;
+	}
+
+	resetRenderedIrcInlineComponents(): readonly (readonly Component[])[] {
+		const components = [...this.#renderedIrcInlineComponents.values()];
+		this.#renderedIrcInlineComponents.clear();
+		return components;
+	}
+
+	#addIrcObservationToChat(message: ParsedIrcMessage, sidebarHint?: string): Component[] {
+		const bodyProjection = projectIrcText(message.text, IRC_INLINE_MAX_SOURCE_UTF8_BYTES);
+		const block = formatIrcMessageBlock({ ...message, text: bodyProjection.text });
+		const components: Component[] = [];
+		const header = `${theme.fg("accent", `[IRC] ${block.sender} → ${block.recipient} · ${block.time}`)}${sidebarHint ? theme.fg("dim", sidebarHint) : ""}`;
+		const headerComponent = new Text(header, 1, 0);
+		addChatChild(this.ctx, headerComponent);
+		components.push(headerComponent);
+		if (block.bodyLines.length > 0 || bodyProjection.truncated) {
+			const bodyComponent = new BoundedIrcTextComponent(
+				theme.fg("muted", `  ${block.bodyLines.join("\n  ")}`),
+				bodyProjection.truncated,
+			);
+			addChatChild(this.ctx, bodyComponent);
+			components.push(bodyComponent);
+		}
+		return components;
+	}
+
+	addLiveIrcObservationToChat(message: ParsedIrcMessage, arrival: IrcArrivalSnapshot): Component[] {
+		// Requested-open panels that merely yielded at narrow widths must not
+		// advertise the toggle key: pressing it would close the pending request.
+		const showSidebarHint =
+			!arrival.panelVisible &&
+			!arrival.panelRequestedVisible &&
+			arrival.sidebarAvailable &&
+			Boolean(arrival.resolvedToggleKey) &&
+			!this.#ircSidebarHintShown;
+		if (showSidebarHint) this.#ircSidebarHintShown = true;
+		return this.#addIrcObservationToChat(
+			message,
+			showSidebarHint ? ` · ${arrival.resolvedToggleKey} opens sidebar` : undefined,
+		);
+	}
+
+	addRebuiltIrcObservationToChat(message: ParsedIrcMessage): Component[] {
+		return this.#addIrcObservationToChat(message);
+	}
+
+	resetIrcSidebarHint(): void {
+		this.#ircSidebarHintShown = false;
+	}
+
 	/** Extract text content from a user message */
 	getUserMessageText(message: Message): string {
 		if (message.role !== "user") return "";
@@ -103,8 +392,8 @@ export class UiHelpers {
 
 		const spacer = new Spacer(1);
 		const text = new Text(rendered, 1, 0);
-		this.ctx.chatContainer.addChild(spacer);
-		this.ctx.chatContainer.addChild(text);
+		addChatChild(this.ctx, spacer);
+		addChatChild(this.ctx, text);
 		this.ctx.lastStatusSpacer = spacer;
 		this.ctx.lastStatusText = text;
 		this.ctx.ui.requestRender();
@@ -120,7 +409,7 @@ export class UiHelpers {
 				component.setComplete(message.exitCode, message.cancelled, {
 					truncation: message.meta?.truncation,
 				});
-				this.ctx.chatContainer.addChild(component);
+				addChatChild(this.ctx, component);
 				break;
 			}
 			case "pythonExecution": {
@@ -131,7 +420,7 @@ export class UiHelpers {
 				component.setComplete(message.exitCode, message.cancelled, {
 					truncation: message.meta?.truncation,
 				});
-				this.ctx.chatContainer.addChild(component);
+				addChatChild(this.ctx, component);
 				break;
 			}
 			case "hookMessage":
@@ -175,60 +464,19 @@ export class UiHelpers {
 							]
 								.filter(Boolean)
 								.join(" ");
-							this.ctx.chatContainer.addChild(new Text(line, 1, 0));
+							addChatChild(this.ctx, new Text(line, 1, 0));
 						}
 						break;
 					}
 					if (message.customType === SKILL_PROMPT_MESSAGE_TYPE) {
 						const component = new SkillMessageComponent(message as CustomMessage<SkillPromptDetails>);
 						component.setExpanded(this.ctx.toolOutputExpanded);
-						this.ctx.chatContainer.addChild(component);
+						addChatChild(this.ctx, component);
 						break;
 					}
-					if (
-						message.customType === "irc:incoming" ||
-						message.customType === "irc:autoreply" ||
-						message.customType === "irc:relay"
-					) {
-						const details = (
-							message as CustomMessage<{
-								from?: string;
-								to?: string;
-								message?: string;
-								reply?: string;
-								body?: string;
-								kind?: "message" | "reply";
-							}>
-						).details;
-						let arrow: string;
-						let body: string;
-						if (message.customType === "irc:incoming") {
-							const peer = details?.from ?? "?";
-							body = details?.message ?? "";
-							arrow = `⇦ ${peer}`;
-						} else if (message.customType === "irc:autoreply") {
-							const peer = details?.to ?? "?";
-							body = details?.reply ?? "";
-							arrow = `⇨ ${peer}`;
-						} else {
-							const from = details?.from ?? "?";
-							const to = details?.to ?? "?";
-							body = details?.body ?? "";
-							arrow = `${from} ⇨ ${to}`;
-						}
-						const components: Component[] = [];
-						const header = `${theme.fg("accent", `[IRC] ${arrow}`)}`;
-						const headerComponent = new Text(header, 1, 0);
-						this.ctx.chatContainer.addChild(headerComponent);
-						components.push(headerComponent);
-						if (body) {
-							for (const line of body.split("\n")) {
-								const lineComponent = new Text(theme.fg("muted", `  ${line}`), 0, 0);
-								this.ctx.chatContainer.addChild(lineComponent);
-								components.push(lineComponent);
-							}
-						}
-						return components;
+					if (message.role === "custom" && isIrcCustomType(message.customType)) {
+						const parsed = parseIrcMessage(message);
+						if (parsed) return this.addRebuiltIrcObservationToChat(parsed);
 					}
 					if (message.customType === "subagent:steer" || message.customType === "subagent:steer:relay") {
 						const details = (
@@ -242,12 +490,12 @@ export class UiHelpers {
 						const components: Component[] = [];
 						const header = `${theme.fg("accent", `[Steer ${details?.state ?? "queued"}] ${details?.from ?? "?"} ⇨ ${details?.to ?? "?"}`)}`;
 						const headerComponent = new Text(header, 1, 0);
-						this.ctx.chatContainer.addChild(headerComponent);
+						addChatChild(this.ctx, headerComponent);
 						components.push(headerComponent);
 						if (details?.body) {
 							for (const line of details.body.split("\n")) {
 								const lineComponent = new Text(theme.fg("muted", `  ${line}`), 0, 0);
-								this.ctx.chatContainer.addChild(lineComponent);
+								addChatChild(this.ctx, lineComponent);
 								components.push(lineComponent);
 							}
 						}
@@ -257,22 +505,22 @@ export class UiHelpers {
 					// Both HookMessage and CustomMessage have the same structure, cast for compatibility
 					const component = new CustomMessageComponent(message as CustomMessage<unknown>, renderer);
 					component.setExpanded(this.ctx.toolOutputExpanded);
-					this.ctx.chatContainer.addChild(component);
+					addChatChild(this.ctx, component);
 				}
 				break;
 			}
 			case "compactionSummary": {
-				this.ctx.chatContainer.addChild(new Spacer(1));
+				addChatChild(this.ctx, new Spacer(1));
 				const component = new CompactionSummaryMessageComponent(message);
 				component.setExpanded(this.ctx.toolOutputExpanded);
-				this.ctx.chatContainer.addChild(component);
+				addChatChild(this.ctx, component);
 				break;
 			}
 			case "branchSummary": {
-				this.ctx.chatContainer.addChild(new Spacer(1));
+				addChatChild(this.ctx, new Spacer(1));
 				const component = new BranchSummaryMessageComponent(message);
 				component.setExpanded(this.ctx.toolOutputExpanded);
-				this.ctx.chatContainer.addChild(component);
+				addChatChild(this.ctx, component);
 				break;
 			}
 			case "fileMention": {
@@ -293,7 +541,7 @@ export class UiHelpers {
 						"accent",
 						file.path,
 					)} ${theme.fg("dim", suffix)}`;
-					this.ctx.chatContainer.addChild(new Text(text, 0, 0));
+					addChatChild(this.ctx, new Text(text, 0, 0));
 				}
 				break;
 			}
@@ -302,8 +550,12 @@ export class UiHelpers {
 				const textContent = this.ctx.getUserMessageText(message);
 				if (textContent) {
 					const isSynthetic = message.role === "developer" ? true : (message.synthetic ?? false);
-					const userComponent = new UserMessageComponent(textContent, isSynthetic);
-					this.ctx.chatContainer.addChild(userComponent);
+					const userComponent = new UserMessageComponent(
+						textContent,
+						isSynthetic,
+						message.role === "user" && !isSynthetic ? this.#userViewportAnchorId(message) : undefined,
+					);
+					addChatChild(this.ctx, userComponent);
 					if (options?.populateHistory && message.role === "user" && !isSynthetic) {
 						this.ctx.editor.addToHistory(textContent);
 					}
@@ -311,10 +563,13 @@ export class UiHelpers {
 				break;
 			}
 			case "assistant": {
-				const assistantComponent = new AssistantMessageComponent(message, this.ctx.hideThinkingBlock, () =>
-					this.ctx.ui.requestRender(),
+				const assistantComponent = new AssistantMessageComponent(
+					message,
+					this.ctx.hideThinkingBlock,
+					() => this.ctx.ui.requestRender(),
+					this.assistantViewportAnchorId(message),
 				);
-				this.ctx.chatContainer.addChild(assistantComponent);
+				addChatChild(this.ctx, assistantComponent);
 				break;
 			}
 			case "toolResult": {
@@ -350,12 +605,35 @@ export class UiHelpers {
 		const readToolCallArgs = new Map<string, Record<string, unknown>>();
 		const readToolCallAssistantComponents = new Map<string, AssistantMessageComponent>();
 		const deferredMessages: AgentMessage[] = [];
+		const persistedIrcObservationIds = new Set<string>();
+		const now = Date.now();
+		this.#resetViewportAnchorOccurrencePass();
+		this.#renderedIrcInlineComponents.clear();
 		for (const message of sessionContext.messages) {
 			// Defer compaction summaries so they render at the bottom (visible after scroll)
 			if (message.role === "compactionSummary") {
 				deferredMessages.push(message);
 				continue;
 			}
+			if (message.role === "custom" && isIrcCustomType(message.customType)) {
+				const parsed = parseIrcMessage(message);
+				if (parsed) {
+					persistedIrcObservationIds.add(parsed.observationId);
+					const record = this.ctx.ircLedger.getRecord(parsed.observationId);
+					if (
+						record &&
+						(record.mode === "persistent" || now < record.expiresAt!) &&
+						!this.#renderedIrcInlineComponents.has(record.observationId)
+					) {
+						this.#renderedIrcInlineComponents.set(
+							record.observationId,
+							this.addRebuiltIrcObservationToChat(record),
+						);
+					}
+				}
+				continue;
+			}
+
 			// Assistant messages need special handling for tool calls
 			if (message.role === "assistant") {
 				this.ctx.addMessageToChat(message);
@@ -394,7 +672,7 @@ export class UiHelpers {
 									showContentPreview: this.ctx.settings.get("read.toolResultPreview"),
 								});
 								readGroup.setExpanded(this.ctx.toolOutputExpanded);
-								this.ctx.chatContainer.addChild(readGroup);
+								addChatChild(this.ctx, readGroup);
 							}
 							readGroup.updateArgs(content.arguments, content.id);
 							readGroup.updateResult(
@@ -436,7 +714,7 @@ export class UiHelpers {
 						content.id,
 					);
 					component.setExpanded(this.ctx.toolOutputExpanded);
-					this.ctx.chatContainer.addChild(component);
+					addChatChild(this.ctx, component);
 
 					if (hasErrorStop && errorMessage) {
 						component.updateResult(
@@ -474,7 +752,7 @@ export class UiHelpers {
 								showContentPreview: this.ctx.settings.get("read.toolResultPreview"),
 							});
 							readGroup.setExpanded(this.ctx.toolOutputExpanded);
-							this.ctx.chatContainer.addChild(readGroup);
+							addChatChild(this.ctx, readGroup);
 						}
 						const args = readToolCallArgs.get(message.toolCallId);
 						if (args) {
@@ -506,6 +784,15 @@ export class UiHelpers {
 		for (const message of deferredMessages) {
 			this.ctx.addMessageToChat(message, options);
 		}
+		for (const record of this.ctx.ircLedger.getInlineProjection(now)) {
+			if (
+				persistedIrcObservationIds.has(record.observationId) ||
+				this.#renderedIrcInlineComponents.has(record.observationId)
+			) {
+				continue;
+			}
+			this.#renderedIrcInlineComponents.set(record.observationId, this.addRebuiltIrcObservationToChat(record));
+		}
 
 		this.ctx.pendingTools.clear();
 		this.ctx.ui.requestRender();
@@ -541,7 +828,7 @@ export class UiHelpers {
 		}
 		if (preservedChatChildren && preservedChatChildren.length > 0) {
 			for (const child of preservedChatChildren) {
-				this.ctx.chatContainer.addChild(child);
+				addChatChild(this.ctx, child);
 			}
 			this.ctx.ui.requestRender();
 		}
@@ -563,8 +850,8 @@ export class UiHelpers {
 			process.stderr.write(`${label}: ${errorMessage}\n`);
 			return;
 		}
-		this.ctx.chatContainer.addChild(new Spacer(1));
-		this.ctx.chatContainer.addChild(new Text(theme.fg("error", `${label}: ${errorMessage}`), 1, 0));
+		addChatChild(this.ctx, new Spacer(1));
+		addChatChild(this.ctx, new Text(theme.fg("error", `${label}: ${errorMessage}`), 1, 0));
 		this.ctx.ui.requestRender();
 	}
 
@@ -575,15 +862,16 @@ export class UiHelpers {
 			process.stderr.write(`${label}: ${warningMessage}\n`);
 			return;
 		}
-		this.ctx.chatContainer.addChild(new Spacer(1));
-		this.ctx.chatContainer.addChild(new Text(theme.fg("warning", `${label}: ${warningMessage}`), 1, 0));
+		addChatChild(this.ctx, new Spacer(1));
+		addChatChild(this.ctx, new Text(theme.fg("warning", `${label}: ${warningMessage}`), 1, 0));
 		this.ctx.ui.requestRender();
 	}
 
 	showNewVersionNotification(newVersion: string): void {
-		this.ctx.chatContainer.addChild(new Spacer(1));
-		this.ctx.chatContainer.addChild(new DynamicBorder(text => theme.fg("warning", text)));
-		this.ctx.chatContainer.addChild(
+		addChatChild(this.ctx, new Spacer(1));
+		addChatChild(this.ctx, new DynamicBorder(text => theme.fg("warning", text)));
+		addChatChild(
+			this.ctx,
 			new Text(
 				theme.bold(theme.fg("warning", "Update Available")) +
 					"\n" +
@@ -593,7 +881,7 @@ export class UiHelpers {
 				0,
 			),
 		);
-		this.ctx.chatContainer.addChild(new DynamicBorder(text => theme.fg("warning", text)));
+		addChatChild(this.ctx, new DynamicBorder(text => theme.fg("warning", text)));
 		this.ctx.ui.requestRender();
 	}
 
@@ -859,12 +1147,12 @@ export class UiHelpers {
 		// removeChild() would tear them down before re-adding.
 		for (const component of this.ctx.pendingBashComponents) {
 			this.ctx.pendingMessagesContainer.detachChild(component);
-			this.ctx.chatContainer.addChild(component);
+			addChatChild(this.ctx, component);
 		}
 		this.ctx.pendingBashComponents = [];
 		for (const component of this.ctx.pendingPythonComponents) {
 			this.ctx.pendingMessagesContainer.detachChild(component);
-			this.ctx.chatContainer.addChild(component);
+			addChatChild(this.ctx, component);
 		}
 		this.ctx.pendingPythonComponents = [];
 	}