@invect/ui 0.0.1

package/src/components/flow-viewer/use-execution-log-data.ts

@@ -0,0 +1,374 @@
+import { useMemo } from 'react';
+import type {
+  NodeExecution,
+  NodeExecutionStatus,
+  ReactFlowNode,
+  GraphNodeType,
+  ToolExecutionRecord,
+  AgentExecutionOutput,
+  AgentFinishReason,
+} from '@invect/core/types';
+import {
+  NodeExecutionStatus as NodeStatusEnum,
+  GraphNodeType as GraphNodeTypeEnum,
+} from '@invect/core/types';
+
+/**
+ * Individual tool call executed by an AI Agent
+ */
+export interface ExecutionLogToolCall {
+  id: string;
+  toolId: string;
+  toolName: string;
+  input: Record<string, unknown>;
+  output?: unknown;
+  error?: string;
+  success: boolean;
+  iteration: number;
+  executionTimeMs: number;
+}
+
+/**
+ * Agent-specific metadata for execution attempts
+ */
+export interface AgentExecutionMetadata {
+  iterations: number;
+  finishReason: AgentFinishReason;
+  finalResponse: string;
+  model?: string;
+  provider?: string;
+  tokenUsage?: {
+    conversationTokensEstimate: number;
+    truncationOccurred: boolean;
+  };
+}
+
+export interface ExecutionLogAttempt {
+  id: string;
+  attemptNumber: number;
+  label: string;
+  status: NodeExecutionStatus;
+  startedAt?: string;
+  completedAt?: string;
+  durationMs?: number;
+  inputs?: Record<string, unknown>;
+  outputs?: NodeExecution['outputs'];
+  error?: string;
+  nodeExecutionId?: string;
+  /** Tool calls for agent nodes */
+  toolCalls?: ExecutionLogToolCall[];
+  /** Agent-specific metadata for agent nodes */
+  agentMetadata?: AgentExecutionMetadata;
+  /** True when this attempt is a loop/mapper iteration (detected via _item in inputs) */
+  isLoopIteration?: boolean;
+  /** The _item metadata for loop iterations */
+  iterationItem?: {
+    value: unknown;
+    index: number;
+    iteration: number;
+    first: boolean;
+    last: boolean;
+    total: number;
+  };
+}
+
+export interface ExecutionLogNode {
+  nodeId: string;
+  nodeName: string;
+  nodeType?: GraphNodeType | string;
+  latestStatus: NodeExecutionStatus;
+  attempts: ExecutionLogAttempt[];
+  definitionIndex: number;
+}
+
+export interface SelectedExecutionAttempt {
+  nodeId: string;
+  attemptId: string;
+  /** Optional: selected tool call ID within an agent node */
+  toolCallId?: string;
+}
+
+type RawAttempt = ExecutionLogAttempt & {
+  startedAtMs?: number;
+  isPlaceholder?: boolean;
+  _isLoopIteration?: boolean;
+};
+
+type UseExecutionLogDataParams = {
+  nodes?: ReactFlowNode[];
+  nodeExecutions?: NodeExecution[];
+};
+
+const toIsoString = (value?: string | Date | null): string | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+
+  return value.toISOString();
+};
+
+const toTimestamp = (value?: string | Date | null): number | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  const date = typeof value === 'string' ? new Date(value) : value;
+  const time = date?.getTime();
+  return Number.isFinite(time) ? time : undefined;
+};
+
+const toDuration = (
+  duration?: number | null,
+  startedAt?: string | Date | null,
+  completedAt?: string | Date | null,
+) => {
+  if (typeof duration === 'number') {
+    return duration;
+  }
+
+  const start = toTimestamp(startedAt);
+  const end = toTimestamp(completedAt);
+
+  if (start === undefined || end === undefined) {
+    return undefined;
+  }
+
+  return Math.max(end - start, 0);
+};
+
+/**
+ * Extract tool execution records from an Agent node's output
+ * Agent outputs store tool results in: outputs.data.variables.output.value.toolResults
+ */
+function extractAgentToolCalls(
+  nodeExecution: NodeExecution,
+): { toolCalls: ExecutionLogToolCall[]; agentMetadata: AgentExecutionMetadata } | undefined {
+  // Only process AGENT nodes
+  if (nodeExecution.nodeType !== GraphNodeTypeEnum.AGENT) {
+    return undefined;
+  }
+
+  // Navigate to the agent output value
+  const outputs = nodeExecution.outputs as Record<string, unknown> | undefined;
+  const data = outputs?.data as Record<string, unknown> | undefined;
+  const variables = data?.variables as Record<string, unknown> | undefined;
+  const outputVar = variables?.output as Record<string, unknown> | undefined;
+  const agentOutput = outputVar?.value as AgentExecutionOutput | undefined;
+
+  if (!agentOutput) {
+    return undefined;
+  }
+
+  // Extract metadata
+  const metadata = data?.metadata as Record<string, unknown> | undefined;
+
+  const agentMetadata: AgentExecutionMetadata = {
+    iterations: agentOutput.iterations ?? 0,
+    finishReason: agentOutput.finishReason ?? 'completed',
+    finalResponse: agentOutput.finalResponse ?? '',
+    model: metadata?.model as string | undefined,
+    provider: metadata?.provider as string | undefined,
+    tokenUsage: agentOutput.tokenUsage,
+  };
+
+  // Extract tool calls
+  const toolResults = agentOutput.toolResults ?? [];
+  const toolCalls: ExecutionLogToolCall[] = toolResults.map(
+    (tool: ToolExecutionRecord, index: number) => ({
+      id: `${nodeExecution.id}_tool_${index}`,
+      toolId: tool.toolId,
+      toolName: tool.toolName,
+      input: tool.input,
+      output: tool.output,
+      error: tool.error,
+      success: tool.success,
+      iteration: tool.iteration,
+      executionTimeMs: tool.executionTimeMs,
+    }),
+  );
+
+  return { toolCalls, agentMetadata };
+}
+
+export function useExecutionLogData({ nodes, nodeExecutions }: UseExecutionLogDataParams) {
+  return useMemo(() => {
+    const definitionNodes = nodes ?? [];
+    const nodeOrderMap = new Map<string, number>();
+
+    definitionNodes.forEach((node, index) => {
+      nodeOrderMap.set(node.id, index);
+    });
+
+    const groups = new Map<
+      string,
+      {
+        nodeId: string;
+        nodeName: string;
+        nodeType?: GraphNodeType | string;
+        definitionIndex: number;
+        attempts: RawAttempt[];
+      }
+    >();
+
+    const ensureGroup = (nodeId: string) => {
+      const existing = groups.get(nodeId);
+      if (existing) {
+        return existing;
+      }
+
+      const definitionNode = definitionNodes.find((n) => n.id === nodeId);
+      const newGroup = {
+        nodeId,
+        nodeName: definitionNode?.data?.display_name || nodeId,
+        nodeType: definitionNode?.type,
+        definitionIndex: nodeOrderMap.get(nodeId) ?? Number.MAX_SAFE_INTEGER,
+        attempts: [],
+      };
+      groups.set(nodeId, newGroup);
+      return newGroup;
+    };
+
+    (nodeExecutions ?? []).forEach((execution) => {
+      const group = ensureGroup(execution.nodeId);
+
+      // Extract tool calls for agent nodes
+      const agentData = extractAgentToolCalls(execution);
+
+      // Detect loop iteration via _item metadata in inputs
+      const itemMeta = execution.inputs?._item as
+        | {
+            value: unknown;
+            index: number;
+            iteration: number;
+            first: boolean;
+            last: boolean;
+            total: number;
+          }
+        | undefined;
+      const isLoop =
+        itemMeta !== null &&
+        itemMeta !== undefined &&
+        typeof itemMeta === 'object' &&
+        'iteration' in itemMeta;
+
+      group.attempts.push({
+        id: execution.id,
+        attemptNumber: 0,
+        label: '',
+        status: execution.status,
+        startedAt: toIsoString(execution.startedAt),
+        completedAt: toIsoString(execution.completedAt),
+        durationMs: toDuration(execution.duration, execution.startedAt, execution.completedAt),
+        inputs: execution.inputs,
+        outputs: execution.outputs,
+        error: execution.error,
+        nodeExecutionId: execution.id,
+        startedAtMs: toTimestamp(execution.startedAt),
+        isPlaceholder: false,
+        toolCalls: agentData?.toolCalls,
+        agentMetadata: agentData?.agentMetadata,
+        _isLoopIteration: isLoop,
+        isLoopIteration: isLoop,
+        iterationItem: isLoop ? itemMeta : undefined,
+      });
+    });
+
+    // Ensure every node is represented even if it has not executed yet
+    definitionNodes.forEach((node) => {
+      if (!groups.has(node.id)) {
+        groups.set(node.id, {
+          nodeId: node.id,
+          nodeName: node.data?.display_name || node.id,
+          nodeType: node.type,
+          definitionIndex: nodeOrderMap.get(node.id) ?? Number.MAX_SAFE_INTEGER,
+          attempts: [
+            {
+              id: `${node.id}-pending`,
+              attemptNumber: 1,
+              label: 'Pending',
+              status: NodeStatusEnum.PENDING,
+              inputs: {},
+              outputs: undefined,
+              error: undefined,
+              nodeExecutionId: undefined,
+              startedAtMs: undefined,
+              isPlaceholder: true,
+            },
+          ],
+        });
+      }
+    });
+
+    const orderedNodes = Array.from(groups.values())
+      .map((group) => {
+        const sortedAttempts = group.attempts
+          .slice()
+          .sort((a, b) => {
+            const aKey = a.startedAtMs ?? Number.MAX_SAFE_INTEGER;
+            const bKey = b.startedAtMs ?? Number.MAX_SAFE_INTEGER;
+            if (aKey !== bKey) {
+              return aKey - bKey;
+            }
+            return a.id.localeCompare(b.id);
+          })
+          .map((attempt, index, arr) => {
+            // Check if all non-placeholder attempts in this group are loop iterations
+            const allLoop = arr.filter((a) => !a.isPlaceholder).every((a) => a._isLoopIteration);
+            let label: string;
+            if (attempt.isPlaceholder) {
+              label = 'Pending';
+            } else if (allLoop && attempt._isLoopIteration) {
+              label = `Iteration #${index + 1}`;
+            } else if (index === 0) {
+              label = `Attempt #${index + 1}`;
+            } else {
+              label = `Retry #${index + 1}`;
+            }
+            return {
+              ...attempt,
+              attemptNumber: index + 1,
+              label,
+            };
+          });
+
+        const sortedAttemptsWithoutMeta = sortedAttempts.map(
+          ({ startedAtMs, isPlaceholder, _isLoopIteration, ...rest }) => rest,
+        );
+        const firstTimestamp = sortedAttempts.find(
+          (attempt) => attempt.startedAtMs !== undefined,
+        )?.startedAtMs;
+        const latestStatus =
+          sortedAttemptsWithoutMeta[sortedAttemptsWithoutMeta.length - 1]?.status ??
+          NodeStatusEnum.PENDING;
+
+        return {
+          nodeId: group.nodeId,
+          nodeName: group.nodeName,
+          nodeType: group.nodeType,
+          attempts: sortedAttemptsWithoutMeta,
+          latestStatus,
+          definitionIndex: group.definitionIndex,
+          sortTimestamp: firstTimestamp,
+        };
+      })
+      .sort((a, b) => {
+        const aKey = a.sortTimestamp ?? Number.MAX_SAFE_INTEGER;
+        const bKey = b.sortTimestamp ?? Number.MAX_SAFE_INTEGER;
+
+        if (aKey !== bKey) {
+          return aKey - bKey;
+        }
+
+        return a.definitionIndex - b.definitionIndex;
+      })
+      .map(({ sortTimestamp: _sortTimestamp, ...rest }) => rest);
+
+    return {
+      nodes: orderedNodes,
+    };
+  }, [nodes, nodeExecutions]);
+}

