Function ValidationDock

frontend/src/components/workflow/ValidationDock.tsx:43–293

({ nodes, edges, mode, onNodeClick }: ValidationDockProps)

}

export function ValidationDock({ nodes, edges, mode, onNodeClick }: ValidationDockProps) {
  const { getComponent } = useComponentStore();
  const [isExpanded, setIsExpanded] = useState(false);
  const [isMobileSheetOpen, setIsMobileSheetOpen] = useState(false);
  const isMobile = useIsMobile();

  // Only show validation in design mode
  const isDesignMode = mode === 'design';

  const secrets = useSecretStore((state: SecretStore) => state.secrets);

  const validationIssues = useMemo<ValidationIssue[]>(() => {
    if (!isDesignMode) return [];

    const issues: ValidationIssue[] = [];

    nodes.forEach((node) => {
      const nodeData = node.data as any;
      const componentRef = nodeData.componentId ?? nodeData.componentSlug;
      const component = getComponent(componentRef);

      if (!component) return;

      // Get validation warnings using the existing utility
      // FrontendNodeData extends NodeData, so this cast is safe
      const warnings = getNodeValidationWarnings(
        node as Node<FrontendNodeData>,
        edges,
        component,
        secrets,
      );

      warnings.forEach((warning: string) => {
        issues.push({
          nodeId: node.id,
          nodeLabel: nodeData.label || component.name || node.id,
          message: warning,
        });
      });
    });

    return issues;
  }, [nodes, edges, getComponent, isDesignMode, secrets]);

  const totalIssues = validationIssues.length;
  const hasIssues = totalIssues > 0;
  const shouldCollapse = totalIssues > COLLAPSE_THRESHOLD;

  // Don't show dock if not in design mode
  if (!isDesignMode) {
    return null;
  }

  // Handle node click in mobile view - close sheet after clicking
  const handleMobileNodeClick = (nodeId: string) => {
    onNodeClick(nodeId);
    setIsMobileSheetOpen(false);
  };