From 3b8d937dd2788dfa97ea497bdaeca2bf36bb7a14 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sat, 23 May 2026 09:26:04 +0000
Subject: [PATCH] feat: job-id link + dispatch popover above script log/result

---
 .../src/lib/components/ScriptEditor.svelte    | 25 ++++++
 .../assets/AssetGraph/AssetRunsPanel.svelte   |  7 ++
 .../runs/DispatchEventsButton.svelte          | 48 ++++++++++
 .../runs/DispatchEventsPanel.svelte           | 84 +----------------
 .../runs/DispatchEventsTable.svelte           | 90 +++++++++++++++++++
 5 files changed, 172 insertions(+), 82 deletions(-)
 create mode 100644 frontend/src/lib/components/runs/DispatchEventsButton.svelte
 create mode 100644 frontend/src/lib/components/runs/DispatchEventsTable.svelte

diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 88436327d4..c1cb4c7255 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -83,6 +83,7 @@
 	import { setContext } from 'svelte'
 	import HideButton from './apps/editor/settingsPanel/HideButton.svelte'
 	import { base } from '$lib/base'
+	import DispatchEventsButton from '$lib/components/runs/DispatchEventsButton.svelte'
 	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/script/core'
 	import { getStringError } from './copilot/chat/utils'
 	import type { ScriptOptions } from './copilot/chat/ContextManager.svelte'
@@ -1810,6 +1811,30 @@
 						     it visually pinned to the top edge without
 						     relying on cross-browser overflow behaviour. -->
 							<div class="relative h-full pt-9 flex flex-col">