package/src/components/graph/BatchFlowEdge.tsx

@@ -0,0 +1,229 @@
+import React, { memo, useMemo } from 'react';
+import {
+  type EdgeProps,
+  getBezierPath,
+  EdgeLabelRenderer,
+  BaseEdge,
+  MarkerType,
+} from '@xyflow/react';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { X, Zap, AlertTriangle, SkipForward } from 'lucide-react';
+
+// Enhanced edge data interface
+export interface BatchFlowEdgeData extends Record<string, unknown> {
+  label?: string;
+  type?: 'default' | 'data' | 'conditional' | 'error' | 'skipped';
+  animated?: boolean;
+  highlighted?: boolean;
+  selected?: boolean;
+  sourceHandle?: string;
+  targetHandle?: string;
+  sourceNodeStatus?: string;
+  targetNodeStatus?: string;
+  validation?: {
+    valid: boolean;
+    message?: string;
+  };
+}
+
+// Edge styles based on type and state - Updated to match Invect's edge styling
+const getEdgeStyles = (data?: BatchFlowEdgeData, selected?: boolean) => {
+  const baseStyle = {
+    strokeWidth: 2,
+    stroke: 'var(--muted-foreground)', // Theme-aware default edge color
+    fill: 'none', // Explicitly set fill to none for SVG paths
+  };
+
+  if (selected) {
+    return {
+      ...baseStyle,
+      stroke: 'var(--edge-selected-stroke, #3b82f6)', // Blue for selected, uses CSS variable for theme awareness
+      strokeWidth: 3,
+    };
+  }
+
+  if (data?.highlighted) {
+    return {
+      ...baseStyle,
+      stroke: '#3b82f6', // Blue for highlighted
+      strokeWidth: 2.5,
+    };
+  }
+
+  switch (data?.type) {
+    case 'data':
+      return {
+        ...baseStyle,
+        stroke: '#3b82f6', // Blue-500 equivalent
+        strokeWidth: 2,
+      };
+    case 'conditional':
+      return {
+        ...baseStyle,
+        stroke: '#f59e0b', // Amber-500 equivalent
+        strokeWidth: 2,
+        strokeDasharray: '5,5',
+      };
+    case 'error':
+      return {
+        ...baseStyle,
+        stroke: '#ef4444', // Red-500
+        strokeWidth: 2,
+      };
+    case 'skipped':
+      return {
+        ...baseStyle,
+        stroke: '#6b7280', // Gray-500 for skipped edges
+        strokeWidth: 1.5,
+        strokeDasharray: '8,4', // Longer dashes for skipped appearance
+        opacity: 0.5, // Make it more transparent
+      };
+    default:
+      return baseStyle;
+  }
+};
+
+// Main Invect Edge Component
+export const BatchFlowEdge = memo(function BatchFlowEdge(props: EdgeProps) {
+  const {
+    id: _id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    data,
+    selected,
+    markerEnd,
+  } = props;
+
+  const batchflowData = data as BatchFlowEdgeData;
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25, // Add curvature for smooth bezier curves
+  });
+
+  const edgeStyle = useMemo(
+    () => ({
+      ...getEdgeStyles(batchflowData, selected),
+      ...style,
+    }),
+    [
+      batchflowData?.type,
+      batchflowData?.highlighted,
+      batchflowData?.validation?.valid,
+      selected,
+      style,
+    ],
+  );
+
+  const showLabel = batchflowData?.label || batchflowData?.validation?.message;
+  const isError =
+    batchflowData?.type === 'error' ||
+    (batchflowData?.validation && !batchflowData.validation.valid);
+
+  return (
+    <>
+      <BaseEdge path={edgePath} style={edgeStyle} markerEnd={markerEnd} interactionWidth={20} />
+
+      {showLabel && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              fontSize: 12,
+              pointerEvents: 'all',
+            }}
+            className="nodrag nopan"
+          >
+            {batchflowData?.label && (
+              <div
+                className={cn(
+                  'bg-background/95 backdrop-blur-sm border border-border/50 rounded-lg px-3 py-1.5 shadow-lg text-xs font-medium',
+                  'transition-all duration-200 hover:shadow-xl hover:scale-105',
+                  'max-w-[200px] truncate',
+                  selected && 'ring-2 ring-primary/50 ring-offset-1',
+                  isError && 'border-destructive/70 bg-destructive/10 text-destructive',
+                )}
+              >
+                <div className="flex items-center gap-1.5">
+                  {batchflowData.type === 'conditional' && (
+                    <Zap className="w-3 h-3 text-amber-500 shrink-0" />
+                  )}
+                  {batchflowData.type === 'skipped' && (
+                    <SkipForward className="w-3 h-3 text-muted-foreground shrink-0" />
+                  )}
+                  {isError && <AlertTriangle className="w-3 h-3 text-destructive shrink-0" />}
+                  <span
+                    className={cn(
+                      'text-foreground truncate',
+                      isError && 'text-destructive',
+                      batchflowData.type === 'skipped' && 'text-muted-foreground',
+                    )}
+                  >
+                    {batchflowData.label}
+                  </span>
+                </div>
+                {batchflowData?.validation?.message && (
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {batchflowData.validation.message}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {selected && (
+              <Button
+                variant="destructive"
+                size="icon"
+                className="w-6 h-6 ml-2 opacity-80 hover:opacity-100"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  // Edge deletion handled by parent component via onEdgesDelete
+                }}
+              >
+                <X className="w-3 h-3" />
+              </Button>
+            )}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+});
+
+BatchFlowEdge.displayName = 'BatchFlowEdge';
+
+// Predefined edge types matching Invect's patterns
+const _edgeTypes = {
+  // invect: BatchFlowEdge,
+  default: BatchFlowEdge,
+};
+
+// Edge creation utilities
+
+// Default edge styles for different connection types
+export const defaultEdgeOptions = {
+  type: 'default',
+  animated: false,
+  style: {
+    strokeWidth: 2,
+    stroke: 'var(--muted-foreground)', // Theme-aware default edge color
+    fill: 'none',
+  },
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: 'var(--muted-foreground)', // Theme-aware marker color
+  },
+};

