windmill-components 1.700.1 → 1.700.3

package/dist/sharedUtils/svelte5Utils.svelte.d.ts

@@ -1,6 +1,4 @@
-import { type StateStore } from './utils';
-import * as runed from 'runed/kit';
-import type z from 'zod';
+import type { StateStore } from './utils';
 export declare function withProps<Component, Props>(component: Component, props: Props): {
     component: Component;
     props: Props;
@@ -32,9 +30,6 @@ export type UsePromiseOptions = {
     loadInit?: boolean;
     clearValueOnRefresh?: boolean;
 };
-/**
- * @deprecated Use `resource` from `runed` instead
- */
 export declare function usePromise<T>(createPromise: () => Promise<T>, { loadInit, clearValueOnRefresh }?: UsePromiseOptions): UsePromiseResult<T>;
 /**
  * Generic change tracker class that monitors changes in state using deep equality comparison
@@ -52,29 +47,3 @@ export declare class ChangeTracker<T> {
      */
     track(value: T): boolean;
 }
-/**
- * This allows using async resources that only fetch missing data based on a set of keys.
- * It maintains a Record of the fetched data and only calls the fetcher for keys that
- * are not already present in the map.
- * The fetcher takes a record of keys to allow fetching multiple items in a single call.
- */
-export declare class MapResource<U, T> {
-    private _cached;
-    private _fetcherResource;
-    constructor(getValues: () => Record<string, U>, fetcher: (toFetch: Record<string, U>) => Promise<Record<string, T>>);
-    get current(): Record<string, T> | undefined;
-    get loading(): boolean;
-    get error(): Error | undefined;
-}
-export declare class ChangeOnDeepInequality<T> {
-    private _cached;
-    constructor(compute: () => T);
-    get value(): T;
-}
-export declare function useSearchParams<S extends z.ZodType>(schema: S, options?: runed.SearchParamsOptions): runed.ReturnUseSearchParams<S>;
-export declare class StaleWhileLoading<T> {
-    private _current;
-    private _currentTimeout;
-    constructor(getter: () => T, timeout?: number);
-    get current(): T | undefined;
-}

package/dist/sharedUtils/utils.d.ts

@@ -38,7 +38,7 @@ export declare function validateUsername(username: string): string;
 export declare function parseQueryParams(url: string | undefined): Record<string, string>;
 export declare function displayDateOnly(dateString: string | Date | undefined): string;
 export declare function retrieveCommonWorkerPrefix(workerName: string): string;
-export declare function subtractDaysFromDateString(dateString: string | null, days: number): string | undefined;
+export declare function subtractDaysFromDateString(dateString: string | undefined, days: number): string | undefined;
 export declare function displayDate(dateString: string | Date | undefined, displaySecond?: boolean, displayDate?: boolean): string;
 export declare function displayTime(dateString: string | Date | undefined): string;
 export declare function displaySize(sizeInBytes: number | undefined): string | undefined;
@@ -63,7 +63,6 @@ export declare function clickOutside(node: Node, options?: ClickOutsideOptions |
     destroy(): void;
     update(newOptions: ClickOutsideOptions | boolean): void;
 };