+								{#if testJob?.id && testJob.type === 'CompletedJob' && $workspaceStore}
+									<!-- Right-side affordances when we're displaying a *completed*
+									     job (either the user just ran a test, or the on-mount
+									     last-run loader populated the panel). The job-id link
+									     opens the full run page in a new tab; the dispatch
+									     button mounts a popover that shows what downstream
+									     jobs this run triggered (rendered only when the run
+									     actually dispatched anything). -->
+									<div class="absolute top-1 right-2 z-10 flex items-center gap-2">
+										<a
+											class="text-3xs text-blue-600 hover:underline font-mono"
+											href={`${base}/run/${testJob.id}?workspace=${$workspaceStore}`}
+											target="_blank"
+											rel="noopener noreferrer"
+											title="Open this run"
+										>
+											{testJob.id.slice(0, 8)}… ↗
+										</a>
+										<DispatchEventsButton
+											workspace={testJob.workspace_id ?? $workspaceStore}
+											jobId={testJob.id}
+										/>
+									</div>
+								{/if}
 								<div class="absolute top-1 left-2 z-10">
 									{#if testIsLoading}
 										<Button on:click={jobLoader?.cancelJob} unifiedSize="sm" btnClasses="shadow-md">
diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetRunsPanel.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetRunsPanel.svelte
index a1a2f0d52d..0d0908cffd 100644
--- a/frontend/src/lib/components/assets/AssetGraph/AssetRunsPanel.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/AssetRunsPanel.svelte
@@ -20,6 +20,7 @@
 	import { Badge } from '$lib/components/common'
 	import { Popover } from '$lib/components/meltComponents'
 	import { twMerge } from 'tailwind-merge'
+	import DispatchEventsButton from '$lib/components/runs/DispatchEventsButton.svelte'
 
 	interface Props {
 		// Producers of this asset. Each contributes its own listExtendedJobs
@@ -288,6 +289,12 @@
 				href={`${base}/run/${selectedJob.id}?workspace=${$workspaceStore}`}
 				target="_blank">Open ↗</a
 			>
+			{#if $workspaceStore}
+				<DispatchEventsButton
+					workspace={selectedJob.workspace_id ?? $workspaceStore}
+					jobId={selectedJob.id}
+				/>
+			{/if}
 		{:else if runnableProducers.length === 0}
 			<span class="text-tertiary">No producer for this asset</span>
 		{:else if loading && jobs.length === 0}
diff --git a/frontend/src/lib/components/runs/DispatchEventsButton.svelte b/frontend/src/lib/components/runs/DispatchEventsButton.svelte
new file mode 100644
index 0000000000..19455e18de
--- /dev/null
+++ b/frontend/src/lib/components/runs/DispatchEventsButton.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { resource } from 'runed'
+	import { JobService } from '$lib/gen'
+	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	import DispatchEventsTable from './DispatchEventsTable.svelte'
+	import { GitFork } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
+
+	// Inline affordance for "this job triggered N other jobs". Renders nothing
+	// when the job didn't dispatch anything so consumers can drop it unconditionally
+	// next to other run-detail UI without worrying about an empty popover.
+	type Props = { workspace: string; jobId: string; class?: string }
+	let { workspace, jobId, class: klass = '' }: Props = $props()
+
+	const events = resource(
+		() => ({ workspace, jobId }),
+		async ({ workspace, jobId }) =>
+			workspace && jobId ? await JobService.listDispatchEvents({ workspace, id: jobId }) : []
+	)
+	const list = $derived(events.current ?? [])
+</script>
+
+{#if list.length > 0}
+	<Popover
+		floatingConfig={{ strategy: 'fixed', placement: 'bottom-end', offset: { mainAxis: 8 } }}
+		contentClasses="max-w-[640px] max-h-[420px] overflow-auto"
+	>
+		{#snippet trigger()}
+			<button
+				type="button"
+				class={twMerge(
+					'inline-flex items-center gap-1 px-2 py-0.5 rounded-sm text-3xs',
+					'bg-surface-secondary hover:bg-surface-hover text-secondary border border-gray-200 dark:border-gray-700',
+					klass
+				)}
+				title="View jobs this run dispatched"
+			>
+				<GitFork size={12} />
+				<span>{list.length} dispatched</span>
+			</button>
+		{/snippet}
+		{#snippet content()}
+			<div class="overflow-hidden">
+				<DispatchEventsTable events={list} {workspace} />
+			</div>
+		{/snippet}
+	</Popover>
+{/if}
diff --git a/frontend/src/lib/components/runs/DispatchEventsPanel.svelte b/frontend/src/lib/components/runs/DispatchEventsPanel.svelte
index e24ee15579..545ff35488 100644
--- a/frontend/src/lib/components/runs/DispatchEventsPanel.svelte
+++ b/frontend/src/lib/components/runs/DispatchEventsPanel.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { resource } from 'runed'
 	import { JobService } from '$lib/gen'
-	import { base } from '$lib/base'
-	import { ExternalLink, Check, Hourglass, MinusCircle } from 'lucide-svelte'
+	import DispatchEventsTable from './DispatchEventsTable.svelte'
 
 	type Props = { workspace: string; jobId: string }
 	let { workspace, jobId }: Props = $props()
@@ -14,92 +13,13 @@
 	)
 
 	const list = $derived(events.current ?? [])
-
-	function reasonLabel(reason: string | undefined): string {
-		switch (reason) {
-			case 'self_loop':
-				return 'subscriber path equals producer path'
-			case 'case3_non_partition_bearing':
-				return 'reference input — only {partition}-bearing edges advance the join'
-			case 'case3_missing_partition':
-				return 'producer ran without a resolved partition'
-			default:
-				return reason ?? ''
-		}
-	}
 </script>
 
 {#if list.length > 0}
 	<div class="mr-2 sm:mr-0 mt-12 mb-6">
 		<h3 class="text-xs font-semibold text-emphasis mb-1">Dispatch</h3>
 		<div class="border rounded-md overflow-hidden">
-			<table class="w-full text-xs">
-				<thead class="bg-surface-secondary text-secondary">
-					<tr>
-						<th class="text-left font-normal px-3 py-2">Outcome</th>
-						<th class="text-left font-normal px-3 py-2">Subscriber</th>
-						<th class="text-left font-normal px-3 py-2">Asset</th>
-						<th class="text-left font-normal px-3 py-2">Detail</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each list as ev (ev.created_at + ev.subscriber_path + ev.asset_path)}
-						<tr class="border-t">
-							<td class="px-3 py-2 align-top whitespace-nowrap">
-								{#if ev.outcome === 'dispatched'}
-									<span class="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
-										<Check size={12} /> dispatched
-									</span>
-								{:else if ev.outcome === 'join_pending'}
-									<span class="inline-flex items-center gap-1 text-yellow-700 dark:text-yellow-400">
-										<Hourglass size={12} /> join pending
-									</span>
-								{:else}
-									<span class="inline-flex items-center gap-1 text-secondary">
-										<MinusCircle size={12} /> skipped
-									</span>
-								{/if}
-							</td>
-							<td class="px-3 py-2 align-top">
-								<span class="font-mono">{ev.subscriber_path}</span>
-							</td>
-							<td class="px-3 py-2 align-top">
-								<span class="font-mono text-secondary">{ev.asset_kind}://{ev.asset_path}</span>
-							</td>
-							<td class="px-3 py-2 align-top">
-								{#if ev.outcome === 'dispatched' && ev.child_job_id}
-									<a
-										class="inline-flex items-center gap-1"
-										href={`${base}/run/${ev.child_job_id}?workspace=${workspace}`}
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										<span class="font-mono">{ev.child_job_id.slice(0, 8)}…</span>
-										<ExternalLink size={12} />
-									</a>
-									{#if ev.partition}
-										<span class="text-secondary">
-											· partition <span class="font-mono">{ev.partition}</span></span
-										>
-									{/if}
-									{#if ev.debounce_s && ev.debounce_s > 0}
-										<span class="text-secondary"> · debounced {ev.debounce_s}s</span>
-									{/if}
-								{:else if ev.outcome === 'join_pending'}
-									<span>{ev.received_inputs ?? 0}/{ev.required_inputs ?? 0} inputs received</span>
-									{#if ev.partition}
-										<span class="text-secondary">
-											for partition <span class="font-mono">{ev.partition}</span></span
-										>
-									{/if}
-								{:else}
-									<span class="text-secondary">{reasonLabel(ev.reason)}</span>
-								{/if}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+			<DispatchEventsTable events={list} {workspace} />
 		</div>
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/runs/DispatchEventsTable.svelte b/frontend/src/lib/components/runs/DispatchEventsTable.svelte
new file mode 100644
index 0000000000..6ed288a6b8
--- /dev/null
+++ b/frontend/src/lib/components/runs/DispatchEventsTable.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { base } from '$lib/base'
+	import type { ListDispatchEventsResponse } from '$lib/gen'
+	import { ExternalLink, Check, Hourglass, MinusCircle } from 'lucide-svelte'
+
+	type Event = ListDispatchEventsResponse[number]
+	type Props = { events: Event[]; workspace: string }
+	let { events, workspace }: Props = $props()
+
+	function reasonLabel(reason: string | undefined): string {
+		switch (reason) {
+			case 'self_loop':
+				return 'subscriber path equals producer path'
+			case 'case3_non_partition_bearing':
+				return 'reference input — only {partition}-bearing edges advance the join'
+			case 'case3_missing_partition':
+				return 'producer ran without a resolved partition'
+			default:
+				return reason ?? ''
+		}
+	}
+</script>
+
+<table class="w-full text-xs">
+	<thead class="bg-surface-secondary text-secondary">
+		<tr>
+			<th class="text-left font-normal px-3 py-2">Outcome</th>
+			<th class="text-left font-normal px-3 py-2">Subscriber</th>
+			<th class="text-left font-normal px-3 py-2">Asset</th>
+			<th class="text-left font-normal px-3 py-2">Detail</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each events as ev (ev.created_at + ev.subscriber_path + ev.asset_path)}
+			<tr class="border-t">
+				<td class="px-3 py-2 align-top whitespace-nowrap">
+					{#if ev.outcome === 'dispatched'}
+						<span class="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
+							<Check size={12} /> dispatched
+						</span>
+					{:else if ev.outcome === 'join_pending'}
+						<span class="inline-flex items-center gap-1 text-yellow-700 dark:text-yellow-400">
+							<Hourglass size={12} /> join pending
+						</span>
+					{:else}
+						<span class="inline-flex items-center gap-1 text-secondary">
+							<MinusCircle size={12} /> skipped
+						</span>
+					{/if}
+				</td>
+				<td class="px-3 py-2 align-top">
+					<span class="font-mono">{ev.subscriber_path}</span>
+				</td>
+				<td class="px-3 py-2 align-top">
+					<span class="font-mono text-secondary">{ev.asset_kind}://{ev.asset_path}</span>
+				</td>
+				<td class="px-3 py-2 align-top">
+					{#if ev.outcome === 'dispatched' && ev.child_job_id}
+						<a
+							class="inline-flex items-center gap-1"
+							href={`${base}/run/${ev.child_job_id}?workspace=${workspace}`}
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							<span class="font-mono">{ev.child_job_id.slice(0, 8)}…</span>
+							<ExternalLink size={12} />
+						</a>
+						{#if ev.partition}
+							<span class="text-secondary">
+								· partition <span class="font-mono">{ev.partition}</span></span
+							>
+						{/if}
+						{#if ev.debounce_s && ev.debounce_s > 0}
+							<span class="text-secondary"> · debounced {ev.debounce_s}s</span>
+						{/if}
+					{:else if ev.outcome === 'join_pending'}
+						<span>{ev.received_inputs ?? 0}/{ev.required_inputs ?? 0} inputs received</span>
+						{#if ev.partition}
+							<span class="text-secondary">
+								for partition <span class="font-mono">{ev.partition}</span></span
+							>
+						{/if}
+					{:else}
+						<span class="text-secondary">{reasonLabel(ev.reason)}</span>
+					{/if}
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>