feat(web): loop node iteration visibility in workflow execution view

packages/server/src/adapters/web/workflow-bridge.ts

@@ -35,6 +35,7 @@ export function mapWorkflowEvent(event: WorkflowEmitterEvent): string | null {
       return JSON.stringify({
         type: 'workflow_step',
         runId: event.runId,
+        nodeId: event.nodeId,
         step: event.iteration - 1,
         total: event.maxIterations,
         name: `iteration-${String(event.iteration)}`,
@@ -47,9 +48,10 @@ export function mapWorkflowEvent(event: WorkflowEmitterEvent): string | null {
       return JSON.stringify({
         type: 'workflow_step',
         runId: event.runId,
+        nodeId: event.nodeId,
         step: event.iteration - 1,
         // total: 0 intentionally — maxIterations is not carried by loop_iteration_completed/failed events.
-        // useWorkflowStatus.ts guards against 0 by preserving the prior wf.maxIterations value.
+        // workflow-store.ts handleLoopIteration guards against 0 by preserving the prior wf.maxIterations value.
         total: 0,
         name: `iteration-${String(event.iteration)}`,
         status: 'completed',
@@ -62,9 +64,10 @@ export function mapWorkflowEvent(event: WorkflowEmitterEvent): string | null {
       return JSON.stringify({
         type: 'workflow_step',
         runId: event.runId,
+        nodeId: event.nodeId,
         step: event.iteration - 1,
         // total: 0 intentionally — maxIterations is not carried by loop_iteration_completed/failed events.
-        // useWorkflowStatus.ts guards against 0 by preserving the prior wf.maxIterations value.
+        // workflow-store.ts handleLoopIteration guards against 0 by preserving the prior wf.maxIterations value.
         total: 0,
         name: `iteration-${String(event.iteration)}`,
         status: 'failed',

packages/web/src/components/workflows/DagNodeProgress.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { StatusIcon } from './StatusIcon';
 import { formatDurationMs } from '@/lib/format';
 import type { DagNodeState } from '@/lib/types';
@@ -8,6 +9,84 @@ interface DagNodeProgressProps {
   onNodeClick: (nodeId: string) => void;
 }
 
+function DagNodeItem({
+  node,
+  isActive,
+  onNodeClick,
+}: {
+  node: DagNodeState;
+  isActive: boolean;
+  onNodeClick: (nodeId: string) => void;
+}): React.ReactElement {
+  const [expanded, setExpanded] = useState(false);
+  const hasIterations = (node.iterations?.length ?? 0) > 0;
+
+  return (
+    <div>
+      <div
+        className={`w-full text-left px-2 py-1.5 rounded transition-colors cursor-pointer ${
+          isActive ? 'bg-accent/10 border-l-2 border-accent' : 'hover:bg-surface-hover'
+        }`}
+        onClick={(): void => {
+          onNodeClick(node.nodeId);
+        }}
+        role="row"
+      >
+        <div className="flex items-center gap-2 text-sm">
+          {hasIterations && (
+            <button
+              type="button"
+              onClick={(e): void => {
+                e.stopPropagation();
+                setExpanded(prev => !prev);
+              }}
+              className="text-text-tertiary hover:text-text-secondary shrink-0 text-xs cursor-pointer"
+              aria-label={expanded ? 'Collapse iterations' : 'Expand iterations'}
+            >
+              {expanded ? '\u25BC' : '\u25B6'}
+            </button>
+          )}
+          <StatusIcon status={node.status} />
+          <span className="truncate flex-1">{node.name}</span>
+          {node.currentIteration !== undefined && node.maxIterations !== undefined && (
+            <span className="text-xs text-text-secondary shrink-0">
+              {node.currentIteration}/{node.maxIterations}
+            </span>
+          )}
+          {node.duration !== undefined && (
+            <span className="text-xs text-text-secondary shrink-0">
+              {formatDurationMs(node.duration)}
+            </span>
+          )}
+        </div>
+        {node.error && (
+          <div className="text-xs text-red-400 mt-0.5 ml-6 truncate" title={node.error}>
+            {node.error.slice(0, 80)}
+          </div>
+        )}
+        {node.reason && (
+          <div className="text-xs text-text-tertiary mt-0.5 ml-6">
+            Skipped: {node.reason.replace(/_/g, ' ')}
+          </div>
+        )}
+      </div>
+      {expanded && hasIterations && (
+        <div className="ml-6 mt-0.5 space-y-0.5">
+          {(node.iterations ?? []).map(iter => (
+            <div key={iter.iteration} className="flex items-center gap-2 px-2 py-1 text-xs">
+              <StatusIcon status={iter.status} />
+              <span className="text-text-secondary flex-1">Iteration {iter.iteration}</span>
+              {iter.duration !== undefined && (
+                <span className="text-text-tertiary">{formatDurationMs(iter.duration)}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function DagNodeProgress({
   nodes,
   activeNodeId,
@@ -22,37 +101,12 @@ export function DagNodeProgress({
   return (
     <div className="space-y-1 p-2">
       {nodes.map(node => (
-        <button
+        <DagNodeItem
           key={node.nodeId}
-          onClick={(): void => {
-            onNodeClick(node.nodeId);
-          }}
-          className={`w-full text-left px-2 py-1.5 rounded transition-colors ${
-            node.nodeId === activeNodeId
-              ? 'bg-accent/10 border-l-2 border-accent'
-              : 'hover:bg-surface-hover'
-          }`}
-        >
-          <div className="flex items-center gap-2 text-sm">
-            <StatusIcon status={node.status} />
-            <span className="truncate flex-1">{node.name}</span>
-            {node.duration !== undefined && (
-              <span className="text-xs text-text-secondary shrink-0">
-                {formatDurationMs(node.duration)}
-              </span>
-            )}
-          </div>
-          {node.error && (
-            <div className="text-xs text-red-400 mt-0.5 ml-6 truncate" title={node.error}>
-              {node.error.slice(0, 80)}
-            </div>
-          )}
-          {node.reason && (
-            <div className="text-xs text-text-tertiary mt-0.5 ml-6">
-              Skipped: {node.reason.replace(/_/g, ' ')}
-            </div>
-          )}
-        </button>
+          node={node}
+          isActive={node.nodeId === activeNodeId}
+          onNodeClick={onNodeClick}
+        />
       ))}
     </div>
   );

packages/web/src/components/workflows/ExecutionDagNode.tsx

@@ -11,6 +11,8 @@ export interface ExecutionNodeData extends DagNodeData {
   duration?: number;
   error?: string;
   selected?: boolean;
+  currentIteration?: number;
+  maxIterations?: number;
 }
 
 export type ExecutionFlowNode = Node<ExecutionNodeData>;
@@ -27,12 +29,14 @@ const TYPE_COLORS: Record<string, string> = {
   command: 'text-purple-400',
   prompt: 'text-accent-bright',
   bash: 'text-amber-400',
+  loop: 'text-orange-400',
 };
 
 const TYPE_LABELS: Record<string, string> = {
   command: 'CMD',
   bash: 'BASH',
   prompt: 'PROMPT',
+  loop: 'LOOP',
 };
 
 function ExecutionDagNodeRender({ data }: NodeProps<ExecutionFlowNode>): React.ReactElement {
@@ -60,6 +64,11 @@ function ExecutionDagNodeRender({ data }: NodeProps<ExecutionFlowNode>): React.R
           </span>
         )}
       </div>
+      {data.currentIteration !== undefined && data.maxIterations !== undefined && (
+        <div className="text-[10px] text-text-tertiary mt-0.5">
+          {data.currentIteration}/{data.maxIterations} iterations
+        </div>
+      )}
       {data.error && (
         <div className="text-[10px] text-error mt-1 truncate" title={data.error}>
           {data.error.slice(0, 60)}

packages/web/src/components/workflows/WorkflowDagViewer.tsx

@@ -89,6 +89,8 @@ export function WorkflowDagViewer({
           duration: live?.duration,
           error: live?.error,
           selected: node.id === selectedNodeId,
+          currentIteration: live?.currentIteration,
+          maxIterations: live?.maxIterations,
         },
       } as ExecutionFlowNode;
     });

packages/web/src/components/workflows/WorkflowExecution.tsx

@@ -21,6 +21,7 @@ import type {
   WorkflowRunStatus,
   DagNodeState,
   WorkflowStepStatus,
+  LoopIterationInfo,
 } from '@/lib/types';
 
 import type { WorkflowEventResponse } from '@/lib/api';
@@ -133,6 +134,49 @@ export function WorkflowExecution({ runId }: WorkflowExecutionProps): React.Reac
                 });
               }
             }
+
+            // Second pass: enrich loop nodes with iteration data
+            for (const e of data.events.filter(ev => ev.event_type.startsWith('loop_iteration_'))) {
+              const nodeId = e.step_name ?? '';
+              if (!nodeId) continue;
+              const existing = nodeMap.get(nodeId);
+              if (!existing) continue; // No node_started event yet — skip (events ordered in DB)
+
+              const iteration = e.data.iteration as number | undefined;
+              const maxIter = e.data.maxIterations as number | undefined;
+              if (iteration === undefined) continue;
+
+              let iterStatus: LoopIterationInfo['status'];
+              if (e.event_type === 'loop_iteration_started') {
+                iterStatus = 'running';
+              } else if (e.event_type === 'loop_iteration_completed') {
+                iterStatus = 'completed';
+              } else {
+                iterStatus = 'failed';
+              }
+
+              const existingIters: LoopIterationInfo[] = existing.iterations ?? [];
+              const iterIdx = existingIters.findIndex(it => it.iteration === iteration);
+              const iterState: LoopIterationInfo = {
+                iteration,
+                status: iterStatus,
+                duration: e.data.duration_ms as number | undefined,
+              };
+              const newIters = [...existingIters];
+              if (iterIdx >= 0) {
+                newIters[iterIdx] = iterState;
+              } else {
+                newIters.push(iterState);
+              }
+
+              nodeMap.set(nodeId, {
+                ...existing,
+                currentIteration: iteration,
+                maxIterations: maxIter ?? existing.maxIterations,
+                iterations: newIters,
+              });
+            }
+
             return Array.from(nodeMap.values());
           })(),
           artifacts: data.events

packages/web/src/components/workflows/WorkflowLogs.tsx

@@ -388,10 +388,31 @@ export function WorkflowLogs({
       filteredDbMessages = dbMessages;
     }
 
+    // Collect DB text content for dedup against SSE text messages.
+    // During live execution, the same text (e.g., "🚀 Starting workflow...") can appear
+    // in both DB (from REST fetch on mount) and SSE (from event buffer replay).
+    // Without dedup, the text shows up twice in the message list.
+    const dbTextContents = new Set<string>();
+    for (const dm of filteredDbMessages) {
+      if (dm.role === 'assistant' && dm.content) {
+        dbTextContents.add(dm.content);
+      }
+    }
+
     // Strip SSE tool calls that already appear in DB messages (completed).
+    // Also strip SSE text messages that are already in DB (prevents duplicate text).
     const dedupedSse: ChatMessage[] = [];
     for (const m of sseMessages) {
       if (!m.toolCalls?.length) {
+        // Skip SSE text-only messages whose content already exists in DB.
+        if (m.content && dbTextContents.has(m.content)) {
+          continue;
+        }
+        // Also skip if DB has a message that starts with the SSE content
+        // (SSE text was flushed to DB before SSE finished accumulating).
+        if (m.content && [...dbTextContents].some(dc => dc.startsWith(m.content))) {
+          continue;
+        }
         if (m.isStreaming || m.content) dedupedSse.push(m);
         continue;
       }
@@ -415,7 +436,32 @@ export function WorkflowLogs({
   const onText = useCallback((content: string): void => {
     setSseMessages(prev => {
       const last = prev[prev.length - 1];
+      // Workflow status messages (🚀 start, ✅ complete) should be their own message,
+      // matching ChatInterface's behavior and persistence segmentation. Without this,
+      // all text concatenates into one giant streaming message, breaking text dedup
+      // against DB messages (which are stored as separate segments).
+      const isWorkflowStatus = /^[\u{1F680}\u{2705}]/u.test(content);
+
       if (last?.role === 'assistant' && last.isStreaming) {
+        const lastIsWorkflowStatus = /^[\u{1F680}\u{2705}]/u.test(last.content);
+
+        if ((isWorkflowStatus && last.content) || (lastIsWorkflowStatus && !isWorkflowStatus)) {
+          // Close the current streaming message and start a new one when:
+          // 1. Incoming is a workflow status and current has content
+          // 2. Current is a workflow status and incoming is regular text
+          return [
+            ...prev.slice(0, -1),
+            { ...last, isStreaming: false },
+            {
+              id: `msg-${String(Date.now())}`,
+              role: 'assistant' as const,
+              content,
+              timestamp: Date.now(),
+              isStreaming: true,
+              toolCalls: [],
+            },
+          ];
+        }
         return [...prev.slice(0, -1), { ...last, content: last.content + content }];
       }
       return [

packages/web/src/hooks/useDashboardSSE.ts

@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 import { workflowSSEHandlers } from '@/stores/workflow-store';
-import type { WorkflowStatusEvent, DagNodeEvent, WorkflowToolActivityEvent } from '@/lib/types';
+import type {
+  WorkflowStatusEvent,
+  DagNodeEvent,
+  WorkflowToolActivityEvent,
+  LoopIterationEvent,
+} from '@/lib/types';
 
 /** Connects to the multiplexed dashboard SSE stream and routes events to the Zustand store. */
 export function useDashboardSSE(): void {
@@ -25,6 +30,9 @@ export function useDashboardSSE(): void {
         case 'workflow_tool_activity':
           workflowSSEHandlers.onToolActivity(event as WorkflowToolActivityEvent);
           break;
+        case 'workflow_step':
+          workflowSSEHandlers.onLoopIteration(event as LoopIterationEvent);
+          break;
         // heartbeat — ignore
       }
     };

packages/web/src/hooks/useSSE.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, useCallback } from 'react';
 import type {
   SSEEvent,
   ErrorDisplay,
+  LoopIterationEvent,
   WorkflowStatusEvent,
   WorkflowArtifactEvent,
   WorkflowDispatchEvent,
@@ -37,6 +38,7 @@ interface SSEHandlers {
   onWorkflowStatus?: (event: WorkflowStatusEvent) => void;
   onWorkflowArtifact?: (event: WorkflowArtifactEvent) => void;
   onDagNode?: (event: DagNodeEvent) => void;
+  onLoopIteration?: (event: LoopIterationEvent) => void;
   onWorkflowDispatch?: (event: WorkflowDispatchEvent) => void;
   onWorkflowOutputPreview?: (event: WorkflowOutputPreviewEvent) => void;
   onWarning?: (message: string) => void;
@@ -187,6 +189,9 @@ export function useSSE(
           case 'dag_node':
             h.onDagNode?.(data);
             break;
+          case 'workflow_step':
+            h.onLoopIteration?.(data);
+            break;
           case 'workflow_dispatch':
             // Flush buffered text before dispatch events to ensure the dispatch
             // message (🚀) is committed as an assistant message before