windmill-components 1.687.0 → 1.695.1

package/package/components/apps/editor/inlineScriptsPanel/TagPopup.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { Button } from '../../../common';
+import { Tag } from 'lucide-svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import { autoPlacement } from '@floating-ui/core';
+import WorkerTagSelect from '../../../WorkerTagSelect.svelte';
+let { tag = $bindable(), btnProps } = $props();
+$effect(() => {
+    if (tag === '')
+        tag = undefined;
+});
+</script>
+
+<Popover
+	floatingConfig={{
+		middleware: [
+			autoPlacement({
+				allowedPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'top', 'bottom']
+			})
+		]
+	}}
+	closeButton
+	contentClasses="block text-primary p-3 w-56"
+>
+	{#snippet trigger()}
+		<Button
+			nonCaptureEvent={true}
+			btnClasses={tag
+				? 'bg-blue-100 text-blue-800 border border-blue-300 hover:bg-blue-200 dark:bg-frost-700 dark:text-frost-100 dark:border-frost-600'
+				: 'bg-surface text-primary hover:bg-hover'}
+			color="light"
+			variant="contained"
+			size="xs2"
+			iconOnly
+			startIcon={{ icon: Tag }}
+			title={tag ? `Worker tag: ${tag}` : 'Assign a worker tag'}
+			{...btnProps}
+		/>
+	{/snippet}
+	{#snippet content()}
+		<div class="flex flex-col gap-2">
+			<span class="text-xs font-bold">Worker tag</span>
+			<span class="text-2xs text-tertiary">
+				Assign a worker tag to run this inline script on a specific worker group. Leave empty to use
+				the language default.
+			</span>
+			<WorkerTagSelect bind:tag noLabel placeholder="lang default" />
+		</div>
+	{/snippet}
+</Popover>

package/package/components/apps/editor/inlineScriptsPanel/TagPopup.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Button } from '../../../common';
+import type { ComponentProps } from 'svelte';
+interface Props {
+    tag: string | undefined;
+    btnProps?: ComponentProps<typeof Button>;
+}
+declare const TagPopup: import("svelte").Component<Props, {}, "tag">;
+type TagPopup = ReturnType<typeof TagPopup>;
+export default TagPopup;

package/package/components/apps/inputType.d.ts

@@ -21,6 +21,7 @@ export type UserInput<U> = {
     type: 'user';
     value: U | undefined;
     allowUserResources?: boolean;
+    sensitive?: boolean;
 };
 export type UploadInput = {
     type: 'upload';

package/package/components/apps/sharedTypes.d.ts

@@ -8,6 +8,7 @@ export type InlineScript = {
     schema?: Schema;
     lock?: string;
     cache_ttl?: number;
+    tag?: string;
     refreshOn?: {
         id: string;
         key: string;

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -253,7 +253,7 @@ $effect(() => {
 });
 </script>
 
-<div class="flex flex-col items-center gap-2 2xl:flex-row mt-4 xl:mt-0 pr-2">
+<div class="flex flex-col gap-8 2xl:gap-2 2xl:flex-row mt-4 xl:mt-0 pr-2">
 	{#if $workspaceStore == 'admins'}
 		<div class="flex gap-1 relative">
 			<span class="text-xs absolute font-semibold text-emphasis -top-4">Scope</span>
@@ -286,7 +286,7 @@ $effect(() => {
 			</ToggleButtonGroup>
 		</div>
 	{/if}
-	<div class="flex relative">
+	<div class="flex relative bg-surface-input">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">From</span>
 		<input type="text" value={after ?? 'From'} disabled />
 		<CalendarPicker
@@ -302,7 +302,7 @@ $effect(() => {
 			}}
 		/>
 	</div>
-	<div class="flex relative">
+	<div class="flex relative bg-surface-input">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">To</span>
 		<input type="text" value={before ?? 'To'} disabled />
 		<CalendarPicker
@@ -322,6 +322,7 @@ $effect(() => {
 	<div class="flex relative">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Username</span>
 		<Select
+			class="w-full"
 			bind:value={username}
 			RightIcon={ChevronDown}
 			items={usernames
@@ -342,6 +343,7 @@ $effect(() => {
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Resource</span>
 
 		<Select
+			class="w-full"
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
 			bind:value={resource}
@@ -355,6 +357,7 @@ $effect(() => {
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Operation</span>
 
 		<Select
+			class="w-full"
 			bind:value={operation}
 			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
@@ -366,6 +369,7 @@ $effect(() => {
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Action</span>
 
 		<Select
+			class="w-full"
 			bind:value={actionKind}
 			RightIcon={ChevronDown}
 			items={[
@@ -410,6 +414,7 @@ $effect(() => {
 				refresh++
 			}}
 			unifiedSize="md"
+			wrapperClasses="ml-auto"
 		>
 			<div class="flex flex-row gap-1 items-center">
 				{#if loading}

package/package/components/common/fileUpload/S3ArgInput.svelte

@@ -4,13 +4,13 @@ import { Loader2, Pipette } from 'lucide-svelte';
 import FileUpload from './FileUpload.svelte';
 import Button from '../button/Button.svelte';
 import { userStore } from '../../../stores';
-let { multiple, value = $bindable(), defaultValue, setNewValueFromCode, onFocus, onBlur, computeS3ForceViewerPolicies, workspace, editor = $bindable(), appPath, bottom } = $props();
+let { multiple, value = $bindable(), defaultValue, setNewValueFromCode, onFocus, onBlur, computeS3ForceViewerPolicies, workspace, editor = $bindable(), appPath, bottom, hideCatalogPicker = false, hideRawInput = false } = $props();
 let s3FileUploadRawMode = $state(false);
 let s3FilePicker = $state(undefined);
 let fileUpload = $state(undefined);
 </script>
 
-{#if $userStore}
+{#if $userStore && !hideCatalogPicker}
 	<S3FilePicker
 		bind:this={s3FilePicker}
 		onSelectAndClose={(selected) => {
@@ -88,7 +88,7 @@ let fileUpload = $state(undefined);
 			initialValue={value}
 		/>
 	{/if}
-	{#if $userStore}
+	{#if $userStore && !hideCatalogPicker}
 		<Button
 			variant="default"
 			size="xs"
@@ -102,11 +102,13 @@ let fileUpload = $state(undefined);
 		</Button>
 	{/if}
 	{@render bottom?.()}
-	<Toggle
-		class="mt-1"
-		textClass="font-normal text-hint"
-		bind:checked={s3FileUploadRawMode}
-		size="xs"
-		options={{ right: `Raw S3 object${multiple ? 's' : ''} input` }}
-	/>
+	{#if !hideRawInput}
+		<Toggle
+			class="mt-1"
+			textClass="font-normal text-hint"
+			bind:checked={s3FileUploadRawMode}
+			size="xs"
+			options={{ right: `Raw S3 object${multiple ? 's' : ''} input` }}
+		/>
+	{/if}
 </div>

package/package/components/common/fileUpload/S3ArgInput.svelte.d.ts

@@ -16,6 +16,8 @@ type $$ComponentProps = {
     editor: SimpleEditor | undefined;
     appPath: string | undefined;
     bottom?: import('svelte').Snippet;
+    hideCatalogPicker?: boolean;
+    hideRawInput?: boolean;
 };
 declare const S3ArgInput: import("svelte").Component<$$ComponentProps, {}, "value" | "editor">;
 type S3ArgInput = ReturnType<typeof S3ArgInput>;

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);
@@ -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>