Span Data Table

\n \n \n\n",[],[74,124],"7b113824-9f1c-11f0-a760-0224a6c84d84","demo.html","7b1138d8-9f1c-11f0-a760-0224a6c84d84",15,["D",1759360512102],"\n\n\n \n \n Span Data Table - Demo\n \n \n\n\n

\n \n \n

Demo Controls

\n \n \n \n

\n\n \n\n",[],[74,132],"296c6b02-9f1b-11f0-9265-0224a6c84d84","components","58406871-b539-4592-9c6a-9958c3fc35e4",["D",1759359945623],[145,146],[74,140],{"_37":155,"_13":156,"_40":157,"_42":141,"_43":44,"_45":158,"_47":48,"_49":159,"_17":160,"_52":53,"_54":161,"_55":56,"_57":-5,"_91":162,"_18":163},{"_37":147,"_13":148,"_40":149,"_42":141,"_43":44,"_45":150,"_47":48,"_49":151,"_17":51,"_52":53,"_54":152,"_55":56,"_57":-5,"_91":153,"_18":154},"d7f833c0-9f1d-11f0-9a0f-0224a6c84d84","Table.tsx","d7f834a6-9f1d-11f0-9a0f-0224a6c84d84",19,["D",1759361097464],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport * as React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nimport { cn } from \"../../shared/utils.ts\";\n\nconst Table = React.forwardRef<\n HTMLTableElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n

\n \n

\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n tr]:last:border-b-0\",\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n HTMLTableRowElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n HTMLTableCellElement,\n React.ThHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n HTMLTableCellElement,\n React.TdHTMLAttributes\n>(({ className, ...props }, ref) => (\n [role=checkbox]]:translate-y-[2px]\",\n className\n )}\n {...props}\n />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n))\nTableCaption.displayName = \"TableCaption\"\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableHead,\n TableRow,\n TableCell,\n TableCaption,\n}",[],[74,140,148],"63456a12-9f1c-11f0-8a91-0224a6c84d84","SpanTable.tsx","296c4e7e-9f1b-11f0-9265-0224a6c84d84",13,["D",1759360472168],5,"/** @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 spanDataSchema = 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\nexport const dataMessageSchema = z.object({\n type: z.literal(\"data\"),\n data: spanDataSchema,\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;\n\n// Simple table components (since we don't have shadcn/ui)\nconst Table: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = \"\" }) => (\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 }> = ({ children }) => (\n {children}\n);\n\nconst TableHead: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n \n {children}\n \n);\n\nconst TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\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({\n theme: \"light\" as \"light\" | \"dark\",\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 existing spans\n setSpans(prevSpans => [...prevSpans, 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 if (spans.length === 0) return [];\n // Get all possible keys from all spans to handle varying structures\n const allKeys = new Set();\n spans.forEach(span => {\n Object.keys(span).forEach(key => allKeys.add(key));\n });\n return Array.from(allKeys);\n }, [spans]);\n\n if (spans.length === 0) {\n return (\n

No span data available

Waiting for messages...

\n );\n }\n\n const themeClass = settings.theme === \"dark\" ? \"bg-gray-900 text-white\" : \"bg-white text-gray-900\";\n\n return (\n

Span Data Table