-export declare function undefinedIfEmpty(obj: any): any;
 export declare function pointerDownOutside(node: Node, options?: ClickOutsideOptions): {
     destroy(): void;
     update(newOptions: ClickOutsideOptions): void;
@@ -137,12 +136,6 @@ export declare function throttle<T>(func: (...args: any[]) => T, wait: number):
 export declare function isMac(): boolean;
 export declare function getModifierKey(): string;
 export declare function isValidHexColor(color: string): boolean;
-/**
- * Generates a text color with the same hue as the background but adjusted lightness for good contrast
- * @param backgroundColor Hex color string (e.g., "#FF0000" or "#F00")
- * @returns Hex color string with same hue but good contrast, or undefined if invalid
- */
-export declare function getContrastTextColor(backgroundColor: string | null | undefined): string | undefined;
 export declare function sortObject<T>(o: T & object): T;
 export declare function sortArray<T>(array: T[], compareFn?: (a: T, b: T) => number): T[];
 export declare function generateRandomString(len?: number): string;
@@ -187,7 +180,7 @@ export declare function getSchemaFromProperties(properties: {
 }): Schema;
 export declare function validateFileExtension(ext: string): boolean;
 export declare function isFlowPreview(job_kind: Job['job_kind'] | undefined): job_kind is "flowpreview" | "flownode";
-export declare function isNotFlow(job_kind: Job['job_kind'] | undefined): job_kind is "script" | "aiagent" | "identity" | "preview" | "dependencies" | "flowdependencies" | "appdependencies" | "script_hub" | "deploymentcallback" | "flowscript" | "appscript" | "unassigned_script" | "unassigned_flow" | "unassigned_singlestepflow" | undefined;
+export declare function isNotFlow(job_kind: Job['job_kind'] | undefined): job_kind is "script" | "aiagent" | "identity" | "preview" | "dependencies" | "flowdependencies" | "appdependencies" | "script_hub" | "deploymentcallback" | "flowscript" | "appscript" | undefined;
 export declare function isScriptPreview(job_kind: Job['job_kind'] | undefined): job_kind is "preview" | "flowscript" | "appscript";
 export declare function conditionalMelt(node: HTMLElement, meltItem: AnyMeltElement | undefined): void | import("svelte/action").ActionReturn<undefined, Record<never, any>>;
 export type Item = {
@@ -202,7 +195,6 @@ export type Item = {
     hide?: boolean | undefined;
     extra?: Snippet;
     id?: string;
-    tooltip?: string;
 };
 export declare function isObjectTooBig(obj: any): boolean;
 export declare function localeConcatAnd(items: string[]): string;
@@ -210,9 +202,11 @@ export declare function formatDate(dateString: string | undefined): string;
 export declare function formatDateShort(dateString: string | undefined): string;
 export declare function toJsonStr(result: any): string;
 export declare function getOS(): "Windows" | "macOS" | "iOS" | "Android" | "Linux" | "Unknown OS";
+import { type ClassValue } from 'clsx';
 import type { Component, Snippet } from 'svelte';
 import { OpenAPIV2, type OpenAPI, type OpenAPIV3, type OpenAPIV3_1 } from 'openapi-types';
 import type { IPosition } from 'monaco-editor';
+export declare function cn(...inputs: ClassValue[]): string;
 export type StateStore<T> = {
     val: T;
 };
@@ -247,7 +241,6 @@ export declare function wait(ms: number): Promise<unknown>;
 export declare function validateRetryConfig(retry: Retry | undefined): string | null;
 export type CssColor = keyof (typeof tokensFile)['tokens']['light'];
 import tokensFile from './assets/tokens/tokens.json';
-import { Package } from 'lucide-svelte';
 export declare function getCssColor(color: CssColor, { alpha, format }: {
     alpha?: number;
     format?: 'css-var' | 'hex-dark' | 'hex-light';
@@ -255,11 +248,3 @@ export declare function getCssColor(color: CssColor, { alpha, format }: {
 export type IconType = Component<{
     size?: number;
 }> | typeof import('lucide-svelte').Dot;
-export declare function getJobKindIcon(jobKind: Job['job_kind']): import("svelte/legacy").LegacyComponentType | typeof Package | undefined;
-export declare function chunkBy<T>(array: T[], getKey: (key: T) => string): T[][];
-export declare function getQueryStmtCountHeuristic(query: string): number;
-export declare function countChars(str: string, char: string): number;
-export declare function buildReactiveObj<T extends object>(fields: {
-    [name in keyof T]: [() => T[name], (v: T[name]) => void];
-}): T;
-export declare function pick<T extends object, K extends keyof T>(obj: T, keys: readonly K[]): Pick<T, K>;

package/package/components/DisplayResultControlBar.svelte

@@ -2,6 +2,7 @@
 import { Download, InfoIcon, ClipboardCopy, Expand } from 'lucide-svelte';
 import Popover from './Popover.svelte';
 import { copyToClipboard } from '../utils';
+import { downloadViaClient, shouldDownloadViaClient } from '../utils/downloadFile';
 import { createEventDispatcher } from 'svelte';
 let { customUi = undefined, filename = undefined, workspaceId = undefined, jobId = undefined, nodeId = undefined, base, result, disableTooltips = false } = $props();
 const dispatch = createEventDispatcher();
@@ -13,21 +14,35 @@ function toJsonStr(result) {
         return 'error stringifying object: ' + e.toString();
     }
 }
+let resultApiPath = $derived(workspaceId && jobId
+    ? nodeId
+        ? `/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
+        : `/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+    : undefined);
+let downloadName = $derived(`${filename ?? 'result'}.json`);
 </script>
 
 <div class={twMerge('flex flex-row gap-2.5 z-10 text-primary -mt-1 items-center')}>
 	{#if customUi?.disableDownload !== true}
-		<a
-			download="{filename ?? 'result'}.json"
-			class="text-current"
-			href={workspaceId && jobId
-				? nodeId
-					? `${base}/api/w/${workspaceId}/jobs/result_by_id/${jobId}/${nodeId}`
-					: `${base}/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-				: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-		>
-			<Download size={14} />
-		</a>
+		{#if resultApiPath && shouldDownloadViaClient()}
+			<button
+				class="text-current"
+				onclick={() => downloadViaClient(resultApiPath!, downloadName)}
+				aria-label="Download result"
+			>
+				<Download size={14} />
+			</button>
+		{:else}
+			<a
+				download={downloadName}
+				class="text-current"
+				href={resultApiPath
+					? `${base}/api${resultApiPath}`
+					: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+			>
+				<Download size={14} />
+			</a>
+		{/if}
 	{/if}
 	{#if disableTooltips !== true}
 		<Popover documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering">

package/package/components/JobArgs.svelte

@@ -11,10 +11,14 @@ import Row from './table/Row.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import { deepEqual } from 'fast-equals';
 import { isWindmillTooBigObject } from './job_args';
+import { downloadViaClient, shouldDownloadViaClient } from '../utils/downloadFile';
 let { id = undefined, args, argLabel = undefined, workspace = undefined } = $props();
 let jsonViewer = $state();
 let runLocally = $state();
 let jsonStr = $state('');
+const argsDownloadName = 'windmill-args.json';
+let argsApiPath = $derived(id && workspace ? `/w/${workspace}/jobs_u/get_args/${id}` : undefined);
+let argsDataHref = $derived(`data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`);
 function pythonCode() {
     return `
 if __name__ == "__main__":
@@ -47,10 +51,12 @@ ${Object.entries(args)
 {#if args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
 	Preprocessor args are discarded
 {:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args ?? {}), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
-	The args are too big in size to be able to fetch alongside job. Please <a
-		href="/api/w/{workspace}/jobs_u/get_args/{id}"
-		target="_blank">download the JSON file to view them</a
-	>.
+	The args are too big in size to be able to fetch alongside job. Please {#if shouldDownloadViaClient()}<button
+			class="text-blue-500 hover:underline"
+			onclick={() => downloadViaClient(argsApiPath!, argsDownloadName)}
+			>download the JSON file to view them</button
+		>{:else}<a href="/api{argsApiPath}" target="_blank">download the JSON file to view them</a
+		>{/if}.
 {:else}
 	<div class="relative">
 		<DataTable size="sm" containerClass="bg-surface-tertiary">
@@ -107,17 +113,26 @@ ${Object.entries(args)
 <Drawer bind:this={jsonViewer} size="900px">
 	<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
 		{#snippet actions()}
-			<Button
-				download="windmill-args.json"
-				href={id && workspace
-					? `/api/w/${workspace}/jobs_u/get_args/${id}`
-					: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
-				startIcon={{ icon: Download }}
-				size="xs"
-				color="light"
-			>
-				Download
-			</Button>
+			{#if argsApiPath && shouldDownloadViaClient()}
+				<Button
+					on:click={() => downloadViaClient(argsApiPath!, argsDownloadName)}
+					startIcon={{ icon: Download }}
+					size="xs"
+					color="light"
+				>
+					Download
+				</Button>
+			{:else}
+				<Button
+					download={argsDownloadName}
+					href={argsApiPath ? `/api${argsApiPath}` : argsDataHref}
+					startIcon={{ icon: Download }}
+					size="xs"
+					color="light"
+				>
+					Download
+				</Button>
+			{/if}
 			<Button
 				on:click={() => runLocally?.openDrawer()}
 				color="light"
@@ -137,15 +152,19 @@ ${Object.entries(args)
 		{/snippet}
 		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
 			<div class="text-sm mb-2 text-primary">
-				<a
-					download="windmill-args.json"
-					href={id && workspace
-						? `/api/w/${workspace}/jobs_u/get_args/${id}`
-						: `data:text/json;charset=utf-8,${encodeURIComponent(jsonStr)}`}
-				>
-					JSON is too large to be displayed in full.
-				</a></div
-			>
+				{#if argsApiPath && shouldDownloadViaClient()}
+					<button
+						class="underline"
+						onclick={() => downloadViaClient(argsApiPath!, argsDownloadName)}
+					>
+						JSON is too large to be displayed in full.
+					</button>
+				{:else}
+					<a download={argsDownloadName} href={argsApiPath ? `/api${argsApiPath}` : argsDataHref}>
+						JSON is too large to be displayed in full.
+					</a>
+				{/if}
+			</div>
 		{:else}
 			<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
 		{/if}

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "volume" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "sqs_trigger" | "gcp_trigger" | "azure_trigger" | "email_trigger" | "group_", isOwnerOverride?: boolean) => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "volume" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger" | "azure_trigger", isOwnerOverride?: boolean) => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -84,7 +84,6 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
             path?: string;
             lock?: string;
             cache_ttl?: number;
-            tag?: string;
         };
         id?: number;
         force_viewer_static_fields?: {
@@ -94,8 +93,6 @@ declare const RunnableComponent: $$__sveltets_2_IsomorphicComponent<Props, {
             [key: string]: unknown;
         };
         force_viewer_allow_user_resources?: Array<(string)>;
-        force_viewer_sensitive_inputs?: Array<(string)>;
-        force_viewer_delete_after_secs?: number;
         run_query_params?: {
             [key: string]: unknown;
         };

package/package/components/copilot/CustomAIPrompts.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { AIMode } from './chat/AIChatManager.svelte';
+<script lang="ts">import { AIMode, getVisibleAIModes } from './chat/AIChatManager.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import Label from '../Label.svelte';
@@ -6,6 +6,7 @@ import autosize from '../../autosize';
 const MAX_CUSTOM_PROMPT_LENGTH = 5000;
 let { customPrompts = $bindable(), title, description } = $props();
 let selectedAiMode = $state(AIMode.ASK);
+let visibleModes = $derived(getVisibleAIModes());
 </script>
 
 <div class="flex flex-col gap-2">
@@ -17,7 +18,7 @@ let selectedAiMode = $state(AIMode.ASK);
 		<Label label="AI Mode">
 			<ToggleButtonGroup bind:selected={selectedAiMode}>
 				{#snippet children({ item })}
-					{#each Object.values(AIMode) as mode}
+					{#each visibleModes as mode (mode)}
 						<div class="relative">
 							<ToggleButton
 								value={mode}

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

@@ -30,6 +30,8 @@ const modePlaceholder = $derived.by(() => {
             return 'Navigate Windmill UI...';
         case AIMode.API:
             return 'Make API calls...';
+        case AIMode.GLOBAL:
+            return 'Work across workspace items...';
         case AIMode.ASK:
             return 'Ask questions about Windmill...';
         default:

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

@@ -22,6 +22,8 @@ import { createAppBackendRunnableContextElement, createAppFrontendFileContextEle
 import { prepareApiSystemMessage, prepareApiUserMessage } from './api/core';
 import { runChatLoop } from './chatLoop';
 import { getCurrentModel, tryGetCurrentModel, getCombinedCustomPrompt } from '../../../aiStore';
+import { globalTools, prepareGlobalSystemMessage, prepareGlobalUserMessage } from './global/core';
+import { isGlobalAiEnabled } from './global/gate';
 // 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;
@@ -32,8 +34,19 @@ export var AIMode;
     AIMode["APP"] = "app";
     AIMode["NAVIGATOR"] = "navigator";
     AIMode["API"] = "API";
+    AIMode["GLOBAL"] = "global";
     AIMode["ASK"] = "ask";
 })(AIMode || (AIMode = {}));
+const ALL_AI_MODES = Object.values(AIMode);
+export function isAIMode(mode) {
+    return ALL_AI_MODES.includes(mode);
+}
+export function isAIModeVisible(mode) {
+    return mode !== AIMode.GLOBAL || isGlobalAiEnabled();
+}
+export function getVisibleAIModes() {
+    return ALL_AI_MODES.filter(isAIModeVisible);
+}
 function isWorkspacePath(path) {
     return path?.startsWith('f/') === true || path?.startsWith('u/') === true;
 }
@@ -82,7 +95,9 @@ class AIChatManager {
         app: this.appAiChatHelpers !== undefined,
         navigator: true,
         ask: true,
-        API: true
+        API: true,
+        // Dev-only gate. See `./global/gate.ts` for how to enable.
+        global: isAIModeVisible(AIMode.GLOBAL)
     });
     open = $derived(chatState.size > 0);
     checkTokenUsageOverLimit = (messages) => {
@@ -182,6 +197,8 @@ class AIChatManager {
         };
     };
     changeMode(mode, pendingPrompt, options) {
+        if (!isAIModeVisible(mode))
+            return;
         if (mode === AIMode.SCRIPT && !tryGetCurrentModel())
             return;
         this.mode = mode;
@@ -251,6 +268,12 @@ class AIChatManager {
             this.tools = [...this.apiTools];
             this.helpers = {};
         }
+        else if (mode === AIMode.GLOBAL) {
+            const customPrompt = getCombinedCustomPrompt(mode);
+            this.systemMessage = prepareGlobalSystemMessage(customPrompt);
+            this.tools = [...globalTools];
+            this.helpers = {};
+        }
         else if (mode === AIMode.APP) {
             const customPrompt = getCombinedCustomPrompt(mode);
             this.systemMessage = prepareAppSystemMessage(customPrompt);
@@ -264,14 +287,24 @@ class AIChatManager {
             type: 'function',
             function: {
                 name: 'change_mode',
-                description: 'Change the AI mode to the one specified. Script mode is used to create scripts. Flow mode is used to create flows. Navigator mode is used to navigate the application and help the user find what they are looking for. API mode is used to make API calls to the Windmill backend.',
+                description: 'Change the AI mode to the one specified. Script mode is used to create scripts. Flow mode is used to create flows.' +
+                    (isGlobalAiEnabled()
+                        ? ' Global mode is used to inspect workspace scripts and flows and create draft changes.'
+                        : '') +
+                    ' Navigator mode is used to navigate the application and help the user find what they are looking for. API mode is used to make API calls to the Windmill backend.',
                 parameters: {
                     type: 'object',
                     properties: {
                         mode: {
                             type: 'string',
                             description: 'The mode to change to',
-                            enum: ['script', 'flow', 'navigator', 'API']
+                            enum: [
+                                'script',
+                                'flow',
+                                ...(isGlobalAiEnabled() ? ['global'] : []),
+                                'navigator',
+                                'API'
+                            ]
                         },
                         pendingPrompt: {
                             type: 'string',
@@ -284,6 +317,9 @@ class AIChatManager {
             }
         },
         fn: async ({ args, toolId, toolCallbacks }) => {
+            if (!isAIMode(args.mode) || !isAIModeVisible(args.mode)) {
+                throw new Error(`AI mode "${args.mode}" is not enabled`);
+            }
             toolCallbacks.setToolStatus(toolId, { content: 'Switching to ' + args.mode + ' mode...' });
             this.changeMode(args.mode, args.pendingPrompt, {
                 closeScriptSettings: true
@@ -393,6 +429,9 @@ class AIChatManager {
                     else if (this.mode === AIMode.NAVIGATOR) {
                         return prepareNavigatorUserMessage(pendingPrompt);
                     }
+                    else if (this.mode === AIMode.GLOBAL) {
+                        return prepareGlobalUserMessage(pendingPrompt);
+                    }
                     return undefined;
                 },
                 onBeforeIteration: async (tools) => {
@@ -493,18 +532,14 @@ class AIChatManager {
         }
     };
     sendRequest = async (options = {}) => {
-        if (options.mode) {
-            this.changeMode(options.mode, undefined, {
-                lang: options.lang,
-                isPreprocessor: options.isPreprocessor
-            });
-        }
-        else {
-            this.changeMode(this.mode, undefined, {
-                lang: options.lang,
-                isPreprocessor: options.isPreprocessor
-            });
+        const requestedMode = options.mode ?? this.mode;
+        if (!isAIModeVisible(requestedMode)) {
+            return;
         }
+        this.changeMode(requestedMode, undefined, {
+            lang: options.lang,
+            isPreprocessor: options.isPreprocessor
+        });
         if (options.instructions) {
             this.instructions = options.instructions;
         }
@@ -579,6 +614,9 @@ class AIChatManager {
                 case AIMode.API:
                     userMessage = prepareApiUserMessage(oldInstructions);
                     break;
+                case AIMode.GLOBAL:
+                    userMessage = prepareGlobalUserMessage(oldInstructions);
+                    break;
                 case AIMode.APP:
                     userMessage = prepareAppUserMessage(oldInstructions, this.appAiChatHelpers?.getSelectedContext(), oldSelectedContext);
                     break;

package/package/components/copilot/chat/CreatedResourceActionDrawers.svelte

@@ -2,12 +2,16 @@
 import { Drawer } from '../../common';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import { Loader2 } from 'lucide-svelte';
+import ResourceEditorDrawer from '../../ResourceEditorDrawer.svelte';
+import VariableEditor from '../../VariableEditor.svelte';
 import { registerToolDisplayActionHandler } from './createdResourceActions.svelte';
 const DRAWER_SIZE = '800px';
 let drawer = $state(undefined);
 let editor = $state(undefined);
 let activeDrawer = $state(undefined);
 let nextActiveDrawerId = 0;
+let resourceEditorDrawer = $state(undefined);
+let variableEditor = $state(undefined);
 const drawerConfigs = {
     schedule: {
         label: 'schedule',
@@ -84,6 +88,14 @@ async function openCreatedResource(action) {
     if (action.type !== 'open_created_resource') {
         return;
     }
+    if (action.resource === 'resource') {
+        await resourceEditorDrawer?.initEdit(action.path);
+        return;
+    }
+    if (action.resource === 'variable') {
+        await variableEditor?.editVariable(action.path);
+        return;
+    }
     const key = action.resource === 'schedule' ? 'schedule' : action.triggerKind;
     if (!key) {
         throw new Error('Missing trigger kind');
@@ -127,3 +139,6 @@ onDestroy(() => {
 		{/if}
 	</DrawerContent>
 </Drawer>
+
+<ResourceEditorDrawer bind:this={resourceEditorDrawer} />
+<VariableEditor bind:this={variableEditor} />

package/package/components/copilot/chat/ToolMessageActions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Button } from '../../common';
-import { Calendar, Database, Route, SquarePen, Unplug, Webhook } from 'lucide-svelte';
+import { Calendar, Database, KeyRound, Package, Route, SquarePen, Unplug, Webhook } from 'lucide-svelte';
 import AwsIcon from '../../icons/AwsIcon.svelte';
 import AzureIcon from '../../icons/AzureIcon.svelte';
 import GoogleCloudIcon from '../../icons/GoogleCloudIcon.svelte';
@@ -11,6 +11,8 @@ let { actions } = $props();
 let runningActionId = $state(undefined);
 const actionCardConfigs = {
     schedule: { title: 'Schedule', icon: Calendar },
+    resource: { title: 'Resource', icon: Package },
+    variable: { title: 'Variable', icon: KeyRound },
     http: { title: 'HTTP trigger', icon: Route },
     websocket: { title: 'WebSocket trigger', icon: Unplug },
     postgres: { title: 'Postgres trigger', icon: Database },
@@ -22,7 +24,7 @@ const actionCardConfigs = {
     azure: { title: 'Azure Event Grid trigger', icon: AzureIcon }
 };
 function getActionCardConfig(action) {
-    const key = action.resource === 'schedule' ? 'schedule' : action.triggerKind;
+    const key = action.resource === 'trigger' ? action.triggerKind : action.resource;
     return key
         ? actionCardConfigs[key]
         : { title: action.label.replace(/^Open\s+/i, ''), icon: Webhook };

package/package/components/copilot/chat/app/core.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { createSearchHubScriptsTool, createToolDef, createSearchWorkspaceTool, createGetRunnableDetailsTool } from '../shared';
+import { createSearchHubScriptsTool, createToolDef, createSearchWorkspaceTool, createGetRunnableDetailsTool, findAndReplace } from '../shared';
 import { aiChatManager } from '../AIChatManager.svelte';
 import { formatAppDatatableContextTitle } from '../context';
 // ============= Utility =============
@@ -8,25 +8,6 @@ const memo = (factory) => {
     let cached;
     return () => (cached ??= factory());
 };
-function countExactMatches(content, search) {
-    if (search.length === 0) {
-        return 0;
-    }
-    let count = 0;
-    let index = 0;
-    while ((index = content.indexOf(search, index)) !== -1) {
-        count += 1;
-        index += search.length;
-    }
-    return count;
-}
-function replaceFirstExactMatch(content, search, replace) {
-    const index = content.indexOf(search);
-    if (index === -1) {
-        return content;
-    }
-    return content.slice(0, index) + replace + content.slice(index + search.length);
-}
 function resolveAppPatchTarget(rawPath) {
     const trimmedPath = rawPath.trim();
     const backendMatch = trimmedPath.match(/^backend\/([^/]+)\/main\.(ts|py)$/);
@@ -309,16 +290,7 @@ export const getAppTools = memo(() => [
                 }
                 currentContent = backendRunnable.inlineScript.content ?? '';
             }
-            const matchCount = countExactMatches(currentContent, oldString);
-            if (matchCount === 0) {
-                throw new Error('old_string was not found in the current file content.');
-            }
-            if (!replaceAll && matchCount !== 1) {
-                throw new Error(`old_string matched ${matchCount} locations. Make it more specific or set replace_all to true.`);
-            }
-            const updatedContent = replaceAll
-                ? currentContent.split(oldString).join(newString)
-                : replaceFirstExactMatch(currentContent, oldString, newString);
+            const updatedContent = findAndReplace(currentContent, oldString, newString, replaceAll, 'current file content');
             toolCallbacks.setToolStatus(toolId, {
                 content: `Patching '${target.path}'...`
             });