code-ollama 0.15.1 → 0.17.0

package/dist/assets/{tui-CSRbnCod.js → tui-CCHcdC7V.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 PLAN_GENERATION_INSTRUCTION, C as withSystemMessage, D as ASSISTANT, E as getTheme, F as APPROVE, I as REJECT, L as VERSION, M as LABEL, N as PLAN, O as SYSTEM, P as SAFE, R as LIST, S as resetSystemMessage, T as LIST$1, _ 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 AUTO, k as USER, l as createSession, 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 { readdirSync } from "node:fs";
 import { homedir } from "node:os";
 import { join, relative } from "node:path";
@@ -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]);
@@ -702,7 +631,7 @@ function ToolApproval({ toolCall, onDecision }) {
 			onCancel: handleEscape,
 			children: [
 				/* @__PURE__ */ jsx(Text, {
-					color: "yellow",
+					color: theme.colors.warning,
 					children: "Tool requires approval ⚠️ "
 				}),
 				/* @__PURE__ */ jsxs(Box, {
@@ -734,16 +663,6 @@ function ToolApproval({ toolCall, onDecision }) {
 	});
 }
 //#endregion
-//#region src/components/Chat/constants.ts
-var ACTION_NOT_PERFORMED = "The requested action was NOT performed";
-var PLAN_CHECKLIST_REMINDER = "Then display the execution plan as an unchecked Markdown checklist only";
-var PLAN_EXECUTION_REMINDER = `Do not claim success and do not call ${Array.from(WRITE_TOOLS).join(", ")} until the user approves execution`;
-var INTERRUPT_REASON = /* @__PURE__ */ function(INTERRUPT_REASON) {
-	INTERRUPT_REASON["INTERRUPTED"] = "interrupted";
-	INTERRUPT_REASON["REJECTED"] = "rejected";
-	return INTERRUPT_REASON;
-}({});
-//#endregion
 //#region src/components/TextInput/TextInput.tsx
 function buildLineSegments(displayValue, cursorPosition, width) {
 	const safeWidth = Math.max(1, width);
@@ -1043,17 +962,28 @@ function FileSuggestions({ input, isDisabled = false, onChange, onSelect }) {
 	});
 }
 //#endregion
-//#region src/components/Chat/Input.tsx
+//#region src/components/Chat/ChatInput.tsx
 function hasFileSuggestionQuery(input) {
 	return /(^|.)@\S+/.test(input);
 }
-function Input({ isDisabled = false, onInterrupt, onSubmit }) {
+function ChatInput({ history: sessionHistory, isDisabled = false, onInterrupt, onSubmit }) {
 	const { exit } = useApp();
+	const [history, setHistory] = useState(sessionHistory);
+	const [historyIndex, setHistoryIndex] = useState(null);
 	const [input, setInput] = useState("");
 	const [cursorPosition, setCursorPosition] = useState(void 0);
 	const fileSuggestionRef = useRef(null);
+	useEffect(() => {
+		setHistory(sessionHistory);
+		setHistoryIndex(null);
+		setInput("");
+		setCursorPosition(void 0);
+		fileSuggestionRef.current = null;
+	}, [sessionHistory]);
 	const resetInput = useCallback(() => {
 		setInput("");
+		setCursorPosition(void 0);
+		setHistoryIndex(null);
 	}, []);
 	const handleSelectFileSuggestion = useCallback((nextInput) => {
 		setInput(nextInput.value);
@@ -1077,15 +1007,58 @@ function Input({ isDisabled = false, onInterrupt, onSubmit }) {
 			};
 		} else fileSuggestionRef.current = null;
 	}, [input]);
+	const handleInputChange = useCallback((nextInput) => {
+		setInput(nextInput);
+		setHistoryIndex(null);
+	}, []);
 	const submitAndReset = useCallback((input) => {
 		const trimmedInput = input.trim();
 		if (!trimmedInput) return;
 		onSubmit(trimmedInput);
+		if (!trimmedInput.startsWith("/")) setHistory((previousHistory) => [...previousHistory, trimmedInput]);
 		resetInput();
 		fileSuggestionRef.current = null;
 	}, [onSubmit, resetInput]);
 	const showCommandMenu = input.startsWith("/");
 	const showFileSuggestions = !showCommandMenu && hasFileSuggestionQuery(input);
+	const handleHistoryNavigation = useCallback((direction) => {
+		if (!history.length || showFileSuggestions) return;
+		if (direction === "up") {
+			if (historyIndex === null) {
+				if (input) return;
+				const nextIndex = history.length - 1;
+				const nextInput = history[nextIndex];
+				setHistoryIndex(nextIndex);
+				setInput(nextInput);
+				setCursorPosition(nextInput.length);
+				return;
+			}
+			if (historyIndex === 0) return;
+			const nextIndex = historyIndex - 1;
+			const nextInput = history[nextIndex];
+			setHistoryIndex(nextIndex);
+			setInput(nextInput);
+			setCursorPosition(nextInput.length);
+			return;
+		}
+		if (historyIndex === null) return;
+		if (historyIndex === history.length - 1) {
+			setHistoryIndex(null);
+			setInput("");
+			setCursorPosition(0);
+			return;
+		}
+		const nextIndex = historyIndex + 1;
+		const nextInput = history[nextIndex];
+		setHistoryIndex(nextIndex);
+		setInput(nextInput);
+		setCursorPosition(nextInput.length);
+	}, [
+		history,
+		historyIndex,
+		input,
+		showFileSuggestions
+	]);
 	const handleSubmitText = useCallback((input) => {
 		if (input.startsWith("/")) return;
 		if (hasFileSuggestionQuery(input)) {
@@ -1097,8 +1070,8 @@ function Input({ isDisabled = false, onInterrupt, onSubmit }) {
 	const handleSubmitCommand = useCallback((input) => {
 		if (LIST.find(({ name }) => name === input)) submitAndReset(input);
 	}, [submitAndReset]);
-	useInput((_input, key) => {
-		const isCtrlC = key.ctrl && _input === "c";
+	useInput((inputKey, key) => {
+		const isCtrlC = key.ctrl && inputKey === "c";
 		if (isDisabled) {
 			if (key.escape || isCtrlC) onInterrupt?.();
 			return;
@@ -1110,6 +1083,11 @@ function Input({ isDisabled = false, onInterrupt, onSubmit }) {
 			}
 			exit();
 		}
+		if (key.upArrow) {
+			handleHistoryNavigation("up");
+			return;
+		}
+		if (key.downArrow) handleHistoryNavigation("down");
 	});
 	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
@@ -1119,7 +1097,7 @@ function Input({ isDisabled = false, onInterrupt, onSubmit }) {
 				isDisabled,
 				cursorPosition,
 				wrapIndent: 2,
-				onChange: setInput,
+				onChange: handleInputChange,
 				onSubmit: handleSubmitText,
 				placeholder: "Ask anything... (/ commands, @ files)"
 			})] }),
@@ -1137,6 +1115,16 @@ function Input({ isDisabled = false, onInterrupt, onSubmit }) {
 	});
 }
 //#endregion
+//#region src/components/Chat/constants.ts
+var ACTION_NOT_PERFORMED = "The requested action was NOT performed";
+var PLAN_CHECKLIST_REMINDER = "Then display the execution plan as an unchecked Markdown checklist only";
+var PLAN_EXECUTION_REMINDER = `Do not claim success and do not call ${Array.from(WRITE_TOOLS).join(", ")} until the user approves execution`;
+var INTERRUPT_REASON = /* @__PURE__ */ function(INTERRUPT_REASON) {
+	INTERRUPT_REASON["INTERRUPTED"] = "interrupted";
+	INTERRUPT_REASON["REJECTED"] = "rejected";
+	return INTERRUPT_REASON;
+}({});
+//#endregion
 //#region src/components/Chat/plan.ts
 function hasExecutablePlan(content) {
 	return content.split("\n").some((line) => {
@@ -1146,8 +1134,9 @@ 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);
 	const [streamingMessage, setStreamingMessage] = useState(null);
 	const [isLoading, setIsLoading] = useState(false);
@@ -1262,13 +1251,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 {
@@ -1278,7 +1267,8 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 	}, [
 		buildToolResultMessage,
 		model,
-		mode
+		mode,
+		theme
 	]);
 	const processStreamReadOnly = useCallback(async (currentMessages) => {
 		const controller = new AbortController();
@@ -1334,7 +1324,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,
@@ -1375,7 +1365,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 {
@@ -1385,7 +1375,8 @@ function Chat({ initialMessages, model, onCommand, onMessagesChange, mode, onMod
 	}, [
 		buildPlanModeCorrectionMessage,
 		buildToolResultMessage,
-		model
+		model,
+		theme
 	]);
 	const handlePlanApproval = useCallback(async (mode) => {
 		// v8 ignore next
@@ -1477,26 +1468,30 @@ 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",
+					color: theme.colors.error,
 					children: interruptReason === INTERRUPT_REASON.REJECTED ? "❗ Tool call rejected." : "❗ Execution interrupted."
 				})
 			}),
 			!pendingPlan && !pendingToolCall && /* @__PURE__ */ jsx(Box, {
 				marginTop: 1,
-				children: /* @__PURE__ */ jsx(Input, {
+				children: /* @__PURE__ */ jsx(ChatInput, {
+					history,
 					isDisabled: isLoading,
 					onInterrupt: handleInterrupt,
 					onSubmit: handleSubmit
@@ -1507,29 +1502,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)",
@@ -1537,7 +1534,7 @@ function Footer({ mode, model, onToggleMode }) {
 				"❖",
 				" Model: ",
 				/* @__PURE__ */ jsx(Text, {
-					color: "cyan",
+					color: theme.colors.model,
 					children: model
 				})
 			]
@@ -1550,7 +1547,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();
@@ -1566,9 +1563,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,
 						")"
 					]
@@ -1577,21 +1576,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 switch"]
 						})
 					]
 				}),
 				/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+					color: theme.colors.secondary,
 					dimColor: true,
 					children: "directory:".padEnd(11)
 				}), /* @__PURE__ */ jsx(Text, { children: directory })] })
