@narumitw/pi-btw 0.58.1 → 0.60.0

package/src/transcript-pager.ts

@@ -1,26 +1,27 @@
 import type { AssistantMessage } from "@earendil-works/pi-ai";
 import {
-	AssistantMessageComponent,
-	getMarkdownTheme,
-	type KeybindingsManager,
-	type Theme,
-	UserMessageComponent,
+  AssistantMessageComponent,
+  getMarkdownTheme,
+  type KeybindingsManager,
+  type MarkdownTransformer,
+  type Theme,
+  UserMessageComponent,
 } from "@earendil-works/pi-coding-agent";
 import {
-	type Component,
-	CURSOR_MARKER,
-	Editor,
-	type EditorTheme,
-	type Focusable,
-	Key,
-	Loader,
-	Markdown,
-	matchesKey,
-	ScrollView,
-	type TUI,
-	truncateToWidth,
-	VStack,
-	visibleWidth,
+  type Component,
+  CURSOR_MARKER,
+  Editor,
+  type EditorTheme,
+  type Focusable,
+  Key,
+  Loader,
+  Markdown,
+  matchesKey,
+  ScrollView,
+  type TUI,
+  truncateToWidth,
+  VStack,
+  visibleWidth,
 } from "@earendil-works/pi-tui";
 import type { BtwFullscreenLayoutComponent } from "./fullscreen-ui.js";
 import { BtwPasteGuard, type BtwShortcuts, getBtwShortcuts } from "./keybindings.js";
@@ -35,688 +36,636 @@ const RESERVED_APP_LINES = 3;
 
 // A temporary fit after manual scrolling must not silently resume following new output.
 class PreservingScrollView extends ScrollView {
-	override updateLayout(
-		contentHeight: number,
-		viewportHeight: number,
-		requestRender: () => void,
-	): void {
-		const preserveManualPosition = !this.isFollowingEnd;
-		super.updateLayout(contentHeight, viewportHeight, requestRender);
-		if (preserveManualPosition && this.isFollowingEnd) {
-			this.scrollTo(this.scrollTop, { disableFollow: true });
-		}
-	}
+  override updateLayout(contentHeight: number, viewportHeight: number, requestRender: () => void): void {
+    const preserveManualPosition = !this.isFollowingEnd;
+    super.updateLayout(contentHeight, viewportHeight, requestRender);
+    if (preserveManualPosition && this.isFollowingEnd) {
+      this.scrollTo(this.scrollTop, { disableFollow: true });
+    }
+  }
 }
 
 export type TranscriptPagerAction =
