windmill-components 1.493.10 → 1.501.5

package/package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -1,25 +1,11 @@
 import { type SkeletonLayout } from './model';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Skeleton: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     layout: SkeletonLayout;
-    loading?: boolean | undefined;
-    overlay?: boolean | undefined;
-    mounted?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Skeleton = InstanceType<typeof Skeleton>;
+    loading?: boolean;
+    overlay?: boolean;
+    class?: string | undefined;
+    mounted?: boolean;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "mounted">;
+type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/package/components/common/skeleton/SkeletonElement.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { HEIGHT_UNIT } from './model';
-export let element;
+let { element } = $props();
 </script>
 
 <div

package/package/components/common/skeleton/SkeletonElement.svelte.d.ts

@@ -1,21 +1,7 @@
 import { type ISkeletonElement } from './model';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const SkeletonElement: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     element: ISkeletonElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SkeletonElement = InstanceType<typeof SkeletonElement>;
+}
+declare const SkeletonElement: import("svelte").Component<Props, {}, "">;
+type SkeletonElement = ReturnType<typeof SkeletonElement>;
 export default SkeletonElement;

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

@@ -15,18 +15,10 @@ import { DELETE, copyToClipboard } from '../../../utils';
 import AppDeploymentHistory from '../../apps/editor/AppDeploymentHistory.svelte';
 import { isDeployable } from '../../../utils_deployable';
 import { getDeployUiSettings } from '../../home/deploy_ui';
-export let app;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deploymentDrawer;
-export let deleteConfirmedCallback;
-export let depth = 0;
-export let menuOpen = false;
+let { app, marked, starred, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), depth = 0, menuOpen = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
-let appExport = undefined;
-let appDeploymentHistory = undefined;
+let appExport = $state(undefined);
+let appDeploymentHistory = $state(undefined);
 async function loadAppJson() {
     appExport?.open(app.path);
 }
