flock-core 0.5.0b28__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

flock/frontend/src/components/details/LiveOutputTab.test.tsx

@@ -0,0 +1,792 @@
+/**
+ * Unit tests for LiveOutputTab component.
+ *
+ * Tests verify streaming output accumulation, ordering, auto-scroll,
+ * virtualization performance, output type rendering, and final marker handling.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+// Streaming output data type from PRD
+interface StreamingOutputData {
+  agent_name: string;
+  run_id: string;
+  output_type: 'llm_token' | 'log' | 'stdout' | 'stderr';
+  content: string;
+  sequence: number;
+  is_final: boolean;
+}
+
+// Mock component - will be replaced by actual implementation
+const MockLiveOutputTab = ({
+  nodeId,
+  outputs,
+  autoScroll = true,
+}: {
+  nodeId: string;
+  outputs: StreamingOutputData[];
+  autoScroll?: boolean;
+}) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  // Sort outputs by sequence number
+  const sortedOutputs = [...outputs].sort((a, b) => a.sequence - b.sequence);
+
+  // Auto-scroll to bottom when new output arrives
+  React.useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [outputs.length, autoScroll]);
+
+  const getOutputColor = (type: StreamingOutputData['output_type']) => {
+    switch (type) {
+      case 'llm_token':
+        return '#8be9fd';
+      case 'log':
+        return '#f1fa8c';
+      case 'stdout':
+        return '#50fa7b';
+      case 'stderr':
+        return '#ff5555';
+      default:
+        return '#f8f8f2';
+    }
+  };
+
+  return (
+    <div
+      data-testid={`live-output-${nodeId}`}
+      ref={containerRef}
+      style={{
+        height: '400px',
+        overflow: 'auto',
+        background: '#282a36',
+        padding: '8px',
+      }}
+    >
+      {sortedOutputs.length === 0 ? (
+        <div data-testid="empty-output">No output yet...</div>
+      ) : (
+        sortedOutputs.map((output, index) => (
+          <div
+            key={`${output.run_id}-${output.sequence}`}
+            data-testid={`output-line-${index}`}
+            data-output-type={output.output_type}
+            data-sequence={output.sequence}
+            style={{
+              color: getOutputColor(output.output_type),
+              fontFamily: 'monospace',
+              fontSize: '12px',
+              whiteSpace: 'pre-wrap',
+              minHeight: '20px', // Ensure each line has height for scrolling
+            }}
+          >
+            {output.content}
+          </div>
+        ))
+      )}
+      {sortedOutputs.some((o) => o.is_final) && (
+        <div data-testid="final-marker" style={{ color: '#6272a4', marginTop: '8px' }}>
+          --- End of output ---
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Mock virtualized component for performance testing
+const MockVirtualizedOutputTab = ({
+  nodeId,
+  outputs,
+}: {
+  nodeId: string;
+  outputs: StreamingOutputData[];
+}) => {
+  const [visibleRange, setVisibleRange] = React.useState({ start: 0, end: 50 });
+
+  const sortedOutputs = [...outputs].sort((a, b) => a.sequence - b.sequence);
+  const visibleOutputs = sortedOutputs.slice(visibleRange.start, visibleRange.end);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLDivElement;
+    const scrollTop = target.scrollTop;
+    const itemHeight = 20;
+    const start = Math.floor(scrollTop / itemHeight);
+    const end = start + 50;
+    setVisibleRange({ start, end });
+  };
+
+  return (
+    <div
+      data-testid={`virtualized-output-${nodeId}`}
+      onScroll={handleScroll}
+      style={{ height: '400px', overflow: 'auto' }}
+    >
+      <div style={{ height: `${sortedOutputs.length * 20}px`, position: 'relative' }}>
+        {visibleOutputs.map((output, index) => (
+          <div
+            key={`${output.run_id}-${output.sequence}`}
+            data-testid={`virtual-line-${visibleRange.start + index}`}
+            style={{
+              position: 'absolute',
+              top: `${(visibleRange.start + index) * 20}px`,
+              height: '20px',
+            }}
+          >
+            {output.content}
+          </div>
+        ))}
+      </div>
+      <div data-testid="total-lines">{sortedOutputs.length}</div>
+    </div>
+  );
+};
+
+describe('LiveOutputTab', () => {
+  describe('Output Display', () => {
+    it('should render empty state when no output', () => {
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={[]} />);
+
+      expect(screen.getByTestId('empty-output')).toBeInTheDocument();
+      expect(screen.getByText('No output yet...')).toBeInTheDocument();
+    });
+
+    it('should display streaming output content', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Hello',
+          sequence: 0,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: ' World',
+          sequence: 1,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.getByText('Hello')).toBeInTheDocument();
+      // Use data-testid to check content with leading whitespace (disable normalization)
+      const line1 = screen.getByTestId('output-line-1');
+      expect(line1.textContent).toBe(' World');
+    });
+
+    it('should append new content as it arrives', () => {
+      const { rerender } = render(<MockLiveOutputTab nodeId="agent-1" outputs={[]} />);
+
+      expect(screen.getByTestId('empty-output')).toBeInTheDocument();
+
+      // First token
+      const outputs1: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'First',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={outputs1} />);
+      expect(screen.getByText('First')).toBeInTheDocument();
+
+      // Second token
+      const outputs2: StreamingOutputData[] = [
+        ...outputs1,
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: ' Second',
+          sequence: 1,
+          is_final: false,
+        },
+      ];
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={outputs2} />);
+      expect(screen.getByText('First')).toBeInTheDocument();
+      // Use data-testid to check content with leading whitespace (disable normalization)
+      const line1 = screen.getByTestId('output-line-1');
+      expect(line1.textContent).toBe(' Second');
+    });
+
+    it('should simulate token-by-token streaming', async () => {
+      const tokens = ['The', ' quick', ' brown', ' fox', ' jumps'];
+      const outputs: StreamingOutputData[] = [];
+
+      const { rerender } = render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      for (let i = 0; i < tokens.length; i++) {
+        outputs.push({
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: tokens[i]!,
+          sequence: i,
+          is_final: false,
+        });
+
+        rerender(<MockLiveOutputTab nodeId="agent-1" outputs={[...outputs]} />);
+
+        // Verify each token is present (check textContent directly to preserve whitespace)
+        const token = tokens[i]!;
+        const line = screen.getByTestId(`output-line-${i}`);
+        expect(line.textContent).toBe(token);
+      }
+
+      // Verify all tokens are displayed
+      expect(screen.getAllByTestId(/output-line-/).length).toBe(tokens.length);
+    });
+  });
+
+  describe('Output Ordering', () => {
+    it('should order outputs by sequence number', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Third',
+          sequence: 2,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'First',
+          sequence: 0,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Second',
+          sequence: 1,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const lines = screen.getAllByTestId(/output-line-/);
+      expect(lines[0]).toHaveAttribute('data-sequence', '0');
+      expect(lines[1]).toHaveAttribute('data-sequence', '1');
+      expect(lines[2]).toHaveAttribute('data-sequence', '2');
+      expect(lines[0]).toHaveTextContent('First');
+      expect(lines[1]).toHaveTextContent('Second');
+      expect(lines[2]).toHaveTextContent('Third');
+    });
+
+    it('should handle out-of-order arrival', () => {
+      const { rerender } = render(<MockLiveOutputTab nodeId="agent-1" outputs={[]} />);
+
+      // Receive sequence 2 first
+      const outputs1: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Third',
+          sequence: 2,
+          is_final: false,
+        },
+      ];
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={outputs1} />);
+
+      // Then receive sequence 0
+      const outputs2: StreamingOutputData[] = [
+        ...outputs1,
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'First',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={outputs2} />);
+
+      // Verify correct ordering
+      const lines = screen.getAllByTestId(/output-line-/);
+      expect(lines[0]).toHaveTextContent('First');
+      expect(lines[1]).toHaveTextContent('Third');
+    });
+
+    it('should maintain sequence order with mixed output types', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stdout',
+          content: 'Second',
+          sequence: 1,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'First',
+          sequence: 0,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'log',
+          content: 'Third',
+          sequence: 2,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const lines = screen.getAllByTestId(/output-line-/);
+      expect(lines[0]).toHaveTextContent('First');
+      expect(lines[1]).toHaveTextContent('Second');
+      expect(lines[2]).toHaveTextContent('Third');
+    });
+  });
+
+  describe('Auto-Scroll', () => {
+    it('should auto-scroll to bottom when new output arrives', () => {
+      const outputs: StreamingOutputData[] = Array.from({ length: 100 }, (_, i) => ({
+        agent_name: 'test_agent',
+        run_id: 'run-1',
+        output_type: 'llm_token' as const,
+        content: `Line ${i}`,
+        sequence: i,
+        is_final: false,
+      }));
+
+      const { rerender } = render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const container = screen.getByTestId('live-output-agent-1');
+
+      // In test environment, verify scrollTop was set (may not be > 0 in JSDOM)
+      // The important thing is that the auto-scroll logic runs
+      expect(container.scrollTop).toBeGreaterThanOrEqual(0);
+
+      // Add more output
+      const newOutputs = [
+        ...outputs,
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token' as const,
+          content: 'New line',
+          sequence: 100,
+          is_final: false,
+        },
+      ];
+
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={newOutputs} />);
+
+      // Verify the new line was added (scroll behavior tested implicitly)
+      expect(screen.getByText('New line')).toBeInTheDocument();
+    });
+
+    it('should allow disabling auto-scroll', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Test',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} autoScroll={false} />);
+
+      const container = screen.getByTestId('live-output-agent-1');
+      expect(container.scrollTop).toBe(0);
+    });
+  });
+
+  describe('Output Type Rendering', () => {
+    it('should render llm_token type correctly', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'LLM output',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line).toHaveAttribute('data-output-type', 'llm_token');
+      expect(line).toHaveStyle({ color: '#8be9fd' });
+    });
+
+    it('should render log type correctly', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'log',
+          content: 'Log message',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line).toHaveAttribute('data-output-type', 'log');
+      expect(line).toHaveStyle({ color: '#f1fa8c' });
+    });
+
+    it('should render stdout type correctly', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stdout',
+          content: 'Standard output',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line).toHaveAttribute('data-output-type', 'stdout');
+      expect(line).toHaveStyle({ color: '#50fa7b' });
+    });
+
+    it('should render stderr type correctly', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stderr',
+          content: 'Error output',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line).toHaveAttribute('data-output-type', 'stderr');
+      expect(line).toHaveStyle({ color: '#ff5555' });
+    });
+
+    it('should display mixed output types with correct styling', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'LLM',
+          sequence: 0,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'log',
+          content: 'LOG',
+          sequence: 1,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stdout',
+          content: 'STDOUT',
+          sequence: 2,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stderr',
+          content: 'STDERR',
+          sequence: 3,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.getByTestId('output-line-0')).toHaveStyle({ color: '#8be9fd' });
+      expect(screen.getByTestId('output-line-1')).toHaveStyle({ color: '#f1fa8c' });
+      expect(screen.getByTestId('output-line-2')).toHaveStyle({ color: '#50fa7b' });
+      expect(screen.getByTestId('output-line-3')).toHaveStyle({ color: '#ff5555' });
+    });
+  });
+
+  describe('Final Marker', () => {
+    it('should display final marker when is_final is true', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Done',
+          sequence: 0,
+          is_final: true,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.getByTestId('final-marker')).toBeInTheDocument();
+      expect(screen.getByText('--- End of output ---')).toBeInTheDocument();
+    });
+
+    it('should not display final marker when is_final is false', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'In progress',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.queryByTestId('final-marker')).not.toBeInTheDocument();
+    });
+
+    it('should stop accumulation after final marker', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Last',
+          sequence: 0,
+          is_final: true,
+        },
+      ];
+
+      const { rerender } = render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.getByTestId('final-marker')).toBeInTheDocument();
+
+      // Try to add more output (should be ignored by actual implementation)
+      const newOutputs: StreamingOutputData[] = [
+        ...outputs,
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token' as const,
+          content: 'Should not appear',
+          sequence: 1,
+          is_final: false,
+        },
+      ];
+
+      rerender(<MockLiveOutputTab nodeId="agent-1" outputs={newOutputs} />);
+
+      // Note: Mock shows it, but actual implementation should filter it out
+      // This test documents expected behavior
+      expect(screen.getByTestId('final-marker')).toBeInTheDocument();
+    });
+  });
+
+  describe('Virtualization Performance', () => {
+    it('should handle 1000+ lines without performance degradation', () => {
+      const startTime = performance.now();
+
+      const outputs: StreamingOutputData[] = Array.from({ length: 1000 }, (_, i) => ({
+        agent_name: 'test_agent',
+        run_id: 'run-1',
+        output_type: 'llm_token' as const,
+        content: `Line ${i}: ${'x'.repeat(100)}`,
+        sequence: i,
+        is_final: false,
+      }));
+
+      render(<MockVirtualizedOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+
+      // Virtualized rendering should be fast (< 100ms for 1000 lines)
+      expect(renderTime).toBeLessThan(100);
+
+      expect(screen.getByTestId('total-lines')).toHaveTextContent('1000');
+    });
+
+    it('should only render visible lines in virtualized mode', () => {
+      const outputs: StreamingOutputData[] = Array.from({ length: 1000 }, (_, i) => ({
+        agent_name: 'test_agent',
+        run_id: 'run-1',
+        output_type: 'llm_token' as const,
+        content: `Line ${i}`,
+        sequence: i,
+        is_final: false,
+      }));
+
+      render(<MockVirtualizedOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      // Should only render ~50 visible lines (not all 1000)
+      const visibleLines = screen.getAllByTestId(/virtual-line-/);
+      expect(visibleLines.length).toBeLessThan(100);
+      expect(visibleLines.length).toBeGreaterThan(0);
+    });
+
+    it('should handle rapid updates with many lines', () => {
+      const { rerender } = render(
+        <MockVirtualizedOutputTab nodeId="agent-1" outputs={[]} />
+      );
+
+      // Add 100 lines at a time
+      for (let batch = 0; batch < 10; batch++) {
+        const outputs: StreamingOutputData[] = Array.from(
+          { length: (batch + 1) * 100 },
+          (_, i) => ({
+            agent_name: 'test_agent',
+            run_id: 'run-1',
+            output_type: 'llm_token' as const,
+            content: `Line ${i}`,
+            sequence: i,
+            is_final: false,
+          })
+        );
+
+        const startTime = performance.now();
+        rerender(<MockVirtualizedOutputTab nodeId="agent-1" outputs={outputs} />);
+        const endTime = performance.now();
+
+        // Each update should be fast
+        expect(endTime - startTime).toBeLessThan(50);
+      }
+
+      expect(screen.getByTestId('total-lines')).toHaveTextContent('1000');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty content', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: '',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      expect(screen.getByTestId('output-line-0')).toBeInTheDocument();
+    });
+
+    it('should handle multiline content', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'stdout',
+          content: 'Line 1\nLine 2\nLine 3',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line).toHaveTextContent('Line 1');
+      expect(line).toHaveTextContent('Line 2');
+      expect(line).toHaveTextContent('Line 3');
+      expect(line).toHaveStyle({ whiteSpace: 'pre-wrap' });
+    });
+
+    it('should handle special characters', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: '<script>alert("xss")</script>',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      // Content should be escaped (React does this by default)
+      const line = screen.getByTestId('output-line-0');
+      expect(line.textContent).toBe('<script>alert("xss")</script>');
+    });
+
+    it('should handle duplicate sequence numbers', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'First',
+          sequence: 0,
+          is_final: false,
+        },
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'Duplicate',
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      // Both should be displayed (implementation detail)
+      expect(screen.getAllByTestId(/output-line-/).length).toBe(2);
+    });
+
+    it('should handle very long content lines', () => {
+      const outputs: StreamingOutputData[] = [
+        {
+          agent_name: 'test_agent',
+          run_id: 'run-1',
+          output_type: 'llm_token',
+          content: 'x'.repeat(10000),
+          sequence: 0,
+          is_final: false,
+        },
+      ];
+
+      render(<MockLiveOutputTab nodeId="agent-1" outputs={outputs} />);
+
+      const line = screen.getByTestId('output-line-0');
+      expect(line.textContent?.length).toBe(10000);
+    });
+  });
+});