[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_241":242,"_243":244},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_180":-5,"_20":181,"_22":182,"_183":184,"_185":186,"_25":187,"_24":-5,"_188":-5,"_189":-5,"_190":54,"_191":192,"_193":46,"_194":-5,"_195":-5,"_196":197},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","dpdiliberto","name","table2","branchName","main","version","path","","project",{"_35":127,"_13":14,"_47":128,"_129":-5,"_130":54,"_131":132,"_133":132,"_134":-5,"_135":-5,"_136":137,"_138":120,"_139":46,"_140":46,"_141":-5,"_142":49,"_143":144,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":150,"_151":150,"_152":153,"_154":153,"_155":153,"_156":150,"_157":150,"_158":159,"_160":161,"_162":163,"_164":54},"tree",[70,71,72],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":69},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":63},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","8e6b4674-9f1e-11f0-96a1-0224a6c84d84","README.md","fileId","8e6b4732-9f1e-11f0-96a1-0224a6c84d84","parentId","branchId","574e92a4-9f1e-11f0-8b84-0224a6c84d84","branchVersion",5,"latest",true,"createdAt",["D",1759361403563],0,"fileType","content","# Span Data Table Component\n\nA React table component that handles span data through message passing with flexible data type support.\n\n## Features\n\n- **Message-based data handling**: Listens for `postMessage` events with structured data\n- **Flexible data types**: Handles strings, numbers, booleans, objects, arrays, and null values\n- **Theme support**: Light/dark theme switching via settings messages\n- **Type safety**: Uses Zod schemas for message validation\n- **Responsive design**: Uses Tailwind CSS for styling\n\n## Message Schema\n\nThe component accepts two types of messages:\n\n### Data Messages\n```typescript\n{\n type: 'data',\n data: {\n span_id: string,\n input: unknown,\n output: unknown,\n expected: unknown,\n metadata: unknown | null\n }\n}\n```\n\n### Settings Messages\n```typescript\n{\n type: 'settings',\n settings: {\n theme: 'light' | 'dark',\n readOnly: boolean\n }\n}\n```\n\n## Usage\n\nThe 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.\n\n### Sending Data\n```javascript\nwindow.postMessage({\n type: 'data',\n data: {\n span_id: 'unique-id',\n input: 'Some input text',\n output: 'Some output text',\n expected: 'Expected result',\n metadata: { additional: 'info' }\n }\n}, '*');\n```\n\n### Changing Settings\n```javascript\nwindow.postMessage({\n type: 'settings',\n settings: {\n theme: 'dark',\n readOnly: true\n }\n}, '*');\n```\n\n## Data Handling\n\n- **Flexible types**: All data fields accept any type (string, number, boolean, object, array)\n- **Safe rendering**: Complex objects are JSON.stringify'd, primitives are converted to strings\n- **Null handling**: Null and undefined values display as \"null\"\n- **Truncation**: Long content is truncated with hover tooltips showing full content\n\n## Sample Data\n\nThe component includes sample data on load:\n- ID: initial-sample\n- Input: \"An orphaned boy discovers he's a wizard on his 11th birthday...\"\n- Output: \"Harry Potter and the Philosopher's Stone\"\n- Expected: \"Harry Potter and the Sorcerer's Stone\"\n- Metadata: null\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server for serving files\n├── frontend/\n│ ├── components/\n│ │ └── SpanTable.tsx # Main table component\n│ └── index.html # Demo page with test messages\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /` - Serves the main demo page\n- `GET /frontend/*` - Serves frontend static files\n- `POST /api/send-message` - Test endpoint for message sending\n- `GET /api/health` - Health check endpoint\n\n## Development\n\nThe demo page automatically sends test messages to demonstrate the component functionality:\n1. Initial sample data loads immediately\n2. After 1 second: Additional test data with various data types\n3. After 3 seconds: Theme switches to dark mode\n\n## Dependencies\n\n- React 18.2.0\n- Zod for schema validation\n- Tailwind CSS for styling\n- Hono for the backend server","deleted",false,"label",[37],"74fb0e72-9f1e-11f0-8bd2-0224a6c84d84","frontend","8b103307-f9cf-4d93-9ae2-944718b0f2e3",1,["D",1759361360886],"directory",[58],"8194c484-9f1e-11f0-a3d6-0224a6c84d84","backend","c94c2721-ab3a-4092-b7c6-6d387b393915",3,["D",1759361382022],[65],{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":114,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":115,"_18":116},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":77,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":78,"_18":79},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":75,"_18":76},["D",1759361403563],"children",[],[37],["D",1759361360886],[80,81,82],[58],{"_35":100,"_13":101,"_38":102,"_40":59,"_41":42,"_43":60,"_45":46,"_47":103,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":104,"_18":105},{"_35":92,"_13":93,"_38":94,"_40":59,"_41":42,"_43":95,"_45":46,"_47":96,"_17":49,"_50":24,"_51":97,"_53":54,"_55":-5,"_74":98,"_18":99},{"_35":83,"_13":84,"_38":85,"_40":59,"_41":42,"_43":86,"_45":46,"_47":87,"_17":49,"_50":88,"_51":89,"_53":54,"_55":-5,"_74":90,"_18":91},"9b599df4-9f1e-11f0-9d94-0224a6c84d84","test-messages.js","9b599eb2-9f1e-11f0-9d94-0224a6c84d84",6,["D",1759361425260],"script","// Test script to send various message types to the SpanTable component\n// Run this in the browser console when the table is loaded\n\n// Test data message with various data types\nfunction sendTestData() {\n window.postMessage({\n type: 'data',\n data: {\n span_id: 'test-' + Date.now(),\n input: 'Test input with timestamp: ' + new Date().toISOString(),\n output: Math.random() > 0.5 ? 'Success' : 'Failure',\n expected: Math.floor(Math.random() * 100),\n metadata: {\n timestamp: new Date().toISOString(),\n random: Math.random(),\n nested: {\n deep: {\n value: 'deeply nested'\n }\n }\n }\n }\n }, '*');\n}\n\n// Test settings message\nfunction toggleTheme() {\n const isDark = document.body.classList.contains('dark');\n window.postMessage({\n type: 'settings',\n settings: {\n theme: isDark ? 'light' : 'dark',\n readOnly: Math.random() > 0.5\n }\n }, '*');\n}\n\n// Test with null/undefined values\nfunction sendNullData() {\n window.postMessage({\n type: 'data',\n data: {\n span_id: 'null-test-' + Date.now(),\n input: null,\n output: undefined,\n expected: '',\n metadata: null\n }\n }, '*');\n}\n\n// Test with complex objects\nfunction sendComplexData() {\n window.postMessage({\n type: 'data',\n data: {\n span_id: 'complex-' + Date.now(),\n input: ['array', 'with', 'multiple', 'strings'],\n output: {\n status: 'completed',\n results: [1, 2, 3, 4, 5],\n nested: {\n level1: {\n level2: 'deep value'\n }\n }\n },\n expected: true,\n metadata: {\n tags: ['test', 'complex', 'data'],\n metrics: {\n duration: 1.23,\n accuracy: 0.95\n }\n }\n }\n }, '*');\n}\n\n// Test invalid message (should be logged as error)\nfunction sendInvalidMessage() {\n window.postMessage({\n type: 'invalid',\n someData: 'this should be rejected'\n }, '*');\n}\n\n// Run all tests\nfunction runAllTests() {\n console.log('Running all tests...');\n sendTestData();\n setTimeout(sendComplexData, 500);\n setTimeout(sendNullData, 1000);\n setTimeout(toggleTheme, 1500);\n setTimeout(sendInvalidMessage, 2000);\n console.log('All tests queued!');\n}\n\n// Export functions for console use\nwindow.testMessages = {\n sendTestData,\n toggleTheme,\n sendNullData,\n sendComplexData,\n sendInvalidMessage,\n runAllTests\n};\n\nconsole.log('Test functions available at window.testMessages');\nconsole.log('Try: window.testMessages.runAllTests()');",[],[58,84],"7c2398f4-9f1e-11f0-8098-0224a6c84d84","index.html","7c2399bc-9f1e-11f0-8098-0224a6c84d84",2,["D",1759361372883],"\n\n\n \n \n Span Data Table\n \n \n\n\n

