Span Data Table Component

A clean, simple React table component that displays span data through message-based communication. The component listens for postMessage events and displays span data in a table format matching the provided design.

• Message-based data handling: Listens for postMessage events with span data
• Flexible schema: Uses Zod for runtime validation of incoming messages
• Clean design: Simple table layout without borders or heavy styling
• Type safety: Full TypeScript support with proper type inference
• Flexible data types: Handles any data type in span fields (string, number, object, etc.)

The component accepts data messages in this format:

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

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

// Send span data
window.postMessage({
  type: 'data',
  data: {
    span_id: 'd42cbeb6-aaff-43d6-8517-99bbbd82b941',
    input: "Some input text",
    output: "Some output text",
    expected: 1,
    metadata: { some: "additional info" }
  }
}, '*');

• Main page (/): Clean table with sample data
• Demo page (/demo): Interactive demo with buttons to test different data

├── backend/
│   └── index.ts          # Hono server for serving files
├── frontend/
│   ├── components/
│   │   └── SpanTable.tsx # Main table component
│   ├── index.html        # Clean table display
│   ├── demo.html         # Interactive demo
│   └── test-messages.js  # Test utilities
└── README.md

The table displays data in this column order:

• id: The span_id value
• input: Input data (any type, converted to string)
• output: Output data (any type, converted to string)
• expected: Expected data (any type, converted to string)
• metadata: Metadata (formatted as JSON if object, otherwise as string)

• Built with React 18.2.0
• Uses Zod for runtime schema validation
• Styled with TailwindCSS (minimal styling)
• No external UI library dependencies
• Fully typed with TypeScript
• Safe rendering of all data types including null/undefined values