code-ollama 0.16.0 → 0.18.0

package/dist/assets/{tui-85A3pZD2.js → tui-4cX-bKvd.js}

@@ -1,4 +1,4 @@
-import { A as LABEL, C as withSystemMessage, D as USER, E as SYSTEM, F as VERSION, I as LIST, M as SAFE, N as APPROVE, O as PLAN_GENERATION_INSTRUCTION, P as REJECT, S as resetSystemMessage, T as ASSISTANT, _ as setClearHandler, a as tick, b as loadConfig, c as appendMessage, d as deleteSessionIfEmpty, f as listSessions, g as reset, h as clear, i as WRITE_TOOLS, j as PLAN, k as AUTO, l as createSession$1, m as updateSessionModel, n as READ_TOOLS, o as color, p as loadSession, r as TOOLS, s as write, t as executeTool, u as deleteSession, v as listModels, w as HEADER_PREFIX, x as saveConfig, y as streamChat } from "../cli.js";
+import { A as SYSTEM, B as REJECT, C as resetSystemMessage, D as LIST$1, E as WARNING, F as AUTO, H as LIST, I as LABEL, L as PLAN, M as PLAN_GENERATION_INSTRUCTION, N as BACK, O as getTheme, P as CATALOG, R as SAFE, S as saveConfig, T as HEADER_PREFIX, V as VERSION, _ as deleteModel, a as color, b as streamChat, c as createSession, d as listSessions, f as loadSession, g as setClearHandler, h as reset, i as WRITE_TOOLS, j as USER, k as ASSISTANT, l as deleteSession, m as clear, n as READ_TOOLS, o as write, p as updateSessionModel, r as TOOLS, s as appendMessage, t as executeTool, u as deleteSessionIfEmpty, v as listModels, w as withSystemMessage, x as loadConfig, y as pullModel, z as APPROVE } from "../cli.js";
 import { readdirSync } from "node:fs";
 import { homedir } from "node:os";
 import { join, relative } from "node:path";
@@ -6,7 +6,7 @@ import { exec } from "node:child_process";
 import { Box, Static, Text, render, useApp, useInput, useStdout } from "ink";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Select, Spinner } from "@inkjs/ui";
