diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index c6608ddbe3..172f5cc60e 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -158,144 +158,148 @@
 	/>
 {/if}
 {#if !$userStore?.operator}
-	{#if initialMode !== 'preview'}
-		<AppEditorHeader {policy} {fromHub} />
-	{/if}
+	{#if $appStore}
+		{#if initialMode !== 'preview'}
+			<AppEditorHeader {policy} {fromHub} />
+		{/if}
 
-	{#if previewing}
-		<SplitPanesWrapper>
-			<div
-				class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
-				style={$appStore.css?.['app']?.['viewer']?.style}
-			>
-				<AppPreview
-					workspace={$workspaceStore ?? ''}
-					summary={$summaryStore}
-					app={$appStore}
-					appPath={path}
-					{breakpoint}
-					{policy}
-					isEditor
-					{context}
-					noBackend={false}
-				/>
-			</div>
-		</SplitPanesWrapper>
-	{:else}
-		<SplitPanesWrapper>
-			<Splitpanes class="max-w-full overflow-hidden">
-				<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
-					<ContextPanel />
-				</Pane>
-				<Pane size={64}>
-					<SplitPanesWrapper>
-						<Splitpanes horizontal>
-							<Pane size={$connectingInput?.opened ? 100 : 70}>
-								<div
-									on:pointerdown={(e) => {
-										$selectedComponent = undefined
-										$focusedGrid = undefined
-									}}
-									class={twMerge(
-										'bg-gray-100 h-full w-full',
-										$appStore.css?.['app']?.['viewer']?.class
-									)}
-									style={$appStore.css?.['app']?.['viewer']?.style}
-								>
+		{#if previewing}
+			<SplitPanesWrapper>
+				<div
+					class={twMerge('h-full w-full', $appStore.css?.['app']?.['viewer']?.class)}
+					style={$appStore.css?.['app']?.['viewer']?.style}
+				>
+					<AppPreview
+						workspace={$workspaceStore ?? ''}
+						summary={$summaryStore}
+						app={$appStore}
+						appPath={path}
+						{breakpoint}
+						{policy}
+						isEditor
+						{context}
+						noBackend={false}
+					/>
+				</div>
+			</SplitPanesWrapper>
+		{:else}
+			<SplitPanesWrapper>
+				<Splitpanes class="max-w-full overflow-hidden">
+					<Pane size={$connectingInput?.opened ? 40 : 15} minSize={5} maxSize={33}>
+						<ContextPanel />
+					</Pane>
+					<Pane size={64}>
+						<SplitPanesWrapper>
+							<Splitpanes horizontal>
+								<Pane size={$connectingInput?.opened ? 100 : 70}>
 									<div
-										class={classNames(
-											'relative mx-auto w-full h-full overflow-auto',
-											app.fullscreen ? '' : 'max-w-6xl'
+										on:pointerdown={(e) => {
+											$selectedComponent = undefined
+											$focusedGrid = undefined
+										}}
+										class={twMerge(
+											'bg-gray-100 h-full w-full',
+											$appStore.css?.['app']?.['viewer']?.class
 										)}
+										style={$appStore.css?.['app']?.['viewer']?.style}
 									>
-										{#if $appStore.grid}
-											<ComponentNavigation />
+										<div
+											class={classNames(
+												'relative mx-auto w-full h-full overflow-auto',
+												app.fullscreen ? '' : 'max-w-6xl'
+											)}
+										>
+											{#if $appStore.grid}
+												<ComponentNavigation />
 
-											<div on:pointerdown|stopPropagation class={width}>
-												<GridEditor {policy} />
+												<div on:pointerdown|stopPropagation class={width}>
+													<GridEditor {policy} />
+												</div>
+
+												<div id="app-editor-top-level-drawer" />
+											{/if}
+										</div>
+									</div>
+								</Pane>
+								<Pane size={$connectingInput?.opened ? 0 : 30}>
+									<div class="relative h-full w-full">
+										<InlineScriptsPanel />
+									</div>
+								</Pane>
+							</Splitpanes>
+						</SplitPanesWrapper>
+					</Pane>
+					<Pane size={21} minSize={5} maxSize={33}>
+						<div class="relative flex flex-col h-full">
+							<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
+								<Tab value="insert" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faPlus} />
+										<span>Insert</span>
+									</div>
+								</Tab>
+								<Tab value="settings" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faSliders} />
+										<span>Settings</span>
+									</div>
+								</Tab>
+								<Tab value="css" size="xs">
+									<div class="m-1 center-center gap-2">
+										<Icon data={faCode} />
+										<span>CSS</span>
+									</div>
+								</Tab>
+								<div slot="content" class="h-full overflow-y-auto pb-4">
+									<TabContent class="overflow-auto h-full" value="settings">
+										{#if $selectedComponent !== undefined}
+											<SettingsPanel />
+										{:else}
+											<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
+												Select a component to see the settings&nbsp;for&nbsp;it
 											</div>
-
-											<div id="app-editor-top-level-drawer" />
 										{/if}
-									</div>
+									</TabContent>
+									<TabContent value="insert">
+										<ComponentList />
+									</TabContent>
+									<TabContent value="css">
+										<CssSettings />
+									</TabContent>
 								</div>
-							</Pane>
-							<Pane size={$connectingInput?.opened ? 0 : 30}>
-								<div class="relative h-full w-full">
-									<InlineScriptsPanel />
-								</div>
-							</Pane>
-						</Splitpanes>
-					</SplitPanesWrapper>
-				</Pane>
-				<Pane size={21} minSize={5} maxSize={33}>
-					<div class="relative flex flex-col h-full">
-						<Tabs bind:selected={selectedTab} wrapperClass="!h-[40px]" class="!h-full">
-							<Tab value="insert" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faPlus} />
-									<span>Insert</span>
-								</div>
-							</Tab>
-							<Tab value="settings" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faSliders} />
-									<span>Settings</span>
-								</div>
-							</Tab>
-							<Tab value="css" size="xs">
-								<div class="m-1 center-center gap-2">
-									<Icon data={faCode} />
-									<span>CSS</span>
-								</div>
-							</Tab>
-							<div slot="content" class="h-full overflow-y-auto pb-4">
-								<TabContent class="overflow-auto h-full" value="settings">
-									{#if $selectedComponent !== undefined}
-										<SettingsPanel />
-									{:else}
-										<div class="min-w-[150px] text-sm text-gray-500 text-center py-8 px-2">
-											Select a component to see the settings&nbsp;for&nbsp;it
+							</Tabs>
+							{#if $connectingInput.opened}
+								<div
+									class="fixed top-32  p-2 z-50 flex justify-center items-center"
+									transition:fly|local={{ duration: 100, y: -100 }}
+								>
+									<Alert title="Connecting" type="info">
+										<div class="flex gap-2 flex-col">
+											Click on the output of the component you want to connect to on the left panel.
+											<div>
+												<Button
+													color="blue"
+													variant="border"
+													size="xs"
+													on:click={() => {
+														$connectingInput.opened = false
+														$connectingInput.input = undefined
+													}}
+												>
+													Stop connecting
+												</Button>
+											</div>
 										</div>
-									{/if}
-								</TabContent>
-								<TabContent value="insert">
-									<ComponentList />
-								</TabContent>
-								<TabContent value="css">
-									<CssSettings />
-								</TabContent>
-							</div>
-						</Tabs>
-						{#if $connectingInput.opened}
-							<div
-								class="fixed top-32  p-2 z-50 flex justify-center items-center"
-								transition:fly|local={{ duration: 100, y: -100 }}
-							>
-								<Alert title="Connecting" type="info">
-									<div class="flex gap-2 flex-col">
-										Click on the output of the component you want to connect to on the left panel.
-										<div>
-											<Button
-												color="blue"
-												variant="border"
-												size="xs"
-												on:click={() => {
-													$connectingInput.opened = false
-													$connectingInput.input = undefined
-												}}
-											>
-												Stop connecting
-											</Button>
-										</div>
-									</div>
-								</Alert>
-							</div>
-						{/if}
-					</div>
-				</Pane>
-			</Splitpanes>
-		</SplitPanesWrapper>
+									</Alert>
+								</div>
+							{/if}
+						</div>
+					</Pane>
+				</Splitpanes>
+			</SplitPanesWrapper>
+		{/if}
+	{:else}
+		App is null
 	{/if}
 {:else}
 	App editor not available to operators
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 1d31dfec09..945cab6a19 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -18,6 +18,7 @@
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import Dropdown from '$lib/components/Dropdown.svelte'
 	import FlowProgressBar from '$lib/components/flows/FlowProgressBar.svelte'
+	import { idMutex } from '$lib/components/flows/flowStateUtils'
 	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
 	import JobArgs from '$lib/components/JobArgs.svelte'
 	import LogViewer from '$lib/components/LogViewer.svelte'
@@ -247,7 +248,10 @@
 	$: selectedJobId && testJobLoader?.watchJob(selectedJobId)
 	$: hasErrors = Object.keys($errorByComponent).length > 0
 
+	let lock = false
 	function onKeyDown(event: KeyboardEvent) {
+		if (lock) return
+		lock = true
 		switch (event.key) {
 			case 'Z':
 				if (event.ctrlKey) {
@@ -258,6 +262,7 @@
 			case 'z':
 				if (event.ctrlKey) {
 					$app = undo(history, $app)
+
 					event.preventDefault()
 				}
 				break
@@ -286,6 +291,7 @@
 			// 	break
 			// }
 		}
+		lock = false
 	}
 </script>
 
@@ -513,20 +519,22 @@
 		</div>
 
 		<div class="hidden lg:block">
-			<ToggleButtonGroup bind:selected={$app.fullscreen}>
-				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start items-center">
-						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip light class="mb-0.5">
-							The max width is 1168px and the content stay centered instead of taking the full page
-							width
-						</Tooltip>
-					</div>
-				</ToggleButton>
-				<ToggleButton position="right" value={true} size="xs">
-					<Expand size={14} />
-				</ToggleButton>
-			</ToggleButtonGroup>
+			{#if $app}
+				<ToggleButtonGroup bind:selected={$app.fullscreen}>
+					<ToggleButton position="left" value={false} size="xs">
+						<div class="flex gap-1 justify-start items-center">
+							<AlignHorizontalSpaceAround size={14} />
+							<Tooltip light class="mb-0.5">
+								The max width is 1168px and the content stay centered instead of taking the full
+								page width
+							</Tooltip>
+						</div>
+					</ToggleButton>
+					<ToggleButton position="right" value={true} size="xs">
+						<Expand size={14} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			{/if}
 		</div>
 	</div>
 	{#if $focusedGrid !== undefined}
diff --git a/frontend/src/lib/components/apps/editor/appUtils.ts b/frontend/src/lib/components/apps/editor/appUtils.ts
index 2d6cac5e77..be82c52c4d 100644
--- a/frontend/src/lib/components/apps/editor/appUtils.ts
+++ b/frontend/src/lib/components/apps/editor/appUtils.ts
@@ -309,7 +309,6 @@ export function expandGriditem(
 ) {
 	const availableSpace = findAvailableSpace(grid, gridComponent, $breakpoint, parentGridItem)
 
-	console.log(availableSpace)
 	if (!availableSpace) {
 		return
 	}
diff --git a/frontend/src/lib/history.ts b/frontend/src/lib/history.ts
index 983228d32c..703f8b5ef4 100644
--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -21,7 +21,13 @@ export function undo<T>(history: History<T> | undefined, now: T): T {
             })
         }
         let nhistory = get(history)
-        return nhistory.history[nhistory.index]
+        let r = nhistory.history[nhistory.index]
+        if (!r) {
+            console.log('undo failed', nhistory, now)
+            return now
+        } else {
+            return r
+        }
     } else {
         return now
     }