From f52a02469dcee3d571a18591b3fdbce7ed1bdea2 Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Fri, 27 Feb 2026 17:50:06 +0100
Subject: [PATCH] refactor: add untrack() to fix state_referenced_locally
 warnings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ...AppConnectLightweightResourcePicker.svelte |  6 ++--
 frontend/src/lib/components/AppWrapper.svelte |  3 +-
 .../src/lib/components/CustomPopover.svelte   |  5 +--
 .../src/lib/components/DBTableEditor.svelte   | 11 +++---
 frontend/src/lib/components/Dev.svelte        | 15 ++++----
 .../lib/components/DropdownSubmenuItem.svelte |  3 +-
 frontend/src/lib/components/DropdownV2.svelte |  2 +-
 .../src/lib/components/DynamicInput.svelte    |  4 +--
 .../lib/components/EditableSchemaForm.svelte  |  6 ++--
 frontend/src/lib/components/Editor.svelte     |  8 ++---
 .../components/FakeMonacoPlaceHolder.svelte   |  3 +-
 .../src/lib/components/FlowBuilder.svelte     | 36 +++++++++----------
 .../components/FlowLogViewerWrapper.svelte    |  4 +--
 .../lib/components/FlowStatusViewer.svelte    | 12 +++----
 .../components/FlowStatusViewerInner.svelte   |  6 ++--
 frontend/src/lib/components/FlowViewer.svelte | 10 ++++--
 .../src/lib/components/FlowWrapper.svelte     |  7 ++--
 .../src/lib/components/IdEditorInput.svelte   |  3 +-
 frontend/src/lib/components/JobLoader.svelte  |  2 +-
 .../lib/components/LogSnippetViewer.svelte    |  3 +-
 frontend/src/lib/components/LogViewer.svelte  |  3 +-
 .../src/lib/components/ManualPopover.svelte   |  3 +-
 frontend/src/lib/components/ModuleTest.svelte |  6 ++--
 frontend/src/lib/components/Popover.svelte    |  4 +--
 .../src/lib/components/PrefixedInput.svelte   |  3 +-
 .../lib/components/RepositorySelector.svelte  |  3 +-
 .../src/lib/components/ResourceEditor.svelte  |  2 +-
 .../src/lib/components/ResourcePicker.svelte  |  2 +-
 frontend/src/lib/components/RunsPage.svelte   |  4 +--
 .../components/SavedInputsPickerViewer.svelte |  5 +--
 .../src/lib/components/ScriptBuilder.svelte   | 20 +++++------
 .../src/lib/components/ScriptEditor.svelte    |  2 +-
 .../src/lib/components/ScriptPicker.svelte    |  2 +-
 .../src/lib/components/ScriptWrapper.svelte   |  3 +-
 .../src/lib/components/SearchItems.svelte     |  2 +-
 .../src/lib/components/SimpleEditor.svelte    |  2 +-
 .../lib/components/StringTypeNarrowing.svelte |  3 +-
 frontend/src/lib/components/Subsection.svelte |  3 +-
 .../src/lib/components/TemplateEditor.svelte  |  2 +-
 frontend/src/lib/components/Toast.svelte      |  4 +--
 frontend/src/lib/components/Toggle.svelte     |  4 +--
 .../apps/components/GroupWrapper.svelte       |  4 +--
 .../apps/components/buttons/AppButton.svelte  | 10 +++---
 .../apps/components/buttons/AppForm.svelte    | 10 +++---
 .../components/buttons/AppFormButton.svelte   | 10 +++---
 .../components/buttons/AppSchemaForm.svelte   |  8 ++---
 .../display/AppAccordionList.svelte           |  8 ++---
 .../apps/components/display/AppAlert.svelte   |  8 ++---
 .../components/display/AppBarChart.svelte     |  8 ++---
 .../components/display/AppCarouselList.svelte | 10 +++---
 .../apps/components/display/AppChartJs.svelte |  8 ++---
 .../components/display/AppChartJsV2.svelte    |  8 ++---
 .../apps/components/display/AppChat.svelte    | 10 +++---
 .../display/AppCustomComponent.svelte         |  6 ++--
 .../display/AppDisplayComponent.svelte        | 10 +++---
 .../display/AppDisplayComponentByJobId.svelte |  6 ++--
 .../components/display/AppDownload.svelte     |  6 ++--
 .../apps/components/display/AppHtml.svelte    |  6 ++--
 .../apps/components/display/AppIcon.svelte    |  8 ++---
 .../apps/components/display/AppImage.svelte   |  8 ++---
 .../display/AppJobIdFlowStatus.svelte         |  8 ++---
 .../display/AppJobIdLogComponent.svelte       |  6 ++--
 .../display/AppJobProgressBar.svelte          |  6 ++--
 .../apps/components/display/AppMap.svelte     |  8 ++---
 .../components/display/AppMarkdown.svelte     |  8 ++---
 .../apps/components/display/AppMenu.svelte    |  6 ++--
 .../apps/components/display/AppNavbar.svelte  |  8 ++---
 .../apps/components/display/AppPdf.svelte     |  6 ++--
 .../components/display/AppPieChart.svelte     |  6 ++--
 .../components/display/AppRecomputeAll.svelte |  6 ++--
 .../components/display/AppScatterChart.svelte |  6 ++--
 .../components/display/AppStatCard.svelte     |  6 ++--
 .../apps/components/display/AppText.svelte    | 25 +++++++------
 .../components/display/AppTimeseries.svelte   |  6 ++--
 .../apps/components/display/PlotlyHtml.svelte |  4 +--
 .../components/display/PlotlyHtmlV2.svelte    |  4 +--
 .../display/ResolveNavbarItemPath.svelte      |  3 +-
 .../components/display/VegaLiteHtml.svelte    |  4 +--
 .../display/charts/AppAgCharts.svelte         |  6 ++--
 .../display/dbtable/AppDbExplorer.svelte      |  4 +--
 .../display/dbtable/DbExplorerCount.svelte    |  6 ++--
 .../display/dbtable/DeleteRow.svelte          |  4 +--
 .../display/dbtable/InsertRowRunnable.svelte  |  4 +--
 .../display/dbtable/UpdateCell.svelte         |  4 +--
 .../table/AppAggridExplorerTable.svelte       |  6 ++--
 .../table/AppAggridInfiniteTable.svelte       |  6 ++--
 .../display/table/AppAggridTable.svelte       |  6 ++--
 .../table/AppAggridTableActions.svelte        |  6 ++--
 .../components/display/table/AppTable.svelte  |  8 ++---
 .../components/helpers/HiddenComponent.svelte |  4 +--
 .../apps/components/helpers/InputValue.svelte |  8 ++---
 .../helpers/RunnableComponent.svelte          |  4 +--
 .../components/helpers/RunnableWrapper.svelte |  4 +--
 .../apps/components/inputs/AppCheckbox.svelte | 12 +++----
 .../inputs/AppCodeInputComponent.svelte       | 10 +++---
 .../components/inputs/AppDateInput.svelte     |  8 ++---
 .../components/inputs/AppDateSelect.svelte    |  8 ++---
 .../inputs/AppDateSliderInput.svelte          |  8 ++---
 .../components/inputs/AppDateTimeInput.svelte |  8 ++---
 .../components/inputs/AppFileInput.svelte     |  8 ++---
 .../components/inputs/AppMultiSelectV2.svelte |  8 ++---
 .../components/inputs/AppNumberInput.svelte   |  8 ++---
 .../components/inputs/AppQuillEditor.svelte   |  4 +--
 .../components/inputs/AppRangeInput.svelte    |  8 ++---
 .../components/inputs/AppS3FileInput.svelte   |  8 ++---
 .../apps/components/inputs/AppSelect.svelte   | 14 ++++----
 .../components/inputs/AppSelectStep.svelte    |  8 ++---
 .../components/inputs/AppSelectTab.svelte     |  8 ++---
 .../components/inputs/AppSliderInputs.svelte  |  8 ++---
 .../components/inputs/AppTextInput.svelte     |  8 ++---
 .../components/inputs/AppTimeInput.svelte     |  8 ++---
 .../components/inputs/AppUserResource.svelte  |  8 ++---
 .../inputs/currency/AppCurrencyInput.svelte   |  8 ++---
 .../inputs/currency/CurrencyInput.svelte      |  2 +-
 .../layout/AppConditionalWrapper.svelte       | 10 +++---
 .../components/layout/AppContainer.svelte     |  6 ++--
 .../components/layout/AppDecisionTree.svelte  | 10 +++---
 .../apps/components/layout/AppDivider.svelte  |  6 ++--
 .../apps/components/layout/AppDrawer.svelte   | 12 +++----
 .../apps/components/layout/AppList.svelte     | 10 +++---
 .../apps/components/layout/AppModal.svelte    | 12 +++----
 .../components/layout/AppSplitpanes.svelte    | 12 +++----
 .../apps/components/layout/AppStepper.svelte  | 12 +++----
 .../apps/components/layout/AppTabs.svelte     | 16 ++++-----
 .../apps/components/layout/ListWrapper.svelte |  4 +--
 .../apps/components/layout/RowWrapper.svelte  |  4 +--
 .../components/apps/editor/AppEditor.svelte   | 16 ++++-----
 .../apps/editor/AppEditorHeader.svelte        |  2 +-
 .../components/apps/editor/AppPreview.svelte  | 32 ++++++++---------
 .../apps/editor/DecisionTreeDebug.svelte      |  8 ++---
 .../components/apps/editor/GridViewer.svelte  |  6 ++--
 .../apps/editor/SubGridEditor.svelte          |  4 +--
 .../apps/editor/component/Component.svelte    |  4 +--
 .../editor/componentsPanel/NameEditor.svelte  |  4 +--
 .../componentsPanel/QuickStyleMenu.svelte     |  2 +-
 .../componentsPanel/QuickStyleProperty.svelte |  6 ++--
 .../componentsPanel/ThemeNameEditor.svelte    |  4 +--
 .../contextPanel/ComponentOutput.svelte       |  4 +--
 .../settingsPanel/ComponentControl.svelte     |  3 +-
 .../settingsPanel/ContextVariables.svelte     | 12 +++----
 .../settingsPanel/common/PanelSection.svelte  |  3 +-
 .../mainInput/RunnableSelector.svelte         |  4 +--
 .../secondaryMenu/SecondaryMenu.svelte        |  3 +-
 .../components/apps/svelte-grid/Grid.svelte   |  8 ++---
 .../apps/svelte-grid/MoveResize.svelte        |  6 ++--
 .../lib/components/assets/AssetButtons.svelte |  3 +-
 .../components/common/FileProgressBar.svelte  |  3 +-
 .../components/common/button/Button.svelte    | 10 +++---
 .../DraftTriggersConfirmationModal.svelte     |  4 +--
 .../common/drawer/Disposable.svelte           |  6 ++--
 .../src/lib/components/common/kbd/Kbd.svelte  |  5 +--
 .../common/languageIcons/LanguageIcon.svelte  |  3 +-
 .../components/common/popup/PopupV2.svelte    |  3 +-
 .../lib/components/common/table/Row.svelte    |  3 +-
 .../lib/components/common/tabs/Tabs.svelte    |  4 +--
 .../lib/components/common/tabs/TabsV2.svelte  |  2 +-
 .../toggleButton-v2/ToggleButtonMore.svelte   |  3 +-
 .../lib/components/copilot/MetadataGen.svelte | 10 +++---
 .../copilot/chat/AIChatInput.svelte           |  4 +--
 .../copilot/chat/ContextElementBadge.svelte   |  3 +-
 .../components/flows/FlowModuleIcon.svelte    |  5 +--
 .../flows/common/FlowCardHeader.svelte        |  7 ++--
 .../flows/content/FlowInputs.svelte           |  4 +--
 .../flows/content/FlowModuleComponent.svelte  |  4 +--
 .../flows/content/FlowModuleScript.svelte     |  2 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |  4 +--
 .../flows/map/InsertModuleInner.svelte        |  4 +--
 .../lib/components/graph/FlowGraphV2.svelte   | 10 +++---
 .../lib/components/graph/SelectionTool.svelte |  3 +-
 .../graph/renderers/nodes/NoteNode.svelte     |  4 +--
 .../lib/components/meltComponents/Menu.svelte |  5 +--
 .../components/meltComponents/Popover.svelte  | 16 ++++-----
 .../meltComponents/SideBarTab.svelte          |  3 +-
 .../components/meltComponents/Tooltip.svelte  |  9 ++---
 .../propertyPicker/ObjectViewer.svelte        |  2 +-
 .../propertyPicker/ObjectViewerWrapper.svelte | 26 +++++++-------
 .../propertyPicker/PropPicker.svelte          |  6 ++--
 .../components/raw_apps/FileTreeNode.svelte   |  4 +--
 .../components/raw_apps/RunnableRow.svelte    |  4 +--
 .../schema/EditableSchemaSdkWrapper.svelte    |  3 +-
 .../schema/RunningJobSchemaPicker.svelte      |  4 +--
 .../components/schema/SchemaPickerRow.svelte  |  6 ++--
 .../components/search/QuickMenuItem.svelte    |  4 +--
 .../components/select/GenericDropdown.svelte  |  2 +-
 .../components/settings/CreateToken.svelte    |  3 +-
 .../components/settings/TokensTable.svelte    |  3 +-
 .../lib/components/sidebar/MenuButton.svelte  |  4 +--
 .../components/splitPanes/AnimatedPane.svelte |  4 +--
 frontend/src/lib/components/table/Cell.svelte |  4 +--
 .../src/lib/components/table/DataTable.svelte |  2 +-
 .../email/EmailTriggerEditorInner.svelte      |  2 +-
 .../triggers/gcp/GcpTriggerEditorInner.svelte |  2 +-
 .../triggers/http/RouteEditorInner.svelte     |  2 +-
 .../kafka/KafkaTriggerEditorInner.svelte      |  2 +-
 .../mqtt/MqttTriggerEditorInner.svelte        |  3 +-
 .../nats/NatsTriggerEditorInner.svelte        |  2 +-
 .../PostgresTriggerEditorInner.svelte         |  2 +-
 .../WebsocketTriggerEditorInner.svelte        |  2 +-
 .../tutorials/TutorialWrapper.svelte          |  3 +-
 .../components/workspace/WorkspaceCard.svelte |  3 +-
 .../workspaceSettings/RulesetEditor.svelte    | 12 +++----
 201 files changed, 659 insertions(+), 607 deletions(-)

diff --git a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
index fd0855ecee..f82d9d46d7 100644
--- a/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
+++ b/frontend/src/lib/components/AppConnectLightweightResourcePicker.svelte
@@ -3,7 +3,7 @@
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { Button } from '$lib/components/common'
 	import { workspaceStore } from '$lib/stores'
