windmill-components 1.695.1 → 1.698.0

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

@@ -16,6 +16,7 @@ interface Props {
     depth?: number;
     menuOpen?: boolean;
     showEditButton?: boolean;
+    keyboardSelected?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -19,7 +19,7 @@ import { getDeployUiSettings } from '../../home/deploy_ui';
 import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
 import { buildForkEditUrl } from '../../../utils/editInFork';
 import { isCloudHosted } from '../../../cloud';
-let { flow, marked, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, errorHandlerMuted, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
+let { flow, marked, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, errorHandlerMuted, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true), keyboardSelected = false } = $props();
 const dispatch = createEventDispatcher();
 async function archiveFlow(path, archived) {
     try {
@@ -68,6 +68,7 @@ let flowHistory = $state(undefined);
 	{errorHandlerMuted}
 	canFavorite={!flow.draft_only}
 	{depth}
+	{keyboardSelected}
 >
 	{#snippet badges()}
 		{#if flow.archived}

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

@@ -17,6 +17,7 @@ interface Props {
     depth?: number;
     menuOpen?: boolean;
     showEditButton?: boolean;
+    keyboardSelected?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

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

@@ -7,7 +7,7 @@ import Row from './Row.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();
+let { app, marked, shareModal, deploymentDrawer, depth = 0, menuOpen = $bindable(false), keyboardSelected = false } = $props();
 </script>
 
 <Row
@@ -19,6 +19,7 @@ let { app, marked, shareModal, deploymentDrawer, depth = 0, menuOpen = $bindable
 	workspaceId={app.workspace_id ?? $workspaceStore ?? ''}
 	canFavorite={true}
 	{depth}
+	{keyboardSelected}
 >
 	{#snippet badges()}
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />

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

@@ -10,6 +10,7 @@ interface Props {
     deploymentDrawer: DeployWorkspaceDrawer;
     depth?: number;
     menuOpen?: boolean;
+    keyboardSelected?: boolean;
 }
 declare const RawAppRow: import("svelte").Component<Props, {}, "menuOpen">;
 type RawAppRow = ReturnType<typeof RawAppRow>;

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

@@ -5,12 +5,18 @@ import { BellOff } from 'lucide-svelte';
 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 { marked, selected = false, keyboardSelected = 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 rowEl = $state();
+$effect(() => {
+    if (keyboardSelected) {
+        rowEl?.scrollIntoView({ block: 'nearest' });
+    }
+});
 </script>
 
 {#if href}
@@ -26,11 +32,12 @@ let displayPath = (untrack(() => depth) === 0
 	></div>
 {/if}
 <div
+	bind:this={rowEl}
 	class={twMerge(
 		'w-full inline-flex items-center gap-4 first-of-type:!border-t-0 first-of-type:rounded-t-md last-of-type:rounded-b-md [*:not(:last-child)]:border-b px-4 py-3 border-b last:border-b-0',
 		depth > 0 ? '!rounded-none' : '',
 		disabled ? 'opacity-25' : 'hover:bg-surface-hover',
-		selected ? 'bg-surface-accent-selected' : ''
+		selected ? 'bg-surface-accent-selected' : keyboardSelected ? 'bg-gray-200 dark:bg-gray-700' : ''
 	)}
 	style={depth > 0 ? `padding-left: ${depth * 32}px;` : ''}
 >
@@ -43,6 +50,7 @@ let displayPath = (untrack(() => depth) === 0
 	{#if href}
 		<a
 			{href}
+			data-row-keyboard-selected={keyboardSelected ? 'true' : undefined}
 			class="min-w-0 grow hover:underline decoration-gray-400 inline-flex items-center gap-4"
 		>
 			{@render rowContent()}
@@ -69,7 +77,7 @@ let displayPath = (untrack(() => depth) === 0
 		<div class="w-9"></div>
 	{/if}
 
-	<div class="flex gap-1 items-center justify-end pr-2">
+	<div data-row-actions class="flex gap-1 items-center justify-end pr-2">
 		{@render actions?.()}
 	</div>
 </div>

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

@@ -1,6 +1,7 @@
 interface Props {
     marked: string | undefined;
     selected?: boolean;
+    keyboardSelected?: boolean;
     disabled?: boolean;
     canFavorite?: boolean;
     isSelectable?: boolean;
@@ -8,7 +9,7 @@ interface Props {
     errorHandlerMuted?: boolean;
     aiId?: string | undefined;
     aiDescription?: string | undefined;
-    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger';
+    kind?: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger' | 'http_trigger' | 'websocket_trigger' | 'kafka_trigger' | 'nats_trigger' | 'postgres_trigger' | 'mqtt_trigger' | 'sqs_trigger' | 'gcp_trigger' | 'azure_trigger' | 'email_trigger';
     triggerKind?: string | undefined;
     summary?: string | undefined;
     path: string;

package/package/components/common/table/RowIcon.svelte

@@ -3,11 +3,25 @@ import KafkaIcon from '../../icons/KafkaIcon.svelte';
 import NatsIcon from '../../icons/NatsIcon.svelte';
 import MqttIcon from '../../icons/MqttIcon.svelte';
 import AwsIcon from '../../icons/AwsIcon.svelte';
+import AzureIcon from '../../icons/AzureIcon.svelte';
 import GoogleCloudIcon from '../../icons/GoogleCloudIcon.svelte';
 import { Boxes, Calendar, Code2, Database, DollarSign, Folder, LayoutDashboard, Mail, Route, Unplug } from 'lucide-svelte';
 let { kind, triggerKind = undefined } = $props();
-// Use triggerKind if kind is 'trigger' and triggerKind is provided
-let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : kind);
+// Map per-kind backend names (e.g. `kafka_trigger`) to the legacy short
+// names the icon switch already handles, so we don't have to duplicate cases.
+const PER_KIND_TO_SHORT = {
+    http_trigger: 'routes',
+    websocket_trigger: 'websockets',
+    kafka_trigger: 'kafka',
+    nats_trigger: 'nats',
+    postgres_trigger: 'postgres',
+    mqtt_trigger: 'mqtt',
+    sqs_trigger: 'sqs',
+    gcp_trigger: 'gcp',
+    azure_trigger: 'azure',
+    email_trigger: 'emails'
+};
+let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : (PER_KIND_TO_SHORT[kind] ?? kind));
 </script>
 
 <div class="flex justify-center items-center" title={effectiveKind}>
@@ -43,6 +57,8 @@ let effectiveKind = $derived(kind === 'trigger' && triggerKind ? triggerKind : k
 		<AwsIcon size={16} class="text-gray-400" />
 	{:else if effectiveKind === 'gcp'}
 		<GoogleCloudIcon size={16} />
+	{:else if effectiveKind === 'azure'}
+		<AzureIcon size={16} />
 	{:else if effectiveKind === 'emails'}
 		<Mail size={16} class="text-gray-400" />
 	{:else if effectiveKind === 'trigger'}

package/package/components/common/table/RowIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    kind: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger' | 'routes' | 'schedules' | 'websockets' | 'postgres' | 'kafka' | 'nats' | 'mqtt' | 'sqs' | 'gcp' | 'emails';
+    kind: 'script' | 'flow' | 'app' | 'raw_app' | 'resource' | 'variable' | 'resource_type' | 'folder' | 'schedule' | 'trigger' | 'routes' | 'schedules' | 'websockets' | 'postgres' | 'kafka' | 'nats' | 'mqtt' | 'sqs' | 'gcp' | 'emails' | 'http_trigger' | 'websocket_trigger' | 'kafka_trigger' | 'nats_trigger' | 'postgres_trigger' | 'mqtt_trigger' | 'sqs_trigger' | 'gcp_trigger' | 'azure_trigger' | 'email_trigger';
     /** For 'trigger' kind, specifies the specific trigger type (routes, schedules, etc.) */
     triggerKind?: string | undefined;
 }

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

@@ -26,7 +26,7 @@ import { scriptToHubUrl } from '../../../hub';
 import { isRuleActive } from '../../../workspaceProtectionRules.svelte';
 import { buildForkEditUrl } from '../../../utils/editInFork';
 import { isCloudHosted } from '../../../cloud';
-let { script, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true) } = $props();
+let { script, marked, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false), showEditButton = $bindable(true), keyboardSelected = false } = $props();
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
@@ -75,6 +75,7 @@ let wacExportDrawer = $state(undefined);
 	workspaceId={$workspaceStore ?? ''}
 	canFavorite={!script.draft_only}
 	{depth}
+	{keyboardSelected}
 >
 	{#snippet badges()}
 		{#if script.lock_error_logs}

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

@@ -17,6 +17,7 @@ interface Props {
     depth?: number;
     menuOpen?: boolean;
     showEditButton?: boolean;
+    keyboardSelected?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/copilot/autocomplete/Autocompletor.d.ts

@@ -3,7 +3,9 @@ import { editor as meditor } from 'monaco-editor';
 import type { MonacoLanguageClient } from 'monaco-languageclient';
 export declare class Autocompletor {
     #private;
-    constructor(editor: meditor.IStandaloneCodeEditor, scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json');
+    constructor(editor: meditor.IStandaloneCodeEditor, scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json', options?: {
+        workflowAsCode?: boolean;
+    });
     static isProviderModelSupported(providerModel: AIProviderModel | undefined): boolean;
     dispose(): void;
     setLanguageClient(client: MonacoLanguageClient): void;

package/package/components/copilot/autocomplete/Autocompletor.js

@@ -35,6 +35,7 @@ export class Autocompletor {
         max: 10
     });
     #scriptLang;
+    #workflowAsCode;
     #abortController = new AbortController();
     #completionDisposable;
     #cursorDisposable;
@@ -42,13 +43,14 @@ export class Autocompletor {
     #contextWindow = 0;
     #shouldShowDeletionCue = false;
     #languageClient = undefined;
-    constructor(editor, scriptLang) {
+    constructor(editor, scriptLang, options = {}) {
         setGlobalCSS('ai-chat-autocomplete', `
 			.ai-completion-diff {
 				background: var(--vscode-diffEditor-removedTextBackground);
 			}
 		`);
         this.#scriptLang = scriptLang;
+        this.#workflowAsCode = options.workflowAsCode ?? false;
         const deletionsCues = editor.createDecorationsCollection();
         const completionModel = get(copilotInfo).codeCompletionModel;
         this.#contextWindow = getModelContextWindow(completionModel?.model ?? '');
@@ -368,7 +370,8 @@ export class Autocompletor {
             suffix,
             scriptLang: this.#scriptLang,
             markers: markersAtCursor,
-            libraries: librariesCompletions
+            libraries: librariesCompletions,
+            workflowAsCode: this.#workflowAsCode
         }, this.#abortController);
         if (!completion) {
             return;

package/package/components/copilot/autocomplete/request.d.ts

@@ -6,4 +6,5 @@ export declare function autocompleteRequest(context: {
     scriptLang: ScriptLang | 'bunnative' | 'jsx' | 'tsx' | 'json';
     markers: editor.IMarker[];
     libraries: string;
+    workflowAsCode?: boolean;
 }, abortController: AbortController): Promise<string | undefined>;

package/package/components/copilot/autocomplete/request.js

@@ -21,7 +21,7 @@ export async function autocompleteRequest(context, abortController) {
         let commentSymbol = getCommentSymbol(context.scriptLang);
         let contextLines = comment(commentSymbol, 'You are a code completion assistant. You are given three important contexts (<LANGUAGE CONTEXT>, <DIAGNOSTICS>, <LIBRARY METHODS>) to help you complete the code.\n');
         contextLines += comment(commentSymbol, 'LANGUAGE CONTEXT:\n');
-        contextLines += comment(commentSymbol, getLangContext(context.scriptLang) + '\n');
+        contextLines += comment(commentSymbol, getLangContext(context.scriptLang, { workflowAsCode: context.workflowAsCode }) + '\n');
         contextLines += comment(commentSymbol, 'DIAGNOSTICS:\n');
         contextLines += comment(commentSymbol, context.markers.map((m) => m.message).join('\n') + '\n');
         contextLines += comment(commentSymbol, 'LIBRARY METHODS:\n');

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

@@ -190,8 +190,10 @@ class AIChatManager {
             const currentModel = getCurrentModel();
             const customPrompt = getCombinedCustomPrompt(mode);
             const lang = options?.lang ?? this.scriptEditorOptions?.lang ?? 'bun';
+            const workflowAsCode = options?.workflowAsCode ??
+                (options?.lang ? false : (this.scriptEditorOptions?.workflowAsCode ?? false));
             const context = this.contextManager.getSelectedContext();
-            this.systemMessage = prepareScriptSystemMessage(currentModel, lang, {}, customPrompt);
+            this.systemMessage = prepareScriptSystemMessage(currentModel, lang, { isPreprocessor: options?.isPreprocessor, workflowAsCode }, customPrompt);
             this.systemMessage.content = this.systemMessage.content;
             this.tools = [...prepareScriptTools(currentModel, lang, context)];
             this.helpers = {
@@ -434,7 +436,9 @@ class AIChatManager {
         });
         const systemMessage = {
             role: 'system',
-            content: prepareInlineChatSystemPrompt(lang)
+            content: prepareInlineChatSystemPrompt(lang, {
+                workflowAsCode: this.scriptEditorOptions?.workflowAsCode ?? false
+            })
         };
         let reply = '';
         try {
@@ -490,10 +494,16 @@ class AIChatManager {
     };
     sendRequest = async (options = {}) => {
         if (options.mode) {
-            this.changeMode(options.mode, undefined, { lang: options.lang });
+            this.changeMode(options.mode, undefined, {
+                lang: options.lang,
+                isPreprocessor: options.isPreprocessor
+            });
         }
         else {
-            this.changeMode(this.mode, undefined, { lang: options.lang });
+            this.changeMode(this.mode, undefined, {
+                lang: options.lang,
+                isPreprocessor: options.isPreprocessor
+            });
         }
         if (options.instructions) {
             this.instructions = options.instructions;

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

@@ -9,6 +9,7 @@ import { aiChatManager } from './AIChatManager.svelte';
 import { onDestroy } from 'svelte';
 import Button from '../../common/button/Button.svelte';
 import { Menu } from 'lucide-svelte';
+import CreatedResourceActionDrawers from './CreatedResourceActionDrawers.svelte';
 let { noPadding: noBorder = false, isCollapsed = false, children, onMenuOpen, disableAi } = $props();
 $effect(() => {
     if (disableAi) {
@@ -29,6 +30,7 @@ onDestroy(() => {
 </script>
 
 {#if !disableAi}
+	<CreatedResourceActionDrawers />
 	<Splitpanes horizontal={false} class="flex-1 min-h-0">
 		<Pane size={100 - chatState.size} minSize={50} class="flex flex-col grow min-h-0 ">
 			<div

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

@@ -13,6 +13,7 @@ export interface ScriptOptions {
     lastSavedCode?: string;
     lastDeployedCode?: string;
     diffMode: boolean;
+    workflowAsCode?: boolean;
 }
 export interface FlowOptions {
     currentFlow: ExtendedOpenFlow;

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

@@ -0,0 +1,129 @@
+<script lang="ts">import { onDestroy, tick } from 'svelte';
+import { Drawer } from '../../common';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import { Loader2 } from 'lucide-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;
+const drawerConfigs = {
+    schedule: {
+        label: 'schedule',
+        load: () => import('../../triggers/schedules/ScheduleEditorInner.svelte')
+    },
+    http: {
+        label: 'HTTP trigger',
+        load: () => import('../../triggers/http/RouteEditorInner.svelte')
+    },
+    websocket: {
+        label: 'WebSocket trigger',
+        load: () => import('../../triggers/websocket/WebsocketTriggerEditorInner.svelte')
+    },
+    postgres: {
+        label: 'Postgres trigger',
+        load: () => import('../../triggers/postgres/PostgresTriggerEditorInner.svelte')
+    },
+    kafka: {
+        label: 'Kafka trigger',
+        load: () => import('../../triggers/kafka/KafkaTriggerEditorInner.svelte')
+    },
+    nats: {
+        label: 'NATS trigger',
+        load: () => import('../../triggers/nats/NatsTriggerEditorInner.svelte')
+    },
+    mqtt: {
+        label: 'MQTT trigger',
+        load: () => import('../../triggers/mqtt/MqttTriggerEditorInner.svelte')
+    },
+    sqs: {
+        label: 'SQS trigger',
+        load: () => import('../../triggers/sqs/SqsTriggerEditorInner.svelte')
+    },
+    gcp: {
+        label: 'GCP Pub/Sub trigger',
+        load: () => import('../../triggers/gcp/GcpTriggerEditorInner.svelte')
+    },
+    azure: {
+        label: 'Azure Event Grid trigger',
+        load: () => import('../../triggers/azure/AzureTriggerEditorInner.svelte')
+    }
+};
+const drawerTitle = $derived.by(() => {
+    const current = activeDrawer;
+    return current ? `Edit ${drawerConfigs[current.key].label} ${current.path}` : 'Edit trigger';
+});
+function waitForAnimationFrame() {
+    return new Promise((resolve) => {
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => resolve());
+        }
+        else {
+            resolve();
+        }
+    });
+}
+async function getEditor(request) {
+    await request.promise;
+    await tick();
+    await waitForAnimationFrame();
+    if (activeDrawer?.id !== request.id) {
+        return undefined;
+    }
+    if (!editor) {
+        await tick();
+        await waitForAnimationFrame();
+    }
+    if (!editor) {
+        throw new Error(`${drawerConfigs[request.key].label} drawer is not ready`);
+    }
+    return editor;
+}
+async function openCreatedResource(action) {
+    if (action.type !== 'open_created_resource') {
+        return;
+    }
+    const key = action.resource === 'schedule' ? 'schedule' : action.triggerKind;
+    if (!key) {
+        throw new Error('Missing trigger kind');
+    }
+    const config = drawerConfigs[key];
+    const promise = activeDrawer?.key === key ? activeDrawer.promise : config.load();
+    if (activeDrawer?.key !== key) {
+        editor = undefined;
+    }
+    const request = { id: nextActiveDrawerId++, key, path: action.path, promise };
+    activeDrawer = request;
+    drawer?.openDrawer();
+    const currentEditor = await getEditor(request);
+    if (!currentEditor) {
+        return;
+    }
+    await currentEditor.openEdit(action.path, action.targetKind === 'flow');
+}
+function onInnerUpdate() {
+    drawer?.closeDrawer();
+}
+const unregisterCreatedResourceHandler = registerToolDisplayActionHandler('open_created_resource', openCreatedResource);
+onDestroy(() => {
+    unregisterCreatedResourceHandler();
+});
+</script>
+
+<Drawer bind:this={drawer} size={DRAWER_SIZE}>
+	<DrawerContent title={drawerTitle} on:close={() => drawer?.closeDrawer()}>
+		{#if activeDrawer}
+			{#key activeDrawer.key}
+				{#await activeDrawer.promise}
+					<div class="p-4 flex justify-center">
+						<Loader2 class="animate-spin" />
+					</div>
+				{:then Module}
+					{@const Editor = Module.default as EditorComponent}
+					<Editor bind:this={editor} useDrawer={false} onUpdate={onInnerUpdate} />
+				{/await}
+			{/key}
+		{/if}
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,4 @@
+import type { Component } from 'svelte';
+declare const CreatedResourceActionDrawers: Component<Record<string, never>, {}, "">;
+type CreatedResourceActionDrawers = ReturnType<typeof CreatedResourceActionDrawers>;
+export default CreatedResourceActionDrawers;

package/package/components/copilot/chat/ToolExecutionDisplay.svelte

@@ -3,11 +3,15 @@ import { Button } from '../../common';
 import { aiChatManager } from './AIChatManager.svelte';
 import { twMerge } from 'tailwind-merge';
 import ToolContentDisplay from './ToolContentDisplay.svelte';
+import ToolMessageActions from './ToolMessageActions.svelte';
 let { message } = $props();
 const hasParameters = $derived(message.parameters !== undefined && Object.keys(message.parameters).length > 0);
 let isExpanded = $derived(message.showDetails ||
     (message.isStreamingArguments && hasParameters) ||
     (message.isLoading && message.needsConfirmation));
+const visibleActions = $derived(message.actions && !message.isLoading && !message.error && !message.needsConfirmation
+    ? message.actions
+    : []);
 </script>
 
 <div
@@ -102,12 +106,16 @@ let isExpanded = $derived(message.showDetails ||
 					showWhileLoading={false}
 				/>
 
-				<ToolContentDisplay
-					title="Result"
-					content={message.result}
-					error={message.error}
-					loading={message.isLoading}
-				/>
+				{#if visibleActions.length > 0}
+					<ToolMessageActions actions={visibleActions} />
+				{:else}
+					<ToolContentDisplay
+						title="Result"
+						content={message.result}
+						error={message.error}
+						loading={message.isLoading}
+					/>
+				{/if}
 			{/if}
 		</div>
 	{/if}

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

@@ -0,0 +1,73 @@
+<script lang="ts">import { Button } from '../../common';
+import { Calendar, Database, 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';
+import KafkaIcon from '../../icons/KafkaIcon.svelte';
+import MqttIcon from '../../icons/MqttIcon.svelte';
+import NatsIcon from '../../icons/NatsIcon.svelte';
+import { runToolDisplayAction } from './createdResourceActions.svelte';
+let { actions } = $props();
+let runningActionId = $state(undefined);
+const actionCardConfigs = {
+    schedule: { title: 'Schedule', icon: Calendar },
+    http: { title: 'HTTP trigger', icon: Route },
+    websocket: { title: 'WebSocket trigger', icon: Unplug },
+    postgres: { title: 'Postgres trigger', icon: Database },
+    kafka: { title: 'Kafka trigger', icon: KafkaIcon },
+    nats: { title: 'NATS trigger', icon: NatsIcon },
+    mqtt: { title: 'MQTT trigger', icon: MqttIcon },
+    sqs: { title: 'SQS trigger', icon: AwsIcon },
+    gcp: { title: 'GCP Pub/Sub trigger', icon: GoogleCloudIcon },
+    azure: { title: 'Azure Event Grid trigger', icon: AzureIcon }
+};
+function getActionCardConfig(action) {
+    const key = action.resource === 'schedule' ? 'schedule' : action.triggerKind;
+    return key
+        ? actionCardConfigs[key]
+        : { title: action.label.replace(/^Open\s+/i, ''), icon: Webhook };
+}
+async function handleAction(action) {
+    if (runningActionId) {
+        return;
+    }
+    runningActionId = action.id;
+    try {
+        await runToolDisplayAction(action);
+    }
+    finally {
+        runningActionId = undefined;
+    }
+}
+</script>
+
+{#if actions.length > 0}
+	<div class="space-y-2">
+		{#each actions as action (action.id)}
+			{@const card = getActionCardConfig(action)}
+			{@const Icon = card.icon}
+			<div class="flex items-center gap-3 rounded-md border !border-green-500/40 bg-surface p-3">
+				<div
+					class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300"
+				>
+					<Icon class="h-5 w-5" />
+				</div>
+				<div class="min-w-0 flex-1">
+					<div class="truncate text-xs font-semibold text-primary">{card.title}</div>
+					<div class="truncate text-2xs text-secondary">{action.path}</div>
+				</div>
+				<Button
+					size="xs"
+					variant="default"
+					title={action.label}
+					loading={runningActionId === action.id}
+					disabled={runningActionId !== undefined && runningActionId !== action.id}
+					startIcon={{ icon: SquarePen }}
+					onClick={() => handleAction(action)}
+				>
+					Open
+				</Button>
+			</div>
+		{/each}
+	</div>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { ToolDisplayAction } from './shared';
+interface Props {
+    actions: ToolDisplayAction[];
+}
+declare const ToolMessageActions: import("svelte").Component<Props, {}, "">;
+type ToolMessageActions = ReturnType<typeof ToolMessageActions>;
+export default ToolMessageActions;

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

@@ -0,0 +1,6 @@
+import type { ToolDisplayAction } from './shared';
+type MaybePromise<T> = T | Promise<T>;
+type ToolDisplayActionHandler = (action: ToolDisplayAction) => MaybePromise<void>;
+export declare function registerToolDisplayActionHandler(type: ToolDisplayAction['type'], handler: ToolDisplayActionHandler): () => void;
+export declare function runToolDisplayAction(action: ToolDisplayAction): Promise<void>;
+export {};

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

@@ -0,0 +1,29 @@
+import { sendUserToast } from '../../../toast';
+const toolDisplayActionHandlers = $state({});
+function formatUnknownError(error) {
+    if (error instanceof Error) {
+        return error.message;
+    }
+    return String(error);
+}
+export function registerToolDisplayActionHandler(type, handler) {
+    toolDisplayActionHandlers[type] = handler;
+    return () => {
+        if (toolDisplayActionHandlers[type] === handler) {
+            delete toolDisplayActionHandlers[type];
+        }
+    };
+}
+export async function runToolDisplayAction(action) {
+    const handler = toolDisplayActionHandlers[action.type];
+    if (!handler) {
+        sendUserToast('This action is not available right now.', true);
+        return;
+    }
+    try {
+        await handler(action);
+    }
+    catch (error) {
+        sendUserToast(`Could not run action "${action.label}": ${formatUnknownError(error)}`, true);
+    }
+}