@synergenius/flow-weaver-pack-weaver 0.9.53 → 0.9.55

package/src/ui/use-stream-timeline.ts

@@ -0,0 +1,240 @@
+/**
+ * Convert a progressive stream of execution events into TimelineEntry[]
+ * that ExecutionTimeline can render.
+ *
+ * Handles: node-start/complete/error, bot-started/completed/failed,
+ * audit:plan-created, cost-update.
+ */
+
+const React = require('react');
+const { useMemo, useState, useEffect, useRef } = React;
+
+// Types inlined — these are provided by @fw/plugin-ui-kit at runtime
+interface StreamEvent {
+  id: number;
+  type: string;
+  timestamp: number;
+  taskId?: string;
+  data?: Record<string, unknown>;
+}
+
+interface TimelineEntry {
+  id: string;
+  timestamp: Date;
+  type: 'task-started' | 'node-started' | 'node-completed' | 'node-failed' | 'agent-request' | 'user-action' | 'task-completed' | 'task-failed';
+  nodeId?: string;
+  label: string;
+  detail?: string;
+  outputs?: Array<{ portLabel: string; value: unknown }>;
+  duration?: number;
+  color?: string;
+  icon?: string;
+}
+
+export interface StreamTimelineState {
+  timeline: TimelineEntry[];
+  phase: 'idle' | 'planning' | 'executing' | 'completed' | 'failed';
+  instruction: string | null;
+  elapsed: number;
+  cost: number | null;
+  plan: {
+    summary: string;
+    steps: Array<{ id: string; operation: string; description: string }>;
+  } | null;
+  awaitingApproval: boolean;
+}
+
+export function useStreamTimeline(events: StreamEvent[], isDone: boolean): StreamTimelineState {
+  const [elapsed, setElapsed] = useState(0);
+  const startTimeRef = useRef(null as number | null);
+
+  // Track start time from first event; reset when events are cleared (new run)
+  useEffect(() => {
+    if (events.length === 0) {
+      startTimeRef.current = null;
+      setElapsed(0);
+    } else if (startTimeRef.current === null) {
+      startTimeRef.current = events[0]!.timestamp;
+    }
+  }, [events.length]);
+
+  // Elapsed timer — ticks every second while streaming
+  useEffect(() => {
+    if (isDone || !startTimeRef.current) return;
+    const tick = () => setElapsed(Date.now() - (startTimeRef.current ?? Date.now()));
+    tick();
+    const interval = setInterval(tick, 1000);
+    return () => clearInterval(interval);
+  }, [isDone, events.length]); // re-run when events arrive to start timer
+
+  // Convert events to timeline entries.
+  // Collapses node-start + node-complete into a single entry per node:
+  // - While a node is running: shows as 'node-started' (spinner)
+  // - When it completes/fails: replaces with 'node-completed'/'node-failed' (with duration)
+  const timeline = useMemo(() => {
+    const entries: TimelineEntry[] = [];
+    // Map nodeId → index in entries[] so we can replace start with complete
+    const nodeEntryIndex = new Map<string, number>();
+    const nodeStarts = new Map<string, number>();
+    let idCounter = 0;
+
+    for (const event of events) {
+      const d = event.data ?? {};
+
+      switch (event.type) {
+        case 'bot-started':
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: 'task-started',
+            label: 'Task started',
+            detail: d.instruction as string | undefined,
+          });
+          break;
+
+        case 'node-start': {
+          const nodeId = d.nodeId as string;
+          if (nodeId) nodeStarts.set(nodeId, event.timestamp);
+          const idx = entries.length;
+          nodeEntryIndex.set(nodeId, idx);
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: 'node-started',
+            nodeId,
+            label: (d.label as string) ?? (d.nodeType as string) ?? nodeId ?? 'Node',
+          });
+          break;
+        }
+
+        case 'node-complete': {
+          const nodeId = d.nodeId as string;
+          const startTs = nodeStarts.get(nodeId);
+          const duration =
+            (d.durationMs as number) ?? (startTs ? event.timestamp - startTs : undefined);
+          if (nodeId) nodeStarts.delete(nodeId);
+
+          const completed: TimelineEntry = {
+            id: `s-${idCounter++}`,
+            timestamp: new Date(startTs ?? event.timestamp),
+            type: 'node-completed',
+            nodeId,
+            label: (d.label as string) ?? (d.nodeType as string) ?? nodeId ?? 'Node',
+            duration,
+          };
+
+          // Replace the node-started entry in-place
+          const existingIdx = nodeEntryIndex.get(nodeId);
+          if (existingIdx != null && entries[existingIdx]) {
+            entries[existingIdx] = completed;
+            nodeEntryIndex.delete(nodeId);
+          } else {
+            entries.push(completed);
+          }
+          break;
+        }
+
+        case 'node-error': {
+          const nodeId = d.nodeId as string;
+          const startTs = nodeStarts.get(nodeId);
+          const duration =
+            (d.durationMs as number) ?? (startTs ? event.timestamp - startTs : undefined);
+          if (nodeId) nodeStarts.delete(nodeId);
+
+          const failed: TimelineEntry = {
+            id: `s-${idCounter++}`,
+            timestamp: new Date(startTs ?? event.timestamp),
+            type: 'node-failed',
+            nodeId,
+            label: (d.label as string) ?? (d.nodeType as string) ?? nodeId ?? 'Node',
+            detail: d.error as string | undefined,
+            duration,
+          };
+
+          // Replace the node-started entry in-place
+          const existingIdx = nodeEntryIndex.get(nodeId);
+          if (existingIdx != null && entries[existingIdx]) {
+            entries[existingIdx] = failed;
+            nodeEntryIndex.delete(nodeId);
+          } else {
+            entries.push(failed);
+          }
+          break;
+        }
+
+        case 'bot-completed':
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: 'task-completed',
+            label: (d.success as boolean) ? 'Task completed' : 'Task finished',
+            detail: d.summary as string | undefined,
+          });
+          break;
+
+        case 'bot-failed':
+          entries.push({
+            id: `s-${idCounter++}`,
+            timestamp: new Date(event.timestamp),
+            type: 'task-failed',
+            label: 'Task failed',
+            detail: d.error as string | undefined,
+          });
+          break;
+
+        // Skip audit, cost-update, done — they're used for metadata, not timeline
+        default:
+          break;
+      }
+    }
+
+    return entries;
+  }, [events]);
+
+  // Extract metadata from events
+  const { phase, instruction, cost, plan, awaitingApproval } = useMemo(() => {
+    let phase: StreamTimelineState['phase'] = 'idle';
+    let instruction: string | null = null;
+    let cost: number | null = null;
+    let plan: StreamTimelineState['plan'] = null;
+    let awaitingApproval = false;
+
+    for (const event of events) {
+      const d = event.data ?? {};
+
+      if (event.type === 'bot-started') {
+        phase = 'planning';
+        instruction = (d.instruction as string) ?? null;
+      } else if (event.type === 'node-start' && phase !== 'completed' && phase !== 'failed') {
+        phase = 'executing';
+      } else if (event.type === 'bot-completed') {
+        phase = (d.success as boolean) ? 'completed' : 'failed';
+      } else if (event.type === 'bot-failed') {
+        phase = 'failed';
+      } else if (event.type === 'cost-update') {
+        cost = (d.totalCost as number) ?? cost;
+      } else if (event.type === 'audit:plan-created' || event.type === 'plan-created') {
+        // Plan data may be at d.plan (structured) or directly on d (audit event)
+        const planData = (d.plan as Record<string, unknown>) ?? d;
+        const summary = (planData.summary as string) ?? '';
+        const steps =
+          (planData.steps as Array<{ id: string; operation: string; description: string }>) ?? [];
+        if (summary || steps.length > 0) {
+          plan = { summary, steps };
+        }
+      } else if (event.type === 'approval-needed') {
+        awaitingApproval = true;
+      } else if (event.type === 'audit:approval-decision') {
+        awaitingApproval = false;
+      }
+    }
+
+    if (isDone && phase !== 'completed' && phase !== 'failed') {
+      phase = 'completed'; // Stream ended but no explicit completion event
+    }
+
+    return { phase, instruction, cost, plan, awaitingApproval };
+  }, [events, isDone]);
+
+  return { timeline, phase, instruction, elapsed, cost, plan, awaitingApproval };
+}