npm - windmill-components - Versions diffs - 1.623.2 → 1.655.0 - Mend

windmill-components 1.623.2 → 1.655.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1233) hide show

package/package/components/SchemaViewer.svelte CHANGED Viewed

@@ -1,7 +1,10 @@
 <script lang="ts">import { copyToClipboard, emptySchema } from '../utils';
 import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
-import TableCustom from './TableCustom.svelte';
+import DataTable from './table/DataTable.svelte';
+import Head from './table/Head.svelte';
+import Cell from './table/Cell.svelte';
+import Row from './table/Row.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
@@ -22,67 +25,67 @@ function getProperties(schema) {
 <div class="w-full">
 	<Tabs selected="arguments">
-		<Tab value="arguments" label="Arguments" />
-		<Tab value="advanced" label="Advanced" />
+		<Tab value="arguments" label="Inputs" />
+		<Tab value="json" label="JSON" />
 		{#snippet content()}
 			<div class="overflow-auto pt-2">
 				<TabContent value="arguments">
 					{#if schema && schema.properties && Object.keys(schema.properties).length > 0 && schema.required}
-						<div class="flex flex-row">
-							<TableCustom>
-								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-								<tr slot="header-row" class="underline">
-									<th>name</th>
-									<th>type</th>
-									<th>description</th>
-									<th>default</th>
-									<th>format</th>
-									<th>required</th>
+						<DataTable size="sm" containerClass="bg-surface-tertiary">
+							<Head>
+								<tr class="w-full">
+									<Cell head first>Name</Cell>
+									<Cell head>Type</Cell>
+									<Cell head>Description</Cell>
+									<Cell head>Default</Cell>
+									<Cell head>Format</Cell>
+									<Cell head last>Required</Cell>
 								</tr>
-								{#snippet body()}
-									<tbody>
-										{#each getProperties(schema) as [name, property] (name)}
-											<tr>
-												<td class="font-semibold pl-1">{name}</td>
-												<td
-													><Badge color="blue"
-														>{#if !property.type}
-															any
-														{:else}
-															{property.type}
-														{/if}</Badge
-													></td
-												>
-												<td>{property.description ?? ''}</td>
-												<td
-													>{property.default == '<function call>'
-														? '<function call>'
-														: property.default
-															? JSON.stringify(property.default)
-															: ''}</td
-												>
-												<td
-													>{property.format ?? ''}
-													{property.contentEncoding
-														? `(encoding: ${property.contentEncoding})`
-														: ''}</td
-												>
-												<td
-													>{#if schema.required.includes(name)}
-														<span class="text-red-600 font-bold text-lg">*</span>
-													{/if}</td
-												>
-											</tr>
-										{/each}
-									</tbody>
-								{/snippet}
-							</TableCustom>
-						</div>
+							</Head>
+							<tbody class="divide-y w-full">
+								{#each getProperties(schema) as [name, property] (name)}
+									<Row>
+										<Cell first>
+											<span class="font-semibold">{name}</span>
+										</Cell>
+										<Cell>
+											<Badge color="blue">
+												{#if !property.type}
+													any
+												{:else}
+													{property.type}
+												{/if}
+											</Badge>
+										</Cell>
+										<Cell wrap>
+											{property.description ?? ''}
+										</Cell>
+										<Cell>
+											{property.default == '<function call>'
+												? '<function call>'
+												: property.default
+													? JSON.stringify(property.default)
+													: ''}
+										</Cell>
+										<Cell>
+											{property.format ?? ''}
+											{property.contentEncoding ? `(encoding: ${property.contentEncoding})` : ''}
+										</Cell>
+										<Cell last>
+											{#if schema.required.includes(name)}
+												<span class="text-red-600 font-bold text-lg">*</span>
+											{/if}
+										</Cell>
+									</Row>
+								{/each}
+							</tbody>
+						</DataTable>
 					{:else}
 						<div class="text-secondary text-xs italic m-1">No arguments</div>
 					{/if}
 				</TabContent>
-				<TabContent value="advanced">
+				<TabContent value="json">
 					<div class="h-full relative">
 						<Button
 							wrapperClasses="absolute top-2 right-2 z-20"

package/package/components/ScriptBuilder.svelte CHANGED Viewed

@@ -3,6 +3,7 @@ const bubble = createBubbler();
 import { DraftService, ScriptService, PostgresTriggerService, CaptureService, WorkerService } from '../gen';
 import { inferArgs } from '../infer';
 import { initialCode, canHavePreprocessor, getPreprocessorFullCode, getMainFunctionPattern } from '../script_helpers';
+import { isWorkflowAsCode } from './graph/wacToFlow';
 import AIFormSettings from './copilot/AIFormSettings.svelte';
 import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workerTags, workspaceStore } from '../stores';
 import { cleanValueProperties, emptySchema, emptyString, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined } from '../utils';
@@ -42,6 +43,9 @@ import { Triggers } from './triggers/triggers.svelte';
 import WorkerTagSelect from './WorkerTagSelect.svelte';
 import { inputSizeClasses } from './text_input/TextInput.svelte';
 import DebounceLimit from './flows/DebounceLimit.svelte';
+import { isRuleActive } from '../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../utils/editInFork';
+import OnBehalfOfSelector, {} from './OnBehalfOfSelector.svelte';
 let { script = $bindable(), fullyLoaded = true, initialPath = $bindable(''), template = $bindable('script'), initialArgs = {}, lockedLanguage = false, showMeta = false, neverShowMeta = false, diffDrawer = undefined, savedScript = $bindable(undefined), searchParams = new URLSearchParams(), disableHistoryChange = false, replaceStateFn = (url) => window.history.replaceState(null, '', url), customUi = {}, savedPrimarySchedule = undefined, functionExports = undefined, children, onDeploy, onDeployError, onSaveInitial, onSeeDetails, onSaveDraftError, onSaveDraft, disableAi } = $props();
 export function getInitialAndModifiedValues() {
     return {
@@ -63,15 +67,22 @@ let deployedValue = $state(undefined); // Value to diff against
 let deployedBy = $state(undefined); // Author
 let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
 let open = $state(false); // Is confirmation modal open
-let args = $state(initialArgs); // Test args input
+let args = $state(untrack(() => initialArgs)); // Test args input
 let selectedInputTab = $state('main');
 let hasPreprocessor = $state(false);
-let metadataOpen = $state(!neverShowMeta &&
-    (showMeta ||
-        searchParams.get('metadata_open') == 'true' ||
+let preserveOnBehalfOf = $state(false);
+const WM_DEPLOYERS_GROUP = 'wm_deployers';
+let isDeployer = $derived($userStore?.groups?.includes(WM_DEPLOYERS_GROUP) ?? false);
+let canPreserve = $derived(!!$userStore?.is_admin || !!$userStore?.is_super_admin || isDeployer);
+let originalOnBehalfOfEmail = $derived(savedScript?.on_behalf_of_email);
+let onBehalfOfChoice = $state(undefined);
+let customOnBehalfOfEmail = $state('');
+let metadataOpen = $state(!untrack(() => neverShowMeta) &&
+    (untrack(() => showMeta) ||
+        untrack(() => searchParams).get('metadata_open') == 'true' ||
         (initialPath == '' &&
-            searchParams.get('state') == undefined &&
-            searchParams.get('collab') == undefined)));
+            untrack(() => searchParams).get('state') == undefined &&
+            untrack(() => searchParams).get('collab') == undefined)));
 let editor = $state(undefined);
 let scriptEditor = $state(undefined);
 let captureTable = $state(undefined);
@@ -84,9 +95,12 @@ async function handleDraftTriggersConfirmed(event) {
     draftTriggersModalOpen = false;
     confirmDeploymentCallback(selectedTriggers);
 }
-const primaryScheduleStore = writable(savedPrimarySchedule); // keep for legacy
-const triggersCount = writable(savedPrimarySchedule
-    ? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
+const primaryScheduleStore = writable(untrack(() => savedPrimarySchedule)); // keep for legacy
+const triggersCount = writable(untrack(() => savedPrimarySchedule)
+    ? {
+        schedule_count: 1,
+        primary_schedule: { schedule: untrack(() => savedPrimarySchedule).cron }
+    }
     : undefined);
 const simplifiedPoll = writable(false);
 export function setPrimarySchedule(schedule) {
@@ -374,6 +388,7 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
                 has_preprocessor: script.has_preprocessor,
                 deployment_message: deploymentMsg || undefined,
                 on_behalf_of_email: script.on_behalf_of_email,
+                preserve_on_behalf_of: preserveOnBehalfOf || undefined,
                 assets: script.assets
             }
         });
@@ -396,7 +411,7 @@ async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
         }
-        if (stay || (script.no_main_func && script.kind !== 'preprocessor')) {
+        if (stay || (script.no_main_func && script.kind !== 'preprocessor' && !isWorkflowAsCode(script.content, script.language))) {
             script.parent_hash = newHash;
             sendUserToast('Deployed');
         }
@@ -566,6 +581,16 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                     window.open(`/scripts/add?template=${initialPath}`);
                 }
             },
+            ...(!isCloudHosted() && !isRuleActive('DisableWorkspaceForking')
+                ? [
+                    {
+                        label: 'Edit in workspace fork',
+                        onClick: () => {
+                            window.open(buildForkEditUrl('script', initialPath));
+                        }
+                    }
+                ]
+                : []),
             ...(customUi?.topBar?.diff !== false && savedScript && diffDrawer
                 ? [
                     {
@@ -576,15 +601,16 @@ function computeDropdownItems(initialPath, savedScript, diffDrawer) {
                             }
                             await syncWithDeployed();
                             const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot());
+                            const deployed = deployedValue ?? savedScript;
+                            const current = { ...script, draft_triggers: currentDraftTriggers };
+                            if (current.assets && !current.assets.length)
+                                delete current.assets;
                             diffDrawer?.openDrawer();
                             diffDrawer?.setDiff({
                                 mode: 'normal',
-                                deployed: deployedValue ?? savedScript,
+                                deployed,
                                 draft: savedScript['draft'],
-                                current: {
-                                    ...script,
-                                    draft_triggers: currentDraftTriggers
-                                }
+                                current
                             });
                         }
                     }
@@ -632,7 +658,7 @@ let selectedTab = $state((() => {
     }
     return 'metadata';
 })());
-setContext('disableTooltips', customUi?.disableTooltips === true);
+setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true);
 function langToLanguage(lang) {
     if (lang == 'docker') {
         return 'bash';
@@ -914,9 +940,10 @@ async function loadWorkerTags() {
 											<div class=" grid grid-cols-3 gap-2">
 												{#each langs as [label, lang] (lang)}
 													{@const isPicked =
-														(lang == script.language && template == 'script') ||
+														(lang == script.language && template != 'bunnative' && template != 'docker' && template != 'claudesandbox') ||
 														(template == 'bunnative' && lang == 'bunnative') ||
-														(template == 'docker' && lang == 'docker')}
+														(template == 'docker' && lang == 'docker') ||
+														(template == 'claudesandbox' && lang == 'bun')}
 													<Popover
 														disablePopup={!enterpriseLangs.includes(lang) || !!$enterpriseLicense}
 													>
@@ -949,6 +976,25 @@ async function loadWorkerTags() {
 											</div>
 										</Section>
 									{/if}
+									<div class="flex items-center gap-2 mt-2">
+										<span class="text-2xs text-secondary">Template</span>
+										<Button
+											size="xs2"
+											variant="border"
+											color="light"
+											startIcon={{
+												icon: LanguageIcon,
+												props: { lang: 'claudesandbox', width: 16, height: 16 }
+											} as ButtonType.Icon}
+											on:click={() => {
+												template = 'claudesandbox'
+												script.language = 'bun'
+												initContent('bun', script.kind, template)
+											}}
+										>
+											Claude Sandbox
+										</Button>
+									</div>
 									{#if customUi?.settingsPanel?.metadata?.disableScriptKind !== true}
 										<Section label="Script kind">
 											{#snippet header()}
@@ -1101,9 +1147,7 @@ async function loadWorkerTags() {
 											/>
 											{#if script.cache_ttl}
 												<div class="text-2xs text-secondary">How long to keep the cache valid</div>
-												<div class="-mt-5">
-													<SecondsInput bind:seconds={script.cache_ttl} />
-												</div>
+												<SecondsInput bind:seconds={script.cache_ttl} />
 												<Toggle
 													size="2xs"
 													bind:checked={
@@ -1205,6 +1249,7 @@ async function loadWorkerTags() {
 											disabled={!$enterpriseLicense ||
 												isCloudHosted() ||
 												(script.language != 'bun' &&
+													script.language != 'bunnative' &&
 													script.language != 'python3' &&
 													script.language != 'deno')}
 											size="sm"
@@ -1223,8 +1268,8 @@ async function loadWorkerTags() {
 										{#if script.dedicated_worker}
 											<div class="py-2">
 												<Alert type="info" title="Require dedicated workers">
-													One worker in a worker group needs to be configured with dedicated worker
-													set to: <pre>{$workspaceStore}:{script.path}</pre>
+													A worker group needs to be configured to listen to this script. Select it
+													in the dedicated workers section of the worker group configuration.
 												</Alert>
 											</div>
 										{/if}
@@ -1234,9 +1279,9 @@ async function loadWorkerTags() {
 											>
 												In this mode, the script is meant to be run on dedicated workers that run
 												the script at native speed. Can reach &gt;1500rps per dedicated worker. Only
-												available on enterprise edition and for Python3, Deno and Bun. For other
-												languages, the efficiency is already on par with deidcated workers since
-												they do not spawn a full runtime</Tooltip
+												available on enterprise edition and for Python3, Deno, Bun and Bunnative.
+												For other languages, the efficiency is already on par with dedicated workers
+												since they do not spawn a full runtime</Tooltip
 											>
 										{/snippet}
 									</Section>
@@ -1363,20 +1408,58 @@ async function loadWorkerTags() {
 											</Tooltip>
 										{/snippet}
 										<div class="flex gap-2 shrink flex-col">
-											<Toggle
-												size="sm"
-												checked={Boolean(script.on_behalf_of_email)}
-												on:change={() => {
-													if (script.on_behalf_of_email) {
-														script.on_behalf_of_email = undefined
-													} else {
-														script.on_behalf_of_email = $userStore?.email
-													}
-												}}
-												options={{
-													right: 'Run on behalf of last editor'
-												}}
-											/>
+											<span class="inline-flex gap-2">
+												<Toggle
+													size="sm"
+													checked={Boolean(script.on_behalf_of_email)}
+													on:change={() => {
+														if (script.on_behalf_of_email) {
+															script.on_behalf_of_email = undefined
+															preserveOnBehalfOf = false
+															onBehalfOfChoice = undefined
+														} else {
+															script.on_behalf_of_email = $userStore?.email
+														}
+													}}
+													options={{
+														right: `Run on behalf of ${canPreserve ? 'a specified user' : 'last editor'}`
+													}}
+												/>
+												{#if script.on_behalf_of_email && canPreserve}
+													&rarr; <OnBehalfOfSelector
+														targetWorkspace={$workspaceStore ?? ''}
+														targetEmail={originalOnBehalfOfEmail}
+														selected={onBehalfOfChoice}
+														onSelect={(choice, email) => {
+															onBehalfOfChoice = choice
+															if (choice === 'me') {
+																script.on_behalf_of_email = $userStore?.email
+																customOnBehalfOfEmail = ''
+																preserveOnBehalfOf = false
+															} else if (choice === 'target') {
+																script.on_behalf_of_email = originalOnBehalfOfEmail
+																customOnBehalfOfEmail = ''
+																preserveOnBehalfOf = true
+															} else if (choice === 'custom' && email) {
+																script.on_behalf_of_email = email
+																customOnBehalfOfEmail = email
+																preserveOnBehalfOf = true
+															}
+														}}
+														kind="script"
+														{canPreserve}
+														customEmail={customOnBehalfOfEmail}
+														isDeployment={false}
+													/>
+												{:else if script.on_behalf_of_email && !canPreserve}
+													<span class="text-xs text-tertiary">
+														Currently: <span class="font-medium"
+															>{originalOnBehalfOfEmail ?? script.on_behalf_of_email}</span
+														>. Will be set to <span class="font-medium">{$userStore?.email}</span> on
+														deploy (requires admin or wm_deployers group to override)
+													</span>
+												{/if}
+											</span>
 										</div>
 									</Section>
 									{#if !isCloudHosted()}

package/package/components/ScriptEditor.svelte CHANGED Viewed

@@ -19,7 +19,7 @@ import { scriptLangToEditorLang } from '../scripts';
 import { WebsocketProvider } from 'y-websocket';
 import Modal from './common/modal/Modal.svelte';
 import DiffEditor from './DiffEditor.svelte';
-import { AlertTriangle, Bug, Copy, CornerDownLeft, ExternalLink, Github, GitBranch, Play, PlayIcon, Terminal, WandSparkles } from 'lucide-svelte';
+import { AlertTriangle, Bug, Copy, CornerDownLeft, Disc, Download, ExternalLink, Github, GitBranch, Play, PlayIcon, Terminal, WandSparkles } from 'lucide-svelte';
 import { DebugToolbar, DebugPanel, DebugConsole, getDAPClient, debugState, resetDAPClient, getDebugServerUrl, isDebuggable, getDebugFileExtension, fetchContextualVariables, signDebugRequest, getDebugErrorMessage } from './debug';
 import { SvelteSet } from 'svelte/reactivity';
 import { setLicense } from '../enterpriseUtils';
@@ -48,7 +48,10 @@ import Toggle from './Toggle.svelte';
 import { deepEqual } from 'fast-equals';
 import { usePreparedAssetSqlQueries } from '../infer.svelte';
 import { resource, watch } from 'runed';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
+import { createScriptRecording } from './recording/scriptRecording.svelte';
+import { setActiveRecording } from './recording/flowRecording.svelte';
+import DropdownV2 from './DropdownV2.svelte';
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editorBarRight, enablePreprocessorSnippet = false } = $props();
 let initialArgs = structuredClone($state.snapshot(args));
 let jsonView = $state(false);
 let schemaHeight = $state(0);
@@ -114,6 +117,9 @@ let testIsLoading = $state(false);
 let testJob = $state();
 let pastPreviews = $state([]);
 let validCode = $state(true);
+// Recording
+let scriptRecording = createScriptRecording();
+let lastRecording = $state(undefined);
 let wsProvider = $state(undefined);
 let yContent = $state(undefined);
 let peers = $state([]);
@@ -189,16 +195,34 @@ export async function runTest() {
         ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
         : (args ?? {}), tag, undefined, undefined, {
         done(_x) {
+            if (scriptRecording.active) {
+                lastRecording = scriptRecording.stop();
+                setActiveRecording(undefined);
+            }
             loadPastTests();
         },
         doneError({ error }) {
+            if (scriptRecording.active) {
+                lastRecording = scriptRecording.stop();
+                setActiveRecording(undefined);
+            }
             console.error(error);
-            // sendUserToast('Error running test', true)
         }
     });
     logPanel?.setFocusToLogs();
     return job;
 }
+async function recordAndTest() {
+    lastRecording = undefined;
+    scriptRecording.start(path ?? '', code, lang ?? '', args ?? {}, schema);
+    setActiveRecording(scriptRecording);
+    await runTest();
+}
+function downloadRecording() {
+    if (lastRecording) {
+        scriptRecording.download(lastRecording);
+    }
+}
 async function loadPastTests() {
     pastPreviews = await JobService.listCompletedJobs({
         workspace: $workspaceStore,
@@ -623,7 +647,8 @@ function asKind(str) {
 function collabUrl() {
     let url = new URL(window.location.toString().split('#')[0]);
     url.search = '';
-    return `${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` + (edit ? '' : `&path=${path}`);
+    return (`${url}?collab=1&workspace=${encodeURIComponent($workspaceStore ?? '')}&lang=${encodeURIComponent(lang ?? '')}` +
+        (edit ? '' : `&path=${path}`));
 }
 let showTabs = $derived(hasPreprocessor);
 $effect(() => {
@@ -639,7 +664,7 @@ export async function updateArgs(newArgs) {
         argsRender++;
     }
 }
-setContext('disableTooltips', customUi?.disableTooltips === true);
+setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true);
 let codePanelSize = $state(70);
 let testPanelSize = $state(30);
 let storedTestPanelSize = untrack(() => testPanelSize);
@@ -735,12 +760,17 @@ $effect(() => {
 <Modal title="Debug Feature (Beta)" bind:open={showDebugBetaWarning}>
 	<div class="flex items-start gap-3">
 		<div class="flex-shrink-0">
-			<div class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50">
+			<div
+				class="flex h-10 w-10 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-800/50"
+			>
 				<AlertTriangle class="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
 			</div>
 		</div>
 		<div class="text-secondary text-sm">
-			<p>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected behavior or limitations.</p>
+			<p
+				>The Debug feature is currently in <strong>beta</strong>. You may encounter unexpected
+				behavior or limitations.</p
+			>
 			<p class="mt-2">By continuing, you acknowledge that this feature is experimental.</p>
 		</div>
 	</div>
@@ -786,7 +816,7 @@ $effect(() => {
 				bind:showHistoryDrawer
 			>
 				{#snippet right()}
-					{@render editor_bar_right?.()}
+					{@render editorBarRight?.()}
 				{/snippet}
 			</EditorBar>
 		{/if}
@@ -884,45 +914,72 @@ $effect(() => {
 						/>
 					</div>
 					{#if !(debugMode && isDebuggableScript)}
-						{#if testIsLoading}
-							<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
-								<WindmillIcon
-									white={true}
-									class="mr-2 text-white"
-									height="16px"
-									width="20px"
-									spin="fast"
-								/>
-								Cancel
-							</Button>
-						{:else}
-							{@const disableTriggerButton = customUi?.previewPanel?.disableTriggerButton === true}
+						<div class="flex flex-row gap-2">
 							<div
 								class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch"
 							>
-								<Button
-									on:click={() => runTest()}
-									btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
-									size="xs"
-									variant="accent-secondary"
-									startIcon={{ icon: Play, classes: 'animate-none' }}
-									shortCut={{ Icon: CornerDownLeft, hide: testIsLoading }}
-								>
-									{#if testIsLoading}
-										Running
-									{:else}
+								{#if testIsLoading}
+									<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
+										<WindmillIcon
+											white={true}
+											class="mr-2 text-white"
+											height="16px"
+											width="20px"
+											spin="fast"
+										/>
+										Cancel
+									</Button>
+								{:else}
+									{@const disableTriggerButton =
+										customUi?.previewPanel?.disableTriggerButton === true}
+									<Button
+										on:click={() => runTest()}
+										unifiedSize="md"
+										btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
+										variant="accent-secondary"
+										startIcon={{ icon: Play, classes: 'animate-none' }}
+										shortCut={{ Icon: CornerDownLeft }}
+									>
 										Test
+									</Button>
+									{#if !disableTriggerButton}
+										<CaptureButton on:openTriggers />
 									{/if}
-								</Button>
-								{#if !disableTriggerButton}
-									<CaptureButton on:openTriggers />
 								{/if}
 							</div>
-						{/if}
+							{#if lastRecording}
+								<Button
+									on:click={downloadRecording}
+									unifiedSize="md"
+									startIcon={{ icon: Download }}
+									iconOnly
+									title="Download recording"
+								/>
+							{/if}
+						</div>
 					{/if}
-					<div class="absolute top-2 right-2"
-						><Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} /></div
-					>
+					<div class="absolute top-2 right-2 flex items-center gap-2">
+						<Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} />
+						<DropdownV2
+							size="xs"
+							items={[
+								{
+									displayName: 'Test & record',
+									icon: Disc,
+									action: () => recordAndTest()
+								},
+								...(lastRecording
+									? [
+											{
+												displayName: 'Download recording',
+												icon: Download,
+												action: () => downloadRecording()
+											}
+										]
+									: [])
+							]}
+						/>
+					</div>
 				</div>
 				<Splitpanes
 					horizontal
@@ -1194,6 +1251,7 @@ $effect(() => {
 			{args}
 			{enablePreprocessorSnippet}
 			preparedAssetsSqlQueries={preparedSqlQueries.current}
+			customTag={tag}
 		/>
 		<DiffEditor
 			className="h-full"

package/package/components/ScriptEditor.svelte.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ interface Props {
     path: string | undefined;
     lang: Preview['language'];
     kind?: string | undefined;
-    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative';
+    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
     tag: string | undefined;
     initialArgs?: Record<string, any>;
     fixedOverflowWidgets?: boolean;
@@ -34,7 +34,7 @@ interface Props {
     lastDeployedCode?: string | undefined;
     disableAi?: boolean;
     assets?: AssetWithAltAccessType[];
-    editor_bar_right?: import('svelte').Snippet;
+    editorBarRight?: import('svelte').Snippet;
     enablePreprocessorSnippet?: 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> {