\n Showing {spans.length} span{spans.length !== 1 ? 's' : ''}\n {settings.readOnly && \" (Read-only mode)\"}\n

\n \n

\n \n \n \n {headers.map((header) => (\n \n {header.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase())}\n \n ))}\n \n \n \n {spans.map((span, index) => (\n \n {headers.map((header) => (\n \n

\n {header === \"metadata\" && span[header as keyof SpanData] ? (\n

\n                          {renderValue(span[header as keyof SpanData])}\n

\n ) : (\n \n {renderValue(span[header as keyof SpanData])}\n \n )}\n

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

\n );\n}",[],[74,140,156],["D",1759359973241],[167],[80],{"_37":168,"_13":169,"_40":170,"_42":81,"_43":44,"_45":171,"_47":48,"_49":172,"_17":76,"_52":173,"_54":174,"_55":56,"_57":-5,"_91":175,"_18":176},"7ecd577c-9f1c-11f0-9f98-0224a6c84d84","index.ts","39e1a18c-9f1b-11f0-acbe-0224a6c84d84",16,["D",1759360518367],"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 the main HTML file\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve the demo page\napp.get(\"/demo\", async (c) => {\n const html = await readFile(\"/frontend/demo.html\", import.meta.url);\n return c.html(html);\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// API endpoint to send sample data (for testing)\napp.post(\"/api/send-sample\", async (c) => {\n const body = await c.req.json();\n \n // In a real application, you might broadcast this to connected clients\n // For now, we'll just return the data that should be sent via postMessage\n return c.json({\n message: \"Sample data ready to send\",\n data: {\n type: \"data\",\n data: body\n }\n });\n});\n\nexport default app.fetch;",[],[80,169],"c5b53b34-9f1a-11f0-aa03-0224a6c84d84",["D",1759359778339],"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,"_229":225},"org",{"_11":12,"_223":-5,"_224":225,"_186":187,"_226":227,"_228":56},"branch",{"_17":150,"_13":16,"_37":44,"_215":177,"_216":-5,"_217":-5,"_218":-5,"_219":-5,"_220":-5,"_221":14,"_222":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzVTc4QUJqQzc3V0lLY05ES2RsWnNWRXo5YiJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":177,"_13":14,"_49":306,"_179":-5,"_180":56,"_181":182,"_183":182,"_184":-5,"_185":-5,"_186":187,"_188":170,"_189":48,"_190":48,"_191":-5,"_192":51,"_193":194,"_195":-5,"_196":-5,"_197":-5,"_198":-5,"_199":200,"_201":200,"_202":203,"_204":203,"_205":203,"_206":200,"_207":200,"_208":307,"_210":308,"_212":309,"_214":56},[267,269,276,278,279],"files",[267,268,269,270,271,272,273,274,275,276,277,278,279],"counts",{"_258":51,"_259":46,"_260":51,"_31":261,"_262":263},[248,249,250,251,252],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_37":79,"_13":80,"_40":81,"_42":-5,"_43":44,"_45":82,"_47":48,"_49":83,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_18":257},{"_37":73,"_13":74,"_40":75,"_42":-5,"_43":44,"_45":76,"_47":48,"_49":77,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_18":256},{"_37":66,"_13":67,"_40":68,"_42":-5,"_43":44,"_45":69,"_47":48,"_49":70,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_18":255},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":63,"_17":46,"_52":24,"_54":64,"_55":56,"_57":-5,"_18":254},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":50,"_17":51,"_52":53,"_54":19,"_55":56,"_57":-5,"_18":253},[39],[60],[67],[74],[80],"pulls","branches","forks",{"_264":51,"_266":51},"connections",{"_264":51,"_265":51},"count","unfilledCount","emptyCount",{"_37":79,"_13":80,"_40":81,"_42":-5,"_43":44,"_45":82,"_47":48,"_49":164,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_91":304,"_18":305},{"_37":168,"_13":169,"_40":170,"_42":81,"_43":44,"_45":171,"_47":48,"_49":172,"_17":76,"_52":173,"_54":174,"_55":56,"_57":-5,"_91":302,"_18":303},{"_37":73,"_13":74,"_40":75,"_42":-5,"_43":44,"_45":76,"_47":48,"_49":108,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_91":300,"_18":301},{"_37":139,"_13":140,"_40":141,"_42":75,"_43":44,"_45":76,"_47":48,"_49":142,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_91":298,"_18":299},{"_37":155,"_13":156,"_40":157,"_42":141,"_43":44,"_45":158,"_47":48,"_49":159,"_17":160,"_52":53,"_54":161,"_55":56,"_57":-5,"_91":296,"_18":297},{"_37":147,"_13":148,"_40":149,"_42":141,"_43":44,"_45":150,"_47":48,"_49":151,"_17":51,"_52":53,"_54":152,"_55":56,"_57":-5,"_91":294,"_18":295},{"_37":131,"_13":132,"_40":133,"_42":75,"_43":44,"_45":134,"_47":48,"_49":135,"_17":51,"_52":24,"_54":136,"_55":56,"_57":-5,"_91":292,"_18":293},{"_37":123,"_13":124,"_40":125,"_42":75,"_43":44,"_45":126,"_47":48,"_49":127,"_17":76,"_52":24,"_54":128,"_55":56,"_57":-5,"_91":290,"_18":291},{"_37":115,"_13":116,"_40":117,"_42":75,"_43":44,"_45":118,"_47":48,"_49":119,"_17":51,"_52":53,"_54":120,"_55":56,"_57":-5,"_91":288,"_18":289},{"_37":66,"_13":67,"_40":68,"_42":-5,"_43":44,"_45":69,"_47":48,"_49":97,"_17":51,"_52":71,"_54":-5,"_55":56,"_57":-5,"_91":286,"_18":287},{"_37":101,"_13":102,"_40":103,"_42":68,"_43":44,"_45":69,"_47":48,"_49":104,"_17":51,"_52":53,"_54":105,"_55":56,"_57":-5,"_91":284,"_18":285},{"_37":59,"_13":60,"_40":61,"_42":-5,"_43":44,"_45":62,"_47":48,"_49":94,"_17":46,"_52":24,"_54":64,"_55":56,"_57":-5,"_91":282,"_18":283},{"_37":38,"_13":39,"_40":41,"_42":-5,"_43":44,"_45":46,"_47":48,"_49":90,"_17":51,"_52":53,"_54":19,"_55":56,"_57":-5,"_91":280,"_18":281},[],[39],[],[60],[],[67,102],[277],[67],[],[74,116],[],[74,124],[],[74,132],[],[74,140,148],[],[74,140,156],[271,272],[74,140],[270,273,274,275],[74],[],[80,169],[268],[80],["D",1759359778339],{"_11":12,"_229":225},{"_11":12,"_223":-5,"_224":225,"_186":187,"_226":227,"_228":56},{"_17":150,"_13":16,"_37":44,"_215":177,"_216":-5,"_217":-5,"_218":-5,"_219":-5,"_220":-5,"_221":14,"_222":12},"ctx",{"_208":-5,"_245":343,"_344":345,"_346":347,"_348":56,"_349":56,"_350":56,"_351":48,"_352":-5,"_353":-7,"_354":-7,"_355":51,"_356":56,"_357":56,"_358":-5,"_359":56,"_360":56,"_361":56,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":16,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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