windmill-components 1.558.3 → 1.596.0

package/package/components/raw_apps/RawAppEditor.svelte

@@ -1,20 +1,38 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
+<script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RawAppInlineScriptsPanel from './RawAppInlineScriptsPanel.svelte';
 import RawAppEditorHeader from './RawAppEditorHeader.svelte';
 import {} from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
 import { encodeState } from '../../utils';
+import { deepEqual } from 'fast-equals';
 // import { addWmillClient } from './utils'
 import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte';
 import { workspaceStore } from '../../stores';
 import { genWmillTs } from './utils';
-import HideButton from '../apps/editor/settingsPanel/HideButton.svelte';
 import DarkModeObserver from '../DarkModeObserver.svelte';
+import RawAppSidebar from './RawAppSidebar.svelte';
+import { isRunnableByName, isRunnableByPath } from '../apps/inputType';
+import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
+import { onMount } from 'svelte';
+import { rawAppLintStore } from './lintStore';
+import { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
+import { sendUserToast } from '../../utils';
 let { initFiles, initRunnables, newApp, policy, summary = $bindable(''), path, newPath = undefined, savedApp = $bindable(undefined), diffDrawer = undefined } = $props();
 export const version = undefined;
 let runnables = $state(initRunnables);
+let initRunnablesContent = Object.fromEntries(Object.entries(initRunnables).map(([key, runnable]) => {
+    if (isRunnableByName(runnable)) {
+        return [key, runnable?.inlineScript?.content ?? ''];
+    }
+    return [key, ''];
+}));
 let files = $state(initFiles);
+// Initialize history manager
+const historyManager = new RawAppHistoryManager({
+    maxEntries: 50,
+    autoSnapshotInterval: 5 * 60 * 1000 // 5 minutes
+});
+historyManager.manualSnapshot(files ?? {}, runnables, summary);
 let draftTimeout = undefined;
 function saveFrontendDraft() {
     draftTimeout && clearTimeout(draftTimeout);
@@ -31,14 +49,68 @@ function saveFrontendDraft() {
     }, 500);
 }
 let iframe = $state(undefined);
-let appPanelSize = $state(70);
+let sidebarPanelSize = $state(10);
 let jobs = $state([]);
 let jobsById = $state({});
+// Helper function to convert internal Runnable to BackendRunnable format
+function convertToBackendRunnable(key, runnable) {
+    if (!runnable)
+        return undefined;
+    const backendRunnable = {
+        name: runnable.name ?? key
+    };
+    if (isRunnableByName(runnable)) {
+        backendRunnable.type = 'inline';
+        if (runnable.inlineScript) {
+            // Map frontend language to backend API language
+            let language = runnable.inlineScript.language;
+            // Backend API only supports 'bun' and 'python3' for inline scripts
+            // Map TypeScript variants to 'bun'
+            if (language === 'nativets' || language === 'deno') {
+                language = 'bun';
+            }
+            backendRunnable.inlineScript = {
+                language: language,
+                content: runnable.inlineScript.content ?? ''
+            };
+        }
+    }
+    else if (isRunnableByPath(runnable)) {
+        // Determine type based on runType
+        if (runnable.runType === 'flow') {
+            backendRunnable.type = 'flow';
+        }
+        else if (runnable.runType === 'hubscript') {
+            backendRunnable.type = 'hubscript';
+        }
+        else {
+            backendRunnable.type = 'script';
+        }
+        backendRunnable.path = runnable.path;
+    }
+    // Extract static inputs from fields
+    if (runnable.fields) {
+        const staticInputs = {};
+        Object.entries(runnable.fields).forEach(([fieldKey, field]) => {
+            if (field.type === 'static') {
+                staticInputs[fieldKey] = field.value;
+            }
+        });
+        if (Object.keys(staticInputs).length > 0) {
+            backendRunnable.staticInputs = staticInputs;
+        }
+    }
+    return backendRunnable;
+}
 let iframeLoaded = $state(false); // @hmr:keep
 function populateFiles() {
+    setFilesInIframe(initFiles);
+}
+function setFilesInIframe(newFiles) {
+    const files = Object.fromEntries(Object.entries(newFiles).filter(([path, _]) => !path.endsWith('/')));
     iframe?.contentWindow?.postMessage({
         type: 'setFiles',
-        files: initFiles
+        files: files
     }, '*');
 }
 function populateRunnables() {
@@ -47,14 +119,208 @@ function populateRunnables() {
         dts: genWmillTs(runnables)
     }, '*');
 }
