@oh-my-pi/pi-tui 18.2.3 → 18.2.5

package/src/chat/compaction-summary-message.ts

@@ -0,0 +1,261 @@
+import { Box } from "../components/box";
+import { Disclosure } from "../components/disclosure";
+import { type Component } from "../tui";
+import { Markdown } from "../components/markdown";
+import { formatNumber } from "@oh-my-pi/pi-utils";
+import { getMarkdownTheme, theme } from "../theme";
+import type { BranchSummaryMessage, CompactionSummaryMessage, CustomMessage } from "./messages";
+
+/** Divider labels per compaction method; unknown/legacy methods fall back to "compacted". */
+const COMPACTION_METHOD_LABELS: Record<string, string> = {
+	remote: "remote-compacted",
+	soft: "soft-compacted",
+	handoff: "handed-off",
+	snapcompact: "snap-compacted",
+	shake: "shaken",
+};
+
+/** `256K→20K` amount badge, or undefined when the entry predates `tokensAfter`. */
+function compactionAmount(message: CompactionSummaryMessage): string | undefined {
+	if (message.tokensAfter === undefined || message.tokensBefore <= 0) return undefined;
+	return `${formatNumber(message.tokensBefore)}→${formatNumber(message.tokensAfter)}`;
+}
+
+interface SummaryDividerOptions {
+	label: () => string;
+	detailMarkdown: () => string;
+}
+
+/**
+ * Width-aware divider banner shared as every history-collapse summary row:
+ * blank, the labeled rule (or the bare label when too narrow to frame), blank.
+ */
+class DividerSummary implements Component {
+	readonly #label: () => string;
+	#cache: { width: number; lines: readonly string[] } | undefined;
+
+	constructor(label: () => string) {
+		this.#label = label;
+	}
+
+	invalidate(): void {
+		this.#cache = undefined;
+	}
+
+	render(width: number): readonly string[] {
+		width = Math.max(1, width);
+		if (this.#cache?.width === width) return this.#cache.lines;
+		const lines = ["", this.#divider(width), ""];
+		this.#cache = { width, lines };
+		return lines;
+	}
+
+	#divider(width: number): string {
+		const rule = theme.tree.horizontal;
+		const label = this.#label();
+		// sep.dot ships pre-padded (" · "); trim so the hint joins with single spaces.
+		const hint = `${theme.sep.dot.trim()} ctrl+o`;
+		const plainWidth = Bun.stringWidth(`${label} ${hint}`, { countAnsiEscapeCodes: false });
+		// ` label hint ` framed by rules on both sides.
+		const remaining = width - plainWidth - 2;
+		if (remaining < 4) {
+			// Too narrow for a framed rule — emit the bare label.
+			return theme.fg("muted", label);
+		}
+		const left = Math.floor(remaining / 2);
+		const right = remaining - left;
+		return (
+			theme.fg("dim", rule.repeat(left)) +
+			` ${theme.fg("muted", label)} ${theme.fg("dim", hint)} ` +
+			theme.fg("dim", rule.repeat(right))
+		);
+	}
+}
+
+/**
+ * Common summary/detail delegate behind the compaction, handoff, and branch
+ * banners: the width-aware divider is always shown while the Markdown detail
+ * box is constructed lazily only on the first expanded render and retained
+ * across collapse/re-expand cycles.
+ */
+class SummaryMessageComponent implements Component {
+	#disclosure: Disclosure;
+	#ignoreTight: boolean | undefined;
+	#disposed = false;
+
+	readonly #options: SummaryDividerOptions;
+
+	constructor(options: SummaryDividerOptions) {
+		this.#options = options;
+		this.#disclosure = this.#createDisclosure(false);
+	}
+
+	setExpanded(expanded: boolean): void {
+		this.#disclosure.setExpanded(expanded);
+	}
+
+	setIgnoreTight(ignore: boolean): this {
+		if (this.#disposed || this.#ignoreTight === ignore) return this;
+		this.#ignoreTight = ignore;
+		this.#disclosure.setIgnoreTight(ignore);
+		return this;
+	}
+
+	invalidate(): void {
+		if (this.#disposed) return;
+		// Theme may have changed — rebuild the delegate unmaterialized so the
+		// detail box picks up fresh styling lazily on its next expanded render.
+		const expanded = this.#disclosure.expanded;
+		this.#disclosure.dispose();
+		this.#disclosure = this.#createDisclosure(expanded);
+		if (this.#ignoreTight !== undefined) this.#disclosure.setIgnoreTight(this.#ignoreTight);
+	}
+
+	dispose(): void {
+		if (this.#disposed) return;
+		this.#disposed = true;
+		this.#disclosure.dispose();
+	}
+
+	render(width: number): readonly string[] {
+		return this.#disclosure.render(width);
+	}
+
+	#createDisclosure(expanded: boolean): Disclosure {
+		return new Disclosure({
+			summary: new DividerSummary(this.#options.label),
+			body: () => this.#detailBox(),
+			expanded,
+		});
+	}
+
+	#detailBox(): Box {
+		const box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		box.setIgnoreTight(true);
+		box.addChild(
+			new Markdown(this.#options.detailMarkdown(), 0, 0, getMarkdownTheme(), {
+				color: (text: string) => theme.fg("customMessageText", text),
+			}),
+		);
+		return box;
+	}
+}
+
+/**
+ * Compaction point in the transcript, rendered as a slim horizontal divider:
+ *
+ *   ──────── 📷 remote-compacted · 256K→20K · ctrl+o ────────
+ *
+ * The label names the maintenance method that fired (remote/soft/handoff/
+ * snapcompact; "compacted" for legacy or extension-provided entries) and the
+ * before → after context amounts when the entry recorded them. The
+ * conversation above the divider stays visible (display transcript keeps
+ * full history); only the LLM context was reset. Expanding (ctrl+o) reveals
+ * the compaction summary below the divider.
+ */
+export class CompactionSummaryMessageComponent extends SummaryMessageComponent {
+	constructor(message: CompactionSummaryMessage) {
+		super({
+			// A dead-end warning stamped by the progress guard badges the bar;
+			// the full text lives in the ctrl+o detail block below.
+			label: () => compactionLabel(message),
+			detailMarkdown: () => compactionDetailMarkdown(message),
+		});
+	}
+}
+
+function compactionLabel(message: CompactionSummaryMessage): string {
+	const name = (message.method && COMPACTION_METHOD_LABELS[message.method]) || "compacted";
+	let label = `${theme.icon.camera} ${name}`;
+	const amount = compactionAmount(message);
+	if (amount) label += `${theme.sep.dot}${amount}`;
+	if (message.warning) label += ` ${theme.fg("warning", theme.icon.warning)}`;
+	return label;
+}
+
+function compactionDetailMarkdown(message: CompactionSummaryMessage): string {
+	const tokenLine =
+		message.tokensBefore > 0
+			? message.tokensAfter !== undefined
+				? `Compacted from ${message.tokensBefore.toLocaleString()} to ${message.tokensAfter.toLocaleString()} tokens`
+				: `Compacted from ${message.tokensBefore.toLocaleString()} tokens`
+			: message.tokensAfter !== undefined
+				? `Compacted to ${message.tokensAfter.toLocaleString()} tokens`
+				: "Compacted context";
+	const frameCount = message.images?.length ?? 0;
+	const frameNote =
+		frameCount > 0 ? `\n\n_${frameCount} snapcompact frame${frameCount === 1 ? "" : "s"} attached_` : "";
+	const warningNote = message.warning ? `\n\n${theme.icon.warning} **Warning:** ${message.warning}` : "";
+	return `**${tokenLine}**${warningNote}\n\n${message.summary}${frameNote}`;
+}
+
+/**
+ * Handoff is a compaction strategy too, but it is persisted as a custom message
+ * so the LLM sees the handoff-specific developer context. Render it with the
+ * same divider affordance as `/compact` instead of the generic `[handoff]` box.
+ */
+export class HandoffSummaryMessageComponent extends SummaryMessageComponent {
+	constructor(message: CustomMessage<unknown>) {
+		super({
+			label: () => `${theme.icon.context} handed-off`,
+			detailMarkdown: () => {
+				const document = extractHandoffDocument(getCustomMessageText(message));
+				return `**Handoff context**\n\n${document || "_No handoff content._"}`;
+			},
+		});
+	}
+}
+
+export function createHandoffSummaryMessageComponent(
+	message: CustomMessage<unknown>,
+	expanded: boolean,
+): HandoffSummaryMessageComponent | undefined {
+	if (message.customType !== "handoff" || !message.display) return undefined;
+	const component = new HandoffSummaryMessageComponent(message);
+	component.setExpanded(expanded);
+	return component;
+}
+
+/**
+ * A branch summary collapses a side branch back into the main line. Render it
+ * with the same slim divider as `/compact` and handoff rather than a `[branch]`
+ * box, so every history-collapse point reads as one consistent banner.
+ */
+export class BranchSummaryMessageComponent extends SummaryMessageComponent {
+	constructor(message: BranchSummaryMessage) {
+		super({
+			label: () => `${theme.icon.branch} branch`,
+			detailMarkdown: () => `**Branch summary**\n\n${message.summary}`,
+		});
+	}
+}
+
+function getCustomMessageText(message: CustomMessage<unknown>): string {
+	if (typeof message.content === "string") return message.content;
+	let firstText: string | undefined;
+	let parts: string[] | undefined;
+	for (const content of message.content) {
+		if (content.type !== "text") continue;
+		if (firstText === undefined) {
+			firstText = content.text;
+			continue;
+		}
+		if (parts === undefined) {
+			parts = [firstText];
+		}
+		parts.push(content.text);
+	}
+	return parts === undefined ? (firstText ?? "") : parts.join("\n");
+}
+
+function extractHandoffDocument(text: string): string {
+	const openTag = "<handoff-context>";
+	const closeTag = "</handoff-context>";
+	const openIndex = text.indexOf(openTag);
+	if (openIndex === -1) return text.trim();
+
+	const contentStart = openIndex + openTag.length;
+	const closeIndex = text.indexOf(closeTag, contentStart);
+	const document = closeIndex === -1 ? text.slice(contentStart) : text.slice(contentStart, closeIndex);
+	return document.trim();
+}

package/src/chat/custom-message.ts

@@ -0,0 +1,23 @@
+import { FramedMessageComponent } from "../chrome/message-frame";
+import type { MessageRenderer } from "./extension-types";
+import { theme } from "../theme";
+import { type CustomMessage, LIVE_DELEGATION_MESSAGE_TYPE } from "./messages";
+
+/**
+ * Component that renders a custom message entry from extensions.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class CustomMessageComponent extends FramedMessageComponent<CustomMessage<unknown>> {
+	constructor(message: CustomMessage<unknown>, customRenderer?: MessageRenderer) {
+		const isLiveDelegation = message.customType === LIVE_DELEGATION_MESSAGE_TYPE;
+		super({
+			message,
+			// The transcript dispatch routes both `custom` and legacy `hookMessage` roles here:
+			// tag hooks with the hook glyph, other injected messages with a neutral package.
+			icon: () => (String(message.role) === "hookMessage" ? theme.icon.extensionHook : theme.icon.package),
+			hideHeader: isLiveDelegation,
+			borderColor: isLiveDelegation ? "borderAccent" : undefined,
+			customRenderer,
+		});
+	}
+}

package/src/chat/display-preferences.ts

@@ -0,0 +1,24 @@
+/** Process-wide display preferences applied by the host settings hooks. */
+export interface ChatTranscriptDisplayPreferences {
+	hideToolActivity: boolean;
+	readToolResultPreview: boolean;
+	showImages: boolean;
+	cacheMissMarker: boolean;
+	showTokenUsage: boolean;
+	showTurnTime: boolean;
+}
+
+/** Current transcript display preferences. */
+export const chatTranscriptDisplayPreferences: ChatTranscriptDisplayPreferences = {
+	hideToolActivity: false,
+	readToolResultPreview: false,
+	showImages: true,
+	cacheMissMarker: false,
+	showTokenUsage: false,
+	showTurnTime: false,
+};
+
+/** Apply host display preferences without pulling settings into the renderer. */
+export function setChatTranscriptDisplayPreferences(preferences: Partial<ChatTranscriptDisplayPreferences>): void {
+	Object.assign(chatTranscriptDisplayPreferences, preferences);
+}

package/src/chat/eval-execution.ts

@@ -0,0 +1,172 @@
+/**
+ * Component for displaying user-initiated eval execution with streaming output.
+ * Shares the same kernel session as the agent's eval tool.
+ */
+
+import type { Loader } from "../components/loader";
+import { Text } from "../components/text";
+import { Container, type TUI } from "../tui";
+import { sanitizeText } from "@oh-my-pi/pi-utils";
+import { highlightCode, theme } from "../theme/theme";
+import type { OutputArtifactError } from "../tools/streaming-output";
+import type { TruncationMeta } from "../tools/output-meta";
+import { OutputPane } from "../render/output-pane";
+import {
+	buildExecutionFrame,
+	buildStatusFooter,
+	clampDisplayLine,
+	type ExecutionColorKey,
+	type ExecutionStatus,
+	PREVIEW_LINES,
+	resolveExecutionStatus,
+} from "./execution-shared";
+
+export type EvalExecutionLanguage = "python" | "js";
+
+export class EvalExecutionComponent extends Container {
+	#status: ExecutionStatus = "running";
+	#exitCode: number | undefined = undefined;
+	#loader: Loader;
+	#truncation?: TruncationMeta;
+	#artifactError?: OutputArtifactError;
+	#expanded = false;
+	// Post-finalize mutation counter (FinalizableBlock.getTranscriptBlockVersion):
+	// a completed cell's block still mutates on expansion toggles, and the
+	// transcript's width-epoch resolution and committed-render bypass must
+	// observe that.
+	#blockVersion = 0;
+	#contentContainer: Container;
+	#outputPane: OutputPane;
+	readonly #code: string;
+	readonly #excludeFromContext: boolean;
+	readonly #language: EvalExecutionLanguage;
+
+	#highlightLang(): "python" | "javascript" {
+		return this.#language === "js" ? "javascript" : "python";
+	}
+
+	#formatHeader(colorKey: ExecutionColorKey): Text {
+		const prompt = theme.fg(colorKey, theme.bold(">>>"));
+		const continuation = theme.fg(colorKey, "    ");
+		const codeLines = highlightCode(this.#code, this.#highlightLang());
+		const headerLines = codeLines.map((line, index) =>
+			index === 0 ? `${prompt} ${line}` : `${continuation}${line}`,
+		);
+		return new Text(headerLines.join("\n"), 1, 0);
+	}
+
+	constructor(code: string, ui: TUI, excludeFromContext = false, language: EvalExecutionLanguage = "python") {
+		super();
+		this.#code = code;
+		this.#excludeFromContext = excludeFromContext;
+		this.#language = language;
+
+		const colorKey: ExecutionColorKey = this.#excludeFromContext ? "dim" : "pythonMode";
+		const { contentContainer, loader } = buildExecutionFrame(this, ui, colorKey);
+		this.#contentContainer = contentContainer;
+		this.#loader = loader;
+		this.#outputPane = new OutputPane(theme, {
+			expanded: false,
+			collapsedMaxLines: PREVIEW_LINES,
+			edge: "tail",
+			visual: true,
+			paddingX: 1,
+			leadingBlank: true,
+			showHiddenMarker: false,
+			showExpandHint: false,
+			styleLine: line => theme.fg("muted", line),
+			normalizeLine: clampDisplayLine,
+		});
+
+		this.#contentContainer.addChild(this.#formatHeader(colorKey));
+		this.#contentContainer.addChild(this.#loader);
+	}
+
+	/**
+	 * Transcript finalization contract (see `FinalizableBlock`): the collapsed
+	 * streaming preview rewrites its tail window every chunk, so the block must
+	 * stay out of native scrollback until the cell completes.
+	 */
+	isTranscriptBlockFinalized(): boolean {
+		return this.#status !== "running";
+	}
+
+	getTranscriptBlockVersion(): number {
+		return this.#blockVersion;
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded !== expanded) this.#blockVersion++;
+		this.#expanded = expanded;
+		this.#outputPane.setExpanded(expanded);
+		this.#updateDisplay();
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#updateDisplay();
+	}
+
+	appendOutput(chunk: string): void {
+		// Chunk is pre-sanitized by OutputSink.push() — no need to sanitize again.
+		this.#outputPane.append(chunk);
+		this.#updateDisplay();
+	}
+
+	setComplete(
+		exitCode: number | undefined,
+		cancelled: boolean,
+		options?: { output?: string; truncation?: TruncationMeta; artifactError?: OutputArtifactError },
+	): void {
+		this.#exitCode = exitCode;
+		this.#status = resolveExecutionStatus(exitCode, cancelled);
+		this.#truncation = options?.truncation;
+		this.#artifactError = options?.artifactError;
+		this.#outputPane.finish();
+		if (options?.output !== undefined) {
+			this.#setOutput(options.output);
+		}
+
+		this.#loader.stop();
+		this.#updateDisplay();
+	}
+
+	#updateDisplay(): void {
+		// Only the collapsed preview hides lines; when expanded the footer must
+		// not keep advertising hidden lines / ctrl+o.
+		const hiddenLineCount = this.#expanded ? 0 : Math.max(0, this.#outputPane.lineCount - PREVIEW_LINES);
+
+		this.#contentContainer.clear();
+
+		const colorKey: ExecutionColorKey = this.#excludeFromContext ? "dim" : "pythonMode";
+		this.#contentContainer.addChild(this.#formatHeader(colorKey));
+
+		if (this.#outputPane.lineCount > 0) this.#contentContainer.addChild(this.#outputPane);
+
+		if (this.#status === "running") {
+			this.#contentContainer.addChild(this.#loader);
+		} else {
+			const footer = buildStatusFooter({
+				status: this.#status,
+				exitCode: this.#exitCode,
+				truncation: this.#truncation,
+				artifactError: this.#artifactError,
+				hiddenLineCount,
+			});
+			if (footer) this.#contentContainer.addChild(footer);
+		}
+	}
+
+	#setOutput(output: string): void {
+		const clean = sanitizeText(output);
+		this.#outputPane.setText(clean);
+	}
+
+	getOutput(): string {
+		return this.#outputPane.getText();
+	}
+
+	getCode(): string {
+		return this.#code;
+	}
+}

