windmill-components 1.677.1 → 1.695.0

package/package/components/common/table/AppRow.svelte

@@ -8,7 +8,7 @@ import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 import DraftBadge from '../../DraftBadge.svelte';
 import Badge from '../badge/Badge.svelte';
-import { ExternalLink, Eye, File, FileJson, FolderOpen, GitFork, ChevronUpSquare, History, Pen, Share, Trash, Copy } from 'lucide-svelte';
+import { ExternalLink, Eye, File, FileJson, FolderOpen, GitFork, ChevronUpSquare, History, Pen, Shield, Trash, Copy } from 'lucide-svelte';
 import { goto as gotoUrl } from '$app/navigation';
 import { page } from '$app/state';
 import { DELETE, copyToClipboard } from '../../../utils';
@@ -192,8 +192,8 @@ async function loadAppJson() {
 						hide: $userStore?.operator
 					},
 					{
-						displayName: canWrite ? 'Share' : 'See Permissions',
-						icon: Share,
+						displayName: 'Permissions',
+						icon: Shield,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(path, 'app')
 						},

package/package/components/common/table/FlowRow.svelte

@@ -13,7 +13,7 @@ import DraftBadge from '../../DraftBadge.svelte';
 import { sendUserToast } from '../../../toast';
 import { DELETE, copyToClipboard, isOwner } from '../../../utils';
 import { isDeployable } from '../../../utils_deployable';
-import { Pen, GitFork, Trash, List, FolderOpen, ChevronUpSquare, Calendar, Share, Archive, Copy, Eye, HistoryIcon } from 'lucide-svelte';
+import { Pen, GitFork, Trash, List, FolderOpen, ChevronUpSquare, Calendar, Shield, Archive, Copy, Eye, HistoryIcon } from 'lucide-svelte';
 import FlowHistory from '../../flows/FlowHistory.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
 import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
@@ -229,8 +229,8 @@ let flowHistory = $state(undefined);
 						hide: $userStore?.operator
 					},
 					{
-						displayName: owner ? 'Share' : 'See Permissions',
-						icon: Share,
+						displayName: 'Permissions',
+						icon: Shield,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(path, 'flow')
 						},

package/package/components/common/table/RawAppRow.svelte

@@ -4,7 +4,7 @@ import SharedBadge from '../../SharedBadge.svelte';
 import {} from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import Row from './Row.svelte';
-import { Globe, Share } from 'lucide-svelte';
+import { Globe, Shield } from 'lucide-svelte';
 import { isDeployable } from '../../../utils_deployable';
 import { getDeployUiSettings } from '../../home/deploy_ui';
 let { app, marked, shareModal, deploymentDrawer, depth = 0, menuOpen = $bindable(false) } = $props();
