0.9.2

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.2] - 2026-07-11
+
+### Added
+
+- 💬 **Helpful planning questions.** When a plan needs your input, Computer can now ask a few focused questions with clear choices and a recommended answer.
+
+### Changed
+
+- 🧠 **Each chat remembers its own choices.** Your selected model and chat options now stay with that conversation instead of carrying over from another one.
+- 🏠 **A more capable Home.** Open files from conversations while using Home, and keep those file tabs available as you move between tabs.
+- 🎨 **A more consistent look.** Your appearance choice now carries through to browsers, terminals, editors, previews, menus, and other everyday parts of the app.
+
 ## [0.9.1] - 2026-07-11
 
 ### Fixed

cptr/frontend/src/app.css

@@ -8,19 +8,19 @@
 	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
 	--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
 
-	/* Exact Open WebUI gray scale - pure neutral, zero chroma */
-	--color-gray-50: oklch(0.98 0 0);
-	--color-gray-100: oklch(0.94 0 0);
-	--color-gray-200: oklch(0.92 0 0);
-	--color-gray-300: oklch(0.85 0 0);
-	--color-gray-400: oklch(0.77 0 0);
-	--color-gray-500: oklch(0.69 0 0);
-	--color-gray-600: oklch(0.51 0 0);
-	--color-gray-700: oklch(0.42 0 0);
-	--color-gray-800: oklch(0.32 0 0);
-	--color-gray-850: oklch(0.27 0 0);
-	--color-gray-900: oklch(0.2 0 0);
-	--color-gray-950: oklch(0.16 0 0);
+	/* Keep Tailwind's neutral utilities on the selected appearance. */
+	--color-gray-50: color-mix(in oklab, var(--app-bg) 96%, var(--app-fg));
+	--color-gray-100: color-mix(in oklab, var(--app-bg) 92%, var(--app-fg));
+	--color-gray-200: color-mix(in oklab, var(--app-bg) 85%, var(--app-fg));
+	--color-gray-300: color-mix(in oklab, var(--app-bg) 75%, var(--app-fg));
+	--color-gray-400: color-mix(in oklab, var(--app-bg) 65%, var(--app-fg));
+	--color-gray-500: color-mix(in oklab, var(--app-bg) 55%, var(--app-fg));
+	--color-gray-600: color-mix(in oklab, var(--app-bg) 45%, var(--app-fg));
+	--color-gray-700: color-mix(in oklab, var(--app-bg) 35%, var(--app-fg));
+	--color-gray-800: color-mix(in oklab, var(--app-bg) 25%, var(--app-fg));
+	--color-gray-850: color-mix(in oklab, var(--app-bg) 20%, var(--app-fg));
+	--color-gray-900: color-mix(in oklab, var(--app-bg) 15%, var(--app-fg));
+	--color-gray-950: color-mix(in oklab, var(--app-bg) 10%, var(--app-fg));
 }
 
 :root {
@@ -76,19 +76,12 @@
 
 /* Scrollbar - Open WebUI style */
 ::-webkit-scrollbar-thumb {
-	--tw-border-opacity: 1;
-	background-color: rgba(215, 215, 215, 0.6);
-	border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+	background-color: color-mix(in oklab, var(--app-fg) 32%, transparent);
+	border-color: var(--app-bg);
 	border-radius: 624.9375rem;
 	border-width: 1px;
 }
 
-/* Dark theme scrollbar styles */
-.dark ::-webkit-scrollbar-thumb {
-	background-color: rgba(67, 67, 67, 0.6);
-	border-color: rgba(0, 0, 0, var(--tw-border-opacity));
-}
-
 ::-webkit-scrollbar {
 	height: 0.45rem;
 	width: 0.45rem;
@@ -293,20 +286,20 @@
 }
 
 .dark .cm-editor {
-	background-color: #000 !important;
+	background-color: var(--app-bg) !important;
 }
 
 .dark .cm-gutters {
-	background-color: #000 !important;
+	background-color: var(--app-bg) !important;
 	border: none !important;
 }
 
 .dark .cm-activeLine {
-	background-color: rgba(255, 255, 255, 0.04) !important;
+	background-color: var(--app-hover) !important;
 }
 
 .dark .cm-activeLineGutter {
-	background-color: rgba(255, 255, 255, 0.04) !important;
+	background-color: var(--app-hover) !important;
 }
 
 :not(.dark) .cm-gutters {
@@ -338,45 +331,33 @@
 .shimmer {
 	background: linear-gradient(
 		110deg,
-		#b4b4b4 0%,
-		#b4b4b4 43%,
-		#e8e8e8 50%,
-		#b4b4b4 57%,
-		#b4b4b4 100%
-	);
-	background-size: 200% 100%;
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	animation: shimmer 1.5s cubic-bezier(0.7, 0, 1, 0.4) infinite;
-	color: #b4b4b4;
-}
-
-.dark .shimmer {
-	background: linear-gradient(
-		110deg,
-		#9a9a9a 0%,
-		#9a9a9a 43%,
-		#5e5e5e 50%,
-		#9a9a9a 57%,
-		#9a9a9a 100%
+		var(--app-fg-subtle) 0%,
+		var(--app-fg-subtle) 43%,
+		var(--app-fg) 50%,
+		var(--app-fg-subtle) 57%,
+		var(--app-fg-subtle) 100%
 	);
 	background-size: 200% 100%;
 	background-clip: text;
 	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
 	animation: shimmer 1.5s cubic-bezier(0.7, 0, 1, 0.4) infinite;
-	color: #9a9a9a;
+	color: var(--app-fg-subtle);
 }
 
 /* Inline code (codespan), Open WebUI style */
 .codespan {
 	padding: 0.15rem 0.3rem;
 	font-size: 0.85em;
-	@apply font-mono rounded-md text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-800 mx-0.5;
+	@apply font-mono rounded-md mx-0.5;
+	background: var(--app-hover);
+	color: var(--app-fg);
 }
 
 /* Tippy tooltip theme */
 .tippy-box[data-theme~='cptr'] {
-	@apply rounded-lg bg-gray-950 text-xs border border-gray-900 shadow-xl;
+	@apply rounded-lg text-xs border shadow-xl;
+	background: var(--app-bg);
+	color: var(--app-fg);
+	border-color: var(--app-border);
 }

cptr/frontend/src/lib/apis/chat.ts

@@ -59,8 +59,10 @@ export interface SendMessageResult {
 	assistant_message?: ChatMessageRow;
 }
 
+export type ToolApprovalMode = 'ask' | 'auto' | 'full';
+
 export interface ChatSendParams {
-	tool_approval_mode?: string;
+	tool_approval_mode?: ToolApprovalMode;
 	plan_mode?: boolean;
 	request_params?: Record<string, unknown>;
 	voice_mode?: boolean;
@@ -104,6 +106,12 @@ export const updateChatTitle = (chatId: string, title: string) =>
 		body: JSON.stringify({ title })
 	});
 
+export const updateChatSettings = (chatId: string, modelId: string, params: ChatSendParams) =>
+	fetchJSON<{ ok: boolean }>(
+		`/api/chats/${chatId}/settings`,
+		jsonBody({ model_id: modelId, params })
+	);
+
 export const forkChat = (chatId: string, messageId?: string | null) =>
 	fetchJSON<{ ok: boolean; chat_id: string }>(
 		`/api/chats/${chatId}/fork`,
@@ -147,6 +155,18 @@ export const approveToolCall = (
 		jsonBody({ call_id: callId, approved })
 	);
 
+export const answerAskUser = (
+	chatId: string,
+	messageId: string,
+	callId: string,
+	answers: Record<string, string>,
+	timedOut = false
+) =>
+	fetchJSON(
+		`/api/chats/${chatId}/messages/${messageId}/answer`,
+		jsonBody({ call_id: callId, answers, timed_out: timedOut })
+	);
+
 export const cancelTask = (chatId: string, messageId: string) =>
 	fetchJSON(`/api/chats/${chatId}/messages/${messageId}/cancel`, { method: 'POST' });
 

cptr/frontend/src/lib/components/Admin/CreateBotModal.svelte

@@ -7,7 +7,8 @@
 	import Icon from '../Icon.svelte';
 	import DropdownMenu from '../DropdownMenu.svelte';
 	import ModelSelector from '../common/ModelSelector.svelte';
-	import { selectedModelId, workspaceList } from '$lib/stores';
+	import { workspaceList } from '$lib/stores';
+	import { defaultModel } from '$lib/stores/chat';
 	import { getPathDisplayName } from '$lib/utils/paths';
 	import { createBot, updateBot, verifyBotToken, type BotData, type BotForm } from '$lib/apis/bots';
 	import { toast } from 'svelte-sonner';
@@ -25,7 +26,7 @@
 	let platform = $state(bot?.platform || 'telegram');
 	let name = $state(bot?.name || '');
 	let token = $state('');
-	let modelId = $state(bot?.model_id || $selectedModelId || '');
+	let modelId = $state(bot?.model_id || $defaultModel || '');
 	let workspace = $state(bot?.workspace || '');
 	let allowedSenders = $state(bot?.allowed_senders?.join(', ') || '');
 	let saving = $state(false);

cptr/frontend/src/lib/components/BrowserPreview.svelte

@@ -416,7 +416,7 @@
 		height: 100%;
 		border: 0;
 		display: block;
-		background: white;
+		background: var(--app-bg);
 	}
 	.preview-error {
 		height: 100%;

cptr/frontend/src/lib/components/ChromeBrowser.svelte

@@ -699,7 +699,7 @@
 		width: 100%;
 		height: 100%;
 		display: block;
-		background: white;
+		background: var(--app-bg);
 	}
 	.chrome-container {
 		position: relative;

cptr/frontend/src/lib/components/FileEditor.svelte

@@ -955,16 +955,17 @@
 				'&': {
 					height: '100%',
 					fontSize: '0.8125rem',
-					backgroundColor: dark ? '#000' : '#ffffff'
+					backgroundColor: 'var(--app-bg)',
+					color: 'var(--app-fg)'
 				},
 				'.cm-scroller': { fontFamily: '"JetBrains Mono", "Fira Code", ui-monospace, monospace' },
 				'.cm-gutters': {
-					backgroundColor: dark ? '#000' : '#ffffff',
-					color: dark ? '#555' : '#999',
+					backgroundColor: 'var(--app-bg)',
+					color: 'var(--app-fg-subtle)',
 					border: 'none'
 				},
-				'.cm-activeLineGutter': { backgroundColor: dark ? '#1a1a1a' : '#f3f4f6' },
-				'.cm-activeLine': { backgroundColor: dark ? '#1a1a1a' : '#f9fafb' },
+				'.cm-activeLineGutter': { backgroundColor: 'var(--app-hover)' },
+				'.cm-activeLine': { backgroundColor: 'var(--app-hover)' },
 				'.cm-lineNumbers .cm-gutterElement.cm-git-line-added': {
 					boxShadow: `inset 0.125rem 0 0 ${dark ? 'rgba(52, 211, 153, 0.75)' : 'rgba(5, 150, 105, 0.65)'}`
 				},
@@ -1306,8 +1307,8 @@
 		flex-shrink: 0;
 	}
 
-	:global(.dark) .toolbar {
-		border-bottom-color: rgba(255, 255, 255, 0.06);
+	.toolbar {
+		border-bottom-color: var(--app-border);
 	}
 
 	.toolbar-left {
@@ -1353,7 +1354,7 @@
 	}
 
 	:global(.dark) .file-name {
-		color: var(--color-gray-300);
+		color: var(--app-fg);
 	}
 
 	.file-git-stats {
@@ -1436,7 +1437,7 @@
 	}
 
 	:global(.dark) .toolbar-btn.active {
-		color: white;
+		color: var(--app-fg);
 	}
 
 	.editor-area {
@@ -1463,7 +1464,7 @@
 		max-width: 100%;
 		max-height: 100%;
 		border-radius: 0.5rem;
-		background: #000;
+		background: var(--app-bg);
 	}
 
 	.media-container audio {

cptr/frontend/src/lib/components/GitBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { activeWorkspace, addWorkspace, openFileTab, selectedModelId } from '$lib/stores';
+	import { activeWorkspace, addWorkspace, openFileTab } from '$lib/stores';
+	import { defaultModel } from '$lib/stores/chat';
 	import {
 		getGitLog,
 		getGitDiff,
@@ -382,7 +383,7 @@
 		if (!stagedFiles.length || generatingCommitMessage) return;
 		generatingCommitMessage = true;
 		try {
-			const message = await generateGitCommitMessage(workspacePath, $selectedModelId || undefined);
+			const message = await generateGitCommitMessage(workspacePath, $defaultModel || undefined);
 			commitSummary = message.summary;
 			commitDescription = message.description;
 		} catch (e) {
@@ -1498,7 +1499,8 @@
 									{#each fileDiff as df}
 										{#if fileDiff.length > 1}
 											<div
-												class="px-2 py-1 text-[0.625rem] text-gray-500 dark:text-gray-400 bg-white dark:bg-[#1a1a1a] border-b border-gray-100 dark:border-white/4 sticky top-0 z-10 font-medium"
+											class="px-2 py-1 text-[0.625rem] text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-white/4 sticky top-0 z-10 font-medium"
+											style="background: var(--app-bg); border-color: var(--app-border);"
 											>
 												{df.path}
 											</div>
@@ -1714,6 +1716,6 @@
 
 	.git-resize-handle:hover,
 	.git-resize-handle.active {
-		background: rgba(150, 150, 150, 0.12);
+		background: var(--app-active);
 	}
 </style>

cptr/frontend/src/lib/components/GroupTabBar.svelte

@@ -138,7 +138,7 @@
 	}
 
 	function handleContextMenu(e: MouseEvent, tab: Tab) {
-		if (!isWideScreen) return;
+		if (!isWideScreen || tab.permanent) return;
 		e.preventDefault();
 		contextMenu = { tab, x: e.clientX, y: e.clientY };
 	}

cptr/frontend/src/lib/components/KeyPill.svelte

@@ -9,6 +9,13 @@
 </script>
 
 <span
-	class="inline-flex items-center justify-center h-[1.125rem] px-[0.3125rem] rounded-full text-[0.625rem] font-medium leading-none bg-[#e8e8e8] text-[#555] dark:bg-[#1e1e1e] dark:text-[#999] {className}"
+	class="key-pill inline-flex items-center justify-center h-[1.125rem] px-[0.3125rem] rounded-full text-[0.625rem] font-medium leading-none {className}"
 	>{text}</span
 >
+
+<style>
+	.key-pill {
+		background: var(--app-hover);
+		color: var(--app-fg-muted);
+	}
+</style>