@nghyane/arcane 0.1.13 → 0.1.14

package/src/modes/components/footer.ts

@@ -3,9 +3,9 @@ import * as path from "node:path";
 import { type Component, padding, truncateToWidth, visibleWidth } from "@nghyane/arcane-tui";
 import { isEnoent } from "@nghyane/arcane-utils";
 import { getProjectDir } from "@nghyane/arcane-utils/dirs";
-import { theme } from "../../modes/theme/theme";
 import type { AgentSession } from "../../session/agent-session";
-import { shortenPath } from "../../tools/render-utils";
+import { theme } from "../../theme/theme";
+import { shortenPath } from "../../ui/render-utils";
 
 /**
  * Sanitize text for display in a single-line status.

package/src/modes/components/history-search.ts

@@ -10,8 +10,8 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
 import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
+import { theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 class HistoryResultsList implements Component {

package/src/modes/components/hook-editor.ts

@@ -3,7 +3,7 @@
  * Supports Ctrl+G for external editor.
  */
 import { Container, Editor, matchesKey, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import { getEditorTheme, theme } from "../../modes/theme/theme";
+import { getEditorTheme, theme } from "../../theme/theme";
 import { getEditorCommand, openInEditor } from "../../utils/external-editor";
 import { DynamicBorder } from "./dynamic-border";
 

package/src/modes/components/hook-input.ts

@@ -2,7 +2,7 @@
  * Simple text input component for hooks.
  */
 import { Container, Input, matchesKey, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 

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

@@ -1,16 +1,16 @@
 import type { TextContent } from "@nghyane/arcane-ai";
 import type { Component } from "@nghyane/arcane-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
+import { Container, LeftBorderBox, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
 import type { HookMessageRenderer } from "../../extensibility/hooks/types";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import type { HookMessage } from "../../session/messages";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a custom message entry from hooks.
  * Uses distinct styling to differentiate from user messages.
  */
 export class HookMessageComponent extends Container {
-	#box: Box;
+	#box: LeftBorderBox;
 	#customComponent?: Component;
 	#expanded = false;
 
@@ -22,8 +22,7 @@ export class HookMessageComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		// Create box with purple background (used for default rendering)
-		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("dim", s));
 
 		this.#rebuild();
 	}

package/src/modes/components/hook-selector.ts

@@ -3,7 +3,7 @@
  * Displays a list of string options with keyboard navigation.
  */
 import { Container, matchesKey, padding, Spacer, Text, type TUI, visibleWidth } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 

package/src/modes/components/index.ts

@@ -19,7 +19,6 @@ export { LoginDialogComponent } from "./login-dialog";
 export { ModelSelectorComponent } from "./model-selector";
 export { OAuthSelectorComponent } from "./oauth-selector";
 export { QueueModeSelectorComponent } from "./queue-mode-selector";
-export { ReadToolGroupComponent } from "./read-tool-group";
 export { SessionSelectorComponent } from "./session-selector";
 export {
 	type SettingsCallbacks,
@@ -37,5 +36,4 @@ export { TreeSelectorComponent } from "./tree-selector";
 export { TtsrNotificationComponent } from "./ttsr-notification";
 export { UserMessageComponent } from "./user-message";
 export { UserMessageSelectorComponent } from "./user-message-selector";
-export { truncateToVisualLines, type VisualTruncateResult } from "./visual-truncate";
 export { type LspServerInfo, type RecentSession, WelcomeComponent } from "./welcome";

package/src/modes/components/keybinding-hints.ts

@@ -3,7 +3,7 @@
  */
 import { type EditorAction, getEditorKeybindings, type KeyId } from "@nghyane/arcane-tui";
 import type { AppAction, KeybindingsManager } from "../../config/keybindings";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 
 /**
  * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").

package/src/modes/components/login-dialog.ts

@@ -1,6 +1,6 @@
 import { getOAuthProviders } from "@nghyane/arcane-ai";
 import { Container, getEditorKeybindings, Input, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 import { openPath } from "../../utils/open";
 import { DynamicBorder } from "./dynamic-border";
 

package/src/modes/components/mcp-add-wizard.ts

@@ -16,7 +16,7 @@ import {
 import { validateServerName } from "../../mcp/config-writer";
 import { analyzeAuthError, discoverOAuthEndpoints } from "../../mcp/oauth-discovery";
 import type { MCPHttpServerConfig, MCPServerConfig, MCPSseServerConfig, MCPStdioServerConfig } from "../../mcp/types";
-import { theme } from "../theme/theme";
+import { theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 type TransportType = "stdio" | "http" | "sse";

package/src/modes/components/model-selector.ts

@@ -14,7 +14,7 @@ import {
 import { MODEL_ROLE_IDS, MODEL_ROLES, type ModelRegistry, type ModelRole } from "../../config/model-registry";
 import { parseModelString } from "../../config/model-resolver";
 import type { Settings } from "../../config/settings";
-import { type ThemeColor, theme } from "../../modes/theme/theme";
+import { type ThemeColor, theme } from "../../theme/theme";
 import { fuzzyFilter } from "../../utils/fuzzy";
 import { DynamicBorder } from "./dynamic-border";
 

package/src/modes/components/oauth-selector.ts

@@ -1,7 +1,7 @@
 import { getOAuthProviders, type OAuthProviderInfo } from "@nghyane/arcane-ai";
 import { Container, matchesKey, Spacer, TruncatedText } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
 import type { AuthStorage } from "../../session/auth-storage";
+import { theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 /**
  * Component that renders an OAuth provider selector.

package/src/modes/components/plugin-settings.ts

@@ -19,7 +19,7 @@ import {
 } from "@nghyane/arcane-tui";
 import { PluginManager } from "../../extensibility/plugins/manager";
 import type { InstalledPlugin, PluginSettingSchema } from "../../extensibility/plugins/types";
-import { getSelectListTheme, getSettingsListTheme, theme } from "../../modes/theme/theme";
+import { getSelectListTheme, getSettingsListTheme, theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 // =============================================================================

package/src/modes/components/python-execution.ts

@@ -1,17 +1,16 @@
 /**
  * Component for displaying user-initiated Python execution with streaming output.
- * Shares the same kernel session as the agent's Python tool.
+ * Tree-style output: tail 4 lines on success, all on error.
  */
 
 import { sanitizeText } from "@nghyane/arcane-natives";
 import { Container, Loader, Spacer, Text, type TUI } from "@nghyane/arcane-tui";
-import { getSymbolTheme, highlightCode, theme } from "../../modes/theme/theme";
-import { formatBytes } from "../../session/streaming-output";
+import { getSymbolTheme, theme } from "../../theme/theme";
 import type { TruncationMeta } from "../../tools/output-meta";
-import { DynamicBorder } from "./dynamic-border";
-import { truncateToVisualLines } from "./visual-truncate";
+import { renderStatusLine } from "../../tui/status-line";
+import { formatCount, replaceTabs } from "../../ui/render-utils";
 
-const PREVIEW_LINES = 20;
+const TAIL_LINES = 4;
 const MAX_DISPLAY_LINE_CHARS = 4000;
 
 export class PythonExecutionComponent extends Container {
@@ -21,45 +20,36 @@ export class PythonExecutionComponent extends Container {
 	#loader: Loader;
 	#truncation?: TruncationMeta;
 	#expanded = false;
-	#contentContainer: Container;
-
-	#formatHeader(colorKey: "dim" | "pythonMode"): Text {
-		const prompt = theme.fg(colorKey, theme.bold(">>>"));
-		const continuation = theme.fg(colorKey, "    ");
-		const codeLines = highlightCode(this.code, "python");
-		const headerLines = codeLines.map((line, index) =>
-			index === 0 ? `${prompt} ${line}` : `${continuation}${line}`,
-		);
-		return new Text(headerLines.join("\n"), 1, 0);
-	}
+	#headerText: Text;
+	#bodyText: Text;
 
 	constructor(
 		private readonly code: string,
 		ui: TUI,
-		private readonly excludeFromContext = false,
+		_excludeFromContext = false,
 	) {
 		super();
-
-		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
-		const borderColor = (str: string) => theme.fg(colorKey, str);
-
 		this.addChild(new Spacer(1));
-		this.addChild(new DynamicBorder(borderColor));
 
-		this.#contentContainer = new Container();
-		this.addChild(this.#contentContainer);
-		this.#contentContainer.addChild(this.#formatHeader(colorKey));
+		const codePreview = code.split("\n")[0].slice(0, 60);
+		this.#headerText = new Text(
+			renderStatusLine({ icon: "running", title: "Python", description: `>>> ${codePreview}` }, theme),
+			1,
+			0,
+		);
+		this.addChild(this.#headerText);
+
+		this.#bodyText = new Text("", 1, 0);
+		this.addChild(this.#bodyText);
 
 		this.#loader = new Loader(
 			ui,
-			spinner => theme.fg(colorKey, spinner),
+			spinner => theme.fg("accent", spinner),
 			text => theme.fg("muted", text),
-			`Running… (esc to cancel)`,
+			"Running\u2026 (esc to cancel)",
 			getSymbolTheme().spinnerFrames,
 		);
-		this.#contentContainer.addChild(this.#loader);
-
-		this.addChild(new DynamicBorder(borderColor));
+		this.addChild(this.#loader);
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -74,7 +64,6 @@ export class PythonExecutionComponent extends Container {
 
 	appendOutput(chunk: string): void {
 		const clean = sanitizeText(chunk);
-
 		const newLines = clean.split("\n").map(line => this.#clampDisplayLine(line));
 		if (this.#outputLines.length > 0 && newLines.length > 0) {
 			this.#outputLines[this.#outputLines.length - 1] = this.#clampDisplayLine(
@@ -84,7 +73,6 @@ export class PythonExecutionComponent extends Container {
 		} else {
 			this.#outputLines.push(...newLines);
 		}
-
 		this.#updateDisplay();
 	}
 
@@ -103,82 +91,51 @@ export class PythonExecutionComponent extends Container {
 		if (options?.output !== undefined) {
 			this.#setOutput(options.output);
 		}
-
 		this.#loader.stop();
 		this.#updateDisplay();
 	}
 
 	#updateDisplay(): void {
-		const availableLines = this.#outputLines;
-		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
-		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
-
-		this.#contentContainer.clear();
-
-		const colorKey = this.excludeFromContext ? "dim" : "pythonMode";
-		this.#contentContainer.addChild(this.#formatHeader(colorKey));
-
-		if (availableLines.length > 0) {
-			if (this.#expanded) {
-				const displayText = availableLines.map(line => theme.fg("muted", line)).join("\n");
-				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
-			} else {
-				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
-				const previewText = `\n${styledOutput}`;
-				this.#contentContainer.addChild({
-					render: (width: number) => {
-						const { visualLines } = truncateToVisualLines(previewText, PREVIEW_LINES, width, 1);
-						return visualLines;
-					},
-					invalidate: () => {},
-				});
-			}
+		const isError = this.#status === "error";
+		const isDone = this.#status !== "running";
+		const lines = this.#outputLines.filter(l => l.trim());
+		const total = lines.length;
+
+		if (isDone) {
+			const icon = isError ? "error" : this.#status === "cancelled" ? "warning" : "success";
+			const codePreview = this.code.split("\n")[0].slice(0, 60);
+			const meta: string[] = [];
+			if (isError && this.#exitCode !== undefined) meta.push(`exit ${this.#exitCode}`);
+			if (total > 0) meta.push(formatCount("line", total));
+			this.#headerText.setText(
+				renderStatusLine({ icon, title: "Python", description: `>>> ${codePreview}`, meta }, theme),
+			);
 		}
 
-		if (this.#status === "running") {
-			this.#contentContainer.addChild(this.#loader);
-		} else {
-			const statusParts: string[] = [];
+		const bodyLines: string[] = [];
+		if (total > 0) {
+			const showAll = isError || this.#expanded;
+			const displayLines = showAll ? lines : lines.slice(-TAIL_LINES);
+			const skipped = total - displayLines.length;
 
-			if (hiddenLineCount > 0) {
-				statusParts.push(theme.fg("dim", `… ${hiddenLineCount} more lines (ctrl+o to expand)`));
+			if (skipped > 0) {
+				bodyLines.push(theme.fg("dim", `\u2026 (${skipped} earlier lines)`));
 			}
-
-			if (this.#status === "cancelled") {
-				statusParts.push(theme.fg("warning", "(cancelled)"));
-			} else if (this.#status === "error") {
-				statusParts.push(theme.fg("error", `(exit ${this.#exitCode})`));
+			for (let i = 0; i < displayLines.length; i++) {
+				bodyLines.push(theme.fg("toolOutput", replaceTabs(displayLines[i])));
 			}
-
 			if (this.#truncation) {
-				const warnings: string[] = [];
-				if (this.#truncation.artifactId) {
-					warnings.push(`Full output: artifact://${this.#truncation.artifactId}`);
-				}
-				if (this.#truncation.truncatedBy === "lines") {
-					warnings.push(
-						`Truncated: showing ${this.#truncation.outputLines} of ${this.#truncation.totalLines} lines`,
-					);
-				} else {
-					warnings.push(
-						`Truncated: ${this.#truncation.outputLines} lines shown (${formatBytes(this.#truncation.outputBytes)} limit)`,
-					);
-				}
-				statusParts.push(theme.fg("warning", warnings.join(". ")));
-			}
-
-			if (statusParts.length > 0) {
-				this.#contentContainer.addChild(new Text(`\n${statusParts.join("\n")}`, 1, 0));
+				bodyLines.push(theme.fg("warning", "output truncated"));
 			}
 		}
+
+		this.#bodyText.setText(bodyLines.length > 0 ? bodyLines.join("\n") : "");
 	}
 
 	#clampDisplayLine(line: string): string {
-		if (line.length <= MAX_DISPLAY_LINE_CHARS) {
-			return line;
-		}
+		if (line.length <= MAX_DISPLAY_LINE_CHARS) return line;
 		const omitted = line.length - MAX_DISPLAY_LINE_CHARS;
-		return `${line.slice(0, MAX_DISPLAY_LINE_CHARS)}… [${omitted} chars omitted]`;
+		return `${line.slice(0, MAX_DISPLAY_LINE_CHARS)}\u2026 [${omitted} chars omitted]`;
 	}
 
 	#setOutput(output: string): void {

package/src/modes/components/queue-mode-selector.ts

@@ -1,5 +1,5 @@
 import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
-import { getSelectListTheme } from "../../modes/theme/theme";
+import { getSelectListTheme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 /**

package/src/modes/components/session-selector.ts

@@ -9,8 +9,8 @@ import {
 	truncateToWidth,
 	visibleWidth,
 } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
 import type { SessionInfo } from "../../session/session-manager";
+import { theme } from "../../theme/theme";
 import { fuzzyFilter } from "../../utils/fuzzy";
 import { DynamicBorder } from "./dynamic-border";
 

package/src/modes/components/settings-defs.ts

@@ -74,16 +74,11 @@ const OPTION_PROVIDERS: Partial<Record<SettingPath, OptionProvider>> = {
 		{ value: "5", label: "5 retries" },
 		{ value: "10", label: "10 retries" },
 	],
-	// Task max concurrency
-	"task.maxConcurrency": [
-		{ value: "0", label: "Unlimited" },
-		{ value: "1", label: "1 task" },
-		{ value: "2", label: "2 tasks" },
-		{ value: "4", label: "4 tasks" },
-		{ value: "8", label: "8 tasks" },
-		{ value: "16", label: "16 tasks" },
-		{ value: "32", label: "32 tasks" },
-		{ value: "64", label: "64 tasks" },
+	// Verification max reminders
+	"verification.maxReminders": [
+		{ value: "1", label: "1 reminder" },
+		{ value: "2", label: "2 reminders" },
+		{ value: "3", label: "3 reminders" },
 	],
 	// Todo max reminders
 	"todo.reminders.max": [

package/src/modes/components/settings-selector.ts

@@ -20,7 +20,7 @@ import type {
 	StatusLineSeparatorStyle,
 } from "../../config/settings-schema";
 import { SETTING_TABS, TAB_METADATA } from "../../config/settings-schema";
-import { getCurrentThemeName, getSelectListTheme, getSettingsListTheme, theme } from "../../modes/theme/theme";
+import { getCurrentThemeName, getSelectListTheme, getSettingsListTheme, theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 import { PluginSettingsComponent } from "./plugin-settings";
 import { getSettingsForTab, type SettingDef } from "./settings-defs";

package/src/modes/components/show-images-selector.ts

@@ -1,5 +1,5 @@
 import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
-import { getSelectListTheme } from "../../modes/theme/theme";
+import { getSelectListTheme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 /**

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

@@ -1,11 +1,11 @@
 import type { TextContent } from "@nghyane/arcane-ai";
 import type { Component } from "@nghyane/arcane-tui";
-import { Box, Container, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { Container, LeftBorderBox, Markdown, Spacer, Text } from "@nghyane/arcane-tui";
 import type { CustomMessage, SkillPromptDetails } from "../../session/messages";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 export class SkillMessageComponent extends Container {
-	#box: Box;
+	#box: LeftBorderBox;
 	#contentComponent?: Component;
 	#expanded = false;
 
@@ -13,7 +13,7 @@ export class SkillMessageComponent extends Container {
 		super();
 		this.addChild(new Spacer(1));
 
-		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("dim", s));
 		this.#rebuild();
 	}
 

package/src/modes/components/status-line/segments.ts

@@ -1,7 +1,7 @@
 import * as os from "node:os";
 import { getProjectDir } from "@nghyane/arcane-utils/dirs";
-import { theme } from "../../../modes/theme/theme";
-import { shortenPath } from "../../../tools/render-utils";
+import { theme } from "../../../theme/theme";
+import { shortenPath } from "../../../ui/render-utils";
 import type { RenderedSegment, SegmentContext, StatusLineSegment, StatusLineSegmentId } from "./types";
 
 export type { SegmentContext } from "./types";

package/src/modes/components/status-line/separators.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "../../../modes/theme/theme";
+import type { Theme } from "../../../theme/theme";
 import type { SeparatorDef, StatusLineSeparatorStyle } from "./types";
 
 function trimSep(value: string): string {

package/src/modes/components/status-line-segment-editor.ts

@@ -10,7 +10,7 @@
  */
 import { Container, matchesKey, padding } from "@nghyane/arcane-tui";
 import type { StatusLineSegmentId } from "../../config/settings-schema";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 import { ALL_SEGMENT_IDS } from "./status-line/segments";
 
 // Segment display names and short descriptions

package/src/modes/components/status-line.ts

@@ -6,8 +6,8 @@ import { getProjectDir } from "@nghyane/arcane-utils/dirs";
 import { $ } from "bun";
 import { settings } from "../../config/settings";
 import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../config/settings-schema";
-import { theme } from "../../modes/theme/theme";
 import type { AgentSession } from "../../session/agent-session";
+import { theme } from "../../theme/theme";
 import { getPreset } from "./status-line/presets";
 import { renderSegment, type SegmentContext } from "./status-line/segments";
 import { getSeparator } from "./status-line/separators";

package/src/modes/components/theme-selector.ts

@@ -1,5 +1,5 @@
 import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
-import { getSelectListTheme } from "../../modes/theme/theme";
+import { getSelectListTheme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 /**

package/src/modes/components/thinking-selector.ts

@@ -1,6 +1,6 @@
 import type { ThinkingLevel } from "@nghyane/arcane-agent";
 import { Container, type SelectItem, SelectList } from "@nghyane/arcane-tui";
-import { getSelectListTheme } from "../../modes/theme/theme";
+import { getSelectListTheme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 const LEVEL_DESCRIPTIONS: Record<ThinkingLevel, string> = {

package/src/modes/components/todo-display.ts

@@ -1,8 +1,8 @@
 import * as path from "node:path";
 import { Ellipsis, Text, truncateToWidth } from "@nghyane/arcane-tui";
 import { logger } from "@nghyane/arcane-utils";
-import { theme } from "../../modes/theme/theme";
 import type { TodoItem } from "../../modes/types";
+import { theme } from "../../theme/theme";
 import { Hasher, type RenderCache } from "../../tui";
 
 const TODO_FILE_NAME = "todos.json";
@@ -13,10 +13,8 @@ interface TodoFile {
 }
 
 async function loadTodoFile(filePath: string): Promise<TodoFile | null> {
-	const file = Bun.file(filePath);
-	if (!(await file.exists())) return null;
 	try {
-		const text = await file.text();
+		const text = await Bun.file(filePath).text();
 		const data = JSON.parse(text) as TodoFile;
 		if (!data || !Array.isArray(data.todos)) return null;
 		return data;

package/src/modes/components/todo-reminder.ts

@@ -1,5 +1,5 @@
-import { Box, Container, Spacer, Text } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { Container, LeftBorderBox, Spacer, Text } from "@nghyane/arcane-tui";
+import { theme } from "../../theme/theme";
 import type { TodoItem } from "../../tools/todo-write";
 
 /**
@@ -7,7 +7,7 @@ import type { TodoItem } from "../../tools/todo-write";
  * Shows when the agent stops with incomplete todos.
  */
 export class TodoReminderComponent extends Container {
-	#box: Box;
+	#box: LeftBorderBox;
 
 	constructor(
 		private readonly todos: TodoItem[],
@@ -18,7 +18,7 @@ export class TodoReminderComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		this.#box = new Box(1, 1, t => theme.inverse(theme.fg("warning", t)));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("warning", s));
 		this.addChild(this.#box);
 
 		this.#rebuild();