package/src/chat/execution-shared.ts

@@ -0,0 +1,113 @@
+/**
+ * Shared rendering primitives for bash/eval execution components.
+ *
+ * Each helper isolates a piece of structure both components share verbatim
+ * (frame layout and post-run status line). Differences in
+ * how each component prepares its header, output lines, or sixel masking
+ * stay in their respective files.
+ */
+
+import { Loader } from "../components/loader";
+import { Text } from "../components/text";
+import { Container, type TUI } from "../tui";
+import { getSymbolTheme, theme } from "../theme/theme";
+import type { OutputArtifactError } from "../tools/streaming-output";
+import { formatArtifactErrorNotice, formatTruncationMetaNotice, type TruncationMeta } from "../tools/output-meta";
+import { DynamicBorder } from "../chrome/dynamic-border";
+import { Ellipsis, truncateToWidth, visibleWidth } from "../utils";
+
+/** Output rows shown while an execution is collapsed. */
+export const PREVIEW_LINES = 20;
+
+/** Maximum visible columns retained from an execution output line. */
+export const MAX_DISPLAY_LINE_CHARS = 4000;
+
+/** Clamp execution output by visible width without splitting ANSI sequences. */
+export function clampDisplayLine(line: string): string {
+	const visible = visibleWidth(line);
+	if (visible <= MAX_DISPLAY_LINE_CHARS) {
+		return line;
+	}
+	const omitted = visible - MAX_DISPLAY_LINE_CHARS;
+	return `${truncateToWidth(line, MAX_DISPLAY_LINE_CHARS, Ellipsis.Omit)}… [${omitted} visible columns omitted]`;
+}
+
+export type ExecutionStatus = "running" | "complete" | "cancelled" | "error";
+
+/** Theme color keys valid for an execution frame. */
+export type ExecutionColorKey = "dim" | "bashMode" | "pythonMode";
+
+/**
+ * Build the spacer + top border + content container + bottom border scaffold
+ * that bash and eval execution components share. The caller appends the
+ * header (command vs `>>>` prompt) and the returned loader to
+ * `contentContainer` so per-mode order is preserved.
+ */
+export function buildExecutionFrame(
+	parent: Container,
+	ui: TUI,
+	colorKey: ExecutionColorKey,
+): { contentContainer: Container; loader: Loader } {
+	const borderColor = (str: string) => theme.fg(colorKey, str);
+
+	parent.addChild(new DynamicBorder(borderColor));
+
+	const contentContainer = new Container();
+	parent.addChild(contentContainer);
+
+	const loader = new Loader(
+		ui,
+		spinner => theme.fg(colorKey, spinner),
+		text => theme.fg("muted", text),
+		`Running… (esc to cancel)`,
+		getSymbolTheme().spinnerFrames,
+	);
+
+	parent.addChild(new DynamicBorder(borderColor));
+	return { contentContainer, loader };
+}
+
+/**
+ * Build the post-run status block (hidden-line hint, exit/cancel marker,
+ * truncation notice). Returns undefined when there is nothing to display so
+ * callers can skip appending a stray Text child.
+ */
+export function buildStatusFooter(opts: {
+	status: ExecutionStatus;
+	exitCode: number | undefined;
+	truncation: TruncationMeta | undefined;
+	artifactError?: OutputArtifactError;
+	hiddenLineCount: number;
+	/** Suppress the "… N more lines" hint (used when sixel passthrough renders the full output). */
+	suppressHiddenCount?: boolean;
+}): Text | undefined {
+	const parts: string[] = [];
+
+	if (opts.hiddenLineCount > 0 && !opts.suppressHiddenCount) {
+		parts.push(theme.fg("dim", `… ${opts.hiddenLineCount} more lines (ctrl+o to expand)`));
+	}
+	if (opts.status === "cancelled") {
+		parts.push(theme.fg("warning", "(cancelled)"));
+	} else if (opts.status === "error") {
+		parts.push(theme.fg("error", `(exit ${opts.exitCode})`));
+	}
+	if (opts.truncation) {
+		parts.push(theme.fg("warning", formatTruncationMetaNotice(opts.truncation)));
+	}
+	if (opts.artifactError) {
+		parts.push(theme.fg("warning", formatArtifactErrorNotice(opts.artifactError)));
+	}
+
+	if (parts.length === 0) return undefined;
+	return new Text(`\n${parts.join("\n")}`, 1, 0);
+}
+
+/**
+ * Derive the post-run status from an exit code + cancellation flag using the
+ * same precedence both execution components apply.
+ */
+export function resolveExecutionStatus(exitCode: number | undefined, cancelled: boolean): ExecutionStatus {
+	if (cancelled) return "cancelled";
+	if (exitCode !== 0 && exitCode !== undefined && exitCode !== null) return "error";
+	return "complete";
+}

