windmill-components 1.623.1 → 1.642.0

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

@@ -1,19 +1,30 @@
 <script lang="ts">import FlowModuleIcon from '../../flows/FlowModuleIcon.svelte';
 import BarsStaggered from '../../icons/BarsStaggered.svelte';
+import { workspaceStore } from '../../../stores';
+import { workspaceRunnablesSearch, MAX_RUNNABLE_CONTENT_LENGTH } from './shared';
 import { ContextIconMap } from './context';
-import { ArrowLeft, Diff, Database, ChevronRight } from 'lucide-svelte';
-const { availableContext, selectedContext, onSelect, setShowing, showAllAvailable = false, stringSearch = '', onViewChange } = $props();
+import { ArrowLeft, Diff, Database, ChevronRight, Code2, Loader2 } from 'lucide-svelte';
+const { availableContext, selectedContext, onSelect, onSelectWorkspaceItem, setShowing, showAllAvailable = false, stringSearch = '', onViewChange } = $props();
 // Current view state: 'categories' or specific category type
 let currentView = $state('categories');
 // Selected index for keyboard navigation
 let itemSelectedIndex = $state(0);
 let categorySelectedIndex = $state(0);
+// Workspace search state
+let workspaceSearchQuery = $state('');
+let workspaceSearchResults = $state([]);
+let workspaceSearchLoading = $state(false);
+let searchInputElement = $state(undefined);
+let searchDebounceTimer = undefined;
 // Category definitions
 const categories = [
-    { id: 'diffs', label: 'Diffs', icon: Diff },
-    { id: 'modules', label: 'Modules', icon: BarsStaggered },
-    { id: 'databases', label: 'Databases', icon: Database }
+    { id: 'diffs', label: 'Diffs', icon: Diff, searchable: false },
+    { id: 'modules', label: 'Modules', icon: BarsStaggered, searchable: false },
+    { id: 'databases', label: 'Databases', icon: Database, searchable: false },
+    { id: 'scripts', label: 'Scripts', icon: Code2, searchable: true },
+    { id: 'flows', label: 'Flows', icon: BarsStaggered, searchable: true }
 ];
