[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1030":1031,"_1032":1033},"routes/_app.x.$handle.$name",{"_97":96,"_31":44,"_105":85,"_26":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":118,"_119":120,"_121":24,"_122":123,"_124":57,"_125":-5,"_126":-5,"_127":128},"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":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",70,"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","Townie/frontend/components/LoginRoute.tsx","latestPath","fileId","c653d9b8-3432-11f0-88fa-9e149126039e","name","LoginRoute.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useNavigate } from \"react-router\";\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../hooks/useAuth.tsx\";\n\nexport function LoginRoute() {\n const navigate = useNavigate();\n const { isAuthenticated, authenticate, error } = useAuth();\n const [tokenValue, setTokenValue] = useState(\"\");\n const [apiKey, setApiKey] = useState(\"\");\n // const [invalid, setInvalid] = useState(\"\"); // TODO\n\n const handleSubmit = (e) => {\n e.preventDefault();\n authenticate(tokenValue, apiKey);\n };\n\n useEffect(() => {\n if (isAuthenticated) navigate(\"/projects\");\n }, [isAuthenticated]);\n\n return (\n

Log in

\n {error && (\n

\n Error: {error.message}\n

{JSON.stringify(error.stack, null, 2)}

\n )}\n \n

\n );\n}\n","createdAt",["D",1747605312817],"branchVersion","branchId","c399dc18-3432-11f0-9dcf-9e149126039e","id","e8439a28-3283-11f0-bd7a-569c3dd06744","NPLLM",["D",1747420256725],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","afad05e3-23cc-444d-be47-d4c6e3a47c17","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":53,"_101":102,"_103":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":43,"_93":63,"_94":44,"_95":96},"isOwned",102,"townie-logic","projectId","forkedBranchId","e845d6b2-3283-11f0-bd7a-569c3dd06744","forkedBranchVersion",530,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":1026,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":1027,"_79":1028,"_81":1029,"_83":24},"tree",[206,275,290,303,306,307,308],"files",[206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308],"counts",{"_196":158,"_197":193,"_198":158,"_199":200,"_201":202},"contents",[145,146,147,148,149,150,151],"upstreamProject",{"_42":138,"_31":139,"_51":140,"_52":141,"_48":49,"_77":142},"upstreamBranch",{"_42":88,"_37":129,"_130":131,"_31":132,"_86":43,"_13":133,"_87":134,"_89":135,"_136":137,"_46":-5,"_83":24,"_48":49,"_95":96,"_62":63,"_94":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747420256725],"updatedAt",["D",1747611718692],"main",735,"961078ea-f528-11ef-aa68-569c3dd06744",54,"lockfileKey","1767888522654-esm.town_v_wolf_NPLLM@735-main","96102714-f528-11ef-aa68-569c3dd06744","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789592240&sig=951f21ad4e7dc1ef564f3c6c3ab31e8805a447eb006276ad6a15a4ca79627d4d",{"_97":143,"_104":144},"templates","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592240&sig=71f5989b10906351534c67c7f34e5b1f5b16c866a2f24a695de262e7a05f0032",{"_42":190,"_31":191,"_29":192,"_155":-5,"_40":41,"_39":193,"_156":57,"_37":194,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_26":195},{"_42":185,"_31":186,"_29":187,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":188,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_26":189},{"_42":180,"_31":181,"_29":182,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":183,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_26":184},{"_42":174,"_31":175,"_29":176,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":177,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_26":179},{"_42":168,"_31":169,"_29":170,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":171,"_13":158,"_33":20,"_35":172,"_23":24,"_160":-5,"_26":173},{"_42":162,"_31":163,"_29":164,"_155":-5,"_40":41,"_39":61,"_156":24,"_37":165,"_13":158,"_33":20,"_35":166,"_23":24,"_160":-5,"_26":167},{"_42":152,"_31":153,"_29":154,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":157,"_13":158,"_33":20,"_35":159,"_23":24,"_160":-5,"_26":161},"c39e14b8-3432-11f0-9dcf-9e149126039e","deno.json","b80f6f5a-bab6-4c3b-a2a1-ecea13f1b35d","parentId","latest",["D",1747605308326],0,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"tasks\": {\n \"check\": \"deno check .\"\n },\n \"compilerOptions\": {\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"strictNullChecks\": true\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-window\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n","label",[153],"c39e1242-3432-11f0-9dcf-9e149126039e","README.md","d6c21015-12f4-4e0b-a450-d59cfd50f8ee",["D",1747605308326],"# NPM Clone\n\nThis app is a clone of the npm website with search functionality, package detail\npages, and the ability to download npm packages as tar files.\n\n## Features\n\n- **Search Page**: Search for npm packages with infinite scrolling\n- **Package Detail Page**: View package details and README\n- **Package Download**: Download npm packages as tar files\n- **Caching**: Search results, package details, and package tars are cached\n using Val Town's blob storage\n- **Responsive Design**: Looks good on all screen sizes\n- **Markdown Support**: Package descriptions and READMEs are rendered as markdown\n- **Realistic Content**: Generated packages focus on practical, realistic use cases\n\n## Technical Details\n\n- **Frontend**: React with TypeScript\n- **Backend**: Hono server\n- **Infinite Scrolling**: Using react-infinite-scroll-component\n- **Data Validation**: Using Zod schemas\n- **Caching**: Using Val Town's blob storage\n- **Package Generation**: Dynamically generates npm packages with TypeScript\n support\n- **Markdown Rendering**: Using marked library to render markdown content\n\n## Routes\n\n- `/`: The main search page\n- `/package/:name`: Package detail page\n- `/api/search`: API endpoint for searching packages\n- `/api/package`: API endpoint for getting package details\n- `/api/npm-package/:packageName`: API endpoint for downloading npm packages as\n tar files\n\n## Package Download\n\nThe app allows you to download any package as a tar file. These packages:\n\n1. Are generated dynamically based on the package name\n2. Include both TypeScript and JavaScript implementations\n3. Have proper package.json, README, and type definitions\n4. Are cached in Val Town's blob storage for faster subsequent downloads\n5. Can be installed via npm by extracting the tar file\n\n## Development\n\nThis project is built on Val Town's React Hono Starter template.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server,\n which also serves all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn\n imports `/frontend/index.tsx`, which renders either the SearchPage or\n PackageDetail component.\n",[163],"c39e10da-3432-11f0-9dcf-9e149126039e",".vtignore","5c437b12-95fa-4aa5-b767-46958e093c27",["D",1747605308326],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[169],"c39e0f54-3432-11f0-9dcf-9e149126039e","shared","099b71c4-ba31-47e4-8699-38ffd0b06aa2",["D",1747605308326],"directory",[175],"c39e082e-3432-11f0-9dcf-9e149126039e","frontend","b117399c-6a42-475b-b9bd-eff78f2dec9e",["D",1747605308326],[181],"c39de498-3432-11f0-9dcf-9e149126039e","backend","89336cd4-644a-41ed-8de1-3d0fa9f53371",["D",1747605308326],[186],"c51afd7e-3432-11f0-aee7-9e149126039e","Townie","c51afedc-3432-11f0-aee7-9e149126039e",2,["D",1747605310834],[191],"pulls","branches","forks","envVars",{"_203":61,"_205":158},"connections",{"_203":158,"_204":158},"count","unfilledCount","emptyCount",{"_42":190,"_31":191,"_29":192,"_155":-5,"_40":41,"_39":193,"_156":57,"_37":1023,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":1024,"_26":1025},{"_42":1018,"_31":186,"_29":727,"_155":192,"_40":41,"_39":1019,"_156":57,"_37":1020,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":1021,"_26":1022},{"_42":1013,"_31":887,"_29":881,"_155":727,"_40":41,"_39":1014,"_156":57,"_37":1015,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":1016,"_26":1017},{"_42":1008,"_31":904,"_29":898,"_155":881,"_40":41,"_39":1009,"_156":57,"_37":1010,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":1011,"_26":1012},{"_42":1003,"_31":443,"_29":983,"_155":898,"_40":41,"_39":1004,"_156":57,"_37":1005,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":1006,"_26":1007},{"_42":996,"_31":421,"_29":997,"_155":983,"_40":41,"_39":998,"_156":57,"_37":999,"_13":158,"_33":34,"_35":1000,"_23":24,"_160":-5,"_310":1001,"_26":1002},{"_42":989,"_31":939,"_29":990,"_155":983,"_40":41,"_39":991,"_156":57,"_37":992,"_13":158,"_33":34,"_35":993,"_23":24,"_160":-5,"_310":994,"_26":995},{"_42":981,"_31":921,"_29":982,"_155":983,"_40":41,"_39":984,"_156":57,"_37":985,"_13":158,"_33":34,"_35":986,"_23":24,"_160":-5,"_310":987,"_26":988},{"_42":976,"_31":452,"_29":962,"_155":898,"_40":41,"_39":977,"_156":57,"_37":978,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":979,"_26":980},{"_42":968,"_31":969,"_29":970,"_155":962,"_40":41,"_39":971,"_156":57,"_37":972,"_13":158,"_33":34,"_35":973,"_23":24,"_160":-5,"_310":974,"_26":975},{"_42":959,"_31":960,"_29":961,"_155":962,"_40":41,"_39":963,"_156":57,"_37":964,"_13":158,"_33":34,"_35":965,"_23":24,"_160":-5,"_310":966,"_26":967},{"_42":954,"_31":929,"_29":923,"_155":898,"_40":41,"_39":955,"_156":57,"_37":956,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":957,"_26":958},{"_42":946,"_31":947,"_29":948,"_155":923,"_40":41,"_39":949,"_156":57,"_37":950,"_13":158,"_33":34,"_35":951,"_23":24,"_160":-5,"_310":952,"_26":953},{"_42":938,"_31":939,"_29":940,"_155":923,"_40":41,"_39":941,"_156":57,"_37":942,"_13":158,"_33":34,"_35":943,"_23":24,"_160":-5,"_310":944,"_26":945},{"_42":930,"_31":931,"_29":932,"_155":923,"_40":41,"_39":933,"_156":57,"_37":934,"_13":158,"_33":34,"_35":935,"_23":24,"_160":-5,"_310":936,"_26":937},{"_42":920,"_31":921,"_29":922,"_155":923,"_40":41,"_39":924,"_156":57,"_37":925,"_13":158,"_33":34,"_35":926,"_23":24,"_160":-5,"_310":927,"_26":928},{"_42":913,"_31":163,"_29":914,"_155":898,"_40":41,"_39":915,"_156":57,"_37":916,"_13":158,"_33":20,"_35":917,"_23":24,"_160":-5,"_310":918,"_26":919},{"_42":905,"_31":906,"_29":907,"_155":898,"_40":41,"_39":908,"_156":57,"_37":909,"_13":158,"_33":34,"_35":910,"_23":24,"_160":-5,"_310":911,"_26":912},{"_42":896,"_31":421,"_29":897,"_155":898,"_40":41,"_39":899,"_156":57,"_37":900,"_13":158,"_33":34,"_35":901,"_23":24,"_160":-5,"_310":902,"_26":903},{"_42":888,"_31":889,"_29":890,"_155":881,"_40":41,"_39":891,"_156":57,"_37":892,"_13":158,"_33":34,"_35":893,"_23":24,"_160":-5,"_310":894,"_26":895},{"_42":878,"_31":879,"_29":880,"_155":881,"_40":41,"_39":882,"_156":57,"_37":883,"_13":158,"_33":34,"_35":884,"_23":24,"_160":-5,"_310":885,"_26":886},{"_42":873,"_31":465,"_29":811,"_155":727,"_40":41,"_39":874,"_156":57,"_37":875,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":876,"_26":877},{"_42":865,"_31":866,"_29":867,"_155":811,"_40":41,"_39":868,"_156":57,"_37":869,"_13":158,"_33":34,"_35":870,"_23":24,"_160":-5,"_310":871,"_26":872},{"_42":857,"_31":858,"_29":859,"_155":811,"_40":41,"_39":860,"_156":57,"_37":861,"_13":158,"_33":34,"_35":862,"_23":24,"_160":-5,"_310":863,"_26":864},{"_42":849,"_31":850,"_29":851,"_155":811,"_40":41,"_39":852,"_156":57,"_37":853,"_13":158,"_33":34,"_35":854,"_23":24,"_160":-5,"_310":855,"_26":856},{"_42":841,"_31":842,"_29":843,"_155":811,"_40":41,"_39":844,"_156":57,"_37":845,"_13":158,"_33":34,"_35":846,"_23":24,"_160":-5,"_310":847,"_26":848},{"_42":833,"_31":834,"_29":835,"_155":811,"_40":41,"_39":836,"_156":57,"_37":837,"_13":158,"_33":34,"_35":838,"_23":24,"_160":-5,"_310":839,"_26":840},{"_42":825,"_31":826,"_29":827,"_155":811,"_40":41,"_39":828,"_156":57,"_37":829,"_13":158,"_33":34,"_35":830,"_23":24,"_160":-5,"_310":831,"_26":832},{"_42":817,"_31":818,"_29":819,"_155":811,"_40":41,"_39":820,"_156":57,"_37":821,"_13":158,"_33":34,"_35":822,"_23":24,"_160":-5,"_310":823,"_26":824},{"_42":808,"_31":809,"_29":810,"_155":811,"_40":41,"_39":812,"_156":57,"_37":813,"_13":158,"_33":34,"_35":814,"_23":24,"_160":-5,"_310":815,"_26":816},{"_42":803,"_31":764,"_29":758,"_155":727,"_40":41,"_39":804,"_156":57,"_37":805,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":806,"_26":807},{"_42":796,"_31":797,"_29":798,"_155":758,"_40":41,"_39":135,"_156":57,"_37":799,"_13":158,"_33":34,"_35":800,"_23":24,"_160":-5,"_310":801,"_26":802},{"_42":788,"_31":789,"_29":790,"_155":758,"_40":41,"_39":791,"_156":57,"_37":792,"_13":158,"_33":34,"_35":793,"_23":24,"_160":-5,"_310":794,"_26":795},{"_42":781,"_31":421,"_29":782,"_155":758,"_40":41,"_39":783,"_156":57,"_37":784,"_13":158,"_33":34,"_35":785,"_23":24,"_160":-5,"_310":786,"_26":787},{"_42":773,"_31":774,"_29":775,"_155":758,"_40":41,"_39":776,"_156":57,"_37":777,"_13":158,"_33":34,"_35":778,"_23":24,"_160":-5,"_310":779,"_26":780},{"_42":765,"_31":766,"_29":767,"_155":758,"_40":41,"_39":768,"_156":57,"_37":769,"_13":158,"_33":34,"_35":770,"_23":24,"_160":-5,"_310":771,"_26":772},{"_42":755,"_31":756,"_29":757,"_155":758,"_40":41,"_39":759,"_156":57,"_37":760,"_13":158,"_33":34,"_35":761,"_23":24,"_160":-5,"_310":762,"_26":763},{"_42":750,"_31":452,"_29":736,"_155":727,"_40":41,"_39":751,"_156":57,"_37":752,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":753,"_26":754},{"_42":742,"_31":743,"_29":744,"_155":736,"_40":41,"_39":745,"_156":57,"_37":746,"_13":158,"_33":34,"_35":747,"_23":24,"_160":-5,"_310":748,"_26":749},{"_42":733,"_31":734,"_29":735,"_155":736,"_40":41,"_39":737,"_156":57,"_37":738,"_13":158,"_33":34,"_35":739,"_23":24,"_160":-5,"_310":740,"_26":741},{"_42":725,"_31":421,"_29":726,"_155":727,"_40":41,"_39":728,"_156":57,"_37":729,"_13":158,"_33":34,"_35":730,"_23":24,"_160":-5,"_310":731,"_26":732},{"_42":720,"_31":181,"_29":564,"_155":192,"_40":41,"_39":721,"_156":57,"_37":722,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":723,"_26":724},{"_42":715,"_31":372,"_29":697,"_155":564,"_40":41,"_39":716,"_156":57,"_37":717,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":718,"_26":719},{"_42":711,"_31":32,"_29":30,"_155":697,"_40":41,"_39":14,"_156":57,"_37":712,"_13":158,"_33":34,"_35":36,"_23":24,"_160":-5,"_310":713,"_26":714},{"_42":703,"_31":704,"_29":705,"_155":697,"_40":41,"_39":706,"_156":57,"_37":707,"_13":158,"_33":34,"_35":708,"_23":24,"_160":-5,"_310":709,"_26":710},{"_42":694,"_31":695,"_29":696,"_155":697,"_40":41,"_39":698,"_156":57,"_37":699,"_13":158,"_33":34,"_35":700,"_23":24,"_160":-5,"_310":701,"_26":702},{"_42":689,"_31":616,"_29":610,"_155":564,"_40":41,"_39":690,"_156":57,"_37":691,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":692,"_26":693},{"_42":681,"_31":682,"_29":683,"_155":610,"_40":41,"_39":684,"_156":57,"_37":685,"_13":158,"_33":34,"_35":686,"_23":24,"_160":-5,"_310":687,"_26":688},{"_42":673,"_31":674,"_29":675,"_155":610,"_40":41,"_39":676,"_156":57,"_37":677,"_13":158,"_33":34,"_35":678,"_23":24,"_160":-5,"_310":679,"_26":680},{"_42":665,"_31":666,"_29":667,"_155":610,"_40":41,"_39":668,"_156":57,"_37":669,"_13":158,"_33":34,"_35":670,"_23":24,"_160":-5,"_310":671,"_26":672},{"_42":657,"_31":658,"_29":659,"_155":610,"_40":41,"_39":660,"_156":57,"_37":661,"_13":158,"_33":34,"_35":662,"_23":24,"_160":-5,"_310":663,"_26":664},{"_42":649,"_31":650,"_29":651,"_155":610,"_40":41,"_39":652,"_156":57,"_37":653,"_13":158,"_33":34,"_35":654,"_23":24,"_160":-5,"_310":655,"_26":656},{"_42":641,"_31":642,"_29":643,"_155":610,"_40":41,"_39":644,"_156":57,"_37":645,"_13":158,"_33":34,"_35":646,"_23":24,"_160":-5,"_310":647,"_26":648},{"_42":633,"_31":634,"_29":635,"_155":610,"_40":41,"_39":636,"_156":57,"_37":637,"_13":158,"_33":34,"_35":638,"_23":24,"_160":-5,"_310":639,"_26":640},{"_42":625,"_31":626,"_29":627,"_155":610,"_40":41,"_39":628,"_156":57,"_37":629,"_13":158,"_33":34,"_35":630,"_23":24,"_160":-5,"_310":631,"_26":632},{"_42":617,"_31":618,"_29":619,"_155":610,"_40":41,"_39":620,"_156":57,"_37":621,"_13":158,"_33":34,"_35":622,"_23":24,"_160":-5,"_310":623,"_26":624},{"_42":607,"_31":608,"_29":609,"_155":610,"_40":41,"_39":611,"_156":57,"_37":612,"_13":158,"_33":34,"_35":613,"_23":24,"_160":-5,"_310":614,"_26":615},{"_42":602,"_31":452,"_29":588,"_155":564,"_40":41,"_39":603,"_156":57,"_37":604,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":605,"_26":606},{"_42":594,"_31":595,"_29":596,"_155":588,"_40":41,"_39":597,"_156":57,"_37":598,"_13":158,"_33":34,"_35":599,"_23":24,"_160":-5,"_310":600,"_26":601},{"_42":585,"_31":586,"_29":587,"_155":588,"_40":41,"_39":589,"_156":57,"_37":590,"_13":158,"_33":34,"_35":591,"_23":24,"_160":-5,"_310":592,"_26":593},{"_42":577,"_31":578,"_29":579,"_155":564,"_40":41,"_39":580,"_156":57,"_37":581,"_13":158,"_33":424,"_35":582,"_23":24,"_160":-5,"_310":583,"_26":584},{"_42":570,"_31":344,"_29":571,"_155":564,"_40":41,"_39":572,"_156":57,"_37":573,"_13":158,"_33":34,"_35":574,"_23":24,"_160":-5,"_310":575,"_26":576},{"_42":561,"_31":562,"_29":563,"_155":564,"_40":41,"_39":565,"_156":57,"_37":566,"_13":158,"_33":20,"_35":567,"_23":24,"_160":-5,"_310":568,"_26":569},{"_42":554,"_31":555,"_29":556,"_155":192,"_40":41,"_39":557,"_156":57,"_37":558,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":559,"_26":560},{"_42":547,"_31":169,"_29":548,"_155":192,"_40":41,"_39":549,"_156":57,"_37":550,"_13":158,"_33":20,"_35":551,"_23":24,"_160":-5,"_310":552,"_26":553},{"_42":540,"_31":163,"_29":541,"_155":192,"_40":41,"_39":542,"_156":57,"_37":543,"_13":158,"_33":20,"_35":544,"_23":24,"_160":-5,"_310":545,"_26":546},{"_42":532,"_31":533,"_29":534,"_155":192,"_40":41,"_39":535,"_156":57,"_37":536,"_13":158,"_33":20,"_35":537,"_23":24,"_160":-5,"_310":538,"_26":539},{"_42":525,"_31":153,"_29":526,"_155":192,"_40":41,"_39":527,"_156":57,"_37":528,"_13":158,"_33":20,"_35":529,"_23":24,"_160":-5,"_310":530,"_26":531},{"_42":518,"_31":421,"_29":519,"_155":192,"_40":41,"_39":520,"_156":57,"_37":521,"_13":158,"_33":34,"_35":522,"_23":24,"_160":-5,"_310":523,"_26":524},{"_42":185,"_31":186,"_29":187,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":515,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":516,"_26":517},{"_42":511,"_31":443,"_29":438,"_155":187,"_40":41,"_39":61,"_156":57,"_37":512,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":513,"_26":514},{"_42":507,"_31":492,"_29":487,"_155":438,"_40":41,"_39":61,"_156":57,"_37":508,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":509,"_26":510},{"_42":500,"_31":501,"_29":502,"_155":487,"_40":41,"_39":61,"_156":57,"_37":503,"_13":158,"_33":34,"_35":504,"_23":24,"_160":-5,"_310":505,"_26":506},{"_42":493,"_31":494,"_29":495,"_155":487,"_40":41,"_39":61,"_156":57,"_37":496,"_13":158,"_33":34,"_35":497,"_23":24,"_160":-5,"_310":498,"_26":499},{"_42":484,"_31":485,"_29":486,"_155":487,"_40":41,"_39":61,"_156":57,"_37":488,"_13":158,"_33":34,"_35":489,"_23":24,"_160":-5,"_310":490,"_26":491},{"_42":480,"_31":465,"_29":460,"_155":438,"_40":41,"_39":61,"_156":57,"_37":481,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":482,"_26":483},{"_42":473,"_31":474,"_29":475,"_155":460,"_40":41,"_39":61,"_156":24,"_37":476,"_13":158,"_33":34,"_35":477,"_23":24,"_160":-5,"_310":478,"_26":479},{"_42":466,"_31":467,"_29":468,"_155":460,"_40":41,"_39":61,"_156":57,"_37":469,"_13":158,"_33":34,"_35":470,"_23":24,"_160":-5,"_310":471,"_26":472},{"_42":457,"_31":458,"_29":459,"_155":460,"_40":41,"_39":61,"_156":57,"_37":461,"_13":158,"_33":34,"_35":462,"_23":24,"_160":-5,"_310":463,"_26":464},{"_42":453,"_31":452,"_29":447,"_155":438,"_40":41,"_39":61,"_156":57,"_37":454,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":455,"_26":456},{"_42":444,"_31":445,"_29":446,"_155":447,"_40":41,"_39":61,"_156":57,"_37":448,"_13":158,"_33":34,"_35":449,"_23":24,"_160":-5,"_310":450,"_26":451},{"_42":435,"_31":436,"_29":437,"_155":438,"_40":41,"_39":61,"_156":57,"_37":439,"_13":158,"_33":34,"_35":440,"_23":24,"_160":-5,"_310":441,"_26":442},{"_42":428,"_31":429,"_29":430,"_155":187,"_40":41,"_39":61,"_156":57,"_37":431,"_13":158,"_33":34,"_35":432,"_23":24,"_160":-5,"_310":433,"_26":434},{"_42":420,"_31":421,"_29":422,"_155":187,"_40":41,"_39":61,"_156":57,"_37":423,"_13":158,"_33":424,"_35":425,"_23":24,"_160":-5,"_310":426,"_26":427},{"_42":180,"_31":181,"_29":182,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":417,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":418,"_26":419},{"_42":413,"_31":372,"_29":367,"_155":182,"_40":41,"_39":61,"_156":57,"_37":414,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":415,"_26":416},{"_42":409,"_31":408,"_29":403,"_155":367,"_40":41,"_39":61,"_156":57,"_37":410,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":411,"_26":412},{"_42":400,"_31":401,"_29":402,"_155":403,"_40":41,"_39":61,"_156":57,"_37":404,"_13":158,"_33":34,"_35":405,"_23":24,"_160":-5,"_310":406,"_26":407},{"_42":396,"_31":395,"_29":390,"_155":367,"_40":41,"_39":61,"_156":57,"_37":397,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":398,"_26":399},{"_42":387,"_31":388,"_29":389,"_155":390,"_40":41,"_39":61,"_156":57,"_37":391,"_13":158,"_33":34,"_35":392,"_23":24,"_160":-5,"_310":393,"_26":394},{"_42":380,"_31":381,"_29":382,"_155":367,"_40":41,"_39":61,"_156":57,"_37":383,"_13":158,"_33":34,"_35":384,"_23":24,"_160":-5,"_310":385,"_26":386},{"_42":373,"_31":374,"_29":375,"_155":367,"_40":41,"_39":61,"_156":57,"_37":376,"_13":158,"_33":34,"_35":377,"_23":24,"_160":-5,"_310":378,"_26":379},{"_42":364,"_31":365,"_29":366,"_155":367,"_40":41,"_39":61,"_156":57,"_37":368,"_13":158,"_33":34,"_35":369,"_23":24,"_160":-5,"_310":370,"_26":371},{"_42":357,"_31":358,"_29":359,"_155":182,"_40":41,"_39":61,"_156":57,"_37":360,"_13":158,"_33":34,"_35":361,"_23":24,"_160":-5,"_310":362,"_26":363},{"_42":350,"_31":351,"_29":352,"_155":182,"_40":41,"_39":61,"_156":57,"_37":353,"_13":158,"_33":20,"_35":354,"_23":24,"_160":-5,"_310":355,"_26":356},{"_42":343,"_31":344,"_29":345,"_155":182,"_40":41,"_39":61,"_156":57,"_37":346,"_13":158,"_33":34,"_35":347,"_23":24,"_160":-5,"_310":348,"_26":349},{"_42":336,"_31":337,"_29":338,"_155":182,"_40":41,"_39":61,"_156":57,"_37":339,"_13":158,"_33":20,"_35":340,"_23":24,"_160":-5,"_310":341,"_26":342},{"_42":174,"_31":175,"_29":176,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":333,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_310":334,"_26":335},{"_42":326,"_31":327,"_29":328,"_155":176,"_40":41,"_39":61,"_156":57,"_37":329,"_13":158,"_33":34,"_35":330,"_23":24,"_160":-5,"_310":331,"_26":332},{"_42":319,"_31":320,"_29":321,"_155":176,"_40":41,"_39":61,"_156":57,"_37":322,"_13":158,"_33":34,"_35":323,"_23":24,"_160":-5,"_310":324,"_26":325},{"_42":168,"_31":169,"_29":170,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":316,"_13":158,"_33":20,"_35":172,"_23":24,"_160":-5,"_310":317,"_26":318},{"_42":162,"_31":163,"_29":164,"_155":-5,"_40":41,"_39":61,"_156":24,"_37":313,"_13":158,"_33":20,"_35":166,"_23":24,"_160":-5,"_310":314,"_26":315},{"_42":152,"_31":153,"_29":154,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":309,"_13":158,"_33":20,"_35":159,"_23":24,"_160":-5,"_310":311,"_26":312},["D",1747605308326],"children",[],[153],["D",1747605308326],[],[163],["D",1747605308326],[],[169],"c39e0cca-3432-11f0-9dcf-9e149126039e","schemas.ts","068360cc-2079-46ee-b5aa-84b462f60088",["D",1747605308326],"import { z } from \"https://esm.sh/zod@3.23.4\";\n\nexport const packageSchema = z.object({\n name: z.string()\n .describe(\"NPM package name following standard naming conventions\"),\n description: z.string()\n .describe(\"Brief description of what the package does\"),\n tags: z.array(\n z.string()\n .describe(\"Technologies or categories related to this package\"),\n ),\n author: z.string()\n .describe(\"Name of the fictional package author\"),\n version: z.string()\n .describe(\"Package version (e.g., '1.2.3')\"),\n license: z.string()\n .describe(\"Open source license (e.g., MIT, Apache-2.0)\"),\n downloads: z.number()\n .describe(\"Number of downloads (between 1,000 and 5,000,000)\"),\n avatarText: z.string()\n .describe(\"Text to display in the package avatar (usually initials)\"),\n updated: z.string()\n .describe(\"Date when the package was last updated (ISO format)\"),\n dependents: z.number()\n .describe(\"Number of packages that depend on this one\"),\n id: z.string()\n .describe(\"Unique identifier for the package\"),\n});\n\nexport const searchResultSchema = z.object({\n packages: z.array(packageSchema),\n hasMore: z.boolean().optional(),\n page: z.number().optional(),\n});\n\nexport type NpmPackage = z.infer;\nexport type SearchResult = z.infer;\n",[],[175,320],"c39e0b26-3432-11f0-9dcf-9e149126039e","consts.ts","9d0c8d72-c7eb-4270-b02b-494eea22af79",["D",1747605308326],"export const APP_URL = \"https://npllm.val.run/\";\nexport const DEFAULT_QUERY = \"is-odd\";\nexport const S3_PREFIX = \"npllm-001/\";\n",[],[175,327],["D",1747605308326],[304,305],[175],"c39e059a-3432-11f0-9dcf-9e149126039e","style.css","8e75dd2f-79e5-4829-ad82-af3d6ded646c",["D",1747605308326],"/* Base styles */\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n line-height: 1.5;\n color: #24292e;\n margin: 0;\n padding: 0;\n}\n\n/* Prose styles for markdown content */\n.prose {\n max-width: 80ch;\n color: #24292e;\n}\n\n.prose a {\n color: #0969da;\n text-decoration: none;\n}\n\n.prose a:hover {\n text-decoration: underline;\n}\n\n.prose strong {\n font-weight: 600;\n color: #24292e;\n}\n\n.prose h1, \n.prose h2, \n.prose h3, \n.prose h4, \n.prose h5, \n.prose h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: #24292e;\n}\n\n.prose h1 {\n font-size: 2em;\n border-bottom: 1px solid #eaecef;\n padding-bottom: 0.3em;\n}\n\n.prose h2 {\n font-size: 1.5em;\n border-bottom: 1px solid #eaecef;\n padding-bottom: 0.3em;\n}\n\n.prose h3 {\n font-size: 1.25em;\n}\n\n.prose h4 {\n font-size: 1em;\n}\n\n.prose p, \n.prose ul, \n.prose ol {\n margin-top: 0;\n margin-bottom: 1em;\n}\n\n.prose code {\n font-family: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;\n padding: 0.2em 0.4em;\n margin: 0;\n font-size: 85%;\n background-color: rgba(27, 31, 35, 0.05);\n border-radius: 3px;\n}\n\n.prose pre {\n font-family: SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace;\n padding: 16px;\n overflow: auto;\n font-size: 85%;\n line-height: 1.45;\n background-color: #f6f8fa;\n border-radius: 3px;\n margin-top: 0;\n margin-bottom: 16px;\n}\n\n.prose pre code {\n background-color: transparent;\n padding: 0;\n margin: 0;\n font-size: 100%;\n word-break: normal;\n white-space: pre;\n}\n\n.prose blockquote {\n padding: 0 1em;\n color: #6a737d;\n border-left: 0.25em solid #dfe2e5;\n margin: 0 0 16px 0;\n}\n\n.prose img {\n max-width: 100%;\n box-sizing: content-box;\n background-color: #fff;\n}\n\n.prose hr {\n height: 0.25em;\n padding: 0;\n margin: 24px 0;\n background-color: #e1e4e8;\n border: 0;\n}\n\n.prose table {\n border-spacing: 0;\n border-collapse: collapse;\n margin-top: 0;\n margin-bottom: 16px;\n width: 100%;\n overflow: auto;\n}\n\n.prose table th {\n font-weight: 600;\n padding: 6px 13px;\n border: 1px solid #dfe2e5;\n}\n\n.prose table td {\n padding: 6px 13px;\n border: 1px solid #dfe2e5;\n}\n\n.prose table tr {\n background-color: #fff;\n border-top: 1px solid #c6cbd1;\n}\n\n.prose table tr:nth-child(2n) {\n background-color: #f6f8fa;\n}\n\n/* Prose size variants */\n.prose-sm {\n font-size: 0.875rem;\n}\n\n.prose-sm p {\n margin-bottom: 0.75em;\n}\n\n.prose-sm h1, \n.prose-sm h2, \n.prose-sm h3, \n.prose-sm h4, \n.prose-sm h5, \n.prose-sm h6 {\n margin-top: 1.25em;\n margin-bottom: 0.5em;\n}\n\n/* Override GitHub markdown CSS to ensure light theme */\n.markdown-body {\n background-color: #fff !important;\n color: #24292e !important;\n}",[],[181,337],"c39e0450-3432-11f0-9dcf-9e149126039e","index.tsx","0de7de68-2559-4a62-bc48-a84d176038a7",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { SearchPage } from \"./components/SearchPage.tsx\";\nimport { PackageDetail } from \"./components/PackageDetail.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\n\n// Check if we're on a package page\nconst packageName = (window as any).packageName;\n\nif (packageName) {\n createRoot(root).render();\n} else {\n createRoot(root).render();\n}\n",[],[181,344],"c39e02f2-3432-11f0-9dcf-9e149126039e","index.html","342c34e8-db92-47bb-9959-acc0d6aa71d1",["D",1747605308326],"\n\n \n \n \n NPLLM\n \n \n \n \n\n \n

