windmill-components 1.522.0 → 1.531.0

package/package/components/FlowStatusViewerInner.svelte

@@ -4,7 +4,7 @@ import { workspaceStore } from '../stores';
 import { base } from '../base';
 import FlowJobResult from './FlowJobResult.svelte';
 import DisplayResult from './DisplayResult.svelte';
-import { createEventDispatcher, getContext, setContext, tick, untrack } from 'svelte';
+import { getContext, setContext, tick, untrack } from 'svelte';
 import { onDestroy } from 'svelte';
 import { Badge, Button, Skeleton, Tab } from './common';
 import Tabs from './common/tabs/Tabs.svelte';
@@ -16,18 +16,20 @@ import { ChevronDown, Hourglass } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import FlowTimeline from './FlowTimeline.svelte';
 import { dfs } from './flows/dfs';
-import { get, writable } from 'svelte/store';
 import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 import { buildPrefix } from './graph/graphBuilder.svelte';
 import { parseInputArgsAssets } from './assets/lib';
 import FlowPreviewResult from './FlowPreviewResult.svelte';
+import FlowLogViewerWrapper from './FlowLogViewerWrapper.svelte';
 import { createState } from '../svelte5Utils.svelte';
 import JobLoader from './JobLoader.svelte';
-const dispatch = createEventDispatcher();
+import { writable } from 'svelte/store';
+import { AI_TOOL_CALL_PREFIX, AI_TOOL_MESSAGE_PREFIX, getToolCallId } from './graph/renderers/nodes/AIToolNode.svelte';
 let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs, hideJobId } = getContext('FlowStatusViewer');