package/src/components/graph/LayoutSelector.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip';
+import { cn } from '../../lib/utils';
+import { AlignHorizontalDistributeCenter } from 'lucide-react';
+import { useToolbarCollapsed } from '../flow-editor/toolbar-context';
+import type { LayoutAlgorithm } from '../../utils/layoutUtils';
+
+interface LayoutSelectorProps {
+  currentLayout: LayoutAlgorithm;
+  onLayoutChange: (layout: LayoutAlgorithm, direction?: 'TB' | 'BT' | 'LR' | 'RL') => void;
+  className?: string;
+}
+
+export const LayoutSelector: React.FC<LayoutSelectorProps> = ({ onLayoutChange, className }) => {
+  const collapsed = useToolbarCollapsed();
+
+  const handleRealign = () => {
+    onLayoutChange('elkjs', 'LR');
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      <div className="flex items-center">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRealign}
+              className="h-8 gap-1.5 rounded-md px-2.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <AlignHorizontalDistributeCenter className="w-3.5 h-3.5" />
+              {!collapsed && 'Realign'}
+            </Button>
+          </TooltipTrigger>
+          {collapsed && <TooltipContent side="top">Realign</TooltipContent>}
+        </Tooltip>
+      </div>
+    </div>
+  );
+};

package/src/components/graph/index.ts

