A React table component that handles span data through message-based communication. The component listens for postMessage events and displays span data in a responsive table format.

• Message-based data handling: Listens for postMessage events with span data
• Flexible schema: Uses Zod for runtime validation of incoming messages
• Theme support: Light/dark theme switching via settings messages
• Read-only mode: Configurable read-only state
• Responsive design: Mobile-friendly table with overflow handling
• Type safety: Full TypeScript support with proper type inference

The component accepts two types of messages:

{
  type: 'data',
  data: {
    span_id: string,
    input: unknown,
    output: unknown,
    expected: unknown,
    metadata: unknown | null
  }
}

{
  type: 'settings',
  settings: {
    theme: 'light' | 'dark',
    readOnly: boolean
  }
}

The component automatically starts listening for messages when mounted. To send data:

// Send span data
window.postMessage({
  type: 'data',
  data: {
    span_id: 'unique-id',
    input: 'Some input text',
    output: 'Generated output',
    expected: 'Expected output',
    metadata: { additional: 'info' }
  }
}, '*');

// Update settings
window.postMessage({
  type: 'settings',
  settings: {
    theme: 'dark',
    readOnly: true
  }
}, '*');

The included demo provides buttons to:

• Add sample span data
• Toggle between light/dark themes
• Toggle read-only mode

├── backend/
│   └── index.ts          # Hono server for serving files
├── frontend/
│   ├── components/
│   │   └── SpanTable.tsx # Main table component
│   └── index.html        # Demo page
└── README.md

1. Flexible Data Handling: The component can handle any data type in the span fields (string, number, object, etc.)
2. Safe Rendering: All values are safely converted to strings for display
3. Metadata Formatting: JSON metadata is pretty-printed for readability
4. Responsive Design: Table scrolls horizontally on smaller screens
5. Error Handling: Invalid messages are logged but don't crash the component

• Built with React 18.2.0
• Uses Zod for runtime schema validation
• Styled with TailwindCSS
• No external UI library dependencies (custom table components)
• Fully typed with TypeScript