PromptCompare

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_307":308,"_309":310},"routes/_app.x.$handle.$name",{"_97":96,"_31":44,"_105":87,"_26":52,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":24,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":24},"version",18,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/ConversationView.tsx","latestPath","fileId","d4d24e4a-0ddd-11f1-a6ad-42dde27851f2","name","ConversationView.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ConversationView.tsx\nimport React, {\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport type { ConversationDetail, ModelInfo } from \"../../shared/types.ts\";\nimport { MessageRow } from \"./MessageRow.tsx\";\nimport { PromptInput } from \"./PromptInput.tsx\";\n\ninterface ConversationViewProps {\n conversationId: string;\n models: ModelInfo[];\n onTitleUpdate: () => void;\n}\n\ninterface StreamingState {\n [modelId: string]: string;\n}\n\nexport function ConversationView(\n { conversationId, models, onTitleUpdate }: ConversationViewProps,\n) {\n const [conversation, setConversation] = useState(\n null,\n );\n const [streaming, setStreaming] = useState(false);\n const [streamingResponses, setStreamingResponses] = useState(\n {},\n );\n const [streamingMessageContent, setStreamingMessageContent] = useState<\n string | null\n >(null);\n const messagesEndRef = useRef(null);\n\n const modelNames = Object.fromEntries(models.map((m) => [m.id, m.name]));\n\n const loadConversation = useCallback(async () => {\n const res = await fetch(`/api/conversations/${conversationId}`);\n const data = await res.json();\n setConversation(data);\n }, [conversationId]);\n\n useEffect(() => {\n loadConversation();\n setStreamingResponses({});\n setStreamingMessageContent(null);\n }, [conversationId]);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [conversation, streamingResponses]);\n\n const handleSend = async (content: string) => {\n if (!conversation) return;\n\n setStreaming(true);\n setStreamingMessageContent(content);\n // Initialize streaming state for each model\n const initialState: StreamingState = {};\n for (const modelId of conversation.model_ids) {\n initialState[modelId] = \"\";\n }\n setStreamingResponses(initialState);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ conversation_id: conversationId, content }),\n });\n\n const reader = response.body?.getReader();\n if (!reader) return;\n\n const decoder = new TextDecoder();\n let buffer = \"\";\n let currentEvent = \"\";\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() || \"\";\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n currentEvent = line.slice(7).trim();\n } else if (line.startsWith(\"data: \")) {\n try {\n const data = JSON.parse(line.slice(6));\n if (currentEvent === \"chunk\" && data.content && data.model_id) {\n setStreamingResponses((prev) => ({\n ...prev,\n [data.model_id]: (prev[data.model_id] || \"\") + data.content,\n }));\n }\n } catch {\n // Skip unparseable\n }\n currentEvent = \"\";\n } else if (line.trim() === \"\") {\n currentEvent = \"\";\n }\n }\n }\n } catch (err) {\n console.error(\"Stream error:\", err);\n } finally {\n setStreaming(false);\n setStreamingMessageContent(null);\n setStreamingResponses({});\n await loadConversation();\n onTitleUpdate();\n }\n };\n\n if (!conversation) {\n return (\n

\n Loading...\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

{conversation.title}

\n {conversation.model_ids.map((id) => (\n \n {modelNames[id] || id}\n \n ))}\n

\n\n {/* Messages */}\n