@@ -26,7 +26,7 @@ let { app, marked, shareModal, deploymentDrawer, depth = 0, menuOpen = $bindable
 	{#snippet actions()}
 		<Dropdown
 			items={async () => {
-				let { path, canWrite } = app
+				let { path } = app
 
 				return [
 					...(isDeployable('app', path, await getDeployUiSettings())
@@ -41,8 +41,8 @@ let { app, marked, shareModal, deploymentDrawer, depth = 0, menuOpen = $bindable
 							]
 						: []),
 					{
-						displayName: canWrite ? 'Share' : 'See Permissions',
-						icon: Share,
+						displayName: 'Permissions',
+						icon: Shield,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(path, 'raw_app')
 						}

package/package/components/common/table/Row.svelte

@@ -6,7 +6,11 @@ import { twMerge } from 'tailwind-merge';
 import { goto } from '../../../navigation';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 let { marked, selected = false, disabled = false, canFavorite = true, isSelectable = false, alignWithSelectable = false, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', triggerKind = undefined, summary = undefined, path, href = undefined, workspaceId, depth = 0, badges, actions, customSummary, onSelect = () => { } } = $props();
-let displayPath = (untrack(() => depth) === 0 ? untrack(() => path) : untrack(() => path)?.split('/')?.slice(-1)?.[0]) ?? '';
+let displayPath = (untrack(() => depth) === 0
+    ? untrack(() => path)
+    : untrack(() => path)
+        ?.split('/')
+        ?.slice(-1)?.[0]) ?? '';
 </script>
 
 {#if href}
@@ -84,7 +88,7 @@ let displayPath = (untrack(() => depth) === 0 ? untrack(() => path) : untrack(()
 				{!summary || summary.length == 0 ? displayPath : summary}
 			{/if}
 		</div>
-		<div class="text-hint text-3xs truncate text-left font-normal">
+		<div class="text-hint text-3xs truncate text-left font-normal" title={path}>
 			{path}
 		</div>
 	</div>

package/package/components/common/table/ScriptRow.svelte

@@ -14,7 +14,7 @@ import { sendUserToast } from '../../../toast';
 import { capitalize, copyToClipboard, DELETE, isOwner } from '../../../utils';
 import { isDeployable } from '../../../utils_deployable';
 import { LanguageIcon } from '../languageIcons';
-import { Archive, Calendar, Code, Copy, Eye, FolderOpen, ChevronUpSquare, GitFork, List, Pen, Share, Trash, History, Globe2, FileText } from 'lucide-svelte';
+import { Archive, Calendar, Code, Copy, Eye, FolderOpen, ChevronUpSquare, GitFork, List, Pen, Shield, Trash, History, Globe2, FileText } from 'lucide-svelte';
 import ScriptVersionHistory from '../../ScriptVersionHistory.svelte';
 import WacExportDrawer from '../../scripts/WacExportDrawer.svelte';
 import { Drawer, DrawerContent } from '..';
@@ -96,6 +96,14 @@ let wacExportDrawer = $state(undefined);
 				<Badge small color="indigo" baseClass="border border-indigo-200">wac</Badge>
 			</Popover>
 		{/if}
+		{#if script.auto_kind === 'test'}
+			<Popover notClickable>
+				{#snippet text()}
+					CI test script
+				{/snippet}
+				<Badge small color="yellow" baseClass="border">CI test</Badge>
+			</Popover>
+		{/if}
 		{#if script.kind !== 'script'}
 			<Badge color="blue" baseClass="border"
 				>{script.kind === 'failure' ? 'Error handler' : capitalize(script.kind)}</Badge
@@ -287,8 +295,8 @@ let wacExportDrawer = $state(undefined);
 						hide: $userStore?.operator
 					},
 					{
-						displayName: owner ? 'Share' : 'See Permissions',
-						icon: Share,
+						displayName: 'Permissions',
+						icon: Shield,
 						action: () => {
 							shareModal.openDrawer && shareModal.openDrawer(script.path, 'script')
 						},

package/package/components/copilot/chat/AIChatDisplay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import AIChatMessage from './AIChatMessage.svelte';
 import {} from 'svelte';
-import { CheckIcon, Code2, FileCode, HistoryIcon, Loader2, MousePointer2, Plus, Square, TextSelect, X, XIcon } from 'lucide-svelte';
+import { CheckIcon, HistoryIcon, Loader2, MousePointer2, Plus, Square, TextSelect, X, XIcon } from 'lucide-svelte';
 import Button from '../../common/button/Button.svelte';
 import Popover from '../../meltComponents/Popover.svelte';
 import {} from './shared';
@@ -86,7 +86,7 @@ const appContext = $derived.by(() => {
 								<div class="text-center text-primary text-xs">No history</div>
 							{:else}
 								<div class="flex flex-col">
-									{#each pastChats as chat}
+									{#each pastChats as chat (chat.id)}
 										<button
 											class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
 											onclick={() => {
@@ -149,7 +149,7 @@ const appContext = $derived.by(() => {
 			}}
 		>
 			<div class="flex flex-col" bind:clientHeight={height}>
-				{#each messages as message, messageIndex}
+				{#each messages as message, messageIndex (messageIndex)}
 					<AIChatMessage
 						{message}
 						{messageIndex}
@@ -236,38 +236,7 @@ const appContext = $derived.by(() => {
 						{/if}
 						<ProviderModelSelector />
 
-						{#if aiChatManager.mode === AIMode.APP && appContext && (appContext.type !== 'none' || appContext.inspectorElement || appContext.codeSelection)}
-							{#if appContext.type === 'frontend' && appContext.frontendPath && !appContext.selectionExcluded}
-								<div
-									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-2xs"
-									title={appContext.frontendPath}
-								>
-									<FileCode class="w-3 h-3" />
-									<span class="truncate max-w-[80px]">{appContext.frontendPath}</span>
-									<button
-										class="hover:bg-blue-200 dark:hover:bg-blue-800/50 rounded p-0.5 -mr-0.5"
-										onclick={() => appContext.toggleSelectionExcluded?.()}
-										title="Exclude from prompt"
-									>
-										<X class="w-2.5 h-2.5" />
-									</button>
-								</div>
-							{:else if appContext.type === 'backend' && appContext.backendKey && !appContext.selectionExcluded}
-								<div
-									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 text-2xs"
-									title={appContext.backendKey}
-								>
-									<Code2 class="w-3 h-3" />
-									<span class="truncate max-w-[80px]">{appContext.backendKey}</span>
-									<button
-										class="hover:bg-green-200 dark:hover:bg-green-800/50 rounded p-0.5 -mr-0.5"
-										onclick={() => appContext.toggleSelectionExcluded?.()}
-										title="Exclude from prompt"
-									>
-										<X class="w-2.5 h-2.5" />
-									</button>
-								</div>
-							{/if}
+						{#if aiChatManager.mode === AIMode.APP && appContext && (appContext.inspectorElement || appContext.codeSelection)}
 							{#if appContext.inspectorElement}
 								<div
 									class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-2xs"
@@ -317,7 +286,7 @@ const appContext = $derived.by(() => {
 		{#if (aiChatManager.mode === AIMode.NAVIGATOR || aiChatManager.mode === AIMode.ASK) && suggestions.length > 0 && messages.filter((m) => m.role === 'user').length === 0 && !disabled}
 			<div class="px-2 mt-4">
 				<div class="flex flex-col gap-2">
-					{#each suggestions as suggestion}
+					{#each suggestions as suggestion (suggestion)}
 						<Button
 							on:click={() => submitSuggestion(suggestion)}
 							size="xs2"

package/package/components/copilot/chat/AIChatInput.svelte

@@ -9,6 +9,7 @@ import { twMerge } from 'tailwind-merge';
 import Portal from '../../Portal.svelte';
 import { zIndexes } from '../../../zIndexes';
 import { tick, untrack } from 'svelte';
+import { sendUserToast } from '../../../toast';
 let { availableContext, selectedContext = $bindable([]), disabled = false, isFirstMessage = false, placeholder, initialInstructions = '', editingMessageIndex = null, onEditEnd = () => { }, className = '', onClickOutside = () => { }, onSendRequest = undefined, showContext = true, bottomRightSnippet, onKeyDown = undefined } = $props();
 // Generate mode-specific placeholder
 const modePlaceholder = $derived.by(() => {
@@ -65,7 +66,7 @@ function clickOutside(node) {
         }
     };
 }
-function addContextToSelection(contextElement) {
+async function addContextToSelection(contextElement) {
     if (!selectedContext || !availableContext)
         return;
     const alreadySelected = selectedContext.find((c) => c.type === contextElement.type && c.title === contextElement.title);
@@ -78,13 +79,29 @@ function addContextToSelection(contextElement) {
         !availableContext.find((c) => c.type === contextElement.type && c.title === contextElement.title)) {
         return;
     }
-    selectedContext = [...selectedContext, contextElement];
-    // If it's a datatable table, add it to the app's whitelisted tables
+    let contextToAdd = contextElement;
     if (contextElement.type === 'app_datatable' &&
         aiChatManager.mode === AIMode.APP &&
         aiChatManager.appAiChatHelpers) {
-        aiChatManager.appAiChatHelpers.addTableToWhitelist(contextElement.datatableName, contextElement.schemaName, contextElement.tableName);
+        const appAiChatHelpers = aiChatManager.appAiChatHelpers;
+        appAiChatHelpers.addTableToWhitelist(contextElement.datatableName, contextElement.schemaName, contextElement.tableName);
+        if (!contextElement.columns) {
+            try {
+                contextToAdd = {
+                    ...contextElement,
+                    columns: await appAiChatHelpers.getDatatableTableSchema(contextElement.datatableName, contextElement.schemaName, contextElement.tableName)
+                };
+            }
+            catch (e) {
+                console.error('Failed to load datatable table schema:', e);
+                sendUserToast('Failed to load datatable table schema', true, [], e instanceof Error ? e.message : String(e));
+            }
+        }
     }
+    const duplicateAfterAwait = selectedContext.find((c) => c.type === contextToAdd.type && c.title === contextToAdd.title);
+    if (duplicateAfterAwait)
+        return;
+    selectedContext = [...selectedContext, contextToAdd];
 }
 function sendRequest() {
     if (aiChatManager.loading) {
@@ -258,7 +275,7 @@ function handleAppInput(_e) {
     }
 }
 function handleAppContextSelection(contextElement) {
-    addContextToSelection(contextElement);
+    void addContextToSelection(contextElement);
     // Update instructions with the selected context title
     const index = instructions.lastIndexOf('@');
     if (index !== -1) {
@@ -279,31 +296,27 @@ $effect(() => {
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
 					{#snippet trigger()}
-									
-							<div
-								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-								>@</div
-							>
-						
-									{/snippet}
+						<div
+							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+							>@</div
+						>
+					{/snippet}
 					{#snippet content({ close })}
-									
-							<AvailableContextList
-								{availableContext}
-								{selectedContext}
-								onSelect={(element) => {
-									addContextToSelection(element)
-									close()
-								}}
-								onSelectWorkspaceItem={(element) => {
-									addContextToSelection(element)
-									close()
-								}}
-							/>
-						
-									{/snippet}
+						<AvailableContextList
+							{availableContext}
+							{selectedContext}
+							onSelect={(element) => {
+								void addContextToSelection(element)
+								close()
+							}}
+							onSelectWorkspaceItem={(element) => {
+								void addContextToSelection(element)
+								close()
+							}}
+						/>
+					{/snippet}
 				</Popover>
-				{#each selectedContext as element}
+				{#each selectedContext as element (element.type + '-' + element.title)}
 					<ContextElementBadge
 						contextElement={element}
 						deletable
@@ -323,7 +336,7 @@ $effect(() => {
 			{selectedContext}
 			{isFirstMessage}
 			placeholder={modePlaceholder}
-			onAddContext={(contextElement) => addContextToSelection(contextElement)}
+			onAddContext={(contextElement) => void addContextToSelection(contextElement)}
 			onSendRequest={() => {
 				if (disabled) {
 					return
@@ -338,25 +351,21 @@ $effect(() => {
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
 					{#snippet trigger()}
-											
-							<div
-								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-								>@</div
-							>
-						
-											{/snippet}
+						<div
+							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+							>@</div
+						>
+					{/snippet}
 					{#snippet content({ close })}
-											
-							<AppAvailableContextList
-								{availableContext}
-								{selectedContext}
-								onSelect={(element) => {
-									addContextToSelection(element)
-									close()
-								}}
-							/>
-						
-											{/snippet}
+						<AppAvailableContextList
+							{availableContext}
+							{selectedContext}
+							onSelect={(element) => {
+								void addContextToSelection(element)
+								close()
+							}}
+						/>
+					{/snippet}
 				</Popover>
 				{#each selectedContext as element (element.type + '-' + element.title)}
 					<ContextElementBadge

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

@@ -18,6 +18,7 @@ import { get } from 'svelte/store';
 import { workspaceStore } from '../../../stores';
 import { askTools, prepareAskSystemMessage, prepareAskUserMessage } from './ask/core';
 import { chatState, DEFAULT_SIZE, triggerablesByAi } from './sharedChatState.svelte';
+import { createAppBackendRunnableContextElement, createAppFrontendFileContextElement, flattenDatatablesToAppContextElements } from './context';
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 import { runChatLoop } from './chatLoop';
 import { getCurrentModel, tryGetCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
@@ -33,6 +34,9 @@ export var AIMode;
     AIMode["API"] = "API";
     AIMode["ASK"] = "ask";
 })(AIMode || (AIMode = {}));
+function isWorkspacePath(path) {
+    return path?.startsWith('f/') === true || path?.startsWith('u/') === true;
+}
 class AIChatManager {
     contextManager = new ContextManager();
     historyManager = new HistoryManager();
@@ -71,6 +75,7 @@ class AIChatManager {
     /** Cached datatables for app context (fetched asynchronously) */
     cachedDatatables = $state([]);
     confirmationCallback = $state(undefined);
+    appDatatablesRefreshTimeout = undefined;
     allowedModes = $derived({
         script: this.flowAiChatHelpers === undefined && this.scriptEditorOptions !== undefined,
         flow: this.flowAiChatHelpers !== undefined,
@@ -158,6 +163,24 @@ class AIChatManager {
             this.changeMode(firstKey);
         }
     }
+    getScriptWorkspaceMutationTarget = () => {
+        const path = this.scriptEditorOptions?.path;
+        const workspacePath = isWorkspacePath(path) ? path : undefined;
+        return {
+            kind: 'script',
+            path: workspacePath,
+            deployed: workspacePath !== undefined && this.scriptEditorOptions?.lastDeployedCode !== undefined
+        };
+    };
+    getFlowWorkspaceMutationTarget = () => {
+        return {
+            kind: 'flow',
+            path: this.flowOptions?.path,
+            deployed: !!this.flowOptions?.path &&
+                !!this.flowOptions.lastDeployedFlow &&
+                !this.flowOptions.lastDeployedFlow.draft_only
+        };
+    };
     changeMode(mode, pendingPrompt, options) {
         if (mode === AIMode.SCRIPT && !tryGetCurrentModel())
             return;
@@ -180,6 +203,7 @@ class AIChatManager {
                         args: this.scriptEditorOptions?.args ?? {}
                     };
                 },
+                getWorkspaceMutationTarget: this.getScriptWorkspaceMutationTarget,
                 applyCode: (code, opts) => {
                     this.scriptEditorApplyCode?.(code, opts);
                 },
@@ -202,7 +226,10 @@ class AIChatManager {
             this.systemMessage = prepareFlowSystemMessage(customPrompt);
             this.systemMessage.content = this.systemMessage.content;
             this.tools = [...flowTools];
-            this.helpers = this.flowAiChatHelpers;
+            this.helpers = {
+                ...(this.flowAiChatHelpers ?? {}),
+                getWorkspaceMutationTarget: this.getFlowWorkspaceMutationTarget
+            };
         }
         else if (mode === AIMode.NAVIGATOR) {
             const customPrompt = getCombinedCustomPrompt(mode);
@@ -359,7 +386,7 @@ class AIChatManager {
                         return prepareScriptUserMessage(pendingPrompt, this.contextManager.getSelectedContext());
                     }
                     else if (this.mode === AIMode.FLOW) {
-                        return prepareFlowUserMessage(pendingPrompt, this.flowAiChatHelpers.getFlowAndSelectedId());
+                        return prepareFlowUserMessage(pendingPrompt, this.flowAiChatHelpers.getFlowAndSelectedId(), [], this.flowAiChatHelpers.inlineScriptSession);
                     }
                     else if (this.mode === AIMode.NAVIGATOR) {
                         return prepareNavigatorUserMessage(pendingPrompt);
@@ -528,7 +555,7 @@ class AIChatManager {
             };
             switch (this.mode) {
                 case AIMode.FLOW:
-                    userMessage = prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId(), oldSelectedContext);
+                    userMessage = prepareFlowUserMessage(oldInstructions, this.flowAiChatHelpers.getFlowAndSelectedId(), oldSelectedContext, this.flowAiChatHelpers.inlineScriptSession);
                     break;
                 case AIMode.NAVIGATOR:
                     userMessage = prepareNavigatorUserMessage(oldInstructions);
@@ -834,33 +861,8 @@ class AIChatManager {
             return;
         }
         try {
-            const datatables = await this.appAiChatHelpers.getDatatables();
-            console.log('Refreshed datatables:', datatables);
-            // Flatten to individual tables
-            const tableElements = [];
-            for (const dt of datatables) {
-                if (dt.error) {
-                    // Skip datatables with errors
-                    continue;
-                }
-                for (const [schemaName, tables] of Object.entries(dt.schemas)) {
-                    for (const [tableName, columns] of Object.entries(tables)) {
-                        // Format title as "datatable/schema:table" or "datatable/table" if schema is public
-                        const title = schemaName === 'public'
-                            ? `${dt.datatable_name}/${tableName}`
-                            : `${dt.datatable_name}/${schemaName}:${tableName}`;
-                        tableElements.push({
-                            type: 'app_datatable',
-                            datatableName: dt.datatable_name,
-                            schemaName,
-                            tableName,
-                            title,
-                            columns
-                        });
-                    }
-                }
-            }
-            this.cachedDatatables = tableElements;
+            const datatables = await this.appAiChatHelpers.listDatatableTables();
+            this.cachedDatatables = flattenDatatablesToAppContextElements(datatables);
         }
         catch (err) {
             console.error('Failed to refresh datatables:', err);
@@ -880,13 +882,7 @@ class AIChatManager {
         for (const path of frontendFiles) {
             const content = this.appAiChatHelpers.getFrontendFile(path);
             if (content !== undefined) {
-                const element = {
-                    type: 'app_frontend_file',
-                    path,
-                    title: path,
-                    content
-                };
-                context.push(element);
+                context.push(createAppFrontendFileContextElement(path, content));
             }
         }
         // Add backend runnables
@@ -894,13 +890,7 @@ class AIChatManager {
         for (const { key } of runnables) {
             const runnable = this.appAiChatHelpers.getBackendRunnable(key);
             if (runnable) {
-                const element = {
-                    type: 'app_backend_runnable',
-                    key,
-                    title: key,
-                    runnable
-                };
-                context.push(element);
+                context.push(createAppBackendRunnableContextElement(key, runnable));
             }
         }
         // Add cached datatables
@@ -911,12 +901,24 @@ class AIChatManager {
         this.appAiChatHelpers = appHelpers;
         // Refresh datatables when app helpers are set (deferred to avoid loop)
         // Use setTimeout to ensure this runs after the effect completes
-        setTimeout(() => {
-            this.refreshDatatables();
+        if (this.appDatatablesRefreshTimeout) {
+            clearTimeout(this.appDatatablesRefreshTimeout);
+        }
+        this.appDatatablesRefreshTimeout = setTimeout(() => {
+            this.appDatatablesRefreshTimeout = undefined;
+            if (this.appAiChatHelpers === appHelpers) {
+                void this.refreshDatatables();
+            }
         }, 50);
         return () => {
-            this.appAiChatHelpers = undefined;
-            this.cachedDatatables = [];
+            if (this.appDatatablesRefreshTimeout) {
+                clearTimeout(this.appDatatablesRefreshTimeout);
+                this.appDatatablesRefreshTimeout = undefined;
+            }
+            if (this.appAiChatHelpers === appHelpers) {
+                this.appAiChatHelpers = undefined;
+                this.cachedDatatables = [];
+            }
         };
     };
     cancelLoadingTools = (messageText = 'Canceled') => {

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { untrack } from 'svelte';
 import { Popover } from '../../meltComponents';
 import { Loader2, X } from 'lucide-svelte';
-import { ContextIconMap } from './context';
+import { ContextIconMap, formatAppDatatableContextTitle } from './context';
 import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import { twMerge } from 'tailwind-merge';
@@ -123,9 +123,11 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 		{:else if contextElement.type === 'app_datatable'}
 			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
 				<div class="text-tertiary text-xs mb-1">
-					{contextElement.datatableName}/{contextElement.schemaName === 'public'
-						? ''
-						: contextElement.schemaName + ':'}{contextElement.tableName}
+					{formatAppDatatableContextTitle(
+						contextElement.datatableName,
+						contextElement.schemaName,
+						contextElement.tableName
+					)}
 				</div>
 				<ObjectViewer json={contextElement.columns} pureViewer collapseLevel={1} />
 			</div>

package/package/components/copilot/chat/anthropic.d.ts

@@ -5,6 +5,11 @@ import type { MessageParam, TextBlockParam, ToolUnion } from '@anthropic-ai/sdk/
 import type { MessageStream } from '@anthropic-ai/sdk/lib/MessageStream';
 import type { AIProviderModel } from '../../../gen';
 import { type Tool, type ToolCallbacks } from './shared';
+import { type ChatTokenUsage } from './tokenUsage';
+interface ParsedCompletionResult {
+    shouldContinue: boolean;
+    tokenUsage: ChatTokenUsage;
+}
 export declare function getAnthropicCompletion(messages: ChatCompletionMessageParam[], abortController: AbortController, tools?: OpenAI.Chat.Completions.ChatCompletionFunctionTool[], options?: {
     forceModelProvider?: AIProviderModel;
     anthropicClient?: Anthropic;
@@ -14,9 +19,10 @@ export declare function parseAnthropicCompletion(completion: MessageStream, call
     onMessageEnd: () => void;
 }, messages: ChatCompletionMessageParam[], addedMessages: ChatCompletionMessageParam[], tools: Tool<any>[], helpers: any, abortController?: AbortController, options?: {
     workspace?: string;
-}): Promise<boolean>;
+}): Promise<ParsedCompletionResult>;
 export declare function convertOpenAIToAnthropicMessages(messages: ChatCompletionMessageParam[]): {
     system: TextBlockParam[] | undefined;
     messages: MessageParam[];
 };
 export declare function convertOpenAIToolsToAnthropic(tools?: OpenAI.Chat.Completions.ChatCompletionFunctionTool[]): ToolUnion[] | undefined;
+export {};

package/package/components/copilot/chat/anthropic.js

@@ -2,6 +2,7 @@ import { OpenAI } from 'openai';
 import Anthropic from '@anthropic-ai/sdk';
 import { getProviderAndCompletionConfig, workspaceAIClients } from '../lib';
 import { processToolCall } from './shared';
+import { anthropicUsageToChatTokenUsage } from './tokenUsage';
 export async function getAnthropicCompletion(messages, abortController, tools, options) {
     const { provider, config } = getProviderAndCompletionConfig({
         messages,
@@ -147,6 +148,8 @@ export async function parseAnthropicCompletion(completion, callbacks, messages,
     if (error) {
         throw error;
     }
+    const finalMessage = await completion.finalMessage();
+    const tokenUsage = anthropicUsageToChatTokenUsage(finalMessage.usage);
     // Process tool calls if any
     if (toolCallsToProcess.length > 0) {
         const assistantWithTools = {
@@ -167,9 +170,9 @@ export async function parseAnthropicCompletion(completion, callbacks, messages,
             messages.push(messageToAdd);
             addedMessages.push(messageToAdd);
         }
-        return true; // Continue the conversation loop
+        return { shouldContinue: true, tokenUsage };
     }
-    return false; // End the conversation
+    return { shouldContinue: false, tokenUsage };
 }
 export function convertOpenAIToAnthropicMessages(messages) {
     let system;