\n \n \n\n",[],[199,201],"74fafaf4-9f1e-11f0-8bd2-0224a6c84d84","SpanTable.tsx","74fafba8-9f1e-11f0-8bd2-0224a6c84d84","b04b0cef-f88b-4a28-88ca-241149213d32",["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}",[],[199,216,209],"components","74fb1188-9f1e-11f0-8bd2-0224a6c84d84",["D",1759361360886],[178],[199,216],"74fb0e72-9f1e-11f0-8bd2-0224a6c84d84",["D",1759361360886],[177,179,180],[199],["D",1759361386200],[],[18,65],["D",1759361382022],[175],[18],["D",1759361311104],{"_11":12,"_129":71},{"_11":12,"_125":-5,"_70":71,"_31":69,"_126":127,"_128":30},{"_40":116,"_13":16,"_34":37,"_117":83,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":14,"_124":12},"ctx",{"_53":-5,"_148":268,"_269":270,"_271":272,"_273":30,"_274":30,"_275":30,"_276":24,"_277":-5,"_278":-7,"_279":-7,"_280":26,"_281":30,"_282":30,"_283":-5,"_284":30,"_285":30,"_286":30,"_287":-5},"ENV",{"_239":240,"_241":242,"_243":16,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267},"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"]

History · backend