+const isSearchableView = $derived(currentView === 'scripts' || currentView === 'flows');
 const filteredAvailableContext = $derived(availableContext.filter((context) => {
     const filtered = (showAllAvailable ||
         !selectedContext.some((sc) => sc.type === context.type && sc.title === context.title)) &&
@@ -37,15 +48,18 @@ const contextByCategory = $derived.by(() => {
     });
     return grouped;
 });
-const currentCategoryItems = $derived(currentView !== 'categories' ? contextByCategory[currentView] : []);
-// Filter to only show categories with items
-const availableCategories = $derived(categories.filter((cat) => contextByCategory[cat.id].length > 0));
+const currentCategoryItems = $derived(currentView !== 'categories' && !isSearchableView ? contextByCategory[currentView] : []);
+// Filter to only show categories with items (non-searchable) or always show (searchable)
+const availableCategories = $derived(categories.filter((cat) => cat.searchable || contextByCategory[cat.id]?.length > 0));
 // Report view changes
 $effect(() => {
     if (onViewChange) {
         if (currentView === 'categories') {
             onViewChange(availableCategories.length);
         }
+        else if (isSearchableView) {
+            onViewChange(workspaceSearchResults.length + 2); // +2 for back button and search input
+        }
         else {
             onViewChange(currentCategoryItems.length + 1);
         }
@@ -53,13 +67,134 @@ $effect(() => {
 });
 function handleCategoryClick(categoryId) {
     currentView = categoryId;
+    itemSelectedIndex = 0;
+    if (categoryId === 'scripts' || categoryId === 'flows') {
+        workspaceSearchQuery = '';
+        workspaceSearchResults = [];
+        searchWorkspaceItems('');
+        setTimeout(() => searchInputElement?.focus(), 0);
+    }
 }
 function handleBackClick() {
     currentView = 'categories';
     itemSelectedIndex = 0;
+    workspaceSearchQuery = '';
+    workspaceSearchResults = [];
+}
+async function searchWorkspaceItems(query) {
+    const workspace = $workspaceStore;
+    if (!workspace)
+        return;
+    workspaceSearchLoading = true;
+    try {
+        const type = currentView === 'scripts' ? 'scripts' : 'flows';
+        const results = await workspaceRunnablesSearch.search(query, workspace, type);
+        workspaceSearchResults = results.map((r) => ({
+            path: r.path,
+            summary: r.summary
+        }));
+    }
+    catch (err) {
+        console.error('Error searching workspace items', err);
+        workspaceSearchResults = [];
+    }
+    finally {
+        workspaceSearchLoading = false;
+    }
+}
+function handleSearchInput() {
+    if (searchDebounceTimer)
+        clearTimeout(searchDebounceTimer);
+    searchDebounceTimer = setTimeout(() => {
+        searchWorkspaceItems(workspaceSearchQuery);
+    }, 300);
+}
+async function handleWorkspaceItemSelect(path) {
+    const workspace = $workspaceStore;
+    if (!workspace || !onSelectWorkspaceItem)
+        return;
+    try {
+        if (currentView === 'scripts') {
+            const script = await workspaceRunnablesSearch.getScript(path, workspace);
+            const content = script.content ?? '';
+            const truncatedContent = content.length > MAX_RUNNABLE_CONTENT_LENGTH
+                ? content.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                : content;
+            const element = {
+                type: 'workspace_script',
+                path: script.path,
+                title: script.path,
+                summary: script.summary,
+                language: script.language,
+                content: truncatedContent,
+                schema: script.schema,
+                deletable: true
+            };
+            onSelectWorkspaceItem(element);
+        }
+        else if (currentView === 'flows') {
+            const flow = await workspaceRunnablesSearch.getFlow(path, workspace);
+            const flowValue = JSON.stringify(flow.value, null, 2);
+            const truncatedValue = flowValue.length > MAX_RUNNABLE_CONTENT_LENGTH
+                ? flowValue.slice(0, MAX_RUNNABLE_CONTENT_LENGTH) + '\n... (truncated)'
+                : flowValue;
+            const element = {
+                type: 'workspace_flow',
+                path: flow.path,
+                title: flow.path,
+                summary: flow.summary,
+                description: flow.description || '',
+                value: truncatedValue,
+                schema: flow.schema,
+                deletable: true
+            };
+            onSelectWorkspaceItem(element);
+        }
+        currentView = 'categories';
+        workspaceSearchQuery = '';
+        workspaceSearchResults = [];
+    }
+    catch (err) {
+        console.error('Error fetching workspace item', err);
+    }
 }
 function handleKeyDown(e) {
-    if (stringSearch.length > 0) {
+    if (isSearchableView) {
+        // Navigation in workspace search view
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (workspaceSearchResults.length > 0) {
+                itemSelectedIndex = (itemSelectedIndex + 1) % workspaceSearchResults.length;
+            }
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (workspaceSearchResults.length > 0) {
+                itemSelectedIndex =
+                    (itemSelectedIndex - 1 + workspaceSearchResults.length) %
+                        workspaceSearchResults.length;
+            }
+        }
+        else if (e.key === 'Enter') {
+            // Only select if not typing in the search input, or if results exist
+            if (workspaceSearchResults.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                const selectedItem = workspaceSearchResults[itemSelectedIndex];
+                if (selectedItem) {
+                    handleWorkspaceItemSelect(selectedItem.path);
+                }
+            }
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleBackClick();
+        }
+    }
+    else if (stringSearch.length > 0) {
         // Navigation in search view (flat list)
         if (e.key === 'ArrowDown') {
             e.preventDefault();
@@ -148,11 +283,13 @@ function handleKeyDown(e) {
         }
     }
 }
-// Listen for keyboard events
+// Listen for keyboard events + clean up debounce timer
 $effect(() => {
     document.addEventListener('keydown', handleKeyDown);
     return () => {
         document.removeEventListener('keydown', handleKeyDown);
+        if (searchDebounceTimer)
+            clearTimeout(searchDebounceTimer);
     };
 });
 $effect(() => {
@@ -164,9 +301,13 @@ $effect(() => {
 
 <div
 	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) =>
+	onmousedown={(e) => {
 		// avoids triggering onblur on the textinput and closing the tooltip
-		e.preventDefault()}
+		// but allow input elements to receive focus for the search input
+		if (!(e.target instanceof HTMLInputElement)) {
+			e.preventDefault()
+		}
+	}}
 	role="listbox"
 	tabindex={0}
 >
@@ -217,6 +358,68 @@ $effect(() => {
 		{#if availableCategories.length === 0}
 			<div class="text-center text-primary text-xs py-2">No available context</div>
 		{/if}
+	{:else if isSearchableView}
+		<!-- Workspace search view (scripts/flows) -->
+		<button
+			class="hover:bg-surface-hover rounded-md text-left flex flex-row gap-1 items-center font-normal transition-colors mb-1"
+			onclick={handleBackClick}
+		>
+			<ArrowLeft size={12} />
+			<span class="text-xs">Go back</span>
+		</button>
+
+		<input
+			bind:this={searchInputElement}
+			bind:value={workspaceSearchQuery}
+			oninput={handleSearchInput}
+			type="text"
+			placeholder="Search {currentView}..."
+			class="w-full text-xs px-2 py-1 rounded-md border border-gray-200 dark:border-gray-700 bg-surface mb-1 outline-none focus:border-blue-500"
+		/>
+
+		{#if workspaceSearchLoading}
+			<div class="flex items-center justify-center py-2 gap-1">
+				<Loader2 size={14} class="animate-spin" />
+				<span class="text-xs text-secondary">Searching...</span>
+			</div>
+		{:else if workspaceSearchResults.length === 0}
+			<div class="text-center text-secondary text-xs py-2">
+				No results found
+			</div>
+		{:else}
+			{#each workspaceSearchResults as item, i}
+				{@const isAlreadySelected = selectedContext.some(
+					(c) =>
+						((c.type === 'workspace_script' && currentView === 'scripts') ||
+							(c.type === 'workspace_flow' && currentView === 'flows')) &&
+						c.title === item.path
+				)}
+				<button
+					class="hover:bg-surface-hover rounded-md p-1 text-left flex flex-col font-normal transition-colors {i ===
+					itemSelectedIndex
+						? 'bg-surface-hover'
+						: ''} {isAlreadySelected ? 'opacity-50' : ''}"
+					onclick={() => {
+						if (!isAlreadySelected) {
+							handleWorkspaceItemSelect(item.path)
+						}
+					}}
+					disabled={isAlreadySelected}
+				>
+					<div class="flex flex-row gap-1 items-center">
+						{#if currentView === 'scripts'}
+							<Code2 size={14} class="shrink-0" />
+						{:else}
+							<BarsStaggered size={14} class="shrink-0" />
+						{/if}
+						<span class="truncate">{item.path}</span>
+					</div>
+					{#if item.summary}
+						<span class="truncate text-secondary pl-5">{item.summary}</span>
+					{/if}
+				</button>
+			{/each}
+		{/if}
 	{:else}
 		<!-- Category items view -->
 		<button

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

@@ -3,6 +3,7 @@ interface Props {
     availableContext: ContextElement[];
     selectedContext: ContextElement[];
     onSelect: (element: ContextElement) => void;
+    onSelectWorkspaceItem?: (element: ContextElement) => void;
     setShowing?: (showing: boolean) => void;
     showAllAvailable?: boolean;
     stringSearch?: string;

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

@@ -87,6 +87,50 @@ const isDeletable = $derived(deletable && contextElement.deletable !== false);
 					<div class="text-primary">{contextElement.title}</div>
 				</div>
 			{/if}
+		{:else if contextElement.type === 'app_frontend_file'}
+			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
+				<HighlightCode
+					language={contextElement.path.endsWith('.tsx') || contextElement.path.endsWith('.ts')
+						? 'bun'
+						: contextElement.path.endsWith('.css')
+							? 'bash'
+							: 'bun'}
+					code={contextElement.content}
+					className="w-full p-2"
+				/>
+			</div>
+		{:else if contextElement.type === 'app_backend_runnable'}
+			<div class="p-2 max-w-96 max-h-[300px] text-xs overflow-auto">
+				{#if contextElement.runnable.inlineScript}
+					<HighlightCode
+						language={contextElement.runnable.inlineScript.language}
+						code={contextElement.runnable.inlineScript.content}
+						className="w-full p-2"
+					/>
+				{:else}
+					<ObjectViewer json={contextElement.runnable} pureViewer collapseLevel={2} />
+				{/if}
+			</div>
+		{:else if contextElement.type === 'app_code_selection'}
+			<div class="max-w-96 max-h-[300px] text-xs overflow-auto">
+				<div class="text-tertiary text-xs mb-1 px-2 pt-1">
+					{contextElement.source} (L{contextElement.startLine}-L{contextElement.endLine})
+				</div>
+				<HighlightCode
+					language="bun"
+					code={contextElement.content}
+					className="w-full p-2"
+				/>
+			</div>
+		{: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}
+				</div>
+				<ObjectViewer json={contextElement.columns} pureViewer collapseLevel={1} />
+			</div>
 		{/if}
 	{/snippet}
 </Popover>

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

@@ -120,8 +120,10 @@ function getCaretCoordinates(element, position) {
 }
 function getHighlightedText(text) {
     return text.replace(/@[\w/.\-\[\]]+/g, (match) => {
-        const contextElement = availableContext.find((c) => c.title === match.slice(1));
-        if (contextElement) {
+        const title = match.slice(1);
+        const inContext = availableContext.find((c) => c.title === title) ||
+            selectedContext.find((c) => c.title === title);
+        if (inContext) {
             return `<span class="bg-black dark:bg-white text-white dark:text-black z-10">${match}</span>`;
         }
         return match;
@@ -259,6 +261,10 @@ export function focus() {
 		oninput={handleInput}
 		onblur={() => {
 			setTimeout(() => {
+				// Don't close if focus moved to inside the tooltip (e.g., search input)
+				if (tooltipElement?.contains(document.activeElement)) {
+					return
+				}
 				showContextTooltip = false
 			}, 200)
 		}}
@@ -285,6 +291,13 @@ export function focus() {
 				onSelect={(element) => {
 					handleContextSelection(element)
 				}}
+				onSelectWorkspaceItem={(element) => {
+					onAddContext(element)
+					updateInstructionsWithContext(element)
+					showContextTooltip = false
+					// Refocus the textarea since focus may have been on the search input
+					setTimeout(() => textarea?.focus(), 0)
+				}}
 				showAllAvailable={true}
 				stringSearch={contextTooltipWord.slice(1)}
 				onViewChange={(newNumber) => {

package/package/components/copilot/chat/DatatableCreationPolicy.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { AlertTriangle } from 'lucide-svelte';
 import Toggle from '../../Toggle.svelte';
-import { aiChatManager, AIMode } from './AIChatManager.svelte';
+import { aiChatManager } from './AIChatManager.svelte';
 import DefaultDatabaseSelector from '../../raw_apps/DefaultDatabaseSelector.svelte';
 import { workspaceStore } from '../../../stores';
 import { createDatatablesResource } from '../../raw_apps/datatableUtils.svelte';
@@ -9,7 +9,8 @@ const datatables = createDatatablesResource(() => $workspaceStore);
 const hasNoDatatables = $derived((datatables.current?.length ?? 0) === 0);
 // Auto-select first datatable when datatables load and none is selected
 $effect(() => {
-    if (datatables.current.length > 0 &&
+    if (datatables.current &&
+        datatables.current.length > 0 &&
         aiChatManager.datatableCreationPolicy.enabled &&
         !aiChatManager.datatableCreationPolicy.datatable) {
         aiChatManager.datatableCreationPolicy.datatable = datatables.current[0];
@@ -29,35 +30,33 @@ function handleDefaultChange(datatable, schema) {
 }
 </script>
 
-{#if aiChatManager.mode === AIMode.APP}
-	<div class="min-w-0 flex items-center gap-1 pt-0.5">
-		{#if hasNoDatatables}
-			<!-- Warning when no datatables are available -->
-			<div
-				class="text-2xs flex flex-row items-center gap-1 text-red-600 dark:text-red-400 px-1"
-				title="No datatables configured. Add datatables in the Data panel so AI can create tables."
-			>
-				<AlertTriangle size={12} class="shrink-0" />
-				<span class="truncate">No datatables</span>
-			</div>
-		{:else}
-			<!-- Toggle for new tables -->
-			<div class="flex items-center gap-1">
-				<Toggle
-					size="xs"
-					checked={aiChatManager.datatableCreationPolicy.enabled}
-					on:change={(e) => handleToggle(e.detail)}
-				/>
-				<span class="text-2xs text-secondary whitespace-nowrap">tables creation</span>
-			</div>
-
-			<!-- Settings icon with popover -->
-			<DefaultDatabaseSelector
-				datatable={aiChatManager.datatableCreationPolicy.datatable}
-				schema={aiChatManager.datatableCreationPolicy.schema}
-				onChange={handleDefaultChange}
-				description="Set the default datatable and schema for new tables. When table creation is enabled, AI can create tables here if needed."
+<div class="min-w-0 flex items-center gap-1 pt-0.5">
+	{#if hasNoDatatables}
+		<!-- Warning when no datatables are available -->
+		<div
+			class="text-2xs flex flex-row items-center gap-1 text-red-600 dark:text-red-400 px-1"
+			title="No datatables configured. Add datatables in the Data panel so AI can create tables."
+		>
+			<AlertTriangle size={12} class="shrink-0" />
+			<span class="truncate">No datatables</span>
+		</div>
+	{:else}
+		<!-- Toggle for new tables -->
+		<div class="flex items-center gap-1">
+			<Toggle
+				size="xs"
+				checked={aiChatManager.datatableCreationPolicy.enabled}
+				on:change={(e) => handleToggle(e.detail)}
 			/>
-		{/if}
-	</div>
-{/if}
+			<span class="text-2xs text-secondary whitespace-nowrap">tables creation</span>
+		</div>
+
+		<!-- Settings icon with popover -->
+		<DefaultDatabaseSelector
+			datatable={aiChatManager.datatableCreationPolicy.datatable}
+			schema={aiChatManager.datatableCreationPolicy.schema}
+			onChange={handleDefaultChange}
+			description="Set the default datatable and schema for new tables. When table creation is enabled, AI can create tables here if needed."
+		/>
+	{/if}
+</div>

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-primary text-xs flex flex-row items-center font-normal gap-0.5">
+			<div class="text-secondary text-2xs 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">

package/package/components/copilot/chat/__tests__/app/appEvalHelpers.js

@@ -90,6 +90,9 @@ export function createAppEvalHelpers(initialFrontend = {}, initialBackend = {})
         execDatatableSql: async (_datatableName, _sql, _newTable) => {
             // Return success with empty result for eval testing
             return { success: true, result: [] };
+        },
+        addTableToWhitelist: (_datatableName, _schemaName, _tableName) => {
+            // No-op for eval testing - tables are not tracked in test context
         }
     };
     return {

package/package/components/copilot/chat/__tests__/app/variants/streamlined.js

@@ -50,7 +50,7 @@ For inline scripts, the code must have a \`main\` function as its entrypoint.
 - \`lint()\`: Lint all files. Returns errors/warnings grouped by frontend/backend.
 
 ### Discovery
-- \`list_workspace_runnables(query, type?)\`: Search workspace scripts and flows
+- \`search_workspace(query, type)\`: Search workspace scripts and flows
 - \`search_hub_scripts(query)\`: Search hub scripts
 
 ## Backend Runnable Configuration

package/package/components/copilot/chat/__tests__/flow/flowEvalHelpers.js

@@ -65,6 +65,10 @@ export function createFlowEvalHelpers(initialModules = [], initialSchema) {
         testFlow: async () => {
             // Return mock job ID - we don't actually run flows in eval
             return 'mock-job-id-' + Date.now();
+        },
+        getLintErrors: async () => {
+            // Return empty lint result for eval
+            return { errorCount: 0, warningCount: 0, errors: [], warnings: [] };
         }
     };
     return {

package/package/components/copilot/chat/__tests__/flow/variants/minimal-single-tool.js

@@ -72,7 +72,8 @@ const MINIMAL_SINGLE_TOOL_SYSTEM_PROMPT = `You are a helpful assistant that crea
 
 **Code & Scripts:**
 - **Get language-specific coding instructions** → \`get_instructions_for_code_generation\` (call BEFORE writing code)
-- **Find workspace scripts** → \`search_scripts\`
+- **Find workspace scripts and flows** → \`search_workspace\`
+- **Get details of a specific script or flow** → \`get_runnable_details\`
 - **Find Windmill Hub scripts** → \`search_hub_scripts\`
 
 **Testing:**
@@ -298,7 +299,8 @@ Example: Before writing TypeScript/Bun code, call \`get_instructions_for_code_ge
 ### Creating Flows
 
 1. **Search for existing scripts first** (unless user explicitly asks to write from scratch):
-   - First: \`search_scripts\` to find workspace scripts
+   - First: \`search_workspace\` to find workspace scripts and flows
+   - Use \`get_runnable_details\` to inspect a specific script or flow (inputs, description, code)
    - Then: \`search_hub_scripts\` (only consider highly relevant results)
    - Only create raw scripts if no suitable script is found
 

package/package/components/copilot/chat/app/core.d.ts

@@ -1,5 +1,6 @@
 import type { ChatCompletionSystemMessageParam, ChatCompletionUserMessageParam } from 'openai/resources/chat/completions.mjs';
 import { type Tool } from '../shared';
+import type { ContextElement, AppCodeSelectionElement } from '../context';
 export type BackendRunnableType = 'script' | 'flow' | 'hubscript' | 'inline';
 export interface InlineScript {
     language: 'bun' | 'python3';
@@ -32,28 +33,66 @@ export interface LintResult {
     /** Warning messages grouped by source type */
     warnings: LintMessages;
 }
+/** Information about an element selected via the inspector tool */
+export interface InspectorElementInfo {
+    /** CSS selector path to the element */
+    path: string;
+    /** Tag name of the element (e.g., 'div', 'button') */
+    tagName: string;
+    /** Element's id attribute, if any */
+    id?: string;
+    /** Element's class names, if any */
+    className?: string;
+    /** Bounding rectangle of the element */
+    rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    /** Outer HTML of the element (may be truncated) */
+    html: string;
+    /** Text content of the element (may be truncated) */
+    textContent?: string;
+    /** Computed styles of the element */
+    styles: Record<string, string>;
+}
 /** Context about the currently selected file or runnable in the app editor */
 export interface SelectedContext {
     /** Type of selection: 'frontend' for frontend files, 'backend' for backend runnables, or 'none' if nothing is selected */
     type: 'frontend' | 'backend' | 'none';
     /** The path of the selected frontend file (when type is 'frontend') */
     frontendPath?: string;
+    /** The content of the selected frontend file */
+    frontendContent?: string;
     /** The key of the selected backend runnable (when type is 'backend') */
     backendKey?: string;
+    /** The configuration of the selected backend runnable */
+    backendRunnable?: BackendRunnable;
+    /** Inspector-selected element info (when user has used the inspector tool) */
+    inspectorElement?: InspectorElementInfo;
+    /** Whether the file/runnable selection is excluded from being sent to the AI prompt */
+    selectionExcluded?: boolean;
+    /** Function to toggle whether the selection is excluded from the prompt */
+    toggleSelectionExcluded?: () => void;
+    /** Function to clear the inspector selection */
+    clearInspector?: () => void;
+    /** Function to clear the runnable selection (go back to frontend view) */
+    clearRunnable?: () => void;
+    /** Code selection from the editor (either frontend or backend) */
+    codeSelection?: AppCodeSelectionElement;
+    /** Function to clear the code selection */
+    clearCodeSelection?: () => void;
 }
-/** Schema for a table in a datatable */
-export interface DataTableTableSchema {
-    schema: string;
-    table: string;
-    columns: Record<string, {
-        type: string;
-        required: boolean;
-    }>;
-}
-/** Full datatable info including schema */
-export interface DataTableInfo {
-    name: string;
-    tables: DataTableTableSchema[];
+/**
+ * Datatable schema matching the backend's DataTableSchema type.
+ * Hierarchical structure: schema_name -> table_name -> column_name -> compact_type
+ * Compact type format: 'type[?][=default]' where ? means nullable (e.g. 'int4', 'text?', 'int4?=0')
+ */
+export interface DataTableSchema {
+    datatable_name: string;
+    schemas: Record<string, Record<string, Record<string, string>>>;
+    error?: string;
 }
 export interface AppAIChatHelpers {
     listFrontendFiles: () => string[];
@@ -78,7 +117,7 @@ export interface AppAIChatHelpers {
     /** Lint all frontend files and backend runnables, returns errors and warnings */
     lint: () => LintResult;
     /** Get all datatables configured in the app with their schemas */
-    getDatatables: () => Promise<DataTableInfo[]>;
+    getDatatables: () => Promise<DataTableSchema[]>;
     /** Get unique datatable names configured in the app (for UI policy selector) */
     getAvailableDatatableNames: () => string[];
     /** Execute a SQL query on a datatable. Optionally specify newTable to register a newly created table. */
@@ -90,7 +129,9 @@ export interface AppAIChatHelpers {
         result?: Record<string, any>[];
         error?: string;
     }>;
+    /** Add a table to the app's whitelisted tables (called when user selects a table via @) */
+    addTableToWhitelist: (datatableName: string, schemaName: string, tableName: string) => void;
 }
 export declare const getAppTools: () => Tool<AppAIChatHelpers>[];
 export declare function prepareAppSystemMessage(customPrompt?: string): ChatCompletionSystemMessageParam;
-export declare function prepareAppUserMessage(instructions: string, selectedContext?: SelectedContext): ChatCompletionUserMessageParam;
+export declare function prepareAppUserMessage(instructions: string, selectedContext?: SelectedContext, additionalContext?: ContextElement[]): ChatCompletionUserMessageParam;