[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_184":185,"_186":187},"routes/_app.x.$handle.$name",{"_107":106,"_33":56,"_115":97,"_28":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_22":-5,"_127":-5,"_128":-5,"_129":26,"_130":131,"_132":26,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_54":55,"_33":56,"_38":57,"_58":-5,"_59":26,"_60":61,"_62":61,"_63":-5,"_64":-5,"_18":65,"_66":67,"_68":69,"_70":69,"_71":-5,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":26},"version",2,"changes",[19,20,21],"aiChatInfo","userId",{"_22":50,"_24":-7,"_25":26,"_27":26,"_28":51,"_30":51},{"_22":43,"_24":-7,"_25":26,"_27":26,"_28":44,"_30":44},{"_22":23,"_24":-7,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":-5,"_38":39,"_40":14,"_41":42,"_25":26},"previous","deleted",false,"deletedHere","path","frontend/components","latestPath","fileId","58406871-b539-4592-9c6a-9958c3fc35e4","name","components","fileType","directory","content","createdAt",["D",1759359945623],"branchVersion","branchId","c5b5ad30-9f1a-11f0-aa03-0224a6c84d84",{"_31":45,"_33":46,"_35":47,"_37":48,"_38":49,"_40":14,"_41":42,"_25":26},"frontend/components/SpanTable.tsx","296c4e7e-9f1b-11f0-9265-0224a6c84d84","SpanTable.tsx","script","/** @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}",["D",1759359945623],{"_31":52,"_33":51,"_35":36,"_37":-5,"_38":53,"_40":14,"_41":42,"_25":26},"frontend","0109715d-524a-4f93-8660-cc6d79a3287e",["D",1759359945623],"id","c5b53b34-9f1a-11f0-aa03-0224a6c84d84","table",["D",1759359778339],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199a201-a793-711b-b040-d4354de16e25","pinnedFileId","39e1a18c-9f1b-11f0-acbe-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199a201-a793-711b-b040-d93eb49f4c78","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_18":65,"_111":112,"_113":26},"branch",{"_13":96,"_33":97,"_54":42,"_98":55,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":56,"_105":106},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dpdiliberto","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzVTc4QUJqQzc3V0lLY05ES2RsWnNWRXo5YiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_54":55,"_33":56,"_38":180,"_58":-5,"_59":26,"_60":61,"_62":61,"_63":-5,"_64":-5,"_18":65,"_66":67,"_68":69,"_70":69,"_71":-5,"_72":73,"_74":75,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":181,"_91":182,"_93":183,"_95":26},"tree",[161,164],"files",[161,162,163,164],"counts",{"_151":73,"_152":143,"_153":73,"_154":155,"_156":157},"contents",[137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_54":148,"_33":51,"_31":52,"_142":-5,"_41":42,"_40":14,"_144":69,"_38":149,"_13":73,"_35":36,"_37":-5,"_25":26,"_146":-5,"_28":150},{"_54":139,"_33":140,"_31":141,"_142":-5,"_41":42,"_40":143,"_144":69,"_38":145,"_13":73,"_35":47,"_37":116,"_25":26,"_146":-5,"_28":147},"dc3a27c0-9f1a-11f0-a00f-0224a6c84d84","new-file-4156.ts","dc3a28b0-9f1a-11f0-a00f-0224a6c84d84","parentId",1,"latest",["D",1759359816111],"label",[140],"296c6800-9f1b-11f0-9265-0224a6c84d84",["D",1759359945623],[51],"pulls","branches","forks","envVars",{"_158":73,"_160":73},"connections",{"_158":73,"_159":73},"count","unfilledCount","emptyCount",{"_54":148,"_33":51,"_31":52,"_142":-5,"_41":42,"_40":14,"_144":69,"_38":177,"_13":73,"_35":36,"_37":-5,"_25":26,"_146":-5,"_166":178,"_28":179},{"_54":173,"_33":34,"_31":32,"_142":52,"_41":42,"_40":14,"_144":69,"_38":174,"_13":73,"_35":36,"_37":-5,"_25":26,"_146":-5,"_166":175,"_28":176},{"_54":169,"_33":46,"_31":45,"_142":32,"_41":42,"_40":14,"_144":26,"_38":170,"_13":73,"_35":47,"_37":48,"_25":26,"_146":-5,"_166":171,"_28":172},{"_54":139,"_33":140,"_31":141,"_142":-5,"_41":42,"_40":143,"_144":69,"_38":165,"_13":73,"_35":47,"_37":116,"_25":26,"_146":-5,"_166":167,"_28":168},["D",1759359816111],"children",[],[140],"296c4da2-9f1b-11f0-9265-0224a6c84d84",["D",1759359945623],[],[51,34,46],"296c6b02-9f1b-11f0-9265-0224a6c84d84",["D",1759359945623],[163],[51,34],["D",1759359945623],[162],[51],["D",1759359778339],{"_107":106,"_114":110},{"_107":106,"_108":-5,"_109":110,"_18":65,"_111":112,"_113":26},{"_13":96,"_33":97,"_54":42,"_98":55,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":56,"_105":106},"ctx",{"_89":-5,"_134":217,"_218":219,"_220":221,"_222":26,"_223":26,"_224":26,"_225":69,"_226":-5,"_227":-7,"_228":-7,"_229":73,"_230":26,"_231":26,"_232":-5,"_233":26,"_234":26,"_235":26,"_236":-5},"ENV",{"_188":189,"_190":191,"_192":97,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216},"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"]

Diff · v2