Span Data Table Component

A React table component that handles span data through message passing with flexible data type support.

• Message-based data handling: Listens for postMessage events with structured data
• Flexible data types: Handles strings, numbers, booleans, objects, arrays, and null values
• Theme support: Light/dark theme switching via settings messages
• Type safety: Uses Zod schemas for message validation
• Responsive design: Uses Tailwind CSS for styling

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 listens for window.postMessage events and validates them against the schema. Invalid messages are logged as errors but don't crash the component.

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

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

• Flexible types: All data fields accept any type (string, number, boolean, object, array)
• Safe rendering: Complex objects are JSON.stringify'd, primitives are converted to strings
• Null handling: Null and undefined values display as "null"
• Truncation: Long content is truncated with hover tooltips showing full content

The component includes sample data on load:

• ID: initial-sample
• Input: "An orphaned boy discovers he's a wizard on his 11th birthday..."
• Output: "Harry Potter and the Philosopher's Stone"
• Expected: "Harry Potter and the Sorcerer's Stone"
• Metadata: null

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

• GET / - Serves the main demo page
• GET /frontend/* - Serves frontend static files
• POST /api/send-message - Test endpoint for message sending
• GET /api/health - Health check endpoint

The demo page automatically sends test messages to demonstrate the component functionality:

1. Initial sample data loads immediately
2. After 1 second: Additional test data with various data types
3. After 3 seconds: Theme switches to dark mode

• React 18.2.0
• Zod for schema validation
• Tailwind CSS for styling
• Hono for the backend server