diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 2b0c2c0fe5..873e16516d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -86,7 +86,8 @@
 			onDelete()
 		}
 
-		let cId = componentSettings?.item.id
+		const item = componentSettings?.item
+		let cId = item?.id
 		if (cId) {
 			delete $worldStore.outputsById[cId]
 			delete $errorByComponent[cId]
@@ -98,15 +99,15 @@
 
 		$selectedComponent = undefined
 		$focusedGrid = undefined
-		if (componentSettings?.item && !noGrid) {
-			let ids = deleteGridItem($app, componentSettings?.item.data, componentSettings?.parent)
+		if (item && !noGrid) {
+			let ids = deleteGridItem($app, item.data, componentSettings?.parent)
 			for (const key of ids) {
 				delete $runnableComponents[key]
 			}
 		}
 
-		if (componentSettings?.item?.data?.id) {
-			delete $runnableComponents[componentSettings?.item?.data?.id]
+		if (item?.data?.id) {
+			delete $runnableComponents[item?.data?.id]
 		}
 		$app = $app
 		$runnableComponents = $runnableComponents
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
index 2ac167c0fb..7bc4978ce5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
@@ -1,20 +1,24 @@
 <script lang="ts">
-	import { createEventDispatcher, getContext } from 'svelte'
+	import { createEventDispatcher, getContext, untrack } from 'svelte'
 	import type { Output } from '../../rx'
 	import type { AppViewerContext } from '../../types'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { Plus } from 'lucide-svelte'
 	import { isObject } from '$lib/utils'
 
-	export let columns: string[] = []
-	export let id: string | undefined
+	interface Props {
+		columns?: string[]
+		id: string | undefined
+	}
 
-	let remainingColumns: string[] = []
+	let { columns = [], id }: Props = $props()
+
+	let remainingColumns: string[] = $state([])
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 	const dispatch = createEventDispatcher()
 
-	let result = []
+	let result = $state([])
 
 	function subscribeToAllOutputs(observableOutputs: Record<string, Output<any>> | undefined) {
 		if (observableOutputs) {
@@ -39,12 +43,19 @@
 				return acc
 			}, new Set<string>())
 
-			remainingColumns = Array.from(allKeysSet).filter((x: string) => !columns?.includes(x))
+			remainingColumns = Array.from(allKeysSet).filter(
+				(x: string) => !columns?.includes(x) && x !== '__index'
+			)
 		}
 	}
 
-	$: id && subscribeToAllOutputs($worldStore?.outputsById?.[id])
-	$: updateRemainingColumns(result, columns)
+	$effect(() => {
+		id && untrack(() => subscribeToAllOutputs($worldStore?.outputsById?.[id]))
+	})
+	$effect(() => {
+		;[result, columns]
+		untrack(() => updateRemainingColumns(result, columns))
+	})
 </script>
 
 {#if remainingColumns.length > 0}