[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_113":114,"_115":116},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","stevekrouse","name","deepseek-v41-flash-benchmark","path","frontend/components/MeasurementsPage.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/stevekrouse/deepseek-v41-flash-benchmark/code/frontend/components/MeasurementsPage.tsx","extension","id","618b3c01-a19b-4853-acfc-959c5263a091","MeasurementsPage.tsx","fileId","01a08da5-899f-73ab-baf1-b45af56befca","parentId","01a08da5-899f-73ab-baf1-c4c2f323caa6","branchId","0cb5a767-9630-4119-a265-8c9f5f633c9a","branchVersion",1,"latest",true,"createdAt",["D",1789082831202],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n useEffect,\n useMemo,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type {\n MeasurementListResponse,\n MeasurementPublicStatus,\n MeasurementSortDirection,\n MeasurementSortKey,\n} from \"../../shared/types.ts\";\nimport { formatTimestamp } from \"../format.ts\";\nimport { providerName } from \"../providers.ts\";\nimport { MeasurementsTable } from \"./MeasurementsTable.tsx\";\n\nconst MODEL_PAGE = \"https://vercel.com/ai-gateway/models/glm-5.3-flash\";\nconst PAGE_SIZE = 50;\nconst SORT_KEYS = new Set([\n \"runStartedAt\",\n \"provider\",\n \"attempt\",\n \"status\",\n \"startedAt\",\n \"ttftMs\",\n \"durationMs\",\n \"tokensPerSecond\",\n \"inputTokens\",\n \"outputTokens\",\n \"cacheReadTokens\",\n \"cacheWriteTokens\",\n \"costUsd\",\n \"message\",\n]);\n\nfunction readSortKey(params: URLSearchParams): MeasurementSortKey {\n const value = params.get(\"sort\") as MeasurementSortKey | null;\n return value && SORT_KEYS.has(value) ? value : \"startedAt\";\n}\n\nfunction readDirection(params: URLSearchParams): MeasurementSortDirection {\n return params.get(\"direction\") === \"asc\" ? \"asc\" : \"desc\";\n}\n\nfunction defaultDirection(key: MeasurementSortKey): MeasurementSortDirection {\n return key === \"startedAt\" || key === \"runStartedAt\" ||\n key === \"tokensPerSecond\" || key === \"inputTokens\" ||\n key === \"outputTokens\" || key === \"cacheReadTokens\" ||\n key === \"cacheWriteTokens\"\n ? \"desc\"\n : \"asc\";\n}\n\nfunction parsePage(params: URLSearchParams): number {\n const value = Number(params.get(\"page\") ?? \"1\");\n return Number.isSafeInteger(value) && value > 0 ? value : 1;\n}\n\nfunction attemptLabel(value: number): string {\n const ordinal = value === 1\n ? \"first request\"\n : value === 2\n ? \"second request\"\n : value === 3\n ? \"third request\"\n : value === 4\n ? \"fourth request\"\n : null;\n return \"Attempt \" + value + (ordinal ? \" · \" + ordinal : \"\");\n}\n\nexport function MeasurementsPage() {\n const [search, setSearch] = useState(window.location.search);\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const params = useMemo(() => new URLSearchParams(search), [search]);\n const provider = params.get(\"provider\") ?? \"\";\n const statusValue = params.get(\"status\");\n const status: MeasurementPublicStatus | \"\" =\n statusValue === \"success\" || statusValue === \"error\" ? statusValue : \"\";\n const attempt = params.get(\"attempt\") ?? \"\";\n const runId = params.get(\"run\") ?? \"\";\n const sortKey = readSortKey(params);\n const direction = readDirection(params);\n const page = parsePage(params);\n\n useEffect(() => {\n document.title = \"Measurements · GLM-5.3-Flash Benchmark\";\n const onPopState = () => setSearch(window.location.search);\n window.addEventListener(\"popstate\", onPopState);\n return () => window.removeEventListener(\"popstate\", onPopState);\n }, []);\n\n useEffect(() => {\n const controller = new AbortController();\n const apiParams = new URLSearchParams({\n limit: String(PAGE_SIZE),\n offset: String((page - 1) * PAGE_SIZE),\n sort: sortKey,\n direction,\n });\n if (provider) apiParams.set(\"provider\", provider);\n if (status) apiParams.set(\"status\", status);\n if (attempt) apiParams.set(\"attempt\", attempt);\n if (runId) apiParams.set(\"run\", runId);\n\n setLoading(true);\n setData(null);\n setError(null);\n fetch(\"/api/measurements?\" + apiParams.toString(), {\n signal: controller.signal,\n })\n .then(async (response) => {\n if (!response.ok) {\n throw new Error(\n \"Couldn’t load measurements. Refresh the page to try again.\",\n );\n }\n const body = await response.json() as {\n measurements: MeasurementListResponse;\n };\n const lastPage = Math.max(\n 1,\n Math.ceil(body.measurements.total / PAGE_SIZE),\n );\n if (page > lastPage) {\n const next = new URLSearchParams(window.location.search);\n if (lastPage === 1) next.delete(\"page\");\n else next.set(\"page\", String(lastPage));\n const nextSearch = next.toString();\n window.history.replaceState(\n null,\n \"\",\n \"/measurements\" + (nextSearch ? \"?\" + nextSearch : \"\"),\n );\n setSearch(nextSearch ? \"?\" + nextSearch : \"\");\n return;\n }\n setData(body.measurements);\n })\n .catch((caught) => {\n if (caught instanceof DOMException && caught.name === \"AbortError\") {\n return;\n }\n setData(null);\n setError(caught instanceof Error ? caught.message : String(caught));\n })\n .finally(() => {\n if (!controller.signal.aborted) setLoading(false);\n });\n\n return () => controller.abort();\n }, [provider, status, attempt, runId, sortKey, direction, page]);\n\n function updateParams(changes: Record) {\n const next = new URLSearchParams(search);\n for (const [key, value] of Object.entries(changes)) {\n if (value) next.set(key, value);\n else next.delete(key);\n }\n const nextSearch = next.toString();\n const url = \"/measurements\" + (nextSearch ? \"?\" + nextSearch : \"\");\n window.history.pushState(null, \"\", url);\n setSearch(nextSearch ? \"?\" + nextSearch : \"\");\n }\n\n function changeFilter(key: string, value: string) {\n updateParams({ [key]: value || null, page: null });\n }\n\n function sortBy(key: MeasurementSortKey) {\n const nextDirection = key === sortKey\n ? direction === \"asc\" ? \"desc\" : \"asc\"\n : defaultDirection(key);\n updateParams({ sort: key, direction: nextDirection, page: null });\n }\n\n const first = data && data.total > 0 ? data.offset + 1 : 0;\n const last = data ? Math.min(data.offset + data.items.length, data.total) : 0;\n const totalPages = data ? Math.max(1, Math.ceil(data.total / PAGE_SIZE)) : 1;\n const hasActiveQuery = Boolean(\n provider || status || attempt || runId || params.has(\"sort\") ||\n params.has(\"direction\") || page > 1,\n );\n\n return (\n

\n \n

GLM 5.3 Flash

Measurements

\n One SQLite row per provider attempt, with timing, token usage,\n cache telemetry, cost, and captured failures.\n

\n\n \n

\n \n Provider\n changeFilter(\"provider\", event.currentTarget.value)}\n className=\"mt-1.5 block h-10 w-full rounded border border-gray-300 bg-white px-3 text-sm font-normal text-black\"\n >\n \n {(data?.providers ?? []).map((value) => (\n \n ))}\n \n \n\n \n Status\n changeFilter(\"status\", event.currentTarget.value)}\n className=\"mt-1.5 block h-10 w-full rounded border border-gray-300 bg-white px-3 text-sm font-normal text-black\"\n >\n \n \n \n \n \n\n \n Attempt\n changeFilter(\"attempt\", event.currentTarget.value)}\n className=\"mt-1.5 block h-10 w-full rounded border border-gray-300 bg-white px-3 text-sm font-normal text-black\"\n >\n \n {(data?.attempts ?? []).map((value) => (\n \n ))}\n \n \n\n \n Run\n changeFilter(\"run\", event.currentTarget.value)}\n className=\"mt-1.5 block h-10 w-full rounded border border-gray-300 bg-white px-3 text-sm font-normal text-black\"\n >\n \n {(data?.runs ?? []).map((run) => (\n \n ))}\n \n \n

\n\n

\n {loading\n ? \"Loading measurements…\"\n : data\n ? \"Showing \" + first + \"–\" + last + \" of \" + data.total + \" measurements\"\n : \"No measurements loaded\"}\n

\n {hasActiveQuery && (\n updateParams({\n provider: null,\n status: null,\n attempt: null,\n run: null,\n sort: null,\n direction: null,\n page: null,\n })}\n className=\"text-gray-600 hover:text-black hover:underline\"\n >\n Clear filters\n \n )}\n

\n\n {error && (\n

\n {error}\n

\n )}\n\n {loading\n ? (\n

\n Loading measurements…\n

\n )\n : data\n ? (\n \n )\n : null}\n\n {data && data.total > PAGE_SIZE && (\n

\n updateParams({\n page: page > 2 ? String(page - 1) : null,\n })}\n className=\"rounded border border-gray-300 bg-white px-3 py-2 text-black hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Previous\n \n \n Page {Math.min(page, totalPages)} of {totalPages}\n \n = totalPages || loading}\n onClick={() => updateParams({ page: String(page + 1) })}\n className=\"rounded border border-gray-300 bg-white px-3 py-2 text-black hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40\"\n >\n Next\n \n

\n )}\n \n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","1ea4658b-1977-4a2c-8356-9d6ab6609397",["D",1789082831202],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Run and compare AI Gateway providers for deepseek-v4.1-flash","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a08da5-899f-73ab-baf1-f0227ea1ff9b","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","1ea4658b19774a2c83569d6ab6609397","tursoHostname","1ea4658b19774a2c83569d6ab6609397-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518676100],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_112":108},"org",{"_9":10,"_106":-5,"_107":108,"_59":60,"_109":110,"_111":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":49,"_95":96,"_97":98,"_99":54,"_100":101,"_102":103,"_104":12,"_105":10},"isOwned",81,"main","projectId","forkedBranchId","24cb14b4-1851-4548-adc6-43a574860a3d","forkedBranchVersion",322,"forkedProjectPrivacy","forkedProjectId","d055324c-28f9-4529-80dd-e9bbfbdbeb65","forkedProjectOrgId","ba7bb5fb-1abb-4ffb-8f3d-7c244782e5f7","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_146":147,"_148":149,"_150":151,"_152":44,"_153":44,"_154":44,"_155":34,"_156":-5,"_157":-7,"_158":-7,"_159":38,"_160":44,"_161":44,"_162":-5,"_163":44,"_164":44,"_165":44,"_166":-5},"ENV",{"_117":118,"_119":120,"_121":93,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143,"_144":145},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]