windmill-components 1.655.2 → 1.665.0

package/package/components/DeployWorkspace.svelte

@@ -6,11 +6,11 @@ import { getAllModules } from './flows/flowExplorer';
 import Button from './common/button/Button.svelte';
 import Tooltip from './Tooltip.svelte';
 import Alert from './common/alert/Alert.svelte';
-import { DiffIcon, Loader2 } from 'lucide-svelte';
+import { DiffIcon, FileJson, Loader2 } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import DiffDrawer from './DiffDrawer.svelte';
 import { getTriggerDependency } from '../utils_deployable';
-import { checkItemExists, deployItem, getItemValue, getOnBehalfOfEmail } from '../utils_workspace_deploy';
+import { checkItemExists, deployItem, getItemValue, getOnBehalfOf } from '../utils_workspace_deploy';
 import { getAllGridItems } from './apps/editor/appUtils';
 import { isRunnableByPath } from './apps/inputType';
 import WorkspaceDeployLayout from './WorkspaceDeployLayout.svelte';
@@ -30,20 +30,25 @@ let sourceOnBehalfOfInfo = $state({});
 // Target workspace on_behalf_of emails (keyed by kind:path)
 let targetOnBehalfOfInfo = $state({});
 let onBehalfOfChoice = $state({});
-let customOnBehalfOfEmails = $state({});
+let customOnBehalfOf = $state({});
 let canPreserveOnBehalfOf = $state(false);
 // Check if an item needs on_behalf_of selection
 function itemNeedsOnBehalfOfSelection(statusPath, kind) {
     return needsOnBehalfOfSelection(kind, sourceOnBehalfOfInfo[statusPath]);
 }
