fix(frontend): use stable path for capture tables + nits (#5495)

frontend/src/lib/components/FlowPreviewContent.svelte

@@ -52,6 +52,7 @@
 		flowStore,
 		pathStore,
 		initialPathStore,
+		fakeInitialPath,
 		customUi,
 		executionCount
 	} = getContext<FlowEditorContext>('FlowEditorContext')
@@ -373,7 +374,8 @@
 		<div class="border-b">
 			<SchemaFormWithArgPicker
 				bind:this={schemaFormWithArgPicker}
-				runnableId={$initialPathStore == '' ? $pathStore : $initialPathStore}
+				runnableId={$initialPathStore}
+				stablePathForCaptures={$initialPathStore || fakeInitialPath}
 				runnableType={'FlowPath'}
 				previewArgs={$previewArgs}
 				on:openTriggers

frontend/src/lib/components/SchemaFormWithArgPicker.svelte

@@ -12,6 +12,7 @@
 	import RefreshButton from './common/button/RefreshButton.svelte'
 
 	export let runnableId: string = ''
+	export let stablePathForCaptures: string = ''
 	export let runnableType: any
 	export let previewArgs: any
 	export let isValid: boolean = true
@@ -146,7 +147,7 @@
 							</svelete:fragment>
 							<div class="h-full">
 								<CaptureTable
-									path={runnableId}
+									path={stablePathForCaptures}
 									on:select={(e) => {
 										dispatch('select', { payload: e.detail, type: 'captures' })
 									}}

frontend/src/lib/components/ScriptBuilder.svelte

@@ -109,9 +109,9 @@
 	}
 
 	// used for new scripts for captures
-	let fakeInitialPath =
+	const fakeInitialPath =
 		'u/' +
-		($userStore?.username?.includes('@')
+		($userStore!.username?.includes('@')
 			? $userStore!.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
 			: $userStore!.username!) +
 		'/' +
@@ -1625,6 +1625,7 @@
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
 			path={script.path}
+			stablePathForCaptures={initialPath || fakeInitialPath}
 			bind:code={script.content}
 			lang={script.language}
 			{initialArgs}

frontend/src/lib/components/ScriptEditor.svelte

@@ -56,6 +56,8 @@
 	export let selectedTab: 'main' | 'preprocessor' = 'main'
 	export let hasPreprocessor = false
 	export let captureTable: CaptureTable | undefined = undefined
+	export let showCaptures: boolean = true
+	export let stablePathForCaptures: string = ''
 
 	let jobProgressReset: () => void
 
@@ -64,7 +66,7 @@
 		deno: false,
 		go: false,
 		ruff: false,
-		shellcheck: false,
+		shellcheck: false
 	}
 
 	const dispatch = createEventDispatcher()
@@ -495,7 +497,7 @@
 							{editor}
 							{diffEditor}
 							{args}
-							showCaptures={true}
+							{showCaptures}
 							customUi={customUi?.previewPanel}
 						>
 							{#if scriptProgress}
@@ -514,7 +516,7 @@
 										{hasPreprocessor}
 										canHavePreprocessor={lang === 'bun' || lang === 'deno' || lang === 'python3'}
 										isFlow={false}
-										path={path ?? ''}
+										path={stablePathForCaptures}
 										canEdit={true}
 										on:applyArgs
 										on:updateSchema

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte

@@ -27,6 +27,7 @@
 	>
 		{#if inlineScript && inlineScript.language != 'frontend'}
 			<ScriptEditor
+				showCaptures={false}
 				noHistory
 				noSyncFromGithub
 				lang={inlineScript.language}

frontend/src/lib/components/flows/content/FlowInput.svelte

@@ -47,8 +47,14 @@
 	export let noEditor: boolean
 	export let disabled: boolean
 
-	const { flowStore, previewArgs, pathStore, initialPathStore, flowInputEditorState } =
-		getContext<FlowEditorContext>('FlowEditorContext')
+	const {
+		flowStore,
+		previewArgs,
+		pathStore,
+		initialPathStore,
+		fakeInitialPath,
+		flowInputEditorState
+	} = getContext<FlowEditorContext>('FlowEditorContext')
 
 	let addProperty: AddPropertyV2 | undefined = undefined
 	let previewSchema: Record<string, any> | undefined = undefined
@@ -505,7 +511,7 @@
 							</svelete:fragment>
 							<div class="h-full">
 								<CaptureTable
-									path={$pathStore}
+									path={$initialPathStore || fakeInitialPath}
 									on:select={(e) => {
 										updatePreviewSchemaAndArgs(e.detail ?? undefined)
 									}}

frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte

@@ -129,7 +129,6 @@
 	}
 </script>
 
-
 <ConfirmationModal
 	open={unsavedModalOpen}
 	title="Unsaved changes detected"
@@ -198,6 +197,7 @@
 		{#if script}
 			{#key script.hash}
 				<ScriptEditor
+					showCaptures={false}
 					on:saveDraft={() => {
 						saveScript()
 					}}

frontend/src/lib/components/triggers/CaptureButton.svelte

@@ -94,7 +94,7 @@
 		{:else}
 			<Button
 				color="dark"
-				btnClasses="rounded-l-none"
+				btnClasses="!rounded-l-none"
 				wrapperClasses="h-full"
 				nonCaptureEvent
 				title="Test trigger"