+onMount(() => {
+    aiChatManager.saveAndClear();
+    aiChatManager.changeMode(AIMode.APP);
+    rawAppLintStore.enable();
+    // Start auto-snapshot
+    historyManager.startAutoSnapshot(() => ({
+        files: files ?? {},
+        runnables,
+        summary
+    }));
+    return () => {
+        rawAppLintStore.disable();
+        historyManager.destroy();
+    };
+});
+$effect(() => {
+    function lint() {
+        const snapshot = rawAppLintStore.getSnapshot();
+        // Convert MonacoLintError[] to string[] for each runnable
+        const backendErrors = {};
+        const backendWarnings = {};
+        for (const [key, errors] of Object.entries(snapshot.errors)) {
+            backendErrors[key] = errors.map((e) => `Line ${e.startLineNumber}: ${e.message}`);
+        }
+        for (const [key, warnings] of Object.entries(snapshot.warnings)) {
+            backendWarnings[key] = warnings.map((w) => `Line ${w.startLineNumber}: ${w.message}`);
+        }
+        // Count total errors and warnings
+        const errorCount = Object.values(snapshot.errors).reduce((acc, arr) => acc + arr.length, 0);
+        const warningCount = Object.values(snapshot.warnings).reduce((acc, arr) => acc + arr.length, 0);
+        return {
+            errors: {
+                frontend: {},
+                backend: backendErrors
+            },
+            warnings: {
+                frontend: {},
+                backend: backendWarnings
+            },
+            errorCount,
+            warningCount
+        };
+    }
+    return aiChatManager.setAppHelpers({
+        lint,
+        listFrontendFiles: () => {
+            return [...Object.keys(files ?? {}), '/wmill.d.ts'];
+        },
+        getFrontendFile: (path) => {
+            if (path === '/wmill.d.ts') {
+                return genWmillTs(runnables);
+            }
+            return $state.snapshot((files ?? {})[path]);
+        },
+        getFrontendFiles: () => {
+            const frontendFiles = {
+                ...$state.snapshot(files ?? {}),
+                '/wmill.d.ts': genWmillTs(runnables)
+            };
+            console.log('result', frontendFiles);
+            return frontendFiles;
+        },
+        setFrontendFile: (path, content) => {
+            console.log('setting frontend file', path, content);
+            if (!files) {
+                files = {};
+            }
+            files[path] = content;
+            setFilesInIframe(files);
+            selectedDocument = path;
+            handleSelectFile(path);
+            console.log('files after setting', files);
+            return lint();
+        },
+        deleteFrontendFile: (path) => {
+            if (!files) {
+                files = {};
+            }
+            delete files[path];
+            setFilesInIframe(files);
+        },
+        listBackendRunnables: () => {
+            return Object.entries(runnables).map(([key, runnable]) => ({
+                key,
+                name: runnable?.name ?? key
+            }));
+        },
+        getBackendRunnable: (key) => {
+            return convertToBackendRunnable(key, runnables[key]);
+        },
+        getBackendRunnables: () => {
+            const backendRunnables = {};
+            Object.entries(runnables).forEach(([key, runnable]) => {
+                const converted = convertToBackendRunnable(key, runnable);
+                if (converted) {
+                    backendRunnables[key] = converted;
+                }
+            });
+            return backendRunnables;
+        },
+        setBackendRunnable: async (key, runnable) => {
+            if (runnable.type === 'inline' && runnable.inlineScript) {
+                runnables[key] = {
+                    name: runnable.name,
+                    type: 'inline',
+                    inlineScript: {
+                        content: runnable.inlineScript.content,
+                        language: runnable.inlineScript.language
+                    },
+                    fields: runnable.staticInputs
+                        ? Object.fromEntries(Object.entries(runnable.staticInputs).map(([k, v]) => [
+                            k,
+                            { type: 'static', value: v, fieldType: 'object' }
+                        ]))
+                        : {}
+                };
+            }
+            else if (runnable.path) {
+                runnables[key] = {
+                    name: runnable.name,
+                    type: 'path',
+                    runType: runnable.type,
+                    path: runnable.path,
+                    fields: runnable.staticInputs
+                        ? Object.fromEntries(Object.entries(runnable.staticInputs).map(([k, v]) => [
+                            k,
+                            { type: 'static', value: v, fieldType: 'object' }
+                        ]))
+                        : {},
+                    schema: {}
+                };
+            }
+            populateRunnables();
+            // Switch UI to show this runnable so Monaco can analyze it
+            selectedRunnable = key;
+            // Wait 2 seconds for Monaco to analyze the code
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            return lint();
+        },
+        deleteBackendRunnable: (key) => {
+            delete runnables[key];
+            rawAppLintStore.clearDiagnostics(key);
+            populateRunnables();
+        },
+        getFiles: () => {
+            return {
+                frontend: $state.snapshot(files ?? {}),
+                backend: aiChatManager.appAiChatHelpers?.getBackendRunnables() ?? {}
+            };
+        },
+        getSelectedContext: () => {
+            if (selectedRunnable) {
+                console.log('selectedRunnable', selectedRunnable);
+                return {
+                    type: 'backend',
+                    content: selectedRunnable ?? ''
+                };
+            }
+            if (selectedDocument) {
+                console.log('selectedDocument', selectedDocument);
+                return {
+                    type: 'frontend',
+                    content: selectedDocument ?? ''
+                };
+            }
+            console.log('no selection');
+            return {
+                type: 'none',
+                content: ''
+            };
+        },
+        snapshot: () => {
+            // Force create snapshot for AI - it needs a restore point
+            return (historyManager.manualSnapshot(files ?? {}, runnables, summary, true)?.id ??
+                historyManager.getId());
+        },
+        revertToSnapshot: (id) => {
+            console.log('reverting to snapshot', id);
+            handleHistorySelect(id);
+        }
+    });
+});
 let selectedRunnable = $state(undefined);
