[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_623":624,"_625":626},"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",24,"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/index.ts","latestPath","fileId","c5bd0c4a-3432-11f0-aee7-9e149126039e","name","index.ts","fileType","script","content","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","createdAt",["D",1747605311743],"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":619,"_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":620,"_79":621,"_81":622,"_83":24},"tree",[206,229,244,257,260,261,262],"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],"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=1789588799&sig=cc8cae5a3b06d460bba0e0803182f7ba2bd6e8f6e4c645b92fb51aa03192ad01",{"_97":143,"_104":144},"templates","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789588799&sig=6ce4a653b65ad390b6349a1b0a383cb839cc380a1beaf91551581c108538875d",{"_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":616,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":617,"_26":618},{"_42":611,"_31":186,"_29":538,"_155":192,"_40":41,"_39":612,"_156":57,"_37":613,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":614,"_26":615},{"_42":606,"_31":572,"_29":566,"_155":538,"_40":41,"_39":607,"_156":57,"_37":608,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":609,"_26":610},{"_42":601,"_31":581,"_29":575,"_155":566,"_40":41,"_39":602,"_156":57,"_37":603,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":604,"_26":605},{"_42":595,"_31":396,"_29":596,"_155":575,"_40":41,"_39":597,"_156":57,"_37":598,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":599,"_26":600},{"_42":589,"_31":405,"_29":590,"_155":575,"_40":41,"_39":591,"_156":57,"_37":592,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":593,"_26":594},{"_42":582,"_31":583,"_29":584,"_155":575,"_40":41,"_39":585,"_156":57,"_37":586,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":587,"_26":588},{"_42":573,"_31":163,"_29":574,"_155":575,"_40":41,"_39":576,"_156":57,"_37":577,"_13":158,"_33":20,"_35":578,"_23":24,"_160":-5,"_264":579,"_26":580},{"_42":563,"_31":564,"_29":565,"_155":566,"_40":41,"_39":567,"_156":57,"_37":568,"_13":158,"_33":34,"_35":569,"_23":24,"_160":-5,"_264":570,"_26":571},{"_42":557,"_31":418,"_29":558,"_155":538,"_40":41,"_39":559,"_156":57,"_37":560,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":561,"_26":562},{"_42":550,"_31":551,"_29":552,"_155":538,"_40":41,"_39":553,"_156":57,"_37":554,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":555,"_26":556},{"_42":544,"_31":405,"_29":545,"_155":538,"_40":41,"_39":546,"_156":57,"_37":547,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":548,"_26":549},{"_42":536,"_31":32,"_29":537,"_155":538,"_40":41,"_39":539,"_156":57,"_37":540,"_13":158,"_33":34,"_35":541,"_23":24,"_160":-5,"_264":542,"_26":543},{"_42":531,"_31":181,"_29":513,"_155":192,"_40":41,"_39":532,"_156":57,"_37":533,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":534,"_26":535},{"_42":525,"_31":326,"_29":526,"_155":513,"_40":41,"_39":527,"_156":57,"_37":528,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":529,"_26":530},{"_42":518,"_31":519,"_29":520,"_155":513,"_40":41,"_39":521,"_156":57,"_37":522,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":523,"_26":524},{"_42":511,"_31":405,"_29":512,"_155":513,"_40":41,"_39":514,"_156":57,"_37":515,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":516,"_26":517},{"_42":504,"_31":505,"_29":506,"_155":192,"_40":41,"_39":507,"_156":57,"_37":508,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":509,"_26":510},{"_42":497,"_31":169,"_29":498,"_155":192,"_40":41,"_39":499,"_156":57,"_37":500,"_13":158,"_33":20,"_35":501,"_23":24,"_160":-5,"_264":502,"_26":503},{"_42":490,"_31":163,"_29":491,"_155":192,"_40":41,"_39":492,"_156":57,"_37":493,"_13":158,"_33":20,"_35":494,"_23":24,"_160":-5,"_264":495,"_26":496},{"_42":482,"_31":483,"_29":484,"_155":192,"_40":41,"_39":485,"_156":57,"_37":486,"_13":158,"_33":20,"_35":487,"_23":24,"_160":-5,"_264":488,"_26":489},{"_42":475,"_31":153,"_29":476,"_155":192,"_40":41,"_39":477,"_156":57,"_37":478,"_13":158,"_33":20,"_35":479,"_23":24,"_160":-5,"_264":480,"_26":481},{"_42":471,"_31":32,"_29":30,"_155":192,"_40":41,"_39":14,"_156":57,"_37":472,"_13":158,"_33":34,"_35":36,"_23":24,"_160":-5,"_264":473,"_26":474},{"_42":185,"_31":186,"_29":187,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":468,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":469,"_26":470},{"_42":464,"_31":396,"_29":391,"_155":187,"_40":41,"_39":61,"_156":57,"_37":465,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":466,"_26":467},{"_42":460,"_31":445,"_29":440,"_155":391,"_40":41,"_39":61,"_156":57,"_37":461,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":462,"_26":463},{"_42":453,"_31":454,"_29":455,"_155":440,"_40":41,"_39":61,"_156":57,"_37":456,"_13":158,"_33":34,"_35":457,"_23":24,"_160":-5,"_264":458,"_26":459},{"_42":446,"_31":447,"_29":448,"_155":440,"_40":41,"_39":61,"_156":57,"_37":449,"_13":158,"_33":34,"_35":450,"_23":24,"_160":-5,"_264":451,"_26":452},{"_42":437,"_31":438,"_29":439,"_155":440,"_40":41,"_39":61,"_156":57,"_37":441,"_13":158,"_33":34,"_35":442,"_23":24,"_160":-5,"_264":443,"_26":444},{"_42":433,"_31":418,"_29":413,"_155":391,"_40":41,"_39":61,"_156":57,"_37":434,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":435,"_26":436},{"_42":426,"_31":427,"_29":428,"_155":413,"_40":41,"_39":61,"_156":24,"_37":429,"_13":158,"_33":34,"_35":430,"_23":24,"_160":-5,"_264":431,"_26":432},{"_42":419,"_31":420,"_29":421,"_155":413,"_40":41,"_39":61,"_156":57,"_37":422,"_13":158,"_33":34,"_35":423,"_23":24,"_160":-5,"_264":424,"_26":425},{"_42":410,"_31":411,"_29":412,"_155":413,"_40":41,"_39":61,"_156":57,"_37":414,"_13":158,"_33":34,"_35":415,"_23":24,"_160":-5,"_264":416,"_26":417},{"_42":406,"_31":405,"_29":400,"_155":391,"_40":41,"_39":61,"_156":57,"_37":407,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":408,"_26":409},{"_42":397,"_31":398,"_29":399,"_155":400,"_40":41,"_39":61,"_156":57,"_37":401,"_13":158,"_33":34,"_35":402,"_23":24,"_160":-5,"_264":403,"_26":404},{"_42":388,"_31":389,"_29":390,"_155":391,"_40":41,"_39":61,"_156":57,"_37":392,"_13":158,"_33":34,"_35":393,"_23":24,"_160":-5,"_264":394,"_26":395},{"_42":381,"_31":382,"_29":383,"_155":187,"_40":41,"_39":61,"_156":57,"_37":384,"_13":158,"_33":34,"_35":385,"_23":24,"_160":-5,"_264":386,"_26":387},{"_42":374,"_31":32,"_29":375,"_155":187,"_40":41,"_39":61,"_156":57,"_37":376,"_13":158,"_33":377,"_35":378,"_23":24,"_160":-5,"_264":379,"_26":380},{"_42":180,"_31":181,"_29":182,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":371,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":372,"_26":373},{"_42":367,"_31":326,"_29":321,"_155":182,"_40":41,"_39":61,"_156":57,"_37":368,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":369,"_26":370},{"_42":363,"_31":362,"_29":357,"_155":321,"_40":41,"_39":61,"_156":57,"_37":364,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":365,"_26":366},{"_42":354,"_31":355,"_29":356,"_155":357,"_40":41,"_39":61,"_156":57,"_37":358,"_13":158,"_33":34,"_35":359,"_23":24,"_160":-5,"_264":360,"_26":361},{"_42":350,"_31":349,"_29":344,"_155":321,"_40":41,"_39":61,"_156":57,"_37":351,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":352,"_26":353},{"_42":341,"_31":342,"_29":343,"_155":344,"_40":41,"_39":61,"_156":57,"_37":345,"_13":158,"_33":34,"_35":346,"_23":24,"_160":-5,"_264":347,"_26":348},{"_42":334,"_31":335,"_29":336,"_155":321,"_40":41,"_39":61,"_156":57,"_37":337,"_13":158,"_33":34,"_35":338,"_23":24,"_160":-5,"_264":339,"_26":340},{"_42":327,"_31":328,"_29":329,"_155":321,"_40":41,"_39":61,"_156":57,"_37":330,"_13":158,"_33":34,"_35":331,"_23":24,"_160":-5,"_264":332,"_26":333},{"_42":318,"_31":319,"_29":320,"_155":321,"_40":41,"_39":61,"_156":57,"_37":322,"_13":158,"_33":34,"_35":323,"_23":24,"_160":-5,"_264":324,"_26":325},{"_42":311,"_31":312,"_29":313,"_155":182,"_40":41,"_39":61,"_156":57,"_37":314,"_13":158,"_33":34,"_35":315,"_23":24,"_160":-5,"_264":316,"_26":317},{"_42":304,"_31":305,"_29":306,"_155":182,"_40":41,"_39":61,"_156":57,"_37":307,"_13":158,"_33":20,"_35":308,"_23":24,"_160":-5,"_264":309,"_26":310},{"_42":297,"_31":298,"_29":299,"_155":182,"_40":41,"_39":61,"_156":57,"_37":300,"_13":158,"_33":34,"_35":301,"_23":24,"_160":-5,"_264":302,"_26":303},{"_42":290,"_31":291,"_29":292,"_155":182,"_40":41,"_39":61,"_156":57,"_37":293,"_13":158,"_33":20,"_35":294,"_23":24,"_160":-5,"_264":295,"_26":296},{"_42":174,"_31":175,"_29":176,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":287,"_13":158,"_33":178,"_35":-5,"_23":24,"_160":-5,"_264":288,"_26":289},{"_42":280,"_31":281,"_29":282,"_155":176,"_40":41,"_39":61,"_156":57,"_37":283,"_13":158,"_33":34,"_35":284,"_23":24,"_160":-5,"_264":285,"_26":286},{"_42":273,"_31":274,"_29":275,"_155":176,"_40":41,"_39":61,"_156":57,"_37":276,"_13":158,"_33":34,"_35":277,"_23":24,"_160":-5,"_264":278,"_26":279},{"_42":168,"_31":169,"_29":170,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":270,"_13":158,"_33":20,"_35":172,"_23":24,"_160":-5,"_264":271,"_26":272},{"_42":162,"_31":163,"_29":164,"_155":-5,"_40":41,"_39":61,"_156":24,"_37":267,"_13":158,"_33":20,"_35":166,"_23":24,"_160":-5,"_264":268,"_26":269},{"_42":152,"_31":153,"_29":154,"_155":-5,"_40":41,"_39":61,"_156":57,"_37":263,"_13":158,"_33":20,"_35":159,"_23":24,"_160":-5,"_264":265,"_26":266},["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,274],"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,281],["D",1747605308326],[258,259],[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,291],"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,298],"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,305],"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,312],"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,326,319],"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,326,328],"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",[],[181,326,335],"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,326,349,342],"npm","c39deb32-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[249],[181,326,349],"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,326,362,355],"icons","c39de754-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[247],[181,326,362],"c39e0040-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[246,248,250,251,252],[181,326],["D",1747605308326],[245,253,254,255,256],[181],"c39de34e-3432-11f0-9dcf-9e149126039e","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,32],"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,382],"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,396,389],"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,396,405,398],"utils","c39ddd68-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[240],[186,396,405],"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,396,418,411],"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,396,418,420],"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,396,418,427],"c39dd7dc-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[236,237,238],[186,396,418],"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,396,445,438],"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,396,445,447],"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,396,445,454],"c39dce7c-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[232,233,234],[186,396,445],"c39de07e-3432-11f0-9dcf-9e149126039e",["D",1747605308326],[231,235,239,241],[186,396],["D",1747605308326],[230,242,243],[186],"c5bd0baa-3432-11f0-aee7-9e149126039e",["D",1747605311743],[],[191,32],"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,483],"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,505],"c56285fe-3432-11f0-aee7-9e149126039e","c56286bc-3432-11f0-aee7-9e149126039e","c52c3756-3432-11f0-8628-9e149126039e",10,["D",1747605311303],[],[191,181,405],"c56aeac8-3432-11f0-aee7-9e149126039e","hooks","c56aeb9a-3432-11f0-aee7-9e149126039e",11,["D",1747605311358],[],[191,181,519],"c574fa0e-3432-11f0-a1b3-9e149126039e","c574fab8-3432-11f0-a1b3-9e149126039e",12,["D",1747605311422],[],[191,181,326],"c52c36a2-3432-11f0-8628-9e149126039e",4,["D",1747605310946],[220,221,222],[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,32],"c546f9ce-3432-11f0-92b1-9e149126039e","c546fa8c-3432-11f0-92b1-9e149126039e",7,["D",1747605311120],[],[191,186,405],"c5595182-3432-11f0-b02f-9e149126039e","tools","c5595222-3432-11f0-b02f-9e149126039e",9,["D",1747605311243],[],[191,186,551],"c550ca12-3432-11f0-92b1-9e149126039e","c550cabc-3432-11f0-92b1-9e149126039e",8,["D",1747605311185],[],[191,186,418],"c5b813ac-3432-11f0-8608-9e149126039e","queries.tsx","c5b815fa-3432-11f0-8608-9e149126039e","c53d0a22-3432-11f0-a617-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,572,564],"database","c5ba8196-3432-11f0-8db4-9e149126039e","c5ba824a-3432-11f0-8db4-9e149126039e","c57d303e-3432-11f0-a1b3-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,572,581,163],"usage-dashboard","c58767ca-3432-11f0-b278-9e149126039e","views","c5876928-3432-11f0-b278-9e149126039e",14,["D",1747605311542],[],[191,186,572,581,583],"c591e506-3432-11f0-b278-9e149126039e","c591e588-3432-11f0-b278-9e149126039e",15,["D",1747605311611],[],[191,186,572,581,405],"c59ba73a-3432-11f0-aee7-9e149126039e","c59ba7da-3432-11f0-aee7-9e149126039e",16,["D",1747605311678],[],[191,186,572,581,396],"c57d2f94-3432-11f0-a1b3-9e149126039e",13,["D",1747605311478],[210,211,212,213],[191,186,572,581],"c53d0950-3432-11f0-a617-9e149126039e",6,["D",1747605311058],[209,214],[191,186,572],"c5234678-3432-11f0-aee7-9e149126039e",3,["D",1747605310889],[208,215,216,217,218],[191,186],["D",1747605310834],[207,219,223,224,225,226,227,228],[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":656,"_657":658,"_659":660,"_661":24,"_662":24,"_663":24,"_664":57,"_665":-5,"_666":-7,"_667":-7,"_668":158,"_669":24,"_670":24,"_671":-5,"_672":24,"_673":24,"_674":24,"_675":-5},"ENV",{"_627":628,"_629":630,"_631":132,"_632":633,"_634":635,"_636":637,"_638":639,"_640":641,"_642":643,"_644":645,"_646":647,"_648":649,"_650":651,"_652":653,"_654":655},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v24