\n \n \n\n",[],[58,93],"74fb1188-9f1e-11f0-8bd2-0224a6c84d84","components","b04b0cef-f88b-4a28-88ca-241149213d32",["D",1759361360886],[106],[58,101],{"_35":107,"_13":108,"_38":109,"_40":102,"_41":42,"_43":60,"_45":46,"_47":110,"_17":49,"_50":88,"_51":111,"_53":54,"_55":-5,"_74":112,"_18":113},"74fafaf4-9f1e-11f0-8bd2-0224a6c84d84","SpanTable.tsx","74fafba8-9f1e-11f0-8bd2-0224a6c84d84",["D",1759361360886],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { z } from \"https://esm.sh/zod@3.22.4\";\n\n// Zod schemas for message validation\nexport const dataMessageSchema = z.object({\n type: z.literal(\"data\"),\n data: z.object({\n span_id: z.string(),\n input: z.unknown(),\n output: z.unknown(),\n expected: z.unknown(),\n metadata: z.unknown().nullable(),\n }),\n});\n\nexport const settingsMessageSchema = z.object({\n type: z.literal(\"settings\"),\n settings: z.object({\n theme: z.enum([\"light\", \"dark\"]),\n readOnly: z.boolean(),\n }),\n});\n\nexport const messageSchema = z.union([\n dataMessageSchema,\n settingsMessageSchema,\n]);\n\nexport type Message = z.infer;\nexport type SpanData = z.infer[\"data\"];\n\n// Table components (simplified shadcn/ui style)\nconst Table: React.FC<{ children: React.ReactNode; className?: string }> = ({ \n children, \n className = \"\" \n}) => (\n