-let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, globalRefreshes = $bindable({}), render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses, childFlow = false, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = false, workspace = $workspaceStore, prefix = undefined, subflowParentsGlobalModuleStates = [], subflowParentsDurationStatuses = [], isForloopSelected = false, parentRecursiveRefresh = $bindable({}), job = $bindable(undefined), rightColumnSelect = $bindable('timeline'), localModuleStates = writable({}), localDurationStatuses = writable({}), customUi, onResultStreamUpdate = undefined } = $props();
+let { jobId, initialJob = undefined, workspaceId = undefined, flowJobIds = undefined, innerModule = undefined, render = true, isOwner = false, selectedNode = $bindable(undefined), globalModuleStates, globalDurationStatuses = [], globalIterationBounds, updateRecursiveRefreshFn = undefined, isSelectedBranch = true, isSubflow = false, reducedPolling = false, wideResults = false, hideFlowResult = 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 } = $props();
+let getTopModuleStates = $derived(topModuleStates ?? localModuleStates);
 let resultStreams = $state({});
 if (onResultStreamUpdate == undefined) {
     onResultStreamUpdate = ({ jobId, result_stream }) => {
@@ -35,6 +37,11 @@ if (onResultStreamUpdate == undefined) {
     };
 }
 let recursiveRefresh = $state({});
+let updateRecursiveRefreshInner = (childJobId, updateFn) => {
+    if (childJobId) {
+        recursiveRefresh[childJobId] = updateFn;
+    }
+};
 // Add support for the input args assets shown as an asset node
 const _flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let extendedFlowGraphAssetsCtx = $state(createState(clone(_flowGraphAssetsCtx)));
@@ -68,180 +75,179 @@ let timeout = undefined;
 let expandedSubflows = $state({});
 let selectedId = writable(selectedNode);
 function onFlowModuleId() {
-    if (globalRefreshes) {
-        let modId = flowJobIds?.moduleId;
-        if (modId) {
-            globalRefreshes[buildSubflowKey(modId, prefix)] = async (clear, root) => {
-                await refresh(clear, root); // refresh(true, loopJob)
-            };
-        }
+    let modId = flowJobIds?.moduleId;
+    if (modId) {
+        let prefixedId = buildSubflowKey(modId, prefix);
+        updateGlobalRefresh(prefixedId, async (clear, root) => {
+            // console.debug('updateGlobalRefreshInner refresh', prefixedId, clear, root)
+            await refresh(clear, root); // refresh(true, loopJob)
+        });
     }
 }
 function updateModuleStates(moduleState, key, newValue, keepType) {
-    const state = get(moduleState);
     if (newValue.selectedForloop != undefined &&
-        state[key]?.selectedForloop != undefined &&
-        newValue.selectedForloop != state[key].selectedForloop) {
+        moduleState[key]?.selectedForloop != undefined &&
+        newValue.selectedForloop != moduleState[key].selectedForloop) {
+        let newState = { ...moduleState[key] };
         if (newValue.type == 'InProgress' &&
-            state[key]?.type != 'InProgress' &&
-            !(keepType && (state[key]?.type === 'Success' || state[key]?.type === 'Failure'))) {
-            moduleState.update((state) => {
-                state[key].type = 'InProgress';
-                return state;
-            });
+            moduleState[key]?.type != 'InProgress' &&
+            !(keepType &&
+                (moduleState[key]?.type === 'Success' || moduleState[key]?.type === 'Failure'))) {
+            newState.type = 'InProgress';
         }
-        if (state[key]?.job_id != newValue.job_id ||
-            !deepEqual(state[key]?.args, newValue.args) ||
-            !deepEqual(state[key]?.result, newValue.result)) {
-            moduleState.update((state) => {
-                state[key].args = newValue.args;
-                state[key].result = newValue.result;
-                state[key].job_id = newValue.job_id;
-                return state;
-            });
+        else if (['Success', 'Failure'].includes(newValue.type)) {
+            newState.type = newValue.type;
         }
+        if (moduleState[key]?.job_id != newValue.job_id ||
+            !deepEqual(moduleState[key]?.args, newValue.args) ||
+            !deepEqual(moduleState[key]?.result, newValue.result)) {
+            newState.args = newValue.args;
+            newState.result = newValue.result;
+            newState.job_id = newValue.job_id;
+        }
+        moduleState[key] = newState;
         return;
     }
-    if (state[key]?.selectedForLoopSetManually) {
+    if (moduleState[key]?.selectedForLoopSetManually) {
         if (newValue.selectedForloop != undefined &&
-            state[key]?.selectedForloop != newValue.selectedForloop) {
-            return state;
+            moduleState[key]?.selectedForloop != newValue.selectedForloop) {
+            return moduleState;
         }
         else {
             newValue.selectedForLoopSetManually = true;
-            newValue.selectedForloopIndex = state[key]?.selectedForloopIndex;
-            newValue.selectedForloop = state[key]?.selectedForloop;
+            newValue.selectedForloopIndex = moduleState[key]?.selectedForloopIndex;
+            newValue.selectedForloop = moduleState[key]?.selectedForloop;
         }
     }
-    else if (state[key]?.selectedForloopIndex != undefined) {
-        newValue.selectedForloopIndex = state[key]?.selectedForloopIndex;
-        newValue.selectedForloop = state[key]?.selectedForloop;
+    else if (moduleState[key]?.selectedForloopIndex != undefined) {
+        newValue.selectedForloopIndex = moduleState[key]?.selectedForloopIndex;
+        newValue.selectedForloop = moduleState[key]?.selectedForloop;
     }
-    if (keepType && (state[key]?.type == 'Success' || state[key]?.type == 'Failure')) {
-        newValue.type = state[key].type;
+    if (keepType && (moduleState[key]?.type == 'Success' || moduleState[key]?.type == 'Failure')) {
+        newValue.type = moduleState[key].type;
     }
-    if (!deepEqual(state[key], newValue)) {
-        moduleState.update((state) => {
-            state[key] = newValue;
-            return state;
-        });
+    if (!deepEqual(moduleState[key], newValue)) {
+        // console.debug('updateModuleStates 2', key, $state.snapshot(moduleState))
+        moduleState[key] = newValue;
     }
 }
 function buildSubflowKey(key, prefix) {
     return prefix ? 'subflow:' + prefix + key : key;
 }
 async function refresh(clearLoop, rootJob) {
+    console.debug('refresh', clearLoop, rootJob);
     let modId = flowJobIds?.moduleId;
+    let topModuleStates = getTopModuleStates;
     if (clearLoop) {
         if (!rootJob) {
-            let topLevelModuleStates = globalModuleStates?.[globalModuleStates?.length - 1];
-            if (modId) {
-                topLevelModuleStates?.update((x) => {
-                    if (modId) {
-                        delete x[modId];
-                    }
-                    return x;
-                });
+            if (modId && topModuleStates) {
+                let prefixedId = buildSubflowKey(modId, prefix);
+                delete topModuleStates[prefixedId]; // TODO: this is not working
             }
             if (subflowParentsGlobalModuleStates.length > 0) {
-                subflowParentsGlobalModuleStates?.[subflowParentsGlobalModuleStates?.length - 1]?.update((x) => {
-                    for (let mod of innerModules ?? []) {
-                        if (mod.id) {
-                            delete x[buildSubflowKey(mod.id, prefix)];
-                        }
+                let subflowModuleStates = subflowParentsGlobalModuleStates?.[subflowParentsGlobalModuleStates?.length - 1];
+                for (let mod of innerModules ?? []) {
+                    if (mod.id) {
+                        delete subflowModuleStates[buildSubflowKey(mod.id, prefix)];
                     }
-                    return x;
-                });
+                }
             }
             else {
-                topLevelModuleStates?.update((x) => {
-                    for (let mod of innerModules ?? []) {
-                        if (mod.id) {
-                            delete x[mod.id];
-                        }
+                for (let mod of innerModules ?? []) {
+                    if (mod.id && topModuleStates) {
+                        let prefixedId = buildSubflowKey(mod.id, prefix);
+                        delete topModuleStates[prefixedId];
                     }
-                    return x;
-                });
+                }
             }
         }
     }
     else {
-        let state = modId ? getTopModuleStates()?.[modId] : undefined;
+        let state = modId ? topModuleStates?.[buildSubflowKey(modId, prefix)] : undefined;
         let loopjob = state?.selectedForloop;
         let njob = flowJobIds && modId && loopjob ? storedListJobs?.[loopjob] : job;
         if (njob) {
-            dispatch('jobsLoaded', { job: njob, force: true });
+            onJobsLoaded?.({ job: njob, force: true });
         }
     }
-    for (let [k, rec] of Object.entries(recursiveRefresh)) {
-        if (rootJob != undefined && rootJob != k) {
-            continue;
-        }
+    let callRec = async (rec) => {
         await tick();
         await rec(clearLoop, undefined);
+    };
+    if (rootJob) {
+        let rec = recursiveRefresh[rootJob];
+        if (rec) {
+            await callRec(rec);
+            // console.debug('refresh recursive 1', rec)
+        }
+        else {
+            // console.debug('refresh recursive no rec', rootJob)
+        }
+    }
+    else {
+        for (let rec of Object.values(recursiveRefresh)) {
+            await callRec(rec);
+            // console.debug('refresh recursive 2', rec)
+        }
     }
 }
 function updateRecursiveRefresh(jobId) {
     if (jobId) {
-        parentRecursiveRefresh[jobId] = async (clear, root) => {
+        updateRecursiveRefreshFn?.(jobId, async (clear, root) => {
             if (globalModuleStates.length > 0 || isSubflow) {
                 await refresh(clear, root);
             }
-        };
+        });
     }
 }
 function setModuleState(key, value, force, keepType) {
-    let newValue = { ...($localModuleStates[key] ?? {}), ...value };
-    if (!deepEqual($localModuleStates[key], value) || force) {
+    let newValue = { ...(localModuleStates[key] ?? {}), ...value };
+    if (!deepEqual(localModuleStates[key], value) || force) {
+        // console.debug('setModuleState', key, force, keepType, $state.snapshot(value))
         ;
         [localModuleStates, ...globalModuleStates].forEach((s) => {
             updateModuleStates(s, key, newValue, keepType);
         });
         if (prefix) {
-            subflowParentsGlobalModuleStates.forEach((s) => updateModuleStates(s, buildSubflowKey(key, prefix), newValue, keepType));
+            let prefixedId = buildSubflowKey(key, prefix);
+            subflowParentsGlobalModuleStates.forEach((s) => {
+                updateModuleStates(s, prefixedId, newValue, keepType);
+            });
         }
     }
 }
 function setDurationStatusByJob(key, id, value) {
-    if (!deepEqual($localDurationStatuses[key]?.byJob[id], value)) {
-        $localDurationStatuses[key].byJob[id] = value;
+    if (!deepEqual(localDurationStatuses[key]?.byJob[id], value)) {
+        localDurationStatuses[key].byJob[id] = value;
         globalDurationStatuses.forEach((s) => {
-            s.update((x) => {
-                x[key].byJob[id] = value;
-                return x;
-            });
+            s[key].byJob[id] = value;
         });
         if (prefix) {
             subflowParentsDurationStatuses.forEach((s) => {
-                s.update((x) => {
-                    x[buildSubflowKey(key, prefix)].byJob[id] = value;
-                    return x;
-                });
+                s[buildSubflowKey(key, prefix)].byJob[id] = value;
             });
         }
     }
 }
 function initializeByJob(modId) {
-    if ($localDurationStatuses[modId] == undefined) {
-        $localDurationStatuses[modId] = { byJob: {} };
+    if (localDurationStatuses[modId] == undefined) {
+        localDurationStatuses[modId] = { byJob: {} };
     }
-    globalDurationStatuses.forEach((x) => x.update((x) => {
+    globalDurationStatuses.forEach((x) => {
         if (x[modId] == undefined) {
             x[modId] = { byJob: {} };
         }
-        return x;
-    }));
+    });
     if (prefix) {
-        subflowParentsDurationStatuses.forEach((x) => x.update((x) => {
+        subflowParentsDurationStatuses.forEach((x) => {
             let key = buildSubflowKey(modId, prefix);
             if (x[key] == undefined) {
                 x[key] = { byJob: {} };
             }
-            return x;
-        }));
+        });
     }
 }
-let innerModules = $state([]);
+let innerModules = $state(undefined);
 function updateStatus(status) {
     innerModules =
         status?.modules?.concat(status.failure_module.type != 'WaitingForPriorSteps' ? status.failure_module : []) ?? [];
@@ -251,29 +257,27 @@ function updateStatus(status) {
     updateInnerModules();
     let count = status.retry?.fail_count;
     if (count) {
-        $retryStatus[jobId ?? ''] = count;
+        retryStatus.val[jobId ?? ''] = count;
     }
-    else if ($retryStatus[jobId ?? ''] != undefined) {
-        delete $retryStatus[jobId ?? ''];
-        $retryStatus = $retryStatus;
+    else if (retryStatus.val[jobId ?? ''] != undefined) {
+        delete retryStatus.val[jobId ?? ''];
     }
     let jobStatus = job?.flow_status?.modules?.[job?.flow_status.step];
     if (jobStatus && jobStatus.count != undefined) {
-        $suspendStatus[jobId ?? ''] = { nb: jobStatus.count, job: job };
+        suspendStatus.val[jobId ?? ''] = { nb: jobStatus.count, job: job };
     }
-    else if ($suspendStatus[jobId ?? ''] != undefined) {
-        delete $suspendStatus[jobId ?? ''];
-        $suspendStatus = $suspendStatus;
+    else if (suspendStatus.val[jobId ?? ''] != undefined) {
+        delete suspendStatus.val[jobId ?? ''];
     }
 }
 function updateInnerModules() {
-    if ($localModuleStates) {
-        innerModules.forEach((mod, i) => {
+    if (localModuleStates) {
+        innerModules?.forEach((mod, i) => {
             if (mod.type === 'WaitingForEvents' && innerModules?.[i - 1]?.type === 'Success') {
                 setModuleState(mod.id ?? '', { type: mod.type, args: job?.args, tag: job?.tag });
             }
             else if (mod.type === 'WaitingForExecutor' &&
-                $localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
+                localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
                 JobService.getJob({
                     workspace: workspaceId ?? $workspaceStore ?? '',
                     id: mod.job ?? '',
@@ -297,12 +301,13 @@ function updateInnerModules() {
             }
             else if ((mod.flow_jobs || mod.branch_chosen) &&
                 (mod.type == 'Success' || mod.type == 'Failure') &&
-                !['Success', 'Failure'].includes($localModuleStates?.[mod.id ?? '']?.type)) {
+                !['Success', 'Failure'].includes(localModuleStates?.[mod.id ?? '']?.type)) {
                 let branchChosen = mod.branch_chosen
                     ? {
                         branchChosen: mod.branch_chosen.type == 'default' ? 0 : (mod.branch_chosen.branch ?? 0) + 1
                     }
                     : {};
+                console.debug('updateInnerModules', mod.id, mod.type, branchChosen);
                 setModuleState(mod.id ?? '', {
                     type: mod.type,
                     ...branchChosen
@@ -311,9 +316,34 @@ function updateInnerModules() {
             else if (isForloopSelected) {
                 setModuleState(mod.id ?? '', {}, true);
             }
-            if (mod.flow_jobs_success) {
+            if (mod.flow_jobs_success || mod.flow_jobs) {
                 setModuleState(mod.id ?? '', {
-                    flow_jobs_success: mod.flow_jobs_success
+                    flow_jobs_success: mod.flow_jobs_success,
+                    flow_jobs: mod.flow_jobs,
+                    iteration_total: mod.iterator?.itered?.length ?? mod.flow_jobs?.length
+                });
+            }
+            if (mod.agent_actions && mod.id) {
+                setModuleState(mod.id, {
+                    agent_actions: mod.agent_actions
+                });
+                mod.agent_actions.forEach((action, idx) => {
+                    if (mod.id) {
+                        if (action.type == 'tool_call') {
+                            const toolCallId = getToolCallId(idx, mod.id, action.module_id);
+                            const success = mod.agent_actions_success?.[idx];
+                            setModuleState(toolCallId, {
+                                job_id: action.job_id,
+                                type: success != undefined ? (success ? 'Success' : 'Failure') : 'InProgress'
+                            });
+                        }
+                        else if (action.type == 'message') {
+                            const toolCallId = getToolCallId(idx, mod.id);
+                            setModuleState(toolCallId, {
+                                type: 'Success'
+                            });
+                        }
+                    }
                 });
             }
         });
@@ -339,20 +369,20 @@ let notAnonynmous = $state(false);
 let started = false;
 let jobLoader = undefined;
 function setJob(newJob, force) {
-    if (!deepEqual(job, newJob) || isForloopSelected || force) {
+    if (!deepEqual(job, newJob) || isForloopSelected || force || innerModules == undefined) {
         job = newJob;
         job?.flow_status && updateStatus(job?.flow_status);
-        dispatch('jobsLoaded', { job, force: false });
+        onJobsLoaded?.({ job, force: false });
         notAnonynmous = false;
         if (job?.type == 'CompletedJob' && !destroyed) {
-            dispatch('done', job);
+            onDone?.({ job });
         }
     }
 }
 async function loadJobInProgress() {
     if (!started) {
         started = true;
-        dispatch('start');
+        onStart?.();
     }
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
@@ -368,6 +398,14 @@ async function loadJobInProgress() {
                     },
                     resultStreamUpdate({ id, result_stream }) {
                         onResultStreamUpdate?.({ jobId: id, result_stream });
+                    },
+                    loadExtraLogs({ id, logs }) {
+                        if (id == jobId && job) {
+                            job.logs = logs;
+                        }
+                        if (loadExtraLogs) {
+                            loadExtraLogs(logs);
+                        }
                     }
                 });
             }
@@ -385,61 +423,41 @@ async function loadJobInProgress() {
 let destroyed = false;
 updateRecursiveRefresh(jobId);
 async function updateJobId() {
-    if (jobId !== job?.id) {
-        $localModuleStates = {};
+    if (jobId !== job?.id || innerModules == undefined) {
+        localModuleStates = {};
         flowTimeline?.reset();
         timeout && clearTimeout(timeout);
-        innerModules = [];
+        innerModules = undefined;
+        console.log('updateJobId', jobId);
         if (flowJobIds) {
             let modId = flowJobIds?.moduleId ?? '';
-            let common = {
+            if (localDurationStatuses[modId] == undefined) {
+                localDurationStatuses[modId] = { byJob: {} };
+            }
+            let prefixed = buildSubflowKey(modId, prefix);
+            globalDurationStatuses.forEach((x) => {
+                if (x[prefixed] == undefined) {
+                    x[prefixed] = { byJob: {} };
+                }
+            });
+            globalIterationBounds[prefixed] = {
                 iteration_from: flowJobIds?.branchall ? 0 : Math.max(flowJobIds.flowJobs.length - 20, 0),
-                iteration_total: $localDurationStatuses?.[modId]?.iteration_total ?? flowJobIds?.length
+                iteration_total: flowJobIds?.length
             };
-            $localDurationStatuses[modId] = {
-                ...($localDurationStatuses[modId] ?? { byJob: {} }),
-                ...common
-            };
-            let prefixed = modId;
-            globalDurationStatuses.forEach((x) => x.update((x) => {
-                x[prefixed] = { ...(x[prefixed] ?? { byJob: {} }), ...common };
-                return x;
-            }));
         }
         else {
-            updateRecursiveRefresh(jobId);
             recursiveRefresh = {};
-            $localDurationStatuses = {};
+            localDurationStatuses = {};
+            updateRecursiveRefresh(jobId);
         }
         await loadJobInProgress();
     }
 }
-function getTopModuleStates() {
-    return get(globalModuleStates?.[globalModuleStates?.length - 1]);
-}
-let forloop_selected = $state(getTopModuleStates()?.[flowJobIds?.moduleId ?? '']?.selectedForloop);
-let sub = undefined;
-let timeoutForloopSelectedSub = undefined;
-let timeoutForloopSelected = undefined;
-function onModuleIdChange() {
-    clearTimeout(timeoutForloopSelectedSub);
-    timeoutForloopSelectedSub = setTimeout(() => {
-        sub?.();
-        sub = globalModuleStates?.[globalModuleStates?.length - 1].subscribe((x) => {
-            const newForloopSelected = x[flowJobIds?.moduleId ?? '']?.selectedForloop;
-            if (newForloopSelected != forloop_selected) {
-                clearTimeout(timeoutForloopSelected);
-                timeoutForloopSelected = setTimeout(() => {
-                    forloop_selected = newForloopSelected;
-                }, 200);
-            }
-        });
-    }, 200);
-}
+let forloop_selected = $state(getTopModuleStates?.[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]?.selectedForloop);
 onDestroy(() => {
     destroyed = true;
     timeout && clearTimeout(timeout);
-    sub?.();
+    // sub?.()
 });
 function isSuccess(arg) {
     if (arg == undefined) {
@@ -449,24 +467,23 @@ function isSuccess(arg) {
         return arg == true;
     }
 }
-function onJobsLoaded(mod, job, force) {
-    if (mod.id && (mod.flow_jobs ?? []).length == 0) {
-        if (!childFlow) {
-            if ($flowStateStore?.[mod.id]) {
-                $flowStateStore[mod.id] = {
-                    ...$flowStateStore[mod.id],
-                    previewResult: job['result'],
-                    previewArgs: job.args,
-                    previewJobId: job.id,
-                    previewWorkspaceId: job.workspace_id,
-                    previewSuccess: job['success']
-                };
-            }
+function onJobsLoadedInner(mod, job, force) {
+    let id = mod.id;
+    if (id && ((mod.flow_jobs ?? []).length == 0 || force)) {
+        // console.debug('onJobsLoadedInner', id, job.id, force)
+        if (flowStateStore) {
+            flowStateStore[buildSubflowKey(id, prefix)] = {
+                ...(flowStateStore?.[buildSubflowKey(id, prefix)] ?? {}),
+                previewResult: job['result'],
+                previewArgs: job.args,
+                previewJobId: job.id,
+                previewSuccess: job['success']
+            };
         }
-        initializeByJob(mod.id);
+        initializeByJob(id);
         let started_at = job.started_at ? new Date(job.started_at).getTime() : undefined;
         if (job.type == 'QueuedJob') {
-            setModuleState(mod.id, {
+            setModuleState(id, {
                 type: 'InProgress',
                 job_id: job.id,
                 logs: job.logs,
@@ -475,7 +492,7 @@ function onJobsLoaded(mod, job, force) {
                 started_at,
                 parent_module: mod['parent_module']
             }, force);
-            setDurationStatusByJob(mod.id, job.id, {
+            setDurationStatusByJob(id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
                 started_at
             });
@@ -483,8 +500,8 @@ function onJobsLoaded(mod, job, force) {
         else {
             const parent_module = mod['parent_module'];
             // Delete existing failure node attached to the same parent module
-            removeFailureNode(mod.id, parent_module);
-            setModuleState(mod.id, {
+            removeFailureNode(id, parent_module);
+            setModuleState(id, {
                 args: job.args,
                 type: job['success'] ? 'Success' : 'Failure',
                 logs: job.logs,
@@ -498,10 +515,11 @@ function onJobsLoaded(mod, job, force) {
                 flow_jobs_success: mod.flow_jobs_success,
                 iteration_total: mod.iterator?.itered?.length,
                 retries: mod?.failed_retries?.length,
-                skipped: mod.skipped
-                // retries: $flowStateStore?.raw_flow
+                skipped: mod.skipped,
+                agent_actions: mod.agent_actions
+                // retries: flowStateStore?.raw_flow
             }, force);
-            setDurationStatusByJob(mod.id, job.id, {
+            setDurationStatusByJob(id, job.id, {
                 created_at: job.created_at ? new Date(job.created_at).getTime() : undefined,
                 started_at,
                 duration_ms: job['duration_ms']
@@ -511,11 +529,11 @@ function onJobsLoaded(mod, job, force) {
 }
 async function setIteration(j, id, clicked, modId, isForloop) {
     if (modId) {
-        let globalState = globalModuleStates?.[globalModuleStates?.length - 1];
-        let globalStateGet = globalState ? get(globalState) : undefined;
-        let state = globalStateGet?.[modId];
+        let prefixedId = buildSubflowKey(modId, prefix);
+        let topModuleStates = getTopModuleStates;
+        let state = topModuleStates?.[prefixedId];
         if (clicked && state?.selectedForloop) {
-            await globalRefreshes?.[modId]?.(true, state.selectedForloop);
+            await refreshGlobal?.(prefixedId, true, state.selectedForloop);
         }
         let manualOnce = state?.selectedForLoopSetManually;
         if (clicked ||
@@ -531,20 +549,19 @@ async function setIteration(j, id, clicked, modId, isForloop) {
             const selectedNotEqual = id != state?.selectedForloop ||
                 j != state?.selectedForloopIndex ||
                 setManually != state?.selectedForLoopSetManually;
+            // console.debug('setIteration', selectedNotEqual, state, topModuleStates)
             if (selectedNotEqual) {
-                globalState?.update((topLevelModuleStates) => {
-                    topLevelModuleStates[modId] = {
+                if (topModuleStates) {
+                    topModuleStates[prefixedId] = {
                         type: 'WaitingForPriorSteps',
                         args: {},
                         ...newState
                     };
-                    return topLevelModuleStates;
-                    // clicked && callGlobRefresh(modId, {index: j, job: id, selectedManually: setManually ?? false})
-                });
+                }
             }
         }
         if (clicked) {
-            await globalRefreshes?.[modId]?.(false, id);
+            await refreshGlobal?.(prefixedId, false, id);
         }
     }
 }
@@ -552,27 +569,31 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
     let modId = flowJobIds?.moduleId;
     if (modId) {
         setIteration(j, jobLoaded.id, clicked, modId, innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow');
-        if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
-            $flowStateStore[modId] = {
-                ...($flowStateStore[modId] ?? {}),
-                previewResult: jobLoaded.args
-            };
+        let prefixedId = buildSubflowKey(modId, prefix);
+        // if (flowStateStore) {
+        // 	flowStateStore[modId] = {
+        // 		...((flowStateStore[modId] as object) ?? {}),
+        // 		previewResult: jobLoaded.args
+        // 	}
+        // }
+        if (flowStateStore && flowStateStore[prefixedId] == undefined) {
+            flowStateStore[prefixedId] = {};
         }
-        if ($flowStateStore?.[modId]) {
-            if (!childFlow) {
-                if (!$flowStateStore[modId].previewResult ||
-                    !Array.isArray($flowStateStore[modId]?.previewResult)) {
-                    $flowStateStore[modId].previewResult = [];
-                }
-                $flowStateStore[modId].previewArgs = jobLoaded.args;
-            }
-            if (jobLoaded.type == 'QueuedJob') {
-                jobResults[j] = 'Job in progress ...';
+        if (flowStateStore) {
+            if (!flowStateStore?.[prefixedId]?.previewResult ||
+                !Array.isArray(flowStateStore[prefixedId]?.previewResult)) {
+                flowStateStore[prefixedId].previewResult = [];
             }
-            else if (jobLoaded.type == 'CompletedJob') {
-                $flowStateStore[modId].previewResult[j] = jobLoaded.result;
-                jobResults[j] = jobLoaded.result;
+            flowStateStore[prefixedId].previewArgs = jobLoaded.args;
+        }
+        if (jobLoaded.type == 'QueuedJob') {
+            jobResults[j] = 'Job in progress ...';
+        }
+        else if (jobLoaded.type == 'CompletedJob') {
+            if (flowStateStore?.[prefixedId]) {
+                flowStateStore[prefixedId].previewResult[j] = jobLoaded.result;
             }
+            jobResults[j] = jobLoaded.result;
         }
         let started_at = jobLoaded.started_at ? new Date(jobLoaded.started_at).getTime() : undefined;
         let created_at = jobLoaded.created_at ? new Date(jobLoaded.created_at).getTime() : undefined;
@@ -585,14 +606,14 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
             iteration_total: flowJobIds?.length,
             duration_ms: undefined
         };
-        let currentIndex = getTopModuleStates()?.[modId]?.selectedForloopIndex == j;
+        let currentIndex = getTopModuleStates?.[prefixedId]?.selectedForloopIndex == j;
         if (currentIndex) {
             v.logs = jobLoaded.logs;
             v.args = jobLoaded.args;
             v.job_id = jobLoaded.id;
         }
         if (jobLoaded.type == 'QueuedJob') {
-            if (started_at && $localModuleStates[modId]?.type != 'InProgress') {
+            if (started_at && localModuleStates[modId]?.type != 'InProgress') {
                 v.type = 'InProgress';
             }
         }
@@ -623,47 +644,42 @@ function innerJobLoaded(jobLoaded, j, clicked, force) {
                 id = innerModule?.modules?.[0]?.id;
             }
             if (id) {
-                onJobsLoaded({ id }, jobLoaded);
+                onJobsLoadedInner({ id }, jobLoaded);
             }
         }
     }
 }
 let flowTimeline = $state();
-function loadPreviousIters(lenToAdd) {
-    let r = $localDurationStatuses[flowJobIds?.moduleId ?? ''];
-    if (r.iteration_from) {
-        r.iteration_from -= lenToAdd;
-        $localDurationStatuses = $localDurationStatuses;
-        globalDurationStatuses.forEach((x) => x.update((x) => x));
+function loadPreviousIters(innerKey, lenToAdd) {
+    let key = buildSubflowKey(innerKey, prefix);
+    if (globalIterationBounds[key]) {
+        globalIterationBounds[key].iteration_from =
+            (globalIterationBounds[key]?.iteration_from ?? 0) - lenToAdd;
     }
-    jobResults = [
-        ...[...new Array(lenToAdd).keys()].map((x) => 'not computed or loaded yet'),
-        ...jobResults
-    ];
     // updateSlicedListJobIds()
 }
 let stepDetail = $state(undefined);
 let storedListJobs = $state({});
+let storedToolCallJobs = $state({});
+let selectedToolCall = $state(undefined);
+let toolCallIndicesToLoad = $state([]);
 let wrapperHeight = $state(0);
 function removeFailureNode(id, parent_module) {
     if (id?.startsWith('failure-') && parent_module) {
         ;
-        [...globalModuleStates, localModuleStates].forEach((stateMapStore) => {
-            stateMapStore.update((stateMap) => {
-                if (id) {
-                    Object.keys(stateMap).forEach((key) => {
-                        if (stateMap[key]?.parent_module == parent_module) {
-                            delete stateMap[key];
-                        }
-                    });
-                }
-                return stateMap;
-            });
+        [...globalModuleStates, localModuleStates].forEach((stateMap) => {
+            if (id) {
+                Object.keys(stateMap).forEach((key) => {
+                    if (stateMap[key]?.parent_module == parent_module) {
+                        delete stateMap[key];
+                    }
+                });
+            }
         });
     }
 }
 function allModulesForTimeline(modules, expandedSubflows) {
-    const ids = dfs(modules, (x) => x.id);
+    const ids = dfs(modules, (x) => x.id, { skipToolNodes: true });
     function rec(ids, prefix) {
         return ids.concat(ids.flatMap((id) => {
             let fms = expandedSubflows[id];
@@ -680,6 +696,45 @@ function allModulesForTimeline(modules, expandedSubflows) {
     return rec(ids, undefined);
 }
 let subflowsSize = $state(500);
+function setParentModuleState(modId, state) {
+    ;
+    [localModuleStates, ...globalModuleStates].forEach((stateMap) => {
+        if (stateMap[modId]) {
+            stateMap[modId] = { ...stateMap[modId], ...state };
+        }
+    });
+    if (prefix) {
+        let prefixedId = buildSubflowKey(modId, prefix);
+        subflowParentsGlobalModuleStates.forEach((stateMap) => {
+            if (stateMap[prefixedId]) {
+                stateMap[prefixedId] = { ...stateMap[prefixedId], ...state };
+            }
+        });
+    }
+}
+async function onSelectedIteration(detail) {
+    let prefixedId = buildSubflowKey(detail.moduleId, prefix);
+    if (detail.manuallySet) {
+        let rootJobId = detail.id;
+        await tick();
+        let previousId = getTopModuleStates?.[prefixedId]?.selectedForloop;
+        if (previousId) {
+            await refreshGlobal?.(prefixedId, true, previousId);
+        }
+        setParentModuleState(detail.moduleId, {
+            selectedForloop: detail.id,
+            selectedForloopIndex: detail.index,
+            selectedForLoopSetManually: true
+        });
+        await tick();
+        await refreshGlobal?.(prefixedId, false, rootJobId);
+    }
+    else {
+        setParentModuleState(detail.moduleId, {
+            selectedForLoopSetManually: false
+        });
+    }
+}
 $effect(() => {
     flowJobIds?.moduleId && untrack(() => onFlowModuleId());
 });
@@ -691,12 +746,24 @@ $effect(() => {
 });
 let isListJob = $derived(flowJobIds != undefined && Array.isArray(flowJobIds?.flowJobs));
 $effect(() => {
-    flowJobIds?.moduleId && untrack(() => onModuleIdChange());
+    if (isSelectedBranch) {
+        let modId = flowJobIds?.moduleId;
+        if (modId) {
+            let selectedForloop = getTopModuleStates?.[buildSubflowKey(modId, prefix)]?.selectedForloop;
+            untrack(() => {
+                if (selectedForloop != forloop_selected) {
+                    forloop_selected = selectedForloop;
+                }
+            });
+        }
+    }
 });
 let selected = $derived(isListJob ? 'sequence' : 'graph');
+let animateLogsTab = $state(false);
+let noLogs = $derived(graphTabOpen && !isNodeSelected);
 </script>
 
-<JobLoader workspaceOverride={workspaceId} noCode noLogs bind:this={jobLoader} />
+<JobLoader workspaceOverride={workspaceId} {noLogs} noCode bind:this={jobLoader} />
 {#if notAnonynmous}
 	<Alert type="error" title="Required Auth">
 		As a non logged in user, you can only see jobs ran by anonymous users like you
@@ -709,16 +776,17 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 			<div class="h-8" />
 		{/if} -->
 		{#if isListJob}
-			{@const sliceFrom = $localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0}
+			{@const sliceFrom =
+				globalIterationBounds[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]
+					?.iteration_from ?? 0}
 			{@const lenToAdd = Math.min(20, sliceFrom)}
-
 			{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
 				{@const allToAdd = (flowJobIds?.length ?? 0) - sliceFrom}
 				<p class="text-tertiary italic text-xs">
 					For performance reasons, only the last 20 items are shown by default <button
 						class="text-primary underline ml-4"
 						onclick={() => {
-							loadPreviousIters(lenToAdd)
+							loadPreviousIters(flowJobIds?.moduleId ?? '', lenToAdd)
 						}}
 						>Load {lenToAdd} prior
 					</button>
@@ -727,7 +795,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 						<button
 							class="text-primary underline ml-4"
 							onclick={() => {
-								loadPreviousIters(allToAdd)
+								loadPreviousIters(flowJobIds?.moduleId ?? '', allToAdd)
 							}}
 							>Load {allToAdd} prior
 						</button>
@@ -753,7 +821,6 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 					{isOwner}
 					{hideFlowResult}
 					{hideDownloadLogs}
-					{localDurationStatuses}
 					{innerModules}
 					{suspendStatus}
 					{hideJobId}
@@ -762,9 +829,15 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 			</div>
 		{/if}
 		{#if render}
-			{#if innerModules.length > 0 && !isListJob}
+			{#if innerModules && innerModules.length > 0 && !isListJob}
 				<Tabs class="mx-auto {wideResults ? '' : 'max-w-7xl'}" bind:selected>
 					<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
+					<Tab
+						value="logs"
+						class={animateLogsTab
+							? 'animate-pulse animate-duration-1000 bg-surface-inverse text-primary-inverse'
+							: ''}><span class="font-semibold">Logs</span></Tab
+					>
 					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
 				</Tabs>
 			{:else}
@@ -773,7 +846,9 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 		{/if}
 		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
 			{#if isListJob}
-				{@const sliceFrom = $localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0}
+				{@const sliceFrom =
+					globalIterationBounds[buildSubflowKey(flowJobIds?.moduleId ?? '', prefix)]
+						?.iteration_from ?? 0}
 				<h3 class="text-md leading-6 font-bold text-tertiary border-b mb-4">
 					Subflows ({flowJobIds?.flowJobs.length})
 				</h3>
@@ -823,9 +898,10 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 							<!-- <LogId id={loopJobId} /> -->
 							<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 								<FlowStatusViewerInner
-									{globalRefreshes}
-									parentRecursiveRefresh={recursiveRefresh}
-									{childFlow}
+									topModuleStates={getTopModuleStates}
+									{refreshGlobal}
+									isSelectedBranch={isSelectedBranch && forloopIsSelected}
+									updateRecursiveRefreshFn={updateRecursiveRefreshInner}
 									job={storedListJobs[j]}
 									initialJob={storedListJobs[j]}
 									globalModuleStates={forloopIsSelected
@@ -837,6 +913,7 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 										? subflowParentsGlobalModuleStates
 										: []}
 									{subflowParentsDurationStatuses}
+									{updateGlobalRefresh}
 									render={forloop_selected == loopJobId && selected == 'sequence' && render}
 									isForloopSelected={forloop_selected == loopJobId &&
 										(innerModule?.type == 'forloopflow' || innerModule?.type == 'whileloopflow')}
@@ -844,25 +921,27 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 										(!!flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20)}
 									{workspaceId}
 									jobId={loopJobId}
-									on:jobsLoaded={(e) => {
-										let { job, force } = e.detail
+									onJobsLoaded={({ job, force }) => {
 										storedListJobs[j] = job
 										innerJobLoaded(job, j, false, force)
 									}}
 									{onResultStreamUpdate}
+									graphTabOpen={selected == 'graph' && graphTabOpen}
+									isNodeSelected={forloop_selected == loopJobId}
+									{globalIterationBounds}
 								/>
 							</div>
 						{/if}
 					{/each}
 				</div>
-			{:else if innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
+			{:else if innerModules && innerModules.length > 0 && (job.raw_flow?.modules.length ?? 0) > 0}
 				{@const hasPreprocessor = innerModules[0]?.id == 'preprocessor' ? 1 : 0}
 				<ul class="w-full">
 					<h3 class="text-md leading-6 font-bold text-primary border-b mb-4 py-2">
 						Step-by-step
 					</h3>
 
-					{#each innerModules as mod, i}
+					{#each innerModules ?? [] as mod, i}
 						{#if render}
 							<div class="line w-8 h-10"></div>
 							<h3 class="text-tertiary mb-2 w-full">
@@ -913,9 +992,11 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 									<!-- <LogId id={loopJobId} /> -->
 									<div class="border p-6" class:hidden={retry_selected != failedRetry}>
 										<FlowStatusViewerInner
-											{globalRefreshes}
-											parentRecursiveRefresh={recursiveRefresh}
-											{childFlow}
+											topModuleStates={getTopModuleStates}
+											{refreshGlobal}
+											isSelectedBranch={isSelectedBranch && retry_selected == failedRetry}
+											{updateGlobalRefresh}
+											updateRecursiveRefreshFn={updateRecursiveRefreshInner}
 											globalModuleStates={[localModuleStates, ...globalModuleStates]}
 											globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
 											{prefix}
@@ -926,6 +1007,9 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											{workspaceId}
 											jobId={failedRetry}
 											{onResultStreamUpdate}
+											graphTabOpen={selected == 'graph' && graphTabOpen}
+											isNodeSelected={retry_selected == failedRetry}
+											{globalIterationBounds}
 										/>
 									</div>
 								{/each}
@@ -933,10 +1017,14 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 							{#if ['InProgress', 'Success', 'Failure'].includes(mod.type)}
 								{#if job.raw_flow?.modules[i]?.value.type == 'flow'}
 									<FlowStatusViewerInner
-										{globalRefreshes}
-										parentRecursiveRefresh={recursiveRefresh}
+										topModuleStates={getTopModuleStates}
+										{isSelectedBranch}
+										{refreshGlobal}
+										updateRecursiveRefreshFn={updateRecursiveRefreshInner}
 										globalModuleStates={[]}
+										{updateGlobalRefresh}
 										globalDurationStatuses={[]}
+										{globalIterationBounds}
 										prefix={buildPrefix(prefix, mod.id ?? '')}
 										subflowParentsGlobalModuleStates={[
 											localModuleStates,
@@ -953,27 +1041,29 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 										jobId={mod.job ?? ''}
 										{reducedPolling}
 										isSubflow
-										childFlow
-										on:jobsLoaded={(e) => {
-											let { force, job } = e.detail
-											onJobsLoaded(mod, job, force)
+										onJobsLoaded={({ job, force }) => {
+											onJobsLoadedInner(mod, job, force)
 										}}
 										{onResultStreamUpdate}
+										graphTabOpen={selected == 'graph' && graphTabOpen}
+										isNodeSelected={false}
 									/>
 								{:else if mod.flow_jobs?.length == 0 && mod.job == '00000000-0000-0000-0000-000000000000'}
 									<div class="text-secondary">no subflow (empty loop?)</div>
 								{:else}
 									<FlowStatusViewerInner
-										{globalRefreshes}
-										parentRecursiveRefresh={recursiveRefresh}
-										{childFlow}
+										topModuleStates={getTopModuleStates}
+										{refreshGlobal}
+										updateRecursiveRefreshFn={updateRecursiveRefreshInner}
 										globalModuleStates={[localModuleStates, ...globalModuleStates]}
 										globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
 										render={selected == 'sequence' && render}
 										{workspaceId}
 										{prefix}
+										{updateGlobalRefresh}
 										{subflowParentsGlobalModuleStates}
 										{subflowParentsDurationStatuses}
+										{isSelectedBranch}
 										jobId={mod.job ?? ''}
 										{reducedPolling}
 										innerModule={mod.flow_jobs ? job.raw_flow?.modules[i]?.value : undefined}
@@ -986,17 +1076,93 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 													branchall: job?.raw_flow?.modules?.[i]?.value?.type == 'branchall'
 												}
 											: undefined}
-										on:jobsLoaded={(e) => {
-											let { job, force } = e.detail
-											onJobsLoaded(mod, job, force)
+										onJobsLoaded={({ job, force }) => {
+											onJobsLoadedInner(mod, job, force)
+										}}
+										loadExtraLogs={(logs) => {
+											setModuleState(mod.id ?? '', {
+												logs
+											})
 										}}
 										{onResultStreamUpdate}
+										graphTabOpen={selected == 'graph' && graphTabOpen}
+										isNodeSelected={localModuleStates?.[selectedNode ?? '']?.job_id == mod.job}
+										{globalIterationBounds}
 									/>
+									{#if mod.agent_actions && mod.agent_actions.length > 0}
+										{#each mod.agent_actions as agentAction, j}
+											{#if agentAction.type === 'tool_call' && mod.id}
+												{@const toolCallId = getToolCallId(j, mod.id, agentAction.module_id)}
+												{@const isSelected = selectedToolCall === j}
+												<Button
+													variant={isSelected ? 'contained' : 'border'}
+													color={mod.agent_actions_success?.[j] === false
+														? 'red'
+														: isSelected
+															? 'dark'
+															: 'light'}
+													btnClasses="w-full flex justify-start"
+													on:click={async () => {
+														if (selectedToolCall == j) {
+															selectedToolCall = undefined
+														} else {
+															selectedToolCall = j
+														}
+													}}
+													endIcon={{
+														icon: ChevronDown,
+														classes: isSelected ? '!rotate-180' : ''
+													}}
+												>
+													<span class="truncate font-mono">
+														Tool call: {agentAction.function_name}
+													</span>
+												</Button>
+												{#if isSelected || storedToolCallJobs[j] || toolCallIndicesToLoad.includes(j)}
+													<FlowStatusViewerInner
+														topModuleStates={getTopModuleStates}
+														{refreshGlobal}
+														updateRecursiveRefreshFn={updateRecursiveRefreshInner}
+														globalModuleStates={[localModuleStates, ...globalModuleStates]}
+														globalDurationStatuses={[
+															localDurationStatuses,
+															...globalDurationStatuses
+														]}
+														render={selected == 'sequence' && render && isSelected}
+														{workspaceId}
+														{prefix}
+														{updateGlobalRefresh}
+														{subflowParentsGlobalModuleStates}
+														{subflowParentsDurationStatuses}
+														{isSelectedBranch}
+														jobId={agentAction.job_id}
+														job={storedToolCallJobs[j]}
+														initialJob={storedToolCallJobs[j]}
+														{reducedPolling}
+														onJobsLoaded={({ job, force }) => {
+															storedToolCallJobs[j] = job
+															onJobsLoadedInner({ id: toolCallId } as FlowStatusModule, job, force)
+														}}
+														loadExtraLogs={(logs) => {
+															setModuleState(toolCallId, {
+																logs
+															})
+														}}
+														{onResultStreamUpdate}
+														graphTabOpen={selected == 'graph' && graphTabOpen}
+														isNodeSelected={localModuleStates?.[toolCallId]?.job_id ==
+															agentAction.job_id}
+														{globalIterationBounds}
+													/>
+												{/if}
+											{/if}
+										{/each}
+									{/if}
 								{/if}
 							{:else}
 								<ModuleStatus
 									type={mod.type}
-									scheduled_for={$localModuleStates?.[mod.id ?? '']?.scheduled_for}
+									scheduled_for={localModuleStates?.[mod.id ?? '']?.scheduled_for}
 								/>
 							{/if}
 						</li>
@@ -1006,6 +1172,15 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 				<div class="p-2 text-tertiary text-sm italic">Empty flow</div>
 			{/if}
 		</div>
+		<div class="{selected != 'logs' ? 'hidden' : ''}  mx-auto h-[800px]">
+			<FlowLogViewerWrapper
+				{job}
+				{localModuleStates}
+				{workspaceId}
+				{render}
+				{onSelectedIteration}
+			/>
+		</div>
 	</div>
 	{#if render}
 		{#if job.raw_flow && !isListJob}
@@ -1013,14 +1188,14 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 				<div class="grid grid-cols-3 border h-full" bind:clientHeight={wrapperHeight}>
 					<div class="col-span-2 bg-surface-secondary">
 						<div class="flex flex-col">
-							{#each Object.values($retryStatus) as count}
+							{#each Object.values(retryStatus?.val ?? {}) as count}
 								{#if count}
 									<span class="text-sm">
 										Retry in progress, # of failed attempts: {count}
 									</span>
 								{/if}
 							{/each}
-							{#each Object.values($suspendStatus) as count}
+							{#each Object.values(suspendStatus?.val ?? {}) as count}
 								{#if count.nb}
 									<span class="text-sm">
 										Flow suspended, waiting for {count.nb} events
@@ -1028,14 +1203,13 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 								{/if}
 							{/each}
 						</div>
-
 						<FlowGraphV2
 							{selectedId}
 							triggerNode={true}
 							download={!hideDownloadInGraph}
 							minHeight={wrapperHeight}
 							success={jobId != undefined && isSuccess(job?.['success'])}
-							flowModuleStates={$localModuleStates}
+							flowModuleStates={localModuleStates}
 							bind:expandedSubflows
 							onSelect={(e) => {
 								console.log('onSelect', e)
@@ -1050,42 +1224,26 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 										selectedNode = 'end'
 										stepDetail = 'end'
 									} else {
-										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find((m) => m?.id === e)
+										const id = e.startsWith(AI_TOOL_CALL_PREFIX) ? e.split('-').pop() : e
+										const mod = dfs(job?.raw_flow?.modules ?? [], (m) => m).find(
+											(m) => m?.id === id
+										)
 										stepDetail = mod
 										selectedNode = e
+										if (e.startsWith(AI_TOOL_CALL_PREFIX)) {
+											const [_prefix, _agentModuleId, j, _toolModuleId] = e.split('-')
+											const jIdx = Number(j)
+											if (!toolCallIndicesToLoad.includes(jIdx)) {
+												toolCallIndicesToLoad.push(jIdx)
+											}
+										}
 									}
 								} else {
 									stepDetail = e
 									selectedNode = e.id
 								}
 							}}
-							onSelectedIteration={async (detail) => {
-								if (detail.manuallySet) {
-									let rootJobId = detail.id
-									await tick()
-
-									let previousId = $localModuleStates[detail.moduleId]?.selectedForloop
-									if (previousId) {
-										await globalRefreshes?.[detail.moduleId]?.(true, previousId)
-									}
-
-									$localModuleStates[detail.moduleId] = {
-										...$localModuleStates[detail.moduleId],
-										selectedForloop: detail.id,
-										selectedForloopIndex: detail.index,
-										selectedForLoopSetManually: true
-									}
-
-									await tick()
-
-									await globalRefreshes?.[detail.moduleId]?.(false, rootJobId)
-								} else {
-									$localModuleStates[detail.moduleId] = {
-										...$localModuleStates[detail.moduleId],
-										selectedForLoopSetManually: false
-									}
-								}
-							}}
+							{onSelectedIteration}
 							earlyStop={job.raw_flow?.skip_expr !== undefined}
 							cache={job.raw_flow?.cache_ttl !== undefined}
 							modules={job.raw_flow?.modules ?? []}
@@ -1121,13 +1279,21 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 									job?.raw_flow?.modules ?? [],
 									expandedSubflows ?? {}
 								)}
+								buildSubflowKey={(key) => buildSubflowKey(key, prefix)}
+								{globalIterationBounds}
 								durationStatuses={localDurationStatuses}
+								decreaseIterationFrom={(key, amount) => {
+									loadPreviousIters(key, amount)
+								}}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
 							<div class="pt-2 grow flex flex-col">
-								{#if selectedNode}
-									{@const node = $localModuleStates[selectedNode]}
-
+								{#if selectedNode?.startsWith(AI_TOOL_MESSAGE_PREFIX)}
+									<div class="pt-2 px-4 pb-4">
+										<Alert type="info" title="Message output is available on the AI agent node" />
+									</div>
+								{:else if selectedNode}
+									{@const node = localModuleStates[selectedNode]}
 									{#if selectedNode == 'end'}
 										<FlowJobResult
 											tagLabel={customUi?.tagLabel}
@@ -1140,7 +1306,6 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											col
 											result={job['result']}
 											logs={job.logs ?? ''}
-											durationStates={localDurationStatuses}
 											downloadLogs={!hideDownloadLogs}
 										/>
 									{:else if selectedNode == 'start'}
@@ -1156,6 +1321,10 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											<p class="p-2 text-secondary">No arguments</p>
 										{/if}
 									{:else if node}
+										{@const module =
+											stepDetail && typeof stepDetail !== 'string' ? stepDetail : undefined}
+										{@const agentTools =
+											module && module.value.type === 'aiagent' ? module.value.tools : undefined}
 										{#if node.flow_jobs_results}
 											<span class="pl-1 text-tertiary"
 												>Result of step as collection of all subflows</span
@@ -1218,8 +1387,26 @@ let selected = $derived(isListJob ? 'sequence' : 'graph');
 											result={node.result}
 											tag={node.tag}
 											logs={node.logs}
-											durationStates={localDurationStatuses}
 											downloadLogs={!hideDownloadLogs}
+											aiAgentStatus={agentTools &&
+											node.job_id &&
+											(node.type === 'Success' || node.type === 'Failure')
+												? {
+														tools: agentTools,
+														agentJob: {
+															id: node.job_id,
+															result: node.result,
+															logs: node.logs,
+															args: node.args,
+															success: node.type === 'Success',
+															type: 'CompletedJob'
+														},
+														storedToolCallJobs,
+														onToolJobLoaded: (job, idx) => {
+															storedToolCallJobs[idx] = job
+														}
+													}
+												: undefined}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"