\n \n \n \n \n",[],[181,351],"c39e01a8-3432-11f0-9dcf-9e149126039e","hono.ts","176742de-9f89-48c0-b3d1-38fd0cff455b",["D",1747605308326],"// deno-lint-ignore-file no-window\n\nimport { hc } from \"https://esm.sh/hono@4.7.7/client?deps=hono@4.7.7\";\nimport { QueryClient } from \"https://esm.sh/@tanstack/react-query@5.74.7?deps=react@19.0.0\";\nimport { AppType } from \"../backend/api/mod.ts\";\nimport { APP_URL } from \"../shared/consts.ts\";\n\nexport const client = hc(\n typeof window !== \"undefined\"\n ? window.location.origin + \"/api\"\n : APP_URL + \"/api\",\n { init: { credentials: \"include\" } },\n);\nexport const queryClient = new QueryClient();\n",[],[181,358],"c39df654-3432-11f0-9dcf-9e149126039e","SearchPage.tsx","c8ba29e7-259c-40fc-8063-7655865013c9","b6acd229-9ed6-42d5-85af-b20ccb055d18",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport InfiniteScroll from \"https://esm.sh/react-infinite-scroll-component@6.1.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { FormEvent, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { marked } from \"https://esm.sh/marked@4.3.0\";\nimport { DEFAULT_QUERY } from \"../../shared/consts.ts\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { client } from \"../hono.ts\";\nimport { SearchIcon } from \"./icons/SearchIcon.tsx\";\n\nexport function SearchPage() {\n const [items, setItems] = useState([]);\n const [query, setQuery] = useState(DEFAULT_QUERY);\n const [page, setPage] = useState(1);\n const [hasMore, setHasMore] = useState(true);\n const [loading, setLoading] = useState(false);\n\n const fetchPackages = async (\n searchQuery: string,\n pageNum: number,\n append = false,\n ) => {\n if (loading) return;\n\n setLoading(true);\n try {\n const response = await client.search.$get({\n query: {\n q: searchQuery,\n n: \"10\",\n page: pageNum.toString(),\n },\n });\n\n const data = await response.json();\n\n if (append) {\n setItems((prevItems) => [...prevItems, ...data.packages]);\n } else {\n setItems(data.packages);\n }\n\n setHasMore(data.hasMore || false);\n setLoading(false);\n } catch (error) {\n console.error(\"Error fetching packages:\", error);\n setLoading(false);\n }\n };\n\n const handleSearch = (e: FormEvent) => {\n e.preventDefault();\n if (query.trim()) {\n setPage(1);\n setItems([]);\n fetchPackages(query.trim(), 1);\n }\n };\n\n const loadMorePackages = () => {\n if (!hasMore || loading) return;\n const nextPage = page + 1;\n setPage(nextPage);\n fetchPackages(query, nextPage, true);\n };\n\n useEffect(() => {\n fetchPackages(query, 1);\n }, []);\n\n // Function to render markdown safely\n const renderMarkdown = (text: string) => {\n try {\n return { __html: marked(text) };\n } catch (error) {\n console.error(\"Error rendering markdown:\", error);\n return { __html: text };\n }\n };\n\n return (\n

\n {/* Header */}\n

\n {/* Top navigation */}\n

\n \n \n \n \n

\n Sign Up\n Sign In\n

\n \n {/* Search bar */}\n

\n\n {/* Results */}\n

\n \n

\n }\n endMessage={\n

\n {items.length > 0\n ? \"Yay! You have seen all packages\"\n : \"No packages found\"}\n

\n }\n >\n

\n {items.map((item) => (\n

\n \n {item.name}\n \n \n

\n\n

\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n \n {item.author}\n \n • v{item.version}\n \n • Published {new Date(item.updated).toLocaleDateString()}\n \n

\n \n

\n {item.downloads.toLocaleString()} downloads per week\n

\n {item.license}\n

\n ))}\n

\n \n

\n );\n}",[],[181,372,365],"components","c39df4ec-3432-11f0-9dcf-9e149126039e","SearchBox.tsx","d8b3ca23-c8a1-4376-9f79-ed155fa9ac1f",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { FormEvent, useState } from \"https://esm.sh/react@18.2.0\";\nimport { SearchIcon } from \"./icons/SearchIcon.tsx\";\n\ninterface SearchBoxProps {\n onSearch: (query: string) => void;\n initialQuery?: string;\n}\n\nexport function SearchBox({ onSearch, initialQuery = \"\" }: SearchBoxProps) {\n const [query, setQuery] = useState(initialQuery);\n\n const handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n if (query.trim()) {\n onSearch(query.trim());\n }\n };\n\n return (\n

\n \n

\n );\n}\n",[],[181,372,374],"c39dec90-3432-11f0-9dcf-9e149126039e","PackageDetail.tsx","ae5a78f7-e8bf-4842-8a61-b4cee3f5bff9",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@4.3.0\";\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { client } from \"../hono.ts\";\nimport { NpmPackage } from \"../../shared/schemas.ts\";\nimport { APP_URL } from \"../../shared/consts.ts\";\nimport { SearchIcon } from \"./icons/SearchIcon.tsx\";\n\ninterface PackageDetailProps {\n packageName: string;\n}\n\nexport function PackageDetail({ packageName }: PackageDetailProps) {\n const [packageData, setPackageData] = useState(null);\n const [readme, setReadme] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n const packageDownloadLink = packageData\n ? `${APP_URL}api/npm-package/${packageData.name}`\n : \"\";\n\n useEffect(() => {\n const fetchPackageDetails = async () => {\n try {\n // Fetch package details\n const response = await client.package\n .$get({ query: { name: packageName } });\n const data = await response.json();\n setPackageData(data.package);\n setReadme(marked(data.readme || \"\"));\n } catch (error) {\n console.error(\"Error fetching package details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchPackageDetails();\n }, [packageName]);\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!packageData) {\n return (\n

\n Package not found\n

\n The package \"{packageName}\" could not be found.\n

\n \n Return to search\n \n

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

\n {/* Header */}\n

\n {/* Top navigation */}\n

\n \n \n \n \n

\n Sign Up\n Sign In\n

\n \n {/* Search bar */}\n

\n \n

\n \n Back to Search\n \n

\n\n

\n {/* Package header */}\n

\n {packageData.name}\n

\n {packageData.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n v{packageData.version}\n •\n \n Published {new Date(packageData.updated).toLocaleDateString()}\n \n

\n License: {packageData.license}\n

\n \n {packageData.downloads.toLocaleString()} weekly downloads\n \n

\n\n {/* Package content */}\n

\n {/* Sidebar */}\n

\n Installation\n

\n {\n navigator.clipboard.writeText(\n `npm install ${packageDownloadLink}`,\n );\n const target = e.currentTarget;\n const originalText = target.textContent;\n target.textContent = \"Copied!\";\n setTimeout(() => {\n target.textContent = originalText;\n }, 1500);\n }}\n >\n npm install {packageDownloadLink}\n \n

\n\n

\n Author\n

\n {packageData.author}\n

\n\n

\n Download\n

\n \n Download Package\n \n

\n\n {/* Main content */}\n

\n \n

\n \n \n );\n}\n",[],[181,372,381],"c39de894-3432-11f0-9dcf-9e149126039e","LibraryItem.tsx","e6de56cb-c898-459f-bc38-96fb14834f8d","b5b264af-9384-4694-8e6b-10811e33b1ea",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype LibraryItemProps = {\n title: string;\n subtitle: string;\n tags: string[];\n avatarText: string;\n author: string;\n version: string;\n updated: string;\n dependents: number | string;\n license: string;\n downloads: number;\n};\n\nexport default function LibraryItem({\n title,\n subtitle,\n tags,\n avatarText,\n author,\n version,\n updated,\n dependents,\n license,\n downloads,\n}: LibraryItemProps) {\n return (\n

{title}

{subtitle}

\n\n