\n \n {children}\n

\n);\n\nconst TableHeader: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n {children}\n);\n\nconst TableBody: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n {children}\n);\n\nconst TableRow: React.FC<{ children: React.ReactNode; className?: string }> = ({ \n children, \n className = \"\" \n}) => (\n \n {children}\n \n);\n\nconst TableHead: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\nconst TableCell: React.FC<{ children: React.ReactNode; className?: string }> = ({ \n children, \n className = \"\" \n}) => (\n \n {children}\n \n);\n\n// Helper function to safely render any value\nconst renderValue = (value: unknown): string => {\n if (value === null || value === undefined) {\n return \"null\";\n }\n if (typeof value === \"string\") {\n return value;\n }\n if (typeof value === \"number\" || typeof value === \"boolean\") {\n return String(value);\n }\n if (typeof value === \"object\") {\n try {\n return JSON.stringify(value, null, 2);\n } catch {\n return \"[Object]\";\n }\n }\n return String(value);\n};\n\nexport default function SpanTable() {\n const [spans, setSpans] = useState([]);\n const [settings, setSettings] = useState<{ theme: \"light\" | \"dark\"; readOnly: boolean }>({\n theme: \"light\",\n readOnly: false,\n });\n\n useEffect(() => {\n const handleMessage = (event: MessageEvent) => {\n try {\n const message = messageSchema.parse(event.data);\n \n if (message.type === \"data\") {\n // Add new span data to the list\n setSpans(prev => [...prev, message.data]);\n } else if (message.type === \"settings\") {\n setSettings(message.settings);\n }\n } catch (error) {\n console.error(\"Invalid message received:\", error);\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n\n // Add sample data for demonstration\n const sampleSpan: SpanData = {\n span_id: \"initial-sample\",\n input: \"An orphaned boy discovers he's a wizard on his 11th birthday when Hagrid escorts him to magic-teaching Hogwarts School.\",\n output: \"Harry Potter and the Philosopher's Stone\",\n expected: \"Harry Potter and the Sorcerer's Stone\",\n metadata: null,\n };\n setSpans([sampleSpan]);\n\n return () => {\n window.removeEventListener(\"message\", handleMessage);\n };\n }, []);\n\n const headers = useMemo(() => {\n return [\"ID\", \"Input\", \"Output\", \"Expected\", \"Metadata\"];\n }, []);\n\n if (spans.length === 0) {\n return (\n

No span data available

Waiting for data messages...

\n );\n }\n\n const isDark = settings.theme === \"dark\";\n const containerClass = isDark \n ? \"bg-gray-900 text-white min-h-screen p-4\" \n : \"bg-white text-gray-900 min-h-screen p-4\";\n\n return (\n

Span Data Table

