[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_196":197,"_198":199},"routes/_app.x.$handle.$name",{"_100":99,"_32":50,"_108":90,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_21":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":25,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",3,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","backend","latestPath","fileId","c94c2721-ab3a-4092-b7c6-6d387b393915","name","fileType","directory","content","createdAt",["D",1759361382022],"branchVersion","branchId","574e92a4-9f1e-11f0-8b84-0224a6c84d84",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"backend/index.ts","8194bac0-9f1e-11f0-a3d6-0224a6c84d84","index.ts","script","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;",["D",1759361382022],"id","574e43bc-9f1e-11f0-8b84-0224a6c84d84","table2",["D",1759361311104],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199a201-a793-711b-b040-d4354de16e25","pinnedFileId","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",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_48":40,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"isOwned",6,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dpdiliberto","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzVTc4QUJqQzc3V0lLY05ES2RsWnNWRXo5YiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_36":192,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":-5,"_58":-5,"_18":59,"_60":43,"_61":62,"_63":62,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":193,"_84":194,"_86":195,"_88":25},"tree",[154,156],"files",[154,155,156,157,158,159],"counts",{"_144":66,"_145":136,"_146":66,"_147":148,"_149":150},"contents",[130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":141,"_32":28,"_30":31,"_135":-5,"_39":40,"_38":14,"_137":62,"_36":142,"_13":66,"_33":34,"_35":-5,"_24":25,"_139":-5,"_27":143},{"_48":132,"_32":133,"_30":134,"_135":-5,"_39":40,"_38":136,"_137":62,"_36":138,"_13":66,"_33":34,"_35":-5,"_24":25,"_139":-5,"_27":140},"74fb0e72-9f1e-11f0-8bd2-0224a6c84d84","frontend","8b103307-f9cf-4d93-9ae2-944718b0f2e3","parentId",1,"latest",["D",1759361360886],"label",[133],"8194c484-9f1e-11f0-a3d6-0224a6c84d84",["D",1759361382022],[28],"pulls","branches","forks","envVars",{"_151":66,"_153":66},"connections",{"_151":66,"_152":66},"count","unfilledCount","emptyCount",{"_48":141,"_32":28,"_30":31,"_135":-5,"_39":40,"_38":14,"_137":62,"_36":189,"_13":66,"_33":34,"_35":-5,"_24":25,"_139":-5,"_166":190,"_27":191},{"_48":185,"_32":44,"_30":43,"_135":31,"_39":40,"_38":14,"_137":25,"_36":186,"_13":66,"_33":45,"_35":46,"_24":25,"_139":-5,"_166":187,"_27":188},{"_48":132,"_32":133,"_30":134,"_135":-5,"_39":40,"_38":136,"_137":62,"_36":182,"_13":66,"_33":34,"_35":-5,"_24":25,"_139":-5,"_166":183,"_27":184},{"_48":178,"_32":177,"_30":172,"_135":134,"_39":40,"_38":136,"_137":62,"_36":179,"_13":66,"_33":34,"_35":-5,"_24":25,"_139":-5,"_166":180,"_27":181},{"_48":169,"_32":170,"_30":171,"_135":172,"_39":40,"_38":136,"_137":62,"_36":173,"_13":66,"_33":45,"_35":174,"_24":25,"_139":-5,"_166":175,"_27":176},{"_48":160,"_32":161,"_30":162,"_135":134,"_39":40,"_38":163,"_137":62,"_36":164,"_13":66,"_33":21,"_35":165,"_24":25,"_139":-5,"_166":167,"_27":168},"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","children",[],[133,161],"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}",[],[133,177,170],"components","74fb1188-9f1e-11f0-8bd2-0224a6c84d84",["D",1759361360886],[158],[133,177],["D",1759361360886],[157,159],[133],"8194ba0c-9f1e-11f0-a3d6-0224a6c84d84",["D",1759361382022],[],[28,44],["D",1759361382022],[155],[28],["D",1759361311104],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":59,"_104":105,"_106":25},{"_13":89,"_32":90,"_48":40,"_91":49,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":50,"_98":99},"ctx",{"_82":-5,"_127":229,"_230":231,"_232":233,"_234":25,"_235":25,"_236":25,"_237":62,"_238":-5,"_239":-7,"_240":-7,"_241":66,"_242":25,"_243":25,"_244":-5,"_245":25,"_246":25,"_247":25,"_248":-5},"ENV",{"_200":201,"_202":203,"_204":90,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v3