\n {conversation.messages.map((msg) => (\n {\n const resp = msg.responses.find((r) => r.model_id === modelId);\n return { model_id: modelId, content: resp?.content || \"\" };\n })}\n modelNames={modelNames}\n />\n ))}\n\n {/* Currently streaming message */}\n {streamingMessageContent && (\n ({\n model_id: modelId,\n content: streamingResponses[modelId] || \"\",\n }))}\n modelNames={modelNames}\n streaming\n />\n )}\n

\n\n \n

\n );\n}\n","createdAt",["D",1771538183447],"branchVersion","branchId","bc95f0ee-0dd2-11f1-8bfd-42dde27851f2","id","bc957d26-0dd2-11f1-8bfd-42dde27851f2","promptCompare",["D",1771533418336],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","b8db9d60-1994-11f0-a97f-49be2029e0a3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5affebf8-2371-44b9-a6da-146d4a0e1f13","tursoName","bc957d260dd211f18bfd42dde27851f2","tursoHostname","bc957d260dd211f18bfd42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789530642963],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":24},"branch",{"_13":86,"_31":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"isOwned",191,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","drewmcdonald","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmtBUlRqVEEwb1lKTWo3UHNHN25IZlo0UFYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_31":44,"_37":302,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":66,"_67":303,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":304,"_81":305,"_83":306,"_85":24},"tree",[176,181,184,186,193],"files",[176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193],"counts",{"_166":60,"_167":145,"_168":60,"_169":170,"_171":172},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":160,"_31":161,"_29":162,"_134":-5,"_40":41,"_39":163,"_136":137,"_37":164,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_26":165},{"_42":154,"_31":155,"_29":156,"_134":-5,"_40":41,"_39":157,"_136":137,"_37":158,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_26":159},{"_42":148,"_31":149,"_29":150,"_134":-5,"_40":41,"_39":151,"_136":137,"_37":152,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_26":153},{"_42":142,"_31":143,"_29":144,"_134":-5,"_40":41,"_39":145,"_136":137,"_37":146,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_26":147},{"_42":131,"_31":132,"_29":133,"_134":-5,"_40":41,"_39":135,"_136":137,"_37":138,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_26":141},"d440b0c0-0ddd-11f1-affc-42dde27851f2","shared","d440b188-0ddd-11f1-affc-42dde27851f2","parentId",4,"latest",true,["D",1771538182510],"directory","label",[132],"d41df620-0ddd-11f1-af68-42dde27851f2","frontend","d41df706-0ddd-11f1-af68-42dde27851f2",1,["D",1771538182280],[143],"d44b1e98-0ddd-11f1-affc-42dde27851f2","docs","d44b1f88-0ddd-11f1-affc-42dde27851f2",5,["D",1771538182578],[149],"d43583d0-0ddd-11f1-affc-42dde27851f2","backend","d4358470-0ddd-11f1-affc-42dde27851f2",3,["D",1771538182437],[155],"d42b1f9e-0ddd-11f1-affc-42dde27851f2",".claude","d42b2052-0ddd-11f1-affc-42dde27851f2",2,["D",1771538182366],[161],"pulls","branches","forks","envVars",{"_173":163,"_175":60},"connections",{"_173":60,"_174":60},"count","unfilledCount","emptyCount",{"_42":160,"_31":161,"_29":162,"_134":-5,"_40":41,"_39":163,"_136":137,"_37":299,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":300,"_26":301},{"_42":294,"_31":279,"_29":289,"_134":162,"_40":41,"_39":295,"_136":137,"_37":296,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":297,"_26":298},{"_42":288,"_31":280,"_29":274,"_134":289,"_40":41,"_39":290,"_136":137,"_37":291,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":292,"_26":293},{"_42":281,"_31":282,"_29":283,"_134":274,"_40":41,"_39":284,"_136":137,"_37":285,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":286,"_26":287},{"_42":271,"_31":272,"_29":273,"_134":274,"_40":41,"_39":275,"_136":137,"_37":276,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":277,"_26":278},{"_42":154,"_31":155,"_29":156,"_134":-5,"_40":41,"_39":157,"_136":137,"_37":268,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":269,"_26":270},{"_42":261,"_31":262,"_29":263,"_134":156,"_40":41,"_39":264,"_136":137,"_37":265,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":266,"_26":267},{"_42":254,"_31":255,"_29":256,"_134":156,"_40":41,"_39":257,"_136":137,"_37":258,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":259,"_26":260},{"_42":148,"_31":149,"_29":150,"_134":-5,"_40":41,"_39":151,"_136":137,"_37":251,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":252,"_26":253},{"_42":244,"_31":245,"_29":246,"_134":150,"_40":41,"_39":247,"_136":137,"_37":248,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":249,"_26":250},{"_42":142,"_31":143,"_29":144,"_134":-5,"_40":41,"_39":145,"_136":137,"_37":241,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":242,"_26":243},{"_42":236,"_31":215,"_29":209,"_134":144,"_40":41,"_39":237,"_136":137,"_37":238,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":239,"_26":240},{"_42":232,"_31":32,"_29":30,"_134":209,"_40":41,"_39":14,"_136":137,"_37":233,"_13":60,"_33":34,"_35":36,"_23":24,"_140":-5,"_195":234,"_26":235},{"_42":224,"_31":225,"_29":226,"_134":209,"_40":41,"_39":227,"_136":137,"_37":228,"_13":60,"_33":34,"_35":229,"_23":24,"_140":-5,"_195":230,"_26":231},{"_42":216,"_31":217,"_29":218,"_134":209,"_40":41,"_39":219,"_136":137,"_37":220,"_13":60,"_33":34,"_35":221,"_23":24,"_140":-5,"_195":222,"_26":223},{"_42":206,"_31":207,"_29":208,"_134":209,"_40":41,"_39":210,"_136":137,"_37":211,"_13":60,"_33":34,"_35":212,"_23":24,"_140":-5,"_195":213,"_26":214},{"_42":198,"_31":199,"_29":200,"_134":144,"_40":41,"_39":201,"_136":137,"_37":202,"_13":60,"_33":20,"_35":203,"_23":24,"_140":-5,"_195":204,"_26":205},{"_42":131,"_31":132,"_29":133,"_134":-5,"_40":41,"_39":135,"_136":137,"_37":194,"_13":60,"_33":139,"_35":-5,"_23":24,"_140":-5,"_195":196,"_26":197},["D",1771538182510],"children",[],[132],"d4bf34d6-0ddd-11f1-af68-42dde27851f2","index.html","d4bf36c0-0ddd-11f1-af68-42dde27851f2",15,["D",1771538183337],"\n\n\n \n \n \n PromptCompare\n \n \n \n \n \n

\n \n \n\n",[],[143,199],"d4cc7ba0-0ddd-11f1-bb81-42dde27851f2","Sidebar.tsx","d4cc7dee-0ddd-11f1-bb81-42dde27851f2","d456d4c2-0ddd-11f1-affc-42dde27851f2",17,["D",1771538183419],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/Sidebar.tsx\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Conversation } from \"../../shared/types.ts\";\n\ninterface SidebarProps {\n conversations: Conversation[];\n activeId: string | null;\n onSelect: (id: string) => void;\n onNewChat: () => void;\n onDelete: (id: string) => void;\n onLogout: () => void;\n}\n\nexport function Sidebar(\n { conversations, activeId, onSelect, onNewChat, onDelete, onLogout }:\n SidebarProps,\n) {\n return (\n

\n \n + New Comparison\n \n

\n {conversations.map((conv) => (\n onSelect(conv.id)}\n >\n {conv.title}\n {\n e.stopPropagation();\n onDelete(conv.id);\n }}\n className=\"opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-400 ml-2\"\n >\n x\n \n

\n ))}\n

\n {\n await fetch(\"/api/auth/logout\", { method: \"POST\" });\n onLogout();\n }}\n className=\"text-sm text-gray-400 hover:text-white\"\n >\n Sign out\n \n

\n );\n}\n",[],[143,215,207],"components","d4bb0c3a-0ddd-11f1-af68-42dde27851f2","PromptInput.tsx","d4bb0d02-0ddd-11f1-af68-42dde27851f2",14,["D",1771538183310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/PromptInput.tsx\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface PromptInputProps {\n onSend: (content: string) => void;\n disabled: boolean;\n}\n\nexport function PromptInput({ onSend, disabled }: PromptInputProps) {\n const [value, setValue] = useState(\"\");\n const textareaRef = useRef(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = value.trim();\n if (!trimmed || disabled) return;\n onSend(trimmed);\n setValue(\"\");\n if (textareaRef.current) textareaRef.current.style.height = \"auto\";\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit(e);\n }\n };\n\n const handleInput = () => {\n const el = textareaRef.current;\n if (el) {\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, 200) + \"px\";\n }\n };\n\n return (\n \n );\n}\n",[],[143,215,217],"d4c4acf4-0ddd-11f1-a0cd-42dde27851f2","ModelPicker.tsx","d4c4adc6-0ddd-11f1-a0cd-42dde27851f2",16,["D",1771538183358],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/ModelPicker.tsx\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ModelInfo } from \"../../shared/types.ts\";\n\ninterface ModelPickerProps {\n models: ModelInfo[];\n onConfirm: (modelIds: string[]) => void;\n onCancel: () => void;\n}\n\nexport function ModelPicker({ models, onConfirm, onCancel }: ModelPickerProps) {\n const [selected, setSelected] = useState>(new Set());\n\n const toggle = (id: string) => {\n setSelected((prev) => {\n const next = new Set(prev);\n if (next.has(id)) {\n next.delete(id);\n } else if (next.size < 4) {\n next.add(id);\n }\n return next;\n });\n };\n\n // Group by family\n const families = new Map();\n for (const m of models) {\n const fam = m.family;\n if (!families.has(fam)) families.set(fam, []);\n families.get(fam)!.push(m);\n }\n\n return (\n