@@ -1601,7 +1603,7 @@ function Header({ model, onLoad }) {
 }
 //#endregion
 //#region src/components/ModelPicker.tsx
-function ModelPicker({ currentModel, onSelect, onClose }) {
+function ModelPicker({ currentModel, onSelect, onClose, theme = getTheme() }) {
 	const [options, setOptions] = useState([]);
 	const [error, setError] = useState(null);
 	const handleChange = useCallback((model) => {
@@ -1632,7 +1634,7 @@ function ModelPicker({ currentModel, onSelect, onClose }) {
 		load();
 	}, [currentModel]);
 	if (error) return /* @__PURE__ */ jsxs(Text, {
-		color: "red",
+		color: theme.colors.error,
 		children: ["Error loading models: ", error]
 	});
 	if (!options.length) return /* @__PURE__ */ jsx(Spinner, { label: "Loading models..." });
@@ -1646,7 +1648,7 @@ function ModelPicker({ currentModel, onSelect, onClose }) {
 }
 //#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);
@@ -1718,10 +1720,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."
 			})
@@ -1732,10 +1735,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" })
 		]
@@ -1762,7 +1769,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);
@@ -1848,7 +1855,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
 				})
 			}),
@@ -1861,25 +1868,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_PICKER"] = "model-picker";
+	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_PICKER);
+					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) => {
@@ -1888,73 +2047,81 @@ function App({ sessionId }) {
 			return nextSession;
 		});
 	}, []);
-	const handleHeaderLoad = useCallback(() => {
-		setIsHeaderLoaded(true);
+	return {
+		activeSession,
+		sessionRef,
+		setActiveSession,
+		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 activeThemeId = previewThemeId ?? currentTheme;
+	const activeTheme = getTheme(activeThemeId);
+	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,
+		activeThemeId,
+		handleThemeClose: useCallback(() => {
+			setPreviewThemeId(null);
+			setScreen(SCREEN.CHAT);
+		}, [setScreen]),
+		handleThemePreview,
+		handleThemeSave: useCallback((themeId) => {
+			setPreviewThemeId(null);
+			onUpdateConfig({ theme: themeId });
+		}, [onUpdateConfig]),
+		previewThemeId,
+		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,
@@ -1966,10 +2133,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) => {
@@ -1981,40 +2153,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":
+		case SCREEN.MODEL_PICKER:
 			screenContent = /* @__PURE__ */ jsx(ModelPicker, {
 				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;
 	}
@@ -2023,13 +2233,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
 			})
 		]
 	});