@iowarp/clio-coder 0.3.1 → 0.3.2

package/src/interactive/interactive-slash-runtime.ts

@@ -17,8 +17,10 @@ import {
 } from "../domains/providers/index.js";
 import type { ResourcesContract } from "../domains/resources/index.js";
 import { installSkill } from "../domains/resources/skills/marketplace.js";
-import type { SessionEntry } from "../domains/session/index.js";
+import type { SessionContract, SessionEntry } from "../domains/session/index.js";
 import type { ShareContract } from "../domains/share/index.js";
+import type { UserTasksStore } from "../domains/user-tasks/store.js";
+import { stripTerminalSequences } from "../engine/tui.js";
 import type { ImageContent } from "../engine/types.js";
 import type { AskUserHandler } from "../tools/ask-user.js";
 import type { ChatLoop } from "./chat-loop.js";
@@ -26,6 +28,7 @@ import { type ChatPanel, createChatPanel } from "./chat-panel.js";
 import { rehydrateChatPanelFromTurns } from "./chat-renderer.js";
 import { runCompactWithNotice } from "./command-fallbacks.js";
 import { appendNotice, appendOperatorCommand } from "./command-output.js";
+import { renderSessionHtml } from "./export-html/index.js";
 import { dateLocal } from "./format-time.js";
 import type { SettingsCenterRowId, SettingsSectionId } from "./overlays/settings.js";
 import {
@@ -35,18 +38,13 @@ import {
 	parseSlashCommand,
 	type RunIo,
 	type SlashCommandContext,
+	type SlashCommandDispatchResult,
 	type TaskMemorySeedCommandResult,
 } from "./slash-commands.js";
 import { verifyReceiptFile } from "./view/artifacts.js";
 import type { WorkerEntryState } from "./worker-stream.js";
 
 const EXPORT_RENDER_WIDTH = 100;
-// biome-ignore lint/suspicious/noControlCharactersInRegex: the ESC control character is the ANSI escape introducer this pattern exists to strip
-const ANSI_PATTERN = /\u001b\[[0-9;?]*[A-Za-z]/g;
-
-function stripAnsiForExport(line: string): string {
-	return line.replace(ANSI_PATTERN, "");
-}
 
 export interface InteractiveSlashSubmitExpansion {
 	text: string;
@@ -74,6 +72,7 @@ export interface InteractiveSlashRuntimeDeps {
 	interop?: SlashCommandContext["interop"];
 	agents?: SlashAgents;
 	share?: SlashShare;
+	userTasks?: UserTasksStore;
 	getSettings?: () => Readonly<ClioSettings>;
 	writeSettings?: (next: ClioSettings) => void;
 	/**
@@ -91,16 +90,25 @@ export interface InteractiveSlashRuntimeDeps {
 	stateDir: string;
 	shutdown: () => void | Promise<void>;
 	requestRender: () => void;
+	beforeSemanticSubmit?: () => void;
+	settleVisibleFrame?: (reason: string) => Promise<void>;
 	refreshFooter: () => void;
 	dismissContextBootstrapNotices: () => void;
 	recordSubmittedTurn: () => void;
 	readStructuredEntries: (sessionId: string) => ReadonlyArray<SessionEntry>;
+	/**
+	 * Leaf lookup for `/export`, so the export follows the branch the session
+	 * is actually on. current.jsonl still holds the abandoned turns after a
+	 * `/tree` pin, and an unscoped rehydrate reproduced them (issue #109).
+	 */
+	session?: Pick<SessionContract, "tree">;
 	expandSubmit: (text: string) => Promise<InteractiveSlashSubmitExpansion>;
 	openAskUser: AskUserHandler;
 	openSkillsHub: () => void;
 	openCost: () => void;
 	openContextView: () => void;
 	openTasks: () => void;
+	openDecisions: () => void;
 	openMemory: () => void;
 	seedTaskMemory?: () => TaskMemorySeedCommandResult;
 	openView: (filter?: string) => void;
@@ -128,7 +136,9 @@ export interface InteractiveSlashRuntimeDeps {
 export interface InteractiveSlashRuntime {
 	context: SlashCommandContext;
 	notice: SlashCommandContext["notice"];
-	dispatchCommand(text: string): void;
+	dispatchCommand(text: string): SlashCommandDispatchResult;
+	/** Admit captured Stage 0 input without waiting for the model turn to finish. */
+	admitCommand(text: string, signal?: AbortSignal): Promise<void>;
 }
 
 /** Owns slash-command context construction and its asynchronous command state. */
@@ -166,8 +176,11 @@ export function resolveAvailableThinkingLevels(
 
 export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps): InteractiveSlashRuntime {
 	let activeContextInit = false;
+	let latestAdmission: Promise<void> = Promise.resolve();
+	let activeAdmissionSignal: AbortSignal | undefined;
 	const cwd = (): string => deps.getCwd?.() ?? process.cwd();
 	const resources = deps.resources;
+	const userTasks = deps.userTasks;
 
 	const appendCommandNotice: SlashCommandContext["notice"] = (level, text) => {
 		appendNotice(level, text, {
@@ -177,31 +190,107 @@ export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps)
 	};
 
 	/** One expanded operator turn into the chat loop: record it, paint it, submit it. */
-	const submitExpanded = (sub: InteractiveSlashSubmitExpansion): void => {
-		void (async () => {
-			try {
-				// Enter while streaming becomes a steer inside chat.submit. The
-				// queue panel shows it until the engine injects it, and the
-				// injection emits queued_user_turn, which is when the transcript
-				// renders it. Appending here too showed the text twice and at
-				// the wrong point in the turn's order.
-				const willQueue = deps.chat.isStreaming();
-				deps.recordSubmittedTurn();
-				deps.refreshFooter();
-				if (!willQueue) deps.chatPanel.appendUser(sub.text);
-				deps.requestRender();
-				await deps.chat.submit(sub.text, {
-					...(sub.images.length > 0 ? { images: sub.images } : {}),
-					...(sub.workingContextPaths.length > 0 ? { workingContextPaths: sub.workingContextPaths } : {}),
-					...(sub.pendingSkillRequests.length > 0 ? { pendingSkillRequests: sub.pendingSkillRequests } : {}),
-				});
-			} catch (err) {
-				const msg = err instanceof Error ? err.message : String(err);
-				deps.io.stderr(`[interactive] chat failed: ${msg}\n`);
-			} finally {
-				deps.requestRender();
+	const submitExpanded = (sub: InteractiveSlashSubmitExpansion, awaitAdmission = false): Promise<void> => {
+		try {
+			// Enter while streaming becomes a steer inside chat.submit. The
+			// queue panel shows it until the engine injects it, and the
+			// injection emits queued_user_turn, which is when the transcript
+			// renders it. Appending here too showed the text twice and at
+			// the wrong point in the turn's order.
+			const willQueue = deps.chat.isStreaming();
+			deps.recordSubmittedTurn();
+			deps.refreshFooter();
+			if (!willQueue) deps.chatPanel.appendUser(sub.text);
+			deps.requestRender();
+			deps.beforeSemanticSubmit?.();
+			let acknowledgeAdmission = (): void => {};
+			const admitted = new Promise<void>((resolve) => {
+				acknowledgeAdmission = resolve;
+			});
+			const turn = deps.chat.submit(sub.text, {
+				...(sub.images.length > 0 ? { images: sub.images } : {}),
+				...(sub.workingContextPaths.length > 0 ? { workingContextPaths: sub.workingContextPaths } : {}),
+				...(sub.pendingSkillRequests.length > 0 ? { pendingSkillRequests: sub.pendingSkillRequests } : {}),
+				...(awaitAdmission && willQueue ? { steering: "end-of-turn" as const } : {}),
+				...(awaitAdmission ? { onAdmitted: acknowledgeAdmission } : {}),
+			});
+			const settlement = turn
+				.then(() => deps.settleVisibleFrame?.("submit-return"))
+				.catch((err) => {
+					const msg = err instanceof Error ? err.message : String(err);
+					deps.io.stderr(`[interactive] chat failed: ${msg}\n`);
+				})
+				.finally(deps.requestRender);
+			return awaitAdmission ? Promise.race([admitted, settlement]) : settlement;
+		} catch (err) {
+			const msg = err instanceof Error ? err.message : String(err);
+			deps.io.stderr(`[interactive] chat failed: ${msg}\n`);
+			deps.requestRender();
+			return Promise.resolve();
+		}
+	};
+
+	const admitChat = async (text: string, signal?: AbortSignal): Promise<void> => {
+		try {
+			signal?.throwIfAborted();
+			const submitted = await deps.expandSubmit(text);
+			signal?.throwIfAborted();
+			const uninstalled = submitted.pendingSkillRequests.find((request) => !request.installed);
+			if (uninstalled && !uninstalled.marketplaceRef) {
+				deps.io.stderr(`Skill "${uninstalled.name}" is not installed and no local marketplace entry is available.\n`);
+				return;
 			}
-		})();
+			if (uninstalled) {
+				void deps
+					.openAskUser([
+						{
+							question: `Skill "${uninstalled.name}" is not installed. Would you like to install it?`,
+							options: [
+								{ label: "Install and run", description: `Install from ${uninstalled.marketplaceRef}` },
+								{ label: "Cancel", description: "Do not install." },
+							],
+						},
+					])
+					.then((res) => {
+						if (res.cancelled || res.answers[0]?.answer !== "Install and run") {
+							deps.io.stderr("Installation cancelled.\n");
+							return;
+						}
+						void (async () => {
+							try {
+								deps.io.stdout(`Installing skill "${uninstalled.name}"...\n`);
+								let configDir: string | undefined;
+								try {
+									configDir = (deps.getConfigDir ?? clioConfigDir)();
+								} catch (configErr) {
+									deps.io.stderr(
+										`Skill install: config dir unavailable (${configErr instanceof Error ? configErr.message : String(configErr)}); continuing without it.\n`,
+									);
+								}
+								(deps.installSkill ?? installSkill)({
+									source: uninstalled.name,
+									cwd: cwd(),
+									...(configDir ? { configDir } : {}),
+								});
+								deps.io.stdout(`Successfully installed "${uninstalled.name}"!\n`);
+								await deps.resources?.reload();
+								const postInstallSubmitted = await deps.expandSubmit(text);
+								submitExpanded(postInstallSubmitted);
+							} catch (err) {
+								deps.io.stderr(
+									`Failed to install skill "${uninstalled.name}": ${err instanceof Error ? err.message : String(err)}\n`,
+								);
+							}
+						})();
+					});
+				return;
+			}
+			await submitExpanded(submitted, true);
+		} catch (err) {
+			const msg = err instanceof Error ? err.message : String(err);
+			deps.io.stderr(`[interactive] chat failed: ${msg}\n`);
+			deps.requestRender();
+		}
 	};
 	const context: SlashCommandContext = {
 		io: deps.io,
@@ -251,6 +340,17 @@ export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps)
 		openCost: deps.openCost,
 		openContextView: deps.openContextView,
 		openTasks: deps.openTasks,
+		openDecisions: deps.openDecisions,
+		...(userTasks
+			? {
+					userTasks: {
+						add: (title: string) => userTasks.add(title),
+						hand: (id: string) => userTasks.hand(id, deps.chat.getSessionId() ?? undefined),
+						done: (id: string) => userTasks.done(id),
+						drop: (id: string) => userTasks.drop(id),
+					},
+				}
+			: {}),
 		openMemory: deps.openMemory,
 		seedTaskMemory: () => {
 			const result = deps.seedTaskMemory?.() ?? { status: "not-found" as const };
@@ -333,32 +433,43 @@ export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps)
 			}
 			try {
 				const turns = deps.readStructuredEntries(sessionId);
-				// Same pure render pipeline as the live panel and /resume replay:
-				// a throwaway panel rehydrated from the ledger, every tool segment
-				// expanded, rendered at a fixed width, ANSI stripped. Unlike the
-				// live view, export renders full tool bodies (no middle-elision or
-				// char truncation) so the transcript reproduces the complete output.
+				// Same pure render pipeline as the live panel and /resume replay: a
+				// throwaway panel is rehydrated from the ledger, every tool segment is
+				// expanded, and the transcript is rendered at a stable width. HTML
+				// converts the resulting ANSI presentation to inline styles; Markdown
+				// keeps the prior plain-text fenced transcript.
 				const exportPanel = createChatPanel({ unboundedToolBodies: true });
-				rehydrateChatPanelFromTurns(exportPanel, turns, { unboundedToolBodies: true });
+				// Scoped to the leaf the session is on, the same way /resume replays
+				// (issue #107): with a /tree pin persisted and not yet extended, the
+				// file still holds the abandoned branch after the pin, and an unscoped
+				// rehydrate exported it as ordinary history (issue #109). No session
+				// contract means no pin can exist for this reader, so the file replays whole.
+				const leafTurnId = deps.session?.tree(sessionId).leafId ?? null;
+				rehydrateChatPanelFromTurns(exportPanel, turns, {
+					unboundedToolBodies: true,
+					...(leafTurnId ? { activeLeafTurnId: leafTurnId } : {}),
+				});
 				exportPanel.toggleAllToolsExpanded();
-				const lines = exportPanel.render(EXPORT_RENDER_WIDTH).map(stripAnsiForExport);
+				const ansiLines = exportPanel.render(EXPORT_RENDER_WIDTH);
 				// The operator names this file by the day they ran the export, so the
 				// date in it is their calendar date. The header below keeps the ISO
 				// instant, which is the machine-readable half of the same fact.
-				const date = dateLocal(deps.now?.() ?? new Date());
+				const exportedAt = deps.now?.() ?? new Date();
+				const date = dateLocal(exportedAt);
+				const requestedPath = pathArg?.trim() ?? "";
+				const markdown = requestedPath.toLowerCase().endsWith(".md");
 				const target = resolve(
-					pathArg && pathArg.trim().length > 0 ? pathArg.trim() : join(".clio-coder", "exports", `${sessionId}-${date}.md`),
+					requestedPath.length > 0 ? requestedPath : join(".clio-coder", "exports", `${sessionId}-${date}.html`),
 				);
 				mkdirSync(resolve(target, ".."), { recursive: true });
-				const header = [
-					`# Clio session ${sessionId}`,
-					"",
-					`Exported ${(deps.now?.() ?? new Date()).toISOString()}`,
-					"",
-					"```text",
-				];
-				writeFileSync(target, `${[...header, ...lines, "```", ""].join("\n")}`, "utf8");
-				appendCommandNotice("success", `[/export] wrote ${lines.length} lines to ${target}`);
+				if (markdown) {
+					const lines = ansiLines.map(stripTerminalSequences);
+					const header = [`# Clio session ${sessionId}`, "", `Exported ${exportedAt.toISOString()}`, "", "```text"];
+					writeFileSync(target, `${[...header, ...lines, "```", ""].join("\n")}`, "utf8");
+				} else {
+					writeFileSync(target, renderSessionHtml({ sessionId, exportedAt: exportedAt.toISOString(), ansiLines }), "utf8");
+				}
+				appendCommandNotice("success", `[/export] wrote ${ansiLines.length} lines to ${target}`);
 			} catch (err) {
 				appendCommandNotice("error", `[/export] ${err instanceof Error ? err.message : String(err)}`);
 			}
@@ -416,70 +527,8 @@ export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps)
 		// worker's output name a file the operator never mentioned.
 		submitOperatorNote: (text) => submitExpanded({ text, images: [], workingContextPaths: [], pendingSkillRequests: [] }),
 		submitChat: (text) => {
-			void (async () => {
-				try {
-					const submitted = await deps.expandSubmit(text);
-					const uninstalled = submitted.pendingSkillRequests.find((request) => !request.installed);
-					if (uninstalled && !uninstalled.marketplaceRef) {
-						deps.io.stderr(`Skill "${uninstalled.name}" is not installed and no local marketplace entry is available.\n`);
-						return;
-					}
-					if (uninstalled) {
-						void deps
-							.openAskUser([
-								{
-									question: `Skill "${uninstalled.name}" is not installed. Would you like to install it?`,
-									options: [
-										{
-											label: "Install and run",
-											description: `Install from ${uninstalled.marketplaceRef}`,
-										},
-										{ label: "Cancel", description: "Do not install." },
-									],
-								},
-							])
-							.then((res) => {
-								if (res.cancelled || res.answers[0]?.answer !== "Install and run") {
-									deps.io.stderr("Installation cancelled.\n");
-									return;
-								}
-								void (async () => {
-									try {
-										deps.io.stdout(`Installing skill "${uninstalled.name}"...\n`);
-										let configDir: string | undefined;
-										try {
-											configDir = (deps.getConfigDir ?? clioConfigDir)();
-										} catch (configErr) {
-											deps.io.stderr(
-												`Skill install: config dir unavailable (${configErr instanceof Error ? configErr.message : String(configErr)}); continuing without it.\n`,
-											);
-										}
-										(deps.installSkill ?? installSkill)({
-											source: uninstalled.name,
-											cwd: cwd(),
-											...(configDir ? { configDir } : {}),
-										});
-										deps.io.stdout(`Successfully installed "${uninstalled.name}"!\n`);
-										await deps.resources?.reload();
-										const postInstallSubmitted = await deps.expandSubmit(text);
-										submitExpanded(postInstallSubmitted);
-									} catch (err) {
-										deps.io.stderr(
-											`Failed to install skill "${uninstalled.name}": ${err instanceof Error ? err.message : String(err)}\n`,
-										);
-									}
-								})();
-							});
-						return;
-					}
-
-					submitExpanded(submitted);
-				} catch (err) {
-					const msg = err instanceof Error ? err.message : String(err);
-					deps.io.stderr(`[interactive] chat failed: ${msg}\n`);
-					deps.requestRender();
-				}
-			})();
+			latestAdmission = admitChat(text, activeAdmissionSignal);
+			void latestAdmission;
 		},
 		render: deps.requestRender,
 	};
@@ -488,5 +537,18 @@ export function createInteractiveSlashRuntime(deps: InteractiveSlashRuntimeDeps)
 		context,
 		notice: appendCommandNotice,
 		dispatchCommand: (text) => dispatchSlashCommand(parseSlashCommand(text), context),
+		admitCommand: async (text, signal) => {
+			signal?.throwIfAborted();
+			const command = parseSlashCommand(text);
+			const before = latestAdmission;
+			const previousSignal = activeAdmissionSignal;
+			activeAdmissionSignal = signal;
+			try {
+				dispatchSlashCommand(command, context);
+			} finally {
+				activeAdmissionSignal = previousSignal;
+			}
+			if (latestAdmission !== before) await latestAdmission;
+		},
 	};
 }

package/src/interactive/interactive-tickers.ts

@@ -1,10 +1,12 @@
+import { type TaskBoardSnapshot, type TaskBoardStore, taskBoardCounts } from "../domains/session/task-board.js";
 import { Text, type TUI, visibleWidth } from "../engine/tui.js";
 import {
 	CONTEXT_ISLAND_WIDTH,
 	type ContextActivitySnapshot,
 	formatContextActivityIslandLines,
 } from "./context-activity.js";
-import { type DispatchBoardRow, formatTaskIslandLines } from "./dispatch-board.js";
+import { type DispatchBoardRow, formatTaskIslandLines, TASK_ISLAND_WIDTH } from "./dispatch-board.js";
+import { clioTheme, frame, GLYPH } from "./theme/index.js";
 
 export interface InteractiveTickerHandle {
 	unref?(): void;
@@ -26,10 +28,30 @@ export interface InteractiveTickersDeps {
 	contextActivityStore: InteractiveContextActivityStore;
 	getOverlayState: () => string;
 	isFooterExpanded: () => boolean;
+	/** Bound to TaskBoardStore.cachedSnapshot; repaint must never fold the session ledger. */
+	getTaskBoard?: TaskBoardStore["cachedSnapshot"];
 	scheduleInterval?: (callback: () => void, intervalMs: number) => InteractiveTickerHandle;
 	clearScheduledInterval?: (handle: InteractiveTickerHandle) => void;
 }
 
+export function formatTaskBoardIslandLines(board: TaskBoardSnapshot): string[] {
+	const theme = clioTheme();
+	const counts = taskBoardCounts(board);
+	const active = board.tasks.find((task) => task.status === "active");
+	const next = active ?? board.tasks.find((task) => task.status === "pending");
+	const chips = [
+		`${counts.completed}/${counts.total} done`,
+		...(counts.active > 0 ? [`${counts.active} active`] : []),
+		...(counts.blocked > 0 ? [`${counts.blocked} blocked`] : []),
+	].join(" · ");
+	const body = [theme.fg("accent", board.title), theme.fg("dim", chips)];
+	if (next) {
+		const glyph = active ? theme.fg("accent", GLYPH.running) : theme.fg("dim", GLYPH.queued);
+		body.push(`${glyph} ${theme.fg("dim", next.id)} ${theme.fg("muted", next.title)}`);
+	}
+	return frame(theme, "Tasks", body, TASK_ISLAND_WIDTH + 4);
+}
+
 export interface InteractiveTickers {
 	renderTaskIsland(): void;
 	renderContextIsland(): void;
@@ -71,19 +93,28 @@ export function createInteractiveTickers(deps: InteractiveTickersDeps): Interact
 
 	let taskIslandHidden = true;
 
-	const renderTaskIsland = (): void => {
+	const renderTaskIsland = (): boolean => {
 		const rows = deps.dispatchBoardStore.activeRows();
+		const board = rows.length === 0 ? (deps.getTaskBoard?.() ?? null) : null;
+		const boardHasOpenTasks = board !== null && taskBoardCounts(board).open > 0;
 		const contextActive = deps.contextActivityStore.active();
-		const hidden = deps.getOverlayState() !== "closed" || deps.isFooterExpanded() || contextActive || rows.length === 0;
+		const hidden =
+			deps.getOverlayState() !== "closed" ||
+			deps.isFooterExpanded() ||
+			contextActive ||
+			(rows.length === 0 && !boardHasOpenTasks);
+		const visibilityChanged = taskIslandHidden !== hidden;
 		taskIslandHandle.setHidden(hidden);
 		// A hidden island with nothing to show still ran the frame builder and two
 		// truncateToWidth calls four times a second, forever, to produce lines no
 		// one could see. Formatting the empty case is pure waste; staying hidden
 		// leaves the last text in place, which is unreachable while hidden.
-		if (hidden && taskIslandHidden && rows.length === 0) return;
+		if (hidden && taskIslandHidden && rows.length === 0 && !boardHasOpenTasks) return visibilityChanged;
 		taskIslandHidden = hidden;
-		taskIsland.setText(formatTaskIslandLines(rows).join("\n"));
+		if (rows.length > 0) taskIsland.setText(formatTaskIslandLines(rows).join("\n"));
+		else if (board) taskIsland.setText(formatTaskBoardIslandLines(board).join("\n"));
 		taskIsland.invalidate();
+		return visibilityChanged || !hidden;
 	};
 
 	const renderContextIsland = (): void => {
@@ -124,9 +155,9 @@ export function createInteractiveTickers(deps: InteractiveTickersDeps): Interact
 		stopContextIslandTicker();
 		contextIslandTicker = scheduleInterval(() => {
 			deps.dispatchBoardStore.reconcile();
-			renderTaskIsland();
+			const taskNeedsRender = renderTaskIsland();
 			const fleetActive = deps.dispatchBoardStore.activeRows().length > 0;
-			if (!deps.contextActivityStore.active() && !contextIslandVisible && !fleetActive) return;
+			if (!deps.contextActivityStore.active() && !contextIslandVisible && !fleetActive && !taskNeedsRender) return;
 			renderContextIsland();
 			deps.tui.requestRender();
 		}, 250);

package/src/interactive/keybinding-manager.ts

@@ -68,7 +68,7 @@ export interface LeaderTarget {
 }
 
 export interface ClioKeybindingManager {
-	matches(data: string, id: ClioKeybinding): boolean;
+	matches(data: string, id: Keybinding): boolean;
 	getKeys(id: Keybinding): ReadonlyArray<KeyId>;
 	getDescription(id: ClioKeybinding): string;
 	getConflicts(): ReadonlyArray<KeybindingConflict>;

package/src/interactive/layout.ts

@@ -1,5 +1,6 @@
-import type { Component } from "../engine/tui.js";
-import { Container } from "../engine/tui.js";
+import type { Component, ScrollViewScrollbar, TuiMode } from "../engine/tui.js";
+import { Container, ScrollView, VStack } from "../engine/tui.js";
+import { clioTheme, GLYPH } from "./theme/index.js";
 
 export interface LayoutParts {
 	banner: Component;
@@ -9,7 +10,43 @@ export interface LayoutParts {
 	footer: Component;
 }
 
-export function buildLayout(parts: LayoutParts): Container {
+export interface LayoutOptions {
+	mode?: TuiMode;
+	fullscreenScrollbar?: ScrollViewScrollbar;
+}
+
+export interface FullscreenLayout {
+	root: VStack;
+	transcript: ScrollView;
+}
+
+export function buildFullscreenLayout(
+	parts: LayoutParts,
+	options: Pick<LayoutOptions, "fullscreenScrollbar"> = {},
+): FullscreenLayout {
+	const document = new Container();
+	document.addChild(parts.banner);
+	document.addChild(parts.chat);
+	const theme = clioTheme();
+	const transcript = new ScrollView(document, {
+		follow: "end",
+		primary: true,
+		overscroll: "chain",
+		scrollbar: options.fullscreenScrollbar ?? "auto",
+		scrollbarStyle: () => theme.fg("frameStrong", GLYPH.barFull),
+	});
+	const dock = new VStack();
+	if (parts.pending) dock.addChild(parts.pending, { shrink: 1, minSize: 0 });
+	dock.addChild(parts.editor, { shrink: 1, minSize: 3 });
+	dock.addChild(parts.footer, { shrink: 1, minSize: 1 });
+	const root = new VStack();
+	root.addChild(transcript, { basis: 0, grow: 1, shrink: 1, minSize: 1 });
+	root.addChild(dock, { basis: "auto", grow: 0, shrink: 1, minSize: 1 });
+	return { root, transcript };
+}
+
+export function buildLayout(parts: LayoutParts, options: LayoutOptions = {}): Component {
+	if (options.mode === "fullscreen") return buildFullscreenLayout(parts, options).root;
 	const root = new Container();
 	root.addChild(parts.banner);
 	root.addChild(parts.chat);

package/src/interactive/overlay-frame.ts

@@ -182,7 +182,7 @@ export function fitHintEntries(entries: ReadonlyArray<HintEntry>, maxWidth: numb
 }
 
 /**
- * The one word for narrowing a list by typing. `/help` said `filter`, `/models`
+ * The one word for narrowing a list by typing. `/help` said `filter`, `/model`
  * and `/resume` said `search`, and they are the same gesture, so a reader who
  * learned one had to relearn it in the next overlay.
  */