@@ -0,0 +1,61 @@
+// Export all graph components
+
+// Export new Invect-inspired components
+export { BatchFlowEdge, defaultEdgeOptions } from './BatchFlowEdge';
+export { LayoutSelector } from './LayoutSelector';
+
+export { langflowColors, type NodeStatus } from './styleUtils';
+export type { BatchFlowEdgeData } from './BatchFlowEdge';
+
+// Import types from core
+import type { NodeExecutionStatus } from '@invect/core/types';
+
+// Types matching Invect's node structure, extending ReactFlow's expected types
+export interface BatchFlowNodeData extends Record<string, unknown> {
+  id: string;
+  type: string; // This is the key used for style mapping, e.g., "OpenAIModel"
+  display_name: string;
+  description?: string;
+  icon?: string; // Invect's icon name (e.g., "OpenAI", "MessagesSquare")
+  frozen?: boolean;
+  beta?: boolean;
+  deprecated?: boolean;
+  outputs?: Array<{
+    name: string;
+    display_name: string;
+    type: string; // Data type, e.g., "text", "ChatHistory"
+    required?: boolean;
+  }>;
+  inputs?: Array<{
+    name: string;
+    display_name: string;
+    type: string; // Data type
+    required?: boolean;
+    value?: unknown;
+  }>;
+  template?: Record<
+    string,
+    {
+      // Parameters
+      display_name: string;
+      type: string; // Parameter type, e.g., "str", "int", "bool", "code"
+      required?: boolean;
+      show?: boolean; // Whether to show in the UI by default
+      value?: unknown;
+      options?: unknown[]; // For dropdowns
+      list?: boolean; // If it's a list input
+      multiline?: boolean; // For text areas
+      placeholder?: string;
+      password?: boolean;
+      advanced?: boolean; // If it's an advanced parameter
+      _input_type?: string; // Invect input type for handle generation
+    }
+  >;
+  connectedTemplateFields?: Set<string>; // Set of template field names that are connected
+  executionStatus?: NodeExecutionStatus; // Execution status from backend
+  executionError?: string; // Execution error message
+  executionOutput?: unknown; // Output data from completed node execution
+  // selected?: boolean; // Provided by NodeProps
+  // showNode?: boolean; // Invect specific, might map to a local state like isExpanded
+  flow?: unknown; // Flow context if needed
+}