windmill-components 1.558.3 → 1.596.0

package/package/components/copilot/chat/AIChatManager.svelte.js

@@ -1,8 +1,9 @@
 import { flowTools, prepareFlowSystemMessage, prepareFlowUserMessage } from './flow/core';
+import { getAppTools, prepareAppSystemMessage, prepareAppUserMessage } from './app/core';
 import ContextManager from './ContextManager.svelte';
 import HistoryManager from './HistoryManager.svelte';
 import {} from './shared';
-import { INLINE_CHAT_SYSTEM_PROMPT, prepareScriptSystemMessage, prepareScriptTools } from './script/core';
+import { prepareInlineChatSystemPrompt, prepareScriptSystemMessage, prepareScriptTools } from './script/core';
 import { navigatorTools, prepareNavigatorSystemMessage } from './navigator/core';
 import { loadApiTools } from './api/apiTools';
 import { prepareScriptUserMessage } from './script/core';
@@ -12,13 +13,13 @@ import { getCompletion, getModelContextWindow, parseOpenAICompletion } from '../
 import { dfs } from '../../flows/previousResults';
 import { getStringError } from './utils';
 import { untrack } from 'svelte';
-import { get } from 'svelte/store';
 import {} from '../../../stores';
 import { askTools, prepareAskSystemMessage, prepareAskUserMessage } from './ask/core';
 import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.svelte';
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 import { getAnthropicCompletion, parseAnthropicCompletion } from './anthropic';
-import { copilotInfo, getCurrentModel } from '../../../aiStore';
+import { getOpenAIResponsesCompletion, parseOpenAIResponsesCompletion } from './openai-responses';
+import { getCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
 // If the estimated token usage is greater than the model context window - the threshold, we delete the oldest message
 const MAX_TOKENS_THRESHOLD_PERCENTAGE = 0.05;
 const MAX_TOKENS_HARD_LIMIT = 5000;
@@ -26,18 +27,18 @@ export var AIMode;
 (function (AIMode) {
     AIMode["SCRIPT"] = "script";
     AIMode["FLOW"] = "flow";
+    AIMode["APP"] = "app";
     AIMode["NAVIGATOR"] = "navigator";
     AIMode["API"] = "API";
     AIMode["ASK"] = "ask";
 })(AIMode || (AIMode = {}));
 class AIChatManager {
-    NAVIGATION_SYSTEM_PROMPT = `
-	CONSIDERATIONS:
-	 - You are provided with a tool to switch to navigation mode, only use it when you are sure that the user is asking you to navigate the application, help them find something or fetch data from the API. Do not use it otherwise.
-	`;
     contextManager = new ContextManager();
     historyManager = new HistoryManager();
     abortController = undefined;
+    inlineAbortController = undefined;
+    // Flag to skip Responses API if it's not available (e.g., Azure region doesn't support it)
+    skipResponsesApi = false;
     mode = $state(AIMode.NAVIGATOR);
     isOpen = $derived(chatState.size > 0);
     savedSize = $state(0);
@@ -59,6 +60,7 @@ class AIChatManager {
     scriptEditorApplyCode = $state(undefined);
     scriptEditorShowDiffMode = $state(undefined);
     flowAiChatHelpers = $state(undefined);
+    appAiChatHelpers = $state(undefined);
     pendingNewCode = $state(undefined);
     apiTools = $state([]);
     aiChatInput = $state(null);
@@ -66,6 +68,7 @@ class AIChatManager {
     allowedModes = $derived({
         script: this.flowAiChatHelpers === undefined && this.scriptEditorOptions !== undefined,
         flow: this.flowAiChatHelpers !== undefined,
+        app: this.appAiChatHelpers !== undefined,
         navigator: true,
         ask: true,
         API: true
@@ -153,13 +156,13 @@ class AIChatManager {
         this.mode = mode;
         this.pendingPrompt = pendingPrompt ?? '';
         if (mode === AIMode.SCRIPT) {
-            const customPrompt = get(copilotInfo).customPrompts?.[mode];
+            const customPrompt = getCombinedCustomPrompt(mode);
             const currentModel = getCurrentModel();
-            this.systemMessage = prepareScriptSystemMessage(currentModel, customPrompt);
-            this.systemMessage.content = this.NAVIGATION_SYSTEM_PROMPT + this.systemMessage.content;
-            const context = this.contextManager.getSelectedContext();
             const lang = this.scriptEditorOptions?.lang ?? 'bun';
-            this.tools = [this.changeModeTool, ...prepareScriptTools(currentModel, lang, context)];
+            const context = this.contextManager.getSelectedContext();
+            this.systemMessage = prepareScriptSystemMessage(currentModel, lang, {}, customPrompt);
+            this.systemMessage.content = this.systemMessage.content;
+            this.tools = [...prepareScriptTools(currentModel, lang, context)];
             this.helpers = {
                 getScriptOptions: () => {
                     return {
@@ -181,30 +184,36 @@ class AIChatManager {
             }
         }
         else if (mode === AIMode.FLOW) {
-            const customPrompt = get(copilotInfo).customPrompts?.[mode];
+            const customPrompt = getCombinedCustomPrompt(mode);
             this.systemMessage = prepareFlowSystemMessage(customPrompt);
-            this.systemMessage.content = this.NAVIGATION_SYSTEM_PROMPT + this.systemMessage.content;
-            this.tools = [this.changeModeTool, ...flowTools];
+            this.systemMessage.content = this.systemMessage.content;
+            this.tools = [...flowTools];
             this.helpers = this.flowAiChatHelpers;
         }
         else if (mode === AIMode.NAVIGATOR) {
-            const customPrompt = get(copilotInfo).customPrompts?.[mode];
+            const customPrompt = getCombinedCustomPrompt(mode);
             this.systemMessage = prepareNavigatorSystemMessage(customPrompt);
             this.tools = [this.changeModeTool, ...navigatorTools];
             this.helpers = {};
         }
         else if (mode === AIMode.ASK) {
-            const customPrompt = get(copilotInfo).customPrompts?.[mode];
+            const customPrompt = getCombinedCustomPrompt(mode);
             this.systemMessage = prepareAskSystemMessage(customPrompt);
             this.tools = [...askTools];
             this.helpers = {};
         }
         else if (mode === AIMode.API) {
-            const customPrompt = get(copilotInfo).customPrompts?.[mode];
+            const customPrompt = getCombinedCustomPrompt(mode);
             this.systemMessage = prepareApiSystemMessage(customPrompt);
             this.tools = [...this.apiTools];
             this.helpers = {};
         }
+        else if (mode === AIMode.APP) {
+            const customPrompt = getCombinedCustomPrompt(mode);
+            this.systemMessage = prepareAppSystemMessage(customPrompt);
+            this.tools = [...getAppTools()];
+            this.helpers = this.appAiChatHelpers;
+        }
     }
     canApplyCode = $derived(this.allowedModes.script && this.mode === AIMode.SCRIPT);
     changeModeTool = {
@@ -312,7 +321,7 @@ class AIChatManager {
                 let pendingUserMessage = undefined;
                 if (pendingPrompt) {
                     if (this.mode === AIMode.SCRIPT) {
-                        pendingUserMessage = prepareScriptUserMessage(pendingPrompt, this.scriptEditorOptions?.lang, this.contextManager.getSelectedContext());
+                        pendingUserMessage = prepareScriptUserMessage(pendingPrompt, this.contextManager.getSelectedContext());
                     }
                     else if (this.mode === AIMode.FLOW) {
                         pendingUserMessage = prepareFlowUserMessage(pendingPrompt, this.flowAiChatHelpers.getFlowAndSelectedId());
@@ -323,19 +332,70 @@ class AIChatManager {
                     this.pendingPrompt = '';
                 }
                 const model = getCurrentModel();
-                const completionFn = model.provider === 'anthropic' ? getAnthropicCompletion : getCompletion;
-                const parseFn = model.provider === 'anthropic' ? parseAnthropicCompletion : parseOpenAICompletion;
-                const completion = await completionFn([systemMessage, ...messages, ...(pendingUserMessage ? [pendingUserMessage] : [])], abortController, tools.map((t) => t.def));
-                if (completion) {
-                    const continueCompletion = await parseFn(completion, callbacks, messages, addedMessages, tools, helpers);
-                    if (!continueCompletion) {
-                        break;
+                const isOpenAI = model.provider === 'openai' || model.provider === 'azure_openai';
+                const isAnthropic = model.provider === 'anthropic';
+                const messageParams = [
+                    systemMessage,
+                    ...messages,
+                    ...(pendingUserMessage ? [pendingUserMessage] : [])
+                ];
+                const toolDefs = tools.map((t) => t.def);
+                // For OpenAI/Azure, try Responses API first, fallback to Completions API
+                if (isOpenAI) {
+                    let useCompletionsApi = this.skipResponsesApi;
+                    if (!this.skipResponsesApi) {
+                        try {
+                            const completion = await getOpenAIResponsesCompletion(messageParams, abortController, toolDefs);
+                            const continueCompletion = await parseOpenAIResponsesCompletion(completion, callbacks, messages, addedMessages, tools, helpers);
+                            if (!continueCompletion) {
+                                break;
+                            }
+                        }
+                        catch (err) {
+                            console.warn('OpenAI Responses API failed, falling back to Completions API:', err);
+                            // If the error indicates Responses API is not available in this region, skip it for future requests
+                            const errorMessage = err instanceof Error ? err.message : String(err);
+                            if (errorMessage.includes('Responses API is not enabled')) {
+                                this.skipResponsesApi = true;
+                            }
+                            useCompletionsApi = true;
+                        }
+                    }
+                    // Use Completions API if Responses API is not available or failed
+                    if (useCompletionsApi) {
+                        const completion = await getCompletion(messageParams, abortController, toolDefs, {
+                            forceCompletions: true
+                        });
+                        const continueCompletion = await parseOpenAICompletion(completion, callbacks, messages, addedMessages, tools, helpers);
+                        if (!continueCompletion) {
+                            break;
+                        }
+                    }
+                }
+                else if (isAnthropic) {
+                    const completion = await getAnthropicCompletion(messageParams, abortController, toolDefs);
+                    if (completion) {
+                        const continueCompletion = await parseAnthropicCompletion(completion, callbacks, messages, addedMessages, tools, helpers, abortController);
+                        if (!continueCompletion) {
+                            break;
+                        }
+                    }
+                }
+                else {
+                    const completion = await getCompletion(messageParams, abortController, toolDefs);
+                    if (completion) {
+                        const continueCompletion = await parseOpenAICompletion(completion, callbacks, messages, addedMessages, tools, helpers);
+                        if (!continueCompletion) {
+                            break;
+                        }
                     }
                 }
             }
             return addedMessages;
         }
         catch (err) {
+            console.log('chatRequest error', err);
+            console.error('chatRequest error', err);
             callbacks.onMessageEnd();
             if (!abortController.signal.aborted) {
                 throw err;
@@ -347,7 +407,8 @@ class AIChatManager {
         if (!instructions.trim()) {
             throw new Error('Instructions are required');
         }
-        this.abortController = new AbortController();
+        // Use a separate abort controller for inline requests to avoid interfering with main chat
+        this.inlineAbortController = new AbortController();
         const lang = this.scriptEditorOptions?.lang ?? 'bun';
         const selectedContext = [...this.contextManager.getSelectedContext()];
         const startLine = selection.startLineNumber;
@@ -362,23 +423,22 @@ class AIChatManager {
         });
         const systemMessage = {
             role: 'system',
-            content: INLINE_CHAT_SYSTEM_PROMPT
+            content: prepareInlineChatSystemPrompt(lang)
         };
         let reply = '';
         try {
-            const userMessage = prepareScriptUserMessage(instructions, lang, selectedContext, {
-                isPreprocessor: false
-            });
+            const userMessage = prepareScriptUserMessage(instructions, selectedContext);
             const messages = [userMessage];
             const params = {
                 messages,
-                abortController: this.abortController,
+                abortController: this.inlineAbortController,
                 callbacks: {
                     onNewToken: (token) => {
                         reply += token;
                     },
                     onMessageEnd: () => { },
-                    setToolStatus: () => { }
+                    setToolStatus: () => { },
+                    removeToolStatus: () => { }
                 },
                 systemMessage
             };
@@ -410,7 +470,7 @@ class AIChatManager {
         }
         catch (error) {
             // if abort controller is aborted, don't throw an error
-            if (this.abortController?.signal.aborted) {
+            if (this.inlineAbortController?.signal.aborted) {
                 return;
             }
             console.error('Unexpected error in sendInlineRequest:', error);
@@ -443,9 +503,11 @@ class AIChatManager {
             }
             let snapshot = undefined;
             if (this.mode === AIMode.FLOW) {
-                this.flowAiChatHelpers.rejectAllModuleActions();
-                snapshot = this.flowAiChatHelpers.getFlowAndSelectedId().flow;
-                this.flowAiChatHelpers.setLastSnapshot(snapshot);
+                snapshot = { type: 'flow', value: this.flowAiChatHelpers.getFlowAndSelectedId().flow };
+                this.flowAiChatHelpers.setSnapshot(snapshot.value);
+            }
+            else if (this.mode === AIMode.APP) {
+                snapshot = { type: 'app', value: this.appAiChatHelpers.snapshot() };
             }
             this.displayMessages = [
                 ...this.displayMessages,
@@ -464,8 +526,6 @@ class AIChatManager {
             if (this.mode === AIMode.SCRIPT && !this.scriptEditorOptions && !options.lang) {
                 throw new Error('No script options passed');
             }
-            const lang = this.scriptEditorOptions?.lang ?? options.lang ?? 'bun';
-            const isPreprocessor = this.scriptEditorOptions?.path === 'preprocessor' || options.isPreprocessor;
             let userMessage = {
                 role: 'user',
                 content: ''
@@ -481,13 +541,14 @@ class AIChatManager {
                     userMessage = prepareAskUserMessage(oldInstructions);
                     break;
                 case AIMode.SCRIPT:
-                    userMessage = prepareScriptUserMessage(oldInstructions, lang, oldSelectedContext, {
-                        isPreprocessor
-                    });
+                    userMessage = prepareScriptUserMessage(oldInstructions, oldSelectedContext);
                     break;
                 case AIMode.API:
                     userMessage = prepareApiUserMessage(oldInstructions);
                     break;
+                case AIMode.APP:
+                    userMessage = prepareAppUserMessage(oldInstructions, this.appAiChatHelpers?.getSelectedContext());
+                    break;
             }
             this.messages.push(userMessage);
             await this.historyManager.saveChat(this.displayMessages, this.messages);
@@ -540,6 +601,13 @@ class AIChatManager {
                             this.displayMessages.push(newMessage);
                         }
                     },
+                    removeToolStatus: (id) => {
+                        const existingIdx = this.displayMessages.findIndex((m) => m.role === 'tool' && m.tool_call_id === id);
+                        if (existingIdx !== -1) {
+                            this.displayMessages.splice(existingIdx, 1);
+                            this.displayMessages = [...this.displayMessages];
+                        }
+                    },
                     requestConfirmation: this.requestConfirmation
                 }
             };
@@ -566,12 +634,37 @@ class AIChatManager {
             this.loading = false;
         }
     };
-    cancel = () => {
+    cancel = (reason) => {
         if (this.confirmationCallback) {
             this.confirmationCallback(false);
             this.confirmationCallback = undefined;
         }
-        this.abortController?.abort();
+        const cancelReason = reason ?? 'user_cancelled';
+        console.log('cancelling request:', {
+            reason: cancelReason,
+            abortController: this.abortController
+        });
+        this.abortController?.abort(cancelReason);
+        // Mark all tool messages in loading state as canceled
+        this.displayMessages = this.displayMessages.map((message) => {
+            if (message.role === 'tool' && message.isLoading) {
+                return {
+                    ...message,
+                    isLoading: false,
+                    content: 'Canceled',
+                    error: 'Canceled'
+                };
+            }
+            return message;
+        });
+    };
+    cancelInlineRequest = (reason) => {
+        const cancelReason = reason ?? 'inline_cancelled';
+        console.log('cancelling inline request:', {
+            reason: cancelReason,
+            inlineAbortController: this.inlineAbortController
+        });
+        this.inlineAbortController?.abort(cancelReason);
     };
     restartGeneration = (displayMessageIndex, newContent) => {
         const userMessage = this.displayMessages[displayMessageIndex];
@@ -610,7 +703,12 @@ class AIChatManager {
         this.focusInput();
     };
     saveAndClear = async () => {
-        this.cancel();
+        console.log('saveAndClear called', {
+            hasAbortController: !!this.abortController,
+            isLoading: this.loading,
+            stack: new Error().stack
+        });
+        this.cancel('saveAndClear');
         await this.historyManager.save(this.displayMessages, this.messages);
         this.displayMessages = [];
         this.messages = [];
@@ -738,5 +836,11 @@ class AIChatManager {
             this.flowAiChatHelpers = undefined;
         };
     };
+    setAppHelpers = (appHelpers) => {
+        this.appAiChatHelpers = appHelpers;
+        return () => {
+            this.appAiChatHelpers = undefined;
+        };
+    };
 }
 export const aiChatManager = new AIChatManager();

package/package/components/copilot/chat/AIChatMessage.svelte

@@ -56,7 +56,7 @@ function editMessage() {
 				message.role === 'user' &&
 					'px-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 rounded-lg relative group',
 				(message.role === 'assistant' || message.role === 'tool') && 'px-[1px]',
-				message.role === 'tool' && 'text-tertiary'
+				message.role === 'tool' && 'text-primary'
 			)}
 		>
 			{#if message.role === 'assistant'}
@@ -64,20 +64,23 @@ function editMessage() {
 			{:else if message.role === 'tool'}
 				<ToolExecutionDisplay message={message as ToolDisplayMessage} />
 			{:else}
-				{message.content}
+				<span class="whitespace-pre-wrap">{message.content}</span>
 			{/if}
 		</div>
 	{/if}
 	{#if message.role === 'user' && message.snapshot}
-		<div class="mx-2 text-sm text-tertiary flex flex-row items-center justify-between gap-2 mt-2">
-			Saved a flow snapshot
+		<div class="mx-2 text-sm text-primary flex flex-row items-center justify-between gap-2 mt-2">
+			Saved {message.snapshot.type === 'flow' ? 'a flow' : 'an app'} snapshot
 			<Button
 				size="xs2"
-				variant="border"
-				color="light"
+				variant="default"
 				on:click={() => {
 					if (message.snapshot) {
-						aiChatManager.flowAiChatHelpers?.revertToSnapshot(message.snapshot)
+						if (message.snapshot.type === 'flow') {
+							aiChatManager.flowAiChatHelpers?.revertToSnapshot(message.snapshot.value)
+						} else if (message.snapshot.type === 'app') {
+							aiChatManager.appAiChatHelpers?.revertToSnapshot(message.snapshot.value)
+						}
 					}
 				}}
 				title="Revert to snapshot"
@@ -92,9 +95,8 @@ function editMessage() {
 	<div class="flex justify-end px-2 -mt-1">
 		<Button
 			size="xs2"
-			variant="border"
+			variant="default"
 			title="Retry generation"
-			color="light"
 			startIcon={{ icon: RefreshCwIcon }}
 			onclick={() => aiChatManager.retryRequest(messageIndex)}
 		>

package/package/components/copilot/chat/AiChatLayout.svelte

@@ -5,6 +5,8 @@ import { zIndexes } from '../../../zIndexes';
 import { userStore, workspaceStore } from '../../../stores';
 import { chatState } from './sharedChatState.svelte';
 import { loadCopilot } from '../../../aiStore';
+import { aiChatManager } from './AIChatManager.svelte';
+import { onDestroy } from 'svelte';
 let { noPadding: noBorder = false, isCollapsed = false, children, onMenuOpen, disableAi } = $props();
 $effect(() => {
     if (disableAi) {
@@ -16,11 +18,17 @@ $effect(() => {
         loadCopilot($workspaceStore);
     }
 });
+const historyManager = aiChatManager.historyManager;
+historyManager.init();
+onDestroy(() => {
+    aiChatManager.cancel('aiChatLayout destroyed');
+    historyManager.close();
+});
 </script>
 
 {#if !disableAi}
 	<Splitpanes horizontal={false} class="flex-1 min-h-0">
-		<Pane size={99.8 - chatState.size} minSize={50} class="flex flex-col min-h-0">
+		<Pane size={100 - chatState.size} minSize={50} class="flex flex-col min-h-0">
 			<div
 				id="content"
 				class={classNames(
@@ -33,7 +41,7 @@ $effect(() => {
 					<div class="relative w-full flex-1 flex flex-col">
 						<div
 							class={classNames(
-								'pt-2 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
+								'py-0.5 px-4 sm:px-4 flex flex-row justify-between items-center shadow-sm max-w-7xl md:hidden',
 								noBorder || $userStore?.operator ? 'hidden' : ''
 							)}
 						>
@@ -43,7 +51,7 @@ $effect(() => {
 								onclick={() => {
 									onMenuOpen?.()
 								}}
-								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-tertiary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+								class="h-8 w-8 inline-flex items-center justify-center rounded-md text-primary hover:text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
 							>
 								<svg
 									class="h-6 w-6"
@@ -69,13 +77,15 @@ $effect(() => {
 				</main>
 			</div>
 		</Pane>
-		<Pane
-			bind:size={chatState.size}
-			minSize={15}
-			class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
-		>
-			<AiChat />
-		</Pane>
+		{#if chatState.size > 1}
+			<Pane
+				bind:size={chatState.size}
+				minSize={15}
+				class={`flex flex-col min-h-0 z-[${zIndexes.aiChat}]`}
+			>
+				<AiChat />
+			</Pane>
+		{/if}
 	</Splitpanes>
 {:else}
 	{@render children?.()}

package/package/components/copilot/chat/AvailableContextList.svelte

@@ -163,7 +163,7 @@ $effect(() => {
 </script>
 
 <div
-	class="flex flex-col gap-1 text-tertiary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
+	class="flex flex-col gap-1 text-primary text-xs p-1 pr-0 min-w-24 max-h-48 overflow-y-scroll"
 	onmousedown={(e) =>
 		// avoids triggering onblur on the textinput and closing the tooltip
 		e.preventDefault()}
@@ -196,7 +196,7 @@ $effect(() => {
 			</button>
 		{/each}
 		{#if filteredAvailableContext.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No matching context</div>
+			<div class="text-center text-primary text-xs py-2">No matching context</div>
 		{/if}
 	{:else if currentView === 'categories'}
 		<!-- Categories view -->
@@ -215,7 +215,7 @@ $effect(() => {
 			</button>
 		{/each}
 		{#if availableCategories.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No available context</div>
+			<div class="text-center text-primary text-xs py-2">No available context</div>
 		{/if}
 	{:else}
 		<!-- Category items view -->
@@ -228,7 +228,7 @@ $effect(() => {
 		</button>
 
 		{#if currentCategoryItems.length === 0}
-			<div class="text-center text-tertiary text-xs py-2">No items in this category</div>
+			<div class="text-center text-primary text-xs py-2">No items in this category</div>
 		{:else}
 			{#each currentCategoryItems as element, i}
 				{@const Icon = ContextIconMap[element.type]}

package/package/components/copilot/chat/ChatMode.svelte

@@ -13,7 +13,7 @@ import { aiChatManager, AIMode } from './AIChatManager.svelte';
 	>
 		<svelte:fragment slot="trigger">
 			<div
-				class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
 			>
 				<span class={`truncate`}>
 					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode

package/package/components/copilot/chat/ContextElementBadge.svelte

@@ -18,7 +18,7 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 	{#snippet trigger()}
 		<div
 			class={twMerge(
-				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-tertiary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
+				'border rounded-md px-1 py-0.5 flex flex-row items-center gap-1 text-primary text-xs cursor-default hover:bg-surface-hover hover:cursor-pointer max-w-48 bg-surface'
 			)}
 			onmouseenter={() => (showDelete = true)}
 			onmouseleave={() => (showDelete = false)}
@@ -62,7 +62,7 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 				{:else if contextElement.schema}
 					<ObjectViewer json={formatSchema(contextElement.schema)} pureViewer collapseLevel={1} />
 				{:else}
-					<div class="text-tertiary">Not loaded yet</div>
+					<div class="text-primary">Not loaded yet</div>
 				{/if}
 			</div>
 		{:else if contextElement.type === 'code' || contextElement.type === 'code_piece' || contextElement.type === 'diff' || contextElement.type === 'flow_module_code_piece'}
@@ -84,7 +84,7 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 				</div>
 			{:else}
 				<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
-					<div class="text-tertiary">{contextElement.title}</div>
+					<div class="text-primary">{contextElement.title}</div>
 				</div>
 			{/if}
 		{/if}

package/package/components/copilot/chat/ContextTextarea.svelte

@@ -303,7 +303,7 @@ export function focus() {
 		padding: 0.25rem;
 		border: 1px solid transparent;
 		font-family: inherit;
-		font-size: 0.875rem;
+		font-size: 0.75rem;
 		line-height: 1.72;
 		white-space: pre-wrap;
 		word-break: break-words;

package/package/components/copilot/chat/ProviderModelSelector.svelte

@@ -16,7 +16,7 @@ let multipleModels = $derived($copilotInfo.aiModels.length > 1);
 <div class="min-w-0">
 	<Popover disablePopup={!multipleModels} class="max-w-full">
 		{#snippet trigger()}
-			<div class="text-tertiary text-xs flex flex-row items-center font-normal gap-0.5">
+			<div class="text-primary text-xs flex flex-row items-center font-normal gap-0.5">
 				<span class={`truncate ${multipleModels ? '' : 'pr-2'}`}>{providerModel.model}</span>
 				{#if multipleModels}
 					<div class="shrink-0">