Function EventInspector

frontend/src/components/timeline/EventInspector.tsx:120–854

({ className, layoutVariant = 'stacked-soft' }: EventInspectorProps)

};

export function EventInspector({ className, layoutVariant = 'stacked-soft' }: EventInspectorProps) {
  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set());
  const [fullMessageModal, setFullMessageModal] = useState<{
    open: boolean;
    message: string;
    title: string;
  }>({
    open: false,
    message: '',
    title: '',
  });
  const [diagnosticsDialogOpen, setDiagnosticsDialogOpen] = useState<string | null>(null);
  const autoSelectionSignatureRef = useRef<string | null>(null);
  const eventsListRef = useRef<HTMLUListElement>(null);
  const autoScrollRef = useRef<boolean>(true);

  const {
    selectedRunId,
    events,
    currentTime,
    nodeStates,
    dataFlows,
    selectedNodeId,
    selectedEventId,
    selectEvent,
    selectNode,
    seek,
    playbackMode,
    isPlaying,
  } = useExecutionTimelineStore();

  const filteredEvents = useMemo(() => {
    if (!selectedNodeId) {
      return [];
    }
    return events.filter((event) => event.nodeId === selectedNodeId);
  }, [events, selectedNodeId]);

  const displayEvents = filteredEvents.length > 0 ? filteredEvents : events;

  const displaySignature = useMemo(() => {
    if (displayEvents.length === 0) {
      return `${selectedRunId ?? 'none'}|${selectedNodeId ?? 'all'}|empty`;
    }
    const firstId = displayEvents[0].id;
    const lastId = displayEvents[displayEvents.length - 1].id;
    return `${selectedRunId ?? 'none'}|${selectedNodeId ?? 'all'}|${firstId}-${lastId}`;
  }, [displayEvents, selectedRunId, selectedNodeId]);

  useEffect(() => {
    if (displayEvents.length === 0) {
      if (selectedEventId !== null) {
        selectEvent(null);
      }
      autoSelectionSignatureRef.current = displaySignature;
      return;
    }