@@ -51,7 +43,7 @@ async function loadAppJson() {
 	canFavorite={!app.draft_only}
 	{depth}
 >
-	<svelte:fragment slot="badges">
+	{#snippet badges()}
 		{#if app.execution_mode == 'anonymous'}
 			<Badge small>
 				<div class="flex gap-1 items-center">
@@ -71,13 +63,15 @@ async function loadAppJson() {
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />
 		<DraftBadge has_draft={app.has_draft} draft_only={app.draft_only} />
 		<div class="w-8 center-center"></div>
-	</svelte:fragment>
-	<svelte:fragment slot="actions">
+	{/snippet}
+	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
 				{#if app.canWrite}
 					<div>
 						<Button
+							aiId={`edit-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
+							aiDescription={`Edits the app ${app.summary?.length > 0 ? app.summary : app.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -90,6 +84,8 @@ async function loadAppJson() {
 				{:else}
 					<div>
 						<Button
+							aiId={`fork-app-button-${app.summary?.length > 0 ? app.summary : app.path}`}
+							aiDescription={`Fork the app ${app.summary?.length > 0 ? app.summary : app.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -103,6 +99,8 @@ async function loadAppJson() {
 			{/if}
 		</span>
 		<Dropdown
+			aiId={`app-row-dropdown-${app.summary?.length > 0 ? app.summary : app.path}`}
+			aiDescription={`Open dropdown for app ${app.summary?.length > 0 ? app.summary : app.path} options`}
 			items={async () => {
 				let { draft_only, canWrite, summary, execution_mode, path, has_draft } = app
 
@@ -163,7 +161,7 @@ async function loadAppJson() {
 									},
 									hide: $userStore?.operator
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: $userStore?.operator ? 'View JSON' : 'View/Edit JSON',
@@ -210,7 +208,7 @@ async function loadAppJson() {
 										gotoUrl(url)
 									}
 								}
-						  ]
+							]
 						: []),
 					...(has_draft
 						? [
@@ -229,7 +227,7 @@ async function loadAppJson() {
 									disabled: !canWrite,
 									hide: $userStore?.operator
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: 'Delete',
@@ -257,5 +255,5 @@ async function loadAppJson() {
 				menuOpen = true
 			}}
 		/>
-	</svelte:fragment>
+	{/snippet}
 </Row>

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

@@ -2,20 +2,7 @@ import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
 import { type ListableApp } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AppRow: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     app: ListableApp & {
         has_draft?: boolean;
         draft_only?: boolean;
@@ -29,10 +16,24 @@ declare const AppRow: $$__sveltets_2_IsomorphicComponent<{
     deleteConfirmedCallback: (() => void) | undefined;
     depth?: number;
     menuOpen?: 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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AppRow: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "deleteConfirmedCallback" | "menuOpen">;
 type AppRow = InstanceType<typeof AppRow>;
 export default AppRow;

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

@@ -16,16 +16,7 @@ import { isDeployable } from '../../../utils_deployable';
 import { Pen, GitFork, Trash, List, FolderOpen, ChevronUpSquare, Calendar, Share, Archive, Clipboard, Eye, HistoryIcon } from 'lucide-svelte';
 import FlowHistory from '../../flows/FlowHistory.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
-export let flow;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deleteConfirmedCallback;
-export let deploymentDrawer;
-export let errorHandlerMuted;
-export let depth = 0;
-export let menuOpen = false;
+let { flow, marked, starred, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, errorHandlerMuted, depth = 0, menuOpen = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
 async function archiveFlow(path, archived) {
     try {
@@ -51,8 +42,8 @@ async function deleteFlow(path) {
         sendUserToast(`Could not delete this flow ${err.body}`, true);
     }
 }
-let scheduleEditor;
-let flowHistory;
+let scheduleEditor = $state(undefined);
+let flowHistory = $state(undefined);
 </script>
 
 {#if menuOpen}
@@ -61,6 +52,8 @@ let flowHistory;
 {/if}
 
 <Row
+	aiId={`flow-row-${flow.path}`}
+	aiDescription={`Button to access the form to run the flow ${flow.summary ?? flow.path}`}
 	href={flow.draft_only
 		? `${base}/flows/edit/${flow.path}?nodraft=true`
 		: `${base}/flows/get/${flow.path}?workspace=${$workspaceStore}`}
@@ -75,15 +68,15 @@ let flowHistory;
 	canFavorite={!flow.draft_only}
 	{depth}
 >
-	<svelte:fragment slot="badges">
+	{#snippet badges()}
 		{#if flow.archived}
 			<Badge color="red" baseClass="border">archived</Badge>
 		{/if}
 		<SharedBadge canWrite={flow.canWrite} extraPerms={flow.extra_perms} />
 		<DraftBadge has_draft={flow.has_draft} draft_only={flow.draft_only} />
 		<div class="w-8 center-center"></div>
-	</svelte:fragment>
-	<svelte:fragment slot="actions">
+	{/snippet}
+	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
 				{#if flow.canWrite && !flow.archived}
@@ -94,6 +87,8 @@ let flowHistory;
 							variant="border"
 							startIcon={{ icon: Pen }}
 							href="{base}/flows/edit/{flow.path}?nodraft=true"
+							aiId={`edit-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+							aiDescription={`Edits the flow ${flow.summary?.length > 0 ? flow.summary : flow.path}`}
 						>
 							Edit
 						</Button>
@@ -106,6 +101,8 @@ let flowHistory;
 							variant="border"
 							startIcon={{ icon: GitFork }}
 							href="{base}/flows/add?template={flow.path}"
+							aiId={`fork-flow-button-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+							aiDescription={`Fork the flow ${flow.summary?.length > 0 ? flow.summary : flow.path}`}
 						>
 							Fork
 						</Button>
@@ -115,6 +112,8 @@ let flowHistory;
 		</span>
 
 		<Dropdown
+			aiId={`flow-row-dropdown-${flow.summary?.length > 0 ? flow.summary : flow.path}`}
+			aiDescription={`Open dropdown for flow ${flow.summary?.length > 0 ? flow.summary : flow.path} options`}
 			items={async () => {
 				let { draft_only, path, archived, has_draft } = flow
 				let owner = isOwner(path, $userStore, $workspaceStore)
@@ -190,7 +189,7 @@ let flowHistory;
 						displayName: 'Deployments',
 						icon: HistoryIcon,
 						action: () => {
-							flowHistory.open()
+							flowHistory?.open()
 						},
 						hide: $userStore?.operator
 					},
@@ -263,5 +262,5 @@ let flowHistory;
 				menuOpen = true
 			}}
 		/>
-	</svelte:fragment>
+	{/snippet}
 </Row>

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

@@ -2,20 +2,7 @@ import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
 import { type Flow } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
-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> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowRow: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flow: Flow & {
         has_draft?: boolean;
         draft_only?: boolean;
@@ -30,10 +17,24 @@ declare const FlowRow: $$__sveltets_2_IsomorphicComponent<{
     errorHandlerMuted: boolean;
     depth?: number;
     menuOpen?: 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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FlowRow: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "deleteConfirmedCallback" | "menuOpen">;
 type FlowRow = InstanceType<typeof FlowRow>;
 export default FlowRow;

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

@@ -13,16 +13,8 @@ import { goto } from '../../../navigation';
 import { FolderOpen, Globe, Pen, Share, Trash } from 'lucide-svelte';
 import { isDeployable } from '../../../utils_deployable';
 import { getDeployUiSettings } from '../../home/deploy_ui';
-export let app;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deleteConfirmedCallback;
-export let deploymentDrawer;
-export let depth = 0;
-export let menuOpen = false;
-let updateAppDrawer;
+let { app, marked, starred, shareModal, moveDrawer, deleteConfirmedCallback = $bindable(), deploymentDrawer, depth = 0, menuOpen = $bindable(false) } = $props();
+let updateAppDrawer = $state(undefined);
 const dispatch = createEventDispatcher();
 </script>
 
@@ -59,10 +51,10 @@ const dispatch = createEventDispatcher();
 	canFavorite={true}
 	{depth}
 >
-	<svelte:fragment slot="badges">
+	{#snippet badges()}
 		<SharedBadge canWrite={app.canWrite} extraPerms={app.extra_perms} />
-	</svelte:fragment>
-	<svelte:fragment slot="actions">
+	{/snippet}
+	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
 				{#if app.canWrite}
@@ -102,7 +94,7 @@ const dispatch = createEventDispatcher();
 										deploymentDrawer.openDrawer(path, 'raw_app')
 									}
 								}
-						  ]
+							]
 						: []),
 					{
 						displayName: canWrite ? 'Share' : 'See Permissions',
@@ -136,5 +128,5 @@ const dispatch = createEventDispatcher();
 				menuOpen = true
 			}}
 		/>
-	</svelte:fragment>
+	{/snippet}
 </Row>

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

@@ -2,6 +2,19 @@ import type MoveDrawer from '../../MoveDrawer.svelte';
 import type ShareModal from '../../ShareModal.svelte';
 import { type ListableRawApp } from '../../../gen';
 import type DeployWorkspaceDrawer from '../../DeployWorkspaceDrawer.svelte';
+interface Props {
+    app: ListableRawApp & {
+        canWrite: boolean;
+    };
+    marked: string | undefined;
+    starred: boolean;
+    shareModal: ShareModal;
+    moveDrawer: MoveDrawer;
+    deleteConfirmedCallback: (() => void) | undefined;
+    deploymentDrawer: DeployWorkspaceDrawer;
+    depth?: number;
+    menuOpen?: 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> & {
         $$bindings?: Bindings;
@@ -15,22 +28,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RawAppRow: $$__sveltets_2_IsomorphicComponent<{
-    app: ListableRawApp & {
-        canWrite: boolean;
-    };
-    marked: string | undefined;
-    starred: boolean;
-    shareModal: ShareModal;
-    moveDrawer: MoveDrawer;
-    deleteConfirmedCallback: (() => void) | undefined;
-    deploymentDrawer: DeployWorkspaceDrawer;
-    depth?: number;
-    menuOpen?: boolean;
-}, {
+declare const RawAppRow: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "deleteConfirmedCallback" | "menuOpen">;
 type RawAppRow = InstanceType<typeof RawAppRow>;
 export default RawAppRow;

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

@@ -3,20 +3,23 @@ import { createEventDispatcher } from 'svelte';
 import RowIcon from './RowIcon.svelte';
 import { BellOff } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-export let marked;
-export let starred;
-export let canFavorite = true;
-export let errorHandlerMuted = false;
+import { goto } from '../../../navigation';
+import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
 const dispatch = createEventDispatcher();
-export let kind = 'script';
-export let summary = undefined;
-export let path;
-export let href;
-export let workspaceId;
-export let depth = 0;
+let { marked, starred, canFavorite = true, errorHandlerMuted = false, aiId = undefined, aiDescription = undefined, kind = 'script', summary = undefined, path, href, workspaceId, depth = 0, badges, actions } = $props();
 let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 </script>
 
+<div
+	style="display: none"
+	use:triggerableByAI={{
+		id: aiId,
+		description: aiDescription,
+		callback: () => {
+			goto(href)
+		}
+	}}
+></div>
 <div
 	class={twMerge(
 		'hover:bg-surface-hover 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-2.5 border-b last:border-b-0',
@@ -46,9 +49,9 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 		<BellOff class="w-8 opacity-60" size={12} fill="currentcolor" />
 	{/if}
 
-	{#if $$slots.badges}
+	{#if badges}
 		<div class="hidden lg:flex flex-row gap-4 items-center">
-			<slot name="badges" />
+			{@render badges?.()}
 		</div>
 	{/if}
 
@@ -69,6 +72,6 @@ let displayPath = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? '';
 	{/if}
 
 	<div class="flex gap-1 items-center justify-end pr-2">
-		<slot name="actions" />
+		{@render actions?.()}
 	</div>
 </div>

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

@@ -1,3 +1,19 @@
+interface Props {
+    marked: string | undefined;
+    starred: boolean;
+    canFavorite?: boolean;
+    errorHandlerMuted?: boolean;
+    aiId?: string | undefined;
+    aiDescription?: string | undefined;
+    kind?: 'script' | 'flow' | 'app' | 'raw_app';
+    summary?: string | undefined;
+    path: string;
+    href: string;
+    workspaceId: string;
+    depth?: number;
+    badges?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+}
 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> & {
         $$bindings?: Bindings;
@@ -11,24 +27,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Row: $$__sveltets_2_IsomorphicComponent<{
-    marked: string | undefined;
-    starred: boolean;
-    canFavorite?: boolean;
-    errorHandlerMuted?: boolean;
-    kind?: "script" | "flow" | "app" | "raw_app";
-    summary?: string | undefined;
-    path: string;
-    href: string;
-    workspaceId: string;
-    depth?: number;
-}, {
+declare const Row: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    badges: {};
-    actions: {};
-}, {}, string>;
+}, {}, {}, "">;
 type Row = InstanceType<typeof Row>;
 export default Row;

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

@@ -20,17 +20,7 @@ import { Drawer, DrawerContent } from '..';
 import NoMainFuncBadge from '../../NoMainFuncBadge.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { getDeployUiSettings } from '../../home/deploy_ui';
-export let script;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deploymentDrawer;
-export let deleteConfirmedCallback;
-export let errorHandlerMuted;
-export let showCode;
-export let depth = 0;
-export let menuOpen = false;
+let { script, marked, starred, shareModal, moveDrawer, deploymentDrawer, deleteConfirmedCallback = $bindable(), errorHandlerMuted, showCode, depth = 0, menuOpen = $bindable(false) } = $props();
 const dispatch = createEventDispatcher();
 async function archiveScript(path) {
     await ScriptService.archiveScriptByPath({ workspace: $workspaceStore, path });
@@ -55,9 +45,9 @@ async function deleteScript(path) {
     dispatch('change');
     sendUserToast(`Deleted script ${path}`);
 }
-let scheduleEditor;
+let scheduleEditor = $state(undefined);
 const dlt = 'delete';
-let versionsDrawerOpen = false;
+let versionsDrawerOpen = $state(false);
 </script>
 
 {#if menuOpen}
@@ -65,6 +55,8 @@ let versionsDrawerOpen = false;
 {/if}
 
 <Row
+	aiId={`script-run-button-${script.path}`}
+	aiDescription={`Button to access the form to run the script ${script.summary ?? script.path}`}
 	href={script.draft_only || script.kind !== 'script' || script.no_main_func
 		? `${base}/scripts/edit/${script.path}`
 		: `${base}/scripts/get/${script.hash}?workspace=${$workspaceStore}`}
@@ -79,7 +71,7 @@ let versionsDrawerOpen = false;
 	canFavorite={!script.draft_only}
 	{depth}
 >
-	<svelte:fragment slot="badges">
+	{#snippet badges()}
 		{#if script.lock_error_logs}
 			<Badge color="red" baseClass="border border-red-200">Deployment failed</Badge>
 		{/if}
@@ -99,9 +91,9 @@ let versionsDrawerOpen = false;
 		<div class="w-8 center-center">
 			<LanguageIcon lang={script.language} width={12} height={12} />
 		</div>
-	</svelte:fragment>
+	{/snippet}
 
-	<svelte:fragment slot="actions">
+	{#snippet actions()}
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
 				{#if script.use_codebase}
@@ -113,6 +105,8 @@ let versionsDrawerOpen = false;
 				{:else if script.canWrite && !script.archived}
 					<div>
 						<Button
+							aiId={`edit-script-button-${script.summary?.length > 0 ? script.summary : script.path}`}
+							aiDescription={`Edits the script ${script.summary?.length > 0 ? script.summary : script.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -125,6 +119,8 @@ let versionsDrawerOpen = false;
 				{:else if !script.draft_only}
 					<div>
 						<Button
+							aiId={`fork-script-button-${script.summary ?? script.path}`}
+							aiDescription={`Fork the script ${script.summary ?? script.path}`}
 							color="light"
 							size="xs"
 							variant="border"
@@ -138,6 +134,8 @@ let versionsDrawerOpen = false;
 			{/if}
 		</span>
 		<Dropdown
+			aiId={`script-row-dropdown-${script.summary?.length > 0 ? script.summary : script.path}`}
+			aiDescription={`Open dropdown for script ${script.summary?.length > 0 ? script.summary : script.path} options`}
 			items={async () => {
 				let owner = isOwner(script.path, $userStore, $workspaceStore)
 				if (script.draft_only) {
@@ -226,7 +224,7 @@ let versionsDrawerOpen = false;
 						displayName: 'Schedule',
 						icon: Calendar,
 						action: () => {
-							scheduleEditor.openNew(false, script.path)
+							scheduleEditor?.openNew(false, script.path)
 						},
 						disabled: script.archived,
 						hide: $userStore?.operator
@@ -305,7 +303,7 @@ let versionsDrawerOpen = false;
 				menuOpen = true
 			}}
 		/>
-	</svelte:fragment>
+	{/snippet}
 </Row>
 
 {#if script}