+import { ProgressBar, Select, Spinner } from "@inkjs/ui";
 import { Marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 //#region src/components/CodeBlock/CodeBlock.tsx
@@ -17,7 +17,7 @@ function normalizeCodeBlockContent(content, indent = "") {
 	const indentPattern = new RegExp(`^${indent}`, "gm");
 	return content.replace(indentPattern, "").trim();
 }
-async function prewarmCodeBlocks(content) {
+async function prewarmCodeBlocks(content, theme = getTheme()) {
 	const promises = [];
 	let match;
 	CODE_BLOCK_REGEX.lastIndex = 0;
@@ -26,35 +26,35 @@ async function prewarmCodeBlocks(content) {
 		const language = match[3];
 		const code = normalizeCodeBlockContent(match[4], indent);
 		// v8 ignore next 2
-		if (code) promises.push(prewarmHighlight(code, language));
+		if (code) promises.push(prewarmHighlight(code, language, theme));
 	}
 	await Promise.all(promises);
 }
-async function prewarmHighlight(code, language) {
+async function prewarmHighlight(code, language, theme = getTheme()) {
 	// v8 ignore start
-	const cacheKey = `${language ?? ""}:${code}`;
+	const cacheKey = `${theme.codeTheme}:${language ?? ""}:${code}`;
 	if (highlightCache.has(cacheKey)) return;
 	// v8 ignore stop
-	const result = await highlightCode(code, language);
+	const result = await highlightCode(code, language, theme.codeTheme);
 	highlightCache.set(cacheKey, result);
 }
-async function highlightCode(code, language = "text") {
+async function highlightCode(code, language = "text", codeTheme = getTheme().codeTheme) {
 	const { codeToANSI } = await import("@shikijs/cli");
 	try {
-		return await codeToANSI(code, language, "github-light");
+		return await codeToANSI(code, language, codeTheme);
 	} catch {
 		// v8 ignore next
 		return code;
 	}
 }
-var CodeBlock = memo(function CodeBlock({ code, language, role }) {
-	const cacheKey = `${language ?? ""}:${code}`;
+var CodeBlock = memo(function CodeBlock({ code, language, role, theme = getTheme() }) {
+	const cacheKey = `${theme.codeTheme}:${language ?? ""}:${code}`;
 	const [highlighted, setHighlighted] = useState(() => highlightCache.get(cacheKey) ?? code);
 	useEffect(() => {
 		let canceled = false;
 		async function loadHighlight() {
 			try {
-				const result = await highlightCode(code, language);
+				const result = await highlightCode(code, language, theme.codeTheme);
 				highlightCache.set(cacheKey, result);
 				if (!canceled) setHighlighted(result);
 			} catch {}
@@ -66,22 +66,31 @@ var CodeBlock = memo(function CodeBlock({ code, language, role }) {
 	}, [
 		cacheKey,
 		code,
-		language
+		language,
+		theme.codeTheme
 	]);
 	const isSystem = role === SYSTEM;
 	return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		borderStyle: "bold",
-		borderColor: isSystem ? "gray" : "dim",
+		borderColor: isSystem ? theme.colors.secondary : theme.colors.codeBorder,
 		paddingX: 1,
 		marginY: 1,
 		children: /* @__PURE__ */ jsx(Text, {
+			color: isSystem ? theme.colors.messageSystem : void 0,
 			dimColor: isSystem,
 			children: highlighted
 		})
 	});
 });
 //#endregion
+//#region src/components/Messages/constants.ts
+var TURN_ABORTED_MESSAGE = [
+	"<turn_aborted>",
+	"The user interrupted the previous turn on purpose. Any running commands may still be running in the background. If any tools were aborted, they may have partially executed.",
+	"</turn_aborted>"
+].join("\n");
+//#endregion
 //#region src/components/Markdown/extensions.ts
 var LATEX_COMMANDS = {
 	"\\rightarrow": "→",
@@ -171,7 +180,7 @@ var inlineMathExtension = {
 //#endregion
 //#region src/components/Markdown/render.ts
 var HR_PLACEHOLDER = "__CODE_OLLAMA_HR_PLACEHOLDER__";
-function renderMarkdown(content, hrWidth) {
+function renderMarkdown(content, hrWidth, syntaxTheme = "gitHub") {
 	const hr = "─".repeat(Math.max(1, hrWidth));
 	const markdown = new Marked();
 	const rendererExtension = {
@@ -187,7 +196,7 @@ function renderMarkdown(content, hrWidth) {
 		}
 	};
 	markdown.use(markedTerminal({
-		theme: "gitHub",
+		theme: syntaxTheme,
 		reflowText: true,
 		width: Math.max(1, hrWidth)
 	}));
@@ -202,23 +211,20 @@ function renderMarkdown(content, hrWidth) {
 }
 //#endregion
 //#region src/components/Markdown/Markdown.tsx
-var Markdown = memo(function Markdown({ content, color, dimColor }) {
+var Markdown = memo(function Markdown({ content, color, dimColor, theme = getTheme() }) {
 	const { stdout } = useStdout();
 	const availableWidth = stdout.columns - 4;
 	return /* @__PURE__ */ jsx(Text, {
 		color,
 		dimColor,
-		children: useMemo(() => renderMarkdown(content, availableWidth), [content, availableWidth])
+		children: useMemo(() => renderMarkdown(content, availableWidth, theme.markdownTheme), [
+			content,
+			availableWidth,
+			theme.markdownTheme
+		])
 	});
 });
 //#endregion
-//#region src/components/Messages/constants.ts
-var TURN_ABORTED_MESSAGE = [
-	"<turn_aborted>",
-	"The user interrupted the previous turn on purpose. Any running commands may still be running in the background. If any tools were aborted, they may have partially executed.",
-	"</turn_aborted>"
-].join("\n");
-//#endregion
 //#region src/components/Messages/layout.ts
 var ANSI_REGEX = new RegExp(String.raw`\u001B\[[0-9;]*m`, "g");
 var CODE_BLOCK_MARGIN_Y = 2;
@@ -371,118 +377,31 @@ function parseContent(content) {
 	return segments;
 }
 //#endregion
-//#region src/components/Messages/streaming.ts
-function isWordCharacter(char) {
-	return char !== void 0 && /[A-Za-z0-9]/.test(char);
-}
-function isEscaped(content, index) {
-	let slashCount = 0;
-	for (let cursor = index - 1; cursor >= 0 && content[cursor] === "\\"; cursor--) slashCount += 1;
-	return slashCount % 2 === 1;
-}
-function canOpenEmphasis(content, index, length) {
-	const previous = content[index - 1];
-	const next = content[index + length];
-	if (!next || /\s/.test(next)) return false;
-	return !isWordCharacter(previous);
-}
-function canCloseEmphasis(content, index, length) {
-	const previous = content[index - 1];
-	const next = content[index + length];
-	if (!previous || /\s/.test(previous)) return false;
-	return !isWordCharacter(next);
-}
-function findUnmatchedInlineDelimiter(content) {
-	const stack = [];
-	for (let index = 0; index < content.length; index += 1) {
-		const current = content[index];
-		if (isEscaped(content, index)) continue;
-		const top = stack.at(-1);
-		if (top?.kind === "code") {
-			if (current === "`") stack.pop();
-			continue;
-		}
-		if (top?.kind === "latex") {
-			if (current === "$") stack.pop();
-			continue;
-		}
-		if (current === "`") {
-			stack.push({
-				index,
-				length: 1,
-				kind: "code",
-				marker: "`"
-			});
-			continue;
-		}
-		if (current === "$") {
-			stack.push({
-				index,
-				length: 1,
-				kind: "latex",
-				marker: "$"
-			});
-			continue;
-		}
-		if (current !== "*") continue;
-		const marker = current;
-		const length = content[index + 1] === marker ? 2 : 1;
-		const token = marker.repeat(length);
-		const kind = length === 2 ? "bold" : "italic";
-		if (top?.marker === token && top.kind === kind && canCloseEmphasis(content, index, length)) {
-			stack.pop();
-			if (length === 2) index += 1;
-			continue;
-		}
-		if (canOpenEmphasis(content, index, length)) {
-			stack.push({
-				index,
-				length,
-				kind,
-				marker: token
-			});
-			if (length === 2) index += 1;
-		}
-	}
-	return stack[0] ?? null;
-}
-function splitStreamingInlineContent(content) {
-	const unmatched = findUnmatchedInlineDelimiter(content);
-	if (!unmatched) return [{
-		type: "markdown",
-		content
-	}];
-	const parts = [];
-	const prefix = content.slice(0, unmatched.index);
-	const plainSuffix = content.slice(unmatched.index + unmatched.length);
-	if (prefix) parts.push({
-		type: "markdown",
-		content: prefix
-	});
-	if (plainSuffix) parts.push({
-		type: "plain",
-		content: plainSuffix
-	});
-	return parts;
-}
-//#endregion
 //#region src/components/Messages/styles.ts
-function getMessageColor(role) {
+function getMessageColor(role, theme) {
 	switch (role) {
-		case USER: return "black";
-		case ASSISTANT: return "cyan";
-		case SYSTEM: return "gray";
+		case USER:
+		case ASSISTANT: return;
+		case SYSTEM: return theme.colors.messageSystem;
 		default: return;
 	}
 }
 //#endregion
-//#region src/components/Messages/Messages.tsx
-function Message({ message, isStreaming = false }) {
-	const { stdout } = useStdout();
-	const messageColor = getMessageColor(message.role);
+//#region src/components/Messages/Message.tsx
+function renderStickyPaddingLines(count) {
+	return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
+		Text,
+		// v8 ignore start
+		{ children: " " },
+		index
+	));
+}
+function Message({ message, isStreaming = false, theme }) {
+	const messageColor = getMessageColor(message.role, theme);
 	const isSystem = message.role === SYSTEM;
 	const isUser = message.role === USER;
 	const isStreamingAssistant = isStreaming && !isUser && !isSystem;
+	const { stdout } = useStdout();
 	const stickyHeightRef = useRef({
 		columns: stdout.columns,
 		maxHeight: 0
@@ -506,7 +425,10 @@ function Message({ message, isStreaming = false }) {
 	const streamingHeight = isStreamingAssistant ? segments.reduce((height, segment) => {
 		if (segment.type === "code") return height + getCodeBlockHeight(segment.content, availableWidth);
 		if (segment.type === "raw") return height + getCodeBlockHeight(unwrapRawMarkdownFence(segment.content) ?? segment.content, availableWidth);
-		return height + getStreamingTextHeight(splitStreamingInlineContent(segment.content), availableWidth);
+		return height + getStreamingTextHeight([{
+			type: "markdown",
+			content: segment.content
+		}], availableWidth);
 	}, 0) : 0;
 	if (isStreamingAssistant) stickyHeightRef.current.maxHeight = Math.max(stickyHeightRef.current.maxHeight, streamingHeight);
 	const stickyPaddingLines = isStreamingAssistant ? stickyHeightRef.current.maxHeight - streamingHeight : 0;
@@ -523,7 +445,8 @@ function Message({ message, isStreaming = false }) {
 				children: /* @__PURE__ */ jsx(CodeBlock, {
 					code: segment.content,
 					language: segment.language,
-					role: message.role
+					role: message.role,
+					theme
 				})
 			}, index);
 			if (segment.type === "raw") {
@@ -533,11 +456,12 @@ function Message({ message, isStreaming = false }) {
 					children: /* @__PURE__ */ jsx(CodeBlock, {
 						code: markdownSource ?? segment.content,
 						language: markdownSource ? "markdown" : segment.language,
-						role: message.role
+						role: message.role,
+						theme
 					})
 				}, index);
 			}
-			const textParts = isStreaming && !isUser ? splitStreamingInlineContent(segment.content) : [{
+			const textParts = [{
 				type: "markdown",
 				content: segment.content
 			}];
@@ -547,28 +471,31 @@ function Message({ message, isStreaming = false }) {
 			}, index) : /* @__PURE__ */ jsx(Box, {
 				flexDirection: "column",
 				marginX: 2,
-				children: textParts.map((part, partIndex) => part.type === "plain" ? /* @__PURE__ */ jsx(Text, {
-					color: messageColor,
-					children: part.content
-				}, partIndex) : /* @__PURE__ */ jsx(Markdown, {
+				children: textParts.map((part, partIndex) => /* @__PURE__ */ jsx(Markdown, {
 					content: part.content,
-					color: messageColor
+					theme
 				}, partIndex))
 			}, index);
-		}), Array.from({ length: stickyPaddingLines }, (_, index) => /* @__PURE__ */ jsx(Text, { children: " " }, "padding-" + String(index)))]
+		}), renderStickyPaddingLines(stickyPaddingLines)]
 	});
 }
-function Messages({ messages, isLoading, sessionId, streamingMessage }) {
+//#endregion
+//#region src/components/Messages/Messages.tsx
+function Messages({ messages, isLoading, sessionId, streamingMessage, theme = getTheme() }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
 			/* @__PURE__ */ jsx(Static, {
 				items: messages.filter(({ content }) => content !== TURN_ABORTED_MESSAGE),
-				children: (message, index) => /* @__PURE__ */ jsx(Message, { message }, index)
+				children: (message, index) => /* @__PURE__ */ jsx(Message, {
+					message,
+					theme
+				}, index)
 			}, sessionId),
 			streamingMessage && /* @__PURE__ */ jsx(Message, {
 				isStreaming: true,
-				message: streamingMessage
+				message: streamingMessage,
+				theme
 			}),
 			isLoading && !streamingMessage?.content && /* @__PURE__ */ jsx(Box, {
 				marginTop: -1,
@@ -580,7 +507,7 @@ function Messages({ messages, isLoading, sessionId, streamingMessage }) {
 	});
 }
 //#endregion
-//#region src/components/SelectPrompt.tsx
+//#region src/components/SelectPrompt/SelectPrompt.tsx
 function SelectPrompt({ borderStyle, children, onCancel, ...selectProps }) {
 	useInput((input, key) => {
 		if (key.escape || key.ctrl && input === "c") onCancel?.();
@@ -591,6 +518,8 @@ function SelectPrompt({ borderStyle, children, onCancel, ...selectProps }) {
 		children: [children, /* @__PURE__ */ jsx(Select, { ...selectProps })]
 	});
 }
+//#endregion
+//#region src/components/SelectPrompt/SelectPromptHint.tsx
 function SelectPromptHint({ message = "Select option", escapeLabel = "cancel" }) {
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "row",
@@ -646,7 +575,7 @@ var options$1 = [
 		value: PLAN
 	}
 ];
-function PlanApproval({ planContent, onModeChange }) {
+function PlanApproval({ planContent, onModeChange, theme = getTheme() }) {
 	return /* @__PURE__ */ jsx(Box, {
 		marginX: 2,
 		children: /* @__PURE__ */ jsx(SelectPrompt, {
@@ -663,7 +592,7 @@ function PlanApproval({ planContent, onModeChange }) {
 				children: [
 					/* @__PURE__ */ jsx(Text, {
 						bold: true,
-						color: "magenta",
+						color: theme.colors.accent,
 						children: "Plan Generated - Choose execution mode:"
 					}),
 					/* @__PURE__ */ jsx(Box, {
@@ -685,7 +614,7 @@ var options = [{
 	label: "Reject tool call",
 	value: REJECT
 }];
-function ToolApproval({ toolCall, onDecision }) {
+function ToolApproval({ toolCall, onDecision, theme = getTheme() }) {
 	const handleChange = useCallback((value) => {
 		onDecision(value);
 	}, [onDecision]);
@@ -701,9 +630,13 @@ function ToolApproval({ toolCall, onDecision }) {
 			onChange: handleChange,
 			onCancel: handleEscape,
 			children: [
-				/* @__PURE__ */ jsx(Text, {
-					color: "yellow",
-					children: "Tool requires approval ⚠️ "
+				/* @__PURE__ */ jsxs(Text, {
+					color: theme.colors.warning,
+					children: [
+						"Tool requires approval ",
+						WARNING,
+						" "
+					]
 				}),
 				/* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
@@ -888,8 +821,57 @@ function CommandMenu({ input, onSubmit }) {
 	});
 }
 //#endregion
+//#region src/components/Suggestions.tsx
+var DEFAULT_MAX_VISIBLE_OPTIONS = 5;
+function Suggestions({ options, isDisabled = false, maxVisibleOptions = DEFAULT_MAX_VISIBLE_OPTIONS, resetKey, onHighlight, onSelect }) {
+	const [focusedIndex, setFocusedIndex] = useState(0);
+	useEffect(() => {
+		setFocusedIndex(0);
+	}, [resetKey]);
+	useEffect(() => {
+		if (!options.length) {
+			setFocusedIndex(0);
+			onHighlight?.(null);
+			return;
+		}
+		setFocusedIndex((currentIndex) => Math.min(currentIndex, options.length - 1));
+	}, [onHighlight, options]);
+	useEffect(() => {
+		onHighlight?.(options[focusedIndex] ?? null);
+	}, [
+		focusedIndex,
+		onHighlight,
+		options
+	]);
+	useInput((_, key) => {
+		if (isDisabled || !options.length) return;
+		if (key.downArrow) {
+			setFocusedIndex((currentIndex) => Math.min(currentIndex + 1, options.length - 1));
+			return;
+		}
+		if (key.upArrow) {
+			setFocusedIndex((currentIndex) => Math.max(currentIndex - 1, 0));
+			return;
+		}
+		if (key.tab || key.return) onSelect(options[focusedIndex]);
+	});
+	if (!options.length) return null;
+	const visibleStart = Math.min(Math.max(0, focusedIndex - maxVisibleOptions + 1), Math.max(0, options.length - maxVisibleOptions));
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		children: options.slice(visibleStart, visibleStart + maxVisibleOptions).map((option, index) => {
+			return /* @__PURE__ */ jsx(Box, {
+				marginLeft: 2,
+				children: /* @__PURE__ */ jsx(Text, {
+					color: visibleStart + index === focusedIndex ? "cyan" : void 0,
+					children: option.label
+				})
+			}, option.label);
+		})
+	});
+}
+//#endregion
 //#region src/components/Chat/FileSuggestions.tsx
-var MAX_VISIBLE_OPTIONS = 5;
 var MENTION_PATTERN = /(^|.)@(\S+)/;
 var RIPGREP_MAX_BUFFER = 10 * 1024 * 1024;
 function normalizePath(filePath) {
@@ -968,7 +950,6 @@ async function listProjectFiles(rootDir) {
 }
 function FileSuggestions({ input, isDisabled = false, onChange, onSelect }) {
 	const [filePaths, setFilePaths] = useState([]);
-	const [focusedIndex, setFocusedIndex] = useState(0);
 	useEffect(() => {
 		async function loadProjectFiles() {
 			setFilePaths(await listProjectFiles(process.cwd()));
@@ -981,55 +962,29 @@ function FileSuggestions({ input, isDisabled = false, onChange, onSelect }) {
 		const normalizedQuery = mentionMatch.query.toLowerCase();
 		return filePaths.filter((filePath) => filePath.toLowerCase().includes(normalizedQuery));
 	}, [filePaths, mentionMatch]);
-	useEffect(() => {
-		setFocusedIndex(0);
-	}, [input]);
-	useEffect(() => {
-		if (!options.length) {
-			setFocusedIndex(0);
-			return;
-		}
-		setFocusedIndex((currentIndex) => Math.min(currentIndex, options.length - 1));
-	}, [options]);
 	useEffect(() => {
 		if (!onChange) return;
-		if (!mentionMatch || !options.length) {
-			onChange(null);
-			return;
-		}
-		onChange(buildNextInput(input, options[focusedIndex]).value);
+		if (!mentionMatch || !options.length) onChange(null);
 	}, [
-		focusedIndex,
-		input,
 		mentionMatch,
 		onChange,
 		options
 	]);
-	useInput((_, key) => {
-		if (isDisabled || !options.length) return;
-		if (key.downArrow) {
-			setFocusedIndex((currentIndex) => Math.min(currentIndex + 1, options.length - 1));
-			return;
-		}
-		if (key.upArrow) {
-			setFocusedIndex((currentIndex) => Math.max(currentIndex - 1, 0));
-			return;
-		}
-		if (key.tab || key.return) onSelect(buildNextInput(input, options[focusedIndex]));
-	});
 	if (!mentionMatch || !options.length) return null;
-	const visibleStart = Math.min(Math.max(0, focusedIndex - MAX_VISIBLE_OPTIONS + 1), Math.max(0, options.length - MAX_VISIBLE_OPTIONS));
-	return /* @__PURE__ */ jsx(Box, {
-		flexDirection: "column",
-		children: options.slice(visibleStart, visibleStart + MAX_VISIBLE_OPTIONS).map((option, index) => {
-			return /* @__PURE__ */ jsx(Box, {
-				marginLeft: 2,
-				children: /* @__PURE__ */ jsx(Text, {
-					color: visibleStart + index === focusedIndex ? "cyan" : void 0,
-					children: option
-				})
-			}, option);
-		})
+	return /* @__PURE__ */ jsx(Suggestions, {
+		isDisabled,
+		options: options.map((option) => ({
+			label: option,
+			value: option
+		})),
+		resetKey: input,
+		onHighlight: (option) => {
+			// v8 ignore next
+			onChange?.(option ? buildNextInput(input, option.value).value : null);
+		},
+		onSelect: (option) => {
+			onSelect(buildNextInput(input, option.value));
+		}
 	});
 }
 //#endregion
@@ -1205,7 +1160,7 @@ function hasExecutablePlan(content) {
 }
 //#endregion
 //#region src/components/Chat/Chat.tsx
-function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onModeChange, sessionId }) {
+function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onModeChange, sessionId, theme = getTheme() }) {
 	const sessionMessages = initialMessages ?? [];
 	const history = useMemo(() => sessionMessages.flatMap(({ role, content }) => role === "user" && !content.startsWith("/") ? [content] : []), [sessionMessages]);
 	const [messages, setMessages] = useState(sessionMessages);
@@ -1322,13 +1277,13 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 					return;
 				}
 			}
-			await prewarmCodeBlocks(assistantMessage.content);
+			await prewarmCodeBlocks(assistantMessage.content, theme);
 			commitAssistantMessage();
 		} catch (error) {
 			// v8 ignore next
 			if (!controller.signal.aborted) {
 				assistantMessage.content = `Error: ${error instanceof Error ? error.message : String(error)}`;
-				await prewarmCodeBlocks(assistantMessage.content);
+				await prewarmCodeBlocks(assistantMessage.content, theme);
 				commitAssistantMessage();
 			}
 		} finally {
@@ -1338,7 +1293,8 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 	}, [
 		buildToolResultMessage,
 		model,
-		mode
+		mode,
+		theme
 	]);
 	const processStreamReadOnly = useCallback(async (currentMessages) => {
 		const controller = new AbortController();
@@ -1394,7 +1350,7 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 					return;
 				}
 			}
-			await prewarmCodeBlocks(assistantMessage.content);
+			await prewarmCodeBlocks(assistantMessage.content, theme);
 			const researchMessages = commitAssistantMessage();
 			const planInstruction = {
 				role: SYSTEM,
@@ -1435,7 +1391,7 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 			// v8 ignore next
 			if (!controller.signal.aborted) {
 				assistantMessage.content = `Error: ${error instanceof Error ? error.message : String(error)}`;
-				await prewarmCodeBlocks(assistantMessage.content);
+				await prewarmCodeBlocks(assistantMessage.content, theme);
 				commitAssistantMessage();
 			}
 		} finally {
@@ -1445,7 +1401,8 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 	}, [
 		buildPlanModeCorrectionMessage,
 		buildToolResultMessage,
-		model
+		model,
+		theme
 	]);
 	const handlePlanApproval = useCallback(async (mode) => {
 		// v8 ignore next
@@ -1537,21 +1494,24 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 				messages,
 				isLoading,
 				sessionId,
-				streamingMessage
+				streamingMessage,
+				theme
 			}),
 			pendingPlan && /* @__PURE__ */ jsx(PlanApproval, {
 				planContent: pendingPlan.planContent,
-				onModeChange: handlePlanApproval
+				onModeChange: handlePlanApproval,
+				theme
 			}),
 			!pendingPlan && pendingToolCall && /* @__PURE__ */ jsx(ToolApproval, {
 				toolCall: pendingToolCall,
-				onDecision: handleToolApproval
+				onDecision: handleToolApproval,
+				theme
 			}),
 			interruptReason && !isLoading && /* @__PURE__ */ jsx(Box, {
 				marginBottom: 1,
 				children: /* @__PURE__ */ jsx(Text, {
-					color: "red",
-					children: interruptReason === INTERRUPT_REASON.REJECTED ? "❗ Tool call rejected." : "❗ Execution interrupted."
+					color: theme.colors.error,
+					children: interruptReason === INTERRUPT_REASON.REJECTED ? `❗ Tool call rejected.` : `❗ Execution interrupted.`
 				})
 			}),
 			!pendingPlan && !pendingToolCall && /* @__PURE__ */ jsx(Box, {
@@ -1568,29 +1528,31 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 }
 //#endregion
 //#region src/components/Footer.tsx
-function getModeColor(mode) {
+function getModeColor(mode, theme) {
 	switch (mode) {
-		case PLAN: return "blue";
-		case AUTO: return "red";
-		case SAFE: return "green";
+		case PLAN: return theme.colors.modePlan;
+		case AUTO: return theme.colors.modeAuto;
+		case SAFE: return theme.colors.modeSafe;
 		// v8 ignore next
 		default: return;
 	}
 }
-function Footer({ mode, model, onToggleMode }) {
+function Footer({ mode, model, onToggleMode, theme = getTheme() }) {
 	useInput((_, key) => {
 		if (key.tab && key.shift) onToggleMode();
 	});
 	const modeLabel = LABEL[mode];
+	const modeColor = getModeColor(mode, theme);
 	return /* @__PURE__ */ jsx(Box, {
 		justifyContent: "space-between",
 		marginTop: 1,
 		children: /* @__PURE__ */ jsxs(Text, {
+			color: theme.colors.secondary,
 			dimColor: true,
 			children: [
 				"Mode: ",
 				/* @__PURE__ */ jsx(Text, {
-					color: getModeColor(mode),
+					color: modeColor,
 					children: modeLabel
 				}),
 				" (Shift+Tab to toggle)",
@@ -1598,7 +1560,7 @@ function Footer({ mode, model, onToggleMode }) {
 				"❖",
 				" Model: ",
 				/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
+					color: theme.colors.model,
 					children: model
 				})
 			]
@@ -1611,7 +1573,7 @@ function abbreviatePath(dir) {
 	const home = homedir();
 	return dir.startsWith(home) ? `~${dir.slice(home.length)}` : dir;
 }
-function Header({ model, onLoad }) {
+function Header({ model, onLoad, theme = getTheme() }) {
 	const directory = abbreviatePath(process.cwd());
 	useEffect(() => {
 		onLoad();
@@ -1627,9 +1589,11 @@ function Header({ model, onLoad }) {
 					bold: true,
 					children: [HEADER_PREFIX, "Code Ollama"]
 				}), /* @__PURE__ */ jsxs(Text, {
+					color: theme.colors.secondary,
 					dimColor: true,
 					children: [
-						" (v",
+						" ",
+						"(v",
 						VERSION,
 						")"
 					]
@@ -1638,21 +1602,24 @@ function Header({ model, onLoad }) {
 					marginTop: 1,
 					children: [
 						/* @__PURE__ */ jsx(Text, {
+							color: theme.colors.secondary,
 							dimColor: true,
 							children: "model:".padEnd(11)
 						}),
 						/* @__PURE__ */ jsx(Text, { children: model.padEnd(model.length + 3) }),
 						/* @__PURE__ */ jsx(Text, {
-							color: "cyan",
+							color: theme.colors.command,
 							children: "/model"
 						}),
-						/* @__PURE__ */ jsx(Text, {
+						/* @__PURE__ */ jsxs(Text, {
+							color: theme.colors.secondary,
 							dimColor: true,
-							children: " to switch"
+							children: [" ", "to manage"]
 						})
 					]
 				}),
 				/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.secondary,
 					dimColor: true,
 					children: "directory:".padEnd(11)
 				}), /* @__PURE__ */ jsx(Text, { children: directory })] })
@@ -1661,53 +1628,613 @@ function Header({ model, onLoad }) {
 	});
 }
 //#endregion
-//#region src/components/ModelPicker.tsx
-function ModelPicker({ currentModel, onSelect, onClose }) {
-	const [options, setOptions] = useState([]);
-	const [error, setError] = useState(null);
-	const handleChange = useCallback((model) => {
-		onSelect({ model });
-	}, [onSelect]);
-	useInput(async (_input, key) => {
-		if (!error && options.length && key.return) {
-			await tick();
-			onClose();
+//#region src/components/ModelManager/ModelSuggestions.tsx
+function rankCatalogMatch(entry, normalizedInput) {
+	const normalizedValue = entry.value.toLowerCase();
+	const normalizedLabel = entry.label.toLowerCase();
+	// v8 ignore start
+	switch (true) {
+		case normalizedValue.startsWith(normalizedInput): return 0;
+		case normalizedLabel.startsWith(normalizedInput): return 1;
+		case normalizedValue.includes(normalizedInput): return 2;
+		case normalizedLabel.includes(normalizedInput): return 3;
+		default: return Number.MAX_SAFE_INTEGER;
+	}
+	// v8 ignore stop
+}
+function ModelSuggestions({ catalog, input, isDisabled = false, onHighlight, onSelect }) {
+	const normalizedInput = input.trim().toLowerCase();
+	return /* @__PURE__ */ jsx(Suggestions, {
+		isDisabled,
+		options: useMemo(() => {
+			if (!normalizedInput) return [];
+			return catalog.filter((entry) => entry.value.toLowerCase().includes(normalizedInput) || entry.label.toLowerCase().includes(normalizedInput)).sort((left, right) => rankCatalogMatch(left, normalizedInput) - rankCatalogMatch(right, normalizedInput) || left.label.localeCompare(right.label)).map((entry) => ({
+				label: entry.value,
+				value: entry.value
+			}));
+		}, [catalog, normalizedInput]),
+		resetKey: input,
+		/* v8 ignore next */
+		onHighlight: (option) => onHighlight?.(option?.value ?? null),
+		onSelect: (option) => {
+			onSelect(option.value);
 		}
 	});
+}
+//#endregion
+//#region src/components/ModelManager/types.ts
+var View = /* @__PURE__ */ function(View) {
+	View["Menu"] = "menu";
+	View["Switch"] = "switch";
+	View["Download"] = "download";
+	View["CustomDownload"] = "custom-download";
+	View["Downloading"] = "downloading";
+	View["Delete"] = "delete";
+	View["DeleteConfirm"] = "delete-confirm";
+	return View;
+}({});
+var MenuAction = /* @__PURE__ */ function(MenuAction) {
+	MenuAction["Switch"] = "switch";
+	MenuAction["Download"] = "download";
+	MenuAction["Delete"] = "delete";
+	MenuAction["Cancel"] = "cancel";
+	return MenuAction;
+}({});
+var DownloadAction = /* @__PURE__ */ function(DownloadAction) {
+	DownloadAction["Custom"] = "custom";
+	return DownloadAction;
+}({});
+var ConfirmDeleteAction = /* @__PURE__ */ function(ConfirmDeleteAction) {
+	ConfirmDeleteAction["Delete"] = "delete";
+	return ConfirmDeleteAction;
+}({});
+//#endregion
+//#region src/components/ModelManager/utils.ts
+function buildMenuOptions() {
+	return [
+		{
+			label: "Switch model",
+			value: MenuAction.Switch
+		},
+		{
+			label: "Download model",
+			value: MenuAction.Download
+		},
+		{
+			label: "Delete model",
+			value: MenuAction.Delete
+		},
+		{
+			label: "Cancel",
+			value: MenuAction.Cancel
+		}
+	];
+}
+function buildInstalledModelOptions(models, currentModel) {
+	const nextModels = [...models];
+	if (nextModels.includes(currentModel)) {
+		nextModels.splice(nextModels.indexOf(currentModel), 1);
+		nextModels.unshift(currentModel);
+	}
+	return nextModels.map((model) => ({
+		label: model === currentModel ? `${model} (current model)` : model,
+		value: model
+	}));
+}
+function buildDownloadOptions(installedModels) {
+	const installedModelSet = new Set(installedModels);
+	const availableCatalog = CATALOG.filter(({ value, alias }) => !installedModelSet.has(value) && !(alias && installedModelSet.has(alias)));
+	return [
+		{
+			label: "Enter custom model...",
+			value: DownloadAction.Custom
+		},
+		...availableCatalog.map(({ label, value }) => ({
+			label,
+			value
+		})),
+		BACK
+	];
+}
+function getNoticeColor(tone, theme) {
+	switch (tone) {
+		case "error": return theme.colors.error;
+		case "success": return theme.colors.status;
+		default: return theme.colors.secondary;
+	}
+}
+function formatBytes(bytes) {
+	if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes;
+	let index = 0;
+	while (value >= 1024 && index < units.length - 1) {
+		value /= 1024;
+		index += 1;
+	}
+	const fractionDigits = value >= 10 || index === 0 ? 0 : 1;
+	return `${value.toFixed(fractionDigits)} ${units[index]}`;
+}
+function isAbortError(error) {
+	return error instanceof Error && error.name === "AbortError";
+}
+function mergeDownloadProgress(previous, model, status, completed, total) {
+	const nextCompleted = typeof completed === "number" && Number.isFinite(completed) && completed >= 0 ? completed : null;
+	const nextTotal = typeof total === "number" && Number.isFinite(total) && total > 0 ? total : null;
+	if (nextTotal !== null && nextCompleted !== null) return {
+		model,
+		status,
+		completed: nextCompleted,
+		total: nextTotal
+	};
+	const hasPreviousProgress = previous?.model === model && previous.total > 0;
+	return {
+		model,
+		status,
+		completed: hasPreviousProgress ? previous.completed : 0,
+		total: hasPreviousProgress ? previous.total : 0
+	};
+}
+//#endregion
+//#region src/components/ModelManager/ModelCustomDownloadView.tsx
+function ModelCustomDownloadView({ downloadDraft, notice, theme, onDraftChange, onHighlight, onSelectSuggestion, onSubmit }) {
+	const renderNotice = () => notice ? /* @__PURE__ */ jsx(Text, {
+		color: getNoticeColor(notice.tone, theme),
+		children: notice.text
+	}) : null;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: "Enter an Ollama model name to download." }),
+			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, { children: "> " }), /* @__PURE__ */ jsx(TextInput, {
+				value: downloadDraft,
+				placeholder: "name:tag",
+				wrapIndent: 2,
+				onChange: onDraftChange,
+				onSubmit
+			})] }),
+			/* @__PURE__ */ jsx(ModelSuggestions, {
+				catalog: [],
+				input: downloadDraft,
+				onHighlight,
+				onSelect: onSelectSuggestion
+			}),
+			renderNotice(),
+			/* @__PURE__ */ jsx(Text, {
+				color: theme.colors.secondary,
+				dimColor: true,
+				children: "Press Enter to download, Esc or Ctrl+C to go back."
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelDeleteConfirmView.tsx
+function ModelDeleteConfirmView({ deleteCandidate, isDeleting, notice, theme, onCancel, onConfirm }) {
+	if (isDeleting) return /* @__PURE__ */ jsx(Spinner, { label: `Deleting model ${deleteCandidate}...` });
+	const renderNotice = () => notice ? /* @__PURE__ */ jsx(Text, {
+		color: getNoticeColor(notice.tone, theme),
+		children: notice.text
+	}) : null;
+	return /* @__PURE__ */ jsxs(SelectPrompt, {
+		options: [{
+			label: `Yes, delete ${deleteCandidate}`,
+			value: ConfirmDeleteAction.Delete
+		}, {
+			...BACK,
+			label: "No"
+		}],
+		onCancel,
+		onChange: onConfirm,
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [
+				WARNING,
+				" Delete model",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.model,
+					children: deleteCandidate
+				}),
+				"?"
+			] }),
+			renderNotice(),
+			/* @__PURE__ */ jsx(SelectPromptHint, { message: "This action cannot be undone" })
+		]
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelDeleteView.tsx
+function ModelDeleteView({ currentModel, installedModels, isLoading, notice, theme, onCancel, onSelect }) {
+	if (isLoading) return /* @__PURE__ */ jsx(Spinner, { label: "Loading models..." });
+	return /* @__PURE__ */ jsxs(SelectPrompt, {
+		options: [...buildInstalledModelOptions(installedModels.filter((model) => model !== currentModel), currentModel), BACK],
+		onCancel,
+		onChange: (value) => {
+			if (value === BACK.value) onCancel();
+			else onSelect(value);
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [
+				"Delete an installed model (current model",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.model,
+					children: currentModel
+				}),
+				" cannot be deleted)."
+			] }),
+			notice && /* @__PURE__ */ jsx(Text, {
+				color: getNoticeColor(notice.tone, theme),
+				children: notice.text
+			}),
+			/* @__PURE__ */ jsx(SelectPromptHint, { message: "Delete models" })
+		]
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelDownloadingView.tsx
+function ModelDownloadingView({ progress, theme, onCancel }) {
+	const percent = progress.total > 0 && Number.isFinite(progress.completed) && Number.isFinite(progress.total) ? Math.round(progress.completed / progress.total * 100) : null;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [
+				"Downloading model:",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.model,
+					children: progress.model
+				})
+			] }),
+			/* @__PURE__ */ jsx(Text, { children: progress.status }),
+			percent !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Text, { children: [
+				percent,
+				"% (",
+				formatBytes(progress.completed),
+				" /",
+				" ",
+				formatBytes(progress.total),
+				")"
+			] }), /* @__PURE__ */ jsx(ProgressBar, { value: Math.max(0, Math.min(100, percent)) })] }) : /* @__PURE__ */ jsx(Text, {
+				color: theme.colors.secondary,
+				dimColor: true,
+				children: "Progress details unavailable. Waiting for Ollama updates..."
+			}),
+			/* @__PURE__ */ jsx(SelectPrompt, {
+				options: [{
+					label: "Cancel download",
+					value: "cancel-download"
+				}],
+				onCancel,
+				onChange: onCancel,
+				children: /* @__PURE__ */ jsx(SelectPromptHint, { message: "Press Enter, Esc, or Ctrl+C to cancel" })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelDownloadView.tsx
+function ModelDownloadView({ installedModels, notice, theme, onCancel, onChange }) {
+	return /* @__PURE__ */ jsxs(SelectPrompt, {
+		options: buildDownloadOptions(installedModels),
+		onCancel,
+		onChange: (value) => {
+			switch (value) {
+				case "custom":
+					onChange("custom");
+					break;
+				case "back":
+					onCancel();
+					break;
+				default:
+					onChange(value);
+					break;
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: "Choose a model to download or use a custom model name." }),
+			notice && /* @__PURE__ */ jsx(Text, {
+				color: getNoticeColor(notice.tone, theme),
+				children: notice.text
+			}),
+			/* @__PURE__ */ jsx(SelectPromptHint, { message: "Download models" })
+		]
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelSwitchView.tsx
+function ModelSwitchView({ currentModel, installedModels, isLoading, onCancel, onSelect }) {
+	if (isLoading) return /* @__PURE__ */ jsx(Spinner, { label: "Loading models..." });
+	return /* @__PURE__ */ jsx(SelectPrompt, {
+		options: [...buildInstalledModelOptions(installedModels, currentModel), BACK],
+		onCancel,
+		onChange: (value) => {
+			if (value === BACK.value) onCancel();
+			else onSelect(value);
+		},
+		children: /* @__PURE__ */ jsx(SelectPromptHint, { message: "Switch models" })
+	});
+}
+//#endregion
+//#region src/components/ModelManager/ModelManager.tsx
+function ModelManager({ currentModel, onSelect, onClose, theme = getTheme() }) {
+	const [view, setView] = useState(View.Menu);
+	const [installedModels, setInstalledModels] = useState([]);
+	const [isLoadingModels, setIsLoadingModels] = useState(true);
+	const [loadError, setLoadError] = useState(null);
+	const [notice, setNotice] = useState(null);
+	const [downloadDraft, setDownloadDraft] = useState("");
+	const [highlightedSuggestion, setHighlightedSuggestion] = useState(null);
+	const [downloadProgress, setDownloadProgress] = useState(null);
+	const [deleteCandidate, setDeleteCandidate] = useState(null);
+	const [isDeleting, setIsDeleting] = useState(false);
+	const isDeletingRef = useRef(false);
+	const pullRef = useRef(null);
+	const loadInstalledModels = useCallback(async () => {
+		setIsLoadingModels(true);
+		setLoadError(null);
+		try {
+			setInstalledModels(await listModels());
+		} catch (error) {
+			setLoadError(error instanceof Error ? error.message : 			/* v8 ignore next */ String(error));
+		} finally {
+			setIsLoadingModels(false);
+		}
+	}, []);
 	useEffect(() => {
-		async function load() {
-			try {
-				const models = await listModels();
-				if (models.includes(currentModel)) {
-					models.splice(models.indexOf(currentModel), 1);
-					models.unshift(currentModel);
-				}
-				setOptions(models.map((model) => ({
-					label: model,
-					value: model
-				})));
-			} catch (error) {
-				setError(error instanceof Error ? error.message : String(error));
+		loadInstalledModels();
+	}, [loadInstalledModels]);
+	const resetDownloadState = useCallback(() => {
+		setDownloadDraft("");
+		setHighlightedSuggestion(null);
+		setDownloadProgress(null);
+		pullRef.current = null;
+	}, []);
+	const handleBackToMenu = useCallback(() => {
+		setNotice(null);
+		setDeleteCandidate(null);
+		setIsDeleting(false);
+		isDeletingRef.current = false;
+		resetDownloadState();
+		setView(View.Menu);
+	}, [resetDownloadState]);
+	const cancelActivePull = useCallback(() => {
+		pullRef.current?.abort();
+	}, []);
+	useInput((input, key) => {
+		if (view === View.CustomDownload && (key.escape || key.ctrl && input === "c")) {
+			setNotice(null);
+			setHighlightedSuggestion(null);
+			setView(View.Download);
+			return;
+		}
+		if (view === View.Downloading && (key.escape || key.ctrl && input === "c")) cancelActivePull();
+	});
+	const handleMenuChange = useCallback((value) => {
+		setNotice(null);
+		switch (value) {
+			case "switch":
+				setView(View.Switch);
+				break;
+			case "download":
+				setView(View.Download);
+				break;
+			case "delete":
+				setView(View.Delete);
+				break;
+			default: onClose();
+		}
+	}, [onClose]);
+	const handleSwitchChange = useCallback((model) => {
+		onSelect({ model });
+	}, [onSelect]);
+	const startPull = useCallback(async (model) => {
+		const normalizedModel = model.trim();
+		if (!normalizedModel) {
+			setNotice({
+				tone: "error",
+				text: `❗ Enter a model name to download`
+			});
+			return;
+		}
+		if (installedModels.includes(normalizedModel)) {
+			setNotice({
+				tone: "info",
+				text: `${normalizedModel} is already installed`
+			});
+			return;
+		}
+		setNotice(null);
+		setDownloadProgress({
+			model: normalizedModel,
+			status: "Starting download...",
+			completed: 0,
+			total: 0
+		});
+		setView(View.Downloading);
+		try {
+			const pull = await pullModel(normalizedModel);
+			pullRef.current = pull;
+			for await (const update of pull) setDownloadProgress((previous) => {
+				return mergeDownloadProgress(previous, normalizedModel, update.status, update.completed, update.total);
+			});
+			pullRef.current = null;
+			resetDownloadState();
+			await loadInstalledModels();
+			setNotice({
+				tone: "success",
+				text: `✅ ${normalizedModel} downloaded successfully`
+			});
+			setView(View.Menu);
+		} catch (error) {
+			pullRef.current = null;
+			if (isAbortError(error)) {
+				setNotice({
+					tone: "error",
+					text: `❌ Download canceled for ${normalizedModel}`
+				});
+				setDownloadProgress(null);
+				setView(View.Download);
+				return;
 			}
+			setNotice({
+				tone: "error",
+				text: `❗ Error downloading model: ${error instanceof Error ? error.message : 				/* v8 ignore next */ String(error)}`
+			});
+			setDownloadProgress(null);
+			setView(View.CustomDownload);
+		}
+	}, [
+		installedModels,
+		loadInstalledModels,
+		resetDownloadState
+	]);
+	const handleDownloadChange = useCallback((value) => {
+		if (value === "custom") {
+			setNotice(null);
+			setView(View.CustomDownload);
+			return;
+		}
+		// v8 ignore next 3
+		if (value === "back") {
+			handleBackToMenu();
+			return;
+		}
+		setDownloadDraft(value);
+		startPull(value);
+	}, [handleBackToMenu, startPull]);
+	const handleCustomDownloadSubmit = useCallback((value) => {
+		const nextValue = highlightedSuggestion ?? value.trim();
+		setDownloadDraft(nextValue);
+		startPull(nextValue);
+	}, [highlightedSuggestion, startPull]);
+	const handleDeleteChange = useCallback((model) => {
+		setNotice(null);
+		setDeleteCandidate(model);
+		setView(View.DeleteConfirm);
+	}, []);
+	const handleDeleteConfirm = useCallback(async (value) => {
+		if (isDeletingRef.current) return;
+		if (value === "back") {
+			setView(View.Delete);
+			return;
+		}
+		// v8 ignore next 3
+		if (!deleteCandidate) {
+			setView(View.Delete);
+			return;
+		}
+		try {
+			isDeletingRef.current = true;
+			setIsDeleting(true);
+			await deleteModel(deleteCandidate);
+			await loadInstalledModels();
+			setNotice({
+				tone: "success",
+				text: `✅ ${deleteCandidate} deleted successfully`
+			});
+			isDeletingRef.current = false;
+			setIsDeleting(false);
+			setDeleteCandidate(null);
+			setView(View.Delete);
+		} catch (error) {
+			isDeletingRef.current = false;
+			setIsDeleting(false);
+			setNotice({
+				tone: "error",
+				text: `❗ Error deleting model: ${error instanceof Error ? error.message : 				/* v8 ignore next */ String(error)}`
+			});
+			setView(View.Delete);
 		}
-		load();
-	}, [currentModel]);
-	if (error) return /* @__PURE__ */ jsxs(Text, {
-		color: "red",
-		children: ["Error loading models: ", error]
+	}, [deleteCandidate, loadInstalledModels]);
+	const renderNotice = () => notice ? /* @__PURE__ */ jsx(Text, {
+		color: notice.tone === "error" ? theme.colors.error : notice.tone === "success" ? theme.colors.status : theme.colors.secondary,
+		children: notice.text
+	}) : null;
+	if (loadError && view !== View.Menu) return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsxs(Text, {
+			color: theme.colors.error,
+			children: ["Error loading models: ", loadError]
+		}), /* @__PURE__ */ jsx(Text, {
+			color: theme.colors.secondary,
+			dimColor: true,
+			children: "Press Esc to go back."
+		})]
 	});
-	if (!options.length) return /* @__PURE__ */ jsx(Spinner, { label: "Loading models..." });
-	return /* @__PURE__ */ jsx(SelectPrompt, {
-		options,
-		defaultValue: currentModel,
-		onChange: handleChange,
+	if (view === View.Downloading && downloadProgress) return /* @__PURE__ */ jsx(ModelDownloadingView, {
+		progress: downloadProgress,
+		theme,
+		onCancel: cancelActivePull
+	});
+	if (view === View.CustomDownload) return /* @__PURE__ */ jsx(ModelCustomDownloadView, {
+		downloadDraft,
+		notice,
+		theme,
+		onDraftChange: setDownloadDraft,
+		onHighlight: setHighlightedSuggestion,
+		onSelectSuggestion: (value) => {
+			setDownloadDraft(value);
+			setHighlightedSuggestion(value);
+		},
+		onSubmit: handleCustomDownloadSubmit
+	});
+	if (view === View.Switch) return /* @__PURE__ */ jsx(ModelSwitchView, {
+		currentModel,
+		installedModels,
+		isLoading: isLoadingModels,
+		onCancel: handleBackToMenu,
+		onSelect: handleSwitchChange
+	});
+	if (view === View.Download) return /* @__PURE__ */ jsx(ModelDownloadView, {
+		installedModels,
+		notice,
+		theme,
+		onCancel: handleBackToMenu,
+		onChange: handleDownloadChange
+	});
+	if (view === View.Delete) return /* @__PURE__ */ jsx(ModelDeleteView, {
+		currentModel,
+		installedModels,
+		isLoading: isLoadingModels,
+		notice,
+		theme,
+		onCancel: handleBackToMenu,
+		onSelect: handleDeleteChange
+	});
+	if (view === View.DeleteConfirm && deleteCandidate) return /* @__PURE__ */ jsx(ModelDeleteConfirmView, {
+		deleteCandidate,
+		isDeleting,
+		notice,
+		theme,
+		onCancel: () => {
+			setView(View.Delete);
+		},
+		onConfirm: handleDeleteConfirm
+	});
+	return /* @__PURE__ */ jsxs(SelectPrompt, {
+		options: buildMenuOptions(),
 		onCancel: onClose,
-		children: /* @__PURE__ */ jsx(SelectPromptHint, { message: "Select a model" })
+		onChange: handleMenuChange,
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: ["Current model: ", /* @__PURE__ */ jsx(Text, {
+				color: theme.colors.model,
+				children: currentModel
+			})] }),
+			renderNotice(),
+			/* @__PURE__ */ jsx(SelectPromptHint, { message: "Manage models" })
+		]
 	});
 }
 //#endregion
 //#region src/components/SearchSettings.tsx
-function SearchSettings({ currentUrl, onClose, onSave }) {
+function SearchSettings({ currentUrl, onClose, onSave, theme = getTheme() }) {
 	const [view, setView] = useState("menu");
 	const [draftUrl, setDraftUrl] = useState(currentUrl ?? "");
 	const [error, setError] = useState(null);
@@ -1779,10 +2306,11 @@ function SearchSettings({ currentUrl, onClose, onSave }) {
 				placeholder: "http://localhost:8080"
 			})] }),
 			error && /* @__PURE__ */ jsx(Text, {
-				color: "red",
+				color: theme.colors.error,
 				children: error
 			}),
 			/* @__PURE__ */ jsx(Text, {
+				color: theme.colors.secondary,
 				dimColor: true,
 				children: "Press Enter to save, Esc to go back."
 			})
@@ -1793,10 +2321,14 @@ function SearchSettings({ currentUrl, onClose, onSave }) {
 		onChange: handleChange,
 		onCancel: onClose,
 		children: [
-			/* @__PURE__ */ jsxs(Text, { children: ["SearXNG URL: ", /* @__PURE__ */ jsx(Text, {
-				color: "cyan",
-				children: currentUrl ?? "not set"
-			})] }),
+			/* @__PURE__ */ jsxs(Text, { children: [
+				"SearXNG URL:",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.status,
+					children: currentUrl ?? "not set"
+				})
+			] }),
 			/* @__PURE__ */ jsx(Text, { children: "DuckDuckGo fallback remains available." }),
 			/* @__PURE__ */ jsx(SelectPromptHint, { message: "Manage web search settings" })
 		]
@@ -1805,7 +2337,6 @@ function SearchSettings({ currentUrl, onClose, onSave }) {
 //#endregion
 //#region src/components/SessionManager.tsx
 var ACTION = {
-	BACK: "back",
 	CLOSE: "close",
 	DELETE_MENU: "delete-menu",
 	DELETE_PREFIX: "delete:",
@@ -1823,7 +2354,7 @@ function formatSessionLabel(session, maxWidth, prefix = "") {
 	if (availableTitleWidth < 1) return truncate(`${prefix}${session.title}${suffix}`, maxWidth);
 	return `${prefix}${truncate(session.title, availableTitleWidth)}${suffix}`;
 }
-function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen }) {
+function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen, theme = getTheme() }) {
 	const [view, setView] = useState("main");
 	const [error, setError] = useState();
 	const [, refreshSessionList] = useState(0);
@@ -1833,16 +2364,10 @@ function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen })
 	const options = view === "open" ? [...sessions.filter(({ id }) => id !== currentSessionId).map((session) => ({
 		label: formatSessionLabel(session, maxLabelWidth),
 		value: `${ACTION.OPEN_PREFIX}${session.id}`
-	})), {
-		label: "Back",
-		value: ACTION.BACK
-	}] : view === "delete" ? [...sessions.filter(({ id }) => id !== currentSessionId).map((session) => ({
+	})), BACK] : view === "delete" ? [...sessions.filter(({ id }) => id !== currentSessionId).map((session) => ({
 		label: formatSessionLabel(session, maxLabelWidth, "Delete "),
 		value: `${ACTION.DELETE_PREFIX}${session.id}`
-	})), {
-		label: "Back",
-		value: ACTION.BACK
-	}] : [
+	})), BACK] : [
 		{
 			label: "New session",
 			value: ACTION.NEW
@@ -1874,7 +2399,7 @@ function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen })
 			case value === ACTION.OPEN_MENU:
 				setView("open");
 				break;
-			case value === ACTION.BACK:
+			case value === BACK.value:
 				setView("main");
 				break;
 			case value.startsWith(ACTION.DELETE_PREFIX):
@@ -1909,7 +2434,7 @@ function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen })
 			error && /* @__PURE__ */ jsx(Box, {
 				marginBottom: 1,
 				children: /* @__PURE__ */ jsx(Text, {
-					color: "red",
+					color: theme.colors.error,
 					children: error
 				})
 			}),
@@ -1922,25 +2447,177 @@ function SessionManager({ currentSessionId, onClose, onDelete, onNew, onOpen })
 	});
 }
 //#endregion
-//#region src/components/App.tsx
-function createSession(sessionId, model) {
-	return sessionId ? loadSession(sessionId) : createSession$1(model);
+//#region src/components/ThemeSettings.tsx
+function ThemeSettings({ currentTheme, onClose, onPreview, onSave }) {
+	const [selectedIndex, setSelectedIndex] = useState(() => {
+		const initialIndex = LIST$1.findIndex(({ id }) => id === currentTheme);
+		return initialIndex >= 0 ? initialIndex : 0;
+	});
+	const selectedTheme = useMemo(
+		// v8 ignore next
+		() => LIST$1[selectedIndex] ?? getTheme(),
+		[selectedIndex]
+	);
+	useEffect(() => {
+		onPreview(selectedTheme.id);
+	}, [onPreview, selectedTheme.id]);
+	useInput((input, key) => {
+		if (key.escape || key.ctrl && input === "c") {
+			onClose();
+			return;
+		}
+		if (key.upArrow) {
+			setSelectedIndex((current) => current === 0 ? LIST$1.length - 1 : current - 1);
+			return;
+		}
+		if (key.downArrow) {
+			setSelectedIndex((current) => current === LIST$1.length - 1 ? 0 : current + 1);
+			return;
+		}
+		if (key.return) onSave(selectedTheme.id);
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [
+				"Theme:",
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					color: selectedTheme.colors.accent,
+					children: selectedTheme.label
+				})
+			] }),
+			/* @__PURE__ */ jsx(Text, {
+				color: selectedTheme.colors.secondary,
+				children: selectedTheme.description
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				marginTop: 1,
+				children: LIST$1.map((theme, index) => {
+					const isSelected = index === selectedIndex;
+					return /* @__PURE__ */ jsxs(Text, {
+						color: isSelected ? selectedTheme.colors.accent : void 0,
+						children: [
+							isSelected ? "›" : " ",
+							" ",
+							theme.label
+						]
+					}, theme.id);
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				borderColor: selectedTheme.colors.border,
+				borderStyle: "round",
+				flexDirection: "column",
+				marginTop: 1,
+				paddingX: 1,
+				children: [
+					/* @__PURE__ */ jsxs(Text, {
+						color: selectedTheme.colors.status,
+						children: [HEADER_PREFIX, " Preview"]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: selectedTheme.colors.secondary,
+						children: "Markdown and code styling follow the selected theme."
+					}),
+					/* @__PURE__ */ jsxs(Text, { children: [
+						"Status accent:",
+						" ",
+						/* @__PURE__ */ jsx(Text, {
+							color: selectedTheme.colors.status,
+							children: "search enabled"
+						})
+					] }),
+					/* @__PURE__ */ jsx(CodeBlock, {
+						code: "const theme = 'preview';",
+						language: "ts",
+						role: "assistant",
+						theme: selectedTheme
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(SelectPromptHint, {
+					message: "Preview theme",
+					escapeLabel: "cancel and restore"
+				})
+			})
+		]
+	});
 }
-function App({ sessionId }) {
+//#endregion
+//#region src/components/App/constants.ts
+var SCREEN = /* @__PURE__ */ function(SCREEN) {
+	SCREEN["CHAT"] = "chat";
+	SCREEN["MODEL_MANAGER"] = "model-manager";
+	SCREEN["SEARCH_SETTINGS"] = "search-settings";
+	SCREEN["SESSION_MANAGER"] = "session-manager";
+	SCREEN["THEME_SETTINGS"] = "theme-settings";
+	return SCREEN;
+}({});
+//#endregion
+//#region src/components/App/hooks/useScreenRouter.ts
+function useScreenRouter() {
 	const { exit } = useApp();
-	const [appConfig, setConfig] = useState(() => loadConfig());
-	const [currentScreen, setScreen] = useState("chat");
-	const [mode, setMode] = useState(SAFE);
-	const [activeSession, setSession] = useState(() => createSession(sessionId, loadConfig().model));
-	const [isHeaderLoaded, setIsHeaderLoaded] = useState(false);
+	const [currentScreen, setScreen] = useState(SCREEN.CHAT);
+	return {
+		currentScreen,
+		setScreen,
+		handleClose: useCallback(() => {
+			setScreen(SCREEN.CHAT);
+		}, []),
+		handleCommand: useCallback((command, callbacks) => {
+			const { onCreateSession, onSetPreviewThemeId, model, theme } = callbacks;
+			switch (command) {
+				case "/session":
+					setScreen(SCREEN.SESSION_MANAGER);
+					break;
+				case "/model":
+					setScreen(SCREEN.MODEL_MANAGER);
+					break;
+				case "/search":
+					setScreen(SCREEN.SEARCH_SETTINGS);
+					break;
+				case "/theme":
+					onSetPreviewThemeId(theme);
+					setScreen(SCREEN.THEME_SETTINGS);
+					break;
+				case "/clear": {
+					resetSystemMessage();
+					const nextSession = onCreateSession(model);
+					setScreen(SCREEN.CHAT);
+					clear(nextSession.metadata.id);
+					break;
+				}
+				case "/exit":
+					exit();
+					break;
+			}
+		}, [exit])
+	};
+}
+//#endregion
+//#region src/components/App/hooks/useSessionManager.ts
+function useSessionManager({ sessionId, model, commandColor }) {
+	const [activeSession, setSession] = useState(() => sessionId ? loadSession(sessionId) : createSession(model));
 	const sessionRef = useRef(activeSession);
+	const commandColorRef = useRef(commandColor);
+	const modelRef = useRef(model);
 	useEffect(() => {
 		sessionRef.current = activeSession;
 	}, [activeSession]);
+	useEffect(() => {
+		commandColorRef.current = commandColor;
+	}, [commandColor]);
+	useEffect(() => {
+		modelRef.current = model;
+	}, [model]);
 	useEffect(() => {
 		return () => {
 			const currentSession = sessionRef.current;
-			if (!deleteSessionIfEmpty(currentSession.metadata.id) && currentSession.messages.length > 0) write(`Resume session: ${color(`code-ollama resume ${currentSession.metadata.id}`, "cyan")}\n`);
+			if (!deleteSessionIfEmpty(currentSession.metadata.id) && currentSession.messages.length > 0) write(`Resume session: ${color(`code-ollama resume ${currentSession.metadata.id}`, commandColorRef.current)}\n`);
 		};
 	}, []);
 	const setActiveSession = useCallback((nextSession) => {
@@ -1949,73 +2626,76 @@ function App({ sessionId }) {
 			return nextSession;
 		});
 	}, []);
-	const handleHeaderLoad = useCallback(() => {
-		setIsHeaderLoaded(true);
+	return {
+		activeSession,
+		setSession,
+		handleCreateSession: useCallback(() => {
+			const nextSession = createSession(modelRef.current);
+			setActiveSession(nextSession);
+			clear(nextSession.metadata.id);
+			return nextSession;
+		}, [setActiveSession]),
+		handleOpenSession: useCallback((sessionId) => {
+			if (sessionRef.current.metadata.id === sessionId) return false;
+			setActiveSession(loadSession(sessionId));
+			clear(sessionId);
+			return true;
+		}, [setActiveSession]),
+		handleDeleteSession: useCallback((sessionId) => {
+			deleteSession(sessionId);
+			setSession((current) => {
+				if (current.metadata.id !== sessionId) return current;
+				return createSession(modelRef.current);
+			});
+		}, []),
+		handleMessagesChange: useCallback((messages) => {
+			setSession((current) => {
+				const persistedMessages = messages.filter(({ content }) => content !== TURN_ABORTED_MESSAGE);
+				if (persistedMessages.length <= current.messages.length) return current;
+				let metadata = current.metadata;
+				for (const message of persistedMessages.slice(current.messages.length)) metadata = appendMessage(metadata.id, message, modelRef.current);
+				return {
+					metadata,
+					messages: persistedMessages
+				};
+			});
+		}, [])
+	};
+}
+//#endregion
+//#region src/components/App/hooks/useThemeSettings.ts
+function useThemeSettings({ currentTheme, onUpdateConfig, setScreen }) {
+	const [previewThemeId, setPreviewThemeId] = useState(null);
+	const activeTheme = getTheme(previewThemeId ?? currentTheme);
+	const handleThemePreview = useCallback((themeId) => {
+		setPreviewThemeId(themeId);
 	}, []);
-	const handleCreateSession = useCallback(() => {
-		const nextSession = createSession$1(appConfig.model);
-		setActiveSession(nextSession);
-		setScreen("chat");
-		clear(nextSession.metadata.id);
-		return nextSession;
-	}, [appConfig.model, setActiveSession]);
-	const handleOpenSession = useCallback((sessionId) => {
-		if (sessionRef.current.metadata.id === sessionId) {
-			setScreen("chat");
-			return;
-		}
-		setActiveSession(loadSession(sessionId));
-		setScreen("chat");
-		clear(sessionId);
-	}, [setActiveSession]);
-	const handleDeleteSession = useCallback((sessionId) => {
-		deleteSession(sessionId);
-		setSession((current) => {
-			if (current.metadata.id !== sessionId) return current;
-			return createSession$1(appConfig.model);
-		});
-		setScreen("session-manager");
-	}, [appConfig.model]);
-	const handleMessagesChange = useCallback((messages) => {
-		setSession((current) => {
-			const persistedMessages = messages.filter(({ content }) => content !== TURN_ABORTED_MESSAGE);
-			if (persistedMessages.length <= current.messages.length) return current;
-			let metadata = current.metadata;
-			for (const message of persistedMessages.slice(current.messages.length)) metadata = appendMessage(metadata.id, message, appConfig.model);
-			return {
-				metadata,
-				messages: persistedMessages
-			};
-		});
-	}, [appConfig.model]);
-	const handleCommand = useCallback((command) => {
-		switch (command) {
-			case "/session":
-				setScreen("session-manager");
-				break;
-			case "/model":
-				setScreen("model-picker");
-				break;
-			case "/search":
-				setScreen("search-settings");
-				break;
-			case "/clear": {
-				resetSystemMessage();
-				setScreen("chat");
-				const nextSession = createSession$1(appConfig.model);
-				setActiveSession(nextSession);
-				clear(nextSession.metadata.id);
-				break;
-			}
-			case "/exit":
-				exit();
-				break;
-		}
-	}, [
-		appConfig.model,
-		exit,
-		setActiveSession
-	]);
+	return {
+		activeTheme,
+		handleThemeClose: useCallback(() => {
+			setPreviewThemeId(null);
+			setScreen(SCREEN.CHAT);
+		}, [setScreen]),
+		handleThemePreview,
+		handleThemeSave: useCallback((themeId) => {
+			setPreviewThemeId(null);
+			onUpdateConfig({ theme: themeId });
+		}, [onUpdateConfig]),
+		setPreviewThemeId
+	};
+}
+//#endregion
+//#region src/components/App/App.tsx
+function App({ sessionId }) {
+	const [appConfig, setConfig] = useState(() => loadConfig());
+	const [mode, setMode] = useState(SAFE);
+	const [isHeaderLoaded, setIsHeaderLoaded] = useState(false);
+	const { currentScreen, setScreen, handleClose, handleCommand } = useScreenRouter();
+	const { activeSession, setSession, handleCreateSession, handleOpenSession, handleDeleteSession, handleMessagesChange } = useSessionManager({
+		sessionId,
+		model: appConfig.model,
+		commandColor: getTheme(appConfig.theme).colors.command
+	});
 	const handleUpdateConfig = useCallback((update) => {
 		setConfig((current) => ({
 			...current,
@@ -2027,10 +2707,15 @@ function App({ sessionId }) {
 			...current,
 			metadata: updateSessionModel(current.metadata.id, newModel)
 		}));
-		setScreen("chat");
-	}, []);
-	const handleClose = useCallback(() => {
-		setScreen("chat");
+		setScreen(SCREEN.CHAT);
+	}, [setScreen, setSession]);
+	const { activeTheme, handleThemeClose, handleThemePreview, handleThemeSave, setPreviewThemeId } = useThemeSettings({
+		currentTheme: appConfig.theme,
+		onUpdateConfig: handleUpdateConfig,
+		setScreen
+	});
+	const handleHeaderLoad = useCallback(() => {
+		setIsHeaderLoaded(true);
 	}, []);
 	const handleToggleMode = useCallback(() => {
 		setMode((mode) => {
@@ -2042,40 +2727,78 @@ function App({ sessionId }) {
 			}
 		});
 	}, []);
+	const handleChatCommand = useCallback((command) => {
+		handleCommand(command, {
+			model: appConfig.model,
+			theme: appConfig.theme,
+			onCreateSession: handleCreateSession,
+			onSetPreviewThemeId: setPreviewThemeId
+		});
+	}, [
+		appConfig.model,
+		appConfig.theme,
+		handleCommand,
+		handleCreateSession,
+		setPreviewThemeId
+	]);
+	const handleDeleteSessionAndStay = useCallback((sid) => {
+		handleDeleteSession(sid);
+		setScreen(SCREEN.SESSION_MANAGER);
+	}, [handleDeleteSession, setScreen]);
+	const handleOpenSessionAndNavigate = useCallback((sid) => {
+		handleOpenSession(sid);
+		setScreen(SCREEN.CHAT);
+	}, [handleOpenSession, setScreen]);
+	const handleCreateSessionAndNavigate = useCallback(() => {
+		handleCreateSession();
+		setScreen(SCREEN.CHAT);
+	}, [handleCreateSession, setScreen]);
 	let screenContent;
 	switch (currentScreen) {
-		case "model-picker":
-			screenContent = /* @__PURE__ */ jsx(ModelPicker, {
+		case SCREEN.MODEL_MANAGER:
+			screenContent = /* @__PURE__ */ jsx(ModelManager, {
 				currentModel: appConfig.model,
 				onSelect: handleUpdateConfig,
-				onClose: handleClose
+				onClose: handleClose,
+				theme: activeTheme
 			});
 			break;
-		case "search-settings":
+		case SCREEN.SEARCH_SETTINGS:
 			screenContent = /* @__PURE__ */ jsx(SearchSettings, {
 				currentUrl: appConfig.searxngBaseUrl,
 				onSave: handleUpdateConfig,
-				onClose: handleClose
+				onClose: handleClose,
+				theme: activeTheme
 			});
 			break;
-		case "session-manager":
+		case SCREEN.SESSION_MANAGER:
 			screenContent = /* @__PURE__ */ jsx(SessionManager, {
 				currentSessionId: activeSession.metadata.id,
 				onClose: handleClose,
-				onDelete: handleDeleteSession,
-				onNew: handleCreateSession,
-				onOpen: handleOpenSession
+				onDelete: handleDeleteSessionAndStay,
+				onNew: handleCreateSessionAndNavigate,
+				onOpen: handleOpenSessionAndNavigate,
+				theme: activeTheme
+			});
+			break;
+		case SCREEN.THEME_SETTINGS:
+			screenContent = /* @__PURE__ */ jsx(ThemeSettings, {
+				currentTheme: appConfig.theme,
+				onClose: handleThemeClose,
+				onPreview: handleThemePreview,
+				onSave: handleThemeSave
 			});
 			break;
-		case "chat":
+		case SCREEN.CHAT:
 			screenContent = /* @__PURE__ */ jsx(Chat, {
 				initialMessages: activeSession.messages,
 				model: appConfig.model,
-				onCommand: handleCommand,
+				onCommand: handleChatCommand,
 				onMessagesChange: handleMessagesChange,
 				mode,
 				onModeChange: setMode,
-				sessionId: activeSession.metadata.id
+				sessionId: activeSession.metadata.id,
+				theme: activeTheme
 			});
 			break;
 	}
@@ -2084,13 +2807,15 @@ function App({ sessionId }) {
 		children: [
 			/* @__PURE__ */ jsx(Header, {
 				model: appConfig.model,
-				onLoad: handleHeaderLoad
+				onLoad: handleHeaderLoad,
+				theme: activeTheme
 			}),
 			isHeaderLoaded && screenContent,
 			/* @__PURE__ */ jsx(Footer, {
 				mode,
 				model: appConfig.model,
-				onToggleMode: handleToggleMode
+				onToggleMode: handleToggleMode,
+				theme: activeTheme
 			})
 		]
 	});