package/src/chat/extension-types.ts

@@ -0,0 +1,46 @@
+import type { Component, TUI } from "../tui";
+import type { Theme } from "../theme/theme";
+import type { CustomMessage, HookMessage } from "./messages";
+
+export type ExtensionUiComponent = Component & { dispose?(): void };
+
+export type ExtensionUiComponentFactory = (tui: TUI, theme: Theme) => ExtensionUiComponent;
+
+export type ExtensionWidgetContent = string[] | ExtensionUiComponentFactory | undefined;
+
+export interface MessageRenderOptions {
+	expanded: boolean;
+}
+
+export type MessageRenderer<T = unknown> = (
+	message: CustomMessage<T>,
+	options: MessageRenderOptions,
+	theme: Theme,
+) => Component | undefined;
+
+export interface AssistantThinkingRenderContext {
+	contentIndex: number;
+	thinkingIndex: number;
+	text: string;
+	requestRender(): void;
+}
+
+export type AssistantThinkingRenderer = (
+	context: AssistantThinkingRenderContext,
+	theme: Theme,
+) => Component | undefined;
+
+export interface HookMessageRenderOptions {
+	/** Whether the view is expanded */
+	expanded: boolean;
+}
+
+/**
+ * Renderer for hook messages.
+ * Hooks register these to provide custom TUI rendering for their message types.
+ */
+export type HookMessageRenderer<T = unknown> = (
+	message: HookMessage<T>,
+	options: HookMessageRenderOptions,
+	theme: Theme,
+) => Component | undefined;

package/src/chat/hook-message.ts

@@ -0,0 +1,20 @@
+import { FramedMessageComponent } from "../chrome/message-frame";
+import type { HookMessageRenderer } from "./extension-types";
+import type { HookMessage } from "./messages";
+
+/** Lines of default markdown body shown before the "…" fold when collapsed. */
+const HOOK_COLLAPSED_LINES = 5;
+
+/**
+ * Component that renders a custom message entry from hooks.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class HookMessageComponent extends FramedMessageComponent<HookMessage<unknown>> {
+	constructor(message: HookMessage<unknown>, customRenderer?: HookMessageRenderer) {
+		super({
+			message,
+			collapseAfterLines: HOOK_COLLAPSED_LINES,
+			customRenderer,
+		});
+	}
+}