React Hono Val Town Starter

New batch

\n Name\n setName(e.currentTarget.value)} placeholder=\"Nightly classification\" className=\"mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-blue-500\" />\n \n Endpoint\n setEndpoint(e.currentTarget.value)} className=\"mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 font-mono text-sm outline-none focus:border-blue-500\" />\n \n Batch JSONL\n

setJsonl(e.currentTarget.value)} rows={13} spellCheck={false} className=\"mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 font-mono text-xs leading-5 outline-none focus:border-blue-500\" />\n            </label>\n            <button disabled={busy} className=\"w-full rounded-lg bg-blue-600 px-4 py-2.5 font-medium hover:bg-blue-500 disabled:opacity-50\">{busy ? \"Queuing…\" : \"Queue batch\"}</button>\n          </form>\n          <div className=\"mt-4 rounded-lg bg-slate-950 p-3 text-xs leading-5 text-slate-400\">\n            OpenAI allows up to 50,000 requests and 200 MB per batch. This val defaults to an 8 MB transient queue cap to protect Val Town storage.\n          </div>\n        </section>\n\n        <section>\n          <div className=\"mb-4 flex items-end justify-between\">\n            <div><h2 className=\"text-lg font-semibold\">Jobs</h2><p className=\"text-sm text-slate-400\">{activeCount} active · auto-refreshes every 30 seconds</p></div>\n            <button onClick={load} className=\"rounded-lg border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800\">Reload</button>\n          </div>\n          {message && <div className=\"mb-4 rounded-lg border border-slate-700 bg-slate-900 px-4 py-3 text-sm\">{message}</div>}\n          <div className=\"space-y-3\">\n            {jobs.length === 0 && <div className=\"rounded-2xl border border-dashed border-slate-700 p-10 text-center text-slate-400\">No batch jobs yet.</div>}\n            {jobs.map((job) => (\n              <article key={job.id} className=\"rounded-2xl border border-slate-800 bg-slate-900 p-5\">\n                <div className=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div><h3 className=\"font-medium\">{job.name}</h3><p className=\"mt-1 font-mono text-xs text-slate-500\">{job.openai_batch_id ?? job.id}</p></div>\n                  <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${badge(job.state)}`}>{job.state}</span>\n                </div>\n                <div className=\"mt-4 h-2 overflow-hidden rounded-full bg-slate-800\"><div className=\"h-full bg-blue-500\" style={{ width: `${job.request_total ? Math.round(((job.request_completed + job.request_failed) / job.request_total) * 100) : 0}%` }} /></div>\n                <div className=\"mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-400\">\n                  <span>{job.request_completed}/{job.request_total} completed</span><span>{job.request_failed} failed</span><span>{(job.input_bytes / 1024).toFixed(1)} KB</span><span>{job.endpoint}</span>\n                </div>\n                {job.last_error && <pre className=\"mt-3 overflow-auto whitespace-pre-wrap rounded-lg bg-red-950/40 p-3 text-xs text-red-200\">{job.last_error}</pre>}\n                <div className=\"mt-4 flex flex-wrap gap-2 text-sm\">\n                  {!terminal.has(job.state) && job.openai_batch_id && <button onClick={() => action(job.id, \"refresh\")} className=\"rounded-lg border border-slate-700 px-3 py-1.5 hover:bg-slate-800\">Refresh status</button>}\n                  {!terminal.has(job.state) && <button onClick={() => action(job.id, \"cancel\")} className=\"rounded-lg border border-red-900 px-3 py-1.5 text-red-300 hover:bg-red-950\">Cancel</button>}\n                  {job.output_file_id && <a href={`/api/jobs/${job.id}/output`} className=\"rounded-lg bg-emerald-700 px-3 py-1.5 hover:bg-emerald-600\">Download output</a>}\n                  {job.error_file_id && <a href={`/api/jobs/${job.id}/error`} className=\"rounded-lg border border-amber-800 px-3 py-1.5 text-amber-300 hover:bg-amber-950\">Download errors</a>}\n                </div>\n              </article>\n            ))}\n          </div>\n          <p className=\"mt-6 text-center text-xs text-slate-500\"><a href=\"/source\" className=\"underline hover:text-slate-300\">View source and remix</a></p>\n        </section>\n      </main>\n    </div>\n  );\n}\n",[],[164,225,227],"f9b77a82-fdfb-4b04-9d38-2ab5b1b6dfe3",["D",1783879933383],[181,182],[164,225],["D",1783879933383],[180,183,184,185],[164],["D",1783879933383],["D",1789472446807],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":56,"_108":109,"_110":25},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":50,"_97":98,"_99":100,"_101":45,"_102":103},"ctx",{"_82":-5,"_133":279,"_280":281,"_282":283,"_284":25,"_285":25,"_286":25,"_287":59,"_288":-5,"_289":-7,"_290":-7,"_291":63,"_292":25,"_293":25,"_294":-5,"_295":25,"_296":25,"_297":25,"_298":-5},"ENV",{"_250":251,"_252":253,"_254":90,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278},"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"]
</article></body></html>

Diff · v3