-// Get the email to use for deployment based on user's choice
-function getOnBehalfOfEmailForDeploy(statusPath) {
+/**
+ * Get the on_behalf_of value for deployment based on user's choice.
+ * Returns an email for flows/scripts/apps, or permissioned_as (u/username, g/group) for triggers/schedules.
+ */
+function getOnBehalfOfForDeploy(statusPath, kind) {
     const choice = onBehalfOfChoice[statusPath];
     if (choice === 'target')
         return targetOnBehalfOfInfo[statusPath];
-    if (choice === 'custom')
-        return customOnBehalfOfEmails[statusPath];
-    // 'me' or undefined = don't pass, backend will use deploying user's email
+    if (choice === 'custom') {
+        const details = customOnBehalfOf[statusPath];
+        return kind === 'trigger' ? details?.permissionedAs : details?.email;
+    }
+    // 'me' or undefined = don't pass, backend will use deploying user's identity
     return undefined;
 }
 async function reload(path) {
@@ -51,9 +56,7 @@ async function reload(path) {
         if (!$superadmin) {
             const targetUser = await UserService.whoami({ workspace: workspaceToDeployTo });
             canPreserveOnBehalfOf =
-                targetUser.is_admin ||
-                    targetUser.groups?.includes('wm_deployers') ||
-                    false;
+                targetUser.is_admin || targetUser.groups?.includes('wm_deployers') || false;
         }
         else {
             canPreserveOnBehalfOf = true;
@@ -93,13 +96,13 @@ async function reload(path) {
     for (const dep of sortedSet.filter((d) => ['flow', 'script', 'app', 'trigger'].includes(d.kind))) {
         const key = computeStatusPath(dep.kind, dep.path);
         try {
-            sourceOnBehalfOfInfo[key] = await getOnBehalfOfEmail(dep.kind, dep.path, $workspaceStore, additionalInformation);
+            sourceOnBehalfOfInfo[key] = await getOnBehalfOf(dep.kind, dep.path, $workspaceStore, additionalInformation);
         }
         catch {
             sourceOnBehalfOfInfo[key] = undefined;
         }
         try {
-            targetOnBehalfOfInfo[key] = await getOnBehalfOfEmail(dep.kind, dep.path, workspaceToDeployTo, additionalInformation);
+            targetOnBehalfOfInfo[key] = await getOnBehalfOf(dep.kind, dep.path, workspaceToDeployTo, additionalInformation);
         }
         catch {
             targetOnBehalfOfInfo[key] = undefined;
@@ -236,7 +239,7 @@ async function deploy(kind, path) {
         workspaceFrom: $workspaceStore,
         workspaceTo: workspaceToDeployTo,
         additionalInformation,
-        onBehalfOfEmail: getOnBehalfOfEmailForDeploy(statusPath)
+        onBehalfOf: getOnBehalfOfForDeploy(statusPath, kind)
     });
     if (result.success) {
         allAlreadyExists[statusPath] = true;
@@ -376,24 +379,27 @@ function deselectAll() {
 				{@const statusPath = item.key}
 				{@const exists = allAlreadyExists[statusPath]}
 				{@const status = deploymentStatus[statusPath]}
-				{@const targetEmail = targetOnBehalfOfInfo[statusPath]}
+				{@const targetValue = targetOnBehalfOfInfo[statusPath]}
 
 				<!-- On-behalf-of selector -->
 				{#if itemNeedsOnBehalfOfSelection(statusPath, item.kind)}
 					<OnBehalfOfSelector
 						targetWorkspace={workspaceToDeployTo!}
-						{targetEmail}
+						{targetValue}
 						selected={onBehalfOfChoice[statusPath]}
-						onSelect={(choice, email) => {
+						onSelect={(choice, details) => {
 							onBehalfOfChoice[statusPath] = choice
-							if (email) customOnBehalfOfEmails[statusPath] = email
+							if (details) customOnBehalfOf[statusPath] = details
 						}}
 						kind={item.kind}
 						canPreserve={canPreserveOnBehalfOf}
-						customEmail={customOnBehalfOfEmails[statusPath]}
+						customValue={customOnBehalfOf[statusPath]?.permissionedAs}
 					/>
 				{/if}
 
+				{#if item.kind === 'raw_app'}
+					<Badge small icon={{ icon: FileJson }}>Raw</Badge>
+				{/if}
 				{#if exists === false}
 					{#if item.include}
 						<Badge
@@ -452,18 +458,16 @@ function deselectAll() {
 					{#if hasUnselectedOnBehalfOf}
 						<span class="text-xs text-yellow-600">
 							{#if kind === 'trigger'}
-								You must set the "edited by" user for all triggers before deploying
+								You must set the "permissioned as" user for all triggers before deploying
 								<Tooltip class="text-yellow-600">
-									The "edited by" field defines which user's permissions will be applied
-									when the trigger runs. Make sure this is set to an appropriate user
-									before deploying.
+									The "permissioned as" field defines which user's permissions will be applied when
+									the trigger fires. Make sure this is set appropriately before deploying.
 								</Tooltip>
 							{:else}
 								You must set the "on behalf of" user for all items before deploying
 								<Tooltip class="text-yellow-600">
-									The "run on behalf of" field defines which user's permissions will be
-									applied during execution. Make sure this is set to an appropriate user
-									before deploying.
+									The "run on behalf of" field defines which user's permissions will be applied
+									during execution. Make sure this is set to an appropriate user before deploying.
 								</Tooltip>
 							{/if}
 						</span>

package/package/components/Dev.svelte

@@ -21,6 +21,7 @@ import { writable } from 'svelte/store';
 import { initHistory } from '../history.svelte';
 import { SelectionManager } from './graph/selectionUtils.svelte';
 import { NoteEditor, setNoteEditorContext } from './graph/noteEditor.svelte';
+import { GroupEditor, setGroupEditorContext } from './graph/groupEditor.svelte';
 import { dfs } from './flows/dfs';
 import { loadSchemaFromModule } from './flows/flowInfers';
 import { CornerDownLeft, Play } from 'lucide-svelte';
@@ -137,7 +138,7 @@ const el = (event) => {
                 done(x) {
                     loadPastTests();
                 }
-            });
+            }, undefined, currentScript.modules);
         }
         else {
             sendUserToast(`Bundle received ${lastCommandId} was obsolete, ignoring`, true);
@@ -302,7 +303,7 @@ function runTest() {
             }
             else {
                 //@ts-ignore
-                jobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined);
+                jobLoader.runPreview(currentScript.path, currentScript.content, currentScript.language, args, currentScript.tag, useLock ? currentScript.lock : undefined, undefined, undefined, undefined, currentScript.modules);
             }
         }
     }
@@ -454,6 +455,10 @@ const noteEditor = new NoteEditor(flowStore, () => {
     flowModuleSchemaMap?.enableNotes?.();
 });
 setNoteEditorContext(noteEditor);
+// Set up GroupEditor context for group editing capabilities
+const groupEditor = new GroupEditor(flowStore);
+let canCreateGroup = $state({ val: false });
+setGroupEditorContext(groupEditor, canCreateGroup);
 let lastSent = undefined;
 function updateFlow(flow) {
     if (lockChanges) {

package/package/components/Dev.svelte.d.ts

@@ -6,6 +6,9 @@ type LastEditScript = {
     lock?: string;
     isCodebase?: boolean;
     tag?: string;
+    modules?: {
+        [key: string]: import('../gen').ScriptModule;
+    } | null;
 };
 type LastEditFlow = {
     flow: OpenFlow;

package/package/components/Editor.svelte

@@ -5,6 +5,7 @@
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
+import { buildWsUrl } from '../wsUrl';
 import { sendUserToast } from '../toast';
 import { createEventDispatcher, onDestroy, onMount, untrack } from 'svelte';
 // import libStdContent from '../es6.d.ts.txt?raw'
@@ -203,7 +204,9 @@ export function hide() {
     divEl?.classList.add('hidden');
 }
 export function setCode(ncode, noHistory = false) {
-    if (code != ncode) {
+    // Track whether the code actually changed before updating.
+    const changed = code != ncode;
+    if (changed) {
         code = ncode;
     }
     if (noHistory) {
@@ -222,7 +225,13 @@ export function setCode(ncode, noHistory = false) {
             editor.pushUndoStop();
         }
     }
-    // Update lint diagnostics after code change
+    // Dispatch change immediately when code actually changed. This ensures
+    // callers like the Reset button and copilot trigger on:change handlers.
+    // The debounced onDidChangeModelContent handler will no-op since code
+    // will already match by the time it fires.
+    if (changed) {
+        dispatch('change', ncode);
+    }
     updateRawAppLintDiagnostics();
 }
 /** Collect Monaco markers and update the raw app lint store */
@@ -769,7 +778,6 @@ export async function reloadWebsocket() {
             console.error(`connection to ${name} language server failed`);
         }
     }
-    const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
     const hostname = getHostname();
     let encodedImportMap = '';
     if (useWebsockets) {
@@ -794,7 +802,7 @@ export async function reloadWebsocket() {
                 }
             }
             encodedImportMap = 'data:text/plain;base64,' + btoa(JSON.stringify(importMap));
-            await connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/deno`, 'deno', {
+            await connectToLanguageServer(buildWsUrl('/ws/deno'), 'deno', {
                 certificateStores: null,
                 enablePaths: [],
                 config: null,
@@ -832,7 +840,7 @@ export async function reloadWebsocket() {
             });
         }
         else if (lang === 'python') {
-            await connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
+            await connectToLanguageServer(buildWsUrl('/ws/pyright'), 'pyright', {}, (params, token, next) => {
                 if (params.items.find((x) => x.section === 'python')) {
                     return [
                         {
@@ -857,15 +865,15 @@ export async function reloadWebsocket() {
                 }
                 return next(params, token);
             });
-            connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/ruff`, 'ruff', {}, undefined);
+            connectToLanguageServer(buildWsUrl('/ws/ruff'), 'ruff', {}, undefined);
         }
         else if (lang === 'go') {
-            connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/go`, 'go', {
+            connectToLanguageServer(buildWsUrl('/ws/go'), 'go', {
                 'build.allowImplicitNetworkAccess': true
             }, undefined);
         }
         else if (lang === 'shell') {
-            connectToLanguageServer(`${wsProtocol}://${window.location.host}/ws/diagnostic`, 'shellcheck', {
+            connectToLanguageServer(buildWsUrl('/ws/diagnostic'), 'shellcheck', {
                 linters: {
                     shellcheck: {
                         command: 'shellcheck',
@@ -1593,11 +1601,7 @@ let handleSqlTypingInTs = useDebounce(function handleSqlTypingInTs() {
     // Worker async function call freezes if we pass a Proxy, $state.snapshot() is very important here
     updateSqlQueriesInWorker(uri, $state.snapshot(preparedAssetsSqlQueries));
 }, 250);
-watch([
-    () => preparedAssetsSqlQueries,
-    () => lang,
-    () => isTsWorkerInitialized.current
-], () => {
+watch([() => preparedAssetsSqlQueries, () => lang, () => isTsWorkerInitialized.current], () => {
     handleSqlTypingInTs();
 });
 watch([() => customTsTypesData.current], setTypescriptCustomTypes);

package/package/components/EditorBar.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     iconOnly?: boolean;
     validCode?: boolean;
     kind?: 'script' | 'trigger' | 'approval';
-    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
+    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox' | 'wac_python' | 'wac_typescript';
     collabMode?: boolean;
     collabLive?: boolean;
     collabUsers?: {

package/package/components/FilterSearchbar.svelte

@@ -491,7 +491,7 @@ function appendFilterAsText(presetValue) {
 		{#if !currentTag || !schema[currentTag]}
 			{#if presets.length}
 				<div class="text-xs px-2 my-2 font-bold">Presets</div>
-				<div class="mb-3 px-2 flex gap-2 flex-wrap">
+				<div class="mb-3 px-2 flex gap-2 flex-wrap max-h-24 overflow-y-auto">
 					{#each presets as preset}
 						{@render presetTag(preset)}
 					{/each}

package/package/components/FirstStepInputs.svelte

@@ -75,7 +75,6 @@ export function resetSelected(dispatchEvent) {
 		>
 			<FlowModuleSchemaItemViewer
 				onclick={handleClick}
-				deletable={false}
 				id={mod.id}
 				label={mod.summary ||
 					(`path` in mod.value ? mod.value.path : undefined) ||

package/package/components/FlowBuilder.svelte

@@ -19,6 +19,7 @@ import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { SelectionManager } from './graph/selectionUtils.svelte';
 import { NoteEditor } from './graph/noteEditor.svelte';
 import { setNoteEditorContext } from './graph/noteEditor.svelte';
+import { GroupEditor, setGroupEditorContext } from './graph/groupEditor.svelte';
 import { cleanFlow } from './flows/utils.svelte';
 import { Calendar, Save, DiffIcon, HistoryIcon, FileJson, Settings, Undo, Redo, BookOpen, Circle, CheckCircle, RefreshCw, CheckCheck, Disc } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
@@ -524,6 +525,10 @@ const noteEditor = new NoteEditor(untrack(() => flowStore), () => {
     flowEditor?.enableNotes?.();
 });
 setNoteEditorContext(noteEditor);
+// Set up GroupEditor context for group editing capabilities
+const groupEditor = new GroupEditor(flowStore);
+let canCreateGroup = $state({ val: false });
+setGroupEditorContext(groupEditor, canCreateGroup);
 setContext('FlowGraphAssetContext', initFlowGraphAssetsCtx({ getModules: () => flowStore.val.value.modules }));
 // Add triggers context store
 const triggersState = $state(new Triggers([

package/package/components/FlowGraphDiffViewer.svelte

@@ -125,6 +125,7 @@ $effect(() => {
 								<FlowGraphV2
 									bind:this={beforeGraph}
 									modules={beforeFlow.value.modules}
+									groups={beforeFlow.value.groups}
 									failureModule={beforeFlow.value.failure_module}
 									preprocessorModule={beforeFlow.value.preprocessor_module}
 									earlyStop={beforeFlow.value.skip_expr !== undefined}
@@ -156,6 +157,7 @@ $effect(() => {
 									bind:this={afterGraph}
 									diffBeforeFlow={beforeFlow}
 									modules={afterFlow.value.modules}
+									groups={afterFlow.value.groups}
 									failureModule={afterFlow.value.failure_module}
 									preprocessorModule={afterFlow.value.preprocessor_module}
 									earlyStop={afterFlow.value.skip_expr !== undefined}
@@ -186,6 +188,7 @@ $effect(() => {
 					<FlowGraphV2
 						diffBeforeFlow={beforeFlow}
 						modules={afterFlow.value.modules}
+						groups={afterFlow.value.groups}
 						failureModule={afterFlow.value.failure_module}
 						preprocessorModule={afterFlow.value.preprocessor_module}
 						earlyStop={afterFlow.value.skip_expr !== undefined}

package/package/components/FlowGraphViewer.svelte

@@ -4,14 +4,16 @@ import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { dfs } from './flows/dfs';
 import { workspaceStore } from '../stores';
-let { flow, overflowAuto = false, noSide = false, download = false, noGraph = false, triggerNode = false, stepDetail = $bindable(undefined), workspace = $workspaceStore, minHeight = 400, noBorder = false } = $props();
+let { flow, overflowAuto = false, noSide = false, download = false, noGraph = false, triggerNode = false, stepDetail = $bindable(undefined), workspace = $workspaceStore, minHeight = 400, noBorder = false, hideDefaultInputs = false } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
 <div class="grid grid-cols-3 w-full h-full">
 	{#if !noGraph}
 		<div
-			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full max-h-full"
+			class="{noSide || (hideDefaultInputs && stepDetail == undefined)
+				? 'col-span-3'
+				: 'sm:col-span-2 col-span-3'} w-full max-h-full"
 			class:overflow-auto={overflowAuto}
 			class:border={!noBorder}
 		>
@@ -27,6 +29,7 @@ const dispatch = createEventDispatcher();
 				failureModule={flow?.value?.failure_module}
 				preprocessorModule={flow?.value?.preprocessor_module}
 				notes={flow?.value?.notes}
+				groups={flow?.value?.groups}
 				onSelect={(nodeId) => {
 					if (nodeId === 'Trigger') {
 						dispatch('triggerDetail')
@@ -44,14 +47,14 @@ const dispatch = createEventDispatcher();
 			/>
 		</div>
 	{/if}
-	{#if !noSide}
+	{#if !noSide && !(hideDefaultInputs && stepDetail == undefined)}
 		<div
 			class={twMerge(
 				'relative w-full h-full min-h-[150px] max-h-[90vh] border-r border-b border-t p-2 pt-0 overflow-auto hidden sm:flex flex-col gap-4',
 				noGraph ? 'border-0 w-max' : ''
 			)}
 		>
-			<FlowGraphViewerStep schema={flow.schema} {stepDetail} />
+			<FlowGraphViewerStep schema={flow.schema} {stepDetail} {hideDefaultInputs} />
 		</div>
 	{/if}
 </div>

package/package/components/FlowGraphViewer.svelte.d.ts

@@ -16,6 +16,7 @@ interface Props {
     workspace?: string | undefined;
     minHeight?: number;
     noBorder?: boolean;
+    hideDefaultInputs?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/FlowGraphViewerStep.svelte

@@ -15,7 +15,7 @@ import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
 import { Copy, Expand } from 'lucide-svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
-let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined } = $props();
+let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined, hideDefaultInputs = false } = $props();
 let codeViewer = $state();
 </script>
 
@@ -82,10 +82,10 @@ let codeViewer = $state();
 <div class={twMerge('p-2 overflow-y-scroll')}>
 	{#if stepDetail == undefined}
 		<div>
-			<p class="font-medium text-secondary text-center pt-4 pb-8">
+			<p class="text-secondary text-xs italic px-2 pt-2">
 				Click on a step to see its details
 			</p>
-			{#if schema}
+			{#if schema && !hideDefaultInputs}
 				<h3 class="mb-2 font-semibold">Flow Inputs</h3>
 				<SchemaViewer {schema} />
 			{/if}

package/package/components/FlowGraphViewerStep.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     schema?: any | undefined;
     stepDetail?: FlowModule | string | undefined;
     jobScriptHash?: string | undefined;
+    hideDefaultInputs?: boolean;
 }
 declare const FlowGraphViewerStep: import("svelte").Component<Props, {}, "">;
 type FlowGraphViewerStep = ReturnType<typeof FlowGraphViewerStep>;

package/package/components/FlowPreviewContent.svelte

@@ -335,7 +335,8 @@ export function flowHasChanged() {
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
 							size="sm"
 							btnClasses="w-full max-w-lg"
-							on:click={() => recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
+							on:click={() =>
+								recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
 							id="flow-editor-test-flow-drawer"
 							shortCut={{ Icon: CornerDownLeft }}
 						>
@@ -550,6 +551,13 @@ export function flowHasChanged() {
 					onDone={async ({ job: completedJob }) => {
 						isRunning = false
 						$executionCount = $executionCount + 1
+						// Reset 'initial' flags for modules that were part of this flow test,
+						// so OutputPicker no longer shows "Run loaded from history"
+						for (const mod of completedJob.flow_status?.modules ?? []) {
+							if (mod.id) {
+								stepHistoryLoader?.resetInitial(mod.id)
+							}
+						}
 						if (flowRecording.active) {
 							lastRecording = flowRecording.stop()
 							setActiveRecording(undefined)
@@ -566,6 +574,8 @@ export function flowHasChanged() {
 					{render}
 					{customUi}
 					showLogsWithResult
+					notes={flowStore.val.value.notes}
+					groups={flowStore.val.value.groups}
 				/>
 			{:else if loadingHistory}
 				<div class="italic text-primary h-full grow mx-auto flex flex-row items-center gap-2">

package/package/components/FlowStatusViewer.svelte

@@ -2,7 +2,7 @@
 import { setContext, untrack } from 'svelte';
 import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
-let { jobId, initialJob = undefined, workspaceId = undefined, flowState = $bindable({}), selectedJobStep = $bindable(undefined), hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone, showLogsWithResult = false } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowState = $bindable({}), selectedJobStep = $bindable(undefined), hideFlowResult = false, hideTimeline = false, hideDownloadInGraph = false, hideNodeDefinition = false, hideJobId = false, hideDownloadLogs = false, rightColumnSelect = $bindable('timeline'), isOwner = $bindable(false), wideResults = false, localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), job = $bindable(undefined), render = true, suspendStatus = $bindable({ val: {} }), customUi, onStart, onJobsLoaded, onDone, showLogsWithResult = false, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
 let lastJobId = untrack(() => jobId);
 let retryStatus = $state({ val: {} });
 let globalRefreshes = $state({});
@@ -104,5 +104,8 @@ let toolCallIndicesToLoad = $state([]);
 			}
 		}}
 		{showLogsWithResult}
+		{hideFlowResult}
+		notes={notesProp}
+		groups={groupsProp}
 	/>
 {/key}

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FlowState } from './flows/flowState';
 import type { DurationStatus, GraphModuleState } from './graph';
 import { type StateStore } from '../utils';
-import type { CompletedJob, Job } from '../gen';
+import type { CompletedJob, FlowNote, FlowValue, Job } from '../gen';
 interface Props {
     jobId: string;
     initialJob?: Job | undefined;
@@ -37,6 +37,8 @@ interface Props {
         job: CompletedJob;
     }) => void;
     showLogsWithResult?: boolean;
+    notes?: FlowNote[];
+    groups?: FlowValue['groups'];
 }
 declare const FlowStatusViewer: import("svelte").Component<Props, {}, "job" | "isOwner" | "suspendStatus" | "localModuleStates" | "localDurationStatuses" | "flowState" | "rightColumnSelect" | "selectedJobStep">;
 type FlowStatusViewer = ReturnType<typeof FlowStatusViewer>;

package/package/components/FlowStatusViewerInner.svelte

@@ -3,6 +3,7 @@ import { JobService, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import FlowJobResult from './FlowJobResult.svelte';
+import WorkflowTimeline from './WorkflowTimeline.svelte';
 import DisplayResult from './DisplayResult.svelte';
 import { getContext, setContext, tick, untrack } from 'svelte';
 import { onDestroy } from 'svelte';
@@ -36,7 +37,7 @@ import { useThrottle } from 'runed';
 import { Splitpanes, Pane } from 'svelte-splitpanes';
 import { getActiveReplay } from './recording/flowRecording.svelte';
 let { flowState: flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore, showLogsWithResult = false, showJobDetailHeader = false } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, workspace = $workspaceStore, prefix = undefined, topModuleStates = undefined, refreshGlobal, updateGlobalRefresh, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = $bindable({}), localDurationStatuses = $bindable({}), customUi, onResultStreamUpdate = undefined, graphTabOpen, isNodeSelected, loadExtraLogs = undefined, onStart = undefined, onJobsLoaded = undefined, onDone = undefined, toolCallStore, showLogsWithResult = false, showJobDetailHeader = false, hideFlowResult = false, notes: notesProp = undefined, groups: groupsProp = undefined } = $props();
 let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
 // Cache replay check to avoid repeated function calls in the template
 let isReplay = $derived(!!getActiveReplay());
@@ -82,6 +83,19 @@ $effect(() => {
     });
 });
 let jobResults = $state(untrack(() => flowJobIds)?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? []);
+function asWorkflowStatus(x) {
+    if (!x || typeof x !== 'object')
+        return {};
+    const result = {};
+    for (const [k, v] of Object.entries(x)) {
+        if (!k.startsWith('_') || k.startsWith('_step/'))
+            result[k] = v;
+    }
+    return result;
+}
+function getStepResults(x) {
+    return x?._checkpoint?.completed_steps ?? {};
+}
 let retry_selected = $state('');
 let timeout = undefined;
 let expandedSubflows = $state({});
@@ -651,7 +665,8 @@ function onJobsLoadedInner(mod, job, force) {
                 tag: job.tag,
                 started_at,
                 parent_module: mod['parent_module'],
-                script_hash: job.script_hash
+                script_hash: job.script_hash,
+                workflow_as_code_status: job['workflow_as_code_status']
             }, force);
             setDurationStatusByJob(id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
@@ -679,8 +694,8 @@ function onJobsLoadedInner(mod, job, force) {
                 retries: mod?.failed_retries?.length,
                 skipped: mod.skipped,
                 agent_actions: mod.agent_actions,
-                script_hash: job.script_hash
-                // retries: flowStateStore?.raw_flow
+                script_hash: job.script_hash,
+                workflow_as_code_status: job['workflow_as_code_status']
             }, force);
             setDurationStatusByJob(id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
@@ -841,7 +856,7 @@ function allModulesForTimeline(modules, expandedSubflows) {
     });
     function rec(ids, prefix) {
         return ids.concat(ids.flatMap(({ id }) => {
-            let fms = expandedSubflows[id];
+            let fms = expandedSubflows[id]?.modules;
             let oid = id.split(':').pop();
             if (!oid) {
                 return [];
@@ -987,7 +1002,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 					/>
 				</div>
 			{/if}
-		{:else if render}
+		{:else if render && !hideFlowResult}
 			<div class={'flex flex-col w-full'}>
 				{#if showLogsWithResult && job}
 					<!-- Side-by-side result and logs for simple jobs -->
@@ -1537,7 +1552,8 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 									earlyStop={job.raw_flow?.skip_expr !== undefined}
 									cache={job.raw_flow?.cache_ttl !== undefined}
 									modules={job.raw_flow?.modules ?? []}
-									notes={job.raw_flow?.notes ?? []}
+									notes={notesProp ?? job.raw_flow?.notes ?? []}
+									groups={groupsProp ?? job.raw_flow?.groups}
 									failureModule={job.raw_flow?.failure_module}
 									preprocessorModule={job.raw_flow?.preprocessor_module}
 									allowSimplifiedPoll={false}
@@ -1630,7 +1646,9 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 												{#if job.args}
 													<JobArgs
 														id={isReplay ? undefined : job.id}
-														workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+														workspace={isReplay
+															? undefined
+															: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
 														args={job.args}
 													/>
 												{:else}
@@ -1700,11 +1718,28 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 																	<div class="text-xs text-emphasis font-semibold mb-1">Inputs</div>
 																	<JobArgs
 																		id={isReplay ? undefined : node.job_id}
-																		workspace={isReplay ? undefined : (job.workspace_id ?? $workspaceStore ?? 'no_w')}
+																		workspace={isReplay
+																			? undefined
+																			: (job.workspace_id ?? $workspaceStore ?? 'no_w')}
 																		args={node.args}
 																	/>
 																</div>
 															{/if}
+															{#if node.workflow_as_code_status}
+																<div>
+																	<div class="text-xs text-emphasis font-semibold mb-1"
+																		>Workflow timeline</div
+																	>
+																	<WorkflowTimeline
+																		flow_status={asWorkflowStatus(node.workflow_as_code_status)}
+																		flowDone={node.type === 'Success' || node.type === 'Failure'}
+																		stepResults={getStepResults(node.workflow_as_code_status)}
+																		result={node.result}
+																		success={node.type === 'Success'}
+																		jobId={node.job_id}
+																	/>
+																</div>
+															{/if}
 														</div>
 														<FlowJobResult
 															tagLabel={customUi?.tagLabel}
@@ -1752,7 +1787,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 													likely did not run yet</p
 												>
 											{/if}
-										{:else}<p class="p-2 text-primary italic"
+										{:else}<p class="text-secondary text-xs italic"
 												>Select a node to see its details here</p
 											>{/if}
 									</div>
@@ -1768,7 +1803,7 @@ let totalEventsWaiting = $derived(Object.values(suspendStatus?.val ?? {}).reduce
 									{#if node?.job_id}
 										<JobOtelTraces jobId={node.job_id} />
 									{:else}
-										<div class="p-4 text-secondary"
+										<div class="p-4 text-secondary text-xs italic"
 											>Select a node with a job to see HTTP request traces</div
 										>
 									{/if}