windmill-components 1.472.1 → 1.472.2

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -0,0 +1,1594 @@
+<script>import { Alert, Badge, Drawer, DrawerContent, Tab, Tabs, UndoRedo } from '../../common';
+import Button from '../../common/button/Button.svelte';
+import DisplayResult from '../../DisplayResult.svelte';
+import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
+import FlowStatusViewer from '../../FlowStatusViewer.svelte';
+import JobArgs from '../../JobArgs.svelte';
+import LogViewer from '../../LogViewer.svelte';
+import Path from '../../Path.svelte';
+import TestJobLoader from '../../TestJobLoader.svelte';
+import Toggle from '../../Toggle.svelte';
+import { AppService, DraftService } from '../../../gen';
+import { redo, undo } from '../../../history';
+import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Loader2, RefreshCw, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { classNames, cleanValueProperties, truncateRev, orderedJsonStringify, replaceFalseWithUndefined, isFlowPreview } from '../../../utils';
+import { BG_PREFIX, allItems, toStatic } from '../utils';
+import AppExportButton from './AppExportButton.svelte';
+import AppInputs from './AppInputs.svelte';
+import PanelSection from './settingsPanel/common/PanelSection.svelte';
+import PreviewToggle from './PreviewToggle.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import Tooltip from '../../Tooltip.svelte';
+import { Sha256 } from '@aws-crypto/sha256-js';
+import { sendUserToast } from '../../../toast';
+import DeploymentHistory from './DeploymentHistory.svelte';
+import Awareness from '../../Awareness.svelte';
+import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel/secondaryMenu';
+import Dropdown from '../../DropdownV2.svelte';
+import AppEditorTutorial from './AppEditorTutorial.svelte';
+import AppTimeline from './AppTimeline.svelte';
+import AppReportsDrawer from './AppReportsDrawer.svelte';
+import HighlightCode from '../../HighlightCode.svelte';
+import { getPrimaryKeys } from '../components/display/dbtable/utils';
+import DebugPanel from './contextPanel/DebugPanel.svelte';
+import { getCountInput } from '../components/display/dbtable/queries/count';
+import { getSelectInput } from '../components/display/dbtable/queries/select';
+import { getInsertInput } from '../components/display/dbtable/queries/insert';
+import { getUpdateInput } from '../components/display/dbtable/queries/update';
+import { getDeleteInput } from '../components/display/dbtable/queries/delete';
+import { collectOneOfFields } from './appUtils';
+import Summary from '../../Summary.svelte';
+import HideButton from './settingsPanel/HideButton.svelte';
+import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
+import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy } from './appUtilsS3';
+import { isCloudHosted } from '../../../cloud';
+import { base } from '../../../base';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import LazyModePanel from './contextPanel/LazyModePanel.svelte';
+async function hash(message) {
+    try {
+        const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
+        const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
+        const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hashHex;
+    }
+    catch {
+        //subtle not available, trying pure js
+        const hash = new Sha256();
+        hash.update(message ?? '');
+        const result = Array.from(await hash.digest());
+        const hex = result.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+        return hex;
+    }
+}
+export let policy;
+export let fromHub = false;
+export let diffDrawer = undefined;
+export let savedApp = undefined;
+export let version = undefined;
+export let leftPanelHidden = false;
+export let rightPanelHidden = false;
+export let bottomPanelHidden = false;
+export let newApp;
+export let newPath = '';
+let newEditedPath = '';
+let deployedValue = undefined; // Value to diff against
+let deployedBy = undefined; // Author
+let confirmCallback = () => { }; // What happens when user clicks `override` in warning
+let open = false; // Is confirmation modal open
+const { app, summary, breakpoint, appPath, jobs, jobsById, staticExporter, errorByComponent, openDebugRun, mode, darkMode } = getContext('AppViewerContext');
+const { history, jobsDrawerOpen, refreshComponents } = getContext('AppEditorContext');
+const loading = {
+    publish: false,
+    save: false,
+    saveDraft: false
+};
+$: if ($openDebugRun == undefined) {
+    $openDebugRun = (jobId) => {
+        $jobsDrawerOpen = true;
+        selectedJobId = jobId;
+    };
+}
+let pathError = undefined;
+let appExport;
+let draftDrawerOpen = false;
+let saveDrawerOpen = false;
+let inputsDrawerOpen = fromHub;
+let historyBrowserDrawerOpen = false;
+let debugAppDrawerOpen = false;
+let lazyDrawerOpen = false;
+let deploymentMsg = undefined;
+function closeSaveDrawer() {
+    saveDrawerOpen = false;
+}
+function closeDraftDrawer() {
+    draftDrawerOpen = false;
+}
+function collectStaticFields(fields) {
+    return Object.fromEntries(Object.entries(fields ?? {})
+        .filter(([k, v]) => v.type == 'static')
+        .map(([k, v]) => {
+        return [k, v['value']];
+    }));
+}
+async function computeTriggerables() {
+    const items = allItems($app.grid, $app.subgrids);
+    console.debug('items', items);
+    const allTriggers = (await Promise.all(items
+        .flatMap((x) => {
+        let c = x.data;
+        let r = [
+            { input: c.componentInput, id: x.id }
+        ];
+        if (c.type === 'tablecomponent') {
+            r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if ((c.type === 'aggridcomponent' ||
+            c.type === 'aggridcomponentee' ||
+            c.type === 'dbexplorercomponent' ||
+            c.type === 'aggridinfinitecomponent' ||
+            c.type === 'aggridinfinitecomponentee') &&
+            Array.isArray(c.actions)) {
+            r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if (c.type === 'menucomponent') {
+            r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id })));
+        }
+        if (c.type === 'dbexplorercomponent') {
+            let nr = [];
+            let config = c.configuration;
+            const dbType = config?.type?.selected;
+            let pg = config?.type?.configuration?.[dbType];
+            if (pg && dbType) {
+                const { table, resource } = pg;
+                const tableValue = table.value;
+                const resourceValue = resource.value;
+                const columnDefs = c.configuration.columnDefs.value;
+                const whereClause = c.configuration.whereClause.value;
+                if (tableValue && resourceValue && columnDefs) {
+                    r.push({
+                        input: getSelectInput(resourceValue, tableValue, columnDefs, whereClause, dbType),
+                        id: x.id
+                    });
+                    r.push({
+                        input: getCountInput(resourceValue, tableValue, dbType, columnDefs, whereClause),
+                        id: x.id + '_count'
+                    });
+                    r.push({
+                        input: getInsertInput(tableValue, columnDefs, resourceValue, dbType),
+                        id: x.id + '_insert'
+                    });
+                    let primaryColumns = getPrimaryKeys(columnDefs);
+                    let columns = columnDefs?.filter((x) => primaryColumns.includes(x.field));
+                    r.push({
+                        input: getDeleteInput(resourceValue, tableValue, columns, dbType),
+                        id: x.id + '_delete'
+                    });
+                    columnDefs
+                        .filter((col) => col.editable || config.allEditable.value)
+                        .forEach((column) => {
+                        r.push({
+                            input: getUpdateInput(resourceValue, tableValue, column, columns, dbType),
+                            id: x.id + '_update'
+                        });
+                    });
+                }
+            }
+            r.push(...nr);
+        }
+        const processed = r
+            .filter((x) => x.input)
+            .map(async (o) => {
+            if (o.input?.type == 'runnable') {
+                return await processRunnable(o.id, o.input.runnable, o.input.fields);
+            }
+        });
+        return processed;
+    })
+        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
+        return await processRunnable(BG_PREFIX + i, v, v.fields);
+    }))));
+    delete policy.triggerables;
+    const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
+    policy.triggerables_v2 = ntriggerables;
+    const s3_inputs = items
+        .filter((x) => x.data.type === 's3fileinputcomponent')
+        .map((x) => {
+        const c = x.data;
+        const config = c.configuration;
+        return computeS3FileInputPolicy(config?.type?.configuration?.s3, $app);
+    })
+        .filter(Boolean);
+    if (items.findIndex((x) => {
+        const c = x.data;
+        if (c.type === 'schemaformcomponent') {
+            return (Object.values(c.componentInput?.value?.properties ?? {}).findIndex((p) => p?.type === 'object' && p?.format === 'resource-s3_object') !== -1);
+        }
+        else if (c.type === 'formbuttoncomponent' || c.type === 'formcomponent') {
+            return (Object.values(c.componentInput?.fields ?? {}).findIndex((p) => p?.fieldType === 'object' && p?.format === 'resource-s3_object') !== -1);
+        }
+        else {
+            return false;
+        }
+    }) !== -1) {
+        s3_inputs.push(computeWorkspaceS3FileInputPolicy());
+    }
+    policy.s3_inputs = s3_inputs;
+}
+async function processRunnable(id, runnable, fields) {
+    const staticInputs = collectStaticFields(fields);
+    const oneOfInputs = collectOneOfFields(fields, $app);
+    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: oneOfInputs,
+                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: oneOfInputs,
+                allow_user_resources: allowUserResources
+            }
+        ];
+    }
+}
+async function createApp(path) {
+    await computeTriggerables();
+    try {
+        await AppService.createApp({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: $app,
+                path,
+                summary: $summary,
+                policy,
+                deployment_message: deploymentMsg,
+                custom_path: customPath
+            }
+        });
+        savedApp = {
+            summary: $summary,
+            value: structuredClone($app),
+            path: path,
+            policy: policy,
+            custom_path: customPath
+        };
+        closeSaveDrawer();
+        sendUserToast('App deployed successfully');
+        try {
+            localStorage.removeItem(`app-${path}`);
+        }
+        catch (e) {
+            console.error('error interacting with local storage', e);
+        }
+        dispatch('savedNewAppPath', path);
+    }
+    catch (e) {
+        sendUserToast('Error creating app', e);
+    }
+}
+async function handleUpdateApp(npath) {
+    // We have to make sure there is no updates when we clicked the button
+    await compareVersions();
+    if (onLatest) {
+        // Handle directly
+        await updateApp(npath);
+    }
+    else {
+        // There is onLatest, but we need more information while deploying
+        // We need it to show diff
+        // Handle through confirmation modal
+        await syncWithDeployed();
+        if (deployedValue &&
+            savedApp &&
+            $app &&
+            orderedJsonStringify(deployedValue) ===
+                orderedJsonStringify(replaceFalseWithUndefined({
+                    summary: $summary,
+                    value: $app,
+                    path: newEditedPath || savedApp.draft?.path || savedApp.path,
+                    policy,
+                    custom_path: customPath
+                }))) {
+            await updateApp(npath);
+        }
+        else {
+            confirmCallback = async () => {
+                open = false;
+                await updateApp(npath);
+            };
+            // Open confirmation modal
+            open = true;
+        }
+    }
+}
+async function syncWithDeployed() {
+    const deployedApp = await AppService.getAppByPath({
+        workspace: $workspaceStore,
+        path: $appPath,
+        withStarredInfo: true
+    });
+    deployedBy = deployedApp.created_by;
+    // Strip off extra information
+    deployedValue = replaceFalseWithUndefined({
+        ...deployedApp,
+        id: undefined,
+        created_at: undefined,
+        created_by: undefined,
+        versions: undefined,
+        extra_perms: undefined
+    });
+}
+async function updateApp(npath) {
+    await computeTriggerables();
+    await AppService.updateApp({
+        workspace: $workspaceStore,
+        path: $appPath,
+        requestBody: {
+            value: $app,
+            summary: $summary,
+            policy,
+            path: npath,
+            deployment_message: deploymentMsg,
+            // custom_path requires admin so to accept update without it, we need to send as undefined when non-admin (when undefined, it will be ignored)
+            // it also means that customPath needs to be set to '' instead of undefined to unset it (when admin)
+            custom_path: $userStore?.is_admin || $userStore?.is_super_admin ? customPath ?? '' : undefined
+        }
+    });
+    savedApp = {
+        summary: $summary,
+        value: structuredClone($app),
+        path: npath,
+        policy,
+        custom_path: customPath
+    };
+    const appHistory = await AppService.getAppHistoryByPath({
+        workspace: $workspaceStore,
+        path: npath
+    });
+    version = appHistory[0]?.version;
+    closeSaveDrawer();
+    sendUserToast('App deployed successfully');
+    if ($appPath !== npath) {
+        try {
+            localStorage.removeItem(`app-${appPath}`);
+        }
+        catch (e) {
+            console.error('error interacting with local storage', e);
+        }
+        dispatch('savedNewAppPath', npath);
+    }
+}
+let secretUrl = undefined;
+$: $appPath && $appPath != '' && secretUrl == undefined && getSecretUrl();
+async function getSecretUrl() {
+    secretUrl = await AppService.getPublicSecretOfApp({
+        workspace: $workspaceStore,
+        path: $appPath
+    });
+}
+async function setPublishState() {
+    await computeTriggerables();
+    await AppService.updateApp({
+        workspace: $workspaceStore,
+        path: $appPath,
+        requestBody: { policy }
+    });
+    if (policy.execution_mode == 'anonymous') {
+        sendUserToast('App require no login to be accessed');
+    }
+    else {
+        sendUserToast('App require login and read-access');
+    }
+}
+async function save() {
+    $secondaryMenuLeftStore.isOpen = false;
+    $secondaryMenuRightStore.isOpen = false;
+    saveDrawerOpen = true;
+    return;
+}
+async function saveInitialDraft() {
+    await computeTriggerables();
+    try {
+        await AppService.createApp({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: $app,
+                path: newEditedPath,
+                summary: $summary,
+                policy,
+                draft_only: true,
+                custom_path: customPath
+            }
+        });
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: newEditedPath,
+                typ: 'app',
+                value: {
+                    value: $app,
+                    path: newEditedPath,
+                    summary: $summary,
+                    policy,
+                    custom_path: customPath
+                }
+            }
+        });
+        savedApp = {
+            summary: $summary,
+            value: structuredClone($app),
+            path: newEditedPath,
+            policy,
+            draft_only: true,
+            draft: {
+                summary: $summary,
+                value: structuredClone($app),
+                path: newEditedPath,
+                policy,
+                custom_path: customPath
+            },
+            custom_path: customPath
+        };
+        draftDrawerOpen = false;
+        dispatch('savedNewAppPath', newEditedPath);
+    }
+    catch (e) {
+        sendUserToast('Error saving initial draft', e);
+    }
+    draftDrawerOpen = false;
+}
+async function saveDraft(forceSave = false) {
+    if (newApp) {
+        // initial draft
+        draftDrawerOpen = true;
+        return;
+    }
+    if (!savedApp) {
+        return;
+    }
+    const draftOrDeployed = cleanValueProperties(savedApp.draft || savedApp);
+    const current = cleanValueProperties({
+        summary: $summary,
+        value: $app,
+        path: newEditedPath || savedApp.draft?.path || savedApp.path,
+        policy
+    });
+    if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
+        sendUserToast('No changes detected, ignoring', false, [
+            {
+                label: 'Save anyway',
+                callback: () => {
+                    saveDraft(true);
+                }
+            }
+        ]);
+        return;
+    }
+    loading.saveDraft = true;
+    try {
+        await computeTriggerables();
+        let path = $appPath;
+        if (savedApp.draft_only) {
+            await AppService.deleteApp({
+                workspace: $workspaceStore,
+                path: path
+            });
+            await AppService.createApp({
+                workspace: $workspaceStore,
+                requestBody: {
+                    value: $app,
+                    summary: $summary,
+                    policy,
+                    path: newEditedPath || path,
+                    draft_only: true,
+                    custom_path: customPath
+                }
+            });
+        }
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: savedApp.draft_only ? newEditedPath || path : path,
+                typ: 'app',
+                value: {
+                    value: $app,
+                    summary: $summary,
+                    policy,
+                    path: newEditedPath || path
+                }
+            }
+        });
+        savedApp = {
+            ...(savedApp?.draft_only
+                ? {
+                    summary: $summary,
+                    value: structuredClone($app),
+                    path: savedApp.draft_only ? newEditedPath || path : path,
+                    policy,
+                    draft_only: true,
+                    custom_path: customPath
+                }
+                : savedApp),
+            draft: {
+                summary: $summary,
+                value: structuredClone($app),
+                path: newEditedPath || path,
+                policy,
+                custom_path: customPath
+            }
+        };
+        sendUserToast('Draft saved');
+        try {
+            localStorage.removeItem(`app-${path}`);
+        }
+        catch (e) {
+            console.error('error interacting with local storage', e);
+        }
+        loading.saveDraft = false;
+        if (newApp || savedApp.draft_only) {
+            dispatch('savedNewAppPath', newEditedPath || path);
+        }
+    }
+    catch (e) {
+        loading.saveDraft = false;
+        throw e;
+    }
+}
+let onLatest = true;
+async function compareVersions() {
+    if (version === undefined) {
+        return;
+    }
+    try {
+        const appVersion = await AppService.getAppLatestVersion({
+            workspace: $workspaceStore,
+            path: $appPath
+        });
+        onLatest = appVersion?.version === undefined || version === appVersion?.version;
+    }
+    catch (e) {
+        console.error('Error comparing versions', e);
+        onLatest = true;
+    }
+}
+$: saveDrawerOpen && compareVersions();
+let selectedJobId = undefined;
+let testJobLoader;
+let job = undefined;
+let testIsLoading = false;
+$: selectedJobId && !selectedJobId?.includes('Frontend') && testJobLoader?.watchJob(selectedJobId);
+$: if (selectedJobId?.includes('Frontend') && selectedJobId) {
+    job = undefined;
+}
+$: hasErrors = Object.keys($errorByComponent).length > 0;
+let lock = false;
+function onKeyDown(event) {
+    if (lock)
+        return;
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    lock = true;
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey || event.metaKey) {
+                $app = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey || event.metaKey) {
+                $app = undo(history, $app);
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey || event.metaKey) {
+                saveDraft();
+                event.preventDefault();
+            }
+            break;
+        // case 'ArrowDown': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > -1 && idx < ids.length - 1) {
+        // 		$selectedIdStore = ids[idx + 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+        // case 'ArrowUp': {
+        // 	let ids = generateIds()
+        // 	let idx = ids.indexOf($selectedIdStore)
+        // 	if (idx > 0 && idx < ids.length) {
+        // 		$selectedIdStore = ids[idx - 1]
+        // 		event.preventDefault()
+        // 	}
+        // 	break
+        // }
+    }
+    lock = false;
+}
+let dirtyPath = false;
+let path = undefined;
+let moreItems = [
+    {
+        displayName: 'Deployment history',
+        icon: History,
+        action: () => {
+            historyBrowserDrawerOpen = true;
+        },
+        disabled: !savedApp
+    },
+    {
+        displayName: 'Export',
+        icon: FileJson,
+        action: () => {
+            appExport.open($app);
+        }
+    },
+    // {
+    // 	displayName: 'Publish to Hub',
+    // 	icon: faGlobe,
+    // 	action: () => {
+    // 		const url = appToHubUrl(toStatic($app, $staticExporter, $summary, $hubBaseUrlStore))
+    // 		window.open(url.toString(), '_blank')
+    // 	}
+    // },
+    {
+        displayName: 'Hub compatible JSON',
+        icon: FileUp,
+        action: () => {
+            appExport.open(toStatic($app, $staticExporter, $summary).app);
+        }
+    },
+    {
+        displayName: 'App inputs',
+        icon: FormInput,
+        action: () => {
+            inputsDrawerOpen = true;
+        }
+    },
+    {
+        displayName: 'Schedule reports',
+        icon: FileClock,
+        action: () => {
+            appReportingDrawerOpen = true;
+        },
+        disabled: !savedApp || savedApp.draft_only
+    },
+    {
+        displayName: 'Diff',
+        icon: DiffIcon,
+        action: async () => {
+            if (!savedApp) {
+                return;
+            }
+            // deployedValue should be syncronized when we open Diff
+            await syncWithDeployed();
+            diffDrawer?.openDrawer();
+            diffDrawer?.setDiff({
+                mode: 'normal',
+                deployed: deployedValue ?? savedApp,
+                draft: savedApp.draft,
+                current: {
+                    summary: $summary,
+                    value: $app,
+                    path: newEditedPath || savedApp.draft?.path || savedApp.path,
+                    policy,
+                    custom_path: customPath
+                }
+            });
+        },
+        disabled: !savedApp
+    },
+    // App debug menu
+    {
+        displayName: 'Troubleshoot panel',
+        icon: Bug,
+        action: () => {
+            debugAppDrawerOpen = true;
+        }
+    },
+    {
+        displayName: 'Lazy mode',
+        icon: Zap,
+        action: () => {
+            lazyDrawerOpen = true;
+        }
+    }
+];
+let appEditorTutorial = undefined;
+export function toggleTutorial() {
+    appEditorTutorial?.toggleTutorial();
+}
+let rightColumnSelect = 'timeline';
+let appReportingDrawerOpen = false;
+export function openTroubleshootPanel() {
+    debugAppDrawerOpen = true;
+}
+const dispatch = createEventDispatcher();
+function setTheme(newDarkMode) {
+    let globalDarkMode = window.localStorage.getItem('dark-mode')
+        ? window.localStorage.getItem('dark-mode') === 'dark'
+        : window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (newDarkMode === true || (newDarkMode === null && globalDarkMode)) {
+        document.documentElement.classList.add('dark');
+    }
+    else if (newDarkMode === false) {
+        document.documentElement.classList.remove('dark');
+    }
+    $darkMode = newDarkMode ?? globalDarkMode;
+}
+let priorDarkMode = document.documentElement.classList.contains('dark');
+setTheme($app?.darkMode);
+let customPath = savedApp?.custom_path;
+let dirtyCustomPath = false;
+let customPathError = '';
+$: fullCustomUrl = `${window.location.origin}${base}/a/${isCloudHosted() ? $workspaceStore + '/' : ''}${customPath}`;
+async function appExists(customPath) {
+    return await AppService.customPathExists({
+        workspace: $workspaceStore,
+        customPath
+    });
+}
+let validateTimeout = undefined;
+async function validateCustomPath(customPath) {
+    customPathError = '';
+    if (validateTimeout) {
+        clearTimeout(validateTimeout);
+    }
+    validateTimeout = setTimeout(async () => {
+        if (!/^[\w-]+(\/[\w-]+)*$/.test(customPath)) {
+            customPathError = 'Invalid path';
+        }
+        else if (customPath !== savedApp?.custom_path && (await appExists(customPath))) {
+            customPathError = 'Path already taken';
+        }
+        else {
+            customPathError = '';
+        }
+        validateTimeout = undefined;
+    }, 500);
+}
+$: customPath !== undefined && validateCustomPath(customPath);
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<TestJobLoader bind:this={testJobLoader} bind:isLoading={testIsLoading} bind:job />
+
+{#if $$slots.unsavedConfirmationModal}
+	<slot
+		name="unsavedConfirmationModal"
+		{diffDrawer}
+		additionalExitAction={() => {
+			setTheme(priorDarkMode)
+		}}
+		getInitialAndModifiedValues={() => ({
+			savedValue: savedApp,
+			modifiedValue: {
+				summary: $summary,
+				value: $app,
+				path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
+				policy,
+				custom_path: customPath
+			}
+		})}
+	/>
+{/if}
+<DeployOverrideConfirmationModal
+	bind:deployedBy
+	bind:confirmCallback
+	bind:open
+	{diffDrawer}
+	bind:deployedValue
+	currentValue={{
+		summary: $summary,
+		value: $app,
+		path: newEditedPath || savedApp?.draft?.path || savedApp?.path,
+		policy,
+		custom_path: customPath
+	}}
+/>
+
+{#if $appPath == ''}
+	<Drawer bind:open={draftDrawerOpen} size="800px">
+		<DrawerContent title="Initial draft save" on:close={() => closeDraftDrawer()}>
+			<Alert title="Require path" type="info">
+				Choose a path to save the initial draft of the app.
+			</Alert>
+			<h3>Summary</h3>
+			<div class="w-full pt-2">
+				<!-- svelte-ignore a11y-autofocus -->
+				<input
+					autofocus
+					type="text"
+					placeholder="App summary"
+					class="text-sm w-full font-semibold"
+					on:keydown|stopPropagation
+					bind:value={$summary}
+					on:keyup={() => {
+						if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
+							path?.setName(
+								$summary
+									.toLowerCase()
+									.replace(/[^a-z0-9_]/g, '_')
+									.replace(/-+/g, '_')
+									.replace(/^-|-$/g, '')
+							)
+						}
+					}}
+				/>
+			</div>
+			<div class="py-2" />
+			<Path
+				autofocus={false}
+				bind:this={path}
+				bind:error={pathError}
+				bind:path={newEditedPath}
+				bind:dirty={dirtyPath}
+				initialPath=""
+				namePlaceholder="app"
+				kind="app"
+			/>
+			<div class="py-4" />
+
+			<div slot="actions">
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != ''}
+					on:click={() => saveInitialDraft()}
+				>
+					Save initial draft
+				</Button>
+			</div>
+		</DrawerContent>
+	</Drawer>
+{/if}
+<Drawer bind:open={saveDrawerOpen} size="800px">
+	<DrawerContent title="Deploy" on:close={() => closeSaveDrawer()}>
+		{#if !onLatest}
+			<Alert title="You're not on the latest app version. " type="warning">
+				By deploying, you may overwrite changes made by other users. Press 'Deploy' to see diff.
+			</Alert>
+			<div class="py-2" />
+		{/if}
+		<span class="text-secondary text-sm font-bold">Summary</span>
+		<div class="w-full pt-2">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				autofocus
+				type="text"
+				placeholder="App summary"
+				class="text-sm w-full"
+				bind:value={$summary}
+				on:keydown|stopPropagation
+				on:keyup={() => {
+					if ($appPath == '' && $summary?.length > 0 && !dirtyPath) {
+						path?.setName(
+							$summary
+								.toLowerCase()
+								.replace(/[^a-z0-9_]/g, '_')
+								.replace(/-+/g, '_')
+								.replace(/^-|-$/g, '')
+						)
+					}
+				}}
+			/>
+		</div>
+		<div class="py-4" />
+		<span class="text-secondary text-sm font-bold">Deployment message</span>
+		<div class="w-full pt-2">
+			<!-- svelte-ignore a11y-autofocus -->
+			<input
+				type="text"
+				placeholder="Optional deployment message"
+				class="text-sm w-full"
+				bind:value={deploymentMsg}
+			/>
+		</div>
+		<div class="py-4" />
+		<span class="text-secondary text-sm font-bold">Path</span>
+		<Path
+			bind:this={path}
+			bind:dirty={dirtyPath}
+			bind:error={pathError}
+			bind:path={newEditedPath}
+			initialPath={newPath}
+			namePlaceholder="app"
+			kind="app"
+			autofocus={false}
+		/>
+
+		<div slot="actions" class="flex flex-row gap-4">
+			<Button
+				variant="border"
+				color="light"
+				disabled={!savedApp || savedApp.draft_only}
+				on:click={async () => {
+					if (!savedApp) {
+						return
+					}
+					// deployedValue should be syncronized when we open Diff
+					await syncWithDeployed()
+
+					saveDrawerOpen = false
+					diffDrawer?.openDrawer()
+					diffDrawer?.setDiff({
+						mode: 'normal',
+						deployed: deployedValue ?? savedApp,
+						draft: savedApp.draft,
+						current: {
+							summary: $summary,
+							value: $app,
+							path: newEditedPath || savedApp.draft?.path || savedApp.path,
+							policy,
+							custom_path: customPath
+						},
+						button: {
+							text: 'Looks good, deploy',
+							onClick: () => {
+								if ($appPath == '') {
+									createApp(newEditedPath)
+								} else {
+									handleUpdateApp(newEditedPath)
+								}
+							}
+						}
+					})
+				}}
+			>
+				<div class="flex flex-row gap-2 items-center">
+					<DiffIcon size={14} />
+					Diff
+				</div>
+			</Button>
+			<Button
+				startIcon={{ icon: Save }}
+				disabled={pathError != '' || customPathError != ''}
+				on:click={() => {
+					if ($appPath == '') {
+						createApp(newEditedPath)
+					} else {
+						handleUpdateApp(newEditedPath)
+					}
+				}}
+			>
+				Deploy
+			</Button>
+		</div>
+		<div class="py-2" />
+		{#if $appPath == ''}
+			<Alert title="Require saving" type="error">
+				Save this app once before you can publish it
+			</Alert>
+		{:else}
+			<Alert title="App executed on behalf of you">
+				A viewer of the app will execute the runnables of the app on behalf of the publisher (you)
+				<Tooltip>
+					It ensures that all required resources/runnable visible for publisher but not for viewer
+					at time of creating the app would prevent the execution of the app. To guarantee tight
+					security, a policy is computed at time of deployment of the app which only allow the
+					scripts/flows referred to in the app to be called on behalf of. Furthermore, static
+					parameters are not overridable. Hence, users will only be able to use the app as intended
+					by the publisher without risk for leaking resources not used in the app.
+				</Tooltip>
+			</Alert>
+
+			<div class="mt-10" />
+
+			<h2>Public URL</h2>
+			<div class="mt-4" />
+
+			<div class="flex gap-2 items-center">
+				<Toggle
+					options={{
+						left: `Require login and read-access`,
+						right: `No login required`
+					}}
+					checked={policy.execution_mode == 'anonymous'}
+					on:change={(e) => {
+						policy.execution_mode = e.detail ? 'anonymous' : 'publisher'
+						setPublishState()
+					}}
+				/>
+			</div>
+
+			<div class="my-6 box">
+				<div class="text-secondary">
+					<div>Public URL</div>
+				</div>
+				{#if secretUrl}
+					{@const href = `${window.location.origin}${base}/public/${$workspaceStore}/${secretUrl}`}
+					<ClipboardPanel content={href} size="md" />
+				{:else}<Loader2 class="animate-spin" />
+				{/if}
+				<div class="text-xs text-secondary mt-1">
+					Share this url directly or embed it using an iframe (if requiring login, top-level domain
+					of embedding app must be the same as the one of Windmill)
+				</div>
+
+				<div class="mt-4">
+					{#if !$enterpriseLicense}
+						<Alert title="EE Only" type="warning" size="xs">
+							Custom path is an enterprise only feature.
+						</Alert>
+						<div class="mb-2" />
+					{:else if !($userStore?.is_admin || $userStore?.is_super_admin)}
+						<Alert type="warning" title="Admin only" size="xs">
+							Custom path can only be set by workspace admins
+						</Alert>
+						<div class="mb-2" />
+					{/if}
+					<Toggle
+						on:change={({ detail }) => {
+							customPath = detail ? '' : undefined
+						}}
+						checked={customPath !== undefined}
+						options={{
+							right: 'Use a custom URL'
+						}}
+						disabled={!$enterpriseLicense || !($userStore?.is_admin || $userStore?.is_super_admin)}
+					/>
+
+					{#if customPath !== undefined}
+						<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
+							<div>Custom path</div>
+						</div>
+						<input
+							disabled={!($userStore?.is_admin || $userStore?.is_super_admin)}
+							type="text"
+							autocomplete="off"
+							bind:value={customPath}
+							class={customPathError === ''
+								? ''
+								: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+							on:input={() => {
+								dirtyCustomPath = true
+							}}
+						/>
+						<div class="text-secondary text-sm flex items-center gap-1 mt-2 w-full justify-between">
+							<div>Custom public URL</div>
+						</div>
+						<ClipboardPanel content={fullCustomUrl} size="md" />
+
+						<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+							>{dirtyCustomPath ? customPathError : ''}
+						</div>
+					{/if}
+				</div>
+			</div>
+			<Alert type="info" title="Only latest deployed app is publicly available">
+				You will still need to deploy the app to make visible the latest changes
+			</Alert>
+
+			<a
+				href="https://www.windmill.dev/docs/advanced/external_auth_with_jwt#embed-public-apps-using-your-own-authentification"
+				class="mt-4 text-2xs">Embed this app in your own product to be used by your own users</a
+			>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:open={inputsDrawerOpen} size="600px">
+	<DrawerContent title="App inputs configuration" on:close={() => (inputsDrawerOpen = false)}>
+		<AppInputs />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
+	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
+		<DeploymentHistory on:restore appPath={$appPath} />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:open={debugAppDrawerOpen} size="800px">
+	<DrawerContent title="Troubleshoot Panel" on:close={() => (debugAppDrawerOpen = false)}>
+		<DebugPanel />
+	</DrawerContent>
+</Drawer>
+
+<Drawer bind:open={lazyDrawerOpen} size="800px">
+	<DrawerContent title="Lazy Mode" on:close={() => (lazyDrawerOpen = false)}>
+		<LazyModePanel />
+	</DrawerContent>
+</Drawer>
+<Drawer bind:open={$jobsDrawerOpen} size="900px">
+	<DrawerContent
+		noPadding
+		title="Debug Runs"
+		on:close={() => {
+			$jobsDrawerOpen = false
+		}}
+		tooltip="Look at latests runs to spot potential bugs."
+		documentationLink="https://www.windmill.dev/docs/apps/app_debugging"
+	>
+		<Splitpanes class="!overflow-visible">
+			<Pane size={25}>
+				<PanelSection title="Past Runs">
+					<div class="flex flex-col gap-2 w-full">
+						{#if $jobs.length > 0}
+							<div class="flex gap-2 flex-col-reverse">
+								{#each $jobs ?? [] as id}
+									{@const selectedJob = $jobsById[id]}
+									{#if selectedJob}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div
+											class={classNames(
+												'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-surface-secondary hover:text-blue-400',
+												selectedJob.error ? 'border border-red-500 text-primary' : '',
+												selectedJob.error && $errorByComponent[selectedJob.component]?.id == id
+													? selectedJobId == id
+														? 'bg-red-600 !border-blue-600'
+														: 'bg-red-400'
+													: selectedJobId == id
+													? 'text-blue-600'
+													: ''
+											)}
+											on:click={() => {
+												selectedJobId = id
+												rightColumnSelect = 'detail'
+											}}
+										>
+											<span class="text-xs truncate">{truncateRev(selectedJob.job, 20)}</span>
+											<Badge color="indigo">{selectedJob.component}</Badge>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{:else}
+							<div class="text-sm text-tertiary">No items</div>
+						{/if}
+					</div>
+				</PanelSection>
+			</Pane>
+			<Pane size={75}>
+				<div class="w-full h-full flex flex-col">
+					<div>
+						<Tabs bind:selected={rightColumnSelect}>
+							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
+							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+						</Tabs>
+					</div>
+					{#if rightColumnSelect == 'timeline'}
+						<div class="p-2 grow overflow-auto">
+							<AppTimeline />
+						</div>
+					{:else if rightColumnSelect == 'detail'}
+						<div class="grow flex flex-col w-full overflow-auto">
+							{#if selectedJobId}
+								{#if selectedJobId?.includes('Frontend')}
+									{@const jobResult = $jobsById[selectedJobId]}
+									{#if jobResult?.error !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														result={{
+															error: { name: 'Frontend execution error', message: jobResult.error }
+														}}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else if jobResult !== undefined}
+										<Splitpanes horizontal class="grow border w-full">
+											<Pane size={10} minSize={10}>
+												<LogViewer
+													content={`Logs are avaiable in the browser console directly`}
+													isLoading={false}
+													tag={undefined}
+												/>
+											</Pane>
+											<Pane size={90} minSize={10} class="text-sm text-secondary">
+												<div class="relative h-full px-2">
+													<DisplayResult
+														workspaceId={$workspaceStore}
+														jobId={selectedJobId}
+														result={jobResult.result}
+													/>
+												</div>
+											</Pane>
+										</Splitpanes>
+									{:else}
+										<Loader2 class="animate-spin" />
+									{/if}
+								{:else}
+									<div class="flex flex-col h-full w-full mb-4">
+										{#if job?.['running']}
+											<div class="flex flex-row-reverse w-full">
+												<Button
+													color="red"
+													variant="border"
+													on:click={() => testJobLoader?.cancelJob()}
+												>
+													<Loader2 size={14} class="animate-spin mr-2" />
+
+													Cancel
+												</Button>
+											</div>
+										{/if}
+										{#if job?.args}
+											<div class="p-2">
+												<JobArgs
+													id={job.id}
+													workspace={job.workspace_id ?? $workspaceStore ?? 'no_w'}
+													args={job?.args}
+												/>
+											</div>
+										{/if}
+										{#if job?.raw_code}
+											<div class="pb-2 pl-2 pr-2 w-full overflow-auto h-full max-h-[80px]">
+												<HighlightCode language={job?.language} code={job?.raw_code} />
+											</div>
+										{/if}
+
+										{#if job?.job_kind !== 'flow' && !isFlowPreview(job?.job_kind)}
+											{@const jobResult = $jobsById[selectedJobId]}
+											<Splitpanes horizontal class="grow border w-full">
+												<Pane size={50} minSize={10}>
+													<LogViewer
+														duration={job?.['duration_ms']}
+														jobId={job?.id}
+														content={job?.logs}
+														isLoading={testIsLoading && job?.['running'] == false}
+														tag={job?.tag}
+													/>
+												</Pane>
+												<Pane size={50} minSize={10} class="text-sm text-secondary">
+													{#if job != undefined && 'result' in job && job.result != undefined}<div
+															class="relative h-full px-2"
+															><DisplayResult
+																workspaceId={$workspaceStore}
+																jobId={selectedJobId}
+																result={job.result}
+															/></div
+														>
+													{:else if testIsLoading}
+														<div class="p-2"><Loader2 class="animate-spin" /> </div>
+													{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+														<div class="p-2 text-tertiary">Result is undefined</div>
+													{:else}
+														<div class="p-2 text-tertiary">
+															<Loader2 size={14} class="animate-spin mr-2" />
+														</div>
+													{/if}
+												</Pane>
+												{#if jobResult?.transformer}
+													<Pane size={50} minSize={10} class="text-sm text-secondary p-2">
+														<div class="font-bold">Transformer results</div>
+														{#if job != undefined && 'result' in job && job.result != undefined}
+															<div class="relative h-full px-2">
+																<DisplayResult
+																	workspaceId={$workspaceStore}
+																	jobId={selectedJobId}
+																	result={jobResult?.transformer}
+																/>
+															</div>
+														{:else if testIsLoading}
+															<div class="p-2"><Loader2 class="animate-spin" /> </div>
+														{:else if job != undefined && 'result' in job && job?.['result'] == undefined}
+															<div class="p-2 text-tertiary">Result is undefined</div>
+														{:else}
+															<div class="p-2 text-tertiary">
+																<Loader2 size={14} class="animate-spin mr-2" />
+															</div>
+														{/if}
+													</Pane>
+												{/if}
+											</Splitpanes>
+										{:else}
+											<div class="mt-10" />
+											<FlowProgressBar {job} class="py-4" />
+											<div class="w-full mt-10 mb-20">
+												<FlowStatusViewer
+													jobId={job?.id ?? ''}
+													on:jobsLoaded={({ detail }) => {
+														job = detail
+													}}
+												/>
+											</div>
+										{/if}
+									</div>
+								{/if}
+							{:else}
+								<div class="text-sm p-2 text-tertiary">Select a job to see its details</div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</Pane>
+		</Splitpanes>
+		<svelte:fragment slot="actions">
+			<Button
+				size="md"
+				color="light"
+				variant="border"
+				on:click={() => {
+					$refreshComponents?.()
+				}}
+				title="Refresh App"
+			>
+				Refresh app&nbsp;<RefreshCw size={16} />
+			</Button>
+
+			<Button
+				size="md"
+				color="light"
+				variant="border"
+				on:click={() => {
+					errorByComponent.set({})
+					jobs.set([])
+				}}
+				>Clear jobs
+			</Button>
+			{#if hasErrors}
+				<Button size="md" color="light" variant="border" on:click={() => errorByComponent.set({})}
+					>Clear Errors &nbsp;<BellOff size={14} />
+				</Button>
+			{/if}
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>
+
+<AppReportsDrawer bind:open={appReportingDrawerOpen} appPath={$appPath ?? ''} />
+
+<div
+	class="border-b flex flex-row justify-between py-1 gap-2 gap-y-2 px-2 items-center overflow-y-visible overflow-x-auto"
+>
+	<div class="flex flex-row gap-2 items-center">
+		<Summary bind:value={$summary} />
+		<div class="flex gap-2">
+			<UndoRedo
+				undoProps={{ disabled: $history?.index === 0 }}
+				redoProps={{ disabled: $history && $history?.index === $history.history.length - 1 }}
+				on:undo={() => {
+					$app = undo(history, $app)
+				}}
+				on:redo={() => {
+					$app = redo(history)
+				}}
+			/>
+
+			{#if $app}
+				<ToggleButtonGroup
+					class="h-[30px]"
+					selected={$app.fullscreen ? 'true' : 'false'}
+					on:selected={({ detail }) => {
+						$app.fullscreen = detail === 'true'
+					}}
+					let:item
+				>
+					<ToggleButton
+						icon={AlignHorizontalSpaceAround}
+						value={'false'}
+						tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+					<ToggleButton
+						tooltip="The width is of the app if the full width of its container"
+						icon={Expand}
+						value={'true'}
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+				</ToggleButtonGroup>
+			{/if}
+			{#if $app}
+				<ToggleButtonGroup
+					class="h-[30px]"
+					on:selected={({ detail }) => {
+						console.log('dbg detail', detail)
+						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
+						console.log('dbg settheme', theme)
+						setTheme(theme)
+					}}
+					selected={$app.darkMode === undefined ? 'auto' : $app.darkMode ? 'dark' : 'sun'}
+					let:item
+				>
+					<ToggleButton
+						icon={SunMoon}
+						value={'auto'}
+						tooltip="The app mode between dark/light is automatic"
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+					<ToggleButton
+						icon={Sun}
+						value={'sun'}
+						tooltip="Force light mode"
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+					<ToggleButton
+						tooltip="Force dark mode"
+						icon={Moon}
+						value={'dark'}
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+				</ToggleButtonGroup>
+			{/if}
+			<div class="flex flex-row gap-2">
+				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint} let:item>
+					<ToggleButton
+						tooltip="Computer View"
+						icon={Laptop2}
+						value={'lg'}
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+					<ToggleButton
+						tooltip="Mobile View"
+						icon={Smartphone}
+						value={'sm'}
+						iconProps={{ size: 16 }}
+						{item}
+					/>
+					{#if $breakpoint === 'sm'}
+						<Toggle
+							size="xs"
+							options={{
+								right: 'Enable mobile view for smaller screens',
+								rightTooltip:
+									'Desktop view is enabled by default. Enable this to customize the layout of the components for the mobile view'
+							}}
+							textClass="text-2xs whitespace-nowrap white !w-full"
+							bind:checked={$app.mobileViewOnSmallerScreens}
+							class="flex flex-row px-2 items-center"
+						/>
+					{/if}
+				</ToggleButtonGroup>
+			</div>
+		</div>
+	</div>
+
+	{#if $mode !== 'preview'}
+		<div class="flex gap-1">
+			<HideButton
+				direction="left"
+				hidden={leftPanelHidden}
+				on:click={() => {
+					if (leftPanelHidden) {
+						dispatch('showLeftPanel')
+					} else {
+						dispatch('hideLeftPanel')
+					}
+				}}
+			/>
+			<HideButton
+				hidden={bottomPanelHidden}
+				direction="bottom"
+				on:click={() => {
+					if (bottomPanelHidden) {
+						dispatch('showBottomPanel')
+					} else {
+						dispatch('hideBottomPanel')
+					}
+				}}
+			/>
+			<HideButton
+				hidden={rightPanelHidden}
+				direction="right"
+				on:click={() => {
+					if (rightPanelHidden) {
+						dispatch('showRightPanel')
+					} else {
+						dispatch('hideRightPanel')
+					}
+				}}
+			/>
+		</div>
+	{/if}
+	{#if $enterpriseLicense && $appPath != ''}
+		<Awareness />
+	{/if}
+	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
+		<Dropdown items={moreItems} />
+		<AppEditorTutorial bind:this={appEditorTutorial} />
+
+		<div class="hidden md:inline relative overflow-visible">
+			{#if hasErrors}
+				<span
+					class="animate-ping absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
+				/>
+				<span
+					class=" absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
+				/>
+			{/if}
+			<Button
+				on:click={() => {
+					if (selectedJobId == undefined && $jobs.length > 0) {
+						selectedJobId = $jobs[$jobs.length - 1]
+					}
+					$jobsDrawerOpen = true
+				}}
+				color={hasErrors ? 'red' : 'light'}
+				size="xs"
+				variant="border"
+				btnClasses="relative"
+			>
+				<div class="flex flex-row gap-1 items-center">
+					<Bug size={14} />
+					<div>Debug runs</div>
+					<div class="text-2xs text-tertiary"
+						>({$jobs?.length > 99 ? '99+' : $jobs?.length ?? 0})</div
+					>
+					{#if hasErrors}
+						<Button
+							size="xs"
+							btnClasses="-my-2 !px-1 !py-0"
+							color="light"
+							variant="border"
+							on:click={() => errorByComponent.set({})}
+							><BellOff size={12} />
+						</Button>
+					{/if}
+				</div>
+			</Button>
+		</div>
+		<AppExportButton bind:this={appExport} />
+		<PreviewToggle loading={loading.save} />
+		<Button
+			loading={loading.save}
+			startIcon={{ icon: Save }}
+			on:click={() => saveDraft()}
+			size="xs"
+			disabled={!newApp && !savedApp}
+			shortCut={{ key: 'S' }}
+		>
+			Draft
+		</Button>
+		<Button
+			loading={loading.save}
+			startIcon={{ icon: Save }}
+			on:click={save}
+			size="xs"
+			dropdownItems={$appPath != ''
+				? () => [
+						{
+							label: 'Fork',
+							onClick: () => {
+								window.open(`/apps/add?template=${appPath}`)
+							}
+						}
+				  ]
+				: undefined}
+		>
+			Deploy
+		</Button>
+	</div>
+</div>