fix(frontend): Fix debug condition + decision tree + add missing date to job preview + prevent header node from being selected in the flow editor (#2912)

frontend/src/lib/components/apps/editor/ComponentHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import type { AppViewerContext } from '../types'
-	import { Anchor, Bug, Cog, Expand, Move, Pen, Plug2 } from 'lucide-svelte'
+	import { Anchor, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { Button, Popup } from '$lib/components/common'
@@ -110,7 +110,7 @@
 				}}
 				on:pointerdown|stopPropagation
 			>
-				<Cog size={14} />
+				<Network size={14} />
 			</button>
 			<DecisionTreeDebug id={component.id} nodes={component.nodes ?? []} />
 		{/if}

frontend/src/lib/components/apps/editor/TabsDebug.svelte

@@ -14,6 +14,7 @@
 	const dispatch = createEventDispatcher()
 
 	let isManuallySelected: boolean = false
+	let selected: number | null = null
 </script>
 
 <button
@@ -28,11 +29,27 @@
 	on:pointerdown|stopPropagation
 >
 	<ButtonDropdown hasPadding={false}>
+		<svelte:fragment slot="buttonReplacement">
+			<div class="px-1">
+				{#if isManuallySelected}
+					<div>
+						{#if selected === tabs.length - 1}
+							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${selected + 1}`}
+						{:else}
+							{`Debugging ${isConditionalDebugMode ? 'condition' : 'tab'} ${(selected ?? 0) + 1}`}
+						{/if}
+					</div>
+				{:else}
+					{isConditionalDebugMode ? `Debug conditions` : `Debug tabs`}
+				{/if}
+			</div>
+		</svelte:fragment>
 		<svelte:fragment slot="items">
 			{#each tabs ?? [] as { }, index}
 				<MenuItem
 					on:click={() => {
 						$componentControl?.[id]?.setTab?.(index)
+						selected = index
 						isManuallySelected = true
 					}}
 				>
@@ -52,6 +69,7 @@
 			<MenuItem
 				on:click={() => {
 					$componentControl?.[id]?.setTab?.(-1)
+					selected = null
 					isManuallySelected = false
 				}}
 			>

frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte

@@ -5,7 +5,6 @@
 	import { twMerge } from 'tailwind-merge'
 	import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte'
 	import type { Writable } from 'svelte/store'
-	import { Badge } from '$lib/components/common'
 	import { X } from 'lucide-svelte'
 	import { getStateColor } from '$lib/components/graph'
 
@@ -46,9 +45,6 @@
 		<div class="ml-2 text-xs font-normal text-primary truncate">
 			{node.label === '' ? `Tab: ${node.id}` : node.label}
 		</div>
-		<Badge color="indigo">
-			{node.id}
-		</Badge>
 	</Button>
 
 	{#if canDelete}

frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -439,6 +439,10 @@
 		}, 10)
 		mounted = true
 	})
+
+	$: if (nodes.length > 0 && !$selectedNodeId) {
+		$selectedNodeId = nodes[0].id
+	}
 </script>
 
 {#if mounted}

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

@@ -69,7 +69,7 @@
 				<Tab value="settings-cache">Cache</Tab>
 
 				<svelte:fragment slot="content">
-					<TabContent value="settings-metadata" class="p-4 h-full">
+					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">
 						<div class="h-full gap-8 flex flex-col">
 							<Label label="Summary">
 								<input

frontend/src/lib/components/graph/FlowGraph.svelte

@@ -388,7 +388,7 @@
 				1000,
 				loopDepth + 1,
 				0,
-				true,
+				false,
 				undefined,
 				undefined,
 				undefined

frontend/src/lib/components/jobs/JobPreview.svelte

@@ -100,7 +100,10 @@
 			border shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
-			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5">
+			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
+				{#if job?.started_at}
+					<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
+				{/if}
 				<Badge>
 					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
 				</Badge>