From b2c1e3de0a263f606127f0decedb11a2ce0b822b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Thu, 19 Mar 2026 16:54:30 +0000
Subject: [PATCH] fix: resolve blank inline script panel for components with
 underscores in ID (#8457)

* fix: resolve blank inline script panel for components with underscores in ID

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* perf: compute matched grid item once per selection instead of per-item

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../InlineScriptsPanel.svelte                 | 66 ++++++++++++++-----
 1 file changed, 50 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
index 9acb196b46..0e77fd8b8e 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from 'svelte'
-	import type { AppEditorContext, AppViewerContext } from '../../types'
+	import type { AppEditorContext, AppViewerContext, GridItem } from '../../types'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import InlineScriptsPanelList from './InlineScriptsPanelList.svelte'
 	import InlineScriptEditor from './InlineScriptEditor.svelte'
@@ -39,19 +39,53 @@
 		}
 	}
 
-	// let gridItem = $derived(
-	// 	$selectedComponentInEditor && !$selectedComponentInEditor.startsWith(BG_PREFIX)
-	// 		// ? findGridItem($app, $selectedComponentInEditor?.split('_')?.[0])
-	// 		: undefined
-	// )
+	let prefixOrId = $derived.by(() => {
+		const sel = $selectedComponentInEditor
+		if (!sel) return undefined
+		if (sel.startsWith(BG_PREFIX)) return 'bg'
+		return sel.endsWith('_transformer') ? sel.slice(0, -'_transformer'.length) : sel
+	})
+	let id = $derived.by(() => {
+		const sel = $selectedComponentInEditor
+		if (!sel || !sel.startsWith(BG_PREFIX)) return undefined
+		const rest = sel.slice(BG_PREFIX.length)
+		return rest.endsWith('_transformer') ? rest.slice(0, -'_transformer'.length) : rest
+	})
 
-	let [prefixOrId, id] = $derived($selectedComponentInEditor?.split('_') ?? [])
+	function containsAction(gridItem: GridItem, actionId: string): boolean {
+		if (!gridItem?.data) return false
+		const data = gridItem.data
+		if (data.type === 'tablecomponent') {
+			return data.actionButtons?.some((a) => a.id === actionId) ?? false
+		}
+		if (
+			data.type === 'aggridcomponent' ||
+			data.type === 'aggridcomponentee' ||
+			data.type === 'dbexplorercomponent' ||
+			data.type === 'aggridinfinitecomponent' ||
+			data.type === 'aggridinfinitecomponentee'
+		) {
+			return data.actions?.some((a) => a.id === actionId) ?? false
+		}
+		if (data.type === 'menucomponent') {
+			return data.menuItems?.some((a) => a.id === actionId) ?? false
+		}
+		return false
+	}
 
-	// let unusedInlineScript = $derived(
-	// 	$app?.unusedInlineScripts?.findIndex(
-	// 		(k_, index) => `unused-${index}` === $selectedComponentInEditor
-	// 	)
-	// )
+	// Resolve which grid item ID to render — computed once per selection change
+	let matchedGridItemId = $derived.by(() => {
+		if (!prefixOrId || prefixOrId === 'bg' || prefixOrId.startsWith('unused-')) return undefined
+		const allItems: GridItem[] = [
+			...($app?.grid ?? []),
+			...Object.values($app?.subgrids ?? {}).flat()
+		]
+		// Fast path: direct ID match (most common)
+		if (allItems.some((item) => item?.id === prefixOrId)) return prefixOrId
+		// Slow path: check nested actions
+		const parent = allItems.find((item) => containsAction(item, prefixOrId))
+		return parent?.id
+	})
 
 	interface Props {
 		width?: number | undefined
@@ -72,9 +106,9 @@
 			<div class="text-sm text-secondary text-center py-8 px-2">
 				Select a runnable on the left panel
 			</div>
-		{:else if prefixOrId != 'bg' && !prefixOrId.startsWith('unused-')}
+		{:else if prefixOrId != 'bg' && !prefixOrId?.startsWith('unused-')}
 			{#each $app.grid as gridItem, index (gridItem?.id)}
-				{#if gridItem?.id == prefixOrId}
+				{#if gridItem?.id == matchedGridItemId}
 					<InlineScriptsPanelWithTable
 						on:createScriptFromInlineScript={(e) => {
 							createScriptFromInlineScript(
@@ -90,7 +124,7 @@
 			{/each}
 			{#each Object.keys($app.subgrids ?? {}) as subgrid (subgrid)}
 				{#each $app.subgrids?.[subgrid] ?? [] as subgridItem, index (subgridItem?.id)}
-					{#if subgridItem?.id == prefixOrId && $app.subgrids?.[subgrid]}
+					{#if subgridItem?.id == matchedGridItemId && $app.subgrids?.[subgrid]}
 						<InlineScriptsPanelWithTable
 							on:createScriptFromInlineScript={(e) => {
 								createScriptFromInlineScript(
@@ -105,7 +139,7 @@
 					{/if}
 				{/each}
 			{/each}
-		{:else if prefixOrId != 'bg' && prefixOrId.startsWith('unused-')}
+		{:else if prefixOrId != 'bg' && prefixOrId?.startsWith('unused-')}
 			{#each $app.unusedInlineScripts as unusedInlineScript, index}
 				{#if `unused-${index}` == prefixOrId}
 					<InlineScriptEditor