-	| { kind: "submit"; question: string }
-	| { kind: "bringToMain"; questionDraft: string }
-	| { kind: "close" };
+  | { kind: "submit"; question: string }
+  | { kind: "bringToMain"; questionDraft: string }
+  | { kind: "close" };
 
 export interface BtwThinkingControl {
-	level: BtwThinkingLevel;
-	levels: readonly BtwThinkingLevel[];
-	keybindings: KeybindingsManager;
-	onChange: (level: BtwThinkingLevel) => void;
+  level: BtwThinkingLevel;
+  levels: readonly BtwThinkingLevel[];
+  keybindings: KeybindingsManager;
+  onChange: (level: BtwThinkingLevel) => void;
 }
 
 export interface BtwAnsweringViewOptions {
-	steering?: {
-		questions: readonly string[];
-		onSubmit: (question: string) => void;
-		thinking?: BtwThinkingControl;
-	};
+  markdownTransformers?: readonly MarkdownTransformer[];
+  steering?: {
+    questions: readonly string[];
+    onSubmit: (question: string) => void;
+    thinking?: BtwThinkingControl;
+  };
 }
 
 export class BtwTranscriptPager implements BtwFullscreenLayoutComponent, Focusable {
-	private readonly shortcuts: BtwShortcuts;
-	private readonly pasteGuard = new BtwPasteGuard();
-	private readonly transcriptComponents: Component[];
-	private readonly editor: Editor;
-	private readonly canBringToMain: boolean;
-	private readonly scrollView: ScrollView;
-	private readonly layoutRoot: VStack;
-	private lastContentLineCount = 0;
-	private warning: string | undefined;
-	private finished = false;
-	private isFocused = false;
-	private thinkingLevel: BtwThinkingLevel | undefined;
-
-	constructor(
-		private readonly tui: TUI,
-		private readonly theme: Theme,
-		turns: readonly SideThreadTurn[],
-		private readonly onAction: (action: TranscriptPagerAction) => void,
-		private readonly options: {
-			startAtBottom?: boolean;
-			initialQuestion?: string;
-			thinking?: BtwThinkingControl;
-		} = {},
-	) {
-		this.shortcuts = getBtwShortcuts(tui, options.thinking?.keybindings);
-		this.transcriptComponents = buildTranscriptComponents(turns, this.theme);
-		this.canBringToMain = turns.some((turn) => turn.kind === "answered");
-		this.thinkingLevel = options.thinking?.level;
-		const editorTheme: EditorTheme = {
-			borderColor: (text) => this.theme.fg("accent", text),
-			selectList: {
-				selectedPrefix: (text) => this.theme.fg("accent", text),
-				selectedText: (text) => this.theme.fg("accent", text),
-				description: (text) => this.theme.fg("muted", text),
-				scrollInfo: (text) => this.theme.fg("dim", text),
-				noMatch: (text) => this.theme.fg("warning", text),
-			},
-		};
-		this.editor = new Editor(this.tui, editorTheme);
-		if (options.initialQuestion) this.editor.setText(options.initialQuestion);
-		this.editor.onChange = () => {
-			this.warning = undefined;
-		};
-		this.editor.onSubmit = (text) => {
-			const question = text.trim();
-			if (!question) {
-				this.warning = "Question cannot be empty";
-				return;
-			}
-			this.finished = true;
-			this.onAction({ kind: "submit", question });
-		};
-		const transcript = this.createTranscriptComponent();
-		this.scrollView = new PreservingScrollView(transcript, {
-			follow: options.startAtBottom ? "end" : "none",
-			primary: true,
-		});
-		this.layoutRoot = new VStack([
-			{ component: this.createHeaderComponent(), basis: 1, shrink: 0, minSize: 1 },
-			{ component: this.scrollView, basis: 0, grow: 1, minSize: 0 },
-			{ component: this.createFooterComponent(), basis: 1, shrink: 0, minSize: 1 },
-			{ component: this.editor, basis: "auto", shrink: 1, minSize: 0 },
-		]);
-	}
-
-	get focused(): boolean {
-		return this.isFocused;
-	}
-
-	set focused(value: boolean) {
-		this.isFocused = value;
-		this.editor.focused = value;
-	}
-
-	getFullscreenLayout(): Component {
-		return this.layoutRoot;
-	}
-
-	render(width: number): string[] {
-		if (width <= 0) return [];
-		const safeWidth = Math.max(1, width);
-		const editorLines = this.editor.render(safeWidth);
-		const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_LINES);
-		const viewportHeight = Math.max(
-			0,
-			availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES,
-		);
-		const contentLines = renderTranscriptLines(this.transcriptComponents, safeWidth);
-		this.lastContentLineCount = contentLines.length;
-		this.scrollView.updateLayout(contentLines.length, viewportHeight, () =>
-			this.tui.requestRender(),
-		);
-
-		return fitComposerLayout(
-			renderSideThreadHeader(safeWidth, this.theme, this.thinkingLevel),
-			contentLines.slice(this.scrollView.scrollTop, this.scrollView.scrollTop + viewportHeight),
-			this.renderFooter(safeWidth),
-			editorLines,
-			availableRows,
-		).map((line) => truncateToWidth(line, safeWidth));
-	}
-
-	handleInput(data: string): void {
-		if (this.finished) return;
-		if (this.pasteGuard.consume(data)) {
-			this.editor.handleInput(data);
-			this.tui.requestRender();
-			return;
-		}
-		if (this.shortcuts.matches(data, "exit")) {
-			this.finished = true;
-			this.onAction({ kind: "close" });
-			return;
-		}
-		if (this.canBringToMain && this.shortcuts.matches(data, "bringToMain")) {
-			this.finished = true;
-			this.onAction({ kind: "bringToMain", questionDraft: this.editor.getExpandedText() });
-			return;
-		}
-		const thinking = this.options.thinking;
-		if (
-			thinking &&
-			thinking.levels.length > 1 &&
-			this.shortcuts.matches(data, "cycleThinkingLevel")
-		) {
-			const currentIndex = thinking.levels.indexOf(this.thinkingLevel ?? thinking.level);
-			const nextLevel = thinking.levels[(currentIndex + 1) % thinking.levels.length];
-			if (nextLevel) {
-				this.thinkingLevel = nextLevel;
-				thinking.onChange(nextLevel);
-				this.warning = undefined;
-				this.tui.requestRender();
-			}
-			return;
-		}
-		if (matchesKey(data, Key.pageUp)) {
-			this.scrollView.scrollBy(-Math.max(1, this.scrollView.viewportHeight));
-			this.tui.requestRender();
-			return;
-		}
-		if (matchesKey(data, Key.pageDown)) {
-			this.scrollView.scrollBy(Math.max(1, this.scrollView.viewportHeight));
-			this.tui.requestRender();
-			return;
-		}
-		this.editor.handleInput(data);
-		if (!this.finished) this.tui.requestRender();
-	}
-
-	invalidate(): void {
-		this.layoutRoot.invalidate();
-	}
-
-	dispose(): void {
-		if (this.finished) return;
-		this.finished = true;
-		this.onAction({ kind: "close" });
-	}
-
-	private renderFooter(width: number): string {
-		const exit = this.shortcuts.label("exit");
-		const bring = this.canBringToMain && this.shortcuts.keys.bringToMain.length > 0;
-		const bringKey = this.shortcuts.label("bringToMain");
-		if (this.warning) {
-			const warning = width < 32 ? `Empty • ${exit}` : `${this.warning} • ${exit} exit`;
-			return truncateToWidth(this.theme.fg("warning", warning), width);
-		}
-		const scrollable = this.getMaxScrollOffset() > 0;
-		const thinking = this.options.thinking;
-		const cycleHint =
-			thinking &&
-			thinking.levels.length > 1 &&
-			this.thinkingLevel &&
-			this.shortcuts.keys.cycleThinkingLevel.length
-				? ` • thinking ${this.thinkingLevel} • ${this.shortcuts.label("cycleThinkingLevel")} cycle`
-				: "";
-		const base = bring
-			? `btw • Enter send • ${bringKey} bring to main • ${exit} exit`
-			: `btw • Enter send • ${exit} exit`;
-		const fullBase = `${base}${cycleHint}`;
-		const fallbackBase = `btw • Enter • ${exit}`;
-		const compactBase = bring ? `btw • Enter • ${bringKey} • ${exit}` : fallbackBase;
-		const compactWithThinking = `${compactBase}${cycleHint}`;
-		let hints =
-			visibleWidth(fullBase) <= width
-				? fullBase
-				: visibleWidth(compactWithThinking) <= width
-					? compactWithThinking
-					: visibleWidth(compactBase) <= width
-						? compactBase
-						: fallbackBase;
-		if (scrollable) {
-			const history = ` • ${this.scrollView.scrollTop > 0 ? "↑ older" : "↓ newer"} • PgUp/PgDn history`;
-			const compactHistory = " • PgUp/PgDn";
-			const compactScrollable = bring
-				? `Enter • ${bringKey} • ${exit} • PgUp/PgDn`
-				: `${fallbackBase}${compactHistory}`;
-			if (visibleWidth(`${hints}${history}`) <= width) {
-				hints += history;
-			} else if (visibleWidth(`${compactBase}${history}`) <= width) {
-				hints = `${compactBase}${history}`;
-			} else if (visibleWidth(`${hints}${compactHistory}`) <= width) {
-				hints += compactHistory;
-			} else if (visibleWidth(`${compactBase}${compactHistory}`) <= width) {
-				hints = `${compactBase}${compactHistory}`;
-			} else if (visibleWidth(compactScrollable) <= width) {
-				hints = compactScrollable;
-			}
-		}
-		return truncateToWidth(this.theme.fg("muted", hints), width);
-	}
-
-	private createHeaderComponent(): Component {
-		return {
-			render: (width) => [renderSideThreadHeader(width, this.theme, this.thinkingLevel)],
-			invalidate() {},
-		};
-	}
-
-	private createTranscriptComponent(): Component {
-		return {
-			render: (width) => {
-				const lines = renderTranscriptLines(this.transcriptComponents, width);
-				this.lastContentLineCount = lines.length;
-				return lines;
-			},
-			invalidate: () => {
-				for (const component of this.transcriptComponents) component.invalidate();
-			},
-		};
-	}
-
-	private createFooterComponent(): Component {
-		return {
-			render: (width) => [this.renderFooter(width)],
-			invalidate() {},
-		};
-	}
-
-	private getMaxScrollOffset(): number {
-		return Math.max(0, this.lastContentLineCount - this.scrollView.viewportHeight);
-	}
+  private readonly shortcuts: BtwShortcuts;
+  private readonly pasteGuard = new BtwPasteGuard();
+  private readonly transcriptComponents: Component[];
+  private readonly editor: Editor;
+  private readonly canBringToMain: boolean;
+  private readonly scrollView: ScrollView;
+  private readonly layoutRoot: VStack;
+  private lastContentLineCount = 0;
+  private warning: string | undefined;
+  private finished = false;
+  private isFocused = false;
+  private thinkingLevel: BtwThinkingLevel | undefined;
+
+  constructor(
+    private readonly tui: TUI,
+    private readonly theme: Theme,
+    turns: readonly SideThreadTurn[],
+    private readonly onAction: (action: TranscriptPagerAction) => void,
+    private readonly options: {
+      startAtBottom?: boolean;
+      initialQuestion?: string;
+      markdownTransformers?: readonly MarkdownTransformer[];
+      thinking?: BtwThinkingControl;
+    } = {},
+  ) {
+    this.shortcuts = getBtwShortcuts(tui, options.thinking?.keybindings);
+    this.transcriptComponents = buildTranscriptComponents(turns, this.theme, undefined, options.markdownTransformers);
+    this.canBringToMain = turns.some((turn) => turn.kind === "answered");
+    this.thinkingLevel = options.thinking?.level;
+    const editorTheme: EditorTheme = {
+      borderColor: (text) => this.theme.fg("accent", text),
+      selectList: {
+        selectedPrefix: (text) => this.theme.fg("accent", text),
+        selectedText: (text) => this.theme.fg("accent", text),
+        description: (text) => this.theme.fg("muted", text),
+        scrollInfo: (text) => this.theme.fg("dim", text),
+        noMatch: (text) => this.theme.fg("warning", text),
+      },
+    };
+    this.editor = new Editor(this.tui, editorTheme);
+    if (options.initialQuestion) this.editor.setText(options.initialQuestion);
+    this.editor.onChange = () => {
+      this.warning = undefined;
+    };
+    this.editor.onSubmit = (text) => {
+      const question = text.trim();
+      if (!question) {
+        this.warning = "Question cannot be empty";
+        return;
+      }
+      this.finished = true;
+      this.onAction({ kind: "submit", question });
+    };
+    const transcript = this.createTranscriptComponent();
+    this.scrollView = new PreservingScrollView(transcript, {
+      follow: options.startAtBottom ? "end" : "none",
+      primary: true,
+    });
+    this.layoutRoot = new VStack([
+      { component: this.createHeaderComponent(), basis: 1, shrink: 0, minSize: 1 },
+      { component: this.scrollView, basis: 0, grow: 1, minSize: 0 },
+      { component: this.createFooterComponent(), basis: 1, shrink: 0, minSize: 1 },
+      { component: this.editor, basis: "auto", shrink: 1, minSize: 0 },
+    ]);
+  }
+
+  get focused(): boolean {
+    return this.isFocused;
+  }
+
+  set focused(value: boolean) {
+    this.isFocused = value;
+    this.editor.focused = value;
+  }
+
+  getFullscreenLayout(): Component {
+    return this.layoutRoot;
+  }
+
+  render(width: number): string[] {
+    if (width <= 0) return [];
+    const safeWidth = Math.max(1, width);
+    const editorLines = this.editor.render(safeWidth);
+    const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_LINES);
+    const viewportHeight = Math.max(0, availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES);
+    const contentLines = renderTranscriptLines(this.transcriptComponents, safeWidth);
+    this.lastContentLineCount = contentLines.length;
+    this.scrollView.updateLayout(contentLines.length, viewportHeight, () => this.tui.requestRender());
+
+    return fitComposerLayout(
+      renderSideThreadHeader(safeWidth, this.theme, this.thinkingLevel),
+      contentLines.slice(this.scrollView.scrollTop, this.scrollView.scrollTop + viewportHeight),
+      this.renderFooter(safeWidth),
+      editorLines,
+      availableRows,
+    ).map((line) => truncateToWidth(line, safeWidth));
+  }
+
+  handleInput(data: string): void {
+    if (this.finished) return;
+    if (this.pasteGuard.consume(data)) {
+      this.editor.handleInput(data);
+      this.tui.requestRender();
+      return;
+    }
+    if (this.shortcuts.matches(data, "exit")) {
+      this.finished = true;
+      this.onAction({ kind: "close" });
+      return;
+    }
+    if (this.canBringToMain && this.shortcuts.matches(data, "bringToMain")) {
+      this.finished = true;
+      this.onAction({ kind: "bringToMain", questionDraft: this.editor.getExpandedText() });
+      return;
+    }
+    const thinking = this.options.thinking;
+    if (thinking && thinking.levels.length > 1 && this.shortcuts.matches(data, "cycleThinkingLevel")) {
+      const currentIndex = thinking.levels.indexOf(this.thinkingLevel ?? thinking.level);
+      const nextLevel = thinking.levels[(currentIndex + 1) % thinking.levels.length];
+      if (nextLevel) {
+        this.thinkingLevel = nextLevel;
+        thinking.onChange(nextLevel);
+        this.warning = undefined;
+        this.tui.requestRender();
+      }
+      return;
+    }
+    if (matchesKey(data, Key.pageUp)) {
+      this.scrollView.scrollBy(-Math.max(1, this.scrollView.viewportHeight));
+      this.tui.requestRender();
+      return;
+    }
+    if (matchesKey(data, Key.pageDown)) {
+      this.scrollView.scrollBy(Math.max(1, this.scrollView.viewportHeight));
+      this.tui.requestRender();
+      return;
+    }
+    this.editor.handleInput(data);
+    if (!this.finished) this.tui.requestRender();
+  }
+
+  invalidate(): void {
+    this.layoutRoot.invalidate();
+  }
+
+  dispose(): void {
+    if (this.finished) return;
+    this.finished = true;
+    this.onAction({ kind: "close" });
+  }
+
+  private renderFooter(width: number): string {
+    const exit = this.shortcuts.label("exit");
+    const bring = this.canBringToMain && this.shortcuts.keys.bringToMain.length > 0;
+    const bringKey = this.shortcuts.label("bringToMain");
+    if (this.warning) {
+      const warning = width < 32 ? `Empty • ${exit}` : `${this.warning} • ${exit} exit`;
+      return truncateToWidth(this.theme.fg("warning", warning), width);
+    }
+    const scrollable = this.getMaxScrollOffset() > 0;
+    const thinking = this.options.thinking;
+    const cycleHint =
+      thinking && thinking.levels.length > 1 && this.thinkingLevel && this.shortcuts.keys.cycleThinkingLevel.length
+        ? ` • thinking ${this.thinkingLevel} • ${this.shortcuts.label("cycleThinkingLevel")} cycle`
+        : "";
+    const base = bring
+      ? `btw • Enter send • ${bringKey} bring to main • ${exit} exit`
+      : `btw • Enter send • ${exit} exit`;
+    const fullBase = `${base}${cycleHint}`;
+    const fallbackBase = `btw • Enter • ${exit}`;
+    const compactBase = bring ? `btw • Enter • ${bringKey} • ${exit}` : fallbackBase;
+    const compactWithThinking = `${compactBase}${cycleHint}`;
+    let hints =
+      visibleWidth(fullBase) <= width
+        ? fullBase
+        : visibleWidth(compactWithThinking) <= width
+          ? compactWithThinking
+          : visibleWidth(compactBase) <= width
+            ? compactBase
+            : fallbackBase;
+    if (scrollable) {
+      const history = ` • ${this.scrollView.scrollTop > 0 ? "↑ older" : "↓ newer"} • PgUp/PgDn history`;
+      const compactHistory = " • PgUp/PgDn";
+      const compactScrollable = bring
+        ? `Enter • ${bringKey} • ${exit} • PgUp/PgDn`
+        : `${fallbackBase}${compactHistory}`;
+      if (visibleWidth(`${hints}${history}`) <= width) {
+        hints += history;
+      } else if (visibleWidth(`${compactBase}${history}`) <= width) {
+        hints = `${compactBase}${history}`;
+      } else if (visibleWidth(`${hints}${compactHistory}`) <= width) {
+        hints += compactHistory;
+      } else if (visibleWidth(`${compactBase}${compactHistory}`) <= width) {
+        hints = `${compactBase}${compactHistory}`;
+      } else if (visibleWidth(compactScrollable) <= width) {
+        hints = compactScrollable;
+      }
+    }
+    return truncateToWidth(this.theme.fg("muted", hints), width);
+  }
+
+  private createHeaderComponent(): Component {
+    return {
+      render: (width) => [renderSideThreadHeader(width, this.theme, this.thinkingLevel)],
+      invalidate() {},
+    };
+  }
+
+  private createTranscriptComponent(): Component {
+    return {
+      render: (width) => {
+        const lines = renderTranscriptLines(this.transcriptComponents, width);
+        this.lastContentLineCount = lines.length;
+        return lines;
+      },
+      invalidate: () => {
+        for (const component of this.transcriptComponents) component.invalidate();
+      },
+    };
+  }
+
+  private createFooterComponent(): Component {
+    return {
+      render: (width) => [this.renderFooter(width)],
+      invalidate() {},
+    };
+  }
+
+  private getMaxScrollOffset(): number {
+    return Math.max(0, this.lastContentLineCount - this.scrollView.viewportHeight);
+  }
 }
 
 export class BtwAnsweringView implements BtwFullscreenLayoutComponent, Focusable {
-	private readonly shortcuts: BtwShortcuts;
-	private readonly pasteGuard = new BtwPasteGuard();
-	private readonly transcriptComponents: Component[];
-	private readonly loader: Loader;
-	private readonly editor: Editor | undefined;
-	private readonly controller = new AbortController();
-	private readonly scrollView: ScrollView;
-	private readonly layoutRoot: VStack;
-	private lastContentLineCount = 0;
-	private warning: string | undefined;
-	private finished = false;
-	private isFocused = false;
-	private thinkingLevel: BtwThinkingLevel | undefined;
-
-	constructor(
-		private readonly tui: TUI,
-		private readonly theme: Theme,
-		turns: readonly SideThreadTurn[],
-		pendingQuestion: string,
-		private readonly onCancel: () => void,
-		thinkingLevel?: BtwThinkingLevel,
-		private readonly options: BtwAnsweringViewOptions = {},
-	) {
-		this.shortcuts = getBtwShortcuts(tui, options.steering?.thinking?.keybindings);
-		this.transcriptComponents = buildTranscriptComponents(turns, this.theme, pendingQuestion);
-		this.thinkingLevel = options.steering?.thinking?.level ?? thinkingLevel;
-		this.loader = new Loader(
-			this.tui,
-			(text) => this.theme.fg("accent", text),
-			(text) => this.theme.fg("muted", text),
-			"Answering…",
-		);
-		if (options.steering) {
-			const editorTheme: EditorTheme = {
-				borderColor: (text) => this.theme.fg("accent", text),
-				selectList: {
-					selectedPrefix: (text) => this.theme.fg("accent", text),
-					selectedText: (text) => this.theme.fg("accent", text),
-					description: (text) => this.theme.fg("muted", text),
-					scrollInfo: (text) => this.theme.fg("dim", text),
-					noMatch: (text) => this.theme.fg("warning", text),
-				},
-			};
-			this.editor = new Editor(this.tui, editorTheme);
-			this.editor.onChange = () => {
-				this.warning = undefined;
-			};
-			this.editor.onSubmit = (text) => {
-				const question = text.trim();
-				if (!question) {
-					this.warning = "Question cannot be empty";
-					return;
-				}
-				options.steering?.onSubmit(question);
-				this.warning = undefined;
-			};
-		}
-		const transcript = this.createTranscriptComponent();
-		this.scrollView = new PreservingScrollView(transcript, { follow: "end", primary: true });
-		this.layoutRoot = new VStack([
-			{ component: this.createHeaderComponent(), basis: 1, shrink: 0, minSize: 1 },
-			{ component: this.scrollView, basis: 0, grow: 1, minSize: 0 },
-			{
-				component: this.createSteeringComponent(),
-				basis: "auto",
-				shrink: 1,
-				minSize: 0,
-				maxSize: MAX_STEERING_DISPLAY_LINES,
-			},
-			{ component: this.createFooterComponent(), basis: 1, shrink: 0, minSize: 1 },
-			...(this.editor
-				? [{ component: this.editor, basis: "auto" as const, shrink: 1, minSize: 0 }]
-				: []),
-		]);
-	}
-
-	get focused(): boolean {
-		return this.isFocused;
-	}
-
-	set focused(value: boolean) {
-		this.isFocused = value;
-		if (this.editor) this.editor.focused = value;
-	}
-
-	get signal(): AbortSignal {
-		return this.controller.signal;
-	}
-
-	getFullscreenLayout(): Component {
-		return this.layoutRoot;
-	}
-
-	render(width: number): string[] {
-		if (width <= 0) return [];
-		const safeWidth = Math.max(1, width);
-		const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_LINES);
-		const editorLines = this.editor?.render(safeWidth) ?? [];
-		const steeringCapacity = Math.max(
-			0,
-			availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES,
-		);
-		const steeringLines = renderSteeringLines(
-			this.options.steering?.questions ?? [],
-			safeWidth,
-			this.theme,
-			Math.min(MAX_STEERING_DISPLAY_LINES, steeringCapacity),
-		);
-		const viewportHeight = Math.max(
-			0,
-			availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES - steeringLines.length,
-		);
-		const contentLines = renderTranscriptLines(this.transcriptComponents, safeWidth);
-		this.lastContentLineCount = contentLines.length;
-		this.scrollView.updateLayout(contentLines.length, viewportHeight, () =>
-			this.tui.requestRender(),
-		);
-
-		return fitComposerLayout(
-			renderSideThreadHeader(safeWidth, this.theme, this.thinkingLevel),
-			contentLines.slice(this.scrollView.scrollTop, this.scrollView.scrollTop + viewportHeight),
-			this.renderFooter(safeWidth),
-			editorLines,
-			availableRows,
-			steeringLines,
-		).map((line) => truncateToWidth(line, safeWidth));
-	}
-
-	handleInput(data: string): void {
-		if (this.finished) return;
-		if (this.pasteGuard.consume(data)) {
-			this.editor?.handleInput(data);
-			this.tui.requestRender();
-			return;
-		}
-		if (this.shortcuts.matches(data, "exit")) {
-			this.finished = true;
-			this.loader.stop();
-			this.controller.abort();
-			this.onCancel();
-			return;
-		}
-		const thinking = this.options.steering?.thinking;
-		if (
-			thinking &&
-			thinking.levels.length > 1 &&
-			this.shortcuts.matches(data, "cycleThinkingLevel")
-		) {
-			const currentIndex = thinking.levels.indexOf(this.thinkingLevel ?? thinking.level);
-			const nextLevel = thinking.levels[(currentIndex + 1) % thinking.levels.length];
-			if (nextLevel) {
-				this.thinkingLevel = nextLevel;
-				thinking.onChange(nextLevel);
-				this.warning = undefined;
-				this.tui.requestRender();
-			}
-			return;
-		}
-		if (matchesKey(data, Key.pageUp)) {
-			this.scrollView.scrollBy(-Math.max(1, this.scrollView.viewportHeight));
-			this.tui.requestRender();
-			return;
-		}
-		if (matchesKey(data, Key.pageDown)) {
-			this.scrollView.scrollBy(Math.max(1, this.scrollView.viewportHeight));
-			this.tui.requestRender();
-			return;
-		}
-		this.editor?.handleInput(data);
-		this.tui.requestRender();
-	}
-
-	invalidate(): void {
-		this.layoutRoot.invalidate();
-	}
-
-	finish(): void {
-		this.finished = true;
-		this.loader.stop();
-	}
-
-	dispose(): void {
-		if (this.finished) {
-			this.loader.stop();
-			this.controller.abort();
-			return;
-		}
-		this.finished = true;
-		this.loader.stop();
-		this.controller.abort();
-		this.onCancel();
-	}
-
-	private renderFooter(width: number): string {
-		const exit = this.shortcuts.label("exit");
-		if (this.warning) {
-			const warning = width < 32 ? `Empty • ${exit}` : `${this.warning} • ${exit} cancel`;
-			return truncateToWidth(this.theme.fg("warning", warning), width);
-		}
-		const baseHint = this.editor ? `Enter steer • ${exit} cancel` : `${exit} cancel`;
-		const thinking = this.options.steering?.thinking;
-		const cycleHint =
-			thinking &&
-			thinking.levels.length > 1 &&
-			this.thinkingLevel &&
-			this.shortcuts.keys.cycleThinkingLevel.length
-				? ` • thinking ${this.thinkingLevel} • ${this.shortcuts.label("cycleThinkingLevel")} cycle`
-				: "";
-		const scrollHint = this.getMaxScrollOffset() > 0 ? " • PgUp/PgDn history" : "";
-		const hints = `${baseHint}${cycleHint}${scrollHint}`;
-		const compactHints = this.editor ? `Enter • ${exit}` : exit;
-		const selectedHints = visibleWidth(hints) <= width ? hints : compactHints;
-		const loaderWidth = Math.max(1, width - visibleWidth(selectedHints) - 3);
-		const loaderLine = this.loader.render(loaderWidth).at(-1) ?? "Answering…";
-		return truncateToWidth(`${loaderLine} • ${this.theme.fg("muted", selectedHints)}`, width);
-	}
-
-	private createHeaderComponent(): Component {
-		return {
-			render: (width) => [renderSideThreadHeader(width, this.theme, this.thinkingLevel)],
-			invalidate() {},
-		};
-	}
-
-	private createTranscriptComponent(): Component {
-		return {
-			render: (width) => {
-				const lines = renderTranscriptLines(this.transcriptComponents, width);
-				this.lastContentLineCount = lines.length;
-				return lines;
-			},
-			invalidate: () => {
-				for (const component of this.transcriptComponents) component.invalidate();
-			},
-		};
-	}
-
-	private createSteeringComponent(): Component {
-		return {
-			render: (width) =>
-				renderSteeringLines(
-					this.options.steering?.questions ?? [],
-					width,
-					this.theme,
-					MAX_STEERING_DISPLAY_LINES,
-				),
-			invalidate() {},
-		};
-	}
-
-	private createFooterComponent(): Component {
-		return {
-			render: (width) => [this.renderFooter(width)],
-			invalidate: () => this.loader.invalidate(),
-		};
-	}
-
-	private getMaxScrollOffset(): number {
-		return Math.max(0, this.lastContentLineCount - this.scrollView.viewportHeight);
-	}
+  private readonly shortcuts: BtwShortcuts;
+  private readonly pasteGuard = new BtwPasteGuard();
+  private readonly transcriptComponents: Component[];
+  private readonly loader: Loader;
+  private readonly editor: Editor | undefined;
+  private readonly controller = new AbortController();
+  private readonly scrollView: ScrollView;
+  private readonly layoutRoot: VStack;
+  private lastContentLineCount = 0;
+  private warning: string | undefined;
+  private finished = false;
+  private isFocused = false;
+  private thinkingLevel: BtwThinkingLevel | undefined;
+
+  constructor(
+    private readonly tui: TUI,
+    private readonly theme: Theme,
+    turns: readonly SideThreadTurn[],
+    pendingQuestion: string,
+    private readonly onCancel: () => void,
+    thinkingLevel?: BtwThinkingLevel,
+    private readonly options: BtwAnsweringViewOptions = {},
+  ) {
+    this.shortcuts = getBtwShortcuts(tui, options.steering?.thinking?.keybindings);
+    this.transcriptComponents = buildTranscriptComponents(
+      turns,
+      this.theme,
+      pendingQuestion,
+      options.markdownTransformers,
+    );
+    this.thinkingLevel = options.steering?.thinking?.level ?? thinkingLevel;
+    this.loader = new Loader(
+      this.tui,
+      (text) => this.theme.fg("accent", text),
+      (text) => this.theme.fg("muted", text),
+      "Answering…",
+    );
+    if (options.steering) {
+      const editorTheme: EditorTheme = {
+        borderColor: (text) => this.theme.fg("accent", text),
+        selectList: {
+          selectedPrefix: (text) => this.theme.fg("accent", text),
+          selectedText: (text) => this.theme.fg("accent", text),
+          description: (text) => this.theme.fg("muted", text),
+          scrollInfo: (text) => this.theme.fg("dim", text),
+          noMatch: (text) => this.theme.fg("warning", text),
+        },
+      };
+      this.editor = new Editor(this.tui, editorTheme);
+      this.editor.onChange = () => {
+        this.warning = undefined;
+      };
+      this.editor.onSubmit = (text) => {
+        const question = text.trim();
+        if (!question) {
+          this.warning = "Question cannot be empty";
+          return;
+        }
+        options.steering?.onSubmit(question);
+        this.warning = undefined;
+      };
+    }
+    const transcript = this.createTranscriptComponent();
+    this.scrollView = new PreservingScrollView(transcript, { follow: "end", primary: true });
+    this.layoutRoot = new VStack([
+      { component: this.createHeaderComponent(), basis: 1, shrink: 0, minSize: 1 },
+      { component: this.scrollView, basis: 0, grow: 1, minSize: 0 },
+      {
+        component: this.createSteeringComponent(),
+        basis: "auto",
+        shrink: 1,
+        minSize: 0,
+        maxSize: MAX_STEERING_DISPLAY_LINES,
+      },
+      { component: this.createFooterComponent(), basis: 1, shrink: 0, minSize: 1 },
+      ...(this.editor ? [{ component: this.editor, basis: "auto" as const, shrink: 1, minSize: 0 }] : []),
+    ]);
+  }
+
+  get focused(): boolean {
+    return this.isFocused;
+  }
+
+  set focused(value: boolean) {
+    this.isFocused = value;
+    if (this.editor) this.editor.focused = value;
+  }
+
+  get signal(): AbortSignal {
+    return this.controller.signal;
+  }
+
+  getFullscreenLayout(): Component {
+    return this.layoutRoot;
+  }
+
+  render(width: number): string[] {
+    if (width <= 0) return [];
+    const safeWidth = Math.max(1, width);
+    const availableRows = Math.max(1, this.tui.terminal.rows - RESERVED_APP_LINES);
+    const editorLines = this.editor?.render(safeWidth) ?? [];
+    const steeringCapacity = Math.max(0, availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES);
+    const steeringLines = renderSteeringLines(
+      this.options.steering?.questions ?? [],
+      safeWidth,
+      this.theme,
+      Math.min(MAX_STEERING_DISPLAY_LINES, steeringCapacity),
+    );
+    const viewportHeight = Math.max(
+      0,
+      availableRows - editorLines.length - TRANSCRIPT_CHROME_LINES - steeringLines.length,
+    );
+    const contentLines = renderTranscriptLines(this.transcriptComponents, safeWidth);
+    this.lastContentLineCount = contentLines.length;
+    this.scrollView.updateLayout(contentLines.length, viewportHeight, () => this.tui.requestRender());
+
+    return fitComposerLayout(
+      renderSideThreadHeader(safeWidth, this.theme, this.thinkingLevel),
+      contentLines.slice(this.scrollView.scrollTop, this.scrollView.scrollTop + viewportHeight),
+      this.renderFooter(safeWidth),
+      editorLines,
+      availableRows,
+      steeringLines,
+    ).map((line) => truncateToWidth(line, safeWidth));
+  }
+
+  handleInput(data: string): void {
+    if (this.finished) return;
+    if (this.pasteGuard.consume(data)) {
+      this.editor?.handleInput(data);
+      this.tui.requestRender();
+      return;
+    }
+    if (this.shortcuts.matches(data, "exit")) {
+      this.finished = true;
+      this.loader.stop();
+      this.controller.abort();
+      this.onCancel();
+      return;
+    }
+    const thinking = this.options.steering?.thinking;
+    if (thinking && thinking.levels.length > 1 && this.shortcuts.matches(data, "cycleThinkingLevel")) {
+      const currentIndex = thinking.levels.indexOf(this.thinkingLevel ?? thinking.level);
+      const nextLevel = thinking.levels[(currentIndex + 1) % thinking.levels.length];
+      if (nextLevel) {
+        this.thinkingLevel = nextLevel;
+        thinking.onChange(nextLevel);
+        this.warning = undefined;
+        this.tui.requestRender();
+      }
+      return;
+    }
+    if (matchesKey(data, Key.pageUp)) {
+      this.scrollView.scrollBy(-Math.max(1, this.scrollView.viewportHeight));
+      this.tui.requestRender();
+      return;
+    }
+    if (matchesKey(data, Key.pageDown)) {
+      this.scrollView.scrollBy(Math.max(1, this.scrollView.viewportHeight));
+      this.tui.requestRender();
+      return;
+    }
+    this.editor?.handleInput(data);
+    this.tui.requestRender();
+  }
+
+  invalidate(): void {
+    this.layoutRoot.invalidate();
+  }
+
+  finish(): void {
+    this.finished = true;
+    this.loader.stop();
+  }
+
+  dispose(): void {
+    if (this.finished) {
+      this.loader.stop();
+      this.controller.abort();
+      return;
+    }
+    this.finished = true;
+    this.loader.stop();
+    this.controller.abort();
+    this.onCancel();
+  }
+
+  private renderFooter(width: number): string {
+    const exit = this.shortcuts.label("exit");
+    if (this.warning) {
+      const warning = width < 32 ? `Empty • ${exit}` : `${this.warning} • ${exit} cancel`;
+      return truncateToWidth(this.theme.fg("warning", warning), width);
+    }
+    const baseHint = this.editor ? `Enter steer • ${exit} cancel` : `${exit} cancel`;
+    const thinking = this.options.steering?.thinking;
+    const cycleHint =
+      thinking && thinking.levels.length > 1 && this.thinkingLevel && this.shortcuts.keys.cycleThinkingLevel.length
+        ? ` • thinking ${this.thinkingLevel} • ${this.shortcuts.label("cycleThinkingLevel")} cycle`
+        : "";
+    const scrollHint = this.getMaxScrollOffset() > 0 ? " • PgUp/PgDn history" : "";
+    const hints = `${baseHint}${cycleHint}${scrollHint}`;
+    const compactHints = this.editor ? `Enter • ${exit}` : exit;
+    const selectedHints = visibleWidth(hints) <= width ? hints : compactHints;
+    const loaderWidth = Math.max(1, width - visibleWidth(selectedHints) - 3);
+    const loaderLine = this.loader.render(loaderWidth).at(-1) ?? "Answering…";
+    return truncateToWidth(`${loaderLine} • ${this.theme.fg("muted", selectedHints)}`, width);
+  }
+
+  private createHeaderComponent(): Component {
+    return {
+      render: (width) => [renderSideThreadHeader(width, this.theme, this.thinkingLevel)],
+      invalidate() {},
+    };
+  }
+
+  private createTranscriptComponent(): Component {
+    return {
+      render: (width) => {
+        const lines = renderTranscriptLines(this.transcriptComponents, width);
+        this.lastContentLineCount = lines.length;
+        return lines;
+      },
+      invalidate: () => {
+        for (const component of this.transcriptComponents) component.invalidate();
+      },
+    };
+  }
+
+  private createSteeringComponent(): Component {
+    return {
+      render: (width) =>
+        renderSteeringLines(this.options.steering?.questions ?? [], width, this.theme, MAX_STEERING_DISPLAY_LINES),
+      invalidate() {},
+    };
+  }
+
+  private createFooterComponent(): Component {
+    return {
+      render: (width) => [this.renderFooter(width)],
+      invalidate: () => this.loader.invalidate(),
+    };
+  }
+
+  private getMaxScrollOffset(): number {
+    return Math.max(0, this.lastContentLineCount - this.scrollView.viewportHeight);
+  }
 }
 
 export function formatSideTranscript(turns: readonly SideThreadTurn[]): string {
-	return turns
-		.map((turn) => {
-			const question = escapeTerminalControls(turn.question);
-			const rawAnswer = escapeTerminalControls(turn.answer);
-			const answer = turn.kind === "error" ? `Error: ${rawAnswer}` : rawAnswer;
-			return `${question}\n\n${answer}`;
-		})
-		.join("\n\n");
+  return turns
+    .map((turn) => {
+      const question = escapeTerminalControls(turn.question);
+      const rawAnswer = escapeTerminalControls(turn.answer);
+      const answer = turn.kind === "error" ? `Error: ${rawAnswer}` : rawAnswer;
+      return `${question}\n\n${answer}`;
+    })
+    .join("\n\n");
 }
 
 function buildTranscriptComponents(
-	turns: readonly SideThreadTurn[],
-	theme: Theme,
-	pendingQuestion?: string,
+  turns: readonly SideThreadTurn[],
+  theme: Theme,
+  pendingQuestion?: string,
+  markdownTransformers: readonly MarkdownTransformer[] = [],
 ): Component[] {
-	const components = turns.flatMap((turn): Component[] => {
-		const question = new UserMessageComponent(
-			escapeTerminalControls(turn.question),
-			getMarkdownTheme(),
-			1,
-		);
-		if (turn.kind === "error") {
-			const error = new Markdown(
-				`Error: ${escapeTerminalControls(turn.answer)}`,
-				1,
-				1,
-				getMarkdownTheme(),
-				{ color: (text) => theme.fg("error", text) },
-			);
-			return [question, error];
-		}
-		const response: AssistantMessage = {
-			...turn.response,
-			content: [{ type: "text", text: escapeTerminalControls(turn.answer) }],
-			stopReason: "stop",
-			errorMessage: undefined,
-		};
-		return [question, new AssistantMessageComponent(response, true, getMarkdownTheme(), "", 1)];
-	});
-	if (pendingQuestion) {
-		components.push(
-			new UserMessageComponent(escapeTerminalControls(pendingQuestion), getMarkdownTheme(), 1),
-		);
-	}
-	return components;
+  const components = turns.flatMap((turn): Component[] => {
+    const question = new UserMessageComponent(
+      escapeTerminalControls(turn.question),
+      getMarkdownTheme(),
+      1,
+      markdownTransformers,
+    );
+    if (turn.kind === "error") {
+      const error = new Markdown(`Error: ${escapeTerminalControls(turn.answer)}`, 1, 1, getMarkdownTheme(), {
+        color: (text) => theme.fg("error", text),
+      });
+      return [question, error];
+    }
+    const response: AssistantMessage = {
+      ...turn.response,
+      content: [{ type: "text", text: escapeTerminalControls(turn.answer) }],
+      stopReason: "stop",
+      errorMessage: undefined,
+    };
+    return [question, new AssistantMessageComponent(response, true, getMarkdownTheme(), "", 1, markdownTransformers)];
+  });
+  if (pendingQuestion) {
+    components.push(
+      new UserMessageComponent(escapeTerminalControls(pendingQuestion), getMarkdownTheme(), 1, markdownTransformers),
+    );
+  }
+  return components;
 }
 
 function renderTranscriptLines(components: readonly Component[], width: number): string[] {
-	return components
-		.flatMap((component) => component.render(width))
-		.map(stripShellIntegrationMarkers);
+  return components.flatMap((component) => component.render(width)).map(stripShellIntegrationMarkers);
 }
 