Select Models

\n Choose up to 4 models to compare ({selected.size}/4)\n

\n\n {Array.from(families.entries()).map(([family, familyModels]) => (\n

\n {family}\n

\n {familyModels.map((model) => (\n = 4\n ? \"opacity-50 cursor-not-allowed\"\n : \"\"\n }`}\n >\n toggle(model.id)}\n disabled={!selected.has(model.id) && selected.size >= 4}\n className=\"rounded\"\n />\n

\n {model.name}\n

\n \n ${model.cost.input}/${model.cost.output} per 1M\n \n \n ))}\n

\n ))}\n\n

\n \n Cancel\n \n onConfirm(Array.from(selected))}\n disabled={selected.size === 0}\n className=\"px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50\"\n >\n Start Comparison\n \n

\n );\n}\n",[],[143,215,225],"d4d24d82-0ddd-11f1-a6ad-42dde27851f2",["D",1771538183447],[],[143,215,32],"d456d404-0ddd-11f1-affc-42dde27851f2",6,["D",1771538182654],[188,189,190,191],[143,215],["D",1771538182280],[187,192],[143],"d4899330-0ddd-11f1-affc-42dde27851f2","plans","d4899416-0ddd-11f1-affc-42dde27851f2",10,["D",1771538182987],[],[149,245],["D",1771538182578],[185],[149],"d47e06f0-0ddd-11f1-affc-42dde27851f2","routes","d47e07f4-0ddd-11f1-affc-42dde27851f2",9,["D",1771538182911],[],[155,255],"d46f556a-0ddd-11f1-affc-42dde27851f2","database","d46f5632-0ddd-11f1-affc-42dde27851f2",8,["D",1771538182814],[],[155,262],["D",1771538182437],[182,183],[155],"d4abe7b4-0ddd-11f1-bb81-42dde27851f2","scripts","d4abe890-0ddd-11f1-bb81-42dde27851f2","d493db2e-0ddd-11f1-affc-42dde27851f2",13,["D",1771538183208],[],[161,279,280,272],"skills","ai-elements","d49fa990-0ddd-11f1-affc-42dde27851f2","references","d49faa8a-0ddd-11f1-affc-42dde27851f2",12,["D",1771538183130],[],[161,279,280,282],"d493da5c-0ddd-11f1-affc-42dde27851f2","d461f898-0ddd-11f1-83db-42dde27851f2",11,["D",1771538183055],[179,180],[161,279,280],"d461f7bc-0ddd-11f1-83db-42dde27851f2",7,["D",1771538182728],[178],[161,279],["D",1771538182366],[177],[161],["D",1771533418336],["D",1789530642963],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":54,"_101":102,"_103":24},{"_13":86,"_31":87,"_42":41,"_88":43,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":44,"_95":96},"ctx",{"_79":-5,"_123":340,"_341":342,"_343":344,"_345":24,"_346":24,"_347":24,"_348":137,"_349":-5,"_350":-7,"_351":-7,"_352":60,"_353":24,"_354":24,"_355":-5,"_356":24,"_357":24,"_358":24,"_359":-5},"ENV",{"_311":312,"_313":314,"_315":87,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v18