\n Theme: {settings.theme} | Read Only: {settings.readOnly ? \"Yes\" : \"No\"} | \n Total Spans: {spans.length}\n

\n\n \n \n \n {headers.map((header) => (\n {header}\n ))}\n \n \n \n {spans.map((span, index) => (\n \n \n {span.span_id || `span-${index}`}\n \n \n

\n {renderValue(span.input)}\n

\n \n \n

\n {renderValue(span.output)}\n

\n \n \n

\n {renderValue(span.expected)}\n

\n \n \n

\n {renderValue(span.metadata)}\n

\n \n \n ))}\n \n

\n );\n}",[],[58,101,108],["D",1759361382022],[117],[65],{"_35":118,"_13":119,"_38":120,"_40":66,"_41":42,"_43":121,"_45":46,"_47":122,"_17":60,"_50":123,"_51":124,"_53":54,"_55":-5,"_74":125,"_18":126},"8412a0be-9f1e-11f0-9a3b-0224a6c84d84","index.ts","8194bac0-9f1e-11f0-a3d6-0224a6c84d84",4,["D",1759361386200],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API endpoint to send test messages (for external testing)\napp.post(\"/api/send-message\", async c => {\n const body = await c.req.json();\n \n // In a real scenario, you might broadcast this to connected clients\n // For now, we'll just return the message for testing\n return c.json({\n success: true,\n message: \"Message would be sent to clients\",\n data: body\n });\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[65,119],"574e43bc-9f1e-11f0-8b84-0224a6c84d84",["D",1759361311104],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","0199a201-a793-711b-b040-d4354de16e25","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","0199a201-a793-711b-b040-d93eb49f4c78","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_179":175},"org",{"_11":12,"_173":-5,"_174":175,"_136":137,"_176":177,"_178":54},"branch",{"_17":86,"_13":16,"_35":42,"_165":127,"_166":-5,"_167":-5,"_168":-5,"_169":-5,"_170":-5,"_171":14,"_172":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzVTc4QUJqQzc3V0lLY05ES2RsWnNWRXo5YiJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":127,"_13":14,"_47":237,"_129":-5,"_130":54,"_131":132,"_133":132,"_134":-5,"_135":-5,"_136":137,"_138":120,"_139":46,"_140":46,"_141":-5,"_142":49,"_143":144,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":150,"_151":150,"_152":153,"_154":153,"_155":153,"_156":150,"_157":150,"_158":238,"_160":239,"_162":240,"_164":54},[213,215,220],"files",[213,214,215,216,217,218,219,220],"counts",{"_204":49,"_205":60,"_206":49,"_31":207,"_208":209},[198,199,200],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":203},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_18":202},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":201},[37],[58],[65],"pulls","branches","forks",{"_210":49,"_212":49},"connections",{"_210":49,"_211":49},"count","unfilledCount","emptyCount",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":114,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":235,"_18":236},{"_35":118,"_13":119,"_38":120,"_40":66,"_41":42,"_43":121,"_45":46,"_47":122,"_17":60,"_50":123,"_51":124,"_53":54,"_55":-5,"_74":233,"_18":234},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":77,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":231,"_18":232},{"_35":100,"_13":101,"_38":102,"_40":59,"_41":42,"_43":60,"_45":46,"_47":103,"_17":49,"_50":62,"_51":-5,"_53":54,"_55":-5,"_74":229,"_18":230},{"_35":107,"_13":108,"_38":109,"_40":102,"_41":42,"_43":60,"_45":46,"_47":110,"_17":49,"_50":88,"_51":111,"_53":54,"_55":-5,"_74":227,"_18":228},{"_35":92,"_13":93,"_38":94,"_40":59,"_41":42,"_43":95,"_45":46,"_47":96,"_17":49,"_50":24,"_51":97,"_53":54,"_55":-5,"_74":225,"_18":226},{"_35":83,"_13":84,"_38":85,"_40":59,"_41":42,"_43":86,"_45":46,"_47":87,"_17":49,"_50":88,"_51":89,"_53":54,"_55":-5,"_74":223,"_18":224},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":73,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_74":221,"_18":222},[],[37],[],[58,84],[],[58,93],[],[58,101,108],[217],[58,101],[216,218,219],[58],[],[65,119],[214],[65],["D",1759361311104],{"_11":12,"_179":175},{"_11":12,"_173":-5,"_174":175,"_136":137,"_176":177,"_178":54},{"_17":86,"_13":16,"_35":42,"_165":127,"_166":-5,"_167":-5,"_168":-5,"_169":-5,"_170":-5,"_171":14,"_172":12},"ctx",{"_158":-5,"_195":274,"_275":276,"_277":278,"_279":54,"_280":54,"_281":54,"_282":46,"_283":-5,"_284":-7,"_285":-7,"_286":49,"_287":54,"_288":54,"_289":-5,"_290":54,"_291":54,"_292":54,"_293":-5},"ENV",{"_245":246,"_247":248,"_249":16,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code