refactor: add untrack() to fix state_referenced_locally warnings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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 () => {

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} />

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] } },

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))

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) => {

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>

frontend/src/lib/components/DropdownV2.svelte

@@ -80,7 +80,7 @@
 		ids: { menu: dropdownId }
 	} = createDropdownMenu({
 		positioning: {
-			placement
+			placement: untrack(() => placement)
 		},
 		loop: true,
 		onOpenChange: ({ next }) => {

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))

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

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)

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(

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)
 

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)

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) {

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) {

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> = {}
 

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)

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) {

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')

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">

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('')
 

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

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
 	}

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] } },

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(() => {

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)
 

frontend/src/lib/components/ResourceEditor.svelte

@@ -81,7 +81,7 @@
 			.map(([k, _]) => k)
 	}
 
-	if (!newResource) {
+	if (!untrack(() => newResource)) {
 		initEdit()
 	} else if (resource_type) {
 		loadResourceType()

frontend/src/lib/components/ResourcePicker.svelte

@@ -152,7 +152,7 @@
 		loading = false
 	}
 
-	let previousResourceType = resourceType
+	let previousResourceType = untrack(() => resourceType)
 
 	$effect(() => {
 		$workspaceStore && resourceType

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

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

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') {

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)

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> {

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}>

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()

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) {

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()

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>

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) {

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])
 

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

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?.()}

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'
 	})

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(() => {

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()

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)

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({})

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)}

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)}

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

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)}

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}

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

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

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>
 

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)

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())
 	})

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)}

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)
 	})

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)
 

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>

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)

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)

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) {

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',

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()

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)}

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} />

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)}

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) {

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)}

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()
 

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
 	})

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)}

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
 	})

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
 	})

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 = (

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
 	})

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() {

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[],

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) {

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

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

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

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()

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[],

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[],

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) => {

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

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

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)
 		})

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 {

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 {

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)}

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)

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))

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)

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)
 

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))

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()
 		}