+let selectedDocument = $state(undefined);
+let modules = $state({});
 function listener(e) {
     if (e.data.type === 'setFiles') {
-        files = e.data.files;
+        // Only mark pending changes if files actually changed (ignore echo from setFilesInIframe)
+        if (!deepEqual(files, e.data.files)) {
+            files = e.data.files;
+            historyManager.markPendingChanges();
+        }
     }
     else if (e.data.type === 'getBundle') {
         getBundleResolve?.(e.data.bundle);
     }
+    else if (e.data.type === 'updateModules') {
+        modules = e.data.modules;
+    }
+    else if (e.data.type === 'setActiveDocument') {
+        selectedDocument = e.data.path;
+    }
 }
 let getBundleResolve = undefined;
 async function getBundle() {
@@ -66,23 +332,84 @@ async function getBundle() {
     });
 }
 let darkMode = $state(false);
-run(() => {
+$effect(() => {
     runnables && files && saveFrontendDraft();
 });
-run(() => {
+$effect(() => {
     iframe?.addEventListener('load', () => {
         iframeLoaded = true;
     });
 });
-run(() => {
+$effect(() => {
     iframe && iframeLoaded && initFiles && populateFiles();
 });
-run(() => {
+$effect(() => {
     iframe && iframeLoaded && runnables && populateRunnables();
 });
+function handleSelectFile(path) {
+    console.log('event Select file:', path);
+    selectedRunnable = undefined;
+    iframe?.contentWindow?.postMessage({
+        type: 'selectFile',
+        path: path
+    }, '*');
+}
+function handleUndo() {
+    // Create a snapshot if we're at the latest position with pending changes
+    if (historyManager.needsSnapshotBeforeNav) {
+        historyManager.manualSnapshot(files ?? {}, runnables, summary);
+    }
+    const entry = historyManager.undo();
+    if (entry) {
+        applyEntry(entry);
+    }
+}
+function handleRedo() {
+    const entry = historyManager.redo();
+    if (entry) {
+        applyEntry(entry);
+    }
+}
+function handleHistorySelect(id) {
+    // Create a snapshot if we have pending changes before navigating
+    if (historyManager.needsSnapshotBeforeNav) {
+        historyManager.manualSnapshot(files ?? {}, runnables, summary);
+    }
+    const entry = historyManager.selectEntry(id);
+    if (entry) {
+        applyEntry(entry);
+    }
+}
+function applyEntry(entry) {
+    try {
+        files = structuredClone($state.snapshot(entry.files));
+        runnables = structuredClone($state.snapshot(entry.runnables));
+        summary = entry.summary;
+        setFilesInIframe(entry.files);
+        populateRunnables();
+        // Re-select the current document if it exists in the new files
+        if (selectedDocument && entry.files[selectedDocument] !== undefined) {
+            iframe?.contentWindow?.postMessage({
+                type: 'selectFile',
+                path: selectedDocument
+            }, '*');
+        }
+    }
+    catch (error) {
+        console.error('Failed to apply entry:', error);
+        sendUserToast('Failed to apply entry: ' + error.message, true);
+    }
+}
+function handleKeydown(e) {
+    // Ctrl/Cmd + Shift + H for manual snapshot
+    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'H') {
+        e.preventDefault();
+        historyManager.manualSnapshot(files ?? {}, runnables, summary);
+    }
+}
 </script>
 
-<svelte:window onmessage={listener} />
+<svelte:window onmessage={listener} onkeydown={handleKeydown} />
 <DarkModeObserver bind:darkMode />
 
 <RawAppBackgroundRunner
@@ -110,48 +437,58 @@ run(() => {
 		{files}
 		{runnables}
 		{getBundle}
+		canUndo={historyManager.canUndo}
+		canRedo={historyManager.canRedo}
+		onUndo={handleUndo}
+		onRedo={handleRedo}
 	/>
-	<Splitpanes id="o2" horizontal class="grow">
-		<Pane bind:size={appPanelSize}>
-			<!-- <iframe
-				bind:this={iframe}
-				title="UI builder"
-				src="http://localhost:4000/ui_builder/index.html?dark={darkMode}"
-				class="w-full h-full"
-			></iframe> -->
-			<iframe
-				bind:this={iframe}
-				title="UI builder"
-				src="/ui_builder/index.html?dark={darkMode}"
-				class="w-full h-full"
-			></iframe>
+
+	<Splitpanes id="o2" class="grow">
+		<Pane bind:size={sidebarPanelSize} maxSize={20}>
+			<RawAppSidebar
+				bind:files={
+					() => files,
+					(newFiles) => {
+						files = newFiles
+						setFilesInIframe(newFiles ?? {})
+					}
+				}
+				onSelectFile={handleSelectFile}
+				bind:selectedRunnable
+				bind:selectedDocument
+				{runnables}
+				{modules}
+				{historyManager}
+				historySelectedId={historyManager.selectedEntryId}
+				onHistorySelect={handleHistorySelect}
+				onManualSnapshot={() => {
+					historyManager.manualSnapshot(files ?? {}, runnables, summary, true)
+				}}
+			></RawAppSidebar>
 		</Pane>
 		<Pane>
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div class="flex h-full w-full">
-				<RawAppInlineScriptsPanel
-					on:hidePanel={() => {
-						appPanelSize = 100
-					}}
-					appPath={path}
-					bind:selectedRunnable
-					{runnables}
-				/>
+			<div class="h-full w-full">
+				<iframe
+					bind:this={iframe}
+					title="UI builder"
+					style="display: {selectedRunnable == undefined ? 'block' : 'none'}"
+					src="/ui_builder/index.html?dark={darkMode}"
+					class="w-full h-full"
+				></iframe>
+				{#if selectedRunnable !== undefined}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div class="flex h-full w-full">
+						<RawAppInlineScriptsPanel
+							appPath={path}
+							{selectedRunnable}
+							{initRunnablesContent}
+							{runnables}
+						/>
+					</div>
+				{/if}
 			</div>
+
 			<!-- <div class="bg-red-400 h-full w-full" /> -->
 		</Pane>
 	</Splitpanes>
-	{#if appPanelSize == 100}
-		<div class="absolute bottom-0.5 left-0.5 z-50">
-			<HideButton
-				size="lg"
-				on:click={() => {
-					appPanelSize = 70
-				}}
-				direction="bottom"
-				hidden
-				btnClasses="border bg-surface"
-			/>
-		</div>
-	{/if}
 </div>

package/package/components/raw_apps/RawAppEditor.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { HiddenRunnable } from '../apps/types';
 import { type Policy } from '../../gen';
 import DiffDrawer from '../DiffDrawer.svelte';
+import { type Runnable } from './utils';
 interface Props {
     initFiles: Record<string, string>;
-    initRunnables: Record<string, HiddenRunnable>;
+    initRunnables: Record<string, Runnable>;
     newApp: boolean;
     policy: Policy;
     summary?: string;

package/package/components/raw_apps/RawAppEditorHeader.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { Badge, Drawer, DrawerContent } from '../common';
 import Button from '../common/button/Button.svelte';
+import UndoRedo from '../common/button/UndoRedo.svelte';
 import { AppService, DraftService } from '../../gen';
 import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
-import { Bug, DiffIcon, FileJson, FileUp, History, MoreVertical, Pen, Save } from 'lucide-svelte';
+import { Bug, DiffIcon, FileJson, FileUp, History, MoreVertical, Pen, Save, WandSparkles } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined, defaultIfEmptyString } from '../../utils';
 // import {  allItems, toStatic } from '../apps/editor/settingsPanel/utils'
@@ -14,12 +15,14 @@ import Awareness from '../Awareness.svelte';
 import Summary from '../Summary.svelte';
 import DeployOverrideConfirmationModal from '../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import AppJobsDrawer from '../apps/editor/AppJobsDrawer.svelte';
-import { collectStaticFields, hash } from '../apps/editor/commonAppUtils';
 import DropdownV2 from '../DropdownV2.svelte';
 import { stateSnapshot } from '../../svelte5Utils.svelte';
 import AppEditorHeaderDeployInitialDraft from '../apps/editor/AppEditorHeaderDeployInitialDraft.svelte';
 import AppEditorHeaderDeploy from '../apps/editor/AppEditorHeaderDeploy.svelte';
-let { summary = $bindable(), policy = $bindable(), diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), newApp, newPath = '', appPath, runnables, files, jobs = $bindable(), jobsById = $bindable(), getBundle } = $props();
+import { updateRawAppPolicy } from './rawAppPolicy';
+import { aiChatManager } from '../copilot/chat/AIChatManager.svelte';
+import { AIBtnClasses } from '../copilot/chat/AIButtonStyle';
+let { summary = $bindable(), policy = $bindable(), diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), newApp, newPath = '', appPath, runnables, files, jobs = $bindable(), jobsById = $bindable(), getBundle, canUndo = false, canRedo = false, onUndo = undefined, onRedo = undefined } = $props();
 let newEditedPath = $state('');
 let deployedValue = $state(undefined); // Value to diff against
 let deployedBy = $state(undefined); // Author
@@ -44,46 +47,7 @@ function closeDraftDrawer() {
     draftDrawerOpen = false;
 }
 async function computeTriggerables() {
-    policy.execution_mode = 'publisher';
-    policy.on_behalf_of_email = $userStore?.email;
-    policy.on_behalf_of = $userStore?.username.includes('@')
-        ? $userStore?.username
-        : `u/${$userStore?.username}`;
-    policy.triggerables_v2 = Object.fromEntries((await Promise.all(Object.values(runnables).map(async (runnable) => {
-        return await processRunnable(runnable.name, runnable, runnable.fields);
-    }))));
-    return policy;
-}
-async function processRunnable(id, runnable, fields) {
-    const staticInputs = collectStaticFields(fields);
-    const allowUserResources = Object.entries(fields)
-        .map(([k, v]) => {
-        return v['allowUserResources'] ? k : undefined;
-    })
-        .filter(Boolean);
-    if (runnable?.type == 'runnableByName') {
-        let hex = await hash(runnable.inlineScript?.content);
-        console.log('hex', hex, id);
-        return [
-            `${id}:rawscript/${hex}`,
-            {
-                static_inputs: staticInputs,
-                one_of_inputs: {},
-                allow_user_resources: allowUserResources
-            }
-        ];
-    }
-    else if (runnable?.type == 'runnableByPath') {
-        let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
-        return [
-            `${id}:${prefix}/${runnable.path}`,
-            {
-                static_inputs: staticInputs,
-                one_of_inputs: {},
-                allow_user_resources: allowUserResources
-            }
-        ];
-    }
+    policy = await updateRawAppPolicy(runnables, policy);
 }
 async function createApp(path) {
     if (!app) {
@@ -543,8 +507,7 @@ $effect(() => {
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
-					variant="border"
-					color="light"
+					variant="default"
 					disabled={!savedApp || savedApp.draft_only}
 					on:click={async () => {
 						if (!savedApp) {
@@ -643,6 +606,13 @@ $effect(() => {
 >
 	<div class="flex flex-row gap-2 items-center">
 		<Summary bind:value={summary} />
+		<div></div>
+		<UndoRedo
+			undoProps={{ disabled: !canUndo }}
+			redoProps={{ disabled: !canRedo }}
+			on:undo={() => onUndo?.()}
+			on:redo={() => onRedo?.()}
+		/>
 	</div>
 
 	<div class=" flex">
@@ -659,7 +629,7 @@ $effect(() => {
 					>
 						<Badge
 							color="gray"
-							class="center-center !bg-surface-secondary !text-tertiary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all flex gap-1"
+							class="center-center !bg-surface-secondary !text-primary !h-[28px]  !w-[70px] rounded-none hover:!bg-surface-hover transition-all flex gap-1"
 						>
 							<Pen size={14} />Path
 						</Badge>
@@ -704,15 +674,26 @@ $effect(() => {
 			>
 				<div class="flex flex-row gap-1 items-center">
 					<Bug size={14} />
-					<div>Debug runs</div>
+					<div>Jobs</div>
 
-					<div class="text-2xs text-tertiary"
+					<div class="text-2xs text-primary"
 						>({jobs?.length > 99 ? '99+' : (jobs?.length ?? 0)})</div
 					>
 				</div>
 			</Button>
 		</div>
 		<AppExportButton bind:this={appExport} />
+		<Button
+			unifiedSized="sm"
+			color="light"
+			variant="default"
+			onClick={() => aiChatManager.toggleOpen()}
+			startIcon={{ icon: WandSparkles }}
+			iconOnly
+			btnClasses={AIBtnClasses('default')}
+		>
+			AI
+		</Button>
 		<Button
 			loading={loading.save}
 			startIcon={{ icon: Save }}

package/package/components/raw_apps/RawAppEditorHeader.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Policy } from '../../gen';
 import type DiffDrawer from '../DiffDrawer.svelte';
-import type { HiddenRunnable } from '../apps/types';
+import type { Runnable } from './RawAppInlineScriptRunnable.svelte';
 interface Props {
     summary: string;
     policy: Policy;
@@ -18,7 +18,7 @@ interface Props {
     newApp: boolean;
     newPath?: string;
     appPath: string;
-    runnables: Record<string, HiddenRunnable>;
+    runnables: Record<string, Runnable>;
     files: Record<string, string> | undefined;
     jobs: string[];
     jobsById: Record<string, any>;
@@ -26,6 +26,10 @@ interface Props {
         js: string;
         css: string;
     }>;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
 }
 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> & {