\n {tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

\n \n {avatarText}\n \n {author}\n • {version}\n • {updated}\n • {dependents} dependents\n • {license}\n

\n\n

\n {downloads.toLocaleString()}\n

\n );\n}\n",[],[181,372,395,388],"npm","c39deb32-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[295],[181,372,395],"c39de614-3432-11f0-9dcf-9e149126039e","SearchIcon.tsx","ff1b3978-4a5b-4f13-b471-119e3f395115","4675836a-cdb1-4852-a8a9-20c7fffd614d",["D",1747605308326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface SearchIconProps {\n className?: string;\n}\n\nexport function SearchIcon({ className = \"w-4 h-4 text-gray-500\" }: SearchIconProps) {\n return (\n \n );\n}",[],[181,372,408,401],"icons","c39de754-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[293],[181,372,408],"c39e0040-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[292,294,296,297,298],[181,372],["D",1747605308326],[291,299,300,301,302],[181],"c39de34e-3432-11f0-9dcf-9e149126039e","index.ts","ef4aeb3b-642c-4a01-9707-f4a1c2429d46",["D",1747605308326],"http","import {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"https://esm.sh/hono@4.7.7\";\nimport { apiRoute } from \"./api/mod.ts\";\n\nconst app = new Hono()\n .get(\"/\", () => serveFile(\"/frontend/index.html\", import.meta.url))\n .get(\"/package/:name\", async (c) => {\n // Serve the same HTML but with the package name in the title\n const packageName = c.req.param(\"name\");\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Update the title to include the package name\n html = html.replace(\n \"React Hono Val Town Starter\",\n `${packageName} - npm`,\n );\n\n // Add a script to pass the package name to the frontend\n const packageScript =\n ``;\n html = html.replace(\"\", `${packageScript}`);\n\n return c.html(html);\n })\n .route(\"/api\", apiRoute)\n .get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url))\n .get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url))\n .onError((err) => {\n throw err;\n });\n\nexport default app.fetch;\n",[],[186,421],"c39de20e-3432-11f0-9dcf-9e149126039e","env.ts","ef23a523-4739-47b3-a4de-55bc1a572030",["D",1747605308326],"import { safeEnv, string } from \"https://esm.sh/jsr/@safe-env/safe-env@0.1.7\";\n\nexport const env = safeEnv({\n GOOGLE_GENERATIVE_AI_API_KEY: string(),\n});\n",[],[186,429],"c39ddef8-3432-11f0-9dcf-9e149126039e","mod.ts","aae344e1-aa12-4433-8e28-46b0de268eb5","75d4c6b1-319b-4367-b412-4759de45c44f",["D",1747605308326],"import { Hono } from \"https://esm.sh/hono@4.7.7\";\nimport { searchRoute } from \"./routes/search.ts\";\nimport { packageRoute } from \"./routes/package.ts\";\nimport { npmPackageRoute } from \"./routes/npm-package.ts\";\n\nexport const apiRoute = new Hono()\n .route(\"/search\", searchRoute)\n .route(\"/package\", packageRoute)\n .route(\"/npm-package\", npmPackageRoute);\n\nexport type AppType = typeof apiRoute;\n",[],[186,443,436],"api","c39dd976-3432-11f0-9dcf-9e149126039e","package-generator.ts","a41f57ec-d566-4195-a7f0-a25e7b7f9808","212c9cbd-c3f0-4216-b8d0-3ad0e59cb503",["D",1747605308326],"import { TarStream } from \"https://esm.sh/jsr/@std/tar@0.1.6\";\nimport { generateFakeNpmPackages } from \"../ai/generate.ts\";\nimport { geminiFlashModel } from \"../ai/models.ts\";\nimport { generateText } from \"https://esm.sh/ai@4.3.15?deps=zod@3.23.4\";\n\n/**\n * Generates a TypeScript implementation for a package based on its name and description\n */\nexport async function generatePackageImplementation(\n packageName: string,\n description: string,\n): Promise {\n const prompt = `\nCreate a simple TypeScript implementation for an npm package with the following details:\n- Package name: ${packageName}\n- Description: ${description}\n\nThe implementation should:\n1. Be a single TypeScript file\n2. Export a main function or class that fulfills the package description\n3. Include proper JSDoc comments\n4. Be simple but functional\n5. Include 2-3 helper functions if appropriate\n\nOnly return the TypeScript code without any explanation or markdown formatting.\n`;\n const response = await generateText({ model: geminiFlashModel, prompt });\n return response.text.trim();\n}\n\n/**\n * Compiles TypeScript to JavaScript\n * This is a simple implementation that doesn't use the TypeScript compiler\n * In a real-world scenario, you would use the TypeScript compiler API\n */\nexport function compileTypeScript(tsCode: string): string {\n // This is a very simplified \"compilation\" that just removes TypeScript types\n // In a real implementation, you would use the TypeScript compiler\n return tsCode\n .replace(/: [A-Za-z<>[\\]|&]+/g, \"\") // Remove type annotations\n .replace(/<[A-Za-z,\\s]+>/g, \"\") // Remove generic type parameters\n .replace(/export default/g, \"module.exports =\") // Convert export default to module.exports\n .replace(/export /g, \"\") // Remove export keywords\n .replace(/import .* from .*;\\n/g, \"\"); // Remove import statements\n}\n\n/**\n * Creates a tar archive for an npm package\n */\nexport async function createPackageTar(\n packageName: string,\n version: string = \"1.0.0\",\n description: string = \"\",\n author: string = \"Val Town\",\n license: string = \"MIT\",\n): Promise> {\n // Generate implementation if description is empty\n if (!description) {\n const results = await generateFakeNpmPackages(packageName, 1);\n description = results.packages[0].description;\n }\n\n // Generate TypeScript implementation\n const tsImplementation = await generatePackageImplementation(\n packageName,\n description,\n );\n\n // Compile to JavaScript\n const jsImplementation = compileTypeScript(tsImplementation);\n\n // Create package.json\n const packageJson = {\n name: packageName,\n version,\n description,\n main: \"index.js\",\n types: \"index.d.ts\",\n scripts: {\n test: 'echo \"Error: no test specified\" && exit 1',\n },\n keywords: packageName.split(\"-\"),\n author,\n license,\n };\n\n // Create type definition file\n const dtsContent = `/**\n * Type definitions for ${packageName}\n */\n${\n tsImplementation.replace(/export function/g, \"export declare function\")\n .replace(/export class/g, \"export declare class\")\n .replace(/export const/g, \"export declare const\")\n .replace(/export default/g, \"export default\")\n .replace(/= [^;]+;/g, \";\")\n }\n`;\n\n // Convert content to bytes\n const packageJsonBytes = new TextEncoder().encode(\n JSON.stringify(packageJson, null, 2),\n );\n const indexJsBytes = new TextEncoder().encode(jsImplementation);\n const indexTsBytes = new TextEncoder().encode(tsImplementation);\n const indexDtsBytes = new TextEncoder().encode(dtsContent);\n\n // Create a ReadableStream of TarStreamInput objects\n const inputStream = new ReadableStream({\n start(controller) {\n // Add package directory\n controller.enqueue({\n type: \"directory\",\n path: \"package\",\n });\n\n // Add package.json file\n controller.enqueue({\n type: \"file\",\n path: \"package/package.json\",\n size: packageJsonBytes.length,\n readable: ReadableStream.from([packageJsonBytes]),\n });\n\n // Add index.js file\n controller.enqueue({\n type: \"file\",\n path: \"package/index.js\",\n size: indexJsBytes.length,\n readable: ReadableStream.from([indexJsBytes]),\n });\n\n // Add index.ts file\n controller.enqueue({\n type: \"file\",\n path: \"package/index.ts\",\n size: indexTsBytes.length,\n readable: ReadableStream.from([indexTsBytes]),\n });\n\n // Add index.d.ts file\n controller.enqueue({\n type: \"file\",\n path: \"package/index.d.ts\",\n size: indexDtsBytes.length,\n readable: ReadableStream.from([indexDtsBytes]),\n });\n\n controller.close();\n },\n });\n\n // Pipe the input stream through the TarStream to create the tar archive\n return inputStream.pipeThrough(new TarStream());\n}\n",[],[186,443,452,445],"utils","c39ddd68-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[286],[186,443,452],"c39dd674-3432-11f0-9dcf-9e149126039e","search.ts","6a766ccd-c8d7-477c-a567-a59e994bbb65","bef1d36f-3bc1-4435-866e-42c1a7dc6d29",["D",1747605308326],"import { Hono } from \"https://esm.sh/hono@4.7.7\";\nimport { z } from \"https://esm.sh/zod@3.23.4\";\nimport { zValidator } from \"https://esm.sh/@hono/zod-validator@0.4.3?deps=hono@4.7.7,zod@3.23.4\";\nimport { generateFakeNpmPackages } from \"../ai/generate.ts\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { searchResultSchema } from \"../../../shared/schemas.ts\";\nimport { S3_PREFIX } from \"../../../shared/consts.ts\";\n\nexport const searchRoute = new Hono()\n .get(\n \"/\",\n zValidator(\n \"query\",\n z.object({\n q: z.string().min(1).describe(\"Search query term\"),\n n: z.string().transform((val) => parseInt(val, 10)),\n page: z.string().transform((val) => parseInt(val, 10)).default(\"1\"),\n }),\n ),\n async (c) => {\n const { q, n, page } = c.req.valid(\"query\");\n\n // Create a cache key based on the search query and page\n const cacheKey = `${S3_PREFIX}npm_search_${q}_${n}_${page}`;\n\n // Try to get cached results\n const cachedResults = await blob.getJSON(cacheKey);\n if (cachedResults) {\n // Validate the cached data against our schema\n const validatedResults = searchResultSchema.parse(cachedResults);\n return c.json(validatedResults);\n }\n\n // Generate new results\n const results = await generateFakeNpmPackages(q, n);\n\n // Add pagination info\n const resultsWithPagination = {\n ...results,\n page,\n hasMore: page < 10, // Limit to 10 pages for demo purposes\n };\n\n // Cache the results\n try {\n await blob.setJSON(cacheKey, resultsWithPagination);\n } catch (error) {\n console.error(\"Error caching results:\", error);\n }\n\n return c.json(resultsWithPagination);\n },\n );\n",[],[186,443,465,458],"routes","c39dd2aa-3432-11f0-9dcf-9e149126039e","package.ts","54b5a4f0-8714-4272-b769-d32bf25f789f",["D",1747605308326],"import { Hono } from \"https://esm.sh/hono@4.7.7\";\nimport { z } from \"https://esm.sh/zod@3.23.4\";\nimport { zValidator } from \"https://esm.sh/@hono/zod-validator@0.4.3?deps=hono@4.7.7,zod@3.23.4\";\nimport { generateFakeNpmPackages } from \"../ai/generate.ts\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { generatePackageReadme } from \"../ai/generate-readme.ts\";\n\nexport const packageRoute = new Hono()\n .get(\n \"/\",\n zValidator(\n \"query\",\n z.object({ name: z.string().min(1).describe(\"Package name\") }),\n ),\n async (c) => {\n const { name } = c.req.valid(\"query\");\n\n // Create a cache key for the package\n const cacheKey = `npm_package_${name}`;\n\n // Try to get cached package data\n const cachedPackage = await blob.getJSON(cacheKey);\n if (cachedPackage) {\n return c.json(cachedPackage);\n }\n\n // Generate a fake package\n const results = await generateFakeNpmPackages(name, 1);\n const packageData = results.packages[0];\n\n // Generate a fake README\n const readme = await generatePackageReadme(packageData);\n\n const packageResponse = {\n package: packageData,\n readme,\n };\n\n // Cache the package data\n try {\n await blob.setJSON(cacheKey, packageResponse);\n } catch (error) {\n console.error(\"Error caching package data:\", error);\n }\n\n return c.json(packageResponse);\n },\n );\n",[],[186,443,465,467],"c39dcfda-3432-11f0-9dcf-9e149126039e","npm-package.ts","3b5f1255-6208-4f61-8cdb-d69ab0426494",["D",1747605308326],"import { zValidator } from \"https://esm.sh/@hono/zod-validator@0.4.3?deps=hono@4.7.7,zod@3.23.4\";\nimport { Hono } from \"https://esm.sh/hono@4.7.7\";\nimport { z } from \"https://esm.sh/zod@3.23.4\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { S3_PREFIX } from \"../../../shared/consts.ts\";\nimport { createPackageTar } from \"../utils/package-generator.ts\";\n\nexport const npmPackageRoute = new Hono()\n .get(\n \"/:packageName\",\n zValidator(\n \"param\",\n z.object({\n packageName: z.string().min(1).describe(\"Package name\"),\n }),\n ),\n async (c) => {\n const { packageName } = c.req.valid(\"param\");\n\n const cacheKey = `${S3_PREFIX}npm_package_tar_${packageName}`;\n\n try {\n const cachedPackage = await blob.get(cacheKey);\n if (cachedPackage) {\n return new Response(cachedPackage.body, {\n headers: {\n \"Content-Type\": \"application/x-tar\",\n \"Content-Disposition\": `attachment; filename=${packageName}.tar`,\n },\n });\n }\n } catch {\n console.log(`Cache miss for package: ${packageName}`);\n }\n\n // Create the tar archive\n const tarArchive = await createPackageTar(packageName);\n \n // Clone the stream for caching and response\n const [cacheStream, responseStream] = tarArchive.tee();\n \n // Cache the package in the background\n cachePackage(cacheKey, cacheStream).catch(err => {\n console.error(`Error caching package ${packageName}:`, err);\n });\n \n // Return the response stream\n return new Response(responseStream, {\n headers: {\n \"Content-Type\": \"application/x-tar\",\n \"Content-Disposition\": `attachment; filename=${packageName}.tar`,\n },\n });\n },\n );\n\nasync function cachePackage(\n cacheKey: string,\n stream: ReadableStream,\n) {\n const response = new Response(stream);\n const bytes = await response.arrayBuffer();\n await blob.set(cacheKey, new Uint8Array(bytes));\n console.log(`Successfully cached package: ${cacheKey}`);\n}",[],[186,443,465,474],"c39dd7dc-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[282,283,284],[186,443,465],"c39dcc56-3432-11f0-9dcf-9e149126039e","models.ts","42ebe57f-606a-4b9d-8442-94818b66cd15","ecf8bcc9-c4df-4f8d-9ff1-9e7522cf7a72",["D",1747605308326],"import { google } from \"https://esm.sh/@ai-sdk/google@1.2.18\";\nimport { wrapLanguageModel } from \"https://esm.sh/ai@4.3.15\";\n\nexport const geminiFlashModel = wrapLanguageModel({\n model: google(\"gemini-1.5-flash-002\"),\n middleware: {},\n});\n",[],[186,443,492,485],"ai","c39dc800-3432-11f0-9dcf-9e149126039e","generate.ts","8ae2d0d7-387a-408b-8f69-c415c326376a",["D",1747605308326],"import { generateObject } from \"https://esm.sh/ai@4.3.15?deps=zod@3.23.4\";\nimport { z } from \"https://esm.sh/zod@3.23.4\";\nimport { geminiFlashModel } from \"./models.ts\";\n\nconst packageSchema = z.object({\n name: z.string()\n .describe(\"NPM package name following standard naming conventions\"),\n description: z.string()\n .describe(\"Brief description of what the package does, using markdown formatting for emphasis and links. Keep it realistic and focused on practical use cases.\"),\n tags: z.array(\n z.string()\n .describe(\"Technologies or categories related to this package. Use common, realistic tags like 'react', 'node', 'utility', 'api', etc.\"),\n ),\n author: z.string()\n .describe(\"Name of the fictional package author\"),\n version: z.string()\n .describe(\"Package version (e.g., '1.2.3')\"),\n license: z.string()\n .describe(\"Open source license (e.g., MIT, Apache-2.0)\"),\n downloads: z.number()\n .describe(\"Number of downloads (between 1,000 and 5,000,000)\"),\n avatarText: z.string()\n .describe(\"Text to display in the package avatar (usually initials)\"),\n updated: z.string()\n .describe(\"Date when the package was last updated (ISO format)\"),\n dependents: z.number()\n .describe(\"Number of packages that depend on this one\"),\n id: z.string()\n .describe(\"Unique identifier for the package\"),\n});\n\nexport type NpmPackage = z.infer;\n\nexport async function generateFakeNpmPackages(\n query: string,\n count: number = 5,\n): Promise<{ packages: NpmPackage[] }> {\n // Create an array of prompts with slight variations to increase diversity\n const prompts = Array.from({ length: count }, (_, i) => {\n const variations = [\n `Generate a realistic NPM package related to \"${query}\". Make it practical and focused on common developer needs. Use markdown formatting in the description field to emphasize key points or add links.`,\n `Create a fictional but realistic NPM package for \"${query}\" with practical features and naming. The description should use markdown formatting to highlight important features. Focus on common use cases that developers would actually need.`,\n `Invent a practical NPM package that would appear when searching \"${query}\". Be realistic with names and details. Use markdown in the description to make it more readable with emphasis or links. Avoid exotic or impractical technologies.`,\n `Design a realistic NPM package for \"${query}\" purposes. The description should use markdown formatting like **bold**, *italic*, or \\`code\\`. Focus on solving real-world problems that developers face.`,\n `Generate a practical NPM package related to \"${query}\". Use realistic naming and download counts. Include markdown formatting in the description to make it look like a real npm package description. Focus on common development needs.`,\n ];\n\n // Choose a prompt variation, cycling through them or randomly\n return variations[i % variations.length] + ` Index: ${i}`;\n });\n\n // Create an array of promises for concurrent execution with different prompts\n const generatePromises = prompts.map((prompt) =>\n generateObject({\n schema: packageSchema,\n model: geminiFlashModel,\n prompt: prompt + ` Make sure the package is realistic and practical, not using exotic technologies or making unrealistic claims. Focus on common developer needs and real-world use cases.`,\n temperature: 0.7,\n })\n );\n\n // Wait for all promises to resolve\n const results = await Promise.all(generatePromises);\n\n // Extract the objects from results and ensure uniqueness\n const packages = results.map((result, index) => ({\n ...result.object,\n // Ensure unique fields by adding index if necessary\n id: `${result.object.id}-${index}`,\n downloads: Math.floor(100000 + Math.random() * 4900000),\n updated: new Date(Date.now() - Math.floor(Math.random() * 30 * 86400000))\n .toISOString(),\n dependents: Math.floor(10 + Math.random() * 3000),\n }));\n\n return { packages };\n}\n\nexport type FakeNpmPackage = z.infer;\n\nexport type FakeNpmPackage = z.infer;\n",[],[186,443,492,494],"c39db4d2-3432-11f0-9dcf-9e149126039e","generate-readme.ts","44465e62-03c0-4d58-9249-d1d5070bda3f",["D",1747605308326],"import { geminiFlashModel } from \"./models.ts\";\nimport { NpmPackage } from \"../../../shared/schemas.ts\";\nimport { APP_URL } from \"../../../shared/consts.ts\";\n\nexport async function generatePackageReadme(\n packageData: NpmPackage,\n): Promise {\n const downloadUrl = `${APP_URL}api/npm-package/${packageData.name}`;\n \n const prompt = `\nGenerate a realistic README.md for an npm package with the following details:\n\n- Package name: ${packageData.name}\n- Description: ${packageData.description}\n- Tags/Keywords: ${packageData.tags.join(\", \")}\n- Author: ${packageData.author}\n- Version: ${packageData.version}\n- License: ${packageData.license}\n\nThe README should include:\n1. A title and badges (npm version, license, downloads)\n2. A brief introduction explaining what the package does\n3. Installation instructions\n4. Basic usage examples with code snippets\n5. API documentation for the main functions\n6. Contributing guidelines\n7. License information\n\nMake it look like a real npm package README with proper markdown formatting.\n\nIMPORTANT: Keep the content realistic and practical. Focus on common developer needs and real-world use cases. Avoid exotic technologies or making unrealistic claims. The package should solve practical problems that developers actually face.\n\nUse realistic code examples that demonstrate the actual functionality described. Don't include references to quantum computing, blockchain, AI, or other advanced technologies unless they're directly relevant to the package's core purpose.\n`;\n\n try {\n const response = await geminiFlashModel.generateContent(prompt);\n let markdown = response.response.text();\n \n // Post-process the markdown to replace npm install commands\n markdown = replaceNpmInstallCommands(markdown, packageData.name, downloadUrl);\n \n return markdown;\n } catch (error) {\n console.error(\"Error generating README:\", error);\n return generateFallbackReadme(packageData.name, packageData.description, downloadUrl);\n }\n}\n\n/**\n * Replaces npm install commands in the markdown with our download URL instructions\n */\nfunction replaceNpmInstallCommands(markdown: string, packageName: string, downloadUrl: string): string {\n // Replace npm install commands in code blocks\n const npmInstallRegex = new RegExp(`(npm|yarn) (install|add) ${packageName}`, 'g');\n const pnpmAddRegex = new RegExp(`pnpm add ${packageName}`, 'g');\n \n // First, find all code blocks and replace npm install commands\n let processedMarkdown = markdown.replace(/```(?:bash|sh)?\\n([\\s\\S]*?)```/g, (match, codeContent) => {\n // Check if this code block contains an npm install command\n if (npmInstallRegex.test(codeContent) || pnpmAddRegex.test(codeContent)) {\n // Replace with our download instructions\n return \"```bash\\n\" +\n `npm install ${downloadUrl}\\n` +\n \"```\";\n }\n return match; // Return unchanged if no npm install command\n });\n \n // Also replace any inline npm install commands\n processedMarkdown = processedMarkdown.replace(\n /`(npm|yarn) (install|add) ${packageName}`/g, \n `\\`npm install ${downloadUrl}\\``\n );\n \n // Add our installation section if none exists\n if (!processedMarkdown.includes(\"# Installation\") && !processedMarkdown.includes(\"## Installation\")) {\n processedMarkdown += `\\n\\n## Installation\\n\\n` +\n \"```bash\\n\" +\n `npm install ${downloadUrl}\\n` +\n \"```\\n\";\n }\n \n return processedMarkdown;\n}\n\n/**\n * Generates a fallback README if AI generation fails\n */\nfunction generateFallbackReadme(packageName: string, description: string, downloadUrl: string): string {\n return `# ${packageName}\n\n${description}\n\n## Installation\n\n\\`\\`\\`bash\nnpm install ${downloadUrl}\n\\`\\`\\`\n\n## Usage\n\n\\`\\`\\`javascript\nconst ${packageName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())} = require('${packageName}');\n\n// Use the package according to its functionality\n\\`\\`\\`\n\n## License\n\nMIT\n`;\n}\n",[],[186,443,492,501],"c39dce7c-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[278,279,280],[186,443,492],"c39de07e-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[277,281,285,287],[186,443],["D",1747605308326],[276,288,289],[186],"c5bd0baa-3432-11f0-aee7-9e149126039e","c5bd0c4a-3432-11f0-aee7-9e149126039e",24,["D",1747605311743],"import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport ValTown from \"jsr:@valtown/sdk\";\nimport { Hono } from \"npm:hono\";\nimport { cache } from \"npm:hono/cache\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\nimport { csrf } from \"npm:hono/csrf\";\nimport * as client from \"npm:openid-client\";\nimport { app as backend } from \"./backend/index.ts\";\nimport favicon from \"./frontend/favicon.http.tsx\";\n\nconst MODULE_URL = import.meta.resolve(\"./frontend/index.tsx\");\nconst STYLESHEET = import.meta\n .resolve(\"./frontend/styles.css\")\n .replace(\"esm.town\", \"juicy.town\");\n\nconst SCOPE = \"openid offline_access project_r project_rw user_r user_rw\";\nconst REDIRECT_URI = \"https://townie.val.run/\";\nconst VALTOWN_URL = \"https://val.town/\";\n\nconst app = new Hono();\n\nlet config: client.Configuration = await client.discovery(\n new URL(`https://www.val.town/oauth`),\n \"val_town_townie\",\n { client_secret: Deno.env.get(\"OAUTH_TOWNIE_CLIENT_SECRET\") },\n undefined,\n {}\n);\n\napp.use(csrf());\n\n// Cache all responses for 5 minutes on townie.val.town\n// TODO what is meant to be cached here??\napp.get(\n \"/frontend/*\",\n cache({\n cacheName: \"townie\",\n cacheControl: \"public, max-age=300\",\n wait: true,\n })\n);\n\n// token middleware for API requests\napp.all(\"/api/*\", async (c, next) => {\n const sessionCookie = getCookie(c, \"_session\");\n if (!sessionCookie) {\n return c.json({ error: \"Unauthorized\" }, 401);\n }\n const tokens = sessionCookie.split(\".\");\n c.set(\"token\", tokens[0]);\n return next();\n});\n\napp.route(\"/api\", backend);\n\napp.get(\"/frontend/*\", (c) => {\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.get(\"/favicon.svg\", (c) => {\n return favicon();\n});\napp.get(\"/favicon-loading.svg\", (c) => {\n return favicon(true);\n});\n\n// log in UI\napp.get(\"/login\", async (c) => {\n return c.html(`\n \n \n Townie\n \n \n \n \n \n

Townie

\n
\n \n Log in with Val Town\n \n

\n \n \n `);\n});\n\napp.post(\"/logout\", (c) => {\n deleteCookie(c, \"_session\");\n return c.redirect(VALTOWN_URL);\n});\n\n// redirect to OAuth flow\napp.get(\"/auth\", async (c) => {\n const sessionCookie = getCookie(c, \"_session\");\n if (sessionCookie) return c.redirect(\"/\");\n\n const codeVerifier = client.randomPKCECodeVerifier();\n const codeChallenge = await client.calculatePKCECodeChallenge(codeVerifier);\n const state = client.randomState();\n\n const parameters = {\n redirect_uri: REDIRECT_URI,\n scope: SCOPE,\n code_challenge: codeChallenge,\n code_challenge_method: \"S256\",\n prompt: \"login consent\",\n state,\n };\n const redirectUrl = client.buildAuthorizationUrl(config, parameters);\n setCookie(c, \"codeVerifier\", codeVerifier);\n setCookie(c, \"state\", state);\n\n return c.redirect(redirectUrl);\n});\n\n// OAuth callback\napp.get(\"*\", async (c, next) => {\n const code = c.req.query(\"code\");\n if (!code) return next();\n\n const pkceCodeVerifier = getCookie(c, \"codeVerifier\");\n const expectedState = getCookie(c, \"state\");\n const tokens = await client.authorizationCodeGrant(\n config,\n new URL(c.req.url),\n {\n pkceCodeVerifier,\n expectedState,\n }\n );\n const expiration = new Date(Date.now() + tokens.expires_in * 1000).getTime();\n const cookie = `${tokens.access_token}.${expiration}`;\n setCookie(c, \"_session\", cookie);\n return c.redirect(\"/\");\n});\n\n// check token expiration\napp.get(\"*\", async (c, next) => {\n const sessionCookie = getCookie(c, \"_session\");\n if (!sessionCookie) return next();\n\n let tokens = sessionCookie.split(\".\");\n const expiration = new Date(parseInt(tokens[1])).getTime();\n if (expiration < Date.now()) {\n deleteCookie(c, \"_session\");\n return c.redirect(\"/auth\");\n }\n return next();\n});\n\n// SPA routes\napp.get(\"*\", async (c) => {\n const sessionCookie = getCookie(c, \"_session\");\n\n try {\n // validate session\n const tokens = sessionCookie.split(\".\");\n const vt = new ValTown({ bearerToken: tokens[0] });\n const user = await vt.me.profile.retrieve();\n // console.log(\"logged in as user\", user.name);\n } catch (err) {\n console.log(err);\n deleteCookie(c, \"_session\");\n return c.redirect(\"/login\");\n }\n\n return c.html(`\n \n \n Townie\n \n \n \n \n \n \n

\n \n \n \n \n `);\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\nexport default app.fetch;\n",[],[191,421],"c5a983aa-3432-11f0-a1b3-9e149126039e","c5a9845e-3432-11f0-a1b3-9e149126039e",19,["D",1747605311768],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[191,153],"c5a740fe-3432-11f0-8289-9e149126039e","TODOs.md","c5a741b2-3432-11f0-8289-9e149126039e",18,["D",1747605311742],"- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!\n- [x] Get React Router working on the client & move off localstorage for storing page state\n- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)\n- [x] Make it look good\n- [ ] Persistent threads\n - [ ] Utils to help you revert to before or after messages or actions (related to commits)\n- [ ] give townie a search code tool for the code in the project, and like max’s codesearch tool too\n- [ ] improve the behavior when the signal is intermittent (neverstew mentioned this)\n- [ ] make it one click to branch off like old jp townie demos\n- [ ] opentownie as a pr bot\n- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them\n- [ ] do a browser use or screenshot thing to give it access to its own visual output\n- [ ] Have it default to creating a new branch off main\n- [ ] A way to upload docs, by URL? A mini site to recursively crawl docs and markdownify?\n- [ ] Give it a replace_file command (instead of delete & create)?\n- [ ] Add other LLMs ie Gemini, Deepseek, o3-mini, etc. Figure out how to get a text-editing to work in an LLM agnostic way\n- [x] Add a \"view source\" / \"send me a PR\" link\n- [x] Show the HTTP preview in second column if there is one (and let the user pick which one to preview in the iframe)\n- [x] Figure out a convention to teach in the anthropic prompt mod where the LLM always checks the readme for the scope (if not provided) and keeps it up to take with every change\n- [x] Ability to create new projects from the interface\n- [x] Figure out why OpenTownie can't create HTTP vals. Maybe give it a seperate tool for it?\n- [x] ensure line numbers are in the files added in the context window\n- [x] Make it clearer visually in the UI when tool calls fail\n- [x] Add to the opentownie prompt that it doens't need to create directories, it should just create files in directories by specifying their path, and we'll make sure the directory gets created. We can also potentially catch when the path of a file to create ends in / and make that a no-op.\n- [x] Remove the \"thinking...\" widget next to the send button\n- [x] Refactor /backend/index.ts into multiple files\n- [x] Format the JSON inside the tool-calls as pretty markdown\n - [x] Think as normal markdown\n - [x] File write as a code embed\n - [x] str_replace as a diff view\n- [x] make image drop area invisible and bigger\n- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)\n- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?\n- [x] Show reasoning in a detail\n- [x] Consider asking it to write the minimum code possible\n- [x] Add caching (post in the vercel ai discussion about how it's not working)\n- [x] For login, have a button that reloads the page\n- [x] Start a timer for messages\n- [x] Add more indicators that it's \"still working\"\n- [x] Require users supply their own Anthropic token?\n- [x] Add cost indications on messages\n- [x] Add a bell noise when the message is done to let us know\n- [x] Launch!\n- [x] Let it select the branch name from a dropdown\n\n\n\n\n\n",[],[191,533],"c5abd9e8-3432-11f0-a74a-9e149126039e","c5abdaba-3432-11f0-a74a-9e149126039e",20,["D",1747605311771],"# OpenTownie\n\nOpenTownie is an AI-powered development assistant that lets you edit Val Town projects using Claude 3.7 Sonnet. It provides a seamless interface for discussing your code with Claude AI, which can directly view and modify files in your Val Town projects.\n\n## Features\nIt uses agentic tool-calling, taking many read, write, and thinking steps autonomously when carrying out your instructions.\n\n- **AI-Assisted Editing**: Chat with Claude 3.7 Sonnet about your code and let it make changes directly to your project files\n- **File Browser**: Select specific files to include in the context window for more focused AI assistance\n- **Branch Management**: View, select, and create branches without leaving the app\n- **Cost Tracking**: See estimated API usage costs for each interaction\n- **Sound Notifications**: Get alerted when Claude finishes responding\n- **Mobile-Friendly**: Works on both desktop and mobile devices\n- **Usage Dashboard**: Monitor API usage and inference calls with detailed analytics\n\n## How It Works\n\n1. **Login**: Authenticate with your Val Town API token and Anthropic API key\n2. **Select a Project**: Choose which Val Town project you want to work on\n3. **Select Files**: Browse your project files and select which ones to include in the context window\n4. **Chat with Claude**: Describe what you want to build or modify, and Claude will help implement it\n5. **Branch Management**: Create and switch between branches to organize your development work\n\n## Getting Started\n\n### Prerequisites\n\n- A Val Town account with API access\n- An Anthropic API key (Claude 3.7 Sonnet)\n\n### Setup\n\n1. Visit the OpenTownie app\n2. Enter your Val Town API token (with `projects:write` and `users:read` permissions)\n3. Enter your Anthropic API key\n4. Click \"Login\" to access your projects\n\n## Usage Tips\n\n- **Be Specific**: When asking Claude to make changes, be as specific as possible about what you want\n- **Include Context**: Select relevant files to give Claude the context it needs\n- **Create Branches**: Create a new branch before making significant changes to avoid affecting your main code\n- **Review Changes**: Always review Claude's changes before merging them into your main branch\n- **Iterative Development**: Break down complex tasks into smaller steps for better results\n\n## Technical Details\n\nOpenTownie is built with:\n- React frontend with TypeScript\n- React Router\n- Hono API server backend\n- Web Audio API for sound notifications\n- AI SDK for Claude integration\n\nThe application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your project files directly.\n\n## Privacy & Security\n\n- Your Val Town API token and Anthropic API key are stored locally in your browser\n- No data is stored on our servers\n- All communication with the APIs is done directly from your browser\n",[],[191,163],"c5a57152-3432-11f0-af8a-9e149126039e","c5a57224-3432-11f0-af8a-9e149126039e",17,["D",1747605311740],".git\n.DS_Store\nnode_modules\nvendor\n*.swp\n\n",[],[191,169],"c534b322-3432-11f0-a617-9e149126039e","prompts","c534b3b8-3432-11f0-a617-9e149126039e",5,["D",1747605311003],[],[191,555],"c61642e2-3432-11f0-8608-9e149126039e","styles.css","c616436e-3432-11f0-8608-9e149126039e","c52c3756-3432-11f0-8628-9e149126039e",53,["D",1747605312467],"/** townie 2025 css */\n\n/* ia-writer-mono-latin-400-normal */\n@font-face {\n font-family: 'iA Writer Mono';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-mono@latest/latin-400-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-400-normal */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: normal;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-700-normal */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: normal;\n font-display: swap;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-400-italic */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: italic;\n font-display: swap;\n font-weight: 400;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff) format('woff');\n}\n\n/* ia-writer-quattro-latin-700-italic */\n@font-face {\n font-family: 'iA Writer Quattro';\n font-style: italic;\n font-display: swap;\n font-weight: 700;\n src: url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-italic.woff2) format('woff2'), url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-italic.woff) format('woff');\n}\n\n/** vars */\n:root {\n /* typography */\n --sans-serif: \"iA Writer Quattro\", system-ui, sans-serif;\n --monospace: \"iA Writer Mono\", Menlo, monospace;\n --border-radius: 12px;\n\n --font-size-1: 32px;\n --font-size-2: 24px;\n --font-size-3: 20px;\n --font-size-4: 16px;\n --font-size-5: 14px;\n --font-size-6: 12px;\n\n --space-0: 0;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 16px;\n --space-4: 32px;\n --space-5: 64px;\n --space-6: 128px;\n --space-7: 256px;\n --space-8: 512px;\n\n --container: 896px;\n\n /* colors */\n --slate-50: rgb(248, 250, 252);\n --slate-100: rgb(241, 245, 249);\n --slate-200: rgb(226, 232, 240);\n --slate-300: rgb(203, 213, 225);\n --slate-400: rgb(148, 163, 184);\n --slate-500: rgb(100, 116, 139);\n --slate-600: rgb(71, 85, 105);\n --slate-700: rgb(51, 65, 85);\n --slate-800: rgb(30, 41, 59);\n --slate-900: rgb(15, 23, 42);\n --slate-950: rgb(2, 6, 23);\n\n --sky-50: rgb(240, 249, 255);\n --sky-100: rgb(224, 242, 254);\n --sky-200: rgb(186, 230, 253);\n --sky-300: rgb(125, 211, 252);\n --sky-400: rgb(56, 189, 248);\n --sky-500: rgb(14, 165, 233);\n --sky-600: rgb(2, 132, 199);\n --sky-700: rgb(3, 105, 161);\n --sky-800: rgb(7, 89, 133);\n --sky-900: rgb(12, 74, 110);\n --sky-950: rgb(8, 47, 73);\n\n --fuchsia-50: rgb(253, 244, 255);\n --fuchsia-100: rgb(250, 232, 255);\n --fuchsia-200: rgb(245, 208, 254);\n --fuchsia-300: rgb(240, 171, 252);\n --fuchsia-400: rgb(232, 121, 249);\n --fuchsia-500: rgb(217, 70, 239);\n --fuchsia-600: rgb(192, 38, 211);\n --fuchsia-700: rgb(162, 28, 175);\n --fuchsia-800: rgb(134, 25, 143);\n --fuchsia-900: rgb(112, 26, 117);\n --fuchsia-950: rgb(74, 4, 78);\n\n --amber-50: rgb(255, 251, 235);\n --amber-100: rgb(254, 243, 199);\n --amber-200: rgb(253, 230, 138);\n --amber-300: rgb(252, 211, 77);\n --amber-400: rgb(251, 191, 36);\n --amber-500: rgb(245, 158, 11);\n --amber-600: rgb(217, 119, 6);\n --amber-700: rgb(180, 83, 9);\n --amber-800: rgb(146, 64, 14);\n --amber-900: rgb(120, 53, 15);\n --amber-950: rgb(69, 26, 3);\n\n --red-light: #fdd;\n --red: #f00;\n --red-dark: #300;\n\n /* color aliases */\n --text: black; /* body foreground color */\n --background: white; /* body background color */\n --primary: var(--sky-500); /* primary brand color for links, buttons, etc. */\n --primary-hover: var(--sky-600); /* primary brand color for links, buttons, etc. */\n --secondary: var(--fuchsia-500); /* secondary brand color for alternative styling */\n --accent: var(--amber-500); /* contrast color for emphasizing UI */\n --highlight: var(--sky-100); /* background color for highlighting text */\n --muted: var(--slate-200); /* faint color for backgrounds, borders, and accents that do not require high contrast with the background color */\n --border: var(--slate-200);\n --error-text: var(--red);\n --error-bg: var(--red-light);\n}\n\n/** TODO */\n.dark {\n --text: var(--slate-50); /* body foreground color */\n --background: var(--slate-900); /* body background color */\n --primary: var(--sky-500); /* primary brand color for links, buttons, etc. */\n --primary-hover: var(--sky-400); /* primary brand color for links, buttons, etc. */\n --secondary: var(--fuchsia-500); /* secondary brand color for alternative styling */\n --accent: var(--amber-500); /* contrast color for emphasizing UI */\n --highlight: var(--sky-900); /* background color for highlighting text */\n --muted: var(--slate-800); /* faint color for backgrounds, borders, and accents that do not require high contrast with the background color */\n --border: var(--slate-900);\n --error-bg: var(--red-dark);\n}\n\n/** reset */\n* { box-sizing: border-box }\nbody {\n margin: 0;\n font-family: var(--sans-serif);\n color: var(--text);\n background-color: var(--background);\n transition-property: background-color;\n transition-duration: 400ms;\n transition-timing-function: linear;\n}\n\na {\n color: var(--primary);\n}\na:hover, a:focus {\n color: var(--primary-hover);\n}\n\n\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n padding: 0;\n}\np, ol, ul, blockquote, pre {\n margin-top: var(--space-1);\n margin-bottom: var(--space-1);\n}\n\nbutton {\n appearance: none;\n background: none;\n border: 0;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n.label {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n font-size: 14px;\n font-weight: 700;\n margin-top: var(--space-1);\n margin-bottom: var(--space-1);\n}\n\ninput[type=text],\ninput[type=url],\ninput[type=password] {\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: inherit;\n padding: var(--space-1) var(--space-2);\n /*\n border-radius: var(--border-radius);\n */\n color: var(--text);\n background-color: var(--muted);\n border: 1px solid transparent;\n}\ninput[type=text]:focus,\ninput[type=url]:focus,\ninput[type=password]:focus {\n background-color: var(--highlight);\n outline: none;\n border-color: var(--primary);\n}\nselect {\n display: block;\n height: 32px;\n font-family: var(--monospace);\n font-size: var(--font-size-6);\n padding: var(--space-1) var(--space-1);\n color: var(--text);\n background-color: var(--muted);\n border: 1px solid transparent;\n cursor: pointer;\n}\nselect:hover,\nselect:focus {\n background-color: var(--highlight);\n}\nselect:focus {\n outline: none;\n border-color: var(--primary);\n}\n\npre, code {\n font-family: var(--monospace);\n}\npre {\n min-width: 0;\n max-width: 100%;\n overflow: auto;\n white-space: pre-wrap;\n}\n\nhr {\n margin: 0;\n max-width: 256px;\n border: 0;\n border-bottom: 1px solid var(--muted);\n}\n\n/** typography */\n.h1 { font-size: var(--font-size-1) }\n.h2 { font-size: var(--font-size-2) }\n.h3 { font-size: var(--font-size-3) }\n.h4 { font-size: var(--font-size-4) }\n.h5 { font-size: var(--font-size-5) }\n.h6 { font-size: var(--font-size-6) }\n\n.bold { font-weight: 700 }\n.regular { font-weight: 400 }\n.italic { font-style: italic }\n.mono { font-family: \"iA Writer Mono\", Menlo, monospace }\n\n.truncate {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/** layout */\n.header {\n position: sticky;\n top: 0;\n height: var(--space-5);\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n background-color: var(--background);\n}\n\n.footer {\n padding: var(--space-2) 0;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--font-size-6);\n background-color: var(--background);\n}\n.footer-text {\n opacity: 0.625;\n}\n.footer-text:hover {\n opacity: 1;\n}\n\n.section {\n margin-top: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.section-grid {\n display: grid;\n gap: var(--space-3);\n}\n@media screen and (min-width: 768px) {\n .section-grid {\n grid-template-columns: 1fr 1fr;\n gap: var(--space-4);\n }\n}\n\n.log-in-container {\n max-width: 512px;\n margin: 0 auto;\n padding: var(--space-4);\n display: flex;\n flex-direction: column;\n justify-content: center;\n min-height: 100vh;\n}\n\n/** projects list */\n.container {\n max-width: 1024px;\n padding: var(--space-3);\n margin: 0 auto;\n}\n.container.small {\n max-width: 512px;\n}\n.projects-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.projects-list {\n display: grid;\n gap: var(--space-3);\n padding-top: var(--space-4);\n padding-bottom: var(--space-5);\n}\n@media screen and (min-width: 768px) {\n .projects-list {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n/** OLD chat route layout */\n.chat-container {\n display: flex;\n flex-direction: column;\n height: calc(100vh - 64px);\n min-height: 512px;\n padding: 0 var(--space-2);\n}\n.chat-messages {\n min-height: 0;\n min-width: 0;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n}\n.chat-messages-list {\n min-height: 0;\n flex-grow: 1;\n overflow: auto;\n padding-top: var(--space-4);\n padding-bottom: var(--space-4);\n}\n.chat-messages-input {\n min-height: 0;\n flex-shrink: 0;\n margin-bottom: var(--space-3);\n}\n.chat-preview {\n order: -1;\n flex-shrink: 0;\n min-height: 0;\n min-width: 0;\n height: 40vh;\n}\n@media screen and (min-width: 768px) {\n .chat-container {\n width: 100%;\n flex-direction: row;\n gap: var(--space-5);\n padding: 0 var(--space-4);\n }\n .chat-preview {\n width: 384px;\n height: auto;\n order: 2;\n }\n .chat-messages-input {\n margin-bottom: var(--space-4);\n }\n}\n/** END chat route layout */\n\n/** NEW single-column chat layout */\n.single-column-container {\n display: flex;\n flex-direction: column;\n min-height: calc(100vh - var(--space-5));\n max-width: var(--container);\n margin: 0 auto;\n padding-left: var(--space-3);\n padding-right: var(--space-3);\n}\n.single-sticky-header {\n position: sticky;\n top: var(--space-5);\n background-color: var(--background);\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n.single-chat-input {\n position: sticky;\n bottom: 0;\n}\n.inline-preview {\n width: 100%;\n max-width: 512px;\n max-height: 50vh;\n}\n.url-bar {\n padding-left: var(--space-2);\n background-color: var(--muted);\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n/** END single-column chat layout */\n\n.spacer { margin: auto }\n\n/** decoration */\n.header a {\n color: inherit;\n text-decoration: none;\n}\n.block-link {\n min-width: 0;\n max-width: 100%;\n display: block;\n text-decoration: none;\n color: inherit;\n}\n.text-link:hover {\n color: var(--primary);\n text-decoration: underline;\n}\n.rounded { border-radius: var(--border-radius) }\n.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }\n.shadow { box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }\n.white-fade-up { box-shadow: 0 -8px 48px 4px rgba(255, 255, 255, 0.9875) }\n.border { border: 1px solid var(--slate-100) }\n\n/** components */\n.icon-button {\n padding: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--background);\n background-color: var(--primary);\n}\n.icon-button:hover {\n background-color: var(--primary-hover);\n}\n.icon-button:disabled {\n opacity: 0.2;\n}\n.icon-button.large svg {\n width: 32px;\n height: 32px;\n}\n.dark-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 4px;\n width: 32px;\n height: 32px;\n border-radius: 9999px;\n}\n.dark-button:hover,\n.dark-button:focus {\n background-color: var(--highlight);\n}\n.townie-link {\n margin-left: var(--space-3);\n}\n\n.button {\n display: inline-flex;\n align-items: center;\n font-weight: 400;\n min-height: 32px;\n padding: 6px 12px;\n cursor: pointer;\n text-decoration: none;\n min-width: 0;\n flex-shrink: 0;\n}\n.button.small {\n font-size: 12px;\n padding: 4px 6px;\n}\n.button.primary {\n color: var(--background);\n background-color: var(--primary);\n}\n.button:hover,\n.button:focus {\n color: var(--sky-600);\n background-color: var(--sky-100);\n}\n.button:hover.primary,\n.button:focus.primary {\n color: var(--background);\n background-color: var(--primary-hover);\n}\n\n.form {\n display: grid;\n gap: var(--space-3);\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/** messages */\n.messages-list {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n scroll-behavior: smooth;\n line-height: 1.625;\n padding-top: var(--space-4);\n padding-bottom: var(--space-4);\n}\n.messages-list::after {\n content: \"\";\n display: block;\n height: 1px;\n visibility: hidden;\n}\n\n.user-message {\n color: var(--primary);\n max-width: 80%;\n margin-left: auto;\n}\n\n.details {\n font-size: var(--font-size-6);\n background-color: var(--muted);\n}\n.summary {\n font-size: var(--font-size-6);\n font-family: var(--monospace);\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-1) var(--space-2);\n cursor: pointer;\n background-color: var(--muted);\n user-select: none;\n}\n.summary:hover {\n background-color: var(--highlight);\n}\n.details[open] .summary {\n background-color: var(--highlight);\n}\n.details-body {\n padding: var(--space-2);\n max-height: 50vh;\n overflow: auto;\n}\n\n.timestamp {\n font-family: var(--monspace);\n font-size: var(--font-size-6);\n text-align: right;\n}\n\n.error-box {\n font-size: var(--font-size-5);\n font-family: var(--monospace);\n padding: var(--space-2);\n color: var(--error-text);\n background-color: var(--error-bg);\n}\n\n.cursor {\n display: inline-block;\n width: 0.6em;\n height: 1.2em;\n margin-right: 1em;\n background-color: var(--text);\n vertical-align: text-bottom;\n animation: blink 1s step-end infinite;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n}\n\n/** InputBox */\n.textarea {\n display: block;\n width: 100%;\n height: 60px; /* account for borders */\n color: inherit;\n background-color: transparent;\n font-family: inherit;\n font-size: 14px;\n padding: 8px 12px;\n line-height: 1.5;\n border: 0;\n outline: none;\n resize: none;\n}\ntextarea::placeholder {\n color: inherit !important;\n opacity: 0.5;\n}\n.input-box { /* wrapper around textarea */\n width: 100%;\n background-color: var(--muted);\n border: 1px solid transparent;\n padding: var(--space-1);\n}\n.input-box:focus-within {\n background-color: var(--highlight);\n}\n.toolbar {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n/** PreviewBox */\n.preview {\n display: flex;\n flex-direction: column;\n min-height: 0;\n height: 100%;\n flex-grow: 1;\n gap: var(--space-2);\n}\n@media screen and (min-width: 768px) {\n .preview {\n gap: var(--space-3);\n }\n}\n\n.preview-header {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n.preview-iframe {\n width: 100%;\n height: auto;\n aspect-ratio: 16 / 9;\n flex-grow: 0;\n object-fit: contain;\n border: 0;\n zoom: 0.5;\n background-color: white;\n}\n\n.preview-footer {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n\ninput[type=url].url-input {\n font-family: var(--monospace);\n font-size: var(--font-size-6);\n height: 32px;\n border: 0;\n border-radius: 0;\n background-color: var(--muted);\n}\ninput[type=text].url-input:focus {\n background-color: var(--highlight);\n outline: none;\n}\n\n.lockup {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.lockup-username {\n font-size: var(--font-size-5);\n}\n.lockup-name {\n font-size: var(--font-size-4);\n font-weight: 700;\n}\n\n/** ValCard */\n.card {\n border: 1px solid var(--border);\n border-radius: var(--border-radius);\n display: flex;\n gap: var(--space-2);\n align-items: center;\n overflow: hidden;\n}\n.card:hover {\n background-color: var(--highlight);\n}\n.card-image {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n object-fit: cover;\n border--top-left-radius: var(--border-radius);\n border--bottom-left-radius: var(--border-radius);\n flex-shrink: 0;\n}\n.card-body {\n flex: 1 1 auto;\n}\n.project-name {\n font-weight: 700;\n}\n.username,\n.project-description {\n font-size: var(--font-size-6);\n}\n\n.avatar {\n border-radius: 99999px;\n object-fit: cover;\n}\n\n.image-placeholder,\n.image-thumbnail {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: 6px;\n object-fit: cover;\n}\n.image-placeholder {\n background-color: var(--muted);\n}\n\n.privacy {\n display: inline-block;\n font-size: var(--font-size-6);\n font-weight: 400;\n margin-left: 0.5em;\n}\n\n.image-row {\n display: flex;\n gap: var(--space-1);\n}\n.input-image {\n position: relative;\n border: 1px solid var(--muted);\n border-radius: 6px;\n}\n.remove-image-button {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n background-color: var(--red);\n cursor: pointer;\n opacity: 0;\n}\n.input-image:hover .remove-image-button {\n opacity: 1;\n}\n\n.image-drop-overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n.image-drop-inner {\n padding: var(--space-2);\n background-color: var(--background);\n}\n\n.transition, .input-box, .icon-button, .button, .remove-image-button {\n transition-property: color, background-color, border-color, opacity;\n transition-duration: 200ms;\n transition-timing-function: ease-in-out;\n}\n\n.debug, .debug * {\n outline: 1px solid rgba(0, 128, 255, 0.2);\n}\n.bg-debug-1 { background-color: var(--sky-100) }\n.bg-debug-2 { background-color: var(--fuchsia-100) }\n.bg-debug-3 { background-color: var(--amber-100) }\n\n\n@media screen and (max-width: 40em) {\n .mobile-hide { display: none }\n}\n",[],[191,181,562],"c61be008-3432-11f0-9fcb-9e149126039e","c61be1b6-3432-11f0-9fcb-9e149126039e",55,["D",1747605312503],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { createRoot } from \"react-dom\";\nimport { App } from \"./components/App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")).render();",[],[191,181,344],"c613fe24-3432-11f0-84b1-9e149126039e","favicon.http.tsx","c613fece-3432-11f0-84b1-9e149126039e",52,["D",1747605312466],"/** @jsxImportSource npm:react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\nimport { TownieIcon } from \"./components/icons.tsx\";\n\nexport default async function (loading: boolean) {\n const svg = renderToString(\n \n );\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n}\n",[],[191,181,578],"c61fe0c2-3432-11f0-83ee-9e149126039e","soundEffects.ts","c61fe14e-3432-11f0-83ee-9e149126039e","c56286bc-3432-11f0-aee7-9e149126039e",56,["D",1747605312544],"/**\n * Sound effects utility functions for the application\n */\n\n/**\n * Plays a bell sound notification using the Web Audio API\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playBellSound(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n const masterGain = audioCtx.createGain();\n masterGain.connect(audioCtx.destination);\n \n // Bell frequency ratios (fundamental and overtones)\n const ratios = [1, 2, 2.4, 3, 4, 5.4];\n const baseFreq = 440; // Fundamental frequency\n \n // Create and connect oscillators for each frequency component\n ratios.forEach((ratio, i) => {\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n \n // Connect this oscillator chain\n osc.connect(gain);\n gain.connect(masterGain);\n \n // Set frequency based on ratio\n osc.frequency.value = baseFreq * ratio;\n \n // Amplitude decreases for higher overtones\n const volume = 0.2 / (i + 1);\n \n // Set envelope\n const now = audioCtx.currentTime;\n gain.gain.setValueAtTime(0, now);\n gain.gain.linearRampToValueAtTime(volume, now + 0.01);\n \n // Different decay times for different harmonics\n const decayTime = 1.0 + (i * 0.3);\n gain.gain.exponentialRampToValueAtTime(0.001, now + decayTime);\n \n // Start and stop\n osc.start(now);\n osc.stop(now + decayTime);\n });\n \n // Resolve the promise after a short delay to ensure sound has started\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing bell sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}\n\n/**\n * Plays a simple notification sound using the Web Audio API\n * This is a simpler, shorter bell sound\n * @returns A Promise that resolves when the sound has started playing\n */\nexport function playSimpleNotification(): Promise {\n return new Promise((resolve) => {\n try {\n // Create audio context\n const AudioContext = window.AudioContext || (window as any).webkitAudioContext;\n if (!AudioContext) {\n console.warn(\"Web Audio API not supported in this browser\");\n resolve();\n return;\n }\n \n const audioCtx = new AudioContext();\n \n // Create oscillator (sound generator)\n const oscillator = audioCtx.createOscillator();\n oscillator.type = 'sine';\n oscillator.frequency.value = 900;\n \n // Create gain node for volume control\n const gainNode = audioCtx.createGain();\n \n // Connect the audio nodes\n oscillator.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n \n // Get current time reference\n const now = audioCtx.currentTime;\n \n // Set volume envelope for bell-like sound\n gainNode.gain.setValueAtTime(0, now);\n gainNode.gain.linearRampToValueAtTime(0.3, now + 0.01);\n gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n \n // Start and stop the sound\n oscillator.start(now);\n oscillator.stop(now + 0.5);\n \n // Resolve the promise after a short delay\n setTimeout(resolve, 50);\n } catch (error) {\n console.error(\"Error playing notification sound:\", error);\n resolve(); // Resolve anyway to prevent hanging promises\n }\n });\n}",[],[191,181,452,586],"c623e974-3432-11f0-83ee-9e149126039e","images.ts","c623ea28-3432-11f0-83ee-9e149126039e",57,["D",1747605312570],"\nexport const PROMPT_IMAGE_LIMIT = 5;\n\nexport const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {\n const imageFiles = files.filter(file => file.type.startsWith('image/'));\n const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);\n\n if (filesToProcess.length === 0) return;\n\n const newImages = [...images, ...Array(filesToProcess.length).fill(null)];\n setImages(newImages);\n\n const processedImages = await Promise.all(\n filesToProcess.map(async (file) => {\n return await readFileAsDataURL(file);\n })\n );\n\n const updatedImages = [...images];\n processedImages.forEach((dataUrl, index) => {\n updatedImages[images.length + index] = dataUrl;\n });\n\n setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));\n};\n\nconst readFileAsDataURL = (file: File): Promise => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const result = reader.result as string;\n console.log(\"Image loaded, size:\", result.length, \"bytes\");\n resolve(result);\n };\n reader.onerror = reject;\n reader.readAsDataURL(file);\n });\n};\n",[],[191,181,452,595],"c56285fe-3432-11f0-aee7-9e149126039e",10,["D",1747605311303],[264,265],[191,181,452],"c6372ee4-3432-11f0-9fcb-9e149126039e","useUser.tsx","c6372f8e-3432-11f0-9fcb-9e149126039e","c56aeb9a-3432-11f0-aee7-9e149126039e",63,["D",1747605312693],"import { useState, useEffect } from \"react\";\n\nconst USER_ENDPOINT = \"/api/user\";\n\nexport function useUser() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const userEndpoint = new URL(USER_ENDPOINT, window.location.origin);\n\n const res = await fetch(userEndpoint);\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n setData(null);\n setLoading(false);\n return;\n }\n\n setData(data);\n setLoading(false);\n setError(null);\n } catch (e) {\n setError(e);\n setLoading(false);\n setData(null);\n }\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[191,181,616,608],"hooks","c629fa26-3432-11f0-8dd0-9e149126039e","useUsageStats.ts","c629fada-3432-11f0-8dd0-9e149126039e",59,["D",1747605312610],"import { useEffect } from \"react\";\n\nexport function useUsageStats(messages: any[], usages: any[]) {\n useEffect(() => {\n if (!messages?.length) return;\n let last = messages.at(-1);\n let usage = usages ? usages[last.id] : null;\n if (usage) {\n const cost = calculateCost(usage);\n const stats = Object.entries(usage)\n .map(([key, val]) => `${key}: ${val}`)\n .join(\", \");\n console.log(`Estimated cost: ${cost} (${stats})`);\n }\n }, [messages, usages]);\n}\n\n// Calculate cost based on token usage\nconst calculateCost = (usage: any): string => {\n if (!usage || !usage.promptTokens) {\n return \"0.00\";\n }\n\n // Cost per million tokens\n const PROMPT_COST_PER_MILLION = 3;\n const COMPLETION_COST_PER_MILLION = 15;\n const CACHE_WRITE_COST_PER_MILLION = 3.75;\n const CACHE_READ_COST_PER_MILLION = 0.3;\n\n // Get reported values\n const promptTokens = usage.promptTokens || 0;\n const completionTokens = usage.completionTokens || 0;\n\n // Estimate cache read tokens\n // Approach: Estimate that 40% of prompt tokens come from cache read\n // This percentage can be adjusted based on observed patterns\n const estimatedCacheReadTokens = Math.round(promptTokens * 0.4);\n\n // Estimate cache write tokens\n // Approach: Assume cache write tokens are a portion of prompt tokens that aren't from cache read\n let estimatedCacheWriteTokens = 0;\n\n // If we have more prompt tokens than estimated cache read tokens,\n // estimate that 70% of the difference are cache write tokens\n estimatedCacheWriteTokens = Math.round(\n (promptTokens - estimatedCacheReadTokens) * 0.7\n );\n\n // Calculate costs\n // Subtract both cache read and write tokens from prompt tokens to avoid double counting\n const promptCost =\n ((promptTokens - estimatedCacheWriteTokens - estimatedCacheReadTokens) /\n 1000000) *\n PROMPT_COST_PER_MILLION;\n const completionCost =\n (completionTokens / 1000000) * COMPLETION_COST_PER_MILLION;\n const cacheWriteCost =\n (estimatedCacheWriteTokens / 1000000) * CACHE_WRITE_COST_PER_MILLION;\n const cacheReadCost =\n (estimatedCacheReadTokens / 1000000) * CACHE_READ_COST_PER_MILLION;\n\n // Total cost\n const totalCost =\n promptCost + completionCost + cacheWriteCost + cacheReadCost;\n\n // Add both estimated cache tokens to the usage object for transparency\n usage.estimatedCacheReadTokens = estimatedCacheReadTokens;\n usage.estimatedCacheWriteTokens = estimatedCacheWriteTokens;\n\n // Store the raw cost with more precision for debugging\n usage.rawCost = totalCost.toFixed(5);\n\n // Format to the nearest penny (2 decimal places)\n // If less than 1 penny, show \"< $0.01\"\n if (totalCost < 0.01) {\n return \"< $0.01\";\n } else {\n return \"$\" + totalCost.toFixed(2);\n }\n};\n",[],[191,181,616,618],"c62faac0-3432-11f0-88fa-9e149126039e","useScrollToBottom.tsx","c62fab6a-3432-11f0-88fa-9e149126039e",61,["D",1747605312636],"import { useEffect, useRef } from 'https://esm.sh/react@18.2.0?dev';\n\n\n/**\n * A custom hook that automatically scrolls a container to the bottom\n * when its content changes, based on the specified dependencies.\n *\n * @param {Array} dependencies - Array of dependencies that trigger scrolling when changed\n * @returns {Object} An object containing containerRef and scrollToBottom function\n */\nexport function useScrollToBottomContainer(dependencies = []) {\n const containerRef = useRef(null);\n\n const scrollToBottom = () => {\n if (containerRef.current) {\n setTimeout(() => {\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n }, 0);\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { containerRef, scrollToBottom };\n}\n\n// body scroll version\nexport function useScrollToBottom(dependencies = []) {\n const bottomRef = useRef(null);\n\n const scrollToBottom = () => {\n if (bottomRef.current) {\n bottomRef.current.scrollIntoView({ behavior: 'smooth' });\n }\n };\n\n useEffect(() => {\n scrollToBottom();\n }, dependencies);\n\n return { bottomRef, scrollToBottom };\n}\n\n",[],[191,181,616,626],"c625cb04-3432-11f0-88fa-9e149126039e","useProjects.tsx","c625cbb8-3432-11f0-88fa-9e149126039e",58,["D",1747605312571],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/projects-loader\";\n\nexport function useProjects() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const res = await fetch(ENDPOINT);\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error);\n setData(null);\n setLoading(false);\n return;\n }\n\n setData(data);\n setLoading(false);\n setError(null);\n } catch (e) {\n console.error(e);\n setData(null);\n setError(e);\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchData();\n }, []);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[191,181,616,634],"c632451e-3432-11f0-a132-9e149126039e","useProject.tsx","c63245b4-3432-11f0-a132-9e149126039e",62,["D",1747605312654],"import { useState, useEffect } from \"react\";\n\nconst PROJECT_ENDPOINT = \"/api/project\";\nconst FILES_ENDPOINT = \"/api/project-files\";\n\nexport function useProject(projectId: string, branchId?: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const fetchData = async () => {\n try {\n const projectEndpoint = new URL(PROJECT_ENDPOINT, window.location.origin);\n projectEndpoint.searchParams.append(\"projectId\", projectId);\n const filesEndpoint = new URL(FILES_ENDPOINT, window.location.origin);\n filesEndpoint.searchParams.append(\"projectId\", projectId);\n if (branchId) filesEndpoint.searchParams.append(\"branchId\", branchId);\n\n const { project } = await fetch(projectEndpoint).then((res) =>\n res.json()\n );\n const { files } = await fetch(filesEndpoint).then((res) => res.json());\n\n setData({ project, files });\n setLoading(false);\n setError(null);\n } catch (e) {\n setError(e);\n setLoading(false);\n setData(null);\n }\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId, branchId]);\n\n return { data, loading, error, refetch: fetchData };\n}\n",[],[191,181,616,642],"c6451798-3432-11f0-a132-9e149126039e","useLoadingFavicon.ts","c6451824-3432-11f0-a132-9e149126039e",67,["D",1747605312788],"import { useEffect } from \"react\";\n\nfunction setLoadingFavicon() {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon-loading.svg\";\n}\nfunction resetFavicon() {\n document.querySelector('link[rel=\"icon\"]').href = \"/favicon.svg\";\n}\n\nexport function useLoadingFavicon(loading: boolean) {\n useEffect(() => {\n if (loading) setLoadingFavicon();\n else resetFavicon();\n }, [loading]);\n}\n",[],[191,181,616,650],"c63b6054-3432-11f0-83ee-9e149126039e","useCreateProject.tsx","c63b61c6-3432-11f0-83ee-9e149126039e",64,["D",1747605312724],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/create-project\";\n\nexport function useCreateProject() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createProject = async ({\n name,\n privacy,\n }: {\n name: string;\n privacy: \"public\" | \"unlisted\" | \"private\";\n }) => {\n setLoading(true);\n setData(null);\n setError(null);\n try {\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n name: name,\n privacy: privacy,\n }),\n });\n const data = await res.json();\n if (!res.ok) {\n console.error(data);\n setError(data.error ?? \"Failed to create project\");\n return data;\n }\n setData(data);\n setLoading(false);\n setError(null);\n return data;\n } catch (e) {\n console.error(e);\n setError(e);\n setLoading(false);\n setData(null);\n return e;\n }\n };\n\n return { data, loading, error, createProject };\n}\n",[],[191,181,616,658],"c62ce97a-3432-11f0-9fcb-9e149126039e","useCreateBranch.tsx","c62cea24-3432-11f0-9fcb-9e149126039e",60,["D",1747605312616],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/create-branch\";\n\nexport function useCreateBranch(projectId: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const createBranch = async ({ name }: { name: string }) => {\n setLoading(true);\n setData(null);\n setError(null);\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n body: JSON.stringify({\n projectId,\n branchName: name,\n }),\n });\n const data = await res.json();\n if (!res.ok) {\n setError(data.error ?? \"Failed to create branch\");\n return data;\n }\n setData(data); // todo error handling\n setLoading(false);\n setError(null);\n return data;\n };\n\n return { data, loading, error, createBranch };\n}\n",[],[191,181,616,666],"c6407be8-3432-11f0-88fa-9e149126039e","useChatLogic.ts","c6407c88-3432-11f0-88fa-9e149126039e",66,["D",1747605312757],"import { useChat } from \"@ai-sdk/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { playBellSound } from \"../utils/soundEffects.ts\";\n\ninterface UseChatLogicProps {\n project: any;\n branchId: string | undefined;\n selectedFiles: string[];\n images: (string | null)[];\n soundEnabled: boolean;\n}\n\nexport function useChatLogic({\n project,\n branchId,\n // anthropicApiKey,\n // bearerToken,\n selectedFiles,\n images,\n soundEnabled,\n}: UseChatLogicProps) {\n const [usages, setUsages] = useState>({});\n const [messageEndTimes, setMessageEndTimes] = useState<\n Record\n >({});\n const customStopRef = useRef<(() => void) | null>(null);\n\n const {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n stop,\n status,\n } = useChat({\n api: \"/api/send-message\",\n body: {\n project,\n branchId,\n selectedFiles,\n images: images\n .filter((img): img is string => {\n const isValid = typeof img === \"string\" && img.startsWith(\"data:\");\n if (!isValid && img !== null) {\n console.warn(\n \"Invalid image format:\",\n img?.substring(0, 50) + \"...\"\n );\n }\n return isValid;\n })\n .map((img) => ({ url: img })),\n },\n onFinish: (message, options) => {\n setUsages((prev) => ({\n ...prev,\n [message.id]: options.usage,\n }));\n\n setMessageEndTimes((prev) => ({\n ...prev,\n [message.id]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch((error) => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n },\n });\n\n const running = status === \"streaming\" || status === \"submitted\";\n\n const pendingMessageId = useMemo(() => {\n if (!running) return null;\n const pendingMessages = messages.filter(\n (msg) => msg.role === \"assistant\" && !messageEndTimes[msg.id]\n );\n return pendingMessages.length > 0\n ? pendingMessages[pendingMessages.length - 1].id\n : null;\n }, [messages, messageEndTimes, running]);\n\n const handleStop = useCallback(() => {\n stop();\n\n if (pendingMessageId) {\n setMessageEndTimes((prev) => ({\n ...prev,\n [pendingMessageId]: Date.now(),\n }));\n\n if (soundEnabled) {\n playBellSound().catch((error) => {\n console.log(\"Error playing bell sound:\", error);\n });\n }\n }\n }, [stop, pendingMessageId, soundEnabled]);\n\n React.useEffect(() => {\n customStopRef.current = handleStop;\n }, [handleStop]);\n\n React.useEffect(() => {\n (window as any).customStopRef = customStopRef;\n }, []);\n\n return {\n messages,\n error,\n input,\n handleInputChange,\n handleSubmit: originalHandleSubmit,\n handleStop,\n running,\n usages,\n messageEndTimes,\n };\n}\n",[],[191,181,616,674],"c63d2d6c-3432-11f0-a694-9e149126039e","useBranches.tsx","c63d2e48-3432-11f0-a694-9e149126039e",65,["D",1747605312724],"import { useState, useEffect } from \"react\";\n\nconst ENDPOINT = \"/api/project-branches\";\n\nexport function useBranches (projectId: string) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const fetchData = async () => {\n const endpoint = new URL(ENDPOINT, window.location.origin);\n endpoint.searchParams.append(\"projectId\", projectId);\n\n const res = await fetch(endpoint)\n .then(res => res.json());\n setData(res.branches);\n setLoading(false);\n };\n\n useEffect(() => {\n if (!projectId) return;\n fetchData();\n }, [projectId]);\n\n return { data, loading, refetch: fetchData };\n}",[],[191,181,616,682],"c56aeac8-3432-11f0-aee7-9e149126039e",11,["D",1747605311358],[253,254,255,256,257,258,259,260,261,262],[191,181,616],"c64ed508-3432-11f0-a132-9e149126039e","PreviewFrame.tsx","c64ed594-3432-11f0-a132-9e149126039e","c574fab8-3432-11f0-a1b3-9e149126039e",69,["D",1747605312816],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\nimport { useEffect, useRef, useState } from \"react\";\nimport { RefreshIcon } from \"./icons.tsx\";\n\ninterface PreviewProps {\n files: any[];\n messages: any[];\n running: boolean;\n}\n\nexport function PreviewFrame(props: PreviewProps) {\n const previewKey = useRef(\"new-chat\");\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n if (props.running) return;\n previewKey.current = props.messages?.at(-1)?.id ?? \"new-chat\";\n }, [props.running, props.messages]);\n\n const { url, htmlVals, index, setIndex } = usePreviewURL(props);\n const [pathname, setPathname] = useState(\"\");\n\n const reload = () => {\n setCount(c => c + 1);\n previewKey.current += count;\n };\n\n if (!url) {\n return (\n

\n No HTML files to preview\n

\n );\n }\n\n return (\n <>\n \n

\n \n

\n \n \n \n \n \n Open >>\n \n

\n \n );\n}\n\nconst TSRE = /\\/$/;\n\nfunction URLInput({ url, pathname, setPathname }) {\n const prefix = url.replace(TSRE, \"\");\n return (\n {\n const raw = e.target.value;\n if (!raw.includes(prefix)) return;\n let next = raw.replace(prefix, \"\").replace(/^\\//, \"\");\n setPathname(next);\n }}\n />\n );\n}\n\nfunction PreviewSelect({ index, setIndex, files }) {\n return (\n

\n \n Preview file\n \n {\n setIndex(Number(e.target.value));\n }}\n >\n \n {files?.map((file, i) => (\n \n {file.name}\n \n ))}\n \n

\n );\n}\n\nfunction usePreviewURL({ files }) {\n const [index, setIndex] = useState(0);\n const htmlVals = files?.filter(file => file.links?.endpoint !== undefined);\n\n const url = htmlVals?.length ? htmlVals[index]?.links.endpoint : null;\n\n return {\n index,\n setIndex,\n url,\n htmlVals,\n };\n}",[],[191,181,372,695],"c647e4d2-3432-11f0-9fcb-9e149126039e","NotFoundRoute.tsx","c647e6c6-3432-11f0-9fcb-9e149126039e",68,["D",1747605312792],"/** @jsxImportSource https://esm.sh/react@18.2.0?dev */\n\nexport function NotFoundRoute () {\n return (\n

Page not found

\n );\n}\n",[],[191,181,372,704],"c653d92c-3432-11f0-88fa-9e149126039e",["D",1747605312817],[],[191,181,372,32],"c574fa0e-3432-11f0-a1b3-9e149126039e",12,["D",1747605311422],[249,250,251],[191,181,372],"c52c36a2-3432-11f0-8628-9e149126039e",4,["D",1747605310946],[248,252,263,266,267,268],[191,181],"c5b0db82-3432-11f0-9fcb-9e149126039e","c5b0dc4a-3432-11f0-9fcb-9e149126039e","c5234754-3432-11f0-aee7-9e149126039e",21,["D",1747605311812],"import { Hono } from \"npm:hono\";\nimport createBranchApp from \"./routes/create-branch.ts\";\nimport createProjectApp from \"./routes/create-project.ts\";\nimport projectBranchesApp from \"./routes/project-branches.ts\";\nimport projectFilesApp from \"./routes/project-files.ts\";\nimport projectsLoaderApp from \"./routes/projects-loader.ts\";\nimport projectApp from \"./routes/project.ts\";\nimport sendMessageApp from \"./routes/send-message.ts\";\nimport userRoute from \"./routes/user.ts\";\n\nexport const app = new Hono();\n\napp.route(\"/send-message\", sendMessageApp);\napp.route(\"/projects-loader\", projectsLoaderApp);\napp.route(\"/project-files\", projectFilesApp);\napp.route(\"/project-branches\", projectBranchesApp);\napp.route(\"/project\", projectApp);\napp.route(\"/create-branch\", createBranchApp);\napp.route(\"/create-project\", createProjectApp);\napp.route(\"/user\", userRoute);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n",[],[191,186,421],"c5e41e98-3432-11f0-8608-9e149126039e","fileWithLinesNumbers.ts","c5e41f4c-3432-11f0-8608-9e149126039e","c546fa8c-3432-11f0-92b1-9e149126039e",39,["D",1747605312139],"export default function fileWithLineNumbers(text: string, view_range = []) {\n return [\n undefined, // Line numbers are 1-indexed\n ...text.split(\"\\n\"),\n ]\n .map((line, index) => index + \": \" + line)\n .slice(...view_range)\n .join(\"\\n\");\n}",[],[191,186,452,734],"c5de27e0-3432-11f0-93a3-9e149126039e","calculateCost.tsx","c5de28a8-3432-11f0-93a3-9e149126039e",37,["D",1747605312111],"// Rates for Claude 3.7 Sonnet (per million tokens)\nconst INPUT_RATE = 3.0; // $3.00 per M input tokens\nconst OUTPUT_RATE = 15.0; // $15.00 per M output tokens\nconst CACHE_READ_RATE = 0.30; // $0.30 per M cache-read tokens\nconst CACHE_WRITE_RATE = 3.75; // $3.75 per M cache-write tokens\n\nexport function calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens = 0,\n cache_write_tokens = 0,\n}: {\n input_tokens: number;\n output_tokens: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n}): number {\n // Convert token counts to millions\n const inMillions = (n: number) => n / 1_000_000;\n\n const inputCost = inMillions(input_tokens) * INPUT_RATE;\n const outputCost = inMillions(output_tokens) * OUTPUT_RATE;\n const cacheReadCost = inMillions(cache_read_tokens) * CACHE_READ_RATE;\n const cacheWriteCost = inMillions(cache_write_tokens) * CACHE_WRITE_RATE;\n\n return inputCost + outputCost + cacheReadCost + cacheWriteCost;\n}",[],[191,186,452,743],"c546f9ce-3432-11f0-92b1-9e149126039e",7,["D",1747605311120],[244,245],[191,186,452],"c5ff9f10-3432-11f0-83ee-9e149126039e","think.ts","c5ff9fa6-3432-11f0-83ee-9e149126039e","c5595222-3432-11f0-b02f-9e149126039e",47,["D",1747605312332],"import { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Tool for thinking through complex problems without making external changes\n */\nexport const thinkTool = tool({\n description:\n \"Use the tool to think about something. It will not obtain new information or change the database, but just append the thought to the log. Use it when complex reasoning or some cache memory is needed.\",\n parameters: z.object({\n thought: z.string().describe(\"A thought to think about.\"),\n }),\n execute: async ({ thought }) => {\n return { \n type: 'success', \n data: \"Thought recorded\" \n };\n },\n});",[],[191,186,764,756],"tools","c5fb0928-3432-11f0-84b1-9e149126039e","text-editor.ts","c5fb09dc-3432-11f0-84b1-9e149126039e",46,["D",1747605312303],"import { anthropic } from \"npm:@ai-sdk/anthropic\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\nfunction printFileType(file: any){\n if (file.type === \"interval\")\n return \" (cron)\"\n else if (file.type === \"http\" || file.type === \"email\")\n return \" (\" + file.type + \")\"\n else return \"\"\n}\n\n/**\n * View a file or directory in a Val Town project\n */\nasync function view(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n view_range: number[] | undefined,\n) {\n if (path.endsWith(\"/\")) {\n try {\n const files = await vt.projects.files.retrieve(project.id, {\n path: path.slice(0, -1),\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id,\n });\n return {\n type: \"success\",\n data: files.data.map(file => file.path + printFileType(file)).join(\"\\n\"),\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: `Error listing directory: ${e.message}`,\n };\n }\n }\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n const text = await file.text();\n if (!view_range) {\n return {\n type: \"success\",\n data: fileWithLinesNumbers(text),\n };\n }\n\n return {\n type: \"success\",\n data: fileWithLinesNumbers(text),\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Replace a string in a file in a Val Town project\n */\nasync function str_replace(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n old_str?: string,\n new_str?: string,\n) {\n if (old_str === undefined || new_str === undefined) {\n return {\n type: \"error\",\n message: \"What do you mean by replace with no old_str?\",\n };\n }\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"Found file\");\n const text = await file.text();\n let matches = text.split(old_str).length - 1;\n\n if (matches === 0) {\n return {\n type: \"error\",\n message: \"No match found for replacement. Please check your text and try again.\",\n };\n }\n\n if (matches > 1) {\n return {\n type: \"error\",\n message: `Found ${matches} matches for replacement text. Please provide more context to make a unique match.`,\n };\n }\n\n let newText = text.replace(old_str, new_str);\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"String replaced successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Create a new file in a Val Town project\n */\nasync function create(vt: ValTown, project: any, branch_id: string | undefined, path: string, file_text?: string) {\n let type_: \"file\" | \"http\" | \"script\";\n if (path.includes(\"backend/index.ts\")) type_ = \"http\";\n if (file_text?.includes(\"export default app.fetch\")) type_ = \"http\";\n if ([\".ts\", \".tsx\", \".js\", \".jsx\"].some(ext => path.endsWith(ext))) {\n type_ = \"script\";\n } else {\n type_ = \"file\";\n }\n\n try {\n const resp = await vt.projects.files.create(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: file_text ?? \"\",\n type: type_, // For now, folks have to change the types in the UI\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"File created successfully\",\n };\n } catch (e) {\n console.log(e.stack);\n return {\n type: \"error\",\n message: \"Could not create file. It likely already exists.\",\n };\n }\n}\n\n/**\n * Insert a string at a specific line in a file in a Val Town project\n */\nasync function insert(\n vt: ValTown,\n project: any,\n branch_id: string | undefined,\n path: string,\n insert_line?: number,\n new_str?: string,\n) {\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n console.log(\"found file\");\n const text = await file.text();\n\n const lines = text.split(\"\\n\");\n lines.splice(insert_line ?? 0, 0, new_str ?? \"\");\n\n const newText = lines.join(\"\\n\");\n const resp = await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content: newText,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"Text inserted successfully\",\n };\n } catch (e: any) {\n console.log(e.stack);\n // likely due to a 404\n return {\n type: \"error\",\n message: \"File not found\",\n };\n }\n}\n\n/**\n * Undo the last edit to a file in a Val Town project (not implemented)\n */\nasync function undo_edit(vt: ValTown, project: any, branch_id: string | undefined) {\n return {\n type: \"error\",\n message: \"Command unimplemented\",\n };\n}\n\n/**\n * Creates a text editor tool for editing files in a Val Town project\n */\nexport function getTextEditorTool(bearerToken: string, project: any, branch_id: string | undefined) {\n const vt = new ValTown({ bearerToken });\n return anthropic.tools.textEditor_20250124({\n execute: async ({\n command,\n path,\n file_text,\n insert_line,\n new_str,\n old_str,\n view_range,\n }) => {\n console.log({\n command,\n path,\n file_text,\n insert_line,\n new_str,\n old_str,\n view_range,\n });\n try {\n if (command === \"view\") return view(vt, project, branch_id, path, view_range);\n if (command === \"str_replace\") return str_replace(vt, project, branch_id, path, old_str, new_str);\n if (command === \"create\") return create(vt, project, branch_id, path, file_text);\n if (command === \"insert\") return insert(vt, project, branch_id, path, insert_line, new_str);\n if (command === \"undo_edit\") return undo_edit(vt, project, branch_id);\n else return {\n type: \"error\",\n message: \"Command unknown\",\n };\n } catch (e: any) {\n console.error(e);\n return {\n type: \"error\",\n message: e.stack,\n };\n }\n },\n });\n}",[],[191,186,764,766],"c6079cba-3432-11f0-a74a-9e149126039e","overwrite-file.ts","c6079d82-3432-11f0-a74a-9e149126039e",49,["D",1747605312385],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for replacing files in a Val Town project\n * This deletes the existing file and creates a new one with the provided content\n */\nexport const makeOverwriteFileTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string },\n) =>\n tool({\n description: \"Use this tool to completely replace a file with new content.\",\n parameters: z.object({\n path: z.string().describe(\"The file path to replace\"),\n content: z.string().describe(\"The new content for the file\"),\n }),\n execute: async ({ path, content }: { path: string; content: string }) => {\n const vt = new ValTown({ bearerToken });\n const normalizedPath = path.startsWith(\"/\") ? path.slice(1) : path;\n\n try {\n await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n content,\n branch_id,\n });\n\n return {\n type: \"success\",\n data: \"File replaced successfully\",\n };\n } catch (e: any) {\n return {\n type: \"error\",\n message: \"Error replacing file: \" + e.message,\n };\n }\n },\n });",[],[191,186,764,774],"c60c00e8-3432-11f0-84b1-9e149126039e","c60c017e-3432-11f0-84b1-9e149126039e",50,["D",1747605312411],"import { makeChangeValTypeTool } from \"./change-val-type.ts\";\nimport { makeDeleteTool } from \"./delete.ts\";\nimport { makeOverwriteFileTool } from \"./overwrite-file.ts\";\nimport { getTextEditorTool } from \"./text-editor.ts\";\nimport { thinkTool } from \"./think.ts\";\n\nexport { getTextEditorTool, makeChangeValTypeTool, makeDeleteTool, makeOverwriteFileTool, thinkTool };",[],[191,186,764,421],"c60e3570-3432-11f0-83ee-9e149126039e","delete.ts","c60e3624-3432-11f0-83ee-9e149126039e",51,["D",1747605312354],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for deleting files in a Val Town project\n */\nexport const makeDeleteTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string },\n) =>\n tool({\n description:\n \"Use this tool to delete a file. It's also useful when you want to re-create a file from scratch: first delete the old file and then create the new file from scratch.\",\n parameters: z.object({\n path: z.string().describe(\"The file path to delete\"),\n }),\n execute: async ({ path }: { path: string }) => {\n const vt = new ValTown({ bearerToken });\n try {\n await vt.projects.files.delete(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n });\n } catch (e: any) {\n return { \n type: 'error', \n message: \"Error deleting file: \" + e.message \n };\n }\n return { \n type: 'success', \n data: \"File deleted\" \n };\n },\n });",[],[191,186,764,789],"c61997ee-3432-11f0-a74a-9e149126039e","change-val-type.ts","c61998a2-3432-11f0-a74a-9e149126039e",["D",1747605312468],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { tool } from \"npm:ai\";\nimport { z } from \"npm:zod\";\n\n/**\n * Creates a tool for updated file triggers Val Town projects\n */\nexport const makeChangeValTypeTool = (\n { bearerToken, project, branch_id }: { bearerToken: string; project: any; branch_id: string },\n) =>\n tool({\n description: `Use this tool to edit the HTTP, cron or email triggers on a file.\nA file can only have zero or one triggers.\nThe cron schedule ccannot be set via this tool. If you create a cron, inform the user to change its schedule in the Val Town web UI.`,\n parameters: z.object({\n path: z.string().describe(\"The file path to add or remove the trigger to\"),\n type: z.enum([\"http\", \"email\", \"cron\", \"none\"]).describe(\"The type of trigger to add\"),\n }),\n execute: async ({ path, type }: { path: string, type: string }) => {\n const vt = new ValTown({ bearerToken });\n try {\n await vt.projects.files.update(project.id, {\n path: path.startsWith(\"/\") ? path.slice(1) : path,\n branch_id,\n type: type === \"cron\" \n ? \"interval\"\n : type === \"none\" && [\".ts\", \".tsx\", \".js\", \".jsx\"].some(ext => path.endsWith(ext))\n ? \"script\"\n : type === \"none\"\n ? \"file\"\n : type\n });\n } catch (e: any) {\n return { \n type: 'error', \n message: \"Error updating file type: \" + e.message \n };\n }\n return { \n type: 'success', \n data: `File ${path} updated to have ${type} trigger` \n };\n },\n });",[],[191,186,764,797],"c5595182-3432-11f0-b02f-9e149126039e",9,["D",1747605311243],[237,238,239,240,241,242],[191,186,764],"c5e13048-3432-11f0-af8a-9e149126039e","user.ts","c5e130d4-3432-11f0-af8a-9e149126039e","c550cabc-3432-11f0-92b1-9e149126039e",38,["D",1747605312133],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// used to check authentication\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n const user = await vt.me.profile.retrieve();\n\n return c.json(user);\n});\n\nexport default app;\n",[],[191,186,465,809],"c5e7077a-3432-11f0-a694-9e149126039e","send-message.ts","c5e70874-3432-11f0-a694-9e149126039e",40,["D",1747605312171],"import { readFile } from \"https://esm.town/v/std/utils@71-main/index.ts\";\nimport { createAnthropic } from \"npm:@ai-sdk/anthropic\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { convertToCoreMessages, type CoreUserMessage, streamText } from \"npm:ai\";\nimport { Hono } from \"npm:hono\";\nimport { finishTrackingUsage, insertInferenceCall, overLimit, startTrackingUsage } from \"../database/queries.tsx\";\nimport {\n getTextEditorTool,\n makeChangeValTypeTool,\n makeDeleteTool,\n makeOverwriteFileTool,\n thinkTool,\n} from \"../tools/index.ts\";\nimport fileWithLinesNumbers from \"../utils/fileWithLinesNumbers.ts\";\n\nconst app = new Hono();\n\n// Load system prompts\nconst systemPromptPromise = readFile(\"/prompts/system_prompt.txt\", import.meta.url);\nconst openTowniePromptAdditionsPromise = readFile(\"/prompts/open_townie_prompt_additions.txt\", import.meta.url);\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();\n\n // do we want to allow user-provided tokens still\n const apiKey = anthropicApiKey || Deno.env.get(\"ANTHROPIC_API_KEY\");\n const our_api_token = apiKey === Deno.env.get(\"ANTHROPIC_API_KEY\");\n\n if (our_api_token) {\n if (await overLimit(bearerToken)) {\n return Response.json(\n \"You have reached the 24-hour Townie limit. Upgrade to Pro for 10x limits: https://val.town/pricing. Email help@val.town to pay for even higher limits.\",\n { status: 403 },\n );\n }\n }\n\n const model = \"claude-3-7-sonnet-20250219\";\n\n const rowid = await startTrackingUsage({\n our_api_token,\n bearerToken, // will look up the userId from this\n branch_id: branchId,\n val_id: project.id,\n num_images: images?.length || 0,\n model: \"claude-3-7-sonnet-20250219\",\n });\n\n const anthropic = createAnthropic({\n apiKey,\n });\n\n let coreMessages = convertToCoreMessages(messages);\n\n // If there are images, we need to add them to the last user message\n if (images && Array.isArray(images) && images.length > 0) {\n // Find the last user message\n const lastUserMessageIndex = coreMessages.findIndex(\n (msg, idx) => msg.role === \"user\" && idx === coreMessages.length - 1,\n );\n\n if (lastUserMessageIndex !== -1) {\n // Get the text content from the last user message\n const lastUserMessageContent = coreMessages[lastUserMessageIndex].content;\n\n // Create a new message with multimodal content\n // Format the message according to the Vercel AI SDK's expected format\n const newUserMessage: CoreUserMessage = {\n role: \"user\",\n content: typeof lastUserMessageContent === \"string\"\n ? [{\n type: \"text\",\n text: lastUserMessageContent,\n }]\n : lastUserMessageContent,\n };\n\n // Add each image to the content array using the correct ImagePart format\n for (const image of images) {\n if (image && image.url) {\n // Extract mime type from data URL if available\n let mimeType = undefined;\n if (image.url.startsWith(\"data:\")) {\n const matches = image.url.match(/^data:([^;]+);/);\n if (matches && matches.length > 1) {\n mimeType = matches[1];\n }\n }\n\n newUserMessage.content.push({\n type: \"image\",\n image: image.url,\n mimeType,\n });\n }\n }\n\n // Replace the last user message with our new multimodal message\n coreMessages[lastUserMessageIndex] = newUserMessage;\n }\n }\n\n // If there are selected files, fetch their content and add them to the messages\n if (selectedFiles && selectedFiles.length > 0) {\n const vt = new ValTown({ bearerToken });\n\n try {\n // Create a message with the file contents\n let fileContents = \"# Selected Project Files\\n\\n\";\n\n for (const filePath of selectedFiles) {\n if (filePath.endsWith(\"/\")) continue; // Skip directories\n\n try {\n const file = await vt.projects.files.getContent(project.id, {\n path: filePath.startsWith(\"/\") ? filePath.slice(1) : filePath,\n branch_id: branchId || undefined,\n });\n\n const content = await file.text();\n fileContents += `## File: ${filePath}\\n\\`\\`\\`\\n${fileWithLinesNumbers(content)}\\n\\`\\`\\`\\n\\n`;\n } catch (error) {\n console.error(`Error fetching file ${filePath}:`, error);\n fileContents += `## File: ${filePath}\\nError: Could not fetch file content\\n\\n`;\n }\n }\n\n // Add the file contents as the last message\n coreMessages.push({\n role: \"user\",\n content: [{ type: \"text\", text: fileContents }],\n });\n } catch (error) {\n console.error(\"Error processing selected files:\", error);\n }\n }\n\n // Add cache control to the last message\n let lastMessage = coreMessages.at(-1);\n if (lastMessage) {\n // If the last message is a string, convert it to the array type\n if (typeof lastMessage.content === \"string\") {\n lastMessage.content = [\n { type: \"text\", text: lastMessage.content },\n ];\n }\n // @ts-ignore\n lastMessage.content.at(-1).providerOptions = {\n anthropic: { cacheControl: { type: \"ephemeral\" } },\n };\n }\n\n // console.log(JSON.stringify(coreMessages, null, 2));\n\n // Await the system prompts\n const system = await systemPromptPromise;\n const open_townie_prompt_additions = await openTowniePromptAdditionsPromise;\n\n const result = await streamText({\n model: anthropic(model),\n messages: coreMessages,\n system: system + \"\\n\\n\" + open_townie_prompt_additions,\n tools: {\n str_replace_editor: getTextEditorTool(bearerToken, project, branchId),\n think: thinkTool,\n delete_file: makeDeleteTool({ bearerToken, project, branch_id: branchId }),\n change_val_type: makeChangeValTypeTool({ bearerToken, project, branch_id: branchId }),\n overwrite_file: makeOverwriteFileTool({ bearerToken, project, branch_id: branchId }),\n },\n maxSteps: 20,\n maxTokens: 4_096 * 10,\n abortSignal: c.req.raw.signal,\n onStepFinish: async (result: any) => {\n await insertInferenceCall({\n usage_id: rowid,\n step_type: result.stepType,\n finish_reason: result.finishReason,\n input_tokens: result.usage.promptTokens,\n output_tokens: result.usage.completionTokens,\n cache_read_tokens: result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens: result.providerMetadata.anthropic.cacheCreationInputTokens,\n });\n },\n onFinish: async (result: any) => {\n await finishTrackingUsage({\n rowid,\n finish_reason: result.finishReason,\n input_tokens: result.usage.promptTokens,\n output_tokens: result.usage.completionTokens,\n cache_read_tokens: result.providerMetadata.anthropic.cacheReadInputTokens,\n cache_write_tokens: result.providerMetadata.anthropic.cacheCreationInputTokens,\n });\n },\n });\n\n return result.toDataStreamResponse({\n sendReasoning: true,\n experimental_sendFinish: true,\n getErrorMessage: error => {\n console.log(\"Error in toDataStreamResponse:\", error);\n if (error == null) {\n return \"unknown error\";\n }\n\n if (typeof error === \"string\") {\n return error;\n }\n\n if (error instanceof Error) {\n return error.message;\n }\n\n return JSON.stringify(error);\n },\n });\n});\n\nexport default app;",[],[191,186,465,818],"c5f17ec6-3432-11f0-a74a-9e149126039e","projects-loader.ts","c5f17f8e-3432-11f0-a74a-9e149126039e",44,["D",1747605312238],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Unauthorized\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const [profile, projects] = await Promise.all([\n vt.me.profile.retrieve(),\n vt.me.projects.list({\n limit: 100,\n }),\n ]);\n\n return c.json({ profile, projects: projects.data });\n});\n\nexport default app;\n",[],[191,186,465,826],"c5e94576-3432-11f0-83ee-9e149126039e","project.ts","c5e9462a-3432-11f0-83ee-9e149126039e",41,["D",1747605312186],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n const projectId = c.req.query(\"projectId\");\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const project = await vt.projects.retrieve(projectId);\n // console.log({ project }, Object.keys(project));\n\n return c.json({ project });\n});\n\nexport default app;\n",[],[191,186,465,834],"c5eb1b44-3432-11f0-84b1-9e149126039e","project-files.ts","c5eb1bd0-3432-11f0-84b1-9e149126039e",42,["D",1747605312198],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n const branchId = c.req.query(\"branchId\");\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const files = await vt.projects.files.retrieve(projectId, {\n path: \"\",\n limit: 100,\n offset: 0,\n recursive: true,\n branch_id: branchId || undefined,\n });\n\n return c.json({ files: files.data });\n } catch (error) {\n console.error(\"Error fetching project files:\", error);\n return Response.json({ error: \"Failed to fetch project files\" }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[191,186,465,842],"c602d59a-3432-11f0-93a3-9e149126039e","project-branches.ts","c602d644-3432-11f0-93a3-9e149126039e",48,["D",1747605312276],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const projectId = c.req.query(\"projectId\");\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const branches = await vt.projects.branches.list(projectId, { limit: 100 });\n return c.json({ branches: branches.data });\n } catch (error) {\n console.error(\"Error fetching branches:\", error);\n return Response.json({ error: \"Failed to fetch branches\" }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[191,186,465,850],"c5ef4f48-3432-11f0-a1b3-9e149126039e","create-project.ts","c5ef4fde-3432-11f0-a1b3-9e149126039e",43,["D",1747605312226],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { name, description, privacy } = await c.req.json();\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const project = await vt.projects.create({\n name,\n description,\n privacy,\n });\n\n return c.json({ project });\n } catch (e: any) {\n return c.json({ error: e.message }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[191,186,465,858],"c5f71fe8-3432-11f0-9fcb-9e149126039e","create-branch.ts","c5f72074-3432-11f0-9fcb-9e149126039e",45,["D",1747605312275],"import { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.post(\"/\", async (c) => {\n const bearerToken = c.get(\"token\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const { projectId, branchName } = await c.req.json();\n\n if (!projectId) {\n return Response.json(\"Please provide a projectId\", { status: 400 });\n }\n\n if (!branchName) {\n return Response.json(\"Please provide a branchName\", { status: 400 });\n }\n\n // Validate branch name (only letters, numbers, and dashes)\n const branchNameRegex = /^[a-zA-Z0-9-]+$/;\n if (!branchNameRegex.test(branchName)) {\n return Response.json({\n error: \"Branch name can only contain letters, numbers, and dashes\",\n }, { status: 400 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n try {\n const newBranch = await vt.projects.branches.create(projectId, {\n name: branchName,\n });\n\n return c.json({ branch: newBranch });\n } catch (error) {\n console.error(\"Error creating branch:\", error);\n return Response.json({\n error: error instanceof Error ? error.message : \"Failed to create branch\",\n }, { status: 500 });\n }\n});\n\nexport default app;\n",[],[191,186,465,866],"c550ca12-3432-11f0-92b1-9e149126039e",8,["D",1747605311185],[228,229,230,231,232,233,234,235],[191,186,465],"c5beb450-3432-11f0-8289-9e149126039e","schema.tsx","c5beb504-3432-11f0-8289-9e149126039e","c53d0a22-3432-11f0-a617-9e149126039e",25,["D",1747605311833],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const USAGE_TABLE = \"townie_usage\";\nexport const INFERENCE_CALLS_TABLE = \"townie_inference_calls\";\n\nexport interface Usage {\n user_id: string;\n username: string;\n timestamp: number;\n finish_timestamp?: number;\n val_id: string;\n branch_id: string;\n input_tokens?: number;\n output_tokens?: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n model: string;\n price?: number;\n finish_reason?: string;\n num_images?: number;\n our_api_token: boolean;\n}\n\nasync function createTables() {\n // archive a table\n // await sqlite.execute(\n // `ALTER TABLE ${USAGE_TABLE} RENAME TO ${USAGE_TABLE}_1`,\n // );\n // create a new table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USAGE_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id TEXT NOT NULL,\n username TEXT NOT NULL,\n timestamp INTEGER NOT NULL,\n val_id TEXT NOT NULL,\n branch_id TEXT,\n input_tokens INTEGER,\n output_tokens INTEGER,\n cache_read_tokens INTEGER,\n cache_write_tokens INTEGER,\n model TEXT,\n price REAL,\n finish_reason TEXT,\n num_images INTEGER,\n our_api_token INTEGER NOT NULL,\n finish_timestamp INTEGER\n )\n `);\n // add all the data from the old table\n // await sqlite.execute(`INSERT INTO ${USAGE_TABLE} SELECT * FROM ${USAGE_TABLE}_1`);\n\n // TODO add an index on usage_id\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${INFERENCE_CALLS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n usage_id INTEGER NOT NULL REFERENCES ${USAGE_TABLE}(id),\n timestamp INTEGER NOT NULL,\n input_tokens INTEGER,\n output_tokens INTEGER,\n cache_read_tokens INTEGER,\n cache_write_tokens INTEGER,\n price REAL,\n step_type TEXT,\n finish_reason TEXT\n )\n `);\n}\n\nasync function deleteTables() {\n await sqlite.execute(`DROP TABLE IF EXISTS ${USAGE_TABLE}`);\n await sqlite.execute(`DROP TABLE IF EXISTS ${INFERENCE_CALLS_TABLE}`);\n}\n\n// await deleteTables();\nawait createTables();",[],[191,186,887,879],"database","c5b813ac-3432-11f0-8608-9e149126039e","queries.tsx","c5b815fa-3432-11f0-8608-9e149126039e",22,["D",1747605311829],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { ValTown } from \"npm:@valtown/sdk@0.37.0\";\nimport { calculateCost } from \"../utils/calculateCost.tsx\";\nimport { INFERENCE_CALLS_TABLE, USAGE_TABLE } from \"./schema.tsx\";\n\n// Eventually we'll have a user database,\n// but in the meantime, we can cache user info in memory\nconst userIdCache: { [key: string]: any } = {};\nexport async function getUser(bearerToken: string) {\n if (userIdCache[bearerToken]) return userIdCache[bearerToken];\n\n const vt = new ValTown({ bearerToken });\n const me = await vt.me.profile.retrieve();\n userIdCache[bearerToken] = me;\n return me;\n}\n\nasync function last24Hours(userId: string) {\n const usage = await sqlite.execute(\n `SELECT \n sum(price) \n FROM ${USAGE_TABLE} \n WHERE \n user_id = ? \n AND timestamp > ?\n AND our_api_token = 1\n `,\n [userId, new Date().getTime() - 24 * 60 * 60 * 1000],\n );\n return usage.rows[0][0] || 0;\n}\n\n// These are reasonable placeholders.\n// If this takes off, we should give less free stuff (or maybe a limited free trial of $5 ever)\n// and then let folks buy credits via Stripe.\nconst DAILY_FREE_LIMIT = 0.5; // 50 cents per day\nconst DAILY_PRO_LIMIT = 5; // $5 per day\n\nconst LIMITS: { [key: string]: number } = {\n \"devto\": 100, // hardcoded limit of $100 per day for dev.to, billed later\n};\nexport async function overLimit(bearerToken: string) {\n const user = await getUser(bearerToken);\n const last24HourUsage = await last24Hours(user.id);\n\n const limit = LIMITS[user.username] ?? (user.tier === \"pro\" ? DAILY_PRO_LIMIT : DAILY_FREE_LIMIT);\n\n return last24HourUsage >= limit;\n}\n\nexport async function insertInferenceCall({\n usage_id,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n step_type,\n finish_reason,\n}: {\n usage_id: number;\n input_tokens: number;\n output_tokens: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n step_type: string;\n finish_reason: string;\n}) {\n const price = calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n });\n try {\n await sqlite.execute(\n `INSERT INTO ${INFERENCE_CALLS_TABLE} (\n usage_id,\n timestamp,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n price,\n step_type,\n finish_reason\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n usage_id,\n Date.now(),\n input_tokens,\n output_tokens,\n cache_read_tokens || 0,\n cache_write_tokens || 0,\n price,\n step_type,\n finish_reason,\n ],\n );\n } catch (e) {\n console.error(e);\n }\n}\n\nexport async function startTrackingUsage({\n bearerToken,\n val_id,\n branch_id,\n model,\n our_api_token,\n num_images,\n}: {\n bearerToken: string;\n val_id: string;\n branch_id: string;\n model: string;\n our_api_token: boolean;\n num_images: number;\n}) {\n const user = await getUser(bearerToken);\n const { lastInsertRowid } = await sqlite.execute(\n `INSERT INTO ${USAGE_TABLE} (\n user_id,\n username,\n timestamp,\n val_id,\n branch_id,\n model,\n our_api_token,\n num_images\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n user.id,\n user.username,\n Date.now(),\n val_id,\n branch_id,\n model,\n our_api_token ? 1 : 0,\n num_images,\n ],\n );\n return lastInsertRowid;\n}\n\nexport async function finishTrackingUsage({\n rowid,\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n finish_reason,\n}: {\n rowid: number;\n input_tokens?: number;\n output_tokens?: number;\n cache_read_tokens?: number;\n cache_write_tokens?: number;\n finish_reason: string;\n}) {\n const price = calculateCost({\n input_tokens,\n output_tokens,\n cache_read_tokens,\n cache_write_tokens,\n });\n try {\n await sqlite.execute(\n `UPDATE ${USAGE_TABLE} SET\n input_tokens = ?,\n output_tokens = ?,\n cache_read_tokens = ?,\n cache_write_tokens = ?,\n price = ?,\n finish_reason = ?\n WHERE rowid = ?\n `,\n [\n input_tokens || 0,\n output_tokens || 0,\n cache_read_tokens || 0,\n cache_write_tokens || 0,\n price,\n finish_reason,\n rowid,\n ],\n );\n } catch (e) {\n console.error(e);\n }\n}",[],[191,186,887,889],"c5ce46c2-3432-11f0-93a3-9e149126039e","c5ce4758-3432-11f0-93a3-9e149126039e","c57d303e-3432-11f0-a1b3-9e149126039e",31,["D",1747605311995],"import { basicAuthMiddleware } from \"./auth.ts\";\nimport { handleApiRequest } from \"./api/index.ts\";\nimport { getRequests } from \"./api/requests.ts\";\nimport { getUserSummary } from \"./api/user-summary.ts\";\nimport { getInferenceCalls } from \"./api/inference-calls.ts\";\nimport { renderDashboard } from \"./views/dashboard.ts\";\nimport { renderRequests } from \"./views/requests.ts\";\nimport { renderInferenceCalls } from \"./views/inference-calls.ts\";\n\n/**\n * Main entry point for the usage dashboard\n */\nexport default async function(req: Request) {\n // Check authentication first\n const authResponse = await basicAuthMiddleware(req);\n if (authResponse) {\n return authResponse;\n }\n\n // Parse the URL\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Handle API requests\n if (path.startsWith(\"/api/\")) {\n return handleApiRequest(req);\n }\n\n // Handle page requests\n try {\n if (path === \"/\" || path === \"\") {\n // User summary page\n const userData = await getUserSummary();\n return new Response(renderDashboard(userData), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else if (path === \"/requests\") {\n // Requests page\n const usageId = url.searchParams.get(\"usage_id\");\n const requestsData = await getRequests(url);\n return new Response(renderRequests(\n requestsData.data, \n requestsData.pagination, \n url.toString()\n ), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else if (path === \"/inference\") {\n // Inference calls page\n const inferenceData = await getInferenceCalls(url);\n return new Response(renderInferenceCalls(\n inferenceData.data, \n inferenceData.pagination, \n url.toString(),\n inferenceData.filtered\n ), {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n else {\n // 404 page\n return new Response(\"Page not found\", {\n status: 404,\n headers: { \"Content-Type\": \"text/plain\" }\n });\n }\n } catch (error) {\n console.error(\"Error rendering page:\", error);\n return new Response(`Error: ${error.message}`, {\n status: 500,\n headers: { \"Content-Type\": \"text/plain\" }\n });\n }\n}",[],[191,186,887,904,421],"usage-dashboard","c5c9b918-3432-11f0-8608-9e149126039e","auth.ts","c5c9b9d6-3432-11f0-8608-9e149126039e",30,["D",1747605311976],"import * as bcrypt from \"https://deno.land/x/bcrypt@v0.3.0/mod.ts\";\n\n/**\n * Basic Auth middleware for the usage dashboard\n * Returns null if authentication is successful, or a Response if it fails\n */\nexport async function basicAuthMiddleware(req: Request): Promise {\n const realm = \"Usage Dashboard\";\n const unauthorizedResponse = new Response(\"Unauthorized\", {\n status: 401,\n headers: {\n \"WWW-Authenticate\": `Basic realm=\"${realm}\"`,\n \"Content-Type\": \"text/plain\",\n },\n });\n\n // Get the Authorization header\n const authHeader = req.headers.get(\"Authorization\");\n if (!authHeader || !authHeader.startsWith(\"Basic \")) {\n return unauthorizedResponse;\n }\n\n try {\n // Extract the base64 encoded credentials\n const base64Credentials = authHeader.split(\" \")[1];\n const credentials = atob(base64Credentials);\n\n // Split into username and password\n const [username, password] = credentials.split(\":\");\n\n if (!password) {\n return unauthorizedResponse;\n }\n\n // Ask Steve for this password\n const hashedPassword = \"$2a$12$aA2HYmj21jK1TKSFLFOutOlXsCrKFnMvyeblySLwcgSqxt05nEeei\";\n\n // Compare the provided password with the stored hash\n const passwordMatches = await bcrypt.compare(password, hashedPassword);\n\n if (!passwordMatches) {\n return unauthorizedResponse;\n }\n\n // Authentication successful\n return null;\n } catch (error) {\n console.error(\"Authentication error:\", error);\n return unauthorizedResponse;\n }\n}",[],[191,186,887,904,906],"c5ba8196-3432-11f0-8db4-9e149126039e","c5ba824a-3432-11f0-8db4-9e149126039e",23,["D",1747605311879],"# Usage Dashboard\n\nA dashboard for monitoring API usage and inference calls.\n\n## Features\n\n- User summary view with aggregated usage data\n- All requests view with collapsible rows showing inference calls\n- Inference calls view with filtering options\n- Pagination for handling large datasets\n- Comparison between usage data and inference calls for debugging\n- Fallback to inference data when usage data is missing\n\n## Architecture\n\nThe dashboard is built with a modular architecture:\n\n```\n/usage-dashboard/\n index.ts # Main entry point and routing\n auth.ts # Authentication logic\n /api/\n index.ts # API request handler\n requests.ts # API endpoints for requests data\n inference-calls.ts # API endpoints for inference calls\n user-summary.ts # API endpoints for user summary data\n /views/\n layout.ts # Common layout template\n dashboard.ts # User summary view\n requests.ts # Requests view with collapsible rows\n inference-calls.ts # Inference calls view\n /utils/\n formatters.ts # Shared formatting utilities\n pagination.ts # Pagination utilities\n```\n\n## Usage\n\nAccess the dashboard at the root URL. Authentication is required.\n\n### Views\n\n1. **User Summary** - Shows aggregated usage data by user\n - When usage data is missing, it falls back to inference call data\n - Indicated with an \"I\" badge\n\n2. **All Requests** - Shows all usage requests with pagination\n - Click on a row to see associated inference calls\n - Compares usage data with inference call totals\n - Highlights discrepancies for debugging\n\n3. **Inference Calls** - Shows all inference calls with pagination\n - Can be filtered by usage_id\n - Links back to the associated request\n\n### API Endpoints\n\n- `/api/requests` - Get paginated requests\n- `/api/requests?usage_id=123` - Get a specific request\n- `/api/inference-calls` - Get paginated inference calls\n- `/api/inference-calls?usage_id=123` - Get inference calls for a specific request\n- `/api/user-summary` - Get user summary data\n\n## Debugging\n\nThe dashboard includes several features for debugging:\n\n1. **Collapsible Rows** - Click on a request to see its inference calls\n2. **Token Comparison** - Compare tokens and price between usage and inference data\n3. **Discrepancy Highlighting** - Visual indicators when data doesn't match\n4. **Inference Data Fallback** - Use inference data when usage data is missing",[],[191,186,887,904,163],"c5c0727c-3432-11f0-aee7-9e149126039e","requests.ts","c5c072fe-3432-11f0-aee7-9e149126039e","c5876928-3432-11f0-b278-9e149126039e",26,["D",1747605311919],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate, formatBoolean } from \"../utils/formatters.ts\";\nimport { renderPaginationControls } from \"../utils/pagination.ts\";\n\ninterface RequestRow {\n id: number;\n username: string;\n timestamp: number;\n val_id: string;\n branch_id: string | null;\n input_tokens: number | null;\n output_tokens: number | null;\n cache_read_tokens: number | null;\n cache_write_tokens: number | null;\n model: string;\n price: number | null;\n finish_reason: string | null;\n num_images: number | null;\n our_api_token: number;\n}\n\ninterface PaginationData {\n currentPage: number;\n totalPages: number;\n pageSize: number;\n totalItems: number;\n hasNextPage: boolean;\n hasPrevPage: boolean;\n}\n\nexport function renderRequests(data: RequestRow[], pagination: PaginationData, baseUrl: string): string {\n // Calculate totals\n const totalRequests = pagination.totalItems;\n const totalPrice = data.reduce((sum, row) => sum + (row.price || 0), 0);\n \n // Generate pagination controls\n const paginationControls = renderPaginationControls(pagination, baseUrl);\n \n // Client-side script for collapsible rows\n const script = `\n // Function to toggle inference details\n function toggleInferenceDetails(usageId) {\n const detailsElement = document.getElementById('inference-' + usageId);\n \n if (detailsElement) {\n // Toggle visibility of existing details\n detailsElement.classList.toggle('visible');\n } else {\n // Create a placeholder while loading\n const row = document.querySelector('tr[data-id=\"' + usageId + '\"]');\n const colSpan = row.querySelectorAll('td').length;\n const newRow = document.createElement('tr');\n newRow.id = 'inference-' + usageId;\n newRow.classList.add('inference-details', 'visible');\n newRow.innerHTML = 'Loading inference calls...';\n row.parentNode.insertBefore(newRow, row.nextSibling);\n \n // Fetch the inference calls data\n fetch('/api/inference-calls?usage_id=' + usageId)\n .then(response => response.json())\n .then(data => {\n // Calculate totals from inference calls\n const totalInputTokens = data.data.reduce((sum, call) => sum + (call.input_tokens || 0), 0);\n const totalOutputTokens = data.data.reduce((sum, call) => sum + (call.output_tokens || 0), 0);\n const totalCacheReadTokens = data.data.reduce((sum, call) => sum + (call.cache_read_tokens || 0), 0);\n const totalCacheWriteTokens = data.data.reduce((sum, call) => sum + (call.cache_write_tokens || 0), 0);\n const totalPrice = data.data.reduce((sum, call) => sum + (call.price || 0), 0);\n \n // Get the usage row data\n const usageRow = document.querySelector('tr[data-id=\"' + usageId + '\"]');\n const usageInputTokens = parseInt(usageRow.getAttribute('data-input-tokens') || '0');\n const usageOutputTokens = parseInt(usageRow.getAttribute('data-output-tokens') || '0');\n const usageCacheReadTokens = parseInt(usageRow.getAttribute('data-cache-read-tokens') || '0');\n const usageCacheWriteTokens = parseInt(usageRow.getAttribute('data-cache-write-tokens') || '0');\n const usagePrice = parseFloat(usageRow.getAttribute('data-price') || '0');\n \n // Check for discrepancies\n const inputDiscrepancy = totalInputTokens !== usageInputTokens && usageInputTokens !== 0;\n const outputDiscrepancy = totalOutputTokens !== usageOutputTokens && usageOutputTokens !== 0;\n const cacheReadDiscrepancy = totalCacheReadTokens !== usageCacheReadTokens && usageCacheReadTokens !== 0;\n const cacheWriteDiscrepancy = totalCacheWriteTokens !== usageCacheWriteTokens && usageCacheWriteTokens !== 0;\n const priceDiscrepancy = Math.abs(totalPrice - usagePrice) > 0.0001 && usagePrice !== 0;\n \n // Format numbers for display\n const formatNumber = num => num.toLocaleString();\n const formatPrice = price => '$' + price.toFixed(4);\n \n // Build the HTML for the inference calls\n let html = '';\n \n // Add comparison summary\n html += '

';\n html += '

Usage Record

';\n html += '

Input Tokens: ' + formatNumber(usageInputTokens) + '

';\n html += '

Output Tokens: ' + formatNumber(usageOutputTokens) + '

';\n html += '

Cache Read: ' + formatNumber(usageCacheReadTokens) + '

';\n html += '

Cache Write: ' + formatNumber(usageCacheWriteTokens) + '

';\n html += '

Price: ' + formatPrice(usagePrice) + '

';\n html += '

';\n \n html += '

';\n html += '

Inference Calls (' + data.data.length + ')

';\n html += '

Input Tokens: ' + formatNumber(totalInputTokens) + (inputDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Output Tokens: ' + formatNumber(totalOutputTokens) + (outputDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Cache Read: ' + formatNumber(totalCacheReadTokens) + (cacheReadDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Cache Write: ' + formatNumber(totalCacheWriteTokens) + (cacheWriteDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

Price: ' + formatPrice(totalPrice) + (priceDiscrepancy ? ' Mismatch!' : '') + '

';\n html += '

';\n \n // Add inference calls table\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n \n data.data.forEach(call => {\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n html += '';\n });\n \n html += '

ID	Timestamp	Step Type	Input	Output	Cache Read	Cache Write	Price	Finish
' + call.id + '	' + new Date(call.timestamp).toLocaleString(\"en-US\", { timeZone: \"America/New_York\" }) + '	' + (call.step_type \|\| '-') + '	' + (call.input_tokens ? formatNumber(call.input_tokens) : '-') + '	' + (call.output_tokens ? formatNumber(call.output_tokens) : '-') + '	' + (call.cache_read_tokens ? formatNumber(call.cache_read_tokens) : '-') + '	' + (call.cache_write_tokens ? formatNumber(call.cache_write_tokens) : '-') + '	' + (call.price ? formatPrice(call.price) : '-') + '	' + (call.finish_reason \|\| '-') + '

';\n html += '';\n \n // Update the details row\n document.getElementById('inference-' + usageId).innerHTML = html;\n })\n .catch(error => {\n document.getElementById('inference-' + usageId).innerHTML = \n 'Error loading inference calls: ' + error.message + '';\n });\n }\n }\n \n // Add click event listeners to all collapsible rows\n document.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('.collapsible').forEach(row => {\n row.addEventListener('click', function() {\n const usageId = this.getAttribute('data-id');\n toggleInferenceDetails(usageId);\n });\n });\n });\n `;\n \n // Generate the content\n const content = `\n

All Usage Requests

Total Requests: ${totalRequests}

Total Price: ${formatPrice(totalPrice)}

Click on a row to see associated inference calls

\n \n ${paginationControls}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	User	Timestamp	Val ID	Branch ID	Input	Output	Cache Read	Cache Write	Model	Price	Finish	Images	Our API
${row.id}	${row.username}	${formatDate(row.timestamp)}	${row.val_id}	${row.branch_id ?? \"main\"}	${formatNumber(row.input_tokens)}	${formatNumber(row.output_tokens)}	${formatNumber(row.cache_read_tokens)}	${formatNumber(row.cache_write_tokens)}	${row.model}	${formatPrice(row.price)}	${row.finish_reason \|\| '-'}	${formatNumber(row.num_images)}	${formatBoolean(row.our_api_token)}

\n \n ${paginationControls}\n

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - All Requests\",\n activeTab: \"requests\",\n scripts: [script]\n });\n}",[],[191,186,887,904,929,921],"views","c5c2b712-3432-11f0-8289-9e149126039e","layout.ts","c5c2b7c6-3432-11f0-8289-9e149126039e",27,["D",1747605311934],"/**\n * Common layout for all dashboard pages\n */\n\nexport interface LayoutOptions {\n title: string;\n activeTab?: string;\n scripts?: string[];\n styles?: string[];\n}\n\nexport function renderLayout(content: string, options: LayoutOptions): string {\n const { title, activeTab = \"dashboard\", scripts = [], styles = [] } = options;\n \n // Default styles\n const defaultStyles = `\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n h1, h2 {\n color: #2c3e50;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 30px;\n font-size: 14px;\n }\n th, td {\n padding: 8px 12px;\n text-align: left;\n border-bottom: 1px solid #ddd;\n }\n th {\n background-color: #f8f9fa;\n font-weight: 600;\n position: sticky;\n top: 0;\n }\n tr:hover {\n background-color: #f5f5f5;\n }\n .container {\n margin-bottom: 40px;\n }\n .price {\n font-weight: bold;\n }\n .summary {\n background-color: #f8f9fa;\n padding: 15px;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n .tabs {\n display: flex;\n margin-bottom: 20px;\n }\n .tab {\n padding: 10px 20px;\n cursor: pointer;\n border: 1px solid #ddd;\n background-color: #f8f9fa;\n margin-right: 5px;\n border-radius: 5px 5px 0 0;\n text-decoration: none;\n color: #333;\n }\n .tab.active {\n background-color: #fff;\n border-bottom: 1px solid #fff;\n font-weight: bold;\n }\n .pagination {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n }\n .page-link {\n padding: 8px 12px;\n margin: 0 5px;\n border: 1px solid #ddd;\n text-decoration: none;\n color: #333;\n border-radius: 3px;\n }\n .page-link.current {\n background-color: #f0f0f0;\n font-weight: bold;\n }\n .page-link.disabled {\n color: #aaa;\n cursor: not-allowed;\n }\n .collapsible {\n cursor: pointer;\n }\n .inference-details {\n display: none;\n background-color: #f9f9f9;\n padding: 10px;\n margin: 10px 0;\n border-radius: 5px;\n }\n .inference-details.visible {\n display: block;\n }\n .comparison {\n display: flex;\n gap: 20px;\n }\n .comparison-item {\n flex: 1;\n }\n .discrepancy {\n color: #e74c3c;\n font-weight: bold;\n }\n .badge {\n display: inline-block;\n padding: 2px 6px;\n border-radius: 10px;\n font-size: 12px;\n font-weight: bold;\n margin-left: 5px;\n }\n .badge-info {\n background-color: #3498db;\n color: white;\n }\n .badge-warning {\n background-color: #f39c12;\n color: white;\n }\n .loading {\n text-align: center;\n padding: 20px;\n }\n `;\n \n // Combine all styles\n const allStyles = [defaultStyles, ...styles].join(\"\\n\");\n \n // Default scripts\n const defaultScripts = `\n document.addEventListener('DOMContentLoaded', function() {\n // Tab navigation\n document.querySelectorAll('.tab').forEach(tab => {\n tab.addEventListener('click', function(e) {\n if (this.getAttribute('href') === '#') {\n e.preventDefault();\n const tabId = this.getAttribute('data-tab');\n \n // Hide all tab contents\n document.querySelectorAll('.tab-content').forEach(content => {\n content.classList.remove('active');\n });\n \n // Deactivate all tabs\n document.querySelectorAll('.tab').forEach(tab => {\n tab.classList.remove('active');\n });\n \n // Activate the selected tab and content\n document.getElementById(tabId).classList.add('active');\n this.classList.add('active');\n }\n });\n });\n });\n `;\n \n // Combine all scripts\n const allScripts = [defaultScripts, ...scripts].join(\"\\n\");\n \n return `\n \n \n \n \n \n ${title}\n \n \n \n

Usage Dashboard

\n \n

\n Grouped by User\n All Requests\n Inference Calls\n

\n \n ${content}\n \n \n \n \n `;\n}",[],[191,186,887,904,929,931],"c5c61b78-3432-11f0-a617-9e149126039e","inference-calls.ts","c5c61c36-3432-11f0-a617-9e149126039e",28,["D",1747605311955],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice, formatDate } from \"../utils/formatters.ts\";\nimport { renderPaginationControls } from \"../utils/pagination.ts\";\n\ninterface InferenceCallRow {\n id: number;\n usage_id: number;\n username: string;\n user_id: string;\n val_id: string;\n branch_id: string | null;\n timestamp: number;\n input_tokens: number | null;\n output_tokens: number | null;\n cache_read_tokens: number | null;\n cache_write_tokens: number | null;\n step_type: string | null;\n price: number | null;\n finish_reason: string | null;\n}\n\ninterface PaginationData {\n currentPage: number;\n totalPages: number;\n pageSize: number;\n totalItems: number;\n hasNextPage: boolean;\n hasPrevPage: boolean;\n}\n\nexport function renderInferenceCalls(\n data: InferenceCallRow[], \n pagination: PaginationData, \n baseUrl: string,\n filtered: boolean = false\n): string {\n // Calculate totals\n const totalCalls = pagination.totalItems;\n const totalPrice = data.reduce((sum, row) => sum + (row.price || 0), 0);\n \n // Generate pagination controls\n const paginationControls = renderPaginationControls(pagination, baseUrl);\n \n // Generate the content\n const content = `\n

Inference Calls ${filtered ? '(Filtered)' : ''}

Total Inference Calls: ${totalCalls}

Total Price: ${formatPrice(totalPrice)}

\n ${filtered ? '

Clear filter

' : ''}\n

\n \n ${paginationControls}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

ID	Usage ID	User	User ID	Val ID	Branch ID	Timestamp	Input	Output	Cache Read	Cache Write	Step Type	Price	Finish
${row.id}	${row.usage_id}	${row.username}	${row.user_id}	${row.val_id}	${row.branch_id ?? \"main\"}	${formatDate(row.timestamp)}	${formatNumber(row.input_tokens)}	${formatNumber(row.output_tokens)}	${formatNumber(row.cache_read_tokens)}	${formatNumber(row.cache_write_tokens)}	${row.step_type \|\| '-'}	${formatPrice(row.price)}	${row.finish_reason \|\| '-'}

\n \n ${paginationControls}\n

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - Inference Calls\",\n activeTab: \"inference\"\n });\n}",[],[191,186,887,904,929,939],"c5c7f998-3432-11f0-88fa-9e149126039e","dashboard.ts","c5c7fa4c-3432-11f0-88fa-9e149126039e",29,["D",1747605311957],"import { renderLayout } from \"./layout.ts\";\nimport { formatNumber, formatPrice } from \"../utils/formatters.ts\";\n\ninterface UserSummaryRow {\n user_id: string;\n username: string;\n request_count: number;\n total_input_tokens: number;\n total_output_tokens: number;\n total_cache_read_tokens: number;\n total_cache_write_tokens: number;\n total_price: number;\n total_images: number;\n used_inference_data?: boolean;\n}\n\nexport function renderDashboard(data: UserSummaryRow[]): string {\n // Calculate totals\n const totalUsers = data.length;\n const totalPrice = data.reduce((sum, row) => sum + (row.total_price || 0), 0);\n \n // Generate the content\n const content = `\n

Usage by User

Total Users: ${totalUsers}

Total Price: ${formatPrice(totalPrice)}

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ${data.map(row => `\n \n \n \n \n \n \n \n \n \n \n \n `).join(\"\")}\n \n

User ID	Username	Requests	Input Tokens	Output Tokens	Cache Read	Cache Write	Total Price	Images
${row.user_id}	${row.username}	${formatNumber(row.request_count)}	${formatNumber(row.total_input_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_output_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_cache_read_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_cache_write_tokens)} ${row.used_inference_data ? 'I' : ''}	${formatPrice(row.total_price)} ${row.used_inference_data ? 'I' : ''}	${formatNumber(row.total_images)}

\n `;\n \n return renderLayout(content, {\n title: \"Usage Dashboard - User Summary\",\n activeTab: \"grouped\"\n });\n}",[],[191,186,887,904,929,947],"c58767ca-3432-11f0-b278-9e149126039e",14,["D",1747605311542],[218,219,220,221],[191,186,887,904,929],"c5d14430-3432-11f0-8289-9e149126039e","pagination.ts","c5d144e4-3432-11f0-8289-9e149126039e","c591e588-3432-11f0-b278-9e149126039e",32,["D",1747605312018],"/**\n * Pagination utilities for the dashboard\n */\n\nexport interface PaginationParams {\n page: number;\n pageSize: number;\n totalItems: number;\n}\n\nexport interface PaginationResult {\n currentPage: number;\n totalPages: number;\n pageSize: number;\n totalItems: number;\n hasNextPage: boolean;\n hasPrevPage: boolean;\n}\n\n/**\n * Parse pagination parameters from URL\n */\nexport function getPaginationParams(url: URL): { page: number; pageSize: number } {\n const page = parseInt(url.searchParams.get(\"page\") || \"1\", 10);\n const pageSize = parseInt(url.searchParams.get(\"pageSize\") || \"50\", 10);\n \n // Validate and set limits\n return {\n page: Math.max(1, page),\n pageSize: Math.min(Math.max(10, pageSize), 100) // Between 10 and 100\n };\n}\n\n/**\n * Calculate pagination metadata\n */\nexport function calculatePagination(params: PaginationParams): PaginationResult {\n const totalPages = Math.ceil(params.totalItems / params.pageSize);\n \n return {\n currentPage: params.page,\n totalPages,\n pageSize: params.pageSize,\n totalItems: params.totalItems,\n hasNextPage: params.page < totalPages,\n hasPrevPage: params.page > 1\n };\n}\n\n/**\n * Generate SQL LIMIT and OFFSET clauses for pagination\n */\nexport function getPaginationSQL(page: number, pageSize: number): string {\n const offset = (page - 1) * pageSize;\n return `LIMIT ${pageSize} OFFSET ${offset}`;\n}\n\n/**\n * Generate HTML for pagination controls\n */\nexport function renderPaginationControls(pagination: PaginationResult, baseUrl: string): string {\n const url = new URL(baseUrl);\n \n // Function to generate page URL\n const getPageUrl = (page: number) => {\n url.searchParams.set(\"page\", page.toString());\n return url.toString();\n };\n \n let html = '

';\n \n // Previous button\n if (pagination.hasPrevPage) {\n html += `Previous`;\n } else {\n html += 'Previous';\n }\n \n // Page numbers\n const maxPages = 5;\n const startPage = Math.max(1, pagination.currentPage - Math.floor(maxPages / 2));\n const endPage = Math.min(pagination.totalPages, startPage + maxPages - 1);\n \n for (let i = startPage; i <= endPage; i++) {\n if (i === pagination.currentPage) {\n html += `${i}`;\n } else {\n html += `${i}`;\n }\n }\n \n // Next button\n if (pagination.hasNextPage) {\n html += `Next`;\n } else {\n html += 'Next';\n }\n \n html += '

';\n return html;\n}",[],[191,186,887,904,452,960],"c5d3d48e-3432-11f0-a694-9e149126039e","formatters.ts","c5d3d542-3432-11f0-a694-9e149126039e",33,["D",1747605312043],"// Utility functions for formatting data in the dashboard\n\n/**\n * Format timestamp for display in Eastern Time (New York)\n */\nexport const formatDate = (timestamp: number): string => {\n return new Date(timestamp).toLocaleString(\"en-US\", {\n timeZone: \"America/New_York\",\n });\n};\n\n/**\n * Format boolean for display\n */\nexport const formatBoolean = (value: number): string => {\n return value ? \"Yes\" : \"No\";\n};\n\n/**\n * Format number with commas\n */\nexport const formatNumber = (num: number | null): string => {\n if (num === null || num === undefined) return \"-\";\n return num.toLocaleString();\n};\n\n/**\n * Format price as currency\n */\nexport const formatPrice = (price: number | null): string => {\n if (price === null || price === undefined) return \"-\";\n return `$${price.toFixed(4)}`;\n};",[],[191,186,887,904,452,969],"c591e506-3432-11f0-b278-9e149126039e",15,["D",1747605311611],[215,216],[191,186,887,904,452],"c5dc465a-3432-11f0-88fa-9e149126039e","c5dc4704-3432-11f0-88fa-9e149126039e","c59ba7da-3432-11f0-aee7-9e149126039e",36,["D",1747605312100],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { USAGE_TABLE, INFERENCE_CALLS_TABLE } from \"../../schema.tsx\";\nimport { getPaginationParams, getPaginationSQL, calculatePagination } from \"../utils/pagination.ts\";\n\n/**\n * Get paginated usage requests\n */\nexport async function getRequests(url: URL) {\n const { page, pageSize } = getPaginationParams(url);\n \n // Get total count for pagination\n const countResult = await sqlite.execute(`\n SELECT COUNT(*) as total FROM ${USAGE_TABLE}\n `);\n const totalItems = countResult.rows[0].total;\n \n // Get paginated data\n const paginationSQL = getPaginationSQL(page, pageSize);\n const allUsageData = await sqlite.execute(`\n SELECT * FROM ${USAGE_TABLE} \n ORDER BY timestamp DESC\n ${paginationSQL}\n `);\n \n // Calculate pagination metadata\n const pagination = calculatePagination({ page, pageSize, totalItems });\n \n return {\n data: allUsageData.rows,\n pagination\n };\n}\n\n/**\n * Get a single request by ID\n */\nexport async function getRequestById(id: string) {\n const result = await sqlite.execute(`\n SELECT * FROM ${USAGE_TABLE} \n WHERE id = ?\n `, [id]);\n \n if (result.rows.length === 0) {\n return null;\n }\n \n return result.rows[0];\n}\n\n/**\n * Get inference calls for a specific usage request\n */\nexport async function getInferenceCallsForRequest(usageId: string) {\n const result = await sqlite.execute(`\n SELECT \n i.id,\n i.usage_id,\n i.timestamp,\n i.input_tokens,\n i.output_tokens,\n i.cache_read_tokens,\n i.cache_write_tokens,\n i.price,\n i.step_type,\n i.finish_reason\n FROM ${INFERENCE_CALLS_TABLE} i\n WHERE i.usage_id = ?\n ORDER BY i.timestamp ASC\n `, [usageId]);\n \n return result.rows;\n}\n\n/**\n * Calculate totals from inference calls for a request\n */\nexport async function getInferenceTotalsForRequest(usageId: string) {\n const calls = await getInferenceCallsForRequest(usageId);\n \n if (calls.length === 0) {\n return null;\n }\n \n return {\n input_tokens: calls.reduce((sum, call) => sum + (call.input_tokens || 0), 0),\n output_tokens: calls.reduce((sum, call) => sum + (call.output_tokens || 0), 0),\n cache_read_tokens: calls.reduce((sum, call) => sum + (call.cache_read_tokens || 0), 0),\n cache_write_tokens: calls.reduce((sum, call) => sum + (call.cache_write_tokens || 0), 0),\n price: calls.reduce((sum, call) => sum + (call.price || 0), 0),\n count: calls.length\n };\n}",[],[191,186,887,904,443,921],"c5d552d2-3432-11f0-af8a-9e149126039e","c5d55386-3432-11f0-af8a-9e149126039e",34,["D",1747605312045],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { USAGE_TABLE, INFERENCE_CALLS_TABLE } from \"../../schema.tsx\";\nimport { getPaginationParams, getPaginationSQL, calculatePagination } from \"../utils/pagination.ts\";\n\n/**\n * Get paginated inference calls\n */\nexport async function getInferenceCalls(url: URL) {\n const { page, pageSize } = getPaginationParams(url);\n const usageId = url.searchParams.get(\"usage_id\");\n \n // Build the WHERE clause if we have a usage_id filter\n const whereClause = usageId ? `WHERE i.usage_id = ${usageId}` : \"\";\n \n // Get total count for pagination\n const countResult = await sqlite.execute(`\n SELECT COUNT(*) as total \n FROM ${INFERENCE_CALLS_TABLE} i\n ${whereClause}\n `);\n const totalItems = countResult.rows[0].total;\n \n // Get paginated data\n const paginationSQL = getPaginationSQL(page, pageSize);\n const inferenceCallsData = await sqlite.execute(`\n SELECT \n i.id,\n i.usage_id,\n u.username,\n u.user_id,\n u.val_id,\n u.branch_id,\n i.timestamp,\n i.input_tokens,\n i.output_tokens,\n i.cache_read_tokens,\n i.cache_write_tokens,\n i.price,\n i.step_type,\n i.finish_reason\n FROM ${INFERENCE_CALLS_TABLE} i\n JOIN ${USAGE_TABLE} u ON i.usage_id = u.id\n ${whereClause}\n ORDER BY i.timestamp DESC\n ${paginationSQL}\n `);\n \n // Calculate pagination metadata\n const pagination = calculatePagination({ page, pageSize, totalItems });\n \n return {\n data: inferenceCallsData.rows,\n pagination,\n filtered: !!usageId\n };\n}",[],[191,186,887,904,443,939],"c5d82426-3432-11f0-88fa-9e149126039e","c5d824b2-3432-11f0-88fa-9e149126039e",35,["D",1747605312074],"import { getRequests, getRequestById, getInferenceCallsForRequest } from \"./requests.ts\";\nimport { getUserSummary } from \"./user-summary.ts\";\nimport { getInferenceCalls } from \"./inference-calls.ts\";\n\n/**\n * Handle API requests\n */\nexport async function handleApiRequest(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname.replace(\"/api/\", \"\");\n \n try {\n // Route to the appropriate API handler\n if (path === \"requests\") {\n const usageId = url.searchParams.get(\"usage_id\");\n if (usageId) {\n const request = await getRequestById(usageId);\n if (!request) {\n return new Response(JSON.stringify({ error: \"Request not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n return new Response(JSON.stringify(request), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else {\n const data = await getRequests(url);\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n } \n else if (path === \"inference-calls\") {\n const usageId = url.searchParams.get(\"usage_id\");\n if (usageId) {\n const calls = await getInferenceCallsForRequest(usageId);\n return new Response(JSON.stringify({ data: calls }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } else {\n const data = await getInferenceCalls(url);\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n else if (path === \"user-summary\") {\n const data = await getUserSummary();\n return new Response(JSON.stringify({ data }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n else {\n return new Response(JSON.stringify({ error: \"Not found\" }), {\n status: 404,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n } catch (error) {\n console.error(\"API error:\", error);\n return new Response(JSON.stringify({ error: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n}",[],[191,186,887,904,443,421],"c59ba73a-3432-11f0-aee7-9e149126039e",16,["D",1747605311678],[211,212,213],[191,186,887,904,443],"c57d2f94-3432-11f0-a1b3-9e149126039e",13,["D",1747605311478],[210,214,217,222,223,224],[191,186,887,904],"c53d0950-3432-11f0-a617-9e149126039e",6,["D",1747605311058],[209,225,226],[191,186,887],"c5234678-3432-11f0-aee7-9e149126039e",3,["D",1747605310889],[208,227,236,243,246],[191,186],["D",1747605310834],[207,247,269,270,271,272,273,274],[191],["D",1747420256725],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":53,"_101":102,"_103":24},{"_13":84,"_31":85,"_42":41,"_86":43,"_87":88,"_89":90,"_91":49,"_92":43,"_93":63,"_94":44,"_95":96},"ctx",{"_77":-5,"_126":1063,"_1064":1065,"_1066":1067,"_1068":24,"_1069":24,"_1070":24,"_1071":57,"_1072":-5,"_1073":-7,"_1074":-7,"_1075":158,"_1076":24,"_1077":24,"_1078":-5,"_1079":24,"_1080":24,"_1081":24,"_1082":-5},"ENV",{"_1034":1035,"_1036":1037,"_1038":132,"_1039":1040,"_1041":1042,"_1043":1044,"_1045":1046,"_1047":1048,"_1049":1050,"_1051":1052,"_1053":1054,"_1055":1056,"_1057":1058,"_1059":1060,"_1061":1062},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v70