-function renderSideThreadHeader(
-	width: number,
-	theme: Theme,
-	thinkingLevel?: BtwThinkingLevel,
-): string {
-	const thinking = thinkingLevel ? ` · thinking ${thinkingLevel}` : "";
-	const title = truncateToWidth(`─ btw · side thread${thinking} `, width);
-	const ruleWidth = Math.max(0, width - visibleWidth(title));
-	return theme.fg("muted", `${title}${"─".repeat(ruleWidth)}`);
+function renderSideThreadHeader(width: number, theme: Theme, thinkingLevel?: BtwThinkingLevel): string {
+  const thinking = thinkingLevel ? ` · thinking ${thinkingLevel}` : "";
+  const title = truncateToWidth(`─ btw · side thread${thinking} `, width);
+  const ruleWidth = Math.max(0, width - visibleWidth(title));
+  return theme.fg("muted", `${title}${"─".repeat(ruleWidth)}`);
 }
 
 function fitComposerLayout(
-	header: string,
-	contentLines: string[],
-	footer: string,
-	editorLines: string[],
-	availableRows: number,
-	statusLines: string[] = [],
+  header: string,
+  contentLines: string[],
+  footer: string,
+  editorLines: string[],
+  availableRows: number,
+  statusLines: string[] = [],
 ): string[] {
-	const lines = [header, ...contentLines, ...statusLines, footer, ...editorLines];
-	if (lines.length <= availableRows) return lines;
-	if (availableRows <= 1) return [header];
-	const editorBudget = Math.max(0, availableRows - 2);
-	return [header, footer, ...fitEditorLines(editorLines, editorBudget)];
+  const lines = [header, ...contentLines, ...statusLines, footer, ...editorLines];
+  if (lines.length <= availableRows) return lines;
+  if (availableRows <= 1) return [header];
+  const editorBudget = Math.max(0, availableRows - 2);
+  return [header, footer, ...fitEditorLines(editorLines, editorBudget)];
 }
 
 function fitEditorLines(editorLines: string[], budget: number): string[] {
-	if (budget <= 0) return [];
-	if (editorLines.length <= budget) return editorLines;
-	const cursorIndex = editorLines.findIndex((line) => line.includes(CURSOR_MARKER));
-	if (cursorIndex < 0) return editorLines.slice(-budget);
-	const start = Math.min(cursorIndex, editorLines.length - budget);
-	return editorLines.slice(start, start + budget);
+  if (budget <= 0) return [];
+  if (editorLines.length <= budget) return editorLines;
+  const cursorIndex = editorLines.findIndex((line) => line.includes(CURSOR_MARKER));
+  if (cursorIndex < 0) return editorLines.slice(-budget);
+  const start = Math.min(cursorIndex, editorLines.length - budget);
+  return editorLines.slice(start, start + budget);
 }
 
-function renderSteeringLines(
-	questions: readonly string[],
-	width: number,
-	theme: Theme,
-	maxLines: number,
-): string[] {
-	if (questions.length === 0 || maxLines <= 0) return [];
-	const formatQuestion = (question: string) =>
-		sanitizeSingleLine(question) || "(non-printing message)";
-	if (maxLines === 1 && questions.length > 1) {
-		return [
-			truncateToWidth(
-				theme.fg(
-					"dim",
-					`Steering (+${questions.length - 1} more): ${formatQuestion(questions[0] ?? "")}`,
-				),
-				width,
-			),
-		];
-	}
-	const hasOverflow = questions.length > maxLines;
-	const questionLimit = hasOverflow ? Math.max(1, maxLines - 1) : maxLines;
-	const lines = questions
-		.slice(0, questionLimit)
-		.map((question) =>
-			truncateToWidth(theme.fg("dim", `Steering: ${formatQuestion(question)}`), width),
-		);
-	if (hasOverflow) {
-		lines.push(
-			truncateToWidth(
-				theme.fg("dim", `Steering: … +${questions.length - questionLimit} more`),
-				width,
-			),
-		);
-	}
-	return lines;
+function renderSteeringLines(questions: readonly string[], width: number, theme: Theme, maxLines: number): string[] {
+  if (questions.length === 0 || maxLines <= 0) return [];
+  const formatQuestion = (question: string) => sanitizeSingleLine(question) || "(non-printing message)";
+  if (maxLines === 1 && questions.length > 1) {
+    return [
+      truncateToWidth(
+        theme.fg("dim", `Steering (+${questions.length - 1} more): ${formatQuestion(questions[0] ?? "")}`),
+        width,
+      ),
+    ];
+  }
+  const hasOverflow = questions.length > maxLines;
+  const questionLimit = hasOverflow ? Math.max(1, maxLines - 1) : maxLines;
+  const lines = questions
+    .slice(0, questionLimit)
+    .map((question) => truncateToWidth(theme.fg("dim", `Steering: ${formatQuestion(question)}`), width));
+  if (hasOverflow) {
+    lines.push(truncateToWidth(theme.fg("dim", `Steering: … +${questions.length - questionLimit} more`), width));
+  }
+  return lines;
 }
 
 function stripShellIntegrationMarkers(line: string): string {
-	return OSC133_MARKERS.reduce((result, marker) => result.replaceAll(marker, ""), line);
+  return OSC133_MARKERS.reduce((result, marker) => result.replaceAll(marker, ""), line);
 }
 
 function escapeTerminalControls(text: string): string {
-	return [...text]
-		.map((character) => {
-			if (character === "\n") return character;
-			if (character === "\t") return "    ";
-			const code = character.charCodeAt(0);
-			if (code <= 31 || (code >= 127 && code <= 159)) {
-				return `\\x${code.toString(16).padStart(2, "0")}`;
-			}
-			return character;
-		})
-		.join("");
+  return [...text]
+    .map((character) => {
+      if (character === "\n") return character;
+      if (character === "\t") return "    ";
+      const code = character.charCodeAt(0);
+      if (code <= 31 || (code >= 127 && code <= 159)) {
+        return `\\x${code.toString(16).padStart(2, "0")}`;
+      }
+      return character;
+    })
+    .join("");
 }