-	import { onMount } from 'svelte'
+	import { onMount, untrack } from 'svelte'
 
 	interface Props {
 		resourceType?: string | undefined
@@ -25,8 +25,8 @@
 
 	let darkMode: boolean = $state(false)
 
-	if (workspace) {
-		$workspaceStore = workspace
+	if (untrack(() => workspace)) {
+		$workspaceStore = untrack(() => workspace)
 	}
 
 	onMount(async () => {
diff --git a/frontend/src/lib/components/AppWrapper.svelte b/frontend/src/lib/components/AppWrapper.svelte
index 37e5bdfc2e..9c6cd9756d 100644
--- a/frontend/src/lib/components/AppWrapper.svelte
+++ b/frontend/src/lib/components/AppWrapper.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import AppEditor from './apps/editor/AppEditor.svelte'
 	import type { AppEditorProps } from './apps/types'
 
 	let { app: oldApp, ...props }: AppEditorProps = $props()
 
-	let app = $state(oldApp)
+	let app = $state(untrack(() => oldApp))
 </script>
 
 <AppEditor {app} {...props} />
diff --git a/frontend/src/lib/components/CustomPopover.svelte b/frontend/src/lib/components/CustomPopover.svelte
index 60c285852f..5d57641c0d 100644
--- a/frontend/src/lib/components/CustomPopover.svelte
+++ b/frontend/src/lib/components/CustomPopover.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from '$lib/components/Portal.svelte'
@@ -32,10 +33,10 @@
 		overlay,
 		onclick = undefined
 	}: Props = $props()
-	const [popperRef, popperContent] = createPopperActions({ placement })
+	const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) })
 
 	const popperOptions: PopperOptions<{}> = {
-		placement,
+		placement: untrack(() => placement),
 		strategy: 'fixed',
 		modifiers: [
 			{ name: 'offset', options: { offset: [8, 8] } },
diff --git a/frontend/src/lib/components/DBTableEditor.svelte b/frontend/src/lib/components/DBTableEditor.svelte
index 1b609ac85a..a9d1a55e17 100644
--- a/frontend/src/lib/components/DBTableEditor.svelte
+++ b/frontend/src/lib/components/DBTableEditor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" module>
+	import { untrack } from 'svelte'
 	function validate(values: TableEditorValues, dbSchema?: DBSchema) {
 		const columnNamesErrs = values.columns.flatMap((column) => {
 			const isUnique = values.columns.filter((c) => c.name === column.name).length === 1
@@ -92,7 +93,7 @@
 		computePreview
 	}: Props = $props()
 
-	const columnTypes = DB_TYPES[dbType]
+	const columnTypes = DB_TYPES[untrack(() => dbType)]
 	const defaultColumnType = (
 		{
 			postgresql: 'BIGSERIAL',
@@ -102,10 +103,10 @@
 			mysql: 'varchar',
 			duckdb: 'string'
 		} satisfies Record<DbType, string>
-	)[dbType]
+	)[untrack(() => dbType)]
 
 	const values: TableEditorValues = $state(
-		$state.snapshot(initialValues) ?? {
+		$state.snapshot(untrack(() => initialValues)) ?? {
 			name: '',
 			columns: [],
 			foreignKeys: []
@@ -122,8 +123,8 @@
 			...(primaryKey && { primaryKey })
 		})
 	}
-	if (!initialValues) {
-		addColumn({ name: 'id', primaryKey: features?.primaryKeys })
+	if (!untrack(() => initialValues)) {
+		addColumn({ name: 'id', primaryKey: untrack(() => features)?.primaryKeys })
 	}
 
 	const errors: ReturnType<typeof validate> = $derived(validate(values, dbSchema))
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index d57def2634..5edc07f528 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -169,13 +169,16 @@
 	let loadingCodebaseButton = $state(false)
 	let lastCommandId = ''
 
-	if (initial) {
-		if (initial.type == 'script') {
-			replaceScript(initial.script)
-		} else if (initial.type == 'flow') {
-			replaceFlow(initial.flow)
+	{
+		const _initial = untrack(() => initial)
+		if (_initial) {
+			if (_initial.type == 'script') {
+				replaceScript(_initial.script)
+			} else if (_initial.type == 'flow') {
+				replaceFlow(_initial.flow)
+			}
+			modeInitialized = true
 		}
-		modeInitialized = true
 	}
 
 	const el = (event) => {
diff --git a/frontend/src/lib/components/DropdownSubmenuItem.svelte b/frontend/src/lib/components/DropdownSubmenuItem.svelte
index 45346aaa3c..ed08fd7abd 100644
--- a/frontend/src/lib/components/DropdownSubmenuItem.svelte
+++ b/frontend/src/lib/components/DropdownSubmenuItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import MenuItem from '$lib/components/meltComponents/MenuItem.svelte'
 	import { melt } from '@melt-ui/svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -18,7 +19,7 @@
 	const {
 		elements: { subTrigger, subMenu },
 		states: { subOpen }
-	} = builders.createSubmenu()
+	} = untrack(() => builders).createSubmenu()
 
 	let subItems = $derived((item.submenuItems ?? []).filter((i) => !i.hide))
 </script>
diff --git a/frontend/src/lib/components/DropdownV2.svelte b/frontend/src/lib/components/DropdownV2.svelte
index ef7b703328..c36e80a554 100644
--- a/frontend/src/lib/components/DropdownV2.svelte
+++ b/frontend/src/lib/components/DropdownV2.svelte
@@ -80,7 +80,7 @@
 		ids: { menu: dropdownId }
 	} = createDropdownMenu({
 		positioning: {
-			placement
+			placement: untrack(() => placement)
 		},
 		loop: true,
 		onOpenChange: ({ next }) => {
diff --git a/frontend/src/lib/components/DynamicInput.svelte b/frontend/src/lib/components/DynamicInput.svelte
index bd6cceaf99..692272d50e 100644
--- a/frontend/src/lib/components/DynamicInput.svelte
+++ b/frontend/src/lib/components/DynamicInput.svelte
@@ -113,10 +113,10 @@
 		}
 	})
 
-	let lastArgs = $state.snapshot(otherArgs)
+	let lastArgs = $state.snapshot(untrack(() => otherArgs))
 
 	let timeout: number | undefined = $state()
-	let nargs = $state($state.snapshot(otherArgs))
+	let nargs = $state($state.snapshot(untrack(() => otherArgs)))
 	$effect(() => {
 		otherArgs
 		untrack(() => clearTimeout(timeout))
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index 5e1ce9b9cf..78e47c09ef 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -296,7 +296,7 @@
 		}
 	}
 
-	let jsonView: boolean = $state(customUi?.jsonOnly == true)
+	let jsonView: boolean = $state(untrack(() => customUi)?.jsonOnly == true)
 	let schemaString: string = $state(JSON.stringify(schema, null, '\t'))
 	let error: string | undefined = $state(undefined)
 	let editor: SimpleEditor | undefined = $state(undefined)
@@ -306,8 +306,8 @@
 		editor?.setCode(schemaString)
 	}
 
-	const editTabDefaultSize = noPreview ? 100 : 50
-	editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0
+	const editTabDefaultSize = untrack(() => noPreview) ? 100 : 50
+	editPanelSize = untrack(() => editTab) ? (untrack(() => editPanelInitialSize) ?? editTabDefaultSize) : 0
 	let inputPanelSize = $state(100 - editPanelSize)
 	let editPanelSizeSmooth = tweened(editPanelSize, {
 		duration: 150
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 8c18430a5d..250b3454e5 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -201,11 +201,11 @@
 		}
 	})
 
-	let lang = $state(scriptLangToEditorLang(scriptLang))
+	let lang = $state(scriptLangToEditorLang(untrack(() => scriptLang)))
 
-	let filePath = $state(computePath(path))
+	let filePath = $state(computePath(untrack(() => path)))
 
-	let initialPath: string | undefined = $state(path)
+	let initialPath: string | undefined = $state(untrack(() => path))
 
 	let websockets: WebSocket[] = []
 	let languageClients: MonacoLanguageClient[] = []
@@ -221,7 +221,7 @@
 	let destroyed = false
 	const uri = computeUri(
 		untrack(() => filePath),
-		scriptLang
+		untrack(() => scriptLang)
 	)
 
 	console.log('uri', uri)
diff --git a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
index 3cbc020c9d..c7f068a83f 100644
--- a/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
+++ b/frontend/src/lib/components/FakeMonacoPlaceHolder.svelte
@@ -1,6 +1,7 @@
 <!-- Used to avoid height jitter when loading monaco asynchronously -->
 
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { getOS } from '$lib/utils'
 	import { MONACO_Y_PADDING } from './vscode'
 
@@ -45,7 +46,7 @@
 
 	const charWidth = 9 // try to match as closely as possible to monaco editor
 
-	const lineHeight = fontSize * GOLDEN_LINE_HEIGHT_RATIO
+	const lineHeight = untrack(() => fontSize) * GOLDEN_LINE_HEIGHT_RATIO
 
 	let [clientWidth, clientHeight] = $state([0, 0])
 	let showHorizontalScrollbar = $derived(
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 52a62c203f..ef6e2b0b51 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -220,7 +220,7 @@
 		}
 	}
 
-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // kept for legacy reasons
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(untrack(() => savedPrimarySchedule)) // kept for legacy reasons
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	const simplifiedPoll = writable(false)
 
@@ -593,8 +593,8 @@
 	const selectionManager = new SelectionManager()
 	const selectedIdStore = $derived(selectionManager.getSelectedId())
 	// Initialize with selected id if provided
-	if (selectedId) {
-		selectionManager.selectId(selectedId)
+	if (untrack(() => selectedId)) {
+		selectionManager.selectId(untrack(() => selectedId)!)
 	} else {
 		selectionManager.selectId('settings-metadata')
 	}
@@ -603,12 +603,12 @@
 		return selectedIdStore
 	}
 
-	const previewArgsStore = $state({ val: initialArgs })
+	const previewArgsStore = $state({ val: untrack(() => initialArgs) })
 	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
 	const flowEditorDrawer = writable<FlowEditorDrawer | undefined>(undefined)
 	const moving = writable<{ id: string } | undefined>(undefined)
-	const history = initHistory(flowStore.val)
-	const pathStore = writable<string>(pathStoreInit ?? initialPath)
+	const history = initHistory(untrack(() => flowStore).val)
+	const pathStore = writable<string>(untrack(() => pathStoreInit) ?? initialPath)
 	const captureOn = writable<boolean>(false)
 	const showCaptureHint = writable<boolean | undefined>(undefined)
 	const flowInputEditorStateStore = writable<FlowInputEditorState>({
@@ -636,15 +636,15 @@
 		flowEditorDrawer,
 		moving,
 		history,
-		flowStateStore,
-		flowStore,
+		flowStateStore: untrack(() => flowStateStore),
+		flowStore: untrack(() => flowStore),
 		pathStore,
 		stepsInputArgs,
 		saveDraft,
 		initialPathStore,
 		fakeInitialPath,
 		flowInputsStore: writable<FlowInput>({}),
-		customUi,
+		customUi: untrack(() => customUi),
 		insertButtonOpen,
 		executionCount: writable(0),
 		flowInputEditorState: flowInputEditorStateStore,
@@ -655,7 +655,7 @@
 	})
 
 	// Set up NoteEditor context for note editing capabilities
-	const noteEditor = new NoteEditor(flowStore, () => {
+	const noteEditor = new NoteEditor(untrack(() => flowStore), () => {
 		// Enable notes display when a note is created
 		flowEditor?.enableNotes?.()
 	})
@@ -672,9 +672,9 @@
 			[
 				{ type: 'webhook', path: '', isDraft: false },
 				{ type: 'default_email', path: '', isDraft: false },
-				...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
+				...(untrack(() => draftTriggersFromUrl) ?? savedFlow?.draft?.draft_triggers ?? [])
 			],
-			selectedTriggerIndexFromUrl,
+			untrack(() => selectedTriggerIndexFromUrl),
 			saveSessionDraft
 		)
 	)
@@ -798,7 +798,7 @@
 		onClick: () => void
 	}> = []
 
-	if (customUi.topBar?.extraDeployOptions != false) {
+	if (untrack(() => customUi).topBar?.extraDeployOptions != false) {
 		if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
 			dropdownItems.push({
 				label: 'Exit & see details',
@@ -806,14 +806,14 @@
 			})
 		}
 
-		if (!newFlow) {
+		if (!untrack(() => newFlow)) {
 			dropdownItems.push({
 				label: 'Fork',
 				onClick: () => window.open(`/flows/add?template=${initialPath}`)
 			})
 		}
 
-		if (!newFlow && !isRuleActive('DisableWorkspaceForking')) {
+		if (!untrack(() => newFlow) && !isRuleActive('DisableWorkspaceForking')) {
 			dropdownItems.push({
 				label: 'Edit in workspace fork',
 				onClick: () => window.open(buildForkEditUrl('flow', initialPath))
@@ -1038,10 +1038,10 @@
 	}
 
 	let stepHistoryLoader = new StepHistoryLoader(
-		loadedFromHistoryFromUrl?.stepsState ?? {},
-		loadedFromHistoryFromUrl?.flowJobInitial,
+		untrack(() => loadedFromHistoryFromUrl)?.stepsState ?? {},
+		untrack(() => loadedFromHistoryFromUrl)?.flowJobInitial,
 		saveSessionDraft,
-		noInitial
+		untrack(() => noInitial)
 	)
 	setStepHistoryLoaderContext(stepHistoryLoader)
 
diff --git a/frontend/src/lib/components/FlowLogViewerWrapper.svelte b/frontend/src/lib/components/FlowLogViewerWrapper.svelte
index 4549fc8304..648dbc9f06 100644
--- a/frontend/src/lib/components/FlowLogViewerWrapper.svelte
+++ b/frontend/src/lib/components/FlowLogViewerWrapper.svelte
@@ -62,7 +62,7 @@
 	const timelineItems = $derived(timelineCompute?.items ?? undefined)
 	const timelineNow = $derived(timelineCompute?.now ?? Date.now())
 
-	let moduleTracker = new ChangeTracker($state.snapshot(job.raw_flow?.modules ?? []))
+	let moduleTracker = new ChangeTracker($state.snapshot(untrack(() => job).raw_flow?.modules ?? []))
 	$effect(() => {
 		readFieldsRecursively(job.raw_flow?.modules ?? [])
 		untrack(() => moduleTracker.track($state.snapshot(job.raw_flow?.modules ?? [])))
@@ -123,7 +123,7 @@
 	}
 
 	let timelineAvailableWidths = $state<Record<string, number>>({})
-	let lastJobId: string | undefined = $state(job.id)
+	let lastJobId: string | undefined = $state(untrack(() => job).id)
 
 	const timelinelWidth = $derived.by(() => {
 		const widths = Object.values(timelineAvailableWidths)
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 5da8b31419..950eb7354f 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -62,7 +62,7 @@
 		showLogsWithResult = false
 	}: Props = $props()
 
-	let lastJobId: string = jobId
+	let lastJobId: string = untrack(() => jobId)
 
 	let retryStatus = $state({ val: {} })
 	let globalRefreshes: Record<string, ((clear, root) => Promise<void>)[]> = $state({})
@@ -71,11 +71,11 @@
 		flowState,
 		suspendStatus,
 		retryStatus,
-		hideDownloadInGraph,
-		hideNodeDefinition,
-		hideTimeline,
-		hideJobId,
-		hideDownloadLogs
+		hideDownloadInGraph: untrack(() => hideDownloadInGraph),
+		hideNodeDefinition: untrack(() => hideNodeDefinition),
+		hideTimeline: untrack(() => hideTimeline),
+		hideJobId: untrack(() => hideJobId),
+		hideDownloadLogs: untrack(() => hideDownloadLogs)
 	})
 
 	function loadOwner(path: string) {
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index 2b1c1b7cfe..6239e1b861 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -181,7 +181,7 @@
 
 	let resultStreams: Record<string, string | undefined> = $state({})
 
-	if (onResultStreamUpdate == undefined) {
+	if (untrack(() => onResultStreamUpdate) == undefined) {
 		onResultStreamUpdate = ({
 			jobId,
 			result_stream
@@ -234,7 +234,7 @@
 	})
 
 	let jobResults: any[] = $state(
-		flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []
+		untrack(() => flowJobIds)?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []
 	)
 
 	let retry_selected = $state('')
@@ -805,7 +805,7 @@
 
 	let destroyed = false
 
-	updateRecursiveRefresh(jobId)
+	updateRecursiveRefresh(untrack(() => jobId))
 
 	async function updateJobId() {
 		if (jobId !== job?.id || innerModules == undefined) {
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index 8a78637519..7e71ca5935 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { type FlowValue, FlowService } from '$lib/gen'
 	import { Tab, Tabs, TabContent } from './common'
 	import SchemaViewer from './SchemaViewer.svelte'
@@ -51,13 +52,16 @@
 	}: Props = $props()
 
 	let open: { [id: number]: boolean } = {}
-	if (initialOpen) {
-		open[initialOpen] = true
+	{
+		const _initialOpen = untrack(() => initialOpen)
+		if (_initialOpen) {
+			open[_initialOpen] = true
+		}
 	}
 
 	let previousVersionId: number | undefined = $state(undefined)
 	let previousFlow: PreviousFlow | undefined = $state(undefined)
-	let tab: TabValue = $state(initTab ?? 'diff')
+	let tab: TabValue = $state(untrack(() => initTab) ?? 'diff')
 
 	let previousFlowCache: Record<number, PreviousFlow> = {}
 
diff --git a/frontend/src/lib/components/FlowWrapper.svelte b/frontend/src/lib/components/FlowWrapper.svelte
index 84529adb36..ef0c23b6eb 100644
--- a/frontend/src/lib/components/FlowWrapper.svelte
+++ b/frontend/src/lib/components/FlowWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import AiChatLayout from './copilot/chat/AiChatLayout.svelte'
 	import type { FlowBuilderProps } from './flow_builder'
 	import FlowBuilder from './FlowBuilder.svelte'
@@ -11,12 +12,12 @@
 		...props
 	}: FlowBuilderProps & { light?: boolean } = $props()
 
-	let flowStore = $state(oldFlowStore)
-	let flowStateStore = $state(oldFlowStateStore)
+	let flowStore = $state(untrack(() => oldFlowStore))
+	let flowStateStore = $state(untrack(() => oldFlowStateStore))
 
 	let trialRender = $state(true)
 
-	if (light) {
+	if (untrack(() => light)) {
 		setTimeout(() => {
 			trialRender = false
 		}, 1000 * 300)
diff --git a/frontend/src/lib/components/IdEditorInput.svelte b/frontend/src/lib/components/IdEditorInput.svelte
index 493ba36345..a406617e58 100644
--- a/frontend/src/lib/components/IdEditorInput.svelte
+++ b/frontend/src/lib/components/IdEditorInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { stopPropagation } from 'svelte/legacy'
 	import { ArrowRight } from 'lucide-svelte'
 	import { Button } from './common'
@@ -34,7 +35,7 @@
 	}: Props = $props()
 
 	let error = $state('')
-	const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/
+	const regex = untrack(() => acceptUnderScores) ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/
 
 	function validateId(id: string, reservedIds: string[], reservedPrefixes: string[]) {
 		if (id == initialId) {
diff --git a/frontend/src/lib/components/JobLoader.svelte b/frontend/src/lib/components/JobLoader.svelte
index c918b0c1ea..64f8639dbf 100644
--- a/frontend/src/lib/components/JobLoader.svelte
+++ b/frontend/src/lib/components/JobLoader.svelte
@@ -89,7 +89,7 @@
 	let lastStartedAt: number = Date.now()
 	let currentId: string | undefined = $state(undefined)
 	let noPingTimeout: number | undefined = undefined
-	let lastNoLogs = $state(noLogs)
+	let lastNoLogs = $state(untrack(() => noLogs))
 	let lastCompletedJobId = $state<string | undefined>(undefined)
 
 	let token = getContext<{ token?: string }>('AuthToken')
diff --git a/frontend/src/lib/components/LogSnippetViewer.svelte b/frontend/src/lib/components/LogSnippetViewer.svelte
index b684dab386..7f009a279c 100644
--- a/frontend/src/lib/components/LogSnippetViewer.svelte
+++ b/frontend/src/lib/components/LogSnippetViewer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { AnsiUp } from 'ansi_up'
 
 	interface Props {
@@ -32,7 +33,7 @@
 		return html2
 	}
 
-	let html = highlightSnippet(content)
+	let html = highlightSnippet(untrack(() => content))
 </script>
 
 <button onclick={() => onclickProp?.()} class="font-light !m-0 !p-0">
diff --git a/frontend/src/lib/components/LogViewer.svelte b/frontend/src/lib/components/LogViewer.svelte
index 8b9470b8a0..ae3674c4b5 100644
--- a/frontend/src/lib/components/LogViewer.svelte
+++ b/frontend/src/lib/components/LogViewer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" module>
+	import { untrack } from 'svelte'
 	const s3LogPrefixes = [
 		'[windmill] Previous logs have been saved to object storage at logs/',
 		'[windmill] Previous logs have been saved to disk at logs/',
@@ -73,7 +74,7 @@
 	let LOG_INC = 10000
 	let LOG_LIMIT = $state(LOG_INC)
 
-	let lastJobId = $state(jobId)
+	let lastJobId = $state(untrack(() => jobId))
 
 	let loadedFromObjectStore = $state('')
 
diff --git a/frontend/src/lib/components/ManualPopover.svelte b/frontend/src/lib/components/ManualPopover.svelte
index a55f3b80da..0501ddc233 100644
--- a/frontend/src/lib/components/ManualPopover.svelte
+++ b/frontend/src/lib/components/ManualPopover.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { createPopperActions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
 	import Portal from '$lib/components/Portal.svelte'
@@ -26,7 +27,7 @@
 		content
 	}: Props = $props()
 
-	const [popperRef, popperContent, getInstance] = createPopperActions({ placement })
+	const [popperRef, popperContent, getInstance] = createPopperActions({ placement: untrack(() => placement) })
 
 	export function open() {
 		showTooltip = true
diff --git a/frontend/src/lib/components/ModuleTest.svelte b/frontend/src/lib/components/ModuleTest.svelte
index 59c8f973ea..37cb96bea7 100644
--- a/frontend/src/lib/components/ModuleTest.svelte
+++ b/frontend/src/lib/components/ModuleTest.svelte
@@ -8,7 +8,7 @@
 	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { getScriptByPath } from '$lib/scripts'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { FlowEditorContext } from './flows/types'
 	import JobLoader, { type Callbacks } from './JobLoader.svelte'
 	import { getStepHistoryLoaderContext } from './stepHistoryLoader.svelte'
@@ -167,8 +167,8 @@
 		testJob = modulesTestStates.states?.[mod.id]?.testJob
 	})
 
-	modulesTestStates.states[mod.id] = {
-		...(modulesTestStates.states?.[mod.id] ?? { loading: false }),
+	modulesTestStates.states[untrack(() => mod).id] = {
+		...(modulesTestStates.states?.[untrack(() => mod).id] ?? { loading: false }),
 		loading: testIsLoading,
 		testJob: testJob
 	}
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index 1fa0a0d88d..07447b2e4a 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -43,10 +43,10 @@
 		onClick
 	}: Props = $props()
 
-	const [popperRef, popperContent] = createPopperActions({ placement })
+	const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) })
 
 	const popperOptions: PopperOptions<{}> = {
-		placement,
+		placement: untrack(() => placement),
 		strategy: 'fixed',
 		modifiers: [
 			{ name: 'offset', options: { offset: [8, 8] } },
diff --git a/frontend/src/lib/components/PrefixedInput.svelte b/frontend/src/lib/components/PrefixedInput.svelte
index c548418855..2a1dccf386 100644
--- a/frontend/src/lib/components/PrefixedInput.svelte
+++ b/frontend/src/lib/components/PrefixedInput.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	let {
 		prefix = '',
 		value = $bindable(''),
@@ -8,7 +9,7 @@
 	} = $props()
 
 	let inputElement: HTMLInputElement = $state(null!)
-	let internalValue = $state(prefix + value)
+	let internalValue = $state(untrack(() => prefix) + value)
 
 	// Update internal value when prop changes
 	$effect(() => {
diff --git a/frontend/src/lib/components/RepositorySelector.svelte b/frontend/src/lib/components/RepositorySelector.svelte
index ac6f35bbaa..cfeaa3945d 100644
--- a/frontend/src/lib/components/RepositorySelector.svelte
+++ b/frontend/src/lib/components/RepositorySelector.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { GitSyncService } from '$lib/gen'
 	import Select from './select/Select.svelte'
 
@@ -32,7 +33,7 @@
 	}: Props = $props()
 
 	// Track all loaded repositories across pages
-	let loadedRepositories = $state<Repository[]>(initialRepositories)
+	let loadedRepositories = $state<Repository[]>(untrack(() => initialRepositories))
 	let currentPage = $state(1)
 	let isLoadingMore = $state(false)
 
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index b5baecd27a..501e28701d 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -81,7 +81,7 @@
 			.map(([k, _]) => k)
 	}
 
-	if (!newResource) {
+	if (!untrack(() => newResource)) {
 		initEdit()
 	} else if (resource_type) {
 		loadResourceType()
diff --git a/frontend/src/lib/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
index fbecfe1805..9add8574ef 100644
--- a/frontend/src/lib/components/ResourcePicker.svelte
+++ b/frontend/src/lib/components/ResourcePicker.svelte
@@ -152,7 +152,7 @@
 		loading = false
 	}
 
-	let previousResourceType = resourceType
+	let previousResourceType = untrack(() => resourceType)
 
 	$effect(() => {
 		$workspaceStore && resourceType
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
index a3af812b11..4faea16357 100644
--- a/frontend/src/lib/components/RunsPage.svelte
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -96,8 +96,8 @@
 	let batchRerunOptionsIsOpen = $state(false)
 
 	// Initialize path filter from route param if provided and not already set via query params
-	if (initialPath && !filters.val.path) {
-		filters.val.path = initialPath
+	if (untrack(() => initialPath) && !filters.val.path) {
+		filters.val.path = untrack(() => initialPath)
 	}
 
 	// Apply persistent toggle values from local storage if URL doesn't specify them
diff --git a/frontend/src/lib/components/SavedInputsPickerViewer.svelte b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
index ac9f643421..52e38f958e 100644
--- a/frontend/src/lib/components/SavedInputsPickerViewer.svelte
+++ b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { Button } from '$lib/components/common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
@@ -23,7 +24,7 @@
 		editOptions = true,
 		onOpenChange = undefined
 	}: Props = $props();
-	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
+	const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData))
 	const buttonWidth = 34
 	const floatingConfig = {
 		placement: 'bottom-end',
@@ -39,7 +40,7 @@
 			}
 		]
 	}
-	const xOffset = editOptions ? 218 : 168 // width of the optional buttons on the right
+	const xOffset = untrack(() => editOptions) ? 218 : 168 // width of the optional buttons on the right
 
 	let popover: Popover | undefined = $state()
 	let popoverOpen = false
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 914018b54c..7cc9608c3b 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -155,7 +155,7 @@
 	let deployedBy: string | undefined = $state(undefined) // Author
 	let confirmCallback: () => void = $state(() => {}) // What happens when user clicks `override` in warning
 	let open: boolean = $state(false) // Is confirmation modal open
-	let args: Record<string, any> = $state(initialArgs) // Test args input
+	let args: Record<string, any> = $state(untrack(() => initialArgs)) // Test args input
 	let selectedInputTab: 'main' | 'preprocessor' = $state('main')
 	let hasPreprocessor = $state(false)
 	let preserveOnBehalfOf = $state(false)
@@ -168,12 +168,12 @@
 	let customOnBehalfOfEmail: string = $state('')
 
 	let metadataOpen = $state(
-		!neverShowMeta &&
-			(showMeta ||
-				searchParams.get('metadata_open') == 'true' ||
+		!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: Editor | undefined = $state(undefined)
@@ -191,10 +191,10 @@
 		confirmDeploymentCallback(selectedTriggers)
 	}
 
-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // keep for legacy
+	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(untrack(() => savedPrimarySchedule)) // keep for legacy
 	const triggersCount = writable<TriggersCount | undefined>(
-		savedPrimarySchedule
-			? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
+		untrack(() => savedPrimarySchedule)
+			? { schedule_count: 1, primary_schedule: { schedule: untrack(() => savedPrimarySchedule)!.cron } }
 			: undefined
 	)
 	const simplifiedPoll = writable(false)
@@ -857,7 +857,7 @@
 		})()
 	)
 
-	setContext('disableTooltips', customUi?.disableTooltips === true)
+	setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true)
 
 	function langToLanguage(lang: SupportedLanguage | 'docker' | 'bunnative'): SupportedLanguage {
 		if (lang == 'docker') {
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 186ef96a89..27e66c9660 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -870,7 +870,7 @@
 		}
 	}
 
-	setContext('disableTooltips', customUi?.disableTooltips === true)
+	setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true)
 
 	let codePanelSize = $state(70)
 	let testPanelSize = $state(30)
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 6487db4ec4..49de0b7cf1 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -54,7 +54,7 @@
 	let lang: SupportedLanguage | undefined = $state()
 
 	let options: [[string, any, any, string | undefined]] = [['Script', 'script', Code2, undefined]]
-	allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
+	untrack(() => allowFlow) && options.push(['Flow', 'flow', FlowIcon, '#14b8a6'])
 	const dispatch = createEventDispatcher()
 
 	async function loadItems(): Promise<void> {
diff --git a/frontend/src/lib/components/ScriptWrapper.svelte b/frontend/src/lib/components/ScriptWrapper.svelte
index 5e53dc09f3..eec781ce77 100644
--- a/frontend/src/lib/components/ScriptWrapper.svelte
+++ b/frontend/src/lib/components/ScriptWrapper.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import AiChatLayout from './copilot/chat/AiChatLayout.svelte'
 	import type { ScriptBuilderProps } from './script_builder'
 
 	let { script: oldScript, disableAi, ...props }: ScriptBuilderProps = $props()
 
-	let script = $state(oldScript)
+	let script = $state(untrack(() => oldScript))
 </script>
 
 <AiChatLayout noPadding {disableAi}>
diff --git a/frontend/src/lib/components/SearchItems.svelte b/frontend/src/lib/components/SearchItems.svelte
index b96d7814e3..069fabfe99 100644
--- a/frontend/src/lib/components/SearchItems.svelte
+++ b/frontend/src/lib/components/SearchItems.svelte
@@ -12,7 +12,7 @@
 
 	let { filter = '', items, f, filteredItems = $bindable(), opts = {} }: Props = $props()
 
-	let uf = new uFuzzy(opts)
+	let uf = new uFuzzy(untrack(() => opts))
 
 	function filterItems() {
 		let trimmed = filter.trim()
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 3d7b3dcb34..3239a61a4d 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -136,7 +136,7 @@
 
 	const dispatch = createEventDispatcher()
 
-	const uri = `file:///${hash}.${langToExt(lang)}`
+	const uri = `file:///${untrack(() => hash)}.${langToExt(untrack(() => lang))}`
 
 	export function getCode(): string {
 		if (valueAfterDispose != undefined) {
diff --git a/frontend/src/lib/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
index 2de70df79a..8d701231cc 100644
--- a/frontend/src/lib/components/StringTypeNarrowing.svelte
+++ b/frontend/src/lib/components/StringTypeNarrowing.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import type { EnumType } from '$lib/common'
 	import { computeKind } from '$lib/utils'
 	import Label from './Label.svelte'
@@ -51,7 +52,7 @@
 		computeKind(enum_, contentEncoding, pattern, format)
 	)
 
-	const allowKindChange = overrideAllowKindChange || originalType === 'string'
+	const allowKindChange = untrack(() => overrideAllowKindChange) || untrack(() => originalType) === 'string'
 
 	let patternStr: string = $state(pattern ?? '')
 	let resource: string | undefined = $state()
diff --git a/frontend/src/lib/components/Subsection.svelte b/frontend/src/lib/components/Subsection.svelte
index bee078cf44..b71e422250 100644
--- a/frontend/src/lib/components/Subsection.svelte
+++ b/frontend/src/lib/components/Subsection.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { enterpriseLicense } from '$lib/stores'
 	import { ChevronDown, ChevronRight } from 'lucide-svelte'
 	import Tooltip from './Tooltip.svelte'
@@ -35,7 +36,7 @@
 		children
 	}: Props = $props()
 
-	if (openInitially && collapsable && collapsed) {
+	if (untrack(() => openInitially) && untrack(() => collapsable) && collapsed) {
 		collapsed = false
 	}
 </script>
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 56bf181916..573155e2c9 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -418,7 +418,7 @@
 	const lang = 'template'
 	const dispatch = createEventDispatcher()
 
-	const uri = `file:///${hash}.ts`
+	const uri = `file:///${untrack(() => hash)}.ts`
 
 	export function insertAtCursor(code: string): void {
 		if (editor) {
diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index 13e857ed6f..034887235e 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -82,14 +82,14 @@
 		}
 	})
 
-	let color = classes[type]
+	let color = classes[untrack(() => type)]
 
 	let containerClass = {
 		success: 'toast-success',
 		error: 'toast-error',
 		info: 'toast-info',
 		warning: 'toast-warning'
-	}[type]
+	}[untrack(() => type)]
 
 	let Icon = $derived(icons[type])
 
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index 7a3993fd9f..fffb7a8b48 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 	import { classNames } from '$lib/utils'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import Tooltip from './Tooltip.svelte'
 	import { AlertTriangle } from 'lucide-svelte'
@@ -59,7 +59,7 @@
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
-	const bothOptions = Boolean(options.left) && Boolean(options.right)
+	const bothOptions = Boolean(untrack(() => options).left) && Boolean(untrack(() => options).right)
 </script>
 
 <label
diff --git a/frontend/src/lib/components/apps/components/GroupWrapper.svelte b/frontend/src/lib/components/apps/components/GroupWrapper.svelte
index e7e7555ca6..134537b9d5 100644
--- a/frontend/src/lib/components/apps/components/GroupWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/GroupWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import type { GroupContext } from '../types'
 
@@ -11,7 +11,7 @@
 
 	let { context, id, children }: Props = $props()
 
-	setContext<GroupContext>('GroupContext', { id, context })
+	setContext<GroupContext>('GroupContext', { id: untrack(() => id), context: untrack(() => context) })
 </script>
 
 {@render children?.()}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index c408de69e6..9a00bc2529 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -72,17 +72,17 @@
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
 	let resolvedConfig = $state(
-		initConfig(components['buttoncomponent'].initialData.configuration, configuration)
+		initConfig(components['buttoncomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined
 	})
 
-	if (controls) {
-		$componentControl[id] = controls
+	if (untrack(() => controls)) {
+		$componentControl[untrack(() => id)] = untrack(() => controls)!
 	}
 
 	let runnableComponent: RunnableComponent | undefined = $state()
@@ -203,7 +203,7 @@
 	let loading = $state(false)
 	let backgroundClickFeedback = $state(false)
 
-	let css = $state(initCss($app.css?.buttoncomponent, customCss))
+	let css = $state(initCss($app.css?.buttoncomponent, untrack(() => customCss)))
 	$effect(() => {
 		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
 	})
diff --git a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
index dd145b54d8..905f96d21d 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { components } from '../../editor/component'
 	import type { AppInput } from '../../inputType'
@@ -43,17 +43,17 @@
 	const { app, worldStore, stateId, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined
 	})
 
 	const resolvedConfig = $state(
-		initConfig(components['formcomponent'].initialData.configuration, configuration)
+		initConfig(components['formcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			wrapper?.setArgs(nvalue)
 		},
@@ -71,7 +71,7 @@
 	let runnableComponent: RunnableComponent | undefined = $state()
 	let loading = $state(false)
 
-	let css = $state(initCss($app.css?.formcomponent, customCss))
+	let css = $state(initCss($app.css?.formcomponent, untrack(() => customCss)))
 
 	let wrapper: RunnableWrapper | undefined = $state()
 	$effect(() => {
diff --git a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
index 020d3b0a52..929ce7bc5e 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/common'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
@@ -43,7 +43,7 @@
 
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		onDelete: () => {
 			modal?.close()
 		},
@@ -58,19 +58,19 @@
 		}
 	}
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
 
 	let resolvedConfig = $state(
-		initConfig(components['formbuttoncomponent'].initialData.configuration, configuration)
+		initConfig(components['formbuttoncomponent'].initialData.configuration, untrack(() => configuration))
 	)
 	let runnableComponent: RunnableComponent | undefined = $state()
 
 	let errors: Record<string, string> = {}
 
-	let css = $state(initCss($app?.css?.formbuttoncomponent, customCss))
+	let css = $state(initCss($app?.css?.formbuttoncomponent, untrack(() => customCss)))
 	let runnableWrapper: RunnableWrapper | undefined = $state()
 	let loading = $state(false)
 	let modal: AlwaysMountedModal | undefined = $state()
diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
index f4a585dd70..d21847dd98 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
@@ -55,7 +55,7 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		valid: true,
@@ -85,7 +85,7 @@
 
 	let schemaForm: SchemaForm | undefined = $state()
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: any) {
 			args = nvalue
 			outputs.values.set(nvalue, false)
@@ -101,10 +101,10 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.schemaformcomponent, customCss))
+	let css = $state(initCss($app.css?.schemaformcomponent, untrack(() => customCss)))
 
 	const resolvedConfig = $state(
-		initConfig(components['schemaformcomponent'].initialData.configuration, configuration)
+		initConfig(components['schemaformcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let valid = $state(true)
diff --git a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
index 6b1dc28046..6fa15b45c7 100644
--- a/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppAccordionList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -43,7 +43,7 @@
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
@@ -51,7 +51,7 @@
 
 	let activeIndex: number = $state(0)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		activeIndex: 0,
 		loading: false,
@@ -65,7 +65,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.accordionlistcomponent, customCss))
+	let css = $state(initCss($app.css?.accordionlistcomponent, untrack(() => customCss)))
 	let result: any[] | undefined = $state(undefined)
 
 	let inputs = $state({})
diff --git a/frontend/src/lib/components/apps/components/display/AppAlert.svelte b/frontend/src/lib/components/apps/components/display/AppAlert.svelte
index 9b86b7198b..6c8e7ac3b6 100644
--- a/frontend/src/lib/components/apps/components/display/AppAlert.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppAlert.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -31,12 +31,12 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['alertcomponent'].initialData.configuration, configuration)
+		initConfig(components['alertcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
-	let css = $state(initCss($app.css?.alertcomponent, customCss))
+	let css = $state(initCss($app.css?.alertcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['alertcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppBarChart.svelte b/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
index f873e149bb..f8d78cadeb 100644
--- a/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppBarChart.svelte
@@ -11,7 +11,7 @@
 		Title,
 		Tooltip
 	} from 'chart.js'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { Bar, Line } from '$lib/components/chartjs-wrappers/chartJs'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
@@ -43,10 +43,10 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['barchartcomponent'].initialData.configuration, configuration)
+		initConfig(components['barchartcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -119,7 +119,7 @@
 		}
 	})
 
-	let css = $state(initCss($app.css?.barchartcomponent, customCss))
+	let css = $state(initCss($app.css?.barchartcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['barchartcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
index 0d19c5119a..47b60b2c0c 100644
--- a/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCarouselList.svelte
@@ -39,12 +39,12 @@
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		inputs: {},
@@ -52,7 +52,7 @@
 	})
 
 	const resolvedConfig = $state(
-		initConfig(components['carousellistcomponent'].initialData.configuration, configuration)
+		initConfig(components['carousellistcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	function onFocus() {
@@ -62,7 +62,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.carousellistcomponent, customCss))
+	let css = $state(initCss($app.css?.carousellistcomponent, untrack(() => customCss)))
 	let result: any[] | undefined = $state(undefined)
 
 	let inputs = $state({})
@@ -105,7 +105,7 @@
 		currentPageIndex != undefined && untrack(() => handleIndexChange())
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setSelectedIndex: (index: number) => {
 			if (Array.isArray(result) && index >= 0 && index < result.length) {
 				currentPageIndex = index
diff --git a/frontend/src/lib/components/apps/components/display/AppChartJs.svelte b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
index 7ac9cdb9b9..58ef1723fa 100644
--- a/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppChartJs.svelte
@@ -5,7 +5,7 @@
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
@@ -32,7 +32,7 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -42,7 +42,7 @@
 	let result: undefined = $state(undefined)
 
 	const resolvedConfig = $state(
-		initConfig(components['chartjscomponent'].initialData.configuration, configuration)
+		initConfig(components['chartjscomponent'].initialData.configuration, untrack(() => configuration))
 	)
 	let options = $derived({
 		responsive: true,
@@ -51,7 +51,7 @@
 		...(resolvedConfig.options ?? {})
 	} as ChartOptions)
 
-	let css = $state(initCss($app.css?.chartjscomponent, customCss))
+	let css = $state(initCss($app.css?.chartjscomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppChartJsV2.svelte b/frontend/src/lib/components/apps/components/display/AppChartJsV2.svelte
index d4b35a97f2..2833b84612 100644
--- a/frontend/src/lib/components/apps/components/display/AppChartJsV2.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppChartJsV2.svelte
@@ -10,7 +10,7 @@
 		RichConfigurations
 	} from '../../types'
 	import { initCss } from '../../utils'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { components } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
@@ -51,7 +51,7 @@
 
 	const { app, worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -61,7 +61,7 @@
 	let result: undefined = $state(undefined)
 
 	const resolvedConfig = $state(
-		initConfig(components['chartjscomponent'].initialData.configuration, configuration)
+		initConfig(components['chartjscomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	function hasScales() {
@@ -110,7 +110,7 @@
 			: result
 	)
 
-	let css = $state(initCss($app.css?.chartjscomponent, customCss))
+	let css = $state(initCss($app.css?.chartjscomponent, untrack(() => customCss)))
 </script>
 
 {#if datasets}
diff --git a/frontend/src/lib/components/apps/components/display/AppChat.svelte b/frontend/src/lib/components/apps/components/display/AppChat.svelte
index 46fb652983..938938ef71 100644
--- a/frontend/src/lib/components/apps/components/display/AppChat.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppChat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
@@ -46,7 +46,7 @@
 	const { worldStore, app, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	// Initialize outputs
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as any,
 		loading: false,
 		jobId: undefined as string | undefined,
@@ -56,11 +56,11 @@
 
 	// Resolve configuration
 	let resolvedConfig = $state(
-		initConfig(components['chatcomponent'].initialData.configuration, configuration)
+		initConfig(components['chatcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	// Initialize CSS
-	let css = $state(initCss($app.css?.chatcomponent, customCss))
+	let css = $state(initCss($app.css?.chatcomponent, untrack(() => customCss)))
 
 	// State
 	let runnableComponent: RunnableComponent | undefined = $state()
@@ -79,7 +79,7 @@
 	let chatMemoryId = $state(randomUUID())
 
 	// Register component control for programmatic access
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		sendMessage: (message: string) => {
 			if (message && !loading) {
 				inputValue = message
diff --git a/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte b/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte
index 8b13cc055e..ee178cb001 100644
--- a/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppCustomComponent.svelte
@@ -31,10 +31,10 @@
 
 	let { id, render, componentInput, customComponent }: Props = $props()
 
-	let divId = `custom-component-${id}`
+	let divId = `custom-component-${untrack(() => id)}`
 	const { worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		output: undefined,
 		loading: false
@@ -43,7 +43,7 @@
 	let setInput = $state() as ((input: any) => void) | undefined
 	let setRender = $state() as ((render: boolean) => void) | undefined
 	let ccProps: CCProps<any> = {
-		render,
+		render: untrack(() => render),
 		id: divId,
 		passSetters: (setter) => {
 			setInput = setter.onInput
diff --git a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
index 6a32d62e7d..af83951314 100644
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
@@ -43,21 +43,21 @@
 	let result: any = $state(undefined)
 
 	const resolvedConfig = $state(
-		initConfig(components['displaycomponent'].initialData.configuration, configuration)
+		initConfig(components['displaycomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(value: string) {
 			result = value
 		}
 	}
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
 
-	let css = $state(initCss($app.css?.displaycomponent, customCss))
+	let css = $state(initCss($app.css?.displaycomponent, untrack(() => customCss)))
 	let loading = $state(false)
 </script>
 
diff --git a/frontend/src/lib/components/apps/components/display/AppDisplayComponentByJobId.svelte b/frontend/src/lib/components/apps/components/display/AppDisplayComponentByJobId.svelte
index 5b3fd64173..d2831f76a3 100644
--- a/frontend/src/lib/components/apps/components/display/AppDisplayComponentByJobId.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDisplayComponentByJobId.svelte
@@ -38,10 +38,10 @@
 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
 
 	let resolvedConfig = $state(
-		initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration)
+		initConfig(components['jobiddisplaycomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined as string | undefined
@@ -49,7 +49,7 @@
 
 	initializing = false
 
-	let css = $state(initCss($app.css?.jobiddisplaycomponent, customCss))
+	let css = $state(initCss($app.css?.jobiddisplaycomponent, untrack(() => customCss)))
 
 	let jobLoader: JobLoader | undefined = $state(undefined)
 	let testIsLoading: boolean = $state(false)
diff --git a/frontend/src/lib/components/apps/components/display/AppDownload.svelte b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
index 7127a8ca5a..7bf56e5693 100644
--- a/frontend/src/lib/components/apps/components/display/AppDownload.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppDownload.svelte
@@ -36,14 +36,14 @@
 	}: Props = $props()
 
 	const resolvedConfig = $state(
-		initConfig(components['downloadcomponent'].initialData.configuration, configuration)
+		initConfig(components['downloadcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	const { app, worldStore, appPath, workspace, isEditor } =
 		getContext<AppViewerContext>('AppViewerContext')
 
 	//used so that we can count number of outputs setup for first refresh
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
 	let beforeIconComponent: any = $state()
 	let afterIconComponent: any = $state()
@@ -106,7 +106,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.downloadcomponent, customCss))
+	let css = $state(initCss($app.css?.downloadcomponent, untrack(() => customCss)))
 	$effect(() => {
 		resolvedConfig.beforeIcon && beforeIconComponent && untrack(() => handleBeforeIcon())
 	})
diff --git a/frontend/src/lib/components/apps/components/display/AppHtml.svelte b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
index fa8f49b3a4..0f7eacbc74 100644
--- a/frontend/src/lib/components/apps/components/display/AppHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppHtml.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
@@ -25,14 +25,14 @@
 
 	const { app, worldStore, mode } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
 
 	let result: string | undefined = $state(undefined)
 
-	let css = $state(initCss($app.css?.htmlcomponent, customCss))
+	let css = $state(initCss($app.css?.htmlcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppIcon.svelte b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
index c4e6862c04..c97f005dc6 100644
--- a/frontend/src/lib/components/apps/components/display/AppIcon.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppIcon.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -32,10 +32,10 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['iconcomponent'].initialData.configuration, configuration)
+		initConfig(components['iconcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 	//used so that we can count number of outputs setup for first refresh
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
 	let iconComponent: any = $state()
 
@@ -45,7 +45,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.iconcomponent, customCss))
+	let css = $state(initCss($app.css?.iconcomponent, untrack(() => customCss)))
 	$effect(() => {
 		handleIcon(resolvedConfig, iconComponent)
 	})
diff --git a/frontend/src/lib/components/apps/components/display/AppImage.svelte b/frontend/src/lib/components/apps/components/display/AppImage.svelte
index 6d8cb69930..645598b955 100644
--- a/frontend/src/lib/components/apps/components/display/AppImage.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppImage.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { preventDefault } from 'svelte/legacy'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { components } from '../../editor/component'
@@ -31,7 +31,7 @@
 	}: Props = $props()
 
 	const resolvedConfig = $state(
-		initConfig(components['imagecomponent'].initialData.configuration, configuration)
+		initConfig(components['imagecomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	const { app, appPath, worldStore, workspace, isEditor } =
@@ -43,9 +43,9 @@
 	}
 
 	//used so that we can count number of outputs setup for first refresh
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
-	let css = $state(initCss($app.css?.imagecomponent, customCss))
+	let css = $state(initCss($app.css?.imagecomponent, untrack(() => customCss)))
 
 	let imageUrl: string | undefined = $state(undefined)
 
diff --git a/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte b/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
index 5d69a89267..52f33b2673 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobIdFlowStatus.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -35,10 +35,10 @@
 	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['jobidlogcomponent'].initialData.configuration, configuration)
+		initConfig(components['jobidlogcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined as string | undefined
@@ -46,7 +46,7 @@
 
 	initializing = false
 
-	let css = $state(initCss($app.css?.jobidflowstatuscomponent, customCss))
+	let css = $state(initCss($app.css?.jobidflowstatuscomponent, untrack(() => customCss)))
 
 	let jobId = $derived(resolvedConfig.jobId)
 </script>
diff --git a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
index eace729280..d9b4ac4c0a 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobIdLogComponent.svelte
@@ -37,10 +37,10 @@
 	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['jobidlogcomponent'].initialData.configuration, configuration)
+		initConfig(components['jobidlogcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined
@@ -48,7 +48,7 @@
 
 	initializing = false
 
-	let css = $state(initCss($app.css?.jobidlogcomponent, customCss))
+	let css = $state(initCss($app.css?.jobidlogcomponent, untrack(() => customCss)))
 
 	let jobLoader: JobLoader | undefined = $state(undefined)
 	let testIsLoading: boolean = $state(false)
diff --git a/frontend/src/lib/components/apps/components/display/AppJobProgressBar.svelte b/frontend/src/lib/components/apps/components/display/AppJobProgressBar.svelte
index ecee9c1199..9cf5b59b6e 100644
--- a/frontend/src/lib/components/apps/components/display/AppJobProgressBar.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppJobProgressBar.svelte
@@ -38,10 +38,10 @@
 	const { app, worldStore, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['jobprogressbarcomponent'].initialData.configuration, configuration)
+		initConfig(components['jobprogressbarcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		jobId: undefined
@@ -49,7 +49,7 @@
 
 	initializing = false
 
-	let css = $state(initCss($app.css?.jobprogressbarcomponent, customCss))
+	let css = $state(initCss($app.css?.jobprogressbarcomponent, untrack(() => customCss)))
 
 	let jobLoader: JobLoader | undefined = $state(undefined)
 	let testIsLoading: boolean = $state(false)
diff --git a/frontend/src/lib/components/apps/components/display/AppMap.svelte b/frontend/src/lib/components/apps/components/display/AppMap.svelte
index a630226d7b..4e0a87983e 100644
--- a/frontend/src/lib/components/apps/components/display/AppMap.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMap.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initCss } from '../../utils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { twMerge } from 'tailwind-merge'
@@ -46,10 +46,10 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['mapcomponent'].initialData.configuration, configuration)
+		initConfig(components['mapcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		mapRegion: {
 			topLeft: { lat: 0, lon: 0 },
 			bottomRight: { lat: 0, lon: 0 }
@@ -151,7 +151,7 @@
 		map.changed()
 	}
 
-	let css = $state(initCss($app.css?.mapcomponent, customCss))
+	let css = $state(initCss($app.css?.mapcomponent, untrack(() => customCss)))
 
 	function updateRegionOutput() {
 		if (map && !resolvedConfig.lock) {
diff --git a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
index 6ce74cfd1a..4d70f0d944 100644
--- a/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMarkdown.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -39,17 +39,17 @@
 	const { app, worldStore, mode } = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['mardowncomponent'].initialData.configuration, configuration)
+		initConfig(components['mardowncomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
 
 	let result: string | undefined = $state(undefined)
 
-	let css = $state(initCss($app.css?.mardowncomponent, customCss))
+	let css = $state(initCss($app.css?.mardowncomponent, untrack(() => customCss)))
 
 	const proseMapping = {
 		sm: 'prose-sm',
diff --git a/frontend/src/lib/components/apps/components/display/AppMenu.svelte b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
index 43ab3d3f5d..1498395305 100644
--- a/frontend/src/lib/components/apps/components/display/AppMenu.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppMenu.svelte
@@ -41,17 +41,17 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: {
 			latestButtonClicked: undefined as string | undefined
 		}
 	})
 
 	const resolvedConfig = $state(
-		initConfig(components['menucomponent'].initialData.configuration, configuration)
+		initConfig(components['menucomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let css = $state(initCss($app.css?.menucomponent, customCss))
+	let css = $state(initCss($app.css?.menucomponent, untrack(() => customCss)))
 
 	let beforeIconComponent: any = $state()
 	let afterIconComponent: any = $state()
diff --git a/frontend/src/lib/components/apps/components/display/AppNavbar.svelte b/frontend/src/lib/components/apps/components/display/AppNavbar.svelte
index bf08bfeba1..8832553dcd 100644
--- a/frontend/src/lib/components/apps/components/display/AppNavbar.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppNavbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { preventDefault } from 'svelte/legacy'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -33,18 +33,18 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['navbarcomponent'].initialData.configuration, configuration)
+		initConfig(components['navbarcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let output = $state(
-		initOutput($worldStore, id, {
+		initOutput($worldStore, untrack(() => id), {
 			result: {
 				currentPath: undefined as string | undefined
 			}
 		})
 	)
 
-	let css = $state(initCss($app.css?.navbarcomponent, customCss))
+	let css = $state(initCss($app.css?.navbarcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['navbarcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppPdf.svelte b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
index cf85dd539e..e382f5ae2c 100644
--- a/frontend/src/lib/components/apps/components/display/AppPdf.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPdf.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -22,7 +22,7 @@
 	const { app, worldStore, appPath, workspace, isEditor } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		loading: false
 	})
 
@@ -67,7 +67,7 @@
 		source && loadSource()
 	})
 
-	let css = $state(initCss($app.css?.pdfcomponent, customCss))
+	let css = $state(initCss($app.css?.pdfcomponent, untrack(() => customCss)))
 </script>
 
 <InputValue key="source" {id} input={configuration.source} bind:value={source} />
diff --git a/frontend/src/lib/components/apps/components/display/AppPieChart.svelte b/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
index d7fde24dc9..ca5671b342 100644
--- a/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppPieChart.svelte
@@ -16,7 +16,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import { twMerge } from 'tailwind-merge'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
@@ -41,7 +41,7 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -87,7 +87,7 @@
 		]
 	})
 
-	let css = $state(initCss($app.css?.piechartcomponent, customCss))
+	let css = $state(initCss($app.css?.piechartcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte b/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte
index 5cdccb672d..c0308458ad 100644
--- a/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppRecomputeAll.svelte
@@ -36,16 +36,16 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['recomputeallcomponent'].initialData.configuration, configuration)
+		initConfig(components['recomputeallcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	initOutput($worldStore, id, {
+	initOutput($worldStore, untrack(() => id), {
 		loading: undefined
 	})
 
 	initializing = false
 
-	let css = $state(initCss($app.css?.recomputeallcomponent, customCss))
+	let css = $state(initCss($app.css?.recomputeallcomponent, untrack(() => customCss)))
 
 	function handleRefreshInterval() {
 		if (resolvedConfig.defaultRefreshInterval !== undefined) {
diff --git a/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte b/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
index dd0d03e70a..ae139ea7c5 100644
--- a/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppScatterChart.svelte
@@ -17,7 +17,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
 	import { initCss } from '../../utils'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initOutput } from '../../editor/appUtils'
 	import { twMerge } from 'tailwind-merge'
@@ -47,7 +47,7 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -91,7 +91,7 @@
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>)
 
-	let css = $state(initCss($app.css?.scatterchartcomponent, customCss))
+	let css = $state(initCss($app.css?.scatterchartcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
index 78ab39a553..58af9dc3eb 100644
--- a/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppStatCard.svelte
@@ -32,12 +32,12 @@
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['statcomponent'].initialData.configuration, configuration)
+		initConfig(components['statcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
-	let css = $state(initCss($app.css?.statcomponent, customCss))
+	let css = $state(initCss($app.css?.statcomponent, untrack(() => customCss)))
 
 	let iconComponent: any = $state()
 
diff --git a/frontend/src/lib/components/apps/components/display/AppText.svelte b/frontend/src/lib/components/apps/components/display/AppText.svelte
index 70b1032cd2..947932abfb 100644
--- a/frontend/src/lib/components/apps/components/display/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppText.svelte
@@ -45,7 +45,7 @@
 	}: Props = $props()
 
 	let resolvedConfig = $state(
-		initConfig(components['textcomponent'].initialData.configuration, configuration)
+		initConfig(components['textcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	function onEditorMode() {
@@ -55,26 +55,29 @@
 	const { app, worldStore, mode, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let css = $state(initCss($app.css?.textcomponent, customCss))
+	let css = $state(initCss($app.css?.textcomponent, untrack(() => customCss)))
 
 	let result: string | undefined = $state(undefined)
 
-	if (
-		componentInput?.type == 'template' ||
-		(componentInput?.type == 'templatev2' && !isCodeInjection(componentInput.eval))
-	) {
-		result = componentInput.eval
-		initializing = false
+	{
+		const _ci = untrack(() => componentInput)
+		if (
+			_ci?.type == 'template' ||
+			(_ci?.type == 'templatev2' && !isCodeInjection(_ci.eval))
+		) {
+			result = _ci.eval
+			initializing = false
+		}
 	}
 
-	$componentControl[id] = {
-		...$componentControl[id],
+	$componentControl[untrack(() => id)] = {
+		...$componentControl[untrack(() => id)],
 		setValue(value: string) {
 			result = value
 		}
 	}
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: untrack(() => result),
 		loading: initializing
 	})
diff --git a/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte b/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
index 638d68d71e..85582683df 100644
--- a/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
+++ b/frontend/src/lib/components/apps/components/display/AppTimeseries.svelte
@@ -21,7 +21,7 @@
 	import InputValue from '../helpers/InputValue.svelte'
 	import type { ChartOptions, ChartData } from 'chart.js'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initCss } from '../../utils'
 	import { initOutput } from '../../editor/appUtils'
 	import { twMerge } from 'tailwind-merge'
@@ -47,7 +47,7 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
@@ -105,7 +105,7 @@
 		datasets: result ?? []
 	} as ChartData<'scatter', (number | Point)[], unknown>)
 
-	let css = $state(initCss($app.css?.timeseriescomponent, customCss))
+	let css = $state(initCss($app.css?.timeseriescomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte b/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
index 11b55e71bb..12536303a1 100644
--- a/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/PlotlyHtml.svelte
@@ -29,10 +29,10 @@
 	const { worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['plotlycomponent'].initialData.configuration, configuration)
+		initConfig(components['plotlycomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
diff --git a/frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte b/frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte
index e7bef8b6ae..1823173940 100644
--- a/frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte
+++ b/frontend/src/lib/components/apps/components/display/PlotlyHtmlV2.svelte
@@ -33,10 +33,10 @@
 	const { worldStore, darkMode } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['plotlycomponentv2'].initialData.configuration, configuration)
+		initConfig(components['plotlycomponentv2'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
diff --git a/frontend/src/lib/components/apps/components/display/ResolveNavbarItemPath.svelte b/frontend/src/lib/components/apps/components/display/ResolveNavbarItemPath.svelte
index e5307b4d15..0ab7b2795c 100644
--- a/frontend/src/lib/components/apps/components/display/ResolveNavbarItemPath.svelte
+++ b/frontend/src/lib/components/apps/components/display/ResolveNavbarItemPath.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { type NavbarItem } from '../../editor/component'
 	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 	import { initConfig } from '../../editor/appUtils'
@@ -12,7 +13,7 @@
 
 	let { navbarItem, id, index, resolvedPath = $bindable(undefined) }: Props = $props()
 
-	let resolvedConfig = $state(initConfig({ path: navbarItem.path }, { path: navbarItem.path }))
+	let resolvedConfig = $state(initConfig({ path: untrack(() => navbarItem).path }, { path: untrack(() => navbarItem).path }))
 
 	$effect.pre(() => {
 		resolvedPath = (
diff --git a/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte b/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte
index 9f69e91682..ed92be2786 100644
--- a/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte
+++ b/frontend/src/lib/components/apps/components/display/VegaLiteHtml.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte'
+	import { getContext, onMount, untrack } from 'svelte'
 	import { initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import type { AppViewerContext, RichConfigurations } from '../../types'
@@ -29,7 +29,7 @@
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false
 	})
diff --git a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
index 0f883e0945..4a16887907 100644
--- a/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
+++ b/frontend/src/lib/components/apps/components/display/charts/AppAgCharts.svelte
@@ -38,7 +38,7 @@
 
 	const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as
 			| {
 					data: any[]
@@ -51,10 +51,10 @@
 	let result: undefined | any = $state(undefined)
 
 	const resolvedConfig = $state(
-		initConfig(components['agchartscomponent'].initialData.configuration, configuration)
+		initConfig(components['agchartscomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let css = $state(initCss($app.css?.agchartscomponent, customCss))
+	let css = $state(initCss($app.css?.agchartscomponent, untrack(() => customCss)))
 	let chartInstance: AgChartInstance | undefined = $state(undefined)
 
 	function getChartStyleByTheme() {
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
index da8effb3de..99ebacc532 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/AppDbExplorer.svelte
@@ -86,7 +86,7 @@
 	}
 
 	const resolvedConfig = $state(
-		initConfig(components['dbexplorercomponent'].initialData.configuration, configuration)
+		initConfig(components['dbexplorercomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let timeoutInput: number | undefined = undefined
@@ -180,7 +180,7 @@
 		)
 	}
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		selectedRowIndex: 0,
 		selectedRow: {},
 		selectedRows: [] as any[],
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/DbExplorerCount.svelte b/frontend/src/lib/components/apps/components/display/dbtable/DbExplorerCount.svelte
index 3d9bceeed7..cca4d99165 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/DbExplorerCount.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/DbExplorerCount.svelte
@@ -23,7 +23,7 @@
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, `${id}_count`, {
+	let outputs = initOutput($worldStore, `${untrack(() => id)}_count`, {
 		result: undefined,
 		loading: false,
 		jobId: undefined
@@ -36,8 +36,8 @@
 	let renderCountLast = -1
 	let quicksearchLast: string | undefined = undefined
 
-	let localColumnDefs = columnDefs
-	let lastTable = $state(table)
+	let localColumnDefs = untrack(() => columnDefs)
+	let lastTable = $state(untrack(() => table))
 
 	function onTableChange() {
 		if (table !== lastTable) {
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte b/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
index 5764dc1119..d5009c576b 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, tick } from 'svelte'
+	import { createEventDispatcher, getContext, tick, untrack } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { AppViewerContext } from '../../../types'
 	import type RunnableComponent from '../../helpers/RunnableComponent.svelte'
@@ -19,7 +19,7 @@
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, `${id}_delete`, {
+	let outputs = initOutput($worldStore, `${untrack(() => id)}_delete`, {
 		result: undefined,
 		loading: false,
 		jobId: undefined
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte b/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
index 81d12cc007..74c8a448c5 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext, tick } from 'svelte'
+	import { createEventDispatcher, getContext, tick, untrack } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { AppViewerContext } from '../../../types'
 	import type RunnableComponent from '../../helpers/RunnableComponent.svelte'
@@ -19,7 +19,7 @@
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, `${id}_insert`, {
+	let outputs = initOutput($worldStore, `${untrack(() => id)}_insert`, {
 		result: undefined,
 		loading: false,
 		jobId: undefined
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/UpdateCell.svelte b/frontend/src/lib/components/apps/components/display/dbtable/UpdateCell.svelte
index 55b9cdfc30..e90ea9d96b 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/UpdateCell.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/UpdateCell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, tick } from 'svelte'
+	import { getContext, tick, untrack } from 'svelte'
 	import type { AppInput } from '../../../inputType'
 	import type { AppViewerContext } from '../../../types'
 	import type RunnableComponent from '../../helpers/RunnableComponent.svelte'
@@ -18,7 +18,7 @@
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, `${id}_update`, {
+	let outputs = initOutput($worldStore, `${untrack(() => id)}_update`, {
 		result: undefined,
 		loading: false,
 		jobId: undefined
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index a37215611c..871c3e74d9 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -70,7 +70,7 @@
 	const contextPanel = getContext<ContextPanelContext>('ContextPanel')
 	const { app, selectedComponent, componentControl, darkMode, mode } = context
 
-	let css = $state(initCss($app.css?.aggridcomponent, customCss))
+	let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)))
 
 	let selectedRowIndex = -1
 
@@ -418,9 +418,9 @@
 		}
 	}
 
-	let oldDatasource = $state(datasource)
+	let oldDatasource = $state(untrack(() => datasource))
 
-	let extraConfig = $state(resolvedConfig.extraConfig)
+	let extraConfig = $state(untrack(() => resolvedConfig).extraConfig)
 
 	export function clearRows() {
 		api?.purgeInfiniteCache()
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
index 644d1ed7d8..90696e6fbf 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridInfiniteTable.svelte
@@ -56,15 +56,15 @@
 	const context = getContext<AppViewerContext>('AppViewerContext')
 	const { app, worldStore } = context
 
-	let css = $state(initCss($app.css?.aggridcomponent, customCss))
+	let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)))
 	let result: any[] | undefined = $state(undefined)
 	let loading: boolean = $state(false)
 
 	let resolvedConfig = $state(
-		initConfig(components['aggridinfinitecomponent'].initialData.configuration, configuration)
+		initConfig(components['aggridinfinitecomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		selectedRowIndex: 0,
 		selectedRow: {},
 		selectedRows: [] as any[],
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
index 0f409dc04c..22a7180469 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTable.svelte
@@ -87,7 +87,7 @@
 		comfortable: 50
 	}
 
-	let css = $state(initCss($app.css?.aggridcomponent, customCss))
+	let css = $state(initCss($app.css?.aggridcomponent, untrack(() => customCss)))
 
 	let result: any[] | undefined = $state(undefined)
 
@@ -129,10 +129,10 @@
 	}
 
 	let resolvedConfig = $state(
-		initConfig(components['aggridcomponent'].initialData.configuration, configuration)
+		initConfig(components['aggridcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		selectedRowIndex: 0,
 		selectedRow: {},
 		selectedRows: [] as any[],
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
index 4b0cd46be0..833bd372b4 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import type { AppViewerContext } from '../../../types'
 	import type { TableAction } from '$lib/components/apps/editor/component'
 
@@ -55,8 +55,8 @@
 	const { selectedComponent, hoverStore, mode, connectingInput, componentControl, app } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	$componentControl[id] = {
-		...$componentControl[id],
+	$componentControl[untrack(() => id)] = {
+		...$componentControl[untrack(() => id)],
 		onDelete: () => {
 			// Remove associated subgrid
 			actions.forEach((action) => {
diff --git a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
index e7696e7e53..7f3fc20d65 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppTable.svelte
@@ -99,7 +99,7 @@
 
 	let searchValue = $state('')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		selectedRowIndex: 0,
 		selectedRow: undefined,
 		loading: false,
@@ -126,7 +126,7 @@
 	let table = $state(createSvelteTable(options))
 
 	let resolvedConfig = $state(
-		initConfig(components['tablecomponent'].initialData.configuration, configuration)
+		initConfig(components['tablecomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let selectedRowIndex = $state(-1)
@@ -237,9 +237,9 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.tablecomponent, customCss))
+	let css = $state(initCss($app.css?.tablecomponent, untrack(() => customCss)))
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		right: (skipActions: boolean | undefined) => {
 			if (skipActions) {
 				return false
diff --git a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
index c142174192..fd2ae39151 100644
--- a/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte
@@ -18,7 +18,7 @@
 	const { worldStore, staticExporter, noBackend, runnableComponents } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let result: any = $state(noBackend ? runnable.noBackendValue : undefined)
+	let result: any = $state(noBackend ? untrack(() => runnable).noBackendValue : undefined)
 	export function onSuccess() {
 		if (runnable.recomputeIds) {
 			runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb()))
@@ -31,7 +31,7 @@
 		}
 	})
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: untrack(() => result),
 		loading: false,
 		jobId: undefined
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index b07ec76ae3..618b91a235 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -65,11 +65,11 @@
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
-	if (input == undefined) {
+	if (untrack(() => input) == undefined) {
 		// How did this ever do anything at the top level in svelte 4 if
 		// events were not being picked up before the component fully mounted?
 		dispatch('done')
-		ondone?.()
+		untrack(() => ondone)?.()
 	}
 
 	const { worldStore, state: stateStore, mode } = getContext<AppViewerContext>('AppViewerContext')
@@ -371,13 +371,13 @@
 			untrack(() => debounce(debounceTemplate))
 	})
 
-	if (input?.type == 'eval') {
+	if (untrack(() => input)?.type == 'eval') {
 		$worldStore?.stateId.subscribe((x) => {
 			debounce2(debounceEval)
 		})
 	}
 
-	if (input?.type == 'template') {
+	if (untrack(() => input)?.type == 'template') {
 		$worldStore?.stateId.subscribe((x) => {
 			debounce2(debounceTemplate)
 		})
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index faf8b65ed4..335a161383 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -185,7 +185,7 @@
 	let lazyStaticValues = computeStaticValues()
 	let currentStaticValues = $state(lazyStaticValues)
 
-	let isBg = id.startsWith('bg_')
+	let isBg = untrack(() => id).startsWith('bg_')
 
 	function refreshOnStaticChange() {
 		if (!deepEqual(currentStaticValues, lazyStaticValues)) {
@@ -318,7 +318,7 @@
 	let resultJobLoader: JobLoader | undefined = $state(undefined)
 
 	let schemaStripped: Schema | undefined = $state(
-		autoRefresh || forceSchemaDisplay ? emptySchema() : undefined
+		untrack(() => autoRefresh) || untrack(() => forceSchemaDisplay) ? emptySchema() : undefined
 	)
 
 	function stripSchema(inputs: AppInputs, s: any): Schema {
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
index 3a1ce16cd7..fdb5ee7aff 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte'
+	import { getContext, onMount, untrack } from 'svelte'
 	import type { AppInput } from '../../inputType'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext, ListContext } from '../../types'
@@ -173,7 +173,7 @@
 		}
 	})
 
-	const fullId = id + (extraKey ?? '')
+	const fullId = untrack(() => id) + (untrack(() => extraKey) ?? '')
 	if (!(initializing && componentInput?.type === 'runnable' && isRunnableDefined(componentInput))) {
 		initializing = false
 	} else {
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
index aecf3f43ef..78abc1bdcd 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte
@@ -55,12 +55,12 @@
 	const rowInputs: ListInputs | undefined = getContext<ListInputs>('RowInputs')
 
 	let resolvedConfig = $state(
-		initConfig(components['checkboxcomponent'].initialData.configuration, configuration)
+		initConfig(components['checkboxcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let value: boolean = $state(resolvedConfig.defaultValue ?? false)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: boolean) {
 			value = nvalue
 			if (recomputeIds) {
@@ -69,14 +69,14 @@
 		}
 	}
 
-	if (controls) {
-		$componentControl[id] = { ...$componentControl[id], ...controls }
+	if (untrack(() => controls)) {
+		$componentControl[untrack(() => id)] = { ...$componentControl[untrack(() => id)], ...untrack(() => controls) }
 	}
 
 	// As the checkbox is a special case and has no input
 	// we need to manually set the output
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: false
 	})
 
@@ -111,7 +111,7 @@
 		resolvedConfig.defaultValue != undefined && untrack(() => handleDefault())
 	})
 
-	let css = $state(initCss($app.css?.checkboxcomponent, customCss))
+	let css = $state(initCss($app.css?.checkboxcomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte b/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
index 9566f39866..247f0363ae 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppCodeInputComponent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import { type AppViewerContext, type RichConfigurations } from '../../types'
 	import { components } from '../../editor/component'
@@ -21,7 +21,7 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['codeinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['codeinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let code = $state<string | undefined>(undefined)
@@ -32,7 +32,7 @@
 
 	let lang = $derived(resolvedConfig?.lang ?? 'javascript')
 	let outputs = $state(
-		initOutput($worldStore, id, {
+		initOutput($worldStore, untrack(() => id), {
 			result: ''
 		})
 	)
@@ -48,8 +48,8 @@
 		}
 	})
 
-	$componentControl[id] = {
-		...$componentControl[id],
+	$componentControl[untrack(() => id)] = {
+		...$componentControl[untrack(() => id)],
 		setValue(value: string) {
 			code = value
 			editorInstance?.setCode(value)
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
index c4f3e8206e..846fd77a8b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateInput.svelte
@@ -38,12 +38,12 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['dateinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['dateinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let value: string | undefined = $state(undefined)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			if (typeof nvalue === 'string') {
 				value = nvalue?.split('T')?.[0]
@@ -54,7 +54,7 @@
 		}
 	}
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
@@ -80,7 +80,7 @@
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
 	}
-	let css = $state(initCss($app.css?.dateinputcomponent, customCss))
+	let css = $state(initCss($app.css?.dateinputcomponent, untrack(() => customCss)))
 	$effect.pre(() => {
 		resolvedConfig.defaultValue
 		untrack(() => handleDefault(resolvedConfig.defaultValue))
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
index d9a5c0697a..c1a83d3f2b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateSelect.svelte
@@ -33,18 +33,18 @@
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['dateselectcomponent'].initialData.configuration, configuration)
+		initConfig(components['dateselectcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let value: string | undefined = $state(undefined)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			value = nvalue
 		}
 	}
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		day: undefined as number | undefined,
 		month: undefined as number | undefined,
 		year: undefined as number | undefined
@@ -90,7 +90,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.dateinputcomponent, customCss))
+	let css = $state(initCss($app.css?.dateinputcomponent, untrack(() => customCss)))
 
 	let selectedDay: string | undefined = $state(undefined)
 	let selectedMonth: string | undefined = $state(undefined)
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateSliderInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateSliderInput.svelte
index 42e9383ac3..23ff62e5a3 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateSliderInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateSliderInput.svelte
@@ -43,7 +43,7 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['dateslidercomponent'].initialData.configuration, configuration)
+		initConfig(components['dateslidercomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	onDestroy(() => {
@@ -66,11 +66,11 @@
 
 	let slider: HTMLElement | undefined = $state()
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: null as string | null
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: number) {
 			values = [nvalue]
 		}
@@ -99,7 +99,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.dateslidercomponent, customCss))
+	let css = $state(initCss($app.css?.dateslidercomponent, untrack(() => customCss)))
 
 	let lastStyle: string | undefined = $state(undefined)
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
index 2524767b4b..9999461bf1 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte
@@ -45,10 +45,10 @@
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
 	let resolvedConfig = $state(
-		initConfig(components['datetimeinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['datetimeinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined,
 		validity: true as boolean | undefined
 	})
@@ -58,7 +58,7 @@
 		!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue
 	)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			value = nvalue
 			outputs?.result.set(value)
@@ -100,7 +100,7 @@
 		value = defaultValue
 	}
 
-	let css = $state(initCss($app.css?.datetimeinputcomponent, customCss))
+	let css = $state(initCss($app.css?.datetimeinputcomponent, untrack(() => customCss)))
 	$effect.pre(() => {
 		;[resolvedConfig.defaultValue]
 		untrack(() => handleDefault(resolvedConfig.defaultValue))
diff --git a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
index c89448c57b..7a466cdc1b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte
@@ -31,12 +31,12 @@
 	const { app, worldStore, componentControl, mode, runnableComponents } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: [] as { name: string; data: string }[] | undefined
 	})
 
 	let resolvedConfig = $state(
-		initConfig(components['fileinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['fileinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	// Receives Base64 encoded strings from the input component
@@ -51,11 +51,11 @@
 		onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 	}
 
-	let css = $state(initCss($app.css?.fileinputcomponent, customCss))
+	let css = $state(initCss($app.css?.fileinputcomponent, untrack(() => customCss)))
 
 	let fileInput: FileInput | undefined = $state(undefined)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		clearFiles: () => {
 			fileInput?.clearFiles()
 		}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
index 7d6ee97fa1..ad35c071ca 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte
@@ -47,10 +47,10 @@
 	let items: { value: string; label?: any }[] = $state([])
 
 	const resolvedConfig = $state(
-		initConfig(components['multiselectcomponentv2'].initialData.configuration, configuration)
+		initConfig(components['multiselectcomponentv2'].initialData.configuration, untrack(() => configuration))
 	)
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: [] as string[]
 	})
 
@@ -68,7 +68,7 @@
 		setContextValue(value)
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string[]) {
 			if (Array.isArray(nvalue)) {
 				setSelectedItemsFromValues(nvalue)
@@ -130,7 +130,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.multiselectcomponentv2, customCss))
+	let css = $state(initCss($app.css?.multiselectcomponentv2, untrack(() => customCss)))
 
 	$effect(() => {
 		resolvedConfig.items && untrack(() => handleItems())
diff --git a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
index da95b05e30..9f82c8508b 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppNumberInput.svelte
@@ -41,14 +41,14 @@
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
 	let resolvedConfig = $state(
-		initConfig(components['numberinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['numberinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	onDestroy(() => {
 		listInputs?.remove(id)
 	})
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as number | undefined
 	})
 
@@ -57,7 +57,7 @@
 		!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue
 	)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: number | undefined) {
 			value = nvalue
 			outputs?.result.set(value)
@@ -89,7 +89,7 @@
 		value = defaultValue
 	}
 
-	let css = $state(initCss($app.css?.numberinputcomponent, customCss))
+	let css = $state(initCss($app.css?.numberinputcomponent, untrack(() => customCss)))
 	$effect.pre(() => {
 		resolvedConfig.defaultValue
 		untrack(() => handleDefault(resolvedConfig.defaultValue))
diff --git a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
index 6e3f0f5789..38fd13825a 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppQuillEditor.svelte
@@ -36,7 +36,7 @@
 	let placeholder: string | undefined = $state(undefined)
 	let defaultValue: string | undefined = $state(undefined)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: ''
 	})
 
@@ -60,7 +60,7 @@
 		})
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			if (quill) {
 				quill.root.innerHTML = nvalue
diff --git a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
index c84df75282..d475bb3b49 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppRangeInput.svelte
@@ -41,7 +41,7 @@
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
 	let resolvedConfig = $state(
-		initConfig(components['rangecomponent'].initialData.configuration, configuration)
+		initConfig(components['rangecomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let values: [number, number] = $state([0, 1])
@@ -52,11 +52,11 @@
 
 	let slider: HTMLElement | undefined = $state()
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: null as [number, number] | null
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: [number, number]) {
 			values = nvalue
 		}
@@ -66,7 +66,7 @@
 		listInputs?.remove(id)
 	})
 
-	let css = $state(initCss($app.css?.rangecomponent, customCss))
+	let css = $state(initCss($app.css?.rangecomponent, untrack(() => customCss)))
 
 	let lastStyle: string | undefined = $state(undefined)
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
index 6d277f97d9..8bb8dbc04a 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppS3FileInput.svelte
@@ -34,14 +34,14 @@
 	}: Props = $props()
 
 	let resolvedConfig = $state(
-		initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['s3fileinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let fileUploads: Writable<FileUploadData[]> = writable([])
 	const { app, worldStore, componentControl, runnableComponents, workspace } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		clearFiles: () => {
 			outputs.result.set([])
 			$fileUploads = []
@@ -49,7 +49,7 @@
 	}
 
 	let value: { path: string; filename: string }[] | undefined = $state(undefined)
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: untrack(() => value) ?? ([] as { path: string; filename: string }[] | undefined),
 		loading: false,
 		jobId: undefined
@@ -57,7 +57,7 @@
 
 	let resolvedConfigS3 = $derived(resolvedConfig.type.configuration.s3)
 
-	let css = $state(initCss($app.css?.fileinputcomponent, customCss))
+	let css = $state(initCss($app.css?.fileinputcomponent, untrack(() => customCss)))
 	/*
 
 		{#if resolvedConfig.displayDirectLink && fileUpload.progress === 100}
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
index 4e7d7dc8fc..a4f4881213 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte
@@ -65,27 +65,27 @@
 	const rowContext = getContext<ListContext>('RowWrapperContext')
 	const rowInputs: ListInputs | undefined = getContext<ListInputs>('RowInputs')
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			setValue(JSON.stringify(nvalue))
 		}
 	}
 
-	if (controls) {
-		$componentControl[id] = { ...$componentControl[id], ...controls }
+	if (untrack(() => controls)) {
+		$componentControl[untrack(() => id)] = { ...$componentControl[untrack(() => id)], ...untrack(() => controls) }
 	}
 
 	let resolvedConfig = $state(
-		initConfig(components['selectcomponent'].initialData.configuration, configuration)
+		initConfig(components['selectcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
 	// The library expects double quotes around the value
 	let value: string | undefined = $state(
-		noDefault
+		untrack(() => noDefault)
 			? undefined
 			: outputs?.result.peak()
 				? JSON.stringify(outputs?.result.peak())
@@ -189,7 +189,7 @@
 		setContextValue(undefined)
 	}
 
-	let css = $state(initCss($app.css?.selectcomponent, customCss))
+	let css = $state(initCss($app.css?.selectcomponent, untrack(() => customCss)))
 
 	let previsousFilter = ''
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
index 47b9a013fa..eccb29e6de 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelectStep.svelte
@@ -33,16 +33,16 @@
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['selectstepcomponent'].initialData.configuration, configuration)
+		initConfig(components['selectstepcomponent'].initialData.configuration, untrack(() => configuration))
 	)
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
 	let selected: string = $state('')
 	let selectedIndex: number = $state(0)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			selected = nvalue
 			selectedIndex = resolvedConfig.items.findIndex((item) => getValue(item) === nvalue)
@@ -88,7 +88,7 @@
 		return typeof item == 'string' ? item : item.label
 	}
 
-	let css = $state(initCss($app.css?.selectstepcomponent, customCss))
+	let css = $state(initCss($app.css?.selectstepcomponent, untrack(() => customCss)))
 	$effect(() => {
 		resolvedConfig.defaultValue != undefined && untrack(() => setDefaultValue())
 	})
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
index b037160322..f11899b30e 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSelectTab.svelte
@@ -39,9 +39,9 @@
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['selecttabcomponent'].initialData.configuration, configuration)
+		initConfig(components['selecttabcomponent'].initialData.configuration, untrack(() => configuration))
 	)
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
@@ -54,7 +54,7 @@
 		listInputs?.remove(id)
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			selected = nvalue
 		},
@@ -83,7 +83,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.selecttabcomponent, customCss))
+	let css = $state(initCss($app.css?.selecttabcomponent, untrack(() => customCss)))
 	$effect.pre(() => {
 		selected === '' && resolvedConfig.defaultValue && untrack(() => setDefaultValue())
 	})
diff --git a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
index 34432bc926..f9135da66e 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppSliderInputs.svelte
@@ -42,7 +42,7 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['slidercomponent'].initialData.configuration, configuration)
+		initConfig(components['slidercomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	onDestroy(() => {
@@ -57,11 +57,11 @@
 
 	let slider: HTMLElement | undefined = $state()
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: (0 as number) || null
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: number) {
 			values = [nvalue]
 		}
@@ -80,7 +80,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.slidercomponent, customCss))
+	let css = $state(initCss($app.css?.slidercomponent, untrack(() => customCss)))
 
 	let lastStyle: string | undefined = $state(undefined)
 
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
index f4c704d4ec..5ac07d87d2 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte
@@ -56,13 +56,13 @@
 	} = getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['textinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['textinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
@@ -75,7 +75,7 @@
 		listInputs?.remove(id)
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			value = nvalue
 			outputs?.result.set(value)
@@ -109,7 +109,7 @@
 		value = defaultValue
 	}
 
-	let css = $state(initCss($app.css?.[appCssKey], customCss))
+	let css = $state(initCss($app.css?.[untrack(() => appCssKey)], untrack(() => customCss)))
 
 	let beforeIconComponent: any = $state()
 	let afterIconComponent: any = $state()
diff --git a/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte b/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte
index e8b734dff9..f3ddbd64cc 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppTimeInput.svelte
@@ -34,18 +34,18 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['timeinputcomponent'].initialData.configuration, configuration)
+		initConfig(components['timeinputcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let value: string | undefined = $state(undefined)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			value = nvalue
 		}
 	}
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined,
 		validity: true as boolean
 	})
@@ -64,7 +64,7 @@
 	function handleDefault(defaultValue: string | undefined) {
 		value = defaultValue
 	}
-	let css = $state(initCss($app.css?.timeinputcomponent, customCss))
+	let css = $state(initCss($app.css?.timeinputcomponent, untrack(() => customCss)))
 	$effect.pre(() => {
 		resolvedConfig.defaultValue
 		!value && untrack(() => handleDefault(resolvedConfig.defaultValue))
diff --git a/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte b/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte
index 0b1232922a..d366b41f47 100644
--- a/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/AppUserResource.svelte
@@ -37,17 +37,17 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	let resolvedConfig = $state(
-		initConfig(components['userresourcecomponent'].initialData.configuration, configuration)
+		initConfig(components['userresourcecomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined as string | undefined
 	})
 
-	let css = $state(initCss($app.css?.['userresourcecomponent'], customCss))
+	let css = $state(initCss($app.css?.['userresourcecomponent'], untrack(() => customCss)))
 
 	let classInput = $derived(
 		twMerge(
@@ -91,7 +91,7 @@
 		listInputs?.remove(id)
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: string) {
 			value = nvalue
 		},
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
index 8241312078..9eda8b4a2b 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/AppCurrencyInput.svelte
@@ -40,7 +40,7 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: null as number | null
 	})
 
@@ -49,7 +49,7 @@
 	})
 
 	let resolvedConfig = $state(
-		initConfig(components['currencycomponent'].initialData.configuration, configuration)
+		initConfig(components['currencycomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let initValue = outputs?.result.peak()
@@ -57,7 +57,7 @@
 		!iterContext && initValue != undefined ? initValue : resolvedConfig.defaultValue
 	)
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setValue(nvalue: number) {
 			value = nvalue
 			outputs?.result.set(value ?? null)
@@ -84,7 +84,7 @@
 		handleInput()
 	}
 
-	let css = $state(initCss($app.css?.currencycomponent, customCss))
+	let css = $state(initCss($app.css?.currencycomponent, untrack(() => customCss)))
 	$effect(() => {
 		resolvedConfig.defaultValue
 		untrack(() => handleDefault(resolvedConfig.defaultValue))
diff --git a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
index 61bbe2aeeb..95e7505f18 100644
--- a/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
+++ b/frontend/src/lib/components/apps/components/inputs/currency/CurrencyInput.svelte
@@ -185,7 +185,7 @@
 
 	let formattedValue = $state('')
 	let formattedPlaceholder =
-		placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : ''
+		untrack(() => placeholder) !== null ? formatCurrency(untrack(() => placeholder)!, untrack(() => fractionDigits), untrack(() => fractionDigits)) : ''
 	let isZero = $derived(value === 0)
 	let isNegative = $derived((value ?? DEFAULT_VALUE) < 0)
 	$effect(() => {
diff --git a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
index 9a88a8efd1..22a810b2af 100644
--- a/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppConditionalWrapper.svelte
@@ -37,12 +37,12 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		conditions: [] as boolean[],
 		selectedTabIndex: 0
 	})
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
@@ -54,9 +54,9 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
+	let css = $state(initCss($app.css?.conditionalwrapper, untrack(() => customCss)))
 
-	let resolvedConditions: boolean[] = $state(conditions.map((_x) => false))
+	let resolvedConditions: boolean[] = $state(untrack(() => conditions).map((_x) => false))
 	let selectedConditionIndex = $state(0)
 
 	function handleResolvedConditions() {
@@ -83,7 +83,7 @@
 		resolvedConditions && untrack(() => handleResolvedConditions())
 	})
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setTab: (conditionIndex: number) => {
 			if (conditionIndex === -1) {
 				handleResolvedConditions()
diff --git a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
index 2787f914b3..663047cb76 100644
--- a/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppContainer.svelte
@@ -31,14 +31,14 @@
 	const { app, focusedGrid, selectedComponent, worldStore, connectingInput, componentControl } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
 
 	let groupContext = writable({})
 
-	let outputs = initOutput($worldStore, id, { group: $groupContext })
+	let outputs = initOutput($worldStore, untrack(() => id), { group: $groupContext })
 
 	$effect.pre(() => {
 		$groupContext
@@ -65,7 +65,7 @@
 		}
 	})
 
-	let css = $state(initCss($app.css?.containercomponent, customCss))
+	let css = $state(initCss($app.css?.containercomponent, untrack(() => customCss)))
 </script>
 
 <InitializeComponent {id} />
diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index 7f62f3033d..ff5ee3b90c 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -51,7 +51,7 @@
 		untrack(() => (counter += 1))
 	})
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
@@ -66,11 +66,11 @@
 		debuggingComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let css = $state(initCss($app.css?.conditionalwrapper, customCss))
+	let css = $state(initCss($app.css?.conditionalwrapper, untrack(() => customCss)))
 	let selectedConditionIndex = 0
-	let currentNodeId = $state(getFirstNode(nodes)?.id ?? '')
+	let currentNodeId = $state(getFirstNode(untrack(() => nodes))?.id ?? '')
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		currentNodeId: untrack(() => currentNodeId),
 		currentNodeIndex: selectedConditionIndex
 	})
@@ -154,7 +154,7 @@
 		}
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setTab: (conditionIndex: number) => {
 			if (conditionIndex !== -1) {
 				onFocus(conditionIndex)
diff --git a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
index 97a698dd60..af68c3ad55 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDivider.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { initOutput } from '../../editor/appUtils'
 	import type {
@@ -41,10 +41,10 @@
 	let size = $state(2)
 	let color = $state('#00000060')
 
-	let css = $state(initCss($app.css?.[position + 'dividercomponent'], customCss))
+	let css = $state(initCss($app.css?.[untrack(() => position) + 'dividercomponent'], untrack(() => customCss)))
 
 	//used so that we can count number of outputs setup for first refresh
-	initOutput($worldStore, id, {})
+	initOutput($worldStore, untrack(() => id), {})
 
 	function getSize() {
 		if (position === 'horizontal') {
diff --git a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
index ca77607499..bb5765dc7b 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDrawer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import Portal from '$lib/components/Portal.svelte'
@@ -38,7 +38,7 @@
 		onCloseRecomputeIds = undefined
 	}: Props = $props()
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect(() => {
 		render && !everRender && (everRender = true)
 	})
@@ -55,9 +55,9 @@
 	} = getContext<AppViewerContext>('AppViewerContext')
 
 	const resolvedConfig = $state(
-		initConfig(components['drawercomponent'].initialData.configuration, configuration)
+		initConfig(components['drawercomponent'].initialData.configuration, untrack(() => configuration))
 	)
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		open: false
 	})
 
@@ -65,7 +65,7 @@
 
 	let appDrawer: Drawer | undefined = $state()
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		open: () => {
 			appDrawer?.openDrawer()
 		},
@@ -74,7 +74,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.drawercomponent, customCss))
+	let css = $state(initCss($app.css?.drawercomponent, untrack(() => customCss)))
 </script>
 
 {#each Object.keys(components['drawercomponent'].initialData.configuration) as key (key)}
diff --git a/frontend/src/lib/components/apps/components/layout/AppList.svelte b/frontend/src/lib/components/apps/components/layout/AppList.svelte
index 46b9311f53..02431c3a33 100644
--- a/frontend/src/lib/components/apps/components/layout/AppList.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { initConfig, initOutput } from '../../editor/appUtils'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
@@ -37,12 +37,12 @@
 		getContext<AppViewerContext>('AppViewerContext')
 	let page = $state(0)
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
 
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		result: undefined,
 		loading: false,
 		inputs: {},
@@ -50,7 +50,7 @@
 	})
 
 	let resolvedConfig = $state(
-		initConfig(components['listcomponent'].initialData.configuration, configuration)
+		initConfig(components['listcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	function onFocus() {
@@ -60,7 +60,7 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.listcomponent, customCss))
+	let css = $state(initCss($app.css?.listcomponent, untrack(() => customCss)))
 	let result: any[] | undefined = $state(undefined)
 
 	let isCard = $derived(resolvedConfig.width?.selected == 'card')
diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index 49a13a9601..307f5c3c56 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
@@ -59,21 +59,21 @@
 		breakpoint
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
 
 	//used so that we can count number of outputs setup for first refresh
-	const outputs = initOutput($worldStore, id, {
+	const outputs = initOutput($worldStore, untrack(() => id), {
 		open: false
 	})
 
-	let css = $state(initCss($app.css?.modalcomponent, customCss))
+	let css = $state(initCss($app.css?.modalcomponent, untrack(() => customCss)))
 	let disposable: Disposable | undefined = $state(undefined)
 
 	let resolvedConfig = $state(
-		initConfig(components['modalcomponent'].initialData.configuration, configuration)
+		initConfig(components['modalcomponent'].initialData.configuration, untrack(() => configuration))
 	)
 
 	let unclickableOutside = $state(false)
@@ -84,7 +84,7 @@
 		}, 1000)
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		openModal: () => {
 			unclosableModal()
 
diff --git a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
index 6e208a1bf7..4431767bc5 100644
--- a/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppSplitpanes.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import SubGridEditor from '../../editor/SubGridEditor.svelte'
 	import type { AppViewerContext, ComponentCustomCSS } from '../../types'
 	import { initCss } from '../../utils'
@@ -36,11 +36,11 @@
 		getContext<AppViewerContext>('AppViewerContext')
 
 	//used so that we can count number of outputs setup for first refresh
-	initOutput($worldStore, id, {
+	initOutput($worldStore, untrack(() => id), {
 		selectedPaneIndex: 0
 	})
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
@@ -53,9 +53,9 @@
 		}
 	}
 
-	let css = $state(initCss($app.css?.containercomponent, customCss))
+	let css = $state(initCss($app.css?.containercomponent, untrack(() => customCss)))
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		left: () => {
 			if ($focusedGrid?.subGridIndex) {
 				const index = $focusedGrid?.subGridIndex ?? 0
@@ -80,7 +80,7 @@
 		}
 	}
 
-	let sumedup = $state(panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100))
+	let sumedup = $state(untrack(() => panes).map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100))
 	$effect.pre(() => {
 		let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100)
 		if (!deepEqual(ns, sumedup)) {
diff --git a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
index 97c8c75808..133de2603b 100644
--- a/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppStepper.svelte
@@ -51,21 +51,21 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
 
-	let selected = $state(tabs[0])
+	let selected = $state(untrack(() => tabs)[0])
 	let tabHeight: number = $state(0)
 	let footerHeight: number = $state(0)
 	let runnableComponent: RunnableComponent | undefined = $state()
-	let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1)
+	let selectedIndex = $state(untrack(() => tabs)?.indexOf(untrack(() => selected)) ?? -1)
 	let maxReachedIndex = $state(-1)
 	let statusByStep = $state([] as Array<'success' | 'error' | 'pending'>)
 	let debugMode: boolean = false
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		currentStepIndex: 0,
 		result: undefined,
 		loading: false,
@@ -113,7 +113,7 @@
 		directionClicked = undefined
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		left: () => {
 			const index = tabs.indexOf(selected)
 			if (index > 0) {
@@ -152,7 +152,7 @@
 	$effect.pre(() => {
 		selected != undefined && untrack(() => handleTabSelection())
 	})
-	let css = $state(initCss($app.css?.steppercomponent, customCss))
+	let css = $state(initCss($app.css?.steppercomponent, untrack(() => customCss)))
 	let lastStep = $derived(selectedIndex === tabs.length - 1)
 
 	let directionClicked: 'left' | 'right' | undefined = $state(undefined)
diff --git a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
index 94ab4a231b..8ec4de2e56 100644
--- a/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppTabs.svelte
@@ -45,9 +45,9 @@
 	}: Props = $props()
 
 	let resolvedConfig = $state(
-		initConfig(components['tabscomponent'].initialData.configuration, configuration)
+		initConfig(components['tabscomponent'].initialData.configuration, untrack(() => configuration))
 	)
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 	$effect.pre(() => {
 		render && !everRender && (everRender = true)
 	})
@@ -63,13 +63,13 @@
 		runnableComponents
 	} = getContext<AppViewerContext>('AppViewerContext')
 
-	let selected: string = $state(tabs[0])
-	let selectedIndex = $state(tabs?.indexOf(untrack(() => selected)) ?? -1)
-	let css = $state(initCss($app.css?.tabscomponent, customCss))
+	let selected: string = $state(untrack(() => tabs)[0])
+	let selectedIndex = $state(untrack(() => tabs)?.indexOf(untrack(() => selected)) ?? -1)
+	let css = $state(initCss($app.css?.tabscomponent, untrack(() => customCss)))
 
 	let tabHeight: number = $state(0)
 
-	let outputs = initOutput($worldStore, id, {
+	let outputs = initOutput($worldStore, untrack(() => id), {
 		selectedTabIndex: 0
 	})
 
@@ -96,7 +96,7 @@
 		}
 	}
 
-	$componentControl[id] = {
+	$componentControl[untrack(() => id)] = {
 		setSelectedIndex(index) {
 			if (index >= 0 && index < tabs.length) {
 				selected = tabs[index]
@@ -134,7 +134,7 @@
 		}
 	}
 
-	let lastTabs: string[] | undefined = tabs
+	let lastTabs: string[] | undefined = untrack(() => tabs)
 	$effect.pre(() => {
 		if (!untrack(() => selected)) {
 			return
diff --git a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
index 992bcd6952..d0b303c211 100644
--- a/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/ListWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
@@ -20,7 +20,7 @@
 		onRemove = undefined,
 		children
 	}: Props = $props()
-	const ctx = writable({ index, value, disabled })
+	const ctx = writable({ index: untrack(() => index), value: untrack(() => value), disabled: untrack(() => disabled) })
 
 	$effect(() => {
 		$ctx = { index, value, disabled }
diff --git a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
index dd588b26e1..eeab42a69a 100644
--- a/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
+++ b/frontend/src/lib/components/apps/components/layout/RowWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import type { ListInputs, ListContext } from '../../types'
 	import { writable } from 'svelte/store'
 
@@ -14,7 +14,7 @@
 
 	let { index, value, disabled = false, onSet, onRemove, children }: Props = $props()
 
-	const ctx = writable({ index, value, disabled })
+	const ctx = writable({ index: untrack(() => index), value: untrack(() => value), disabled: untrack(() => disabled) })
 
 	$effect(() => {
 		$ctx = { index, value, disabled }
diff --git a/frontend/src/lib/components/apps/editor/AppEditor.svelte b/frontend/src/lib/components/apps/editor/AppEditor.svelte
index 4112af13dd..8c69af2ac7 100644
--- a/frontend/src/lib/components/apps/editor/AppEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditor.svelte
@@ -80,9 +80,9 @@
 		onrestore = undefined
 	}: AppEditorProps = $props()
 
-	migrateApp(app)
+	migrateApp(untrack(() => app))
 
-	const stateApp = $state(app)
+	const stateApp = $state(untrack(() => app))
 	const appStore = writable<App>(stateApp)
 	const selectedComponent = writable<string[] | undefined>(undefined)
 
@@ -91,7 +91,7 @@
 	// })
 	const mode = writable<EditorMode>('dnd')
 	const breakpoint = writable<EditorBreakpoint>('lg')
-	const summaryStore = writable(summary)
+	const summaryStore = writable(untrack(() => summary))
 	const connectingInput = writable<ConnectingInput>({
 		opened: false,
 		input: undefined,
@@ -100,7 +100,7 @@
 
 	const cssEditorOpen = writable<boolean>(false)
 
-	const history = initHistory(app)
+	const history = initHistory(untrack(() => app))
 
 	const jobsById = writable<
 		Record<
@@ -127,7 +127,7 @@
 		workspace: $workspaceStore,
 		mode: 'editor',
 		summary: $summaryStore,
-		author: policy.on_behalf_of_email
+		author: untrack(() => policy).on_behalf_of_email
 	})
 	const darkMode: Writable<boolean> = writable(document.documentElement.classList.contains('dark'))
 
@@ -147,7 +147,7 @@
 	$secondaryMenuRightStore.isOpen = false
 	$secondaryMenuLeftStore.isOpen = false
 
-	let writablePath = writable(path)
+	let writablePath = writable(untrack(() => path))
 
 	function onPathChange() {
 		writablePath.set(path)
@@ -185,8 +185,8 @@
 		cssEditorOpen,
 		previewTheme,
 		debuggingComponents: writable({}),
-		replaceStateFn: replaceStateFn,
-		policy: policy,
+		replaceStateFn: untrack(() => replaceStateFn),
+		policy: untrack(() => policy),
 		recomputeAllContext: writable({
 			loading: false,
 			componentNumber: 0,
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index ce18164a39..e907b95c75 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -157,7 +157,7 @@
 
 	let draftDrawerOpen = $state(false)
 	let saveDrawerOpen = $state(false)
-	let inputsDrawerOpen = $state(fromHub)
+	let inputsDrawerOpen = $state(untrack(() => fromHub))
 	let historyBrowserDrawerOpen = $state(false)
 	let debugAppDrawerOpen = $state(false)
 	let lazyDrawerOpen = $state(false)
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index a379fe4a66..cee7da9f32 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -59,9 +59,9 @@
 		gotoFn = (path: string, opt?: Record<string, any>) => window.history.pushState(null, '', path)
 	}: Props = $props()
 
-	migrateApp(app)
+	migrateApp(untrack(() => app))
 
-	const appStore = writable<App>(app)
+	const appStore = writable<App>(untrack(() => app))
 	const selectedComponent = writable<string[] | undefined>(undefined)
 	const mode = writable<EditorMode>('preview')
 
@@ -74,11 +74,11 @@
 	const allIdsInPath = writable<string[]>([])
 
 	let ncontext: any = {
-		...context,
-		workspace,
+		...untrack(() => context),
+		workspace: untrack(() => workspace),
 		mode: 'viewer',
-		summary: summary,
-		author: policy.on_behalf_of_email
+		summary: untrack(() => summary),
+		author: untrack(() => policy).on_behalf_of_email
 	}
 
 	function resizeWindow() {
@@ -90,7 +90,7 @@
 	const parentWidth = writable(0)
 
 	let previousDarkMode = document.documentElement.classList.contains('dark')
-	const darkMode: Writable<boolean> = writable(app?.darkMode ?? previousDarkMode)
+	const darkMode: Writable<boolean> = writable(untrack(() => app)?.darkMode ?? previousDarkMode)
 
 	onDestroy(() => {
 		setTheme(previousDarkMode)
@@ -132,7 +132,7 @@
 		})
 	}
 
-	let writablePath = writable(appPath)
+	let writablePath = writable(untrack(() => appPath))
 
 	function onPathChange() {
 		writablePath.set(appPath)
@@ -146,21 +146,21 @@
 			runnableInitialized: {}
 		}),
 		app: appStore,
-		summary: writable(summary),
+		summary: writable(untrack(() => summary)),
 		selectedComponent,
 		bgRuns: writable([]),
 		mode,
 		connectingInput,
-		breakpoint,
+		breakpoint: untrack(() => breakpoint),
 		runnableComponents: writable({}),
 		appPath: writablePath,
-		workspace,
+		workspace: untrack(() => workspace),
 		onchange: undefined,
-		isEditor,
+		isEditor: untrack(() => isEditor),
 		jobs: parentContext?.jobs ?? writable([]),
 		jobsById: parentContext?.jobsById ?? writable({}),
 		staticExporter: writable({}),
-		noBackend,
+		noBackend: untrack(() => noBackend),
 		errorByComponent: writable({}),
 		openDebugRun: writable(undefined),
 		focusedGrid: writable(undefined),
@@ -174,9 +174,9 @@
 		cssEditorOpen: writable(false),
 		previewTheme: writable(undefined),
 		debuggingComponents: writable({}),
-		replaceStateFn,
-		gotoFn,
-		policy,
+		replaceStateFn: untrack(() => replaceStateFn),
+		gotoFn: untrack(() => gotoFn),
+		policy: untrack(() => policy),
 		recomputeAllContext: writable({
 			loading: false,
 			componentNumber: 0,
diff --git a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
index df6b6f0560..c67031c5c4 100644
--- a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
@@ -2,7 +2,7 @@
 	import { stopPropagation } from 'svelte/legacy'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
 	import { classNames } from '$lib/utils'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import type { AppViewerContext } from '../types'
 	import type { DecisionTreeNode } from './component'
 	import { isDebugging } from './settingsPanel/decisionTree/utils'
@@ -34,7 +34,7 @@
 		getContext<AppViewerContext>('AppViewerContext')
 	const dispatch = createEventDispatcher()
 
-	let currentNodeId: string = $state($worldStore.outputsById[id]?.currentNodeId?.peak() ?? 'a')
+	let currentNodeId: string = $state($worldStore.outputsById[untrack(() => id)]?.currentNodeId?.peak() ?? 'a')
 
 	function subscribeToCurrentNode(id: string) {
 		return $worldStore.outputsById[id]?.currentNodeId?.subscribe(
@@ -48,7 +48,7 @@
 		)
 	}
 
-	let subscription = subscribeToCurrentNode(id)
+	let subscription = subscribeToCurrentNode(untrack(() => id))
 
 	function onDebugNode(debuggedNodeIndex: number | undefined) {
 		if (debuggedNodeIndex === undefined) {
@@ -70,7 +70,7 @@
 	})
 
 	let renderCount: number = $state(0)
-	let lastNodes: DecisionTreeNode[] = nodes
+	let lastNodes: DecisionTreeNode[] = untrack(() => nodes)
 
 	function onNodesChange(newNodes: DecisionTreeNode[]) {
 		if (JSON.stringify(newNodes) !== JSON.stringify(lastNodes)) {
diff --git a/frontend/src/lib/components/apps/editor/GridViewer.svelte b/frontend/src/lib/components/apps/editor/GridViewer.svelte
index 214c632b70..2af2dd6881 100644
--- a/frontend/src/lib/components/apps/editor/GridViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/GridViewer.svelte
@@ -5,7 +5,7 @@
 
 	import type { AppViewerContext, EditorBreakpoint } from '../types'
 
-	import { onMount, createEventDispatcher, getContext } from 'svelte'
+	import { onMount, createEventDispatcher, getContext, untrack } from 'svelte'
 
 	import type { FilledItem } from '../svelte-grid/types'
 	import { getColumn, throttle } from '../svelte-grid/utils/other'
@@ -62,7 +62,7 @@
 
 	let xPerPx = $state(0)
 
-	let yPerPx = rowHeight
+	let yPerPx = untrack(() => rowHeight)
 
 	let containerHeight = $derived(getContainerHeight(items, yPerPx, getComputedCols))
 
@@ -81,7 +81,7 @@
 			yPerPx,
 			width: containerWidth
 		})
-	}, throttleUpdate)
+	}, untrack(() => throttleUpdate))
 
 	onMount(() => {
 		setTimeout(() => {
diff --git a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
index c7466b055b..ef74c562a0 100644
--- a/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/SubGridEditor.svelte
@@ -3,7 +3,7 @@
 
 	import { push } from '$lib/history.svelte'
 	import { classNames } from '$lib/utils'
-	import { getContext, onDestroy } from 'svelte'
+	import { getContext, onDestroy, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { gridColumns, isFixed, toggleFixed } from '../gridUtils'
 	import Grid from '../svelte-grid/Grid.svelte'
@@ -68,7 +68,7 @@
 	let isActive = $state(false)
 	let sber = editorContext?.componentActive?.subscribe((x) => (isActive = x))
 
-	let everVisible = $state(visible)
+	let everVisible = $state(untrack(() => visible))
 
 	$effect.pre(() => {
 		visible && !everVisible && (everVisible = true)
diff --git a/frontend/src/lib/components/apps/editor/component/Component.svelte b/frontend/src/lib/components/apps/editor/component/Component.svelte
index 714cd7c74f..e45c358eb5 100644
--- a/frontend/src/lib/components/apps/editor/component/Component.svelte
+++ b/frontend/src/lib/components/apps/editor/component/Component.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import ComponentInner from './ComponentInner.svelte'
 	import ComponentRendered from './ComponentRendered.svelte'
 	import type { AppComponent } from './components'
@@ -31,7 +31,7 @@
 		onlock = undefined,
 		onfillHeight = undefined
 	}: Props = $props()
-	let everRender = $state(render)
+	let everRender = $state(untrack(() => render))
 
 	$effect(() => {
 		render && !everRender && (everRender = true)
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
index 547c79fdd2..f6bf391132 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
@@ -2,7 +2,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { Pen } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 
 	interface Props {
 		kind: string
@@ -15,7 +15,7 @@
 
 	let { kind, row, onupdate = undefined }: Props = $props()
 
-	let editedName = $state(row.name)
+	let editedName = $state(untrack(() => row).name)
 
 	const dispatch = createEventDispatcher()
 	function onkeydown(e) {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index f9cc59e6ef..7791d6fd99 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -30,7 +30,7 @@
 		componentProperty = undefined
 	}: Props = $props()
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
-	const styleStore = createStyleStore(properties)
+	const styleStore = createStyleStore(untrack(() => properties))
 	setContext(STYLE_STORE_KEY, styleStore)
 
 	let multiValues: Record<number, string[]> = $state(initiateMultiValues())
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
index a592b45f77..38c468a5c7 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleProperty.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { Button, ClearableInput, Menu } from '../../../common'
 	import Popover from '../../../Popover.svelte'
 	import ColorInput from '../settingsPanel/inputEditor/ColorInput.svelte'
@@ -21,8 +21,8 @@
 
 	let { prop, value = $bindable(), inline = false, onChange }: Props = $props()
 	const styleStore = getContext<StyleStore>(STYLE_STORE_KEY)
-	const key = prop.key
-	const type = prop.value?.['type']
+	const key = untrack(() => prop).key
+	const type = untrack(() => prop).value?.['type']
 	let unit: (typeof StylePropertyUnits)[number] = $state(StylePropertyUnits[0])
 	let internalValue: number | string = $derived(
 		getInteralValue(value, prop.value as StylePropertyValue)
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
index 815d6634f8..39ca4d1aa0 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
@@ -4,7 +4,7 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import { Pen } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
 
 	interface Props {
@@ -17,7 +17,7 @@
 
 	let { row, onreloadThemes = undefined }: Props = $props()
 
-	let editedName = $state(row.name)
+	let editedName = $state(untrack(() => row).name)
 
 	const dispatch = createEventDispatcher()
 </script>
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
index bd0ae669fc..d2d4682674 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/ComponentOutput.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { components } from '../component'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppViewerContext, GridItem } from '../../types'
 	import ComponentOutputViewer from './ComponentOutputViewer.svelte'
 	import { connectOutput } from '../appUtils'
@@ -27,7 +27,7 @@
 		renderRec = true
 	}: Props = $props()
 	const { connectingInput } = getContext<AppViewerContext>('AppViewerContext')
-	const name = getComponentNameById(gridItem.id)
+	const name = getComponentNameById(untrack(() => gridItem).id)
 
 	let nameOverrides = $derived(
 		gridItem?.data?.type === 'decisiontreecomponent'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
index e347ab3f98..e04ecacf31 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentControl.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { ExternalLink } from 'lucide-svelte'
 	import PanelSection from './common/PanelSection.svelte'
 	import type { components } from '../component'
@@ -13,7 +14,7 @@
 
 	let { type }: Props = $props()
 
-	const componentControls = getComponentControl(type)
+	const componentControls = getComponentControl(untrack(() => type))
 
 	let collapsed: boolean = $state(true)
 </script>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ContextVariables.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ContextVariables.svelte
index 6fb7b7be9b..be54285d84 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ContextVariables.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ContextVariables.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Popover from '$lib/components/Popover.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import type { AppViewerContext, GridItem } from '../../types'
 	import { dfs } from '../appUtils'
 	import { findGridItem } from '../appUtilsCore'
@@ -34,16 +34,16 @@
 		}
 	}
 
-	if (tables.includes(type)) {
+	if (tables.includes(untrack(() => type))) {
 		addContextVariable(
 			'row',
 			'The current row of a table. Row is an object with keys index and value.'
 		)
-	} else if (type === 's3fileinputcomponent' || type === 'fileinputcomponent') {
+	} else if (untrack(() => type) === 's3fileinputcomponent' || untrack(() => type) === 'fileinputcomponent') {
 		addContextVariable('file', 'The current file being processed.')
-	} else if (type === 'containercomponent') {
+	} else if (untrack(() => type) === 'containercomponent') {
 		addContextVariable('group', 'The group name of the container.')
-	} else if (type === 'listcomponent') {
+	} else if (untrack(() => type) === 'listcomponent') {
 		addContextVariable(
 			'iter',
 			'The current iteration of the list. Iter is an object with keys index and value.'
@@ -77,7 +77,7 @@
 		processParents(allParents)
 	}
 
-	findParentsContextVariables(id)
+	findParentsContextVariables(untrack(() => id))
 
 	function addParentContextVariable(parent: GridItem | undefined) {
 		if (parent?.data?.type === 'containercomponent') {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
index cf08b3997b..4fa88a021b 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/common/PanelSection.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { classNames } from '$lib/utils'
 	import { ChevronDown, ChevronRight } from 'lucide-svelte'
 	import Tooltip from '../../../../Tooltip.svelte'
@@ -49,7 +50,7 @@
 		}
 	}
 
-	let collapsed = $state(initiallyCollapsed)
+	let collapsed = $state(untrack(() => initiallyCollapsed))
 </script>
 
 <div
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index 6add591d51..b18d210ac9 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -6,7 +6,7 @@
 	import type { InlineScript, Runnable, StaticAppInput } from '$lib/components/apps/inputType'
 	import WorkspaceScriptList from './WorkspaceScriptList.svelte'
 	import WorkspaceFlowList from './WorkspaceFlowList.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import type { Schema } from '$lib/common'
 	import { schemaToInputsSpec } from '$lib/components/apps/utils'
 	import { defaultIfEmptyString, emptySchema } from '$lib/utils'
@@ -36,7 +36,7 @@
 	// const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
 
 	let tab: TabType = $state(
-		onlyFlow
+		untrack(() => onlyFlow)
 			? 'workspaceflows'
 			: unusedInlineScripts?.length > 0
 				? 'inlinescripts'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
index ca4b624d14..3dd36df780 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { fly } from 'svelte/transition'
 	import { secondaryMenuLeft, secondaryMenuRight } from './'
 	import CloseButton from '$lib/components/common/CloseButton.svelte'
@@ -11,7 +12,7 @@
 
 	let { right }: Props = $props()
 
-	let secondaryMenu = right ? secondaryMenuRight : secondaryMenuLeft
+	let secondaryMenu = untrack(() => right) ? secondaryMenuRight : secondaryMenuLeft
 	let width: number | undefined = $state()
 </script>
 
diff --git a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
index 4ffb2414ee..fd61edce4f 100644
--- a/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/Grid.svelte
@@ -16,7 +16,7 @@
 
 	import { getContainerHeight } from './utils/container'
 	import { moveItem, getItemById, specifyUndefinedColumns } from './utils/item'
-	import { onMount, getContext } from 'svelte'
+	import { onMount, getContext, untrack } from 'svelte'
 	import { getColumn, throttle } from './utils/other'
 	import MoveResize from './MoveResize.svelte'
 	import type { FilledItem } from './types'
@@ -97,7 +97,7 @@
 	let container = $state()
 
 	let xPerPx = $state(0)
-	let yPerPx = rowHeight
+	let yPerPx = untrack(() => rowHeight)
 
 	const onResizeThrottled = throttle(() => {
 		if (!getComputedCols) return
@@ -108,7 +108,7 @@
 			yPerPx,
 			width: containerWidth
 		})
-	}, throttleUpdate)
+	}, untrack(() => throttleUpdate))
 
 	let mounted = $state(false)
 
@@ -261,7 +261,7 @@
 		}
 	}
 
-	const throttleMatrix = throttle(updateMatrix, throttleResize)
+	const throttleMatrix = throttle(updateMatrix, untrack(() => throttleResize))
 
 	//let hiddenComponents = writable({})
 
diff --git a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
index 033a1a016c..d138023eed 100644
--- a/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
+++ b/frontend/src/lib/components/apps/svelte-grid/MoveResize.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext, onMount } from 'svelte'
+	import { getContext, onMount, untrack } from 'svelte'
 	import type { AppEditorContext, AppViewerContext } from '../types'
 	import { writable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
@@ -85,7 +85,7 @@
 
 	const scale = ctx ? ctx.scale : writable(100)
 
-	const divId = `wm-component-${id}`
+	const divId = `wm-component-${untrack(() => id)}`
 	let shadowElement: HTMLElement | undefined = $state()
 
 	let active = $state(false)
@@ -99,7 +99,7 @@
 
 	let cordDiff = $state({ x: 0, y: 0 })
 
-	let newSize = $state({ width, height })
+	let newSize = $state({ width: untrack(() => width), height: untrack(() => height) })
 	let trans = $state(false)
 
 	let anima
diff --git a/frontend/src/lib/components/assets/AssetButtons.svelte b/frontend/src/lib/components/assets/AssetButtons.svelte
index 5a432e5f2c..9afaf6b9d6 100644
--- a/frontend/src/lib/components/assets/AssetButtons.svelte
+++ b/frontend/src/lib/components/assets/AssetButtons.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { AlertTriangle, Edit2 } from 'lucide-svelte'
 	import { Button } from '../common'
 	import ExploreAssetButton, { assetCanBeExplored } from '../ExploreAssetButton.svelte'
@@ -27,7 +28,7 @@
 		onClick
 	}: Props = $props()
 
-	let truncatedPath = asset.path.split('?table=')[0]
+	let truncatedPath = untrack(() => asset).path.split('?table=')[0]
 	let resourceDataCacheValue = $derived(resourceDataCache[truncatedPath])
 </script>
 
diff --git a/frontend/src/lib/components/common/FileProgressBar.svelte b/frontend/src/lib/components/common/FileProgressBar.svelte
index e1f1c87839..734ec215d7 100644
--- a/frontend/src/lib/components/common/FileProgressBar.svelte
+++ b/frontend/src/lib/components/common/FileProgressBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 
 	import { tweened } from 'svelte/motion'
 	import { cubicOut } from 'svelte/easing'
@@ -17,7 +18,7 @@
 		children
 	}: Props = $props();
 
-	const tweenedProgress = tweened(progress, {
+	const tweenedProgress = tweened(untrack(() => progress), {
 		duration: 400,
 		easing: cubicOut
 	})
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 05ea546e09..c7cc8f72ec 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { ButtonType } from './model'
 	import { twMerge } from 'tailwind-merge'
 	import Dropdown from '$lib/components/DropdownV2.svelte'
@@ -315,14 +315,14 @@
 		elements: { trigger, content },
 		states: { open },
 		options: { openDelay }
-	} = tooltipPopover
+	} = untrack(() => tooltipPopover)
 		? createTooltip({
 				positioning: {
-					placement: tooltipPopover?.placement
+					placement: untrack(() => tooltipPopover)?.placement
 				},
-				closeDelay: tooltipPopover?.closeDelay,
+				closeDelay: untrack(() => tooltipPopover)?.closeDelay,
 				group: true,
-				portal: tooltipPopover?.portal
+				portal: untrack(() => tooltipPopover)?.portal
 			})
 		: {
 				elements: { trigger: undefined, content: undefined },
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
index 62a20c0423..c177b1c7cb 100644
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ConfirmationModal from './ConfirmationModal.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import DataTable from '$lib/components/table/DataTable.svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -28,7 +28,7 @@
 		onconfirmed = undefined
 	}: Props = $props()
 
-	let selectedTriggers: Trigger[] = $state(draftTriggers)
+	let selectedTriggers: Trigger[] = $state(untrack(() => draftTriggers))
 
 	const dispatch = createEventDispatcher<{
 		canceled: void
diff --git a/frontend/src/lib/components/common/drawer/Disposable.svelte b/frontend/src/lib/components/common/drawer/Disposable.svelte
index 05e469cfaf..68f079dac0 100644
--- a/frontend/src/lib/components/common/drawer/Disposable.svelte
+++ b/frontend/src/lib/components/common/drawer/Disposable.svelte
@@ -26,7 +26,7 @@
 		onClose
 	}: Props = $props()
 
-	let offset = $state(initialOffset)
+	let offset = $state(untrack(() => initialOffset))
 	let zIndex = $derived(zIndexes.disposables + offset)
 
 	export function toggleDrawer() {
@@ -87,8 +87,8 @@
 	}
 
 	if (open) {
-		openedDrawers.val.push(id)
-		offset = initialOffset + openedDrawers.val.length
+		openedDrawers.val.push(untrack(() => id))
+		offset = untrack(() => initialOffset) + openedDrawers.val.length
 	}
 
 	let wasEverOpen = false
diff --git a/frontend/src/lib/components/common/kbd/Kbd.svelte b/frontend/src/lib/components/common/kbd/Kbd.svelte
index 002f4e8c16..5cfed5353c 100644
--- a/frontend/src/lib/components/common/kbd/Kbd.svelte
+++ b/frontend/src/lib/components/common/kbd/Kbd.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { isMac } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 
@@ -18,11 +19,11 @@
 		children
 	}: Props = $props()
 
-	if (small) {
+	if (untrack(() => small)) {
 		kbdClass = twMerge(
 			kbdClass,
 			'!text-[10px]  px-1',
-			isModifier && isMac() ? '!text-lg ' : 'text-xs',
+			untrack(() => isModifier) && isMac() ? '!text-lg ' : 'text-xs',
 			'leading-none'
 		)
 	} else {
diff --git a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
index a380a5d753..f60dbf9341 100644
--- a/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
+++ b/frontend/src/lib/components/common/languageIcons/LanguageIcon.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import type { SupportedLanguage } from '$lib/common'
 	import MySQLIcon from '$lib/components/icons/Mysql.svelte'
 	import PostgresIcon from '$lib/components/icons/PostgresIcon.svelte'
@@ -107,7 +108,7 @@
 		// for related places search: ADD_NEW_LANG
 	}
 
-	let subIconScale = width === 30 ? 0.6 : 0.8
+	let subIconScale = untrack(() => width) === 30 ? 0.6 : 0.8
 
 	const SvelteComponent = $derived(langToComponent[lang])
 </script>
diff --git a/frontend/src/lib/components/common/popup/PopupV2.svelte b/frontend/src/lib/components/common/popup/PopupV2.svelte
index 55bc4312b5..42257ff53b 100644
--- a/frontend/src/lib/components/common/popup/PopupV2.svelte
+++ b/frontend/src/lib/components/common/popup/PopupV2.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import Portal from '$lib/components/Portal.svelte'
 	import { clickOutside } from '$lib/utils'
 	import { createFloatingActions, type ComputeConfig } from 'svelte-floating-ui'
@@ -28,7 +29,7 @@
 
 	// export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
 	// export let floatingClasses: string = ''
-	const [floatingRef, floatingContent] = createFloatingActions(floatingConfig)
+	const [floatingRef, floatingContent] = createFloatingActions(untrack(() => floatingConfig))
 
 	function close() {
 		open = false
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 1478625179..dd827d54c9 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import Star from '$lib/components/Star.svelte'
 	import RowIcon from './RowIcon.svelte'
 	import { BellOff } from 'lucide-svelte'
@@ -56,7 +57,7 @@
 		onSelect = () => {}
 	}: Props = $props()
 
-	let displayPath: string = (depth === 0 ? path : path?.split('/')?.slice(-1)?.[0]) ?? ''
+	let displayPath: string = (untrack(() => depth) === 0 ? untrack(() => path) : untrack(() => path)?.split('/')?.slice(-1)?.[0]) ?? ''
 </script>
 
 {#if href}
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index b93975c02b..1db130d16c 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
+	import { setContext, untrack } from 'svelte'
 	import { writable } from 'svelte/store'
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
@@ -55,7 +55,7 @@
 	setContext<TabsContext>('Tabs', {
 		selected: selectedStore,
 		update,
-		hashNavigation
+		hashNavigation: untrack(() => hashNavigation)
 	})
 
 	// Sync external prop changes to store (single direction: prop → store)
diff --git a/frontend/src/lib/components/common/tabs/TabsV2.svelte b/frontend/src/lib/components/common/tabs/TabsV2.svelte
index 6fd5dbc6e6..08616af90c 100644
--- a/frontend/src/lib/components/common/tabs/TabsV2.svelte
+++ b/frontend/src/lib/components/common/tabs/TabsV2.svelte
@@ -41,7 +41,7 @@
 			selected = value
 			onTabClick?.(value)
 		},
-		hashNavigation
+		hashNavigation: untrack(() => hashNavigation)
 	})
 
 	function updateSelected() {
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
index 4c542083a9..9d6c1d2bc1 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import Popover from '$lib/components/Popover.svelte'
 	import DropdownV2 from '$lib/components/DropdownV2.svelte'
@@ -32,7 +33,7 @@
 		class: className = ''
 	}: Props = $props()
 
-	let items = togglableItems.map((i) => ({
+	let items = untrack(() => togglableItems).map((i) => ({
 		displayName: i.label,
 		action: () => (selected = i.value),
 		tooltip: i.tooltip
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index 502b38e848..77877c085b 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -4,7 +4,7 @@
 	import { Check, Loader2, Wand2 } from 'lucide-svelte'
 	import { metadataCompletionEnabled } from '$lib/stores'
 	import { copilotInfo } from '$lib/aiStore'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { twMerge } from 'tailwind-merge'
 	import autosize from '$lib/autosize'
@@ -143,7 +143,7 @@ Generate a tool name for the script below:
 	let genHeight = $state(0)
 
 	let focused = $state(false)
-	let config: PromptConfig = promptConfigs[promptConfigName]
+	let config: PromptConfig = promptConfigs[untrack(() => promptConfigName)]
 
 	async function generateContent(automatic = false) {
 		abortController = new AbortController()
@@ -187,10 +187,10 @@ Generate a tool name for the script below:
 	if (
 		$copilotInfo.enabled &&
 		$metadataCompletionEnabled &&
-		generateOnAppear &&
+		untrack(() => generateOnAppear) &&
 		!content &&
-		code &&
-		!isInitialCode(code)
+		untrack(() => code) &&
+		!isInitialCode(untrack(() => code)!)
 	) {
 		setTimeout(() => {
 			el?.focus()
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index ae91817868..b496dbb6c8 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -11,7 +11,7 @@
 	import type { Snippet } from 'svelte'
 	import Portal from '$lib/components/Portal.svelte'
 	import { zIndexes } from '$lib/zIndexes'
-	import { tick } from 'svelte'
+	import { tick, untrack } from 'svelte'
 
 	interface Props {
 		availableContext: ContextElement[]
@@ -77,7 +77,7 @@
 
 	let contextTextareaComponent: ContextTextarea | undefined = $state()
 	let instructionsTextareaComponent: HTMLTextAreaElement | undefined = $state()
-	let instructions = $state(initialInstructions)
+	let instructions = $state(untrack(() => initialInstructions))
 
 	// App mode @ mention state
 	let showAppContextTooltip = $state(false)
diff --git a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
index 186414c8dd..78de5bb5b5 100644
--- a/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextElementBadge.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { Popover } from '$lib/components/meltComponents'
 	import { Loader2, X } from 'lucide-svelte'
 	import { ContextIconMap, type ContextElement } from './context'
@@ -21,7 +22,7 @@
 	}
 
 	let { contextElement, deletable = false, onDelete }: Props = $props()
-	const icon = ContextIconMap[contextElement.type]
+	const icon = ContextIconMap[untrack(() => contextElement).type]
 	let showDelete = $state(false)
 
 	const isDeletable = $derived(deletable && contextElement.deletable !== false)
diff --git a/frontend/src/lib/components/flows/FlowModuleIcon.svelte b/frontend/src/lib/components/flows/FlowModuleIcon.svelte
index 97a7fd4340..9da2812ec0 100644
--- a/frontend/src/lib/components/flows/FlowModuleIcon.svelte
+++ b/frontend/src/lib/components/flows/FlowModuleIcon.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
 	import type { FlowModule } from '$lib/gen'
@@ -15,8 +16,8 @@
 	let { module, size = 16, width, height }: Props = $props()
 
 	// Use width/height if provided, otherwise use size for both
-	const iconWidth = width || size
-	const iconHeight = height || size
+	const iconWidth = untrack(() => width) || untrack(() => size)
+	const iconHeight = untrack(() => height) || untrack(() => size)
 </script>
 
 {#if module?.value?.type === 'aiagent'}
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index 89ac17e36b..1c95a3b2a5 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -59,8 +59,11 @@
 		const key = getCachedKey(path)
 		latestHash = cachedValues[key]?.latestHash
 	}
-	if (flowModuleValue?.type === 'script' && flowModuleValue.path) {
-		getCachedValues(flowModuleValue.path)
+	{
+		const _fmv = untrack(() => flowModuleValue)
+		if (_fmv?.type === 'script' && _fmv.path) {
+			getCachedValues(_fmv.path)
+		}
 	}
 
 	async function loadLatestHash(value: PathScript) {
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 94700cc02b..0ba38e056e 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -3,7 +3,7 @@
 	import ToggleHubWorkspace from '$lib/components/ToggleHubWorkspace.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import FlowScriptPicker from '../pickers/FlowScriptPicker.svelte'
 	import PickHubScript from '../pickers/PickHubScript.svelte'
 	import WorkspaceScriptPicker from '../pickers/WorkspaceScriptPicker.svelte'
@@ -42,7 +42,7 @@
 
 	const dispatch = createEventDispatcher()
 	let kind: 'script' | 'failure' | 'approval' | 'trigger' = $state(
-		failureModule
+		untrack(() => failureModule)
 			? 'failure'
 			: summary == 'Trigger'
 				? 'trigger'
diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index dec078bd0d..1172d37193 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -151,7 +151,7 @@
 		shellcheck: false
 	})
 
-	let selected = $state(preprocessorModule ? 'test' : 'inputs')
+	let selected = $state(untrack(() => preprocessorModule) ? 'test' : 'inputs')
 	let advancedSelected = $state('retries')
 	let advancedRuntimeSelected = $state('concurrency')
 	let s3Kind = $state('s3_client')
@@ -236,7 +236,7 @@
 	}
 
 	let forceReload = $state(0)
-	let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50)
+	let editorPanelSize = $state(untrack(() => noEditor) ? 0 : flowModule.value.type == 'script' ? 30 : 50)
 	let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize))
 	let stepHistoryLoader = getStepHistoryLoaderContext()
 
diff --git a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
index cde3371f38..7b63910010 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleScript.svelte
@@ -64,7 +64,7 @@
 		notFound = cachedValues[key]?.notFound ?? false
 	}
 
-	getCachedValues(path, hash)
+	getCachedValues(untrack(() => path), untrack(() => hash))
 
 	async function loadPreviousCode(previousHash: string) {
 		try {
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 73d3ac1327..4b70c392fc 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -20,7 +20,7 @@
 		Timer,
 		Maximize2
 	} from 'lucide-svelte'
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import type { FlowEditorContext } from '../types'
 	import { twMerge } from 'tailwind-merge'
@@ -160,7 +160,7 @@
 
 	let editId = $state(false)
 
-	let newId: string = $state(id ?? '')
+	let newId: string = $state(untrack(() => id) ?? '')
 
 	let moduleTest: ModuleTest | undefined = $state(undefined)
 	let testIsLoading = $state(false)
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index bf82f3e83a..4b17dbb389 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import StepGenQuick from '$lib/components/copilot/StepGenQuick.svelte'
 	import FlowInputsQuick from '../content/FlowInputsQuick.svelte'
 	import type { FlowBuilderWhitelabelCustomUi } from '$lib/components/custom_ui'
@@ -48,7 +48,7 @@
 
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
 	let selectedKind: 'script' | 'trigger' | 'preprocessor' | 'approval' | 'flow' | 'failure' =
-		$state(kind)
+		$state(untrack(() => kind))
 	let preFilter: 'all' | 'workspace' | 'hub' = $state('all')
 	let loading = $state(false)
 	let small = $derived(kind === 'preprocessor' || kind === 'failure')
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index c3b764f67a..6bc5919158 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -249,7 +249,7 @@
 	let flowContainer: HTMLDivElement | undefined = $state(undefined)
 
 	// Selection manager - create one if not provided
-	let selectionManager = selectionManagerProp || new SelectionManager()
+	let selectionManager = untrack(() => selectionManagerProp) || new SelectionManager()
 	const selectedId = $derived(selectionManager.getSelectedId())
 
 	const noteEditorContext = getNoteEditorContext()
@@ -271,8 +271,8 @@
 	}
 
 	// Calculate note gap based on current nodes and notes
-	const topPadding = editMode ? 100 : 24
-	const yOffset = calculateNoteGap(notes) + topPadding
+	const topPadding = untrack(() => editMode) ? 100 : 24
+	const yOffset = calculateNoteGap(untrack(() => notes)) + topPadding
 
 	setGraphContext({
 		selectionManager: selectionManager,
@@ -284,8 +284,8 @@
 		diffManager
 	} as any)
 
-	if (triggerContext && allowSimplifiedPoll) {
-		if (isSimplifiable(modules)) {
+	if (triggerContext && untrack(() => allowSimplifiedPoll)) {
+		if (isSimplifiable(untrack(() => modules))) {
 			triggerContext?.simplifiedPoll?.set(true)
 		}
 		triggerContext?.simplifiedPoll.subscribe((value) => {
diff --git a/frontend/src/lib/components/graph/SelectionTool.svelte b/frontend/src/lib/components/graph/SelectionTool.svelte
index e7af55bc24..dd5033bf55 100644
--- a/frontend/src/lib/components/graph/SelectionTool.svelte
+++ b/frontend/src/lib/components/graph/SelectionTool.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { useOnSelectionChange, useStore, type Node } from '@xyflow/svelte'
 	import type { SelectionManager } from './selectionUtils.svelte'
 	interface Props {
@@ -8,7 +9,7 @@
 
 	let { selectionManager, clearGraphSelection }: Props = $props()
 
-	selectionManager.setClearGraphSelection(clearGraphSelection)
+	untrack(() => selectionManager).setClearGraphSelection(untrack(() => clearGraphSelection))
 
 	// Get store to access selectionRect
 	const store = useStore()
diff --git a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
index 55cac523e3..58e9fe05cb 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/NoteNode.svelte
@@ -16,7 +16,7 @@
 	import { getNoteEditorContext } from '../../noteEditor.svelte'
 	import { getGraphContext } from '../../graphContext'
 	import { clickOutside } from '$lib/utils'
-	import { tick } from 'svelte'
+	import { tick, untrack } from 'svelte'
 
 	interface Props {
 		data: {
@@ -52,7 +52,7 @@
 	let textareaElement: HTMLTextAreaElement | undefined = $state(undefined)
 	let editMode = $state(false)
 	let hovering = $state(false)
-	let textContent = $state(data.text ?? '')
+	let textContent = $state(untrack(() => data).text ?? '')
 	let containerHeight = $state(0)
 
 	// Use data props directly - they're kept in sync by NoteManager observer
diff --git a/frontend/src/lib/components/meltComponents/Menu.svelte b/frontend/src/lib/components/meltComponents/Menu.svelte
index 4633512bb7..4324219ecf 100644
--- a/frontend/src/lib/components/meltComponents/Menu.svelte
+++ b/frontend/src/lib/components/meltComponents/Menu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { melt, createSync } from '@melt-ui/svelte'
 	import type { MenubarBuilders } from '@melt-ui/svelte'
 	import type { Placement } from '@floating-ui/core'
@@ -49,9 +50,9 @@
 	}: Props = $props()
 
 	// Use the passed createMenu function
-	const menu = createMenu({
+	const menu = untrack(() => createMenu)({
 		positioning: {
-			placement,
+			placement: untrack(() => placement),
 			fitViewport: true,
 			strategy: 'fixed'
 		},
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index b5b5e178f2..8d6624d9f9 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -17,7 +17,7 @@
 	import DocLink from '$lib/components/apps/editor/settingsPanel/DocLink.svelte'
 	import type { FloatingConfig } from '@melt-ui/svelte/internal/actions/floating'
 	import type { EscapeBehaviorType } from '@melt-ui/svelte/internal/actions'
-	import { onDestroy } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 	import type { Snippet } from 'svelte'
 
 	interface Props {
@@ -126,10 +126,10 @@
 		ids: { content: popoverId }
 	} = createPopover({
 		forceVisible: true,
-		portal: portal,
-		disableFocusTrap,
-		escapeBehavior,
-		openFocus,
+		portal: untrack(() => portal),
+		disableFocusTrap: untrack(() => disableFocusTrap),
+		escapeBehavior: untrack(() => escapeBehavior),
+		openFocus: untrack(() => openFocus),
 		onOpenChange: ({ curr, next }) => {
 			if (curr != next) {
 				onOpenChangeProp?.(next)
@@ -156,8 +156,8 @@
 		}
 	})
 
-	$positioning = floatingConfig ?? {
-		placement,
+	$positioning = untrack(() => floatingConfig) ?? {
+		placement: untrack(() => placement),
 		strategy: 'absolute',
 		gutter: 8,
 		overflowPadding: 16,
@@ -210,7 +210,7 @@
 
 	let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce(
 		() => openOnHover && close(),
-		debounceDelay
+		untrack(() => debounceDelay)
 	)
 
 	const handleClick = (event: MouseEvent) => {
diff --git a/frontend/src/lib/components/meltComponents/SideBarTab.svelte b/frontend/src/lib/components/meltComponents/SideBarTab.svelte
index de6bceb0c1..b654422c01 100644
--- a/frontend/src/lib/components/meltComponents/SideBarTab.svelte
+++ b/frontend/src/lib/components/meltComponents/SideBarTab.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	interface Props {
@@ -33,7 +34,7 @@
 		open = false
 	}
 
-	let hasCloseButton = close_button
+	let hasCloseButton = untrack(() => close_button)
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
index 335e097e15..54e8047352 100644
--- a/frontend/src/lib/components/meltComponents/Tooltip.svelte
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import type { Placement } from '@floating-ui/core'
 	import { InfoIcon } from 'lucide-svelte'
 	import { zIndexes } from '$lib/zIndexes'
@@ -61,12 +62,12 @@
 		states: { open }
 	} = createTooltip({
 		positioning: {
-			placement
+			placement: untrack(() => placement)
 		},
-		openDelay,
-		closeDelay: disappearTimeoutProp ?? closeDelayProp,
+		openDelay: untrack(() => openDelay),
+		closeDelay: untrack(() => disappearTimeoutProp) ?? untrack(() => closeDelayProp),
 		group: true,
-		portal
+		portal: untrack(() => portal)
 	})
 </script>
 
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index f6a8e5f92d..cdd2abbb0d 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -51,7 +51,7 @@
 		onselect = undefined
 	}: Props = $props()
 
-	let jsonFiltered = $state(json)
+	let jsonFiltered = $state(untrack(() => json))
 
 	let search = $state('')
 	let searchOpen = $state(false)
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
index d3cc8d737a..d82a3fb281 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ObjectViewer from './ObjectViewer.svelte'
-	import { onMount } from 'svelte'
+	import { onMount, untrack } from 'svelte'
 
 	interface Props {
 		json: any
@@ -35,18 +35,18 @@
 	}: Props = $props()
 
 	const viewerProps = {
-		json,
-		level,
-		currentPath,
-		pureViewer,
-		collapsed,
-		rawKey,
-		topBrackets,
-		allowCopy,
-		collapseLevel,
-		prefix,
-		expandedEvenOnLevel0,
-		connecting
+		json: untrack(() => json),
+		level: untrack(() => level),
+		currentPath: untrack(() => currentPath),
+		pureViewer: untrack(() => pureViewer),
+		collapsed: untrack(() => collapsed),
+		rawKey: untrack(() => rawKey),
+		topBrackets: untrack(() => topBrackets),
+		allowCopy: untrack(() => allowCopy),
+		collapseLevel: untrack(() => collapseLevel),
+		prefix: untrack(() => prefix),
+		expandedEvenOnLevel0: untrack(() => expandedEvenOnLevel0),
+		connecting: untrack(() => connecting)
 	}
 
 	onMount(() => {
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index d9d5651e0d..212884d834 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -67,9 +67,9 @@
 		$pickablePropertiesFiltered = pickableProperties
 	})
 
-	let flowInputsFiltered: any = $state(pickableProperties.flow_input)
-	let resultByIdFiltered: any = $state(pickableProperties.priorIds)
-	let flowEnvFiltered: any = $state(pickableProperties.flow_env)
+	let flowInputsFiltered: any = $state(untrack(() => pickableProperties).flow_input)
+	let resultByIdFiltered: any = $state(untrack(() => pickableProperties).priorIds)
+	let flowEnvFiltered: any = $state(untrack(() => pickableProperties).flow_env)
 
 	let timeout: number | undefined
 	function onSearch(search: string) {
diff --git a/frontend/src/lib/components/raw_apps/FileTreeNode.svelte b/frontend/src/lib/components/raw_apps/FileTreeNode.svelte
index c9be2662e9..9819ed8796 100644
--- a/frontend/src/lib/components/raw_apps/FileTreeNode.svelte
+++ b/frontend/src/lib/components/raw_apps/FileTreeNode.svelte
@@ -27,7 +27,7 @@
 	import HtmlIcon from '../icons/HtmlIcon.svelte'
 	import MarkdownIcon from '../icons/MarkdownIcon.svelte'
 	import YamlIcon from '../icons/YamlIcon.svelte'
-	import { tick } from 'svelte'
+	import { tick, untrack } from 'svelte'
 
 	interface TreeNode {
 		name: string
@@ -68,7 +68,7 @@
 
 	let userExpanded = $state<boolean | null>(null) // null = not set by user
 	let isHovered = $state(false)
-	let editValue = $state(node.name)
+	let editValue = $state(untrack(() => node).name)
 	let textInputElement: TextInput | undefined = $state()
 	let dropdownOpen = $state(false)
 
diff --git a/frontend/src/lib/components/raw_apps/RunnableRow.svelte b/frontend/src/lib/components/raw_apps/RunnableRow.svelte
index 0b901b365b..0ed67aab22 100644
--- a/frontend/src/lib/components/raw_apps/RunnableRow.svelte
+++ b/frontend/src/lib/components/raw_apps/RunnableRow.svelte
@@ -5,7 +5,7 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { Runnable } from '../apps/inputType'
 	import TextInput from '../text_input/TextInput.svelte'
-	import { tick } from 'svelte'
+	import { tick, untrack } from 'svelte'
 
 	interface Props {
 		id: string
@@ -32,7 +32,7 @@
 	}: Props = $props()
 
 	let dropdownOpen = $state(false)
-	let editValue = $state(id)
+	let editValue = $state(untrack(() => id))
 	let textInputElement: TextInput | undefined = $state()
 
 	function finishEdit() {
diff --git a/frontend/src/lib/components/schema/EditableSchemaSdkWrapper.svelte b/frontend/src/lib/components/schema/EditableSchemaSdkWrapper.svelte
index 124779635e..e546b7b30f 100644
--- a/frontend/src/lib/components/schema/EditableSchemaSdkWrapper.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaSdkWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { readFieldsRecursively } from '$lib/utils'
 	import { deepEqual } from 'fast-equals'
 	import type { EditableSchemaWrapperProps } from './editable_schema_wrapper'
@@ -10,7 +11,7 @@
 		...props
 	}: EditableSchemaWrapperProps & { onSchemaChange?: (schema: any) => void } = $props()
 
-	let schema = $state(oldSchema)
+	let schema = $state(untrack(() => oldSchema))
 
 	let lastSchema = $state<any>(undefined)
 	$effect(() => {
diff --git a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
index 0786ce5698..aba77e09fc 100644
--- a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
@@ -3,7 +3,7 @@
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import { JobService } from '$lib/gen/index.js'
 	import { workspaceStore } from '$lib/stores'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import { ExternalLink } from 'lucide-svelte'
 	import { base } from '$lib/base'
 	import { Cell, Row } from '$lib/components/table'
@@ -27,7 +27,7 @@
 	}: Props = $props()
 
 	let loadingArgs = $state(true)
-	loadArgsFromRunningJob(job.id)
+	loadArgsFromRunningJob(untrack(() => job).id)
 
 	async function loadArgsFromRunningJob(id: string | undefined) {
 		if (!id) return
diff --git a/frontend/src/lib/components/schema/SchemaPickerRow.svelte b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
index 3d17d75ade..b1cf7fb08a 100644
--- a/frontend/src/lib/components/schema/SchemaPickerRow.svelte
+++ b/frontend/src/lib/components/schema/SchemaPickerRow.svelte
@@ -42,11 +42,11 @@
 	let popoverFullyOpened = $state(false)
 	let popoverOpenTimeout: ReturnType<typeof setTimeout> | null = null
 
-	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
-	const isTooBig = payloadData === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview
+	const payloadTooBigForPreview = untrack(() => payloadData) != 'WINDMILL_TOO_BIG' && isObjectTooBig(untrack(() => payloadData))
+	const isTooBig = untrack(() => payloadData) === 'WINDMILL_TOO_BIG' || payloadTooBigForPreview
 
 	const floatingConfig: FloatingConfig = {
-		placement,
+		placement: untrack(() => placement),
 		strategy: 'fixed',
 		offset: { mainAxis: 4 },
 		gutter: 0,
diff --git a/frontend/src/lib/components/search/QuickMenuItem.svelte b/frontend/src/lib/components/search/QuickMenuItem.svelte
index d6c1a85695..e3cffcf534 100644
--- a/frontend/src/lib/components/search/QuickMenuItem.svelte
+++ b/frontend/src/lib/components/search/QuickMenuItem.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isMac } from '$lib/utils'
-	import { onDestroy, onMount } from 'svelte'
+	import { onDestroy, onMount, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
 	// const dispatch = createEventDispatcher()
@@ -56,7 +56,7 @@
 		onkeyboardSpecificSelect
 	}: Props = $props()
 
-	if (small) {
+	if (untrack(() => small)) {
 		kbdClass = twMerge(
 			kbdClass,
 			'!text-[10px]  px-1',
diff --git a/frontend/src/lib/components/select/GenericDropdown.svelte b/frontend/src/lib/components/select/GenericDropdown.svelte
index d4da4c959e..9771e8f823 100644
--- a/frontend/src/lib/components/select/GenericDropdown.svelte
+++ b/frontend/src/lib/components/select/GenericDropdown.svelte
@@ -68,7 +68,7 @@
 	// We do not use Svelte transitions because they can not animate in the opposite direction
 	// when the dropdown is opens above the input
 	// Also CSS transitions are smoother because they do not rely on JS / animation frames
-	let uiState = $state({ domExists: open, visible: open, timeout: null as number | null })
+	let uiState = $state({ domExists: untrack(() => open), visible: untrack(() => open), timeout: null as number | null })
 	let initial = true
 	watch(
 		() => open && !disabled,
diff --git a/frontend/src/lib/components/settings/CreateToken.svelte b/frontend/src/lib/components/settings/CreateToken.svelte
index 30292d61ab..e09fd2e00d 100644
--- a/frontend/src/lib/components/settings/CreateToken.svelte
+++ b/frontend/src/lib/components/settings/CreateToken.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { userWorkspaces, workspaceStore, type UserWorkspace } from '$lib/stores'
 	import { Badge, Button } from '../common'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
@@ -49,7 +50,7 @@
 	let newToken = $state<string | undefined>(undefined)
 	let newMcpToken = $state<string | undefined>(undefined)
 	let newTokenExpiration = $state<number | undefined>(undefined)
-	let newTokenWorkspace = $state<string | undefined>(defaultNewTokenWorkspace)
+	let newTokenWorkspace = $state<string | undefined>(untrack(() => defaultNewTokenWorkspace))
 	let newMcpApps = $state<string[]>([])
 	let mcpCreationMode = $state(false)
 	let newMcpScope = $state('favorites')
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 4cee530e28..32d0d8aa30 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { displayDate } from '$lib/utils'
 	import { UserService, type TruncatedToken } from '$lib/gen'
@@ -29,7 +30,7 @@
 	// --- Local State ---
 	let tokens = $state<TruncatedToken[]>([])
 	let tokenPage = $state(1)
-	let newTokenLabel = $state<string | undefined>(defaultNewTokenLabel)
+	let newTokenLabel = $state<string | undefined>(untrack(() => defaultNewTokenLabel))
 
 	$effect(() => {
 		listTokens()
diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte
index b513f86a8c..89c523eccb 100644
--- a/frontend/src/lib/components/sidebar/MenuButton.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButton.svelte
@@ -12,7 +12,7 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import Popover from '../Popover.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import SideBarNotification from './SideBarNotification.svelte'
 	import { conditionalMelt } from '$lib/utils'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
@@ -65,7 +65,7 @@
 	let dispatch = createEventDispatcher()
 
 	// Dynamic component based on whether href is provided
-	const Element = href ? 'a' : 'button'
+	const Element = untrack(() => href) ? 'a' : 'button'
 </script>
 
 {#if !disabled}
diff --git a/frontend/src/lib/components/splitPanes/AnimatedPane.svelte b/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
index 1d62dc3c7a..07e13a20e0 100644
--- a/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
+++ b/frontend/src/lib/components/splitPanes/AnimatedPane.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type ComponentProps } from 'svelte'
+	import { type ComponentProps, untrack } from 'svelte'
 	import { Pane } from 'svelte-splitpanes'
 	import { cubicOut } from 'svelte/easing'
 
@@ -18,7 +18,7 @@
 		size: number
 	} = $props()
 
-	let t = $state(opened ? 1 : 0)
+	let t = $state(untrack(() => opened) ? 1 : 0)
 	let computedSize = $derived((opened ? easing(t) : 1 - easing(1 - t)) * size)
 
 	let lastTValue = 0
diff --git a/frontend/src/lib/components/table/Cell.svelte b/frontend/src/lib/components/table/Cell.svelte
index bd2ca0b697..c14e9e02c6 100644
--- a/frontend/src/lib/components/table/Cell.svelte
+++ b/frontend/src/lib/components/table/Cell.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte'
+	import { getContext, untrack } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { DatatableContext } from './DataTable.svelte'
 
@@ -29,7 +29,7 @@
 		...rest
 	}: Props = $props()
 
-	let Tag = head ? 'th' : 'td'
+	let Tag = untrack(() => head) ? 'th' : 'td'
 
 	const { size } = getContext<DatatableContext>('datatable')
 </script>
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 0451cb815b..3865d2f3f4 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -74,7 +74,7 @@
 		onnext = undefined
 	}: Props = $props()
 	setContext<DatatableContext>('datatable', {
-		size
+		size: untrack(() => size)
 	})
 
 	$effect(() => {
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
index e5e4888f78..4c2330819d 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorInner.svelte
@@ -83,7 +83,7 @@
 	let hasChanged = $derived(!deepEqual(getEmailTriggerConfig(), originalConfig ?? {}))
 	const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin)
 	const emailConfig = $derived.by(getEmailTriggerConfig)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 	const saveDisabled = $derived(
 		drawerLoading ||
 			!can_write ||
diff --git a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
index 6e30476154..3035a1c780 100644
--- a/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/gcp/GcpTriggerEditorInner.svelte
@@ -105,7 +105,7 @@
 	const saveDisabled = $derived(
 		pathError != '' || emptyString(script_path) || !isValid || !can_write || !hasChanged
 	)
-	const captureConfig = $derived.by(isEditor ? getGcpCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getGcpCaptureConfig : () => ({}))
 
 	export async function openEdit(
 		ePath: string,
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
index 111fd96050..8f949bb22e 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorInner.svelte
@@ -133,7 +133,7 @@
 
 	const isAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin)
 	const routeConfig = $derived.by(getRouteConfig)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 	const saveDisabled = $derived(
 		drawerLoading ||
 			!can_write ||
diff --git a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
index 0e5a2c2d68..1e418f4980 100644
--- a/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/kafka/KafkaTriggerEditorInner.svelte
@@ -112,7 +112,7 @@
 			!hasChanged
 	)
 	const kafkaConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 
 	$effect(() => {
 		is_flow = itemKind === 'flow'
diff --git a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
index fc34f68293..9d73481da4 100644
--- a/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/mqtt/MqttTriggerEditorInner.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { Alert, Button } from '$lib/components/common'
 	import Drawer from '$lib/components/common/drawer/Drawer.svelte'
 	import DrawerContent from '$lib/components/common/drawer/DrawerContent.svelte'
@@ -108,7 +109,7 @@
 
 	let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}))
 	const mqttConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 	const saveDisabled = $derived(
 		pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged
 	)
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
index 47c93aeda9..4494b697ba 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggerEditorInner.svelte
@@ -104,7 +104,7 @@
 		pathError != '' || emptyString(script_path) || !can_write || !isValid || !hasChanged
 	)
 	const natsConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 
 	$effect(() => {
 		is_flow = itemKind === 'flow'
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index d31fc80948..86b28fc1df 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -156,7 +156,7 @@
 	)
 
 	const postgresConfig = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 
 	const saveDisabled = $derived(
 		pathError !== '' ||
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
index 96fe5db2e0..7583dadea4 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketTriggerEditorInner.svelte
@@ -117,7 +117,7 @@
 
 	let hasChanged = $derived(!deepEqual(getSaveCfg(), originalConfig ?? {}))
 	const websocketCfg = $derived.by(getSaveCfg)
-	const captureConfig = $derived.by(isEditor ? getCaptureConfig : () => ({}))
+	const captureConfig = $derived.by(untrack(() => isEditor) ? getCaptureConfig : () => ({}))
 	const saveDisabled = $derived.by(() => {
 		const invalidInitialMessages = initial_messages.some((v) => {
 			if ('runnable_result' in v) {
diff --git a/frontend/src/lib/components/tutorials/TutorialWrapper.svelte b/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
index 94b55ff88b..5c0b448276 100644
--- a/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { getTutorialIndex } from '$lib/tutorials/config'
 
 	interface Props {
@@ -16,7 +17,7 @@
 		onreload = undefined }: Props = $props()
 
 	let instance: any = $state(undefined)
-	const index = getTutorialIndex(id)
+	const index = getTutorialIndex(untrack(() => id))
 
 	$effect(() => {
 		if (instance) {
diff --git a/frontend/src/lib/components/workspace/WorkspaceCard.svelte b/frontend/src/lib/components/workspace/WorkspaceCard.svelte
index 794df5ae84..c4ac967b50 100644
--- a/frontend/src/lib/components/workspace/WorkspaceCard.svelte
+++ b/frontend/src/lib/components/workspace/WorkspaceCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte'
 	import { GitFork, ChevronUp, ArchiveRestore } from 'lucide-svelte'
 	import { slide } from 'svelte/transition'
 	import { Badge, Button } from '$lib/components/common'
@@ -47,7 +48,7 @@
 		onKeyboardNavigation
 	}: Props = $props()
 
-	const paddingLeft = depth * 24
+	const paddingLeft = untrack(() => depth) * 24
 	const isSelected = $derived(selectedWorkspaceId === workspace.id)
 
 	// Helper functions
diff --git a/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte b/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
index 351d630210..42581fb3e4 100644
--- a/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
+++ b/frontend/src/lib/components/workspaceSettings/RulesetEditor.svelte
@@ -27,21 +27,21 @@
 	const hasRule = (ruleKind: string) => rule?.rules?.includes(ruleKind as any) ?? false
 
 	// Editable state
-	let name = $state(rule?.name ?? '')
+	let name = $state(untrack(() => rule)?.name ?? '')
 	let disableDirectDeployment = $state(hasRule('DisableDirectDeployment'))
 	let disableFork = $state(hasRule('DisableWorkspaceForking'))
-	let selectedGroups = $state<string[]>(rule?.bypass_groups?.map((g) => g.replace('g/', '')) ?? [])
-	let selectedUsers = $state<string[]>(rule?.bypass_users?.map((u) => u.replace('u/', '')) ?? [])
+	let selectedGroups = $state<string[]>(untrack(() => rule)?.bypass_groups?.map((g) => g.replace('g/', '')) ?? [])
+	let selectedUsers = $state<string[]>(untrack(() => rule)?.bypass_users?.map((u) => u.replace('u/', '')) ?? [])
 
 	// Initial state for unsaved changes tracking
-	let initialName = $state(rule?.name ?? '')
+	let initialName = $state(untrack(() => rule)?.name ?? '')
 	let initialDisableDirectDeployment = $state(hasRule('DisableDirectDeployment'))
 	let initialDisableFork = $state(hasRule('DisableWorkspaceForking'))
 	let initialSelectedGroups = $state<string[]>(
-		rule?.bypass_groups ? rule.bypass_groups.map((g) => g.replace('g/', '')) : []
+		untrack(() => rule)?.bypass_groups ? untrack(() => rule)!.bypass_groups.map((g) => g.replace('g/', '')) : []
 	)
 	let initialSelectedUsers = $state<string[]>(
-		rule?.bypass_users ? rule.bypass_users.map((u) => u.replace('u/', '')) : []
+		untrack(() => rule)?.bypass_users ? untrack(() => rule)!.bypass_users.map((u) => u.replace('u/', '')) : []
 	)
 
 	// Available options